.video-gallery .animate-divider { opacity: 0; } .video-gallery .animate-text-group { display: block; } .video-gallery .animate-text { opacity: 0; display: block; color: inherit; margin-top: 3px !important; } .video-gallery .animate-text a { position: relative; border: 2px solid transparent; outline: 1px solid transparent; outline-offset: -3px; font-weight: 600; color: #0067b8 !important; } .video-gallery .animate-text a:hover { color: #005da6; text-decoration: underline; } .video-gallery .fade-in { opacity: 0; animation: fade-in 2s 0.3s forwards; } .video-gallery .fade-out { opacity: 1; animation: fade-out 2s 0.3s forwards; } .video-gallery .on-focus { opacity: 0; animation: onFocusContent 0.3s forwards; } .video-gallery .off-focus { opacity: 1; animation: offFocusContent 0.3s forwards; } .video-gallery .currently-focused__divider { opacity: 1 !important; } .video-gallery .currently-focused { animation: none !important; animation-duration: 0 !important; opacity: 1 !important; } .video-gallery .load-bullet { opacity: 0; animation: fade-in 1s 0s forwards; } .video-gallery .fade-in-bullet { animation: fade-in 1s 0s forwards; } .video-gallery .fade-out-bullet { animation: fade-out 1s 0s forwards; } .video-gallery .slide-in-content { animation: slide-in-media 1.5s 0s forwards; opacity: 1 !important; } .video-gallery .slide-out-content { opacity: 1 !important; } .video-gallery .header-active { color: #000 !important; font-weight: 600 !important; font-size: 34px !important; line-height: 40px !important; } .video-gallery .header-active-mobile { color: #000 !important; font-weight: 600 !important; font-size: 26px !important; line-height: 32px !important; } .video-gallery .header-enlarge { opacity: 0; animation: text-grow-fade-in 1s forwards !important; } .video-gallery .header-enlarge-mobile { opacity: 0; animation: text-grow-fade-in-mobile 1s forwards !important; } .video-gallery .header-revert { animation: text-fade-out-revert 1s forwards !important; } .video-gallery .header-revert-mobile { animation: text-fade-out-revert-mobile 1s forwards !important; } .video-gallery .ctaLightweight .f-lightweight:focus { background: rgba(0, 103, 184, 0.1) !important; border: 2px solid #000 !important; outline: none !important; color: #0067b8; } .video-gallery .ctaLightweight .f-lightweight:focus span { box-shadow: 0 3px 0 -1px currentColor; text-decoration: none !important; } .video-gallery .theme-dark .ctaLightWeight .f-lightweight { background: #fff !important; color: #000 !important; padding: 10px 16px !important; } .video-gallery .theme-dark .ctaLightWeight .f-lightweight:hover { color: #0067b8 !important; } .video-gallery .theme-dark .ctaLightWeight .f-lightweight:focus { background: #e6e6e6 !important; border: 2px solid #000 !important; outline: 2px solid #fff !important; color: #0067b8 !important; } .video-gallery .margin-top-large { margin-top: 80px !important; } @media screen and (min-width: 540px) and (max-width: 1083px) { .video-gallery .margin-top-large { margin-top: 48px !important; } } @media screen and (max-width: 539px) { .video-gallery .margin-top-large { margin-top: 24px !important; } } .video-gallery .margin-top-medium { margin-top: 48px !important; } @media screen and (min-width: 540px) and (max-width: 1083px) { .video-gallery .margin-top-medium { margin-top: 24px !important; } } @media screen and (max-width: 539px) { .video-gallery .margin-top-medium { margin-top: 12px !important; } } .video-gallery .margin-top-small { margin-top: 24px !important; } .video-gallery .margin-bottom-large { margin-bottom: 80px !important; } @media screen and (min-width: 540px) and (max-width: 1083px) { .video-gallery .margin-bottom-large { margin-bottom: 48px !important; } } @media screen and (max-width: 539px) { .video-gallery .margin-bottom-large { margin-bottom: 24px !important; } } .video-gallery .margin-bottom-medium { margin-bottom: 48px !important; } @media screen and (min-width: 540px) and (max-width: 1083px) { .video-gallery .margin-bottom-medium { margin-bottom: 24px !important; } } @media screen and (max-width: 539px) { .video-gallery .margin-bottom-medium { margin-bottom: 12px !important; } } .video-gallery .margin-bottom-small { margin-bottom: 24px !important; } .video-gallery .padding-top-large { padding-top: 80px !important; } @media screen and (min-width: 540px) and (max-width: 1083px) { .video-gallery .padding-top-large { padding-top: 48px !important; } } @media screen and (max-width: 539px) { .video-gallery .padding-top-large { padding-top: 24px !important; } } .video-gallery .padding-top-medium { padding-top: 48px !important; } @media screen and (min-width: 540px) and (max-width: 1083px) { .video-gallery .padding-top-medium { padding-top: 24px !important; } } @media screen and (max-width: 539px) { .video-gallery .padding-top-medium { padding-top: 12px !important; } } .video-gallery .padding-top-small { padding-top: 24px !important; } .video-gallery .padding-bottom-large { padding-bottom: 80px !important; } @media screen and (min-width: 540px) and (max-width: 1083px) { .video-gallery .padding-bottom-large { padding-bottom: 48px !important; } } @media screen and (max-width: 539px) { .video-gallery .padding-bottom-large { padding-bottom: 24px !important; } } .video-gallery .padding-bottom-medium { padding-bottom: 48px !important; } @media screen and (min-width: 540px) and (max-width: 1083px) { .video-gallery .padding-bottom-medium { padding-bottom: 24px !important; } } @media screen and (max-width: 539px) { .video-gallery .padding-bottom-medium { padding-bottom: 12px !important; } } .video-gallery .padding-bottom-small { padding-bottom: 24px !important; } @media only screen and (min-width: 1084px) { .video-gallery .c-feature.f-align-right, .video-gallery .c-feature.f-align-left, .video-gallery .m-feature.f-align-right, .video-gallery .m-feature.f-align-left { min-height: 279px; } .video-gallery .c-feature.f-align-center, .video-gallery .m-feature.f-align-center { min-height: 400px; } .video-gallery .c-feature.f-align-right.f-image-priority picture, .video-gallery .c-feature.f-align-left.f-image-priority picture, .video-gallery .m-feature.f-align-right.f-image-priority picture, .video-gallery .m-feature.f-align-left.f-image-priority picture { width: 65%; } .video-gallery .m-feature.f-align-right.f-image-priority > div, .video-gallery .m-feature.f-align-left.f-image-priority > div { width: 35%; } .video-gallery .c-feature > div .c-heading, .video-gallery .m-feature > div .c-heading { font-size: 34px; line-height: 40px; padding: 38px 0 2px; font-weight: 600; padding-top: 0; } .video-gallery .c-feature.f-align-center > div, .video-gallery .m-feature.f-align-center > div { max-width: 798px; } } @media only screen and (min-width: 768px) and (max-width: 1083px) { .video-gallery .c-feature.f-align-right, .video-gallery .m-feature.f-align-right { min-height: 213px; } .video-gallery .c-feature.f-align-center, .video-gallery .m-feature.f-align-center { min-height: 300px; } } @media only screen and (min-width: 540px) and (max-width: 767px) { .video-gallery .c-feature.f-align-left, .video-gallery .c-feature.f-align-right, .video-gallery .m-feature.f-align-left, .video-gallery .m-feature.f-align-right { min-height: 211px; } .video-gallery .c-feature.f-align-center, .video-gallery .m-feature.f-align-center { min-height: 300px; } .video-gallery .m-feature.f-align-right > div { width: 490px; margin: 0 auto; text-align: center; } } .video-gallery .m-feature { display: block; width: 100%; clear: both; position: relative; height: auto; padding-left: 0; padding-right: 0; padding-top: 0; margin-top: 48px; float: none; } .video-gallery .m-feature picture { display: block; width: 100%; max-width: 100%; } .video-gallery .c-feature > div .c-heading, .video-gallery .m-feature > div .c-heading { font-size: 20px; line-height: 24px; padding: 35px 0 5px; font-weight: 600; opacity: .95; padding-top: 24px; margin-top: 20px; } .video-gallery .c-feature > div .c-paragraph, .video-gallery .m-feature > div .c-paragraph { font-size: 15px; line-height: 20px; padding: 12px 0 0; font-weight: 400; } .video-gallery .m-feature.f-align-center picture { width: 100%; } .video-gallery .c-feature.f-align-center > div, .video-gallery .m-feature.f-align-center > div { width: auto; padding: 0 5%; max-width: 100%; } .video-gallery .c-subheading-3 { padding: 8px 0 4px; font-weight: 600; } .video-gallery .c-heading-5, .video-gallery .c-subheading-3, .video-gallery .c-paragraph-1 { font-size: 20px; line-height: 24px; } .video-gallery .c-paragraph-3 { padding: 24px 0 0; font-weight: 400; } .video-gallery .c-subheading-5, .video-gallery .c-subheading-6, .video-gallery .c-paragraph-3, .video-gallery .c-paragraph-4 { font-size: 15px; line-height: 20px; } .video-gallery h1, .video-gallery h2, .video-gallery h3, .video-gallery h4, .video-gallery h5, .video-gallery h6, .video-gallery ol, .video-gallery ul, .video-gallery p { margin-top: 0; margin-bottom: 0; } .video-gallery [data-grid*="col-"] { float: left; min-height: 1px; } .video-gallery [data-grid~="container"], .video-gallery [data-grid*="col-"] { box-sizing: border-box; zoom: 1; } .video-gallery [data-grid~="container"]:after, .video-gallery [data-grid*="col-"]:after { clear: both; } .video-gallery [data-grid~="container"]:before, .video-gallery [data-grid~="container"]:after, .video-gallery [data-grid*="col-"]:before, .video-gallery [data-grid*="col-"]:after { content: " "; display: table; } .video-gallery [data-grid~="container"] { max-width: calc(1610px); margin: 0 auto; padding-left: 5%; padding-right: 5%; } .video-gallery .c-glyph.glyph-chevron-right:before { content: ""; } .video-gallery .c-glyph:before, .video-gallery .c-glyph:after, .video-gallery .c-glyph:hover:before, .video-gallery .c-glyph:hover:after { text-decoration: none; } .video-gallery .c-glyph:before, .video-gallery .c-glyph:after { font-family: "MWF-MDL2"; display: inline-block; text-decoration: none; } @keyframes fade-in-carousel { 0% { opacity: 0; display: none; } 50% { opacity: 0.5; display: block; } 100% { opacity: 1; display: block; } } @keyframes rise-fade-in { from { transform: translateY(120px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes scale-effect { 0% { opacity: 0; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes light-rise-fade-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes onFocusContent { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes offFocusContent { from { transform: translateY(0); opacity: 1; } to { transform: translateY(10px); opacity: 0; } } @keyframes bounce { from { transform: scale(2); } 20% { transform: scale(0.2); } to { transform: scale(1); } } @keyframes pulse { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(2); } } @keyframes pulse-shadow { from { box-shadow: 0px 0px 0px 0px rgba(34, 118, 250, 0.25); } to { box-shadow: 0px 0px 3px 25px rgba(34, 118, 250, 0); } } @keyframes scale2x { from { transform: scale(1); } to { transform: scale(2); } } @keyframes right-to-left-fade-in { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes left-to-right-fade-in { from { transform: translateX(-30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes on-focus-mobile { from { display: none; } to { display: contents; } } @keyframes off-focus-mobile { from { display: contents; } to { display: none; } } @keyframes slide-in-media { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } @keyframes initial-slide-in-media { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } .fade-in { opacity: 0; animation: fade-in 2s 0.3s forwards; } @keyframes text-grow-fade-in { 0% { opacity: 1; color: #2f2f2f; font-weight: inherit; font-size: inherit; line-height: inherit; } 20% { opacity: 0; color: #2f2f2f; font-weight: inherit; font-size: inherit; line-height: inherit; } 21% { opacity: 0; color: #000; font-weight: 600; font-size: 34px; line-height: 40px; } 100% { opacity: 1; color: #000; font-weight: 600; font-size: 34px; line-height: 40px; } } @keyframes text-fade-out-revert { 0% { opacity: 1; color: #000; font-weight: 600; font-size: 34px; line-height: 40px; } 20% { opacity: 0; color: #000; font-weight: 600; font-size: 34px; line-height: 40px; } 50% { opacity: 0; color: #2f2f2f; font-weight: inherit; font-size: inherit; line-height: inherit; } 100% { opacity: 1; color: #2f2f2f; font-weight: inherit; font-size: inherit; line-height: inherit; } } @keyframes text-grow-fade-in-mobile { 0% { opacity: 1; color: #2f2f2f; font-weight: inherit; font-size: inherit; line-height: inherit; } 20% { opacity: 0; color: #2f2f2f; font-weight: inherit; font-size: inherit; line-height: inherit; } 21% { opacity: 0; color: #000; font-weight: 600; font-size: 26px; line-height: 32px; } 100% { opacity: 1; color: #000; font-weight: 600; font-size: 26px; line-height: 32px; } } @keyframes text-fade-out-revert-mobile { 0% { opacity: 1; color: #000; font-weight: 600; font-size: 26px; line-height: 32px; } 20% { opacity: 0; color: #000; font-weight: 600; font-size: 26px; line-height: 32px; } 50% { opacity: 0; color: #2f2f2f; font-weight: inherit; font-size: inherit; line-height: inherit; } 100% { opacity: 1; color: #2f2f2f; font-weight: inherit; font-size: inherit; line-height: inherit; } } .video-gallery ol, .video-gallery ul { padding: 0; list-style: none; } .video-gallery .media-selector { position: relative; display: flex; flex-direction: row; } .video-gallery .media-selector .loadFeature { opacity: 0; animation: onFocusContent 1s 0s forwards; } .video-gallery .media-selector .loadFeature-mobile { opacity: 1; } .videogallery .sr-text{ border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } @media screen and (min-width: 540px) and (max-width: 1083px) { .video-gallery .media-selector { height: auto; flex-direction: column; } .video-gallery .media-selector li { opacity: 1; } .video-gallery .media-selector .c-list { margin: 0; } } @media screen and (max-width: 539px) { .video-gallery .media-selector { height: auto; flex-direction: column; } .video-gallery .media-selector .c-list { margin: 0; } } .video-gallery .media-selector__display { order: 1; margin: auto 0px; position: relative; } @media screen and (max-width: 1083px) { .video-gallery .media-selector__display { order: 0 !important; align-items: flex-start; margin: 0 0 18px 0; width: 100% !important; } } .video-gallery .media-selector__display__media { position: absolute; opacity: 0; background: transparent; z-index: 0; padding: auto 0; width: 100%; height: 100%; } .video-gallery .media-selector__display__media video, .video-gallery .media-selector__display__media>picture img { min-width: 100%; min-height: 100%; max-height: 100%; height: 100%; width: 100%; object-fit: cover; } .video-gallery .media-selector__display__media .c-progress { display: none; } .video-gallery .media-selector__display__media[aria-hidden="true"] .f-video-trigger { display: none; } .video-gallery .media-selector__display__media[aria-hidden="true"] .f-video-controls { display: none; } .video-gallery .media-selector__display .mount { opacity: 0; z-index: 2 !important; animation: fade-in 3s 0s forwards; } .video-gallery .media-selector__display .unmount { opacity: 1; z-index: 1 !important; animation: fade-out 3s 0s forwards; } .video-gallery .media-selector .media-selector__features__container { display: flex; justify-content: center; /* Need to verify if this is required*/ /* margin: auto 0;*/ order: 0; } @media screen and (max-width: 1083px) { .video-gallery .media-selector .media-selector__features__container { order: 1; width: 100% !important; } } .video-gallery .media-selector .media-selector__features__container .media-selector__features { order: 0; display: flex; margin: auto 0; width: 100%; } .video-gallery .media-selector .media-selector__features__container .media-selector__features .selection-bar { display: block; width: 10%; position: relative; } @media screen and (min-width: 539px) and (max-width: 1083px) { .video-gallery .media-selector .media-selector__features__container .media-selector__features .selection-bar { width: 15%; } } @media screen and (max-width: 539px) { .video-gallery .media-selector .media-selector__features__container .media-selector__features .selection-bar { width: 8%; } } .video-gallery .media-selector .media-selector__features__container .media-selector__features .selection-bar__position { opacity: 0; z-index: 10; position: absolute; width: 100%; height: auto; top: 12px; transition: top 0.75s ease-in-out; padding-left: 45%; padding-right: 40%; } @media screen and (min-width: 540px) and (max-width: 1083px) { .video-gallery .media-selector .media-selector__features__container .media-selector__features .selection-bar__position { padding-left: 88%; padding-right: 6%; } } @media screen and (max-width: 539px) { .video-gallery .media-selector .media-selector__features__container .media-selector__features .selection-bar__position { padding-left: 50%; padding-right: 30%; } } .video-gallery .media-selector .media-selector__features__container .media-selector__features .selection-bar__position__area { height: 0px; background-color: #0067B8; transition: height 0.75s ease-in-out; } @media (-ms-high-contrast: active) { .video-gallery .media-selector .media-selector__features__container .media-selector__features .selection-bar__position__area { border: 2px solid white; } } .video-gallery .media-selector .media-selector__features__container .media-selector__features ul { margin: 0; width: 90%; padding-right: 6%; padding-left: 1%; transition: width 0.75s ease-in; } @media screen and (min-width: 540px) and (max-width: 1083px) { .video-gallery .media-selector .media-selector__features__container .media-selector__features ul { padding-right: 10%; padding-left: 1.7%; width: 85%; } } @media screen and (max-width: 539px) { .video-gallery .media-selector .media-selector__features__container .media-selector__features ul { padding-left: 0; padding-right: 5%; width: 92%; } } .video-gallery .media-selector .media-selector__features__container .media-selector__features ul li { opacity: 0; margin: 0; border: none; padding: 18px 0; width: 100%; } @media screen and (max-width: 539px) { .video-gallery .media-selector .media-selector__features__container .media-selector__features ul li { padding: 12.5px 0; } } .video-gallery .media-selector .media-selector__features__container .media-selector__features .c-subheading-2 { padding: 0; text-align: left; } .video-gallery .media-selector .media-selector__features__container .media-selector__features .c-subheading-3 { padding: 0; text-align: left; } .video-gallery .media-selector .media-selector__features__container .media-selector__features .c-heading-3 { padding: 0; text-align: left; } .video-gallery .media-selector__content { position: relative; transition: height 1s ease-in; width: auto; display: block; } .video-gallery .media-selector__content.initialLoad { animation: rise-fade-in; animation-duration: 1s; animation-fill-mode: forwards; } .video-gallery .media-selector__content .feature-header { width: auto; text-align: left; } .video-gallery .media-selector__content .feature-header .feature-button { position: relative; display: inline-block; background: none; color: #2f2f2f; margin: 0; padding: 3px 5px 3px 5px; font: inherit; cursor: pointer; text-align: left !important; height: auto; transition: height .5s ease-out; border: 2px solid transparent; } @media screen and (max-width: 539px) { .video-gallery .media-selector__content .feature-header .feature-button { padding-bottom: 2px; } } @media (-ms-high-contrast: white-on-black) { .video-gallery .media-selector__content .feature-header .feature-button { border: 2px solid white; } } @media (-ms-high-contrast: black-on-white) { .video-gallery .media-selector__content .feature-header .feature-button { border: 2px solid transparent; } } .video-gallery .media-selector__content .feature-header .feature-button:focus { border: 2px solid #000; outline: 2px solid #000; } @media (-ms-high-contrast: active) { .video-gallery .media-selector__content .feature-header .feature-button:focus { border: 2px solid #0067B8; outline: 2px solid #0067B8; } } .video-gallery .media-selector__content .feature-header .feature-button:focus[init-selected="true"] { border: 2px solid transparent; outline: none; } .video-gallery .media-selector__content .feature-header .feature-button .chevron-wrapper { position: relative; white-space: normal; display: inline-block; } .video-gallery .media-selector__content .feature-header .feature-button .glyph-chevron-right { display: inline-block; position: absolute; margin-top: 2px; margin-left: 7px; font-size: 12px; color: #0067B8; } .video-gallery .media-selector__content .feature-header .feature-button.header-enlarge .glyph-chevron-right, .video-gallery .media-selector__content .feature-header .feature-button.header-active .glyph-chevron-right, .video-gallery .media-selector__content .feature-header .feature-button.header-enlarge-mobile .glyph-chevron-right, .video-gallery .media-selector__content .feature-header .feature-button.header-active-mobile .glyph-chevron-right { opacity: 0; } .video-gallery .media-selector__content__subcontent { height: auto; width: 100%; transition: height 1s ease; } .video-gallery .media-selector__content__subcontent .c-divider { margin: 2% 0; } .video-gallery .media-selector__content__subcontent p { text-align: left; padding: 3px 6px 0 6px; } [dir="rtl"] .video-gallery .media-selector .media-selector__features__container .media-selector__features .selection-bar__position { padding-right: 45%; padding-left: 40%; } @media screen and (min-width: 540px) and (max-width: 1083px) { [dir="rtl"] .video-gallery .media-selector .media-selector__features__container .media-selector__features .selection-bar__position { padding-right: 88%; padding-left: 6%; } } @media screen and (max-width: 539px) { [dir="rtl"] .video-gallery .media-selector .media-selector__features__container .media-selector__features .selection-bar__position { padding-right: 50%; padding-left: 30%; } } [dir="rtl"] .video-gallery .media-selector .media-selector__features__container .media-selector__features ul { padding-left: 6%; padding-right: 1%; } @media screen and (min-width: 540px) and (max-width: 1083px) { [dir="rtl"] .video-gallery .media-selector .media-selector__features__container .media-selector__features ul { padding-left: 10%; padding-right: 1.7%; } } @media screen and (max-width: 539px) { [dir="rtl"] .video-gallery .media-selector .media-selector__features__container .media-selector__features ul { padding-right: 0; padding-left: 5%; } } [dir="rtl"] .video-gallery .media-selector .media-selector__features__container .media-selector__features .c-subheading-2 { padding: 0; text-align: right; } [dir="rtl"] .video-gallery .media-selector .media-selector__features__container .media-selector__features .c-subheading-3 { padding: 0; text-align: right; } [dir="rtl"] .video-gallery .media-selector .media-selector__features__container .media-selector__features .c-heading-3 { padding: 0; text-align: right; } [dir="rtl"] .video-gallery .media-selector__content .feature-header { text-align: left; } [dir="rtl"] .video-gallery .media-selector__content .feature-header .feature-button { text-align: right !important; } [dir="rtl"] .video-gallery .media-selector__content .feature-header .feature-button .glyph-chevron-right { display: inline; position: absolute; margin-top: 2px; margin-left: 0px; margin-right: 7px; color: #0067B8; } [dir="rtl"] .video-gallery .media-selector__content__subcontent p { text-align: right; padding: 3px 6px 0 6px; } [data-grid~="col-8"] { width: 66.66667%; } [data-grid~="col-4"] { width: 33.33333%; } .video-gallery .aem-inline-video-component button.c-action-trigger.c-glyph:before { margin-left: 5px !important; }