/***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) {
	.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) {
	.image_grid {
    	gap: calc(var(--rowGutterMedium) * 1) calc(var(--colGutter) * 1); 
    }
}

/***MOBILES (PORTRAIT)
*****************************************************/
@media (max-width: 480px) {
    :root {
        --fontSizeSmall: 0.6rem;
        --fontSizeMedium: 0.8rem;
        --fontSizeLarge: 2rem;
    }
    .site_name {
    	/*
        order: 1;
        grid-column: 1 / 5;
        */
        z-index: 100;
    }
    nav.lang_switch {
        display: none
    }
    nav.menu_button {
        order: 2;
        grid-column: 6 / 9;
        text-align: right;
        z-index: 100;
    }
    nav.menu {
    	width: 100%;
    	height: 100vh; /* Fallback */
        height: var(--viewportHeight);
        grid-column: initial;
        padding-inline: var(--spaceX);
        padding-top: calc(var(--spaceY) + var(--rowGutterMedium) + var(--rowGutterSmall));
        padding-bottom: var(--spaceY);
		position: fixed;
        left: 0;
        margin-left: 0;
        background: var(--backColor);  
    }
    nav.menu:not(.open) {
    	display: none;
    }
    nav.menu.open {
    	display: block;
        z-index: 75;
    }
    nav.menu .after_layer {
    	content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: -100%;
        left: 0;
    }
    nav.menu ul {
        flex-direction: column;
        justify-content: start;
        gap: var(--rowGutterMedium) 0;
    }
    nav.menu .lang_switch {
    	margin-top: var(--rowGutterMedium);
    }
    .marquee {
        order: 4;
        /*
        position: absolute;
        padding-top: 0;
        margin-top: calc(var(--spaceY) + var(--rowGutterSmall)*2 + var(--rowGutterSmall)*3);
        margin-left: 0;
        */
    }
    .text, .images {
    	grid-column: span 4 !important;
    }
    .image_grid {
    	gap: calc(var(--rowGutterMedium) * 1) calc(var(--colGutter) * 1); 
    }
    body:not(#index) .image_grid {
    	grid-template-columns: repeat(2, 1fr);  
    }
    body#index .image_grid {
        grid-template-columns: repeat(2, 1fr);  
    }
    .image_zoom {
    	background: var(--paletteWhite);
    }
    .image_zoom .zoom_bg {
    	width: 100vw;
    	height: 100vh;
        display: flex;
        align-items: center;
    }
    .image_zoom img {
        max-width: 100vw;
        max-height: fit-content;
        align-self: center;
    }
    .image_zoom .caption.cursor {
    	width: 100%;
        padding: var(--spaceY) var(--spaceX);
		position: fixed;
        left: 0 !important;
        bottom: 0 !important;
        /* text-align: left; */
        transform: translate(0, 0);
        display: inline-block !important;
    }
}