/*ANIMATIONS*/

.rayon-soleil.partly-cloudy {
	animation: day-cloudy 3s linear 0s infinite normal backwards;
	-webkit-animation: day-cloudy 3s linear 0s infinite normal backwards;
}

.rayon-soleil path:nth-child(even) {
	animation: clear-day 2.6s linear 0s infinite alternate-reverse backwards;
	-webkit-animation: clear-day 2.6s linear 0s infinite alternate-reverse backwards;
}

.rayon-soleil path:nth-child(odd) {
	animation: clear-day 2.6s linear 0.5s infinite alternate-reverse backwards;
	-webkit-animation: clear-day 2.6s linear 0.5s infinite alternate-reverse backwards;
}

.cloudy{
	animation: cloudy 2.5s linear 0.3s infinite normal backwards;
	-webkit-animation: cloudy 2.5s linear 0.3s infinite normal backwards;
}

.rain path:nth-child(1), .rain path:nth-child(4) {
	animation: rain 1.5s linear -0.3s infinite normal backwards;
	-webkit-animation: rain 1.5s linear -0.3s infinite normal backwards;
}

.rain path:nth-child(2), .rain path:nth-child(5) {
	animation: rain 1.5s linear 0.8s infinite normal backwards;
	-webkit-animation: rain 1.5s linear 0.8s infinite normal backwards;
}

.rain path:nth-child(3), .rain path:nth-child(6) {
	animation: rain 1.5s linear 0s infinite normal backwards;
	-webkit-animation: rain 1.5s linear 0s infinite normal backwards;
}

.fog path:nth-child(odd) {
	animation: fog 6s linear -4.5s infinite normal forwards;
	-webkit-animation: fog 6s linear -4.5s infinite normal forwards;
}

.fog path:nth-child(even) {
	animation: fog 6s linear -2s infinite reverse forwards;
	-webkit-animation: fog 6s linear -2s infinite reverse forwards;
}

.fog path:nth-child(3) {
	animation-delay: -4s;
	-webkit-animation-delay: -4s;
}

.snow path {
	animation: rain 2s linear -2s infinite normal backwards ;
	-webkit-animation: rain 2s linear -2s infinite normal backwards ;
}

.snow path:nth-child(1) {
	animation-delay: 6s;
	-webkit-animation-delay: 6s;
}

.snow path:nth-child(2) {
	animation-delay: 1.1s;
	-webkit-animation-delay: 1.1s;
}

.snow path:nth-child(3) {
	animation-delay: -3.6s;
	-webkit-animation-delay: -3.6s;
}

.snow path:nth-child(4) {
	animation-delay: -7.9s;
	-webkit-animation-delay: -7.9s;
}

.snow path:nth-child(5) {
	animation-delay: -4.7s;
	-webkit-animation-delay: -4.7s;
}

.snow path:nth-child(6) {
	animation-delay: 7.1s;
	-webkit-animation-delay: 7.1s;
}

.hail > g {
	animation: rain 0.75s linear -2s infinite normal backwards ;
	-webkit-animation: rain 0.75s linear -2s infinite normal backwards ;
}

.hail > g:nth-child(1) {
	animation-delay: -4.9s;
	-webkit-animation-delay: -4.9s;
}

.hail > g:nth-child(2) {
	animation-delay: -1.5s;
	-webkit-animation-delay: -1.5s;
}

.hail > g:nth-child(3) {
	animation-delay: -3.2s;
	-webkit-animation-delay: -3.2s;
}

.hail > g:nth-child(4) {
	animation-delay: 0s;
	-webkit-animation-delay: 0s;
}

.thunderstorm {
	animation: thunderstorm 7s linear 0s infinite alternate-reverse backwards ;
	-webkit-animation: thunderstorm 7s linear 0s infinite alternate-reverse backwards ;
}

.clear-night > g {
	animation: clear-night 7s linear 0s infinite normal backwards ;
	-webkit-animation: clear-night 7s linear 0s infinite normal backwards ;
}

.partly-cloudy-night > g:first-of-type {
	animation: moon-cloudy 4s linear 0s infinite normal backwards;
	-webkit-animation: moon-cloudy 4s linear 0s infinite normal backwards;
}

.partly-cloudy-night > g:last-of-type {
	animation: cloudy2 4s linear 0.3s infinite alternate-reverse backwards;
	-webkit-animation: cloudy2 4s linear 0.3s infinite alternate-reverse backwards;
}

.fleet path {
	animation: fleet 1.5s linear -1.2s infinite normal forwards ;
	-webkit-animation: fleet 1.5s linear -1.2s infinite normal forwards ;
}

.fleet path:nth-child(1) {
	animation-delay: -3.2s;
	-webkit-animation-delay: -3.2s;
}

.fleet path:nth-child(2) { /*snow*/
	animation-delay: -1.1s;
	-webkit-animation-delay: -1.1s;
}

.fleet path:nth-child(3) {
	animation-delay: -2.4s;
	-webkit-animation-delay: -2.4s;
}

.fleet path:nth-child(4) { /*snow*/
	animation-delay: -2.9s;
	-webkit-animation-delay: -2.9s;
}

.wind > g:first-of-type path { /*nuage wind*/
	animation: fog 5s linear 0s infinite alternate-reverse forwards;
	-webkit-animation: fog 5s linear 0s infinite alternate-reverse forwards;
}

.wind > g:last-of-type path { /*wind*/
	animation: wind 1.5s linear -4.5s infinite alternate-reverse forwards;
	-webkit-animation: wind 1.5s linear -4.5s infinite alternate-reverse forwards;
}

.wind > g:last-of-type path:nth-child(2) {
	animation-delay: -2.9s;
	-webkit-animation-delay: -2.9s;
}

.wind > g:last-of-type path:nth-child(3) {
	animation-delay: -2.4s;
	-webkit-animation-delay: -2.4s;
}

/*KEYFRAMES*/
@keyframes clear-day {
	to {	opacity: 0;	}
	40% {	opacity: 0.5;	}
	60% {	opacity: 1;	}
	from {	opacity: 0;	}
}

@keyframes day-cloudy {
	to {	transform: rotate(-2deg); transform-origin: center top;}
	50% {	transform: rotate(-3.20deg);transform-origin: center top; }
	from {	transform: rotate(-2deg);transform-origin: center top;	 }
}

@keyframes cloudy {
	to {	transform: translateX(0);	}
	50% {	transform: translateX(2px);	}
	from {	transform: translateX(0);	}
}

@keyframes cloudy2 {
	to {	transform: translateY(0);	}
	50% {	transform: translateY(2px);	}
	from {	transform: translateY(0);	}
}

@keyframes rain {
	to {	transform: translateY(4px); opacity: 0;	}
	20% {	opacity: 0.25;	}
	40% {	opacity: 0.5;	}
	50% {	transform: translateY(0px);	}
	60% {	opacity: 0.75;	}
	80% {	opacity: 1;	}
	from {	transform: translateY(-4px); opacity: 0; }
}

@keyframes fog {
	to {	transform: translateX(-3px);	}
	40% {	transform: translateX(0);	}
	60% {	transform: translateX(3px);	}
	80% {	transform: translateX(0);	}
	from {	transform: translateX(-3px);	}
}

@keyframes thunderstorm {
	to {	opacity: 0;	}
	10% {	opacity: 1;	}
	25% {	opacity: 0;	}
	30% {	opacity: 1;	}
	35% {	opacity: 0;	}
	40% {	opacity: 1;	}
	60% {	opacity: 0;	}
	70% {	opacity: 1;	}
	80% {	opacity: 0;	}
	90% {	opacity: 1;	}
	from {	opacity: 0;	}
}

@keyframes clear-night {
	to {	transform: translateY(0); transform: rotate(0); transform-origin: center top;}
	50% {	transform: translateY(1px); transform: rotate(-7deg);transform-origin: center top; }
	from {	transform: translateY(0); transform: rotate(0);transform-origin: center top;	 }
}

@keyframes moon-cloudy {
	to {	transform: rotate(0); transform-origin: center top;}
	50% {	transform: rotate(-4deg);transform-origin: center top; }
	from {	transform: rotate(0);transform-origin: center top;	 }
}

@keyframes fleet {
	to {	transform: translate(-4px, 4px);  opacity: 0;	}
	20% {	opacity: 0.25;	}
	40% {	opacity: 0.5;	}
	50% {	transform: translate(0px, 0px);	}
	60% {	opacity: 0.75;	}
	80% {	opacity: 1;	}
	from {	transform: translate(4px, -4px); opacity: 0; }
}

@keyframes wind {
	to {	transform: translateX(-1px);	}
	40% {	transform: translateX(0);	}
	60% {	transform: translateX(1px);	}
	80% {	transform: translateX(0);	}
	from {	transform: translateX(-1px);	}
}

/*WEBKIT*/
@-webkit-keyframes clear-day {
	to {	opacity: 0;	}
	40% {	opacity: 0.5;	}
	60% {	opacity: 1;	}
	from {	opacity: 0;	}
}

@-webkit-keyframes day-cloudy {
	to {	-webkit-transform: rotate(-2deg); -webkit-transform-origin: center top;}
	50% {	-webkit-transform: rotate(-3.20deg);-webkit-transform-origin: center top; }
	from {	-webkit-transform: rotate(-2deg);-webkit-transform-origin: center top;	 }
}

@-webkit-keyframes cloudy {
	to {	-webkit-transform: translateX(0);	}
	50% {	-webkit-transform: translateX(2px);	}
	from {	-webkit-transform: translateX(0);	}
}

@-webkit-keyframes cloudy2 {
	to {	-webkit-transform: translateX(0);	}
	50% {	-webkit-transform: translateX(2px);	}
	from {	-webkit-transform: translateX(0);	}
}

@-webkit-keyframes rain {
	to {	-webkit-transform: translateY(4px); opacity: 0;	}
	20% {	opacity: 0.25;	}
	40% {	opacity: 0.5;	}
	50% {	-webkit-transform: translateY(0px);	}
	60% {	opacity: 0.75;	}
	80% {	opacity: 1;	}
	from {	-webkit-transform: translateY(-4px); opacity: 0; }
}

@-webkit-keyframes fog {
	to {	-webkit-transform: translateX(-3px);	}
	40% {	-webkit-transform: translateX(0);	}
	60% {	-webkit-transform: translateX(3px);	}
	80% {	-webkit-transform: translateX(0);	}
	from {	-webkit-transform: translateX(-3px);	}
}

@-webkit-keyframes thunderstorm {
	to {	opacity: 0;	}
	10% {	opacity: 1;	}
	25% {	opacity: 0;	}
	30% {	opacity: 1;	}
	35% {	opacity: 0;	}
	40% {	opacity: 1;	}
	60% {	opacity: 0;	}
	70% {	opacity: 1;	}
	80% {	opacity: 0;	}
	90% {	opacity: 1;	}
	from {	opacity: 0;	}
}

@-webkit-keyframes clear-night {
	to {	-webkit-transform: translateY(0); -webkit-transform: rotate(0); -webkit-transform-origin: center top;}
	50% {	-webkit-transform: translateY(1px); -webkit-transform: rotate(-7deg);-webkit-transform-origin: center top; }
	from {	-webkit-transform: translateY(0); -webkit-transform: rotate(0);-webkit-transform-origin: center top;	 }
}

@-webkit-keyframes moon-cloudy {
	to {	-webkit-transform: rotate(0); -webkit-transform-origin: center top;}
	50% {	-webkit-transform: rotate(-4deg);-webkit-transform-origin: center top; }
	from {	-webkit-transform: rotate(0);-webkit-transform-origin: center top;	 }
}

@-webkit-keyframes fleet {
	to {	-webkit-transform: translate(-4px, 4px);  opacity: 0;	}
	20% {	opacity: 0.25;	}
	40% {	opacity: 0.5;	}
	50% {	-webkit-transform: translate(0px, 0px);	}
	60% {	opacity: 0.75;	}
	80% {	opacity: 1;	}
	from {	-webkit-transform: translate(4px, -4px); opacity: 0; }
}

@-webkit-keyframes wind {
	to {	-webkit-transform: translateX(-1px);	}
	40% {	-webkit-transform: translateX(0);	}
	60% {	-webkit-transform: translateX(1px);	}
	80% {	-webkit-transform: translateX(0);	}
	from {	-webkit-transform: translateX(-1px);	}
}

/*KEYFRAMES*/