[wombat-template].wombat_thermostat_e_hero_clouds_animated {
  overflow: hidden;
  position: relative;
}

/* background */
[wombat-template].wombat_thermostat_e_hero_clouds_animated .mobile-background,
[wombat-template].wombat_thermostat_e_hero_clouds_animated .desktop-background {
  min-height: 360px;
  width: 100%;

  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;

  /* background should be vertically centered */
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
[wombat-template].wombat_thermostat_e_hero_clouds_animated .mobile-background {
  display: block;
}
[wombat-template].wombat_thermostat_e_hero_clouds_animated .desktop-background {
  display: none;
}

/* copy block */
[wombat-template].wombat_thermostat_e_hero_clouds_animated .copy-block {
  position: relative;
  margin: 0 auto;
  text-align: center;
  max-width: 260px;
  padding-top: 36px;
}
[wombat-template].wombat_thermostat_e_hero_clouds_animated .copy-block h1 {
  font-size: 26px;
  line-height: 34px;
  font-weight: bold;
  margin-bottom: 0;
}
[wombat-template].wombat_thermostat_e_hero_clouds_animated .copy-block p {
  font-size: 15px;
  line-height: 23px;
  margin-top: 15px;
  margin-bottom: 0;
}
[wombat-template].wombat_thermostat_e_hero_clouds_animated .copy-block h1,
[wombat-template].wombat_thermostat_e_hero_clouds_animated .copy-block p {
  color: #FFFFFF;
}


/* clouds block */
[wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block {
  position: absolute;
  bottom: 0;
  height: 255px;
  width: 100%;
}
[wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud {
  position: absolute;
  pointer-events: none;
  background-size: cover;

  display: inline-block; /* firefox doesn't animate inline elements */
  opacity: 0;  /* initial clouds opacity value */
}
[wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.top-left {
  width: 285px;
  height: 194px;
  left: calc(50% - 350px);

}
[wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.bottom-left {
  width: 114px;
  height: 75px;
  top: 160px;
  left: calc(50% - 190px);
}
[wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.top-right {
  width: 201px;
  height: 192px;
  right: calc(50% - 295px);
}
[wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.bottom-right {
  width: 220px;
  height: 150px;
  top: 195px;
  right: calc(50% - 160px);
}


/* clouds animation declarations */
[wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud {
  /* shared animation styles */
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
[wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.top-left {
  animation-name: thermostatE-hero-cloud-top-left-slidesIn;
  animation-duration: 2.5s;
  animation-delay: 0.15s;
}
[wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.bottom-left {
  animation-name: thermostatE-hero-cloud-bottom-left-slidesIn;
  animation-duration: 2.75s;
  animation-delay: 0.25s;
}
[wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.top-right {
  animation-name: thermostatE-hero-cloud-top-right-slidesIn;
  animation-duration: 2.5s;
  animation-delay: 0;
}
[wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.bottom-right {
  animation-name: thermostatE-hero-cloud-bottom-right-slidesIn;
  animation-duration: 3s;
  animation-delay: 0.4s;
}


/* clouds animation keyframes */
@keyframes thermostatE-hero-cloud-top-left-slidesIn {
  0%   {
    opacity: 0;
    transform: translate3d(-200px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes thermostatE-hero-cloud-bottom-left-slidesIn {
  0%   {
    opacity: 0;
    transform: translate3d(-275px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes thermostatE-hero-cloud-top-right-slidesIn {
  0%   {
    opacity: 0;
    transform: translate3d(200px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes thermostatE-hero-cloud-bottom-right-slidesIn {
  0%   {
    opacity: 0;
    transform: translate3d(330px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}










/* Fix clouds position @560px */
@media (min-width: 560px) {

  [wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.top-left {
    left: -78px;
  }
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.bottom-left {
    left: 82px;
  }
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.top-right {
    right: -22px;
  }
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.bottom-right {
    right: 112px;
  }
}










/* style updates @768px */
@media (min-width: 768px) {

  /* background */
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .mobile-background {
    display: none;
  }
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .desktop-background {
    display: block;
    min-height: 740px;
    width: 100%;
  }

  /* copy block */
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .copy-block {
    max-width: 600px; /* should match with the comp */
    padding-top: 80px;
  }
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .copy-block h1 {
    font-size: 40px;
    line-height: 54px;
  }
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .copy-block p {
    font-size: 18px;
    line-height: 28px;
    margin-top: 10px;
  }

  /* clouds block */
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block {
    height: 605px;
  }
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.top-left {
    width: 673px;
    height: 458px;
    top: 10px;
    left: calc(50% - 828px);
  }
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.bottom-left {
    width: 276px;
    height: 182px;
    top: 350px;
    left: calc(50% - 480px); /* specific style update for tablet */
  }
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.top-right {
    width: 476px;
    height: 454px;
    top: 0;
    right: calc(50% - 712px);
  }
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.bottom-right {
    width: 481px;
    height: 327px;
    top: 480px;
    right: calc(50% - 395px);  /* specific style update for tablet */
  }
}









/* style updates @1040px */
@media (min-width: 1040px) {
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.bottom-left {
    left: calc(50% - 630px);
  }
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.bottom-right {
    right: calc(50% - 495px);
  }
}









/* Fix clouds position @1440px */
@media (min-width: 1440px) {
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.top-left {
    left: -115px;
  }
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.bottom-left {
    left: 83px;
  }
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.top-right {
    right: 0;
  }
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block .cloud.bottom-right {
    right: 217px;
  }
}











/* Unset bottom value for clouds - to be visible @1700px and above */
@media (min-width: 1700px) {
  [wombat-template].wombat_thermostat_e_hero_clouds_animated .clouds-block {
    bottom: unset;
  }
}