@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

* {
  margin: 0;
  padding: 0;
}

html,
body {
  background-color: #292932;
  overflow-x: hidden;
  max-width: 100vw;
}

a:link, a:visited, a.card-link a.nav-link, .nav-link:visited, .nav-link {
  color: rgb(255, 136, 0)!important;
  text-decoration: none;
} 

a:hover{
  color: rgb(224, 192, 156)!important;
}

.full {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.full img {
  width: 90%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#number1 {
  margin: auto;
}

.webgl {
  overflow: hidden;
}

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 5.5vw;
  color: aliceblue;
  z-index: 100;
}

/* ARROWS */
/* ARROWS */
.arrows {
  width: 60px;
  height: 72px;
  position: absolute;
  left: 50%;
  bottom: 20px;
  overflow: hidden;
}

.arrows path {
  stroke: #ff7b00;
  fill: transparent;
  stroke-width: 2px;
  animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite;
}

@keyframes arrow {
  0% { opacity: 0; }
  40% { opacity: 1 }
  80% { opacity: 0 }
  100% { opacity: 0 }
}

.arrows path.a1 {
  animation-delay: -1s;
  -webkit-animation-delay: -1s;
}

.arrows path.a2 {
  animation-delay: -0.5s;
  -webkit-animation-delay: -0.5s;
}

.arrows path.a3 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
/* TERMINA ARROWS */
/* TERMINA ARROWS */

/* STORMTROOPER */
#storm {
  position: fixed;
  left: 10px;
  bottom: 10px;
  width: 15vw;
  height: 15vw;
  overflow: hidden;
  overflow-x: hidden;
}

#footer {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 14px;
  color: aliceblue;
  background-color: #191922;
  padding: 20px;
}

.twoimages {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.studioIMG {
  width: 105% !important;
  margin: -10px;
  z-index: 1;
  overflow-x: hidden;
}

.studioTEXTOS {
  color: aliceblue;font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 2.5vw;
  height: 100%;
  position: absolute;
  z-index: 10;
  top: 5%;
  left: 5%;
  text-shadow: -2px 1px 0px rgba(0,0,0,0.6);
}

.imdbLOGO {
  max-width: 10vw;;
}

.reel-rotacion {
  position: relative;
  max-width: 100%;
  z-index: 1;
}

.reel-icono {
  max-width: 35%;
  position: absolute;
  z-index: 3;
}

/* PARA MOVILES */
@media all and (max-width:768px) {
  .arrows {
    bottom: 120px;
  }
  #storm {
    width: 40vw;
    height: 40vw;
  }
  .studioTEXTOS {
    font-size: 5.5vw;
    height: 100%;
  }
         
}



/* LOADING BAR */

#labelPreparando {
  display: block;
  position: relative;
  left: 5%;
  top: 60%;
  color: aliceblue;
}

#loading-bar {
  position: absolute;
  top: 65%;
  width: 60%;
  left: 20%;
  height: 1px;
  background: rgb(255, 94, 0);
  transform: scaleX(0.0);
  transform-origin: top left;
  transition: transform 0.5s;
  will-change: transform;
}

#loading-bar.ended {
  transform-origin: top right;
  transition: transform 1.5s ease-in-out;  
}

#loading-screen {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 1;
transition: 1s opacity;
}

#loading-screen.fade-out {
  opacity: 0.00;
}

/* LOADER */
/* LOADER */
#positionLoader {
  top: 40%;
  margin: 0 49vw;
  position: relative;
}
#loader {
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  display: inline-block;
  border-top: 4px solid #FFF;
  border-right: 4px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  position: absolute;
}
#loader::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  border-bottom: 4px solid rgb(255, 94, 0);
  border-left: 4px solid transparent;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* PARA MOVILES LOADER */
@media all and (max-width:768px) {
  #positionLoader {
    margin: 0 35vw;
  }
  #loader {
    width: 30vw;
    height: 30vw;
  }
  #loader::after {
    width: 30vw;
    height: 30vw;
  }
         
}