/* lato-100 - latin */
@font-face {
    font-family : 'Lato';
    font-style  : normal;
    font-weight : 100;
    src         : local(''),
    url('../../fonts/more2flirt/lato-v17-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../../fonts/more2flirt/lato-v17-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lato-300 - latin */
@font-face {
    font-family : 'Lato';
    font-style  : normal;
    font-weight : 300;
    src         : local(''),
    url('../../fonts/more2flirt/lato-v17-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../../fonts/more2flirt/lato-v17-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lato-regular - latin */
@font-face {
    font-family : 'Lato';
    font-style  : normal;
    font-weight : 400;
    src         : local(''),
    url('../../fonts/more2flirt/lato-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../../fonts/more2flirt/lato-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* aguafina-script-regular - latin */
@font-face {
    font-family : 'Aguafina Script';
    font-style  : normal;
    font-weight : 400;
    src         : local(''),
    url('../../fonts/more2flirt/aguafina-script-v9-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../../fonts/more2flirt/aguafina-script-v9-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

* {
    margin      : 0;
    padding     : 0;
    box-sizing  : border-box;
    font-family : "Lato", sans-serif;
    position    : relative;
}

body {
    background : #fff;
    font-size  : 16px;
    width      : 100%;
}

main {display : flex;flex-direction : column;align-items : center;width : 100%;overflow : hidden;}

header {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    width          : 100%;
    background     : url('../../img/more2flirt/header.jpg') top center /cover;
    padding        : 3em 3em 10em;
    color          : #fff;
}

p {
    display : block;
    width   : 100%;
}

.top {
    display        : flex;
    flex-direction : row;
    align-items    : baseline;
    max-width      : 100%;
    width          : 1280px;
    height         : 10vh;
    padding        : 0;
    flex-wrap      : wrap;
}

nav {
    z-index         : 1;
    display         : flex;
    justify-content : flex-end;
    align-items     : center;
}

nav a {
    color           : #fff;
    text-decoration : none;
    padding         : 0 0 0 2em;
}

.lang img {
    border : 1px solid #000;
}

.lang.active img {border-color : #fff;}

nav img {
    width         : 36px;
    height        : auto;
    border-radius : 100%;
}

.logo {
    display         : flex;
    font-family     : "Aguafina Script", sans-serif;
    font-size       : 3em;
    color           : #fff;
    text-decoration : none;
}

section {
    z-index         : 1;
    display         : flex;
    flex-direction  : column;
    align-items     : flex-end;
    justify-content : space-around;
    width           : 1280px;
    max-width       : 100%;
    padding         : 4vw 2vw;
}

h1 {
    font-size   : 2em;
    margin      : 0 0 .5em;
    font-weight : 300;
}

h3 {
    font-weight : 200;
}

.btn {
    font-size       : 1em;
    text-decoration : none;
    border-radius   : .5em;
    margin          : 1em 0 0;
    padding         : .5em 1em;
    width           : auto;
    display         : inline-block;
    color           : #fff;
    background      : #d5092f;
    text-align      : center;
}

.s01:before, .s01:after, .s03:before, .s03:after, .s05:before, .s05:after {
    position : absolute;
    left     : 0;
    top      : 0;
    right    : 0;
    bottom   : 0;
}

.s01:before {
    content    : "";
    display    : block;
    background : #f5f5f5;
    z-index    : 0;
    transform  : rotate(4deg);
    top        : 4vw;
}

.s01:after {
    content    : "";
    display    : block;
    background : #d50930;
}

header .text {
    max-width : 500px;
    transform : rotate(356deg);
    /* transform-origin: 0 0; */
}

.sec {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    transform      : rotate(356deg);
    width          : 100%;
}

.sec .text {
    width : 60%;
}

div.s01, div.s03 {
    padding : 4vh 13vw;
    z-index : 1;
}

div.s02, div.s04 {
    padding : 15vw 13vw;
    z-index : 1;
}

div.s01 {
    background : #d5092f;
    color      : #fff;
    margin     : -4vw;
    width      : 120%;
    z-index    : 2;
}

.s01 section {
    flex-direction  : row;
    align-items     : center;
    justify-content : flex-start;
    width           : 800px;
}

.s01 .btn {
    color      : #d5092f;
    background : #fff;
}

.s01 img {
    position : absolute;
    right    : 0;
    width    : calc(40% - 2em);
    height   : auto;
}

.s02 section {
    align-items : center;
    width       : 800px;
}

.s02 .content {
    display        : flex;
    flex-direction : row;
    align-items    : stretch;
    gap            : 2em;
}

.s02 .content div {
    padding       : 1.5em 1.5em 2em 1.5em;
    border-radius : 1em;
    background    : #f5f5f5;
    width         : 50%;
    display       : flex;
    align-items   : stretch;
}

.s02 article {
    color          : #fff;
    display        : flex;
    flex-direction : column;
    align-items    : baseline;
    border-radius  : 1em;
    padding        : 1.5em;
    background     : url('../../img/more2flirt/bg_couple.jpg') top center /cover;
}

.s02 .content div:last-child article {
    background : url('../../img/more2flirt/bg_girl.jpg') top center /cover;
}

.content .btn {
    position     : absolute;
    bottom       : -1em;
    left         : 50%;
    margin-right : -50%;
    transform    : translate(-50%, 0)

}

div.s03, div.s05 {
    background : #f5f5f5;
    width      : 120%;
    padding    : 4vh 13vw;
}

.s03:before, .s05:before {
    content    : "";
    display    : block;
    background : #d50930;
    z-index    : 0;
    transform  : rotate(4deg);
}

.s03:after, .s05:after {
    content    : "";
    display    : block;
    background : #f5f5f5;
}

.s03 section {
    flex-direction  : row;
    align-items     : center;
    justify-content : flex-end;
    width           : 800px;
}

.s03 img {
    position : absolute;
    left     : 0;
    width    : calc(40% - 2em);
    height   : auto;
}

.s04 section {
    align-items : center;
    width       : 800px;
}

.s04 .content {
    display         : flex;
    flex-direction  : row;
    justify-content : center;
    gap             : 2em;
    flex-wrap       : wrap;
}

.s04 img {
    border-radius : 2em;
    max-width     : 215px;
    height        : auto;
    display       : block;
}

footer {
    text-align : center;
    font-size  : 12px;
    color      : #999999;
    z-index    : 1;
}

footer label {
    color           : #999999;
    text-decoration : none;
    cursor          : pointer;
}

.overlay {
    position        : fixed;
    top             : 0;
    right           : 0;
    bottom          : 0;
    left            : 0;
    background      : rgba(255, 255, 255, .95);
    z-index         : 10;
    display         : none;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    padding         : 5vw;
}

.overlay > label {
    color           : #fff;
    text-decoration : none;
    border-radius   : 100%;
    width           : 36px;
    height          : 36px;
    display         : grid;
    background      : #d5092f;
    text-align      : center;
    position        : absolute;
    right           : 1vw;
    top             : 1vw;
    align-items     : center;
    cursor          : pointer;
}

.overlay section {
    width           : auto;
    align-items     : center;
    padding         : 2vw;
    overflow        : auto;
    justify-content : initial;
    display         : flex;
}

section.imprint {
    width     : 500px;
    max-width : 100%;
}

.overlay h1 {
    width : 100%;
}

.overlay article {
    padding : 2em 0 0;
    width   : 100%;
}

.overlay ol {padding : 0 0 0 2em;}

.overlay ul {

}

.overlay li {
    margin : .75em 0 0;
}

.overlay ul li {
    margin     : 1em;
    list-style : disc;
}

.overlay ul li li {
    list-style : circle;
}

.overlay h3 + p {
    padding : .75em 1em 0;
}

.websocket {
    font-size : 3em;
    padding   : 3em 0 0;
    height    : 39vh;
}

@media only screen and (max-width : 800px) {
    header {
        padding : 3em 3em 5em;
    }

    header .text {
        text-align : center;
        max-width  : 100%;
        padding    : 3em 0 0;
    }
}

@media only screen and (max-width : 500px) {
    header {
        background-position : -40vw 0;
    }

    .top {
        flex-wrap : wrap;
    }

    nav {
        justify-content : space-between;
        width           : 100%;
    }

    nav a {
        padding : 0;
    }

    section {
        text-align : center;
    }

    .s01 section, .s03 section {
        flex-direction : column;
        max-width      : 85%;
    }

    .s01 section {
        flex-direction : column-reverse;
    }

    .sec {}

    .text {
        width      : 100% !important;
        text-align : center;
    }

    .s01 img, .s03 img {
        position : relative;
        width    : 85%;
        padding  : 0 0 2em;
    }

    .s02 .content {
        flex-direction : column;
    }

    .s04 img {
        max-width : 115px;
    }

    .websocket {
        height : 42vh;
    }
}

#imprint:checked ~ .overlay.imprint {display : grid;}

.hide { display : none; position : absolute;}

.register_container  {
    transform: rotate(-356deg);
}

.register_container > input {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}

.register_container > input:focus {
    background-color: #ddd;
    outline: none;
}

.register_container > label {
    font-size: 0.8em;
}

.register_container > hr {
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
}

.register_container > button {
    background-color: #04AA6D;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

.register_container > button:hover {
    opacity:1;
}