.textTem{

	background: #DDFFEC;
	width: 80%;
	position: absolute;
	margin-left: 12%;
	margin-top:200px;
	height: 70%; 


}
.detalles{
	height: auto;
	margin-top: 10px;
	padding: 0;
	text-align: center;
	margin-bottom: 10px;

}

.detalles button{
	text-align: center;
	margin-top: 0px;
	padding-bottom: 5px;
	background: #0431B4;
}

.detalles button:hover{
	background: #74C011;
	color: #000;
}
.estrategia{
	background: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
	height: auto;
	text-align: right;
}
.estrategia h4,p{
	margin-right:5%; 
}
.evaluacion{
	background: #ffffff;
	color: rgb(0, 0, 0);
	height: auto;
	text-align: right;
}

.lectura {
	height: auto;
}

.evaluacion h3,p{
	margin-right: 5%;
}


.autoevaluacion{
	height: auto;
	
}

.autoevaluacionT{
	background:  rgba(255, 255, 255, 0.96);
}
.buttonEs{

	margin-top: 210px;
	margin-left: 17%;
	position: absolute;

}
.buttonEv{

	margin-top: 210px;
	margin-left: 58%;
	position: absolute;

}

.tema1Content .tema2Content .tema3Content .tema4Content .tema5Content .tema6Content .tema7Conten{
	    background-color: #fff;

}

.tema1{
	background: #EFF0F0;
	color: #000;
	font-size: 18px;
}
.tema2{
	background: #EFF0F0;
	color: #000;
	font-size: 18px;
}
.tema3{
	background: #EFF0F0;
	color: #000;
	font-size: 18px;
}
.tema4{
	background: #EFF0F0;
	color: #000;
	font-size: 18px;
}
.tema5{
	background: #EFF0F0;
	color: #000;
	font-size: 18px;
}
.tema6{
	background: #EFF0F0;
	color: #000;
	font-size: 18px;
}
.tema7{
	background: #EFF0F0;
	color: #000;
	font-size: 18px;
}
.tema1 a{
	color: #000;
	text-decoration-line: none;
	cursor: pointer;
	padding: 10px;
}
.tema1:hover{
	background: #F37804;
}
.tema1:hover a{
	color: #fff;
	font-size: 20px;
}
.tema1 a:hover{
	background: #F79F81;
	color: #fff;
	width: 100%;
}
.tema1:hover ul>li a{
	color: #fff;
}
.tema1> ul{
 	display: block;
	text-decoration: none;
	list-style-type: none;
 }
 .tema1 ul>li a{
 	
 	color: #000;
	text-decoration: none;
	padding: 10px;
	width: 100%;
 }
 
 .tema1 ul>li:hover a{
 	background: #F79F81;
 	color: #fff;	
 }
.modal-title{
	color: #000000;
	font-style: bold;
	font-weight: bold;
	font-size: 30px;
}

.tema2 a{
	color: #000;
	text-decoration-line: none;
	cursor: pointer;
	padding: 10px;
}
.tema2:hover{
	background: #F37804;
}
.tema2:hover a{
	color: #000;
	font-size: 20px;
}
.tema2 a:hover{
	background: #F79F81;
	color: #fff;
	width: 100%;
}
.tema2:hover ul>li a{
	color: #000;
}
.tema2> ul{
 	display: block;
	text-decoration: none;
	list-style-type: none;
 }
 .tema2 ul>li a{
 	
 	color: #000;
	text-decoration: none;
	padding: 10px;
	width: 100%;
 }
 
 .tema2 ul>li:hover a{
 	background: #F79F81;
 	color: #fff;	
 }



.tema3 a{
	color: #000;
	text-decoration-line: none;
	cursor: pointer;
	padding: 10px;
}
.tema3:hover{
	background: #F37804;
}
.tema3:hover a{
	color: #000;
	font-size: 20px;

}
.tema3 a:hover{
	background: #F79F81;
	color: #fff;
	width: 100%;
}
.tema3:hover ul>li a{
	color: #000;
}
.tema3> ul{
 	display: block;
	text-decoration: none;
	list-style-type: none;
 }
 .tema3 ul>li a{
 	
 	color: #000;
	text-decoration: none;
	padding: 10px;
	width: 100%;
 }
 
 .tema3 ul>li:hover a{
 	background: #F79F81;
 	color: #fff;	
 }
.tema4 a{
	color: #000;
	text-decoration-line: none;
	cursor: pointer;
	padding: 10px;
}
.tema4:hover{
	background: #F37804;
}
.tema4:hover a{
	color: #fff;
	font-size: 20px;
}
.tema4 a:hover{
	background: #F79F81;
	color: #fff;
	width: 100%;
}
.tema4:hover ul>li a{
	color: #000;
}
.tema4> ul{
 	display: block;
	text-decoration: none;
	list-style-type: none;
 }
 .tema4 ul>li a{
 	
 	color: #000;
	text-decoration: none;
	padding: 10px;
	width: 100%;
 }
 
 .tema4 ul>li:hover a{
 	background: #F79F81;
 	color: #fff;	
 }
.tema5 a{
	color: #000;
	text-decoration-line: none;
	cursor: pointer;
	padding: 10px;
}
.tema5:hover{
	background: #F37804;
}
.tema5:hover a{
	color: #000;
	font-size: 20px;
}
.tema5 a:hover{
	background: #F79F81;
	color: #fff;
	width: 100%;
}
.tema5:hover ul>li a{
	color: #000;
}
.tema5> ul{
 	display: block;
	text-decoration: none;
	list-style-type: none;
 }
 .tema5 ul>li a{
 	
 	color: #000;
	text-decoration: none;
	padding: 10px;
	width: 100%;
 }
 
 .tema5 ul>li:hover a{
 	background: #F79F81;
 	color: #fff;	
 }
.tema6 a{
	color: #000;
	text-decoration-line: none;
	cursor: pointer;
	padding: 10px;
}
.tema6:hover{
	background: #F37804;
}
.tema6:hover a{
	color: #000;
	font-size: 20px;
}
.tema6 a:hover{
	background: #F79F81;
	color: #fff;
	width: 100%;
}
.tema6:hover ul>li a{
	color: #000;
}
.tema6> ul{
 	display: block;
	text-decoration: none;
	list-style-type: none;
 }
 .tema6 ul>li a{
 	
 	color: #000;
	text-decoration: none;
	padding: 10px;
	width: 100%;
 }
 
 .tema6 ul>li:hover a{
 	background: #F79F81;
 	color: #fff;	
 }

.tema7 a{
	color: #000;
	text-decoration-line: none;
	cursor: pointer;
	padding: 10px;
}
.tema7:hover{
	background: #F37804;
}
.tema7:hover a{
	color: #000;
	font-size: 20px;
}
.tema7 a:hover{
	background: #F79F81;
	color: #fff;
	width: 100%;
}
.tema7:hover ul>li a{
	color: #000;
}
.tema7> ul{
 	display: block;
	text-decoration: none;
	list-style-type: none;
 }
 .tema7 ul>li a{
 	
 	color: #000;
	text-decoration: none;
	padding: 10px;
	width: 100%;
 }
 
 .tema7 ul>li:hover a{
 	background: #F79F81;
 	color: #fff;	
 }

.tema1Text_inside .modal-content , .tema1Text>.bText{
	background: #FFFFFF;
	text-align: justify;
}

.tema1Text>.bText p {

	color:#01101E;
	text-align: justify;
	padding: 10px;
	font-size: 14px;

}

.tema1Text>.bText ul>li{
	
	padding-right: 80px;
	padding-bottom: 10px;
}

.tema1Text>.bText ol>li{
	
	padding-right: 70px;
	padding-bottom: 10px;
}
.tema1Text>.bText ol>ol>li{
	
	padding-right: 70px;
	padding-bottom: 10px;
}

.tema1Text>.bText p>img:hover{
	transform : scale(1.4);
	-moz-transform : scale(1.4);      /* Firefox */
	-webkit-transform : scale(1.4);   /* Chrome - Safari */
	-o-transform : scale(1.4); 
}

.test{
	overflow: hidden;
	padding: 50px;
	background: rgba(90,89,39,0.34);
	color:#404040;
	top:0;
	left:100px;
	display: block;
	position: relative;
	height: auto;
}

.test h4{
	margin-bottom: 30px;
	color: #000;
	margin-left: 10px;
	text-align: center;
	width: 95%;
}
.test_status{
	background: #404040;
	color: #fff;
	text-align: center;
}

.test input[type="radio"]:hover, label:hover {

	transform : scale(1.5);
	-moz-transform : scale(1.5);      
	-webkit-transform : scale(1.5);
	-o-transform : scale(1.5); 


}

input[type="radio"]:checked +label >span {
	background-color: rgba(36, 179, 133, 0.33);
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
}

.test button:hover{
	background-color: rgba(36, 179, 133, 0.55);
}

#draggable { 
	width: 100%;
	height: 100px;
	padding-top: 20px; 
	margin: 14px;
    background-color: rgb(20, 197, 234);
	display: none;
	text-align: center;
}
#draggable2 { 
	width: 100%;
	height: 100px;
	padding-top: 20px; 
	margin: 14px;
	background: #1EB297; 
	display: none;
	text-align: center;
}
#draggable3 { 
	width: 100%;
	height: 100px; 
	padding-top: 20px;  
	margin: 14px;
	background: orange;
	display: none;
	text-align: center;
}
#droppable { 
	width: 100%; 
	height: 140px; 
	padding: 0.5em; 
	float: left; 
	margin: 14px; 
    background-color: rgb(234, 203, 137);
	display: none;
	color: black;
}


.cont {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #F3622D;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;

}

.cont:hover .overlay {
  bottom: 0;
  height: 100%;
}
/*
.text {
  white-space:nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}*/
@media screen and (max-width: 768px) {
	.text {
	  white-space: initial; 
	  color: #ffffff;
	  font-size: 14px;
	  position: relative;
	  overflow: auto;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  padding-left: 10px;
	  padding-right: 10px;
	  width: 80%;
	  height: 80%;
	  text-align: justify;
	}
}

@media screen and (min-width: 768px){
	.text {
	  white-space: initial; 
	  color: #FFFFFF;
	  font-size: 20px;
	  position: absolute;
	  overflow: auto;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  width: 80%;
	  text-align: justify;
	}
}
.txt{
	color: #ffffff;
}

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

@media screen and (min-width: 601px){
	.text{
		font-size: 16px;
	}
}

@media screen and (max-width: 600px){
	.text{
		font-size: 9px;
	}
}