@import url("https://fast.fonts.net/t/1.css?apiType=css&projectid=d059b9b7-0eb6-406e-aa39-dbda845717fe");
    @font-face {
      font-family: 'Conduit';
      src:url("../fd6b6356-a491-4e8b-98a8-f3e2999c89e0.eot?#iefix");
      src:url("../fd6b6356-a491-4e8b-98a8-f3e2999c89e0.eot?#iefix") format("eot"),url("../a0ca1e4a-82f8-41bc-bb6f-bd888d66ff29.woff2") format("woff2"),url("../e96f1fa6-d50b-4bfd-a843-7705449040ef.woff") format("woff"),url("../a42a6317-e3f7-49ec-bc8b-5b41552ff301.ttf") format("truetype");
      font-weight: normal;
    }
    @font-face {
      font-family: 'Conduit';
      src:url("../ba6cf53a-b55d-4de7-b7f4-d6b0538c3c26.eot?#iefix");
      src:url("../ba6cf53a-b55d-4de7-b7f4-d6b0538c3c26.eot?#iefix") format("eot"),url("../4ad0e4ec-b3ea-4d08-8eb5-9fe1bb647daf.woff2") format("woff2"),url("../8ea8aae0-e069-464e-9bbd-99ae607b3e41.woff") format("woff"),url("../1ca331f7-9ac9-4f02-b981-c7f737ea6b74.ttf") format("truetype");
      font-weight: bold;
    }

html {
  background: #242328;
}
body {
  background: #242328;
  font-family: 'Conduit';
  letter-spacing: 0.05em;
  color: #fff;
  padding: 0;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
iframe {
  display: block;
  background: #242328;
  border: none;
  height: 100svh;
  width: 100vw;
}
.wrapper {
  opacity: 1;
  transition: opacity 0.3s ease;
}
body.faded .wrapper {
  opacity: 0;
}

sup {
  font-size: 0.6em;
}

.alerts {
  display: none;
  background: linear-gradient(to bottom, #a01a1a, #9b2222);
  color: #fff;
  font-weight: bold;
  display: none;
  margin-bottom: -1vh;
}
.alert-title {
  text-align: center;
  line-height: 6vh;
  font-size: 19px;
}
.alert-content {
  display: none;
  position: absolute;
  top: 6vh;
  bottom: 0;
  width: 100vw;
  background: #fff;
  color: #242328;
  font-size: 22px;
  letter-spacing: 0.015em;
  font-weight: normal;
  z-index: 30;
  overflow-y: scroll;
}
.alert-content .alert-text {
  padding: 30px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.alerts.is-open .alert-content {
  display: block;
}
.slide1.has-alerts .alerts {
  display: block;
}
.slide1.has-alerts .hourly {
  top: 28vh;
  height: 72vh;
}


.now {
  height: 24vh;
  width: 100vw;
  position: absolute;
}
.now .text {
  padding: 14% 9% 12% 15%;
  float: left;
  width: 30vw;
}
.now .label {
  font-size: 20px;
  letter-spacing: 0.2em;
  color: #ffcc00;
  text-transform: uppercase;
}
.now .temperature {
  font-size: 78px;
  margin-top: -10px;
  font-weight: bold;
}
.now .icon {
  float: left;
  width: 25vw;
  height: 25vw;
  margin-top: 12%;
}

.long-text {
  margin: 30px 33px;
  font-size: 19px;
  transition: opacity 0.5s;
  opacity: 0;
}
.slick-active .long-text {
  opacity: 1;
}
.switcher {
  background: linear-gradient(to bottom, #484e54, #43484d);
  padding: 3px;
  margin: 30px 33px 50px;
  border-radius: 100px;
  transition: opacity 0.5s;
  opacity: 0;
}
.slick-active .switcher {
  opacity: 1;
}
.switcher .inner {
  border-radius: 100px;
  background: #242328;
  padding: 3px;
  display: flex;
  flex-wrap: wrap;
}
.switcher a {
  border-radius: 100px;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  flex: 1 0 50%;
  line-height: 41px;
  color: #fff;
  text-decoration: none;
}
.switcher a.active, .switcher a:active {
  background: linear-gradient(to bottom, #484e54, #43484d);
}

.hourly {
  height: 76vh;
  width: 100vw;
  top: 24vh;
  position: absolute;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.hourly .hour {
  height: 40px;
  line-height: 40px;
  overflow: hidden;
}
.hourly .hour.divider:after {
  position: absolute;
  content: '';
  border-bottom: 1px dashed rgba(255,255,255,0.4);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
}
.hourly .hour .time {
  position: absolute;
  height: 40px;
  font-size: 22px;
  margin: -5px 0 0 7px;
  z-index: 10;
}
.hourly .hour .bar {
  display: inline-block;
  height: 40px;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
  box-shadow: inset 0 10px 9px -5px rgba(0,0,0,0.04)
}

.hourly .hour .temperature {
  display: inline-block;
  vertical-align: top;
  font-weight: bold;
  height: 36px;
  margin-left: 8px;
  font-size: 26px;
}

.slide2 {
  box-shadow: inset 28px 0 0 0 rgba(67,74,80, 0);
  transition: box-shadow 0.5s ease 0.5s;
}
.slide2.slick-active {
  box-shadow: inset 28px 0 0 0 rgba(67,74,80, 0.35);
}
.slide2 .days {
  padding: 5px 0 0;
}


/* App Notices */

.web-app-notice {
  position: absolute;
  bottom: 0;
  z-index: 20;
  animation: float 5s ease-in-out infinite;
  display: none;
}
.web-app-notice.is-open {
  display: block;
}
@keyframes float {
  0% { transform: translateY(0); }
  40% { transform: translateY(0); }
  70% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
.web-app-notice .content {
  background: #fff;
  margin: 30px;
  border-radius: 25px;
  color: #242328;
  font-weight: bold;
  font-size: 21px;
  padding: 25px 28px;
  letter-spacing: 0.02em;
}
.web-app-notice div:after {
  position: absolute;
  border-top: solid 15px #fff;
  border-left: solid 15px transparent;
  border-right: solid 15px transparent;
  left: 50%;
  margin-left: -15px;
  width: 0;
  height: 0;
  bottom: 16px;
  content: '';
}
.web-app-notice img {
  width: 16px;
  vertical-align: sub;
  margin: 0 8px 0 3px;
}

.desktop-notice {
  display: none;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.desktop-notice .content {
  max-width: 750px;
  display: flex;
}
.desktop-notice .icon {
  width: 150px;
  height: 150px;
  margin: 0;
  vertical-align: middle;  
}
.desktop-notice .right {
  padding-left: 50px;
}
.desktop-notice .content h1 {
  font-size: 4em;
  margin: 0 0 20px;
}
.desktop-notice .content p {
  font-size: 1.5em;
  color: #999ea4;
}

@media only screen and (min-width: 760px) {
  .desktop-notice {
    display: flex;
  }
  .wrapper {
    display: none;
  }
}

/* IOS APP PAGES ====================================================================================================================== */


.ios-app {
  justify-content: center;
  align-items: center;
  align-content: center;
  min-height: 100vh;
  margin: 0 25px;
}
.ios-app .content {
  max-width: 650px;
}
.ios-app .icon {
  width: 150px;
  height: 150px;
  margin: 30px 0 20px;
  vertical-align: middle;  
}
.ios-app h1 {
  font-size: 4em;
  margin: 0 0 20px;
}
.ios-app h2 {
  font-size: 2.5em;
  margin: 0 0 20px;
}

.ios-app p {
  font-size: 1.5em;
  color: #999ea4;
}
.ios-app a {
  color: #fff;
}

/* HOURLY BAR STYLES ====================================================================================================================== */

/* SUNNY */

.style00 .bar {   /* Sunny (sun) */
  background: linear-gradient(to right, #f4b636, #f4b636);
}

.style01 .bar {   /* Mainly sunny (sun/tinycloud) */
  background: linear-gradient(to right, rgba(192,196,198, 0) 80%, rgba(192,196,198, 1) 100%),
              linear-gradient(to right, #f4b636 0%, #f4b636 80%);
}
.style02 .bar {   /* A mix of sun and cloud (sun/cloud) */
  background: linear-gradient(to right, rgba(192,196,198, 0) 50%, rgba(192,196,198, 1) 80%),
              linear-gradient(to right, #f4b636 0%, #f4b636 50%);
}

.style03 .bar {   /* Mostly cloudy (cloud/sun) */
  background: linear-gradient(to right, rgba(192,196,198, 0) 15%, rgba(192,196,198, 1) 35%),
              linear-gradient(to right, #f4b636 0%, #f4b636 20%);
}


.style06 .bar {   /* Chance of showers (sun/cloud/raincloud) */
  background: linear-gradient(to right, rgba(244,182,54, 1) 0%, rgba(244,182,54, 1) 20%, rgba(192,196,198, 1) 50%, rgba(192,196,198, 1) 80%, rgba(192,196,198, 0.1) 100%),
              url(rain.gif);
}

.style08 .bar {   /* Sunny with a chance of flurries */
  background: linear-gradient(to right, rgba(244,182,54, 1) 0%, rgba(244,182,54, 1) 20%, rgba(192,196,198, 1) 50%, rgba(192,196,198, 1) 80%, rgba(192,196,198, 0.1) 100%),
              url(snow-slow.gif);
  background-size: contain;
}

/* Chance of thundershowers (sun/cloud/lightning raincloud) */
.style09 .bar:before {
  background: linear-gradient(to right, rgba(244,182,54, 1) 0%, rgba(244,182,54, 1) 20%, rgba(192,196,198, 1) 50%, rgba(192,196,198, 1) 80%, rgba(192,196,198, 0.1) 100%);
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 5;
  box-shadow: inset 0 10px 9px -5px rgba(0,0,0,0.04);
}
.style09.lop-high .bar:before {
  background: linear-gradient(to right, rgba(244,182,54, 1) 0%, rgba(192,196,198, 1) 20%, rgba(192,196,198, 0.1) 40%);
}
.style09 .bar:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: #A8CFD7;
  z-index: 1;
  animation: thunderstorm 3s infinite;
}
.style09 .bar {
  background: url(rain.gif);
}


/* CLOUDY */
.style10 .bar {   /* (?) Cloudy */
  background: linear-gradient(to right, #c0c4c6, #a0a4a5);
}

.style12 .bar {   /* A few showers */
  background: linear-gradient(to right, rgba(160,164,165, 1) 0%, rgba(160,164,165, 0.1) 50%),
              url(rain.gif); /* rain-light */
}
.style13 .bar {   /* (?) Cloudy with rain */
  background: linear-gradient(to right, rgba(160,164,165, 1) 0%, rgba(160,164,165, 0.1) 50%),
              url(rain.gif); /* rain-heavy */
}

.style16 .bar {   /* Chance of flurries */
  background: linear-gradient(to right, rgba(160,164,165, 1) 0%, rgba(160,164,165, 1) 20%, rgba(160,164,165, 0.1) 70%),
              url(snow-slow.gif); /* snow-light */
  background-size: contain;
}
.style17 .bar {   /* ? */
  background: linear-gradient(to right, rgba(160,164,165, 1) 0%, rgba(160,164,165, 0.1) 50%),
              url(snow.gif); /* snow-medium */
  background-size: contain;
}
.style18 .bar {   /* ? */
  background: linear-gradient(to right, rgba(160,164,165, 1) 0%, rgba(160,164,165, 0.1) 30%),
              url(snow.gif); /* snow-light */
  background-size: contain;
}


.style19 .bar:before { /* (?) Cloudy with thunderstorms */
  background: linear-gradient(to right, rgba(160,164,165, 1) 0%, rgba(160,164,165, 0.1) 50%);
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 5;
  box-shadow: inset 0 10px 9px -5px rgba(0,0,0,0.04);
}
.style19 .bar:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: #A8CFD7;
  z-index: 1;
  animation: thunderstorm 3s infinite;
}
.style19 .bar {
  background: url(rain.gif);
}




/* NIGHT */

.style30 .bar {   /* Night - Clear (?) */
  background: linear-gradient(to right, rgba(74,82,88, 1), rgba(67,74,80, 1));
}
.style31 .bar {   /* Night - A few clouds */
  background: linear-gradient(to right, rgba(74,82,88, 1), rgba(67,74,80, 1));
}
.style32 .bar {   /* Night - Partly cloudy */
  background: linear-gradient(to right, rgba(74,82,88, 1), rgba(67,74,80, 1));
}
.style33 .bar {   /* Night - Cloudy */
  background: linear-gradient(to right, rgba(74,82,88, 1), rgba(67,74,80, 1));
}
.style36 .bar {   /* Night - Chance of showers */
  background: linear-gradient(to right, rgba(74,82,88, 1) 0%, rgba(67,74,80, 1) 80%, rgba(0,0,0, 0.2) 100%),
              url(rain.gif);
}
.style38 .bar {   /* Night - (Chance of?) snow */
  background: linear-gradient(to right, rgba(74,82,88, 1) 0%, rgba(67,74,80, 1) 80%, rgba(67,74,80, 0.2) 100%),
              url(snow-slow-night.gif);
  background-size: contain;
}
.style39 .bar:before { /* (?) Cloudy with thunderstorms */
  background: linear-gradient(to right, rgba(74,82,88, 1) 0%, rgba(67,74,80, 1) 80%, rgba(0,0,0, 0.2) 100%);
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 5;
  box-shadow: inset 0 10px 9px -5px rgba(0,0,0,0.04);
}
.style39 .bar:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: #A8CFD7;
  z-index: 1;
  animation: thunderstorm 3s infinite;
}
.style39 .bar {
  background: url(rain.gif);
}


@keyframes thunderstorm {
  0% {
    opacity: 0;
  }
  24% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  31% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  74% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  78% {
    opacity: 0;
  }
  79% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* ANIMATIONS */

/* Now */
.now .label {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.slick-active .now.loaded .label {
  opacity: 1;
}
.now .icon {
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0, 0, 0.23, 1);
}
.slick-active .now.loaded .icon {
  transform: scale(1);
}

/* Bar */
.hourly .hour {
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.11, 0.82, 0.58, 1);
  transition-delay: 0.5s;
}
.slick-active .hourly .hour.loaded {
  transform: translateX(0%);
  transition-delay: 0s;
}

.hourly .hour.divider:after {
  opacity: 0;
  transition: opacity 0.8s ease 0.2s;
}
.slick-active .hourly .hour.loaded.divider:after {
  opacity: 1;
}


/* Timestamp */
.hourly .hour .time {
  transform: translateX(-70px);
  transition: transform 0.6s cubic-bezier(0.11, 0.82, 0.58, 1) 0s;
}
.slick-active .hourly .hour.loaded .time {
  transform: translateX(0);
}

/* Temperature */
/*.hourly .hour .temperature {
  transform: translateX(-70px);
  transition: transform 0.3s cubic-bezier(0.11, 0.82, 0.58, 1) 0.2s;
}
.slick-active .hourly .hour.loaded .temperature {
  transform: translateX(0);
}
*/


/* Slide 2 ==================================================================================================================  */

.day {
  height: 16.6vh;
  position: relative;
}

.day.divider:after {
  position: absolute;
  content: '';
  border-bottom: 1px dashed rgba(255,255,255,0.4);
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 7;
}

.day > div {
  display: inline-block;
}

.day .label {
  width: 7%;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.2em;
  transform: rotate(-90deg);
  margin-top: 40px;
}

.day .icon {
  width: 15vw;
  height: 15vw;
  margin: 20px 19px;
  vertical-align: middle;
}
.day .icon img {
  width: 100%;
  padding: 10px 0;
}

.day .highlow {
  width: 19%;
  margin: 15px 0;
  vertical-align: middle;
}
.day .highlow .high {
  font-size: 46px;
  font-weight: bold;
}
.day .highlow .low {
  font-size: 20px;
  margin-top: -6px;
  margin-left: 3px;
  color: #999ea4;
}

.day .details {
  width: 49%;
  font-size: 20px;
  line-height: 24px;
  vertical-align: middle;
  margin-top: 0;
}

/* ANIMATIONS */

.day.divider:after {
  opacity: 0;
  transition: opacity 0.8s ease 0.2s;
}
.slick-active .day.loaded.divider:after {
  opacity: 1;
}


/* Day of week */
.day .label {
  transform: translateX(-40px) rotate(-90deg);
  transition: transform 0.6s cubic-bezier(0.11, 0.82, 0.58, 1) 0.1s;
}
.slick-active .day.loaded .label {
  transform: translateX(0) rotate(-90deg);
}

/* Icon */
.day .icon {
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0, 0, 0.23, 1);
}
.slick-active .day.loaded .icon {
  transform: scale(0.9);
}

/* Details */
.day .details > div {
  overflow: hidden;
  padding-right: 20px;
}
.day .details > div > div {
  transform: translateX(115%);
  transition: opacity 1s ease, transform 0.5s cubic-bezier(0, 0, 0.23, 1);
  opacity: 1;
}
.slick-active .day.loaded .details > div > div {
  transform: translateX(0);
  opacity: 1;
}

/* ICON STYLES ====================================================================================================================== */

/* Missing: slow rain, snow, sleet/hail, smoke */

.icon {
  position: relative;
}

.sun, .cloud, .rain, .snow, .moon {
  display: none;
}

/* Sun */
.sun {
  position: absolute;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  animation: rotateSun 60s linear infinite;
}
.sun:before {
  content: "";
  position: absolute;
  height: 80%;
  width: 80%;
  top: 10%;
  right: 10%;
  border-radius: 50%;
  z-index: 2;
  background-color: #f1c40f;
  /*background-image: radial-gradient(#f1c40f, #f39c12);*/
  background-image: radial-gradient(#ffdc59, #f4b536);
  box-shadow: 0 0 25px #917508;
}
.sun:after {
  content: "";
  position: absolute;
  height: 120%;
  width: 120%;
  top: -10%;
  left: -10%;
  border-radius: 50%;
  z-index: 1;
  /*background-color: #f39c12;*/
  background-color: #ffd173;
  will-change: opacity, transform;
  animation: fadeIn 4s linear infinite reverse, scaleDown 4s linear infinite reverse;
}
.ray {
  position: absolute;
  width:  100%;
  height: 100%;
  opacity: 0.9;
}
@keyframes rotateSun {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.ray:before {
  content: "";
  position: absolute;
  background-image: radial-gradient(#ffdc59, #f4b536);
  z-index: 2;
  width: 12%;
  height: 15%;
  left: 44%;
  top: -12%;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.ray:nth-child(2) {
  transform: rotate(45deg);
}
.ray:nth-child(3) {
  transform: rotate(90deg);
}
.ray:nth-child(4) {
  transform: rotate(135deg);
}
.ray:nth-child(5) {
  transform: rotate(180deg);
}
.ray:nth-child(6) {
  transform: rotate(225deg);
}
.ray:nth-child(7) {
  transform: rotate(270deg);
}
.ray:nth-child(8) {
  transform: rotate(315deg);
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 0.3; }
}
@keyframes scaleDown {
  0% { transform: scale(1); }
  100% { transform: scale(.6); }
}

/* Cloud */
.cloud {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: translateUp 2s linear infinite alternate;
}
.cloud:before {
  content: "";
  position: absolute;
  height: 40%;
  width: 40%;
  top: 30%;
  right: 0%;
  border-radius: 50%;
  border-bottom-left-radius: 0;
  z-index: 3;
  background-color: #ecf0f1;
  /*background-image: radial-gradient(#ecf0f1, #bdc3c7);*/
  background-image: linear-gradient(#dce1e2, #bdc3c7);
}
.cloud:after {
  content: "";
  position: absolute;
  height: 60%;
  width: 70%;
  top: 10%;
  right: 30%;
  border-radius: 50%;
  border-bottom-right-radius: 0;
  z-index: 2;
  background-color: #ecf0f1;
  /*background-image: radial-gradient(#ecf0f1, #bdc3c7);*/
  background-image: linear-gradient(#ecf0f1, #bdc3c7);
  box-shadow: 8px 4px 25px rgba(0,0,0,.2);
}

/* Sideclouds */
.sidecloud-left {
  left: 0%;
  top: 26%;
  width: 66%;
  height: 66%;
  z-index: 3;
  animation-name: translateLilUp;
  filter: brightness(1.15);
}
.sidecloud-right {
  left: 38%;
  top: 40%;
  width: 62%;
  height: 62%;
  transform: rotateY(180deg);
  z-index: 4;
  animation-name: translateUpFlipped;
  filter: brightness(1.15);
}

/* Largecloud */
.largecloud {
  z-index: 4;
  animation-name: translateLilSide;
  width: 85%;
  height: 85%;
  top: 10%;
  filter: brightness(0.9);
}
.backcloud {
  width: 53%;
  height: 53%;
  left: 43%;
  z-index: 3;
  animation-name: translateUpFlipped;
  filter: brightness(0.9);
}
.backcloud:before {
  background: linear-gradient(#b0b5b7, #9ca1a5);
}
.backcloud:after {
  background: linear-gradient(#b9bebf, #9b9fa2);
}

@keyframes translateUp {
  0% { transform: translatey(7.5%); }
  100% { transform: translatey(-7.5%); }
}
@keyframes translateUpFlipped {
  0% { transform: translatey(7.5%) rotateY(180deg); }
  100% { transform: translatey(-7.5%) rotateY(180deg); }
}
@keyframes translateLilUp {
  0% { transform: translatey(-1.5%); }
  100% { transform: translatey(1.5%); }
}
@keyframes translateLilUpFlipped {
  0% { transform: translatey(-1.5%) rotateY(180deg); }
  100% { transform: translatey(1.5%) rotateY(180deg); }
}
@keyframes translateLilSide {
  0% { transform: translatex(2.5%); }
  100% { transform: translatex(-2.5%); }
}

/* Rain */
.rain {
  position: absolute;
  width: 100%;
  height: 100%;
}
.rain:after {
  content: "";
  position: absolute;
  background: url(rain.gif);
  z-index: 1;
}
.rain:before {
  display: none;
  content: "";
  position: absolute;
  background: #A8CFD7;
  z-index: 2;
  animation: thunderstorm 3s infinite;
}
.rain-sidecloud-right {
  animation: translateUp 2s linear infinite alternate;
}
.rain-sidecloud-right:after, .rain-sidecloud-right:before {
  height: 40%;
  width: 61%;
  top: 60%;
  left: 38%;
  -webkit-clip-path: polygon(35% 0%, 100% 0%, 65% 100%, 0% 100%);
}
.rain-largecloud:after, .rain-largecloud:before {
  height: 30%;
  width: 70%;
  top: 60%;
  left: 6%;
  -webkit-clip-path: polygon(21% 0%, 100% 0%, 79% 100%, 0% 100%);
}

/* Snow */
.snow {
  position: absolute;
  width: 100%;
  height: 100%;
}
.snowflake-row {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -2%;
  left: 0%;
}
.days .snowflake-row {
  height: 50%;
}
.snowflake {
  top: 63%;
  left: 20%;
  width: 6px;
  height: 6px;
  background: url(snowflake.png);
  background-size: cover;
  /*background: linear-gradient(#fff, #ddd);*/
  position: absolute;
  animation: snowflake 3s linear infinite;
}
.snowflake:nth-child(2) {
  left: 20%;
}
.snowflake:nth-child(3) {
  left: 38%;
  top: 66%;
}
.snowflake:nth-child(4) {
  left: 38%;
  top: 66%;
}
.snowflake:nth-child(5) {
  left: 56%;
  /*top: 61%;*/
}
.snowflake:nth-child(6) {
  left: 56%;
  /*top: 61%;*/
}
.snowflake:nth-child(2n+1) { /* second batch, used for flow */
  animation-delay: 1.5s;
}
.snowflake-row {
  animation: snowsway 3s ease-out infinite 1.5s;
}
.snowflake-row:nth-child(2) {
  left: 9%;
}
.snowflake-row:nth-child(2) .snowflake {
  animation: snowflake 3s linear infinite 0.75s;
}
.snowflake-row:nth-child(2) .snowflake:nth-child(2n+1) {
  animation: snowflake 3s linear infinite 2.25s;
}
@keyframes snowflake {
  0% {
    transform: scale(1);
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(-5px) translateY(300%);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(-10px) translateY(600%)  scale(0.7);
    opacity: 0;
  }
}
@keyframes snowsway {
  0% {
  }
  50% {
    transform: translateX(4%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Moon */
.moon {
  position: absolute;
  width: 100%;
  height: 100%;
}
.moon:before {
  border-radius: 50%;
  box-shadow: #fffad4 -24px 0;
  content: "";
  height: 75%;
  width: 75%;
  position: absolute;
  top: 10%;
  left: 43%;
  transform: rotate(-5deg);
}


/* Styles ================================================================ */

/* Sun styles */

.style00 .sun {
  display: block;
}

.style01 .sun {
  display: block;
}
.style01 .sidecloud-right {
  display: block;
  width: 40%;
  height: 40%;
  top: 53%;
  left: 53%;
}

.style02 .sun {
  display: block;
}
.style02 .sidecloud-right {
  display: block;
  left: 38%;
  top: 40%;
  width: 62%;
  height: 62%;
}

.style03 .sun {
  display: block;
  width: 60%;
  height: 60%;
  left: 20%;
  top: 9%;
}
.style03 .cloud {

}
.style03 .sidecloud-left {
  display: block;
}
.style03 .sidecloud-right {
  display: block;
}

.style05 .sun {
  display: block;
}
.style05 .sidecloud-right {
  display: block;
  left: 38%;
  top: 40%;
  width: 62%;
  height: 62%;
}


.style06 .sun {
  display: block;
  width: 60%;
  height: 60%;
  left: 20%;
  top: 9%;
}
.style06 .sidecloud-left {
  display: block;
  z-index: 5;
}
.style06 .sidecloud-right:before {
  background: linear-gradient(#b0b5b7, #9ca1a5);
}
.style06 .sidecloud-right:after {
  background: linear-gradient(#b9bebf, #9b9fa2);
}
.style06 .sidecloud-right {
  display: block;
}
.style06 .rain-sidecloud-right {
  display: block;
}

.style07 .sun {
  display: block;
  width: 74%;
  height: 74%;
  left: 13%;
}
.style07 .sidecloud-left {
  display: block;
  z-index: 6;
}
.style07 .sidecloud-right:before {
  background: linear-gradient(#b0b5b7, #9ca1a5);
}
.style07 .sidecloud-right:after {
  background: linear-gradient(#b9bebf, #9b9fa2);
}
.style07 .sidecloud-right {
  display: block;
}
.style07 .rain-sidecloud-right {
  display: block;
}
.style07 .snow-sidecloud-left {
  display: block;
  width: 70%;
  z-index: 5;
}
.style07 .snow-sidecloud-left .snowflake-row:nth-child(1) .snowflake:nth-child(2),
.style07 .snow-sidecloud-left .snowflake-row:nth-child(1) .snowflake:nth-child(5),
.style07 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(1),
.style07 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(2),
.style07 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(3),
.style07 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(4),
.style07 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(5) {
  display: none;
}

.style08 .sun {
  display: block;
  width: 74%;
  height: 74%;
  left: 13%;
}
.style08 .sidecloud-left {
  display: block;
  z-index: 6;
}
.style08 .sidecloud-right:before {
  background: linear-gradient(#b0b5b7, #9ca1a5);
}
.style08 .sidecloud-right:after {
  background: linear-gradient(#b9bebf, #9b9fa2);
}
.style08 .sidecloud-right {
  display: block;
}
.style08 .snow-sidecloud-left {
  display: block;
  width: 70%;
  z-index: 5;
}
.style08 .snow-sidecloud-left .snowflake-row:nth-child(1) .snowflake:nth-child(2),
.style08 .snow-sidecloud-left .snowflake-row:nth-child(1) .snowflake:nth-child(5),
.style08 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(1),
.style08 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(2),
.style08 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(3),
.style08 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(4),
.style08 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(5) {
  display: none;
}

.style09 .sun {
  display: block;
  width: 60%;
  height: 60%;
  left: 20%;
  top: 9%;
}
.style09 .sidecloud-left {
  display: block;
  z-index: 5;
}
.style09 .sidecloud-right:before {
  background: linear-gradient(#b0b5b7, #9ca1a5);
}
.style09 .sidecloud-right:after {
  background: linear-gradient(#b9bebf, #9b9fa2);
}
.style09 .sidecloud-right {
  display: block;
}
.style09 .rain-sidecloud-right, .style09 .rain-sidecloud-right:before {
  display: block;
}

/* Cloud styles */

.style10 .largecloud {
  display: block;
  top: 13%;
  width: 100%;
  height: 100%;
}
.style10 .backcloud {
  display: block;
}

.style11 .largecloud {
  display: block;
}
.style11 .backcloud {
  display: block;
}

.style12 .largecloud {
  display: block;
}
.style12 .backcloud {
  display: block;
}
.style12 .rain-largecloud {
  display: block;
}

.style13 .largecloud {
  display: block;
}
.style13 .backcloud {
  display: block;
}
.style13 .rain-largecloud {
  display: block;
}

.style14 .largecloud {
  display: block;
}
.style14 .backcloud {
  display: block;
}

.style15 .largecloud {
  display: block;
}
.style15 .backcloud {
  display: block;
}
.style15 .rain-largecloud {
  display: block;
}
.style15 .rain-largecloud:after {
  width: 47%;
  left: 33%;
  clip-path: polygon(34% 0%, 100% 0%, 66% 100%, 0% 100%);
}
.style15 .snow-sidecloud-left {
  display: block;
  width: 70%;
  z-index: 2;
}
.style15 .snow-sidecloud-left .snowflake-row:nth-child(1) .snowflake:nth-child(2),
.style15 .snow-sidecloud-left .snowflake-row:nth-child(1) .snowflake:nth-child(5),
.style15 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(1),
.style15 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(2),
.style15 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(3),
.style15 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(4),
.style15 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(5) {
  display: none;
}

.style16 .largecloud {
  display: block;
}
.style16 .backcloud {
  display: block;
}
.style16 .snow-largecloud {
  display: block;
}
.style16 .snow-largecloud .snowflake-row:nth-child(1) .snowflake:nth-child(2),
.style16 .snow-largecloud .snowflake-row:nth-child(1) .snowflake:nth-child(5),
.style16 .snow-largecloud .snowflake-row:nth-child(2) .snowflake:nth-child(1),
.style16 .snow-largecloud .snowflake-row:nth-child(2) .snowflake:nth-child(2),
.style16 .snow-largecloud .snowflake-row:nth-child(2) .snowflake:nth-child(3),
.style16 .snow-largecloud .snowflake-row:nth-child(2) .snowflake:nth-child(4),
.style16 .snow-largecloud .snowflake-row:nth-child(2) .snowflake:nth-child(5) {
  display: none;
}

.style17 .largecloud {
  display: block;
}
.style17 .backcloud {
  display: block;
}
.style17 .snow-largecloud {
  display: block;
}

.style18 .largecloud {
  display: block;
}
.style18 .backcloud {
  display: block;
}
.style18 .snow-largecloud {
  display: block;
}

.style19 .largecloud {
  display: block;
}
.style19 .backcloud {
  display: block;
}
.style19 .rain-largecloud, .style19 .rain-largecloud:before {
  display: block;
}

/* Night styles */

.style30 .moon {
  display: block;
}

.style31 .moon {
  display: block;
}
.style31 .sidecloud-right {
  display: block;
  filter: brightness(0.8);
}

.style32 .moon {
  display: block;
}
.style32 .sidecloud-left {
  display: block;
  filter: brightness(0.8);
}
.style32 .sidecloud-right {
  display: block;
  filter: brightness(0.8);
}

.style33 .moon {
  display: block;
}
.style33 .sidecloud-left {
  display: block;
  filter: brightness(0.8);
}
.style33 .sidecloud-right {
  display: block;
  filter: brightness(0.8);
}



.style36 .moon {
  display: block;
}
.style36 .sidecloud-left {
  display: block;
  filter: brightness(0.8);
  z-index: 5;
}
.style36 .sidecloud-right {
  display: block;
  filter: brightness(0.7);
}
.style36 .sidecloud-right {
  display: block;
}
.style36 .rain-sidecloud-right {
  display: block;
}


.style37 .moon {
  display: block;
}
.style37 .sidecloud-left {
  display: block;
  filter: brightness(0.8);
  z-index: 6;
}
.style37 .sidecloud-right {
  display: block;
  filter: brightness(0.7);
}
.style37 .rain-sidecloud-right {
  display: block;
}
.style37 .snow-sidecloud-left {
  display: block;
  width: 70%;
  z-index: 5;
}
.style37 .snow-sidecloud-left .snowflake-row:nth-child(1) .snowflake:nth-child(2),
.style37 .snow-sidecloud-left .snowflake-row:nth-child(1) .snowflake:nth-child(5),
.style37 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(1),
.style37 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(2),
.style37 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(3),
.style37 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(4),
.style37 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(5) {
  display: none;
}

.style38 .moon {
  display: block;
}
.style38 .sidecloud-left {
  display: block;
  filter: brightness(0.8);
  z-index: 6;
}
.style38 .sidecloud-right {
  display: block;
  filter: brightness(0.7);
}
.style38 .snow-sidecloud-left {
  display: block;
  width: 70%;
  z-index: 5;
}
.style38 .snow-sidecloud-left .snowflake-row:nth-child(1) .snowflake:nth-child(2),
.style38 .snow-sidecloud-left .snowflake-row:nth-child(1) .snowflake:nth-child(5),
.style38 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(1),
.style38 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(2),
.style38 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(3),
.style38 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(4),
.style38 .snow-sidecloud-left .snowflake-row:nth-child(2) .snowflake:nth-child(5) {
  display: none;
}

.style39 .moon {
  display: block;
}
.style39 .sidecloud-left {
  display: block;
  filter: brightness(0.8);
  z-index: 5;
}
.style39 .sidecloud-right {
  display: block;
  filter: brightness(0.7);
}
.style39 .rain-sidecloud-right, .style39 .rain-sidecloud-right:before {
  display: block;
}

/* Slick.css ============================================================= */

.slider {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  top: 0;
  left: 0;
}

.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
  	cursor: -webkit-grab;

    height: 100vh;
    width: 100vw;
	overflow: hidden;
    min-height: 1px;
}
.slick-slide:focus {
  outline: none;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}