/* Theme Name: Recycling Alternative Author: Erika Rathje Author URI: http://www.erikarathje.ca/ Version: 1.25 Text Domain: recyclingalt */ @import url("fonts/volte.css"); @import url("https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&display=swap"); /** Repeatable Patterns ----------------------------------------------------------------------------- */ .status:before { content: "\f14c"; font-family: "FontAwesome"; margin-right: 5px; font-weight: normal; } /* Input fields */ /* flexible pixel value */ /* works with #px and $iphone etc. */ /* flexbox */ /*input { -webkit-appearance: none; -webkit-border-radius: 0; }*/ /* Border Radius ========================================================================== */ /* Usage */ /*.button { @include border-radius(5px); } .submit-button{ @include border-top-radius(10px); }*/ /* Opacity ========================================================================== */ img { display: block; height: auto; } /* apply a natural box layout model to all elements */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; box-sizing: border-box; -moz-box-sizing: border-box; /* tell FF to behave! */ font: inherit; font-size: 100%; vertical-align: baseline; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } .assistive-text { visibility: hidden; height: 0; } a { text-decoration: none; } input[type="submit"] { -webkit-appearance: none; } /* replaced by fitVids JS embed, iframe, object, video { margin-bottom: 24px; max-width: 100%; } p > embed, p > iframe, p > object, span > embed, span > iframe, span > object { margin-bottom: 0; } */ .hide { display: none; } .says, .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; } .site .skip-link { background-color: #f1f1f1; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2); color: #21759b; display: block; font: bold 14px/normal "Noto Sans", sans-serif; left: -9999em; outline: none; padding: 15px 23px 14px; text-decoration: none; text-transform: none; top: -9999em; } .logged-in .site .skip-link { box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); font: bold 14px/normal "Open Sans", sans-serif; } .site .skip-link:focus { clip: auto; height: auto; left: 6px; top: 7px; width: auto; z-index: 100000; } /* Input fields */ input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea { border: 1px solid #ccc; background: #fff; -webkit-border-radius: 4px !important; border-radius: 4px !important; background-clip: padding-box; /* stops bg color from leaking outside the border: */ color: #2b2b2b; } input[type="submit"], button { margin-left: 0px; } input[type="checkbox"] { margin-right: 7px; } textarea { width: 100%; height: 120px; } input:focus, textarea:focus { border: 1px solid #ccc; outline: 0; } /* Buttons */ /*input[type="button"], input[type="reset"], input[type="submit"] { border: 0; @include border-radius(7px); color: #fff; font-size: 19px; height: 46px; line-height: 46px; text-align: center; font-weight: bold; -webkit-appearance: none; }*/ button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:focus { cursor: pointer; } strong, b { font-weight: bold; } em { font-style: italic; } sup { vertical-align: super; font-size: smaller; } sub { vertical-align: sub; font-size: smaller; } .button, .wp-block-button__link, .wp-block-button__link:visited, input[type="submit"] { border-radius: 0; color: #fff; font-weight: normal !important; font-family: "Volte-Semibold", Arial, sans-serif; font-size: 21px; background: #F4B221; padding: 12px 16px 8px; text-align: center; -webkit-appearance: none; min-height: 42px; border: 0; border-bottom: 3px solid #dca01e; color: #1D1D1B; /*font-family: $voltesemi; border-radius: 0; width: auto; display: block; color: $darktext; font-weight: normal;*/ } .button:hover, .wp-block-button__link:hover, .wp-block-button__link:visited:hover, input[type="submit"]:hover { cursor: pointer; background: #dca01e; color: #fff; } @media screen and (max-width: 667px) { .button, .wp-block-button__link, .wp-block-button__link:visited, input[type="submit"] { font-size: 22px; } } @media screen and (max-width: 667px) { .button, .wp-block-button__link, .wp-block-button__link:visited, input[type="submit"] { font-size: 22px !important; } } input[type="submit"] { font-size: 21px; margin-top: 6px; } input:not([type="submit"]), textarea { border: 1px solid #ccc; background: #fff; padding: 6px 3px 2px 6px; min-height: 35px; line-height: 120%; font-weight: normal; font-family: "Assistant", Arial, sans-serif; border-radius: 0 !important; -webkit-appearance: none; color: #333333; } @media screen and (max-width: 667px) { input:not([type="submit"]), textarea { width: 100%; min-height: 37px; line-height: 125%; } } textarea { width: 100%; line-height: 145%; } input:focus, textarea:focus { border: 1px solid #ccc; outline: 0; background: #fff; } @media screen and (max-width: 768px) { input[type="radio"] { -webkit-transform: scale(1.3, 1.3); padding-top: 5px; padding-left: 1px; vertical-align: top; } } /* quote form */ .quote { background: #6E2C76 url("img/pattern.svg") no-repeat center center; padding: 53px 0 104px; grid-column: 1 / -1 !important; margin-top: 50px; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; } @media screen and (min-width: 1200px) { .quote { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .quote { grid-column-gap: 50px; } } .quote > * { grid-column: 2 / -2; } .quote p { font-size: 18px; /* temp */ line-height: 135% !important; margin-bottom: 26px !important; } .quote h2, .quote h3, .quote p, .quote a { color: #fff !important; } .quote h2 { font-size: 40px !important; margin-top: 0 !important; margin-bottom: 26px; } @media screen and (max-width: 667px) { .quote h2 { font-size: 30px !important; } } .quote a { border-bottom-color: #fff !important; } .quote form label { position: absolute; left: -99999px; } .quote form input:not([type="submit"]), .quote form textarea { font-size: 20px; color: #333333; margin-bottom: 8px; height: 44px; padding: 4px 3px 2px 6px; width: 100%; max-width: 390px; } .quote form input[type="submit"] { padding: 14px 20px 10px; } .quote form textarea { height: 100px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } hr { margin: 22px 0 18px; border: 0; height: 0; border-top: 1px solid #ccc; } ::-webkit-input-placeholder { color: #595959; } :-moz-placeholder { color: #595959; } ::-moz-placeholder { color: #595959; opacity: 1; /* Since FF19 lowers the opacity of the placeholder by default */ } :-ms-input-placeholder { color: #595959; } /* Buttons */ /*input[type="button"], input[type="reset"], input[type="submit"] { background-color: $blue; border: 0; @include border-radius(7px); color: #fff; font-size: 19px; height: 46px; line-height: 46px; text-align: center; font-weight: bold; -webkit-appearance: none; } button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:focus { color: #fff; cursor: pointer; }*/ /* RA homepage */ /* blocks */ .home .n2-ss-slider .n2-ss-layer { display: block; } @media screen and (max-width: 667px) { .home .n2-ss-layer-content { padding: 0 !important; } } .home .n2-ss-section-main-content { display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; grid-template-rows: auto; } @media screen and (min-width: 1200px) { .home .n2-ss-section-main-content { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .home .n2-ss-section-main-content { grid-column-gap: 50px; } } .home .n2-ss-section-main-content > .n2-ss-layer { grid-column: 2 / -2; justify-self: start; } @media screen and (max-width: 667px) { .home .n2-ss-section-main-content > .n2-ss-layer { grid-column: 2 / -2; } } .home .n2-ss-section-main-content > .n2-ss-layer h2 { margin-top: 50px; white-space: pre; } @media screen and (max-width: 1050px) { .home .n2-ss-section-main-content > .n2-ss-layer h2 { font-size: 50px !important; margin-top: 40px; } } @media screen and (max-width: 950px) { .home .n2-ss-section-main-content > .n2-ss-layer h2 { font-size: 45px !important; margin-top: 35px; } } @media screen and (max-width: 768px) { .home .n2-ss-section-main-content > .n2-ss-layer h2 { font-size: 36px !important; } } @media screen and (max-width: 667px) { .home .n2-ss-section-main-content > .n2-ss-layer h2 { font-size: 28px !important; margin-top: 25vw; } } .home .n2-ss-section-main-content .n2-ss-layer.n2-ow { margin-left: 0; margin-right: 0; width: auto; } .home .n2-ss-section-main-content .n2-ss-button-container { grid-column: 2 / -2; } @media screen and (max-width: 950px) { .home .n2-ss-section-main-content .n2-ss-button-container { font-size: 16px !important; } } @media screen and (max-width: 667px) { .home .n2-ss-section-main-content .n2-ss-button-container { font-size: 13px !important; } } .home .n2-ss-section-main-content .n2-ss-button-container a:hover { background: #f5ba37 !important; } .home .intro { background: #dcfdff url("img/pattern.svg") no-repeat center center; background-size: 100%; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; padding: 63px 0 29px; } @media screen and (min-width: 1200px) { .home .intro { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .home .intro { grid-column-gap: 50px; } } @media screen and (max-width: 768px) { .home .intro { padding-bottom: 25px; } } @media screen and (max-width: 667px) { .home .intro { padding: 50px 0 20px; } } .home .intro > div { grid-column: 4 / 12; } @media screen and (max-width: 900px) { .home .intro > div { grid-column: 3 / 13; } } @media screen and (max-width: 667px) { .home .intro > div { grid-column: 2 / -2; } } .home .intro p { font-family: "Assistant", Arial, sans-serif; color: #333333; color: #02606E; font-size: 24px; line-height: 145%; } @media screen and (max-width: 667px) { .home .intro p { font-size: 20px; } } .home .intro p:first-of-type { font-family: "Volte", Arial, sans-serif; font-size: 30px; line-height: 130%; font-weight: bold; color: #02606E; margin-bottom: 15px; } @media screen and (max-width: 667px) { .home .intro p:first-of-type { font-size: 23px; } } .home .intro h2 { font-weight: bold; color: #333333; font-size: 27px; line-height: 130%; margin: 50px auto 30px; text-align: center; } @media screen and (max-width: 667px) { .home .intro h2 { font-size: 22px; } } .home .intro h2 a { color: #1D1D1B; } .home .intro h2 a:hover { color: #02606E; } @media screen and (max-width: 667px) { .home .intro .values { grid-column: auto / span 2 !important; } } .home .intro .values img { height: 50px; width: auto; margin: 0 auto; } .home .intro .values p { font-size: 21px; color: #1D1D1B; font-family: "Volte-Semibold", Arial, sans-serif; font-weight: normal; text-align: center; white-space: nowrap; padding-bottom: 20px; } @media screen and (min-width: 1200px) { .home .intro .values p { font-size: 23px; } } .home .intro .values p a { color: #1D1D1B; } .home .intro .values p a:hover { color: #02606E; } @media (max-width: 599px) { .home .intro .values .wp-block-column { flex-basis: 50% !important; } } @media screen and (max-width: 320px) { .home .intro .values .wp-block-column { flex-basis: 100% !important; } } .home .intro .values .wp-block-column figure { margin-bottom: 8px; } .home .services { background: #6E2C76; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; padding: 83px 0 58px; } @media screen and (min-width: 1200px) { .home .services { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .home .services { grid-column-gap: 50px; } } .home .services .wp-block-group__inner-container { grid-column: 2 / -2; display: grid; grid-template-columns: repeat(12, 1fr); grid-column-gap: 30px; grid-row-gap: 30px; /* see blocks.scss for the rest of this */ } .home .services .wp-block-group__inner-container h2, .home .services .wp-block-group__inner-container h3 { grid-column: 2 / -2; text-align: center; font-family: "Volte-Semibold", Arial, sans-serif; color: #fff; } .home .services .wp-block-group__inner-container h2 { font-size: 50px; margin-bottom: 12px; } .home .services .wp-block-group__inner-container h3 { font-size: 25px; margin-bottom: 20px; line-height: 130%; } .home .services .wp-block-group__inner-container .card { padding: 29px 22px 29px; } .home .services .wp-block-group__inner-container .wp-block-buttons { grid-column: 2 / -2; text-align: center; margin-top: 20px; } .home .services .wp-block-group__inner-container .wp-block-buttons .wp-block-button { margin: 0 auto !important; } .home .services .wp-block-group__inner-container .wp-block-button__link { /* defined in WP page background: $yellow; color: $darktext;*/ border-bottom: 3px solid #dca01e !important; font-size: 30px; width: 246px; padding: 22px 16px 18px; } .home .services .wp-block-group__inner-container .wp-block-button__link:hover { background: #f5ba37 !important; } .home .customers { padding-top: 60px; background: #fff; /* @include iphoneL { .lshowcase-logos .lshowcase-wrap-responsive { padding: 10px 24% !important; } } */ } @media screen and (max-width: 667px) { .home .customers { padding-bottom: 20px; } } .home .customers h2 { font-size: 26px; font-family: "Volte-Semibold", Arial, sans-serif; text-align: center; color: #037F8C; } @media screen and (max-width: 667px) { .home .customers h2 { font-size: 22px; margin-bottom: 24px; } } .home .customers .lshowcase-logos { padding: 50px 0 !important; } .home .owl-carousel { background: #F4B221; position: relative; height: 33vw; /*height: 480px;*/ overflow-y: hidden; } @media screen and (max-width: 1200px) { .home .owl-carousel { height: 45vw; } } @media screen and (max-width: 900px) { .home .owl-carousel { height: 60vw; } } @media screen and (max-width: 490px) { .home .owl-carousel { height: 92vw; } } @media screen and (max-width: 400px) { .home .owl-carousel { height: 470px; } } @media screen and (max-width: 350px) { .home .owl-carousel { height: 500px; } } .home .owl-carousel .owl-dots { float: right; width: 120px; position: absolute; bottom: 20px; left: 70%; } @media screen and (min-width: 1200px) { .home .owl-carousel .owl-dots { left: 72%; } } @media screen and (min-width: 668px) and (max-width: 767px) { .home .owl-carousel .owl-dots { left: 62%; } } @media screen and (max-width: 667px) { .home .owl-carousel .owl-dots { position: absolute; left: 0; right: 0; bottom: 15px; float: none; width: 100%; } } .home .owl-carousel .owl-dots .owl-dot span { background: #ab7d17 !important; width: 13px; height: 13px; } .home .owl-carousel .owl-dots .owl-dot.active span { background: #02A2BC !important; } .home .owl-carousel .owl-dots .owl-dot.active span:hover { cursor: auto; } .home .owl-carousel .item .img-wrapper { width: 50%; height: 33vw; float: left; overflow: hidden; } @media screen and (max-width: 1200px) { .home .owl-carousel .item .img-wrapper { height: 45vw; } } @media screen and (max-width: 900px) { .home .owl-carousel .item .img-wrapper { height: 60vw; } } .home .owl-carousel .item .img-wrapper img { width: auto; height: 120%; } @media screen and (max-width: 768px) { .home .owl-carousel .item .img-wrapper { width: 40%; } .home .owl-carousel .item .img-wrapper img { margin-left: -25vw; margin-right: -25vw; height: 100%; } } @media screen and (max-width: 667px) { .home .owl-carousel .item .img-wrapper { display: none; } } .home .owl-carousel .item .content-wrapper { width: 50%; height: 33vw; float: left; position: relative; /*&:before { content: ""; border-top: 48px solid transparent; border-right: 55px solid red; border-bottom: 48px solid transparent; position: absolute; top: 50%; left: -55px; }*/ } @media screen and (max-width: 1200px) { .home .owl-carousel .item .content-wrapper { height: 45vw; } } @media screen and (max-width: 900px) { .home .owl-carousel .item .content-wrapper { height: 60vw; } } @media screen and (max-width: 490px) { .home .owl-carousel .item .content-wrapper { height: 90vw; } } @media screen and (max-width: 400px) { .home .owl-carousel .item .content-wrapper { height: 430px; } } @media screen and (max-width: 350px) { .home .owl-carousel .item .content-wrapper { height: 470px; } } @media screen and (max-width: 768px) { .home .owl-carousel .item .content-wrapper { width: 60%; } } .home .owl-carousel .item .content-wrapper #triangle-left { width: 0; height: 0; border-top: 27px solid transparent; border-right: 46px solid #F4B221; border-bottom: 27px solid transparent; position: absolute; position: absolute; top: 50%; transform: translateY(-50%); left: -46px; } @media screen and (max-width: 667px) { .home .owl-carousel .item .content-wrapper #triangle-left { display: none; } } .home .owl-carousel .item .content-wrapper .content { position: absolute; top: 50%; transform: translateY(-50%); margin: 0 auto; width: 50vw; padding: 0 6.6666666667%; } @media screen and (max-width: 768px) { .home .owl-carousel .item .content-wrapper .content { width: 60vw; } } @media screen and (max-width: 667px) { .home .owl-carousel .item .content-wrapper .content { width: 100%; } } @media screen and (max-width: 667px) { .home .owl-carousel .item .content-wrapper { width: 100%; float: none; } } .home .owl-carousel .item p { font-family: "Volte-Semibold", Arial, sans-serif; font-size: 21px; line-height: 130%; color: #1D1D1B; margin-bottom: 15px; } @media screen and (max-width: 768px) { .home .owl-carousel .item p { font-size: 19px; } } .home .owl-carousel .item span { font-size: 19px; } /* basic pages */ .page h1, .error404 h1, .search h1, .page-template-search h1 { font-size: 60px; color: #fff; background: #02A2BC; padding: 8px 15px 2px; display: inline-block; font-weight: bold; line-height: 110%; } @media screen and (max-width: 1024px) { .page h1, .error404 h1, .search h1, .page-template-search h1 { font-size: 50px; padding: 10px 15px 0px; } } @media screen and (max-width: 667px) { .page h1, .error404 h1, .search h1, .page-template-search h1 { font-size: 35px; padding: 10px 15px 5px; } } @media screen and (max-width: 320px) { .page h1, .error404 h1, .search h1, .page-template-search h1 { font-size: 31px; padding: 20px 15px 15px; } } .page #banner, .error404 #banner, .search #banner, .page-template-search #banner { width: 100%; height: 1px; padding-bottom: 33.3333333333%; grid-column: 1 / -1; overflow: hidden; } .page #banner img, .error404 #banner img, .search #banner img, .page-template-search #banner img { width: 100%; } .page article, .error404 article, .search article, .page-template-search article { display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; grid-column: 1 / -1; } @media screen and (min-width: 1200px) { .page article, .error404 article, .search article, .page-template-search article { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .page article, .error404 article, .search article, .page-template-search article { grid-column-gap: 50px; } } .page article .entry-header, .error404 article .entry-header, .search article .entry-header, .page-template-search article .entry-header { grid-column: 2 / -2 !important; margin-top: 30px; margin-bottom: 55px; } @media screen and (max-width: 667px) { .page article .entry-header, .error404 article .entry-header, .search article .entry-header, .page-template-search article .entry-header { grid-column: 2 / -2; margin-bottom: 40px; } } .page article .entry-header h1, .error404 article .entry-header h1, .search article .entry-header h1, .page-template-search article .entry-header h1 { margin-top: 20px; } .page article .entry-header.has-banner, .error404 article .entry-header.has-banner, .search article .entry-header.has-banner, .page-template-search article .entry-header.has-banner { margin-top: -35px; grid-column: 3 / -3; } @media screen and (max-width: 667px) { .page article .entry-header.has-banner, .error404 article .entry-header.has-banner, .search article .entry-header.has-banner, .page-template-search article .entry-header.has-banner { grid-column: 2 / -2; margin-top: 0px; } } .page article .entry-header.has-banner h1, .error404 article .entry-header.has-banner h1, .search article .entry-header.has-banner h1, .page-template-search article .entry-header.has-banner h1 { margin-top: 0 !important; } .page .entry-content, .error404 .entry-content, .search .entry-content, .page-template-search .entry-content { grid-column: 1 / -1; padding-bottom: 35px; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; /* see https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/ */ } @media screen and (min-width: 1200px) { .page .entry-content, .error404 .entry-content, .search .entry-content, .page-template-search .entry-content { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .page .entry-content, .error404 .entry-content, .search .entry-content, .page-template-search .entry-content { grid-column-gap: 50px; } } .page .entry-content > *, .error404 .entry-content > *, .search .entry-content > *, .page-template-search .entry-content > * { grid-column: 2 / span 7; } @media screen and (max-width: 1024px) { .page .entry-content > *, .error404 .entry-content > *, .search .entry-content > *, .page-template-search .entry-content > * { grid-column: 2 / span 9; } } @media screen and (max-width: 768px) { .page .entry-content > *, .error404 .entry-content > *, .search .entry-content > *, .page-template-search .entry-content > * { grid-column: 2 / span 12; } } @media screen and (max-width: 667px) { .page .entry-content > *, .error404 .entry-content > *, .search .entry-content > *, .page-template-search .entry-content > * { grid-column: 2 / -2; } } .page .entry-content .wizard, .error404 .entry-content .wizard, .search .entry-content .wizard, .page-template-search .entry-content .wizard { grid-column: 1 / -1; } .page .entry-content p, .error404 .entry-content p, .search .entry-content p, .page-template-search .entry-content p { /*grid-column: 3 / span 7;*/ font-size: 20px; line-height: 140%; margin-bottom: 18px; color: #333333; } .page .entry-content h2, .error404 .entry-content h2, .search .entry-content h2, .page-template-search .entry-content h2 { font-size: 42px; margin: 50px 0 31px; line-height: 125%; color: #037F8C; font-weight: normal; } @media screen and (max-width: 667px) { .page .entry-content h2, .error404 .entry-content h2, .search .entry-content h2, .page-template-search .entry-content h2 { font-size: 30px; margin: 40px 0 12px; } } .page .entry-content h3, .error404 .entry-content h3, .search .entry-content h3, .page-template-search .entry-content h3 { font-family: "Volte-Semibold", Arial, sans-serif; font-size: 27px; line-height: 125%; color: #008540; margin: 40px 0 15px; } @media screen and (max-width: 667px) { .page .entry-content h3, .error404 .entry-content h3, .search .entry-content h3, .page-template-search .entry-content h3 { font-size: 25px; margin: 30px 0 8px; } } .page .entry-content p + h3, .error404 .entry-content p + h3, .search .entry-content p + h3, .page-template-search .entry-content p + h3 { margin-top: 25px; } @media screen and (max-width: 667px) { .page .entry-content p + h3, .error404 .entry-content p + h3, .search .entry-content p + h3, .page-template-search .entry-content p + h3 { margin: 15px 0 8px; } } .page .entry-content .wp-block-columns + h3, .error404 .entry-content .wp-block-columns + h3, .search .entry-content .wp-block-columns + h3, .page-template-search .entry-content .wp-block-columns + h3 { margin-top: 10px; } .page .entry-content h4, .error404 .entry-content h4, .search .entry-content h4, .page-template-search .entry-content h4 { font-family: "Volte-Semibold", Arial, sans-serif; font-size: 23px; color: #6E2C76; margin: 40px 0 12px; } .page .entry-content li, .error404 .entry-content li, .search .entry-content li, .page-template-search .entry-content li { font-size: 20px; line-height: 140%; color: #333333; font-family: "Assistant", Arial, sans-serif; list-style: disc; margin-left: 36px; } .page .entry-content ul, .page .entry-content ol, .error404 .entry-content ul, .error404 .entry-content ol, .search .entry-content ul, .search .entry-content ol, .page-template-search .entry-content ul, .page-template-search .entry-content ol { margin-bottom: 25px; } .page .entry-content ol li, .error404 .entry-content ol li, .search .entry-content ol li, .page-template-search .entry-content ol li { list-style: decimal; } .page .entry-content p + .wp-block-columns, .error404 .entry-content p + .wp-block-columns, .search .entry-content p + .wp-block-columns, .page-template-search .entry-content p + .wp-block-columns { margin-top: 30px; } .page .entry-content figure.alignwide, .error404 .entry-content figure.alignwide, .search .entry-content figure.alignwide, .page-template-search .entry-content figure.alignwide { grid-column: 2 / -2 !important; margin-top: 20px; } @media screen and (max-width: 667px) { .page .entry-content figure.alignwide, .error404 .entry-content figure.alignwide, .search .entry-content figure.alignwide, .page-template-search .entry-content figure.alignwide { margin-top: 0; width: 100vw; grid-column: 1 / -1 !important; } .page .entry-content figure.alignwide figcaption, .error404 .entry-content figure.alignwide figcaption, .search .entry-content figure.alignwide figcaption, .page-template-search .entry-content figure.alignwide figcaption { padding: 0 20px; } } .page .entry-content figure.alignfull, .error404 .entry-content figure.alignfull, .search .entry-content figure.alignfull, .page-template-search .entry-content figure.alignfull { grid-column: 1 / -1; margin-top: 20px; } .page .entry-content figure.alignfull figcaption, .error404 .entry-content figure.alignfull figcaption, .search .entry-content figure.alignfull figcaption, .page-template-search .entry-content figure.alignfull figcaption { padding: 0 30px; } @media screen and (max-width: 667px) { .page .entry-content figure.alignfull figcaption, .error404 .entry-content figure.alignfull figcaption, .search .entry-content figure.alignfull figcaption, .page-template-search .entry-content figure.alignfull figcaption { padding: 0 20px; } } .page .entry-content .alignleft, .error404 .entry-content .alignleft, .search .entry-content .alignleft, .page-template-search .entry-content .alignleft { float: left; margin: 15px 30px 15px 0; } .page .entry-content .alignright, .error404 .entry-content .alignright, .search .entry-content .alignright, .page-template-search .entry-content .alignright { float: right; margin: 15px 0 15px 30px; } .page .entry-content img.alignright, .page .entry-content img.alignleft, .page .entry-content figure.alignright, .page .entry-content figure.alignleft, .error404 .entry-content img.alignright, .error404 .entry-content img.alignleft, .error404 .entry-content figure.alignright, .error404 .entry-content figure.alignleft, .search .entry-content img.alignright, .search .entry-content img.alignleft, .search .entry-content figure.alignright, .search .entry-content figure.alignleft, .page-template-search .entry-content img.alignright, .page-template-search .entry-content img.alignleft, .page-template-search .entry-content figure.alignright, .page-template-search .entry-content figure.alignleft { width: 50%; } @media screen and (max-width: 667px) { .page .entry-content img.alignright, .page .entry-content img.alignleft, .page .entry-content figure.alignright, .page .entry-content figure.alignleft, .error404 .entry-content img.alignright, .error404 .entry-content img.alignleft, .error404 .entry-content figure.alignright, .error404 .entry-content figure.alignleft, .search .entry-content img.alignright, .search .entry-content img.alignleft, .search .entry-content figure.alignright, .search .entry-content figure.alignleft, .page-template-search .entry-content img.alignright, .page-template-search .entry-content img.alignleft, .page-template-search .entry-content figure.alignright, .page-template-search .entry-content figure.alignleft { width: 100%; } } .page .entry-content figure.alignwide, .error404 .entry-content figure.alignwide, .search .entry-content figure.alignwide, .page-template-search .entry-content figure.alignwide { width: 100%; margin: 40px auto 35px; } .page .entry-content figure.alignfull, .error404 .entry-content figure.alignfull, .search .entry-content figure.alignfull, .page-template-search .entry-content figure.alignfull { width: 100vw; position: relative; left: 50%; right: 50%; margin: 45px -50vw 30px; /* a bit buggy at least in espresso preview */ } .page .entry-content figure.alignfull figcaption, .error404 .entry-content figure.alignfull figcaption, .search .entry-content figure.alignfull figcaption, .page-template-search .entry-content figure.alignfull figcaption { padding-left: 30px; padding-right: 30px; } .page .entry-content figcaption, .error404 .entry-content figcaption, .search .entry-content figcaption, .page-template-search .entry-content figcaption { font-family: "Assistant", Arial, sans-serif; font-size: 16px; } .page .entry-content img.aligncenter, .page .entry-content figure.aligncenter, .error404 .entry-content img.aligncenter, .error404 .entry-content figure.aligncenter, .search .entry-content img.aligncenter, .search .entry-content figure.aligncenter, .page-template-search .entry-content img.aligncenter, .page-template-search .entry-content figure.aligncenter { width: 100%; margin: 25px auto 20px; text-align: center; position: relative; grid-column: 2 / -2; } @media screen and (max-width: 667px) { .page .entry-content img.aligncenter, .page .entry-content figure.aligncenter, .error404 .entry-content img.aligncenter, .error404 .entry-content figure.aligncenter, .search .entry-content img.aligncenter, .search .entry-content figure.aligncenter, .page-template-search .entry-content img.aligncenter, .page-template-search .entry-content figure.aligncenter { margin: 20px auto 15px; } } .page .entry-content figure.is-type-video, .error404 .entry-content figure.is-type-video, .search .entry-content figure.is-type-video, .page-template-search .entry-content figure.is-type-video { margin-bottom: 45px; } @media screen and (max-width: 667px) { .page .entry-content figure.is-type-video, .error404 .entry-content figure.is-type-video, .search .entry-content figure.is-type-video, .page-template-search .entry-content figure.is-type-video { margin-bottom: 35px; } } /* about page */ .page-about article .entry-header { position: relative; grid-column: 3 / -3 !important; } @media screen and (max-width: 667px) { .page-about article .entry-header { grid-column: 1 / -1 !important; width: 100%; } .page-about article .entry-header h1 { width: 100%; } } .page-about .entry-title { position: absolute; top: 0; z-index: 10; } .page-about .wp-block-group { grid-column: 1 / -1; } .page-about .wp-block-group .wp-block-group__inner-container { grid-column: 3 / span 7; } .page-about .entry-content { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; /* because it's 1 / -1 already it should match main grid */ padding-bottom: 0; margin-bottom: 0; } @media screen and (min-width: 1200px) { .page-about .entry-content { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .page-about .entry-content { grid-column-gap: 50px; } } .page-about .entry-content h2 { font-family: "Volte-Semibold", Arial, sans-serif; /*margin-top: 0;*/ } .page-about .entry-content > .wp-block-group { grid-column: 1 / -1; padding-top: 40px; padding-bottom: 15vw; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; } @media screen and (min-width: 1200px) { .page-about .entry-content > .wp-block-group { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .page-about .entry-content > .wp-block-group { grid-column-gap: 50px; } } @media screen and (max-width: 667px) { .page-about .entry-content > .wp-block-group { padding-top: 30px; padding-bottom: 0; } } @media screen and (min-width: 1200px) { .page-about .entry-content > .wp-block-group.greenhub, .page-about .entry-content > .wp-block-group.cats { margin-top: -15vw; padding-top: 20vw; } } @media screen and (max-width: 667px) { .page-about .entry-content > .wp-block-group.greenhub, .page-about .entry-content > .wp-block-group.cats { margin-top: 0; padding-top: 0; } } .page-about .entry-content > .wp-block-group.greenhub figure.alignwide, .page-about .entry-content > .wp-block-group.cats figure.alignwide { margin-top: -15vw; } @media screen and (max-width: 667px) { .page-about .entry-content > .wp-block-group.greenhub figure.alignwide, .page-about .entry-content > .wp-block-group.cats figure.alignwide { margin-top: 0; } } @media screen and (max-width: 768px) { .page-about .entry-content > .wp-block-group.drivers figure, .page-about .entry-content > .wp-block-group.warehouse figure { margin-top: 0 !important; padding-top: 0 !important; } } .page-about .entry-content > .wp-block-group > .wp-block-group__inner-container { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; } @media screen and (min-width: 1200px) { .page-about .entry-content > .wp-block-group > .wp-block-group__inner-container { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .page-about .entry-content > .wp-block-group > .wp-block-group__inner-container { grid-column-gap: 50px; } } @media screen and (max-width: 667px) { .page-about .entry-content > .wp-block-group > .wp-block-group__inner-container { padding-bottom: 45px !important; } } .page-about .entry-content > .wp-block-group > .wp-block-group__inner-container .wp-block-image.alignwide, .page-about .entry-content > .wp-block-group > .wp-block-group__inner-container .wp-block-image.alignfull { margin-bottom: 5px; } .page-about .entry-content > .wp-block-group > .wp-block-group__inner-container .content { grid-column: 3 / span 7; } @media screen and (max-width: 1024px) { .page-about .entry-content > .wp-block-group > .wp-block-group__inner-container .content { grid-column: 3 / span 9; } } @media screen and (max-width: 768px) { .page-about .entry-content > .wp-block-group > .wp-block-group__inner-container .content { grid-column: 3 / span 10; } } @media screen and (max-width: 667px) { .page-about .entry-content > .wp-block-group > .wp-block-group__inner-container .content { grid-column: 2 / -2; } } .page-about .entry-content > .wp-block-group > .wp-block-group__inner-container .content h3 { color: #6E2C76; } @media screen and (max-width: 667px) { .page-about .entry-content > .wp-block-group > .wp-block-group__inner-container .content h3 { margin-top: 24px; } } .page-about .entry-content > .wp-block-group p { color: #1D1D1B; } .page-about .entry-content .intro { grid-column: 1 / -1; padding: 86px 0 15vw !important; background: #fff; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; /* because it's 1 / -1 already it should match main grid */ } @media screen and (min-width: 1200px) { .page-about .entry-content .intro { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .page-about .entry-content .intro { grid-column-gap: 50px; } } @media screen and (max-width: 667px) { .page-about .entry-content .intro { padding: 50px 0 0 !important; } } .page-about .entry-content .intro .wp-block-group__inner-container { grid-column: 3 / span 7; display: block; } @media screen and (max-width: 1024px) { .page-about .entry-content .intro .wp-block-group__inner-container { grid-column: 3 / span 9; } } @media screen and (max-width: 768px) { .page-about .entry-content .intro .wp-block-group__inner-container { grid-column: 3 / span 10; } } @media screen and (max-width: 667px) { .page-about .entry-content .intro .wp-block-group__inner-container { grid-column: 2 / -2; } } .page-about .entry-content .greenhub { padding-bottom: 0; } .page-about .entry-content .greenhub > .wp-block-group__inner-container { background: #81c689; padding-bottom: 100px; } .page-about .entry-content .greenhub > .wp-block-group__inner-container h2, .page-about .entry-content .greenhub > .wp-block-group__inner-container p { color: #1D1D1B; } .page-about .entry-content .cats { padding-bottom: 0; margin-bottom: 0; } @media screen and (max-width: 667px) { .page-about .entry-content .cats { padding-top: 0; } } .page-about .entry-content .cats > .wp-block-group__inner-container { background: #F4B221; padding-bottom: 150px; margin-bottom: 0; } .page-about .entry-content .cats > .wp-block-group__inner-container h2, .page-about .entry-content .cats > .wp-block-group__inner-container h3, .page-about .entry-content .cats > .wp-block-group__inner-container h4, .page-about .entry-content .cats > .wp-block-group__inner-container p, .page-about .entry-content .cats > .wp-block-group__inner-container li { color: #1D1D1B; } .page-about .entry-content .drivers { padding-bottom: 0; } @media screen and (max-width: 667px) { .page-about .entry-content .drivers { padding-top: 0px; } } .page-about .entry-content .values { grid-column: 2 / -2; padding: 55px 0 121px !important; } @media screen and (max-width: 768px) { .page-about .entry-content .values { padding: 20px 0 80px !important; } } @media screen and (max-width: 667px) { .page-about .entry-content .values { padding: 25px 0 40px !important; } } .page-about .entry-content .values > .wp-block-group__inner-container { display: block; display: grid; grid-template-columns: repeat(12, 1fr); grid-column-gap: 20px; } @media screen and (min-width: 1200px) { .page-about .entry-content .values > .wp-block-group__inner-container { grid-column-gap: 50px; } } .page-about .entry-content .values > .wp-block-group__inner-container > h2, .page-about .entry-content .values > .wp-block-group__inner-container > p { grid-column: 2 / span 7; } @media screen and (max-width: 768px) { .page-about .entry-content .values > .wp-block-group__inner-container > h2, .page-about .entry-content .values > .wp-block-group__inner-container > p { grid-column: 2 / -2; } } @media screen and (max-width: 667px) { .page-about .entry-content .values > .wp-block-group__inner-container > h2, .page-about .entry-content .values > .wp-block-group__inner-container > p { grid-column: 1 / -1; } } .page-about .entry-content .values > .wp-block-group__inner-container h3, .page-about .entry-content .values > .wp-block-group__inner-container p { color: #1D1D1B; } .page-about .entry-content .values .values-wrapper .wp-block-group__inner-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(auto); grid-row-gap: 30px; grid-column-gap: 30px; margin-top: 40px; } @media screen and (max-width: 768px) { .page-about .entry-content .values .values-wrapper .wp-block-group__inner-container { grid-template-columns: 1fr; grid-row-gap: 20px; } } .page-about .entry-content .values .values-wrapper .wp-block-group__inner-container .wp-block-media-text { align-self: stretch; grid-template-columns: 20% 80%; padding: 50px 24px 46px; -webkit-border-radius: 14px !important; border-radius: 14px !important; background-clip: padding-box; /* stops bg color from leaking outside the border: */ } @media screen and (max-width: 667px) { .page-about .entry-content .values .values-wrapper .wp-block-group__inner-container .wp-block-media-text { grid-template-columns: 15% 85%; padding: 40px 15px 30px; } } .page-about .entry-content .values .values-wrapper .wp-block-group__inner-container .wp-block-media-text:nth-child(2) h3, .page-about .entry-content .values .values-wrapper .wp-block-group__inner-container .wp-block-media-text:nth-child(2) p { color: #fff; } .page-about .entry-content .values .wp-block-media-text__media img { width: 90%; margin: 0 auto; } .page-about .entry-content .values .wp-block-media-text__content h3 { font-size: 32px; font-family: "Volte-Semibold", Arial, sans-serif; margin-bottom: 25px; margin-top: 0; } @media screen and (max-width: 667px) { .page-about .entry-content .values .wp-block-media-text__content h3 { font-size: 28px; margin-bottom: 12px; } } .page-about .entry-content .values .wp-block-media-text__content p { font-size: 21px; font-family: "Volte-Semibold", Arial, sans-serif; } @media screen and (max-width: 667px) { .page-about .entry-content .values .wp-block-media-text__content p { font-size: 20px; line-height: 135%; } } .page-about .entry-content .team { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; padding: 72px 0 100px !important; } @media screen and (min-width: 1200px) { .page-about .entry-content .team { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .page-about .entry-content .team { grid-column-gap: 50px; } } @media screen and (max-width: 768px) { .page-about .entry-content .team { padding: 30px 0 60px !important; } } @media screen and (max-width: 667px) { .page-about .entry-content .team { padding: 20px 0 40px !important; } } .page-about .entry-content .team .wp-block-group__inner-container { grid-column: 3 / span 9; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(auto); row-gap: 25px; grid-column-gap: 20px; } @media screen and (min-width: 1200px) { .page-about .entry-content .team .wp-block-group__inner-container { grid-column-gap: 40px; } } @media screen and (max-width: 768px) { .page-about .entry-content .team .wp-block-group__inner-container { grid-column: 2 / -2; } } @media screen and (max-width: 650px) { .page-about .entry-content .team .wp-block-group__inner-container { grid-column: 2 / -2; grid-template-columns: 1fr; } } .page-about .entry-content .team h2 { color: #037F8C; grid-column: 1 / -1; margin-bottom: 48px; } @media screen and (max-width: 667px) { .page-about .entry-content .team h2 { margin-bottom: 20px; } } .page-about .entry-content .team h3 { color: #6E2C76; grid-column: 1 / -1; margin: 0 0 15px; } @media screen and (max-width: 667px) { .page-about .entry-content .team h3 { margin: 0 0 10px; } } .page-about .entry-content .team h3 + p { grid-column: 2 / -2; padding-bottom: 20px; } .page-about .entry-content .wp-block-group.alignwide > .wp-block-image { grid-column: 2 / -2; margin-top: -20vw; margin-bottom: 53px; } @media screen and (min-width: 1200px) { .page-about .entry-content .wp-block-group.alignwide > .wp-block-image { margin-top: -15vw; } } .page-about .entry-content .wp-block-group.alignwide > .wp-block-image img { width: 100%; margin: 0 auto; } @media screen and (max-width: 667px) { .page-about .entry-content .wp-block-group.alignwide > .wp-block-image { grid-column: 1 / -1 !important; } } /* ===== contact page ====== */ .page-contact h1 { display: none; } .page-contact .entry-header { display: none; } .page-contact .entry-content { padding-bottom: 0; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; /* see https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/ */ /* full width items get full width grid spec; see below too */ /*.wp-block-column .wp-block-columns .wp-block-column:first-of-type h3, > h3:last-of-type { @include iphoneL { display: none; } }*/ } @media screen and (min-width: 1200px) { .page-contact .entry-content { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .page-contact .entry-content { grid-column-gap: 50px; } } .page-contact .entry-content > * { grid-column: 2 / -2; } .page-contact .entry-content .waste-wizard-tip { padding: 7px 10px 7px 12px; margin-top: 36px; } .page-contact .entry-content .waste-wizard-tip a { color: #006631; } @media screen and (max-width: 667px) { .page-contact .entry-content .waste-wizard-tip { padding: 10px 10px 10px 12px; line-height: 130%; font-size: 17px; } } .page-contact .entry-content .waste-wizard-tip:before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f0eb"; color: #02A2BC; margin-right: 7px; } @media screen and (max-width: 1234px) { .page-contact .entry-content .wp-block-columns.alignfull { display: grid; grid-template-columns: repeat(12, 1fr); grid-column-gap: 20px; grid-template-rows: auto auto; } } @media screen and (max-width: 1234px) and (min-width: 1200px) { .page-contact .entry-content .wp-block-columns.alignfull { grid-column-gap: 50px; } } @media screen and (max-width: 1234px) { .page-contact .entry-content .wp-block-columns.alignfull .wp-block-column:first-child { grid-column: auto / span 12; grid-row: 1; } .page-contact .entry-content .wp-block-columns.alignfull .wp-block-column:nth-child(2) { grid-column: auto / span 12; grid-row: 2; margin-left: 0; } } @media screen and (max-width: 599px) { .page-contact .entry-content .wp-block-columns.alignfull .wp-block-column:first-child { margin-bottom: 40px; } .page-contact .entry-content .wp-block-columns.alignfull .wp-block-column:first-child .wp-block-columns { margin-bottom: 0; } } .page-contact .entry-content .quote { grid-column: 1 / -1; } .page-contact .entry-content p { font-size: 19px; line-height: 150%; } .page-contact .entry-content p a, .page-contact .entry-content li a { color: #333333; border-bottom: 1px solid #333333; margin-bottom: 0; } .page-contact .entry-content p a:hover, .page-contact .entry-content li a:hover { color: #02606E; } .page-contact .entry-content h2 { font-size: 35px; color: #333333; margin: 27px 0 30px; } @media screen and (max-width: 667px) { .page-contact .entry-content h2 { margin: 20px 0 6px; font-size: 28px; } } .page-contact .entry-content h3 { font-size: 22px; font-family: "Volte", Arial, sans-serif; font-weight: bold; margin: 0 0 5px; } .page-contact .entry-content > h3:first-of-type:before { content: '\f0e0'; font-family: 'Font Awesome 5 Pro'; margin-right: 5px; } .page-contact .entry-content .wp-block-column .wp-block-columns .wp-block-column:first-of-type h3:first-of-type:before { content: '\f0e0'; font-family: 'Font Awesome 5 Pro'; margin-right: 5px; } .page-contact .entry-content .wp-block-column .wp-block-columns .wp-block-column:first-of-type h3:nth-of-type(2):before { content: '\f570'; font-family: 'Font Awesome 5 Pro'; margin-right: 5px; } .page-contact .entry-content .wp-block-column .wp-block-columns .wp-block-column:nth-child(2) h3:first-of-type:before { content: '\f68a'; font-family: 'Font Awesome 5 Pro'; margin-right: 5px; } .page-contact .entry-content .fab { font-size: 28px; margin-right: 8px; } .page-contact .entry-content .fab:hover { color: #02A2BC; } @media screen and (max-width: 667px) { .page-contact .entry-content .wp-block-column .wp-block-columns .wp-block-column p { line-height: 165%; } } .page-composters .entry-content { padding-bottom: 0; } .page-composters .entry-content .icons.wp-block-columns { flex-wrap: nowrap; } @media screen and (max-width: 868px) { .page-composters .entry-content .icons.wp-block-columns img { padding: 25px; } } @media screen and (max-width: 667px) { .page-composters .entry-content .icons.wp-block-columns img { padding: 15px; } .page-composters .entry-content .icons.wp-block-columns p { font-size: 17px; } } @media screen and (max-width: 400px) { .page-composters .entry-content .icons.wp-block-columns img { padding: 10px; } .page-composters .entry-content .icons.wp-block-columns p { font-size: 15px; } } .page-template-default:not(.page-about) .wp-block-group.has-background { grid-column: 1 / -1; padding: 30px 0 35px; margin: 30px 0; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; } @media screen and (min-width: 1200px) { .page-template-default:not(.page-about) .wp-block-group.has-background { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .page-template-default:not(.page-about) .wp-block-group.has-background { grid-column-gap: 50px; } } @media screen and (min-width: 1200px) { .page-template-default:not(.page-about) .wp-block-group.has-background { margin-top: 45px; } } .page-template-default:not(.page-about) .wp-block-group.has-background:last-child { margin-bottom: 0; } .page-template-default:not(.page-about) .wp-block-group.has-background .wp-block-group__inner-container { grid-column: 2 / -2; } .page-template-default:not(.page-about) .wp-block-group.has-background.has-subtle-background-background-color { background: #F4B221; } .page-template-default:not(.page-about) .wp-block-group.has-background.has-subtle-background-background-color p, .page-template-default:not(.page-about) .wp-block-group.has-background.has-subtle-background-background-color h2, .page-template-default:not(.page-about) .wp-block-group.has-background.has-subtle-background-background-color h3, .page-template-default:not(.page-about) .wp-block-group.has-background.has-subtle-background-background-color h4, .page-template-default:not(.page-about) .wp-block-group.has-background.has-subtle-background-background-color h5, .page-template-default:not(.page-about) .wp-block-group.has-background.has-subtle-background-background-color h6, .page-template-default:not(.page-about) .wp-block-group.has-background.has-subtle-background-background-color li { color: #1D1D1B; } .page-template-default:not(.page-about) .wp-block-group.has-background.has-accent-background-color { background: #02A2BC; } .page-template-default:not(.page-about) .wp-block-group.has-background.has-accent-background-color p, .page-template-default:not(.page-about) .wp-block-group.has-background.has-accent-background-color h2, .page-template-default:not(.page-about) .wp-block-group.has-background.has-accent-background-color h3, .page-template-default:not(.page-about) .wp-block-group.has-background.has-accent-background-color h4, .page-template-default:not(.page-about) .wp-block-group.has-background.has-accent-background-color h5, .page-template-default:not(.page-about) .wp-block-group.has-background.has-accent-background-color h6, .page-template-default:not(.page-about) .wp-block-group.has-background.has-accent-background-color li { color: #1D1D1B; } .page-template-default:not(.page-about) .wp-block-group.has-background.has-green-background-background-color, .page-template-default:not(.page-about) .wp-block-group.has-background.has-primary-background-color { background: #61B86C; } .page-template-default:not(.page-about) .wp-block-group.has-background.has-green-background-background-color p, .page-template-default:not(.page-about) .wp-block-group.has-background.has-green-background-background-color h2, .page-template-default:not(.page-about) .wp-block-group.has-background.has-green-background-background-color h3, .page-template-default:not(.page-about) .wp-block-group.has-background.has-green-background-background-color h4, .page-template-default:not(.page-about) .wp-block-group.has-background.has-green-background-background-color h5, .page-template-default:not(.page-about) .wp-block-group.has-background.has-green-background-background-color h6, .page-template-default:not(.page-about) .wp-block-group.has-background.has-green-background-background-color li, .page-template-default:not(.page-about) .wp-block-group.has-background.has-primary-background-color p, .page-template-default:not(.page-about) .wp-block-group.has-background.has-primary-background-color h2, .page-template-default:not(.page-about) .wp-block-group.has-background.has-primary-background-color h3, .page-template-default:not(.page-about) .wp-block-group.has-background.has-primary-background-color h4, .page-template-default:not(.page-about) .wp-block-group.has-background.has-primary-background-color h5, .page-template-default:not(.page-about) .wp-block-group.has-background.has-primary-background-color h6, .page-template-default:not(.page-about) .wp-block-group.has-background.has-primary-background-color li { color: #1D1D1B; } .page-template-default:not(.page-about) .wp-block-group.has-background.has-secondary-background-color { background: #6E2C76; } .page-template-default:not(.page-about) .wp-block-group.has-background.has-secondary-background-color p, .page-template-default:not(.page-about) .wp-block-group.has-background.has-secondary-background-color h2, .page-template-default:not(.page-about) .wp-block-group.has-background.has-secondary-background-color h3, .page-template-default:not(.page-about) .wp-block-group.has-background.has-secondary-background-color h4, .page-template-default:not(.page-about) .wp-block-group.has-background.has-secondary-background-color h5, .page-template-default:not(.page-about) .wp-block-group.has-background.has-secondary-background-color h6, .page-template-default:not(.page-about) .wp-block-group.has-background.has-secondary-background-color li { color: #fff; } .page-template-default:not(.page-about) section.media-boxes:nth-of-type(1) { margin-top: 50px; } .page-template-default:not(.page-about) .media-boxes { grid-column: 1 / -1; } .page-template-default:not(.page-about) .media-boxes:last-of-type { margin-bottom: 40px; } .page-template-default:not(.page-about) .media-boxes h3 { margin-top: 0; } .page-template-default:not(.page-about) .entry-content { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; /* because it's 1 / -1 already it should match main grid */ margin-bottom: 0; padding-bottom: 0; } @media screen and (min-width: 1200px) { .page-template-default:not(.page-about) .entry-content { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .page-template-default:not(.page-about) .entry-content { grid-column-gap: 50px; } } .page-template-default:not(.page-about) .entry-content .lshowcase-logos { grid-column: 2 / -2; width: 100%; margin-top: 20px; margin-bottom: 45px; } @media screen and (max-width: 667px) { .page-template-default:not(.page-about) .entry-content .lshowcase-logos { margin-bottom: 30px; } } .page-template-default:not(.page-about) .entry-content .lshowcase-flex { justify-content: space-evenly; } .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow { grid-column: 1 / -1; padding: 25vw 0 0px; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; } @media screen and (min-width: 1200px) { .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow { grid-column-gap: 50px; } } @media screen and (max-width: 667px) { .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow { padding: 30px 0 40px; } .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue:last-of-type, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green:last-of-type, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow:last-of-type { padding-bottom: 0; } } @media screen and (min-width: 1200px) { .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow { margin-top: -15vw; padding-top: 37vw; } } .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue figure.alignwide, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green figure.alignwide, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow figure.alignwide { margin-top: -15vw; } @media screen and (max-width: 667px) { .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue figure.alignwide, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green figure.alignwide, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow figure.alignwide { margin-top: 0; } } .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; padding-bottom: 60px; } @media screen and (min-width: 1200px) { .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container { grid-column-gap: 50px; } } @media screen and (max-width: 667px) { .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container { padding-bottom: 45px !important; } } .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container .wp-block-image.alignwide, .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container .wp-block-image.alignfull, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container .wp-block-image.alignwide, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container .wp-block-image.alignfull, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container .wp-block-image.alignwide, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container .wp-block-image.alignfull { margin-bottom: 5px; } .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container > *, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container > *, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container > * { grid-column: 3 / span 7; } @media screen and (max-width: 1024px) { .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container > *, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container > *, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container > * { grid-column: 3 / span 9; } } @media screen and (max-width: 768px) { .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container > *, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container > *, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container > * { grid-column: 3 / span 10; } } @media screen and (max-width: 667px) { .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container > *, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container > *, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container > * { grid-column: 2 / -2; } } .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container h3, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container h3, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container h3 { color: #6E2C76; } @media screen and (max-width: 667px) { .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container h3, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container h3, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container h3 { margin-top: 24px; } } .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue .wp-block-group:not(.intro) .wp-block-image, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green .wp-block-group:not(.intro) .wp-block-image, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow .wp-block-group:not(.intro) .wp-block-image { grid-column: 2 / -2 !important; margin-top: -20vw; margin-bottom: 53px; } @media screen and (min-width: 1200px) { .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue .wp-block-group:not(.intro) .wp-block-image, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green .wp-block-group:not(.intro) .wp-block-image, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow .wp-block-group:not(.intro) .wp-block-image { margin-top: -15vw; } } .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue .wp-block-group:not(.intro) .wp-block-image img, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green .wp-block-group:not(.intro) .wp-block-image img, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow .wp-block-group:not(.intro) .wp-block-image img { width: 100%; margin: 0 auto; } @media screen and (max-width: 667px) { .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue .wp-block-group:not(.intro) .wp-block-image, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green .wp-block-group:not(.intro) .wp-block-image, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow .wp-block-group:not(.intro) .wp-block-image { grid-column: 1 / -1 !important; } } .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container { background: #81c689; } .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container h2, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container h3, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container h4, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container p, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container li, .page-template-default:not(.page-about) .entry-content > .wp-block-group.green > .wp-block-group__inner-container blockquote { color: #1D1D1B; } .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container { background: #F4B221; } .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container h2, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container h3, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container h4, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container p, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container li, .page-template-default:not(.page-about) .entry-content > .wp-block-group.yellow > .wp-block-group__inner-container blockquote { color: #1D1D1B; } .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container { background: #ccecf2; } .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container h2, .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container h3, .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container h4, .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container p, .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container li, .page-template-default:not(.page-about) .entry-content > .wp-block-group.blue > .wp-block-group__inner-container blockquote { color: #1D1D1B; } .page-template-default:not(.page-about) .entry-content .projects, .page-template-default:not(.page-about) .entry-content .boxes { /*background: #ccecf2;*/ grid-column: 2 / -2; } .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns, .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns { grid-column: 2 / -2; } .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns .wp-block-column, .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns .wp-block-column { background: #F4B221; border-radius: 10px; padding: 25px; } @media screen and (max-width: 600px) { .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns .wp-block-column:first-child, .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns .wp-block-column:first-child { margin-bottom: 30px; } } .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns > div:nth-child(2), .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns > div:nth-child(2) { background: #61B86C; } .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns > div:nth-child(3), .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns > div:nth-child(3) { background: #6E2C76; } .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns > div:nth-child(3) > *, .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns > div:nth-child(3) > * { color: #fff; } .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns .wp-block-column.empty, .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns .wp-block-column.empty { background: #fff; } @media screen and (max-width: 600px) { .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns .wp-block-column.empty, .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns .wp-block-column.empty { display: none; } } .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns .wp-block-column h2, .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns .wp-block-column h3, .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns .wp-block-column h2, .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns .wp-block-column h3 { margin: 0 0 8px; color: #1D1D1B; } .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns .wp-block-column h2, .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns .wp-block-column h2 { font-size: 30px; } @media screen and (max-width: 667px) { .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns .wp-block-column h2, .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns .wp-block-column h2 { font-size: 25px; } } .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns h3 + h4, .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns h3 + h4 { color: #1D1D1B; margin-top: 0; } .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns:nth-of-type(2) > div:nth-of-type(1), .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns:nth-of-type(2) > div:nth-of-type(1) { background: #6E2C76; } .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns:nth-of-type(2) > div:nth-of-type(1) > *, .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns:nth-of-type(2) > div:nth-of-type(1) > * { color: #fff; } .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns:nth-of-type(2) > div:nth-of-type(2), .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns:nth-of-type(2) > div:nth-of-type(2) { background: #ccecf2; } .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns:last-of-type > div:last-of-type, .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns:last-of-type > div:last-of-type { background: #61B86C; } .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns:last-of-type .wp-block-column.empty, .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns:last-of-type .wp-block-column.empty { background: #fff; } @media screen and (max-width: 600px) { .page-template-default:not(.page-about) .entry-content .projects .wp-block-columns:last-of-type .wp-block-column.empty, .page-template-default:not(.page-about) .entry-content .boxes .wp-block-columns:last-of-type .wp-block-column.empty { display: none; } } /* GENERAL LAYOUT / HEAD */ .page-services article .entry-header, .page-composters article .entry-header, .page-community article .entry-header, .page-consulting-engagement article .entry-header, .parent-pageid-7 article .entry-header { position: relative; margin-bottom: 0; } @media screen and (max-width: 667px) { .page-services article .entry-header, .page-composters article .entry-header, .page-community article .entry-header, .page-consulting-engagement article .entry-header, .parent-pageid-7 article .entry-header { grid-column: 1 / -1 !important; } } .page-services .entry-title, .page-composters .entry-title, .page-community .entry-title, .page-consulting-engagement .entry-title, .parent-pageid-7 .entry-title { position: absolute; top: 0; z-index: 10; } @media screen and (max-width: 667px) { .page-services .entry-title, .page-composters .entry-title, .page-community .entry-title, .page-consulting-engagement .entry-title, .parent-pageid-7 .entry-title { position: relative; width: 100%; } } .page-services .entry-content, .page-composters .entry-content, .page-community .entry-content, .page-consulting-engagement .entry-content, .parent-pageid-7 .entry-content { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; padding-bottom: 0; } @media screen and (min-width: 1200px) { .page-services .entry-content, .page-composters .entry-content, .page-community .entry-content, .page-consulting-engagement .entry-content, .parent-pageid-7 .entry-content { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .page-services .entry-content, .page-composters .entry-content, .page-community .entry-content, .page-consulting-engagement .entry-content, .parent-pageid-7 .entry-content { grid-column-gap: 50px; } } .page-services .entry-content .intro, .page-composters .entry-content .intro, .page-community .entry-content .intro, .page-consulting-engagement .entry-content .intro, .parent-pageid-7 .entry-content .intro { color: #fff; background: #037F8C url("img/pattern.svg") no-repeat center center; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; padding: 86px 0 53px; } @media screen and (min-width: 1200px) { .page-services .entry-content .intro, .page-composters .entry-content .intro, .page-community .entry-content .intro, .page-consulting-engagement .entry-content .intro, .parent-pageid-7 .entry-content .intro { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .page-services .entry-content .intro, .page-composters .entry-content .intro, .page-community .entry-content .intro, .page-consulting-engagement .entry-content .intro, .parent-pageid-7 .entry-content .intro { grid-column-gap: 50px; } } @media screen and (max-width: 667px) { .page-services .entry-content .intro, .page-composters .entry-content .intro, .page-community .entry-content .intro, .page-consulting-engagement .entry-content .intro, .parent-pageid-7 .entry-content .intro { padding: 30px 0 20px; } } .page-services .entry-content .intro .wp-block-group__inner-container, .page-composters .entry-content .intro .wp-block-group__inner-container, .page-community .entry-content .intro .wp-block-group__inner-container, .page-consulting-engagement .entry-content .intro .wp-block-group__inner-container, .parent-pageid-7 .entry-content .intro .wp-block-group__inner-container { grid-column: 2 / -2; } .page-services .entry-content .intro p, .page-composters .entry-content .intro p, .page-community .entry-content .intro p, .page-consulting-engagement .entry-content .intro p, .parent-pageid-7 .entry-content .intro p { font-size: 25px; font-family: "Volte", Arial, sans-serif; line-height: 128%; color: #fff; } @media screen and (max-width: 667px) { .page-services .entry-content .intro p, .page-composters .entry-content .intro p, .page-community .entry-content .intro p, .page-consulting-engagement .entry-content .intro p, .parent-pageid-7 .entry-content .intro p { font-family: "Volte-Semibold", Arial, sans-serif; font-weight: normal; font-size: 22px; } } .page-services .entry-content .intro + .wp-block-group.boxes, .page-composters .entry-content .intro + .wp-block-group.boxes, .page-community .entry-content .intro + .wp-block-group.boxes, .page-consulting-engagement .entry-content .intro + .wp-block-group.boxes, .parent-pageid-7 .entry-content .intro + .wp-block-group.boxes { margin-top: 45px; } @media screen and (max-width: 667px) { .page-services .entry-content .intro + .wp-block-group.boxes, .page-composters .entry-content .intro + .wp-block-group.boxes, .page-community .entry-content .intro + .wp-block-group.boxes, .page-consulting-engagement .entry-content .intro + .wp-block-group.boxes, .parent-pageid-7 .entry-content .intro + .wp-block-group.boxes { margin-top: 30px; } } .page-services .quote, .page-composters .quote, .page-community .quote, .page-consulting-engagement .quote, .parent-pageid-7 .quote { margin-top: 0; } .page-composters .entry-content .intro, .page-community .entry-content .intro { margin-bottom: 50px; } @media screen and (max-width: 667px) { .page-composters .entry-content .intro, .page-community .entry-content .intro { margin-bottom: 30px; } } .page-composters .quote, .page-community .quote { margin-top: 45px; } .page-consulting-engagement .button-section { grid-column: 2 / -2; padding: 30px 0; } .page-consulting-engagement .button-section .wp-block-button__link { border-radius: 0; color: #fff; font-weight: normal !important; font-family: "Volte-Semibold", Arial, sans-serif; font-size: 21px; background: #02A2BC; padding: 12px 16px 8px; text-align: center; -webkit-appearance: none; min-height: 42px; border: 0; border-bottom: 3px solid #0292a9; padding: 12px 16px 8px; } .page-consulting-engagement .button-section .wp-block-button__link:hover { cursor: pointer; background: #0292a9; color: #fff; } @media screen and (max-width: 667px) { .page-consulting-engagement .button-section .wp-block-button__link { font-size: 22px; } } .page-community .awards-wrapper { background: #6E2C76; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; padding: 40px 0 58px !important; margin: 40px 0; grid-column: 1 / -1; } @media screen and (min-width: 1200px) { .page-community .awards-wrapper { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .page-community .awards-wrapper { grid-column-gap: 50px; } } .page-community .awards-wrapper .wp-block-group__inner-container { grid-column: 2 / -2; display: grid; grid-template-columns: repeat(12, 1fr); grid-column-gap: 30px; grid-row-gap: 30px; /* see blocks.scss for the rest of this */ } .page-community .awards-wrapper .wp-block-group__inner-container h2, .page-community .awards-wrapper .wp-block-group__inner-container h3 { grid-column: 2 / -2; text-align: center; font-family: "Volte-Semibold", Arial, sans-serif; color: #fff; } .page-community .awards-wrapper .wp-block-group__inner-container h2 { font-size: 50px; margin-bottom: 12px; } .page-community .awards-wrapper .wp-block-group__inner-container h3 { font-size: 25px; margin-bottom: 20px; line-height: 130%; } .page-community .awards-wrapper .wp-block-group__inner-container .card { padding: 29px 22px 29px; } #search-form { position: relative; clear: both; height: 51px; width: 50%; min-width: 250px; } @media screen and (max-width: 320px) { #search-form { width: 100%; } } #search-form form { width: 100%; /* hide webkit search input fanciness */ } #search-form form label { position: absolute; left: -99999px; } #search-form form input.search-field { -webkit-border-radius: 4px !important; border-radius: 4px !important; background-clip: padding-box; /* stops bg color from leaking outside the border: */ border: 1px solid #ccc; height: 32px; width: 100%; padding-left: 30px; font-size: 16px; color: #555; -webkit-appearance: none; padding: 2px 0 2px 8px; /* check this on non-webkit browsers to make sure border appearance is correct */ } #search-form form input[type="search"]::-webkit-search-decoration, #search-form form input[type="search"]::-webkit-search-cancel-button, #search-form form input[type="search"]::-webkit-search-results-button, #search-form form input[type="search"]::-webkit-search-results-decoration { display: none; } #search-form form input[type="submit"] { /*font-family: "Font Awesome 5 Pro"; font-weight: 900;*/ /* as of April 2020, kits are not compatible with pseudo-elements if using SVG ... apparently */ font-size: 18px; color: transparent; -webkit-appearance: none; background: none; border: 0; position: absolute; right: 0; top: 2px; display: inline; padding: 0 !important; } #search-form form .fa-search { position: absolute; top: 6px; right: 6px; font-size: 21px; color: #333333; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } @media screen and (max-width: 667px) { #search-form form .fa-search { top: 9px; } } .search #banner-img, .page-template-search #banner-img { display: none; } .search article, .page-template-search article { display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; } @media screen and (min-width: 1200px) { .search article, .page-template-search article { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .search article, .page-template-search article { grid-column-gap: 50px; } } .search article .entry-header, .page-template-search article .entry-header { grid-column: 2 / -2 !important; } @media screen and (max-width: 667px) { .search article .entry-header, .page-template-search article .entry-header { grid-column: 1 / -1 !important; } } .search article .entry-header h1, .page-template-search article .entry-header h1 { display: none; } .search article .entry-content, .page-template-search article .entry-content { grid-column: 1 / -1; padding-bottom: 0; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; /* see https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/ */ } @media screen and (min-width: 1200px) { .search article .entry-content, .page-template-search article .entry-content { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .search article .entry-content, .page-template-search article .entry-content { grid-column-gap: 50px; } } .search article .entry-content > *, .page-template-search article .entry-content > * { grid-column: 2 / span 7; } @media screen and (max-width: 1024px) { .search article .entry-content > *, .page-template-search article .entry-content > * { grid-column: 2 / span 9; } } @media screen and (max-width: 768px) { .search article .entry-content > *, .page-template-search article .entry-content > * { grid-column: 2 / span 10; } } @media screen and (max-width: 667px) { .search article .entry-content > *, .page-template-search article .entry-content > * { grid-column: 2 / -2; } } .search article .entry-content h2, .page-template-search article .entry-content h2 { margin-top: 0; } .search article .entry-content .search-result-item, .page-template-search article .entry-content .search-result-item { border-bottom: 1px dotted #ccc; padding: 20px 0; } .search article .entry-content .search-result-item:last-of-type, .page-template-search article .entry-content .search-result-item:last-of-type { margin-bottom: 30px; } .search article .entry-content .search-result-item h3, .page-template-search article .entry-content .search-result-item h3 { margin: 0 0 8px; } .search article .entry-content .search-result-item h3 a, .page-template-search article .entry-content .search-result-item h3 a { border-bottom: 1px solid; } .search article #search-page-wizard-wrapper, .page-template-search article #search-page-wizard-wrapper { background: #61B86C url("img/wizard-banner-bg.svg") repeat-y center center; margin-top: 50px; padding-top: 40px; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; } @media screen and (min-width: 1200px) { .search article #search-page-wizard-wrapper, .page-template-search article #search-page-wizard-wrapper { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .search article #search-page-wizard-wrapper, .page-template-search article #search-page-wizard-wrapper { grid-column-gap: 50px; } } .search article #search-page-wizard-wrapper h3, .page-template-search article #search-page-wizard-wrapper h3 { color: #1D1D1B; margin-top: 0; } .search article #search-page-wizard, .page-template-search article #search-page-wizard { grid-column: 2 / -2; } .search .pagination, .page-template-search .pagination { grid-column: 2 / -2; background: #fff; padding: 0 0 25px; margin: 30px 0 40px; } .search .pagination .page-numbers, .search .pagination .next, .search .pagination .prev, .page-template-search .pagination .page-numbers, .page-template-search .pagination .next, .page-template-search .pagination .prev { font-size: 20px; margin-right: 10px; } .search #search-again, .page-template-search #search-again { grid-column: 2 / -2; margin-bottom: 20px; } .search #search-again p, .page-template-search #search-again p { font-size: 18px; font-weight: bold; margin-bottom: 10px; } #header-search-form { background: #F4B221; text-align: center; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; padding: 17px 0 0 0; } @media screen and (min-width: 1200px) { #header-search-form { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { #header-search-form { grid-column-gap: 50px; } } #header-search-form #search-form { margin: 0 auto; width: 100%; grid-column: 2 / -2; } @media screen and (min-width: 1200px) { #header-search-form #search-form { grid-column: 2 / -2; } } #header-search-form #search-form input.search-field { border: none !important; } #searchbtn { color: #333333; } @media screen and (max-width: 1024px) { #searchbtn { color: #333333; } } #searchbtn:hover { color: #02606E; cursor: pointer; } .page-recycle { background: #61B86C url("img/wizard-banner-bg.svg") repeat-y center center; } .page-recycle h1 { display: none; } #rCw { grid-column: 2 / -2; } #rCw .widget-header { background: #F4B221 !important; border-color: #F4B221 !important; } #rCw .widget-header h2#rCw-title.widget-title, #rCw .widget-header button { color: #1D1D1B !important; font-family: "Volte-Semibold", Arial, sans-serif; font-size: 17px !important; } #rCw .widget-box { border: none !important; border-bottom: 1px solid #ccc !important; margin-bottom: 0 !important; } #rCw .page-section-rows .page-row-content > * { font-family: "Assistant", Arial, sans-serif !important; } #rCw .form-group input.form-control { height: 41px; } #rCw .form-group .btn { border-radius: 0; color: #fff; font-weight: normal !important; font-family: "Volte-Semibold", Arial, sans-serif; font-size: 21px; background: #02A2BC; padding: 6px 16px 2px; text-align: center; -webkit-appearance: none; border: 0; border-bottom: 3px solid #0292a9; } #rCw .form-group .btn:hover { cursor: pointer; background: #0292a9; color: #fff; } @media screen and (max-width: 667px) { #rCw .form-group .btn { font-size: 22px; } } #rCw .rC-inside-footer span, #rCw .rC-mat-pow a, #rCw .rC-inside-footer a { font-family: "Assistant", Arial, sans-serif !important; font-size: 14px !important; color: #02606E !important; } #rCw .rC-inside-footer span:hover, #rCw .rC-inside-footer span a:hover, #rCw .rC-mat-pow a:hover, #rCw .rC-mat-pow a a:hover, #rCw .rC-inside-footer a:hover, #rCw .rC-inside-footer a a:hover { color: #02606E !important; } #rCw .rC-powered { margin-top: 0 !important; } #rCw .rC-mat-pow { padding-left: 5px !important; background: #fff; } #rCw .rC-mat-pow a { font-family: "Assistant", Arial, sans-serif !important; font-size: 15px !important; color: #02606E !important; } .wizard { display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; padding: 102px 0 90px; background: #61B86C url("img/wizard-banner-bg.svg") no-repeat center center; } @media screen and (min-width: 1200px) { .wizard { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .wizard { grid-column-gap: 50px; } } @media screen and (max-width: 1024px) { .wizard { background-size: cover; padding: 60px 0; } } @media screen and (max-width: 667px) { .wizard { padding: 40px 0; } } .wizard .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(12, 1fr); grid-column-gap: 20px; grid-column: 2 / -2; } @media screen and (min-width: 1200px) { .wizard .wp-block-group__inner-container { grid-column-gap: 50px; } } @media screen and (min-width: 1200px) { .wizard .wp-block-group__inner-container { padding: 0 50px; } } .wizard p { font-family: "Volte-Semibold", Arial, sans-serif; font-size: 32px !important; line-height: 125% !important; grid-column: 1 / span 8; color: #1D1D1B !important; } @media screen and (max-width: 667px) { .wizard p { grid-column: 1 / -1; font-size: 26px !important; } } .wizard strong { font-family: "Volte", Arial, sans-serif; } .wizard .wp-block-buttons { grid-column: 9 / span 4; padding-top: 24px; } .wizard .wp-block-buttons .wp-block-button { width: 100% !important; } .wizard .wp-block-buttons .wp-block-button__link { border-bottom: 3px solid #008540; width: 100%; line-height: 115%; font-size: 28px; padding: 22px 16px 18px; } .wizard .wp-block-buttons .wp-block-button__link:hover { background: #eff8f0 !important; } @media screen and (max-width: 667px) { .wizard .wp-block-buttons { grid-column: 1 / -1; } } /* Owl Carousel - Core */ .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; touch-action: manipulation; -moz-backface-visibility: hidden; /* fix firefox animation glitch */ } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .owl-carousel .owl-item img { display: block; width: 100%; } .owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled { display: none; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot { cursor: pointer; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot { background: none; color: inherit; border: none; padding: 0 !important; font: inherit; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel.owl-refresh .owl-item { visibility: hidden; } .owl-carousel.owl-drag .owl-item { touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* Owl Carousel - Animate Plugin */ .owl-carousel .animated { animation-duration: 1000ms; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { animation-name: fadeOut; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* Owl Carousel - Auto Height Plugin */ .owl-height { transition: height 500ms ease-in-out; } /* Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item { /** This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong calculation of the height of the owl-item that breaks page layouts */ } .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity 400ms ease; } .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) { max-height: 0; } .owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d; } /* Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform 100ms ease; } .owl-carousel .owl-video-play-icon:hover { transform: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; } /* Default theme - Owl Carousel CSS File */ .owl-theme .owl-nav { margin-top: 10px; text-align: center; -webkit-tap-highlight-color: transparent; } .owl-theme .owl-nav [class*='owl-'] { color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #D6D6D6; display: inline-block; cursor: pointer; border-radius: 3px; } .owl-theme .owl-nav [class*='owl-']:hover { background: #869791; color: #FFF; text-decoration: none; } .owl-theme .owl-nav .disabled { opacity: 0.5; cursor: default; } .owl-theme .owl-nav.disabled + .owl-dots { margin-top: 10px; } .owl-theme .owl-dots { text-align: center; -webkit-tap-highlight-color: transparent; } .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline; } .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: #D6D6D6; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border-radius: 30px; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #869791; } /* not in use? */ /*.learn { @include grid; grid-template-row: auto; height: 9000px; opacity: 0.5; z-index: 4000; /*max-width: $container;*!/ margin: 0 auto; clear: both; position: absolute; top: 0; display: none; div { background: #faebee; } .all { grid-row: 2 / -1; grid-column: 1 / span 12; background: purple; } }*/ body { width: 100%; line-height: 140%; } a { color: #02606E; } a:hover, a:focus { color: #025663; } h1, h2 { font-family: "Volte", Arial, sans-serif; } p { font-family: "Assistant", Arial, sans-serif; } .entry-content p a:not(.button), .entry-content li a:not(.button) { border-bottom: 1px solid; } section, footer { clear: both; } #masthead { display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; background: #F4B221; position: relative; height: 124px; } @media screen and (min-width: 1200px) { #masthead { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { #masthead { grid-column-gap: 50px; } } @media screen and (max-width: 667px) { #masthead { height: 80px; } } @media screen and (max-width: 320px) { #masthead { height: 70px; } } #masthead .site-header-main { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; /*@include grid fixes position of logo in Chrome but breaks menu location; changed above to 2 / -2 from 1 / -1; */ } @media screen and (min-width: 1200px) { #masthead .site-header-main { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { #masthead .site-header-main { grid-column-gap: 50px; } } #masthead .site-header-main .site-branding { grid-column: 2 / span 3; width: 20vw; height: 100%; /*height: 6vw;*/ max-width: 240px; background: url("img/RecyclingAlternative-logo.svg") no-repeat center center; background-size: 100%; position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 2; /* need to spec z-index and be lower than href because of absolute positioning in centrevertically. for link to work. */ /*margin-left: 30px;*/ } #masthead .site-header-main .site-branding a { display: block; width: 100%; height: 100%; z-index: 3; } @media screen and (max-width: 880px) { #masthead .site-header-main .site-branding { width: 30vw; } } @media screen and (max-width: 667px) { #masthead .site-header-main .site-branding { grid-column: 2 / -2; width: auto; max-width: 100%; top: 15px; left: 0px; right: 0px; transform: translateY(0); width: 160px; background-position: center top; } } @media screen and (max-width: 320px) { #masthead .site-header-main .site-branding { width: 130px; background-position: center top; top: 15px; } } #masthead .site-header-main #header-extras { grid-column: 11 / span 3; justify-content: end; padding-top: 15px; z-index: 10; } @media screen and (max-width: 880px) { #masthead .site-header-main #header-extras { grid-column: 9 / span 4; } } @media screen and (max-width: 667px) { #masthead .site-header-main #header-extras { margin-right: 32px; padding-top: 20px; } } #masthead .site-header-main #header-extras div { float: right; } #masthead .site-header-main #header-extras div.subscribe { font-size: 22px; font-family: "Volte-Semibold", Arial, sans-serif; font-variant: small-caps; letter-spacing: 0.02em; margin: 9px 24px 0 0; } #masthead .site-header-main #header-extras div.subscribe > * { color: #1D1D1B; } #masthead .site-header-main #header-extras div.subscribe a:hover { border-bottom: 1px solid; } #masthead .site-header-main #header-extras div.subscribe .far { vertical-align: middle; } @media screen and (max-width: 667px) { #masthead .site-header-main #header-extras div.subscribe { display: none; } } #masthead .site-header-main #header-extras div.search-button { margin-right: 3px; } @media screen and (max-width: 667px) { #masthead .site-header-main #header-extras div.search-button { margin-right: 0; } } #masthead .site-header-main #header-extras div.search-button .far { font-size: 19px; background: #fff; border-radius: 100%; padding: 9px; } #masthead .site-header-main #header-extras div.search-button .far.fa-times { padding: 10px 12px 8px; } /** navigation **/ .site-header-main .site-header-menu { /*position: relative; */ height: 124px; grid-column: 4 / span 10; justify-self: end; align-self: end; } .site-header-main nav { align-self: end; padding-top: 30px; } .site-header-main nav .nav-menu { float: right; } .site-header-main nav li { font-size: 22px; font-weight: 500; font-family: "Volte-Semibold", Arial, sans-serif; display: inline; margin-right: 25px; text-align: right; } .site-header-main nav li:last-child { margin-right: 0; } .site-header-main nav li a { color: #1D1D1B; } .site-header-main nav li a:hover { color: #fff; } @media screen and (max-width: 667px) { .site-header-main nav li { font-size: 19px; } } .site-header-main nav li.current-menu-item a { color: #fff; } .site-header-main nav ul.nav-menu > li { height: 51px; } .site-header-main nav ul.nav-menu > li.current-menu-ancestor > a, .site-header-main nav ul.nav-menu > li.current-menu-item > a, .site-header-main nav ul.nav-menu > li.current-menu-parent > a { color: #fff; background: #F4B221; } .site-header-main nav ul.nav-menu li { display: inline-block; /* submenu */ } .site-header-main nav ul.nav-menu li:hover > .submenu-wrapper { display: block; } .site-header-main nav ul.nav-menu li:hover #triangle-up { display: block; } .site-header-main nav ul.nav-menu li .submenu-wrapper { display: none; position: absolute; top: 102px; /*right: 0; left: 0; width: 100vw;*/ z-index: 99999; text-align: left; margin-top: 22px; padding: 36px 0 30px 9999px; margin-left: -9999px; /*in tandem with padding, creates full width bg */ height: auto; background: #f9c050; column-count: 2; column-gap: 60px; column-fill: auto; } .site-header-main nav ul.nav-menu li #triangle-up { display: none; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 15px solid #f9c050; position: relative; top: 5px; margin: 0 auto; z-index: 9999; } .site-header-main nav ul.nav-menu li ul.sub-menu li { padding-left: 0; padding-right: 0; margin-left: 0; line-height: 140%; display: inline-block; width: 100%; text-align: left; } .site-header-main nav ul.nav-menu li ul.sub-menu li { /*min-width: 250px;*/ width: 100%; /* 100% of column */ padding: 0 0 6px; } @media screen and (max-width: 880px) { .site-header-main nav ul.nav-menu li ul.sub-menu li { min-width: 100%; width: 100%; } } .site-header-main nav ul.nav-menu li ul.sub-menu li a { color: #1D1D1B; } .site-header-main nav ul.nav-menu li ul.sub-menu li.current-menu-item a { color: #1D1D1B; } .site-header-main nav ul.nav-menu li ul.sub-menu a { line-height: 135%; padding: 4px 0; width: auto; height: auto; font-size: 20px; font-family: "Volte-Semibold", Arial, sans-serif; } @media screen and (max-width: 880px) { .site-header-main nav ul.nav-menu li ul.sub-menu a { width: 100%; font-size: 16px; } } @media screen and (min-width: 881px) { .mobile-nav-toggle { display: none; } #mobilenav { display: none; } } @media screen and (max-width: 880px) { #site-navigation { display: none; /* hide desktop/ipad nav */ } .mobile-nav-toggle { display: block; position: absolute; top: 20px; right: 30px; z-index: 10; cursor: pointer; /* show mobile toggle */ } } @media screen and (max-width: 880px) and (max-width: 667px) { .mobile-nav-toggle { top: 24px; } } @media screen and (max-width: 880px) { .mobile-nav-toggle a { color: #1D1D1B; font-size: 30px; } #mobilenav { display: none; /* hide nav until toggled */ width: 100%; position: absolute; top: 124px; z-index: 99999; background: #F4B221; padding: 15px 30px 30px 30px; height: auto; min-height: 1px; clear: both; /* @include clearfix fixes height problem but then menu appears all the time; not compatible with display: none either before or after that */ } } @media screen and (max-width: 880px) and (max-width: 667px) { #mobilenav { top: 70px; padding-top: 25px; } } @media screen and (max-width: 880px) { #mobilenav .menu-desktop-menu-container { width: 100%; position: relative; } #mobilenav .nav-menu { float: none; position: relative; } #mobilenav .nav-menu li ul { display: none; } #mobilenav li { display: block; height: auto; margin-bottom: 26px; text-align: left; font-size: 23px; } #mobilenav li:last-child { margin-bottom: 0; } } .n2-ss-slide { background: url("img/pattern-slider.svg") no-repeat left top; background-size: 100%; } .newsletter { background: #ccecf2 url("img/pattern.svg") no-repeat center center; background-size: 100%; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; padding: 68px 0 74px; } @media screen and (min-width: 1200px) { .newsletter { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .newsletter { grid-column-gap: 50px; } } @media screen and (max-width: 667px) { .newsletter { padding: 50px 0 60px; } } .newsletter div { grid-column: 2 / -2; } .newsletter div .mc4wp-form-fields { width: auto; margin: 0 auto; text-align: center; } .newsletter div .mc4wp-form-fields > * { vertical-align: bottom; line-height: 20px; } .newsletter div label { position: absolute; left: -99999px; } .newsletter div .mc-field-group { width: 22.6666666667%; max-width: 272px; display: inline-block; margin-right: 13px; line-height: 20px; } .newsletter div .mc-field-group .mce_inline_error { font-family: "Assistant", Arial, sans-serif; } @media screen and (max-width: 667px) { .newsletter div .mc-field-group { max-width: 100%; display: block; width: 100%; margin-right: 0; margin-bottom: 15px; } } .newsletter div input.email, .newsletter div input.fname { width: 100%; height: 42px; border: none !important; border-radius: 0 !important; font-size: 20px; font-family: "Assistant", Arial, sans-serif; padding: 6px 6px 5px 8px; } .newsletter div .button { /*font-size: 21px; font-family: $voltesemi; padding: 13px 30px 12px; height: 42px; line-height: 20px; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; border-bottom: 3px solid #037f8c; width: auto; display: inline-block !important; background: $blue;*/ color: #1D1D1B; border-radius: 0; color: #fff; font-weight: normal !important; font-family: "Volte-Semibold", Arial, sans-serif; font-size: 21px; background: #02A2BC; padding: 12px 16px 8px; text-align: center; -webkit-appearance: none; min-height: 42px; border: 0; border-bottom: 3px solid #0292a9; padding: 12px 30px 11px; height: 42px; display: inline-block; /*vertical-align: bottom;*/ } .newsletter div .button:hover { cursor: pointer; background: #0292a9; color: #fff; } @media screen and (max-width: 667px) { .newsletter div .button { font-size: 22px; } } .newsletter div .button:hover { background: #037f8c; color: #fff; } @media screen and (max-width: 667px) { .newsletter div .button { margin-top: 8px; width: 100%; } } .newsletter h2 { grid-column: 2 / -2; text-align: center; padding-bottom: 31px; font-family: "Volte-Semibold", Arial, sans-serif; color: #333333; font-size: 24px; line-height: 130% !important; } .newsletter .mc4wp-alert { font-size: 18px; font-weight: bold; margin-top: 15px; } .newsletter .mc4wp-error { color: darkred; } .site-footer { background: #1D1D1B; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(12, minmax(0, 60px)) minmax(0px, 1fr); grid-column-gap: 20px; padding: 44px 0; } @media screen and (min-width: 1200px) { .site-footer { grid-template-columns: minmax(30px, 1fr) repeat(12, minmax(0, 50px)) minmax(30px, 1fr); } } @media screen and (min-width: 1200px) { .site-footer { grid-column-gap: 50px; } } .site-footer #footer-inner { grid-column: 2 / -2; display: grid; grid-template-columns: repeat(12, 1fr); grid-column-gap: 20px; /* awards */ } @media screen and (min-width: 1200px) { .site-footer #footer-inner { grid-column-gap: 50px; } } .site-footer #footer-inner .widget-wrapper.one { grid-column: auto / span 4; } .site-footer #footer-inner .widget-wrapper.two { grid-column: auto / span 3; } .site-footer #footer-inner .widget-wrapper.three { grid-column: auto / span 5; } @media screen and (min-width: 769px) and (max-width: 989px) { .site-footer #footer-inner .widget-wrapper.one, .site-footer #footer-inner .widget-wrapper.two { grid-column: auto / span 6; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #343432; } .site-footer #footer-inner .widget-wrapper.three { grid-column: 1 / -1; } } @media screen and (max-width: 768px) { .site-footer #footer-inner .widget-wrapper { grid-column: 1 / -1 !important; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #343432; } .site-footer #footer-inner .widget-wrapper:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } } @media screen and (max-width: 667px) { .site-footer #footer-inner .widget-wrapper { grid-column: 1 / -1 !important; } } .site-footer #footer-inner .widget h2 { font-family: "Volte", Arial, sans-serif; color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .site-footer #footer-inner .widget p, .site-footer #footer-inner .widget li { font-family: "Volte-Semibold", Arial, sans-serif; font-size: 19px; line-height: 135%; } @media screen and (max-width: 667px) { .site-footer #footer-inner .widget p, .site-footer #footer-inner .widget li { line-height: 160%; font-size: 20px; } } .site-footer #footer-inner .textwidget a { color: #F4B221; } .site-footer #footer-inner .textwidget a:hover { color: #61B86C; border-bottom: 1px solid; } .site-footer #footer-inner .textwidget p { color: #F4B221; margin-bottom: 10px; } .site-footer #footer-inner .textwidget .fas { color: #fff; margin-right: 4px; } .site-footer #footer-inner .textwidget .fas.fa-map-marker-alt { margin-right: 8px; } .site-footer #footer-inner .textwidget.custom-html-widget { margin-top: 25px; } .site-footer #footer-inner .textwidget.custom-html-widget a:hover { border-bottom: none !important; } .site-footer #footer-inner .textwidget.custom-html-widget a .fab:hover { color: #02A2BC; } .site-footer #footer-inner .textwidget.custom-html-widget .fab { color: #fff; margin-right: 15px; font-size: 32px; } .site-footer #footer-inner .menu li { margin-bottom: 6px; } @media screen and (max-width: 667px) { .site-footer #footer-inner .menu li { margin-bottom: 15px; } } .site-footer #footer-inner .menu li a { color: #04aebf; } .site-footer #footer-inner .menu li a:hover { color: #F4B221; border-bottom: 1px solid; } .site-footer #footer-inner .three .widget_black_studio_tinymce .textwidget { margin-bottom: 26px; } @media screen and (min-width: 990px) { .site-footer #footer-inner .three .widget_black_studio_tinymce .textwidget { display: flex; justify-content: space-between; align-items: flex-start; } } .site-footer #footer-inner .three .widget_black_studio_tinymce .textwidget a:hover { border-bottom: 0; } .site-footer #footer-inner .three .widget_black_studio_tinymce .textwidget img { height: 85px; width: auto; } @media screen and (max-width: 989px) { .site-footer #footer-inner .three .widget_black_studio_tinymce .textwidget img { height: 10vw; margin-right: 15px !important; margin-bottom: 10px; float: left; } } @media screen and (max-width: 667px) { .site-footer #footer-inner .three .widget_black_studio_tinymce .textwidget img { height: 15vw; } } .site-footer #footer-inner .three .widget_black_studio_tinymce .textwidget img:last-child { margin-right: 0; } .site-footer #footer-inner .three .widget_text .textwidget p { color: #fff; clear: both; } .site-footer #footer-inner .three .widget_text .textwidget a { color: #61B86C; border-bottom: 1px solid; } .site-footer #footer-inner .three .widget_text .textwidget a:hover { color: #F4B221; } .site-footer #footer-inner .three .credit { color: #dddddd; font-family: "Volte-Semibold", Arial, sans-serif; font-size: 15px; padding-top: 5px; border-top: 1px solid #343432; } .site-footer #footer-inner .three .credit a { color: #dddddd !important; } .site-footer #footer-inner .three .credit a:hover { color: #F4B221 !important; border-bottom: 1px solid !important; } .buorg { font-family: Assistant, Arial, sans-serif !important; } .buorg-buttons { padding-top: 8px; } #buorgul, #buorgig { color: #111 !important; font-family: Volte-Semibold, Arial, sans-serif !important; border-radius: 0 !important; box-shadow: none !important; } #buorgul { background: #61B86C !important; } #buorgig { background: #F4B221 !important; }