/* 3D Bouncing ball */
body{
    background-color:#ccc;
    }
    #textWrapper {
      width: 240px;
        height: 300px;
        position: fixed;
        left: 50%;
        top: 35%;
        margin-left: -70px;
        z-index: 100;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 5s linear 0s;
        -moz-transition: all 5s linear 0s;
        transition: all 5s linear 0s;
        cursor: pointer;
    }
    
    #textWrapper:active {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        cursor: pointer;
    }
    
    #text {
        width: 240px;
        height: 140px;
        position: absolute;
        top: 0;
        font-family: 'Yanone Kaffeesatz', cursive;
    line-height: 1em;
    color: #fff9d6;
    font-weight:bold;
    font-size: 85px;
    text-shadow:0px 0px 0 rgb(231,231,231),1px 0px 0 rgb(216,216,216),2px 0px 0 rgb(202,202,202),3px 0px 0 rgb(187,187,187),4px 0px 0 rgb(173,173,173),5px 0px 0 rgb(158,158,158), 6px 0px 0 rgb(144,144,144),7px 0px 6px rgba(0,0,0,0.6),7px 0px 1px rgba(0,0,0,0.5),0px 0px 6px rgba(0,0,0,.2);
        z-index: 11;
        -webkit-animation: jump 1s infinite;
        -moz-animation: jump 1s infinite;
        -o-animation: jump 1s infinite;
        -ms-animation: jump 1s infinite;
        animation: jump 1s infinite;
        cursor: pointer;
    }
    
    #text:after {
          border-bottom: 10px solid #EFE60F;
        border-radius: 61px 61px 61px 61px;
        content: "";
        left: 3px;
        position: absolute;
        top: 85px;
        width: 116px;
        z-index: 10;
        box-shadow:0px 1px 1px #ccc;
    }
    
    #textShadow {
        position: absolute;
        left: 24%;
        bottom: 0;
        z-index: 10;
        margin-left: -30px;
        width: 100px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;	
        -webkit-transform: scaleY(.3);
        -moz-transform: scaleY(.3);
        -ms-transform: scaleY(.3);
        -o-transform: scaleY(.3);
        transform: scaleY(.3);
        -webkit-animation: shrink 1s infinite;
        -moz-animation: shrink 1s infinite;
        -o-animation: shrink 1s infinite;
        -ms-animation: shrink 1s infinite;
        animation: shrink 1s infinite;
    }
    
    /* Animations */
    
    @-webkit-keyframes jump {
        0% {top: 0;
            -webkit-animation-timing-function: ease-in;
        }
        40% {}
        50% {top: 140px;
            height: 140px;
            -webkit-animation-timing-function: ease-out;
        }
        55% {top: 160px; height: 120px; border-radius: 70px / 60px;
            -webkit-animation-timing-function: ease-in;}
        65% {top: 120px; height: 140px; border-radius: 70px;
            -webkit-animation-timing-function: ease-out;}
        95% {
            top: 0;		
            -webkit-animation-timing-function: ease-in;
        }
        100% {top: 0;
            -webkit-animation-timing-function: ease-in;
        }
    }
    
    @-moz-keyframes jump {
        0% {top: 0;
            -moz-animation-timing-function: ease-in;
        }
        40% {}
        50% {top: 140px;
            height: 140px;
            -moz-animation-timing-function: ease-out;
        }
        55% {top: 160px; height: 120px; border-radius: 70px / 60px;
            -moz-animation-timing-function: ease-in;}
        65% {top: 120px; height: 140px; border-radius: 70px;
            -moz-animation-timing-function: ease-out;}
        95% {
            top: 0;		
            -moz-animation-timing-function: ease-in;
        }
        100% {top: 0;
            -moz-animation-timing-function: ease-in;
        }
    }
    
    @-o-keyframes jump {
        0% {top: 0;
            -o-animation-timing-function: ease-in;
        }
        40% {}
        50% {top: 140px;
            height: 140px;
            -o-animation-timing-function: ease-out;
        }
        55% {top: 160px; height: 120px; border-radius: 70px / 60px;
            -o-animation-timing-function: ease-in;}
        65% {top: 120px; height: 140px; border-radius: 70px;
            -o-animation-timing-function: ease-out;}
        95% {
            top: 0;		
            -o-animation-timing-function: ease-in;
        }
        100% {top: 0;
            -o-animation-timing-function: ease-in;
        }
    }
    
    @-ms-keyframes jump {
        0% {top: 0;
            -ms-animation-timing-function: ease-in;
        }
        40% {}
        50% {top: 140px;
            height: 140px;
            -ms-animation-timing-function: ease-out;
        }
        55% {top: 160px; height: 120px; border-radius: 70px / 60px;
            -ms-animation-timing-function: ease-in;}
        65% {top: 120px; height: 140px; border-radius: 70px;
            -ms-animation-timing-function: ease-out;}
        95% {
            top: 0;		
            -ms-animation-timing-function: ease-in;
        }
        100% {top: 0;
            -ms-animation-timing-function: ease-in;
        }
    }
    
    @keyframes jump {
        0% {
            top: 0;
            animation-timing-function: ease-in;
        }
        50% {
            top: 140px;
            height: 140px;
            animation-timing-function: ease-out;
        }
        55% {
            top: 160px; 
            height: 120px; 
            border-radius: 70px / 60px;
            animation-timing-function: ease-in;
        }
        65% {
            top: 120px; 
            height: 140px; 
            border-radius: 70px;
            animation-timing-function: ease-out;
        }
        95% {
            top: 0;		
            animation-timing-function: ease-in;
        }
        100% {
            top: 0;
            animation-timing-function: ease-in;
        }
    }
    
    
    
    @-webkit-keyframes shrink {
        0% {
            bottom: 0;
            margin-left: -30px;
            width: 60px;
            height: 75px;
            background: rgba(20, 20, 20, .1);
            box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
            border-radius: 30px / 40px;
            -webkit-animation-timing-function: ease-in;
        }
        50% {
            bottom: 30px;
            margin-left: -10px;
            width: 20px;
            height: 5px;
            background: rgba(20, 20, 20, .3);
            box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
            border-radius: 20px / 20px;
            -webkit-animation-timing-function: ease-out;
        }
        100% {
            bottom: 0;
            margin-left: -30px;
            width: 60px;
            height: 75px;
            background: rgba(20, 20, 20, .1);
            box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
            border-radius: 30px / 40px;
            -webkit-animation-timing-function: ease-in;
        }
    }
    
    @-moz-keyframes shrink {
        0% {
            bottom: 0;
            margin-left: -30px;
            width: 60px;
            height: 75px;
            background: rgba(20, 20, 20, .1);
            box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
            border-radius: 30px / 40px;
            -moz-animation-timing-function: ease-in;
        }
        50% {
            bottom: 30px;
            margin-left: -10px;
            width: 20px;
            height: 5px;
            background: rgba(20, 20, 20, .3);
            box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
            border-radius: 20px / 20px;
            -moz-animation-timing-function: ease-out;
        }
        100% {
            bottom: 0;
            margin-left: -30px;
            width: 60px;
            height: 75px;
            background: rgba(20, 20, 20, .1);
            box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
            border-radius: 30px / 40px;
            -moz-animation-timing-function: ease-in;
        }
    }
    
    @-o-keyframes shrink {
        0% {
            bottom: 0;
            margin-left: -30px;
            width: 60px;
            height: 75px;
            background: rgba(20, 20, 20, .1);
            box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
            border-radius: 30px / 40px;
            -o-animation-timing-function: ease-in;
        }
        50% {
            bottom: 30px;
            margin-left: -10px;
            width: 20px;
            height: 5px;
            background: rgba(20, 20, 20, .3);
            box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
            border-radius: 20px / 20px;
            -o-animation-timing-function: ease-out;
        }
        100% {
            bottom: 0;
            margin-left: -30px;
            width: 60px;
            height: 75px;
            background: rgba(20, 20, 20, .1);
            box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
            border-radius: 30px / 40px;
            -o-animation-timing-function: ease-in;
        }
    }
    
    @-ms-keyframes shrink {
        0% {
            bottom: 0;
            margin-left: -30px;
            width: 60px;
            height: 75px;
            background: rgba(20, 20, 20, .1);
            box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
            border-radius: 30px / 40px;
            -ms-animation-timing-function: ease-in;
        }
        50% {
            bottom: 30px;
            margin-left: -10px;
            width: 20px;
            height: 5px;
            background: rgba(20, 20, 20, .3);
            box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
            border-radius: 20px / 20px;
            -ms-animation-timing-function: ease-out;
        }
        100% {
            bottom: 0;
            margin-left: -30px;
            width: 60px;
            height: 75px;
            background: rgba(20, 20, 20, .1);
            box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
            border-radius: 30px / 40px;
            -ms-animation-timing-function: ease-in;
        }
    }
    
    @keyframes shrink {
        0% {
            bottom: 0;
            margin-left: -30px;
            width: 60px;
            height: 75px;
            background: rgba(20, 20, 20, .1);
            box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
            border-radius: 30px / 40px;
            animation-timing-function: ease-in;
        }
        50% {
            bottom: 30px;
            margin-left: -10px;
            width: 20px;
            height: 5px;
            background: rgba(20, 20, 20, .3);
            box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
            border-radius: 20px / 20px;
            animation-timing-function: ease-out;
        }
        100% {
            bottom: 0;
            margin-left: -30px;
            width: 60px;
            height: 75px;
            background: rgba(20, 20, 20, .1);
            box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
            border-radius: 30px / 40px;
            animation-timing-function: ease-in;
        }
    }