@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,700';

@media screen {
	body {background:#100f10; width:100%; padding:0; margin:0; font-family: 'Roboto', sans-serif; font-family:1em; color:#fff; font-weight:300; line-height:1.2; position:relative;}
	.row {position:relative;}
	.column {position:relative;}
	p {line-height:1.2; margin:0;}
	
	header {background:#363e47; position:relative; padding:0; margin:0; width:100%; z-index:1; box-shadow:0 3px 8px rgba(0,0,0,0.5); position:fixed;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#21252b+0,363e47+27,919191+50,363e47+73,21252b+100 */
background: #21252b; /* Old browsers */
background: -moz-linear-gradient(-45deg, #21252b 0%, #363e47 27%, #919191 50%, #363e47 73%, #21252b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #21252b 0%,#363e47 27%,#919191 50%,#363e47 73%,#21252b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #21252b 0%,#363e47 27%,#919191 50%,#363e47 73%,#21252b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#21252b', endColorstr='#21252b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
	footer {background:#100f10; position:relative; padding:0; margin:0;}
	
	.content {position:relative; padding:0; margin:0;}
	.visual {background-repeat: no-repeat; background-position: 10% 88px; background-image:url(../images/custom/visual-top.jpg); background-color:#363e47; background-size:auto 100%; padding:80px 0 0;}
	.logo {padding:0; text-align:center;margin:-10px 0 0;}
	.logo img {max-width:200px;}
	.slogan {color:#1077b6; padding:8px 0 0 0px; font-size:20px; margin:0; text-transform: uppercase; font-family: 'Roboto'; position:absolute; left:0; top:5px; width:100%; text-align:center;}
	
	.sign-in {position:absolute; right:16px; top:86px;}
	.link-login {color:#fff; display:block; font-family: 'Roboto', sans-serif; font-weight:300; font-size:16px; line-height:38px; padding:0; text-transform: uppercase;} 
	.link-login:hover,.link-login:focus {color:#fff;} 

	.let-me-look {display:none; cursor: pointer; outline:none; text-transform: uppercase; color:#fff;margin:270px auto 3em; width:70%;font-family:'Roboto', sans-serif; font-weight:700;text-align:center; line-height: 1.4;  border: none; font-size: 22px; padding: 15px 0;  box-shadow: 2px 4px 4px rgba(0,0,0,0.7); border: 3px solid #fff; border-radius:15px;
	background: #b20060; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #b20060 0%, #fe0090 50%, #ac005a 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #b20060 0%,#fe0090 50%,#ac005a 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #b20060 0%,#fe0090 50%,#ac005a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b20060', endColorstr='#ac005a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
	.let-me-look:hover,.let-me-look:focus {color:#fff; text-decoration:none;}	
 
	.welcome-content {background:#222; padding:140px 0;} 
	.welcome-bg {background:url(../images/custom/visual-top.jpg) no-repeat 10% 88px; background-attachment:fixed; position:absolute; left:0; top:0; width:100%; height:100%; opacity:0.1; background-size:auto 100%;}
	.welcome {color:#c5daf1;font-weight:300; overflow:hidden; background:rgba(0,0,0,0.5); padding:10px 35px 30px; border-radius:6px; width:80%; margin:0 auto;}
	.welcome p {font-size:20px; color:#c5daf1; margin:0 0 25px}
	.welcome h3 {font-size:30px; color:#b60063; font-weight:400; padding:45px 0 15px; font-family: 'Roboto', sans-serif; text-transform:uppercase;}
	.mobile-pic {float:left; display:inline-block; display:none;}

	.frontpage-content {padding:0 0 100px; background:#00b0ff;}
		
	.reg-form {max-width:356px; margin:0 auto; padding:0;}
	.reg-form-top {position:relative; float:right; margin:90px 0 3em; min-height:510px;}
	.reg-form-bottom {margin:150px auto 100px;}
	
	.reglink {background:rgba(0,154,255,0.7);padding:14px 40px; font-size:26px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; font-family: 'Roboto', sans-serif; font-weight:500; box-shadow:0 4px 0px rgba(0,0,0,0.1);color:#fff;text-transform:capitalize;margin:140px auto 100px;display:inline-block; min-width:240px;}	
	.reglink:hover,.reglink:focus {color:#fff;}	

	.policy-popup {display:none; width:48%; position:fixed; top:18%; left:50%; margin-left:-24%; height:500px; background:#fff; z-index:1003; padding:20px; box-shadow:0 0 5px rgba(0,0,0,0.6);}
	.policy-popup iframe {border:none; overflow-y:scroll;}
	.policy-popup .close-popup {position:absolute; right:10px; top:5px; color:#222; font-family: "Alegreya Sans SC",sans-serif; font-size: 18px;  font-weight: 600;}
	.javascript-notification {width:100%; color:#fff; background:#000; text-align:center; font-size:20px; line-height:2;}

	#footer-links {background:#100f10; border-top: 3px solid #b60063; padding:0 0 40px;}	
	.footerLinks {padding:10px 0 30px;}
	.footerLinks ul {text-align:center; margin:0; padding:30px 0 0px;}
	.footerLinks li {display:inline-block; margin:0 10px;}
	.footerLinks li a {text-decoration:none; color:#97adc5; font-size:1em;}
	.footerLinks li a:hover {text-decoration:underline;}
	.notification-message {font-size:12px; text-align:center; color:#366582; margin:10px 0;}
		
	.form .label {background:none;}
	label {line-height:normal;}
}


@media only screen and (max-width: 75.063em) { /*1200*/
	.visual {background-position: 25% 88px;}
	.welcome-bg {background-position: 25% 88px; background-size:auto 110%;}	
	.welcome {padding:0 35px 1px 20px;}
}
@media only screen and (max-width: 64.063em) { /*1024*/
	.welcome {width:94%;}
}
@media only screen and (max-width: 62.063em) { /*980*/
	.welcome h3 {font-size: 24px;}
}

@media only screen and (max-width: 50.063em) { /*768*/
	.visual {background-position: 10% 88px;}
	.welcome-bg {background-position: 10% 88px;}
	.policy-popup {left:3%; width:94%; margin:0;}		
	.link-login {padding:0 30px;}
	.reg-form-top {margin:90px auto 3em; float:none;}
	.welcome {padding:0 20px 1px 20px;}	
}

@media only screen and (max-width: 40.063em) { /*640*/
	.visual {background-position: 16% 88px;}
	.welcome-bg {background-position: 16% 88px;}
	.link-login { padding: 0 20px; font-size: 16px; line-height: 34px;}
}

@media only screen and (max-width: 30.063em) { /*480*/
    .logo img {max-width: 150px;}        
	.visual {background-position: 16% 60px; padding:55px 0 0;}
	.welcome-bg {background-position: 19% 60px; background-size:auto 100%;}	
	.reg-form {width:100%;margin:50px auto 1em;}
	.reg-form-top {display:none;}
	.sign-in {right:0; top:15px;}
	.let-me-look {display:block;}
	.reglink {width:70%;}
	.welcome-content {padding:70px 0;}
	.policy-popup {height:350px;}
}

@media only screen and (max-width: 24.063em) { /*385*/
	.slogan {font-size:16px;}
	.let-me-look { width:100%;}	
	.welcome h3 {font-size:20px; padding:35px 0 15px;}
	.link-login { font-size: 14px; line-height: 28px;  padding: 0 10px;}

	.reglink{font-size:20px;padding:14px 25px; width:100%;}
	.joinbutton {padding:0; width:94%;}
}