:root{
	--rojo-mareabrava : #E24839;
	--azul-mareabrava : #1F3C84;
	--amarillo-mareabrava : #F8B133;
}

.load{
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: fixed;
	z-index: 20;
    background: var(--rojo-mareabrava);
}
.load.desactive{
	animation: wave .8s ease-in-out forwards; 
}
.load.active{
	animation: waveUp .8s ease-in-out forwards; 
}
.camaron{
	transform: translateY(-35px);
	height: 130px;
	width: 130px;
	position: absolute;
	z-index: 20;
	clip-path: inset(0 100% 0 0); 
	animation: izq_der 3s ease-in-out infinite; 
}
.toro{
	transform: translateY(-35px);
	height: 130px;
	width: 130px;
	position: absolute;
	z-index: 20;
	clip-path: inset(100% 0 0 0); 
	animation: der_izq 3s ease-in-out infinite; 
}
.circulo{
	height: 115px;
	width: 115px;
	border-radius: 45px;
	background: var(--amarillo-mareabrava);
	position: relative;
	animation: rotacion 1s linear infinite;
}
.load label{
	font-family: "Bebas Neue";
	letter-spacing: 2px;
	font-size: 2rem;
	font-weight: 500;
	margin-top: 1rem;
	color:	#FFFFFF;
}

.circulo::after{
	content: '';
	height: 85%;
	width: 85%;
	border-radius: 50px;
	position: absolute;
	background-color: #FFF;
	inset: 8px;
}

@keyframes wave{
	0% {
		clip-path: polygon(
		  0% 0%, 3% 0%, 6% 0%, 9% 0%, 12% 0%, 15% 0%, 18% 0%, 21.5% 0%, 
		  25% 0%, 29% 0%, 33% 0%, 37% 0%, 41% 0%, 45% 0%, 50% 0%, 
		  54% 0%, 58% 0%, 62% 0%, 66% 0%, 70% 0%, 74% 0%, 77% 0%, 81% 0%, 
		  84% 0%, 88% 0%, 92% 0%, 96% 0%, 100% 0%, 100% 100%, 0% 100%
		);
	}
	
	25% {
		clip-path: polygon(
		  0% 30%, 3% 31%, 6% 32%, 9% 33%, 12% 34%, 15% 35%, 18% 36%, 21.5% 37%, 
		  25% 38%, 29% 39%, 33% 40%, 37% 42%, 41% 44%, 45% 45%, 50% 46%, 
		  54% 47%, 58% 48%, 62% 49%, 66% 50%, 70% 50.5%, 74% 50%, 77% 49%, 81% 48%, 
		  84% 47%, 88% 45.5%, 92% 43.5%, 96% 42%, 100% 41%, 100% 100%, 0% 100%
		);
	}
	
	50% {
		clip-path: polygon(
		  0% 60%, 3% 61.5%, 6% 62.5%, 9% 63.5%, 12% 64.5%, 15% 65%, 18% 65.5%, 21.5% 66%, 
		  25% 66.5%, 29% 66.8%, 33% 67%, 37% 66.5%, 41% 65.5%, 45% 64.5%, 50% 63.5%, 
		  54% 62%, 58% 60.5%, 62% 58%, 66% 55%, 70% 52%, 74% 49.5%, 77% 47%, 81% 45%, 
		  84% 44%, 88% 43%, 92% 42%, 96% 41.5%, 100% 41%, 100% 100%, 0% 100%
		);
	}
	
	75% {
		clip-path: polygon(
		  0% 85%, 3% 85.2%, 6% 85.5%, 9% 86%, 12% 86.5%, 15% 87%, 18% 87.5%, 21.5% 88%, 
		  25% 88.5%, 29% 89%, 33% 89.5%, 37% 90%, 41% 90.5%, 45% 91%, 50% 91.5%, 
		  54% 92%, 58% 92.5%, 62% 93%, 66% 93.5%, 70% 94%, 74% 94.5%, 77% 95%, 81% 95.5%, 
		  84% 96%, 88% 96.5%, 92% 97%, 96% 97.5%, 100% 98%, 100% 100%, 0% 100%
		);
	}
	
	100% {
		clip-path: polygon(
		  0% 100%, 3% 100%, 6% 100%, 9% 100%, 12% 100%, 15% 100%, 18% 100%, 21.5% 100%, 
		  25% 100%, 29% 100%, 33% 100%, 37% 100%, 41% 100%, 45% 100%, 50% 100%, 
		  54% 100%, 58% 100%, 62% 100%, 66% 100%, 70% 100%, 74% 100%, 77% 100%, 81% 100%, 
		  84% 100%, 88% 100%, 92% 100%, 96% 100%, 100% 100%, 100% 100%, 0% 100%
		);
	}
  }
@keyframes waveUp{
	0% {
		clip-path: polygon(
		  0% 100%, 3% 100%, 6% 100%, 9% 100%, 12% 100%, 15% 100%, 18% 100%, 21.5% 100%, 
		  25% 100%, 29% 100%, 33% 100%, 37% 100%, 41% 100%, 45% 100%, 50% 100%, 
		  54% 100%, 58% 100%, 62% 100%, 66% 100%, 70% 100%, 74% 100%, 77% 100%, 81% 100%, 
		  84% 100%, 88% 100%, 92% 100%, 96% 100%, 100% 100%, 100% 100%, 0% 100%
		);
	} 

 	25% {
		clip-path: polygon(
		  0% 85%, 3% 85.2%, 6% 85.5%, 9% 86%, 12% 86.5%, 15% 87%, 18% 87.5%, 21.5% 88%, 
		  25% 88.5%, 29% 89%, 33% 89.5%, 37% 90%, 41% 90.5%, 45% 91%, 50% 91.5%, 
		  54% 92%, 58% 92.5%, 62% 93%, 66% 93.5%, 70% 94%, 74% 94.5%, 77% 95%, 81% 95.5%, 
		  84% 96%, 88% 96.5%, 92% 97%, 96% 97.5%, 100% 98%, 100% 100%, 0% 100%
		);
	}

	50% {
		clip-path: polygon(
		  0% 60%, 3% 61.5%, 6% 62.5%, 9% 63.5%, 12% 64.5%, 15% 65%, 18% 65.5%, 21.5% 66%, 
		  25% 66.5%, 29% 66.8%, 33% 67%, 37% 66.5%, 41% 65.5%, 45% 64.5%, 50% 63.5%, 
		  54% 62%, 58% 60.5%, 62% 58%, 66% 55%, 70% 52%, 74% 49.5%, 77% 47%, 81% 45%, 
		  84% 44%, 88% 43%, 92% 42%, 96% 41.5%, 100% 41%, 100% 100%, 0% 100%
		);
	}

	75% {
		clip-path: polygon(
		  0% 30%, 3% 31%, 6% 32%, 9% 33%, 12% 34%, 15% 35%, 18% 36%, 21.5% 37%, 
		  25% 38%, 29% 39%, 33% 40%, 37% 42%, 41% 44%, 45% 45%, 50% 46%, 
		  54% 47%, 58% 48%, 62% 49%, 66% 50%, 70% 50.5%, 74% 50%, 77% 49%, 81% 48%, 
		  84% 47%, 88% 45.5%, 92% 43.5%, 96% 42%, 100% 41%, 100% 100%, 0% 100%
		);
	}

	100% {
		clip-path: polygon(
		  0% 0%, 3% 0%, 6% 0%, 9% 0%, 12% 0%, 15% 0%, 18% 0%, 21.5% 0%, 
		  25% 0%, 29% 0%, 33% 0%, 37% 0%, 41% 0%, 45% 0%, 50% 0%, 
		  54% 0%, 58% 0%, 62% 0%, 66% 0%, 70% 0%, 74% 0%, 77% 0%, 81% 0%, 
		  84% 0%, 88% 0%, 92% 0%, 96% 0%, 100% 0%, 100% 100%, 0% 100%
		);
	}  
  }
@keyframes izq_der{
      0% {
        clip-path: inset(0 100% 0 0);
      }
      100% {
        clip-path: inset(0 0 0 0); 
      }
    }
@keyframes der_izq{
      0% {
        clip-path: inset(0 0 0 100%);
      }
      100% {
        clip-path: inset(0 0 0 0); 
      }
    }
@keyframes rotacion{
	0%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(360deg);
	}
}
@keyframes fadeSlideIn {
	0% {
		opacity: 0;
		transform: translateY(10px);
		background-color: #F1F1F1;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
		background-color: #FFFFFF;
	}
	}