#carga{
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  z-index: 999;
  align-items: center;
  justify-content: center;
  background-color: black;
  padding-top: 5%;
}

#texto_bienvenida{
  flex-basis: 100%;
  width: 100%;
  text-align: center;
  color: white;
}

#texto_bienvenida p{

  -moz-user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  font-size: 26px;
  width: 100%;
}

#img_bienvenida{
  flex-basis: 100%;
  width: 100%;
  text-align: center;
  color: white;
}

#img_bienvenida img{
  width: 50%;
}

#img_bienvenida p{
  -moz-user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  font-size: 18px;
}

#cargando{
  flex-basis: 100%;
  width: 100%;
  text-align: center;
  color: white;
}
.img_cargando{
  width: 10%;
  height: 10%;
}
#calles{
  position: absolute;
  top: 5%;
  padding: 10%;
  display: flex;
  flex-direction: row;
  width: 80%;
}

#calle1{
  width: 50%;
  text-align: right;
}
#calles p{
  color: white;
  padding: 20px;
  font-size: 25pt;
}


#panel_car {
  z-index: 8888;
  background-color: white;
  border-radius: 10px;
  padding: 3px;
  position: absolute;
  top: 55px;
  right: 1%;
}

#borde_interior{
  border: 1px solid #999494;
  border-radius: 10px;
  padding: 20px;
}

#panel_car img {
  display: block;
  margin: auto;
  width: 30%;
}

#panel_car h1 {
  font-family: roboto;
  text-align: center;
  font-weight: bold;
  text-decoration: underline;
  font-size: 1.5em;
}

#panel_car p {
  font-family: roboto;
  text-align: left;
}

#panel_car span {
  position: absolute;
  right: 20px;
  text-align: right;
}

#panel_car button {
  display: inline-block;
  margin: 10px 5px 0 0;
  font-family: roboto;
}

#close-button {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 4px;
  background-color: #434343;
  border: 2px solid black;
  border-radius: 6px;
  color: white;
  /* otros estilos del botón */
}
#close-button:hover {
  background-color: #e50040;
  transition-duration: 1s;
}

#close-button:not(hover){
  transition-duration: 1s;
}

#panel_car_botones button {
  cursor: pointer;
  background-color: #434343;
  border: 1px solid grey;
  border-radius: 5px;
  padding: 8px;
  color: white;
}
#panel_car_botones button:hover {
  background-color: #e50040;
  transition-duration: 1s;
}

#panel_car_botones button:not(hover){
  transition-duration: 1s;
}

@keyframes myAnimation {
  from {right:-200%;}
  to {right:100%;}
}

@keyframes myAnimation2 {
  from {right:-50%;}
  to {right:100%;}
}

@keyframes myAnimation3 {
  from {right:-340%;}
  to {right:100%;}
}
.a-enter-ar-button, .a-enter-vr-button {
  visibility: hidden;
}

.a-enter-ar-button, .a-enter-vr-button {
    background-size: 100% 100%;
    background: url(../img/varios/Icono_VR_64.png) 50% 50% no-repeat rgba(0,0,0,.0);
    background-size: 100%;
    border: 0;
    bottom: 10px;
    cursor: pointer;
    min-width: 95px;
    min-height: 44px;
    padding-right: 0;
    padding-top: 0;
    position: absolute;
    right: 0;
    transition: background-color .05s ease;
    -webkit-transition: background-color .05s ease;
    z-index: 9999;
    border-radius: 8px;
    touch-action: manipulation;
}

.a-enter-ar-button:hover, .a-enter-vr-button:hover{
  background: url(../img/varios/Icono_VR_hover_64.png) 50% 50% no-repeat;
}


.whatsapp-button {
  z-index: 99;
  width: 44px;
  height: 44px;
  background: url(../img/varios/WhatsAppButtonGreenSmall.png) 50% 50% no-repeat;
  background-size: 100%;
  cursor: pointer;
}

.whatsapp-button:hover {
  background: url(../img/varios/WhatsAppButtonGreenSmall_hover.png) 50% 50% no-repeat;
  background-size: 100%;
  transition-duration: 1s;
}

#barra_inf{
  position: absolute;
  left: 1%;
  bottom: 2%;
  width: auto;
  z-index: 888;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
}

#ayuda{
  min-width: 42px;
  min-height: 42px;
  background: url(../img/varios/Info.png) 50% 50% no-repeat;
  background-size: 100%;
  text-align: center;
  cursor:pointer;
  margin-right: 10px;
}
#ayuda:hover {
  background: url(../img/varios/Info_Hover.png) 50% 50% no-repeat;
  background-size: 100%;
  transition-duration: 1s;
}

#ayuda:not(hover){
  transition-duration: 1s;
}

#compartir{
  min-width: 42px;
  min-height: 42px;
  background: url(../img/varios/Compartir_64.png) 50% 50% no-repeat;
  background-size: 100%;
  text-align: center;
  cursor:pointer;
  margin-right: 10px;
}

#compartir:hover {
  background: url(../img/varios/Compartir_64_hover.png) 50% 50% no-repeat;
  background-size: 100%;
  transition-duration: 1s;
}
#compartir:not(hover){
  transition-duration: 1s;
}


#barra_ayuda_info{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  opacity: 1;
  top: 3%;
  width: auto;
  height: 85%;
  z-index: 888;
  padding: 8px;
  border:3px solid #e50040;
  border-radius: 11px;
  margin: auto;
  text-align: center;
}

#barra_ayuda_info img{
  height: 100%;
}
#barra_comandos{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  opacity: 1;
  top: 3%;
  width: auto;
  height: 85%;
  z-index: 888;
  padding: 8px;
  border:3px solid #e50040;
  border-radius: 11px;
  margin: auto;
  text-align: center;
}

#barra_comandos img{
  height: 100%;
}
#sharethis{
  position: absolute;
  left: 1%;
  bottom: 9%;
  width: 10%;
  z-index: 888;
  margin: auto;
}

#centro_comandos {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(255 0 63 /80%);
    border-radius: 6px;
    display: flex !important;
    flex-direction: row;
    justify-content: center !important;
    flex-wrap: nowrap;
    align-items: center;
    width: auto;
    border: solid;
    border-width: 2px;
    border-radius: 10px;
    border-color: white;
}

#capa_micro, #capa_auriculares, #capa_vista, #capa_play, #capa_pause, #capa_secciones, #capa_pause_centrocomercial, #capa_tiendas, #capa_carro_compra{
  min-width: 42px !important;
  min-height: 42px !important;
  height: 42px !important;
  background-size: 100%;
  text-align: center;
  cursor: pointer;
  /* padding-left: 3px; */
  margin: 5px 0px !important;
  /* border-right: 1px solid #ffffff; */
  padding: 0px 8px 0px 8px;
}

#capa_micro, #capa_auriculares, #capa_vista, #capa_play, #capa_pause, #capa_secciones {
  /* margin-right: 10px; */
  border-right: 1px solid #ffffff;
  padding: 0px 8px 0px 8px !important;
}

#centro_comandos button{
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-size: 100%;
  border: none;
  min-width: 42px;
}

#centro_comandos:not(hover){
  transition-duration: 1s;
}

#centro_comandos button:hover{
transition-duration: 1s;
}

#capa_carro_compra p {
    position: absolute !important;
    font-size: 0.6em;
    color: white;
    font-weight: bold;
    /* margin: 0; */
    margin-top: -16px;
    margin-left: 13px;
    padding: 3px;
    background-color: rgba(0,0,0, 0.8);
    border-radius: 50%;
    margin-right: 0px;
    margin-bottom: 0;
    min-height: 19px !important;
    min-width: 19px !important;
}

#capa_detalle_carro {
    display: flex;
    flex-direction: row;
    /* padding-left: 9px; */
    padding: 0px;
    margin: 5px 8px;
    max-height: 42px;
    min-height: 42px;
    align-content: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: stretch;
}

#capa_detalle_carro_izda, #capa_detalle_carro_dcha{
  display: flex;
  flex-direction: column;
  height: 15px;
  justify-content: space-evenly;
  white-space: nowrap;
}

#capa_detalle_carro p{
  font-size: 0.7em;
  color: white;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#capa_detalle_carro_dcha p{
  text-align: right;
}

.button_micro{
  background: url(../img/varios/microfono_activo.png) no-repeat;
}

.button_micro:hover{
  background: url(../img/varios/microfono_activo_negro.png) no-repeat;
}

.button_micro_apagado {
  background: url(../img/varios/microfono_desactivado_negro_hover.png) no-repeat;
}

.button_micro_apagado:hover{
  background: url(../img/varios/microfono_desactivado_negro_blanco.png) no-repeat;
}

.button_auriculares {
  background: url(../img/varios/audio_activo_usuario_blanco.png) no-repeat;
}

.button_auriculares_apagado{
  background: url(../img/varios/audio_inactivo_usuario.png) no-repeat;
}

.button_play{
  background: url(../img/varios/video_play_activo.png) no-repeat;
}

.button_play:hover{
  background: url(../img/varios/video_play_inactivo.png) no-repeat;
}

.button_play_apagado{
  background: url(../img/varios/video_play_inactivo.png) no-repeat;
}

.button_pause{
  background: url(../img/varios/video_pause.png) no-repeat;
}

.button_pause:hover{
  background: url(../img/varios/video_pause_hover.png) no-repeat;
}

.button_pause_apagado{
  background: url(../img/varios/video_pause_inactivo.png) no-repeat;
}

.button_vista {
    background: url(../img/varios/icono_seccion_3d_activo.png) no-repeat;
}

.button_vista:hover {
    background: url(../img/varios/icono_seccion_3d_hover.png) no-repeat;
}

.button_secciones{
  background: url(../img/varios/icono_secciones.png) no-repeat;
}

.button_secciones:hover{
  background: url(../img/varios/icono_secciones_negro.png) no-repeat;
}

.button_tiendas_centrocomercial{
  background: url(../img/varios/icono_tiendas.png) no-repeat;
}

.button_tiendas_centrocomercial:hover{
  background: url(../img/varios/icono_tiendas_hover.png) no-repeat;
}

.button_carro_compra{
  background: url(../img/varios/carrito_blanco_64K.png) no-repeat;
}

.button_carro_compra:hover{
  background: url(../img/varios/carrito_negro.png) no-repeat;
}

#posicion_usr {
    position: absolute;
    top: 2%;
    /* bottom: 8%; */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(255 0 63 /80%);
    border-radius: 6px;
    text-align: center;
    padding: 5px 55px;
    color: white;
    width: 40%;
    height: 53px;
    box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
    border: solid;
    border-width: 2px;
    border-radius: 10px;
    border-color: white;
    overflow: hidden;
}

#posicion_usr p{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 3px 0px;
    font-size: 0.8em;
}

#calle_aparece {
    position: absolute;
    right: -100%;
    animation: myAnimation2 linear forwards infinite;
    animation-duration: 25s;
    white-space: nowrap;
}

#capa_video_pantalla {
    position: absolute;
    left: 2%;
    top: 20%;
    width: 300px;
    height: 200px;
    background-color: white;
    box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
    border: solid;
    border-width: 2px;
    border-radius: 10px;
    border-color: white;
    overflow: hidden;
}



@media screen and (max-width: 900px) {

  #carga{
    padding-top: 30%;
  }

  #cargando{
    margin-top: 10%;
    flex-basis: 100%;
    width: 100%;
    text-align: center;
    color: white;
  }
  .img_cargando{
    width: 30%;
    height: 30%;
  }

  #barra_inf{
    position: absolute;
    left: 1%;
    bottom: 2%;
    z-index: 888;
    margin: auto;
    display: none !important;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
  }

  #ayuda {
    min-width: 36px;
    min-height: 42px;
    background: url(../img/varios/Info.png) 50% 50% no-repeat;
    background-size: 100%;
    text-align: center;
    cursor: pointer;
    margin-right: 2px;
}

#compartir {
    min-width: 36px;
    min-height: 42px;
    background: url(../img/varios/Compartir_64.png) 50% 50% no-repeat;
    background-size: 100%;
    text-align: center;
    cursor: pointer;
    margin-right: 2px;
}
  #barra_ayuda_info{
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    /* top: 3%; */
    width: auto;
    height: auto;
    padding: 0px;
  }

  #barra_ayuda_info img{
    width: 100%;
  }

  #barra_comandos{
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    /* top: 3%; */
    width: auto;
    height: auto;
    padding: 0px;
  }

  #barra_comandos img{
    width: 100%;
  }

  #sharethis{
    position: absolute;
    left: 1%;
    bottom: 7%;
    width: 50%;
    z-index: 888;
    margin: auto;
  }

  .whatsapp-button {
      width: 38px;
      height: 38px;
}

.a-enter-ar-button{
  visibility: hidden;
}

.a-enter-ar-button, .a-enter-vr-button{
    background-size: 100% 100%;
    background: url(../img/varios/Icono_VR_64.png) 50% 50% no-repeat rgba(0,0,0,.0);
    background-size: 100%;
    border: 0;
    bottom: 0;
    right: 4px;
    cursor: pointer;
    min-width: 53px;
    min-height: 44px;
    padding-right: 0;
    padding-top: 0;
    position: absolute;
    right: 0;
    transition: background-color .05s ease;
    -webkit-transition: background-color .05s ease;
    z-index: 9999;
    border-radius: 8px;
    touch-action: manipulation;
  }

  #centro_comandos{
    /*bottom: 7%;*/
    left:50%;
  }

  #capa_micro, #capa_auriculares, #capa_play, #capa_pause, #capa_vista, #capa_secciones, #capa_tiendas, #capa_carro_compra, #capa_detalle_carro {
    min-width: 32px;
    min-height: 32px;
    height: 32px;
  }

#capa_detalle_carro {
  min-width: 45px;
  margin: 5px 8px;
  padding: 0px;
}

  #capa_carro_compra p {
    position: absolute;
      font-size: 0.6em;
      margin-top: -6px;
      margin-left: 5px;
      padding: 3px;
      
}

    #posicion_usr {
        top: 2%;
        background-color: rgb(255 0 63 /80%);
        text-align: center;
        padding: 1px 5px;
        max-width: 30%;
        width: 30%;
        height: 50px;
        min-height: 30px;
    }

#posicion_usr p {
    font-size: 0.7em;
}

#calle_aparece {
    position: absolute;
    right: -100%;
    animation: myAnimation linear forwards infinite;
    animation-duration: 10s;
    white-space: nowrap;
}

}

@media screen and (max-width: 510px){
#barra_inf {
  bottom: 8%;
  display: none !important;
}

#calle_aparece {
    position: absolute;
    right: -100%;
    animation: myAnimation3 linear forwards infinite;
    animation-duration: 10s;
    white-space: nowrap;
}

}
@media screen and (max-width: 768px){
  #capa_detalle_carro_izda  p:first-child{
    display: none;
  }
  #cantidadIndex{
    display: none;
  }

}