/* ============================== GENERAL ============================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: sans-serif; font-size: calc(4px + 0.66vw); display: flex; flex-direction: column; }
.wrapper { max-width: 62%; margin: auto; }
h1, h2 { margin: 0 0 0.5em; text-transform:  text-align: center; font-size: 1.75em;}
a { text-decoration: none; color: inherit; }
.error { margin-top: 0.6125em; text-align: center; }
.error:empty { display: none; }
.button {
    display: inline-block; padding: 0.75em 3em; border-width: 0.15em; border-style: solid;
    cursor: pointer; text-transform: uppercase; border-radius: 0.5em; font-weight: bold; transition: 0.2s;
}
.form-label { text-transform: uppercase; display: block; line-height: 2; font-size: 0.875em; font-weight: bold; }

/* ============================== INPUTS ============================== */
button, input, select {
    font-size: inherit; border: none;
    -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none;
}
input, select, button { padding: 0.75em; border-radius: 2px; }
select { background: url(/images/index/arrow.svg) no-repeat right 0.75em center; background-size: 0.75em; }
.checkbox-holder {
    display: inline-flex; position: relative; font-size: 1.5em;
    width: 1em; height: 1em; border-radius: 0.2em; margin-right: 0.6em;
}
.checkbox-holder input[type=checkbox] {
    opacity: 0; position: absolute; padding: 0; top: 0; left: 0; margin: 0; width: 1em; height: 1em;
}
.check { flex: 1; opacity: 0; fill: currentColor; padding: 0.2em; border-radius: 0.2em; }
:checked + .check { opacity: 1; }
.terms-rarr {
    position: absolute; font-size: 2em; left: -0.5em; top: -0.43em;
    opacity: 0; transition: opacity .3s ease-in; pointer-events: none;
}
.invalid ~ .terms-rarr { animation: rarr .7s ease-in-out infinite alternate; opacity: 1; }
@keyframes rarr { from { left: -25px; } to { transform: translate(-100%); } }

/* ============================== COLORS ============================== */
a:hover, h1 strong, .button, .accent, .remember, .mobile-only  { color: #eb69bb; border-color: #eb69bb; }
.button.cta, .button:hover, .button:focus, .check { background-color: #eb69bb; color: white; font-size:0.8em; }
@media (max-width: 640px) { #login-form button { background-color: #eb69bb; color: white; } }

input, select, button, .button, .checkbox-holder { background-color: white;  }
header, footer, #login-form, #registration-form, #locale-list { background-color: #1e1e1e; }
@media not all and (max-width: 640px) { #registration-form { background-color: rgba(255,255,255,0.9); } }
#registration-form { background-color: #f7fafd; }
.invalid { box-shadow: 0 0 2px 1px #ce0000; }
.error, .terms-rarr { color: #ce0000; }
input, select { box-shadow: 0 0 5px 0px rgba(0,0,0,0.3); }
input:focus, select:focus, button:focus, a:focus, .checkbox-holder:focus-within {
    outline: none; box-shadow: 0 0 3px 1px rgba(0,0,0,0.6);
}
.checkbox-holder { box-shadow: 0 0 1px 0.5px #b6b6b6; }
#locale-picker.active > *, #locale-toggle:focus { box-shadow: 0 0 0.5em rgba(0,0,0,0.3); }
header { box-shadow: 0 0 2px 0px rgba(0,0,0,0.4); }

/* ============================== HEADER ============================== */
header { font-size: 0.9em; z-index: 8; /* z-index needed due to shadow, cookies are 7 and mobile login is in the header */ }
header .wrapper { display: flex; position: relative; }
header .logo { margin: auto auto auto 1em; max-height: 5em; max-width: 30%; }
header label { display: inline-block; padding: 0.15rem; }
#login-form { display: flex; align-items: flex-start; padding: 0.4em; align-self: center; }
#login, #password { width: 11em; }
.remember-recover { display: flex; font-size: 0.8em; }
.remember, .recover { flex: 1; }
.remember .checkbox-holder { vertical-align: -0.2em; margin-right: 0.3em; }
.recover { align-self: center; margin-left: 0.5em; }
header button { margin-left: 0.75em; }

/* ============================== LOCALE PICKER ============================== */
.no-locales #locale-picker { display: none; }
#locale-picker { display: inline-flex; position: relative; margin-left: 1em; text-transform: uppercase; }
#locale-toggle { display: inline-flex; align-items: center; padding: 1em; }
#locale-toggle .long { display: none; }
#locale-toggle .caret { width: 0.9em; margin-left: 0.7em; fill: currentColor; }
#locale-picker.active #locale-list { display: block; }
#locale-picker.active::before {
    content: ''; position: absolute; bottom: -0.5em; left: 0; right: 0;
    height: 1em; background: white; z-index: 2; pointer-events: none;
}
#locale-list { display: none; position: absolute; top: 100%; right: 0; width: 30em; z-index: 1; }
#locale-list { columns: 2; padding: 0.5em 0; }
#locale-list a, #locale-list span { display: inline-block; width: 100%; padding: 1em 2em; }
#locale-list span { font-weight: bold; }

/* ============================== MAIN ============================== */
main { flex: 1; background: url(/images/index/desktop.jpg) center; background-size: cover; }
main .wrapper { display: flex; height: 100%; align-items: center; padding: 3% 0; }
#registration-form { max-width: 32em; margin-left: auto; padding: 2em 4em; border-radius: 2em; }
/* #registration-form select, #registration-form input { text-transform: uppercase; } */
.sex-group { display: flex; }
.my-sex-group, .lf-sex-group { flex: 1; }
.lf-sex-group { margin-left: 1em; }
/* using ~ instead of + due to possible hidden criteria inputs */
.form-group ~ .form-group { margin-top: 1.5em; }
.form-group select, #email { width: 100%; }
.bd-values { display: flex; width: 100%; }
.bd-values select { width: auto; flex-grow: 1; }
.bd-values select:nth-child(2) { margin: 0 10px; }
.terms-group { display: flex; }
.terms-group .checkbox-holder { flex: none; }
.terms-group .terms { font-size: 0.6375em; line-height: 2; }
.terms-group a { font-weight: bold; text-decoration: underline; }
.submit-group { font-size: 1.2em; text-align: center; }

.middle {margin:10px 0 0; display:flex; flex-wrap:wrap; justify-content:space-between; max-width:1920px; width:100%}

/* ==============================WELCOME TEXTE ============================== */
.welcome {text-align:left; color: #5b5b5b; margin:20px;  padding: 0 3% 0 3%; font-size:1.2em; }
.widgets {text-align:center; font-size:1.2em;  font-weight:400; line-height:15px; }
.breadcrumb {padding: 8px 15px;margin-bottom: 20px;list-style: none;}
.breadcrumb > li {display: inline-block;}
.breadcrumb > li + li:before {content: "/\00a0";padding: 0 5px;color: #cccccc;}
.breadcrumb > .active {color: #777777;}

a {
 color:#008cba;
 text-decoration:none;
 line-height:inherit
}

/* ============================== FOOTER ============================== */
footer { text-align: center; }
footer a { text-transform: uppercase; display: inline-block; padding: 0.75em 1.5em; margin: 0.75em 0; }
footer p { font-size: 0.8em; margin-top: 0; opacity: 0.6; }
footer p + p { display: none; }

/* ============================== MOBILE ============================== */
@media (max-width: 1200px) {
    .wrapper { max-width: calc(400px + 40vw); }
}
@media (max-width: 1000px) {
    body { font-size: 16px; }
    .desktop-only { display: none }
}
@media (max-width: 640px) {
    body { font-size: calc(6.5px + 2vmin); }
    h1, h2 {font-size: 1.2em;}
    header .wrapper { height: 50px; }
    header .logo { max-height: 50px; }
    .no-locales header .logo { margin: auto; }
    .welcome {text-align:left; margin:20px;  padding: 0 3% 0 3%; font-size:1.4em; line-height:1.4em; }
    main { background-image: url(/images/index/mobile.jpg); background-position: top center; }

    .mobile-content { margin: 85vw auto auto; text-align: center; padding-bottom: 1em; font-size: 14px; }
    .mobile-content h1 { font-size: 1.75em; }
    .mobile-content .button { font-size: 1.25em; padding: 0.75em 4em; }
    .mobile-content h2 { font-size:1.75em; opacity: 0.6; margin-top: 2em;}

    /* Popups */
    #login-form, #registration-form, #locale-list {
        position: fixed; top: 100%; left: 0; right: 0; border-radius: 1em 1em 0 0;
        transition: 0.5s; opacity: 0; z-index: 8; /* cookies are 7 */
    }
    #login-form.active, #registration-form.active, .active #locale-list { transform: translate(0, -100%); opacity: 1; }
    .mobile-nav { margin-top: 1em; text-align: center; }
    .mobile-nav a { font-weight: bold; text-transform: uppercase; }

    /* Locale */
    #locale-toggle { font-size: 14px; }
    #locale-list { display: block; width: 100%; font-size: 12px; }
    #locale-picker::before { display: none; }

    /* Login */
    #login-form, #registration-form { padding: 2em 5%; max-width: 100%; }
    #login-form { flex-direction: column; align-items: stretch;  }
    #login, #password { width: 100%; }
    .login-fields label { display: block; padding: 0.75em 0; }
    .remember-recover { font-size: 0.9em; }
    .recover { flex: none; }
    #login-form button { font-size: 1.2em; min-width: 75%; margin: 1em auto; }
}
@media not all and (max-width: 640px) {
    .mobile-only { display: none }
}
@media (min-width: 1920px) {
    body { font-size: 18px; }
}
.responsive-image {
    max-width: 100%; /* Ensures the image scales down with the screen size */
    height: auto;    /* Maintains aspect ratio */
    display: block;  /* Avoids inline element gaps */
    margin: 0 auto;  /* Centers the image */
}
/*361396.1.399.46.fc81bce*/