/***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 (max-width: 1280px) {
	section.grid.medium article.thumb .thumb_data .font_size_XL {
    	font-size: var(--fontSizeMedium);
    }
    section.grid.medium article.thumb .thumb_data .font_size_M {
    	font-size: var(--fontSizeSmall);
    }
}

/***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);
    }
    /*
    section.grid.medium article.thumb .thumb_data .font_size_XL {
    	font-size: var(--fontSizeMedium);
    }
    section.grid.medium article.thumb .thumb_data .font_size_M {
    	font-size: var(--fontSizeSmall);
    }
    */
}

/***TABLETS
*****************************************************/
@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: 515px) {
	:root {
    	--fontSizeXSmall: 1rem;
        --fontSizeSmall: 1rem;
        --fontSizeMedium: 1.4rem;
        --fontSizeLarge: 1.4rem;
        --fontSizeXLarge: 3.75rem;
        --fontSizeXXLarge: 2rem;
        --fontSizeXXXLarge: 8.5rem;
        --spaceY: calc(var(--fontSizeSmall) * 0.75);
    	--spaceX: calc(var(--fontSizeSmall) * 1.25);
        --colGutter: calc(var(--spaceX) * 0.5);
		--gridTemplate: repeat(6, 1fr);
        --headerHeight: calc(var(--spaceY) * 2 + 3rem);
        --mainTopSpace: calc(var(--rowGutterXLarge) * 2);
    }
	.default {
    	display: none !important;
    }
	.mobile {
    	display: inline-block;
    }
    header.mobile {
    	position: fixed;
        top: 0;
        left: 0;
        z-index: 300;
        width: 100%;
    }
    header.mobile nav.bar {
    	display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    	height: var(--headerHeight);
		padding: var(--spaceY) var(--spaceX);
        background: var(--paletteBlack);
    }
    header.mobile nav.bar {
        background: var(--paletteBlack);
    }
    body#studio header.mobile nav.bar {
        background: var(--paletteGray);
    }
    body#journal header.mobile nav.bar,
    body#post header.mobile nav.bar {
        background: var(--paletteWhite);
    }
    header.mobile nav.bar .bar_item.bar_logo,
    header.mobile nav.bar .bar_item.bar_logo img {
    	height: 100%;
    }
    header.mobile nav.bar .bar_item.bar_button {
    	width: 30px;
    	/*height: 13px;*/
        padding-block: var(--spaceY);
    	display: flex;
        flex-direction: column;
        row-gap: var(--spaceY);
    }
    header.mobile nav.bar .bar_item.bar_button > div {
    	height: var(--borderWidth);
        background: var(--textColor);
        transition: transform var(--transitionDuration);
    }
    header.mobile nav.bar .bar_item.bar_button > div:nth-child(1) {
    	transform-origin: top left;
    }
    header.mobile nav.bar .bar_item.bar_button > div:nth-child(2) {
    	transform-origin: bottom left;
    }
    header.mobile nav.bar .bar_item.bar_button.on > div:nth-child(1) {
    	transform: rotate(28.5deg);
    }
    header.mobile nav.bar .bar_item.bar_button.on > div:nth-child(2) {
    	transform: rotate(-28.5deg);
    }
    body#studio header.mobile nav.bar .bar_item.bar_logo img,
    body#journal header.mobile nav.bar .bar_item.bar_logo img,
    body#post header.mobile nav.bar .bar_item.bar_logo img {
    	filter: brightness(0.2);
    }
    /*
    body#studio header.mobile nav.bar .bar_item.bar_button,
    body#journal header.mobile nav.bar .bar_item.bar_button,
    body#post header.mobile nav.bar .bar_item.bar_button {
    	border-top: 2px solid var(--paletteBlack);
        border-bottom: 2px solid var(--paletteBlack);
    }
    */
    body#studio header.mobile nav.bar .bar_item.bar_button > div,
    body#journal header.mobile nav.bar .bar_item.bar_button > div,
    body#post header.mobile nav.bar .bar_item.bar_button > div {
        background: var(--paletteBlack);
    }
    header.mobile nav.mobile_menu {
    	width: 100%;
        height: calc(100vh- var(--headerHeight));
        height: calc(var(--viewportHeight) - var(--headerHeight));
        background: var(--paletteBlack);
        padding: 0 var(--spaceX) var(--spaceY);
        display: flex;
        flex-direction: column;
        row-gap: var(--fontSizeLarge);
        position: absolute;
        top: -100vh;
        top: calc(var(--viewportHeight)*-1);
        z-index: -1;
        transition: top var(--transitionDurationSlow);
    }
    header.mobile nav.mobile_menu.on {
    	top: var(--headerHeight);
    }
    header.mobile nav.mobile_menu ul {
    	display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: var(--fontSizeMedium);
        height: 100%;
    }
    header.mobile nav.mobile_menu li.mobile_menu_item.active a,
    header.mobile nav.mobile_menu li.mobile_menu_item a:hover {
    	color: var(--paletteOffWhite);
        font-family: Niceshit;
    }
    body#studio  header.mobile nav.mobile_menu li.mobile_menu_item.active a {
    	color: var(--paletteOffWhite);
    }
    body#journal  header.mobile nav.mobile_menu li.mobile_menu_item.active a {
    	color: var(--paletteViolet);
    }
    header.mobile nav.mobile_menu .mobile_contact {
    	justify-self: end;
    	display: flex;
        justify-content: space-between;
        padding-bottom: var(--spaceY);
    }
    body#studio header.mobile nav.mobile_menu {
    	background: var(--paletteGray);
    }
    body#journal header.mobile nav.mobile_menu,
    body#post header.mobile nav.mobile_menu {
    	background: var(--paletteWhite);
    }
    body#studio  header.mobile nav.mobile_menu a,
    body#studio  header.mobile nav.mobile_menu .mobile_contact {
    	color: var(--paletteBlack);
    }
    body#journal  header.mobile nav.mobile_menu a,
    body#journal  header.mobile nav.mobile_menu .mobile_contact {
    	color: var(--paletteBlack);
    }
    body#post  header.mobile nav.mobile_menu a,
    body#post  header.mobile nav.mobile_menu .mobile_contact {
    	color: var(--paletteBlack);
    }
    body.scroll_less {
        overflow: hidden;
    }
    nav.menu:not(.on) {
       display: none;
    }
    nav.menu.on {
        display: inline-block; 
    }
    section.intro_cover {
    	height: calc(100vw - var(--spaceX)*2);
    }
    .work_filter {
    	padding: 0 var(--spaceX) var(--spaceY);
        margin-bottom: calc(var(--rowGutterBetweenSections) * 1);
	}
    .work_filter nav.categories ul {
    	column-gap: 10px;
    }
    .work_filter nav.categories .categories_item:not(:last-child):after {
    	position: static;
    	right: calc(var(--fontSizeMedium)*-0.75);
        margin-left: 5px;
    }
    section.grid.large article.thumb {
    	grid-column: span 6;
    }
    section.grid.medium {
    	grid-gap: var(--rowGutterBetweenSections) var(--colGutter);
    }
    section.grid.medium article.thumb {
    	grid-column: span 12;
    }
    section.grid.large article.thumb .thumb_data {
    	flex-direction: column;
        margin-bottom: calc(var(--fontSizeLarge) * 0.5);
    }
    .highlight_text p,
    .header_text p,
    .text p {
    	grid-column: span 6;
	}
    .header_text br,
    .highlight_text br {
    	display: none;
	}
    body#services .clients .clients_line .line_item {
    	height: calc(var(--fontSizeLarge)*1.5);
    }
    .press .press_grid {
    	column-count: 2;
    }
    section.grid.medium:not(.related_thumbs) article.thumb a {
    	display: flex;
        flex-direction: column-reverse;
    }
    section.grid.medium:not(.related_thumbs) article.thumb .thumb_data {
    	width: auto;
        height: auto;
        position: static;
        background: transparent;
        opacity: 1;
        padding: 0;
        margin-bottom: calc(var(--fontSizeLarge) * 0.5);
    }
    section.grid.medium:not(.related_thumbs) article.thumb .thumb_data .black {
    	color: var(--paletteGray) !important;
    }        
    section.grid.medium:not(.related_thumbs) article.thumb .thumb_data .client {
    	margin-top: 0;
    }
    section.grid.medium:not(.related_thumbs) article.thumb .thumb_data .client,
    section.grid.medium:not(.related_thumbs) article.thumb .thumb_data .title {
    	font-size: var(--fontSizeLarge) ; 
    	line-height: var(--lineHeightLow); 
    }
    /*
    section.grid.medium:not(.related_thumbs) article.thumb .thumb_data .font_size_XL {
    	font-size: var(--fontSizeSmall);
    }
    section.grid.medium:not(.related_thumbs) article.thumb .thumb_data .font_size_M {
    	font-size: var(--fontSizeXSmall);
    }
    */
    .related section.grid.medium.related_thumbs article.thumb .thumb_data {
    	opacity: 1;
    }
    .related section.grid.medium.related_thumbs article.thumb .thumb_data .client {
    	font-size: var(--fontSizeLarge) ; 
    	line-height: var(--lineHeightLow);
    }
    section.grid.small article.thumb {
    	grid-column: span 6;
    }
    section.grid.small article.thumb .thumb_data {
    	margin-top: calc(var(--rowGutterSmall) * 0.5);
	}
    section.grid.small article.thumb .thumb_data .subtitle {
    	margin-top: 0;
    }
    .project_header {
    	top: var(--headerHeight) !important;
    }
    .project_header a span,
    .project_header a.active span {
		font-size: calc(var(--fontSizeLarge) * 1);
    }
    .project_info {
    	display: flex;
        flex-direction: column-reverse;
        height: calc(100vh - var(--headerHeight) - var(--rowGutterXSmall) - (var(--spaceY) * 1.6));
        height: calc(var(--viewportHeight) - var(--headerHeight) - var(--rowGutterXSmall) - (var(--spaceY) * 1.6));
		padding-top: calc(var(--rowGutterBetweenSections) * 0.6);
    }
    .project_info.open {
    	top: calc(var(--spaceY) * 1.6 + var(--rowGutterXSmall) + var(--headerHeight));
	}
    body#project .header_text {
    	margin-top: calc(var(--rowGutterBetweenSections) * 0.6);
        margin-bottom: calc(var(--rowGutterBetweenSections) * 0.3);
    	color: var(--paletteOffWhite);
	}
    .journal_row {
		flex-direction: column;
        row-gap: var(--rowGutterSmall);
    }
    .journal_row > * {
    	width: 100%;
	}
    footer .footer_marquee .footer_marquee_item {
    	height: auto;
        margin-bottom: var(--fontSizeMedium);
        padding-left: calc(var(--fontSizeLarge)*1);
    }
	footer .footer_marquee .footer_marquee_item img {
    	width: calc(100vw - var(--spaceX)*2);
        height: auto;
    }
}