/***************************************************************************** 
* Extending AnimateCSS
******************************************************************************/
  
  .animate__animated {

    &.animate__delay-200ms {
      -webkit-animation-delay: 0.1s;
      animation-delay: 0.1s;
    }
    
    &.animate__delay-400ms {
      -webkit-animation-delay: 0.4s;
      animation-delay: 0.4s;
    }
    
    &.animate__delay-600ms {
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
    }
    
    &.animate__delay-800ms {
      -webkit-animation-delay: 0.8s;
      animation-delay: 0.8s;
    }
  }

/***************************************************************************** 
* Frontpage Demo
******************************************************************************/

  .front-page {
    overflow: hidden;

    .button {
      align-items: center;
      border: 0.125rem solid rgba($white, 0.12);
      border-radius: 0.25rem;
      color: $white;
      display: inline-block;
      font-size: 0.875rem;
      font-weight: 700;
      overflow: hidden;
      padding: 0.75rem 1.5rem;
      position: relative;
      text-decoration: none;
      text-transform: uppercase;

      &::before {
        bottom: 0.5rem;
        content: '';
        height: 200%;
        position: absolute;
        right: 0;
        -moz-transform: translateY(100%) rotate(-10.5deg);
        -webkit-transform: translateY(100%) rotate(-10.5deg);
        -o-transform: translateY(100%) rotate(-10.5deg);
        -ms-transform: translateY(100%) rotate(-10.5deg);
        transform: translateY(100%) rotate(-10.5deg);
        -moz-transform-origin: 100% 0;
        -webkit-transform-origin: 100% 0;
        -o-transform-origin: 100% 0;
        -ms-transform-origin: 100% 0;
        transform-origin: 100% 0;
        -webkit-transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
        -moz-transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
        -o-transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
        width: 150%;
        z-index: 1;
      }

      .fa {
        font-size: 1.5rem;
        line-height: 0;
        margin-left: 0.5rem;
        position: relative;
        top: 2px;
      }

      &.button-secondary {
        background-color: $black;

        &::before {
          background-color: lighten($black, 10);
        }

        &:hover::before {
          background-color: rgba($white, 0.12);
          bottom: 6rem;
        }
      }

      &.primary-button {
        background-color: $color-800;

        &::before {
          background-color: $color-700;
        }

        &:hover::before {
          background-color: rgba($white, 0.12);
          bottom: 6rem;
        }
      }
    }

    .content-block-parallax-full-width {
      overflow: hidden;
      position: relative;
      width: 100vw;

      .header,
      .img-fluid,
      .parallax-foreground-layer {
        min-width: 100vw;
      }

      img {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
      }

      .gradient-layer {
        background: url('/wp-content/themes/athlonx/assets/img/demo/default/cover-white-gradient.png') repeat-x bottom left;
        bottom: 0;
        height: 298px;
        left: 0;
        position: absolute;
        width: 100%;
        z-index: 10;
      }

      .brand-name {

        svg {

          height: 240px;
          left: 50%;
          position: absolute;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          width: 640px;

          path {
            animation: draw 4s linear forwards;
            box-shadow: 2rem 2rem rgba($black, 0.06);
            fill: $white;
            fill-opacity: 0.96;
            stroke: rgba($black, 0.24);
            stroke-dasharray: 150;
            stroke-dashoffset: 150;
            stroke-linecap: round;
            stroke-width: 7;

            &:last-child {
              fill: rgba($black, 0.96);
              stroke: rgba($white, 0.48);
            }
          }
        }
      }

      .menu {
        
        .mobile-menu-toggle {
          border: 0;
          position: absolute;
          right: 8rem;
          text-decoration: none;
          top: 8rem;
          z-index: 20;

          &::before {
            color: inherit;
            font-size: 3rem;
            line-height: 0;
            text-shadow: 0.125rem 0.125rem rgba($white, 0.24);
          }

          &:hover::before {
            color: $color-800;
          }
        }

        .mobile-menu {
          display: none;
          margin: 0;
          padding: 0;

          li {
            list-style-type: none;

            .sub-menu {
              margin: 0;
              padding: 0;
            }
          }
        }
      }
    }

    .content-block-mosaic-grid {
      margin: 2rem auto;
      max-width: $container-width-md;

      .grid-mosaic {
        align-items: flex-start;
        display: flex;
        flex-wrap: wrap;
        grid-gap: 2rem;
        justify-content: space-between;

        .grid-mosaic-column {
          align-items: stretch;
          display: flex;
          flex: 0 0 calc(34.3% - 2rem);
          flex-direction: column;
          grid-gap: 2rem;
          justify-content: stretch;

          &.grid-mosaic-column:last-child {
            flex: 0 0 100%;
          }

          .grid-item-mosaic {

            .grid-item-mosaic-body {
              box-shadow: none;
              cursor: pointer;
              overflow: hidden;
              position: relative;

              img {
                min-width: 100%;
              }

              &:hover .grid-item-mosaic-overlay {
                -webkit-transform: translateX(0%) skewX(0deg);
                -moz-transform: translateX(0%) skewX(0deg);
                -ms-transform: translateX(0%) skewX(0deg);
                -o-transform: translateX(0%) skewX(0deg);
                transform: translateX(0%) skewX(0deg);
              }

              .grid-item-mosaic-overlay {
                align-items: center;
                background-color: rgba($color-800, 0.72);
                bottom: 0;
                cursor: pointer;
                display: flex;
                height: 100%;
                justify-content: center;
                padding: 0 4rem;
                position: absolute;
                right: 0;
                -webkit-transform: translateX(180%) skewX(45deg);
                -moz-transform: translateX(180%) skewX(45deg);
                -ms-transform: translateX(180%) skewX(45deg);
                -o-transform: translateX(180%) skewX(45deg);
                transform: translateX(180%) skewX(45deg);
                -webkit-transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 200ms;
                -moz-transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 200ms;
                -ms-transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 200ms;
                -o-transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 200ms;
                transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 200ms;
                width: 100%;

                h3 {
                  color: $white;
                  text-align: center;
                  text-transform: uppercase;
                }
              }

              &.grid-item-mosaic-body-mosaic {
                align-items: center;
                background-color: $color-600;
                display: flex;
                flex-direction: column;
                height: 626px;
                justify-content: center;
                padding: 2rem;
                text-align: center;

                h2 {
                  font-size: 2rem;
                  font-style: italic;
                  margin-top: 1rem;
                  text-transform: uppercase;
                }
              }
            }
          }
        }
      }
    }

    .content-block-video {

      .video-preview {
        background-color: rgba($black, 0.48);
        box-shadow: 0 0 0 100rem rgba($black, 0.48);
        display: none;
        left: 25vw;
        position: absolute;
        top: 25vh;
        -webkit-transform: translate(-12.5vw, -12.5vh);
        -moz-transform: translate(-12.5vw, -12.5vh);
        -ms-transform: translate(-12.5vw, -12.5vh);
        -o-transform: translate(-12.5vw, -12.5vh);
        transform: translate(-12.5vw, -12.5vh);
        z-index: 100;

        #ytplayer {
          display: none;
          height: 75vh;
          width: 75vw;
        }
      }

      .video-static {
        overflow: hidden;
        position: relative;

        img {
          width: 100%;
        }

        .video-play-button {
          align-items: center;
          border: 0.5rem solid $white;
          border-radius: 10rem;
          color: $white;
          display: flex;
          font-size: 2rem;
          height: 5rem;
          justify-content: center;
          left: 50%;
          position: absolute;
          text-decoration: none;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          width: 5rem;

          &:hover,
          &:focus,
          &:active {
            box-shadow: 0 0 0 100rem rgba($black, 0.48);
            color: $color-600;
          }
        }
      }
    }

    .content-block-2-column-presentation {
      margin: 6rem 0;
      
      .container {
        max-width: $container-width-md;
      }

      .presentation {
        align-items: center;
        display: flex;
        grid-gap: 2rem;
        justify-content: space-between;
        position: relative;

        .presentation-phone {
          flex: 0 0 47%;

          .presentation-phone-screenshot {
            max-width: 320px; 
            position: absolute;
            right: 0;
            top: 0;
            -webkit-transform: rotate(30deg); 
            -moz-transform: rotate(30deg); 
            -ms-transform: rotate(30deg); 
            -o-transform: rotate(30deg);
            transform: rotate(30deg); 
          }

          .presentation-phone-frame {
            -webkit-animation: smartphone-visual-keyframe 1200ms ease-in-out infinite alternate-reverse;
            -moz-animation: smartphone-visual-keyframe 1200ms ease-in-out infinite alternate-reverse;
            -o-animation: smartphone-visual-keyframe 1200ms ease-in-out infinite alternate-reverse;
            animation: smartphone-visual-keyframe 1200ms ease-in-out infinite alternate-reverse;
          }
        }

        h1 {
          color: $grey-900;
          font-weight: 700;
          text-transform: uppercase;
        }

        h3 {
          text-transform: uppercase;
        }

        ol {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          font-size: 1.15rem;
          grid-gap: 1rem;
          justify-content: space-between;
          margin: 0 0 2rem 0;
          padding: 1rem 1rem 0 0;

          li {
            align-items: flex-start;
            display: flex;
            flex: 0 0 46%;
            justify-content: flex-start;
            line-height: 1.4;
            list-style-type: none;
            position: relative;
            text-transform: uppercase;
            white-space: nowrap;

            &::before {
              align-items: center;
              border-radius: 10rem;
              content: '';
              display: flex;
              font-weight: 700;
              height: 3rem;
              justify-content: center;
              margin-right: 1rem;
              width: 3rem;
            }

            &:nth-child(1)::before {
              background-image:
                linear-gradient(0deg, transparent 50%, $white 50%),
                linear-gradient(90deg, $color-400 50%, $white 50%);
              content: '1';
            }

            &:nth-child(2)::before {
              background-image:
                linear-gradient(180deg, transparent 50%, $color-400 50%),
                linear-gradient(180deg, transparent 50%, $color-400 50%);
              content: '2';
            }

            &:nth-child(3)::before {
              background-image:
                linear-gradient(180deg, transparent 50%, $color-400 50%),
                linear-gradient(90deg, transparent 50%, $color-400 50%);
              content: '3';
            }

            &:nth-child(4)::before {
              background-image:
                  linear-gradient(0deg, $color-400 50%, $color-400 50%);
              content: '4';
            }

            &:after {
              background-color: rgba($black, 0.12);
              border-radius: 10rem;
              bottom: 0.25rem;
              content: '';
              height: 2.5rem;
              left: 0.25rem;
              position: absolute;
              top: 0.25rem;
              width: 2.5rem;
              z-index: 2;
            }
          }
        }

        nav {
          display: flex;

          > a {
            margin-right: 1rem;
          }
        }
      }
    }

    .content-block-slideshow {
      margin: 10rem 0 3rem 0;

      .slideshow-nav-container {
        align-items: center;
        display: flex;
        font-size: 10rem;
        font-weight: 900;
        justify-content: center;
        line-height: 0;
        position: relative;
        text-align: center;
        z-index: 10;

        &::before {
          color: rgba($black, 0.03);
          content: 'Slide';
          font-size: 3.25rem;
          font-weight: 700;
          position: relative;
          top: -2rem;
        }

        a {
          margin: 0 0.5rem;
          text-decoration: none;

          &:nth-child(1) {
            color: $color-100;
          }

          &:nth-child(2) {
            color: $color-200;
          }

          &:nth-child(3) {
            color: $color-300;
          }

          &:nth-child(4) {
            color: $color-400;
          }

          &:hover,
          &:focus,
          &:active,
          &.active-slide {
            color: $color-900;
          }
        }
      }

      .slideshow {
        overflow: hidden;
        position: relative;
        width: 100%;

        .slideshow-button {
          align-items: center;
          border: 0.5rem solid $white;
          border-radius: 10rem;
          color: $white;
          display: flex;
          font-size: 3rem;
          height: 5rem;
          justify-content: center;
          position: absolute;
          text-decoration: none;
          top: 40%;
          width: 5rem;

          &:hover,
          &:focus,
          &:active {
            box-shadow: 0 0 0 1rem rgba($black, 0.24);
            color: $color-600;
          }

          &.slideshow-button-prev {
            left: 5%;
          }

          &.slideshow-button-next {
            right: 5%;
          }
        }

        .slideshow-container {
          align-items: flex-start;
          display: flex;
          justify-content: flex-start;
          width: 9999px;

          img {
            margin: 0;
            opacity: 0;
            -webkit-transition: opacity ease-in-out 600ms;
            -moz-transition: opacity ease-in-out 600ms;
            -o-transition: opacity ease-in-out 600ms;
            transition: opacity ease-in-out 600ms;
            width: $container-width;

            &.active-slide {
              opacity: 1;
            }
          }
        }
      }

      .slideshow-content {
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        top: -8rem;
        width: $container-width-sm;

        .slideshow-content-container {
          align-items: stretch;
          display: flex;
          padding-bottom: 2rem;
          width: 9999px;

          .slide {
            align-items: stretch;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            opacity: 0.5;
            text-align: center;
            -webkit-transition: opacity ease-in-out 600ms;
            -moz-transition: opacity ease-in-out 600ms;
            -o-transition: opacity ease-in-out 600ms;
            transition: opacity ease-in-out 600ms;
            width: $container-width-sm;

            &.active-slide {
              opacity: 1;
            }

            .slide-box {
              align-items: center;
              box-shadow: 1rem 1rem rgba($black, 0.06);
              display: flex;
              flex: 0 0 30%;
              flex-direction: column;
              height: 100%;
              justify-content: center;
              margin-right: 2rem;
              padding: 2rem;

              h3 {
                flex: 0 0 calc(50% - 1rem);
                text-transform: uppercase;
              }

              &:nth-child(1) {
                background-color: $color-700;
                color: $color-300;
              }

              &:nth-child(2) {
                background-color: $color-800;
                color: $color-200;
              }

              &:nth-child(3) {
                background-color: $color-900;
                color: $color-100;
              }
            }
          }
        }
      }
    }

    .content-block-parallax-centered {
      padding: 0 0 30rem 0;
      position: relative;
      top: -8rem;

      .parallax-background-layer {
        margin: 0 auto;

        h1 {          
          -webkit-background-clip: text;
          -moz-background-clip: text;
          -ms-background-clip: text;
          -o-background-clip: text;
          background-image: linear-gradient(to left, lighten($color-900, 3), lighten($color-800, 2), lighten($color-700, 1), $color-400, $color-600, $color-400, darken($color-400, 1), darken($color-300, 2), darken($color-200, 3));
          background-size: cover;
          display: block;
          font-size: 12rem;
          font-weight: 900;
          letter-spacing: -0.5rem;
          line-height: 1;
          text-align: center;
          -webkit-text-fill-color: transparent;
          -moz-text-fill-color: transparent;
          -ms-text-fill-color: transparent;
          -o-text-fill-color: transparent;
          text-fill-color: transparent;
          text-transform: uppercase;
        }
      }

      .parallax-foreground-layer {
        margin: 10rem 0;
        width: 100%;
      }
    }

    .content-block-cover-background {
      align-items: center;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      color: $white; 
      display: flex;
      justify-content: flex-end;
      margin: 2rem auto;
      max-width: 1680px;
      min-height: 600px;

      .content-text {
        flex: 0 1 45%;
        padding-right: 5%;

        p:last-of-type {
          margin-bottom: 0;
        }
      }
    }

    .content-block-cover-background-mobile {
      display: none;
    }

    .content-block-woocommerce-products {
      padding: 4rem 0;
      text-align: center;

      .products-grid {
        align-items: center;
        display: flex;
        grid-gap: 2rem;
        justify-content: center;

        .product {
          overflow: hidden;
          position: relative;
          width: 380px;

          ul {
            display: flex;
            margin: 4rem 0 0 0;
            padding: 0;

            li {
              flex: 0 0 380px;
              list-style-type: none;
              opacity: 0;
              -webkit-transition: opacity ease-in-out 600ms;
              -moz-transition: opacity ease-in-out 600ms;
              -o-transition: opacity ease-in-out 600ms;
              transition: opacity ease-in-out 600ms;

              &.active-product {
                opacity: 1;
              }
            }
          }

          h3 {
            letter-spacing: -1px;
            margin: 1rem auto 1.5rem auto;
            text-transform: uppercase;
            width: 50%;
          }

          h1 { 
            background-color: $grey-400;
            line-height: 1;
            padding: 0.5rem;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 0;
          }

          nav {
            display: inline-flex;
            margin-top: 2rem;

            a {
              border-radius: 10rem;
              display: flex;
              height: 2rem;
              margin: 0 0.25rem;
              position: relative;
              width: 2rem;

              &.product-900 {
                background-color: $color-900;
              }
              
              &.product-800 {
                background-color: $color-800;
              }
              
              &.product-700 {
                background-color: $color-700;
              }
              
              &.product-600 {
                background-color: $color-600;
              }
              
              &.product-500 {
                background-color: $color-500;
              }

              &.product-400 {
                background-color: $color-400;
              }

              &.active-product::before {
                align-items: center; 
                color: $white;
                content: '\f00c';
                display: flex;
                font-family: 'FontAwesome';
                height: 100%;
                justify-content: center;
                left: 0;
                position: absolute;
                top: 0;
                width: 100%;
              }
            }
          }
        }
      }
    }

    .content-block-social-networking {
      margin: 2rem 0;
      text-align: center;

      h3 {
        text-transform: uppercase;

        small {
          display: block;
          font-weight: 400;
        }
      }

      nav {
        align-items: center;
        display: inline-flex;
        grid-gap: 1rem;

        a {
          align-items: center;
          background-color: $color-800;
          border: 1px solid rgba($black, 0.24);
          border-radius: 10rem;
          color: $grey-100;
          display: flex;
          font-size: 0;
          font-weight: 700;
          height: 3rem;
          justify-content: center;
          letter-spacing: 1px;
          line-height: 1;
          position: relative;
          text-align: center;
          text-decoration: none;
          text-transform: uppercase;
          top: 0.125rem;
          width: 3rem;

          &:hover,
          &:focus,
          &:active {
            background-color: $color-100;
            border: 1.25rem solid rgba($white, 0.12);
            color: $color-800;
          }

          &::before {
            display: block;
            text-align: center;
          }
        }
      }
    }

    .content-block-static-full-width {
      position: relative;

      .gradient-layer {
        background: url('/wp-content/themes/athlonx/assets/img/demo/default/cover-white-gradient.png') repeat-x bottom left;
        height: 298px;
        left: 0;
        position: absolute;
        top: 0;
        transform: rotate(180deg);
        width: 100%;
        z-index: 10;
      }
    }
  }

/***************************************************************************** 
* Frontpage Demo Mobile
******************************************************************************/

  @media (max-width: $breakpoint-desktop) {

    .front-page {

      .alignfull {
        margin-left: -2rem;
        width: 100vw;
      }

      .content-block-parallax-full-width {

        .menu {
        
          .mobile-menu-toggle {
            right: 4rem;
            top: 4rem;
          }
        }
      }

      .content-block-parallax-centered {

        .parallax-background-layer {

          h1 {
            font-size: 6rem;
            letter-spacing: -0.25rem;
            word-break: keep-all;
          }
        }
      }

      .content-block-cover-background {

        .content-text {
          display: none;
        }
      }

      .content-block-cover-background-mobile {
        display: block;
        padding: 0 0 1rem 0;
      }

      .content-block-woocommerce-products {

        .products-grid {
          flex-direction: column;

          .product {

            h1 {
              background-color: transparent;
              margin-bottom: 0;
              position: static;
            }
          }
        }
      }
    }
  }

  @media (max-width: $breakpoint-tablet) {

    .front-page {

      .content-block-parallax-full-width {
        height: 75vh;
        overflow: hidden;
        width: 9999px;

        .menu {
        
          .mobile-menu-toggle {
            left: 4rem;
            right: auto;
            top: 4rem;
          }

          .mobile-menu {

            li {

              a {
                height: auto;
              }

              &.site-brand {
                font-size: 30px;

                a {
                  height: 80px;
                }
              }
            }
          }
        }

        .brand-name {

          svg {
            bottom: 4rem;
            left: 50vw;
            top: auto;
            width: 75vw;
          }
        }

        .parallax-background-layer img,
        .parallax-foreground-layer img {
          height: 75vh;
          margin: 0;
        }
      }

      .content-block-mosaic-grid {

        .grid-mosaic {
          display: block;

          .grid-mosaic-column {
            margin-bottom: 2rem;
          }
        }
      }

      .content-block-video {

        .video-static {
          height: 50vh;
          margin-left: -2rem;
          overflow: hidden;
          width: 9999px;

          img {
            height: 50vh;
            margin: 0;
            width: auto;
          }

          .video-play-button {
            left: 50vw;
          }
        }
      }

      .content-block-2-column-presentation {
        margin: 2rem 0 0 0;

        .presentation {
          flex-direction: column;

          .presentation-phone {
            margin-top: 4rem;
          }

          ol {
            align-items: flex-start;
            flex-direction: column;
          }
        }
      }

      .content-block-slideshow {

        .slideshow-nav-container {
          font-size: 3.5rem;
          font-weight: 700;

          &::before {
            display: none;
          }
        }

        .slideshow {

          .slideshow-button {
            border-width: 0.25rem;
            font-size: 1.25rem;
            height: 3rem;
            width: 3rem; 
          }

          .slideshow-container {

            img {
              max-width: auto;
              width: 100vw;
            }
          }
        }

        .slideshow-content {
          overflow: none;
          top: auto;
          width: 100%;

          .slideshow-content-container {
            display: block;
            padding-bottom: 0;
            width: 100%;

            .slide {
              display: block;
              max-width: auto;
              opacity: 1;
              width: 100%;

              .slide-box {
                box-shadow: none;
                flex: 0 0 100%;
                margin: 0;
              }
            }
          }
        }
      }

      .content-block-parallax-centered {
        padding: 0 0 14rem 0;
        top: 0;
      }

      .content-block-static-full-width {
        height: 50vh;
        overflow: hidden;
        width: 9999px;

        .container {
          margin: 0;

          .alignfull {
            width: 9999px;

            img {
              height: 50vh;
              margin: 0;
              width: auto;
            }
          }
        }
      }
    }
  }

/***************************************************************************** 
* Frontpage Demo Animations
******************************************************************************/

  @-webkit-keyframes smartphone-visual-keyframe {
    0% {
      -webkit-transform: scale(1.4) translate3d(0, 0, 0);
      -moz-transform: scale(1.4) translate3d(0, 0, 0);
      -ms-transform: scale(1.4) translate3d(0, 0, 0);
      -o-transform: scale(1.4) translate3d(0, 0, 0);
      transform: scale(1.4) translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: scale(1.4) translate3d(0, 15px, 0);
      -moz-transform: scale(1.4) translate3d(0, 15px, 0);
      -ms-transform: scale(1.4) translate3d(0, 15px, 0);
      -o-transform: scale(1.4) translate3d(0, 15px, 0);
      transform: scale(1.4) translate3d(0, 15px, 0);
    }
  }

  @-moz-keyframes smartphone-visual-keyframe {
    0%{
      -webkit-transform: scale(1.4) translate3d(0, 0, 0);
      -moz-transform: scale(1.4) translate3d(0, 0, 0);
      -ms-transform: scale(1.4) translate3d(0, 0, 0);
      -o-transform: scale(1.4) translate3d(0, 0, 0);
      transform: scale(1.4) translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: scale(1.4) translate3d(0, 15px, 0);
      -moz-transform: scale(1.4) translate3d(0, 15px, 0);
      -ms-transform: scale(1.4) translate3d(0, 15px, 0);
      -o-transform: scale(1.4) translate3d(0, 15px, 0);
      transform: scale(1.4) translate3d(0, 15px, 0);
    }
  }

  @-o-keyframes smartphone-visual-keyframe {
    0% {
      -webkit-transform: scale(1.4) translate3d(0, 0, 0);
      -moz-transform: scale(1.4) translate3d(0, 0, 0);
      -ms-transform: scale(1.4) translate3d(0, 0, 0);
      -o-transform: scale(1.4) translate3d(0, 0, 0);
      transform: scale(1.4) translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: scale(1.4) translate3d(0, 15px, 0);
      -moz-transform: scale(1.4) translate3d(0, 15px, 0);
      -ms-transform: scale(1.4) translate3d(0, 15px, 0);
      -o-transform: scale(1.4) translate3d(0, 15px, 0);
      transform: scale(1.4) translate3d(0, 15px, 0);
    }
  }

  @keyframes smartphone-visual-keyframe {
    0% {
      -webkit-transform: scale(1.4) translate3d(0, 0, 0);
      -moz-transform: scale(1.4) translate3d(0, 0, 0);
      -ms-transform: scale(1.4) translate3d(0, 0, 0);
      -o-transform: scale(1.4) translate3d(0, 0, 0);
      transform: scale(1.4) translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: scale(1.4) translate3d(0, 15px, 0);
      -moz-transform: scale(1.4) translate3d(0, 15px, 0);
      -ms-transform: scale(1.4) translate3d(0, 15px, 0);
      -o-transform: scale(1.4) translate3d(0, 15px, 0);
      transform: scale(1.4) translate3d(0, 15px, 0);
    }
  }

  @-webkit-keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  @-moz-keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  @-o-keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }