html.is-loading [id^="span-"]{
  opacity:0;
  transform:translateY(20px) scale(1.2);
  letter-spacing:0.1em;
  display:inline-block;
  visibility:hidden;
}

#wrapper-diamond{
  opacity:0;
  transform:scale(1.5) translateY(100px);
  position:relative;
  z-index:10;
}

#fountain-wrapper{
  position:relative;
}

#water-flow{
  position:absolute;
  top:49%;
  left:50%;
  transform:translateX(-50%);
  width:11%;
  height:21%;
  pointer-events:none;
  z-index:1;
  opacity:0.8;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,170,255,0.2) 0px,
    rgba(0,170,255,0.3) 12px,
    rgba(0,170,255,0.2) 24px
  );
  background-size:100% 200%;
  mix-blend-mode:screen;
  mask-image:radial-gradient(
    ellipse closest-side,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0)
  );
  -webkit-mask-image:radial-gradient(
    ellipse closest-side,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0)
  );
}

@media (orientation:landscape) and (max-width:1024px){
  #diamond-section,
  #fountain{
    display:none !important;
  }
}

@media (max-height:1200px) and (min-width:992px) and (max-width:1279px){
  #diamond-section,
  #fountain{
    display:none !important;
  }
}

@media (max-height:1200px) and (min-width:1280px) and (max-width:1439px){
  #diamond-section,
  #fountain{
    display:none !important;
  }
}

@media (max-height:1200px) and (min-width:1440px) and (max-width:1919px){
  #diamond-section,
  #fountain{
    display:none !important;
  }
}

@media (max-height:1200px) and (min-width:1920px){
  #diamond-section,
  #fountain{
    display:none !important;
  }
}

#rotate-s{
  display:inline-block;
}

#image-blend{
  display:block;
  width:100%;
  height:auto;

  -webkit-mask-image: radial-gradient(
    farthest-side at 50% 50%,
    rgba(0,0,0,1) 70%,
    rgba(0,0,0,0) 100%
  );
  mask-image: radial-gradient(
    farthest-side at 50% 50%,
    rgba(0,0,0,1) 70%,
    rgba(0,0,0,0) 100%
  );

  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;

  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}