@-webkit-keyframes rotate {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    50% {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  @keyframes rotate {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    50% {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  @-webkit-keyframes rotate2 {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      border-top-color: #006e57;
    }
    50% {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
      border-top-color: #00BC94;
    }
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
      border-top-color: #006e57;
    }
  }
  @keyframes rotate2 {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      border-top-color: #006e57;
    }
    50% {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
      border-top-color: #00BC94;
    }
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
      border-top-color: #006e57;
    }
  }
  * {
    box-sizing: border-box;
  }
  
  
  
  
  .loader {
    position: relative;
    margin: 75px auto;
    width: 150px;
    height: 150px;
    display: block;
    overflow: hidden;
  }
  .loader div {
    height: 100%;
  }
  
  /* loader 1 */
  .loader1, .loader1 div {
    border-radius: 50%;
    padding: 8px;
  
        
      margin: auto;
    border: 2px solid transparent;
    -webkit-animation: rotate linear 3.5s infinite;
            animation: rotate linear 3.5s infinite;
    border-top-color: #006e57;
    border-bottom-color: #00BC94;
  }
  
  
  
  div:hover {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
  }
  
  .loader, .loader * {
    will-change: transform;
    top: 40%;
  }