/***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) {
}

/***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;
    }
}

/***TABLETS (LANDSCAPE)
*****************************************************/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
}

/***TABLETS (PORTRAIT)
*****************************************************/
@media (min-width: 768px) and (max-width: 1024px) {
}

/***SMALL TABLETS, MOBILES (LANDSCAPE)
*****************************************************/
@media (min-width: 481px) and (max-width: 767px) {
    :root {
        /***TEXT***/
        --fontSizeSmall: 0.5rem;
        --fontSizeMedium: 0.5rem;
        --fontSizeLarge: 2rem;
        /***SPACES***/
        --spaceY: calc(var(--fontSizeMedium) * 1.2);
        --spaceX: calc(var(--fontSizeMedium) * 1.2);
    }
}

/***NOT MOBILES (PORTRAIT)
*****************************************************/
@media (min-width: 481px) {
    .mobile {
        display: none;
    }
}

/***MOBILES (PORTRAIT)
*****************************************************/
@media (max-width: 480px) {
    :root {
        /***TEXT***/
        --fontSizeSmall: 0.6rem;
        --fontSizeMedium: 0.6rem;
        --fontSizeLarge: 2.2rem;
        /***SPACES***/
        --spaceY: calc(var(--fontSizeMedium) * 1.2);
        --spaceX: calc(var(--fontSizeMedium) * 1.2);
    }
    header {
        width: 100%;
        /*display: flex;*/
    }
    header .site_name {
        grid-column: 1/3;
    }
    header nav.menu {
        grid-column: 3/6;
        text-align: left;
    }
    nav.menu ul {
        justify-content: start;
    }
    header .site_description {
        grid-column: 6/11;
        text-align: right;
    }
    header .site_description.hidden {
        display: inline-block;
    }
    header .caption {
        display: none;
    }
    main.content section.project .image {
        grid-column: span 10;
        width: 100%;
        height: 50vh;
    }
    main.content section.project .image img.horizontal {
        max-height: 100%;
    }
    main.content section.project .image:nth-child(1) img.top.left,
    main.content section.project .image:nth-child(1) img.bottom.left {
        align-self: start;
        object-position: top left;
    }
    main.content section.project .image:nth-child(1) img.top.right,
    main.content section.project .image:nth-child(1) img.bottom.right {
        align-self: start;
        object-position: top right;
    }
    main.content section.project .image:nth-child(2) img.top.left,
    main.content section.project .image:nth-child(2) img.bottom.left {
        align-self: end;
        object-position: bottom left;
    }
    main.content section.project .image:nth-child(2) img.top.right,
    main.content section.project .image:nth-child(2) img.bottom.right {
        align-self: end;
        object-position: bottom right;
    }
    .captions.mobile {
        width: 100%;
        position: absolute;
        bottom: var(--spaceY);
        display: inline-block;
        mix-blend-mode: difference;
    }
    .captions.mobile p {
        color: white;
    }
    section.info .team_col {
        height: auto;
        grid-column: 3 / 11;
        justify-content: start;
    }
    section.info .team_col.hidden {
        display: flex;
    }
    section.info .team_col .member img {
        width: calc(50vw - var(--spaceX) * 2);
        top: calc(30% - var(--spaceY) - var(--rowGutter));
        left: 50%;
    }
    section.info .info_col {
        grid-column: 1 / 11;
        padding-bottom: calc(var(--spaceY) + var(--rowGutter) * 5);
        /*margin-top: calc(75vh - var(--spaceY) - var(--rowGutter)*2);*/
    }
    section.info .info_col:after {
        content: "";
        position: absolute;
        width: 100vw;
        height: calc(50% + var(--rowGutter)*1);
        top: 0;
        left: calc(var(--spaceX) * -1);
        background: white;
        box-shadow: 0px 10px 25px 12.5px white;
        
    }
    section.info .info_col .contact.mobile {
        width: 100%;
        display: grid;
        grid-template-columns: var(--gridTemplate);
        gap: 0 var(--colGutter);
        margin-top: calc(22.5vh - var(--spaceY) - var(--rowGutter)*2);
        position: absolute;
        z-index: 100;
    }
    section.info .info_col .contact.mobile .contact_item {
        grid-column: 3 / 11;
    }
    section.info .info_col .contact.mobile .contact_item:first-child {
        margin-bottom: var(--rowGutter);
    }
    section.info .info_col .about {
        margin-top: calc(75vh - var(--spaceY) - var(--rowGutter)*2);
    }
    section.info .info_col .footer.mobile {
        width: 100%;
        position: absolute;
        bottom: 0;
        padding-block: 0 var(--spaceY);
        z-index: 1;
    }
    section.info .info_col .footer.mobile:after {
        content: "";
        position: absolute;
        width: 100vw;
        height: 100%;
        background: white;
        z-index: -1;
        left: calc(var(--spaceX) * -1);
        bottom: 0;
        z-index: -1;
        box-shadow: 0px -10px 25px 12.5px white;
    }
    
}