/***GLOBAL VARIABLES
*****************************************************/
:root {
  /***TEXT***/
  --fontSize_XS: 0.8rem;
  --fontSize_S: 1.2rem;
  --fontSize_M: 1.6rem;
  --fontSize_L: 2.8rem;
  /*
  --fontSize_S: clamp(0.75rem, 1vw, 1.25rem);
  --fontSize_M: clamp(1.4rem, 1.4vw, 1.8rem);
  --fontSize_L: clamp(2.75rem, 3vw, 3.25rem);
  */
  --fontWeight_Light: 100;
  --fontWeight_Regular: 250;
  --fontWeight_Bold: 375;
  --letterSpacing: .02em;
  --wordSpacing: 0em;
  --lineHeight: 1.3;
  --lineHeightLow: 1.1;

  /***SPACES***/
  --spaceY: calc(var(--fontSize_S) * 1);
  --spaceX: calc(var(--fontSize_S) * 1.8);
  --bodySpaces: 0;
  --rowGutter_XS: calc(var(--fontSize_XS) * var(--lineHeight));
  --rowGutter: calc(var(--fontSize_S) * var(--lineHeight));
  --rowGutter_L: calc(var(--fontSize_L) * var(--lineHeightLow));
  --colGutter: calc(var(--fontSize_S) * 0.75);
  --mainTopSpace: calc(var(--rowGutter) * 2);
  --mainBottomSpace: calc(var(--rowGutter) * 3);

  /***SIZES***/
  --headerHeight: calc(var(--spaceY)*2 + var(--rowGutter));
  --mainWidth: 100%;
  --mainHeight: calc(100vh - var(--headerHeight) - var(--mainTopSpace) - var(--mainBottomSpace) - var(--footerHeight));
  --footerHeight: calc(var(--spaceY)*2 + var(--rowGutter));

  /***GRIDS***/
  --oneColGrid: repeat(1, 1fr);
  --sixColsGrid: repeat(6, 1fr);
  --twelveColsGrid: repeat(12, 1fr);
  --gridGap: var(--rowGutter) var(--colGutter);

  /***COLOR***/
  --paletteIvory: #fafaf5;
  --paletteViolet: #a7a8c6;
  --paletteGreen: #aba442;
  --paletteBlack: #000000; 
  --paletteAlpha: transparent;
  --backColor: var(--paletteIvory);
  --textColor: var(--paletteBlack);
  --linkColor: var(--paletteBlack);
  --espColor: var(--paletteViolet);
  --engColor: var(--paletteGreen);
  --hoverColor: var(--paletteGray);

  /***DECORATION***/
  --linkDeco: underline;
  --borderWidth: 1px;
  --borderLine: var(--borderWidth) solid var(--textColor);

  /***TRANSITION***/
  --transitionDuration: 0.2s;
  --transitionDuration_Slow: 0.5s;
}
  
/***FONTS
*****************************************************/
/***FONT SMOOTH***/
* {
  -webkit-font-smoothing: smooth;
  -moz-osx-font-smoothing: smooth;
  text-rendering: geometricPrecision;
}
@font-face {
  font-family: Maxi Variable;
  src: url("https://radal.ar/fonts/ABCMaxiRoundVariable.ttf") format("truetype-variations");
}
.font_size_XS {
  font-size: var(--fontSize_XS);
  line-height: var(--lineHeight);
}
.font_size_S {
  font-size: var(--fontSize_S);
  line-height: var(--lineHeight);
}
.font_size_M {
  font-size: var(--fontSize_M);
  line-height: var(--lineHeight);
}
.font_size_L {
  font-size: var(--fontSize_L);
  line-height: var(--lineHeightLow);
  font-weight: var(--fontWeight_Light);
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.same_line {
    white-space: nowrap;
}

/***RESET
*****************************************************/
body.intro::-webkit-scrollbar {
	display: none;
}
::-webkit-scrollbar {
	width: 1px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: var(--textColor); 
}
::-webkit-scrollbar-thumb:hover {
	background: var(--textColor); 
}
/*
::-webkit-scrollbar {
  display: none;
}
::selection {
  color: var(--backColor);
  background-color: var(--textColor);
}
::-moz-selection {
  color: var(--backColor);
  background-color: var(--textColor);
}
*/
*,
*::before,
*::after {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  position: relative;
  margin: var(--bodySpaces);
  color: var(--textColor);
  background: var(--backColor);
  font-family: "Maxi Variable", sans-serif;
  font-size: var(--fontSize_S);
  font-weight: var(--fontWeight_Regular);
  line-height: var(--lineHeight);
  letter-spacing: var(--letterSpacing);
}
ul {
  display: block;
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}
/*
li {
  display: inline;
}
*/
a {
  color: var(--linkColor);
  text-decoration: none;
  transition-property: color;
  transition-duration: var(--transitionDuration);
}
body#es a:hover {
  color: var(--espColor);
}
body#en a:hover {
  color: var(--engColor);
}
/*
body#es:not(.studio):not(.residence) a:hover {
  color: var(--espColor);
}
body#en:not(.studio):not(.residence) a:hover {
  color: var(--engColor);
}
*/
body#es.studio nav.menu a:hover,
body#en.studio nav.menu a:hover,
body#es.residence nav.menu a:hover,
body#en.residence nav.menu a:hover {
  color: var(--backColor);
}
body#es.studio .column.right_side a:hover,
body#en.studio .column.right_side a:hover,
body#es.residence .column.right_side a:hover,
body#en.residence .column.right_side a:hover {
  color: var(--backColor);
}
h1, h2, h3 {
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding: 0;
  font-size: var(--fontSize);
  font-style: normal;
  font-weight: 400;
}
p {
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0;
}
span {
  display: inline;
}
img, video {
  vertical-align: middle;
}
img.multiply {
    mix-blend-mode: multiply;
}
form, input, textarea, submit,
iframe, embed, audio {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: inherit;
}
input:focus, textarea:focus {
  outline: none;
}
::placeholder {
	/*chrome, firefox, opera, safari*/
  	color: var(--textColor);
}
:-ms-input-placeholder {
	/*internet explorer*/
	color: var(--textColor);
}
::-ms-input-placeholder {
	/*microsoft edge*/
  color: var(--textColor);
}

/***HEADER AND MENU
*****************************************************/
/*
header {
  width: 100%;
  min-height: var(--headerHeight);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: var(--spaceY) var(--spaceX);
  display: flex;
  justify-content: space-between;
  align-items: start;
  background: var(--backColor);
  z-index: 100;
}
*/
h1.site_name {
  width: 50vw;
  min-height: var(--headerHeight);
  padding: var(--spaceY) var(--spaceX);
  /* behaviour */
  /*position: -webkit-sticky;*/
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  font-weight: var(--fontWeight_Bold);
}
body.intro h1.site_name {
  mix-blend-mode: difference;
  pointer-events: none;
}
body.intro h1.site_name a {
  color: white;
}
section.intro_media {
  width: 100%;
  height: 100%;
  /*
  max-height: 100vh;
  min-height: var(--mainHeight);
  */
  position: absolute;
  top: 0;
  left: 0;
  /*
  display: flex;
  justify-content: center;
  align-items: center;
  */
}
section.intro_media img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  mix-blend-mode: color;
  opacity: 0;
  transition: opacity var(--transitionDuration);
}
section.intro_media img:not(.active) {  
}
section.intro_media img.active {
  opacity: 1;
}
article.pop_up {
  	position: absolute;
    width: calc(50% - var(--headerHeight) * 2.5);
    height: auto;
    padding: calc(var(--spaceY)*1.5) var(--spaceX);
    text-align: center;
    top: 50%;
    left: calc(var(--headerHeight) * 1.25);
	transform: translateY(-50%);
    z-index: 100;
    opacity: 1;
    transition: opacity var(--transitionDuration);
}
article.pop_up.close {
  	opacity: 0;
}
article.pop_up .pop_up_title,
article.pop_up .pop_up_subtitle,
article.pop_up .pop_up_date,
article.pop_up .pop_up_close {
  color: var(--backColor);
}
body#es article.pop_up {
  background: rgba(167, 168, 198, 0.8);
}
body#en article.pop_up {
  background: rgba(171, 164, 66, 0.8);
}
article.pop_up a:hover {
  color: var(--backColor) !important;
}
article.pop_up p,
article.pop_up a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
article.pop_up .pop_up_close {
  position: absolute;
  top: 0;
  right: 0;
  padding: calc(var(--rowGutter_XS)*.5) var(--colGutter);
  cursor: pointer;
  transition: color var(--transitionDuration);
}
article.pop_up .pop_up_close:hover {
  color: var(--textColor);
}
nav.intro_menu {
  width: 100%;
  height: auto;
  padding: var(--spaceY) var(--spaceX);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
body#es nav.intro_menu.residence {
  background: var(--espColor);
}
body#en nav.intro_menu.residence {
  background: var(--engColor);
}
nav.intro_menu li.menu_item {
  position: relative;
}
nav.intro_menu li.menu_item a svg.isologo {
  height: calc(var(--rowGutter_L) * 0.65);
  position: absolute;
  translate: 0 25%;
  rotate: 90deg;
  opacity: 0;
  transition: var(--transitionDuration);
}
nav.intro_menu li.menu_item a:hover svg.isologo {
  rotate: 0deg;
  opacity: 1;
  transition: var(--transitionDuration_Slow);
}
nav.intro_menu li.menu_item a,
nav.intro_menu li.menu_item a span {
  transition: var(--transitionDuration_Slow);
}
body#es nav.intro_menu li.menu_item a:hover {
  color: var(--espColor);
}
body#en nav.intro_menu li.menu_item a:hover {
  color: var(--engColor);
}
body#es nav.intro_menu li.menu_item a:hover span {
  color: var(--espColor);
  padding-left: calc(var(--rowGutter_L) * 0.85);
}
body#en nav.intro_menu li.menu_item a:hover span {
  color: var(--engColor);
  padding-left: calc(var(--rowGutter_L) * 0.85);
}
body#es svg.isologo path {
  fill: var(--espColor);
}
body#en svg.isologo path {
  fill: var(--engColor);
}
nav.intro_menu ul.lang_switch > li {
  display: inline;
}
body.intro nav.menu {
  display: none;
}
nav.menu {
  width: 50vw;
  min-height: var(--headerHeight);
  padding: 0 var(--spaceX);
  display: inherit;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  background: var(--backColor);
}
body:not(.studio):not(.residence) nav.menu {
    background: var(--backColor);
}
body#es.studio nav.menu,
body#es.residence nav.menu {
    background: var(--paletteViolet);
}
body#en.studio nav.menu,
body#en.residence nav.menu {
    background: var(--paletteGreen);
}
body#es:not(.studio):not(.residence) nav.menu .menu_item.active a {
	color: var(--espColor);
}
body#en:not(.studio):not(.residence) nav.menu .menu_item.active a {
	color: var(--engColor);
}
body#es.studio nav.menu .menu_item.active a,
body#es.residence nav.menu .menu_item.active a,
body#en.studio nav.menu .menu_item.active a,
body#en.residence nav.menu .menu_item.active a {
	color: var(--backColor);
}
nav.menu > ul {
  display: flex;
  justify-content: space-between;
  gap: var(--colGutter);
  padding: var(--spaceY) 0;
  border-bottom: var(--borderLine);
}
nav.menu li.menu_item {
  display: inherit;
}
nav.menu ul.lang_switch > li {
  display: inline;
}

/***MAIN CONTENT
*****************************************************/
main.content {
  min-height: 100vh;
  position: relative;
  /*margin: var(--mainTopSpace) var(--spaceX) var(--mainBottomSpace);*/
  display: flex;
}
section.column {
  width: 50vw;
  height: 100vh;
  max-height: 100vh;
  min-height: var(--mainHeight);
  /*
  padding: calc(var(--headerHeight) + var(--rowGutter_L)*2) var(--spaceX) var(--spaceY);
  */
  position: fixed;
  top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
section.column.left_side {
  left: 0;
  padding: calc(var(--headerHeight) + (var(--rowGutter_L)*2) - var(--spaceY)) var(--spaceX) var(--spaceY);
}
section.column.right_side {
  right: 0;
  padding: calc(var(--headerHeight) + (var(--rowGutter_L)*2) - var(--spaceY)) var(--spaceX) 0;
}
/*
body#es section.column.right_side {
  background: var(--espColor);
}
body#en section.column.right_side {
  background: var(--engColor);
}
section.column .section_text,
section.column article {
    padding: var(--spaceY) var(--spaceX);
}
*/

/***TEXTS***/
.section_text {
    margin-bottom: calc(var(--rowGutter_L)*1);
}
.article_header {
    margin-bottom: calc(var(--rowGutter_L)*0.75);
}
.article_header .sub_title {
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(var(--rowGutter)*0.25);
}
.article_header .title {
    padding-right: 25%;
}
.article_short_text,
.article_text {
    margin-bottom: calc(var(--rowGutter_L)*1);
}
.trajectory {
    margin-bottom: calc(var(--rowGutter_L)*1);
}
.trajectory .trajectory_item {
    display: flex;
}
.trajectory_item > p:first-child {
    flex: 0 0 100px;
}
.list .list_row:not(:first-child) {
    padding-top: calc(var(--rowGutter_L)*0.75);
}
.list .list_row {
    padding-bottom: calc(var(--rowGutter_L)*0.75);
}
.list .list_row:not(:last-child) {
    border-bottom: var(--borderLine);
}

/***MULTIMEDIA***/
.slider {
    width: 100%;
    margin-bottom: calc(var(--rowGutter_L)*1);
    position: relative;
}
.slider .slides {
    width: 100%;
    position: relative;
}
.slider .slides .slide {
    width: 100%;
    position: absolute;
	opacity: 0;
	transition: opacity 0.2s;
}
.slider .slides .slide.active {
	opacity: 1;
}
.slider .slides .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slider .slider_nav {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	display: flex;
	justify-content: space-between;
}
.slider .slider_nav .prev,
.slider .slider_nav .next {
	width: 50%;
	height: 100%;
}
.slider .slider_nav .prev {
	/*cursor: w-resize;*/
    cursor: pointer;
}
.slider .slider_nav .next {
	/*cursor: e-resize;*/
    cursor: pointer;
}
.slider .slider_footer {
	display: flex;
    margin-top: calc(var(--rowGutter_XS)*0.25);
}
.slider .slider_footer .captions {
    flex: 9;
}
.slider .slider_footer .count {
    flex: 1;
    text-align: right;
}

/***SUSTAINABLE
*****************************************************/
section.column .post:not(:last-child) {
	border-bottom: var(--borderLine);
    margin-bottom: var(--rowGutter);
}

/***WORKSHOP AND RESIDENCE
*****************************************************/
body#es.studio section.column.right_side,
body#es.residence section.column.right_side {
    background: var(--paletteViolet);
}
body#en.studio section.column.right_side,
body#en.residence section.column.right_side {
    background: var(--paletteGreen);
}
section.column article.inactive {
    opacity: .75;
	filter: grayscale();
    mix-blend-mode: multiply;
}

/***CONTACT
*****************************************************/
section.contact {
	padding: calc(var(--headerHeight) + (var(--rowGutter_L)*2) - var(--spaceY)) var(--spaceX) var(--spaceY);
}

/***FOOTER
*****************************************************/
footer.intro_footer {
  padding: var(--spaceY) var(--spaceX);
}
footer.intro_footer {
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
  right: 0;
}
footer.main_footer {
    /*padding: 0 var(--spaceY);*/
    margin-top: calc(var(--rowGutter_L)*1);
}