/*
-----------------------------------------------
imarketsolutions.com 
Stylesheet: Halloween.css
Organization:	iMarket Solutions

----------------------------------------------- */


.tree {
  position: relative;
  margin: 30px auto;
  width: 100%;
}

.tree_item {
  margin: 0 auto;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 150px solid #5f9c2d;
}
  
.tree_item:nth-child(2) {
    margin-top: -60px;
    border-left-width: 140px;
    border-right-width: 140px;
    border-bottom-width: 190px;
  }
  
.tree_item:nth-child(3) {
    margin-top: -80px;
    border-left-width: 200px;
    border-right-width: 200px;
    border-bottom-width: 250px;
  }


.tree_stump {
  margin: 0 auto;
  width: 50px;
  height: 60px;
  background: #8c370f;
  background: linear-gradient(#8c370f, #5c240a);
}


.dead-tree {
  background-image: url("/assets/templates/main/images/dead-tree.png");
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  bottom: 0;
  height: 500px;
  margin: 30px auto;
  position: absolute;
  width: 100%;
}
.dead-tree.on-fire {
  background-image: url("/assets/templates/main/images/fire.gif");
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  bottom: 0;
  height: 500px;
  margin: 30px auto;
  position: absolute;
  width: 100%;
}

#box {
  left: 140px;
  position: absolute;
  bottom: 0;
}

.sprite {
  height: 148px;
  position: absolute;
  width: 100px;
  bottom: 0px;
}

.right {
	background-image: url(http://atomicrobotdesign.com/blog_media/css-sprite/standing-right.png);
}

.left {
	background-image: url(http://atomicrobotdesign.com/blog_media/css-sprite/standing-left.png);
}

.walk-right {
	background-image: url(http://atomicrobotdesign.com/blog_media/css-sprite/walk-right.png);
	-webkit-animation: walk .9s steps(6) infinite;
	-moz-animation: walk .9s steps(6) infinite;
	-ms-animation: walk .9s steps(6) infinite;
	-o-animation: walk .9s steps(6) infinite;
	animation: walk .9s steps(6) infinite;
}

.walk-left {
	background-image: url(http://atomicrobotdesign.com/blog_media/css-sprite/walk-left.png);
	-webkit-animation: walk .9s steps(6) infinite;
	-moz-animation: walk .9s steps(6) infinite;
	-ms-animation: walk .9s steps(6) infinite;
	-o-animation: walk .9s steps(6) infinite;
	animation: walk .9s steps(6) infinite;
}

@-webkit-keyframes walk {
	from { background-position: 0px; }
	to { background-position: -612px; }
}
@-moz-keyframes walk {
	from { background-position: 0px; }
	to { background-position: -612px; }
}
@-ms-keyframes walk {
	from { background-position: 0px; }
	to { background-position: -612px; }
}
@-o-keyframes walk {
	from { background-position: 0px; }
	to { background-position: -612px; }
}
@-keyframes walk {
	from { background-position: 0px; }
	to { background-position: -612px; }
}


#flame-container {
    animation-delay: 200ms;
    animation-direction: alternate;
    animation-duration: 3ms;
    animation-iteration-count: infinite;
    animation-name: flame;
    animation-timing-function: ease-in;
    bottom: 0;
    height: 60px;
    margin: 80px auto;
    opacity: 0.8;
    position: absolute;
    transform-origin: center bottom 0;
    width: 60px;
    z-index: 2;
    left: 0;
}
.flame {
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 50%;
    bottom: 0;
    position: absolute;
    transform: rotate(-45deg) scale(1.5, 1.5);
    background-color: pink;
}
.yellow {
    background: gold none repeat scroll 0 0;
    box-shadow: 0 0 9px 4px gold;
    height: 30px;
    left: 15px;
    width: 30px;
}
.orange {
    background: orange none repeat scroll 0 0;
    box-shadow: 0 0 9px 4px orange;
    height: 40px;
    left: 10px;
    width: 40px;
}
.red {
    background: OrangeRed none repeat scroll 0 0;
    box-shadow: 0 0 5px 4px OrangeRed;
    height: 50px;
    left: 5px;
    width: 50px;
}
.white {
    background: white none repeat scroll 0 0;
    bottom: -4px;
    box-shadow: 0 0 9px 4px white;
    height: 30px;
    left: 15px;
    width: 30px;
}

.skew-left {
	-ms-transform: skewX(-20deg); /* IE 9 */
	-webkit-transform: skewX(-20deg); /* Safari */
	transform: skewX(-20deg); /* Standard syntax */
	-moz-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);
}    
.skew-right {
	-ms-transform: skewX(-20deg); /* IE 9 */
	-webkit-transform: skewX(-20deg); /* Safari */
	transform: skewX(-20deg); /* Standard syntax */

} 

@keyframes flame {
	0% {
		transform: rotate(-1deg);
	}
	20% {
		transform: rotate(1deg);
	}
	40% {
		transform: rotate(-1deg);
	}
	60% {
		transform: rotate(1deg) scaleY(1.04);
	}
	80% {
		transform: rotate(-2deg) scaleY(0.92);
	}
	100% {
		transform: rotate(1deg);
	}
}
#main-content {
  float: left;
  position: relative;
}
#firepit {
  background-image: url("/assets/templates/main/images/fire.gif");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100px;
  right: 100px;
  width: 100px;
  position: absolute;
  bottom: 0;
}