@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');

body{
	width: 100%;
	display: block;
	overflow-x: hidden;
	background: #fff;
	font-family: 'Poppins', sans-serif;
}
.switch-wrap {
	position: relative;
	font-size: 17px;
	color: #212121;
	font-weight: 600;
	letter-spacing: 1px;
	text-align: center;
	margin: 0 auto;
	margin-top: 30px;
	-webkit-transition: all 500ms linear;
	transition: all 500ms linear; 
}
.switch-wrap span {
	font-size: 14px;
	color: #000;
	font-weight: 500;
	letter-spacing: 0;
}
#switch,
#circle {
	height: 31px;
	cursor: pointer;
	border: 2px solid #000;
	-webkit-transition: all 0.4s cubic-bezier(0.54, 1.6, 0.5, 1);
		transition: all 0.4s cubic-bezier(0.54, 1.6, 0.5, 1);
} 
#switch {
	width: 60px;
	margin: 0 auto;
	border-radius: 27px;
	position: relative;
	display: block;
	text-align: center;
	margin: 0 auto;
    transform: translateY(10px);
}
#circle {
	margin-top: 5%;
	margin-left: 5%;
	width: 40%;
	height: 80%;
	border-radius: 50%;
	box-shadow: inset 4px -1px 0 0 #f1c40f;
}
.switched {
	border-color: #000 !important;
}
.switched #circle {
	margin-left: 55%;
	box-shadow: inset 4px -1px 0 0 #2ecc71;
}
.main-wrapper{
	position: relative;
	margin: 0 auto;
	text-align: center;
	width: 400px;
	height: 300px;
	overflow: hidden;
	display: block;
	border: 2px solid #000;
	z-index: 5;
	margin-top: 30px;
  margin-bottom: 60px;
	background: #fff;
}
.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; 
}
@keyframes rotate {
  0% { 
		transform: rotate(0deg);  
  }
  100% { 
		transform: rotate(-360deg);   
  }
}
.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(0.7);
	transform-origin: center bottom;
}
.windmill-pole-wrap.right{
	left: auto;
	right: 85px;
	transform: scale(0.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(0.7);
	transform-origin: center bottom;
}
.windmill-pole-ellipses.right{
	left: auto;
	right: 85px;
	bottom: 100px;
	transform: scale(0.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);
}
body.slow-wind .windmill-pole-ellipses-wrapper{
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}
body.slow-wind .windmill-pole-ellipses-wrap{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
@keyframes rotate-ellipses {
  0% { 
		transform: rotate(0deg);  
  }
  100% { 
		transform: rotate(-360deg);   
  }
}
.clouds-wind-wrapper{
    position: absolute;
	top: 0;
	left: 0;
	width: 1200px;
	-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: 1200px;
	-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.333333333333%);  
  }
}
body.slow-wind .clouds-wind-wrapper{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused; 
}
body.slow-wind .clouds-wind-wrap{
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}
.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;
}
.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.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(0.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); 
  }
}
body.slow-wind .tree-wrap{
	transform: skewX(-10deg); 
}
body.slow-wind .tree{
	animation-duration: 1.8s;
}
.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;
}

/* #Link to page
================================================== */

.link-to-portfolio {
	  position: fixed;
    top: 30px;
    right: 30px;
    z-index: 20;
    cursor: pointer;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 3px;
    background-position: center center;
    background-size: 30px 30px;
  background-repeat: no-repeat;
  background-color: #212121;
    background-image: url('https://blog.codepen.io/wp-content/uploads/2012/06/Button-White-Small.png');
    box-shadow: 0 0 0 2px rgba(0,0,0,.1);
    transition: opacity .2s, border-radius .2s, box-shadow .2s;
    transition-timing-function: ease-out;
}
.link-to-portfolio:hover {
    opacity: 0.8;
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(0,0,0,.1);
}