/***DESKTOPS (XX-LARGE SCREEN)
*****************************************************/
@media (min-width: 1600px) {  
}

/***DESKTOPS (X-LARGE SCREEN)
*****************************************************/
@media (min-width: 1600px) {  
}

/***DESKTOPS (LARGE SCREEN)
*****************************************************/
@media (min-width: 1440px) {  
}

/***DESKTOPS (MEDIUM SCREEN)
*****************************************************/
@media (min-width: 1281px) {  
}

/***DESKTOP (NOTEBOOKS and DESKTOPS)
*****************************************************/
@media (min-width: 1025px) and (max-width: 1280px) {
}

/***FROM NOTEBOOK TO DESKTOP
*****************************************************/
@media (min-width: 1025px) {
    .mobile {
        display: none !important;
    }
}

/***FROM TABLETS TO MOBILES (LANDSCAPE and PORTRAIT)
*****************************************************/
@media (max-width: 1024px) {
    /***VIEWPORT HEIGHT***/
    :root {
        --viewportHeight: calc(var(--vh, 1vh) * 100);
    }
    body {
        height: 100vh; /* Fallback */
        height: var(--viewportHeight);
    }
    .desktop {
        display: none !important;
    }
    .info_col .col_row:not(.active) {
        pointer-events: auto;
    }
}

/***TABLETS (LANDSCAPE)
*****************************************************/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    :root {
        --viewportHeight: calc(var(--vh, 1vh) * 100);
        --gridTemplate: repeat(3, 1fr);
    }
    section.info_grid .info_col {
        grid-column: 2/3;
    }
    section.info_grid .info_col:not(:first-child) {
        margin-top: calc(var(--rowGutter)*2);
    }
    .info_col .col_header {
        margin-bottom: calc(var(--rowGutter)*1);
    }
    .info_col .col_header {
        position: static;
    }
}

/***SMALL TABLETS, MOBILES (LANDSCAPE)
*****************************************************/
@media (min-width: 481px) and (max-width: 767px) {
    :root {
        --viewportHeight: calc(var(--vh, 1vh) * 100);
        --gridTemplate: repeat(3, 1fr);
    }
    section.info_grid .info_col {
        grid-column: 2/3;
    }
    section.info_grid .info_col:not(:first-child) {
        margin-top: calc(var(--rowGutter)*2);
    }
    .info_col .col_header {
        margin-bottom: calc(var(--rowGutter)*1);
    }
    .info_col .col_header {
        position: static;
    }
    .info_col .col_row:not(.display) {
        opacity: 1 !important;
    }
}

/***MOBILES (PORTRAIT)
*****************************************************/
@media (max-width: 480px) {
    :root {
        --viewportHeight: calc(var(--vh, 1vh) * 100);
        --gridTemplate: repeat(1, 1fr);
        --spaceX: calc(var(--fontSize) * 1.8);
    }
    section.info_grid .info_col {
        grid-column: auto;
    }
    section.info_grid .info_col:not(:first-child) {
        margin-top: calc(var(--rowGutter)*2);
    }
    .info_col .col_header {
        margin-bottom: calc(var(--rowGutter)*1);
    }
    .info_col .col_header {
        position: static;
    }
    .info_col .col_row:not(.display) {
        opacity: 1 !important;
    }
    .mainDiv .back_egg img {
        width: 70vw;
        height: auto;
    }
}