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

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

#december-container {
    height: 100vh;
}



@keyframes fade-away {
    0% {
        opacity: 1;
    }
    
    50% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
}
@keyframes glow {
    0% { 
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
   75% { 
       opacity: 1;
        }
    100% {
        opacity: 0.8;
    }
}

@keyframes slide-in-left {
    0% { 
        left: -100%;
    }

    100% {
        left: 0;
    }
}

@keyframes slide-in-right {
     0% { 
        right: -100%;
    }
    100% {
        right: 0;
    }
}

@keyframes moonrise {
    0% {
        
    transform: translate(-2000px, -1000px);
       opacity: 0;

    }

    
   50% {
        transform: translate(-1000px, 500px);
       opacity: 0;

    }
    
     100% {
         
            transform: translate(0, 0);
        opacity: 1;
    }
    
    
}


@keyframes sunrise {
    0% {
         transform: translate(-1000px, 500px);
    }
    
    
    50% {
         transform: translate(1000px, -500px);
    }
    
    100% {
         transform: translate(2000px, -1000px);
    }
    
}



@keyframes sky {
     0% { 
        background: rgba(9,28,43,1);
    }
    50% {
        background: rgba(195,224,248,1);
    }
     100% { 
        background: rgba(9,28,43,1);
    }

}

#container-all {
     background: rgba(195,224,248,1);
    animation: 10s sky infinite;
}
#container-content {
    position: absolute !important;
    height: 100vh;
    width: 100%;
    top: 0;
}


.sun {
    position: absolute;
    top: 150px;
    left: 150px;
    transform: translate(0, 0);
    animation: sunrise 10s infinite;
     animation-iteration-count: infinite;  
    animation-timing-function: linear; 
}

.sun::after {
    position: absolute;
    content: "\25cf";
    font-size: 250px;
    color: rgba(246,254,113,1);
    opacity: 1;
    text-shadow: 0 0 10px rgba(255,240,70,1) , 0 0 20px rgba(255,240,70,1) , 0 0 30px rgba(255,240,70,1) , 0 0 40px rgba(255,240,70,1) , 0 0 70px rgba(255,240,70,1) , 0 0 80px rgba(255,240,70,1) , 0 0 100px rgba(255,240,70,1);
    animation: glow 2.5s infinite;
}



.moon {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    opacity: 1;
    transform: translate(-1000px, 500px);
    animation: moonrise 10s infinite;
      animation-iteration-count: infinite;  
    animation-timing-function: linear; 

    
}

.moon::after {
    position: absolute;
    content: "\25cf";
    font-size: 170px;
    color: #fff;
    opacity: 1;
    text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #fff , 0 0 70px #fff , 0 0 80px #fff , 0 0 100px #fff;
    animation: glow 2.5s infinite;
}


.snow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 1;
    animation: fade-away 10s infinite;
}

.snow:nth-child(1) {
    top: 40px;
    transform: rotate(40deg);
}

.snow:nth-child(2) {
    top: 200px;
    transform: scale(2,2);
}

.snow:nth-child(3) {
    top: 240px;
    transform: rotate(110deg);
    font-size: 10px;
}

.snow:nth-child(4) {
    top: 440px;
    transform: rotate(20deg) scale(2,2);
    left: -100px;
}

.snow:nth-child(5) {
    top: 200px;
    transform: rotate(20deg);
    font-size: 28px;
}

.flake {
    font-size: 15px;
    text-shadow: 0 0 3px rgba(255,255,255,1) , 0 0 2px rgba(255,255,255,1) , 0 0 3px rgba(255,255,255,1) , 0 0 4px #fff , 0 0 70px #fff , 0 0 8px #fff , 0 0 10px #fff;
    animation: glow 0.8s infinite;
    display: inline-block;
    width: 20%;
    margin-right: -3px;
    color: #fff;
    opacity: 1;
    position: relative;
    z-index: 100;
    top: 0;
    left: 0;
}




.tree-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 100;
}

.tree {
  top: 0;
  margin: 50px auto auto;
 position: relative;
  overflow: visible;
}

.tree::before {
    content: '✶';
    font-size: 100px;
    color: #fff;
    top: -4px;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 1;
    position: absolute;
    text-align: center;
    text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #fff , 0 0 70px #fff , 0 0 80px #fff , 0 0 100px #fff;
    z-index: 10;
}

.tree_item {
  margin: 0 auto;
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 130px solid #5f9c2d;
  position: relative;
    z-index: 2;
}
  
.tree_item::after {
    content: '';
    position: absolute;
    top: 40px;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 150px solid #5f9c2d;
    left: -100px;
    right: 0;
    z-index: 0;
}
.tree_item:nth-child(2) {
    margin-top: -60px;
    border-left-width: 120px;
    border-right-width: 120px;
    border-bottom-width: 170px;
  }
  
.tree_item:nth-child(2)::after {
    left: -150px;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-bottom: 200px solid #5f9c2d;
}
.tree_item:nth-child(3) {
    margin-top: -100px;
    border-left-width: 180px;
    border-right-width: 180px;
    border-bottom-width: 230px;
  }
.tree_item:nth-child(3)::after {
    content: none;
}

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

.decorations {
    position: absolute;
    animation: glow 0.8s infinite;
    opacity: 1;
    z-index: 3;
}

.decorations:nth-child(2) {
    top: 100px;
    left: 12px;
    border-radius: 50%;
    background: #faf706;
    width: 15px;
    height: 15px;
    right: 0px;
    margin: auto;
    box-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #faf706 , 0 0 70px #faf706 , 0 0 80px #faf706 , 0 0 100px #faf706;
}

.decorations:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 220px;
    left: 5px;
    border-radius: 50%;
    background: #faf706;
    width: 13px;
    height: 13px;
    right: 0px;
    margin: auto;
    box-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #faf706 , 0 0 70px #faf706 , 0 0 80px #faf706 , 0 0 100px #faf706;
}


.decorations:nth-child(2)::after {
    content: '';
    position: absolute;
    top: 270px;
    left: 80px;
    border-radius: 50%;
    background: #faf706;
    width: 28px;
    height: 28px;
    right: 0px;
    margin: auto;
    box-shadow: 0 0 10px #faf706 , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #faf706 , 0 0 70px #faf706 , 0 0 80px #faf706 , 0 0 100px #faf706;
}


.decorations:nth-child(3) {
    top: 210px;
    left: -12px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    right: 0px;
    margin: auto;
        background: #fff;
    box-shadow: 0 0 10px #fff , 0 0 20px rgba(255,255,255,1) , 0 0 30px #fff , 0 0 40px #fff , 0 0 70px #fff , 0 0 80px #fff , 0 0 100px #fff;
}


.decorations:nth-child(3)::before {
    content: '';
    position: absolute;
    top: -80px;
    left: -50px;
    border-radius: 50%;
    background: #fff;
    width: 11px;
    height: 11px;
    right: 0px;
    margin: auto;
    box-shadow: 0 0 10px #fff , 0 0 20px rgba(255,255,255,1) , 0 0 30px #fff , 0 0 40px #fff , 0 0 70px #fff , 0 0 80px #CE4544 , 0 0 100px #fff;
}

.decorations:nth-child(3)::after {
    content: '';
    position: absolute;
    top: 150px;
    left: -240px;
    border-radius: 50%;
    background: #fff;
    width: 10px;
    height: 10px;
    right: 0px;
    margin: auto;
    box-shadow: 0 0 10px #fff , 0 0 20px rgba(255,255,255,1) , 0 0 30px #fff , 0 0 40px #fff , 0 0 70px #fff , 0 0 80px #fff , 0 0 100px #fff;
}


.decorations:nth-child(4) {
    top: 380px;
    left: -80px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    right: 0px;
    margin: auto;
        background: #fff;
    box-shadow: 0 0 10px #fff , 0 0 20px rgba(255,255,255,1) , 0 0 30px #fff , 0 0 40px #fff , 0 0 70px #fff , 0 0 80px #fff , 0 0 100px #fff;
}


.decorations:nth-child(4)::before {
    content: '';
    position: absolute;
    top: -210px;
    left: 70px;
    border-radius: 50%;
    background: #fff;
    width: 23px;
    height: 23px;
    right: 0px;
    margin: auto;
    box-shadow: 0 0 10px #fff , 0 0 20px rgba(255,255,255,1) , 0 0 30px #fff , 0 0 40px #fff , 0 0 70px #fff , 0 0 80px #CE4544 , 0 0 100px #fff;
}

.decorations:nth-child(4)::after {
    content: '';
    position: absolute;
    top: -80px;
    left: 130px;
    border-radius: 50%;
    background: #fff;
    width: 10px;
    height: 10px;
    right: 0px;
    margin: auto;
    box-shadow: 0 0 10px #fff , 0 0 20px rgba(255,255,255,1) , 0 0 30px #fff , 0 0 40px #fff , 0 0 70px #fff , 0 0 80px #fff , 0 0 100px #fff;
}


.decorations:nth-child(5) {
    top: 300px;
    left: -120px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    right: 0px;
    margin: auto;
        background: #faf706;
    box-shadow: 0 0 10px #faf706 , 0 0 20px rgba(255,255,255,1) , 0 0 30px #faf706 , 0 0 40px #faf706 , 0 0 70px #faf706 , 0 0 80px #faf706 , 0 0 100px #faf706;
}


.decorations:nth-child(5)::after {
    content: '';
    position: absolute;
    top: -80px;
    left: 130px;
    border-radius: 50%;
    background: #fff;
    width: 10px;
    height: 10px;
    right: 0px;
    margin: auto;
    box-shadow: 0 0 10px #fff , 0 0 20px rgba(255,255,255,1) , 0 0 30px #fff , 0 0 40px #fff , 0 0 70px #fff , 0 0 80px #fff , 0 0 100px #fff;
}


.ground-wrap {
    position: absolute;
    bottom:0;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.ground-left,
.ground-right {
    width: 100%;
    position: absolute;
    bottom: 0;
}

.ground-left {   
    animation: slide-in-left 0.5s;
    left: 0;
}

.ground-right {
    animation: slide-in-right 0.5s;
    right: 0;

}

.ground {
    height: 300px;
    width: 300px;
    position: absolute;
    bottom: -150px;
    transform: rotate(45deg);
    border-width: 3px 3px 1px 1px;
    border-color: #fff;
    border-style: solid;
    margin: auto;
    border-radius: 150px 0;
    background: rgba(255,255,255,1);
  /*  animation: pile 15s linear;*/
}

.ground.first {
    left: 0%;
    height: 500px;
    width: 500px;
    transform: rotate(45deg) translate(0, 150px);
}

.ground.first::after {
    content: '';
    position: absolute;
    top: 20px;
    width: 90px;
    height: 120px;
    background-image: url('/assets/templates/main/images/elf1.png');
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    transform: rotate(-45deg) translate(-30px, -150px);
    right: 310px;
    margin: auto;
}
.ground.second {
    left: 25%;
    background: rgba(236,234,234,1);
    border-color: rgba(236,234,234,1);
    height: 350px;
    width: 350px;
    transform: rotate(45deg) translate(0, 50px);
}
.ground.third {
    left: 50%;
}

.ground.third::after {
    content: '';
    background-image: url('/assets/templates/main/images/elf3.png');
    background-size: contain;
    width: 115px;
    height: 120px;
    background-repeat: no-repeat;
    position: absolute;
    top: -75px;
    right: 0;
    transform: rotate(-45deg);
    left: -25px;
}
.ground.fourth {
    left: 75%;
    background: rgba(236,234,234,1);
   border-color: rgba(236,234,234,1);
    height: 400px;
    width: 400px;
    transform: rotate(45deg) translate(50px, 20px);
}

.ground.fourth::after {
    content: '';
    background-image: url('/assets/templates/main/images/elf2.png');
    background-size: contain;
    width: 100px;
    height: 140px;
    background-repeat: no-repeat;
    position: absolute;
    transform: rotate(-45deg) translate(-50px, -20px);
    top: -100px;
    left: 0;
    right: 0;
}


#container-content::before,
#container-content::after,
#container-all::after {
     content: none !important;
}

#clock-outer {
    background: rgba(0,0,0,0.6);
    border: 3px solid #fff;
    padding: 20px;
    left: 20px !important;
    bottom: 20px !important;
    z-index: 2;
}

/*
#container-all::before {
      -webkit-filter: grayscale(100%) brightness(150%);
  -moz-filter: grayscale(100%) brightness(150%);
  -o-filter: grayscale(100%) brightness(150%);
  -ms-filter: grayscale(100%) brightness(150%);
  filter: grayscale(100%) brightness(150%);
    height: 100% !important;
    background-size: auto 50px !important;
    background-repeat: repeat !important;
    opacity: 1;
    background-position: 0 0;
    animation: snow 50s infinite;
}



*/