/***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);
    }
    body.intro h1.site_name {
    	mix-blend-mode: inherit;
	}
    body.intro h1.site_name a {
    	color: var(--textColor);
	}
    nav.intro_menu {
    	display: none;
    }
    svg.menu_button {
    	display: inline;
        height: calc(var(--fontSize_L) * 1.75);
        padding: var(--spaceY) var(--spaceX);
        position: fixed;
        top: 0;
    	right: 0;
        z-index: 150;
        translate: 0;
        rotate: 90deg;
        transition: var(--transitionDuration);
    }
    svg.menu_button.active {
      	rotate: 0deg;
      	opacity: 1;
      	transition: var(--transitionDuration_Slow);
    }
    section.intro_media {
    	height: 100vh; /* Fallback */
        height: var(--viewportHeight);
    }
    section.intro_media img {
        mix-blend-mode: initial;
    }
    body.intro nav.menu {
    	display: inherit;
    }
    body.intro section.column {
        width: 100vw;
	}
    nav.menu {
        width: 100%;
        min-height: 100%;
        padding: calc(var(--headerHeight) + (var(--rowGutter_L)*2) - var(--spaceY)) var(--spaceX) var(--spaceY);
        display: inherit;
        position: fixed;
        top: 0;
        right: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transitionDuration);
	}
    nav.menu.active {
        opacity: 1;
        pointer-events: auto;
	}
    nav.menu.uppercase {
        text-transform: none;
	}
    body#es nav.menu {
        background: var(--paletteViolet) !important;
	}
    body#en nav.menu {
        background: var(--paletteGreen) !important;
	}
    nav.menu > ul {
    	padding: 0;
    }
    nav.menu ul {
        display: block;
        border-bottom: 0;
    	font-size: var(--fontSize_L);
    	line-height: 1.2;
    	font-weight: var(--fontWeight_Light);
	}
    nav.menu li.lang_switch {
        position: absolute;
    	bottom: var(--spaceY);
	}
    body nav.menu .menu_item.active a,
    body nav.menu .menu_item a:hover {
    	color: var(--backColor) !important;
    }
    nav.menu li a.active {
        position: absolute;
    	bottom: var(--spaceY);
	}
    footer.intro_footer {
    	display: none;
    }
    article.pop_up {
		position: fixed;
        width: calc(100% - var(--spaceX) * 2.5);
        height: auto;
        padding: calc(var(--spaceY)*2) var(--spaceX);
        top: 50%;
        left: calc(var(--spaceX) * 1.25);
        transform: translateY(-50%);
        z-index: 50;
    }
}
@media (min-width: 1025px) {
    svg.menu_button {
        display: none;
    }
}

/***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 {
    	--fontSize_XS: 0.8rem;
        --fontSize_S: 0.8rem;
        --fontSize_M: 1.2rem;
        --fontSize_L: 2.2rem;
    	--spaceX: calc(var(--fontSize_S) * 1.6);
        --headerHeight: calc(var(--spaceY)*2 + var(--rowGutter_L));
    }
    nav.menu ul {
    	width: 100%;
        position: absolute;
        bottom: calc(var(--spaceY)*1.25);
	}
    nav.menu li.lang_switch {
    	position: absolute;
    	bottom: 0;
    	right: calc(var(--spaceX)*2);
	}
}

/***MOBILES (PORTRAIT)
*****************************************************/
@media (max-width: 480px) {
	:root {
    	--fontSize_XS: 0.9rem;
        --fontSize_S: 0.9rem;
        --fontSize_M: 1.3rem;
        --fontSize_L: 2.6rem;
    	--spaceX: calc(var(--fontSize_S) * 1.6);
        --headerHeight: calc(var(--spaceY)*2 + var(--rowGutter_L));
    }
    /*
    body.intro h1.site_name {
    	mix-blend-mode: inherit;
	}
    body.intro h1.site_name a {
    	color: var(--textColor);
	}
    nav.intro_menu {
    	display: none;
    }
    svg.menu_button {
    	display: inline;
        height: calc(var(--fontSize_L) * 1.75);
        padding: var(--spaceY) var(--spaceX);
        position: fixed;
        top: 0;
    	right: 0;
        z-index: 150;
        translate: 0;
        rotate: 90deg;
        transition: var(--transitionDuration);
    }
    svg.menu_button.active {
      	rotate: 0deg;
      	opacity: 1;
      	transition: var(--transitionDuration_Slow);
    }
    section.intro_media {
    	height: 100vh;
        height: var(--viewportHeight);
    }
    section.intro_media img {
        mix-blend-mode: initial;
    }
    body.intro nav.menu {
    	display: inherit;
    }
    footer.intro_footer {
    	display: none;
    }
    nav.menu {
        width: 100%;
        min-height: 100%;
        padding: calc(var(--headerHeight) + (var(--rowGutter_L)*2) - var(--spaceY)) var(--spaceX) var(--spaceY);
        display: inherit;
        position: fixed;
        top: 0;
        right: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transitionDuration);
	}
    nav.menu.active {
        opacity: 1;
        pointer-events: auto;
	}
    nav.menu.uppercase {
        text-transform: none;
	}
    body#es nav.menu {
        background: var(--paletteViolet);
	}
    body#en nav.menu {
        background: var(--paletteGreen);
	}
    nav.menu > ul {
    	padding: 0;
    }
    nav.menu ul {
        display: block;
        border-bottom: 0;
    	font-size: var(--fontSize_L);
    	line-height: 1.2;
    	font-weight: var(--fontWeight_Light);
	}
    nav.menu li.lang_switch {
        position: absolute;
    	bottom: var(--spaceY);
	}
    body nav.menu .menu_item.active a,
    body nav.menu .menu_item a:hover {
    	color: var(--backColor) !important;
    }
    nav.menu li a.active {
        position: absolute;
    	bottom: var(--spaceY);
	}
    */
	article.pop_up {
        width: calc(100% - var(--spaceX) * 2.5);
    }
    article.pop_up .font_size_L {
    	font-size: 1.8rem;
    }
	main.content {
        min-height: auto;
        position: relative;
        display: inherit;
	}
	section.column {
        width: 100vw;
        height: auto;
        max-height: inherit;
        min-height: auto;
        padding: calc(var(--headerHeight) + var(--rowGutter_L)*2) var(--spaceX) var(--spaceY);
        position: static;
        top: auto;
        overflow-y: inherit;
	}
    section.column.left_side {
    	padding: calc(var(--headerHeight) + (var(--rowGutter_L)*2) - var(--spaceY)) calc(var(--spaceX)*1) var(--spaceY);
	}
    section.column.right_side {
    	padding: var(--headerHeight) var(--spaceX);
	}
    .article_header .sub_title {
        flex-direction: column;
	}
    .article_header .title {
    	padding-right: 0;
    }
    body#es.contact {
        background: var(--paletteViolet);
	}
    body#en.contact {
        background: var(--paletteGreen);
	}
    body#es.contact a:hover {
    	color: var(--backColor);
    }
    section.contact {
    	padding: calc(var(--headerHeight) + (var(--rowGutter_L)*2) - var(--spaceY)) var(--spaceX) var(--spaceY);
        /*padding: calc(var(--spaceY) + var(--rowGutter_L)*2) var(--spaceX) var(--spaceY);*/
    }
    section.contact p.font_size_L {
    	font-size: 2.1rem;
        line-height: 1.2;
    }
    footer.main_footer {
    	display: none;
	}
}