a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
mark,
menu,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
rp,
rt,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video,
xmp {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

html,
body {
  height: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
}

b,
strong {
  font-weight: bold;
}

img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}

ul,
ol {
  list-style: none;
}

li {
  display: list-item;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td,
caption {
  font-weight: normal;
  vertical-align: top;
  text-align: left;
}

q {
  quotes: none;
}

q:before,
q:after {
  content: "";
  content: none;
}

sub,
sup,
small {
  font-size: 75%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

svg {
  overflow: hidden;
}

body {
  font: 16px / 1.5 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
}

pre,
code {
  font-family: "DejaVu Sans Mono", Monaco, Consolas, monospace;
}

hr {
  border: 0 #ccc solid;
  border-top-width: 1px;
  clear: both;
  height: 0;
}

h1 {
  font-size: 25px;
}

h2 {
  font-size: 23px;
}

h3 {
  font-size: 21px;
}

h4 {
  font-size: 19px;
}

h5 {
  font-size: 17px;
}

h6 {
  font-size: 15px;
}

ol {
  list-style: decimal;
}

ul {
  list-style: disc;
}

li {
  margin-left: 30px;
}

p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset,
figure {
  margin-bottom: 20px;
}

body {
  background: white;
  color: #333;
  text-align: center;
}

a {
  color: blue;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1 {
  padding-top: 20px;
}

.example-block {
  background: #eee;
  font-size: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 10px 0;
  text-align: center;
}

.grid-container {
  padding-bottom: 20px;
}

.grid-container > hr {
  margin-left: 10px;
  margin-right: 10px;
}

div[class*="push-"] section {
  background: #dec;
}

div[class*="pull-"] section {
  background: #fcd;
}

.dynamic-px-width {
  display: block;
}



/*  My shit!  -------------------------------------------------------------------------------------
    -----------------------------------------------------------------------------------------------
    */
    * {box-sizing: border-box;}

    .grid-container { max-width: 100% !important; padding: 0 !important; background: #090908  }
    section { max-width: 100vw; min-width: 320px; overflow:hidden;   }
    section.vert_section {
      position: relative;
      min-height: 100vh;
      height: 200vw;
    }
    .gotop { 
      position: fixed; 
      top: 100vh; 
      left: calc(50% - 20px); 
      background:rgba(0,0,0,0.2); 
      border-radius: 20px; padding: 10px;
      width: 40px; 
      height: 40px; 
      z-index: 100; 
    }
    .gotop:hover { 
      position: fixed; 
      top: 100vh; 
      left: calc(50% - 20px); 
      background:rgba(0,0,0,0.8); 
      border-radius: 20px; padding: 10px;
      width: 40px; 
      height: 40px; 
      z-index: 100;cursor: pointer;
    }
    section#home {
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#231e19+0,5a5550+100 */
      background: rgb(35,30,25); /* Old browsers */
      background: -moz-linear-gradient(top,  rgb(35,30,25) 0%, rgb(90,85,80) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  rgb(35,30,25) 0%,rgb(90,85,80) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  rgb(35,30,25) 0%,rgb(90,85,80) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#231e19', endColorstr='#5a5550',GradientType=0 ); /* IE6-9 */

      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#231e19+0,5a5550+51,090908+74 */
      background: rgb(35,30,25); /* Old browsers */
      background: -moz-linear-gradient(top,  rgb(35,30,25) 0%, rgb(90,85,80) 51%, rgb(9,9,8) 74%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  rgb(35,30,25) 0%,rgb(90,85,80) 51%,rgb(9,9,8) 74%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  rgb(35,30,25) 0%,rgb(90,85,80) 51%,rgb(9,9,8) 74%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#231e19', endColorstr='#090908',GradientType=0 ); /* IE6-9 */

      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#231e19+0,5a5550+44,090908+59 */
      background: rgb(35,30,25); /* Old browsers */
      background: -moz-linear-gradient(top,  rgb(35,30,25) 0%, rgb(90,85,80) 44%, rgb(9,9,8) 59%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  rgb(35,30,25) 0%,rgb(90,85,80) 44%,rgb(9,9,8) 59%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  rgb(35,30,25) 0%,rgb(90,85,80) 44%,rgb(9,9,8) 59%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#231e19', endColorstr='#090908',GradientType=0 ); /* IE6-9 */


    }
    .content_container {
      position: relative;
      width: 100%;
      max-width: 100%;
      margin: 0;
      min-height: 100vh;
      padding: 0;
      z-index: 2
    }
    
    .manos {
      position: absolute;
      top: 0; left: 0; 
      width: 100%;
      height: 40vh;
      margin: 0; 
      z-index: 10;
    }
    .manos img { max-width: 100%;  max-height: 100%; }
    .am {
      width: calc(40vh * 1.88);
      max-width: 80%;
      margin: 0 auto;
    }
    .bajada { 
      font-family: 'krona_oneregular';
      color: #a78068;
      font-size: 2vmin;
      text-transform: uppercase;
      font-weight: normal;
      letter-spacing: 0.25em;
      width: 100%;
      max-width: calc(40vh * 1.88);
      margin: 0 auto;
      padding: 3vh 0 0;
    }
    .fxme {
      -webkit-transition: all 600ms ease-out;
      -moz-transition: all 600ms ease-out;
      -ms-transition: all 600ms ease-out;
      -o-transition: all 600ms ease-out;
      transition: all 600ms ease-out;
    }
    .fxme.fade_in {
      opacity: 0; 
      -webkit-transition: all 600ms ease-out;
      -moz-transition: all 600ms ease-out;
      -ms-transition: all 600ms ease-out;
      -o-transition: all 600ms ease-out;
      transition: all 600ms ease-out;
    }
    .intro_text { 
      font-family: 'krona_oneregular';
      color: #a78068;
      text-transform: uppercase;
      font-weight: 300;
      letter-spacing: 0.3em;
      width: 100%;
      max-width: 700px;
      margin: 2.7vh auto 0 auto;
    }
    .intro_text { 
      font-size: 0.75vw; 
      text-align: left; 
      width: calc(40vh * 1.88); 
      max-width: 70%;
    }
    .body_text {
      font-family: 'Roboto', sans-serif !important;
      text-transform: none !important;
      letter-spacing: 0.03em !important;
      font-size: 16px;
      
    }
    .page_intro_text { 
      width: 500px; 
      max-width: 100vw;
      padding: 5vmin; 
      margin: 0;
      font-family: 'krona_oneregular';
      font-size: 0.65vw;
      font-weight: normal;
      text-align: left; 
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: #a78068;
    }
    #horz1 .intro_text { max-width: 100%; padding: 0 }
    #page1 .intro_text { 
      text-align: center; 
      width: calc(40vh * 1.88); 
      max-width: 100%; 
      font-size: 0.75vw;
    }
    

    .half_page {height: 50vh}
    .am img { max-width: 100%; }
    .foto {
      position:absolute; top: 0; 
      width: 100vw; height: calc(145.9375vw + 33.333vh); min-height: 100vh;
      background: url(../images/__imagenINICIALfinal.jpg);
      background-position: top center;
      background-size: cover; background-repeat: no-repeat;
      z-index:0; 
    }

    .section,
    .horz_section { position: relative; height: 100vh; } /* has to be pinned until content is totally scrolled */
    .horz_content_container { height: 100vh; display: flex; flex-direction: row; flex-wrap: nowrap; position: relative;} /*has to be horizontaly scrolled */
    .horz_content_page {
      min-width: 100vw;
      max-width: 100vw;
      height: 100vh;
      overflow: hidden;
      position: relative;
    }
    .horz_content_page:after {
      content: "";
      position: absolute; top: 0; right: -3px;
      display: block;
      background: #000000;
      height: 100%; width: 6px;
    } 
    #horz1, #paulina_horz, #vicente_horz, #margarita_horz, #hipolito_horz, #doris_horz, #justiniano_horz { margin-top: -120vh }
    .horz_caption { 
      font-family: 'krona_oneregular';
      color: #c9a48c;
      text-transform: uppercase; 
      font-weight: normal;
      letter-spacing: 0.3em; 
      width: 33vw;  
      line-height: 1.6; 
      text-align: left;
      position: absolute; 
      font-size: 0.65vw;
      top: 5vh; left: 5vw; 
      z-index: 10;
    }
    .left_middle {top: 50% !important; transform: translateY(-50%);}
    .left_bottom {top:auto !important; bottom: 5vmin}
    .right_top {left:auto !important; right: 5vmin}
    .right_bottom {left:auto !important; top: auto !important; right: 5vmin; bottom: 5vmin}
    #caption1 {
      opacity: 0;
      left: calc(100vw + 5vmin);
      z-index: 1000000000000000000000;
      position: fixed;
      mix-blend-mode: difference;
    }
    .vh {height: 100vh}
    
    .ghost_picture {background: rgba(0,0,0,0.8); width: 100%;  }
    .ghost_picture { opacity: 0 }
    
    .big_text {
      font-family: 'krona_oneregular';
      font-size: 75px; text-transform: uppercase; color: #a78068; 
      line-height: 1.6; letter-spacing: 0.3em; font-weight: 600;

      position: absolute;
      top: 50vh; transform: translateY(-50%);
      width: 100%;
      text-align: center;
    }
    .bottom_text {
      position: absolute; 
      bottom: 25vh; 
      left: 50%; 
      width: calc(40vh * 1.88);
      max-width: 70%;
      height: 100vh;
      transform: translateX(-50%);
      display: flex; 
      flex-direction: column; 
      justify-content: center;
      font-family: 'krona_oneregular'; 
      font-size: 0.6vw;
      text-transform: uppercase; 
      color: #a78068; 
      line-height: 1.6; 
      letter-spacing: 0.3em;
      font-weight: 600;
      text-align: left; 
      z-index: 20;
    }


    img.fit {
      width: 100% !important;
      height: 100%;
      object-fit: cover;
      object-position: 50% 50%; /* default value: image is centered*/
    }
    video.fit {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 50%; /* default value: image is centered*/
    }
    .vw_flex   { display: flex; flex-direction: row; justify-content: space-between; }
    .vw_flex.bottom {align-items: flex-end;}
    .vh_flex   {display: flex; flex-direction: column; justify-content: center; min-height: 100vh}
    .vh_flex.top {justify-content: flex-start; }
    .vh_flex.bottom {justify-content: flex-end; }
    .vh_flex_2 { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
    .vh_flex_2 .intro_text { text-align: left; margin: 0; padding: 7vmin; max-width: 300px }
    .w40 { width: 40vw }
    .w50 { width: 50vw }
    .w33 { width: 33vw }
    .w25 { width: 25% }
    .h50 { width: calc(50vh * 1.5);}
    .h50 img { width: auto; height: 50vh; }
    .h100 { width: 66.6vh; overflow: hidden; }
    .h100 img { width: auto; height: 100%; }
    .figure_916 {width: 100%; /*height: calc(25vw * 1.5)*/}
    .figure_916 img{ width: 100%; height: 100%; }
    .figure_169 {width: 100%; height: calc(25vw * 0.67)}
    .figure_169 img{ width: 100%; height: 100%; }
    .bottom {bottom: 0}
    .vert_video {
      width:73.68vh;
    }
    
    .thirdw {
      width: 38vw;
    }
    .smallvid {
      height: 48vh;
      width: 48vw;
    }
    #theend { position: relative; }
    .end_picture {
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      width: 100%;
    }
    .end_layout {
      position: relative;
      text-align: left;
      z-index: 2;
    }
    .end_layout_1 {
      position: absolute; 
      top: 0;
      left: 0;
      width: 300px;
      max-width: 25vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .end_menu {
      display: flex;
      flex-direction: column;
      font-family: 'krona_oneregular';
      color: #a78068;
      font-size: 22px;
      font-size: 0.6vw; line-height: 2;
      text-transform: uppercase;
      font-weight: normal;
      letter-spacing: 0.3em;
      padding: 5vmin
    }
    .end_menu a {color: inherit;}
    .end_layout_2 {
      width: 300px;
      max-width: 25vw;
      min-height: 100vh;
      color: #a78068;
      font-size: 16px;
      margin:  auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .end_layout_3 {
      position: absolute;
      top: 0;
      right: 0;
      width: 300px;
      max-width: 25vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-end;
    }
    .end_title {
      font-family: 'krona_oneregular';
      color: #a78068;
      font-size: 13px;
      text-transform: uppercase;
      font-weight: normal;
      letter-spacing: 0.3em;
      padding: 5vmin
    }
    .space_between {
      justify-content: space-between;
    }
    .spaced_content {
      padding: 25vh 0;
    }
    .end_logo {
      font-family: 'krona_oneregular';
      color: #a78068;
      text-transform: uppercase;
      font-weight: normal;
      letter-spacing: 0.3em;
      margin-bottom: 3vh;
      font-size: 10px;
      margin: 5vh auto;
      width: 100%
    }
    .credits {
     font-family: 'krona_oneregular';
      color: #a78068;
      text-transform: uppercase;
      font-weight: normal;
      letter-spacing: 0.3em;
      margin-bottom: 3vh;
      font-size: 10px;
      margin: 0 auto;
      width: 100%; 
    }
    .go_top {
      font-family: 'krona_oneregular';
      color: #a78068;
      text-transform: uppercase;
      font-weight: 100;
      letter-spacing: 0.3em;
      margin-bottom: 3vh;
      font-size: 9px;
      transform: rotate(-90deg);
      transform-origin: left top;     
      cursor: pointer; 
      white-space: nowrap;

    }
    .go_top:after {
      content: '';
      position: absolute;
      width: 5vmin; height: 4px;
      border-bottom: 1px solid #a78068;
      -webkit-transition: width 3000ms ease-out;
      -moz-transition: width 3000ms ease-out;
      -ms-transition: width 3000ms ease-out;
      -o-transition: width 3000ms ease-out;
      transition: width 3000ms ease-out;

    }
    .go_top:hover:after {
      content: '';
      position: absolute;
      width: 15vmin; height: 4px;
      border-bottom: 1px solid #a78068;
      -webkit-transition: width 3000ms ease-out;
      -moz-transition: width 3000ms ease-out;
      -ms-transition: width 3000ms ease-out;
      -o-transition: width 3000ms ease-out;
      transition: width 3000ms ease-out;

    }


    .header { 
      background: rgba(0,0,0,0.85);
      font-family: 'krona_oneregular';
      color: #a78068;
      text-transform: uppercase;
      font-weight: 100;
      letter-spacing: 0.03em;
      font-size: 9px;
      line-height: 30px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      position:relative;
      top: 0; 
      left: 0; 
      right: 0; 
      z-index: 1000;
    }
    .top_ojo {
      position: relative; 
      padding: 0 10px; 
      display: flex; 
      flex-direction: row; 
      justify-content: space-between; margin-bottom: -15px; padding-top: 15px; z-index: 2000 }
    .logo_ojo {height: 30px; }
    .logo_ojo img {height: 24px; margin: 3px 0 }
    .share {position: relative; height: 30px; display: flex; flex-direction: row; justify-content: space-between;  }
    .share div {height: 24px; width: 24px; margin-left: 20px}
    .share svg {
      height: 24px;
      max-height: 24px;
      cursor: pointer;
    }
    .home_bottom {
      position: fixed;
      z-index: 1000;
      left: 0;
      bottom:0;
      width: 100%;
      padding: 20px;
      font-family: 'krona_oneregular';
      color: #a78068;
      text-transform: uppercase;
      font-weight: 100;
      letter-spacing: 0.03em;
      font-size: 9px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      color: #a78068;
    }.home_bottom.hidden { opacity: 0 }
    .home_credits {
    } 

    .scrollme {
      max-height: 50vh; overflow: hidden; min-height:25vh
    }
    .edad { font-size: 26px; font-weight: 100; letter-spacing: 0.03em; text-transform: none; }
    a { color: #a78068; text-decoration: underline;}

    .home_menu { 
      display: flex;
      flex-direction: row;
      align-items: center;
    }.home_menu.active {}

    .home_menu a { padding: 0 6px; text-decoration: none; letter-spacing: 0;  opacity: 0; }
    .home_menu.active a { padding: 0 6px; text-decoration: none; letter-spacing: 0;  opacity: 1; }












   

    @media (max-height: 768px) and (orientation: landscape){
      #page1 .intro_text { 
        text-align: center; 
        width: calc(40vh * 1.88); 
        max-width: 100%; 
        font-size: 0.70vw;
      }
      .intro_text { 
        /*font-size: 0.70vw; */
        text-align: left; 
        width: calc(40vh * 1.88); 
        max-width: 70%;
      }
      .horz_caption { 
        font-size: 0.60vw;
        top: 5vh; left: 5vh; 
      }
      .bottom_text {
        /*font-size: 0.60vw; */
       }
      .page_intro_text { 
        font-size: 0.60vw;
      }
      .end_layout_2 {
        max-width: 42vw;
        font-size: 10px;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .end_logo {
        font-family: 'krona_oneregular';
        color: #a78068;
        text-transform: uppercase;
        font-weight: normal;
        letter-spacing: 0.3em;
        margin-bottom: 3vh;
        font-size: 8px;
        margin: 4vh auto
      }
      .end_logo img { max-width: 220px }
      .credits { font-size: 8px }
    }
    @media (max-width: 1300px){
      #page1 .intro_text { 
        font-size: 9.7425px;
        text-align: center; 
        width: calc(40vh * 1.88); 
        max-width: 100%; 
      } 
      .intro_text { 
        font-size: 9.7425px;
        text-align: left; 
        width: calc(40vh * 1.88); 
        max-width: 70%;
      }
      .horz_caption { 
        font-size: 8.4565px;
        top: 5vh; left: 5vh; 
      }
      .bottom_text {
       font-size: 8.4565px; 
      }
      .page_intro_text { 
        font-size: 8.4565px;
      }
      .end_title {
        font-size: 10px;
        padding:10vmin 0 0 5vmin;
      }
    }




  /*--------------------- Ipad portrait ---------------------------------------------------------
    ---------------------------------------------------------------------------------------------
    ---------------------------------------------------------------------------------------------
    */
  
    @media (max-width: 768px) and (orientation: portrait ) {
      .header {
        font-size: 8px;
      }
      .home_menu.active a {
        padding: 0 4px;
      }
      .horz_caption {
        font-size: 8.4565px;
        top: 8vh;
        left: 5vh;
      }
      .page_intro_text {
        padding: 7vh 5vw 5vh 5vw;
      }
      #page1 .intro_text { 
        text-align: center; 
        width: calc(40vh * 1.88); 
        max-width: 80%; 
        font-size: 8px; 
      } 
      #horz1 .intro_text { max-width: 80%; padding: 0 }
      .ghost_picture { opacity: 0; height: 180vh }
      .ghost_picture img.fit {
        width: 100% !important;
        height: 100%;
        object-fit: scale-down;
        object-position: 50% 80%;
      }
      .big_text {
        font-size: 7.5vw;
      }
      .horz_content_page.keep_width { min-width: 177vh }
      .keep_width .w25 {
        width: 59vw;
      }
      .w40 {
        width: 100vw;
      }
      .h50 {
        width: 100vw;
      }
      .vert_video {
        width: 100vw;
      }
      .smallvid {
        height: auto;
        width: 100vw;
      }
      .horz_content_page.keep_width { min-width: 177vh }

      .horz_content_page {
        min-width: 200vw;
        max-width: 200vw;
      }
      .horz_content_page.video {
        min-width: 100vw;
        max-width: 100vw;
      }
      .vw100 {
        max-width: 100vw;
        min-width: 100vw;
      }
      .end_layout_1 {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        max-width: 30vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .end_title {
        font-size: 10px;
        padding:7vmin 0 0 5vmin;
      }
      .end_menu {
        font-size: 8px;
        padding: 0 0 5vmin 5vmin;
      }

      .end_layout_2 {
        width: auto;
        max-width: 40vw;
        min-height: 100vh;
        color: #a78068;
        font-size: 15px;
        margin: auto;
      }

      .end_layout_3 {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        max-width: 30vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
      }

      .credits {
        font-family: 'krona_oneregular';
        color: #a78068;
        text-transform: uppercase;
        font-weight: normal;
        letter-spacing: 0.3em;
        margin-bottom: 3vh;
        font-size: 10px;
        margin: 0 auto;
      }

    }






















    @media (max-width: 768px) {
      /*.big_text {
        font-size: 9.37vw;
      }
      .bottom_text {
        font-size: 1.2666vw;  
      }*/
      section.vert_section {
        position: relative;
        min-height: 100vh;
        height: 280vh;
      }
      .spacebajada {display: none;}
      .foto {
        position:absolute; top: 0; 
        width: 100vw; height: calc(145.9375vw + 100vh); min-height: 100vh;
        background: url(../images/__imagenINICIALfinal_m.jpg);
        background-position: center center;
        background-size: cover; background-repeat: no-repeat;
        z-index:0; 
      }
      #horz1, #paulina_horz, #vicente_horz, #margarita_horz, #hipolito_horz, #doris_horz, #justiniano_horz { margin-top: -120vh }

      
    }



    @media (max-width: 450px) and (orientation: portrait){
      /*.spacebajada {display: none;}*/
      .horz_content_page.keep_width { min-width: 177vh }
      .keep_width .w25 {
        width: 100vw;
      }
      .horz_content_page {
        min-width: 200vw;
        max-width: 200vw;
      }
      .horz_content_page.video {
        min-width: 100vw;
        max-width: 100vw;
      }
      .vert_video {
        width: 100vw;
      }
      .vw100 {
        max-width: 100vw;
        min-width: 100vw;
      }

      .end_layout_1 {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        max-width: 39vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .end_title {
        font-size: 7px;
        padding:7vh 0 0 5vmin;
      }
      .end_menu {
        font-size: 7.2px;
        padding: 0 0 5vmin 5vmin;
      }
      .end_menu a {margin-bottom: 1.5em; letter-spacing: 0.2em}

      .end_layout_2 {
        width: auto;
        max-width: 55vw;
        min-height: 100vh;
        color: #a78068;
        font-size: 13px;
        margin-left: 40vw;
      }

      .end_layout_3 {
        position: absolute;
        top: 0;
        right: auto; left: 5vw;
        width: auto;
        max-width: 30vw;
        height: 50vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
      }
      .credits {
        margin-bottom: 3vh;
        font-size: 7px;
        margin: 5vh auto;
      }
    }

    @media (max-width: 375px) and (orientation: portrait){
      #hom_btn { display: none; }
      .header {
        font-size: 7.5px;
      }

    }






















    img.wide_pic {width: 100%}



    .wip { border:pink 1px dashed;  }
    .wip * { border:red 1px dashed; }
    .wip * * { border:blue 1px dashed; }






























/* ----------- MOBILE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}