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

@media screen {
	body {background:#000; 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;}
	
	header {background:#000; position:relative; padding:0; margin:0; width:100%; z-index:1; top:0; left:0;}
	footer {background:#000; position:relative; padding:60px 0; margin:0;}

	.content {position:relative; padding:0; margin:0;}
	.visual {background-repeat: no-repeat; background-position: center center; background-image:url(../images/custom/visual-top.jpg); background-color:#000; background-size:100% auto; min-height:540px; z-index:1;}
	.logo img{max-width:100%;}
	.slogan {color:#d5d5d5; padding:29px 0 0 0px; font-size:20px; margin:0; text-transform:uppercase;}
	
	.sign-in {position:absolute; right:30px; top:23px;}
	.link-login {color:#fff; display:block; font-family: 'Roboto', sans-serif; font-weight:300; font-size: 16px;line-height: 32px;padding: 0px 20px; border:1px solid #40bdf7; border-radius:3px;} 
	.link-login:hover {color:#fff;} 

	.let-me-look {display:none; cursor: pointer; outline:none; text-transform: uppercase; color:#fff;margin:300px auto 1.5em; width:68%;font-family:'Roboto', sans-serif; font-weight:700;text-align:center; background:linear-gradient(to bottom, #2ea328 0%,#1cc936 100%);  line-height: 1.4;  border: none; font-size: 22px; padding: 15px 0; border-radius:4px; -webkit-border-radius:4px; box-shadow: 0 4px 0 #1c9116;}
	.let-me-look:hover,.let-me-look:focus {color:#fff; text-decoration:none;}	
 
	.welcome-content {padding:50px 0; z-index:0;} 
	.welcome-content.scroll-content {width:70%;} 
	.welcome {color:#d5d5d5;font-weight:300; margin:0 150px; text-align:center;}
	.welcome p {font-size:20px; color:#d5d5d5; margin:0 0 25px}
	.welcome h3 {font-size:24px; color:rgb(213, 240, 248); font-weight:600; padding:0px;font-family: 'Roboto', sans-serif; margin:0 0 20px; text-transform:uppercase;}
	.welcome h4 {font-size:20px; color:#d5d5d5; font-weight:300; padding:0px;font-family: 'Roboto', sans-serif; margin:0 0 20px; text-transform:uppercase;}
	.mobile-pic {float:left; display:inline-block; margin:0 25px 0 0; border:1px solid #EB088C;}

	.frontpage-content {padding:0 0 100px; background:#00b0ff;}

	.reg-form {width:356px; margin:0 auto; padding:0;}
	.reg-form-top {background: rgba(0,0,0,0.65); position:absolute; right:10%; top:70px; margin:0; border-radius:5px;}
	.reg-form-bottom {margin:150px auto 100px;}
	.reg-title {color:#666;  font-family: 'Roboto', sans-serif; text-align:center; font-size:28px; font-weight:700; margin:0;}
	.reglink {background:#EB088C;padding:14px 40px; font-size:24px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; -o-border-radius:6px; font-family: 'Roboto', sans-serif; font-weight:300; box-shadow:0px -5px 15px rgba(0, 0, 0, 0.2) inset;color:#fff;text-transform:uppercase; letter-spacing:-1px;margin:140px auto 100px;display:inline-block;}	
	.reglink:hover {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;}
	
	.footerLinks {padding:20px 0 20px;}
	.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:#fff; font-size:1.125em;}
	.footerLinks li a:hover {text-decoration:underline;}
	.notification-message {font-size:12px; text-align:center; color:gray; margin:10px 0;}
	
	.footer-logo img{display:block;margin:0 auto;}
	
	.form .label {background:none;}
	label {line-height:normal;}
}


@media only screen and (max-width: 81.063em) { /*1296*/
	.visual { background-position: center top; background-size:auto 100%;}
}
@media only screen and (max-width: 64.063em) { /*1024*/	
	.sign-in {right:10px; top:18px;}
	.slogan {padding:20px 100px 0 0px;}
	.welcome {margin: 0 20px;}
	.reg-form-top {right:20px;}
	.welcome-content.scroll-content {width:58%;}
}

@media only screen and (min-width: 50em) { /*800*/
	.header-nav{
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 45px;
		overflow: hidden;
		z-index:1;
		border-bottom:20px solid #000;
	}
    .header-nav__inner{z-index: 1; width:100%;}
	.visual {transition:background-position 1000ms;}	
    .visual:before{
        content: "";
        background: rgba(0,0,0,0);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: background 400ms;
		width:100%;
    }
    .visual.fixme {background-position: center 20px;}
    .visual.fixme:before{background: rgba(0,0,0,0.6);}
	.reg-form-top {position:fixed; top:130px;}
	header {position:fixed;}
	.welcome-content {transition: width 800ms; padding:40px 0 50px;} 
}

@media only screen and (min-width: 64em) { /*1024*/
	.visual.fixme {background-position: center 30px;}
}
@media only screen and (min-width: 75em) { /*1200*/
	.visual.fixme {background-position: center 50px;}
}
@media only screen and (min-width: 120em) { /*1920*/
	.visual.fixme {background-position: center 0px;}
	.reg-form-top {right:20%;}
}
@media only screen and (max-width: 50.1em) { /*800*/
	.policy-popup {left:3%; width:94%; margin:0;}		
	.slogan {font-size:16px; padding:15px 100px 0 0px;}
	.sign-in {top:8px;}	
}

@media only screen and (max-width: 40.063em) { /*640*/
	.visual {background-size:200% auto;}	
	.welcome-content {padding:10px 0 50px;} 
}

@media only screen and (max-width: 30.063em) { /*480*/
	.visual {background-size:270% auto; background-position:22% top;}                                            	
	.reg-form-top {visibility:hidden; width:100%; margin:0 auto; top:40px; right:0; float:none; position:relative;}
	.let-me-look {display:block;}
	.reg-title {font-size:24px;}
	.policy-popup {height:350px;}
	.slogan {padding:0 0 0 1em;}
}

@media only screen and (max-width: 25.063em) { /*400*/
	.visual {background-size:310% auto; background-position:25% top; min-height:480px;}  
	.link-login {font-size: 14px; line-height: 28px;  padding: 0 10px;}
	.reglink{font-size:20px;padding:14px 25px;}
	.joinbutton {padding:0; width:94%;}
	.let-me-look {margin-top:200px;}	
	.welcome h3 {font-size:20px;}
}
@media only screen and (max-width: 20.063em) { /*320*/
	.visual {background-size:360% auto; background-position:27% top; min-height:480px;}  
	.slogan {padding:0 0 0 0.5em; font-size:14px;}	
}