@charset "UTF-8";
/* CSS Document */


body{
    position:absolute;
    border:0 none;
    outline:0;
    padding:0;
    margin:0;
    background: #000000;
    background-color:transparent;
}

#container{
    position:absolute;
    width:300px;
    height:250px;
    top:0px;
    left:0px;
    margin:auto;
    overflow: hidden;
}

.raindrop{
    position:absolute;
    top:100px;
    left:100px;
}

#raindropholder{
    position:absolute;
    top:-120px;
    left:0px;
}

#raindropholderback{
    position:absolute;
    top:-120px;
    left:0px;
    opacity:0.75;
    filter:alpha(opacity=0.75);
}

.shakedrop{
    position:absolute;
    top:125px;
    left:110px;
}

#shakedropholder{
    position:absolute;
    top:0px;
    left:0px;
    opacity:0;
    filter:alpha(opacity=0);
}

#exitBtn{
    position:absolute;
    top:0px;
    left:0px;
    width:300px;
    height:250px;
    cursor:pointer;
    z-index:400;
    background-color:#FFFFFF;
    opacity:0;
    filter:alpha(opacity=0);
}

#keyline{
    position:absolute;
    top:0px;
    left:0px;
    width:300px;
    height:250px;
    z-index:399;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border:1px solid #666666;
    background-color:transparent;
}

#orby {
    position:absolute;
    top:70px;
    left:55px;
    opacity:0;
    filter:alpha(opacity=0);
}

#orbyEyes {
    position:absolute;
    width:187px;
    height:100px;
    overflow:hidden;
    top:40px;
    left:-20px;
}

#bristlesLeft, #bristlesLeftFront{
    position:absolute;
    left:0px;
    top:0px;
}

#bristlesRight, #bristlesRightFront{
    position:absolute;
    left:0px;
    top:0px;
}

#lBristles{
    position:absolute;
    top:0px;
    left:0px;
}

#rBristles{
    position:absolute;
    top:0px;
    left:80px;
}

#gradOverlay{
    position:absolute;
    width:336px;
    height:350px;
    background: -webkit-linear-gradient(rgba(11,61,6,1), rgba(11,61,6,0.6) 40%, rgba(11,61,6,0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(11,61,6,1), rgba(11,61,6,0.6) 40%, rgba(11,61,6,0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(11,61,6,1), rgba(11,61,6,0.6) 40%, rgba(11,61,6,0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(11,61,6,1), rgba(11,61,6,0.6) 40%, rgba(11,61,6,0)); /* Standard syntax */
}

#eyeSrc {
    position:absolute;
    top:0px;
    left:0px;
}

#starryEyes {
    position:absolute;
    top:0px;
    left:0px;
    opacity:0;
    filter:alpha(opacity=0);
}

#background {
    position:absolute;
    width:100%;
    height:100%;
    top: 0px;
    left: 0px;

    background: -webkit-linear-gradient(#003d0b, #00a44a); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#003d0b, #00a44a); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#003d0b, #00a44a); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#003d0b, #00a44a); /* Standard syntax */
}

#bgImage {
    position:absolute;
}

#arrowCTA {
    position:absolute;
    left: -325px;
    top: 45px;
    -ms-transform: rotate(12deg) ; /* IE 9 */
    -webkit-transform: rotate(12deg); /* Chrome, Safari, Opera */
    transform: rotate(12deg);
}

#logo {
    position:absolute;
    /*
    left: -78px;
    top: -290px;
    */
    left: -110px;
    top: -320px;
    opacity:1;
    filter:alpha(opacity=100);
}

#logo2 {
    position:absolute;
    left: 159px;
    bottom: -145px;
}

#copy_frame01 {
    position:absolute;
    left: 16px;
    top: 15px;
    width:300px;
    opacity:0;
    filter:alpha(opacity=0);
}

#copy_frame02 {
    position:absolute;
    left: 16px;
    top: 15px;
    width:300px;
    opacity:0;
    filter:alpha(opacity=0);
}

#copy_frame03 {
    position:absolute;
    left: 16px;
    top: 14px;
    width:300px;
    opacity:0;
    filter:alpha(opacity=0);
}

#orbyBody {
    position:absolute;
    top:-30px;
    left:-30px;
}

#orbyDirt1, #orbyDirt3 {
    position:absolute;
    top:0px;
    left:0px;
}

#orbyDirt2 {
    position:absolute;
    top:13px;
    left:0px;
}

#btnReplay {
    position:absolute;
    left: 5px;
    bottom: 5px;
    display:none;
    z-index:401;
    cursor: pointer;
}


/***********************************************************
 **************** AD ANIMATIONS ****************************
 ***********************************************************/

.growBgImage {
    -webkit-animation-name: growBgImage;
            animation-name: growBgImage;
    -webkit-animation-duration: 13s;
            animation-duration: 13s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@-webkit-keyframes growBgImage {
    0%    {-webkit-transform:scale(1.0) translate(0px,0px);transform:scale(1.0) translate(0px,0px);}
    100%  {-webkit-transform:scale(1.4) translate(40px,-35px);transform:scale(1.4) translate(40px,-35px);}
}
@-webkit-keyframes growBackground {
    0%    {-webkit-transform:scale(1.0) translate(0px,0px);transform:scale(1.0) translate(0px,0px);}
    100%  {-webkit-transform:scale(1.4) translate(40px,-35px);transform:scale(1.4) translate(40px,-35px);}
}
@keyframes growBackground {
    0%    {-webkit-transform:scale(1.0) translate(0px,0px);transform:scale(1.0) translate(0px,0px);}
    100%  {-webkit-transform:scale(1.4) translate(40px,-35px);transform:scale(1.4) translate(40px,-35px);}
}

.slideUpLogo {
    -webkit-animation-name: slideUpLogo;
            animation-name: slideUpLogo;
    -webkit-animation-duration: 0.6s;
            animation-duration: 0.6s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@-webkit-keyframes slideUpLogo {
    0%    {-webkit-transform:translate(0px,0px);transform:translate(0px,0px);}
    100%  {-webkit-transform:translate(0px,-120px);transform:translate(0px,-120px);}
}
@keyframes slideUpLogo {
    0%    {-webkit-transform:translate(0px,0px);transform:translate(0px,0px);}
    100%  {-webkit-transform:translate(0px,-120px);transform:translate(0px,-120px);}
}

.slideInArrow {
    -webkit-animation-name: slideInArrow;
            animation-name: slideInArrow;
    -webkit-animation-duration: 0.6s;
            animation-duration: 0.6s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@-webkit-keyframes slideInArrow {
    0%    {-webkit-transform:translate(0px,0px);transform:translate(0px,0px);}
    100%  {-webkit-transform:translate(300px,0px);transform:translate(300px,0px);}
}
@keyframes slideInArrow {
    0%    {-webkit-transform:translate(0px,0px);transform:translate(0px,0px);}
    100%  {-webkit-transform:translate(300px,0px);transform:translate(300px,0px);}
}

.bounceArrow {
    -webkit-animation-name: bounceArrow;
            animation-name: bounceArrow;
    -webkit-animation-duration: 3.6s;
            animation-duration: 3.6s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@-webkit-keyframes bounceArrow {
    0%    {-webkit-transform:translate(0px,0px);transform:translate(0px,0px);}
    100%  {-webkit-transform:translate(10px,0px);transform:translate(10px,0px);}
}
@keyframes bounceArrow {
    0%    {-webkit-transform:translate(0px,0px);transform:translate(0px,0px);}
    100%  {-webkit-transform:translate(10px,0px);transform:translate(10px,0px);}
}

.resetImage {
    -webkit-transform:scale(1.0) translate(0px,0px);
        -ms-transform:scale(1.0) translate(0px,0px);
            transform:scale(1.0) translate(0px,0px);;
}

.show {
    -webkit-animation-name: show;
            animation-name: show;
    -webkit-animation-duration: 0.7s;
            animation-duration: 0.7s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@-webkit-keyframes show {
    0%    {opacity:0;filter: alpha(opacity=0);}
    100%  {opacity:1;filter: alpha(opacity=100);}
}
@keyframes show {
    0%    {opacity:0;filter: alpha(opacity=0);}
    100%  {opacity:1;filter: alpha(opacity=100);}
}

.hide {
    -webkit-animation-name: hide;
            animation-name: hide;
    -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@-webkit-keyframes hide {
    0%    {opacity:1;filter: alpha(opacity=100);}
    100%  {opacity:0;filter: alpha(opacity=0);}
}
@keyframes hide {
    0%    {opacity:1;filter: alpha(opacity=100);}
    100%  {opacity:0;filter: alpha(opacity=0);}
}

.replayOver {
    -webkit-transform:rotate(30deg);
        -ms-transform:rotate(300deg);
            transform:rotate(300deg);
    -webkit-transition: -webkit-transform 0.4s;
            transition: transform 0.4s;
}

.replayOff {
    -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
            transform:rotate(0deg);
    -webkit-transition: -webkit-transform 0.4s;
            transition: transform 0.4s;
}

.resetItemOpacity {
    -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
            transform:rotate(0deg);
    opacity:0;
    filter:alpha(opacity=0);
}

:focus {outline:none;}
::-moz-focus-inner {border:0;}