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

@media screen {
	body {background:#00313e; width:100%; padding:0; margin:0; font-family: 'Open Sans', sans-serif; font-family:1em; color:#fff; font-weight:300; line-height:1.2; position:relative;}
	.row {max-width:71em;position:relative;}
	.column {position:relative;}
	p {line-height:1.2;}
	header {position:relative; padding:10px 0; margin:0; width:100%; z-index:1; border-bottom:1px solid rgba(255, 255, 255, 0.25);}
	
	.content {position:relative; padding:0; margin:0; background:#00313e;}
	.visual {background-repeat: no-repeat; background-position: center top; background-attachment:fixed; min-height:650px;}
	.logo {position:relative; height: 60px; width: 270px; background:url(../images/logo.png) no-repeat; margin:0 0 0 38%;}
	.logo:focus {outline:none;}
	
	.welcome-text {position:absolute; right:10%; bottom:0;}
	.welcome-text h1 {font-family: 'Open Sans', sans-serif; font-weight:700; text-transform:uppercase; font-size:32px; line-height:1.4; padding: 70px 0 0; text-align: center;}
	.welcome-text h1 span{color:#db5af3;}
	
	.sign-in {position:absolute; right:100px; top:15px;}
	.link-login {display:block; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -o-border-radius:3px; }
	.link-login button, .link-login a {cursor:pointer; text-decoration:none; color:#fff; font-family:'Rubik',sans-serif; font-weight:400; font-size: 14px; line-height: 32px; padding: 0 25px; text-transform:uppercase; opacity:0.6;}
	#login-form h2 {margin: 0;	padding: 20px 15px;	color:#6B58CD;text-shadow: 0 0 1px rgba(0,0,0,0.1);font-weight:400; font-size: 2em; text-align:left; font-family:'Open Sans',sans-serif;}
	.small-form {padding:0 15px;}
	#login-submit {width:100%; text-align:center; line-height:40px; padding:0; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; font-size:22px; font-weight:600; background:#40c1e3; box-shadow:0 -5px 25px rgba(0,0,0,0.2) inset, 0 2px 0 rgba(0,0,0,0.2); color:#fff; font-family:'Open Sans',sans-serif; border:none;}
	#login-submit:hover {color:#fff; box-shadow:0 5px 25px rgba(0,0,0,0.2) inset, 0 2px 0 rgba(0,0,0,0.2);}	
	.field {border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -o-border-radius:4px;}
	.field::placeholder{ color: #666;}
	.field::-moz-placeholder{ color: #666;}
	.forgot {color:gray; font-size:12px; float:right;font-family: 'Rubik', sans-serif; font-weight:400;}
	.forgot:hover {color:gray; text-decoration:underline;}	

	.members {background:url(../images/wall.jpg) repeat-y center top; padding:60px 0 70px;}
	.welcomecontent {background:url(../images/wall.jpg) repeat-y center top; padding:70px 0 85px;}
	.frontpagecontent {background:#fff no-repeat center center; padding:65px 0;}
	.device-friendly {background:url(../images/visual1.jpg) no-repeat center top; background-attachment:fixed; padding:40px 0 440px;}

	.reg-form {width:400px; margin:0;}
	.reg-form-top { margin:50px 100px 100px 0; float:right;}
	.reg-form-bottom { margin:0 100px 0 0; float:right;}
	.reg-title {color:#000; font-family: 'Open Sans', sans-serif;text-align:center; font-size:26px; font-weight:300; margin:15px 15px 10px 0; text-transform:uppercase; }
	

	.let-me-in {display:none; position:absolute; top:365px; left:50%; width:230px; margin: 0 0 0 -115px;}
	
	.all-articles, .reglink {font-size:18px; font-weight:600; text-transform:uppercase; padding:8px 65px 9px; line-height:1.1; color:#5d7ad4; font-family: 'Rubik', sans-serif; text-align:center;}
	.all-articles:hover, .all-articles:focus, .reglink:hover, .reglink:focus {color:#5d7ad4;}

	.reglink {background-image: linear-gradient(#6b58cd, #3fc2e3), linear-gradient(#6b58cd, #3fc2e3);
    background-position: 0 0px, 100% 0;
    background-repeat: no-repeat;
    background-size: 2px 100%;
    border-top: 2px solid #6b58cd;
    border-bottom: 2px solid #3fc2e3;
    margin: 0px auto;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-o-border-radius:3px;}
	
	.owl-features {padding:0 0 50px; overflow:hidden;}
	.owl-features .features-item {padding:0 0 0 80px; overflow:hidden;}
	.owl-features .features1 {background:url(../images/icon2.png) no-repeat left top;}
	.owl-features .features2 {background:url(../images/icon1.png) no-repeat left top;}
	.owl-features .features3 {background:url(../images/icon3.png) no-repeat left top;}
	.owl-features .features-text {text-align:left; color:#6e6e6e; font-family: 'Rubik', sans-serif; font-size:15px; font-weight:400; padding:0; margin:0; line-height:1.5;}
	.owl-features .features-title {text-align:left; color:#505050; font-family: 'Open Sans', sans-serif; font-size:22px; padding:0 0 38px; font-weight:600; padding:12px 0; margin:0;}
	.owl-features .features-item img {width:auto!important; margin:0 auto;}

	.main-blog-title {text-align:center; color:#303030; font-size:44px; font-weight:300; text-transform:uppercase; font-family: 'Open Sans', sans-serif; margin:0 0 35px;}
	.owl-blog {width:90%!important; margin:0 auto 40px;}		
	.owl-blog .blog-item {background:rgba(255,255,255,0.9); overflow:hidden; width:100%; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; box-shadow:0 1px 1px rgba(0, 0, 0, 0.3);}
	.owl-blog .image-link {width:100%; display:inline-block; vertical-align:top;}
	.owl-blog .blog-content {display:inline-block; padding:0 30px 25px; width:100%; vertical-align:top;}
	.owl-blog .blog-title {color:#6b58cd; font-size:24px; font-family: 'Open Sans', sans-serif; line-height:1.2; font-weight:600; padding:25px 0 10px; margin:0; text-align:left;}
	.owl-blog .blog-text {color:#6f6f6f; font-family: 'Rubik', sans-serif; font-weight:400; font-size:14px; margin:0; line-height:1.6;}
	.owl-blog.owl-carousel .owl-stage-outer {padding:15px 0;}
	
	.device-friendly h4 {font-family:'Open Sans', sans-serif; text-align:center; font-weight:300; color:#fff; font-size:44px; margin:0 0 40px; text-transform:uppercase;}
	.device-friendly h4 span {color:#40c1e3;}
	.device-friendly p {font-family:'Rubik', sans-serif; text-align:center; font-weight:400; color:#fff; font-size:16px; line-height:1.4; width:70%; margin:0 auto;}
	
	.members-title {color:#373737; text-align:center; font-family:'Open Sans', sans-serif; text-align:center; font-weight:400; font-size:26px; margin:0 0 35px; line-height:1.3;}
	.members-title b {font-weight:700;}
	.new-members {display:block; color:#6b58cd; font-size:65px;}
	.members-line .owl-stage-outer {z-index:1; margin:0 auto;}

	.welcome {color:#1a1c20; text-align:center; font-family: 'Rubik', sans-serif; font-weight:400; font-size:16px; line-height:1.5; margin:0 auto; width:70%;}
	.welcome h2 {font-size:22px; text-transform:uppercase; font-weight:300; font-family:'Open Sans', sans-serif; margin:0 0 37px;}
	
	.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-size: 18px;  font-weight: 600;}
	.javascript-notification {width:100%; color:#fff; background:#000; text-align:center; font-size:20px; line-height:2;}

	footer {background:#00313e; position:relative; padding:80px 0 60px; margin:0;}
	footer .row {max-width:64em;}	
	
	footer .column:nth-of-type(2) {border:none; border-right:1px solid #335a65; border-left:1px solid #335a65;}
	.footerLinks {padding:0 0 0 40px;}
	.footerLinks ul {text-align:left; margin:0; padding:0;}
	.footerLinks li {display:block; margin:0 0 10px;}
	.footerLinks li a {text-decoration:none; color:#5e7d85; text-transform:uppercase; line-height:1.1; font-size:18px; font-weight:400;}
	.footerLinks li a:hover {text-decoration:underline;}
	.notification-message {font-size:14px; color:#335a65; margin:35px 20px 0 0; padding:0; line-height:1.1; font-family:'Rubik',sans-serif;}
	
	.social-buttons {padding: 3px 0 0 40px;}
	.social-buttons a {display:inline-block; margin:0 20px 0 0;}

	.overlay3 {  height: 100%;  width: 0;  position: fixed; z-index: 3; top: 0; right:0; background-color: rgba(0,0,0, 0.8);  overflow-y: auto;  overflow-x: hidden;
		text-align: center; opacity:0;  transition: opacity 1s;}
	.offcanvas { height: 100%; width: 0; top: 0; right: 0; background-color: #eee; position: fixed; z-index: 3; overflow-x: hidden; transition: .5s;}
	#mainContent {  transition: margin-left .5s;}
			
}


@media only screen and (max-width: 64.063em) { /*1024*/
	.visual {background-size:auto auto;}
	.sign-in {right:0px;}
	.owl-blog {width:94%!important;}
	.members-line .owl-prev {left:-70px;}
	.members-line .owl-next {right:-70px;}	
}
@media only screen and (max-width: 61.363em) { /*980*/
	footer .column:nth-of-type(2) {border-right:none;}
	.social-buttons {padding: 30px 0 0 40px;}
}

@media only screen and (max-width: 50.063em) { /*800*/
	.welcome {width:98%;}
	.members-title {font-size:40px;}
	.welcome-text {right:30px;}
}
@media only screen and (max-width: 48.063em) { /*768*/
	.policy-popup {left:3%; width:94%; margin:0;}	
}

@media only screen and (max-width: 40.063em) { /*640*/
	.reg-form-top {margin:50px 100px 60px 0;}	
	.reg-form-bottom { margin:0 auto; float:none;}	
	.logo {margin:0 0 0 28%;}
	.reg-title {font-size:24px; margin:10px 15px 10px 0;}
	.welcome-text h1 {font-size:20px; padding:55px 0 0;}
	.members-title {font-size:30px; margin:0 0 45px;}
	.members-line .owl-prev {width:45px; top:70px; background-size:100% auto; left:-50px;}
	.members-line .owl-next {width:45px; top:70px; background-size:100% auto; right:-50px;}
	.device-friendly h4 {font-size:38px;}
	.owl-features .features-item {padding:0 0 0 60px;}	
}

@media only screen and (max-width: 30.063em) { /*480*/
	.reg-form {width:100%;}
	.reg-form-top {position:relative; top:auto; right:auto; margin:0; display:none;}
	.logo {margin:0;}
	.let-me-in {display:block; top:265px; margin:0 0 0 -115px;}
	.reg-title {font-size:24px;}
	
	.welcome-text {bottom:auto; top:135px; right:0;}
	.welcome-text h1 {padding:55px 0 0 10px;}
	
	.members-line .owl-controls {display:none;}
	.members-title {font-size:28px;}
	.all-articles, .reglink {font-size:18px; padding:11px 18px 10px;}
	.device-friendly p {width:90%;}
	.owl-blog .image-link {width:auto;}
	
	.device-friendly h4 {font-size:30px;}
	
	.policy-popup {height:350px;}
	
	.footerlogo {margin:0 0 0 35px; max-width:77%;}
	.notification-message {margin:35px 40px;}
	footer .column:nth-of-type(2) {border:none;}
	
	.frontpagecontent {background-position:40% top;}
}

@media only screen and (max-width: 22.563em) { /*360*/
	.members-title {font-size:22px;}
	.logo {width:190px; background-size:100% auto; height:43px;}

	.sign-in { right: 0; top: 6px;}	
	.link-login button { padding: 0 15px;}
	.joinbutton {padding:0; width:94%;}
	.welcome-text p {font-size:22px;}
	.big-button {display:block; line-height:1.5;}
	.device-friendly h4 {font-size:24px;}
	.blog-title {font-size:34px; margin:0 0 15px;}
	.welcomecontent {padding:50px 0 60px;}
	footer {padding:60px 0;}
	.owl-features .features-item {width:80%; margin:0 auto;}	
}