@font-face {
    font-family: 'Roboto-Medium';
    font-style: normal;
    font-weight: 300;
    src: url("./Roboto-Medium.ttf") format('truetype')
}
@font-face {
    font-family: 'Roboto-Light';
    font-style: normal;
    font-weight: 300;
    src: url("./Roboto-Light.ttf") format('truetype')
}

html, body {
    padding: 0;
    margin: 0;
    font-family: Roboto-Medium;
}

a{
    text-decoration: none;
}

.z-wrapper {
    background-color: #d7d7d7;
    /*height: calc(var(--vh, 1vh) * 100);*/
}
.z-container {
    width: 1010px;
    margin: 0 auto;
}

.z-top {
    height: calc(100vh - 70px);
    position: relative;
}
.z-top-logos {
    height: calc(100vh - 130px);
    /*height: calc(var(--vh, 1vh) * 100 - 130px);*/
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.z-logo-1 {
    position: relative;
}
.z-logo-2 {
    position: relative;
    display: flex;
    align-items: flex-start;
    height: 415px;
    padding-top: 125px;
}

.z-logo-1-text {
    font-size: 30px;
    color: #ffffff;
    position: absolute;
    top: 127px;
    left: 44px;
    text-transform: uppercase;
}
.z-logo-2-text {
    font-size: 20px;
    color: #000000;
    text-transform: uppercase;
    position: absolute;
    left: 84px;
    top: 245px;
}
.z-top-countries {
    display: flex;
    justify-content: space-between;
    height: 60px;
}
.z-country-item {
    color: #000000;
    font-size: 15px;
}

.z-bottom {
    background-color: #ffffff;
    height: 70px;
}
.z-bottom-flex {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.z-text-bottom {
    color: #231f20;
    font-size: 15px;
    font-family: Roboto-Light;
}
.z-fb-icon {
    margin: 0 30px;
}
.fb{
    margin-right: 10px;
}

@media (min-width: 1000px) and (max-width: 1200px) {
    .z-container {
        width: 880px;
    }
}

@media (min-width: 700px) and (max-width: 1000px) {
    .z-container {
        width: 680px;
    }
}

@media (max-width: 500px){
    .fb{
        margin-right: 0;
    }

    .z-container {
        width: 100%;
    }

    .z-top{
        height: calc(var(--vh, 1vh) * 100 - 70px);
    }

    .z-top-logos{
        display: flex;
        flex-flow: column;
        align-items: center;
        height: calc(var(--vh, 1vh) * 100 - 145px);
        padding-top: 15px;
    }
    .z-logo-1{
        display: flex;
        /*margin: auto;*/
        order: 1;
    }
    .z-logo-1-text {
        font-size: 17px;
        color: #ffffff;
        position: absolute;
        top: 75px;
        left: 30px;
        text-transform: uppercase;
    }
    .z-logo-2{
        display: flex;
        /*margin: auto;*/
        order: 0;
        padding-top: 0;
        height: 210px;
    }
    .z-logo-2-text {
        top: 70px;
        left: 60px;
    }
    .z-top-countries {
        height: 45px;
    }
    .z-top-countries, .z-bottom{
        padding: 0 10px;
    }
    .z-country-item{
        margin-top: 15px;
    }
    .z-logo-1 img{
        width: auto;
        height: 240px;
        /*max-height: 264px;*/
    }
    .z-logo-2 img{
        max-width: 220px;
        height: auto;
        /*max-height: 289px;*/
    }
}
@media (max-width: 450px) {
    .z-text-bottom{
        font-size: 10px;
    }
    .z-fb-icon{
        margin: auto;
    }
    .z-fb-icon img{
        width: 20px;
    }
}
@media (max-width: 370px) {
    .z-logo-2-text{
        top: 65px;
        font-size: 17px;
        left: 55px;
    }
    .z-logo-1-text {
        font-size: 14px;
        top: 65px;
        left: 30px;
    }
    ..z-logo-1 img .z-logo-2 img{
        width: 200px;
        height: auto;
    }
}

@media (max-width: 350px) {
    .z-text-bottom{
        font-size: 9px;
    }
}

@media (max-width: 825px) and (orientation:landscape) {
    .z-container {
        width: 540px;
    }
    .z-logo-1{
        display: block;
    }
    .z-logo-1 img{
        height: 210px;
    }
    .z-logo-1-text {
        font-size: 15px;
        color: #ffffff;
        position: absolute;
        top: 60px;
        left: 25px;
        text-transform: uppercase;
    }
    .z-logo-2{
        position: relative;
        display: flex;
        align-items: flex-start;
        height: 320px;
        padding-top: 125px;
    }
    .z-logo-2 img{
        height: 100px;
    }
    .z-logo-2-text {
        font-size: 15px;
        color: #000000;
        text-transform: uppercase;
        position: absolute;
        left: 60px;
        top: 200px;
    }
}