body,html {margin:0; padding:0}
body {margin:0; padding:0; font:400 18px Montserrat,sans-serif; text-align:left; background:#fff; box-sizing:border-box}
button,input,select {-webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none; border-radius:0; border:2px solid #ccc}
button:focus,input:focus,select:focus {outline:0}
h1,h2,h3,h4,h5 {margin:0; padding:0}

.body-wrapper {padding:0 20px 20px; display:flex; flex-direction:column; align-items:center}
footer,header {width:100%; max-width:1920px}
header {display:flex; justify-content:center; position:relative;}

.hamburger {font-size:30px; display:none; width:1em; height:1em; position:absolute; z-index:10; top:0; right:0; padding:.5em; box-sizing:content-box; cursor:pointer}
.hamburger hr {height:.125em; width:1em; position:absolute; border:none; color:#fff; background:currentColor; transition:.5s; transform:translate(0,-50%) scale(1.01); transform-origin:center}
.hamburger hr:nth-child(1) {top:.2em}
.hamburger hr:nth-child(2) {top:.5em}
.hamburger hr:nth-child(3) {top:.8em}
.hamburger.active hr:nth-child(1) {transform:translate(0,.3em) rotate(45deg) scaleX(1.2)}
.hamburger.active hr:nth-child(2) {width:0; opacity:0}
.hamburger.active hr:nth-child(3) {transform:translate(0,-.3em) rotate(-45deg) scaleX(1.2)}
.overlay {z-index:-1; position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.8); pointer-events:none; opacity:0; transition:opacity 1s,z-index 1s 0s}
.mobile-active .overlay,.nav-active .overlay,.registration-active .overlay {z-index:1; pointer-events:all; transition:opacity .5s; opacity:1}

.checkbox-holder {display:inline-block; position:relative; width:20px; height:20px; background-color:#fff; border-radius:2px; margin-right:5px; border:1px solid #b6b6b6; text-align:center}
.checkbox-holder input[type=checkbox] {opacity:0; position:absolute; left:0; top:0; width: 20px; margin: 0; height: 20px;}
.checkbox-holder .check {color:#000; opacity:0; font-size:16px; line-height:18px; user-select:none}
.checkbox-holder input[type=checkbox]:checked+.check {opacity:1}
.checkbox-holder .terms-rarr {position:absolute; color:#ce0000; font-size:38px; left:-20px; top:-20px; opacity:0; transition:opacity .3s ease-in; pointer-events:none}
.checkbox-holder #agree.invalid~.terms-rarr {animation:rarr .7s ease-in-out infinite alternate; opacity:1}
@keyframes rarr {
    0% {left:-25px}
    100% {transform:translate(-100%)}
}

.gradient {display:none; z-index:0; width:100%; position:absolute; height:100%; left:0; bottom:0; background:-moz-linear-gradient(top,rgba(30,87,153,0) 0,rgba(17,47,65,.7) 100%); background:-webkit-linear-gradient(top,rgba(30,87,153,0) 0,rgba(17,47,65,.7) 100%); background:linear-gradient(to bottom,rgba(30,87,153,0) 0,rgba(17,47,65,.7) 100%)}
.visual {position:relative; background:url(/images/index/visual.jpg) no-repeat center top; background-size:cover; display:flex; align-items:flex-start; justify-content:flex-end; flex-direction:column; flex:1}

.logo {max-width:240px; margin:0 auto; text-align:center}
.logo img {max-width:100%}
.slogan {font:bold 90px/1 Montserrat,sans-serif; text-transform:uppercase; margin:0 0 0 55px; color:#fff}

.login-form {position:absolute; right:118px; top:0; max-width:400px; box-sizing:content-box; transition:.3s ease-in,padding 0s; padding:0}
.en-us .login-form {right:145px}
.mobile-active .login-form, .nav-active .login-form {z-index:2}
.login-form form {box-sizing:border-box; display:flex; flex-direction:column; background-color:#112f41}
.mobile-active .login-form form, .nav-active .login-form form {padding:50px; min-width:400px}
.login-fields {display:none; transition:all .5s ease}
.login-fields.active {display:block}
.login-form h3 {font:bold 22px Montserrat,sans-serif; color:#fafafb; padding:0 0 18px}
body.de .login-form h3 {font-size:20px}
.login-form .recovery {display:flex; justify-content:space-between; margin:0 0 15px; flex-direction:row}
.login-form a,.login-form label {color:rgba(255,255,255,.8); font:normal 12px/1.5 Montserrat,sans-serif; cursor:pointer}
.login-form a {white-space:nowrap; text-decoration:underline}
.login-form a:hover {text-decoration:none}
.login-form label {display:flex; align-items:center}
.login-form #login, .login-form #password {width:100%; font:normal 14px Montserrat,sans-serif; text-align:left; height:41px; border:2px solid #ccc; padding:0 0 0 13px; background-color:#fff; -webkit-appearance:none; -moz-appearance:none; appearance:none; box-sizing:border-box; border-radius:0; margin:0 0 18px}
.login-form #login.invalid,.login-form #password.invalid {border:solid 2px #fd5252; color:red; background-color:#ffe1e1}
input#login.invalid::-webkit-input-placeholder,input#password.invalid::-webkit-input-placeholder {color:red}
input#login.invalid::-moz-placeholder,input#password.invalid::-moz-placeholder {color:red}
input#login.invalid:-ms-input-placeholder,input#password.invalid:-ms-input-placeholder {color:red}
input#login.invalid:-moz-placeholder,input#password.invalid:-moz-placeholder {color:red}
#rememberMe {margin:0 10px 0 0; padding:0; appearance:none; -moz-appearance:none; -webkit-appearance:none; width:18px; height:18px; display:inline-block; background-color:#fff; border:none}
#rememberMe:checked {box-shadow:0 0 0 4px #f4f4f4 inset; background-color:#2f2e2e}
#rememberMe.invalid:not(:checked) {background-color:transparent}
.login-form .button {color:#4fb99f; background-color:#fff; text-transform:uppercase; cursor:pointer; font:bold 16px Montserrat,sans-serif; display:inline-block; padding:9px 20px; min-width:105px; text-align:center; transition:all .3s ease-in; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; border:none; width:100%; box-sizing:border-box}
.login-form .button:hover {color:#112f41; background-color:#fff}
.mobile-active .login-form .button, .nav-active .login-form .button {box-shadow:0 12px 28px 0 rgba(11,31,43,.4); background-color:#fd5252; text-transform:uppercase; font:bold 22px Montserrat,sans-serif; width:100%; border:none; padding:16px 0; color:#fff; cursor:pointer}
.already-member {display:none}

.switcher {position:absolute; top:0; right:30px; display:flex; background-color:#fff; padding:0; transition:all .5s ease}
.switcher .label-native {display:none}
.switcher .label {height:auto; padding:9px 11px 9px 17px; box-sizing:border-box; text-transform:uppercase; font:bold 16px/1.2 Montserrat,sans-serif; color:#b4b0a8; cursor:pointer}
.switcher .label-lc {display:block}
#trigger {height:37px; width:30px; cursor:pointer; background:url(/images/index/select-arow.png) no-repeat center center}
.languages {display:none; justify-content:space-between; width:470px; background:#fff; position:absolute; top:0; right:0}
.switcher.active .languages {display:flex}
.languages ul {display:flex; flex-wrap:wrap; padding:0; list-style:none; width:100%; margin:0}
.languages ul li {flex-basis:33%}
.languages ul li * {color:#b4b0a8; font:bold 16px Montserrat,sans-serif; text-decoration:none; text-align:right; padding:10px 23px 12px 0; display:block}
.languages ul li a:hover,.languages ul li span {background-color:#efeeee; color:#b4b0a8; font:bold 16px Montserrat,sans-serif}

.reg-holder {max-width:44%; background:#112f41; box-sizing:border-box; padding:50px 5% 0; margin:0 0 0 19px}
.Registration {width:100%; max-width:100%; text-align:center; padding:0 0 140px; margin:0}
.registration-active .Registration {position:relative; z-index:1}
.reg-title {font:bold 29px/1.3 Montserrat,sans-serif; color:#fafafb; text-align:center}
.reg-title strong {display:block; font-size:38px}
.reg-title span {color:#51c9aa}
.Registration form {margin:0 5%}
.Registration h2 {display: none}
.Registration dl {margin:0}
.Registration dl:nth-of-type(2) dd {display:flex; justify-content:space-between}
.Registration dl dd,.Registration dl dt {width:100%; margin:0; text-align:left}
.Registration dl dt {padding:10px 0 3px}
.Registration dt,.Registration dt label {font:normal 14px/1.5 Montserrat,sans-serif; color:#ecece9}
.Registration #email {box-sizing:border-box; padding:0 0 0 13px; color:#acacac; font-size:14px; width:100%; height:41px; border:solid 2px #ccc}
.Registration select {background-image:url(/images/index/select-arow.png); background-color:#fff; background-position:right center; background-repeat:no-repeat; box-sizing:border-box; padding:0 0 0 13px; color:#878787; width:100%; height:41px; border:2px solid #ccc; font-size:14px}
.Registration dl select::-ms-expand {display:none}
#birthDayPerson1,#birthMonthPerson1,#birthYearPerson1 {width:32%}
input#email::-webkit-input-placeholder {color:#acacac}
input#email::-moz-placeholder {color:#acacac}
input#email:-ms-input-placeholder {color:#acacac}
input#email:-moz-placeholder {color:#acacac}
.Registration #email.invalid,.Registration select.invalid {border:2px solid #fd5252; color:red; background-color:#ffe1e1}
input#email.invalid::-webkit-input-placeholder {color:red}
input#email.invalid::-moz-placeholder {color:red}
input#email.invalid:-ms-input-placeholder {color:red}
input#email.invalid:-moz-placeholder {color:red}

.login-form input:focus, .Registration select:focus, .Registration input:focus, .checkbox-holder:focus-within {box-shadow: 0px 0px 5px 2px rgba(255,255,255,1);}

.icon.warning.mailCheckerHelperMessage+p.icon.warning {color:#acacac; font-size:9px; background:0 0; display:none}
.Registration p.warning, .Registration p.warning a {color:#fff}
.RegistrationSimple p.warning {font:normal 12px/1.5 Montserrat,sans-serif; text-align:left}
.RegistrationSimple p.icon.warning {display:none}
.RegistrationSimple div.submit-block p.warning a:hover {text-decoration:none}
.Registration input.submit {white-space:normal; box-shadow:0 12px 28px 0 rgba(11,31,43,.4); background-color:#fd5252; text-transform:uppercase; font:bold 30px Montserrat,sans-serif; width:100%; border:none; padding:20px 0; color:#fff; cursor:pointer}
p.error {color:red; font-size:12px; text-align:center;}

.online-counters {color:#51c9aa; text-align:center; font:bold 22px Montserrat,sans-serif; margin:0 0 30px}
.online-counters span {color:rgba(255,255,255,.2); font-size:28px; font-weight:400; padding:0 10px}
.reg-link {display:none; transition:all 1s}

.middle {margin:10px 0 0; display:flex; flex-wrap:wrap; justify-content:space-between; max-width:1920px; width:100%}
.welcome-text {padding:0 65px 300px; box-sizing:border-box; flex-basis:38%; width:38%}
.welcome-text h2 {font:bold 40px Montserrat,sans-serif; color:#000; padding:70px 0 15px; text-transform:uppercase}
.welcome-text p {font:500 18px/2 Montserrat,sans-serif; color:#112f41; padding-bottom:35px; text-transform:uppercase}
.welcome-img {flex-basis:52%; width:52%; background:url(/images/index/matches.jpg) no-repeat center top; background-size:cover}
.middle-button {font:bold 18px/1 Montserrat,sans-serif; color:#fff; background:#112f41; padding:25px 15px; text-transform:uppercase; cursor:pointer; transition:all .5s ease-in; text-decoration:none; text-align:center; display:block}
.middle-button:hover {text-decoration:none; background:#4fb99f}
.welcome-container {margin:10px 0 0}
.welcome {font:bold 18px/2 Montserrat,sans-serif; color:#fff; text-transform:uppercase; margin:30px 20px 60px 55px; max-width:600px; width:80%}

.matches {padding:100px 20px 130px; box-sizing:border-box; flex:1; margin:-220px 0 0; position:relative; flex-basis:50%}
.matches-content {background:#4fb99f; mix-blend-mode:multiply; z-index:0; width:100%; height:100%; position:absolute; left:0; top:0}
.matches h3 {color:#fff; line-height:3.5; font:bold 40px Montserrat,sans-serif; text-transform:uppercase; position:relative; margin:0 0 10px 43%}
.matches p {font:500 18px/2 Montserrat,sans-serif; color:#fff; padding-bottom:35px; text-transform:uppercase; margin:0 40px 0 43%; position:relative}
.matches-additional {flex-basis:35%; background-color:#112f41; display:flex; align-items:center; justify-content:center; padding:75px 5%; box-sizing:border-box; margin:21px 0 0 21px}
.matches-button {box-shadow:0 12px 28px 0 rgba(11,31,43,.4); background-color:#fd5252; width:100%; font:bold 30px/1 Montserrat,sans-serif; color:#fff; text-decoration:none; text-transform:uppercase; padding:25px 0; text-align:center}
.matches-button:hover {background-color:#fc2727}
.chat-img {position:absolute; z-index:0; left:25px; bottom:0; width:400px}

footer {padding:50px 0 20px; overflow:hidden; text-align:center}
footer > .row {display:flex; justify-content:space-between; align-items:center}
footer .footer-logo {max-width:200px; display:block}
#footer-navigation {margin:0 10px; padding:0; display:flex; justify-content:space-between; align-items:center}
#footer-navigation li {list-style-type:none; padding:0 15px}
#footer-navigation li a {font:500 16px Montserrat,sans-serif; color:#959595; text-decoration:none}
#footer-navigation li a:hover {color:#112f41; text-decoration:none}
#copyright {font:500 12px Montserrat,sans-serif; color:#959595}

@media all and (max-width:1600px) {
    .chat-img {width:36%}
    .matches {padding:60px 20px 110px}
    .matches h3, .welcome-text h2 {font-size:36px}
    .matches h3 {margin:0 0 30px 43%}
    .matches p, .welcome, .welcome-text p {font-size:16px}
    .matches-additional {padding:45px 5%}
    .matches-button {font-size:20px}
    .slogan {font-size:60px}
    .Registration {padding:0 0 70px}
    .Registration input.submit {font-size:26px}
    .reg-title {font-size:24px; padding: 20px 0;}
    .online-counters {font-size:19px}
}
@media all and (max-width:1280px) {
    .Registration {padding:0 0 40px}
    .reg-holder {padding:50px 3% 0}
    .reg-title {padding:0 0 18px; font-size:20px}
    .reg-title strong {font-size:30px}
    .RegistrationSimple p.warning {font-size:11px}
    .welcome-text {padding:0 35px 300px}
    .online-counters {font-size:15px; margin:0 0 10px}
    .online-counters span {font-size:24px}
    .matches {padding:60px 20px 60px}
    #footer-navigation {justify-content: center; flex-wrap: wrap;}
}
@media all and (max-width:1024px) {
    #trigger {width:22px}
    .logo {margin:25px auto 10px}
    .slogan {font-size:50px; margin:0 0 0 35px}
    .RegistrationSimple p.warning {font-size:10px}
    .reg-holder {max-width:55%}

    .welcome {margin:30px 20px 40px 35px}
    .matches h3, .welcome-text h2 {font-size:28px}
    .matches p, .welcome, .welcome-text p {font-size:14px}
    .matches h3 {margin:0 0 30px 3%}
    .matches-button {font-size: 24px; line-height: 1.2;}
    .matches p {margin:0 20px 185px 3%}
    .welcome-text h2 {padding:30px 0 15px}
    .welcome-text {padding:0 35px 270px}

    .chat-img {width:46%; margin-left:-23%; left:50%}
    .online-counters {font-size:13px}
    .middle-button {padding:25px 45px}
    #footer-navigation li {padding:0 10px 10px}
    #copyright {margin:5px 0 0}
    footer > .row {align-items:flex-start}
}
@media all and (max-width:768px) {
    .body-wrapper {padding:0 13px 13px}
    .hamburger {display:block}
    .visual {align-items:center; padding:145px 0 60px}
    .slogan {margin:0 0 15px; z-index:1; text-align:center}
    .gradient {display:block}
    .logo {margin:0 auto 10px}
    header {flex-direction:column-reverse}
    .mobile-active header, .nav-active header, .reg-active header {min-height:100vh}

    .matches {margin:14px 0 0; background-blend-mode:normal; mix-blend-mode:normal; background:#4fb99f; text-align:center; padding:60px 20px 0}
    .matches-content {mix-blend-mode:unset}
    .matches h3 {margin-left:0}
    .matches-additional {padding:0 5%; margin:-20px 0 0; flex-basis:100%; z-index:0; background-color:transparent}
    .welcome-text {padding:0 35px 45px; flex-basis:100%; text-align:center}
    .welcome-text h2 {padding:40px 0 10px}
    .matches p, .welcome-text p {margin:0}
    .welcome-text p {text-align:center}
    .welcome-img {flex-basis:100%; min-height:500px}
    .chat-img {position:relative; margin:0 auto; left:auto}
    .welcome {z-index:1; margin:0 10px; text-align:center}
    .middle-button {padding:25px 85px}

    .reg-holder {max-width:100%; margin:0 0 27px; z-index:1; padding:23px 3% 0}
    .Registration {padding:0}
    .Registration form {display:none; transition:all .5s ease}
    .reg-active .Registration form {display:block}
    .reg-active .reg-holder {min-height:100%; position:absolute; top:0}
    .reg-title {font-size:24px}
    .reg-link {display:block; width:60%; margin:0 auto -20px}
    .online-counters {font-size:16px; margin:0 0 17px}
    .reg-active .online-counters, .reg-active .reg-link {display:none}
    .Registration input.submit, .matches-button {font-size: 20px; padding:17px 0}

    .authorization {display:none; flex-direction:column; align-items:center; background:#033042; z-index:1; top:50px; position:absolute; min-height:100%; left:0; width:100%}
    .reg-holder.active .authorization, .mobile-active .authorization, .nav-active .authorization {display:flex}
    .login-form {position:relative; left:0; width:90%; top:0}
    .switcher {position:relative; top:0; right:auto; padding:8px 0; width:90%; background-color:#f2f2f2; display:flex; justify-content:center; max-width:400px; margin:20px 0 0}
    .switcher .label-lc {display:none}
    .switcher .label-native {display:block}
    .languages {width:100%; top:62px; left:0; padding:0 4%; box-sizing:border-box; transition:all 1s}
    .languages ul {flex-direction:column}
    .languages ul li a,.languages ul li span {text-align:center}
    .already-member {display:block; color:#fff; font:bold 24px Montserrat,sans-serif; margin:50px 0 20px; text-align:center; text-transform:uppercase}
    .login-form h3 {display:none}
    #rememberMe {border:2px solid #2f2e2e}
    #rememberMe:checked {box-shadow:0 0 0 4px #fff inset; background-color:#2f2e2e}
    .login-form .button {background-color:#fd5252; color:#fff; margin:0; width:100%; font:bold 18px Montserrat,sans-serif; letter-spacing:1px; padding:22px 0 20px; transition:all 1.5s}
    .mobile-active .login-form form, .nav-active .login-form form {padding:0; min-width: auto;}
    .login-form .button:hover {background-color:#fc2727; color:#fff}

    footer > .row {flex-direction:column; align-items:center}
    footer .footer-logo {margin:10px 0 35px}
    #footer-navigation li {padding:0 20px 10px}
    #copyright {margin:10px 0 0}
}
@media all and (max-width:640px) {
    .reg-link {width:80%}
    p.submitbutton.warning {margin:10px 0}
    .welcome-text {padding:0 10px 45px}
    .matches {padding:50px 10px 0}
}
@media all and (max-width:480px) {
    .welcome {line-height:1.7}
    .welcome-img {min-height:380px}
    .welcome-text p {line-height:1.7}
    .matches h3, .welcome-text h2 {font-size:24px}
    .matches h3 {margin:0 0 4px 0}
    .middle-button {padding:20px 0; width:100%; margin:0; display:block}
    body.nl .middle-button {font-size:16px}
    .slogan {font-size:40px; margin:0 0 12px}
    body.da .slogan,body.de .slogan,body.el .slogan,body.es .slogan,body.fi .slogan,body.fr .slogan,body.hu .slogan,body.it .slogan,body.no .slogan,body.ru .slogan,body.sv .slogan {font-size:34px}
    .visual {padding:145px 0 45px}
    .reg-holder {padding:18px 3% 0}
    .reg-title {font-size:18px}
    .reg-title strong {font-size:26px}
    .reg-link {width:100%; padding: 17px 10px; box-sizing: border-box;}
    .online-counters {padding:0; font-size:12px}
    body.es .already-member,body.ja .already-member,body.pl .already-member,body.ru .already-member {font-size:18px}
}

/*483038.1.398.2.fc81bce*/