/**
 * @file
 * decorative-images paragraph
 * Use in paragraph--decorative-images.html.twig
 */


.decorative-images {
  position: absolute;
  z-index: -1;
}
.decorative-images--left {
  position: absolute;
  z-index: -1;
  bottom: 0px;
  left: 13%;
}
.decorative-images--right {
  position: absolute;
  z-index: -1;
  bottom: 0px;
  right: 13%;
}

.decorative-images--project-homepage {
  position: absolute;
  z-index: -1;
  top: 40%;
  right: 13%;
}
.decorative-images--presentation-left {
  position: absolute;
  z-index: -1;
  bottom: 50%;
  left: 20%;
}
.decorative-images--presentation-right {
  position: absolute;
  z-index: -1;
  bottom: 50%;
  right: 20%;
}

.decorative-images--who-logo {
  top: 45%;
  left: -30%;
}
.decorative-images--bottom-right {
  bottom: -20px;
  right: -50px;
}
.decorative-images--bottom-left {
  bottom: -20px;
  left: -50px;
}
.decorative-images--center-right {
  bottom: 50%;
  transform: translateY(50%);
  right: -50px;
}
.decorative-images--center-left {
  bottom: 50%;
  transform: translateY(50%);
  left: -50px;
}
.decorative-images--top-right {
  top: 20px;
  right: -50px;
}
.decorative-images--top-left {
  top: 20px;
  left: -50px;
}
.decorative-images--floating-left {
  top: 20%;
  left: 6%;
}
.decorative-image--full {
  bottom: 0;
  left: 0;
  right: 0;
}
.decorative-images--project-floating {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}


@media all and (min-width: 750px){
  .decorative-image--full {
    bottom: -150px;
  }
}
@media all and (min-width: 1000px){
  .decorative-image--background {
    z-index: 1;
  }
}
@media all and (min-width: 1200px){
  .decorative-images--who-logo {
    top: 13%;
    left: -0.5%;
  }
}


/**
 * Floatting animation effect
 */

.decorative-images:not(.decorative-images--background) img {
  animation: 10s ease-in 1s reverse both infinite floattingElem;
}
.decorative-images:not(.decorative-images--background):last-child img {
  animation: 7s ease-in-out 1s reverse both infinite floattingElem2;
}
@keyframes floattingElem {
  from { transform: translate(0, 0) }
  33%  { transform: translate(30%, -40%) }
  66%  { transform: translate(-10%, 20%) }
  to   { transform: translate(0, 0) }
}
@keyframes floattingElem2 {
  from { transform: translate(0, 0) }
  33%  { transform: translate(-30%, 40%) }
  66%  { transform: translate(10%, -20%) }
  to   { transform: translate(0, 0) }
}


/**
 * Hide Animate decorative image on mobile
 */

.decorative-images.animate {
  display: none;
}
@media all and (min-width: 900px){
  .decorative-images.animate {
    display: block;
  }
}

.decorative-images__motion-contact {
  display: none;
}
@media all and (min-width: 1000px){
  .decorative-images__motion-contact {
    display: block;
    right: 150px;
    top: 25%;
  }
}