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

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

/***NOTEBOOKS (MEDIUM SCREEN)
*****************************************************/
@media (min-width: 1024px) and (max-width: 1599px) {
}

/***TABLETS, MOBILES (LANDSCAPE)
*****************************************************/
@media (min-width: 1024px)  {
    .mobile_version {
    	display: none !important;
    }
}

/***FROM TABLETS TO MOBILES
*****************************************************/
@media (max-width: 1023px) {
    :root {
        /***VIEWPORT HEIGHT***/
        --viewportHeight: calc(var(--vh, 1vh) * 100);
        --menuHeight: calc(var(--fontSizeLarge)*1.6);
        --fontSizeLogo: 0.9rem;
    }
    .desktop_version {
    	display: none !important;
    }
    body {
        height: 100vh; /* Fallback */
        height: var(--viewportHeight);
    }
    .intro .logo:not(.animate) {
		top: 50vh;
        top: calc(var(--viewportHeight)*0.5);
    }
    main.content,
    footer {
        opacity: 1;
        transition-property: padding-top, opacity;
        transition-duration: var(--transitionDurationFast);
        transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    }
    main.content.hide,
    footer.hide {
        opacity: 0;
        pointer-events: none;
    }
    .video_info > *,
    .video_share > * {
    	width: 100%;
    }
    .video_info {
    	justify-content: start;
    	overflow-y: scroll;
	}
    footer {
    	row-gap: var(--rowGutterSmall);
    }
    /*
    footer .footer_stack.address,
    footer .footer_stack.contact {
    	grid-column: 1 / 3;
    }
    */
    footer .footer_stack.address > * {
    	flex: 1;
    }
    footer .footer_stack.address .address_title {
    	width: auto;
    }
    .footer_stack.contact .stack_item.newsletter {
    	flex-direction: column;
        row-gap: var(--rowGutterSmall);
    }
    .footer_stack.contact .stack_item.newsletter .contact_title,
    .stack_item.newsletter .newsletter_form {
    	width: 100%;
    }
    .footer_stack.contact .stack_item.signature {
    	margin-top: var(--rowGutterSmall);
    }
}

/***MOBILES (LANDSCAPE), TABLETS (PORTRAIT)
*****************************************************/
@media (min-width: 481px) and (max-width: 1023px)   {
    :root {
        --fontSizeSmall: 0.6rem;
        --fontSizeMedium: 1rem;
        --fontSizeLarge: 1rem;
        --fontSizeXLarge: 1.5rem;
        --fontSizeMenu: clamp(2.75rem, 12vh, 2.75rem)
    }
    .intro svg.intro_circle clipPath circle {
        cx: calc(50% + var(--menuHeight)*0.5);
        cy: 0%;
        r: 125rem;
        transform: translateY(0%);
    }
    .intro svg.intro_circle.mask clipPath circle {
        cx: 50%;
        /*cy: 50%;*/
        cy: calc((var(--menuHeight)/2) + var(--spaceY));
        r: 0.8rem !important;
        /*r: calc(var(--menuHeight) * 0.5);*/
        transform: translate(calc(var(--menuHeight) * 0.523), calc(var(--menuHeight) * 0.005));
	}
    body#project .gradient_bottom {
    	opacity: 1;
    }
    
    /***MOBILE HEADER***/
    header,
    header.mobile_version {
    	height: auto;
        transition-property: height, width, transform, background;
		transition-duration: var(--transitionDurationXFast);
    }
    header.mobile_version nav.menu {
    	/*transform-origin: center top;*/
        transition-property: width, height, transform, row-gap;
		transition-duration: var(--transitionDurationFast);
        transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    }
    header.mobile_version:not(.rotate) {
        transform: rotate(0deg);
    }
    header.mobile_version.rotate {
    	transform: rotate(0deg) translate(0%, 0%);
    }
    header.mobile_version:not(.scale) {
    	height: calc(var(--menuHeight) * 2.1);
    }
    header.mobile_version.rotate.scale {
    	width: 100vw;
    	height: 100vh; /* Fallback */
        height: var(--viewportHeight);
    	transform: rotate(0deg) translate(0%, 0%);
        transition-duration: var(--transitionDurationFast);
        transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    }
    header.mobile_version .close_menu_button {
    	position: absolute;
        top: var(--spaceY);
        color: var(--paletteLightGray);
    	transition-property: opacity;
    	transition-duration: var(--transitionDurationFast);
    }
    header.mobile_version:not(.scale) .close_menu_button {
    	opacity: 0;
        pointer-events: none;
    }
    header.mobile_version.rotate.scale .close_menu_button {
    	opacity: 1;
        pointer-events: auto;
    }
    header.mobile_version:not(.scale) nav.menu {
		width: calc(var(--menuHeight) * 2.1);
        row-gap: calc(var(--menuHeight) * 0.1);
    }
    header.mobile_version.scale nav.menu {
        height: calc(var(--viewportHeight) - var(--spaceY)*4 - var(--menuHeight)*1);
        column-gap: calc(var(--menuHeight) * 1);
    }
    header.mobile_version nav.menu > * {
    	position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        /*
        max-width: calc(50vw - var(--spaceX) * 2 - var(--menuHeight));
        max-height: calc(50vw - var(--spaceX) * 2 - var(--menuHeight));
        */
    	transition-property: color, background;
		transition-duration: var(--transitionDurationFast);
    }
    header.mobile_version.rotate nav.menu > * {
    	position: relative;
    }
    header.mobile_version.colorize nav.menu > * {
    	color: var(--paletteBlack);
    	background: var(--paletteRed);
    }
    header.mobile_version.scale nav.menu > * {
        max-width: calc(50vw - var(--spaceX) * 2 - var(--menuHeight));
        max-height: calc(50vw - var(--spaceX) * 2 - var(--menuHeight));
    }
    header.mobile_version:not(.scale) nav.menu .item_square {
        width: calc(var(--menuHeight) * 0.95);
    }
    header.mobile_version:not(.scale) nav.menu .item_circle {
        width: var(--menuHeight);
    }
    header.mobile_version:not(.scale) nav.menu .item_square,
    header.mobile_version:not(.scale) nav.menu .item_circle {
        pointer-events: none;
    }
    header.mobile_version.scale nav.menu .item_square,
    header.mobile_version.scale nav.menu .item_circle {
        pointer-events: auto;
    }
    header.mobile_version nav.menu .item_square .item_text,
    header.mobile_version nav.menu .item_circle .item_text {
    	position: absolute;
        /*transform: rotate(-90deg);*/
        color: var(--paletteBlack);
        font-size: var(--fontSizeMenu);
        transition: var(--transitionDurationFast);
    }
    header.mobile_version nav.menu .item_square .item_text:not(.show),
    header.mobile_version nav.menu .item_circle .item_text:not(.show) {
    	opacity: 0;
    }
    header.mobile_version nav.menu .item_square .item_text.show,
    header.mobile_version nav.menu .item_circle .item_text.show {
    	opacity: 1;
    }
    body#info header.mobile_version:not(.rotate) nav.menu .item_square,
    body#info header.mobile_version:not(.rotate) nav.menu .item_circle {
    	background-color: var(--paletteBlack);
    }
}

/***MOBILES (PORTRAIT)
*****************************************************/
@media (max-width: 480px) {
    :root {
        --fontSizeSmall: 0.75rem;
        --fontSizeMedium: 1rem;
        --fontSizeLarge: 1rem;
        --fontSizeXLarge: 2.75rem;
        --fontSizeMenu: clamp(2.75rem, 12vw, 2.75rem);
        --gridColumns: 2;
    }
    /*
    .desktop_version {
    	display: none !important;
    }
    */
    body.scroll_less {
        overflow: hidden;
    }
    .intro svg.intro_circle clipPath circle {
        cx: calc(50% + var(--menuHeight)*0.5);
        cy: 0%;
        r: 125rem;
        transform: translateY(0%);
    }
    .intro svg.intro_circle.mask clipPath circle {
        cx: 50%;
        /*cy: 50%;*/
        cy: calc((var(--menuHeight)/2) + var(--spaceY));
        r: 0.8rem !important;
        /*r: calc(var(--menuHeight) * 0.5);*/
        transform: translate(calc(var(--menuHeight) * 0.523), calc(var(--menuHeight) * 0.005));
	}
    
    /***MOBILE HEADER***/
    header,
    header.mobile_version {
    	height: auto;
        transition-property: height, width, transform, background;
		transition-duration: var(--transitionDurationXFast);
    }
    /*
    header.mobile_version.dark {
    	background: var(--paletteBlack);
    }
    */
    nav.menu,
    header.mobile_version nav.menu {
        flex-direction: column;
    }
    header.mobile_version nav.menu {
    	/*transform-origin: center top;*/
        transition-property: width, height, transform, row-gap;
		transition-duration: var(--transitionDurationFast);
        transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    }
    header.mobile_version:not(.rotate) {
        transform: rotate(-90deg);
    }
    header.mobile_version.rotate {
    	transform: rotate(0deg) translate(0%, 0%);
    }
    header.mobile_version:not(.scale) {
    	height: calc(var(--menuHeight) * 2.1);
    }
    header.mobile_version.rotate.scale {
    	width: 100vw;
    	height: 100vh; /* Fallback */
        height: var(--viewportHeight);
    	transform: rotate(0deg) translate(0%, 0%);
        transition-duration: var(--transitionDurationFast);
        transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    }
    header.mobile_version .close_menu_button {
    	position: absolute;
        top: var(--spaceY);
        color: var(--paletteLightGray);
    	transition-property: opacity;
    	transition-duration: var(--transitionDurationFast);
    }
    header.mobile_version:not(.scale) .close_menu_button {
    	opacity: 0;
        pointer-events: none;
    }
    header.mobile_version.rotate.scale .close_menu_button {
    	opacity: 1;
        pointer-events: auto;
    }
    header.mobile_version:not(.scale) nav.menu {
		width: calc(var(--menuHeight) * 2.1);
        row-gap: calc(var(--menuHeight) * 0.1);
    }
    header.mobile_version.scale nav.menu {
    	height: calc(100vh - var(--spaceY)*2 - var(--menuHeight)*2);
        height: calc(var(--viewportHeight) - var(--spaceY)*2 - var(--menuHeight)*4);
        row-gap: calc(var(--menuHeight) * 1);
    }
    header.mobile_version nav.menu > * {
    	position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        max-height: calc(50vh - var(--spaceY)*2 - var(--menuHeight));
        max-height: calc(50vh - var(--spaceY)*2 - var(--menuHeight));
    	transition-property: color, background;
		transition-duration: var(--transitionDurationFast);
    }
    header.mobile_version.rotate nav.menu > * {
    	position: relative;
    }
    header.mobile_version.colorize nav.menu > * {
    	color: var(--paletteBlack);
    	background: var(--paletteRed);
    }
    header.mobile_version:not(.scale) nav.menu .item_square {
        width: calc(var(--menuHeight) * 0.95);
    }
    header.mobile_version:not(.scale) nav.menu .item_circle {
        width: var(--menuHeight);
    }
    header.mobile_version:not(.scale) nav.menu .item_square,
    header.mobile_version:not(.scale) nav.menu .item_circle {
        pointer-events: none;
    }
    header.mobile_version.scale nav.menu .item_square,
    header.mobile_version.scale nav.menu .item_circle {
        pointer-events: auto;
    }
    header.mobile_version nav.menu .item_square .item_text,
    header.mobile_version nav.menu .item_circle .item_text {
    	position: absolute;
        /*transform: rotate(-90deg);*/
        color: var(--paletteBlack);
        font-size: var(--fontSizeMenu);
        transition: var(--transitionDurationFast);
    }
    header.mobile_version nav.menu .item_square .item_text:not(.show),
    header.mobile_version nav.menu .item_circle .item_text:not(.show) {
    	opacity: 0;
    }
    header.mobile_version nav.menu .item_square .item_text.show,
    header.mobile_version nav.menu .item_circle .item_text.show {
    	opacity: 1;
    }
    body#info header.mobile_version:not(.rotate) nav.menu .item_square,
    body#info header.mobile_version:not(.rotate) nav.menu .item_circle {
    	background-color: var(--paletteBlack);
    }
    
    /***MOBILE INFO PAGE***/
    section.info.mobile_version {
        height: 100vh;
        height: var(--viewportHeight);
        color: var(--paletteBlack);
        background-color: var(--paletteRed);
        overflow-y: scroll;
    }
    section.info.mobile_version a {
        color: var(--paletteBlack);
    }
    section.info.mobile_version a:hover {
        color: var(--paletteWhite);
    }
    section.info.mobile_version .info_content {
        margin-inline: auto;
        display: grid;
        column-gap: var(--colGutter);
        max-width: var(--mainWidth);
        padding-inline: var(--spaceX);
    }
    section.info.mobile_version .info_content .info_motion {
        display: flex;
        flex-direction: column;
        row-gap: var(--rowGutterMedium);
        flex: 1;
        height: 100%;
        padding-block: var(--mainTopSpace) calc(var(--fontSizeMedium) * 1.75);
    }
    section.info.mobile_version .info_content .info_contact {
        display: flex;
        flex-direction: column;
        row-gap: var(--rowGutterMedium);
        height: 100%;
    }
    section.info.mobile_version .info_content .info_credits {
        padding-top: calc(var(--rowGutterMedium)*2);
    }
    .grid .grid_item {
        grid-column: span 2;
    }
    .grid_item.cover {
        aspect-ratio: auto;
    }
    .grid_item.cover:not(.intersected_partial) {
        padding-top: 0% !important;
    }
    #button_share {
    	display: none !important;
    }
    footer .footer_stack.address,
    footer .footer_stack.contact {
    	grid-column: span 2;
    }
    footer .stack_item:not(.newsletter) .contact_title,
    footer .stack_item:not(.newsletter) > * {
    	width: auto;
    	flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}