/*! 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; }