/*reset*/
*{border:0;margin:0;padding:0;}

/*html*/
body {background-color:#fff;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
header{background-color:#222;width:100%}
figure > img{width: 100%;}
nav{background-color:#222;color:#fff;font-size:14px;height:30px;width:100%;text-align:right;}
.menu ul li{display:inline-block;list-style:none;padding:0 5px 7px;}
.menu ul li a{color:#fff;padding:5px;text-decoration:none;}
    nav ul li a:hover{color:#ff6a00;}
footer{background-color:#222;clear:both;color:#e8e8e8;height:120px;padding:40px 20px 0}
footer > div{float:left;font-size:18px;}
footer span{margin-right:10px;}
address{font-size:12px;text-align:right;}

/*id*/
#dPrincipal{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0px 5px 10px 1px #888;margin:2% auto;max-width:80%;width:80%;}

/*class*/
.fondo{background-color:#222;bottom:0;display:none;filter:alpha(opacity=80);left:0;opacity:0.8;position:fixed;right:0;top:0;width:100%;z-index:999;}
.fecha{float:left;margin-left:15px;position:absolute;}
.menu{float:right;margin-right:15px;}
.logueo{border:1px solid #111;border-radius:6px;background:#eee;bottom:0;box-shadow:5px 5px 5px #000;color:#555;display:none;
        height:290px;left:0;margin:auto;padding:30px;position:fixed;right:0;text-align:left;top:0;width:25%;z-index:9999;}
.logueo > p{cursor:pointer;margin-bottom:40px;text-align:right;}
    .logueo > p:hover{color:red;}
.logueo > .derecha > label{display:block;}
.logueo > .derecha{padding:10px 20px 0;}
.logueo > div input[type='submit']{background-color:#444;border:1px solid #000;border-radius:4px;color:#ddd;cursor:pointer;padding:10px 20px;}
.logueo > div input[type='submit']:hover{background-color:#0c95d1;border:1px solid #036e9c;color:#fff;}
.texto > label, .texto > input{display:block;padding:8px 5px;}
.mensaje{height:45px;}
.mensaje > img, .mensaje > #lblMsj{vertical-align:middle;}
.mensaje > img{display:none;width:7%;}
.mensaje > #lblMsj{line-height:45px;margin:8px 6px;}
.mensaje > #lblMsj > span{color: #444;font-size: 12px;font-weight: bold;}
.texto > input{border:1px solid #ccc;border-radius:3px;margin-left:5px;width:90%}
.sub{width:70%;}
.sub > p{font-size:14px;margin-left:28px}
.domiciliosub{width:29%;}
.contenidoPrincipal{margin:20px auto;width:95%;}
.derecha{text-align:right;}
.izquierda{text-align:left;}

.accesosistemas, .referencias{background-color:#fff;margin:20px 0 50px;vertical-align:top;}
.accesosistemas{float:left;width:67%;}
.accesosistemas > aside{background-color:#46a87b;border:1px solid #3c8561;float:left;height:50px;margin:5px;position:relative;text-align:center;width:46%;}
.accesosistemas > aside:hover{background-color:#eee;border:1px solid #888;}
.accesosistemas > aside:hover > a, .accesosistemas > aside:hover a > p > span {color:green;font-weight:bold;}
.accesosistemas > aside a{color:#fff;text-decoration:none;}
.accesosistemas > aside a > p{padding:1%;}
.accesosistemas > aside a > p > span{color:#eee;display:block;font-size:12px;}
.referencias{border:1px solid #ccc;border-top-left-radius:5px;border-top-right-radius:5px;float:right;margin-top:25px;padding-bottom:20px;width:32%;}
.sistemas{text-align:right;}
.sistemas > p{background-color:#e8e8e8;color:#555;font-size:18px;padding:5px 10px;}
.sistemas ul li:first-child{padding-top:10px;}
.sistemas ul li{list-style:none;padding:2px;}
.sistemas ul li a{color:#46a87b;text-decoration:none;padding:3px 10px;}
.sistemas ul li a:hover{color:#ff6a00}

.direccion{background-color:#e8e8e8 !important;border:1px solid #888 !important;border-top-left-radius:5px;border-top-right-radius:5px;width:94% !important;}
.direccion p, .direccion span{color:#46a87b !important;font-weight:bold;}


@media only screen and (max-width: 767px) {
    /*html5*/
    figure > img {height:50px;}
    nav{font-size:12px;height:22px;}
    footer{height:130px;margin:auto;padding:10px;}
    footer > div{clear:both;}
    address{font-size:10px;margin-top:15px;}
    /*id*/
    #dPrincipal{border-radius:inherit;margin:0;max-width:100%;width:inherit;}
    /*class*/    
    .contenidoPrincipal{margin:5px;}
    .accesosistemas{clear:both;margin:20px 0;width:100%;}
    .accesosistemas > aside{margin:2px;width:100%;}
    .direccion{width:100% !important;}
    .accesosistemas > aside a > p{font-size:14px;}
    .referencias{display:none;}
    .sub{width:95%;font-size:14px;}
    .sub > p{font-size:10px;margin:0;}
    .domiciliosub{width:100%;}
    .logueo{width:70%;}
    .mensaje > #lblMsj > span{font-size:9px;}
}