/*** init ***/

	@import url("reset.css");

	//header bg image animation delay
	@adelay: 8s; 

	//fonts
	@import url(https://fonts.googleapis.com/css?family=Khand:400,600);
	.khand(@size: 17px) {
		font-family: 'Khand', sans-serif;
		font-size: @size;
	}	
	
	//colors
	@green: #009c98;
	@lgray: #f8f8fe;
	@dgray: #484852;
	@mgray: @dgray + 100; 
	@fbblue: #324E97;
	@stred: #FD6A5C;

	//golden ratios
	@gr: 1.618;
	@gldbase: 100%;
	@gld10: @gldbase / @gr;
	@gld9:  @gldbase - @gld10;
	@gld8:  @gld9 / @gr;
	@gld7:  @gld9 - @gld8;
	@gld6:  @gld7 / @gr;
	@gld5:  @gld7 - @gld6;
	@gld4:  @gld5 / @gr;
	@gld3:  @gld5 - @gld4;
	@gld2:  @gld3 / @gr;
	@gld1:  @gld3 - @gld2;


	/***** mixins -----> */

	.clearfix {
	    &:before, &:after {
	        content: " ";
	        display: block;
	        height: 0px;
	        visibility: hidden;
	    }
	    &:after {
	        clear: both;
	    }
	    *zoom: 1;
	}

	.stred {
		color: @stred;
	}

	.transitions(@target:all, @time:.2s) {
	    transition: @target @time;
	    -moz-transition: @target @time;
	    -webkit-transition: @target @time;
	    -o-transition: @target @time;
	    -ms-transition: @target @time;
	}

	/*** waypoints ***/

	.wp1, .wp2, .wp3, .wp4, .wp5 {
		visibility: hidden;
	}
	.ws1, .ws2, .ws3, .ws4, .ws5, .ws6, .ws7, .ws8, .ws9, .ws10 {
		visibility: hidden;
	}
	.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight, .bounceInDown {
	    visibility: visible;
	}
	.delay-05s {
	    -webkit-animation-delay: 0.5s;
	    animation-delay: 0.5s;
	}
	.delay-1s {
	    -webkit-animation-delay: 1s;
	    animation-delay: 1s;
	}

/*** slideshow ***/

@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}

.cb-slideshow {
    position: relative;
    width: 100vw;
    height: 90vh;
    min-height: 300px;
    top: 0px;
    left: 0px;
    z-index: 0;
    display: block;
    overflow: hidden;
    &:after {
    	content: " ";
    	background: white;
    	opacity: .75;
    	position: absolute;
    	width: 100%;
    	height: 100%;
    }
	li {
		span {
			width: 100%;
		    height: 100%;
		    position: absolute;
		    top: 0px;
		    left: 0px;
		    color: transparent;
		    background-size: cover;
		    background-position: 50% 50%;
		    background-repeat: none;
		    opacity: 0;
		    z-index: 0;
		    animation: imageAnimation @adelay * 5 linear infinite 0s; 
		}
		&:nth-child(1) span { 
    		background-image: url(../bgimages/1.jpg);
		}
		&:nth-child(2) span { 
    		background-image: url(../bgimages/2.jpg);
    		animation-delay: @adelay; 
		}
		&:nth-child(3) span { 
    		background-image: url(../bgimages/3.jpg);
    		animation-delay: @adelay * 2; 
		}
		&:nth-child(4) span { 
    		background-image: url(../bgimages/4.jpg);
    		animation-delay: @adelay * 3; 
		}
		&:nth-child(5) span { 
    		background-image: url(../bgimages/5.jpg);
    		animation-delay: @adelay * 4; 
		}
	}
}

/*** layout ***/

body {
	background: @lgray;
	color: @dgray;
	.khand();
}

h1, h2, h3, h4, h5, h6 {
	.khand();
	font-weight: 600;
}

h1 {
	font-size: 2em;
}

textarea {
	resize: vertical;
	background: white;
}

p.centered {
	text-align: center;
}

#header {
	position: relative;
	.header-logo {
		position: absolute;
		left: @gld7;
		width: @gld8;
		top: 0;
		//background: white;
		padding: @gld3 0 0 0;
	}
	.slogan {
		position: absolute;
		left: @gld7;
		top: @gld10;
		font-size: 4em;
		font-weight: 400;
		letter-spacing: .7em;
		color: @green;
		//color: white;
	}
	.scrolldown {
		position: absolute;
		display: block;
		left: @gld7;
		bottom: @gld6;
		width: 80px;
		height: 100px;
		img {
			width: 100%;
		}
	}
}

.wrapper {
	padding: @gld3 @gld7;
}

.greenbg {
	background: @green;
	color: white;
}

.tshold {
	background: @green url(../img/cubebg.svg) left bottom no-repeat;
	background-size:25%;
	position: relative;
	border-top: 1px solid @green - 20; 
	.tshaje {
		background: url(../img/tsaje_sml.jpg) no-repeat;
		background-position: 75% bottom;
		background-size: auto 90%;
		height: 100%;
		width: 100%;
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
	}
}

.fbblue {
	background-color: @fbblue;
}

.services {
	position: relative;
	z-index: 1;
	li {
		background: fade(white, 10%);
		display: block;
		padding: @gld3;
		width: @gld10;
		font-size: 1.5em;
		margin-bottom: @gld2;
	}
}

#fcb_link {
	color: white;
	background-color: white;
	line-height: 56px;
	font-size: 2em;
	.fblogo {
		width: 2em;
		vertical-align: middle;
		margin-right: 2%
	}

	.lgcontn {
		//height: 200px;
		img {
			//height: 200px;
			//width: auto;
			-webkit-filter: grayscale(100%); 
			filter: grayscale(100%);
			&:hover {
				-webkit-filter: grayscale(0%);
				filter: grayscale(0%);
			}
		}
	}


}

.whitelink {
	color: white;
	&:hover {
		opacity: .7;
	}
	font-weight: 600;
}

.formwrp {
	background: url(../img/cubebg2.svg) right bottom no-repeat;
	background-size: 25%;
	border-top: 1px solid @dgray + 100;
	border-bottom: 1px solid @dgray + 85;
	box-shadow: inset 0px -60px 90px fade(@dgray, 18%);
	/*rgba(100, 101, 119, 0.28);*/
}

.dgray {
	background: @dgray;
	color: @mgray;
	position: relative;
	p.address {
		font-size: 2em;
		text-align: center;
		span.atitle {
			font-size: 80%;
			color: @mgray + 50;
		}
	}
}

/*** form ***/

.oform {
	padding: 40px 00px;
	//background-color: fade(@stgray, 15%);
	border-radius: 3px;
	//margin-bottom: 50px;
	#content4 {
		margin-top: 0px;
		font-weight: 400;
		margin-bottom: 2em;
		color: @mgray;
	}

	.form-group {
		.clearfix;
		margin-bottom: 40px;
		position: relative;
		label {
			display: none;
			width: 100%;
		}
		.help-block {
			display: block;
			position: absolute;
			top: -22px;
			font: 15px Arial,helvetica,sans-serif;
			font-style: italic;
			color: @stred;
		}
	}

	.form-control {
		width: 100%;
		.khand(21px);
		.transitions;
		box-sizing: border-box;
		//&[type=text] {
			padding: 8px;
			border: 2px solid @dgray;
			border-radius: 2px;
			&:focus {
				border-color: @mgray;
				.transitions;
			}
		//}
		&.error {
			border-color: @stred !important;
		}
	}

	.success {
		background: #7baf0b;
		color: white;
		.khand(21px);
		text-align: center;
		padding: 20px;
		margin-bottom: 20px;
		display: none;
	}

	button {
		background: @dgray;
		padding: 20px;
		.khand(21px);
		color: white;
		border: 0px;
		border-radius: 2px;
		line-height: 21px;
		cursor: pointer;
		.transitions;
		&:hover {
			background-color: @mgray;
			.transitions;
		}
	}

}

footer {
	background-color: @mgray;
	color: @dgray + 50;
	p {
		line-height: 1.2em;
	}
	.fblogo {
	    height: 1em;
	    margin-right: .5em;
	    opacity: .75;
	}
	.hidden {
		visibility: hidden;
	}
	.rightaligned {
		p {
			text-align: right;
		}
	}
	.centered {
		p {
			text-align: center;
		}
	}
	.logoft {
		width: 50%;
		opacity: .3;
	}
	.whitelink {
		color: @dgray + 25;
	}
}




/*******************************************/
/****************** respo ******************/
/*******************************************/

/*@media only screen and (max-width : 3840px) { 

	.tshaje {
    	background: url(../img/tsaje_big.jpg) no-repeat !important;
    	background-position: 20% bottom !important;
    }
    .services {
    	font-size: 1.75em;
    }
    .slogan {
    	font-size: 8em !important;
    }
    .fbblue {
    	font-size: 4em !important;
    }
    .formwrp {
    	padding: 25em 1% !important;
    	#content4 {
    		margin-bottom: 1em;
    		font-size: 4em;
    	}
    	.form-control {
    		font-size: 2em !important;
    	}
    	.help-block {
    		font-size: 22px !important;
    		top: -28px !important;
    	}
    	button {
    		font-size: 2em !important;
    		padding: 1em 2em !important;
    		line-height: 2em !important;
    	}
    }
    .dgray {
	    top: 6.1em;
	    font-size: 2em;
	    line-height: 2em;
	}

}

@media only screen and (max-width : 3280px) { 

	.tshaje {
		background: url(../img/tsaje_big.jpg) no-repeat !important;
    	background-position: 20% bottom !important;
    	background-size: auto 90% !important;
    }
    .services {
    	font-size: 1.25em;
    }
    .slogan {
    	font-size: 5em !important;
    }
    .fbblue {
    	font-size: 2em !important;
    }
    .formwrp {
    	padding: 14em 1% !important;
    	#content4 {
    		margin-bottom: 1em;
    		font-size: 3em;
    	}
    	.form-control {
    		font-size: 1.5em !important;
    	}
    	.help-block {
    		font-size: 22px !important;
    		top: -28px !important;
    	}
    	button {
    		font-size: 1.5em !important;
    		padding: .75em 1.5em !important;
    		line-height: 1.5em !important;
    	}
    }
	.dgray {
	    position: fixed;
	    top: 5em;
	    left: 75vw;
	    width: 25%;
	    padding: 1%;
	    font-size: 1.25em;
	    line-height: 2em;
	}

}

/*@media only screen and (min-width: 1920px) and (max-width: 3840px) { 

	.ws1, .ws2, .ws3, .ws4, .ws5, .ws6, .ws7, .ws8, .ws9, .ws10 {
		visibility: visible !important;
	}

	body {
		overflow: hidden;
	}

	#header {
		height: 100vh;
		width: 50vw;
		.header-logo {
			width: 50% !important;
		}
		.cb-slideshow {
			height: 100vh;
			width: 50vw;
		}
		.scrolldown {
			display: none;
		}
		.slogan {
			top: inherit;
			bottom: @gld6;
			letter-spacing: 0.2em;
		}
	}
	.tshold {
		width: 25%;
		position: fixed;
		top: 0px;
		left: 50vw;
		height: 100vh;
		padding: 1%;
    	box-sizing: border-box;
    	overflow: hidden;
    	.tshaje {
    		background-position: 0% bottom;
    	}
    	.services {
    		li {
    			background: fade(@green - 50, 50%);
    			line-height: 1.5em !important;
    		}
    	}
	}
	.fbblue {
		position: fixed;
		top: 0px;
		width: 25%;
		left: 75vw;
		padding: 1%;
		span {
			display: none;
		}
	}
	.formwrp {
		position: fixed;
		top: 0;
		width: 25%;
		height: 100vh;
		left: 75vw;
		padding: 5em 1%;
		z-index: 2;
		.col-md-6 {
			width: 100% !important;
		}
	}
	footer {
		position: fixed;
		bottom: 0;
		width: 25%;
		left: 75vw;
		z-index: 4;
		.leftcol {
			display: none;
		}
		.centered {
			display: none;
		}
		.rightaligned {
			width: 100% !important;
			p {
				text-align: center;
			}
		}
	}
	.dgray {
	    position: fixed;
	    left: 75vw;
	    width: 25%;
	    padding: 1%;
	}
}
*/

@media only screen and (max-width : 1920px) { 
	
	.services {
		li {
			font-size: 1.25em !important;
		}
	}
	.formwrp {
		padding-top: 12em !important;
	}
	.oform {
		#content4 {
			font-size: 3em;
			line-height: 1em;
			margin-bottom: .7em !important;
		}
		.form-group {
			margin-bottom: 35px;
		}
		.form-control {
			font-size: 1.25em !important;
		}
		.help-block {
			font-size: 17px !important;
			top: -22px !important;
		}
	}
	.dgray {
	    position: fixed;
	    top: 6em;
	    left: 75vw;
	    width: 25%;
	    padding: 1%;
	    font-size: 1.0em;
	    line-height: 2em;
	}

}

@media only screen and (max-width : 1919px) { 

	#header {
		.header-logo {
			left: @gld6;
		}
		.slogan {
			font-size: 3em;
			letter-spacing: .4em;
			top: 50%;
			left: @gld6;
		}
		.scrolldown {
			left: @gld6;
		}
	}
	.wrapper {
		padding: @gld4 @gld6 !important;
	}
	.tshaje {
		background-position: right bottom !important;
	}
	footer p {
		font-size: .9em;
	}
	.dgray {
	    position: relative;
	    top: auto;
	    left: 0;
	    width: 100%;
	}
}

@media only screen and (max-width : 1280px) {  

	.slogan {
		font-size: 4em !important;
	}
	.dgray { 
		font-size: 90%;
	}

}

@media only screen and (max-width : 991px) { 

	.fbblue {
		font-size: 26px !important;
	}

	footer {
		p {
			text-align: center !important;
		}
		.logoft {
			width: 200px;
			margin: 10px 0px; 
		}
	}

}

@media only screen and (max-width : 769px) { 

	.header-logo {
		width: 45% !important;
	}	

}

@media only screen and (max-width : 641px) { 

	#header {
		.slogan {
			font-size: 3em;
			letter-spacing: .2em;
			top: 50%;
			left: @gld6;
		}
	}
	.fbblue {
		font-size: 20px !important;
		.fblogo {
			width: 1em !important;
		}
	}
	.tshaje {
		display: none;
	}
	.services {
		li {
			width: 100%;
		}
	}

}

@media only screen and (max-width : 481px) { 

	.header-logo {
		padding: 5% !important;
		width: 100% !important;
		left: 0px !important;
		box-sizing: border-box;
	}
	.fbblue {
		line-height: 1.2em !important;
	}

}

@media only screen and (max-width : 320px) { 

}