/** HOJA DE ESTILO PARA ALAMAEX *****/
/*INDICE*/
/* 1.- FAMILIA DE FUENTES 
   1.1 TAMAÑOS Y FAMILIAS
   2.- HEADER
   2.1 HEADER CINTILLO 
   2.2 HEADER MENU

    3. CARRUCEL

        3. RESPONSVE CARRUCEL
            

    4. NOSOTROS

    5.- PRODUCTOS

    6.- CONTACTO

/* 1.- FAMILIA DE FUENTES */

@font-face {
      font-family: "encabezadosMenu";
      src: url("../fonts/Titillium Web regular.ttf");
    }

  @font-face {
      font-family: "encabezadosH2";
      src: url("../fonts/Titillium Web 300.ttf");
    }

  @font-face {
      font-family: "parrafos";
      src: url("../fonts/Titillium Web 200.ttf");
    }

  @font-face {
      font-family: "encabezadosH3";
      src: url("../fonts/Titillium Web regular.ttf");
    }

body{
 
 
}

.slider-h2{
   
    font-family: "encabezadosH2";
    font-weight: bold;
    color: #fff;
    font-size: 60px;
    padding-right: 20px;
}

.slider-h3{
   
     font-family: "encabezadosH3";
    font-weight:600;
    color: #fff;
    font-size: 40px;
    padding-right: 20px;
}

.slider-h4{
   
     font-family: "encabezadosH3";
    font-weight:600;
    color: #fff;
    font-size: 20px;
    text-align: center;
}

.header
{   
  background-color: #9F2241;
    height: 100%;
}

#idMenu{
    background-color: #9F2241;
    width: 100%;
    
}

.dark1{
    background-color: #000;
    width: 100%;
}



#idMenu p{
    font-size: 50px;
    color: #fff;
}

#idMenu h3{
    margin-top: 20px;
     font-family: "encabezadosMenu";
    color: #fff;
    font-size: 20px;
    padding-right: 20px;
}

#idMenu .bg-dark {
  background-color: #9F2241 !important;
}

.ajuste-logo {
    padding: 10px;
    width: 100%;
  
}

#idMenu .bg-dark1{
    background-color: #000 !important;
}

@media (max-width: 667px) { 
    
.ajuste-logo {
    padding: 0px;
    width: 200px;
   margin-left: -100px;
    margin-top: 10px;
  
}
    
    .navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
   right: 20px;
    margin-top: -40px;
        position: absolute;
        
}

}



.fx{
    position: fixed;
    width: 95%;
    top:0px;
    box-shadow: 5px 0 10px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 5px 0 10px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 0 10px 5px rgba(0,0,0,0.5);
    -o-box-shadow: 5px 0 10px 5px rgba(0,0,0,0.5);
    -ms-box-shadow: 5px 0 10px 5px rgba(0,0,0,0.5);
    z-index: 10;
}




/* 3. CARRUCEL */

#carousel{
   
    width: 100%;
    height: 100%;
   
}




/* Carousel base class */

.carousel {
   
  margin-bottom: 1rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {

    left: 10%;
    right: 10%;
   height: 150px;
   padding: 10px;
   z-index: 10;
  bottom: 48%;
   
}

.carousel-caption1 {
 background-color: rgba(255, 0, 0, 0.2);
    left: 10%;
    right: 10%;
   height: 150px;
   padding: 10px;
   z-index: 10;
  bottom: 48%;
   
}

.carousel-caption h5{
     font-family: "encabezadosH2";
font-style:italic;
    font-size: 35px;
    
}

.carousel-caption p{
     font-family: "encabezadosH2";
font-style:normal;
    font-size: 20px;
    
}


.carousel-caption b{
font-size: 85px;
}

/* Declare heights because of positioning of img element */
.carousel-item { 
    margin-top: 120px;
  height: 35rem;
    background-color: rgba(0,0,0,0.7);

}

.carousel-item a{
    text-align: left;
    color: #fff;
}

.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.carajuste{
    width: 97%;
     height: 20rem;
    
}

.carajuste img{
    width: 100%;
     height: 20rem;
    
}

.img-testimonials{
    width: 200px;
}




.boton_carucel{
    font-family: 'Helvetica 35 Ligth';
font-style: normal;
font-weight: normal;
    text-decoration: none;
    padding: 10px;
    padding-left: 30px;
    padding-right: 500px;
    font-weight: 600;
    font-size: 25px;
    color: #fff;
    background-color: #e1134f;
   
  
  }

.boton_carucel:hover{
   font-family: 'Helvetica 35 Ligth';
font-style: normal;
font-weight: normal;
    text-decoration: none;
    padding: 10px;
    padding-left: 30px;
    padding-right: 500px;
    font-weight: 600;
    font-size: 25px;
    color: #fff;
    background-color: #e1134f;
    border-radius: 25px;
   
  }

.boton_modal{
    font-family: 'Helvetica 35 Ligth';
font-style: normal;
font-weight: normal;
    text-decoration: none;
    padding: 10px;
    padding-left: 30px;
    padding-right: 500px;
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    background-color: #e1134f;
   border-radius: 10px;
  
  }

/*3. RESPONSIVE CAROCEL*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) 
{
    
    .carousel-item { 
  height: 13rem;

}
    
.carousel-item > img {
  height: 13rem;
}
    
.carousel-caption {

  height: 150px;
    bottom: 25%;
     
 
}
    
    .img-testimonials{
    width: 100px;
}

    
   /* .carousel-caption {
   
    left: 10%;
    right: 10%;
   height: 150px;
   padding: 10px;
   z-index: 10;
  bottom: 48%;
}*/

.carousel-caption h5{
     font-family: "encabezadosH2";
font-style:italic;
    font-size: 10px;
    
}

.carousel-caption p{
     font-family: "encabezadosH2";
font-style:normal;
    font-size: 10px;
    
}
    
.carousel-caption h1{

font-size: 35px;
}
    
.carousel-caption b{
font-size: 40px;
}
    
.boton_carucel{

    padding: 10px;
    padding-left: 35px;
    padding-right: 240px;
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    background-color: #e1134f;
   
  
  }

.boton_carucel:hover{
   font-family: 'Helvetica 35 Ligth';
font-style: normal;
font-weight: normal;
    text-decoration: none;
    padding: 10px;
    padding-left: 30px;
    padding-right: 100px;
    font-weight: 600;
    font-size: 25px;
    color: #fff;
    background-color: #e1134f;
    border-radius: 25px;
   
  }
      
} 

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }


}

.ajuste_video{
    width: 100%;
   
}


/************************** ARTICLE *****************************/

/* Extra small devices (portrait phones, less than 576px)
 No media query since this is the default in Bootstrap*/

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) { 

    #capas{
        display: none;
    }
    
    #sp-home{
        display: none;
    }
   
}

/*Medium devices (tablets, 768px and up)*/
@media (max-width: 768px) {
  #capas{
        display: none;
    }
    
    #sp-home{
        display: none;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  #capas-movil{
        display: none;
    }
    
    #sp-home-movil{
       display: none; 
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  #capas-movil{
        display: none;
    }
    
    #sp-home-movil{
        display: none;
    }
}




/***************************************** 4. NOSOTROS *************************************/
#nosotros{
background-image:url(../img/fondos/body-chapulhuacan.png);
    background-size:100%;
   

}

#nosotros h2{
  font-family: "encabezadosH2";
    color: #fff;
    font-size: 35px;
    
}

#nosotros .nosotros-hr{
        border: 0;
    height: 5px;
    background-image: linear-gradient(to right, rgba(0, 151, 171, 0), rgba(0, 151, 171, 0.75), rgba(0, 151, 171, 0));
}

#nosotros p{
    font-family: "parrafos";
    line-height: 150%;
    color: #666666;
    font-size: 18px;   

    
}

#nosotros .title-nosotros
{
    background-color: black;
    margin-top: 20px;
      z-index: 9999;
}

#nosotros .logo-nosotros{
    width: 40%;
}

.boton_nosotros{
    padding: 10px;
   font-family: 'Helvetica 35 Ligth';
    color: #fff;
    font-size: 20px;
    background-color: #b70049;
    border-radius: 6px;
 
  }

#nosotros a{
    color: #ffF;
}

.boton_nosotros:hover{
  padding: 10px;
   font-family: "parrafos";
    color: #fff;
    font-size: 24px;
    background-color: #b70049;
    border-radius: 6px;
  }

#nosotros .img-nosotros{
    width: 100%;
    padding: 20px;
  } 






/* Extra small devices (portrait phones, less than 576px)
 No media query since this is the default in Bootstrap*/

/* Small devices (landscape phones, 576px and up) */


/****************** PRODUCTOS *************************/
#productos{
    background-color: #5079b1;
    width: 100%;
    height: 100%;
  
}

#productos h2{
    font-family: "encabezadosH2";
    color: #808080;
    font-size: 36px;
    
}

#productos h3{
    font-family: "encabezadosH3";
    color: #666666;
    font-size: 24px;
    
}

#productos p{
     font-family: "parrafos";
     color: #666666;
    font-size: 24px;
    
}

#productos .title-productos
{
    margin-top: 20px;
}

#productos .img-productos
{
    width: 100%;
}

#productos .title-productos2
{
    font-size: 30px;
}

#productos .btn-catalogo{
    background-color: #0064a5;
    padding: 10px;
}

#productos .btn-catalogo h2{
    
    font-size: 24px;
    color: #fff;
}

#detalle-productos{
    background-image: url(../img/rocas-cinta-producto.png);
    height: 100%;
}

#detalle-productos .transparencia-1{
   background-color: rgba(184, 143, 111, 0.4);
    z-index: 9999;
    
}

#detalle-productos .transparencia-1 h2{
    font-family: "encabezadosH2";
    font-weight: 900;
   color: #fff;
     font-size: 24px;
    text-align: right;
    margin-top: 30px;
    padding-right: 20px;
}

#detalle-productos .transparencia-1 p{
     font-family: "parrafos";
    font-weight: 200;
   color: #fff;
     font-size: 18px;
    text-align: right;
    padding-right: 20px;
   
}

#detalle-productos .transparencia-2{
   background-color: rgba(99, 146, 152, 0.4);
    z-index: 9999;
    
}

#detalle-productos .transparencia-2 h2{
    font-family: "encabezadosH2";
    font-weight: 900;
   color: #fff;
     font-size: 24px;
    text-align: right;
    margin-top: 30px;
    padding-right: 20px;
}

#detalle-productos .transparencia-2 p{
     font-family: "parrafos";
    font-weight: 200;
   color: #fff;
     font-size: 18px;
    text-align: right;
    padding-right: 20px;
   
}

#detalle-productos .transparencia-3{
   background-color: rgba(0, 139, 179, 0.4);
    z-index: 9999;
  
    
}

#detalle-productos .transparencia-3 h2{
    font-family: "encabezadosH2";
    font-weight: 900;
   color: #fff;
     font-size: 24px;
    text-align: right;
    margin-top: 30px;
    padding-right: 20px;
}

#detalle-productos .transparencia-3 p{
     font-family: "parrafos";
    font-weight: 200;
   color: #fff;
     font-size: 18px;
    text-align: right;
    padding-right: 20px;
   
}

.text-productos-der{
        text-align: right;
    }

.text-productos-izq{
        text-align: left;
    }

/****************** FIN  PRODUCTOS *************************/

#cintillo-servicios{
    
}

#cintillo-servicios .cin-servicios{
    border: 10px solid #9F2241;

}


/****************** TRANSPARENCIA *************************/
#transparencia{
 background-image:url(../img/fondos/body-chapulhuacan.png);
    background-size:cover;
    width: 100%;
    height: 100%; 
  
}

#trasnparencia h2{
    font-family: "encabezadosH2";
    color: #808080;
    font-size: 30px;
    
}

#transparencia .transparencia-hr{
     border: 0;
    height: 5px;
     background-image: linear-gradient(to right, rgba(232, 184, 35, 0), rgba(232, 184, 35, 0.75), rgba(232, 184, 35, 0));
    
}

#transparencia h2{
    font-family: "encabezadosH2";
    color: #fff;
    font-size: 35px;
    
}

#transparencia p{
     font-family: "parrafos";
     color: #666666;
    font-size: 18px;
    
}

#transparencia .title-transparencia{
        background-color: black;
    margin-top: 20px;
      z-index: 9999;
    margin-bottom: 10px;
    
}

/****************** NOTICIAS *************************/
#noticias{
 background-image:url(../img/fondos/body-chapulhuacan.png);
    background-size:cover;
    width: 100%;
    height: 100%; 
    margin-bottom: 20px;
  
}

#noticias h2{
    font-family: "encabezadosH2";
    color: #808080;
    font-size: 30px;
    
}

#noticias .noticias-hr{
     border: 0;
    height: 4ederimage: linear-gradient(to right, rgba(232, 184, 35, 0), rgba(232, 184, 35, 0.75), rgba(232, 184, 35, 0));
    
}

#noticias h2{
    font-family: "encabezadosH2";
    color: #fff;
    font-size: 35px;
    
}

#noticias p{
     font-family: "parrafos";
     color: #666666;
    font-size: 18px;
    
}

#noticias .title-noticias{
        background-color: black;
    margin-top: 20px;
      z-index: 9999;
    margin-bottom: 10px;
    
}

#noticias .ajuste-noticias{
    width: 100%;
    padding: 10px;
}

#noticias h3{
    font-size: 20px;
}

#noticias .texto-noticia{
    padding: 10px;
}

#noticias .texto-noticia p{
    font-size: 15px;
}

.boton_noticias{
    padding: 5px;
   font-size: 15px;
    color: #0C0001;
    background-color: #e8b823;
    border-radius: 6px;
    border: 2px solid #e8b823;
  }

.boton_noticias:hover{
    padding: 5px;
   font-size: 15px;
    color: #fff;
    background-color: #000;
    border-radius: 6px;
    border: 2px solid #fff;
  }

    

/****************** TURISMO *************************/
#turismo{
 background-image:url(../img/fondos/fondo-turismo.jpg);
    background-size:cover;
    width: 100%;
    height: 100%;
    
    margin-bottom: 20px;
  
}

#turismo h2{
    font-family: "encabezadosH2";
    color: #808080;
    font-size: 30px;
    
}

#turismo .turismo-hr{
     border: 0;
    height: 5px;
     background-image: linear-gradient(to right, rgba(232, 184, 35, 0), rgba(232, 184, 35, 0.75), rgba(232, 184, 35, 0));
    
}

#turismo h2{
    font-family: "encabezadosH2";
    color: #fff;
    font-size: 35px;
    
}

#turismo p{
     font-family: "parrafos";
     color: #666666;
    font-size: 18px;
    
}

#turismo .title-turismo{
        background-color: black;
    margin-top: 20px;
      z-index: 9999;
    margin-bottom: 10px;
    
}

#turismo .ajuste-logo-turismo{
    width: 90%;
margin-top: 20px;
}

#turismo .ajuste-foto-turismo{
    width: 100%;
padding: 5px;
}

#turismo .logo-turismo{
   margin-top: 10%;
}


/****************** TRANSPARENCIA *************************/
#social{
 background-image:url(../img/fondos/body-chapulhuacan.png);
    background-size:cover;
    width: 100%;
    height: 100%; 
  
}

#social h2{
    font-family: "encabezadosH2";
    color: #808080;
    font-size: 30px;
    
}

#social .social-hr{
     border: 0;
    height: 5px;
     background-image: linear-gradient(to right, rgba(232, 184, 35, 0), rgba(232, 184, 35, 0.75), rgba(232, 184, 35, 0));
    
}

#social h2{
    font-family: "encabezadosH2";
    color: #fff;
    font-size: 35px;
    
}

#social p{
     font-family: "parrafos";
     color: #666666;
    font-size: 18px;
    
}

#social .title-social{
        background-color: black;
    margin-top: 20px;
      z-index: 9999;
    margin-bottom: 10px;
    
}

/*************** BANNER 1 *****************************/

/*************** BANNER 1 *****************************/
#testimonials{
       width: 100%;
    height: 100%; 
    
}


.parallax {
  /* The image used */
  background-image: url("../img/slider/soluciones-tecnologia-02.jpg");

  /* Set a specific height */
  height: 100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax2 {
  /* The image used */
  background-image: url("../img/slider/chapulhuacan-01.jpg");

  /* Set a specific height */
  height: 100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ajuste_video {
    width: 100%;
}







/****************** CONTACTOS *************************/
#contacto{
    background-color: #9F2241;
    width: 100%;
    height: 100%;
  
}

#contacto h2{
    font-family: "encabezadosH2";
    color: #fff;
    font-size: 24px;
    
}

#contacto p{
    font-family: "parrafos";
    color: #fff;
    font-size: 18px;
    
}

.btn-primary {
    color: #fff;
  background-color: #004888;
  border-color: #004888;
}

.btn-primary1 {
    color: #fff;
  background-color: #e1134f;
  border-color: #e1134f;
}



#contacto .title-contacto
{
    margin-top: 20px;
}

.form-group{
   padding: 20px;
}

.separar{
    margin-top: 15px;
}


/****************** FIN  CONTACTOS *************************/







/**************************** FOOTER *******************************/
.footer{
background-color: #000;
    width: 100%;
    height: 100%;
}

.footer a{
color: #fff;    
}

.footer p{
 font-family: "parrafos";
    color: #fff;
    font-size: 14px;   
}

.pie-social{
    padding-right: 2px
}

.foter-bg{
    text-align: center;
}


.foter-bg p{
    margin-top: 50px;
    color: #fff;
    
}

.footer-pre p{
    text-align: center;
}

.footer-pre p{

    color: #fff;
}

.fot-pre{
    margin-top: 30px;
}

.fot-img{
    padding-right: 8px;
  
}

.footer-post p{

    color: #fff;
}

.boton_sus{
    padding: 5px;
   font-size: 15px;
    color: #0C0001;
    background-color: #fff;
    border-radius: 6px;
    border: 2px solid #000;
  }

.boton_sus:hover{
    padding: 5px;
   font-size: 15px;
    color: #fff;
    background-color: #000;
    border-radius: 6px;
    border: 2px solid #fff;
  }

.facefoteer {
    font-size: 25px;
}

.facefoteer a{
    color: #fff;
}



/******************* FOOTER RESPONSIVE **********************/


@media(max-width:768px){

    .footer{

    height: 100%;
}
 }



/*****************************************************************/

/* CLASES AUXILIARES */

.text-centro{
   text-align: center;   
}

.text-rigth{
   text-align: right;   
}

.text-left{
   text-align: left;   
}


.img-centro{
    text-align: center;   
}

.text-justificado{
    text-align: justify;
}

.top-05{
    margin-top: 5px;
}

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

.top-15{
    margin-top: 15px;
}

.top-20{
    margin-top: 20px;
}

.top--20{
    margin-top: -20px;
}

.top-25{
    margin-top: 25px;
}

.top-30{
    margin-top: 30px;
}

.top-40{
    margin-top: 40px;
}

.top-50{
    margin-top: 50px;
}

.bottom-30{
    margin-bottom: 30px;
}

.bottom-50{
    margin-bottom: 50px;
}

.ajuste{
      width: 100%;
  }

.ajuste-50{
      width: 50%;
  }

.ajuste-80{
      width: 80%;
  }

.ajuste-70{
      width: 70%;
  }

.pading-5{
    padding: 5px;
}

.pading-10{
    padding: 10px;
}

.pading-20{
    padding: 20px;
}

.pading-30{
    padding: 30px;
}

.pading-50{
    padding: 50px;
}


.linea-blanca{
    color: #fff;
background-color: #fff;
height: 3px;
}

.linea-negra{
    color: #000;
background-color: #000;
height: 2px;
}

/****************** SOCIAL ****************/

#social-media{
    background-color: #e6145b;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 50px;
      box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 2px 2px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 0 10px 5px rgba(0,0,0,0.5);
    -o-box-shadow: 5px 0 10px 5px rgba(0,0,0,0.5);
    -ms-box-shadow: 5px 0 10px 5px rgba(0,0,0,0.5);
    
}

#social-media .bg-social{
    width: 100%;
    height: 100%;
  
}


#social-media h1{
   color: #fff;
  
}

#social-media h2{
   color: #fff;
  
}

.btn_wapp {
    position: fixed;
    top: 75%;
    right: -80px;
    z-index: 9999;
    border-radius: 30px 0 0 30px;
    padding: 10px;
    background-color: #64b161;
    color: white;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0px 5px 10px 2px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    vertical-align: middle;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.btn_wapp:hover {
  right:0px;
}
.big { font-size: 28px; }
.btn_wapp a {color: white;}
.btn_wapp i {width: 30px; margin-right:10px; }

@media screen and (max-width: 480px) {
  .btn_wapp {top:80%;right:10px;width:60px;height:60px;text-align:center;border-radius:40px;}
  .btn_wapp i {width:40px; margin:0 auto;}
  .btn_wapp a span {display:none;}
	.btn_wapp:hover{right: 10px;}
    
        .cen-what{
    margin-left: -4px;
}
}

.span-whats{
  
     font-family: "parrafos";
    color: #fff;
    font-size: 24px;
}


/****************** FIN SOCIAL *************/

 i.fas,
  i.fab {
    border: 1px solid red;
  }

  <!-- custom styling for specific icons -->
  .fa-fish {
    color: salmon;
  }

  .fa-frog {
    color: green;
    font-size: 100px;  
    width: 100%;  
  }

  .fa-user-ninja.vanished {
    opacity: 1;
  }

  .fa-facebook {
    color: rgb(59, 91, 152);
  }

/********************* SLIDER SOPORTE TECNICO ***********************/

#slider-soporte-tecnico{
   
    height: 600px;
    z-index: 3000;

}


.parallax-soporte {
  /* The image used */
  background-image: url("../img/slider/parallax-chapulhuacan-01.jpg");

  /* Full height */
   
   /* Full height */
  height: 600px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#poliza{
    background-color: #004888;
    border-radius: 10px;
}

#poliza h2{
    color: #fff;
}

/****************** SOPORTE TECNICO MENU RESPONSIVE ***************/

@media only screen and (max-device-width: 667px) {
  .parallax-soporte {
    background-attachment: scroll;
  }
}
    
    


/************************** MENÚ DIGITAL **********************************/

#slider-menu-digital{
   
    height: 100%;
    z-index: 3000;

}

 .parallax-menu-digital {
  /* The image used */
  background-image: url("../img/menu-digital/menu-digital-restaurante-01.jpg");

  /* Full height */
  height: 600px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/********************+ MENU DIGITAL PARALLAX RESPONSIVE *********************

@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) 
{ 
    
    #slider-menu-digital
{
    width: 100%;
    height: 300px;
}
    
.parallax-menu-digital {

 width: 100%;
      
}

}*/

/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 667px) {
  .parallax-menu-digital {
    background-attachment: scroll;
  }
}

.img-presidente{
    text-align: center;
    width: 100%;
   
}

#imagen-principal
{
width: 100%;
height: 700px;    
}

 .parallax-imagen-principal {
  /* The image used */
  background-image: url("../img/slider/chapulhuacan-2022.jpg");

  /* Full height */
  height: 800px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 768px) {
  .parallax-imagen-principal {
    background-attachment: scroll;
    background-size: cover;
    height: 300px;
  }

  #imagen-principal {
    height: 300px;
  }

  #imagen-principal .caption {
    height: 300px;
  }

  #imagen-principal .caption .centrar-img {
    margin-top: 35%;
  }
}
@media (max-width: 768px) {
  #barra-navegacion h2 {
    font-size: 13px;
  }
  .ajustar-70 {
    width: 100%;
    height: auto;
  }
}

#barra-navegacion .barra-iconos .col-4 {
  margin-bottom: 0px;
}
#imagen-principal {
  height: 700px;
}

@media (max-width: 768px) {
  #imagen-principal {
    height: 400px;
  }
  .parallax-imagen-principal {
    height: 400px;
  }
}
@media (max-width: 768px) {
  #barra-navegacion .barra-navegacion-detalle h2 {
    font-size: 3px;
  }
}



#imagen-principal .caption
{
width: 100%;
height: 700px;    
background-color: rgba(0, 0, 0, 0.4);
 
    
}



#imagen-principal .caption .centrar-img{
    margin-top: 25%;
}


/***************************************** 4. INFORME *************************************/
#informe{
background-image:url(../img/fondos/fondo-segundo-informe-chapulhuacan.png);
    background-size:100%;
 

}

#informe h2{
  font-family: "encabezadosH2";
    color: #fff;
    font-size: 35px;
    
}

#informe .informe-hr{
        border: 0;
    height: 5px;
    background-image: linear-gradient(to right, rgba(232, 184, 35, 0), rgba(232, 184, 35, 0.75), rgba(232, 184, 35, 0));
}

#informe p{
    font-family: "parrafos";
    line-height: 150%;
    color: #666666;
    font-size: 18px;   

    
}

#informe .title-informe
{
    background-color: black;
    margin-top: 20px;
      z-index: 9999;
}

#informe .logo-informe{
    width: 40%;
}

.boton_informe{
    padding: 10px;
   font-family: 'Helvetica 35 Ligth';
    color: #fff;
    font-size: 20px;
    background-color: #b70049;
    border-radius: 6px;
 
  }

#informe a{
    color: #ffF;
}

.boton_informe:hover{
  padding: 10px;
   font-family: "parrafos";
    color: #fff;
    font-size: 24px;
    background-color: #b70049;
    border-radius: 6px;
  }

#informe .img-informe{
    width: 100%;
    padding: 20px;
  } 



#barra-navegacion{
 height: 100%;
    width: 100%;
    margin-top: -150px;
}

#barra-navegacion .barra-navegacion-detalle{
     background-color: #b70049e9;

    padding: 10px;
    text-align: center;
}

#barra-navegacion .barra-navegacion-detalle h2{
    font-size:17px;
    /* background-color: #000; */
    color: #fff;
    font-size: 16px;
    padding: 5px 8px;
    margin: 5px auto 0 auto;
    /* display: inline-block; */
    border-radius: 4px;
}

.ajustar-100{
    width: 100%;
}


.ajustar-70{
    width: 70%;
}

#barra-navegacion .barra-iconos{

    text-align: center;
}

#barra-navegacion .barra-navegacion-detalle .tramites{
color: #CF1F42;
}

#barra-navegacion .barra-navegacion-detalle .noticias{
color: #D32C91;
}

#barra-navegacion .barra-navegacion-detalle .turismo{
color: #A9CF38;
}


#barra-navegacion .barra-navegacion-detalle .directorio{
color: #F3D60E;
}


#barra-navegacion .barra-navegacion-detalle .transparencia{
color: #1199CE;
}
#barra-navegacion .barra-navegacion-detalle .gaceta{
color: #694A9E;
}

#articulo-69 .accordion h3 {
    color: #000;  
}

#articulo-69 .title-articulo-69 a {
    color: #000;  
}

#articulo-69 .btn-link {
    color: #000;  
}


/* Extra small devices (portrait phones, less than 576px)
 No media query since this is the default in Bootstrap*/

/* Small devices (landscape phones, 576px and up) */


/****************** PRODUCTOS *************************/

.btn_wapp {
    position: fixed;
    top: 20%;
    right: -0px;
    z-index: 10;
    border-radius: 30px 0 0 30px;
    padding: 10px;
    background-color: #9F2241;
    color: white;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 10px 5px 10px 2px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    vertical-align: middle;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.btn_wapp:hover {
  right:0px;
}
.big { font-size: 28px; }
.btn_wapp a {color: white;}
.btn_wapp i {width: 30px; margin-right:10px; }

.span-whats{
  
     font-family: "parrafos";
    color: #fff;
    font-size: 24px;
}

.btn_wapp #iconowapp{
    width: 50px;
}

.circular--icono {
  border-radius: 50%;
}


.btn_wapp1 {
    position: fixed;
    top: 75%;
    right: -80px;
    z-index: 9999;
    border-radius: 30px 0 0 30px;
    padding: 10px;
    background-color: #64b161;
    color: white;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0px 5px 10px 2px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    vertical-align: middle;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.btn_wapp1:hover {
  right:0px;
}
.big { font-size: 28px; }
.btn_wapp1 a {color: white;}
.btn_wapp1 i {width: 30px; margin-right:10px; }

@media screen and (max-width: 480px) {
  .btn_wapp1 {top:80%;right:10px;width:60px;height:60px;text-align:center;border-radius:40px;}
  .btn_wapp1 i {width:40px; margin:0 auto;}
  .btn_wapp1 a span {display:none;}
	.btn_wapp1:hover{right: 10px;}
    
        .cen-what{
    margin-left: -4px;
}
}

.span-whats{
  
     font-family: "parrafos";
    color: #fff;
    font-size: 24px;
}


#pdm {
    width: 100%;
    background-color: #9F2241; /* Fondo completo */
    padding: 50px 0;
    text-align: center;
}

.pdm-title {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px; /* Espaciado para dispositivos pequeños */
}

.pdm-title h2 {
    font-size: 28px;
    font-weight: bold;
    color: #fff; /* Texto en blanco */
    margin-bottom: 10px;
}

.pdm-image {
    max-width: 100%;
    height: auto;
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Sombra */
    background-color: #fff; /* Fondo blanco para resaltar */
    padding: 10px; /* Espaciado interno */
}

.pdm-text-center {
    text-align: center;
}

.pdm-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pdm-margin-top {
    margin-top: 100px;
}

.pdm-btn {
    background-color: #fff; /* Botón en blanco */
    color: #9F2241; /* Texto en color principal */
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.pdm-btn:hover {
    background-color: #f1f1f1;
}