/* clases para cargar el modelo en threejs */
.model-1-loader {
  z-index: 5;
  position: absolute;
  height: 100vh !important;
  width: 100vw !important;
  left: 0;
  top: 0;
}

.model_1 {
  width: 100%;
  height: 100%;
  z-index: -1;
}

.model-2-loader {
  position: relative;
  width: 45%;
  height: 100vh;
  z-index: -1;
}

.modelo-alto {
  margin-top: -40%;
}

.modelVision {
  z-index: 1;
  transform: translate(-21vw, -28vh);
  position: absolute;
  width: 70%;
  height: 108vh;
  left: 10%;
  top: 10%;
  transform: scaleX(-1);
}
.modelVision2 {
  z-index: 0;
  transform: translate(-21vw, -28vh);
  position: absolute;
  width: 50%;
  height: 90vh;
  left: 5%;
  top: 0%;
  transform: scaleX(-1);
}

.model-3-loader {
  position: absolute;
  width: 27vw;
  height: 57vh;
}

#renderCanvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* Clases para hacer flotar el modelo */

.avatar {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    /* box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
    transform: translatey(0px);
  }
  50% {
    /* box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2); */
    transform: translatey(-20px);
  }
  100% {
    /* box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
    transform: translatey(0px);
  }
}

/*Media queries para trabajar Mobile*/
@media screen and (max-width: 479px) {
  .model-1-loader {
    width: 402px !important;
    height: 720px !important;
    padding-left: 4rem;
    padding-top: 13rem;
  }
  .fullyImg {
    object-fit: cover !important;
  }
  .model-3-loader {
    position: absolute;
    width: 81vw !important;
    height: 55vh !important;
    transform: translate(1rem, -4rem);
  }
  .model-2-loader {
    display: none;
  }
  .modelVision {
    width: 70vw !important;
    height: 50vh !important;
  }
  .modelVision2 {
    /* width: 75vw !important;
    height: 55vh !important; */
    left: 10% !important;
  }
  .model_1 {
    width: 100%;
    height: 350px;
    padding-top: 0rem;
  }
}

/*Media queries para trabajar en tablets com Ipads*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .model-2-loader {
    display: none;
  }
}

/*Media queries para trabajar Tablets como las Surfaces*/
@media screen and (min-width: 480px) and (max-width: 767px) {
  .model-2-loader {
    display: none;
  }
}

/*Media queries para trabajar en pantallas con viejas resoluciones*/
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .model_1 {
    width: 500px !important;
    height: 80% !important;
  }
}

/*Media queries para trabajar Pantallas de escritorio tablet con la resolucion promedio de HD*/
@media only screen and (min-width: 1282px) and (max-width: 1439px) {
  .model_1 {
    width: 650px !important;
    height: 80% !important;
  }
}

/*Media queries para trabajar en Pantallas de su mayoria laptops*/
@media only screen and (min-width: 1440px) and (max-width: 1599px) {
  .model_1 {
    width: 700px !important;
    height: 80% !important;
  }
}

/*Media queries para trabajar en pantallas pre-FULLHD*/
@media screen and (min-width: 1602px) and (max-width: 1919px) {
  .model_1 {
    width: 750px !important;
    height: 80% !important;
  }
}

/*Media queries para trabajar en Pantallas FULLHD y superior*/
@media screen and (min-width: 1922px) {
  /* .model-1-loader {
    top: -90%;
  } */
  .model_1 {
    width: 80% !important;
    height: 80% !important;
  }
}

/*Media queries para trabajar en Pantallas 4K y superior*/
@media screen and (min-width: 2560px) {
  /* .model-1-loader {
    top: -70%;
  } */
  .model_1 {
    width: 80% !important;
    height: 80% !important;
  }
}