/* Hoja de estilos del tp DGPC - Catedra Zachin"/
/*Grupo 17*/

body{
    width: 100%;
    height: 100%;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-color: rgb(68,68,68);
    font-family: "Roboto Slab" , Serif;
    font-size: 15px;
    display: block; 

}

header div#logo img {
    position: relative;
    width: 15%;
    height: auto;
    margin-left: 4%;
    overflow: auto;
    float: left;
}

header div#encabezado img{
    position: relative;
    width: 75%;
    margin-top: 0px;
    margin-right: 4%;
    margin-bottom:0px;
    margin-left: 2%;
    float: right;
        
}
/******** menu desplegable ********/
#menu_gral {
    font-family: "Roboto Slab";
    font-weight: bold;
    float: right;
    position: relative;
    width: 75%;
    height: auto;
    margin-right:4%;
    margin-top: auto;
    background-color:rgba(60, 126, 139, 0.75);border-radius:4px;
    box-shadow: 5px 5px, rgb(59, 77, 73);
}
#menu_gral ul {
    list-style-type: none; 
    text-align: center;
    font-size: 0;
}
#menu_gral  ul li {
    display: inline-block;
    width: 25%;
    position: relative;
}
#menu_gral li a {
    display: block;
    text-decoration: none;
    font-size: 1.4rem;
    line-height: 2.5rem;
    color: rgb(255, 241, 137);
}
#menu_gral li:hover a, #menu_gral li a:focus {
    background: rgba(144, 37, 111, 0.65);
    color: rgb(250, 243, 192);
}

#menu_gral li ul {
    position: absolute;
    width: 0;
    overflow: hidden;
}
#menu_gral li:hover ul, #menu_gral li:focus ul {
    width: 100%;
    margin: 0 -1rem -1rem -1rem;
    padding: 0 1rem 1rem 1rem;
    background:  rgba(229, 224, 224, 0.27);
    z-index: 5;
}
#menu_gral li li {
    display: block;
    width: 100%;
}
#menu_gral li:hover li a, #menu_gral li:focus li a {
    
    font-family: "Roboto Slab";
    font-weight: normal;
    font-size: .9rem;
    line-height: 1.7rem;
    border-top: 1px solid #e5e5e5;
    background: rgb(65, 62, 62);
}

    /******** menu lateral ********/
header div#menu-lateral img{
    width: 20%;
    clear: both;
    float: left;
    margin-left: 4%;
    margin-top: 2%;        
}
        
header div#menu-lateral2 img{
    width: 20%;
    clear: both;
    float: left;
    margin-left: 4%;
    margin-top: 2%;        
}        
        
header div#menu-lateral3 img{
    width: 20%;
    clear: both;
    float: left;
    margin-left: 4%;
    margin-top: 2%;        
}         
header div#menu-lateral4 img{
    width: 20%;
    clear: both;
    float: left;
    margin-left: 4%;
    margin-top: 2%;        
}         

/******** seccion lateral ********/
section div#facebook a{
    z-index: 7;
    position: relative;
    clear: both;
    float: left;
    margin-top: 2%;
    margin-left: 4%;
    color: rgb(255, 241, 137);
    font-size: 1.2em;
    
}

aside section div#facebook img{
    position: relative;
    width: 20%;
    clear: both;
    float: left;
    margin-top: 1%;
    margin-left: 4%;    
    
}
 
aside div#pagina a{
    z-index: 7;
    position: relative;
    clear: both;
    float: left;
    margin-top: 2%;
    margin-left: 4%;
    color: rgb(255, 241, 137);
    font-size: 1.2em;
   }
aside div#buscador img{
    z-index: 7;
    clear: both;
    float: left;
    width: 20%;
    margin-left: 4%;
    margin-top: 2%;
}

/******** article ********/

article div#fondo img{
    position: absolute;
    width: 70%;
    margin-left: 7%;
    margin-right: 4%;
    margin-top: 21.4%;  
    z-index: 2;

}

article div#fotohome img{
    position: relative;    
    width: 60%;
    margin-right: 9%;
    margin-top: 9%;
    margin-left: 7%;
    z-index: 3;
    border-radius:4px;

}

article div#fondoarticle img{
    position: absolute;
    width: 60%;
    margin-left: 12.5%;    
    margin-top: 4%;
    z-index:4 ;
        
}


article div#columna1 {
    position: absolute;
    display: block;
    z-index: 5;   
    margin-left: 35%;
    margin-right: 13%;
    margin-top: 4%;
    overflow: auto;
    color: rgb(255, 241, 137)
}

article div#Grupo Docente, h2{
    margin-top: 10%; 
    font-size: 1.7em;
}
articlediv#columna1 ,p{
    font-size: 1.2em;
    
    
}

article div #columna2{
   position: absolute;
    display: block;
    z-index: 5;   
    margin-left: 60%;
    margin-top: 23%;
    overflow: auto;
    color: rgb(255, 241, 137)
}


footer  {
   position: relative;
    width: 50%;
    clear: both;
    float: right;
    margin-right: 14%;
    margin-top: 47%;
    font-size: 0.7em;
    font-style: italic;
    font-family: "roboto";
    text-align: center;
    color: rgb(255, 241, 137);

}

/* celular  */
@media all and (min-width:1px) and (max-width:320px){

    /******** menu desplegable ********/
#menu_gral  {
   max-height:20%;
    z-index: 9;
    margin-right:4%;
    margin-top: auto;
    background-color:rgba(60, 126, 139, 0.75);border-radius:4px;
    box-shadow: 5px 5px, rgb(59, 77, 73);
}
#menu_gral  ul li {
    width: 20%;

}
#menu_gral li a {
    
    font-size: 0.18rem;
    line-height: 0.7rem;
    color: rgb(255, 241, 137);
}


#menu_gral li:hover ul, #menu_gral li:focus ul {
    width: 100%;
    height: auto;
    margin-left: 1px;
    margin-top: 1px;
    padding: 0 1rem 1rem 1rem;
    background:  rgba(229, 224, 224, 0.27);
    z-index: 5;
}
#menu_gral li li {
    width: 100%; 
}
#menu_gral li:hover li a, #menu_gral li:focus li a {
    
    font-family: "Roboto Slab";
    font-weight: normal;
    font-size: .2rem;
    line-height: 0.3rem;
    border-top: 1px solid #e5e5e5;
    background: rgb(65, 62, 62);
}

    /******** seccion lateral ********/
 section div#facebook a{
        font-size: 0.2em;    
} 
 aside div#pagina a{
       font-size: 0.2em;
   }   
    


article div#fondoarticle img{   
    margin-left:9%;
}


article div#Grupo Docente,h2  {
       font-size: 0.35em
        
} 

    article div#Grupo Docente, p {
        font-size: .16em;
    }

footer {
    font-size: 0.16em;
    margin-top: 47%;
}



}

/* celular o tablet */
@media all and (min-width:320px) and (max-width:600px){

    /******** menu desplegable ********/
#menu_gral  {
   max-height:50%;
    z-index: 9;
    margin-right:4%;
    margin-top: auto;
    background-color:rgba(60, 126, 139, 0.75);border-radius:4px;
    box-shadow: 5px 5px, rgb(59, 77, 73);
}
#menu_gral ul {
    list-style-type: none; 
    text-align: center;
    font-size: 0;
}
#menu_gral  ul li {
    width: 30%;

}
#menu_gral li a {
    
    font-size: 0.48rem;
    line-height: 0.83rem;
    color: rgb(255, 241, 137);
}
#menu_gral li:hover a, #menu_gral li a:focus {
    background: rgba(144, 37, 111, 0.65);
    color: rgb(250, 243, 192);
}

#menu_gral li ul {
    position: absolute;
    overflow: hidden;
}
#menu_gral li:hover ul, #menu_gral li:focus ul {
    width: 33%;
    height: auto;
    margin-left: 1px;
    margin-top: 1px;
    padding: 0 1rem 1rem 1rem;
    background:  rgba(229, 224, 224, 0.27);
    z-index: 5;
}
#menu_gral li li {
    width: 100%; 
}
#menu_gral li:hover li a, #menu_gral li:focus li a {
    
    font-family: "Roboto Slab";
    font-weight: normal;
    font-size: .4rem;
    line-height: 1rem;
    border-top: 1px solid #e5e5e5;
    background: rgb(65, 62, 62);
}

    /******** seccion lateral ********/
 section div#facebook a{
        font-size: 0.3em;    
} 
 aside div#pagina a{
       font-size: 0.3em;
   }   
     
article div#fondoarticle img{   
    margin-left:10%;
}


article div#Grupo Docente,h2  {
       font-size: 0.40em
        
} 

    article div#Grupo Docente, p {
        font-size: .29em;
    }

footer {
    font-size: 0.22em;
    margin-top: 47%;
}

 


}

@media all and (min-width:600px) and (max-width:1200px){
    
     /******** menu desplegable ********/

#menu_gral ul {
    list-style-type: none; 
    text-align: center;
    font-size: 0.50em;
}
#menu_gral  ul li {
    width: 30%;
   

}
#menu_gral li a {
    
    font-size: 0.60rem;
    line-height: 0.83rem;
    color: rgb(255, 241, 137);
}



#menu_gral li:hover ul, #menu_gral li:focus ul {
    width: 33%;
    height: auto;
    margin-left: 1px;
    margin-top: 1px;
    padding: 0 1rem 1rem 1rem;
    background:  rgba(229, 224, 224, 0.27);
    z-index: 5;
}
#menu_gral li li {
    width: 100%; 
}
#menu_gral li:hover li a, #menu_gral li:focus li a {
    
    font-family: "Roboto Slab";
    font-weight: normal;
    font-size: .5rem;
    line-height: 1rem;
    border-top: 1px solid #e5e5e5;
    background: rgb(65, 62, 62);
}

    /******** seccion lateral ********/
 section div#facebook a{
        font-size: 0.5em;    
} 
 aside div#pagina a{
       font-size: 0.5em;
   }   
    

article div#fondoarticle img{   
    margin-left:13%;
}


article div#Grupo Docente,h2  {
    margin-top: 12%;
       font-size: 0.60em
        
} 

    article div#Grupo Docente, p {
        margin-top: 14%;
        font-size: .45em;
    }

footer {
    font-size: 0.30em;
    margin-top: 47%;
}


   
    
    
    
    
    
    
    
    
    
    
}