html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Lobster', cursive;;
    font-size: 1.8vh;
    color: rgba(7, 23, 82, 0.859);
    background-color: #fff200e8;
}

h1 {font-size: 4vh;}
h2 {font-size: 3vh;}
a:any-link {color: rgb(3, 107, 172);}
a:hover {text-decoration: none;}



/*LANDING / BANNER*/
.logos {
    width: 100%;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr);
    grid-template-rows: 3fr 1fr 1rem;

    grid-template-areas: 
    ". . . ."
    "logo1 logo2 logo3 logo4"
    ". . . .";


    background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 40%);
    background-repeat: repeat, no-repeat;
    background-size: auto, 100% auto;
}

.logos a {
    align-self: center;
    justify-self: center;
}

a img {
    display: block;
    max-width: 72%;
    height: auto;
    margin: auto;
}

.logo1 {grid-area: logo1;}
.logo2 {grid-area: logo2;}
.logo3 {grid-area: logo3;}
.logo4 {grid-area: logo4;}




/*FADE IN*/
#banner-load {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.fade-in{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    
    -webkit-animation: fade-in 2s ease;
    -moz-animation: fade-in ease-in-out 2s both;
    -ms-animation: fade-in ease-in-out 2s both;
    -o-animation: fade-in ease-in-out 2s both;
    animation: fade-in 2s ease;
    visibility: visible;
    -webkit-backface-visibility: hidden;
}

@-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}}
@-moz-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@-o-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@keyframes fade-in{0%{opacity:0} 100%{opacity:1}}


/*MAIN*/

.main {
    margin: 1rem 0 1rem 0;
    padding-bottom: 1rem;
    display: grid;
    grid-gap: 2.5rem;
    grid-template-columns: 1rem minmax(250px, 1fr) minmax(250px, 1fr) minmax(250px, 1fr) 1rem;

    grid-template-areas: 
    ". txt-es txt-en txt-fr .";
}

.txt-es {grid-area: txt-es;}
.txt-en {grid-area: txt-en;}
.txt-fr {grid-area: txt-fr;}


/*MOBILE*/
@media only screen and (max-width: 1200px) {

    html, body {
        font-size: 1.1rem;
    }


    .logos {
        grid-template-columns: 1rem minmax(150px, 1fr) 1rem;
        grid-template-rows: 1rem 1fr 1fr 1fr 1fr 1rem;
    
        grid-template-areas: 
        ". . ."
        ". logo1 ."
        ". logo2 ."
        ". logo3 ."
        ". logo4 ."
        ". . . ";

        background: rgba(0, 0, 0, 0.25);
    }

    a img {
        max-width: 16vh;
    }
    
    .main {
        grid-template-columns: 0rem minmax(250px, 1fr) 0rem;
    
        grid-template-areas: 
        ". txt-es ."
        ". txt-en ."
        ". txt-fr .";
    }
    
}