/* CONTAINERS */

.circle-wrapper,
.circle-wrapper-2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.circle-wrapper-image {
  position: absolute;
  top: 50%;
  left: 85%;
  transform: translate(-75%, -100%);
  z-index: 1;
}

@media only screen and (max-width: 768px) {
  .circle-wrapper-image {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 1;
  }
}

.circle-wrapper-2,
.circle-wrapper-3 {
  position: absolute;
}

.circle-wrapper-3 {
  right: -40vw;
  width: 71vw;
}

.circle-container {
  position: relative;
  opacity: 0.5;
}

.circle-container-2 {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.circle-container-3 {
  position: relative;
}

/* CIRCLE-1 */

.circle {
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15) inset;
  min-height: 50px;
  min-width: 50px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  animation: insaneRotate 1.8s infinite alternate;
  overflow: hidden;
}

.circle.size-1 {
  width: 400px;
  height: 400px;
  z-index: 11;
}

.circle.size-2 {
  width: 500px;
  height: 500px;
  z-index: 10;
  left: 50px;

  animation-delay: 2s;
}
.circle.size-3 {
  width: 600px;
  height: 600px;
  z-index: 9;

  animation-delay: 1.8s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle.size-4 {
  width: 700px;
  height: 700px;
  z-index: 8;
  left: -50px;

  animation-delay: 1.6s;
}
.circle.size-5 {
  width: 800px;
  height: 800px;
  z-index: 7;

  animation-delay: 1.4s;
}
.circle.size-6 {
  width: 900px;
  height: 900px;
  z-index: 6;
  left: 50px;

  animation-delay: 1.2s;
}
.circle.size-7 {
  width: 1000px;
  height: 1000px;
  z-index: 5;

  animation-delay: 1s;
}

.circle.size-8 {
  width: 1100px;
  height: 1100px;
  z-index: 4;
  left: -50px;

  animation-delay: 0.8s;
}
.circle.size-9 {
  width: 1200px;
  height: 1200px;
  z-index: 3;

  animation-delay: 0.6s;
}

.circle.size-10 {
  width: 1200px;
  height: 1200px;
  z-index: 2;
  display: none;
  animation-delay: 0.4s;
}

.circle.size-11 {
  width: 1200px;
  height: 1200px;
  z-index: 1;
  display: none;
  animation-delay: 0.2s;
}

.circle-image-1 {
  opacity: 0;
  object-fit: cover;
  transition: all 1s ease;
}

.circle-image-1.active {
  opacity: 1;
}

@keyframes insaneRotate {
  0% {
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15) inset;
    /* -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px); */
  }

  33% {
    box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.25) inset;
    /* -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px); */
  }

  66% {
    box-shadow: 4px 0px 30px rgba(0, 0, 0, 0.15) inset;
    /* -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px); */
  }

  100% {
    box-shadow: 0px px 30px rgba(0, 0, 0, 0.25) inset;
    /* -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px); */
  }
}

@media only screen and (max-width: 768px) {
  /* GENERAL CIRCLE */
  .circle.size-1 {
    width: 220px;
    height: 220px;
  }

  .circle.size-2 {
    width: 280px;
    height: 280px;
    left: 25px;
  }
  .circle.size-3 {
    width: 330px;
    height: 330px;
  }
  .circle.size-4 {
    width: 380px;
    height: 380px;
    left: -25px;
  }
  .circle.size-5 {
    width: 440px;
    height: 440px;
  }
  .circle.size-6 {
    width: 500px;
    height: 500px;
    left: 25px;
  }
  .circle.size-7 {
    width: 550px;
    height: 550px;
  }

  .circle.size-8 {
    width: 600px;
    height: 600px;
    left: -25px;
  }
  .circle.size-9 {
    width: 660px;
    height: 660px;
  }

  .circle.size-10 {
    width: 720px;
    height: 720px;
    display: block;
    left: 25px;
  }

  .circle.size-11 {
    width: 770px;
    height: 770px;
    display: block;
  }
  /* WITH IMAGE */
  .circle-wrapper-image .circle {
    left: 0;
  }

  .circle-wrapper-image .circle.size-1 {
    width: 140px;
    height: 140px;
  }

  .circle-wrapper-image .circle.size-2 {
    width: 180px;
    height: 180px;
    top: 17px;
  }
  .circle-wrapper-image .circle.size-3 {
    width: 210px;
    height: 210px;
  }
  .circle-wrapper-image .circle.size-4 {
    width: 240px;
    height: 240px;
    top: 17px;
  }
  .circle-wrapper-image .circle.size-5 {
    width: 280px;
    height: 280px;
  }
  .circle-wrapper-image .circle.size-6 {
    width: 310px;
    height: 310px;
    top: 17px;
  }
  .circle-wrapper-image .circle.size-7 {
    width: 350px;
    height: 350px;
  }

  .circle-wrapper-image .circle.size-8 {
    width: 380px;
    height: 380px;
    top: -17px;
  }
  .circle-wrapper-image .circle.size-9 {
    width: 420px;
    height: 420px;
  }

  .circle-wrapper-image .circle.size-10 {
    width: 450px;
    height: 450px;
    display: block;
    top: 17px;
  }

  .circle-wrapper-image .circle.size-11 {
    width: 490px;
    height: 490px;
    display: block;
  }
}

/* CIRCLE2 */

.circle-2.blue-circle {
  border-radius: 900px;
  background: linear-gradient(36deg, #1b25d6 0%, #22266d 100%);
  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.15);
}

.circle-2 {
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.15);
  min-height: 50px;
  min-width: 50px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* left: 50%;
  top: 100%;
  transform: translate(-50%, -50%); */
  overflow: hidden;
  background-color: #fff;
}

.circle-2.size-1 {
  /* width: 75vh;
  height: 75vh; */
  width: 40vw;
  height: 40vw;
}

.circle-2.size-2 {
  width: 87.5vh;
  height: 87.5vh;
}

.circle-2.size-3 {
  width: 100vh;
  height: 100vh;
}

.circle-2.size-4 {
  width: 112.5vh;
  height: 112.5vh;
}

.circle-2.size-4.blue-circle {
  left: -0.78vw;
}

.circle-2.size-3.blue-circle {
  left: 5.72vw;
}

.circle-2.size-4 {
  right: -1.17vw;
}

.circle-2.size-2.blue-circle {
  left: 12.2vw;
  background: linear-gradient(42deg, #22266d 0%, #1b25d6 100%);
}

.circle-2.size-3 {
  right: 1.82vw;
}

.circle-2.size-2 {
  right: 8.33vw;
}

.circle-2.size-1.left {
  left: 12.2vw;
  z-index: 1;
}
.circle-2.size-1.right {
  right: 8.33vw;
}

.circle-2.size-1.right img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@media only screen and (max-width: 768px) {
  .circle-2.size-1 {
    width: 600px;
    height: 600px;
  }

  .circle-2.size-2 {
    width: 350px;
    height: 350px;
    left: calc(50% - 23px);
    transform: translate(-50%, 0);
    top: initial;
    bottom: 12px;
  }

  .circle-2.size-3 {
    width: 400px;
    height: 400px;
    left: 50%;
    transform: translateX(-50%);
    bottom: -14px;
    top: initial;
  }

  .circle-2.size-4 {
    width: 450px;
    height: 450px;
    left: 50%;
    transform: translateX(-50%);

    top: initial;
    bottom: -39px;
  }

  .circle-2.size-4.blue-circle {
    width: 600px;
    height: 600px;
    top: -137px;
    left: calc(50% - 37px);
    right: 0;
    bottom: 0;
    transform: translate(-50%, 0px);
  }

  .circle-2.size-3.blue-circle {
    left: 0;
    width: 550px;
    height: 550px;
    transform: translate(-50%);
    left: 50%;
    top: -120px;
    background: linear-gradient(87deg, #22266d 0%, #1b25d6 100%);
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.4);
  }

  .circle-2.size-2.blue-circle {
    left: 0;
    display: none;
    /* FOREVER DISPLAYNONE */
  }

  .circle-2.size-3 {
    right: 0;
  }

  .circle-2.size-1.left {
    left: 50%;
    transform: translate(-50%, 0);
    top: -93px;
    z-index: 1;
    height: 500px;
    width: 500px;
  }
  .circle-2.size-1.right {
    height: 300px;
    width: 300px;
    left: calc(50% + 5px);
    transform: translate(-50%, 0%);
    top: initial;
    bottom: 37px;
  }
}

/* CIRCLE 3 */

.circle-3.blue-circle-2 {
  background: linear-gradient(45deg, #22266d 0%, #1b25d6 100%);
  box-shadow: 0px 4px 60px 0px rgba(0, 0, 0, 0.4) inset;
  animation: crazyRotate 1.8s infinite alternate;
  transform-origin: center center;
}

.circle-3 {
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.15);
  min-height: 50px;
  min-width: 50px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background-color: #fff;
  transform: translate(-50%, -50%);
}

.circle-3.size-1 {
  width: 310px;
  height: 310px;
  animation-delay: 0.3s;
}

.circle-3.size-2 {
  width: 393.214px;
  height: 393.214px;
  top: -40px;
}

.circle-3.size-3 {
  width: 471.857px;
  height: 471.857px;
  animation-delay: 0.6s;
}

.circle-3.size-4 {
  width: 550.5px;
  height: 550.5px;
  top: 40px;
}

.circle-3.size-5 {
  width: 629.143px;
  height: 629.143px;

  animation-delay: 0.9s;
}

.circle-3.size-6 {
  width: 707.786px;
  height: 707.786px;
  top: -40px;
}

.circle-3.size-7 {
  width: 786.429px;
  height: 786.429px;
  animation-delay: 1.2s;
}

.circle-3.size-8 {
  width: 865.072px;
  height: 865.072px;
  top: 40px;
}

.circle-3.size-9 {
  width: 943.714px;
  height: 943.714px;
  animation-delay: 1.5s;
}

.circle-3.size-10 {
  width: 1022.357px;
  height: 1022.357px;
  top: -40px;
}

.circle-3.size-11 {
  width: 1101px;
  height: 1101px;
  animation-delay: 1.8s;
}

@keyframes crazyRotate {
  0% {
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15) inset;
    /* -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px); */
    transform: translate(-50%, -50%) rotate(90deg);
  }

  33% {
    box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.25) inset;
    /* -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px); */
    transform: translate(-50%, -50%) rotate(180deg);
  }

  66% {
    box-shadow: 4px 0px 30px rgba(0, 0, 0, 0.15) inset;
    /* -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px); */
    transform: translate(-50%, -50%) rotate(270deg);
  }

  100% {
    box-shadow: 0px px 30px rgba(0, 0, 0, 0.25) inset;
    /* -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px); */

    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media only screen and (max-width: 768px) {
  .circle-wrapper-3 {
    transform: scale(0.4) translate(-50%, 0%) rotate(180deg);
    left: 28%;
    bottom: -3%;
  }
}

/* CIRCLE 4 */

.circle-wrapper-4 {
  width: 1400px;
  height: 1400px;
  position: absolute;
  left: -32vw;
  top: calc(50% + 50px);
}

.circle-4 {
  min-height: 50px;
  min-width: 50px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  animation: sillyRotate 3s infinite alternate;
}

.circle-4.size-1 {
  width: 125vh;
  height: 125vh;
  background: #fff;
  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.5);
  top: -50px;
}

.circle-4.size-2 {
  width: 137.5vh;
  height: 137.5vh;
  background: var(
    --blue-gradient,
    linear-gradient(45deg, #22266d 0%, #1b25d6 100%)
  );
  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.5);
  animation-delay: 0.4s;
}
.circle-4.size-3 {
  width: 150vh;
  height: 150vh;
  background: var(
    --blue-gradient,
    linear-gradient(45deg, #22266d 0%, #1b25d6 100%)
  );
  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.5);
  top: -100px;
  transform: translate(-50%, -50%) rotate(180deg);
  animation-delay: 1.2s;
}
.circle-4.size-4 {
  width: 162.5vh;
  height: 162.5vh;
  background: var(
    --blue-gradient,
    linear-gradient(45deg, #22266d 0%, #1b25d6 100%)
  );
  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.5);
  animation-delay: 0.8s;
}
.circle-4.size-5 {
  width: 175vh;
  height: 175vh;
  background: var(
    --blue-gradient,
    linear-gradient(45deg, #22266d 0%, #1b25d6 100%)
  );
  transform: translate(-50%, -50%) rotate(180deg);
  animation-delay: 1.6s;
}

@keyframes sillyRotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  33% {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  66% {
    transform: translate(-50%, -50%) rotate(180deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(270deg);
  }
}

/*
@media only screen and (max-width: 768px) and (max-height: 734px) {
  .circle-wrapper-4 {
    transform: scale(0.7) rotate(-90deg) translateY(0%);

    left: -10%;
    top: -35%;
  }
}

@media only screen and (max-width: 768px) and (min-height: 735px) {
  .circle-wrapper-4 {
    transform: scale(0.75) rotate(-90deg) translateY(0%);

    left: 160%;
    top: -18%;
  }
}*/

@media only screen and (max-width: 768px) and (min-height: 735px) {
  .circle-wrapper-4 {
    transform: scale(0.75) rotate(-90deg) translateY(0%);

    left: 10%;
    top: -10%;
  }
}

@media only screen and (min-width: 1440px) {
  .circle-wrapper-4 {
    left: -25vw;
    transform: scale(1);
    top: calc(50% + 100px);
  }
}