@charset "utf-8";
/* CSS Document */

/*BORON STUDIO - www.boronstudio.com -*/

/*GENERICS*/

html{width:100%; height:100%}

body{width:100%; height:100%; overflow:hidden; background:#1a1a1a; background-size:cover; font-size:1em; font-family:Arial, Helvetica, sans-serif; font-weight:400; color:#000000;  -webkit-font-smoothing: antialiased; /*-webkit-transform: translate3d(0,0,0);  -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0);*/}

*:focus {outline: none;}

a{color:#006BB1; text-decoration:none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}

header, section, article, aside, footer, div{box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; position:relative;}

	/*FONTS*/
	@font-face {
	    font-family: 'latobold';
	    src: url('fonts/lato-bold-webfont.woff2') format('woff2'),
	         url('fonts/lato-bold-webfont.woff') format('woff');
	    font-weight: normal;
	    font-style: normal;
	}
	@font-face {
	    font-family: 'latoregular';
	    src: url('fonts/lato-regular-webfont.woff2') format('woff2'),
	         url('fonts/lato-regular-webfont.woff') format('woff');
	    font-weight: normal;
	    font-style: normal;
	}

	/*LOADER*/
	#html5Loader{width:100%; height:100%; position:fixed; top:0; left:0; background:#1a1a1a; z-index:9999;}
	#html5Loader:before{width:80px; height:112px; position:absolute; top:-250px; left:0; right:0; bottom:0; margin:auto; background:url(../../img/ic_big_s.svg) no-repeat; background-size:80px 112px; z-index:999; content:'';}

	
	/*ELEMENTS*/

	#shapes-mask { width:1600px; height:100%; position:fixed; z-index: 2; top:0; left:0; right:0; margin:0 auto;}

	#shapes-mask .scene{width:100%; height: 100%;}
		
		#shapes-mask .layer{width:60px; height:60px; position:absolute; background:url(../../img/sp_elements.svg) no-repeat transparent; opacity:0.4;}
		#shapes-mask .layer.element_01{top:40px !important; left:-300px !important; right:0; margin:0 auto; background-position:0px -35px;}
		#shapes-mask .layer.element_02{top:200px !important; left:20px !important; background-position:0px -90px;}
		#shapes-mask .layer.element_03{top:400px !important; left:550px !important; background-position:0px -150px;}
		#shapes-mask .layer.element_04{bottom:180px !important; left:200px !important; top:auto !important; background-position:0px -205px;}
		#shapes-mask .layer.element_05{bottom:50px !important; left:20px !important; top:auto !important; background-position:0px -267px;}
		#shapes-mask .layer.element_06{bottom:20px  !important; left:-500px !important; right:0; margin:0 auto; top:auto !important; background-position:0px -680px;}
		#shapes-mask .layer.element_07{top:50px !important; right:-550px !important; left: 0 !important; margin:0 auto; background-position:0px -351px;}
		#shapes-mask .layer.element_08{top:250px !important; right:200px !important; left: auto !important; background-position:0px -428px;}
		#shapes-mask .layer.element_09{top:400px !important; right:80px !important; left: auto !important;  background-position:0px -509px;}
		#shapes-mask .layer.element_10{bottom:450px !important; right:550px !important; left: auto !important;  top:auto !important; background-position:0px -267px;}
		#shapes-mask .layer.element_11{bottom:70px !important; right:150px !important; left: auto !important;  top:auto !important; background-position:0px -599px;}
		#shapes-mask .layer.element_12{bottom:20px !important; right:600px !important; left: auto !important;  top:auto !important; background-position:0px -90px;}

	
	/*VIDEOS*/
	.vjs-control-bar,
	.video-js p{display:none;}


	/*CONTENT*/
	section{width:100%; height:100%; float:left;}

		/*Big S*/
		.big_s{width:500px; height:700px; position:absolute; top:0; bottom:0; left:20px; margin:auto 0; background:url(../../img/ic_big_s.svg) no-repeat; text-indent:-9999px; z-index:2;}

		/*Navigation*/
		nav{height:200px; position:absolute; top:-420px; bottom:0; margin:auto 0; left:550px; z-index:5;}
		nav ul{display:block;}
		nav ul li{display:block;}
		nav ul li a{position:relative; height:65px; display:inline-block; padding:0 15px;}
		nav ul li a span{color:#3DB690; font-family:'latobold', sans-serif; font-size:3.125em; font-weight:normal; position:relative; z-index:2; transition:all 0.35s ease-out; -webkit-transition:all 0.35s ease-out;}
		nav ul li a:hover span{color:#FFFFFF;}
		nav ul li a:before{width:0px; height:100%; position:absolute; top:0; left:0; right:0; margin:0 auto; background:#4D4D4D; transition:all 0.35s ease-out; -webkit-transition:all 0.35s ease-out; z-index:1; content:'';}
		nav ul li a:hover:before{width:100%;}

		/*Information*/
		.information{width:600px; position:absolute; bottom:100px; z-index:2; font-family:'latoregular', sans-serif;}
			
			.information h1,
			.information h3{width:490px; float:left; font-size:0.875em; font-weight:normal; line-height:1.750em; color:#FFFFFF;}

			.information h2,
			.information h4{width:460px; height:auto; float:left; position:relative;}
				
				.information h2 span,
				.information h4 span{width:100%; float:left; position:relative; font-weight:normal;}
				.information h2 .title,
				.information h4 .title{font-size:1.875em; color:#3DB690;}
				.information h2 .title:after,
				.information h4 .title:after{width:90px; height:30px; position:absolute; top:0; bottom:0; left:-100px; background:url(../../img/bg_arrow.svg) no-repeat; content:'';}
				.information h2 .subtitle,
				.information h4 .subtitle{font-size:7.500em; color:#FFFFFF; left:-10px;}

				/*Animation*/
				.information{right:50px; opacity:0; transition:all 0.50s ease-out; -webkit-transition:all 0.50s ease-out;}
				.information.hover{right:110px; opacity:1;}

					/*Hidden General*/
					.info_general{right:110px; opacity:1; transition:all 0.50s ease-out; -webkit-transition:all 0.50s ease-out;}
					.info_general.hidden{right:50px; opacity:0;}

	
	/*Pace PreLoader*/
	.pace{-webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none;}
	.pace-inactive{display: none;}
	.pace .pace-progress {background-color:rgba(0, 0, 0, 0.19999999999999996);  position:fixed;  z-index:-1; top:0; right:100%; bottom:0;  width:100%;}

	/*IPAD PORTRAIT*/
	@media (max-width: 1050px) {

		body{background:url(../../img/mobile/bg_ipad.jpg) no-repeat; background-size:cover;}

		/*CONTENT*/

			/*Information*/
			.information{width:405px; right:50px; bottom:150px;}

	}


	/*MOBILE*/
	@media (max-width: 1000px) {
		html{height:auto !important; overflow-y:auto;}
		body{height:auto !important; background:url(../../img/mobile/bg_mobile.jpg) no-repeat; background-size:cover;}

		/*ELEMENTS*/
		#shapes-mask{display:none;}


		/*CONTENT*/
		section{}

			/*VIDEOS*/
			#big-video-wrap{display:none;}

			/*Big S*/
			.big_s{width:80px; height:112px; top:0; display:block; position:relative; margin:15px auto; left:0; background-size:80px 112px;}

			/*Navigation*/
			nav{width:100%; float:left; height:auto; position:relative; top:0; bottom:auto; left:0;}
			nav ul li{text-align:center; margin:0 0 15px;}
			nav ul li:last-child{margin:0;}
			nav ul li a{width:calc(100% - 30px); border:#3DB690 2px solid; margin:0 auto; height:45px; padding:0; display:block; line-height:45px;}
			nav ul li a span{font-size:1em;}
			nav ul li a:before{display:none;}

			/*Information*/
			.information{width:100%; right:auto; float:left; margin:30px 0; position:relative; bottom:auto; padding:0 25px; box-sizing:border-box; -webkit-box-sizing:border-box;}
			.information h1,
			.information h3{width:100%; font-size:0.875em; line-height:1.5em; text-align:center;}
			.information h2,
			.information h4{width:300px; height:65px; left:auto; margin:0 auto; overflow:hidden; float:none; background:url(../../img/bg_sinergia_title.svg) no-repeat; background-size:300px 65px; position:relative; text-indent:-9999px;}
			.information h2 .subtitle{}

				/*Information Hidden*/
				.info_cowork,
				.info_incubate,
				.info_design,
				.info_campus{display:none;}

				/*Information Visible*/
				.info_general{right:auto; opacity:1;}
				.info_general.hidden{right:auto; opacity:1;}

		
	}