/* ======================================================================== MASTERBRAND -COMMON ======================================================================== */ /*IMPORTS MAP OF FONTS TO IMPORT EACH FONT NEEDED*/ /*IMPORTS BASE GLOBAL - com.tccc.go.app.base*/ /* ======================================================================== RESET ======================================================================== */ html { -ms-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(204, 0, 0, 0); -webkit-text-size-adjust: 100%; } a:active { outline: none; } :focus { -moz-outline-style: none; outline: none; } a img { border: none; outline: none; } img { -ms-interpolation-mode: bicubic; } abbr[title] { border-bottom: 1px dotted; cursor: help; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } b, strong { font-weight: 700; } dfn { font-style: italic; } blockquote { border-left: 1px solid #c8c8c8; font-style: italic; margin: 0 0 1.5em -24px; padding-left: 24px; } blockquote:after, blockquote:before, q:after, q:after, q:before, q:before { content: none; } dd, dl { margin: 0 0 1.5em; } dt { font-weight: 400; } form { margin: 0; } fieldset { border-width: 0; margin-bottom: 0; padding: 0; } hr { border: 0; border-top: 1px solid #ccc; display: block; height: 1px; margin: 1em 0; padding: 0; } .ie7 img, .iem7 img { -ms-interpolation-mode: bicubic; } iframe { border: none; } input:-webkit-autofill { background-color: #e2e3df; background-image: none; color: #62696B; } ins { background-color: #f0f0f0; color: #000; text-decoration: none; } legend { border-width: 0; margin-left: -7px; padding: 0; } label { cursor: pointer; font-weight: 400; } .clearfix:after, .clearfix:before { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } li ol, li ul { font-size: 1em; margin: 0; } mark { background-color: #f0f0f0; color: #000; font-style: italic; font-weight: 700; } ol { display: compact; list-style-type: none; } address, dl, ol, p, ul { font-size: 1em; margin-bottom: 0; } p { hyphens: manual; text-align: justify; -webkit-hyphens: manual; -ms-hyphens: manual; -moz-hyphens: manual; } .auto-split-words p { -ms-hyphens: auto; hyphens: auto; -webkit-hyphens: auto; -webkit-hyphenate-character: \2010; -webkit-hyphenate-limit-after: 1; -webkit-hyphenate-limit-before: 3; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 0.875em; line-height: 1.5; } pre { white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } .seo { display: none; text-indent: -9999px; visibility: collapse; } small { font-size: 1em; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } ol, ul { list-style: none; margin: 0; padding: 0; } li { list-style: none; } ::-moz-selection, ::-webkit-selection, ::-moz-selection { background: transparent; color: #999; text-shadow: none; } ::-moz-selection, ::-webkit-selection, ::selection { background: transparent; color: #999; text-shadow: none; } ::-webkit-input-placeholder, input:-moz-placeholder { font-size: 0.875em; line-height: 1.4; } /* chrome webfont bug fix - temporary */ body { -webkit-animation-delay: 0.1s; -webkit-animation-duration: 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-name: fontfix; -webkit-animation-timing-function: linear; } /* ======================================================================== BASE COMMON MIXINS ======================================================================== */ /* ======================================================================== BASE COMMON MIXINS - BREAKPOINTS ======================================================================== */ /*MEDIAS QUERIES*/ /* Extra small devices (phones, less than 768px) */ /* Small devices (tablets, 768px and up) */ /* Medium devices (desktops, 992px and up) */ /* Extra small devices (phones, less than 768px) */ /* Small devices (tablets, 768px and up) */ /* Landscape */ /* Medium devices (desktops, 992px and up) */ /* Imports from Bourbon for hi-dpi, etc. */ /* Modular Medias Query - Generated ALL @medias */ /* ======================================================================== BASE COMMON MIXINS - FONT ======================================================================== */ /* ======================================================================== BASE COMMON MIXINS FOR GRIDS ======================================================================== */ /* ======================================================================== BASE COMMON MIXINS - COLLOR PALLETE ======================================================================== */ /* Firefox animations */ /* ======================================================================== BASE COMMON MIXINS ======================================================================== */ /*Opacity*/ /*Pre-loading*/ /*Linear Gradients*/ /*ARROW*/ /*BOX SHADOW*/ /*BORDER RADIUS */ /* Hide only visually, but have it available for screen readers: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ /* ======================================================================== BASE COMMON MIXINS - ARROW PNG ======================================================================== */ /* ======================================================================== BASE VARS THEME - DEFAULT ======================================================================== */ /*BASIC COLORS*/ /*SCALE GREY*/ /*COKE COLOR PALLETS*/ /*IMPORTS FONTS - BASE GLOBAL - com.tccc.go.app.base*/ @font-face { font-family: 'icomoon'; font-style: normal; font-weight: normal; src: url("/etc/designs/projectux/clientlib-common/common/fonts/icomoon/icomoon.eot?-djj7hl"); src: url("/etc/designs/projectux/clientlib-common/common/fonts/icomoon/icomoon.eot?#iefix-djj7hl") format("embedded-opentype"), url("/etc/designs/projectux/clientlib-common/common/fonts/icomoon/icomoon.woff?-djj7hl") format("woff"), url("/etc/designs/projectux/clientlib-common/common/fonts/icomoon/icomoon.ttf?-djj7hl") format("truetype"), url("/etc/designs/projectux/clientlib-common/common/fonts/icomoon/icomoon.svg?-djj7hl#icomoon") format("svg"); } @font-face { font-family: 'Coke-FM'; font-style: normal; font-weight: normal; src: url("/etc/designs/projectux/clientlib-common/common/fonts/coke-fm/Coke-FM.eot?-iaxvub"); src: url("/etc/designs/projectux/clientlib-common/common/fonts/coke-fm/Coke-FM.eot?#iefix-iaxvub") format("embedded-opentype"), url("/etc/designs/projectux/clientlib-common/common/fonts/coke-fm/Coke-FM.woff?-iaxvub") format("woff"), url("/etc/designs/projectux/clientlib-common/common/fonts/coke-fm/Coke-FM.ttf?-iaxvub") format("truetype"), url("/etc/designs/projectux/clientlib-common/common/fonts/coke-fm/Coke-FM.svg?-iaxvub#Coke-FM") format("svg"); } [class*=" icon-"], [class^="icon-"] { -moz-osx-font-smoothing: grayscale; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; font-family: 'Coke-FM'; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; } .icon-twitter:before { content: "\e602"; } .icon-facebook:before { content: "\e603"; } @font-face { font-family: 'cc-go'; font-style: normal; font-weight: normal; src: url("/etc/designs/projectux/clientlib-common/common/fonts/cc-go/cc-go.eot?grb1kt"); src: url("/etc/designs/projectux/clientlib-common/common/fonts/cc-go/cc-go.eot?#iefixgrb1kt") format("embedded-opentype"), url("/etc/designs/projectux/clientlib-common/common/fonts/cc-go/cc-go.woff?grb1kt") format("woff"), url("/etc/designs/projectux/clientlib-common/common/fonts/cc-go/cc-go.ttf?grb1kt") format("truetype"), url("/etc/designs/projectux/clientlib-common/common/fonts/cc-go/cc-go.svg?grb1kt#cc-go") format("svg"); } [class*=" icon-cc-"], [class^="icon-"] { -moz-osx-font-smoothing: grayscale; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; font-family: 'cc-go'; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; } [data-icon]:before { -webkit-font-smoothing: antialiased; content: attr(data-icon); font-family: 'cc-go'; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; } .icon-cc-close:before { content: "\e601"; } .icon-cc-arrowdownsharp:before { content: "\e600"; } .icon-cc-first:before { content: "\e605"; } .icon-cc-previous:before { content: "\e606"; } .icon-cc-next:before, .navigation-bar-slideout__list-item-link--next:before { content: "\e604"; } .icon-cc-last:before { content: "\e607"; } @font-face { font-family: 'FM-Player'; font-style: normal; font-weight: normal; src: url("/etc/designs/projectux/clientlib-common/common/fonts/coke-fm-player/Coke-FM-Player.eot?-jv7yoa"); src: url("/etc/designs/projectux/clientlib-common/common/fonts/coke-fm-player/Coke-FM-Player.eot?#iefix-jv7yoa") format("embedded-opentype"), url("/etc/designs/projectux/clientlib-common/common/fonts/coke-fm-player/Coke-FM-Player.woff?-jv7yoa") format("woff"), url("/etc/designs/projectux/clientlib-common/common/fonts/coke-fm-player/Coke-FM-Player.ttf?-jv7yoa") format("truetype"), url("/etc/designs/projectux/clientlib-common/common/fonts/coke-fm-player/Coke-FM-Player.svg?-jv7yoa#FM-Player") format("svg"); } [class*=" fm-icon-"], [class^="fm-icon-"] { -moz-osx-font-smoothing: grayscale; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; font-family: 'FM-Player'; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; } .fm-icon-clock:before { content: "\e600"; } .fm-icon-download:before { content: "\e601"; } .fm-icon-embed:before { content: "\e602"; } .fm-icon-facebook:before { content: "\e603"; } .fm-icon-hd:before { content: "\e604"; } .fm-icon-play:before { content: "\e605"; } .fm-icon-popup:before { content: "\e606"; } .fm-icon-twitter:before { content: "\e607"; } .fm-icon-volume:before { content: "\e608"; } .fm-icon-thumbsDown:before { content: "\e609"; } .fm-icon-thumbsUp:before { content: "\e60b"; } .fm-icon-pause:before { content: "\e60d"; } .fm-icon-close:before { content: "\e60a"; } /* IMPORT CUSTOM FONTS */ /*IMPORTS BRAND*/ /* ======================================================================== CUSTOM DESIGN TEMPLATE ======================================================================== */ /* Variables starting with '$user-' are the ones that contain user customized information stored in datastore */ /* This is the most basic color configuration. It must be filled either with - raw values (hex, rgb or rgba) - or basic constants, such as $DefaultWhite or $DefaultBlack. Check the _theme-default.scss file (com.tccc.go.app.base) for the complete list of constants. */ /* Below here, the maps needed for the css generation will be created with either the customized value, or a default value (extracted from one brand) */ /* Merges the basic color pallete into the advanced one. The is necessary so the advanced map can use the already defined variables in the basic using the 'get-map-nullable-arg()' function */ /* We'll get the texts configuration from the object populated from datastore and get the fonts needed for this component. */ /*PAGE AND TEMPLATES*/ /* ======================================================================== MASTERBRAND: PAGE ======================================================================== */ /*STRUCTURE*/ /* ======================================================================== MASTERBRAND: PAGE - COMMON PAGE: STRUCTURE ======================================================================== */ /* :START VARIABLES */ /* #FontFamily */ /* #FontSize */ /* #FontStyle */ /* #FontWeight */ /* #Color */ /* #LineHeight */ /* #BackgroundColor */ /* :END VARIABLES */ body, html { background: #ffffff; height: 100%; margin: 0; padding: 0; position: relative; width: 100%; } /* TYPOGRAPHY ====================================== */ /* See also fonts.less */ body { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 16px; color: #000000; position: relative; text-align: left; width: auto; } h1, h2, h3, h4, h5, h6 { margin: 0 auto; padding: 0; text-align: center; } h1.alignleft, h2.alignleft, h3.alignleft, h4.alignleft, h5.alignleft, h6.alignleft { margin: 0; text-align: left; } .h1, h1 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; font-size: 54px; line-height: 1.2em; color: #3a3a3a; } .h2, h2 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; font-size: 30px; line-height: 1.2em; color: #3a3a3a; } .h3, h3 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; font-size: 20px; line-height: 1.2em; color: #3a3a3a; } .h4, h4 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: italic; font-size: 15px; line-height: 1.2em; color: #3a3a3a; } .h5, h5 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: italic; font-size: 14px; line-height: 1.2em; color: #3a3a3a; } .h6, h6 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: italic; font-size: 12px; line-height: 1.2em; color: #3a3a3a; } .brand-primary { color: #009639; } hr.spacer { border-top: 0; margin: 1.2em 0; } p { font-style: normal; font-size: 16px; line-height: 16px; color: #000000; margin: 0 0 10px; } .item p { margin: 0; } a { color: #009639; font-weight: normal; opacity: 1; position: relative; text-decoration: none; transition: all 0.2s ease-out; } a:hover { color: #006342; transition: all 0.1s ease-in; } a[href*="http"] { color: #00a9e0; } a[href*="http"]:hover { color: #003087; } ul { list-style: none; } ul li, ul li a { list-style: none; } strong { font-weight: bold; } .address, address { float: left; font-style: normal; margin: 0 0 20px; width: 100%; } .address h4, address h4 { float: left; padding: 0 !important; width: 100%; } .centered { margin-left: auto; margin-right: auto; text-align: center; } .fleft { float: left; margin-left: 0; text-align: left; } /* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. j.mp/bestclearfix */ .clearfix:after, .clearfix:before { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ .clearfix { zoom: 1; } /* badges */ .badge { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; color: #ffffff; -webkit-mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-circle.svg); mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-circle.svg); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0; background: #009639; display: inline-block; padding: 4px 0; text-align: center; width: 24px; } /* 0px =========================== */ @media (min-width: 0) { a.hide-mobile { display: none; } .hide-mobile-tablet { display: none; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { a.hide-mobile { display: block; } .hide-tablet, .hide-tablet-desktop { display: none; } } /* =============================== */ /* 1024px ======================== */ @media (min-width: 1024px) { .hide-mobile-tablet, .hide-tablet { display: block; } .hide-desktop { display: none; } } /* STRUCTURAL ================= */ body.cq-wcm-edit div.section { display: block; } body.cq-wcm-edit div.section:after, body.cq-wcm-edit div.section:before { clear: both; content: " "; display: table; } section { display: block; float: left; height: auto; overflow: hidden; padding: 20px 0 0; width: 100%; } section:after, section:before { clear: both; content: " "; display: table; } section.no-top-pad { padding-top: 0; } @media screen and (max-width: 767px) { .main .slider-wrap { overflow: hidden; } } @media screen and (min-width: 0px) { div.has-bg-img, section.has-bg-img { background-position: top center; background-repeat: repeat-x; } } .dark-bg.has-bg-img .subheadline, .dark-bg.has-bg-img h2 { color: #ffffff; } .dark-bg.has-bg-img .item .elm-body, .dark-bg.has-bg-img .item .item-txt { background-color: transparent; } .dark-bg.has-bg-img .item .elm-body h1, .dark-bg.has-bg-img .item .elm-body h2, .dark-bg.has-bg-img .item .elm-body h3, .dark-bg.has-bg-img .item .elm-body h4, .dark-bg.has-bg-img .item .elm-body h5, .dark-bg.has-bg-img .item .elm-body h6, .dark-bg.has-bg-img .item .elm-body p, .dark-bg.has-bg-img .item .item-txt h1, .dark-bg.has-bg-img .item .item-txt h2, .dark-bg.has-bg-img .item .item-txt h3, .dark-bg.has-bg-img .item .item-txt h4, .dark-bg.has-bg-img .item .item-txt h5, .dark-bg.has-bg-img .item .item-txt h6, .dark-bg.has-bg-img .item .item-txt p { color: #ffffff; } .dark-bg.has-bg-img .item.hover a .elm-body, .dark-bg.has-bg-img .item.hover a .item-txt, .dark-bg.has-bg-img .item:hover a .elm-body, .dark-bg.has-bg-img .item:hover a .item-txt { background-color: #ffffff; } .dark-bg.has-bg-img .item.hover a .elm-body h1, .dark-bg.has-bg-img .item.hover a .elm-body h2, .dark-bg.has-bg-img .item.hover a .elm-body h3, .dark-bg.has-bg-img .item.hover a .elm-body h4, .dark-bg.has-bg-img .item.hover a .elm-body h5, .dark-bg.has-bg-img .item.hover a .elm-body h6, .dark-bg.has-bg-img .item.hover a .elm-body p, .dark-bg.has-bg-img .item.hover a .item-txt h1, .dark-bg.has-bg-img .item.hover a .item-txt h2, .dark-bg.has-bg-img .item.hover a .item-txt h3, .dark-bg.has-bg-img .item.hover a .item-txt h4, .dark-bg.has-bg-img .item.hover a .item-txt h5, .dark-bg.has-bg-img .item.hover a .item-txt h6, .dark-bg.has-bg-img .item.hover a .item-txt p, .dark-bg.has-bg-img .item:hover a .elm-body h1, .dark-bg.has-bg-img .item:hover a .elm-body h2, .dark-bg.has-bg-img .item:hover a .elm-body h3, .dark-bg.has-bg-img .item:hover a .elm-body h4, .dark-bg.has-bg-img .item:hover a .elm-body h5, .dark-bg.has-bg-img .item:hover a .elm-body h6, .dark-bg.has-bg-img .item:hover a .elm-body p, .dark-bg.has-bg-img .item:hover a .item-txt h1, .dark-bg.has-bg-img .item:hover a .item-txt h2, .dark-bg.has-bg-img .item:hover a .item-txt h3, .dark-bg.has-bg-img .item:hover a .item-txt h4, .dark-bg.has-bg-img .item:hover a .item-txt h5, .dark-bg.has-bg-img .item:hover a .item-txt h6, .dark-bg.has-bg-img .item:hover a .item-txt p { color: #009639; } .dark-bg.has-bg-img .item.flex-active-slide a .item-txt h1, .dark-bg.has-bg-img .item.flex-active-slide a .item-txt h2, .dark-bg.has-bg-img .item.flex-active-slide a .item-txt h3, .dark-bg.has-bg-img .item.flex-active-slide a .item-txt h4, .dark-bg.has-bg-img .item.flex-active-slide a .item-txt h5, .dark-bg.has-bg-img .item.flex-active-slide a .item-txt h6, .dark-bg.has-bg-img .item.flex-active-slide a .item-txt p { color: #009639; } .dark-bg.has-bg-img .item.flex-active-slide div.no-hover .item-txt { background-color: transparent; } .dark-bg.has-bg-img .item.flex-active-slide div.no-hover .item-txt h3, .dark-bg.has-bg-img .item.flex-active-slide div.no-hover .item-txt p { color: #ffffff; } .mild-bg.has-bg-img .elm-body, .mild-bg.has-bg-img .item-txt { background-color: #ffffff; } .mild-bg.has-bg-img .item.hover .elm-body, .mild-bg.has-bg-img .item.hover .item-txt, .mild-bg.has-bg-img .item:hover .elm-body, .mild-bg.has-bg-img .item:hover .item-txt { background-color: #ffffff; } @media screen and (min-width: 481px) { .mild-bg.has-bg-img .textwell-content { background-color: #ffffff; } } .light-bg.has-bg-img .item a .elm-body, .light-bg.has-bg-img .item a .item-txt, .light-bg.has-bg-img .item div.no-hover .elm-body, .light-bg.has-bg-img .item div.no-hover .item-txt { background-color: transparent; } @media (min-width: 0) { .light-bg.has-bg-img { /* non-hover */ /* hover */ } .light-bg.has-bg-img .grid-wrap .item a .item-txt h3, .light-bg.has-bg-img .grid-wrap .item a .item-txt p, .light-bg.has-bg-img .item a .elm-body h3, .light-bg.has-bg-img .item a .elm-body p, .light-bg.has-bg-img .item a .item-txt h3, .light-bg.has-bg-img .item a .item-txt p, .light-bg.has-bg-img .item div.no-hover .elm-body h3, .light-bg.has-bg-img .item div.no-hover .elm-body p, .light-bg.has-bg-img .item div.no-hover .item-txt h3, .light-bg.has-bg-img .item div.no-hover .item-txt p { color: #000000; } .light-bg.has-bg-img .grid-wrap .item:hover a .item-txt h3, .light-bg.has-bg-img .grid-wrap .item:hover a .item-txt p, .light-bg.has-bg-img .item:hover a .elm-body h3, .light-bg.has-bg-img .item:hover a .elm-body p, .light-bg.has-bg-img .item:hover a .item-txt h3, .light-bg.has-bg-img .item:hover a .item-txt p { color: #009639; } } .main { float: left; width: 100%; } .main p { text-align: center; } .main .brands-shelf, .main .four-col-shelf, .main .shelf, .main .three-col-shelf { display: none; float: left; width: 100%; } p.copy { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 16px; line-height: 1.5em; float: left; margin: 5px 0; text-align: left; width: 100%; } /* control-bg takes on the background color of it's target via js */ .control-bg { float: left; height: auto; width: 100%; } /* UTILS ================= */ #container { padding: 35px 35px 0; } .disabled { opacity: 0.4; } .nested-accordion #sitemapsearchform { overflow: visible; } .nested-accordion #sitemapsearchform #search { text-transform: none; } .nested-accordion #sitemapsearchform .nav-search-do-search-button-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /*OTHERS*/ /* ======================================================================== MASTERBRAND: PAGE - COMMON PAGE: BACKGROUND ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #LineHeight */ /* Background*/ /* :END VARIABLES */ .control-bg { float: left; height: auto; width: 100%; } /* demo toggles */ .section-background-toggle { background: #ffffff; color: #ffffff; float: none; margin-top: 10px; padding: 0; width: auto; } .section-background-toggle .main { float: none; left: auto; margin-left: auto; padding: 10px; width: auto; width: 100%; } .section-background-toggle form { display: -ms-flexbox; display: flex; margin: 0; } .section-background-toggle form fieldset label { font-size: 14px; } .section-background-toggle .is-direction-toggle, .section-background-toggle .section-background-toggle-controls { width: auto; } /* 0px =========================== */ @media (min-width: 0) { .section-background-toggle-controls fieldset input, .section-background-toggle-controls fieldset label { display: inline; float: none; margin: 0; padding: 0; width: 18px; } .is-direction-toggle *, .section-background-toggle * { box-sizing: border-box; } } @media screen and (min-width: 0) and (max-width: 480px) { .section-background-toggle .main { display: block; } .section-background-toggle .main form { display: block; padding: 0; } .section-background-toggle .main fieldset { float: left; } .section-background-toggle .main fieldset label { font-size: 12px; line-height: 1em; } .section-background-toggle .main fieldset:first-child { float: none; } .section-background-toggle .is-direction-toggle, .section-background-toggle .section-background-toggle-controls { height: 40px; } .section-background-toggle .is-direction-toggle fieldset:first-child, .section-background-toggle .section-background-toggle-controls fieldset:first-child { width: 100%; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { .section-background-toggle-controls fieldset { display: inline; } .section-background-toggle-controls fieldset label { margin-right: 6px; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .section-background-toggle .main { display: block; } .section-background-toggle .main:after, .section-background-toggle .main:before { clear: both; content: " "; display: table; } .section-background-toggle .is-direction-toggle, .section-background-toggle .section-background-toggle-controls { float: left; } } /* =============================== */ /* 1024px ======================== */ /* =============================== */ /* 1200px ======================== */ /* =============================== */ /* PRINT ======================== */ /* =============================== */ /* ======================================================================== MASTERBRAND: PAGE - COMMON PAGE: FORM ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #FontFamily */ /* #FontStyle */ /* #FontWeight */ /* #Color */ /* #BorderColor */ /* #LineHeight */ /* #Background */ /* #Border */ /* #BackgroundColor */ /* :END VARIABLES */ /* alerts */ .alert { border: 5px solid #656565; color: #656565; margin: 10px 0; padding: 10px; } .alert p { font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .alert-error { border-color: #009639; color: #009639; } input, textarea, select, meter, progress { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; } form input[type="email"], form input[type="password"], form input[type="tel"], form input[type="number"], form input[type="text"], form textarea { -moz-appearance: none; -webkit-appearance: none; background: #ffffff; border: none; box-sizing: border-box; color: #656565; font-size: 15px; display: block; margin: 0 0 10px; padding: 10px 5%; width: 100%; } form select { border-top: 1px solid #cbcbcb; box-sizing: border-box; width: 100%; -moz-background-clip: padding; -moz-border-radius: 0px; -webkit-background-clip: padding-box; -webkit-border-radius: 0px; background-clip: padding-box; border-radius: 0px; border-left: 1px solid #cbcbcb; color: #656565; font-size: 15px; margin: 0 0 10px; } form .frm-select { position: relative; } form textarea { height: 200px; padding-top: 10px; } form input[type="checkbox"] { -webkit-appearance: none; background: #ffffff; border: solid 5px #cbcbcb; cursor: pointer; display: inline-block; float: left; font-size: 15px; height: 20px; line-height: 1em; margin: 0 0.25em 0 0; padding: 0; vertical-align: text-top; width: 20px; -moz-background-clip: padding; -moz-border-radius: 0px; -webkit-background-clip: padding-box; -webkit-border-radius: 0px; background-clip: padding-box; border-radius: 0px; } form input[type="radio"] { cursor: pointer; float: left; font-size: 15px; height: 20px; line-height: 1em; margin: 0 0.25em 0 0; padding: 0; vertical-align: text-top; width: 20px; } form input[type="checkbox"]:checked { background: url("/etc/designs/P/5631383682678784/clientlib/img/form-check.png") no-repeat 2px 2px; border: solid 1px #000000; } form .form-labels { float: left; height: auto; margin: 0 0 10px; width: 100%; } form .form-labels label { display: block; margin-left: 30px; text-align: left; width: auto; } form .form-labels .right { float: right; text-align: right; width: auto; } form .form-labels-tight { float: left; height: auto; margin: 0 0 5px; width: 100%; } form .form-labels-tight label { float: left; text-align: left; width: auto; } .light-bg input[type="email"], .light-bg input[type="password"], .light-bg input[type="tel"], .light-bg input[type="number"], .light-bg input[type="text"], .light-bg textarea { background: #eee; } .prel { position: relative; } /* Hide only visually, but have it available for screen readers: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .visuallyhidden, .share-controls .headline { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: https://www.drupal.org/node/897638 */ .visuallyhidden.focusable:active, .share-controls .focusable.headline:active, .visuallyhidden.focusable:focus, .share-controls .focusable.headline:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } label[for=filter-dropdown] { color: #474747; font-size: 12px; } .filter-dropdown, .livefyre-filter-dropdown { background-color: #ffffff; border: 1px solid #474747; } .filter-dropdown:focus, .livefyre-filter-dropdown:focus { box-shadow: 2px 2px rgba(0, 0, 0, 0.5); outline: none; } .form-wrap { margin: 0 auto; width: 280px; } .form-wrap h4 { margin: 20px 0 10px; } .form-label, label { font-size: 14px; } span.required { color: #ffd100; } fieldset.birthday { margin: 5px 0; padding: 0; } .frm-select-small { float: left; margin-right: 10px; width: 85px; } .frm-select-small-last { float: left; margin-right: 0; width: 90px; } .commenttext { margin: 10px 0; } .commenttext textarea { height: 90px; } input[type="email"], input[type="tel"], input[type="number"], input[type="text"], select { /* Safari/Chrome, other WebKit */ /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ border-radius: 0; font-family: inherit; margin: 0; /* for Safari */ } select { -moz-appearance: none; /* Necessary to customize dropdown arrow in WebKits*/ -webkit-appearance: none; appearance: none; background-image: url("/etc/designs/projectux/clientlib-common/common/img/arrow-drop-down.svg"); background-position: 98% center; background-repeat: no-repeat; border: 1px inset #cbcbcb; line-height: 1; padding: 10px 5%; text-indent: 0.01em; text-overflow: ""; } [dir="rtl"] select { background-position: 2% center; } /* 0px =========================== */ @media (min-width: 0) { .section-form { box-sizing: border-box; float: left; height: auto; padding: 10px; width: 100%; } .section-form .main { left: 0; margin: 0; width: 100%; } .section-form .main a.btn-fb-login { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 15px; color: #ffffff; background: #37589B; cursor: pointer; display: block; margin-bottom: 5px; padding: 20px 0; width: 100%; text-align: center; text-transform: uppercase; transition: all 0.2s ease-out; } .section-form .main a.btn-fb-login:hover { opacity: 0.8; transition: all 0.1s ease-in; } .section-form .main .label-top { color: #656565; float: left; font-size: 16px; height: auto; margin: 10px 0; text-align: center; width: 100%; } .section-form .main .form-inline-labels { float: left; font-size: 13px; height: auto; margin: 0 0 8px; width: 100%; } .section-form .main .form-inline-labels input, .section-form .main .form-inline-labels textarea { color: #000000; float: left; text-indent: 4px; width: 20px; } .section-form .main .form-inline-labels label { float: left; padding-top: 2px; width: auto; } .section-form .main .form-inline-labels a.right { float: right; } .section-form .main .form-inline-labels a.left { float: left; width: 100%; } .section-form .main .form-top-labels { float: left; font-size: 13px; height: auto; margin: 0 0 8px; width: 100%; } .section-form .main .form-top-labels input, .section-form .main .form-top-labels textarea { color: #000000; float: left; text-indent: 4px; width: 100%; } .section-form .main .form-top-labels label { float: left; padding-top: 2px; text-align: left; width: 100%; } .section-form .main .form-top-labels a.right { float: right; } .section-form .main .form-top-labels a.left { float: left; width: 100%; } } /* ======================================================================== MASTERBRAND: PAGE - COMMON PAGE: GRID ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #FontStyle */ /* #FontWeight */ /* #Color */ /* #LineHeight */ /* #Border */ /* #BackgroundColor */ /* :END VARIABLES */ .items-left { text-align: center; } .dark-bg.has-bg-img .items-left { color: #ffffff; } .items-filtering { margin-bottom: 20px; text-align: center; } .items-filtering label, .items-filtering span { font-size: 14px; font-weight: bold; margin-right: 5px; } .dark-bg.has-bg-img .items-filtering label, .dark-bg.has-bg-img .items-filtering span { color: #ffffff; } .items-filtering select { background-color: #eaeaea; border: 2px solid #9d9d9d; padding: 10px 25px 10px 10px; } .dark-bg .items-filtering select, .mild-bg .items-filtering select { background-color: #ffffff; } .items-filtering select option { margin: 0; padding: 0; width: auto; } .multi-columns { margin: 0 auto; width: 100%; } .multi-columns .items .item a .item-txt h3, .multi-columns .items .item a .item-txt p, .multi-columns .items .item div.no-hover .item-txt h3, .multi-columns .items .item div.no-hover .item-txt p { font-size: 14px; } .multi-columns .plus-shelf-wrap a { margin-top: 30px; } .multi-columns .item div.no-hover { cursor: default; } .multi-columns .item a { cursor: pointer; } .multi-columns .item a, .multi-columns .item div.no-hover { display: block; -ms-flex: 1; flex: 1; -ms-flex-direction: column; flex-direction: column; margin: 0 auto; width: 100%; } .multi-columns .item a .inset-border, .multi-columns .item div.no-hover .inset-border { background-color: #eeeeee; min-height: 50px; } .multi-columns .item a:hover, .multi-columns .item div.no-hover:hover { background: none; } .multi-columns .item a .bar-no-img, .multi-columns .item div.no-hover .bar-no-img { position: relative; } .multi-columns .item a img.item-image, .multi-columns .item div.no-hover img.item-image { height: 100%; width: 100%; } .multi-columns .item a img.video-bg-image, .multi-columns .item div.no-hover img.video-bg-image { float: none; height: 100%; opacity: 0; width: 100%; } .multi-columns .item a iframe, .multi-columns .item div.no-hover iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .multi-columns .item a .item-txt, .multi-columns .item div.no-hover .item-txt { display: block; float: none; margin: 0; padding: 0 15px 5px; } .multi-columns .item a .item-txt .source, .multi-columns .item div.no-hover .item-txt .source { color: #4b4b4b; display: inline-block; font-size: 11px; font-weight: bold; line-height: 12px; padding-top: 7px; } .multi-columns .item a .item-txt h3, .multi-columns .item div.no-hover .item-txt h3 { color: #000000; font-size: 18px; font-weight: bold; margin: 5px 0; } .dark-bg.has-bg-img .multi-columns .item a .item-txt h3, .dark-bg.has-bg-img .multi-columns .item div.no-hover .item-txt h3 { color: #000000; } .multi-columns .item a .item-txt p, .multi-columns .item div.no-hover .item-txt p { color: #000000; font-size: 16px; margin: 5px 0; } .dark-bg.has-bg-img .multi-columns .item a .item-txt p, .dark-bg.has-bg-img .multi-columns .item div.no-hover .item-txt p { color: #000000; } .multi-columns .item a:hover .item-txt .source, .multi-columns .item a:hover .item-txt h1, .multi-columns .item a:hover .item-txt h2, .multi-columns .item a:hover .item-txt h3, .multi-columns .item a:hover .item-txt h4, .multi-columns .item a:hover .item-txt h5, .multi-columns .item a:hover .item-txt h6, .multi-columns .item a:hover .item-txt p { transition: all 0.2s ease-in; color: #009639; } .multi-columns .item a:hover .item-txt p { color: #000000; } .dark-bg .multi-columns .item a:hover .item-txt, .light-bg .multi-columns .item a:hover .item-txt, .mild-bg .multi-columns .item a:hover .item-txt { background: none; } .multi-columns .item a:hover .bar { transition: all 0.2s ease-in; background: #009639; } .light-bg .multi-columns .item { background: #eee; } .dark-bg .multi-columns .item, .mild-bg .multi-columns .item { background: #fff; } .multi-columns .btn, .multi-columns .gallery-main-carousel__overlay-action { font-weight: bold; } .light-bg .multi-columns .btn, .light-bg .multi-columns .gallery-main-carousel__overlay-action { background: #eee; } .dark-bg .multi-columns .btn, .dark-bg .multi-columns .gallery-main-carousel__overlay-action, .mild-bg .multi-columns .btn, .mild-bg .multi-columns .gallery-main-carousel__overlay-action { background: #fff; } .multi-columns select:focus, .multi-columns ul a:focus { outline: 1px dotted #eeeeee; } .section-grid-4-col { overflow: visible; } .section-grid-4-col.has-bg-img.dark-bg .headline { color: #ffffff; } .section-grid-4-col a:focus, .section-grid-4-col select:focus { outline: 1px dotted #b9b9b9; } .flex-grid { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-box__headline.flex-box { -ms-flex: 1 100%; flex: 1 100%; max-width: 100%; width: 100%; } .flex-box { padding: 0% 0% 2%; } @media (min-width: 768px) { .flex-box { padding: 0; } } .flex-box:first-child:not(.flex-box__headline) { margin: 0 2%; } @media (min-width: 768px) { .flex-box:first-child:not(.flex-box__headline) { margin: 0 1% 0 2%; } } .flex-box:nth-child(2) { margin: 0 2%; } @media (min-width: 768px) { .flex-box:nth-child(2) { margin: 0 1% 0 2%; } } .flex-box:nth-child(3) { margin: 2%; } @media (min-width: 768px) { .flex-box:nth-child(3) { margin: 0 2% 0 1%; } } @media (min-width: 768px) { .f-6:first-child:not(.flex-box__headline), .f-6:nth-child(2) { margin: 0 1% 20px 2%; } } @media screen and (min-width: 769px) { .f-6:nth-child(3) { margin: 0 2% 20px 1%; } } .flex-box { -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; -ms-flex: auto; flex: auto; width: 100%; } @media (min-width: 768px) { .flex-box { -ms-flex: 1; flex: 1; height: auto; } } .f-1 { -ms-flex: 1; flex: 1; } @media (max-width: 769px) { .f-1 { -ms-flex: auto; flex: auto; } } .f-2 { -ms-flex: 2; flex: 2; } @media (max-width: 769px) { .f-2 { -ms-flex: auto; flex: auto; } } .f-3 { -ms-flex: 3; flex: 3; } @media (max-width: 769px) { .f-3 { -ms-flex: auto; flex: auto; } } .f-4 { -ms-flex: 4; flex: 4; } @media (max-width: 769px) { .f-4 { -ms-flex: auto; flex: auto; } } .f-5 { -ms-flex: 5; flex: 5; } @media (max-width: 769px) { .f-5 { -ms-flex: auto; flex: auto; } } .f-6 { -ms-flex: 6; flex: 6; } @media (max-width: 769px) { .f-6 { -ms-flex: auto; flex: auto; } } .f-7 { -ms-flex: 7; flex: 7; } @media (max-width: 769px) { .f-7 { -ms-flex: auto; flex: auto; } } .f-8 { -ms-flex: 8; flex: 8; } @media (max-width: 769px) { .f-8 { -ms-flex: auto; flex: auto; } } .f-9 { -ms-flex: 9; flex: 9; } @media (max-width: 769px) { .f-9 { -ms-flex: auto; flex: auto; } } .f-10 { -ms-flex: 10; flex: 10; } @media (max-width: 769px) { .f-10 { -ms-flex: auto; flex: auto; } } .f-11 { -ms-flex: 11; flex: 11; } @media (max-width: 769px) { .f-11 { -ms-flex: auto; flex: auto; } } .f-12 { -ms-flex: 12; flex: 12; } @media (max-width: 769px) { .f-12 { -ms-flex: auto; flex: auto; } } @media screen and (max-width: 767px) { .f-1.flex-box__mobile--first { -ms-flex-order: 1; order: 1; } } @media screen and (max-width: 767px) { .f-1:not(.flex-box__mobile--first) { -ms-flex-order: 2; order: 2; } } @media screen and (max-width: 767px) { .f-2.flex-box__mobile--first { -ms-flex-order: 1; order: 1; } } @media screen and (max-width: 767px) { .f-2:not(.flex-box__mobile--first) { -ms-flex-order: 2; order: 2; } } @media screen and (max-width: 767px) { .f-3.flex-box__mobile--first { -ms-flex-order: 1; order: 1; } } @media screen and (max-width: 767px) { .f-3:not(.flex-box__mobile--first) { -ms-flex-order: 2; order: 2; } } @media screen and (max-width: 767px) { .f-4.flex-box__mobile--first { -ms-flex-order: 1; order: 1; } } @media screen and (max-width: 767px) { .f-4:not(.flex-box__mobile--first) { -ms-flex-order: 2; order: 2; } } @media screen and (max-width: 767px) { .f-5.flex-box__mobile--first { -ms-flex-order: 1; order: 1; } } @media screen and (max-width: 767px) { .f-5:not(.flex-box__mobile--first) { -ms-flex-order: 2; order: 2; } } @media screen and (max-width: 767px) { .f-6.flex-box__mobile--first { -ms-flex-order: 1; order: 1; } } @media screen and (max-width: 767px) { .f-6:not(.flex-box__mobile--first) { -ms-flex-order: 2; order: 2; } } @media screen and (max-width: 767px) { .f-7.flex-box__mobile--first { -ms-flex-order: 1; order: 1; } } @media screen and (max-width: 767px) { .f-7:not(.flex-box__mobile--first) { -ms-flex-order: 2; order: 2; } } @media screen and (max-width: 767px) { .f-8.flex-box__mobile--first { -ms-flex-order: 1; order: 1; } } @media screen and (max-width: 767px) { .f-8:not(.flex-box__mobile--first) { -ms-flex-order: 2; order: 2; } } @media screen and (max-width: 767px) { .f-9.flex-box__mobile--first { -ms-flex-order: 1; order: 1; } } @media screen and (max-width: 767px) { .f-9:not(.flex-box__mobile--first) { -ms-flex-order: 2; order: 2; } } @media screen and (max-width: 767px) { .f-10.flex-box__mobile--first { -ms-flex-order: 1; order: 1; } } @media screen and (max-width: 767px) { .f-10:not(.flex-box__mobile--first) { -ms-flex-order: 2; order: 2; } } @media screen and (max-width: 767px) { .f-11.flex-box__mobile--first { -ms-flex-order: 1; order: 1; } } @media screen and (max-width: 767px) { .f-11:not(.flex-box__mobile--first) { -ms-flex-order: 2; order: 2; } } @media screen and (max-width: 767px) { .f-12.flex-box__mobile--first { -ms-flex-order: 1; order: 1; } } @media screen and (max-width: 767px) { .f-12:not(.flex-box__mobile--first) { -ms-flex-order: 2; order: 2; } } .no-flexbox .flex-grid { display: table; padding: 30px 1%; width: 98%; } .no-flexbox .flex-box { display: table-cell; margin: 0; vertical-align: top; } .no-flexbox .flex-box__headline { caption-side: top; display: table-caption; padding: 0; width: 100%; } .no-flexbox .flex-box__headline h2.headline { font-style: italic; font-weight: 900; max-width: 100%; text-align: center; width: 100%; } .no-flexbox .f-3 { width: 100%; } @media (min-width: 768px) { .no-flexbox .f-3 { width: 600px; } } .no-flexbox .f-4 { width: 100%; } @media (min-width: 768px) { .no-flexbox .f-4 { width: 300px; } } .no-flexbox .f-8 { width: 100%; } @media (min-width: 768px) { .no-flexbox .f-8 { width: 500px; } } .no-flexbox .light-bg .flex-box__headline { background: #ffffff; } .no-flexbox .mild-bg .flex-box__headline { background: #b9b9b9; } .no-flexbox .dark-bg .flex-box__headline { background: #474747; } @media (min-width: 768px) { .flex-box:nth-child(1).f-4, .flex-box:nth-child(2).f-4 { margin-left: 14%; margin-right: 2%; } } @media (min-width: 768px) { .flex-box:last-child.f-4 { margin: 0 1% 0 2%; } } .flex-box:nth-child(3).f-8 { margin: 0 2%; } @media (min-width: 768px) { .flex-box:nth-child(3).f-8 { margin-left: 2%; margin-right: 14%; } } .flex-grid * { min-height: 0; min-width: 0; } .flex-grid .main { left: auto; margin-left: auto; width: 100%; } .flex-grid section { padding: 0; } .flex-grid section.section-hero .headline { padding: 0; } .flex-grid .section-article .article { float: none; left: auto; margin: 0 auto; padding: 0; width: 96%; } @media (min-width: 481px) { .flex-grid .section-article .article { float: left; margin-left: auto; width: 100%; } } .flex-grid .Image.section img, .flex-grid .video-container { max-width: 100%; } .flex-grid .Image.section { margin-bottom: 0; } .flex-grid .ArticleTextwell h2, .flex-grid .ArticleTextwell h3, .flex-grid .ArticleTextwell h4, .flex-grid .ArticleTextwell h5, .flex-grid .ArticleTextwell h6 { text-align: left; } @media (max-width: 767px) { .flex-grid .ArticleTextwell h2, .flex-grid .ArticleTextwell h3, .flex-grid .ArticleTextwell h4, .flex-grid .ArticleTextwell h5, .flex-grid .ArticleTextwell h6 { text-align: center; } } .f-8 .ArticleTextwell h2 { font-size: 22px; margin: 0 0 30px; } @media (min-width: 768px) { .f-8 .ArticleTextwell h2 { font-size: 54px; } } .f-6 .ArticleTextwell h2 { margin-top: 0; } .flex-grid .ArticleTextwell p { text-align: left; } @media (max-width: 767px) { .flex-grid .ArticleTextwell p { text-align: center; } } .f-8 .ArticleTextwell p { text-align: center; } @media (min-width: 768px) { .f-8 .ArticleTextwell p { text-align: left; } } .flex-grid .ArticleTextwell { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; } .flex-grid .ArticleTextwell li { text-align: left; } @media screen and (min-width: 1200px) { .f-6 .ArticleTextwell { width: 66%; } } @media screen and (min-width: 1200px) { .f-6 .firstColumnContent .ArticleTextwell { margin-left: auto; } } @media (max-width: 767px) { .ArticleTextwell a.btn, .ArticleTextwell a.gallery-main-carousel__overlay-action { display: block; max-width: 200px; margin: 10px auto 0 !important; } } .flex-grid .textwell-content { margin: 0; width: 100%; } .flex-grid .items1.grid-4-col-slider .item:first-child { float: none; margin: 0 auto; width: 200px; } .flex-grid .f-4 .items2.grid-4-col-slider .item, .flex-grid .f-4 .items3.grid-4-col-slider .item { float: none; margin: 0 auto; width: 200px; } .flex-grid .f-1 .grid-4-col-slider .item { float: none; margin: 0 auto; width: 66%; } @media (min-width: 768px) { .flex-grid .f-4 .grid-4-col-slider .item { width: 47%; } .flex-grid .f-4 .grid-4-col-slider .item:nth-child(2n+1) { clear: left; } } @media (max-width: 479px) { .flex-grid .f-4 .slider-wrap .makeslide .item, .flex-grid .f-4 .slider-wrap .flexslider .item { margin: 0 auto; } } .flex-grid .section-3-col-slider .main { left: auto; margin-left: auto; width: 100%; } .flex-grid .section-3-col-slider .main .grid-3-col-slider .item { /*.TwoColumn & { @media (min-width: 768px) { margin: 0 2.5%; width: 100%; } }*/ } @media (min-width: 768px) { .flex-grid .section-3-col-slider .main .grid-3-col-slider .item { margin: 0 2.5%; width: 28%; } } .flex-grid .f-1 .elm-grid-3 .slides .item, .flex-grid .f-4 .elm-grid-3 .slides .item, .flex-grid .f-1 .section-3-col-slider .main .grid-3-col-slider .item, .flex-grid .f-4 .section-3-col-slider .main .grid-3-col-slider .item { float: left; width: 26%; } @media (min-width: 768px) { .flex-grid .f-1 .elm-grid-3 .slides .item, .flex-grid .f-4 .elm-grid-3 .slides .item, .flex-grid .f-1 .section-3-col-slider .main .grid-3-col-slider .item, .flex-grid .f-4 .section-3-col-slider .main .grid-3-col-slider .item { float: none; margin: 0 auto; max-width: 100%; width: 287px; } .flex-grid .f-1 .elm-grid-3 .slides .item:nth-child(3n), .flex-grid .f-1 .elm-grid-3 .slides .item:nth-child(3n+1), .flex-grid .f-4 .elm-grid-3 .slides .item:nth-child(3n), .flex-grid .f-4 .elm-grid-3 .slides .item:nth-child(3n+1), .flex-grid .f-1 .section-3-col-slider .main .grid-3-col-slider .item:nth-child(3n), .flex-grid .f-1 .section-3-col-slider .main .grid-3-col-slider .item:nth-child(3n+1), .flex-grid .f-4 .section-3-col-slider .main .grid-3-col-slider .item:nth-child(3n), .flex-grid .f-4 .section-3-col-slider .main .grid-3-col-slider .item:nth-child(3n+1) { float: none; margin: 0 auto; } } @media (min-width: 769px) { .flex-grid .elm-grid-3 .slides .item { margin: 0 2.5%; width: 28%; } } @media (min-width: 769px) { .TwoColumn .flex-grid .elm-grid-3 .slides .item { width: calc((100% - 20px ) /3); } } .flex-box .section-grid-2-col .main { left: auto; margin-left: auto; width: 100%; } @media (min-width: 768px) { .flex-grid .f-1 .section-grid-2-col .item, .flex-grid .f-4 .section-grid-2-col .item { width: 100%; } } .flex-box .section-grid-2-col .grid-2-col { margin: 0; } @media (min-width: 481px) { .flex-grid .elm-grid-3 .slides { padding: 0; } } .flex-grid .section-circles .main .items1.elm-grid-3 .item:first-child { margin-left: auto; width: 100%; } @media (max-width: 768px) { .flex-grid .section-circles .main .items1.elm-grid-3 .item:first-child { float: none; margin: 0 auto; max-width: 72%; } } @media (max-width: 767px) { .flex-grid .f-1 .elm-grid-3 .slides .item { width: 32.5%; } } @media (min-width: 1024px) { .flex-grid .f-1 .elm-grid-3 .slides .item .elm-img, .flex-grid .f-3 .elm-grid-3 .slides .item .elm-img { height: 22vw; width: 22vw; } } .TwoColumn .f-1 .flex-grid .f-1 .elm-grid-3 .slides .item .elm-img, .TwoColumn .f-1 .flex-grid .f-3 .elm-grid-3 .slides .item .elm-img { height: 52vw; } .f-4 section.section-livefeed { padding: 0; } .f-4 section.section-livefeed h2.headline { display: none; } .TwoColumn .mild-bg { background-color: #f1f1f1; } .TwoColumn .mild-bg .ArticleTextwell div.dark-bg, .TwoColumn .mild-bg .ArticleTextwell div.light-bg, .TwoColumn .mild-bg .ArticleTextwell div.mild-bg, .TwoColumn .mild-bg .Image div.dark-bg, .TwoColumn .mild-bg .Image div.light-bg, .TwoColumn .mild-bg .Image div.mild-bg { background-color: transparent; } .TwoColumn .mild-bg .ArticleTier .section-article.dark-bg, .TwoColumn .mild-bg .ArticleTier .section-article.light-bg, .TwoColumn .mild-bg .ArticleTier .section-article.mild-bg, .TwoColumn .mild-bg .ArticleTier .section-article .article { background-color: transparent; } .has-bg-img .dark-bg, .has-bg-img .light-bg, .has-bg-img .mild-bg { background: transparent; } @media screen and (min-width: 769px) { .TwoColumn .flex-grid .flex-box.remove-padding-first, .TwoColumn .flex-grid .flex-box.remove-padding-second { margin: 0; } .TwoColumn .flex-grid .flex-box.remove-padding-first .Featured li.item, .TwoColumn .flex-grid .flex-box.remove-padding-second .Featured li.item { margin-bottom: 0; } .TwoColumn .flex-grid .flex-box.remove-padding-first .Featured li.item .item-txt, .TwoColumn .flex-grid .flex-box.remove-padding-second .Featured li.item .item-txt { margin-bottom: 0; } .TwoColumn .flex-grid .flex-box.f-1 .textwell-content, .TwoColumn .flex-grid .flex-box.f-3 .textwell-content, .TwoColumn .flex-grid .flex-box.f-4 .textwell-content, .TwoColumn .flex-grid .flex-box.f-8 .textwell-content { padding: 8%; } .TwoColumn .flex-grid .flex-box.f-6 .textwell-content { padding: 8% 12%; } .TwoColumn .flex-grid .flex-box .ArticleTextwell { width: auto; } .TwoColumn .flex-grid .flex-box .ArticleTextwell .textwell-content { margin: inherit; max-width: none; } .TwoColumn .flex-grid .flex-box .ArticleTextwell .textwell-content ::after { clear: both; content: ''; display: inherit; } .TwoColumn .flex-grid .flex-box .ArticleTextwell .textwell-content p { margin-bottom: 1em; } .TwoColumn .flex-grid .flex-box .ArticleTextwell .textwell-content p :last-child { margin: 0; } .TwoColumn .flex-grid .flex-box .section.Image img { max-width: 100%; width: 100%; } .TwoColumn .remove-padding-section { padding: 0; } .TwoColumn .remove-padding-section h2.headline { padding-top: 20px; } } .multi-columns .btn, .multi-columns .gallery-main-carousel__overlay-action { border-bottom-color: #00a9e0; } .dark-bg .multi-columns .btn, .dark-bg .multi-columns .gallery-main-carousel__overlay-action, .light-bg .multi-columns .btn, .light-bg .multi-columns .gallery-main-carousel__overlay-action, .mild-bg .multi-columns .btn, .mild-bg .multi-columns .gallery-main-carousel__overlay-action { background: #009639; } .multi-columns .btn:before, .multi-columns .gallery-main-carousel__overlay-action:before { background-color: #00a9e0; } .multi-columns .item a .item-txt h3, .multi-columns .item div.no-hover .item-txt h3 { color: #474747; font-size: 16px; font-weight: 900; font-style: italic; } .multi-columns .item a .item-txt .source, .multi-columns .item a .item-txt h3, .multi-columns .item div.no-hover .item-txt .source, .multi-columns .item div.no-hover .item-txt h3 { /* Safari and Chrome */ /* Firefox 4 */ /* Opera */ transition: all 0.2s ease-out; } .multi-columns .items-left { color: #474747; font-weight: 500; } .multi-columns .item a .item-txt, .multi-columns .item div.no-hover .item-txt { background-color: transparent; } /* ======================================================================== MASTERBRAND: PAGE - COMMON PAGE: BUTTONS ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #Border */ /* #BackgroundColor */ /* :END VARIABLES */ /* Button Mixins */ /* Radial Hover Keyframes */ @keyframes button-hover-radial { from { -webkit-transform: scale(0); opacity: 0; transform: scale(0); } 100% { -webkit-transform: scale(15); opacity: 1; transform: scale(15); } } @keyframes button-mouseoff-fade { from { -webkit-transform: scale(20); opacity: 1; transform: scale(20); } 100% { -webkit-transform: scale(20); opacity: 0; transform: scale(20); } } /* BUTTONS ================= */ .btn, .gallery-main-carousel__overlay-action, .btn-more, .btn-standard, .tier-alert a.alert-btn { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 14px; color: #ffffff; -moz-box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); backface-visibility: hidden; background-color: #009639; border-top-width: 0; box-sizing: border-box; display: inline-block; min-width: 200px; overflow: hidden; padding: 7px 10px; position: relative; text-align: center; text-transform: uppercase; transform: translateZ(0); vertical-align: middle; } .btn:before, .gallery-main-carousel__overlay-action:before, .btn-more:before, .btn-standard:before, .tier-alert a.alert-btn:before { animation: button-mouseoff-fade 0.5s ease-out; animation-iteration-count: 1; background-color: #006342; border-radius: 100%; bottom: 6px; content: ""; height: 30px; left: 45%; opacity: 0; position: absolute; right: 0; -ms-transform: scale(20); transform: scale(20); width: 35px; z-index: -1; } .btn:hover, .gallery-main-carousel__overlay-action:hover, .btn-more:hover, .btn-standard:hover, .tier-alert a.alert-btn:hover { color: #ffffff; } .btn:hover:before, .gallery-main-carousel__overlay-action:hover:before, .btn-more:hover:before, .btn-standard:hover:before, .tier-alert a.alert-btn:hover:before { animation: button-hover-radial 0.6s ease-out; opacity: 1; } .btn:active, .gallery-main-carousel__overlay-action:active, .btn-more:active, .btn-standard:active, .tier-alert a.alert-btn:active { background-color: #006342; border-bottom-width: 0; color: #ffffff; transition: all 0.2 ease 0.2s; } a[href^="http://"].btn, a[href^="http://"].gallery-main-carousel__overlay-action, a[href^="http://"].btn-more, a[href^="https://"].btn, a[href^="https://"].gallery-main-carousel__overlay-action, a[href^="https://"].btn-more { background-color: #00a9e0; border: none; border-top-width: 0; color: #ffffff; } a[href^="http://"].btn:before, a[href^="http://"].gallery-main-carousel__overlay-action:before, a[href^="http://"].btn-more:before, a[href^="https://"].btn:before, a[href^="https://"].gallery-main-carousel__overlay-action:before, a[href^="https://"].btn-more:before { background-color: #003087; } a[href^="http://"].btn:active, a[href^="http://"].gallery-main-carousel__overlay-action:active, a[href^="http://"].btn-more:active, a[href^="https://"].btn:active, a[href^="https://"].gallery-main-carousel__overlay-action:active, a[href^="https://"].btn-more:active { background-color: #003087; color: #ffffff; transition: all 0.2 ease 0.2s; } input.btn, input.gallery-main-carousel__overlay-action { border-left: 0; border-right: 0; border-top: 0; font-size: 15px; padding: 6px 8px 4px; } .btn.login, .login.gallery-main-carousel__overlay-action, .btn.primary, .primary.gallery-main-carousel__overlay-action { -webkit-appearance: none; border-radius: 0; } .btn.disabled, .disabled.gallery-main-carousel__overlay-action, .btn.secondary, .secondary.gallery-main-carousel__overlay-action { color: #656565; } .btn.white, .white.gallery-main-carousel__overlay-action { background-color: #ffffff; } @supports (-ms-ime-align: auto) { .btn-plus, .btn-plus-dark, .btn-minus, .btn-minus-dark { background-image: url("/etc/designs/P/5631383682678784/clientlib/img/btn-plus-sprite_2x.png"); background-position: 0 0; background-repeat: no-repeat; background-size: 300px 200px; background-color: transparent !important; image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; width: 32px; height: 32px; display: inline-block; *display: inline; zoom: 1; text-indent: -9999em; transition: none; } .btn-plus:hover, .btn-plus-dark:hover, .btn-minus:hover, .btn-minus-dark:hover { transition: none; background-position: 0 -100px; } .light-bg .btn-plus, .btn-plus-dark { background-position: -140px 0; } .light-bg .btn-plus:hover, .btn-plus-dark:hover { background-position: -140px -100px; } .btn-minus { background-position: -70px 0; } .btn-minus:hover { background-position: -70px -100px; } .light-bg .btn-minus, .btn-minus-dark { background-position: -209px 0px; } .light-bg .btn-minus:hover, .btn-minus-dark:hover { background-position: -209px -100px; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .btn-plus, .btn-plus-dark, .btn-minus, .btn-minus-dark { background-image: url("/etc/designs/P/5631383682678784/clientlib/img/btn-plus-sprite_2x.png"); background-position: 0 0; background-repeat: no-repeat; background-size: 300px 200px; background-color: transparent !important; image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; width: 32px; height: 32px; display: inline-block; *display: inline; zoom: 1; text-indent: -9999em; transition: none; } .btn-plus:hover, .btn-plus-dark:hover, .btn-minus:hover, .btn-minus-dark:hover { transition: none; background-position: 0 -100px; } .light-bg .btn-plus, .btn-plus-dark { background-position: -140px 0; } .light-bg .btn-plus:hover, .btn-plus-dark:hover { background-position: -140px -100px; } .btn-minus { background-position: -70px 0; } .btn-minus:hover { background-position: -70px -100px; } .light-bg .btn-minus, .btn-minus-dark { background-position: -209px 0px; } .light-bg .btn-minus:hover, .btn-minus-dark:hover { background-position: -209px -100px; } } .btn-minus, .btn-minus-dark, .btn-plus, .btn-plus-dark { transition: none; -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0; display: inline-block; *display: inline; height: 32px; text-indent: -9999px; width: 32px; } .btn-minus.btn-minus, .btn-minus.btn-minus-dark, .btn-minus-dark.btn-minus, .btn-minus-dark.btn-minus-dark, .btn-plus.btn-minus, .btn-plus.btn-minus-dark, .btn-plus-dark.btn-minus, .btn-plus-dark.btn-minus-dark { -webkit-mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-arrow-top.svg); mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-arrow-top.svg); background-color: #474747; } .btn-minus.btn-minus:hover, .btn-minus.btn-minus-dark:hover, .btn-minus-dark.btn-minus:hover, .btn-minus-dark.btn-minus-dark:hover, .btn-plus.btn-minus:hover, .btn-plus.btn-minus-dark:hover, .btn-plus-dark.btn-minus:hover, .btn-plus-dark.btn-minus-dark:hover { transition: none; background-color: #009639; } .mild-bg .btn-minus.btn-minus, .mild-bg .btn-minus.btn-minus-dark, .mild-bg .btn-minus-dark.btn-minus, .mild-bg .btn-minus-dark.btn-minus-dark, .mild-bg .btn-plus.btn-minus, .mild-bg .btn-plus.btn-minus-dark, .mild-bg .btn-plus-dark.btn-minus, .mild-bg .btn-plus-dark.btn-minus-dark { background-color: #474747; } .mild-bg .btn-minus.btn-minus:hover, .mild-bg .btn-minus.btn-minus-dark:hover, .mild-bg .btn-minus-dark.btn-minus:hover, .mild-bg .btn-minus-dark.btn-minus-dark:hover, .mild-bg .btn-plus.btn-minus:hover, .mild-bg .btn-plus.btn-minus-dark:hover, .mild-bg .btn-plus-dark.btn-minus:hover, .mild-bg .btn-plus-dark.btn-minus-dark:hover { background-color: #009639; } .dark-bg .btn-minus.btn-minus, .dark-bg .btn-minus.btn-minus-dark, .dark-bg .btn-minus-dark.btn-minus, .dark-bg .btn-minus-dark.btn-minus-dark, .dark-bg .btn-plus.btn-minus, .dark-bg .btn-plus.btn-minus-dark, .dark-bg .btn-plus-dark.btn-minus, .dark-bg .btn-plus-dark.btn-minus-dark { background-color: #eaeaea; } .dark-bg .btn-minus.btn-minus:hover, .dark-bg .btn-minus.btn-minus-dark:hover, .dark-bg .btn-minus-dark.btn-minus:hover, .dark-bg .btn-minus-dark.btn-minus-dark:hover, .dark-bg .btn-plus.btn-minus:hover, .dark-bg .btn-plus.btn-minus-dark:hover, .dark-bg .btn-plus-dark.btn-minus:hover, .dark-bg .btn-plus-dark.btn-minus-dark:hover { transition: none; background-color: #009639; } .btn-minus.btn-plus, .btn-minus.btn-plus-dark, .btn-minus-dark.btn-plus, .btn-minus-dark.btn-plus-dark, .btn-plus.btn-plus, .btn-plus.btn-plus-dark, .btn-plus-dark.btn-plus, .btn-plus-dark.btn-plus-dark { -webkit-mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-arrow-bottom.svg); mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-arrow-bottom.svg); background-color: #474747; } .btn-minus.btn-plus:hover, .btn-minus.btn-plus-dark:hover, .btn-minus-dark.btn-plus:hover, .btn-minus-dark.btn-plus-dark:hover, .btn-plus.btn-plus:hover, .btn-plus.btn-plus-dark:hover, .btn-plus-dark.btn-plus:hover, .btn-plus-dark.btn-plus-dark:hover { background-color: #009639; } .mild-bg .btn-minus.btn-plus, .mild-bg .btn-minus.btn-plus-dark, .mild-bg .btn-minus-dark.btn-plus, .mild-bg .btn-minus-dark.btn-plus-dark, .mild-bg .btn-plus.btn-plus, .mild-bg .btn-plus.btn-plus-dark, .mild-bg .btn-plus-dark.btn-plus, .mild-bg .btn-plus-dark.btn-plus-dark { background-color: #474747; } .mild-bg .btn-minus.btn-plus:hover, .mild-bg .btn-minus.btn-plus-dark:hover, .mild-bg .btn-minus-dark.btn-plus:hover, .mild-bg .btn-minus-dark.btn-plus-dark:hover, .mild-bg .btn-plus.btn-plus:hover, .mild-bg .btn-plus.btn-plus-dark:hover, .mild-bg .btn-plus-dark.btn-plus:hover, .mild-bg .btn-plus-dark.btn-plus-dark:hover { background-color: #009639; } .dark-bg .btn-minus.btn-plus, .dark-bg .btn-minus.btn-plus-dark, .dark-bg .btn-minus-dark.btn-plus, .dark-bg .btn-minus-dark.btn-plus-dark, .dark-bg .btn-plus.btn-plus, .dark-bg .btn-plus.btn-plus-dark, .dark-bg .btn-plus-dark.btn-plus, .dark-bg .btn-plus-dark.btn-plus-dark { background-color: #eaeaea; } .dark-bg .btn-minus.btn-plus:hover, .dark-bg .btn-minus.btn-plus-dark:hover, .dark-bg .btn-minus-dark.btn-plus:hover, .dark-bg .btn-minus-dark.btn-plus-dark:hover, .dark-bg .btn-plus.btn-plus:hover, .dark-bg .btn-plus.btn-plus-dark:hover, .dark-bg .btn-plus-dark.btn-plus:hover, .dark-bg .btn-plus-dark.btn-plus-dark:hover { background-color: #009639; } .btn-close, .btn-close-dark { background-image: url("/etc/designs/P/5631383682678784/clientlib/img/btn-close-sprite.png"); background-position: 0 0; background-repeat: no-repeat; display: inline-block; height: 32px; text-indent: -9999em; width: 32px; zoom: 1; transition: none; } .btn-close:hover, .btn-close-dark:hover { transition: none; background-position: 0 -100px; } .btn-close-dark { background-position: -70px 0; } .btn-close-dark:hover { transition: none; background-position: -70px -100px; } .btn-more-container { float: left; margin-bottom: 20px; position: relative; text-align: center; width: 100%; } .btn-more-container .btn-tile { width: 80%; } .TwoColumn .btn-more-container .btn-tile { max-width: 100%; min-width: 0; } .btn-more-container .btn-elm-empty { margin-top: 5%; } .btn-more { min-width: 200px; } .flex-grid .btn-more { min-width: 300px; } .btn-shelf-wrap, .plus-shelf-wrap { clear: both; display: block; margin: 0 0 10px; text-align: center; } .btn-shelf-offset { margin-top: 0; } .multi-columns .plus-shelf-wrap { margin-bottom: 15px; } .multi-columns .plus-shelf-wrap a { margin: 0; } .multi-columns .btn-more-container .btn-more { background-color: #009639; } .multi-columns .btn-more-container .btn-more:active, .multi-columns .btn-more-container .btn-more:before { background-color: #006342; border: 0; } .multi-columns .btn-more-container a[href^="http://"].btn-more, .multi-columns .btn-more-container a[href^="https://"].btn-more { background-color: #00a9e0; } .multi-columns .btn-more-container a[href^="http://"].btn-more:active, .multi-columns .btn-more-container a[href^="http://"].btn-more:before, .multi-columns .btn-more-container a[href^="https://"].btn-more:active, .multi-columns .btn-more-container a[href^="https://"].btn-more:before { background-color: #003087; border: 0; } .multi-columns .btn-more-container .btn-tile { width: 80%; } .multi-columns .btn-more-container .btn-elm-empty { margin-top: 5%; } @media (min-width: 0) { .section-form .main .form-btns { float: left; height: auto; margin: 0 0 20px; width: 100%; } .section-form .main .form-btns .btn, .section-form .main .form-btns .gallery-main-carousel__overlay-action { float: left; padding: 2px 5px 0; width: 125px; } .section-form .main .form-btns .spine { margin-right: 10px; } } /* ======================================================================== MASTERBRAND: PAGE - COMMON PAGE: HEADLINE ======================================================================== */ /* :START VARIABLES */ /* #FontFamily */ /* #FontSize */ /* #FontStyle */ /* #FontWeight */ /* #Color */ /* #Background*/ /* #LineHeight */ /* :END VARIABLES */ section.subpage-header { padding-top: 0; } .subpage-header .headline { font-size: 16px; padding-top: 35px; } .subpage-header { text-align: center; } .subpage-header__image { bottom: 0; max-width: 100%; vertical-align: bottom; width: 100%; } .subpage-header__text-container { background: #ffffff; margin: -16vw auto 0; position: relative; width: 88%; } .light-bg .subpage-header__text-container { background: #ffffff; } .mild-bg .subpage-header__text-container { background: #c6c6c6; } .dark-bg .subpage-header__text-container { background: #b9b9b9; } @media (min-width: 481px) { .subpage-header__text-container { margin-top: -9vw; } } .subpage-header__color-bar { float: left; height: 2vw; width: 100%; } @media (min-width: 1024px) { .subpage-header__color-bar { height: 3vw; } } /*============================ Text Containers ==============================*/ .subpage-header__text-block { display: inline-block; margin: 0 auto; max-width: 90%; } /*============================ Text Styles ==============================*/ .has-bg-img.dark-bg .subpage-header__text-block { color: #ffffff; } .subpage-header__text-block h1, .subpage-header__text-block h2 { margin: 20px 0; } .subpage-header__text-block h3, .subpage-header__text-block h4 { margin: 10px 0; } .has-bg-img.dark-bg .subpage-header__text-block h3, .has-bg-img.dark-bg .subpage-header__text-block h4 { color: #ffffff; } .has-bg-img.dark-bg .subpage-header__text-block h5, .has-bg-img.dark-bg .subpage-header__text-block h6 { color: #ffffff; } .seo-title__headline { font-weight: bold; } .has-bg-img.dark-bg .seo-title__headline { color: #ffffff; } .subpage-header__text-block p { font-size: 16px; line-height: 1.5em; text-align: center; } .subpage-header__text-block li { list-style-position: inside; } .subpage-header__text-block ul li { list-style-type: disc; } .subpage-header__text-block ol li { list-style-type: decimal; } .has-bg-img.dark-bg .subpage-header__text-block a:hover { color: #ffffff; } .headline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; font-size: 16px; line-height: 1.1em; margin: 0 auto 30px; width: 100%; } @media screen and (min-width: 768px) { .headline { margin: 0 auto 20px; } } /* headline hard breaks is wider, use break tags to split headline */ .headline-hard-breaks { line-height: 1.1em; margin: 0 auto 28px; width: 100%; } .headline-with-sub { line-height: 1.1em; margin: 0 auto 18px; width: 100%; } .subheadline { margin-bottom: 28px; } p.subheadline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 600; font-style: normal; font-size: 54px; margin-bottom: 28px; } p.subheadlinesized { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 26px; line-height: 16px; margin-bottom: 28px; } p.superheadline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; font-size: 54px; line-height: 1em; padding: 0 0 0.4em; } .headline-description p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 54px; line-height: 18px; margin: 0 auto 28px; max-width: 700px; text-align: center; width: 90%; } .subpage-header__color-bar { height: 2vw; } @media (min-width: 1024px) { .subpage-header__color-bar { height: 3vw; } } .subpage-header__text-block { color: #474747; } .subpage-header__text-block h2 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; color: #474747; margin: 3vw auto; width: 98%; } @media (min-width: 768px) { .subpage-header__text-block h2 { margin: 3vw auto 20px; width: 75%; } } @media (min-width: 1024px) { .subpage-header__text-block h2 { font-weight: 700; font-style: normal; } } .subpage-header__text-block h3 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; margin: 0 auto 32px; width: 75%; } @media (min-width: 768px) { .subpage-header__text-block h3 { margin: 0 auto 20px; text-align: center; width: 75%; } } .subpage-header__text-block h4 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 20px; line-height: 22px; margin: 10px 0; } .subpage-header__text-block h5 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 18px; line-height: 20px; margin: 10px 0; } .subpage-header__text-block h6 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 16px; line-height: 18px; margin: 10px 0; } .subpage-header__text-block li, .subpage-header__text-block p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 16px; line-height: 1.5em; } .subpage-header__text-block h2, .subpage-header__text-block h3, .subpage-header__text-block h4, .subpage-header__text-block h5, .subpage-header__text-block h6, .subpage-header__text-block li, .subpage-header__text-block p { color: #474747; } /* ======================================================================== MASTERBRAND: PAGE - COMMON PAGE: MODAL ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* :END VARIABLES */ /* The canonical button for toggling the modal comments */ .no-touch .modal-comments-toggle:hover { color: #009639; } .icon-comment:before { color: #009639; content: "\e901"; display: block; } .modal-comments-toggle .icon-comment { display: block; font-size: 24px; font-style: normal; width: 100%; } .modal-comments-toggle--inline .icon-comment { display: inline-block; vertical-align: -5px; width: auto; } .modal-comments__comment-pane-thumbnail { margin-top: 10px; width: 100%; } .modal-comments .carousel__action-bar { margin-top: 15px; } .modal-comments .share-controls__share-toggle { margin-left: 70px; } .modal-comments .social-share-and-like--small .circle-button { height: 25px; width: 25px; } .modal-comments .share-controls__option { float: right; } .modal-comments .share-controls__like { left: 0; position: absolute; } .modal-comments .modal-content { text-align: center; } .modal-comments .comments .main > h2 { display: none; } .modal-comments .comments { padding-top: 0; } .modal-comments.cid-not-authored .fyre .fyre-auth, .modal-comments.cid-not-authored .fyre .fyre-editor { display: none !important; } .fyre-modal { z-index: 1000 !important; } /* ======================================================================== MASTERBRAND: PAGE - COMMON PAGE: PAGINATION ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #LineHeight */ /* :END VARIABLES */ .pagination { height: 40px; padding-top: 10px; } .pagination li { background: url("/etc/designs/P/5631383682678784/clientlib/img/btn-pagination-sprite.png") -1px -1px no-repeat; display: inline-block; min-width: 34px; text-align: center; } .pagination li a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 18px; line-height: 1em; color: #959595; display: block; padding: 7px 0; } .pagination li:hover { background-position: -198px 0; } .pagination li:hover a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; color: #ffffff; } .pagination li.pagination-current { background-position: -133px -1px; } .pagination li.pagination-current a { color: #ffffff; } .pagination li.pagination-current:hover { background-position: -198px -1px; } .pagination li.pagination-current:hover a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; color: #ffffff; } .pagination li.pagination-inactive { background-position: -68px -1px; } .pagination li.pagination-inactive a { color: #ffffff; cursor: default; } .pagination li.pagination-inactive:hover a { color: #ffffff; } .pagination.light li { background-position: -68px -1px; } .pagination.light li a { color: #9a9a9a; } .pagination.light li:hover { background-position: -198px -1px; } .pagination.light li:hover a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; color: #ffffff; } .pagination.light li.pagination-current { background-position: -133px -1px; } .pagination.light li.pagination-current a { color: #ffffff; } .pagination.light li.pagination-current:hover { background-position: -198px -1px; } .pagination.light li.pagination-current:hover a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; color: #ffffff; } .pagination.light li.pagination-inactive a { color: #d8d8d8; cursor: default; } .pagination.light li.pagination-inactive:hover { background-position: -68px -1px; } .pagination.light li.pagination-inactive:hover a { color: #d8d8d8; } /* ======================================================================== MASTERBRAND: PAGE - COMMON PAGE: SECTION BACKGROUND ======================================================================== */ /* :START VARIABLES */ /* #BackgroundColor */ /* :END VARIABLES */ .light-bg { background-color: #ffffff; float: left; height: auto; width: 100%; } .mild-bg { background-color: #ffffff; float: left; height: auto; width: 100%; } .dark-bg { background-color: #ffffff; float: left; height: auto; width: 100%; } /* ======================================================================== MASTERBRAND: PAGE - COMMON PAGE: SOCIAL SHARE ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #FontFamily */ /* #Color */ /* #LineHeight */ /* #BackgroundColor */ /* :END VARIABLES */ /* Container Styles */ .section-social-sharing { padding: 0; } @media (min-width: 768px) { .section-social-sharing .main { float: none; left: 0; margin: 0 auto; overflow: hidden; width: 728px; } } .social-share-and-like { margin: 10px 5px; text-align: center; } .social-share-and-like * { box-sizing: border-box; } .social-share-and-like--right { float: none; } @media (min-width: 768px) { .social-share-and-like--right { float: right; } } /* =============================== Alignment Options 1. on mobile all options center align 2. with class .social-share-and-like--left, all content left aligns 3. with class .social-share-and-like--right, all content right aligns 4. with class .social-share-and-like--center, all content center aligns (default behavior) ================================== */ .social-share-container { /* [case #1] */ float: none; margin: 0 auto; } @media (min-width: 768px) { .social-share-and-like--left .social-share-container { /* [case #2] */ float: left; max-width: 370px; } .social-share-and-like--right .social-share-container { /* [case #3] */ float: right; max-width: 370px; } .social-share-and-like--center .social-share-container { /* [case #4] */ float: none; } } /* Headline Styles */ .social-share-and-like .headline { font-size: 20px; margin: 0 auto 15px; text-align: center; width: auto; } .social-share-and-like--left .headline, .social-share-and-like--right .headline { float: none; } @media (min-width: 768px) { .social-share-and-like--left .headline, .social-share-and-like--right .headline { float: left; margin-right: 15px; text-align: right; } } @media (min-width: 768px) { .social-share-and-like--small .headline { font-size: 20px; margin-bottom: 20px; line-height: 2.34em; } } @media (min-width: 768px) { .social-share-and-like--large .headline { font-size: 30px; margin-bottom: 20px; line-height: 2.1em; } } /* =============================== Icon Sizes There are two icon sizes: 1. Small (default) 2. Large 3. On mobile, all icons are the small size ================================== */ .social-icons a:focus { outline: 1px dotted #eeeeee; } .social-share-and-like--left .social-icons, .social-share-and-like--right .social-icons { float: none; margin: 0; } @media (min-width: 768px) { .social-share-and-like--left .social-icons, .social-share-and-like--right .social-icons { float: left; margin: 0; } } .social-share-and-like--large .social-icons, .social-share-and-like--small .social-icons { height: auto; } .social-icons li { display: inline-block; margin: 0 3px 15px; } .social-icons li.hide-content { display: inline-block; } @media (min-width: 768px) { .social-icons li.hide-content { display: none; } } .social-share-and-like--large .social-icons li { margin-bottom: 20px; } .circle-button { /* [case #1] */ border-radius: 50%; display: block; height: 36px; width: 36px; /* =============================== Icon Styles There are different background colors on the icon circles, depending on the background color: 1. White background = gray circles, dark gray hover 2. Light gray background = white circles, dark gray hover 3. Dark gray background = white circles, light gray hover ================================== */ } .social-share-and-like--small .circle-button { height: 36px; width: 36px; } @media (min-width: 768px) { .social-share-and-like--large .circle-button { /* [case #2] */ height: 55px; width: 55px; } } .light-bg .circle-button { /* [case #1] */ background: #b9b9b9; } .light-bg .circle-button:hover { background: #474747; } .mild-bg .circle-button { /* [case #2] */ background: #ffffff; } .mild-bg .circle-button:hover { background: #474747; } .dark-bg .circle-button { /* [case #3] */ background: #ffffff; } .dark-bg .circle-button:hover { background: #b9b9b9; } .social-icon { display: block; height: 50%; left: 50%; margin-left: -25%; margin-top: -25%; position: absolute; top: 50%; width: 50%; } .navigation-bar-slideout__menu .social-icon { height: 100%; left: 0; margin-left: 0; margin-top: 0; top: 0; width: 100%; } /* =============================== Styles for Permalink URL 1. default behavior - permalink should center align 2. if container is --left - permalink should left align 3. if container is --right - permalink should right align ================================== */ .share-and-like__permalink-container { display: inline-block; } .social-share-and-like--left .share-and-like__permalink-container, .social-share-and-like--right .share-and-like__permalink-container { float: left; } .share-link__permalink-link { background-color: #b9b9b9; border: 0; margin: 0 auto; padding: 10px; text-align: center; width: 200px; } .share-link__permalink-link:focus { outline: 1px dotted #b9b9b9; } .dark-bg .share-link__permalink-link, .mild-bg .share-link__permalink-link { background-color: #ffffff; } .social-share-and-like--left .share-link__permalink-link { /* [case #2] */ clear: left; } @media (min-width: 768px) { .social-share-and-like--left .share-link__permalink-link { float: left; } } @media (min-width: 768px) { .social-share-and-like--right .share-link__permalink-link { /* [case #3] */ float: left; } } .share-and-like__permalink-container:first-child .share-link__permalink-link, .social-share-container:first-child .share-link__permalink-link { margin-top: 0; } /* =============================== Permalink Copy Button Uses clipboard.js 1. default "copy" button 2. success message/success button state ================================== */ /* [case #1] */ .share-link__permalink-copy-btn { -moz-transition: background-color 0.3s linear; -ms-transition: background-color 0.3s linear; -ms-transition: background-color 0.3s linear; -webkit-transition: background-color 0.3s linear; background: #009639; border: none; border-width: 0; color: #ffffff; cursor: pointer; height: 33px; padding: 10px; transition: background-color 0.3s linear; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .share-link__permalink-copy-btn { height: 36px; line-height: 13px; } } .share-link__permalink-copy-btn:focus { outline: 1px dotted #b9b9b9; } .share-link__permalink-copy-btn:hover { background: #000000; } .share-link__permalink-copy-btn.share-link__permalink-copy--success { /* [case #2] */ background: #000000; } .social-share-and-like--center .share-link__permalink-copy-btn { float: none; } @media (min-width: 768px) { .social-share-and-like--left .share-link__permalink-copy-btn, .social-share-and-like--right .share-link__permalink-copy-btn { float: left; margin-left: 5px; } } .share-link__permalink-copy--success .share-link__permalink-copy--default { display: none; } /* [case #2] */ .share-link__permalink-copy--clicked { display: none; } .share-link__permalink-copy--success .share-link__permalink-copy--clicked { display: block; } /* ==================== variable, extend and inheritance component for sharing. ==================== */ .share-controls { display: inline-block; margin: 10px 0; } .share-controls__option { float: left; margin-right: 10px; position: relative; } .share-controls__option .section-social-sharing { display: none; } .share-controls__share-toggle .icon-social-share { display: block; font-family: "cc-go"; font-size: 24px; font-style: normal; width: 100%; } .share-controls__share-toggle .icon-social-share:before { content: "\e902"; transition: all 0.2s ease-out; } .share-controls__share-toggle--open .icon-social-share:before { color: #000000; content: "\e601"; transition: all 0.1s ease-in; } .share-controls__share-toggle--inline .icon-social-share { display: inline-block; vertical-align: -5px; width: auto; } .share-controls__share-toggle--inline { vertical-align: middle; } .no-touch .share-controls__share-toggle:hover { color: #009639; } .no-touch .share-controls__share-toggle--open:hover { color: #009639; } .share-controls .section-social-sharing { bottom: 0; left: 28px; position: absolute; -ms-transform: none; transform: none; width: 225px; } @media screen and (min-width: 376px) { .share-controls .section-social-sharing { -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); bottom: auto; left: calc(100% - -10px); position: absolute; top: 50%; transform: translateY(-50%); width: 250px; } } .section-social-sharing.section-social-sharing--open { background: #ffffff; } .share-controls .social-share-and-like--small .social-icons { height: 25px; } @media screen and (min-width: 376px) { .share-controls .social-share-and-like--small .social-icons { height: auto; } } .share-controls__like .fb-like { overflow: hidden; } .gallery-main-carousel__share { margin: 0 auto; width: 160px; } .gallery-main-carousel__share > li { float: left; position: relative; width: 50%; } /* 0px =========================== */ @media (min-width: 0) { .social-share-and-like { margin: 20px 5px 0; } .social-share-and-like .headline { color: #474747; margin: 0 auto 15px; } .social-share-and-like .headline:empty { display: none; } .dark-bg .social-share-and-like .circle-button, .light-bg .social-share-and-like .circle-button, .mild-bg .social-share-and-like .circle-button { background: #eaeaea; } .dark-bg .social-share-and-like .circle-button:hover, .light-bg .social-share-and-like .circle-button:hover, .mild-bg .social-share-and-like .circle-button:hover { background: #b9b9b9; } .social-share-and-like .circle-button img { display: block; left: 50%; position: absolute; top: 50%; } .social-share-and-like .social-icon-link img { height: 100%; margin-left: -50%; margin-top: -50%; width: 100%; } .gallery-main-carousel .social-share-and-like { margin: 7px 5px 0; } } .share-link__permalink-link { background-color: #eaeaea; } .dark-bg .share-link__permalink-link, .mild-bg .share-link__permalink-link { background-color: #eaeaea; } /* 0px =========================== */ @media (min-width: 0) { .section-social .grid-6-slider { float: left; height: auto; margin: 0 23.333333333%; width: 53.333333333%; } .section-social .item.flex-active-slide { margin-bottom: 20px; } .section-social .main { float: left; overflow: hidden; width: 100%; } .section-social .main .item { margin-bottom: 0; } .section-social .main .item .item-icon { background-position: center top; background-repeat: none; background-size: 100%; cursor: pointer; height: 45px; margin: 0 auto; opacity: 0.6; overflow: hidden; position: relative; width: 45px; } .section-social .main .item h5.item-label, .section-social .main .item p.item-label { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 14px; color: #000000; opacity: 0; padding: 15px 0 0; text-align: center; } .section-social .main .item h5.item-label span, .section-social .main .item p.item-label span { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 12px; clear: left; display: block; padding-top: 4px; text-align: center; text-transform: capitalize; } .section-social .main .item h5.item-label span:empty, .section-social .main .item p.item-label span:empty { display: none; } .section-social .main .item a { background: #fff; box-sizing: border-box; display: block; margin: 0 auto; overflow: hidden; padding: 25px 0 5px; position: relative; width: 155px; transition: all 0.2s ease-out; } .section-social .main .item a img { margin: 0 5px; opacity: 1; position: relative; } .section-social .main .item a:hover { overflow: hidden; transition: all 0.1s ease-in; } .section-social .main .item a:hover .item-icon { opacity: 1; } .section-social .main .flex-active-slide a { background: #fff; } .section-social .main .flex-active-slide a .item-icon { background-position: center -45px; opacity: 1; } .section-social .main .flex-active-slide h5.item-label, .section-social .main .flex-active-slide p.item-label { opacity: 1; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { .section-social .main { left: 0; margin-left: 0; width: 100%; } .section-social .main .grid-6-slider { float: none; height: auto; margin: 0 auto; width: 100%; } .section-social .main .grid-6-slider .slidecount-5 .item:first-child { margin-left: 8.3333333325%; } .section-social .main .grid-6-slider .slidecount-4 .item:first-child { margin-left: 16.666666666%; } .section-social .main .grid-6-slider .slidecount-3 .item:first-child { margin-left: 24.9999999995%; } .section-social .main .grid-6-slider .slidecount-2 .item:first-child { margin-left: 33.333333333%; } .section-social .main .grid-6-slider .slidecount-1 .item { margin-left: 41.6666666665%; } .section-social .main .item { width: 16.666666667%; } .section-social .main .item h5.item-label, .section-social .main .item p.item-label { opacity: 1; } .section-social .main .item a { background: transparent; box-sizing: border-box; overflow: hidden; padding: 20px 0 5px; width: 100%; transition: all 0.2s ease-out; } .section-social .main .item a img { margin: 0 5px; opacity: 1; position: relative; } .section-social .main .item a:hover { background: #fff; overflow: hidden; transition: all 0.1s ease-in; } .section-social .main .item a:hover .item-icon { background-position: center -45px; } .section-social .main .item a:hover .item-icon { opacity: 1; } .mild-bg.section-social.has-bg-img .item a { background: #ffffff; } .dark-bg.section-social.has-bg-img .item .item-label { color: #ffffff; } .dark-bg.section-social.has-bg-img .item a:hover .item-label { color: #000000; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .section-social .main .grid-6-slider { float: none; height: auto; margin: 0 auto; width: 100%; } .section-social .main .grid-6-slider .slidecount-5 .item:first-child { margin-left: 8.75%; } .section-social .main .grid-6-slider .slidecount-4 .item:first-child { margin-left: 17%; } .section-social .main .grid-6-slider .slidecount-3 .item:first-child { margin-left: 25.25%; } .section-social .main .grid-6-slider .slidecount-2 .item:first-child { margin-left: 33.5%; } .section-social .main .grid-6-slider .slidecount-1 .item { margin-left: 41.75%; } .section-social .main .item { padding: 0 1%; width: 14.5%; } .section-social .main .item a { box-sizing: border-box; display: block; float: left; overflow: hidden; padding: 0 0 20px; position: relative; transition: all 0.2s ease-out; } .section-social .main .item a img { margin: 0 20px; opacity: 1; position: relative; } .section-social .main .item a:hover { background: #fff; overflow: hidden; transition: all 0.1s ease-in; } .section-social .main .item a:hover .item-icon { background-position: center -45px; } .section-social .main .item a:hover .item-icon { opacity: 1; } } /* =============================== */ /* 1024px ======================== */ @media (min-width: 1024px) { .section-social .main { float: left; left: 50%; margin-left: -450px; width: 900px; } } /* =============================== */ .section-social h2.headline:empty { display: none; } /* ======================================================================== MASTERBRAND: PAGE - COMMON PAGE: TABLE ======================================================================== */ /* :START VARIABLES */ /* #Border */ /* :END VARIABLES */ table.datatable { border-collapse: collapse; margin: 0 auto 60px; max-width: 728px; width: 100%; } table.datatable th { border-bottom: 2px solid #000000; border-top: 2px solid #000000; padding: 4px 8px; } table.datatable tr td { border-bottom: 2px solid #000000; padding: 4px 8px; } table.datatable td a { font-weight: bold; } table.threecol tr td { width: 33%; } /* ======================================================================== MASTERBRAND: PAGE - COMMON PAGE: LOADING ======================================================================== */ /* :START VARIABLES */ /* #Color */ /* :END VARIABLES */ body .pre-loading { background-color: rgba(255, 255, 255, 0.7); bottom: 0; height: 100%; left: 0; margin: 0; padding: 0; position: absolute; right: 0; text-align: center; top: 0; width: 100%; } body .pre-loading div { -ms-transform: translateZ(0); -webkit-animation: load7 1.8s infinite ease-in-out; -webkit-animation-delay: -0.16s; -webkit-animation-fill-mode: both; -webkit-transform: translateZ(0); animation: load7 1.8s infinite ease-in-out; animation-delay: -0.16s; animation-fill-mode: both; border-radius: 50%; color: #009639; content: ''; font-size: 10px; height: 2em; margin: 80px auto; position: relative; text-indent: -9999em; top: 0; transform: translateZ(0); width: 2em; } body .pre-loading div:after, body .pre-loading div:before { -webkit-animation: load7 1.8s infinite ease-in-out; -webkit-animation-fill-mode: both; animation: load7 1.8s infinite ease-in-out; animation-fill-mode: both; border-radius: 50%; content: ''; height: 2em; position: absolute; top: 0; width: 2em; } body .pre-loading div:before { animation-delay: -0.32s; left: -3.5em; } body .pre-loading div:after { left: 3.5em; } @keyframes load7 { 0%, 100%, 80% { box-shadow: 0 2em 0 -1.3em; } 40% { box-shadow: 0 2em 0 0; } } /*THE 3RD*/ /* ======================================================================== MASTERBRAND: THE3RD ======================================================================== */ /* ======================================================================== OVERRIDE: Boostrap v2.2.2 This is a trimmed down version for Coca-Cola UI Kit ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #LineHeight */ /* #BackgroundColor */ /* :END VARIABLES */ .clearfix { *zoom: 1; } .clearfix:after, .clearfix:before { content: ""; display: table; line-height: 0; } .clearfix:after { clear: both; } .hide-text { background-color: transparent; border: 0; color: transparent; font: 0/0 a; text-shadow: none; } .input-block-level { box-sizing: border-box; display: block; min-height: 30px; width: 100%; } .nav-tabs { margin: 20px 0 0; *zoom: 1; } .nav-tabs:after, .nav-tabs:before { content: ""; display: table; line-height: 0; } .nav-tabs:after { clear: both; } .nav-tabs > li { display: inline-block; *display: inline; font-size: 18px; height: 50px; zoom: 1; } .nav-tabs > li > a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; line-height: 1em; background-color: #ececec; display: block; margin-right: 10px; padding: 10px; text-align: center; } .tab-white .nav-tabs > li > a { background-color: #ffffff; } .nav-tabs > li > a:hover { color: #656565; } .nav-tabs > .active > a, .nav-tabs > .active > a:hover { color: #656565; cursor: default; } .tab-wrapper { margin: 0 auto; text-align: left; width: 280px; } /* 768px ======================== */ @media (min-width: 768px) { .tab-wrapper { margin: 0 auto; text-align: left; width: 80%; } } /* =============================== */ .tabbable { *zoom: 1; } .tabbable:after, .tabbable:before { content: ""; display: table; line-height: 0; } .tabbable:after { clear: both; } .tab-content { background: #eee; clear: left; margin-bottom: 20px; overflow: auto; padding: 10px; text-align: left; } .tab-content p { text-align: left; } .tab-white .tab-content { background-color: #ffffff; } .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; } /* ======================================================================== OVERRIDE: CSS MODAL ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #Background */ /* :END VARIABLES */ .modal--fullscreen .modal-close-button { transition: all 0.1s ease-in; } .modal-close__toggle-icon { font-family: 'cc-go'; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; } .modal-close__toggle-icon-svg { fill: #009639; } .no-touch .modal-close__toggle-icon:hover .modal-close__toggle-icon-svg { fill: #000000; transition: all 0.2s ease-out; } .modal-comments__comment-pane-title { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 16px; color: #474747; margin-bottom: 5px; } .modal-comments__comment-pane-subheadline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 16px; color: #474747; } /* ======================================================================== OVERRIDE: FLEXSLIDER ======================================================================== */ /* :START VARIABLES */ /* #Color */ /* :END VARIABLES */ @media (min-width: 0) { .flex-direction-nav { display: block; } .flex-direction-nav li { display: inline-block; width: 50%; } .flex-direction-nav li .flex-prev { padding-left: 10px; text-align: left; } .flex-direction-nav li .flex-prev:after { display: none; } .flex-direction-nav li .flex-prev:before { content: "\e606"; padding-right: 10px; } .flex-direction-nav li .flex-next { padding-right: 10px; text-align: right; } .flex-direction-nav li .flex-next:after { content: "\e604"; padding-left: 10px; } .flex-direction-nav li .flex-next:before { display: none; } .flex-direction-nav li .flex-next, .flex-direction-nav li .flex-prev { /* Safari and Chrome */ /* Firefox 4 */ /* Opera */ transition: all 0.01s ease-in-out; display: block; padding-bottom: 20px; } .flex-direction-nav li .flex-next:after, .flex-direction-nav li .flex-next:before, .flex-direction-nav li .flex-prev:after, .flex-direction-nav li .flex-prev:before { display: inline; font-family: 'cc-go'; font-size: 0.8em; font-variant: normal; font-weight: normal; line-height: 1; margin: 0; } } /* Layout */ /* only show active slide's text on mobile */ @media screen and (max-width: 860px) { .bb-msg-mobile-sub, .bb-msg-mobile-title, .item .item-text { display: none; } .flex-active-slide .bb-msg-mobile-sub, .flex-active-slide .bb-msg-mobile-title, .flex-active-slide .item .item-text { display: block; } } .flex-viewport .item, .item.flex-active-slide { color: #000000; } .flex-viewport .item .item-txt, .item.flex-active-slide .item-txt { background: inherit; transition: all 0.1s ease-in; } .flex-viewport .item .item-txt h1, .flex-viewport .item .item-txt h2, .flex-viewport .item .item-txt h3, .flex-viewport .item .item-txt h4, .flex-viewport .item .item-txt h5, .flex-viewport .item .item-txt h6, .flex-viewport .item .item-txt p, .item.flex-active-slide .item-txt h1, .item.flex-active-slide .item-txt h2, .item.flex-active-slide .item-txt h3, .item.flex-active-slide .item-txt h4, .item.flex-active-slide .item-txt h5, .item.flex-active-slide .item-txt h6, .item.flex-active-slide .item-txt p { transition: all 0.2s ease-in; } .flex-viewport .item .bar, .item.flex-active-slide .bar { background: rgba(0, 0, 0, 0.2); } .item.flex-active-slide .item-txt, .item.flex-active-slide:hover .item-txt { background: #ffffff; } .light-bg .item.flex-active-slide .item-txt, .light-bg .item.flex-active-slide:hover .item-txt { background: #b9b9b9; } /* ======================================================================== OVERRIDE: SLIDESHOW MANTLE ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #FontWeight */ /* #LineHeight */ /* #BackgroundColor */ /* #BorderColor*/ /* :END VARIABLES */ .slider-ie-hack { display: none; } .subpagewrap section.section-slider { padding-top: 20px !important; } /* 0px =========================== */ @media (min-width: 0) { section.section-slider { margin-bottom: 15px; overflow: hidden; padding: 0; } section.section-slider .homeslider-nav { display: none; } section.section-slider .bb-wrap { float: left; height: auto; left: 0; margin: 0; overflow: hidden; padding: 0 0 160px; position: absolute; top: 0; width: 100%; } section.section-slider .flex-active-slide .bb-msg-wrap { display: block; } section.section-slider .bb-msg-wrap { height: 100%; left: auto; margin: 0 5%; position: absolute; top: 10px; width: 90%; z-index: 1; } section.section-slider .bb-msg-mobile-sub, section.section-slider .bb-msg-mobile-title { color: #222222; font-size: 30px; font-weight: bold; height: auto; letter-spacing: -0.03em; line-height: 1.01em; margin: 0 auto 10px; max-width: 300px; position: relative; text-align: center; top: 160px; width: 100%; z-index: 1; } section.section-slider .bb-msg-mobile-title { padding-top: 0; } section.section-slider .bb-msg-mobile-sub { color: #009639; font-size: 20px; padding-top: 10px; } section.section-slider #mobile-homeslider .slide-logo { /* logos hidden from mobile slider for now */ display: none; left: 0; padding: 0; position: absolute; text-align: center; top: 60px; width: 100%; z-index: 2000; } section.section-slider #mobile-homeslider .slide-logo img { margin: 0 auto; width: 45%; } section.section-slider .bb-btn { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 14px; color: #009639; background: #f9f9f9; border-bottom: 10px solid #474747; display: inline-block; margin: 0 3px 10px; min-width: 110px; padding: 4px 15px 2px; position: relative; text-align: center; text-transform: uppercase; transition: all 0.2s ease-out; } section.section-slider .bb-btn:hover { transition: all 0.2s ease-in; border-bottom: 10px solid #009639; color: #009639; } .bb-msg-wrap.campaign .bb-msg { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 35px; line-height: 40px; letter-spacing: 0.02em; text-transform: none; } .bb-msg-wrap.campaign .bb-btn { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 25px; color: #009639; background: #f9f9f9; border-bottom: none !important; display: inline-block; letter-spacing: 0.02em; margin: 0 3px 10px; min-width: 110px; padding: 15px; position: relative; text-align: center; text-transform: uppercase; } .bb-msg-wrap.campaign .bb-msg-mobile-title { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 25px; letter-spacing: 0.02em; line-height: 30px; text-transform: none; } .bb-msg-wrap.campaign .bb-msg-mobile-sub { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 20px; letter-spacing: 0.02em; line-height: 25px; text-transform: none; } .bb-msg-wrap.campaign .bb-text { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 20px; color: #000000; letter-spacing: 0.02em; text-transform: none; } #homeslider { display: none; } #mobile-homeslider { display: block; float: left; height: auto; margin: 0 11.71875%; top: 0; width: 100%; width: 76.5625%; } #mobile-homeslider li a { margin: 0 2%; width: 96%; } #mobile-homeslider .bb-wrap { position: relative; } #mobile-homeslider .slides { margin: 0 auto; width: 300px; } .flex-control-nav { display: none; } #mobile-homeslider .sliders { height: 240px; } /* FlexSlider Browser Resets */ .flex-container a:active, .flex-container a:focus, .flexslider a:active, .flexslider a:focus { outline: none; } .flex-control-nav, .flex-direction-nav, .slides { list-style: none; margin: 0; padding: 0; } .flexslider { margin: 0; padding: 0; } .flexslider .slides > li { -webkit-backface-visibility: hidden; display: none; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flex-pauseplay span { text-transform: capitalize; } .slides:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; } html[xmlns] .slides { display: block; } * html .slides { height: 1%; } .no-js .slides > li:first-child { display: block; } .flexslider { background: transparent; border: none; margin: 0; position: relative; zoom: 1; } .carousel li { margin-right: 5px; } #slider { background: #ffffff; display: block; height: 160px; padding-bottom: 0; padding-top: 0; position: relative; top: 0; } #slider .slides { float: left; float: left; margin: 0; overflow: hidden; width: auto; width: 290px; zoom: 1; } #slider .slides img.center-slide { margin-left: -140px; padding-bottom: 205px; width: 668px; } #slider .slide-messages { float: left; height: 330px; margin: 0; position: relative; text-align: center; top: 200px; width: 100%; } #slider .slide-messages h2, #slider .slide-messages h3 { line-height: 1em; text-align: center; width: 100%; } #slider .slide-messages h2 { font-size: 20px; } #slider .slide-messages h3 { font-size: 50px; letter-spacing: -0.06em; } #slider .slide-messages .btn, #slider .slide-messages .gallery-main-carousel__overlay-action { margin-top: 20px; } #slider .slide-messages li { display: none; height: 330px; margin-top: 10px; position: relative; } } /* ======================== */ /* 768px ======================== */ @media (min-width: 768px) { section.section-slider { height: 360px; overflow: hidden; padding-top: 0; z-index: 1; /* Safari and Chrome */ /* Firefox 4 */ /* Opera */ transition: padding-top 0.18s ease-in-out; } section.section-slider .loadbar { background: #ffffff; } section.section-slider a { color: #ffffff; } section.section-slider a .bb-msg-red { color: #009639; } section.section-slider a:hover { color: #009639; } section.section-slider a:hover .bb-msg-red { color: #000000; } section.section-slider a:hover .campaign { color: #000000; } section.section-slider a:hover .campaign .bb-btn { background-color: #000000; } section.section-slider figure { height: 330px; position: relative; width: 100%; } section.section-slider .bb-wrap { padding: 0; } section.section-slider .bb-msg-wrap { height: 100%; margin: 0; position: absolute; text-align: center; top: 0; width: 350px; z-index: 1; } section.section-slider .slide-logo { display: block; height: 245px; position: relative; text-align: center; width: 350px; } section.section-slider .slide-logo img { margin: 0 auto; } section.section-slider .bb-msg { font-size: 30px; font-weight: bold; letter-spacing: -0.05em; line-height: 1.01em; position: absolute; text-align: center; width: 100%; z-index: 1; } section.section-slider .bb-text { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 18px; max-width: none; position: relative; text-align: center; width: 100%; z-index: 1; } section.section-slider #homeslider { display: block; height: 330px; margin: 0 auto; max-width: 1175px; position: relative; width: auto; } section.section-slider #mobile-homeslider { display: none; } section.section-slider .slides li { height: 330px; margin: 0; padding: 0; position: absolute; top: -660px; width: 100%; } section.section-slider .homeslider-nav { background: #ffffff; display: block; height: auto; padding: 15px 0 25px; position: relative; text-align: center; width: 100%; z-index: 6; } section.section-slider .homeslider-nav li { background: #ddd; display: inline-block; *display: inline; height: 10px; margin: 0 6px; position: relative; width: 16%; zoom: 1; } section.section-slider .homeslider-nav li a { background: #ddd; background: transparent; cursor: pointer; cursor: pointer; display: block; height: 10px; overflow: visible; position: absolute; text-indent: -9999px; text-indent: -9999px; width: 100%; transition: all 0.2s ease-out; } section.section-slider .homeslider-nav li a:hover { background: #009639; transition: all 0.1s ease-in; } section.section-slider .homeslider-nav li a:active { background: #999; } section.section-slider .homeslider-nav li a .flex-active { background: #009639; cursor: default; opacity: 0.9; transition: all 0.1s ease-in; } section.section-slider .homeslider-nav li a .flex-active:hover { opacity: 1; } section.section-slider #slider { background: #ffffff; display: block; height: 258px; position: relative; } section.section-slider #slider .flex-viewport { overflow: hidden; width: 100%; width: auto; } section.section-slider #slider .flex-viewport .slides li { height: 330px; margin: 0; padding: 0; position: relative; top: -2px; } section.section-slider #slider .flex-viewport .slides li h1 { transition: all 0.2s ease-out; } section.section-slider #slider .flex-viewport .slides li img, section.section-slider #slider .flex-viewport .slides li img.center-slide { opacity: 1; transition: all 0.2s ease-out; display: block; height: auto; margin-left: 0; overflow: hidden; padding: 0; width: 1300px; } section.section-slider #slider .flex-viewport .slides li:hover { cursor: pointer; } section.section-slider #slider .flex-viewport .slides li:hover h1 { color: #009639; transition: all 0.2s ease-out; } section.section-slider #slider .flex-viewport .slides li:hover h2 { color: #009639; transition: all 0.1s ease-in; } section.section-slider #slider .flex-viewport .slides li:hover h3 { color: #009639; transition: all 0.1s ease-in; } section.section-slider #slider .flex-viewport .slides li:hover img { opacity: 1; transition: all 0.1s ease-in; } section.section-slider #slider .flex-viewport .slides li:hover .bb-btn { transition: all 0.2s ease-in; border-bottom: 10px solid #009639; } .section-slider.has-bg-img { background-position: top center; background-repeat: repeat-x; padding-bottom: 15px; } .section-slider.has-bg-img .homeslider-nav { background: transparent; } } /*COMPONENTS*/ /* ======================================================================== MASTERBRAND: COMPONENTS ======================================================================== */ /* ======================================================================== COMPONENT: AGE GATE - COMMON ======================================================================== */ body .section.component-page-age-gate .age-gate-container { background-color: #ffffff; border-color: #ffffff; border-style: solid; } body .section.component-page-age-gate .age-gate-container form.age-gate-form .row small { color: #f40000; font-weight: bold; font-size: 0.7em; } body .section.component-page-age-gate .age-gate-container form.age-gate-form input[type="text"], body .section.component-page-age-gate .age-gate-container form.age-gate-form input[type="number"] { background-color: #ffffff; border: 1px solid #949494; } body .section.component-page-age-gate .age-gate-container form.age-gate-form input[type="text"].age-gate-form-error, body .section.component-page-age-gate .age-gate-container form.age-gate-form input[type="number"].age-gate-form-error { border-color: #f40000; border-bottom-width: 3px; } body .section.component-page-age-gate .age-gate-container form.age-gate-form input[type="checkbox"] { background-color: #ffffff; border-color: #949494; } body .section.component-page-age-gate .age-gate-container form.age-gate-form label { color: #474747; } body .section.component-page-age-gate .age-gate-container form.age-gate-form span.age-gate-form-separator { color: #474747; } @media (min-width: 0) { body .section.component-page-age-gate .age-gate-container { border-width: 10px; } } @media (min-width: 768px) { body .section.component-page-age-gate .age-gate-container { border-width: 11px; } } @media (min-width: 1200px) { body .section.component-page-age-gate .age-gate-container { border-width: 12px; } } /* ======================================================================== COMPONENT: ANSWER FOOTER - COMMON ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #Background */ /* #FontWeight */ /* #FontStyle */ /* #LineHeight */ /* :END VARIABLES */ .author-info__container { text-align: left; } .ArticleTextwell .bold, .primary-font-bold, .table-doclib.tablesaw thead tr:first-child th { font-weight: 700; } .ArticleTextwell p span { display: inline; } /* RTE article styles */ .textwell-content { margin: 0 auto 30px; max-width: 728px; } @media (max-width: 768px) { .f-6 .textwell-content { width: 100%; } } .ArticleTextwell { overflow: hidden; text-align: center; width: 100%; } @media screen and (max-width: 767px) { .ArticleTextwell .textwell-content { margin: 15px auto; } } .ArticleTextwell li, .ArticleTextwell p { font-size: 14px; font-weight: 300; line-height: 1.5em; text-align: center; } .f-6 .ArticleTextwell a.btn, .f-6 .ArticleTextwell a.gallery-main-carousel__overlay-action { float: left; margin: 0; min-width: 200px; } @media screen and (max-width: 768px) { .f-6 .ArticleTextwell a.btn, .f-6 .ArticleTextwell a.gallery-main-carousel__overlay-action { float: none; } } .ArticleTextwell img { max-width: 100%; } .ArticleTextwell p img { margin-right: 10px; margin-top: 10px; } .ArticleTextwell .valign-t img { display: inline-block; vertical-align: middle; } .ArticleTextwell .bold, .ArticleTextwell b { font-weight: 700; } .ArticleTextwell .italic, .ArticleTextwell i { font-style: italic; } .ArticleTextwell .left { text-align: left; } .ArticleTextwell .right { text-align: right; } .ArticleTextwell .video-txt { margin-top: 0.8em; } .ArticleTextwell p { line-height: 1.5em; margin-bottom: 2em; } .ArticleTextwell p span.quote { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 30px; line-height: 1.25em; display: block; margin: 35px 50px 35px 60px; } .ArticleTextwell h1, .ArticleTextwell h2, .ArticleTextwell h3, .ArticleTextwell h4, .ArticleTextwell h5, .ArticleTextwell h6 { margin: 0.5em 0; text-align: center; } .ArticleTextwell h1 { font-size: 50px; font-style: italic; line-height: 1em; } .ArticleTextwell h2 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: italic; font-size: 28px; } @media screen and (min-width: 768px) { .ArticleTextwell h2 { font-size: 54px; } } .ArticleTextwell h3, .ArticleTextwell h3.subheadline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: italic; font-size: 28px; margin: 0 auto 8px; } .ArticleTextwell h4, .ArticleTextwell h6 { font-size: 18px; } .ArticleTextwell h4 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: italic; font-size: 13px; padding: 10px 0; } .ArticleTextwell h5 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: italic; font-size: 16px; margin: 0 auto 36px; } .ArticleTextwell ol, .ArticleTextwell ul { clear: both; padding: 0 0 16px 1px; } .ArticleTextwell ol li, .ArticleTextwell ul li { list-style-position: inside; padding: 0 0 0.5em; } .ArticleTextwell ul li { list-style-type: disc; } .ArticleTextwell ol li { list-style-type: decimal; } .ArticleTextwell .art-text-well.center { text-align: center; } .ArticleTextwell .art-text-well.center .ArticleTextwell .tablesaw h3 { text-align: center; } .ArticleTextwell .art-text-well.center .socialicons a { float: left; } .ArticleTextwell .superheadline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 50px; line-height: 50px; margin-bottom: 0.5em; } @media screen and (max-width: 480px) { .ArticleTextwell .superheadline { font-size: 25px; line-height: 25px; margin-top: 30px; } } .ArticleTextwell .video-wrap { margin-top: 10px; } .ArticleTextwell table.tablesaw .tablesaw-cell-label { margin: 0; } .ArticleTextwell table.tablesaw h4 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; } /* Taken from Demo Site Styling */ *:after, *:before { box-sizing: border-box; } .ArticleTextwell.has-bg-img.mild-bg .textwell-content { background: #ffffff; padding: 10px; } @media screen and (min-width: 481px) { .ArticleTextwell.has-bg-img.mild-bg .textwell-content { padding: 1px 20px 20px; } } .ArticleTextwell.has-bg-img.dark-bg .textwell-content h1 h1, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h1 h2, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h1 h3, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h1 h4, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h1 h5, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h1 h6, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h1 p, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h2 h1, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h2 h2, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h2 h3, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h2 h4, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h2 h5, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h2 h6, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h2 p, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h3 h1, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h3 h2, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h3 h3, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h3 h4, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h3 h5, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h3 h6, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h3 p, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h4 h1, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h4 h2, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h4 h3, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h4 h4, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h4 h5, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h4 h6, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h4 p, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h5 h1, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h5 h2, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h5 h3, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h5 h4, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h5 h5, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h5 h6, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h5 p, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h6 h1, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h6 h2, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h6 h3, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h6 h4, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h6 h5, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h6 h6, .ArticleTextwell.has-bg-img.dark-bg .textwell-content h6 p, .ArticleTextwell.has-bg-img.dark-bg .textwell-content p h1, .ArticleTextwell.has-bg-img.dark-bg .textwell-content p h2, .ArticleTextwell.has-bg-img.dark-bg .textwell-content p h3, .ArticleTextwell.has-bg-img.dark-bg .textwell-content p h4, .ArticleTextwell.has-bg-img.dark-bg .textwell-content p h5, .ArticleTextwell.has-bg-img.dark-bg .textwell-content p h6, .ArticleTextwell.has-bg-img.dark-bg .textwell-content p p, .ArticleTextwell.has-bg-img.dark-bg .textwell-content table h1, .ArticleTextwell.has-bg-img.dark-bg .textwell-content table h2, .ArticleTextwell.has-bg-img.dark-bg .textwell-content table h3, .ArticleTextwell.has-bg-img.dark-bg .textwell-content table h4, .ArticleTextwell.has-bg-img.dark-bg .textwell-content table h5, .ArticleTextwell.has-bg-img.dark-bg .textwell-content table h6, .ArticleTextwell.has-bg-img.dark-bg .textwell-content table p { color: #000000; } .ArticleTextwell.has-bg-img.dark-bg .textwell-content a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; } .ArticleTextwell .textwell-content { box-sizing: border-box; } .ArticleTextwell .textwell-content span { display: inline-block; } @media screen and (max-width: 639px) { .ArticleTextwell table img { max-width: 100%; } } @media screen and (max-width: 767px) { .ArticleTextwell .textwell-content h1 { font-size: 42px; } .ArticleTextwell table img { display: block; margin: 0 auto; } } .ArticleTextwell.has-bg-img h2 { color: #000000; } @media (min-width: 0) { .textwell-content { height: auto; margin: 0 auto; width: 96%; } .ArticleTextwell { text-align: center; } .ArticleTextwell p span.quote { font-size: 20px; margin: 30px 10px; max-width: 100%; } } @media (min-width: 768px) { .textwell-content { margin: 36px auto; max-width: 728px; } } @media (min-width: 768px) and (max-width: 768px) { .f-6 .textwell-content { width: 100%; } } @media (min-width: 768px) { .ArticleTextwell { text-align: center; } } /* Image/Video Component */ .video-wrap .fluid-width-video-wrapper { position: relative; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .video-wrap .fluid-width-video-wrapper { /* IE10+ specific styles go here */ padding-top: 66.9767%; } } .video-wrap { float: none; overflow: hidden; width: 100%; } .Image.section { display: block; overflow: hidden; text-align: center; width: 100%; } .Image.section small { display: block; text-align: center; } .Image.section img { display: block; height: auto; transition: all 0.3s ease; } @media (min-width: 0) { .Image.section img, .video-container { margin: 0 auto; max-width: 100%; } } @media screen and (min-width: 0) and (max-width: 767px) { .Image.section img + small, .video-container + small { margin-top: 10px; } } @media (min-width: 768px) { .Image.section img, .video-container { max-width: 728px; width: auto; } } @media (min-width: 768px) and (max-width: 768px) { .f-6 .Image.section img, .f-6 .video-container { width: 100%; } } /* 1024px ======================== */ @media (min-width: 1024px) { .ArticleTextwell .textwell-content h1, .ArticleTextwell .textwell-content h2, .ArticleTextwell .textwell-content p { width: 100%; } } /* ======================================================================== COMPONENT: ANSWER HEADER - COMMON ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #FontWeight */ /* #LineHeight */ /* :END VARIABLES */ /* Base CSS for ARTH-01-B */ @media (min-width: 481px) { .article-header { padding: 40px 0; } } .article-header { text-align: center; } .article-header .article-header__author-info-byline { font-size: 16px; } .article-header .article-header__main { margin: 0 auto; max-width: 728px; } .article-header .article-header__title { color: #009639; font-size: 25px; font-weight: 900; line-height: 120% !important; margin: 20px auto 15px; } @media (min-width: 481px) { .article-header .article-header__title { font-size: 40px; } } .article-header .article-header__author-info-container span[class^='article-'] { display: inline-block; } .article-header .article-header__avatar-container { margin: 20px auto; } .article-header .article-header__avatar { display: inline; } .article-header .article-header__avatar figure { background-position: center; background-size: cover; border-radius: 30px; display: inline-block; height: 60px; margin: 0; width: 60px; } .article-header .article-header__category-container { color: #009639; } .article-header .article-header__category-container a, .article-header .article-header__category-container li { font-weight: 900; } .article-header .article-header__category-container li { display: inline-block; font-weight: bold; } .article-header .article-header__category-container li:last-child:after { visibility: hidden; } .article-header .article-header__category-container li:after { content: ", "; margin: 0 3px 0 -4px; } /* ======================================================================== COMPONENT: ARTICLE TIER - COMMON ======================================================================== */ /* :START VARIABLES */ /* #Background Color */ /* :END VARIABLES */ .section-history-dyk { padding-top: 0; } .section-history-dyk .main { background-color: #ffffff; left: auto; margin: 0; padding: 0; width: 100%; } .section-history-dyk .main .centered { background: #f1f1f1; margin: 0 10px; padding: 10px 0; } .section-history-dyk .main .centered .history-headline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; text-transform: none; margin-top: 0; } /* ======================================================================== COMPONENT: AUDIO TIER - COMMON ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #FontWeight */ /* #LineHeight */ /* #BackgroundColor */ /* :END VARIABLES */ /** SoundManager 2 + useFlashBlock ------------------------------ Flash positioning and flashblock / clicktoflash handling */ #sm2-container { height: 1px; overflow: hidden; /* screw IE 6, just make it display nice */ _overflow: hidden; /** where the SM2 flash movie goes. by default, relative container. set relative or absolute here, and don't touch it later or bad things will happen (see below comments.) */ position: absolute; width: 1px; } #sm2-container embed, #sm2-container object { /** the actual SWF movie bit. important: The SWF needs to be able to be moved off-screen without display: or position: changes. changing display: or position: or overflow: here or on parent can cause SWF reload or other weird issues after unblock e.g., SM2 starts but strange errors, no whileplaying() etc. */ background-color: transparent; height: 48px; max-height: 48px; /* some flash blockers may also respect this rule */ max-width: 48px; width: 48px; } #sm2-container.swf_timedout { height: 48px; /* expand to show the timed-out SWF content */ position: relative; width: 48px; } #sm2-container.swf_timedout, #sm2-container.swf_timedout embed, #sm2-container.swf_timedout object { min-height: 48px; /** when SM2 didn't start normally, time-out case. flash blocked, missing SWF, no flash? 48px square flash placeholder is typically used by blockers. */ min-width: 48px; } #sm2-container.swf_unblocked { height: 1px; /* SWF unblocked, or was never blocked to begin with; try to collapse container as much as possible. */ width: 1px; } #sm2-container.swf_loaded embed, #sm2-container.swf_loaded object, #sm2-container.swf_unblocked embed, #sm2-container.swf_unblocked object { /* hide flash off-screen (relative to container) when it has loaded OK */ left: -9999em; top: -9999em; } #sm2-container.swf_error { /* when there is a fatal error (flash loaded, but SM2 failed) */ display: none; } #sm2-container.high_performance, #sm2-container.high_performance.swf_timeout { /* "high performance" case: keep on-screen at all times */ position: absolute; position: fixed; } #sm2-container.high_performance { bottom: 0; /* IE 6 hax, no position:fixed */ _left: -9999px; left: 0; overflow: hidden; _top: -9999px; /** special case: show at first with w/h, hide when unblocked. might be bad/annoying. try to stay within ClickToFlash "invisible" limits (so it won't be blocked.) */ z-index: 99; /* try to stay on top */ } #sm2-container.high_performance.swf_loaded, #sm2-container.high_performance.swf_unblocked { z-index: auto; } #sm2-container.high_performance.swf_loaded, #sm2-container.high_performance.swf_unblocked, #sm2-container.high_performance.swf_unblocked embed, #sm2-container.high_performance.swf_unblocked object { /** 8x8px is required minimum to load in fx/win32 in some cases(?) 6x6+ good for fast performance, even better when on-screen via position:fixed also, clickToFlash (Safari <5.1) may auto-load "invisible" SWFs at this size */ height: 8px; width: 8px; } #sm2-container.high_performance.swf_loaded { bottom: 0; left: 0; /* stay bottom/left */ top: auto; } #sm2-container.high_performance.swf_loaded embed, #sm2-container.high_performance.swf_loaded object, #sm2-container.high_performance.swf_unblocked embed, #sm2-container.high_performance.swf_unblocked object { /* high-performance case must stay on-screen */ left: auto; top: auto; } #sm2-container.high_performance.swf_timedout { z-index: 99; /* try to stay on top */ } /* General warning: Beta-ish. Code could be a bit cleaner. */ .ui360, .sm2-360ui { /* canvas container */ position: relative; /* should always be at least this. */ min-height: 50px; min-width: 50px; } .ui360, .ui360 * { vertical-align: middle; } .sm2-360ui { display: inline-block; /* IE 6+7, firefox 2 needs this, inline-block would work with fx3 and others */ *display: inline; /* firefox 3 et al */ float: left; position: relative; } .sm2-360ui.sm2_paused, .sm2-360ui.sm2_playing { /* bump on top when active */ z-index: 10; } .ui360 a { color: #000000; display: inline; /* .sm2_link class added to playable links by SM2 */ float: left; left: 3px; position: relative; text-decoration: none; /* vertical align */ text-indent: 50px; /* slight spacing on left UI */ top: 18px; /* make room for UI at left */ } .ui360 a.sm2_link { /* UI now in place. */ display: none; /* SM2 has now started */ text-indent: 0; } .ui360 a, .ui360 a:focus, .ui360 a:hover { margin-left: -2px; margin-top: -2px; padding: 2px; } .ui360 a:focus, .ui360 a:hover { color: #000000; outline: none; } .ui360 .sm2-canvas { left: 0; position: absolute; top: 0; } .ui360 .sm2-timing { color: #777777; display: block; font: 16px; height: 100%; left: 0; line-height: 50px; margin: -10px 0 0; position: absolute; text-align: center; top: 0; width: 100%; } .ui360 .sm2-timing.alignTweak { text-indent: 1px; /* devious center-alignment tweak for Safari (might break things for others.) */ } .ui360 .sm2-cover { background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 2; /* old-skool bug: IE 9 won't catch mouse events otherwise. /smash */ } .ui360 .sm2-360btn { border-radius: 25px; cursor: pointer; display: block; height: 50px; left: 50%; margin-left: -25px; margin-top: -25px; position: absolute; top: 50%; width: 50px; z-index: 3; } .ui360 .sm2-360data { display: inline-block; } .sm2-inline-block .ui360 .sm2-360btn, .ui360 .sm2-360ui.sm2_paused .sm2-360btn, .ui360 .sm2-360ui.sm2_playing .sm2-360btn { height: 22px; margin-left: -11px; margin-top: -11px; /* smaller clickable button, in center */ width: 22px; } .ui360 .sm2-360ui.sm2_paused .sm2-cover, .ui360 .sm2-360ui.sm2_playing .sm2-cover { display: block; } /* this could be optimized a fair bit. */ .ui360, .ui360 .sm2-360btn-default, .ui360 .sm2-360ui.sm2_paused .sm2-360btn { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABoUlEQVR42sWVu2oCQRhGU/s8gpVYJeQJNkZSbiH4QNuLlQZS21sJayGYaOEFVFDxNiremj9zig2uzk5YQpKFg8PMd75ZZle9E5Ff4e+Ll8tlQuNoPI2vUcCYOdbIxCmm9F5T0YgNMmS/LebSwWdNa7VayXq9ls1mI9vtVna7nQBj5lgjQxYHN7KY3QkiUbDf7+V4PMrpdArBHGtkyOJc3/n1mVaUUl+F5/PZSrABDi4dpmKH3QkixQEHlw5TsccZmsRCoSD1et1ajkuHqdg/HA5GKZPJCOTzeanVasYMLh2mYsXDIGAoDuG6rlSr1WCdBxrcsTIWazgrQiHS6bSRYJ3XDzeq2O/3+9Ltdm9IpVIhstmslEqlUAY36ii8ZrMpjUbjhmQyKeA4jhSLRWMGN+rhOZ1Oh8ANuVxOyuUy40hwo163RK/XeyPQbrdjgYNr/ILAYDB41Gf1wZnFAQfX+iM0HA5fxuPx+2g0Ej22QoYsDq61mGsymTxMp9NX/Sk2yJDFsRZfXpzXbDZ7WiwW3nw+9zUKGDPHGpkL5V//mn7OJyJZApyzeUS5AAAAAElFTkSuQmCC"); background-repeat: no-repeat; } .ui360 .sm2-360btn-default, .ui360 .sm2-360ui.sm2_paused .sm2-360btn { cursor: pointer; } .ui360 .sm2-360ui.sm2_playing .sm2-timing { visibility: visible; } .ui360 .sm2-360ui.sm2_buffering .sm2-timing { visibility: hidden; } .ui360 .sm2-360ui .sm2-360btn:hover + .sm2-timing, .ui360 .sm2-360ui .sm2-timing, .ui360 .sm2-360ui.sm2_paused .sm2-timing { visibility: hidden; } .ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover + .sm2-timing, .ui360 .sm2-360ui.sm2_dragging .sm2-timing { /* paused + dragging */ visibility: visible; } .ui360 .sm2-360ui.sm2_dragging .sm2-360btn, .ui360 .sm2-360ui.sm2_dragging .sm2-360btn-playing:hover, .ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover, .ui360 .sm2-360ui.sm2_playing .sm2-360btn { /* don't let pause button show on hover when dragging (or paused and dragging) */ background: transparent; cursor: auto; } .ui360 .sm2-360ui.sm2_buffering .sm2-360btn, .ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover { background: transparent url("/etc/designs/projectux-masterbrand/clientlib/img/icon_loading_spinner.gif") no-repeat 50% 50%; opacity: 0.5; visibility: visible; } /* inline list style */ .sm2-inline-block .ui360, .sm2-inline-list .ui360 { display: inline-block; _display: inline; float: left; margin-bottom: -15px; position: relative; } .sm2-inline-list .ui360 { /* inline player: minor tweak, tighten spacing */ margin-right: -2px; } .sm2-inline-block .ui360 { margin-right: 8px; } .sm2-inline-list .ui360 a { display: none; } /* annotations */ ul.ui360playlist { list-style-type: none; margin: 0; padding: 0; } ul.ui360playlist li { margin: 0; padding: 0; } div.ui360 div.metadata { display: none; } div.ui360 a span.metadata, div.ui360 a span.metadata * { /* name of track, note etc. */ vertical-align: baseline; } /* larger canvas, spectrum + EQ visualization and other items */ .sm2-inline-list .ui360-vis, .ui360-vis, .ui360-vis .sm2-360ui { background: none; display: block; float: left; height: 230px; /* size of the container for the circle, etc. */ width: 230px; } .ui360-vis { background-position: 22.6% 50%; margin-left: 0; padding-bottom: 1px; /* a little extra spacing */ padding-top: 1px; position: relative; /* (~109px) initial play button position */ } .sm2-inline-list .ui360-vis { cursor: pointer; } .ui360-vis a { font: 16px; text-indent: 0; /* undo inline style */ top: 46%; white-space: nowrap; /* ehh. */ } .sm2-inline-list .ui360-vis a { line-height: 256px; top: auto; } .ui360-vis .sm2-timing { color: #444444; font: bold 24px; line-height: 256px; text-align: center; text-indent: 0; } .sm2-inline-list .ui360-vis, .sm2-inline-list .ui360-vis .sm2-360ui { margin-left: 0; } .sm2-inline-list .ui360-vis { background-position: 50% 50%; margin: 8px 13px 7px 0; padding-left: 0; /* initial play button position */ } .sm2-inline-list .ui360-vis .sm2-360ui { border: 1px solid #eee; /* offset the border */ margin-left: -1px; margin-top: -1px; } .sm2-inline-list .ui360-vis a { border-radius: 0; bottom: 0; color: #444444; display: inline; font-size: small; font-weight: 300px; /* 2px padding in box */ height: 99%; /* dumb vertical hack */ *height: 256px; left: 0; line-height: 488px; /* bottom vertical alignment for text */ *line-height: 480px; margin: 0; /* IE is dumb. */ overflow: hidden; padding: 0; position: absolute; /* IE again */ text-align: center; top: 1px; width: 100%; } .sm2-inline-list .ui360 a:hover { background-color: transparent; /* reset */ } .sm2-inline-list .ui360-vis a.sm2_link:active, .sm2-inline-list .ui360-vis a.sm2_link:focus, .sm2-inline-list .ui360-vis a.sm2_link:hover, .sm2-inline-list .ui360-vis:hover .sm2-360ui { background-color: transparent; } .sm2-inline-list .ui360-vis:hover a.sm2_link { *background-color: transparent; } /* Use a bigger loading image for this layout */ .ui360-vis .sm2-360btn, .ui360-vis .sm2-360ui.sm2_paused .sm2-360btn, .ui360-vis .sm2-360ui.sm2_playing .sm2-360btn { border-radius: none; height: 48px; margin-left: -24px; margin-top: -24px; width: 48px; } .ui360-vis .sm2-360btn-default, .ui360-vis .sm2-360ui.sm2_paused .sm2-360btn { -webkit-mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-play.svg); mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-play.svg); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; background: #949494; cursor: pointer; } .ui360-vis .sm2-360btn-default:hover, .ui360-vis .sm2-360ui.sm2_paused .sm2-360btn:hover { background: #009639; } .ui360-vis .sm2-360btn-playing:hover, .ui360-vis .sm2-360ui.sm2_playing .sm2-360btn:hover { -webkit-mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-pause.svg); mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-pause.svg); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; background: #009639; cursor: pointer; } .ui360-vis:hover .sm2-360btn { background: #009639; } .ui360-vis .sm2-360ui.sm2_dragging .sm2-360btn { visibility: hidden; } /* 0px =========================== */ @media (min-width: 0) { .audio-wrap { margin: 0 auto; max-width: 100%; width: 300px; } .audio-wrap .grid-3-col-slider .item a .item-txt { display: block; } .audio-wrap .item { float: none; width: auto; } .audio-wrap .grid-3-col-slider .item a.audio-link { margin: auto; width: 210px; } } @media screen and (min-width: 0) and (max-width: 480px) { .audio-wrap .grid-3-col-slider .item .sm2-360ui { margin: 0 0 0 16%; max-width: 100%; position: relative; } .audio-wrap .grid-3-col-slider .item .sm2-360ui canvas { max-width: 100%; } } @media screen and (min-width: 0) and (max-width: 819px) { .section-3-col-slider.has-bg-img.light-bg .slides .item:hover a .item-txt h3, .section-3-col-slider.has-bg-img.light-bg .slides .item:hover a .item-txt p, .section-3-col-slider.has-bg-img.mild-bg .slides .item:hover a .item-txt h3, .section-3-col-slider.has-bg-img.mild-bg .slides .item:hover a .item-txt p { color: #000000; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { .audio-wrap .grid-3-col-slider { margin: 4px; } .audio-wrap .grid-3-col-slider .item { margin: 0 auto; width: 250px; } .audio-wrap .grid-3-col-slider .item a.audio-link { margin: 0 auto; width: 230px; } .audio-wrap .grid-3-col-slider .item .item-txt h3 { font-size: 20px; } } @media screen and (min-width: 481px) and (max-width: 819px) { .audio-wrap .grid-3-col-slider .item .sm2-360ui { float: none; margin: 0 0 0 14%; position: relative; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .audio-wrap { width: 90%; } .audio-wrap .grid-3-col-slider .item .sm2-360ui { margin: 0 0 0 -14%; } .audio-wrap .grid-3-col-slider { margin: 0 0 10px 25px; } } /* =============================== */ /* 820px ======================== */ @media (min-width: 820px) { .section-3-col-slider .main .audio-wrap { margin: 0 auto; width: 820px; } .section-3-col-slider .main .audio-wrap .grid-3-col-slider { margin: 0 0 10px 7%; } .section-3-col-slider .main .audio-wrap .grid-3-col-slider .item { float: left; padding: 0 20px; width: 230px; } } @media (min-width: 1024px) { .section-3-col-slider .main .audio-wrap .grid-3-col-slider { margin: 0 0 10px 50px; } } /* =============================== */ /* 1200px ======================== */ @media (min-width: 1200px) { .section-3-col-slider .main .audio-wrap { width: 930px; } .section-3-col-slider .main .audio-wrap .grid-3-col-slider { margin: 0 0 10px 70px; } } /* =============================== */ /* PRINT ======================== */ /* =============================== */ /* ======================================================================== COMPONENT: Brand logo grid Default Styles for 0px and up Put as much here as possible, for mobile-first approach Override as needed going down the sheet. ======================================================================== */ /* :START VARIABLES */ /* #Background Color */ /* :END VARIABLES */ @media all and (min-width: 0px) { .section-logos { /* elm-logo */ } .section-logos .shelf-content-wrap { float: left; height: auto; width: 100%; } .section-logos .grid-6-slider { float: left; height: auto; margin: 0 23.333333333%; width: 53.333333333%; } .section-logos .item.flex-active-slide { margin-bottom: 20px; } .section-logos .item img { -ms-transform: none; transform: none; } .section-logos .elm-logo { margin: 0 auto; width: 150px; } .section-logos .elm-logo a { background: white; display: block; height: 150px; margin: 0; overflow: hidden; position: relative; width: 150px; transition: all 0.2s ease-out; } .section-logos .elm-logo a img { height: auto; opacity: 1; position: relative; width: 100%; } .section-logos .elm-logo a img.logofpo { opacity: 1; } .section-logos .elm-logo a:hover { transition: all 0.1s ease-out; background: white; } .section-logos .elm-logo a:hover img { margin-top: -150px; opacity: 1; } .section-logos .flex-active-slide img { margin-top: -150px; } /* section logos */ } /*min-width 0*/ /* 0px =========================== */ @media screen and (min-width: 0) and (max-width: 480px) { .section-logos .flex-active-slide a img { margin-top: -150px; } } /* 480px ======================== */ @media (min-width: 481px) { .section-logos .main { left: 0; margin-left: 0; width: 100%; } .section-logos .main .slides .item { padding-bottom: 25px; } .section-logos .main .revealer.slides { padding-bottom: 0; top: -25px; } .section-logos .main .grid-6-slider { float: none; height: auto; margin: 0 auto; width: 100%; } .section-logos .main .grid-6-slider .slidecount-5 .item:first-child { margin-left: 8.3333333325%; } .section-logos .main .grid-6-slider .slidecount-4 .item:first-child { margin-left: 16.666666666%; } .section-logos .main .grid-6-slider .slidecount-3 .item:first-child { margin-left: 24.9999999995%; } .section-logos .main .grid-6-slider .slidecount-2 .item:first-child { margin-left: 33.333333333%; } .section-logos .main .grid-6-slider .slidecount-1 .item { margin-left: 41.6666666665%; } .section-logos .main .item { width: 16.666666667%; } .section-logos .main .elm-logo { float: none; margin: 0 auto; width: 73px; } .section-logos .main .elm-logo a { background-color: transparent; height: 73px; margin: 0; width: 73px; } .section-logos .main .elm-logo a:hover { background-color: #ffffff; } .section-logos .main .elm-logo a:hover img { margin-top: -73px; } .mild-bg.section-logos.has-bg-img .item a { background: #ffffff; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .section-logos .main .elm-logo { width: 100px; } .section-logos .main .elm-logo a { height: 100px; width: 100px; } .section-logos .main .elm-logo a:hover img { margin-top: -100px; } } /* =============================== */ /* 1024px ======================== */ @media (min-width: 1024px) { .section-logos .main { float: left; left: 50%; margin-left: -450px; width: 900px; } } /* =============================== */ .section-logos h2.headline:empty { display: none; } /* ======================================================================== COMPONENT: Billboard ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #BorderColor */ /* #LineHeight */ /* #BackgroundColor */ /* :END VARIABLES */ /*CUSTOM*/ /*internal-button*/ /*external-button*/ /*texts - headline*/ /*texts - subheadline*/ /* 0px =========================== */ @media (min-width: 0) { .billb-wrap { display: block; margin: 0; min-height: 500px; padding: 0; position: relative; width: 100%; } .billb-msg-wrap { background: #ffffff; margin: 0 auto; max-width: 100%; padding: 5%; position: relative; top: -60px; width: 84%; z-index: 1; } .bb-btn { display: none; } .billb-msg { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 18px; line-height: 1.3em; color: #474747; display: block; letter-spacing: -0.03em; text-align: center; padding-top: 0; } .billb-logo-text, .billb-text { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 22px; line-height: 1.03em; color: #000000; display: block; letter-spacing: -0.03em; margin: 0 0 20px; text-align: center; } .billb-logo-text.black, .billb-text.black { color: #000000; } .billb-text-wrap span.btn, .billb-text-wrap span.gallery-main-carousel__overlay-action { display: none; } .billb-text-wrap { text-align: center; width: 100%; } /* don't display logos on mobile */ .billb-slide-logo, .slide-logo { display: none; } .billb-figure { -webkit-margin-after: 0; -webkit-margin-before: 0; -webkit-margin-end: 0; -webkit-margin-start: 0; -webkit-transform: translate3d(0, 0, 0); background-position: 50% 0; background-size: cover; height: 350px; margin: 0; padding: 0; position: relative; width: 100%; } .billb-msg-wrap.billb-centercampaign .billb-text, .billb-msg-wrap.billb-centercampaign .billb-text-wrap, .billb-msg-wrap.billb-leftcampaign .billb-text, .billb-msg-wrap.billb-leftcampaign .billb-text-wrap, .billb-msg-wrap.billb-rightcampaign .billb-text, .billb-msg-wrap.billb-rightcampaign .billb-text-wrap, .billb-msg-wrap.campaign .billb-text, .billb-msg-wrap.campaign .billb-text-wrap { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 20px; color: #474747; letter-spacing: 0.02em; text-transform: none; } .billb-msg-wrap.billb-centercampaign .billb-msg, .billb-msg-wrap.billb-leftcampaign .billb-msg, .billb-msg-wrap.billb-rightcampaign .billb-msg, .billb-msg-wrap.campaign .billb-msg { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 25px; line-height: 30px; color: #000000; letter-spacing: 0.02em; text-transform: none; } .bb-btn { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 14px; color: #ffffff; background: #b9b9b9; display: inline-block; margin: 5px auto; min-width: 200px; padding: 7px 10px; position: relative; text-align: center; text-transform: uppercase; transition: all 0.2s ease-out; } .bb-btn:hover { transition: all 0.2s ease-in; background: #b9b9b9; } } /* ======================== */ /* 768px ======================== */ @media (min-width: 768px) { /* show the logo when not in mobile, hide the text version */ .billb-logo-text { display: none; } .billb-slide-logo { background-repeat: no-repeat; display: block; float: left; } .billb-text-wrap { float: left; text-align: center; } .billb-text-wrap span.btn, .billb-text-wrap span.gallery-main-carousel__overlay-action { display: inline-block; margin-top: 10px; } .billb-text { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 22px; color: #000000; margin: 0 0 15px; } .billb-msg.white { color: #ffffff; } .billb-figure { height: 310px; width: 100%; } /* overrides for dark billboards */ .billb-dark.billb-wrap { color: #ffffff; } .billb-dark.billb-wrap .billb-logo-text, .billb-dark.billb-wrap .billb-msg, .billb-dark.billb-wrap .billb-text { color: #ffffff; } .billb-dark.billb-wrap a:hover .billb-logo-text, .billb-dark.billb-wrap a:hover .billb-msg, .billb-dark.billb-wrap a:hover .billb-text { color: #009639; } /* override for color backgrounds */ .billb-wrap:hover .billb-msg.hoverwhite { color: #000000; } .billb-wrap:hover .billb-msg.hoverblack { color: #000000; } a:hover .billb-text { color: #000000; } a:hover .billb-msg { color: #000000; } a:hover .billb-msg.white { color: #000000; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .billb-wrap, .billb-wrap figure { height: 70vw; } .billb-wrap.billb-tall, .billb-wrap.billb-tall figure { height: 430px; } } /* =============================== */ @media (min-width: 1024px) { .billb-wrap, .billb-wrap figure { height: 36vw; } .billb-msg-wrap { background: #ffffff; padding: 5%; position: absolute; right: 0; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); width: 41%; z-index: 1; } .billb-msg-wrap { padding: 5% 0 5% 5%; } .billb-msg { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 18px; line-height: 1.3em; color: #474747; display: block; letter-spacing: -0.03em; text-align: left; } .billb-msg { padding-top: 0; } .billb-logo-text, .billb-text { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 22px; line-height: 1.03em; color: #000000; display: block; letter-spacing: -0.03em; margin: 0 0 36px; text-align: left; } .billb-text-wrap { text-align: left; } .bb-btn { display: inline-block; } } /* 1200px ======================== */ @media (min-width: 1200px) { .billb-figure { background-size: cover; margin: 0 auto; } } /* =============================== */ /* Carousel - General*/ .carousel__loading, .carousel__loading--center { background: #000 url("/etc/designs/projectux/clientlib-the3rd/fancy-box/img/fancybox_loading.gif") center center no-repeat; background-color: rgba(0, 0, 0, 0.1); background-position: 0 -108px; border-radius: 12px; height: 44px; left: 50%; margin-left: -22px; opacity: 0.8; position: absolute; top: 100px; width: 44px; z-index: 8060; } @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-webkit-min-device-pixel-ratio: 1.3020833333333333), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) { .carousel__loading, .carousel__loading--center { background-image: url("/etc/designs/projectux/clientlib-the3rd/fancy-box/img/fancybox_loading@2x.gif"); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ } } .carousel__bullet, .carousel__toggle-slideshow, .billboard-carousel__pagination-switch { background: #222; background-color: #ffffff; border: 0.1em rgba(0, 0, 0, 0.2) solid; border-radius: 14px; box-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.2); cursor: pointer; display: inline-block; font-size: 0; height: 15px; opacity: 1; position: relative; width: 15px; vertical-align: top; } .carousel__bullet:focus, .carousel__toggle-slideshow:focus, .billboard-carousel__pagination-switch:focus { outline: 1px dotted #b9b9b9; } @media (min-width: 481px) { .carousel__bullet, .carousel__toggle-slideshow, .billboard-carousel__pagination-switch { border-radius: 18px; height: 18px; width: 18px; } } .carousel__toggle-slideshow { background-color: transparent; border-color: transparent; } .carousel__toggle-slideshow:before { border-left: 7px solid #ffffff; border-right: 7px solid #ffffff; height: 15px; left: 50%; margin-left: -4px; width: 15px; } .carousel__loading--center { margin-top: -22px; top: 50%; } .carousel--loading { opacity: 0; } .carousel--loaded { transition: opacity 0.6s ease-out; opacity: 1; } .carousel__nav-round, .carousel__nav-angle { background-position: 0 0; background-repeat: no-repeat; cursor: pointer; display: inline-block; height: 44px; margin-top: -16px; position: absolute; text-indent: -9999px; top: 40%; width: 22px; transition: none; } .carousel__nav-round, .carousel__nav-angle { -ms-transform: translateY(-50%); background-image: none; height: 41px; margin: 1px 0 0; top: 50%; transform: translateY(-50%); width: 20px; } .carousel__nav-round::after, .carousel__nav-angle::after, .carousel__nav-round::before, .carousel__nav-angle::before { color: #ffffff; display: block; font-size: 40px; position: absolute; top: 0; font-family: 'cc-go'; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; text-indent: 0; transition: color 0.2s ease-out; } .carousel__nav-round:active::after, .carousel__nav-angle:active::after, .carousel__nav-round:active::before, .carousel__nav-angle:active::before, .carousel__nav-round:hover::after, .carousel__nav-angle:hover::after, .carousel__nav-round:hover::before, .carousel__nav-angle:hover::before { color: #b9b9b9; } .carousel__nav-round--prev::before, .carousel__nav-angle--prev::before { content: "\e906"; left: 0; } .carousel__nav-round--next::after, .carousel__nav-angle--next::after { content: "\e907"; right: 0; } .carousel__nav-round:hover, .carousel__nav-angle:hover { background-position: -33px 0; transition: none; } .carousel__nav-round--prev, .carousel__nav-angle--prev { left: 40px; } .carousel__nav-round--next, .carousel__nav-angle--next { right: 40px; } .carousel__nav-angle::after, .carousel__nav-angle::before { color: #ffffff; } .carousel__nav-angle--prev { left: 5px; top: 40%; } @media screen and (min-width: 1024px) { .carousel__nav-angle--prev { left: 10px; } } .carousel__nav-angle--next { right: 5px; top: 40%; } @media screen and (min-width: 1024px) { .carousel__nav-angle--next { right: 10px; } } /* Actions grouped together on the bar should by default, be vertically aligned */ .carousel__action-bar { position: relative; text-align: center; } .carousel__action-bar-item { vertical-align: middle; } .carousel__nav-hide { display: none; } .carousel__nav-loop-hide { display: none; } /* ==================== OVERLAY variable, extend and inheritance component for overlay. ==================== */ .carousel__overlay--white, .gallery-main-carousel__slide-caption .gallery-main-carousel__overlay { background: rgba(255, 255, 255, 0.7); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 10000; } .carousel__overlay, .gallery-thumbnail-carousel__overlay, .gallery-main-carousel__overlay, .gallery-carousel__overlay-img:before { background: rgba(0, 0, 0, 0.3); background-image: url("/etc/designs/P/5631383682678784/clientlib/img/video-overlay.png"); background-repeat: repeat-x repeat-y; height: 100%; image-rendering: optimizeSpeed; left: 0; position: absolute; top: 0; width: 100%; z-index: 10; } .carousel__overlay-msg, .gallery-carousel-logout-mgs-description, .gallery-carousel-logout-mgs-action-wrap, .gallery-main-carousel__overlay-headline, .gallery-main-carousel__overlay-description, .gallery-main-carousel__overlay-msg-action-wrap { font-size: 13px; font-weight: 600; text-align: center; } /* ======================================*/ /* Billboard Carousel */ .billboard-carousel__slide-caption-headline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; line-height: 1em; color: #ffffff; } @media screen and (max-width: 480px) { .billboard-carousel__slide-caption-headline { font-size: 44px; } } @media (min-width: 768px) { .billboard-carousel__slide-caption-headline { font-size: 44px; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .billboard-carousel__slide-caption-headline { font-size: 44px; } } .billboard-carousel__slide-caption-subheadline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 16px; line-height: 1.2em; color: #ffffff; } @media screen and (max-width: 1024px) { .billboard-carousel__slide-caption-subheadline { font-size: 28px; } } .billboard-carousel__slide-caption-link { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; text-align: center; vertical-align: middle; } /* =================================================================== */ section.billboard-carousel { padding-top: 0; position: relative; } section.billboard-carousel h2.headline { padding-top: 35px; } section.billboard-carousel a:focus { outline: 1px dotted #b9b9b9; } section.billboard-carousel .carousel__bullet, section.billboard-carousel .carousel__toggle-slideshow, section.billboard-carousel .billboard-carousel__pagination-switch { border-radius: 50%; height: 12px; padding: 0; width: 12px; } .billboard-carousel + .divider { float: none; margin: 0 auto; } .billboard-carousel__container { -webkit-backface-visibility: hidden; backface-visibility: hidden; margin: 0 auto; overflow: hidden; position: relative; width: 100%; /* Fix of Webkit flickering */ z-index: 1; } .billboard-carousel__wrapper { position: relative; transform: translate3d(0px, 0, 0); transition-duration: 0s; transition-property: transform, left, top; transition-timing-function: ease; width: 100%; } section.billboard-carousel .share-controls { padding: 0 36px; } @media (max-width: 479px) { section.billboard-carousel .share-controls .section-social-sharing { left: 26px; } } section.billboard-carousel .share-controls .section-social-sharing .social-share-and-like { margin: 7px 5px 0; } section.billboard-carousel .share-controls .social-icons { text-align: left; } section.billboard-carousel .share-controls .share-icon { margin: 0 3px; } section.billboard-carousel .share-controls .share-icon a { height: 25px; width: 25px; } .billboard-carousel__container .billboard-carousel__pagination--share-enabled { top: calc(100% - 128px); } .billboard-carousel__container .billboard-carousel__slide-caption--share-enabled { bottom: calc(14% + 80px); } @media (min-width: 768px) { .billboard-carousel__container .billboard-carousel__slide-caption--share-enabled { bottom: calc(20% + 80px); } } .billboard-carousel__container .carousel__nav-round--share-enabled { top: calc(50% - 45px); } /* =================================================================== */ .billboard-carousel__pagination { -ms-transform: translateX(-50%); bottom: 32px; height: 12px; left: 50%; position: absolute; text-align: center; top: auto; transform: translateX(-50%); z-index: 20; display: block; } .billboard-carousel__pagination:after, .billboard-carousel__pagination:before { clear: both; content: " "; display: table; } .billboard-carousel__pagination button { margin-right: 0; } .billboard-carousel__pagination button + button { margin-left: 10px; } @media screen and (min-width: 375px) { .billboard-carousel__pagination button + button { margin-left: 12px; } } @media screen and (max-width: 767px) { .billboard-carousel__pagination { bottom: 30px; } } .billboard-carousel__pagination-switch { display: inline-block; float: none; top: -2px; } .billboard-carousel__pagination .carousel__toggle-slideshow { display: inline-block; float: right; border-radius: 0px !important; top: -2px; } .billboard-carousel__pagination-switch--active { background-color: #009639; } .billboard-carousel__pagination .carousel__nav-round, .billboard-carousel__pagination .carousel__nav-angle { -ms-transform: translateY(-50%); background-image: none; height: 41px; margin: 1px 0 0; top: 50%; transform: translateY(-50%); width: 20px; color: transparent; } .billboard-carousel__pagination .carousel__nav-round::after, .billboard-carousel__pagination .carousel__nav-angle::after, .billboard-carousel__pagination .carousel__nav-round::before, .billboard-carousel__pagination .carousel__nav-angle::before { color: #ffffff; display: block; font-size: 40px; position: absolute; top: 0; font-family: 'cc-go'; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; text-indent: 0; transition: color 0.2s ease-out; } .billboard-carousel__pagination .carousel__nav-round:hover::after, .billboard-carousel__pagination .carousel__nav-angle:hover::after, .billboard-carousel__pagination .carousel__nav-round:hover::before, .billboard-carousel__pagination .carousel__nav-angle:hover::before { color: #009639; } .billboard-carousel__pagination .carousel__nav-round--prev, .billboard-carousel__pagination .carousel__nav-angle--prev { left: -58px; } .billboard-carousel__pagination .carousel__nav-round--prev::before, .billboard-carousel__pagination .carousel__nav-angle--prev::before { content: "\e906"; right: 0; } .billboard-carousel__pagination .carousel__nav-round--next, .billboard-carousel__pagination .carousel__nav-angle--next { right: -58px; } .billboard-carousel__pagination .carousel__nav-round--next::after, .billboard-carousel__pagination .carousel__nav-angle--next::after { content: "\e907"; right: 0; } /* =================================================================== */ .billboard-carousel__slide { float: left; height: 100%; left: 0; overflow: hidden; position: relative; top: 0; width: 100%; } .billboard-carousel__slide-image { position: relative; /* kill descender gap between inline img and container */ vertical-align: bottom; width: 100%; } /* =================================================================== */ .billboard-carousel__slide-caption { /*top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%);*/ bottom: 14%; margin: 0 auto; padding: 0; position: absolute; width: 100%; /* Safari/Chrome, other WebKit */ /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ z-index: 2; display: block; } .billboard-carousel__slide-caption:after, .billboard-carousel__slide-caption:before { clear: both; content: " "; display: table; } .billboard-carousel__slide-caption-headline { padding-bottom: 10px; } .billboard-carousel__slide-caption-subheadline { margin-bottom: 12px; } /* ==================================== */ .billboard-carousel__slide-caption-link { /* Safari/Chrome, other WebKit */ /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); backface-visibility: hidden; background-color: rgba(0, 0, 0, 0.1); background-position: 0 0; background-repeat: repeat; background-size: 2px 2px; background-image: url("/etc/designs/P/5631383682678784/clientlib/img/cta-button-bg@2x.png"); border: 2px solid #eaeaea; color: #ffffff; display: inline-block; font-size: 12px; font-weight: 500; font-style: normal; margin: 8px 0 0; max-width: 350px; overflow: hidden; padding: 7px 10px; position: relative; transform: translateZ(0); width: 48%; } .billboard-carousel__slide-caption-link:before { animation: button-mouseoff-fade 0.5s ease-out; animation-iteration-count: 1; background: rgba(0, 0, 0, 0.35); border-radius: 100%; bottom: 6px; content: ""; height: 30px; left: 45%; opacity: 0; position: absolute; right: 0; -ms-transform: scale(20); transform: scale(20); width: 30px; z-index: -1; } .billboard-carousel__slide-caption-link:hover { color: #ffffff; } .billboard-carousel__slide-caption-link:hover:before { animation: button-hover-radial 0.6s ease-out; opacity: 1; } .billboard-carousel__slide-caption-link[href^="http"] { background-color: rgba(0, 0, 0, 0.1); background-image: url("/etc/designs/P/5631383682678784/clientlib/img/cta-button-bg@2x.png"); border: 2px solid #eaeaea; color: #00a9e0; font-size: 12px; font-weight: 500; font-style: normal; } .billboard-carousel__slide-caption-link[href^="http"]:hover { color: #003087; } .billboard-carousel__slide-caption-link[href^="http"]::after { font-family: 'cc-go'; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; -ms-transform: translateY(-50%); content: "\e604"; font-weight: bold; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } @media screen and (max-width: 1024px) { .billboard-carousel__slide-caption-link { width: 240px; } } @media (min-width: 768px) { .billboard-carousel__slide-caption-link { font-size: 15px; max-width: 250px; position: relative; } .billboard-carousel__slide-caption-link[href^="http"] { font-size: 15px; } .billboard-carousel__slide-link:hover .billboard-carousel__slide-caption-link { color: #009639; } } /* =================================================================== */ /* Pagination Slideshow Play/Pause Button */ .carousel__toggle-slideshow::before { border-left: 3px solid #ffffff; border-right: 3px solid #ffffff; content: ''; display: inline-block; height: 12px; left: 50%; margin: 0 0 0 -4px; position: absolute; top: 0; width: 10px; } .carousel__toggle-slideshow--paused { margin-left: 10px; } .carousel__toggle-slideshow--paused::before { border-color: transparent transparent transparent #ffffff; border-style: solid; border-width: 6px 0 6px 6px; height: 0; margin: 0 0 0 -1px; width: 0; } /* =================================================================== */ .billboard-carousel__slide-caption .billboard-carousel__slide-caption-link-wrap { -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; } .billboard-carousel__slide-caption.billboard-carousel__slide-caption--center, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--left, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--right { float: none; padding: 0 6%; } .billboard-carousel__slide-caption.billboard-carousel__slide-caption--center .billboard-carousel__slide-caption-btn-action, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--center .billboard-carousel__slide-caption-headline, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--center .billboard-carousel__slide-caption-subheadline, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--center .billboard-carousel__slide-caption-tag, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--left .billboard-carousel__slide-caption-btn-action, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--left .billboard-carousel__slide-caption-headline, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--left .billboard-carousel__slide-caption-subheadline, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--left .billboard-carousel__slide-caption-tag, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--right .billboard-carousel__slide-caption-btn-action, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--right .billboard-carousel__slide-caption-headline, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--right .billboard-carousel__slide-caption-subheadline, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--right .billboard-carousel__slide-caption-tag { text-align: center; } @media (min-width: 768px) { .billboard-carousel__slide-caption { bottom: 20%; width: 44%; } .billboard-carousel__slide-caption .hide-mobile { display: block; } .billboard-carousel__slide-caption .billboard-carousel__slide-caption-link + .billboard-carousel__slide-caption-link { margin-left: 2%; } .billboard-carousel__slide-caption .billboard-carousel__slide-caption-link-wrap { -ms-flex-direction: row; flex-direction: row; } .billboard-carousel__slide-caption.billboard-carousel__slide-caption--left { padding-right: 0; } .billboard-carousel__slide-caption.billboard-carousel__slide-caption--left .billboard-carousel__slide-caption-link-wrap { -ms-flex-pack: start; justify-content: flex-start; } .billboard-carousel__slide-caption.billboard-carousel__slide-caption--left .billboard-carousel__slide-caption-btn-action, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--left .billboard-carousel__slide-caption-headline, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--left .billboard-carousel__slide-caption-subheadline, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--left .billboard-carousel__slide-caption-tag { text-align: left; } .billboard-carousel__slide-caption.billboard-carousel__slide-caption--right { float: right; padding-left: 0; right: 0; } .billboard-carousel__slide-caption.billboard-carousel__slide-caption--right .billboard-carousel__slide-caption-btn-action, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--right .billboard-carousel__slide-caption-headline, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--right .billboard-carousel__slide-caption-subheadline, .billboard-carousel__slide-caption.billboard-carousel__slide-caption--right .billboard-carousel__slide-caption-tag { text-align: right; } .billboard-carousel__slide-caption.billboard-carousel__slide-caption--right .billboard-carousel__slide-caption-link-wrap { -ms-flex-pack: end; justify-content: flex-end; } .billboard-carousel__slide-caption.billboard-carousel__slide-caption--center { -ms-transform: translateX(-50%); left: 50%; margin: 0 auto; padding: 0; transform: translateX(-50%); width: 68%; } .billboard-carousel__slide-caption.billboard-carousel__slide-caption--center .billboard-carousel__slide-caption-link-wrap { -ms-flex-pack: center; justify-content: center; } } /* ======================================================================== COMPONENT: Billboard Carousel ======================================================================== */ /* 0px =========================== */ @media (min-width: 0) { /* STYLE 1 */ .bb-style-1 figure, .billb-style-1 figure.billb-figure { background-position: 50% 0; background-size: cover; } /* STYLE 2 */ .bb-style-2 figure, .billb-style-2 figure.billb-figure { background-position: 75% 0; background-size: cover; } /* STYLE 3 */ .bb-style-3 figure, .billb-style-3 figure.billb-figure { background-position: 25% 0; background-size: cover; } /* STYLE 4 */ .bb-style-4 figure, .billb-style-4 figure.billb-figure { background-position: 100% 0; background-size: 100% auto; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { /* option 1 */ .bb-style-1 .bb-msg-wrap { left: 50%; } .bb-style-1 .bb-msg { left: 0; text-align: center; width: 100%; } .bb-style-1 figure { background-position: 50% 0; background-size: cover; } /* option 2 */ .bb-style-2 .bb-msg-wrap { left: 50%; } .bb-style-2 .bb-msg { left: 0; text-align: center; width: 100%; } .bb-style-2 figure { background-position: 100% 0; background-size: cover; } /* option 3 */ .bb-style-3 .bb-msg-wrap { left: 50%; } .bb-style-3 .bb-msg { left: 0; text-align: center; width: 100%; } .bb-style-3 figure { background-position: 100% 0; background-size: cover; } /* option 4 */ .bb-style-4 .bb-msg-wrap { left: 50%; } .bb-style-4 .bb-msg { left: 0; text-align: center; width: 100%; } .bb-style-4 figure { background-position: 50% 0; background-size: cover; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .is-Table { bottom: 0; display: table; } .is-Table .Table-Cell { display: table-cell; float: none; position: relative; vertical-align: middle; } .is-Table .Center-Block { margin: 0 auto; padding: 0; width: 100%; } .bb-style-1 .bb-msg-wrap { height: 100%; left: auto; right: 20px; width: 50%; } /* style 1 */ .billb-style-1 .billb-msg-wrap.billb-right { height: 100%; left: auto; right: 20px; width: 50%; } .billb-style-1 .billb-msg-wrap.billb-left { height: 100%; left: 20px; right: auto; width: 50%; } /* style 2 */ .billb-style-2 .billb-msg-wrap.billb-right { height: 100%; left: auto; right: 20px; width: 50%; } .billb-style-2 .billb-msg-wrap.billb-left { height: 100%; left: 20px; right: auto; width: 50%; } /* style 3 */ .billb-style-3 .billb-msg-wrap.billb-right { height: 100%; left: auto; right: 20px; width: 50%; } .billb-style-3 .billb-msg-wrap.billb-left { height: 100%; left: 20px; right: auto; width: 50%; } /* style 4 */ .billb-text-wrap { bottom: 0; position: relative; } .billb-figure { background-position: 50% 0; background-repeat: no-repeat; background-size: auto 100%; } } /* =============================== */ /* 1024px ======================== */ /* =============================== */ /* 1200px ======================== */ /* =============================== */ /* ======================================================================== COMPONENT: CAROUSEL BILLBOARD WITH TABS ======================================================================== */ /*VARS*/ body section.component-carousel-billboard-with-tabs .carousel-billboard-with-tabs-main .slick-list .slick-track .slick-slide .slick-slide-container .carousel-billboard-jumbotron h1, body section.component-carousel-billboard-with-tabs .carousel-billboard-with-tabs-main .slick-list .slick-track .slick-slide .slick-slide-container .carousel-billboard-jumbotron p { color: #ffffff; } body section.component-carousel-billboard-with-tabs .carousel-billboard-with-tabs-main .slick-list .slick-track .slick-slide .slick-slide-container .carousel-billboard-jumbotron .carousel-billboard-button { color: #ffffff; } body section.component-carousel-billboard-with-tabs .carousel-billboard-with-tabs-main-nav .slick-list .slick-track .slick-slide.slick-selected { border-top-color: #009639; } body section.component-carousel-billboard-with-tabs .carousel-billboard-with-tabs-main-nav .slick-list .slick-track .slick-slide.slick-selected:after, body section.component-carousel-billboard-with-tabs .carousel-billboard-with-tabs-main-nav .slick-list .slick-track .slick-slide.slick-selected:before { border-bottom-color: #009639; } body section.component-carousel-billboard-with-tabs .carousel-billboard-with-tabs-main-nav .slick-list .slick-track .slick-slide hr { background: rgba(0, 0, 0, 0.4); /* For browsers that do not support gradients */ /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); /* Standard syntax */ } body section.component-carousel-billboard-with-tabs .carousel-billboard-with-tabs-main-nav .slick-list .slick-track .slick-slide .carousel-billboard-content { background: rgba(233, 233, 233, 0.9); /* For browsers that do not support gradients */ /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */ background: linear-gradient(to bottom, rgba(233, 233, 233, 0.9), rgba(255, 255, 255, 0.9)); /* Standard syntax */ border-color: #dddbdb; } body section.component-carousel-billboard-with-tabs .carousel-billboard-with-tabs-main-nav .slick-list .slick-track .slick-slide .carousel-billboard-content h3 { color: #000000; } body section.component-carousel-billboard-with-tabs .carousel-billboard-with-tabs-main-nav .slick-list .slick-track .slick-slide .carousel-billboard-content p { color: #000000; } body section.component-carousel-billboard-with-tabs .carousel-billboard-with-tabs-play { background-color: #009639; } body section.component-carousel-billboard-with-tabs .carousel-billboard-with-tabs-play:hover { background-color: #006342; } body section.component-carousel-billboard-with-tabs .carousel-billboard-with-tabs-main-dots .slick-dots li button { background-color: #009639; } body section.component-carousel-billboard-with-tabs .carousel-billboard-with-tabs-main-dots .slick-dots li.slick-active button { background-color: #00a9e0; } /* ======================================================================== COMPONENT: CONTENT WALL - COMMON ======================================================================== */ /*=================== LINKS ===================*/ .item__type { margin: 0; padding-bottom: 10px; } .has-bg-img.dark-bg .item__type { color: #ffffff; } .item .item__type-link { color: #000000; } .item .item__type-link:hover { color: #009639; } .has-bg-img.dark-bg .item .item__type-link { color: #ffffff; } /*=================== Button ===================*/ .item__button-container { float: left; width: 100%; } .light-bg .multi-columns .item__button, .light-bg .multi-columns .item__type { background: #ffffff; } .light-bg .multi-columns .item__button:hover, .light-bg .multi-columns .item__type:hover { background: #ffffff; } .mild-bg .multi-columns .item__button, .mild-bg .multi-columns .item__type { background: #b9b9b9; } .mild-bg .multi-columns .item__button:hover, .mild-bg .multi-columns .item__type:hover { background: #b9b9b9; } .dark-bg .multi-columns .item__button, .dark-bg .multi-columns .item__type { background: #474747; } .dark-bg .multi-columns .item__button:hover, .dark-bg .multi-columns .item__type:hover { background: #474747; } .item .item__button { display: inline-block; margin-bottom: 10px; width: auto; } .section-grid-2-col .item .item__button { display: inline-block; width: auto; } .items1.grid-2-col .item .item__button { display: inline-block; width: auto; } .section-3-col-slider .main .grid-3-col-slider .item .item__button { display: inline-block; margin-bottom: 10px; width: auto; } .multi-columns .item .item__button { display: inline-block; margin-bottom: 10px; margin-top: 10px; width: auto; } .elm-circle .item__button { margin-top: 10px; } /*GRID*/ .multi-columns.on-2 .items { margin: 0 2.2%; } .multi-columns.on-2 .items .item { margin: 0 0 2.2% 0; width: 48.9%; } .multi-columns.on-2 .items .gutter-sizer { width: 2.2%; } @media screen and (max-width: 480px) { .multi-columns.on-2 .items { margin: 0; } .multi-columns.on-2 .items .item { margin: 0 3% 3%; width: 94%; } } .multi-columns.on-3 .items { margin: 0 2.15%; } .multi-columns.on-3 .items .item { margin: 0 0 2.15% 0; width: 31.9%; } .multi-columns.on-3 .items .gutter-sizer { width: 2.15%; } @media screen and (max-width: 768px) { .multi-columns.on-3 .items { margin: 0 2.2%; } .multi-columns.on-3 .items .item { margin: 0 0 2.2% 0; width: 48.9%; } .multi-columns.on-3 .items .gutter-sizer { width: 2.2%; } } @media screen and (max-width: 480px) { .multi-columns.on-3 .items { margin: 0; } .multi-columns.on-3 .items .item { margin: 0 3% 3%; width: 94%; } } .multi-columns.on-4 .items { margin: 0 2.26667%; } .multi-columns.on-4 .items .item { margin: 0 0 2.26667% 0; width: 23.3%; } .multi-columns.on-4 .items .gutter-sizer { width: 2.26667%; } @media screen and (max-width: 768px) { .multi-columns.on-4 .items { margin: 0 2.2%; } .multi-columns.on-4 .items .item { margin: 0 0 2.2% 0; width: 48.9%; } .multi-columns.on-4 .items .gutter-sizer { width: 2.2%; } } @media screen and (max-width: 480px) { .multi-columns.on-4 .items { margin: 0; } .multi-columns.on-4 .items .item { margin: 0 3% 3%; width: 94%; } } .multi-columns.on-5 .items { margin: 0 2%; } .multi-columns.on-5 .items .item { margin: 0 0 2% 0; width: 18.4%; } .multi-columns.on-5 .items .gutter-sizer { width: 2%; } @media screen and (max-width: 1024px) { .multi-columns.on-5 .items { margin: 0 2.26667%; } .multi-columns.on-5 .items .item { margin: 0 0 2.26667% 0; width: 23.3%; } .multi-columns.on-5 .items .gutter-sizer { width: 2.26667%; } } @media screen and (max-width: 768px) { .multi-columns.on-5 .items { margin: 0 2.2%; } .multi-columns.on-5 .items .item { margin: 0 0 2.2% 0; width: 48.9%; } .multi-columns.on-5 .items .gutter-sizer { width: 2.2%; } } @media screen and (max-width: 480px) { .multi-columns.on-5 .items { margin: 0; } .multi-columns.on-5 .items .item { margin: 0 3% 3%; width: 94%; } } body section.component-content-wall.light-bg ul.items li { background-color: #eeeeee; } body section.component-content-wall.light-bg ul.items li:hover { background-color: #eeeeee; } body section.component-content-wall.mild-bg ul.items li { background-color: #ffffff; } body section.component-content-wall.mild-bg ul.items li:hover { background-color: #ffffff; } body section.component-content-wall.dark-bg ul.items li { background-color: #ffffff; } body section.component-content-wall.dark-bg ul.items li:hover { background-color: #ffffff; } body section.component-content-wall .items-filtering .items-filtering-col label { color: #474747; font-size: 18px; } body section.component-content-wall .items-filtering .items-filtering-col label span { font-size: 18px; } body section.component-content-wall .items-filtering .items-filtering-col .btn-clear .fa-times { /* Safari 1.x */ -khtml-opacity: 0.75; /* Netscape */ -moz-opacity: 0.75; /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE 5-7 */ filter: alpha(opacity=75); /* Good browsers */ opacity: 0.75; } body section.component-content-wall .slider-wrap .no-results h3 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; font-size: 30px; line-height: 1.2em; color: #f40000; } body section.component-content-wall .slider-wrap ul.items li a.hover .source, body section.component-content-wall .slider-wrap ul.items li a:hover .source { color: #009639; } body section.component-content-wall .slider-wrap ul.items li a.hover h3, body section.component-content-wall .slider-wrap ul.items li a:hover h3 { color: #009639; } body section.component-content-wall .slider-wrap ul.items li a.hover p, body section.component-content-wall .slider-wrap ul.items li a:hover p { color: #000000; } body section.component-content-wall .slider-wrap ul.items li a .source { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: normal; font-size: 11px; line-height: 12px; color: #4b4b4b; } body section.component-content-wall .slider-wrap ul.items li a h3 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; font-size: 14px !important; line-height: 1.1em; color: #474747; } body section.component-content-wall .slider-wrap ul.items li a h3.hover-text { color: #ffffff; } body section.component-content-wall .slider-wrap ul.items li a p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: 200; font-size: 14px !important; line-height: 1.3em; color: #000000; } body section.component-content-wall .slider-wrap ul.items li .item-txt h3 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; font-size: 14px !important; line-height: 1.1em; color: #474747; } body section.component-content-wall .slider-wrap ul.items li .item-txt p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: 200; font-size: 14px !important; line-height: 1.3em; color: #000000; } body section.component-content-wall .slider-wrap .items-left { color: #474747; font-size: 14px; line-height: 14px; } /* ======================================================================== COMPONENT: COOKIE ALERT - COMMON ======================================================================== */ /* :START VARIABLES */ /* #FontFamily */ /* #FontSize */ /* #Color */ /* #FontWeight */ /* #LineHeight */ /* #BackgroundColor */ /* :END VARIABLES */ #cookie-alert-wrap { background: transparent; height: 100%; left: 0; pointer-events: auto; position: fixed; top: 0; width: 100%; z-index: 10100; } .tier-alert .text-container { border: none; font-size: 1em; margin: 15px auto; max-width: 90%; padding: 0 20px; width: 100%; } @media screen and (min-width: 668px) { .tier-alert .text-container { padding: 0 6px; } } .tier-alert .text-container.text-container-reject { max-width: 90%; } .tier-alert .text-container.text-container-reject p { margin: 0; } .tier-alert .text-container h2 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; font-size: 1.4em; margin-bottom: 5px; max-width: 100%; text-transform: none; width: auto; } @media (min-width: 481px) { .tier-alert .text-container h2 { margin-bottom: 10px; } } .tier-alert .text-container p { -webkit-hyphens: none; font-size: 12px; -ms-hyphens: none; hyphens: none; line-height: 130%; text-align: center; } .tier-alert .text-container a { color: #009639; } .tier-alert .text-container a:hover { color: #000000; } @media screen and (max-width: 647px) { .tier-alert .text-container { font-size: 0.9em; } .tier-alert .text-container h2.headline, .tier-alert .text-container p { text-align: left; } } .tier-alert { -moz-box-sizing: border-box; background: transparent; bottom: 0; box-sizing: border-box; display: none; font-size: 16px; padding: 0 10px; position: fixed; text-align: center; width: 100%; z-index: 10999; } @media all and (max-device-width: 1024px) { .tier-alert { max-width: 100%; } } @media all and (min-device-width: 1280px) { .tier-alert { /* Alert width for non mobile. */ max-width: 99%; } } .tier-alert * { box-sizing: border-box; } .tier-alert .main { float: left; margin: 0; max-width: 100%; transition: min-height 0.2s ease-out; width: 100%; } @media all and (min-device-width: 1280px) { .tier-alert .main { /* Scrollbar on non mobile */ right: 0; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { .tier-alert .main { /* No scrollbar on tablet landscape */ right: 0; } } @media all and (max-device-width: 768px) { .tier-alert .main { /* No scrollbar on mobile */ right: 0; } } .tier-alert.dark-bg { background-color: transparent; } .tier-alert.dark-bg .main { background: #ffffff; } .tier-alert.dark-bg a { color: #009639; } .tier-alert.dark-bg a:hover { color: #000000; } .tier-alert.dark-bg h2, .tier-alert.dark-bg p { color: #474747; } .tier-alert a { transition: color 0.2s ease-out, background 0.2s ease-out; } .tier-alert a.alert-btn { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 14px; border: 0; display: inline-block; margin: 3px 5px; min-width: 200px; padding: 10px 3px; } @media (min-width: 768px) { .tier-alert a.alert-btn { margin: 0 auto; } } .tier-alert a.alert-btn:active { border-bottom: 0 solid; transition: all 0.2 ease 0.2s; } .tier-alert a.alert-btn:active:hover { border-bottom: 0 solid; } .tier-alert a.alert-btn.alert-accept { background-color: #009639; color: #ffffff; } .tier-alert a.alert-btn.alert-accept:hover { color: #ffffff; } .tier-alert a.alert-btn.alert-accept:before { background-color: #006342; } .tier-alert a.alert-btn.alert-accept:active { background: #006342; border-bottom-color: #006342; color: #ffffff; } .tier-alert a.alert-btn.alert-accept:active:hover { border-bottom-color: #006342; } .tier-alert a.alert-btn.alert-reject { background-color: #bcbcbc; color: #ffffff; } .tier-alert a.alert-btn.alert-reject:hover { color: #ffffff; } .tier-alert a.alert-btn.alert-reject:before { background-color: #989898; } .tier-alert a.alert-btn.alert-reject:active { background: #989898; border-bottom-color: #989898; color: #ffffff; } .tier-alert a.alert-btn.alert-reject:active:hover { border-bottom-color: #989898; } @media screen and (min-width: 520px) { .tier-alert .alert-btn + .alert-btn.alert-reject { margin-left: 10px; } } .tier-alert a.alert-close { color: #444444; display: block; font-size: 25px; position: absolute; right: 0.9em; top: 9px; transition: color 0.2s ease-out, right 0.2s ease-out, top 0.2s ease-out; } .no-touch .tier-alert a.alert-close:hover { color: #009639; } .tier-alert .text-container-reject { display: none; } .ie8 .tier-alert .alert-btn, .ie8 .tier-alert h2 { font-weight: bold; } .size-mobile .tier-alert a.alert-close, .size-tablet-A .tier-alert a.alert-close { font-size: 26px; right: 18px; top: 10px; } /* ======================================================================== COMPONENT: DIVIDER - COMMON ======================================================================== */ /* :START VARIABLES */ /* FontFamily*/ /* FontSize */ /* Color */ /* FontWeight */ /* Background Color */ /* Background */ /* Border */ /* :END VARIABLES */ /*------------------------------------* Divider - Global \*------------------------------------*/ .divider { margin: 0 auto; padding: 0; position: relative; width: 100%; } .divider__text { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: italic; font-size: 23px; color: #ffffff; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 75%; } .divider__arrow--down .divider__text { z-index: 3; } @media (min-width: 768px) { .divider__text { font-size: 28px; width: 50%; } } .divider__spacer { height: auto; width: 100%; } /*------------------------------------* Divider - Arrow \*------------------------------------*/ /*---- Color Version ----*/ .divider__arrow--down:after, .divider__arrow--down:before { border: none; bottom: -7px; box-sizing: border-box; content: ""; display: block; height: 15px; left: 50%; position: absolute; top: auto; -ms-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); width: 15px; } section.divider:not(.divider__parallax) { overflow: visible; } /*---- Image/Parallax Version ----*/ .divider__image .divider__arrow--down:after, .divider__parallax .divider__arrow--down:after, .divider__image .divider__arrow--down:before, .divider__parallax .divider__arrow--down:before { border: 10px solid transparent; border-bottom-color: #ffffff; box-sizing: border-box; content: ""; display: block; height: 100%; position: absolute; top: 0; -ms-transform: none; transform: none; width: 50%; } .divider__image .divider__arrow--down:before, .divider__parallax .divider__arrow--down:before { border-left: 0; border-right: 10px solid transparent; left: 0; } .divider__image .divider__arrow--down:after, .divider__parallax .divider__arrow--down:after { border-left: 10px solid transparent; border-right: 0; right: 0; } /*------------------------------------* Divider - Color \*------------------------------------*/ .divider__color { display: table; width: 100%; } .divider__color::after, .divider__color::before { z-index: 2; } .divider__color--brand-primary { background: #000000; } .divider__color--brand-primary:after { background: #000000; } .divider__color--brand-primary .divider__text { color: #ffffff; } .divider__color--brand-secondary { background: #73b865; } .divider__color--brand-secondary:after { background: #73b865; } .divider__color--brand-secondary .divider__text { color: #ffffff; } .divider__color--brand-tertiary { background: #d5e0d6; } .divider__color--brand-tertiary:after { background: #d5e0d6; } .divider__color--brand-tertiary .divider__text { color: #000000; } .divider__color--black { background: #000000; } .divider__color--black:after { background: #000000; } .divider__color--black .divider__text { color: #ffffff; } .divider__color--white { background: #ffffff; } .divider__color--white:after { background: #ffffff; } .divider__color--white .divider__text { color: #000000; } .divider__color--light-gray { background: #eaeaea; } .divider__color--light-gray:after { background: #eaeaea; } .divider__color--light-gray .divider__text { color: #000000; } .divider__color--dark-gray { background: #474747; } .divider__color--dark-gray:after { background: #474747; } .divider__color--dark-gray .divider__text { color: #ffffff; } .divider__parallax--content .divider__text { color: #ffffff; } /*------------------------------------* Divider - Image \*------------------------------------*/ section.divider.divider__image { -ms-flex-align: center; align-items: center; display: block; height: 60vw; -ms-flex-pack: center; justify-content: center; position: relative; width: 100%; } @media (min-width: 481px) { section.divider.divider__image { height: 30vw; } } section.divider.divider__image.hide-mobile { display: none; } @media (min-width: 768px) { section.divider.divider__image.hide-mobile { display: block; } } .divider__image--image { background-size: 100% auto; height: 100%; } .divider__image--overlay { background-position: 0 50%; background-repeat: repeat; background-size: auto; height: 100%; position: absolute; top: 0; width: 100%; } .divider__image--content { height: 100%; } .divider__image--content .divider__text { font-size: 20px; height: 3em; max-width: 100%; position: absolute; top: calc(50% - 2em); width: 100%; } @media (min-width: 768px) { .divider__image--content .divider__text { font-size: 30px; } } .divider__image--content .divider__text span { display: table-cell; height: 3em; vertical-align: middle; width: 8000px; /* wider than it ever needs to be */ } /*------------------------------------* Divider - Parallax \*------------------------------------*/ section.divider__parallax { -ms-flex-align: center; align-items: center; background-color: #000000; display: block; height: 60vw; -ms-flex-pack: center; justify-content: center; overflow: hidden; position: relative; width: 100%; } @media (min-width: 481px) { section.divider__parallax { height: 30vw; } } section.divider__parallax.hide-mobile { display: none; } @media (min-width: 768px) { section.divider__parallax.hide-mobile { display: block; } } .divider__parallax--image { background-color: #ffd100; height: 200%; position: absolute; top: 0; width: 100%; } .divider .divider__parallax--image { background-position: 0 50%; background-repeat: no-repeat; background-size: 100% auto; } .opaque-overlay-50:after { background: #000000; content: ""; display: block; height: 100%; opacity: 0.5; width: 100%; } .divider__parallax--overlay { background-position: 0 50%; background-repeat: repeat; background-size: 100% auto; height: 100%; position: absolute; top: 0; width: 1800px; } .divider__parallax--content { height: 100%; } .divider__parallax--content .divider__text { font-size: 20px; height: 3em; max-width: 100%; position: absolute; top: calc(50% - 2em); width: 100%; } @media (min-width: 768px) { .divider__parallax--content .divider__text { font-size: 30px; } } .divider__parallax--content .divider__text span { display: table-cell; height: 3em; vertical-align: middle; width: 8000px; /* wider than it ever needs to be */ } .divider__image--content:not(.divider__arrow--down) .divider__text, .divider__parallax--content:not(.divider__arrow--down) .divider__text { top: calc(50% - 1.5em); } .divider__parallax--height50 { height: 50vw; } /* ======================================================================== COMPONENT: Download ======================================================================== */ /* :START VARIABLES */ /* FontSize */ /* FontFamily */ /* Color */ /* FontWeight */ /* LineHeight */ /* :END VARIABLES */ /* Download List Section */ section.section-download-list { padding: 0; } /* Download List Wrapper */ .listiconfiles-cont { float: none; overflow: hidden; } .listiconfiles { margin: 0 4%; width: 92%; } @media (min-width: 768px) { .listiconfiles { margin: 0 auto; width: 728px; } } /* Download list */ ul.listiconfiles.downloadlist { clear: both; list-style-type: none; padding: 0; } ul.listiconfiles.downloadlist li { list-style-type: none; } ul.listiconfiles.downloadlist li a { display: block; font-size: 16px; padding: 0.2em 0 0.2em 28px; position: relative; text-align: left; } ul.listiconfiles.downloadlist li a:hover { background: none; } ul.listiconfiles.downloadlist a.file-download:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background: transparent; border-radius: 0; color: #009639; content: "\e600"; font-family: "cc-go"; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; height: 30px; left: 0; line-height: 1; margin: 0; padding: 4px; position: absolute; speak: none; text-transform: none; top: 4px; width: 30px; } ul.listiconfiles.downloadlist a.file-download:before:hover { color: #009639; } ul.listiconfiles.downloadlist a.file-download:hover:before { color: #000000; transition: all 0.1s ease-in; } /* ======================================================================== COMPONENT: ERROR TIER - COMMON ======================================================================== */ /* :START VARIABLES */ /* #FontStyle */ /* #FontWeight */ .section-error p.superheadline { font-style: italic; font-weight: 900; } .section-error p.subheadlinesized { font-style: italic; font-weight: 700; } /* ======================================================================== SECTIONS: FEATURED ANIMATED - COMMON ======================================================================== */ .FeaturedFMAnimated.section h2.headline:empty { display: none; } /* ======================================================================== COMPONENT: FEATURED - COMMON ======================================================================== */ /* :START VARIABLES */ /* FontSize */ /* Color */ /* LineHeight */ /* BackgroundColor */ /* :END VARIABLES */ .item { float: left; margin: 0 auto; text-align: center; width: 96%; } .item img { display: block; float: left; margin: 0 auto; opacity: 1; width: 100%; } .item .item-txt { float: left; width: 100%; /* Safari/Chrome, other WebKit */ /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ margin: 10px auto; padding: 10px; text-align: center; transition: all 0.2s ease-out; } .item .item-txt h1, .item .item-txt h2, .item .item-txt h3, .item .item-txt h4, .item .item-txt h5, .item .item-txt h6, .item .item-txt p { float: left; height: auto; width: 100%; } .item .item-txt h3 { margin: 5px 0 10px; } .item .item-txt p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; color: #000000; text-align: center; } .item .elm-body h3, .item .item-txt h3 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 600; font-style: normal; font-size: 16px; line-height: 1.1em; color: #474747; } @media (min-width: 481px) { .item .elm-body h3, .item .item-txt h3 { font-size: 16px; } } .item .elm-body p, .item .item-txt p { font-size: 16px; line-height: 1.3em; } @media (min-width: 481px) { .item .elm-body p, .item .item-txt p { font-size: 16px; } } .item a:not(.btn-tile), .item div.no-hover:not(.btn-tile) { display: block; margin: 0 auto; opacity: 1; position: relative; width: 100%; transition: all 0.2s ease-out; } .item a:not(.btn-tile) .bg-overlay .hover-text, .item div.no-hover:not(.btn-tile) .bg-overlay .hover-text { box-sizing: border-box; display: none; font-size: 16px; padding: 0 10px; } .no-touch .item a:not(.btn-tile) .bg-overlay .hover-text, .no-touch .item div.no-hover:not(.btn-tile) .bg-overlay .hover-text { display: block; } .touch .item a:not(.btn-tile) .bg-overlay, .touch .item div.no-hover:not(.btn-tile) .bg-overlay { display: none; } .item a:not(.btn-tile) .elm-img .bg-overlay .hover-text, .item div.no-hover:not(.btn-tile) .elm-img .bg-overlay .hover-text { padding: 0 4px; } .item.hover a:not(.btn-tile), .item:hover a:not(.btn-tile) { color: #009639; } .item.hover a:not(.btn-tile) .elm-body, .item.hover a:not(.btn-tile) .item-txt, .item:hover a:not(.btn-tile) .elm-body, .item:hover a:not(.btn-tile) .item-txt { background-color: #ffffff; transition: all 0.1s ease-in; } .item.hover a:not(.btn-tile) .elm-body h1, .item.hover a:not(.btn-tile) .elm-body h2, .item.hover a:not(.btn-tile) .elm-body h3, .item.hover a:not(.btn-tile) .elm-body h4, .item.hover a:not(.btn-tile) .elm-body h5, .item.hover a:not(.btn-tile) .elm-body h6, .item.hover a:not(.btn-tile) .elm-body p, .item.hover a:not(.btn-tile) .item-txt h1, .item.hover a:not(.btn-tile) .item-txt h2, .item.hover a:not(.btn-tile) .item-txt h3, .item.hover a:not(.btn-tile) .item-txt h4, .item.hover a:not(.btn-tile) .item-txt h5, .item.hover a:not(.btn-tile) .item-txt h6, .item.hover a:not(.btn-tile) .item-txt p, .item:hover a:not(.btn-tile) .elm-body h1, .item:hover a:not(.btn-tile) .elm-body h2, .item:hover a:not(.btn-tile) .elm-body h3, .item:hover a:not(.btn-tile) .elm-body h4, .item:hover a:not(.btn-tile) .elm-body h5, .item:hover a:not(.btn-tile) .elm-body h6, .item:hover a:not(.btn-tile) .elm-body p, .item:hover a:not(.btn-tile) .item-txt h1, .item:hover a:not(.btn-tile) .item-txt h2, .item:hover a:not(.btn-tile) .item-txt h3, .item:hover a:not(.btn-tile) .item-txt h4, .item:hover a:not(.btn-tile) .item-txt h5, .item:hover a:not(.btn-tile) .item-txt h6, .item:hover a:not(.btn-tile) .item-txt p { color: #474747; transition: all 0.2s ease-in; } .item.hover a:not(.btn-tile) img, .item:hover a:not(.btn-tile) img { opacity: 1; } /* Promo Rollovers Code */ .item .inset-border { float: left; height: 100%; overflow: hidden; position: relative; width: 100%; } .item img { transition: all 0.3s ease; } .item .elm-img .hover-text, .item .inset-border .hover-text { -webkit-transform: translateY(calc(-50% + 25px)); color: #ffffff; display: block; left: 0; opacity: 0; position: absolute; text-align: center; top: 50%; -ms-transform: translateY(-50%) translateY(50px); transform: translateY(calc(-50% + 25px)); width: 100%; z-index: 2; transition: all 0.2s ease-out; } .item .no-hover .hover-text { display: none; } .item .no-hover .icon-container, .item .has-hover-content .icon-container { background-color: transparent; } .item .no-hover .icon--default, .item .has-hover-content .icon--default { opacity: 1; } .item .no-hover .icon--hover, .item .has-hover-content .icon--hover { opacity: 0; } .item .bg-overlay { background-color: transparent; height: 100%; left: 0; position: absolute; top: 0; width: 100%; transition: all 0.2s ease-out; } .item .icon-container { background-color: #009639; border-radius: 50%; display: block; height: 75px; left: 50%; position: absolute; top: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: none; width: 75px; z-index: 2; } .item .icon-container img { -moz-filter: blur(0px); -ms-filter: blur(0px); -ms-transform: translate(-50%, -50%) scale(1); -webkit-backface-visibility: hidden; -webkit-filter: blur(0px); -webkit-transform: translate(-50%, -50%) scale(1); filter: none; filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius= '0'); left: 50%; position: relative; top: 50%; transform: translate(-50%, -50%) scale(1); transition: none; width: 100%; } @media screen and (min-width: 768px) { .no-touch .item .icon-container { -ms-transform: translate(-50%, calc(-50% - 28px)); transform: translate(-50%, calc(-50% - 28px)); } } .item .icon--default { opacity: 1; transition: all 0.2s ease-out; } .item .icon--hover { opacity: 1; transition: all 0.2s ease-out; } .item.hover img, .item:hover img { -ms-transform: scale(1.1); transform: scale(1.1); } .item.hover a .elm-img .bg-overlay, .item.hover a .inset-border .bg-overlay, .item:hover a .elm-img .bg-overlay, .item:hover a .inset-border .bg-overlay { background-color: transparent; z-index: 1; transition: all 0.2s ease-in; } .item.hover a .elm-img .hover-text, .item.hover a .inset-border .hover-text, .item:hover a .elm-img .hover-text, .item:hover a .inset-border .hover-text { opacity: 1; transition: all 0.2s ease-in; } .item.hover .icon-container img, .item:hover .icon-container img { -moz-filter: blur(0px); -ms-filter: blur(0px); -ms-transform: translate(-50%, -50%) scale(1); -webkit-filter: blur(0px); -webkit-transform: translate(-50%, -50%) scale(1); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius= '0'); transform: translate(-50%, -50%) scale(1); } .item.hover .icon-container.icon--hover, .item:hover .icon-container.icon--hover { background-color: #009639; } .item.hover .icon-container.icon--hover img, .item:hover .icon-container.icon--hover img { -moz-filter: blur(0px); -ms-filter: blur(0px); -ms-transform: translate(-50%, -50%) scale(1); -webkit-filter: blur(0px); -webkit-transform: translate(-50%, -50%) scale(1); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius= '0'); transform: translate(-50%, -50%) scale(1); } .item.hover .icon--hover, .item:hover .icon--hover { opacity: 1; } .item.hover .icon--default, .item:hover .icon--default { opacity: 0; transition: all 0.2s ease-out; } .item.hover .no-hover .icon-container, .item.hover .has-hover-content .icon-container, .item:hover .no-hover .icon-container, .item:hover .has-hover-content .icon-container { background-color: transparent; } .item.hover .elm-img, .item:hover .elm-img { background-size: 110% 110%; } .item a .bar { z-index: 3; } .item .elm-circle .icon-container { bottom: 20px; left: 50%; } @media screen and (min-width: 481px) and (max-width: 767px) { .item .elm-circle .icon-container { bottom: 15px; } } .item .elm-circle a, .item .elm-circle div.no-hover { box-sizing: border-box; float: none; } .item .elm-circle a .bg-overlay, .item .elm-circle div.no-hover .bg-overlay { box-sizing: border-box; height: 100%; left: 0; position: absolute; top: 0; transition: background 0.2s ease-out, border 0.2s ease-out; width: 100%; } /* End Promo Rollovers Code */ .elm-circle { position: relative; text-align: center; width: 100%; } .elm-circle .elm-img { background-position: center center; background-repeat: none; background-size: 100% 100%; height: 52vw; margin: 0 auto; opacity: 1; overflow: hidden; position: relative; transition: all 0.3s ease; width: 100%; transition: all 0.2s ease-out; } .elm-circle .elm-img.hover, .elm-circle .elm-img:hover { opacity: 1; } @media (min-width: 768px) { .elm-circle .elm-img { height: 22vw; } } @media (min-width: 768px) { .TwoColumn .f-4 .elm-circle .elm-img, .TwoColumn .f-1 .elm-circle .elm-img { height: 52vw; } } @media (min-width: 1024px) { .TwoColumn .f-4 .elm-circle .elm-img { height: 22vw; } } @media (min-width: 1024px) { .TwoColumn .f-6 .elm-circle .elm-img { height: 15vw; width: 15vw; } } .elm-circle .elm-body { margin: 10px auto; padding: 28px; text-align: center; width: 100%; z-index: 1; transition: all 0.2s ease-out; } @media (min-width: 1200px) { .elm-circle .elm-body { padding: 34px; } } .elm-circle .elm-body.elm-empty { z-index: -10; } .elm-circle h3 { margin: 10px 0; } @media (min-width: 768px) { .elm-circle h3 { margin-top: 0; } } .elm-circle p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; color: #474747; float: left; text-align: center; } .elm-circle a, .elm-circle div.no-hover { display: block; margin: 0 auto; position: relative; width: 90%; transition: all 0.2s ease-out; } .elm-circle.hover a, .elm-circle:hover a { transition: all 0.2s ease-out; } .elm-circle.hover a .elm-body, .elm-circle:hover a .elm-body { background-color: #ffffff; transition: all 0.1s ease-in; } .elm-circle.hover a .elm-body h1, .elm-circle.hover a .elm-body h2, .elm-circle.hover a .elm-body h3, .elm-circle.hover a .elm-body h4, .elm-circle.hover a .elm-body h5, .elm-circle.hover a .elm-body h6, .elm-circle.hover a .elm-body p, .elm-circle:hover a .elm-body h1, .elm-circle:hover a .elm-body h2, .elm-circle:hover a .elm-body h3, .elm-circle:hover a .elm-body h4, .elm-circle:hover a .elm-body h5, .elm-circle:hover a .elm-body h6, .elm-circle:hover a .elm-body p { color: #009639; transition: all 0.1s ease-in; } /* ======================================================================== SECTIONS: FEED CONTAINER - COMMON ======================================================================== */ /* Variables */ /* #Color */ .feedContainer section.section-livefeed { /* 768px ======================== */ } @media (min-width: 768px) { .feedContainer section.section-livefeed { padding-bottom: 20px; } } .feedContainer section.section-livefeed a, .feedContainer section.section-livefeed .hub-list-more, .feedContainer section.section-livefeed .content-default a, .feedContainer section.section-livefeed .content-default .content-byline .content-author-name a { color: #009639; } .feedContainer section.section-livefeed a:hover, .feedContainer section.section-livefeed .hub-list-more:hover, .feedContainer section.section-livefeed .content-default a:hover, .feedContainer section.section-livefeed .content-default .content-byline .content-author-name a:hover { color: #006342; } /* ======================================================================== SECTIONS: FOOTER - COMMON ======================================================================== */ /* :START VARIABLES */ /* #BackgroundColor */ /* #Font-family */ /* #Texts */ /* #Links */ /* :END VARIABLES */ section.section-footer { padding: 0; } .section.Footer section.section-footer { background-color: #c9cacb; } section.section-footer .main footer.copyright { background-color: #c9cacb; float: left; padding: 35px 0; width: 100%; } section.section-footer .main footer.copyright p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 12px; line-height: 22px; color: #ffffff; margin: 0; padding: 0 10px; text-align: center; } section.section-footer .main footer.copyright p a { display: inline-block; } section.section-footer .main footer.copyright p .pipe { color: #ffffff; } section.section-footer .main footer.copyright a, section.section-footer .main footer.copyright a[href*="http"] { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: normal; font-size: 12px; line-height: 22px; color: #ffffff; } section.section-footer .main footer.copyright a:hover, section.section-footer .main footer.copyright a[href*="http"]:hover { color: #111111; } /* ======================================================================== ONEBRAND: HEADER - COMMON ======================================================================== */ /* :START VARIABLES */ /* BackgroundColor */ /* Color */ /* FontSize */ /* FontWeight */ /* LineHeight */ /*VARS*/ /* :END VARIABLES */ /*Imports sub-components*/ /* ======================================================================== ONEBRAND: HEADER - COMMON HEADER - COMMON: HEADER MASTHEAD ======================================================================== */ /* :START VARIABLES */ /* Background */ /* Background Color */ /* :END VARIABLES */ header, header.header-small { background: #009639; display: block; float: left; height: auto; overflow: hidden; position: relative; width: 100%; z-index: 9999; } header.variant, header.header-small.variant { background-color: #ffffff; } header.header-small .logoMobileWrap a img.logo { background: #009639; float: left; height: auto; height: 61px; left: 50%; margin: 0 0 0 -96px; overflow: hidden; position: relative; } header.header-wide, header.header-wide-subpage { display: none; } /* 768px ======================== */ @media (min-width: 768px) { /* Used in conjunction with jquery for alternate white homepage logo */ /* shown on delay to avoid flash of red block on page load*/ .white-home-header-bgcolor { background: #009639; display: none; height: 208px; left: 50%; margin-left: -250px; position: absolute; top: 0; width: 500px; } header.header-small { display: none; } header.header-wide { background: transparent url("/etc/designs/P/5631383682678784/clientlib/img/masthead-bg.gif") center 0 no-repeat; display: block; height: 198px; width: 100%; } header.header-wide.variant { background: url("/etc/designs/P/5631383682678784/clientlib/img/masthead-bg-variant.gif") center 0 no-repeat; } header.header-wide .logoWrap { cursor: pointer; left: 0; position: absolute; width: 100%; } header.header-wide .logoWrap a { background-color: transparent; background-size: 100%; cursor: default; float: left; height: 198px; left: 50%; margin: 0 0 0 -476px; position: relative; text-indent: -9000em; width: 952px; } header.header-wide-subpage { display: block; height: 100px; width: 100%; } header.header-wide-subpage .logoSubWrap { cursor: pointer; left: 50%; margin-left: -200px; position: absolute; width: 400px; } header.header-wide-subpage .logoSubWrap a { display: block; height: 100px; position: relative; text-indent: -9000em; } .header-wrap { float: left; height: 0; position: relative; width: 100%; z-index: 9999; } .header-center { left: 0; margin: 0 10px 10px 0; position: absolute; top: 0; width: 100%; z-index: 999; } } /* 1200px ======================== */ @media (min-width: 1200px) { header.header-wide .header-cap-left, header.header-wide .header-cap-right { width: 30%; } } /* =============================== */ /* ======================================================================== COMPONENT: HEADER SEARCH - COMMON ======================================================================== */ /* :START VARIABLES */ /* FontSize */ /* Color */ /* BackgroundColor */ /* :END VARIABLES */ .nav-search-input-container { display: inline-block; height: 0; overflow: hidden; vertical-align: top; width: 0; } .nav-search-dir--out .nav-search-input-container { /* Safari and Chrome */ /* Firefox 4 */ /* Opera */ transition: width 0.2s ease-in-out; height: auto; width: 0; } .nav-search--active-out .nav-search-input-container { overflow: visible; width: 150px; } .nav-search-dir--down .nav-search-input-container { /* Safari and Chrome */ /* Firefox 4 */ /* Opera */ transition: height 0.2s ease-in-out; height: 0; position: absolute; right: 13px; top: calc(100% + 8px); width: 100%; } .nav-search--active-down .nav-search-input-container { height: 100%; overflow: visible; } .nav-search-input-container .tt-suggestion { cursor: pointer; font-size: 12px; padding: 0 5px; text-align: left; } .touch .nav-search-input-container .tt-suggestion { font-size: 16px; padding: 8px 5px; } .nav-search-input-container .tt-suggestion:hover { background-color: #efefef; } .nav-search-input-container .tt-menu { background-color: #ffffff; min-width: 100%; } .nav-search-input-container .tt-cursor { background-color: #efefef; } .nav-search-input-field { box-sizing: border-box; font-size: 12px; position: absolute; } .nav-search-input, form input[type="text"].nav-search-input, input.nav-search-input, input[type="text"].nav-search-input { border: 0; box-sizing: border-box; margin: 0; padding: 5px 22px 5px 5px; position: relative; } .touch .nav-search-input, .touch form input[type="text"].nav-search-input, .touch input.nav-search-input, .touch input[type="text"].nav-search-input { font-size: 16px; } .nav-search-input::-ms-clear, form input[type="text"].nav-search-input::-ms-clear, input.nav-search-input::-ms-clear, input[type="text"].nav-search-input::-ms-clear { display: none; height: 0; width: 0; } .nav-search-input::-ms-reveal, form input[type="text"].nav-search-input::-ms-reveal, input.nav-search-input::-ms-reveal, input[type="text"].nav-search-input::-ms-reveal { display: none; height: 0; width: 0; } .nav-search-input::-webkit-search-cancel-button, .nav-search-input::-webkit-search-decoration, .nav-search-input::-webkit-search-results-button, .nav-search-input::-webkit-search-results-decoration, form input[type="text"].nav-search-input::-webkit-search-cancel-button, form input[type="text"].nav-search-input::-webkit-search-decoration, form input[type="text"].nav-search-input::-webkit-search-results-button, form input[type="text"].nav-search-input::-webkit-search-results-decoration, input.nav-search-input::-webkit-search-cancel-button, input.nav-search-input::-webkit-search-decoration, input.nav-search-input::-webkit-search-results-button, input.nav-search-input::-webkit-search-results-decoration, input[type="text"].nav-search-input::-webkit-search-cancel-button, input[type="text"].nav-search-input::-webkit-search-decoration, input[type="text"].nav-search-input::-webkit-search-results-button, input[type="text"].nav-search-input::-webkit-search-results-decoration { display: none; } .nav-search-submit { display: none; } .nav-search-do-search-button { -ms-transform: translateX(-24px) translateY(-50%); transform: translateX(-24px) translateY(-50%); background-color: transparent; border: 0; color: #ffffff; cursor: pointer; height: 20px; position: absolute; width: 20px; top: 50%; z-index: 2; } .nav-search-do-search-button:before { color: #000000; font-size: 16px; left: 0; } .nav-search-do-search-button-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .nav-search-close-button { background-color: transparent; border: 0; right: 0; color: #ffffff; cursor: pointer; height: 20px; padding: 0; position: relative; width: 20px; } .nav-search-close-button svg { height: 16px; margin-top: 4px; width: 16px; } .nav-search-close-button-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .nav-search-button .nav-search__icon { left: 0; position: absolute; top: 0; } .nav-search-button { -ms-transform: translateX(3px); transform: translateX(3px); background-color: transparent; border: 0; cursor: pointer; height: 20px; padding: 0; width: 20px; } .nav-search-button-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /*RTL*/ *[dir="rtl"] .nav-search-do-search-button { -moz-transform: rotate(180deg) translateY(6px); -ms-transform: rotate(180deg) translateY(6px); -webkit-transform: rotate(180deg) translateY(6px); left: 15px; right: auto; transform: rotate(180deg) translateY(6px); } *[dir="rtl"] .typeahead-search-form #search { text-align: right; } *[dir="rtl"] .typeahead-search-form .tt-suggestion { text-align: right; } /* ======================================================================== ONEBRAND: HEADER - COMMON HEADER - COMMON: HEADER NAVIGATION ======================================================================== */ /* :START VARIABLES */ /* Other Variables */ /* FontSize */ /* Color */ /* FontWeight */ /* BorderColor */ /* LineHeight */ /* Background */ /* Background Color */ /* :END VARIABLES */ .brand__coke-light { background-color: #e2e2e2; } .brand__coke-red { background-color: #009639; } .brand__coke-life { background-color: #74b865; } .brand__coke-zero { background-color: #000000; } .navigation-bar-slideout { margin: 0; overflow: visible; padding: 0; z-index: 1; } .has-overlay .navigation-bar-slideout { z-index: 0; } .navigation-bar-slideout__menu { -moz-transition: all 300ms; -o-transition: all 300ms; -webkit-transition: all 300ms; background-color: #ffffff; bottom: 0; left: -80%; overflow: scroll; overflow-x: hidden; padding-top: 50px; position: fixed; top: 0; transition: all 300ms; width: 80%; z-index: 2; } @media (min-width: 481px) { .navigation-bar-slideout__menu { left: -50%; max-width: 50%; overflow: auto; } } @media (min-width: 1024px) { .navigation-bar-slideout__menu { left: -33%; max-width: 33%; } } .navigation-bar-slideout--active .navigation-bar-slideout__menu { -ms-transform: translateX(100%); transform: translateX(100%); } .navigation-bar-slideout__menu-options--hide { display: none; } .navigation-bar-slideout__menu-options { margin-top: 20px; } .navigation-bar-slideout__menu-label { color: #989898; font-size: 12px; padding: 0 20px; text-transform: uppercase; } .navigation-bar-slideout__list-item { position: relative; text-align: center; } .navigation-bar-slideout__list:first-child .navigation-bar-slideout__list-item { border-bottom: 1px solid #cdcdcd; } .navigation-bar-slideout__list-item--active:before { font-family: 'cc-go'; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; background-color: #cdcdcd; border-radius: 1em; color: #000000; content: '\e908'; display: block; font-size: 1.5em; height: 1em; left: 10px; margin-top: -.5em; position: absolute; top: 50%; width: 1em; z-index: 1; } .navigation-bar-slideout__slideout-link-style, .navigation-bar-slideout__list-item-link, .navigation-bar-slideout__menu .navigation-bar-slideout__account-options .cq-loginreglink { color: #000000; display: block; font-size: 14px; line-height: 14px; padding: 23px 26px; } .navigation-bar-slideout__slideout-link-style:hover, .navigation-bar-slideout__list-item-link:hover, .navigation-bar-slideout__menu .navigation-bar-slideout__account-options .cq-loginreglink:hover { color: #000000; } @media (min-width: 720px) { .navigation-bar-slideout__slideout-link-style, .navigation-bar-slideout__list-item-link, .navigation-bar-slideout__menu .navigation-bar-slideout__account-options .cq-loginreglink { font-size: 22px; line-height: 22px; } } .navigation-bar-slideout__slideout-link-style.hidden, .hidden.navigation-bar-slideout__list-item-link, .navigation-bar-slideout__menu .navigation-bar-slideout__account-options .hidden.cq-loginreglink { display: none; } .navigation-bar-slideout__slideout-link-style.disabled, .disabled.navigation-bar-slideout__list-item-link, .navigation-bar-slideout__menu .navigation-bar-slideout__account-options .disabled.cq-loginreglink { background: #eaeaea; border-top: 1px solid #cdcdcd; } .no-touch .navigation-bar-slideout__slideout-link-style:hover, .no-touch .navigation-bar-slideout__list-item-link:hover, .no-touch .navigation-bar-slideout__menu .navigation-bar-slideout__account-options .cq-loginreglink:hover, .navigation-bar-slideout__menu .navigation-bar-slideout__account-options .no-touch .cq-loginreglink:hover { background: #eaeaea; } .navigation-bar-slideout__list-item-link--next:before { font-family: 'cc-go'; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 26px; position: absolute; right: 10px; top: 50%; } .navigation-bar-slideout__language-options .navigation-bar-slideout__list-item { border-bottom: 1px solid #cdcdcd; } .navigation-bar-slideout__account-link { padding: 30px 0; } .navigation-bar-slideout__menu .social-icons li { margin: 0 3%; } @media (min-width: 1200px) { .navigation-bar-slideout__menu .social-icons li { margin: 0 5%; } } .navigation-bar-slideout__menu .circle-button { height: 40px; width: 40px; } @media (min-width: 1024px) { .navigation-bar-slideout__menu .circle-button { height: 55px; width: 55px; } } @media (min-width: 481px) { .navigation-bar-slideout .social-share-and-like--large .social-icons, .navigation-bar-slideout .social-share-and-like--small .social-icons { height: auto; } } .navigation-bar-slideout__menu .social-share-and-like { margin-top: 14px; } .navigation-bar-slideout__content-container { -moz-transition: all 300ms; -o-transition: all 300ms; -webkit-transition: all 300ms; position: relative; right: 0; top: 0; transition: all 300ms; width: 100%; z-index: 1; } .navigation-bar-slideout--active .navigation-bar-slideout__content-container { opacity: 0; } .navigation-bar-slideout__content-overlay { background: url("/etc/designs/P/5631383682678784/clientlib/img/cta-button-bg@2x.png") repeat 0 0; background-color: rgba(0, 0, 0, 0.5); background-size: 2px 2px; display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 10001; } .navigation-bar-slideout--active .navigation-bar-slideout__content-overlay { display: block; position: fixed; z-index: 1; } .navigation-bar-slideout__main-header { -moz-transition: top 300ms; -o-transition: top 300ms; -webkit-transition: top 300ms; -webkit-transform: translateZ(0); background-color: transparent; border: 0; left: 0; margin: 0; overflow: visible; padding: 0; position: fixed; top: 0; transition: top 300ms; width: 100%; } .navigation-bar-slideout--animate-header .navigation-bar-slideout__main-header { position: fixed; top: -150px; } .navigation-bar-slideout--animate-onstage .navigation-bar-slideout__main-header { transition: top 600ms; } .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__main-header { -moz-transition: none; -o-transition: none; -webkit-transition: none; position: absolute; transition: none; } .nav-search--active-out .navigation-bar-slideout__main-header { z-index: 10001; } @media (min-width: 960px) { .nav-search--active-out .navigation-bar-slideout__main-header { z-index: inherit; } } .janrain-and-overlay .navigation-bar-slideout__main-header { display: none; } .navigation-bar-slideout__global-menu { background-color: rgba(234, 234, 234, 0.9); min-height: 17px; opacity: 0; padding: 15vw 0 7vw; } .navigation-bar-slideout--home .navigation-bar-slideout__global-menu { padding: 28px 0; } @media (min-width: 960px) { .navigation-bar-slideout--home .navigation-bar-slideout__global-menu { padding: 3vw 0; } } @media (min-width: 960px) { .navigation-bar-slideout__global-menu { padding: 3vw 0; } } .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__global-menu { background-color: transparent; } .nav-search--active .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__global-menu { background-color: transparent; } .navigation-bar-slideout--nav-loaded .navigation-bar-slideout__global-menu { opacity: 1; } .nav-search--active .navigation-bar-slideout__global-menu { background-color: transparent; } @media (min-width: 960px) { .nav-search--active .navigation-bar-slideout__global-menu { background-color: rgba(234, 234, 234, 0.9); } } .navigation-bar__menu-toggle-icon svg { height: 16px; margin-top: 2px; width: 16px; } .navigation-bar-slideout__menu-toggle-close { color: #000000; font-size: 35px; position: absolute; right: 10px; top: 10px; } .no-touch .navigation-bar-slideout__menu-toggle-close { color: #000000; transition: all 0.2s ease-out; } .no-touch .navigation-bar-slideout__menu-toggle-close:hover { transition: all 0.1s ease-in; color: #009639; } .navigation-bar-slideout__menu-toggle-title { padding-left: 30px; } .navigation-bar-slideout__menu-toggle-title, .navigation-bar-slideout__product-toggle-selected { color: #000000; } .no-touch .navigation-bar-slideout__menu-toggle-title, .no-touch .navigation-bar-slideout__product-toggle-selected { color: #000000; transition: all 0.2s ease-out; } .no-touch .navigation-bar-slideout__menu-toggle-title:hover, .no-touch .navigation-bar-slideout__product-toggle-selected:hover { transition: all 0.1s ease-in; color: #000000; } .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__menu-toggle-title, .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__product-toggle-selected { color: #ffffff; } .no-touch .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__menu-toggle-title, .no-touch .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__product-toggle-selected { color: #ffffff; transition: all 0.2s ease-out; } .no-touch .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__menu-toggle-title:hover, .no-touch .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__product-toggle-selected:hover { transition: all 0.1s ease-in; color: #ffffff; } .navigation-bar-slideout__global-menu-side { /* Safari/Chrome, other WebKit */ /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } @media (max-width: 960px) { .navigation-bar-slideout__global-menu-side { max-width: 50% !important; } } .navigation-bar-slideout__global-menu-side--left { float: left; padding-left: 4%; padding-right: 10px; } @media (min-width: 960px) { .navigation-bar-slideout__global-menu-side--left { padding-left: 8%; width: 100%; } } .navigation-bar-slideout__global-menu-side--right { float: right; padding-left: 10px; padding-right: 4%; text-align: right; } @media (min-width: 960px) { .navigation-bar-slideout__global-menu-side--right { padding-right: 8%; } } .nav-search--active-down .navigation-bar-slideout__global-menu-side--right { -ms-transform: translateY(-50%); transform: translateY(-50%); } .navigation-bar-slideout__global-menu-list { box-sizing: border-box; position: relative; } .navigation-bar-slideout--interior .navigation-bar-slideout__global-menu-side--left .navigation-bar-slideout__global-menu-list { position: static; } @media (min-width: 960px) { .navigation-bar-slideout--interior .navigation-bar-slideout__global-menu-side--left .navigation-bar-slideout__global-menu-list { position: relative; } } .navigation-bar-slideout__global-menu-list-item { box-sizing: border-box; display: inline-block; font-size: 11px; height: 1.5em; padding: 0 4%; white-space: nowrap; } .navigation-bar-slideout__global-menu-side--left .navigation-bar-slideout__global-menu-list-item:first-child { border-left: 0; padding-left: 0; } .navigation-bar-slideout--interior .navigation-bar-slideout__global-menu-side--left .navigation-bar-slideout__global-menu-list-item:first-child { position: static; } @media (min-width: 960px) { .navigation-bar-slideout--interior .navigation-bar-slideout__global-menu-side--left .navigation-bar-slideout__global-menu-list-item:first-child { padding-left: calc(57px - -4vw); position: relative; } } .navigation-bar-slideout__global-menu-side--right .navigation-bar-slideout__global-menu-list-item:first-child { padding-left: 0; } @media (min-width: 960px) { .navigation-bar-slideout__global-menu-side--right .navigation-bar-slideout__global-menu-list-item:first-child { padding: 0 4vw; } } @media (min-width: 960px) { .navigation-bar-slideout__global-menu-list-item { font-size: 15px; border-left: 1px solid #000000; border-right: 1px solid #000000; } } @media (min-width: 960px) { .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__global-menu-list-item { border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; } } .navigation-bar-slideout__global-menu-side--left .navigation-bar-slideout__global-menu-list-item { border-left: 0; } .navigation-bar-slideout__global-menu-side--right .navigation-bar-slideout__global-menu-list-item { border-right: 0; } .nav-search--active .navigation-bar-slideout__global-menu-list-item { opacity: 0; } @media (min-width: 960px) { .nav-search--active .navigation-bar-slideout__global-menu-list-item { opacity: 1; } } .navigation-bar-slideout__global-menu-list-login-link { border-right: 0; box-sizing: border-box; } @media (min-width: 960px) { .navigation-bar-slideout__global-menu-list-login-link { margin-right: 50px; } .nav-search--active .navigation-bar-slideout__global-menu-list-login-link { float: left; width: auto; } .nav-search--active .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__global-menu-list-login-link { border-right: 1px solid #ffffff; } } .navigation-bar-slideout__global-menu-list-login-link--no-margin { margin-left: 0; margin-right: 0; } .navigation-bar-slideout__global-menu-list--left { float: left; } .navigation-bar-slideout__global-menu-list--right { float: right; } .navigation-bar-slideout__global-menu-list-item-home { float: left; } @media (min-width: 960px) { .navigation-bar-slideout__global-menu-list-item-home { padding-left: 40px; } } .navigation-bar-slideout__menu-home-container { background-color: #cdcdcd; left: 0; opacity: 1; padding: 6px 4%; position: absolute; top: 0; width: 100%; } @media (min-width: 960px) { .navigation-bar-slideout__menu-home-container { background-color: transparent; border-right: 1px solid #000000; left: 6%; padding: 0 28px 0 0; top: auto; width: auto; } } .navigation-bar-slideout--home .navigation-bar-slideout__menu-home-container { display: none; } .navigation-bar-slideout__menu-home-text { color: #000000; padding-left: 10px; position: relative; top: 1px; } @media (min-width: 960px) { .navigation-bar-slideout__menu-home-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } } .navigation-bar-slideout__menu-home-icon { float: left; height: 20px; width: 18px; } .navigation-bar-slideout__menu-home-icon-svg { display: none; fill: #000000; } @media (min-width: 960px) { .navigation-bar-slideout__menu-home-icon-svg { display: inline; position: static; } } .navigation-bar-slideout__menu-back-icon-svg { fill: #000000; position: absolute; } @media (min-width: 960px) { .navigation-bar-slideout__menu-back-icon-svg { display: none; } } .navigation-bar-slideout__menu-home-icon-path { fill: transparent; stroke: #000000; } .navigation-bar-slideout__global-menu .navigation-bar__menu-toggle-svg { fill: #000000; } .navigation-bar-slideout--pinned-onstage .navigation-bar__menu-toggle-svg { fill: #ffffff; } @media (min-width: 960px) { .navigation-bar-slideout__menu-home { position: relative; top: 2px; } } .cq-loginreglink { text-align: left; white-space: normal; } .navigation-bar-slideout__menu .navigation-bar-slideout__account-options .cq-loginreglink { box-sizing: border-box; text-align: center; width: 100%; } .navigation-bar-slideout__menu .cq-loginreglink { border: 0; margin: 0; position: static; width: calc(100% - 28px); } .navigation-bar-slideout__menu .cq-loginreglink a { font-weight: normal; color: #000000; transition: all 0.2s ease-out; } .navigation-bar-slideout__menu .cq-loginreglink a:hover { transition: all 0.1s ease-in; color: #000000; } .no-touch .navigation-bar-slideout__menu .cq-loginreglink a { color: #000000; transition: all 0.2s ease-out; } .no-touch .navigation-bar-slideout__menu .cq-loginreglink a:hover { transition: all 0.1s ease-in; color: #000000; } @media (min-width: 960px) { .no-touch .navigation-bar-slideout__menu .cq-loginreglink a { color: #000000; transition: all 0.2s ease-out; } .no-touch .navigation-bar-slideout__menu .cq-loginreglink a:hover { transition: all 0.1s ease-in; color: #000000; } } .navigation-bar-slideout__global-menu-list-item .cq-loginreglink { background-color: transparent; border: 0; display: inline-block; min-height: 0; padding: 0; position: static; } @media (min-width: 960px) { .navigation-bar-slideout__global-menu-list-item .cq-loginreglink { margin-right: 22px; } } .navigation-bar-slideout__global-menu-list-item .cq-loginreglink a { font-weight: normal; color: #000000; transition: all 0.2s ease-out; } .navigation-bar-slideout__global-menu-list-item .cq-loginreglink a:hover { transition: all 0.1s ease-in; color: #000000; } .no-touch .navigation-bar-slideout__global-menu-list-item .cq-loginreglink a { color: #000000; transition: all 0.2s ease-out; } .no-touch .navigation-bar-slideout__global-menu-list-item .cq-loginreglink a:hover { transition: all 0.1s ease-in; color: #000000; } @media (min-width: 960px) { .no-touch .navigation-bar-slideout__global-menu-list-item .cq-loginreglink a { color: #000000; transition: all 0.2s ease-out; } .no-touch .navigation-bar-slideout__global-menu-list-item .cq-loginreglink a:hover { transition: all 0.1s ease-in; color: #000000; } } .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__global-menu-list-item .cq-loginreglink a { color: #ffffff; transition: all 0.2s ease-out; } .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__global-menu-list-item .cq-loginreglink a:hover { transition: all 0.1s ease-in; color: #ffffff; } .no-touch .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__global-menu-list-item .cq-loginreglink a { color: #ffffff; transition: all 0.2s ease-out; } .no-touch .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__global-menu-list-item .cq-loginreglink a:hover { transition: all 0.1s ease-in; color: #ffffff; } @media (min-width: 960px) { .no-touch .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__global-menu-list-item .cq-loginreglink a { color: #ffffff; transition: all 0.2s ease-out; } .no-touch .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__global-menu-list-item .cq-loginreglink a:hover { transition: all 0.1s ease-in; color: #ffffff; } } @media (min-width: 960px) { .nav-search--active .navigation-bar-slideout__global-menu-list-item .cq-loginreglink { display: none; } } .navigation-bar-slideout__global-menu-list-item .navigation-bar-slideout__menu-user-icon { display: inline-block; float: left; height: 20px; padding-right: 6px; position: relative; text-align: center; top: 2px; width: 28px; } .nav-search--active-out .navigation-bar-slideout__global-menu-list-item .navigation-bar-slideout__menu-user-icon { cursor: pointer; } .navigation-bar-slideout__menu-user-icon-svg { border: 1px solid #000000; border-radius: 100%; left: 0; padding: 3px; position: absolute; top: -4px; } .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__menu-user-icon-svg { border-color: #ffffff; } .navigation-bar-slideout__menu-user-icon-svg-path { fill: #000000; } .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__menu-user-icon-svg-path { fill: #ffffff; } .navigation-bar-slideout .nav-search-button { -ms-transform: translateX(6px); transform: translateX(6px); } .nav-search--active .navigation-bar-slideout .nav-search-button { cursor: default; } .nav-search__icon { fill: #ffffff; } .nav-search__icon:hover { fill: #000000; } .navigation-bar-slideout .nav-search__icon { fill: #000000; } .navigation-bar-slideout--pinned-onstage .nav-search__icon { fill: #ffffff; } .navigation-bar-slideout .twitter-typeahead { left: 0; position: absolute; width: 100%; } .navigation-bar-slideout__global-menu-list-item-search { box-sizing: border-box; position: absolute; right: 0; top: 0; } .navigation-bar-slideout__global-menu-list-item-search *, .navigation-bar-slideout__global-menu-list-item-search *:after, .navigation-bar-slideout__global-menu-list-item-search *:before { box-sizing: border-box; } .nav-search--active .navigation-bar-slideout__global-menu-list-item-search { border: 0; opacity: 1; } .navigation-bar-slideout__global-menu-list-item-search:before { content: ''; display: none; } .nav-search--active .navigation-bar-slideout__global-menu-list-item-search:before { background: url("/etc/designs/P/5631383682678784/clientlib/img/cta-button-bg@2x.png") repeat 0 0; background-color: #000000; background-size: 2px 2px; display: block; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 0; } @media (min-width: 960px) { .nav-search--active .navigation-bar-slideout__global-menu-list-item-search:before { display: none; } } .navigation-bar-slideout .nav-search-input-container { /* Safari and Chrome */ /* Firefox 4 */ /* Opera */ transition: right 0.2s ease-in-out; background-color: #ffffff; display: block; height: 100%; padding: 20px; position: fixed; right: -100%; top: 0; width: auto; z-index: 1; } .nav-search--active-out .navigation-bar-slideout .nav-search-input-container { right: 0; width: 80%; } @media (min-width: 481px) { .nav-search--active-out .navigation-bar-slideout .nav-search-input-container { width: 50%; } } @media (min-width: 960px) { .navigation-bar-slideout .nav-search-input-container { /* Safari and Chrome */ /* Firefox 4 */ /* Opera */ transition: width 0.2s ease-in-out; background-color: transparent; display: inline-block; left: auto; padding: 0; position: relative; right: auto; width: 0; } } .nav-search-input-field:before { -webkit-mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-search.svg); mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-search.svg); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0; background-color: #000000; border: 0; content: ''; display: inline-block; height: 20px; left: -30px; margin-right: 5px; padding: 0; position: absolute; top: 3px; vertical-align: middle; width: 20px; } @media (min-width: 320px) and (max-width: 768px) { .nav-search-input-field { left: 55px; position: absolute; width: calc(100% - 110px); } } @media (min-width: 769px) and (max-width: 1024px) { .nav-search-input-field { left: 12px; width: calc(100% + 11px); } .nav-search-input-field:before { display: none; } } @media (min-width: 1025px) { .nav-search-input-field { left: 12px; width: calc(100% - 42px); } .nav-search-input-field:before { display: none; } } *[dir="rtl"] .nav-search-input-field:before { background-color: transparent; background-image: url("/etc/designs/P/5631383682678784/clientlib/img/btn-search-black@x2.png"); background-position: 50% 50%; background-repeat: no-repeat; background-size: 20px 20px; border: 0; content: ''; display: inline-block; height: 20px; left: -30px; margin-right: 5px; padding: 0; position: absolute; top: 1px; vertical-align: middle; width: 20px; } @media (min-width: 320px) and (max-width: 768px) { *[dir="rtl"] .nav-search-input-field { left: 55px; position: absolute; width: calc(100% - 110px); } } @media (min-width: 769px) and (max-width: 1024px) { *[dir="rtl"] .nav-search-input-field { left: 12px; width: calc(100% + 55px); } *[dir="rtl"] .nav-search-input-field:before { display: none; } } @media (min-width: 1025px) { *[dir="rtl"] .nav-search-input-field { left: 12px; width: calc(100% + 52px); } *[dir="rtl"] .nav-search-input-field:before { display: none; } } .navigation-bar-slideout .nav-search-input { border: 1px solid #000000; width: 100%; } .touch .nav-search-input { -ms-transform: translateY(-3px); transform: translateY(-3px); } .navigation-bar-slideout .nav-search-do-search-button { display: none; } .navigation-bar-slideout .nav-search-do-search-button:before { left: 6px; position: absolute; top: 2px; } .touch .navigation-bar-slideout .nav-search-do-search-button:before { top: 0; } .nav-search--active .navigation-bar-slideout .nav-search-do-search-button { display: inline-block; } .navigation-bar-slideout .nav-search-close-button { color: #000000; height: 35px; top: -7px; width: 35px; } .no-touch .navigation-bar-slideout .nav-search-close-button { color: #000000; transition: all 0.2s ease-out; } .no-touch .navigation-bar-slideout .nav-search-close-button:hover { transition: all 0.1s ease-in; color: #009639; } .touch .navigation-bar-slideout .nav-search-close-button { top: -5px; } .navigation-bar-slideout .nav-search-close-button:before { font-size: 35px; } @media (min-width: 960px) { .navigation-bar-slideout .nav-search-close-button { border: inherit; color: #000000; height: 20px; top: auto; width: 20px; } .navigation-bar-slideout .nav-search-close-button:before { font-size: 24px; } .no-touch .navigation-bar-slideout .nav-search-close-button { color: #000000; transition: all 0.2s ease-out; } .no-touch .navigation-bar-slideout .nav-search-close-button:hover { transition: all 0.1s ease-in; color: #000000; } } @media (min-width: 960px) { .navigation-bar-slideout.navigation-bar-slideout--pinned-onstage .nav-search-close-button { color: #ffffff; } .no-touch .navigation-bar-slideout.navigation-bar-slideout--pinned-onstage .nav-search-close-button { color: #ffffff; transition: all 0.2s ease-out; } .no-touch .navigation-bar-slideout.navigation-bar-slideout--pinned-onstage .nav-search-close-button:hover { transition: all 0.1s ease-in; color: #ffffff; } } .navigation-bar-slideout__product-toggle-container { text-align: center; } .navigation-bar-slideout__product-toggle-selected .icon-cc-next, .navigation-bar-slideout__product-toggle-selected .navigation-bar-slideout__list-item-link--next:before { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); display: inline-block; font-size: 12px; margin-left: 8px; transform: rotate(90deg); } .navigation-bar-slideout__product-container--open .icon-cc-next, .navigation-bar-slideout__product-container--open .navigation-bar-slideout__list-item-link--next:before { -ms-transform: rotate(270deg); transform: rotate(270deg); } @media (min-width: 960px) { .no-touch .navigation-bar-slideout__product-toggle { color: #000000; transition: all 0.2s ease-out; } .no-touch .navigation-bar-slideout__product-toggle:hover { transition: all 0.1s ease-in; color: #000000; } } @media (min-width: 960px) { .no-touch .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__product-toggle { color: #ffffff; transition: all 0.2s ease-out; } .no-touch .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__product-toggle:hover { transition: all 0.1s ease-in; color: #ffffff; } } .navigation-bar-slideout__product-toggle-indicator { border: 1px solid #cdcdcd; border-radius: 1em; display: inline-block; height: 1em; margin-right: 6px; vertical-align: -2px; width: 1em; } .navigation-bar-slideout__product-container { position: relative; } .navigation-bar-slideout__product-options { -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); display: none; left: 50%; padding-top: 16px; position: absolute; transform: translateX(-50%); } .navigation-bar-slideout__product-options:before { border-bottom: 8px solid #ffffff; border-left: 8px solid transparent; border-right: 8px solid transparent; content: ''; display: block; height: 0; left: 50%; margin-left: -4px; position: absolute; top: 8px; width: 0; } .navigation-bar-slideout__product-options-list { text-align: center; } .navigation-bar-slideout__menu .navigation-bar-slideout__product-options-list { margin: 20px 0; } .navigation-bar-slideout__product-option-list-item { height: 48px; min-height: 48px; position: relative; } .navigation-bar-slideout__product-option-list-item--active:before { font-family: 'cc-go'; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; background-color: #000000; border-radius: 1em; content: '\e908'; display: block; font-size: 1.5em; height: 1em; left: 10px; margin-top: -.5em; position: absolute; top: 50%; width: 1em; z-index: 2; } .navigation-bar-slideout__product-options .navigation-bar-slideout__product-option-list-item--active:before { background-color: #000000; border-radius: 16px; font-size: 16px; font-weight: bold; height: 16px; left: 5px; top: 50%; width: 16px; } .navigation-bar-slideout__product-toggle-option-text { display: inline-block; line-height: 1.25em; margin: 0.6em 0; min-width: 80%; padding: 5px 40px; text-align: left; white-space: normal; } @media (min-width: 960px) { .navigation-bar-slideout__product-toggle-option-text { min-width: 110px; padding: 5px 35px; } } .navigation-bar-slideout__product-toggle-option { min-width: 180px; width: 100%; } .navigation-bar-slideout__product-toggle-option-image { height: 48px; vertical-align: middle; } .navigation-bar-slideout__brand { -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); left: 50%; position: fixed; text-align: center; top: 12px; transform: translateX(-50%); z-index: 10000; } .navigation-bar-slideout--interior .navigation-bar-slideout__brand { top: 44px; width: 22vw; } @media (min-width: 960px) { .navigation-bar-slideout--interior .navigation-bar-slideout__brand { top: 12px; width: 9vw; } } .nav-search--active .navigation-bar-slideout__brand { opacity: 0; } @media (min-width: 960px) { .nav-search--active .navigation-bar-slideout__brand { opacity: 1; } } .navigation-bar-slideout__brand-image { display: inline-block; height: 126px; opacity: 0; } @media (min-width: 960px) { .navigation-bar-slideout--animate-onstage .navigation-bar-slideout__brand-image { height: 254px; } } .navigation-bar-slideout--nav-loaded .navigation-bar-slideout__brand-image { opacity: 1; } .navigation-bar-slideout--interior .navigation-bar-slideout__brand-image { height: auto; width: 100%; } .has-navigation-bar-slideout { -moz-transition: left 300ms; -o-transition: left 300ms; -webkit-transition: left 300ms; left: 0; transition: left 300ms; } .navigation-bar-slideout__content-spacer { display: none; width: 100%; } .has-navigation-bar-slideout #main-content { position: relative; transition: all 300ms; width: 100%; z-index: 0; } @media (min-width: 768px) { .nav-search--active-out body:not(.has-navigation-bar-slideout) #main-content { -ms-transform: none; transform: none; } } .has-overlay .has-navigation-bar-slideout #main-content { z-index: 1; } .navigation-bar-slideout--active #main-content { -moz-transform: translateX(80%); -ms-transform: translateX(80%); -webkit-transform: translateX(80%); overflow: hidden; transform: translateX(80%); width: 100%; } @media (min-width: 481px) { .navigation-bar-slideout--active #main-content { -ms-transform: translateX(50%); transform: translateX(50%); } } @media (min-width: 1024px) { .navigation-bar-slideout--active #main-content { -ms-transform: translateX(33%); transform: translateX(33%); } } .nav-search-dir--down #main-content, #main-content .nav-search-dir--out { -moz-transition: all 300ms; -o-transition: all 300ms; -webkit-transition: all 300ms; position: relative; transition: all 300ms; width: 100%; z-index: 0; } .nav-search--active-out #main-content { -moz-transform: translateX(-80%); -ms-transform: translateX(-80%); -webkit-transform: translateX(-80%); overflow: hidden; transform: translateX(-80%); width: 100%; } @media (min-width: 481px) { .nav-search--active-out #main-content { -ms-transform: translateX(-50%); transform: translateX(-50%); } } @media (min-width: 960px) { .nav-search--active-out #main-content { -ms-transform: none; transform: none; } } .has-navigation-bar-slideout .scroll-container { height: 100%; overflow-x: hidden; overflow-y: scroll; padding: 0 10px 10px; position: relative; width: 100%; } .has-navigation-bar-slideout.janrain-modal--open .scroll-container { height: auto; position: fixed; } .nav-search--active-out .scroll-container { overflow: hidden; } @media (min-width: 960px) { .nav-search--active-out .scroll-container { overflow: auto; } } .has-navigation-bar-slideout.navigation-bar-slideout--active .scroll-container { overflow: hidden; } body.has-navigation-bar-slideout { padding: 0; } /* 0px =========================== */ @media (min-width: 0) { .nav { float: left; height: auto; padding-top: 0; width: 100%; } .level1 { height: 34px; } } @media screen and (min-width: 0) and (max-width: 480px) { #mobile-nav-wrap #mobile-nav-jump > a { overflow: hidden; position: relative; text-indent: -9999px; /* Safari and Chrome */ /* Firefox 4 */ /* Opera */ transition: all ease-out 0.1s; } #mobile-nav-wrap #mobile-nav-jump > a:before { border-bottom: 2px solid #009639; border-top: 6px double #009639; content: ""; height: 0.125em; left: 50%; margin-left: -7px; padding-bottom: 2px; position: absolute; top: 13px; width: 1em; width: 14px; } } @media (min-width: 0) { /* Hide main nav menu and show the sitemap jumplink */ #nav-top-menu, #subnavs, .pushdown-search { display: none; } #mobile-nav-wrap { float: left; height: auto; padding: 10px 0; position: relative; width: 100%; z-index: 999; } #mobile-nav-jump { background: #ffffff; text-align: center; } #mobile-nav-jump a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 18px; line-height: 1.5em; color: #009639; background: #ffffff; display: block; letter-spacing: -0.04em; margin: 0; padding: 4px 0; text-transform: uppercase; width: 100%; } #mobile-nav-jump a:hover { color: #009639; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { #mobile-nav-wrap { display: none; } #nav-top-menu { display: block; } #overflowbutton { display: auto; } section.nav { float: left; padding: 10px 0; position: relative; width: 100%; /*common base styles for the nav's main and sub elements*/ } section.nav li { font-size: 18px; } section.nav li a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; color: #009639; display: inline-block; letter-spacing: -0.04em; padding: 7px 9px; width: auto; text-transform: uppercase; transition: all 0.2s ease-out; } section.nav ul.level3 li a, section.nav ul.level3b li a { text-transform: capitalize; } section.nav .active > a { background: transparent; color: #000000; } section.nav a.current { color: #ffffff; } section.nav ul.level1 { position: relative; text-align: center; white-space: nowrap; width: auto; } section.nav #overflowbutton, section.nav ul.level1 > li { display: inline; margin: 0 2px; } section.nav #overflowbutton > a, section.nav ul.level1 > li > a { display: inline-block; } section.nav ul.level2, section.nav ul.level3, section.nav ul.level3b { background-color: #ffffff; float: left; left: 0; list-style: none; padding: 6px 0; position: absolute; text-align: center; top: 44px; white-space: normal; width: 100%; } section.nav ul.level2 li, section.nav ul.level3 li, section.nav ul.level3b li { background-color: transparent; color: #009639; display: inline; font-size: 16px; } section.nav ul.level2 li a, section.nav ul.level3 li a, section.nav ul.level3b li a { display: inline; padding: 0; transition: all 0.2s ease-out; } section.nav ul.level2 li a:hover, section.nav ul.level3 li a:hover, section.nav ul.level3b li a:hover { background-color: transparent; color: #000000; transition: all 0.1s ease-in; } section.nav ul.level2 { background-color: #ffffff; } section.nav ul.level3 { background-color: #ffffff; } section.nav ul#overflowitems.level2 { display: inline; } section.nav ul#overflowitems.level2 li .active > a { background: #ffffff; color: #ffffff; } section.nav ul.level3b { background: none !important; padding: 10px 0; } section.nav ul.level3b .active > a { background-color: transparent !important; color: #ffffff; } section.nav ul#overflowitems.level2 ul.level3 { margin-top: 10px; top: 50px; } section.nav ul#overflowitems.level2 ul.level3.jumplinks { background-color: #ececec; bottom: -39px; top: auto; } section.nav ul#overflowitems.level2 ul.level3 li a { display: inline; padding: 0; } section.nav ul#overflowitems.level2 ul.level3 li a:hover { background-color: transparent; color: #ffffff; transition: all 0.1s ease-in; } section.nav ul.level2 li:after { content: " / "; } section.nav ul.level2 li:last-child:after { content: ""; } section.nav ul.noslash li:after { content: ""; } section.nav ul.noslash li ul li:after { content: " / "; } section.nav ul.noslash li ul li:last-child:after { content: ""; } section.nav #overflowitems { background: none; border-top: 0; top: 30px; } section.nav #overflowitems > li { font-size: 18px; line-height: 1em; } section.nav #overflowitems > li a { letter-spacing: -0.04em; padding: 8px; } section.nav ul.level1 > li > ul { display: none; } section.nav #overflowitems > li > ul { display: none; } section.nav #nav-more { border: 1px solid purple; display: inline-block; } section.nav #nav-more .nav-btn { margin-right: 0; } #nav-search { display: inline; margin: 0; padding: 0; } #nav-search .search-btn { background: url("/etc/designs/P/5631383682678784/clientlib/img/btn-search.png") 50% 50% no-repeat transparent; cursor: pointer; display: inline-block; height: 18px; line-height: 1em; margin: 0; padding: 8px; text-indent: -9999px; width: 18px; transition: all 0.2s ease-out; } #nav-search .search-btn:hover { transition: all 0.1s ease-in; background: url("/etc/designs/P/5631383682678784/clientlib/img/btn-search.png") 50% 50% no-repeat #ffffff; } #nav-search .search-btn-active { background: url("/etc/designs/P/5631383682678784/clientlib/img/btn-search.png") 50% 50% no-repeat #ffffff; } #nav-search .search-wrap { float: left; position: relative; } #navsearchform { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; color: #009639; background: transparent; float: right; margin: 0; overflow: hidden; padding: 0; text-align: center; width: 100%; } #navsearchform input[type="text"] { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 18px; line-height: 1em; color: #000000; -webkit-appearance: none; background-color: #ffffff; border: 0; display: block; margin: 0 auto; overflow: hidden; padding: 0; position: relative; text-align: center; text-transform: uppercase; width: 95%; z-index: 9999; } #navsearchform input[type="submit"] { display: none; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { #navsearchform input[type="text"] { width: 98%; } section.nav .active > a { background: #ffffff; color: #000000; } section.nav li a:hover { background: #ffffff; transition: all 0.1s ease-in; } section.nav ul#overflowitems.level2 li a:hover { background-color: #ffffff; color: #009639; transition: all 0.1s ease-in; } section.stuck { background-color: #ececec; display: block; left: 0; position: fixed !important; top: 0; width: 100%; } section.sticky ul.level3b { background-color: #ececec !important; } } /* =============================== */ /* ======================================================================== ONEBRAND: HEADER - COMMON HEADER - COMMON: HEADER NAVIGATION BAR ======================================================================== */ /* :START VARIABLES */ /* Color */ /* FontWeight */ /* BorderColor */ /* Border */ /* Background Color */ /* Background */ /* Others variables */ /* :END VARIABLES */ @media (min-width: 768px) { .navigation-bar__login-link { color: #ffffff; } } @media (min-width: 768px) { .no-touch .navigation-bar__login-link a { color: #ffffff; transition: all 0.2s ease-out; } .no-touch .navigation-bar__login-link a:hover { transition: all 0.1s ease-in; color: #000000; } } .navigation-bar__menu-user-icon-svg { border: 1px solid #ffffff; } @media (min-width: 768px) { .navigation-bar__menu-user-icon-svg { border-color: #ffffff; } } .navigation-bar__menu-user-icon-svg-path { fill: #ffffff; } @media (min-width: 768px) { .navigation-bar__menu-user-icon-svg-path { fill: #ffffff; } } .navigation-bar .nav-search__icon { fill: #ffffff; } .navigation-bar .nav-search__icon:hover { fill: #000000; } @media (min-width: 768px) { .navigation-bar .nav-search__icon { fill: #ffffff; } .no-touch .navigation-bar .nav-search__icon:hover { fill: #ffffff; } } @media screen and (max-width: 767px) { .nav-search-input-field .twitter-typeahead input { background: #ececec; } } @media (min-width: 768px) { .navigation-bar .nav-search-close-button { color: #ffffff; } .no-touch .navigation-bar .nav-search-close-button { color: #000000; transition: all 0.2s ease-out; } .no-touch .navigation-bar .nav-search-close-button:hover { transition: all 0.1s ease-in; color: #000000; } } .nav-search-dir--down .navigation-bar .nav-search-close-button { color: #000000; } .navigation-bar .nav-search-close-button .navigation-bar__menu-toggle-svg-close { fill: #ffffff; } @media (min-width: 768px) { .navigation-bar .nav-search-close-button .navigation-bar__menu-toggle-svg-close { fill: #ffffff; } } .no-touch .navigation-bar .nav-search-close-button:hover .navigation-bar__menu-toggle-svg-close { fill: #000000; } .navigation-bar { font-weight: 500; } .cq-loginreglink a { font-weight: 500; } @media (min-width: 768px) { .cq-loginreglink a { color: #ffffff; } } @media (min-width: 960px) { .navigation-bar-slideout__global-menu-list-item .cq-loginreglink { margin-right: 0; } } .navigation-bar__brand-background { background-color: #009639; } .navigation-bar__menu { background-color: #ffffff; border-top: 1px solid #f4f4f4; } .navigation-bar--visible-nav .navigation-bar__menu { background-color: #ffffff; } @media (min-width: 768px) { .navigation-bar__list { border-top: 1px solid #f4f4f4; } } .navigation-bar__menu-label { font-weight: 500; } @media (min-width: 768px) { .navigation-bar__list--sub { border-top: none; } } @media (min-width: 768px) { .navigation-bar__list--subsub { border-top: none; } } @media (min-width: 768px) { .navigation-bar--visible-nav .navigation-bar__list-item-link:hover { border-color: #009639; } } .navigation-bar--visible-nav .navigation-bar__list-item-link { color: #009639; } .navigation-bar--visible-nav .navigation-bar__list-item-link:hover { color: #000000; } .navigation-bar__menu-toggle-container { background-color: #ffffff; } @media (min-width: 768px) { .navigation-bar__menu-toggle-container { background-color: transparent; } } .navigation-bar__menu-toggle-title { color: #ffffff; font-weight: 500; } @media (min-width: 768px) { .navigation-bar__menu-toggle-title { color: #ffffff; } .no-touch .navigation-bar__menu-toggle:hover .navigation-bar__menu-toggle-title { color: #000000; } } .navigation-bar__menu-toggle--open .navigation-bar__menu-toggle-title { color: #000000; } .navigation-bar__menu-toggle-icon .navigation-bar__menu-toggle-svg { fill: #ffffff; transition: all 0.2s ease-in; } @media (min-width: 768px) { .navigation-bar__menu-toggle-icon .navigation-bar__menu-toggle-svg { fill: #ffffff; } } .navigation-bar-slideout--interior .navigation-bar__menu-toggle-icon .navigation-bar__menu-toggle-svg { fill: #000000; } .navigation-bar-slideout--home .navigation-bar__menu-toggle-icon .navigation-bar__menu-toggle-svg { fill: #000000; } .navigation-bar-slideout--home.navigation-bar-slideout--pinned-onstage .navigation-bar__menu-toggle-icon .navigation-bar__menu-toggle-svg { fill: #ffffff; } .navigation-bar--visible-nav .navigation-bar__menu-toggle .navigation-bar__menu-toggle-icon .navigation-bar__menu-toggle-svg { fill: #ffffff; } @media (min-width: 768px) { .no-touch .navigation-bar__menu-toggle:hover .navigation-bar__menu-toggle-icon .navigation-bar__menu-toggle-svg { fill: #000000; transition: all 0.2s ease-out; } } .navigation-bar__language-options { background-color: #ffffff; } #mainnavmenu .navigation-bar__language-options .navigation-bar__language-toggle-option-link { color: #009639; } #mainnavmenu .navigation-bar__language-options .navigation-bar__language-toggle-option-link:hover { color: #000000; } .navigation-bar--visible-nav .navigation-bar__language-options .navigation-bar__language-toggle-option { color: #009639; } .navigation-bar--visible-nav .navigation-bar__language-options .navigation-bar__language-toggle-option:hover { color: #000000; } #mainnavmenu .navigation-bar__language-toggle-option-link { color: #009639; } #mainnavmenu .navigation-bar__language-toggle-option-link:hover { color: #000000; } .navigation-bar__language-toggle-container { background-color: #ffffff; } @media (min-width: 768px) { .navigation-bar__language-toggle-container { background-color: transparent; } } .navigation-bar__language-toggle { font-weight: 500; } @media (min-width: 768px) { .no-touch .navigation-bar__language-toggle { color: #ffffff; transition: all 0.2s ease-out; } .no-touch .navigation-bar__language-toggle:hover { transition: all 0.1s ease-in; color: #000000; } } .no-touch .navigation-bar__language-toggle:hover:before { border-top-color: #000000; } .navigation-bar__language-toggle:before { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 6px solid #009639; } @media (min-width: 768px) { .navigation-bar__language-toggle:before { border-top-color: #ffffff; } } .navigation-bar__language-toggle.navigation-bar__language-toggle--open { color: #000000; } .navigation-bar__language-toggle.navigation-bar__language-toggle--open:before { border-bottom: 6px solid #000000; border-top: none; } .navigation-bar__language-toggle-active { background-color: #f4f4f4; } .navigation-bar__language-toggle-active .navigation-bar__language-toggle-option-link { color: #000000; } .navigation-bar__language-toggle-option-link { font-weight: 500; } /* ======================================================================== ONEBRAND: HEADER - COMMON HEADER - COMMON: HEADER NAVIGATION BAR SLIDE ======================================================================== */ /* :START VARIABLES */ /* FontSize */ /* Color */ /* FontWeight */ /* LineHeight */ /* Background */ /* Background Color */ /* Border Color */ /* Brands color */ /* Others Variables */ /* Border */ /* :END VARIABLES */ .navigation-bar-slideout__menu-label { font-weight: normal; } .navigation-bar-slideout__list-item--active:before { color: #474747; } .navigation-bar-slideout__list-item-link { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 22px; line-height: 22px; } @media (min-width: 720px) { .navigation-bar-slideout__list-item-link { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 28px; line-height: 28px; } } .navigation-bar-slideout__list-item-link.hidden { display: none; } .navigation-bar-slideout__list-item-link.disabled { background: #eaeaea; border-top: 1px solid 24px; } .no-touch .navigation-bar-slideout__list-item-link:hover { background: #eaeaea; } .navigation-bar-slideout__main-header { width: auto; } @media all and (min-device-width: 1280px) { .navigation-bar-slideout__main-header { right: 0; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { .navigation-bar-slideout__main-header { /* No scrollbar on tablet landscape */ right: 0; } } @media all and (max-device-width: 768px) { .navigation-bar-slideout__main-header { /* No scrollbar on mobile */ right: 0; } } @media all and (min-device-width: 1280px) { .navigation-bar-slideout--animate-header .navigation-bar-slideout__main-header { /* Scrollbar on non mobile */ right: 0.9em; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { .navigation-bar-slideout--animate-header .navigation-bar-slideout__main-header { /* No scrollbar on tablet landscape */ right: 0; } } @media all and (max-device-width: 768px) { .navigation-bar-slideout--animate-header .navigation-bar-slideout__main-header { /* No scrollbar on mobile */ right: 0; } } .janrain-and-overlay .navigation-bar-slideout__main-header { display: none; } .navigation-bar-slideout__global-menu { background-color: rgba(234, 234, 234, 0.9); opacity: 0; } @media all and (orientation: portrait) { .navigation-bar-slideout__global-menu { padding: 15vw 0 7vw; } } @media all and (orientation: landscape) { .navigation-bar-slideout__global-menu { padding: 7vw 0 3vw; } } .navigation-bar-slideout--home .navigation-bar-slideout__global-menu { padding: 28px 0; } @media (min-width: 960px) { .navigation-bar-slideout--home .navigation-bar-slideout__global-menu { padding: 3.25vw 0; } } @media (min-width: 960px) { .navigation-bar-slideout__global-menu { padding: 3.25vw 0; } } .navigation-bar-slideout--nav-loaded .navigation-bar-slideout__global-menu { opacity: 1; } .navigation-bar-slideout__menu-toggle-close { color: #474747; font-size: 26px; } .no-touch .navigation-bar-slideout__menu-toggle-close { color: #474747; transition: all 0.2s ease-out; } .no-touch .navigation-bar-slideout__menu-toggle-close:hover { transition: all 0.1s ease-in; color: #009639; } @media screen and (min-width: 960px) { .navigation-bar-slideout__global-menu-side--left { padding-left: calc(8% + -75px); } } .navigation-bar-slideout__global-menu-side--right { padding-left: 0; padding-right: 0; } html:not(.nav-search-dir--out) { font-size: 200px; } .navigation-bar-slideout__global-menu-list-item { font-size: 11px; margin-bottom: 0; margin-top: 0; white-space: nowrap; line-height: 19px; } .navigation-bar-slideout__global-menu-list-item { padding: 0 3vw; } @media screen and (min-width: 960px) { .navigation-bar-slideout__global-menu-list-item { font-size: 15px; line-height: 22px; } } @media screen and (min-width: 960px) { .navigation-bar-slideout--interior .navigation-bar-slideout__global-menu-side--left .navigation-bar-slideout__global-menu-list-item:first-child { padding-left: calc(57px - -2.7vw); position: relative; } } .navigation-bar-slideout--interior .navigation-bar-slideout__global-menu-side--left .navigation-bar-slideout__global-menu-list-item.global-menu-list-item-home-subpages { padding-left: 3%; } .navigation-bar-slideout__global-menu-side--right .navigation-bar-slideout__global-menu-list-item:first-child { padding: 0 4vw; } @media (min-width: 960px) { .navigation-bar-slideout__global-menu-side--right .navigation-bar-slideout__global-menu-list-item:first-child { margin-right: 8vw; padding: 0 4vw; } .nav-search--active .navigation-bar-slideout__global-menu-side--right .navigation-bar-slideout__global-menu-list-item:first-child { margin-right: 0; } } @media (min-width: 960px) { .navigation-bar-slideout__global-menu-side--right .navigation-bar-slideout__global-menu-list-item:only-of-type { margin-right: 0; } } .navigation-bar-slideout__global-menu-list-item.clear-border-left { border-left: none; } .navigation-bar-slideout__global-menu-list-item.clear-border-right { border-right: none; } @media screen and (min-width: 960px) { html:not(.nav-search-dir--out) .navigation-bar-slideout__global-menu-list-login-link:not(.navigation-bar-slideout__global-menu-list-login-link--no-margin) { margin-right: 94px; } } .navigation-bar-slideout__global-menu-side .navigation-bar-slideout__global-menu-list .navigation-bar-slideout__global-menu-list-login-link--no-margin { margin-left: 0; margin-right: 0; } .navigation-bar-slideout__global-menu-list { display: block; margin: 0; padding: 0; width: 100%; } .navigation-bar-slideout__global-menu-side--right .navigation-bar-slideout__global-menu-list { -webkit-justify-content: flex-end; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: end; justify-content: flex-end; } .nav-search--active-out .navigation-bar-slideout__global-menu-side--right .navigation-bar-slideout__global-menu-list { -ms-flex-pack: start; justify-content: flex-start; } .navigation-bar-slideout__global-menu-list-item--left { float: left; } .navigation-bar-slideout__global-menu-list-item--right { border-right: 0; float: right; } .navigation-bar-slideout--pinned-onstage .navigation-bar-slideout__global-menu-list-item--right { border-right: 0; } .navigation-bar-slideout--slideout .navigation-bar-slideout__menu-home-container, .navigation-bar-slideout__menu-home-container { background-color: rgba(234, 234, 234, 0.9); } @media screen and (min-width: 960px) { .navigation-bar-slideout--slideout .navigation-bar-slideout__menu-home-container, .navigation-bar-slideout__menu-home-container { background-color: transparent; border-right: 1px solid #000000; left: 0; padding-right: 35px; } } .navigation-bar-slideout__menu-home-text { color: #949494; } .navigation-bar-slideout__menu-back-icon-svg { fill: #949494; } .navigation-bar-slideout .nav-search-close-button { height: 24px; top: 0; width: 24px; } .touch .navigation-bar-slideout .nav-search-close-button { top: 0; } .navigation-bar-slideout .nav-search-close-button:before { font-size: 24px; } .navigation-bar-slideout__product-toggle-option { display: inline-block; width: 100%; padding: 0%; } .brand__coke-light .navigation-bar-slideout__product-toggle-option { background: linear-gradient(left, #c8c8c8 45px, transparent 45px); background: linear-gradient(to right, #c8c8c8 45px, transparent 45px); } .brand__coke-red .navigation-bar-slideout__product-toggle-option { background: linear-gradient(left, #006326 45px, transparent 45px); background: linear-gradient(to right, #006326 45px, transparent 45px); } .brand__coke-life .navigation-bar-slideout__product-toggle-option { background: linear-gradient(left, #59a04a 45px, transparent 45px); background-image: linear-gradient(to right, #59a04a 45px, transparent 45px); } .navigation-bar-slideout__brand { top: 4px; } .navigation-bar-slideout--interior .navigation-bar-slideout__brand { top: 4px; width: 7.5vw; } @media (max-width: 1024px) { .navigation-bar-slideout--interior .navigation-bar-slideout__brand { top: 0.6vw; } } @media (max-width: 960px) { .navigation-bar-slideout--interior .navigation-bar-slideout__brand { top: 1vw; width: 22vw; } } @media (max-width: 736px) { .navigation-bar-slideout--interior .navigation-bar-slideout__brand { top: 1vw; width: 11vw; } } @media (max-width: 481px) { .navigation-bar-slideout--interior .navigation-bar-slideout__brand { top: 2.5vw; width: 22vw; } } .navigation-bar-slideout__brand-image { display: inline-block; opacity: 0; } @media all and (orientation: portrait) { .navigation-bar-slideout__brand-image { height: 126px; } } @media all and (max-device-width: 736px) and (orientation: landscape) { .navigation-bar-slideout__brand-image { height: 73px; } } @media (min-width: 768px) { .navigation-bar-slideout--animate-onstage .navigation-bar-slideout__brand-image { height: 254px; } } .navigation-bar-slideout--nav-loaded .navigation-bar-slideout__brand-image { opacity: 1; } @media not all and (max-device-width: 736px) and (orientation: landscape) { .navigation-bar-slideout--interior .navigation-bar-slideout__brand-image { height: auto; width: 100%; } } .has-navigation-bar-slideout .scroll-container { padding: 0 !important; } @media all and (orientation: portrait) { div.hide-back-button .navigation-bar-slideout__global-menu { padding: 10vw 0 7vw; } } @media (max-width: 481px) { .navigation-bar-slideout--interior div.hide-back-button .navigation-bar-slideout__brand { top: 0px; } } .jump-link-header-section header.jump-link-header { background: #ffffff; } .jump-link-header-section header.jump-link-header .jump-link-items-wrapper a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 16px; line-height: 1em; color: #6b6b6b; } .jump-link-header-section header.jump-link-header .jump-link-items-wrapper a:active, .jump-link-header-section header.jump-link-header .jump-link-items-wrapper a:hover, .jump-link-header-section header.jump-link-header .jump-link-items-wrapper a.active { font-weight: 400; font-style: normal; font-size: 16px; color: #383838; border-bottom: 1px solid #383838; } .jump-link-header-section header.jump-link-header .jump-link-items-wrapper-mobile a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 16px; line-height: 1em; color: #6b6b6b; } .jump-link-header-section header.jump-link-header .jump-link-items-wrapper-mobile a:active, .jump-link-header-section header.jump-link-header .jump-link-items-wrapper-mobile a:hover, .jump-link-header-section header.jump-link-header .jump-link-items-wrapper-mobile a.active { font-weight: 400; font-style: normal; font-size: 16px; color: #383838; } .jump-link-header-section header.jump-link-header .navigation-bar__menu-toggle-container .navigation-bar__menu-toggle-title { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 16px; line-height: 1em; color: #6b6b6b; } .jump-link-header-section header.jump-link-header .navigation-bar__menu-toggle-container .navigation-bar__menu-toggle-icon svg path { fill: #6b6b6b; } .navigation-bar { box-sizing: border-box; font-size: 12px; font-weight: 600; overflow: visible; padding: 0; position: relative; z-index: 100; } .navigation-bar *, .navigation-bar *:after, .navigation-bar *:before { box-sizing: inherit; } .navigation-bar a:focus { outline: 1px dotted #eeeeee; } .navigation-bar-container { float: left; width: 100%; } @media (max-width: 767px) { .navigation-bar-container { float: none; position: absolute; left: 0; bottom: 0; top: 0; right: 0; } .navigation-bar-container .navigation-bar__menu-toggle-container { float: none; position: absolute; left: 0; top: 14px; background-color: transparent; z-index: 100; } .navigation-bar-container .navigation-bar__menu-toggle.navigation-bar__menu-toggle--open svg { fill: #000000; } .navigation-bar-container .navigation-bar__menu { margin-top: 70px; } .navigation-bar-container .navigation-bar__header-cid-search { float: right; } .touch.nav-search--active-down .navigation-bar-container .navigation-bar__header-cid-search { width: 100%; } .navigation-bar-container .navigation-bar__header-cid-search .navigation-bar__login-link { position: absolute; top: 0; right: 0; margin-right: 0; width: auto; } .navigation-bar-container .navigation-bar__header-cid-search .navigation-bar__login-link .navigation-bar__menu-user-icon { margin-right: 0; } .navigation-bar-container .navigation-bar__header-cid-search .navigation-bar__login-link .cq-loginreglink { display: none; } .navigation-bar-container .navigation-bar__header-cid-search .navigation-bar__header-search { top: 28px !important; float: right; width: auto; } .navigation-bar-container .navigation-bar__header-cid-search .navigation-bar__header-search .nav-search-button { right: 20px; } .navigation-bar-container .navigation-bar__header-cid-search .navigation-bar__header-search .nav-search-button .nav-search__icon { left: 0; right: 0; } .navigation-bar-container .navigation-bar__header-cid-search .navigation-bar__header-search .nav-search-close-button { right: 15px; } .navigation-bar-container .navigation-bar__header-cid-search .navigation-bar__header-search .nav-search-input-container { display: none; } .nav-search--active-down .navigation-bar-container .navigation-bar__header-cid-search .navigation-bar__header-search .nav-search-input-container { display: block; } } @media (min-width: 768px) { .navigation-bar-container { border-bottom: none; } } .navigation-bar__login-link { margin-right: 15%; min-height: 42px; padding: 10px; position: relative; white-space: nowrap; width: 90%; z-index: 11; } .navigation-bar__login-link + .navigation-bar__header-search { position: absolute; } @media (min-width: 768px) { .navigation-bar__login-link { background-color: transparent; border: none; display: inline-block; margin-right: 22%; width: auto; } .nav-search--active-out .navigation-bar__login-link { width: 100%; margin-right: inherit; } } .nav-search--active-out .navigation-bar__login-link { margin-right: inherit; } .navigation-bar__login-link a { font-weight: 600; } .navigation-bar__menu-user-icon { display: inline-block; float: left; height: 20px; margin-right: 10px; position: relative; text-align: center; top: 2px; width: 28px; } .nav-search--active-out .navigation-bar__menu-user-icon { cursor: pointer; } .navigation-bar__menu-user-icon-svg { border-radius: 100%; height: 24px; left: 0; padding: 3px; position: absolute; top: -3px; width: 24px; } .navigation-bar .cq-loginreglink { display: inline-block; float: none; margin: 0; text-align: left; width: calc(100% - 25px); } .navigation-bar .cq-loginreglink a { padding: 0; } @media (min-width: 768px) { .navigation-bar .cq-loginreglink { padding-top: 3px; width: auto; } } .nav-search--active-out .navigation-bar .cq-loginreglink { display: none; } .nav-search--active-out .navigation-bar .nav-search-input-container { right: 0; width: 180px; } @media (min-width: 768px) { .navigation-bar .nav-search-input-container { background-color: transparent; display: inline-block; left: auto; padding: 0; position: relative; right: auto; width: 0; } } .nav-search-dir--down .navigation-bar .nav-search-input-container { -ms-transform: translateY(1px); transform: translateY(1px); right: 0; top: 100%; width: 100%; } @media (min-width: 768px) { .nav-search-dir--down .navigation-bar .nav-search-input-container { transition: all 0.2s ease-out; height: 0; opacity: 0; position: absolute; } } .touch.nav-search-dir--down .navigation-bar .nav-search-input-container { -ms-transform: translateY(4px); transform: translateY(4px); } @media (min-width: 768px) { .nav-search--active-down .navigation-bar .nav-search-input-container { transition: all 0.1s ease-in; height: 100%; opacity: 1; } } .navigation-bar .nav-search__icon { transition: all 0.2s ease-out; } .navigation-bar .nav-search__icon:hover { transition: all 0.1s ease-in; } @media (min-width: 768px) { .navigation-bar .nav-search-button { display: inline-block; } } .nav-search-dir--down .navigation-bar .nav-search-button { position: absolute; right: 12px; top: 12px; } .nav-search--active-down .navigation-bar .nav-search-button { display: none; } .navigation-bar .nav-search-input-field { left: 55px; position: absolute; width: calc(100% - 110px); } .navigation-bar .nav-search-input-field:before { background-color: #ffffff; background-image: url("/etc/designs/projectux-masterbrand/clientlib/img/btn-search-white@x2.svg"); background-position: 50% 50%; background-repeat: no-repeat; background-size: 20px 20px; border: 0; content: ''; display: inline-block; height: 20px; left: -30px; margin-right: 5px; padding: 0; position: absolute; top: 1px; vertical-align: middle; width: 20px; } @media (min-width: 768px) { .navigation-bar .nav-search-input-field { left: auto; right: 28px; width: calc(100% - 42px); } .navigation-bar .nav-search-input-field:before { display: none; } } .nav-search-dir--down .navigation-bar .nav-search-input-field { left: 0; right: 0; width: 100%; } @media (min-width: 768px) { .nav-search-dir--down .navigation-bar .nav-search-input-field { border-bottom: 0; width: inherit; } } @media (min-width: 768px) and (max-width: 1023px) { .nav-search-dir--out .navigation-bar .nav-search-input-field { -ms-transform: translateY(-2px); transform: translateY(-2px); width: 100%; padding-left: 34px; } } @media (min-width: 1024px) { .nav-search-dir--out .navigation-bar .nav-search-input-field { -ms-transform: translateY(-2px); transform: translateY(-2px); width: 100%; padding-left: 34px; } } .navigation-bar .nav-search-input { font-size: 12px; font-weight: 600; width: 100%; } .nav-search-dir--down .navigation-bar .nav-search-input { height: 40px; padding: 10px 0; text-align: center; } @media (min-width: 768px) { .nav-search-dir--down .navigation-bar .nav-search-input { height: auto; padding: 6px; text-align: left; } } .nav-search-dir--down .navigation-bar .twitter-typeahead { position: absolute; width: 100%; } @media (min-width: 768px) { .nav-search-dir--down .navigation-bar .twitter-typeahead { position: relative; width: inherit; } } @media (min-width: 768px) { .nav-search-dir--out .navigation-bar .twitter-typeahead { position: relative; width: 100%; } } .nav-search--active-down .navigation-bar .tt-menu { -ms-transform: translateY(1px); transform: translateY(1px); } @media (min-width: 768px) { .nav-search--active-down .navigation-bar .tt-menu { -ms-transform: none; transform: none; } } .navigation-bar .tt-suggestion { font-weight: normal; padding: 5px; } .navigation-bar .nav-search-do-search-button:before { left: 6px; position: absolute; top: 2px; } .touch .navigation-bar .nav-search-do-search-button:before { top: 0; } .nav-search-dir--down .navigation-bar .nav-search-do-search-button { -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; right: 9px; } @media (min-width: 768px) { .navigation-bar .nav-search-close-button { border: inherit; height: 20px; top: auto; width: 20px; } .navigation-bar .nav-search-close-button:before { font-size: 24px; } } .nav-search--active-down .navigation-bar .nav-search-close-button { position: absolute; right: 9px; top: -32px; } @media (min-width: 768px) { .nav-search--active-down .navigation-bar .nav-search-close-button { top: -33px; } } .touch.nav-search--active-down .navigation-bar .nav-search-close-button { top: -36px; } @media (min-width: 768px) { .navigation-bar .nav-search-close-button .navigation-bar__menu-toggle-svg-close { transition: all 0.1s ease-in; } } .no-touch .navigation-bar .nav-search-close-button:hover .navigation-bar__menu-toggle-svg-close { transition: all 0.2s ease-out; } .navigation-bar__brand-background { height: 70px; padding: 0; position: relative; text-align: center; z-index: 9; } @media (min-width: 768px) { .navigation-bar__brand-background { height: 92px; } .touch .navigation-bar--visible-nav .navigation-bar__brand-background:after { bottom: 0; content: ''; display: block; height: 44px; margin-bottom: -44px; position: absolute; right: 0; width: 120px; z-index: 3; } } .navigation-bar__brand-background .navigation-bar__brand-background-link { display: inline-block; height: 100%; } .navigation-bar__brand-background .navigation-bar__brand-background-image { display: inline-block; height: 100%; } .navigation-bar__menu { display: none; margin-top: 41px; padding: 15px 0; width: 100%; } @media (min-width: 768px) { .navigation-bar__menu { transition: visibility 0.5s, opacity 0.5s cubic-bezier(0, 1, 0.5, 1); border-top: none; display: block; left: 10px; margin-top: 41px; margin-top: 0; opacity: 0; padding-top: 40px; position: absolute; top: 10px; visibility: hidden; width: auto; z-index: 11; } .navigation-bar--visible-nav .navigation-bar__menu { left: 0; margin-top: 0; opacity: 1; overflow-x: hidden; overflow-y: auto; padding: 0; position: relative; top: 0; visibility: visible; z-index: auto; } } .navigation-bar__menu-tray { background-color: #ffffff; display: none; position: relative; width: 100%; } .navigation-bar--visible-nav .navigation-bar__menu-tray { background-color: #ffffff; } .navigation-bar__menu--open { visibility: visible; } @media (min-width: 768px) { .navigation-bar__menu--open { -ms-transform: none; transform: none; opacity: 1; } } .navigation-bar__list { clear: both; text-align: left; } .navigation-bar__list.navigation-bar-hamburger, .navigation-bar-slideout .navigation-bar__list { text-align: left; } .navigation-bar__list.navigation-bar-hamburger .navigation-bar__list, .navigation-bar-slideout .navigation-bar__list .navigation-bar__list { text-align: left; } @media (min-width: 768px) { .navigation-bar--visible-nav .navigation-bar__list { border-top: none; padding: 12px 0; position: relative; z-index: 2; } .navigation-bar--visible-nav .navigation-bar__list:last-child { border-right: none; } .navigation-bar-slideout .navigation-bar__list { border-top: 0; } } @media (min-width: 768px) { .navigation-bar--visible-nav .navigation-bar__list-item { display: inline-block; } .navigation-bar--visible-nav .navigation-bar__list-item:last-child .navigation-bar__list-item-link { border-right: none; } .navigation-bar--visible-nav .navigation-bar__list-item.navigation-bar__list-item--subsub { clear: left; } } .navigation-bar__list-item .fa { color: #000000; } .navigation-bar__list-item:hover .fa { color: #009639; } @media (min-width: 768px) { .touch .navigation-bar--visible-nav .navigation-bar__list-top { -webkit-overflow-scrolling: auto; height: 44px; overflow-x: auto; } } .navigation-bar__menu-label { color: #000000; font-size: 12px; font-weight: 600; padding: 8px 20px 10px; text-align: left; } @media (min-width: 768px) { .navigation-bar__list--sub { border-top: none; } .navigation-bar--visible-nav .navigation-bar__list--sub { display: none; } .navigation-bar__menu-tray .navigation-bar__list--sub { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .navigation-bar--visible-nav .navigation-bar__menu-tray .navigation-bar__list--sub { display: block; } } @media (min-width: 768px) { .navigation-bar__list--subsub { border-top: none; } .navigation-bar--visible-nav .navigation-bar__list--subsub { padding-top: 5px; } } .navigation-bar__list-item--sub { -ms-flex-preferred-size: auto; flex-basis: auto; -ms-flex-positive: 1; flex-grow: 1; } .navigation-bar__list-item-link { color: #000000; cursor: pointer; display: inline-block; font-weight: 600; padding: 5px 20px; } .navigation-bar__list-item-link:hover { color: #009639; } .navigation-bar__list-item--sub .navigation-bar__list-item-link { font-weight: 500; padding-left: 40px; } @media (min-width: 768px) { .navigation-bar--visible-nav .navigation-bar__list-item--sub .navigation-bar__list-item-link { border-right: none; font-size: 12px; font-weight: 600; } } .navigation-bar__list-item--subsub .navigation-bar__list-item-link { font-weight: 400; padding-left: 60px; } @media (min-width: 768px) { .navigation-bar--visible-nav .navigation-bar__list-item--subsub .navigation-bar__list-item-link { border-right: none; font-size: 12px; font-weight: 500; padding: 5px 20px 5px 40px; } } @media (min-width: 768px) { .navigation-bar--visible-nav .navigation-bar__list-item-link { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 800; font-style: normal; font-size: 16px; border-right-style: solid; border-right-width: 2px; padding: 0 20px; } } .navigation-bar__header-cid-search { transition: all 0.2s ease-out; position: relative; z-index: 11; } .nav-search--active-down .navigation-bar__header-cid-search { transition: all 0.1s ease-in; margin-bottom: 40px; } @media (min-width: 768px) { .nav-search--active-down .navigation-bar__header-cid-search { transition: none; } } @media (min-width: 768px) { .navigation-bar__header-cid-search { border-bottom: 0; position: absolute; right: 12px; text-align: right; top: 12px; transition: none; width: calc(50% - 150px); } } .navigation-bar__menu-toggle-container { float: left; padding: 10px; position: relative; vertical-align: middle; width: 30%; z-index: 10; } @media (min-width: 768px) { .navigation-bar__menu-toggle-container { background-color: transparent; border: none; left: 12px; position: absolute; top: 12px; width: auto; z-index: 12; } .navigation-bar--visible-nav .navigation-bar__menu-toggle-container { display: none; } } .navigation-bar__menu-toggle { display: inline-block; position: relative; } .navigation-bar__menu-toggle-title { transition: all 0.1s ease-in; display: inline-block; font-weight: 600; padding-left: 34px; padding-top: 3px; } @media (min-width: 768px) { .no-touch .navigation-bar__menu-toggle:hover .navigation-bar__menu-toggle-title { transition: all 0.2s ease-out; } } .navigation-bar__menu-toggle--open .navigation-bar__menu-toggle-title { transition: all 0.2s ease-out; } .navigation-bar__menu-toggle-icon { display: inline-block; position: absolute; } @media (min-width: 768px) { .navigation-bar__menu-toggle-icon .navigation-bar__menu-toggle-svg { transition: all 0.1s ease-in; } } .navigation-bar__menu-toggle-icon .navigation-bar__menu-toggle-svg-close { display: none; } @media (min-width: 768px) { .no-touch .navigation-bar__menu-toggle:hover .navigation-bar__menu-toggle-icon .navigation-bar__menu-toggle-svg { transition: all 0.2s ease-out; } } .navigation-bar__menu-toggle--open .navigation-bar__menu-toggle-icon:before { display: none; } .navigation-bar__menu-toggle--open .navigation-bar__menu-toggle-icon .navigation-bar__menu-toggle-svg { display: none; } .navigation-bar__menu-toggle--open .navigation-bar__menu-toggle-icon .navigation-bar__menu-toggle-svg-close { transition: all 0.1s ease-in; display: block; } .navigation-bar__language-options { display: none; padding: 0; text-align: right; width: 100%; } @media (min-width: 768px) { .navigation-bar__language-options { transition: visibility 0.5s, opacity 0.5s cubic-bezier(0, 1, 0.5, 1); -ms-transform: none; transform: none; display: block; left: 6px; margin-top: 41px; margin-top: 0; opacity: 0; padding-top: 36px; position: absolute; top: 40px; visibility: hidden; width: auto; z-index: 9; } .navigation-bar--visible-nav .navigation-bar__language-options { top: 10px; } .navigation-bar__language-options.navigation-bar__language-options--right { left: auto; right: 9px; top: 42px; } } @media (min-width: 900px) { .navigation-bar__language-options { left: calc(14% - 6px); top: 10px; } .navigation-bar--visible-nav .navigation-bar__language-options { left: 6px; } .navigation-bar--visible-nav .navigation-bar__language-options .navigation-bar__language-options--right { left: auto; right: 9px; } .navigation-bar--visible-nav .navigation-bar__language-options.navigation-bar__language-options--right { left: auto; right: 9px; } } @media (min-width: 768px) { .navigation-bar__language-options--open { opacity: 1; visibility: visible; } } .navigation-bar__header-search { position: relative; right: 10px; top: 10px; } .touch.nav-search--active-down .navigation-bar__header-search { top: 0; width: 100%; } @media (min-width: 768px) { .navigation-bar__header-search { right: 0; z-index: 11; } } .nav-search-dir--down .navigation-bar__header-search { left: 0; min-height: 42px; right: auto; top: 0; width: 100%; } .navigation-bar__language-toggle-container { float: right; padding: 10px; position: relative; text-align: right; vertical-align: middle; width: 70%; z-index: 10; } @media (min-width: 768px) { .navigation-bar__language-toggle-container { background-color: transparent; border: none; float: none; left: 11px; position: absolute; top: 42px; width: auto; } .navigation-bar--visible-nav .navigation-bar__language-toggle-container { top: 12px; } .navigation-bar__language-toggle-container.navigation-bar__language-toggle-container--right { left: auto; right: 12px; top: 40px; } } @media (min-width: 900px) { .navigation-bar__language-toggle-container { left: 14%; top: 12px; } .navigation-bar--visible-nav .navigation-bar__language-toggle-container { left: 11px; } } .navigation-bar__language-toggle { font-weight: 600; } .navigation-bar__language-toggle:before { transition: all 0.1s ease-in; border-left: 7px solid transparent; border-right: 7px solid transparent; content: ''; height: 0; position: absolute; right: 0; top: 38%; width: 0; } .navigation-bar__language-toggle-selected { display: inline-block; padding: 0 22px 0 28px; text-align: left; width: 150px; } .navigation-bar__language-toggle-option { padding: 0 0 0 28px; } .navigation-bar__list-item .navigation-bar__language-toggle-option { margin-left: 20px; } @media (min-width: 768px) { .navigation-bar__language-toggle-option { margin-left: 15px; } } .navigation-bar__language-toggle-icon { background-clip: padding-box; background-position: center center; background-repeat: no-repeat; background-size: auto 100%; border-radius: 18px; display: block; height: 18px; left: 0; margin-top: -9px; position: absolute; top: 50%; width: 18px; } .navigation-bar__language-toggle-option-link { display: inline-block; font-weight: 600; padding-bottom: 5px; padding-right: 10px; padding-top: 5px; position: relative; text-align: left; width: 160px; } @media (min-width: 768px) { .navigation-bar__language-toggle-option-link { width: 162px; } } /* ======================================================================== COMPONENT: HEADING TAG - COMMON ======================================================================== */ /* :START VARIABLES */ /* FontSize */ /* FontWeight */ /* :END VARIABLES */ .seo-title .main { float: none; left: auto; margin: 0 auto; max-width: 728px; } .seo-title__headline { font-weight: 900; } .seo-title__headline--left { text-align: left; } .seo-title__headline--right { text-align: right; } .seo-title__headline--center { text-align: center; } .seo-title__headline--small { font-size: 15px; } @media (min-width: 768px) { .seo-title__headline--small { font-size: 15px; } } .seo-title__headline--medium { font-size: 26px; } @media (min-width: 768px) { .seo-title__headline--medium { font-size: 30px; } } .seo-title__headline--large { font-size: 30px; } @media (min-width: 768px) { .seo-title__headline--large { font-size: 50px; } } /* ======================================================================== COMPONENT: HERO IMAGE - COMMON ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #FontWeight */ /* #BorderColor */ /* #Background */ /* #LineHeight */ /* :END VARIABLES */ @media (min-width: 0) { section { overflow: visible; } section.section-hero { padding-left: 0; padding-right: 0; } section.section-hero .bb-wrap { display: block; height: 300px; margin: 0; overflow: hidden; padding: 0; position: relative; width: 100%; } section.section-hero .billb-msg-wrap { padding: 32px 32px 0; } section.section-hero .billb-msg-wrap, section.section-hero .billb-msg-wrap * { box-sizing: border-box; } section.section-hero .billb-msg-wrap .billb-text { margin-bottom: 18px; text-align: center; } section.section-hero .billb-msg-wrap .bb-btn__container { max-width: 400px; text-align: center; width: 93%; } section.section-hero .billb-msg-wrap .bb-btn.bb-btn__link:hover { background: #989898; border-color: #989898; } section.section-hero .bb-msg-wrap { background: #ffffff; margin: 0 auto; max-width: 300px; padding-bottom: 20px; right: 0; width: 54%; z-index: 1; } section.section-hero .bb-msg-wrap .slide-logo { display: none; } section.section-hero .bb-msg-wrap .billb-msg, section.section-hero .bb-msg-wrap .billb-text { color: #505050; display: block; font-size: 30px; font-weight: bold; letter-spacing: -0.03em; line-height: 1.01em; text-align: center; } section.section-hero .bb-msg-wrap .billb-msg { padding-top: 0; transition: color 0.2s ease-out; } section.section-hero .bb-msg-wrap .billb-text { color: #009639; font-size: 24px; padding-top: 10px; } section.section-hero .billb-dark .bb-msg-wrap .billb-msg, section.section-hero .billb-dark .bb-msg-wrap .billb-text { color: #ffffff; } section.section-hero .billb-wrap { min-height: 0; } figure { -webkit-margin-after: 0; -webkit-margin-before: 0; -webkit-margin-end: 0; -webkit-margin-start: 0; -webkit-transform: translate3d(0, 0, 0); height: 163px; margin: 0; overflow: hidden; padding: 0; position: relative; width: 100%; } section.hero-large figure { height: 212px; } section.section-hero > .FeaturedCampaign.carousel .flex-direction-nav { display: none; } } @media screen and (min-width: 0) and (max-width: 767px) { .section-hero.has-bg-img.dark-bg p.white { color: #ffffff; } } @media (min-width: 0) { section.section-hero.has-bg-img .dark-bg, section.section-hero.has-bg-img .light-bg, section.section-hero.has-bg-img .mild-bg { background: transparent; } .elm-grid-3 .slides .item, .section-3-col-slider .main .grid-3-col-slider .item { box-sizing: border-box; width: auto; width: 100%; } .elm-grid-3 .slides .item *, .section-3-col-slider .main .grid-3-col-slider .item * { box-sizing: border-box; } .flex-grid .f-1 .elm-grid-3 .slides .item, .flex-grid .f-4 .elm-grid-3 .slides .item, .flex-grid .f-1 .section-3-col-slider .main .grid-3-col-slider .item, .flex-grid .f-4 .section-3-col-slider .main .grid-3-col-slider .item { float: left; float: none; margin: 0 auto; width: 26%; width: auto; } .parsys.firstColumnContent, .parsys.secondColumnContent { width: 100%; } .flex-grid .f-4 .slider-wrap .item { margin: 0 14%; width: 72%; } .flex-grid .f-4 .slider-wrap .item .elm-body { width: 84%; } .flex-box .section-circles .elm-grid-3:not(.makeslide):not(.flexslider) .slides { max-width: 100%; } .flex-box .section-circles .btn-more-container { box-sizing: border-box; margin: 0 12.5%; padding: 0; width: 75%; } .flex-box .section-circles .btn-more { box-sizing: border-box; margin: 0; max-width: 100%; max-width: 250px; min-width: 0; width: 80%; z-index: 1; } } @media screen and (min-width: 0) and (max-width: 767px) { .elm-grid-3 .slides .item .elm-body p { font-size: 13px; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { .flex-grid .f-1 .elm-grid-3 .slides .item, .flex-grid .f-4 .elm-grid-3 .slides .item, .flex-grid .f-1 .section-3-col-slider .main .grid-3-col-slider .item, .flex-grid .f-4 .section-3-col-slider .main .grid-3-col-slider .item { float: left; float: none; margin: 0 auto; } .flex-box .section-circles .btn-more-container { margin: 0 20%; width: 60%; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .billb-wrap.billb-style-4 figure.billb-figure { background-position: 0 0; } .flex-box .section-circles .btn-more-container { margin: 0 8%; width: 84%; } } /* =============================== */ /* 1024px ======================== */ @media (min-width: 1024px) { section.section-hero.section-slider .billb-wrap { padding-top: 0; } section.section-hero .billb-msg-wrap .bb-btn__container, section.section-hero .billb-msg-wrap .billb-text { text-align: left; } section.section-hero { /* show the logo when not in mobile, hide the text version */ /* tall billboard overrides */ } section.section-hero .billb-wrap a { position: static; } section.section-hero .billb-wrap a[href=""] { cursor: default; } section.section-hero .billb-wrap a[href="#"] { cursor: default; } section.section-hero .billb-wrap:hover { cursor: default; } section.section-hero .logo-text { display: none; } section.section-hero .billb-msg-wrap.is-Table { left: 50%; min-height: 50%; padding-left: 9%; width: 48%; } section.section-hero .is-Table { bottom: 0; display: table; } section.section-hero .is-Table .Table-Cell { display: table-cell; float: none; padding: 0; position: relative; vertical-align: middle; } section.section-hero .is-Table .Center-Block { margin: 0 auto; padding: 0; } section.section-hero .billb-text-wrap { bottom: auto; position: relative; } section.section-hero .billb-tall .billb-msg { font-size: 50px; } section.section-hero .billb-tall .billb-msg-wrap.billb-right { height: 100%; left: auto; right: 20px; width: 50%; } section.section-hero .billb-tall .billb-msg-wrap.billb-left { height: 100%; right: auto; width: 50%; } section.section-hero .billb-tall .is-Table .Center-Block { width: 100%; } section.section-hero .billb-style-1 .billb-wrap a[href=""], section.section-hero .billb-style-2 .billb-wrap a[href=""], section.section-hero .billb-style-3 .billb-wrap a[href=""], section.section-hero .billb-style-4 .billb-wrap a[href=""] { cursor: default; } section.section-hero .billb-style-1 .billb-wrap a[href="#"], section.section-hero .billb-style-2 .billb-wrap a[href="#"], section.section-hero .billb-style-3 .billb-wrap a[href="#"], section.section-hero .billb-style-4 .billb-wrap a[href="#"] { cursor: default; } section.section-hero .billb-style-1 .billb-wrap:hover, section.section-hero .billb-style-2 .billb-wrap:hover, section.section-hero .billb-style-3 .billb-wrap:hover, section.section-hero .billb-style-4 .billb-wrap:hover { cursor: default; } section.section-hero .billb-style-1 .billb-msg-wrap { position: absolute; width: 40%; } section.section-hero .billb-style-2 .billb-msg-wrap { position: absolute; right: 90px; width: 30%; } section.section-hero .billb-style-3 .billb-msg-wrap { position: absolute; width: 30%; } section.section-hero .slide-logo { display: block; } section.section-hero .billb-wrap figure { background-position-x: 0; background-size: auto 100%; float: left; margin: 0 auto; } section.hero-large .billb-wrap, section.hero-large .billb-wrap figure { height: 430px; margin: 0 auto; max-width: 1175px; } } /* =============================== */ /* 1200px ======================== */ @media (min-width: 1200px) { section.section-hero .billb-wrap figure { background-size: auto 100%; margin: 0 auto; } } /* =============================== */ section.section-hero h2.headline:empty { display: none; } /* ======================================================================== COMPONENT: HISTORY - COMMON ======================================================================== */ /* :START VARIABLES */ /* FontSize */ /* Color */ /* FontWeight */ /* LineHeight */ /* BackgroundColor */ /* :END VARIABLES */ .section-history-intro { padding-top: 0; } .section-history-intro .main { background-color: #ffffff; float: none; left: 0; margin: 0; padding: 16px 0 0; width: 100%; } @media screen and (max-width: 767px) { .section-history-intro .main { padding: 0 0 10px; } } section.history-intro-hero { background-color: #ffffff; margin-bottom: 0; padding-top: 0; } section.history-intro-hero .billb-logo-text, section.history-intro-hero .billb-msg, section.history-intro-hero .billb-text { color: #ffffff; } section.history-intro-hero .billb-wrap:hover h1 { color: #ffffff; } section.section-history .main { background-color: #ffffff; left: 0; margin: 0; padding-top: 0; width: 100%; } section.section-history .video-wrap { margin: 0 auto; max-width: 640px; } .history-img { margin: 0 auto; max-width: 100%; } .history-banner { display: block; } .history-banner img { width: 100%; } .history-intro-headline { font-weight: 900; line-height: 1.1em; margin: 0 auto 28px; text-transform: none; width: 200px; } .history-year { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; font-size: 75px; line-height: 1.2em; color: #009639; /*BREAKPOINTS*/ /* Extra small devices (phones, less than 768px) */ margin-bottom: 10px; } @media (max-width: 767px) { .history-year { font-size: 40px; } } .history-year:empty { display: none; } .history-headline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; font-size: 36px; line-height: 1.1em; color: #3a3a3a; /*BREAKPOINTS*/ /* Extra small devices (phones, less than 768px) */ margin: 10px auto; text-transform: none; width: 480px; } @media (max-width: 767px) { .history-headline { width: 90%; font-size: 30px; } } .history-headline.quote-headline { width: 760px; } .history-headline:empty { display: none; } .history-intro-subhead { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 1em; line-height: 1.4em; color: #3a3a3a; /*BREAKPOINTS*/ /* Extra small devices (phones, less than 768px) */ margin: 0 auto; width: 480px; } @media (max-width: 767px) { .history-intro-subhead { width: 90%; font-size: 1em; } } .history-intro-subhead:empty { display: none; } .history-desc { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 16px; line-height: 22px; color: #000000; /*BREAKPOINTS*/ /* Extra small devices (phones, less than 768px) */ margin: 0 auto 10px; width: 480px; } @media (max-width: 767px) { .history-desc { width: 90%; font-size: 16px; } } .history-desc:empty { display: none; } /* 0px =========================== */ @media (min-width: 0) { .history-img { margin: 0 auto; width: 280px; } section.history-intro-hero { margin-bottom: 0; padding-bottom: 0; } section.history-intro-hero .billb-figure { height: 212px; } section.history-intro-hero .billb-wrap { height: 334px; min-height: auto; padding-top: 0; } section.history-intro-hero .billb-logo-text, section.history-intro-hero .billb-msg, section.history-intro-hero .billb-text { color: #000000; font-size: 30px; } section.history-intro-hero .billb-wrap:hover h1 { color: #000000; } section.history-intro-hero .billb-msg-wrap { background: #ffffff; } } @media screen and (min-width: 0) and (max-width: 767px) { section.history-intro-hero .billb-msg-wrap { margin-top: 16px; padding: 0; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { section.history-intro-hero { padding-top: 0; } section.history-intro-hero .billb-wrap, section.history-intro-hero .billb-wrap figure { height: 430px; max-width: none; } section.history-intro-hero .is-Table { bottom: 0; display: table; } section.history-intro-hero .is-Table .Table-Cell { display: table-cell; float: none; position: relative; vertical-align: middle; } section.history-intro-hero .is-Table .Center-Block { margin: 0 auto; padding: 0; width: 100% !important; } section.history-intro-hero .billb-style-4 .billb-msg-wrap { background: transparent; } section.history-intro-hero .billb-style-4 .billb-msg-wrap.billb-right { height: 100%; left: auto; right: 20px; width: 50%; } section.history-intro-hero .billb-style-4 .billb-msg-wrap.billb-left { height: 100%; left: 20px; right: auto; width: 50%; } section.history-intro-hero .billb-text-wrap { bottom: auto; } section.history-intro-hero .billb-style-4 .billb-figure { background-position: 50% 0; background-repeat: no-repeat; background-size: cover; } section.history-intro-hero .billb-logo-text, section.history-intro-hero .billb-msg, section.history-intro-hero .billb-text { color: #ffffff; font-size: 50px; } section.history-intro-hero .billb-wrap:hover h1 { color: #ffffff; } section.history-intro-hero .billb-style-4 .billb-msg-wrap { width: 33%; } .history-img { margin: 0 auto; max-width: 90%; width: auto; } } /* =============================== */ /* 1024px ======================== */ @media (min-width: 1024px) { .history-img { margin: 0 auto; max-width: 100%; width: auto; } } /* =============================== */ /* 1200px ======================== */ @media (min-width: 1200px) { section.history-intro-hero .billb-figure { background-repeat: none; } } /* ======================================================================== BASE COMMON MIXINS ======================================================================== */ /* ======================================================================== BASE COMMON MIXINS - BREAKPOINTS ======================================================================== */ /*MEDIAS QUERIES*/ /* Extra small devices (phones, less than 768px) */ /* Small devices (tablets, 768px and up) */ /* Medium devices (desktops, 992px and up) */ /* Extra small devices (phones, less than 768px) */ /* Small devices (tablets, 768px and up) */ /* Landscape */ /* Medium devices (desktops, 992px and up) */ /* Imports from Bourbon for hi-dpi, etc. */ /* Modular Medias Query - Generated ALL @medias */ /* ======================================================================== BASE COMMON MIXINS - FONT ======================================================================== */ /* ======================================================================== BASE COMMON MIXINS FOR GRIDS ======================================================================== */ /* ======================================================================== BASE COMMON MIXINS - COLLOR PALLETE ======================================================================== */ /* Firefox animations */ /* ======================================================================== BASE COMMON MIXINS ======================================================================== */ /*Opacity*/ /*Pre-loading*/ /*Linear Gradients*/ /*ARROW*/ /*BOX SHADOW*/ /*BORDER RADIUS */ /* Hide only visually, but have it available for screen readers: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ /* ======================================================================== BASE COMMON MIXINS - ARROW PNG ======================================================================== */ /* ======================================================================== MENU HISTORY PAGE - COMMON ======================================================================== */ body.enable-bootstrap-popover div.popover { background-color: #009639; } body.enable-bootstrap-popover .popover-content { background-color: #009639; color: #ffffff; font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 20px; color: #ffffff; } body.enable-bootstrap-popover .popover.top > div.arrow:after { border-top-color: #009639; } @media (max-width: 449px) { a.history-page-btn-timeline { background-color: #009639; } div.history-page-timeline { background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, 25%); } *[dir="rtl"] div.history-page-timeline { background: linear-gradient(to left, rgba(255, 255, 255, 0) 0, 25%); } } div.history-page-timeline .timeline-item { color: #009639; } div.history-page-timeline .timeline-item .year { color: #009639; } div.history-page-timeline .timeline-item .year a.active { color: #00a9e0; } div.history-page-timeline .timeline-item .year-text { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 20px; line-height: 20px; color: #009639; top: 1px; } div.history-page-timeline .timeline-item.close .activity, div.history-page-timeline .timeline-item.close .year { color: #009639; } div.history-page-timeline .timeline-item .activity { border-left: 4px solid #009639; } div.history-page-timeline .timeline-item .marker { background-color: #ffffff; border: 4px solid #009639; } div.history-page-timeline .timeline-item .marker .dot { background-color: #ffffff; border: 2px solid #ffffff; } div.history-page-timeline .timeline-item a.active .activity, .no-touch div.history-page-timeline .timeline-item a:hover .activity { color: #00a9e0; } div.history-page-timeline .timeline-item a.active .year-text, .no-touch div.history-page-timeline .timeline-item a:hover .year-text { color: #00a9e0; } div.history-page-timeline .timeline-item a.active .marker .dot, .no-touch div.history-page-timeline .timeline-item a:hover .marker .dot { background-color: #00a9e0; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2); } /* ======================================================================== COMPONENT: IMAGE - COMMON ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #BackgroundColor */ /* :END VARIABLES */ .Image.section .section-featured-image { box-sizing: border-box; margin: 0; padding: 0; } .Image.section .section-featured-image * { box-sizing: border-box; } .Image.section .section-featured-image img { margin: 0 auto; max-width: 100%; transition: all 0.3s ease; vertical-align: bottom; } .Image.section .section-featured-image small { margin: 20px auto; } /* =============================== */ /* 0px =========================== */ @media (min-width: 0) { .item { float: left; margin: 0 auto; text-align: center; width: 96%; } .item a:not(.btn-tile), .item div.no-hover:not(.btn-tile) { display: block; margin: 0 auto; opacity: 1; position: relative; width: 100%; } .item a:not(.btn-tile) img, .item div.no-hover:not(.btn-tile) img { display: block; float: left; margin: 0 auto; opacity: 1; width: 100%; } .item a:not(.btn-tile) .bar, .item div.no-hover:not(.btn-tile) .bar { display: none; } .item a:not(.btn-tile) .item-txt, .item div.no-hover:not(.btn-tile) .item-txt { float: left; width: 100%; /* Safari/Chrome, other WebKit */ /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ margin: 10px auto; padding: 10px; text-align: center; } .item a:not(.btn-tile) .item-txt h1, .item a:not(.btn-tile) .item-txt h2, .item a:not(.btn-tile) .item-txt h3, .item a:not(.btn-tile) .item-txt h4, .item a:not(.btn-tile) .item-txt h5, .item a:not(.btn-tile) .item-txt h6, .item a:not(.btn-tile) .item-txt p, .item div.no-hover:not(.btn-tile) .item-txt h1, .item div.no-hover:not(.btn-tile) .item-txt h2, .item div.no-hover:not(.btn-tile) .item-txt h3, .item div.no-hover:not(.btn-tile) .item-txt h4, .item div.no-hover:not(.btn-tile) .item-txt h5, .item div.no-hover:not(.btn-tile) .item-txt h6, .item div.no-hover:not(.btn-tile) .item-txt p { float: left; height: auto; width: 100%; } /*This block is conflict with Headlins*/ /*h1, h2, h3 { &.headline, &.headline-with-sub { //Parameters: $family, $weight, $style, $size, $line-height, $color @include font-generate( get-map( $texts,'headline','font-family'), 'medium', get-map( $fonts,'medium','font-style'), $headline-with-sub-font-size-mobile-portrait, null, $headline-with-sub-color-mobile-portrait); float: none; max-width: 100%; width: 320px; @media screen and (min-width: 769px) { font-size: $headline-with-sub-font-size-769px; } } &.headline{ font-style: $headline-font-style; font-weight: $headline-font-weight; } }*/ } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { .item { float: left; margin: 0 auto; text-align: center; width: 96%; } .item a:not(.btn-tile), .item div.no-hover:not(.btn-tile) { display: block; margin: 0 auto; opacity: 1; position: relative; width: 100%; transition: all 0.2s ease-out; } .item a:not(.btn-tile) img, .item div.no-hover:not(.btn-tile) img { display: block; float: left; margin: 0 auto; opacity: 1; width: 100%; } .item a:not(.btn-tile) .item-txt, .item div.no-hover:not(.btn-tile) .item-txt { float: left; width: 100%; /* Safari/Chrome, other WebKit */ /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ margin: 10px auto; padding: 10px; text-align: center; transition: all 0.2s ease-out; } .item a:not(.btn-tile) .item-txt h1, .item a:not(.btn-tile) .item-txt h2, .item a:not(.btn-tile) .item-txt h3, .item a:not(.btn-tile) .item-txt h4, .item a:not(.btn-tile) .item-txt h5, .item a:not(.btn-tile) .item-txt h6, .item a:not(.btn-tile) .item-txt p, .item div.no-hover:not(.btn-tile) .item-txt h1, .item div.no-hover:not(.btn-tile) .item-txt h2, .item div.no-hover:not(.btn-tile) .item-txt h3, .item div.no-hover:not(.btn-tile) .item-txt h4, .item div.no-hover:not(.btn-tile) .item-txt h5, .item div.no-hover:not(.btn-tile) .item-txt h6, .item div.no-hover:not(.btn-tile) .item-txt p { float: left; height: auto; width: 100%; } .item.hover a:not(.btn-tile), .item:hover a:not(.btn-tile) { color: #000000; } .item.hover a:not(.btn-tile) .item-txt, .item:hover a:not(.btn-tile) .item-txt { background-color: #ffffff; transition: all 0.1s ease-in; } .item.hover a:not(.btn-tile) .item-txt h1, .item.hover a:not(.btn-tile) .item-txt h2, .item.hover a:not(.btn-tile) .item-txt h3, .item.hover a:not(.btn-tile) .item-txt h4, .item.hover a:not(.btn-tile) .item-txt h5, .item.hover a:not(.btn-tile) .item-txt h6, .item.hover a:not(.btn-tile) .item-txt p, .item:hover a:not(.btn-tile) .item-txt h1, .item:hover a:not(.btn-tile) .item-txt h2, .item:hover a:not(.btn-tile) .item-txt h3, .item:hover a:not(.btn-tile) .item-txt h4, .item:hover a:not(.btn-tile) .item-txt h5, .item:hover a:not(.btn-tile) .item-txt h6, .item:hover a:not(.btn-tile) .item-txt p { color: #000000; transition: all 0.2s ease-in; } .item.hover a:not(.btn-tile) img, .item:hover a:not(.btn-tile) img { opacity: 1; } } /* 1024px ======================== */ @media (min-width: 1024px) { .main { float: none; left: auto; margin: 0 auto; position: relative; width: 100%; /*max-width: 1800px;*/ } .item { margin-bottom: 16px; } } /* PRINT ======================== */ @media print and (min-width: 0em) { img { display: block; height: auto; width: auto; } } /* =============================== */ /* ======================================================================== COMPONENT: INTERACTIVE IMAGE - COMMON ======================================================================== */ /* :END VARIABLES */ section.component-interactive-image p.subheadlinesized { font-size: 20px; font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; } section.component-interactive-image h2.headline { font-size: 30px; font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 800; font-style: normal; } section.component-interactive-image .interactive-image-small .section-grid-2-col .item { margin-bottom: 16px; min-height: 275px; width: 100%; } section.component-interactive-image .interactive-image-small .section-grid-2-col .item .item-txt h3 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 600; font-style: normal; font-size: 16px; line-height: 1.1em; color: #474747; } section.component-interactive-image .interactive-image-small .section-grid-2-col .item .item-txt p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; color: #000000; } section.component-interactive-image .interactive-image-wide .pin-wrapper.pin-with-hover div.pin-details-balloon { background: rgba(255, 255, 255, 0.8); box-shadow: 3px 6px 5px #888888; } section.component-interactive-image .interactive-image-wide .pin-wrapper.pin-with-hover div.pin-details-balloon .pin-headline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 800; font-style: normal; font-size: 16px; } section.component-interactive-image .interactive-image-wide .pin-wrapper.pin-with-hover div.pin-details-balloon .pin-bodycopy { font-size: 12px; font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; } /* ======================================================================== COMPONENT: JUMP LINK TARGET - COMMON ======================================================================== */ .section.JumpLinkTarget { overflow: hidden; width: 100%; } /* ======================================================================== COMPONENT: LANGUAGE TUNEL - COMMON ======================================================================== */ /* :START VARIABLES */ /* #FontFamily*/ /* #FontSize */ /* #Color */ /* #FontWeight */ /* #LineHeight */ /* #Background */ /* :END VARIABLES */ .section-language-tunnel h2.headline:empty { display: none; } .section-language-tunnel h3.selected-country:empty { display: none; } .section-language-tunnel .flag-icon { display: inline-block; max-width: 32px; } .section-language-tunnel .flag-icon img { -ms-interpolation-mode: nearest-neighbor; display: block; image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; width: 100%; } .section-language-tunnel .language-options li.has-flag { text-align: left; } @media screen and (max-width: 767px) { .section-language-tunnel .headline { margin: 0 auto 20px; } .section-language-tunnel .language-options.has-flags { display: block; } .section-language-tunnel .language-options.has-flags li a { line-height: 1.1em; word-wrap: normal; } .section-language-tunnel .language-options.has-flags li.has-flag .country-name { margin-left: 42px; width: calc(100% - 42px); } .section-language-tunnel .flag-icon { -webkit-transform: translateY(-50%); left: 11px; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } .section-language-tunnel .country-name, .section-language-tunnel .flag-icon { display: inline-block; vertical-align: middle; } } @media screen and (min-width: 768px) { .section-language-tunnel .flag-icon { margin-right: 4px; vertical-align: middle; } } /* 0px =========================== */ @media (min-width: 0) { section.section-language-tunnel { padding-bottom: 10px; text-align: center; } section.section-language-tunnel h2.headline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; font-size: 22px; line-height: 24px; color: #474747; max-width: 90%; width: 100%; } section.section-language-tunnel h3.selected-country { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 30px; line-height: 25px; color: #474747; margin-bottom: 20px; text-transform: none; } section.section-language-tunnel ul.language-options { display: table; margin: 0 auto; min-width: 200px; } section.section-language-tunnel ul.language-options li { color: #009639; font-size: 13px; line-height: 1em; list-style: none; margin: 0 auto; padding-bottom: 10px; text-transform: uppercase; } section.section-language-tunnel ul.language-options li > a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: normal; font-size: 14px; line-height: 25px; color: #ffffff; -moz-appearance: none; -webkit-appearance: none; appearance: none; background: #009639; display: block; margin: 1px 0 0; opacity: 1; padding: 7px 10px; transition: all 0.2s ease-out; } section.section-language-tunnel ul.language-options li > a:hover { background: #474747; transition: all 0.1s ease-in; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { section.section-language-tunnel ul.language-options { display: table; margin: 30px auto 0; } section.section-language-tunnel ul.language-options h2.headline { font-size: 28px; line-height: 30px; } section.section-language-tunnel ul.language-options li { padding: 5px 0; } section.section-language-tunnel ul.language-options li > a { font-size: 15px; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { section.section-language-tunnel h3.selected-country { font-size: 52px; } section.section-language-tunnel ul.language-options { display: table; margin: 30px auto 0; } section.section-language-tunnel ul.language-options li { padding: 5px 0; } section.section-language-tunnel ul.language-options li > a { font-size: 15px; } } /* ======================================================================== COMPONENT: PAGINATED GALLERY - COMMON ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #FontWeight */ /* #LineHeight */ /* #BackgroundColor */ /* :END VARIABLES */ .gallery-carousel { box-sizing: border-box; padding: 0; position: relative; } .gallery-carousel *, .gallery-carousel *:after, .gallery-carousel *:before { box-sizing: inherit; } .gallery-carousel a:focus { outline: 1px dotted #b9b9b9; } .gallery-carousel h2.headline-with-sub:empty { display: none; } .gallery-carousel p.subheadline:empty { display: none; } .gallery-carousel .gallery-carousel-wrap { margin: 0 auto; } .gallery-carousel .gallery-carousel-wrap .gallery-main-carousel__slide-caption .gallery-main-carousel__slide-caption-headline:empty, .gallery-carousel .gallery-carousel-wrap .gallery-main-carousel__slide-caption .gallery-main-carousel__slide-caption-subheadline:empty { display: none; } .gallery-carousel--kotv { background: #ffffff; } .gallery-carousel--kotv:before { content: " "; height: 52vw; left: 0; position: absolute; width: 100%; z-index: 0; } @media (min-width: 1024px) { .gallery-carousel--kotv:before { height: 32vw; } } .gallery-carousel--kotv.has-bg-img:before { background: transparent; } .gallery-carousel.has-bg-img.dark-bg .gallery-main-carousel__slide-caption-headline, .gallery-carousel.has-bg-img.dark-bg .gallery-main-carousel__slide-caption-subheadline, .gallery-carousel.has-bg-img.dark-bg .gallery-main-carousel__slide-index { color: #ffffff; } .gallery-carousel.has-bg-img.dark-bg .gallery-control-carousel__pagination-switch { background: #ffffff; } .gallery-carousel.has-bg-img.dark-bg .gallery-control-carousel__pagination-switch--active { background-color: #009639; } .gallery-carousel.has-bg-img.mild-bg .gallery-main-carousel__slide-caption { background: #ffffff; } h2.headline-with-sub { font-size: 14px; position: relative; z-index: 1; } .gallery-carousel h2.headline-with-sub { background: #ffffff; font-weight: 900; margin-bottom: 0; padding: 20px 0; width: auto; } @media (min-width: 768px) { .gallery-carousel h2.headline-with-sub { background: transparent; width: 100%; } } .gallery-carousel.has-bg-img h2.headline-with-sub { background: transparent; } .gallery-carousel .subheadline { font-size: 16px; margin: 0 auto 20px; max-width: 525px; text-align: center; } .gallery-carousel-wrap { margin: 0 auto 28px; max-width: 100%; position: relative; } .gallery-carousel__more-title { background: #ffffff; color: #898989; font-size: 14px; max-width: 80%; padding: 10px 0; position: relative; z-index: 1; } @media (min-width: 1024px) { .gallery-carousel__more-title { max-width: 65%; padding: 20px 0; } } .gallery-carousel__more-title:empty { display: none; } .gallery-carousel-logout-mgs { display: none; margin-bottom: 12px; text-align: center; } .restricted-paginated-gallery-item .gallery-carousel-logout-mgs-action-wrap, .restricted-paginated-gallery-item .gallery-carousel-logout-mgs-description { margin: 12px 0; } .gallery-control-carousel { background: #eaeaea; display: none; margin: 0 auto; padding: 36px 0 0; position: relative; } @media (min-width: 768px) { .gallery-control-carousel { display: block; padding: 80px 0 0; } .gallery-control-carousel:not(.carousel--kotv) { padding: 80px 0; } } .gallery-control-carousel:not(.carousel--kotv) { background: #ffffff; padding-top: 0; } .gallery-control-carousel.carousel--kotv { display: block; overflow: hidden; text-align: center; top: 0; } .gallery-control-carousel.carousel--kotv .btn, .gallery-control-carousel.carousel--kotv .gallery-main-carousel__overlay-action { color: #ffffff; } .gallery-control-carousel__container { -webkit-backface-visibility: hidden; backface-visibility: hidden; margin: 0 auto; overflow: hidden; position: relative; width: 100%; z-index: 1; } .carousel--kotv .gallery-control-carousel__container { height: 0; width: 101.5%; } .gallery-control-carousel__hide { display: none; } .gallery-control-carousel__hide.gallery-control-carousel.carousel--kotv { display: none; } .gallery-carousel .carousel__nav-round, .gallery-carousel .carousel__nav-angle { z-index: 1; } .carousel__nav-round--prev:before, .carousel__nav-angle--prev:before { left: -10px; } .gallery-control-carousel__wrapper { -moz-transform: translate3d(0px, 0, 0); -moz-transition-duration: 0s; -moz-transition-property: -moz-transform, left, top; -moz-transition-timing-function: ease; -ms-transform: translate3d(0px, 0, 0); -ms-transition-duration: 0s; -ms-transition-property: -ms-transform, left, top; -ms-transition-timing-function: ease; -o-transform: translate3d(0px, 0, 0); -o-transform: translate(0px, 0px); -o-transition-duration: 0s; -o-transition-property: -o-transform, left, top; -o-transition-timing-function: ease; -webkit-transform: translate3d(0px, 0, 0); -webkit-transition-duration: 0s; -webkit-transition-property: -webkit-transform, left, top; -webkit-transition-timing-function: ease; margin: 0 auto; position: relative; transform: translate3d(0px, 0, 0); transition-duration: 0s; transition-property: transform, left, top; transition-timing-function: ease; } .carousel__nav-angle, .gallery-control-carousel__nav-angle { display: none; } .gallery-control-carousel__pagination { -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); left: 50%; margin-top: 15px; position: absolute; transform: translateX(-50%); z-index: 10; } .gallery-control-carousel__pagination-switch { background: #222; background-color: #777777; border-radius: 12px; cursor: pointer; float: left; font-size: 0; height: 12px; margin-right: 8px; opacity: 0.8; width: 12px; } .gallery-control-carousel__pagination-switch--active { background-color: #009639; } .gallery-control-carousel__slide { cursor: pointer; float: left; } .gallery-control-carousel__wrapper .gallery-control-carousel__slide:first-child .gallery-control-carousel__slide-spacer { margin-left: 0; } .gallery-control-carousel__wrapper .gallery-control-carousel__slide:last-child .gallery-control-carousel__slide-spacer { margin-right: 0; } .carousel--kotv .gallery-control-carousel__slide { margin: 0 0 20px; padding: 0; width: 25%; } @media screen and (max-width: 520px) { .carousel--kotv .gallery-control-carousel__slide { width: 50%; } } .carousel--kotv .gallery-control-carousel__slide:nth-child(4n+1) .gallery-control-carousel__slide-spacer { margin: 0 6% 0 0; } .carousel--kotv .gallery-control-carousel__slide:nth-child(4n+2) .gallery-control-carousel__slide-spacer { margin: 0 6% 0 0; } .carousel--kotv .gallery-control-carousel__slide:nth-child(4n+3) .gallery-control-carousel__slide-spacer { margin: 0 6% 0 0; } .carousel--kotv .gallery-control-carousel__slide:nth-child(4n) .gallery-control-carousel__slide-spacer { margin: 0 6% 0 0; } .dark-bg .gallery-control-carousel__load-more-button, .light-bg .gallery-control-carousel__load-more-button, .mild-bg .gallery-control-carousel__load-more-button { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); backface-visibility: hidden; background-color: #009639; color: #ffffff; margin: 20px 12px; min-width: 200px; overflow: hidden; position: relative; transform: translateZ(0); vertical-align: middle; } .dark-bg .gallery-control-carousel__load-more-button:before, .light-bg .gallery-control-carousel__load-more-button:before, .mild-bg .gallery-control-carousel__load-more-button:before { animation: button-mouseoff-fade 0.5s ease-out; animation-iteration-count: 1; background-color: #009639; border-radius: 100%; bottom: 6px; color: #ffffff; content: ""; height: 30px; left: 45%; opacity: 0; position: absolute; right: 0; -ms-transform: scale(20); transform: scale(20); width: 30px; z-index: -1; } .dark-bg .gallery-control-carousel__load-more-button:hover:before, .light-bg .gallery-control-carousel__load-more-button:hover:before, .mild-bg .gallery-control-carousel__load-more-button:hover:before { animation: button-hover-radial 0.6s ease-out; background-color: #474747; color: #ffffff; opacity: 1; } .dark-bg .gallery-control-carousel__load-more-button:active, .light-bg .gallery-control-carousel__load-more-button:active, .mild-bg .gallery-control-carousel__load-more-button:active { background-color: #009639; border-bottom: 0; border-top: 0; transition: all 0.2 ease 0.2s; } @media (min-width: 768px) { .dark-bg .gallery-control-carousel__load-more-button, .light-bg .gallery-control-carousel__load-more-button, .mild-bg .gallery-control-carousel__load-more-button { margin: 20px 0; } } .gallery-control-carousel--kotv-allloaded .gallery-control-carousel__load-more-button { display: none; } .gallery-control-carousel__slide-title { color: #898989; font-size: 14px; margin: 0 auto; text-align: left; width: 140px; } .carousel--kotv .gallery-control-carousel__slide-title { padding: 0 8px; width: 100%; } .gallery-control-carousel__slide-title-lock-term { color: #009639; font-weight: 600; text-transform: uppercase; } .gallery-control-carousel__slide-runtime { color: #898989; margin: 0 auto; width: 140px; } .carousel--kotv .gallery-control-carousel__slide-runtime { padding: 0 8px; width: 100%; } .gallery-control-carousel__slide-spacer { height: 100%; margin: 0 10px; position: relative; } .carousel--kotv .gallery-control-carousel__slide-spacer { padding-bottom: 6px; } .gallery-control-carousel__wrap-media { margin-bottom: 20px; position: relative; } .gallery-control-carousel__slide--locked .gallery-control-carousel__wrap-media { overflow: hidden; } .gallery-control-carousel__slide--locked .gallery-control-carousel__wrap-media .gallery-control-carousel__slide-media { filter: blur(2px); } .gallery-control-carousel__wrap-media:after { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: 11; } .gallery-control-carousel__slide--active .gallery-control-carousel__wrap-media:after { border: 5px solid #009639; } .gallery-control-carousel__slide--locked.gallery-control-carousel__slide--video .gallery-control-carousel__wrap-media::after { background-image: none; } .gallery-thumbnail-carousel__wrap-media .gallery-thumbnail-carousel__overlay { background: url("/etc/designs/P/5631383682678784/clientlib/img/cta-button-bg@2x.png") repeat; } .gallery-thumbnail-carousel__overlay-lock, .gallery-thumbnail-carousel__play-icon { -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); height: 40px; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); width: 40px; } .gallery-control-carousel__slide--locked .gallery-thumbnail-carousel__play-icon { display: none; } .gallery-control-carousel__slide-media, .gallery-main-carousel__slide-media { /* kill descender gap between inline img and container */ vertical-align: middle; width: 100%; } .gallery-control-carousel:not(.carousel--kotv) .gallery-control-carousel__slide-media { height: 228px; max-width: 333px; width: auto; } .gallery-main-carousel { padding: 0 10px; position: relative; } .gallery-main-carousel.carousel--kotv { background: transparent; } @media (min-width: 1024px) { .gallery-main-carousel { margin: 0 auto; max-width: 80%; padding: 0 11.2%; } .gallery-main-carousel.carousel--kotv { background: transparent; } .gallery-main-carousel.full-width { max-width: 100%; padding: 0; } } .gallery-main-carousel.full-width { padding: 0; } .gallery-main-carousel__container { -webkit-backface-visibility: hidden; backface-visibility: hidden; margin: 0 auto; overflow: hidden; width: 100%; /* Fix of Webkit flickering */ z-index: 1; } .gallery-carousel:not(.gallery-carousel--kotv) .gallery-main-carousel__container { width: 85%; } @media screen and (min-width: 1024px) { .gallery-carousel:not(.gallery-carousel--kotv) .gallery-main-carousel__container { width: 100%; } } .gallery-carousel .gallery-main-carousel.full-width .gallery-main-carousel__container { width: 100%; } .gallery-main-carousel__wrapper { -moz-transform: translate3d(0px, 0, 0); -moz-transition-duration: 0s; -moz-transition-property: -moz-transform, left, top; -moz-transition-timing-function: ease; -ms-transform: translate3d(0px, 0, 0); -ms-transition-duration: 0s; -ms-transition-property: -ms-transform, left, top; -ms-transition-timing-function: ease; -o-transform: translate3d(0px, 0, 0); -o-transform: translate(0px, 0px); -o-transition-duration: 0s; -o-transition-property: -o-transform, left, top; -o-transition-timing-function: ease; -webkit-transform: translate3d(0px, 0, 0); -webkit-transition-duration: 0s; -webkit-transition-property: -webkit-transform, left, top; -webkit-transition-timing-function: ease; transform: translate3d(0px, 0, 0); transition-duration: 0s; transition-property: transform, left, top; transition-timing-function: ease; } .gallery-main-carousel__slide { background: #ffffff; float: left; height: 100%; position: relative; width: 100%; } .gallery-main-carousel__wrap-media { position: relative; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .gallery-main-carousel__wrap-media .fluid-width-video-wrapper { padding-top: 66.9767%; } } .gallery-main-carousel__play-button { -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 1; } .touch .gallery-main-carousel__play-button { display: none; } .gallery-main-carousel__overlay { z-index: 2; } .gallery-carousel__overlay-img-background { background-position: center; background-repeat: no-repeat; background-size: cover; filter: blur(2px); height: 100%; position: absolute; width: 100%; } .gallery-carousel__overlay-img { height: 100%; overflow: hidden; position: absolute; width: 100%; z-index: 0; } .gallery-carousel__overlay-img:before { content: ''; display: block; } .gallery-main-carousel__overlay-msg { -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); left: 50%; position: absolute; text-align: center; top: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; z-index: 1; } .gallery-main-carousel__overlay-lock { height: 40px; width: 40px; } @media (min-width: 550px) { .gallery-main-carousel__overlay-lock { height: 75px; width: 75px; } } .gallery-main-carousel__overlay-headline, .gallery-main-carousel__overlay-description, .gallery-main-carousel__overlay-msg-action-wrap { font-size: 16px; margin: 3px 0; } @media (min-width: 550px) { .gallery-main-carousel__overlay-headline, .gallery-main-carousel__overlay-description, .gallery-main-carousel__overlay-msg-action-wrap { font-size: 16px; margin: 10px 0; } } .gallery-main-carousel__overlay-headline { color: #ffffff; } .gallery-main-carousel__overlay-description { color: #009639; margin-bottom: 22px; } .gallery-main-carousel__overlay-description, .gallery-main-carousel__overlay-headline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 14px; text-transform: uppercase; } .gallery-main-carousel__overlay-msg-action-wrap { font-weight: 200; text-align: center; } .gallery-main-carousel__overlay-action { min-width: auto; } @media screen and (min-width: 375px) { .gallery-main-carousel__overlay-action { min-width: 300px; } } .gallery-main-carousel__overlay-action:before { background-color: #474747; } .dark-bg .carousel--kotv .gallery-main-carousel__overlay-action, .gallery-carousel .gallery-main-carousel__overlay-action, .light-bg .carousel--kotv .gallery-main-carousel__overlay-action, .mild-bg .carousel--kotv .gallery-main-carousel__overlay-action { background-color: #009639; border: 0; color: #ffffff; min-width: 200px; } .dark-bg .carousel--kotv .gallery-main-carousel__overlay-action:active, .gallery-carousel .gallery-main-carousel__overlay-action:active, .light-bg .carousel--kotv .gallery-main-carousel__overlay-action:active, .mild-bg .carousel--kotv .gallery-main-carousel__overlay-action:active { background-color: #474747; border: 0; color: #ffffff; transition: all 0.2 ease 0.2s; } .dark-bg .carousel--kotv .gallery-main-carousel__overlay-action:active:hover, .gallery-carousel .gallery-main-carousel__overlay-action:active:hover, .light-bg .carousel--kotv .gallery-main-carousel__overlay-action:active:hover, .mild-bg .carousel--kotv .gallery-main-carousel__overlay-action:active:hover { border: 0; border-bottom-width: 0; } .dark-bg .carousel--kotv .gallery-main-carousel__overlay-action:before, .gallery-carousel .gallery-main-carousel__overlay-action:before, .light-bg .carousel--kotv .gallery-main-carousel__overlay-action:before, .mild-bg .carousel--kotv .gallery-main-carousel__overlay-action:before { background-color: #474747; border: 0; border-radius: 0; } .gallery-main-carousel__slide-caption { background: #ffffff; min-height: 32px; padding: 36px; position: relative; } @media screen and (max-width: 767px) { .gallery-main-carousel__slide-caption { padding: 20px 10px 0; text-align: center; } } .gallery-main-carousel__slide-lock-headline { color: #009639; font-size: 22px; margin-bottom: 20px; text-align: center; text-transform: capitalize; } .gallery-main-carousel__slide-lock-headline-image { max-width: 35px; vertical-align: middle; } @media (min-width: 768px) { .gallery-main-carousel__slide-lock-headline-image { font-size: 28px; max-width: 50px; } } .gallery-main-carousel__slide-index { color: #898989; display: inline-block; font-weight: normal; margin: 10px 0; text-align: center; text-align: center; width: 100%; } @media (min-width: 768px) { .gallery-main-carousel__slide-index { margin: 0; position: absolute; right: 10px; top: 12px; width: auto; } } .gallery-main-carousel__slide-caption-headline { color: #009639; font-size: 22px; font-weight: bold; margin-bottom: 20px; position: relative; text-transform: uppercase; } @media (min-width: 768px) { .gallery-main-carousel__slide-caption-headline { font-size: 28px; } } .gallery-main-carousel__slide-caption-subheadline { color: #000000; font-size: 16px; font-weight: normal; line-height: 1.2em; margin: 0 0 10px; max-height: 3.5em; overflow: hidden; position: relative; text-align: center; width: 100%; } .gallery-main-carousel__slide-caption-subheadline[aria-expanded="false"]::before { background-color: #ffffff; bottom: 0; content: '...'; padding: 0; position: absolute; right: 0; } .gallery-main-carousel__slide-link:hover .gallery-main-carousel__slide-caption-subheadline { color: #009639; } .gallery-main-carousel__slide-caption-subheadline-close, .gallery-main-carousel__slide-caption-subheadline-readmore { display: inline-block; text-align: center; } .gallery-main-carousel__slide-caption-subheadline-readmore .icon-cc-next, .gallery-main-carousel__slide-caption-subheadline-readmore .navigation-bar-slideout__list-item-link--next:before { display: inline-block; -ms-transform: rotate(90deg); transform: rotate(90deg); } .gallery-main-carousel__slide-caption-subheadline-close .icon-cc-next, .gallery-main-carousel__slide-caption-subheadline-close .navigation-bar-slideout__list-item-link--next:before { display: inline-block; -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .carousel__action-bar { padding: 33px 0; } .carousel__action-bar a, .carousel__action-bar ul { color: #000000; } .carousel__action-bar .icon-social-share { color: #009639; } .share-controls { margin: 0; } @media (min-width: 768px) { .share-controls { float: left; } } .modal-comments-toggle, .share-controls__option, .share-controls__share-toggle { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 12px; text-transform: uppercase; } .share-controls__option { float: right; } @media (min-width: 768px) { .gallery-main-carousel .section-social-sharing, .modal-comments .section-social-sharing { -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); bottom: auto; left: calc(100% - -10px); position: absolute; top: 50%; transform: translateY(-50%); width: 200px; width: 250px; } } .gallery-main-carousel.carousel--kotv .modal-comments-toggle { display: block; margin-top: 5px; } @media screen and (min-width: 627px) { .gallery-main-carousel.carousel--kotv .modal-comments-toggle { float: right; position: static; } } .share-controls__like { margin-right: 50px; margin-top: 2px; } .gallery-main-carousel.carousel--kotv .share-controls__like { left: 0; position: absolute; } @media (min-width: 768px) { .gallery-main-carousel.carousel--kotv .share-controls__like { float: right; position: static; } } .gallery-main-carousel .circle-button { height: 25px; width: 25px; } .gallery-main-carousel .social-icons { margin: 0; text-align: left; } .gallery-main-carousel .social-icons li { margin: 0 3px; } @media screen and (min-width: 376px) { .social-icons li { margin-top: 7px; } } /* ======================================================================== COMPONENT: PRODUCT - COMMON ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #FontWeight */ /* #LineHeight */ /* #Border */ /* #BackgroundColor */ /* :END VARIABLES */ /* 0px =========================== */ @media (min-width: 0) { section.section-product-info { background-color: #ffffff; text-align: center; } section.section-product-info .product-carousel { background-color: #474747; height: 280px; margin-bottom: 20px; width: 100%; } section.section-product-info p.product-desc { font-size: 16px; line-height: 20px; padding: 4px 18px 18px; } section.section-product-info ul.product-size li { color: #000000; display: inline; font-size: 16px; font-weight: bold; } section.section-product-info ul.product-size li a { font-weight: bold; } section.section-product-info ul.product-size li:after { color: #009639; content: " / "; font-weight: normal; } section.section-product-info ul.product-size li:last-of-type:after { content: ""; } section.section-product-info ul.product-size li.selected a { color: #000000; } section.section-product-info table.product-info-table { border-collapse: collapse; font-size: 12px; line-height: 12px; margin: 14px auto; max-width: 300px; text-align: left; } section.section-product-info table.product-info-table tr { border-bottom: 1px solid #000000; } section.section-product-info table.product-info-table tr:first-of-type, section.section-product-info table.product-info-table tr:last-of-type { border-bottom: none; } section.section-product-info table.product-info-table th { font-size: 18px; padding: 8px 0; text-align: center; line-height: 24px; } section.section-product-info table.product-info-table td { padding: 6px 6px 6px 0; } section.section-product-info table.product-info-table td.nutrient { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; } section.section-product-info table.product-info-table td.nutrient-percent-dv { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; text-align: right; } section.section-product-info table.product-info-table td:last-child { padding-right: 0; text-align: right; } section.section-product-info p.dv-note { font-size: 11px; margin: 0 auto; width: 90%; } section.section-product-info .prod-desc { margin: 18px auto; padding: 0 10px; } section.section-product-info .prod-desc p { font-size: 16px; line-height: 20px; } section.section-product-info .prod-desc h3 { font-size: 20px; margin-bottom: 6px; text-transform: none; } section.section-product-info .ingredients { margin: 28px auto 18px; padding: 0 10px; } section.section-product-info .ingredients p { font-size: 16px; line-height: 20px; } section.section-product-info .ingredients h4 { font-size: 16px; margin-bottom: 6px; text-transform: none; } section.section-product-info .quality { margin: 0 auto 18px; padding: 0 10px; } section.section-product-info .quality p { font-size: 16px; line-height: 20px; } section.section-product-info .quality h4 { font-size: 16px; margin-bottom: 6px; text-transform: none; } section.section-product-info a { font-weight: bold; } .options--nutrition > .options__content { margin: 0.875em 20px; } } /* =============================== */ /* 480px ======================== */ /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { section.section-product-info p.product-desc { font-size: 16px; line-height: 24px; margin: 0 auto; padding: 10px 18px 18px; width: 520px; } section.section-product-info table.product-info-table { font-size: 18px; line-height: 20px; max-width: 520px; } section.section-product-info p.dv-note { font-size: 11px; margin: 0 auto; } section.section-product-info .prod-desc { width: 520px; } section.section-product-info .ingredients { margin: 28px auto 18px; width: 520px; } section.section-product-info .ingredients h4 { font-size: 16px; } section.section-product-info .ingredients p { font-size: 16px; line-height: 24px; } section.section-product-info .quality { margin: 0 auto 18px; width: 520px; } section.section-product-info .quality h4 { font-size: 16px; } section.section-product-info .quality p { font-size: 16px; line-height: 24px; padding: 0 10px; } } /* =============================== */ /* 1024px ======================== */ /* =============================== */ /* 1200px ======================== */ @media (min-width: 1200px) { section.section-product-info table.product-info-table { max-width: 520px; } section.section-product-info .ingredients { margin: 28px auto 18px; width: 520px; } section.section-product-info .ingredients h4 { font-size: 16px; } section.section-product-info .quality { margin: 0 auto 18px; width: 520px; } } /* =============================== */ /* PRINT ======================== */ /* =============================== */ /* SWIPER */ .productanimatein { /* Safari and Chrome */ animation: productanimatein 0.5s; animation: productanimatein 0.5s; animation-iteration-count: 1; animation-timing-function: ease; } @keyframes productanimatein { 0% { margin-bottom: -300px; } 100% { margin-bottom: 0; } } /* Safari and Chrome */ .productanimateout { /* Safari and Chrome */ animation: productanimateout 0.5s 1; animation: productanimateout 0.5s 1; } .productanimatein img { /* Safari and Chrome */ animation: productfadein 0.6s 1; animation: productfadein 0.6s 1; } @keyframes productfadein { 0% { opacity: 0; } 100% { opacity: 1; } } /* Safari and Chrome */ @keyframes productanimateout { 0% { margin-bottom: 0; } 100% { margin-bottom: 303px; } } /* Safari and Chrome */ .swiper { -webkit-backface-visibility: hidden; backface-visibility: hidden; height: 22em; margin: 0 auto; overflow: hidden; position: relative; text-align: center; z-index: 1; } .swiper .swiper__items { -moz-transform: translate3d(0px, 0, 0); -moz-transition-duration: 0s, 0s, 0s, 0.5s; -moz-transition-property: -moz-transform, left, top, opacity; -moz-transition-timing-function: ease; -ms-transform: translate3d(0px, 0, 0); -ms-transition-duration: 0s, 0s, 0s, 0.5s; -ms-transition-property: -ms-transform, left, top, opacity; -ms-transition-timing-function: ease; -o-transform: translate3d(0px, 0, 0); -o-transition-duration: 0s, 0s, 0s, 0.5s; -o-transition-property: -o-transform, left, top, opacity; -o-transition-timing-function: ease; -webkit-transform: translate3d(0px, 0, 0); -webkit-transition-duration: 0s, 0s, 0s, 0.5s; -webkit-transition-property: -webkit-transform, left, top, opacity; -webkit-transition-timing-function: ease; filter: alpha(opacity=0); opacity: 0; position: relative; transform: translate3d(0px, 0, 0); transition-duration: 0s, 0s, 0s, 0.5s; transition-property: transform, left, top, opacity; transition-timing-function: ease; width: 100%; } .swiper.loaded .swiper__items { filter: alpha(opacity=100); opacity: 1; } .swiper .swiper__item { -moz-transform: translate3d(0, 0, 0); -moz-transition: 0.3s; -ms-transform: translate3d(0, 0, 0); -ms-transition: 0.3s; -o-transform: translate3d(0, 0, 0); -o-transition: 0.3s; -webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0.3s; float: left; min-height: 22em; position: relative; transform: translate3d(0, 0, 0); transition: 0.3s; width: 9.25em; } .swiper .swiper__item.swiper__item--selected img, .no-touch .swiper .swiper__item:hover img { -ms-transform: scale(1.16) translate3d(0, -1em, 0); transform: scale(1.16) translate3d(0, -1em, 0); } .swiper .swiper__item img { -moz-transform: translate3d(0, -1em, 0); -moz-transition: 0.15s; -ms-transform: translate3d(0, -1em, 0); -ms-transition: 0.15s; -o-transform: translate3d(0, -1em, 0); -o-transition: 0.15s; -webkit-transform: translate3d(0, -1em, 0); -webkit-transition: 0.15s; max-width: 8.125em; transform: translate3d(0, -1em, 0); transition: 0.15s; } .swiper .swiper__item a { -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; bottom: 0; left: 0; position: absolute; right: 0; transition: 0.3s; } .swiper .swiper__item a.fade { filter: alpha(opacity=0); opacity: 0; } .swiper .swiper__nav li { -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; position: absolute; top: 50%; transition: 0.3s; z-index: 10; } .swiper .swiper__nav li a { background: #949494; display: block; filter: alpha(opacity=75); height: 42px; margin-top: -21px; opacity: 0.75; text-indent: -9999px; width: 28px; } .swiper .swiper__nav li a:hover { filter: alpha(opacity=100); opacity: 1; } .swiper .swiper__nav li.swiper__nav--prev { -moz-transform: translate3d(-4em, 0, 0); -ms-transform: translate3d(-4em, 0, 0); -o-transform: translate3d(-4em, 0, 0); -webkit-transform: translate3d(-4em, 0, 0); left: 20px; transform: translate3d(-4em, 0, 0); } .swiper .swiper__nav li.swiper__nav--prev a { -webkit-mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-arrow-left.svg); mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-arrow-left.svg); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0; } .swiper .swiper__nav li.swiper__nav--next { -moz-transform: translate3d(4em, 0, 0); -ms-transform: translate3d(4em, 0, 0); -o-transform: translate3d(4em, 0, 0); -webkit-transform: translate3d(4em, 0, 0); right: 20px; transform: translate3d(4em, 0, 0); } .swiper .swiper__nav li.swiper__nav--next a { -webkit-mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-arrow-right.svg); mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-arrow-right.svg); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0; } .swiper:hover .swiper__nav li.swiper__nav--next, .swiper:hover .swiper__nav li.swiper__nav--prev { -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .swiper:hover .swiper__nav li.swiper__nav--prev.swiper__nav--inactive { -ms-transform: translate3d(-4em, 0, 0); transform: translate3d(-4em, 0, 0); } .swiper:hover .swiper__nav li.swiper__nav--next.swiper__nav--inactive { -ms-transform: translate3d(4em, 0, 0); transform: translate3d(4em, 0, 0); } /* windows phone 8 fix */ .swiper__wp8-horizontal { -ms-touch-action: pan-y; } .swiper__wp8-vertical { -ms-touch-action: pan-x; } /* hide nav for touch */ .touch .swiper__nav { display: none; } /* ie8 alpha fix */ .ie8 .swiper .swiper__items { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .ie8 .swiper.loaded .swiper__items { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .ie8 .swiper .swiper__item { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; } .ie8 .swiper .swiper__item.swiper__item--selected, .ie8 .swiper .swiper__item:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .ie8 .swiper .swiper__item a.fade { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .ie8 .swiper .swiper__nav li a { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; } .ie8 .swiper .swiper__nav li a:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .ie8 .swiper .swiper__nav li.swiper__nav--next.swiper__nav--inactive, .ie8 .swiper .swiper__nav li.swiper__nav--prev.swiper__nav--inactive { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } /* OPTIONS */ .options { position: relative; } .options > .options__content > li { -moz-transition: 0.9s; -ms-transition: 0.9s; -o-transition: 0.9s; -webkit-transition: 0.9s; display: none; opacity: 1; transition: 0.9s; } .options > .options__content > li.fadein, .options > .options__content > li.selected { display: block; } .options > .options__content > li.fade, .options > .options__content > li.fadein { opacity: 0; } .options__content .fade { opacity: 0; transition: opacity 0.5s ease; } /* options--products */ .options--products > .options__nav { margin-bottom: 1.25em; text-align: center; } .options--products > .options__content { text-align: center; } .options--products > .options__content > li { transition: 0.2s; } .options--products table.product-info-table tr:first-of-type { border-bottom: 1px solid #000000; } .options--products p { text-align: center; } .options--products tfoot { font-size: 11px; font-weight: normal; line-height: 1em; } section.section-product-info .options--products table.product-info-table tfoot td:last-child { text-align: center; } section.section-product-info .options--products table.product-info-table tbody tr:first-of-type { border-bottom: 1px solid #000000; } /* options--nutrition */ .options--nutrition > .options__nav { margin: 0; *zoom: 1; } .options--nutrition > .options__nav > li { color: #000000; font-size: 1em; } .options--nutrition > .options__nav > li, .options--nutrition > .options__nav > li > a { display: inline-block; *display: inline; zoom: 1; } .options--nutrition > .options__nav > li.selected a { color: #000000; } .options--nutrition > .options__nav > li:last-child:after { display: none; } .options--nutrition > .options__nav > li:after { color: #009639; content: " / "; } .options--nutrition > .options__nav:after, .options--nutrition > .options__nav:before { content: " "; display: table; } .options--nutrition > .options__nav:after { clear: both; } .options--nutrition > .options__content > li { margin: 0 auto; } /* ie7 fix */ .ie7 .options--nutrition > .options__nav > li { padding: 0 1em; } /* ======================================================================== COMPONENT: PRODUCT CAROUSEL - COMMON ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #BackgroundColor */ /* :END VARIABLES */ /* 0px =========================== */ .component-product-carousel .main-carousel-wrapper .variant-nutritional-info .generic-collapse-expand .fa, .component-product-carousel .thumbnails-wrapper .variant-nutritional-info .generic-collapse-expand .fa { color: #009639; } .component-product-carousel .main-carousel-wrapper .slick-arrow:before, .component-product-carousel .thumbnails-wrapper .slick-arrow:before { color: #009639; } .component-product-carousel .main-carousel-wrapper .slick-dots .slick-active button:before, .component-product-carousel .thumbnails-wrapper .slick-dots .slick-active button:before { color: #009639; } .component-product-carousel .main-carousel-wrapper .slick-dots button:before, .component-product-carousel .thumbnails-wrapper .slick-dots button:before { color: #000000; } .component-product-carousel div.product-cta, .component-product-carousel .buynow-content .buynow-item:hover { background-color: #00a9e0; border: none; border-top-width: 0; color: #ffffff; } .component-product-carousel div.product-cta:before, .component-product-carousel .buynow-content .buynow-item:hover:before { background-color: #003087; } .component-product-carousel div.product-cta:active, .component-product-carousel .buynow-content .buynow-item:hover:active { background-color: #00a9e0; color: #ffffff; transition: all 0.2 ease 0.2s; } .component-product-carousel div.product-cta p, .component-product-carousel .buynow-content .buynow-item:hover p { color: inherit; } .component-product-carousel .content-column .product-headline { font-size: 30px; color: #009639; } .component-product-carousel .content-column .product-subheadline { font-size: 20px; } .component-product-carousel .content-column .product-description { font-size: 18px; } @media (max-width: 479px) { .component-product-carousel .content-column .product-headline { font-size: 16px; } .component-product-carousel .content-column .product-subheadline { font-size: 14px; } .component-product-carousel .content-column .product-description { font-size: 12px; } .component-product-carousel .content-column .product-variation-label { font-size: 14px; } } /* ======================================================================== COMPONENT: SEARCH - COMMON ======================================================================== */ /* :START VARIABLES */ /* Font Sizes */ /* #FontSize */ /* #FontFamily */ /* #Color */ /* #FontWeight */ /* #LineHeight */ /* #Border */ /* #BackgroundColor */ /* :END VARIABLES */ .predictive-search-input::-ms-clear { display: none; } /* Input IE*/ .predictive-search { margin: 20px 0 30px; } .predictive-search .form-wrap { width: 100%; } .predictive-search .twitter-typeahead { display: block; width: 100%; } .predictive-search .twitter-typeahead .tt-menu { border: 1px solid #dddddd; width: 100%; } .predictive-search .twitter-typeahead .tt-suggestion { background-color: #ffffff; border-top: 1px solid #dddddd; font-size: 16px; margin: 0; padding: 10px 0; text-align: center; } @media only screen and (min-width: 480px) { .predictive-search .twitter-typeahead .tt-suggestion { font-size: 20px; } } .predictive-search .twitter-typeahead .tt-cursor { background-color: #efefef; } .predictive-search .twitter-typeahead .placeholder { text-align: center; } .predictive-search .btn-search-inner { background: transparent; border: 0; color: #009639; cursor: pointer; font-size: 40px; margin-top: -.5em; position: absolute; right: 0; top: 48%; } @media screen and (max-width: 767px) { .predictive-search .btn-search-inner { font-size: 38px; margin-top: 0; padding: 0; right: 7px; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); width: 30px; } } .predictive-search .btn-search-inner:focus { outline: none; } .predictive-search .btn-search-inner:hover { color: #444444; } .predictive-search .clear-input { color: #bebebe; display: none; font-size: 20px; margin-right: 10px; } .predictive-search .predictive-search-label { display: block; font-size: 15px; font-weight: 700; margin-top: 10px; text-align: center; } .predictive-search .predictive-search-input { border: 0; color: #000000; font-size: 18px; font-weight: bold; margin-bottom: 0; padding: 10px 35px; text-align: center; width: 100%; } @media only screen and (min-width: 480px) { .predictive-search .predictive-search-input { font-size: 28px; } } .predictive-search .predictive-search-input[placeholder]:focus::-webkit-input-placeholder { color: transparent; } .predictive-search .predictive-search-input-group { margin: 0 3%; position: relative; } @media (min-width: 481px) { .predictive-search .predictive-search-input-group { margin: 0 0.5%; } } .predictive-search [class*=" icon-"], .predictive-search [class^="icon-"] { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "icomoon"; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; } .predictive-search .icon-times-circle:before { content: "\e63d"; } .predictive-search .icon-bigarrow:before { content: "\e63c"; } /*RTL*/ *[dir="rtl"] .predictive-search .btn-search-inner { -ms-transform: rotate(180deg); left: 0; right: auto; transform: rotateZ(180deg); } *[dir="rtl"] #predictive-search-input { direction: rtl; } *[dir="rtl"] .clear-input { margin-left: 10px; margin-right: 0; } *[dir="rtl"] .search-result-count span { display: inline-block; } .section-grid-4-col .predictive-search-label { display: none; } .section-grid-4-col .search-result-count { font-weight: bold; margin: 0 15px 30px; } @media (min-width: 481px) { .section-grid-4-col .search-result-count { font-size: 14px; } } .section-grid-4-col .search-result-count span.search-query { color: #009639; } #navsearchform .twitter-typeahead { width: 100%; } #navsearchform { overflow: visible; } #navsearchform input[type="text"].tt-hint { width: 100%; } #navsearchform .tt-menu { -ms-transform: translateY(6px); transform: translateY(6px); width: 100%; } #navsearchform .tt-suggestion { padding: 6px; background-color: #ffffff; cursor: pointer; } #navsearchform .tt-suggestion:hover { background-color: #efefef; } #navsearchform .tt-cursor { background-color: #efefef; } #navsearchform .nav-search-do-search-button { -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; right: 10px; background: transparent; border: 0; cursor: pointer; top: 50%; z-index: 10000; } #navsearchform .nav-search-do-search-button .nav-search-do-search-button-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } @media (min-width: 481px) { section.nav { overflow: visible; } } .typeahead-search-form { background: transparent; color: #009639; margin: 0; overflow: visible; padding: 0; position: relative; width: 100%; } .typeahead-search-form .search-icon { position: absolute; right: 12px; top: 25px; z-index: 500; } .typeahead-search-form input[type="search"] { -webkit-appearance: none; border: 0; border-radius: 0; color: #009639; font-size: 20px; line-height: 22.5px; list-style: none; margin: 10px 0 0; overflow: hidden; padding: 12px 10px 10px 0; text-align: left; text-indent: 11px; text-transform: uppercase; width: 100%; } .typeahead-search-form input[type="search"]::-webkit-search-cancel-button, .typeahead-search-form input[type="search"]::-webkit-search-decoration, .typeahead-search-form input[type="search"]::-webkit-search-results-button, .typeahead-search-form input[type="search"]::-webkit-search-results-decoration { display: none; } .typeahead-search-form input[type="submit"] { display: none; } /* 768px ======================== */ @media (min-width: 768px) { .typeahead-search-form { display: none; } } .typeahead-search-form .twitter-typeahead { width: 100%; } .typeahead-search-form { overflow: visible; position: relative; } .typeahead-search-form #search { text-transform: none; } .typeahead-search-form input[type="text"].tt-hint { width: 100%; } .typeahead-search-form .tt-menu { width: 100%; -ms-transform: translateY(6px); transform: translateY(6px); } .typeahead-search-form .tt-suggestion { background-color: #ffffff; cursor: pointer; padding: 6px; } .typeahead-search-form .tt-suggestion:hover { background-color: #efefef; } .typeahead-search-form .tt-cursor { background-color: #efefef; } .typeahead-search-form .nav-search-do-search-button { background: transparent; border: 0; cursor: pointer; position: absolute; right: 10px; top: 50%; width: auto; z-index: 10000; -ms-transform: translateY(-26%); transform: translateY(-26%); } .typeahead-search-form .nav-search-do-search-button:before { color: #d5d5d5; font-size: 18px; } /* ======================================================================== COMPONENT: SMART PRODUCT - COMMON ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #FontFamily */ /* #Color */ /* #FontWeight */ /* #LineHeight */ /* #Border */ /* #BackgroundColor */ /* #BoxShadow */ /* :END VARIABLES */ /* Button Mixins */ /* Radial Hover Keyframes */ @keyframes button-hover-radial { from { transform: scale(0); opacity: 0; } 100% { transform: scale(15); opacity: 1; } } @keyframes button-mouseoff-fade { from { transform: scale(20); opacity: 1; } 100% { opacity: 0; transform: scale(20); } } .smrt01a-component.dark-bg.has-bg-img div.title { color: #dddddd; } .smrt01a-component.dark-bg.has-bg-img .block p { color: #cbcbcb; } .smrt01a-component.dark-bg.has-bg-img hr { border-top: 1px solid #444444; } .smrt01a-component .component-container { width: 100%; margin: 0 auto; } @media screen and (min-width: 1024px) { .smrt01a-component .component-container { width: 1024px; } } .smrt01a-component div.title { font-size: 42px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 900; font-style: normal; color: #565656; text-align: center; line-height: 1.2em; margin: 0 auto; padding: 0; } .smrt01a-component .btn-container { clear: both; width: 100%; position: relative; text-align: center; } .smrt01a-component .btn-container .btn, .smrt01a-component .btn-container .gallery-main-carousel__overlay-action { color: #fefefe; background-color: #009639; font-weight: 500; font-size: 13px; display: inline-block; text-align: center; padding: 7px 10px; box-sizing: border-box; margin-left: 0; margin-right: 0; vertical-align: middle; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; min-width: 200px; } .smrt01a-component .btn-container .btn:before, .smrt01a-component .btn-container .gallery-main-carousel__overlay-action:before { content: ""; position: absolute; z-index: -1; left: 45%; right: 0; bottom: 6px; background-color: #006342; height: 30px; width: 30px; border-radius: 100%; animation: button-mouseoff-fade 0.5s ease-out; animation-iteration-count: 1; -ms-transform: scale(20); transform: scale(20); opacity: 0; } .smrt01a-component .btn-container .btn:hover, .smrt01a-component .btn-container .gallery-main-carousel__overlay-action:hover { color: #ffffff; } .smrt01a-component .btn-container .btn:hover:before, .smrt01a-component .btn-container .gallery-main-carousel__overlay-action:hover:before { animation: button-hover-radial 0.6s ease-out; opacity: 1; } .smrt01a-component .btn-container .btn:active, .smrt01a-component .btn-container .gallery-main-carousel__overlay-action:active { background-color: #006342; color: #ffffff; transition: all 0.2 ease 0.2s; } .smrt01a-component .btn-container .btn.primary, .smrt01a-component .btn-container .primary.gallery-main-carousel__overlay-action { color: #ffffff; background-color: #009639; } .smrt01a-component .btn-container .btn.primary:before, .smrt01a-component .btn-container .primary.gallery-main-carousel__overlay-action:before { background-color: #006342; } .smrt01a-component .btn-container .btn.primary:active, .smrt01a-component .btn-container .primary.gallery-main-carousel__overlay-action:active { background-color: #006342; } .smrt01a-component .btn-container .btn.btn-has-icon, .smrt01a-component .btn-container .btn-has-icon.gallery-main-carousel__overlay-action { position: relative; } .smrt01a-component .btn-container .btn.btn-has-icon:after, .smrt01a-component .btn-container .btn-has-icon.gallery-main-carousel__overlay-action:after { content: 'x'; font-family: "cc-go"; speak: none; font-style: normal; font-variant: normal; text-transform: none; line-height: 1; font-weight: bold; content: "\e604"; position: absolute; top: 0; -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); right: 12px; padding-top: 12px; } .smrt01a-component .btn-container.align-right { text-align: right; } .smrt01a-component .btn-container.align-left { text-align: left; } @media screen and (max-width: 480px) { .smrt01a-component .btn-container { padding: 0 5px; box-sizing: border-box; } .smrt01a-component .btn-container .btn, .smrt01a-component .btn-container .gallery-main-carousel__overlay-action { display: block; } } .smrt01a-component .block { text-align: center; } .smrt01a-component .block .block-info { display: block; margin-bottom: 35px; } .smrt01a-component .block .block-info:after, .smrt01a-component .block .block-info:before { clear: both; content: " "; display: table; } .smrt01a-component .block .block-info img { margin-bottom: 45px; } .smrt01a-component .block p { text-align: center; color: #727272; font-size: 16px; font-weight: 500; } .smrt01a-component .block div.title { margin-bottom: 35px; font-weight: 900; font-size: 52px; letter-spacing: 1px; } @media screen and (max-width: 480px) { .smrt01a-component .block div.title { font-size: 36px; margin-bottom: 15px; } .smrt01a-component .block img.icon { margin-bottom: 15px; } .smrt01a-component .block .block-info { margin-bottom: 15px; } } .smrt01a-component .action-icon { width: 200px; height: 200px; background-color: #009639; box-shadow: 0 7px 0 #006342; border-radius: 50%; margin: 0 auto; } .smrt01a-component .action-icon .action-icon-container { text-align: center; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .smrt01a-component .action-icon .action-icon-container img { display: block; margin: 0 auto; } .smrt01a-component .action-icon .action-icon-container span { color: #ffffff; display: inline-block; font-size: 18px; font-weight: bold; padding: 0 12%; margin-top: 10px; line-height: 16px; } .smrt01a-component .action-icon.mini { width: 100px; height: 100px; } .smrt01a-component .action-icon.mini .action-icon-container img { width: 60%; display: block; margin: 0 auto; } .smrt01a-component .action-icon.mini .action-icon-container span { font-size: 11px; margin-top: 0; } .smrt01a-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0, 0, 0, 0.65); } .smrt01a-modal .smrt01a-modal__container { background: #ffffff; width: 80%; max-width: 880px; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } .processing .smrt01a-modal .smrt01a-modal__container { border-width: 1px; border-radius: 15px; } .smrt01a-modal .smrt01a-modal__container .modal-content { padding: 45px; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area { border-radius: 2px; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .photo-action { padding: 30px 20px 70px; border: 2px solid #9d9d9d; text-align: center; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .photo-action .take-photo, .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .photo-action .upload-photo { cursor: pointer; border-radius: 104px; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .photo-action .take-input, .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .photo-action .upload-input { position: absolute; width: 200px; height: 200px; display: block; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); background: #333; opacity: 0.01; cursor: pointer; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-preview { width: 100%; border: 2px solid #9d9d9d; margin-bottom: 20px; background: #eeeeee; position: relative; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-preview img.photo-uploaded { display: block; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-preview video { display: block; margin: 0 auto; width: 100%; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-preview .canvas-data { width: 640px; height: 480px; display: block; margin: 0 auto; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-actions { background: #ffffff; padding: 25px 20px 0; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-actions.slim { padding: 0; margin-bottom: -25px; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-actions a img { height: 110px; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-actions .snap-image { text-align: center; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-actions .snap-image .snap-photo { height: 110px; display: block; margin: 0 auto; cursor: pointer; border-radius: 55px; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-actions .snap-photo-again { height: 80px; padding-top: 30px; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-actions .btn .take-input, .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-actions .gallery-main-carousel__overlay-action .take-input, .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-actions .btn .upload-input, .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-actions .gallery-main-carousel__overlay-action .upload-input { position: absolute; width: 100%; height: 130%; display: block; background: #333; opacity: 0.01; cursor: pointer; top: 0; left: 0; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-processing { padding: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0, 0, 0, 0.5); } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-processing .checking-message { position: absolute; width: 100%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-processing div.title { color: #ffffff; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-processing .loading-image { position: relative; padding-top: 30px; margin-top: 20px; margin-bottom: 40px; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-processing .loading-image .lo-img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area div.title { color: #474747; font-weight: 900; font-size: 52px; letter-spacing: 1px; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area h3, .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area h4, .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area p { color: #474747; } .smrt01a-modal .smrt01a-modal__container .smrt01a-modal__close { position: absolute; z-index: 10; top: 0; right: 0; color: #ffffff; border-radius: 15px; width: 24px; height: 24px; text-align: center; margin-top: 15px; margin-right: 15px; } .smrt01a-modal p.hint { font-size: 16px; font-weight: 500; text-align: center; color: #3a3a3a; -ms-hyphens: none; } .smrt01a-modal .step .c-1-2 { width: 50%; display: inline-block; vertical-align: top; } .smrt01a-modal .step .c-1-4 { width: 25%; display: inline-block; vertical-align: top; } .smrt01a-modal .step .c-1-3 { width: 32.8%; display: inline-block; vertical-align: top; } .smrt01a-modal .photo-uploaded { width: 100%; } .smrt01a-modal.processing .modal-container { border-width: 1px; } .smrt01a-modal.processing .modal-container .modal-content { padding: 0; } .smrt01a-modal.processing .modal-container .modal-content .photo-area { border-radius: 7px; } @media screen and (max-width: 768px) { .smrt01a-modal .smrt01a-modal__container { width: 90%; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-preview video { height: 360px; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-actions { padding: 0; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area div.title { font-size: 36px; } .smrt01a-modal .step .c-1-2 p { margin-left: 25%; } .smrt01a-modal .step .c-1-3 { width: 49%; } .smrt01a-modal .action-icon { width: 120px; height: 120px; box-shadow: 0 4px 0 #c11d0d; } .smrt01a-modal .action-icon .action-icon-container img { width: 50%; } .smrt01a-modal .action-icon .action-icon-container span { font-size: 12px; margin-top: 5px; line-height: 12px; } } @media screen and (max-width: 480px) { .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area .image-preview video { height: 280px; } .smrt01a-modal .smrt01a-modal__container .modal-content .photo-area div.title { font-size: 28px; } .smrt01a-modal .step .c-1-2 { width: 100%; } .smrt01a-modal .step .c-1-2 p { margin-left: 0; } .smrt01a-modal .step .c-1-4 { width: 100%; } .smrt01a-modal .step .c-1-3 { width: 100%; } .smrt01a-modal.is-modal-verifying .smrt01a-modal__container { background: none; box-shadow: none; width: 100%; } .smrt01a-modal.is-modal-verifying .smrt01a-modal__container .modal-content { padding: 45px 20px; } .smrt01a-modal.is-modal-verifying .smrt01a-modal__container .modal-content .photo-area .image-preview { background: none; border: none; } .smrt01a-modal.is-modal-verifying .smrt01a-modal__container .modal-content .photo-area .image-preview img.photo-uploaded { display: none; } .smrt01a-modal.is-modal-verifying .smrt01a-modal__container .modal-content .photo-area .image-actions { background: none; padding: 0; } .smrt01a-modal.is-modal-verifying .smrt01a-modal__container .modal-content .photo-area .image-actions p { color: #ffffff; } .smrt01a-modal.is-modal-verifying .smrt01a-modal__container .modal-content .photo-area .image-processing { position: inherit; background: none; position: relative; top: 0; background: none; } .smrt01a-modal.is-modal-verifying .smrt01a-modal__container .modal-content .photo-area .image-processing .checking-message { position: relative; top: 0; transform: translateY(0%); -webkit-transform: translateY(0%); -ms-transform: translateY(0%); } .smrt01a-modal.is-modal-verifying .smrt01a-modal__container .modal-content .photo-area .image-processing div.title { font-size: 28px; } .smrt01a-modal.is-modal-verifying .smrt01a-modal__container .smrt01a-modal__close { display: none; } } *[dir="rtl"] .smrt01a-component .btn-container .btn.btn-has-icon, *[dir="rtl"] .smrt01a-component .btn-container .btn-has-icon.gallery-main-carousel__overlay-action { position: relative; } *[dir="rtl"] .smrt01a-component .btn-container .btn.btn-has-icon:after, *[dir="rtl"] .smrt01a-component .btn-container .btn-has-icon.gallery-main-carousel__overlay-action:after { left: 10px; right: auto; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); } *[dir="rtl"] .smrt01a-component .smrt01a-modal .smrt01a-modal__close { left: 0; right: auto; margin-right: 0; margin-left: 15px; } *[dir="rtl"] .smrt01a-component .step .c-1-3 .btn-container { text-align: right; } span.smrt01a-note { display: block; font-size: 9px; color: #3a3a3a; height: 12px; line-height: 10px; font-weight: 900; } div.modal-content .photo-preview { text-align: center; } div.modal-content .photo-preview a#demo-take-review { display: inline-block; } /* ======================================================================== COMPONENT: SOCIAL FEED - COMMON ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #ButtonLoadMore */ /* #FontStyle */ /* #FontWeight */ /* #Border */ /* #BackgroundColor */ /* :END VARIABLES */ .SocialFeed section.section-livefeed .hub-list article.content, .SocialFeed section.section-livefeed.light-bg .hub-list article.content { border: 1px solid #ececec; } .lf-hidden { height: 0; overflow: hidden; visibility: hidden; } .loading-livefyre-icon { animation-duration: 1s; animation-iteration-count: infinite; animation-name: sk-scaleout; animation-timing-function: ease-in-out; background-color: #009639; border-radius: 50%; height: 40px; margin: 0 auto; position: relative; width: 40px; } .loading-livefyre-icon html:not(.cssanimations) { animation: none; background-color: transparent; } @keyframes sk-scaleout { from { transform: scale(0); } 100% { -webkit-transform: scale(1); opacity: 0; transform: scale(1); } } html:not(.cssanimations) .loading-livefyre-icon { display: none; } html:not(.cssanimations) .loading-livefyre-icon img { display: block; } .section-media-wall.has-bg-img.dark-bg .headline { color: #ffffff; } .section-media-wall a:focus, .section-media-wall select:focus { outline: 1px dotted #b9b9b9; } .SocialFeed section { overflow: visible; } .SocialFeed section .content-body, .SocialFeed section .content-footer, .SocialFeed section .content-header { float: none; padding: 0; width: auto; } .SocialFeed section .content .content-footer { margin: 0 auto; max-width: 100%; padding: 0 22px 0 5%; } .SocialFeed section .content .content-author-avatar img { height: 48px; width: 48px; } .SocialFeed section .content .content-byline .content-source-logo { margin-top: 5px; } .SocialFeed section .content.content-tweet .content-byline .content-source-logo:hover { color: #55acee; } .SocialFeed section .content .content-featured { margin: 0 22px 0 4%; } .SocialFeed section .content.content-default .content-header .content-byline .content-author-username a, .SocialFeed section .lf-single-card .content.content-default .content-header .content-byline .content-author-username a { color: #474747; font-size: 12px; } .SocialFeed section .content.content-default.content-with-image .content-header .content-author-username a { color: #ffffff; } .SocialFeed section .content.content-default .content-footer a { color: #949494 !important; } .SocialFeed section .content.content-default .content-footer a:hover { hover: #55acee; } .SocialFeed .lf-mosaic-wrap header { background: transparent; border-top: none; float: none; height: auto; margin-top: 0; z-index: 1; } .SocialFeed .lf-mosaic-wrap .card-container .content-container .content-container-inner .content-body .content-body-content p a, .SocialFeed .lf-mosaic-wrap .card-container .content-container .content-container-inner .content-body .content-header-inner .user-info .user-name a { color: #009639 !important; } .SocialFeed .lf-mosaic-wrap .card-container .content-container .content-container-inner .content-body .footer { padding: 0 10px !important; } .flex-box .SocialFeed section.section-livefeed { background: transparent; } .SocialFeed section.section-livefeed .hub-wall-column { padding: 0 1vw; } .SocialFeed section.section-livefeed .hub-wall-column:first-child { padding-left: 2%; } .SocialFeed section.section-livefeed .hub-wall-column:last-child { padding-right: 2%; } .SocialFeed section.section-livefeed .hub-list article.content { border: none; margin-bottom: 2vw; } .SocialFeed section.section-livefeed .hub-list article.content .content-body { color: #474747; } .SocialFeed section.section-livefeed .hub-list-more, .SocialFeed section.section-livefeed .lf-input-btn { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 14px; line-height: 20px; color: #000000; border: 3px solid #ffffff; -moz-box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); backface-visibility: hidden; background: #ffffff; border-radius: 0; box-shadow: none; box-sizing: border-box; display: inline-block; margin-bottom: 20px; min-width: 200px; overflow: hidden; padding: 7px 10px; position: relative; text-transform: uppercase; transform: translateZ(0); vertical-align: middle; width: inherit; } .SocialFeed section.section-livefeed .hub-list-more:before, .SocialFeed section.section-livefeed .lf-input-btn:before { animation: button-mouseoff-fade 0.5s ease-out; animation-iteration-count: 1; background: #74aa50; border-radius: 100%; bottom: 6px; content: ""; height: 30px; left: 45%; opacity: 0; position: absolute; right: 0; -ms-transform: scale(20); transform: scale(20); width: 30px; z-index: -1; } .SocialFeed section.section-livefeed .hub-list-more:hover, .SocialFeed section.section-livefeed .lf-input-btn:hover { border-color: #74aa50; color: #ffffff; } .SocialFeed section.section-livefeed .hub-list-more:hover:before, .SocialFeed section.section-livefeed .lf-input-btn:hover:before { animation: button-hover-radial 0.6s ease-out; opacity: 1; } .SocialFeed section.section-livefeed .hub-list-more:active, .SocialFeed section.section-livefeed .lf-input-btn:active { border-bottom-width: 3px; transition: all 0.2 ease 0.2s; } .SocialFeed section.section-livefeed .hub-list-more.disabled, .SocialFeed section.section-livefeed .lf-input-btn.disabled { border-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.4); opacity: 1; } .SocialFeed section.section-livefeed .streamhub-wall-component > menu { text-align: center; } .SocialFeed section.section-livefeed .content.content-default .content-featured { background: none; color: #009639; display: -ms-inline-flexbox; display: inline-flex; padding: 0; } .SocialFeed section.section-livefeed .content.content-default .content-featured:before { -webkit-mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/featured-dot.svg); mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/featured-dot.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; background: #009639; content: ''; display: inline-block; height: 18px; margin-right: 6px; width: 12px; } .SocialFeed section.section-livefeed .content-default .content-author-avatar img { box-shadow: none; } .SocialFeed section.section-livefeed .content-default.content-with-image .content-header .content-author-avatar img, .SocialFeed section.section-livefeed .content-default.content-with-image .content-header .content-author-avatar img { box-shadow: none; } .SocialFeed section.section-livefeed .content-default .content-author-username, .SocialFeed section.section-livefeed .content-default .content-author-username a { color: #474747; } .SocialFeed section.section-livefeed .content .content-header .content-header-inner { padding: 10px 22px 0 4%; } .SocialFeed section.section-livefeed .content-default.content-with-image .content-header .content-author-name a:hover { color: #009639; } .SocialFeed section.section-livefeed .content-body-main p { text-align: left; } .SocialFeed section.section-livefeed .content-default .content-byline .content-author-name a, .SocialFeed section.section-livefeed .content-default a, .SocialFeed section.section-livefeed .content.content-default .content-header .content-byline .content-author-name a, .SocialFeed section.section-livefeed a { transition: all 0.2s ease-out; } .SocialFeed section.section-livefeed .content-default .content-byline .content-author-name a:hover, .SocialFeed section.section-livefeed .content-default a:hover, .SocialFeed section.section-livefeed .content.content-default .content-header .content-byline .content-author-name a:hover, .SocialFeed section.section-livefeed a:hover { font-style: normal; text-decoration: none; transition: all 0.1s ease-in; } .SocialFeed section.section-livefeed .content-default.content-with-image .content-header .content-byline .content-author-name a:hover { color: #ffffff; } .SocialFeed section.section-livefeed .lf-single-card .content-default.content-with-image .content-header .content-byline .content-author-name a:hover { color: #000000; } .SocialFeed section.section-livefeed .content-created-at a { color: #b9b9b9; } .SocialFeed section.section-livefeed .content .content-footer .hub-btn { padding: 0 2px; } .SocialFeed section.section-livefeed .content.content-tweet .hub-btn.hub-content-action-favorite > a, .SocialFeed section.section-livefeed .content.content-tweet .hub-btn.hub-content-action-reply > a, .SocialFeed section.section-livefeed .content.content-tweet .hub-btn.hub-content-action-retweet > a { font-size: 15px; } .SocialFeed section.section-livefeed .content .content-attachment > a > img, .SocialFeed section.section-livefeed .content .content-attachment > img, .SocialFeed section.section-livefeed .content .content-attachment-photo, .SocialFeed section.section-livefeed .content .content-attachment-video, .SocialFeed section.section-livefeed .content-default.content-with-image .content-attachment .content-attachment-frame, .SocialFeed section.section-livefeed .content-default.content-with-image .content-header, .SocialFeed section.section-livefeed .content-feed.content-with-image .content-attachment .content-attachment-photo, .SocialFeed section.section-livefeed .hub-list article.content, .SocialFeed section.section-livefeed .lf-thread-default.lf-thread-leaf[data-thread-nest-level='0'] > .lf-thread-root-content { border: 0; border-radius: 0; box-shadow: none; } .SocialFeed section.section-livefeed .hub-list article.content { border: 1px solid #ffffff; } .SocialFeed section.section-livefeed .lf-single-card .hub-list article.content { background: #ffffff; border-bottom: 2px solid #ffffff; } @media (min-width: 769px) { .SocialFeed section.section-livefeed .lf-single-card .hub-list article.content { background: #fafafa; border: 1px solid #ffffff; } } .SocialFeed section.section-livefeed .lf-single-card .content.content-default .content-body p { text-align: left; } .SocialFeed section.section-livefeed .lf-single-card .content .content-body, .SocialFeed section.section-livefeed .lf-single-card .content .content-header { padding: 10px 4%; } .SocialFeed section.section-livefeed .lf-single-card .content .content-header { padding-right: 22px; } .SocialFeed h2.headline:empty { display: none; } .SocialFeed .streamhub-wall-component .streamhub-media-wall-view { text-align: center; } .SocialFeed .streamhub-wall-component .streamhub-media-wall-view div.hub-list { text-align: left; } .hub-modals .hub-modal { z-index: 10000 !important; } .hub-modals .hub-modal .hub-modal-input-header { background: transparent; border: none; float: none; height: auto; overflow: inherit; position: inherit; width: 100%; z-index: auto; } .hub-modals .hub-modal section { float: none; height: auto; padding: 0; width: auto; } .TwoColumn + .SocialFeed .section-livefeed, .flex-grid + .SocialFeed .section-livefeed { background: #eaeaea; padding-top: 0; } .TwoColumn + .SocialFeed .section-livefeed .headline, .flex-grid + .SocialFeed .section-livefeed .headline { background: #ffffff; padding-bottom: 20px; width: 75%; } @media (min-width: 768px) { .TwoColumn + .SocialFeed .section-livefeed .headline, .flex-grid + .SocialFeed .section-livefeed .headline { min-height: 35px; } } .TwoColumn + .SocialFeed .section-media-wall.has-bg-img .section-livefeed, .flex-grid + .SocialFeed .section-media-wall.has-bg-img .section-livefeed { background: none; } /* Reset the position property to its initial default value */ .lf-app-embed a { position: static; } /* ======================================================================== COMPONENT: TERMOS AND CONDITIONS - COMMON ======================================================================== */ /* :START VARIABLES */ /* #Color */ /* #LineHeight */ /* :END VARIABLES */ /* 0px =========================== */ @media (min-width: 0) { .terms-text .btn.inactive, .terms-text .inactive.gallery-main-carousel__overlay-action { color: #898989; } .terms-text .btn.inactive:hover, .terms-text .inactive.gallery-main-carousel__overlay-action:hover { color: #009639; } .section-article.terms-text .article h1.headline { float: none; font-style: italic; font-weight: 900; line-height: 1.1; margin: auto auto 40px; width: 200px; } .section-article.terms-text .article p { text-align: center; } .section-article.terms-text .article p.btn-shelf-wrap { margin: 30px auto; } .section-article.terms-text .article p .btn, .section-article.terms-text .article p .gallery-main-carousel__overlay-action { margin: 0 6px 10px 0; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .section-article.terms-text .article h1.headline { padding: 0; } } /* =============================== */ /* _________________________________________ PROJECT: Fanta Generation II CONTENT: TV Main and Minor Events Video Styles. Also for Events Interstitial. ____________________________________________ */ .section-tv-video .carousel .item-txt h3 { margin: 0; padding: 0; font-size: 15px; text-transform: none; } .section-tv-video .carousel .item-txt p { font-size: 12px; } .section-tv-video .grid-3-col-slider .item { width: 230px; } .section-tv-video .grid-3-col-slider .item .item-txt { display: block; } .section-tv-video .btn, .section-tv-video .gallery-main-carousel__overlay-action { margin-top: 10px; } .major-event { background-size: contain; background-position: top center; background-repeat: no-repeat; } .major-event.section-tv-video h1 { color: #ffffff; width: 150px; } .tv-video { background: #ffffff; /*padding-bottom: 55%;*/ display: block; width: 95%; margin: auto; border: 10px solid #ffffff; position: relative; overflow: hidden; /* Safari/Chrome, other WebKit */ /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .tv-video > * { /*position:absolute;*/ width: 100%; height: 100%; display: block; } .tv-video.minor { width: 100%; } .tv-video-metadata { background: #fff; margin: 0; padding: 0 0 20px; } .tv-video-wrap { padding-bottom: 20px; } .tv-video-wrap h1 { text-transform: none; margin: 0 auto 20px; letter-spacing: -1px; font-size: 1.7em; padding-top: 10px; line-height: 1; } .tv-video-wrap h3 { font-size: 20px; } .tv-video-wrap ul { margin: 0 auto 20px; text-align: center; } .tv-video-wrap .tag { display: inline-block; background: #b9b9b9; font-size: 15px; text-transform: uppercase; font-weight: bold; padding: 8px 10px; margin: 4px 3px; } .tv-video-wrap p { width: 90%; margin: auto; line-height: 24px; } .tv.carousel { float: left; width: 100%; margin: 0; height: auto; } .tv .flex-direction-nav .flex-prev { left: 5px; } .tv .flex-direction-nav .flex-next { right: 5px; } .channels-nav { margin: auto; height: auto; padding-top: 10px; background: #b9b9b9; } .channels-nav li { margin-right: auto; } .channels-nav .flex-next, .channels-nav .flex-prev { display: none; } .channels-nav .playicon { height: 50px; width: 50px; background: url("../img/sprite-video-play.png") 0 -50px no-repeat; background-size: 50px 100px; position: absolute; margin-top: 20%; left: 50%; margin-left: -25px; z-index: 3; } .channels-nav .item-txt { background-color: #ffffff; } .channels-nav a { display: block; position: relative; width: 96%; margin: 0 2%; } .channels-nav a:hover .playicon { background-position: 0 0; } .channels-nav .channels-label { /*text-transform: uppercase;*/ padding: 10px 0 20px; font-size: 20px; } .channels-nav h3 { font-size: 16px; } .cctv p.billb-msg { text-transform: none; font-size: 33px; } .cctv .billb-figure { background-size: 100% auto; height: 118px; } .cctv .billb-wrap { height: auto; margin: auto; } .cctv .billb-wrap:hover p.billb-msg { color: #000000; cursor: default; } /* 0px =========================== */ @media (min-width: 0) { .flex-direction-nav { display: none; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { .flex-direction-nav { display: block; } .tv .flex-viewport { width: 85%; margin: 0 auto; } .cctv p.billb-msg { text-transform: none; font-size: 33px; } .cctv .billb-figure { background-size: 100% auto; height: 190px; } .cctv .billb-msg-wrap, .cctv .billb-wrap { height: auto; margin: auto; } .cctv .billb-wrap:hover p.billb-msg { color: #000000; cursor: default; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .section-tv-video { padding-bottom: 35px; } .section-tv-video .main { float: none; margin: auto; width: 743px; } .section-tv-video .items1.slides { width: 197px; } .section-tv-video .items2.slides { width: 402px; } .major-event { background-size: cover; padding-bottom: 35px; } .major-event.section-tv-video h1 { font-size: 66px; width: 430px; } .tv-video-wrap { padding: 8px 0 0; } .tv-video-wrap p { width: 70%; } .tv-video-wrap li { display: inline-block; } .tv.carousel { overflow: hidden; background: #ffffff; } .tv.carousel li { margin-right: 8px; } .tv.carousel li .item { width: 197px; } .tv.carousel li .item-txt { min-height: 60px; } .tv.carousel img { display: block; opacity: 1; cursor: pointer; } .channels-nav { overflow: hidden; background: #ffffff; width: 95%; } .channels-nav .slides { text-align: center; width: 607px; margin: auto; } .channels-nav .slides :last-child { margin-right: 0; } .channels-nav li { margin-right: 8px; } .channels-nav .item { width: 197px; } .channels-nav .item-txt { min-height: 60px; background: #ffffff; } .channels-nav img { display: block; opacity: 1; cursor: pointer; } .channels-nav a:hover .bar { background: #009639; transition: all 0.1s ease-in; } .channels-nav a:hover .item-txt { background: #ffffff; transition: all 0.1s ease-in; } .tv .channels, .tv .slides { margin-left: 9px; } .tv.channels-wrap .channels { margin-left: auto; } .tv .flex-viewport { width: 90%; margin: 0 auto; } .channels-label { display: none; } .section-article.cctv .article h1.headline { width: 500px; margin: auto; float: none; } section.section-hero.cctv .is-Table .Center-Block { width: 530px; } section.section-hero.cctv .is-Table .Center-Block .slide-logo { margin: auto; } .cctv .billb-figure { background-size: 100% auto; } .cctv .billb-wrap, .cctv .billb-wrap figure { height: 334px; } .cctv p.billb-msg { font-size: 66px; margin: auto; } .cctv .billb-msg-wrap { bottom: auto; padding-bottom: 30px; } .section-tv-video .tv.carousel a:hover .bar { background: #009639; transition: all 0.1s ease-in; } .section-tv-video .tv.carousel a:hover .item-txt { background: #b9b9b9; transition: all 0.1s ease-in; } .section-tv-video .tv.carousel .slides { width: 230px; } .section-tv-video .tv.carousel .flex-active-slide img { opacity: 1; cursor: default; } .section-tv-video .tv.carousel .flex-direction-nav a { margin: -60px 0 0; } .section-tv-video .tv.carousel .flex-active-slide .bar { background: #009639; } .section-tv-video .tv.carousel .flex-active-slide .item-txt { background: #b9b9b9; } .tv-video-wrap h1 { font-size: 30px; } } /* 1024px ======================== */ @media (min-width: 1024px) { .section-tv-video { /* .items1.slides { width: 197px; } .items2.slides { width: 402px; }*/ } .section-tv-video .main { width: 853px; margin: 0 auto; float: none; left: 0; } .section-tv-video .channels-nav, .section-tv-video .tv-video { width: 100%; } } /* 1200px ======================== */ @media (min-width: 1200px) { .section-tv-video .main { width: 853px; } } /* ======================================================================== COMPONENT: MAP LOCATION - COMMON ======================================================================== */ /*VARS*/ #maplocation-wrapper #location-wrapper #event-list li p { color: #000000; } #maplocation-wrapper #location-wrapper #event-list li p.event-col__event-status { color: #009639; } #maplocation-wrapper #location-wrapper #event-list li p.event-col__event-title { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: normal; color: #009639; } #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > .event-share .share-text { color: #009639; } #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > .btn, #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > .gallery-main-carousel__overlay-action { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; color: #ffffff; background-color: #009639; border-bottom-color: #00a9e0; } #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > .btn:hover, #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > .gallery-main-carousel__overlay-action:hover { background-color: #00a9e0; } #maplocation-wrapper #location-wrapper .event-list-paginated__buttons a { color: #ffffff; } #maplocation-wrapper #location-wrapper .event-list-paginated__buttons.jp-disabled a { color: #00a9e0; } #maplocation-wrapper #location-wrapper .event-list-paginated__buttons.jp-current a { color: #009639; } #maplocation-wrapper .component-map .map-marker .share-text, #maplocation-wrapper .component-map .map-marker p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; color: #000000; } #maplocation-wrapper .component-map .map-marker .share-text.title, #maplocation-wrapper .component-map .map-marker p.title { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: normal; color: #009639; } #maplocation-wrapper .component-map .map-marker .event-directionslink .directionslink { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; color: #009639; } #maplocation-wrapper .component-map .map-marker .event-directionslink .directionslink:hover, #maplocation-wrapper .component-map .map-marker .event-directionslink .directionslink:focus, #maplocation-wrapper .component-map .map-marker .event-directionslink .directionslink:active { color: #000000; } #maplocation-wrapper .component-map .main #search-result .close-btn { color: #000000; } #maplocation-wrapper .component-map .main #search-result .close-btn:hover, #maplocation-wrapper .component-map .main #search-result .close-btn:focus, #maplocation-wrapper .component-map .main #search-result .close-btn:active { color: #009639; } #maplocation-wrapper .component-map .main #search-result .search-content .title-wrapper p.title { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 600; font-style: normal; color: #009639; } #maplocation-wrapper .component-map .main #search-result .result-list li.details-item:hover { background-color: #ffffff; } #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .event-directionslink .directionslink { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; color: #009639; } #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .event-directionslink .directionslink:hover, #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .event-directionslink .directionslink:focus, #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .event-directionslink .directionslink:active { color: #000000; } #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .btn, #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .gallery-main-carousel__overlay-action { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; color: #ffffff; background-color: #009639; border-bottom-color: #00a9e0; } #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .btn:hover, #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .gallery-main-carousel__overlay-action:hover { background-color: #00a9e0; } #maplocation-wrapper .component-map .main #search-result .result-list li p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; } #maplocation-wrapper .component-map .main #search-result .result-list li p.title { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: normal; color: #009639; } #maplocation-wrapper .component-map .main #search-result .result-list li p.status { color: #009639; } #maplocation-wrapper .component-map .main #search-result .result-list li p.share-text { color: #009639; } /* ======================================================================== COMPONENT: MAP WITH LOCATION ======================================================================== */ /*VARS*/ body #maplocation-wrapper .component-map h2.headline, body #maplocation-wrapper .component-location h2.headline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; font-size: 16px; color: #3a3a3a; } body #maplocation-wrapper #location-wrapper #event-list li p { color: #000000; } body #maplocation-wrapper #location-wrapper #event-list li p.event-col__event-status { color: #009639; } body #maplocation-wrapper #location-wrapper #event-list li p.event-col__event-title { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: normal; color: #009639; } body #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > .event-share .share-text { color: #009639; } body #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > .btn, body #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > .gallery-main-carousel__overlay-action { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; color: #ffffff; background-color: #009639; border-bottom-color: #009639; min-width: 0; } body #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > .btn:hover, body #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > .gallery-main-carousel__overlay-action:hover { background-color: #006326; border-color: #006326; color: #ffffff; } body #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > .btn[href^="http://"], body #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > [href^="http://"].gallery-main-carousel__overlay-action, body #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > .btn[href^="https://"], body #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > [href^="https://"].gallery-main-carousel__overlay-action { background-color: #009639; border-color: #009639; color: #ffffff; } body #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > .btn[href^="http://"]:hover, body #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > [href^="http://"].gallery-main-carousel__overlay-action:hover, body #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > .btn[href^="https://"]:hover, body #maplocation-wrapper #location-wrapper #event-list li .event-col.event-status > [href^="https://"].gallery-main-carousel__overlay-action:hover { background-color: #006326; border-color: #006326; color: #ffffff; } body #maplocation-wrapper #location-wrapper #event-list li .event-col .directionslink { color: #009639; } body #maplocation-wrapper #location-wrapper .event-list-paginated__buttons:hover { background: #00c94c; } body #maplocation-wrapper #location-wrapper .event-list-paginated__buttons a { color: #ffffff; } body #maplocation-wrapper #location-wrapper .event-list-paginated__buttons.jp-disabled:hover { background: transparent; } body #maplocation-wrapper #location-wrapper .event-list-paginated__buttons.jp-disabled a { color: #00c94c; } body #maplocation-wrapper #location-wrapper .event-list-paginated__buttons.jp-current:hover { background: #ffffff; } body #maplocation-wrapper #location-wrapper .event-list-paginated__buttons.jp-current a { color: #00c94c; } body #maplocation-wrapper .component-map .map-marker .share-text, body #maplocation-wrapper .component-map .map-marker p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; color: #000000; } body #maplocation-wrapper .component-map .map-marker .share-text.title, body #maplocation-wrapper .component-map .map-marker p.title { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: normal; color: #009639; } body #maplocation-wrapper .component-map .map-marker .event-directionslink .directionslink { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; color: #009639; } body #maplocation-wrapper .component-map .map-marker .event-directionslink .directionslink:hover, body #maplocation-wrapper .component-map .map-marker .event-directionslink .directionslink:focus, body #maplocation-wrapper .component-map .map-marker .event-directionslink .directionslink:active { color: #000000; } body #maplocation-wrapper .component-map .main #search-result .close-btn { color: #000000; } body #maplocation-wrapper .component-map .main #search-result .close-btn:hover, body #maplocation-wrapper .component-map .main #search-result .close-btn:focus, body #maplocation-wrapper .component-map .main #search-result .close-btn:active { color: #009639; } body #maplocation-wrapper .component-map .main #search-result .search-content .title-wrapper p.title { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: normal; color: #009639; } body #maplocation-wrapper .component-map .main #search-result .result-list li.details-item:hover { background-color: #ffffff; } body #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .event-directionslink .directionslink { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; color: #009639; } body #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .event-directionslink .directionslink:hover, body #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .event-directionslink .directionslink:focus, body #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .event-directionslink .directionslink:active { color: #000000; } body #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .btn, body #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .gallery-main-carousel__overlay-action { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; color: #ffffff; background-color: #009639; border-bottom-color: #009639; min-width: 0; } body #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .btn:hover, body #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .gallery-main-carousel__overlay-action:hover { background-color: #006326; border-color: #006326; color: #ffffff; } body #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .btn[href^="http://"], body #maplocation-wrapper .component-map .main #search-result .result-list li > div > div [href^="http://"].gallery-main-carousel__overlay-action, body #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .btn[href^="https://"], body #maplocation-wrapper .component-map .main #search-result .result-list li > div > div [href^="https://"].gallery-main-carousel__overlay-action { background-color: #009639; border-color: #009639; color: #ffffff; } body #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .btn[href^="http://"]:hover, body #maplocation-wrapper .component-map .main #search-result .result-list li > div > div [href^="http://"].gallery-main-carousel__overlay-action:hover, body #maplocation-wrapper .component-map .main #search-result .result-list li > div > div .btn[href^="https://"]:hover, body #maplocation-wrapper .component-map .main #search-result .result-list li > div > div [href^="https://"].gallery-main-carousel__overlay-action:hover { background-color: #006326; border-color: #006326; color: #ffffff; } body #maplocation-wrapper .component-map .main #search-result .result-list li p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; } body #maplocation-wrapper .component-map .main #search-result .result-list li p.title { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: normal; color: #009639; } body #maplocation-wrapper .component-map .main #search-result .result-list li p.status { color: #009639; } body #maplocation-wrapper .component-map .main #search-result .result-list li p.share-text { color: #009639; } /* ======================================================================== COMPONENT: PERSONALIZED IMAGE - COMMON ======================================================================== */ /* :END VARIABLES */ section.component-personalized-image p.subheadlinesized { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 16px; color: #000000; } @media (max-width: 768px) { section.component-personalized-image p.subheadlinesized { font-size: 12px; } } @media (max-width: 480px) { section.component-personalized-image p.subheadlinesized { font-size: 13px; } } section.component-personalized-image h2 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; font-size: 30px; line-height: 1.2em; color: #3a3a3a; } @media (max-width: 768px) { section.component-personalized-image h2 { font-style: italic; font-size: 28px; line-height: 1.2em; } } @media (max-width: 480px) { section.component-personalized-image h2 { font-style: italic; font-size: 28px; line-height: 1.2em; } } section.component-personalized-image h3 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; font-size: 20px; line-height: 1.2em; color: #009639; } @media (max-width: 768px) { section.component-personalized-image h3 { font-style: italic; font-size: 20px; line-height: 1.2em; } } @media (max-width: 480px) { section.component-personalized-image h3 { font-style: italic; font-size: 20px; line-height: 1.2em; } } section.component-personalized-image p.legal-acceptance { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 12px; color: #000000; } section.component-personalized-image a.btn, section.component-personalized-image a.gallery-main-carousel__overlay-action { background-color: #00a9e0; border: none; border-top-width: 0; color: #ffffff; } section.component-personalized-image a.btn:before, section.component-personalized-image a.gallery-main-carousel__overlay-action:before { background-color: #003087; color: #ffffff; } section.component-personalized-image a.btn:active, section.component-personalized-image a.gallery-main-carousel__overlay-action:active { background-color: #003087; color: #ffffff; transition: all 0.2 ease 0.2s; } /*SECTIONS*/ /* ======================================================================== MASTERBRAND: SECTION ======================================================================== */ /* ======================================================================== SECTIONS: ARTICLE - COMMON ======================================================================== */ /* :START VARIABLES */ /* #FontFamily*/ /* #FontSize */ /* #FontFamily */ /* #Color */ /* #FontStyle */ /* #FontWeight */ /* #LineHeight */ /* #Background*/ /* #BorderColor*/ /* :END VARIABLES */ .article-headline { font-size: 50px; font-weight: 900; line-height: 1em; text-transform: none; } .h-recipe .headline { text-transform: none; } .section-article .article.h-recipe h1.headline, .section-article .article.h-recipe h2.headline, .section-article .article.h-recipe p.recipe-intro { padding: 10px 15% 0; text-align: center; width: 70%; } .section-article .article.h-recipe h2 { float: left; font-size: 20px; font-weight: 900; letter-spacing: 0; margin: 0 0 20px; text-align: center; width: 100%; } @media (min-width: 1024px) { .section-article .article.h-recipe h2 { line-height: 50px; } } .h-recipe h2, .h-recipe h3, .h-recipe h4 { padding-top: 2em; } .h-recipe .p-ingredient { display: block; line-height: 1.4em; width: 100%; } .h-recipe .p-ingredient span { display: inline-block; font-weight: bold; padding-right: 2%; text-align: right; vertical-align: top; width: 48%; } .h-recipe .p-ingredient span:first-child + span { font-weight: normal; padding-right: 0; text-align: left; width: 50%; } .section-article .h-recipe ol, .section-article .h-recipe ul { padding: 0; } .section-article .h-recipe ol li { font-weight: bold; list-style-position: inside; list-style-type: decimal; margin-bottom: 1.5em; } .section-article .h-recipe ol li p { display: inline; float: none; font-weight: normal; margin: 0; padding: 0; width: auto; } .has-bg-img.dark-bg.section-article .main h1, .has-bg-img.dark-bg.section-article .main h2, .has-bg-img.dark-bg.section-article .main h3, .has-bg-img.dark-bg.section-article .main h4, .has-bg-img.dark-bg.section-article .main h5, .has-bg-img.dark-bg.section-article .main h6, .has-bg-img.dark-bg.section-article .main p, .has-bg-img.light-bg.section-article .main h1, .has-bg-img.light-bg.section-article .main h2, .has-bg-img.light-bg.section-article .main h3, .has-bg-img.light-bg.section-article .main h4, .has-bg-img.light-bg.section-article .main h5, .has-bg-img.light-bg.section-article .main h6, .has-bg-img.light-bg.section-article .main p, .has-bg-img.mild-bg.section-article .main h1, .has-bg-img.mild-bg.section-article .main h2, .has-bg-img.mild-bg.section-article .main h3, .has-bg-img.mild-bg.section-article .main h4, .has-bg-img.mild-bg.section-article .main h5, .has-bg-img.mild-bg.section-article .main h6, .has-bg-img.mild-bg.section-article .main p { color: #474747 !important; } .has-bg-img.section-article.is-bg .article { margin-top: 25vw; } @media (min-width: 481px) { .has-bg-img.section-article.is-bg .article { margin-top: 30vw; } } @media (max-width: 449px) { .has-bg-img.section-article.is-mobilebgswap .article { margin-top: 25vw; } } .has-bg-img.section-article { background-size: 100% auto; } @media (min-width: 768px) { .section-article { top: 0; } } /*================= Table / Table Saw styles =================*/ /* Much like the styles for .section-article .article h2 Abusing !important here so that we don't need to worry about stylesheet import order. */ .tablesaw caption, table caption { color: #000000; filter: none !important; font-size: 20px; font-weight: 700; letter-spacing: -0.04em; line-height: 26px; margin: 0 0 20px !important; opacity: 1 !important; text-align: center !important; width: 100%; } .tablesaw caption.left, table caption.left { text-align: left; } .dark-bg .article .tablesaw, .dark-bg .textwell-content .tablesaw, .light-bg .article .tablesaw, .light-bg .textwell-content .tablesaw, .mild-bg .article .tablesaw, .mild-bg .textwell-content .tablesaw { border: 1px solid #ffffff; } .dark-bg .article .tablesaw tbody, .dark-bg .article .tablesaw td, .dark-bg .article .tablesaw th, .dark-bg .article .tablesaw th, .dark-bg .textwell-content .tablesaw tbody, .dark-bg .textwell-content .tablesaw td, .dark-bg .textwell-content .tablesaw th, .dark-bg .textwell-content .tablesaw th, .light-bg .article .tablesaw tbody, .light-bg .article .tablesaw td, .light-bg .article .tablesaw th, .light-bg .article .tablesaw th, .light-bg .textwell-content .tablesaw tbody, .light-bg .textwell-content .tablesaw td, .light-bg .textwell-content .tablesaw th, .light-bg .textwell-content .tablesaw th, .mild-bg .article .tablesaw tbody, .mild-bg .article .tablesaw td, .mild-bg .article .tablesaw th, .mild-bg .article .tablesaw th, .mild-bg .textwell-content .tablesaw tbody, .mild-bg .textwell-content .tablesaw td, .mild-bg .textwell-content .tablesaw th, .mild-bg .textwell-content .tablesaw th { border: 1px solid #ffffff; } .dark-bg .article .tablesaw td, .dark-bg .textwell-content .tablesaw td, .light-bg .article .tablesaw td, .light-bg .textwell-content .tablesaw td, .mild-bg .article .tablesaw td, .mild-bg .textwell-content .tablesaw td { background: #eaeaea; } .dark-bg .article .tablesaw tr th, .dark-bg .article .tablesaw tr:first-child th, .dark-bg .textwell-content .tablesaw tr th, .dark-bg .textwell-content .tablesaw tr:first-child th, .light-bg .article .tablesaw tr th, .light-bg .article .tablesaw tr:first-child th, .light-bg .textwell-content .tablesaw tr th, .light-bg .textwell-content .tablesaw tr:first-child th, .mild-bg .article .tablesaw tr th, .mild-bg .article .tablesaw tr:first-child th, .mild-bg .textwell-content .tablesaw tr th, .mild-bg .textwell-content .tablesaw tr:first-child th { border: 1px solid #ffffff; font-family: inherit; font-weight: bold; text-shadow: none; } .section-article { float: none; overflow: hidden; text-align: center; width: 100%; } .section-article li, .section-article p { font-weight: 400; line-height: 1.5em; text-align: left; } .section-article a { color: #009639; } .section-article a:hover { color: #006342; } .section-article a.btn, .section-article a.gallery-main-carousel__overlay-action { color: #ffffff; } .section-article a.btn:hover, .section-article a.gallery-main-carousel__overlay-action:hover { color: #ffffff; } .section-article a[href*="http"] { color: #00a9e0; } .section-article a[href*="http"]:hover { color: #003087; } .section-article a[href*="http"].btn, .section-article a[href*="http"].gallery-main-carousel__overlay-action { color: #ffffff; } .section-article a[href*="http"].btn:hover, .section-article a[href*="http"].gallery-main-carousel__overlay-action:hover { color: #ffffff; } .section-article h3 { margin: 0 auto 0.5em; } .section-article ol, .section-article ul { clear: both; padding: 0 0 16px 1px; } .section-article ol li, .section-article ul li { list-style-position: inside; padding: 0 0 0.5em; } .section-article .h-recipe li { padding: 0; } .section-article ul li { list-style-type: disc; } .section-article ol li { list-style-type: decimal; } @media (max-width: 449px) { .section-article.has-bg-img.is-mobilebgswap .article { border-top: 2vw solid #009639; } } .section-article.has-bg-img.is-bg .article { border-top: 2vw solid #009639; } .article table, .textwell-content table { border-collapse: collapse; line-height: inherit; margin-bottom: 1.5em; /* Add class when even-width columns are desired. */ } .article table.even-cols, .textwell-content table.even-cols { table-layout: fixed; } .article td, .textwell-content td { background: #b9b9b9; border: 1px solid #ffffff; } .article .tablesaw th, .article th, .textwell-content .tablesaw th, .textwell-content th { background: #b9b9b9; font-size: 16px; vertical-align: middle; } .article .tablesaw th, .article .tablesaw td, .article .tablesaw th, .article .tablesaw-cell-label, .textwell-content .tablesaw th, .textwell-content .tablesaw td, .textwell-content .tablesaw th, .textwell-content .tablesaw-cell-label { color: #006342; font-family: inherit; font-size: 16px; } @media (min-width: 480px) { .article .tablesaw img, .textwell-content .tablesaw img { max-width: inherit; } } @media (max-width: 480px) { .article .tablesaw img, .textwell-content .tablesaw img { max-width: 100%; } } .article .tablesaw td, .article .tablesaw th, .textwell-content .tablesaw td, .textwell-content .tablesaw th { color: #474747 !important; line-height: 1.5; text-transform: none; } .article .tablesaw tr th, .article .tablesaw tr:first-child th, .textwell-content .tablesaw tr th, .textwell-content .tablesaw tr:first-child th { border-right-color: #ffffff; font-family: inherit; font-weight: bold; text-shadow: none; } .article .tablesaw .tablesaw-stack td .tablesaw-cell-label, .article .tablesaw .tablesaw-stack th .tablesaw-cell-label, .textwell-content .tablesaw .tablesaw-stack td .tablesaw-cell-label, .textwell-content .tablesaw .tablesaw-stack th .tablesaw-cell-label { display: block; text-transform: none; } .article .tablesaw tbody tr, .article .tablesaw-stack tbody tr, .textwell-content .tablesaw tbody tr, .textwell-content .tablesaw-stack tbody tr { border-bottom: none; } .article th, .article tbody, .article tbody tr, .textwell-content th, .textwell-content tbody, .textwell-content tbody tr { border: none; } .article .tablesaw-stack tbody tr, .textwell-content .tablesaw-stack tbody tr { border: none; } @media only all { .tablesaw-stack td .tablesaw-cell-label, .tablesaw-stack th .tablesaw-cell-label { display: block !important; text-transform: none; } .tablesaw td, .tablesaw th { text-transform: none; } .ArticleTextwell .tablesaw td.hacked-tablesaw-empty-cell, .article .tablesaw td.hacked-tablesaw-empty-cell { display: none; } } @media (min-width: 40em) { .ArticleTextwell .tablesaw td.hacked-tablesaw-empty-cell, .article .tablesaw td.hacked-tablesaw-empty-cell { display: table-cell; } } /* 0px =========================== */ @media (min-width: 0) { .section-article .article { background: #ffffff; float: none; height: auto; margin: 0 auto; padding: 0; text-align: center; width: 88%; } .section-article .article img { max-width: 100%; } .section-article .article h2.headline { font-size: 30px; font-style: italic; font-weight: 900; margin: 3vw auto; width: 98%; } .section-article .article h3.subheadline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 16px; margin: 0 auto 32px; width: 75%; } .section-article .article p { float: left; margin-bottom: 10px; text-align: left; width: 100%; } .section-article .article p.center { text-align: center; } .section-article .article li, .section-article .article p { font-size: 16px; } .section-article .h-recipe h2, .section-article .h-recipe h4 { font-size: 20px; margin-bottom: 20px; padding-top: 2em; } } @media (min-width: 0) and (max-width: 480px) { .section-article.has-bg-img.mild-bg .main { margin: 5%; width: 90%; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) and (max-width: 1024px) { .section-article.has-bg-img.mild-bg .main { margin-left: 7%; width: 86%; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .section-article .article { position: relative; } .section-article .article h2.headline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; font-size: 36px; color: #474747 !important; float: none; margin: 3vw auto 20px; width: 75%; } .section-article .article div { margin: 0 auto; width: 75%; } .section-article .article h3.headline { letter-spacing: -0.04em; padding: 0 0 25px; text-transform: none; } .section-article .article h3.subheadline { margin: 0 auto 20px; width: 75%; } .section-article .article p.center { text-align: center; } .section-article.has-bg-img.is-bg .article { border-top: 2vw solid #009639; } } /* =============================== */ /* 1024px ======================== */ @media (min-width: 1024px) { .section-article .article { position: relative; } .section-article .article h2.headline { font-size: 54px; } .section-article .article h3.subheadline { font-size: 28px; } .section-article.has-bg-img.is-bg .article { border-top: 3vw solid #009639; } } .ArticleTier .section-article .article h2.headline { margin-top: 5px; } @media (min-width: 0) { .grid-2-col-slider { float: left; margin: 0 11.71875%; width: 76.5625%; } .grid-2-col-slider .flex-control-nav { display: none; } .grid-2-col-slider .item.flex-active-slide a .item-txt { display: block; } .grid-2-col-slider .item:nth-child(1) { margin-left: 0; } .grid-2-col-slider .item:nth-child(2) { margin-right: 0; } .grid-2-col-slider .item { float: left; margin: 0 0 20px; min-height: 275px; width: 100%; } .grid-2-col-slider .item a { display: block; margin: 0; overflow: hidden; position: relative; width: 96%; transition: all 0.2s ease-out; } .grid-2-col-slider .item a img { display: block; float: left; margin: 0 auto; width: 100%; } .grid-2-col-slider .item a .bar { content: ""; height: 10px; position: absolute; width: 100%; transition: all 0.2s ease-out; } .grid-2-col-slider .item a .item-txt { display: none; float: left; height: auto; margin: 10px auto; padding: 10px; text-align: center; width: 100%; transition: all 0.2s ease-out; } .grid-2-col-slider .item a .item-txt h1, .grid-2-col-slider .item a .item-txt h2, .grid-2-col-slider .item a .item-txt h3, .grid-2-col-slider .item a .item-txt h4, .grid-2-col-slider .item a .item-txt h5, .grid-2-col-slider .item a .item-txt h6 { float: left; height: auto; width: 100%; } .grid-2-col-slider .item a .item-txt h3 { margin: 0 0 5px; } .grid-2-col-slider .item a .item-txt p { color: #006342; font-size: 12px; line-height: 17px; text-align: center; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { .grid-2-col-slider { margin: 0 auto; text-align: center; width: 100%; } .grid-2-col-slider ul.slides { margin: 0 auto; width: 460px; } .grid-2-col-slider .item-txt h3 { font-size: 14px; } .grid-2-col-slider .item-txt p { font-size: 12px; } .grid-2-col-slider .item { margin: 0 1.5% 20px; width: 200px; } .grid-2-col-slider .item a { margin: 0 auto; width: 100%; } .grid-2-col-slider .item a .item-txt { display: block; } .grid-2-col-slider .item:nth-child(1) { margin-left: 10px; } .grid-2-col-slider .item:nth-child(2) { margin-right: 0; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .grid-2-col-slider .item-txt h3 { font-size: 20px; } .grid-2-col-slider .item-txt p { font-size: 12px; } } /* =============================== */ /* 1024px ======================== */ @media (min-width: 1024px) { .grid-2-col-slider .item { margin: 0 1.67% 20px; } .grid-2-col-slider .item:nth-child(1) { margin-left: 10px; } .grid-2-col-slider .item:nth-child(2) { margin-right: 0; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .grid-2-col-slider .item { margin: 0 2.98914% 20px; } .grid-2-col-slider .item:nth-child(1) { margin-left: 14px; } .ie9 .grid-2-col-slider .item { margin: 0 2% 20px; } .ie9 .grid-2-col-slider .item:nth-child(1) { margin-left: 4%; } } /* =============================== */ /* ======================================================================== SECTIONS: Circle CONTENT: Circle image frames elements ======================================================================== */ /* :START VARIABLES */ /* #FontFamily*/ /* #Color */ /* #Background*/ /* #FontStyle*/ /* #FontWeight*/ /* :END VARIABLES */ .section-3-col-slider h2.headline, .section-circles h2.headline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; } .section-3-col-slider .elm-body h3, .section-3-col-slider .item-txt h3, .section-circles .elm-body h3, .section-circles .item-txt h3 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; } .section-3-col-slider .elm-body h3, .section-3-col-slider .item-txt h3, .section-circles .elm-body h3, .section-circles .item-txt h3 { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 900; font-style: italic; color: #474747; } .section-3-col-slider .elm-body p, .section-3-col-slider .item-txt p, .section-circles .elm-body p, .section-circles .item-txt p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; } /* 0px =========================== */ @media (min-width: 0) { .elm-grid-3 { float: left; height: auto; margin: 0 12.5%; padding: 0; width: 75%; } .elm-grid-3 > .slides > li.item div.elm-img { overflow: hidden; } .elm-grid-3 div.elm-circle .elm-img { margin: 0 auto 20%; overflow: hidden; } .elm-grid-3 .flex-control-nav { display: none; } .elm-grid-3 p { margin: 0 auto; width: 100%; } .elm-grid-3 .elm-body { background: #ffffff; max-width: 80%; position: relative; margin: -35% auto 16px auto; } } @media (min-width: 0) and (min-width: 481px) { .elm-grid-3 .elm-body { max-width: 92%; } } @media (min-width: 0) and (min-width: 1200px) { .TwoColumn .elm-grid-3 .elm-body { margin: -35% auto 16px auto; } } @media (min-width: 0) and (min-width: 768px) { .TwoColumn .f-4 .elm-grid-3 .elm-body { margin: -26% auto 16px auto; } } @media (min-width: 0) { .elm-grid-3 .elm-circle div .elm-img { cursor: default; } .elm-grid-3 .flex-active-slide .elm-body { display: block; transition: all 0.1s ease-in; } .elm-grid-3 .flex-active-slide .elm-body h1, .elm-grid-3 .flex-active-slide .elm-body h2, .elm-grid-3 .flex-active-slide .elm-body h3, .elm-grid-3 .flex-active-slide .elm-body h4, .elm-grid-3 .flex-active-slide .elm-body h5, .elm-grid-3 .flex-active-slide .elm-body h6 { transition: all 0.1s ease-in; } .elm-grid-3 .flex-active-slide .elm-body p { color: #474747; transition: all 0.1s ease-in; } .recipes-circles .elm-grid-3 .elm-body { max-width: 100%; } .recipes-circles .elm-grid-3 p { margin: 0 auto; width: 100%; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { .elm-grid-3 .slides { float: left; height: auto; margin: 0; padding: 0; width: 100%; } .elm-grid-3 .slides .item { float: left; margin: 0 0 16px; padding: 0; } .elm-grid-3 .slides .item:nth-child(3n+1) { margin-left: 10px; } .elm-grid-3 .slides .item:nth-child(3n) { margin-right: 10px; } .elm-grid-3 .slides .item:first-child { margin-left: 0; } .elm-grid-3 .slides .item .elm-body { box-sizing: border-box; display: block; float: none; } .elm-grid-3 .slides .item .elm-body p { float: none; } .elm-grid-3 .slides .item:nth-child(3n+1) { clear: left; } .elm-grid-3 div.elm-circle .elm-img { margin: 0 auto 20%; overflow: hidden; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .section-3-col-slider .elm-body h3, .section-3-col-slider .elm-body p, .section-3-col-slider .item-txt h3, .section-3-col-slider .item-txt p, .section-circles .elm-body h3, .section-circles .elm-body p, .section-circles .item-txt h3, .section-circles .item-txt p { text-align: left; margin-left: 0; margin-right: 0; } .elm-grid-3 { margin: 0; width: 100%; } .elm-grid-3 .slides .item { width: calc((100% - 18px ) /3); } .elm-grid-3 .slides .item:nth-child(3n+1) { margin: 0; padding: 0; } .elm-grid-3 .slides .item:nth-child(3n+2) { margin-left: 9px; margin-right: 9px; padding: 0; } .elm-grid-3 .slides .item:nth-child(3n) { margin: 0; padding: 0; } .elm-grid-3 .slides .item .elm-body { float: none; min-height: 110px; width: 100%; } .TwoColumn .f-3 .elm-grid-3 .slides .item .elm-body, .TwoColumn .f-1 .elm-grid-3 .slides .item .elm-body { width: 85%; margin: -35% auto 16px auto; } } @media (min-width: 768px) and (min-width: 768px) { .TwoColumn .f-3 .elm-grid-3 .slides .item .elm-body, .TwoColumn .f-1 .elm-grid-3 .slides .item .elm-body { margin: -26% auto 16px auto; } } @media (min-width: 768px) { .elm-grid-3 .slides .item .elm-body p { float: none; } .elm-grid-3 .slides .item div.elm-circle .elm-img { margin: 0 auto 20%; overflow: hidden; } .recipes-circles .elm-body { float: none; max-width: 200px; padding: 10px; width: 100%; } } /* =============================== */ /* 1280px ======================== */ @media (min-width: 1280px) { /* IE10+ CSS */ .elm-grid-3 .slides .item { width: calc((100% - 20px ) /3); } } /* =============================== */ /* 1024px ======================== */ @media (min-width: 1024px) { .elm-grid-3 .slides .item div.elm-circle .elm-img { margin: 0 auto 20%; overflow: hidden; } .elm-grid-3 .slides .item .elm-body { min-height: 100px; padding: 20px; } } /* =============================== */ /* 1200px ======================== */ @media (min-width: 1200px) { .elm-grid-3 .slides .item div.elm-circle .elm-img { margin: 0 auto 20%; overflow: hidden; } } /* =============================== */ /* =============================== */ /* only 2 items */ .items2.elm-grid-3 .item:first-child { margin-left: 16%; } @media (min-width: 0) { .items2.elm-grid-3 .item:first-child { margin-left: 0; } } @media (min-width: 481px) { .items2.elm-grid-3 .item:first-child { margin-left: 0; } } @media (min-width: 768px) { .items2.elm-grid-3 .item:first-child { margin-left: 16%; } } @media (min-width: 1200px) { .section-circles .main .items2.elm-grid-3 .item:first-child { margin-left: 17%; } } .ie8 .section-circles .main .items2.elm-grid-3 .item:first-child { margin-left: 17%; } /* =============================== */ /* =============================== */ /* only 1 items */ .items1.elm-grid-3 .item:first-child { margin-left: 36%; } @media (min-width: 0) { .items1.elm-grid-3 .elm-body { display: block; width: 92%; } .items1.elm-grid-3 { float: left; margin: 0; width: 100%; } .items1.elm-grid-3 .item { margin: 0; width: 100%; } .items1.elm-grid-3 .item a { margin: 0; width: 100%; } .items1 .item a .item-txt { background: #fff; display: block; } .items1 .item a .item-txt h3 { color: #009639; } .items1.elm-grid-3 .item:first-child { margin-left: 0; } } @media (min-width: 481px) { .items1.elm-grid-3 .item:first-child { margin-left: 36%; width: 26%; } .items1 .item a .item-txt { background: transparent; } .items1 .item a .item-txt h3 { color: #474747; } } @media (min-width: 1200px) { .section-circles .main .items1.elm-grid-3 .item:first-child { margin-left: 36%; } } .ie8 .section-circles .main .items1.elm-grid-3 .item:first-child { margin-left: 32%; } /* =============================== */ .f-4 .section-circles .headline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; color: #474747; } .f-4 .section-circles .btn-more-container { margin-top: 0; } /* ======================================================================== SECTIONS: Featured CONTENT: 2 Column Grid, no slider. NOTES: Primarily used on media pages. ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #FontFamily */ /* #Color */ /* #FontWeight */ /* #FontStyle */ /* #LineHeight */ /* #Border */ /* #BackgroundColor */ /* :END VARIABLES */ .section-grid-2-col { padding: 0 auto; } .section-grid-2-col .grid-wrap:after { clear: both; content: ""; display: block; } .section-grid-2-col .grid-2-col { margin: auto 2%; } .section-grid-2-col ul:after { clear: both; content: ""; display: block; } .section-grid-2-col .item { margin-bottom: 16px; min-height: 275px; width: 100%; } .section-grid-2-col .item a:not(.btn-tile), .section-grid-2-col .item div.no-hover:not(.btn-tile) { display: block; margin: 0; overflow: hidden; position: relative; width: 100%; transition: all 0.2s ease-out; } .section-grid-2-col .item .item-txt p { clear: both; float: none; margin: auto; width: 80%; } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { .section-grid-2-col .item { width: calc((100% - 10px) / 2); } .section-grid-2-col .item .item-txt h3, .section-grid-2-col .item .item-txt p { text-align: left; } .section-grid-2-col .item .item-txt p { width: 100%; } .section-grid-2-col .item:nth-child(2n+1) { float: left; margin-left: 0; } .section-grid-2-col .item:nth-child(2n+2) { float: right; margin-right: 0; } .section-grid-2-col .grid-2-col { margin: 0; } .light-bg .section-grid-2-col .item.hover a .item-txt, .light-bg .section-grid-2-col .item:hover a .item-txt { background: #ffffff; } } /* 768px ======================== */ @media (min-width: 768px) { .section-grid-2-col .main { float: none; left: auto; margin: 0 auto; } } /* 1200px ======================== */ @media (min-width: 1200px) { .section-grid-2-col .grid-2-col { margin: 0; } .section-grid-2-col .grid-2-col ul { margin: 0; } .section-grid-2-col .grid-2-col ul .item, .section-grid-2-col .grid-2-col ul a:not(.btn-tile) { margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 16px; } .section-grid-2-col .grid-2-col ul .item .item-txt h3, .section-grid-2-col .grid-2-col ul .item .item-txt p, .section-grid-2-col .grid-2-col ul a:not(.btn-tile) .item-txt h3, .section-grid-2-col .grid-2-col ul a:not(.btn-tile) .item-txt p { text-align: left; height: auto; width: 100%; } } /* =============================== */ /* =============================== */ /* only 1 items */ .items1.grid-2-col .item:first-child { margin-left: 29%; } @media (min-width: 0) { .items1.grid-2-col { float: left; margin: 0; width: 100%; } .items1.grid-2-col .item { margin: 0; width: 100%; } .items1.grid-2-col .item a { margin: 0; width: 100%; } .items1.grid-2-col .item a .item-txt { background: #fff; display: block; } .items1.grid-2-col .item a .item-txt h3 { color: #009639; } .items1.grid-2-col .item:first-child { margin-left: 0; } } @media (min-width: 481px) { .items1.grid-2-col .item:first-child { margin-left: 29%; width: 43%; } .items1 .item a .item-txt { background: transparent; } .items1 .item a .item-txt h3 { color: #000000; } } .ie8 .section-grid-2-col .main .items1.grid-2-col .item:first-child { margin-left: 26% !important; } /* =============================== */ .f-8 .section-grid-2-col .main .grid-2-col.items1 .item { margin-left: 0; width: 100%; } .f-8 .section-grid-2-col .main .grid-2-col.items1 .inset-border { float: left; height: 100%; width: 50%; } .f-8 .section-grid-2-col .main .grid-2-col.items1 .item-txt { background: #ffffff; height: 50%; padding: 4%; position: absolute; right: 0; text-align: left; top: calc(25%); width: 54%; } .f-8 .section-grid-2-col .main .grid-2-col.items1 h3, .f-8 .section-grid-2-col .main .grid-2-col.items1 p { color: #474747; margin: 0; text-align: left; } .f-8 .section-grid-2-col .main .grid-2-col.items1 h3 { font-size: 28px; } .f-8 .section-grid-2-col .main .grid-2-col.items1 p { float: left; font-size: 16px; margin-top: 36px; width: 100%; } /* _________________________________________ PROJECT: Onebrand UI Kit CONTENT: 3 Column ____________________________________________ */ .section-3-col-slider .item { margin-bottom: 40px; } @media (min-width: 0) { .section-3-col-slider .main .items1.grid-3-col-slider li.item:first-child { margin-left: calc(50% - 143px); position: static; width: 30%; } .grid-3-col-slider { height: auto; margin: 0 auto; } .grid-3-col-slider .flex-control-nav { display: none; } .grid-3-col-slider .item { text-align: left; } .grid-3-col-slider .item a:not(.btn-tile), .grid-3-col-slider .item div.no-hover:not(.btn-tile) { display: block; margin: 0 2%; opacity: 1; position: relative; width: 96%; transition: all 0.2s ease-out; } .grid-3-col-slider .item a:not(.btn-tile) img, .grid-3-col-slider .item div.no-hover:not(.btn-tile) img { display: block; float: left; margin: 0 auto; width: 100%; } .grid-3-col-slider .item a:not(.btn-tile) .bar, .grid-3-col-slider .item div.no-hover:not(.btn-tile) .bar { content: ""; height: 10px; left: 0; position: absolute; top: 0; width: 100%; transition: all 0.2s ease-out; } .grid-3-col-slider .item a:not(.btn-tile) .item-txt, .grid-3-col-slider .item div.no-hover:not(.btn-tile) .item-txt { float: left; width: 100%; /* Safari/Chrome, other WebKit */ /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ margin: 10px auto; padding: 10px; text-align: left; transition: all 0.2s ease-out; } } @media screen and (min-width: 0) and (max-width: 1200px) { .grid-3-col-slider .item a:not(.btn-tile) .item-txt h1, .grid-3-col-slider .item a:not(.btn-tile) .item-txt h2, .grid-3-col-slider .item a:not(.btn-tile) .item-txt h3, .grid-3-col-slider .item a:not(.btn-tile) .item-txt h4, .grid-3-col-slider .item a:not(.btn-tile) .item-txt h5, .grid-3-col-slider .item a:not(.btn-tile) .item-txt h6, .grid-3-col-slider .item div.no-hover:not(.btn-tile) .item-txt h1, .grid-3-col-slider .item div.no-hover:not(.btn-tile) .item-txt h2, .grid-3-col-slider .item div.no-hover:not(.btn-tile) .item-txt h3, .grid-3-col-slider .item div.no-hover:not(.btn-tile) .item-txt h4, .grid-3-col-slider .item div.no-hover:not(.btn-tile) .item-txt h5, .grid-3-col-slider .item div.no-hover:not(.btn-tile) .item-txt h6 { float: left; height: auto; width: 100%; } } @media screen and (min-width: 0) and (max-width: 480px) { .dark-bg .grid-3-col-slider .item.flex-active-slide .item-txt { background: #b9b9b9; } .mild-bg .grid-3-col-slider .item.flex-active-slide .item-txt { background: #c6c6c6; } .light-bg .grid-3-col-slider .item.flex-active-slide .item-txt { background: #ffffff; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { .section-3-col-slider .main .items1.grid-3-col-slider li.item:first-child { float: left; left: 50%; margin-left: -13%; position: relative; width: 26%; } .shelfhider ul.revealer { position: relative; } .grid-3-col-slider { height: auto; margin: 0 auto; width: 100%; } .grid-3-col-slider .item { min-height: 280px; } .grid-3-col-slider .item a:not(.btn-tile), .grid-3-col-slider .item div.no-hover:not(.btn-tile) { margin: 0 auto; width: 96%; } .grid-3-col-slider .item a:not(.btn-tile) .bar, .grid-3-col-slider .item div.no-hover:not(.btn-tile) .bar { background: rgba(0, 0, 0, 0.1); } .grid-3-col-slider .item a:not(.btn-tile) .item-txt, .grid-3-col-slider .item div.no-hover:not(.btn-tile) .item-txt { display: block; } } @media screen and (min-width: 481px) and (max-width: 767px) { .grid-3-col-slider .item a:not(.btn-tile) .bg-overlay .hover-text, .grid-3-col-slider .item div.no-hover:not(.btn-tile) .bg-overlay .hover-text { font-size: 14px; } .grid-3-col-slider .item a:not(.btn-tile) .item-txt h3, .grid-3-col-slider .item div.no-hover:not(.btn-tile) .item-txt h3 { font-size: 17; } } @media (min-width: 481px) { .grid-3-col-slider .item:nth-child(3n+1) { clear: left; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .section-3-col-slider .main .items1.grid-3-col-slider li.item:first-child { clear: left; float: none; left: initial; margin: 0 auto; width: 32%; } .section-3-col-slider .main .grid-3-col-slider .slides { margin: 0 0 10px; } .section-3-col-slider .main .grid-3-col-slider .slides .item { box-sizing: border-box; float: left; margin: 0 0 20px; padding: 0; width: calc((100% - 18px) / 3); } .section-3-col-slider .main .grid-3-col-slider .slides .item a:not(.btn-tile), .section-3-col-slider .main .grid-3-col-slider .slides .item div.no-hover:not(.btn-tile) { width: 100%; } .section-3-col-slider .main .grid-3-col-slider .slides .item:nth-child(3n+1) { margin-left: 0; padding-left: 0; } .section-3-col-slider .main .grid-3-col-slider .slides .item:nth-child(3n) { margin-right: 0; padding-right: 0; } .section-3-col-slider .main .grid-3-col-slider .slides .item:nth-child(3n+2) { margin-left: 9px; margin-right: 9px; padding: 0; } .section-3-col-slider .main .grid-3-col-slider .item-txt h3, .section-3-col-slider .main .grid-3-col-slider .item-txt p { text-align: left; } } /* apply this calc on ie and edge - csoares */ @media (min-width: 1280px) { /* IE10+ CSS */ .section-3-col-slider .main .grid-3-col-slider .slides .item { width: calc((100% - 20px) / 3); } } /* =============================== */ /* only 2 items */ .items2.grid-3-col-slider .item:first-child { margin-left: 20%; } @media (min-width: 0) { .items2.grid-3-col-slider .item:first-child { margin-left: 0; } } @media (min-width: 481px) { .items2.grid-3-col-slider .item:first-child { margin-left: 20%; } .section-3-col-slider .main .audio-wrap .items2.grid-3-col-slider .item:first-child { margin-left: auto; } } @media (min-width: 820px) { .section-3-col-slider .main .audio-wrap .items2.grid-3-col-slider .item:first-child { margin-left: 17%; } } @media (min-width: 1200px) { .section-3-col-slider .main .items2.grid-3-col-slider .item:first-child { margin-left: 17%; } .section-3-col-slider .main .audio-wrap .items2.grid-3-col-slider .item:first-child { margin-left: 17%; } } .ie8 .section-3-col-slider .main .items2.grid-3-col-slider .item:first-child { margin-left: 17%; } /* =============================== */ /* =============================== */ /* only 1 items */ .items1.grid-3-col-slider .item:first-child { margin-left: 37%; } .audio-wrap .items1.grid-3-col-slider .item:first-child { margin-left: 35.5%; } @media (min-width: 820px) { .items1.grid-3-col-slider .item:first-child { margin-left: 37%; width: 26%; } .items1 .item a .item-txt { background: transparent; } .items1 .item a .item-txt h3 { color: #000000; } .section-3-col-slider .main .audio-wrap .items1.grid-3-col-slider .item:first-child { margin-left: auto; } .ie8 .section-3-col-slider .main .items1.grid-3-col-slider .item:first-child { margin-left: calc(50% - 143px); } } @media (min-width: 820px) { .section-3-col-slider .main .audio-wrap .items1.grid-3-col-slider .item:first-child { margin-left: 35.5%; } } @media (min-width: 1200px) { .section-3-col-slider .main .items1.grid-3-col-slider .item:first-child { margin-left: 36%; } .section-3-col-slider .main .audio-wrap .items1.grid-3-col-slider .item:first-child { margin-left: 35.5%; } } .ie8 .section-3-col-slider .main .items1.grid-3-col-slider .item:first-child { margin-left: 36%; } .ie8 .section-3-col-slider .main .audio-wrap .items1.grid-3-col-slider .item:first-child { margin-left: 35.5%; } /* =============================== */ /* _________________________________________ PROJECT: Onebrand UI Kit CONTENT: 4 Column on desktop - for news or other elements ____________________________________________ */ @media (min-width: 0) { .grid-4-col-slider { margin: 0 auto; height: auto; } .grid-4-col-slider .btn-container .btn, .grid-4-col-slider .btn-container .gallery-main-carousel__overlay-action { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); backface-visibility: hidden; background-color: #bcbcbc; border-bottom: 5px solid #9a9a9a; border-top-width: 0; box-sizing: border-box; color: #fefefe; display: inline-block; font-size: 13px; font-weight: 500; margin-left: 0; margin-right: 0; min-width: 0; overflow: hidden; padding: 8px 20px; position: relative; text-align: center; text-align: center; transform: translateZ(0); vertical-align: middle; } .grid-4-col-slider .btn-container .btn:before, .grid-4-col-slider .btn-container .gallery-main-carousel__overlay-action:before { animation: button-mouseoff-fade 0.5s ease-out; animation-iteration-count: 1; background-color: #9a9a9a; border-radius: 100%; bottom: 6px; content: ""; height: 30px; left: 45%; opacity: 0; position: absolute; right: 0; -ms-transform: scale(20); transform: scale(20); width: 30px; z-index: -1; } .grid-4-col-slider .btn-container .btn:hover, .grid-4-col-slider .btn-container .gallery-main-carousel__overlay-action:hover { color: #ffffff; } .grid-4-col-slider .btn-container .btn:hover:before, .grid-4-col-slider .btn-container .gallery-main-carousel__overlay-action:hover:before { animation: button-hover-radial 0.6s ease-out; opacity: 1; } .grid-4-col-slider .btn-container .btn:active, .grid-4-col-slider .btn-container .gallery-main-carousel__overlay-action:active { background-color: #b1b1b1; border-bottom: 0; border-bottom-width: 0; border-top: 5px solid rgba(0, 0, 0, 0.2); color: #ffffff; transition: all 0.2 ease 0.2s; } .grid-4-col-slider .btn-container .btn.primary, .grid-4-col-slider .btn-container .primary.gallery-main-carousel__overlay-action { background-color: #009639; border-bottom: 5px solid #bf1420; color: #ffffff; } .grid-4-col-slider .btn-container .btn.primary:before, .grid-4-col-slider .btn-container .primary.gallery-main-carousel__overlay-action:before { background-color: #00a9e0; } .grid-4-col-slider .btn-container .btn.primary:active, .grid-4-col-slider .btn-container .primary.gallery-main-carousel__overlay-action:active { background-color: #d6b000; border-bottom: 0; border-top: 5px solid #997d00; } .grid-4-col-slider .btn-container .btn.btn-has-icon, .grid-4-col-slider .btn-container .btn-has-icon.gallery-main-carousel__overlay-action { padding-right: 40px; position: relative; } .grid-4-col-slider .btn-container .btn.btn-has-icon:after, .grid-4-col-slider .btn-container .btn-has-icon.gallery-main-carousel__overlay-action:after { -ms-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); content: 'x'; content: "\e604"; font-family: "cc-go"; font-style: normal; font-variant: normal; font-weight: bold; line-height: 1; padding-top: 12px; position: absolute; right: 12px; speak: none; text-transform: none; top: 0; transform: scale3d(1, 1, 1); } .grid-4-col-slider .btn-container.align-right { text-align: right; } .grid-4-col-slider .btn-container.align-left { text-align: left; } } @media screen and (min-width: 0) and (max-width: 480px) { .grid-4-col-slider .btn-container { box-sizing: border-box; padding: 0 5px; } .grid-4-col-slider .btn-container .btn, .grid-4-col-slider .btn-container .gallery-main-carousel__overlay-action { display: block; } } @media (min-width: 0) { .grid-4-col-slider .flex-control-nav { display: none; } } @media screen and (min-width: 0) and (max-width: 480px) { .grid-4-col-slider .item.flex-active-slide a.has-hover-content .item-txt h3, .grid-4-col-slider .item.flex-active-slide a.has-hover-content .item-txt p { color: #000000; } } @media (min-width: 0) { .grid-4-col-slider .item { margin-bottom: 20px; } .grid-4-col-slider .item .item__type { font-size: 13px; font-weight: 400; height: 16px; line-height: 12px; padding-top: 10px; } .grid-4-col-slider .item a:not(.btn-tile), .grid-4-col-slider .item div.no-hover:not(.btn-tile) { display: block; width: 96%; margin: 0 2%; overflow: hidden; position: relative; transition: all 0.2s ease-out; } .grid-4-col-slider .item a:not(.btn-tile) img, .grid-4-col-slider .item div.no-hover:not(.btn-tile) img { display: block; float: left; margin: 0 auto; width: 100%; } .grid-4-col-slider .item a:not(.btn-tile) .bar, .grid-4-col-slider .item div.no-hover:not(.btn-tile) .bar { left: 0; top: 0; content: ""; height: 10px; position: absolute; width: 100%; transition: all 0.2s ease-out; } .grid-4-col-slider .item a:not(.btn-tile) .item-txt, .grid-4-col-slider .item div.no-hover:not(.btn-tile) .item-txt { float: left; height: auto; margin: 10px auto; padding: 10px; text-align: center; width: 100%; transition: all 0.2s ease-out; } .grid-4-col-slider .item a:not(.btn-tile) .item-txt h1, .grid-4-col-slider .item a:not(.btn-tile) .item-txt h2, .grid-4-col-slider .item a:not(.btn-tile) .item-txt h3, .grid-4-col-slider .item a:not(.btn-tile) .item-txt h4, .grid-4-col-slider .item a:not(.btn-tile) .item-txt h5, .grid-4-col-slider .item a:not(.btn-tile) .item-txt h6, .grid-4-col-slider .item div.no-hover:not(.btn-tile) .item-txt h1, .grid-4-col-slider .item div.no-hover:not(.btn-tile) .item-txt h2, .grid-4-col-slider .item div.no-hover:not(.btn-tile) .item-txt h3, .grid-4-col-slider .item div.no-hover:not(.btn-tile) .item-txt h4, .grid-4-col-slider .item div.no-hover:not(.btn-tile) .item-txt h5, .grid-4-col-slider .item div.no-hover:not(.btn-tile) .item-txt h6 { float: left; height: auto; width: 100%; } .grid-4-col-slider .item a:not(.btn-tile) .item-txt h1, .grid-4-col-slider .item div.no-hover:not(.btn-tile) .item-txt h1 { font-style: italic; font-weight: 900; } .grid-4-col-slider .item a:not(.btn-tile) .item-txt h2, .grid-4-col-slider .item div.no-hover:not(.btn-tile) .item-txt h2 { font-style: italic; font-weight: 900; } .grid-4-col-slider .item a:not(.btn-tile) .item-txt h3, .grid-4-col-slider .item div.no-hover:not(.btn-tile) .item-txt h3 { font-style: italic; font-weight: 900; } .grid-4-col-slider .item a:not(.btn-tile) .item-txt h4, .grid-4-col-slider .item div.no-hover:not(.btn-tile) .item-txt h4 { font-style: italic; font-weight: 700; } .grid-4-col-slider .item a:not(.btn-tile) .item-txt h5, .grid-4-col-slider .item div.no-hover:not(.btn-tile) .item-txt h5 { font-style: italic; font-weight: 700; } .grid-4-col-slider .item a:not(.btn-tile) .item-txt h6, .grid-4-col-slider .item div.no-hover:not(.btn-tile) .item-txt h6 { font-style: italic; font-weight: 700; } } @media screen and (min-width: 0) and (max-width: 480px) { .grid-4-col-slider .item.flex-active-slide a .item-txt h3, .grid-4-col-slider .item.flex-active-slide a .item-txt p { color: #009639; } .dark-bg .grid-4-col-slider .item.flex-active-slide .item-txt { background: #b9b9b9; } .mild-bg .grid-4-col-slider .item.flex-active-slide .item-txt { background: #c6c6c6; } .light-bg .grid-4-col-slider .item.flex-active-slide .item-txt { background: #ffffff; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { .grid-4-col-slider { margin: 0 auto; width: 100%; } .grid-4-col-slider .item:nth-child(2n+1) { margin-left: 0; margin-right: 10px; } .grid-4-col-slider .item:nth-child(2n+2) { margin-left: 10px; margin-right: 0; } .grid-4-col-slider .item { margin: 0 0 16px; width: 47%; } .grid-4-col-slider .item a:not(.btn-tile), .grid-4-col-slider .item div.no-hover:not(.btn-tile) { margin: 0 auto; width: 100%; } .grid-4-col-slider .item a:not(.btn-tile) .item-txt, .grid-4-col-slider .item div.no-hover:not(.btn-tile) .item-txt { display: block; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .grid-4-col-slider .item { margin: 0 0 20px; padding: 0; width: calc((100% - 30px) / 4); } .grid-4-col-slider .item:nth-child(4n+1) { clear: none; margin-left: 0; margin-right: 5px; } .grid-4-col-slider .item:nth-child(4n+2) { clear: none; margin-left: 5px; margin-right: 5px; } .grid-4-col-slider .item:nth-child(4n+3) { clear: none; margin-left: 5px; margin-right: 5px; } .grid-4-col-slider .item:nth-child(4n) { clear: none; margin-left: 5px; margin-right: 0; } .grid-4-col-slider .item .item-txt h3, .grid-4-col-slider .item .item-txt p, .grid-4-col-slider .item a .item-txt h3, .grid-4-col-slider .item a .item-txt p, .grid-4-col-slider .item div.no-hover .item-txt h3, .grid-4-col-slider .item div.no-hover .item-txt p { text-align: left; } } /* =============================== */ /* 1024px ======================== */ /* =============================== */ /* =============================== */ /* only 3 items */ .items3.grid-4-col-slider .item:first-child { margin-left: 14%; } @media (min-width: 0) { .items3.grid-4-col-slider .item:first-child { margin-left: 0; } } @media (min-width: 481px) { .items3.grid-4-col-slider .item:first-child { margin-left: 14%; } } @media (min-width: 1200px) { .section-4-col-slider .main .items3.grid-4-col-slider .item:first-child { margin-left: 17%; } } .ie8 .section-4-col-slider .main .items3.grid-4-col-slider .item:first-child { margin-left: 17%; } /* =============================== */ /* =============================== */ /* only 2 items */ .items2.grid-4-col-slider .item:first-child { margin-left: 27%; } @media (min-width: 0) { .items2.grid-4-col-slider .item:first-child { margin-left: 0; } } @media (min-width: 481px) { .items2.grid-4-col-slider .item:first-child { margin-left: 27%; } } @media (min-width: 1200px) { .section-4-col-slider .main .items2.grid-4-col-slider .item:first-child { margin-left: 17%; } } .ie8 .section-4-col-slider .main .items2.grid-4-col-slider .item:first-child { margin-left: 17%; } /* =============================== */ /* =============================== */ /* only 1 items */ .items1.grid-4-col-slider .item:first-child { margin-left: 37%; } @media (min-width: 0) { .items1.grid-4-col-slider { float: left; margin: 0; width: 100%; } .items1.grid-4-col-slider .item { margin-bottom: 20px; width: 100%; } .items1.grid-4-col-slider .item a { margin: 0; width: 100%; } .items1 .item a .item-txt { background: #fff; display: block; } .items1 .item a .item-txt h3 { color: #009639; } .items1.grid-4-col-slider .item:first-child { margin-left: 0; } } @media (min-width: 481px) { .items1.grid-4-col-slider .item:first-child { margin-left: 40%; width: 20%; } .items1 .item a .item-txt { background: transparent; } .items1 .item a .item-txt h3 { color: #000000; } } @media (min-width: 1200px) { .section-4-col-slider .main .items1.grid-4-col-slider .item:first-child { margin-left: 36%; } } @media (min-width: 0) { *[dir="rtl"] .grid-4-col-slider .btn-container .btn.btn-has-icon, *[dir="rtl"] .grid-4-col-slider .btn-container .btn-has-icon.gallery-main-carousel__overlay-action { padding-left: 40px; padding-right: 20px; position: relative; } *[dir="rtl"] .grid-4-col-slider .btn-container .btn.btn-has-icon:after, *[dir="rtl"] .grid-4-col-slider .btn-container .btn-has-icon.gallery-main-carousel__overlay-action:after { -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); left: 10px; right: auto; transform: rotateY(180deg); } } .ie8 .section-4-col-slider .main .items1.grid-4-col-slider .item:first-child { margin-left: 36%; } /* =============================== */ /* ======================================================================== SECTIONS: FM PLAYER - COMMON ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #FontWeight */ /* #LineHeight */ /* #Background*/ /* :END VARIABLES */ /* COKE FM PLAYER */ #stwrapper { display: none; } /*.fm-player *,*/ .section-fm-player-embed-code, .section-fm-player-main * { box-sizing: border-box; } section.section-fm-player-wrapper { float: left; margin: 0 auto; overflow: visible; padding: 0; width: 100%; } section.section-fm-player-wrapper .section-fm-player-main, section.section-fm-player-wrapper .section-fm-schedule, section.section-fm-player-wrapper .section-fm-slider { float: none; } .fm-player .fm-shadow-overlay-IE { display: none; } .fm-player .fm-icon { z-index: 10; } .fm-player .fm-player-btns { margin-bottom: 10px; } .fm-player .fm-player-btns a.fm-player-btn.is-active, .fm-player .fm-player-btns a.fm-player-btn:hover { background: #ffffff; } .fm-player .fm-player-btns a.fm-player-btn.is-active .fm-shadow-overlay-IE, .fm-player .fm-player-btns a.fm-player-btn:hover .fm-shadow-overlay-IE { background: #fff; filter: alpha(opacity=100); } .fm-player .fm-player-seeMore-btn span { font-size: 40px; margin-top: -19px; top: 50%; } /*.fm-player,*/ .section-fm-player-main { margin-bottom: 11px; } .section-fm-player-main { padding: 0; } .section-fm-player-wrapper .section-fm-schedule { display: none; } .section-fm-player-embed-code { background: #ffffff; box-sizing: border-box; display: none; text-align: center; width: 100%; } .section-fm-player-embed-code h2.headline { margin-bottom: 10px; } .section-fm-player-embed-code p.description { margin-left: auto; margin-right: auto; text-align: center; } .section-fm-player-embed-code p.description, .section-fm-player-embed-code code, .section-fm-player-embed-code textarea { font-size: 16px; line-height: 120%; } .section-fm-player-embed-code textarea { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; color: #009639; background: #ffffff; border: none; box-sizing: border-box; margin-left: auto; margin-right: auto; padding: 13px 15px 11px; resize: none; } .section-fm-player-embed-code textarea code { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; color: #009639; } .section-fm-player-embed-code pre { padding: 0 15px 15px; text-align: left; } .fm-player-logo-container { width: 100%; } .fm-player-logo { display: block; float: none; margin: 0 auto; padding: 0; } .fm-player-logo.section-lockup .brand { background: transparent; } section.fm-player div.fm-player-redbox div.fm-player-logo-container section.fm-player-logo { float: none; padding: 0; } div.fm-player-song { background-position: -10px -10px; border: 10px solid #ffffff; border-radius: 50%; margin-left: auto; margin-right: auto; overflow: hidden; position: relative; /* wrapper for player song text */ } div.fm-player-song * { transition: all 0.2s ease-out; } div.fm-player-song .fm-player-play span { transition: color 0.2s ease-out, opacity 0.2s ease-out; } div.fm-player-song:hover span.fm-icon-play { background: transparent; } div.fm-player-song img { width: 100%; } div.fm-player-song #fm-scroll-text { overflow: hidden; position: absolute; width: 300px; } div.fm-player-song .fm-player-song-info { height: 50px; margin-top: -18px; padding-top: 50%; position: relative; } div.fm-player-song .fm-player-song-info ul { list-style-type: none; } div.fm-player-song .fm-player-song-info li { display: inline; } div.fm-player-song .fm-player-song-info h3 { color: #ffffff; font-size: 36px; text-transform: none; white-space: nowrap; } div.fm-player-song .fm-player-btn { color: #ffffff; } div.fm-player-song .fm-player-btn span { transition: color 0.2s ease-out, opacity 0.2s ease-out; } div.fm-player-song:active .fm-player-btn span { opacity: 1; } .fm-player-song .fm-player-blackbox { background: rgba(0, 0, 0, 0.3); display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .fm-player-btn { border-radius: 50%; cursor: pointer; display: block; overflow: hidden; } .fm-player-btn span { display: inline-block; position: absolute; text-align: center; top: 50%; width: 100%; } .fm-player-btns { margin-left: auto; margin-right: auto; } .fm-player-btns .fm-player-btn { float: left; height: 57px; margin-right: 5px; position: relative; width: 57px; } .fm-player-btns span { margin-top: -14px; transition: color 0.2s ease-out; } .fm-player-btns .fm-player-schedule-btn span { font-size: 41px; margin-left: 0; margin-top: -20px; } .fm-player-btns .fm-player-hd-btn span { font-size: 37px; font-weight: bold; margin-left: 1px; margin-top: -18px; } .fm-player-btns .fm-player-popup-btn span { font-size: 32px; margin-left: 0; margin-top: -16px; } .fm-player-btns .fm-player-twitter span { font-size: 34px; margin-left: 0; margin-top: -17px; } .fm-player-btns .fm-player-facebook span { font-size: 37px; margin-left: 0; margin-top: -19px; } .fm-player-btns .fm-player-embed-btn span { font-size: 32px; margin-left: 0; margin-top: -16px; } .fm-player-btns .fm-player-download-btn span { font-size: 36px; margin-left: 0; margin-top: -17px; } .fm-player-play { position: absolute; top: 0; } .section-fm-player-wrapper .section-fm-player-main.section-fm-player-home { float: left; } .section-fm-player-home { overflow: visible; } .fm-player-seeMore-btn { background: #fff; color: #009639; display: block; float: left; font-size: 14px; left: 50%; margin-left: -60px; min-width: 50px; position: relative; text-transform: uppercase; width: 90px; } .fm-player-dislike-btn.is-active, .fm-player-like-btn.is-active { background: #ffffff; } .fm-player-dislike-btn.is-active span, .fm-player-like-btn.is-active span { color: #009639; } .fm-player-redbox .fm-ratings-container a.is-active { background: #ffffff; } .fm-player-redbox .fm-ratings-container a.is-active span { color: #009639; } @media screen and (max-width: 768px) { .section-fm-player-embed-code { display: none; padding: 8px 10px 0; } /*.fm-player-code-container,*/ /*input,*/ textarea { max-width: 100%; width: 100%; } .fm-ratings-container { display: none; } .fm-player-logo, img.fm-player-logo { height: 55px; width: 180px; } .section-lockup.fm-player-logo { clear: both; height: 55px; margin-left: auto; margin-right: auto; width: 180px; } .section-lockup.fm-player-logo h3 { height: auto; margin: 0; width: 100%; } .section-lockup.fm-player-logo img { width: 100%; } .section-lockup.fm-player-logo p { color: #ffffff; font-size: 15px; } div.fm-player-song { height: 240px; margin-top: 7px; position: relative; width: 240px; } div.fm-player-song .fm-player-play { background: transparent; } div.fm-player-song:hover .fm-player-play span { opacity: 0.6; } div.fm-player-song .fm-player-btn span { opacity: 0.6; } section.section-fm-player { background: transparent; height: auto; width: 100%; } .fm-player-redbox { background: url("/etc/designs/P/5631383682678784/clientlib/img/fm-player-background.png") no-repeat; background-size: cover; height: 392px; margin-bottom: 15px; padding-top: 13px; } .fm-player-play { height: 100%; left: 0; width: 100%; } .fm-player-play.fm-player-btn-large { display: none; } .fm-player-play span { color: #ffffff; } .fm-player-play.is-playing span { font-size: 130px; margin-top: -60px; } .fm-player-play.is-paused span { font-size: 200px; margin-left: 20px; margin-top: -100px; } .fm-player-play.is-idle span { font-size: 200px; margin-left: 20px; margin-top: -100px; } div.fm-player-song .fm-player-btn.is-playing span { opacity: 0; } div.fm-player-song:hover .fm-player-btn span { opacity: 0.6; } .section-fm-player-main .fm-player-volume-container { display: none; } .section-fm-player-popup.fm-player .fm-player-btns .fm-player-btn { height: 57px; width: 57px; } .fm-player .fm-player-btns .fm-player-btn { background: #ffffff; height: 40px; margin-right: 5px; width: 40px; } .fm-player .fm-player-btns .fm-player-btn:last-child { margin-right: 0; } .fm-player .fm-player-btns .fm-player-btn span { color: #b9b9b9; } .fm-player .fm-player-btns .fm-player-btn.is-active span, .fm-player .fm-player-btns .fm-player-btn:hover span { color: #009639; } .fm-player .fm-player-btns .fm-player-embed-btn, .fm-player .fm-player-btns .fm-player-hd-btn, .fm-player .fm-player-btns .fm-player-popup-btn { display: none; } .fm-player .fm-player-btns .fm-player-download-btn { display: block; } section.section-fm-player-embed-code { display: none; } .section-fm-player-main .fm-player-btns { width: 265px; } .section-fm-player-main .fm-player-btns .fm-player-like-btn span { font-size: 23px; margin-top: -13px; } .section-fm-player-main .fm-player-btns .fm-player-dislike-btn span { font-size: 23px; margin-top: -11px; } .section-fm-player-main .fm-player-btns .fm-player-schedule-btn span { font-size: 34px; margin-top: -17px; } .section-fm-player-main .fm-player-btns .fm-player-twitter span { font-size: 28px; margin-top: -13px; } .section-fm-player-main .fm-player-btns .fm-player-facebook span { font-size: 27px; margin-top: -13px; } .section-fm-player-main .fm-player-btns .fm-player-download-btn span { font-size: 28px; margin-top: -12px; } .section-fm-player-popup .fm-player-btns { width: 246px; } .section-fm-player-home { margin-bottom: 16px; } } /*@media screen and (min-width: 481px) {*/ @media screen and (min-width: 769px) { .fm-player-logo, img.fm-player-logo { height: 55px; width: 180px; } .section-fm-player-wrapper > section { margin-bottom: 10px; } .section-fm-player-wrapper .fm-player-seeMore-btn { margin-top: 0; } .fm-player-btns .fm-player-dislike-btn, .fm-player-btns .fm-player-like-btn { display: none; } .section-lockup.fm-player-logo { clear: both; height: 55px; margin-left: auto; margin-right: auto; width: 180px; } .section-lockup.fm-player-logo h3 { height: 34px; margin: 0; width: 100%; } .section-lockup.fm-player-logo img { width: 100%; } .section-lockup.fm-player-logo p { color: #ffffff; font-size: 15px; } .section-fm-player-embed-code { display: none; float: none; padding: 30px 10px 42px; } .section-fm-player-embed-code p.description { max-width: 440px; } .section-fm-player-embed-code textarea { height: 84px; max-width: 688px; width: 688px; } .section-fm-player-embed-code pre { padding: 0 15px 15px; text-align: left; } section.section-fm-player-main .fm-player-song .fm-player-play.is-paused span { font-size: 190px; margin-left: 20px; margin-top: -94px; } img.fm-player-logo .fm-player-logo { background-repeat: no-repeat; background-size: 100%; height: 63px; width: 216px; } .fm-player-redbox > .fm-player-btn-large, .fm-player-redbox .fm-player-volume-container .fm-player-btn-large { background: rgba(0, 0, 0, 0.3); } .fm-player-redbox > .fm-player-btn-large:hover, .fm-player-redbox .fm-player-volume-container .fm-player-btn-large:hover { background: #ffffff; } .fm-player-redbox > .fm-player-btn-large:hover span, .fm-player-redbox .fm-player-volume-container .fm-player-btn-large:hover span { color: #009639; } .section-fm-player-popup .fm-player-redbox .fm-player-volume-container .fm-player-btn-large:hover { background: transparent; } .fm-player-btns .fm-player-btn { background: rgba(0, 0, 0, 0.3); height: 57px; width: 57px; } .fm-player-btns .fm-player-btn:hover { background: #ffffff; } .fm-player-btns .fm-player-btn:hover span.fm-icon-twitters { font-size: 34px; } .section-fm-player-popup .fm-player-btns .fm-player-btn { height: 57px; width: 57px; } div.fm-player-song { height: 240px; margin-bottom: 12px; margin-top: 7px; width: 240px; } div.fm-player-song .fm-player-btn { height: 100%; width: 100%; } div.fm-player-song .fm-icon { font-size: 120px; margin-top: -57px; opacity: 0.6; } div.fm-player-song .fm-icon { opacity: 0; } div.fm-player-song:hover .fm-icon { opacity: 0.6; } section.section-fm-player-main { background: url("/etc/designs/P/5631383682678784/clientlib/img/fm-player-background.png") no-repeat; background-size: cover; height: 392px; position: relative; width: 100%; } .fm-player-redbox { padding-top: 13px; } .fm-player-btn { color: #ffffff; } .fm-player-btn-large { height: 80px; width: 80px; } .fm-player-btn-large span { display: inline-block; font-size: 78px; text-align: center; transition: color 0.2s ease-out; width: 100%; } .fm-player-btn-large.fm-player-volume-btn span { font-size: 60px; margin-top: -29px; } .fm-player-btn-large.fm-player-play span { margin-top: -38px; } .fm-ratings-container { height: 80px; left: 50%; margin-left: 133px; margin-top: -40px; position: absolute; top: 50%; width: 172px; } .fm-ratings-container .fm-player-btn { background: rgba(0, 0, 0, 0.3); border-radius: 50%; display: block; height: 80px; overflow: hidden; position: absolute; transition: background 0.2s ease-out; width: 80px; } .fm-ratings-container .fm-player-btn span { color: #ffffff; font-size: 48px; position: absolute; top: 50%; transition: color 0.2s ease-out; width: 100%; } .fm-ratings-container .fm-player-btn:hover { background: #ffffff; } .fm-ratings-container .fm-player-btn:hover span { color: #009639; } .fm-ratings-container .fm-player-like-btn { left: 0; } .fm-ratings-container .fm-player-like-btn span { margin-top: -25px; } .fm-ratings-container .fm-player-dislike-btn { right: 0; } .fm-ratings-container .fm-player-dislike-btn span { margin-top: -21px; } .fm-player-play.fm-player-btn-large { left: 50%; margin-left: -305px; margin-top: -40px; position: absolute; top: 50%; transition: background 0.2s ease-out; } .fm-player-play.fm-player-btn-large.is-idle span, .fm-player-play.fm-player-btn-large.is-playing span { font-size: 40px; margin-left: 0; margin-top: -19px; } .fm-player-play.fm-player-btn-large.is-paused span { font-size: 55px; margin-left: 0; margin-left: 6px; margin-top: -27px; } .fm-player-play.fm-player-btn-large.is-idle .fm-icon-play { font-size: 55px; margin-left: 6px; margin-top: -27px; } .fm-player-btns { position: relative; width: 367px; } .fm-player-btns a.fm-player-embed-btn { margin-right: 0; } .fm-player-btns .fm-player-btn.is-active, .fm-player-btns .fm-player-btn:hover { color: #009639; } .fm-player-download-btn { display: none; } .section-fm-player-main .fm-player-volume-container { height: 125px; left: 50%; margin-left: -313px; margin-top: -40px; position: absolute; top: 50%; width: 188px; } .section-fm-player-main .fm-player-volume-container .fm-player-volume-btn { position: absolute; right: 8px; top: 0; } .section-fm-player-main .fm-player-volume-container .fm-player-btn.is-showing { background: #ffffff; } .section-fm-player-main .fm-player-volume-container .fm-player-btn.is-showing span { color: #009639; } .section-fm-player-main .fm-player-volume-container .fm-player-hd-btn { display: none; } .section-fm-player-main .fm-player-volume-container .fm-volume-bar-container { bottom: 0; display: none; height: 30px; left: 0; position: absolute; width: 188px; } .section-fm-player-main .fm-player-volume-container .fm-volume-bar-container .fm-volume-bar { background: #ffffff; height: 15px; left: 15px; margin-top: -7px; position: absolute; top: 50%; width: 158px; } .section-fm-player-main .fm-player-volume-container .fm-volume-bar-container .noUi-origin { background: #c20000; } .section-fm-player-main .fm-player-volume-container .fm-volume-bar-container .fm-volume-level { background: #ffffff; height: 100%; width: 30px; } .section-fm-player-main .fm-player-volume-container .fm-volume-bar-container .fm-volume-slider, .section-fm-player-main .fm-player-volume-container .fm-volume-bar-container .noUi-handle { background: #cbcbcb; border: 8px solid #ffffff; border-radius: 50%; display: block; height: 30px; left: -15px; margin-top: -15px; position: absolute; top: 50%; width: 30px; } .section-fm-player-main .fm-player-volume-container .fm-volume-bar-container .fm-volume-slider:after, .section-fm-player-main .fm-player-volume-container .fm-volume-bar-container .fm-volume-slider:before, .section-fm-player-main .fm-player-volume-container .fm-volume-bar-container .noUi-handle:after, .section-fm-player-main .fm-player-volume-container .fm-volume-bar-container .noUi-handle:before { display: none; } .section-fm-player-main .fm-player-volume-container .fm-player-volume-btn span { margin-left: -3px; } .fm-player-volume-container .fm-volume-bar-container .fm-volume-bar { border: none; border-radius: 0; box-shadow: none; } .fm-player-volume-container .fm-volume-bar-container .fm-volume-level, .fm-player-volume-container .fm-volume-bar-container .noUi-origin { border-radius: 0; box-shadow: none; } .section-fm-player-popup a.fm-player-btn.fm-player-hd-btn, .section-fm-player-popup a.fm-player-btn.fm-player-volume-btn { background: transparent; } .fm-player-seeMore-btn { margin-top: 10px; } .section-fm-player-home .fm-player-btns, .section-fm-player-main .fm-player-btns { margin-left: auto; margin-right: auto; width: 337px; } .section-fm-player-home .fm-player-btns .fm-player-btn, .section-fm-player-main .fm-player-btns .fm-player-btn { float: left; height: 43px; height: 52px; margin-right: 5px; position: relative; width: 43px; width: 52px; } .section-fm-player-home .fm-player-btns span, .section-fm-player-main .fm-player-btns span { margin-top: -14px; transition: color 0.2s ease-out; } .section-fm-player-home .fm-player-btns .fm-player-schedule-btn span, .section-fm-player-main .fm-player-btns .fm-player-schedule-btn span { font-size: 34px; margin-left: 0; margin-top: -17px; } .section-fm-player-home .fm-player-btns .fm-player-hd-btn span, .section-fm-player-main .fm-player-btns .fm-player-hd-btn span { font-size: 28px; font-weight: bold; margin-left: 1px; margin-top: -14px; } .section-fm-player-home .fm-player-btns .fm-player-popup-btn span, .section-fm-player-main .fm-player-btns .fm-player-popup-btn span { font-size: 25px; margin-left: 0; margin-top: -12px; } .section-fm-player-home .fm-player-btns .fm-player-twitter span, .section-fm-player-main .fm-player-btns .fm-player-twitter span { font-size: 28px; margin-left: 0; margin-top: -14px; } .section-fm-player-home .fm-player-btns .fm-player-facebook span, .section-fm-player-main .fm-player-btns .fm-player-facebook span { font-size: 29px; margin-left: 0; margin-top: -15px; } .section-fm-player-home .fm-player-btns .fm-player-embed-btn, .section-fm-player-main .fm-player-btns .fm-player-embed-btn { margin-right: 0; } .section-fm-player-home .fm-player-btns .fm-player-embed-btn span, .section-fm-player-main .fm-player-btns .fm-player-embed-btn span { font-size: 26px; margin-left: 0; margin-top: -13px; } } @media screen and (min-width: 769px) and (max-width: 500px) { .section-fm-player-embed-code textarea { height: 100px; } } @media screen and (min-width: 769px) and (max-width: 728px) { .section-fm-player-embed-code textarea { width: 100%; } } /* FM Popup Player */ section.section-fm-player-popup { margin-left: 10px; max-width: 300px; padding-top: 10px; position: relative; } section.section-fm-player-popup img.fm-player-logo .fm-player-logo { height: 55px; width: 180px; } section.section-fm-player-popup div.fm-player-song { height: 240px; margin-top: 18px; position: relative; width: 240px; } section.section-fm-player-popup section.section-fm-player-main { background: transparent; height: auto; width: 100%; } section.section-fm-player-popup .fm-player-redbox { background: url("/etc/designs/P/5631383682678784/clientlib/img/fm-player-background.png") no-repeat; background-size: cover; height: 392px; margin-bottom: 58px; padding-top: 13px; position: relative; } section.section-fm-player-popup .fm-player-play { background: transparent; height: 100%; left: 0; width: 100%; } section.section-fm-player-popup .fm-player-play.fm-player-btn-large { display: none; } section.section-fm-player-popup .fm-player-play:hover { background: transparent; } section.section-fm-player-popup .fm-player-play span { color: #ffffff; font-size: 200px; margin-top: -100px; } section.section-fm-player-popup .fm-player-play span.fm-icon-play { margin-left: 20px; } section.section-fm-player-popup .fm-player-play.is-playing span { font-size: 130px; margin-top: -60px; } section.section-fm-player-popup .fm-player-play.is-paused span { font-size: 200px; margin-left: 20px; margin-top: -100px; } section.section-fm-player-popup .fm-player-btns { width: 252px; } section.section-fm-player-popup .fm-player-btns .fm-player-btn { background: #ffffff; display: none; margin-right: 8px; } section.section-fm-player-popup .fm-player-btns .fm-player-btn:last-child { margin-right: 0; } section.section-fm-player-popup .fm-player-btns .fm-player-btn span { color: #b9b9b9; } section.section-fm-player-popup .fm-player-btns .fm-player-btn.is-active span, section.section-fm-player-popup .fm-player-btns .fm-player-btn:hover span { color: #009639; } section.section-fm-player-popup .fm-player-btns .fm-player-rate-btn, section.section-fm-player-popup .fm-player-btns .fm-player-share-btn { display: block; } section.section-fm-player-popup .fm-player-btns .fm-player-share-btn.fm-player-facebook { margin-right: 0; } section.section-fm-player-popup .fm-player-btns .fm-player-rate-btn span { font-size: 28px; } section.section-fm-player-popup .fm-player-btns .fm-player-like-btn span { margin-top: -16px; } section.section-fm-player-popup .fm-player-btns .fm-player-dislike-btn span { margin-top: -12px; } section.section-fm-player-popup .fm-player-volume-container { bottom: -58px; height: 58px; margin-top: 0; position: absolute; width: 100%; } section.section-fm-player-popup .fm-player-volume-container .fm-volume-bar-container { height: 30px; left: 50%; margin-left: -119px; margin-top: -15px; position: absolute; top: 50%; width: 230px; } section.section-fm-player-popup .fm-player-volume-container .fm-volume-bar-container .fm-volume-bar { background: #009639; border: none; border-radius: 0; box-shadow: none; height: 15px; left: 50%; margin-left: -102px; margin-top: -7px; position: absolute; top: 50%; width: 205px; } section.section-fm-player-popup .fm-player-volume-container .fm-volume-bar-container .fm-volume-level, section.section-fm-player-popup .fm-player-volume-container .fm-volume-bar-container .noUi-origin { background: #b9b9b9; border-radius: 0; box-shadow: none; } section.section-fm-player-popup .fm-player-volume-container .fm-volume-bar-container .fm-volume-slider, section.section-fm-player-popup .fm-player-volume-container .fm-volume-bar-container .noUi-handle { background: #b9b9b9; border: 8px solid #009639; border-radius: 50%; display: block; height: 25px; left: -12px; margin-top: -12px; position: absolute; top: 50%; width: 25px; } section.section-fm-player-popup .fm-player-volume-container .fm-volume-bar-container .fm-volume-slider:after, section.section-fm-player-popup .fm-player-volume-container .fm-volume-bar-container .fm-volume-slider:before, section.section-fm-player-popup .fm-player-volume-container .fm-volume-bar-container .noUi-handle:after, section.section-fm-player-popup .fm-player-volume-container .fm-volume-bar-container .noUi-handle:before { display: none; } section.section-fm-player-popup .fm-player-volume-container .fm-player-btn { border-radius: 0; height: 25px; margin-top: -12px; position: absolute; top: 50%; width: 25px; } section.section-fm-player-popup .fm-player-volume-container .fm-player-btn.is-active span, section.section-fm-player-popup .fm-player-volume-container .fm-player-btn:hover span { color: #009639; } section.section-fm-player-popup .fm-player-volume-container span { color: #b9b9b9; font-size: 25px; margin-top: -12px; text-align: center; top: 50%; transition: color 0.2s ease-out; width: 100%; } section.section-fm-player-popup .fm-player-volume-container .fm-player-play { left: 0; } section.section-fm-player-popup .fm-player-volume-container .fm-player-hd-btn { right: 6px; } section.section-fm-player-popup .fm-player-volume-container .fm-player-hd-btn span { font-size: 26px; margin-top: -13px; } section.section-fm-player-popup .fm-player-volume-container .fm-player-btn { background: transparent; } /* ======================================================================== SECTIONS: FM SCHEDULE - COMMON ======================================================================== */ /* :START VARIABLES */ /* Coke FM Schedule */ /* #FontSize */ /* #Color */ /* #LineHeight */ /* #Background*/ /* :END VARIABLES */ .touch .section-fm-schedule .fm-day-shelf a.btncircle { opacity: 1; } .section-fm-schedule { margin: 0 auto; text-align: center; } .section-fm-schedule div.options .options__nav ol.swiper__items * { background-size: 300px 200px; box-sizing: border-box; } .section-fm-schedule .fm-schedule-days > li > a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; text-transform: uppercase; } .section-fm-schedule h2.headline { margin-bottom: 15px; } .section-fm-schedule .fm-schedule-description { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 16px; line-height: 100%; margin: 0 auto 15px; width: 210px; text-align: center; } .section-fm-schedule .fm-schedule-bold-label { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 15px; color: #676767; margin-bottom: 20px; text-align: center; } .section-fm-schedule .fm-day-shelf .swiper__items { height: 180px !important; } .section-fm-schedule .fm-day-shelf ul.swiper__nav li a { opacity: 1; } .section-fm-schedule .fm-day-shelf a.btncircle { opacity: 0; } .section-fm-schedule .fm-day-shelf .fm-schedule-timeslot.active a.btncircle { opacity: 1; } .section-fm-schedule ol.swiper__items li.fm-schedule-timeslot { cursor: pointer; } .section-fm-schedule ol.swiper__items li.fm-schedule-timeslot:last-child > div { margin-right: 0; } .section-fm-schedule ol.swiper__items li.fm-schedule-timeslot .fm-schedule-hours { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 16px; } .section-fm-schedule ol.swiper__items li.fm-schedule-timeslot .fm-schedule-time-label { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 16px; color: #ffffff; } .section-fm-schedule li.swiper__item { width: 193px; } .section-fm-schedule li.swiper__item.fmTimeDarkGreen > div { background: #008f44; } .section-fm-schedule li.swiper__item.fmTimeMutedBlue > div { background: #5f95ab; } .section-fm-schedule li.swiper__item.fmTimeOrange > div { background: #ff5c00; } .section-fm-schedule li.swiper__item.fmTimePink > div { background: #db377e; } .section-fm-schedule li.swiper__item.fmTimeRed > div { background: #d30004; } .section-fm-schedule li.swiper__item.fmTimeYellow > div { background: #f9c109; } .section-fm-schedule li.swiper__item.fmTimeLightGreen > div { background: #6cc04a; } .section-fm-schedule li.swiper__item.fmTimePurple > div { background: #674891; } .section-fm-schedule li.swiper__item.fmTimeGray > div { background: #777777; } .section-fm-schedule li.swiper__item.fmTimeTurquoise > div { background: #00b4b4; } .section-fm-schedule li.swiper__item.fmTimePeriwinkle > div { background: #6677b5; } .section-fm-schedule li.swiper__item.fmTimeBrown > div { background: #964b00; } .section-fm-schedule li.swiper__item.active.fmTimeDarkGreen > div { background: #eaeaea; } .section-fm-schedule li.swiper__item.active.fmTimeDarkGreen > div p.fm-schedule-time-label { color: #008f44; } .section-fm-schedule li.swiper__item.active.fmTimeMutedBlue > div { background: #ffffff; } .section-fm-schedule li.swiper__item.active.fmTimeMutedBlue > div p.fm-schedule-time-label { color: #5f95ab; } .section-fm-schedule li.swiper__item.active.fmTimeOrange > div { background: #eaeaea; } .section-fm-schedule li.swiper__item.active.fmTimeOrange > div p.fm-schedule-time-label { color: #ff5c00; } .section-fm-schedule li.swiper__item.active.fmTimePink > div { background: #eaeaea; } .section-fm-schedule li.swiper__item.active.fmTimePink > div p.fm-schedule-time-label { color: #db377e; } .section-fm-schedule li.swiper__item.active.fmTimeRed > div { background: #eaeaea; } .section-fm-schedule li.swiper__item.active.fmTimeRed > div p.fm-schedule-time-label { color: #d30004; } .section-fm-schedule li.swiper__item.active.fmTimeYellow > div { background: #eaeaea; } .section-fm-schedule li.swiper__item.active.fmTimeYellow > div p.fm-schedule-time-label { color: #f9c109; } .section-fm-schedule li.swiper__item.active.fmTimeLightGreen > div { background: #eaeaea; } .section-fm-schedule li.swiper__item.active.fmTimeLightGreen > div p.fm-schedule-time-label { color: #6cc04a; } .section-fm-schedule li.swiper__item.active.fmTimePurple > div { background: #eaeaea; } .section-fm-schedule li.swiper__item.active.fmTimePurple > div p.fm-schedule-time-label { color: #674891; } .section-fm-schedule li.swiper__item.active.fmTimeGray > div { background: #eaeaea; } .section-fm-schedule li.swiper__item.active.fmTimeGray > div p.fm-schedule-time-label { color: #777777; } .section-fm-schedule li.swiper__item.active.fmTimeTurquoise > div { background: #eaeaea; } .section-fm-schedule li.swiper__item.active.fmTimeTurquoise > div p.fm-schedule-time-label { color: #00b4b4; } .section-fm-schedule li.swiper__item.active.fmTimePeriwinkle > div { background: #eaeaea; } .section-fm-schedule li.swiper__item.active.fmTimePeriwinkle > div p.fm-schedule-time-label { color: #6677b5; } .section-fm-schedule li.swiper__item.active.fmTimeBrown > div { background: #eaeaea; } .section-fm-schedule li.swiper__item.active.fmTimeBrown > div p.fm-schedule-time-label { color: #964b00; } .section-fm-schedule li.swiper__item a { transition: none; } .section-fm-schedule li.swiper__item.active > div.fm-time-container { background: #eaeaea; } .section-fm-schedule li.swiper__item.active > div.fm-time-container a.btncircle { background: #009639; background-position: 0 -100px; background-size: 300px 200px; } .section-fm-schedule .options.options--centered > .swiper > .swiper__items li { min-height: 0; } .section-fm-schedule .fm-schedule-timeslot { position: relative; } .section-fm-schedule .fm-schedule-timeslot .fm-schedule-hours { margin-bottom: 6px; } .section-fm-schedule .fm-schedule-timeslot a.btncircle { -webkit-mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-arrow-plus.svg); mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-arrow-plus.svg); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; background: #ffffff; bottom: 18px; height: 17px; left: 50%; margin-left: -16px; position: absolute; width: 34px; } .section-fm-schedule .fm-schedule-details > li p.fm-time-description { margin-left: auto; margin-right: auto; max-width: 700px; text-align: center; } .section-fm-schedule .fm-schedule-details > li h2 { position: relative; } .section-fm-schedule .fm-schedule-details > li h2 img { left: 0; position: absolute; top: 0; width: 100%; } .section-fm-schedule .swiper { height: auto; } .section-fm-schedule .swiper .swiper__items { opacity: 1; } .section-fm-schedule .swiper .swiper__items .swiper__item { min-height: 0; } .section-fm-schedule .options__nav.swiper { margin-bottom: 11px; } .section-fm-schedule .options__content.fm-schedule-details > li { background: #ffffff; margin-bottom: 10px; } .section-fm-schedule .options__content.fm-schedule-details p.fm-time-description, .section-fm-schedule .options__content.fm-schedule-details div.fm-time-description p { line-height: 130%; } .section-fm-schedule .options__content.fm-schedule-details .fm-social-icons { clear: both; margin-left: auto; margin-right: auto; width: 92px; } .section-fm-schedule .options__content.fm-schedule-details .fm-social-icons > div { display: block; float: left; height: 35px; margin-right: 22px; overflow: hidden; transition: opacity 0.2s ease-out; width: 35px; } .section-fm-schedule .options__content.fm-schedule-details .fm-social-icons > div:last-child { margin-right: 0; } .section-fm-schedule .options__content.fm-schedule-details .fm-social-icons > div a { font-size: 37px; } .section-fm-schedule .options__content.fm-schedule-details .fm-social-icons > div a.icon-facebook { color: #3b5998; } .section-fm-schedule .options__content.fm-schedule-details .fm-social-icons > div a.icon-twitter { color: #00b6f1; } .section-fm-schedule .options__content.fm-schedule-details .fm-social-icons > div:hover { opacity: 0.9; } .section-fm-schedule .time-invisible { background: transparent; } .section-fm-schedule .time-invisible * { color: transparent; } .fm-schedule-timeslot .fm-time-container { border-radius: 50%; height: 180px; margin-right: 13px; min-height: auto; overflow: hidden; padding: 50px 3px 0; position: relative; transition: background 0.2s ease-out; width: 180px; } .fm-schedule-timeslot .fm-time-container * { text-align: center; } .fm-schedule-timeslot .fm-time-container div.fm-time-container, .fm-schedule-timeslot .fm-time-container div.options__nav.swiper { pointer-events: none; } @media (min-width: 0) { .section-fm-schedule .fm-schedule-days { margin-bottom: 10px; } .section-fm-schedule .fm-schedule-days li { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 18px; background: #ffffff; margin-bottom: 10px; padding: 10px 11px; text-align: left; } .section-fm-schedule .fm-schedule-days li:last-child { margin-bottom: 0; } .section-fm-schedule .fm-schedule-days li a { color: #009639; } .section-fm-schedule .fm-schedule-days .active { background: #009639; } .section-fm-schedule .fm-schedule-days .active a { color: #ffffff; } .section-fm-schedule .fm-schedule-details > li { padding-top: 20px; } .section-fm-schedule .fm-schedule-details > li p.fm-time-description, .section-fm-schedule .fm-schedule-details > li div.fm-time-description p { text-align: center; max-width: 700px; margin-right: auto; margin-left: auto; } .section-fm-schedule .fm-schedule-details > li h2 { position: relative; } .section-fm-schedule .fm-schedule-details > li > h2 { margin-bottom: 14px; } .section-fm-schedule .fm-schedule-details p.fm-time-description, .section-fm-schedule .fm-schedule-details div.fm-time-description p { font-size: 16px; margin-bottom: 21px; padding: 0 23px; } .section-fm-schedule .fm-schedule-details .fm-social-icons { margin-bottom: 27px; } .fm-schedule-days { display: none; } .fm-schedule-days li span { background: url("/etc/designs/P/5631383682678784/clientlib/img/btn-plus-sprite-SM.png") no-repeat; float: right; height: 15px; overflow: hidden; position: relative; top: 3px; width: 15px; } .fm-schedule-days li { transition: all 0.2s ease-out; } .fm-schedule-days li.active span { background: url("/etc/designs/P/5631383682678784/clientlib/img/btn-minus-sprite-SM.png") no-repeat; } .fm-schedule-day { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 18px; color: #009639; background: #ffffff; box-sizing: border-box; cursor: pointer; display: block; height: 40px; margin-bottom: 10px; padding: 10px 11px; text-align: left; text-transform: uppercase; width: 100%; transition: background 0.2s ease-out; } .fm-schedule-day .fm-mobile-day-btn { background: url("/etc/designs/P/5631383682678784/clientlib/img/btn-plus-sprite-SM.png") no-repeat; float: right; height: 15px; overflow: hidden; position: relative; top: 3px; width: 15px; } .fm-schedule-day.active { background: #009639; color: #ffffff; } .fm-schedule-day.active .fm-mobile-day-btn { background: url("/etc/designs/P/5631383682678784/clientlib/img/btn-minus-sprite-SM.png") no-repeat; } } @media (min-width: 768px) { .section-fm-schedule .fm-schedule-day { display: none; } .section-fm-schedule .fm-schedule-days { display: block; margin-bottom: 20px; text-align: center; } .section-fm-schedule .fm-schedule-days span { display: none; } .section-fm-schedule .fm-schedule-days li { background: transparent; display: inline-block; font-size: 16px; margin: 0 6px 0 0; padding: 7px 10px 8px; text-transform: uppercase; } .section-fm-schedule .fm-schedule-days li:last-child { margin-right: 0; } .section-fm-schedule .fm-schedule-days li:hover { background: #ffffff; } .section-fm-schedule .fm-schedule-days li:hover a { color: #009639; } .section-fm-schedule .fm-schedule-days li a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; } .section-fm-schedule .fm-schedule-days .active { background: #ffffff; } .section-fm-schedule .fm-schedule-days .active a { color: #000000; } .section-fm-schedule .fm-schedule-details > li { padding-top: 40px; } .section-fm-schedule .fm-schedule-details > li > h2 { margin-bottom: 28px; } .section-fm-schedule .fm-schedule-details p.fm-time-description { font-size: 18px; margin-bottom: 28px; } .section-fm-schedule .fm-schedule-details .fm-social-icons { margin-bottom: 55px; } .fm-schedule-day { display: none; } } @media (min-width: 1024px) { .section-fm-schedule .fm-day-shelf .fm-schedule-timeslot.active a.btncircle, .section-fm-schedule .fm-day-shelf .fm-schedule-timeslot:hover a.btncircle { background-size: 300px 200px; opacity: 1; } } @media (min-width: 1200px) { .section-fm-schedule .fm-day.shelf a.btncircle { opacity: 0; transition: opacity 0.2s ease-out; } } .section-fm-schedule .swiper__items { -moz-transform: translate3d(0px, 0, 0); -moz-transition-property: -moz-transform, left, top, opacity; -moz-transition-timing-function: ease-in-out; -ms-transform: translate3d(0px, 0, 0); -ms-transition-property: -ms-transform, left, top, opacity; -ms-transition-timing-function: ease-in-out; -o-transform: translate3d(0px, 0, 0); -o-transition-property: -o-transform, left, top, opacity; -o-transition-timing-function: ease-in-out; -webkit-transform: translate3d(0px, 0, 0); -webkit-transition-property: -webkit-transform, left, top, opacity; -webkit-transition-timing-function: ease-in-out; transform: translate3d(0px, 0, 0); transition-property: transform, left, top, opacity; transition-timing-function: ease-in-out; } .options .FMScheduler > .options__content > li { display: none; opacity: 1; transition: .9s; } .options .FMScheduler > .options__content > li.selected, .options .FMScheduler > .options__content > li.fadein { display: block; } .options .FMScheduler > .options__content > li.fade, .options .FMScheduler > .options__content > li.fadein { opacity: 0; } .section-fm-player-wrapper .section-fm-schedule .FMProgramScheduler .section-fm-schedule { display: none; } /* ======================================================================== SECTIONS: FM SLIDER - COMMON ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #LineHeight */ /* #Background*/ /* :END VARIABLES */ /* COKE FM SLIDER */ /* Roller v3.1.6 - 2014-07-08 A jQuery plugin for simple content carousels. Part of the Formstone Library. http://formstone.it/roller/ Copyright 2014 Ben Plum; MIT Licensed */ #pieLegend, .pieLegend { margin: 35px 0; } .roller * { -moz-user-select: none; -ms-user-select: none; -o-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .roller, .roller .roller-viewport { position: relative; } .roller { width: 100%; } .roller .roller-canister { -moz-transform: translate3d(0, 0, 0); -moz-transition: -moz-transform 0.4s ease; -ms-transform: translate3d(0, 0, 0); -ms-transition: -ms-transform 0.4s ease; -o-transform: translate3d(0, 0, 0); -o-transition: -o-transform 0.4s ease; -webkit-transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform 0.4s ease; margin: 0; overflow: hidden; position: relative; transform: translate3d(0, 0, 0); transition: transform 0.4s ease; } .roller .roller-item { float: left; margin: 0; } .roller .roller-canister, .roller .roller-item { -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: margin 0.3s ease-out; } /* !Controls & Pagination */ .roller .roller-controls, .roller .roller-pagination { display: none; margin: 0; padding: 0; text-align: center; width: 100%; } .roller .roller-controls.visible, .roller .roller-pagination.visible { display: none; display: block; } .roller .roller-controls { cursor: default; } .roller .roller-controls.enabled, .roller .roller-page { cursor: pointer; } /* !Captions */ .roller .roller-caption { display: none; } .roller .roller-caption.active { display: block; } /* !Single */ .roller.single .roller-item { display: none; } .roller.single .roller-item.active { display: block; } .roller-item-image img { display: block; /*width: 100%;*/ margin: 0 auto 15px; } .roller-content { width: 100%; } /* Between styling? */ .section-fm-slider h2.headline { margin: 0 auto 13px; } .section-fm-slider h3.subheadline { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 16px; margin: 0 0 22px; text-transform: none; } .section-fm-slider div.fm-slider-host-image { margin: 0 auto 28px; } .section-fm-slider div.fm-slider-host-image a .elm-img { box-shadow: none; height: 90px; width: 90px; } .section-fm-slider div.fm-slider-host-image a .elm-img img { left: 0; position: absolute; top: 0; width: 100%; } .section-fm-slider .section-share { float: none; padding-top: 0; } .roller-item { background: #fff; text-align: center; } .roller-item p.fm-description { font-size: 14px; line-height: 130%; margin-bottom: 12px; margin-top: 8px; } .roller-control { background: url("/etc/designs/P/5631383682678784/clientlib/img/bg_direction_nav_hover.png") no-repeat; cursor: pointer; display: block; height: 43px; margin-top: -36px; position: absolute; text-indent: -9999px; top: 50%; transition: all 0.1s ease-out; width: 28px; } .roller-control.previous { background-position: 0 -41px; left: 10px; opacity: 1; transition: none; } .roller-control.previous:hover { background-position: 0 1px; transition: none; } .roller-control.next { background-position: -28px -41px; opacity: 1; right: 10px; transition: none; } .roller-control.next:hover { background-position: -28px 1px; transition: none; } .roller .roller-pagination.visible { display: none; } h3.roller-content-question { font-size: 20px; line-height: 120%; margin-bottom: 15px; padding: 0 30px; text-transform: none; } @media screen and (min-width: 568px) { h3.roller-content-question { font-size: 36px; } } .roller-content-poll-options li { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 16px; width: 100%; height: 30px; margin-bottom: 10px; } .roller-content-poll-options li .fm-poll-image-text { position: relative; } .roller-content-poll-options li:last-child { margin-bottom: 0; } .roller-content-poll-options li .roller-content-option-name { color: #009639; font-size: 16px; padding: 12px 13px; position: relative; z-index: 5; } .roller-item-poll .roller-content-poll-options li:hover .fm-poll-image-text { background: #ddd; } .roller-item-poll-no-image li.option { height: 40px; } .roller-item-poll-no-image div.vote-percentage { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; color: #000000; height: 100%; left: 0; position: absolute; text-align: left; top: 0; width: 50px; z-index: 5; } .roller-item-poll-no-image ul.roller-content-poll-options { margin: 0 auto; } .roller-item-results .fm-poll-image-text { background: #ffffff; } .roller-item-results div.content-percent-bar { background: #ddd; display: block; height: 100%; left: 0; position: absolute; top: 0; z-index: 1; } .roller-item-poll-image .roller-content-poll-options { margin: 0 auto; max-width: 420px; } .roller-item-poll-image li.option { height: 65px; margin-right: 10px; padding-left: 75px; position: relative; text-align: left; } .roller-item-poll-image li.option img { display: inline-block; height: 65px; left: 0; margin-bottom: 0; position: absolute; top: 0; width: 65px; } .roller-item-poll-image li.option .roller-content-poll-option-image-container { height: 65px; left: 0; position: absolute; top: 0; width: 65px; } .roller-item-poll-image li.option .roller-content-poll-option-image-container img { z-index: 1; } .roller-item-poll-image li.option .roller-content-poll-option-image-container p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; color: #ffffff; position: relative; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000)"; background: rgba(0, 0, 0, 0.3); display: block; height: 65px; padding-top: 25px; text-align: center; width: 65px; z-index: 2; } .roller-item-poll-image li.option .roller-content-poll-option-image-container span.option-number { font-size: 25px; letter-spacing: -1px; } .roller-item-poll-image li.option .roller-content-poll-option-image-container span.option-percent { font-size: 13px; left: 1; position: relative; top: -7px; } .roller-item-poll-image li.option .fm-poll-image-text { height: 100%; } .roller-item-poll-image.roller-item-poll li.option .fm-poll-image-text { background: #ffffff; } .roller-item-poll li.option:hover .content-percent-bar, .roller-item-poll li.option:hover .fm-poll-image-text { background: #ddd; } .roller-item-poll li.option:hover span.option-number, .roller-item-poll li.option:hover span.option-percent { color: #009639; } .roller-item-poll li.option .fm-poll-image-text { background: #ffffff; } .roller-item-results li.option:hover span.option-number, .roller-item-results li.option:hover span.option-percent { color: #ffffff; } li.option { position: relative; } .roller-item-poll li.option:hover .content-percent-bar { background: #ddd; } /* Disabled styling below */ .roller-viewport { margin: 0 auto; max-width: 740px; overflow: hidden; } .roller-viewport .roller-item { background: #ffffff; width: 100%; } .roller-viewport .roller-item .roller-content-title { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 16px; } .roller-viewport .roller-item.roller-item-poll .roller-content-title, .roller-viewport .roller-item.roller-item-results .roller-content-title { margin-bottom: 14px; } .roller-viewport .roller-item.roller-item-image img { max-width: 482px; } .roller-target { margin: 0 auto; max-width: 1022px; } .roller-target * { box-sizing: border-box; } .roller-item-piechart img { margin-left: auto; margin-right: auto; } .roller-item-piechart .swatch { height: 24px; width: 24px; } .roller-item-piechart .option .swatch, .roller-item-piechart .option .vote-percentage { float: left; } .roller-item-piechart .option1 .swatch { background: #e4e4e4; } .roller-item-piechart .option2 .swatch { background: #a0a0a0; } .roller-item-piechart .option3 .swatch { background: #818181; } .roller-item-piechart .option4 .swatch { background: #414141; } .roller-item-piechart .option5 .swatch { background: #000000; } .roller-item-piechart .roller-content-poll-options li .roller-content-option-name { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; color: #009639; padding: 0; position: absolute; } .roller-item-piechart .roller-content-option-name { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; float: left; text-align: left; top: -3px; } .roller-item-piechart .swatch { margin-right: 10px; } .roller-item-piechart .vote-percentage { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; margin-right: 8px; } .roller-item-piechart .roller-content-poll-options { margin: 0 auto; } .roller-item-poll li.option { cursor: pointer; } .roller-item-poll .fm-poll-result { display: none; } .roller-item-results .fm-poll-result { display: block; } .roller-item-results .roller-content-poll-option-image-container .fm-poll-result { display: inline; } .roller-item-results li.option:hover .content-percent-bar { background: #ddd; } @media screen and (max-width: 647px) { .section-fm-slider .fm-slider-host-image { display: none; } .section-fm-slider .roller-viewport { width: 100%; } .section-fm-slider .roller .roller-item { margin: 0 0 10px; width: 100%; /* not entirely sure that this works, substituting for important below */ } .section-fm-slider .roller-item { padding: 10px; } .section-fm-slider .roller-item img { width: 100%; } .section-fm-slider .roller-item .roller-content-video, .section-fm-slider .roller-item img { margin-bottom: 10px; } .section-fm-slider .roller-item .roller-content-title { margin: 0 0 10px; } .section-fm-slider .roller-item h4.roller-content-title { margin-left: auto; margin-right: auto; width: 230px; } .section-fm-slider .roller-item-poll-no-image { padding: 17px 10px 10px; } .section-fm-slider .roller-item-poll-no-image div.vote-percentage { left: 10px; top: 11px; } .section-fm-slider .roller-item-poll-no-image.roller-item-results .section-share { margin: 22px 0 8px; } .section-fm-slider .roller-item-poll-no-image.roller-item-results .roller-content-option-name { margin-left: 40px; } .section-fm-slider .roller-item-poll-image { padding: 17px 10px 10px; } .section-fm-slider .roller-item-poll-image.roller-item-results .section-share { margin: 20px 0 12px; } .section-fm-slider .roller-item-poll-image li.option { padding-left: 90px; } .section-fm-slider .roller-item-piechart { padding: 17px 14px; } .section-fm-slider .roller-item-piechart img { margin-bottom: 20px; width: 181px; } .section-fm-slider .roller-item-piechart .roller-content-poll-options { width: 260px; } .section-fm-slider .roller-item-piechart .vote-percentage { font-size: 16px; } .section-fm-slider .roller-item-piechart .roller-content-option-name { left: 80px; } .section-fm-slider .roller-item-piechart .section-share { margin: 24px 0 5px; } .section-fm-slider .roller-item-image { padding: 10px 10px 0; } .section-fm-slider .roller-item-image .section-share { margin-bottom: 14px; } .section-fm-slider .roller-item-video { padding: 10px 10px 0; } .section-fm-slider .roller-item-video .section-share { margin-bottom: 16px; } } @media screen and (min-width: 648px) { .roller-viewport .roller-item { margin: 0 10px 30px 0; } .roller-viewport .roller-item:last-child { margin-right: 0; } .roller-viewport .roller-item .roller-content-video { margin-bottom: 20px; } .roller-viewport .roller-item h3.roller-content-question { margin-bottom: 28px; } .roller-item-poll-no-image { padding: 27px 30px 53px; } .roller-item-poll-no-image.roller-item-results .section-share { margin: 48px 0 -5px; } .roller-item-poll-no-image.roller-item-poll .roller-content-poll-options { max-width: 330px; } .roller-item-poll-image { padding: 27px 30px 53px; } .roller-item-poll-image.roller-item-results .section-share { margin: 33px 0 -15px; } .roller-item-piechart { padding: 30px; } .roller-item-piechart .section-share { margin: 41px 0 8px; } .roller-item-video { padding: 58px 44px 36px; } .roller-item-video .section-share { margin: 25px 0 -5px; } .roller-item-image { padding: 58px 58px 33px; } .roller-item-image .section-share { margin: 17px 0 -25px; } .roller-item-image .roller-content-title { margin-bottom: 0; } .roller-item-poll-no-image div.vote-percentage { font-size: 30px; left: -86px; text-align: right; top: 10px; width: 75px; } .roller-item-piechart img { margin-bottom: 30px; } .roller-item-piechart .roller-content-poll-options { width: 305px; } .roller-item-piechart .vote-percentage { font-size: 30px; } .roller-item-piechart .roller-content-option-name { left: 130px; } } @media screen and (min-width: 648px) and (max-width: 715px) { .roller-item-poll-no-image.roller-item-results .roller-content-poll-options { max-width: 280px; } } @media screen and (min-width: 716px) { .roller-item-poll-no-image.roller-item-results .roller-content-poll-options { max-width: 330px; } } @media screen and (min-width: 648px) and (max-width: 760px) { .roller-viewport { width: 73.267327%; } } @media screen and (max-width: 760px) { .roller-control .next { right: 10px; } .roller-control .next:hover { right: 5px; } } @media screen and (min-width: 761px) and (max-width: 1030px) { .roller-viewport { width: 73.267327%; } } @media screen and (min-width: 1031px) { .roller-viewport { width: 740px; } } /* ======================================================================== SECTIONS: LIFEFEED ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #FontFamily */ /* #Color */ /* #FontWeight */ /* #LineHeight */ /* #BackgroundColor */ /* :END VARIABLES */ .flex-grid section.section-livefeed { background-color: #ffffff; } section.section-livefeed .content-default .content-byline .content-author-name a, section.section-livefeed .content-default a, section.section-livefeed a { color: #009639; transition: all 0.2s ease-out; } section.section-livefeed .content-default .content-byline .content-author-name a:hover, section.section-livefeed .content-default a:hover, section.section-livefeed a:hover { color: #006342; font-style: normal; text-decoration: none; transition: all 0.1s ease-in; } section.section-livefeed .hub-modal.content-author-name a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; } section.section-livefeed .content-feed { border: none; border-radius: 0; } section.section-livefeed .content .content-attachment > a > img, section.section-livefeed .content .content-attachment > img, section.section-livefeed .content .content-attachment-photo, section.section-livefeed .content .content-attachment-video, section.section-livefeed .content-default.content-with-image .content-attachment .content-attachment-frame, section.section-livefeed .content-default.content-with-image .content-header, section.section-livefeed .content-feed.content-with-image .content-attachment .content-attachment-photo, section.section-livefeed .hub-list article.content, section.section-livefeed .lf-thread-default.lf-thread-leaf[data-thread-nest-level='0'] > .lf-thread-root-content { border: none; border-radius: 0; box-shadow: none; } section.section-livefeed .content-body-main p { font-size: 12px; } section.section-livefeed.dark-bg .livefeeds-feed, section.section-livefeed.mild-bg .livefeeds-feed { background: #ffffff; border-bottom: 10px solid #ffffff; border-top: 10px solid #ffffff; } section.section-livefeed.dark-bg .content-default.content-with-image .content-attachment .content-attachment-frame, section.section-livefeed.dark-bg .hub-list article.content, section.section-livefeed.dark-bg .lf-thread-default.lf-thread-leaf[data-thread-nest-level='0'] > .lf-thread-root-content, section.section-livefeed.mild-bg .content-default.content-with-image .content-attachment .content-attachment-frame, section.section-livefeed.mild-bg .hub-list article.content, section.section-livefeed.mild-bg .lf-thread-default.lf-thread-leaf[data-thread-nest-level='0'] > .lf-thread-root-content { border: 1px solid #b9b9b9; } .hub-modal .content-attachments-gallery { margin: 10px !important; } .hub-modal-content-view iframe { margin: 60px auto 0 !important; } .livefeeds .livefeeds-container { float: left; margin: 0 2.5% 35px; width: 95%; } .livefeeds .livefeeds-container .hub-wall-column { width: 100%; } .livefeeds-container.extendedWidth .hub-wall-column { width: 100%; } .livefeeds-container.extendedWidth .content .content-footer .hub-content-share { background-image: none; } .livefeeds { float: left; height: auto; margin: 0 auto; width: 100%; } .livefeeds-title { letter-spacing: -0.03em; padding-bottom: 15px; } .livefeeds-feed { background: #b9b9b9; border-bottom: 10px solid #b9b9b9; border-top: 10px solid #b9b9b9; height: 400px; overflow-x: hidden; overflow-y: auto; padding: 0 10px; } .livefeeds-feed section { float: none; overflow: inherit; padding-top: 0; width: auto; } .livefeeds-facebook-head, .livefeeds-instagram-head, .livefeeds-rss-head, .livefeeds-twitter-head, .livefeeds-youtube-head { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "FM-Player"; font-size: 35px; font-style: normal; font-variant: normal; font-weight: normal; height: 30px; line-height: 1; margin: 0 auto; padding-bottom: 15px; text-transform: none; width: 30px; } .livefeeds-instagram-head:before { content: "\f16d"; } .livefeeds-facebook-head:before { color: #3B5998; content: "\f082"; } .livefeeds-twitter-head:before { color: #55ACEE; content: "\f099"; } .livefeeds-youtube-head:before { color: #e52d27; content: "\f166"; } .livefeeds-rss-head:before { color: #FF6600; content: "\f143"; } .livefeeds-feed-facebook .content .content-source-logo, .livefeeds-feed-instagram .content .content-source-logo, .livefeeds-feed-rss .content .content-source-logo, .livefeeds-feed-youtube .content .content-source-logo { background-image: none; } #brandYoutube .content .content-source-logo { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: block; font-family: "FM-Player"; font-style: normal; font-variant: normal; font-weight: normal; height: 22px; text-transform: none; width: 40px; } #brandYoutube .content .content-source-logo:hover { text-decoration: none; } #brandYoutube .content .content-source-logo .content-source-logo { display: none; } #brandYoutube .content .content-source-logo:before { content: "\ea9a"; } .livefeeds-feed-twitter .content .content-footer { padding-bottom: 17px; } .livefeeds-feed-nocontent-text { color: #009639; padding: 50px 35px; } .dark-bg.has-bg-img .livefeeds-feed-nocontent-text { color: #009639; } .livefeeds-feed-twitter .content-instagram { display: none !important; } .livefeeds-feed-instagram .content-tweet { display: none !important; } .hub-list > section { padding-top: 0; } .hub-list > section > article.content { border: 0 important; padding-bottom: 0 !important; } .lf-thread-default.lf-thread-leaf[data-thread-nest-level='0'] > .lf-thread-root-content { border: 0 important; } .livefeeds-container.livefeeds-ie8 { display: none; } .ie8 .livefeeds-container.livefeeds-ie8 { display: block; } .ie8 .livefeeds-container { display: none; } /* 768px ======================== */ @media (min-width: 768px) { section.section-livefeed { padding-bottom: 28px; } .livefeeds { float: left; height: auto; margin: 0 auto; width: 100%; } .livefeeds.col2.items2 .livefeeds-container:first-child { margin-left: 18%; } .livefeeds.col2.items1 .livefeeds-container { left: 0; margin-left: 18%; } .livefeeds .livefeeds-container { float: left; margin: 0 5px; width: 32%; } .livefeeds .livefeeds-container .hub-wall-column { width: 100%; } .livefeeds .livefeeds-container.extendedWidth .hub-wall-column { width: 50%; } .livefeeds.col3.items2 .livefeeds-container.extendedWidth { width: 64%; } .livefeeds.col2.items1 .livefeeds-container.extendedWidth { width: 64%; } .livefeeds.col2.items1 .livefeeds-container.extendedWidth .hub-wall-column { width: 50%; } .livefeeds.col3.items3 .livefeeds-container { width: 32%; } .livefeeds.col3.items3 .livefeeds-container .hub-wall-column { width: 100%; } .livefeeds-container:last-child { margin-right: 0; } .livefeeds.items1 .livefeeds-container { float: left; left: 50%; margin-left: -16%; position: relative; width: 32%; } } /* 1200px ======================== */ @media (min-width: 1200px) { section.section-livefeed .main { margin: 0 auto; max-width: 100%; position: relative; width: 100%; } .livefeeds-container:first-child { margin-left: 0; } .livefeeds.col2.items2 .livefeeds-container:first-child { margin-left: 18%; } .livefeeds.col1.items1 .livefeeds-container { float: none; margin-left: calc(50% - 155px); position: static; width: 32%; } .livefeeds.col2.items1 .livefeeds-container { float: none; margin-left: calc(50% - 302px); position: static; width: 32%; } } .ie9 section.section-livefeed .content-default, .ie9 section.section-livefeed .content-default .content-body, .ie9 section.section-livefeed .content-feed, .ie9 section.section-livefeed .content-feed .content-body { font-family: helvetica, arial, sans-serif; } .ie9 section.section-livefeed a, .ie9 section.section-livefeed strong { font-family: helvetica, arial, sans-serif; } .ie9 section.section-livefeed .hub-modal.content-author-name a { font-family: helvetica, arial, sans-serif; } /* ======================================================================== SECTIONS: LIVEFYRE ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #BackgroundColor */ /* :END VARIABLES */ .fyre-cp-form .fyre-cp-form-header { background: none; border-top: none; height: 35px; padding-top: 13px; } .fyre-cp-modal section { padding-top: 0; } .fyre-cp-modal .fyre-cp-modal-header { width: 97%; } .fyre-modal .fyre-modal-textfield { height: 38px; padding: 5px 5%; } #lf_comments { background: #ffffff; margin: 35px auto; max-width: 440px; padding: 20px; /* change all the form fonts */ /* add some space between post bar and comment box */ /* font-sizes */ /* alter the text box */ /* get rid of the styling on the button bar */ /* Post Comment button styling */ } #lf_comments .fyre-help { display: none; } #lf_comments .fyre-comment-wrapper { position: relative; } #lf_comments a:hover { color: #000000; } #lf_comments .fyre-editor .fyre-editor-container .fyre-editor-editable { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 12px; color: #a7a7a7; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; -webkit-border-radius: 0; background-color: #f6f6f6; border: 0; border-radius: 0; } #lf_comments .fyre-comment-body { float: left; height: auto; overflow: normal; padding: 0; width: auto; } #lf_comments .fyre-comment-body p { text-align: left; } #lf_comments .fyre .fyre-comment-article, #lf_comments .fyre .fyre-comment-stream, #lf_comments .fyre .fyre-stream-livecount, #lf_comments .fyre .fyre-stream-sort, #lf_comments .fyre .fyre-stream-stats, #lf_comments .fyre .fyre-user-loggedout, #lf_comments .fyre-editor .fyre-editor-toolbar .goog-toolbar > div { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; } #lf_comments .fyre-editor .fyre-editor-toolbar { margin-top: 10px; } #lf_comments .fyre .fyre-user-loggedout, #lf_comments .fyre a { color: #009639; } #lf_comments .fyre .fyre-user-loggedout:hover, #lf_comments .fyre a:hover { color: #474747; } #lf_comments .fyre .fyre-comment-divider > a, #lf_comments .fyre .fyre-comment-divider > a:hover { left: 0; transition: background 0s; } #lf_comments .fyre a.fyre-comment-username { font-size: 12px; } #lf_comments .fyre .fyre-comment p { font-size: 11px; } #lf_comments .fyre .fyre-comment-wrapper time.fyre-comment-date, #lf_comments .fyre-comment-action-button { font-size: 10px; } #lf_comments .fyre-editor .fyre-editor-container .fyre-editor-editable.editable { -webkit-box-shadow: none; border-radius: 0; box-shadow: none; } #lf_comments .fyre-editor .fyre-editor-toolbar .goog-toolbar > div { background: none; border: none; float: left; } #lf_comments .fyre-editor .fyre-editor-toolbar .goog-toolbar > div .goog-inline-block:hover { color: #656565; } #lf_comments .fyre-editor .fyre-editor-toolbar .fyre-share-button div.fyre-button-right-inner-box { background: none; } #lf_comments .fyre-editor .fyre-editor-toolbar .goog-toolbar .fyre-post-button { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500 !important; font-style: normal; color: #ffffff; background: #00a9e0; display: inline-block; float: right; height: 30px; padding: 1px 0 0; text-align: center; text-transform: uppercase; transition: all 0.2s ease-out; } #lf_comments .fyre-editor .fyre-editor-toolbar .goog-toolbar .fyre-post-button:hover { transition: all 0.2s ease-in; background: #003087; color: #ffffff; } #lf_comments .fyre .fyre-editor .fyre-editor-toolbar, #lf_comments .fyre-editor .fyre-editor-toolbar .goog-toolbar > div, #lf_comments .fyre-editor .fyre-editor-toolbar .goog-toolbar > div.fyre-button-right.fyre-post-button { border-radius: 0; } #lf_comments .fyre-editor .fyre-editor-toolbar .goog-toolbar > div.fyre-button-right.fyre-post-button .fyre-button-right-outer-box { border: 0; border-radius: 0; padding: 0; } @media screen and (max-width: 480px) { #lf_comments .fyre-editor .fyre-editor-toolbar .goog-toolbar > div.fyre-button-right.fyre-post-button .fyre-button-right-outer-box { padding: 0 10px; } } #lf_comments .fyre-editor .fyre-editor-toolbar .goog-toolbar > div.fyre-button-right.fyre-post-button .fyre-button-right-outer-box .fyre-button-right-inner-box { color: #ffffff; font-size: 11px; text-shadow: none; } #lf_comments .fyre-editor .fyre-editor-container .fyre-editor-editable li, #lf_comments .fyre-editor .fyre-editor-container .fyre-editor-editable p { color: #3a3a3a; text-align: left; } #lf_comments .fyre .fyre-comment-author-tag, #lf_comments .fyre .fyre-moderator { background-color: #8e8e8e; } #lf_comments footer.fyre-comment-footer > div.fyre-editor.fyre-edit-editor { margin-left: 38px; width: 375px; } .fyre header.fyre-comment-head { position: relative; } .fyre footer.fyre-comment-footer, .fyre header.fyre-comment-head { background: transparent; border: 0 solid transparent; clear: both; float: none; height: auto; padding: 0; width: auto; } /* 0px =========================== */ @media (min-width: 0) { #lf_comments { margin: 35px 5px; } #lf_comments .fyre .fyre-editor .fyre-editor-toolbar .goog-toolbar .fyre-embed-button { border-left: none !important; border-right: none !important; } #lf_comments .fyre .fyre-editor .fyre-editor-toolbar, #lf_comments .fyre .fyre-editor .fyre-editor-toolbar .goog-toolbar .fyre-post-button { border-radius: 0 !important; } #lf_comments .fyre-editor .fyre-editor-toolbar .goog-toolbar .fyre-post-button { float: right !important; max-width: 160px; } #lf_comments .fyre .fyre-comment-action-button { -webkit-border-radius: 0; background-image: none; border: none; color: #009639 !important; text-align: inherit; } #lf_comments .fyre .fyre-comment-action-button:hover { color: #000000 !important; } #lf_comments .fyre .fyre-comment-article, #lf_comments .fyre .fyre-comment-stream { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 11px; } #lf_comments .fyre a.fyre-comment-flag-mobile-btn { clear: left; height: auto; margin-left: 0; min-width: auto; } #lf_comments .fyre.fyre-width-small .fyre-comment-actions { clear: left; } #lf_comments .fyre .fyre-comment-article .fyre-comment-footer { clear: both; margin: 0 0 5px 25px; } #lf_comments .fyre .fyre-comment-like-count { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 11px; } #lf_comments .fyre-editor { min-width: 230px; } #lf_comments .fyre .fyre-box-wrapper .fyre-logo-drop { left: -10px; } } /* =============================== */ /* 480px ======================== */ @media (min-width: 481px) { #lf_comments { margin: 35px auto; } #lf_comments .fyre-editor .fyre-editor-toolbar .goog-toolbar .fyre-post-button { width: 168px; } } /* =============================== */ /* 768px ======================== */ /* =============================== */ /* 1024px ======================== */ /* =============================== */ /* 1200px ======================== */ /* =============================== */ /* PRINT ======================== */ /* =============================== */ /* ======================================================================== SECTIONS: LOGIN ======================================================================== */ /* :START VARIABLES */ /* #background*/ /* #FontSize */ /* #Color */ /* :END VARIABLES */ /* 0px =========================== */ @media (min-width: 0) { .section-login { box-sizing: border-box; float: left; height: auto; padding: 10px; width: 100%; } .section-login .main { left: 0; margin: 0; width: 100%; } .section-login .main a.btn-fb-login { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 15px; color: #ffffff; background: #37589B; box-sizing: border-box; cursor: pointer; float: left; height: 60px; padding: 20px 0 0; text-align: center; text-transform: uppercase; width: 100%; transition: all 0.2s ease-out; } .section-login .main a.btn-fb-login:hover { opacity: 0.8; transition: all 0.1s ease-in; } .section-login .main p.label { color: #676767; float: left; font-size: 16px; height: auto; margin: 10px 0; text-align: center; width: 100%; } .section-login .main .form-labels { float: left; font-size: 13px; height: auto; margin: 0 0 8px; width: 100%; } .section-login .main .form-labels input { color: #000000; float: left; text-indent: 4px; width: 20px; } .section-login .main .form-labels label { float: left; padding-top: 2px; width: auto; } .section-login .main .form-labels a.right { float: right; } .section-login .main .form-labels a.left { float: left; width: 100%; } .section-login .main .form-btns { float: left; height: auto; margin: 0 0 20px; width: 100%; } .section-login .main .form-btns .btn, .section-login .main .form-btns .gallery-main-carousel__overlay-action { padding: 2px 45px 0; } } /* =============================== */ /* ======================================================================== SECTIONS: MAP / LOCATION ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #FontWeight */ /* #LineHeight */ /* #Border */ /* #BackgroundColor */ /* :END VARIABLES */ /* Map Styles */ #location-wrapper *, #map-wrapper * { box-sizing: border-box; } #map-canvas { height: 355px; margin: 0; padding: 0; width: 100%; } @media (min-width: 768px) { #map-canvas { height: 500px; } } .Map.section { background: #ffffff; } #map-wrapper { background-color: #f1f1f1; padding: 0; } #map-wrapper .main { margin-top: 35px; padding-top: 30px; transition: all 0.2s ease-out; } @media (min-width: 1024px) { #map-wrapper .main { max-width: 54%; } } #map-wrapper #map-canvas { width: 100%; } #map-wrapper #field-n-map { float: left; position: relative; transition: all 0.2s ease-out; width: 100%; } #search-result { background: #ffffff; float: left; height: 500px; position: relative; width: 35%; } @media (min-width: 768px) { #search-result { box-shadow: -12px 0 0 0 rgba(0, 0, 0, 0.19); } } #search-result div.title-wrapper { left: 0; position: absolute; top: 0; } #search-result div.title-wrapper p.title { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 16px; color: #009639; } @media (max-width: 767px) { #map-wrapper .main { padding: 0; } #map-wrapper #field-n-map { padding: 20px 20px 0; width: 100% !important; } #search-result { height: auto; width: 100% !important; } #search-result .title-wrapper { height: auto !important; } #search-result #search-result-list { height: auto !important; overflow: visible !important; } } @media (max-width: 1024px) { #map-wrapper .main { position: relative; } } @media (max-width: 767px) { #map-wrapper .main { padding: 0; position: relative; } } #map-wrapper .search-wrapper { background: #009639; min-height: 63px; padding: 20px; position: relative; text-align: center; } #map-wrapper .search-wrapper::before { border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #009639; content: ''; height: 0; left: 50%; position: absolute; top: 100%; -ms-transform: translateX(-50%); transform: translateX(-50%); width: 0; z-index: 1; } #map-wrapper .search-wrapper .search-wrapper__search--container { position: relative; } @media screen and (min-width: 768px) { #map-wrapper .search-wrapper .search-wrapper__search--container { margin: 0 auto; width: 50%; } #map-wrapper .search-wrapper .search-wrapper__search--container #pac-input { width: 100%; } } #map-wrapper .search-wrapper .close-btn { color: #000000; font-size: 24px; left: auto; margin: 0; position: absolute; right: 12px; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } #location-wrapper .main .headline { margin-bottom: 10px; max-width: 100%; position: relative; text-transform: none; width: 100%; } @media screen and (max-width: 767px) { #location-wrapper .main .headline { margin: 20px 0; } } #location-wrapper .main .headline .eventcontrol-btn { bottom: -1px; color: #777777; cursor: pointer; font-size: 30px; height: auto; margin: 0; position: absolute; right: 5px; } #location-wrapper .main .headline .eventcontrol-btn.open:before { content: '+'; font-family: 'cc-go'; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; font-weight: bold; } #location-wrapper .main .headline .eventcontrol-btn.close:before { content: '\2212'; font-family: 'cc-go'; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; font-weight: bold; } #map-wrapper .search-wrapper p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 18px; line-height: 20px; color: #ffffff; text-align: center; text-transform: none; } #map-wrapper .search-wrapper input[type="text"] { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 18px; color: #777777; background: #ffffff; border: none; border: 1px solid #000000; margin: 0 auto; padding: 10px; padding-right: 40px; text-transform: none; width: 100%; } @media (max-width: 767px) { #map-wrapper .search-wrapper input[type="text"] { margin: 0 auto; width: 100%; } } .close-btn:before { content: '\e601'; font-family: 'cc-go'; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; } .map-container { margin-bottom: 35px; } @media (max-width: 767px) { .map-container { margin-bottom: 0; } } .map-marker { max-width: 250px; } .map-marker .status { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: normal; color: #009639; margin: 5px 0; text-align: left; vertical-align: top; } .map-marker .date { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; margin-bottom: 5px; } .map-marker .date span { display: block; } .map-marker .addr, .map-marker .description { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; } .map-marker .description { margin: 5px 0; } .map-marker .share-text, .map-marker p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 12px; line-height: 1.25em; color: #000000; text-align: left; margin-bottom: 0; } .map-marker p.title { color: #009639; font-size: 12px; font-weight: 700; line-height: 14px; margin-bottom: 5px; } #search-result .title-wrapper { color: #000000; height: 63px; padding: 16px; position: relative; position: absolute; width: 100%; } @media (max-width: 767px) { #search-result .title-wrapper { padding: 20px; } } #search-no-result { padding: 48px 6% 8%; } #search-result .title-wrapper p.title { font-size: 16px; font-weight: 700; line-height: 18px; margin: 0; text-align: left; } @media (max-width: 767px) { #search-result .title-wrapper p.title { font-size: 28px; text-align: center; } } #search-result .title-wrapper .close-btn { color: #000000; cursor: pointer; float: right; font-size: 18px; font-weight: bold; } #search-result .title-wrapper .close-btn:hover { color: #009639; transition: all 0.1s ease-in; } #location-wrapper .main .headline .eventcontrol-btn { color: #000000; cursor: pointer; float: right; font-size: 30px; font-weight: bold; } #location-wrapper .main .headline .eventcontrol-btn:hover { color: #000000; transition: all 0.1s ease-in; } #search-result #search-result-list { height: 437px; height: 100%; overflow: scroll; overflow-x: hidden; } #search-result #search-result-list li { border-bottom: 1px solid #f1f1f1; float: left; padding: 8%; width: 100%; } @media (max-width: 767px) { #search-result #search-result-list li { padding: 8%; } } #search-result #search-result-list li a { float: left; vertical-align: top; } #search-result #search-result-list li a img:first-child { display: block; float: none; vertical-align: top; } #search-result #search-result-list li a img { margin-bottom: 7px; vertical-align: top; } @media screen and (max-width: 767px) { #search-result #search-result-list li a img { left: 0; position: absolute; } #search-result #search-result-list li a .share-icons img { position: static; } #search-result #search-result-list li a > div, #search-result #search-result-list li a .branded.map-marker { padding-left: 48px; } } #search-result #search-result-list li:hover { background: #f1f1f1; transition: all 0.1s ease-in; } #search-result #search-result-list li hr { display: none; } #search-result #search-result-list li a { color: #000000; font-size: 12px; } #search-result #search-result-list li a.directionslink { color: #009639; margin-top: 5px; } #search-result #search-result-list li a.directionslink:hover { color: #000000; } @media (max-width: 767px) { .search-result-list__details { width: 100%; } } .search-result-list__details--container { display: inline-block; } .search-result-list__details--container p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 12px; text-align: left; } .search-result-list__details--container .addr, .search-result-list__details--container .date, .search-result-list__details--container .description { line-height: 1.25em; } .search-result-list__details--container .date, .search-result-list__details--container .title { margin-bottom: 10px; } .search-result-list__details--container .date, .search-result-list__details--container .description { margin-bottom: 5px; } .search-result-list__details--container .date { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; } .search-result-list__details--container .title { font-size: 12px; font-weight: 500; line-height: 14px; } #search-result #search-result-list li { padding: 20px; } #search-result #search-result-list li:first-child { padding-top: 48px; } .search-results-list__status--container .status { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: normal; text-align: left; vertical-align: top; } .search-results-list__status--container .status img { display: block; height: 35px; margin-top: 5px; width: 35px; } #search-result #search-result-list li a div p.title { color: #009639; font-size: 12px; font-weight: 700; line-height: 14px; } #search-result #search-result-list li a div .event-share { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; text-align: left; } #search-result .event-share { display: block; float: right; width: 100%; } /* Share styles */ #location-wrapper .share-text, #map-wrapper .share-text, #search-result .share-text { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; color: #009639; display: block; display: inline-block; } #location-wrapper .share-icons, #map-wrapper .share-icons, #search-result .share-icons { margin-top: 5px; min-height: 36px; } #location-wrapper .share-icons a, #map-wrapper .share-icons a, #search-result .share-icons a { float: left; margin-right: 10px; } #location-wrapper .share-icons a img, #map-wrapper .share-icons a img, #search-result .share-icons a img { height: 38px; position: static; width: 38px; } #location-wrapper .share-icons a:hover, #map-wrapper .share-icons a:hover, #search-result .share-icons a:hover { opacity: 0.8; transition: all 0.1s ease-in; } #search-result .share-icons { margin-right: 10px; } #map-wrapper .map-marker .event-share { margin-top: 10px; } #map-wrapper .map-marker .share-text { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; display: block; } #map-wrapper .map-marker .status { color: #000000; } #map-wrapper .map-marker .status img { display: none; } /* Event List Styles */ .Location.section { background: #ffffff; } #location-wrapper { background-color: #f1f1f1; clear: both; padding: 0 0 35px; } .dark-bg #location-wrapper, .light-bg #location-wrapper, .mild-bg #location-wrapper { background-color: #f1f1f1; } #location-wrapper #event-list .event-list__map-link > .event-col:not(.event-status) p:first-child { margin: 5px 10px 5px 0; } @media (min-width: 768px) { #map-wrapper .main { padding: 0 20px; } #location-wrapper .main { float: none; left: 0; margin: 0 auto; max-width: 100%; padding: 0 20px; } } @media screen and (min-width: 1024px) { #map-wrapper .main { max-width: 968px; padding: 0; } } @media (max-width: 767px) { #location-wrapper .main { margin: 0; padding: 0; position: relative; } } #location-wrapper #event-list { overflow: visible; width: auto; display: block; } #location-wrapper #event-list:after, #location-wrapper #event-list:before { clear: both; content: " "; display: table; } @media screen and (min-width: 1024px) { #location-wrapper #event-list { margin: 0 auto; max-width: 968px; } #location-wrapper #event-list li .event-list__map-link { padding: 0 20px; width: 100%; } } #location-wrapper #event-list li { background: #f1f1f1; border-bottom: 2px solid #ffffff; font-size: 12px; padding: 20px; } @media (min-width: 768px) { #location-wrapper #event-list li { float: left; width: 100%; } } @media (min-width: 1024px) { #location-wrapper #event-list li { padding: 20px 0; } } #location-wrapper #event-list li:hover { background: #ffffff; transition: all 0.1s ease-in; } #location-wrapper #event-list li .event-list__map-link { position: relative; z-index: 1; } @media (min-width: 1024px) { #location-wrapper #event-list li .event-list__map-link { margin: 0 auto; } } #location-wrapper #event-list li .event-list__map-link a { display: block; } #location-wrapper #event-list li .event-list__map-link a:first-child .event-col p { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; margin: 5px 0; } #location-wrapper #event-list li .event-list__map-link > a { margin-left: 0; } @media (min-width: 768px) { #location-wrapper #event-list li .event-list__map-link > a { float: left; min-height: 40px; width: 50%; z-index: 10; } #location-wrapper #event-list li .event-list__map-link > a .event-col { width: 46%; } } #location-wrapper #event-list li .directionslink { clear: left; } @media (min-width: 768px) { #location-wrapper #event-list li .event-col { border-right: 1px solid #ccc; float: left; min-height: 75px; width: 23.5%; } } @media (max-width: 767px) { #location-wrapper #event-list li { padding: 20px; } #location-wrapper #event-list li a.directionslink { clear: left; } } #location-wrapper #event-list li p { color: #000000; font-size: 12px; font-weight: 400; line-height: 1.25em; margin-bottom: 0; margin-right: 10px; text-align: left; } #location-wrapper #event-list li p.event-col__event-status { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: normal; color: #000000; display: block; margin: 10px 0; text-align: left; vertical-align: top; } @media (min-width: 768px) { #location-wrapper #event-list li p.event-col__event-status { margin-top: 0; } } #location-wrapper #event-list li p.event-col__event-status img { display: none; float: right; height: 35px; margin-left: 5px; width: 35px; } #location-wrapper #event-list li p.event-col__event-title { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 700; font-style: normal; font-size: 12px; line-height: 14px; color: #009639; margin-bottom: 7px; margin-right: 7px; } #location-wrapper #event-list .event-col { margin-right: 10px; } #location-wrapper #event-list .event-col.event-share { margin-right: 0; } #location-wrapper #event-list .event-col.event-status { margin-right: 0; } @media (min-width: 768px) { #location-wrapper #event-list .event-col.event-status { border-right: 0; min-height: 0; } } #location-wrapper #event-list li .event-share { margin-right: 0; } #location-wrapper #event-list li .event-share .share-icons a { width: auto; } @media (min-width: 768px) { #location-wrapper #event-list li .event-share { float: none; font-size: 12px; position: relative; text-align: left; width: auto; } } #location-wrapper .event-list-paginated { background-color: #009639; color: #ffffff; float: left; margin: 0 auto; max-width: 968px; overflow-wrap: break-word; padding: 15px; text-align: center; width: 100%; } @media screen and (min-width: 1024px) { #location-wrapper .event-list-paginated { float: none; } } .directionslink-icon { fill: #009639; margin-left: 4px; position: relative; top: 4px; width: 15px; } .directionslink { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; color: #009639; } .event-directionslink { line-height: 12px; margin: 5px 0; } .event-list-paginated__container { display: inline-block; } .event-list-paginated__buttons { background: #009639; border-radius: 50%; color: #ffffff; cursor: pointer; display: inline-block; float: left; height: 35px; margin: 5px; width: 35px; } .event-list-paginated__buttons:hover { background: #00a9e0; color: #ffffff; transition: all 0.1s ease-in; } .event-list-paginated__buttons.jp-current { background: #ffffff; color: #009639; } .event-list-paginated__buttons.jp-disabled, .event-list-paginated__buttons.jp-disabled:hover { background: none; color: #ffffff; } .event-list-paginated__buttons--icon { display: inline-block; font-size: 26px; height: 35px; left: 0; position: absolute; top: 15%; width: 35px; } .event-list-paginated__buttons--numbers { display: inline-block; float: left; } @media screen and (max-width: 480px) { .event-list-paginated__buttons--numbers { display: none; } } .event-list-paginated__buttons--numbers span { float: left; line-height: 45px; } .event-list-paginated__buttons--numbers a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; line-height: 35px; color: #ffffff; background: #009639; border-radius: 50%; cursor: pointer; float: left; height: 35px; margin: 5px; width: 35px; } .event-list-paginated__buttons--numbers a:hover { background: #00a9e0; color: #ffffff; transition: all 0.1s ease-in; } .event-list-paginated__buttons--numbers a.jp-current, .event-list-paginated__buttons--numbers a.jp-current:hover { background: #ffffff; color: #009639; } .event-list-paginated__buttons--numbers a.jp-disabled, .event-list-paginated__buttons--numbers a.jp-disabled:hover { background: rgba(225, 0, 0, 0.4); color: #ffffff; } .event-list-paginated__pagecount { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 14px; margin-top: 5px; } @media screen and (min-width: 481px) { .event-list-paginated__pagecount { display: none; } } .icon-cc-first { display: inline-block; } /* Pagination Styles */ .holder { margin: 15px 0; } .holder a { color: #3a3a3a; cursor: pointer; font-size: 12px; margin: 0 5px; } .holder a:hover { background-color: #474747; color: #ffffff; } .holder a.jp-previous { margin-right: 15px; } .holder a.jp-next { margin-left: 15px; } .holder a.jp-current, .holder a.jp-disabled, a.jp-current:hover, a.jp-disabled:hover { background: none; cursor: default; } .holder span { margin: 0 5px; } .jp-hidden { display: none; } .gm-style-iw { max-width: 470px; overflow: hidden; } .gm-style-iw .event-share, .gm-style-iw hr { display: none; } .gm-style-iw .search-result-list__details--container * { font-size: 18px; line-height: 25px; margin: 0; } .gm-style-iw .search-result-list__details--container p.title { color: #009639; } .gm-style-iw .search-result-list__details--container .date { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; } .gm-style-iw .search-results-list__status--container .status { font-size: 18px; line-height: 25px; margin: 0; } /* ======================================================================== SECTIONS: SITEMAP ======================================================================== */ /* :START VARIABLES */ /* #FontSize */ /* #Color */ /* #FontWeight */ /* #LineHeight */ /* #BackgroundColor */ /* :END VARIABLES */ .search-title { font-size: 30px; margin-bottom: 20px; margin-top: 0; } .search-result-topic { font-size: 18px; line-height: 20px; margin-bottom: 0; margin-top: 0; } .search-resultnumber { font-size: 15px; margin-bottom: 20px; margin-top: 0; } .section-search-pagination { padding-bottom: 80px; } .item a.item-img-wrap { width: 245px; } .item a.item-text-wrap { width: 730px; } .mobile-select-toggle.search-result-headline { line-height: 1.1em; padding-bottom: 10px; text-transform: lowercase; } .item a.item-text-wrap p { font-size: 16px; line-height: 1.5em; } section.section-searchtitle { padding-top: 10px; } .search-result-headline { padding-bottom: 10px; } h2.sitemap-parent-item { background-color: #009639; color: #ffffff; font-size: 20px; } .section-countries .flag-icon { -webkit-transform: translateY(-50%); display: inline-block; left: 0; max-width: 32px; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } .section-countries .flag-icon img { -ms-interpolation-mode: nearest-neighbor; display: block; image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; width: 100%; } .section-countries .country-name { position: relative; word-wrap: break-word; } @media screen and (max-width: 767px) { .section-countries #countries li.has-flag .flag-icon { left: 10px; } .section-countries #countries li.has-flag .country-name { padding-left: 50px; } .section-countries #countries .hide-flags-mobile .flag-icon { display: none; } .section-countries #countries .hide-flags-mobile li.has-flag .country-name { padding-left: 0; } } @media screen and (min-width: 768px) { .section-countries .flag-icon { max-width: 24px; } .section-countries .country-name { word-wrap: break-word; } .section-countries #countries .sitemap-col-title ul .has-flag a { padding: 0 6px 0 29px; } } /* 0px =========================== */ @media (min-width: 0) { .item a.item-text-wrap { margin-left: 5%; margin-right: 5%; width: 90%; } .item:hover .item-txt { background-color: transparent; } .section-filters { background-color: #b9b9b9; } } @media screen and (min-width: 0) and (max-width: 767px) { .has-bg-img.section-sitemap { background-size: 0 0; } } @media (min-width: 0) { section.section-sitemap { text-align: center; } section.section-sitemap .country-picker-wrap, section.section-sitemap .search-filter-wrap { display: none; } section.section-sitemap #showCountries, section.section-sitemap #showFilters { display: none; } section.section-sitemap .btn-plus { display: none; } section.section-sitemap .btn-shelf-wrap { float: none; left: auto; margin: 70px 0 0; width: 100%; } section.section-sitemap .sitemaplogo { display: block; padding: 20px 0 10px; } section.section-sitemap button { border: none; display: block; cursor: pointer; float: left; margin: 0; padding: 0; text-align: left; width: 100%; } section.section-sitemap .btn-sitemap { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 20px; line-height: 25px; color: #009639; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #ffffff; clear: left; display: block; height: auto; margin: 10px 0 0; padding: 12px 0 10px; text-align: left; text-indent: 10px; text-transform: uppercase; } section.section-sitemap .level1-link, section.section-sitemap .mobile-select-toggle { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 20px; line-height: 25px; color: #009639; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #ffffff; display: block; margin: 10px 0 0; padding: 12px 0 10px; text-align: left; text-indent: 10px; text-transform: uppercase; } section.section-sitemap .level1-link a, section.section-sitemap .mobile-select-toggle a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; } #countries .sitemap-col li, #filters .sitemap-col li { padding: 0; } #countries .sitemap-col li ul, #countries .sitemap-col li ul li, #filters .sitemap-col li ul, #filters .sitemap-col li ul li { padding: 6px 5px; text-transform: none; } #countries .sitemap-col, #filters .sitemap-col { padding: 0; } .nested-accordion { float: left; width: 100%; /* reset styles for accordion */ } .nested-accordion #sitemapsearchform { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; color: #009639; background-color: transparent; margin: 0; overflow: hidden; padding: 0; position: relative; width: 100%; } .nested-accordion #sitemapsearchform .search-icon { position: absolute; right: 12px; top: 25px; z-index: 500; } .nested-accordion #sitemapsearchform input[type="search"] { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; font-size: 20px; line-height: 25px; color: #009639; -webkit-appearance: none; border: 0; border-radius: 0; list-style: none; margin: 10px 0 0; overflow: hidden; padding: 12px 0 10px; text-align: left; text-indent: 11px; text-transform: uppercase; width: 100%; } .nested-accordion #sitemapsearchform input[type="search"]::-webkit-search-cancel-button, .nested-accordion #sitemapsearchform input[type="search"]::-webkit-search-decoration, .nested-accordion #sitemapsearchform input[type="search"]::-webkit-search-results-button, .nested-accordion #sitemapsearchform input[type="search"]::-webkit-search-results-decoration { display: none; } .nested-accordion #sitemapsearchform input[type="submit"] { display: none; } .nested-accordion .mobile-select-toggle.active .status-icon.adj-minus { padding-right: 4px; } .nested-accordion .sitemap-col li { color: #009639; font-size: 13px; line-height: 1em; list-style: none; margin: 0; padding: 6px 0; text-align: left; text-transform: uppercase; width: 100%; } .nested-accordion .sitemap-col li a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 16px; line-height: 18px; color: #009639; display: block; } .section-countries.light-bg .nested-accordion .sitemap-col li a { color: #009639; } .section-countries.mild-bg .nested-accordion .sitemap-col li a { color: #009639; } .section-countries.dark-bg .nested-accordion .sitemap-col li a { color: #009639; } .section-countries.light-bg .nested-accordion .sitemap-col li ul li a { color: #474747; } .section-countries.light-bg .nested-accordion .sitemap-col li ul li a:hover { color: #009639; } .section-countries.mild-bg .nested-accordion .sitemap-col li ul li a { color: #474747; } .section-countries.mild-bg .nested-accordion .sitemap-col li ul li a:hover { color: #009639; } .section-countries.dark-bg .nested-accordion .sitemap-col li ul li a { color: #474747; } .section-countries.dark-bg .nested-accordion .sitemap-col li ul li a:hover { color: #009639; } .nested-accordion .sitemap-col ul li { text-transform: none; } .nested-accordion .sitemap-col li.sitemap-col-title { padding: 0; } .nested-accordion .sitemap-col { background-color: transparent; padding: 0; } .nested-accordion .sitemap-col li ul { background-color: #b9b9b9; padding: 8px 0; } .nested-accordion .sitemap-col li ul li { padding: 6px 5px; } .nested-accordion .sitemap-col-title > a, .nested-accordion .sitemap-col-title h4 > a { -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #ffffff; color: #009639; display: block; font-size: 20px; line-height: 25px; margin: 1px 0 0; padding: 12px 0 10px; text-align: left; text-indent: 10px; } .nested-accordion .sitemap-col-title > a span.status-icon, .nested-accordion .sitemap-col-title h4 > a span.status-icon { color: #d5d5d5; font-size: 40px; font-style: normal; font-weight: 700; position: absolute; right: 10px; } .nested-accordion .sitemap-col-title > a span.status-icon.adj-minus, .nested-accordion .sitemap-col-title h4 > a span.status-icon.adj-minus { padding-right: 4px; } .nested-accordion .level1-link, .nested-accordion .li, .nested-accordion .mobile-select-toggle, .nested-accordion .ol, .nested-accordion div, .nested-accordion h3, .nested-accordion li, .nested-accordion ol { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 500; font-style: normal; cursor: default; list-style: none; margin: 10px 0 0; text-align: left; } .nested-accordion div { color: #565656; margin: 0; overflow: hidden; } .nested-accordion .level1-link, .nested-accordion .mobile-select-toggle { background-color: #ffffff; color: #009639; cursor: default; position: relative; } .nested-accordion .mobile-select-toggle .status-icon, .nested-accordion .mobile-select-toggle .status-open-icon { color: #d5d5d5; font-size: 40px; font-style: normal; font-weight: 700; position: absolute; right: 10px; top: 13px; } .nested-accordion .mobile-select-toggle.active { background-color: #009639; color: #ffffff; } .nested-accordion .mobile-select-toggle.active .status-icon, .nested-accordion .mobile-select-toggle.active .status-open-icon { color: #ffffff; } .nested-accordion h3 { background-color: #ffffff; color: #009639; cursor: default; margin: 0 0 1px; padding: 12px 0 10px; text-indent: 20px; } .nested-accordion .ol, .nested-accordion ol { float: left; font-size: 15px; margin: 0 0 12px; padding: 5px 0 0 20px; text-indent: 0; text-transform: capitalize; width: 100%; } .nested-accordion .ol .li, .nested-accordion .ol li, .nested-accordion ol .li, .nested-accordion ol li { color: #009639; float: left; margin: 0; padding: 4px 0; width: 100%; } .nested-accordion .ol .li:hover, .nested-accordion .ol li:hover, .nested-accordion ol .li:hover, .nested-accordion ol li:hover { opacity: 0.6; } .nested-accordion .sitemap-col-title + div { background-color: #b9b9b9; } .nested-accordion .sitemap-col-title + span { background-color: #b9b9b9; float: left; width: 100%; } } @media only screen and (min-width: 0) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 0) and (min--moz-device-pixel-ratio: 1.5), only screen and (min-width: 0) and (min-resolution: 144dpi), only screen and (min-width: 0) and (min-resolution: 1.5dppx) { section.section-sitemap .nested-accordion #sitemapsearchform .search-icon { background-image: url("/etc/designs/P/5631383682678784/clientlib/img/search-icon@x2.png"); background-size: 17px 16px; height: 16px; text-indent: -9000em; width: 17px; } } @media (min-width: 0) { section.section-sitemap, section.section-sitemap.section-countries { background-color: transparent; background-image: none; } #filters .sitemap-parent-item { background-color: #009639; color: #ffffff; font-size: 22px; padding: 12px; text-align: left; } #filters .sitemap-parent-item .status-icon { font-size: 40px; position: absolute; right: 22px; } #filters .sitemap-parent-item .status-icon.adj-minus { padding-right: 4px; } } /* =============================== */ /* 768px ======================== */ @media (min-width: 768px) { .item a.item-text-wrap { margin-left: auto; margin-right: auto; width: 730px; } .item:hover .item-txt { background-color: transparent; } .section-filters { background-color: #474747; } #filters .sitemap-col li ul li { padding: 2px 0; } #sitemapsearchform { display: none; } .is_expanded .sitemap-wrap { background-color: #ffa500; } section.section-sitemap #showCountries, section.section-sitemap #showFilters { display: block; } section.section-sitemap.section-countries:not(.has-bg-img) { padding-left: 0; padding-right: 0; } section.section-sitemap.section-countries:not(.has-bg-img).light-bg { background: #ffffff; } section.section-sitemap.section-countries:not(.has-bg-img).light-bg .main:before { background-color: #e6e6e6; } section.section-sitemap.section-countries:not(.has-bg-img).light-bg .main span.ico-country-picker:before { background-color: #009639; } section.section-sitemap.section-countries:not(.has-bg-img).light-bg .main:after, section.section-sitemap.section-countries:not(.has-bg-img).light-bg .main span.ico-country-picker:after { background: #ffffff; } section.section-sitemap.section-countries:not(.has-bg-img).mild-bg { background: #c6c6c6; } section.section-sitemap.section-countries:not(.has-bg-img).mild-bg .main:before { background-color: #bebebe; } section.section-sitemap.section-countries:not(.has-bg-img).mild-bg .main span.ico-country-picker:before { background-color: #009639; } section.section-sitemap.section-countries:not(.has-bg-img).mild-bg .main:after, section.section-sitemap.section-countries:not(.has-bg-img).mild-bg .main span.ico-country-picker:after { background: #c6c6c6; } section.section-sitemap.section-countries:not(.has-bg-img).dark-bg { background: #b9b9b9; } section.section-sitemap.section-countries:not(.has-bg-img).dark-bg .main:before { background-color: #b1b1b1; } section.section-sitemap.section-countries:not(.has-bg-img).dark-bg .main span.ico-country-picker:before { background-color: #009639; } section.section-sitemap.section-countries:not(.has-bg-img).dark-bg .main:after, section.section-sitemap.section-countries:not(.has-bg-img).dark-bg .main span.ico-country-picker:after { background: #b9b9b9; } section.section-sitemap.section-countries:not(.has-bg-img) .main:before { position: absolute; bottom: 0; display: block; top: 195px; left: 0; right: 0; bottom: 0; content: " "; z-index: 1; } section.section-sitemap.section-countries:not(.has-bg-img) .main:after { -webkit-mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-world-map.svg); mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-world-map.svg); -webkit-mask-size: 103%; mask-size: 103%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: -1px 194px; mask-position: -1px 194px; position: absolute; bottom: 0; display: block; top: 0; left: 0; right: 0; bottom: 0; content: " "; z-index: 2; } section.section-sitemap.section-countries:not(.has-bg-img) .main > div { position: relative; z-index: 10; } section.section-sitemap.section-countries:not(.has-bg-img) .main > div.country-picker-wrap span.ico-country-picker { display: block; height: 36px; width: 64px; margin: 0 auto; position: relative; } section.section-sitemap.section-countries:not(.has-bg-img) .main > div.country-picker-wrap span.ico-country-picker:before { display: block; height: 36px; width: 64px; content: " "; } section.section-sitemap.section-countries:not(.has-bg-img) .main > div.country-picker-wrap span.ico-country-picker:after { -webkit-mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-world-map.svg); mask-image: url(/etc/designs/projectux-masterbrand/clientlib/img/ico-world-map.svg); -webkit-mask-size: 103%; mask-size: 103%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0; display: block; height: 36px; width: 64px; content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .nested-accordion .mobile-select-toggle { cursor: default; } section.section-sitemap { /* multiples of 25% for columns, max 4 across before wrapping */ } section.section-sitemap .sitemap-col li ul { padding: 0; } section.section-sitemap .sitemap-wrap { display: block; } section.section-sitemap .sitemap-wrap .sitemap-col-title > a { -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: transparent; color: #009639; display: block; font-size: 12px; line-height: 17px; margin: 0; padding: 0; text-align: left; text-indent: 0; } section.section-sitemap .sitemap-wrap .sitemap-col-title > a span.status-icon { color: #009639; font-size: 15px; left: -12px; top: 1px; transition: color 0.2s ease-out; } section.section-sitemap .sitemap-wrap .sitemap-col-title > a:hover { color: #000000; } section.section-sitemap .sitemap-wrap .sitemap-col-title > a:hover span.status-icon { color: #000000; } section.section-sitemap #countries, section.section-sitemap #filters { display: none; float: left; padding-bottom: 20px; width: 100%; } section.section-sitemap #countries .nested-accordion h3, section.section-sitemap #filters .nested-accordion h3 { min-height: 30px; } section.section-sitemap #countries .nested-accordion .sitemap-col-title > a span.status-icon, section.section-sitemap #filters .nested-accordion .sitemap-col-title > a span.status-icon { display: none; } section.section-sitemap .btn-minus, section.section-sitemap .btn-plus { display: block; float: left; left: 50%; margin: 6px 0 0 -16px; position: relative; } section.section-sitemap .country-picker-wrap, section.section-sitemap .search-filter-wrap { display: block; } section.section-sitemap .country-picker-wrap h2, section.section-sitemap .search-filter-wrap h2 { background-color: transparent; color: #009639; float: left; font-size: 16px; margin-top: 0; padding: 0; text-align: center; text-indent: 0; width: 100%; } .section-countries.light-bg section.section-sitemap .country-picker-wrap h2, .section-countries.light-bg section.section-sitemap .search-filter-wrap h2 { color: #009639; } .section-countries.mild-bg section.section-sitemap .country-picker-wrap h2, .section-countries.mild-bg section.section-sitemap .search-filter-wrap h2 { color: #009639; } .section-countries.dark-bg section.section-sitemap .country-picker-wrap h2, .section-countries.dark-bg section.section-sitemap .search-filter-wrap h2 { color: #009639; } section.section-sitemap img.minimap { float: left; height: 33px; left: 50%; margin-bottom: 3px; margin-left: -26px; position: relative; width: 53px; } section.section-sitemap .btn-shelf-wrap, section.section-sitemap .btn-shelf-wrap-2 { float: left; left: auto; margin: 0px 0 10px; width: 100%; } section.section-sitemap .sitemaplogo { display: block; padding: 8px; text-align: center; } section.section-sitemap button { display: none; } section.section-sitemap .level1-link, section.section-sitemap .mobile-select-toggle { text-transform: none; } section.section-sitemap .level1-link .status-icon, section.section-sitemap .mobile-select-toggle .status-icon { display: none; } section.section-sitemap .sitemap-columns-1 { padding-left: 29%; } section.section-sitemap .sitemap-columns-2 { padding-left: 25%; } section.section-sitemap .sitemap-columns-3 { padding-left: 12.5%; } section.section-sitemap .sitemap-columns-5 .col-item-5 { clear: left; padding-left: 37.5%; } section.section-sitemap .sitemap-columns-6 .col-item-5 { clear: left; padding-left: 25%; } section.section-sitemap .sitemap-columns-7 .col-item-5 { clear: left; padding-left: 12.5%; } section.section-sitemap .sitemap-columns-8 .col-item-5 { clear: left; padding-left: 0; } section.section-sitemap .sitemap-columns-9 .col-item-5 { clear: left; padding-left: 0; } section.section-sitemap .sitemap-columns-9 .col-item-9 { clear: left; padding-left: 37.5%; } section.section-sitemap .sitemap-columns-10 .col-item-5 { clear: left; padding-left: 0; } section.section-sitemap .sitemap-columns-10 .col-item-9 { clear: left; padding-left: 25%; } section.section-sitemap .sitemap-columns-11 .col-item-5 { clear: left; padding-left: 0; } section.section-sitemap .sitemap-columns-11 .col-item-9 { clear: left; padding-left: 12.5%; } section.section-sitemap .sitemap-columns-12 .col-item-5 { clear: left; padding-left: 0; } section.section-sitemap .sitemap-columns-12 .col-item-9 { clear: left; padding-left: 0; } section.section-sitemap .nested-accordion .sitemap-col-title + div { background-color: transparent; } section.section-sitemap .nested-accordion .sitemap-col-title + span { background-color: transparent; } section.section-sitemap .nested-accordion { float: left; margin: 10px 0 0; width: 100%; } section.section-sitemap .nested-accordion .level1-link, section.section-sitemap .nested-accordion .mobile-select-toggle { background-color: transparent; display: block; float: left; font-size: 12px; line-height: 16px; margin: 10px 0 20px; padding: 0 0 0 20px; text-indent: 0; } section.section-sitemap .nested-accordion h3 { background-color: transparent; cursor: default; font-size: 12px; text-indent: 0; } section.section-sitemap .nested-accordion div { display: inline; } section.section-sitemap .nested-accordion .mobile-select-toggle.sitemap-parent-item { display: none; } section.section-sitemap .nested-accordion #countries .sitemap-col-wrap { float: left; width: 25%; } section.section-sitemap .nested-accordion #countries .sitemap-col-wrap .sitemap-col-item { width: 100%; } section.section-sitemap .nested-accordion .sitemap-col-item { float: left; width: 25%; } section.section-sitemap .nested-accordion .sitemap-col { background-color: transparent; float: left; padding: 0 20px; } section.section-sitemap .nested-accordion .sitemap-col ul { background-color: transparent; margin: 0; } section.section-sitemap .nested-accordion .sitemap-col .li, section.section-sitemap .nested-accordion .sitemap-col li { display: block; float: left; font-size: 12px; line-height: 17px; margin: 0; opacity: 1; padding: 0 0 6px; position: relative; text-decoration: none; text-indent: 0; text-transform: none; width: 100%; transition: all 0.2s ease-out; } section.section-sitemap .nested-accordion .sitemap-col .li:hover, section.section-sitemap .nested-accordion .sitemap-col li:hover { color: #000000; transition: all 0.1s ease-in; background-color: transparent; } section.section-sitemap .nested-accordion .sitemap-col .li ul li, section.section-sitemap .nested-accordion .sitemap-col li ul li { padding-left: 0; } section.section-sitemap .nested-accordion .sitemap-col .li ul li a, section.section-sitemap .nested-accordion .sitemap-col li ul li a { font-family: 'Verlag A', 'Verlag B', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; font-weight: 200; font-style: normal; font-size: 12px; line-height: 16px; color: #474747; } section.section-sitemap .nested-accordion .sitemap-col .li ul li a:hover, section.section-sitemap .nested-accordion .sitemap-col li ul li a:hover { color: #009639; } section.section-sitemap .nested-accordion .sitemap-col ul li { display: block; font-size: 12px; line-height: 14px; padding: 4px 0 0; text-indent: 0; } section.section-sitemap .nested-accordion .first-col { padding-left: 0; } section.section-sitemap .nested-accordion .last-col { padding-right: 0; } section.section-sitemap #filters .nested-accordion { left: 50%; margin: 6px 0 0 -310px; position: relative; width: 700px; } #countries .sitemap-col-title { float: left; width: 16%; } #filters .sitemap-col-title { float: left; width: 25%; } #countries .mobile-select-toggle, #filters .mobile-select-toggle { display: none; } #countries .sitemap-col, #filters .sitemap-col { background-color: transparent; } #countries .sitemap-col-title > a, #countries .sitemap-col-title h4 > a, #filters .sitemap-col-title > a, #filters .sitemap-col-title h4 > a { background-color: transparent; cursor: default; display: block; font-size: 12px; font-weight: bold; height: 2em; line-height: 16px; margin: 10px 0; padding: 0 20px 0 0; text-align: left; text-indent: 0; text-transform: uppercase; } #countries .sitemap-col-title ul, #filters .sitemap-col-title ul { background-color: transparent; padding: 0 20px; } #countries .sitemap-col-title ul li, #filters .sitemap-col-title ul li { display: block; font-size: 12px; line-height: 16px; margin: 0; opacity: 1; padding: 0 0 12px; position: relative; text-decoration: none; text-indent: 0; text-transform: none; width: 100%; transition: all 0.2s ease-out; } #countries .sitemap-col-title ul li:hover, #filters .sitemap-col-title ul li:hover { color: #000000; transition: all 0.1s ease-in; background-color: transparent; } #countries .sitemap-col-title ul li a, #filters .sitemap-col-title ul li a { padding-right: 20px; } #filters .sitemap-col-title > a { height: auto; margin-bottom: 0; } #filters .sitemap-parent-item { display: none; } /* system used for country picker column reduction */ #countries .nested-accordion .sitemap-col.items5:before { content: ""; float: left; height: 100px; width: 13%; } #countries .nested-accordion .sitemap-col.items4:before { content: ""; float: left; height: 100px; width: 22%; } #countries .nested-accordion .sitemap-col.items3:before { content: ""; float: left; height: 100px; width: 31%; } #countries .nested-accordion .sitemap-col.items2:before { content: ""; float: left; height: 100px; width: 38%; } #countries .nested-accordion .sitemap-col.items1:before { content: ""; float: left; height: 100px; width: 46%; } .ie8 #countries .nested-accordion .sitemap-col.items5:before { width: 9%; } .ie8 #countries .nested-accordion .sitemap-col.items4:before { width: 18%; } .ie8 #countries .nested-accordion .sitemap-col.items3:before { width: 27%; } .ie8 #countries .nested-accordion .sitemap-col.items2:before { width: 34%; } .ie8 #countries .nested-accordion .sitemap-col.items1:before { width: 42%; } .light-bg.has-bg-img.section-sitemap .main h2 { color: #000000; } .light-bg.has-bg-img.section-sitemap .main .sitemap-col-item a, .light-bg.has-bg-img.section-sitemap .main .sitemap-col-item p, .light-bg.has-bg-img.section-sitemap .main .sitemap-col-item span { color: #000000; } .light-bg.has-bg-img.section-sitemap .main a:hover, .light-bg.has-bg-img.section-sitemap .main li > a:hover { color: #009639; } .light-bg.has-bg-img.section-sitemap .main a:hover .status-icon, .light-bg.has-bg-img.section-sitemap .main li > a:hover .status-icon { color: #009639; } .mild-bg.has-bg-img.section-sitemap .main h2 { color: #009639; } .mild-bg.has-bg-img.section-sitemap .main .sitemap-col-item a, .mild-bg.has-bg-img.section-sitemap .main .sitemap-col-item p, .mild-bg.has-bg-img.section-sitemap .main .sitemap-col-item span { color: #009639; } .mild-bg.has-bg-img.section-sitemap .main a:hover, .mild-bg.has-bg-img.section-sitemap .main li > a:hover { color: #000000; } .mild-bg.has-bg-img.section-sitemap .main a:hover .status-icon, .mild-bg.has-bg-img.section-sitemap .main li > a:hover .status-icon { color: #000000; } .dark-bg.has-bg-img.section-sitemap .main h2 { color: #ffffff; } .dark-bg.has-bg-img.section-sitemap .main .sitemap-col-item a, .dark-bg.has-bg-img.section-sitemap .main .sitemap-col-item p, .dark-bg.has-bg-img.section-sitemap .main .sitemap-col-item span { color: #ffffff; } .dark-bg.has-bg-img.section-sitemap .main a:hover, .dark-bg.has-bg-img.section-sitemap .main li > a:hover { color: #009639; } .dark-bg.has-bg-img.section-sitemap .main a:hover .status-icon, .dark-bg.has-bg-img.section-sitemap .main li > a:hover .status-icon { color: #009639; } } /* =============================== */ /* 1024px ======================== */ @media (min-width: 1024px) { .section-sitemap .main { float: left; left: 50%; margin-left: -502px; position: relative; width: 1004px; } section.section-sitemap .nested-accordion div { overflow: visible; } section.section-sitemap .nested-accordion.sitemap-columns-1 { padding-left: 34%; } section.section-sitemap .nested-accordion.sitemap-columns-1 .sitemap-col-item { width: 25%; } section.section-sitemap .nested-accordion.sitemap-columns-2 .sitemap-col-item { width: 25%; } section.section-sitemap .nested-accordion.sitemap-columns-3 .sitemap-col-item { width: 25%; } section.section-sitemap .nested-accordion.sitemap-columns-4 .sitemap-col-item { width: 25%; } section.section-sitemap .nested-accordion.sitemap-columns-5 .sitemap-col-item { width: 20%; } section.section-sitemap .nested-accordion.sitemap-columns-5 .col-item-5 { clear: none; padding-left: 0; } section.section-sitemap .nested-accordion.sitemap-columns-6 .col-item-5 { clear: none; padding-left: 0; } section.section-sitemap .nested-accordion.sitemap-columns-7 .col-item-5 { clear: none; padding-left: 0; } section.section-sitemap .nested-accordion.sitemap-columns-7 .col-item-7 { clear: left; padding-left: 41.25%; } section.section-sitemap .nested-accordion.sitemap-columns-8 .col-item-5 { clear: none; padding-left: 0; } section.section-sitemap .nested-accordion.sitemap-columns-8 .col-item-7 { clear: left; padding-left: 33%; } section.section-sitemap .nested-accordion.sitemap-columns-9 .col-item-5, section.section-sitemap .nested-accordion.sitemap-columns-9 .col-item-9 { clear: none; padding-left: 0; } section.section-sitemap .nested-accordion.sitemap-columns-9 .col-item-7 { clear: left; padding-left: 24.75%; } section.section-sitemap .nested-accordion.sitemap-columns-10 .col-item-5, section.section-sitemap .nested-accordion.sitemap-columns-10 .col-item-9 { clear: none; padding-left: 0; } section.section-sitemap .nested-accordion.sitemap-columns-10 .col-item-7 { clear: left; padding-left: 16.5%; } section.section-sitemap .nested-accordion.sitemap-columns-11 .col-item-5, section.section-sitemap .nested-accordion.sitemap-columns-11 .col-item-9 { clear: none; padding-left: 0; } section.section-sitemap .nested-accordion.sitemap-columns-11 .col-item-7 { clear: left; padding-left: 8.25%; } section.section-sitemap .nested-accordion.sitemap-columns-12 .col-item-5, section.section-sitemap .nested-accordion.sitemap-columns-12 .col-item-9 { clear: none; padding-left: 0; } section.section-sitemap .nested-accordion.sitemap-columns-12 .col-item-7 { clear: left; padding-left: 0; } section.section-sitemap .nested-accordion .sitemap-col-wrap { float: left; width: 33%; } section.section-sitemap .nested-accordion .sitemap-col-wrap .sitemap-col-item { width: 50%; } section.section-sitemap .nested-accordion .sitemap-col-item { float: left; width: 16.5%; } section.section-sitemap .nested-accordion .sitemap-col { float: none; padding: 0 10px 0 12px; } section.section-sitemap .nested-accordion .sitemap-col-item:nth-child(6n) { clear: none; } section.section-sitemap .nested-accordion .level1-link, section.section-sitemap .nested-accordion .mobile-select-toggle { padding: 0 0 0 12px; } } /* =============================== */ /* 1200px ======================== */ @media (min-width: 1200px) { section.section-sitemap .nested-accordion { left: 50%; margin: 6px 0 0 -450px; position: relative; width: 900px; } } /* =============================== */ @media screen and (min-width: 768px) { #countries .sitemap-col { -webkit-align-content: stretch; -webkit-align-items: center; -webkit-justify-content: center; -ms-flex-line-pack: stretch; align-content: stretch; -ms-flex-align: baseline; align-items: baseline; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-pack: center; justify-content: center; width: auto; } } /*IMPORTS MAP OF CUSTOMIZATION TO IMPORT EACH FONT NEEDED*/ /* ======================================================================== SPRITE GEN 2: COMPONENTS ======================================================================== */ /* ======================================================================== SPRITE: HEADER - EXTENDS HEADER - EXTENDS: HEADER NAVIGATION BAR SLIDE ======================================================================== */ /* :START VARIABLES */ /* FontWeight */ /* FontStyle */ /* :END VARIABLES */ .navigation-bar-slideout__menu-label { font-weight: 900; font-style: italic; } /* ======================================================================== COMPONENT: HERO IMAGE - EXTENDS ======================================================================== */ /* :START VARIABLES */ /* #Color */ /* :END VARIABLES */ section.section-hero .billb-msg-wrap .bb-btn.bb-btn__link:hover { color: #ffffff; } /* ======================================================================== COMPONENT: PAGINATED GALLERY - EXTENDS ======================================================================== */ /* :START VARIABLES */ /* :END VARIABLES */ .dark-bg .gallery-control-carousel__load-more-button:hover:before, .light-bg .gallery-control-carousel__load-more-button:hover:before, .mild-bg .gallery-control-carousel__load-more-button:hover:before { background-color: #006342; } .gallery-main-carousel__overlay-action:before { background-color: #006342; } .dark-bg .carousel--kotv .gallery-main-carousel__overlay-action:active, .gallery-carousel .gallery-main-carousel__overlay-action:active, .light-bg .carousel--kotv .gallery-main-carousel__overlay-action:active, .mild-bg .carousel--kotv .gallery-main-carousel__overlay-action:active { background-color: #006342; } .dark-bg .carousel--kotv .gallery-main-carousel__overlay-action:before, .gallery-carousel .gallery-main-carousel__overlay-action:before, .light-bg .carousel--kotv .gallery-main-carousel__overlay-action:before, .mild-bg .carousel--kotv .gallery-main-carousel__overlay-action:before { background-color: #006342; } /* ======================================================================== COMPONENT: SOCIAL FEED - EXTENDS ======================================================================== */ /* :START VARIABLES */ /* #FontStyle */ /* #FontWeight */ /* :END VARIABLES */ .section-media-wall h2.headline { font-weight: 900; font-style: italic; } /* ======================================================================== SPRITE: HEADER - COMMON - EXTENDS HEADER - COMMON: HEADER MASTHEAD ======================================================================== */ header.header-small .logoMobileWrap a img.logo { margin: 0 0 0 -45px; } /* ======================================================================== SPRITE GEN 2: SECTION ======================================================================== */ /* ======================================================================== COMPONENT: SITEMAP - SECTION - EXTENDS ======================================================================== */ /* :START VARIABLES */ /* :END VARIABLES */ section.section-sitemap .nested-accordion .level1-link, section.section-sitemap .nested-accordion .mobile-select-toggle { font-size: 16px; }