.cpSlider { list-style: none !important; margin: 0 !important; padding: 0 !important; } .cpSlider > li { margin: 0; } .cpSlider > li > a { display: block; text-decoration: none; } .cpSlider > li > img, .cpSlider > li > a > img { max-width: 100%; } .js .cpSlideshow, .js .cpWindow, .js .cpSlider, .cpSlider > li { position: relative; } .cpSlider .overlay { background: rgba(0,0,0,.25); color: #fff; text-align: left; } .cpSlider .overlay::-webkit-scrollbar { width: .5rem; } .cpSlider .overlay::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.33); } .cpSlider .overlay::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.5); } .cpSlider .overlay::-webkit-scrollbar-thumb:active { background-color: rgba(255,255,255,.4); } .cpSlider .overlay::-webkit-scrollbar-track { background-color: rgba(255,255,255,.1); } .wide .cpSlider .overlay { overflow: auto; position: absolute; } .cpSlider .overlayInner { padding: 1em; } .cpSlider .overlay h4 { font-weight: bold; margin: 0; } .cpSlider .overlay p { margin: 0; } /* Caption positioning and display properties */ .cpSlider .overlay.bottom { bottom: 0; left: 0; max-height: 40%; right: 0; top: auto; } .cpSlider .overlay.left { bottom: 0; left: 0; max-width: 33.33%; top: 0; right: auto; } .cpSlider .overlay.top { left: 0; max-height: 40%; right: 0; top: 0; bottom: auto; } .cpSlider .overlay.right { bottom: 0; max-width: 33.33%; right: 0; top: 0; left: auto; } .cpSlider .overlay.left, .cpSlider .overlay.right { min-width: 12em; } .cpSlider .overlay.center { background: none; align-items: center; bottom: 0; display: flex; justify-content: center; left: 0; overflow: visible; right: 0; top: 0; } .cpSlider .overlay.center .overlayInner { background: url(../Images/SlideshowOverlay.png) repeat 0 0; max-height: 100%; overflow: auto; } /* Fix for IE regarding captions not showing up */ .cpSlider .showing .overlayInner, .showing .overlayInner .widgetItem, .showing .overlayInner .widgetTitle { zoom: 1; } .cpSlider li:not(.showing) .center .overlayInner { overflow: hidden; } .cpSlider .showing .center .overlayInner { overflow: auto; } /* End of IE fix */ .cpSlider .overlay.noBackground, .cpSlider .overlay.noBackground .overlayInner { background: none; padding: 0; } .cpSlider .overlay.inset.bottom { bottom: 1.25em; left: 1.25em; right: 1.25em; } .cpSlider .overlay.inset.left { bottom: 1.25em; left: 1.25em; top: 1.25em; } .cpSlider .overlay.inset.right { bottom: 1.25em; right: 1.25em; top: 1.25em; } .cpSlider .overlay.inset.center { bottom: 1.25em; left: 1.25em; right: 1.25em; top: 1.25em; } .cpSlider .overlay.inset.top { left: 1.25em; right: 1.25em; top: 1.25em; } .cpSlider .itemCaption .widgetDesc.widgetItem { background: none; } .js .cpSlideshow .cpWindow { overflow: hidden; width: 100%; } .js .cpSlider li { float: left; position: relative; } .js .cpSlider li img { display: inline-block; } .js .cpSlider li img.cover { width: 100%; object-fit: cover; } .js .cpSlider .showing { z-index: 2; } .js .cpSlideshow .arrow { text-indent: 100%; white-space: nowrap; text-indent: -100%; width: 60px; height: 60px; display: block; opacity: 0; margin-top: -30px; overflow: hidden; position: absolute; top: 50%; z-index: 5; } .js .cpSlideshow .arrow:before, .js .cpSlideshow .arrow:after { content: ""; position: absolute; top: 50%; } .js .cpSlideshow .arrow:before { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; width: 30px; height: 30px; background-color: #000; margin-top: -15px; } .js .cpSlideshow .arrow:after { width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 8px; margin-top: -8px; } .js.generatedcontent .cpSlideshow:hover .arrow, .js.generatedcontent .cpSlideshow:focus .arrow, .js.generatedcontent .cpSlideshow .bannerSlideshowControls .arrow { opacity: .25; } .js.generatedcontent .cpSlideshow .arrow:hover, .js.generatedcontent .cpSlideshow .arrow:focus { opacity: .75; } .js .cpSlideshow .arrow:hover:before, .js .cpSlideshow .arrow:focus:before { opacity: .5; } .js .cpSlideshow .arrow.next { right: 0; } .js .cpSlideshow .arrow.next:before { right: 5px; } .js .cpSlideshow .arrow.next:after { border-left-color: #fff; right: 6px; } .js .cpSlideshow .arrow.prev { left: 0; } .js .cpSlideshow .arrow.prev:before { left: 5px; } .js .cpSlideshow .arrow.prev:after { border-right-color: #fff; left: 6px; } .js.no-generatedcontent .cpSlideshow .arrow { background-image: url(../Images/SlideshowArrows.png); background-position: 120px 120px; background-repeat: no-repeat; opacity: 1; } .js.no-generatedcontent .cpSlideshow:hover .arrow.next { background-position: -65px 0; } .js.no-generatedcontent .cpSlideshow:hover .arrow.prev { background-position: 5px 0; } .js.no-generatedcontent .cpSlideshow .arrow.next:hover, .js.no-generatedcontent .cpSlideshow .arrow.next:focus { background-position: -65px -60px; } .js.no-generatedcontent .cpSlideshow .arrow.prev:hover, .js.no-generatedcontent .cpSlideshow .arrow.prev:focus { background-position: 5px -60px; } .js .cpSlideshow .pager { list-style: none !important; margin: .5em 0 0 0 !important; padding: 0 !important; text-align: center; letter-spacing: -0.06em; word-spacing: -0.43em; } .js .cpSlideshow .pager > li { display: inline-block; } .js .cpSlideshow .pager > li > a { display: block; padding: .25em; position: relative; text-decoration: none; width: 1.5em; } .js .cpSlideshow .pager > li > a:hover, .js .cpSlideshow .pager > li > a:focus, .js .cpSlideshow .pager > li > a:active, .js .cpSlideshow .pager > .active > a:link, .js .cpSlideshow .pager > .active > a:hover { font-weight: bold; } .js.generatedcontent .cpSlideshow .pager.dots > li > a { opacity: .25; overflow: hidden; text-indent: 200%; white-space: nowrap; } .js.generatedcontent .cpSlideshow .pager.dots > li > a:before { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 6px; height: 6px; background-color: #000; content: ""; left: 50%; margin-left: -3px; margin-top: -3px; position: absolute; top: 50%; } .js.generatedcontent .cpSlideshow .pager.dots > li > a:hover, .js.generatedcontent .cpSlideshow .pager.dots > li > a:focus, .js.generatedcontent .cpSlideshow .pager.dots > li > a:active, .js.generatedcontent .cpSlideshow .pager.dots > .active > a:link, .js.generatedcontent .cpSlideshow .pager.dots > .active > a:hover { opacity: .5; } .js.generatedcontent.no-opacity .cpSlideshow .pager.dots > li > a:before { background: url(../Images/PaginationDots.png) no-repeat 0 -6px; } .js.generatedcontent.no-opacity .cpSlideshow .pager.dots > li > a:hover:before, .js.generatedcontent.no-opacity .cpSlideshow .pager.dots > li > a:focus:before, .js.generatedcontent.no-opacity .cpSlideshow .pager.dots > li > a:active:before, .js.generatedcontent.no-opacity .cpSlideshow .pager.dots > .active > a:link:before, .js.generatedcontent.no-opacity .cpSlideshow .pager.dots > .active > a:hover:before { background-position: 0 0; } /* Adjustments for when the full side arrow backgrounds are paired with overlays */ .fullSideArrows .overlay.bottom, .fullSideArrows .overlay.top, .fullSideArrows .overlay.center { left: 5em; right: 5em; } .fullSideArrows .overlay.left { left: 5em; } .fullSideArrows .overlay.right { right: 5em; } .fullSideArrows .overlay.inset.bottom, .fullSideArrows .overlay.inset.top, .fullSideArrows .overlay.inset.center { left: 6.25em; right: 6.25em; } .fullSideArrows .overlay.inset.left { left: 6.25em; } .fullSideArrows .overlay.inset.right { right: 6.25em; } /* New Slideshow Arrow Styles */ .js .cpSlideshow .arrowNew { bottom: 0; display: block; height: 100%; opacity: 0; overflow: hidden; padding: 0; position: absolute; text-align: center; top: 0; transition: opacity 333ms; -webkit-transition: opacity 333ms; -o-transition: opacity 333ms; white-space: nowrap; width: 6em; z-index: 5; } .js .cpSlideshow .arrowNew.arrowNewBackground { padding: 0 0.5em; width: 5em; } .js .cpSlideshow .arrowNew.arrowNewBackgroundColor { background: #000; } .js.generatedcontent .cpSlideshow:hover .arrowNew, .js.generatedcontent .cpSlideshow:focus .arrowNew { opacity: .25; } .js.generatedcontent .cpSlideshow .arrowNew:hover, .js.generatedcontent .cpSlideshow .arrowNew:focus { opacity: .75; } .js.generatedcontent .cpSlideshow .arrowNew.alwaysDisplayArrowNew, .js.generatedcontent .cpSlideshow .arrowNew.alwaysDisplayArrowNew { opacity: .1; } .js.generatedcontent .cpSlideshow:hover .arrowNew.alwaysDisplayArrowNew, .js.generatedcontent .cpSlideshow:focus .arrowNew.alwaysDisplayArrowNew { opacity: .25; } .js.generatedcontent .cpSlideshow .arrowNew.alwaysDisplayArrowNew:hover, .js.generatedcontent .cpSlideshow .arrowNew.alwaysDisplayArrowNew:focus { opacity: .75; } .js .cpSlideshow .arrowNew.next { right: 0; } .js .cpSlideshow .arrowNew.prev { left: 0; } .js .cpSlideshow .arrowNew.next > svg, .js .cpSlideshow .arrowNew.prev > svg { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; color: #fff; height: 5em; width: 5em; position: relative; top: 50%; margin-top: -2.5em; } .js .cpSlideshow .arrowNew.next > svg.arrowNextPrevBackground, .js .cpSlideshow .arrowNew.prev > svg.arrowNextPrevBackground { height: 4em; margin-top: -2em; width: 4em; } .js .cpSlideshow .arrowNew.next > svg.arrowNextPrevBackgroundColor, .js .cpSlideshow .arrowNew.prev > svg.arrowNextPrevBackgroundColor { background: #000; padding: 1em; } .js .cpSlideshow .arrowNew.next, .js .cpSlideshow .arrowNew.prev { background: none; border: none; } .js .cpSlideshow .arrowNew.next:focus, .js .cpSlideshow .arrowNew.prev:focus { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-appearance: none; outline: none; } .js .cpSlideshow .arrowNew.next svg, .js .cpSlideshow .arrowNew.prev svg{ top: 0px; } .js .cpSlideshow .arrowNew.next:hover, .js .cpSlideshow .arrowNew.prev:hover { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-appearance: none; outline: none; } .js .cpSlideshow .arrowNew.next:active, .js .cpSlideshow .arrowNew.prev:active { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-appearance: none; outline: none; }