/***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 DEVICES
*****************************************************/
@media (max-width: 1024px) {
	.device_message {
		display: none;
	}
}

/***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);
    }
    header {
        grid-template-columns: var(--fourColsGrid);
	}
    header span:nth-child(1) {
    	grid-column: 1 / 3;
	}
    header span:nth-child(2) {
    	grid-column: 3 / 4;
	}
    header span:nth-child(3) {
    	grid-column: 4 / 5;
	}
    section.media {
    	height: 100vh; /* Fallback */
        height: var(--viewportHeight);
    	opacity: 1;
    	transition: opacity 0.3s;
    }
    .device_message {
		display: none;
	}
}

/***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 {
        --fontSizeSmall: 0.75rem;
    	--fontSizeMedium: 1rem;
    	--fontSizeLarge: 1.5rem;
    }
    /*
    header,
    header span {
        display: block;
	}
    */
}

/***MOBILES (PORTRAIT)
*****************************************************/
@media (max-width: 480px) {
	:root {
        --fontSizeSmall: 1.4rem;
    	--fontSizeMedium: 1rem;
    	--fontSizeLarge: 1.4rem;
    }
    /*
    header {
    	grid-template-columns: var(--threeColsGrid);
    }
    header span:nth-child(1) {
    	grid-column: 1 / 3;
	}
    header span:nth-child(2) {
    	grid-column: 3 / 4;
	}
    header span:nth-child(3) {
    	grid-column: 1 / 4;
	}
    header span:nth-child(3) {
    	text-align: left;
    }
	*/
    header,
    header span {
        display: flex;
        flex-direction: column;
        gap: var(--rowGutterLarge);
	}
    header span {
        display: block;
	}
    header span:nth-child(3) {
    	text-align: left;
    }
    section.media {
    	opacity: 0;
    }
    .device_message {
		display: block;
        -webkit-animation: blink 1.5s step-start 0s infinite;
    	animation: blink 1.5s step-start 0s infinite;
        margin-bottom: var(--rowGutterLarge);
        rotate: 90deg;
	}
    @keyframes blink {
        50% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
}