/* BG CLOUDS ANIMATION */

.bgCloudsWrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.contentLayer{
  display: none;
}

.bgCloudsCanvas{
  display: none; /* hiding interactive clouds for mobiles */
}

.bgCloudsContainer{
  background: green;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  /* static svg background for mobiles */
  background:
    url("/images/style/bgCloudsMobile.svg") no-repeat bottom center,
    linear-gradient(320deg, rgba(0,23,28,1) 0%, rgba(0,64,79,1) 100%);
  background-size: 300% auto;
}

/* Mobile landscape */

@media screen and (max-width: 959px) and (orientation: landscape) {
  
  .bgCloudsContainer {
    background-size: 100% auto;
  }
}

/* Desktop */

@media only screen and (min-width: 960px) {
  
  .contentLayer{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: calc(54% - var(--gap-page));
    max-width: calc(100% - var(--gap-page) - 40rem);
    height: 100%;
    background: url("/images/style/blueGhost.svg") no-repeat center top / contain content-box;
    display: block;
    padding: calc(5rem + 5%) 6% 3% 6%;
  }
  
  .bgCloudsContainer{
    background: linear-gradient(320deg, rgba(0,23,28,1) 0%, rgba(0,64,79,1) 100%);
  }
  
  .bgCloudsCanvas{
    display: block; /* revealing interactive clouds for desktops */
    position: absolute;
    z-index: 10;
  }
}