*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.mt-2{
    margin-top: 10px;
}

.mt-3{
    margin-top: 16px;
}

.mt-4{
    margin-top: 24px;
}

.mb-2{
    margin-bottom: 10px;
}

.mb-3{
    margin-bottom: 16px;
}

.mb-4{
    margin-bottom: 24px;
}

p{
    margin-bottom: 0px;
    font-size: 1.6rem;
}

/* ------------------------- header --------------------------- */
.navbar{
    background-color: #F16B3D;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
}

.navbar-default .navbar-nav>li>a{
    color: white;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a:hover{
    background-color: #FFC06B;
    color: #555;
}

.navbar-brand img{
    height: 25px;
}

.navbar-default .navbar-nav>.active>a{
    background-color: #FFC06B;
}

.navbar-default .navbar-toggle .icon-bar{
    background-color: white;
}

.navbar-toggle:focus{
    background-color: #FFC06B !important;
}

@media (min-width: 768px) {
    .navbar-nav>li>a {
        padding-top: 18px;
    }
}

.full-landing-image{
    position: relative;
    background-position: center center;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.full-landing-image h2{
    font-size: 4.5rem;
    margin: 0;
    color: white;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}

#header-inicio{
    background-image: url(../img/portada-1.jpg);
    background-position: 50% 27%;
}

#header-residencia{
    background-image: url(../img/portada-2.jpg);
    height: 550px;
    background-position: top;
}

#header-club-dia{
    background-image: url(../img/portada-3.jpg);
    height: 550px;
    background-position: top;
}

#header-servicios{
    background-image: url(../img/portada-4.jpg);
}

#header-donativos{
    background-image: url(../img/portada-5.jpg);
    height: 350px;
    background-size: cover;
    background-position: 59%;
}



@media (max-width: 550px) {
    #header-donativos{
        background-image: url(../img/portada-5-movil.png);
        background-size: cover;
        background-position: center;
        height: 600px;
    }
}

#logo{
    position: absolute;
    left: 0; 
    right: 0; 
    top: 0;
    bottom: 0;
    margin: auto; 
    width: fit-content;
    width: 300px;
    max-width: 70%;
}


/* general */

.seccion{
    position: relative;
    padding-top: 40px;
    padding-bottom: 60px;
}



.seccion-pequenia{

}

.separador{
    position: relative;
    background-color: #F6F6F6;
    padding-top: 30px;
    padding-bottom: 20px;
    text-align: center;
}

.separador img{
    margin: auto;
}

.separador-alt{
    background-color: #FFC06B;
    color: white;
}

.separador a{
    color: white;
}

.separador-alt p{
    font-size: 1.5rem;
}

.separador-flex .row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.btn{
    background-color: #D16E39;
    color: white;
    transition: .3s;
}

.btn-alt{
    color: #D16E39;
    border: 1px solid #D16E39;
    background-color: white;
}

.btn:hover, .btn:focus{
    background-color: white;
    color: #D16E39;
    border: 1px solid #D16E39;
    outline: none;
}

.btn-alt:hover, .btn-alt:focus{
    background-color: #D16E39;
    border: 1px solid #D16E39;
    color: white;
}

span{
    color: #D16E39;
}

.underline{
    background-color: #D16E39;
    height: 2px;
    margin-top: -10px;
    margin: auto;
}

.semicirculo {
    position: absolute;
    top: -50px; 
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 100px;
    background-color: #333;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
}


/* ------------------ inicio ----------------- */
#elegirnos{
    background-image: url(../img/dec-1.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 0;
    padding-top: 20px;
}

#elegirnos .row{
    display: flex;
    flex-wrap: wrap;
    align-items: end;
}


#residencias-intro .row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#residencias-intro{
    background-image: url(../img/dec-2.png), url(../img/dec-3.jpg), url(../img/dec-4.png);
    background-position: top left, bottom left, bottom right;
    background-repeat: no-repeat;
    background-size: 90px, 70px, 140px;
}

#residencias-intro button{
    margin-top: 20px;
    margin-bottom: 10px;
}

#residencias-intro .slider{
    max-width: 100%;
    height: auto;
    
}

.swiper{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.swiper-button-next, .swiper-button-prev{
    color: white !important;
}

.swiper-pagination-bullet-active{
    background: white !important;
}

#residencias{
    background-color: #F6F6F6;
    text-align: center;
    background-image: url(../img/dec-5.png), url(../img/dec-6.png);
    background-position: 0% 75%, bottom right;
    background-repeat: no-repeat;
    background-size: 70px, 80px;
}

#residencias h6{
    font-weight: normal;
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 40px;
}

#residencias-contenedor{
    display: flex;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 5px;
    margin-bottom: 40px;
}

.residencia{
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: white;
    text-align: center;
    flex-basis: calc( (100% / 5) - 10px);
}

@media (max-width: 768px) {
    .residencia {
        flex-basis: 100%;
    }
}

.residencia img{
    max-width: 80%;
    margin-bottom: 10px;
}


.residencia h4{
    margin-top: 15px;
    margin-bottom: 0;
}


.residencia h5{
    margin-top: 5px;
}

.residencia h4, .residencia h5{
    color: #DB9010;
    font-weight: bold;
}


.residencia ul{
    list-style-type: none;
}

#residencias .logo{
    width: 50px;
    margin: auto;
}

#club-dia-intro{
    background-image: url(../img/3.jpg);
    background-size: cover;
    background-position: center;
    color: white;
    padding-top: 60px;
}

#mirar{
    background-image: url(../img/4.jpg);
    background-size: cover;
    background-position: center;
    color: white;
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
}

#mirar h5{
    font-size: 3rem;
    margin-bottom: 25px;
}

#mirar span{
    color: #FFC06B;
}

.circulo{
    height: 25px;
    width: 25px;
    background-color: white;
    border-radius: 50%;
    display: inline-block;
}

#que-incluye{
    background-color: #FFC06B;
}

#que-incluye h2{
    color: #AD4A07;
    margin-bottom: 20px;
}

#incluye-contenedor{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 10px;
}

.incluye{
    padding: 20px;
    text-align: center;
    flex-basis: calc( (100% / 4) - 20px);
}

@media (max-width: 768px) {
    .incluye {
        flex-basis: 100%;
    }
}

.incluye img{
    width: 120px;
}

#compromiso{
     background-image: url(../img/5.jpg);
    background-size: cover;
    background-position: center;
    color: white;
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
}

#requisitos{
    background-color: #F89548;
    color: white;
    padding-bottom: 40px;
}

#requisitos h6{
    font-size: 2rem;

}

#requisitos img{
    width: 60px;
    max-width: 80%;
}

/* ----------- contacto ---------------- */

#contacto{

}

#contacto h4{
    color: #F89548;
    font-size: 2.2rem;
    margin-bottom: 24px;
    text-align: center;
}

#contacto iframe{
    max-width: 100%;
}


/* ----------- footer ---------------- */
footer{
    background-color: #F6F6F6;
    padding-top: 30px;
    padding-bottom: 40px;
}

#logo-footer{
    width: 180px;
    max-width: 80%;
    margin-bottom: 15px;
}

footer img{
    margin: auto;
}

footer h4{
    color: #F89548;
    font-size: 2.2rem;
    margin-bottom: 5px;
    text-align: center;
}

footer p{
    text-align: center;
}

footer .redes{
    display: flex;
    justify-content: center;
    column-gap: 10px;
}

footer .redes img{
    width: 40px;
    margin: unset;
    cursor: pointer;
}

footer .num a{
    display: flex;
    align-items: center;
    column-gap: 10px;
    text-align: center;
    justify-content: center;
    margin-bottom: 3px;
    color: #333;
}

footer .num img{
    width: 20px;
    margin: unset;
}

.footer-col{
    margin-top: 10px;
}

#whats{
    position: fixed;
    bottom: 5px;
    right: 5px;
    cursor: pointer;
}

#whats img{
    width: 50px;
}

/* --------------- residencias ---------------- */

#residencias-explicacion{
    background-image: url(../img/dec-7.png), url(../img/dec-8.png);
    background-position: 0 110%, bottom right;
    background-repeat: no-repeat;
    background-size: 100px, 80px;
}

#residencias-explicacion img{
    margin: auto;
    padding-top: 60px;
}

#club-dia{
    background-image: url(../img/11.jpg);
    background-size: cover;
    background-position: center;
    color: white;
    padding-top: 70px;
    text-align: center;
}

#club-dia h2, #club-dia p{
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}

#club-dia p{
    font-size: 1.6rem;
}

#sevicio-limpieza{
    background-color: #333333;
    color: white;
}

#importante{
    background-image: url(../img/dec-9.png);
    background-position: 5% -2%;
    background-repeat: no-repeat;
    background-size: 100px;
    text-align: left;
    padding-bottom: 40px;
}

#importante .row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#importante h3{
    font-weight: bold;
}

#importante img{
    width: 300px;
    max-width: 80%;
    margin: auto;
}

#importante span{
    color: #F89548;
    font-weight: bold;
}

@media (min-width: 576px) {
    #importante {
        background-position: 5% 90%;
    }
}

#no-permitido{
    background-color: white;
    padding-bottom: 40px;
}

#no-permitido #reglas{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: self-start;
    column-gap: 10px;
}

.regla{
    align-self: auto;
    display: flex;
    flex-basis: calc( (100% / 2) - 10px);
    margin-bottom: 25px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .regla {
        flex-basis: 100%;
    }
}

.regla img{
    width: 90px;
    max-width: 100%;
    margin-bottom: 15px;
}

#recibir-visitas{
    background-color: #F89548;
}

#horario-visitas{
    padding-bottom: 0px;
}

#horario-visitas .row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#horario-visitas span{
    color: #F89548;
}

/* --------------- residencias ---------------- */
#club-dia-explicacion{
    background-image: url(../img/dec-1.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
}

#club-dia-explicacion .row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}


#club-dia-explicacion h2{
    color: #F89548;
    text-align: center;
    font-weight: bold;
}

#club-dia-explicacion h5{
    font-weight: bold;
    font-size: 1.8rem;
}


#centro-dia{
    background-image: url(../img/8.jpg);
    background-size: cover;
    background-position: center;
    color: white;
    padding-top: 140px;
    padding-bottom: 140px;
}

#centro-dia p{
    font-size: 2rem;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}

#estancia{
    background-image: url(../img/dec-17.png), url(../img/dec-18.png);
    background-position: 0% 110%, 100% 107%;
    background-repeat: no-repeat;
    background-size: 80px, 80px;
}

#estancia .row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

@media (min-width: 576px) {
    #estancia {
        background-position: bottom left, bottom right;
    }
}

#experiencia{
    background-color: black;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 0;
    color: white;
}

#experiencia .row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* --------------- servicios ---------------- */

#alimentacion .row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#alimentacion{
    background-color: white;
}

#alimentacion img{
    margin: auto;
}

#alimentacion button{
    margin-top: 20px;
    margin-bottom: 10px;
}

#aviso-comida{
    background-image: url(../img/15.jpg);
    background-size: cover;
    background-position: center;
    color: white;
    padding-top: 120px;
    padding-bottom: 120px;
    text-align: center;
}

#aviso-comida .row{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

#aviso-comida p{
    font-size: 1.7rem;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}

#horarios-comida{
    background-image: url(../img/dec-11.png), url(../img/dec-12.png), url(../img/dec-13.png);
    background-position: 0% -15%, 100% 50%, bottom left;
    background-repeat: no-repeat;
    background-size: 120px, 70px, 140px;
    text-align: center;

}

#horarios-comida ul{
    color: #F16B3D;
    list-style-type: none;
    font-size: 2.5rem;
    font-weight: bold;
}

#reglas-alimentos{
    background-color: #333333;
    color: white;
}

#reglas-alimentos .row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#reglas-alimentos img{
    margin: auto;
    width: 100px;
    max-width: 90%;
}

#extras{
    text-align: center;
    background-color: white;
}

#extras h2{
    font-size: 2.5rem;
    color: #F16B3D;
    font-weight: bold;
}

#extras-contenedor{
    display: flex;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 5px;
    justify-content: center;
    column-gap: 10px;
}

.extra{
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    flex-basis: calc( (100% / 3) - 10px);
}

@media (max-width: 768px) {
    .extra {
        flex-basis: 100%;
    }
}

.extra img{
    width: 180px;
    max-width: 90%;;
    margin-bottom: 15px;
}

.extra h6{
    color: #F16B3D;
    font-weight: bold;
    font-size: 1.6rem;
}

#convivencia{
    background-image: url(../img/dec-19.png), url(../img/dec-14.png);
    background-position: bottom left, bottom right;
    background-repeat: no-repeat;
    background-size: 120px, 120px;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 60px;
}

#convivencia .row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#convivencia h3{
    font-weight: bold;
}

#convivencia span{
    color: #F89548;
}

#festejos{
    text-align: center;
    padding-top: 80px;
    padding-bottom: 10px;
}

#festejos h6{
    font-size: 2.5rem;
    color: #F16B3D;
    font-weight: bold;
}

#festejos-contenedor{
    display: flex;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 5px;
    justify-content: center;
    column-gap: 10px;
}

.festejo{
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    flex-basis: calc( (100% / 5) - 10px);
}

@media (max-width: 768px) {
    .festejo {
        flex-basis: 100%;
    }
}

.festejo img{
    width: 120px;
    max-width: 90%;;
    margin-bottom: 15px;
}

.festejo p{
    color: #8AA3BF;
    font-weight: bold;
    font-size: 1.6rem;
}

/* --------------- donativos ---------------- */

#ayuda{
    background-image: url(../img/dec-15.png), url(../img/dec-20.png), url(../img/dec-3.jpg), url(../img/dec-16.png);
    background-position: top left, top right, bottom left, bottom right;
    background-repeat: no-repeat;
    background-size: 120px, 120px, 60px, 120px;
    text-align: center;
}

#ayuda .row{
    display: flex;
    justify-content: center;
}

#ayuda img{
    margin: auto;
}

#ayuda h1, #ayuda h6{
    color: #F16B3D;
    font-weight: bold;
}

#ayuda h1{
    font-size: 3.5rem;
}

#ayuda h6{
    font-size: 2.5rem;
}

#ayuda p{
    font-size: 1.5rem;
    text-align: justify;
}

#ayuda ul{
    list-style-type: none;
}


#como-ayudar{
    text-align: center;
    padding-bottom: 40px;
}

#como-ayudar h2{
    font-size: 3.5rem;
    color: #F16B3D;
    font-weight: bold;
}

#como-ayudar h6{
    font-size: 2.5rem;
    color: #F16B3D;
    font-weight: bold;
}

#como-ayudar-contenedor{
    display: flex;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 5px;
    justify-content: center;
    column-gap: 10px;
}

.ayuda{
    text-align: center;
    flex-basis: calc( (100% / 4) - 10px);
}

@media (max-width: 768px) {
    .ayuda {
        flex-basis: 100%;
    }
}

.ayuda h6{
    color: white !important;
    font-size: 1.7rem !important;
}

.ayuda img{
    width: 120px;
    max-width: 90%;;
    margin-bottom: 15px;
}

.ayuda p{
    color: white;
}

.ayuda > div{
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    min-height: 200px;
    margin-bottom: 15px;
}

.ayuda > div p{
    font-size: 1.4rem;
}

.ayuda .btn:hover{
    background-color: white !important;
}

#donacion div, #donacion button{
    background-color: #F16B3D;
}

#donacion button:hover{
    color: #F16B3D;
}

#donativo div, #donativo button{
    background-color: #FFC06B;
}

#donativo button:hover{
    color: #FFC06B;
}

#servicio-social div, #servicio-social button{
    background-color: #F8AE5B;
}

#servicio-social button:hover{
    color: #F8AE5B;
}

#proyectos div, #proyectos button{
    background-color: #EF6A3D;
}

#proyectos button:hover{
    color: #EF6A3D;
}


.loader {
  width: 25px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,#ffa516);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation: l13 1s infinite linear;
}
@keyframes l13{ 
  100%{transform: rotate(1turn)}
}