html {
  scroll-behavior: smooth;
}

#spin-the-wheel, #slides, #blog, #tutorials, #present, #preterit, #imperfect, #future, #conditional, #command, #present-subjunctive, #past-Subjunctive, #systems, #office, #parts, #organs, #presente {
	scroll-margin-top:0px;
}

#ppio2
{
	scroll-margin-top:100px;
}

figure.post-image{
  width: 20%;
}
.post-thumbnail{
  width: 20%;
}


.imagen-padding{
	padding-left:20px;
}


p{
	font-size:12pt;
}



/* items de tablas align top */
tr{vertical-align:top;}




.tabla tr:nth-child(even){background-color: #f2f2f2;}

.tabla tr:hover {background-color: #ddd;}

.tabla th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;






.bajo-header{
	
	padding:0px;
	height:40px;}
/* todelete */
.header{
    height:20px;
	margin-bottom:0px;
}

/* todele */
header.header-inner {
    padding: 0.5rem 0;
}

/* Para que el menu ppal no tenga subrayado. Fijarse que pone !important */
.wp-block-navigation-item__content{text-decoration:none !important;}


/* para los titulos de secciones*/
h3{
	clear:left;
	font-size:18px;
	font-weight:bold;
	color:#1774B8;
}


/*letras pequenas*/
p,li{
	line-height:1.6; font-size:10px;
}

/*letra muy pequena en captions*/
figcaption.letra-pequena{
	line-height:1.6; font-size:12px;
	padding-left:10px;
}

/*Captions w foto dcha en acordeones e.g. en Growing Sustainably*/
figure.dcha{
	float:right; 
	margin-left:20px;
	margin-bottom:20px;
	width:340px;
} 

/*Fotos a la izquierda*/
img.foto-izquierda{
float:left; 
	margin-right:20px; 
	margin-top:0px;
	margin-bottom:0px;
	width:340px; 
	height:210px;
	object-fit:cover;
	
} 


	


/*Fotos dcha peque en acordeones*/ 
img.foto-derecha-pequena{
	float:right; 
	margin-left:20px; 	
	width:170px;
} 


/*Fotos dcha grand en acordeones*/
.foto-derecha-grande{
	float:right; 
	margin-left:20px;
	margin-bottom:20px;
	width:340px;	
} 


/*El summary del Read-More del Acordeon*/
summary.lee-mas{  
	color:#1774B8; 
	//font-weight: bold;
	font-style:italic;
	margin:0px;	
	text-align:right;
}



/* El details del Read-More */
details.margen-cero{
		margin: 0px;
	line-height:1.4;
}


/*El div del acordeon*/ 
.fondo-acordeon{
	background-color:	#F0F0F0;
	padding:30px;
}

/*Para que al ir al id, el puntero vaya unos pixels mas arriba*/
h2{
scroll-margin-top:40px;
padding-left:20px;
	background-image:linear-gradient(90deg,#F6C44A,#1774B8,#1774B8,#1774B8, #1774B8)   ;
	color:white;
	width:50%;
}

/*PARA LAS BOLAS DE LEARN*/

.bolas>div>a>img{
	width:170px;
	height:170px;
	object-fit:cover;
	border-radius:100%;
	border:3px solid #5AACBE;
	
}

.bolas>div{
	margin-right:25px ;
	font-size:12px !important;
		}
/*FIN DE LAS BOLAS DE LEARN*/



/* LO SIGUIENTE ES LA ANIMACION*/

#rotator {
  position: relative;
  width: 7rem;
  height: 7rem;
  animation: orbita 10s linear infinite;
  border: 3px orange dashed;
  border-radius: 50%;
  margin: 0rem;
}

#luna { 
  position: absolute;
  content: '';
  display: block;
  height: 0.5rem;
  width: 0.5rem;
  background-color: blue;
  border: 1px solid blue;
  top: 0.8rem;
  left:0.8rem;
  border-radius:100%;
}

@keyframes orbita {
  to { transform: rotate(360deg) }
}  
/*FIN DE LA ANIMACION */





/*LO SIGUIENTE ES EL SLIDESHOW */

* {box-sizing: border-box}
/*body {font-family: Verdana, sans-serif; margin:0}*/
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 25px;
  padding: 28px 60px;
  position: absolute;
  top: 8px;
  width: 37%;
  text-align: left;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  bottom: 0;
	right:0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */

@media only screen and (max-width: 900px) {
	.text {
 font-size: 25px;
		width: 85%;
	
}
	
@media only screen and (max-width: 600px) {
  .prev, .next,.text {
		font-size: 18px;
	width: 85%;}
}
/*FIN DEL SLIDESHOW*/
	

	
	
	
	
	
	
	/*Para el tablet */	
	
@media only  screen  and (max-width:900px){	
	
	
	
		.hola{
	visibility:hidden;
}
	
	
	
	//body{background: #000; 
  //      color: #fff; }
	//p,li{color:white !important;}
	//h3{color:yellow !important;}
	
	
		p,li{
	line-height:1.6; font-size:14px;
}
	
	

.bolas>div>a>img{
	width:130px;
	height:130px;
	object-fit:cover;
	border-radius:100%;
	border:3px solid #5AACBE;
	
}

.bolas>div{
	margin-right:10px !important;
	font-size:12px !important;
	
	


	}
	
	
	
	
	
	/*Para el iPhone portrait */	
		
@media only  screen  and (max-width:600px){	
	
	.lema{
	line-height:1.6; font-size:12px;
	}
	
	
	
	



 
#idiomas-en-learn{
			font-size: 8px;
				}
			
#idiomas-en-learn>p>img{display:none;
		}

img.foto-izquierda{
	width:100%; 
	object-fit:cover;	
} 

img.foto-derecha-grande{
	width:100%;	
} 
			
img.foto-derecha-pequena{
	width:100%;
	}
		

	}