@charset "utf-8";
@import url("../../Extranet/fonts/ptsansnarrow_bold/stylesheet.css");
@import url("../../Extranet/fonts/ttlm/stylesheet.css");

html {
    font-size: 100%;
}

#Principal {
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px #CCC;
}

#Pie {
    background-image: url(../../Extranet/img/pie.jpg);
    background-repeat: repeat-x;
    background-position: left top;
    min-height: 65px;
    width: 100%;
    padding: 15px;
}

    #Pie p {
        line-height: 120%;
        font-size: 14px;
    }
/* Sticky footer styles
-------------------------------------------------- */
/*si queremos poner el footer pegado al fondo*/
/*html {
    position: relative;
    min-height: 100%;
}*/
/*.footer {
    background-image: url(../../Extranet/imgpie.jpg);
    background-repeat: repeat-x;
    background-position: left top;
    min-height: 65px;
    width: 100%;
    padding: 15px;
    position: absolute;
    bottom: 0;
}*/

#VerdeTop {
    background-image: url(../../Extranet/img/top.jpg);
    background-repeat: repeat-y;
    background-position: left top;
    min-height: 40px;
    width: 100%;
}

#PrePie {
    background-image: url(../../Extranet/img/top.jpg);
    background-repeat: repeat-y;
    background-position: left top;
    min-height: 60px;
    width: 100%;
    background-color: #19B27C;
    border-bottom: 5px #FFFFFF solid;
}

#Cabecera {
    background-image: url(../../Extranet/img/FondoHeader.png);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}

.logoExtranet {
    background-color: #fff;
    border: solid 1px #E2E2E2;
    margin-top: -45px;
    margin-left: 20%;
}

.Verdehome {
    background-color: #11B3A4;
    height: auto;
    border-top: #FFF 10px solid;
    border-bottom: #FFF 0px solid;
}

    .Verdehome h4 {
        color: #FFF;
        padding: 5px;
        text-indent: 10px;
        margin: 0px;
        font-size: 98%;
        background: #11B3A4;
        font-family: 'pt_sans_narrowbold';
        font-weight: normal;
    }


.Azulhome {
    background-color: #004F7B;
    height: auto;
    border-top: #FFF 10px solid;
    border-bottom: #FFF 10px solid;
}

    .Azulhome h3 {
        color: #FFF;
        padding: 5px;
        text-indent: 10px;
        margin: 0px;
        font-size: 98%;
    }

.Gris {
    background: #E2E2E2;
    padding: 10px;
    min-height: 200px;
    display: block;
}

.Azulverde {
    background-color: #11B3A4;
    height: auto;
    border-top: #FFF 10px solid;
    border-bottom: #FFF 10px solid;
}

    .Azulverde h3 {
        color: #FFF;
        padding: 5px;
        text-indent: 10px;
        margin: 0px;
        font-size: 100%;
    }

#segu01 h6 {
    font-family: 'pt_sans_narrowbold';
    font-size: 19px;
    color: #004f7b;
    margin: 0;
    font-weight: normal;
    padding-top: 15px;
}

#s1 .b1 {
    width: 100%;
    min-height: 80px;
    text-align: center;
    line-height: 16px;
    float: left;
    padding-top: 20px;
}

#s1 a {
    text-decoration: none;
    font-weight: bold;
    color: #004f7b;
}

    #s1 a:hover {
        color: #FFF;
        text-decoration: none;
    }

#s2 .b2 {
    width: 100%;
    min-height: 80px;
    text-align: center;
    line-height: 16px;
    float: left;
    padding-top: 20px;
}

#s2 a {
    text-decoration: none;
    font-weight: bold;
    color: #004f7b;
}

    #s2 a:hover {
        color: #FFF;
        text-decoration: none;
    }

#s3 .b3 {
    width: 100%;
    min-height: 80px;
    text-align: center;
    line-height: 16px;
    float: left;
    padding-top: 20px;
}

#s3 a {
    text-decoration: none;
    font-weight: bold;
    color: #004f7b;
}

    #s3 a:hover {
        color: #FFF;
        text-decoration: none;
    }

#f1 .b1 {
    width: 100%;
    min-height: 80px;
    text-align: center;
    line-height: 16px;
    float: left;
    padding-top: 20px;
}

#f1 a {
    text-decoration: none;
    font-size: 18px;
    color: #004f7b;
}

    #f1 a:hover {
        color: #000;
        text-decoration: none;
    }

#f2 {
    float: left;
}

    #f2 .b2 {
        width: 100%;
        min-height: 80px;
        text-align: center;
        line-height: 16px;
        float: left;
        padding-top: 20px;
    }

    #f2 a {
        text-decoration: none;
        font-size: 18px;
        color: #004f7b;
    }

        #f2 a:hover {
            color: #000;
            text-decoration: none;
        }


body {
    margin: 0;
    font-family: 'titilliumregular';
    color: #333;
    padding-bottom: 10%;
}

#container {
    width: 812px;
    margin: 0 auto;
    background: url(../../Extranet/imgbg.jpg) no-repeat top left;
}

#main {
    margin: 0 30px;
    padding: 0 6px;
}

#head {
    width: 740px;
    height: 300px;
    background: url(../../Extranet/imgbg-header.jpg) no-repeat;
}

.info {
    padding: 0 0 0 0;
}

.serviciosExtranetHeader {
    font-family: 'pt_sans_narrowbold';
    color: #000c0e;
    font-weight: normal;
    margin-top: -1%;
}

h2 {
    font-family: 'pt_sans_narrowbold';
    font-size: 15px;
    color: #11B3A4;
    font-weight: normal;
}

p {
    font-family: 'titilliumregular';
    font-size: 12px;
    color: #333;
    line-height: 11px;
    margin: 0;
}

.campo {
    background: #FFF;
    border: solid 1px #CCCCCC;
    margin-top: 5px;
    /*font-family: 'titilliumregular';*/
}

.botonFormat {
    background: #11B3A4;
    color: #FFF;
    text-transform: uppercase;
}
.boton {
    max-width: 120px;
    height: 30px;
    background: #11B3A4;
    border: none;
    margin-top: 5px;
    font-family: 'pt_sans_narrowbold';
    font-size: 18px;
    color: #FFF;
    text-align: center;
    text-transform: uppercase;
    display: inline;
    cursor: pointer;
    float: left;
}

.btn-default:hover, .btn-default:active, .btn-default:focus {
    background: #11B3A4 !important;
    color: #FFF !important;
    text-transform: uppercase !important;
}

.links {
    display: inline;
    font-size: 12px;
    float: left;
    padding: 5px 0 0 50px;
}

    .links a {
        color: #333;
        text-decoration: none;
    }

        .links a:hover {
            color: #000;
            text-decoration: underline;
        }

h6 {
    font-family: 'pt_sans_narrowbold';
    font-size: 19px;
    color: #004f7b;
    margin: 0;
    font-weight: normal;
}

p {
    font-family: Tahoma;
    font-size: 12px;
    color: #333;
    line-height: 13px;
    margin: 0;
}
/*SECCIÓN SEGURIDAD*/
#seguridad {
    width: 740px;
    height: 200px;
    background: url(../../Extranet/imgbg-top-1.jpg) repeat-x top left #E2E2E2;
}

    #seguridad ul, li {
        display: inline;
        font-family: 'pt_sans_narrowbold';
        font-size: 19px;
    }

    #seguridad #s1 .b1 {
        margin-left: 80px;
        width: 184px;
        height: 80px;
        text-align: center;
        line-height: 16px;
        float: left;
        padding-top: 120px;
    }

    #seguridad #s1 a {
        text-decoration: none;
        background: url(../../Extranet/imgicono-01a.png) 70px 50px no-repeat;
        color: #004f7b;
    }

        #seguridad #s1 a:hover {
            color: #FFF;
            background: #004f7b url(../../Extranet/imgicono-01b.png) 70px 50px no-repeat;
            text-decoration: none;
        }

    #seguridad #s2 {
        background: url(../../Extranet/imgsep01.jpg) top left no-repeat;
        float: left;
    }

        #seguridad #s2 .b2 {
            width: 184px;
            height: 80px;
            text-align: center;
            line-height: 16px;
            float: left;
            padding-top: 120px;
        }

        #seguridad #s2 a {
            text-decoration: none;
            background: url(../../Extranet/imgicono-02a.png) 70px 50px no-repeat;
            color: #004f7b;
        }

            #seguridad #s2 a:hover {
                color: #FFF;
                background: #004f7b url(../../Extranet/imgicono-02b.png) 70px 50px no-repeat;
                text-decoration: none;
            }

    #seguridad #s3 {
        background: url(../../Extranet/imgsep01.jpg) top left no-repeat;
        float: left;
    }

        #seguridad #s3 .b3 {
            width: 184px;
            height: 80px;
            text-align: center;
            line-height: 16px;
            float: left;
            padding-top: 120px;
        }

        #seguridad #s3 a {
            text-decoration: none;
            background: url(../../Extranet/imgicono-03a.png) 60px 50px no-repeat;
            color: #004f7b;
        }

            #seguridad #s3 a:hover {
                color: #FFF;
                background: #004f7b url(../../Extranet/imgicono-03b.png) 60px 50px no-repeat;
                text-decoration: none;
            }

#SeguridadMenu h3 {
    font-family: 'pt_sans_narrowbold';
    font-size: medium;
    color: #FFF;
    background: #004f7b;
    font-weight: normal;
    text-align: center;
}

.ErrorMessage {
    font-size: 90%;
    color: Red;
}

.divErrorMessage {
    width: 100%;
    text-align: left;
    margin-top: 13px;
}

/*SECCIÓN SERVICIOS*/
#servicios {
    width: 740px;
    height: 230px;
    background: url(../../Extranet/imgbg-top-2.jpg) repeat-x top left #FFF;
}

    #servicios ul, li {
        display: inline;
    }

    #servicios h5 {
        font-family: 'pt_sans_narrowbold';
        font-size: 19px;
        color: #11B3A4;
        margin: 0;
        font-weight: normal;
    }

    #servicios p {
        font-family: 'titilliumregular';
        font-size: 12px;
        color: #333;
        margin: 5px 24px;
        line-height: 11px;
    }

    #servicios a:hover h5, #servicios a:hover p {
        color: #FFF;
    }

    #servicios #s1 .b1 {
        margin-left: 80px;
        width: 270px;
        height: 100px;
        text-align: center;
        line-height: 16px;
        float: left;
        padding-top: 120px;
    }

    #servicios #s1 a {
        text-decoration: none;
        background: url(../../Extranet/imgicono-04a.png) 100px 40px no-repeat;
    }

        #servicios #s1 a:hover {
            color: #FFF;
            background: #11B3A4 url(../../Extranet/imgicono-04b.png) 100px 40px no-repeat;
            text-decoration: none;
        }

    #servicios #s2 {
        background: url(../../Extranet/imgsep02.jpg) top left no-repeat;
        float: left;
    }

        #servicios #s2 .b2 {
            width: 270px;
            height: 100px;
            text-align: center;
            line-height: 16px;
            float: left;
            padding-top: 120px;
        }

        #servicios #s2 a {
            text-decoration: none;
            background: url(../../Extranet/imgicono-05a.png) 100px 40px no-repeat;
        }

            #servicios #s2 a:hover {
                color: #FFF;
                background: #11B3A4 url(../../Extranet/imgicono-05b.png) 100px 40px no-repeat;
                text-decoration: none;
            }

/*PIE*/
#gradiente {
    width: 740px;
    height: 66px;
    background: -webkit-linear-gradient(left, #07B5CE, #1CB26A); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #07B5CE, #1CB26A); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #07B5CE, #1CB26A); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #07B5CE, #1CB26A); /* Standard syntax */
    clear: both;
}


#pie {
    background-image: url(../../Extranet/img/pie.jpg);
    background-repeat: repeat-x;
    background-position: left top;
    min-height: 65px;
    width: 100%;
    padding: 15px;
}

    #pie p {
        line-height: 120%;
        font-size: 14px;
    }

/*SECCIÓN APLICACIONES*/
.apps {
    width: 100%;
    background: url(../../Extranet/img/bg-top-3.jpg) top center no-repeat #FFF;
}

    .apps ul {
        display: block;
        margin: 5px 0 0 0;
        padding: 0;
    }

    .apps a {
        padding: 20px;
        margin: 0 20px;
        border-bottom: #CCC 1px solid;
        background: url(../../Extranet/img/flecha.png) no-repeat 2px 27px;
        text-decoration: none;
        display: block;
    }

        .apps a:hover {
            text-decoration: none;
            background: #EAEAEA url(../../Extranet/img/flecha.png) no-repeat 2px 27px;
        }

/*SECCIÓN SEGURIDAD EXPANDIDA*/
#seg01 {
    width: 740px;
    background: url(../../Extranet/imgbg-top-1.jpg) repeat-x top left #E2E2E2;
    float: left;
}

    #seg01 #s1 {
        margin-left: 70px;
        width: 184px;
        text-align: center;
        line-height: 16px;
        padding-top: 120px;
        background: url(../../Extranet/imgicono-01a.png) 70px 50px no-repeat;
        color: #004f7b;
        font-family: 'pt_sans_narrowbold';
        font-size: 19px;
        float: left;
    }

#seg02 #s2 {
    margin-left: 70px;
    width: 184px;
    height: 80px;
    text-align: center;
    line-height: 16px;
    padding-top: 120px;
    background: url(../../Extranet/imgicono-02a.png) 70px 50px no-repeat;
    color: #004f7b;
    font-family: 'pt_sans_narrowbold';
    font-size: 19px;
    float: left;
}

#seg01 #s3 {
    margin-left: 70px;
    width: 184px;
    height: 80px;
    text-align: center;
    line-height: 16px;
    padding-top: 120px;
    background: url(../../Extranet/imgicono-03a.png) 60px 50px no-repeat;
    color: #004f7b;
    font-family: 'pt_sans_narrowbold';
    font-size: 19px;
    float: left;
}

.t1 {
    width: 420px;
    line-height: 16px;
    padding: 50px 30px;
    background: url(../../Extranet/imgsep01.jpg) top left no-repeat;
    float: left;
}

.t2 {
    width: 420px;
    line-height: 16px;
    padding: 30px;
    background: url(../../Extranet/imgsep03.jpg) top left no-repeat;
    float: left;
}

.items {
    padding: 20px 0 20px 20px;
    border-bottom: #CCC 1px solid;
    background: url(../../Extranet/img/flecha.png) no-repeat 2px 22px;    
    display: block;
    text-align: justify;
}

#SeguridadDetalle {
    display: none;
}

#ServiciosDetalle {
    display: none;
}

/*SECCIÓN SERVICIOS EXPANDIDA*/
#serv01 {
    width: 740px;
    background: url(../../Extranet/imgbg-top-1.jpg) repeat-x top left #E2E2E2;
    float: left;
}

    #serv01 #s1 {
        margin-left: 70px;
        width: 184px;
        text-align: center;
        line-height: 16px;
        padding-top: 120px;
        background: url(../../Extranet/imgicono-04a.png) 60px 40px no-repeat;
        color: #11B3A4;
        font-family: 'pt_sans_narrowbold';
        font-size: 19px;
        float: left;
    }

#serv02 #s2 {
    margin-left: 70px;
    width: 184px;
    height: 80px;
    text-align: center;
    line-height: 16px;
    padding-top: 120px;
    background: url(../../Extranet/imgicono-05a.png) 60px 40px no-repeat;
    color: #11B3A4;
    font-family: 'pt_sans_narrowbold';
    font-size: 19px;
    float: left;
}

@media (max-width: 768px) {
    #sidebar {
        display: none;
    }
}