html{
    height: 100%;
}
body{
    display: table;
    height: 100%;
    width: 100%;
    background: #fff;
}
.tiny-forest-layout{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.tiny-forest-container{
    display: inline-block;
    position: relative;
    height: 200px;
    width: 325px;
    transform: scale(1);
}
/*/////////////////////////////////////////
    Ground
/////////////////////////////////////////*/
.tiny-forest__ground{
    display: block;
    position: absolute;
    bottom: 0;
    background-color: #ebebeb;
    height: 120px;
    width: 325px;
    border-radius: 50%;
    box-shadow: 0 2px 0 0 rgba(52, 94, 113, 0.28);
    overflow: hidden;
    z-index: -1;
}
.tiny-forest__ground-cropped{
    display: block;
    position: absolute;
    bottom: 0;
    background-color: transparent;
    height: 120px;
    width: 325px;
    border-radius: 50%;
    overflow: hidden;
}
/*/////////////////////////////////////////
    Huge shadows
/////////////////////////////////////////*/
.tiny-forest__ground__huge-shadows{
    display: block;
    position: absolute;
    height: 8px;
    width: 47px;
    border-radius: 50%;
    background-color: #bdc7cc;
    z-index: 1;
}
.tiny-forest__ground__huge-shadows_first{
    top: 39px;
    right: 242px;
}
.tiny-forest__ground__huge-shadows_second{
    top: 57px;
    right: 87px;
}
.tiny-forest__ground__huge-shadows_third{
    top: 90px;
    right: 61px;
}
/*/////////////////////////////////////////
    Middle shadows
/////////////////////////////////////////*/
.tiny-forest__ground__middle-shadows{
    display: block;
    position: absolute;
    height: 5px;
    width: 32px;
    border-radius: 50%;
    background-color: #bdc7cc;
    z-index: 1;
}
.tiny-forest__ground__middle-shadows_first{
    top: 81px;
    right: 274px;
}
.tiny-forest__ground__middle-shadows_second{
    top: 56px;
    right: 225px;
}
.tiny-forest__ground__middle-shadows_third{
    top: 21px;
    right: 191px;
}
.tiny-forest__ground__middle-shadows_fourth{
    top: 72px;
    right: 123px;
}
/*/////////////////////////////////////////
    Small shadows
/////////////////////////////////////////*/
.tiny-forest__ground__small-shadows{
    display: block;
    position: absolute;
    height: 3px;
    width: 20px;
    border-radius: 50%;
    background-color: #bdc7cc;
    z-index: 1;
}
.tiny-forest__ground__small-shadows_first{
    top: 61px;
    right: 214px;
}
.tiny-forest__ground__small-shadows_second{
    top: 47px;
    right: 23px;
}

/*/////////////////////////////////////////
    Trees
/////////////////////////////////////////*/
.tiny-forest__tree{
    display: block;
    position: absolute;
}
tiny-forest__tree_huge{
    transform: scale(1);
}
.tiny-forest__tree_huge_position-first{
    bottom: 76px;
    left: 66px;
}
.tiny-forest__tree_huge_position-second{
    bottom: 58px;
    left: 222px;
}
.tiny-forest__tree_huge_position-third{
    bottom: 25px;
    left: 245px;
}
.tiny-forest__tree_middle{
    transform: scaleX(0.60) scaleY(0.70);
}
.tiny-forest__tree_middle_position-first{
    bottom: 36px;
    left: 40px;
}
.tiny-forest__tree_middle_position-second{
    bottom: 61px;
    left: 89px;
}
.tiny-forest__tree_middle_position-third{
    bottom: 96px;
    left: 124px;
}
.tiny-forest__tree_middle_position-fourth{
    bottom: 45px;
    left: 191px;
}
.tiny-forest__tree_small{
    transform: scaleX(0.45) scaleY(0.52);
}
.tiny-forest__tree_small_position-first{
    bottom: 57px;
    left: 103px;
}
.tiny-forest__tree_small_position-second{
    bottom: 71px;
    left: 293px;
}
.tiny-forest__tree__trunk{
    display: block;
    position: absolute;
    background: #56463c;
    height: 16px;
    width: 8px;
    border-radius: 4px;
    bottom: 0;
    left: 0;
}
.tiny-forest__tree__leaves-container{
    display: block;
    position: absolute;
    height: 260px;
    width: 36px;
    bottom: 8px;
    left: -14px;
}
.tiny-forest__tree__leaves{
    display: block;
    position: absolute;
    height: 0px;
    width: 0px;
    top: 0;
    left: 0;
    border-top: 130px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 130px solid #67a779;
    border-left: 18px solid transparent;
}
.tiny-forest__tree__leaves__shadow-cropped{
    display: block;
    position: absolute;
    height: 130px;
    width: 18px;
    bottom: 0;
    left: 0;
    overflow: hidden;
    transform: rotate(3deg);
    transform-origin: top right;
    /*background: red;*/
}
.tiny-forest__tree__leaves__shadow{
    display: block;
    position: absolute;
    height: 0px;
    width: 0px;
    bottom: 0px;
    left: 0;
    border-top: 130px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 130px solid #588d71;
    border-left: 18px solid transparent;
    transform: rotate(-3deg);
    transform-origin: center center;
}

/*/////////////////////////////////////////
    Hero
/////////////////////////////////////////*/
.tiny-forest__hero{
    display: block;
    position: absolute;
}
.tiny-forest__hero:before{
    display: block;
    position: absolute;
    content: '';
    height: 5px;
    width: 23px;
    border-radius: 50%;
    background-color: #bdc7cc;
    bottom: -2px;
    right: -10px;
}
.tiny-forest__hero_animation{
    bottom: 50px;
    left: 150px;
    animation: walk 18s linear infinite;/**********/
}
.tiny-forest__hero__belly{
    display: block;
    position: absolute;
    height: 10px;
    width: 11px;
    background-color: #345e71;
    border-radius: 3px;
    bottom: 4px;
    left: 0;
    animation: belly 1s linear infinite;/**********/
}
.tiny-forest__hero__head{
    display: block;
    position: absolute;
    height: 6px;
    width: 5px;
    background-color: #e8c7b6;
    border-radius: 3px;
    bottom: 13px;
    left: 3px;
    animation: head 1s linear infinite;/**********/
}
.tiny-forest__hero__head__hat{
    display: block;
    position: relative;
    height: 0;
    width: 0;
    bottom: 13px;
    left: 0px;
    border-top: 8px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 8px solid #e9321a;
    border-left: 4px solid transparent;
    transform: rotate(8deg);
}
.tiny-forest__hero__head__hat:after{
    display: block;
    position: absolute;
    content: '';
    background-color: #fff;
    height: 4px;
    width: 4px;
    border-radius: 50%;
    top: -2px;
    right: -2px;
}
.tiny-forest__hero__leg{
    display: block;
    position: absolute;
    height: 8px;
    width: 4px;
    background-color: #1c3743;
    border-radius: 2px;
}
.tiny-forest__hero__leg_left{
    bottom: 0px;
    left: 0px;
    animation: leg-left 1s linear infinite;/**********/
}
.tiny-forest__hero__leg_right{
    bottom: 0px;
    left: 7px;
    animation: leg-right 1s linear infinite;/**********/
}
.tiny-forest__hero__arm{
    display: block;
    position: absolute;
    height: 6px;
    width: 8px;
    background-color: #345e71;
    border-radius: 3px;
}
.tiny-forest__hero__arm_left{
    top: 0px;
    left: -2px;
    animation: arm-left 1s linear infinite;/**********/
}
.tiny-forest__hero__arm_right{
    top: 0px;
    left: 5px;
    animation: arm-right 1s linear infinite;/**********/
}
@keyframes head{
    0%{
        /*down*/
        bottom: 11px;
    }
    25%{
        /*up*/
        bottom: 14px;
    }
    50%{
        /*down*/
        bottom: 11px;
    }
    75%{
        /*up*/
        bottom: 14px;
    }
    100%{
        /*down*/
        bottom: 11px;
    }
}
@keyframes belly{
    0%{
        /*down*/
        bottom: 3px;
    }
    25%{
        /*up*/
        bottom: 5px;
    }
    50%{
        /*down*/
        bottom: 3px;
    }
    75%{
        /*up*/
        bottom: 5px;
    }
    100%{
        /*down*/
        bottom: 3px;
    }
}

@keyframes leg-left{
    0%{
        /*long*/
        bottom: -1px;
        left: -1px;
    }
    25%{
        /*short*/
        bottom: 0px;
        left: 2px;
    }
    50%{
        /*long*/
        bottom: 2px;
        left: 2px;
    }
    75%{
        /*short*/
        bottom: 4px;
        left: 0px;
    }
    100%{
        /*long, front quick contact*/
        bottom: -1px;
        left: -1px;
    }
}
@keyframes leg-right{
    0%{
        /*long*/
        bottom: 2px;
        left: 7px;
    }
    25%{
        /*short*/
        bottom: 4px;
        left: 5px;
    }
    50%{
        /*long, front quick contact*/
        bottom: -1px;
        left: 4px;
    }
    75%{
        /*short*/
        bottom: 1px;
        left: 7px;
    }
    100%{
        /*long*/
        bottom: 2px;
        left: 7px;
    }
}
@keyframes arm-left{
    0%{
        /*down*/
        top: 1px;
        left: 0px;
    }
    25%{
        /*up*/
        top: -2px;
        left: -1px;
    }
    50%{
        /*down*/
        top: 1px;
        left: -2px;
    }
    75%{
        /*up*/
        top: 2px;
        left: -1px;
    }
    100%{
        /*down*/
        top: 1px;
        left: 0px;
    }
}
@keyframes arm-right{
    0%{
        /*down*/
        top: 1px;
        left: 3px;
    }
    25%{
        /*up*/
        top: 2px;
        left: 4px;
    }
    50%{
        /*down*/
        top: 1px;
        left: 4px;
    }
    75%{
        /*up*/
        top: -1px;
        left: 5px;
    }
    100%{
        /*down*/
        top: 1px;
        left: 3px;
    }
}
@keyframes walk{
    0%{
        bottom: 125px;
        left: 242px;
    }
    100%{
        bottom: -26px;
        left: 65px;
    }
}

/*/////////////////////////////////////////
    Tracks
/////////////////////////////////////////*/
.tracks{
    display: block;
    position: absolute;
    top: 5%;
    left: 70%;
    opacity: 1;
    z-index: -1;
}
@keyframes track-end{
    0%{
        opacity: 1;
    }
    95%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.tracks:before{
    animation: track-end 18s linear infinite;
    display: block;
    position: absolute;
    content: '';
    height: 2px;
    width: 4px;
    border-radius: 50%;
    background-color: #bdc7cc;
    top: 0;
    left: 0;
    box-shadow: -5px 5px 0 0 #bdc7cc,
    -11px 10px 0 0 #bdc7cc,
    -17px 15px 0 0 #bdc7cc,
    -23px 20px 0 0 #bdc7cc,
    -29px 25px 0 0 #bdc7cc,
    -35px 30px 0 0 #bdc7cc,
    -41px 35px 0 0 #bdc7cc,
    -47px 40px 0 0 #bdc7cc,
    -53px 45px 0 0 #bdc7cc,
    -59px 50px 0 0 #bdc7cc,
    -65px 55px 0 0 #bdc7cc,
    -71px 60px 0 0 #bdc7cc,
    -77px 65px 0 0 #bdc7cc,
    -83px 70px 0 0 #bdc7cc,
    -89px 75px 0 0 #bdc7cc,
    -95px 80px 0 0 #bdc7cc,
    -101px 85px 0 0 #bdc7cc,
    -107px 90px 0 0 #bdc7cc,
    -113px 95px 0 0 #bdc7cc,
    -119px 100px 0 0 #bdc7cc,
    -125px 105px 0 0 #bdc7cc,
    -131px 110px 0 0 #bdc7cc;
}
.tracks:after{
    animation: track-end 18s linear infinite;
    display: block;
    position: absolute;
    content: '';
    height: 2px;
    width: 4px;
    border-radius: 50%;
    background-color: #bdc7cc;
    top: 0;
    left: 8px;
    box-shadow: -5px 5px 0 0 #bdc7cc,
    -11px 10px 0 0 #bdc7cc,
    -17px 15px 0 0 #bdc7cc,
    -23px 20px 0 0 #bdc7cc,
    -29px 25px 0 0 #bdc7cc,
    -35px 30px 0 0 #bdc7cc,
    -41px 35px 0 0 #bdc7cc,
    -47px 40px 0 0 #bdc7cc,
    -53px 45px 0 0 #bdc7cc,
    -59px 50px 0 0 #bdc7cc,
    -65px 55px 0 0 #bdc7cc,
    -71px 60px 0 0 #bdc7cc,
    -77px 65px 0 0 #bdc7cc,
    -83px 70px 0 0 #bdc7cc,
    -89px 75px 0 0 #bdc7cc,
    -95px 80px 0 0 #bdc7cc,
    -101px 85px 0 0 #bdc7cc,
    -107px 90px 0 0 #bdc7cc,
    -113px 95px 0 0 #bdc7cc,
    -119px 100px 0 0 #bdc7cc,
    -125px 105px 0 0 #bdc7cc,
    -131px 110px 0 0 #bdc7cc;
}
.tracks-mask{
    display: block;
    position: absolute;
    background-color: #ebebeb;
    height: 300px;
    width: 300px;
    margin-top: 20px;
    margin-right: 8px;
    top: 0;
    right: 0;
    z-index: 0;
    animation: tracks-mask 18s linear infinite;/**********/
}
@keyframes tracks-mask{
    0%{
        top: -26px;
        right: 65px;
    }
    100%{
        top: 125px;
        right: 242px;
    }
}