/*
-----------------------------------------------
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);
}

/* Star */

#star-five {
  border-bottom: 70px solid #ffff00;
  border-left: 100px solid rgba(0, 0, 0, 0);
  border-right: 100px solid rgba(0, 0, 0, 0);
  color: #ffff00;
  display: block;
  height: 0;
  left: 50%;
  margin: 50px 0 50px -98px;
  position: absolute;
  top: -66px;
  transform: rotate(35deg) scale(0.5);
  width: 0;
}

#star-five:before { 
  border-bottom: 80px solid yellow; 
  border-left: 30px solid transparent; 
  border-right: 30px solid transparent; 
  position: absolute; 
  height: 0; 
  width: 0; 
  top: -45px; 
  left: -65px; 
  display: block; 
  content: ''; 
  -webkit-transform: rotate(-35deg); 
  -moz-transform: rotate(-35deg); 
  -ms-transform: rotate(-35deg); 
  -o-transform: rotate(-35deg); 
} 

#star-five:after { 
  position: absolute; 
  display: block; 
  color: yellow; 
  top: 3px; 
  left: -105px; 
  width: 0px; 
  height: 0px; 
  border-right: 100px solid transparent; 
  border-bottom: 70px solid yellow; 
  border-left: 100px solid transparent; 
  -webkit-transform: rotate(-70deg); 
  -moz-transform: rotate(-70deg); 
  -ms-transform: rotate(-70deg); 
  -o-transform: rotate(-70deg); 
  content: ''; 
}


/* Christmas Lights */

@-webkit-keyframes fade-out-in {
  0%   { opacity: 1; }
  50%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fade-out-in {
  0%   { opacity: 1; }
  50%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fade-out-in {
  0%   { opacity: 1; }
  50%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade-out-in {
  0%   { opacity: 1; }
  50%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Red Lights */

#christmas-lights-red {
  background: #DC1D40 none repeat scroll 0 0;
  border-radius: 50%;
  height: 10px;
  left: 52%;
  position: absolute;
  top: 123px;
  transform: rotate(40deg);
  width: 20px;
  -webkit-animation: fade-out-in 2s infinite; /* Safari 4+ */
  -moz-animation:    fade-out-in 2s infinite; /* Fx 5+ */
  -o-animation:      fade-out-in 2s infinite; /* Opera 12+ */
  animation:         fade-out-in 2s infinite; /* IE 10+, Fx 29+ */
}

#christmas-lights-red::before {
  background: #DC1D40 none repeat scroll 0 0;
  border-radius: 50%;
  content: "";
  height: 10px;
  left: -45%;
  position: absolute;
  top: 123px;
  transform: rotate(82deg);
  width: 20px;
}


#christmas-lights-red::after {
  background: #DC1D40 none repeat scroll 0 0;
  border-radius: 50%;
  content: "";
  height: 10px;
  left: 166px;
  position: absolute;
  top: 162px;
  transform: rotate(82deg);
  width: 20px;
}

/* Blue Lights */

#christmas-lights-blue {
  background: #0B7EFD none repeat scroll 0 0;
  border-radius: 50%;
  height: 10px;
  left: 48%;
  position: absolute;
  top: 18%;
  transform: rotate(40deg);
  width: 20px;
  -webkit-animation: fade-out-in 1s 0.8s infinite; /* Safari 4+ */
  -moz-animation:    fade-out-in 1s 0.8s infinite; /* Fx 5+ */
  -o-animation:      fade-out-in 1s 0.8s infinite; /* Opera 12+ */
  animation:         fade-out-in 1s 0.8s infinite; /* IE 10+, Fx 29+ */
}

#christmas-lights-blue::before {
  background: #0b7efd none repeat scroll 0 0;
  border-radius: 50%;
  content: "";
  height: 10px;
  left: 163px;
  position: absolute;
  top: 49px;
  transform: rotate(82deg);
  width: 20px;
}


#christmas-lights-blue::after {
  background: #0b7efd none repeat scroll 0 0;
  border-radius: 50%;
  content: "";
  height: 10px;
  left: 116px;
  position: absolute;
  top: 274px;
  transform: rotate(82deg);
  width: 20px;
}


/* Presents */


/* Present Animation */

@-webkit-keyframes close-open-close {
  0%   { top: -20px; }
  50%   { top: -110px; }
  100% { top: -20px; }
}
@-moz-keyframes close-open-close {
  0%   { top: -20px; }
  50%   { top: -110px; }
  100% { top: -20px; }
}
@-o-keyframes close-open-close {
  0%   { top: -20px; }
  50%   { top: -110px; }
  100% { top: -20px; }
}
@keyframes close-open-close {
  0%   { top: -20px; }
  50%   { top: -110px; }
  100% { top: -20px; }
}

/* Bow Animation */

@-webkit-keyframes move-bow {
  0%   { top: -35px; }
  50%   { top: -125px; }
  100% { top: -35px; }
}
@-moz-keyframes move-bow{
  0%   { top: -35px; }
  50%   { top: -125px; }
  100% { top: -35px; }
}
@-o-keyframes move-bow {
  0%   { top: -35px; }
  50%   { top: -125px; }
  100% { top: -35px; }
}
@keyframes move-bow {
  0%   { top: -35px; }
  50%   { top: -125px; }
  100% { top: -35px; }
}




/* Present 1 */

#present-1-bow {
  background: #ffffff none repeat scroll 0 0;
  border-radius: 30px 30px 0 0;
  height: 15px;
  position: absolute;
  top: -35px;
  width: 40px;
  left: 50%;
  margin-left: -20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-animation: move-bow 1.5s ease 2s 1; /* Safari 4+ */
  -moz-animation:    move-bow 1.5s ease 2s 1; /* Fx 5+ */
  -o-animation:      move-bow 1.5s ease 2s 1; /* Opera 12+ */
  animation:         move-bow 1.5s ease 2s 1; /* IE 10+, Fx 29+ */
}

#present-1-bow::after, 
#present-1-bow::before {
  content: '';
  position: absolute;
  background: #ffffff;
}

#present-1-bow::after {
  border-radius: 45%;
  height: 17px;
  left: 5px;
  top: -4px;
  width: 15px;
}

#present-1-bow::before {
  border-radius: 50%;
  height: 17px;
  right: 4px;
  top: -7px;
  width: 20px;
}

#present-1-lid {
  background: #db0000 none repeat scroll 0 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  height: 20px;
  left: -4px;
  position: absolute;
  top: -20px;
  width: 88px;
  z-index: 1;
  -webkit-animation: close-open-close 1.5s ease 2s 1; /* Safari 4+ */
  -moz-animation:    close-open-close 1.5s ease 2s 1; /* Fx 5+ */
  -o-animation:      close-open-close 1.5s ease 2s 1; /* Opera 12+ */
  animation:         close-open-close 1.5s ease 2s 1; /* IE 10+, Fx 29+ */
}

#present-1-lid::after {
  content: '';
  height: 100%;
  width: 16px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -8px;
  background: #FFFFFF;
}

#present-1 {
  background: #db0000 none repeat scroll 0 0;
  bottom: -14px;
  height: 80px;
  left: 40%;
  position: absolute;
  width: 80px;
  border-radius: 0 0 3px 3px;
}

#present-1::before { /* Present Background */
  background: #db0000 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

#present-1::after { /* Present Box Ribbon */
  background: #ffffff none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 50%;
  margin-left: -10px;
  position: absolute;
  top: 0;
  width: 16px;
  z-index: 2;
}

/* Present 2 */

#present-2-lid {
  background: #ffa602 none repeat scroll 0 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  height: 20px;
  left: -4px;
  position: absolute;
  top: -20px;
  width: 88px;
  z-index: 1;
}

#present-2-lid::after {
  content: '';
  height: 100%;
  width: 16px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -9px;
  background: #33A0C1;
}

#present-2 {
  background: #ffa602 none repeat scroll 0 0;
  bottom: -24px;
  height: 40px;
  left: 51%;
  position: absolute;
  width: 80px;
  border-radius: 0 0 3px 3px;
}

#present-2::after {
  content: '';
  height: 100%;
  width: 16px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -10px;
  background: #33A0C1;
}


/* Gingerbread Man */


/* Gingerbread Animation */

@-webkit-keyframes move-gingerbread-man {
  0%   { top: 0; }
  50%   { top: -80px; }
  100% { top: 0; }
}

@-moz-keyframes move-gingerbread-man {
  0%   { top: 0; }
  50%   { top: -80px; }
  100% { top: 0; }
}
@-o-keyframes move-gingerbread-man {
  0%   { top: 0; }
  50%   { top: -80px; }
  100% { top: 0; }
}
@keyframes move-gingerbread-man {
  0%   { top: 0; }
  50%   { top: -80px; }
  100% { top: 0; }
}



#gingerbread-man {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
  -webkit-animation: move-gingerbread-man 1.5s ease 2s 1; /* Safari 4+ */
  -moz-animation:    move-gingerbread-man 1.5s ease 2s 1; /* Fx 5+ */
  -o-animation:      move-gingerbread-man 1.5s ease 2s 1; /* Opera 12+ */
  animation:         move-gingerbread-man 1.5s ease 2s 1; /* IE 10+, Fx 29+ */
}

.brown {
  background: #9f6034;
  z-index: -1;
  position: absolute;
}

#gingerbread-head {
  border-radius: 100%;
  bottom: 54px;
  height: 26px;
  left: 50%;
  margin-left: -13px;
  width: 26px;
}

#gingerbread-head::before,
#gingerbread-head::after {
  content: '';
  width: 5px;
  height: 5px;
  position: absolute;
  top: 8px;
  background: #000000;
  border-radius: 100%;
}

#gingerbread-head::before {
  left: 20%;
}

#gingerbread-head::after {
  right: 20%;
}

/*#gingerbread-mouth {
  background: #c92629 none repeat scroll 0 0;
  bottom: 8px;
  height: 2px;
  left: 50%;
  margin-left: -4px;
  position: absolute;
  width: 8px;
  z-index: 0;
}*/

#gingerbread-body {
  border-radius: 7px 7px 0 0;
  bottom: 16px;
  height: 40px;
  left: 50%;
  margin-left: -10px;
  width: 20px;
}

#gingerbread-left-arm {
  border-radius: 7px 0 0 7px;
  bottom: 41px;
  height: 14px;
  left: 16%;
  transform: rotate(24deg);
  width: 30px;
}

#gingerbread-left-arm::after { /* Bracelet */
  background: #ffffff none repeat scroll 0 0;
  content: "";
  height: 8px;
  left: 6px;
  position: absolute;
  top: 3px;
  width: 2px;
}

#gingerbread-right-arm {
  border-radius: 0 7px 7px 0;
  bottom: 41px;
  height: 14px;
  left: 47%;
  transform: rotate(-24deg);
  width: 30px;
}

#gingerbread-right-arm::after { /* Bracelet */
  background: #ffffff none repeat scroll 0 0;
  content: "";
  height: 8px;
  right: 6px;
  position: absolute;
  top: 3px;
  width: 2px;
}

#gingerbread-left-leg {
  border-radius: 7px 0 0 7px;
  bottom: 8px;
  height: 16px;
  left: 18%;
  transform: rotate(-48deg);
  width: 30px;
}

#gingerbread-right-leg {
  border-radius: 7px 0 0 7px;
  bottom: 8px;
  height: 16px;
  left: 45%;
  transform: rotate(-135deg);
  width: 30px;
}

/* Buttons */

#gingerbread-buttons {
  background: #0b7efd none repeat scroll 0 0;
  border-radius: 100%;
  height: 6px;
  left: 50%;
  margin-left: -3px;
  position: absolute;
  top: 5px;
  width: 6px;
}

#gingerbread-buttons::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  background: #0b7efd;
}

#gingerbread-buttons::before {
  bottom: -12px;
}