body{background-image: url(img/shutterstock_209447692.png)}

.pagina
    {max-width: 960px; margin: 0 auto;}

header{ width:100%;
        height:170px;
        background: rgba(109, 190, 153, 0.85);}

svg {width: 130px;
     padding: 0 0 0 3%;
     margin:0;}

.loguearse{width:24%;
    padding: 3% 2% 0 3%;
    float: right;}

nav { width:100%;
      height:50px;
      background: rgba(236, 119, 98, 0.84); }

li 
    {width: 10%; 
    height: 28px;
    float: left;
    margin:1% 2% 0 7% ;
    font-family:"Arial" ;
    font-size: 0.8rem;
    padding-top: 4px;
    text-align: center;
    color: #000;
    line-height: 25px;
    list-style: none;}

nav a li:hover { color: #fff;
                 font-size: 1rem;
                 font-weight: bold;}

main{width: 100%;
     height: 850px;
    background: rgba(252, 229, 203, 0.79);}

section{width:75%;
        height: 590px;
      
        margin: 0 1% 0 2%;
        float:left;}

.cajacolor{width:98%;
        height: 300px;
        background: rgba(109, 190, 153, 0.57);
        margin: 43% 1% 0 0; 
        border-radius: 7px;
        box-shadow: 0.1rem 0.2rem 0.3rem 0.5rem rgba(204, 204, 204, 0.35);}

.slider{width:98%;
        height: 270px;
        background-image: url(img/slider.png);
        margin: 2% 1% 0 0%;
        float:left;}

.col1
    {width:30%;
    height:200px;
    background-image: url(img/taller.png);
    float: left;
    margin: 3% 1% 0 2%;
    list-style: none;}

article a col1:hover { color: #fff;}


a {text-decoration: none;}

.titular 
   {width: 49%;
    height: 35px;
    background: rgba(255, 205, 0, 0.81);
    margin-top: 72%;
    padding: 1% 0 0 4%;
    font-family: "Arial";
    
    color: #000;}
h2 
    {font-size: 0.8rem;
     color: #000;
     
     font-weight: bold;}

p {width: 200%;
   font-size: 0.78rem;
   padding: 17% 0 0 0;
   margin: 0;
   font-family: "Arial"}

.titular2 { width: 80%;
    height: 29px;
    padding: 0.7% 0 0 6%;
    border-bottom-style: solid;
    border-bottom-color: #ffbc00;
    border-bottom-width: thin;
   
    font-family: "Arial";}


.col2{width:30%;
        height:200px;
        background-image: url(img/docentes.png);
        float: left;
        margin: 3% 1% 0 2%;
        list-style: none;}


.col3{width:30%;
        height:200px;
        background-image: url(img/catedra.png);
        float: left;
        margin: 3% 1% 0 2%;}

.zocalo{width:98%;
        height: 170px;
        background: rgba(239, 200, 156, 0.79);
        margin: 5% 1% 0 0; 
        border-radius: 7px;
        box-shadow: 0.1rem 0.2rem 0.3rem 0.5rem rgba(204, 204, 204, 0.35);}

.lau{width:27.5%;
        height:120px;
        background-image: url(img/lau2014.png);
        float: left;
        margin: 2% 1% 0 2%;}



.textlau { width: 65%;
    height: 150px;
    margin: 0 0 0 1%;
    float: left;}

h3 {font-size: 0.8rem;
    font-family: "Arial";
    padding: 1% 0 0 0;
    margin-top: 2.5%;}

p1{  font-size: 0.75rem;
    font-family: "Arial";
    padding: 0 ;
    margin: 0 0 0 0;
    line-height: 0.35rem; }

.vermas { width: 8%;
    height: 14px;
    background: rgb(255, 206, 0);
    margin: 1.3% 0 0 0  ;
    float: right;
     font-size: 0.8rem;
    font-family: "Arial";
    padding: 0 0 0 2%;}

aside{width: 21%;
      height: 800px;
      background: rgba(231, 201, 157, 0.58);
      margin-top: 2%;
      float:left;}

aside article{width:90%;
        height:220px;
        background: rgba(255, 255, 255, 0.5);
        margin:20% 1% 2% 5%;
        border-radius: 5px;}

p2{width:90%;
   font-size: 0.9rem;}

.calendar{ width:111%;
            margin: 7% 0 0 0;
            padding: 0;}

footer{ width: 100%;
        height: 50px;
        background: rgba(236, 119, 98, 0.76);
        font-family:  sans-serif;
        font-size: 0.65rem;
        text-align: center;
        padding-top: 20px;
        box-shadow: 0.1rem 0.2rem 0.3rem 0.5rem rgba(204, 204, 204, 0.35);}

/* docentes............................................................................... */



.profes
        {width:17%;
        height:150px;
        float: left;
        
        margin:3% 1% 0% 6%;
        border-radius: 120px;
        padding: 0;}

.docentes{width:97%;
        height: 250px;
        background: rgba(109, 190, 153, 0.57);
    background-image: url(img/flechitas.png);
        margin: 2% 0 0 1.5%; 
        padding: 0;
        border-radius: 7px;
        box-shadow: 0.1rem 0.2rem 0.3rem 0.5rem rgba(204, 204, 204, 0.35);}

h1{padding-top:3%;
    margin-top: 0;
    margin-left: 35%;
    font-family: "Arial";
    color:#000; }

.infoprofes {width:97%;
        height: 480px;
        background: rgba(109, 190, 153, 0.57);
        margin: 2% 0 0 1.5%; 
        border-radius: 7px;
        box-shadow: 0.1rem 0.2rem 0.3rem 0.5rem rgba(204, 204, 204, 0.35);}

.fotoprofe{width:20%;
        height:180px;
        float: left;
        margin:2% 1% 0% 2%;
        border-radius: 120px;
        padding: 0;}

.tps{width:15%;
        height:150px;
        float: left;
        margin:1.5% 1% 0% 3.5%;
        border-radius: 6px;
        padding: 0;}

.nombredocente {width:98%;
      font-size: 1.1rem;
      font-family: "Arial";
      font-weight: bold;
     
      padding-top: 5%;}

.parrafo{width:99%;
    height: 150px;
     font-size: 0.9rem;
     font-family: "Arial";
     margin: 0 3% 0 0;
     padding: 0;}

.nombresprofes {width:100%;
    height: 20px;
      font-size: 1rem;
      font-family: "Arial";
      font-weight: bold;
     float: left;
     
    margin: 0% 3% 0 0%;
    padding: 0;}

li.profes{height: 20px;}

.contenedortps
{width:100%;
        height: 180px;
        background: rgba(252, 229, 203, 0.4);
    background-image: url(img/flechitas2.png);
        margin:0 ; 
        padding: 0;
        border-radius: 7px;
        }

.paginapersonal{width:16%;
    height: 16px;
    background: rgba(255, 205, 0, 0.81);
    margin: 2% 0 0 41%;
    font-family: "Arial";
    border-radius: 5px;
    padding: 1%; }


/* responsive ..............................................................................*/

@media  screen and (min-width: 322px) and ( max-width: 768px) { 
   
    header {padding: 0;
            width: 100%;
            height: 150px;}
    
    nav{ height: 60px;}
    
      section{ width: 100%;
        height: 800px;}
    
    li { width:10%;
        margin:2% 3% 0 6%;}
    
   .slider{ width:96%;
    
       }
    

.cajacolor{width:98%;
        height: 300px;
        background: rgba(109, 190, 153, 0.57);
        margin-left: -1%;
    padding: 0;
        border-radius: 7px;
        box-shadow: 0.1rem 0.2rem 0.3rem 0.5rem rgba(204, 204, 204, 0.35);}
    
    
    .zocalo { width: 98%;
       margin-left: -1%;}
    
aside{ display: none; }
    
    footer{ display: none; }
    

}

@media screen  and ( max-width: 320px){ 
    
     
    header {padding: 0;
            width: 100%;
            height: 160px;}
    
    nav{ width: 100%;
        height: 200px;}
    
    li { width:100%;
        margin:1%;}

    main{ width: 100%;
        height: 800px;}
    
    section{ width: 90%;
        height: 800px;}
    
    .slider{width:100%;
        
       }
   .cajacolor{width:100%;
        height: 830px;}
    
    .col1
    {width:90%;
    height:200px;
    background-image: url(img/taller.png);
   margin: 3% 0 0 5%;
    list-style: none;}

      .col2{width:90%;
        height:200px;
        background-image: url(img/docentes.png);
      
        margin: 3% 0 0 5%;
         
        list-style: none;}
    


.col3{width:90%;
        height:200px;
        background-image: url(img/catedra.png);
       
       margin: 3% 0 0 5%;
         }
    
    .titular 
   {width: 30%;
    height: 35px;
    margin:40% 0 0 0 ;
   
    }
h2 
    {font-size: 0.6rem;
     color: #000;
     
     font-weight: bold;}

p {display: none;}
  
    
aside{display: none;
      }

aside article{width:90%;
        height:150px;
       }


    
 .zocalo{display: none;}

.lau{display: none;}

.textlau {display: none;}
   
footer{ display: none; }
   
    
   
    

    


}