body{
	margin: 0;
	padding: 0;
}
header{
    width: 100%;
    height: 8.75rem;
    display: grid;
    grid-template-rows: 1fr 1fr;
}

header .header-icons-container{
    width: 100%;
    height: 60px;
    display: grid;
   
    
}


header .header-icons-container .icons{
    width: 300px;
    height: auto;
    display: flex;
    justify-items: flex-end;
    align-items: center;
    justify-content: space-between; /* Espacio */
    justify-self: end;
    margin-right: 50px;  /*espacio de margin a la derecha*/
    font-size: 30px;
	-webkit-mask-origin: padding;
}
 nav{
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 18rem;
    
} 


 nav .nav-logo-container{
    width: 100%;
   
} 
nav .nav-logo-container img{
    width: 220px;
    margin-top: 10px;
}



nav .profile-link{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 150px;
}

nav .profile-link a{
    color:aquamarine;
    border-bottom: 1px solid black;
}

.titulo{
	text-align: center;
	font-size: 3rem;
	margin: 0;

}


div{
	font-family: 'Arial';
	background-color: #99cc00;
	text-align: center;
	font-weight: bolder;
	position: relative;
	/*left: 50%;
	margin-left: -60px;*/
	width: 80px;
	margin: 15px 2px 15px 15px;
	padding: 20px 40px;
	display: inline-block;
	vertical-align: middle;
	
}

div.fadein{
	font-family: 'Arial';
	background-color: #99cc00;
	text-align: center;
	font-weight: bolder;
	position: relative;
	/*left: 50%;
	margin-left: -60px;*/
	width: 80px;
	margin: 15px 2px 15px 15px;
	padding: 20px 40px;
	display: inline-block;
	vertical-align: middle;
	overflow: hidden;
}
/*p{
	font-size: 20px;
}*/

/*.balanceo{
	font-size: 20px;
	text-indent: -6px;
}
.descolgado{
	font-size: 20px;
	text-indent: -15px;
}*/


/*.contenedor:hover{
	-webkit-animation: 5s cambia_color 1 ;
}

@-webkit-keyframes cambia_color{
	0%, 70%{
		background: blue;
	}
	50%{
		background: red;
		height: 200px;
	
}*/

.flash:hover{
	-webkit-animation: 0.7s flash 1;
}

@-webkit-keyframes flash{
    50%{
    	opacity: 1;
    }
    25%, 75%{
    	opacity: 0;
   
  }
}  

.click:hover{
	-webkit-animation: 0.7s click 1;
}

@-webkit-keyframes click{
	25%, 75%{
		-webkit-transform:scale(0.8);
	}
	50%{
		-webkit-transform:scale(1.1);
	}
}

.chicle:hover{
	-webkit-animation: 1s chicle 1;
}

@-webkit-keyframes chicle{
	30%{
		-webkit-transform: 
		        scaleX(1.25) scaleY(0.75);
	}
	50%{
		-webkit-transform: 
		        scaleX(0.75) scaleY(1.25);
	}
	60%{
		-webkit-transform: 
		        scaleX(1.15) scaleY(0.85);
	}
	
}

.vibracion:hover{
	-webkit-animation: 1s vibracion infinite;
}

@-webkit-keyframes vibracion{
	10%, 30%, 50%, 70%, 90%{
		-webkit-transform: translateX(-10px);
	}
	20%, 40%, 60%, 80%{
		-webkit-transform: translateX(10px);
	}
	5%, 25%, 45%, 65%, 85%{
		-webkit-transform: translateY(-10px);
	}
	15%, 35%, 55%, 75%, 95%{
		-webkit-transform: translateY(10px);
	}

	
}

.cartel:hover{
	-webkit-animation: 1s cartel 1;
	-webkit-transform-origin: top center;
}

@-webkit-keyframes cartel{
	20%{
		-webkit-transform: rotate(15deg);
	}

	40%{
		-webkit-transform: rotate(-10deg);
	}
	60%{
		-webkit-transform: rotate(5deg);
	}
	80%{
		-webkit-transform: rotate(-3deg);
	}

	
}

.balancear:hover{
	-webkit-animation: 1s balancear 1;
	
}

@-webkit-keyframes balancear{
	20%{
		-webkit-transform: scale(0.7)
		                   rotate(-6deg);
	}
	30%, 70%{
		-webkit-transform: scale(1.1)
		                   rotate(6deg);
	}
	50%, 90%{
		-webkit-transform: scale(1.1)
		                   rotate(-6deg);
	}
	

	
}

.vaiven:hover{
	-webkit-animation: 1s vaiven 1;
	
}

@-webkit-keyframes vaiven{
	15%{
		-webkit-transform: rotate(-10deg)
		                  translateX(-25%);
	}
	30%{
		-webkit-transform: rotate(5deg)
		                  translateX(20%);
	}
	45%{
		-webkit-transform: rotate(-3deg)
		                  translateX(-10%);
	}
	60%{
		-webkit-transform: rotate(2deg)
		                  translateX(5%);
	}
	75%{
		-webkit-transform: rotate(-1deg)
		                  translateX(-3%);
	}

	
}

.descolgado:hover {
	-webkit-animation: 1s descolgado 1;
	-webkit-transform-origin: top left;
}

@-webkit-keyframes descolgado{
	20%, 60%{
		-webkit-transform: rotate(80deg);
	}
	40%{
		-webkit-transform: rotate(60deg);
	}
	80%{
		-webkit-transform: rotate(60deg);
		opacity: 1;
	}
	100%{
		-webkit-transform: translateY(400px);
		opacity: 0;
	}

	
}

.inrotativo:hover {
	-webkit-animation: 1s inrotativo 1;
	
}

@-webkit-keyframes inrotativo{
     0%{
       	opacity: 0;
       	-webkit-transform: translateX(-100%)
       	                   rotate(-260deg);
       }
	
}

.outrotativo:hover {
	-webkit-animation: 1s outrotativo 1;
	
}

@-webkit-keyframes outrotativo{
        100%{
       	opacity: 0;
       	-webkit-transform: translateX(100%)
       	                   rotate(-260deg);
       }

	
}

.rebote:hover {
	-webkit-animation: 2s rebote 1;
	
}

@-webkit-keyframes rebote{
      20%, 50%, 80%{
      	-webkit-transform: translateY(0px);
      }
      30%{
      	-webkit-transform: translateY(-45px);
      }
      60%{
      	-webkit-transform: translateY(-25px);
      }


	
}

.rebotein:hover {
	-webkit-animation: 1s rebotein 1;
	
}

@-webkit-keyframes rebotein{
      0%{
      	opacity: 0;
      	-webkit-transform: scale(0.3);
      }
      50%{
      	opacity: 1;
      	-webkit-transform: scale(1.1);
      }
      70%{
      	
      	-webkit-transform: scale(0.9);
      }

	
}

.rebotein2:hover {
	-webkit-animation: 1s reboteindos 1;
	
}

@-webkit-keyframes reboteindos{
     0%{
     	opacity: 0;
     	-webkit-transform: translateX(-2000px);
     }
     50%{
     	opacity: 1;
     	-webkit-transform: translateX(30px);
     }
      70%{
     	opacity: 1;
     	-webkit-transform: translateX(-10px);
     }

	
}

.reboteout:hover {
	-webkit-animation: 1s reboteout 1;
	
}

@-webkit-keyframes reboteout{
   25%{
   	-webkit-transform: scale(0.9);
   }
   50%{
   	opacity: 1;
   	-webkit-transform: scale(1.1);
   }
     100%{
     	opacity: 0;
   	-webkit-transform: scale(0);
   }
	
}

.reboteout2:hover {
	-webkit-animation: 1s reboteoutdos 1;
	
}

@-webkit-keyframes reboteoutdos{
	20%{
		opacity: 1;
		-webkit-transform: translateY(20px);
	}
 100%{
 	opacity: 0;
 	-webkit-transform: translateY(-500px);
 }
	
}

.fadein:hover{
	-webkit-animation: 2s aparicion 1;
}

@-webkit-keyframes aparicion{
     0%{
     	opacity: 0;
     }
       50%{
     	opacity: 0.8;
     }
}

.tapa{
	height: 55%;
	top: -15px;
	left: 145px;
	position: absolute;
	background: white;
	z-index: 10;
	-webkit-animation: 2s retirada 1;
}

@-webkit-keyframes retirada{
	0%{
		left: -15px;
	}

}

.velozin:hover{
	-webkit-animation: 1s veloz 1;
}

@-webkit-keyframes veloz{
	0%{
		opacity: 0;
		-webkit-transform: translateX(-200%)
		                   skewX(30deg);
	}
	60%{
		opacity: 1;
		-webkit-transform: translateX(-20%)
		                   skewX(-30deg);
	}
	80%{
		
		-webkit-transform: translateX(0%)
		                   skewX(15deg);
	}
}
.velozout:hover{
	-webkit-animation: 1s velozout 1;
}

@-webkit-keyframes velozout{
	15%{
		opacity: 1;
	}
	100%{
		-webkit-transform: translateX(-700%)
		                   skewX(-70deg);
		opacity: 0;                   
	}

}

.giro:hover{
	-webkit-transform-origin: center;
	-webkit-animation: 2s giro 1;
}

@-webkit-keyframes giro{
	0%{
		opacity: 0;
		-webkit-transform: rotate(-200deg);
	}

}

.girovar:hover{
	-webkit-transform-origin: left bottom; /*tambien se pueden usar porcentajes, el primero indica la horizontal y el segundo vertical*/ 
	-webkit-animation: 1s girovar 1;
}

@-webkit-keyframes girovar{
	0%{
		opacity: 0;
		-webkit-transform: rotate(-100deg);
	}

}

.sombra_movil{
	-webkit-transform: translateX(0);
}

.sombra_movil:before{
	content: '';
	position: absolute;
	width: 90%;
	top: 100%;
	left: 5%;
	height: 10px;
	background: -webkit-radial-gradient(
		center, ellipse,
		rgba(0,0,0,0.30) 0%,
		rgba(0,0,0,0) 80%);
	-webkit-transition-duration: 0.5s;
	opacity: 0;
}

.sombra_movil:hover{
	-webkit-transform: translateY(-5px);
	-webkit-animation: 1.5s movercaja infinite;	
}

@-webkit-keyframes movercaja{
	50%{
		-webkit-transform: translateY(-3px);
	}
}
.sombra_movil:hover:before{
	opacity: 0.4;
	-webkit-transform: translateY(5px);
    opacity: 1;
	-webkit-animation: 1.5s moversombra infinite;	
}

@-webkit-keyframes moversombra{
	50%{
		opacity: 1;
		-webkit-transform: translateY(3px);
	}
}

.arrow:before{
    -webkit-transition-duration: 0.3s;
    content: '';
    border-color:transparent #99cc00 /*#a8cf45*/
                 transparent transparent;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    left: 5px;
    position: absolute;
    top: 50%;             
    margin-top: -15px;

}
.arrow:hover:before{
	-webkit-animation: 1.2s moverflecha infinite;
}

@-webkit-keyframes moverflecha{
	25%{
		left:-15px;
		-webkit-transform: rotate(0deg);
	}
	65%{
		left: -15px;
		-webkit-transform: rotate(180deg);
	}
	90%{
		-webkit-transform: rotate(180deg);

	}
}

.giroX:hover{
	/*Propiedades 3D
	-webkit-transform: perspective(200px)
	                   rotateX(50deg);
	-webkit-backface-visibility: visible;  Esto provoca que la parte de atras de la caja se pueda o no ver segun los grados de
	rotacion que le hayamos dado en el efecto rotateX/Y*/
-webkit-animation: 1.5s giroX 1;	                   
}

@-webkit-keyframes giroX{
	0%{
		opacity: 0.5;
		-webkit-transform: perspective(900px)
		                   rotateX(90deg);
	}
		40%{
		opacity: 0.5;
		-webkit-transform: perspective(900px)
		                   rotateX(-30deg);
	}
		70%{
		opacity: 0.5;
		-webkit-transform: perspective(900px)
		                   rotateX(30deg);
	}
}

.giroY:hover{
	
-webkit-animation: 1.5s giroY 1;	                   
}

@-webkit-keyframes giroY{
	0%{
		opacity: 0.5;
		-webkit-transform: perspective(900px)
		                   rotateY(90deg);
	}
		40%{
		opacity: 0.5;
		-webkit-transform: perspective(900px)
		                   rotateY(-30deg);
	}
		70%{
		opacity: 0.5;
		-webkit-transform: perspective(900px)
		                   rotateY(30deg);
	}
}

.giroOutY:hover{
	-webkit-animation: 1.5s giroOutY 1;
}

@-webkit-keyframes giroOutY{
	100%{
		opacity: 0.3;
		-webkit-transform: perspective(200px)
		                   rotateY(90deg);
	}

}

.giro3D:hover{
	-webkit-animation: 1.5s girotresd 1;
	-webkit-backface-visibility: visible;
}

@-webkit-keyframes girotresd{
	40%{
		-webkit-transform: perspective(800px)
		                   translateZ(120px)
		                   rotateY(170deg);
		                   
	}
		50%{
		-webkit-transform: perspective(800px)
		                   translateZ(120px)
		                   rotateY(190deg);
		                   
	}
		80%{
		-webkit-transform: perspective(800px)
		                   translateZ(0px)
		                   rotateY(360deg);
		                   
	}
		100%{
		-webkit-transform: perspective(800px)
		                   rotateY(360deg);
	}
	/*Según donde pongamos el translateZ la animación tendrá una forma u otra*/
}


footer{
    display: flex;
    width: 100%;
    height: 4rem;
    background-color: rgb(91, 157, 135);
    justify-content: center;
    text-align: justify;
    align-items: center;
    border-bottom: 28px solid aquamarine;
    margin-top: 0;
}

footer p{
    color: #fff;
   font-family: 'Roboto', sans-serif;
   font-size: 20px;
   margin-top: 0px;
   padding: 0;
   
}