/*
$smartphones: only screen and (max-width: 575px);
$minitablets: only screen and (min-width: 576px) and (max-width: 767px);
$tablets: only screen and (min-width: 768px) and (max-width: 991px);
$laptops: only screen and (min-width: 992px) and (max-width: 1199px);
$desktops: only screen and (min-width: 1200px);
$desktops-big: only screen and (min-width: 1450px);*/
.switch input {
  opacity: 0;
}
.switch input:checked + .pulsador {
  background-color: black;
}
.switch input:checked + .pulsador:before {
  transform: translateX(38px);
}
.switch .pulsador {
  cursor: pointer;
  background-color: lightgray;
  position: relative;
  width: 70px;
  height: 32px;
  display: inline-block;
  border-radius: 15px;
}
.switch .pulsador::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  bottom: 6px;
  left: 6px;
  background-color: white;
  border-radius: 50%;
  transition: 0.2s;
}

@keyframes pulso {
  0% {
    background-color: blue;
    opacity: 0.5;
    transform: scale(1);
    outline: 1px solid red;
    outline-offset: 1px;
  }
  50% {
    outline: 1px solid red;
    outline-offset: 10px;
    opacity: 1;
    transform: scale(1);
  }
  100% {
    outline: 1px solid red;
    outline-offset: 1px;
    opacity: 0.5;
    transform: scale(1);
  }
}
@keyframes ef1 {
  from {
    height: 50px;
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ef2 {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes ef3 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
[data-tipo=hotspot] {
  animation: pulso 2s linear 0s infinite;
  border-radius: 50%;
  position: absolute;
  cursor: pointer;
  background-image: url("/resources/img/plus_3.png");
  background-size: cover;
}
[data-tipo=hotspot]:hover {
  opacity: 1;
}

.burbuja {
  display: none;
  padding: 10px;
  width: 300px;
  color: gray;
  background-color: gray;
  position: absolute;
}
.burbuja a {
  display: inline-block;
  width: 100%;
  border-top: 1px solid black;
  color: white;
  text-decoration: underline;
}
.burbuja.click {
  display: block;
}
.burbuja.over {
  display: block;
}
.burbuja.abj::before {
  width: 0px;
  height: 0px;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-bottom: 20px solid;
  position: absolute;
  content: "";
  top: 0px;
  left: 50%;
  transform: translateY(-100%) translateX(-50%);
}
.burbuja.arr::after {
  width: 0px;
  height: 0px;
  border-top: 20px solid;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-bottom: 20px solid transparent;
  position: absolute;
  left: 50%;
  content: "";
  bottom: 0px;
  transform: translateY(100%) translateX(-50%);
}
.burbuja.der::after {
  width: 0px;
  height: 0px;
  border-top: 20px solid transparent;
  border-right: 20px solid;
  border-left: 20px solid transparent;
  border-bottom: 20px solid transparent;
  position: absolute;
  top: 50%;
  left: 0px;
  content: "";
  transform: translateX(-100%) translateY(-50%);
}
.burbuja.izq::after {
  width: 0px;
  height: 0px;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid;
  border-bottom: 20px solid transparent;
  position: absolute;
  top: 50%;
  right: 0px;
  content: "";
  transform: translateX(100%) translateY(-50%);
}

.mbl-bullets {
  border-radius: 5px;
  padding-left: 10px;
  z-index: 101;
  left: 45%;
  height: 20px;
  position: absolute;
  transform: translateX(-50%);
}
.mbl-bullets.abajo {
  bottom: 15px;
}
.mbl-bullets.arriba {
  top: 15px;
}
.mbl-bullets .mbl-bullet {
  margin-right: 10px;
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.mbl-bullets .mbl-bullet.activa {
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid black;
}

.mbl-proy {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.mbl-proy .mbl-di-guia {
  position: absolute;
  display: inline-block;
  z-index: 90000;
  background-color: lime;
  width: 0%;
  height: 2px;
  bottom: 0px;
}
.mbl-proy .mbl-capa-fija {
  height: 2px;
  overflow: visible;
  position: absolute;
  z-index: 10;
  background-color: transparent;
}
.mbl-proy .mbl-diaps {
  height: 100%;
  display: flex;
  position: relative;
}
.mbl-proy .mbl-diaps .mbl-diap {
  flex: 0 0 auto;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: white;
}
.mbl-proy .mbl-lay {
  position: absolute;
}
.mbl-proy .mbl-lay[data-oculto-inicio] {
  visibility: hidden;
}
.mbl-proy .mbl-lay[data-oculto-inicio] .mostrar {
  visibility: visible;
}
.mbl-proy .mbl-lay.ocultar {
  visibility: hidden;
}
.mbl-proy .mbl-lay.mostrar {
  visibility: visible;
}
.mbl-proy .mbl-lay[data-tipo=boton] {
  cursor: pointer;
  border: 1px solid darkgrey;
  background-color: white;
  border-radius: 50%;
}
.mbl-proy .mbl-lay[data-tipo=boton]:hover {
  background-color: lightgray;
}
.mbl-proy .mbl-lay[data-grupo-seleccion] {
  cursor: pointer;
}
.mbl-proy .mbl-lay[data-grupo-seleccion].seleccionado {
  border: 3px solid red;
}
.mbl-proy img[data-tipo=imgBg] {
  width: 100%;
  height: auto;
  z-index: 0;
}
.mbl-proy .mbl-thumb {
  display: none;
  width: 100%;
  height: auto;
}
.mbl-proy .mbl-di-info {
  margin-top: 40px;
  position: absolute;
  right: 5px;
  top: 50%;
  z-index: 100;
  background-color: transparent;
  color: black;
  cursor: pointer;
}
.mbl-proy .mbl-di-info div:nth-child(1) {
  width: 2em;
  display: inline-block;
  background-color: white;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent;
  font-weight: bold;
}
.mbl-proy .mbl-di-info div:nth-child(2) {
  margin-left: 2px;
  width: 2em;
  display: inline-block;
  background-color: white;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent;
  font-weight: bold;
}
.mbl-proy .mbl-di-i {
  position: absolute;
  left: 5px;
  top: 50%;
  margin-top: -20px;
  z-index: 100;
  background-color: rgba(111, 111, 111, 0.2);
  cursor: pointer;
}
.mbl-proy .mbl-di-i:before {
  content: url(../img/arrowLeft.svg#light);
}
.mbl-proy .mbl-di-i:hover {
  background-color: rgba(111, 111, 111, 0.7);
}
.mbl-proy .mbl-di-d {
  position: absolute;
  right: 5px;
  top: 50%;
  margin-top: -20px;
  z-index: 100;
  background-color: rgba(111, 111, 111, 0.2);
  cursor: pointer;
}
.mbl-proy .mbl-di-d:after {
  width: 2em;
  height: 2em;
  content: url(../img/arrowRight.svg#light);
}
.mbl-proy .mbl-di-d:hover {
  background-color: rgba(111, 111, 111, 0.7);
}

.mbl-di-min {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 2px;
  margin-bottom: 2px;
}
.mbl-di-min div.mbl-di-carrete {
  position: relative;
  height: 100%;
  display: flex;
}
.mbl-di-min div.mbl-di-carrete div {
  display: block;
  flex: 0 0 auto;
  position: relative;
  background-color: lightgray;
  cursor: pointer;
  margin-right: 10px;
  opacity: 0.75;
}
.mbl-di-min div.mbl-di-carrete div.activa {
  color: #ead4c7;
  color: black;
  font-weight: bold;
  opacity: 1;
  outline: 2px solid black;
  outline-offset: -2px;
}
.mbl-di-min div.mbl-di-carrete div img {
  height: auto;
  width: 100%;
}

.mbl-bt {
  z-index: 50000;
  position: absolute;
  left: 2px;
  top: 2px;
  width: 100%;
}
.mbl-bt div {
  width: 6%;
  height: 100%;
  background-color: white;
}
.mbl-bt input {
  width: 94%;
  float: right;
}

.mbl-msk {
  position: absolute;
  overflow: hidden;
}
body.debug .mbl-msk {
  outline: 1px solid pink;
}

.mbl-cont-video {
  overflow: hidden;
  position: relative;
  height: 0px;
  width: 100%;
}
.mbl-cont-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

[data-tipo=cantidad] input {
  width: 50px;
  text-align: right;
}
[data-tipo=cantidad] img {
  width: 32px;
  height: 32px;
  margin-top: -7px;
}

.base-diap {
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  /*
  transform: translateX(5px); //compensar margen de 10px a la derecha
  @media only screen and (min-width: 768px) {
      transform: translateX(0px);
  }*/
}
.base-diap .oculto {
  display: none;
}
.base-diap .fi,
.base-diap .fd {
  cursor: pointer;
  z-index: 10;
  width: 2em;
  height: 2em;
  position: absolute;
  background-size: contain;
  background-color: rgba(0, 0, 0, 0.1);
}
.base-diap .fi.oculto,
.base-diap .fd.oculto {
  display: none;
}
.base-diap .fi:hover,
.base-diap .fd:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.base-diap .fi {
  left: 0;
  background-image: url("/recursos/archivos/ubicacionForzada/util/flechas/blancas/flecha-izquierda.png");
}
.base-diap .fi.negra {
  background-image: url("/recursos/archivos/ubicacionForzada/util/flechas/negras/flecha-izquierda.png");
}
.base-diap .fd {
  right: 0;
  background-image: url("/recursos/archivos/ubicacionForzada/util/flechas/blancas/flecha-derecha.png");
}
.base-diap .fd.negra {
  background-image: url("/recursos/archivos/ubicacionForzada/util/flechas/negras/flecha-derecha.png");
}
.base-diap .multi-diap {
  height: 100%;
  position: relative;
}
.base-diap .multi-diap .visu {
  border: 1px solid dashed;
  height: 100%;
  position: absolute;
}
.base-diap .multi-diap .visu img {
  cursor: pointer;
  height: auto;
  width: 100%;
}/*# sourceMappingURL=proyeccion.css.map */