.windy-wrapper {
	position:relative;
	margin:0 auto;
	text-align:center;
	width:100%;
	height:185px;
	overflow:hidden;
	display:block;
	z-index:-1
}
.sun {
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #000;
	top: 50px;
	left: 270px;
	z-index: 1;
	animation: rotate 10s linear infinite; 
}
.sun span {
	position: absolute;
	width: 2px;
	height: 14px;
	background-color: #000;
	top: -18px;
	left: 7px;
	z-index: 1;
	transform-origin: center bottom;
    transform: scaleY(1);
	animation: sun-ray-1 1s linear infinite;
	box-shadow: 4px 4px 0 0 #f1c40f;
}
@keyframes sun-ray-1 {
  0%,100% { 
		transform: scaleY(1); 
  }
  50% { 
		transform: scaleY(0.6); 
  }
}
.sun span:nth-child(2) {
    transform: rotate(45deg) scaleY(0.6);
	top: -15px;
	left: 16px;
	animation: sun-ray-2 1s linear infinite;
}
@keyframes sun-ray-2 {
  0%,100% { 
    transform: rotate(45deg) scaleY(0.6);
  }
  50% { 
    transform: rotate(45deg) scaleY(1);
  }
}
.sun span:nth-child(3) {
    transform: rotate(90deg) scaleY(1);
	top: -5px;
	left: 20px;
	animation: sun-ray-3 1s linear infinite;
}
@keyframes sun-ray-3 {
  0%,100% { 
    transform: rotate(90deg) scaleY(1);
  }
  50% { 
    transform: rotate(90deg) scaleY(0.6);
  }
}
.sun span:nth-child(4) {
    transform: rotate(135deg) scaleY(0.6);
	top: 3px;
	left: 15px;
	animation: sun-ray-4 1s linear infinite;
}
@keyframes sun-ray-4 {
  0%,100% { 
    transform: rotate(135deg) scaleY(0.6);
  }
  50% { 
    transform: rotate(135deg) scaleY(1);
  }
}
.sun span:nth-child(5) {
    transform: rotate(180deg) scaleY(1);
	top: 6px;
	left: 7px;
	animation: sun-ray-5 1s linear infinite;
}
@keyframes sun-ray-5 {
  0%,100% { 
    transform: rotate(180deg) scaleY(1);
  }
  50% { 
    transform: rotate(180deg) scaleY(0.6);
  }
}
.sun span:nth-child(6) {
    transform: rotate(225deg) scaleY(0.6);
	top: 3px;
	left: -2px;
	animation: sun-ray-6 1s linear infinite;
}
@keyframes sun-ray-6 {
  0%,100% { 
    transform: rotate(225deg) scaleY(0.6);
  }
  50% { 
    transform: rotate(225deg) scaleY(1);
  }
}
.sun span:nth-child(7) {
    transform: rotate(270deg) scaleY(1);
	top: -5px;
	left: -5px;
	animation: sun-ray-7 1s linear infinite;
}
@keyframes sun-ray-7 {
  0%,100% { 
    transform: rotate(270deg) scaleY(1);
  }
  50% { 
    transform: rotate(270deg) scaleY(0.6);
  }
}
.sun span:nth-child(8) {
    transform: rotate(315deg) scaleY(0.6);
	top: -14px;
	left: -2px;
	animation: sun-ray-8 1s linear infinite;
}
@keyframes sun-ray-8 {
  0%,100% { 
    transform: rotate(315deg) scaleY(0.6);
  }
  50% { 
    transform: rotate(315deg) scaleY(1);
  }
}
.mountain-1 {
	position:absolute;
	border:2px solid #000;
	width:14px;
	height:14px;
	bottom:37px;
	left:80px;
	z-index:1;
	transform:rotate(-45deg)
}
.mountain-1:before {
	position:absolute;
	content:"";
	width:70px;
	height:2px;
	background-color:#000;
	top:-2px;
	left:-72px
}
.mountain-1:after {
	position:absolute;
	content:"";
	height:14px;
	width:2px;
	background-color:#000;
	top:10px;
	left:10px;
	box-shadow:4px -4px 0 0 #94c6e7
}
.mountain-2 {
	position:absolute;
	border:2px solid #000;
	width:18px;
	height:18px;
	bottom:47px;
	left:130px;
	z-index:1;
	transform:rotate(-45deg)
}
.mountain-2:before {
	position:absolute;
	content:"";
	width:40px;
	height:2px;
	background-color:#000;
	top:-2px;
	left:-42px
}
.mountain-2:after {
	position:absolute;
	content:"";
	height:16px;
	width:2px;
	background-color:#000;
	top:14px;
	left:14px;
	box-shadow:4px -4px 0 0 #94c6e7
}
.mountain-3 {
	position:absolute;
	border:2px solid #000;
	width:20px;
	height:20px;
	bottom:70px;
	left:198px;
	z-index:1;
	transform:rotate(-45deg)
}
.mountain-3:before {
	position:absolute;
	content:"";
	width:70px;
	height:2px;
	background-color:#000;
	top:-2px;
	left:-72px
}
.mountain-3:after {
	position:absolute;
	content:"";
	height:30px;
	width:2px;
	background-color:#000;
	top:16px;
	left:16px;
	box-shadow:4px -12px 0 0 #94c6e7
}
.mountain-4 {
	position:absolute;
	width:0;
	height:0;
	bottom:76px;
	left:245px;
	z-index:1;
	transform:rotate(-45deg)
}
.mountain-4:before {
	position:absolute;
	content:"";
	width:15px;
	height:2px;
	background-color:#000;
	top:0;
	left:-15px
}
.mountain-4:after {
	position:absolute;
	content:"";
	height:60px;
	width:2px;
	background-color:#000;
	top:0;
	left:0;
	box-shadow:-5px 6px 0 0 #94c6e7
}
.mountain-5 {
	position:absolute;
	border:2px solid #000;
	width:14px;
	height:14px;
	bottom:50px;
	left:290px;
	z-index:1;
	transform:rotate(-45deg)
}
.mountain-5:before {
	position:absolute;
	content:"";
	width:15px;
	height:2px;
	background-color:#000;
	top:-2px;
	left:-17px
}
.mountain-5:after {
	position:absolute;
	content:"";
	height:84px;
	width:2px;
	background-color:#000;
	top:10px;
	left:10px;
	box-shadow:-5px 6px 0 0 #94c6e7
}
.windmill-pole-wrap {
	position:absolute;
	bottom:-3px;
	left:130px;
	perspective:70px;
	z-index:50
}
.windmill-pole-wrap.back-left {
	left:50px;
	z-index:1;
	transform:scale(.7);
	transform-origin:center bottom
}
.windmill-pole-wrap.right {
	left:auto;
	right:85px;
	transform:scale(.85);
	transform-origin:center bottom
}
.windmill-pole {
	position:absolute;
	bottom:0;
	border:3px solid #000;
	width:14px;
	height:220px;
	left:-7px;
	background-color:#fff;
	transform:rotateX(15deg);
	transform-origin:center bottom
}
.windmill-pole-ellipses {
	position:absolute;
	bottom:114px;
	left:130px;
	z-index:51
}
.windmill-pole-ellipses.back-left {
	left:50px;
	bottom:80px;
	z-index:3;
	transform:scale(.7);
	transform-origin:center bottom
}
.windmill-pole-ellipses.right {
	left:auto;
	right:85px;
	bottom:100px;
	transform:scale(.85);
	transform-origin:center bottom
}
.windmill-pole-ellipses-wrapper {
	position:absolute;
	top:0;
	left:0;
	animation:rotate-ellipses 6s linear infinite;
	-webkit-animation-play-state:paused;
	-moz-animation-play-state:paused;
	animation-play-state:paused;
	-webkit-transition:all 300ms linear;
	transition:all 300ms linear
}
.windmill-pole-ellipses-wrap {
	position:absolute;
	top:0;
	left:0;
	animation:rotate-ellipses 2s linear infinite;
	-webkit-transition:all 300ms linear;
	transition:all 300ms linear;
	-webkit-animation-play-state:running;
	-moz-animation-play-state:running;
	animation-play-state:running
}
.windmill-pole-ellipses-center {
	position:absolute;
	top:-7px;
	left:-7px;
	width:14px;
	height:14px;
	border-radius:50%;
	background-color:#fff;
	border:2px solid #000;
	z-index:2
}
.ellipses {
	position:absolute;
	top:0;
	left:0;
	z-index:1
}
.ellipses span {
	position:absolute;
	top:-70px;
	left:-5px;
	width:10px;
	height:70px;
	border-radius:100%;
	background-color:#fff;
	border:2px solid #000;
	transform-origin:center bottom
}
.ellipses span:nth-child(2) {
	transform:rotate(120deg)
}
.ellipses span:nth-child(3) {
	transform:rotate(240deg)
}
.ellipses.delayed span {
	transform:rotate(60deg)
}
.ellipses.delayed span:nth-child(2) {
	transform:rotate(180deg)
}
.ellipses.delayed span:nth-child(3) {
	transform:rotate(300deg)
}
@keyframes rotate-ellipses {
	0% {
	transform:rotate(0deg)
}
100% {
	transform:rotate(-360deg)
}
}.clouds-wind-wrapper {
	position:absolute;
	top:0;
	left:0;
	width:3600px;
	-webkit-transition:all 300ms linear;
	transition:all 300ms linear;
	z-index:5;
	animation:moveClouds 4s linear infinite;
	-webkit-animation-play-state:running;
	-moz-animation-play-state:running;
	animation-play-state:running
}
.clouds-wind-wrap {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	-webkit-transition:all 300ms linear;
	transition:all 300ms linear;
	animation:moveClouds 12s linear infinite;
	-webkit-animation-play-state:paused;
	-moz-animation-play-state:paused;
	animation-play-state:paused;
	-webkit-transition:all 300ms linear;
	transition:all 300ms linear
}
@keyframes moveClouds {
	0% {
	transform:translateX(0)
}
100% {
	transform:translateX(-33.3333333333%)
}
}.clouds-wind-section {
	position:absolute;
	top:0;
	left:0;
	width:400px;
	-webkit-transition:all 300ms linear;
	transition:all 300ms linear
}
.clouds-wind-section.snd {
	left:400px
}
.clouds-wind-section.trd {
	left:800px
}
.clouds-wind-section.forth {
	left:1200px
}
.clouds-wind-section.fifth {
	left:1600px
}
.clouds-wind-section.six {
	left:2000px
}
.clouds-wind-section.seven {
	left:2400px
}
.clouds-wind-section.eight {
	left:2800px
}
.clouds-wind-section.nine {
	left:3200px
}
.clouds-wind-section.ten {
	left:3600px
}
.cloud {
	position:absolute;
	top:50px;
	left:50px;
	-webkit-transition:all 300ms linear;
	transition:all 300ms linear
}
.cloud span {
	position:absolute;
	top:0;
	left:0;
	width:20px;
	height:20px;
	border-radius:50%;
	border-width:2px;
	border-style:solid;
	border-color:transparent transparent #000 #000;
	background-color:#fff;
	transform:rotate(45deg);
	z-index:7
}
.cloud span:nth-child(2) {
	top:-9px;
	left:10px;
	width:22px;
	height:22px;
	border-color:transparent transparent transparent #000;
	z-index:6
}
.cloud span:nth-child(3) {
	top:-22px;
	left:20px;
	width:30px;
	height:30px;
	border-color:#000 transparent transparent #000;
	box-shadow:2px -3px 0 0 #3498db;
	z-index:3
}
.cloud span:nth-child(4) {
	top:5px;
	left:10px;
	width:40px;
	height:15px;
	border-radius:0;
	border:none;
	border-bottom:2px solid #000;
	transform:rotate(0);
	z-index:6
}
.cloud span:nth-child(5) {
	top:-7px;
	left:35px;
	width:27px;
	height:27px;
	border-color:#000 #000 transparent transparent;
	box-shadow:2px -3px 0 0 #3498db;
	z-index:4
}
.cloud.snd {
	top:100px;
	left:300px
}
.cloud.trd {
	top:150px;
	left:220px;
	transform:rotateY(180deg);
	transform-origin:center center
}
.cloud.forth {
	top:100px;
	left:300px
}
.cloud.trd span {
	box-shadow:-3px 2px 0 0 #3498db
}
.cloud.trd span:nth-child(4) {
	box-shadow:none
}
.cloud.trd span:nth-child(5) {
	box-shadow:none
}
.wind {
	position:absolute;
	top:90px;
	left:50px
}
.wind span {
	position:absolute;
	top:0;
	left:0;
	width:10px;
	height:10px;
	border-radius:50%;
	border-width:2px;
	border-style:solid;
	transform:rotate(45deg);
	border-color:transparent transparent #000 #000
}
.wind span:before {
	position:absolute;
	content:"";
	bottom:15px;
	right:-38px;
	width:45px;
	height:2px;
	background-color:#000;
	transform:rotate(-45deg);
	box-shadow:4px 4px 0 0 #3498db
}
.wind span:after {
	position:absolute;
	content:"";
	bottom:40px;
	right:-48px;
	width:14px;
	height:2px;
	background-color:#000;
	transform:rotate(-45deg);
	box-shadow:4px 4px 0 0 #3498db
}
.wind span:nth-child(2) {
	top:3px;
	left:-16px;
	width:12px;
	height:12px
}
.wind span:nth-child(2):after {
	width:50px;
	bottom:58px;
	right:-83px
}
.wind span:nth-child(3) {
	top:18px;
	left:12px;
	width:40px;
	height:2px;
	border:none;
	border-radius:0;
	background-color:#000;
	transform:rotate(0)
}
.wind span:nth-child(3):before {
	width:10px;
	bottom:auto;
	top:0;
	left:50px;
	right:auto;
	transform:rotate(0)
}
.wind span:nth-child(3):after {
	width:30px;
	bottom:auto;
	top:0;
	left:70px;
	right:auto;
	transform:rotate(0)
}
.wind span:nth-child(4) {
	top:23px;
	left:24px;
	width:10px;
	height:2px;
	border:none;
	border-radius:0;
	background-color:#000;
	transform:rotate(0)
}
.wind span:nth-child(4):before {
	width:40px;
	bottom:auto;
	top:0;
	left:20px;
	right:auto;
	transform:rotate(0)
}
.wind span:nth-child(4):after {
	width:10px;
	bottom:auto;
	top:0;
	left:70px;
	right:auto;
	transform:rotate(0)
}
.wind.snd {
	top:140px;
	left:260px;
	transform:scale(.9)
}
.wind-small {
	position:absolute;
	top:0;
	left:0
}
.wind-small span {
	position:absolute;
	top:170px;
	left:32px;
	height:2px;
	width:8px;
	background-color:#000;
	box-shadow:4px 4px 0 0 #3498db
}
.wind-small span:nth-child(2) {
	top:150px;
	left:52px;
	width:16px
}
.wind-small span:nth-child(2):after {
	left:26px;
	width:6px;
	height:2px;
	background-color:#000;
	position:absolute;
	content:"";
	top:0;
	box-shadow:4px 4px 0 0 #3498db
}
.wind-small span:nth-child(3) {
	top:187px;
	left:102px;
	width:16px
}
.wind-small span:nth-child(4) {
	top:180px;
	left:362px;
	width:10px
}
.wind-small span:nth-child(5) {
	top:40px;
	left:332px;
	width:20px
}
.wind-small span:nth-child(5):after {
	left:30px;
	width:7px;
	height:2px;
	background-color:#000;
	position:absolute;
	content:"";
	top:0;
	box-shadow:4px 4px 0 0 #3498db
}
.wind-small span:nth-child(6) {
	top:30px;
	left:122px;
	width:16px
}
.wind-small span:nth-child(7) {
	top:70px;
	left:172px;
	width:12px
}
.wind-small span:nth-child(8) {
	top:50px;
	left:188px;
	width:8px
}
.wind-small span:nth-child(8):after {
	left:18px;
	width:3px;
	height:2px;
	background-color:#000;
	position:absolute;
	content:"";
	top:0;
	box-shadow:4px 4px 0 0 #3498db
}
.tree {
	position:absolute;
	bottom:0;
	left:180px;
	z-index:3;
	transform-origin:center bottom;
	animation:moveTree 1s linear infinite;
	-webkit-transition:all 300ms linear;
	transition:all 300ms linear;
	-webkit-animation-play-state:running;
	-moz-animation-play-state:running;
	animation-play-state:running
}
.tree-wrap {
	position:absolute;
	bottom:0;
	left:0;
	z-index:3;
	transform-origin:center bottom;
	-webkit-transition:all 300ms linear;
	transition:all 300ms linear
}
@keyframes moveTree {
	0%,100% {
	transform:skewX(16deg)
}
20% {
	transform:skewX(18deg)
}
40% {
	transform:skewX(20deg)
}
60% {
	transform:skewX(17deg)
}
80% {
	transform:skewX(18deg)
}
}.tree span {
	position:absolute;
	bottom:0;
	left:0;
	width:2px;
	height:8px;
	background-color:#000;
	z-index:3;
	transform:scale(1.1)
}
.tree span:after {
	position:absolute;
	content:"";
	bottom:100%;
	left:50%;
	margin-left:-8px;
	width:16px;
	height:26px;
	background-color:#fff;
	border-radius:50%;
	border-width:2px;
	border-style:solid;
	border-color:#000 #000 #000 #000
}
.tree span:before {
	position:absolute;
	content:"";
	bottom:calc(100% + 4px);
	left:50%;
	margin-left:-4px;
	width:16px;
	height:26px;
	border-radius:50%;
	border-width:2px;
	border-style:solid;
	border-color:transparent #2ecc71 transparent transparent;
	transform:rotate(-15deg)
}
.tree span:nth-child(2) {
	left:30px
}
.tree span:nth-child(3) {
	left:160px
}
.tree span:nth-child(4) {
	left:-107px
}
.slow-wind .windmill-pole-ellipses-wrapper {
	-webkit-animation-play-state:running;
	-moz-animation-play-state:running;
	animation-play-state:running
}
.slow-wind .windmill-pole-ellipses-wrap {
	-webkit-animation-play-state:paused;
	-moz-animation-play-state:paused;
	animation-play-state:paused
}
.slow-wind .clouds-wind-wrapper {
	-webkit-animation-play-state:paused;
	-moz-animation-play-state:paused;
	animation-play-state:paused
}
.slow-wind .clouds-wind-wrap {
	-webkit-animation-play-state:running;
	-moz-animation-play-state:running;
	animation-play-state:running
}
.slow-wind .tree-wrap {
	transform:skewX(-10deg)
}
.slow-wind .tree {
	animation-duration:1.8s
}
