@media only screen and (min-width: 767px) {

  /*-------------------------------*/
  /*---------- VARIABLES ----------*/
  /*-------------------------------*/

  :root {
    --g-animation-duration-very-fast: 0.1s;
    --g-animation-duration-fast: 0.2s;
    --g-animation-duration-medium: 0.3s;
    --g-animation-duration-slow: 0.5s;
    --g-animation-duration-very-slow: 1s;

    --g-animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);

    --g-animation-target: 0;
  }

  /*------------------------------------*/
  /*---------- INITIAL STATES ----------*/
  /*------------------------------------*/

  [gwb-animation=wrapper] [gwb-animation^=target] {
    animation-duration: var(--g-animation-duration-medium);
    animation-timing-function: var(--g-animation-timing-function);
    animation-fill-mode: both;
  }

  [gwb-animation^=target] {
    opacity: 0;
  }

  .gwb-animate [gwb-animation^=target] {
    opacity: 1;
  }

  /*--------------------------------*/
  /*---------- ANIMATIONS ----------*/
  /*--------------------------------*/

  @keyframes fade {
    from {
      opacity: 0;
    }

    to {
      opacity 1;
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(2rem);
    }

    to {
      opacity 1;
      transform: translateY(0rem);
    }
  }

  @keyframes slide-in {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0%);
    }
  }

  @keyframes scale {
    from {
      transform: scale(0);
    }

    to {
      transform: scale(1);
    }
  }

  @keyframes scale-in {
    from {
      opacity: 0;
      transform: scale(0.75);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes open-right {
    from {
      clip-path: inset(0 100% 0 0);
    }

    to {
      clip-path: inset(0 0% 0 0);
    }
  }

  @keyframes open-left {
    from {
      clip-path: inset(0 0 0 100%);
    }

    to {
      clip-path: inset(0 0 0 0%);
    }
  }

  @keyframes open-bottom {
    from {
      clip-path: inset(0 0 100% 0);
    }

    to {
      clip-path: inset(0 0 0% 0);
    }
  }

  @keyframes blurry-reveal {
    from {
      opacity: 0;
      transform: scale(1.1);
      filter: blur(0.5rem);
    }

    to {
      opacity: 1;
      transform: scale(1);
      filter: blur(0rem);
    }
  }

  /*----------------------------*/
  /*---------- DELAYS ----------*/
  /*----------------------------*/

  [gwb-animation=wrapper] [gwb-animation=target-01] {
    animation-delay: 0s;
  }

  [gwb-animation=wrapper] [gwb-animation=target-02] {
    animation-delay: 0.25s;
  }

  [gwb-animation=wrapper] [gwb-animation=target-03] {
    animation-delay: 0.5s;
  }

  [gwb-animation=wrapper] [gwb-animation=target-04] {
    animation-delay: 0.75s;
  }

  [gwb-animation=wrapper] [gwb-animation=target-05] {
    animation-delay: 1s;
  }

  [gwb-animation=wrapper] [gwb-animation=target-06] {
    animation-delay: 1.25s;
  }

  [gwb-animation=wrapper] [gwb-animation=target-07] {
    animation-delay: 1.5s;
  }

  [gwb-animation=wrapper] [gwb-animation=target-08] {
    animation-delay: 1.75s;
  }

  [gwb-animation=wrapper] [gwb-animation=target-09] {
    animation-delay: 2s;
  }

  [gwb-animation=wrapper] [gwb-animation=target-10] {
    animation-delay: 2.25s;
  }

  /*-------------------------------*/
  /*---------- DURATIONS ----------*/
  /*-------------------------------*/

  [gwb-animation=wrapper] [gwb-animation-duration=very-slow] {
    animation-duration: var(--g-animation-duration-very-slow);
  }

  [gwb-animation=wrapper] [gwb-animation-duration=slow] {
    animation-duration: var(--g-animation-duration-slow);
  }

  [gwb-animation=wrapper] [gwb-animation-duration=fast] {
    animation-duration: var(--g-animation-duration-fast);
  }

  [gwb-animation=wrapper] [gwb-animation-duration=very-fast] {
    animation-duration: var(--g-animation-duration-very-fast);
  }

  /*---------------------------------*/
  /*---------- ASSIGNATION ----------*/
  /*---------------------------------*/

  /* DEFAULT TYPE */

  [gwb-animation=wrapper].gwb-animate [gwb-animation^=target] {
    animation-name: fade-in;
  }

  /* FADE */

  [gwb-animation=wrapper].gwb-animate [gwb-animation-type=fade] {
    animation-name: fade;
  }

  /* FADE-IN */

  [gwb-animation=wrapper].gwb-animate [gwb-animation-type=fade-in] {
    animation-name: fade-in;
  }

  /* SCALE */

  [gwb-animation=wrapper].gwb-animate [gwb-animation-type=scale] {
    animation-name: scale;
  }

  /* SCALE-IN */

  [gwb-animation=wrapper].gwb-animate [gwb-animation-type=scale-in] {
    animation-name: scale-in;
  }

  /* SLIDE-IN */

  [gwb-animation=wrapper].gwb-animate [gwb-animation-type=slide-in] {
    animation-name: slide-in;
  }

  /* OPEN RIGHT */

  [gwb-animation=wrapper].gwb-animate [gwb-animation-type=open-right] {
    animation-name: open-right;
  }

  /* OPEN LEFT */

  [gwb-animation=wrapper].gwb-animate [gwb-animation-type=open-left] {
    animation-name: open-left;
  }

  /* OPEN BOTTOM */

  [gwb-animation=wrapper].gwb-animate [gwb-animation-type=open-bottom] {
    animation-name: open-bottom;
  }

  /* BLURRY REVEAL */

  [gwb-animation=wrapper].gwb-animate [gwb-animation-type=blurry-reveal] {
    animation-name: blurry-reveal;
  }

  /*--------------------------------*/
  /*---------- RESPONSIVE ----------*/
  /*--------------------------------*/

  /*@media only screen and (max-width: 767px) {*/

  /*[gwb-animation=wrapper].gwb-animate [gwb-animation-breakpoint=mobile-off] {
    animation-name: none !important;
  }*/

  /* Disabling animations on mobile from any parent with the attribute */
  /*[gwb-animation-breakpoint=mobile-off] [gwb-animation^=target] {
    animation-name: none !important;
  }*/

  /*[gwb-animation=wrapper].gwb-animate [gwb-animation^=target] {
    animation-name: none !important;
  }

}*/

  /*-----------------------------------------*/
  /*---------- STAGGER ASSIGNATION ----------*/
  /*-----------------------------------------*/

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(1) {
    --g-animation-target: 0
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(2) {
    --g-animation-target: 1
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(3) {
    --g-animation-target: 2
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(4) {
    --g-animation-target: 3
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(5) {
    --g-animation-target: 4
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(6) {
    --g-animation-target: 5
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(7) {
    --g-animation-target: 6
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(8) {
    --g-animation-target: 7
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(9) {
    --g-animation-target: 8
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(10) {
    --g-animation-target: 9
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(11) {
    --g-animation-target: 10
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(12) {
    --g-animation-target: 11
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(13) {
    --g-animation-target: 12
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(14) {
    --g-animation-target: 13
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(15) {
    --g-animation-target: 14
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(16) {
    --g-animation-target: 15
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(17) {
    --g-animation-target: 16
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(18) {
    --g-animation-target: 17
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(19) {
    --g-animation-target: 18
  }

  [gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(20) {
    --g-animation-target: 19
  }

  /*------------------------------------*/
  /*---------- STAGGER DELAYS ----------*/
  /*------------------------------------*/

  [gwb-animation-effect=stagger]>* {
    animation-delay: calc((var(--g-animation-target) * var(--g-animation-duration-medium)));
  }

  [gwb-animation-effect=stagger][gwb-stagger-delay=very-slow]>* {
    animation-delay: calc((var(--g-animation-target) * var(--g-animation-duration-very-slow)));
  }

  [gwb-animation-effect=stagger][gwb-stagger-delay=slow]>* {
    animation-delay: calc((var(--g-animation-target) * var(--g-animation-duration-slow)));
  }

  [gwb-animation-effect=stagger][gwb-stagger-delay=medium]>* {
    animation-delay: calc((var(--g-animation-target) * var(--g-animation-duration-medium)));
  }

  [gwb-animation-effect=stagger][gwb-stagger-delay=fast]>* {
    animation-delay: calc((var(--g-animation-target) * var(--g-animation-duration-fast)));
  }

  [gwb-animation-effect=stagger][gwb-stagger-delay=very-fast]>* {
    animation-delay: calc((var(--g-animation-target) * var(--g-animation-duration-very-fast)));
  }

}