.full-width-triangle-top-right {
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  width: 150px;
  height: 150px;

  position: absolute;
  top: 0;
  right: 0;
  animation: animateTriangleTopRight 0.65s;
}
@keyframes animateTriangleTopRight {
  from {
    transform-origin: top right;
    transform: scale(0);
  }
  to {
    transform-origin: top right;
    transform: scale(1);
  }
}

.header_right_half_cirkle {
  z-index: 1;
  margin-right: -165px;
  position: absolute;
  right: 0px;
  top: -150px;
  width: 300px;
  height: 300px;
  clip-path: inset(50% 0 0 0);
  transform: rotateY(180deg);
}

.ams-citat-triangle-bottom-right {
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  width: 150px;
  height: 150px;
  position: absolute;
  bottom: 0;
  right: 0;
  animation: citatAnimateTriangleBottomRight 0.65s;
}
@keyframes citatAnimateTriangleBottomRight {
  from {
    transform-origin: bottom right;
    transform: scale(0);
  }
  to {
    transform-origin: bottom right;
    transform: scale(1);
  }
}

.full-width-triangle-top-left {
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  width: 150px;
  height: 150px;

  position: absolute;
  top: 0;
  left: 0;
  animation: animateTriangleTopLeft 0.65s;
}
@keyframes animateTriangleTopLeft {
  from {
    transform-origin: top left;
    transform: scale(0);
  }
  to {
    transform-origin: top left;
    transform: scale(1);
  }
}

.full-width-qwarter_cirkle {
  clip-path: circle(50% at 100% 100%);
  width: 250px;
  height: 250px;

  position: absolute;
  bottom: 0;
  right: 0;
  animation: animateTriangleBottomRight 0.65s;
}

.full-width-quarter-cirkle-bottom-left {
  clip-path: circle(50% at 0 100%);
  width: 250px;
  height: 250px;

  position: absolute;
  bottom: 0;
  left: 0;
  animation: animateQuaterCirkleleBottomLeft 0.65s;
}

@keyframes animateQuaterCirkleleBottomLeft {
  from {
    transform-origin: bottom left;
    transform: scale(0);
  }
  to {
    transform-origin: bottom left;
    transform: scale(1);
  }
}
.header_container__animated {
  z-index: 1;
  margin-left: -150px;
  position: absolute;
  top: calc(100% - 150px);
  width: 300px;
  height: 300px;
}
.ams-citat_container__animated {
  z-index: 1;
  margin-left: -165px;
  position: absolute;
  top: -150px;
  width: 300px;
  height: 300px;
  clip-path: inset(50% 0 0 0);
}

.halfclip {
  width: 50%;
  height: 100%;
  right: 0px;
  position: absolute;
  overflow: hidden;
  transform-origin: left center;
}
.halfcircle {
  box-sizing: border-box;
  height: 100%;
  right: 0px;
  position: absolute;
  border: solid 50px transparent;
  border-radius: 50%;
}

.clipped {
  width: 200%;
  transform: rotate(-45deg);
}
.container__animated.animate .clipped {
  transform: rotate(135deg);
  animation: rotate 3s linear 2;
}
@keyframes rotate {
  0% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(135deg);
  }
}
.fixed {
  width: 100%;
  transform: rotate(135deg);
  opacity: 0;
}
.container__animated.animate .fixed {
  opacity: 1;
  animation: showfixed 6s 1;
}
@keyframes showfixed {
  0% {
    opacity: 0;
  }
  49.99% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.triangle_variant_two {
  z-index: 5;
  position: absolute;
  bottom: -100px;
  right: 0px;
  -webkit-animation-name: animateTriangleTopRight_variant_two;
  animation-name: animateTriangleTopRight_variant_two;
  animation-duration: 650ms;

  width: 225px;
  height: 400px;
}
.triangle_variant_two {
  clip-path: polygon(0% 50%, 100% 100%, 100% 50%);
}
@keyframes animateTriangleTopRight_variant_two {
  0% {
    transform-origin: bottom right;
    transform: scale(0);
  }
  100% {
    transform-origin: bottom right;
    transform: scale(1);
  }
}

.animate__slideInLeft_text {
  -webkit-animation-name: slideInLeft_text;
  animation-name: slideInLeft_text;
  animation-delay: 1s;
}

@keyframes slideInLeft_text {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.triangle {
  z-index: 2;

  position: absolute;
  top: 0px;
  right: 0px;
  animation: animateTriangleTopRight 0.65s;
  width: 150px;
  height: 150px;
}
.triangle {
  clip-path: polygon(0 0%, 100% 100%, 100% 0);
}

@keyframes animateTriangleTopRight {
  from {
    transform-origin: top right;
    transform: scale(0);
  }
  to {
    transform-origin: top right;
    transform: scale(1);
  }
}

.header-mod {
  overflow: visible;
}
@media screen and (max-width: 1100px) {
  .triangle_variant_two {
    background: transparent;
  }
}
/* On screens that are 768px or less, set the halfcircle color to transparent */
@media screen and (max-width: 768px) {
  .full-width-triangle-top-right {
    width: 75px;
    height: 75px;
  }

  .full-width-quarter-cirkle-bottom-left {
    width: 150px;
    height: 150px;
  }

  .header_right_half_cirkle .halfcircle {
    border-top-color: transparent !important;
    border-left-color: transparent !important;
  }

  .ams-citat_container__animated {
    margin-left: -84px;
    top: -75px;
    width: 150px;
    height: 150px;
  }

  .full-width-qwarter_cirkle {
    width: 150px;
    height: 150px;
  }
  .full-width-triangle-top-left {
    width: 75px;
    height: 75px;
  }
  .ams-citat-triangle-bottom-right {
    width: 75px;
    height: 75px;
  }

  .full-width-triangle_two {
    width: 75px;
    height: 75px;
  }

  .header_container__animated {
    margin-left: -75px;
    top: calc(100% - 75px);
    width: 150px;
    height: 150px;
  }
  .halfcircle {
    border: solid 30px transparent;
  }

  .triangle {
    width: 75px;
    height: 75px;
  }
}