html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
body { direction: ltr; font-family: Montserrat, Arial; font-size: 13px; line-height: 20px; color: #858686; }
h1, h2 { margin: 20px 0 0 0; padding: 0; font-size: 25px; line-height: 30px; font-weight: normal; color: #9d9d9d; text-transform: uppercase;}
h1 { font-size: 30px; }
h1, .blue { color: #29a3dd; }
p, ul, ol, li { margin: 0; padding: 0; }
a { color: #858686; text-decoration: none; }
a:hover { color: #29a3dd; text-decoration: none; }
a img { border: none; }
.bold { font-weight: bold; }

section { display: block; position: relative; }
section.left, section.right { width: 50%; height: 100%; }
section.left { float: left; }
section.right { float: right; }
section.grey { background-color: #e1e1e1; }
section.inner { margin: 0 auto; padding: 0 20px; max-width: 1180px; }
.left .inner, .right .inner { max-width: 590px; }
section .bg { position: absolute; pointer-events: none; background-position: center center; background-repeat: no-repeat; background-size: cover; }

header { display: block; position: relative; height: 376px; background-position: center center; background-repeat: no-repeat; background-size: cover; }
header .inner { height: 100%; }
header .menu-btn { display: none; }
header .logo { position: absolute; bottom: -29px; left: 20px; width: 184px; z-index: 2; }
header .slideshow { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; }
header .slideshow .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }
#main_menu { position: absolute; bottom: 0; left: 220px; z-index: 2; }
#main_menu a { display: inline-block; vertical-align: bottom; padding: 14px 84px 14px 20px; width: 20px; overflow: visible;
	font-size: 15px; line-height: 20px; color: #fff; text-transform: capitalize; text-decoration: none; }
#main_menu a:hover, #main_menu a.selected, #main_menu a.selected:hover { color: #29a3dd; text-decoration: none; }
#main_menu a.selected, #main_menu a.selected:hover { background: url(../images/tab.png) 14px 100% no-repeat; }

footer { clear: both; display: block; height: 410px; background-color: #29a3dd; }
footer .logo { position: absolute; top: 23px; right: 19px; height: 31px; }
footer .copyright { font-size: 11px; color: #fff; }
#follow_us { display: block; padding: 23px 0 16px 0; }
#follow_us a { display: inline-block; margin-right: 10px; width: 42px; height: 42px; text-indent: -9999px; background: url(../images/follow-sprite.png) no-repeat; background-size: auto 41px; }
#follow_us .fb { background-position: 0px 0px; }
#follow_us .tw { background-position: -54px 0px; }
#follow_us .yt { background-position: -107px 0px; }
#follow_us .in { background-position: -162px 0px; }

.home header { background-image: url(../images/header/home/01.jpg); }
.home h1 { font-size: 25px; }
.home p { margin: 24px 0 0 0; font-size: 13px; }
.home .top { padding: 60px 0; }
.home .top .bg { top: calc(100% - 445px); left: 53%; width: 34%; z-index: 2; }
.home .top .inner { top: 0; left: 50%; margin: 0; margin-left: calc(-30% - 20px); padding: 0 20px; width: 34%; }
.home .bottom { padding: 40px 0; }
.home .bottom .bg { top: 0; left: 0; width: 50%; height: 100%; background-image: url(../images/home/crowd.jpg); background-position: right center; }
.home .bottom .inner { top: 0; left: 50%; margin: 0; width: 29%; }

.faces header { background-image: url(../images/header/faces/01.jpg); }
.faces .top { padding: 70px 0; }
.faces .top h1 { display: inline-block; vertical-align: top; margin: 0; width: 180px; }
.faces .top p { display: inline-block; vertical-align: top; margin: 0 0 0 20px; width: 400px; font-size: 15px; letter-spacing: -1px; }
.faces .bottom { padding: 40px 0; }
.faces .bottom .face { display: inline-block; vertical-align: top; margin-right: 60px; margin-bottom: 40px; width: calc(49% - 60px); }
.faces .bottom .face h2 { display: inline-block; vertical-align: middle; margin-left: 20px; }
.faces .bottom .face h2 .blue { font-size: 15px; }
.faces .bottom .face img { vertical-align: middle; width: 180px; height: 180px; }
.faces .bottom .face ul { list-style: bullets; margin: 20px 0 0 20px; }

.platforms header { background-image: url(../images/header/platforms/01.jpg); }
.platforms .left { padding: 70px 0 150px 0; text-align: right; }
.platforms .right { padding: 250px 0 100px 0; }
.platforms .left .inner, .platforms .right .inner { display: inline-block; margin: 0; text-align: center; }
.platforms .inner  h1, .platforms .inner  h2, .platforms .inner  p { text-align: left; }
.platforms .inner  p { font-size: 15px; }
.platforms .left  img, .platforms .right  img { display: inline-block; margin: 0 auto; }
.platforms .left .inner h1 { margin: 0 0 100px 0; width: 200px; }
.platforms .left .inner .logo { margin-bottom: 100px; }
.platforms .right .inner .logo { margin-bottom: 78px; }
.platforms .inner h2 { margin: 0 0 20px 0; }
.platforms .left .inner p { padding-bottom: 50px; max-width: 480px; }
.platforms .right .inner h2,.platforms .right .inner p { padding-left: 11.6%; }
.platforms .right .inner p { padding-bottom: 90px; max-width: 380px; }
/*.platforms  .main .inner .more { visibility: hidden; }
.platforms.no-hover  .main .inner .more { visibility: visible; }*/
.platforms  .main .inner .more img { width: 100%; }

.contact header { background-image: url(../images/header/contact/01.jpg); }
.contact .left, .contact .right { padding: 120px 0 140px 0; }
.contact .left { text-align: right; }
.contact .left .inner, .contact .right .inner { z-index: 1; }
.contact .left .inner h1 { display: none; }
.contact .left .inner p { margin-bottom: 200px; font-size: 15px; text-align: left; }
.contact .right .inner p { margin-bottom: 25px; font-size: 15px; }
.contact .center { position: absolute; top: 0; left: 0; width: 200%; height: 100%; text-align: center; z-index: 0; }
.contact .center img { height: 100%; }
.contact form { display: inline-block; position: relative; width: 380px; }
.contact form .error { position: absolute; top: -60px; left: 0; width: 100%; height: 60px; text-align: left; color: #ff0000; }
.contact form .text, .contact form .text { display: block; box-sizing: border-box; margin: 0 0 20px 0; padding: 4px 10px; width: 100%; height: 30px; font-size: 15px; line-height: 20px; color: #858686; border: solid 1px #c2c2c2; }
.contact form textarea.text { height: 230px; }
.contact form .button { float: right; padding: 0 20px; height: 30px; font-size: 15px; line-height: 30px; text-transform: uppercase; color: #fff; background: #29a3dd; border: 0; }
.placeholder { color: #cfcfcf; }

@media screen and (max-width:1260px), screen and (max-device-width:1260px) {
	.left .inner, .right .inner { max-width: calc(100% - 40px); }
}

@media screen and (max-width:750px), screen and (max-device-width:750px) {
	body { font-size: 26px; line-height: 40px; }
	h1, h2 { margin: 40px 0 0 0; font-size: 40px; line-height: 40px; }


	section.left, section.right { float: none; width: 100%; height: auto; }
	section.inner { padding: 0 40px; max-width: auto; }
	.left .inner, .right .inner { max-width: auto; }
	section .bg { position: relative; pointer-events: auto; }

	header { height: 356px; background-position: center center; background-size: cover; }
	header .menu-btn { display: block; position: absolute; right: 40px; padding-right: 35px; height: 30px; font-size: 30px; line-height: 30px; z-index: 101;
		color: #fff; text-transform: uppercase; text-decoration: none; background: url(../images/arrows.png) no-repeat;
		top: auto; bottom: 15px; background-position: right -5px; 
		-webkit-transition: top .3s, bottom .3s; -moz-transition: top .3s, bottom .3s; transition: top .3s, bottom .3s; }
	header .menu-btn.open { position: fixed; top: 35px; bottom: auto; background-position: right -45px; 
		-webkit-transition: top .3s, bottom .3s; -moz-transition: top .3s, bottom .3s; transition: top .3s, bottom .3s; }
	header .logo { bottom: -51px; left: 40px; width: 324px; }
	#main_menu { position: fixed; top: -100%; bottom: auto; left: 0; width: 100%; height: auto; max-height: 100%; overflow: auto; background: #29a3dd; z-index: 100; 
		-webkit-transition: top .2s; -moz-transition: top .2s; transition: top .2s; }
	#main_menu.open { top: 0; -webkit-transition: top .2s; -moz-transition: top .2s; transition: top .2s; }
	#main_menu a { display: block; padding: 0 40px; width: auto; height: 90px; font-size: 40px; line-height: 90px; text-transform: uppercase; }
	#main_menu a:first-child { margin-top: 118px; }
	#main_menu a:hover, #main_menu a.selected, #main_menu a.selected:hover { color: #fff; text-decoration: none; background: #106c98; }

	footer { height: 253px; }
	footer .logo { top: 30px; right: 40px; height: 68px; }
	footer .copyright { display: block; width: 75%; font-size: 22px; line-height: 30px; opacity: 0.5; filter: alpha(opacity=50); }
	#follow_us { padding: 30px 0 23px 0; }
	#follow_us a { width: 71px; height: 71px; background-size: auto 70px; }
	#follow_us .tw { background-position: -92px 0px; }
	#follow_us .yt { background-position: -184px 0px; }
	#follow_us .in { background-position: -280px 0px; }

	.home header { background-image: url(../images/header/home/mobile/01.jpg); }
	.home h1 { margin: 0; font-size: 40px; }
	.home p { margin: 50px 0 0 0; font-size: 26px; line-height: 40px; }
	.home .top { padding: 50px 0 90px 0; }
	.home .top .bg { top: 0; left: 17%; width: 80%; }
	.home .top .inner { top: -40px; left: 0; margin: 0; padding: 0 40px; width: auto; }
	.home .bottom { padding: 0 0 40px 0; }
	.home .bottom .bg { top: 0; left: 0; width: 100%; height: 440px; background-position: center center; }
	.home .bottom .inner { left: 0; width: auto; }
	
	.faces header { background-image: url(../images/header/faces/mobile/01.jpg); }
	.faces .top { padding: 60px 0 40px 0; }
	.faces .top h1 { margin: 50px 0; width: auto; }
	.faces .top p { display: block; margin: 0; width: auto; font-size: 26px; line-height: 40px; }
	.faces .bottom { padding: 50px 0 130px 0; }
	.faces .bottom .face { display: block; margin-right: 0; width: auto; }
	.faces .bottom .face h2 .blue { font-size: 24px; }
	
	.platforms header { background-image: url(../images/header/platforms/mobile/01.jpg); }
	.platforms .left { padding: 110px 0 50px 0; text-align: left; }
	.platforms .right { padding: 120px 0 110px 0; }
	.platforms .left .inner, .platforms .right .inner { display: block; }
	.platforms .inner  p { font-size: 26px; }
	.platforms .inner h2 { margin: 0 0 50px 0; }
	.platforms .left .inner h1 { margin: 0 0 90px 0; width: auto; }
	.platforms .left .inner .logo { margin-bottom: 70px; }
	.platforms .right .inner .logo { margin-bottom: 120px; }
	.platforms .left .inner p { padding-bottom: 80px; max-width: 100%; }
	.platforms .right .inner h2,.platforms .right .inner p { padding-left: 0; }
	.platforms .right .inner p { padding-bottom: 80px; max-width: 100%; }
	.platforms  .main .inner .more { visibility: visible; }

	.contact header { background-image: url(../images/header/contact/mobile/01.jpg); }
	.contact .left { padding: 50px 0 100px 0; text-align: left; }
	.contact .right { padding: 70px 0 0 0; } 
	.contact .left .inner h1 { display: block; margin: 60px 0; }
	.contact .left .inner p { margin-bottom: 0px; font-size: 30px; }
	.contact .right .inner p { margin-bottom: 40px; font-size: 30px; line-height: 50px; }
	.contact .right .inner p  .blue { font-size: 40px; }
	.contact .center { display: none; }
	.contact form { display: block; width: auto; }
	.contact form .error { position: relative; top: 0; height: auto; }
	.contact form .text, .contact form .text { margin: 0 0 35px 0; padding: 8px 20px; height: 50px; font-size: 25px; line-height: 35px; }
	.contact form textarea.text { height: 405px; }
	.contact form .button { padding: 0 30px; height: 54px; font-size: 30px; line-height: 54px; }
}