/* Mixins.less
 * Snippets of reusable CSS to develop faster and keep code readable
 * ----------------------------------------------------------------- */
.day .sky .day-night::before {
  opacity: 0;
}
.day .sky .day-night::after {
  opacity: 1;
}
.night .sky img.star {
  opacity: 1;
}
.night .sky .cloud-wrapper img {
  opacity: 0.6;
}
.night .sky .day-night::before {
  opacity: 1;
}
.night .sky .day-night::after {
  opacity: 0;
}
.skip .sky .day-night::before,
.skip .sky .day-night::after {
  transition: none;
}
.sky {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: auto;
  right: auto;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
}
.sky .cloud-wrapper {
  position: absolute;
  top: 0;
  left: auto;
  right: auto;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 1;
}
.sky .cloud-wrapper .row-cloud {
  width: 100%;
  height: 100%;
}
.sky .cloud-wrapper .row-cloud img {
  width: auto;
  height: 100%;
  object-fit: cover;
}
.sky .cloud-wrapper .row-cloud img:nth-child(2) {
  left: -100%;
}
.sky .day-night {
  position: relative;
  width: 100%;
  height: 100%;
}
.sky .day-night::before,
.sky .day-night::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 2.5s ease-out;
}
.sky .day-night::before {
  background-image: linear-gradient(to bottom, #2C445D, #374E63, #7894A3, #B0D4CB);
}
.sky .day-night::after {
  background-image: linear-gradient(to bottom, #65C8D1, #B4DCDA, #B4DCDA);
}
.sky img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  .sky .cloud-wrapper img {
    width: 50%;
  }
}