@font-face {
    font-family: Hassan-LT-Light;
    src: url("../font/Fontspring-DEMO-avionic-bold.otf");
  }
  

  body{
    background-color: black !important;
  }

  .waviy {
    position: relative;
    -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
    font-size: 60px;
  }
  .waviy span {
    font-family: Hassan-LT-Light !important;
    position: relative;
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    animation: waviy 1s infinite;
    animation-delay: calc(.1s * var(--i));
    
  }
  @keyframes waviy {
    0%,40%,100% {
      transform: translateY(0)
    }
    20% {
      transform: translateY(-20px)
    }
  }



  /* Base Styling */

.phone {
    float: right;
    height: 32px;
    line-height: 32px;
    font-size: 25px;
    font-weight: bold;
    color: #ffffff;
    margin: 33px 0 -7px -16px;
  }
  .phone svg {
    width: 72px;
    height: 46px;
    float: left;
    margin-top: -15px;
    margin-right: 8px;
  }
  .phone svg path {
    fill:#f5831f;
  }
  .phone svg path:nth-child(2) {
    -webkit-animation: header-phone 1s infinite cubic-bezier(.1, .57, .5, 1);
    animation: header-phone 1s infinite cubic-bezier(.1, .57, .5, 1);
  }
  .phone svg path:nth-child(3) {
    -webkit-animation:header-phone2 1s infinite cubic-bezier(.1, .57, .5, 1);
    animation:header-phone2 1s infinite cubic-bezier(.1, .57, .5, 1);
  }
  
  
  
  
  /* Animate phone */
  
  @-webkit-keyframes header-phone {
    0%,30% {opacity:0; -webkit-transform:translate3d(-20px, 20px, 0); transform:translate3d(-20px, 20px, 0)}
    80% {opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)}
    100%{opacity:0}}
  @keyframes header-phone {
    0%,30%{opacity:0; -webkit-transform:translate3d(-20px, 20px, 0); transform:translate3d(-20px, 20px, 0)}
    80%{opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)}
    100%{opacity:0}}
  @-webkit-keyframes header-phone2 {
    0%{opacity:0; -webkit-transform:translate3d(-20px, 20px, 0); transform:translate3d(-20px, 20px, 0)}
    70%,90%{opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)}
    100%{opacity:0}}
  @keyframes header-phone2 {
    0%{opacity:0; -webkit-transform:translate3d(-20px, 20px, 0); transform:translate3d(-20px, 20px, 0)}
    70%,90%{opacity:1; -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)}
    100%{opacity:0}}
    .contact{
        margin-top: 8rem;
    }

    *, *:before, *:after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
   }
    .pin {
          /* position: absolute; */
    /* left: 44%; */
    /* top: 78%; */
    margin-left: 35px;
    margin-top: -18px;
    width: 52px;
    height: 129px;
    overflow: visible;
   }
    .pin__group {
        transform-origin: 30px 30px;
        animation: group-anim 8s 1s infinite;
   }
    .pin__grayGroup {
        animation: gray-anim 8s 1s infinite;
   }
    .pin__square {
        stroke: #b8b8b8;
        stroke-dasharray: 240, 240;
        stroke-dashoffset: 240;
        animation: square-anim 8s 1s infinite;
   }
    .pin__line {
        stroke: #b8b8b8;
        stroke-dasharray: 60, 60;
        stroke-dashoffset: 60;
   }
    .pin__line-1 {
        animation: line-anim 8s 0.6s infinite;
   }
    .pin__line-2 {
        animation: line-anim 8s 0.8s infinite;
   }
    .pin__line-3 {
        animation: line-anim 8s 1s infinite;
   }
    .pin__circleBig {
        stroke: #b8b8b8;
        stroke-dasharray: 188.522, 188.522;
        stroke-dashoffset: 188.522;
        animation: bigCircle-anim 8s 1s infinite;
   }
    .pin__circleSmall {
        stroke: #b8b8b8;
        stroke-dasharray: 94.261, 94.261;
        stroke-dashoffset: 94.261;
        animation: smallCircle-anim 8s 1s infinite;
   }
    .pin__outer {
        stroke: #f5831f;
        fill: transparent;
        stroke-dasharray: 201.391, 201.391;
        stroke-dashoffset: 201.391;
        animation: outer-anim 8s 1s infinite;
   }
    .pin__inner {
        stroke: #f5831f;
        fill: transparent;
        stroke-dasharray: 94.261, 94.261;
        stroke-dashoffset: 94.261;
        animation: inner-anim 8s 1s infinite;
   }
    @keyframes square-anim {
        15% {
            stroke-dashoffset: 0;
       }
        100% {
            stroke-dashoffset: 0;
       }
   }
    @keyframes line-anim {
        23% {
            stroke-dashoffset: 60;
       }
        30% {
            stroke-dashoffset: 0;
       }
        100% {
            stroke-dashoffset: 0;
       }
   }
    @keyframes bigCircle-anim {
        30% {
            stroke-dashoffset: 188.522;
       }
        43% {
            stroke-dashoffset: 0;
       }
        100% {
            stroke-dashoffset: 0;
       }
   }
    @keyframes smallCircle-anim {
        43% {
            stroke-dashoffset: 94.261;
       }
        53% {
            stroke-dashoffset: 0;
       }
        100% {
            stroke-dashoffset: 0;
       }
   }
    @keyframes group-anim {
        53% {
            transform: rotate(0);
       }
        61% {
            transform: rotate(45deg);
       }
        94% {
            transform: rotate(45deg);
            opacity: 1;
       }
        100% {
            transform: rotate(45deg);
            opacity: 0;
       }
   }
    @keyframes outer-anim {
        61% {
            stroke-dashoffset: 201.391;
       }
        71% {
            stroke-dashoffset: 0;
       }
        79% {
            stroke-dashoffset: 0;
            fill: transparent;
       }
        94% {
            stroke-dashoffset: 0;
            fill: #f5831f;
       }
        100% {
            stroke-dashoffset: 0;
            fill: #f5831f;
       }
   }
    @keyframes inner-anim {
        71% {
            stroke-dashoffset: 94.261;
       }
        79% {
            stroke-dashoffset: 0;
            fill: transparent;
       }
        94% {
            stroke-dashoffset: 0;
            fill: white;
       }
        100% {
            stroke-dashoffset: 0;
            fill: white;
       }
   }
    @keyframes gray-anim {
        53% {
            opacity: 1;
       }
        79% {
            opacity: 0.2;
       }
        94% {
            opacity: 0;
       }
        100% {
            opacity: 0;
       }
   }
    .other {
        position: absolute;
        left: 0;
        bottom: 0.5rem;
        width: 100%;
        text-align: right;
   }
    .other__link {
        font-size: 1.3rem;
        margin: 0 1rem;
   }
    .location{
        font-size: 25px;
    }
    a{
        color: #ffffff !important;
    }

    @media screen and (max-width: 600px) {
       .logoImage{
        max-width: 250px !important;
       }
       .waviy {
        position: relative;
        -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
        font-size: 24px;
    }
    .phone svg {
        width: 33px;
        height: 46px;
        /* float: left; */
        margin-top: -15px;
        margin-right: 8px;
    }
    .phone {
        float: right;
        height: 32px;
        line-height: 32px;
        font-size: 26px;
        font-weight: bold;
        color: #ffffff;
        margin: 33px 0 33px -12px;
    }
    .pin{
            /* position: absolute; */
    /* left: 44%; */
    /* top: 78%; */
    margin-left: -27px;
    margin-top: -18px;
    width: 41px;
    height: 129px;
    overflow: visible;
    }
      }