html{
	scroll-behavior: smooth;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #e09ab3;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #e2457d;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #f85d94;
}

h1,h2,h3,h4,h5,a,p {
    color: #e2457d !important;
    text-align: left;
}

a {
    color: #e2457d;
    text-align: left;
}


h1[href]{
    cursor: pointer !important;
}

h2{
	padding-top: 1em !important;
    line-height: 1em !important;
}

/*-- Basic Styling End --*/

.mobile .mobile-project-body {
	padding-top: 10rem;
}


.inline-block-child {
	display: inline-block;
}

.mobile .parent {
	display: none;
}

.mobile .menu-bottom {
   position:absolute;
   bottom:0;
   margin-bottom: 1rem;
   width:100%;
}

.mobile .hoverElement{
        
 mix-blend-mode: multiply;
}

h4 {
	font-size: 1rem;
    font-weight: 400;
    text-align: left;
}


h5 {
	font-size: 4rem;
    font-weight: 400;
    text-align: left;
    color: #e2457d;
}

h6 {
	font-size: 2rem;
    font-weight: 400;
    text-align: left;
    color: #e2457d;
}

h7 {
	font-size: 1.7rem;
    font-weight: 400;
    text-align: left;
    color: #e2457d;
}

h8 {
	font-size: 1.7rem;
    text-align: left;
    color: #000 !important;
}

h9 {
	color: #e2457d;
}
.click {
	display:none;
     position: absolute;
    bottom: 0;
  width: 100%;
  top: 42rem;
  z-index: 99;
}

.mobile .click {
	display:block;
    
   padding-left: 2rem;
   padding-right: 2rem;
  width: 100%;
  top: 60rem;
  z-index: 99;
}




/*
 * Main page hover
 */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hoverElement {
    display: inline-block;
    stroke: #E2457D;
    stroke-width: 0.25rem;
    fill: transparent;
    background-color: white;
    animation: fadeIn 0.65s ease-in infinite alternate;
  
  }
  
.hoverElement:hover > svg *,
.hoverElement:hover:hover {
   
    stroke: white;
    stroke-width: 0.25rem;
    fill: #E2457D;
    fill-opacity: 1;
    mix-blend-mode: multiply;
  }

.mobile #outlineTimber, .mobile #outlineFiber, .mobile #outlineRoof, .mobile #outlineWall, .mobile #outlineCards {
    display: none; 
}

.tooltip{
  display: none;
  position: absolute !important;
  width: 25% !important;
  right: 4rem;
  top: 20rem;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 99;
  color:#E2457D;
  padding: 1.5rem;    
}

.mobile .tooltip{
  display: none !important;
}

#mobile-tooltip, #mobile-tooltip-en{
    display: none;
}

.mobile #mobile-tooltip, .mobile #mobile-tooltip-en{
    display: block;
	padding: 2rem;
}

.mobile #mobile-tooltip:after {
    content: "";
	-webkit-animation: cycle 20s infinite; /* Safari 4+ */
    -moz-animation: cycle 20s infinite; /* Fx 5+ */
    -o-animation: cycle 20s infinite; /* Opera 12+ */
    animation: cycle 20s infinite; /* IE 10+, Fx 29+ */
	color: #e2457d
}

.mobile #mobile-tooltip-en:after {
    content: "";
	-webkit-animation: cycleEn 20s infinite; /* Safari 4+ */
    -moz-animation: cycleEn 20s infinite; /* Fx 5+ */
    -o-animation: cycleEn 20s infinite; /* Opera 12+ */
    animation: cycleEn 20s infinite; /* IE 10+, Fx 29+ */
	color: #e2457d
}


@keyframes cycle {
  0% {
    content:"Sueños con Fibra/Madera reflexiona sobre el pasado y futuro de la Ciudad de México. Construido con madera reciclada de la icónica montaña rusa de la ciudad (Montaña Rusa de La Feria), el pabellón incluye papel picado: la forma de arte precolombino cuyas aberturas invitan a los ancestros a pasar al presente.";
  }
  33% {
    content:"Sueños con Tierra exhibe el uso de materiales locales a través de dos elementos constructivos: bovedillas de arcilla impresas en 3D que se apoyan entre las viguetas de concreto y bloques de tierra comprimida (Ecoblocks) fabricados con tepetate, una tierra local con alto contenidos de arcilla.";
  }
  66% {
    content:"Sueños con Concreto explora el futuro de la vivienda asequible en México a través de métodos constructivos de bajo impacto material. Viguetas prefabricadas de hormigón se esculpen mediante técnicas de optimización de la forma. De esta manera se reduce en un 50% su consumo de material y su impacto ambiental asociado..";
  }
  100% {
    content:"Sueños con… es un elemento interactivo dentro del pabellón para que los visitantes compartan sus sueños e ideales para el futuro de una ciudad más inclusiva y equitativa. Sueños con... fue co-diseñado con académicos y expertos en urbanismo e innovación; Carlos Flores, Carina Arvizu, María Moreno, Santiago Fernández y Claudia Ortiz.";
  }
}

@keyframes cycleEn {
    0% {
        content:"Dreams of Fiber/Timber reflects on the past and future of Mexico City. Built from wood recycled from the city’s iconic rollercoaster (La Feria’s Montaña Rusa), the pavilion adapts the pre-Columbian art form known as papel picado (perforated paper) whose openings invite ancestors to pass through to the present.";
    }
    33% {
        content:"Dreams of Earth exhibits the use of local materials through two building elements: 3D-printed clay blocks that span between precast concrete beams as lost formwork and compressed earth blocks (Ecoblocks) fabricated with local soil, tepetate, with high contents of clay.";
    }
    66% {
        content:"Dreams of Concrete explores the future of affordable housing in Mexico by minimizing the material impact of existing construction methods. Traditional viguetas, precast concrete beams, are sculpted through shape optimization, reducing their material consumption and its associated environmental impact by 50%.";
    }
    100% {
        content:"Sueño con… is an interactive element inside the pavilion for the visitors to share their dreams and ideals for a more inclusive, equitable city's future. Sueño con... is co-designed with academics and experts in urbanism and innovation; Carlos Flores, Carina Arvizu, Maria Moreno, Santiago Fernandez, and Claudia Ortiz.";
    }
}

#mobile-nav{
    display: none;
    
}

.mobile-nav-padding{
	display: none;
}

.mobile .mobile-nav-padding{
	display: block;
    padding: 0 2rem;
}

.mobile #mobile-nav{
    margin: 1rem 2rem 0rem;
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1rem;
}

.mobile #mobile-nav>* {
    color: #e2457d;
    padding: 0.75rem;
    border: 2px solid #e2457d;
    text-align: center;
}

.header{
	padding: 2rem; 
    position: sticky;
    top: 0;
    z-index: 4;
    background-color:white
}

.mobile .header{
	padding-bottom: 0;	
}


.click-prompt{
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    text-align: center;
    color: #e2457d;
    font-weight: 1000;
	
}

.mobile .click-prompt{
	display: none;
}

.footer{
    font-size: 1.3rem;
    position: absolute; 
    bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(3,auto);
    margin: 2rem 2rem;
    margin-bottom: 0;
    z-index: 100;
}

.footer *{
    padding: 0 2rem;
    text-align: center;
}

.footer :first-child{
	border-right: 2px solid #e2457d;
}


.left{
    left: 0
}
.right{
    right: 0;
}

.footer a:hover{
    cursor:pointer;
    transition: 0.25s ease-in-out;
    content: "";
}
.footer a:hover::before{
    content: "→ ";
}

.mobile .footer a:hover::before{
    content: "";
}

#home-wrapper{
    width: 100vw;
    height: 100vh;
    overflow: auto;
}

.mobile #home-wrapper{
	overflow: auto;
}

#container {
    display: inline-block;
    position: relative;
    width: 100%;
}

#container > * {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.mobile #container{
	margin-top: 3rem;
}

#svg {
    z-index: 2;
    position: absolute;
    cursor: pointer;
    width: 100%;

}

#png {
    z-index: 1;
}

.fit {
  max-width: 100%;

}

.drawing {
  max-height: 100%;
  max-width: 100%;
}

.mobile-menu-header{
	padding: 8vh 0;
}

.mobile-menu-body{
    display: grid;
    height: 60vh;
    grid-template-rows: repeat(7, 1fr);
    align-items: center;
}

.mobile-menu-body > * {
	font-size: 4rem;
    font-weight: 300;
}

/**
 * Content
 */


body {
	background-color: #fff;
	color: #000;
}

a:active {
	opacity: 1;
}

.page a.active {
	opacity: 1;
}

.page a:hover {
	color: #e2457d;
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 3em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(0, 0, 0, 1);
	border: 0;
	height: 1.5px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: .5em;
    vertical-align: bottom;
}

.gallery_image_caption {
    margin-top: .8rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: "TeX Gyre Heros Condensed", Icons;
	font-style: normal;
	line-height: 1.3;
    letter-spacing: 0.07rem;
}

/**
 * Loading Animation
 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1.7rem;
	color: rgba(0, 0, 0, 1);
	font-family: "Favorit Variable", Icons;
	line-height: 1.2;
    letter-spacing: 0.07rem;
	font-style: normal;
	font-weight: 400;
	font-variation-settings: 'slnt' 0;
}

[data-predefined-style="true"] bodycopy a {
	color: #000;
	padding-bottom: 0.05em;
	border-bottom: 0 solid rgba(127, 127, 127, 0.2);
	text-decoration: none;
}

[data-predefined-style="true"] bodycopy a:hover {

}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
}

[data-predefined-style="true"] h1 {
	font-family: "Alte Haas Grotesk", Icons;
	font-style: normal;
	font-weight: 700;
	padding: 0;
	margin: 0;
	font-size: 4.5rem;
	line-height: 1;
	color: #e2457d;
	}

[data-predefined-style="true"] h1 a {
	color: #e2457d;
}

[data-predefined-style="true"] h2 {
	font-family: "Alte Haas Grotesk", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	color: rgba(0, 0, 0, 1);
	font-size: 2.2rem;
	line-height: 1.1;
	}

[data-predefined-style="true"] h2 a {
	color: #000;
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.2rem;
	line-height: 1.3;
	font-family: "Favorit Variable", Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 1);
	letter-spacing: 0.07rem;
	font-variation-settings: 'slnt' 0;
}

[data-predefined-style="true"] small a {
	color: rgb(0, 0, 0);
	border-bottom-width: 0;
}

/**
 * Breakpoints
 */


[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 40px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: aut /*!content_center*/;
	margin-right: auto /*!content_center*/;
	text-align: left /*!text_left*/;
}

[data-css-preset] body {
	background-color: #fff/*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 100%/*!content_center*/;
}

[data-css-preset] .content_padding {
	padding-top: 0rem /*!main_margin*/;
	padding-bottom: 0rem /*!main_margin*/;
	padding-left: 0rem /*!main_margin*/;
	padding-right: 0rem /*!main_margin*/;
}


[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: rgba(0, 0, 0, 0)/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 100%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 1rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -2rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0.5rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -1rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 0 solid rgba(0,0,0,.12);
    outline-offset: -1px;
}

.thumbnails .title {
    margin-top: 1.2rem;
    margin-bottom: 4.0rem;
    font-size: 2.0rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.64);
	font-family: "TeX Gyre Heros Condensed", Icons;
	font-style: normal;
	line-height: 1.3;
}

.thumbnails .tags {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: "TeX Gyre Heros Condensed", Icons;
	font-style: normal;
	line-height: 1.2;
}

.thumbnails .tags a {
	border-bottom: 0;
    color: rgba(0, 0, 0, 0.35);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: 0;
}

/**
 * Site Menu
 */

[data-css-preset] #site_menu_button {
    color: #e2457d;
    line-height: 1;
    font-size: 28px /*!site_menu_button*/;
    padding: 6px;
    line-height: 1;
    background: rgba(33, 32, 46, 0);
    position: fixed;
    top: 1.75rem /*!site_menu_button*/;
	right: 1.75rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
    font-size: 34px;
}

#site_menu_button.custom_icon {
	width: 40px;
    height: auto;
}

#site_menu_button.active {
	display: none;
}

/**
 * Site Menu
 */

#site_menu {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	background: rgba(20, 20, 20, 0.95);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: left;
	display: flex;
	justify-content: flex-start;
}

body.mobile #site_menu {
	width: 100%;
}

#site_menu .page-link a {
	color: rgba(255, 255, 255, 0.75);
}

#site_menu .set-link > a {
	color: rgba(255, 255, 255, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	opacity: .7;
}

#site_menu a.active {
	opacity: .4;
}

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/*
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.45);
    background: transparent;
	font-size: 32px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	top: 1.5rem /*!shop_button*/;
	right: 3rem /*!shop_button*/;
}

#shop_button.text {
    font-family: "TeX Gyre Heros Condensed", Icons;
	font-size: 1.5rem;
    padding: 0;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.45);
	font-style: normal;
    letter-spacing: 0.07rem;
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 36px;
}

/*
 * Shop Product Widget
 */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: "TeX Gyre Heros Condensed", Icons;
	font-size: 1.5rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.65);
    display: block;
    margin-bottom: 1rem;
	font-style: normal;
	font-weight: 400;
}

.shop_product .dropdown {
    font-family: "TeX Gyre Heros Condensed", Icons;
    font-size: 1.5rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 10rem;
    background:  white url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .8rem 2.6rem .9rem 1rem;
	font-style: normal;
	font-weight: 400;
    color: rgba(0,0,0,.75)
}

.shop_product .button {
    font-family: "TeX Gyre Heros Condensed", Icons;
	font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 10rem;
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: .9;
    padding: .8rem 1rem .9rem;
	font-style: normal;
	font-weight: 400;
}

/*
 * Image Zoom
 */

.content img.image-zoom:active {
  opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(0, 0, 0, 0.95) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: "TeX Gyre Heros Condensed", Icons;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
    line-height: 1.5;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.5);
    color: white;
}


/**
 * Quick View Navigation 
 */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
    stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/**
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}

/*
 * Audio Player
 */

.audio-player {
    max-width: 36rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(0, 0, 0, 0.75);
    background: #fff;
    font-size: 1.5rem;
    line-height: 1.3;
    font-family: "TeX Gyre Heros Condensed", Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
    letter-spacing: 0.07rem;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
    width: 1px;
    background-color: rgba(0,0,0,0.15);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(0, 0, 0, 0.85);
}

.audio-player .icon {
    fill: rgba(0, 0, 0, 0.85);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(0,0,0,0.03);
}

.audio-player .progress {
    background: rgba(0,0,0,0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(0, 0, 0, 0.5);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}