/* 0 load --------------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
html {
    background-color: white;
}
a,a:visited {
    text-decoration: none; 
    color: inherit;         
}

/* 1 load --------------------------------------------------------------- */
header {
    height: 8em;
    width: 100%;
    
    background-color: #000000;
    
    display: flex;
    justify-content: center;
    align-items: center;
}
footer {
    height: 5em;
    width: 100%;

    background-color: #000000;

    display: flex;
}

/* 2 load --------------------------------------------------------------- */
#H-Row {
    width: 90%;
    height: 6em;

    display: flex;
    justify-content: center;
}
footer > div {
    height: 5em;
    
    display: flex;
    justify-content: center;
    align-items: center;
}
#F-left-container {
    width: 30%;
    gap: 2em;
}
#F-middle-container {
    width: 40%;
    text-align: center;
}

/* 3 load --------------------------------------------------------------- */
#H-left-container,#H-middle-container,#H-social-container {
    height: 6em;
}
#H-left-container {
    border-right:solid 1px white ;

    display: flex;
    justify-content: center;
}
#H-right-container {
    border-left:solid 1px white ;
    display: flex;
    justify-content: center;
}

/* 4 load --------------------------------------------------------------- */
#H-Row ul{
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}
#H-middle-container > ul {
    gap: 6em;
}
#H-right-container > ul {
    gap: 1em;
}
#H-lang-container {
    display: flex;
    align-items: flex-end;
}

/* 5 load --------------------------------------------------------------- */
#H-middle-container  li {
    display: inline;
}

/* 6 load --------------------------------------------------------------- */
#H-middle-container > ul > li > a {
    color: white;
}

/* 7 load --------------------------------------------------------------- */
.H-media-logo {
    width: 3.5em;
    margin: 0;
}

/* Responsive --------------------------------------------------------------- */

/* Footer */
@media (max-width: 1350px) and (min-width:1081px) {
    footer {
        justify-content: center;
    }
}

@media (max-width: 1080px) and (min-width:751px){
    footer {
        height: 6em;
        
        padding: 0.5em 0 0.5em 0;

        flex-direction: column;
        align-items: center;
    }
}
@media (max-width: 750px) and (min-width:521px){
    footer {
        height: 8em;
        
        padding: 0.5em 0 0.5em 0;

        flex-direction: column;
        align-items: center;
    }
    #F-middle-container {
        width: 70%;
    }
}
@media (max-width:520px) {
    #F-left-container {
        height: 8em;
        width: 80%;
        
        gap: 0;
        flex-wrap: wrap;
    }
    footer {
        height: 12em;
        
        padding: 0.5em 0 0.5em 0;

        flex-direction: column;
        align-items: center;
    }
    #F-middle-container {
        width: 70%;
    }
}
/* Header */

@media (min-width:1351px) {
    #H-Row > div {
        width: 33.333333%;
        height: 100%;
    }
}
@media (max-width: 1350px) and (min-width:901px){
    #H-left-container {
        width: 25%;
    }
    #H-right-container {
        width: 50%;
    }
    #H-middle-container > ul {
        gap: 3em;
    }
}
@media (max-width: 900px) {
    header {
        height: 14em;
    }
    #H-Row {
        height: 12em;
        flex-wrap: wrap;
    }
    #H-left-container,#H-middle-container {
        width: 50%;
    }
    #H-right-container {
        width: 100%;
        border-left: none;
        border-top: solid 1px white;
    }
    #H-middle-container > ul {
        gap: 2em;
    }
}