@charset "utf-8";
/* CSS Document */

/* clouds */
.svg-cloud01 { width:100%; height: 200px; position: absolute; top: 0px; left:-150px; z-index:1; overflow-x:hidden;
-webkit-animation:drift 30s linear infinite;-webkit-animation-delay: 15s;
-moz-animation: drift 30s linear infinite; -moz-animation-delay: 15s;
-o-animation: drift 30s linear infinite; -o-animation-delay: 15s;
-ms-animation: drift 30s linear infinite; -ms-animation-delay: 15s;
animation:drift 30s linear infinite;  /* Safari and Chrome */ animation-delay: 15s;
   
}
.svg-cloud02 {	width:100%;	height:150px;position:absolute; top:40px; left:-50px;z-index: 1;	overflow-x: hidden;
-webkit-animation:drift 50s linear infinite backwards;
-moz-animation: drift 50s linear infinite backwards;
-o-animation: drift 50s linear infinite backwards;
-ms-animation: drift 50s linear infinite backwards;
animation:drift 50s linear infinite backwards;
}
/* Animation for the drifting clouds */
@-webkit-keyframes drift {
0% {opacity: 1;-webkit-transform: translateX(-10px);}
100% {opacity: 1;-webkit-transform: translateX(100%);}
}
@-moz-keyframes drift {
0% {opacity: 1;-moz-transform: translateX(-10px);}
100% {opacity: 1;-moz-transform: translateX(100%);}
}
@-o-keyframes drift {
0% {opacity: 1;-o-transform: translateX(-10px);}
100% {opacity: 1;-o-transform: translateX(100%);}
}
@-ms-keyframes drift {
0% {opacity: 1;-ms-transform: translateX(-10px);}
100% {opacity: 1;-ms-transform: translateX(100%);}
}
@keyframes drift {
	0% {opacity: 1; transform: translateX(-10px);}
	100% {opacity: 1; transform: translateX(100%);}
}


/* the svg element */
.sun-wrap { width: 100%;}
.svg-sun {  width:100%; height: auto; margin-left: 0px; margin-top: 0px;
-webkit-animation:drift  150s linear infinite; /*, sun-glow 3s 0s linear infinite*/
-moz-animation:drift  150s linear infinite;
-o-animation:drift  150s linear infinite;
-ms-animation:  drift  150s linear infinite;
animation:drift 150s linear infinite;

}
/* the circle element in the svg itself */
#sun{
  stroke-width:18;
  stroke-dasharray:2;
  stroke-dashoffset:2;
}

/* start spin animation */
@-webkit-keyframes spin{
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes spin{
	100% {
		-moz-transform: rotate(360deg);
	}
}
@-o-keyframes spin{
	100% {
		-o-transform: rotate(360deg);
	}
}
@-ms-keyframes spin{
	100% {
		-ms-transform: rotate(360deg);
	}
}
@keyframes spin{
	100% {
		transform: rotate(360deg);
	}
}



.bird1 { z-index: 100; margin-left: -100px;
-webkit-animation: birdanim1  15s linear; /*, sun-glow 3s 0s linear infinite*/
-moz-animation: birdanim1  15s linear;
-o-animation: birdanim1  15s linear;
-ms-animation: birdanim1  15s linear;
animation: birdanim1  15s linear;}

/* Animation for the drifting clouds */
@-webkit-keyframes birdanim1 {
	0% {opacity: 0;-webkit-transform: translateX(-10px) scale(0.5);}
	10% {opacity: 1;-webkit-transform: translateX(100px) scale(1.0);}
	80% {opacity: 1;-webkit-transform: translateX(80%) translateY(-10px) scale(1.5);}
	100% {opacity: 0.7;-webkit-transform: translateX(100%) translateY(-60px) scale(0.5);}
}
@-moz-keyframes birdanim1 {
	0% {opacity: 0;-moz-transform: translateX(-10px) scale(0.5);}
	10% {opacity: 1;-moz-transform: translateX(100px) scale(1.0);}
	80% {opacity: 1;-moz-transform: translateX(80%) translateY(-10px) scale(1.5);}
	100% {opacity: 0.7;-moz-transform: translateX(100%) translateY(-60px) scale(0.5);}
}
@-o-keyframes birdanim1 {
	0% {opacity: 0;-o-transform: translateX(-10px) scale(0.5);}
	10% {opacity: 1;-o-transform: translateX(100px) scale(1.0);}
	80% {opacity: 1;-o-transform: translateX(80%) translateY(-10px) scale(1.5);}
	100% {opacity: 0.7;-o-transform: translateX(100%) translateY(-60px) scale(0.5);}
}
@-ms-keyframes birdanim1 {
	0% {opacity: 0;-ms-transform: translateX(-10px) scale(0.5);}
	10% {opacity: 1;-ms-transform: translateX(100px) scale(1.0);}
	80% {opacity: 1;-ms-transform: translateX(80%) translateY(-10px) scale(1.5);}
	100% {opacity: 0.7;-ms-transform: translateX(100%) translateY(-60px) scale(0.5);}
}
@keyframes birdanim1 {
	0% {opacity: 0;transform: translateX(-10px) scale(0.5);}
	10% {opacity: 1;transform: translateX(100px) scale(1.0);}
	80% {opacity: 1;transform: translateX(80%) translateY(-10px) scale(1.5);}
	100% {opacity: 0.7;transform: translateX(100%) translateY(-60px) scale(0.5);}
}

.svg-bird{
  position:absolute;
  left:-10px;
  top: -10px;
	width:100%;
	height:100px;
	fill: #e67e22;
	stroke: #fff;
	overflow-x: hidden;

-webkit-animation:move 10s 1s infinite ease-in-out;
	-moz-animation:move 10s 1s infinite ease-in-out;
	-o-animation:move 10s 1s infinite ease-in-out;
	-ms-animation:move 10s 1s infinite ease-in-out;
	animation:move 10s 1s infinite ease-in-out;
	
	-webkit-transform-origin:center center;
	-moz-transform-origin:center center;
	-o-transform-origin:center center;
	-ms-transform-origin:center center;
	transform-origin:center center;
}
@-webkit-keyframes move {
	0%{-webkit-transform: translateX(-500px) scale(0.5);}
	25%{-webkit-transform: translateY(100px) scale(1.2);}
	50%{-webkit-transform: translateY(100px) scale(1.5);}
	75%{-webkit-transform: translateY(100px) scale(1.2);}
	100%{-webkit-transform: translateX(100%) scale(0.5); }
}
@-moz-keyframes move {
	0%{-moz-transform: translateX(-500px) scale(0.5);}
	25%{-moz-transform: translateY(100px) scale(1.2);}
	50%{-moz-transform: translateY(100px) scale(1.5);}
	75%{-moz-transform: translateY(100px) scale(1.2);}
	100%{-moz-transform: translateX(100%) scale(0.5);}
}
@-o-keyframes move {
	0%{-o-transform: translateX(-500px) scale(0.5);}
	25%{-o-transform: translateY(100px) scale(1.2);}
	50%{-o-transform: translateY(100px) scale(1.5);}
	75%{-o-transform: translateY(100px) scale(1.2);}
	100%{-o-transform: translateX(100%) scale(0.5);}
}
@-ms-keyframes move {
	0%{-ms-transform: translateX(-500px) scale(0.5);}
	25%{-ms-transform: translateY(100px) scale(1.2);}
	50%{-ms-transform: translateY(100px) scale(1.5);}
	75%{-ms-transform: translateY(100px) scale(1.2);}
	100%{-ms-transform: translateX(100%) scale(0.5);}
}
@keyframes move {
	0%{transform: translateX(-500px) scale(0.5);}
	25%{transform: translateY(100px) scale(1.2);}
	50%{transform: translateY(100px) scale(1.5);}
	75%{transform: translateY(100px) scale(1.2);}
	100%{transform: translateX(100%) scale(0.5);}
}


#smokeSpawnPoint { position: absolute; left: 325px; bottom: 230px; z-index: 102;}

.puff {
	position: absolute;
	width: 0px;
	height: 0px;
	left: 150px; z-index: 102;
}