html {
    padding:0;
    margin:0;
    box-sizing: border-box;
    height: -webkit-fill-available;
    min-height:100%;
    background-color:black;
    background-image:url('../img/lion.jpg');
    background-repeat: no-repeat;
    background-size: auto 100%;
    color:white;
    overflow-x:hidden;
    overflow-y:hidden;
    }

body {
    padding:0;
    margin:0;
    width:100%;
    }

.body {
    position: relative;
    width:100vw;
    min-height: 100vh;
    /* mobile viewport bug fix */
    min-height: -webkit-fill-available;
    left:0;
    top:0;
    }

.logo-container {
    position: absolute;
    width:300px;
    height:200px;
    right:10px;
    top:20px;
    }

.logo {
    width:100%;

    }

.bottom-box {
    position: absolute;
    width:100%;
    max-width:600px;
    left:50%;
    transform:translateX(-50%);
    max-height:300px;
    bottom:30px;
    text-align: center;
    }

.box-title {
    display: block;
    }

.box-title__title {
    width:90%;
    max-width:250px;
    margin-left:30px;
    position: relative;
    z-index: 1;
    }

.list-socials {
    display: block;
    margin:-30px 0 0 30px;
    padding:0;
    z-index: 0;
    }

.list-socials__item {
    display: inline-block;
    width:120px;
    margin-left:-30px;
    }

.list-socials__item img {
    max-width:100%;
    }

@media screen and (min-width:768px) {

    .logo-container {
        position: absolute;
        width:300px;
        height:250px;
        left:50%;
        transform:translateX(-50%);
        right:auto;
        top:100px;
        }

    .bottom-box {
        max-width:800px;
        left:50%;
        bottom:80px;
        }

    .box-title__title {
        max-width:350px;
        }

    .list-socials__item {
        display: inline-block;
        width:160px;
        margin-left:-40px;
        }

    }