.product-html-div {
  margin: 0 auto;
  width: 100%;
}

#page #jl-product img {
  box-shadow: none;
}

#agi-expression-container #expression-play-button {
  width: 100%;
}

#agi-expression-container .loader {
  display: none;
}

#expression-interactive-layer {
  display: none;
  left: 0px;
  position: absolute;
  top: 0px;
}

.expression-video-fallback-wrapper {
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  position: relative;
  width: 640px;
}

.expression-control-buttons {
  color: #FFFFFF;
  font-family: 'jaxregular', serif;
  font-size: 20px;
  line-height: 1.5em;
  text-align: center;
}

.action-options {
  margin-top: 25px;
  padding-bottom: 20px;
  text-align: center;
}

/* based on body#jl-preview .mobile #preview_message in jl_base.css */

#expression-jl-caption {
  font-family: 'jaxregular', serif;
  font-size: 36px;
  line-height: 1.5em;
  text-align: center;
  visibility: hidden;
}

#expression-user-message {
  font-family: 'jaxregular',serif;
  font-size: 20px;
  line-height: 26px;
  margin: 20px;
  opacity: 0;
  text-align: center;
  visibility: hidden;
}

#expression-skip-to-end-btn,
#expression-play-again-btn {
  opacity: 0;
}

#jl-preview #jl-wrapper.mobile {
  display: block;
}


/* =Set the size on the height of the product for different orientations/devices
-----------------------------------------------------------------------------------------------------------*/
/* preview page - desktop */
#jl-preview #jl-preview-cb {
    padding: 0;
}

/* premiere page - desktop */
body#premiere .product-html-div {
    height: 600px;
}

/* ipad styling */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    #jl-preview #jl-preview-cb {
        padding-top: 15px;
    }

    .bc-nobuttons,
    body#jl-preview #jl-wrapper.mobile.bc-card-content {
      min-height: auto;
      height: auto;
      padding-bottom: 0;
    }

}

/* ipad styling - landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    .product-html-div {
        height: auto;
        margin: 0;
        padding: 0;
    }

    body#premiere .product-html-div {
        height: 500px;
    }
}

/* =Mobile
-----------------------------------------------------------------------------------------------------------*/
@media only screen and (max-device-width: 767px) {
    /* removes the left and right margins on the mobile pages */
    #jl-newcard #jl-wrapper,
    #premiere #jl-wrapper {
        margin: 0;
    }

    .action-options {
        margin-top: 0;
        padding-bottom: 0;
    }

    body#premiere .product-html-div,
    .product-html-div {
        height: auto;
        margin: 0 auto;
        width: 90%;
    }

    body#jl-preview #jl-wrapper.mobile.bc-card-content {
      min-height: auto;
      padding-bottom: 0;
    }
}

/* =On landscape mobile the product needs to be the same height as the device width
-----------------------------------------------------------------------------------------------------------*/
@media only screen
and (max-device-width: 767px)
and (orientation : landscape) {
    body#premiere .product-html-div,
    .product-html-div {
        height: 100% !important;
        margin: auto;
        width: auto;
    }
}
