/* Libs */ /** CSS Reset @media screen @author Quiller Caudill @version 0.1 @desc Based on YUI Reset: http://developer.yahoo.com/yui/reset/ */ *, *:before, *:after { box-sizing: border-box; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0 none; } address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: inherit; font-weight: inherit; } del, ins { text-decoration: none; } li { list-style-image: none; list-style-position: outside; list-style-type: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } sup, sub { vertical-align: baseline; } /** @section Classes */ .clear { clear: both; } .clear-left { clear: left; } .clear-right { clear: right; } .hidden, html.js .noscript { display: none; } .nowrap { white-space: nowrap; } /** @section Mozilla @purpose Target Mozilla-based browsers with unique rules */ a:focus, object:focus, param:focus { -moz-outline-style: none; outline-style: none; } button::-moz-focus-inner { padding: 0; border: 0; } *:focus { outline: none; } /* -------------------------- RESPONSIVE FONT SIZE -------------------------- */ /* -------------------------- RESPONSIVE LINE HEIGHT SIZE -------------------------- */ /* -------------------------- KEYFRAMES & ANIMATION -------------------------- */ @font-face { font-family: 'swiper-icons'; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #007aff; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } /* 3D Effects */ .swiper-container-3d { perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } /* CSS Mode */ .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(-1 * var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-feature-settings: ; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: 'next'; } .swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white { --swiper-navigation-color: #ffffff; } .swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black { --swiper-navigation-color: #000000; } .swiper-button-lock { display: none; } :root { /* --swiper-pagination-color: var(--swiper-theme-color); */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Progress */ .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white { --swiper-pagination-color: #ffffff; } .swiper-pagination-black { --swiper-pagination-color: #000000; } .swiper-pagination-lock { display: none; } /* Components */ /* -------------------------- RESPONSIVE MIXINS -------------------------- */ /** Media Query Mixin Example: @include respond-to(lg); @include respond-to('(max-width: 500px)') */ /** Equal Column Flex Grid with Gutters Example: @include flex-column(3, 20px, 20px); */ /** Wrapper for inline SVG elements and responsiveness (thanks, IE11) Example: @include svg-container(300px, 300px); */ /** Pseudo Element Defaults Example: @include pseudo(); */ /** Responsive Aspect Ratio Example: @include responsive-ratio(16, 9); */ /** Horizontal Rule Example: @include horizontal-rule($color-white, 1); */ /** Vertical Rule Example: @include vertical-rule($color-white, 1); */ /** Custom Vertical Gradient Example: @include custom-vertical-gradient($color-white, 0%, $color-black, 100%); */ /** Custom Horizontal Gradient Example: @include custom-horizontal-gradient($color-white, 0%, $color-black, 100%); */ /** Text Overflow With Ellipsis Example: @include ellipsis(); */ /** Sass CSS triangle mixin, create any kind of triangles with ease Use: @include triangle(direction,width,height,color); Example: $square: 50px; $color: red; selector { @include triangle(bottomright,$square,$square,$color); } Forked from https://github.com/juanbrujo/triangle-mixin.less */ /** Target All Versions of IE and Edge Example: .element { @include target-ie-edge { font-size: .6em; } } */ /** Target All Versions of IE Example: .element { @include target-ie { font-size: .6em; } } */ /** Clearfix Example: .element { @include clearfix; } */ /* -------------------------- SIZING VARIABLES -------------------------- */ /** Sitewide Spacing system */ /** Content max width */ /** Max Grid Difference (Used for breaking content out of the grid) */ /** Header Height Variables */ /* -------------------------- UTILITY (Utility classes used sitewide) -------------------------- */ /** DEFAULT CONTAINER (Used to wrap content) */ .container { width: 100%; max-width: 1280px; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; } @media all and (min-width: 600px) { .container { padding-right: 20px; padding-left: 20px; } } @media all and (min-width: 1024px) { .container { padding-right: 30px; padding-left: 30px; } } /** NARROW CONTAINER (Used to wrap content) */ .container-narrow { width: 100%; max-width: 900px; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; } @media all and (min-width: 600px) { .container-narrow { padding-right: 20px; padding-left: 20px; } } @media all and (min-width: 1024px) { .container-narrow { padding-right: 30px; padding-left: 30px; } } /* -------------------------- CONTENT SEGMENT SPACING Used to separate out components on a page -------------------------- */ .content-segment { position: relative; z-index: 1; } .content-segment.content-segment--first:not(.content-segment--has-background) { margin-top: 30px; } @media all and (min-width: 768px) { .content-segment.content-segment--first:not(.content-segment--has-background) { margin-top: 45px; } } @media all and (min-width: 1024px) { .content-segment.content-segment--first:not(.content-segment--has-background) { margin-top: 60px; } } .content-segment--last { margin-bottom: 60px; } .content-segment + .content-segment { margin-top: 30px; } @media all and (min-width: 768px) { .content-segment + .content-segment { margin-top: 45px; } } @media all and (min-width: 1024px) { .content-segment + .content-segment { margin-top: 60px; } } .content-segment + .content-segment--step-up-1 { margin-top: 60px; } @media all and (min-width: 1024px) { .content-segment + .content-segment--step-up-1 { margin-top: 90px; } } .content-segment + .content-segment--step-up-2 { margin-top: 60px; } @media all and (min-width: 600px) { .content-segment + .content-segment--step-up-2 { margin-top: 90px; } } @media all and (min-width: 1024px) { .content-segment + .content-segment--step-up-2 { margin-top: 120px; } } .content-segment + .content-segment--step-down-1 { margin-top: 20px; } @media all and (min-width: 768px) { .content-segment + .content-segment--step-down-1 { margin-top: 30px; } } .content-segment--has-background + .content-segment--has-background { margin-top: 0; } /* -------------------------- Blog spacing overrides (Used on containers when they contain a background color at the content segment level) -------------------------- */ .search-results__filters { padding: 30px 0; } @media all and (min-width: 768px) { .search-results__filters { padding: 45px 0; } } /* -------------------------- HAS BACKGROUND OVERRIDES (Used on containers when they contain a background color at the content segment level) -------------------------- */ /** If the last item in main has a background, butt it up against the footer */ .main-content *:last-child.has-background, .region--content *:last-child.has-background, #block-mainpagecontent *:last-child.has-background { margin-bottom: -60px; } @media all and (min-width: 600px) { .main-content *:last-child.has-background, .region--content *:last-child.has-background, #block-mainpagecontent *:last-child.has-background { margin-bottom: -90px; } } @media all and (min-width: 1024px) { .main-content *:last-child.has-background, .region--content *:last-child.has-background, #block-mainpagecontent *:last-child.has-background { margin-bottom: -120px; } } /** Butt two content segments up to each other when they contain a background color */ .has-background + .has-background, .has-background + .region { margin-top: 0 !important; } .has-background + .has-background .content-features-group--has-background, .has-background + .region .content-features-group--has-background { margin-top: 0 !important; } .has-background + .has-background .form-embed--has-background, .has-background + .region .form-embed--has-background { margin-top: 0 !important; } .has-background + .has-background .has-background:first-child .container, .has-background + .region .has-background:first-child .container { margin-top: 0 !important; } /* -------------------------- OVERRIDE FOR DRUPAL'S VISUALLY HIDDEN CLASS -------------------------- */ .visually-hidden { height: 0; } /* -------------------------- CENTER TEXT -------------------------- */ .center { text-align: center; } /* -------------------------- AJAX PRELOADER -------------------------- */ .ajax-progress, .ajax-progress-throbber, .ajax-progress-fullscreen { position: fixed; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; text-indent: -99999em; background: rgba(255, 255, 255, 0.8); border-radius: 0; opacity: 1; overflow: hidden; z-index: 999999; animation: fade-in 0.2s; } .ajax-progress-throbber:before, .ajax-progress-fullscreen:before { content: ' '; display: block; position: absolute; width: 35px; height: 35px; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-image: url(../img/ajax-loader.gif) !important; background-size: cover; overflow: hidden; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* -------------------------- ANTI-ALIAS ALL TEXT -------------------------- */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* -------------------------- BLOCK IOS FROM ADJUSTING THE FONT SIZE IN LANDSCAPE MODE -------------------------- */ html { -webkit-text-size-adjust: 100%; } /* -------------------------- SET UP FONT VARIABLES -------------------------- */ /* Font: Barley Style: Regular URL: https://www.youworkforthem.com/font/T9008/the-whiskey-font-collection Foundry: Hustle Supply Co. Foundry: https://www.youworkforthem.com/designer/504/hustle-supply-co Copyright: 2016 | All Rights Reserved, Jeremy Vessey Version: 17 Created: March 26, 2018 License: https://www.youworkforthem.com/font-license License: The WebFont(s) listed in this document must follow the YouWorkForThem WebFont license rules. All other parties are strictly restricted from using the WebFonts(s) listed without a purchased license. All details above must always remain unaltered and visible in your CSS. */ @font-face { font-family: 'Barley-Regular'; src: url(../fonts/barley.eot); src: url(../fonts/barley.eot?#iefix) format("embedded-opentype"), url(../fonts/barley.woff2) format("woff2"), url(../fonts/barley.woff) format("woff"), url(../fonts/barley.ttf) format("truetype"), url(../fonts/barley.svg#youworkforthem) format("svg"); font-style: normal; font-weight: normal; } /* Font: Wheat Style: Regular URL: https://www.youworkforthem.com/font/T9008/the-whiskey-font-collection Foundry: Hustle Supply Co. Foundry: https://www.youworkforthem.com/designer/504/hustle-supply-co Copyright: 2016 | All Rights Reserved, Jeremy Vessey Version: 17 Created: March 26, 2018 License: https://www.youworkforthem.com/font-license License: The WebFont(s) listed in this document must follow the YouWorkForThem WebFont license rules. All other parties are strictly restricted from using the WebFonts(s) listed without a purchased license. All details above must always remain unaltered and visible in your CSS. */ @font-face { font-family: 'Wheat-Regular'; font-style: normal; font-weight: normal; src: url(../fonts/wheat.eot); src: url(../fonts/wheat.eot?#iefix) format("embedded-opentype"), url(../fonts/wheat.woff2) format("woff2"), url(../fonts/wheat.woff) format("woff"), url(../fonts/wheat.ttf) format("truetype"), url(../fonts/wheat.svg#youworkforthem) format("svg"); } /* -------------------------- TYPOGRAPHIC SCALE https://blog.envylabs.com/responsive-typographic-scales-in-css-b9f60431d1c4 http://spencermortensen.com/articles/typographic-scale/ https://codepen.io/dangodev/pen/OOaYya http://www.modularscale.com/?18&px&1.125 -------------------------- */ /* -------------------------- GLOBAL (SITE-WIDE SETTINGS) -------------------------- */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background-color: white; -ms-overflow-style: -ms-autohiding-scrollbar; } body { font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: normal; overscroll-behavior: none; -webkit-overflow-scrolling: touch; } /* -------------------------- CONTAINER FOR ALL ELEMENTS -------------------------- */ .main { position: relative; } /* -------------------------- LAZY LOADED IMAGES -------------------------- */ html.no-js .lazy-img, html.no-js .lazy-background { display: none; } .lazy-img { opacity: 0; } .lazy-background { opacity: 0; } /* -------------------------- MAX OUT IFRAME WIDTH -------------------------- */ iframe { width: 100%; } /* -------------------------- SET GLOBAL TEXT HIGHLIGHT COLOR -------------------------- */ ::selection { background: #aabfcb; } ::-moz-selection { background: #aabfcb; } /* -------------------------- DROP TOP MARGIN ON THE FIRST ELEMENT IN THE CONTENT AREA -------------------------- */ body:not(.page-node-type-home-page) .region--content > *:first-child, body:not(.page-node-type-home-page) #block-mainpagecontent > *:first-child { margin-top: 0; padding-top: 0; } body:not(.page-node-type-home-page) .region--content > *:first-child.has-background, body:not(.page-node-type-home-page) .region--content > *:first-child .form-embed--has-background, body:not(.page-node-type-home-page) #block-mainpagecontent > *:first-child.has-background, body:not(.page-node-type-home-page) #block-mainpagecontent > *:first-child .form-embed--has-background { margin-top: 0; } /* -------------------------- MAIN CONTENT -------------------------- */ #main-content { display: block; position: relative; padding-top: 50px; z-index: 5; } @media all and (min-width: 1024px) { #main-content { padding-top: 80px; } } body.user-logged-in #main-content, body.path-user #main-content { padding-top: 0; } /** Main Content and Region Override for the last element */ /* -------------------------- TEXT STYLING -------------------------- */ .rte-body-component { position: relative; /* -------------------------- HEADERS -------------------------- */ /* -------------------------- PARAGRAPH -------------------------- */ /* -------------------------- SUBHEAD -------------------------- */ /* -------------------------- BLOCK QUOTE -------------------------- */ /* -------------------------- HORIZONTAL RULE -------------------------- */ /* -------------------------- TEXT LINKS -------------------------- */ /* -------------------------- TEXT MODIFIER HTML TAGS -------------------------- */ /* -------------------------- DOCTYPE ICONS -------------------------- */ /* -------------------------- ELEMENT PROXIMITY SPACING TWEAKS -------------------------- */ /** Clear out the margins on the last element within the container to control spacing */ /** Put in extra spacing between sections of content */ } .rte-body-component:before, .rte-body-component:after { content: " "; display: table; } .rte-body-component:after { clear: both; } .rte-body-component { *zoom: 1; } .rte-body-component h1, .rte-body-component h2, .rte-body-component h3, .rte-body-component h4, .rte-body-component h5, .rte-body-component h6 { position: relative; text-transform: uppercase; transition: font-size 0.1s ease-out; } .rte-body-component h1 { margin-bottom: 22px; color: #003057; font-family: "Barley-Regular", "Helvetica", "Ubuntu Condensed", "Liberation Sans Narrow", arial narrow, arial, sans-serif; font-size: 43px; letter-spacing: 3px; line-height: 110%; } @media all and (min-width: 600px) { .rte-body-component h1 { font-size: 57px; } } @media all and (min-width: 1024px) { .rte-body-component h1 { font-size: 76px; } } .rte-body-component h2 { margin-bottom: 20px; color: #375172; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; line-height: 110%; } @media all and (min-width: 600px) { .rte-body-component h2 { margin-top: 0; font-size: 24px; } } @media all and (min-width: 1024px) { .rte-body-component h2 { font-size: 32px; } } .rte-body-component h3 { margin-bottom: 8px; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 16px; line-height: 110%; } @media all and (min-width: 600px) { .rte-body-component h3 { font-size: 18px; } } @media all and (min-width: 1024px) { .rte-body-component h3 { font-size: 24px; } } .rte-body-component h4 { margin-bottom: 8px; color: #375172; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 110%; } @media all and (min-width: 600px) { .rte-body-component h4 { font-size: 16px; } } @media all and (min-width: 1024px) { .rte-body-component h4 { font-size: 18px; } } .rte-body-component h5 { margin-bottom: 8px; color: #003057; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 110%; text-transform: none; } @media all and (min-width: 600px) { .rte-body-component h5 { font-size: 16px; } } @media all and (min-width: 1024px) { .rte-body-component h5 { font-size: 18px; } } .rte-body-component h6 { margin-bottom: 8px; color: #003057; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; line-height: 110%; text-transform: none; } @media all and (min-width: 600px) { .rte-body-component h6 { font-size: 15px; } } .rte-body-component p { margin: 0 0 15px; color: #000000; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; line-height: 175%; } .rte-body-component p.citation { font-weight: 00; } .rte-body-component .subhead { margin-bottom: 42px; color: #375172; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; line-height: 110%; } @media tablet { .rte-body-component .subhead { margin-bottom: 39px; font-size: 16px; } } @media smartphone { .rte-body-component .subhead { margin-bottom: 32px; font-size: 15px; } } .rte-body-component blockquote { position: relative; clear: both; margin-right: auto; margin-bottom: 25px; margin-left: auto; padding: 30px; overflow: hidden; } @media all and (min-width: 600px) { .rte-body-component blockquote { padding: 45px; } } .rte-body-component blockquote p { position: relative; margin-bottom: 0; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; line-height: 110%; text-align: center; text-transform: uppercase; white-space: pre-line; } @media all and (min-width: 768px) { .rte-body-component blockquote p { font-size: 24px; } } .rte-body-component blockquote p:first-of-type:before { content: '\201C'; padding-right: 5px; } .rte-body-component blockquote p:first-of-type:after { content: '\201D'; padding-left: 5px; } .rte-body-component blockquote p.citation { margin-top: 15px; color: #003057; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } .rte-body-component blockquote p.citation:before { content: ""; display: block; position: absolute; width: 10%; height: 2px; top: -10px; right: 0; left: 0; margin: 0 auto; background-color: #92d100; } .rte-body-component hr:first-child { margin-top: 0; } .rte-body-component hr { position: relative; clear: both; height: 2px; margin: 30px 0; background-color: #aabfcb; border: none; overflow: visible; } @media all and (min-width: 600px) { .rte-body-component hr { margin: 60px auto; } } .rte-body-component a[href]:not(.button) { /* Firefox 4 */ /* Safari and Chrome */ /* Opera */ /* IExplorer 10 */ transform: translate3d(0, 0, 0); display: inline; position: relative; color: #003057; font-weight: 700; text-decoration: none; white-space: normal; box-shadow: 0 3px 0 -1px #aabfcb; z-index: 0; transition: color 0.2s ease-out, box-shadow 0.2s ease-out; } .rte-body-component a[href]:not(.button):hover, .rte-body-component a[href]:not(.button):focus { color: #003057; box-shadow: 0 3px 0 -1px #92d100; } .rte-body-component a[href]:not(.button):active { color: #003057; box-shadow: 0 3px 0 -1px #92d100; } .rte-body-component em, .rte-body-component i, .rte-body-component cite, .rte-body-component var { font-style: italic; } .rte-body-component b, .rte-body-component strong { font-weight: 700; } .rte-body-component u { -webkit-text-decoration: wavy underline #CC2631; text-decoration: wavy underline #CC2631; } .rte-body-component del { color: #CC2631; text-decoration: line-through; } .rte-body-component ins { color: #00614a; } .rte-body-component sup, .rte-body-component sub { position: relative; font-size: 50%; line-height: 0; } .rte-body-component sup { top: -0.1em; font-size: 50%; vertical-align: super; } .rte-body-component sub { vertical-align: sub; } .rte-body-component small, .rte-body-component .small { font-size: 12px; text-align: center; } .rte-body-component abbr { text-decoration: none; } .rte-body-component mark { padding: 0 5px; background-color: #ACEB1A; } .rte-body-component .link-icon { position: relative; margin-right: 31px; white-space: nowrap; /** General icon styling */ /** External Link Modifications */ /** Ties the last word and the icon together so the icon doesn't wrap to the next line by itself */ } @media print { .rte-body-component .link-icon { margin-right: 0; } } .rte-body-component .link-icon--internal { margin-right: 0; } .rte-body-component .link-icon--tel { margin-right: 0; } .rte-body-component .link-icon svg { display: inline-block; position: absolute; top: 2px; right: -26px; bottom: 0; margin: auto 0; white-space: nowrap; fill: #003057; transition: fill 0.2s ease-out; } @media print { .rte-body-component .link-icon svg { display: none; } } .rte-body-component .link-icon .svg-fill { fill: #003057; transition: fill 0.2s ease-out; } .rte-body-component .link-icon .svg-stroke { stroke: #003057; transition: stroke 0.2s ease-out; } .rte-body-component .link-icon .doctype-box { transition: stroke 0.2s ease-out; stroke: #003057; } .rte-body-component .link-icon--external { margin-right: 23px; } @media print { .rte-body-component .link-icon--external { margin-right: 0; } } .rte-body-component .link-icon--external svg { width: 22px; top: 12px; right: -26px; } .rte-body-component .link-icon--mailTo { margin-right: 0; } .rte-body-component .link-icon__last-word { display: inline-block; position: relative; white-space: nowrap; } .rte-body-component div *:last-child, .rte-body-component *:last-child { margin-bottom: 0; } .rte-body-component p + table:not(.webform-tableselect):not(.ui-datepicker-calendar) { margin-top: 60px; } @media smartphone { .rte-body-component p + table:not(.webform-tableselect):not(.ui-datepicker-calendar) { margin-top: 45px; } } .rte-body-component p + h2, .rte-body-component ul + h2, .rte-body-component ol + h2, .rte-body-component img + h2, .rte-body-component figure + h2, .rte-body-component .rte-image + h2, .rte-body-component table + h2, .rte-body-component blockquote + h2, .rte-body-component .videodetector + h2, .rte-body-component p + h3, .rte-body-component ul + h3, .rte-body-component ol + h3, .rte-body-component img + h3, .rte-body-component figure + h3, .rte-body-component .rte-image + h3, .rte-body-component table + h3, .rte-body-component blockquote + h3, .rte-body-component .videodetector + h3, .rte-body-component p + h4, .rte-body-component ul + h4, .rte-body-component ol + h4, .rte-body-component img + h4, .rte-body-component figure + h4, .rte-body-component .rte-image + h4, .rte-body-component table + h4, .rte-body-component blockquote + h4, .rte-body-component .videodetector + h4, .rte-body-component p + h5, .rte-body-component ul + h5, .rte-body-component ol + h5, .rte-body-component img + h5, .rte-body-component figure + h5, .rte-body-component .rte-image + h5, .rte-body-component table + h5, .rte-body-component blockquote + h5, .rte-body-component .videodetector + h5, .rte-body-component p + h6, .rte-body-component ul + h6, .rte-body-component ol + h6, .rte-body-component img + h6, .rte-body-component figure + h6, .rte-body-component .rte-image + h6, .rte-body-component table + h6, .rte-body-component blockquote + h6, .rte-body-component .videodetector + h6 { margin-top: 45px; } @media all and (min-width: 600px) { .rte-body-component p + h2, .rte-body-component ul + h2, .rte-body-component ol + h2, .rte-body-component img + h2, .rte-body-component figure + h2, .rte-body-component .rte-image + h2, .rte-body-component table + h2, .rte-body-component blockquote + h2, .rte-body-component .videodetector + h2, .rte-body-component p + h3, .rte-body-component ul + h3, .rte-body-component ol + h3, .rte-body-component img + h3, .rte-body-component figure + h3, .rte-body-component .rte-image + h3, .rte-body-component table + h3, .rte-body-component blockquote + h3, .rte-body-component .videodetector + h3, .rte-body-component p + h4, .rte-body-component ul + h4, .rte-body-component ol + h4, .rte-body-component img + h4, .rte-body-component figure + h4, .rte-body-component .rte-image + h4, .rte-body-component table + h4, .rte-body-component blockquote + h4, .rte-body-component .videodetector + h4, .rte-body-component p + h5, .rte-body-component ul + h5, .rte-body-component ol + h5, .rte-body-component img + h5, .rte-body-component figure + h5, .rte-body-component .rte-image + h5, .rte-body-component table + h5, .rte-body-component blockquote + h5, .rte-body-component .videodetector + h5, .rte-body-component p + h6, .rte-body-component ul + h6, .rte-body-component ol + h6, .rte-body-component img + h6, .rte-body-component figure + h6, .rte-body-component .rte-image + h6, .rte-body-component table + h6, .rte-body-component blockquote + h6, .rte-body-component .videodetector + h6 { margin-top: 60px; } } /* -------------------------- LIST STYLING -------------------------- */ .rte-body-component { font-size: 18px; /** Share List Styling */ /** Unordered List */ /** Ordered List */ } .rte-body-component ul, .rte-body-component ol { margin-bottom: 30px; padding-left: 10px; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; } @media all and (min-width: 600px) { .rte-body-component ul, .rte-body-component ol { padding-left: 20px; } } @media all and (min-width: 1024px) { .rte-body-component ul, .rte-body-component ol { padding-left: 30px; } } .rte-body-component ul p, .rte-body-component ol p { display: inline; } .rte-body-component ul li, .rte-body-component ol li { margin-bottom: 5px; font-size: 15px; line-height: 175%; } .rte-body-component ul li:before, .rte-body-component ol li:before { content: ''; display: inline-block; margin: 0 10px 0 0; } .rte-body-component ul li .link-icon__last-word, .rte-body-component ol li .link-icon__last-word { display: inline !important; } .rte-body-component ul li ul, .rte-body-component ul li ol, .rte-body-component ol li ul, .rte-body-component ol li ol { margin-top: 5px; margin-bottom: 0; } .rte-body-component p + ul, .rte-body-component p + ol { margin-top: 23px; } .rte-body-component ul li { margin-left: 18px; text-indent: -18px; } .rte-body-component ul li:before { display: inline-block; position: relative; width: 16px; height: 2px; top: -1px; background-color: #92d100; border: none; vertical-align: middle; } .rte-body-component ul li ul li:before { width: 8px; height: 2px; bottom: 3px; background-color: #375172; border: none; transform: scaleY(1); } .rte-body-component ul li ul li ul li:before { background-color: #003057; } .rte-body-component ol { counter-reset: section; } .rte-body-component ol li { display: table; } .rte-body-component ol li:before { content: counters(section, ".") ". "; counter-increment: section; display: table-cell; width: 10px; padding-top: 3px; padding-right: 5px; color: #003057; font-family: "Barley-Regular", "Helvetica", "Ubuntu Condensed", "Liberation Sans Narrow", arial narrow, arial, sans-serif; font-size: 14px; font-weight: 900; letter-spacing: 2px; line-height: 100%; text-align: center; text-indent: right; vertical-align: baseline; } .rte-body-component ol li ol li:before { color: #375172; } .rte-body-component ol li ol li ol li:before { color: #375172; } /* -------------------------- GENERAL SHARED FORM STYLING -------------------------- */ .webform-submission-form, #mc-embedded-subscribe-form { width: 100%; max-width: 700px; margin: 8px auto 0; padding: 30px 15px !important; background-color: #e9eff2; } @media all and (min-width: 600px) { .webform-submission-form, #mc-embedded-subscribe-form { padding: 30px 20px !important; } } @media all and (min-width: 1024px) { .webform-submission-form, #mc-embedded-subscribe-form { padding: 30px !important; } } .webform-submission-form > *:first-child:not(.webform-progress):not(.drupal-status), #mc-embedded-subscribe-form > *:first-child:not(.webform-progress):not(.drupal-status) { margin-top: 0 !important; } .webform-submission-form .webform-confirmation, #mc-embedded-subscribe-form .webform-confirmation { text-align: center; } .webform-submission-form .webform-confirmation__message, #mc-embedded-subscribe-form .webform-confirmation__message { margin-top: 20px; } .webform-submission-form .webform-confirmation__back, #mc-embedded-subscribe-form .webform-confirmation__back { margin: 0 auto; } .webform-submission-form .indicates-required, #mc-embedded-subscribe-form .indicates-required { color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; font-weight: 400; text-align: right; } /** AJAX Wrapper */ #ajax-wrapper { margin-top: 0; padding-bottom: 0; } fieldset + #ajax-wrapper { margin-top: 0; } fieldset.webform-composite-hidden-title { margin-top: 0; margin-bottom: 0; } /** Drupal status by a form item */ .drupal-status + .form-item { margin-top: 24px; } .form-item, .form-type-webform-terms-of-service, .mc-field-group { position: relative; width: 100%; margin-bottom: 16px; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; font-weight: 400; /** Form Error */ } @media only screen and (min-width: sm) { .form-item, .form-type-webform-terms-of-service, .mc-field-group { margin-bottom: 24px; } } .form-item--error .form-item__label, .form-type-webform-terms-of-service--error .form-item__label, .mc-field-group--error .form-item__label { color: #CC2631; } .form-item--error .error-message, .form-type-webform-terms-of-service--error .error-message, .mc-field-group--error .error-message { float: right; padding: 3px 7px; color: #fff; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 10px; text-align: center; text-transform: uppercase; background-color: #CC2631; } .form-item--error .error-message:after, .form-type-webform-terms-of-service--error .error-message:after, .mc-field-group--error .error-message:after { content: ''; display: table; clear: both; } .form-item--error.form-item--radio .error-message, .form-item--error.form-item--checkbox .error-message, .form-type-webform-terms-of-service--error.form-item--radio .error-message, .form-type-webform-terms-of-service--error.form-item--checkbox .error-message, .mc-field-group--error.form-item--radio .error-message, .mc-field-group--error.form-item--checkbox .error-message { display: none; } .form-item--error.form-item--textfield .form-item__description, .form-item--error.form-item--textfield .description, .form-item--error.form-item--email .form-item__description, .form-item--error.form-item--email .description, .form-item--error.form-item--url .form-item__description, .form-item--error.form-item--url .description, .form-item--error.form-item--number .form-item__description, .form-item--error.form-item--number .description, .form-item--error.form-item--textarea .form-item__description, .form-item--error.form-item--textarea .description, .form-item--error.form-item--password .form-item__description, .form-item--error.form-item--password .description, .form-item--error.form-item--tel .form-item__description, .form-item--error.form-item--tel .description, .form-type-webform-terms-of-service--error.form-item--textfield .form-item__description, .form-type-webform-terms-of-service--error.form-item--textfield .description, .form-type-webform-terms-of-service--error.form-item--email .form-item__description, .form-type-webform-terms-of-service--error.form-item--email .description, .form-type-webform-terms-of-service--error.form-item--url .form-item__description, .form-type-webform-terms-of-service--error.form-item--url .description, .form-type-webform-terms-of-service--error.form-item--number .form-item__description, .form-type-webform-terms-of-service--error.form-item--number .description, .form-type-webform-terms-of-service--error.form-item--textarea .form-item__description, .form-type-webform-terms-of-service--error.form-item--textarea .description, .form-type-webform-terms-of-service--error.form-item--password .form-item__description, .form-type-webform-terms-of-service--error.form-item--password .description, .form-type-webform-terms-of-service--error.form-item--tel .form-item__description, .form-type-webform-terms-of-service--error.form-item--tel .description, .mc-field-group--error.form-item--textfield .form-item__description, .mc-field-group--error.form-item--textfield .description, .mc-field-group--error.form-item--email .form-item__description, .mc-field-group--error.form-item--email .description, .mc-field-group--error.form-item--url .form-item__description, .mc-field-group--error.form-item--url .description, .mc-field-group--error.form-item--number .form-item__description, .mc-field-group--error.form-item--number .description, .mc-field-group--error.form-item--textarea .form-item__description, .mc-field-group--error.form-item--textarea .description, .mc-field-group--error.form-item--password .form-item__description, .mc-field-group--error.form-item--password .description, .mc-field-group--error.form-item--tel .form-item__description, .mc-field-group--error.form-item--tel .description { margin-top: 30px; } .form-item--error.form-item--textfield + div .form-item--managed-file, .form-item--error.form-item--email + div .form-item--managed-file, .form-item--error.form-item--url + div .form-item--managed-file, .form-item--error.form-item--number + div .form-item--managed-file, .form-item--error.form-item--textarea + div .form-item--managed-file, .form-item--error.form-item--password + div .form-item--managed-file, .form-item--error.form-item--tel + div .form-item--managed-file, .form-type-webform-terms-of-service--error.form-item--textfield + div .form-item--managed-file, .form-type-webform-terms-of-service--error.form-item--email + div .form-item--managed-file, .form-type-webform-terms-of-service--error.form-item--url + div .form-item--managed-file, .form-type-webform-terms-of-service--error.form-item--number + div .form-item--managed-file, .form-type-webform-terms-of-service--error.form-item--textarea + div .form-item--managed-file, .form-type-webform-terms-of-service--error.form-item--password + div .form-item--managed-file, .form-type-webform-terms-of-service--error.form-item--tel + div .form-item--managed-file, .mc-field-group--error.form-item--textfield + div .form-item--managed-file, .mc-field-group--error.form-item--email + div .form-item--managed-file, .mc-field-group--error.form-item--url + div .form-item--managed-file, .mc-field-group--error.form-item--number + div .form-item--managed-file, .mc-field-group--error.form-item--textarea + div .form-item--managed-file, .mc-field-group--error.form-item--password + div .form-item--managed-file, .mc-field-group--error.form-item--tel + div .form-item--managed-file { padding-top: 20px; } .form-item--error.form-item--managed-file .form-managed-file, .form-item--error.form-item--webform-document-file .form-managed-file, .form-type-webform-terms-of-service--error.form-item--managed-file .form-managed-file, .form-type-webform-terms-of-service--error.form-item--webform-document-file .form-managed-file, .mc-field-group--error.form-item--managed-file .form-managed-file, .mc-field-group--error.form-item--webform-document-file .form-managed-file { background-color: #fff; border: 1px solid #CC2631; } /** Form Focus */ .form-item:not(fieldset):focus-within .form-item__label { color: #003057; } /** Add extra space when a field prefix is before an input (Example use is captcha using math) */ .field-prefix + input { margin-top: 10px; } /** Description */ .form-item__description.rte-body-component, .form-item--webform-markup.rte-body-component, .webform-element-description { margin-top: 5px; color: #375172; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 13px !important; cursor: auto; } .form-item__description.rte-body-component *, .form-item--webform-markup.rte-body-component *, .webform-element-description * { font-size: 13px !important; } .form-item__description.rte-body-component p, .form-item--webform-markup.rte-body-component p, .webform-element-description p { margin-bottom: 5px; } .form-item__description.rte-body-component ul, .form-item__description.rte-body-component ol, .form-item--webform-markup.rte-body-component ul, .form-item--webform-markup.rte-body-component ol, .webform-element-description ul, .webform-element-description ol { margin-bottom: 5px; } .form-item__description.rte-body-component * + ul, .form-item__description.rte-body-component * + ol, .form-item--webform-markup.rte-body-component * + ul, .form-item--webform-markup.rte-body-component * + ol, .webform-element-description * + ul, .webform-element-description * + ol { margin-top: 5px; } .form-item--radio .form-item__description.rte-body-component, .form-item--radio .form-item--webform-markup.rte-body-component, .form-item--radio .webform-element-description { margin-top: 5px; } /** Required Description */ .webform-required { margin-bottom: 16px; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; } @media only screen and (min-width: sm) { .webform-required { margin-bottom: 26px; } } .form-required:after { content: '*'; } .form-item__label__indicator { display: none; } /* -------------------------- WEBFORM ACTION BUTTONS -------------------------- */ .webform-actions { display: flex; justify-content: center; } @media smartphone { .webform-actions { flex-direction: column; } } .webform-actions .button { margin-left: 10px; } @media smartphone { .webform-actions .button { margin-top: 10px; margin-left: 0; } } .webform-actions .button:first-of-type { margin-top: 0; margin-left: 0; } .form-actions { display: flex; justify-content: center; } @media smartphone { .form-actions { flex-direction: column; } } /* -------------------------- FLEXBOX GROUPS -------------------------- */ .webform-flexbox { position: relative; } .webform-flexbox:last-of-type { margin: 0 !important; } .webform-flex { margin: 0 0 24px !important; } .webform-flex--container { margin: 0; padding-right: 0; } @media all and (min-width: 768px) { .webform-flex--container { padding-right: 10px; } } .webform-flex:last-child .webform-flex--container { padding-right: 0; } .webform-flexbox + .webform-flexbox .webform-flex { margin: 0 0 24px; } /* -------------------------- FIELDGROUP -------------------------- */ .fieldgroup, .form-fieldset { position: relative; width: 100%; margin-bottom: 16px; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; } @media only screen and (min-width: sm) { .fieldgroup, .form-fieldset { margin-bottom: 26px; } } .fieldgroup .form-item:last-of-type, .form-fieldset .form-item:last-of-type { margin-bottom: 0; } /* -------------------------- SPACING OVERRIDES -------------------------- */ fieldset, .fieldgroup, fieldset + fieldset, div + fieldset { position: relative; margin-bottom: 0; padding: 0; border: none; } fieldset, .fieldgroup, div + fieldset, fieldset + div:not(.form-item--checkbox):not(.form-actions), fieldset + fieldset { margin-top: 16px; margin-bottom: 16px; padding-bottom: 0; } .form-item--select + fieldset { margin-top: 0; } /* -------------------------- FORM ACTION SPACING -------------------------- */ form:not(.product-filters__search-form):not(.views-exposed-form) .form-actions { margin-top: 30px; } /* -------------------------- LEGEND -------------------------- */ legend { display: inline-block; position: relative; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.2px; text-transform: uppercase; transition: all 0.2s ease-out; /** Required Form */ } @media all and (min-width: 600px) { legend { font-size: 15px; } } @media all and (min-width: 1024px) { legend { font-size: 15px; } } legend.form-required:after { position: relative; top: 2px; font-size: 11px; line-height: 0; vertical-align: super; } /* -------------------------- WEBFORM RTE -------------------------- */ .js-text-format-wrapper .filter-wrapper { display: none; } /* -------------------------- FORM EMBED CONTAINER -------------------------- */ .form-embed .container { max-width: 500px; } /* -------------------------- FORM EMBED HEADLINE -------------------------- */ .form-embed__headline { padding: 0 0 8px; font-family: "Barley-Regular", "Helvetica", "Ubuntu Condensed", "Liberation Sans Narrow", arial narrow, arial, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 1.53px; text-transform: uppercase; } @media all and (min-width: 768px) { .form-embed__headline { font-size: 18px; } } @media all and (min-width: 1024px) { .form-embed__headline { font-size: 24px; } } .form-embed__description { margin-bottom: 27px !important; } /* -------------------------- WEBFORM PAGE STYLING -------------------------- */ body.path-webform .webform-submission-form { max-width: 500px; margin: 0 auto; padding-right: 15px; padding-left: 15px; } @media all and (min-width: 600px) { body.path-webform .webform-submission-form { padding-right: 20px; padding-left: 20px; } } @media all and (min-width: 1024px) { body.path-webform .webform-submission-form { padding-right: 30px; padding-left: 30px; } } /* -------------------------- FORM LEGAL TEXT -------------------------- */ .form-legal-text.rte-body-component .small { padding: 20px 0 0; } .form-legal-text.rte-body-component .small:first-of-type { padding: 0; } .form-actions + .form-legal-text { margin-top: 23px; } /* -------------------------- IOS ZOOM FIX FOR ALL FORM INPUTS -------------------------- */ .ios select, .ios textarea, .ios input[type='text'], .ios input[type='tel'], .ios input[type='password'], .ios input[type='datetime'], .ios input[type='datetime-local'], .ios input[type='date'], .ios input[type='month'], .ios input[type='time'], .ios input[type='week'], .ios input[type='number'], .ios input[type='email'], .ios input[type='url'], .ios select:focus { font-size: 16px !important; } #mc-embedded-subscribe-form .clear { position: relative; text-align: center; } #mc-embedded-subscribe-form .clear .submit-wrap { position: relative; width: fit-content; width: -moz-fit-content; margin: 0 auto; } #mc-embedded-subscribe-form .clear .submit-wrap:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #fff; box-shadow: inset 0 0 0 2px #92d100; z-index: -2; transition: all 0.3s ease-in-out; } #mc-embedded-subscribe-form .clear .submit-wrap:hover:before { top: 6px; left: 6px; z-index: 0; transition: all 0.3s ease-in-out; } #mc-embedded-subscribe-form .clear .submit-wrap.disabled:before { display: none; } #mc-embedded-subscribe-form input.button { background-color: #003057; } #mc-embedded-subscribe-form input.button:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #003057; z-index: -1; transition: all 0.3s ease-in-out; } /* -------------------------- TEXTFIELD STYLING -------------------------- */ /** Form Styling */ .form-item, .mc-field-group { /* -------------------------- LABEL -------------------------- */ /* -------------------------- TEXT INPUT -------------------------- */ /* -------------------------- TEXT COUNT -------------------------- */ /* -------------------------- TEXT AREA -------------------------- */ } .form-item__label, .form-item label, .mc-field-group__label, .mc-field-group label { display: block; margin-bottom: 6px; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; letter-spacing: 0.2px; text-transform: uppercase; transition: all 0.3s ease-in-out; } .form-item__text, .form-item__email, .form-item__url, .form-item__number, .form-item__textarea, .form-item__password, .form-item__tel, .form-item #mce-EMAIL, .form-item #mce-FNAME, .form-item #mce-LNAME, .form-item #mce-MMERGE6, .form-item #mce-MMERGE9, .form-item #mce-MMERGE10, .mc-field-group__text, .mc-field-group__email, .mc-field-group__url, .mc-field-group__number, .mc-field-group__textarea, .mc-field-group__password, .mc-field-group__tel, .mc-field-group #mce-EMAIL, .mc-field-group #mce-FNAME, .mc-field-group #mce-LNAME, .mc-field-group #mce-MMERGE6, .mc-field-group #mce-MMERGE9, .mc-field-group #mce-MMERGE10 { display: block; width: 100%; padding: 7px; color: #003057; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; background-color: white; border: 1.5px solid #003057; border-radius: 0; transition: all 0.3s ease-in-out; -webkit-appearance: none; } .form-item__text::-webkit-inner-spin-button, .form-item__text::-webkit-outer-spin-button, .form-item__email::-webkit-inner-spin-button, .form-item__email::-webkit-outer-spin-button, .form-item__url::-webkit-inner-spin-button, .form-item__url::-webkit-outer-spin-button, .form-item__number::-webkit-inner-spin-button, .form-item__number::-webkit-outer-spin-button, .form-item__textarea::-webkit-inner-spin-button, .form-item__textarea::-webkit-outer-spin-button, .form-item__password::-webkit-inner-spin-button, .form-item__password::-webkit-outer-spin-button, .form-item__tel::-webkit-inner-spin-button, .form-item__tel::-webkit-outer-spin-button, .form-item #mce-EMAIL::-webkit-inner-spin-button, .form-item #mce-EMAIL::-webkit-outer-spin-button, .form-item #mce-FNAME::-webkit-inner-spin-button, .form-item #mce-FNAME::-webkit-outer-spin-button, .form-item #mce-LNAME::-webkit-inner-spin-button, .form-item #mce-LNAME::-webkit-outer-spin-button, .form-item #mce-MMERGE6::-webkit-inner-spin-button, .form-item #mce-MMERGE6::-webkit-outer-spin-button, .form-item #mce-MMERGE9::-webkit-inner-spin-button, .form-item #mce-MMERGE9::-webkit-outer-spin-button, .form-item #mce-MMERGE10::-webkit-inner-spin-button, .form-item #mce-MMERGE10::-webkit-outer-spin-button, .mc-field-group__text::-webkit-inner-spin-button, .mc-field-group__text::-webkit-outer-spin-button, .mc-field-group__email::-webkit-inner-spin-button, .mc-field-group__email::-webkit-outer-spin-button, .mc-field-group__url::-webkit-inner-spin-button, .mc-field-group__url::-webkit-outer-spin-button, .mc-field-group__number::-webkit-inner-spin-button, .mc-field-group__number::-webkit-outer-spin-button, .mc-field-group__textarea::-webkit-inner-spin-button, .mc-field-group__textarea::-webkit-outer-spin-button, .mc-field-group__password::-webkit-inner-spin-button, .mc-field-group__password::-webkit-outer-spin-button, .mc-field-group__tel::-webkit-inner-spin-button, .mc-field-group__tel::-webkit-outer-spin-button, .mc-field-group #mce-EMAIL::-webkit-inner-spin-button, .mc-field-group #mce-EMAIL::-webkit-outer-spin-button, .mc-field-group #mce-FNAME::-webkit-inner-spin-button, .mc-field-group #mce-FNAME::-webkit-outer-spin-button, .mc-field-group #mce-LNAME::-webkit-inner-spin-button, .mc-field-group #mce-LNAME::-webkit-outer-spin-button, .mc-field-group #mce-MMERGE6::-webkit-inner-spin-button, .mc-field-group #mce-MMERGE6::-webkit-outer-spin-button, .mc-field-group #mce-MMERGE9::-webkit-inner-spin-button, .mc-field-group #mce-MMERGE9::-webkit-outer-spin-button, .mc-field-group #mce-MMERGE10::-webkit-inner-spin-button, .mc-field-group #mce-MMERGE10::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; } .form-item__text:focus, .form-item__email:focus, .form-item__url:focus, .form-item__number:focus, .form-item__textarea:focus, .form-item__password:focus, .form-item__tel:focus, .form-item #mce-EMAIL:focus, .form-item #mce-FNAME:focus, .form-item #mce-LNAME:focus, .form-item #mce-MMERGE6:focus, .form-item #mce-MMERGE9:focus, .form-item #mce-MMERGE10:focus, .mc-field-group__text:focus, .mc-field-group__email:focus, .mc-field-group__url:focus, .mc-field-group__number:focus, .mc-field-group__textarea:focus, .mc-field-group__password:focus, .mc-field-group__tel:focus, .mc-field-group #mce-EMAIL:focus, .mc-field-group #mce-FNAME:focus, .mc-field-group #mce-LNAME:focus, .mc-field-group #mce-MMERGE6:focus, .mc-field-group #mce-MMERGE9:focus, .mc-field-group #mce-MMERGE10:focus { background-color: white; border: 1.5px solid #6e9e00; } .form-item__text:hover, .form-item__email:hover, .form-item__url:hover, .form-item__number:hover, .form-item__textarea:hover, .form-item__password:hover, .form-item__tel:hover, .form-item #mce-EMAIL:hover, .form-item #mce-FNAME:hover, .form-item #mce-LNAME:hover, .form-item #mce-MMERGE6:hover, .form-item #mce-MMERGE9:hover, .form-item #mce-MMERGE10:hover, .mc-field-group__text:hover, .mc-field-group__email:hover, .mc-field-group__url:hover, .mc-field-group__number:hover, .mc-field-group__textarea:hover, .mc-field-group__password:hover, .mc-field-group__tel:hover, .mc-field-group #mce-EMAIL:hover, .mc-field-group #mce-FNAME:hover, .mc-field-group #mce-LNAME:hover, .mc-field-group #mce-MMERGE6:hover, .mc-field-group #mce-MMERGE9:hover, .mc-field-group #mce-MMERGE10:hover { background-color: white; border: 1.5px solid #6e9e00; } .form-item__text::-webkit-input-placeholder, .form-item__email::-webkit-input-placeholder, .form-item__url::-webkit-input-placeholder, .form-item__number::-webkit-input-placeholder, .form-item__textarea::-webkit-input-placeholder, .form-item__password::-webkit-input-placeholder, .form-item__tel::-webkit-input-placeholder, .form-item #mce-EMAIL::-webkit-input-placeholder, .form-item #mce-FNAME::-webkit-input-placeholder, .form-item #mce-LNAME::-webkit-input-placeholder, .form-item #mce-MMERGE6::-webkit-input-placeholder, .form-item #mce-MMERGE9::-webkit-input-placeholder, .form-item #mce-MMERGE10::-webkit-input-placeholder, .mc-field-group__text::-webkit-input-placeholder, .mc-field-group__email::-webkit-input-placeholder, .mc-field-group__url::-webkit-input-placeholder, .mc-field-group__number::-webkit-input-placeholder, .mc-field-group__textarea::-webkit-input-placeholder, .mc-field-group__password::-webkit-input-placeholder, .mc-field-group__tel::-webkit-input-placeholder, .mc-field-group #mce-EMAIL::-webkit-input-placeholder, .mc-field-group #mce-FNAME::-webkit-input-placeholder, .mc-field-group #mce-LNAME::-webkit-input-placeholder, .mc-field-group #mce-MMERGE6::-webkit-input-placeholder, .mc-field-group #mce-MMERGE9::-webkit-input-placeholder, .mc-field-group #mce-MMERGE10::-webkit-input-placeholder { color: #375172; } .form-item__text:-moz-placeholder, .form-item__email:-moz-placeholder, .form-item__url:-moz-placeholder, .form-item__number:-moz-placeholder, .form-item__textarea:-moz-placeholder, .form-item__password:-moz-placeholder, .form-item__tel:-moz-placeholder, .form-item #mce-EMAIL:-moz-placeholder, .form-item #mce-FNAME:-moz-placeholder, .form-item #mce-LNAME:-moz-placeholder, .form-item #mce-MMERGE6:-moz-placeholder, .form-item #mce-MMERGE9:-moz-placeholder, .form-item #mce-MMERGE10:-moz-placeholder, .mc-field-group__text:-moz-placeholder, .mc-field-group__email:-moz-placeholder, .mc-field-group__url:-moz-placeholder, .mc-field-group__number:-moz-placeholder, .mc-field-group__textarea:-moz-placeholder, .mc-field-group__password:-moz-placeholder, .mc-field-group__tel:-moz-placeholder, .mc-field-group #mce-EMAIL:-moz-placeholder, .mc-field-group #mce-FNAME:-moz-placeholder, .mc-field-group #mce-LNAME:-moz-placeholder, .mc-field-group #mce-MMERGE6:-moz-placeholder, .mc-field-group #mce-MMERGE9:-moz-placeholder, .mc-field-group #mce-MMERGE10:-moz-placeholder { color: #375172; } .form-item__text::-moz-placeholder, .form-item__email::-moz-placeholder, .form-item__url::-moz-placeholder, .form-item__number::-moz-placeholder, .form-item__textarea::-moz-placeholder, .form-item__password::-moz-placeholder, .form-item__tel::-moz-placeholder, .form-item #mce-EMAIL::-moz-placeholder, .form-item #mce-FNAME::-moz-placeholder, .form-item #mce-LNAME::-moz-placeholder, .form-item #mce-MMERGE6::-moz-placeholder, .form-item #mce-MMERGE9::-moz-placeholder, .form-item #mce-MMERGE10::-moz-placeholder, .mc-field-group__text::-moz-placeholder, .mc-field-group__email::-moz-placeholder, .mc-field-group__url::-moz-placeholder, .mc-field-group__number::-moz-placeholder, .mc-field-group__textarea::-moz-placeholder, .mc-field-group__password::-moz-placeholder, .mc-field-group__tel::-moz-placeholder, .mc-field-group #mce-EMAIL::-moz-placeholder, .mc-field-group #mce-FNAME::-moz-placeholder, .mc-field-group #mce-LNAME::-moz-placeholder, .mc-field-group #mce-MMERGE6::-moz-placeholder, .mc-field-group #mce-MMERGE9::-moz-placeholder, .mc-field-group #mce-MMERGE10::-moz-placeholder { color: #375172; } .form-item__text:-ms-input-placeholder, .form-item__email:-ms-input-placeholder, .form-item__url:-ms-input-placeholder, .form-item__number:-ms-input-placeholder, .form-item__textarea:-ms-input-placeholder, .form-item__password:-ms-input-placeholder, .form-item__tel:-ms-input-placeholder, .form-item #mce-EMAIL:-ms-input-placeholder, .form-item #mce-FNAME:-ms-input-placeholder, .form-item #mce-LNAME:-ms-input-placeholder, .form-item #mce-MMERGE6:-ms-input-placeholder, .form-item #mce-MMERGE9:-ms-input-placeholder, .form-item #mce-MMERGE10:-ms-input-placeholder, .mc-field-group__text:-ms-input-placeholder, .mc-field-group__email:-ms-input-placeholder, .mc-field-group__url:-ms-input-placeholder, .mc-field-group__number:-ms-input-placeholder, .mc-field-group__textarea:-ms-input-placeholder, .mc-field-group__password:-ms-input-placeholder, .mc-field-group__tel:-ms-input-placeholder, .mc-field-group #mce-EMAIL:-ms-input-placeholder, .mc-field-group #mce-FNAME:-ms-input-placeholder, .mc-field-group #mce-LNAME:-ms-input-placeholder, .mc-field-group #mce-MMERGE6:-ms-input-placeholder, .mc-field-group #mce-MMERGE9:-ms-input-placeholder, .mc-field-group #mce-MMERGE10:-ms-input-placeholder { color: #375172; } .form-item__text.error, .form-item__email.error, .form-item__url.error, .form-item__number.error, .form-item__textarea.error, .form-item__password.error, .form-item__tel.error, .form-item #mce-EMAIL.error, .form-item #mce-FNAME.error, .form-item #mce-LNAME.error, .form-item #mce-MMERGE6.error, .form-item #mce-MMERGE9.error, .form-item #mce-MMERGE10.error, .mc-field-group__text.error, .mc-field-group__email.error, .mc-field-group__url.error, .mc-field-group__number.error, .mc-field-group__textarea.error, .mc-field-group__password.error, .mc-field-group__tel.error, .mc-field-group #mce-EMAIL.error, .mc-field-group #mce-FNAME.error, .mc-field-group #mce-LNAME.error, .mc-field-group #mce-MMERGE6.error, .mc-field-group #mce-MMERGE9.error, .mc-field-group #mce-MMERGE10.error { border-color: #CC2631; } .form-item .text-count-wrapper, .mc-field-group .text-count-wrapper { font-weight: normal; text-align: right; } .form-item .text-count-wrapper .text-count-message, .mc-field-group .text-count-wrapper .text-count-message { color: #707070; font-size: 12px; } .form-item__textarea, .mc-field-group__textarea { min-height: 100px; resize: vertical; } /* -------------------------- DON'T SHOW CLEAR X IN EDGE -------------------------- */ input::-ms-clear { display: none; } /* -------------------------- CHECKBOX STYLING -------------------------- */ /** Form Styling */ .form-item--checkbox { display: block; position: relative; margin-bottom: 5px; padding-left: 41px; font-size: 15px; cursor: pointer; -webkit-user-select: none; user-select: none; transition: all 0.2s ease-out; } .form-item--checkbox:last-of-type { margin-bottom: -6px; } .form-item--checkbox:focus-within input ~ .form-item__checkbox-facade { background-color: #ededed; } .form-item--checkbox:focus-within input ~ .facets-checkbox { background-color: #ededed; } .form-item--checkbox:focus-within input:checked ~ .form-item__checkbox-facade { background-color: #003866; } .form-item--checkbox:hover input ~ .form-item__checkbox-facade { background-color: #ededed; } .form-item--checkbox:hover input ~ .facets-checkbox { background-color: #ededed; } .form-item--checkbox:hover input:checked ~ .form-item__checkbox-facade { background-color: #003866; } .form-item--checkbox:active input ~ .form-checkbox { background-color: #005aa4; } .form-item--checkbox:active input ~ .facets-checkbox { background-color: #005aa4; } .form-item--checkbox:active input:checked ~ .form-item__checkbox-facade { background-color: #003e71; } .form-item--checkbox label { display: block; position: relative; margin-left: -46px; padding: 6px 0; padding-left: 41px; color: #003057; font-weight: 400; cursor: pointer; z-index: 10; } .form-item--checkbox .form-item__description { margin-top: -11px; margin-left: -3px; } .form-item .form-checkbox, .form-item .facets-checkbox { position: absolute; cursor: pointer; opacity: 0; } .form-item .form-checkbox:checked ~ .form-item__checkbox-facade, .form-item .facets-checkbox:checked ~ .form-item__checkbox-facade { background-color: #003057; } .form-item .form-checkbox:checked ~ .form-item__checkbox-facade:after, .form-item .facets-checkbox:checked ~ .form-item__checkbox-facade:after { opacity: 1; transform: rotate(45deg) scale(1); } .form-item--checkbox .form-item__label { display: block; position: relative; margin-left: -46px; padding: 9px 0; padding-left: 41px; color: #003057; font-weight: 400; cursor: pointer; } .form-item__checkbox-facade { display: block; position: absolute; width: 18px; height: 18px; top: 8px; left: 7px; margin: auto 0; background-color: white; border: 1.5px solid #003057; cursor: pointer; transition: all 0.2s ease-out; } .form-item__checkbox-facade:after { content: ''; display: block; position: absolute; width: 5px; height: 11px; top: 0; right: 0; bottom: 1px; left: 0; margin: auto; border: solid #92d100; border-width: 0 1.5px 1.5px 0; opacity: 0; transform: rotate(45deg) scale(0.8); transition: all 0.2s ease-out; } .form-item--error .form-item__checkbox-facade { background-color: #ffcccc; border: 1px solid red; } /* -------------------------- RADIO STYLING -------------------------- */ /** Form Styling */ .form-item--radio { display: block; position: relative; margin-bottom: 5px; padding-left: 41px; font-size: 15px; -webkit-user-select: none; user-select: none; cursor: pointer; transition: all 0.2s ease-out; } .form-item--radio:hover input ~ .form-item__radio-facade, .form-item--radio:focus-within input ~ .form-item__radio-facade { background-color: #f2f2f2; } .form-item--radio:hover input:checked ~ .form-item__radio-facade, .form-item--radio:focus-within input:checked ~ .form-item__radio-facade { background-color: #00223e; } .form-item--radio:active input ~ .form-item__radio-facade { background-color: #d9d9d9; } .form-item--radio:active input:checked ~ .form-item__radio-facade { background-color: #00060b; } .form-item__radio { position: absolute; cursor: pointer; opacity: 0; } .form-item__radio:checked ~ .form-item__radio-facade { background-color: #003057; } .form-item__radio:checked ~ .form-item__radio-facade:after { transform: translate(-50%, -50%) scale(1); } .form-item--radio .form-item__label { display: block; position: relative; margin-left: -46px; padding: 7px 0; padding-left: 41px; font-size: 14px; font-weight: 400; cursor: pointer; } .form-item__radio-facade { display: block; position: absolute; width: 20px; height: 20px; top: 5px; left: 7px; background-color: #fff; border: 1.5px solid #003057; border-radius: 13px; cursor: pointer; overflow: hidden; transition: all 0.2s ease-out; } .form-item--error .form-item__radio-facade { background-color: #ffcccc; } .form-item__radio-facade:after { content: ''; display: block; position: absolute; width: 10px; height: 10px; top: 50%; left: 50%; background-color: #92d100; border-radius: 12px; transform: translate(-50%, -50%) scale(0); transition: all 0.2s ease-out; } .mc-field-group.input-group strong { display: inline-block; position: relative; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.2px; text-transform: uppercase; transition: all 0.2s ease-out; } @media all and (min-width: 600px) { .mc-field-group.input-group strong { font-size: 15px; } } @media all and (min-width: 1024px) { .mc-field-group.input-group strong { font-size: 15px; } } .mc-field-group.input-group ul { display: flex; flex-direction: column; } .mc-field-group.input-group li { display: inline-flex; position: relative; margin-bottom: 5px; padding-left: 41px; font-size: 15px; } .mc-field-group.input-group li input { display: block; position: absolute; width: 20px; height: 20px; top: 5px; left: 7px; background-color: #fff; border: 1.5px solid #003057; border-radius: 13px; cursor: pointer; overflow: hidden; transition: all 0.2s ease-out; } .mc-field-group.input-group li label { display: block; position: relative; margin-left: -46px; padding: 7px 0; padding-left: 41px; font-size: 14px; font-weight: 400; cursor: pointer; } /* -------------------------- SELECT STYLING -------------------------- */ /** Select Styling */ .form-item, .mc-field-group { /** Disabled */ /** Kill Select Outline in Firefox */ /** IE Bug Fixes */ } .form-item--error .form-item__dropdown, .mc-field-group--error .form-item__dropdown { border-color: #CC2631; } .form-item--error .form-item__dropdown:after, .mc-field-group--error .form-item__dropdown:after { border-color: #CC2631; } .form-item--error .form-item__dropdown .form-select, .mc-field-group--error .form-item__dropdown .form-select { color: #CC2631; } .form-item--select:not(.form-item--disabled):focus-within .form-item__dropdown, .mc-field-group--select:not(.form-item--disabled):focus-within .form-item__dropdown { background-color: white; border-color: #6e9e00; } .form-item--select:not(.form-item--disabled):focus-within .form-item__dropdown:after, .mc-field-group--select:not(.form-item--disabled):focus-within .form-item__dropdown:after { border-color: #6e9e00; } .form-item--select:not(.form-item--disabled):hover .form-item__dropdown, .mc-field-group--select:not(.form-item--disabled):hover .form-item__dropdown { background-color: white; border: 1.5px solid #6e9e00; } .form-item--select:not(.form-item--disabled):hover .form-item__dropdown:after, .mc-field-group--select:not(.form-item--disabled):hover .form-item__dropdown:after { border-color: #6e9e00; } .form-item--select .form-item__label, .mc-field-group--select .form-item__label, .form-item--select .mc-field-group__label, .mc-field-group--select .mc-field-group__label { display: block; margin-bottom: 6px; font-size: 15px; transition: all 0.3s ease-in-out; } @media smartphone { .form-item--select .form-item__label, .mc-field-group--select .form-item__label, .form-item--select .mc-field-group__label, .mc-field-group--select .mc-field-group__label { font-size: 14px; } } .form-item__dropdown, .mc-field-group__dropdown { display: block; position: relative; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; background-color: #fff; border: 1.5px solid #003057; overflow: hidden; transition: all 0.3s ease-in-out; } .form-item__dropdown:after, .mc-field-group__dropdown:after { content: ''; display: block; position: absolute; width: 7px; height: 7px; top: 50%; right: 10px; margin: 0 auto; border-width: 2px 2px 0 0; border-style: solid; border-color: #003057; z-index: 2; transform: translateY(-4px) rotate(-225deg); transition: all 0.3s ease-in-out; pointer-events: none; } .form-item #mce-MMERGE8, .mc-field-group #mce-MMERGE8 { display: block; position: relative; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; background-color: #fff; border: 1.5px solid #003057; overflow: hidden; transition: all 0.3s ease-in-out; width: 100%; padding: 7px 28px 8px 10px; transform: scale(1); /* Firefox */ -webkit-appearance: none; /* Safari and Chrome */ appearance: none; } .form-item #mce-MMERGE8.error, .mc-field-group #mce-MMERGE8.error { border: 1.5px solid #CC2631; } .form-item__select, .form-item .form-select, .mc-field-group__select, .mc-field-group .form-select { position: relative; width: 100%; padding: 7px 28px 8px 10px; color: #003057; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 13px; background-color: transparent; border: none; border-radius: 0; outline: none; cursor: pointer; overflow: hidden; transform: scale(1); -moz-appearance: none; -webkit-appearance: none; backface-visibility: hidden; } .form-item__select, .form-item select option, .mc-field-group__select, .mc-field-group select option { display: inline-block; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .form-item--disabled .form-item__dropdown, .mc-field-group--disabled .form-item__dropdown { opacity: 0.3; } .form-item--disabled .form-item__select, .mc-field-group--disabled .form-item__select { cursor: default; } .form-item select:-moz-focusring, .mc-field-group select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; } .form-item select::-ms-expand, .mc-field-group select::-ms-expand { display: none; } .form-item select::-ms-value, .mc-field-group select::-ms-value { background: transparent; } .form-item select:focus::-ms-value, .mc-field-group select:focus::-ms-value { color: #003057; } .form-item option:disabled, .mc-field-group option:disabled { color: #616161; background-color: transparent; } /* -------------------------- SELECT2 FORM -------------------------- */ .form-item__dropdown { /** Container */ } .form-item__dropdown .selection { /** Selection Tags */ } .form-item__dropdown .selection .select2-selection { border: none; border-radius: 0; } .form-item__dropdown .selection .select2-selection .select2-search--inline { display: none; } .form-item__dropdown .selection .select2-selection__choice { margin-bottom: 0; margin-left: 0; color: white; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 12px; line-height: 23px; text-indent: 0; background-color: #fff; border: none; border-radius: 0; } .form-item__dropdown .selection .select2-selection__choice:before, .form-item__dropdown .selection .select2-selection__choice:after { display: none; } .form-item__dropdown .selection .select2-selection__choice__remove { margin-right: 4px; color: white; transition: all 0.3s ease-in-out; } .form-item__dropdown .selection .select2-selection__choice__remove:hover, .form-item__dropdown .selection .select2-selection__choice__remove:focus { color: white; } /** Select2 Dropdown */ .select2-dropdown { color: white; background-color: #fff; border: none; border-radius: 0; } .select2-dropdown .select2-results { position: relative; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3); z-index: 2; } .select2-dropdown .select2-results__option { font-size: 14px; transition: all 0.3s ease-in-out; } .select2-dropdown .select2-results__option[aria-selected='true'] { color: grey; background-color: transparent; } .select2-dropdown .select2-results__option--highlighted[aria-selected] { background-color: #6e9e00; } .mc-field-group-select:after { content: ''; display: block; position: absolute; width: 7px; height: 7px; top: 70%; right: 10px; margin: 0 auto; border-width: 2px 2px 0 0; border-style: solid; border-color: #003057; z-index: 2; transform: translateY(-4px) rotate(-225deg); transition: all 0.3s ease-in-out; pointer-events: none; } /* -------------------------- UPLOAD INPUT STYLING -------------------------- */ .form-item--webform-document-file { /* -------------------------- DESCRIPTION -------------------------- */ /* -------------------------- MESSAGES -------------------------- */ /* -------------------------- FILE (DISPLAYS AFTER UPLOAD) -------------------------- */ /** Button */ /* -------------------------- UPLOAD CONTAINER -------------------------- */ } .form-item--webform-document-file .form-item__description .webform-element-description { font-size: 12px; text-align: center; } .form-item--webform-document-file .file-upload-js-error { padding: 30px; font-size: 14px; background-color: #f9dfe0; } .form-item--webform-document-file .file { display: block; width: 100%; padding-top: 30px; padding-bottom: 15px; font-size: 14px; text-align: center; } .form-item--webform-document-file .button { margin: 0 0 30px !important; } .form-item--webform-document-file .button[data-drupal-selector='edit-document-upload-remove-button'] { font-size: 14px; } .form-item--webform-document-file .form-managed-file { flex-direction: row; align-items: center; text-align: center; background-color: #d0dce2; /* -------------------------- INPUT -------------------------- */ } .form-item--webform-document-file .form-managed-file input.form-file { display: block; width: 100%; padding: 30px; font-size: 13px; line-height: 13px; text-transform: uppercase; cursor: pointer; } /* -------------------------- BUTTON - BASE -------------------------- */ .button, .button-form { display: inline-block; position: relative; padding: 10px 12px 8px; color: #fff; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; letter-spacing: 0.2px; line-height: 115%; text-align: center; text-decoration: none; text-transform: uppercase; background: none; border: none; box-shadow: none; cursor: pointer; z-index: 1; transition: all 0.3s ease-in-out; /** Trial border green hover */ } @media all and (min-width: 600px) { .button, .button-form { font-size: 18px; } } .button .last-word, .button-form .last-word { display: inline-block; position: relative; } .button svg, .button-form svg { position: relative; width: 9px; height: 9px; bottom: 2px; transition: all 0.3s ease-in-out; } @media all and (min-width: 600px) { .button svg, .button-form svg { bottom: 1px; } } .button svg--line, .button-form svg--line { transition: all 0.3s ease-in-out; stroke-width: 4px; } .button:before, .button-form:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #fff; box-shadow: inset 0 0 0 2px #92d100; z-index: -2; transition: all 0.3s ease-in-out; } .button:after, .button-form:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #003057; z-index: -1; transition: all 0.3s ease-in-out; } .button .svg--line, .button-form .svg--line { stroke: #fff; } .button--reversed:hover .icon-chevron-right, .button--reversed:focus .icon-chevron-right, .button-form--reversed:hover .icon-chevron-right, .button-form--reversed:focus .icon-chevron-right, .button--text:not(.button--disabled):hover .icon-chevron-right, .button--text:not(.button--disabled):focus .icon-chevron-right, .button-form--text:not(.button--disabled):hover .icon-chevron-right, .button-form--text:not(.button--disabled):focus .icon-chevron-right, .button--clear:not(.button--disabled):hover .icon-chevron-right, .button--clear:not(.button--disabled):focus .icon-chevron-right, .button-form--clear:not(.button--disabled):hover .icon-chevron-right, .button-form--clear:not(.button--disabled):focus .icon-chevron-right, .content-reference__link:hover .button .icon-chevron-right, .content-reference__link:focus .button .icon-chevron-right, .button:hover .icon-chevron-right, .button:focus .icon-chevron-right, .button-form:hover .icon-chevron-right, .button-form:focus .icon-chevron-right { transform: translateX(3px); } .button--reversed:hover .icon-chevron-left, .button--reversed:focus .icon-chevron-left, .button-form--reversed:hover .icon-chevron-left, .button-form--reversed:focus .icon-chevron-left, .button--text:not(.button--disabled):hover .icon-chevron-left, .button--text:not(.button--disabled):focus .icon-chevron-left, .button-form--text:not(.button--disabled):hover .icon-chevron-left, .button-form--text:not(.button--disabled):focus .icon-chevron-left, .button--clear:not(.button--disabled):hover .icon-chevron-left, .button--clear:not(.button--disabled):focus .icon-chevron-left, .button-form--clear:not(.button--disabled):hover .icon-chevron-left, .button-form--clear:not(.button--disabled):focus .icon-chevron-left, .content-reference__link:hover .button .icon-chevron-left, .content-reference__link:focus .button .icon-chevron-left, .button:hover .icon-chevron-left, .button:focus .icon-chevron-left, .button-form:hover .icon-chevron-left, .button-form:focus .icon-chevron-left { transform: translateX(-3px); } .button--reversed:hover:before, .button--reversed:focus:before, .button-form--reversed:hover:before, .button-form--reversed:focus:before, .button--text:hover:not(.button--disabled):before, .button--text:focus:not(.button--disabled):before, .button-form--text:hover:not(.button--disabled):before, .button-form--text:focus:not(.button--disabled):before, .button--clear:hover:not(.button--disabled):before, .button--clear:focus:not(.button--disabled):before, .button-form--clear:hover:not(.button--disabled):before, .button-form--clear:focus:not(.button--disabled):before, .content-reference__link:hover .button:before, .content-reference__link:focus .button:before, .button:hover:before, .button:focus:before, .button-form:hover:before, .button-form:focus:before { top: 6px; left: 6px; transition: all 0.3s ease-in-out; } /* -------------------------- BUTTON REVERSED -------------------------- */ .button--reversed, .button-form--reversed { color: #003057; background-color: #fff; overflow: auto; transition: box-shadow 0.3s ease-in-out; } .button--reversed:before, .button-form--reversed:before { display: none; } .button--reversed:after, .button-form--reversed:after { display: none; } .button--reversed svg, .button-form--reversed svg { position: relative; width: 9px; height: 9px; bottom: 2px; transition: all 0.3s ease-in-out; } @media all and (min-width: 600px) { .button--reversed svg, .button-form--reversed svg { bottom: 1px; } } .button--reversed .svg--line, .button-form--reversed .svg--line { stroke: #003057; } .button--reversed:hover, .button--reversed:focus, .button-form--reversed:hover, .button-form--reversed:focus { box-shadow: 4px 4px 0 0 #92d100; } /* -------------------------- BUTTON - TEXT -------------------------- */ .button--text, .button-form--text, .button--clear, .button-form--clear { padding: 10px 2px 8px 0; color: #003057; background: none; border: none; box-shadow: none; transition: color 0.3s ease-out; } .button--text:before, .button-form--text:before, .button--clear:before, .button-form--clear:before { display: none; } .button--text:after, .button-form--text:after, .button--clear:after, .button-form--clear:after { content: ""; display: block; position: absolute; width: 0; height: 2px; top: auto; left: auto; background: #92d100; transition: width 0.3s; } .button--text svg, .button-form--text svg, .button--clear svg, .button-form--clear svg { position: relative; width: 9px; height: 9px; bottom: 2px; transition: all 0.3s ease-in-out; } @media all and (min-width: 600px) { .button--text svg, .button-form--text svg, .button--clear svg, .button-form--clear svg { bottom: 1px; } } .button--text svg .svg--line, .button-form--text svg .svg--line, .button--clear svg .svg--line, .button-form--clear svg .svg--line { stroke: #003057; } .button--text:not(.button--disabled):hover, .button--text:not(.button--disabled):focus, .button-form--text:not(.button--disabled):hover, .button-form--text:not(.button--disabled):focus, .button--clear:not(.button--disabled):hover, .button--clear:not(.button--disabled):focus, .button-form--clear:not(.button--disabled):hover, .button-form--clear:not(.button--disabled):focus, .content-reference__link:hover .button, .content-reference__link:focus .button { color: #003057; background-color: transparent; box-shadow: none; } .button--text:hover:not(.button--disabled):after, .button--text:focus:not(.button--disabled):after, .button-form--text:hover:not(.button--disabled):after, .button-form--text:focus:not(.button--disabled):after, .button--clear:hover:not(.button--disabled):after, .button--clear:focus:not(.button--disabled):after, .button-form--clear:hover:not(.button--disabled):after, .button-form--clear:focus:not(.button--disabled):after, .content-reference__link:hover .button:after, .content-reference__link:focus .button:after { width: 100%; } .button--text:not(.button--disabled):active, .button-form--text:not(.button--disabled):active, .button--clear:not(.button--disabled):active, .button-form--clear:not(.button--disabled):active, .content-reference__link:active .button { color: #003057; } .button--text:not(.button--disabled):active svg .icon-chevron-right__line, .button-form--text:not(.button--disabled):active svg .icon-chevron-right__line, .button--clear:not(.button--disabled):active svg .icon-chevron-right__line, .button-form--clear:not(.button--disabled):active svg .icon-chevron-right__line, .content-reference__link:active .button svg .icon-chevron-right__line, .button--text:not(.button--disabled):active svg .icon-chevron-left__line, .button-form--text:not(.button--disabled):active svg .icon-chevron-left__line, .button--clear:not(.button--disabled):active svg .icon-chevron-left__line, .button-form--clear:not(.button--disabled):active svg .icon-chevron-left__line, .content-reference__link:active .button svg .icon-chevron-left__line { stroke: #003057; } /* -------------------------- BUTTON CLASSES -------------------------- */ .button, .button-form { /** Hover/Focus State */ /* -------------------------- FLUSH LEFT -------------------------- */ /* -------------------------- REVERSED WHITE BUTTON -------------------------- */ /* -------------------------- TEXT BUTTON -------------------------- */ /* -------------------------- CLEAR BUTTON -------------------------- */ /* -------------------------- BACK BUTTON -------------------------- */ /* -------------------------- DISABLED -------------------------- */ } .button--flush-left, .button-form--flush-left { padding-left: 0; } .button--reversed, .button-form--reversed { /** Hover/Focus State */ } .button--text, .button-form--text { /** Interaction States */ } .button--clear, .button-form--clear { /** Interaction States */ } .button--clear .icon-plus, .button-form--clear .icon-plus { margin-right: 5px; transform: scale(2.5) rotate(45deg); } .button--clear .icon-plus__line, .button-form--clear .icon-plus__line { stroke: #003057; } .button--back, .button-form--back { padding-right: 0; padding-left: 0; } .button--back .icon-chevron-left, .button-form--back .icon-chevron-left { display: inline-block; bottom: 1px; } .button--back .icon-chevron-left--line, .button-form--back .icon-chevron-left--line { stroke: #003057; } .button--back .icon-chevron-right, .button-form--back .icon-chevron-right { display: none; } .button--disabled, .button-form--disabled { pointer-events: none; opacity: 0.5; } /* -------------------------- TABLE VARIABLES -------------------------- */ /* -------------------------- TABLE STYLING -------------------------- */ table { position: relative; width: 100%; margin: 0; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; text-align: center; background-color: #fff; border: 2px solid #aabfcb; border-collapse: separate; z-index: 1; /* -------------------------- TABLE HEAD SPECIFIC -------------------------- */ /* -------------------------- ROW SPECIFIC -------------------------- */ /* -------------------------- TABLE FOOTER -------------------------- */ } table thead { color: #003057; } table thead th { padding: 15px; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; text-align: center; text-transform: uppercase; background-color: #e9eff2; border: 2px solid #aabfcb; } table tr { position: relative; } table tr td, table tr th { position: relative; min-width: 130px; padding: 15px; border: 2px solid #aabfcb; border-width: 0 2px 2px 0; } table tr td:last-of-type, table tr th:last-of-type { border-width: 0 0 2px; } table tr td { color: #000000; } table tr:first-of-type th { border-width: 0 2px 2px 0; } table tr:first-of-type th:last-of-type { border-width: 0 0 2px; } table tr:last-of-type td { border-width: 0 2px 0 0; } table tr:last-of-type td:last-of-type { border-width: 0; } table tfoot th { padding: 15px; color: #375172; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 12px; font-style: italic; text-align: center; } /* -------------------------- RESPONSIVE TABLE STACK -------------------------- */ .responsive-table--stacked table thead { display: none; } @media all and (min-width: 1024px) { .responsive-table--stacked table thead { display: table-header-group; } } .responsive-table--stacked table tbody tr { display: block; } @media all and (min-width: 1024px) { .responsive-table--stacked table tbody tr { display: table-row; } } @media (max-width: 1023px) { .responsive-table--stacked table tbody tr:first-of-type td:first-of-type { border-width: 0; } } @media (max-width: 1023px) { .responsive-table--stacked table tbody tr:last-of-type td:last-of-type { border-width: 2px 0 0; } } .responsive-table--stacked table tbody tr td { /** Mobile Column Header (This is shown in place of the normal column headers) */ /** Empty Data Headings (Used for headings on mobile) */ } @media (max-width: 1023px) { .responsive-table--stacked table tbody tr td { display: block; position: relative; padding: 0 10px 10px; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; line-height: 150%; text-align: center; backface-visibility: hidden; border: 2px solid #aabfcb; border-width: 2px 0 0; } } .responsive-table--stacked table tbody tr td:before { content: attr(data-heading); display: block; width: 100%; height: calc(100% + 1px); margin-bottom: 0; padding: 12px 10px 5px; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; overflow: hidden; } @media all and (min-width: 1024px) { .responsive-table--stacked table tbody tr td:before { display: none; } } .responsive-table--stacked table tbody tr td[data-heading='']:before { display: none; } /* -------------------------- RESPONSIVE TABLE SCROLLABLE -------------------------- */ .responsive-table--scrollable { border: 2px solid #aabfcb; overflow: auto; /* Max of 5 sticky columns */ } .responsive-table--scrollable table { border: none; } .responsive-table--scrollable[data-sticky-columns='1'] table tr th:nth-of-type(1), .responsive-table--scrollable[data-sticky-columns='1'] table tr td:nth-of-type(1) { position: sticky; left: 0px; background: #fff; z-index: 1; } .responsive-table--scrollable[data-sticky-columns='1'] table tr th:nth-of-type(1) { background: #e3eaee; } .responsive-table--scrollable[data-sticky-columns='2'] table tr th:nth-of-type(1), .responsive-table--scrollable[data-sticky-columns='2'] table tr td:nth-of-type(1) { position: sticky; left: 0px; background: #fff; z-index: 1; } .responsive-table--scrollable[data-sticky-columns='2'] table tr th:nth-of-type(1) { background: #e3eaee; } .responsive-table--scrollable[data-sticky-columns='2'] table tr th:nth-of-type(2), .responsive-table--scrollable[data-sticky-columns='2'] table tr td:nth-of-type(2) { position: sticky; left: 130px; background: #fff; z-index: 1; } .responsive-table--scrollable[data-sticky-columns='2'] table tr th:nth-of-type(2) { background: #e3eaee; } .responsive-table--scrollable[data-sticky-columns='3'] table tr th:nth-of-type(1), .responsive-table--scrollable[data-sticky-columns='3'] table tr td:nth-of-type(1) { position: sticky; left: 0px; background: #fff; z-index: 1; } .responsive-table--scrollable[data-sticky-columns='3'] table tr th:nth-of-type(1) { background: #e3eaee; } .responsive-table--scrollable[data-sticky-columns='3'] table tr th:nth-of-type(2), .responsive-table--scrollable[data-sticky-columns='3'] table tr td:nth-of-type(2) { position: sticky; left: 130px; background: #fff; z-index: 1; } .responsive-table--scrollable[data-sticky-columns='3'] table tr th:nth-of-type(2) { background: #e3eaee; } .responsive-table--scrollable[data-sticky-columns='3'] table tr th:nth-of-type(3), .responsive-table--scrollable[data-sticky-columns='3'] table tr td:nth-of-type(3) { position: sticky; left: 260px; background: #fff; z-index: 1; } .responsive-table--scrollable[data-sticky-columns='3'] table tr th:nth-of-type(3) { background: #e3eaee; } .responsive-table--scrollable[data-sticky-columns='4'] table tr th:nth-of-type(1), .responsive-table--scrollable[data-sticky-columns='4'] table tr td:nth-of-type(1) { position: sticky; left: 0px; background: #fff; z-index: 1; } .responsive-table--scrollable[data-sticky-columns='4'] table tr th:nth-of-type(1) { background: #e3eaee; } .responsive-table--scrollable[data-sticky-columns='4'] table tr th:nth-of-type(2), .responsive-table--scrollable[data-sticky-columns='4'] table tr td:nth-of-type(2) { position: sticky; left: 130px; background: #fff; z-index: 1; } .responsive-table--scrollable[data-sticky-columns='4'] table tr th:nth-of-type(2) { background: #e3eaee; } .responsive-table--scrollable[data-sticky-columns='4'] table tr th:nth-of-type(3), .responsive-table--scrollable[data-sticky-columns='4'] table tr td:nth-of-type(3) { position: sticky; left: 260px; background: #fff; z-index: 1; } .responsive-table--scrollable[data-sticky-columns='4'] table tr th:nth-of-type(3) { background: #e3eaee; } .responsive-table--scrollable[data-sticky-columns='4'] table tr th:nth-of-type(4), .responsive-table--scrollable[data-sticky-columns='4'] table tr td:nth-of-type(4) { position: sticky; left: 390px; background: #fff; z-index: 1; } .responsive-table--scrollable[data-sticky-columns='4'] table tr th:nth-of-type(4) { background: #e3eaee; } .responsive-table--scrollable[data-sticky-columns='5'] table tr th:nth-of-type(1), .responsive-table--scrollable[data-sticky-columns='5'] table tr td:nth-of-type(1) { position: sticky; left: 0px; background: #fff; z-index: 1; } .responsive-table--scrollable[data-sticky-columns='5'] table tr th:nth-of-type(1) { background: #e3eaee; } .responsive-table--scrollable[data-sticky-columns='5'] table tr th:nth-of-type(2), .responsive-table--scrollable[data-sticky-columns='5'] table tr td:nth-of-type(2) { position: sticky; left: 130px; background: #fff; z-index: 1; } .responsive-table--scrollable[data-sticky-columns='5'] table tr th:nth-of-type(2) { background: #e3eaee; } .responsive-table--scrollable[data-sticky-columns='5'] table tr th:nth-of-type(3), .responsive-table--scrollable[data-sticky-columns='5'] table tr td:nth-of-type(3) { position: sticky; left: 260px; background: #fff; z-index: 1; } .responsive-table--scrollable[data-sticky-columns='5'] table tr th:nth-of-type(3) { background: #e3eaee; } .responsive-table--scrollable[data-sticky-columns='5'] table tr th:nth-of-type(4), .responsive-table--scrollable[data-sticky-columns='5'] table tr td:nth-of-type(4) { position: sticky; left: 390px; background: #fff; z-index: 1; } .responsive-table--scrollable[data-sticky-columns='5'] table tr th:nth-of-type(4) { background: #e3eaee; } .responsive-table--scrollable[data-sticky-columns='5'] table tr th:nth-of-type(5), .responsive-table--scrollable[data-sticky-columns='5'] table tr td:nth-of-type(5) { position: sticky; left: 520px; background: #fff; z-index: 1; } .responsive-table--scrollable[data-sticky-columns='5'] table tr th:nth-of-type(5) { background: #e3eaee; } .responsive-table--indicator .responsive-table__indicator { opacity: 1; } .responsive-table--indicator .responsive-table__indicator__inner { transform: translateX(0); } .responsive-table__indicator { display: block; position: absolute; width: 50px; height: 50px; top: 62px; right: 0; opacity: 0; overflow: hidden; z-index: 2; transition: 0.3s opacity, 0.5s transform; pointer-events: none; } .responsive-table__indicator__inner { display: block; position: absolute; background-color: rgba(0, 48, 87, 0.9); width: 50px; height: 50px; top: 0; right: 0; padding: 15px; z-index: 2; transform: translateX(100%); transition: 0.3s opacity, 0.5s transform; pointer-events: none; } .responsive-table__indicator__inner .icon-chevron-right { position: relative; width: 70%; height: 100%; animation: table-indicator infinite 3.0s ease-in-out; } .responsive-table__indicator__inner .icon-chevron-right__line { stroke: #fff; stroke-width: 3px; } @keyframes table-indicator { 0% { transform: translateX(0); } 50% { transform: translateX(10px); } 100% { transform: translateX(0); } } /* -------------------------- ICON STYLING -------------------------- */ .icons { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 20px; gap: 20px; } .icons li { text-align: center; } .icons li svg { width: 22px; height: 22px; } /* -------------------------- VIDEO STYLING -------------------------- */ /** Default video set to 16x9 widescreen aspect ratio */ .video, .responsive-video, .videodetector { padding-top: 56.25%; position: relative; clear: both; height: 0; margin: 0 0 39px; overflow: hidden; transition: all 0.2s ease-out; /** 4x3 fullscreen aspect ratio override */ } .video--fullscreen-aspect, .responsive-video--fullscreen-aspect, .videodetector--fullscreen-aspect { padding-top: 75%; } .video iframe, .responsive-video iframe, .videodetector iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } /* -------------------------- CUSTOM IMAGE STYLING -------------------------- */ img { max-width: 100%; height: auto; margin: 0; vertical-align: top; } /** Figure */ figure, .rte-image { position: relative; margin: 0 0 36px; text-align: center; transition: all 0.2s ease-out; } figure .rte-image, .rte-image .rte-image { margin: 0 auto; } .rte-image__image-wrap { position: relative; max-width: 100%; } .rte-image__image-wrap-inner { position: relative; background-color: #aabfcb; overflow: hidden; z-index: 1; } .rte-image__image-wrap-inner:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.5; z-index: 2; } .rte-image__image { position: absolute; width: 100%; max-width: 100%; height: 100%; top: 0; left: 0; } figcaption { margin: 0; padding: 10px 0; color: grey; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 12px; font-weight: 500; background-color: white; } /** Alignment */ .align-left, .align-right { max-width: 100%; } @media all and (min-width: 1024px) { .align-left, .align-right { max-width: calc(50% + 30px); } } .align-left { float: left; margin: 8px 30px 30px 0; } .align-right { float: right; margin: 8px 0 30px 30px; } @media (max-width: 1024px) { .align-left, .align-right { float: none; width: auto; margin: 12px auto 22px; text-align: center; } } /** Spacing Overrides */ p + figure, p + .rte-image { margin-top: 22px; } p + figure.align-left, p + figure.align-right, p + .rte-image.align-left, p + .rte-image.align-right { margin-top: 22px; } @media all and (min-width: 1024px) { p + figure.align-left, p + figure.align-right, p + .rte-image.align-left, p + .rte-image.align-right { margin-top: 8px; } } /* -------------------------- SET COLOR VARS -------------------------- */ /* -------------------------- DRUPAL TABS STYLING -------------------------- */ .drupal-tabs { position: relative; z-index: 101; /* -------------------------- LINK -------------------------- */ } .drupal-tabs li { display: block; width: 100%; margin-right: 10px; margin-bottom: 10px; } @media all and (min-width: 600px) { .drupal-tabs li { display: inline-block; width: auto; margin-bottom: 0; } } .drupal-tabs li:last-child { margin-right: 0; margin-bottom: 0; } .drupal-tabs__link { padding: 8px 5px 5px; color: white; font-family: "Barley-Regular", "Helvetica", "Ubuntu Condensed", "Liberation Sans Narrow", arial narrow, arial, sans-serif; font-size: 15px; font-weight: 900; letter-spacing: 1px; background: none; border: none; transition: color 0.2s ease-in-out; } .drupal-tabs__link:before, .drupal-tabs__link:after { display: none; } .drupal-tabs__link:hover, .drupal-tabs__link:focus, .drupal-tabs__link:active { color: #bfbfbf; background: none; } /* -------------------------- CONTENT TEASER GENERAL STYLING -------------------------- */ .content-teaser { max-width: 600px; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; text-align: center; z-index: 2; margin: 0 auto; /** Teaser being interacted with pops up above the others */ /* -------------------------- LINK -------------------------- */ /* -------------------------- IMAGE -------------------------- */ /* -------------------------- IMAGE WRAP -------------------------- */ /* -------------------------- ICON -------------------------- */ /* -------------------------- TEXT WRAP -------------------------- */ /* -------------------------- HEADLINE -------------------------- */ /* -------------------------- TEXT -------------------------- */ } .content-teaser:hover, .content-teaser:focus, .content-teaser:active { z-index: 3; } .content-teaser__link { display: flex; position: relative; flex-direction: column; height: 100%; padding-bottom: 20px; color: black; text-decoration: none; background-color: white; z-index: 1; /** Icon Overrides */ /** Button */ } @media all and (min-width: 1024px) { .content-teaser__link { padding-bottom: 30px; } } .content-teaser--icon .content-teaser__link { padding: 30px; border: none; } .content-teaser__link .button { margin: auto; } .content-teaser__link .button:first-of-type { margin-top: 20px; } .content-teaser__link .button + .button { margin-top: 10px; } .content-teaser__image { position: absolute; width: 100%; max-width: 100%; height: 100%; top: 0; left: 0; } .content-teaser__image-wrap-inner { padding-top: 56.25%; position: relative; background-color: #aabfcb; overflow: hidden; z-index: 1; /** Icon Overrides */ } .content-teaser__image-wrap-inner:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.5; z-index: 2; } .content-teaser__image-wrap-inner--icon { width: 90px; height: 90px; margin: 0 auto; padding: 0; background-color: white; } @media all and (min-width: 600px) { .content-teaser__image-wrap-inner--icon { width: 110px; height: 110px; } } .content-teaser__image-wrap-inner--icon:after { display: none; } .content-teaser__icon { position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .content-teaser__text-wrap { padding: 30px 30px 0; } .content-teaser--icon .content-teaser__text-wrap { padding: 20px 0 0; } .content-teaser__headline { margin: 0 0 10px; padding: 0; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; line-height: 110%; text-transform: uppercase; transition: all 0.2s ease-out; } @media all and (min-width: 1024px) { .content-teaser__headline { font-size: 24px; } } .content-teaser__text { margin: 0 auto 3px; } .content-teaser__text p { line-height: 150%; } /* -------------------------- GENERAL CONTENT REFERENCE STYLING -------------------------- */ .content-reference { max-width: 600px; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; text-align: center; /* -------------------------- LINK -------------------------- */ /* -------------------------- INNER IMAGE WRAP -------------------------- */ /* -------------------------- IMAGE -------------------------- */ /* -------------------------- TEXT WRAP -------------------------- */ /* -------------------------- HEADLINE -------------------------- */ /* -------------------------- TEXT -------------------------- */ } .content-reference__link { display: flex; position: relative; flex-direction: column; height: 100%; padding-bottom: 20px; color: black; text-decoration: none; background-color: white; border: 2px solid #003057; overflow: hidden; transition: all 0.3s ease-in-out; /** Button Overrides */ /** Interaction States (Card-based interaction States) */ } @media all and (min-width: 1024px) { .content-reference__link { padding-bottom: 30px; } } .content-reference__link .button { margin-top: 9px; } .content-reference__link:hover, .content-reference__link:focus { box-shadow: 8px 8px 0 0 #aabfcb; z-index: 5; } .content-reference__image-wrap-inner { padding-top: 50%; display: flex; position: relative; background-color: #aabfcb; z-index: 1; } .content-reference__image-wrap-inner:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.5; z-index: 2; } .content-reference__image { position: absolute; width: 100%; max-width: 100%; height: 100%; top: 0; left: 0; } .content-reference__text-wrap { position: relative; width: 100%; padding: 20px 20px 0; text-align: center; z-index: 1; } @media all and (min-width: 1024px) { .content-reference__text-wrap { padding: 30px 30px 0; } } .content-reference__headline { display: inline-block; position: relative; margin: 0; padding: 0 0 5px; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; text-transform: uppercase; overflow: hidden; } @media all and (min-width: 1024px) { .content-reference__headline { font-size: 24px; } } .content-reference__headline + .content-reference__text { margin-top: 8px; } .content-reference__text { margin: 0 auto 3px; } .content-reference__text p { line-height: 150%; } /* -------------------------- CONTENT FEATURE GENERAL -------------------------- */ .content-feature-item { width: 100%; } .content-feature { /* -------------------------- IMAGE -------------------------- */ /** Wrap */ /** Inner Wrap */ /* -------------------------- TEXT WRAP -------------------------- */ /* -------------------------- TEXT WRAP INNER -------------------------- */ /* -------------------------- HEADLINE -------------------------- */ /* -------------------------- SUBHEAD -------------------------- */ /* -------------------------- DESCRIPTION -------------------------- */ /* -------------------------- ALIGNMENT OVERRIDES -------------------------- */ } .content-feature__content-wrap { display: flex; flex-direction: column; align-items: center; } @media all and (min-width: 1024px) { .content-feature__content-wrap { flex-direction: row; } } .content-feature__image-wrap { position: relative; order: 0; width: 100%; max-width: 860px; } @media all and (min-width: 1024px) { .content-feature__image-wrap { order: 1; width: 57%; max-width: none; } } .content-feature__image-wrap:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 6px; left: 6px; border: 2px solid #aabfcb; pointer-events: none; } @media all and (min-width: 768px) { .content-feature__image-wrap:after { top: 10px; left: 10px; } } .content-feature__image-wrap-inner { padding-top: 56.25%; display: flex; position: relative; width: 100%; background-color: #003057; } .content-feature__image-wrap-inner img { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; object-position: 50% 50%; } .content-feature__text-wrap { display: block; position: relative; order: 1; width: 100%; max-width: 860px; padding-top: 13px; padding-bottom: 12px; color: black; text-decoration: none; backface-visibility: hidden; } @media all and (min-width: 1024px) { .content-feature__text-wrap { order: 0; width: 43%; padding-top: 30px; } } .content-feature__text-wrap-inner { padding: 0; /** Button Overrides */ } @media all and (min-width: 1024px) { .content-feature__text-wrap-inner { padding: 0 50px; } } .content-feature__text-wrap-inner p:last-child, .content-feature__text-wrap-inner div:last-child { padding-bottom: 0; } .content-feature__text-wrap-inner .button:first-of-type { margin-right: 25px; } .content-feature__text-wrap-inner .button { margin-top: 15px; } .content-feature__text-wrap-inner .button + .button { margin-top: 11px; } .content-feature__headline:after { content: ""; display: block; position: absolute; width: 20%; min-width: 40px; max-width: 70px; height: 2px; right: 0; bottom: -8px; left: 0; background-color: #92d100; transition: height 0.2s ease-out; } .rte-body-component .content-feature__headline { position: relative; margin-bottom: 0; color: #003057; font-size: 18px; line-height: 115%; } @media all and (min-width: 1024px) { .rte-body-component .content-feature__headline { font-size: 24px; } } @media all and (min-width: 600px) { .rte-body-component .content-feature__headline { margin-top: 20px; } } @media all and (min-width: 320px) { .rte-body-component .content-feature__headline { margin-top: 20px; } } .content-feature__subhead { margin-top: 11px; } .content-feature__description { margin-top: 21px; font-size: 14px; line-height: 150%; } @media all and (min-width: 1024px) { .content-feature__description { font-size: 15px; } } .content-feature__description:last-child { margin-bottom: 0; } .content-feature--left .content-feature__image-wrap { order: 0; } @media all and (min-width: 1024px) { .content-feature--left .content-feature__image-wrap { order: 1; } } .content-feature--left .content-feature__text-wrap { order: 1; } @media all and (min-width: 1024px) { .content-feature--left .content-feature__text-wrap { order: 0; } } .content-feature--right .content-feature__image-wrap { order: 0; } @media all and (min-width: 1024px) { .content-feature--right .content-feature__image-wrap { order: 0; } } .content-feature--right .content-feature__text-wrap { order: 1; } @media all and (min-width: 1024px) { .content-feature--right .content-feature__text-wrap { order: 1; } } .content-feature-item--even { padding-top: 45px; } /* -------------------------- CONTENT HERO TEXT GENERAL STYLING -------------------------- */ .content-intro { position: relative; /* -------------------------- RESET TOP MARGIN ON ANY DIV THAT APPEARS AFTER COMPONENT -------------------------- */ /* -------------------------- TEXT BLOCK -------------------------- */ /* -------------------------- HEADLINE -------------------------- */ } .content-intro + div, .content-intro + table, .content-intro + section { margin-top: 24px; } @media all and (min-width: 600px) { .content-intro + div, .content-intro + table, .content-intro + section { margin-top: 39px; } } .content-intro__text-wrap { max-width: 900px; text-align: center; } .rte-body-component .content-intro__headline { display: inline-block; margin-bottom: 10px; padding: 0; color: #375172; font-family: "Barley-Regular", "Helvetica", "Ubuntu Condensed", "Liberation Sans Narrow", arial narrow, arial, sans-serif; font-size: 24px; letter-spacing: 1px; z-index: 1; } @media all and (min-width: 1024px) { .rte-body-component .content-intro__headline { font-size: 36px; } } /* -------------------------- CALLOUT STYLING -------------------------- */ .callout { font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; text-align: center; /* -------------------------- IMAGE -------------------------- */ /** Inner Wrap */ /* -------------------------- TEXT WRAP -------------------------- */ /* -------------------------- TEXT WRAP INNER -------------------------- */ /* -------------------------- HEADLINE -------------------------- */ /* -------------------------- DESCRIPTION -------------------------- */ /* -------------------------- OVERRIDES FOR PRODUCT CATEGORY CARDS - HOME & PRODUCT LP -------------------------- */ /* -------------------------- OVERRIDES FOR PRODUCT CATEGORY CARDS - HOME -------------------------- */ /* -------------------------- OVERRIDES FOR PRODUCT CATEGORY CARDS - PRODUCT LANDING -------------------------- */ } .callout__link { display: flex; position: relative; flex-direction: column; width: 100%; height: 100%; color: #fff; text-decoration: none; background-color: white; overflow: hidden; } .callout__link:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; background-color: #003057; opacity: 0.75; transition: all 0.3s ease-in-out; } .callout__link:hover, .callout__link:focus { transition: all 0.3s ease-in-out; } .callout__link:hover:after, .callout__link:focus:after { opacity: 0.9; } .callout__link:hover .callout__headline:after, .callout__link:focus .callout__headline:after { width: 25%; } .callout__link:hover .button, .callout__link:focus .button { color: #92d100; transition: all 0.3s ease-in-out; } .callout__link:hover .button .svg--line, .callout__link:focus .button .svg--line { stroke: #92d100; } .callout__link:hover .button .icon-chevron-right, .callout__link:focus .button .icon-chevron-right { transform: translateX(3px); } .callout__image-wrap-inner { padding-top: 56.25%; position: relative; width: 100%; top: 0; left: 0; background-color: #aabfcb; transition: 0.3s background-color ease-in-out; } .callout__image-wrap-inner img { position: absolute; width: 100%; max-width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; } .callout__image-wrap-inner:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.5; z-index: 1; } .callout__text-wrap { display: flex; position: absolute; flex-direction: column; justify-content: center; width: 100%; height: 100%; bottom: 0; left: 0; padding: 20px; color: #fff; z-index: 1; } .callout__headline { position: relative; margin-bottom: 10px; color: #fff; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; letter-spacing: 0.2px; line-height: 110%; text-transform: uppercase; } @media all and (min-width: 768px) { .callout__headline { font-size: 24px; } } .callout__headline:after { content: ""; display: block; position: absolute; width: 0%; height: 2px; right: 0; bottom: -7px; left: 0; margin: 0 auto; background-color: #92d100; transition: 0.3s width ease-in-out; } .callout__text { padding-bottom: 5px; } .callout__text p { color: #fff; font-weight: 700; } .callout .button { color: #fff; } .callout .button .svg--line { stroke: #fff; } .callout .button:after { display: none; } .callout--home-product-categories .callout__link:after, .callout--product-landing-categories .callout__link:after, .callout--product-landing-seed-treatments .callout__link:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; background-color: #fff; opacity: 0.35; transition: all 0.3s ease-in-out; } .callout--home-product-categories .callout__link:hover, .callout--home-product-categories .callout__link:focus, .callout--product-landing-categories .callout__link:hover, .callout--product-landing-categories .callout__link:focus, .callout--product-landing-seed-treatments .callout__link:hover, .callout--product-landing-seed-treatments .callout__link:focus { transition: all 0.3s ease-in-out; } .callout--home-product-categories .callout__link:hover:after, .callout--home-product-categories .callout__link:focus:after, .callout--product-landing-categories .callout__link:hover:after, .callout--product-landing-categories .callout__link:focus:after, .callout--product-landing-seed-treatments .callout__link:hover:after, .callout--product-landing-seed-treatments .callout__link:focus:after { background-color: #003057; opacity: 0.85; } .callout--home-product-categories .callout__link:hover .callout__headline, .callout--home-product-categories .callout__link:focus .callout__headline, .callout--product-landing-categories .callout__link:hover .callout__headline, .callout--product-landing-categories .callout__link:focus .callout__headline, .callout--product-landing-seed-treatments .callout__link:hover .callout__headline, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline { background-color: transparent; } .callout--home-product-categories .callout__link:hover .callout__headline-wrap:before, .callout--home-product-categories .callout__link:hover .callout__headline-wrap:after, .callout--home-product-categories .callout__link:focus .callout__headline-wrap:before, .callout--home-product-categories .callout__link:focus .callout__headline-wrap:after, .callout--product-landing-categories .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-categories .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-categories .callout__link:focus .callout__headline-wrap:before, .callout--product-landing-categories .callout__link:focus .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:after { width: 260px; } @media all and (min-width: 600px) { .callout--home-product-categories .callout__link:hover .callout__headline-wrap:before, .callout--home-product-categories .callout__link:hover .callout__headline-wrap:after, .callout--home-product-categories .callout__link:focus .callout__headline-wrap:before, .callout--home-product-categories .callout__link:focus .callout__headline-wrap:after, .callout--product-landing-categories .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-categories .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-categories .callout__link:focus .callout__headline-wrap:before, .callout--product-landing-categories .callout__link:focus .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:after { width: 280px; } } @media all and (min-width: 900px) { .callout--home-product-categories .callout__link:hover .callout__headline-wrap:before, .callout--home-product-categories .callout__link:hover .callout__headline-wrap:after, .callout--home-product-categories .callout__link:focus .callout__headline-wrap:before, .callout--home-product-categories .callout__link:focus .callout__headline-wrap:after, .callout--product-landing-categories .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-categories .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-categories .callout__link:focus .callout__headline-wrap:before, .callout--product-landing-categories .callout__link:focus .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:after { width: 120px; } } .callout--home-product-categories .callout__link:hover .callout__headline-wrap:before, .callout--home-product-categories .callout__link:focus .callout__headline-wrap:before, .callout--product-landing-categories .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-categories .callout__link:focus .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:before { left: -260px; } @media all and (min-width: 600px) { .callout--home-product-categories .callout__link:hover .callout__headline-wrap:before, .callout--home-product-categories .callout__link:focus .callout__headline-wrap:before, .callout--product-landing-categories .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-categories .callout__link:focus .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:before { left: -280px; } } @media all and (min-width: 900px) { .callout--home-product-categories .callout__link:hover .callout__headline-wrap:before, .callout--home-product-categories .callout__link:focus .callout__headline-wrap:before, .callout--product-landing-categories .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-categories .callout__link:focus .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:before { left: -120px; } } .callout--home-product-categories .callout__link:hover .callout__headline-wrap:after, .callout--home-product-categories .callout__link:focus .callout__headline-wrap:after, .callout--product-landing-categories .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-categories .callout__link:focus .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:after { right: -260px; } @media all and (min-width: 600px) { .callout--home-product-categories .callout__link:hover .callout__headline-wrap:after, .callout--home-product-categories .callout__link:focus .callout__headline-wrap:after, .callout--product-landing-categories .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-categories .callout__link:focus .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:after { right: -280px; } } @media all and (min-width: 900px) { .callout--home-product-categories .callout__link:hover .callout__headline-wrap:after, .callout--home-product-categories .callout__link:focus .callout__headline-wrap:after, .callout--product-landing-categories .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-categories .callout__link:focus .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:after { right: -120px; } } .callout--home-product-categories .callout__headline-wrap, .callout--product-landing-categories .callout__headline-wrap, .callout--product-landing-seed-treatments .callout__headline-wrap { position: relative; width: auto; margin: 0 auto; padding: 5px; border: 2px solid #fff; } .callout--home-product-categories .callout__headline-wrap:before, .callout--home-product-categories .callout__headline-wrap:after, .callout--product-landing-categories .callout__headline-wrap:before, .callout--product-landing-categories .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__headline-wrap:after { content: ''; display: block; position: absolute; width: 0; height: 2px; top: calc(50% - 1px); background-color: #fff; transition: 0.3s all; } .callout--home-product-categories .callout__headline-wrap:before, .callout--product-landing-categories .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__headline-wrap:before { left: 0; } .callout--home-product-categories .callout__headline-wrap:after, .callout--product-landing-categories .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__headline-wrap:after { right: 0; } .callout--home-product-categories .callout__headline, .callout--product-landing-categories .callout__headline, .callout--product-landing-seed-treatments .callout__headline { margin-bottom: 0; padding: 4px 8px; color: #fff; font-size: 18px; background-color: rgba(0, 48, 87, 0.85); transition: all 0.3s ease-in-out; } @media all and (min-width: 1024px) { .callout--home-product-categories .callout__headline, .callout--product-landing-categories .callout__headline, .callout--product-landing-seed-treatments .callout__headline { font-size: 24px; } } .callout--home-product-categories .callout__headline:after, .callout--product-landing-categories .callout__headline:after, .callout--product-landing-seed-treatments .callout__headline:after { display: none; } .callout--home-product-categories .callout__text, .callout--product-landing-categories .callout__text, .callout--product-landing-seed-treatments .callout__text { display: none; } .callout--home-product-categories .callout__image-wrap-inner:after, .callout--product-landing-categories .callout__image-wrap-inner:after, .callout--product-landing-seed-treatments .callout__image-wrap-inner:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-dark.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.5; z-index: 1; } .callout--home-product-categories .callout__link .button { display: none; } .callout--product-landing-categories .callout__link .button { display: none; } @media all and (min-width: 900px) { .callout--product-landing-categories .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-categories .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-categories .callout__link:focus .callout__headline-wrap:before, .callout--product-landing-categories .callout__link:focus .callout__headline-wrap:after { width: 250px; } } @media all and (min-width: 900px) { .callout--product-landing-categories .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-categories .callout__link:focus .callout__headline-wrap:before { left: -250px; } } @media all and (min-width: 900px) { .callout--product-landing-categories .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-categories .callout__link:focus .callout__headline-wrap:after { right: -250px; } } .callout--product-landing-seed-treatments .callout__link .button { display: none; } @media all and (min-width: 600px) { .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:after { width: 350px; } } @media all and (min-width: 900px) { .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:after { width: 350px; } } @media all and (min-width: 600px) { .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:before { left: -350px; } } @media all and (min-width: 900px) { .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:before, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:before { left: -350px; } } @media all and (min-width: 600px) { .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:after { right: -350px; } } @media all and (min-width: 900px) { .callout--product-landing-seed-treatments .callout__link:hover .callout__headline-wrap:after, .callout--product-landing-seed-treatments .callout__link:focus .callout__headline-wrap:after { right: -350px; } } /* -------------------------- SHARED CTA STYLING -------------------------- */ .content-shared-cta { position: relative; z-index: 2; /* -------------------------- LINK CONTAINER -------------------------- */ /* -------------------------- BUTTON -------------------------- */ } div + .content-shared-cta { margin-top: 30px; } .content-shared-cta__link-container { display: flex; position: relative; justify-content: center; max-width: 900px; margin: 0 auto; } .content-shared-cta__button { display: inline-block; position: relative; padding: 0 10px; background-color: #fff; } @media all and (min-width: 600px) { .content-shared-cta__button { padding: 0 20px; } } @media all and (min-width: 1024px) { .content-shared-cta__button { padding: 0 30px; } } /* -------------------------- CONTENT ACCORDION GROUP -------------------------- */ .accordion-section { width: 100%; margin: 0 auto; } /* -------------------------- ACCORDION -------------------------- */ .accordion { display: flex; position: relative; flex-direction: column; width: 100%; max-width: 900px; height: 100%; margin: 0 auto; overflow: hidden; transition: all 0.3s ease-out; /* -------------------------- TRIGGER AREA -------------------------- */ /* -------------------------- ACCORDION CONTENT -------------------------- */ } .accordion:first-child { border-top: none; } .accordion:last-child { border-width: 1px 0; } .accordion__header { display: block; position: relative; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 16px; line-height: 110%; text-decoration: none; letter-spacing: 0.2px; text-transform: uppercase; background: #e9eff2; cursor: pointer; transition: background-color 0.2s ease-out, color 0.2s ease-out; /** INTERACTIONS */ /** TRIGGER */ /** PLUS AND MINUS ICON */ /* -------------------------- OPEN ACCORDION -------------------------- */ } @media all and (min-width: 600px) { .accordion__header { font-size: 18px; } } .accordion__header:hover, .accordion__header:focus { color: #fff; background-color: #003057; } .accordion__header:hover .accordion__header__icon .icon-plus__line, .accordion__header:focus .accordion__header__icon .icon-plus__line { stroke: #92d100; } .accordion__header:focus { color: #fff; } .accordion__header__trigger { padding: 10px 51px 8px 10px; -webkit-user-select: none; user-select: none; } .accordion__header__icon-wrap { display: block; position: absolute; width: 42px; height: 100%; top: 0; right: 0; transition: background-color 0.2s ease-out; } .accordion__header__icon { display: block; position: absolute; width: 16px; height: 16px; top: 0; right: 0; bottom: 0; left: 0; margin: auto; pointer-events: none; } @media all and (min-width: 600px) { .accordion__header__icon { width: 20px; height: 20px; } } .accordion__header__icon .icon-plus { width: 100%; height: 100%; } .accordion__header__icon .icon-plus__line { stroke: #003057; transition: stroke 0.2s ease-out; } .accordion__header__icon .icon-chevron-right { display: block; width: 100%; height: 100%; transform: rotate(90deg); transition: transform 0.3s ease-in-out; } .accordion__header__icon .icon-chevron-right__line { stroke: #fff; stroke-width: 3; } .accordion__header--open .accordion__header__icon:before { transform: translateY(-50%) rotate(-180deg); } .accordion__header--open .accordion__header__icon:after { transform: translateY(-50%) rotate(-90deg); } .accordion__header--open .accordion__header__icon .icon-plus { transition: transform 0.3s ease-in-out; } .accordion__header--open .accordion__header__icon .icon-plus__line { stroke: #92d100; } .accordion__header--open .accordion__header__icon .icon-plus__line--vertical { display: none; } .accordion__header--open { color: #fff; background: #003057; } .accordion__header--open:hover, .accordion__header--open:focus { background-color: #003b6b; } .accordion__header--open:hover .accordion__header__icon-wrap .accordion__header__icon .icon-plus__line, .accordion__header--open:focus .accordion__header__icon-wrap .accordion__header__icon .icon-plus__line { stroke: #fff; } .accordion__header--open:focus { color: #fff; } .accordion__content { display: block; width: 100%; height: 0; opacity: 0; overflow: hidden; transition: 0.4s opacity; } html.no-js .accordion__content { height: auto; opacity: 1; } .accordion__content__inner { padding: 30px 10px; } .accordion__content--open { opacity: 1; } /* -------------------------- TWO ACCORDIONS SIDE-BY-SIDE -------------------------- */ .accordion + .accordion { margin-top: 10px; } /* -------------------------- TABS STYLING -------------------------- */ .tabs-component { position: relative; /* -------------------------- WRAPPER ELEMENTS -------------------------- */ /* -------------------------- DESKTOP TABS -------------------------- */ /* -------------------------- INDIVIDUAL DESKTOP TAB -------------------------- */ /* -------------------------- MOBILE SELECT MENU -------------------------- */ /** Inner Wrapper */ /** Mobile Select Active Title */ /** Mobile Select List */ /** Select List Link */ /** Individual List Items */ /* -------------------------- TAB CONTENT -------------------------- */ /** Tab Child Content */ } .tabs-component__wrapper { position: relative; } .tabs-component__inner-wrapper { position: relative; border: 2px solid #003057; } .tabs-component__tabs { position: relative; width: 100%; height: 0; color: #fff; background: #003057; overflow: hidden; visibility: hidden; } .tabs-component__tabs--active { height: auto; visibility: visible; } .tabs-component--hide-tabs .tabs-component__tabs { display: none; } .tabs-component__tabs-inner { display: flex; position: relative; flex-direction: row; flex-wrap: nowrap; justify-content: center; overflow: auto; z-index: 5; } .tabs-component__tab-child { display: inline-block; position: relative; padding: 20px; color: #fff; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; line-height: 110%; text-decoration: none; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /** Active Tab Overrides */ } .tabs-component__tab-child:hover, .tabs-component__tab-child:focus { color: #fff; background: #6e9e00; } .tabs-component__tab-child--active { color: #003057; background-color: #fff; pointer-events: none; } .tabs-component__tab-child--active:hover, .tabs-component__tab-child--active:focus { color: #003057; background-color: #fff; } .tabs-component__select { display: none; position: relative; padding-top: 17px; padding-bottom: 20px; text-transform: uppercase; background-color: #003057; /** Headline */ } .tabs-component__select--active-override { display: block; } .tabs-component--hide-tabs .tabs-component__select { display: none; } .tabs-component__select-headline { color: #fff; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; line-height: 110%; text-align: center; text-transform: uppercase; } .tabs-component__select-headline + .tabs-component__select-title { margin-top: 15px; text-transform: uppercase; } .tabs-component__select-inner-wrapper { position: relative; max-width: 700px; margin: 11px auto 0; z-index: 5; } .tabs-component__select-title { display: inline-block; position: relative; width: 100%; height: 30px; padding: 0 30px 0 10px; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; line-height: 110%; text-align: left; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; background-color: #fff; border: none; outline: none; cursor: pointer; overflow: hidden; transition: all 0.3s ease-in-out; -moz-appearance: none !important; /** Interaction States */ } @media all and (min-width: 600px) { .tabs-component__select-title { height: 40px; } } .tabs-component__select-title .icon-chevron-down { position: absolute; width: 8px; height: 8px; top: 0; right: 10px; bottom: 0; margin: auto 0; transition: all 0.3s ease-out; } .tabs-component__select--active .tabs-component__select-title .icon-chevron-down { transform: rotate(180deg); } .tabs-component__select-title .icon-chevron-down__line { stroke-width: 4px; } .tabs-component__select-tab { position: absolute; width: 100%; height: auto; max-height: 0; top: 8px; left: 0; margin-top: 20px; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; font-weight: 500; line-height: 150%; background: white; border-width: 0 2px; border-color: #003057; overflow: hidden; z-index: 5; transition: max-height 0.2s ease-in-out; } @media all and (min-width: 600px) { .tabs-component__select-tab { top: 18px; } } .tabs-component__select--active .tabs-component__select-tab { max-height: 900px; } .tabs-component__select-tab-link { display: block; width: 100%; color: #003057; text-decoration: none; } .tabs-component__select-tab-child { padding: 5px 10px; color: #003057; background-color: #e9eff2; cursor: pointer; transition: background-color 0.2s ease-out; } .tabs-component__select-tab-child--active { background-color: #aabfcb; } .tabs-component__select-tab-child:hover { background-color: #aabfcb; } .tabs-component__tabs-content { position: relative; padding: 30px 0; /** Hidden tab content shouldn't take up space */ } @media all and (min-width: 600px) { .tabs-component__tabs-content { padding: 45px 0; } } @media all and (min-width: 1024px) { .tabs-component__tabs-content { padding: 60px 0; border: none; } } .tabs-component--hide-tabs .tabs-component__tabs-content { padding: 0; } .tabs-component__tab-content-child { display: none; } .tabs-component__tab-content-child--active { display: block; } .team-member { position: relative; /* -------------------------- TEXT WRAP -------------------------- */ /* -------------------------- HEADLINE -------------------------- */ /* -------------------------- TEXT -------------------------- */ /* -------------------------- EMAIL -------------------------- */ /* --------------------------- LINK --------------------------- */ } .team-member__text-wrap { position: relative; width: 100%; height: 100%; padding: 25px 20px; text-align: center; border: 2px solid #aabfcb; z-index: 1; } .team-member__text-wrap:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-dark.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.6; z-index: 1; pointer-events: none; } .team-member__headline { display: inline-block; position: relative; margin: 0; padding: 0 0 5px; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; text-transform: uppercase; overflow: hidden; } @media all and (min-width: 1024px) { .team-member__headline { font-size: 24px; } } .team-member__headline + .team-member__text { margin-top: 8px; } .team-member__text { margin: 0 auto 10px; line-height: 150%; font-weight: 700; text-transform: uppercase; color: #375172; } .team-member__email { margin: 0 auto 15px; overflow: auto; } .team-member__email a { line-height: 150%; } .team-member__link { cursor: pointer; transition: 0.3s all ease-in-out; } .team-member__link__text { text-align: center; text-decoration: none; } .team-member__link__copied { position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 10px 12px 8px; color: #fff; font-size: 15px; background: #6e9e00; opacity: 0; transition: 0.2s all ease-in-out; pointer-events: none; } @media all and (min-width: 600px) { .team-member__link__copied { font-size: 18px; } } .team-member__link--copied .team-member__link__copied { opacity: 1; } .testimonial__swiper-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; height: auto; padding: 30px 45px 30px; text-align: center; background-color: #003057; } @media all and (min-width: 768px) { .testimonial__swiper-slide { padding: 45px 60px; } } .testimonial__swiper-slide:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.3; z-index: 1; pointer-events: none; } .testimonial__image { max-width: 100px; height: auto; margin-bottom: 15px; border-radius: 50%; } @media all and (min-width: 768px) { .testimonial__image { margin-bottom: 20px; } } .testimonial__text-wrap { color: #fff; } .testimonial__quote { position: relative; clear: both; color: #fff; margin-bottom: 15px; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; line-height: 120%; text-align: center; text-transform: uppercase; margin-right: auto; margin-left: auto; } @media all and (min-width: 768px) { .testimonial__quote { font-size: 20px; } } .testimonial__quote p:first-of-type:before { content: '\201C'; padding-right: 3px; font-size: 22px; } .testimonial__quote p:first-of-type:after { content: '\201D'; padding-left: 3px; font-size: 22px; } .testimonial__attribution { position: relative; color: #fff; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } @media all and (min-width: 768px) { .testimonial__attribution { font-size: 14px; } } .testimonial__attribution:before { content: ""; display: block; position: absolute; width: 10%; width: 8%; height: 2px; top: -9px; right: 0; left: 0; margin: 0 auto; background-color: #92d100; background-color: #92d100; } .testimonial .button { margin-top: 15px; color: #fff; } .testimonial .button .icon-chevron-right__line { stroke: #fff; } .testimonial .button:hover { color: #92d100; } .testimonial .button:hover .icon-chevron-right__line { stroke: #92d100; } .column--left { text-align: left; } .column--center { text-align: center; } .column__headline a[href]:not(.button) { font-weight: normal; } /* -------------------------- PAGER (Used for search results, etc.) -------------------------- */ .pager { position: relative; max-width: 700px; margin: 0 auto; margin-top: 36px; overflow: hidden; z-index: 5; /* -------------------------- INDIVIDUAL LINKS -------------------------- */ } .pager:before { content: ""; display: block; position: absolute; width: 100%; height: 2px; top: 50%; left: 0; margin: 0 auto; background-color: #aabfcb; } .pager__items { display: flex; flex-wrap: nowrap; justify-content: center; padding: 10px; background-color: #fff; transition: all 0.3s ease-in-out; } .pager__item { display: inline-block; position: relative; font-size: 16px; background-color: #fff; } @media tablet-portrait { .pager__item { font-size: 15px; } } .pager__item--ellipsis { display: none; } .pager__link { display: flex; position: relative; padding: 15px 10px; color: #8aa7b8; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 700; text-decoration: none; background: none; border: none; cursor: pointer; z-index: 5; transition: all 0.3s ease-in-out; /** Interaction States */ /** Active Links */ /* -------------------------- PREVIOUS AND NEXT BUTTONS -------------------------- */ } .pager__item:first-of-type .pager__link { padding-left: 20px; } .pager__item:last-of-type .pager__link { padding-right: 20px; } .pager__link:hover, .pager__link:focus, .pager__link:active { color: #6e9e00; } .pager__link--is-active { padding: 15px; color: #003057; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 700; text-decoration: none; pointer-events: none; } .pager__link--prev, .pager__link--next { /** Interaction States */ } .pager__link--prev svg, .pager__link--next svg { width: 12px; height: 12px; margin-top: 3px; } @media tablet-portrait { .pager__link--prev svg, .pager__link--next svg { width: 11px; height: 11px; } } .pager__link--prev .icon-chevron-left, .pager__link--next .icon-chevron-left { transition: transform 0.3s ease-in-out, stroke 0.3s ease-in-out; } .pager__link--prev .icon-chevron-left__line, .pager__link--next .icon-chevron-left__line { stroke: #003057; } .pager__link--prev .icon-chevron-right, .pager__link--next .icon-chevron-right { transition: transform 0.3s ease-in-out, stroke 0.3s ease-in-out; } .pager__link--prev .icon-chevron-right__line, .pager__link--next .icon-chevron-right__line { stroke: #003057; } .pager__link--prev:hover .icon-chevron-left, .pager__link--prev:focus .icon-chevron-left, .pager__link--next:hover .icon-chevron-left, .pager__link--next:focus .icon-chevron-left { transform: translateX(-3px); } .pager__link--prev:hover .icon-chevron-left__line, .pager__link--prev:focus .icon-chevron-left__line, .pager__link--next:hover .icon-chevron-left__line, .pager__link--next:focus .icon-chevron-left__line { stroke: #6e9e00; } .pager__link--prev:hover .icon-chevron-right, .pager__link--prev:focus .icon-chevron-right, .pager__link--next:hover .icon-chevron-right, .pager__link--next:focus .icon-chevron-right { transform: translateX(3px); } .pager__link--prev:hover .icon-chevron-right__line, .pager__link--prev:focus .icon-chevron-right__line, .pager__link--next:hover .icon-chevron-right__line, .pager__link--next:focus .icon-chevron-right__line { stroke: #6e9e00; } /* -------------------------- NEWS LISTING -------------------------- */ .search-result { display: block; position: relative; width: 100%; margin-top: 30px; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; text-align: left; /* -------------------------- LINK -------------------------- */ /* -------------------------- HEADLINE -------------------------- */ /* -------------------------- DATE -------------------------- */ /* -------------------------- TEXT -------------------------- */ } .search-result:first-of-type { margin-top: 0; } .search-result__container { display: block; position: relative; width: 100%; text-decoration: none; z-index: 1; transition: all 0.3s ease-in-out; } .search-result__title { display: block; position: relative; margin-top: 5px; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; letter-spacing: 0.2px; line-height: 120%; text-decoration: none; overflow: hidden; transition: all 0.3s ease-in-out; } @media all and (min-width: 768px) { .search-result__title { margin-top: 0; font-size: 24px; } } .search-result--inline .search-result__title:hover, .search-result--inline .search-result__title:focus { color: #92d100; } .search-result__title:hover, .search-result__title:focus { color: #6e9e00; } .search-result__date { position: relative; padding-bottom: 5px; color: #375172; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; } .search-result__text { margin: 8px 0 0; font-size: 15px; line-height: 185%; } /* -------------------------- SEARCH NO RESULT -------------------------- */ .search-no-result { position: relative; /* -------------------------- INTRO -------------------------- */ /* -------------------------- HEADLINE -------------------------- */ /* -------------------------- DESCRIPTION -------------------------- */ } .search-no-result__intro { margin-top: 12px; } .search-no-result__headline { font-family: "Barley-Regular", "Helvetica", "Ubuntu Condensed", "Liberation Sans Narrow", arial narrow, arial, sans-serif; text-align: center; } .rte-body-component .search-no-result__headline { font-size: 18px; } @media all and (min-width: 600px) { .rte-body-component .search-no-result__headline { font-size: 24px; } } .search-no-result__description { font-size: 14px; } /* -------------------------- MAIN MENU STYLING -------------------------- */ .site-header-menu__main-nav { display: none; position: relative; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; height: 80px; margin-left: auto; /** Links */ /** Below */ /** Below (Children) */ } @media all and (min-width: 1024px) { .site-header-menu__main-nav { display: flex; } } .site-header-menu__main-nav__wrap, .site-header-menu__main-nav__item { position: relative; } .site-header-menu__main-nav__wrap:hover .site-header-menu__main-nav__below, .site-header-menu__main-nav__item:hover .site-header-menu__main-nav__below { display: block; } .site-header-menu__main-nav__wrap { display: none; } .site-header-menu__main-nav__link { display: flex; position: relative; align-items: center; height: 100%; padding: 0 25px; color: #fff; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; letter-spacing: 0.2px; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease-in-out; } .site-header-menu__main-nav__link:hover, .site-header-menu__main-nav__link:focus { color: #92d100; } .site-header-menu__main-nav__link:active { color: #92d100; } .site-header-menu__main-nav__icon-down .icon-chevron-down { width: 13px; height: 11px; margin-left: 5px; transition: all 0.3s ease-in-out; } .site-header-menu__main-nav__icon-down .icon-chevron-down__line { stroke: #fff; transition: all 0.3s ease-in-out; } .site-header-menu__main-nav__item { color: #fff; /** Green Line Hover */ /** Interaction States */ } .site-header-menu__main-nav__item:after { content: ""; display: block; position: absolute; width: 0%; height: 2px; right: 0; bottom: 0; left: 0; margin: 0 auto; background-color: #92d100; transition: 0.3s width ease-in-out; } .site-header-menu__main-nav__item:hover, .site-header-menu__main-nav__item:focus { color: #92d100; } .site-header-menu__main-nav__item:hover:after, .site-header-menu__main-nav__item:focus:after { width: 100%; } .site-header-menu__main-nav__item:hover .icon-chevron-down, .site-header-menu__main-nav__item:focus .icon-chevron-down { transform: rotate(180deg); } .site-header-menu__main-nav__item:hover .icon-chevron-down__line, .site-header-menu__main-nav__item:focus .icon-chevron-down__line { stroke: #92d100; } .site-header-menu__main-nav__item:active { color: #92d100; } .site-header-menu__main-nav__item:active:after { width: 100%; } .site-header-menu__main-nav__item:active .icon-chevron-down { transform: rotate(180deg); } .site-header-menu__main-nav__item:active .icon-chevron-down__line { stroke: #92d100; } .site-header-menu__main-nav__below { display: none; position: absolute; width: 100%; top: 100%; left: 50%; padding: 10px 0; text-align: center; background: #fff; box-shadow: 0 5px 10px 0 rgba(0, 48, 87, 0.4); transform: translate(-50%); transition: all 0.3s ease-in-out; } .site-header-menu__main-nav__below .site-header-menu__main-nav__link { display: inline-block; padding: 7px 5px; color: #003057; font-size: 16px; line-height: 110%; transition: 0.3s color ease-in-out; } .site-header-menu__main-nav__below .site-header-menu__main-nav__link:after { bottom: -2px; } .site-header-menu__main-nav__below .site-header-menu__main-nav__item:hover:after, .site-header-menu__main-nav__below .site-header-menu__main-nav__item:focus:after { width: 40%; } .site-header-menu__main-nav__below .site-header-menu__main-nav__item:active:after { width: 40%; } /* -------------------------- SITE HEADER SECONDARY MENU STYLING -------------------------- */ .site-header-menu__secondary-nav { display: none; position: relative; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; margin-left: auto; padding-right: 15px; padding-left: 15px; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; letter-spacing: 0; white-space: nowrap; background-color: #001E3D; /** Links */ } @media all and (min-width: 600px) { .site-header-menu__secondary-nav { padding-right: 20px; padding-left: 20px; } } @media all and (min-width: 1024px) { .site-header-menu__secondary-nav { display: flex; padding-right: 15px; padding-left: 30px; } } .site-header-menu__secondary-nav__item { position: relative; white-space: nowrap; } .site-header-menu__secondary-nav__link { display: flex; align-items: center; height: 40px; padding: 0 15px; color: #fff; font-size: 15px; letter-spacing: 0.2px; text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: all 0.3s ease-in-out; /** Interaction States */ } .site-header-menu__secondary-nav__link:hover, .site-header-menu__secondary-nav__link:focus { color: #92d100; } /* -------------------------- BREADCRUMBS -------------------------- */ .site-breadcrumb { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; z-index: 40; transition: all 0.3s ease-in-out; /** Breadcrumb items */ /** Breadcrumb item */ /** Link */ } @media all and (min-width: 600px) { .site-breadcrumb { padding-right: 20px; padding-left: 20px; } } @media all and (min-width: 1024px) { .site-breadcrumb { padding-right: 30px; padding-left: 30px; } } .site-breadcrumb__items { display: inline-flex; position: relative; flex-wrap: nowrap; max-width: 100%; padding: 0; } .site-breadcrumb__item { display: inline-block; position: relative; max-width: 150px; color: #fff; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } @media all and (min-width: 768px) { .site-breadcrumb__item { max-width: 350px; } } @media all and (min-width: 1024px) { .site-breadcrumb__item { max-width: 500px; } } .site-breadcrumb__item + .site-breadcrumb__item { padding-left: 9px; } .site-breadcrumb__item:last-child { padding-top: 7px; padding-bottom: 7px; pointer-events: none; } .site-breadcrumb__item .icon-chevron-right { position: relative; width: 6px; height: 6px; bottom: 1px; opacity: 0.8; } .site-breadcrumb__item .icon-chevron-right__line { stroke-width: 4px; stroke: #fff; } .site-breadcrumb__link { display: inline-block; margin-right: 5px; padding: 7px 0; color: #fff; font-weight: 700; text-decoration: none; transition: color 0.3s ease-in-out; /** Interaction States */ } .site-breadcrumb__link:hover, .site-breadcrumb__link:focus { color: #92d100; } .site-breadcrumb__link:active { color: #92d100; } /* -------------------------- FOOTER MAIN MENU STYLING -------------------------- */ .site-footer__main-menu { display: flex; flex-direction: column; width: 100%; color: #fff; text-align: center; text-decoration: none; /** List Item */ /** Link */ /** Nested */ } @media all and (min-width: 768px) { .site-footer__main-menu { margin: 0 auto; text-align: left; } } .site-footer__main-menu__item { display: inline-block; color: #fff; text-decoration: none; } .site-footer__main-menu__link { display: inline-block; position: relative; padding: 10px 0; color: #fff; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; letter-spacing: 0.2px; line-height: 110%; text-decoration: none; text-transform: uppercase; transition: color 0.3s ease-in-out; /** Interaction States */ } .site-footer__main-menu__link svg { display: inline-block; position: absolute; top: 8px; right: -30px; bottom: 0; margin: auto 0; white-space: nowrap; fill: #fff; transition: fill 0.2s ease-out; } .site-footer__main-menu__link:hover, .site-footer__main-menu__link:focus { color: #92d100; } .site-footer__main-menu__link:hover svg, .site-footer__main-menu__link:focus svg { fill: #92d100; } .site-footer__main-menu__link:active { color: #92d100; } .site-footer__main-menu__link:active svg { fill: #92d100; } .site-footer__main-menu__below { display: none; flex-direction: column; } @media all and (min-width: 600px) { .site-footer__main-menu__below { display: flex; } } .site-footer__main-menu__below .site-footer__main-menu__link { font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; text-transform: initial; } /* -------------------------- FOOTER LEGAL MENU STYLING -------------------------- */ .site-footer__legal-menu { display: block; width: 100%; text-align: center; /** List Item */ /** Link */ } .site-footer__legal-menu__item { display: inline-block; padding-left: 15px; } .site-footer__legal-menu__item:first-of-type { padding-left: 0; } .site-footer__legal-menu__link, .site-footer__legal-menu .truste_cursor_pointer { display: inline-block; color: #fff; font-size: 12px; text-decoration: none; transition: color 0.3s ease-in-out; /** Interaction States */ } .site-footer__legal-menu__link:hover, .site-footer__legal-menu__link:focus, .site-footer__legal-menu .truste_cursor_pointer:hover, .site-footer__legal-menu .truste_cursor_pointer:focus { color: #92d100; } .site-footer__legal-menu__link:active, .site-footer__legal-menu .truste_cursor_pointer:active { color: #92d100; } .site-footer__legal-menu .privacy-checkbox { display: inline-block; width: 25px; height: auto; margin-top: 2px; margin-left: 4px; } /* -------------------------- MOBILE MENU STYLING -------------------------- */ .mobile-menu__main-nav { position: relative; width: 100%; padding: 15px 0; text-align: center; /** Links */ } .mobile-menu__main-nav__wrap, .mobile-menu__main-nav__item { position: relative; } .mobile-menu__main-nav__wrap { display: none; } .mobile-menu__main-nav__link { display: flex; position: relative; align-items: center; height: 100%; padding: 15px; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; letter-spacing: 0.2px; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease-in-out; } .mobile-menu__main-nav__link:hover, .mobile-menu__main-nav__link:focus { color: #6e9e00; } .mobile-menu__main-nav__link:hover .icon-chevron-right, .mobile-menu__main-nav__link:focus .icon-chevron-right { transform: translateX(6px); } .mobile-menu__main-nav__link:hover .icon-chevron-left, .mobile-menu__main-nav__link:focus .icon-chevron-left { transform: translateX(-6px); } .mobile-menu__main-nav__link:hover .svg--line, .mobile-menu__main-nav__link:focus .svg--line { stroke: #6e9e00; } .mobile-menu__main-nav__link:active { color: #6e9e00; } .mobile-menu__main-nav__link:active .icon-chevron-right { transform: translateX(6px); } .mobile-menu__main-nav__link:active .icon-chevron-left { transform: translateX(-6px); } .mobile-menu__main-nav__link:active .svg--line { stroke: #6e9e00; } .mobile-menu__main-nav__link span { width: 100%; } .mobile-menu__main-nav__link svg { position: relative; width: 12px; height: 12px; bottom: 0; transition: all 0.3s ease-in-out; } @media all and (min-width: 600px) { .mobile-menu__main-nav__link svg { bottom: 1px; } } .mobile-menu__main-nav__link svg--line { transition: all 0.3s ease-in-out; stroke-width: 4px; } .mobile-menu__main-nav__link .svg--line { stroke: #003057; } .mobile-menu__main-nav:after { content: ""; display: block; position: absolute; width: 70%; height: 2px; right: 0; bottom: 0; left: 0; margin: 0 auto; background-color: #d9e3e8; } .mobile-menu__secondary-nav { position: relative; width: 100%; margin: 0 auto; padding: 15px 0; text-align: center; /** Links */ } .mobile-menu__secondary-nav__wrap, .mobile-menu__secondary-nav__item { position: relative; } .mobile-menu__secondary-nav__wrap { display: none; } .mobile-menu__secondary-nav__link { display: flex; position: relative; align-items: center; height: 100%; padding: 13px 10px; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 16px; letter-spacing: 0.2px; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease-in-out; } .mobile-menu__secondary-nav__link:hover, .mobile-menu__secondary-nav__link:focus { color: #6e9e00; } .mobile-menu__secondary-nav__link:active { color: #6e9e00; } .mobile-menu__secondary-nav__link span { width: 100%; } /* -------------------------- MOBILE MENU MAIN MENU STYLING -------------------------- */ .mobile-menu-tier-two { position: relative; /** Heading (Contains back button / Category title) */ /** Heading (Contains back button / Category title) */ /** Unordered list of links */ /** Links */ } .mobile-menu-tier-two__heading { position: relative; } .mobile-menu-tier-two__heading .button { display: block; width: 100%; margin-bottom: 30px; padding: 0; } .mobile-menu-tier-two__heading .parent-link { text-decoration: none; } .mobile-menu-tier-two__category-title { display: block; position: relative; width: 100%; margin-bottom: 30px; padding: 20px 0; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; letter-spacing: 0.2px; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease-in-out; } .mobile-menu-tier-two__category-title:hover, .mobile-menu-tier-two__category-title:focus { color: #6e9e00; } .mobile-menu-tier-two__category-title:active { color: #6e9e00; } .mobile-menu-tier-two__category-title:before { content: ""; display: block; position: absolute; width: 70%; height: 2px; top: 0; right: 0; left: 0; margin: 0 auto; background-color: #d9e3e8; } .mobile-menu-tier-two__category-title:after { content: ""; display: block; position: absolute; width: 70%; height: 2px; right: 0; bottom: 0; left: 0; margin: 0 auto; background-color: #d9e3e8; } .mobile-menu-tier-two__link-list { position: relative; margin-top: 23px; } .mobile-menu-tier-two__wrap, .mobile-menu-tier-two__item { position: relative; } .mobile-menu-tier-two__wrap { display: none; } .mobile-menu-tier-two__link { display: flex; position: relative; align-items: center; height: 100%; padding: 15px; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; letter-spacing: 0.2px; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease-in-out; } .mobile-menu-tier-two__link:hover, .mobile-menu-tier-two__link:focus { color: #6e9e00; } .mobile-menu-tier-two__link:active { color: #6e9e00; } .mobile-menu-tier-two__link span { width: 100%; } .related-post { display: flex; position: relative; flex-direction: column; max-width: 600px; height: 100%; padding-bottom: 20px; text-decoration: none; background-color: white; z-index: 1; /* -------------------------- INNER IMAGE WRAP -------------------------- */ /* -------------------------- IMAGE -------------------------- */ /* -------------------------- TEXT WRAP -------------------------- */ /* -------------------------- HEADLINE -------------------------- */ /* -------------------------- DATE -------------------------- */ } .related-post__image-wrap-inner { padding-top: 40%; position: relative; background-color: #aabfcb; z-index: 1; } @media all and (min-width: 600px) { .related-post__image-wrap-inner { padding-top: 56.25%; } } .related-post__image-wrap-inner:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.6; } .related-post__image { position: absolute; width: 100%; max-width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; } .related-post__taxonomy { position: absolute; max-width: 90%; right: 0; bottom: -13px; margin: 0 auto; padding: 3px 8px; color: #fff; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; background-color: #003057; z-index: 2; } @media all and (min-width: 1024px) { .related-post__taxonomy { padding: 5px 10px; font-size: 12px; } } .related-post__text-wrap { position: relative; width: 100%; padding: 18px 0 0; text-align: left; } .related-post__headline { display: inline-block; position: relative; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; line-height: 120%; text-decoration: none; cursor: pointer; transition: all 0.3s ease-in-out; } @media all and (min-width: 1024px) { .related-post__headline { font-size: 24px; } } .related-post__headline:hover, .related-post__headline:focus { color: #6e9e00; } .related-post__date { position: relative; padding-bottom: 5px; color: #375172; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; } .related-post .button { left: 0; margin: 0 auto 0 0; } /* -------------------------- CALLOUT STYLING -------------------------- */ .featured-post { font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; text-align: center; overflow: hidden; /* -------------------------- IMAGE -------------------------- */ /** Inner Wrap */ /* -------------------------- TEXT WRAP -------------------------- */ /* -------------------------- TEXT WRAP INNER -------------------------- */ /* -------------------------- HEADLINE -------------------------- */ /* -------------------------- DESCRIPTION -------------------------- */ /* -------------------------- DATE -------------------------- */ } .featured-post__link { display: flex; position: relative; flex-direction: column; width: 100%; height: 100%; color: #fff; text-decoration: none; background-color: white; overflow: hidden; } .featured-post__link:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; background-color: #003057; opacity: 0.75; transition: all 0.3s ease-in-out; } .featured-post__link:hover, .featured-post__link:focus { transition: all 0.3s ease-in-out; } .featured-post__link:hover:after, .featured-post__link:focus:after { opacity: 0.9; } .featured-post__link:hover .featured-post__headline:after, .featured-post__link:focus .featured-post__headline:after { width: 25%; } .featured-post__link:hover .button, .featured-post__link:focus .button { color: #92d100; transition: all 0.3s ease-in-out; } .featured-post__link:hover .button .svg--line, .featured-post__link:focus .button .svg--line { stroke: #92d100; } .featured-post__link:hover .button .icon-chevron-right, .featured-post__link:focus .button .icon-chevron-right { transform: translateX(3px); } .featured-post__image-wrap-inner { padding-top: 75%; position: relative; width: 100%; top: 0; left: 0; background-color: #aabfcb; transition: 0.3s background-color ease-in-out; } @media (min-width: 400px) { .featured-post__image-wrap-inner { padding-top: 56.25%; } } @media all and (min-width: 600px) { .featured-post__image-wrap-inner { padding-top: 40%; } } @media all and (min-width: 768px) { .featured-post__image-wrap-inner { padding-top: 75%; } } @media all and (min-width: 1024px) { .featured-post__image-wrap-inner { padding-top: 50%; } } .featured-post__image-wrap-inner img { position: absolute; width: 100%; max-width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; } .featured-post__image-wrap-inner:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.5; z-index: 1; } .featured-post__text-wrap { display: flex; position: absolute; flex-direction: column; justify-content: center; width: 100%; height: 100%; bottom: 0; left: 0; padding: 45px 30px 30px; color: #fff; z-index: 1; } .featured-post__headline { position: relative; margin-top: 15px; margin-bottom: 10px; color: #fff; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; letter-spacing: 0.2px; line-height: 120%; text-transform: uppercase; } @media all and (min-width: 600px) { .featured-post__headline { font-size: 24px; } } .featured-post__headline:after { content: ""; display: block; position: absolute; width: 0%; height: 2px; right: 0; bottom: -7px; left: 0; margin: 0 auto; background-color: #92d100; transition: 0.3s width ease-in-out; } .featured-post__product-types { position: absolute; top: 15px; left: -2px; margin-bottom: 15px; padding: 5px 8px 5px 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; border: 1.5px solid white; } .featured-post__text { padding-bottom: 5px; line-height: 150%; } .featured-post__text p { color: #fff; font-weight: 700; } .featured-post__date { position: relative; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; font-weight: 700; } .featured-post .button { color: #fff; } .featured-post .button .svg--line { stroke: #fff; } .featured-post .button:after { display: none; } .chart { position: relative; width: 100%; height: auto; padding-top: 15px; /* -------------------------- WRAPPER -------------------------- */ /* -------------------------- BARS & Y-AXIS LABELS -------------------------- */ /* -------------------------- X-AXIS -------------------------- */ /* -------------------------- X-AXIS LINES -------------------------- */ /* -------------------------- KEY -------------------------- */ } .chart__content { position: relative; width: 100%; } .chart__inner { display: grid; position: relative; grid-template-columns: 1fr; grid-gap: 15px; gap: 15px; align-items: center; z-index: 1; } .chart__inner__row { display: grid; grid-template-columns: 1fr; grid-gap: 25px; gap: 25px; align-items: center; } @media all and (min-width: 600px) { .chart__inner__row { grid-template-columns: minmax(min-content, 130px) auto; } } .chart__inner__label { display: none; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; letter-spacing: 0.2px; text-align: right; text-transform: uppercase; } @media all and (min-width: 600px) { .chart__inner__label { display: block; } } .chart__inner__value { display: grid; } .chart--standard .chart__inner__value { grid-template-columns: repeat(8, 1fr); } .chart--letters .chart__inner__value { grid-template-columns: repeat(6, 1fr); } .chart__inner__bar { display: flex; flex-direction: row; height: auto; min-height: 25px; padding: 5px 10px; background: #375172; } .chart__inner__bar__label { display: block; color: #fff; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.2px; text-transform: uppercase; } @media all and (min-width: 600px) { .chart__inner__bar__label { display: none; } } .chart__inner__bar__boolean { display: flex; flex-direction: row; margin-left: 10px; padding-right: 10px; padding-left: 10px; color: #003057; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; font-weight: bold; background: rgba(255, 255, 255, 0.8); } @media all and (min-width: 600px) { .chart__inner__bar__boolean { padding-left: 0; } } .chart__inner__bar__boolean__checkbox { display: flex; flex-direction: row; } .chart__inner__bar__boolean__checkbox + .chart__inner__bar__boolean__checkbox { margin-left: 20px; } .chart__inner__bar__boolean__checkbox__label { margin-right: 10px; } .chart__inner__bar__boolean__checkbox__value { display: block; position: relative; width: 18px; height: 18px; background-color: #fff; border: 1.5px solid #003057; transition: all 0.2s ease-out; } .chart__inner__bar__boolean__checkbox__value:after { content: ''; display: block; position: absolute; width: 5px; height: 11px; top: 0; right: 0; bottom: 1px; left: 0; margin: auto; border: solid #92d100; border-width: 0 1.5px 1.5px 0; opacity: 0; transform: rotate(45deg) scale(0.8); transition: all 0.2s ease-out; } .chart__inner__bar__boolean__checkbox--checked .chart__inner__bar__boolean__checkbox__value { background-color: #003057; } .chart__inner__bar__boolean__checkbox--checked .chart__inner__bar__boolean__checkbox__value:after { opacity: 1; } .chart__inner__bar__text { display: block; margin-left: 10px; padding-right: 10px; padding-left: 10px; color: #003057; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; font-weight: bold; background: #fff; } @media all and (min-width: 600px) { .chart__inner__bar__text { padding-left: 0; } } .chart__inner__bar__empty { display: block; margin-left: 10px; padding-right: 10px; padding-left: 10px; color: #003057; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; font-weight: bold; background: rgba(255, 255, 255, 0.8); } @media all and (min-width: 600px) { .chart__inner__bar__empty { padding-left: 0; } } .chart__inner__bar--1 { grid-column: 1 / 1; } .chart__inner__bar--2 { grid-column: 1 / 2; } .chart__inner__bar--3 { grid-column: 1 / 3; } .chart__inner__bar--4 { grid-column: 1 / 4; } .chart__inner__bar--5 { grid-column: 1 / 5; } .chart__inner__bar--6 { grid-column: 1 / 6; } .chart__inner__bar--7 { grid-column: 1 / 7; } .chart__inner__bar--8 { grid-column: 1 / 8; } .chart__inner__bar--9 { grid-column: 1 / 9; } .chart__inner__bar--1 { width: 10px; padding-right: 0; } @media all and (min-width: 600px) { .chart__inner__bar--1 { background: #375172; } } .chart__inner__bar--p { width: 10px; padding-right: 0; } @media all and (min-width: 600px) { .chart__inner__bar--p { background: #375172; } } .chart__inner__bar--p-f { grid-column: 1 / 2; } .chart__inner__bar--f { grid-column: 1 / 3; } .chart__inner__bar--f-g { grid-column: 1 / 4; } .chart__inner__bar--g { grid-column: 1 / 5; } .chart__inner__bar--g-e { grid-column: 1 / 6; } .chart__inner__bar--e { grid-column: 1 / 7; } .chart__inner__bar--none, .chart__inner__bar--boolean, .chart__inner__bar--text { background: rgba(255, 255, 255, 0.8); } .chart--standard .chart__inner__bar--none, .chart--standard .chart__inner__bar--boolean, .chart--standard .chart__inner__bar--text { grid-column: 1 / 9; } .chart--letters .chart__inner__bar--none, .chart--letters .chart__inner__bar--boolean, .chart--letters .chart__inner__bar--text { grid-column: 1 / 7; } .chart__inner__bar--1 .chart__inner__bar__label, .chart__inner__bar--p .chart__inner__bar__label, .chart__inner__bar--none .chart__inner__bar__label, .chart__inner__bar--boolean .chart__inner__bar__label, .chart__inner__bar--text .chart__inner__bar__label { color: #003057; } .chart__axis { display: grid; position: relative; align-items: center; width: 100%; margin-top: 25px; grid-template-columns: 1fr; grid-gap: 15px; gap: 15px; } .chart__axis__row { display: grid; height: 100%; grid-template-columns: 1fr; grid-gap: 25px; gap: 25px; } @media all and (min-width: 600px) { .chart__axis__row { grid-template-columns: minmax(min-content, 130px) auto; } } .chart__axis__gap { display: none; } @media all and (min-width: 600px) { .chart__axis__gap { display: block; } } .chart__axis__values { display: flex; flex-direction: row; justify-content: space-between; } .chart__axis__value { width: 1px; color: #003057; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; font-weight: bold; } .chart__axis__value:nth-of-type(even) { opacity: 0; visibility: hidden; } .chart__axis__value div { display: inline-block; transform: translateX(-50%); } .chart__lines { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .chart__lines__row { display: grid; position: absolute; width: 100%; height: 100%; grid-template-columns: 1fr; grid-gap: 25px; gap: 25px; } @media all and (min-width: 600px) { .chart__lines__row { grid-template-columns: minmax(min-content, 130px) auto; } } .chart__lines__gap { display: none; } @media all and (min-width: 600px) { .chart__lines__gap { display: block; } } .chart__lines__values { display: flex; flex-direction: row; align-self: center; justify-content: space-between; height: calc(100% + 30px); } .chart__lines__value { width: 2px; background: #92d100; } .chart__lines__value:nth-of-type(even) { opacity: 0; visibility: hidden; } .chart__key { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 900px; margin: 25px auto; } .chart__key__item { padding: 5px 15px; font-size: 12px; } /* -------------------------- CONTENT HERO TEXT GENERAL STYLING -------------------------- */ .content-intro-full { position: relative; /* -------------------------- TEXT BLOCK -------------------------- */ /* -------------------------- HEADLINE -------------------------- */ } .content-intro-full__text-wrap { max-width: 700px; text-align: center; } .rte-body-component .content-intro-full__headline { display: inline-block; margin-bottom: 10px; padding: 0; color: #003057; font-family: "Barley-Regular", "Helvetica", "Ubuntu Condensed", "Liberation Sans Narrow", arial narrow, arial, sans-serif; font-size: 28px; letter-spacing: 1px; z-index: 1; } @media all and (min-width: 768px) { .rte-body-component .content-intro-full__headline { font-size: 32px; } } @media all and (min-width: 1024px) { .rte-body-component .content-intro-full__headline { font-size: 43px; } } /* -------------------------- DARK OVERRIDES -------------------------- */ .content-intro-full--dark { background-color: #001E3D; padding-top: 30px; padding-bottom: 30px; } @media all and (min-width: 768px) { .content-intro-full--dark { padding-top: 45px; padding-bottom: 45px; } } @media all and (min-width: 1024px) { .content-intro-full--dark { padding-top: 60px; padding-bottom: 60px; } } .content-intro-full--dark:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.3; pointer-events: none; } .content-intro-full--dark .content-intro-full__text-wrap .content-intro-full__headline { color: #fff !important; } .content-intro-full--dark .content-intro-full__text-wrap p { color: #fff !important; } .content-intro-full--dark .rte-body-component { color: #fff; } /* -------------------------- LIGHT BLUE -------------------------- */ .content-intro-full--light-blue { background-color: #e9eff2; padding-top: 30px; padding-bottom: 30px; } @media all and (min-width: 768px) { .content-intro-full--light-blue { padding-top: 45px; padding-bottom: 45px; } } @media all and (min-width: 1024px) { .content-intro-full--light-blue { padding-top: 60px; padding-bottom: 60px; } } .content-intro-full--light-blue:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-dark.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.6; } /* -------------------------- CONTENT TEASER GROUP -------------------------- */ .content-teasers-grid { /* -------------------------- CONTAINER -------------------------- */ /* -------------------------- DARK OVERRIDES -------------------------- */ /* -------------------------- LIGHT BLUE OVERRIDES -------------------------- */ } .content-teasers-grid__container { display: grid; grid-gap: 15px; gap: 15px; grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; } @media all and (min-width: 600px) { .content-teasers-grid__container--two { grid-gap: 20px; gap: 20px; grid-template-columns: repeat(2, 1fr); } } @media all and (min-width: 1024px) { .content-teasers-grid__container--two { grid-gap: 30px; gap: 30px; } } @media all and (min-width: 600px) { .content-teasers-grid__container--three { grid-gap: 20px; gap: 20px; grid-template-columns: repeat(2, 1fr); } } @media all and (min-width: 768px) { .content-teasers-grid__container--three { grid-template-columns: repeat(3, 1fr); } } @media all and (min-width: 1024px) { .content-teasers-grid__container--three { grid-gap: 30px; gap: 30px; } } .content-teasers-grid__container--four { max-width: 1280px; } @media all and (min-width: 600px) { .content-teasers-grid__container--four { grid-gap: 20px; gap: 20px; grid-template-columns: repeat(2, 1fr); } } @media all and (min-width: 768px) { .content-teasers-grid__container--four { grid-template-columns: repeat(3, 1fr); } } @media all and (min-width: 1024px) { .content-teasers-grid__container--four { grid-gap: 30px; gap: 30px; grid-template-columns: repeat(4, 1fr); } } .content-teasers-grid__container--icon { max-width: 1280px; } .content-teasers-grid--dark { background-color: #001E3D; padding-top: 30px; padding-bottom: 30px; } @media all and (min-width: 768px) { .content-teasers-grid--dark { padding-top: 45px; padding-bottom: 45px; } } @media all and (min-width: 1024px) { .content-teasers-grid--dark { padding-top: 60px; padding-bottom: 60px; } } .content-teasers-grid--dark:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.3; pointer-events: none; } .content-teasers-grid--dark .content-intro .rte-body-component .content-intro__headline, .content-teasers-grid--dark .content-intro .rte-body-component .rte-body-component, .content-teasers-grid--dark .content-intro .rte-body-component p, .content-teasers-grid--dark .content-intro .container .content-intro__headline, .content-teasers-grid--dark .content-intro .container .rte-body-component, .content-teasers-grid--dark .content-intro .container p, .content-teasers-grid--dark .content-intro .content-intro__text-wrap .content-intro__headline, .content-teasers-grid--dark .content-intro .content-intro__text-wrap .rte-body-component, .content-teasers-grid--dark .content-intro .content-intro__text-wrap p { color: #fff; } .content-teasers-grid--light-blue { background-color: #e9eff2; overflow: hidden; padding-top: 30px; padding-bottom: 30px; } @media all and (min-width: 768px) { .content-teasers-grid--light-blue { padding-top: 45px; padding-bottom: 45px; } } @media all and (min-width: 1024px) { .content-teasers-grid--light-blue { padding-top: 60px; padding-bottom: 60px; } } .content-teasers-grid--light-blue:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-dark.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.6; } /* -------------------------- CONTENT FEATURES GRID -------------------------- */ .standard-marquee + .region > .content-features > .content-features-grid:first-of-type { margin-top: 0; padding-top: 0; } /* -------------------------- CONTENT FEATURES GROUP -------------------------- */ .content-features .content-features-grid:first-of-type { margin-top: 0; } .content-features-grid { position: relative; /** Container Settings */ /* -------------------------- LIGHT BLUE OVERRIDES -------------------------- */ /* -------------------------- DARK OVERRIDES -------------------------- */ } .content-features-grid__container { display: flex; flex-flow: row wrap; justify-content: flex-start; margin: 0 auto; padding-right: 0; padding-left: 0; } @media (max-width: 500px) { .content-features-grid__container { flex-flow: column wrap; } } .content-features-grid__container--carousel { flex-flow: row; } .content-features-grid--light-blue { background-color: #e9eff2; overflow: hidden; padding-top: 30px; padding-bottom: 30px; } @media all and (min-width: 768px) { .content-features-grid--light-blue { padding-top: 45px; padding-bottom: 45px; } } @media all and (min-width: 1024px) { .content-features-grid--light-blue { padding-top: 60px; padding-bottom: 60px; } } .content-features-grid--light-blue:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-dark.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.6; } .content-features-grid--dark { background-color: #001E3D; padding-top: 30px; padding-bottom: 30px; } @media all and (min-width: 768px) { .content-features-grid--dark { padding-top: 45px; padding-bottom: 45px; } } @media all and (min-width: 1024px) { .content-features-grid--dark { padding-top: 60px; padding-bottom: 60px; } } .content-features-grid--dark:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.3; pointer-events: none; } .content-features-grid--dark .container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .rte-body-component .content-feature__headline, .content-features-grid--dark .container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .rte-body-component .content-feature__description, .content-features-grid--dark .container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .content-feature__text-wrap-inner .content-feature__headline, .content-features-grid--dark .container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .content-feature__text-wrap-inner .content-feature__description, .content-features-grid--dark .content-features-grid__container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .rte-body-component .content-feature__headline, .content-features-grid--dark .content-features-grid__container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .rte-body-component .content-feature__description, .content-features-grid--dark .content-features-grid__container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .content-feature__text-wrap-inner .content-feature__headline, .content-features-grid--dark .content-features-grid__container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .content-feature__text-wrap-inner .content-feature__description { color: #fff; } .content-features-grid--dark .container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .rte-body-component .content-feature__headline p, .content-features-grid--dark .container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .rte-body-component .content-feature__description p, .content-features-grid--dark .container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .content-feature__text-wrap-inner .content-feature__headline p, .content-features-grid--dark .container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .content-feature__text-wrap-inner .content-feature__description p, .content-features-grid--dark .content-features-grid__container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .rte-body-component .content-feature__headline p, .content-features-grid--dark .content-features-grid__container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .rte-body-component .content-feature__description p, .content-features-grid--dark .content-features-grid__container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .content-feature__text-wrap-inner .content-feature__headline p, .content-features-grid--dark .content-features-grid__container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .content-feature__text-wrap-inner .content-feature__description p { color: #fff; } .content-features-grid--dark .container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .rte-body-component .button--text, .content-features-grid--dark .container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .content-feature__text-wrap-inner .button--text, .content-features-grid--dark .content-features-grid__container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .rte-body-component .button--text, .content-features-grid--dark .content-features-grid__container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .content-feature__text-wrap-inner .button--text { color: #fff !important; } .content-features-grid--dark .container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .rte-body-component .button--text .last-word .icon-chevron-right .icon-chevron-right__line, .content-features-grid--dark .container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .rte-body-component .button--text .last-word .icon-chevron-right .svg--line, .content-features-grid--dark .container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .content-feature__text-wrap-inner .button--text .last-word .icon-chevron-right .icon-chevron-right__line, .content-features-grid--dark .container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .content-feature__text-wrap-inner .button--text .last-word .icon-chevron-right .svg--line, .content-features-grid--dark .content-features-grid__container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .rte-body-component .button--text .last-word .icon-chevron-right .icon-chevron-right__line, .content-features-grid--dark .content-features-grid__container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .rte-body-component .button--text .last-word .icon-chevron-right .svg--line, .content-features-grid--dark .content-features-grid__container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .content-feature__text-wrap-inner .button--text .last-word .icon-chevron-right .icon-chevron-right__line, .content-features-grid--dark .content-features-grid__container .content-feature-item .content-feature .content-feature__content-wrap .content-feature__text-wrap .content-feature__text-wrap-inner .button--text .last-word .icon-chevron-right .svg--line { stroke: #fff; } .content-features-grid--dark .content-intro .rte-body-component .content-intro__headline, .content-features-grid--dark .content-intro .rte-body-component .rte-body-component, .content-features-grid--dark .content-intro .rte-body-component p, .content-features-grid--dark .content-intro .container .content-intro__headline, .content-features-grid--dark .content-intro .container .rte-body-component, .content-features-grid--dark .content-intro .container p, .content-features-grid--dark .content-intro .content-intro__text-wrap .content-intro__headline, .content-features-grid--dark .content-intro .content-intro__text-wrap .rte-body-component, .content-features-grid--dark .content-intro .content-intro__text-wrap p { color: #fff; } /* -------------------------- CONTENT REFERENCES GRID -------------------------- */ .content-references-grid { padding-bottom: 30px; /** Container Settings */ } @media all and (min-width: 768px) { .content-references-grid { padding-bottom: 45px; } } @media all and (min-width: 1024px) { .content-references-grid { padding-bottom: 60px; } } .content-references-grid__container { display: grid; grid-gap: 15px; gap: 15px; grid-template-columns: 1fr; margin: 0 auto; } @media all and (min-width: 600px) { .content-references-grid__container--two { grid-gap: 20px; gap: 20px; grid-template-columns: repeat(2, 1fr); } } @media all and (min-width: 1024px) { .content-references-grid__container--two { grid-gap: 30px; gap: 30px; } } @media all and (min-width: 600px) { .content-references-grid__container--three { grid-gap: 20px; gap: 20px; grid-template-columns: repeat(2, 1fr); } } @media all and (min-width: 768px) { .content-references-grid__container--three { grid-template-columns: repeat(3, 1fr); } } @media all and (min-width: 1024px) { .content-references-grid__container--three { grid-gap: 30px; gap: 30px; } } @media all and (min-width: 600px) { .content-references-grid__container--four { grid-gap: 20px; gap: 20px; grid-template-columns: repeat(2, 1fr); } } @media all and (min-width: 768px) { .content-references-grid__container--four { grid-template-columns: repeat(3, 1fr); } } @media all and (min-width: 1024px) { .content-references-grid__container--four { grid-gap: 30px; gap: 30px; grid-template-columns: repeat(4, 1fr); } } /* -------------------------- CALLOUT ROW STYLING -------------------------- */ .callouts { /** Container Settings */ } .callouts__container { display: grid; grid-gap: 15px; gap: 15px; grid-template-columns: 1fr; margin: 0 auto; /* -------------------------- OVERRIDES FOR PRODUCT CATEGORY CARDS -------------------------- */ } .content-segment--callouts-dedicated .callouts__container { margin-bottom: 30px; } @media all and (min-width: 768px) { .content-segment--callouts-dedicated .callouts__container { margin-bottom: 45px; } } @media all and (min-width: 1024px) { .content-segment--callouts-dedicated .callouts__container { margin-bottom: 60px; } } @media all and (min-width: 600px) { .callouts__container--one .callout__image-wrap-inner { padding-top: 33.33333%; } } @media all and (min-width: 900px) { .callouts__container--one .callout__image-wrap-inner { padding-top: 22.22222%; } } @media all and (min-width: 600px) { .callouts__container--two { grid-gap: 20px; gap: 20px; grid-template-columns: repeat(2, 1fr); } } @media all and (min-width: 1024px) { .callouts__container--two { grid-gap: 30px; gap: 30px; } } @media all and (min-width: 600px) { .callouts__container--three { grid-gap: 20px; gap: 20px; grid-template-columns: repeat(3, 1fr); } .callouts__container--three .callout__image-wrap-inner { padding-top: 100%; } } @media all and (min-width: 1024px) { .callouts__container--three { grid-gap: 30px; gap: 30px; } } @media all and (min-width: 600px) { .callouts__container--four { grid-gap: 20px; gap: 20px; grid-template-columns: repeat(2, 1fr); } .callouts__container--four .callout__image-wrap-inner { padding-top: 100%; } } @media all and (min-width: 1024px) { .callouts__container--four { grid-gap: 30px; gap: 30px; grid-template-columns: repeat(4, 1fr); } } .callouts__container--home-product-categories { padding-bottom: 0; } @media all and (min-width: 600px) { .callouts__container--home-product-categories { grid-template-columns: repeat(2, 1fr); } } @media all and (min-width: 768px) { .callouts__container--home-product-categories { grid-gap: 20px; gap: 20px; grid-template-columns: repeat(4, 1fr); } .callouts__container--home-product-categories .callout { grid-column: span 2; } .callouts__container--home-product-categories .callout .callout__image-wrap-inner { padding-top: 56.25%; } .callouts__container--home-product-categories .callout:last-child:nth-child(3n - 1) { grid-column-end: -2; } .callouts__container--home-product-categories .callout:nth-last-child(2):nth-child(3n + 1) { grid-column-end: 4; } .callouts__container--home-product-categories .callout:last-child { grid-column: span 2; } .callouts__container--home-product-categories .callout:last-child .callout__image-wrap-inner { padding-top: 56.25%; } } @media all and (min-width: 1024px) { .callouts__container--home-product-categories { grid-template-columns: repeat(4, 1fr); grid-gap: 20px; gap: 20px; } .callouts__container--home-product-categories .callout { grid-column: span 1; } .callouts__container--home-product-categories .callout .callout__image-wrap-inner { padding-top: 100%; } .callouts__container--home-product-categories .callout:last-child:nth-child(3n - 1) { grid-column-end: auto; } .callouts__container--home-product-categories .callout:nth-last-child(2):nth-child(3n + 1) { grid-column-end: auto; } .callouts__container--home-product-categories .callout:last-child { grid-column: span 1; } .callouts__container--home-product-categories .callout:last-child .callout__image-wrap-inner { padding-top: 100%; } } .callouts__container--home-product-categories .callout__image-wrap-inner { padding-top: 40%; } .callouts__container--product-landing-seed-treatments .callout__image-wrap-inner { padding-top: 40%; } @media all and (min-width: 600px) { .callouts__container--product-landing-seed-treatments .callout__image-wrap-inner { padding-top: 22.22222%; } } .embedded-form { padding-top: 30px; padding-bottom: 30px; } @media all and (min-width: 768px) { .embedded-form { padding-top: 45px; padding-bottom: 45px; } } @media all and (min-width: 1024px) { .embedded-form { padding-top: 60px; padding-bottom: 60px; } } .embedded-form #mc-embedded-subscribe-form #mc-embedded-subscribe:disabled { cursor: none; background-color: gray; } .embedded-form #mc-embedded-subscribe-form .error-messages { display: none; padding: 5px 0px; color: #CC2631; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 12px; text-align: center; text-transform: uppercase; } .embedded-form #mc-embedded-subscribe-form .error-messages.active { display: block; } .embedded-form #mc-embedded-subscribe-form .error-message { display: none; color: #CC2631; } .embedded-form #mc-embedded-subscribe-form .error-message.active { display: block; } /* -------------------------- TABS LIGHT BLUE OVERRIDES -------------------------- */ .tabs--light-blue { background-color: #e9eff2; overflow: hidden; padding-top: 30px; padding-bottom: 30px; } @media all and (min-width: 768px) { .tabs--light-blue { padding-top: 45px; padding-bottom: 45px; } } @media all and (min-width: 1024px) { .tabs--light-blue { padding-top: 60px; padding-bottom: 60px; } } .tabs--light-blue:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-dark.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.6; } .tabs--light-blue .tabs-component .tabs-component__wrapper .tabs-component__inner-wrapper .tabs-component__tabs-content { background-color: #fff; } /* -------------------------- CONTENT REFERENCES GRID -------------------------- */ .team-members-grid { /** Container Settings */ } .team-members-grid__container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .team-members-grid__container .team-member { flex: 0 0 calc(99.99% * 1 / 1 - 0px); flex-basis: auto; flex-grow: 0; flex-shrink: 0; width: calc(99.99% * 1 / 1 - 0px); } .team-members-grid__container .team-member:nth-of-type(n) { margin-top: 15px; margin-right: 0; } .team-members-grid__container .team-member:nth-of-type(1n) { margin-right: 0; } .team-members-grid__container .team-member:last-of-type { margin-right: 0; } .team-members-grid__container .team-member:nth-of-type(-n+1) { margin-top: 0; } @media all and (min-width: 600px) { .team-members-grid__container .team-member { flex: 0 0 calc(99.99% * 1 / 2 - 10px); flex-basis: auto; flex-grow: 0; flex-shrink: 0; width: calc(99.99% * 1 / 2 - 10px); } .team-members-grid__container .team-member:nth-of-type(n) { margin-top: 20px; margin-right: 20px; } .team-members-grid__container .team-member:nth-of-type(2n) { margin-right: 0; } .team-members-grid__container .team-member:last-of-type { margin-right: 0; } .team-members-grid__container .team-member:nth-of-type(-n+2) { margin-top: 0; } } @media all and (min-width: 768px) { .team-members-grid__container .team-member { flex: 0 0 calc(99.99% * 1 / 3 - 13.33333px); flex-basis: auto; flex-grow: 0; flex-shrink: 0; width: calc(99.99% * 1 / 3 - 13.33333px); } .team-members-grid__container .team-member:nth-of-type(n) { margin-top: 20px; margin-right: 20px; } .team-members-grid__container .team-member:nth-of-type(3n) { margin-right: 0; } .team-members-grid__container .team-member:last-of-type { margin-right: 0; } .team-members-grid__container .team-member:nth-of-type(-n+3) { margin-top: 0; } } @media all and (min-width: 1024px) { .team-members-grid__container .team-member { flex: 0 0 calc(99.99% * 1 / 4 - 22.5px); flex-basis: auto; flex-grow: 0; flex-shrink: 0; width: calc(99.99% * 1 / 4 - 22.5px); } .team-members-grid__container .team-member:nth-of-type(n) { margin-top: 30px; margin-right: 30px; } .team-members-grid__container .team-member:nth-of-type(4n) { margin-right: 0; } .team-members-grid__container .team-member:last-of-type { margin-right: 0; } .team-members-grid__container .team-member:nth-of-type(-n+4) { margin-top: 0; } } .trait .container { max-width: 700px; } .trait__row { display: flex; padding: 10px 0; border-bottom: 1px solid rgba(170, 191, 203, 0.5); } .trait .logo { justify-content: center; } .trait .label { min-width: 110px; padding-right: 10px; font-weight: bold; text-align: right; } .trait .integrated-items { display: flex; flex-direction: column; } .trait .integrated-items .integrated-item { display: inline-flex; } .trait .integrated-items .integrated-item .note { align-self: center; padding: 0 5px; font-size: 12px; } .trait .integrated-items .asterisk { padding: 0 2px; } .trait .integrated-items .asterisk.red { color: red; } .trait .integrated-items .asterisk.purple { color: purple; } .trait .tag-color { padding: 0 4px; color: #fff; text-transform: capitalize; } .trait .tag-color.blue { background-color: #375172; } .trait .tag-color.brown { background-color: brown; } .trait .tag-color.orange { background-color: orange; } .trait .tag-color.white { color: black; } .testimonials .swiper-button-next { right: 6px; color: #fff; transition: all 0.3s ease-in-out; } .testimonials .swiper-button-next:after { font-size: 18px; font-weight: 700; } .testimonials .swiper-button-next:hover, .testimonials .swiper-button-next:focus { color: #92d100; transform: translateX(3px); } .testimonials .swiper-button-prev { left: 6px; color: #fff; transition: all 0.3s ease-in-out; } .testimonials .swiper-button-prev:after { font-size: 18px; font-weight: 700; } .testimonials .swiper-button-prev:hover, .testimonials .swiper-button-prev:focus { color: #92d100; transform: translateX(-3px); } .testimonials .swiper-pagination .swiper-pagination-bullet { background: #486994; opacity: 1; } .testimonials .swiper-pagination .swiper-pagination-bullet-active { background: #fff; } /* -------------------------- MULTI COLUMN TEXT GRID -------------------------- */ .multi-column-text { /** Container Settings */ /* -------------------------- FANCY MULTI-COLUMN OVERRIDES -------------------------- */ /* -------------------------- DARK OVERRIDES -------------------------- */ /* -------------------------- LIGHT BLUE OVERRIDES -------------------------- */ } .multi-column-text__container { display: grid; grid-column-gap: 15px; column-gap: 15px; grid-row-gap: 30px; row-gap: 30px; grid-template-columns: 1fr; margin: 0 auto; } @media all and (min-width: 600px) { .multi-column-text__container--two { grid-column-gap: 40px; column-gap: 40px; grid-template-columns: repeat(2, 1fr); } } @media all and (min-width: 1024px) { .multi-column-text__container--two { grid-column-gap: 60px; column-gap: 60px; } } @media all and (min-width: 600px) { .multi-column-text__container--three { grid-column-gap: 40px; column-gap: 40px; grid-template-columns: repeat(2, 1fr); } } @media all and (min-width: 768px) { .multi-column-text__container--three { grid-template-columns: repeat(3, 1fr); } } @media all and (min-width: 1024px) { .multi-column-text__container--three { grid-column-gap: 60px; column-gap: 60px; } } .multi-column-text__container .column { text-align: center; } .multi-column-text--fancy { background-color: #e9eff2; overflow: hidden; padding-left: 0; padding-right: 0; padding-top: 30px; padding-bottom: 30px; } @media all and (min-width: 768px) { .multi-column-text--fancy { padding-top: 45px; padding-bottom: 45px; } } @media all and (min-width: 1024px) { .multi-column-text--fancy { padding-top: 60px; padding-bottom: 60px; } } .multi-column-text--fancy:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-dark.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.6; } .multi-column-text--fancy .column__headline { display: inline-block; position: relative; margin-left: 0; margin-right: 0; padding: 12px 8px 6px 12px; background-color: #003057; color: #fff; overflow: visible; z-index: 4; transition: all 0.3s ease-in-out; } @media all and (min-width: 1024px) { .multi-column-text--fancy .column__headline { padding: 12px 10px 8px 14px; } } .multi-column-text--fancy .column__headline:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 4px; left: 4px; border: 1.5px solid #aabfcb; pointer-events: none; z-index: -1; } @media all and (min-width: 600px) { .multi-column-text--fancy .column__headline:before { top: 4px; left: 4px; } } @media all and (min-width: 1024px) { .multi-column-text--fancy .column__headline:before { top: 4px; left: 4px; } } .multi-column-text--fancy .column__headline a[href]:not(.button) { box-shadow: none; color: #fff; transition: all 0.3s ease-in-out; } .multi-column-text--fancy .column__headline a[href]:not(.button) .icon-doctype-external { fill: #fff; transition: all 0.3s ease-in-out; } .multi-column-text--fancy .column__headline a[href]:not(.button):hover, .multi-column-text--fancy .column__headline a[href]:not(.button):focus { color: #92d100; } .multi-column-text--fancy .column__headline a[href]:not(.button):hover .icon-doctype-external, .multi-column-text--fancy .column__headline a[href]:not(.button):focus .icon-doctype-external { fill: #92d100; } .multi-column-text--dark { background-color: #001E3D; padding-top: 30px; padding-bottom: 30px; } @media all and (min-width: 768px) { .multi-column-text--dark { padding-top: 45px; padding-bottom: 45px; } } @media all and (min-width: 1024px) { .multi-column-text--dark { padding-top: 60px; padding-bottom: 60px; } } .multi-column-text--dark:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.3; pointer-events: none; } .multi-column-text--dark .content-intro .rte-body-component .content-intro__headline, .multi-column-text--dark .content-intro .rte-body-component .rte-body-component, .multi-column-text--dark .content-intro .rte-body-component p, .multi-column-text--dark .content-intro .container .content-intro__headline, .multi-column-text--dark .content-intro .container .rte-body-component, .multi-column-text--dark .content-intro .container p, .multi-column-text--dark .content-intro .content-intro__text-wrap .content-intro__headline, .multi-column-text--dark .content-intro .content-intro__text-wrap .rte-body-component, .multi-column-text--dark .content-intro .content-intro__text-wrap p { color: #fff; } .multi-column-text--dark .multi-column-text__container--dark .column .column__content-wrap .column__text-wrap .rte-body-component .column__headline, .multi-column-text--dark .multi-column-text__container--dark .column .column__content-wrap .column__text-wrap .rte-body-component .column__description, .multi-column-text--dark .multi-column-text__container--dark .column .column__content-wrap .column__text-wrap .column__text-wrap-inner .column__headline, .multi-column-text--dark .multi-column-text__container--dark .column .column__content-wrap .column__text-wrap .column__text-wrap-inner .column__description { color: #fff; } .multi-column-text--dark .multi-column-text__container--dark .column .column__content-wrap .column__text-wrap .rte-body-component .column__headline p, .multi-column-text--dark .multi-column-text__container--dark .column .column__content-wrap .column__text-wrap .rte-body-component .column__description p, .multi-column-text--dark .multi-column-text__container--dark .column .column__content-wrap .column__text-wrap .column__text-wrap-inner .column__headline p, .multi-column-text--dark .multi-column-text__container--dark .column .column__content-wrap .column__text-wrap .column__text-wrap-inner .column__description p { color: #fff; } .multi-column-text--light-blue { padding-top: 60px; padding-bottom: 60px; background-color: #e9eff2; overflow: hidden; } .multi-column-text--light-blue:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-dark.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.6; } .media-gallery .swiper-pagination { display: block; position: relative; margin-top: 0; padding-top: 30px; cursor: auto; } .media-gallery .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background: #cad7de; cursor: pointer; opacity: 1; } .media-gallery .swiper-pagination .swiper-pagination-bullet-active { background: #375172; } .media-gallery .swiper-slide { width: auto; } .media-gallery .swiper-slide-active .media-gallery-item { transform: scale(1); } .media-gallery .swiper-slide-active .media-gallery-item__media { box-shadow: 7px 7px 0 0 #aabfcb; } .media-gallery .swiper-slide-active .media-gallery-item__image:after { opacity: 0; } .media-gallery-item { width: 840px; max-width: 90vw; margin: 0 auto; transform: scale(0.9); transition: 0.3s transform; } .media-gallery-item__media { position: relative; width: 100%; box-shadow: 0 0 0 0 #aabfcb; transition: 0.3s; } .media-gallery-item__info { margin-top: 20px; } .media-gallery-item__info p { margin: 0 0 10px; } .media-gallery-item .button { margin-top: -10px; } .media-gallery-item__iframe-wrapper { position: absolute; width: 100%; height: 0; padding-bottom: 56.25%; } .media-gallery-item__iframe { position: absolute; width: 100%; height: 100%; } .media-gallery-item__image { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; background-size: cover; cursor: pointer; z-index: 1; transition: 0.3s; } .media-gallery-item__image:after { content: ''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 48, 87, 0.8); pointer-events: none; transition: 0.3s all; } .media-gallery-item__image--hidden { opacity: 0; visibility: hidden; pointer-events: none; } .media-gallery-item__image__icon { position: absolute; width: 60px; height: 60px; top: 50%; left: 50%; background: rgba(0, 48, 87, 0.8); border-radius: 50%; transform: translate(-50%, -50%) scale(1); transition: 0.3s all; } .media-gallery-item__image__icon svg { position: absolute; top: 50%; left: 56%; transform: translate(-50%, -50%); } .media-gallery-item__image__icon svg polygon { fill: #fff; stroke: none; } .media-gallery-item__image:hover .media-gallery-item__image__icon { background: #003057; transform: translate(-50%, -50%) scale(1.05); } .table-segment { /* -------------------------- LIGHT BLUE OVERRIDES -------------------------- */ /* -------------------------- DARK OVERRIDES -------------------------- */ } .table-segment .collapse-link { display: inline-block; position: relative; width: 100%; padding: 10px; color: #fff; background-color: #375172; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 16px; letter-spacing: 0.2px; line-height: 110%; text-align: center; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease-in-out; } .table-segment .collapse-link:hover { color: #001E3D; background-color: #aabfcb; } .table-segment.collapsed .responsive-table { max-height: 310px; overflow-y: hidden; } .table-segment--light-blue { background-color: #e9eff2; overflow: hidden; padding-top: 30px; padding-bottom: 30px; } @media all and (min-width: 768px) { .table-segment--light-blue { padding-top: 45px; padding-bottom: 45px; } } @media all and (min-width: 1024px) { .table-segment--light-blue { padding-top: 60px; padding-bottom: 60px; } } .table-segment--light-blue:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-dark.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.6; } .table-segment--dark { background-color: #001E3D; padding-top: 30px; padding-bottom: 30px; } @media all and (min-width: 768px) { .table-segment--dark { padding-top: 45px; padding-bottom: 45px; } } @media all and (min-width: 1024px) { .table-segment--dark { padding-top: 60px; padding-bottom: 60px; } } .table-segment--dark:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.3; pointer-events: none; } .table-segment--dark .content-intro .rte-body-component .content-intro__headline, .table-segment--dark .content-intro .rte-body-component .rte-body-component, .table-segment--dark .content-intro .rte-body-component p, .table-segment--dark .content-intro .container .content-intro__headline, .table-segment--dark .content-intro .container .rte-body-component, .table-segment--dark .content-intro .container p, .table-segment--dark .content-intro .content-intro__text-wrap .content-intro__headline, .table-segment--dark .content-intro .content-intro__text-wrap .rte-body-component, .table-segment--dark .content-intro .content-intro__text-wrap p { color: #fff; } /* -------------------------- SITE HEADER GENERAL STYLING -------------------------- */ .site-header { position: fixed; width: 100%; top: 0; left: 0; box-shadow: 0 5px 10px 0 rgba(0, 30, 61, 0.4); z-index: 99; /* -------------------------- SECONDARY NAVIGATION -------------------------- */ /* -------------------------- MAIN NAVIGATION -------------------------- */ /* -------------------------- LOGO -------------------------- */ /* -------------------------- CTA -------------------------- */ /* -------------------------- MOBILE MENU -------------------------- */ } body.site-header-scrolled .site-header { position: fixed; top: 0; left: 0; } body.user-logged-in .site-header { position: relative; } body.path-user .site-header { position: relative; } body.pattern-lab .site-header { position: relative; } .site-header__secondary { display: block; position: relative; } .site-header__main { display: flex; position: relative; flex-direction: row; justify-content: space-between; align-items: stretch; padding-right: 15px; padding-left: 15px; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; background-color: #003057; } @media all and (min-width: 600px) { .site-header__main { padding-right: 20px; padding-left: 20px; } } @media all and (min-width: 1024px) { .site-header__main { padding-right: 15px; padding-left: 30px; } } .site-header__main:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.3; pointer-events: none; } .site-header__logo { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 180px; height: 50px; margin: 0; overflow: hidden; } @media all and (min-width: 768px) { .site-header__logo { width: 200px; height: 60px; } } @media all and (min-width: 1024px) { .site-header__logo { width: 230px; height: 80px; } } .site-header__logo__link { display: block; width: 180px; height: 50px; text-decoration: none; text-transform: uppercase; } @media all and (min-width: 768px) { .site-header__logo__link { width: 200px; height: 60px; } } @media all and (min-width: 1024px) { .site-header__logo__link { width: 230px; height: 80px; } } .site-header__logo__link .icon-hoegemeyer-logo-2021 { top: 0; bottom: 0; position: absolute; margin: auto 0; width: 180px; height: 50px; } @media all and (min-width: 768px) { .site-header__logo__link .icon-hoegemeyer-logo-2021 { width: 200px; height: 60px; } } @media all and (min-width: 1024px) { .site-header__logo__link .icon-hoegemeyer-logo-2021 { width: 230px; height: 80px; } } .site-header__cta { display: flex; flex-direction: column; justify-content: center; margin-left: auto; } @media all and (min-width: 1024px) { .site-header__cta { margin-left: 0; } } .site-header__menu-button { position: relative; width: 60px; overflow: hidden; margin-right: -15px; } @media all and (min-width: 600px) { .site-header__menu-button { margin-right: -20px; } } @media all and (min-width: 1024px) { .site-header__menu-button { display: none; } } .site-header__menu-button__content { position: absolute; width: 22px; height: 16px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .site-header__menu-button__bar { position: absolute; width: 100%; height: 2px; left: 0; background: #fff; transition: 0.3s all ease-in-out; } .site-header__menu-button__bar--top { top: 0; } .site-header__menu-button__bar--middle { top: 50%; transform: translateY(-50%); } .site-header__menu-button__bar--bottom { bottom: 0; } .site-header__menu-button:hover .site-header__menu-button__bar, .site-header__menu-button:active .site-header__menu-button__bar { background: #92d100; } .site-header__menu-button--active .site-header__menu-button__bar--top { transform: translateY(7px) rotate(45deg); } .site-header__menu-button--active .site-header__menu-button__bar--middle { opacity: 0; } .site-header__menu-button--active .site-header__menu-button__bar--bottom { transform: translateY(-7px) rotate(-45deg); } body.mobile-menu-active { overflow: hidden; } .mobile-menu { position: fixed; width: 100%; height: 100%; top: 0; box-shadow: 0 5px 10px 0 rgba(0, 30, 61, 0.4); opacity: 0; visibility: hidden; z-index: 98; transition: all 0.3s ease-in-out; } @media all and (min-width: 1024px) { .mobile-menu { display: none; } } .mobile-menu--active { opacity: 1; visibility: inherit; } .mobile-menu__content { background: white; display: flex; position: fixed; flex-direction: column; width: 100%; height: calc(100% - 60px); bottom: 0; left: 0; overflow-x: hidden; overflow-y: scroll; } .mobile-menu__content__root { display: block; position: relative; width: 100%; margin: auto; padding: 20px 0; } .mobile-menu__content__nested { display: block; position: absolute; width: 100%; margin: auto; padding-top: 20px; padding-bottom: 20px; text-align: center; opacity: 0; visibility: hidden; z-index: 2; transform: translateX(100%); } .mobile-menu__content__nested__inner { display: none; } .mobile-menu__content__nested__inner--active { display: block; } /* -------------------------- GENERAL STYLING -------------------------- */ .site-footer { position: relative; clear: both; background-color: #003057; overflow: hidden; margin-top: 30px; /* -------------------------- CONTENT WRAP -------------------------- */ /* -------------------------- VISUAL -------------------------- */ /* -------------------------- EMAIL SIGNUP -------------------------- */ /* -------------------------- MAIN MENU WWRAPPER, MIDDLE SECTION -------------------------- */ /* -------------------------- LEGAL & SOCIAL MENU -------------------------- */ /* -------------------------- COPYRIGHT -------------------------- */ } @media all and (min-width: 768px) { .site-footer { margin-top: 45px; } } @media all and (min-width: 1024px) { .site-footer { margin-top: 60px; } } .site-footer:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.3; pointer-events: none; } .site-footer__content-wrap { display: flex; position: relative; flex-direction: column; color: #fff; text-decoration: none; z-index: 1; } .site-footer__visual { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; } @media all and (min-width: 1280px) { .site-footer__visual { overflow: visible; } } .site-footer__illustration { position: absolute; width: 800px; height: 1439px; top: -30px; right: 0; left: 0; margin: 0 auto; background-image: url("/themes/custom/hoegemeyer/assets/img/corn.svg"); background-position: 50% 50%; background-repeat: no-repeat; opacity: 0.9; } @media all and (min-width: 600px) { .site-footer__illustration { width: 1000px; height: 1798px; top: -630px; right: -500px; left: 0; margin: 0 auto; } } .site-footer__email-signup { position: relative; margin-top: 45px; margin-bottom: 45px; background-color: #001E3D; overflow: visible; justify-self: center; } @media all and (min-width: 600px) { .site-footer__email-signup { font-size: 32px; } } @media all and (min-width: 1024px) { .site-footer__email-signup { font-size: 43px; } } .site-footer__email-signup:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.3; pointer-events: none; } .site-footer__email-signup__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 10px; padding: 20px; text-align: center; z-index: 4; } @media all and (min-width: 600px) { .site-footer__email-signup__inner { flex-direction: row; font-size: 24px; } } .site-footer__email-signup__inner .button { margin-top: 5px; } .site-footer__email-signup__inner:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 6px; left: 6px; border: 2px solid #aabfcb; pointer-events: none; } @media all and (min-width: 768px) { .site-footer__email-signup__inner:before { top: 10px; left: 10px; } } .site-footer__email-signup__headline { margin-right: none; margin-bottom: 15px; color: #fff; font-family: "Barley-Regular", "Helvetica", "Ubuntu Condensed", "Liberation Sans Narrow", arial narrow, arial, sans-serif; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; } @media all and (min-width: 600px) { .site-footer__email-signup__headline { margin-right: 20px; margin-bottom: 5px; font-size: 24px; } } .site-footer__main-menu-wrap { display: flex; position: relative; flex-direction: column; flex-wrap: wrap; justify-content: center; padding: 30px 0 80px; } @media all and (min-width: 768px) { .site-footer__main-menu-wrap { padding: 30px 0 80px; flex-direction: row; justify-content: space-between; } } .site-footer__left { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 700px; margin: 0 auto 30px; text-align: center; justify-self: center; } @media all and (min-width: 1024px) { .site-footer__left { width: 30%; max-width: none; margin: 0 0 auto; text-align: left; justify-self: flex-start; } } .site-footer__left p { line-height: 175%; } .site-footer__left .button { margin: 20px auto 0; } @media all and (min-width: 1024px) { .site-footer__left .button { margin: 20px auto 0 0; } } .site-footer__logo { display: flex; justify-content: center; width: 100%; margin-bottom: 15px; } @media all and (min-width: 1024px) { .site-footer__logo { justify-content: flex-start; } } .site-footer__logo__link { display: block; width: 200px; height: 40px; text-decoration: none; } .site-footer__logo__link .hoegemeyer-logo { width: 100%; height: 100%; } .site-footer__right { display: flex; position: relative; flex-direction: column; justify-content: flex-end; margin-top: 30px; } @media all and (min-width: 768px) { .site-footer__right { flex-direction: row; width: 100%; } } @media all and (min-width: 1024px) { .site-footer__right { width: calc(100% - 30% - 50px); margin-top: 0; } } .site-footer__right:before { content: ""; display: block; position: absolute; width: 100%; height: 1px; top: -30px; right: 0; left: 0; margin: 0 auto; background-color: #375172; } @media all and (min-width: 1024px) { .site-footer__right:before { display: none; } } .site-footer__menu { display: flex; position: relative; flex-direction: column; margin-bottom: 30px; } @media all and (min-width: 768px) { .site-footer__menu { flex-direction: row; margin-bottom: 0; } } .site-footer__menu .column-nav { margin-right: 0; } @media all and (min-width: 768px) { .site-footer__menu .column-nav { margin-right: 30px; } .site-footer__menu .column-nav:last-of-type { margin-right: 10px; } } .site-footer__contact { position: relative; padding-bottom: 20px; font-size: 15px; line-height: 175%; text-align: center; } @media all and (min-width: 768px) { .site-footer__contact { margin-top: 0; padding-bottom: 0; text-align: right; } } .site-footer__contact:before { content: ""; display: block; position: absolute; width: 100%; height: 1px; top: -15px; right: 0; left: 0; margin: 0 auto; background-color: #375172; } @media all and (min-width: 768px) { .site-footer__contact:before { display: none; } } .site-footer__legal-social-menu-wrap { display: flex; position: relative; flex-direction: column; flex-flow: column-reverse; align-items: center; justify-content: center; width: 100%; padding: 20px 0; text-align: center; text-align: center; } @media all and (min-width: 600px) { .site-footer__legal-social-menu-wrap { flex-direction: row; justify-content: space-between; text-align: left; } .site-footer__legal-social-menu-wrap:before { display: none; } } .site-footer__legal-social-menu-wrap:before { content: ""; display: block; position: absolute; width: 100%; height: 1px; top: 0; right: 0; left: 0; margin: 0 auto; background-color: #375172; } .site-footer__legal-menu-wrap { display: flex; flex-flow: column wrap; align-items: center; } @media all and (min-width: 600px) { .site-footer__legal-menu-wrap { flex-flow: row wrap; } } .site-footer__hoegemeyer-copyright { display: inline-block; margin: 12px 0; color: #fff; font-size: 12px; text-align: left; } @media all and (min-width: 600px) { .site-footer__hoegemeyer-copyright { margin: 0 15px 0 0; text-align: center; } } .site-footer__social-link { padding: 0 15px; text-decoration: none; } @media all and (min-width: 600px) { .site-footer__social-link { padding: 0 0 0 15px; } } .site-footer__social-link .icon-social { width: 30px; height: auto; } .site-footer__social-link .icon-social .icon-social--fill { transition: all 0.3s ease-in-out; } .site-footer__social-link .icon-social:hover .icon-social--fill, .site-footer__social-link .icon-social:active .icon-social--fill { fill: #92d100; } .site-footer__social-link--twitter .icon-social { width: 25px; } .site-footer__corteva-wrap { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 20px 0; font-size: 12px; text-align: center; text-align: center; } @media all and (min-width: 768px) { .site-footer__corteva-wrap { flex-direction: row; justify-content: space-between; text-align: left; } } .site-footer__corteva-wrap:before { content: ""; display: block; position: absolute; width: 100%; height: 1px; top: 0; right: 0; left: 0; margin: 0 auto; background-color: #375172; } .site-footer__corteva-logo { display: flex; justify-content: center; margin-right: none; margin-bottom: 15px; } @media all and (min-width: 768px) { .site-footer__corteva-logo { justify-content: flex-start; margin-right: 30px; margin-bottom: 0; } } .site-footer__corteva-logo__link { display: block; width: 150px; height: 30px; text-decoration: none; } .site-footer__corteva-logo__link .site-footer__corteva-logo-img { width: 100%; height: 100%; background-image: url("/themes/custom/hoegemeyer/assets/img/corteva-logo-2x.png"); background-repeat: no-repeat; background-size: 150px 30px; } .site-footer__copyright { text-align: center; } @media all and (min-width: 768px) { .site-footer__copyright { text-align: right; } } /* -------------------------- SET COLOR VARS -------------------------- */ /* -------------------------- GENERAL DRUPAL STATUS STYLING -------------------------- */ .drupal-status { display: block; position: relative; padding: 15px 15px 17px 50px !important; color: white; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 16px; background-color: #2d2d2d; border: none; overflow: hidden; z-index: 101; /** Line extending the full component */ /** Warning Message */ /** Error Message */ /** General Status Message */ /** Message Listing */ /* -------------------------- ICON -------------------------- */ /* -------------------------- ANCHOR LINKS IN MESSAGE -------------------------- */ } @media only screen and (min-width: md) { .drupal-status { padding: 15px 15px 17px 60px !important; } } @media only screen and (min-width: lg) { .drupal-status { padding: 20px 15px 22px 80px !important; } } .drupal-status:after { content: ""; display: block; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: green; } .drupal-status--warning:after { background-color: orange; } .drupal-status--warning .drupal-status__icon { background-color: orange; } .drupal-status--error:after { background-color: red; } .drupal-status--error .drupal-status__icon { background-color: red; } .drupal-status--status .drupal-status__icon { background-color: green; } .drupal-status__multiple { margin-left: 18px; text-indent: -18px; } .drupal-status__message { margin-bottom: 10px; } .drupal-status__message:last-child { margin-bottom: 0; } .drupal-status__icon { content: ''; display: flex; position: absolute; align-items: center; justify-content: center; width: 25px; height: 25px; top: 0; bottom: 0; left: 10px; margin: auto 0; border-radius: 15px; } @media only screen and (min-width: md) { .drupal-status__icon { left: 20px; } } @media only screen and (min-width: lg) { .drupal-status__icon { width: 30px; height: 30px; left: 30px; } } .drupal-status__icon svg { width: 15px; height: 15px; fill: #2d2d2d; } .drupal-status__icon svg polyline, .drupal-status__icon svg line { stroke-width: 3px; stroke: #2d2d2d; } .drupal-status__icon svg .icon-exclamation-point__circle { stroke: #2d2d2d; } .drupal-status a { color: white; text-decoration: underline; transition: all 0.2s ease-out; } .drupal-status a:hover { color: lightgrey; } /* -------------------------- MODIFICATIONS -------------------------- */ .webform-submission-form .drupal-status { margin-top: 0 !important; background-color: #003057; } .webform-submission-form .drupal-status__icon { background-color: #CC2631; } .webform-submission-form .drupal-status--error:after { background-color: #CC2631; } /** Container Modifications when in a form embed */ .form-embed .drupal-status, .webform-submission-form .drupal-status { margin-right: 0; margin-bottom: 20px; margin-left: 0; } /* -------------------------- COLOR VARIABLES (The Default Hex Complements the Drupal Interface) -------------------------- */ /* -------------------------- DRUPAL TABS STYLING -------------------------- */ .drupal-tabs { display: none; } @media all and (min-width: 600px) { .drupal-tabs { display: block; } } .drupal-tabs__nav { padding: 10px; text-align: center; background-color: #2d2d2d; box-shadow: 0 0 5px 0 rgba(41, 22, 38, 0.25); } /* -------------------------- SITE MAP STYLING -------------------------- */ .sitemap { position: relative; /* -------------------------- SITEMAP BOX MENU -------------------------- */ } .sitemap .sitemap-box-menu + .sitemap-box-menu { margin-top: 30px; } @media all and (min-width: 600px) { .sitemap .sitemap-box-menu + .sitemap-box-menu { margin-top: 45px; } } @media all and (min-width: 1024px) { .sitemap .sitemap-box-menu + .sitemap-box-menu { margin-top: 60px; } } .sitemap .sitemap-box-menu { margin-bottom: 0; /* -------------------------- HEADING -------------------------- */ /* -------------------------- CONTENT -------------------------- */ } .sitemap .sitemap-box-menu h2 { position: relative; margin-bottom: 0; font-family: "Barley-Regular", "Helvetica", "Ubuntu Condensed", "Liberation Sans Narrow", arial narrow, arial, sans-serif; font-size: 18px; font-weight: 700; text-transform: uppercase; transition: font-size 0.1s ease-out; } @media all and (min-width: 600px) { .sitemap .sitemap-box-menu h2 { margin-top: 0; font-size: 24px; } } @media all and (min-width: 1024px) { .sitemap .sitemap-box-menu h2 { font-size: 32px; } } .sitemap .sitemap-box-menu .content { margin-top: 15px; /* -------------------------- FIRST LEVEL LIST -------------------------- */ } .sitemap .sitemap-box-menu .content ul.sitemap-menu { position: relative; padding-left: 0; /* -------------------------- SECOND LEVEL LIST -------------------------- */ } .sitemap .sitemap-box-menu .content ul.sitemap-menu li { margin-top: 15px; } .sitemap .sitemap-box-menu .content ul.sitemap-menu li a { color: grey; font-size: 14px; font-weight: 700; text-decoration: none; transition: color 0.2s ease-in-out; } @media all and (min-width: 600px) { .sitemap .sitemap-box-menu .content ul.sitemap-menu li a { font-size: 15px; } } .sitemap .sitemap-box-menu .content ul.sitemap-menu li a:hover, .sitemap .sitemap-box-menu .content ul.sitemap-menu li a:focus, .sitemap .sitemap-box-menu .content ul.sitemap-menu li a:active { color: black; } .sitemap .sitemap-box-menu .content ul.sitemap-menu ul.sitemap-menu { padding-left: 28px; /* -------------------------- THIRD LEVEL LIST -------------------------- */ } .sitemap .sitemap-box-menu .content ul.sitemap-menu ul.sitemap-menu:before { display: none; } .sitemap .sitemap-box-menu .content ul.sitemap-menu ul.sitemap-menu li a { color: black; font-size: 14px; } .sitemap .sitemap-box-menu .content ul.sitemap-menu ul.sitemap-menu li a:hover, .sitemap .sitemap-box-menu .content ul.sitemap-menu ul.sitemap-menu li a:focus, .sitemap .sitemap-box-menu .content ul.sitemap-menu ul.sitemap-menu li a:active { color: grey; } .sitemap .sitemap-box-menu .content ul.sitemap-menu ul.sitemap-menu ul.sitemap-menu li a { color: black; font-weight: 500; } .sitemap .sitemap-box-menu .content ul.sitemap-menu ul.sitemap-menu ul.sitemap-menu li a:hover, .sitemap .sitemap-box-menu .content ul.sitemap-menu ul.sitemap-menu ul.sitemap-menu li a:focus, .sitemap .sitemap-box-menu .content ul.sitemap-menu ul.sitemap-menu ul.sitemap-menu li a:active { color: grey; } /* -------------------------- STANDARD MARQUEE GENERAL STYLING -------------------------- */ .standard-marquee { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; /* -------------------------- VISUAL BLOCK -------------------------- */ /* -------------------------- BREADCRUMBS -------------------------- */ /* -------------------------- INTRO -------------------------- */ /* -------------------------- LOGO -------------------------- */ /* -------------------------- NEW PRODUCTS TAG -------------------------- */ /* -------------------------- HEADLINE -------------------------- */ /* -------------------------- SUBHEAD -------------------------- */ /* -------------------------- DESCRIPTION -------------------------- */ /* -------------------------- NO VISUAL MODIFIER -------------------------- */ } .standard-marquee--no-visual { min-height: 0; padding-bottom: 15px; margin-bottom: 20px; } @media all and (min-width: 600px) { .standard-marquee--no-visual { padding-bottom: 20px; margin-bottom: 30px; } } @media all and (min-width: 1024px) { .standard-marquee--no-visual { padding-bottom: 30px; margin-bottom: 45px; } } .standard-marquee__visual { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #003057; overflow: hidden; /** Color Overlay */ /** Image */ } .standard-marquee__visual:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; background-color: #003057; opacity: 0.6; mix-blend-mode: multiply; } .standard-marquee__visual__image { content: ""; display: block; position: absolute; display: flex; width: 100%; height: 100%; } .standard-marquee__visual__image img { object-fit: cover; object-position: 50% 50%; width: 100%; height: auto; } .standard-marquee__visual__image:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.6; z-index: 1; } .standard-marquee .site-breadcrumb { position: absolute; top: 30px; left: 0; } .standard-marquee__intro { position: relative; width: 100%; color: #fff; z-index: 5; } .standard-marquee__intro:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png) 50% 50% repeat; background-size: 466px 349px; opacity: 0.6; z-index: 1; pointer-events: none; } .standard-marquee__intro__container { width: 100%; max-width: 900px; text-align: center; margin-top: 80px; margin-bottom: 140px; transition: margin 0.2s ease-out; } .standard-marquee__intro__copy { /* -------------------------- BUTTON -------------------------- */ } .standard-marquee__intro__copy > *:last-child:not(.button):not(.blog-marquee__headline) { margin-bottom: 0; padding-bottom: 0; } .standard-marquee__intro__copy .button { margin-top: 24px; } .standard-marquee__logo { display: flex; flex-direction: row; align-items: center; justify-content: center; max-width: 300px; width: 75%; margin: 15px auto; overflow: hidden; } @media all and (min-width: 600px) { .standard-marquee__logo { width: 60%; margin: 20px auto; } } .standard-marquee__logo--standard { margin-top: 90px; } @media all and (min-width: 600px) { .standard-marquee__logo--standard { margin-top: 90px; } } .standard-marquee__logo__wrap { display: block; width: 100%; } .standard-marquee__logo__wrap .icon-dirt-logo-2 { width: 100%; height: 100%; } .standard-marquee__new-wrap { display: block; position: relative; margin: 0 auto 20px; } .standard-marquee__new-bug { display: inline-block; margin: 0 auto; padding: 5px 10px; color: #fff; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; background-color: #6e9e00; } @media all and (min-width: 768px) { .standard-marquee__new-bug { padding: 5px 10px; font-size: 15px; } } .rte-body-component .standard-marquee__headline { position: relative; color: #fff; line-height: 100%; z-index: 1; } @media all and (min-width: 600px) { .rte-body-component .standard-marquee__headline { margin-bottom: 22px; } } .rte-body-component .standard-marquee__subhead { color: #fff; } .standard-marquee__description { position: relative; font-weight: bold; margin-top: 21px; margin-bottom: 21px; z-index: 1; } .standard-marquee__description p { color: #003057; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 175%; } @media all and (min-width: 600px) { .standard-marquee__description p { font-size: 16px; } } @media all and (min-width: 1024px) { .standard-marquee__description p { font-size: 18px; } } .standard-marquee--no-visual { background-color: rgba(0, 48, 87, 0.8); } .standard-marquee--no-visual:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/campaign_marquee.png") 50% 50% no-repeat; background-size: cover; opacity: 0.4; mix-blend-mode: multiply; } .standard-marquee--no-visual:after { content: ""; display: block; position: absolute; background: rgba(255, 255, 255, 0); /* Old browsers */ background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, white 100%); /* W3C */ width: 100%; height: 30%; bottom: 0; left: 0; } .standard-marquee--no-visual .site-breadcrumb { position: relative; width: 100%; top: 0; padding-top: 15px; } @media all and (min-width: 600px) { .standard-marquee--no-visual .site-breadcrumb { padding-top: 20px; } } @media all and (min-width: 1024px) { .standard-marquee--no-visual .site-breadcrumb { padding-top: 30px; } } .standard-marquee--no-visual .site-breadcrumb__item, .standard-marquee--no-visual .site-breadcrumb__link { color: #003057; /** Interaction States */ } .standard-marquee--no-visual .site-breadcrumb__item .icon-chevron-right__line, .standard-marquee--no-visual .site-breadcrumb__link .icon-chevron-right__line { stroke: #003057; } .standard-marquee--no-visual .site-breadcrumb__item:hover, .standard-marquee--no-visual .site-breadcrumb__item:focus, .standard-marquee--no-visual .site-breadcrumb__link:hover, .standard-marquee--no-visual .site-breadcrumb__link:focus { color: #6e9e00; } .standard-marquee--no-visual .site-breadcrumb__item:active, .standard-marquee--no-visual .site-breadcrumb__link:active { color: #6e9e00; } .standard-marquee--no-visual .site-breadcrumb + .standard-marquee__intro { padding-top: 15px; } @media all and (min-width: 600px) { .standard-marquee--no-visual .site-breadcrumb + .standard-marquee__intro { padding-top: 20px; } } @media all and (min-width: 1024px) { .standard-marquee--no-visual .site-breadcrumb + .standard-marquee__intro { padding-top: 30px; } } .standard-marquee--has-visual { padding-bottom: 30px; } .standard-marquee--has-visual .rte-body-component .standard-marquee__description a { color: #fff; } .standard-marquee--has-visual .rte-body-component .standard-marquee__description a:hover { color: #92d100; } .standard-marquee--no-visual .standard-marquee__headline { color: #fff; } .standard-marquee--no-visual .standard-marquee__headline:before { display: none; } .standard-marquee--no-visual .standard-marquee__subhead { color: #fff; } .standard-marquee--no-visual .standard-marquee__description p { color: #fff; font-weight: 400; } /* -------------------------- HOME MARQUEE GENERAL STYLING -------------------------- */ .home-marquee { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; margin-bottom: 30px; /* -------------------------- VISUAL BLOCK -------------------------- */ /* -------------------------- INTRO -------------------------- */ /* -------------------------- VIDEO BLOCK -------------------------- */ /* -------------------------- HEADLINE -------------------------- */ /* -------------------------- SUBHEAD -------------------------- */ /* -------------------------- DESCRIPTION -------------------------- */ /* -------------------------- SWIPER -------------------------- */ } @media all and (min-width: 600px) { .home-marquee { margin-bottom: 45px; } } @media all and (min-width: 1024px) { .home-marquee { margin-bottom: 60px; } } .home-marquee__visual { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #003057; overflow: hidden; /** Color Overlay */ /** Image */ } .home-marquee__visual:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; background-color: #003057; opacity: 0.6; mix-blend-mode: multiply; } .home-marquee__visual__image { content: ""; display: block; position: absolute; display: flex; width: 100%; height: 100%; } .home-marquee__visual__image img { object-fit: cover; object-position: 50% 50%; width: 100%; height: auto; } .home-marquee__visual__image:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-light.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.6; z-index: 1; pointer-events: none; } .home-marquee__intro { position: relative; width: 100%; } @media all and (min-width: 1024px) { .home-marquee__intro { width: 70%; } } .home-marquee__intro__container { margin: 0 auto; padding-right: 0; color: white; text-align: center; z-index: 5; } @media all and (min-width: 1024px) { .home-marquee__intro__container { margin: 0; padding-right: 20px; text-align: left; } } .home-marquee__intro__copy { max-width: 700px; margin: 0 auto; /* -------------------------- BUTTON -------------------------- */ } @media all and (min-width: 1024px) { .home-marquee__intro__copy { margin: 0; } } .home-marquee__intro__copy > *:last-child:not(.button):not(.blog-marquee__headline) { margin-bottom: 0; padding-bottom: 0; } .home-marquee__intro__copy .button { margin-top: 20px; } .home-marquee__video-wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; } .home-marquee__video-wrap-inner { content: ""; display: block; position: absolute; display: flex; width: 100%; height: 100%; } .home-marquee__video { display: block; position: absolute; width: 100%; height: auto; min-height: 100%; opacity: 0; object-fit: cover; object-position: 50% 50%; } .rte-body-component .home-marquee__headline { position: relative; color: #fff; line-height: 100%; z-index: 1; } @media all and (min-width: 768px) { .rte-body-component .home-marquee__headline { margin-bottom: 30px; } } .home-marquee__headline:after { content: ""; display: block; position: absolute; width: 20%; height: 3px; right: 0; bottom: -15px; left: 0; margin: 0 auto; background-color: #92d100; pointer-events: none; } @media all and (min-width: 1024px) { .home-marquee__headline:after { margin: 0; } } .home-marquee__subhead { letter-spacing: 0.2px; } .rte-body-component .home-marquee__subhead { margin-bottom: 0; color: #fff; } .home-marquee__description { position: relative; margin-top: 15px; z-index: 1; } .home-marquee__description p { color: #fff; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 175%; } @media all and (min-width: 600px) { .home-marquee__description p { font-size: 16px; } } @media all and (min-width: 1024px) { .home-marquee__description p { font-size: 18px; } } .home-marquee .inner-marquee { display: flex; flex-direction: column; justify-content: center; padding: 30px; } @media all and (min-width: 1024px) { .home-marquee .inner-marquee { flex-direction: row; justify-content: space-between; } } .home-marquee .swiper-container { width: 100%; height: auto; margin-top: 30px; z-index: 5; transition: all 0.3s ease-in-out; } @media all and (min-width: 600px) { .home-marquee .swiper-container { max-width: 600px; height: 150px; } } @media all and (min-width: 768px) { .home-marquee .swiper-container { margin-top: none; } } @media all and (min-width: 1024px) { .home-marquee .swiper-container { width: 30%; height: auto; margin-top: 0; } } .home-marquee .swiper-container .swiper-button-next { right: 6px; color: #003057; transition: all 0.3s ease-in-out; } .home-marquee .swiper-container .swiper-button-next:after { font-size: 18px; font-weight: 700; } .home-marquee .swiper-container .swiper-button-next:hover, .home-marquee .swiper-container .swiper-button-next:focus { color: #6e9e00; transform: translateX(3px); } .home-marquee .swiper-container .swiper-button-prev { left: 6px; color: #003057; transition: all 0.3s ease-in-out; } .home-marquee .swiper-container .swiper-button-prev:after { font-size: 18px; font-weight: 700; } .home-marquee .swiper-container .swiper-button-prev:hover, .home-marquee .swiper-container .swiper-button-prev:focus { color: #6e9e00; transform: translateX(-3px); } .home-marquee .swiper-container .swiper-pagination .swiper-pagination-bullet { background: #cad7de; opacity: 1; } .home-marquee .swiper-container .swiper-pagination .swiper-pagination-bullet-active { background: #375172; } .home-marquee .swiper-slide { display: flex; flex-direction: column; justify-content: center; height: auto; padding: 20px 30px 30px; text-align: center; background-color: #fff; } @media all and (min-width: 600px) { .home-marquee .swiper-slide { flex-direction: row; align-items: center; padding: 20px 60px 30px; } } @media all and (min-width: 1024px) { .home-marquee .swiper-slide { flex-direction: column; padding: 20px 45px 30px; } } .home-marquee .swiper-slide .button { margin: 0 auto; } .home-marquee .swiper-slide .button:after { display: none; } .home-marquee .swiper-slide .button:hover, .home-marquee .swiper-slide .button:focus { color: #6e9e00; transition: all 0.3s ease-in-out; } .home-marquee .swiper-slide .button:hover .svg--line, .home-marquee .swiper-slide .button:focus .svg--line { stroke: #6e9e00; } .home-marquee .swiper-slide .button:hover .icon-chevron-right, .home-marquee .swiper-slide .button:focus .icon-chevron-right { transform: translateX(3px); } .home-marquee .swiper-slide .button:active { color: #6e9e00; transition: all 0.3s ease-in-out; } .home-marquee .swiper-slide .button:active .svg--line { stroke: #6e9e00; } .home-marquee .swiper-slide .button:active .icon-chevron-right { transform: translateX(3px); } .home-marquee .swiper-slide:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-dark.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.6; z-index: 1; pointer-events: none; } .home-marquee__icon { position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .home-marquee__image-wrap-inner { padding-top: 56.25%; position: relative; background-color: #aabfcb; overflow: hidden; z-index: 1; } .home-marquee__image-wrap-inner--icon { width: 75px; height: 75px; margin: 0 auto; padding: 0; background-color: transparent; } @media all and (min-width: 600px) { .home-marquee__image-wrap-inner--icon { margin: 0; } } .home-marquee__text-wrap { width: 100%; padding: 10px 0 0; color: #003057; } @media all and (min-width: 600px) { .home-marquee__text-wrap { width: auto; padding: 0 0 0 20px; text-align: left; } } @media all and (min-width: 1024px) { .home-marquee__text-wrap { width: 100%; padding: 0; text-align: center; } } .home-marquee__text-wrap .home-marquee__headline { margin: 10px 0 5px; padding: 0; color: #003057; font-family: "Barley-Regular", "Helvetica", "Ubuntu Condensed", "Liberation Sans Narrow", arial narrow, arial, sans-serif; font-size: 16px; letter-spacing: 1px; line-height: 125%; text-transform: uppercase; transition: all 0.2s ease-out; } @media all and (min-width: 600px) { .home-marquee__text-wrap .home-marquee__headline { font-size: 18px; } } .home-marquee__text-wrap .home-marquee__text { margin: 0 auto 3px; font-size: 15px; } .home-marquee__text-wrap .home-marquee__text p { line-height: 150%; } /* -------------------------- BLOG/AGRONOMY/NEWS MARQUEE -------------------------- */ .blog-marquee { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 30px; /* -------------------------- VISUAL BLOCK -------------------------- */ /** Image */ /* -------------------------- BREADCRUMBS -------------------------- */ /* -------------------------- INTRO -------------------------- */ /* -------------------------- HEADLINE -------------------------- */ /* -------------------------- THE DIRT LOGO -------------------------- */ /* -------------------------- CREDITS -------------------------- */ /* -------------------------- TAGS -------------------------- */ } @media all and (min-width: 600px) { .blog-marquee { margin-bottom: 45px; } } @media all and (min-width: 1024px) { .blog-marquee { margin-bottom: 60px; } } .blog-marquee:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("/themes/custom/hoegemeyer/assets/img/repeating/asfalt-dark.png") 50% 50% repeat; background-size: 466px 349px; opacity: 0.6; } .blog-marquee:after { content: ""; display: block; position: absolute; background: rgba(255, 255, 255, 0); /* Old browsers */ background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, white 100%); /* W3C */ width: 100%; height: 30%; bottom: 0; left: 0; } .blog-marquee__image-wrap { position: relative; margin-top: 15px; background-color: #003057; overflow: hidden; } @media all and (min-width: 600px) { .blog-marquee__image-wrap { margin-top: 20px; } } @media all and (min-width: 1024px) { .blog-marquee__image-wrap { margin-top: 30px; } } .blog-marquee__image-wrap-inner { padding-top: 42.85714%; position: relative; background-color: #aabfcb; overflow: hidden; z-index: 1; } .blog-marquee__image-wrap-inner:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #003057; opacity: 0.6; mix-blend-mode: multiply; } .blog-marquee__image { position: absolute; width: 100%; max-width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .blog-marquee__image { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .blog-marquee .site-breadcrumb { position: relative; width: 100%; top: 0; padding-top: 15px; } @media all and (min-width: 600px) { .blog-marquee .site-breadcrumb { padding-top: 20px; } } @media all and (min-width: 1024px) { .blog-marquee .site-breadcrumb { padding-top: 30px; } } .blog-marquee .site-breadcrumb__item, .blog-marquee .site-breadcrumb__link { color: #003057; } .blog-marquee .site-breadcrumb__item .icon-chevron-right__line, .blog-marquee .site-breadcrumb__link .icon-chevron-right__line { stroke: #003057; } .blog-marquee .site-breadcrumb + .blog-marquee__container { padding-top: 15px; } @media all and (min-width: 600px) { .blog-marquee .site-breadcrumb + .blog-marquee__container { padding-top: 20px; } } @media all and (min-width: 1024px) { .blog-marquee .site-breadcrumb + .blog-marquee__container { padding-top: 30px; } } .blog-marquee__intro { position: relative; width: 100%; color: #000000; z-index: 5; } .blog-marquee__intro__container { text-align: center; } .blog-marquee__intro__copy > *:last-child:not(.button):not(.blog-marquee__headline) { margin-bottom: 0; padding-bottom: 0; } .rte-body-component .blog-marquee__headline { position: relative; margin-bottom: 12px; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 32px; letter-spacing: 0; line-height: 120%; text-transform: none; } @media all and (min-width: 1024px) { .rte-body-component .blog-marquee__headline { font-size: 43px; } } .blog-marquee__logo { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 120px; margin: 0 auto 5px; overflow: hidden; } @media all and (min-width: 768px) { .blog-marquee__logo { width: 160px; margin: 0 auto 10px; } } .blog-marquee__logo__wrap { display: block; width: 120px; margin-top: 20px; } @media all and (min-width: 768px) { .blog-marquee__logo__wrap { width: 160px; } } .blog-marquee__logo__wrap .the-dirt-svg { width: 100%; height: 100%; } .blog-marquee__credits { display: flex; flex-direction: column; align-items: center; justify-content: center; } @media all and (min-width: 768px) { .blog-marquee__credits { flex-direction: row; align-items: flex-start; } } .blog-marquee__credit { display: block; position: relative; color: #375172; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; font-weight: 700; } @media all and (min-width: 768px) { .blog-marquee__credit { font-size: 16px; } } .blog-marquee__credit + .blog-marquee__credit { margin-left: 0; } @media all and (min-width: 768px) { .blog-marquee__credit + .blog-marquee__credit { margin-left: 20px; } } .blog-marquee__credit + .blog-marquee__credit:before { display: none; } @media all and (min-width: 768px) { .blog-marquee__credit + .blog-marquee__credit:before { content: ''; display: block; position: absolute; width: 1px; height: 90%; top: 50%; left: -10px; background: #aabfcb; transform: translateY(-50%); } } .blog-marquee__tags { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; margin-top: 15px; } @media all and (min-width: 600px) { .blog-marquee__tags { margin-top: 20px; } } @media all and (min-width: 1024px) { .blog-marquee__tags { margin-top: 30px; } } .blog-marquee__tag { display: inline-block; padding: 5px; } .blog-marquee__tag .button { padding: 5px 7px 4px; color: #fff; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 12px; font-weight: 700; background-color: #003057; } .blog-marquee__tag .button:before, .blog-marquee__tag .button:after { display: none; } .blog-marquee__tag .button .icon-chevron-right { display: none; } .blog-marquee__tag .button:hover, .blog-marquee__tag .button:focus { color: #fff; background-color: #6e9e00; } /* -------------------------- CAREERS SEARCH LIST STYLING -------------------------- */ .search-results { position: relative; /* -------------------------- RESULTS COUNT -------------------------- */ } .search-results__rows { max-width: 700px; margin: 0 auto; } .search-results__filters .form-item { margin-bottom: 0; } .search-results__filters .form-item__text { height: 100%; } .search-results__filters .form-item__submit { padding: 4px 18px; background-color: #003057; } .search-results__filters .form-item__submit:hover, .search-results__filters .form-item__submit:focus { background-color: #6e9e00; } .search-results__filters__form { display: flex; flex-direction: column; } @media all and (min-width: 768px) { .search-results__filters__form { flex-direction: row; justify-content: space-between; } } .search-results__filters__fulltext { display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; } .search-results__filters__dropdowns { display: flex; flex-direction: column; align-items: flex; justify-content: space-between; padding-top: 15px; } @media all and (min-width: 768px) { .search-results__filters__dropdowns { flex-direction: row; padding-top: 0; padding-left: 20px; } } @media all and (min-width: 1024px) { .search-results__filters__dropdowns { padding-left: 30px; } } @media all and (min-width: 768px) { .search-results__filters__dropdowns .form-item { max-width: 200px; } } .search-results__filters__dropdowns .form-item + .form-item { margin-top: 15px; } @media all and (min-width: 768px) { .search-results__filters__dropdowns .form-item + .form-item { margin-top: 0; margin-left: 20px; } } .search-results__count { position: relative; margin-bottom: 38px; padding-bottom: 11px; } .product-charts { padding: 30px 0; /* -------------------------- PLANT CHARACTERISTICS -------------------------- */ /* -------------------------- CHARTS -------------------------- */ } @media all and (min-width: 768px) { .product-charts { padding: 45px 0; } } @media all and (min-width: 1024px) { .product-charts { padding: 60px 0; } } .product-charts__characteristics__container table { width: auto; margin: 0 auto; } @media (max-width: 1024px) { .product-charts__characteristics__container table { width: 100%; } } .product-charts__characteristics__container table tr td, .product-charts__characteristics__container table tr th { min-width: 0; } .product-charts__chart-wrapper { padding: 30px 0 0 0; } @media all and (min-width: 768px) { .product-charts__chart-wrapper { padding: 45px 0 0 0; } } @media all and (min-width: 1024px) { .product-charts__chart-wrapper { padding: 60px 0 0 0; } } .product-charts .tabs-component__wrapper { max-width: 1280px; } .product-highlights__container { display: grid; grid-template-columns: 1fr; grid-gap: 20px; gap: 20px; /** No map grid variation. */ } @media all and (min-width: 600px) { .product-highlights__container { grid-template-columns: 2fr 1fr; grid-gap: 30px; gap: 30px; } } @media all and (min-width: 320px) { .product-highlights__container--no-map { grid-template-columns: 1fr; } } .product-highlights__highlights ul { padding-left: 0; } .product-highlights__product-traits { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-top: 30px; } .product-highlights__product-traits img { display: block; max-height: 50px; margin: 5px 5px 0 0; } .product-highlights__highlights { margin-bottom: 30px; } .product-highlights__map-image { margin: 0 auto; width: 100%; max-width: 250px; } @media all and (min-width: 600px) { .product-highlights__map-image { width: 100%; } } .product-highlights__map-image img { width: 100%; } .product-search { /* -------------------------- TABLE -------------------------- */ /* -------------------------- FILTERS -------------------------- */ /* -------------------------- SELECTION - CORN / SOYBEANS -------------------------- */ /* -------------------------- KEY (Alfalfa) -------------------------- */ } .product-search__table tr th, .product-search__table tr td { min-width: 40px; } .product-search__table tr th { position: relative; height: 200px; white-space: nowrap; } .product-search__table tr th div { position: absolute; width: 40px; bottom: 15px; left: 50%; transform: rotate(-90deg); transform-origin: 0% 50%; } .product-search__table--soybean tr th:nth-of-type(1), .product-search__table--soybean tr td:nth-of-type(1), .product-search__table--corn tr th:nth-of-type(1), .product-search__table--corn tr td:nth-of-type(1) { width: 50px; min-width: 50px; max-width: 50px; } .product-search__table--soybean tr th:nth-of-type(2), .product-search__table--soybean tr td:nth-of-type(2), .product-search__table--corn tr th:nth-of-type(2), .product-search__table--corn tr td:nth-of-type(2) { width: 150px; min-width: 150px; max-width: 150px; left: 50px !important; } .product-search__table--alfalfa tr th:nth-of-type(1), .product-search__table--alfalfa tr td:nth-of-type(1) { width: 150px; min-width: 150px; max-width: 150px; } .product-search__table--sorghum { max-width: 700px; margin: 0 auto; } .product-search__table--sorghum tr th { height: 60px; } .product-search__table--sorghum tr th div { width: auto; right: 0; left: 0; margin: 0 auto; transform: rotate(0deg); } .product-search__filters { display: grid; grid-gap: 20px 60px; gap: 20px 60px; grid-template-columns: repeat(1, 1fr); } @media all and (min-width: 768px) { .product-search__filters { grid-template-columns: 1fr 2fr 1fr 0.75fr; } } .product-search__filter { display: flex; position: relative; flex-direction: row; align-items: center; } @media all and (min-width: 768px) { .product-search__filter + .product-search__filter:before { content: ''; display: block; position: absolute; width: 2px; height: 90%; left: -31px; background: #aabfcb; } } .product-search__filter .button--clear { margin: 0 auto; } .product-search__filter__range { display: flex; width: calc(100% - 36px); height: 36px; margin-left: 18px; } .product-search__filter__range__track { align-self: center; width: 100%; height: 5px; background-color: #cad7de; } .product-search__filter__range__thumb { display: flex; align-items: center; justify-content: center; width: 12px; height: 36px; background-color: #003057; border: 1.5px solid #003057; } .product-search__filter__range__thumb-marker { width: 14px; height: 14px; background-color: #003057; } .product-search__filter__range__label { position: absolute; bottom: -32px; padding: 4px; color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 16px; background-color: #cad7de; } .product-search__selection { display: flex; justify-content: flex-start; padding: 30px 0; } .product-search__selection:before { content: ""; display: block; position: absolute; width: 100%; height: 2px; top: 0; right: 0; left: 0; margin: 0 auto; background: #aabfcb; transition: all 0.3s ease-in-out; } @media all and (min-width: 768px) { .product-search__selection:before { display: none; } } .product-search__selection__action--disabled { opacity: 0.5; } .product-search__selection__action + .product-search__selection__action { margin-left: 30px; } .product-search__pagination-message { font-size: 14px; text-align: center; } .product-search__pagination { padding: 20px 0; } .product-search__key { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 900px; margin: 25px auto; } .product-search__key__item { padding: 5px 15px; font-size: 14px; } .product-search .new-indicator { color: #6e9e00; font-weight: 700; } /* -------------------------- SELECTION -------------------------- */ .product-search-select { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #fff; transition: 0.2s all ease-in-out; } .product-search-select:hover .icon-checkmark, .product-search-select:hover .icon-plus { transform: scale(1.5); } .product-search-select--active { background: #e3eaee; } .product-search-select__checkbox { position: absolute; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; opacity: 0; } .product-search-select__display { pointer-events: none; position: absolute; width: 18px; height: 18px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .product-search-select__display .icon-plus, .product-search-select__display .icon-checkmark { width: 100%; height: 100%; transition: 0.2s all; } .product-search-select__display .icon-plus__line, .product-search-select__display .icon-checkmark__line { stroke: #003057; transition: 0.2s all; } .product-search-select__display--active .icon-checkmark__line { stroke: #003057; } .product-search__naming-system__image { display: block; max-width: 100%; margin: 0 auto; } .prev-next { position: relative; } .prev-next__container { position: relative; } .prev-next__items { display: flex; position: relative; flex-direction: row; justify-content: center; justify-content: space-between; padding-bottom: 30px; } @media all and (min-width: 768px) { .prev-next__items { padding-bottom: 45px; } } .prev-next__items:after { content: ""; display: block; position: absolute; width: 100%; height: 2px; right: 0; bottom: 0; left: 0; margin: 0 auto; background: #aabfcb; transition: all 0.3s ease-in-out; } .prev-next__item { display: block; position: relative; width: 50%; } .prev-next__item + .prev-next__item { margin-left: 40px; } @media all and (min-width: 1024px) { .prev-next__item + .prev-next__item { margin-left: 100px; } } .prev-next__item + .prev-next__item:before { content: ''; display: block; position: absolute; width: 2px; height: 100%; top: 50%; left: -20px; background: #aabfcb; transform: translateY(-50%); } @media all and (min-width: 1024px) { .prev-next__item + .prev-next__item:before { left: -50px; } } .prev-next__item__link { display: block; position: relative; text-decoration: none; } .prev-next__item__nav-title { position: relative; padding-bottom: 5px; color: #375172; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; } .prev-next__item__title { color: #003057; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; font-weight: 400; text-decoration: none; transition: 0.3s all ease-in-out; } .prev-next__item__title .last-word { display: inline-block; position: relative; } .prev-next__item__title .last-word svg__line { stroke: #6e9e00; } .prev-next__item__title svg { position: relative; width: 9px; height: 9px; bottom: 2px; transition: all 0.3s ease-in-out; } @media all and (min-width: 600px) { .prev-next__item__title svg { bottom: 1px; } } .prev-next__item__title svg--line { transition: all 0.3s ease-in-out; stroke-width: 4px; } .prev-next__item__title svg .svg--line { transition: all 0.3s ease-in-out; stroke: #003057; } .prev-next__item__title:hover, .prev-next__item__title:focus { color: #6e9e00; } .prev-next__item__title:hover .last-word .icon-chevron-right, .prev-next__item__title:focus .last-word .icon-chevron-right { transform: translateX(3px); } .prev-next__item__title:hover .last-word .icon-chevron-right__line, .prev-next__item__title:focus .last-word .icon-chevron-right__line { stroke: #6e9e00; } .prev-next__item__title:hover .last-word .icon-chevron-left, .prev-next__item__title:focus .last-word .icon-chevron-left { transform: translateX(-3px); } .prev-next__item__title:hover .last-word .icon-chevron-left__line, .prev-next__item__title:focus .last-word .icon-chevron-left__line { stroke: #6e9e00; } .prev-next__item--prev { text-align: right; } .prev-next__item--next { text-align: left; } /* -------------------------- RELATED POSTS GRID -------------------------- */ .related-posts { /** Container Settings */ } .related-posts__container { display: grid; grid-gap: 15px; gap: 15px; grid-template-columns: 1fr; margin: 0 auto; } @media all and (min-width: 600px) { .related-posts__container { grid-gap: 20px; gap: 20px; grid-template-columns: repeat(2, 1fr); } } @media all and (min-width: 768px) { .related-posts__container { grid-template-columns: repeat(3, 1fr); } } @media all and (min-width: 1024px) { .related-posts__container { grid-gap: 30px; gap: 30px; } } /* -------------------------- RELATED POSTS GRID -------------------------- */ .featured-posts { /** Container Settings */ } .featured-posts__container { display: grid; grid-gap: 15px; gap: 15px; grid-template-columns: 1fr; margin: 0 auto; } @media all and (min-width: 768px) { .featured-posts__container { grid-gap: 20px; gap: 20px; grid-template-columns: repeat(2, 1fr); } } @media all and (min-width: 1024px) { .featured-posts__container { grid-gap: 30px; gap: 30px; } } .utility-links { position: relative; z-index: 5; padding: 20px 0 0 0; } .utility-links__container { display: flex; flex-direction: row; justify-content: center; } .utility-links__link { display: flex; position: relative; flex-direction: row; align-items: center; justify-content: center; color: #fff; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; text-decoration: none; background: #003057; cursor: pointer; transition: 0.3s all ease-in-out; } .utility-links__link + .utility-links__link { margin-left: 30px; } .utility-links__link__text { text-align: center; text-decoration: none; } .utility-links__link__copied { position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 10px 12px 8px; color: #fff; font-size: 15px; background: #6e9e00; opacity: 0; transition: 0.2s all ease-in-out; pointer-events: none; } @media all and (min-width: 600px) { .utility-links__link__copied { font-size: 18px; } } .utility-links__link--copied .utility-links__link__copied { opacity: 1; } .yield-data-map { /* -------------------------- FILTERS -------------------------- */ /* -------------------------- RESULT -------------------------- */ } .yield-data-map__container { position: relative; } .yield-data-map__loading { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 0.8); z-index: 5; } .yield-data-map__initial { display: flex; position: absolute; flex-direction: row; align-items: center; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 48, 87, 0.8); z-index: 5; } .yield-data-map__initial__message-text { color: #fff; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 32px; letter-spacing: 0.2px; text-align: center; text-transform: uppercase; } .yield-data-map__filters { display: grid; width: 100%; max-width: 900px; margin: 0 auto; grid-gap: 20px 60px; gap: 20px 60px; grid-template-columns: 1fr; } @media all and (min-width: 768px) { .yield-data-map__filters { grid-template-columns: 1fr 1fr 1fr 0.75fr 0.75fr; } } .yield-data-map__filters__form { width: 100%; } .yield-data-map__filter { display: flex; position: relative; flex-direction: row; align-items: center; justify-content: center; } @media all and (min-width: 768px) { .yield-data-map__filter + .yield-data-map__filter:before { content: ''; display: block; position: absolute; width: 2px; height: 90%; left: -31px; background: #aabfcb; } } .yield-data-map__filter .button { margin: 0 auto; } @media all and (min-width: 768px) { .yield-data-map__filter .button { margin: 0; } } .yield-data-map__content { display: grid; grid-template-columns: 1fr; grid-gap: 30px; gap: 30px; width: 100%; padding-top: 30px; padding-bottom: 30px; } @media all and (min-width: 768px) { .yield-data-map__content { padding-bottom: 45px; grid-template-columns: 1fr 250px; grid-gap: 0; gap: 0; } } @media all and (min-width: 1024px) { .yield-data-map__content { padding-bottom: 60px; } } .yield-data-map__map { height: 420px; border: 2px solid #003057; } @media all and (min-width: 768px) { .yield-data-map__map { height: 520px; border-right-width: 0; } } .yield-data-map__map__control { position: absolute; top: 10px; left: 10px; } .yield-data-map__map__marker-wrapper--active { z-index: 20; } .yield-data-map__map__marker { position: relative; width: 20px; height: 20px; background: #003057; border-radius: 50%; cursor: pointer; transition: 0.3s; } .yield-data-map__map__marker--active { background: #6e9e00; transform: scale(1.5); } .yield-data-map__map__marker:after { content: ''; display: block; position: absolute; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; cursor: pointer; } .yield-data-map__map__marker:hover { transform: scale(1.5); } .yield-data-map__sidebar { max-height: 520px; border: 2px solid #003057; } .yield-data-map__sidebar__container { max-height: 486px; overflow: auto; } .yield-data-map__sidebar__results-headline { display: block; height: 30px; z-index: 2; } .yield-data-map__sidebar__results-headline-text { padding: 6px 10px 8px; color: #fff; font-family: "din-condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 14px; letter-spacing: 0.2px; text-align: center; text-transform: uppercase; background-color: #003057; } .yield-data-map__result { position: relative; padding: 20px; } .yield-data-map__result--active { background: #e9eff2; } .yield-data-map__result + .yield-data-map__result:before { content: ''; display: block; position: absolute; width: 100%; height: 2px; top: 0; left: 0; background: #003057; } .yield-data-map__result__links { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; margin: 0; } .yield-data-map__result__text { padding-bottom: 6px; color: #003057; } .yield-data-map__no-results, .yield-data-map__initial-results { padding: 20px; } .yield-data-map p strong { font-weight: 700; } .yield-data-report-table { padding-bottom: 30px; } @media all and (min-width: 768px) { .yield-data-report-table { padding-bottom: 45px; } } @media all and (min-width: 1024px) { .yield-data-report-table { padding-bottom: 60px; } } .yield-data-report-table table tr td.highlighted { color: #6e9e00; font-weight: 700; } .yield-data-report-details { padding: 0 0 30px 0; } .yield-data-report-details__columns { display: grid; grid-template-columns: 1fr; grid-gap: 15px; gap: 15px; } @media (min-width: 460px) { .yield-data-report-details__columns { grid-template-columns: repeat(2, 1fr); } } @media all and (min-width: 768px) { .yield-data-report-details__columns { grid-template-columns: repeat(3, 1fr); } .yield-data-report-details__columns--4 { grid-template-columns: repeat(4, 1fr); } } .yield-data-report-details__info + .yield-data-report-details__info { margin-top: 15px; } .yield-data-report-details__info__label { color: #003057; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 15px; font-weight: 700; } .yield-data-report-details__info__value { font-size: 15px; } .find-rep { /* -------------------------- WRAPPER -------------------------- */ /* -------------------------- LOADING -------------------------- */ /* -------------------------- FORM -------------------------- */ /* -------------------------- FILTERS -------------------------- */ /* -------------------------- RESULTS -------------------------- */ } .find-rep__container { position: relative; padding: 0 0 30px 0; } @media all and (min-width: 768px) { .find-rep__container { padding: 0 0 45px 0; } } .find-rep__loading { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 0.8); z-index: 5; } .find-rep__webform-wrapper { display: none; z-index: 0; } .find-rep__webform-wrapper--visible { display: block; } .find-rep__filters { display: grid; max-width: 700px; margin: 0 auto; grid-gap: 20px 60px; gap: 20px 60px; grid-template-columns: 1fr; } @media all and (min-width: 600px) { .find-rep__filters { grid-template-columns: 1fr 1fr auto; } } .find-rep__filters__form { width: 100%; } .find-rep__filters .button { margin: 0 auto; } @media all and (min-width: 600px) { .find-rep__filters .button { margin: 0; } } .find-rep__filter { display: flex; position: relative; flex-direction: row; align-items: center; } @media all and (min-width: 600px) { .find-rep__filter + .find-rep__filter:before { content: ''; display: block; position: absolute; width: 2px; height: 90%; left: -31px; background: #aabfcb; } } .find-rep__results { padding: 30px 0 0 0; } @media all and (min-width: 768px) { .find-rep__results { padding: 45px 0 0 0; } } @media (max-width: 1024px) { .find-rep__results table tr td:first-of-type, .find-rep__results table tr th:first-of-type { background: #e9eff2; } } .campaign-location { text-align: center; margin-top: 50px; } .campaign-location div { margin-bottom: 20px; display: flex; flex-direction: column; } .campaign-location .form-item__dropdown { max-width: 268px; margin: auto; } .campaign-location select.region-select { position: relative; width: 100%; padding: 12px 28px 13px 10px; color: #003057; font-family: "din-2014", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", helvetica, arial, sans-serif; font-size: 18px; background-color: transparent; border: none; border-radius: 0; outline: none; cursor: pointer; overflow: hidden; transform: scale(1); -moz-appearance: none; -webkit-appearance: none; backface-visibility: hidden; } h3 { text-align: center; margin-bottom: 22px; color: #003057; font-family: "Barley-Regular", "Helvetica", "Ubuntu Condensed", "Liberation Sans Narrow", arial narrow, arial, sans-serif; font-size: 32px; letter-spacing: 3px; line-height: 110%; } @media all and (min-width: 600px) { h3 { font-size: 43px; } } @media all and (min-width: 1024px) { h3 { font-size: 57px; } } /*# sourceMappingURL=style.css.map*/