/* jar estilos personalizados, sobreescribimos los valores por defecto de bootstrap */

/* fondo de la web estilo saco */
body {
  padding-bottom: 20px;
}

.navbar {
  margin-bottom: 20px;
}

body {
  background-image: url(../../images/textura_fondo.jpg);
  font-family: Bubblegum Sans, PT Sans, Arial, Helvetica, Geneva, sans-serif;

  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #552F1C;
}

/* que las imagenes sean adaptativas */
img {
  width: 100%;
  height: auto; 
}



/* borde sombreado */
.sombreado {
  box-shadow: 0 7px 18px rgba(0,0,0,.5);
}
p{
  font-family: Nunito, Arial, PT Sans, Helvetica, Geneva, sans-serif;
  text-align: justify;
}
.negrita{
  font-weight:bold;
}
a{
  font-family: Bubblegum Sans, Arial, Helvetica, Geneva, sans-serif;
  color: #552F1C;
}

/* para el scroll smooth */
* {
    scroll-behavior: smooth;
}


/* Texto oculto para que se vean correctamente los telefonos pero no se copie y pegue */
.oculto{
  color:#FFFFFF;
}
/* ponemos el fondo blanco en los textos */
.pastillasuperior{
  margin:0px 15px;
  padding:0px;
  background-image: url(../../images/pastilla_superior.png);
  background-repeat: no-repeat;
/*  width:764px;*/
  background-position: right;
  height:55px;
}
.pastillamedio {
  margin:0px 15px;
  background-image:url(../../images/pastilla_medio.png);
  background-repeat:repeat-y;
  background-position: right;
  padding-right: 50px; /* para que no se junte la letra con el borde de la imagen de fondo */
  padding-left: 30px;
}
.pastillainferior{
  margin:0px 15px;
  padding:0px;
  background-image:url(../../images/pastilla_inferior.png);
  background-repeat:repeat-y;
/*  width:764px;*/
  background-position: right;

}
.cumplecostado{
  margin-left: -50px;
}
.cumple_costado{
  margin-top: -50px;
  position: absolute;
  margin-top: 18px;
  font-size: 28px;
  left: -13px;
  color: white;
}


.columnacaballo{
  margin-left: -15px;
}

.caballocostado{
  margin-left: -36px;
}

.cabeza_caballo{
  margin-top: -50px;
  position: absolute;
  margin-top: 118px;
  font-size: 28px;
  left: -13px;
  color: white;
}


/* linea superior que casa con el logotipo */
.lineasuperior {
  position: relative;
  margin-top: -50px;
  margin-bottom: -50px;
  padding-left: 10px;
  padding-right: 10px;
  width:100%;
  background-color: #542e1c;
  height:15px;
}

/* Reducción del tamaño de la imagen de enlace para que aparezca el asistente de invitaciones*/
#imagen_asistente_invitacion_en_texto{
  display: block;
  width: 50%;
  margin: auto;
}
/* fin de reducción del tamaño de la imeagen de enlace para que aparezca el asistente de invitaciones */

/* colocacion correcta de la barra de menu */

.nav-item{
  font-size: 17px;
/*  margin-top: -70px;*/
}

.navbar-toggler {
  background-color: white;
}
.navbar-light{
      color: #552F1C;
}
.navbar-nav{
      color: #552F1C;
}
.navbar-link{
      color: #552F1C;
}


.texto-menu{
      color: #552F1C;
}
.listamenu{
  margin-bottom: 120px;
}

.carrousel{
  margin-left: 15px;
  padding-left: 0px;
  padding-right: 0px;
}
.carousel.slide{
  border-style: solid;
  border-width: 10px;
  border-color: #fafafa;
  z-index: -1;
  margin-top: -45px;


/* tamaño del carousel antiguo 
  width:945px;
  height:424px;
  display:block;  
  */
}

/* Make the image fully responsive */
.carousel-inner img {
    width: 100%;
    height: 100%;
}



.ajuste{
  margin-top: -130px;
}

/* Estilos para el div de aceptacion de cookies lopd */
#cookiebox {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 999999;
    display: block;
}
#cookieinfobox {
    margin: auto;
    position: relative;
    top: 0px;
    height: 25%;
    width: 100%;
    text-align:center;
    background-color: #ffeeeeef;
}
#cookieinfobox p {
    line-height:25px;
    font-size:12px;
    text-align:center;
}
#cookieinfobox p a {
    margin-right:5px;
    text-decoration: underline;
}
/* Fin de estilos para el div de aceptacion de cookies */

/* Estilos para el div de confirmación de envio del formulario */
#mensajeok {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 999999;
    display: none;
}
#mensajeokbox {
    margin: auto;
    position: relative;
    top: 0px;
    height: 25%;
    width: 100%;
    text-align:center;
    background-color: #ffeeee;
}
#mensajeokbox p {
    line-height:25px;
    font-size:12px;
    text-align:center;
}
#mensajeokbox p a {
    margin-right:5px;
    text-decoration: underline;
}
/* Fin de estilos para el div de confirmacion del envio del formulario */


/* ocultacion del punto en el ul de dudas y colocamos la imagen en su lugar */

.listadudas{
  list-style-type: none;
  list-style-image:url("../../images/flecha_marron.png");
}


/*  estas lineas son para elegir el tipo de invitacion */


#panelinvitacion {
  /*display:none;*/
  background-color:transparent;
  /*border:3px;
  padding:0px;
  margin-top:-80px;
  margin-left:550px;
  position:relative;
  height:150px;
  */
  color:#552F1C;
  width:100%;

  display: block;
  align-items: center;
  
}
#panelinvitacion div{
  display: none;
  width: 100px;
  margin-left: 40%;
}



#whatsappimg{
  /* solo lo vamos a mostrar en dispositivos moviles */
  display: none;
  width: 50px;
  height: 50px;

  position: sticky; 
}

.imgactividades{
  width:100%;
}

.txtimg{
    font-family: Bubblegum Sans, Arial, Helvetica, Geneva, sans-serif;
    /*text-transform:   lowercase;  */
    text-align:   left; 
    display: block;
    background-color: rgba(114, 69, 46, 0.61);
}



/* Si el screen es muy pequeño */
@media (max-width: 354px) {
    .carrousel{
      margin-left: 0px;
      padding-left: 0px;
      padding-right: 0px;
    }
    p{
      font-family: Nunito, Arial, PT Sans, Helvetica, Geneva, sans-serif;
      text-align: left;
    }
    #whatsappimg{
        display:block;
        width:40px;
        height:40px;
        color#fff;
        position: fixed;
        right:20px;
        bottom:20px;
        border-radius:50%;
        line-height:80px;
        text-align:center;
        z-index:999; 
    }  

    h1, .h1{
      font-size: 1.5rem;
    }
    h2, .h2{
      font-size: 1rem;
    }    
      /* centramos la hamburguesa si el screen es muy pequeño */
    .navbar-toggler {
        margin-bottom: 2rem;
        margin-left: 6rem;
    }
    .pastillasuperior{
      background-image: none;

    }    
    .pastillamedio{
      background-image: none;
      background-color: white;
      width: 100%;
      margin:0;

    }
    .pastillainferior{
      background-image: none;

    }    
    #myCarousel{
      border-left: 0px;
      border-right: 0px;
      border-top: 0px;
      border-bottom: 0px;
    }
    .navbar-brand{
      margin-left: 2rem;
    }
    .textoactividades{
      top: 10%;
    }
    .textoactividades p{
      font-size: 50%;
    }
    .tituloactividades{
      font-size: 50%;
      background: none;
      width: 80%;
    }
    .tituloactividades p{
      font-size: 90%;
    }
    .txtimg{
        font-family: Bubblegum Sans, Arial, Helvetica, Geneva, sans-serif;
       /* text-transform:   lowercase; */ 
        text-align:   left; 
        display: block;
        background-color: rgba(114, 69, 46, 0.61);
    }    
  
}
/* si el screen es muy grande */
@media (min-width: 1200px) {
    .carrousel{
      margin-left: 25px;
      padding-left: 0px;
      padding-right: 0px;
    }
}
/* si el screen es pequeño y menor*/
@media (max-width: 991px) and (min-width: 353px) {
    .carrousel{
      margin-left: 25px;
      padding-left: 0px;
      padding-right: 0px;
    }
    p{
      font-family: Nunito, Arial, PT Sans, Helvetica, Geneva, sans-serif;
      text-align: left;
    }
    #whatsappimg{
        display:block;
        width:40px;
        height:40px;
        color#fff;
        position: fixed;
        right:20px;
        bottom:20px;
        border-radius:50%;
        line-height:80px;
        text-align:center;
        z-index:999; 
    }

    .textoactividades{
      font-size: 15%;
      top: 20%;
      
    }  
    p{
      text-align: left; 
    }
    h1,h2,h3,h4{
      font-size: 1.6rem;
    }
    /* ocultamos la linea superior si el screen es pequeño*/
    .lineasuperior {
        background-color: transparent;
    }    
    .pastillasuperior{
      background-image: none;

    }
    .pastillamedio{
      background-image: none;
      background-color: white;
      width: 100%;
      margin:0;
    }

    .pastillainferior{
      background-image: none;

    }
    .carrousel{
      width: 100%;
      margin:0;
      padding: 0;
      border:0;
    }
    img{
      margin:0;
      padding: 0;
      border:0;    
      width: 100%  
    }
    .txtimg{
        font-family: Bubblegum Sans, Arial, Helvetica, Geneva, sans-serif;
        /*text-transform:   lowercase;  */
        text-align:   left; 
        display: block;
        background-color: rgba(114, 69, 46, 0.61);
    }
    .tituloactividades{
      font-size: 150%;
    } 
    /* modifico el contenido de las imagenes si estamos en modo responsive si el navegador no permite webp */  
    #a1 .no-webp img{
      content: url("../../images/actividades/rgamo.jpg");
      margin-top: 5%;
    }
    #b1 .no-webp img{
      content: url("../../images/actividades/rponi.jpg");
      margin-top: 5%;
    }
    #a2 .no-webp img{
      content: url("../../images/actividades/rgallina.jpg");
      margin-top: 5%;
    }
    #b2 .no-webp img{
      content: url("../../images/actividades/rvaca.jpg");
      margin-top: 5%;
    }  
    #a3 .no-webp img{
      content: url("../../images/actividades/rtren2.jpg");
      margin-top: 5%;
    }
    #b3 .no-webp img{
      content: url("../../images/actividades/rtirolina.jpg");
      margin-top: 5%;
    }  
    #a4 .no-webp img{
      content: url("../../images/actividades/rpozo.jpg");
      margin-top: 5%;
    }
    #b4 .no-webp img{
      content: url("../../images/actividades/rpaseo.jpg");
      margin-top: 5%;
    }    
    #a5 .no-webp img{
      content: url("../../images/actividades/rescalada.jpg");
      margin-top: 5%;
    }
    #b5 .no-webp img{
      content: url("../../images/actividades/rnido.jpg");
      margin-top: 5%;
    }   
    #a6 .no-webp img{
      content: url("../../images/actividades/rarco.jpg");
      margin-top: 5%;
    }
    #b6 .no-webp img{
      content: url("../../images/actividades/rliana.jpg");
      margin-top: 5%;
    }     
    #a7 .no-webp img{
      content: url("../../images/actividades/rcalavera.jpg");
      margin-top: 5%;
    }
    #b7 .no-webp img{
      content: url("../../images/actividades/rcabras.jpg");
      margin-top: 5%;
    }   
 /* modifico el contenido de las imagenes si estamos en modo responsive si el navegador si permite webp */  
    #a1 .webp img{
      content: url("../../images/actividades/rgamo.jpg");
      margin-top: 5%;
    }
    #b1 .webp img{
      content: url("../../images/actividades/rponi.jpg");
      margin-top: 5%;
    }
    #a2 .webp img{
      content: url("../../images/actividades/rgallina.jpg");
      margin-top: 5%;
    }
    #b2 .webp img{
      content: url("../../images/actividades/rvaca.jpg");
      margin-top: 5%;
    }  
    #a3 .webp img{
      content: url("../../images/actividades/rtren2.jpg");
      margin-top: 5%;
    }
    #b3 .webp img{
      content: url("../../images/actividades/rtirolina.jpg");
      margin-top: 5%;
    }  
    #a4 .webp img{
      content: url("../../images/actividades/rpozo.jpg");
      margin-top: 5%;
    }
    #b4 .webp img{
      content: url("../../images/actividades/rpaseo.jpg");
      margin-top: 5%;
    }    
    #a5 .webp img{
      content: url("../../images/actividades/rescalada.jpg");
      margin-top: 5%;
    }
    #b5 .webp img{
      content: url("../../images/actividades/rnido.jpg");
      margin-top: 5%;
    }   
    #a6 .webp img{
      content: url("../../images/actividades/rarco.jpg");
      margin-top: 5%;
    }
    #b6 .webp img{
      content: url("../../images/actividades/rliana.jpg");
      margin-top: 5%;
    }     
    #a7 .webp img{
      content: url("../../images/actividades/rcalavera.jpg");
      margin-top: 5%;
    }
    #b7 .webp img{
      content: url("../../images/actividades/rcabras.jpg");
      margin-top: 5%;
    }   
          
} 

/* css para el pie de la pagina, enlaces youtube y facebook y copyright */
#cuadroinstagram a{
  width:32px;
  height:32px;
  position:absolute;
  top:10px;
  right: 0em;
  background-image:url(../../images/logo_instagram.png);
  z-index:800;
}
#cuadroinstagram a:hover{
  top:20px;
}
#cuadroyoutube a{
  width:32px;
  height:32px;
  position:absolute;
  top:10px;
  right: 0em;
  background-image:url(../../images/logo_youtube2.png);
  z-index:800;
}
#cuadroyoutube a:hover{
  top:20px;
}
#cuadrofacebook a{
  width:32px;
  height:32px;
  position:absolute;
  top:10px;
  right: 0em;
  background-image:url(../../images/logo_facebook.png);
  z-index:800;
}
#cuadrofacebook a:hover{
  top:20px;
}
div#copyright p{
  width:95%;
  margin-left:0px;
  color:#72452E;
  font-family: Nunito;
  font-size:12px;
  line-height:30px;
} 
#copybarra{
  bottom: 1em;
  width:100%;
  color: #72452E;
  height: 2px;
  border-color: #72452E;
  margin-top: 0em;
}
}
/* fin de css para el pie de la pagina */

/* esto son pruebas para hacer animaciones */


@-webkit-keyframes pulse { 
    0% { -webkit-transform: scale(1); } 
    50% { -webkit-transform: scale(1.1); } 
    100% { -webkit-transform: scale(1); } 
} 
@keyframes pulse { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.1); } 
    100% { transform: scale(1); } 
} 
.pulse.go { 
    -webkit-animation-name: pulse; 
    animation-name: pulse; 
}
.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}

/***********
* bounceIn *
************/
@-webkit-keyframes bounceIn { 
    0% { 
        opacity: 0; 
        -webkit-transform: scale(.99); 
    } 

    50% { 
        opacity: 1; 
        -webkit-transform: scale(1.02); 
    } 

    70% { 
        -webkit-transform: scale(.99); 
    } 

    100% { 
         -webkit-transform: scale(1); 
    } 
} 

@keyframes bounceIn { 
    0% { 
        opacity: 0; 
        transform: scale(.99); 
    } 

    50% { 
        opacity: 1; 
        transform: scale(1.02); 
    } 

    70% { 
        transform: scale(.99); 
    } 

    100% { 
        transform: scale(1); 
    } 
} 

.bounceIn.go { 
    -webkit-animation-name: bounceIn; 
    animation-name: bounceIn; 
}