@charset "utf-8";
/* CSS Document */
@font-face { font-family: 'Avant'; font-weight:normal; src: url('fonts/AvantR.eot'); src: url('fonts/AvantR.eot') format('embedded-opentype'), url('fonts/AvantR.woff2') format('woff2'), url('fonts/AvantR.woff') format('woff'), url('fonts/AvantR.ttf') format('truetype'), url('fonts/AvantR.svg#Avant') format('svg');}
@font-face { font-family: 'Avant'; font-weight:bold; src: url('fonts/AvantM.eot'); src: url('fonts/AvantM.eot') format('embedded-opentype'), url('fonts/AvantM.woff2') format('woff2'), url('fonts/AvantM.woff') format('woff'), url('fonts/AvantM.ttf') format('truetype'), url('fonts/AvantM.svg#Avant') format('svg');}

* {margin:0; padding:0;} a {outline:none; text-decoration:none;} img {max-width:100%; height:auto; border:0 none;}
.body {background:#352b67; color:#fff; font-family:'Avant', Arial, Helvetica, sans-serif; float:left; width:100%;}
.main {margin:0 auto; width:90%; max-width:1620px; position:relative;} .section {width:100%; float:left; clear:both;}

.header {display:table; height:100vh; background:#463c76; position:relative;}
.header:after {content:""; position:absolute; top:0; bottom:0; width:60%; background:#352b67 url(images/bg-divide.png) no-repeat 100% 50% / auto 1600px;}
 
.header .content {float:left; width:100%;} .header .main {height:100vh; z-index:1;}
.header h1.logo {width:80%; max-width:260px; margin-left:5px; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.header h2.tags {position:absolute; margin-right:5px; margin-top:-5px; right:0; top:50%; transform:translateY(-50%); font-size:24px; line-height:1.3;}

.header .scroll-down {position:absolute; bottom:60px; left:50%; margin-left:-26px; width:53px;}
.header .scroll-down a {height:52px; display:block; background:url(images/icon-down.png) no-repeat 50% 50% /53px auto;}

.socials { float:right; margin-top:60px;}
.socials .link {display:inline-block; margin:0 5px; text-align:left;}
.socials .link a {display:inline-block; height:63px; width:63px; opacity:0.55; text-decoration:none; color:#fff; text-indent:-999em; background:url(images/icon-socials.png) no-repeat 0 64px /auto 63px; transition:opacity 600ms;} .socials .link a:hover {opacity:1;}
.socials .link a.icon-ig {background-position:0px 0;} .socials .link a.icon-fb {background-position:-546px 0;}
.socials .link a.icon-tw {background-position:-156px 0;} .socials .link a.icon-vm {background-position:-234px 0;}
.socials .link a.icon-in {background-position:-468px 0;} .socials .link a.icon-em {background-position:-390px 0;}
.socials .link a.icon-ph {background-position:-312px 0;}

.featured {background: #ffffff; padding:35px 0;} .featured a {transition:all 400ms;} .featured a.popup:hover {opacity:.85;}
.featured .col-x4 {float:left; width:25%; box-sizing:border-box; padding:5px;}

.footer { display:table; height:100vh; text-align:center;} 
.footer a {color:#fff; text-decoration:none; transition:color 350ms;} .footer a:hover {color:#a694ff;}
.footer h3 {padding-bottom:15px; font-size:30px; line-height:1;} .footer p {padding-bottom:15px; font-size:24px; line-height:1;}
.footer h3:last-child, .footer p:last-child {padding-bottom:0;}
.footer .content {vertical-align:middle; display:table-cell; height:100%;}
.footer .logo {width:80%; max-width:635px; margin:0 auto 85px;}

@media (min-width: 1600px){
	.header:after {width:55%;} .header h1.logo {max-width:380px;} .header h2.tags {font-size:36px;}
	.footer .logo {max-width:956px;} .footer h3 {font-size:36px;} .footer p {font-size:30px;}
}
@media (min-width: 2100px){ .header:after {width:57%;}} 
@media (max-width: 1280px){
	.header:after {width:53%; background-size:auto 1080px;} .header h1.logo {max-width:180px;}
	.header .scroll-down {bottom:35px;} .socials {margin-top:35px;}
}
@media (min-width: 768px) and (max-width: 960px){
	.header:after {display:none;}
	.header .content {position:absolute; top:50%; transform:translateY(-50%); width:100%;}
	.header h1.logo, .header h2.tags {position:static; transform:translateY(0%); margin:50px auto; text-align:center;}
	.socials {text-align:center; width:100%;} .socials .link {margin:0 3px;}
}
@media (max-width: 767px){
	.body {min-width:300px;} .header:after {display:none;}
	.header .scroll-down {bottom:20px; width:38px; margin-left: -19px;} .header .scroll-down a {height:36px; background-size:auto 36px;}
	.header .content {position:absolute; top:50%; transform:translateY(-50%); width:100%;} .header h1.logo {max-width:135px;}
	.header h1.logo, .header h2.tags {position:static; transform:translateY(0%); margin:15px auto; text-align:center;}
	
	.footer h3 {font-size:22px;} .footer p {font-size:16px;}
	.footer .logo {max-width:478px; margin-bottom:35px;}
	.socials {text-align:center; width:100%; margin-top:15px;} .socials .link {margin:0 2px;} 
	.socials .link a {width:37px; height:36px; background-size:auto 36px;}
	.socials .link a.icon-fb {background-position:-311px 0;} .socials .link a.icon-tw {background-position:-88px 0;} 
	.socials .link a.icon-vm {background-position:-133px 0;} .socials .link a.icon-in {background-position:-267px 0;} 
	.socials .link a.icon-em {background-position:-223px 0;} .socials .link a.icon-ph {background-position:-178px 0;}
}
@media (max-width:960px) and (orientation: landscape) { 
	.featured .col-x4 {width:33.33%;} .header h2.tags {font-size:16px;} 
}
@media (max-width:600px) and (orientation: portrait) { 
	.featured .col-x4 {width:50%;} .header h2.tags {font-size:12px; line-height:1.5;} .footer h3 {font-size:18px;} .footer p {font-size:14px;}
}