/* 

  Mobile	320px - 480px	Smartphones (portrait)
  Tablet	481px - 768px	Tablets (portrait), small laptops
  Small Desktop	769px - 1024px	Tablets (landscape), smaller laptops
  Large Desktop	1025px and up	Desktop monitors, larger laptops

*/


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

.viewIntroLogoMobile{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  opacity: 0;
  transition: opacity .6s ease;
}

#header .menu-desktop,
#header .menuCompleto
{
  display: none;
}

#header .menu-mobile{
  position: relative;
  display: block;
  width: 95%;
  height: 50px;
  margin: auto;
  padding: 0;
}
#header .menu-mobile::after{
  content: '';
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 1px;
  bottom: -2px;
  background-color: var(--color-primario);
}

header nav .navbar-collapse{
	flex-grow: 0;
  position: absolute;
  top: 51px;
  background: rgba(255, 255, 255, .5);
  border-radius: 20px;
  width: 100%;
  left: 0;
}

header .navbar>.container{
  height: 100%;
  flex-direction: row-reverse;
  padding: 0;
  margin: 0;
}

header .navbar .container .navbar-brand{
  width: 60px;
}
.btnHamburguerTing{
  border: none;
}

.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: none;
}

/* Menu Hamburguer */
.barraHamburguer{
  width: 30px;
  height: 3px;
  background: var(--color-primario);
  border-radius: 2px;
  position: relative;
  transition: all .2s linear;
}

.barraHamburguer::before{
  content: '';
  display: block;
  width: 30px;
  height: 3px;
  background: var(--color-primario);
  border-radius: 2px;
  position: absolute;
  top: -8px;
  left: 0;
  transition: all .3s linear;
}

.barraHamburguer::after{
  content: '';
  display: block;
  width: 30px;
  height: 3px;
  background: var(--color-primario);
  border-radius: 2px;
  position: absolute;
  bottom: -8px;
  left: 0;
  transition: all .3s linear;
}

.barraHamburguer.open{
  background-color: transparent;
}
.barraHamburguer.open::before{
  transform: rotate(45deg);
  transform-origin: left;
}

.barraHamburguer.open::after{
  transform: rotate(-45deg);
  transform-origin: left;
  bottom: -14px;
}

.contenedorFormInicio{
  border: 0;
}

/* botonera mood */
.cualMood .botoneraMood{
  width: 90%;
  gap: 0;
}

.cualMood .botoneraMood button{
  width: 60%;
}


/* botonera tu estilo */
.tuEstilo .botoneraTuEstilo{
  width: 90%;
  gap: 0;
}

.tuEstilo .botoneraTuEstilo button{
  width: 60%;
}

/* botonera cuantos dormitorios */
.cuantosDorms .botoneraDormitorios{
  width: 90%;
  gap: 0;
}

.cuantosDorms .botoneraDormitorios button{
  width: 60%;
}

/* botonera presupuesto */
.rangoPresupuesto .botoneraPresupuesto{
  width: 90%;
  gap: 0;
}

.rangoPresupuesto .botoneraPresupuesto button{
  width: 60%;
}

/* CERCA DE DONDE QUIERES VIVIR */

.botoneraVivirIzquierda{
  flex-direction: column;
  align-items: end;
  width: 40%;
}
.botoneraVivirDerecha{
  flex-direction: column;
  align-items: start;
  width: 40%;
}

.btn-opcion-vivir {
  width: 100%;
}


/* MAPA SVG ---------------------------------------------  */
.opcionesComuna .containSvgComuna{
  display: initial;
  align-items: unset;
  height: 80%;
}

.SwiperPrueba {
  width: 70%;
  height: 70%;
  margin: auto;
}

.SwiperPrueba .swiper-slide{
  width: 100%;
  height: 100%;
}

.contenedorMapaSvg svg{
  width: 85%;
  height: 100%;
  margin: auto;
}
.rellenaComuna.active{
  opacity: 1;
  transition: all .3s ease;
}

.opcionesComuna{
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: auto;
}

.contenedorOpcionesComuna{
  width: 100%;
  height: 25%;
  margin-top: 0px;
}

.contenedorMapaSvg{
  height: 60%;
  width: 100%;
  margin-top: -5px;
}

/* SWIPERTING ---------------------------------------- */
.swiperBeforeTingS {
  width: 90%;
}

.mySwiperTing .swiper-slide.swiper-slide .img {
  width: 85%;
  height: 40%;
}

.mySwiperTing .swiper-slide .img, .mySwiperTing .swiper-slide .card-content{
  width: 100%;
  position: relative;
  top: -25px;
}

.mySwiperTing {
  width: 90%;
  height: 100%;
  /* margin: auto; */
}

.swiper-pagination-bullets.swiper-pagination-horizontal{
  bottom: 52%;
  width: 100%;
}


.mySwiperTing .swiper-slide.swiper-slide-active {
  flex-direction: column;
  justify-content: space-around;
}

.mySwiperTing .button-next{
  height: 100%; 
  width: 20%; 
  position: absolute; 
  right: 0px;
  bottom: 60px;
}
.mySwiperTing .button-prev{
  height: 100%; 
  width: 20%; 
  position: absolute; 
  left: -20px; 
  bottom: 60px;
}

.contactoEjecutivo .content-ewt button{
  width: 50%;
}

.swiperBeforeTingS .swiper-slide .titulo-card-busqueda{
  padding: 0;
}

.swiperTinder{
  align-items: unset;
}

}