@media only screen and (min-width : 768px) 
                                         {.box{width: 29%;float:left;}}
/*PROPIEDADES GENERALES*/

body  {margin-left: 5%;
       margin-right: 5%;
      font-family: 'Titillium Web', sans-serif;       
      font-size: 16px;
      background-color: white;}

h1 {width: 100%;
    color: white;
    background-color:#333333;  
    display: block;
    border-top: 1px solid black;
    border-bottom: 3px solid black;
    font-size: 32px;
    text-align: center;
    padding: 0.5%;
    margin: 0 auto;}
	
h2 p {margin: 1% auto;
      padding: 1%;
      color: #333333;}    

h3 {font-size: 18px;    
    color: white;
    text-decoration:underline;
    margin: 0 auto;}
h4 {margin: 0px;}


/*BARRA DE NAVEGACIÓN*/

header{width:100%;
	   height:auto;
       margin: 0 auto;
       display: block;
       position: relative;
       box-shadow:0px 5px 12px rgba(0, 0, 0, 0.3);
    }


#logo{margin-left: 4%;
      overflow: hidden;
      display: block;
      float: left;}

#logo img {width: 100%;overflow: hidden;
           margin-top: 4%; display: block;
      float: left;}

header nav{	background-color:#333333;  width:100%;       
	        position:relative;
	        float:right;
            display: block;
            overflow: hidden;
            clear: both;
            margin-top: 0%;
            margin-bottom: 2%;}

.menu {list-style-type: none;
       margin-left: 4%;
       display: block;
       margin-top:5%;	 
       overflow: hidden;
       }

header nav ul li a {
	text-decoration:none;
	color:#ff7506; 
	float:left;
	font-size:18px;    
	margin-right:25px;
    overflow: hidden;
    margin-left: 1%}

a:hover {color: aliceblue;}


/*CONTENEDOR SLIDER*/

#slider {width: 96%;         
        margin-top: 1%;
        margin-left: 2%;              
         display: block;}

/*PRESENTACIÓN TEMA*/

#contenedormision{width:99%;	             
                  text-align:center;                  
                  margin-top: 5%;
                  clear: both;
                padding-bottom: 1%}

#botonleermas {background-color: black;            
               text-decoration:none;
	           color:#f18d05;	
	           font-size:18px; 	
               overflow: hidden;
               width: 15%;
               margin: 0 auto;
               clear: both;}

#botonleermas:hover {
                     color: white;
                     font-size: 24px;}
#mision {width: 100%;
       color: black;
    display: block;
            font-size: 22px;
    text-align: center;
    line-height: 30px;
     margin-top: -2%;}
#mision h1 {width: 100%;}

/*NOTICIAS*/

.contenedornoticias{width:100%;
                    height: auto;
                    display: block;              
                    margin: 2% auto;
                    float: left;                 
                    overflow: hidden;
                    background-color:#01a4a4;
                    }

.contenedornoticias img {width:100%} 
                     
.cajanoticias {width: 20%;
               height: auto;
               padding: 2%;
               text-align:left;               
               float: left;
               overflow: hidden;
               color: white;}

#botonnoticias {text-decoration:none;
                background-color: #1b1b1b;
	           padding: 3%;
               color:white;	
	           font-size:18px; 	
               overflow: hidden;
               width: 100%;
               margin: 0 auto;
               clear: both;
               
               }
#botonnoticias:hover {color: white;margin: 0 auto;background-color: #ff7506;}

/*NOTICIAS INFO AMPLIADA*/

#noticia{background-color:white;
        padding: 2%;
        width: 96%;
        overflow: hidden}

#info{background-color: #01a4a4;
    padding: 1%;
    padding-bottom: 5%;
    text-align: left;
    font-size: 90%;
    width:50%;
    color: white;
    float:left}

h2 {font-size: 24px;    
    color:#333333;
    margin: 0 auto;
    margin-bottom: 2%;}

#cajafoto{background-color: #333333;
    padding: 1%;
    width: 45%;
    position: relative;
    float: right;
    align-content: center;
    color: #ff7506}

#cajafotopunto{background-color: #333333;
    padding: 1%;
    text-align: left;
    width: 45%;
    margin-bottom: 2%;
    position: relative;
    float: right;
    align-content: center;
     color: white;}
#imagenpunto {width: 100%; overflow: hidden;display: block;float: left;}

hr.linea {float:none;
    width: 96%;
    color: #ff7506;
    height: 1px;
    margin-top: 0.5rem;
}

.navenlace a {background-color: #f8913e; 
    color: #000000;
    text-decoration: none;
    font-style: italic;
    font-size: 86%;
    display: block;
    align-content: : 100%;
    width: 96%;
    padding: 1%;
}

.extras{background-color: #f8913e;
    padding: 1%;
    margin-top: 1%;
    text-align: center;
    width: 45%;
    position: relative;
    float: right;
    align-content: center;
    color: black}

.cajamas{background-color: #01a4a4;
    padding: 2%;
    margin-top: 1%;
    text-align: center;
    width: 43%;
    position: relative;
    float: right;
    align-content: center;
    color: black}

.cajamasnoticias1{background-color: #ff7506;
    padding: 2%;
    width: 45%;
    position: relative;
    float:left;
    align-content: center;
    color: white}

.cajamasnoticias2{background-color: #ff7506;
    padding: 2%;
    width: 45%;
    position: relative;
    float: right;
    align-content: center;
    color: white}

#cajaplan{width: 87%;
        height:auto;
        background-color: #02d1d1;
        padding: 2%;
        padding-left: 10%;
        align-content: center}

h5{color: white;
        font-size: 80%;
        font-style: italic;    
}


/*SECCIÓN VIDEOS*/

#videodeldia {background-image:url(imagenes/cinema.jpg);
              background-size:cover;
              width: 60%;            
              float: left;              
              margin-bottom: 2%;
            overflow: hidden;}
#videodeldia iframe {width:100%;}


/*INFORMATIVOS 50% QUEDÓ SIN USO*/

#sector50 {width:100%;
           clear: both;           
           overflow: hidden;}


.contenedor50 {margin-top: 1%;
               margin-left:2%;
               position: relative;               
               float: left;     } 

.contenedor50 img {width: 100%;
                   height: 100%;                    
                    position: relative;
                   }

/*FOOTER*/

footer{width:97%;
        height:100px;
        background-color:#333333;
        clear: both;
        color: white;
        font-size: 12px;
        text-align: center;        
        padding-left: 2%;
        padding-right: 2%;
        padding-top: 2%}

        
/*QUIENES SOMOS*/

#fondoseccion{background-color:#01a4a4;}

#contenedorliliana {width: 100%;
                    overflow: hidden;
                    display: block;
                    margin-top: 2%;
                   
                    float:left}

.contenedorfoto {              
                 overflow: hidden;
                 float: left;
                  display: block;
                 margin-top: 2%;
                margin-left: 1%}

.contenedorfoto img {width: 100%;}


   

#tituloespecial {display: block;
                font-size: 26px;
                text-align: left;
                padding-left: 2%;
                 color: white;}

.contenedorinfo {width:40%;           
                 margin-right: 2%;
                 padding: 1%;
                 color: white;
                 float: left;
                 overflow: hidden;
                 display: block;}

.contenedoralumnos {background-color: #ff7506;
                    width: 23%;
                    margin-left: 1% ;
                    overflow: hidden;
                    display: block;
                    margin-top: 2% auto;
                    float: left; 
                    margin-bottom: 3%;
                    

                      }

.contenedorfotoalumno {          
                      overflow: hidden;
                      float: left;
                      display: block;}

.contenedorinfoalumno { padding: 2%;
                       margin-top: 2%;
                       margin-left: 2%;
                       margin-right: 2%;
                       color: white;
                       float: left;
                        overflow: hidden;
                        display: block;
                        text-align: center;}
#frase{width: 100%;
       color:white;
    margin: 2% auto;       
    display: block;    
    border-top: 1px solid white;
    border-bottom: 3px solid white;
    font-size: 42px;
    text-decoration-style:double;
     text-align: center;
    line-height: 50px}

.gifsumate { margin-top: 2%;
             width:20%;
             display: block;
             float: right;
             overflow: hidden;
             }
.gifsumate img {width: 100%;}

.gifredes{ margin-top: 2%;
             width:20%;
             display: block;
             float:right;
             overflow: hidden;
             }
.gifredes img {width: 30%;
               display: block;
               overflow: hidden;}




/*PROYECTO*/

.titulo1 {color: #333333;
              font-size: 28px;
              font-style: oblique;
              margin-top: 2%;
             font-weight: bold;}

.titulo2 {font-size: 16px;
        font-style: oblique;
        font-weight: bold;
        margin-top: 2%;
        margin-left: 3%;}

#textoproyecto{width:65%;
            margin-left: 2%;
            text-align: justify;
            margin-top: 3%;
            overflow: hidden;
            float: left;}

.cajitaproyectogral{margin-top:13%;
                    margin-left: 2%;
                    width: 29%;
                    float: left;
                    overflow: hidden}

.cajitaproyecto {font-size: 14px;
                  width:100%;
                  background-color: #00a1cb;
                  overflow: hidden;
                  float: left;
                   margin-top:2%;
                   margin-left: 2%;
                   color: white; }

.parrafoproyecto{margin-left: 3%;
                text-align: left}

.destacados {font-weight: bold;
             color: white;
             background-color: #00a1cb;
             margin:1%;
             padding: 2%;
             font-size: 20px;}  

/*PIE CONTACTO*/

.pie {width:50%;     
      margin-top: 2%;
      height: 80px;
      background-color: #ff7506;
      overflow: hidden;
      display: block;
       float: left;
    list-style-type: none;
    text-decoration: none;}

/* DEBATE ONLINE*/

#contenidodebate {width: 100%;
                  margin-top: 4%;
                  overflow: hidden;
                  float: left;
                  }

#contenedorvideo {overflow: hidden;                 
                  background-color: #333333;
                  width:100%;                  
                  clear: both;
                  float: left;
                  margin-bottom: 2%;}

#contenedorc {float: left;
              overflow: hidden;
              margin-bottom: 1%;}

.contenidopersona {width: 70%;
                   float: left;
                   padding: 1%;
                   margin-left: 1%;
                   overflow: hidden;
                   display: block;
                    text-align: justify;}

.ultimocontenedor {width: 100%;
                   overflow: hidden;float: left; display: block;padding: 1%;text-decoration: none; text-decoration-style: none;list-style-type: none; }
.contieneinforme {width: 22%;margin-right: 1%;padding: 1%;margin-top: 2%; display: block;overflow: hidden;float: left;text-align: justify;}
.contieneinforme img {width: 95%;}
.contieneinforme a {text-decoration-style: none;list-style-type: none;}



/*SUMATE*/

.titulo1 {color: #333333;
              font-size: 28px;
              font-style: oblique;
              margin-top: 2%;
             font-weight: bold;}

.titulo2 {font-size: 16px;
              font-style: oblique;
              font-weight: bold;
               margin-top: 2%;
               margin-left: 3%}

.titulo3 {color: #333333;
              font-size: 12px;
              font-style: oblique;
              margin-top: 2%;
             font-weight: bold}

.cajitasumategral{margin-top:13%;
                margin-left: 2%;
                width: 29%;
                float: left;
                overflow: hidden;
                background-color: #dce8eb}


.cajitasumate {font-size: 14px;
                width:100%;
                background-color: #00a1cb;
                overflow: hidden;
                float: left;
                margin-bottom: 1%;
                margin-top:2%;
                margin-left: 2%;
                color: white;
                padding:5px}

.cajitagif {width:99%;
            background-color: #ff7506;
            overflow: hidden;
            float: left;
            margin-top:2%;
            color: white;
            padding: 10px}

.contenedorsumate{width: 100%;
    background-color: #00a1cb;
    height: 410x;
    margin-top:10px;
    width: 98%;
    float: left;
    overflow: hidden;
    padding: 10px}

.iconos{width: 98%;
    background-color: #00a1cb;
    height: auto;
    margin: 10px;
    float:right;
    padding: 5px}

.temario{width: 98%;
    margin: 10px;
    float:left;
    text-align: left;
    color: white;
    font-size: 20px}

/*SUMATE FORMULARIO*/

.portadaformulario{width: auto;
    float:left;
    cursor: all-scroll;
    padding: 1%
    filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition:filter 0.4s;
-webkit-transition:-webkit-filter 1s}

.portadaformulario:hover{filter: grayscale(0);
-webkit-filter: grayscale(0)}

.titulo1 {color: #333333;
              font-size: 28px;
              font-style: oblique;
              margin-top: 2%;
             font-weight: bold;}

.titulo2 {font-size: 16px;
              font-style: oblique;
              font-weight: bold;
               margin-top: 2%;
               margin-left: 3%}

.titulo3 {color: #333333;
              font-size: 12px;
              font-style: oblique;
              margin-top: 2%;
             font-weight: bold}

.cajitaformgral{margin-top:1%;
                margin-left: 2%;
                width: 29%;
                float: left;
                overflow: hidden;
                background-color: #dce8eb}


.cajitasumate {font-size: 14px;
                width:100%;
                background-color: #00a1cb;
                overflow: hidden;
                float: left;
                margin-bottom: 1%;
                margin-top:2%;
                margin-left: 2%;
                color: white;
                padding:5px}


.contenedorformulario{background-color: #00a1cb;
    background-image: url(imagenes/fotoiconos.png);
    width: 63%;
    height: auto;
    margin-top:10px;
    margin-bottom: 10%;
    float: left;
    overflow: hidden;
    padding: 2%;
    padding-left: 3%;
    align-content: center}

#cajapreguntas{background-color: rgba(9, 182, 227, 0.76);
    width: 70%;
    height: 410x;
    margin-top:10px;
    float: left;
    overflow: hidden;
    padding: 1%;
    padding-left: 15%;
    align-content: center}



/*GALERIA*/

.contenedorgaleria{width: 100%;
    background-color: #333333;
    height: auto;
    margin-top: 10px;
    width: 96%;
    float:none;
    overflow: hidden;
    padding: 20px;
}

.cajatitulo{width: 850px;
    background-color: #00a1cb;
    margin-bottom: 10px;
    padding: 10px;
    color: white;
    font-size: 20px;
    text-align: center;
}

#caja1{width: auto;
    float:left;
    cursor: all-scroll;
    margin-bottom: 5px;
    filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition:filter 0.4s;
-webkit-transition:-webkit-filter 1s}

#caja1:hover{filter: grayscale(0);
-webkit-filter: grayscale(0)}

#caja2{width:auto;
    float: left;
    cursor: all-scroll;
    filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition:filter 0.4s;
-webkit-transition:-webkit-filter 1s}

#caja2:hover{filter: grayscale(0);
-webkit-filter: grayscale(0)}

#caja3{width: auto;
    float:right;
    cursor: all-scroll;
    filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition:filter 0.4s;
-webkit-transition:-webkit-filter 1s}

#caja3:hover{filter: grayscale(0);
-webkit-filter: grayscale(0)}

#caja4{width: auto;
    float:left;
    cursor: all-scroll;
    margin-top: 5px;
    margin-bottom: 5px;
    filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition:filter 0.4s;
-webkit-transition:-webkit-filter 1s}

#caja4:hover{filter: grayscale(0);
-webkit-filter: grayscale(0)}

#caja5{width: auto;
    float:left;
    cursor: all-scroll;
    margin-right: 10px;
    filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition:filter 0.4s;
-webkit-transition:-webkit-filter 1s}

#caja5:hover{filter: grayscale(0);
-webkit-filter: grayscale(0)}

#caja6{width: auto;
    float:left;
    cursor: all-scroll;
    margin-right: 10px;
    filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition:filter 0.4s;
-webkit-transition:-webkit-filter 1s}

#caja6:hover{filter: grayscale(0);
-webkit-filter: grayscale(0)}

#caja7{width: auto;
    float:left;
    cursor: all-scroll;
    filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition:filter 0.4s;
-webkit-transition:-webkit-filter 1s}

#caja7:hover{filter: grayscale(0);
-webkit-filter: grayscale(0)}

#cajavideo1 {background-color: #a4adaf;
            width: auto;            
            float: left;              
            margin-bottom: 1%;
            margin-top: 1%;
            margin-right: 10px;
            overflow: hidden;
            padding:10px;
            text-align: center}

#cajavideo2 {background-color: #a4adaf;
            width: auto;            
            float: left;              
            margin-bottom: 1%;
            margin-top: 1%;
            margin-right: 10px;
            overflow: hidden;
            padding:10px;
            text-align: center}

#cajavideo3 {background-color: #a4adaf;
            width: auto;            
            float: left;              
            margin-bottom: 1%;
            margin-top: 1%;
            overflow: hidden;
            padding:10px;
            text-align: center}

h5 {font-size: 12px;    
    color:rgb(255, 255, 255);
    margin: 5px;
    margin-bottom: 2%;}

/*PIE MAPA DEL SITIO*/

#botonerainferior {
    height: auto;    
    width:99%;
    float: left;
    padding: 1%;
    background-color: #ff7506;
    overflow: hidden;}

.listabotones {width: 50%;
               position: relative;
               float: left;
               padding: 1%;}

#botonerainferior ul {
    margin: 0;
    padding: 0;
    margin-right: 15px;
    padding-right: 20px;
    float: left;
    border-right: 1px solid #fff;
    font-weight: 100;
    line-height: 20px;
    position: relative;}

#botonerainferior ul li {
    text-decoration: none;
    display: block;
    font-size: 14px;
    position: relative;}
#botonerainferior ul li :hover{color: #333333;} 
    
#botonerainferior ul li a {
    color: #fff;
    text-decoration: none;}  

.lista ul li a {
    color: white;
    font-weight: 18px;    
    height: 10px;
    padding: 1%;}

.lista ul li a:hover {
    color: #333333;
    padding: 4px;}

.imagenlogos {
    width:35%;
    margin-right: 12;
    float: left;
    overflow: hidden;
    padding-top: 1%;}
.imagenlogos img {width: 100%;}




/*CRONOGRAMA*/

#cronograma {width: 35%;            
            display: block;
            overflow: hidden;
            float: left;
            margin-left: 2%;}
#cronograma h1 {margin-bottom: 2%;
                text-decoration: underline}

.mes {width: 29%;
      
      padding: 1%;
      border-right: 1px solid #333333;
      margin-top: 2%;
      padding: 2%;
      overflow: hidden;
      display: block;
      float: left;}

.mes p {margin-top: 0%;
        margin-bottom: 0%;
        line-height: 16px;}

span {font-style: italic;
      font-weight: 900;
      margin-bottom: 0%;
      color:#01a4a4;}

/*CRONOGRAMA AMPLIADO*/

.contenedorcronograma{width: 100%;
    background-color: white;
    height: auto;
    margin-top: 1%;
    width: 97%;
    float:none;
    overflow: hidden;
    padding: 20px;
    padding-bottom: 10%}

#cajacronograma {width: 72%;            
            display: block;
            overflow: hidden;
            float: right;
            margin-right: 0,2%;
            font-size: 85%;
            }

#cajainfo{width: 27%;
        display: block;
        overflow: hidden;
        float: left;
        margin-left: 0,2%;
        margin-top: 9%;
        font-size: 90%}





 /* RESPONSIVE PARA TABLET*/  
    
@media screen and (max-width: 1020px) {.cajanoticias {width: 45%;padding: 1%;height: auto;margin: 1%;}
                                       .contenedornoticias {margin-top: 3%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%;}
                                       #videodeldia {width: 100%;padding: 1%;align-content: center; } iframe {width: 100%;} }
                                      
                                       

    
 /* RESPONSIVE PARA CELULAR*/  

@media screen and (max-width: 768px) {  #logo img {width:110%;}
                                        .menu li a {width: 100%;} 
                                        nav {width: auto; background-color: #333333; overflow: hidden;float: left; padding: 0%;}
                                        li :hover {background-color: #ff7506;color: white;}   
                                        .cajanoticias {width: 90%;padding: 2%;height: auto;margin: 2%;}
                                    .contenedornoticias {margin-top: 3%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%;}
                                        p {margin: 1%;}
                                        h1 {margin-bottom: 3%;}
                                        #slider {display:  none;}
                                        #botonleermas {width: 100%;margin: 0%; padding: 0%;}
                                        #botonnoticias {width: auto;margin: 0%;}
                                        #videodeldia {width: 100%;} iframe {width: 100%;}
                                        #botonerainferior {display: none;}
                                        #cronograma {width: 100%;}
                                        .mes {padding: 1%;
                                              width: 45%;
                                              border-right: none;
                                              border-bottom: 1px solid #333333;}
                                        .mes p {font-size: 14px;}