/*
    Design: REPLICA STUDIO 
    Developmnt: hemisferio.space
*/
@import url("basic.css");
@import url("f/font_style.css");

:root {
  --main-bg-color: #FDE2C7;
}
body, html {
    min-height: 100vh;
    /*overflow: hidden;*/
}
body {
    font: normal 400 16px/1 'GT Alpina', serif;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background-color: #FFF;
    background-size: cover;
	color: #191919;
}
header {
    padding: 1em;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    opacity: 0;
    animation: inicio 1.85s 0.25s normal forwards cubic-bezier(.81,.11,.46,.82); 
}
header p {
        line-height: 1.15;
}
@keyframes inicio {
  to {opacity: 1;}
}
h1 {
    display: block;
    color: transparent;
    font-size: .01em;
}
header .intro {
    margin-top: .8em;
    line-height: 1.3;
    /*text-align: center;*/
    /*text-transform: uppercase;*/
    opacity: 0;
    animation: inicio 1.85s 0.45s normal forwards cubic-bezier(.81,.11,.46,.82);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
header .intro img {
    height: 1em;
}
header .intro .sub,
header .intro .sub a {
    position: relative;
}
.sub {
    max-width: 60vw;
    margin: 30vh auto;
}
header .intro .sub img {
    height: 3.72em;
    position: fixed;
}
.ic {
    width: 54px;
    padding-top: 54px;
    height: 0;
    overflow: hidden;
    background: url(img/ic.svg) 50% 50%;
    opacity: 0;
    animation: inicio 1.85s 1.5s normal forwards cubic-bezier(.81,.11,.46,.82);
    position: absolute;
    bottom: 0;
    left: 50%;
}
.icc {
    transform-origin: 50% 50%;
}
.icc:hover {
    /*animation: rotate 3s cubic-bezier(.81,.11,.46,.82) infinite alternate;*/
}
@keyframes rotate {
    to {transform: rotate(720deg);}
  }
.st0{opacity:0}
footer {
    position: fixed;
    padding: 0 1em;
    bottom: 1em;
    left: 0;
    width: 100%;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
footer img {
    height: 1em;
}
footer h2 {
    font-size: .01em;
}
footer .menu{
    max-width: 550px;
    margin: 0 auto;
}
ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 50%;
}
ul li {
    flex-basis: 24.733333%;
    /*max-width: 33.33333%;*/
    display: inline-block;
}
ul li span {
    display: none;
}
ul svg {
    max-height: 1.5em;
}
ul li.m svg {
    margin-top: -0.25em;
}
.sc {
    width: 100%;
    height: 100%;
    display: block;
    /*overflow: hidden;*/
    -webkit-overflow-scrolling: touch;
     scroll-snap-type: y proximity;
    position: relative;
}
section {
    text-align: left;
    height: 100%;
    position: relative;
    padding: 30vh 1em 1em 1em;
    overflow-x: visible;
    overflow-y: hidden;
}
section img {
    max-height: 50vh;
    margin: 15vh;
    margin-bottom: 7em;
}
section div:nth-child(even) {
    text-align: right;
    position: relative;
    z-index: 4;
}
svg a rect {
    opacity: 0;
    transition: all .33s cubic-bezier(.17,.67,.83,.67);
}
svg a:hover .line {
    opacity: 1;
}
#menuu {display: none;}
:root {
    --margin: 40rem;
    --gap: 20rem;
    --column: calc((var(--rvw) * 100 - var(--margin) * 2 - var(--gap) * 9) / 10);
  }
  .column {
    width: calc(var(--column) * 2 + var(--gap));
    height: 100%;
    flex-shrink: 0;
    p {
      margin: 1em 0;
    }
    p.drop-cap {
      .line:first-child {
        .word:first-child {
          height: 1em;
          &::first-letter {
            font-size: 6.85500em;
          }
        }
      }
    }
  }
  
@media screen and (orientation: portrait) {
}
/*480*/
@media screen and (min-width: 30em){
	body {text-rendering: optimizeSpeed;}	
}
/*768*/
@media screen and (min-width: 48em){	
}
/*960*/
@media screen and (min-width: 60em){
    section div:nth-child(odd) {width: 54%;text-align: right;}
    section div:nth-child(odd) img {margin-right: 12vh}
    section div:nth-child(4n) img { margin-right: 25vw;}
    section div:nth-child(8n) { z-index: 2;}
    .sub {
        max-width: 13vw;
        margin: 10vh auto;
    }
}
/*1240*/
@media screen and (min-width: 76em){	
}
/*1440*/
@media screen and (min-width: 90em){
    header p { font-size: 1.5em;}
    header .intro p:first-of-type {max-width: 870px;}
}
/*1280*/
@media screen and (max-width: 80em){	
}
/*1216*/
@media screen and (max-width: 76em){
}
/*960*/
@media screen and (max-width: 60em){
    body {background-size: auto 100%;}
    #menu {display: none}
    #menuu {display: block; padding: 0 .3em; margin: 0 auto;}
    header p {display: block;}
    header span {display: none;}
    footer {z-index: 5;}
    footer h2 {width: 50px}
    footer p {max-width: 70%;}
    section div:nth-child(odd) img {margin-bottom: 12em; padding-left: 40vw;}
    header .intro img, footer img {height: .85em;}
    header .intro .sub img {height: 2.72em;}
}
/*640*/
@media screen and (max-width: 40em){
header {padding: 0.75em;}
    #medalla {width: 17px;}
    footer {padding: 0 .6em;}
    section img {/*max-width: 85%;*/ max-height: initial;margin:0 0 12em;}
}
@media screen and (max-width: 24em) {
    header .intro img, footer img {height: .75em;}
}