/*  RESET **************************/
html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; min-height: 100%;}
body {margin: 0px; padding: 0px; line-height: 1;}
a:active,
a:hover {
    outline: 0;
}
hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0;}
img {border: 0; width: 100%; height: auto;}
svg:not(:root) {overflow: hidden;}
select {-webkit-appearance: none;}
button[disabled],
html input[disabled] {
    cursor: default;
}
textarea {overflow: auto; vertical-align: top; resize: none;}
a,
a:hover,
a:visited {
  text-decoration: none;
}
* {-moz-box-sizing: border-box; box-sizing: border-box;}
div{position: absolute; display: block;}
.centered{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

/*  BANNER *********************/
#ad {
    width: 300px;
    height: 250px;
    background-color: #000;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    image-rendering: -webkit-optimize-contrast;
    /*-webkit-font-smoothing: antialiased;*/
    -webkit-perspective:1000px;

}
#banner {
    width: 100%;
    height: 100%;
}
#outline {
    width: 100%;
    height: 100%;
    border:1px solid black;
    z-index: 20;
}

/* CUSTOM CSS *******************/
#banner {
    font-family: Helvetica, sans-serif;
    font-size: 9px;
    color: #000;
}
#bg {
    width:350px;
    height:350px;
    background:url('../images/bg.jpg') no-repeat;
    background-size: contain;
}
#bottomBG {
    width:300px;
    height:250px;
    background:url('../images/window.jpg') no-repeat;
    background-size: contain;
}
#fader{
    width: 100%;
    height: 100%;
    background-color: #fff;
}
#rain{
    width: 100%;
    height: 100%;
}
#logo{
    width:55px;
    height:16px; 
    left:10px;
    bottom:10px;
    background:url('../images/logo.png') no-repeat;
    background-size: contain;
}
#chicken{
    width:270px;
    height:300px;

    top:90px;

    background:url('../images/chicken.png') no-repeat;
    background-size: contain;
}

#rainy{
    width:300px;
    height:250px; 
    background:url('../images/rainy.png') no-repeat;
    background-size: contain;
    }
    #singleDrop{
        width:10px;
        height:10px;
        left:240px;
        top:145px;
        display: none;
    }
    
#turnup{
    width:190px;
    height:200px; 
    top:20px;
    background:url('../images/warmup.png') no-repeat;
    background-size: contain;
}
#heat{
    width:120px;
    height:200px; 
    top:56px;
    background:url('../images/inside.png') no-repeat;
    background-size: contain;
}
#lockup{
    width:186px;
    height:66px; 
    top:20px;
    background:url('../images/lockup.png') no-repeat;
}
.dot{
    width:42px;
    height:42px; 
    background:url('../images/ember.png') no-repeat;
}
.drop{
    width:20px;
    height:20px; 
    background:url('../images/drop.png') no-repeat;
    background-size: contain;
}
#tcs{
    bottom:10px;
    left:80px;
    width:auto;
    height:auto;
    color: #fff;
    text-align: right;
    font-size: 9px;
}
#embers{
    width:100%;
    height:100%; 
}
#cta{
    width:120px;
    height:29px;
    right:10px;
    bottom:10px;
    background:url('../images/cta.png') no-repeat;
}

/* NEED THESE IF YOU WANT EFFECTS ******************/
.steamer{
    width: 5px;
    height: 5px;
    /* UNCOMMENT BELOW FOR POSITIONING 
    background-color: #ff0000;*/
}
#steamHolder{
    left:10%;
    top:-10px;
}
#steamHolder2{
    left:95%;
    top:-10px;
}
#steamHolder3{
    left:10%;
    top:10%;
}
#steamHolder4{
    left:90%;
    top:10%;
}
#steamHolder5{
    left:80%;
    top:20%;
}
/* ************************************************/