893 lines
23 KiB
CSS
893 lines
23 KiB
CSS
/*! Copyright 2019, Akamai Technologies, Inc. All Rights Reserved. akamai-viewer-0.7.2 */.enlarge_pane {
|
|
position: relative;
|
|
}
|
|
.enlarge_btn {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
background-color: rgba(255,255,255,.8);
|
|
color: #000;
|
|
text-decoration: none;
|
|
padding: .5em;
|
|
}
|
|
.enlarge_btn:hover,
|
|
.enlarge_btn:focus {
|
|
|
|
}
|
|
.enlarge_btn:active {
|
|
|
|
}
|
|
.enlarge_disabled .enlarge_btn {
|
|
display: none;
|
|
}
|
|
.zoom-out {
|
|
|
|
}
|
|
.enlarge-locked .enlarge_btn {
|
|
background-color: #333;
|
|
color: #fff;
|
|
border-color: #333;
|
|
background-image: url(/img/zoom-out-light.svg);
|
|
}
|
|
.enlarge-zoomed {
|
|
overflow: hidden;
|
|
}
|
|
.enlarge_contain {
|
|
overflow: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
display: block;
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
.enlarge_contain img {
|
|
width: 100%;
|
|
-webkit-touch-callout: none; /* image share menus get in the way of the interaction */
|
|
}
|
|
.enlarge-zoomed .enlarge_contain img,
|
|
.enlarge-zoomed.enlarge_flyout .enlarge_contain img {
|
|
max-width: none;
|
|
}
|
|
.enlarge-locked .enlarge_contain {
|
|
overflow: scroll;
|
|
}
|
|
.enlarge_loader {
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 5px;
|
|
position: absolute;
|
|
z-index: 30;
|
|
background: #eee;
|
|
opacity: 0;
|
|
display: none;
|
|
}
|
|
.enlarge-delay .enlarge_loader {
|
|
/* opacity: .4; disable loader for now */
|
|
}
|
|
.enlarge_loader * {
|
|
width: 0;
|
|
display: block;
|
|
height: 5px;
|
|
background: #4fa4c0;
|
|
-webkit-transition: width .6s linear;
|
|
transition: width .6s linear;
|
|
}
|
|
|
|
.enlarge_img-loading {
|
|
position: absolute;
|
|
left: -9999px;
|
|
opacity: 0;
|
|
}
|
|
.enlarge_flyout {
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
transform: scale(0);
|
|
transition: transform .3s;
|
|
position: absolute;
|
|
z-index: 9999;
|
|
}
|
|
.enlarge_flyout-flyoutloupe {
|
|
border-radius: 100%;
|
|
border: 5px solid #fff;
|
|
box-shadow: 0 0 5px #333;
|
|
pointer-events: none;
|
|
}
|
|
.enlarge_flyout-flyouttopleft,
|
|
.enlarge_flyout-flyouttopright {
|
|
top: 0;
|
|
}
|
|
.enlarge_flyout-flyoutbottomleft,
|
|
.enlarge_flyout-flyoutbottomright {
|
|
bottom: 0;
|
|
}
|
|
.enlarge_flyout-flyouttopright,
|
|
.enlarge_flyout-flyoutbottomright {
|
|
transform-origin: left;
|
|
}
|
|
.enlarge_flyout-flyouttopleft,
|
|
.enlarge_flyout-flyoutbottomleft {
|
|
transform-origin: right;
|
|
}
|
|
.enlarge-zoomed.enlarge_flyout {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
overflow: hidden;
|
|
}
|
|
.enlarge-zoomed.enlarge_flyout .enlarge_contain {
|
|
overflow: visible;
|
|
}
|
|
.enlarge-locked.enlarge_flyout {
|
|
overflow: auto;
|
|
}
|
|
|
|
.snapper:before,
|
|
.snapper_nextprev_contain:before, .snapper_items:before, .snapper_nav:before, .snapper:after,
|
|
.snapper_nextprev_contain:after, .snapper_items:after, .snapper_nav:after {
|
|
content: " ";
|
|
display: table; }
|
|
|
|
.snapper:after,
|
|
.snapper_nextprev_contain:after, .snapper_items:after, .snapper_nav:after {
|
|
clear: both; }
|
|
|
|
.snapper,
|
|
.snapper_nextprev_contain, .snapper_items, .snapper_nav {
|
|
*zoom: 1; }
|
|
|
|
.snapper * {
|
|
box-sizing: border-box; }
|
|
|
|
.snapper,
|
|
.snapper_nextprev_contain {
|
|
position: relative; }
|
|
|
|
.snapper:focus {
|
|
/* snapper div receives a tabindex to allow focus for keyboard arrow control */
|
|
outline: none; }
|
|
|
|
/* to hide the scrollbar handles while still allowing touch and gesture scrolling, wrap the snapper pane in a div with a snapper_pane_crop class
|
|
note: only use this if you have thumbnails or some other means of advancing slides for non-touchscreen devices */
|
|
.snapper-enhanced .snapper_pane_crop,
|
|
.enhanced .snapper_pane_crop {
|
|
overflow: hidden; }
|
|
|
|
.snapper-enhanced .snapper_pane_crop .snapper_pane,
|
|
.enhanced .snapper_pane_crop .snapper_pane {
|
|
/* IE and edge */
|
|
-ms-overflow-style: none;
|
|
/* Firefox */
|
|
scrollbar-width: none; }
|
|
|
|
.snapper-enhanced .snapper_pane_crop .snapper_pane::-webkit-scrollbar,
|
|
.enhanced .snapper_pane_crop .snapper_pane::-webkit-scrollbar {
|
|
display: none; }
|
|
|
|
.snapper_pane {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
/* snap to points */
|
|
scroll-snap-type: mandatory;
|
|
scroll-snap-type: x mandatory;
|
|
/* x interval for snapping (100% of container width) */
|
|
scroll-snap-points-x: repeat(100%);
|
|
position: relative;
|
|
z-index: 0; }
|
|
|
|
.snapper_item {
|
|
width: 100%;
|
|
position: relative;
|
|
white-space: normal;
|
|
scroll-snap-align: start;
|
|
box-sizing: border-box;
|
|
padding-right: 1px;
|
|
padding-left: 1px; }
|
|
|
|
.enhanced .snapper_item,
|
|
.snapper-enhanced .snapper_item {
|
|
display: none; }
|
|
|
|
.enhanced .snapper_item:first-child,
|
|
.snapper-enhanced .snapper_item:first-child,
|
|
.snapper-enhanced .snapper_item[style] {
|
|
display: block; }
|
|
|
|
.snapper-enhanced .snapper_item:first-child,
|
|
.snapper-enhanced .snapper_item[style] {
|
|
float: left !important;
|
|
/* important to ensure default float nones don't leak through */
|
|
clear: none !important;
|
|
/* important to ensure default clears don't leak through */ }
|
|
|
|
/* next prev arrow selectors */
|
|
.snapper_item img {
|
|
width: 100%; }
|
|
|
|
.snapper_nav {
|
|
position: relative;
|
|
margin: 1em 0;
|
|
overflow: hidden; }
|
|
|
|
.snapper_nav_inner {
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
white-space: nowrap;
|
|
padding: 2px 1px 30px;
|
|
margin-bottom: -30px;
|
|
/* leave room for thumb outline to show up.. don't fully offset */
|
|
height: 84px; }
|
|
|
|
.snapper_nav a {
|
|
overflow: hidden;
|
|
border: 1px solid #ddd;
|
|
white-space: normal;
|
|
display: inline-block;
|
|
float: none;
|
|
vertical-align: middle;
|
|
height: 50px;
|
|
width: auto;
|
|
margin: 0 5px 0 0; }
|
|
|
|
.snapper_nav a.snapper_nav_item-selected {
|
|
/* selected styles here */
|
|
outline: 1px solid black; }
|
|
|
|
.snapper_nav img {
|
|
display: block;
|
|
height: 100%;
|
|
width: auto;
|
|
max-width: 100%; }
|
|
|
|
.tau {
|
|
cursor: -webkit-grab;
|
|
cursor: -moz-grab;
|
|
cursor: grab;
|
|
}
|
|
|
|
/* loading should be hidden to start */
|
|
.tau .loading {
|
|
display: none;
|
|
}
|
|
|
|
/* assist in preventing a drag */
|
|
.tau img {
|
|
/* hide all images, see below for exceptions */
|
|
display: none;
|
|
pointer-events: none;
|
|
|
|
-moz-user-select: -moz-none;
|
|
-khtml-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* display the first image until enhancement when .focused should take over */
|
|
.tau > img:nth-child(1) {
|
|
display: block;
|
|
}
|
|
|
|
/* make sure that an enhanced component hides the first image unless overriden
|
|
by .focused */
|
|
.tau.tau-enhanced > img:nth-child(1) {
|
|
display: none;
|
|
}
|
|
|
|
/* display focused image */
|
|
.tau.tau-enhanced > img.focused {
|
|
display: block
|
|
}
|
|
|
|
.tau.tau-enhanced.tau-canvas > img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
display: block;
|
|
}
|
|
|
|
.tau .render img {
|
|
width: 1px;
|
|
height: 1px;
|
|
opacity: 0.00000001;
|
|
}
|
|
|
|
/* grabbing cursor for all elements on mousedown */
|
|
html.grabbing * {
|
|
cursor: move;
|
|
cursor: -webkit-grabbing;
|
|
cursor: -moz-grabbing;
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.snapper_nav a.snapper_nav_item-selected {
|
|
outline: 1px solid #000;
|
|
border: 1px solid #000;
|
|
}
|
|
.snapper_nav a.snapper_nav_item-selected:focus {
|
|
outline: 1px dotted #bbb;
|
|
}
|
|
|
|
[data-akamai-carousel-thumbnail-type="none"] .snapper_nav {
|
|
display: none;
|
|
}
|
|
[data-akamai-carousel-thumbnail-placement="left"] .snapper_nav_inner,
|
|
[data-akamai-carousel-thumbnail-placement="right"] .snapper_nav_inner {
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
padding: 1px 30px 1px 1px;
|
|
white-space: normal;
|
|
margin-bottom: 0;
|
|
margin-right: -26px; /* leave room for thumb outline to show up.. don't fully offset */
|
|
height: 100%;
|
|
}
|
|
[data-akamai-carousel-thumbnail-placement="left"] .snapper_nav a,
|
|
[data-akamai-carousel-thumbnail-placement="right"] .snapper_nav a {
|
|
height: auto;
|
|
display: block;
|
|
margin: 0 10px 10px 0;
|
|
}
|
|
.snapper_nav .snapper_nav_inner img {
|
|
width: auto;
|
|
display: inline-block;
|
|
}
|
|
[data-akamai-carousel-thumbnail-placement="left"] .snapper_nav img,
|
|
[data-akamai-carousel-thumbnail-placement="right"] .snapper_nav img {
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
/* thumbnails left and right */
|
|
[data-akamai-carousel-thumbnail-placement="left"] .snapper_nextprev_contain,
|
|
[data-akamai-carousel-thumbnail-placement="right"] .snapper_nextprev_contain {
|
|
width: 88%;
|
|
float: right;
|
|
}
|
|
[data-akamai-carousel-thumbnail-placement="left"] .snapper_nav.snapper_nav,
|
|
[data-akamai-carousel-thumbnail-placement="right"] .snapper_nav.snapper_nav {
|
|
position: absolute;
|
|
width: 10%;
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
[data-akamai-carousel-thumbnail-placement="left"] .snapper_nav a,
|
|
[data-akamai-carousel-thumbnail-placement="right"] .snapper_nav a {
|
|
width: 100%;
|
|
}
|
|
|
|
/* thumbnails right */
|
|
[data-akamai-carousel-thumbnail-placement="right"] .snapper_nextprev_contain {
|
|
float: left;
|
|
}
|
|
[data-akamai-carousel-thumbnail-placement="right"] .snapper_nav.snapper_nav {
|
|
right: 0;
|
|
}
|
|
|
|
/* next prev arrow selectors */
|
|
/* if there's only one item, arrows should be hidden */
|
|
[data-akamai-carousel-item-count="1"][data-akamai-carousel-arrows="true"] .snapper_nextprev {
|
|
display: none;
|
|
}
|
|
.snapper_nextprev,
|
|
.snapper_nextprev_item {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.snapper_nextprev_next,
|
|
.snapper_nextprev_prev {
|
|
position: absolute;
|
|
top: 45%;
|
|
width: 34px;
|
|
height: 34px;
|
|
margin-top: -17px;
|
|
background-color: #fff;
|
|
border-radius: 100%;
|
|
overflow: hidden;
|
|
text-indent: -9999px;
|
|
cursor: pointer;
|
|
background-position: 52% 50%;
|
|
background-size: 16px auto;
|
|
transition: transform .1s linear;
|
|
}
|
|
.snapper_nextprev_next {
|
|
background-position: 54% 50%;
|
|
right: 8px;
|
|
background-image: url(../img/arrow-forward.svg);
|
|
background-position: 56% 50%;
|
|
background-repeat: no-repeat;
|
|
background-color: rgba(255,255,255,.3);
|
|
}
|
|
.snapper_nextprev_prev {
|
|
left: 8px;
|
|
background-image: url(../img/arrow-back.svg);
|
|
background-position: 44% 50%;
|
|
background-repeat: no-repeat;
|
|
background-color: rgba(255,255,255,.3);
|
|
}
|
|
.snapper_nextprev_next:hover,
|
|
.snapper_nextprev_prev:hover,
|
|
.snapper_nextprev_next:focus,
|
|
.snapper_nextprev_prev:focus {
|
|
transform: scale(1.1);
|
|
background-color: rgba(255,255,255,.5);
|
|
}
|
|
.snapper_nextprev_prev:active {
|
|
transform: scale(1);
|
|
}
|
|
@media (min-width: 40em) {
|
|
.snapper_nextprev_next,
|
|
.snapper_nextprev_prev {
|
|
width: 34px;
|
|
height: 34px;
|
|
margin-top: -17px;
|
|
background-size: 16px auto;
|
|
}
|
|
}
|
|
|
|
[data-akamai-carousel-thumbnail-type="dots"] .snapper_nav {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
[data-akamai-carousel-thumbnail-type="dots"] .snapper_nav a {
|
|
display: inline-block;
|
|
float: none;
|
|
width: 10px;
|
|
height: 10px;
|
|
margin: 0 6px;
|
|
background: #ddd;
|
|
border-radius: 100%;
|
|
border: 0;
|
|
overflow: hidden;
|
|
text-indent: -9999px;
|
|
cursor: pointer;
|
|
}
|
|
[data-akamai-carousel-thumbnail-type="dots"] .snapper_nav a img {
|
|
position: absolute;
|
|
left: -999px;
|
|
}
|
|
[data-akamai-carousel-thumbnail-type="dots"] .snapper_nav a {
|
|
float: none;
|
|
}
|
|
[data-akamai-carousel-thumbnail-type="dots"][data-akamai-carousel-thumbnail-placement="left"] .snapper_nav a,
|
|
[data-akamai-carousel-thumbnail-type="dots"][data-akamai-carousel-thumbnail-placement="right"] .snapper_nav a {
|
|
display: block;
|
|
margin: 0 auto 6px;
|
|
}
|
|
[data-akamai-carousel-thumbnail-type="dots"] .snapper_nav a.snapper_nav_item-selected,
|
|
[data-akamai-carousel-thumbnail-type="dots"] .snapper_nav a.snapper_nav_item-selected:focus,
|
|
[data-akamai-carousel-thumbnail-type="dots"] .snapper_nav a.snapper_nav_item-selected:active {
|
|
background: #000;
|
|
box-shadow: none;
|
|
border-color: transparent;
|
|
outline: none;
|
|
}
|
|
[data-akamai-carousel-thumb-type="video"],
|
|
[data-akamai-carousel-thumb-type="spin360"],
|
|
[data-akamai-carousel-thumb-type="image"] {
|
|
position: relative;
|
|
}
|
|
[data-akamai-carousel-thumb-type="spin360"]:after,
|
|
[data-akamai-carousel-thumb-type="video"]:after {
|
|
content: "\20";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba(0,0,0,.4) url(../img/video-light.svg) 50% 50% no-repeat;
|
|
background-size: 30px;
|
|
z-index: 2;
|
|
}
|
|
[data-akamai-carousel-thumbnail-type="dots"] [data-akamai-carousel-thumb-type="spin360"]:after,
|
|
[data-akamai-carousel-thumbnail-type="dots"] [data-akamai-carousel-thumb-type="video"]:after {
|
|
display: none;
|
|
}
|
|
[data-akamai-carousel-thumb-type="spin360"]:after {
|
|
background-image: url(../img/360-light.svg);
|
|
background-size: auto 45px;
|
|
}
|
|
[data-akamai-carousel-thumb-type="video"][data-akamai-carousel-thumb-noposter] img {
|
|
visibility: hidden;
|
|
}
|
|
|
|
[data-akamai-carousel] .snapper_pane.no-scroll {
|
|
overflow-x: hidden;
|
|
}
|
|
.akamai-fullscreen-active {
|
|
max-width: 100% !important;
|
|
}
|
|
.akamai-fullscreen-active [data-akamai-fullscreen-width] {
|
|
background-color: #fff;
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
::backdrop {
|
|
background-color: #fff;
|
|
}
|
|
/* Opera */
|
|
:fullscreen-ancestor {
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* Fullscreen plugin Buttons */
|
|
.akamai-fullscreen-btncontainer {
|
|
position: relative;
|
|
}
|
|
.akamai-fullscreen-btn {
|
|
position: absolute;
|
|
top: .5em;
|
|
right: .5em;
|
|
text-indent: -9999px;
|
|
width: 34px;
|
|
height: 34px;
|
|
background-size: 16px auto;
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
.akamai-fullscreen-btn-enter {
|
|
background-color: rgba(255,255,255,.3);
|
|
}
|
|
.akamai-fullscreen-btn-exit {
|
|
display: none;
|
|
}
|
|
.akamai-fullscreen-active .akamai-fullscreen-btn-enter {
|
|
display: none;
|
|
}
|
|
.akamai-fullscreen-active .akamai-fullscreen-btn-exit {
|
|
display: block;
|
|
background-color: rgba(0,0,0,.4);
|
|
}
|
|
|
|
/* Fullscreen plugin fallback behavior */
|
|
.akamai-fullscreen-fallback {
|
|
position: fixed !important;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 100%;
|
|
margin: 0 !important;
|
|
z-index: 100000;
|
|
}
|
|
.akamai-fullscreen-fallback [data-akamai-fullscreen-btn] {
|
|
display: none;
|
|
}
|
|
.akamai-fullscreen-fallback [data-akamai-fullscreen-exit-btn] {
|
|
display: block;
|
|
}
|
|
|
|
.icon-360 { background: url(../img/360.svg) 50% no-repeat; }
|
|
.icon-arrow-back { background: url(../img/arrow-back.svg) 50% no-repeat; }
|
|
.icon-arrow-forward { background: url(../img/arrow-forward.svg) 50% no-repeat; }
|
|
.icon-close { background: url(../img/close.svg) 50% no-repeat; }
|
|
.icon-muted { background: url(../img/muted.svg) 50% no-repeat; }
|
|
.icon-pause { background: url(../img/pause.svg) 50% no-repeat; }
|
|
.icon-play { background: url(../img/play.svg) 50% no-repeat; }
|
|
.icon-video { background: url(../img/video.svg) 50% no-repeat; }
|
|
.icon-volume { background: url(../img/volume.svg) 50% no-repeat; }
|
|
.icon-zoom-in { background: url(../img/zoom-in.svg) 50% no-repeat; }
|
|
.icon-zoom-out { background: url(../img/zoom-out.svg) 50% no-repeat; }
|
|
.icon-fullscreen { background: url(../img/fullscreen.svg) 50% no-repeat; }
|
|
|
|
|
|
.icon-360-light { background: url(../img/360-light.svg) 50% no-repeat; }
|
|
.icon-arrow-back-light { background: url(../img/arrow-back-light.svg) 50% no-repeat; }
|
|
.icon-arrow-forward-light { background: url(../img/arrow-forward-light.svg) 50% no-repeat; }
|
|
.icon-close-light { background: url(../img/close-light.svg) 50% no-repeat; }
|
|
.icon-muted-light { background: url(../img/muted-light.svg) 50% no-repeat; }
|
|
.icon-pause-light { background: url(../img/pause-light.svg) 50% no-repeat; }
|
|
.icon-play-light { background: url(../img/play-light.svg) 50% no-repeat; }
|
|
.icon-video-light { background: url(../img/video-light.svg) 50% no-repeat; }
|
|
.icon-volume-light { background: url(../img/volume-light.svg) 50% no-repeat; }
|
|
.icon-zoom-in-light { background: url(../img/zoom-in-light.svg) 50% no-repeat; }
|
|
.icon-zoom-out-light { background: url(../img/zoom-out-light.svg) 50% no-repeat; }
|
|
.icon-fullscreen-light { background: url(../img/fullscreen-light.svg) 50% no-repeat; }
|
|
.enlarge_btn {
|
|
width: 34px;
|
|
text-indent: -9999px;
|
|
overflow: hidden;
|
|
background-color: rgba(255,255,255,.3);
|
|
border-radius: 100%;
|
|
padding: 0;
|
|
height: 34px;
|
|
background-position: 50%;
|
|
background-repeat: no-repeat;
|
|
background-image: url(../img/zoom-in.svg);
|
|
}
|
|
.enlarge_btn:hover,
|
|
.enlarge_btn:focus {
|
|
transform: scale(1.1);
|
|
background-color: rgba(255,255,255,.5);
|
|
}
|
|
.enlarge_btn:active {
|
|
transform: scale(1);
|
|
}
|
|
.zoom-out {
|
|
background-image: url(../img/zoom-out-light.svg);
|
|
}
|
|
.enlarge-locked .enlarge_btn {
|
|
background-color: #333;
|
|
color: #fff;
|
|
border-color: #333;
|
|
background-image: url(../img/zoom-out-light.svg);
|
|
}
|
|
[data-akamai-magnifier-button="false"] .enlarge_btn,
|
|
[data-akamai-magnifier-placement*="flyout"] .enlarge_btn {
|
|
display: none;
|
|
opacity: 0;
|
|
}
|
|
[data-akamai-carousel-item] .enlarge_btn {
|
|
visibility: hidden;
|
|
}
|
|
[data-akamai-carousel-item-active] .enlarge_btn {
|
|
visibility: visible;
|
|
}
|
|
[data-akamai-magnifier-button="false"] .enlarge_btn:focus,
|
|
[data-akamai-magnifier-placement*="flyout"] .enlarge_btn:focus {
|
|
opacity: 1;
|
|
}
|
|
.enlarge-locked .enlarge_btn {
|
|
opacity: 1;
|
|
}
|
|
[data-akamai-magnifier-hover-zoom-without-click="false"] {
|
|
cursor: zoom-in;
|
|
}
|
|
[data-akamai-magnifier-placement="inline"] .enlarge_flyout {
|
|
display: none;
|
|
}
|
|
[data-akamai-magnifier-disabled="true"] .enlarge_btn {
|
|
display: none;
|
|
}
|
|
[data-akamai-magnifier-mode="animatedzoom"] {
|
|
display: inline-block;
|
|
cursor: default;
|
|
overflow: hidden;
|
|
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
-o-user-select: none;
|
|
user-select: none;
|
|
}
|
|
[data-akamai-magnifier-mode="animatedzoom"] > div {
|
|
background: white;
|
|
height: 100%;
|
|
|
|
-webkit-transform-origin: left top;
|
|
-webkit-transform: translateZ(0);
|
|
-moz-transform-origin: left top;
|
|
-moz-transform: translateZ(0);
|
|
-ms-transform-origin: left top;
|
|
-ms-transform: translateZ(0);
|
|
-o-transform-origin: left top;
|
|
-o-transform: translateZ(0);
|
|
transform-origin: left top;
|
|
transform: translateZ(0);
|
|
}
|
|
[data-akamai-magnifier-mode="animatedzoom"] > div > div {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
[data-akamai-magnifier-mode="animatedzoom"] .scroller-zoom-in {
|
|
top: 8px;
|
|
background-image: url(../img/zoom-in.svg);
|
|
}
|
|
[data-akamai-magnifier-mode="animatedzoom"] .scroller-zoom-out {
|
|
top: 50px;
|
|
background-image: url(../img/zoom-out.svg);
|
|
}
|
|
[data-akamai-magnifier-mode="animatedzoom"] a {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
font-size: 12px;
|
|
color: #000;
|
|
text-decoration: none;
|
|
width: 34px;
|
|
height: 34px;
|
|
text-indent: -9999px;
|
|
overflow: hidden;
|
|
background-color: rgba(255,255,255,.3);
|
|
border-radius: 100%;
|
|
padding: 0;
|
|
background-position: 50%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
[data-akamai-magnifier-mode="animatedzoom"] a:hover,
|
|
[data-akamai-magnifier-mode="animatedzoom"] a:focus {
|
|
transform: scale(1.1);
|
|
background-color: rgba(255,255,255,.5);
|
|
}
|
|
[data-akamai-magnifier-mode="animatedzoom"] a:active {
|
|
transform: scale(1);
|
|
}
|
|
[data-akamai-magnifier-button="false"] .scroller-zoom-in,
|
|
[data-akamai-magnifier-button="false"] .scroller-zoom-out {
|
|
display: none;
|
|
}
|
|
.scroller-zoom-in-max .scroller-zoom-in,
|
|
.scroller-zoom-in-max .scroller-zoom-in:hover,
|
|
.scroller-zoom-in-max .scroller-zoom-in:focus,
|
|
.scroller-zoom-in-max .scroller-zoom-in:active {
|
|
background-color: #333;
|
|
color: #fff;
|
|
border-color: #333;
|
|
}
|
|
.scroller-zoom-out-max .scroller-zoom-out,
|
|
.scroller-zoom-out-max .scroller-zoom-out:hover,
|
|
.scroller-zoom-out-max .scroller-zoom-out:focus,
|
|
.scroller-zoom-out-max .scroller-zoom-out:active {
|
|
background-color: #333;
|
|
color: #fff;
|
|
border-color: #333;
|
|
}
|
|
|
|
[data-akamai-spin360-cue="visible"]:before {
|
|
content: attr(title);
|
|
text-indent: -9999px;
|
|
overflow: hidden;
|
|
color: #fff;
|
|
position: absolute;
|
|
z-index: 9999;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,.5) url(../img/360-light.svg) 50% 50% no-repeat;
|
|
background-size: 10% auto;
|
|
}
|
|
.tau-controls {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
[data-tau-controls] {
|
|
display: inline-block;
|
|
background-color: #fff;
|
|
background-image: none;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 0 5px;
|
|
background-position: 50%;
|
|
border-radius: 0;
|
|
background-repeat: no-repeat;
|
|
background-size: auto;
|
|
opacity: .4;
|
|
overflow: hidden;
|
|
text-indent: -999px;
|
|
}
|
|
[data-tau-controls]:focus,
|
|
[data-tau-controls]:hover {
|
|
opacity: .8;
|
|
}
|
|
[data-tau-controls="left"] {
|
|
background-image: url(../img/arrow-back.svg);
|
|
}
|
|
[data-tau-controls="right"] {
|
|
background-image: url(../img/arrow-forward.svg);
|
|
}
|
|
.tau.spinning [data-tau-controls="play"] {
|
|
background-image: url(../img/pause.svg);
|
|
}
|
|
[data-tau-controls="play"],
|
|
.tau.spinning.control-left-down [data-tau-controls="play"],
|
|
.tau.spinning.control-right-down [data-tau-controls="play"] {
|
|
background-image: url(../img/play.svg);
|
|
}
|
|
|
|
[data-akamai-viewer] .tau > img {
|
|
/* hide all images, see below for exceptions */
|
|
display: none;
|
|
}
|
|
[data-akamai-video] {
|
|
position: relative;
|
|
}
|
|
[data-akamai-video] > video {
|
|
width: 100%;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
[data-akamai-video] svg {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px calc(50% - 50px);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
opacity: 0.8;
|
|
cursor: pointer;
|
|
background-color: rgba(0,0,0,0.2);
|
|
transition: opacity 150ms;
|
|
}
|
|
|
|
[data-akamai-video] svg:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
[data-akamai-video] svg.is-hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* necessary for several child component positioning contexts */
|
|
[data-akamai-viewer] {
|
|
position: relative;
|
|
}
|
|
[data-akamai-viewer] * {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
[data-akamai-viewer] img,
|
|
[data-akamai-viewer] video,
|
|
[data-akamai-viewer] canvas {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
/* aspect ratio selector looks for number-based attr value */
|
|
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) [data-akamai-carousel-item] {
|
|
position: relative;
|
|
height: 0;
|
|
/* padding-top: x% goes on the wrapper as an inline style */
|
|
}
|
|
|
|
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) [data-akamai-magnifier],
|
|
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) [data-akamai-spin360],
|
|
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) [data-akamai-video] {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
left: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
/* if there's an aspect ratio, all img, canvas, and video height should be 100% of the container - which should have an aspect ratio top padding set by the JS */
|
|
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) [data-akamai-carousel-item] img,
|
|
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) [data-akamai-carousel-item] video,
|
|
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) [data-akamai-carousel-item] canvas {
|
|
max-height: 100%;
|
|
display: block;
|
|
margin: 0 auto;
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 100%;
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
/* once loaded, media will get an attribute for landscape or portrait, depending on the longer dimension. this is used to set one direction to 100% */
|
|
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) img[data-akamai-carousel-aspectratio-orientation="landscape"],
|
|
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) video[data-akamai-carousel-aspectratio-orientation="landscape"],
|
|
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) canvas[data-akamai-carousel-aspectratio-orientation="landscape"] {
|
|
width: 100%;
|
|
}
|
|
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) img[data-akamai-carousel-aspectratio-orientation="portrait"],
|
|
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) video[data-akamai-carousel-aspectratio-orientation="portrait"],
|
|
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) canvas[data-akamai-carousel-aspectratio-orientation="portrait"] {
|
|
height: 100%;
|
|
}
|
|
/* when zoomed, we need to reset a lot of those values temporily */
|
|
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) .enlarge-zoomed img {
|
|
max-height: none;
|
|
max-width: none;
|
|
transform: none;
|
|
top: auto;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) .tau.tau-enhanced.tau-canvas > img {
|
|
display: none !important;
|
|
}
|