/* mixed classes */
.transition(@e:all, @s:0.7s){ transition:@e @s; -moz-transition:@e @s; -webkit-transition:@e @s; -o-transition:@e @s; }
.transitionbc(@e:background-color, @s:0.3s){ transition:@e @s; -moz-transition:@e @s; -webkit-transition:@e @s; -o-transition:@e @s; }
.transitionscale(@e:transform, @s:0.7s){ transition:@e @s; -moz-transition:@e @s; -webkit-transition:@e @s; -o-transition:@e @s; }
.textshadow(@x:0, @y:-1px, @b:1px, @c:#000){ text-shadow:@x @y @b @c; }
.shadow(@x:0, @y:0, @b:1px, @c:#000){ box-shadow:@x @y @b @c; -webkit-box-shadow:@x @y @b @c; -moz-box-shadow:@x @y @b @c; }
.radius(@px:5px){ -webkit-border-radius:@px; -moz-border-radius:@px; border-radius:@px; }


/* fonts */
/*.helvetica{ font-family:'fhelvetica',fhelvetica,arial,sans-serif,tahoma,verdana; }
.nove{ font-family:'fnove',fnove,arial,sans-serif,tahoma,verdana; }*/
.museo{ font-family:'fmuseo',fmuseo,arial,sans-serif,tahoma,verdana; }
.museo100{ font-family:'fmuseo100',fmuseo100,arial,sans-serif,tahoma,verdana; }
.museo300{ font-family:'fmuseo300',fmuseo300,arial,sans-serif,tahoma,verdana; }
.museo700{ font-family:'fmuseo700',fmuseo700,arial,sans-serif,tahoma,verdana; }


/* design */
body{  }


/* lead */
#lead{ background:url('../img/bg-lead.jpg') repeat-x top center; min-height:400px; border-top:7px solid #ff0042; position:relative; padding-top:420px; background-size:auto 475px;
	.buttons{ height:120px; width:40%; min-width:400px; margin:-8% auto 0 auto;
		a{ display:block; width:100px; padding-top:70px; color:#667378; text-decoration:none; font-weight:800; font-weight:700; text-transform:uppercase; text-align:center; font-size:13px; background-size:60px 1000px !important; .textshadow(0,1px,5px,#fff); .museo700; }
		a.ios{ background:url('../img/btn-ios.png') no-repeat center top; float:left; }
		a.android{ background:url('../img/btn-android.png') no-repeat center top; float:right; }
		a.mobile{ margin:0 auto; }
		a:hover { background-position:center -500px; }
	}
	h2{ margin:20px 0 0 0; color:#a3abae; font-weight:300; font-weight:100; text-align:center; line-height:44px; font-size:38px; .museo100;
		span{ color:#ff0042; }
	}
}


/* social icons */
#social{ height:62px; margin:50px auto;
	.large-12{ height:inherit; position:relative; background-image:url('../img/bg-social.jpg'); }
	.fadeLeft{ height:62px; width:50%; background:url('../img/fade-left.png') repeat-y left center; background-size:50% auto; position:absolute; left:0; }
	.fadeRight{ height:62px; width:50%; background:url('../img/fade-right.png') repeat-y right center; background-size:50% auto; position:absolute; right:0; }
}


/* has social network */
#hasit .large-12, #hasitMobile .large-12{ position:relative;
	h2{ color:#fff; text-align:center; margin-top:30px; font-weight:300; font-size:36px; line-height:40px; position:absolute; bottom:60px; width:100%; left:0; right:0; .museo300; }
	.arrow{ position:absolute; width:58px; height:25px; top:-2px; left:50%; margin-left:-29px; background:url('../img/social-arrow.png') no-repeat center -4px; }
}
#hasit{ background:url('../img/bg-kids.jpg') no-repeat top center; min-height:720px; -moz-background-size:cover; -webkit-background-size:cover; background-size:cover;
	.large-12{ height:720px; }
}
#hasitMobile{ background:url('../img/bg-kids-mobile.jpg') no-repeat top center; -moz-background-size:cover; -webkit-background-size:cover; background-size:cover; overflow-y:hidden;
	.large-12{
		h2{ font-size:22px; line-height:26px; bottom:20px; }
	}
}


/* bridge lead */
#kikit{
	.whatsthat{ width:210px; height:221px; padding:12px 35px; background:url('../img/bg-whatsthat.png') no-repeat center top; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; position:absolute; top:-40px; right:0px;
		p{ text-align:center; color:#9ba4a7; margin:10px 5px; font-size:16px; line-height:20px; .museo; }
		.name{ font-size:28px; font-weight:600; font-weight:500; line-height:30px; color:#ff0042; margin:0; }
		.how{ color:#ff0042; font-size:22px; line-height:24px; font-weight:400; margin:0; }
		.strong{ font-weight:600; font-weight:500; }
	}
	.whatsarrow{ display:none; }
	h1{ color:#9ba4a7; margin:130px 0 5px 0; font-size:60px; line-height:66px; font-weight:200; font-weight:100; text-align:center; .museo100;
		div{ padding:25px 89px; display:inline; background:url('../img/logo-bridge.png') no-repeat center 35px; background-size:auto 59px; }
	}
	.hr{ width:80%; height:60px; margin:0 auto; background:url('../img/hr.png') no-repeat center; -webkit-background-size:contain; -moz-background-size:contain; background-size:contain; }
	h2{ color:#9ba4a7; margin:5px 0 20px 0; font-size:32px; line-height:38px; font-weight:300; font-weight:100; text-align:center; .museo100; }
}


/* slider */
#slider{ height:700px; background:#bcbbbd url('../img/bg-slide.png') repeat-y; margin-top:100px; -moz-background-size:contain; -webkit-background-size:contain; background-size:contain; position:relative;
	.slider{ width:100%; height:700px; overflow:hidden;
		ul{ padding:0; margin:0; height:700px; 
			li{ display:block; float:left; margin:0; padding:0; float:left; height:100%;
				div{ width:100%; height:540px; margin:20px 0 0 0; }
				span{ display:block; width:90%; margin:-20px auto 0 auto; color:#fff; text-align:center; font-size:44px; line-height:48px; font-weight:300; .museo300; }
			}
			li.slide1 div{ background:url('../img/slide1.png') no-repeat center; background-size:auto 280px; }
			li.slide2 div{ background:url('../img/slide2.png') no-repeat center; background-size:auto 280px; }
			li.slide3 div{ background:url('../img/slide3.png') no-repeat center; background-size:auto 280px; }
		}
		.navi{ margin:0 auto; position:absolute; bottom:25px; left:50%;
			div{ float:left; width:14px; height:14px; margin:0 1px; background:url('../img/bevels.png') no-repeat; background-position:-5px 0; cursor:pointer; }
			div.active{ background-position:-25px 0; }
		}
	}
	.shadowTop{ width:100%; height:30px; background:url('../img/shadow-top.png') no-repeat center top; position:absolute; top:0; }
	.shadowBottom{ width:100%; height:30px; background:url('../img/shadow-bottom.png') no-repeat center bottom; position:absolute; bottom:0; }
}


/* footer */
footer{ padding:10px 0 20px 0;
	.buttons{ height:120px; width:260px; margin:50px auto 30px auto;
		a{ display:block; width:100px; padding-top:70px; color:#667378; text-decoration:none; font-weight:800; font-weight:700; text-transform:uppercase; text-align:center; font-size:13px; background-size:60px 1000px !important; .textshadow(0,1px,5px,#fff); .museo700; }
		a.ios{ background:url('../img/btn-ios.png') no-repeat center top; float:left; }
		a.android{ background:url('../img/btn-android.png') no-repeat center top; float:right; }
		a.mobile{ margin:0 auto; }
		a:hover { background-position:center -500px; }
	}
	h2{ margin:0; color:#a3abae; font-weight:300; font-weight:100; text-align:center; line-height:44px; font-size:38px; .museo100; }
	.logo{ margin-top:50px; width:100%; height:60px; background:url('../img/logo-bridge.png') no-repeat center; background-size:auto 50px; }
	.social{ height:50px; width:174px; margin:30px auto;
		a{ display:block; width:46px; height:46px; margin:0 6px; float:left; background:#b3b9bb url('../img/ico-social.png') no-repeat; background-size:160px 105px; .transitionbc; }
		a:hover { background-color:#ff0042; }
		.fb{ background-position:-4px -4px; }
		.tw{ background-position:-57px -4px; }
		.mail{ background-position:-110px -4px; }
	}
	p{ margin:0; text-align:center; font-weight:400; font-size:12px; line-height:14px; color:#9da6a9; .museo; }
}


/* misc */
.clear{ float:none !important; clear:both !important; height:0 !important; }
.ui-loader{ display:none; }


@media only screen and (max-width:900px) { /* small res */
	#kikit{
		.whatsthat{ position:static; margin:20px auto 0 auto; background:url('../img/bg-whatsthat-small.png') no-repeat center top; -moz-background-size:cover; -webkit-background-size:cover; background-size:cover; width:100%; height:auto; padding:12px 0;
			p{ margin-left:12%; margin-right:12%; }
		}
		.whatsarrow{ display:none; background:url('../img/arrow-whatsthat-small.png') no-repeat center top; -moz-background-size:contain; -webkit-background-size:contain; background-size:contain; width:100%; height:80px; }
		h1{ margin-top:50px;
		div{ background-size:auto 53px; padding:25px 77px; background-position:center 40px; }
		}
	}
}


@media only screen and (max-width: 668px) { /* handheld */
	body.android{
		#lead .buttons{ height:90px !important;
			a.mobile.android{ display:block !important; float:none !important; width:100% !important; }
			a.mobile.ios{ display:none !important; width:100% !important; }
		}
		footer .buttons a.mobile.android{ display:block !important; float:none !important; }
		footer .buttons a.mobile.ios{ display:none !important; }
	}
	body.ios{
		#lead .buttons{ height:90px !important;
			a.mobile.android{ display:none !important; width:100% !important; }
			a.mobile.ios{ display:block !important; float:none !important; width:100% !important; }
		}
		footer .buttons a.mobile.android{ display:none !important; }
		footer .buttons a.mobile.ios{ display:block !important; float:none !important; }
	}

	#lead{
		h2{ font-size:17px; line-height:22px; }
		.buttons{ min-width:200px; width:100%; margin-top:30px; }
	}

	#kikit{
		.whatsthat{ position:static; margin:20px auto 0 auto; background:url('../img/bg-whatsthat-mob.png') no-repeat center top; -moz-background-size:cover; -webkit-background-size:cover; background-size:cover; width:100%; height:auto; padding:12px 0;
			p{ margin-left:12%; margin-right:12%; }
		}
		.whatsarrow{ display:none; background:url('../img/arrow-whatsthat.png') no-repeat center top; -moz-background-size:contain; -webkit-background-size:contain; background-size:contain; width:100%; height:80px; }
		h1{ font-size:40px; line-height:46px; margin:50px 0 5px 0;
			div{ background-size:auto 36px; padding:25px 53px; background-position:center 34px; }
		}
		h2{ font-size:26px; line-height:34px;
			br{ display:none; }
		}
	}

	#slider{
		.slider{ height:inherit;
			ul{ height:inherit; 
				li{ 
					div{ margin:20px 0 0 0; }
					span{ display:block; width:90%; margin:0 auto; font-size:26px; line-height:32px; }
				}
			}
			.navi{ bottom:40px; }
		}
	}

	footer{
		.buttons{ margin:-40px auto 5px auto; }
		.logo{ height:40px; background-size:auto 34px; margin-top:50px; }
		.social{ margin:20px auto 5px auto; }
	}
}

@media only screen and (min-width: 1200px) { /* big screen */
	.row{ max-width:80em !important; }
	
	#lead{
		h2{ font-size:56px; line-height:60px; margin:40px 0 30px 0;
			br{ display:none; }
		}
	}

	#social{ margin:50px auto 100px auto; }

	#hasit .row .large-12{
		h2{ font-size:56px; line-height:60px; }
	}
	
	#kikit .large-12{
		h1{ font-size:74px; line-height:76px;
			div{ background-size:auto 67px; padding:25px 98px; background-position:center 42px; }
		}
		h2{ font-size:43px; line-height:54px; }
	}

	#slider{
		.slider{ 
			ul{ 
				li{ 
					span{ font-size:45px; line-height:53px; }
				}
			}
		}
	}

	footer{
		h2{ font-size:56px; line-height:60px; }
	}
}