/* GENERAL SHAPE SETTINGS */
.full-circle {
  border-radius: 100%;
}

.top-half-circle {
  border-radius: var(--shape-h-size) var(--shape-h-size) 0 0;
}

.left-half-circle {
  border-radius: var(--shape-h-size) 0 0 var(--shape-h-size);
}

.right-half-circle {
  border-radius: 0 var(--shape-h-size) var(--shape-h-size) 0;
}

.bottom-half-circle {
  border-radius: 0 0 var(--shape-h-size) var(--shape-h-size);
}

.top-left-circle {
  border-radius: 100% 0 0 0;
}

.top-right-circle {
  border-radius: 0 100% 0 0;
}

.bottom-left-circle {
  border-radius: 0 0 0 100%;
}

.bottom-right-circle {
  border-radius: 0 0 100% 0;
}

.shape-with-image {
  position: relative;
  overflow: hidden;
}

.shape-with-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.half-h-shape {
  width: var(--shape-half-size) !important;
}

.half-v-shape {
  height: var(--shape-half-size) !important;
}

/* OUTLINE SHAPES + ANIMATION */
.shape-outline-ani {
  fill: none;
  stroke-width: 1;
  stroke: rgb(78, 78, 78);
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}

body.loaded .in-view .shape-outline-ani:not(.custom-ani) {
  animation: line 2s ease-in;
  animation-fill-mode: forwards;
}

/*
body.loaded .in-view svg:nth-child(odd) .shape-outline-ani:not(.custom-ani) {
  animation: line01 10s infinite;
}
body.loaded .in-view svg:nth-child(even) .shape-outline-ani:not(.custom-ani) {
  animation: line01 15s infinite;
}
*/

/*
body.loaded .in-view svg:nth-child(3) .shape-outline-ani:not(.custom-ani) {
  animation: line01 10s infinite;
}

body.loaded .in-view svg:nth-child(8) .shape-outline-ani:not(.custom-ani) {
  animation: line01 15s infinite;
}
body.loaded .in-view svg:nth-child(18) .shape-outline-ani:not(.custom-ani) {
  animation: line01 30s infinite;
}
*/

body.loaded .in-view svg:hover .shape-outline-ani:not(.custom-ani) {
  animation: lineHover 0.8s ease-in;
}

@keyframes line {
  0% {
    stroke-dashoffset: 1400;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes lineHover {
  0% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    opacity: 1;
    stroke-dashoffset: -1400;
  }
}

@keyframes line01 {
  0% {
    stroke-dashoffset: 1400;
    opacity: 1;
  }

  33% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  66% {
    opacity: 1;
    stroke-dashoffset: -1400;
  }

  100% {
    opacity: 1;
    stroke-dashoffset: 1400;
  }
}

@keyframes linehide {
  0% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  20% {
    opacity: 0;
  }

  100% {
    stroke-dashoffset: 1400;
    opacity: 0;
  }
}