*,*:before,*:after{box-sizing:border-box;}

  html{height:100vh;background: #21005f;}
  
  body{margin:0;height:100vh;background-position: bottom;background-repeat: no-repeat;overflow: hidden;opacity: 0;transition: all 0.5s ease;position: relative;}
  body.loaded{opacity:1;}

  body.time_sunrise,body.time_sunrise .background{background: #544aff;}
  body.time_midday,body.time_midday .background{background: #1f82e2;}
  body.time_sunset,body.time_sunset .background{background: #4f4c6e;}
  body.time_midnight,body.time_midnight .background{background: #00041d;}

  /* main transition */
  .sky_gradients svg, .cls-1, .cls-2, .foreground_layer, .sun, .stars{transition: all 1s ease;}

/* Settings / Controls
  ----------------------- */
  .controls button.settings{position:absolute;z-index: 11;left: 30px;cursor: pointer;border: 2px solid white;background: transparent;padding: 0px;outline: none;transition: all 0.5s cubic-bezier(.46,.13,.39,1);position: absolute;top: -60px;width: 30px;height: 30px;border-radius: 20px;}
  .settings-open .controls button.settings{border-color:transparent;}
  .controls button.settings:before,.controls button.settings:after{content:' ';display:block;width:30px;border: 1px solid white;position:absolute;opacity:0;transition: all 0.5s cubic-bezier(.46,.13,.39,1);}
  .controls button.settings:before{transform:rotate(45deg);}
  .controls button.settings:after{transform:rotate(-45deg);}
  .settings-open .controls button.settings:before,.settings-open .controls button.settings:after{opacity:1;}  
  .settings svg{width: 38px;height:38px;transition: all 0.5s linear;animation: settings-rotate 20s linear infinite;opacity: 1.1;}
  .settings svg:hover{opacity:1;}
  @keyframes settings-rotate { 0%{transform: rotate(0deg);} 100% {transform: rotate(360deg);}} 
  
  .settings-open .settings{/* transform: translateY(-220px); */}
  .settings .cls-1{fill:#ffffff;}

  .controls{position: absolute;z-index: 99;padding: 12px;transition: all 0.5s cubic-bezier(.46,.13,.39,1);width: 100%;bottom: 0px;padding: 30px;/* background: rgba(0, 0, 0, 0.25); */transform: translateY(100%);/* text-align: right; */}
  .settings-open .controls{transform: translateY(0%);}
  .button-set{margin-bottom: 14px;}
  .button-set label{font-family: 'Source Code Pro', monospace;font-size:11px;color: rgba(255, 255, 255, 0.38);display: inline-block;min-width: 60px;}
  .controls button{background: rgba(0, 0, 0, 0);color: white;border: 0px;padding: 0px 0px;font-size: 11px;outline: none;cursor: pointer;font-family: 'Source Code Pro', monospace;margin-right: 10px;}
  
  .controls button.active{position:relative;}
  .controls button.active:before{content:' ';border-bottom: 1px solid white;width: 100%;display: block;position: relative;bottom: -18px;}

  .time_sunrise .controls button.active{color: #ff8bd0;}
  .time_sunrise .controls button.active:before{border-color: #ea54ad;}
  .time_midday .controls button.active{color: #32a6e9;}
  .time_midday .controls button.active:before{border-color: #32a6e9;}
  .time_sunset .controls button.active{color: #b95464;}
  .time_sunset .controls button.active:before{border-color: #b95464;}
  .time_midnight .controls button.active{color: #008e70;}
  .time_midnight .controls button.active:before{border-color: #008e70;}

/* Storm colour
  ----------------------- */
  .storm-colour{z-index: 7;position: absolute;width: 100%;top: 0;height: 100%;display: block;mix-blend-mode: color;background: #405d7f;transition: all 4s ease;opacity: 0;pointer-events: none;}
  .rain-light .storm-colour{opacity:0.33;}
  .rain-medium .storm-colour{opacity:0.66;}
  .rain-heavy .storm-colour{opacity:1;}

/* Noise / vignette
  ------------------------ */
  .vignette{display:none;width:100%;height:100%;position:absolute;top:0px;background: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%,hsla(230, 30%, 6%, 0.7) 100%);z-index: 8;}
  .noise{display:none;width:100%;height:100%;position:absolute;top:0px;background: url("../img/noise.jpg") repeat;z-index: 9;mix-blend-mode: color-burn;opacity: 0.06;}
  .effects .vignette,.effects .noise{display:block;pointer-events: none;}


/* Rain
  ----------------------- */
  .rain{z-index: 9;position: absolute;width: 100%;top: -40%;height: 140%;display: block;mix-blend-mode: soft-light;opacity: 0;transition: all 2s ease;pointer-events: none;}
  .rain-light .rain,.rain-medium .rain{opacity: 0.2;}
  .rain-heavy .rain{opacity: 0.2;}
  .rain ul{position: relative;padding: 0;list-style: none;height: 100%;margin: 0;width: 110%;}

  .rain ul li{border-right: 2px solid white;height: 20%;float: left;width: 1%;transform: rotate(4deg);animation: rain_wind-none 0.6s linear infinite;position: relative;}
  .wind-heavy .rain ul li{animation: rain_wind-heavy 0.6s linear infinite;position: relative;}
  .rain ul li:nth-child(1n+2){animation: rain_wind-none 0.6s linear 0.1s infinite;}
  .wind-heavy .rain ul li:nth-child(1n+2){animation: rain_wind-heavy 0.6s linear 0.1s infinite;}
  .rain ul li:nth-child(2n){animation: rain_wind-none 0.6s linear 0.4s infinite;}
  .wind-heavy .rain ul li:nth-child(2n){animation: rain_wind-heavy 0.6s linear 0.4s infinite;}
  .rain ul li:nth-child(2n+2){animation: rain_wind-none 0.6s linear 0.5s infinite;}
  .wind-heavy .rain ul li:nth-child(2n+2){animation: rain_wind-heavy 0.6s linear 0.5s infinite;}
  .rain ul li:nth-child(3n){animation: rain_wind-none 0.6s linear 0.6s infinite;}
  .wind-heavy .rain ul li:nth-child(3n){animation: rain_wind-heavy 0.6s linear 0.6s infinite;}
  .rain ul li:nth-child(4n){animation: rain_wind-none 0.6s linear 0.7s infinite;}
  .wind-heavy .rain ul li:nth-child(4n){animation: rain_wind-heavy 0.6s linear 0.7s infinite;}
  .rain ul li:nth-child(5n){animation: rain_wind-none 0.6s linear 0.8s infinite;}
  .wind-heavy .rain ul li:nth-child(5n){animation: rain_wind-heavy 0.6s linear 0.8s infinite;}
  .rain ul li:nth-child(6n){animation: rain_wind-none 0.6s linear 0.9s infinite;}
  .wind-heavy .rain ul li:nth-child(6n){animation: rain_wind-heavy 0.6s linear 0.9s infinite;}
  .rain ul li:nth-child(7n){animation: rain_wind-none 0.6s linear 1s infinite;}
  .wind-heavy .rain ul li:nth-child(7n){animation: rain_wind-heavy 0.6s linear 1s infinite;}
  .rain ul li:nth-child(8n){animation: rain_wind-none 0.6s linear 1.2s infinite;}
  .wind-heavy .rain ul li:nth-child(8n){animation: rain_wind-heavy 0.6s linear 1.2s infinite;}
  .rain ul li:nth-child(9n){animation: rain_wind-none 0.6s linear 1.3s infinite;}
  .wind-heavy .rain ul li:nth-child(9n){animation: rain_wind-heavy 0.6s linear 1.3s infinite;}
  .rain ul li:nth-child(10n){animation: rain_wind-none 0.6s linear 1.4s infinite;}
  .wind-heavy .rain ul li:nth-child(10n){animation: rain_wind-heavy 0.6s linear 1.4s infinite;}

  .rain-none .rain ul li:nth-child(2n+1),.rain-none .rain ul li:nth-child(3n),
  .rain-light .rain ul li:nth-child(2n+1),.rain-light .rain ul li:nth-child(3n){opacity:0;}
  .rain ul li{animation-duration: 0.27s !important;}
  .rain-heavy .rain ul li{animation-duration: 0.22s !important;}
  .rain-heavy .rain ul li:before{content:' ';display: block;position: absolute;width: 2px;height: 100%;background: #fff;transform: translateX(60px) translatey(-310px);}

  @keyframes rain_wind-none { 0% {transform: rotate(4deg) translateY(0%);}100% {transform: rotate(4deg) translateY(500%)  translateX(0px);}} 
  @keyframes rain_wind-heavy { 0% {transform: rotate(30deg) translateY(0%) translatex(0px);}100% {transform: rotate(30deg) translateY(650%) translateX(500px);}} 


/* Sun
  ----------------------- */
  .sun{position: absolute;z-index: 6;width: 26%;bottom: 21.3%;right: 33%;mix-blend-mode: screen;pointer-events: none;}
  .time_midday .sun,.time_midnight .sun{opacity: 0 !important;}
  .rain-light .sun{opacity: 0.7;}
  .rain-medium .sun{-webkit-filter: blur(3px);opacity: 0.6;}
  .rain-heavy .sun{-webkit-filter: blur(9px);opacity: 0.5;}

/* Stars
  ----------------------- */
  .stars-wrap{position: absolute;width: 100%;z-index: 2;top: 0;height: 100%;display: block;-webkit-mask-image: linear-gradient(black 0%, transparent 60%);}
  .stars{width: 120%;z-index: 2;display: block;position: absolute;transform: rotate(0deg);left: -10%;top: -40%;animation: stars 600s linear 0.4s infinite;opacity:0;}
  .time_sunset .stars{opacity: 0.16;}
  .time_midnight .stars{opacity:1;}
  @keyframes stars{100% {transform: rotate(-360deg);}}


/* Clouds
  ----------------------- */
  .clouds{position: absolute;width: 100%;z-index: 3;top: 0;height: 100%;display: block;mix-blend-mode: screen;}
  .time_midnight .clouds{mix-blend-mode: multiply;}
  .clouds > svg{opacity:0;transition: all 5s ease;}
  

  /* Cirrus */
  .clouds .clouds_cirrus{opacity: 1;position: absolute;bottom: 40%;width: 120%;left: -1%;-webkit-filter: blur(0px);}
  .cirrus-group-1,.cirrus-group-2,.cirrus-group-3,.cirrus-group-4{opacity:0;transition: all 1s ease;}
  .rain-heavy .cirrus-group-1,.rain-heavy .cirrus-group-2,.rain-heavy .cirrus-group-3,.rain-heavy .cirrus-group-4{opacity:0.1;}

  .wind-light .cirrus-group-1{opacity: 0.1;}
  .wind-medium .cirrus-group-1,.wind-medium .cirrus-group-2{opacity: .12;}
  .wind-heavy .cirrus-group-1,.wind-heavy .cirrus-group-2,.wind-heavy .cirrus-group-3,.wind-heavy .cirrus-group-4{opacity: .12;}

  /* Light clouds */
  .clouds_small{position: absolute;bottom: 45%;width: 70%;left: 3%;/* -webkit-filter: blur(3px); */animation: clouds_wind-light 340s linear infinite;}
  .wind-light .clouds_small{opacity: 0.4;}
  .wind-heavy .clouds_small{display: none;}  
  .effects.wind-heavy .clouds_small{animation: clouds-small_wind-large 26s linear infinite;display: block;}  
  @keyframes clouds_wind-light { 50% {transform: translateX(30%);}}
  @keyframes clouds-small_wind-large { 
    0% {transform: translatey(-400%) translateX(-100%) scale(5);-webkit-filter: blur(5px);opacity:0;}
    10% {opacity:0.3;}
    90% {opacity:0.3;}
    100% {transform: translatey(-400%) translateX(200%) scale(5);-webkit-filter: blur(5px);opacity:0;}
  }

  /* Medium clouds */
  .clouds_medium{position: absolute;bottom: 45%;width: 78%;left: -8%;animation: clouds_wind-medium 260s linear infinite;}
  .wind-medium .clouds_medium{opacity: 0.5;}
  .wind-medium.rain-heavy .clouds_medium{opacity: 0.0;}
  
  .effects.wind-heavy .clouds_medium{animation: fx-clouds-medium_wind-large 26s linear infinite;-webkit-filter: blur(5px);}
  @keyframes clouds_wind-medium { 50% {transform: translateX(30%);}}
  @keyframes clouds-medium_wind-large { 
    0% {transform: translatey(20%) translateX(-50%) scale(2);opacity:0;}
    10% {opacity: 0.2;}
    90% {opacity: 0.2;}
    100% {transform: translatey(20%) translateX(100%) scale(2);opacity:0;}
  }
  @keyframes fx-clouds-medium_wind-large { 
    0% {transform: translatey(20%) translateX(-50%) scale(2);opacity:0;}
    10% {opacity: 0.3;}
    90% {opacity: 0.3;}
    100% {transform: translatey(20%) translateX(100%) scale(2);opacity:0;}
  }
  
  /* Large clouds */
  .clouds_large{position: absolute;bottom: 45%;width: 110%;left: -2%;-webkit-filter: blur(0px);}
  .wind-heavy .clouds_large,.rain-medium .clouds_large,.rain-heavy .clouds_large{animation: clouds_wind-large 120s ease-in infinite;}
  @keyframes clouds_wind-large { 
    0% {transform: translatey(20%) translateX(0%) scale(0.6);opacity:0;}
    10% {opacity:1;}
    90% {opacity:1;}
    100% {transform: translatey(-39%) translateX(0%) scale(2);opacity:0;}
  }
  .effects.wind-heavy .clouds_large{animation: fx-clouds_wind-large 120s ease-in infinite;}
  @keyframes fx-clouds_wind-large { 
    0% {transform: translatey(20%) translateX(0%) scale(0.6);opacity:0;-webkit-filter: blur(0px);}
    10% {opacity:1;}
    90% {opacity:1;}
    100% {transform: translatey(-39%) translateX(0%) scale(2);opacity:0;-webkit-filter: blur(5px);}
  }

  /* Light clouds */
  .clouds_massive{position: absolute;bottom: 33%;width: 162%;left: -50%;/* -webkit-filter: blur(3px); */animation: clouds_massive 140s ease-in-out infinite;}
  .rain-heavy .clouds_massive{opacity: 0.6;}
  @keyframes clouds_massive { 50% {transform: translateX(20%);}}
  


/* Background 
  ----------------------- */
  .background{position: absolute;width: 100%;z-index: 1;top: 0;height: 100%;display: block;transition: all 0.5s ease;}
  .sky_gradients{position: absolute;width: 100%;z-index: 1;height: 100%;display: block;opacity: 1;}
  .sky_gradients svg{position: absolute;bottom: 0px;width: 100%;opacity:0;/* will-change: opacity; *//* display: block; */}
  .time_sunrise .sky_sunrise,
  .time_midday .sky_midday,
  .time_sunset .sky_sunset,
  .time_midnight .sky_midnight{opacity:1;}



/* Midground
  ----------------------- */
  .midground{position: absolute;width: 100%;z-index: 3;bottom: 0;pointer-events: none;}
  .reference_shape{opacity:0;pointer-events:none;}

  /* Bay */
  .bay{position: absolute;transform-origin: center bottom;bottom: 35.7%;width: 59.2%;left: 10%;}
  .bay .cls-1{fill: #32a6e9;}
  .time_sunrise .bay .cls-1{fill: #ea54ad;}
  .time_sunset .bay .cls-1{fill: #b95464;}
  .time_midnight .bay .cls-1{fill: #008e70;}
  
  
  /* Mountains right */
  .mountains_right{position: absolute;transform-origin: center bottom;bottom: 0;width: 66.2%;right: 0;}
  .mountains_right .cls-1{fill: #0074d3;}
  .time_sunrise .mountains_right .cls-1{fill: #b83f9a;}
  .time_sunset .mountains_right .cls-1{fill: #9e3654;}
  .time_midnight .mountains_right .cls-1{fill: #006f5e;}

  /* Mountains left */
  .mountains_left{position: absolute;transform-origin: center bottom;bottom: 0.6%;width: 49.2%;left: 15.8%;}
  .mountains_left .cls-1{fill: #0251a0;}
  .time_sunrise .mountains_left .cls-1{fill: #862a86;}
  .time_sunset .mountains_left .cls-1{fill: #821844;}
  .time_midnight .mountains_left .cls-1{fill: #00514d;}
  
  /* Trees (triangular) */
  .trees{position: absolute;bottom: 3.7%;width: 98.3%;left: -3.5%;}
  .trees .cls-1{fill: #052d6d;transform-origin: center bottom;}
  .time_sunrise .trees .cls-1{fill: #531573;}
  .time_sunset .trees .cls-1{fill: #4f0f3d;}
  .time_midnight .trees .cls-1{fill: #00323c;}
  
  .wind-light .trees .cls-1:nth-child(4n){animation: trees_wind-light 4.4s ease-in-out 0.4s infinite;}
  @keyframes trees_wind-light { 50% {transform: rotate(2.4deg);}} 

  .wind-medium .trees .cls-1:nth-child(3n),.wind-medium .trees .cls-1:nth-child(5n){animation: trees_wind-medium 4.4s ease-in-out 0.4s infinite;}
  @keyframes trees_wind-medium { 50% {transform: rotate(3.4deg);}} 

  .wind-heavy .trees .cls-1:nth-child(1n){animation: trees_wind-heavy 3s ease-in-out infinite;}
  .wind-heavy .trees .cls-1:nth-child(2n){animation: trees_wind-heavy 2s ease-in-out 0.1s infinite;}
  .wind-heavy .trees .cls-1:nth-child(3n){animation: trees_wind-heavy 3s ease-in-out 0.2s infinite;}
  .wind-heavy .trees .cls-1:nth-child(4n){animation: trees_wind-heavy 2s ease-in-out 0.7s infinite;}
  .wind-heavy .trees .cls-1:nth-child(5n){animation: trees_wind-heavy 3s ease-in-out 0.4s infinite;}
  @keyframes trees_wind-heavy { 50% {transform: rotate(4.4deg);}} 











/* Foreground
  ----------------------- */
  .foreground{position: absolute;bottom: -4px;width: 100%;z-index: 5;pointer-events: none;}
  .foreground_base{bottom: 0;}
  .foreground_moving{position: absolute;transform-origin: center bottom;}
  
  .foreground .foreground_layer{fill: rebeccapurple;}
  .time_sunrise .foreground .foreground_layer{fill:#21005f;}
  .time_midday .foreground .foreground_layer{fill:#191f56;}
  .time_sunset .foreground .foreground_layer{fill:#1c0636;}
  .time_midnight .foreground .foreground_layer{fill:#001226;}

  

  /* Cabbage_1 */
  .cabbage_1{width: 17%;bottom: 58%;left: -4%;}
  .wind-light .cabbage_1{animation: cabbage_1_wind-light 4s ease-in-out 1.2s infinite;}
  @keyframes cabbage_1_wind-light { 50% {transform: rotate(0.7deg);}} 
  .wind-medium .cabbage_1{animation: cabbage_1_wind-medium 3s ease-in-out 1.2s infinite;}
  @keyframes cabbage_1_wind-medium { 50% {transform: rotate(1deg);}} 
  .wind-heavy .cabbage_1{animation: cabbage_1_wind-heavy 2s ease-in-out 1.2s infinite;}
  @keyframes cabbage_1_wind-heavy { 50% {transform: rotate(1deg);}} 



  /* Cabbage_2 */
  .cabbage_2{width: 20%;bottom: 46%;left: -1.5%;transform: rotate(7deg);}
  .wind-light .cabbage_2{animation: cabbage_2_wind-light 4s ease-in-out infinite;}
  @keyframes cabbage_2_wind-light { 50% {transform: rotate(7.4deg);}} 
  .wind-medium .cabbage_2{animation: cabbage_2_wind-medium 3s ease-in-out infinite;}
  @keyframes cabbage_2_wind-medium { 50% {transform: rotate(8.4deg);}} 
  .wind-heavy .cabbage_2{animation: cabbage_2_wind-heavy 2s ease-in-out infinite;}
  @keyframes cabbage_2_wind-heavy { 50% {transform: rotate(8.4deg);}} 
  


  /* Fern_1 */
  .fern_1{width: 2.3%;left: 23%;bottom: 33.6%;}
  .wind-light .fern_1{animation: fern_1_wind-light 0.5s ease-in-out infinite;}
  @keyframes fern_1_wind-light { 50% {transform: rotate(1.5deg);}} 
  .wind-medium .fern_1,.wind-heavy .fern_1{animation: fern_1_wind-medium 0.5s ease-in-out infinite;}
  @keyframes fern_1_wind-medium { 50% {transform: rotate(3deg);}} 
  .wind-heavy .fern_1,.wind-heavy .fern_1{animation: fern_1_wind-heavy 0.3s ease-in-out infinite;}
  @keyframes fern_1_wind-heavy { 50% {transform: rotate(3deg);}} 
  

  /* Fern_2 */
  .fern_2{width: 1.3%;left: 26.9%;bottom: 30.5%;transform: rotate(10deg);}
  .wind-light .fern_2{animation: fern_2_wind-light 0.4s ease-in-out 0.2s infinite;}
  @keyframes fern_2_wind-light { 50% {transform: rotate(11.3deg);}} 
  .wind-medium .fern_2,.wind-heavy .fern_2{animation: fern_2_wind-medium 0.37s ease-in-out 0.2s infinite;}
  @keyframes fern_2_wind-medium { 50% {transform: rotate(11.8deg);}} 
  .wind-heavy .fern_2,.wind-heavy .fern_2{animation: fern_2_wind-heavy 0.2s ease-in-out 0.2s infinite;}
  @keyframes fern_2_wind-heavy { 50% {transform: rotate(11.8deg);}} 

  /* Fern_3 */
  .fern_3{width: 1.3%;left: 60%;bottom: 24.6%;}
  .wind-light .fern_3{animation: fern_3_wind-light 0.6s ease-in-out 0.2s infinite;}
  @keyframes fern_3_wind-light { 50% {transform: rotate(1.2deg);}} 
  .wind-medium .fern_3{animation: fern_3_wind-medium 0.8s ease-in-out 0.2s infinite;}
  @keyframes fern_3_wind-medium { 50% {transform: rotate(6deg);}} 
  .wind-heavy .fern_3{animation: fern_3_wind-heavy 0.5s ease-in-out 0.2s infinite;}
  @keyframes fern_3_wind-heavy { 50% {transform: rotate(6deg);}} 

  /* Fern_4 */
  .fern_4{width: 3.7%;left: 63.4%;bottom: 30.3%;}
  .wind-light .fern_4{animation: fern_4_wind-light 1.8s ease-in-out 0.5s infinite;}
  @keyframes fern_4_wind-light { 50% {transform: rotate(3deg);}} 
  .wind-medium .fern_4{animation: fern_4_wind-medium 1.8s ease-in-out 0.5s infinite;}
  @keyframes fern_4_wind-medium { 50% {transform: rotate(6deg);}} 
  .wind-heavy .fern_4{animation: fern_4_wind-heavy 1s ease-in-out 0.5s infinite;}
  @keyframes fern_4_wind-heavy { 50% {transform: rotate(6deg);}} 

  /* Fern_5 */
  .fern_5{width: 1.4%;left: 67.4%;bottom: 36.3%;transform: rotate(-10deg);}
  .wind-light .fern_5{animation: fern_5_wind-light 0.6s ease-in-out 0.2s infinite;}
  @keyframes fern_5_wind-light { 50% {transform: rotate(-11.4deg);}}
  .wind-medium .fern_5{animation: fern_5_wind-medium 0.9s ease-in-out 0.2s infinite;}
  @keyframes fern_5_wind-medium { 50% {transform: rotate(-4deg);}}
  .wind-heavy .fern_5{animation: fern_5_wind-heavy 0.3s ease-in-out 0.2s infinite;}
  @keyframes fern_5_wind-heavy { 50% {transform: rotate(-4deg);}}

  /* Fern_6 */
  .fern_6{width: 2.5%;left: 78.2%;bottom: 53.3%;}
  .wind-light .fern_6{animation: fern_6_wind-light 1.2s ease-in-out 0.2s infinite;}
  @keyframes fern_6_wind-light { 50% {transform: rotate(-1deg);}}
  .wind-medium .fern_6{animation: fern_6_wind-medium 0.8s ease-in-out 0.2s infinite;}
  @keyframes fern_6_wind-medium { 50% {transform: rotate(-3deg);}}
  .wind-heavy .fern_6{animation: fern_6_wind-heavy 0.5s ease-in-out 0.2s infinite;}
  @keyframes fern_6_wind-heavy { 50% {transform: rotate(-3deg);}}

  /* Flax_1 */
  .flax_1{width: 4.9%;bottom: 60%;left: 8.9%;transform: rotate(21deg);}
  .wind-light .flax_1{animation: flax_1_wind-light 3s ease-in-out 0.5s infinite;}
  @keyframes flax_1_wind-light { 50% {transform: rotate(22.1deg);}}
  .wind-medium .flax_1{animation: flax_1_wind-medium 3s ease-in-out 0.5s infinite;}
  @keyframes flax_1_wind-medium { 50% {transform: rotate(24deg);}}
  .wind-heavy .flax_1{animation: flax_1_wind-heavy 2s ease-in-out 0.4s infinite;}
  @keyframes flax_1_wind-heavy { 50% {transform: rotate(24deg);}}


  /* Flax_2 */
  .flax_2{width: 4%;bottom: 51%;left: 14%;transform: rotate(21deg);}
  .wind-light .flax_2{animation: flax_2_wind-light 7s ease-in-out infinite;}
  @keyframes flax_2_wind-light { 50% {transform: rotate(23.2deg);}}
  .wind-medium .flax_2{animation: flax_2_wind-medium 7s ease-in-out infinite;}
  @keyframes flax_2_wind-medium { 50% {transform: rotate(25.2deg);}}
  .wind-heavy .flax_2{animation: flax_2_wind-heavy 2.2s ease-in-out infinite;}
  @keyframes flax_2_wind-heavy { 50% {transform: rotate(25.2deg);}}


  /* Flax_3 */
  .flax_3{width: 4%;bottom: 72%;right: 6%;transform: rotate(-13deg);}
  .wind-light .flax_3{animation: flax_3_wind-light 3s ease-in-out 0.5s infinite;}
  @keyframes flax_3_wind-light { 50% {transform: rotate(-14.6deg);}}
  .wind-medium .flax_3{animation: flax_3_wind-medium 3s ease-in-out 0.5s infinite;}
  @keyframes flax_3_wind-medium { 50% {transform: rotate(-16.6deg);}}
  .wind-heavy .flax_3{animation: flax_3_wind-heavy 2s ease-in-out 0.5s infinite;}
  @keyframes flax_3_wind-heavy { 50% {transform: rotate(-16.6deg);}}

  /* Flax_4 */
  .flax_4{width: 3.8%;bottom: 64%;right: 2.6%;transform: rotate(0deg);}
  .wind-light .flax_4{animation: flax_4_wind-light 5s ease-in-out infinite;}
  @keyframes flax_4_wind-light { 50% {transform: rotate(-1deg);}}
  .wind-medium .flax_4{animation: flax_4_wind-medium 4s ease-in-out infinite;}
  @keyframes flax_4_wind-medium { 50% {transform: rotate(-3deg);}}
  .wind-heavy .flax_4{animation: flax_4_wind-heavy 3s ease-in-out infinite;}
  @keyframes flax_4_wind-heavy { 50% {transform: rotate(-3deg);}}

  /* Long_grass */
  .long_grass{width: 6.8%;bottom: 60%;right: 12.2%;transform: rotate(-20deg);}
  .wind-light .long_grass{animation: long_grass_wind-light 3s ease-in-out infinite;}
  @keyframes long_grass_wind-light { 50% {transform: rotate(-23deg);}}
  .wind-medium .long_grass{animation: long_grass_wind-medium 3s ease-in-out infinite;}
  @keyframes long_grass_wind-medium { 50% {transform: rotate(-24deg);}}
  .wind-heavy .long_grass{animation: long_grass_wind-heavy 2s ease-in-out infinite;}
  @keyframes long_grass_wind-heavy { 50% {transform: rotate(-24deg);}}

  /* Ponga */
  .ponga{width: 28%;bottom: 63%;right: -1.4%;transform: rotate(-28deg);}
  .wind-light .ponga{animation: ponga_wind-light 5s ease-in-out infinite;}
  @keyframes ponga_wind-light { 50% {transform: rotate(-28.8deg);}}
  .wind-medium .ponga{animation: ponga_wind-medium 5s ease-in-out infinite;}
  @keyframes ponga_wind-medium { 50% {transform: rotate(-29.8deg);}}
  .wind-heavy .ponga{animation: ponga_wind-heavy 4s ease-in-out infinite;}
  @keyframes ponga_wind-heavy { 50% {transform: rotate(-29.8deg);}}

   /* Small_tree */
  .small_tree{width: 7.5%;bottom: 35.6%;right: 25.8%;transform: rotate(0deg);}
  .wind-light .small_tree{animation: small_tree_wind-light 2s ease-in-out infinite;}
  @keyframes small_tree_wind-light { 50% {transform: rotate(1deg);}}
  .wind-medium .small_tree{animation: small_tree_wind-medium 2s ease-in-out infinite;}
  @keyframes small_tree_wind-medium { 50% {transform: rotate(1.8deg);}}
  .wind-heavy .small_tree{animation: small_tree_wind-heavy 1s ease-in-out infinite;}
  @keyframes small_tree_wind-heavy { 50% {transform: rotate(1.8deg);}}

  /* Big_tree */
  .big_tree{width: 21.8%;bottom: 76.6%;right: -10.5%;transform: rotate(-16deg);}
  .wind-light .big_tree{animation: big_tree_wind-light 5s ease-in-out infinite;}
  @keyframes big_tree_wind-light { 50% {transform: rotate(-16.8deg);}}
  .wind-medium .big_tree{animation: big_tree_wind-medium 4s ease-in-out infinite;}
  @keyframes big_tree_wind-medium { 50% {transform: rotate(-17.8deg);}}
  .wind-heavy .big_tree{animation: big_tree_wind-heavy 3s ease-in-out infinite;}
  @keyframes big_tree_wind-heavy { 50% {transform: rotate(-17.8deg);}}

  /* man-wrap*/
  .man-wrap{position: absolute;width: 11%;bottom: 12%;left: 37.2%;}
  .man-wrap .man{position: relative;}
  .man-wrap .feathers{position: absolute;top: 15%;width: 15%;left: 37%;}
  .wind-light .feathers{animation: feathers_wind-light 3s ease-in-out infinite;}
  @keyframes feathers_wind-light { 50% {transform: rotate(7deg);}}
  .wind-medium .feathers{animation: feathers_wind-medium 3.2s ease-in-out infinite;}
  @keyframes feathers_wind-medium { 50% {transform: rotate(12deg);}}
  .wind-heavy .feathers{animation: feathers_wind-heavy 2s ease-in-out infinite;}
  @keyframes feathers_wind-heavy { 50% {transform: rotate(12deg);}}