/***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 TABLETS TO MOBILES (LANDSCAPE and PORTRAIT)
*****************************************************/
@media (max-width: 1024px) {
    /***VIEWPORT HEIGHT***/
    :root {
        --viewportHeight: calc(var(--vh, 1vh) * 100);
    }
    body {
        height: calc(100vh - var(--spaceY)); /* Fallback */
        height: calc(var(--viewportHeight) - var(--spaceY));
    }
}

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

/***NOT PHONES
*****************************************************/
@media (min-width: 768px) {
	.index_mobile_button {
    	display: none;
    }
}

/***SMALL TABLETS, MOBILES (LANDSCAPE)
*****************************************************/
@media (max-width: 767px) {
	:root {
    	--fontSizeSmall: 0.8rem;
    	--fontSizeMedium: 0.8rem;
        --spaceX: calc(var(--fontSizeMedium)*var(--lineHeight)*1);
		--spaceY: calc(var(--fontSizeMedium)*1);
        --headerWidth: calc(100% - var(--spaceX)*2);
        --mainHeight: calc(100vh - var(--spaceY)*2); /* Fallback */
        --mainHeight: calc(var(--viewportHeight) - var(--spaceY)*2);
    }
    body#intro main.content {
    	min-height: calc(100vh - var(--spaceY));
        min-height: calc(var(--viewportHeight) - var(--spaceY));
        /*
    	min-height: calc(100vh - var(--spaceY));
        min-height: calc(var(--viewportHeight) - var(--spaceY));
        */
        min-height: calc(100vh); /* Fallback */
        min-height: calc(var(--viewportHeight));
    }
    .intro_menu {
    	padding: calc(var(--spaceY)*1) var(--spaceX);
	}
    nav.menu:not(.open) {
    	height: calc(var(--spaceY)*3);
    }
    nav.menu.open {
    	/*
    	height: calc(100vh - var(--spaceY));
        height: calc(var(--viewportHeight) - var(--spaceY));
        */
        height: calc(100vh); /* Fallback */
        height: calc(var(--viewportHeight));
    }
    nav.menu ul {
    	display: none;
		margin-top: var(--rowGutter);
    }
    nav.menu.open ul {
    	display: block;
    }
    body#list nav.menu:not(.open) {
    	/*
    	height: calc(100vh - var(--spaceY));
        height: calc(var(--viewportHeight) - var(--spaceY));
        */
        height: calc(100vh); /* Fallback */
        height: calc(var(--viewportHeight));
    }
    body#list nav.menu:not(.open) ul {
    	display: block; 
    }
    main.content {
    	transition: opacity 0.3s;
    }
    main.content.hide {
    	opacity: 0;
    }
}

/***MOBILES (PORTRAIT)
*****************************************************/
@media (max-width: 480px) {
	.info {
    	margin-left: calc(75px + var(--colGutter));
        margin-top: calc(var(--mainTopSpace)*2);
    }
}