*{margin:0; padding:0}
body{
    background:#fff;
    }
header {
	width:100%; /* Establecemos que el header abarque el 100% del documento */
	overflow:hidden; /* Eliminamos errores de float */
	background:#286af0;
	margin-bottom:10px;
        padding:10px;
        font-size:10px;
        font-family:"Times New Roman", Times, serif;
       }
 .wrapper {
	/* Centramos los elementos */
       overflow:hidden; /* Eliminamos errores de float */
       min-height: 100%;
       height: auto;
       width:100%; 
       margin: 0 auto -4em;
   }
 
header .logo {
	color:#efd;
	font-size:20px;
	line-height:20px;
	float:left;
        /*display:inline-block;*/
}
 
header nav {
	float:right;
	line-height:100px;
       
}
header nav a{
	display:inline-block;
	color:#efd;
	text-decoration:none;
	padding:10px 20px;
	line-height:normal;
	font-size:10px;
	font-weight:bold;
	-webkit-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease;
    }
header nav a:hover {
	background:#C2210E;
	border-radius:5px;
}
.header2 {
	position: fixed;
	height:150px;
        margin-bottom:10px;
       
}
 
.header2 .logo {
	line-height:100px;
	font-size:30px;
}
 
.header2 nav {
	line-height:100px;
}
@media screen and (max-width: 950px) {
	header .logo,
	header nav {
		width:100%;
		text-align:center; /*Centramos el menu y el logotipo*/
		line-height:100px;
	}
 
	.header2 {
		height:auto;
	}
 
	.header2 .logo,
	.header2 nav,
        .div1{
		line-height:50px;
	}
        .cuerpo{
             width:auto;
        }
}
div1 {
  width: 100%;
  height: 120px;
  padding: 20px;
  background:#3E8511;
  color:#efd;
  font-size:40px;
}
.content-box { 
  box-sizing: content-box; 
  /* Ancho  total: 160px + (2 * 20px) + (2 * 8px) = 216px
     Altura total: 80px + (2 * 20px) + (2 * 8px) = 136px
     Ancho de la caja de contenido: 160px
     Altura de la caja de contenido: 80px */
}

footer{
   /* Like the header, the footer will have a static height - it shouldn't grow or shrink.  */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   text-align:center;
   background:#286af0;
   width: 100%;
   height: auto !important;
}
.caja{
    width:25%;
    height:650px;
    color:black;
    font-size:25Px;
    margin:30Px 40px;
    background:#FFFFFF;
    border-radius:10px ;
    box-shadow: 5px 5px 10px rgb(100,100,100) inset;
    display:inline-table;
    overflow: hidden;
    }
.caja:hover
{
    transform: scale(1.1);
    
}

.caja1{
    width:40%;
    height:450px;
    color:black;
    font-size:30Px;
    margin:100Px 40px;
    background:#FFFFFF;
    font-size:25px;
    border-radius:10px ;
    box-shadow: 5px 5px 10px rgb(0,143,57) inset;
    display:inline-table;
    overflow: hidden;
}
.caja1:hover
{
    /*transform: scale(0.0);*/
    
}
.caja2
{
    width:100%;
    height:50px;
    color:black;
    font-size:25Px;
    background:#047972;
    border-radius:10px ;
    box-shadow: 5px 5px 10px rgb(200,200,200) inset;
    display:inline-table;
    overflow: hidden;
}

.cuerpo{
        width:70%;
	top:70px;
	left:60%;
	width:100%;
	margin:150px auto;
	height:auto;
	margin-top:20px;
        margin-bottom:20px;
	padding:5px;
        background-color:#047972;
        padding:10px 20px;
       
}
.table{
    background-color:#fff;
    text-align: center;
    border-collapse: collapse;
    width:100%;
    margin-top:20px;
    margin-bottom: 20px;
   }
tr,td{
    border:1;
    padding: 15px;
    align-content: center;
    font-size:15Px;
    color:#286af0;
    }
tr:nth-child(even) {background-color: #f2f2f2;}
th{
  background-color: #4CAF50;
  color: white;
  text-align: center;
  font-size:20Px;
 }
 div{margin-bottom:20px;}

 .caja3{
    width:20%;
    height:200px;
    color:black;
    /*font-size:25Px;*/
    margin:50px 20px;
    background:	#F8F8FF;
    font-size:25px;
    border-radius:10px ;
    /*box-shadow: 5px 5px 10px rgb(50,50,50) inset;*/
    display:inline-table;
    overflow:hidden;
    font: oblique bold 120% cursive;
   }
 
.caja3:hover
{
    transform: scale(1.1);
    
}
.caja4{
 background:#F8F8FF;
 font-size: 25Px;
 border-radius:10px ;
 width:80%;
 list-style:square inside;
 color:#0F100F;
 margin-top:20px;
 margin-bottom:20px;
 overflow: hidden;
 display:inline-table;
 margin:50Px 40px;
}

input{
    /*border: 1px solid #999; No usar esta línea y dejar box-shadow hace efecto de profundidad*/
    border-radius:5px; /*probar con 10px se hacen ovalados los inputs*/
    box-shadow: 2px 2px 3px 1px rgba(0,0,0,.8);
    font:bold 20px Arial, Helvetica, sans-serif;
    height: 30px;
    line-height: 20px;
    padding:0 2px;
    width: 250px;
}
 
input#usuario{
    background:#ffc url('Imagenes/usuario.png'); /*no-repeat 0 2px; probar con #ddf.
                                                                Para mover arriba-abajo la imagen 'jugar' con 2px, 5px */
    /*Para que el texto dentro del input se mueva*/
    padding-left: 25px; /*Sirve para darle espacio ala imagen, probar con 30px 10px y ver comportamiento*/
}
 
input#contrasenia{
    background:#ffc url("Imagenes/pass.png") no-repeat 0 5px;
    padding-left: 25px;
 
}
input#submit{
    /*border: 1px solid #999; No usar esta línea y dejar box-shadow hace efecto de profundidad*/
    border-radius:5px; /*probar con 10px se hacen ovalados los inputs*/
    box-shadow: 2px 2px 3px 1px rgba(0,0,0,.8);
    font:bold 20px Arial, Helvetica, sans-serif;
    height: 40px;
    line-height: 20px;
    padding:0 2px;
    width:auto;
    }
    select{
    border-radius:5px; /*probar con 10px se hacen ovalados los inputs*/
    box-shadow: 2px 2px 3px 1px rgba(0,0,0,.8);
    font:bold 20px Arial, Helvetica, sans-serif;
    height: 40px;
    line-height: 20px;
    padding:0 2px;
    width: 350px;
   }
   select1{
    border-radius:5px; /*probar con 10px se hacen ovalados los inputs*/
    box-shadow: 2px 2px 3px 1px rgba(0,0,0,.8);
    font:bold 20px Arial, Helvetica, sans-serif;
    height: 40px;
    line-height: 20px;
    padding:0 2px;
    width: 200px;
   }
   
.img{
  margin:10px auto;
  border-radius:5px;
  border: 1px solid #999;
  padding:13px;
  width:600px;
  height:220px;
  background-size: 100% 100%;
  background-repeat:no-repeat;
  background:url(../Imagenes/educacoop5.png);
  background-size: cover;
  }
.img img{
  width: 100%;
}
.rss {
   margin: 0;
   padding: 0;
   list-style-type: square;
}
 .rss li {
   background: #fff url("./Imagenes/ok.png") 0 3px no-repeat;
   padding: 0 0 5px 15px;
}
.video-responsive {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 70%;
}