@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:400,500,600,700');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital@0;1&display=swap');

html{
    height: 100%;
}

body{
    height: 100%;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 15px;
    letter-spacing: 0.15px;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    text-rendering: optimizeLegibility !important;
}


/* --------------------------------- Estilos Para Enlaces simples ---------------------------------------*/

a{
    text-decoration: none;
}


/* --------------------------------- Estilos Para Párrafos ---------------------------------------*/

.parrafo{
    margin: 10px 0;
    font-family: "Noto Sans", sans-serif;
    line-height: 150%;
    color: #888;
}

.titulos-parrafo{
    font-size: 2rem;
    color: #000;
}


/* --------------------------------- Estilos Para Párrafos ---------------------------------------*/

.icono{
    margin: 15px 0;
}

.icono-m i{
    font-size: 5rem;
}

/* --------------------------------- Colores ---------------------------------------*/

.naranja {
    color: #ffc400;
}

.blanco {
    color: #fff;
}

.gris-claro{
    color: #ccc;
}

.azul{
    color: #0080ff;
}

.negro{
    color: #000;
}

.verde{
    color: #34a5b9;
}

.verde-bg{
    background-color: #34a5b9;
}

/* --------------------------------- Estilos Para enlaces independientes ---------------------------------------*/

a.independientes{
    padding: 5px 10px;
    color: #61d36e;
    font-size: 1rem;
    border-left: 1px solid transparent;
    transition: all ease 0.3s;
}

a.independientes > i{
    margin-left: 10px;
    color: #eaeaea;
}

a.independientes:hover{
    border-left: 1px solid #3476B9;
}

a.independientes:hover i{
    color: #34a5b9;
}

/* --------------------------------- Estilos Para enlaces Botones ---------------------------------------*/

a.boton{
    display: inline-block;
    padding: 15px;
    background-color: #34a5b9;
    color: #fff;
    transition: all ease 0.3s;
}

a.boton:hover{
    display: inline-block;
    padding: 15px;
    background-color: #21bcd8;
    color: #fff;
}

/* --------------------------------- Estilos Para el fondo principal del incio ---------------------------------------*/
.principal{
    display: block;
    width: 100%;
    height: 70%;
    background-color: #eaeaea;
}

.principal .pared{
    position: relative;
    display: block;
    height: 70%;
    /*background: url(../imagenes/fondo.jpg) no-repeat center;*/
    background-size: cover;
    /*background-image: repeating-linear-gradient(#fff,#cfd4d6)*/
}

.principal .pared::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(#fff 15%,rgba(207, 212, 214,0.4) 100%);
}

.principal .piso{
    display: block;
    height: 30%;
    background-color:#e0e0e0;
}

.principal .piso-iconos-mobile{
    display: none;
}
@media only screen and (max-width: 500px){
    .principal .piso-iconos{
        display: none;
    }
    .principal .piso-iconos-mobile{
        display: block;
    }
    .principal .piso-iconos-mobile img{
        height: 60px;
        margin: 0 10px;
    }
    
    #accesos{
        display: none;
    }
}

/* --------------------------------- Estilos Para el Menu Principal ---------------------------------------*/
.menu{
    margin: 0 auto;
}

.menu li{
    display: inline-block;
}

.menu li > a{
    display: block;
    padding: 5px 10px;
    font-size: 1.1rem;
    color: #6a737c;
    text-align: center;
    border-radius: 3px;
    transition: all ease 0.3s;
}

.menu li > a > i{
    margin-right: 7px;
    font-size: 0.9rem;
    color: #eaeaea;
    transition: all ease 0.3s;
}

.menu liv a:hover{

    border-bottom: 1px solid #eaeaea;
}

.menu li > a:hover i{
    color: #3476B9;
}


/* --------------------------------- Menú Movil ---------------------------------------*/

.cobertor-movil{
    position: fixed;
    display:none;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(33, 188, 216,0.85);
}

.cuadro-movil{
    display:table;
    width: 100%;
    height: 100%;
    top: 0;
    text-align: center;
    line-height: 100%;
}

.cuadro-movil > .menu-movil{
    vertical-align: middle;
    display: table-cell;
}

.cuadro-movil > .menu-movil li a{
    display: inline-block;
    padding: 1% 0;
    line-height: 100%;
    font-size: 3rem;
    font-weight: 600;
    color: #fff;
}

.cuadro-movil > .menu-movil li a:hover{
    color: #ffc400;
}

.cuadro-movil > .cerrar-movil{
    position: absolute;
    top: 10%;
    right: 10%;
}


.cuadro-movil > .cerrar-movil a{
    font-size: 3rem;
    font-weight: 600;
    color: #fff;
}

.cuadro-movil > .cerrar-movil a:hover{
    color: #ffc400;
}

.barras-movil{
    position: fixed;
    display: none;
    padding: 15px;
    top: 10px;
    right: 10px;
    background-color: rgba(33, 188, 216,0.85);
}

.barras-movil a{
    font-size: 3rem;
    font-weight: 600;
    color: #fff;
}

.barras-movil a:hover{
    color: #ffc400;
}

@media only screen and (max-width: 500px){
    .barras-movil{
        display:block;
    }
    
    .barras-movil a{
        font-size: 1.5rem;
        font-weight: 600;
        color: #fff;
    }
}


/* --------------------------------- imágenes Servicios ---------------------------------------*/

.iconos-servicios{
    height: 65px;
    width: auto;
    margin-bottom: 15px;
}
.titulos-servicios{
    font-size: 2rem;
    color: #777;
}

/* --------------------------------- Secciones ---------------------------------------*/

.seccion{
    position: relative;
    min-height: 100%;
    padding-bottom: 25px;
    border-top: 2px solid #ffc400;
}

.seccion  .franja-titulo{
    position: relative;
    height: 250px;
    background: url(../imagenes/fondo_seccion_1.jpg) no-repeat center;
}
.seccion  .franja-titulo:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 128, 255, 0.75);*/
    background-image: linear-gradient(rgba(255,255,255,0.5) 0, rgba(255,255,255,0.7) 75%,#fff 90%);
}

.seccion  .franja-titulo > .titulo{
    position: relative;
    display: block;
    top: 35%;
    font-size: 3.5rem;
    color: #34a5b9;
    text-shadow: 0 0 3px #34a5b9;
    text-align: center;
}


/* --------------------------------- Pie ---------------------------------------*/

.pie{
    background-image: linear-gradient(#555,#222);
}

.pie .info-pie{
    font-family: "Noto Sans", sans-serif;
}


/* --------------------------------- Estilos lista items ---------------------------------------*/

.items{
    text-align: left;
}

.items li i{
    margin-right: 10px;
}