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

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

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

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

/***FROM TABLETS TO MOBILES (LANDSCAPE and PORTRAIT)
*****************************************************/
@media (max-width: 1024px) {
    /***VIEWPORT HEIGHT***/
    :root {
        --viewportHeight: calc(var(--vh, 1vh) * 100);
        --mainHeight: calc(100vh);
        --mainHeight: calc(var(--viewportHeight));
    }
    .desktop {
    	display: none !important;
    }
    .mobile {
    	display: inline-block !important;
    }
    body {
        height: 100vh; /* Fallback */
        height: var(--viewportHeight);
    }
    .thumb_grid .thumb .media_zoom {
    	display: none !important;
    }
}

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

/***TABLETS (PORTRAIT)
*****************************************************/
@media (min-width: 481px) and (max-width: 1024px) {
	.menu_item.close_menu_button {
    	display: none !important;
    }
}

/***SMALL TABLETS, MOBILES (LANDSCAPE)
*****************************************************/
@media (min-width: 481px) and (max-width: 1024px) {
	:root {
		--videoHeight: calc(100vh - var(--spaceY) * 3 - var(--rowGutter));
        --videoHeight: calc(var(--viewportHeight) - var(--spaceY) * 3 - var(--rowGutter));
        --gridTemplateThumbs: repeat(3, 1fr);
        --thumbDataSpace: calc(var(--rowGutter) * 2);
    }
    .menu_item.close_menu_button {
    	display: none;
    }
	body#project main.content {
    	margin-block: 0;
    }
	body#project header.works_header {
    	position: absolute;
        /*
    	display: flex;
    	justify-content: space-between;
        */
    }
	body#project header.works_header .category,
    body#project header.works_header .date,
    body#project header.works_header .title,
    body#project header.works_header .location,
    body#project header.works_header .credits {
    	display: none;
    }
    header.works_header .client {
    	grid-column: 1 / 3;
    }
    header.works_header .close {
    	grid-column: 26 / 29;
    }
    article.project {
    	position: relative;
    }
    article.project section.media_player {
    	grid-column: 4 / 26;
    	align-self: center;
    	margin-top: var(--spaceY);
    }
    .player_panel {
    	padding-block: var(--spaceY);
    }
    .player_panel .player_time {
    	display: none;
    }
    .player_panel .player_controls {
    	width: 120px;
	}
    .player_panel .player_sound {
    	width: 150px;
	}
    .project_nav {
    	display: none !important;
    }
    body#archive header.works_header {
    	display: none;
    }
    /*
    header.works_header > div:not(.category) {
    	display: none;
    }
    header.works_header > div.category {
    	grid-column: span 15;
    }
    header.works_header .category .sub_menu {
    	margin-top: var(--rowGutter);
    }
    */
    .list {
    	padding-bottom: var(--spaceY);
    }
    .list .row a .row_data {
    	grid-column: 1 / 23;
    }
    .list .row a .row_media {
    	grid-column: 23 / 29;
    }
    .thumb_grid .thumb .media_zoom {
    	display: none !important;
    }
}

/***MOBILES (PORTRAIT)
*****************************************************/
@media (max-width: 480px) {
	:root {
		/***TEXT***/
    	--fontSizeSans: 0.6rem;
    	--fontSizeSerif: 0.7rem;
        --fontSizeMenu: 0.9rem;
        /***SPACES***/
    	--spaceY: calc(var(--fontSizeSans) * 1);
    	--spaceX: calc(var(--fontSizeSans) * 1.25);
        --colGutter: calc(var(--fontSizeSans) * 0.75);
        /***SIZES***/
        --menuRowGutter: calc(var(--fontSizeMenu)*var(--lineHeight));
        --menuBarHeight: calc(var(--menuRowGutter) + var(--spaceY)*1);
        --videoHeight: calc(100vh - var(--spaceY) * 4 - var(--rowGutter) * 4);
        --videoHeight: calc(var(--viewportHeight) - var(--spaceY) * 4 - var(--rowGutter) * 4);
        --gridTemplateThumbs: repeat(1, 1fr);
            --thumbDataSpace: calc(var(--rowGutter) * 2);
    }
    body:not(#project) main.content {
    	padding-top: var(--menuBarHeight);
    }
    body#project nav.menu{
    	display: none;
    }
    nav.menu {
        width: 100%;
        height: 100%;
        height: var(--viewportHeight);
        top: 0;
        transform: translate(0);
        padding: var(--spaceY) var(--spaceX) calc(var(--spaceY)*1);
        font-size: var(--fontSizeMenu);
        mix-blend-mode: normal;
        /*pointer-events: auto;*/
        transition-property: background, backdrop-filter;  
        transition-duration: var(--transitionDuration);
    }
    nav.menu:not(.active) {
        -webkit-backdrop-filter: blur(0vw);
        backdrop-filter: blur(0vw);
        background: rgba(0, 0, 0, 0);
    }
    nav.menu.active {
    	opacity: 1;
        -webkit-backdrop-filter: blur(3vw);
        backdrop-filter: blur(3vw);
        background: rgba(30, 30, 30, 0.75);
    }
    nav.menu .open_menu_button {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 500;
        padding: var(--spaceY) var(--spaceX);
        text-align: center;
    }
    nav.menu .sitename_button {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        padding: var(--spaceY) var(--spaceX);
        text-align: center;
    }
    nav.menu .open_menu_button.hide,
    nav.menu .sitename_button.hide {
        display: none !important;
    }
    nav.menu .open_menu_button span,
    nav.menu .close_menu_button span,
    nav.menu .sitename_button span, {
        cursor: pointer !important;
    }
    nav.menu ul {
    	height: 100%;
        /*height: var(--viewportHeight);*/
        position: relative;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        z-index: 300;
        transition-property: opacity;  
        transition-duration: var(--transitionDuration);
    }
    nav.menu:not(.active) ul {
    	opacity: 0;
        pointer-events: none;
    }
    nav.menu.active ul {
    	opacity: 1;
        pointer-events: auto;
    }
    nav.menu ul li:nth-child(1) {
        order: 1;
    }
    nav.menu ul li:nth-child(2) {
        order: 4;
    }
    nav.menu ul li:nth-child(3) {
        order: 2;
    }
    nav.menu ul li:nth-child(4) {
        order: 5;
    }
    nav.menu ul li:nth-child(5) {
        order: 3;
    }
	.module.full_size:not(:first-child),
    .module.mid_size:not(:first-child),
    .module.small_size:not(:first-child),
    .module.diptych:not(:first-child),
    .module.triptych:not(:first-child),
    .module.quadriptych:not(:first-child) {
    	margin-top: calc(var(--thumbDataSpace)*2);
	}
    .module.full_size:first-child {
    	margin-top: 0;
    }
    .module.mid_size .thumb {
    	grid-column: 1 / 29;
	}
    .module.small_size .thumb {
    	grid-column: 5 / 25;
	}
    .module.triptych,
    .module.quadriptych {
    	/*
    	display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: calc(var(--thumbDataSpace)*2) var(--colGutter);
        */
        display: grid;
        grid-template-columns: var(--gridTemplate);
        gap: calc(var(--thumbDataSpace)*2) var(--colGutter);
	}
    .module.triptych .thumb:nth-child(1),
    .module.triptych .thumb:nth-child(2) {
    	grid-column: span 14;
    }
    .module.triptych .thumb:nth-child(3) {
    	grid-column: 5 / 25;
    }
    .module.quadriptych .thumb:nth-child(1) {
    	grid-column: 1 / 29;
    }
    .module.quadriptych .thumb:nth-child(2),
    .module.quadriptych .thumb:nth-child(3) {
    	grid-column: span 14;
    }
    .module.quadriptych .thumb:nth-child(4) {
    	grid-column: 5 / 25;
    }
    .module.triptych .thumb,
    .module.quadriptych .thumb {
    	/*grid-column: 5 / 25;*/
        /*width: calc(50% - var(--colGutter)/2);*/
        flex: unset;
	}
    .module.full_size .thumb .thumb_media,
    .module.quadriptych .thumb:nth-child(1) .thumb_media {
		aspect-ratio: 4/5;
    }
    .module.full_size .thumb .thumb_media img,
    .module.full_size .thumb .thumb_media iframe,
    .module.full_size .thumb .thumb_media video,
    .module.full_size .thumb .thumb_media video source,
    .module.quadriptych .thumb:nth-child(1) .thumb_media img,
    .module.quadriptych .thumb:nth-child(1) .thumb_media iframe,
    .module.quadriptych .thumb:nth-child(1) .thumb_media video,
    .module.quadriptych .thumb:nth-child(1) .thumb_media video source {
    	width: 100%;
		height: 100%;
        object-fit: cover;
    }
    body#project main.content {
    	margin-block: 0;
        min-height: var(--mainHeight);
    }
    body#project header.works_header {
    	grid-column: 1 / 24;
    	column-count: 2;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
        -ms-column-break-inside: avoid;
        -webkit-page-break-inside: avoid;
        -moz-page-break-inside: avoid;
        -ms-page-break-inside: avoid;
        page-break-inside: avoid;
        -webkit-break-inside: avoid;
        -moz-break-inside: avoid;
        -ms-break-inside: avoid;
        break-inside: avoid;
        display: inline-block;
    }
    header.works_header .close {
      position: fixed;
      top: var(--spaceY);
      right: var(--spaceX);
	}
    article.project section.media_player {
    	grid-column: 1/29;
    }
    article.project section.media_player iframe.video_embed {
    	width: auto;
    	max-height: 100%;
	}
    .player_panel {
    	position: relative;
        align-self: self-start;
        align-items: unset;
    }
    .player_panel .player_progress {
    	position: absolute;
        bottom: calc(var(--rowGutter)*2);
        margin-bottom: 0;
    }
    .player_panel .player_time {
    	width: 25%;
    	order: 2;
        text-align: center;
    }
    .player_panel .player_controls {
    	width: 25%;
    	order: 1;
    }
    .player_panel .player_sound {
    	width: 25%;
    	order: 3;
    }
    .project_nav {
    	grid-column: 1/29;
        display: flex !important;
        justify-content: space-between;
        align-self: end;
        padding-bottom: var(--rowGutter);
    }
    body#archive .works_header {
    	display: none;
    }
    .list {
    	padding-bottom: var(--spaceY);
    }
    .list .row a .row_data {
    	grid-column: 1/18;
        opacity: 1;
    }
    .list .row a .row_data .category,
    .list .row a .row_data .date,
    .list .row a .row_data .title,
    .list .row a .row_data .location,
    .list .row a .row_data .credits {
    	display: none;
    }
    .list .row .row_data span.count {
    	grid-column: 24 / 28;
    }
    .list .row .row_data span.client {
    	grid-column: span 20;
	}
    .list .row a .row_media {
    	grid-column: 18/29;
    }
    .thumb_grid .thumb .thumb_media {
    	aspect-ratio: auto;
    }
    .thumb_grid .thumb .media_zoom {
    	display: none !important;
    }
    footer {
    	bottom: 50%;
        transform: translateY(50%);
    }
    footer .theme_nav {
    	width: 100%;
    	justify-content: space-between;
        transition: opacity var(--transitionDuration);
        pointer-events: none;
    } 
    footer .theme_nav:not(.active) {
    	opacity: 0;
    }
    footer .theme_nav.active {
    	opacity: 1;
    }
    footer .theme_nav > * {
        width: calc(var(--fontSizeSans) * 0.9);
        height: calc(var(--fontSizeSans) * 3.5);
	}
    /*
    footer .theme_nav .light_button {
        order: 2;
	}
    footer .theme_nav .dark_button {
        order: 1;
	}
    */
    footer .theme_nav:not(.active) .light_button,
    footer .theme_nav:not(.active) .dark_button {
        pointer-events: none;
    }
    footer .theme_nav.active .light_button,
    footer .theme_nav.active .dark_button {
        pointer-events: auto;
    }
    footer .theme_nav.active {
    	opacity: 1;
        pointer-events: auto;
    }
    body[data-theme="light"] footer .theme_nav .light_button {
    	border: 0;
    }
    
}