// VARS

	@bodyFont: 'Open Sans', sans-serif;
	@headersFont: 'Open Sans', sans-serif;

	@margin: 10px;
	@padding: 15px;
	@radius: 2%;
	@boxShadow: 0px 2px 10px 0px rgba(0,0,0,0.45);

	@blue: #3F51B5;
	@red: #b71c1c;
	@green: #4CAF50;
	@orange: #FF5722;
	@white: #FFFFFF;
	@gray: #757575;
	@black: #000000;

	@color: @black;

	@mobile: ~"only screen and (max-width: 549px)";
	@tablet: ~"only screen and (min-width: 550px) and (max-width: 949px)";
	@desktop: ~"only screen and (min-width: 950px) and (max-width: 1199px)";
	@wide: ~"only screen and (min-width: 1200px)";
	
// RESET

	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,s,samp,small,strike,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0}
	li{list-style-position: inside;}
	*{
		&:before{content: '';}
		&:after{content: '';}
		&:focus{outline: none;}
	}

// GRID

	@totalCols: 12;
	@columnWidth: 100% / @totalCols;

	.colWidth(@n) {
		@colsWithMargin: (@totalCols / @n) - 1;
		@totalMargin: @colsWithMargin * @margin;
		@realCols: @totalCols / @n;
		width: calc(@columnWidth * @n - @totalMargin / @realCols);
	}

	.row{

		margin-bottom: @margin;

		&:after {
			content: '';
			display: table;
			clear: both;
		}

		.col{
			width: 100%;
			min-height: 1px;
			float: left;
			box-sizing: border-box;
			margin-bottom: @margin;
		}

		@media @mobile{
			.col:not(.mCenter){
				text-align: left;
			}
			.col:not(:last-child){
				margin-bottom: @margin * 2;
			}
		}

		@media @tablet, @desktop, @wide {

			.col{
				margin-left: @margin;
				margin-bottom: 0;
				&:first-child{margin-left: 0;}
			}

			.of{
				&1{.colWidth(1);}
				&2{.colWidth(2);}
				&3{.colWidth(3);}
				&4{.colWidth(4);}
				&5{.colWidth(5);}
				&6{.colWidth(6);}
				&7{.colWidth(7);}
				&8{.colWidth(8);}
				&9{.colWidth(9);}
				&10{.colWidth(10);}
				&11{.colWidth(11);}
				&12{.colWidth(12);}
			}

		}

	}

// TYPO

	*{
		font-family: @bodyFont !important;
	}

	html{
		font-size: 62.5%;
	}

	body{
		font-size: 1.8em;
		line-height: 1.4em;
		font-weight: 400;
		*{font-size: 1.0em;}
		input, textarea, select{font-size: 1.0em !important;}
	}

	h1, h2, h3, h4{
		font-family: @headersFont !important;
		font-weight: 300; 
	}

	h1{
		font-size: 4.0rem; 
		line-height: 1.2;  
		letter-spacing: -.1rem;
	}
	h2{
		font-size: 3.6rem; 
		line-height: 1.25; 
		letter-spacing: -.1rem;
	}
	h3{
		font-size: 3.0rem; 
		line-height: 1.3;  
		letter-spacing: -.1rem;
	}
	h4{
		font-size: 2.4rem; 
		line-height: 1.35; 
		letter-spacing: -.08rem;
	}

	@media (min-width: 550px) {
		h1{font-size: 5.0rem;}
		h2{font-size: 4.2rem;}
		h3{font-size: 3.6rem;}
		h4{font-size: 3.0rem;}
	}

// TAGS

	html,
	body{
		width: 100%;
	}

	body{
		color: black;
		min-width: 320px;
	}

	h1, h2, h3, h4{text-align: center;}

	input,
	textarea,
	select{
		.transition;
		resize: vertical;
		padding: @padding;
		margin: @margin 0;
		width: calc(100% - 2px - (@padding * 2));
		border: 1px solid lighten(@gray, 25%);
		&:hover{
			border-style: dashed;
		}
		&:focus{
			border-color: lighten(@orange, 10%);
		}
	}

	select{
		padding: @padding - 1px;
		width: 100%;
	}

	input[type='radio'],
	input[type='checkbox'] {
		display: inline-block;
		width: auto;
	}

// SERVICE CLASSES

	// WRAPPERS

		.wrap{
			margin: 0 auto;
			width: 95%;
			@media @tablet{width: 85%;}
			@media @desktop, @wide{width: 65%;}
		}

	// POPUPS

		.popUp{
			.shadow;
			.dN;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: white;
			overflow-x: hidden;
			overflow-y: auto;
			height: 75%;
			width: 95%;
			@media @tablet{width: 85%;}
			@media @desktop, @wide{width: 65%;}
			.popUpClose{
				cursor: pointer;
				position: absolute;
				background-color: pink;
				width: 64px;
				height: 64px;
				right: 5px;
				top: 5px;
			}
		}

	// DISPLAY

		.dN{
			display: none;
		}

		.dB{
			display: block;
		}

		.dIB{
			display: inline-block;
		}

	// POSITION

		.pR{
			position: relative;
		}

		.pA{
			position: absolute;
		}

		.pF{
			position: fixed;
		}

		.pS{
			position: sticky;
		}

		.pTL{
			top: 0;
			left: 0;
		}

		.pTR{
			top: 0;
			right: 0;
		}

		.pBL{
			bottom: 0;
			left: 0;
		}

		.pBR{
			bottom: 0;
			right: 0;
		}

		.pC{
			transform-style: preserve-3d;
			&V{
				top: 50%;
				transform: translateY(-50%);
			}
			&H{
				left: 50%;
				transform: translateX(-50%);
			}
			&VH{
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

	// Z

		.z1{
			z-index: 1;
		}

		.z2{
			z-index: 2;
		}

		.z3{
			z-index: 3;
		}

		.z4{
			z-index: 4;
		}

		.z5{
			z-index: 5;
		}

		.z6{
			z-index: 6;
		}

		.z7{
			z-index: 7;
		}

		.z8{
			z-index: 8;
		}

		.z9{
			z-index: 9;
		}

		.z10{
			z-index: 10;
		}
	
	// INDENTS

		// PADDING

			.p{padding: @padding;}
			.p0{padding: 0;}
			.pX2{padding: @padding * 2;}
			.pX3{padding: @padding * 3;}
			.pX4{padding: @padding * 4;}
			.pX5{padding: @padding * 5;}
			.pV{padding: @padding 0;}
			.pVX2{padding: (@padding * 2) 0;}

			// RIGH
				
				.pR{padding-right: @padding;}
				.pR0{padding-right: 0;}
				.pRX2{padding-right: (@padding * 2);}
				.pRX3{padding-right: (@padding * 3);}
				.pRX4{padding-right: (@padding * 4);}
				.pRX5{padding-right: (@padding * 5);}

			// BOTTOM

				.pB0{padding-bottom: 0;}

		// MARGIN

			// FULL

				.m{margin: @margin;}
				.mX2{margin: @margin * 2;}
				.mX3{margin: @margin * 3;}
				.mX4{margin: @margin * 4;}
				.mX5{margin: @margin * 5;}

			// VERTICAL
				
				.mV{margin: @margin 0;}
				.mVX2{margin: (@margin * 2) 0;}
				.mVX3{margin: (@margin * 3) 0;}
				.mVX4{margin: (@margin * 4) 0;}
				.mVX5{margin: (@margin * 5) 0;}

			// HORISONTAL

				.mH{margin: 0 @margin;}
				.mHX2{margin: 0 (@margin * 2);}
				.mHX3{margin: 0 (@margin * 3);}
				.mHX4{margin: 0 (@margin * 4);}
				.mHX5{margin: 0 (@margin * 5);}

			// TOP

				.mT{margin-top: @margin;}
				.mTX2{margin-top: (@margin * 2);}
				.mTX3{margin-top: (@margin * 3);}
				.mTX4{margin-top: (@margin * 4);}
				.mTX5{margin-top: (@margin * 5);}

			// BOTTOM

				.mB{margin-bottom: @margin;}
				.mBX2{margin-bottom: (@margin * 2);}
				.mBX3{margin-bottom: (@margin * 3);}
				.mBX4{margin-bottom: (@margin * 4);}
				.mBX5{margin-bottom: (@margin * 5);}

			// LEFT

				.mL{margin-left: @margin;}
				.mLX2{margin-left: (@margin * 2);}
				.mLX3{margin-left: (@margin * 3);}
				.mLX4{margin-left: (@margin * 4);}
				.mLX5{margin-left: (@margin * 5);}

			// RIGH

				.mR{margin-right: @margin;}
				.mRX2{margin-right: (@margin * 2);}
				.mRX3{margin-right: (@margin * 3);}
				.mRX4{margin-right: (@margin * 4);}
				.mRX5{margin-right: (@margin * 5);}
	
	// BORDERS

		.bd{
			&Radius{
				border-radius: @radius;
			}
			&Solid{
				border: 1px solid;
				&2{border-width: 2px;}
				&3{border-width: 3px;}
				&4{border-width: 4px;}
				&5{border-width: 5px;}
			}
			&Dotted{
				border: 1px solid;
				&2{border-width: 2px;}
				&3{border-width: 3px;}
				&4{border-width: 4px;}
				&5{border-width: 5px;}
			}
			&Dashed{
				border: 1px dashed;
				&2{border-width: 2px;}
				&3{border-width: 3px;}
				&4{border-width: 4px;}
				&5{border-width: 5px;}
			}
			&White{background-color: @white;}
			&Black{background-color: @black;}
			&Gray{background-color: @gray;}
			&Blue{background-color: @blue;}
			&Red{background-color: @red;}
			&Green{background-color: @green;}
			&Orange{background-color: @orange;}
			&Color{border-color: @color;}
		}

	// TEXT ALIGN

		.tAL{
			text-align: left;
		}

		.tAC{
			text-align: center;
		}
		
		.tAR{
			text-align: right;
		}

		.tAJ{
			text-align:justify;
		}

	// COLORS

		.c{
			&White{
				color: @white;
				&:Hov{
					.transition;
					&:hover{
						color: darken(@white, 10%);
					}
				}
			}
			&Black{
				color: @black;
				&:Hov{
					.transition;
					&:hover{
						color: darken(@black, 10%);
					}
				}
			}
			&Gray{
				color: @gray;
				&:Hov{
					.transition;
					&:hover{
						color: darken(@gray, 10%);
					}
				}
			}
			&Blue{
				color: @blue;
				&:Hov{
					.transition;
					&:hover{
						color: darken(@blue, 10%);
					}
				}
			}
			&Red{
				color: @red;
				&:Hov{
					.transition;
					&:hover{
						color: darken(@red, 10%);
					}
				}
			}
			&Green{
				color: @green;
				&:Hov{
					.transition;
					&:hover{
						color: darken(@green, 10%);
					}
				}
			}
			&Orange{
				color: @orange;
				&:Hov{
					.transition;
					&:hover{
						color: darken(@orange, 10%);
					}
				}
			}
			&Color{
				color: @color;
				&:Hov{
					.transition;
					&:hover{
						color: darken(@color, 10%);
					}
				}
			}
		}

	// BGS

		.bg{

			&Cover{
				background-size: cover;
				background-position: center;
			}

			&White{
				background-color: #fff;
				&Hov{
					.transition;
					background-color: #fff;
					&:hover{
						background-color: darken(#fff, 10%);
					}
				}
			}

			&Black{
				background-color: @black;
			}

			&Gray{
				background-color: @gray;
				&Hov{
					.transition;
					background-color: @gray;
					&:hover{
						background-color: darken(@gray, 10%);
					}
				}
			}

			&Blue{
				background-color: @blue;
				&Hov{
					.transition;
					background-color: @blue;
					&:hover{
						background-color: darken(@blue, 10%);
					}
				}
			}

			&Red{
				background-color: @red;
				&Hov{
					.transition;
					background-color: @red;
					&:hover{
						background-color: darken(@red, 10%);
					}
				}
			}

			&Green{
				background-color: @green;
				&Hov{
					.transition;
					background-color: @green;
					&:hover{
						background-color: darken(@green, 10%);
					}
				}
			}

			&Orange{
				background-color: @orange;	
				&Hov{
					.transition;
					background-color: @orange;
					&:hover{
						background-color: darken(@orange, 10%);	
					}	
				}	
			}

			&Color{
				background-color: @color;
				&Hov{
					.transition;
					background-color: @color;
					&:hover{
						background-color: darken(@color, 10%);	
					}	
				}	
			}

		}
	
	// SIZE

		.full{
			width: 100%;
			height: 100vh;
		}

		.sHF{
			height: 100vh;
		}

	// MISC

		.transition{
			transition: all 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
		}

		.shadow{
			box-shadow: @boxShadow;
		}

		.cP{
			cursor: pointer;
		}

		.btn{
			.cP;
			.dIB;
			color: white;
			padding: @padding @padding * 2;
			text-transform: uppercase;
		}

		.overlay{
			display: none;
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
		}
		.overlayBlack05{
			.overlay;
			background-color: rgba(0,0,0,0.5);
		}
		.overlayWhite05{
			.overlay;
			background-color: rgba(255,255,255,0.5);
		}