* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 1px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.header {
  display: inline-block;
  margin: auto;
  width: 100%;
  padding: 0px;
  
  background: white; 
  /*border: 2px solid #093;*/
  border: 2px solid #4CAF50;
}


.izquierda {
	padding-top: 0.2rem;
	padding-left: 0.2rem;
}

izquierda.logo {
	width: 95%;
	border-radius: 0%;
}

img.logo {
  width: 100%;
  border-radius: 0%;
}

.centro {
	text-align: left;
	padding-left: 5%;
	padding-top: 0.6rem;
}

.derecha {
	text-align: right;
	float:right;
}

img.salir {
	width: 25%;
	border-radius: 0%;
}

/* div que contendrá la barra de menú */
.barradiv {
  display: inline-block;
  margin: auto;
  width: 100%;
  padding: 0px;
  background: #336600;
  /*border: 2px solid #4CAF50;*/
  /*border: 2px solid #999999;*/
}

/* barra de menu */
#barra ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	/*position: relative;*/
	background-color: #336600;
	/*background-color: #ffffff;*/
	/*overflow: auto;*/
	/*border: 2px solid #999999;*/
}

/* items del menú */
#barra ul li {
	background-color:#336600;
}

#barra ul li {
	position:relative;
	float: left;
	margin:0;
	padding:0;
}

/* enlaces del menú */
#barra ul a {
	display: block;
	color: white;
	padding: 10px 10px;
	font-family: verdana, Arial, sans-serif;
	font-size: 0.9rem;
	font-weight: bold;
	text-decoration: none;
}

/* efecto al pasar ratón por los items */
#barra ul li:hover {
	background-color: #4CAF50;
	color: white;
}

#barra ul li:active {
	background-color: #4CAF50;
	color: white;
}


/* menú desplegable */
#barra ul ul {
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background-color: #336600;
	padding:0;
}

/* items del menú desplegable */
#barra ul ul li {
	float:none;
	background-color:#336600;
}

/* enlaces de los items del menú desplegable */
#barra ul ul a {
	line-height:120%;
	padding:10px 15px;
}

#barra ul li:hover > ul {
	display:block;
}

.controles {
	display: inline-block;
  	margin: auto;
  	width: 99%;
  	padding: 5px;
  	/*background: #f1f1f1;*/
  	background: white;
  	border: 3px solid #2784F5;
	border-radius: 10px;
	padding-top: 0.3rem;
	padding-left: 0.5rem;
	
}

.contenidos {
  display: inline-block;
  margin: auto;
  width: 100%;
  height: 87.5vh;
  padding: 0px;
  /*background: #f1f1f1;*/
  background: white;
  /*border: 2px solid #4CAF50;*/
}





/* columnas para temas*/
.temas_izquierda {   
  float: left;
  width: 70%;
  height: 87vh;
  margin-top: 0px;
  overflow: auto;
  /*border: 2px solid #c30;*/
  /*background-color: white;*/
  padding: 0px;
  /*border-radius:5px 5px 5px 5px;*/
}

.temas_derecha {
  float: right;
  width: 29%;
  height: 87vh;
  /*background-color: white;*/
  background-color: #f1f1f1;
  margin-top: 0px;
  /*padding-left: 20px;*/
  padding: 2px;
  
  /*border: 2px solid #c30;*/
  overflow: auto;
}

.exizquierda {   
  float: left;
  width: 100%;
  height: 82%;	
  margin-top: 0px;
  overflow: auto;
  /*border: 2px solid #c30;*/
  /*background-color: white;*/
  padding: 0px;
  /*border-radius:5px 5px 5px 5px;*/
}

.exderecha {
  float: right;
  width: 100%;
  height: 18%;
  /*background-color: white;*/
  background-color: #f1f1f1;
  margin-top: 0px;
  /*padding-left: 20px;*/
  padding: 2px;
  
  /*border: 2px solid #c30;*/
  overflow: auto;
}

.ventsec {
	height:98%;
	width:99.5%;
	background: white;
	/*border-radius: 15px 15px 15px 15px;*/
}

.ventsecex {
	height:95%;
	width:99.5%;
	background: white;
	/*border-radius: 15px 15px 15px 15px;*/
}


/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 0px;
  /*border-radius: 15px 15px 15px 15px;*/
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 1px;
  text-align: center;
  background: #ddd;
  margin-top: 10px;
}

p {
	text-align: left;
}


h1 {
   font-family: Verdana, Arial, sans-serif;
   color: #0033FF;
   font-weight: bold;
  }

h2 {
   font-family: Verdana, Arial, sans-serif;
   color: #0033FF;
   font-weight: bold;
  }

h3 {
   font-family: Verdana, Arial, sans-serif;
   color: #0033FF;
   font-weight: bold;
  }

h4 {
   font-family: Verdana, Arial, sans-serif;
   color: #0033FF;
   font-weight: bold;
  }

h5 {
   font-family: Verdana, Arial, sans-serif;
   color: #0033FF;
   font-weight: bold;
  }

h6 {
   font-family: Verdana, Arial, sans-serif;
   color: #0033FF;
   font-weight: bold;
  }

/*clase para el texto que muestra el nombre del usuario*/
tn {
   font-family: Verdana, Arial, sans-serif;
   color: #0033FF;
   font-size: 2.5rem; 
   font-weight: bold;
   /*font-weight: normal;*/
}

/*etiqueta y lista desplegable */

label {
	font-size: 1.0rem; 
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 5px;	
}

select {
	font-size: 1.0rem; 
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 5px;
}





/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */


@media screen and (min-width: 5000px) {
	.izquierda {
		width:4.25%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
				
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 18%;
	}
	
	tn {
		font-size: 0.95rem; 
	}
	
}

@media screen and (min-width: 4600px) and (max-width: 5000px) {
	.izquierda {
		width:4.5%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
				
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 19%;
	}
	
	tn {
		font-size: 0.95rem; 
	}
	
}



@media screen and (min-width: 4200px) and (max-width: 4600px) {
	.izquierda {
		width:4.75%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
				
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 19.5%;
	}
	
	tn {
		font-size: 0.95rem; 
	}
	
}




@media screen and (min-width: 3800px) and (max-width: 4200px) {
	.izquierda {
		width:5%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
				
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 20%;
	}
	
	tn {
		font-size: 0.95rem; 
	}
	
}




@media screen and (min-width: 3600px) and (max-width: 3800px) {
	.izquierda {
		width:5.25%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
				
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 20.5%;
	}
	
	tn {
		font-size: 0.95rem; 
	}
	
}




@media screen and (min-width: 3200px) and (max-width: 3600px) {
	.izquierda {
		width:5.5%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
				
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 21%;
	}
	
	tn {
		font-size: 0.95rem; 
	}
	
}


@media screen and (min-width: 2800px) and (max-width: 3200px) {
	.izquierda {
		width:5.75%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
				
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 21.5%;
	}
	
	tn {
		font-size: 0.95rem; 
	}
	
}




@media screen and (min-width: 2400px) and (max-width: 2800px) {
	.izquierda {
		width:6%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
				
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 22%;
	}
	
	tn {
		font-size: 0.95rem; 
	}
	
}




@media screen and (min-width: 2000px) and (max-width: 2400px) {
	.izquierda {
		width:6.4%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
				
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	
	img.salir {
		width: 23%;
	}
	
	tn {
		font-size: 0.95rem; 
	}
	
}



@media screen and (min-width: 1900px) and (max-width: 2000px) {
	.izquierda {
		width:6.6%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
				
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 23.5%;
	}
	
	tn {
		font-size: 0.95rem; 
	}
	
}



@media screen and (min-width: 1800px) and (max-width: 1900px) {
	.izquierda {
		width:6.75%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
				
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 24%;
	}
	
	tn {
		font-size: 0.95rem; 
	}
	
}


@media screen and (min-width: 1700px) and (max-width: 1800px) {
	.izquierda {
		width:7%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
				
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 25.5%;
	}
	
	tn {
		font-size: 0.95rem; 
	}
	
	.contenidos {
	  border: 2px solid #4CAF50;
	}
	
}

@media screen and (min-width: 1650px) and (max-width: 1700px) {
	.izquierda {
		width:7.15%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
				
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 26%;
	}
	
	tn {
		font-size: 0.92rem; 
	}
	
}



@media screen and (min-width: 1600px) and (max-width: 1650px) {
	.izquierda {
		width:7.25%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
				
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 26.5%;
	}
	
	tn {
		font-size: 0.92rem; 
	}
	
	.temas_izquierda  {
		width: 73%;
	}
	
	.temas_derecha {
		width: 26%;
	}
	
}


@media screen and (min-width: 1550px) and (max-width: 1600px) {
	.izquierda {
		width:7.5%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
				
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 27%;
	}
	
	tn {
		font-size: 0.92rem; 
	}

	.temas_izquierda  {
		width: 72%;
	}
	
	.temas_derecha {
		width: 27%;
	}
	
}

@media screen and (min-width: 1500px) and (max-width: 1550px) {
	.izquierda {
		width:7.75%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 27.5%;
	}
	
	tn {
		font-size: 0.92rem; 
	}
	
	.temas_izquierda  {
		width: 71%;
	}
	
	.temas_derecha {
		width: 28%;
	}
}


@media screen and (min-width: 1450px) and (max-width: 1500px) {
	.izquierda {
		width:8%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 28%;
	}
	
	tn {
		font-size: 0.92rem; 
	}
	
	
	
	.temas_izquierda  {
		width: 70%;
	}
	
	.temas_derecha {  
		width: 29%;
	}
	
}



@media screen and (min-width: 1400px) and (max-width: 1450px) {
	.izquierda {
		width:8.25%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 28.5%;
	}
	
	tn {
		font-size: 0.92rem; 
	}

	.temas_izquierda  {
		width: 69%;
	}
	
	.temas_derecha {  
		width: 30%;
	}
		
}


@media screen and (min-width: 1350px) and (max-width: 1400px) {
	.izquierda {
		width:8.5%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 29%;
	}
	
	tn {
		font-size: 0.9rem; 
	}
	
	
	.temas_izquierda  {
		width: 68%;
	}
	
	.temas_derecha {  
		width: 31%;
	}
	
}


@media screen and (min-width: 1300px) and (max-width: 1350px) {
	.izquierda {
		width:8.75%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
	
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 30%;
	}
	
	tn {
		font-size: 0.9rem; 
	}

	.temas_izquierda  {
		width: 67%;
	}
	
	.temas_derecha {  
		width: 32%;
	}
	
}

@media screen and (min-width: 1250px) and (max-width: 1300px) {
	.izquierda {
		width:9%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
	
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 32%;
	}
	
	tn {
		font-size: 0.9rem; 
	}
	
	.temas_izquierda  {
		width: 66%;
	}
	
	.temas_derecha {  
		width: 33%;
	}

}

@media screen and (min-width: 1200px) and (max-width: 1250px) {
	.izquierda {
		width:9.5%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 34%;
	}
	
	tn {
		font-size: 0.9rem; 
	}
	
	
	.temas_izquierda  {
		width: 65%;
	}
	
	.temas_derecha {  
		width: 34%;
	}

}

@media screen and (min-width: 1150px) and (max-width: 1200px) {
	.izquierda {
		width:10%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 36%;
	}
	
	tn {
		font-size: 0.9rem; 
	}

	.temas_izquierda  {
		width: 64%;
	}
	
	.temas_derecha {  
		width: 35%;
	}

}


@media screen and (min-width: 1100px) and (max-width: 1150px) {
	.izquierda {
		width:10.5%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 38%;
	}
	
	tn {
		font-size: 0.86rem; 
	}

	.temas_izquierda  {
		width: 63%;
	}
	
	.temas_derecha {  
		width: 36%;
	}

}


@media screen and (min-width: 1050px) and (max-width: 1100px) {
	.izquierda {
		width:11%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 40%;
	}
	
	tn {
		font-size: 0.86rem; 
	}
	
	.temas_izquierda  {
		width: 62%;
	}
	
	.temas_derecha {  
		width: 37%;
	}

}


@media screen and (min-width: 1000px) and (max-width: 1050px) {
	.izquierda {
		width:11.5%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 42%;
	}
	
	tn {
		font-size: 0.86rem; 
	}
	
	.temas_izquierda  {
		width: 61%;
	}
	
	.temas_derecha {  
		width: 38%;
	}

}




@media screen and (min-width: 950px) and (max-width: 1000px) {
	.izquierda {
		width:12%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 45%;
	}
	
	tn {
		font-size: 0.86rem; 
	}
	
	.temas_izquierda  {
		width: 60%;
	}
	
	.temas_derecha {  
		width: 39%;
	}
		
}


@media screen and (min-width: 900px) and (max-width: 950px) {
	.izquierda {
		width:12.5%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 45%;
	}
	
	tn {
		font-size: 0.86rem; 
	}
	
	.temas_izquierda  {
		width: 59%;
	}
	
	.temas_derecha {  
		width: 40%;
	}

}


@media screen and (min-width: 850px) and (max-width: 900px) {
	.izquierda {
		width:13%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 46%;
	}
	
	tn {
		font-size: 0.86rem; 
	}
	
	.contenidos {
	 	/*border: 2px solid #4CAF50;*/
	  	height: 88vh;
	}
	
	.temas_izquierda {   
		width: 100%;
		height: 70%;
	}
	
	.temas_derecha {
		width: 100%;
		height: 30%;
	}
}

@media screen and (min-width: 800px) and (max-width: 850px) {
	.izquierda {
		width:14%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 50%;
	}
	
	tn {
		font-size: 0.86rem; 
	}
	
	.contenidos {
	 	/*border: 2px solid #4CAF50;*/
	  	height: 88vh;
	}
	
	.temas_izquierda {   
		width: 100%;
		height: 70%;
	}
	
	.temas_derecha {
		width: 100%;
		height: 30%;
	}
	
}


@media screen and (min-width: 750px) and (max-width: 800px) {
	.izquierda {
		width:15%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 54%;
	}
	
	tn {
		font-size: 0.86rem; 
	}
	
	.contenidos {
	 	/*border: 2px solid #4CAF50;*/
	  	height: 88vh;
	}
	
	.temas_izquierda {   
		width: 100%;
		height: 70%;
	}
	
	.temas_derecha {
		/*border: 2px solid red;*/
		width: 100%;
		height: 30%;
	}

}

@media screen and (min-width: 700px) and (max-width: 750px) {
	.izquierda {
		width:16%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 58%;
	}
	
	tn {
		font-size: 0.84rem; 
	}

	.contenidos {
	 	/*border: 2px solid #4CAF50;*/
	  	height: 88vh;
	}
	
	.temas_izquierda {   
		width: 100%;
		height: 70%;
	}
	
	.temas_derecha {
		width: 100%;
		height: 30%;
	}

	.exizquierda {   
		width: 100%;
		height: 86%;
	}
	
	.exderecha {
		width: 100%;
		height: 14%;
	}

}

@media screen and (min-width: 650px) and (max-width: 700px) {
	.izquierda {
		width:17%;
		float: left;
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 60%;
	}
	
	tn {
		font-size: 0.82rem; 
	}

	.contenidos {
	 	/*border: 2px solid #4CAF50;*/
	  	height: 88vh;
	}
	
	.temas_izquierda {   
		width: 100%;
		height: 70%;
	}
	
	.temas_derecha {
		width: 100%;
		height: 30%;
	}
	
	.exizquierda {   
		width: 100%;
		height: 86%;
	}
	
	.exderecha {
		width: 100%;
		height: 14%;
	}
	

}

@media screen and (min-width: 600px) and (max-width: 650px) {
	.izquierda {
		width:18%;
		float: left;
		
		/*border: 2px solid #c30;*/
	}
	
	.centro {
		width: 68%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.1rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 68%;
	}
	
	tn {
		font-size: 0.8rem; 
	}
	
	.contenidos {
	  /*border: 2px solid #4CAF50;*/
	  height: 88vh;
	}
	
	.temas_izquierda {   
		width: 100%;
		height: 70%;
	}
	
	.temas_derecha {
		width: 100%;
		height: 30%;
	}

	.exizquierda {   
		width: 100%;
		height: 85%;
	}
	
	.exderecha {
		width: 100%;
		height: 15%;
		/*border: 2px solid red;*/
	}

}

@media screen and (min-width: 550px)  and (max-width: 600px) {
	.izquierda {
		width: 19%;
		float: left;
	}
	
	.centro {
		width: 67%;
		float: left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.2rem;
		float: right;
				
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 65%;
	}
	
	tn {
		font-size: 0.8rem; 
	}

	.contenidos {
	  /*border: 2px solid #4CAF50;*/
	  height: 88.5vh;
	}
	
	.temas_izquierda {   
		width: 100%;
		height: 70%;
	}
	
	.temas_derecha {
		width: 100%;
		height: 30%;
	}

	.exizquierda {   
		width: 100%;
		height: 85%;
	}
	
	.exderecha {
		width: 100%;
		height: 15%;
		/*border: 2px solid red;*/
	}

}

@media screen and (min-width: 500px)  and (max-width: 550px) {
	.izquierda {
		width:21%;	
		float: left;
		
		/*border: 2px solid #c30;*/
	}
	
	.centro {
		width: 65%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 10%;
		padding-top: 0.2rem;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 60%;
	}
	
	tn {
		font-size: 0.8rem; 
	}

	.contenidos {
	  /*border: 2px solid #4CAF50;*/
	  height: 88vh;
	}
	
	.temas_izquierda {   
		width: 100%;
		height: 70%;
	}
	
	.temas_derecha {
		width: 100%;
		height: 30%;
	}
	
	.exizquierda {   
		width: 100%;
		height: 85%;
	}
	
	.exderecha {
		width: 100%;
		height: 15%;
		/*border: 2px solid red;*/
		
	}
	
}

@media screen and (min-width: 450px)  and (max-width: 500px) {
	.izquierda {
		width:24%;	
		float: left;
		
		/*border: 2px solid #c30;*/
	}
	
	.centro {
		width: 65%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 10%;
		padding-top: 0.2rem;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 65%;
	}
	
	tn {
		font-size: 0.75rem; 
	}

	.contenidos {
	  /*border: 2px solid #4CAF50;*/
	  height: 88vh;
	}
	
	.temas_izquierda {   
		width: 100%;
		height: 70%;
	}
	
	.temas_derecha {
		width: 100%;
		height: 30%;
	}
	
	.exizquierda {   
		width: 100%;
		height: 85%;
	}
	
	.exderecha {
		width: 100%;
		height: 15%;
		/*border: 2px solid red;*/
	}
	
}



@media screen and (min-width: 400px)  and (max-width: 450px) {
	.izquierda {
		width:26%;
		float: left;
		
		/*border: 2px solid #c30;*/
	}
	
	.centro {
		width: 65%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.2rem;
		
		/*border: 2px solid red;*/
	}
	
	img.salir {
		width: 90%;
	}
	
	tn {
		font-size: 0.75rem; 
	}

	.contenidos {
		  /*border: 2px solid #4CAF50;*/
		height: 88vh;
	}	
		
	.temas_izquierda {   
		width: 100%;
		height: 70%;
	}
	
	.temas_derecha {
		width: 100%;
		height: 30%;
	}
	
	.exizquierda {   
		width: 100%;
		height: 82%;
	}
	
	.exderecha {
		width: 100%;
		height: 18%;
		/*border: 2px solid red;*/
	}
	
}


/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
	.izquierda {
		width:28%;
		float:left;
		/*border: 2px solid #c30;*/
	}
	
	.centro {	
		width: 63%;
		float:left;
		
		/*border: 2px solid #c30;*/
	}
	
	.derecha {
		width: 8%;
		padding-top: 0.2rem;
		float:right;
		
		/*border: 2px solid #c30;*/
	}
	
	img.salir {
		width: 95%;
	}
	
	tn {
		font-size: 0.7rem; 
  }

	ul.topnav1 li a {
  		font-size: 0.8rem;
  		font-weight: normal;
	}
	
	.contenidos {
	  /*border: 2px solid #4CAF50;*/
	  height: 87.5vh;
	}

	.temas_izquierda {   
		width: 100%;
		height: 70%;
	}
	
	.temas_derecha {
		width: 100%;
		height: 30%;
	}
	
	.exizquierda {   
		width: 100%;
		height: 83%;
	}
	
	.exderecha {
		width: 100%;
		height: 17%;
	}
	
	
	
}