* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background-color: #12110C;

    > .box {
        position: relative;
        margin: 24% 7% 0 7%;
        padding: 15% 7%;
        border: 3px solid #FFFFFF;
        border-radius: 15px;

        > .logo {
            box-sizing: border-box;
            position: absolute;
            top: -7%;
            left: 50%;
            transform: translate(-50%, 0);
            padding: 0 5%;
            width: 60%;
            background-color: #12110C;

            img {
                width: 100%;
                height: auto;
            }
        }

        > ul {
            > li {
                box-sizing: border-box;
                display: inline-block;
                width: 100%;
                padding: 7% 5%;
                text-align: center;

                img {
                    width: auto;
                    height: 70px;
                }
            }
        }

        > .footer {
            position: absolute;
            bottom: -3%;
            left: 50%;
            transform: translate(-50%, 0);
            padding: 0 5%;
            width: 60%;
            background-color: #12110C;

            img {
                width: 100%;
                height: auto;
            }
        }
    }

    > .menu {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        padding-top: 8%;

        > li {
            display: inline-block;
            padding: 0 8px;

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

/* --------------------------------- std_extra_large_width [xl] --------------------------------- */
@media screen and (min-width: 786px) {

    body {
        > .box {
            margin-top: 14%;

            > .footer {
                width: 45%;
            }

            > ul {
                > li {
                    img {
                        height: 150px;
                    }
                }
            }
        }
    }

}

/* --------------------------------- std_extra_large_width [xl] --------------------------------- */
@media screen and (min-width: 1366px) {

    body {
        > .box {
            margin-top: 10%;
            padding: 7%;

            > .logo {
                top: -13%;
                width: 40%;
            }

            > ul {
                > li {
                    width: 33%;

                    img {
                        width: 100%;
                        height: auto;
                    }
                }
            }

            > .footer {
                bottom: -6%;
                width: 30%;
            }
        }
    }

}