*{
	margin:0;
	padding:0;
   height: fit-content;
}
 @font-face{
 font-family: "webSymbolsRegular";
 src: url('../fonts/websymbols-regular-webfont.eot');
 src: url('../fonts/websymbols-regular-webfont.eot#iefix') format(embedded-opentype),
      url('../fonts/websymbols-regular-webfont.woff') format('woff'),
      url('../fonts/websymbols-regular-webfont.ttf') format('truetype'),
      url('../fonts/websymbols-regular-webfont.svg#webSymbolsRegular') format('svg');
      font-weight: normal;
      font-style: normal;
     }
  .gear{
    font-family: "webSymbolsRegular";
  }
  #tuerca .gear{
    display:block;
    float:left;
    font-size: 30px;
    margin-top:8px;
    margin-left: 26px;
    animation-name: rotate-gear;
    animation-duration:2s;
    animation-iteration-count: infinite; 
    animation-timing-function: linear;
     }
     @keyframes rotate-gear {
      from{
        transform:rotateZ(0deg);
      }
      to{
        transform: rotate(360deg);
      }
     }
     #tuerca:hover .gear{
      animation: fromBellow 500ms linear;
     }
     /* Mover la tuerca 
     @keyframes fromBellow {
      0%{
        transform: translateY(0%) ;
      }
      50%{
        transform: translateY(200%) ;
      }
      100%{
        transform: translateY(0%) ;
      }
     }
*/
 body {
  margin: auto;
  padding: 1em;
  background-color:#2a2a2a;
}  
img.alineadoTextoImagenArriba{
  vertical-align: text-top;  
  width: 10%;
}
img.alineadoTextoImagenCentro{
  vertical-align: middle;
  width: 10%;
  /* Ojo vertical-align: text-middle no existe*/
}
img.alineadoTextoImagenCentroGrande{
  vertical-align: middle;
  width: 5%;
  /* Ojo vertical-align: text-middle no existe*/
}
img.alineadoTextoImagenAbajo{
  vertical-align: text-bottom; 
  width: 10%; 
} 
.circular--square {
  border-radius: 40%;
  vertical-align: middle;
  /* solo para caso */
  width: 20%; 
}
#apartado1{	 
  width:90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
table{
	color:black;
  letter-spacing: 0.05em;
}

#control{ 
 flex-basis: 95%;
 min-width: 95%;
 min-height: 20%;
}
#header{
  display: block;
  align-items: center;
  width: 100%;
  height: 2em;
  margin-top: 6em;
}
#layout{ 
  display: block;
  width: 100%; 
  height: 37em;
  margin: 0.5em auto;
  padding: 0em;
  justify-content: center;
  align-items: center;
  }

/* scroll */
::-webkit-scrollbar{
  width: 1em;
}
::-webkit-scrollbar-track{
  background: #d1e5ff;
}
::-webkit-scrollbar-thumb{
   background:linear-gradient(#642bff,#ff22e6) ;
   border-radius: 0.9em;
}

.detalle {
  display: block;
  width: 46%;
  height: 13em;
  border: 0.3em solid #ccc; 
  margin: 0.2em auto;
  padding: 0.2em;
  font-size: 1.2vw;
  box-shadow: 0em 0.1em 0em #393d3f, 0.1em 0.2em #393d3f, 0.2em 0.3em 0em #393d3f, 0.3em 0.4em 0em #393d3f;
  text-align: justify;
  z-index: auto;
  display: inline-block; 
  overflow-y: scroll;
  scroll-behavior: smooth;
}
h2 {
  color: #585858;
  margin-top: 0;
  font-size: 1.5vw;
}
 h3{  
  font-size: 1.5vw;
  font-weight: medium;
  letter-spacing: 0.07em;
  color:black;
}

.turquesa{  
  background: #4DD0E1;
}
.naranja{  
  background: #F5B041;
}
.azul{   
  background: #2471A3;
}
.morado{
  background: #8E44AD;
}

.boton{
  grid-column-start: 1;
  grid-column-end: 3;
}

.clearfix{
  float: none;
  clear: both;
}

/* https://codepen.io/GabrieliRSouza/pen/rNreZvd Letras locas*/

.logoHome{
  display: flex;
  padding-top: 0em;
  padding-left: 0em;
  padding-bottom: 0em;
  justify-content: left;
  flex-wrap: wrap;
  align-items: center;
  font-size:2.2vw;
  line-height: 0;
  display: inline-block;
 /*  background: #000000; */
  font-family: 'Baloo 2', cursive;
  color: white;
  user-select: none;
  text-transform: capitalize;
  text-shadow: 0 13.36px 8.896px #0A808B, 0 -2px 1px #9AEDF5;
    letter-spacing: -0.15em;
    color: #0CBBCC;  
}

.word {
  font-family: 'Baloo 2', cursive;
	perspective: 200em; 
}

.word span2 {
	cursor: pointer;
	display: inline-block;
	font-size:2.2vw;
  font-weight: bold;
	user-select: none;
	line-height: .8;
}

.word span2:nth-child(1).active {
	animation: balance 1.5s ease-out;
	transform-origin: bottom left;
}

@keyframes balance {
	0%, 100% {
		transform: rotate(0deg);
	}
	
	30%, 60% {
		transform: rotate(-45deg);
	}
}

.word span2:nth-child(2).active {
	animation: shrinkjump 1s ease-in-out;
	transform-origin: bottom center;
}

@keyframes shrinkjump {
	10%, 35% {
		transform: scale(2, .2) translate(0, 0);
	}
	
	45%, 50% {
		transform: scale(1) translate(0, -150px);
	}
	
	80% {
		transform: scale(1) translate(0, 0);
	}
}

.word span2:nth-child(3).active {
	animation: falling 2s ease-out;
	transform-origin: bottom center;
}
.word span2:nth-child(6).active {
	animation: falling 2s ease-out;
	transform-origin: bottom center;
}

@keyframes falling {
	12% {
		transform: rotateX(240deg);
	}
	
	24% {
		transform: rotateX(150deg);
	}
	
	36% {
		transform: rotateX(200deg);
	}
	
	48% {
		transform: rotateX(175deg);
	}
	
	60%, 85% {
		transform: rotateX(180deg);
	}
	
	100% {
		transform: rotateX(0deg);
	}
}

.word span2:nth-child(4).active {
	animation: rotate 1s ease-out;
}

@keyframes rotate {
	20%, 80% {
		transform: rotateY(180deg);
	}
	
	100% {
		transform: rotateY(360deg);
	}
}

.word span2:nth-child(5).active {
	animation: toplong 1.5s linear;
}

@keyframes toplong {
	10%, 40% {
		transform: translateY(-48vh) scaleY(1);
	}
	
	90% {
		transform: translateY(-48vh) scaleY(4);
	}
} 

/* Plantilla final reusltado del juzgamiento */

.contenedor {
 display: grid;  
 grid-template-areas: 
 "cabeza cabeza cabeza"
 "juzgamientoL juzgamientoC juzgamientoR"
 "pie pie pie";  
 width: 99%;
 height: auto; 
 grid-template-columns: 33% 33% 33%;
 grid-template-rows: auto auto auto;
 padding: 1em;
 box-shadow: 0 0.2em 1em rgba(0,0,0,0.16), 0 0.3em 0.6em rgba(0,0,0,0.1);  
 }
 @media (max-height: 800px) {
  .contenedor {    
    height: 700px; 
    }
 }
 @media (max-height: 700px) {
  .contenedor {    
    height: 600px; 
    }
 }
 @media (max-height: 600px) {
  .contenedor {    
    height: 500px; 
    }
 }
 @media (max-height: 500px) {
  .contenedor {    
    height: 400px; 
    }
 }
 @media (max-height: 400px) {
  .contenedor {    
    height: 300px; 
    }
 }
 @media (max-height: 300px) {
  .contenedor {    
    height: 200px; 
    }
 }
 @media (max-height: 200px) {
  .contenedor {    
    height: 130px; 
    }
 }

 @media (max-height: 450px) {
    .detalle {
      height: 12em;
    }
 }
 @media (max-height: 400px) {
  .detalle {
    height: 10em;
  }
  #header{
    margin-top: 10em;
  }
}

@media (max-height: 380px) {
  .detalle {
    height: 9em;
  }
  #header{
    margin-top: 11em;
  }
}
@media (max-height: 360px) {
  .detalle {
    height: 8em;
  }
  #header{
    margin-top: 12em;
  }
}
@media (max-height: 340px) {
  .detalle {
    height: 7em;
  }
  #header{
    margin-top: 13em;
  }
}
@media (max-height: 320px) {
  .detalle {
    height: 6em;
  }
  #header{
    margin-top: 14em;
  }
}
@media (max-height: 300px) {
  .detalle {
    height: 5em;
  }
  #header{
    margin-top: 15em;
  }
}

.caja {
 align-content: center;
 color: black;
 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 text-align: center;
 line-height: 2.1em;
 padding: 0.9em;
}
.c1{  
  grid-area: cabeza;
}
.c2{ 
  grid-area: juzgamientoL;
  width: auto;
  height: 88%; 
  text-align: center;
  align-content: center;
  overflow-y: scroll;
 scroll-behavior: smooth;
 border: 0.2em solid #ccc; 
}
.c3{
  grid-area: juzgamientoC;
  width: auto;
  height: 88%; 
  text-align: center;
  align-content: center;
  overflow-y: scroll;
  scroll-behavior: smooth;
  border: 0.2em solid #ccc; 
}
.c4{
  grid-area: juzgamientoR;
  width: auto;
  height: 88%; 
  text-align: center;
  align-content: center;
  overflow-y: scroll;
 scroll-behavior: smooth;
 border: 0.2em solid #ccc; 
}
.c5{
  grid-area: pie;
} 
 
label3 {  
  font-size: 1.2vw; 
  font-weight: bold;
  width: 13em;
  border: 0.3em solid white;
  border-radius: 12em;
  display: inline-block;
  margin: 0.2em;
  text-align: center;
}

label4 {  
  font-size: 1vw; 
  border: 0.2em solid white;
  width: 22.5em;
  display: inline-block;
  margin: 0.1em;
  padding: 0.4em;
  text-align: justify;
  line-height: 1em
}
/* ejemplo de prueba */