/*ANIMACIÓN LOADING1*/

:root {
  --size: 25;
  /* --color-one: #ea4335;
  --color-two: #4285f4;
  --color-three: #34a853;
  --color-four: #fbbc05; */
  --color_one: #0f1104;
  --color_two: #503805;
  --color_three: #c27d33;
  --color_four: #b1ba8d;
}
.loader1_container {
  display: grid;
  place-items: center;
  min-height: 100vh;
  /* background: hsl(0, 0%, 96%); */
}
@property --nose {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}
@property --tail {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}
.loader1 {
  height: calc(var(--size) * 1vmin);
  width: calc(var(--size) * 1vmin);
  border-radius: 50%;
  mask: conic-gradient(
    from 45deg,
    transparent 0 var(--tail),
    #000 0 var(--nose),
    transparent 0 var(--nose)
  );
  border-style: solid;
  border-width: 5vmin;
  border-top-color: var(--color_one);
  border-right-color: var(--color_two);
  border-bottom-color: var(--color_three);
  border-left-color: var(--color_four);
  animation: load 2.5s both infinite ease-in-out, spin 3.25s infinite linear;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes load {
  0% {
    --tail: 0%;
    --nose: 0%;
  }
  40%,
  60% {
    --nose: 100%;
    --tail: 0%;
  }
  100% {
    --nose: 100%;
    --tail: 100%;
  }
}

/*ANIMACIÓN LOADING1 END*/

/*ANIMACIÓN LOADING2*/

:root {
	--yellow: #feb60a;
	--red: #ff0062;
	--blue: #00dbf9;
	--violet: #da00f7;
  --width_circle: 100px;
	--height_circle: 100px;
}
	/* body {
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #1a1940;
  background-image: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,153,212,0) calc(15% + 100px), rgba(0,99,138,0) calc(85% + 100px), rgba(0,0,0,0.15) 100%);
} */
.loader2_container {
	display: flex;
	justify-content: center;
	align-items: center;
}
.yellow, .red, .blue, .violet {
	width: var(--width_circle);
	height: var(--height_circle);
	border-radius: 100%;
	/* margin: 2vw; */
	background-image: linear-gradient(145deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0) 100%);
	animation: bounce 2s linear infinite;
}
.yellow {
	background-color: var(--color_four);
  animation-delay: 0s;
  transform: scale(0);
  filter: blur(3px);
}

.red {
	background-color: var(--color_three);
  animation-delay: .3333s;
  transform: scale(0);
  filter: blur(3px);
}

.blue {
	background-color: var(--color_two);
	animation-delay: .6666s;
  transform: scale(0);
  filter: blur(3px);
}

.violet {
	background-color: var(--color_one);
	animation-delay: 1s;
  transform: scale(0);
  filter: blur(3px);
}

@keyframes bounce {
  0%{
    transform: scale(0);
    filter: blur(3px);
  }
  50%{
    transform: scale(1);
    filter: blur(0px);
  }
  100%{
    transform: scale(0);
    filter: blur(3px);
  }
	/* 0%, 50%, 100% {
		transform: scale(1); */
		/* filter: blur(0px); */
	/* } */
	/* 25% {
		transform: scale(0.4); */
		/* filter: blur(3px); */
	/* } */
	/* 75% { */
		/* filter: blur(3px); */
		/* transform: scale(1.6);
	} */
}

/*ANIMACIÓN LOADING2 END*/

/*ANIMACIÓN LOADING3*/

:root {
	--width-circle: 40px;
	--height-circle: 40px;
}

/* body{
  padding: 0;
  margin: 0;
  background-color: #fcdc29;
  text-align: center;
  height:100vh;
  font-family: 'lato';
  font-weight: 100;;
} */
.loader3_container{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%); 
  display: flex;
	justify-content: center;
	align-items: center;
  /* background-color: #d2d6a2; */
}
.circle{
  margin: 0 -5px;
  display: inline-block;
  width: var(--width-circle);
  height: var(--height-circle);
  /* background-color: #fcdc29; */
  background-color: #b1ba8d;
  border-radius: 50%;
  animation: loading 1.5s cubic-bezier(.8, .5, .2, 1.4) infinite;
  transform-origin: bottom center;
  position: relative;
}
@keyframes loading{
  0%{
    transform: translateY(0px);
    /* background-color: #fcdc29; */
    background-color: #b1ba8d;
  }
  50%{
    transform: translateY(50px);
    /* background-color: #ef584a; */
    /* background-color: #0f1104; */
    background-color: #1d1d07;
  }
  100%{
    transform: translateY(0px);
    /* background-color: #fcdc29; */
    background-color: #b1ba8d;
  }
}
.circle-1{
  animation-delay: 0.1s;
}
.circle-2{
  animation-delay: 0.2s;
}
.circle-3{
  animation-delay: 0.3s;
}
.circle-4{
  animation-delay: 0.4s;
}
.circle-5{
  animation-delay: 0.5s;
}
.circle-6{
  animation-delay: 0.6s;
}
.circle-7{
  animation-delay: 0.7s;
}
.circle-8{
  animation-delay: 0.8s;
}

/*ANIMACIÓN LOADING3 END*/

/*ANIMACIÓN LOADING4*/

:root{
  --height_loader4: 25px;
  --width_loader4: 25px;
}

.loader4_container{
  display: flex;
	justify-content: center;
	align-items: center;
}

.loader4{
  height: var(--height_loader4);
  width: var(--width_loader4);
  background-color: #1d1d07;
  animation: changing 2s linear infinite;
}

@keyframes changing{
  0%{
    background-color: #1d1d07;
  }
  50%{
    background-color: #b1ba8d;
  }
  100%{
    background-color: #1d1d07;
  }
}

/*ANIMACIÓN LOADING4 END*/

/*ANIMACIÓN LOADING5*/

/* body{background:#000} */

.loader5_container{
  background: #000;
  display: flex;
	justify-content: center;
	align-items: center;
}

figure{margin:0;transform:translate(-50%,-50%) rotate(0deg) scale(1.4,1.4);position:absolute;left:50%;top:50%;border-radius:150px;box-sizing:border-box;animation:rotation 20s infinite linear;}

figure div:after{content:"";width:20px;height:20px;border:1px solid #fff;box-sizing:border-box;position:absolute;left:20px;top:20px;animation:shuffle 2s infinite;}

figure div:nth-child(1){transform:rotate(0deg)}
figure div:nth-child(1):after{animation-delay:-0.5s;}
figure div:nth-child(2){transform:rotate(45deg)}
figure div:nth-child(2):after{animation-delay:-1s;}
figure div:nth-child(3){transform:rotate(90deg)}
figure div:nth-child(3):after{animation-delay:-1.5s;}
figure div:nth-child(4){transform:rotate(135deg)}
figure div:nth-child(4):after{animation-delay:-2s;}
figure div:nth-child(5){transform:rotate(180deg)}
figure div:nth-child(5):after{animation-delay:-2.5s;}
figure div:nth-child(6){transform:rotate(225deg)}
figure div:nth-child(6):after{animation-delay:-3s;}
figure div:nth-child(7){transform:rotate(270deg)}
figure div:nth-child(7):after{animation-delay:-3.5s;}
figure div:nth-child(8){transform:rotate(315deg)}
figure div:nth-child(8):after{animation-delay:-4;}

@keyframes rotation{
  100%{transform:translate(-50%,-50%) rotate(-360deg) scale(1.4,1.4);}
}
@keyframes shuffle{
  50%{transform:scale(0.4,0.4) rotate(-90deg);border-radius:50%;}
}

/*ANIMACIÓN LOADING5 END*/

/*ANIMACIÓN FROM TOP-RIGHT-BOTTOM-LEFT*/

/* .animation-fromtop{
  animation: fromtop .2s linear;
}

@keyframes fromtop {
  0%{
    transform: translateY(-100vw);
  }
  100%{
    transform: translateY(0);
  }
}

.animation-fromright{
  animation: fromright .2s linear;
}

@keyframes fromright {
  0%{
    transform: translateX(100vw);
  }
  100%{
    transform: translateX(0);
  }
}

.animation-frombottom{
  animation: frombottom .2s linear;
}

@keyframes frombottom {
  0%{
    transform: translateY(100vw);
  }
  100%{
    transform: translateY(0);
  }
}

.animation-fromleft{
  animation: fromleft .2s linear;
}

@keyframes fromleft {
  0%{
    transform: translateX(-100vw);
  }
  100%{
    transform: translateX(0);
  }
} */

.animation_carrito{
  transform: translateY(-200vh) rotateY(180deg);
}

.animation_carritoActive{
  transform: translateY(0) rotateY(180deg);
}

.animation_fromtop{
  transform: translateY(-100vh);
  /* -webkit-transform: translateY(-100vh); */
}

.animation_fromtop100{
  transform: translateY(-100px);
  /* -webkit-transform: translateY(-100vh); */
}

.animation_fromtop100Active{
  transform: translateY(0);
  /* -webkit-transform: translateY(-100vh); */
}

.animation_fromtopActive{
  transform: translateY(0);
  /* -webkit-transform: translateY(0); */
}

.animation_fromright{
  transform: translateX(100vh);
  /* -webkit-transform: translateX(100vh); */
}

.animation_fromrightActive{
  transform: translateX(0);
  /* -webkit-transform: translateX(0); */
}

.animation_frombottom{
  transform: translateY(100vh);
  /* -webkit-transform: translateY(100vh); */
}

.animation_frombottomActive{
  transform: translateY(0);
  /* -webkit-transform: translateY(0); */
}

.animation_fromleft{
  transform: translateX(-100vh);
  /* -webkit-transform: translateX(-100vh); */
}

.animation_fromleftActive{
  transform: translateX(0);
  /* -webkit-transform: translateX(0); */
}

.animation_fromright100px{transform: translateX(100px);}
.animation_fromright100pxActive{transform: translateX(0);}
.animation_fromleft100px{transform: translateX(-100px);}
.animation_fromleft100pxActive{transform: translateX(0);}
.animation_frombottom100px{transform: translateY(100px);}
.animation_frombottom100pxActive{transform: translateY(0);}
.animation_fromtop100px{transform: translateY(-100px);}
.animation_fromtop100pxActive{transform: translateY(0);}

.animation_fromright200px{transform: translateX(200px);}
.animation_fromright200pxActive{transform: translateX(0);}
.animation_fromleft200px{transform: translateX(-200px);}
.animation_fromleft200pxActive{transform: translateX(0);}
.animation_frombottom200px{transform: translateY(200px);}
.animation_frombottom200pxActive{transform: translateY(0);}
.animation_fromtop200px{transform: translateY(-200px);}
.animation_fromtop200pxActive{transform: translateY(0);}

/*ANIMACIÓN FROM LEFT END*/