.container-img {

  perspective: 800px;

}



.card-image-in {

  width: 110px;

  height: 110px;

  transform-style: preserve-3d;

  position: relative;

  transition: transform 0.75s cubic-bezier(0.4, 0.03, 0.5, 0.9);

}



.img-cards {

  width: 110px;

  position: absolute;

  object-fit: cover;

  outline: 2px solid transparent;

  outline-offset: 5px;

  backface-visibility: hidden;

}



.img-cards:nth-child(2),

.card-image-in:hover {

  transform: rotate3d(1, 1, 0, 180deg);

}



/* Diseño de underline*/

.underline-hover {

  position: relative;

  overflow: hidden;

  display: inline-block;

  text-decoration: none;

  color: white;

}



.underline-hover:after {

  content: "";

  position: absolute;

  bottom: 0;

  left: -100%;

  width: 100%;

  height: 2px;

  background: white;

  transition: left 0.8s;

}



.underline-hover {

  position: relative;

  overflow: hidden;

  display: inline-block;

  text-decoration: none;

  color: white;

}



.underline-hover:after {

  content: "";

  position: absolute;

  bottom: 0;

  left: -100%;

  width: 100%;

  height: 2px;

  background: white;

  transition: left 0.8s;

}



.underline-hover:hover:after {

  left: 0;

}



/* Tienda */

.underline-hoverTienda {

  position: relative;

  overflow: hidden;

  display: inline-block;

  text-decoration: none;

  color: #ee7f00;

}



.underline-hoverTienda:after {

  content: "";

  position: absolute;

  bottom: 0;

  left: -100%;

  width: 100%;

  height: 2px;

  background: #ee7f00;

  transition: left 0.8s;

}



.underline-hoverTienda {

  position: relative;

  overflow: hidden;

  display: inline-block;

  text-decoration: none;

  color: #ee7f00;

}



.underline-hoverTienda:after {

  content: "";

  position: absolute;

  bottom: 0;

  left: -100%;

  width: 100%;

  height: 2px;

  background: #ee7f00;

  transition: left 0.8s;

}



.underline-hoverTienda:hover:after {

  left: 0;

}



/* Fin diseño de underline */



.boton-hoverOHS {

  color: black !important;

  background-color: #fff !important;

  box-shadow: inset 0 0 0 0 rgba(223, 81, 0, 0.6) !important;

  transition: ease-out 1s !important;

  outline: none !important;

}



.boton-hoverOHS:hover {

  box-shadow: inset 300px 0 0 0 rgba(223, 81, 0, 0.6) !important;

  color: #fff !important;

}



.boton-hoverBPO {

  color: black !important;

  background-color: #fff !important;

  box-shadow: inset 0 0 0 0 rgba(0, 129, 199, 0.6) !important;

  transition: ease-out 1s !important;

  outline: none !important;

}



.boton-hoverBPO:hover {

  box-shadow: inset 300px 0 0 0 rgba(0, 129, 199, 0.6) !important;

  color: #fff !important;

}



.boton-hoverSAT {

  color: black !important;

  background-color: #fff !important;

  box-shadow: inset 0 0 0 0 rgba(102, 59, 218, 0.6) !important;

  transition: ease-out 1s !important;

  outline: none !important;

}



.boton-hoverSAT:hover {

  box-shadow: inset 300px 0 0 0 rgba(102, 59, 218, 0.6) !important;

  color: #fff !important;

}



.boton-hoverH2O {

  color: black !important;

  background-color: #fff !important;

  box-shadow: inset 0 0 0 0 rgba(229, 53, 23, 0.6) !important;

  transition: ease-out 1s !important;

  outline: none !important;

}



.boton-hoverH2O:hover {

  box-shadow: inset 300px 0 0 0 rgba(229, 53, 23, 0.6) !important;

  color: #fff !important;

}



.boton-hoverIST {

  color: black !important;

  background-color: #fff !important;

  box-shadow: inset 0 0 0 0 rgba(0, 68, 148, 0.6) !important;

  transition: ease-out 1s !important;

  outline: none !important;

}



.boton-hoverIST:hover {

  box-shadow: inset 300px 0 0 0 rgba(0, 68, 148, 0.6) !important;

  color: #fff !important;

}



.boton-hoverAprendiendo {

  color: black !important;

  background-color: #fff !important;

  box-shadow: inset 0 0 0 0 rgba(0, 138, 148, 0.6) !important;

  transition: ease-out 1s !important;

  outline: none !important;

}



.boton-hoverAprendiendo:hover {

  box-shadow: inset 300px 0 0 0 rgba(0, 138, 148, 0.6) !important;

  color: #fff !important;

}



.boton-hoverMRPS {

  color: black !important;

  background-color: #fff !important;

  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.6) !important;

  transition: ease-out 1s !important;

  outline: none !important;

}



.boton-hoverMRPS:hover {

  box-shadow: inset 300px 0 0 0 rgba(0, 0, 0, 0.6) !important;

  color: #fff !important;

}



/* Fin */



/* Efecto de botón de vídeo */

.effect-button-live {

  animation: pulse 1500ms infinite;

}



@keyframes pulse {

  0% {

    box-shadow: #0d6efd 0 0 0 0;

  }

  75% {

    box-shadow: #0d6efd 0 0 0 16px;

  }

}



/* Fin */



/* Diseño de preloader */

.loader {

  width: 48px;

  height: 48px;

  display: inline-block;

  position: relative;

}

.loader::after,

.loader::before {

  content: "";

  box-sizing: border-box;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  border: 2px solid #fff;

  position: absolute;

  left: 0;

  top: 0;

  animation: animloader 2s linear infinite;

}

.loader::after {

  animation-delay: 1s;

}



@keyframes animloader {

  0% {

    transform: scale(0);

    opacity: 1;

  }

  100% {

    transform: scale(1);

    opacity: 0;

  }

}



.centrado {

  background: #000;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}



.escondido {

  overflow: hidden !important;

}

/* Diseño de preloader */