.loader {
  margin: -40px 0px 0px -40px;
  /* background-color: transparent;
  border-radius: 50%;
  border: 2px solid #E3E4DC; */
}
.loader:before {
  content: "";
  width: 82px;
  height: 82px;
  display: block;
  position: absolute;
  border: 2px solid #fff;
  border-radius: 50%;
  /* top: -2px; */
  /* left: -2px; */
  box-sizing: border-box;
  clip: rect(0px, 17.5px, 17.5px, 0px);
  z-index: 10;
  -webkit-animation: rotate infinite;
          animation: rotate infinite;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.loader:after {
  content: "";
  width: 82px;
  height: 82px;
  display: block;
  position: absolute;
  border: 2px solid #c1bebb;
  border-radius: 50%;
  /* top: -2px; */
  /* left: -2px; */
  box-sizing: border-box;
  clip: rect(0px, 82px, 75px, 0px);
  z-index: 9;
  -webkit-animation: rotate2 3s linear infinite;
  animation: rotate2 3s linear infinite;
}

.hexagon-container {
  position: relative;
  top: 16.5px;
  left: 20.5px;
  border-radius: 50%;
}

.hexagon {
  position: absolute;
  width: 20px;
  height: 11.5px;
  background-color: rgba(232, 52, 47, 0.8);
}
.hexagon:before {
  content: "";
  position: absolute;
  top: -5.5px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 5.75px solid rgba(232, 52, 47, 0.8);
}
.hexagon:after {
  content: "";
  position: absolute;
  top: 11.5px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 5.75px solid rgba(232, 52, 47, 0.8);
}

.hexagon.hex_1 {
  top: 0px;
  left: 0px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 0.2142857143s;
          animation-delay: 0.2142857143s;
}

.hexagon.hex_2 {
  top: 0px;
  left: 21px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 0.4285714286s;
          animation-delay: 0.4285714286s;
}

.hexagon.hex_3 {
  top: 18px;
  left: 31.5px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 0.6428571429s;
          animation-delay: 0.6428571429s;
}

.hexagon.hex_4 {
  top: 36px;
  left: 21px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 0.8571428571s;
          animation-delay: 0.8571428571s;
}

.hexagon.hex_5 {
  top: 36px;
  left: 0px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 1.0714285714s;
          animation-delay: 1.0714285714s;
}

.hexagon.hex_6 {
  top: 18px;
  left: -10.5px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 1.2857142857s;
          animation-delay: 1.2857142857s;
}

.hexagon.hex_7 {
  top: 18px;
  left: 10.5px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

@-webkit-keyframes Animasearch {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  15%, 50% {
    transform: scale(0.5);
    opacity: 0;
  }
  65% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes Animasearch {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  15%, 50% {
    transform: scale(0.5);
    opacity: 0;
  }
  65% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes rotate {
  0% {
    transform: rotate(0);
    clip: rect(0px, 35px, 35px, 0px);
  }
  50% {
    clip: rect(0px, 40px, 40px, 0px);
  }
  100% {
    transform: rotate(360deg);
    clip: rect(0px, 35px, 35px, 0px);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
    clip: rect(0px, 35px, 35px, 0px);
  }
  50% {
    clip: rect(0px, 40px, 40px, 0px);
  }
  100% {
    transform: rotate(360deg);
    clip: rect(0px, 35px, 35px, 0px);
  }
}
@-webkit-keyframes rotate2 {
  0% {
    transform: rotate(0deg);
    clip: rect(0px, 164px, 150px, 0px);
  }
  50% {
    clip: rect(0px, 164px, 0px, 0px);
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(720deg);
    clip: rect(0px, 164px, 150px, 0px);
  }
}
@keyframes rotate2 {
  0% {
    transform: rotate(0deg);
    clip: rect(0px, 164px, 150px, 0px);
  }
  50% {
    clip: rect(0px, 164px, 0px, 0px);
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(720deg);
    clip: rect(0px, 164px, 150px, 0px);
  }
}
@-webkit-keyframes rotate3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* .view-button {
  cursor: pointer;
  display: flex;
  width: 15vw;
  height: 15vh;
  border: none;
  background-color: transparent;
  align-items: center;
  justify-content: center;
  position: relative;
  position: fixed;
  top: 0;
} */



/* .loader {
  margin: -80px 0px 0px -80px;
}
.loader:before {
  content: "";
  width: 164px;
  height: 164px;
  display: block;
  position: absolute;
  border: 2px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  clip: rect(0px, 35px, 35px, 0px);
  z-index: 10;
  -webkit-animation: rotate infinite;
          animation: rotate infinite;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.loader:after {
  content: "";
  width: 164px;
  height: 164px;
  display: block;
  position: absolute;
  border: 2px solid #c1bebb;
  border-radius: 50%;
  box-sizing: border-box;
  clip: rect(0px, 164px, 150px, 0px);
  z-index: 9;
  -webkit-animation: rotate2 3s linear infinite;
  animation: rotate2 3s linear infinite;
}

.hexagon-container {
  position: relative;
  top: 33px;
  left: 41px;
  border-radius: 50%;
}

.hexagon {
  position: absolute;
  width: 40px;
  height: 23px;
  background-color: rgba(232, 52, 47, 0.8);
}
.hexagon:before {
  content: "";
  position: absolute;
  top: -11px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 11.5px solid rgba(232, 52, 47, 0.8);
}
.hexagon:after {
  content: "";
  position: absolute;
  top: 23px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 11.5px solid rgba(232, 52, 47, 0.8);
}

.hexagon.hex_1 {
  top: 0px;
  left: 0px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 0.2142857143s;
          animation-delay: 0.2142857143s;
}

.hexagon.hex_2 {
  top: 0px;
  left: 42px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 0.4285714286s;
          animation-delay: 0.4285714286s;
}

.hexagon.hex_3 {
  top: 36px;
  left: 63px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 0.6428571429s;
          animation-delay: 0.6428571429s;
}

.hexagon.hex_4 {
  top: 72px;
  left: 42px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 0.8571428571s;
          animation-delay: 0.8571428571s;
}

.hexagon.hex_5 {
  top: 72px;
  left: 0px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 1.0714285714s;
          animation-delay: 1.0714285714s;
}

.hexagon.hex_6 {
  top: 36px;
  left: -21px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 1.2857142857s;
          animation-delay: 1.2857142857s;
}

.hexagon.hex_7 {
  top: 36px;
  left: 21px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

@-webkit-keyframes Animasearch {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  15%, 50% {
    transform: scale(0.5);
    opacity: 0;
  }
  65% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes Animasearch {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  15%, 50% {
    transform: scale(0.5);
    opacity: 0;
  }
  65% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes rotate {
  0% {
    transform: rotate(0);
    clip: rect(0px, 35px, 35px, 0px);
  }
  50% {
    clip: rect(0px, 40px, 40px, 0px);
  }
  100% {
    transform: rotate(360deg);
    clip: rect(0px, 35px, 35px, 0px);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
    clip: rect(0px, 35px, 35px, 0px);
  }
  50% {
    clip: rect(0px, 40px, 40px, 0px);
  }
  100% {
    transform: rotate(360deg);
    clip: rect(0px, 35px, 35px, 0px);
  }
}
@-webkit-keyframes rotate2 {
  0% {
    transform: rotate(0deg);
    clip: rect(0px, 164px, 150px, 0px);
  }
  50% {
    clip: rect(0px, 164px, 0px, 0px);
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(720deg);
    clip: rect(0px, 164px, 150px, 0px);
  }
}
@keyframes rotate2 {
  0% {
    transform: rotate(0deg);
    clip: rect(0px, 164px, 150px, 0px);
  }
  50% {
    clip: rect(0px, 164px, 0px, 0px);
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(720deg);
    clip: rect(0px, 164px, 150px, 0px);
  }
}
@-webkit-keyframes rotate3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  } */
/*# sourceMappingURL=opendoor2.css.map */

/* responsive */

@media screen and (max-width: 550px) {
  .loader {
    margin: -20px 0px 0px -20px;
    /* background-color: transparent;
    border-radius: 50%;
    border: 2px solid #E3E4DC; */
  }

  
.loader:before {
  content: "";
  width: 40.5px;
  height: 40.5px;
  display: block;
  position: absolute;
  border: 2px solid #fff;
  border-radius: 50%;
  /* top: -2px; */
  /* left: -2px; */
  box-sizing: border-box;
  clip: rect(0px,35px, 35px, 0px);
  z-index: 10;
  -webkit-animation: rotate infinite;
          animation: rotate infinite;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.loader:after {
  content: "";
  width: 40.5px;
  height: 40.5px;
  display: block;
  position: absolute;
  border: 2px solid #c1bebb;
  border-radius: 50%;
  /* top: -2px; */
  /* left: -2px; */
  box-sizing: border-box;
  clip: rect(0px, 164px, 150px, 0px);
  z-index: 9;
  -webkit-animation: rotate2 3s linear infinite;
  animation: rotate2 3s linear infinite;
}

.hexagon-container {
  position: relative;
  top: 9px;
  left: 10.25px;
  border-radius: 50%;
}

.hexagon {
  position: absolute;
  width: 10px;
  height: 5.75px;
  background-color: rgba(232, 52, 47, 0.8);
}
.hexagon:before {
  content: "";
  position: absolute;
  top: -2.75px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 2.875px solid rgba(232, 52, 47, 0.8);
}
.hexagon:after {
  content: "";
  position: absolute;
  top: 5.75px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 2.875px solid rgba(232, 52, 47, 0.8);
}

.hexagon.hex_1 {
  top: 0px;
  left: 0px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 0.2142857143s;
          animation-delay: 0.2142857143s;
}

.hexagon.hex_2 {
  top: 0px;
  left: 10.5px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 0.4285714286s;
          animation-delay: 0.4285714286s;
}

.hexagon.hex_3 {
  top: 9px;
  left: 15.75px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 0.6428571429s;
          animation-delay: 0.6428571429s;
}

.hexagon.hex_4 {
  top: 18px;
  left: 10.5px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 0.8571428571s;
          animation-delay: 0.8571428571s;
}

.hexagon.hex_5 {
  top: 18px;
  left: 0px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 1.0714285714s;
          animation-delay: 1.0714285714s;
}

.hexagon.hex_6 {
  top: 9px;
  left: -5.25px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 1.2857142857s;
          animation-delay: 1.2857142857s;
}

.hexagon.hex_7 {
  top: 9px;
  left: 5.25px;
  -webkit-animation: Animasearch 3s ease-in-out infinite;
          animation: Animasearch 3s ease-in-out infinite;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

}
@media  screen and (min-width:551px) and (max-width:820px){
  .loader {
    margin: -40px 0px 0px -40px;
    /* background-color: transparent;
    border-radius: 50%;
    border: 2px solid #E3E4DC; */
  }
  .loader:before {
    content: "";
    width: 82px;
    height: 82px;
    display: block;
    position: absolute;
    border: 2px solid #fff;
    border-radius: 50%;
    /* top: -2px; */
    /* left: -2px; */
    box-sizing: border-box;
    clip: rect(0px, 17.5px, 17.5px, 0px);
    z-index: 10;
    -webkit-animation: rotate infinite;
            animation: rotate infinite;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
  }
  .loader:after {
    content: "";
    width: 82px;
    height: 82px;
    display: block;
    position: absolute;
    border: 2px solid #c1bebb;
    border-radius: 50%;
    /* top: -2px; */
    /* left: -2px; */
    box-sizing: border-box;
    clip: rect(0px, 82px, 75px, 0px);
    z-index: 9;
    -webkit-animation: rotate2 3s linear infinite;
    animation: rotate2 3s linear infinite;
  }
  
  .hexagon-container {
    position: relative;
    top: 16.5px;
    left: 20.5px;
    border-radius: 50%;
  }
  
  .hexagon {
    position: absolute;
    width: 20px;
    height: 11.5px;
    background-color: rgba(232, 52, 47, 0.8);
  }
  .hexagon:before {
    content: "";
    position: absolute;
    top: -5.5px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 5.75px solid rgba(232, 52, 47, 0.8);
  }
  .hexagon:after {
    content: "";
    position: absolute;
    top: 11.5px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 5.75px solid rgba(232, 52, 47, 0.8);
  }
  
  .hexagon.hex_1 {
    top: 0px;
    left: 0px;
    -webkit-animation: Animasearch 3s ease-in-out infinite;
            animation: Animasearch 3s ease-in-out infinite;
    -webkit-animation-delay: 0.2142857143s;
            animation-delay: 0.2142857143s;
  }
  
  .hexagon.hex_2 {
    top: 0px;
    left: 21px;
    -webkit-animation: Animasearch 3s ease-in-out infinite;
            animation: Animasearch 3s ease-in-out infinite;
    -webkit-animation-delay: 0.4285714286s;
            animation-delay: 0.4285714286s;
  }
  
  .hexagon.hex_3 {
    top: 18px;
    left: 31.5px;
    -webkit-animation: Animasearch 3s ease-in-out infinite;
            animation: Animasearch 3s ease-in-out infinite;
    -webkit-animation-delay: 0.6428571429s;
            animation-delay: 0.6428571429s;
  }
  
  .hexagon.hex_4 {
    top: 36px;
    left: 21px;
    -webkit-animation: Animasearch 3s ease-in-out infinite;
            animation: Animasearch 3s ease-in-out infinite;
    -webkit-animation-delay: 0.8571428571s;
            animation-delay: 0.8571428571s;
  }
  
  .hexagon.hex_5 {
    top: 36px;
    left: 0px;
    -webkit-animation: Animasearch 3s ease-in-out infinite;
            animation: Animasearch 3s ease-in-out infinite;
    -webkit-animation-delay: 1.0714285714s;
            animation-delay: 1.0714285714s;
  }
  
  .hexagon.hex_6 {
    top: 18px;
    left: -10.5px;
    -webkit-animation: Animasearch 3s ease-in-out infinite;
            animation: Animasearch 3s ease-in-out infinite;
    -webkit-animation-delay: 1.2857142857s;
            animation-delay: 1.2857142857s;
  }
  
  .hexagon.hex_7 {
    top: 18px;
    left: 10.5px;
    -webkit-animation: Animasearch 3s ease-in-out infinite;
            animation: Animasearch 3s ease-in-out infinite;
    -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
  }
  
  @-webkit-keyframes Animasearch {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    15%, 50% {
      transform: scale(0.5);
      opacity: 0;
    }
    65% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes Animasearch {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    15%, 50% {
      transform: scale(0.5);
      opacity: 0;
    }
    65% {
      transform: scale(1);
      opacity: 1;
    }
  }
  @-webkit-keyframes rotate {
    0% {
      transform: rotate(0);
      clip: rect(0px, 35px, 35px, 0px);
    }
    50% {
      clip: rect(0px, 40px, 40px, 0px);
    }
    100% {
      transform: rotate(360deg);
      clip: rect(0px, 35px, 35px, 0px);
    }
  }
  @keyframes rotate {
    0% {
      transform: rotate(0);
      clip: rect(0px, 35px, 35px, 0px);
    }
    50% {
      clip: rect(0px, 40px, 40px, 0px);
    }
    100% {
      transform: rotate(360deg);
      clip: rect(0px, 35px, 35px, 0px);
    }
  }
  @-webkit-keyframes rotate2 {
    0% {
      transform: rotate(0deg);
      clip: rect(0px, 164px, 150px, 0px);
    }
    50% {
      clip: rect(0px, 164px, 0px, 0px);
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(720deg);
      clip: rect(0px, 164px, 150px, 0px);
    }
  }
  @keyframes rotate2 {
    0% {
      transform: rotate(0deg);
      clip: rect(0px, 164px, 150px, 0px);
    }
    50% {
      clip: rect(0px, 164px, 0px, 0px);
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(720deg);
      clip: rect(0px, 164px, 150px, 0px);
    }
  }
  @-webkit-keyframes rotate3 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes rotate3 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .view-button {
    cursor: pointer;
    display: flex;
    width: 15vw;
    height: 15vh;
    border: none;
    background-color: transparent;
    align-items: center;
    justify-content: center;
    position: relative;
    position: fixed;
    top: 0;
}
}