@charset "utf-8";
@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,400i,700';
@import url(reset.css);
@import url(grid.css);

body{
    font-family:'Roboto Condensed';
    font-size:16px;
    font-weight: 300;
    background: url(../imagenes/lineasBG_black.png);
    line-height: 120%;
}

/****************Estilos Generales *******************************/
a{
    text-decoration: none;
}
img{
    vertical-align: middle;
}

.img-res{
    width: 100%;
    height: auto;
}

.img-sombra{
    box-shadow: 2px 2px 5px #909090;
}

.img-borderTB{
    border-top: 4px solid #ffce00;
    border-bottom: 4px solid #ffce00;
}

.centrar{
    text-align: center;
}
.centrado{
    display: block;
    margin: 0 auto;
}

.big-padding{
    padding: 50px 0;
}

.small-padding{
    padding: 25px 0;
}

.small-padding-all{
    padding: 25px;
}

.izq{
    text-align: left;
}

.der{
    text-align: right;
}

.quote{
    text-align: right;
    font-style: italic;
    font-weight: 400;
}

.btn{
    display: block;
    width: 100px;
    text-decoration: none;
    text-align: center;
    font-size: 1.2em;
    font-weight: 400;
    color: #fff;
    padding: 10px;
    margin: 10px auto;
    background-color: #a4c2fb;
    border-radius: 5px;
}

.btn-o{
    text-decoration: none;
    text-align: center;
    font-size: 1.2em;
    font-weight: 400;
    color: #fff;
    padding: 10px;
    margin: 10px auto;
    background-color: transparent;
    border-radius: 5px;
    border: 1px solid #fff;
    transition: all 0.5s ease;
}

.btn-o:hover{
    background-color: #0000a2;
    border: 1px solid #0000a2;
}

.btn-s{
    display: inline-block;
    text-decoration: none;
    text-align: center;
    font-size: 0.8em;
    font-weight: 400;
    color: #a4c2fb;
    padding: 6px;
    background-color: #0000a2;
    border-radius: 5px;
    border: 1px solid #fff;
    transition: all 0.5s ease;
}

.btn-s:hover{
    color: #0000a2;
    background-color: #a4c2fb;
}
.rojo{
    color: #ff8e8e;
}
.verde{
    color: #14d82b;
}

.azul{
    color: #3c71d7;
}

.amarillo{
    color: #ffce00;
}

.bg-amarillo{
    background-color: #ffce00;
}

.bg-azul{
    background-color: #0000a2;
}

section{
    min-height: 100%;
}

.negrilla{
    font-weight: bold;
}
/*****************************************************************/

.top-menu{
    position: relative;
    border-bottom: 2px solid #0000a2;
    z-index: 2;
}

.slide{
    position: relative;
    min-height: 350px;
    /*background: url(../imagenes/revision.jpg) no-repeat top;
    background-size: cover;
    border-bottom: 3px solid #a4c2fb;*/
}
nav{
    width: 100%;
    background-color: #fff;
    background-color: rgba(60,113,215,0.95);
}
.logo{
    width: 100%;
    font-size: 4em;
    letter-spacing: 5px;
    padding: 10px 0;
    color: #3c71d7;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.logo img{
        width: 100%;
        height: auto;
        vertical-align: middle;
    }


@media only screen and (min-width: 600px){
    .logo img{
        width: auto;
        height: auto;
        vertical-align: middle;
    }
}

.menu{
    width: 100%;
    display: block;
    margin: 0 auto;
}
.menu li {
 
}
.menu li a{
    display:block;
    text-decoration: none;
    text-align: center;
    font-size: 1.2em;
    color: #e6e6e6;
    padding: 20px 0 10px 15px;
    transition: all 0.5s ease;
}

.menu li a i{
    text-decoration: none;
    font-size: 1em;
    margin: 0 10px 0 0;
    color: #5e8de8;
    transition: all 0.5s ease;
}

.menu li a:hover{
    color: #fff;
    background-color: #a4c2fb;
}

.menu li a:hover i{
    color: #fff;/*3cd75a;*/
    margin: 0 30px 0 0;
}

@media only screen and (min-width: 600px) {
    .menu{
        width: 100%;
        display: block;
        margin: 0 auto;
    }
    .menu li {
        display:inline-block;
        width: 20%;
    }
    .menu li a{
        display:block;
        text-decoration: none;
        text-align: center;
        font-size: 1.2em;
        color: #e6e6e6;
        padding: 20px 0 10px 15px;
        transition: all 0.5s ease;
    }

    .menu li a i{
        text-decoration: none;
        font-size: 1em;
        margin: 0 10px 0 0;
        color: #5e8de8;
        transition: all 0.5s ease;
    }

    .menu li a:hover{
        color: #fff;
        background-color: #a4c2fb;
    }

    .menu li a:hover i{
        color: #fff;/*3cd75a;*/
        margin: 0 30px 0 0;
    }
}

/***************Estilos Redes Sociales ******************/
.iSociales{
    display: none;
}

@media only screen and (min-width: 600px) {
    .iSociales{
        display: block;
    }
    
    .iSociales a{
        color: #a4c2fb;
    }

    .iSociales a:hover,.icontacto i{
        color: #3c71d7;
    }

    .iContacto{
        display: block;
        margin: 10px 0;
        color: #666;
    }
}



/**************************Estilos Cuadros inicio ******************************/
.cuadro{
    position: relative;
    display: block;
    width: 100%;
    padding: 10px;
    min-height: 250px;
    background-color: #f4f4f4;
    border: 1px solid #f9f9f9;
    border-radius: 10px;
    overflow: hidden;
  
}

.enlaces{
    margin: 10px 0;
}

.instalacion{
    background: url(../imagenes/instalaciont.jpg) no-repeat fixed;
    background-size: cover;
}

.iTitulo{
    display: block;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #a4c2fb;
    font-weight: bold;
}

.dictamen{
    display: block;
    margin: 10px 0;
}


.dictamen input{
    display: block;
    width: 100%;
    padding: 5px;
    border: none;
    margin: 5px 0;
    font-size: 1.3em;
    background-color: #fff;
    border-bottom: 2px solid #a4c2fb;
}

.dictamen input[type="submit"]{
    display: block;
    float: right;
    width: 50%;
    padding: 5px;
    border: none;
    margin: 5px 0;
    font-size: 1em;
    color: #fff;
    font-weight: bold;
    background-color: #a4c2fb;
    border-radius: 5px;
    transition: all 0.5s ease;
}

.dictamen input[type="submit"]:hover{
    background-color: #3c71d7;
}

.intermedio{
    position: relative;
    min-height: 200px;
    background: url(../imagenes/revision1.jpg) no-repeat fixed center;
    background-size: cover;
}

.intermedio .bg,.servicios .bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba(0, 0, 0,0.6);
}

.intermedio .mensaje,.servicios .mensaje{
    position: relative;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 2em;
    line-height: 200px;
}

.servicios{
    position: relative;
    height: 200px;
    background: url(../imagenes/franja_servicios.jpg) no-repeat center;
    background-size: cover;
}


/***************Estilos Footer ************************/
footer{
    background-color: #a4c2fb;
}

footer i{
    color: #fff;
}

.titulo-foot{
    color: #0000a2;
    font-size: 1.3em;
    font-weight: 400;
    margin-bottom: 10px;
}

.info-foot{
    margin: 10px 0;
    color: #000;
}



/***************Parrafo Img ************************/

.parrafo-img{
    position: relative;
    border:1px solid #14d82b;
}

.cables{
    background: url(../imagenes/planeacion.jpg) no-repeat center;
    background-size: cover;
}

.interruptor{
    background: url(../imagenes/02.jpg) no-repeat center;
    background-size: cover;
}

.revision{
    background: url(../imagenes/certi_electricas_franja.jpg) no-repeat right;
    background-position: 45% 0;
    background-size: cover;
}

.parrafo{
    width: 80%;
    padding: 10px;
    margin-left: 20%;
    background-color: #fff;
    line-height: 120%;
}

/******************Estilo Botn ir arriba********************************/
.goTop{
    display: none;
    position: fixed;
    right: 10px;
    bottom:10px;
    width: 40px;
    height: 40px;
    padding: 0px;
    border: 2px solid #a4c2fb;
    border-radius: 50%;
    text-align: center;
    margin: 15px;
    color: #0000a2;
}

/*******************Estilos Franjas*********************/

.titulo-big{
    font-size: 2em;
    line-height: 115%;
}

.titulo{
    font-size: 1.5em;
    font-weight:bold;
    margin: 10px 0;
}

.blue{
    background-color: #0000a2;
    color: #a4c2fb;
}


/*******************Estilos Formularios*********************/

.formulario{
    display: block;
}

.elemento{
    margin: 10px 0;
}

.elemento label{
    display: block;
    font-size: 1.2em;
    margin: 10px 0 5px 0;
}

.elemento input,.elemento textarea{
    width: 100%;
    font-size: 1.2em;
    border: 1px solid #eaeaea;
    border-bottom: 2px solid #a4c2fb;
    padding: 5px;
    color: #696969;
    border-radius: 3px;
    box-shadow: 1px 1px 5px #eaeaea;
}

.elemento input[type="radio"]{
    width: 15px;
    font-size: 1.2em;
}



/***************************Estilos Tabla de Datos *******************************/

.tabla-listados{
    width: 100%;
}

.tabla-listados th{
    padding: 5px 0;
    font-weight: bold;
    border-bottom: 2px solid #a4c2fb;
}

.tabla-listados td{
    padding: 5px 5px;
    border-bottom: 1px solid #eaeaea;
    font-size: 0.9em;
}

.tabla-listados tr:hover{
    background-color: #edf3ff;
}


/*********************Estilos Modal******************************/

.modal{
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left:0;
    background-color: #000;
    background-color: rgba(0,0,0,0.2);
    overflow-y: scroll;
    z-index: 1000;
}

.modal a.cerrar-modal{
    position: absolute;
    right: 5px;
    top:5px;
    color: #cacaca;
}

.modal .modal-cuadro{
    position: relative;
    padding: 20px;
    margin: 20px auto;
    width: 100%;
    max-width: 420px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 10px #333;
    overflow: hidden;
}

.modal .modal-cuadro.modal-grande,.modal .modal-cuadro.modal-extra{
    width: 100%;
}


@media only screen and (min-width:600px){
    .modal .modal-cuadro.modal-grande{
        min-width: 500px;
    }

    .modal .modal-cuadro.modal-extra{
        min-width: 720px;
    }
}

.modal .modal-cuadro .modal-encabezado{
    padding:  15px 10px;
    font-weight: bold;
    border-bottom: 1px dashed #a4c2fb;
}

.modal .modal-cuadro .modal-contenido{
    padding: 10px;
    min-height: 150px;
    border-top: 1px dashed #a4c2fb;
}

.modal .modal-cuadro .modal-pie{
    padding: 10px;
    border-top: 1px dashed #a4c2fb;
}