@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext');

@media screen {
	body {background:#100f10; width:100%; padding:0; margin:0; font-family: 'Open Sans', sans-serif; font-family:1em; color:#fff; font-weight:300; line-height:1.2; }
	.row {position:relative;}
	.column {position:relative;}
	p {line-height:1.2; margin:0;}
	
	header {position:relative; padding:0; margin:0; width:100%; z-index:1; box-shadow:0 3px 48px rgba(0,0,0,0.5); position:fixed; height:24px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b12456+0,9e37d6+100 */
background: #b12456; /* Old browsers */
background: -moz-linear-gradient(60deg, #b12456 0%, #540399 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(60deg, #b12456 0%,#540399 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(60deg, #b12456 0%,#540399 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b12456', endColorstr='#540399',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
	header .row {max-width:88rem;}
	.content {position:relative; padding:0; margin:0;}
	.visual {background-repeat: no-repeat; background-position: 0 0; background-image:url(../images/custom/visual-top.jpg); background-color:#fe84b5;     background-size: auto 100%; padding:10px 0 0;}
	.visual::before {
    background: rgba(0,0,130,0.15);
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; }
	
	.logo {padding:0; text-align:left;margin:0px; position:absolute; top:23px; left:0;}
	.logo img {max-width:200px;}
	.slogan {color:#fff; padding:0px; font-size:20px; margin:0; text-transform: uppercase; font-family: 'Open Sans'; width:100%; text-align:center;}
	.slogan_block {width:100%; position:relative; padding: 15px 0 40px; box-shadow:0 -7px 7px rgba(0,0,0,0.2) inset, 0 -5px 7px rgba(0,0,0,0.4);
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#9e37d6+0,c55215+100 */
background: #9e37d6; /* Old browsers */
background: -moz-linear-gradient(45deg, #9e37d6 0%, #c55215 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #9e37d6 0%,#c55215 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #9e37d6 0%,#c55215 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e37d6', endColorstr='#c55215',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

	.sign-in {position:absolute; right:16px; top:1px;}
	.link-login {color:#fff; display:block; font-family: 'Open Sans', sans-serif; font-weight:300; font-size:16px; line-height:normal; 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 2em; width:70%;font-family:'Open Sans', 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.5); border-radius:10px;
	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:#467a7b; padding:80px 0 90px; z-index:0; position:relative;} 
	.welcome-bg {position:absolute; left:0; top:0; width:100%;}
	.welcome-bg::before {position:absolute; right:0; top:-30px; height:30px; width:50%; background:transparent; content: ''; display:block; box-shadow: 35px -5px 5px rgba(0,0,0,0.1); border-width:0px 0px 30px 30px; border-style:solid; border-color:transparent transparent #467a7b transparent;}
	.welcome-bg::after {position:absolute; left:0; top:-30px; height:30px; width:50%; background:transparent; content: ''; display:block; box-shadow: -35px -5px 5px rgba(0,0,0,0.1); border-width:0px 30px 30px 0px; border-style:solid; border-color:transparent transparent #467a7b transparent;}
	.welcome {color:#f2f8ff;font-weight:300; overflow:hidden; background:rgba(0,0,0,0.5); padding:0px 35px 30px; border-radius:6px; width:80%; margin:0 0 0 15%;}
	.welcome p {font-size:20px; color:#f2f8ff; margin:0 0 25px}
	.welcome h3 {font-size:30px; color:#b60063; font-weight:400; padding:45px 0 15px; font-family: 'Open Sans', 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 25px; min-height:460px;}
	
	.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: 'Open Sans', 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:10px 0 40px; position:relative; margin:0;}	
	.footerLinks {padding:0px 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; text-transform:uppercase;}
	.footerLinks li a:hover {text-decoration:underline;}
	.notification-message {font-size:12px; text-align:center; color: #777; font-weight: 400; margin:10px 0;}
		
	.form .label {background:none;}
	label {line-height:normal;}
}


@media only screen and (max-width: 75.063em) { /*1200*/
	.visual {background-size:135% auto; background-position: 20% 20px;} 
	.welcome-bg {background-position: 25% 88px; background-size:auto 110%;}	
	.reg-form-top {margin:50px 0 15px;}
}
@media only screen and (max-width: 64.063em) { /*1024*/
	.visual {background-size:145% auto; background-position: 30% 20px;} 	
}
@media only screen and (max-width: 62.063em) { /*980*/
	.visual {background-size:155% auto; background-position: 30% 20px;} 
	.welcome h3 {font-size: 24px;}
	.welcome { width:80%; margin:0 0 0 20%;}
}

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

@media only screen and (max-width: 40.063em) { /*640*/
	.visual {background-size:220% auto; background-position: 20% 20px;} 
	.welcome {width:90%; margin:0 auto;}
}

@media only screen and (max-width: 30.063em) { /*480*/
    .logo img {max-width: 150px;}        
	.reg-form {width:100%; margin:50px auto 1em;}
	.reg-form-top {display:none;}
	.let-me-look {display:block;}
	.reglink {width:70%;}
	.welcome-content {padding:70px 0;}
	.policy-popup {height:350px;}
}

@media only screen and (max-width: 25.063em) { /*400*/
	.visual {background-size:255% auto;} 

	.slogan {font-size:16px;}
	.let-me-look { width:100%;  margin: 250px auto 1em;}	
	.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%;}
}