*{margin: 0; padding: 0;}
body{ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 16px; }
header { width: 100%; height: 180px; border-bottom: solid 3px #f14739; 
    /*background-color: #2e3f51;
    background-color: #6488AF; */
    background-color: #002a4c;
    background-image:url('../images/header_fismat.jpg');        
    opacity: 0.8;
 }
header div{ width: 80%; margin: 0 auto; }
.imgheader{ display: block; float:left; width: 10%; padding: 1% 1%; }
.imgheader2{ display: block; float:left; width: 38%; padding-top: 2.3%; padding-left: 3%; }
#container{  display: flex; width: 80%; flex-direction: row; flex-wrap: wrap;  margin: 0 auto;  }
.pi{ color: red; }
h1{ color: #002a4c; }
.mainparraf{ padding-top: 2%; }
aside { width:20%;  padding: 1% 1%; border-right: solid 2px #f14739; min-height: 800px; }
aside ul{ list-style-type: none; width: 100%; }
aside a:hover{ color: red; }
main { width: 60%; padding: 2% 2%; }
.tabla th{  background-color: #CCC; padding-left: 5px; }
.tabla td{  padding-left: 5px; }
ol{ list-style-position: inside; }
.salones{ list-style-position: inside; line-height: 26px; column-count: 2; margin-top: 20px; }
#pull{ display: none; }
@media screen and (min-width: 988px) and (max-width: 1320px){
    .imgheader{ width: 17%; padding: 3% 2%; }
    .imgheader2{ padding-top: 4.3%; }
    main { width: 72%; }
}
@media screen and (max-width:987px){
    .imgheader{ width: 20%; padding: 5% 2%; }
    .imgheader2{ padding-top: 6.3%; }
}
@media screen and (max-width:768px){    
    .imgheader{ width: 30%; padding: 8% 2%; }
    .imgheader2{  width: 60%; padding-top: 10%; }
    aside { width: 100%; min-height: auto; height: auto; border:none; padding: 0; }
    main { width: 100%; }
    aside>ul{ display: none; width: 100%; background-color: white; }
    aside ul li{ width: 100%; }
    #pull{
        display: block;
        width: 10%;
        height: 30px;	
        padding-top: 15px;
        padding-left: 5px;
        text-decoration: none;
        font-size: 17px;    
        font-weight: bolder;
        padding-left: 90%;
        cursor: pointer
        }   
    #menubar {
    width: 40px;
    height: 40px;
    }    
    .bar {
        height: 5px;
        width: 100%;
        background-color: #002a4c;
        display: block;
        border-radius: 5px;
        transition: 0.3s ease;
    }
    #bar1 { transform: translateY(-4px); }
    #bar3 { transform: translateY(4px); }     
    .change { display: block; }
    .change #bar1 { transform: translateY(4px) rotateZ(-45deg); }
    .change #bar2 { opacity: 0; }
    .change #bar3 { transform: translateY(-6px) rotateZ(45deg); }
}
@media screen and (max-width:480px){
    aside { padding: 0; margin: 0; }
    main { padding: 0; margin: 0; }
}