animation

.lets-talk {
    background: #fafafa;
    height: 300px;
    position: relative;
    z-index: 2;
    margin-top: 115px;

    @media (max-width: 768px) and (orientation: landscape) {
      height: 527px;
    }

    @media (min-width: 600px) and (max-width: 768px) {
      height: 527px;
      margin-top: 200px;
    }

    @media (min-width: $lg) {
      margin-top: 190px;
      height: 527px;
    }

    .border-content {
      position: relative;
      border: 2px solid $color-main;
      border-top: none;
      border-right: none;
      height: 150px;
      width: 100%;
      overflow-y: visible;
      padding: 20px;

      @media (max-width: 768px) and (orientation: landscape) {
        width: 450px;
        height: 350px;
        padding: 30px;
      }

      @media (min-width: 600px) and (max-width: 768px) {
        width: 450px;
        height: 350px;
        padding: 30px;
      }

      @media (min-width: $lg) {
        border: none;

        &::before {
          content: ' ';
          border: 1px solid $color-main;
          position: absolute;
          width: 0;
          height: 0;
          top: 0;
          left: -2px;
          -webkit-transition: height 0.5s ease-in-out 0.5s;
          -moz-transition: height 0.5s ease-in-out 0.5s;
          -ms-transition: height 0.5s ease-in-out 0.5s;
          -o-transition: height 0.5s ease-in-out 0.5s;
          transition: height 0.5s ease-in-out 0.5s;
        }

        &::after {
          content: ' ';
          border: 1px solid $color-main;
          position: absolute;
          width: 0;
          height: 0;
          bottom: -2px;
          left: -2px;
          -webkit-transition: width 0.5s ease-in-out 1s;
          -moz-transition: width 0.5s ease-in-out 1s;
          -ms-transition: width 0.5s ease-in-out 1s;
          -o-transition: width 0.5s ease-in-out 1s;
          transition: width 0.5s ease-in-out 1s;
        }

        &.shown {
          &::before {
            height: 100%;
          }

          &::after {
            width: 86%;
          }
        }
      }

      @media (min-width: $xl) {
        border: none;

        &::before {
          content: ' ';
          border: 1px solid $color-main;
          position: absolute;
          width: 0;
          height: 0;
          top: 43px;
          left: -2px;
          -webkit-transition: height 0.5s ease-in-out 0.5s;
          -moz-transition: height 0.5s ease-in-out 0.5s;
          -ms-transition: height 0.5s ease-in-out 0.5s;
          -o-transition: height 0.5s ease-in-out 0.5s;
          transition: height 0.5s ease-in-out 0.5s;
        }

        &::after {
          content: ' ';
          border: 1px solid $color-main;
          position: absolute;
          width: 0;
          height: 0;
          bottom: -2px;
          left: -2px;
          -webkit-transition: width 0.5s ease-in-out 1s;
          -moz-transition: width 0.5s ease-in-out 1s;
          -ms-transition: width 0.5s ease-in-out 1s;
          -o-transition: width 0.5s ease-in-out 1s;
          transition: width 0.5s ease-in-out 1s;
        }

        &.shown {
          &::before {
            height: 86%;
          }

          &::after {
            width: 86%;
          }
        }
      }

      @media (min-width: $xl) {
        width: 450px;
        height: 300px;
        padding: 30px;
      }

      .overflow-image {
        position: absolute;
        bottom: 30px;
        height: 40vh;
        width: 80%;
        -webkit-background-size: cover;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        @media (max-width: 768px) and (orientation: landscape) {
          height: 120vh;
        }

        @media (min-width: $lg) {
          display: block;
          height: 50vh;

          &::before {
            content: ' ';
            position: absolute;
            display: block;
            height: 100%;
            width: 100%;
            max-width: 100%;
            background-color: #fafafa;
          }

          &::after {
            content: ' ';
            position: absolute;
            display: block;
            height: 100%;
            width: 100%;
            z-index: 999;
            max-width: 0;
            background-color: #fff;
          }

          &.shown {
            &::before {
              -webkit-animation: fade-reverse-global;
              -o-animation: fade-reverse-global;
              animation: fade-reverse-global;
              animation-duration: 1.3s;
              animation-fill-mode: forwards;
            }

            &::after {
              -webkit-animation: fade-global;
              -o-animation: fade-global;
              animation: fade-global;
              animation-duration: 1.3s;
            }
          }
        }
      }

      .lets-talk-rotate {
        position: absolute;
        top: 0;
        left: -77px;
        font-size: 20px;
        color: $color-dark-gray;
        padding-left: 15px;
        background-color: #fafafa;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);

        @media (min-width: $lg) {
          top: -90px;
        }

        @media (min-width: $xl) {
          top: 0;
          left: -77px;
        }

        .color {
          color: $color-main;
        }
      }

      .box {
        background-color: $color-main;
        position: absolute;
        bottom: -45px;
        right: -55px;
        font-size: 16px;
        color: $white;
        padding: 20px;
        max-width: 120px;
        z-index: 9999;

        @media (min-width: $lg) {
          bottom: -30px;
          right: -90px;
          font-size: 20px;
          max-width: 0;
          padding: 0;
          height: 200px;
          left: unset;
          line-height: 28px;
          overflow: hidden;
          -webkit-transition: all 0.3s ease-in-out 1s;
          -moz-transition: all 0.3s ease-in-out 1s;
          -ms-transition: all 0.3s ease-in-out 1s;
          -o-transition: all 0.3s ease-in-out 1s;
          transition: all 0.3s ease-in-out 1s;

          &.shown {
            max-width: 200px;
          }
        }

        span {
          min-width: 130px;
          color: #fff;

          @media (min-width: $lg) {
            display: block;
            margin: 45px 30px;
          }
        }
      }

      .cta-line {
        height: 150px;
        border-top: 2px solid $color-main;
        border-left: 2px solid $color-main;
        width: 75px;
        position: absolute;
        bottom: 0;
        left: 100%;
        display: block;

        @media (max-width: 768px) and (orientation: landscape) {
          width: 100px;
          height: 340px;
          right: -100px;
        }

        @media (min-width: $md) {
          height: 340px;
        }

        @media (min-width: $lg) {
          height: 300px;
          max-height: 0;
          max-width: 0;
          -webkit-transition: max-height 0.5s ease-in-out 1.7s, max-width 0.5s ease-in-out 2.2s;
          -moz-transition: max-height 0.5s ease-in-out 1.7s, max-width 0.5s ease-in-out 2.2s;
          -ms-transition: max-height 0.5s ease-in-out 1.7s, max-width 0.5s ease-in-out 2.2s;
          -o-transition: max-height 0.5s ease-in-out 1.7s, max-width 0.5s ease-in-out 2.2s;
          transition: max-height 0.5s ease-in-out 1.7s, max-width 0.5s ease-in-out 2.2s;

          &.shown {
            max-height: 300px;
            max-width: 75px;
          }
        }

        @media (min-width: $xl) {
          width: 150px;
          //right: -150px;

          &.shown {
            max-width: 150px;
          }
        }
      }

      .cta-lets-talk {
        position: absolute;
        right: -60%;
        top: -25px;
        padding: 5px 10px;
        color: $color-dark-gray;
        text-decoration: none;
        background-color: #fafafa;
        border: 2px solid $color-main;

        @media (max-width: 768px) and (orientation: landscape) {
          right: -30%;
          top: -20px;
        }

        @media (min-width: 600px) and (max-width: 768px) {
          right: -30%;
          top: -15px;
        }

        @media (min-width: $lg) {
          top: -160px;
          right: -50%;

          &::before {
            content: ' ';
            position: absolute;
            display: block;
            height: 120%;
            width: 120%;
            z-index: 99;
            left: -5px;
            top: -5px;
            max-width: 120%;
            background-color: #fafafa;
          }

          &::after {
            content: ' ';
            position: absolute;
            display: block;
            height: 120%;
            width: 120%;
            left: -5px;
            right: -5px;
            top: -5px;
            z-index: 999;
            max-width: 0;
            background-color: $color-main;
          }

          &.shown {
            &::before {
              -webkit-animation: fade-button-reverse-global;
              -o-animation: fade-button-reverse-global;
              animation: fade-button-reverse-global;
              animation-duration: 1.3s;
              animation-fill-mode: forwards;
              animation-delay: 2.8s;
            }

            &::after {
              -webkit-animation: fade-button-global;
              -o-animation: fade-button-global;
              animation: fade-button-global;
              animation-duration: 0.7s;
              animation-delay: 2.5s;
            }
          }
        }

        @media (min-width: $xl) {
          font-size: 16px;
          padding: 10px 20px;
          top: -25px;
        }

        .lets-talk-arrow {
          margin-left: 40px;
          display: none;

          @media (min-width: $xl) {
            display: inline-block;
          }
        }

        .lets-talk-arrow-hover {
          margin-left: 40px;
          display: none;
        }

        &.show::before {
          border-top-color: $color-main;
          border-right-color: $color-main;
        }

        &.show::after {
          border-bottom-color: $color-main;
          border-left-color: $color-main;
        }

        &:hover {
          background-color: $color-main;
          color: $color-white;

          .lets-talk-arrow {
            margin-left: 40px;
            display: none;
          }

          .lets-talk-arrow-hover {
            margin-left: 40px;
            display: none;

            @media (min-width: $xl) {
              display: inline-block;
            }
          }
        }
      }
    }



@keyframes fade-global {
  0% {
    max-width: 0;
    left: 0;
  }

  45% {
    max-width: 100%;
    left: 0;
  }

  55% {
    max-width: 120%;
    right: 0;
  }

  100% {
    max-width: 0;
    right: 0;
  }
}

@keyframes fade-reverse-global {
  0% {
    max-width: 100%;
    right: 0;
  }

  100% {
    max-width: 0;
    right: 0;
  }
}

@keyframes fade-button-global {
  0% {
    max-width: 0;
    left: -5px;
    top: -5px;
  }

  49% {
    max-width: 100%;
    left: -5px;
    top: -5px;
  }

  50% {
    max-width: 100%;
    right: -5px;
    left: unset;
    top: -5px;
  }

  100% {
    max-width: 0;
    right: -5px;
    left: unset;
    top: -5px;
  }
}

@keyframes fade-button-reverse-global {
  0% {
    max-width: 120%;
    right: -5px;
    left: -5px;
    top: -5px;
  }

  100% {
    max-width: 0;
    right: -5px;
    left: -5px;
    top: -5px;
  }
}