*{
    margin:0;
    padding:0;
    list-style-type: none;
}




/* PANTALLA DE CARGA */

#pantallaCarga {
    height: 100vh;
    z-index: 9999;
    /* z-index: 9999; */
}


.gooey {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 142px;
    height: 40px;
    margin: -20px 0 0 -71px;
    background: #fff;
    filter: contrast(20);
}
.gooey .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    filter: blur(4px);
    background: #000;
    border-radius: 50%;
    transform: translateX(0);
    animation: dot 2.8s infinite;
}
.gooey .dots {
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    animation: dots 2.8s infinite;
}
.gooey .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    filter: blur(4px);
    background: #000;
    border-radius: 50%;
}
@-moz-keyframes dot {
    50% {
        transform: translateX(96px);
    }
}
@-webkit-keyframes dot {
    50% {
        transform: translateX(96px);
    }
}
@-o-keyframes dot {
    50% {
        transform: translateX(96px);
    }
}
@keyframes dot {
    50% {
        transform: translateX(96px);
    }
}
@-moz-keyframes dots {
    50% {
        transform: translateX(-31px);
    }
}
@-webkit-keyframes dots {
    50% {
        transform: translateX(-31px);
    }
}
@-o-keyframes dots {
    50% {
        transform: translateX(-31px);
    }
}
@keyframes dots {
    50% {
        transform: translateX(-31px);
    }
}


/* animaciones de inicio */

/* .fade-in {
    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s;
    -moz-animation: fadeIn ease 1s;
    -o-animation: fadeIn ease 1s;
    -ms-animation: fadeIn ease 1s;
  }


  @keyframes fadeIn{
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }

  @-moz-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }

  @-o-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }

  @-ms-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  } */

.home {
    /* z-index: -1; */
    display: none;
}




/* INFO CIUDAD Y FECHA */

#fecha{
    margin-right: 10px;
}

#ciudad {
    margin-left: 10px;
}

#infoCiudad {
    padding-bottom: 20px;
}

/* ADORNOS */

#casita {
    /* padding-top:20px; */
    height: 300px;
    width:auto;
    display:none;
    padding-bottom: 20px;
}

.adorno {
    height: 300px;
    width:auto;
    padding-bottom: 20px;
    /* -webkit-filter: drop-shadow(5px 5px 5px #666666)!important;
    filter: drop-shadow(5px 5px 5px #666666)!important; */


}

#barco,#loboMarino,#delfin,#hipocampos,#pez,#barco2{
    display:none;
}


#iconWeather {
    position: relative;
    filter:grayscale(1);


}

#logo {
    margin-top:20px;
    height:40px;
    width: auto;
}

h1 {
    font-size: 50px;
    font-weight: 100;
    line-height: 48px;
    display: block;

}

/* h1::before,
h1::after {
    display: inline-block;
    content: "";
    border-top: 0.1rem solid black;
    width: 4rem;
    margin: 0 1rem;
    transform: translateY(-1rem);
} */



/* CARRUSEL PARA SELECCION DE ADORNO */

.carousel {
    display:none;
    padding-bottom: 20px;
    position:relative;
    top:-300px;
    z-index: 9999;
    margin-bottom: -300px;

}


.carousel-inner{

    width:100%;
    max-height: 1000px !important;
}

.carousel-item {
    background-color: gray;
    height:450px;
    width:300px;
}

.carousel-item img {
    height: 280px;
    /* width: 100%!important; */
    object-fit:contain;
    filter:grayscale(1);
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")!important;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")!important;
}


/* DESCRIPCION */
#descripcionAdorno{
    font-size: 17px;
    font-weight: 400;
    padding-bottom: 30px;
}

#descripcionCasita{
    font-size: 17px;
    font-weight: 400;
    padding-bottom: 30px;
    display:none;
}

/* Modal */

.modal-body > img {
    height:250px;
    width:auto;
    margin-top: 10px;
    margin-bottom:30px;
}


/* .compartir {
    border: 1px solid black;
    border-radius: 15px;
} */

.compartir img {
    height:35px;
    width: auto;
    margin:15px 7px 7px 0px;
}

.bi-link{
    margin-right:5px;
}

#acercaDeModal a {
    font-weight: 550;
    color:black;
    text-decoration: none;
}

hmtl {
    height: 100%!important;
}

body {
    text-align: center;
    font-family: 'Quicksand', sans-serif!important;
    /* background-color: #121212!important;
    color: white !important; */
    display: flex;
    /* height: 100vh!important; */
    flex-direction: column;
    min-height: 100%!important;

}

.bi-arrow-repeat {
    position:relative;
    top:-1px;
}

#btnCambiarAdorno {
    margin-bottom: 20px;
}

footer a {
    text-decoration: none;
    color:black;
}

.content {
    flex: 1;
  }

footer {
    
    /* margin-top:80px;
    text-align: center;
    background-color: lightgray;
    color: #fff;
    padding: 15px;
    position: fixed;
    bottom: 0;
    width: 100%; */
    margin-top: 90px;
    padding: 15px;
    background-color: lightgray;
    


}

footer a:hover {
    font-weight: 900;
    color:black;
}

@media (min-width: 320px) and (max-width: 480px) {

    .modal-body > #meme {
        height:200px;
        width:auto;

    }

}