*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
}
/*-------------------------------------------GALERA-----------------------------------------------------*/
:root {
    --var-morado: #4E15BC;
    --var-celesteSegurito: #226CD7;
    --var-azul: #2172FF;
    --var-azulSegurito: #236CD8;
    --var-amarillo: #FDB900;
    --var-amarilloOscuro: #e4c143;
    --var-naranjaSegurito: #F66B0A;
    --var-verde: #00B945;
    --var-negroClaro: rgb(15, 15, 15);
    --var-blancoSegurito: #f4f3f3;
}  
/*clase cuadros, para cada slide*/
.glide{
    padding:5% 0;
    width: 100%;
    display: flex;
    align-items: center;

}
.cuadros{   
    width: 100%;
    text-align: center;
    height: 470px;
    
    color: #fff;
    transition: .3s;
padding: 20px 0px;

}
.cuadros img{
    width: 100%;
    height: 100%;
    position: relative;
}

/*Cuando el cuadro obtiene el foco cambia el color*/
.cuadros[class*=active] { 
    box-shadow: none;
    transform: scale(1, 1.1);
    transition: .3s;    
    opacity: 100%;
}

.imagenes[class*=active] { 
    box-shadow: none;

    transform: scale(3, 2);
    transition: .5s;
}
.text_slide{
    width: 100%;
    text-align: center;
    padding: 12% 0 0 0;
}
.text_slide h2{
    color: var(--var-azulSegurito);
    text-align: center;
    font-size: 40px;
    font-weight: 700;
}








:root{
    --var-morado: #4E15BC;
    --var-azul: #2172FF;
    --var-amarillo: #FDB900;
    --var-amarilloOscuro: #e4c143;
    --var-verde: #00B945;
    --var-negroClaro: rgb(15, 15, 15);
    
}
@media (min-width: 1023px) and (max-width: 2000px){
    header{
        height: 63px;
    }
    .cajon-1 img{
        position: relative;
    }
}
@media(max-width : 1020px){
    .portada-nosotros{
        width: 100%;
        height: 100vh;
        position: relative;
        display: flex;
        align-items: center;
        padding:5% 10% 0% 10%;
        background-image: url("../images/port-nosotros-2-a.png");
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
    
    }
}
@media(min-width : 1020px){
    .portada-nosotros{
        width: 100%;
        height: 100vh;
        position: relative;
        display: flex;
        align-items: center;
        padding:5% 10% 0% 10%;
        background-image: url("../images/port-nosotros-2.png");
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
    
    }
}

.imagen-portada{
    width: 100%;
}
.imagen-portada img{
    width: 100%;
}

.text-portada-nosotros{
width: 100%;
position: relative;
text-align: left;
position: relative;
}

.text-portada-nosotros p{
    font-size: 18px;
    color: #ccc;
}
.text-portada-nosotros a{
display: inline-block;
margin-top: 20px;
color: white;
 background-color: var(--var-naranjaSegurito);
  padding: 15px 40px;
  text-decoration: none;
  color: white;
  font-weight: 600;
  border-radius: 5px;
     box-shadow: rgba(0, 0, 0, 0.10) 0px 5px 15px;
  transition: .5s;

}
.text-portada-nosotros a:hover{
    transition: .5s;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.text-portada-nosotros{
    width: 40%;
}
.text-portada-nosotros h1{
    color: transparent; 
font-size: 70px;
color: white;
}
.text-portada-nosotros h4{
    font-weight: 500;
    font-size: 20px;
    color: white;
}
.text-portada-nosotros h3{
    font-size: 20px;
    font-weight: 600;
    color: #EDEFFC;
    display: inline-block;
    padding: 8px 8px 8px 0px;
 }
/*---------------------------------------------------QUIENES SOMOS---------------------------------------------*/

.contentgaleria{
    margin: 0;
    background-color: #EDEFFC;
}

.somos{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 10% 10% 0;
}
.bloque_somos{
    width: 100%;
    height: 200px;
    background-color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin: 0 ;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
    padding: 4% 2% 0 2%;
    margin: 0 30px;
    border-radius: 4px;
   
}
.bloque_somos h2{
    font-size: 20px;
    color: var(--var-azulSegurito);
}
.bloque_somos p{
    margin: 10px 0 0 0;
    font-size: 17px;
}

.somos_princi{
    width: 100%;
    margin: 10px 0;
    padding: 5% 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text_princi{
width: 100%;
padding: 0 5% 0 0;
}
.text_princi h2{
    color: var(--var-azulSegurito);
    font-size: 45px;
    font-weight: 700;
}
.text_princi p{
    margin: 10px 0;
}
.img_princi{
    width: 100%;

}
.img_princi img{
    width: 100%;
    border-radius: 4px;
}


@media (min-width: 768px) and (max-width: 1023px){
    .portada-nosotros{
        width: 100%;
        height: 100vh;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding:15% 5% 5% 5%;
        background-position: center;
        background-size: cover;
    
    
    }
    .imagen-portada{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .botWare{
    font-size: 60px;
    }
    .imagen-portada img{
        width: 300px;
    }
    .text-portada-nosotros {
        width: 100%;
        text-align: center;
        position: relative;
        top: 42px;
    }
   
    .text-portada-nosotros p{
        text-align: center;
        color:white;
        font-size: 15px;
    }
    .text-portada-nosotros a{
       float: none;
       display: inline-block;
        margin-top: 20px;
      background-color:  var(--var-azulSegurito);
      padding: 15px 40px;
      color: white;
      font-size: 17px;
      font-weight: 500;
      text-decoration: none;
      border-radius: 5px;   

    }
    .text-portada-nosotros a:hover{
        transition: .5s;
        color: white;
        box-shadow: var(--var-amarillo) 0 -100px inset;
    }
    
    
    
   
   
    
     
    /*---------------------------------------------------QUIENES SOMOS---------------------------------------------*/
    .somos{
        width: 100%;
        position: relative;
        padding: 5% 0;
    }
   
    .cuadros{   
        width: 100%;
        text-align: center;
        height: 200px;
        
        color: #fff;
        transition: .3s;
    padding: 20px 0px;
    
    }
    .cuadros img{
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    /*Cuando el cuadro obtiene el foco cambia el color*/
    .cuadros[class*=active] { 
        box-shadow: none;
        transform: scale(1, 1.1);
        transition: .3s;    
        opacity: 100%;
    }
    
    .imagenes[class*=active] { 
        box-shadow: none;
    
        transform: scale(3, 2);
        transition: .5s;
    }

    .somos_princi{
        flex-direction: column;
    }
    .text_princi{
        text-align: center;
        margin: 10px 0;
    }
    .text_princi h2{
        margin: 10px 0;
    }
    .somos{
        flex-direction: column;
        padding: 0 10%;
        margin: 0;
    }
    .bloque_somos{
        height: auto;
        width: 100%;
        margin:10px 0;
        padding: 5%;
    }
   
}
@media (min-width: 320px) and (max-width: 767px){
    .cuadros{   
        width: 100%;
        text-align: center;
        height: 220px;
        
        color: #fff;
        transition: .3s;
    padding: 20px 0px;
    
    }
    .cuadros img{
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    
    
    .imagenes[class*=active] { 
        box-shadow: none;
    
        transform: scale(0,0);
        transition: .5s;
    }



   



}

@media (min-width: 320px) and (max-width: 767px){
    .portada-nosotros{
        width: 100%;
        height: 100vh;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding:15% 5% 5% 5%;
        background-position: center;
        background-size: cover;
    
    
    }
    .imagen-portada{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .botWare{
    font-size: 40px;
    }
    .imagen-portada img{
        width: 300px;
    }
    .text-portada-nosotros {
        width: 100%;
        text-align: center;
        position: relative;
        top: 42px;
    }
    .text-portada-nosotros h1{
       font-size: 25px;
       font-weight: bold;
       color: white;
    }
    
    .text-portada-nosotros h4{
        font-size: 14px;
        margin: 5px 0;
        font-weight: 500;
        color: white;
     }
     .text-portada-nosotros h3{
      font-size: 17px;
     }
    .text-portada-nosotros p{
        text-align: center;
        color:white;
        font-size: 15px;
    }
    .text-portada-nosotros a{
       float: none;
       display: inline-block;
        margin-top: 20px;
      background-color:  var(--var-naranjaSegurito);
      padding: 10px 25px;
      color: white;
      font-weight: 500;
      font-size: 15px;
      text-decoration: none;
      border-radius: 5px;   
    }
    .text-portada-nosotros a:hover{
        transition: .5s;
        color: white;
        box-shadow: var(--var-amarillo) 0 -100px inset;
    }
    
    /*---------------------------------------------------QUIENES SOMOS---------------------------------------------*/
    .somos{
        width: 100%;
        position: relative;
        padding: 5% 0;
    }
    .cajon-somos {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 10px 0;
    }
    .text-somos{
        width: 100%;
        background-color: white;
        padding:10px 5%;
        position: relative;
        z-index: 1;
        left: 0px;
        order: 1;
        text-align: center;
    }
    .text-somos h3{
        font-size: 13px;
        margin-left: 0;
        margin-bottom: 5px;
        padding: 10px;
        display: inline-block;
        background-color: var(--var-morado);
        color: white;
    }
    .text-somos h2{
        font-size: 20px;
        margin: 0px 0px 20px 0px;
    }
    .text-somos p{
        font-weight: 300;
        text-align: justify;
        font-size: 15px
    }
    .image-somos{
       text-align: center;
        width: 100%;
        padding: 0 5%;
    }
    .image-somos img{
        width: 100%;
    }
    .margin-mid-somos{
        margin: 0;
    }
    /*REGRESAMOS EL WIDGET A LA IZQUIERDA*/
    .izq-somos{
        left: 0px;
    
    }
    .izq-somos h3{
        margin-left: 0px;
    
    }

    .text_slide{
        width: 100%;
        padding: 5%;
        text-align: center;
        margin-top: 20px;
        background-color: #EDEFFC;
    }
    .glide{
        background-color: #EDEFFC;

    }
    .text_slide h2{
        
        color: var(--var-azulSegurito);
        text-align: center;
        font-size: 25px;
        font-weight: 700;
        padding-top: 5%;
    }
    .text_slide p{
        font-size: 15px;
    }
    
    .somos_princi{
        flex-direction: column;
        padding:  5%;
    }
    .text_princi{
        text-align: center;
        margin: 10px 0;
    }
    .text_princi h2{
        margin: 10px 0;
        font-size: 25px;
    }
    
    .text_princi p{
        margin: 10px 0;
        font-size: 15px;
    }
    .somos{
        flex-direction: column;
        padding: 0 10%;
        margin: 0;
    }
    .bloque_somos{
        height: auto;
        width: 100%;
        margin:10px 0;
        padding:10% 5%;
    }
    .bloque_somos h2{
        font-size: 17px;
    }
    
    .bloque_somos p{
        font-size: 15px;
    }
    

}