/***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: 100vh; /* Fallback */
        height: var(--viewportHeight);
    }
    * {
    	user-select: none !important;
    }
    .intro_video {
    	transition: opacity 0.6s;
    }
    .intro_video:not(.hide) {
    	opacity: 1;
    }
    .intro_video.hide {
    	opacity: 0 !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) {
}

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

/***MOBILES (PORTRAIT)
*****************************************************/
@media (max-width: 480px) {
	:root {
    	--viewportHeight: calc(var(--vh, 1vh) * 100);
    	--fontSizeSmall: 0.875rem;
    	--spaceY: calc(var(--fontSizeMedium) * 1);
    	--spaceX: calc(var(--fontSizeMedium) * 1.4);
        --headerHeight: calc(var(--fontSizeSmall) + var(--spaceY)*2);
        --colGutter: calc(var(--fontSizeMedium) * 1.4);
        --gridTemplate: repeat(2, 1fr);
    }
	.desktop {
    	display: none;
    }
    body.scroll_less {
        overflow: hidden;
    }
    header {
    	position: fixed; 
        top: 0;
        padding: 0;
    }
    header nav.bar {
    	position: fixed; 
        top: 0;
        z-index: 100;
        display: flex;
        justify-content: space-between;
        width: 100vw;
        height: calc(var(--spaceY)*2 + var(--rowGutterSmall));
        padding: var(--spaceY) var(--spaceX);
        background: var(--paletteBlack);
        transition: background var(--transitionDuration);
    }
    body#index header nav.bar.invert {
    	background: transparent;
    }
    body#index header nav.bar.on {
    	background: var(--paletteBlack) !important;
    }
    body#index header nav.bar.invert.on .header_logo,
    body#index header nav.bar.invert.on .menu_button {
    	filter: invert(0) !important;
    }
    body#index header nav.bar.invert:not(.on) .header_logo,
    body#index header nav.bar.invert:not(.on) .menu_button {
    	filter: invert(1);
    }
    /*
    body#index header nav.bar.invert .header_logo,
    body#index header nav.bar.invert .menu_button {
    	filter: invert(1);
    }
    */
    header nav.bar .header_logo {
    	height: var(--fontSizeSmall);
    }
    header nav.bar .header_logo img {
    	margin-top: -5px;
    	height: 100%;
    }
    header.mobile nav.menu {
    	margin-top: var(--headerHeight);
        height: calc(100vh - var(--headerHeight));
        height: calc(var(--viewportHeight) - var(--headerHeight));
       	padding: var(--spaceY) var(--spaceX);
        background: var(--paletteBlack);
    }
    nav.menu ul {
    	flex-direction: column;
        justify-content: start;
        gap: var(--rowGutterSmall);
    }
    header.mobile nav.menu {
        transition: margin-top var(--transitionDurationSlow), opacity var(--transitionDurationSlow);
    }
    header.mobile nav.menu:not(.on) {
    	margin-top: calc((100vh - var(--headerHeight)) * -1);
    	margin-top: calc((var(--viewportHeight) - var(--headerHeight)) * -1);
        opacity: 1;
        pointer-events: none;
    }
    header.mobile nav.menu.on {
    	margin-top: var(--headerHeight);
        opacity: 1;
        pointer-events: auto;
    }
    nav.menu.invert li.menu_item a {
    	filter: invert(0);
    }
    body#merch main.content,
    body#diary main.content,
    body#post main.content,
    body#about main.content {
    	margin-top: calc(var(--headerHeight) + var(--spaceY));
    }
    body#work main.content,
    body#project main.content {
		overflow: hidden;
    }
    section.intro {
      width: 100vw;
      height: 100vh;
      height: var(--viewportHeight);
	}
    section.intro .intro_mask:not(.grow) {
    	transform: scale(1.1);
    }
    section.intro .intro_mask.grow {
    	height: 100vh;
        height: var(--viewportHeight);
    	transform: scale(15);
	}
    div.logo {
        height: auto;
    }
    div.logo .logo_media {
        width: 230px;
        height: auto;
    }
    body:not(#index) div.logo {
    	display: none;
    }
    body#merch section.grid,
    body#diary section.grid,
    body#post section.grid,
    body#about section.grid {
		display: inherit;
    }
    body#diary section.grid {
		display: flex;
        flex-direction: column;
    }
    section.grid.merch section.products {
		display: grid !important;
    	grid-template-columns: var(--gridTemplate);
    	grid-gap: var(--gridGap);
    }
    article.product .product_data {
    	position: inherit;
    	width: auto;
        height: auto;
        padding: 0;
        opacity: 1;
        padding-top: var(--spaceY);
    }
    section.list {
    	margin-top: calc(var(--headerHeight) + var(--spaceY));
        height: calc(100vh - var(--headerHeight));
        height: calc(var(--viewportHeight) - var(--headerHeight));
    }
    section.list .list_filters {
    	/*gap: calc(var(--colGutter) * 0.75);*/
        user-select: none
    }
    section.list .list_filters .filter_item {
    	flex: 1;
    }
    /*
    .list_filters .filter_item > * {
    	white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    */
    .list_filters .filter_item .filter_sublist {
    	position: fixed !important;
        left: var(--spaceX) !important;
        width: calc(100% - var(--spaceX)*2);
        user-select: none;
        padding-top: var(--spaceX);
    }
    .filter_sublist .sublist_row {
    	opacity: 1;
        user-select: none;
    }
    .filter_sublist .sublist_row:hover {
    	opacity: 1;
    }
    .filter_sublist .sublist_row > * {
    	width: 50%;
        user-select: none;
    }
    .project_sheet {
    	flex-wrap: wrap;
        background: var(--paletteBlack);
    }
    .project_sheet .sheet_item.back_button {
    	order: 1;
        flex-basis: 25%;
    }
    .project_sheet .sheet_item.title {
    	order: 2;
        flex-basis: 50%;
    }
    .project_sheet .sheet_item.client {
    	order: 4;
        flex-direction: column;
        flex-basis: 100%;
        padding-left: 25%;
    }
    .project_sheet .sheet_item.info_button {
    	order: 3;
        flex-basis: 25%;
    }
    .project_info { 
		height: 100vh;
    	height: var(--viewportHeight);
    	padding: calc(var(--spaceY)*2 + var(--rowGutterSmall)*3) var(--spaceX) 0;
    }
    .project_info .info_data {
    	left: auto;
		width: 100vw;
        height: calc(var(--viewportHeight) - (var(--spaceY)*2 + var(--rowGutterSmall)*3));
        padding-bottom: calc(var(--spaceY)*2 + var(--rowGutterSmall)*6);
        opacity: 1;
    }
    .project_footer {
    	flex-wrap: wrap;
        gap: calc(var(--spaceX) * 2);
	}
    .project_footer .player_controls {
    	order: 1;
        flex-basis: 100%;
    }
    .project_footer .prev_button {
    	order: 2;
        justify-self: start;
    	text-align: left;
    }
    .project_footer .next_button {
    	order: 3;
        justify-self: end;
    	text-align: right;
    }
    .player_controls .controls_panel .pause_toggle {
    	text-align: left;
	}
    .player_controls .controls_panel .sound_toggle {
        width: auto;
        text-align: right;
    }
    section.grid.about {
        margin-top: var(--headerHeight);
        height: auto;
    }
    section.grid.about article .about_text {
    	display: unset;
    }
    section.grid.about img.about_icon {
    	margin-top: var(--rowGutterLarge);
        margin-left: calc(100% - 110px);
		margin-bottom: var(--headerHeight);
        position: inherit;
        
    }
    .transition_layer {
    	height: 100vh; /* Fallback */
        height: var(--viewportHeight);
    }
}