body {
  margin: 0;
  height: 92px;
  font-family: 'Roboto Slab', serif;
}

.container {
  width: 100%;
  max-width: 730px;
}

#bgImage {
  position: absolute;
  display: inline-block;
  width: 100%;
  max-width: 730px;
  height: 105px;
  top: 0;
}

#daysTo {
  position: absolute;
  width: 170px;
  top: 52px;
  z-index: 100;
  left: 224px;
}

#summerjamLogo {
  position: absolute;
  width: 170px;
  top: 9px;
  z-index: 10;
  left: 35px;
}

#click-through {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 92px;
  cursor: pointer;
  z-index: 999;
}

.flip-clock-wrapper {
  display: inline-block;
  text-align: center;
  position: relative;
  width: inherit;
  margin: 0;
  z-index: 100;
  top: 37px;
  left: 410px;
}

.flip-clock-wrapper ul {
  position: relative;
  float: left;
  margin: 3px;
  width: 27px;
  height: 36px;
  font-size: 28px;
  font-weight: bold;
  line-height: 60px;
  border-radius: 6px;
  background: #000;
  padding: 0;
}

.flip-clock-wrapper ul li {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 36px;
  text-decoration: none !important;
}

.flip-clock-wrapper ul li a div {
  z-index: 1;
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  font-size: 28px;
  overflow: hidden;
  outline: 1px solid transparent;
}

.flip-clock-wrapper ul li a div div.inn {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 200%;
  color: #000;
  text-shadow: none;
  text-align: center;
  background-color: #E1C66B;
  border-radius: 3px;
  font-size: 28px;
  font-family: 'Roboto Slab', serif;
  font-weight: bolder;
}

.flip-clock-divider .flip-clock-label {
  position: absolute;
  top: 42px;
  right: -45px;
  color: #E1C66B;
  text-shadow: none;
  font-family: 'Roboto Slab', serif;
  text-transform: uppercase;
  font-size: 10px;
}

.flip-clock-divider.hours .flip-clock-label {
  right: -49px;
}


  .flip-clock-divider.seconds .flip-clock-label {

  }


.flip-clock-divider.minutes .flip-clock-label {
  right: -55px;
}

.flip-clock-divider.seconds .flip-clock-label {
  right: -55px;
}

.flip-clock-dot {
  display: block;
  background: #E1C66B;
  width: 3px;
  height: 3px;
  position: absolute;
  border-radius: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  left: 3px;
}

.flip-clock-dot.top {
  top: 14px;
}

.flip-clock-dot.bottom {
  bottom: 71px;
}

.flip-clock-divider {
  float: left;
  display: inline-block;
  position: relative;
  width: 9px;
  height: 100px;
}

.flip-clock-wrapper ul li a div.down {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}









@media (max-width: 729px) {

  #bgImage{
    height: 105px;
  }
  .flip-clock-wrapper {
    display: block;
    text-align: center;
    position: relative;
    width: 291px;
    margin: 0 auto;
    z-index: 100;
    top: 55px;
    left: 0px;
  }

  .flip-clock-dot.bottom {
    bottom: 18px;
  }

  .flip-clock-dot.top {
    bottom: 13px;
  }

  .flip-clock-divider {
    float: left;
    display: inline-block;
    position: relative;
    height: 42px;
  }

  .logos {
    display: block;
    position: relative;
    width: 291px;
    height: 32px;
    margin: 0 auto;
    top: 15px;
    align-items: baseline;
  }

  #daysTo {
    position: relative;
    width: 144px;
    top: -21px;
    z-index: 100;
    left: 142px;
    float: left;
  }

  #summerjamLogo {
    position: absolute;
    width: 130px;
    top: -54px;
    z-index: 10;
    left: 3px;
  }

  .flip-clock-wrapper ul li a div div.inn {
    font-size: 22px;
    line-height: 26px;
  }
  .flip-clock-wrapper ul {
    height: 28px
  }
  .flip-clock-divider .flip-clock-label {
    top: 32px;
  }


}