body {
        background: url('../app/assets/intro_bg.jpg');
        margin: 0;
        padding: 0;
        font-family: 'Bitter', serif;
    }

    .languages {
        position: absolute;
        top: 10px;
        bottom: 50px;
        left: 10px;
        right: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .languages a {
        display: block;
        text-align: center;
        text-decoration: none;
        color: #fff;
    }

    .languages a + div {
        margin: 5px auto;
    }

    img {
        max-width: 100%;
    }

    .logo {
        width: 75vw;
    }

    .top, .bottom {
        display: none;
    }

    .social {
        text-align: center;
        position: fixed;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }

    .social a {
        display: inline-block;
        margin: 0;
        color: #FFEBA6;
        font-size: 1.6em;
    }

    .social a + a {
        margin-left: 200px;
    }

    footer {
        position: fixed;
        bottom: 10px;
        left: 50%;
        color: #FFEBA6;
        transform: translateX(-50%);
        font-size: 1em;
        text-align: center;
        z-index: 20;
    }

    footer a {
        font-family: 'Staatliches', sans-serif;
        color: #FFEBA6;
        text-transform: uppercase;
        text-decoration: none;
    }

    #cookies-warning {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 20px;
        background: rgba(0,0,0, 0.8);
        font-size: 1em;
        color: #fff;
        z-index: 99;
    }

    #cookies-warning a {
        color: #fff !important;
    }

    #cookies-warning button {
        background: transparent;
        border: 1px solid #fff;
        color: #fff;
        cursor: pointer;
        font-size: 0.8em;
        margin-top: 10px;
    }

    @media screen and (min-width: 640px) {
        .wrapper {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .top {
            display: flex;
            background: url('../app/assets/bg-top.png') no-repeat top center;
            background-size: contain;
            flex: 1;
            justify-content: space-around;
            padding: 0 10px;
            padding-top: 30px;
        }

        .top img, .bottom img {
            max-width: 100%;
        }

        .languages {
            position: static;
            background: #961A1B;
            max-height: 10em;
            flex-direction: row;
            align-items: center;
            flex: 2;
            padding: 0 10px;
        }

        .bottom {
            display: flex;
            background: url('../app/assets/bg-bottom.png') no-repeat bottom center;
            background-size: contain;
            flex: 1;
            padding: 30px 45px;
            justify-content: space-around;
        }

        .languages a {
            display: block;
            text-align: center;
            align-self: center flex-start;
            flex: 1;
        }

        .languages div + a {
            align-self: center flex-end;
        }

        @-webkit-keyframes bounce { 
            0%, 20%, 50%, 80%, 100% {-webkit-transform: rotate(0deg);} 
            40% {-webkit-transform: rotate(-30deg);} 
            60% {-webkit-transform: rotate(-15deg);} 
         } 
         
         @keyframes bounce { 
            0%, 20%, 50%, 80%, 100% {transform: rotate(0deg);} 
            40% {transform: rotate(-30deg);} 
            60% {transform: rotate(-15deg);} 
         }

         .logo {
            width: 24em;
            /*position: absolute;
            left: 50%;
            margin-left: -12em;
            margin-top: -6.3em;*/
            position: relative;
         }

         .doll {
            max-height: 35vh;
         }
     
         .logo:hover { 
            -webkit-animation-name: bounce; 
            animation-name: bounce; 
            -webkit-animation-duration: 1s;
            animation-duration: 1s; 
            -webkit-animation-fill-mode: both; 
            animation-fill-mode: both;
         }

        .languages::before {
            content: ' ';
            position: absolute;
            top: -5px;
            left: 0;
            right: 0;
            background: url('../app/assets/dot.png') repeat-x;
        }

        .languages::after {
            content: ' ';
            position: absolute;
            top: -5px;
            left: 0;
            right: 0;
            background: url('../app/assets/dot.png') repeat-y;
        }

        footer {
            position: fixed;
            bottom: 10px;
            left: 50%;
            color: #FFEBA6;
            margin-left: -162px;
            font-size: 1.5em;
            transform: none;
        }

        footer a {
            font-family: 'Staatliches', sans-serif;
            color: #FFEBA6;
            text-transform: uppercase;
            text-decoration: none;
        }

        .social {
            text-align: center;
            position: fixed;
            bottom: 2.5em;
            left: 50%;
            right: auto;
            margin-left: -62px;
        }

        .social a {
            display: inline-block;
            margin: 10px;
            color: #FFEBA6;
            font-size: 1.5em;
        }

        .social a + a {
            margin-left: 50px;
        }

        #cookies-warning button {
            float: right;
            font-size: 1em;
        }
    }