.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;
}
/* accessibility update - maintain until all cards are converted */
/*overwrite the incorrect font color in magicbox.css */
#expression-control-buttons [id="expression-skip-to-end-btn"] {
color: #ffffff;
}
#expression-control-buttons {
display: block;
text-align: center;
width: 100%;
position: relative;
padding: 5px 0;
}
.action-options {
margin-top: 25px;
padding-bottom: 20px;
text-align: center;
}
.action-options a,
#expression-control-buttons button {
border: 0;
cursor: pointer;
padding: 5px 0;
margin: 0 auto;
max-width: 500px;
width: 100%;
height: 100%;
font-size: 1.5em;
}
.action-options a,
#expression-control-buttons button:focus {
outline: revert !important;
}
/* 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;
}
#expression-user-message {
font-family: 'jaxregular',serif;
font-size: 20px;
line-height: 26px;
margin: 20px;
text-align: center;
overflow-y: auto;
}
#expression-skip-to-end-btn,
#expression-play-again-btn {
opacity: 0;
}
#jl-preview #jl-wrapper.mobile {
display: block;
}
#agi-video .vjs-big-play-button {
visibility: hidden;
}
/* =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;
max-width: 90%;
}
body#jl-preview #jl-wrapper.mobile.bc-card-content {
min-height: auto;
padding-bottom: 0;
}
.action-options a, #expression-control-buttons #expression-skip-to-end-btn {
font-family: "Jax", "jaxfont2", serif;
font-size: 1.5em;
width: 100%;
}
}
/* =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;
}
}