* {
    box-sizing: border-box; /* 1 */
  }
  
  .loader {
    background: rgba(0, 0, 0, 0.8);
    background: radial-gradient(rgba(2, 2, 2, 0.5),rgba(0,0,0,0.5));
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
    }
  
  .wave-circle {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    
    width:160px;
    height:160px;
    background: white;
    border-radius: 100%;
    padding: 5px;
    /* position: relative; */
    overflow:hidden;
    -webkit-animation: pulse 4s infinite ease-in-out;
    -o-animation: pulse 4s infinite ease-in-out;
    -ms-animation: pulse 4s infinite ease-in-out;
    -moz-animation: pulse 4s infinite ease-in-out;
    animation: pulse 4s infinite ease-in-out;
  }
  
  .wave-fill {
    height: 150px;
    width: 150px;
    background: #fff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='112' height='112' viewBox='0 0 112 112' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='56' cy='56' r='56' fill='black'/%3E%3C/svg%3E%0A");
    -webkit-mask-size: contain;
    -webkit-mask-position: bottom;
    -webkit-mask-repeat: no-repeat;
  }
  span {
    display: block;
    width: 100%;
  }
  
  .wave {
    background-image: url("data:image/svg+xml,%3Csvg width='338' height='269' viewBox='0 0 338 269' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M118.469 63.0606C54.897 63.7838 13.8578 41.9455 5.06899 36.7914L5.0628 36.7792C4.00988 36.0559 2.95076 35.3205 1.90403 34.5668C2.36855 35.0409 16.7688 50.2481 45.7242 62.1428C81.7961 76.9306 146.978 80.3039 201.848 62.2704C283.363 35.4846 330.28 73.7801 337.997 80.709L338 268.388C338 268.388 206.834 269 171.09 269C129.729 269 0 267.977 0 267.977C0 267.977 0.00258108 97.9879 0.00258108 45.8537C0.00258108 40.9305 0 36.7062 0 31.8853C9.48249 37.7263 99.4603 89.1535 198.416 35.1199C272.133 -5.0983 300.101 -7.29665 337.997 11.0813V25.4497C323.839 15.9801 303.832 9.9022 283.517 11.0813C259.851 12.4489 238.205 21.0493 233.169 23.1766C243.543 19.1226 273.558 15.4393 289.377 16.977C317.812 19.7243 332.584 31.2824 337.997 35.6829V41.8228V45.9161C330.045 40.4094 310.001 23.0307 262.347 25.8084C203.055 29.2607 180.405 62.3373 118.469 63.0606Z' fill='%23062465'/%3E%3Cpath d='M116.951 66.5858C171.233 66.3548 181.049 49.5491 240.961 36.0499H240.986C289.265 25.1702 328.967 49.1535 337.997 56.1493V68.4292C327.79 60.1083 282.954 28.8899 207.1 53.1595C149.301 71.6427 85.9768 77.04 30.7541 51.4272C50.8897 59.8149 79.5354 66.756 116.951 66.5858Z' fill='%23062465'/%3E%3C/svg%3E%0A");
    height: 180px;
    background-size: 120%;
    background-position:bottom left;
    animation: wave 4s cubic-bezier(.17,.67,.83,.67) infinite alternate;
  }
  .deep-water {
    background: #062465;
    height: 100px;
  }
  
  .loading-text {
    text-transform: uppercase;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.3em;
    font-family: ff-real-headline-pro,"Real Head Pro",sans-serif;
    position: absolute;
    width: 100px;
    left: 50%;
    margin-left: -50px;
    text-align: center;
    display: block;
    bottom: 28px;
    color: white;
    z-index: 100;
    opacity: 0.8;
  }
  
  @keyframes wave {
    from {
      background-position: 0px 0;
    }
    to {
      background-position: -24px 0;
    }
  }
  .water {
    animation: water 2s ease infinite alternate;
  }
  @keyframes water {
    from {
      transform: translateY(20%);
    }
    to {
      transform: translateY(2%);
    }
  }
  
  @-webkit-keyframes pulse {
      0% { -webkit-transform: scale(0.90); }
      50% { -webkit-transform: scale(1);  }
      100% { -webkit-transform: scale(0.90);}
  }
  
  @keyframes pulse {
      0% { transform: scale(0.90);  }
      50% { transform: scale(1);}
      100% { transform: scale(0.90);  }
  }