@charset "utf-8";
/* CSS Document */

/* Area de Identificacion de Pagina Detalle Servicios */

.imFondo {
    background-image: url("../images/sl/sl-04.jpg");
    width: 100%;
    height: 100%;
    align-content: center;
    animation-fill-mode: forwards;
}
.imCentro{
      display: block;
      margin: auto;
        
}

.divFijo {
    position: sticky;
    top: 8rem;
}

/*----hover eff despegar hoja ----

.servPintura{
    margin-top: 5rem;
    margin-bottom: 2rem;
    background-color: aquamarine;
}*/
/*---------------------IMAGENES DE FONDO SERVICIOS ------*/
.im-FondoBan {
  background-image: url("../images/servicios/seccA-FondoColorAz.jpg");   
  background-color: #184D86;
  width: 100%;
  object-fit: cover;
  object-position: bottom;  
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
    
} 

.img-static {
  background-image: url("../images/servicios/seccA-Pintura-especial-aislante-termica.jpg");
  width: 100%;
  object-fit: cover;
  object-position: bottom;  
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #FFF;

}
.im-imper{
  background-image: url("../images/servicios/seccA-impermeabilizaciones-maquiladoras-construccion-termicas2.jpg");
  width: 100%;
  object-fit: cover;
  object-position: bottom;  
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #FFFFFF;  
}
.im-aislante {
  background-image: url("../images/servicios/seccA-aislamiento-techo-paredes-contenedores-cisternas.jpg");
  width: 100%;
  object-fit: cover;
  object-position: bottom;  
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #F0F0F0;  
}

 
.img-colHeight{
    height: 100vh;
}
.img-colPosition{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;  
  background-color: transparent;
}

.im-ilumina {
  background-image: url("../images/servicios/seccA-iluminacion-natural-domos-laminas-traslucidas.jpg");
  width: 100%;
  object-fit: cover;
  object-position: bottom;  
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #000;  
}

.bg-degradaHz{
   background: linear-gradient(to right, rgba(67,136,217,1.00) 36%, transparent);
    /* background: linear-gradient(to right, rgba(51,78,133,0.75) 20%, transparent); */
    padding: 3rem;
}
.opcionSer {
    text-align: center;
    margin-top: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    
}
.conta {
    background-color: #ffffff;
}

.conta .card
{
    max-width: 200px;
    height: 115px;
    margin: 5rem 10px;
    padding: 20px 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    transition: 0.3s ease-in-out;
}
.conta .card:hover
{
    height: 550px;
}
.conta .card .imgContainer
{
    position: relative;
    width: 150px;
    height:100px;
    top:-50px;
    left:10px;
    z-index: 1;
    background-color: black;
    color: #FFF;
    text-align: center;
    font-size: 2rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.conta .card .imgContainer img 
{
    max-width: 100%;
    border-radius: 4px;
}
.conta .card .content
{
    position: relative;
    margin-top: -140px;
    padding: 10px 15px;
    text-align: center;
    color:#111;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease-in-out;
}
.conta .card:hover .content
{
    visibility: visible;
    opacity: 1;
    margin-top: -40px;
    transition-delay: 0.3s;
    text-align: justify;
 }
@media (max-width: 330px){
    .conta .card .imgContainer{
        left: -2px;
    }

}


@media (min-width: 576px) { 
    .opcionSer {
        margin-top: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;

    }
   
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {  }

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
    .opcionSer {
        margin-top: 5rem;
        padding-left: 10rem;
        padding-right: 10rem;

    }
}

/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .imCentro{
          display: block;
          margin-top: 3rem;
}
}

/*----fin hover eff despegar hoja ----*/












/*--------------Porque Contratar Pintores ------*/


.section-title {
    color: #94bf3e;
    font-size: 1.5rem;
}
.section-title h2 {
    color: #334E85;
}

#PorquePintura.card-style2 {
    background-color: #94bf3e;
    margin-bottom: 1rem;
    padding: 1rem;
}

.ico-1 {
    padding: 1rem;
    color: white !important;
    font-size: 3rem;
}
/*-----------------------logo slider ----*/

        .logos::before, 
        .logos::after {
            content: '';
            width: 300px;
            height: 100%;
            position: absolute;
            top: 0;
            z-index: 2;
        }
 
        .logos::before {
            left: 0;
            background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff);
        }
 
        .logos::after {
            right: 0;
            background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
        }
 
        .logos-slide {
            animation: 20s slide infinite linear;
        }
 
        .logos:hover .logos-slide {
            animation-play-state: paused;
        }
 
        .logos-slide img {
            height: 60px;
            margin: 0 50px;
        }
 
        @keyframes slide {
            from{
                transform: translateX(0);
            }
 
            to {
                transform: translateX(-100%);
            }
        }

/*--------- otro carru  ---

.carousel-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.carousel-item.active {
    flex: 1;
}

.carousel-inner { height: 300px !important;  }
    
.carousel-item.active {max-width: 600px;}

*/
/*---------------  POR TU CUENTA  ------------*/

.recuadro {
    border: 1px solid #334E85;
    align-self: stretch;
}

/*------- proyectos -----*/

.borde {
    border: 1px solid #334E85;
    box-shadow: 3px 3px 6px #334E85; 
}