/*********************************** /* OVERALL WRAPPER FOR THE SLIDESHOWf /***********************************/ /* .slideshow-wrapper { overflow: hidden; // TODO might need to come back - check with slides of different height -webkit-transition: height .8s cubic-bezier(0.165, 0.840, 0.440, 1.000); -moz-transition: height .8s cubic-bezier(0.165, 0.840, 0.440, 1.000); -o-transition: height .8s cubic-bezier(0.165, 0.840, 0.440, 1.000); transition: height .8s cubic-bezier(0.165, 0.840, 0.440, 1.000); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } */ .slideshow-wrapper { position: relative; /*padding-bottom: 24px; for the controls - apple dots, etc. */ } /* no controls under 860px /*@media (max-width: 859px) { #outer_shell #shell #header .slideshow-wrapper { padding-bottom: 0; } }*/ /************************************************** /* TABLE ELEMENT (ONLY IF THERE'S A LEFT SLIDESHOW) /**************************************************/ /* this will not work in firefox anyways (since it's display: table) .slideshow-holder { position: relative; } */ /* HACK flip the direction of the overall element, so the left sidebar is actually on the right in the DOM - this way, we can assign styles to it to bump it down below the slideshow #outer_shell .slideshow-holder { direction: rtl; } [dir="rtl"] #outer_shell .slideshow-holder { direction: ltr; } #outer_shell .slideshow-holder > div { direction: ltr; } [dir="rtl"] #outer_shell .slideshow-holder > div { direction: rtl; } @media (max-width: 859px) { #outer_shell .slideshow-holder { display: block; / * not table * / } } */ /*************** /* SLIDE WRAPPER /***************/ #shell .slide-wrapper.force-show-spinner, .slide-wrapper { transition: transform 1s cubic-bezier(0.165, 0.840, 0.440, 1.000); -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.840, 0.440, 1.000); -moz-transition: -moz-transform 1s cubic-bezier(0.165, 0.840, 0.440, 1.000); -o-transition: -o-transform 1s cubic-bezier(0.165, 0.840, 0.440, 1.000); -ms-transition: -ms-transform 1s cubic-bezier(0.165, 0.840, 0.440, 1.000); z-index: 3; background: url(data:image/gif;base64,R0lGODlhGAAYAPQAAO7u7gAAAMHBwerq6tHR0aSkpNnZ2YWFhbu7u5KSksrKyp2dnbOzs+Li4m5ubn19faysrGFhYQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJBwAAACwAAAAAGAAYAAAFriAgjiQAQWVaDgr5POSgkoTDjFE0NoQ8iw8HQZQTDQjDn4jhSABhAAOhoTqSDg7qSUQwxEaEwwFhXHhHgzOA1xshxAnfTzotGRaHglJqkJcaVEqCgyoCBQkJBQKDDXQGDYaIioyOgYSXA36XIgYMBWRzXZoKBQUMmil0lgalLSIClgBpO0g+s26nUWddXyoEDIsACq5SsTMMDIECwUdJPw0Mzsu0qHYkw72bBmozIQAh+QQJBwAAACwAAAAAGAAYAAAFsCAgjiTAMGVaDgR5HKQwqKNxIKPjjFCk0KNXC6ATKSI7oAhxWIhezwhENTCQEoeGCdWIPEgzESGxEIgGBWstEW4QCGGAIJEoxGmGt5ZkgCRQQHkGd2CESoeIIwoMBQUMP4cNeQQGDYuNj4iSb5WJnmeGng0CDGaBlIQEJziHk3sABidDAHBgagButSKvAAoyuHuUYHgCkAZqebw0AgLBQyyzNKO3byNuoSS8x8OfwIchACH5BAkHAAAALAAAAAAYABgAAAW4ICCOJIAgZVoOBJkkpDKoo5EI43GMjNPSokXCINKJCI4HcCRIQEQvqIOhGhBHhUTDhGo4diOZyFAoKEQDxra2mAEgjghOpCgz3LTBIxJ5kgwMBShACREHZ1V4Kg1rS44pBAgMDAg/Sw0GBAQGDZGTlY+YmpyPpSQDiqYiDQoCliqZBqkGAgKIS5kEjQ21VwCyp76dBHiNvz+MR74AqSOdVwbQuo+abppo10ssjdkAnc0rf8vgl8YqIQAh+QQJBwAAACwAAAAAGAAYAAAFrCAgjiQgCGVaDgZZFCQxqKNRKGOSjMjR0qLXTyciHA7AkaLACMIAiwOC1iAxCrMToHHYjWQiA4NBEA0Q1RpWxHg4cMXxNDk4OBxNUkPAQAEXDgllKgMzQA1pSYopBgonCj9JEA8REQ8QjY+RQJOVl4ugoYssBJuMpYYjDQSliwasiQOwNakALKqsqbWvIohFm7V6rQAGP6+JQLlFg7KDQLKJrLjBKbvAor3IKiEAIfkECQcAAAAsAAAAABgAGAAABbUgII4koChlmhokw5DEoI4NQ4xFMQoJO4uuhignMiQWvxGBIQC+AJBEUyUcIRiyE6CR0CllW4HABxBURTUw4nC4FcWo5CDBRpQaCoF7VjgsyCUDYDMNZ0mHdwYEBAaGMwwHDg4HDA2KjI4qkJKUiJ6faJkiA4qAKQkRB3E0i6YpAw8RERAjA4tnBoMApCMQDhFTuySKoSKMJAq6rD4GzASiJYtgi6PUcs9Kew0xh7rNJMqIhYchACH5BAkHAAAALAAAAAAYABgAAAW0ICCOJEAQZZo2JIKQxqCOjWCMDDMqxT2LAgELkBMZCoXfyCBQiFwiRsGpku0EshNgUNAtrYPT0GQVNRBWwSKBMp98P24iISgNDAS4ipGA6JUpA2WAhDR4eWM/CAkHBwkIDYcGiTOLjY+FmZkNlCN3eUoLDmwlDW+AAwcODl5bYl8wCVYMDw5UWzBtnAANEQ8kBIM0oAAGPgcREIQnVloAChEOqARjzgAQEbczg8YkWJq8nSUhACH5BAkHAAAALAAAAAAYABgAAAWtICCOJGAYZZoOpKKQqDoORDMKwkgwtiwSBBYAJ2owGL5RgxBziQQMgkwoMkhNqAEDARPSaiMDFdDIiRSFQowMXE8Z6RdpYHWnEAWGPVkajPmARVZMPUkCBQkJBQINgwaFPoeJi4GVlQ2Qc3VJBQcLV0ptfAMJBwdcIl+FYjALQgimoGNWIhAQZA4HXSpLMQ8PIgkOSHxAQhERPw7ASTSFyCMMDqBTJL8tf3y2fCEAIfkECQcAAAAsAAAAABgAGAAABa8gII4k0DRlmg6kYZCoOg5EDBDEaAi2jLO3nEkgkMEIL4BLpBAkVy3hCTAQKGAznM0AFNFGBAbj2cA9jQixcGZAGgECBu/9HnTp+FGjjezJFAwFBQwKe2Z+KoCChHmNjVMqA21nKQwJEJRlbnUFCQlFXlpeCWcGBUACCwlrdw8RKGImBwktdyMQEQciB7oACwcIeA4RVwAODiIGvHQKERAjxyMIB5QlVSTLYLZ0sW8hACH5BAkHAAAALAAAAAAYABgAAAW0ICCOJNA0ZZoOpGGQrDoOBCoSxNgQsQzgMZyIlvOJdi+AS2SoyXrK4umWPM5wNiV0UDUIBNkdoepTfMkA7thIECiyRtUAGq8fm2O4jIBgMBA1eAZ6Knx+gHaJR4QwdCMKBxEJRggFDGgQEREPjjAMBQUKIwIRDhBDC2QNDDEKoEkDoiMHDigICGkJBS2dDA6TAAnAEAkCdQ8ORQcHTAkLcQQODLPMIgIJaCWxJMIkPIoAt3EhACH5BAkHAAAALAAAAAAYABgAAAWtICCOJNA0ZZoOpGGQrDoOBCoSxNgQsQzgMZyIlvOJdi+AS2SoyXrK4umWHM5wNiV0UN3xdLiqr+mENcWpM9TIbrsBkEck8oC0DQqBQGGIz+t3eXtob0ZTPgNrIwQJDgtGAgwCWSIMDg4HiiUIDAxFAAoODwxDBWINCEGdSTQkCQcoegADBaQ6MggHjwAFBZUFCm0HB0kJCUy9bAYHCCPGIwqmRq0jySMGmj6yRiEAIfkECQcAAAAsAAAAABgAGAAABbIgII4k0DRlmg6kYZCsOg4EKhLE2BCxDOAxnIiW84l2L4BLZKipBopW8XRLDkeCiAMyMvQAA+uON4JEIo+vqukkKQ6RhLHplVGN+LyKcXA4Dgx5DWwGDXx+gIKENnqNdzIDaiMECwcFRgQCCowiCAcHCZIlCgICVgSfCEMMnA0CXaU2YSQFoQAKUQMMqjoyAglcAAyBAAIMRUYLCUkFlybDeAYJryLNk6xGNCTQXY0juHghACH5BAkHAAAALAAAAAAYABgAAAWzICCOJNA0ZVoOAmkY5KCSSgSNBDE2hDyLjohClBMNij8RJHIQvZwEVOpIekRQJyJs5AMoHA+GMbE1lnm9EcPhOHRnhpwUl3AsknHDm5RN+v8qCAkHBwkIfw1xBAYNgoSGiIqMgJQifZUjBhAJYj95ewIJCQV7KYpzBAkLLQADCHOtOpY5PgNlAAykAEUsQ1wzCgWdCIdeArczBQVbDJ0NAqyeBb64nQAGArBTt8R8mLuyPyEAOwAAAAAAAAAAAA==) no-repeat center center; } /* we don't need the activity indicator on mobile, since we are not preloading the images */ @media (max-width: 1024px) { .slide-wrapper { background: none; } } .slide-wrapper.all-loaded { background: none; } /* .slide-wrapper.moving { background: none; } */ /************** /* SLIDE HOLDER /**************/ .slide-holder { /* HACK needed to avoid spaces between the slides (which are inline blocks) */ white-space: nowrap; font-size: 0; left: 0; } /* do wrap inside the slide */ .slide-holder slide { white-space: normal; } /*********** /* STRETCHER /**********/ .slide-stretcher-outer { max-width: 860px; margin: auto; } .slide-stretcher { height: 0; padding-bottom: 66.86%; position: relative; } .slideshow-wrapper-with-left-panel .slide-stretcher { padding-bottom: 56.27%; } .slide-stretcher slide { height: 0; } /********** /* CONTROLS /**********/ /* .slide-controls { width: 860px; left: 0; right: 0; position: absolute; z-index: 2; top: 0; } */ .slideshow-wrapper-with-left-panel .slide-controls { display: block; z-index: 4; } /* no controls under iPad size */ @media (max-width: 767px) { .slide-selectors, .slide-controls { display: none !important; } } /* caption for slide on ipad when flipped */ @media (min-width: 769px) { .pswp__caption__center { display: none; } } /******************* /* THE ACTUAL SLIDES /*******************/ slide { display: inline-block; vertical-align: top; position: relative; width: 100%; } .stretched-slideshow slide { margin-right: 50px; } .slideshow-wrapper-with-left-panel slide { margin-right: 0; } /* /***************************************** /* CUSTOM BAR THAT CAN BE PLACED ON SLIDES /*****************************************/ .custom-fso-tour-bar:hover { -moz-box-shadow: 0 4px 11px 0px #888,0 -2px 11px 0px #888; -webkit-box-shadow: 0 4px 11px 0px #888,0 -2px 11px 0px #888; box-shadow: 0 4px 11px 0px #888,0 -2px 11px 0px #888; background: rgba(71, 100, 111, 0.9); cursor: pointer; } .custom-fso-tour-bar { position: absolute; bottom: 5px; width: 840px; background: rgba(71, 100, 111, 0.7); margin: 0 10px 10px 10px; padding: 6px 0 9px 0; z-index: 50; } .custom-fso-tour-bar .button { color: white; background: rgba(132, 149, 171, 0.6); font-size: 22px; display: inline-block; padding: 6px 10px 6px 10px; margin-top: 5px; width: 35%; } :lang(el) .custom-fso-tour-bar .button { font-size: 14px; } :lang(nl) .custom-fso-tour-bar .button, :lang(fr) .custom-fso-tour-bar .button, :lang(it) .custom-fso-tour-bar .button { font-size: 15px; } :lang(pt) .custom-fso-tour-bar .button, :lang(es) .custom-fso-tour-bar .button, :lang(es_ES) .custom-fso-tour-bar .button { font-size: 18px; } @media (max-width: 767px) { .custom-fso-tour-bar .button { font-size: 15px; } } @media (max-width: 600px) { .custom-fso-tour-bar .button { font-size: 13px; } } .custom-fso-tour-bar:hover button { background: rgba(132, 149, 171, 0.8); } .custom-fso-tour-bar-left { float: left; width: 61%; text-align: right; color: white; font-size: 18px; margin-right: 10px; } /************** /* VIDEO SLIDES /**************/ .video-js.vjs-playing ~ .center-playbutton-overlay, .video-js.vjs-playing ~ .new-age-caption-overlay, .video-js.vjs-has-started:active ~ .center-playbutton-overlay, .video-js.vjs-has-started:active ~ .new-age-caption-overlay { display: none; } /***************************** /* SLIDE MOTION-RELATED STYLES /*****************************/ .slide-wrapper slide .item.move-right, .slide-wrapper slide .item.move-left { opacity: 0; transition: opacity .2s ease-out; -webkit-transition: opacity .2s ease-out; -moz-transition: opacity .2s ease-out; -o-transition: opacity .2s ease-out; -ms-transition: opacity .2s ease-out; /* -webkit-transform: translate3d(-910px, 0px, 0); -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.165, 0.840, 0.440, 1.000); */ -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; perspective: 1000; -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; -ms-perspective: 1000; } /* .slide-wrapper slide .item.move-right.no-animation-delay, .slide-wrapper slide .item.move-left.no-animation-delay { transition: none !important; -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; -ms-transition: none !important; } */ .slide-wrapper slide .item.text-item.animation-left-hold { opacity: 0 !important; transform: translate3d(-910px, 30px, 0) !important; -webkit-transform: translate3d(-910px, 30px, 0) !important; -moz-transform: translate3d(-910px, 30px, 0) !important; -o-transform: translate3d(-910px, 30px, 0) !important; -ms-transform: translate3d(-910px, 30px, 0) !important; } .slide-wrapper slide .item.text-item.animation-left-hold.js-vertical-middle { opacity: 0 !important; transform: translate3d(-910px, 30px, 0) !important; -webkit-transform: translate3d(-910px, 30px, 0) !important; -moz-transform: translate3d(-910px, 30px, 0) !important; -o-transform: translate3d(-910px, 30px, 0) !important; -ms-transform: translate3d(-910px, 30px, 0) !important; } .slide-wrapper slide .item.text-item.animation-right-hold { opacity: 0 !important; transform: translate3d(910px, 30px, 0) !important; -webkit-transform: translate3d(910px, 30px, 0) !important; -moz-transform: translate3d(910px, 30px, 0) !important; -o-transform: translate3d(910px, 30px, 0) !important; -ms-transform: translate3d(910px, 30px, 0) !important; } .slide-wrapper slide .item.text-item.animation-right-hold.js-vertical-middle { opacity: 0 !important; transform: translate3d(910px, 30px, 0) !important; -webkit-transform: translate3d(910px, 30px, 0) !important; -moz-transform: translate3d(910px, 30px, 0) !important; -o-transform: translate3d(910px, 30px, 0) !important; -ms-transform: translate3d(910px, 30px, 0) !important; } .slide-wrapper slide .item.text-item.animation-left-hold2 { opacity: 1 !important; transform: translate3d(-910px, 0, 0) !important; -webkit-transform: translate3d(-910px, 0, 0) !important; -moz-transform: translate3d(-910px, 0, 0) !important; -o-transform: translate3d(-910px, 0, 0) !important; -ms-transform: translate3d(-910px, 0, 0) !important; } .slide-wrapper slide .item.text-item.animation-left-hold2.js-vertical-middle { opacity: 1 !important; transform: translate3d(-910px, 0, 0) !important; -webkit-transform: translate3d(-910px, 0, 0) !important; -moz-transform: translate3d(-910px, 0, 0) !important; -o-transform: translate3d(-910px, 0, 0) !important; -ms-transform: translate3d(-910px, 0, 0) !important; } .slide-wrapper slide .item.text-item.animation-right-hold2 { opacity: 1 !important; transform: translate3d(910px, 0, 0) !important; -webkit-transform: translate3d(910px, 0, 0) !important; -moz-transform: translate3d(910px, 0, 0) !important; -o-transform: translate3d(910px, 0, 0) !important; -ms-transform: translate3d(910px, 0, 0) !important; } .slide-wrapper slide .item.text-item.animation-right-hold2.js-vertical-middle { opacity: 1 !important; transform: translate3d(910px, 0, 0) !important; -webkit-transform: translate3d(910px, 0, 0) !important; -moz-transform: translate3d(910px, 0, 0) !important; -o-transform: translate3d(910px, 0, 0) !important; -ms-transform: translate3d(910px, 0, 0) !important; } .js-vertical-middle { max-height: 80%; overflow: hidden; } .pswp .js-vertical-middle { max-height: none; overflow: visible; } .slide-wrapper slide.fso-slide-active .item.text-item.animation-right-hold, .slide-wrapper slide.fso-slide-active .item.text-item.animation-right-hold2, .slide-wrapper slide.fso-slide-active .item.text-item.animation-left-hold, .slide-wrapper slide.fso-slide-active .item.text-item.animation-left-hold2 { opacity: 1 !important; transform: translate3d(0, 0, 0) !important; -webkit-transform: translate3d(0, 0, 0) !important; -moz-transform: translate3d(0, 0, 0) !important; -o-transform: translate3d(0, 0, 0) !important; -ms-transform: translate3d(0, 0, 0) !important; transition: none !important; -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; -ms-transition: none !important; } .slide-wrapper slide.fso-slide-active.sliding .item.text-item.animation-right-hold, .slide-wrapper slide.fso-slide-active.sliding .item.text-item.animation-right-hold2, .slide-wrapper slide.fso-slide-active.sliding .item.text-item.animation-left-hold, .slide-wrapper slide.fso-slide-active.sliding .item.text-item.animation-left-hold2 { opacity: 0 !important; transform: translate3d(0, 0, 0) !important; -webkit-transform: translate3d(0, 0, 0) !important; -moz-transform: translate3d(0, 0, 0) !important; -o-transform: translate3d(0, 0, 0) !important; -ms-transform: translate3d(0, 0, 0) !important; } .slide-wrapper slide.fso-slide-active.sliding .item.text-item.animation-right-hold, .slide-wrapper slide.fso-slide-active.sliding .item.text-item.animation-right-hold2, .slide-wrapper slide.fso-slide-active.sliding .item.text-item.animation-left-hold, .slide-wrapper slide.fso-slide-active.sliding .item.text-item.animation-left-hold2, .slide-wrapper slide .item.text-item { transition: transform 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000), opacity 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000) !important; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000), opacity 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000) !important; -moz-transition: -moz-transform 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000), opacity 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000) !important; -o-transition: -o-transform 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000), opacity 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000) !important; -ms-transition: -ms-transform 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000), opacity 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000) !important; } /********************************************* /* PRESS-RELEASE (MULTI-PART) SLIDESHOW STYLES /*********************************************/ .stretched-slideshow slide .image-item { opacity: 0.2; transition: opacity .8s ease-out; -webkit-transition: opacity .8s ease-out; -moz-transition: opacity .8s ease-out; -o-transition: opacity .8s ease-out; -ms-transition: opacity .8s ease-out; /* -webkit-filter: grayscale(65%); */ } .stretched-slideshow slide .text-item { opacity: 0; } .stretched-slideshow slide.fso-slide-active .item { opacity: 1; /* -webkit-filter: grayscale(0%); */ } /* needs to be important otherwise chinese ower writes it. */ .glyphicon { font-family: 'Glyphicons Halflings' !important; } /*************************** /* OTHER RANDOM MISC. STYLES /***************************/ /* image quality fix - was needed mostly for Firefox when zooming in */ .slide-wrapper slide img.item { -ms-interpolation-mode: bicubic; -webkit-interpolation-mode: nearest-neighbor; } /* same for Safari */ .browser-safari .slide-wrapper slide img.item { image-rendering: pixelated; image-rendering: optimizeQuality; } @media only screen and (max-device-width : 1024px) { /* that would be an iPad or smaller */ .slide-holder slide .item { opacity: 1 !important; } } .ie8 .slide-wrapper img { vertical-align: top; } .device-ios .hide-on-ios { display: none; } /******************************* /* SLIDESHOW WITH ONLY ONE SLIDE /*******************************/ .slideshow-only-one-slide .slideshow-autoslide-strip-holder, .slideshow-only-one-slide .slide-selectors, .slideshow-only-one-slide .slide-controls { display: none; } .slideshow-wrapper.slideshow-only-one-slide { padding-bottom: 0; } /******************************************** /* SOME COMMON CSS THAT YOU MIGHT WANT TO USE /********************************************/ .full-860-width { width: 860px; height: auto; left: 0; top: 0; } .fso-slide-mobile-numbers { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; display: none; position: absolute; bottom: 3px; /* top: 160px; */ left: 100px; right: 100px; padding-bottom: 56.27%; /* FIX ME */ text-align: center; z-index: 8; color: white; text-shadow: 0 0 5px black; opacity: 0; } @media (max-width: 767px) { .org-domain .fso-slide-mobile-numbers { padding-bottom: 51%; } } .device-mobile .fso-slide-mobile-numbers{ padding-bottom: 0; } /*Fix from overlapping number on iphone videos slideshow*/ .device-ios .fso-slide-mobile-numbers{ padding-bottom: 0; } .device-ipad .fso-slide-mobile-numbers { padding-bottom: 0%; } @media (max-width: 768px) { .slideshow-main.slide-wrapper.col.w100 { position: relative; } } .text-info-mobile { display: none; } /********** /* MOBILITY /**********/ /* clever image centering if slide has only one image */ .device-ipad .templated-slider-style-dynamic-image-sizing slide.js-single-image-slide.slide-template-new-c .image-holder, .device-ipad .templated-slider-style-dynamic-image-sizing slide.js-single-image-slide.slide-template-new-a .image-holder, .device-ipad .templated-slider-style-dynamic-image-sizing slide.js-single-image-slide.slide-template-new-b .image-holder, .device-ipad .templated-slider-style-dynamic-image-sizing slide.js-single-image-slide.slide-template-new-c-1 .image-holder, .device-ipad .templated-slider-style-dynamic-image-sizing slide.js-single-image-slide.slide-template-new-d-2 .image-holder, .device-ipad .templated-slider-style-dynamic-image-sizing slide.js-single-image-slide.slide-template-new-d .image-holder { left: 50% !important; right: auto !important; transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); } @media (max-width: 768px) { .slide-wrapper, .slide-wrapper .slide-holder { transform: translateZ(0); -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); } .slide-holder slide .item { opacity: 1 !important; } /* zooming is pointless - slideshow will already take up full width */ .slide-zoomer { display: none !important; } /* clever image centering if slide has only one image */ .templated-slider-style-dynamic-image-sizing slide.js-single-image-slide .image-holder { left: 50% !important; right: auto !important; bottom: 0 !important; top: 0 !important; height: 100% !important; width: auto !important; transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); } .templated-slider-style-dynamic-image-sizing slide.js-single-image-slide .image-holder img { height: 100% !important; width: auto !important; position: relative !important; } slide img:only-of-type { /* AD-20160811 THIS RULE BLOWS padding-bottom handling for the sliders position: static !important; */ margin-left: auto; margin-right: auto; display: block; } .templated-slider-style-dynamic-image-sizing slide img:only-of-type { position: absolute !important; } .fso-slide-mobile-numbers { display: none; left: 4px; right: auto; } .mobile-caption-lightbox td, .slide-wrapper .slide-holder slide .text-item { top: auto !important; bottom: 0px !important; background: rgba(0, 0, 0, 0.7); color: white; font-size: 12px; line-height: 16px; left: 0 !important; right: 0 !important; width: auto !important; height: auto !important; padding: 10px 20px 20px 20px; visibility: hidden; opacity: 0 !important; /* transform: translate3d(0px,30px,0px) !important; -webkit-transform: translate3d(0px,30px,0px) !important; -moz-transform: translate3d(0px,30px,0px) !important; -o-transform: translate3d(0px,30px,0px) !important; -ms-transform: translate3d(0px,30px,0px) !important; transition: transform .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) .1s, opacity .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) .1s, visibility .1s cubic-bezier(0.165, 0.840, 0.440, 1.000) !important; -webkit-transition: -webkit-transform .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) .1s, opacity .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) .1s, visibility .1s cubic-bezier(0.165, 0.840, 0.440, 1.000) !important; -moz-transition: -moz-transform .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) .1s, opacity .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) .1s, visibility .1s cubic-bezier(0.165, 0.840, 0.440, 1.000) !important; -o-transition: -o-transform .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) .1s, opacity .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) .1s, visibility .1s cubic-bezier(0.165, 0.840, 0.440, 1.000) !important; -ms-transition: -ms-transform .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) .1s, opacity .4s cubic-bezier(0.165, 0.840, 0.440, 1.000) .1s, visibility .1s cubic-bezier(0.165, 0.840, 0.440, 1.000) !important; */ } .slide-wrapper .slide-holder slide.show .text-item { visibility: visible; opacity: 1 !important; /* transform: translate3d(0px,0px,0px) !important; -webkit-transform: translate3d(0px,0px,0px) !important; -moz-transform: translate3d(0px,0px,0px) !important; -o-transform: translate3d(0px,0px,0px) !important; -ms-transform: translate3d(0px,0px,0px) !important; */ z-index: 501; } .slide-wrapper .slide-holder slide.show.show-lightbox .text-item { visibility: hidden; } .mobile-caption-lightbox-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(64, 64, 64, 0.75); z-index: 500; } .mobile-pac-menu { background: rgba(103, 140, 165, 0.8); padding: 30px 0 10px 0; font-family: Verdana; font-size: 14px; font-weight: bold; position: relative; border: 1px solid white; border-radius: 5px; } .mobile-pac-menu ul { padding-left: 0; padding-bottom: 0; margin-bottom: 0; } .mobile-pac-menu ul li { padding: 7px 20px 7px 40px; list-style: none; border-bottom: 1px solid #758e9e; position: relative; } .mobile-pac-menu ul li[data-class="menu-show"] { border-bottom: none; background: url(/theme/images/small-dot3.png) 7px 7px no-repeat transparent; padding: 12px 20px 7px 40px; } .mobile-pac-menu ul li:first-child { border-top: 1px solid #758e9e; } .mobile-pac-menu ul li:before { content: "▶"; position: absolute; top: 13px; left: 12px; font-size: 18px; } .mobile-pac-menu ul li[data-class="menu-show"]:before { display: none; } .mobile-pac-menu:before { content: "ⓧ"; position: absolute; right: 5px; top: 7px; font-size: 20px; } /* .mobile-pac-menu:after { content: "Menu"; position: absolute; left: 5px; bottom: 4px; font-size: 14px; background: url(/theme/images/small-dot3.png) 2px 5px no-repeat transparent; padding: 10px 10px 10px 35px; } */ .mobile-pac-menu ul li .smaller { display: none; } .mobile-caption-lightbox-inner { display: table; height: 100%; width: 100%; } .mobile-caption-lightbox { height: 0; } .mobile-caption-lightbox td { visibility: visible; opacity: 1 !important; } .menu-lightbox .mobile-caption-lightbox td { background: none; } .mobile-text-info-showing .menu-holder { display: none !important; } .slide-wrapper .slide-holder slide .text-info-mobile { position: absolute; bottom: 6%; right: 6%; z-index: 50; display: block; font-family: 'Glyphicons Halflings'; font-size: 24px; color: white; text-shadow: 0 0 5px black; /* , 1px 0 5px black, 0 1px 5px black; */ /* -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; */ opacity: 1; /* transition: opacity .4s cubic-bezier(0.165, 0.840, 0.440, 1.000); -webkit-transition: opacity .4s cubic-bezier(0.165, 0.840, 0.440, 1.000); -moz-transition: opacity .4s cubic-bezier(0.165, 0.840, 0.440, 1.000); -o-transition: opacity .4s cubic-bezier(0.165, 0.840, 0.440, 1.000); -ms-transition: opacity .4s cubic-bezier(0.165, 0.840, 0.440, 1.000); */ } .slide-wrapper .slide-holder slide.show .text-info-mobile { opacity: 0; } .menu-holder { bottom: 4% !important; } /* .fso-slide-imagemap.show-overlay-mobile-menu .active-dot.active-dot-slider, .fso-slide-imagemap.show-overlay-mobile-menu .active-dot.active-dot-bg, .fso-slide-imagemap.show-overlay-mobile-menu .inactive-dot, .fso-slide-imagemap.show-overlay-mobile-menu .imagemap-overlay, .fso-slide-imagemap.show-overlay-mobile-menu .hover-overlay { display: none; } */ } /************ /* IOS TWEAKS /************/ /*.device-iphone slide video { display: none !important; }*/ .device-iphone slide.playing video { display: block !important; } .device-iphone slide.playing.paused video { position: absolute; top: -3000px; } .device-iphone slide .vjs-poster { display: block !important; } .device-mobile slide .vjs-poster { background-size: 100% 100%; } .device-iphone slide.playing .vjs-poster { display: none !important; } .device-iphone slide.playing.paused .vjs-poster { display: block !important; } .device-iphone slide .vjs-poster:after { position: absolute; content: '\e600'; left: 50%; top: 50%; margin-top: -21px; margin-left: -21px; font-family: 'iconset'; font-size: 42px; } .device-iphone slide .new-age-caption-overlay { pointer-events: none; } .device-ipad slide video { display: block !important; } .device-iphone slide .new-age-caption-overlay, .device-ipad slide .new-age-caption-overlay { opacity: 1 !important; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; /* transition: opacity .2s ease-out; -webkit-transition: opacity .2s ease-out; -moz-transition: opacity .2s ease-out; -o-transition: opacity .2s ease-out; -ms-transition: opacity .2s ease-out; */ } .device-ipad .ios-video-playing .new-age-caption-overlay, .device-ipad slide.ios-video-playing .new-age-caption-overlay { opacity: 0 !important; } .device-ipad slide.video-slide.vjs-has-started:before { position: absolute; content: '\e600'; left: 50%; top: 50%; margin-top: -21px; margin-left: -21px; font-family: 'iconset'; font-size: 42px; z-index: 1; color: #627d95; pointer-events: none; } .device-ipad .video-slide.ios-video-playing:before, .device-ipad .ios-video-playing .video-slide:before, .device-ipad slide.video-slide.ios-video-playing:before { display: none; content: ''; } /* .device-ipad #outer_shell #shell #header .slideshow-wrapper { padding-bottom: 24px; } */ /********** /* IE8 :-( /**********/ .ie678 .slide-holder { position: relative; width: 50000px; max-height: 360px; } .ie678 .slide-holder slide { display: block; width: 640px; height: 360px; padding-bottom: 0; float: left; } .slideshow-main { filter: alpha(opacity=100) !important; } /* .slideshow-zoomed-in .slideshow-wrapper slide img { width: auto; } */ /* .slideshow-zoomed-in #header_and_content_container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; } */ .slideshow-zoomed-in #header_and_content_container { overflow: visible; } /* .slideshow-zoomed-in .slide-wrapper.zoomedIn { overflow: hidden; } */ /* .slideshow-zoomed-in .slideshow-wrapper { padding-bottom: 0; } */ .slideshow-wrapper.slideshow-no-apple-dots { padding-bottom: 0; } /* firefox renders images while loading as height=width, so that makes the slideshow go jumping up and down when the images are delayed loading */ .image-item.loading-image-hide { max-height: 0; } slide .zoomer-image { display: none; } slide .image-holder { backface-visibility: hidden; will-change: transfer,opacity; -webkit-backface-visibility: hidden; } slide .image-holder img { width: 100%; position: absolute; top: 0; left: 0; } .slideshow-wrapper.zoomedIn .image-holder.double-loaded img:not(.zoomer-image) { display: none; } .slideshow-wrapper.zoomedIn .zoomer-image { display: inline; } /* ###### # # ####### ####### ####### ##### # # ### ###### ####### # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # ###### ####### # # # # # ##### # # # # ###### ##### # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # ####### # ####### ##### ## ## ### # ####### */ .pswp slide { height: 0; padding-bottom: 66.86%; /* left: 20px; width: calc(100% - 40px); */ top: 50%; position: absolute; transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); } @media (orientation: landscape) { .device-custom-type-mobile .pswp slide { top: 0 !important; height: 100% !important; /* top: 20px; height: calc(100% - 40px); */ padding-bottom: 0; width: 0; padding-right: 83.56%; left: 50%; transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); } .device-custom-type-mobile .pswp .pswp__caption__center { max-width: calc(100% - 20px); } } @media (orientation: landscape) and (max-height: 400px) { .device-custom-type-mobile .pswp .pswp__caption__center.small-captions { font-size: 12px; line-height: 1.5; padding: 10px 10px 0 10px; } } @media (orientation: portrait) and (max-width: 400px) { .device-custom-type-mobile .pswp .pswp__caption__center.small-captions { font-size: 12px; line-height: 1.5; padding: 10px 10px 0 10px; } } .pswp slide .item { position: absolute; } .pswp slide .caption-meta { display: none; } .pswp slide img { visibility: visible !important; } .pswp slide .item.text-item.js-vertical-middle { transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); } .device-custom-type-mobile .pswp slide .text-item, .pswp .pswp__caption .caption-meta { display: none !important; } .pswp .pswp__caption * { background: none !important; } .device-custom-type-mobile .pswp .pswp__caption .lead { font-weight: bold; } .device-custom-type-mobile .pswp .pswp__caption h3 { font-family: "Century Gothic", Arial, Verdana; font-size: 18px; font-weight: bold; margin-bottom: 4px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* .photoswipe-on .primary-nav-menu { display: none !important; } .photoswipe-on .slide-stretcher-outer { max-width: none; } .photoswipe-on .slide-stretcher slide { height: auto; } .photoswipe-on.slideshow-zoomed-in .slide-wrapper.zoomedIn { overflow: visible; } .photoswipe-on { overflow: hidden; } */