@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,900;1,900&display=swap');

body {
    font-family     : 'Lato', sans-serif;
    font-size       : 3.5vw;
    font-weight     : normal;
    color           : #fff;
    background      : #000 url('../../img/love4more/bg.jpg') no-repeat top center;
    background-size : cover;
    margin          : 0;
}

* {
    box-sizing : border-box;
    position   : relative;
}

a {
    text-decoration : none;
    color           : #fff;
}

button {
    color: #fff;
}

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

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

.s0 {
    height : 18em;
}

.bg_s0 {
    width           : 26em;
    height          : 26em;
    background      : url('../../img/love4more/s0.jpg') center no-repeat;
    background-size : cover;
    border-radius   : 50%;
    position        : absolute;
    top             : -10em;
    left            : -10.4em;
}

nav {
    position  : absolute; top : 0; right : 0;
    font-size : .4em;
    padding   : 0 2em;
}

nav label{
    display: inline-block;
    padding: .5em 1em;
    cursor: pointer;
}


.btn {
    font-size      : 1.2em;
    display        : inline-block;
    border-radius  : 1em .3em 1em 1em;
    padding        : .3em 1.3em;
    text-transform : uppercase;
    margin-right   : .5em;
    cursor         : pointer;
}

.b1 {background : #d400a4;}

.b2 {border : .1em solid #fff;}

h1 {
    font-size : 3.7em;
    margin    : 0;
    width     : 100%;
}

h1 i {
    color : #d400a4;
}

.s0 .box {
    position : absolute; top : 20em; right : 3em;
    width    : 22em;
}

.box {
    font-size : .4em;
}

.s1 .box,
.s2 .box,
.s3 .box {
    display     : flex;
    align-items : center;
    margin      : 3em;
}

.s1 .box .pics {
    width           : 80em;
    display         : flex;
    padding         : 0 0 0 3em;
    flex-wrap       : wrap;
    justify-content : flex-end;
}

.s1 .box .pics img,
.s1 .box .pics span {
    display       : block;
    width         : 10em; height : 10em;
    border-radius : 50%;
    margin        : .5em 0 .5em 1em;
}

.s1 .box .pics img {
    border : .2em double #fff;
}

.s2 .box .phone img {
    display : block;
    width   : 30em;
    margin  : .5em 3em .5em 0;
}

.s3 .box .map img {
    display : block;
    width   : 30em;
    margin  : .5em 0 .5em 3em;
}

footer {
    padding : 3em 0 0;
}

footer nav {
    border     : none;
    border-top : .1em solid #fff;
    position   : relative; top : auto; right : auto;
    font-size  : .4em;
    padding    : 0 2em;
}

.lang {
    display             : inline-block;
    width               : 1.5em; height : 1.5em;
    padding             : 0;
    background-position : center;
    background-size     : cover;
    border              : .05em solid #fff;
    border-radius       : 50%;
    margin              : 1em 0 0 1em;
    cursor              : pointer;
}

.l_de {background-image : url('../../img/love4more/de.svg');}

.l_en {background-image : url('../../img/love4more/en.svg');}

.l_nl {background-image : url('../../img/love4more/nl.svg');}

.overlay {
    background  : rgba(0, 0, 0, 0.5);
    position    : fixed; top : 0; left : 0; right : 0; bottom : 0;
    display     : none;
    align-items : center;
    padding     : 5em;
    overflow    : auto;
}

.overlay .wrapper {
    background : #000;
    padding    : 1em;
    font-size  : .4em;
    box-shadow : 0 0 10em 0 #000;
}

.close {
    position   : fixed; top : 0; right : 0;
    transform  : rotate(45deg);
    display    : block;
    padding    : .1em;
    width      : 1em; height : 1em;
    text-align : center;
    font-size  : 3em;
    cursor     : pointer;
}

@media (max-width : 1024px) and (max-aspect-ratio : 1/1) {
    body {
        font-size : 10vw;
    }

    h1 {
        font-size : 2.6em;
        margin    : 0;
    }

    .s1 .box,
    .s2 .box,
    .s3 .box {
        display : grid;
        margin  : 1em;
    }

    .s1 .box .pics {
        grid-row-start : 1;
        grid-row-end   : 2;
        width          : 100%;
        display        : block;
        padding        : 1em 0;
        text-align     : center;
    }

    .s1 .box .pics img,
    .s1 .box .pics span {
        display       : inline-block;
        width         : 9.5em; height : 9.5em;
        border-radius : 50%;
        margin        : .5em .5em;
    }

    .s2 .box .phone img {
        display : block;
        width   : 100%;
        margin  : 1em 0;
    }

    .s3 .box .map {
        grid-row-start : 1;
        grid-row-end   : 2;
    }

    .s3 .box .map img {
        display : block;
        width   : 100%;
        margin  : 1em 0;
    }

    .wr {
        padding-bottom : 3em;
    }

    .bg_s0 {
        width  : 9em;
        height : 9em;
        top    : -3.6em;
        left   : -3em;
    }

    .s0 .box {
        position : absolute; top : 13em; right : 0; left : 0;
        width    : 100%;
        padding  : 1em;
    }

    nav {
        position      : absolute; top : 1em; right : 1em;
        font-size     : .4em;
        padding       : 0;
        width         : auto;
        text-align    : right;
        border-bottom : none;
    }

    nav label {
        display : block;
        padding : 0 0 1em;
    }

    footer nav {
        text-align : center;
        font-size  : .27em;
    }

    footer nav label {
        display : inline-block;
        padding : .5em 1em;
    }

    .overlay {
        padding : 0;
    }

    .overlay .wrapper {
    }

    .close {
        font-size : 1em;
        padding   : 0;
    }

    .content {
        margin-block-start: 1em;
        margin-block-end: 1em;
    }
}

.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.6em;
}

.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;
}