/* ----------------------------------------------------------
  
  #Animations
  
  ----------------------------------------------------------*/
  
  html:not(.no-cssanimations) .animate_on_visible {
    &:not(.reveal-right):not(.reveal-left):not(.reveal-top):not(.reveal-bottom):not(.start_animation) {
      opacity: 0;
      -webkit-animation-duration: 0.6s;
      -moz-animation-duration: 0.6s;
      -o-animation-duration: 0.6s;
      animation-duration: 0.6s;
      -webkit-perspective: 1000;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      backface-visibility: hidden;
    }
  
    &.start_animation:not(.zoom-reverse) {
      &.top-t-bottom {
        -webkit-animation-name: anim_ttb;
        -moz-animation-name: anim_ttb;
        -o-animation-name: anim_ttb;
        animation-name: anim_ttb;
        opacity: 1;
      }
  
      &.bottom-t-top {
        -webkit-animation-name: anim_btt;
        -moz-animation-name: anim_btt;
        -o-animation-name: anim_btt;
        animation-name: anim_btt;
        opacity: 1;
      }
  
      &.left-t-right {
        -webkit-animation-name: anim_ltr;
        -moz-animation-name: anim_ltr;
        -o-animation-name: anim_ltr;
        animation-name: anim_ltr;
        opacity: 1;
      }
  
      &.right-t-left {
        -webkit-animation-name: anim_rtl;
        -moz-animation-name: anim_rtl;
        -o-animation-name: anim_rtl;
        animation-name: anim_rtl;
        opacity: 1;
      }
  
      &.zoom-in {
        -webkit-animation-name: zoom-in;
        -moz-animation-name: zoom-in;
        -o-animation-name: zoom-in;
        animation-name: zoom-in;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
      }
  
      &.zoom-out {
        -webkit-animation-name: zoom-out;
        -moz-animation-name: zoom-out;
        -o-animation-name: zoom-out;
        animation-name: zoom-out;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
      }
    }
  
    &.zoom-reverse {
      -webkit-animation-name: zoom-reverse;
      -moz-animation-name: zoom-reverse;
      -o-animation-name: zoom-reverse;
      animation-name: zoom-reverse;
      -webkit-animation-duration: 0.3s;
      -moz-animation-duration: 0.3s;
      -o-animation-duration: 0.3s;
      animation-duration: 0.3s;
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      -o-transform: scale(0.5);
      -ms-transform: scale(0.5);
      transform: scale(0.5);
      opacity: 0;
    }
  
    &.start_animation:not(.zoom-reverse) {
      &.alpha-anim {
        -webkit-animation-name: alpha-in;
        -moz-animation-name: alpha-in;
        -o-animation-name: alpha-in;
        animation-name: alpha-in;
        opacity: 1;
      }
  
      &.flip-in {
        -webkit-animation-name: flip-in;
        -moz-animation-name: flip-in;
        -o-animation-name: flip-in;
        animation-name: flip-in;
        opacity: 1;
      }
    }
  
    &.reveal-left {
      overflow: hidden;
      -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
      clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
      opacity: 0;
      transition: opacity 1.3s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84);
      transition: clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84), opacity 1.3s ease 167ms;
      transition: clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84), opacity 1.3s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84);
  
      &.start_animation {
        opacity: 1;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      }
    }
  
    &.reveal-right {
      overflow: hidden;
      -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
      clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
      opacity: 0;
      transition: opacity 1.1s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84);
      transition: clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84), opacity 1.1s ease 167ms;
      transition: clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84), opacity 1.1s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84);
    }
  
    &.start_animation.reveal-right {
      opacity: 1;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  
    &.reveal-top {
      overflow: hidden;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
      opacity: 0;
      transition: opacity 1.1s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84);
      transition: clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84), opacity 1.1s ease 167ms;
      transition: clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84), opacity 1.1s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(0.778, 0.128, 0.15, 0.84);
    }
  
    &.start_animation.reveal-top {
      opacity: 1;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  
    &.reveal-bottom {
      overflow: hidden;
      -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
      clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
      opacity: 0;
      transition: opacity 1.1s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(.165,.84,.44,1);
      transition: clip-path 1.1s cubic-bezier(.165,.84,.44,1), opacity 1.1s ease 167ms;
      transition: clip-path 1.1s cubic-bezier(.165,.84,.44,1), opacity 1.1s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(.165,.84,.44,1);
    }
  
    &.start_animation.reveal-bottom {
      opacity: 1;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }
  
  .cl_row-flex {
    -webkit-perspective: 2000px;
    perspective: 2000px;
  }
  
  html:not(.no-cssanimations) .animate_on_visible {
    &[data-speed="100"] {
      -webkit-animation-duration: 0.1s;
      -moz-animation-duration: 0.1s;
      -o-animation-duration: 0.1s;
      animation-duration: 0.1s;
    }
  
    &[data-speed="200"] {
      -webkit-animation-duration: 0.2s;
      -moz-animation-duration: 0.2s;
      -o-animation-duration: 0.2s;
      animation-duration: 0.2s;
    }
  
    &[data-speed="300"], &[data-speed="400"] {
      -webkit-animation-duration: 0.3s;
      -moz-animation-duration: 0.3s;
      -o-animation-duration: 0.3s;
      animation-duration: 0.3s;
    }
  
    &[data-speed="500"] {
      -webkit-animation-duration: 0.5s;
      -moz-animation-duration: 0.5s;
      -o-animation-duration: 0.5s;
      animation-duration: 0.5s;
    }
  
    &[data-speed="600"] {
      -webkit-animation-duration: 0.6s;
      -moz-animation-duration: 0.6s;
      -o-animation-duration: 0.6s;
      animation-duration: 0.6s;
    }
  
    &[data-speed="700"] {
      -webkit-animation-duration: 0.7s;
      -moz-animation-duration: 0.7s;
      -o-animation-duration: 0.7s;
      animation-duration: 0.7s;
    }
  
    &[data-speed="800"] {
      -webkit-animation-duration: 0.8s;
      -moz-animation-duration: 0.8s;
      -o-animation-duration: 0.8s;
      animation-duration: 0.8s;
    }
  
    &[data-speed="900"] {
      -webkit-animation-duration: 0.9s;
      -moz-animation-duration: 0.9s;
      -o-animation-duration: 0.9s;
      animation-duration: 0.9s;
    }
  
    &[data-speed="1000"] {
      -webkit-animation-duration: 1s;
      -moz-animation-duration: 1s;
      -o-animation-duration: 1s;
      animation-duration: 1s;
    }
  }
  
  /* Top to bottom keyframes */
  @-webkit-keyframes anim_ttb {
    0% {
      -webkit-transform: translate3d(0, -100px, 0);
      opacity: 0;
    }
  
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  @-moz-keyframes anim_ttb {
    0% {
      -moz-transform: translate3d(0, -100px, 0);
      opacity: 0;
    }
  
    100% {
      -moz-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  @-o-keyframes anim_ttb {
    0% {
      -o-transform: translate3d(0, -100px, 0);
      opacity: 0;
    }
  
    100% {
      -o-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  @keyframes anim_ttb {
    0% {
      transform: translate3d(0, -100px, 0);
      opacity: 0;
    }
  
    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  /* Bottom to top keyframes */
  @-webkit-keyframes anim_btt {
    0% {
      -webkit-transform: translate3d(0, 100px, 0);
      opacity: 0;
    }
  
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  @-moz-keyframes anim_btt {
    0% {
      -moz-transform: translate3d(0, 100px, 0);
      opacity: 0;
    }
  
    100% {
      -moz-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  @-o-keyframes anim_btt {
    0% {
      -o-transform: translate3d(0, 100px, 0);
      opacity: 0;
    }
  
    100% {
      -o-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  @keyframes anim_btt {
    0% {
      transform: translate3d(0, 100px, 0);
      opacity: 0;
    }
  
    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  /* Left to right keyframes */
  @-webkit-keyframes anim_ltr {
    0% {
      -webkit-transform: translate3d(-100px, 0, 0);
      opacity: 0;
    }
  
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  @-moz-keyframes anim_ltr {
    0% {
      -moz-transform: translate3d(-100px, 0, 0);
      opacity: 0;
    }
  
    100% {
      -moz-transform: translate3d(0, 0);
      opacity: 1;
    }
  }
  
  @-o-keyframes anim_ltr {
    0% {
      -o-transform: translate3d(-100px, 0);
      opacity: 0;
    }
  
    100% {
      -o-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  @keyframes anim_ltr {
    0% {
      transform: translate3d(-100px, 0, 0);
      opacity: 0;
    }
  
    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  /* Right to left keyframes */
  @-webkit-keyframes anim_rtl {
    0% {
      -webkit-transform: translate3d(100px, 0, 0);
      opacity: 0;
    }
  
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  @-moz-keyframes anim_rtl {
    0% {
      -moz-transform: translate3d(100px, 0, 0);
      opacity: 0;
    }
  
    100% {
      -moz-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  @-o-keyframes anim_rtl {
    0% {
      -o-transform: translate3d(100px, 0, 0);
      opacity: 0;
    }
  
    100% {
      -o-transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  @keyframes anim_rtl {
    0% {
      transform: translate3d(100px, 0, 0);
      opacity: 0;
    }
  
    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  /* Appear from center in keyframes */
  @-webkit-keyframes zoom-in {
    0% {
      -webkit-transform: scale(0.5);
      opacity: 0.1;
    }
  
    100% {
      -webkit-transform: scale(1);
      opacity: 1;
    }
  }
  
  @-moz-keyframes zoom-in {
    0% {
      -moz-transform: scale(0.5);
      opacity: 0.1;
    }
  
    100% {
      -moz-transform: scale(1);
      opacity: 1;
    }
  }
  
  @-o-keyframes zoom-in {
    0% {
      -o-transform: scale(0.5);
      opacity: 0.1;
    }
  
    100% {
      -o-transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes zoom-in {
    0% {
      transform: scale(0.5);
      opacity: 0.1;
    }
  
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  /* Appear from center out keyframes */
  @-webkit-keyframes zoom-out {
    0% {
      -webkit-transform: scale(1.5);
      opacity: 0.1;
    }
  
    100% {
      -webkit-transform: scale(1);
      opacity: 1;
    }
  }
  
  @-moz-keyframes zoom-out {
    0% {
      -moz-transform: scale(1.5);
      opacity: 0.1;
    }
  
    100% {
      -moz-transform: scale(1);
      opacity: 1;
    }
  }
  
  @-o-keyframes zoom-out {
    0% {
      -o-transform: scale(1.5);
      opacity: 0.1;
    }
  
    100% {
      -o-transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes zoom-out {
    0% {
      transform: scale(1.5);
      opacity: 0.1;
    }
  
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  /* Disappear from center keyframes */
  @-webkit-keyframes zoom-reverse {
    0% {
      -webkit-transform: scale(1);
      opacity: 1;
    }
  
    100% {
      -webkit-transform: scale(0.5);
      opacity: 0;
    }
  }
  
  @-moz-keyframes zoom-reverse {
    0% {
      -moz-transform: scale(1);
      opacity: 1;
    }
  
    100% {
      -moz-transform: scale(0.5);
      opacity: 0;
    }
  }
  
  @-o-keyframes zoom-reverse {
    0% {
      -o-transform: scale(1);
      opacity: 1;
    }
  
    100% {
      -o-transform: scale(0.5);
      opacity: 0;
    }
  }
  
  @keyframes zoom-reverse {
    0% {
      transform: scale(1);
      opacity: 1;
    }
  
    100% {
      transform: scale(0.5);
      opacity: 0;
    }
  }
  
  /* Alpha keyframes */
  @-webkit-keyframes alpha-in {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }
  
  @-moz-keyframes alpha-in {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }
  
  @-o-keyframes alpha-in {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }
  
  @keyframes alpha-in {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }
  
  /* Flip-in keyframes */
  @-webkit-keyframes flip-in {
    0% {
      opacity: 0;
      -webkit-transform: rotateX(-45deg) translateY(120px);
    }
  
    100% {
      -webkit-transform: rotateX(0deg) translate(0px, 0px);
      opacity: 1;
    }
  }
  
  @-moz-keyframes flip-in {
    0% {
      opacity: 0;
      -moz-webkit-transform: rotateX(-45deg) translateY(120px);
    }
  
    100% {
      -moz-transform: rotateX(0deg) translate(0px, 0px);
      opacity: 1;
    }
  }
  
  @-o-keyframes flip-in {
    0% {
      opacity: 0;
      -o-transform: rotateX(-45deg) translateY(120px);
    }
  
    100% {
      -o-transform: rotateX(0deg) translate(0px, 0px);
      opacity: 1;
    }
  }
  
  @keyframes flip-in {
    0% {
      opacity: 0;
      transform: rotateX(-45deg) translateY(120px);
    }
  
    100% {
      transform: rotateX(0deg) translate(0px, 0px);
      opacity: 1;
    }
  }
  
  /* reveal Right */
  @-webkit-keyframes reveal-right {
    0% {
      -webkit-transform: translateX(-90%);
    }
  
    100% {
      -webkit-transform: translate(0px, 0px);
    }
  }
  
  @-moz-keyframes reveal-right {
    0% {
      -moz-transform: translateX(-90%);
    }
  
    100% {
      -moz-transform: translate(0px, 0px);
    }
  }
  
  @-o-keyframes reveal-right {
    0% {
      -o-transform: translateX(-90%);
    }
  
    100% {
      -o-transform: translate(0px, 0px);
    }
  }
  
  @keyframes reveal-right {
    0% {
      transform: translateX(-90%);
    }
  
    100% {
      transform: translate(0px, 0px);
    }
  }
  
  /* End Animations */
  
  /* CL preset Gradients */
  
  .cl-gradient-azure_pop {
    background: #ef32d9;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #ef32d9, #89fffd);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #ef32d9, #89fffd);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-love_couple {
    background: #3a6186;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #3a6186, #89253e);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #3a6186, #89253e);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-disco {
    background: #4ECDC4;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #4ECDC4, #556270);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #4ECDC4, #556270);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-limeade {
    background: #A1FFCE;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #A1FFCE, #FAFFD1);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #A1FFCE, #FAFFD1);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-dania {
    background: #BE93C5;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #BE93C5, #7BC6CC);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #BE93C5, #7BC6CC);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-shades_of_grey {
    background: #bdc3c7;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #bdc3c7, #2c3e50);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #bdc3c7, #2c3e50);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-dusk {
    background: #ffd89b;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #ffd89b, #19547b);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #ffd89b, #19547b);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-delhi {
    background: #808080;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #808080, #3fada8);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #808080, #3fada8);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-sun_horizon {
    background: #fceabb;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #fceabb, #f8b500);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #fceabb, #f8b500);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-blood_red {
    background: #f85032;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #f85032, #e73827);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #f85032, #e73827);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-sherbert {
    background: #f79d00;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #f79d00, #64f38c);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #f79d00, #64f38c);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-firewatch {
    background: #cb2d3e;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #cb2d3e, #ef473a);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #cb2d3e, #ef473a);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-frost {
    background: #000428;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #000428, #004e92);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #000428, #004e92);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-mauve {
    background: #42275a;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #42275a, #734b6d);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #42275a, #734b6d);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-deep_sea {
    background: #2C3E50;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #2C3E50, #4CA1AF);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #2C3E50, #4CA1AF);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-solid_vault {
    background: #3a7bd5;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #3a7bd5, #3a6073);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #3a7bd5, #3a6073);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-deep_space {
    background: #000000;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #000000, #434343);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #000000, #434343);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .cl-gradient-suzy {
    background: #834d9b;
  
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #834d9b, #d04ed6);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #834d9b, #d04ed6);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }

.services_toggles{ 
  @include lg{
    .elementor-widget-wrap{
      .elementor-widget{
        @include transition(all 0.3s);
        opacity:0;
        &:nth-child(1){
          opacity:1;
        }
        &:nth-child(2){
          opacity:1;
        }
      }
    }
    .elementor-column{
      @include transition(all 0.3s);
      .elementor-widget{
        &:nth-child(1){
          &:after{
            content:"";
            position:absolute;
            width: 70px;
            height: 70px;
            top:-24px;
            left:-24px;
            background: #FEF1F1;
            opacity:0;
            border-radius:50%;
            z-index:-1;
          }
        }
      }
    }
    .elementor-column:nth-child(1){
      top:30px;
    }

    .elementor-column:nth-child(2){
      top:46px;
    }

    .elementor-column:nth-child(3){
      top:30px;
    }

    .elementor-column:nth-child(4){
      top:36px;
    }

    .elementor-column.service_toggle_active{
      top:0px;
      .elementor-widget-wrap >{
        .elementor-widget{
          opacity:1;
          &:nth-child(1){
            &:after{
              opacity:1;
              @include transition(all 0.3s);
            }
          }
        }
      }
    }
  }
}


.cl-service-image{
  .wrapper{
    @include transition(all 0.3s);
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.00);
    box-sizing:border-box;
    position:relative;
    .overlay_link{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
    }
  }
  .img-wrapper{
    position:relative;
    img{
      border-radius: 10px 10px 0px 0px;
    }
    h2{
      position:absolute;
      bottom:-10px;
      left:50px;
      font-size: 60px;
      line-height: 60px;
      /* identical to box height, or 100% */

      letter-spacing: -0.04em;
    }
  }
  .content{
    padding:40px 50px;
    @include transition(all 0.3s);
    border: 2px solid #E5E5E5;
    border-radius: 0px 0px 10px 10px;
    border-top:none;
    a{
      margin-top:32px;
      display:block;
      font-weight: 500;
      i{
        opacity:0;
        position:relative;
        padding-left:8px;
        @include transform(translateX(-10px));
        @include transition(all 0.3s);
      }
      span{
        position:relative;
        &:after{
          content:"";
          position:absolute;
          bottom:0;
          left:0;
          height:1px;
          width:0px;
          background:#000;
          @include transition(all 0.3s);
        }
      }
    }
  }

  &:hover{
    .wrapper{
      box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.03);
    }
    .content{
      border-color:rgba(255,255,255,0);
      a{
        span:after{
          width:100%;
        }
        i{
          opacity:1;
          @include transform(translateX(0px));
        }
      }
    }
  }
}


.cl-service-small-icon{
  .wrapper{
    display:flex;
  }

  i{
    font-size:16px;
    line-height:16px;
    padding-top:3px;
  }

  .content{
    font-size:14px;
    line-height:24px;
    padding-left:16px;
  }

  p{
    margin-top:4px;
    color:rgba(0,0,0,0.5);
    margin-bottom:0px;
  }
}

.cl-service-small-box{
  .wrapper{
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    padding:20px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.00);
    @include transform(translateY(0px));
    @include transition(all 0.3s);
    cursor:pointer;
    position:relative;
    display:flex;
  }
  &:hover{
    .wrapper{
      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
      @include transform(translateY(-5px));
    }
  }

  .icon-wrapper{
    width:40px;
    height:40px;
    line-height:40px;
    margin-top:3px;
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content: center;
    border-radius:20px;
  }

  .content{
    padding-left:20px;
    font-size:14px;
    line-height:24px;
    span{
      line-height:24px;
    }
  }

  a{
    position:absolute;
    left:0;
    width:100%;
    height:100%;
    top:0;
  }

  p{
    margin-top:0px;
    margin-bottom:0px;
    color:rgba(0,0,0,0.5);
  }
}


.cl-service-medium-box{
  display:flex;
  text-align:center;
  justify-content:center;
  border: 1px solid #EEEEEE;
  border-radius: 10px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.00);
  @include transform(translateY(0px));
  @include transition(all 0.3s); 
  cursor:pointer;
  .wrapper{    
    padding:24px; 
    position:relative; 
  }
  &:hover{
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
    @include transform(translateY(-5px));
  }

  .icon-wrapper{
    width:70px;
    height:70px;
    line-height:70px;
    font-size:24px;
    display:flex;
    align-items:center;
    justify-content: center;
    border-radius:35px;
    margin:0 auto;
  }

  .content{
    padding-top:24px;
    font-size:14px;
    line-height:24px;
    span{
      line-height:24px;
      font-weight:500;
    }
  }

  a{
    font-size: 14px;
    line-height: 24px;
    margin-top:16px; 
    display:block;
    text-decoration-line: underline;
  }

  p{
    margin-top:16px;
    margin-bottom:0px;
    color:rgba(0,0,0,0.5);
  }
}


.button_stretched{
  .elementor-button{
    position:relative;
    .elementor-button-content-wrapper{
      left: calc(-100% + 15px);
      position: relative;
      @include transition(all 0.3s);
    }
    .elementor-button-text{
      @include transition(all 0.3s);
        opacity:0;
    }
    .elementor-button-icon{
      
    }
  }

  &:hover{
    .elementor-button{
      .elementor-button-content-wrapper{
        left: 0px;
        position: relative;
      }
      .elementor-button-text{
        opacity:1
      }
      .elementor-button-icon{
       
      }
    }
  }
}



.underline_link_icon{
    a{
      i{
        opacity:0;
        @include transform(translateX(-20px));
        @include transition(all 0.3s);
        margin-left:8px;
        position:relative;
      }
      span{
        position:relative;
        &:before{
          content:"";
          left:0;
          bottom:0;
          width:0;
          height:1px;
          background:#000;
          position:absolute;
          @include transition(all 0.4s);
        }
      }
      &:hover{
        span:before{
          width:100%;
        }
        i{
          opacity:1;
          @include transform(translateX(0));
        }
      }
    }
}

.carousel_controls_2{
  .ce-posts-carousel-controls{
    width:102px;
    height:36px;
    position:absolute;
    right:0px;
    top:-68px;
    a{
      background:#fff;
      color:#000;
      width:36px;
      height:36px;
      line-height:36px;
      font-size:16px;
      &.ce-next{
        right:0;
        left:auto;
      }
      &.ce-prev{
        left:0px;
        right:auto;
      }
    }
  }
}


.ce-page-header{
  background:#eee;
  .page-data{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding-top:80px; 
    padding-bottom:80px;
    flex-direction: column;
    h1{
      font-size:48px;
      line-height:60px;
      margin-bottom:16px; 
      color:inherit;
    }
    ul{
      padding: 0;
      margin: 0;
      text-align: left;
      list-style: none;
      color:inherit;
      li{
        display:inline-block;
        .delimiter{
          padding:0 4px;
          margin-top:16px;
        }
      }
    }
  }
}

.content-col{
  .select2-container--default .select2-selection--single{
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    box-sizing: border-box;
    border-radius: 4px;
    height:54px;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered{
    color:#000;
    padding:15px 20px;
    font-size:14px;
    line-height:24px;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow{
    color:#000;
    right:20px;
    top:0;
    line-height:54px;
    height:54px;
    b{
      border-color:#000 transparent transparent transparent
    }
  }
  
}

.select2-dropdown{
  border-color:#e5e5e5 !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field{
  border-color:#e5e5e5;
}

.btn_show_icon_hover{
  .elementor-button-content-wrapper{
    position:relative;
  }
  .elementor-button-icon{
    position: absolute;
    right: 0;
    opacity:0;
    @include transition(all 0.3s);
  }

  .elementor-button-text{
    padding-right:0px;
    @include transition(all 0.3s);
  }

  .elementor-button-link:hover{
    .elementor-button-icon{
      opacity:1;
    }
    .elementor-button-text{
      padding-right:24px;
    }
  }
}

.btn_show_border_hover{
  .elementor-button-text{
    position:relative;
    &:before{
      content:"";
      position:absolute;
      bottom:-2px;
      left:0;
      width:0;
      border-bottom-width: 1px;
      border-bottom-style:solid;
      border-color:inherit;
      height:1px;
      @include transition(all 0.3s);
    }
  }
  .elementor-button-link:hover{
    .elementor-button-text{
      &:before{
        width:100%;
      }
    }
  }
}



.cl-scroll-indicator{
  position:absolute;
  width:20px;
  opacity:1;
  z-index:999;
  @include transition( all 0.3s );
  bottom:130px;
  font-size:14px;
  text-transform: lowercase;
  
  &.hide-scroll{
    opacity:0;
  }

  span{
    position:absolute;
    text-align:center;
    
  }
  .cl-scroll-indicator__wrapper{
    position:relative;

    &:before{
      content:"";
      width: 1px;
      position:absolute;
      left: 20px;
      top: 35px;
      height: 40px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
      animation: scroll-line 2s infinite;
      animation-timing-function: ease-out;
    }
  }


  &.style-left_side_light{
    left:10px;
    @include lg{
      left:67px;
    }
    span{
      color:#fff;
      @include transform( rotate(-90deg) );
    }
  }

  &.style-left_side_dark{
    left:10px;
    @include lg{
      left:67px;
    }
    span{
      color:#000;
      @include transform( rotate(-90deg) );
    }
    svg path{
      fill:#000;
    }
    .cl-scroll-indicator__wrapper{
      
      &:before{
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
      }
    }
  }

  &.style-right_side_light{
    right:10px;
    @include lg{
      right:25px;
    }
    span{
      color:#fff;
      @include transform( rotate(90deg) );
    }
    svg path{
      fill:#fff;
    }
  }

  &.style-right_side_dark{
    right:10px;
    @include lg{
      right:25px;
    }
    span{
      color:#fff;
      @include transform( rotate(90deg) );
    }
    svg path{
      fill:#fff;
    }
  }
}

.ce-hudson-slider .all-works, .underline_effect_1.elementor-widget-button .elementor-button-text{
  display:inline-block;
  text-decoration:none;
  position:relative;
  text-decoration-line:none;
  overflow:hidden;
  &:before{
    content:"";
    background:#000;
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    transform: translate(-100%, 0px);
    transform-origin: 0% 50%;

    .ce-animation-start &{
      transform:translate(0px, 0px);
    }
  }

  &:hover{
    &:before{
      animation: under_one 1s ;
    } 
    
  }

  
}

span.underline_effect_1_light{
  text-decoration:none;
  position:relative;
  text-decoration-line:none;
  overflow:hidden;
  &:before{
    content:"";
    
    background:#fff;
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:3px;
    transform: translate(-100%, 0px);
    transform-origin: 0% 50%;

    .ce-animation-start &{
      transform:translate(0px, 0px);
    }
  }

  &:hover{
    &:before{
      animation: under_one 1s ;
    }
    
  }
}

span.underline_effect_1_dark{
  text-decoration:none;
  position:relative;
  text-decoration-line:none;
  overflow:hidden;
  &:before{
    content:"";
    
    background:#000;
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:3px;
    transform: translate(-100%, 0px);
    transform-origin: 0% 50%;

    .ce-animation-start &{
      transform:translate(0px, 0px);
    }
  }

  &:hover{
    &:before{
      animation: under_one 1s ;
    }
    
  }
}




.underline_effect_2 .elementor-button-text, {
  display:inline-block;
  text-decoration:none;
  position:relative;
  text-decoration-line:none;
  &:before{
    content:"";
    background:#000;
    position:absolute;
    left:0;
    bottom:-4px;
    width:100%;
    height:4px;
    transform: translate(-100%, 0px);
    transform-origin: 0% 50%;

    .ce-animation-start &{
      transform:translate(0px, 0px);
    }
  }

  &:hover{
    &:before{
      animation: under_one 1s ;
    } 
    
  }
}

.underline_effect_1 .elementor-heading-title{
  display:inline-block;
  text-decoration:none;
  position:relative;
  text-decoration-line:none;
  &:before{
    content:"";
    background:#000;
    position:absolute;
    left:0;
    bottom:2px;
    width:100%;
    height:3px;
    transform: translate(-100%, 0px);
    transform-origin: 0% 50%;

    .ce-animation-start &{
      transform:translate(0px, 0px);
    }
  }

  &:hover{
    &:before{
      animation: under_one 1s ;
    } 
    
  }
}


.underline_effect_3 .elementor-button-text{
  display:inline-block;
  text-decoration:none;
  position:relative;
  text-decoration-line:none;
  &:before{
    content:"";
    background:#FF6422;
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:1px;
    transform: translate(-100%, 0px);
    transform-origin: 0% 50%;

    .ce-animation-start &{
      transform:translate(0px, 0px);
    }
  }

  &:hover{
    &:before{
      animation: under_one 1s ;
    } 
    
  }
}


@keyframes under_one {
0% {
  transform: translate(0px, 0px) scale(1 ,1);
  transform-origin: 100% 50%;
}
49% {
  transform: translate(0px, 0px) scale(0 ,1);
  transform-origin: 100% 50%;
}
50% {
  transform: translate(0px, 0px) scale(0 ,1);
  transform-origin: 0% 50%;
}
51% {
  transform: translate(0px, 0px) scale(0 ,1);
  transform-origin: 0% 50%;
}
99% {
  transform: translate(0px, 0px) scale(1 ,1);
  transform-origin: 0% 50%;
}
100% {
  transform: translate(0px, 0px) scale(1, 1);
  transform-origin: 100% 50%;
}
}

.ce-portfolio-style-beas .ce-portfolio-item, 
.ce-post-style-birk .ce-post-item,
.ce-post-style-lark .ce-post-item,
.ce-post-style-drake .ce-post-item,
.ce-post-style-adair .ce-post-item,
.ce-post-style-colm .ce-post-item{
  .entry-media{
    position:relative;
  }

  .entry-media:before{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:100%;
    top:0;
    z-index:99;
    background:rgba(0,0,0,0);
    transition:all 0.3s;
  }
} 

.ce-portfolio-style-beas .ce-portfolio-item:hover,  
.ce-post-style-birk .ce-post-item:hover,
.ce-post-style-lark .ce-post-item:hover,
.ce-post-style-drake .ce-post-item:hover,
.ce-post-style-adair .ce-post-item:hover,
.ce-post-style-colm .ce-post-item:hover{
  .entry-media:before{
    background:rgba(0,0,0,0.2);
  }
} 

.ce-portfolio-style-jasper .ce-portfolio-item{
  .post-thumbnail{
    position:relative;
  }

  .post-thumbnail:before{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:calc(100% - 37px);
    top:0;
    z-index:99;
    background:rgba(0,0,0,0);
    transition:all 0.3s;
  }
}

.ce-portfolio-style-jasper .ce-portfolio-item:hover{
  .post-thumbnail:before{
    background:rgba(0,0,0,0.2);
  }
}


.tns-inner{
  cursor:grab;
}

.hover_color:hover{
  color:var(--codeless-primary-color);
}

@keyframes scroll-line {
  0% {
    height:0px;
  }
  100% {
    height:40px;
  }
}