html,body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

body {
    background-color: #000;
}

/** Horizontal */
/*720p*/
@media (width:1280px) and (height:720px) {
    #img {
        background-image: url('');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0
    }

    #topbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 9.5%;
        background-color: rgba(15, 15, 15, .9);
        z-index: 1
    }

    #topbar>img {
        position: absolute;
        top: 7.5%;
        left: 1.5%;
        height: 55px;
        z-index: 1
    }

    #titlebar {
        position: absolute;
        top: 68.5%;
        left: 0;
        width: 27%;
        height: 10%;
        background-color: rgba(15, 15, 15, .9);
        z-index: 2
    }

    #bar {
        position: absolute;
        top: 79%;
        left: 0;
        width: 100%;
        height: 21%;
        background-color: rgba(15, 15, 15, .9);
        z-index: 1
    }

    #content {
        position: absolute;
        top: 5%;
        left: 0;
        width: 90%;
        height: 100%;
        z-index: 2;
        overflow: visible
    }

    #title {
        position: absolute;
        top: 20%;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 15px;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2.5em;
        font-weight: 700
    }

    #description {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        padding-left: 15px;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2.5em
    }
}

/*1080p*/
@media (width:1920px) and (height:1080px) {
    #img {
        background-image: url('');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0
    }

    #topbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 9.5%;
        background-color: rgba(15, 15, 15, 0);
        z-index: 1
    }

    #topbar>img {
        position: absolute;
        top: 7.5%;
        left: 1.5%;
        height: 85px;
        z-index: 1
    }

    #titlebar {
        position: absolute;
        top: 68.5%;
        left: 0;
        width: 25%;
        height: 10%;
        background-color: rgba(15, 15, 15, .9);
        z-index: 2
    }

    #bar {
        position: absolute;
        top: 79%;
        left: 0;
        width: 100%;
        height: 21%;
        background-color: rgba(15, 15, 15, .9);
        z-index: 1
    }

    #content {
        position: absolute;
        top: 5%;
        left: 0;
        width: 90%;
        height: 100%;
        z-index: 2;
        overflow: visible
    }

    #title {
        position: absolute;
        top: 20%;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 35px;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 3.5em;
        font-weight: 700
    }

    #description {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        padding-left: 35px;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 3.5em
    }
}

/** Vertical */
/*1080p*/
@media (width:1080px) and (height:1920px) {
    #img {
        background-image: url('');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0
    }

    #topbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 8%;
        background-color: rgba(15, 15, 15, .9);
        z-index: 1
    }

    #topbar>img {
        position: absolute;
        top: 7.5%;
        left: 1.5%;
        height: 125px;
        z-index: 1
    }

    #titlebar {
        position: absolute;
        top: 81%;
        left: 0;
        width: 45%;
        height: 6%;
        background-color: rgba(15, 15, 15, .9);
        z-index: 2
    }

    #bar {
        position: absolute;
        top: 88%;
        left: 0;
        width: 100%;
        height: 12%;
        background-color: rgba(15, 15, 15, .9);
        z-index: 1
    }

    #content {
        position: absolute;
        top: 5%;
        left: 0;
        width: 90%;
        height: 100%;
        z-index: 2;
        overflow: visible
    }

    #title {
        position: absolute;
        top: 20%;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 35px;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 3.5em;
        font-weight: 700
    }

    #description {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        padding-left: 35px;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 3.2em
    }
}

/*720p*/
@media (width:720px) and (height:1280px) {
    #img {
        background-image: url('');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0
    }

    #topbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 8%;
        background-color: rgba(15, 15, 15, .9);
        z-index: 1
    }

    #topbar>img {
        position: absolute;
        top: 7.5%;
        left: 1.5%;
        height: 80px;
        z-index: 1
    }

    #titlebar {
        position: absolute;
        top: 83%;
        left: 0;
        width: 37%;
        height: 5%;
        background-color: rgba(15, 15, 15, .9);
        z-index: 2
    }

    #bar {
        position: absolute;
        top: 89%;
        left: 0;
        width: 100%;
        height: 11%;
        background-color: rgba(15, 15, 15, .9);
        z-index: 1
    }

    #content {
        position: absolute;
        top: 5%;
        left: 0;
        width: 90%;
        height: 100%;
        z-index: 2;
        overflow: visible
    }

    #title {
        position: absolute;
        top: 20%;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 20px;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2em;
        font-weight: 700
    }

    #description {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        padding-left: 20px;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2em
    }
}