/* Mobile menu */

.homePageGrid {
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    grid-template-columns: repeat(10, 10%);
    grid-row-gap: 1px;
    grid-column-gap: 1px;
    background-color: rgb(255, 255, 255);
    align-items: center; /* vertical */
    /*justify-items: via self-justify*/ /* horizontal */
    
}

.headerLineGrid {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 100%;
    align-items: center; /* vertical */
    /*justify-items: via self-justify*/ /* horizontal */
}

.headerLinePos {
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

.main1 {
    grid-row: 2 / 3;
    grid-column: 1 / 11;
}

.main2 {
    grid-row: 3 / 4;
    grid-column: 1 / 11;
}

.main3 {
    grid-row: 4 / 5;
    grid-column: 1 / 11;
    width: 100%;
}

.imageMain3 {
        display: contain;
        height: 100%;
        width: 100%;
}

.main4 {
    grid-row: 5 / 6;
    grid-column: 1 / 11;;
}

.logo {
    margin: 0px;
    transform: scale(0.5);
}

.logo1 {
    grid-row: 6 / 7;
    grid-column: 1 / 6;
    justify-self: center;
}

.logo2 {
    grid-row: 6 / 7;
    grid-column: 6 / 11;
    justify-self: center;
}

.logo3 {
    grid-row: 7 / 8;
    grid-column: 1 / 6;
    justify-self: center;
}

.logo4 {
    grid-row: 7 / 8;
    grid-column: 6 / 11;
    justify-self: center;
}

.logo5 {
    grid-row: 8 / 9;
    grid-column: 4 / 8;
    justify-self: center;
}

/* Desktop menu */
@media all and (min-width: 40em) {

   .homePageGrid {
        display: grid;
        grid-template-rows: auto auto auto 25%;
        grid-template-columns: repeat(10, 10%);
        grid-row-gap: 0px;
        grid-column-gap: 0px;
        background-color: rgb(255, 255, 255);
        align-items: center; /* vertical */
        /*justify-items: via self-justify*/ /* horizontal */
    }
    
    .main1 {
        grid-row: 2 / 3;
        grid-column: 1 / 6;
    }

    .main2 {
        grid-row: 3 / 4;
        grid-column: 1 / 6;
    }

    .main3 {
        grid-row: 2 / 3;
        grid-column: 6 / 11;
    }
    
    .main4 {
        grid-row: 3 / 4;
        grid-column: 6 / 11;
    }

    .logo {
        margin: 0px;
        transform: scale(0.4);
    }

    .logo1 {
        grid-row: 4 / 5;
        grid-column: 1 / 3;
        justify-self: center;
        display: block;
    }

    .logo2 {
        grid-row: 4 / 5;
        grid-column: 3 / 5;
        justify-self: center;
        display: block;
    }

    .logo3 {
        grid-row: 4 / 5;
        grid-column: 5 / 7;
        justify-self: center;
        display: block;
    }

    .logo4 {
        grid-row: 4 / 5;
        grid-column: 7 / 9;
        justify-self: center;
        display: block;
    }

    .logo5 {
        grid-row: 4 / 5;
        grid-column: 9 / 11;
        justify-self: center;
        display: block;
    }
}

@media all and (min-width: 60em) {
    .logo {
        margin: 0px;
        transform: scale(0.54);
    }
}

@media all and (min-width: 80em) {
    .logo {
        margin: 0px;
        transform: scale(0.72);
    }
}

@media all and (min-width: 100em) {
    .logo {
        margin: 0px;
        transform: scale(0.9);
    }
}