body{
  margin:0;
  padding:0;
}
#playScreen{
  position:absolute;
  background-image:url(../img/playScreen.jpg);
  width:160px;
  height:600px;
  top: 0;
  left: 0;
  opacity: 1;
  visibility: visible;
}
#mainContainer{
  position:relative;
  width:160px;
  height:600px;
  background-color:transparent;
  overflow: hidden;
}
#border{ 
  position:absolute; 
  width:158px; 
  height:598px; 
  left:0;
  top:0;
  border:solid 1px #000; 
}
#bg-exit {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:hidden;
  cursor: pointer;
}
#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: 0;
  top: 0;
  opacity:0;
}
#replayBtn:hover{
  background-image:url(../img/replayBtnWhite.png) !important;
}

/***** bubbling glasses background ******/
.glasses{
  position:absolute;
  width:51px;
  height:28px;
  background:url(../img/glasses.png);
}
#glassesContainer{
  position:absolute;
  width:160px;
  height:600px;
  background-color:#e5007e;
  overflow: hidden;
}
/*************************/


/***** svg circles for glasses drawing ******/
svg{
  stroke-opacity:0;
  fill-opacity:0;
}
#leftCircle{
  position: absolute;
  left: -41px;
  top:73px;
}
#rightCircle{
  position: absolute;
  left: 40px;
  top:70px;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
}

/* glasses draw behind this cutout to better simulate actual shape of glasses in iris emoji */
#glassesCutout{ 
  position: absolute;
  background-image: url(../img/glassesCutout.png);
  width:160px;
  height: 600px;
  top: 0;
  left: 0;
  opacity: 0; 
}
/*************************/


/***** emoji lockup 1 ******/
.emojiLockup1{
  position: absolute;
  background-image: url(../img/emojiLockup1.png);
  width:160px;
  height: 600px;
  top: 0;
  left: 0;
  opacity: 0; 
}
#emoji{
  background-position: 0 0;
  width:160px;
  height: 195px;
  top: 0;
  left: 0;
  opacity: 0; 
}
#quote{
  background-position: 0 -195px;
  width:160px;
  height: 405px;
  top: 195px;
  left: 0;
  opacity: 0; 
}
/*************************/


/***** emoji lockup 2 ******/
#emojiLockup2{
  position: absolute;
  background-image: url(../img/emojiLockup2.png);
  width:160px;
  height: 600px;
  top: 0;
  left: 0;
  opacity: 0; 
}
/*************************/


/***** model images ******/
#img1{
  position: absolute;
  background-image: url(../img/img1.jpg);
  background-position: 58px -45px;
  width: 272px;
  height: 272px;
  top: 49px;
  left: -57px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  opacity: 0;
}
#img2{
  position: absolute;
  background-image: url(../img/img2.jpg);
  background-position: 58px -45px;
  width: 272px;
  height: 272px;
  top: 49px;
  left: -57px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  opacity: 0;
}
#img3{
  position: absolute;
  background-image: url(../img/img3.jpg);
  background-position: 58px -45px;
  width: 272px;
  height: 272px;
  top: 49px;
  left: -57px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  opacity: 0;
}
/*************************/


/***** cta ******/
.cta{
  position: absolute;
  background-image: url(../img/cta.png);
}
#incLogoIntro{
  width: 160px;
  height: 508px;
  background-position: 0 0;
  top: -150px;
  left: 0;
  opacity: 1;
}
#incLogo{
  width: 160px;
  height: 508px;
  background-position: 0 0;
  top: 0;
  left: 0;
  opacity: 0;
}
#shopNow{
  width: 160px;
  height: 53px;
  background-position: 0 -508px;
  top: 508px;
  left: 0;
  opacity: 0;
}
/**************/


/***** video-related elements ******/
video{
  max-width: 99%;
  width:99%;
  height: auto;
}
#videoContainer{
  position: absolute;
  top: 181px;
  left: 2px;
  visibility:hidden;
  opacity: 0;
}
#watchVideoBtn{
  width: 75px;
  height: 25px;
  background-position: -43px -562px;
  top: 561px;
  left: 43px;
  cursor:pointer;
  visibility:hidden;
  opacity: 0;
}
#closeVideoBtn{
  position: absolute;
  background-image: url(../img/closeVideo.png);
  width: 31px;
  height: 31px;
  top: 170px;
  left: 132px;
  cursor:pointer;
  visibility:hidden;
  opacity: 0;
}
#videoBackgroundLogos{
  position: absolute;
  background-image: url(../img/videoScreen.png);
  width: 160px;
  height: 600px;
  top: 0;
  left: 0;
  opacity: 0;
}
/****************************/