.circle {
    border-radius: 50%;
    background-color: white;
    position: absolute;
    height: 150px;
    width: 150px;
    top: 50%;
    left: 92px;
    -webkit-transition: height 5s ease, width 5s ease;
    transition: height 5s ease, width 5s ease;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 0.5; }
    .circle:before, .circle:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 50%;
      border: 1px solid white; }
    .circle:before {
      -webkit-animation: ripple 2s linear infinite;
              animation: ripple 2s linear infinite; }
    .circle:after {
      -webkit-animation: ripple 2s linear 1s infinite;
              animation: ripple 2s linear 1s infinite; }
    .circle.b-round {
      height: 230px;
      width: 230px;
      left: 50%; }

      .animation-circle-inverse i {
        background: rgba(66, 145, 184, 0.15);
        right: 0;
        -webkit-box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11);
                box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11);
        position: absolute;
        height: 100%;
        width: 100%;
        border-radius: 100%;
        opacity: 0.3;
        top: 0;
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation: ripple1 3s linear infinite;
                animation: ripple1 3s linear infinite; }
        .animation-circle-inverse i:nth-child(2) {
          -webkit-animation: ripple2 3s linear infinite;
                  animation: ripple2 3s linear infinite; }
        .animation-circle-inverse i:nth-child(3) {
          -webkit-animation: ripple3 3s linear infinite;
                  animation: ripple3 3s linear infinite; }

                  
@-webkit-keyframes ripple2 {
    0% {
      -webkit-transform: scale(1.4);
              transform: scale(1.4); }
    100% {
      -webkit-transform: scale(1.6);
              transform: scale(1.6); } }
  
  @keyframes ripple2 {
    0% {
      -webkit-transform: scale(1.4);
              transform: scale(1.4); }
    100% {
      -webkit-transform: scale(1.6);
              transform: scale(1.6); } }
  
  @-webkit-keyframes ripple3 {
    0% {
      -webkit-transform: scale(1.2);
              transform: scale(1.2); }
    100% {
      -webkit-transform: scale(1.4);
              transform: scale(1.4); } }
  
  @keyframes ripple3 {
    0% {
      -webkit-transform: scale(1.2);
              transform: scale(1.2); }
    100% {
      -webkit-transform: scale(1.4);
              transform: scale(1.4); } }
  
  @-webkit-keyframes ripple {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1); }
    75% {
      -webkit-transform: scale(1.75);
              transform: scale(1.75);
      opacity: 0.4; }
    100% {
      -webkit-transform: scale(2);
              transform: scale(2);
      opacity: 0; } }
  
  @keyframes ripple {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1); }
    75% {
      -webkit-transform: scale(1.75);
              transform: scale(1.75);
      opacity: 0.4; }
    100% {
      -webkit-transform: scale(2);
              transform: scale(2);
      opacity: 0; } }
      .coming-soon .object {
        position: absolute;
        -webkit-animation: sway 2.4s infinite;
                animation: sway 2.4s infinite;
        -webkit-animation-timing-function: ease-in-out;
                animation-timing-function: ease-in-out;
        -webkit-transform-origin: top;
                transform-origin: top;
        left: calc(10% + (14 - 10) * ((100vw - 320px) / (1920 - 320)));
        height: 5%;
        z-index: 999;
        text-transform: uppercase; }
        .coming-soon .object .object-shape {
          width: calc(60px + (100 - 60) * ((100vw - 320px) / (1920 - 320)));
          height: calc(60px + (100 - 60) * ((100vw - 320px) / (1920 - 320)));
          border-radius: 50%;
          display: block;
          background-color: white;
          margin: 0 auto;
          position: relative;
          color: black;
          text-align: center;
          padding-top: calc(14px + (25 - 14) * ((100vw - 320px) / (1920 - 320)));
          font-weight: 800;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1920 - 320))); }
          .coming-soon .object .object-shape span {
            font-size: calc(12px + (22 - 12) * ((100vw - 320px) / (1920 - 320)));
            color: black; }
        .coming-soon .object .object-rope {
          height: 100%;
          width: 5px;
          background-color: white;
          content: "";
          display: block;
          margin-left: 50%; }
      .coming-soon.travel {
        background-color: rgba(66, 145, 184, 0.05); }
        .coming-soon.travel svg {
          position: absolute;
          top: 0;
          width: 1920px;
          height: 1600px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          left: 50%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%); }
        .coming-soon.travel .coming-soon-detail {
          position: absolute;
          -webkit-box-align: end;
              -ms-flex-align: end;
                  align-items: flex-end;
          padding-bottom: 60px;
          z-index: 1; }
          .coming-soon.travel .coming-soon-detail .logo img {
            -webkit-filter: invert(1);
                    filter: invert(1); }
          .coming-soon.travel .coming-soon-detail h2 {
            color: black; }
          .coming-soon.travel .coming-soon-detail form label {
            color: black; }
      .coming-soon.ripple-effect canvas {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1; }
        .circle:before {
            -webkit-animation: ripple 2s linear infinite;
                    animation: ripple 2s linear infinite; }
          .circle:after {
            -webkit-animation: ripple 2s linear 1s infinite;
                    animation: ripple 2s linear 1s infinite; }
                    -webkit-animation: ripple1 3s linear infinite;
                    animation: ripple1 3s linear infinite; }
            .animation-circle-inverse i:nth-child(2) {
              -webkit-animation: ripple2 3s linear infinite;
                      animation: ripple2 3s linear infinite; }
            .animation-circle-inverse i:nth-child(3) {
              -webkit-animation: ripple3 3s linear infinite;
                      animation: ripple3 3s linear infinite; }  

                      
@-webkit-keyframes ripple2 {
    0% {
      -webkit-transform: scale(1.4);
              transform: scale(1.4); }
    100% {
      -webkit-transform: scale(1.6);
              transform: scale(1.6); } }
  
  @keyframes ripple2 {
    0% {
      -webkit-transform: scale(1.4);
              transform: scale(1.4); }
    100% {
      -webkit-transform: scale(1.6);
              transform: scale(1.6); } }
  
  @-webkit-keyframes ripple3 {
    0% {
      -webkit-transform: scale(1.2);
              transform: scale(1.2); }
    100% {
      -webkit-transform: scale(1.4);
              transform: scale(1.4); } }
  
  @keyframes ripple3 {
    0% {
      -webkit-transform: scale(1.2);
              transform: scale(1.2); }
    100% {
      -webkit-transform: scale(1.4);
              transform: scale(1.4); } }
  
  @-webkit-keyframes ripple {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1); }
    75% {
      -webkit-transform: scale(1.75);
              transform: scale(1.75);
      opacity: 0.4; }
    100% {
      -webkit-transform: scale(2);
              transform: scale(2);
      opacity: 0; } }
  
  @keyframes ripple {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1); }
    75% {
      -webkit-transform: scale(1.75);
              transform: scale(1.75);
      opacity: 0.4; }
    100% {
      -webkit-transform: scale(2);
              transform: scale(2);
      opacity: 0; } }