/* 01 - SETTINGS
Used with preprocessors and contain font, colors definitions, etc. 
In this layer is common define the variables that can customize the template.
*/

:root {
  --violet-01: #693a91;
  --violet-02: #522d78;
  --violet-03: #3b215e;
  --violet-04: #241445;
  --violet-05: #0d072b;
  --border-color: black;
  --beige-01: beige;
  --white: white;
}

/* 02 - TOOLS
Globally used mixins and functions. This layer is only used if we use a preprocessor as SASS
*/

/* 03 - GENERIC
 reset and/or normalize styles, box-sizing definition, etc. 
 It is important to note that this is the first layer of the triangle that generates CSS.
 */

* {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
 }

b,
strong {
    font-weight: 600;
    font-style: italic;
  }
body {
  margin: 0;
  padding: 0;
  background-size: contain;
  background-position: center center;
  background-color: black;
  line-height: 1;
  overflow: visible;
  overscroll-behavior: none;
  scroll-behavior: auto;
}

/* 04 - ELEMENTS 
reset and/or normalize styles, box-sizing definition, etc. 
It is important to note that this is the first layer of the triangle that generates CSS.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Obviously", sans-serif;
  font-weight: 800;
  color: white;
  margin: 0;
}

p {
  font-size: x-large;
  font-family: '';
  font-weight: 200;
  line-height: 1;
  margin: 0;  
}

img {
  object-position:  contain;
}

/* 05 OBJECTS */


/* 06 COMPONENTS */

/* General */

.scene {
  position: relative;
}

.is-fixed {
  position: fixed;
}

.is-top-front {
  z-index: 3;
}
.scene-label {
  position: absolute;
  left:0px;
  bottom:5%;
  width: 20%;
  height: 4rem;
  border: 2px var(--border-color) solid;
  background-color: var(--beige-01);
  display: flex;
  align-items: center;
  justify-content: center;
}

.scene-title {
  margin: 10px;
  color: var(--brown-01);
  text-align: center;
  font-family: 'mostra-nuova', 'sans-serif';
  font-weight:700;
  font-size: 2rem;
}


.info {
  opacity: 1.0;
  display: none;

}

.text-container {
  width: 20%;
  height: 20%;
  text-align: center;
  }

  .city-label  {
    background-color: lightgoldenrodyellow;
  }

  .dato-f {
    width: 100%;
    height: 100%;
    left: 30%;

  }

/* Specific elements */

.v-fake-div {
  position: absolute;
  top:0vh;
  /*background-color: rgba(231, 33, 205, 0.377);*/
  width: 100vw;
  height: 100vh;
  overflow-x:hidden;
  overflow-y: hidden;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  /*background-color: rgba(255, 105, 180, 0.301);*/
}

.h-scroll {
  background-color: rgb(3, 3, 43);
  overflow-y:hidden;
  overflow-x: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.v-fake-div::-webkit-scrollbar {
  display: none;
}

.content::-webkit-scrollbar{
  display: none;
}

::-webkit-scrollbar{
  display: none;
}

.v-fake-div-inner {
  position: absolute;
  /*background-color: rgba(231, 33, 205, 0.781);*/
}

/* Hide scrollbar for IE, Edge and Firefox */
.v-fake-div {
  position: absolute;
  width: 100%;
  /*-ms-overflow-style: none;  /* IE and Edge */
 /* scrollbar-width: none;  /* Firefox */
}

.scene-label {
  background-color: wheat;
}

.title {
  font-size: 5rem ;
  color:white;
  text-align: center;
}

.info-text{
  color:white;
  font-size: 1rem;
} 

.bg-mountain {
  background-image: url('../assets/MONTANAS.png');
  background-size: 191.3% 65%;
  background-position: 0% 100%;
  background-repeat: repeat-x;
}

.bg-img {
  position: absolute;
  object-fit: fill;
  bottom: -6%;
  left: auto;
  right: auto;
  width: 100%;
  height: 177%;
}

.bg-img-2{
  position: absolute;
  object-fit: fill;
  bottom: -6%;
  left: auto;
  right: -14%;
  width: 119%;
  height: 177%;
}

.front-img {
  position: absolute;
  object-fit: fill;
  bottom: -8%;
  left: 0%;
  right: auto;
  width: 110%;
  height: 194%;

}

.front-img-2 {
  position: absolute;
  object-fit: fill;
  bottom: -8%;
  left: 0%;
  right: auto;
  width: 131%;
  height: 194%;

}



@keyframes bg-mov {
  0% {background-position-x: 0%;}
  100% {background-position-x: -100%;}
}

.cars {
  /*
  position: absolute;
  background-size: 100%;
  background-color: greenyellow;
  background-position:70% 0%;
  bottom: -6%;
  width: 105%;
  height: 28.51%;*/
    position: absolute;
    background-size: 50% 50%;
    /* background-color: greenyellow; */
    background-position: 100% 0%;
    bottom: -35%;
    width: 210%;
    height: 57%;
    animation-name: bg-mov;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.cars-1 {
  background-image: url(../assets/CARROS-1.png);
  background-repeat: repeat-x;
}

.car-img {
  position: absolute;
  object-fit: fill;
  bottom: -6%;
  width: 105%;
  height: 33.73611111%;
}

@keyframes h-full-move {
  0% {left: 50%;}
  50% {left: 10%;}
  100% {left: 50%;}
}

@keyframes rot-sm {
  0% {
    transform: rotate(0deg);
    -webkit-transform:rotate(0deg);
  }
  50% {
    transform: rotate(20deg);
    -webkit-transform:rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
    -webkit-transform:rotate(0deg); 
  }
}

@keyframes rot-lg {
  0% {
    transform: rotate(-50deg);
    -webkit-transform:rotate(-50deg);
  }
  50% {
    transform: rotate(50deg);
    -webkit-transform:rotate(50deg);
  }
  100% {
    transform: rotate(-50deg);
    -webkit-transform:rotate(-50deg); 
  }
}

@keyframes rot-lg-i {
  0% {
    transform: rotate(50deg);
    -webkit-transform:rotate(50deg);
  }
  50% {
    transform: rotate(-50deg);
    -webkit-transform:rotate(-50deg);
  }
  100% {
    transform: rotate(50deg);
    -webkit-transform:rotate(50deg); 
  }
}

.helicopter {
  position: absolute;
  width: 11%;
  height: 11%;
  top: 5%;
  left: 100%;
  animation-name: h-full-move;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

.is-helicopter-light {
  left: -93%;
  top: 85%;
  width: 100%;
  transform-origin: 100% 0%;
  position: absolute;
  transform: rotate(30deg);
  animation-name: rot-sm;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  
}

.back-light {
    position: absolute;
    width: 7%;
    height: 67%;
    top: 0%;
    left: 26%;
    transform-origin: 50% 100%;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

.del-1{
  animation-delay: 0ms;
  animation-name: rot-lg;
}

.del-2{
  animation-name: rot-lg-i;
}


.is-front-0 {
  z-index: 3;
}

.is-front-1 {
  z-index: 2;
}

.dato {
  opacity: 0;
}

/* 07 UTILITIES */

.is-flex {
    display: flex;
}

.is-fill {
  width: 100%;
  height: 100%;
  /*background-color: blue;*/
}

.is-fill-v {
  width: 100vw;
  height: 100vh;
}

.entradilla {
  position: relative;
  z-index: 1;
  padding-top: 20vh;
  width: 100vw;
  min-height: 100vh; 
  height: fit-content;
}

.absolute-fill {
  top:0%;
  bottom:0%;
  left: 0%;
  /*right: 0%;*/
  
  height: 100vh;
  width: 177vh;
  
}

.aspect {
  padding-right: 177vh;
  height: 100vh;
}


.is-05-to-01 {
  background-image: linear-gradient(to bottom,var(--violet-05),var(--violet-01));

}

.sample-img {
  opacity: 50%;
  position: absolute;
  object-fit: fill;
  bottom: 6%;
  left: auto;
  right: auto;
  width: 98%;
  height: 100%;
}

.scroll-img {
  margin: 0;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 10vw;
  overflow: visible;
}

.entradilla-container {
  width: 70%;
  line-height: 1.6;
}

.decor-img {
  margin: 0;
  position: absolute;
  bottom: 0%;
  right: 10%;
  width: 20vw;
  overflow: visible;

}

p {
  color: white;
    font-size: 1.4rem;
    line-height: 1.6;
    font-family: 'Open Sans';
}

.abs-center{
  position: absolute;
  display: block;
  left: auto;
  bottom: auto;
  top: auto;
  right: auto;
}

.is-flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}

.pt-img {
  position: absolute;
  display: block;
  width: 30%;
  object-fit: cover;
}

.back-pt-img {
  position: absolute;
  display: block;
  width: 100%;
  object-fit: cover;
  z-index: 0;
}

.dato-f {
  opacity: 0;
  z-index: 10;
}

.dato-f-1 {
  left: 10%;
  top: 10%;
}

.dato-f-2 {
  left: 30%;
  top: 30%;
}

.dato-f-3 {
  left: 50%;
  top: 50%;
}

.dato-f-4 {
  left: 70%;
  top: 70%;
}

.final-bg {
  background-color: var(--violet-04);
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9;
}




/*--- Especific -- */
.is-bg {
  width: 100%;
  height: 100%;
}

.is-portrait {
  overflow: visible;
}

.is-full {
  /*Fill is parent*/
  width: 100%;
  height: 100%;
}

.is-column {
  flex-direction: column;
}

.is-row {
  flex-direction: row;
}

.is-violet-01 {
  background-color: var(--violet-01);
}

.is-violet-02 {
  background-color: var(--violet-02);
}

.is-violet-03 {
  background-color: var(--violet-03);
}

.is-violet-04 {
  background-color: var(--violet-04);
}

.is-violet-05 {
  background-color: var(--violet-05);
}

.img-scene {
  object-fit: fill;
}

.is-bottom {
  bottom: 0%;
}

.is-h-fill {
  width: 100%;
}

.is-v-fill {
  height: 100%;
}

.is-v-fill-v {
  height: 100vh;
}

.is-v-ov-7 {
  height: 107%;
  bottom: -7%;
  overflow: hidden;
}

.is-v-87 {
  position: absolute;
  height: 81.60263067%;
}

.is-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.is-no-overflow {
  overflow:hidden;
}

.is-absolute {
  position: absolute;
}

.is-white {
  background-color: white;
}

.is-gray {
  background-color: gray;
}

.is-h-flex {
  display: flex;
  flex-direction: row;
} 

.is-r-flex {
  display: flex;
  flex-direction: row;
}

.is-top-mg-sm {
  top: 5%;
}

.is-top-mg-sm-2 {
  top: 10%;
}

.is-left-mg-md {
  left: 45%;
}

.is-left-mg-md-2 {
    left: 50%;
}

.is-left-mg-sm {
  left: 20%;
}

.is-left-0 {
  left: 0%;
}

.is-left-1 {
  left: 20%;
}

.is-left-2 {
  left: 40%;
}

.is-left-3 {
  left: 60%;
}

.is-left-4 {
  left: 80%;
}

.is-left-3-1 {
  left: 0%;
}

.is-left-3-2 {
  left: 33%;
}

.is-left-3-3 {
  left: 66%;
}

.is-left-5-1 {
  left: 0%;
}

.is-left-5-2 {
  left: 20%;
}

.is-left-5-3 {
  left: 40%;
}

.is-left-5-4 {
  left: 60%;
}

.is-left-5-5 {
  left: 80%;
}

.is-left-5-6 {
  left: 100%;
}

.is-h-center {
  left: auto;
  right: auto;
}

.is-sm {
  width: 21vw;
  height: 20vh;
}

.img-dato {
  object-fit: scale-down;
}
.dato{
  z-index: 2;
}
.is-w-1 {
  width: 100%;
}

.is-w-2 {
  width: 50%;
}

.is-w-4 {
  width: 25%;
}

.is-h-1 {
  height: 100%;
}

.is-h-2 {
  height: 50%;
}

.is-h-3 {
  height: 33%;
}

.is-top {
  top:0%;
  object-position: 0% 0%;
} 

.is-black {
  background-color: black;
}

.h-scene-5 {
  padding-left: -30%;
}

.is-p-10 {
  padding: 30px;
}

.is-ov-hidden {
  overflow: hidden;
}

.is-left-bg-1{
  background-position-x: -177vh;
}

.is-left-bg-2 {
  background-position-x: -354vh;
}

.is-left-bg-3 {
  background-position-x: -531vh;
}

.is-z-1 {
  z-index: 1;
}

.is-z-2 {
  z-index: 2;
}

.is-z-3 {
  z-index: 3;
}

.is-z-4 {
  z-index: 4;
}

.is-z-5 {
  z-index: 5;
}

.is-z-6 {
  z-index: 6;
}

.is-z-7 {
  z-index: 7;
}

@media screen and (max-width: 968px) and (orientation: portrait){

  .title{
    font-size: 3rem;
  }
  .is-ov-7 {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0%;
    overflow: hidden;
  }

  .is-bottom {

    bottom: 0px;
  }

  .dato {
    opacity: 0;
  }

  .is-sm {
    width: 60vw;
    height: 25vh;
  }

  .scene-label {
    position: sticky;
    left:10vw;
    right: 10vw;
    bottom:2%;
    width: 80vw;
    height: 4rem;
    border: 2px var(--border-color) solid;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }

  .is-r-flex {
    display: flex;
    flex-direction: column;
  }

  p {
    color: white;
      font-size: 0.7rem;
      line-height: 1.6;
      font-family: 'Open Sans';
  }

  .decor-img {
    margin: 0;
    position: absolute;
    bottom: 0%;
    right: 10%;
    width: 40vw;
    overflow: visible;
  
  }

  .pt-img {
    position: absolute;
    display: block;
    width: 80%;
    object-fit: cover;
  }

  .back-pt-img {
    height: 130vh;
    width: 100vw;
    object-fit: contain;
    object-position: 0% 80%;
  }
  
  .scroll-img {
    margin: 0;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 50vw;
    overflow: visible;
  }

  .entradilla-container {
    width: 100%;
    padding: 20px;
    line-height: 1.6;
  }

  .dato-f {
    position: fixed;
    width: 60vw;
    left: 20vw;
    right: 20vw;
    z-index: 10;
    object-position: 50% 50%;
  }

  .dato-bf {
    position: fixed;
    width: 60vw;
    left: 20vw;
    right: 20vw;
    z-index: 10;
    object-position: 50% 50%;
  }

  .dato-f-1 {
    top: 1vh;
  }
  
  .dato-f-2 {
    top: 22vh;
  }
  
  .dato-f-3 {
    top: 45vh;
  }
  
  .dato-f-4 {
    top: 70vh;
  }
  
  
}