.hv-72 {
  height: 72vh;
}

.hv-74 {
  height: 74vh;
}

.hv-76 {
  height: 76vh;
}

.hv-78 {
  height: 78vh;
}

a:link, a:hover, a:active {
  text-decoration: none;
}

.map-custom {
    margin: 10px;
    border-radius: 10px;
}

.circlecard {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
    transition: .2s;
    border-radius: 50%; 
    border-width: 4px;
    &:hover {
        transform: translateY(-5px);
    }
}

/* Shake */
@keyframes shake {
    0% {
      transform: rotateZ(0);
    }
    10% {
      transform: rotateZ(-30deg);
    }
    20% {
      transform: rotateZ(15deg);
    }
    30% {
      transform: rotateZ(-10deg);
    }
    40% {
      transform: rotateZ(7.5deg);
    }
    50% {
      transform: rotateZ(-6deg);
    }
    60% {
      transform: rotateZ(5deg);
    }
    70% {
      transform: rotateZ(-4.28571deg);
    }
    80% {
      transform: rotateZ(3.75deg);
    }
    90% {
      transform: rotateZ(-3.33333deg);
    }
    100% {
      transform: rotateZ(0);
    }
  }

  .phonewrap:hover {
    animation: shake 1200ms;
  }

  /* Wobble Vertical */
@keyframes wobble-vertical {
    16.65% {
      transform: translateY(8px);
    }
    33.3% {
      transform: translateY(-6px);
    }
    49.95% {
      transform: translateY(4px);
    }
    66.6% {
      transform: translateY(-2px);
    }
    83.25% {
      transform: translateY(1px);
    }
    100% {
      transform: translateY(0);
    }
  }
  .wobble-vertical {
    display: inline-block;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  }
  .wobble-vertical:hover {
    animation-name: wobble-vertical;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
  }

  /* galating */
  @keyframes gelatine {
  
    0%, 100% {
      transform: scale(1, 1);
    }
    25% {
      transform: scale(0.9, 1.1);
    }
    50% {
      transform: scale(1.1, 0.9);
    }
    75% {
      transform: scale(0.95, 1.05);
    }
  }

  .galating:hover {
    transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
    animation: gelatine 0.5s 1;
  }

  /* morphing */
  .animatecontact {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
    animation: morphing 10s infinite;
    overflow: hidden;
  }
  
  @-moz-keyframes morphing {
    0% {
      border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
      box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
    }
    25% {
      border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
    }
    50% {
      border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
      box-shadow: -10px -5px 50px rgba(0,0,0,0.2);
    }
    75% {
      border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
    }
  }
  
  @-webkit-keyframes morphing {
    0% {
      border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
      box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
    }
    25% {
      border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
    }
    50% {
      border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
      box-shadow: -10px -5px 50px rgba(0,0,0,0.2);
    }
    75% {
      border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
    }
  }
  
  @-o-keyframes morphing {
    0% {
      border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
      box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
    }
    25% {
      border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
    }
    50% {
      border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
      box-shadow: -10px -5px 50px rgba(0,0,0,0.2);
    }
    75% {
      border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
    }
  }
  
  @keyframes morphing {
    0% {
      border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
      box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
    }
    25% {
      border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
    }
    50% {
      border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
      box-shadow: -10px -5px 50px rgba(0,0,0,0.2);
    }
    75% {
      border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
    }
  }

/* form */
  /*Modals*/
    /* The Modal (background) */
   .modal1, .modal2, .modal3 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    z-index: 999;
    
  }
  
  /* Modal Content */
  .modal-content1, .modal-content2, .modal-content3 {
    position: relative;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: fit-content;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    border-radius: 10px;
  }

  @media (max-width: 600px) {
    .modal-content1, .modal-content2, .modal-content3 {
      
      width: 100%;  
      
    }


 
   }


  

  /* Add Animation */
  @-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
  }
  
  @keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
  }
  
  /* The Close Button */
  .close1, .close2, .close3 {
    float: right;
    font-size: 20px;
    font-weight: bold;
    padding-right: 10px;
  }
  
  .close1:hover, .close1:focus, 
  .close2:hover, .close2:focus,
  .close3:focus, .close3:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  
  .modal-header1, .modal-header2, .modal-header3 {
      padding: 2px;
  }