@font-face {
    font-family: 'Espa';
    src: url('Espa.woff2') format('woff2'),
        url('Espa.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html,body{
    background-color: #ffed00;
    background-image: url("../img/bg.png");
    background-size: 100%;
    margin: 0px;
    padding: 0px;
}

ul,li{
    padding: 0px;
    margin: 0px;
}

.logo{
    font-family: 'Espa';
    font-size: 30px;
    margin: auto auto;
    background: #ffed00;
    padding: 10px;
    text-decoration: underline;
}
.header{
    top: 0px;
    left: 0px;
    width: 100%;
    padding: 20px;
    position: fixed;
    z-index: 9999;
    box-sizing: border-box;
    text-align: center;
}

.header .logo{
    float: left;
    cursor: pointer;
}

.header .menu{
    float: left;
}

.header .menu ul li{
    float: left;
    list-style: none;
    font-family: 'Espa';
    font-size: 30px;
    text-decoration: underline;
    margin-right: 30px;
    cursor: pointer;
}

.container{
    width: 100%;
    height: 100%;
}

.home-container{
    width: 100%;
    height: 100%;
    background: url(../img/home.png) no-repeat center center fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    position: absolute;
}

.publisher-container{
    width: 100%;
    height: 100%;
    background: url(../img/publishers.png) no-repeat center center fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    margin: auto auto;
    position: absolute;
    display: none;
}

.brand-container{
    width: 100%;
    height: 100%;
    background: url(../img/brands.png) no-repeat center center fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    position: absolute;
    display: none;
}

.contact-container{
    width: 100%;
    height: 100%;
    background: url(../img/contact.png) no-repeat center center fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    position: absolute;
    display: none;
}


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

    .home-container{
        background: url(../img/mhome.png) no-repeat center center fixed;
        -webkit-background-size: 200% auto;
        -moz-background-size: 200% auto;
        -o-background-size: 200% auto;
        background-size: 200% auto;
    }

    .publisher-container{
        background: url(../img/mpublishers.png) no-repeat center center fixed;
        -webkit-background-size: 200% auto;
        -moz-background-size: 200% auto;
        -o-background-size: 200% auto;
        background-size: 200% auto;
    }

    .brand-container{
        background: url(../img/mbrands.png) no-repeat center center fixed;
        -webkit-background-size: 200% auto;
        -moz-background-size: 200% auto;
        -o-background-size: 200% auto;
        background-size: 200% auto;
    }

    .contact-container{
        background: url(../img/mcontact.png) no-repeat center center fixed;
        -webkit-background-size: 200% auto;
        -moz-background-size: 200% auto;
        -o-background-size: 200% auto;
        background-size: 200% auto;
    }

    .menu ul li{
        font-size: 23px !important;
        margin-right: 15px !important;
    }

}