body {
	background-color: #444;
}

.wrapper {
    position: relative;
    height: 143px;
    width: 542px;
    top: 60px;
    margin: auto;
    opacity: 0;
}

.fadeIn {
   animation-name: fadeIn;
   -webkit-animation-name: fadeIn;
    animation-delay: .2s;
    -webkit-animation-delay: .2s;
    animation-duration: .3s;
    -webkit-animation-duration: .3s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

-webkit-@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}


.btn {
    position: absolute;
    top: 220px;
    width: 266px;
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    color: #ccc;
    text-align: center;
    line-height: 3;
    border-radius: 4px;
    border: 1px #ccc solid;
    cursor: default;
    opacity: 0.1;
    pointer-events: none;
}

#start_button {
    left: 0px;
}

#clear_button {
    left: 271px;
}

.btn.active {
    color: #73ed29;
    border: 1px #73ed29 solid;
    cursor: pointer;
    opacity: 1;
    pointer-events: all;
}

.points_bg {
    background-size: 100% 100%;
    background-image: url(../images/points_bg.png);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 18px;
    height: 86px;
}

#points_green {
    background-size: 100% 100%;
    background-image: url(../images/points_green.png);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 18px;
    height: 86px;
}

.point_green {
    background-size: 100% 100%;
    background-image: url(../images/point_green.png);
    position: absolute;
    top: 114px;
    left: 458px;
    width: 18px;
    height: 29px;
}

.points_cont {
    position: absolute;
    left: 208px;
    top: 57px;
/*    top: 129px;*/
    width: 18px;
    height: 86px;
}

.num_bg_cont {
    position: absolute;
    width: 84px;
    height: 143px;
}

.num_bg {
    background-size: 100% 100%;
    background-image: url(../images/8_bg.png);
    position: absolute;
    width: 84px;
    height: 143px;
}

.num0 {
    left: 500px;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}

.num1 {
    left: 350px;
}

.num2 {
    left: 250px;
}

.num3 {
    left: 100px;
}

.num4 {
    left: 0px;
}

.green_num {
    background-size: 100% 100%;
    position: absolute;
    width: 84px;
    height: 143px;
}

.green_num1 {
   background-image: url(../images/green_up.png); 
}

.green_num2 {
   background-image: url(../images/green_up_right.png); 
}

.green_num3 {
   background-image: url(../images/green_down_right.png); 
}

.green_num4 {
   background-image: url(../images/green_down.png); 
}

.green_num5 {
   background-image: url(../images/green_down_left.png); 
}

.green_num6 {
   background-image: url(../images/green_up_left.png); 
}

.green_num7 {
   background-image: url(../images/green_middle.png); 
}

.shadowed {
    opacity: 0.1;
}

.hidden {
    opacity: 0;
}