html, body, .wrapper {
  height: 100%;
}
body {
  overflow: hidden;
  background: #e2e9ed;
}
.wrapper {
  display: grid;
  align-items: center;
  justify-content: center;
}
.cocktail {
  position: relative;
  width: 15.625vw;
  height: 15.625vw;
  border: 1.042vw solid #fff;
  border-radius: 50%;
}
.cocktail:before {
  position: absolute;
  z-index: -2;
  width: 0;
  height: 0;
  content: '';
  border-top: 7.813vw solid #cfe7f5;
  border-right: 7.813vw solid #e2e9ed;
  border-bottom: 7.813vw solid #cfe7f5;
  border-left: 7.813vw solid #cfe7f5;
  border-radius: 7.813vw;
}
.cocktail:after {
  position: absolute;
  z-index: -1;
  top: 3.646vw;
  right: 3.646vw;
  bottom: 3.646vw;
  left: 3.646vw;
  content: '';
  border-radius: 50%;
  background: #5db8b6;
}
/* Estilos del liquido y movimiento */
.cocktail .liquid {
  position: absolute;
  z-index: 3;
  top: 1.042vw;
  right: 1.042vw;
  bottom: 1.042vw;
  left: 1.042vw;
  transform: translatex(-0.781vw);
  animation: liquid 2.5s ease-in-out infinite;
  border-radius: 50%;
  background: rgba(139, 233, 193, .6);
}
/* Estilos de la pajita */
.cocktail .straw {
  position: absolute;
  z-index: 1;
  bottom: 3.646vw;
  left: 50%;
  width: 1.042vw;
  height: 0;
  transform: translatex(-50%);
  border-top: 15.625vw solid #ff7647;
  border-right: 0.26vw solid transparent;
  border-left: 0.26vw solid transparent;
}
.cocktail .straw:before {
  position: absolute;
  top: -16.146vw;
  right: 0;
  left: 0;
  height: 1.042vw;
  content: '';
  transform: scale(1.5);
  border-radius: 50%;
  background: #cd4727;
}
.cocktail .straw:after {
  position: absolute;
  top: -0.521vw;
  right: 0;
  left: 0;
  height: 1.042vw;
  content: '';
  border-radius: 50%;
  background: #ff7647;
}
.cocktail .straw-surface {
  position: absolute;
  z-index: 5;
  bottom: 12.5vw;
  left: 50%;
  width: 1.302vw;
  height: 0;
  transform: translatex(-50%);
  border-top: 5.208vw solid #ff7647;
  border-right: 0.104vw solid transparent;
  border-left: 0.104vw solid transparent;
}
.cocktail .straw-surface:after {
  position: absolute;
  top: -0.521vw;
  right: 0;
  left: 0;
  height: 1.042vw;
  content: '';
  border-radius: 50%;
  background: #ff7647;
}
/*  Estilos de los cubos de hielo */
.cocktail .ice-cubes {
  transform-origin: 47% 65%;
  animation: ice-cubes 8s ease-in-out infinite;
}
.cocktail .ice-cube {
  width: 4.167vw;
  height: 4.167vw;
  border-radius: 1.042vw;
  background: #fff;
}
.cocktail .ice-cube.ice-cube-1 {
  transform: translate(5.208vw, 3.646vw) rotate(10deg);
  background: #bcdbce;
}
.cocktail .ice-cube.ice-cube-2 {
  position: relative;
  z-index: 2;
  transform: translate(8.333vw, 5.208vw) rotate(30deg);
}
.cocktail .ice-cube.ice-cube-3 {
  transform: translate(2.083vw, 0) rotate(-30deg);
}
/* Estilos de las hojas */
.cocktail .leaves {
  transform-origin: 46% -42%;
  animation: ice-cubes 12s ease-in-out infinite;
}
.cocktail .leave {
  width: 5.208vw;
  height: 3.646vw;
  border-radius: 5.208vw 0;
  background: #19ab87;
}
.cocktail .leave:before {
  position: absolute;
  width: 0.052vw;
  height: 5.99vw;
  content: '';
  transform: rotate(55deg) translate(0.521vw, -2.76vw);
  background: #3fc295;
}
.cocktail .leave.leave-1 {
  transform: translate(2.083vw, -8.333vw) rotate(-30deg);
}
.cocktail .leave.leave-2 {
  transform: translate(8.333vw, -9.375vw) rotate(30deg);
}
.cocktail .leave.leave-3 {
  position: relative;
  z-index: 4;
  transform: translate(3.646vw, -9.896vw) rotate(80deg);
}
/* Estilos del limón */
.cocktail .lemon-slice {
  position: absolute;
  z-index: 1;
  width: 6.51vw;
  height: 3.385vw;
  transform: translate(7.604vw, -9.271vwx) rotate(45deg);
  animation: lemon 3s ease-in-out infinite;
  border: 0.521vw solid #ecf9c0;
  border-bottom: 0;
  border-radius: 5.208vw 5.208vw 0 0;
  background: #cff063;
}
.cocktail .lemon-slice:before, .cocktail .lemon-slice:after {
  position: absolute;
  width: 1.563vw;
  height: 1.042vw;
  content: '';
  border-radius: 2.604vw 0;
  background: #aad815;
}
.cocktail .lemon-slice:after {
  top: 1.563vw;
  left: 1.563vw;
  transform: rotate(90deg);
}
.cocktail .lemon-slice:before {
  top: 1.563vw;
  right: 1.563vw;
  transform: rotate(-40deg);
}
/* Sobra del vaso inclinada */
.cocktail .shadow {
  position: absolute;
  z-index: -10;
  top: 50%;
  width: 20.833vw;
  height: 17.708vw;
  transform: translatey(-50%) rotate(45deg);
  transform-origin: 20% 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, .2) -60%, rgba(0, 0, 0, 0));
}

/* Translaciones de los objetos --- con PX */
@keyframes liquid {
  from {
    transform: translatex(-0.417vw);
 }
  50% {
    transform: translatex(0.521vw);
 }
  to {
    transform: translatex(-0.521vw);
 }
}
@keyframes ice-cubes {
  from {
    transform: rotate(0);
 }
  to {
    transform: rotate(360deg);
 }
}
@keyframes lemon {
  from {
    transform: translate(7.604vw, -9.271vw) rotate(45deg);
 }
  50% {
    transform: translate(7.604vw, -9.271vw) rotate(60deg);
 }
  to {
    transform: translate(7.604vw, -9.271vw) rotate(45deg);
 }
}

.logo_summer_loading{
  position: absolute;
  width: 8%;
  bottom: 5%;
  right: 3%;
  margin: auto;
}