/* SCREEN STYLES //////////////////////////////////////////////////////*/

body { font-family: 'Open Sans', sans-serif; font-weight: 400; color: #fff; font-size: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; }
#lightbox { position: fixed; width: 100%; height: 1686px; background: url('../_img/bg-lightbox.png'); z-index: 2; display: none; }
#lightbox { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; }
@font-face { font-family: 'lobster_twobold'; src: url('../_fonts/lobstertwo-bold-webfont.eot'); src: url('../_fonts/lobstertwo-bold-webfont.eot?#iefix') format('embedded-opentype'),  url('../_fonts/lobstertwo-bold-webfont.woff2') format('woff2'),  url('../_fonts/lobstertwo-bold-webfont.woff') format('woff'),  url('../_fonts/lobstertwo-bold-webfont.ttf') format('truetype'),  url('../_fonts/lobstertwo-bold-webfont.svg#lobster_twobold') format('svg'); font-weight: normal; font-style: normal; }

@media screen and (max-width: 669px) {
/* IE8 smallest version - copy portrait version*/

/* LOGIN CONTAINER //////////////////////////////////////////////////////*/

.container { width: 320px; margin: 0 auto; }
#container-top { width: 100%; height: 660px; background: url('../_img/top@2x.jpg') no-repeat top center; background-size: cover; overflow-x: hidden; }
#top { width: 300px; height: 145px; float: left; margin: 0 0 0 10px; background: rgba(0,6,26,0.70); -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); }
#logo { width: 280px; height: 79px; float: left; background: url('../_img/logo@2x.png') no-repeat; background-size: 280px 79px; margin: 25px 0 0 10px; }

/* FORM //////////////////////////////////////////////////////*/

#top-form { width: 300px; float: left; margin: 85px 0 0 10px; position: relative; }
#form-circle { display:none; }
#form-main-container { width: 300px; height: 430px; position: relative; top: 0px; left: 0px; margin: 0; background: rgba(0,6,26,0.7); -webkit-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); overflow: hidden; }
#form { width: 300px; height: 430px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

/* Steps content //////////////////////////////////////////////////////*/

#fstep_1, #fstep_2, #fstep_3, #fstep_4, #fstep_5 { position: absolute; left: 0px; top: 20px; transition: left 0.5s ease-in-out 0.3s; -moz-transition: left 0.5s ease-in-out 0.3s; width: 300px; }
#fstep_1 h3, #fstep_2 h3, #fstep_3 h3, #fstep_4 h3, #fstep_5 h3 { text-align: center; margin: 10px 0; color: #fff; font-size: 24px; }
#fstep_1 p, #fstep_2 p, #fstep_3 p, #fstep_4 p, #fstep_5 p { text-align: center; margin: 10px 0 10px 0; color: #fff; font-size: 16px; }
input { background: #ffffff; padding: 8px; margin: 35px 15px 15px 15px; border-radius: 0px; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 14px; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-appearance: none; border: 1px solid #333333; width:250px; }
input[type="radio"] { position: absolute; left: -5000px; }
input[type="radio"] + label span.male, input[type="radio"] + label + label span.male { position: absolute; left: 85px; width: 62px; height: 106px; background: url('../_img/man@2x.png'); background-size: 62px 106px; cursor: pointer; }
input[type="radio"] + label span.female { position: absolute; left: 160px; width: 60px; height: 101px; background: url('../_img/woman@2x.png'); background-size: 60px 101px; cursor: pointer; }
input[type="radio"]:checked + label span.male, input[type="radio"]:checked ~ label span.male { background: url('../_img/man-checked@2x.png'); background-size: 62px 106px; cursor: pointer; }
input[type="radio"]:checked + label span.female { background: url('../_img/woman-checked@2x.png'); background-size: 60px 101px; cursor: pointer; }
select { padding: 8px; border-radius: 0px; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 14px; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-appearance: none; border: 1px solid #333333; background: #ffffff url('../_img/down-arrow.png') no-repeat top 2px right; }
select:hover { cursor: pointer; }
select#dobday.required { width: 70px; margin: 35px 5px 15px 15px; }
select#dobmonth.required { width: 90px; margin: 35px 5px 15px 0; }
select#dobyear.required { width: 85px; margin: 35px 15px 15px 0; }
.valid { border: 1px solid #96a832; -moz-box-shadow: 0px 0px 4px #96a832; -webkit-box-shadow: 0px 0px 4px #96a832; box-shadow: 0px 0px 4px #96a832; }

/* Error states */

label.error { font-size: 14px; color: red; font-family: 'Open Sans', sans-serif; font-weight: 400; position: absolute; left: 0px; top: 180px; width: 300px; text-align: center; }
input.error { border: 1px solid #ff0000; -moz-box-shadow: 0px 0px 4px #FF8F91; -webkit-box-shadow: 0px 0px 4px #FF8F91; box-shadow: 0px 0px 4px #FF8F91; }
select.error { border: 1px solid #ff4700; -moz-box-shadow: 0px 0px 4px #FF8F91; -webkit-box-shadow: 0px 0px 4px #FF8F91; box-shadow: 0px 0px 4px #FF8F91; }

/* Button //////////////////////////////////////////////////////*/

.myButton { background: url('../_img/button2@2x.png') no-repeat; font-family: 'Open Sans'; sans-serif;
font-weight: 700; background-size: 161px 51px; width: 161px; height: 44px; font-size: 32px; color: #ffffff; padding: 8px 0 0 0; text-align: center; border: 0; cursor: pointer; border-radius: 5px; position: absolute; top: 225px; left: 75px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); }
.myButton:active { cursor: pointer; }

/* Terms of Use //////////////////////////////////////////////////////*/

p.terms { font-size: 11px; position: absolute; left: 0; top: 300px; width: 300px; text-align: center; color: #fff; }
p.terms a { color: #fff; text-decoration: none; }

/* 5 bottom steps //////////////////////////////////////////////////////*/


.steps { padding: 5px; margin: auto; text-align: center; position: absolute; top: 330px; left: 0px; width: 300px; }
.step_bar { width: 36px; height: 36px; display: inline-block; margin: 0 5px; font-size: 20px; color: #81aae0; background: #ffffff; border-radius: 50%; cursor: pointer; text-align: center; line-height: 36px; webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); }
.step_highlight { width: 36px; height: 36px; background: #0983ce; color: #ffffff; }

/* Login //////////////////////////////////////////////////////*/

.login { font-size: 16px; position: absolute; left: 0; top: 390px; width: 300px; text-align: center; color: #fff; }
.login a { color: #ee89b9; text-decoration: none; font-family: 'Open Sans', sans-serif; font-weight: 700; }

/* MEMBERS CONTAINER //////////////////////////////////////////////////////*/

#container-members { width: 100%; background: #ecf4fb; overflow: hidden; -moz-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); }
#members { width: 300px; float: left; margin: 20px 0 15px 10px; }
.member { width: 188px; float: left; display: inline; margin: 15px 15px 15px 55px; text-align: center; }
.member img { border: none; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 0 15px 0; }
.member p { width: 200px; text-align: center; color: #252525; font-size: 17px; line-height: 26px; }
.member p span.pink { color: #e05998; font-size: 26px; }
.member p span.blue { color: #055eb2; font-size: 26px; }
.display0, .display1, .display2, .display3 {display:none;}

/* COPY CONTAINER //////////////////////////////////////////////////////*/

#container-copy { width: 100%; height: 436px; background: url('../_img/copy@2x.jpg') no-repeat top center; background-size: cover; overflow-x: hidden; }
#copy { width: 270px; float: left; margin: 0 0 0 10px; background: rgba(0,6,26,0.70); padding: 20px 15px; }
#copy-top { float: left; width: 210px; background: url('../_img/cloud@2x.png') no-repeat top 2px right; background-size: 60px 46px; min-height: 58px; text-align: center; padding:0 60px 0 0;}
#copy-top h1 { font-weight: 700; color: #fff; font-size: 20px; margin: 0 0 8px 0; }
#copy-top h3 { color: #fff; font-size: 16px; }
#copy-main { width: 230px; float: left; font-size: 14px; line-height: 16px; color: #fff; text-align: center; margin: 50px 0 0 0; padding:0 20px; margin:0 0 20px 0;}
#copy-main strong { font-weight: 700; }

/* ICONS CONTAINER //////////////////////////////////////////////////////*/

#container-icons { width: 100%; background: #ecf4fb; overflow: hidden; -moz-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); }
#icons { width: 240px; float: left; margin: 30px 0 10px 60px; text-align: center; }

#icon1 { background: #464d5d url('../_img/icon1@2x.png') top 15px center no-repeat; background-size: 120px 163px; width: 152px; height: 134px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 20px 20px 0; padding: 190px 20px 0 20px; }
#icon2 { background: #464d5d url('../_img/icon2@2x.png') top 15px center no-repeat; background-size: 120px 163px; width: 152px; height: 134px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 20px 20px 0; padding: 190px 20px 0 20px; }
#icon3 { background: #464d5d url('../_img/icon3@2x.png') top 15px center no-repeat; background-size: 120px 163px; width: 152px; height: 134px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 20px 20px 0; padding: 190px 20px 0 20px; }
#icon4 { background: #464d5d url('../_img/icon4@2x.png') top 15px center no-repeat; background-size: 120px 163px; width: 152px; height: 134px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 0 0 0; padding: 190px 20px 0 20px; }

#icon1 h3, #icon2 h3, #icon3 h3, #icon4 h3 { font-size: 24px; margin: 0 0 14px 0; }
#icon1 p, #icon2 p, #icon3 p, #icon4 p { font-size: 14px; line-height: 16px; }
#icon1 p strong, #icon2 p strong, #icon3 p strong, #icon4 p strong { font-weight: 700; }

#icons-button { width: 300px; float: left; margin: 10px 0 30px 10px; text-align: center; }
#icons-joinfree { width: 205px; height: 45px; float: left; background: url('../_img/button1@2x.png') no-repeat; background-size: 205px 57px; font-size: 32px; font-weight: 700; color: #ffffff; padding: 12px 0 0 0; text-align: center; border: 0; cursor: pointer; border-radius: 5px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); margin: 0 0 0 45px; }

/* CROSS REG AND FOOTER CONTAINER //////////////////////////////////////////////////////*/

#container-crossreg { width: 100%; background: #222428; overflow: hidden; }
#crossreg { width: 300px; float: left; margin: 30px 0 30px 10px; }
#mature { width: 300px; height: 117px; float: left; display: inline; background: url('../_img/cr_mature@2x.jpg') no-repeat; background-size: 300px 117px; margin: 0 0 20px 0; }
#gay { width: 300px; height: 117px; float: left; display: inline; background: url('../_img/cr_gay@2x.jpg') no-repeat; background-size: 300px 117px; }
#mature div { width: 168px; height: 97px; float: left; background: rgba(0,6,26,0.7); padding: 10px 20px 10px 20px; font-size: 16px; }
#gay div { width: 168px; height: 97px; float: left; background: rgba(0,6,26,0.7); padding: 10px 20px 10px 20px; font-size: 16px; }
#mature div h2, #gay div h2 { font-family: 'lobster_twobold', sans-serif; font-size: 22px; margin: 5px 0 0 0; }
#mature div a, #gay div a { float: left; width: 150px; height: 31px; background: url('../_img/button3@2x.png') no-repeat; background-size: 150px 39px; font-weight: 700; font-size: 20px; text-align: center; color: #fff; text-decoration: none; padding: 8px 0 0 0; border-radius: 5px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); margin:0;}

#footer { width: 300px; float: left; margin: 0px 0 30px 10px; }
#footer1 { float: left; text-align: center; width:300px; }
#footer a { text-decoration: none; color: #fff; text-transform: uppercase; font-size: 12px; margin: 0 5px 20px 5px; text-align:center;}
#footer a:hover { color: #fa7cc8; }
#footer2 { float: left; display: inline; text-align: right; margin: 20px 0 0 45px; }
#footer2 a { width: 200px; height: 47px; float: right; background: url('../_img/odp@2x.png') no-repeat; background-size: 200px 47px; border: none; }

}

@media (-webkit-min-device-pixel-ratio: 1) and (max-aspect-ratio: 13/9) and (max-width: 669px) {
/* portrait portrait portrait portrait portrait portrait portrait portrait - max aspect ratio fix Android keybord*/

/* LOGIN CONTAINER //////////////////////////////////////////////////////*/

.container { width: 320px; margin: 0 auto; }
#container-top { width: 100%; height: 660px; background: url('../_img/top@2x.jpg') no-repeat top center; background-size: cover; overflow-x: hidden; }
#top { width: 300px; height: 145px; float: left; margin: 0 0 0 10px; background: rgba(0,6,26,0.70); -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); }
#logo { width: 280px; height: 79px; float: left; background: url('../_img/logo@2x.png') no-repeat; background-size: 280px 79px; margin: 25px 0 0 10px; }

/* FORM //////////////////////////////////////////////////////*/

#top-form { width: 300px; float: left; margin: 85px 0 0 10px; position: relative; }
#form-circle { display:none; }
#form-main-container { width: 300px; height: 430px; position: relative; top: 0px; left: 0px; margin: 0; background: rgba(0,6,26,0.7); -webkit-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); overflow: hidden; }
#form { width: 300px; height: 430px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

/* Steps content //////////////////////////////////////////////////////*/

#fstep_1, #fstep_2, #fstep_3, #fstep_4, #fstep_5 { position: absolute; left: 0px; top: 20px; transition: left 0.5s ease-in-out 0.3s; -moz-transition: left 0.5s ease-in-out 0.3s; width: 300px; }
#fstep_1 h3, #fstep_2 h3, #fstep_3 h3, #fstep_4 h3, #fstep_5 h3 { text-align: center; margin: 10px 0; color: #fff; font-size: 24px; }
#fstep_1 p, #fstep_2 p, #fstep_3 p, #fstep_4 p, #fstep_5 p { text-align: center; margin: 10px 0 10px 0; color: #fff; font-size: 16px; }
input { background: #ffffff; padding: 8px; margin: 35px 15px 15px 15px; border-radius: 0px; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 14px; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-appearance: none; border: 1px solid #333333; width:250px; }
input[type="radio"] { position: absolute; left: -5000px; }
input[type="radio"] + label span.male, input[type="radio"] + label + label span.male { position: absolute; left: 85px; width: 62px; height: 106px; background: url('../_img/man@2x.png'); background-size: 62px 106px; cursor: pointer; }
input[type="radio"] + label span.female { position: absolute; left: 160px; width: 60px; height: 101px; background: url('../_img/woman@2x.png'); background-size: 60px 101px; cursor: pointer; }
input[type="radio"]:checked + label span.male, input[type="radio"]:checked ~ label span.male { background: url('../_img/man-checked@2x.png'); background-size: 62px 106px; cursor: pointer; }
input[type="radio"]:checked + label span.female { background: url('../_img/woman-checked@2x.png'); background-size: 60px 101px; cursor: pointer; }
select { padding: 8px; border-radius: 0px; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 14px; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-appearance: none; border: 1px solid #333333; background: #ffffff url('../_img/down-arrow.png') no-repeat top 2px right; }
select:hover { cursor: pointer; }
select#dobday.required { width: 70px; margin: 35px 5px 15px 15px; }
select#dobmonth.required { width: 90px; margin: 35px 5px 15px 0; }
select#dobyear.required { width: 85px; margin: 35px 15px 15px 0; }
.valid { border: 1px solid #96a832; -moz-box-shadow: 0px 0px 4px #96a832; -webkit-box-shadow: 0px 0px 4px #96a832; box-shadow: 0px 0px 4px #96a832; }

/* Error states */

label.error { font-size: 14px; color: red; font-family: 'Open Sans', sans-serif; font-weight: 400; position: absolute; left: 0px; top: 180px; width: 300px; text-align: center; }
input.error { border: 1px solid #ff0000; -moz-box-shadow: 0px 0px 4px #FF8F91; -webkit-box-shadow: 0px 0px 4px #FF8F91; box-shadow: 0px 0px 4px #FF8F91; }
select.error { border: 1px solid #ff4700; -moz-box-shadow: 0px 0px 4px #FF8F91; -webkit-box-shadow: 0px 0px 4px #FF8F91; box-shadow: 0px 0px 4px #FF8F91; }

/* Button //////////////////////////////////////////////////////*/

.myButton { background: url('../_img/button2@2x.png') no-repeat; font-family: 'Open Sans'; sans-serif;
font-weight: 700; background-size: 161px 51px; width: 161px; height: 44px; font-size: 32px; color: #ffffff; padding: 8px 0 0 0; text-align: center; border: 0; cursor: pointer; border-radius: 5px; position: absolute; top: 225px; left: 75px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); }
.myButton:active { cursor: pointer; }

/* Terms of Use //////////////////////////////////////////////////////*/

p.terms { font-size: 11px; position: absolute; left: 0; top: 300px; width: 300px; text-align: center; color: #fff; }
p.terms a { color: #fff; text-decoration: none; }

/* 5 bottom steps //////////////////////////////////////////////////////*/


.steps { padding: 5px; margin: auto; text-align: center; position: absolute; top: 330px; left: 0px; width: 300px; }
.step_bar { width: 36px; height: 36px; display: inline-block; margin: 0 5px; font-size: 20px; color: #81aae0; background: #ffffff; border-radius: 50%; cursor: pointer; text-align: center; line-height: 36px; webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); }
.step_highlight { width: 36px; height: 36px; background: #0983ce; color: #ffffff; }

/* Login //////////////////////////////////////////////////////*/

.login { font-size: 16px; position: absolute; left: 0; top: 390px; width: 300px; text-align: center; color: #fff; }
.login a { color: #ee89b9; text-decoration: none; font-family: 'Open Sans', sans-serif; font-weight: 700; }

/* MEMBERS CONTAINER //////////////////////////////////////////////////////*/

#container-members { width: 100%; background: #ecf4fb; overflow: hidden; -moz-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); }
#members { width: 300px; float: left; margin: 20px 0 15px 10px; }
.member { width: 188px; float: left; display: inline; margin: 15px 15px 15px 55px; text-align: center; }
.member img { border: none; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 0 15px 0; }
.member p { width: 200px; text-align: center; color: #252525; font-size: 17px; line-height: 26px; }
.member p span.pink { color: #e05998; font-size: 26px; }
.member p span.blue { color: #055eb2; font-size: 26px; }
.display0, .display1, .display2, .display3 {display:none;}

/* COPY CONTAINER //////////////////////////////////////////////////////*/

#container-copy { width: 100%; height: 436px; background: url('../_img/copy@2x.jpg') no-repeat top center; background-size: cover; overflow-x: hidden; }
#copy { width: 270px; float: left; margin: 0 0 0 10px; background: rgba(0,6,26,0.70); padding: 20px 15px; }
#copy-top { float: left; width: 210px; background: url('../_img/cloud@2x.png') no-repeat top 2px right; background-size: 60px 46px; min-height: 58px; text-align: center; padding:0 60px 0 0;}
#copy-top h1 { font-weight: 700; color: #fff; font-size: 20px; margin: 0 0 8px 0; }
#copy-top h3 { color: #fff; font-size: 16px; }
#copy-main { width: 230px; float: left; font-size: 14px; line-height: 16px; color: #fff; text-align: center; margin: 50px 0 0 0; padding:0 20px; margin:0 0 20px 0;}
#copy-main strong { font-weight: 700; }

/* ICONS CONTAINER //////////////////////////////////////////////////////*/

#container-icons { width: 100%; background: #ecf4fb; overflow: hidden; -moz-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); }
#icons { width: 240px; float: left; margin: 30px 0 10px 60px; text-align: center; }

#icon1 { background: #464d5d url('../_img/icon1@2x.png') top 15px center no-repeat; background-size: 120px 163px; width: 152px; height: 134px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 20px 20px 0; padding: 190px 20px 0 20px; }
#icon2 { background: #464d5d url('../_img/icon2@2x.png') top 15px center no-repeat; background-size: 120px 163px; width: 152px; height: 134px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 20px 20px 0; padding: 190px 20px 0 20px; }
#icon3 { background: #464d5d url('../_img/icon3@2x.png') top 15px center no-repeat; background-size: 120px 163px; width: 152px; height: 134px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 20px 20px 0; padding: 190px 20px 0 20px; }
#icon4 { background: #464d5d url('../_img/icon4@2x.png') top 15px center no-repeat; background-size: 120px 163px; width: 152px; height: 134px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 0 0 0; padding: 190px 20px 0 20px; }

#icon1 h3, #icon2 h3, #icon3 h3, #icon4 h3 { font-size: 24px; margin: 0 0 14px 0; }
#icon1 p, #icon2 p, #icon3 p, #icon4 p { font-size: 14px; line-height: 16px; }
#icon1 p strong, #icon2 p strong, #icon3 p strong, #icon4 p strong { font-weight: 700; }

#icons-button { width: 300px; float: left; margin: 10px 0 30px 10px; text-align: center; }
#icons-joinfree { width: 205px; height: 45px; float: left; background: url('../_img/button1@2x.png') no-repeat; background-size: 205px 57px; font-size: 32px; font-weight: 700; color: #ffffff; padding: 12px 0 0 0; text-align: center; border: 0; cursor: pointer; border-radius: 5px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); margin: 0 0 0 45px; }

/* CROSS REG AND FOOTER CONTAINER //////////////////////////////////////////////////////*/

#container-crossreg { width: 100%; background: #222428; overflow: hidden; }
#crossreg { width: 300px; float: left; margin: 30px 0 30px 10px; }
#mature { width: 300px; height: 117px; float: left; display: inline; background: url('../_img/cr_mature@2x.jpg') no-repeat; background-size: 300px 117px; margin: 0 0 20px 0; }
#gay { width: 300px; height: 117px; float: left; display: inline; background: url('../_img/cr_gay@2x.jpg') no-repeat; background-size: 300px 117px; }
#mature div { width: 168px; height: 97px; float: left; background: rgba(0,6,26,0.7); padding: 10px 20px 10px 20px; font-size: 16px; }
#gay div { width: 168px; height: 97px; float: left; background: rgba(0,6,26,0.7); padding: 10px 20px 10px 20px; font-size: 16px; }
#mature div h2, #gay div h2 { font-family: 'lobster_twobold', sans-serif; font-size: 22px; margin: 5px 0 0 0; }
#mature div a, #gay div a { float: left; width: 150px; height: 31px; background: url('../_img/button3@2x.png') no-repeat; background-size: 150px 39px; font-weight: 700; font-size: 20px; text-align: center; color: #fff; text-decoration: none; padding: 8px 0 0 0; border-radius: 5px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); margin:0;}

#footer { width: 300px; float: left; margin: 0px 0 30px 10px; }
#footer1 { float: left; text-align: center; width:300px; }
#footer a { text-decoration: none; color: #fff; text-transform: uppercase; font-size: 12px; margin: 0 5px 20px 5px; text-align:center;}
#footer a:hover { color: #fa7cc8; }
#footer2 { float: left; display: inline; text-align: right; margin: 20px 0 0 45px; }
#footer2 a { width: 200px; height: 47px; float: right; background: url('../_img/odp@2x.png') no-repeat; background-size: 200px 47px; border: none; }

}

@media (-webkit-min-device-pixel-ratio: 1) and (min-aspect-ratio: 13/9) {
/* landscape landscape landscape landscape landscape landscape landscape landscape - min aspect ratio fix Android keybord*/

/* LOGIN CONTAINER //////////////////////////////////////////////////////*/

.container { width: 480px; margin: 0 auto; }
#container-top { width: 100%; height: 660px; background: url('../_img/top@2x.jpg') no-repeat top center; background-size: cover; overflow-x: hidden; }
#top { width: 333px; height: 145px; float: left; margin: 0 0 0 70px; background: rgba(0,6,26,0.70); -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); }
#logo { width: 312px; height: 88px; float: left; background: url('../_img/logo@2x.png') no-repeat; background-size: 312px 88px; margin: 25px 0 0 10px; }

/* FORM //////////////////////////////////////////////////////*/

#top-form { width: 445px; float: left; margin: 85px 0 0 35px; position: relative; }
#form-circle { display:none; }
#form-main-container { width: 400px; height: 430px; position: relative; top: 0px; left: 0px; margin: 0; background: rgba(0,6,26,0.7); -webkit-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); overflow: hidden; }
#form { width: 400px; height: 430px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

/* Steps content //////////////////////////////////////////////////////*/

#fstep_1, #fstep_2, #fstep_3, #fstep_4, #fstep_5 { position: absolute; left: 0px; top: 20px; transition: left 0.5s ease-in-out 0.3s; -moz-transition: left 0.5s ease-in-out 0.3s; width: 400px; }
#fstep_1 h3, #fstep_2 h3, #fstep_3 h3, #fstep_4 h3, #fstep_5 h3 { text-align: center; margin: 10px 0; color: #fff; font-size: 30px; }
#fstep_1 p, #fstep_2 p, #fstep_3 p, #fstep_4 p, #fstep_5 p { text-align: center; margin: 10px 0 10px 0; color: #fff; font-size: 20px; }
input { background: #ffffff; padding: 8px; margin: 35px 35px 15px 35px; border-radius: 0px; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 16px; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-appearance: none; border: 1px solid #333333; width: 305px; }
input[type="radio"] { position: absolute; left: -5000px; }
input[type="radio"] + label span.male, input[type="radio"] + label + label span.male { position: absolute; left: 135px; width: 62px; height: 106px; background: url('../_img/man@2x.png'); background-size: 62px 106px; cursor: pointer; }
input[type="radio"] + label span.female { position: absolute; left: 210px; width: 60px; height: 101px; background: url('../_img/woman@2x.png'); background-size: 60px 101px; cursor: pointer; }
input[type="radio"]:checked + label span.male, input[type="radio"]:checked ~ label span.male { background: url('../_img/man-checked@2x.png'); background-size: 62px 106px; cursor: pointer; }
input[type="radio"]:checked + label span.female { background: url('../_img/woman-checked@2x.png'); background-size: 60px 101px; cursor: pointer; }
select { padding: 8px; border-radius: 0px; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 16px; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-appearance: none; border: 1px solid #333333; background: #ffffff url('../_img/down-arrow.png') no-repeat top 2px right; }
select:hover { cursor: pointer; }
select#dobday.required { width: 80px; margin: 35px 5px 15px 35px; }
select#dobmonth.required { width: 130px; margin: 35px 5px 15px 0; }
select#dobyear.required { width: 95px; margin: 35px 35px 15px 0; }
.valid { border: 1px solid #96a832; -moz-box-shadow: 0px 0px 4px #96a832; -webkit-box-shadow: 0px 0px 4px #96a832; box-shadow: 0px 0px 4px #96a832; }

/* Error states */

label.error { font-size: 14px; color: red; font-family: 'Open Sans', sans-serif; font-weight: 400; position: absolute; left: 0px; top: 180px; width: 400px; text-align: center; }
input.error { border: 1px solid #ff0000; -moz-box-shadow: 0px 0px 4px #FF8F91; -webkit-box-shadow: 0px 0px 4px #FF8F91; box-shadow: 0px 0px 4px #FF8F91; }
select.error { border: 1px solid #ff4700; -moz-box-shadow: 0px 0px 4px #FF8F91; -webkit-box-shadow: 0px 0px 4px #FF8F91; box-shadow: 0px 0px 4px #FF8F91; }

/* Button //////////////////////////////////////////////////////*/

.myButton { background: url('../_img/button2@2x.png') no-repeat; font-family: 'Open Sans'; sans-serif;
font-weight: 700; background-size: 161px 51px; width: 161px; height: 44px; font-size: 32px; color: #ffffff; padding: 8px 0 0 0; text-align: center; border: 0; cursor: pointer; border-radius: 5px; position: absolute; top: 225px; left: 120px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); }
.myButton:active { cursor: pointer; }

/* Terms of Use //////////////////////////////////////////////////////*/

p.terms { font-size: 11px; position: absolute; left: 0; top: 300px; width: 400px; text-align: center; color: #fff; }
p.terms a { color: #fff; text-decoration: none; }

/* 5 bottom steps //////////////////////////////////////////////////////*/


.steps { padding: 5px; margin: auto; text-align: center; position: absolute; top: 330px; left: 0px; width: 400px; }
.step_bar { width: 36px; height: 36px; display: inline-block; margin: 0 5px; font-size: 20px; color: #81aae0; background: #ffffff; border-radius: 50%; cursor: pointer; text-align: center; line-height: 36px; webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); }
.step_highlight { width: 36px; height: 36px; background: #0983ce; color: #ffffff; }

/* Login //////////////////////////////////////////////////////*/

.login { font-size: 20px; position: absolute; left: 0; top: 390px; width: 400px; text-align: center; color: #fff; }
.login a { color: #ee89b9; text-decoration: none; font-family: 'Open Sans', sans-serif; font-weight: 700; }

/* MEMBERS CONTAINER //////////////////////////////////////////////////////*/

#container-members { width: 100%; background: #ecf4fb; overflow: hidden; -moz-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); }
#members { width: 460px; float: left; margin: 20px 0 15px 30px; }
.member { width: 188px; float: left; display: inline; margin: 15px 42px 15px 0; text-align: center; }
.member img { border: none; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 0 15px 0; }
.member p { width: 200px; text-align: center; color: #252525; font-size: 17px; line-height: 26px; }
.member p span.pink { color: #e05998; font-size: 26px; }
.member p span.blue { color: #055eb2; font-size: 26px; }

/* COPY CONTAINER //////////////////////////////////////////////////////*/

#container-copy { width: 100%; height: 436px; background: url('../_img/copy@2x.jpg') no-repeat top center; background-size: cover; overflow-x: hidden; }
#copy { width: 360px; float: left; margin: 0 0 0 40px; background: rgba(0,6,26,0.70); padding: 30px 20px; }
#copy-top { float: left; width: 320px; background: url('../_img/cloud@2x.png') no-repeat top 2px right; background-size: 75px 58px; min-height: 58px; text-align: center; padding:0 40px 0 0;}
#copy-top h1 { font-weight: 700; color: #fff; font-size: 24px; margin: 0 0 8px 0; }
#copy-top h3 { color: #fff; font-size: 20px; }
#copy-main { width: 280px; float: left; font-size: 16px; line-height: 18px; color: #fff; text-align: center; margin: 50px 0 0 0; padding:0 40px;}
#copy-main strong { font-weight: 700; }

/* ICONS CONTAINER //////////////////////////////////////////////////////*/

#container-icons { width: 100%; background: #ecf4fb; overflow: hidden; -moz-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); }
#icons { width: 430px; float: left; margin: 30px 0 10px 40px; text-align: center; }
#icon1 { background: #464d5d url('../_img/icon1@2x.png') top 15px center no-repeat; background-size: 120px 163px; width: 152px; height: 134px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 20px 20px 0; padding: 190px 20px 0 20px; }
#icon2 { background: #464d5d url('../_img/icon2@2x.png') top 15px center no-repeat; background-size: 120px 163px; width: 152px; height: 134px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 20px 20px 0; padding: 190px 20px 0 20px; }
#icon3 { background: #464d5d url('../_img/icon3@2x.png') top 15px center no-repeat; background-size: 120px 163px; width: 152px; height: 134px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 20px 0 0; padding: 190px 20px 0 20px; }
#icon4 { background: #464d5d url('../_img/icon4@2x.png') top 15px center no-repeat; background-size: 120px 163px; width: 152px; height: 134px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 0 0 0; padding: 190px 20px 0 20px; }
#icon1 h3, #icon2 h3, #icon3 h3, #icon4 h3 { font-size: 24px; margin: 0 0 14px 0; }
#icon1 p, #icon2 p, #icon3 p, #icon4 p { font-size: 14px; line-height: 16px; }
#icon1 p strong, #icon2 p strong, #icon3 p strong, #icon4 p strong { font-weight: 700; }
#icons-button { width: 400px; float: left; margin: 10px 0 30px 38px; text-align: center; }
#icons-joinfree { width: 293px; height: 66px; float: left; background: url('../_img/button1@2x.png') no-repeat; background-size: 293px 81px; font-size: 44px; font-weight: 700; color: #ffffff; padding: 15px 0 0 0; text-align: center; border: 0; cursor: pointer; border-radius: 5px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); margin: 0 0 0 60px; }

/* CROSS REG AND FOOTER CONTAINER //////////////////////////////////////////////////////*/

#container-crossreg { width: 100%; background: #222428; overflow: hidden; }
#crossreg { width: 420px; float: left; margin: 30px 0 30px 50px; }
#mature { width: 390px; height: 152px; float: left; display: inline; background: url('../_img/cr_mature@2x.jpg') no-repeat; background-size: 390px 152px; margin: 0 0 20px 0; }
#gay { width: 390px; height: 152px; float: left; display: inline; background: url('../_img/cr_gay@2x.jpg') no-repeat; background-size: 390px 152px; }
#mature div { width: 168px; height: 122px; float: left; background: rgba(0,6,26,0.7); padding: 15px 20px 15px 20px; font-size: 16px; }
#gay div { width: 168px; height: 122px; float: left; background: rgba(0,6,26,0.7); padding: 15px 20px 15px 20px; font-size: 16px; }
#mature div h2, #gay div h2 { font-family: 'lobster_twobold', sans-serif; font-size: 22px; margin: 10px 0 5px 0; }
#mature div a, #gay div a { float: left; width: 170px; height: 34px; background: url('../_img/button3@2x.png') no-repeat; background-size: 170px 44px; font-weight: 700; font-size: 22px; text-align: center; color: #fff; text-decoration: none; padding: 10px 0 0 0; border-radius: 5px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); }

#footer { width: 460px; float: left; margin: 0px 0 30px 10px; }
#footer1 { float: left; text-align: center; width:460px; }
#footer a { text-decoration: none; color: #fff; text-transform: uppercase; font-size: 13px; margin: 0 5px 20px 5px; text-align:center;}
#footer a:hover { color: #fa7cc8; }
#footer2 { float: left; display: inline; text-align: right; margin: 20px 0 0 130px; }
#footer2 a { width: 200px; height: 47px; float: right; background: url('../_img/odp@2x.png') no-repeat; background-size: 200px 47px; border: none; }

}

@media screen and (min-width: 670px) and (max-width: 879px) {
/* tablet tablet tablet tablet tablet tablet tablet tablet tablet tablet tablet tablet tablet */

/* LOGIN CONTAINER //////////////////////////////////////////////////////*/

.container { width: 670px; margin: 0 auto; }
#container-top { width: 100%; height: 660px; background: url('../_img/top@2x.jpg') no-repeat top center; background-size: cover; overflow-x: hidden; }
#top { width: 333px; height: 145px; float: left; margin: 0 0 0 60px; background: rgba(0,6,26,0.70); -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); }
#logo { width: 312px; height: 88px; float: left; background: url('../_img/logo@2x.png') no-repeat; background-size: 312px 88px; margin: 25px 0 0 10px; }

/* FORM //////////////////////////////////////////////////////*/

#top-form { width: 670px; float: left; margin: 85px 0 0 28px; position: relative; }
#form-circle { width: 190px; height: 190px; border-radius: 50%; background: rgba(229,36,136,0.60); color: #fff; text-align: center; text-shadow: 2px 2px 10px rgba(157,0,81,0.65); position: absolute; left: 385px; top: 90px; z-index: 4; line-height: 36px; -moz-box-shadow: inset 0 0 50px rgba(157,0,81,0.2); -webkit-box-shadow: inset 0 0 50px rgba(157,0,81,0.2); box-shadow: inset 0 0 50px rgba(157,0,81,0.2); display:block;}
#form-circle p { font-size: 22px; margin: 45px 0 0 0; }
#form-circle p span { font-size: 33px; font-family: 'Open Sans'; sans-serif;
font-weight: 700; }
#form-main-container { width: 400px; height: 430px; position: relative; top: 0px; left: 0px; margin: 0; background: rgba(0,6,26,0.7); -webkit-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); overflow: hidden; }
#form { width: 400px; height: 430px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

/* Steps content //////////////////////////////////////////////////////*/

#fstep_1, #fstep_2, #fstep_3, #fstep_4, #fstep_5 { position: absolute; left: 0px; top: 20px; transition: left 0.5s ease-in-out 0.3s; -moz-transition: left 0.5s ease-in-out 0.3s; width: 400px; }
#fstep_1 h3, #fstep_2 h3, #fstep_3 h3, #fstep_4 h3, #fstep_5 h3 { text-align: center; margin: 10px 0; color: #fff; font-size: 30px; }
#fstep_1 p, #fstep_2 p, #fstep_3 p, #fstep_4 p, #fstep_5 p { text-align: center; margin: 10px 0 10px 0; color: #fff; font-size: 20px; }
input { background: #ffffff; padding: 8px; margin: 35px 35px 15px 35px; border-radius: 0px; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 16px; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-appearance: none; border: 1px solid #333333; width: 305px; }
input[type="radio"] { position: absolute; left: -5000px; }
input[type="radio"] + label span.male, input[type="radio"] + label + label span.male { position: absolute; left: 135px; width: 62px; height: 106px; background: url('../_img/man@2x.png'); background-size: 62px 106px; cursor: pointer; }
input[type="radio"] + label span.female { position: absolute; left: 210px; width: 60px; height: 101px; background: url('../_img/woman@2x.png'); background-size: 60px 101px; cursor: pointer; }
input[type="radio"]:checked + label span.male, input[type="radio"]:checked ~ label span.male { background: url('../_img/man-checked@2x.png'); background-size: 62px 106px; cursor: pointer; }
input[type="radio"]:checked + label span.female { background: url('../_img/woman-checked@2x.png'); background-size: 60px 101px; cursor: pointer; }
select { padding: 8px; border-radius: 0px; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 16px; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-appearance: none; border: 1px solid #333333; background: #ffffff url('../_img/down-arrow.png') no-repeat top 2px right; }
select:hover { cursor: pointer; }
select#dobday.required { width: 80px; margin: 35px 5px 15px 35px; }
select#dobmonth.required { width: 130px; margin: 35px 5px 15px 0; }
select#dobyear.required { width: 95px; margin: 35px 35px 15px 0; }
.valid { border: 1px solid #96a832; -moz-box-shadow: 0px 0px 4px #96a832; -webkit-box-shadow: 0px 0px 4px #96a832; box-shadow: 0px 0px 4px #96a832; }

/* Error states */

label.error { font-size: 14px; color: red; font-family: 'Open Sans', sans-serif; font-weight: 400; position: absolute; left: 0px; top: 180px; width: 400px; text-align: center; }
input.error { border: 1px solid #ff0000; -moz-box-shadow: 0px 0px 4px #FF8F91; -webkit-box-shadow: 0px 0px 4px #FF8F91; box-shadow: 0px 0px 4px #FF8F91; }
select.error { border: 1px solid #ff4700; -moz-box-shadow: 0px 0px 4px #FF8F91; -webkit-box-shadow: 0px 0px 4px #FF8F91; box-shadow: 0px 0px 4px #FF8F91; }

/* Button //////////////////////////////////////////////////////*/

.myButton { background: url('../_img/button2@2x.png') no-repeat; font-family: 'Open Sans'; sans-serif;
font-weight: 700; background-size: 161px 51px; width: 161px; height: 44px; font-size: 32px; color: #ffffff; padding: 8px 0 0 0; text-align: center; border: 0; cursor: pointer; border-radius: 5px; position: absolute; top: 225px; left: 120px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); }
.myButton:active { cursor: pointer; }

/* Terms of Use //////////////////////////////////////////////////////*/

p.terms { font-size: 11px; position: absolute; left: 0; top: 300px; width: 400px; text-align: center; color: #fff; }
p.terms a { color: #fff; text-decoration: none; }

/* 5 bottom steps //////////////////////////////////////////////////////*/


.steps { padding: 5px; margin: auto; text-align: center; position: absolute; top: 330px; left: 0px; width: 400px; }
.step_bar { width: 36px; height: 36px; display: inline-block; margin: 0 5px; font-size: 20px; color: #81aae0; background: #ffffff; border-radius: 50%; cursor: pointer; text-align: center; line-height: 36px; webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); }
.step_highlight { width: 36px; height: 36px; background: #0983ce; color: #ffffff; }

/* Login //////////////////////////////////////////////////////*/

.login { font-size: 20px; position: absolute; left: 0; top: 390px; width: 400px; text-align: center; color: #fff; }
.login a { color: #ee89b9; text-decoration: none; font-family: 'Open Sans', sans-serif; font-weight: 700; }

/* MEMBERS CONTAINER //////////////////////////////////////////////////////*/

#container-members { width: 100%; background: #ecf4fb; overflow: hidden; -moz-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); }
#members { width: 630px; float: left; margin: 20px 0 15px 20px; }
.member { width: 188px; float: left; display: inline; margin: 15px 11px; text-align: center; }
.member img { border: none; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 0 15px 0; }
.member p { width: 200px; text-align: center; color: #252525; font-size: 17px; line-height: 26px; }
.member p span.pink { color: #e05998; font-size: 26px; }
.member p span.blue { color: #055eb2; font-size: 26px; }
.display3 {display:none;}

/* COPY CONTAINER //////////////////////////////////////////////////////*/

#container-copy { width: 100%; height: 436px; background: url('../_img/copy@2x.jpg') no-repeat top center; background-size: cover; overflow-x: hidden; }
#copy { width: 465px; float: left; margin: 0 0 0 20px; background: rgba(0,6,26,0.70); padding: 40px 80px; }
#copy-top { float: left; width: 465px; background: url('../_img/cloud@2x.png') no-repeat top 5px right; background-size: 75px 58px; min-height: 58px; text-align: center; }
#copy-top h1 { font-weight: 700; color: #fff; font-size: 30px; margin: 0 0 12px 0; }
#copy-top h3 { color: #fff; font-size: 24px; }
#copy-main { width: 465px; float: left; font-size: 19px; line-height: 26px; color: #fff; text-align: center; margin: 50px 0 0 0; }
#copy-main strong { font-weight: 700; }

/* ICONS CONTAINER //////////////////////////////////////////////////////*/

#container-icons { width: 100%; background: #ecf4fb; overflow: hidden; -moz-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); }
#icons { width: 580px; float: left; margin: 30px 0 10px 70px; text-align: center; }
#icon1 { background: #464d5d url('../_img/icon1@2x.png') top 15px center no-repeat; background-size: 140px 190px; width: 180px; height: 160px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 41px 30px 0; padding: 220px 30px 0 30px; }
#icon2 { background: #464d5d url('../_img/icon2@2x.png') top 15px center no-repeat; background-size: 140px 190px; width: 180px; height: 160px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 41px 30px 0; padding: 220px 30px 0 30px; }
#icon3 { background: #464d5d url('../_img/icon3@2x.png') top 15px center no-repeat; background-size: 140px 190px; width: 180px; height: 160px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 41px 0 0; padding: 220px 30px 0 30px; }
#icon4 { background: #464d5d url('../_img/icon4@2x.png') top 15px center no-repeat; background-size: 140px 190px; width: 180px; height: 160px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 0 0 0; padding: 220px 30px 0 30px; }
#icon1 h3, #icon2 h3, #icon3 h3, #icon4 h3 { font-size: 30px; margin: 0 0 20px 0; }
#icon1 p, #icon2 p, #icon3 p, #icon4 p { font-size: 15px; line-height: 18px; }
#icon1 p strong, #icon2 p strong, #icon3 p strong, #icon4 p strong { font-weight: 700; }
#icons-button { width: 600px; float: left; margin: 10px 0 30px 20px; text-align: center; }
#icons-joinfree { width: 293px; height: 66px; float: left; background: url('../_img/button1@2x.png') no-repeat; background-size: 293px 81px; font-size: 44px; font-weight: 700; color: #ffffff; padding: 15px 0 0 0; text-align: center; border: 0; cursor: pointer; border-radius: 5px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); margin: 0 0 0 150px; }

/* CROSS REG AND FOOTER CONTAINER //////////////////////////////////////////////////////*/

#container-crossreg { width: 100%; background: #222428; overflow: hidden; }
#crossreg { width: 630px; float: left; margin: 30px 0 30px 20px; }
#mature { width: 502px; height: 196px; float: left; display: inline; background: url('../_img/cr_mature@2x.jpg') no-repeat; background-size: 502px 196px; margin: 0 20px 20px 60px; }
#gay { width: 502px; height: 196px; float: left; display: inline; background: url('../_img/cr_gay@2x.jpg') no-repeat; background-size: 502px 196px; margin: 0 20px 0 60px;}
#mature div { width: 228px; height: 151px; float: left; background: rgba(0,6,26,0.7); padding: 30px 20px 15px 20px; font-size: 18px; }
#gay div { width: 228px; height: 151px; float: left; background: rgba(0,6,26,0.7); padding: 30px 20px 15px 20px; font-size: 18px; }
#mature div h2, #gay div h2 { font-family: 'lobster_twobold', sans-serif; font-size: 30px; margin: 10px 0 10px 0; }
#mature div a, #gay div a { float: left; width: 202px; height: 43px; background: url('../_img/button3@2x.png') no-repeat; background-size: 202px 53px; font-weight: 700; font-size: 26px; text-align: center; color: #fff; text-decoration: none; padding: 10px 0 0 0; border-radius: 5px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); }
#footer { width: 630px; float: left; margin: 10px 0 30px 20px; }
#footer1 { float: left; display: inline; text-align: center; width:630px;}
#footer a { text-decoration: none; color: #fff; text-transform: uppercase; font-size: 18px; margin: 0 10px; }
#footer a:hover { color: #fa7cc8; }
#footer2 { float: left; display: inline; text-align: right; margin:10px 0 0 180px; }
#footer2 a { width: 236px; height: 56px; float: right; background: url('../_img/odp@2x.png') no-repeat; background-size: 236px 56px; border: none; }

}

@media screen and (min-width: 880px) and (max-width: 1099px) {
/* desktop desktop desktop desktop desktop desktop desktop desktop desktop desktop desktop desktop */

/* LOGIN CONTAINER //////////////////////////////////////////////////////*/

.container { width: 880px; margin: 0 auto; }
#container-top { width: 100%; height: 660px; background: url('../_img/top@2x.jpg') no-repeat top center; background-size: cover; overflow-x: hidden; }
#top { width: 333px; height: 145px; float: left; margin: 0 0 0 37px; background: rgba(0,6,26,0.70); -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); }
#logo { width: 312px; height: 88px; float: left; background: url('../_img/logo@2x.png') no-repeat; background-size: 312px 88px; margin: 25px 0 0 10px; }

/* FORM //////////////////////////////////////////////////////*/

#top-form { width: 880px; float: left; margin: 85px 0 0 236px; position: relative; }
#form-circle { width: 190px; height: 190px; border-radius: 50%; background: rgba(229,36,136,0.60); color: #fff; text-align: center; text-shadow: 2px 2px 10px rgba(157,0,81,0.65); position: absolute; left: 385px; top: 90px; z-index: 4; line-height: 36px; -moz-box-shadow: inset 0 0 50px rgba(157,0,81,0.2); -webkit-box-shadow: inset 0 0 50px rgba(157,0,81,0.2); box-shadow: inset 0 0 50px rgba(157,0,81,0.2);  display:block;}
#form-circle p { font-size: 22px; margin: 45px 0 0 0; }
#form-circle p span { font-size: 33px; font-family: 'Open Sans'; sans-serif;
font-weight: 700; }
#form-main-container { width: 400px; height: 430px; position: relative; top: 0px; left: 0px; margin: 0; background: rgba(0,6,26,0.7); -webkit-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); overflow: hidden; }
#form { width: 400px; height: 430px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

/* Steps content //////////////////////////////////////////////////////*/

#fstep_1, #fstep_2, #fstep_3, #fstep_4, #fstep_5 { position: absolute; left: 0px; top: 20px; transition: left 0.5s ease-in-out 0.3s; -moz-transition: left 0.5s ease-in-out 0.3s; width: 400px; }
#fstep_1 h3, #fstep_2 h3, #fstep_3 h3, #fstep_4 h3, #fstep_5 h3 { text-align: center; margin: 10px 0; color: #fff; font-size: 30px; }
#fstep_1 p, #fstep_2 p, #fstep_3 p, #fstep_4 p, #fstep_5 p { text-align: center; margin: 10px 0 10px 0; color: #fff; font-size: 20px; }
input { background: #ffffff; padding: 8px; margin: 35px 35px 15px 35px; border-radius: 0px; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 16px; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-appearance: none; border: 1px solid #333333; width: 305px; }
input[type="radio"] { position: absolute; left: -5000px; }
input[type="radio"] + label span.male, input[type="radio"] + label + label span.male { position: absolute; left: 135px; width: 62px; height: 106px; background: url('../_img/man@2x.png'); background-size: 62px 106px; cursor: pointer; }
input[type="radio"] + label span.female { position: absolute; left: 210px; width: 60px; height: 101px; background: url('../_img/woman@2x.png'); background-size: 60px 101px; cursor: pointer; }
input[type="radio"]:checked + label span.male, input[type="radio"]:checked ~ label span.male { background: url('../_img/man-checked@2x.png'); background-size: 62px 106px; cursor: pointer; }
input[type="radio"]:checked + label span.female { background: url('../_img/woman-checked@2x.png'); background-size: 60px 101px; cursor: pointer; }
select { padding: 8px; border-radius: 0px; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 16px; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-appearance: none; border: 1px solid #333333; background: #ffffff url('../_img/down-arrow.png') no-repeat top 2px right; }
select:hover { cursor: pointer; }
select#dobday.required { width: 80px; margin: 35px 5px 15px 35px; }
select#dobmonth.required { width: 130px; margin: 35px 5px 15px 0; }
select#dobyear.required { width: 95px; margin: 35px 35px 15px 0; }
.valid { border: 1px solid #96a832; -moz-box-shadow: 0px 0px 4px #96a832; -webkit-box-shadow: 0px 0px 4px #96a832; box-shadow: 0px 0px 4px #96a832; }

/* Error states */

label.error { font-size: 14px; color: red; font-family: 'Open Sans', sans-serif; font-weight: 400; position: absolute; left: 0px; top: 180px; width: 400px; text-align: center; }
input.error { border: 1px solid #ff0000; -moz-box-shadow: 0px 0px 4px #FF8F91; -webkit-box-shadow: 0px 0px 4px #FF8F91; box-shadow: 0px 0px 4px #FF8F91; }
select.error { border: 1px solid #ff4700; -moz-box-shadow: 0px 0px 4px #FF8F91; -webkit-box-shadow: 0px 0px 4px #FF8F91; box-shadow: 0px 0px 4px #FF8F91; }

/* Button //////////////////////////////////////////////////////*/

.myButton { background: url('../_img/button2@2x.png') no-repeat; font-family: 'Open Sans'; sans-serif;
font-weight: 700; background-size: 161px 51px; width: 161px; height: 44px; font-size: 32px; color: #ffffff; padding: 8px 0 0 0; text-align: center; border: 0; cursor: pointer; border-radius: 5px; position: absolute; top: 225px; left: 120px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); }
.myButton:active { cursor: pointer; }

/* Terms of Use //////////////////////////////////////////////////////*/

p.terms { font-size: 11px; position: absolute; left: 0; top: 300px; width: 400px; text-align: center; color: #fff; }
p.terms a { color: #fff; text-decoration: none; }

/* 5 bottom steps //////////////////////////////////////////////////////*/


.steps { padding: 5px; margin: auto; text-align: center; position: absolute; top: 330px; left: 0px; width: 400px; }
.step_bar { width: 36px; height: 36px; display: inline-block; margin: 0 5px; font-size: 20px; color: #81aae0; background: #ffffff; border-radius: 50%; cursor: pointer; text-align: center; line-height: 36px; webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); }
.step_highlight { width: 36px; height: 36px; background: #0983ce; color: #ffffff; }

/* Login //////////////////////////////////////////////////////*/

.login { font-size: 20px; position: absolute; left: 0; top: 390px; width: 400px; text-align: center; color: #fff; }
.login a { color: #ee89b9; text-decoration: none; font-family: 'Open Sans', sans-serif; font-weight: 700; }

/* MEMBERS CONTAINER //////////////////////////////////////////////////////*/

#container-members { width: 100%; background: #ecf4fb; overflow: hidden; -moz-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); }
#members { width: 804px; float: left; margin: 20px 0 15px 38px; }
.member { width: 188px; float: left; display: inline; margin: 15px 6px; text-align: center; }
.member img { border: none; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 0 15px 0; }
.member p { width: 200px; text-align: center; color: #252525; font-size: 17px; line-height: 26px; }
.member p span.pink { color: #e05998; font-size: 26px; }
.member p span.blue { color: #055eb2; font-size: 26px; }
.display3, .display2 {display:none;}

/* COPY CONTAINER //////////////////////////////////////////////////////*/

#container-copy { width: 100%; height: 436px; background: url('../_img/copy@2x.jpg') no-repeat top center; background-size: cover; overflow-x: hidden; }
#copy { width: 465px; float: left; margin: 0 0 0 130px; background: rgba(0,6,26,0.70); padding: 40px 80px; }
#copy-top { float: left; width: 465px; background: url('../_img/cloud@2x.png') no-repeat top 5px right; background-size: 75px 58px; min-height: 58px; text-align: center; }
#copy-top h1 { font-weight: 700; color: #fff; font-size: 30px; margin: 0 0 12px 0; }
#copy-top h3 { color: #fff; font-size: 24px; }
#copy-main { width: 465px; float: left; font-size: 19px; line-height: 26px; color: #fff; text-align: center; margin: 50px 0 0 0; }
#copy-main strong { font-weight: 700; }

/* ICONS CONTAINER //////////////////////////////////////////////////////*/

#container-icons { width: 100%; background: #ecf4fb; overflow: hidden; -moz-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); }
#icons { width: 804px; float: left; margin: 30px 0 10px 38px; text-align: center; }
#icon1 { background: #464d5d url('../_img/icon1@2x.png') top 15px center no-repeat; background-size: 120px 163px; width: 152px; height: 134px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 12px 0 0; padding: 190px 20px 0 20px; }
#icon2 { background: #464d5d url('../_img/icon2@2x.png') top 15px center no-repeat; background-size: 120px 163px; width: 152px; height: 134px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 12px 0 0; padding: 190px 20px 0 20px; }
#icon3 { background: #464d5d url('../_img/icon3@2x.png') top 15px center no-repeat; background-size: 120px 163px; width: 152px; height: 134px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 12px 0 0; padding: 190px 20px 0 20px; }
#icon4 { background: #464d5d url('../_img/icon4@2x.png') top 15px center no-repeat; background-size: 120px 163px; width: 152px; height: 134px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 0 0 0; padding: 190px 20px 0 20px; }
#icon1 h3, #icon2 h3, #icon3 h3, #icon4 h3 { font-size: 24px; margin: 0 0 14px 0; }
#icon1 p, #icon2 p, #icon3 p, #icon4 p { font-size: 14px; line-height: 16px; }
#icon1 p strong, #icon2 p strong, #icon3 p strong, #icon4 p strong { font-weight: 700; }
#icons-button { width: 804px; float: left; margin: 10px 0 30px 38px; text-align: center; }
#icons-joinfree { width: 293px; height: 66px; float: left; background: url('../_img/button1@2x.png') no-repeat; background-size: 293px 81px; font-size: 44px; font-weight: 700; color: #ffffff; padding: 15px 0 0 0; text-align: center; border: 0; cursor: pointer; border-radius: 5px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); margin: 0 0 0 254px; }

/* CROSS REG AND FOOTER CONTAINER //////////////////////////////////////////////////////*/

#container-crossreg { width: 100%; background: #222428; overflow: hidden; }
#crossreg { width: 804px; float: left; margin: 30px 0 30px 38px; }
#mature { width: 390px; height: 152px; float: left; display: inline; background: url('../_img/cr_mature@2x.jpg') no-repeat; background-size: 390px 152px; margin: 0 20px 0 0; }
#gay { width: 390px; height: 152px; float: left; display: inline; background: url('../_img/cr_gay@2x.jpg') no-repeat; background-size: 390px 152px; }
#mature div { width: 248px; height: 122px; float: left; background: rgba(0,6,26,0.7); padding: 15px 20px 15px 20px; font-size: 16px; }
#gay div { width: 218px; height: 122px; float: left; background: rgba(0,6,26,0.7); padding: 15px 20px 15px 20px; font-size: 16px; }
#mature div h2, #gay div h2 { font-family: 'lobster_twobold', sans-serif; font-size: 26px; margin: 10px 0 5px 0; }
#mature div a, #gay div a { float: left; width: 170px; height: 34px; background: url('../_img/button3@2x.png') no-repeat; background-size: 170px 44px; font-weight: 700; font-size: 22px; text-align: center; color: #fff; text-decoration: none; padding: 10px 0 0 0; border-radius: 5px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); }
#footer { width: 804px; float: left; margin: 0px 0 30px 38px; }
#footer1 { float: left; display: inline; text-align: left; }
#footer a { text-decoration: none; color: #fff; text-transform: uppercase; font-size: 16px; margin: 0 5px; }
#footer a:hover { color: #fa7cc8; }
#footer2 { float: right; display: inline; text-align: right; margin: 0 }
#footer2 a { width: 200px; height: 47px; float: right; background: url('../_img/odp@2x.png') no-repeat; background-size: 200px 47px; border: none; }
	
}


@media screen and (min-width: 1100px) {
/* desktop desktop desktop desktop desktop desktop desktop desktop desktop desktop desktop desktop */
	
/* LOGIN CONTAINER //////////////////////////////////////////////////////*/

.container { width: 1100px; margin: 0 auto; }
#container-top { width: 100%; height: 660px; background: url('../_img/top@2x.jpg') no-repeat top center; background-size: cover; overflow-x: hidden; }
#top { width: 333px; height: 145px; float: left; margin: 0 0 0 37px; background: rgba(0,6,26,0.70); -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); }
#logo { width: 312px; height: 88px; float: left; background: url('../_img/logo@2x.png') no-repeat; background-size: 312px 88px; margin: 25px 0 0 10px; }

/* FORM //////////////////////////////////////////////////////*/

#top-form { width: 1100px; float: left; margin: 85px 0 0 350px; position: relative; }
#form-circle { width: 190px; height: 190px; border-radius: 50%; background: rgba(229,36,136,0.60); color: #fff; text-align: center; text-shadow: 2px 2px 10px rgba(157,0,81,0.65); position: absolute; left: 385px; top: 90px; z-index: 4; line-height: 36px; -moz-box-shadow: inset 0 0 50px rgba(157,0,81,0.2); -webkit-box-shadow: inset 0 0 50px rgba(157,0,81,0.2); box-shadow: inset 0 0 50px rgba(157,0,81,0.2); display:block;}
#form-circle p { font-size: 22px; margin: 45px 0 0 0; }
#form-circle p span { font-size: 33px; font-family: 'Open Sans'; sans-serif;
font-weight: 700; }
#form-main-container { width: 400px; height: 430px; position: relative; top: 0px; left: 0px; margin: 0; background: rgba(0,6,26,0.7); -webkit-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.5); overflow: hidden; }
#form { width: 400px; height: 430px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

/* Steps content //////////////////////////////////////////////////////*/

#fstep_1, #fstep_2, #fstep_3, #fstep_4, #fstep_5 { position: absolute; left: 0px; top: 20px; transition: left 0.5s ease-in-out 0.3s; -moz-transition: left 0.5s ease-in-out 0.3s; width: 400px; }
#fstep_1 h3, #fstep_2 h3, #fstep_3 h3, #fstep_4 h3, #fstep_5 h3 { text-align: center; margin: 10px 0; color: #fff; font-size: 30px; }
#fstep_1 p, #fstep_2 p, #fstep_3 p, #fstep_4 p, #fstep_5 p { text-align: center; margin: 10px 0 10px 0; color: #fff; font-size: 20px; }
input { background: #ffffff; padding: 8px; margin: 35px 35px 15px 35px; border-radius: 0px; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 16px; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-appearance: none; border: 1px solid #333333; width: 305px; }
input[type="radio"] { position: absolute; left: -5000px; }
input[type="radio"] + label span.male, input[type="radio"] + label + label span.male { position: absolute; left: 135px; width: 62px; height: 106px; background: url('../_img/man@2x.png'); background-size: 62px 106px; cursor: pointer; }
input[type="radio"] + label span.female { position: absolute; left: 210px; width: 60px; height: 101px; background: url('../_img/woman@2x.png'); background-size: 60px 101px; cursor: pointer; }
input[type="radio"]:checked + label span.male, input[type="radio"]:checked ~ label span.male { background: url('../_img/man-checked@2x.png'); background-size: 62px 106px; cursor: pointer; }
input[type="radio"]:checked + label span.female { background: url('../_img/woman-checked@2x.png'); background-size: 60px 101px; cursor: pointer; }
select { padding: 8px; border-radius: 0px; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 16px; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-appearance: none; border: 1px solid #333333; background: #ffffff url('../_img/down-arrow.png') no-repeat top 2px right; }
select:hover { cursor: pointer; }
select#dobday.required { width: 80px; margin: 35px 5px 15px 35px; }
select#dobmonth.required { width: 130px; margin: 35px 5px 15px 0; }
select#dobyear.required { width: 95px; margin: 35px 35px 15px 0; }
.valid { border: 1px solid #96a832; -moz-box-shadow: 0px 0px 4px #96a832; -webkit-box-shadow: 0px 0px 4px #96a832; box-shadow: 0px 0px 4px #96a832; }

/* Error states */

label.error { font-size: 14px; color: red; font-family: 'Open Sans', sans-serif; font-weight: 400; position: absolute; left: 0px; top: 180px; width: 400px; text-align: center; }
input.error { border: 1px solid #ff0000; -moz-box-shadow: 0px 0px 4px #FF8F91; -webkit-box-shadow: 0px 0px 4px #FF8F91; box-shadow: 0px 0px 4px #FF8F91; }
select.error { border: 1px solid #ff4700; -moz-box-shadow: 0px 0px 4px #FF8F91; -webkit-box-shadow: 0px 0px 4px #FF8F91; box-shadow: 0px 0px 4px #FF8F91; }

/* Button //////////////////////////////////////////////////////*/

.myButton { background: url('../_img/button2@2x.png') no-repeat; font-family: 'Open Sans'; sans-serif;
font-weight: 700; background-size: 161px 51px; width: 161px; height: 44px; font-size: 32px; color: #ffffff; padding: 8px 0 0 0; text-align: center; border: 0; cursor: pointer; border-radius: 5px; position: absolute; top: 225px; left: 120px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); }
.myButton:active { cursor: pointer; }

/* Terms of Use //////////////////////////////////////////////////////*/

p.terms { font-size: 11px; position: absolute; left: 0; top: 300px; width: 400px; text-align: center; color: #fff; }
p.terms a { color: #fff; text-decoration: none; }

/* 5 bottom steps //////////////////////////////////////////////////////*/


.steps { padding: 5px; margin: auto; text-align: center; position: absolute; top: 330px; left: 0px; width: 400px; }
.step_bar { width: 36px; height: 36px; display: inline-block; margin: 0 5px; font-size: 20px; color: #81aae0; background: #ffffff; border-radius: 50%; cursor: pointer; text-align: center; line-height: 36px; webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); }
.step_highlight { width: 36px; height: 36px; background: #0983ce; color: #ffffff; }

/* Login //////////////////////////////////////////////////////*/

.login { font-size: 20px; position: absolute; left: 0; top: 390px; width: 400px; text-align: center; color: #fff; }
.login a { color: #ee89b9; text-decoration: none; font-family: 'Open Sans', sans-serif; font-weight: 700; }

/* MEMBERS CONTAINER //////////////////////////////////////////////////////*/

#container-members { width: 100%; background: #ecf4fb; overflow: hidden; -moz-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); }
#members { width: 1024px; float: left; margin: 20px 0 15px 38px; }
.member { width: 188px; float: left; display: inline; margin: 15px 8px; text-align: center; }
.member img { border: none; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 0 15px 0; }
.member p { width: 200px; text-align: center; color: #252525; font-size: 17px; line-height: 26px; }
.member p span.pink { color: #e05998; font-size: 26px; }
.member p span.blue { color: #055eb2; font-size: 26px; }

/* COPY CONTAINER //////////////////////////////////////////////////////*/

#container-copy { width: 100%; height: 436px; background: url('../_img/copy@2x.jpg') no-repeat top center; background-size: cover; overflow-x: hidden; }
#copy { width: 465px; float: left; margin: 0 0 0 237px; background: rgba(0,6,26,0.70); padding: 40px 80px; }
#copy-top { float: left; width: 465px; background: url('../_img/cloud@2x.png') no-repeat top 5px right; background-size: 75px 58px; min-height: 58px; text-align: center; padding:0;}
#copy-top h1 { font-weight: 700; color: #fff; font-size: 30px; margin: 0 0 12px 0; }
#copy-top h3 { color: #fff; font-size: 24px; }
#copy-main { width: 465px; float: left; font-size: 19px; line-height: 26px; color: #fff; text-align: center; margin: 50px 0 0 0; padding:0; }
#copy-main strong { font-weight: 700; }

/* ICONS CONTAINER //////////////////////////////////////////////////////*/

#container-icons { width: 100%; background: #ecf4fb; overflow: hidden; -moz-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); box-shadow: inset 0 25px 25px -25px rgba(0,0,0,0.3), inset 0 -25px 25px -25px rgba(0,0,0,0.3); }
#icons { width: 1024px; float: left; margin: 30px 0 10px 38px; text-align: center; }
#icon1 { background: #464d5d url('../_img/icon1@2x.png') top 15px center no-repeat; background-size: 140px 190px; width: 180px; height: 160px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 21px 0 0; padding: 220px 30px 0 30px; }
#icon2 { background: #464d5d url('../_img/icon2@2x.png') top 15px center no-repeat; background-size: 140px 190px; width: 180px; height: 160px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 21px 0 0; padding: 220px 30px 0 30px; }
#icon3 { background: #464d5d url('../_img/icon3@2x.png') top 15px center no-repeat; background-size: 140px 190px; width: 180px; height: 160px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 21px 0 0; padding: 220px 30px 0 30px; }
#icon4 { background: #464d5d url('../_img/icon4@2x.png') top 15px center no-repeat; background-size: 140px 190px; width: 180px; height: 160px; float: left; display: inline; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.6); margin: 0 0 0 0; padding: 220px 30px 0 30px; }
#icon1 h3, #icon2 h3, #icon3 h3, #icon4 h3 { font-size: 30px; margin: 0 0 20px 0; }
#icon1 p, #icon2 p, #icon3 p, #icon4 p { font-size: 15px; line-height: 18px; }
#icon1 p strong, #icon2 p strong, #icon3 p strong, #icon4 p strong { font-weight: 700; }
#icons-button { width: 1024px; float: left; margin: 10px 0 30px 38px; text-align: center; }
#icons-joinfree { width: 293px; height: 66px; float: left; background: url('../_img/button1@2x.png') no-repeat; background-size: 293px 81px; font-size: 44px; font-weight: 700; color: #ffffff; padding: 15px 0 0 0; text-align: center; border: 0; cursor: pointer; border-radius: 5px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); margin: 0 0 0 360px; }

/* CROSS REG AND FOOTER CONTAINER //////////////////////////////////////////////////////*/

#container-crossreg { width: 100%; background: #222428; overflow: hidden; }
#crossreg { width: 1024px; float: left; margin: 30px 0 30px 38px; }
#mature { width: 502px; height: 196px; float: left; display: inline; background: url('../_img/cr_mature@2x.jpg') no-repeat; background-size: 502px 196px; margin: 0 20px 0 0; }
#gay { width: 502px; height: 196px; float: left; display: inline; background: url('../_img/cr_gay@2x.jpg') no-repeat; background-size: 502px 196px; }
#mature div { width: 248px; height: 151px; float: left; background: rgba(0,6,26,0.7); padding: 30px 20px 15px 20px; font-size: 18px; }
#gay div { width: 218px; height: 151px; float: left; background: rgba(0,6,26,0.7); padding: 30px 20px 15px 20px; font-size: 18px; }
#mature div h2, #gay div h2 { font-family: 'lobster_twobold', sans-serif; font-size: 32px; margin: 10px 0 10px 0; }
#mature div a, #gay div a { float: left; width: 202px; height: 43px; background: url('../_img/button3@2x.png') no-repeat; background-size: 202px 53px; font-weight: 700; font-size: 26px; text-align: center; color: #fff; text-decoration: none; padding: 10px 0 0 0; border-radius: 5px; -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.55); }
#footer { width: 1036px; float: left; margin: 0px 0 30px 38px; }
#footer1 { float: left; display: inline; text-align: left; width:600px;}
#footer a { text-decoration: none; color: #fff; text-transform: uppercase; font-size: 18px; margin: 0 10px; }
#footer a:hover { color: #fa7cc8; }
#footer2 { float: right; display: inline; text-align: right; margin: 0 }
#footer2 a { width: 236px; height: 56px; float: right; background: url('../_img/odp@2x.png') no-repeat; background-size: 236px 56px; border: none; }
}