/** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ /** * Overwrite Core Block Styles */ .wp-block { max-width: none; } .container, .page__body .wp-block-button, .post__body .wp-block-button, #editor .wp-block-button { width: auto; max-width: 964px; margin-left: auto; margin-right: auto; padding-right: 20px; padding-left: 20px; } @media screen and (min-width: 1200px) { .container, .page__body .wp-block-button, .post__body .wp-block-button, #editor .wp-block-button { max-width: 1100px; } } .page__body .wp-block-embed-youtube, .post__body .wp-block-embed-youtube, #editor .wp-block-embed-youtube { max-width: 1100px; margin-left: auto; margin-right: auto; } .page__body .wp-block-table, .page__body .wp-block-embed, .post__body .wp-block-table, .post__body .wp-block-embed, #editor .wp-block-table, #editor .wp-block-embed { width: 95%; max-width: 1060px; margin-left: auto; margin-right: auto; } .page__body .wp-block-table, .post__body .wp-block-table, #editor .wp-block-table { margin-bottom: 1rem; } .page__body .wp-block-table th, .page__body .wp-block-table td, .post__body .wp-block-table th, .post__body .wp-block-table td, #editor .wp-block-table th, #editor .wp-block-table td { padding: .5em; } .page__body .wp-block-table tr:nth-child(even), .post__body .wp-block-table tr:nth-child(even), #editor .wp-block-table tr:nth-child(even) { background-color: #f8f8f8; } .page__body .wp-block-embed__wrapper, .post__body .wp-block-embed__wrapper, #editor .wp-block-embed__wrapper { position: relative; display: block; width: 100%; height: 0; padding-top: 56.25%; } .page__body .wp-block-embed iframe, .post__body .wp-block-embed iframe, #editor .wp-block-embed iframe { display: block; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .page__body .wp-block-gallery, .post__body .wp-block-gallery, #editor .wp-block-gallery { max-width: 100vw; width: 100%; padding: 0; -ms-flex-pack: center; justify-content: center; } .page__body .wp-block-gallery .blocks-gallery-item, .post__body .wp-block-gallery .blocks-gallery-item, #editor .wp-block-gallery .blocks-gallery-item { margin-bottom: 20px; } .page__body .wp-block-gallery .blocks-gallery-grid, .post__body .wp-block-gallery .blocks-gallery-grid, #editor .wp-block-gallery .blocks-gallery-grid { margin: 0 20px; } .page__body .wp-block-gallery.columns-2 .blocks-gallery-item, .post__body .wp-block-gallery.columns-2 .blocks-gallery-item, #editor .wp-block-gallery.columns-2 .blocks-gallery-item { width: calc(50% - 20px) !important; } .page__body .wp-block-gallery.columns-2 .blocks-gallery-item:nth-child(even), .post__body .wp-block-gallery.columns-2 .blocks-gallery-item:nth-child(even), #editor .wp-block-gallery.columns-2 .blocks-gallery-item:nth-child(even) { margin-right: 0 !important; } .page__body .wp-block-gallery.columns-3 .blocks-gallery-item, .post__body .wp-block-gallery.columns-3 .blocks-gallery-item, #editor .wp-block-gallery.columns-3 .blocks-gallery-item { width: calc(33.3333% - 20px) !important; } .page__body .wp-block-gallery.columns-3 .blocks-gallery-item:nth-child(3n), .post__body .wp-block-gallery.columns-3 .blocks-gallery-item:nth-child(3n), #editor .wp-block-gallery.columns-3 .blocks-gallery-item:nth-child(3n) { margin-right: 0 !important; } .page__body .wp-block-gallery.columns-4 .blocks-gallery-item, .post__body .wp-block-gallery.columns-4 .blocks-gallery-item, #editor .wp-block-gallery.columns-4 .blocks-gallery-item { width: calc(25% - 20px) !important; } .page__body .wp-block-gallery.columns-4 .blocks-gallery-item:nth-child(4n), .post__body .wp-block-gallery.columns-4 .blocks-gallery-item:nth-child(4n), #editor .wp-block-gallery.columns-4 .blocks-gallery-item:nth-child(4n) { margin-right: 0 !important; } body.mobile-safari-9 .page__body .wp-block-gallery, body.mobile-safari-9 .post__body .wp-block-gallery, body.mobile-safari-9 #editor .wp-block-gallery { display: block; } .page__body .blocks-gallery-item, .post__body .blocks-gallery-item, #editor .blocks-gallery-item { margin-right: 20px !important; } .page__body .blocks-gallery-item a:hover::after, .post__body .blocks-gallery-item a:hover::after, #editor .blocks-gallery-item a:hover::after { opacity: .75; } .page__body .blocks-gallery-item a::after, .post__body .blocks-gallery-item a::after, #editor .blocks-gallery-item a::after { content: "\f00e"; font-family: fontawesome; position: absolute; bottom: 20px; right: 20px; opacity: 0; color: #fff; -webkit-transition: opacity .2s ease-in; -o-transition: opacity .2s ease-in; transition: opacity .2s ease-in; font-size: 24px; pointer-events: none; } .page__body .blocks-gallery-item img, .post__body .blocks-gallery-item img, #editor .blocks-gallery-item img { margin: 0 !important; max-width: 100% !important; } .page__body .blocks-gallery-item figcaption, .post__body .blocks-gallery-item figcaption, #editor .blocks-gallery-item figcaption { pointer-events: none; } body.mobile-safari-9 .page__body .blocks-gallery-item, body.mobile-safari-9 .post__body .blocks-gallery-item, body.mobile-safari-9 #editor .blocks-gallery-item { display: block; width: 100%; } body.mobile-safari-9 .page__body .blocks-gallery-item figure, body.mobile-safari-9 .post__body .blocks-gallery-item figure, body.mobile-safari-9 #editor .blocks-gallery-item figure { display: block; } .page__body .wp-block[data-type="core/button"][data-align], .post__body .wp-block[data-type="core/button"][data-align], #editor .wp-block[data-type="core/button"][data-align] { height: auto; } .page__body .wp-block[data-type="core/button"][data-align] .editor-block-list__block-edit, .post__body .wp-block[data-type="core/button"][data-align] .editor-block-list__block-edit, #editor .wp-block[data-type="core/button"][data-align] .editor-block-list__block-edit { float: none !important; } .page__body .wp-block[data-type="core/button"][data-align].editor-block-list__layout .editor-block-list__block.is-selected > .editor-block-list__block-edit::before, .post__body .wp-block[data-type="core/button"][data-align].editor-block-list__layout .editor-block-list__block.is-selected > .editor-block-list__block-edit::before, #editor .wp-block[data-type="core/button"][data-align].editor-block-list__layout .editor-block-list__block.is-selected > .editor-block-list__block-edit::before { content: ""; } .page__body [class="wp-block-button"] .wp-block-button__link.has-background.has-maroon-background-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-background.has-maroon-background-color, #editor [class="wp-block-button"] .wp-block-button__link.has-background.has-maroon-background-color { background-color: #88153F; } .page__body [class="wp-block-button"] .wp-block-button__link.has-background.has-dark-maroon-background-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-background.has-dark-maroon-background-color, #editor [class="wp-block-button"] .wp-block-button__link.has-background.has-dark-maroon-background-color { background-color: #501E23; } .page__body [class="wp-block-button"] .wp-block-button__link.has-background.has-rose-background-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-background.has-rose-background-color, #editor [class="wp-block-button"] .wp-block-button__link.has-background.has-rose-background-color { background-color: #E6ACA9; } .page__body [class="wp-block-button"] .wp-block-button__link.has-background.has-light-rose-background-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-background.has-light-rose-background-color, #editor [class="wp-block-button"] .wp-block-button__link.has-background.has-light-rose-background-color { background-color: #F4E7E2; } .page__body [class="wp-block-button"] .wp-block-button__link.has-background.has-navy-background-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-background.has-navy-background-color, #editor [class="wp-block-button"] .wp-block-button__link.has-background.has-navy-background-color { background-color: #F4E7E2; } .page__body [class="wp-block-button"] .wp-block-button__link.has-background.has-blue-background-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-background.has-blue-background-color, #editor [class="wp-block-button"] .wp-block-button__link.has-background.has-blue-background-color { background-color: #266B90; } .page__body [class="wp-block-button"] .wp-block-button__link.has-background.has-light-blue-background-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-background.has-light-blue-background-color, #editor [class="wp-block-button"] .wp-block-button__link.has-background.has-light-blue-background-color { background-color: #A5C9DC; } .page__body [class="wp-block-button"] .wp-block-button__link.has-background.has-black-background-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-background.has-black-background-color, #editor [class="wp-block-button"] .wp-block-button__link.has-background.has-black-background-color { background-color: #1D1A1A; } .page__body [class="wp-block-button"] .wp-block-button__link.has-background.has-grey-background-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-background.has-grey-background-color, #editor [class="wp-block-button"] .wp-block-button__link.has-background.has-grey-background-color { background-color: #D8D8D8; } .page__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-maroon-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-maroon-color, #editor [class="wp-block-button"] .wp-block-button__link.has-text-color.has-maroon-color { color: #88153F; } .page__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-dark-maroon-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-dark-maroon-color, #editor [class="wp-block-button"] .wp-block-button__link.has-text-color.has-dark-maroon-color { color: #501E23; } .page__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-rose-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-rose-color, #editor [class="wp-block-button"] .wp-block-button__link.has-text-color.has-rose-color { color: #E6ACA9; } .page__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-light-rose-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-light-rose-color, #editor [class="wp-block-button"] .wp-block-button__link.has-text-color.has-light-rose-color { color: #F4E7E2; } .page__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-navy-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-navy-color, #editor [class="wp-block-button"] .wp-block-button__link.has-text-color.has-navy-color { color: #F4E7E2; } .page__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-blue-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-blue-color, #editor [class="wp-block-button"] .wp-block-button__link.has-text-color.has-blue-color { color: #266B90; } .page__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-light-blue-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-light-blue-color, #editor [class="wp-block-button"] .wp-block-button__link.has-text-color.has-light-blue-color { color: #A5C9DC; } .page__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-black-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-black-color, #editor [class="wp-block-button"] .wp-block-button__link.has-text-color.has-black-color { color: #1D1A1A; } .page__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-grey-color, .post__body [class="wp-block-button"] .wp-block-button__link.has-text-color.has-grey-color, #editor [class="wp-block-button"] .wp-block-button__link.has-text-color.has-grey-color { color: #D8D8D8; } .page__body .wp-block-button, .post__body .wp-block-button, #editor .wp-block-button { display: block; float: none !important; margin-bottom: 1.5em; padding: 0; } .page__body .wp-block-button.alignleft, .post__body .wp-block-button.alignleft, #editor .wp-block-button.alignleft { text-align: left; } .page__body .wp-block-button.aligncenter, .post__body .wp-block-button.aligncenter, #editor .wp-block-button.aligncenter { text-align: center; } .page__body .wp-block-button.alignright, .post__body .wp-block-button.alignright, #editor .wp-block-button.alignright { text-align: right; } .page__body .wp-block-button.is-style-border-primary .wp-block-button__link, .post__body .wp-block-button.is-style-border-primary .wp-block-button__link, #editor .wp-block-button.is-style-border-primary .wp-block-button__link { font-family: futura-pt, sans-serif; font-weight: 700; display: inline-block; text-transform: uppercase; border: 1px solid #501E23; padding: 17px 30px 17px 55px; color: #501E23 !important; background: transparent; border-radius: 0; position: relative; } .page__body .wp-block-button.is-style-border-primary .wp-block-button__link:hover, .post__body .wp-block-button.is-style-border-primary .wp-block-button__link:hover, #editor .wp-block-button.is-style-border-primary .wp-block-button__link:hover { background: #501E23; color: #fff !important; } .page__body .wp-block-button.is-style-border-primary .wp-block-button__link:before, .post__body .wp-block-button.is-style-border-primary .wp-block-button__link:before, #editor .wp-block-button.is-style-border-primary .wp-block-button__link:before { content: "\f067"; font-family: fontawesome; background-size: 100% 100%; width: 16px; height: 16px; display: block; position: absolute; left: 20px; top: calc(50% - 12px); } .page__body .wp-block-button.is-style-borderless-primary .wp-block-button__link, .post__body .wp-block-button.is-style-borderless-primary .wp-block-button__link, #editor .wp-block-button.is-style-borderless-primary .wp-block-button__link { font-family: futura-pt, sans-serif; font-weight: 700; display: inline-block; text-transform: uppercase; padding: 17px 30px 17px 55px; color: #501E23 !important; background: transparent; border-radius: 0; position: relative; } .page__body .wp-block-button.is-style-borderless-primary .wp-block-button__link:hover, .post__body .wp-block-button.is-style-borderless-primary .wp-block-button__link:hover, #editor .wp-block-button.is-style-borderless-primary .wp-block-button__link:hover { background: #501E23; color: #fff !important; } .page__body .wp-block-button.is-style-borderless-primary .wp-block-button__link:before, .post__body .wp-block-button.is-style-borderless-primary .wp-block-button__link:before, #editor .wp-block-button.is-style-borderless-primary .wp-block-button__link:before { content: "\f067"; font-family: fontawesome; background-size: 100% 100%; width: 16px; height: 16px; display: block; position: absolute; left: 20px; top: calc(50% - 12px); } .page__body .wp-block-button.is-style-border-secondary .wp-block-button__link, .post__body .wp-block-button.is-style-border-secondary .wp-block-button__link, #editor .wp-block-button.is-style-border-secondary .wp-block-button__link { font-family: futura-pt, sans-serif; font-weight: 700; display: inline-block; text-transform: uppercase; border: 1px solid #266B90; padding: 17px 30px 17px 55px; color: #266B90 !important; background: transparent; border-radius: 0; position: relative; } .page__body .wp-block-button.is-style-border-secondary .wp-block-button__link:hover, .post__body .wp-block-button.is-style-border-secondary .wp-block-button__link:hover, #editor .wp-block-button.is-style-border-secondary .wp-block-button__link:hover { background: #266B90; color: #fff !important; } .page__body .wp-block-button.is-style-border-secondary .wp-block-button__link:before, .post__body .wp-block-button.is-style-border-secondary .wp-block-button__link:before, #editor .wp-block-button.is-style-border-secondary .wp-block-button__link:before { content: "\f067"; font-family: fontawesome; background-size: 100% 100%; width: 16px; height: 16px; display: block; position: absolute; left: 20px; top: calc(50% - 12px); } .page__body .wp-block-button.is-style-borderless-secondary .wp-block-button__link, .post__body .wp-block-button.is-style-borderless-secondary .wp-block-button__link, #editor .wp-block-button.is-style-borderless-secondary .wp-block-button__link { font-family: futura-pt, sans-serif; font-weight: 700; display: inline-block; text-transform: uppercase; padding: 17px 30px 17px 55px; color: #266B90 !important; background: transparent; border-radius: 0; position: relative; } .page__body .wp-block-button.is-style-borderless-secondary .wp-block-button__link:hover, .post__body .wp-block-button.is-style-borderless-secondary .wp-block-button__link:hover, #editor .wp-block-button.is-style-borderless-secondary .wp-block-button__link:hover { background: #266B90; color: #fff !important; } .page__body .wp-block-button.is-style-borderless-secondary .wp-block-button__link:before, .post__body .wp-block-button.is-style-borderless-secondary .wp-block-button__link:before, #editor .wp-block-button.is-style-borderless-secondary .wp-block-button__link:before { content: "\f067"; font-family: fontawesome; background-size: 100% 100%; width: 16px; height: 16px; display: block; position: absolute; left: 20px; top: calc(50% - 12px); } .page__body .wp-block-button.is-style-border-white .wp-block-button__link, .post__body .wp-block-button.is-style-border-white .wp-block-button__link, #editor .wp-block-button.is-style-border-white .wp-block-button__link { font-family: futura-pt, sans-serif; font-weight: 700; display: inline-block; text-transform: uppercase; border: 1px solid #fff; padding: 17px 30px 17px 55px; color: #fff !important; background: transparent; border-radius: 0; position: relative; } .page__body .wp-block-button.is-style-border-white .wp-block-button__link:hover, .post__body .wp-block-button.is-style-border-white .wp-block-button__link:hover, #editor .wp-block-button.is-style-border-white .wp-block-button__link:hover { background: #fff; color: #fff !important; color: #501E23 !important; } .page__body .wp-block-button.is-style-border-white .wp-block-button__link:before, .post__body .wp-block-button.is-style-border-white .wp-block-button__link:before, #editor .wp-block-button.is-style-border-white .wp-block-button__link:before { content: "\f067"; font-family: fontawesome; background-size: 100% 100%; width: 16px; height: 16px; display: block; position: absolute; left: 20px; top: calc(50% - 12px); } .page__body .wp-block-button.is-style-borderless-white .wp-block-button__link, .post__body .wp-block-button.is-style-borderless-white .wp-block-button__link, #editor .wp-block-button.is-style-borderless-white .wp-block-button__link { font-family: futura-pt, sans-serif; font-weight: 700; display: inline-block; text-transform: uppercase; padding: 17px 30px 17px 55px; color: #fff !important; background: transparent; border-radius: 0; position: relative; } .page__body .wp-block-button.is-style-borderless-white .wp-block-button__link:hover, .post__body .wp-block-button.is-style-borderless-white .wp-block-button__link:hover, #editor .wp-block-button.is-style-borderless-white .wp-block-button__link:hover { background: #fff; color: #fff !important; color: #501E23 !important; } .page__body .wp-block-button.is-style-borderless-white .wp-block-button__link:before, .post__body .wp-block-button.is-style-borderless-white .wp-block-button__link:before, #editor .wp-block-button.is-style-borderless-white .wp-block-button__link:before { content: "\f067"; font-family: fontawesome; background-size: 100% 100%; width: 16px; height: 16px; display: block; position: absolute; left: 20px; top: calc(50% - 12px); } .page__body .wp-block-cover.has-maroon-background-color, .post__body .wp-block-cover.has-maroon-background-color, #editor .wp-block-cover.has-maroon-background-color { background-color: #88153F; } .page__body .wp-block-cover.has-dark-maroon-background-color, .post__body .wp-block-cover.has-dark-maroon-background-color, #editor .wp-block-cover.has-dark-maroon-background-color { background-color: #501E23; } .page__body .wp-block-cover.has-rose-background-color, .post__body .wp-block-cover.has-rose-background-color, #editor .wp-block-cover.has-rose-background-color { background-color: #E6ACA9; } .page__body .wp-block-cover.has-light-rose-background-color, .post__body .wp-block-cover.has-light-rose-background-color, #editor .wp-block-cover.has-light-rose-background-color { background-color: #F4E7E2; } .page__body .wp-block-cover.has-navy-background-color, .post__body .wp-block-cover.has-navy-background-color, #editor .wp-block-cover.has-navy-background-color { background-color: #F4E7E2; } .page__body .wp-block-cover.has-blue-background-color, .post__body .wp-block-cover.has-blue-background-color, #editor .wp-block-cover.has-blue-background-color { background-color: #266B90; } .page__body .wp-block-cover.has-light-blue-background-color, .post__body .wp-block-cover.has-light-blue-background-color, #editor .wp-block-cover.has-light-blue-background-color { background-color: #A5C9DC; } .page__body .wp-block-cover.has-black-background-color, .post__body .wp-block-cover.has-black-background-color, #editor .wp-block-cover.has-black-background-color { background-color: #1D1A1A; } .page__body .wp-block-cover.has-grey-background-color, .post__body .wp-block-cover.has-grey-background-color, #editor .wp-block-cover.has-grey-background-color { background-color: #D8D8D8; } .page__body .wp-block-pullquote.has-background.has-maroon-background-color, .post__body .wp-block-pullquote.has-background.has-maroon-background-color, #editor .wp-block-pullquote.has-background.has-maroon-background-color { background-color: #88153F; } .page__body .wp-block-pullquote.has-background.has-dark-maroon-background-color, .post__body .wp-block-pullquote.has-background.has-dark-maroon-background-color, #editor .wp-block-pullquote.has-background.has-dark-maroon-background-color { background-color: #501E23; } .page__body .wp-block-pullquote.has-background.has-rose-background-color, .post__body .wp-block-pullquote.has-background.has-rose-background-color, #editor .wp-block-pullquote.has-background.has-rose-background-color { background-color: #E6ACA9; } .page__body .wp-block-pullquote.has-background.has-light-rose-background-color, .post__body .wp-block-pullquote.has-background.has-light-rose-background-color, #editor .wp-block-pullquote.has-background.has-light-rose-background-color { background-color: #F4E7E2; } .page__body .wp-block-pullquote.has-background.has-navy-background-color, .post__body .wp-block-pullquote.has-background.has-navy-background-color, #editor .wp-block-pullquote.has-background.has-navy-background-color { background-color: #F4E7E2; } .page__body .wp-block-pullquote.has-background.has-blue-background-color, .post__body .wp-block-pullquote.has-background.has-blue-background-color, #editor .wp-block-pullquote.has-background.has-blue-background-color { background-color: #266B90; } .page__body .wp-block-pullquote.has-background.has-light-blue-background-color, .post__body .wp-block-pullquote.has-background.has-light-blue-background-color, #editor .wp-block-pullquote.has-background.has-light-blue-background-color { background-color: #A5C9DC; } .page__body .wp-block-pullquote.has-background.has-black-background-color, .post__body .wp-block-pullquote.has-background.has-black-background-color, #editor .wp-block-pullquote.has-background.has-black-background-color { background-color: #1D1A1A; } .page__body .wp-block-pullquote.has-background.has-grey-background-color, .post__body .wp-block-pullquote.has-background.has-grey-background-color, #editor .wp-block-pullquote.has-background.has-grey-background-color { background-color: #D8D8D8; } .page__body .wp-block-pullquote.has-text-color.has-maroon-color, .post__body .wp-block-pullquote.has-text-color.has-maroon-color, #editor .wp-block-pullquote.has-text-color.has-maroon-color { color: #88153F; } .page__body .wp-block-pullquote.has-text-color.has-dark-maroon-color, .post__body .wp-block-pullquote.has-text-color.has-dark-maroon-color, #editor .wp-block-pullquote.has-text-color.has-dark-maroon-color { color: #501E23; } .page__body .wp-block-pullquote.has-text-color.has-rose-color, .post__body .wp-block-pullquote.has-text-color.has-rose-color, #editor .wp-block-pullquote.has-text-color.has-rose-color { color: #E6ACA9; } .page__body .wp-block-pullquote.has-text-color.has-light-rose-color, .post__body .wp-block-pullquote.has-text-color.has-light-rose-color, #editor .wp-block-pullquote.has-text-color.has-light-rose-color { color: #F4E7E2; } .page__body .wp-block-pullquote.has-text-color.has-navy-color, .post__body .wp-block-pullquote.has-text-color.has-navy-color, #editor .wp-block-pullquote.has-text-color.has-navy-color { color: #F4E7E2; } .page__body .wp-block-pullquote.has-text-color.has-blue-color, .post__body .wp-block-pullquote.has-text-color.has-blue-color, #editor .wp-block-pullquote.has-text-color.has-blue-color { color: #266B90; } .page__body .wp-block-pullquote.has-text-color.has-light-blue-color, .post__body .wp-block-pullquote.has-text-color.has-light-blue-color, #editor .wp-block-pullquote.has-text-color.has-light-blue-color { color: #A5C9DC; } .page__body .wp-block-pullquote.has-text-color.has-black-color, .post__body .wp-block-pullquote.has-text-color.has-black-color, #editor .wp-block-pullquote.has-text-color.has-black-color { color: #1D1A1A; } .page__body .wp-block-pullquote.has-text-color.has-grey-color, .post__body .wp-block-pullquote.has-text-color.has-grey-color, #editor .wp-block-pullquote.has-text-color.has-grey-color { color: #D8D8D8; } .page__body .wp-block-cover + div, .post__body .wp-block-cover + div, #editor .wp-block-cover + div { margin-top: 20px; } .page__body hr.is-style-blue-squiggle, .post__body hr.is-style-blue-squiggle, #editor hr.is-style-blue-squiggle { background: url(../images/icons/blue-squiggle.svg) no-repeat; width: 73px; height: 14px; background-size: 100%; border: 0; } .page__body hr.is-style-dark-blue-squiggle, .post__body hr.is-style-dark-blue-squiggle, #editor hr.is-style-dark-blue-squiggle { background: url(../images/icons/dark-blue-squiggle.svg) no-repeat; width: 73px; height: 14px; background-size: 100%; border: 0; } .page__body hr.is-style-rose-squiggle, .post__body hr.is-style-rose-squiggle, #editor hr.is-style-rose-squiggle { background: url(../images/icons/rose-squiggle.svg) no-repeat; width: 73px; height: 14px; background-size: 100%; border: 0; } .page__body ul.is-style-triangle-bullets, .post__body ul.is-style-triangle-bullets, #editor ul.is-style-triangle-bullets { margin-left: 0; padding-left: 0; list-style-type: none; } .page__body ul.is-style-triangle-bullets li, .post__body ul.is-style-triangle-bullets li, #editor ul.is-style-triangle-bullets li { list-style-type: none; } .page__body ul.is-style-triangle-bullets li:before, .post__body ul.is-style-triangle-bullets li:before, #editor ul.is-style-triangle-bullets li:before { content: " "; margin-right: 15px; display: inline-block; border-style: solid; border-width: 0px 0px 13px 13px; border-color: transparent transparent #E6ACA9 transparent; } .page__body p.is-style-highlighted, .post__body p.is-style-highlighted, #editor p.is-style-highlighted { font-size: 20px; font-style: italic; } .page__body p.has-text-color.has-maroon-color, .post__body p.has-text-color.has-maroon-color, #editor p.has-text-color.has-maroon-color { color: #88153F; } .page__body p.has-text-color.has-dark-maroon-color, .post__body p.has-text-color.has-dark-maroon-color, #editor p.has-text-color.has-dark-maroon-color { color: #501E23; } .page__body p.has-text-color.has-rose-color, .post__body p.has-text-color.has-rose-color, #editor p.has-text-color.has-rose-color { color: #E6ACA9; } .page__body p.has-text-color.has-light-rose-color, .post__body p.has-text-color.has-light-rose-color, #editor p.has-text-color.has-light-rose-color { color: #F4E7E2; } .page__body p.has-text-color.has-navy-color, .post__body p.has-text-color.has-navy-color, #editor p.has-text-color.has-navy-color { color: #F4E7E2; } .page__body p.has-text-color.has-blue-color, .post__body p.has-text-color.has-blue-color, #editor p.has-text-color.has-blue-color { color: #266B90; } .page__body p.has-text-color.has-light-blue-color, .post__body p.has-text-color.has-light-blue-color, #editor p.has-text-color.has-light-blue-color { color: #A5C9DC; } .page__body p.has-text-color.has-black-color, .post__body p.has-text-color.has-black-color, #editor p.has-text-color.has-black-color { color: #1D1A1A; } .page__body p.has-text-color.has-grey-color, .post__body p.has-text-color.has-grey-color, #editor p.has-text-color.has-grey-color { color: #D8D8D8; } .page__body h1.has-text-color.has-maroon-color, .page__body h2.has-text-color.has-maroon-color, .page__body h3.has-text-color.has-maroon-color, .page__body h4.has-text-color.has-maroon-color, .page__body h5.has-text-color.has-maroon-color, .page__body h6.has-text-color.has-maroon-color, .post__body h1.has-text-color.has-maroon-color, .post__body h2.has-text-color.has-maroon-color, .post__body h3.has-text-color.has-maroon-color, .post__body h4.has-text-color.has-maroon-color, .post__body h5.has-text-color.has-maroon-color, .post__body h6.has-text-color.has-maroon-color, #editor h1.has-text-color.has-maroon-color, #editor h2.has-text-color.has-maroon-color, #editor h3.has-text-color.has-maroon-color, #editor h4.has-text-color.has-maroon-color, #editor h5.has-text-color.has-maroon-color, #editor h6.has-text-color.has-maroon-color { color: #88153F; } .page__body h1.has-text-color.has-dark-maroon-color, .page__body h2.has-text-color.has-dark-maroon-color, .page__body h3.has-text-color.has-dark-maroon-color, .page__body h4.has-text-color.has-dark-maroon-color, .page__body h5.has-text-color.has-dark-maroon-color, .page__body h6.has-text-color.has-dark-maroon-color, .post__body h1.has-text-color.has-dark-maroon-color, .post__body h2.has-text-color.has-dark-maroon-color, .post__body h3.has-text-color.has-dark-maroon-color, .post__body h4.has-text-color.has-dark-maroon-color, .post__body h5.has-text-color.has-dark-maroon-color, .post__body h6.has-text-color.has-dark-maroon-color, #editor h1.has-text-color.has-dark-maroon-color, #editor h2.has-text-color.has-dark-maroon-color, #editor h3.has-text-color.has-dark-maroon-color, #editor h4.has-text-color.has-dark-maroon-color, #editor h5.has-text-color.has-dark-maroon-color, #editor h6.has-text-color.has-dark-maroon-color { color: #501E23; } .page__body h1.has-text-color.has-rose-color, .page__body h2.has-text-color.has-rose-color, .page__body h3.has-text-color.has-rose-color, .page__body h4.has-text-color.has-rose-color, .page__body h5.has-text-color.has-rose-color, .page__body h6.has-text-color.has-rose-color, .post__body h1.has-text-color.has-rose-color, .post__body h2.has-text-color.has-rose-color, .post__body h3.has-text-color.has-rose-color, .post__body h4.has-text-color.has-rose-color, .post__body h5.has-text-color.has-rose-color, .post__body h6.has-text-color.has-rose-color, #editor h1.has-text-color.has-rose-color, #editor h2.has-text-color.has-rose-color, #editor h3.has-text-color.has-rose-color, #editor h4.has-text-color.has-rose-color, #editor h5.has-text-color.has-rose-color, #editor h6.has-text-color.has-rose-color { color: #E6ACA9; } .page__body h1.has-text-color.has-light-rose-color, .page__body h2.has-text-color.has-light-rose-color, .page__body h3.has-text-color.has-light-rose-color, .page__body h4.has-text-color.has-light-rose-color, .page__body h5.has-text-color.has-light-rose-color, .page__body h6.has-text-color.has-light-rose-color, .post__body h1.has-text-color.has-light-rose-color, .post__body h2.has-text-color.has-light-rose-color, .post__body h3.has-text-color.has-light-rose-color, .post__body h4.has-text-color.has-light-rose-color, .post__body h5.has-text-color.has-light-rose-color, .post__body h6.has-text-color.has-light-rose-color, #editor h1.has-text-color.has-light-rose-color, #editor h2.has-text-color.has-light-rose-color, #editor h3.has-text-color.has-light-rose-color, #editor h4.has-text-color.has-light-rose-color, #editor h5.has-text-color.has-light-rose-color, #editor h6.has-text-color.has-light-rose-color { color: #F4E7E2; } .page__body h1.has-text-color.has-navy-color, .page__body h2.has-text-color.has-navy-color, .page__body h3.has-text-color.has-navy-color, .page__body h4.has-text-color.has-navy-color, .page__body h5.has-text-color.has-navy-color, .page__body h6.has-text-color.has-navy-color, .post__body h1.has-text-color.has-navy-color, .post__body h2.has-text-color.has-navy-color, .post__body h3.has-text-color.has-navy-color, .post__body h4.has-text-color.has-navy-color, .post__body h5.has-text-color.has-navy-color, .post__body h6.has-text-color.has-navy-color, #editor h1.has-text-color.has-navy-color, #editor h2.has-text-color.has-navy-color, #editor h3.has-text-color.has-navy-color, #editor h4.has-text-color.has-navy-color, #editor h5.has-text-color.has-navy-color, #editor h6.has-text-color.has-navy-color { color: #F4E7E2; } .page__body h1.has-text-color.has-blue-color, .page__body h2.has-text-color.has-blue-color, .page__body h3.has-text-color.has-blue-color, .page__body h4.has-text-color.has-blue-color, .page__body h5.has-text-color.has-blue-color, .page__body h6.has-text-color.has-blue-color, .post__body h1.has-text-color.has-blue-color, .post__body h2.has-text-color.has-blue-color, .post__body h3.has-text-color.has-blue-color, .post__body h4.has-text-color.has-blue-color, .post__body h5.has-text-color.has-blue-color, .post__body h6.has-text-color.has-blue-color, #editor h1.has-text-color.has-blue-color, #editor h2.has-text-color.has-blue-color, #editor h3.has-text-color.has-blue-color, #editor h4.has-text-color.has-blue-color, #editor h5.has-text-color.has-blue-color, #editor h6.has-text-color.has-blue-color { color: #266B90; } .page__body h1.has-text-color.has-light-blue-color, .page__body h2.has-text-color.has-light-blue-color, .page__body h3.has-text-color.has-light-blue-color, .page__body h4.has-text-color.has-light-blue-color, .page__body h5.has-text-color.has-light-blue-color, .page__body h6.has-text-color.has-light-blue-color, .post__body h1.has-text-color.has-light-blue-color, .post__body h2.has-text-color.has-light-blue-color, .post__body h3.has-text-color.has-light-blue-color, .post__body h4.has-text-color.has-light-blue-color, .post__body h5.has-text-color.has-light-blue-color, .post__body h6.has-text-color.has-light-blue-color, #editor h1.has-text-color.has-light-blue-color, #editor h2.has-text-color.has-light-blue-color, #editor h3.has-text-color.has-light-blue-color, #editor h4.has-text-color.has-light-blue-color, #editor h5.has-text-color.has-light-blue-color, #editor h6.has-text-color.has-light-blue-color { color: #A5C9DC; } .page__body h1.has-text-color.has-black-color, .page__body h2.has-text-color.has-black-color, .page__body h3.has-text-color.has-black-color, .page__body h4.has-text-color.has-black-color, .page__body h5.has-text-color.has-black-color, .page__body h6.has-text-color.has-black-color, .post__body h1.has-text-color.has-black-color, .post__body h2.has-text-color.has-black-color, .post__body h3.has-text-color.has-black-color, .post__body h4.has-text-color.has-black-color, .post__body h5.has-text-color.has-black-color, .post__body h6.has-text-color.has-black-color, #editor h1.has-text-color.has-black-color, #editor h2.has-text-color.has-black-color, #editor h3.has-text-color.has-black-color, #editor h4.has-text-color.has-black-color, #editor h5.has-text-color.has-black-color, #editor h6.has-text-color.has-black-color { color: #1D1A1A; } .page__body h1.has-text-color.has-grey-color, .page__body h2.has-text-color.has-grey-color, .page__body h3.has-text-color.has-grey-color, .page__body h4.has-text-color.has-grey-color, .page__body h5.has-text-color.has-grey-color, .page__body h6.has-text-color.has-grey-color, .post__body h1.has-text-color.has-grey-color, .post__body h2.has-text-color.has-grey-color, .post__body h3.has-text-color.has-grey-color, .post__body h4.has-text-color.has-grey-color, .post__body h5.has-text-color.has-grey-color, .post__body h6.has-text-color.has-grey-color, #editor h1.has-text-color.has-grey-color, #editor h2.has-text-color.has-grey-color, #editor h3.has-text-color.has-grey-color, #editor h4.has-text-color.has-grey-color, #editor h5.has-text-color.has-grey-color, #editor h6.has-text-color.has-grey-color { color: #D8D8D8; } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ /** * #.# Styles * * CSS for both Frontend+Backend. */ .heading { text-align: center; } .heading__subhead { margin-bottom: 20px; font-family: futura-pt, sans-serif; } .is-style-sans .heading__headline { font-family: futura-pt, sans-serif; font-style: normal; } .heading--left { text-align: left; } .heading--right { text-align: right; } .headline { font-family: Lora, serif; font-style: italic; font-size: 30px; } .headline--white { color: #fff; } @media screen and (min-width: 768px) { .headline { font-size: 36px; } } .subhead { font-size: 16px; color: #501E23; } .subhead__main { text-transform: uppercase; display: block; margin-bottom: 10px; font-family: futura-pt, sans-serif; } .subhead__main:after { content: " "; width: 50px; border-bottom: 3px solid #501E23; display: inline-block; margin: 0 10px; } @media screen and (min-width: 768px) { .subhead__main { display: inline-block; font-size: 18px; margin-bottom: 0; } .subhead__main:after { display: none; } } .subhead__description { font-family: Lora, serif; font-style: italic; text-transform: none; } @media screen and (min-width: 768px) { .subhead__description:before { content: " "; width: 50px; border-bottom: 3px solid #501E23; display: inline-block; margin: 0 10px; } } .subhead--blue .subhead__main, .subhead--blue .subhead__description { color: #266B90; } .subhead--blue .subhead__main:after, .subhead--blue .subhead__main:before, .subhead--blue .subhead__description:after, .subhead--blue .subhead__description:before { border-color: #266B90; } .subhead--white .subhead__main, .subhead--white .subhead__description { color: #fff; } .subhead--white .subhead__main:after, .subhead--white .subhead__main:before, .subhead--white .subhead__description:after, .subhead--white .subhead__description:before { border-color: #fff; } .subhead--rose .subhead__main, .subhead--rose .subhead__description { color: #E6ACA9; } .subhead--rose .subhead__main:after, .subhead--rose .subhead__main:before, .subhead--rose .subhead__description:after, .subhead--rose .subhead__description:before { border-color: #E6ACA9; } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ /** * #.# Styles * * CSS for both Frontend+Backend. */ .hero { min-height: 300px; background: #88153F; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; color: #fff; background-position: center center; background-size: cover; padding: 20px; position: relative; -webkit-filter: sepia(30%); filter: sepia(30%); } .hero--screen-light:before { background: rgba(131, 21, 61, 0.1); } .hero--screen-standard:before { background: rgba(131, 21, 61, 0.3); } .hero--screen-dark:before { background: rgba(131, 21, 61, 0.5); } .hero:before { content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; } .hero:after { content: " "; width: 100%; height: 100%; position: absolute; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(22%, rgba(255, 255, 255, 0)), to(rgba(131, 21, 61, 0.7))); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 22%, rgba(131, 21, 61, 0.7) 100%); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 22%, rgba(131, 21, 61, 0.7) 100%); background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 22%, rgba(131, 21, 61, 0.7) 100%); top: 0; left: 0; z-index: 1; } .hero .container { z-index: 2; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; width: 100%; } .hero--align-left .container { -ms-flex-align: start; align-items: flex-start; } .hero--align-center .wp-block-button { margin-left: auto; margin-right: auto; } @media screen and (min-width: 768px) { .hero { min-height: 400px; } } @media screen and (min-width: 1024px) { .hero { min-height: 540px; } .ie .hero { height: 540px; } } .hero__title { margin-bottom: 5px !important; z-index: 1; font-family: futura-pt, sans-serif; color: #fff; font-weight: 400; font-size: 36px !important; } .hero--align-center .hero__title { text-align: center; } @media screen and (min-width: 768px) { .hero__title { font-size: 48px !important; } } @media screen and (min-width: 1024px) { .hero__title { font-size: 58px !important; margin-bottom: 10px !important; } } .hero__description { font-size: 18px; max-width: 700px; z-index: 1; color: #fff !important; } .hero--align-center .hero__description { text-align: center; } @media screen and (min-width: 768px) { .hero__description { font-size: 21px; } } @media screen and (min-width: 1024px) { .hero__description { font-size: 24px; } } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ .hero-nav .wp-block-columns { -ms-flex-direction: column; flex-direction: column; max-width: 100vw !important; padding-left: 0 !important; padding-right: 0 !important; } @media screen and (min-width: 768px) { .hero-nav .wp-block-columns { -ms-flex-pack: justify; justify-content: space-between; } } @media screen and (min-width: 1024px) { .hero-nav .wp-block-columns { -ms-flex-direction: row; flex-direction: row; } } .hero-nav .wp-block-columns .wp-block-column { width: 100%; margin: 0; position: relative; } @media screen and (min-width: 1024px) { .hero-nav .wp-block-columns .wp-block-column { width: calc(50% - 5px); -ms-flex-preferred-size: calc(50% - 5px); flex-basis: calc(50% - 5px); } } .hero-nav .wp-block-columns .wp-block-column:first-child { margin-bottom: 10px; } .hero-nav .wp-block-columns .wp-block-column:first-child:before { background: url(../images/patterns/large/white-semicircles-1.svg) no-repeat; background-size: 100%; content: " "; width: 275px; height: 213px; position: absolute; top: -3px; left: 0; z-index: 1; opacity: .5; } @media screen and (min-width: 768px) { .hero-nav .wp-block-columns .wp-block-column:first-child:before { opacity: .8; } } @media screen and (min-width: 1024px) { .hero-nav .wp-block-columns .wp-block-column:first-child .hero { -ms-flex-align: end; align-items: flex-end; } .hero-nav .wp-block-columns .wp-block-column:first-child .hero .container { padding: 0 80px 0 0; } } .hero-nav .wp-block-columns .wp-block-column:last-child:before { background: url(../images/patterns/large/white-semicircles-2.svg) no-repeat; background-size: 100%; content: " "; width: 248px; height: 229px; position: absolute; bottom: 0; right: 0; z-index: 1; opacity: .5; } @media screen and (min-width: 768px) { .hero-nav .wp-block-columns .wp-block-column:last-child:before { opacity: .8; } } .hero-nav .wp-block-columns .hero { height: calc(50vh - 45px); } @media screen and (min-width: 1024px) { .hero-nav .wp-block-columns .hero { height: calc(100vh - 140px); min-height: 500px; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-align: start; align-items: flex-start; padding: 40px 0; } } .hero-nav .wp-block-columns .hero .container :last-child { margin-bottom: 0; } @media screen and (min-width: 1024px) { .hero-nav .wp-block-columns .hero .container { max-width: 480px; margin-left: 0; margin-right: 0; padding: 0 0 0 80px; } } @media screen and (min-width: 1200px) { .hero-nav .wp-block-columns .hero .container { max-width: 550px; margin-left: 0; margin-right: 0; padding: 0 0 0 80px; } } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ /** * #.# Styles * * CSS for both Frontend+Backend. */ .overlapping-split { display: -ms-flexbox; display: flex; position: relative; -ms-flex-direction: column; flex-direction: column; max-width: 95%; margin-left: auto; margin-right: auto; } @media screen and (min-width: 768px) { .overlapping-split { display: block; max-width: 1280px; margin: 20px auto; padding: 30px 20px; } } @media screen and (min-width: 1024px) { .overlapping-split { margin: 50px auto; } } .overlapping-split__col { width: 100%; } .overlapping-split__copy { position: relative; left: 0; z-index: 1; padding: 20px; border: 6px solid #FAECEB; background: #fff; margin: -30px auto 0 auto; -ms-flex-order: 1; order: 1; width: 90%; } .overlapping-split__copy .heading { padding: 0; } @media screen and (min-width: 768px) { .overlapping-split__copy { width: 55%; left: 0; margin: 0; padding: 40px 80px; } } .overlapping-split__image { background-size: cover; height: 0; padding-bottom: 100%; width: 100%; -ms-flex-order: 0; order: 0; background-color: #ccc; } @media screen and (min-width: 768px) { .overlapping-split__image { padding-bottom: 0; height: calc(100%); width: 50%; position: absolute; z-index: 0; right: 20px; top: 0px; } } @media screen and (min-width: 768px) { .overlapping-split--reverse .overlapping-split__image { left: 20px; right: inherit; } .overlapping-split--reverse .overlapping-split__copy { left: 45%; } } .overlapping-split--blue .overlapping-split__copy { border: 6px solid #A5C9DC; } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ /** * #.# Styles * * CSS for both Frontend+Backend. */ .split { display: -ms-flexbox; display: flex; position: relative; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 768px) { .split { -ms-flex-direction: row; flex-direction: row; } } .split__col { width: 100%; } @media screen and (min-width: 768px) { .split__col { width: 50%; -ms-flex-align: stretch; align-items: stretch; } } .split__copy { position: relative; padding: 40px; background: #fff; -ms-flex-order: 1; order: 1; } .split__copy .heading { padding: 0; text-align: left; } @media screen and (min-width: 768px) { .split__copy { -ms-flex-order: 0; order: 0; display: -ms-flexbox; display: flex; -ms-flex-pack: end; justify-content: flex-end; padding: 40px; } } .split__copy--center { text-align: center; } .split__copy--center .heading { text-align: center; } .split__copy--center .wp-block-button { margin: 0 auto; } @media screen and (min-width: 1024px) { .split__copy-wrapper { position: relative; right: -40px; width: 550px; padding: 70px 160px 70px 0; } } .split__image { display: block; background-size: cover; background-position: center; height: 200px; width: 100%; -ms-flex-order: 0; order: 0; background-color: #ccc; } @media screen and (min-width: 768px) { .split__image { -ms-flex-order: 1; order: 1; width: 50%; height: auto; } } @media screen and (min-width: 768px) { .split--reverse .split__image { -ms-flex-order: 0; order: 0; } .split--reverse .split__copy { -ms-flex-order: 1; order: 1; -ms-flex-pack: start; justify-content: flex-start; } } @media screen and (min-width: 1024px) { .split--reverse .split__copy-wrapper { padding: 70px 0px 70px 160px; left: -40px; right: initial; } } .split--blue .split__copy { background: #266B90; } .split--blue .split__copy p, .split--blue .split__copy h1, .split--blue .split__copy h2, .split--blue .split__copy h3, .split--blue .split__copy h4, .split--blue .split__copy h5, .split--blue .split__copy h6, .split--blue .split__copy ul, .split--blue .split__copy em, .split--blue .split__copy i, .split--blue .split__copy p, .split--blue .split__copy strong { color: #fff; } .split--blue .split__copy .subhead__main::after, .split--blue .split__copy .subhead__description::before { border-color: #fff; } .split--maroon .split__copy { background: #F8EFEC; } .split--maroon .split__copy h1, .split--maroon .split__copy h2, .split--maroon .split__copy h3, .split--maroon .split__copy h4, .split--maroon .split__copy h5, .split--maroon .split__copy h6 { color: #88153F; } .split--maroon .split__copy ul, .split--maroon .split__copy em, .split--maroon .split__copy i, .split--maroon .split__copy p, .split--maroon .split__copy strong { color: #293B44; } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ /** * #.# Styles * * CSS for both Frontend+Backend. */ .decorations-wrapper { overflow: hidden; position: relative; padding: 20px; } .decorations-wrapper--extra-padding .decorations-wrapper__content { padding: 50px 20px; } .decorations-wrapper--no-padding { padding: 0; } @media screen and (min-width: 1024px) { .decorations-wrapper { padding: 40px; } .decorations-wrapper--no-padding { padding: 0; } .decorations-wrapper--extra-padding .decorations-wrapper__content { padding: 80px 40px; } } .decorations-wrapper.is-style-rose-border { border: 5px solid #F8EFEC; } .decorations-wrapper.is-style-blue-border { border: 5px solid #A5C9DC; } .decorations-wrapper.is-style-grey-bg { background: #F6F6F8; } .decorations-wrapper.is-style-blue-bg { background: #266B90; color: #fff; } .decorations-wrapper.is-style-blue-bg h2, .decorations-wrapper.is-style-blue-bg h3, .decorations-wrapper.is-style-blue-bg h4, .decorations-wrapper.is-style-blue-bg h5, .decorations-wrapper.is-style-blue-bg h6 { color: #A5C9DC !important; } .decorations-wrapper.is-style-blue-bg a, .decorations-wrapper.is-style-blue-bg p, .decorations-wrapper.is-style-blue-bg li, .decorations-wrapper.is-style-blue-bg em, .decorations-wrapper.is-style-blue-bg strong { color: #fff !important; } .decorations-wrapper.is-style-blue-bg--with-circles { background: #266B90; color: #fff; } .decorations-wrapper.is-style-blue-bg--with-circles:before { background: url(../images/patterns/large/blue-semicircles-pattern-1.svg) no-repeat; background-size: 100%; content: " "; width: 297px; height: 231px; position: absolute; top: 0; right: 0; } @media screen and (min-width: 1024px) { .decorations-wrapper.is-style-blue-bg--with-circles:after { background: url(../images/patterns/large/blue-semicircle.svg) no-repeat; background-size: 100%; content: " "; width: 125px; height: 125px; position: absolute; top: 50px; left: 50px; } } .decorations-wrapper.is-style-blue-bg--with-circles h2, .decorations-wrapper.is-style-blue-bg--with-circles h3, .decorations-wrapper.is-style-blue-bg--with-circles h4, .decorations-wrapper.is-style-blue-bg--with-circles h5, .decorations-wrapper.is-style-blue-bg--with-circles h6 { color: #A5C9DC !important; } .decorations-wrapper.is-style-blue-bg--with-circles a, .decorations-wrapper.is-style-blue-bg--with-circles p, .decorations-wrapper.is-style-blue-bg--with-circles li, .decorations-wrapper.is-style-blue-bg--with-circles em, .decorations-wrapper.is-style-blue-bg--with-circles strong { color: #fff !important; } .decorations-wrapper.is-style-blue-bg--with-triangles { background: url(../images/patterns/large/blue-triangles.svg) no-repeat #266B90; background-size: 100%; background-position: center right; color: #fff; } .decorations-wrapper.is-style-blue-bg--with-triangles h2, .decorations-wrapper.is-style-blue-bg--with-triangles h3, .decorations-wrapper.is-style-blue-bg--with-triangles h4, .decorations-wrapper.is-style-blue-bg--with-triangles h5, .decorations-wrapper.is-style-blue-bg--with-triangles h6 { color: #A5C9DC !important; } .decorations-wrapper.is-style-blue-bg--with-triangles a, .decorations-wrapper.is-style-blue-bg--with-triangles p, .decorations-wrapper.is-style-blue-bg--with-triangles li, .decorations-wrapper.is-style-blue-bg--with-triangles em, .decorations-wrapper.is-style-blue-bg--with-triangles strong { color: #fff !important; } .decorations-wrapper.is-style-transparent-with-blue-decorations:before { background: url(../images/patterns/large/blue-semicircle-2.svg) no-repeat; background-size: 100%; content: " "; width: 170px; height: 170px; position: absolute; top: 0; right: 10px; z-index: -1; } @media screen and (min-width: 1024px) { .decorations-wrapper.is-style-transparent-with-blue-decorations:before { top: 0px; left: 10px; right: initial; } .decorations-wrapper.is-style-transparent-with-blue-decorations:after { background: url(../images/patterns/large/blue-plus-circle.svg) no-repeat; background-size: 100%; content: " "; width: 111px; height: 96px; position: absolute; bottom: 50px; right: 50px; z-index: -1; } } .decorations-wrapper.is-style-transparent-with-rose-decorations:before { background: url(../images/patterns/large/rose-arrow-waves.svg) no-repeat; background-size: 100%; content: " "; width: 217px; height: 171px; position: absolute; bottom: 20px; right: 0px; z-index: -1; } .decorations-wrapper.is-style-maroon-bg { background: #88153F; color: #fff; } .decorations-wrapper.is-style-maroon-bg h2, .decorations-wrapper.is-style-maroon-bg h3, .decorations-wrapper.is-style-maroon-bg h4, .decorations-wrapper.is-style-maroon-bg h5, .decorations-wrapper.is-style-maroon-bg h6 { color: #E6ACA9 !important; } .decorations-wrapper.is-style-maroon-bg a, .decorations-wrapper.is-style-maroon-bg p, .decorations-wrapper.is-style-maroon-bg li, .decorations-wrapper.is-style-maroon-bg em, .decorations-wrapper.is-style-maroon-bg strong { color: #fff !important; } .decorations-wrapper.is-style-rose-bg { background: #F8EFEC; } .decorations-wrapper.is-style-rose-bg h2, .decorations-wrapper.is-style-rose-bg h3, .decorations-wrapper.is-style-rose-bg h4, .decorations-wrapper.is-style-rose-bg h5, .decorations-wrapper.is-style-rose-bg h6 { color: #88153F !important; } .decorations-wrapper.is-style-rose-bg a, .decorations-wrapper.is-style-rose-bg p, .decorations-wrapper.is-style-rose-bg li, .decorations-wrapper.is-style-rose-bg em, .decorations-wrapper.is-style-rose-bg strong { color: #293B44 !important; } .decorations-wrapper.is-style-rose-bg--with-triangles { background: #F8EFEC; } .decorations-wrapper.is-style-rose-bg--with-triangles:before { background: url(../images/patterns/large/rose-triangles-waves-2.svg) no-repeat; background-size: 100%; content: " "; width: 374px; height: 217px; position: absolute; bottom: 0; right: 0; } @media screen and (min-width: 1024px) { .decorations-wrapper.is-style-rose-bg--with-triangles:after { background: url(../images/patterns/large/rose-triangles-waves.svg) no-repeat; background-size: 100%; content: " "; width: 225px; height: 190px; position: absolute; top: 50px; left: 50px; } } .decorations-wrapper.is-style-rose-bg--with-triangles h2, .decorations-wrapper.is-style-rose-bg--with-triangles h3, .decorations-wrapper.is-style-rose-bg--with-triangles h4, .decorations-wrapper.is-style-rose-bg--with-triangles h5, .decorations-wrapper.is-style-rose-bg--with-triangles h6 { color: #88153F !important; } .decorations-wrapper.is-style-rose-bg--with-triangles a, .decorations-wrapper.is-style-rose-bg--with-triangles p, .decorations-wrapper.is-style-rose-bg--with-triangles li, .decorations-wrapper.is-style-rose-bg--with-triangles em, .decorations-wrapper.is-style-rose-bg--with-triangles strong { color: #293B44 !important; } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ /** * #.# Styles * * CSS for both Frontend+Backend. */ .page-break { position: relative; width: 100%; background: #ccc; background-size: cover; background-position: center; } @media screen and (min-width: 768px) { .page-break { height: 400px; margin-top: 20px; } } @media screen and (min-width: 1024px) { .page-break { height: 500px; } } .page-break .container { position: relative; height: 100%; padding: 0; } @media screen and (min-width: 768px) { .page-break .container { padding: 20px; } } .page-break__mobile-image { height: 200px; width: 100%; background-size: cover; background-position: center; } @media screen and (min-width: 768px) { .page-break__mobile-image { display: none; } } .page-break__copy { position: relative; padding: 40px; border-top: 20px solid; } @media screen and (min-width: 768px) { .page-break__copy { position: absolute; z-index: 1; top: -20px; left: 20px; width: 480px; } } @media screen and (min-width: 1024px) { .page-break__copy { left: 0; } } .page-break__copy p, .page-break__copy h1, .page-break__copy h2, .page-break__copy h3, .page-break__copy h4, .page-break__copy h5, .page-break__copy h6, .page-break__copy ul, .page-break__copy em, .page-break__copy i, .page-break__copy p, .page-break__copy strong { color: #fff !important; } .page-break__copy .subhead__main::after, .page-break__copy .subhead__description::before { border-color: #fff; } .page-break__copy .heading { padding: 0; text-align: left; } .page-break__copy .wp-block-button { border-color: #fff; } .page-break__copy .wp-block-button .wp-block-button__link { color: #fff !important; } .page-break__copy .wp-block-button .wp-block-button__link::before { background-image: url("../src/lib/images/white-plus.svg"); } .page-break__copy--blue { background: #266B90; border-color: #215c7c; } .page-break__copy--maroon { background: #932D4E; border-color: #721235; } @media screen and (min-width: 768px) { .page-break__copy { -ms-flex-order: 0; order: 0; display: -ms-flexbox; display: flex; -ms-flex-pack: end; justify-content: flex-end; } } @media screen and (min-width: 768px) { .page-break--reverse .page-break__copy { right: 20px; left: initial; } } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ .numfact { display: inline-block; max-width: 220px; padding: 2rem 1rem; position: relative; text-align: center; } .numfact--align-left { text-align: left; } .numfact__number, .numfact__body { display: block; } .numfact__icon { fill: #293B44; } .numfact__number { font-size: 2.5rem; font-style: italic; padding: 0; color: #E6ACA9; z-index: 1; position: relative; } .numfact__number-wrap { position: relative; } .numfact__body { font-family: futura-pt, sans-serif; text-transform: uppercase; z-index: 1; position: relative; } .numfact__pattern { position: absolute; z-index: 0; left: 70%; top: 50%; } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ .quick-fact, .page__body .quick-fact { padding: 20px; background: url(../images/patterns/large/blue-triangles-2.svg) no-repeat #A5C9DC; text-align: left; background-position: bottom right; height: 100%; } @media screen and (min-width: 768px) { .quick-fact, .page__body .quick-fact { padding: 40px; } } .quick-fact__number, .page__body .quick-fact__number { color: #266B90; font-size: 70px; line-height: 1; margin-bottom: 10px; display: block; } .quick-fact__separator, .page__body .quick-fact__separator { margin: 0 0 10px 0; display: block; } .quick-fact__body, .page__body .quick-fact__body { color: #fff; font-size: 24px; font-style: italic; } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ .boxlinks { display: -ms-flexbox; display: flex; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-align: stretch; align-items: stretch; -ms-flex-wrap: wrap; flex-wrap: wrap; } .boxlinks__item { text-align: center; margin: 0 0 20px 0; position: relative; min-width: 200px; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: start; align-items: flex-start; width: 100%; } @media screen and (min-width: 768px) { .boxlinks__item { width: 48%; margin-right: 4%; } .boxlinks__item:nth-child(even) { margin-right: 0; } } @media screen and (min-width: 1024px) { .boxlinks__item { width: 32%; margin-right: 2%; } .boxlinks__item:nth-child(even) { margin-right: 2%; } .boxlinks__item:nth-child(3n) { margin-right: 0; } } .boxlinks__link { width: 100%; height: 100%; display: block; padding: 20px 20px 100px 20px; text-align: left; min-height: 230px; border: 6px solid #F8EFEC; -webkit-transition: border-color .1s ease-in; -o-transition: border-color .1s ease-in; transition: border-color .1s ease-in; overflow: hidden; } .boxlinks__link:hover { border-color: #A5C9DC; } .boxlinks__link:hover .boxlinks__icon { bottom: 21px; } .boxlinks__item--link .boxlinks__link:hover .boxlinks__icon { bottom: 26px; right: 21px; } .boxlinks__link:hover .boxlinks__title { color: #266B90; } .boxlinks__subtitle, .boxlinks__title { font-family: futura-pt, sans-serif; font-weight: 400 !important; text-transform: uppercase; position: relative; z-index: 2; } .boxlinks__title { display: block; color: #293B44; font-size: 21px; max-width: 80%; -webkit-transition: color .1s ease-in; -o-transition: color .1s ease-in; transition: color .1s ease-in; } .boxlinks__subtitle { color: #35302F; font-size: 15px; margin-bottom: 5px; } .boxlinks__description { color: #293B44 !important; font-size: 16px; margin-top: 10px; } .boxlinks__description p { color: #293B44 !important; } .boxlinks__icon { position: absolute; bottom: 26px; right: 26px; z-index: 1; -webkit-transition: all .1s ease-in; -o-transition: all .1s ease-in; transition: all .1s ease-in; margin: 0 !important; } .boxlinks__icon img { margin: 0 !important; } .boxlinks__pattern { position: absolute; bottom: 0px; left: 6px; z-index: 0; margin: 0 !important; } .boxlinks__pattern img { margin: 0 !important; } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width { margin: 0 !important; } .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width .boxlinks__icon { bottom: initial; top: calc(50% - 14px); } .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width .boxlinks__link { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; border-left: 0; border-right: 0; border-bottom: 0; padding: 20px 90px 20px 20px; min-height: 180px; } .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width .boxlinks__link:hover { border-color: #F8EFEC; } .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width .boxlinks__link:hover .boxlinks__icon { bottom: initial; top: calc(50% - 14px); } .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width .boxlinks__description p { margin: 0; } @media screen and (min-width: 768px) { .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width { width: 50%; } .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width.boxlinks__item--orphan { width: 100%; border-left: 0; border-right: 0 !important; } .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width .boxlinks__link { min-height: 230px; border-bottom: 6px solid #F8EFEC; border-top: 0; } .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width:nth-child(1), .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width:nth-child(2) { border-top: 6px solid #F8EFEC; } .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width:nth-child(odd) .boxlinks__link { border-right: 6px solid #F8EFEC; } } @media screen and (min-width: 1024px) { .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width .boxlinks__link { padding: 40px 100px 40px 40px; } .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width .boxlinks__link:hover .boxlinks__icon { right: 41px; } .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width .boxlinks__title, .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width .boxlinks__description { margin: 0 auto; max-width: 400px; width: 100%; } .boxlinks--full-width .boxlinks__item.boxlinks__item--full-width .boxlinks__icon { right: 46px; } } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ .upcoming-events__header { background: #266B90; padding: 20px; position: relative; } @media screen and (min-width: 768px) { .upcoming-events__header { height: 190px; padding-top: 50px; } } .upcoming-events__header p { margin: 0 !important; } .upcoming-events__header:before { content: ""; background: url(../images/patterns/medium/stratified-triangles.svg) no-repeat; width: 103px; height: 202px; position: absolute; bottom: -100px; right: 0; } @media screen and (min-width: 768px) { .upcoming-events__header .container { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: end; align-items: flex-end; } } .upcoming-events__body { padding: 20px 0; } @media screen and (min-width: 768px) { .upcoming-events__body { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: justify; justify-content: space-between; } } .upcoming-events__title { color: #fff; font-family: Lora, serif; font-style: italic; margin-bottom: 0 !important; } @media screen and (min-width: 768px) { .upcoming-events__title { font-size: 40px; } } .upcoming-events__link { color: #fff !important; background: transparent; border-radius: 0; padding-left: 40px; padding: 12px 9px 12px 25px; position: relative; font-family: futura-pt, sans-serif; font-weight: 700; display: inline-block; text-transform: uppercase; } .upcoming-events__link:before { content: "\f067"; font-family: fontawesome; color: #A5C9DC; font-size: 16px; display: block; position: absolute; left: 0; top: calc(50% - 12px); } .event-teaser { margin-bottom: 20px; background: #F6F6F8; } @media screen and (min-width: 768px) { .event-teaser { width: 30%; position: relative; top: -90px; margin-bottom: 0; } .event-teaser:hover { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } } .event-teaser__head { background: #A5C9DC; padding: 20px; color: #fff; } .event-teaser__date--above { color: #fff; } .event-teaser__day-week { font-family: futura-pt, sans-serif; font-size: 18px; } .event-teaser__day-week:after { content: ""; display: inline-block; border-bottom: 3px solid #fff; width: 50px; margin: 0 8px; } .event-teaser__month { font-family: Lora, serif; font-style: italic; font-size: 16px; } .event-teaser__date--below { color: #fff; font-family: futura-pt, sans-serif; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-align: end; align-items: flex-end; margin-top: 10px; } .event-teaser__day { font-size: 80px; line-height: 60px; margin-right: 10px; } @media screen and (min-width: 768px) { .event-teaser__day { font-size: 60px; line-height: 45px; } } @media screen and (min-width: 1024px) { .event-teaser__day { font-size: 80px; line-height: 60px; } } .event-teaser__tag { background: #266B90; font-size: 14px; padding: 10px 25px; text-transform: uppercase; } @media screen and (min-width: 768px) { .event-teaser__tag { font-size: 12px; } } @media screen and (min-width: 1024px) { .event-teaser__tag { font-size: 18px; } } .event-teaser__main { padding: 20px; } .event-teaser__title { color: #293B44; font-family: Lora, serif; font-style: italic; font-size: 32px; padding-right: 60px; } .event-teaser__body { margin-bottom: 50px; } .event-teaser__meta { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; font-family: futura-pt, sans-serif; font-size: 18px; } .event-teaser__time { margin-bottom: 10px; } .event-teaser__icon { margin-right: 10px; color: #A5C9DC; } .event-teaser__value { color: #266B90; } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ .testimonials__header { background: #88153F; padding: 40px 20px; position: relative; } @media screen and (min-width: 768px) { .testimonials__header { padding: 80px 20px 40px 20px; } } @media screen and (min-width: 1024px) { .testimonials__header { background: #fff; } .testimonials__header:before { content: ""; background: #88153F; height: 400px; width: 100%; position: absolute; z-index: 0; top: 0; left: -20px; } .testimonials__header .heading { max-width: 450px; position: relative; z-index: 1; margin: 0 auto; } .testimonials__header .heading .subhead { margin-bottom: 20px; display: block; } } @media screen and (min-width: 1200px) { .testimonials__header:before { left: -100px; } } .testimonials__header:after { position: absolute; background-size: 100%; background-repeat: no-repeat; content: " "; z-index: 1; background-image: url(../images/patterns/large/rose-triangles.svg); width: 114px; height: 114px; bottom: 20px; left: 20px; } @media screen and (min-width: 1024px) { .testimonials__header:after { width: 270px; height: 270px; bottom: -100px; } } .testimonials__header .headline { margin-bottom: 0; } @media screen and (min-width: 768px) { .testimonials__body { padding-top: 20px; padding-bottom: 20px; } } .testimonials__body .container { padding: 0; } @media screen and (min-width: 768px) { .testimonials__body .container { padding: 0 20px; } } @media screen and (min-width: 1024px) { .testimonials__body { background: #F8EFEC; } .testimonials__body .container { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: justify; justify-content: space-between; } } .testimonial { margin-bottom: 20px; position: relative; display: block; } .testimonial__title { background: #E6ACA9; color: #88153F; padding: 10px 20px; z-index: 1; font-size: 16px; text-align: center; margin-bottom: 0 !important; } @media screen and (min-width: 768px) { .testimonial__title { text-align: left; position: absolute; left: 0; bottom: 0; } } .testimonial__image { margin: 0 !important; display: block; } .testimonial__icon { border: 2px solid #E6ACA9; border-radius: 50%; width: 50px; height: 50px; position: absolute; left: calc(50% - 25px); top: calc(50% - 25px); color: #fff; font-size: 15px; -webkit-transition: -webkit-transform .2s ease-in; transition: -webkit-transform .2s ease-in; -o-transition: transform .2s ease-in; transition: transform .2s ease-in; transition: transform .2s ease-in, -webkit-transform .2s ease-in; } .testimonial__icon svg { left: 3px; } @media screen and (min-width: 1024px) { .testimonial { width: 48%; display: block; } .testimonial:hover .testimonial__icon { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .testimonial:hover .testimonial__title { color: #501E23; } } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ /** * #.# Styles * * CSS for both Frontend+Backend. */ .intro { padding: 20px 0; margin-bottom: 0 !important; } @media screen and (min-width: 768px) { .intro { padding: 40px 0; } } @media screen and (min-width: 1024px) { .intro { padding: 60px 0; } } .intro--copy .container > .wp-block-columns { -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 768px) { .intro--copy .container > .wp-block-columns { -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: justify; justify-content: space-between; } } .intro--copy .container > .wp-block-columns > .wp-block-column { width: 100%; margin: 0; } @media screen and (min-width: 480px) { .intro--copy .container > .wp-block-columns > .wp-block-column:last-child { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } } @media screen and (min-width: 768px) { .intro--copy .container > .wp-block-columns > .wp-block-column:first-child { width: 40%; -ms-flex-preferred-size: 40%; flex-basis: 40%; } .intro--copy .container > .wp-block-columns > .wp-block-column:first-child .heading { padding-right: 20px; border-right: 1px solid #D2D2D2; } .intro--copy .container > .wp-block-columns > .wp-block-column:first-child :last-child { margin-bottom: 0 !important; } .intro--copy .container > .wp-block-columns > .wp-block-column:last-child { width: 55%; -ms-flex-preferred-size: 55%; flex-basis: 55%; } } @media screen and (min-width: 1024px) { .intro--copy .container > .wp-block-columns > .wp-block-column:last-child { -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } .intro--copy .container > .wp-block-columns > .wp-block-column:last-child p { font-size: 16px; line-height: 1.5em; } } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ /** * #.# Styles * * CSS for both Frontend+Backend. */ .intro.intro--stats .container > .wp-block-columns.has-2-columns { -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 768px) { .intro.intro--stats .container > .wp-block-columns.has-2-columns { -ms-flex-pack: justify; justify-content: space-between; } } @media screen and (min-width: 1024px) { .intro.intro--stats .container > .wp-block-columns.has-2-columns { -ms-flex-direction: row; flex-direction: row; } } .intro.intro--stats .container > .wp-block-columns.has-2-columns > .wp-block-column { width: 100%; margin: 0; } .intro.intro--stats .container > .wp-block-columns.has-2-columns > .wp-block-column:last-child { margin-right: 0; margin-bottom: 0; text-align: center; } @media screen and (min-width: 768px) { .intro.intro--stats .container > .wp-block-columns.has-2-columns > .wp-block-column:last-child .wp-block-columns.has-3-columns { -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: justify; justify-content: space-between; } .intro.intro--stats .container > .wp-block-columns.has-2-columns > .wp-block-column:last-child .wp-block-columns.has-3-columns .wp-block-column { width: 30%; -ms-flex: 1; flex: 1; margin: 0; } } .intro.intro--stats .container > .wp-block-columns.has-2-columns > .wp-block-column:last-child .wp-block-column { width: 100%; } @media screen and (min-width: 1024px) { .intro.intro--stats .container > .wp-block-columns.has-2-columns > .wp-block-column:first-child { width: 40%; -ms-flex-preferred-size: 40%; flex-basis: 40%; } .intro.intro--stats .container > .wp-block-columns.has-2-columns > .wp-block-column:last-child { width: 55%; -ms-flex-preferred-size: 55%; flex-basis: 55%; } } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ /** * #.# Styles * * CSS for both Frontend+Backend. */ @media screen and (min-width: 768px) { .intro.intro--video-fact { padding: 20px 0; } } .intro.intro--video-fact .container > .wp-block-columns { -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 768px) { .intro.intro--video-fact .container > .wp-block-columns { -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: stretch; align-items: stretch; } } @media screen and (min-width: 1024px) { .intro.intro--video-fact .container > .wp-block-columns { -ms-flex-direction: row; flex-direction: row; } } .intro.intro--video-fact .container > .wp-block-columns .wp-block-column { width: 100%; margin: 0 0 20px 0; } .intro.intro--video-fact .container > .wp-block-columns .wp-block-column:last-child { margin-right: 0; margin-bottom: 0; text-align: center; } @media screen and (min-width: 768px) { .intro.intro--video-fact .container > .wp-block-columns .wp-block-column { width: 48%; -ms-flex-preferred-size: 48%; flex-basis: 48%; margin-bottom: 0; } .intro.intro--video-fact .container > .wp-block-columns .wp-block-column .video { min-height: 100%; } } @media screen and (min-width: 1024px) { .intro.intro--video-fact .container > .wp-block-columns .wp-block-column:first-child { width: 66%; -ms-flex-preferred-size: 66%; flex-basis: 66%; } .intro.intro--video-fact .container > .wp-block-columns .wp-block-column:last-child { width: 32%; -ms-flex-preferred-size: 32%; flex-basis: 32%; } } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ .video, .page__body .video { min-height: 200px; background: #696969; background-size: cover; position: relative; margin-bottom: 45px; } @media screen and (min-width: 768px) { .video, .page__body .video { margin-bottom: 0; } } @media screen and (min-width: 1024px) { .video, .page__body .video { height: 350px; } .video:hover, .page__body .video:hover { cursor: pointer; } .video:hover .video__icon, .page__body .video:hover .video__icon { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .video:hover .video__caption, .page__body .video:hover .video__caption { color: #501E23; } } .video__icon, .page__body .video__icon { border: 2px solid #E6ACA9; border-radius: 50%; width: 50px; height: 50px; position: absolute; left: calc(50% - 25px); top: calc(50% - 25px); color: #fff; font-size: 15px; -webkit-transition: -webkit-transform .2s ease-in; transition: -webkit-transform .2s ease-in; -o-transition: transform .2s ease-in; transition: transform .2s ease-in; transition: transform .2s ease-in, -webkit-transform .2s ease-in; } .video__icon svg, .page__body .video__icon svg { left: 3px; } .video__caption, .page__body .video__caption { position: relative; left: 0; width: 100%; height: 45px; top: 200px; background: #E6ACA9; color: #88153F; padding: 10px 20px; z-index: 10; font-size: 16px; text-align: center; margin-bottom: 0 !important; } @media screen and (min-width: 768px) { .video__caption, .page__body .video__caption { position: absolute; text-align: left; width: auto; bottom: 0; top: initial; } } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ .social-feed-header { position: relative; } .social-feed-header:before { background: url(../images/patterns/large/blue-semicircles-pattern-2.svg) no-repeat; background-size: 100%; content: " "; width: 280px; height: 140px; position: absolute; bottom: 0; left: 0; z-index: -1; } .social-feed-header__heading { font-family: Lora, serif; font-style: italic; text-align: center; margin-bottom: 0; margin-top: 20px; } @media screen and (min-width: 768px) { .social-feed-header__heading { margin-top: 40px; } } .social-feed-header .nav--social .nav__list { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: center !important; justify-content: center !important; margin-bottom: 10px; margin-left: 0; } .social-feed-header .nav--social .nav__item { list-style-type: none; margin-right: 10px; } .social-feed-header .nav--social .nav__link { color: #fff; width: 50px; height: 50px; border-radius: 50%; background: #9F1D4C; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; font-size: 20px; -webkit-transition: color .1s ease-in; -o-transition: color .1s ease-in; transition: color .1s ease-in; } .social-feed-header .nav--social .nav__link:hover, .social-feed-header .nav--social .nav__link svg:hover { color: #E6ACA9; } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ .scores { margin: 4em auto; padding-top: 1px; position: relative; } .scores__headline { font-size: 2.5rem; font-style: italic; margin: 2em auto 1em; text-align: center; } .scores .owl-stage-outer { position: relative; overflow: hidden; } .scores .owl-stage { position: relative; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; } .scores .owl-item { -ms-touch-action: pan-y; touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; float: left; } .scores .owl-nav { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; pointer-events: none; } .scores .owl-prev, .scores .owl-next { position: absolute; bottom: calc(50% - 190px); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); pointer-events: all; background: transparent; border: none; font-weight: 600; color: #88153F; font-size: 4rem; cursor: pointer; -webkit-transition: all ease 100ms; -o-transition: all ease 100ms; transition: all ease 100ms; } .scores .owl-prev.disabled, .scores .owl-next.disabled { pointer-events: none; opacity: 0.5; } .scores .owl-next { right: 6px; } @media screen and (min-width: 700px) { .scores .owl-next { right: auto; left: 6px; } } @media screen and (min-width: 1024px) { .scores .owl-next { left: -30px; } .scores .owl-next:hover { margin-left: -2px; } } .scores .owl-prev { left: 6px; } @media screen and (min-width: 700px) { .scores .owl-prev { left: auto; right: 6px; } } @media screen and (min-width: 1024px) { .scores .owl-prev { right: -30px; } .scores .owl-prev:hover { margin-right: -2px; } } .scores__items::after { content: ""; display: table; clear: both; } .scores__item { max-width: 250px; border: 6px solid black; padding: 1.5em 1.5em 1em; position: relative; min-width: 200px; max-width: calc(1100px / 4 - 10px); margin: 0 auto; border: 6px solid #F8EFEC; -webkit-transition: border-color 100ms ease-in; -o-transition: border-color 100ms ease-in; transition: border-color 100ms ease-in; } .scores__header { margin-bottom: 1em; text-transform: uppercase; font-family: futura-pt, sans-serif; letter-spacing: 1px; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: end; align-items: flex-end; } .scores__date { font-weight: 600; } .scores__final { font-size: 75%; } .scores__body p:last-child { margin-bottom: 0 !important; } .scores__grid { display: grid; grid-template: 1fr 1fr / 4fr 1fr; } .scores__val { display: block; padding: .5em .5em 0; } .scores__val--win { font-weight: 600; } .scores__pattern { position: absolute; bottom: 0; left: 6px; z-index: 0; pointer-events: none; } .scores__pattern img { margin: 0 !important; } #editor .scores { overflow: hidden; } #editor .scores__items { -webkit-transform: translateX(-132px); -ms-transform: translateX(-132px); transform: translateX(-132px); } #editor .scores__item { vertical-align: middle; display: none; } #editor .scores__item:nth-last-child(-n+3) { display: inline-block; } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ .social-links { position: relative; } .social-links:before { background: url(../images/patterns/large/blue-semicircles-pattern-2.svg) no-repeat; background-size: 100%; content: " "; width: 280px; height: 140px; position: absolute; bottom: 0; left: 0; z-index: -1; } .social-links__heading { font-family: Lora, serif; font-style: italic; text-align: center; margin-bottom: 0; margin-top: 20px; } @media screen and (min-width: 768px) { .social-links__heading { margin-top: 40px; } } .social-links__list { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: center !important; justify-content: center !important; margin-bottom: 10px; margin-left: 0; } .social-links__item { list-style-type: none !important; margin-right: 10px; } .social-links__link { color: #fff !important; width: 50px; height: 50px; border-radius: 50%; background: #9F1D4C; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; font-size: 20px; -webkit-transition: color .1s ease-in; -o-transition: color .1s ease-in; transition: color .1s ease-in; } .social-links__link:hover, .social-links__link svg:hover { color: #E6ACA9 !important; } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ .accordion { border-bottom: 1px solid black; border-bottom: 1px solid #FAECEB; } .accordion__toggle { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; cursor: pointer; padding: 1rem 0; } .accordion__title { font-weight: 600; display: block; } .accordion__icon { margin-right: 1rem; position: relative; font-size: 1.5rem; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; background: #88153F; color: #E6ACA9; } .accordion__icon svg, .accordion__icon i { -webkit-transition: all ease 100ms; -o-transition: all ease 100ms; transition: all ease 100ms; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } .accordion__body { display: none; } .accordion--active .fa-plus { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .accordion--active .accordion__body { display: block; } /** * #.# Common SCSS * * Can include things like variables and mixins * that are used across the project. */ .latest__headline { margin: 1em auto; font-size: 2.5em; font-family: Lora, serif; font-style: italic; text-align: center; } .latest__items { -ms-flex-direction: column; flex-direction: column; max-width: 75vw; margin: 0 auto 2rem; } @media screen and (min-width: 1024px) { .latest__items { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: stretch; align-items: stretch; -ms-flex-direction: row; flex-direction: row; } } .latest__item { padding: 40px 30px 120px; position: relative; margin: 0 0 20px; border: 6px solid #F8EFEC; -webkit-transition: all ease 100ms; -o-transition: all ease 100ms; transition: all ease 100ms; width: 100%; display: block; margin: 0 auto 20px; } .latest__item:first-child { margin-left: 0; } .latest__item:last-child { margin-right: 0; } .latest__item:hover { border-color: #A5C9DC; } .latest__item:hover .latest__icon { right: 21px; } @media screen and (min-width: 1024px) { .latest__item { -ms-flex: 1; flex: 1; margin: 0 20px 20px; } } .latest__date { font-family: futura-pt, sans-serif; text-transform: uppercase; font-weight: 600; } .latest__icon img, .latest__pattern img { margin: 0 !important; } .latest__icon { position: absolute; bottom: 26px; right: 26px; -webkit-transition: right ease 100ms; -o-transition: right ease 100ms; transition: right ease 100ms; } .latest__pattern { position: absolute; bottom: 0; left: 0; pointer-events: none; } .latest__foot { text-align: center; margin-bottom: 2rem; } .latest .wp-block-button { text-align: center; }