@keyframes ldr-in {
    0% { transform: rotate(0deg);  box-shadow: 0 4px 0 0 #fdfdfd;}
    25% { transform: rotate(90deg);  box-shadow: 0 4px 0 0 #ff3a6d;}
    50% { transform: rotate(180deg); box-shadow: 0 4px 0 0 #fdfdfd; }
    70% { transform: rotate(2700deg); box-shadow: 0 4px 0 0 #ff3a6d;; }
    100% { transform: rotate(360deg); box-shadow: 0 4px 0 0 #fdfdfd; }
  }
  .ldr-in div {
    position: absolute;
    animation: ldr-in 1s linear infinite;
    width: 160px;
    height: 160px;
    top: 20px;
    left: 20px;
    border-radius: 50%;
    box-shadow: 0 4px 0 0 #ff3a6d;
    transform-origin: 80px 82px;
  }
  .ldr {
    top: calc( 50% - 100px );
    left: calc( 50% - 100px );
    z-index: 100;
    position: absolute;
    width: 200px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
  }
  .ldr-in {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0; /* see note above */
  }
  .ldr-in div { box-sizing: content-box; }

  .hide{
    display: none;
  }

.overlay-inner{   
-webkit-filter: blur(100px); 
-moz-filter: blur(100px);
-o-filter: blur(100px);
 -ms-filter: blur(100px); 
-webkit-transition: .1s -webkit-filter linear;
-moz-transition: .1s -moz-filter linear;
-o-transition: .1s -o-filter linear;
transition: .1s filter linear;
 }


.overlay-color{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  /* filter: blur(100px); */
  bottom: 0;
  background-color: #ff3a6d;
  cursor: pointer;
}