#main-panel {
  top: 0px;
  left: 0px;
  width: 968px;
  height: 248px;
  border: 1px solid #000;
  position: absolute;
  overflow: hidden;
}

#logo, #freeshipping, #everyorder, #endCTA, #restrictions {
  background-size: 100%;
  position: absolute;

  -webkit-transition: .3s margin ease-out;
  -moz-transition: .3s margin ease-out;
  -o-transition: .3s margin ease-out;
  transition: .3s margin ease-out;
}

#logo {
  background: transparent url("logo.svg") center center no-repeat;
  height: 53px;
  width: 53px;
  top: 7px;
  left: 4px;
}

#freeshipping {
  background: transparent url("freeshipping.svg") center center no-repeat;
  height: 41px;
  width: 440px;
  top: 93px;
  left: 38px;
}

#everyorder {
  background: transparent url("everyorder.svg") center center no-repeat;
  height: 22px;
  width: 309px;
  top: 141px;
  left: 41px;
}

#endCTA {
  position: absolute;
  width: 56px;
  height: 26px;
  background: #da1a33 url("endCTA.svg") center center no-repeat;
  background-size: 100%;
  bottom: 28px;
  left: 212px;
  padding: 0 18px;
  z-index: 11;

  -webkit-transition: .2s all ease-out;
  -moz-transition: .2s all ease-out;
  -o-transition: .2s all ease-out;
  transition: .2s all ease-out;
}

#endCTA:hover {
  cursor: pointer;
  background-color: #3b8536;
}

#restrictions {
  background: transparent url("restrictions.svg") center center no-repeat;
  height: 9px;
  width: 81px;
  top: 225px;
  left: 218px;
}

#bg-exit {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#container {
  width: 200%;
  overflow: hidden;
}

#content {
  width: 438px;
  height: 170px;
  padding: 40px;
  margin-left: -2px;
  float: left;
  /*background: url("endFrame.svg") center center no-repeat;*/
  background-size: 100%;
  position: relative;
  /*opacity: 0;*/
  overflow: hidden;
}

#play,
#pause,
#timer,
#unmuteToggle,
#muteToggle {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 5;
  width: 16px;
  height: 16px;
  padding: 10px;
}

#unmuteToggle,
#muteToggle {
  left: 30px;
}

#timer {
  color: #fff;
  left: 60px;
  font-size: 10pt;
  line-height: 16px;
  width: 100px;
}

#current-time,
#duration {
  display: inline-block;
  font-family: helvetica;
}

#play:hover,
#pause:hover,
#muteToggle:hover,
#unmuteToggle:hover {
  cursor: pointer;
}

#play,
#unmuteToggle {
  display: none;
}

#player,
#video-player {
  top: -1px;
  left: -5px;
  width: 448px;
  height: 252px;
  position: relative;
  float: left;
  border: solid #000 1px;
  background-color: black;
  z-index: 3;

  -webkit-transition: .3s height ease-in-out, .3s width ease-in-out, .3s top ease-in-out;
  -moz-transition: .3s height ease-in-out, .3s width ease-in-out, .3s top ease-in-out;
  -o-transition: .3s height ease-in-out, .3s width ease-in-out, .3s top ease-in-out;
  transition: .3s height ease-in-out, .3s width ease-in-out, .3s top ease-in-out;
}

.full-screen {
  width: 976px !important;
  height: 549px !important;
  top: -149.5px !important;
}

.off-canvas {
  opacity: 0;
  margin-left: 970px;
}

#ytClose {
  z-index: 3;
}

/*
 * Relieves x-browser CSS translation and transition issues
*/

#endCTA,
#player,
#video-player,
#logo, #freeshipping, #everyorder, #restrictions {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}