@import url('http://fonts.googleapis.com/css?family=Roboto+Condensed');

.preserve-3d {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.button_base {
    display: inline-block;
    margin: 0;
    border: 0;
    font-family: Roboto Condensed, sans-serif;
    font-size: 22px;
    position: relative;
    width: 150px;
    height: 50px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-user-select: none;
    cursor: default;
    -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.298039) inset, 0 -1px 1px 0 rgba(255,255,255,0.14902) inset, 0 5px 0 0 rgb(50,50,50) , 5px 10px 0px 0 rgba(0,0,0,0.2);
     box-shadow: 0 1px 0 0 rgba(255,255,255,0.298039) inset, 0 -1px 1px 0 rgba(255,255,255,0.14902) inset, 0 5px 0 0 rgb(50,50,50) , 5px 10px 0px 0 rgba(0,0,0,0.2);
}

.button_base:hover {
    cursor: pointer;
}

/* ### ### ### 05 */
.b05_3d_roll {
    perspective: 500px;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
}

.b05_3d_roll div {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 50px;
    padding: 10px;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.b05_3d_roll div:nth-child(1) {
    color: #000000;
    background-color: #ffffff;
    border:3px solid white;
    border-radius: 5px;
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -25px;
    -webkit-transform-origin: 50% 50% -25px;
    -moz-transform-origin: 50% 50% -25px;
}

.b05_3d_roll div:nth-child(2) {
    color: #ffffff;
    background-color: #000000;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -25px;
    -webkit-transform-origin: 50% 50% -25px;
    -moz-transform-origin: 50% 50% -25px;
    border:3px solid black;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.b05_3d_roll:hover div:nth-child(1) {
    color: #000000;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
}

.b05_3d_roll:hover div:nth-child(2) {
    background-color: #ffffff;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
}

/* ### ### ### 10 */
/* ### ### ### 10 ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### */
.b10_tveffect div {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.b10_tveffect div:nth-child(1) {
    background-color: #DCD5D5;
    -webkit-transition: all 0.1s ease;
    padding: 10px;
    border: #000000 solid 1px;
}

.b10_tveffect div:nth-child(2) {
    overflow: hidden;
}

.b10_tveffect div:nth-child(2) div {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 10px;
    border: #000000 hidden 1px;
}

.b10_tveffect div:nth-child(2) div:nth-child(1) {
    color: rgba(200, 120, 120, 0.8);
    opacity: 0;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat;
}

.b10_tveffect div:nth-child(2) div:nth-child(2) {
    color: rgba(120, 200, 120, 0.8);
    opacity: 0;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat;
}

.b10_tveffect div:nth-child(2) div:nth-child(3) {
    color: rgba(120, 120, 200, 0.8);
    opacity: 0;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat;
}

.b10_tveffect:hover div:nth-child(1) {
    color: #ffffff;
    background-color: #000000;
    transition: color 0s ease;
    -webkit-transition: color 0s ease;
    -moz-transition: color 0s ease;
    transition: background-color 0.3s ease 0.2s;
    -webkit-transition: background-color 0.3s ease 0.2s;
    -moz-transition: background-color 0.3s ease 0.2s;
}

.b10_tveffect:hover div:nth-child(2) div:nth-child(1) {
    animation: b10_tveffect_red 0.25s linear;
    -webkit-animation: b10_tveffect_red 0.25s linear;
    -moz-animation: b10_tveffect_red 0.25s linear;
}

.b10_tveffect:hover div:nth-child(2) div:nth-child(2) {
    animation: b10_tveffect_green 0.25s linear;
    -webkit-animation: b10_tveffect_green 0.25s linear;
    -moz-animation: b10_tveffect_green 0.25s linear;
}

.b10_tveffect:hover div:nth-child(2) div:nth-child(3) {
    animation: b10_tveffect_blue 0.25s linear;
    -webkit-animation: b10_tveffect_blue 0.25s linear;
    -moz-animation: b10_tveffect_blue 0.25s linear;
}

@-webkit-keyframes b10_tveffect_red {
    from,
    to {
        opacity: 0;
    }
    25% {
        opacity: 1;
        -webkit-transform: scale(1.8, 1.6) translate(-10px, 3px) skewX(30deg);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.5, 1.2) translate(20px, 6px) skewX(5deg);
    }
    75% {
        opacity: 1;
        -webkit-transform: scale(0.9, 1.8) translate(-16px, -1px) skewX(-20deg);
    }
}

@-webkit-keyframes b10_tveffect_green {
    from,
    to {
        opacity: 0;
    }
    25% {
        opacity: 1;
        -webkit-transform: scale(1.3, 1.5) translate(3px, 6px) skewX(25deg);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.6, 1.1) translate(-16px, -5px) skewX(-15deg);
    }
    75% {
        opacity: 1;
        -webkit-transform: scale(1, 1.8) translate(18px, 4px) skewX(15deg);
    }
}

@-webkit-keyframes b10_tveffect_blue {
    from,
    to {
        opacity: 0;
    }
    25% {
        opacity: 1;
        -webkit-transform: scale(1.2, 1.4) translate(-10px, -3px) skewX(-25deg);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.9, 1.1) translate(16px, 3px) skewX(5deg);
    }
    75% {
        opacity: 1;
        -webkit-transform: scale(1.3, 2) translate(-30px, -3px) skewX(20deg);
    }
}

@-moz-keyframes b10_tveffect_red {
    from,
    to {
        opacity: 0;
    }
    25% {
        opacity: 1;
        transform: scale(1.8, 1.6) translate(-10px, 3px) skewX(30deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.5, 1.2) translate(20px, 6px) skewX(5deg);
    }
    75% {
        opacity: 1;
        transform: scale(0.9, 1.8) translate(-16px, -1px) skewX(-20deg);
    }
}

@-moz-keyframes b10_tveffect_green {
    from,
    to {
        opacity: 0;
    }
    25% {
        opacity: 1;
        transform: scale(1.3, 1.5) translate(3px, 6px) skewX(25deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.6, 1.1) translate(-16px, -5px) skewX(-15deg);
    }
    75% {
        opacity: 1;
        transform: scale(1, 1.8) translate(18px, 4px) skewX(15deg);
    }
}

@-moz-keyframes b10_tveffect_blue {
    from,
    to {
        opacity: 0;
    }
    25% {
        opacity: 1;
        transform: scale(1.2, 1.4) translate(-10px, -3px) skewX(-25deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.9, 1.1) translate(16px, 3px) skewX(5deg);
    }
    75% {
        opacity: 1;
        transform: scale(1.3, 2) translate(-30px, -3px) skewX(20deg);
    }
}