{ padding:0, margin:0, list-style-type:none;}

#banner{
  position: absolute;
  width: 300px;
  height: 250px;
  top: 0px;
  left: 0px;
  overflow: hidden;
  cursor: pointer;
  background-color: #69b6cc;
}

.retina{
  position: absolute;
  width: 300px;
  height: 250px;
}


#border {
  position: absolute;
  width: 300px;
  height: 250px;
  top: 0px;
  left: 0px;
  border:1px solid #cccccc;
  z-index: 9998;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.button{
  position: absolute;
  width: 300px;
  height: 250px;
  left:0px;
  top:0px;
  cursor: pointer;
  z-index: 9999;
}

#buttonActive{
  display: none;
}

#overlay{
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
  background-color: #69b6cc;
  z-index: 10000;
  border:1px solid #cccccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}


.spriteWrapper{
  position: absolute;
  top:40px;
  left:76px;
  width: 140px;
  height: 140px;
  overflow: hidden;
}

.sprite{
  position: absolute;
  top:0px;
  left:0px;
  width: 140px;
  height: auto;

}

.happyCheck{
  position: absolute;
  top:18px;
  left:50px;
  width: 180px;
  height: 180px;

}

.happyCheckInner{
  position: absolute;
  top:0px;
  left:0px;
  width: 180px;
  height: auto;

}

#smile{
  clip: rect(0px 180px 180px 0px);
  overflow:hidden;
}

.smileReveal{
  position: absolute;
  top: 34%;
  left: 20%;
  width: 60%;
  height: 28%;
  background-color:#69b6cc;

}


.slider{
  position: absolute;
  left:0px;
  width:100%;
  height:100%;
  background-color: #69b6cc;

  background-size: 100% 100%;
  overflow: hidden;
  z-index: 0;

}

.arrow{
  position: absolute;
  top:120px;
  width:30px;
  height: 30px;
  cursor: pointer;
  z-index: 9999;
  background-image: url("arrow.png");
  background-size: 100% 100%;
}


.arrow:hover {
  background-image: url("arrowActive.png");
  background-size: 100% 100%
}


.left{
  left:10px;
}

.right{
  right: 10px;
          -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}



.slide{
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
/*  background-color: #fff;*/
  overflow: hidden;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

.slide img{
  display:block;
    margin:auto;
}

.slide:nth-child(odd) {
/*    background-color: #69b6cc;*/
}

.title{
  position: absolute;
  top:50%;
  left:50%;
  text-align: center;
  font-size: 80px;
  transform: translate(-50%, -50%);
  color:#fff;

}

.navigation{
  position: absolute;
  bottom: 10px;
  width:100%;
  text-align: center;
    display: none;
}

.bullet{
  display: inline-block;
  width:20px;
  height:1px;
    margin:1px;
/*    border: 1px solid white;*/
   /* border-radius: 50%;*/
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.bulletInner{

  width:100%;
  height:100%;
background: #fff;
}

.bulletActive{
  background-color: #fff;
}

.slideIndex{
  position: absolute;
  top:0px;
  left:0px;
  font-size: 20px;
  color:#fff;
}

.slideIndexNumber{
  position: absolute;
  top:0px;
  left:0px;
}

.lines{
  position: absolute;
  top:0px;
  left: 0px;
  width:100%;
  height: 100%;
}

.line{
  position: relative;
  width: 1px;
  height: 100%;
  float: left;
  margin-left: 20%;
  background-color: #fff;
  opacity: .1;
/*  border-left: 1px solid #c8c8c8;
  opacity: .2;
      box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;*/
}

.slideImage{
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height: 100%;

}

.hitArea{
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 156px;
    height: 48px;
    z-index: 9999;
}