body{
  margin:0;
  padding:0;
}
#playScreen{
  position:absolute;
  background-image:url(../img/playScreen.jpg);
  width: 300px;
  height: 250px;
  top: 0;
  left: 0;
  opacity: 1;
  visibility: visible;
}
#mainContainer{
  position:relative;
  width:300px;
  height:250px;
  background-color:transparent;
  overflow: hidden;
}
#border{ 
  position:absolute; 
  width:298px; 
  height:248px; 
  left:0;
  top:0;
  border:solid 1px #000; 
}
#playBtn {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:hidden;
  cursor: pointer;
}
#replayBtn{
  position:absolute;
  background-image:url(../img/replayBtn.png);
  width:23px;
  height:23px;
  cursor:pointer;
  visibility:hidden;
  left: 278px;
  top: 1px;
  opacity:0;
}
#replayBtn:hover{
  background-image:url(../img/replayBtnWhite.png) !important;
}

/***** bubbling glasses background ******/
.glasses{
  position:absolute;
  width:73px;
  height:43px;
  background:url(../img/glasses.png);
}
#glassesContainer{
  position:absolute;
  width:300px;
  height:250px;
  background-color:#e5007e;
  overflow: hidden;
}
/*************************/

/***** svg circles ******/
svg{
  stroke-opacity:0;
  fill-opacity:0;
}
#leftCircle{
  position: absolute;
  left: -80px;
  top:-9px;
}
#rightCircle{
  position: absolute;
  left: 80px;
  top:-13px;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
}
/* As the model images fade in and out, the solid circle hides the bubbling glasses that would show up in the image area in betweem */
#solidCircle{
  position: absolute;
  width: 255px;
  height: 255px;
  left: 20px;
  top:0;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0;
}
/*************************/

/***** intro logo ******/
#intro{
  position: absolute;
  background-image: url(../img/intro.png);
  width: 300px;
  height: 250px;
  top: 0;
  left: 0;
  opacity: 1;
}

.emojiTxt{
  position: absolute;
  background-image: url(../img/emojiTxt.png);
}
#emojiBegin{
  background-position: 0 0;
  width:150px;
  height: 250px;
  top: -11px;
  left: 0;
  opacity: 0; 
}
#txt{
  background-position: -150px 0;
  width:150px;
  height: 250px;
  top: -11px;
  left: 150px;
  opacity: 0; 
}

/***** model images ******/
#img1{
  position: absolute;
  background-image: url(../img/img1.jpg);
  background-position: -22px 2px;
  width: 255px;
  height: 255px;
  top: -3px;
  left: 20px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  opacity: 0;
}
#img2{
  position: absolute;
  background-image: url(../img/img2.jpg);
  background-position: -22px 2px;
  width: 255px;
  height: 255px;
  top: -3px;
  left: 20px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  opacity: 0;
}
#img3{
  position: absolute;
  background-image: url(../img/img3.jpg);
  background-position: -22px 2px;
  width: 255px;
  height: 255px;
  top: -3px;
  left: 20px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  opacity: 0;
}
/*************************/


/***** landing screen emoji and inc lockup******/
.landingScreen{
  position: absolute;
  background-image: url(../img/landingScreen.png);
}
#emojiFinal{
  background-position: 0 0;
  width:150px;
  height: 190px;
  top: 0;
  left: 0;
  opacity: 0; 
}
#incLockup{
  background-position: -150px 0;
  width:150px;
  height: 190px;
  top: 0;
  left: 150px;
  opacity: 0; 
}
/***********************************************/


/***** cta ****************/
.cta{
  position: absolute;
  background-image: url(../img/cta.png);
}
#shopNow{
  background-position: 0 0;
  width: 155px;
  height: 70px;
  top: 188px;
  left: 63px;
  opacity: 0;
}
#shopNowOnly {
  position: absolute;
  background-image: url(../img/shopNowOnly.png); 
  width: 300px;
  height: 250px;
  top: 0;
  left: 0;
  opacity: 0; 
}
/*************************/


/***** video-related elements ******/
video{
  max-width: 99%;
  width:99%;
  height: auto;
}
#videoContainer{
  position: absolute;
  top: 3px;
  left: 3px;
  visibility:hidden;
  opacity: 0;
}
#watchVideoBtn{
  background-position: -168px -39px;
  width: 75px;
  height: 18px;
  top: 227px;
  left: 151px;
  cursor:pointer;
  visibility:hidden;
  opacity: 0;
}
#closeVideoBtn{
  position: absolute;
  background-image: url(../img/closeVideo.png);
  width: 31px;
  height: 31px;
  top: 0;
  left: 269px;
  cursor:pointer;
  visibility:hidden;
  opacity: 0;
}
#videoBackground{
  position: absolute;
  width: 300px;
  height: 250px;
  background-color: #e5007e;
  top: 0;
  left: 0;
  opacity: 0;
}
#videoBackgroundLogos{
  position: absolute;
  background-image: url(../img/videoScreen.png);
  width: 300px;
  height: 250px;
  top: 0;
  left: 0;
  opacity: 0;
}
/****************************/