/*==================================================
Índice
  --------------------------------------------------
  
    - Typography
  - body 
    - Common classes
    - Header
    - Homepage
      .navbar
      .carrousell
      .div-log in
      .div-video
      .div-imagenes,text & img
      .div-title & text
      .div-maps
  - Footer
   
==================================================*
/*==================================================
  Typography
  ==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap');



@font-face {
    font-family: "appopaint-Regular";
    src: url("/home/maria/Escritorio/Web Yumbera/collect/fuentes/Appopaint/appopaint-Regular.otf");
}

@font-face {
    font-family: "AvenyTWEB";
    src: url("/home/maria/Escritorio/Web Yumbera/collect/fuentes/Aveny/AvenyTWEB.otf");
}




/*==================================================
  Body
  ==================================================*/


html,
body {
    height: 100%;
    width: 100%;
    background-color: #fff;

}

body {
    font-family: 'Roboto', sans-serif;
}

.row{
    margin-left: 0;
    margin-right: 0;
}


a:hover{
    color:white;
}

/*navbar*/


.text-nav {
    font-size: 14px !important;

}

.font-nav {
    padding: 0 !important;
    text-align: center !important;
}

.font-nav a:hover {
    text-decoration: none;
}

.chtp:hover {
    border-bottom: solid 5px #bd6629 !important;
}

.primero:hover {
    color: #bd6629 !important;
}

.py:hover {
    border-bottom: solid 5px #6d3595 !important;
}

.segundo:hover {
    color: #6d3595 !important;
}

.qely:hover {
    border-bottom: solid 5px #585a9b !important;
}

.tercero:hover {
    color: #585a9b !important;
}

.de:hover {
    border-bottom: solid 5px #74a72e !important;
}

.cuarto:hover {
    color: #74a72e !important;
}

.fq:hover {
    border-bottom: solid 5px #719897 !important;
}

.quinto:hover {
    color: #719897 !important;
}

#menumovil{
    display: none;
}

.btnpf{
    text-align: left !important;
}
/*carrousel*/

.prueba-carrousel {
    background-image: url("../../img/fondoCarrousel1.png");
    background-size: cover;
    background-position: center;
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.prueba-carrousel1 {
    background-image: url("../../img/fondoCarrousel2.png");
    background-size: cover;
    background-position: center;
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.prueba-carrousel2 {
    background-image: url("../../img/fondoCarrousel3.png");
    background-size:cover;
    background-position: center;
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.prueba-carrousel3{
    display: flex !important;
     background-image: url("../../img/fondoCarrousel5.png");
    background-size:cover;
    background-position: center;
}

.carrousel-movil{
    display: none !important;
}

.carrousel {
    margin-bottom: 25px;
    height: 65vh !important;
}

.carrousel-logo{
    padding-top: 5vh;
    
}

.carrousel-logo img{
    width: 6.5vw;
}

.carrousel-titulo {
    color: #fff;
    font-family: "Caveat", cursive;
    text-align: center;

}
.carrousel-titulo a, .carrousel-titulo a:hover{
    color: #fff;
}

.carrouseltexto {
    color: #fff;
    font-size: 15px;
    text-align: center;
    margin-bottom: 3vw !important;

}

.fab {
    padding: 4px;
    font-size: 25px;
    color: #b8593c;
}



.social-footer a i.fab{
    color: #fff;
}

.slick-prev {
    z-index: 1;
    left: 10%!important;
}

.slick-next {
    z-index: 1;
    right: 10% !important;
}

.slick-dots {
    z-index: 1;
    bottom: 10px !important;

}

.slick-dots button:before {
    color: grey !important;
    font-size: 10px !important;
}

.slick-active button:before {
    color: #fff !important;
    font-size: 15px !important;
}

.blanca {
    background-color: #fff !important;
        padding: 0 30 0 30;


}

.texto-radio {
    color: #484a8d !important;
    font-family: "Caveat", cursive;
    font-size: 2vw !important;
    margin-bottom: 0 !important;
}

.carrousel-logo1 {
    margin-top: 15vh;
}

.datos-slide {
    font-weight: bold;
    font-size: 14px !important;
    color: #fff !important;
}

.logoslide {
    color: #fff !important;
    font-size: 5vh;
    margin-bottom: 5px;
}

.logotel {
    margin-top: -10px !important;
}

/*login*/

.login-movil{
    display: none !important;
}

.form-login {
    padding: 0.7vw;
    background: rgb(74, 89, 163);
    background: linear-gradient(90deg, rgba(88, 90, 155, 1)0%, rgba(105, 64, 151, 1) 50%, rgba(111, 54, 149, 1) 100%);

}

.registrate {
    font-size: 5vw;
    text-align: center !important;
    border-right: 2px solid #fff;
    margin-top: 9px;
    padding: 0 0 0 0 !important;
}

.ingresar {
    padding-right: 0 !important;
}

.sinregistro {
    color: #fff;
    font-size: 1vw !important;
}

.ingreso {
    color: #fff;
    font-size: 1vw !important;
    text-align: center !important;
    margin-top: 5px;
    padding: 0 0 0 0 !important;
}

.ingreso p {
    text-align: right;
}

.olvidaste {
    color: #FFF;
    font-size: 0.9vw !important;
    padding: 0 !important;
    margin-top: -40px;
}

.btn-btn {
    background-color: #da5e15;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 7px;
    font-size: 1.1vw;
    font-weight: bold;
    height: 2vw !important;
}

.olvido {
    color: #FFF;
    font-size: 1em !important;
}

.pass {
    padding: 0 !important;

}

.password {
    border-radius: 7px;
    border: 1px solid #fff;
    font-size: 1.3vw !important;
}


.dni {
    border-radius: 7px;
    border: 1px solid #fff;
    font-size: 1.3vw !important;
}

::placeholder{
    font-size: 1.2vw !important;
}

/*video*/

.imagen-titulo-video {

    margin-top: 3vw;
}

.titulo-video {
    color: #af6632;
}

.como {

    font-family: "Caveat", cursive;
    margin-bottom: 5vh;
    text-align: center;
}

.video {
    margin-bottom: 5vh;
}

/*que es la yumba*/

.QeslaY {
    background-image: url("../../img/fondoQueEsLaYumba.png");
    background-size: cover;
    padding-top: 7vh;
    padding-bottom: 10vh;
}

.QeslaYcentro {
    color: #fff;
    font-family: "Caveat", cursive;
    text-align: center;
}

.QeslaYcentrotexto {
    color: #fff;
    font-size: 15px;
    padding-top: 5vh;
    text-align: center;
}

.img-QeslaY {
    margin-left: 8vw;
    margin-top: 3vh;
}

.imagen-QeslaY {
    margin-top: -9vh;
}

.imagen-QeslaY img{
    max-width: 100%;
    }


/*donde estamos*/

.logo-maps {
    margin-top: 5vh;
}

.logo-mapa {
    width: 10%;
}

.title-maps {
    color: #74a72e;
    font-family: "Caveat", cursive;
    font-size: 15px;
}

.text-maps {
    background-color: #e0eed5;
    margin-top: 5vh;
    margin-left: 5vw;
    text-align: center;
}

.texto-del-mapa {
    padding: 2vw;
}

.maps {
    margin-top: 5vh;
    margin-bottom: 10vh;
}

/*footer*/

.footer {
    background-color: #b94024;
    padding-top: 30px;
    padding-bottom: 30px;
}

.footer-movil{
    display: none;
}

.datos-footer {
    color: #fff;
    font-size: 0.8vw;
}

.pie {
    color: #fff;
    font-size: 25px;
    padding-right: 10px;
}

.sobre {
    padding-bottom: 5px;
}

.map-marker {
    padding-top: 5px;
}

.social-blanco {
    color: #fff;
}

.color {
    height: 1vh;
}

.color1 {
    background-color: #bd6629;
    color: #bd6629;
}

.color2 {
    background-color: #585a9b;
    color: #585a9b;
}

.color3 {
    background-color: #74a72c;
    color: #74a72c;
}

.color4 {
    background-color: #6d3595;
    color:#6d3595;
}



/*- -------------------------------------------------- -*/


/* modal */

.card-header {
    background-color: white;
}


/* movil */

.hamburguesa{
    font-size: 30px;
}

.oculto{
    display:none;
}

.item-menu-movil {
    text-align: left;
    padding: 1vw;
    padding-left: 5vw !important;
}

.item-menu-movil a{
    font-size: 4vw !important;
}


/*medias*/

@media (max-width: 1300px) {

    .text-nav {
        font-size: 12px !important;
    }

    .datos-footer{
    font-size: 1.5vw !important;
}

.carrousel-logo img{
width: 8vw;
}

}

@media(max-width: 991px){

    .carrousel-logo img{
width: 9vw;
}

.sinregistro{
    font-size: 1.3vw !important;

}

.ingreso{
    font-size: 1.3vw !important;
}

.olvidaste{
    font-size: 1.1vw !important;
}

.btn-btn{
    font-size: 1.5vw !important;
    height: 3vw !important;
}
 .datos-footer{
    font-size: 1.6vw !important;
}

}

@media(max-width: 767px){

    

/*--navbar--*/

   .nav-bar {
        display: none !important;
    }

    #menumovil{
        display: flex;
        padding-top: 4vw;
        padding-bottom: 4vw;
    }

.hamburguesa{
    padding-right: 6vw;
}

.colormenu{
   margin-bottom: 5vw !important;
}

.menu-movil{
    position: absolute;
    z-index: 1;
    background-color:#fff;
    padding: 0 0 5vw 0 !important;
}


/*--carrousel--*/

.carrousel-movil{
    display: block !important;
}

.carrousel-pc{
    display: none !important;
}

.carrousel{
    width: 100% !important;
    height: 60% !important;

}

   .prueba-carrousel {
        background-image: url("../../img/fondoCarrousel1_movil.png");
        background-size: cover;
        background-position: center;   
    }

.carrousel-logo1{
    width: 80%;
    margin-top: 0 !important;
    padding-top: 7vw !important;
}
   
   .carrouseltexto5{
    color: #fff;
    font-family: "Caveat", cursive;
    text-align: center;
    font-size: 5vw;

}
   

.carrouseltexto{
    font-size: 14px;
}

.carrousel-logo img{
width: 10vw;
}

.slick-prev {
    left: 5%!important;
}

.slick-next {
    right: 5% !important;
}
.datos-slide{
    font-size: 13px !important;
}

.logotel{
    padding-top: 1vw;
}

.logomaps{
    padding-top: 1vw;
}

.texto-radio{
    font-size: 3vw !important;
}

/*--login--*/

    .login{
        display: none !important;
    }

    .login-movil{
        display: block !important; 
}

.form-login-movil{
     background: rgb(74, 89, 163);
     background: linear-gradient(90deg, rgba(88, 90, 155, 1)0%, rgba(105, 64, 151, 1) 50%, rgba(111, 54, 149, 1) 100%);
     padding-top: 5vh !important;
    padding-bottom: 5vh !important;
}

.registrate-movil{
    text-align: center !important;
  
    height: 15vh !important;
    border-bottom: solid 3px #fff;
}

.sinregistro-movil{
     color: #fff !important;
     font-size: 4.5vw;
}

.ingreso-movil{
   text-align: center !important;
    font-size: 4.5vw;
    color: #fff !important;
    height: 15vh !important;
}

.dni-email-movil{
    height: 10vh !important;
}

.dni-movil{
    height: 8vh!important;
    border-radius: 15px !important;
}

.pass-movil{
    height: 10vh !important;
    font-size: 1rem !important;
}


.password-movil{
    height: 8vh!important;
    border-radius: 15px !important;
}

.btn-btn-movil {
    background-color: #da5e15;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 15px;
    font-size: 5vw;
}
.olvi-movil{
     height: 15vh!important;
}

.olvidaste-movil{
    padding: 0 0 0 0 ;
    text-align: center !important;
    font-size: 4vw;
    color: #fff !important;
}

/*--video--*/

.imagen-titulo-video {

    margin-top: 0 !important;
}

 /*--que esla yumba--*/

.img-QeslaY{
    margin-left: 0 !important;
}
    .QeslaY {
        background-image: url("../../img/fondoQueEsLaYumba_movil.png");
        background-size: cover;
        background-position: center;
    }


/*-- nodos --*/

.logo-mapa {
    width: 15%;
}

.text-maps{
    margin-left: 0!important;
}

#map{
    width:100%;
    height: 400px;
}

/*--footer--*/

.footer{
    display: none;
}

.footer-movil{
    display: flex;
    background-color: #b94024;
    padding-top: 30px;
    padding-bottom: 30px;

}

.social-footer a i.fab{
    padding-top: 3vw;
}

.datos-footer{
    font-size: 2.2vw !important;
}

::placeholder{
        font-size: 2.5vw !important;
    }
}

@media(max-width: 575px){

      ::placeholder{
        font-size: 3vw !important;
    }
    /*--carrousel--*/

.carrousel img{
    width: 15vw;
}

    .carrousel-titulo h1{
        font-size: 35px !important; 
    }

.carrouseltexto{
    text-align: center;
    font-size: 12px;
}

   

    .video-video{
        width: 90%;
    }

    .texto-radio{
    font-size: 3vw !important;
}

.blanca{
    display: none !important;
}

}