/***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);
        --mainHeight: calc(100vh - var(--siteNameHeight)); /* fallback */
        --mainHeight: calc(var(--viewportHeight) - var(--siteNameHeight));
    }
    body {
        height: 100vh; /* fallback */
        height: var(--viewportHeight);
    }
}

/***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 {
    }
}

/***NOT MOBILES (PORTRAIT)
*****************************************************/
@media (min-width: 481px) {
    .mobile_menu {
    	display: none;
    }
    .mobile {
    	display: none;
    } 
    .inputs_container .inputs_block .form_block_item > input::placeholder,
    .inputs_block .form_block_item select.cities_select::placeholder,
    section.contact .form_container form textarea::placeholder {
    	opacity: 0;
    }
}
@media (max-width: 481px) {
	.not_mobile {
    	display: none;
    }
}
@media (max-width: 361px) {
	.not_mobile {
    	display: none;
    }
}

/***MOBILES (PORTRAIT)
*****************************************************/
@media (max-width: 480px) {
	:root {
    	--fontSizeSiteName: 5.5vw;
        --fontSizeXXSmall: 0.75vw;
        --fontSizeXSmall: 2.75vw;
        /*--fontSizeSmall: 4vw;*/
        --fontSizeSmall: 3.3vw;
        --fontSizeMedium: 3.3vw;
        --fontSizeMediumSerif: 5vw;
        --fontSizeLarge: 3.3vw;
        --fontSizeLargeSerif: 6.8vw;
        --fontSizeXLarge: 5.5vw;
        --fontSizeSemiXLargeSerif: 8.8vw;
        --fontSizeXLargeSerif: 8.8vw;
        --fontSizeXXLarge: 15vw;
        --fontSizeXXLargeSerif: 15vw;
        
        --headerHeight: calc(var(--spaceY)*1 + var(--sitenameHeight) + var(--rowGutterSmall));
        
        --panelHeight: calc(100vh - var(--headerHeight) - var(--spaceY)); /* fallback */
        --panelHeight: calc(var(--viewportHeight) - var(--headerHeight) - var(--spaceY));
        --mainHeight: calc(100vh - var(--headerHeight) - var(--mainTopSpace) - var(--mainBottomSpace) - var(--footerHeight)); /* fallback */
        --mainHeight: calc(var(--viewportHeight) - var(--headerHeight) - var(--mainTopSpace) - var(--mainBottomSpace) - var(--footerHeight));
        --colGutter: calc(var(--spaceX)*1);
        --gridGap: calc(var(--rowGutter)*1.5) calc(var(--colGutter)*0.75);
        
        --paletteGray: #edeee7;
    	--paletteYellow: #f6da00;
        
        --borderRadiusBig: 6vw;
        --borderRadiusSmall: 1.5vw;
        
        --borderWidthThick: 2px;
    }
    .font_size_XS_Sans {
        line-height: var(--lineHeightHigh);
    }
    .font_size_M_Serif {
        line-height: var(--lineHeightLow);
	}
    .desktop {
    	display: none;
    }
    .mobile {
    	display: inline-block;
    }
    
    /***HEADER***/
    header {
    	padding: calc(var(--spaceY)*1) calc(var(--spaceX)*2.5) var(--spaceY);
    }
    
    /***MOBILE MENU***/
    nav.menu {
    	display: none;
    }
    .menu_button {
        font-size: 6.5vw;
        position: absolute;
        right: 0;
        transform: scaleX(1.5) scaleY(1.2);
        padding: calc(var(--spaceX)* 0.1) calc(var(--spaceX)* 2.5);
    }
    .menu_button_close {
    	height: 22px;
        position: absolute;
        right: 0;
        padding: calc(var(--spaceX)* 0.1) calc(var(--spaceX)* 2.5);
    }
    .menu_button_close .menu_item,
    .menu_button_close .menu_item img {
    	height: 100%;
    }
    .mobile_menu {
    	width: 100vw;
    	height: 100vh;
        height: var(--viewportHeight);
    	position: fixed;
        top: 0;
        background: var(--paletteYellow);
        left: 0;
        display: flex;
        flex-direction: column;
        transition: transform var(--transitionDurationSlow);
    }
    .mobile_menu:not(.open) {
        transform: translateY(-100%);
    }
    .mobile_menu.open {
        transform: translateY(0);
    }
	.mobile_menu .site_name {
    	width: var(--mainWidth);
    	max-width: var(--maxWidth);
    	min-height: var(--headerHeight);
		padding: calc(var(--spaceY)*1.25) calc(var(--spaceX)* 2.5) var(--spaceY);
    }
    .mobile_menu ul {
    	width: 100%;
    	height: calc(100% - var(--headerHeight));
    	display: flex;
    	flex-direction: column;
    	text-align: center;
    	justify-content: center;
        line-height: 1.1;
        padding-bottom: calc(var(--rowGutterSmall)* 2);
    }
    .mobile_menu ul .lang_switch {
    	padding-bottom: calc(var(--rowGutterLarge)*4);
    }
    .mobile_menu ul .lang_switch .active {
    	font-weight: bold;
    }
    
    /***CONTENT***/
    main.content {
		padding-inline: calc(var(--spaceX)*1);
    }
    section.panel:not(.about) {
        padding: calc(var(--spaceY)*1) calc(var(--spaceX)* 1.5) calc(var(--spaceY)*2);
    }
    section.panel.about {
        padding: calc(var(--spaceY)* 1.5) calc(var(--spaceX)*0);
    }
    body.index .patch {
    	width: calc(100% - var(--spaceX)*2);
    }
    section.panel.home .section_header,
    section.panel.home .section_slide {
        flex-direction: column;
        height: 95%;
	}
    section.panel .section_title {
    	/*margin-bottom: calc(var(--spaceY)*1.25);*/
	}
    section.panel.about .section_title {
    	padding-left: calc(var(--spaceX)*1.5);
    }
    section.home article {
    	height: 100%;
    }
    section.home article .count_dots {
    	bottom: calc(var(--rowGutterSmall)*-1);
	}
    section.home .section_footer {
    	transform: translateY(-100%);
    }
    section.people article,
    section.about article {
    	padding-inline: 0;
    }
    section.about article {
		padding-bottom: calc(var(--rowGutterLarge)* 2);
    }
    section.panel.people .section_header {
    	flex-direction: row-reverse;
    }
    section.people article .section_header .illus {
        margin-top: 0;
        margin-left: calc(var(--spaceX)* -1.25);
        transform: scale(.85) translateX(calc(var(--spaceX)* -1));
        transform-origin: bottom right;
        margin-bottom: calc(var(--spaceY)* 0.5);
        align-self: end;
    }
    section.about article .section_header .illus {
        max-height: 37.5vw;
        margin-top: calc(var(--rowGutter)* -0.9);
	}
    section.about article .section_header .illus img {
    	max-width: 80%;
        max-height: 80%;
	}
    section.about .about_stack {
    	flex-direction: column;
    }
    section.about .about_stack:not(.one) {
		margin-top: calc(var(--rowGutterLarge)* 2.5);
    }
    section.about .about_stack.one {
    	margin-top: 0;
    }
    section.about .about_stack.one,
    section.about .about_stack.four {
    	flex-direction: column-reverse;
    }
    section.about .about_stack > .illus,
    section.about .about_stack.two > .illus {
      max-height: inherit;
      margin-top: auto;
	}
    section.about .about_stack.two .miscellany {
        top: calc(var(--spaceY)* -0.75);
        right: calc(var(--spaceX)* -0.75);
        rotate: 30deg;
	}
    section.about .about_stack > .headline_2 br {
    	display: none !important;
    }
    section.about .about_stack.center .headline_2 {
    	width: 100%;
    	text-align: left;
    }
    section.about .about_stack.three .title:before {
    	content: "#";
    }
    section.about .about_stack.three .miscellany {
    	display: none;
    }
    section.about .about_stack.four .miscellany {
        top: calc(var(--spaceY)* -1.5);
        right: calc(var(--spaceX)* 1.95);
        width: calc(var(--spaceX)* 4.5);
	}
    section.about .about_stack .headline_2 .description {
    	margin-top: calc(var(--spaceY)* 1);
    }
    section.panel.about .section_header,
    section.panel.about .description.mobile,
    section.about .about_stack {
        padding-inline: calc(var(--spaceX)*1.5);
	}
    section.panel.people .description.mobile {
    	margin-block: calc(var(--rowGutterLarge)* 1.25) calc(var(--rowGutterLarge)*2);
    }
    section.panel.about .description.mobile {
    	margin-block: calc(var(--rowGutterLarge)*0.5) calc(var(--rowGutterLarge)*0);
    }
    section.about .services .illus {
    	display: none;
    }
    section.about .services .miscellany.left {
    	width: calc(var(--spaceX)* 4);
        top: auto;
    	bottom: calc(var(--spaceY)* -3);
    	left: calc(var(--spaceX)* 3);
	}
    section.about .services .data_rows {
    	padding-right: 0;
		/*padding: calc(var(--spaceY)* 1.5) calc(var(--spaceX)* 1.5);*/
    }
    section.about .services .data {
    	padding: calc(var(--spaceY)* 1.5) calc(var(--spaceX)* 0.5);
	}
    section.home article .section_header .illus,
    section.home article .section_slide .illus {
		transform: scale(1);
        margin-bottom: calc(var(--rowGutter)*1);
    }
    section.panel:not(.work) .thumb_grid {
		grid-template-columns: var(--twoColsGrid);
	}
    section.panel.work .thumb_grid {
		grid-template-columns: var(--oneColGrid);
	}
    section.work .thumb .thumb_media img {
    	aspect-ratio: 1 / 0.55;
	}
    section.people .thumb .thumb_media:after {
    	content: ;
    	display: none !important;
    }
    .thumb .thumb_data .description {
    	margin-top: calc(var(--rowGutterXSmall)*0.33);
	}
    .more_button {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: calc(var(--rowGutter)*3);
	}
    section.work .more_button span {
        width: 100%;
        text-align: center;
	}
    
    /***PROJECT PAGE***/
    body.project section.project {
    	margin-top: calc((var(--panelHeaderHeight) + var(--spaceY))* -1.2);
	}
    section.project .project_cover {
    	height: auto;
        margin-left: calc(var(--spaceX)* -1.5);
    }
    section.project .project_header {
		margin-top: calc(var(--rowGutterLarge)* 2);
    }
    section.project > article {
		padding-inline: 0;
    }
    section.project .project_stack {
    	flex-direction: column;
    }
    section.project .project_stack.thinking {
    	flex-direction: column-reverse;
    }
    section.project .project_stack .graphic_container {
    	padding: calc(var(--rowGutterLarge)* 1.5) 0;
	}
    section.project .video {
    	padding-inline: 0;
    	margin-top: calc(var(--rowGutterLarge)*1);
	}
    .onu_footer .onu_title span {
        width: 100%;
        display: inline-block;
        text-align: center;
	}
    .onu_footer .onu_logos {
    	flex-wrap: wrap;
    }
    .onu_footer .onu_logos img {
    	height: calc(var(--rowGutterLarge)* 3.33);
    }
    .panel.related {
    	margin-top: calc(var(--rowGutterLarge)* 5);
    	padding-inline: 0;
	}
    .panel.related .thumb_grid .thumb:nth-child(3) {
    	display: none;
    }
    .panel.related .thumb_grid .thumb .thumb_data .description {
    	display: none;
    }
    section.project .project_stack .graphic.text {
        margin-block: calc(var(--rowGutterLarge)* 1.5);
	}
    
    /***CONTACT AND FOOTER***/
    section.contact .form_container {
    	padding-inline: 0;
    }
    section.contact form .inputs_container {
    	display: block;
    }
    .inputs_container .inputs_block .form_block_item {
    	margin-bottom: calc(var(--spaceY)* 0.75);
    }
    .inputs_container .inputs_block:nth-child(2) .form_block_item:after {
        left: calc(100% - var(--spaceX)* 1.5);
	}
    .inputs_container .inputs_block .form_block_item > span {
    	display: none;
    }
    .inputs_container .inputs_block .form_block_item > input,
    .inputs_block .form_block_item select.cities_select,
    section.contact .form_container form textarea {
    	width: 100%;
    }
    .inputs_block .form_block_item select.cities_select {
    	height: calc(var(--rowGutterSmall) + var(--spaceX)* 1.2);
    }
    section.contact .form_container form textarea {
    	margin-left: 0;
    }
    section.contact .form_container form .submit_container {
    	margin-top: calc(var(--spaceY)* 0.5);
        padding-inline: 0;
	}
    section.contact .form_container form .submit_container input {
    	width: 100%;
	}
    
    .contact_footer {
    	padding-inline: 0;
        flex-direction: column;
    }
    section.contact,
    footer {
        /*display: none;*/
	}
    footer {
    	width: 100%;
    	/*margin-top: calc(var(--rowGutter)*6);*/
    	padding-inline: calc(var(--spaceX)* 2.5);
	}
    footer .footer_container {
    	flex-direction: column;
		gap: calc(var(--colGutter)* 2.5);
    }
    footer .footer_logos {
        /*height: calc(var(--rowGutter)* 3.33);*/
        flex: auto;
	}
    footer .footer_data p:first-child, footer .footer_contact p:first-child {
    	margin-bottom: 0;
	}
    footer .footer_contact {
    	text-align: left;
    }
    
    /***PRIVACY***/
    section.privacy .privacy_stack {
    	display: inline-block;
    }
    section.privacy article {
		padding-right: 0;
	}
    section.privacy .privacy_stack .illus img {
    	display: none;
    }
    .mobile_footer {
		padding: calc(var(--spaceY)* 1.25) calc(var(--spaceX)* 2.5) calc(var(--spaceY)* 2.5);
        text-align: center;
    }
}