/* Theme Name: Prairie Post Frame Author: Nemanja Janjic Author URI: https://traitmarketing.ca/ Description: Prairie Post Frame theme, is developed by custom design for client purposes Requires at least: 6.4 Tested up to: 6.5 Requires PHP: 7.0 Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: prairepostframe Tags: one-column, custom-colors, custom-menu, custom-logo */ /* ============================ RESET CSS ============================ */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ /*ol, ul, menu {*/ /* list-style: none;*/ /*}*/ /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; /*height: auto;*/ width: auto; max-height: 100%; max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } em { font-style: italic; } .a-center { align-items: center; } /* ======================== 1. GLOBAL ======================== */ html { overflow-x: hidden; padding: 0; margin: 0; } body { font-family: "Outfit", sans-serif; font-optical-sizing: auto; font-weight: 100; font-style: normal; position: relative; width: 100%; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; padding: 0; margin: 0; } p { font-size: 18px; line-height: 24px; font-weight: 300; } .outfit-100 { font-weight: 100; } .outfit-200 { font-weight: 200; } .outfit-300 { font-weight: 300; } .outfit-400 { font-weight: 400; } .outfit-500 { font-weight: 500; } .outfit-600 { font-weight: 600; } .outfit-700 { font-weight: 700; } .outfit-800 { font-weight: 800; } .outfit-900 { font-weight: 900; } :root { --black-green: rgb(2, 29, 36); --dark-green: rgb(5, 46, 48); --green: rgb(12, 88, 78); --middle-green: rgb(123, 170, 35); --lighter-green: rgb(52, 132, 94); --light-green: rgb(157, 204, 69); --grey: rgb(112, 112, 112); --white: rgb(255, 255, 255); --light-grey: rgb(239, 245, 241) } .black-green { color: var(--black-green); } .dark-green { color: var(--dark-green); } .green { color: var(--green); } .middle-green { color: var(--middle-green); } .lighter-green { color: var(--lighter-green); } .light-green { color: var(--light-green); } .grey { color: var(--grey); } .white { color: var(--white); } .f-18 { font-size: 18px; } .f-20 { font-size: 20px; } .f-24 { font-size: 24px; } .f-30 { font-size: 30px; } .f-50 { font-size: 50px; } .gradient { background: linear-gradient(to right, #5b9e54, #9ccb45); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } h1, .h1 { font-size: 90px; letter-spacing: -2px; line-height: 110px; font-weight: 500; margin-bottom: 40px; } h2, .h2 { font-size: 46px; line-height: 49px; font-weight: 500; margin-bottom: 20px; } h3, .h3 { font-size: 30px; line-height: 36px; font-weight: 400; margin-bottom: 15px; } h5, .h5 { font-size: 20px; line-height: 24px; font-weight: 500; margin-bottom: 5px; } @media only screen and (max-width: 1199.9px) { h1, .h1 { font-size: 80px; letter-spacing: -2px; line-height: 100px; font-weight: 500; } h2, .h2, .f-50 { font-size: 38px; line-height: 46px; } h3, .h3, .f-30 { font-size: 28px; line-height: 34px; font-weight: 400; margin-bottom: 15px; } h5, .h5 { font-size: 20px; line-height: 24px; font-weight: 500; margin-bottom: 5px; } } @media only screen and (max-width: 991.8px) { h1, .h1 { font-size: 65px; letter-spacing: -1px; line-height: 75px; font-weight: 500; } h2, .h2, .f-50 { font-size: 34px; line-height: 40px; } h3, .h3, .f-30 { font-size: 26px; line-height: 32px; } } @media only screen and (max-width: 767.8px) { h1, .h1 { font-size: 50px; letter-spacing: 0; line-height: 60px; } h2, .h2, .f-50 { font-size: 30px; line-height: 34px; margin-bottom: 15px; } h3, .h3 { font-size: 24px; line-height: 28px; } } @media only screen and (max-width: 575.9px) { h1, .h1 { font-size: 40px; letter-spacing: -1px; line-height: 50px; font-weight: 500; margin-bottom: 15px; } h2, .h2, .f-50 { font-size: 24px; line-height: 30px; } h3, .h3 { font-size: 22px; line-height: 26px; } .f-24 { font-size: 20px; } h5, .h5, .f-30 { font-size: 18px; line-height: 22px; font-weight: 500; margin-bottom: 5px; } } a { -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out; } .button { font-size: 16px; line-height: 20px; text-transform: uppercase; font-weight: 600; min-width: 205px; padding: 20px; border-radius: 10px; text-decoration-line: none; /*display: inline-block;*/ text-align: center; filter: drop-shadow(-0.262px 14.998px 17.5px rgba(0, 0, 0, 0.08)); position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .button:hover, .button:focus, .button:focus-within { outline: none; } .button span { position: relative; z-index: 2; } .button:hover { text-decoration-line: none; } .gr-green { color: var(--white); } .gr-green:hover { color: var(--white); } .gr-green:before { content: ""; display: block; position: absolute; top: 0; right: -50%; width: 200%; height: 100%; background: rgb(72, 145, 89); background: -moz-linear-gradient(90deg, rgba(72, 145, 89, 1) 0%, rgba(72, 145, 89, 1) 34%, rgba(157, 204, 69, 1) 59%, rgba(157, 204, 69, 1) 100%); background: -webkit-linear-gradient(90deg, rgba(72, 145, 89, 1) 0%, rgba(72, 145, 89, 1) 34%, rgba(157, 204, 69, 1) 59%, rgba(157, 204, 69, 1) 100%); background: linear-gradient(90deg, rgba(72, 145, 89, 1) 0%, rgba(72, 145, 89, 1) 34%, rgba(157, 204, 69, 1) 59%, rgba(157, 204, 69, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#489159", endColorstr="#9dcc45", GradientType=1); -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out; } .gr-green:hover:before { right: 0; } .tr-white { color: var(--white); background-color: rgba(255, 255, 255, .12); } .tr-white:hover { background-color: var(--white); color: var(--green); } .white-green { background-color: var(--white); color: var(--green); } .white-green:hover { color: var(--white); background-color: var(--green); } .light-grey-green { background-color: var(--light-grey); color: var(--dark-green); border: 1px solid rgba(255, 255, 255, 0); } .light-grey-green:hover { color: var(--dark-green); background-color: rgba(255, 255, 255, 0); border: 1px solid #f0f6f1; } @media only screen and (max-width: 575.8px) { .button { padding: 15px 20px; } } .show-lg { display: block; } .hide-lg { display: none; } .show-md { display: block; } .hide-md { display: none; } @media only screen and (min-width: 768px) { .show-md { display: none; } .hide-md { display: block; } } @media only screen and (min-width: 992px) { .container.container-big { max-width: 100%; } .show-lg { display: none; } .hide-lg { display: block; } } @media only screen and (min-width: 1300px) { .container { max-width: 1230px; } .container.container-big { max-width: 1280px; } } @media only screen and (min-width: 1480px) { .container.container-big { max-width: 1430px; } } /* ================================ 2. Header ================================ */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 9; padding: 0 30px; filter: drop-shadow(-0.035px 2px 10.5px rgba(0, 0, 0, 0.05)); background-color: var(--white); } header.transparent { background-color: rgba(255, 255, 255, 0); position: absolute; top: 0; left: 0; } header.on-scroll { transform: translateY(-100%); -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out; } header.on-scroll.visible { transform: translateY(0); } .custom-logo-link img { width: 94px; height: 35px; } #main-menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0; margin: 0; } #main-menu li { position: relative; display: flex; flex-wrap: wrap; } #main-menu li a { position: relative; } #main-menu li { padding: 0 25px; } #main-menu li a { font-size: 16px; line-height: 28px; text-transform: uppercase; font-weight: 600; padding: 31px 10px; } #main-menu li.current-menu-item .sub-menu a::before, #main-menu li.current-menu-ancestor .sub-menu a::before, #main-menu li.current-menu-parent .sub-menu a::before { display: none; } #main-menu .sub-menu { position: absolute; top: calc(100% - 10px); left: 40px; width: 250px; padding: 15px 0; border-radius: 10px; background-color: var(--white); filter: drop-shadow(-0.035px 2px 10.5px rgba(0, 0, 0, 0.05)); z-index: -2; opacity: 0; display: none; } .transparent #main-menu .sub-menu { background-color: rgba(5, 46, 48, .8); backdrop-filter: blur(25px); } #main-menu .sub-menu li { padding: 0; display: block; width: 100%; } #main-menu .sub-menu li a { font-size: 18px; line-height: 20px; text-transform: none; padding: 15px 5px 15px 30px; font-weight: 300; display: block; width: 100%; } header.transparent #main-menu li a { color: var(--white); } header.transparent #main-menu li:hover > a:first-of-type { color: var(--light-green); text-decoration-line: none; } header.transparent #main-menu .sub-menu li a:hover { color: var(--white); text-decoration-line: none; background-color: var(--light-green); } header #main-menu li a { color: var(--dark-green); } header #main-menu li a:hover { color: var(--light-green); text-decoration-line: none; } header #main-menu .sub-menu li a:hover { color: var(--white); text-decoration-line: none; background-color: var(--light-green); } #contact-menu { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; list-style-type: none; } #contact-menu li a { font-size: 16px; line-height: 28px; text-transform: uppercase; color: var(--dark-green); font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .transparent #contact-menu li a { color: var(--white); } .transparent #contact-menu li a:hover { text-decoration-line: none; color: var(--light-green); } #contact-menu li a:hover { color: var(--light-green); text-decoration-line: none; } .phone-icon { position: relative; display: flex; width: 21px; height: 21px; margin-right: 10px; } .phone-icon:before { content: ""; display: block; position: absolute; right: 0; top: 0; flex-basis: 21px; width: 21px; height: 21px; background-image: url('./assets/icons/phone.svg'); background-size: cover; background-repeat: no-repeat; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out; } @media only screen and (min-width: 992px) { #main-menu li:hover .sub-menu { opacity: 1; z-index: 2; display: block; } #main-menu li.current-menu-item a:first-of-type::before, #main-menu li.current-menu-ancestor a:first-of-type::before, #main-menu li.current-menu-parent a:first-of-type::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 4px; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out; background-color: var(--light-green); } #main-menu li.current-menu-item .sub-menu a::before, #main-menu li.current-menu-ancestor .sub-menu a::before, #main-menu li.current-menu-parent .sub-menu a::before { display: none; } #main-menu .sub-menu li.show-lg { display: none; } } @media only screen and (max-width: 1280px) { #main-menu li { padding: 0 15px; } } @media only screen and (max-width: 1100px) { #main-menu li { padding: 0 10px; } #main-menu li a { padding: 31px 5px; } .phone-icon { margin-right: 5px; } #main-menu li a, #contact-menu li a { font-size: 15px; } } @media only screen and (max-width: 991.8px) { header { padding: 10px 0; } header.on-scroll { transform: none; } header.transparent { display: none; } #logo-wrapper { z-index: 99; } /* ======================MOBILE MENU======================== */ .hamburger-menu { position: relative; width: 25px; height: 24px; cursor: pointer; z-index: 9998; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); margin-left: auto; margin-right: 3px; } .bar, .bar:after, .bar:before { width: 25px; height: 2px; } .bar { position: relative; transform: translateY(10px); background-color: var(--light-green); transition: all 0ms 300ms; } .bar.animate { background: rgba(255, 255, 255, 0); } .bar:before { content: ""; position: absolute; left: 0; bottom: 7px; background-color: var(--light-green); transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); } .bar:after { content: ""; position: absolute; left: 0; top: 7px; background-color: var(--light-green); transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); } .bar.animate:after { top: 0; transform: rotate(45deg); transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); } .bar.animate:before { bottom: 0; transform: rotate(-45deg); transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); } .mobile-menu { top: 55px; max-width: 450px; right: -100%; width: 100%; height: 100%; min-height: 100vh; position: fixed; z-index: 9; overflow-y: hidden; background: var(--dark-green); -webkit-transform: translate3d(200px, 0, 0); -moz-transform: translate3d(200px, 0, 0); transform: translate3d(200px, 0, 0); -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; padding-bottom: 50px; } .mobile-menu.active { right: 0; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .mobile-menu-inner { height: 100vh; min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 80px; overflow-y: scroll; } #main-menu { margin-bottom: 50px; } #main-menu li { width: 100%; flex-basis: 100%; text-align: left; padding: 0; border-radius: 0; } #main-menu li.current-menu-ancestor a:not(.sub-menu a), #main-menu li.current-menu-item a:not(.sub-menu a) { background-color: rgb(28, 70, 51); color: var(--light-green); } #main-menu li:not(.sub-menu) > a { width: 100%; display: block; font-size: 30px; line-height: 32px; color: var(--white); font-weight: 500; padding: 25px 35px; border-bottom: 1px solid rgba(255, 255, 255, .1); border-radius: 0; text-transform: none; } #main-menu > li.menu-item-has-children > a:first-of-type:not(.sub-menu a)::before { content: ""; display: block; width: 21px; height: 13px; mask: url("./assets/icons/mobile-drop.svg") no-repeat center; -webkit-mask: url("./assets/icons/mobile-drop.svg") no-repeat center; background-size: contain; background-position: center center; background-repeat: no-repeat; background-color: var(--light-green); position: absolute; top: 33px; right: 20px; left: auto; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; transform: rotate(180deg); } #main-menu > li.menu-item-has-children.active > a:first-of-type:not(.sub-menu a)::before { transform: rotate(0); } #main-menu li a:hover { background: rgb(28, 70, 51); } #main-menu li.active a { border-bottom: none; } #main-menu li a:first-of-type { border-top: 1px solid rgba(255, 255, 255, .1); } #main-menu .sub-menu { display: none; padding: 0; box-shadow: none; position: relative; width: 100%; background: rgba(255, 255, 255, 0); top: 0; left: 0; opacity: 1; display: none; border-radius: 0; z-index: 2; } #main-menu .sub-menu.visible { display: block; } #main-menu .sub-menu { padding-left: 60px; } #main-menu .sub-menu li a { font-size: 26px; line-height: 30px; color: var(--white); font-weight: 400; text-align: left; border: none; padding: 20px 0; } #main-menu .sub-menu li a:before { display: none; } header #main-menu .sub-menu li a:hover, header #main-menu .sub-menu li.current-menu-item a:hover, header #main-menu .sub-menu li.current_page_item a { color: var(--light-green); background-color: rgba(255, 255, 255, 0); } } @media only screen and (max-width: 575.8px) { #phone-wrapper { padding-left: 0; } #contact-menu li a { font-size: 14px; } } /* ================================ 2. HERO SECTION ================================ */ .tooltip { left: 0; top: 0; } #page-hero-section { padding: 150px 0 50px 0; } #page-hero-section h1 { margin-bottom: 10px; } #page-hero-section h2 { margin-bottom: 25px; } .hero-text { width: 920px; max-width: 100%; margin: 0 auto; } .hero-text.wider { width: 1010px; max-width: 100%; margin: 0 auto; } @media only screen and (max-width: 991.8px) { #page-hero-section { padding-top: 100px; } } @media only screen and (max-width: 767.8px) { #page-hero-section { padding-top: 80px; } } @media only screen and (max-width: 575.8px) { #page-hero-section { padding-top: 80px; padding-bottom: 10px; } #page-hero-section h2 { margin-bottom: 15px; font-size: 18px; } p { font-size: 16px; } } /* ================================ 3. CTA ================================ */ #bottom-cta { background-color: var(--light-green); padding: 90px 0; } #cta-left h2 span { color: var(--white); } #cta-left { width: 100%; flex-basis: 100%; max-width: 100%; display: flex; padding: 0 15px; justify-content: center; flex-wrap: wrap; margin-left: auto; margin-right: auto; } .cta-text { text-align: center; } #cta-right { width: 100%; flex-basis: 100%; max-width: 100%; display: flex; padding: 0 15px; justify-content: center; flex-wrap: wrap; margin-left: auto; margin-right: auto; } .cta-button { overflow: visible; } .cta-text { margin-bottom: 20px; } @media (min-width: 1200px) { #bottom-cta:before { content: ""; display: block; position: absolute; width: 1163px; height: 800px; background-size: inherit; background-position-x: center; background-position-y: -70px; background-repeat: no-repeat; background-image: url("./assets/icons/cta-circles.svg"); box-sizing: border-box; bottom: 0; right: 120px; } #cta-left { padding: 0 15px; width: calc(100% - 300px); flex-basis: calc(100% - 300px); max-width: 100%; justify-content: flex-start; flex-wrap: wrap; margin-left: auto; margin-right: auto; } .cta-text { text-align: left; } .cta-9 #cta-left { width: 760px; flex-basis: 760px; } .cta-225 #cta-left { width: 691px; flex-basis: 691px; } .cta-116 #cta-left { width: 691px; flex-basis: 691px; } .cta-205 #cta-left { width: 691px; flex-basis: 691px; } .cta-26 #cta-left { width: 691px; flex-basis: 691px; } #cta-right { width: 300px; flex-basis: 300px; max-width: 100%; display: flex; padding: 0 15px; justify-content: flex-end; flex-wrap: wrap; margin-left: auto; margin-right: 0; } .cta-text { margin-bottom: 0; } } @media only screen and (max-width: 1199.9px) { #bottom-cta h2 { display: block; width: 100%; text-align: center; } } @media only screen and (max-width: 991.8px) { #bottom-cta { padding: 70px 0; } } @media only screen and (max-width: 767.8px) { #bottom-cta h2 { display: block; width: 100%; text-align: center; } } @media only screen and (max-width: 575.8px) { #bottom-cta { padding: 45px 0; } } /* ======================== FOOTER ======================== */ footer { background-color: var(--light-green); box-shadow: inset 0px 1px 0px rgba(12, 88, 78, 0.16); /*position: relative;*/ padding: 40px 15px; border-bottom: 11px solid rgb(188, 227, 85); margin-top: auto; } footer::before { content: ""; position: absolute; display: block; width: 75%; left: 0; bottom: 0; height: 11px; background-color: rgb(115, 175, 79); } footer::after { content: ""; position: absolute; display: block; width: 50%; left: 0; bottom: 0; height: 11px; background-color: rgb(52, 135, 94); } .footer-holder { position: absolute; display: block; width: 25%; left: 0; bottom: 0; height: 11px; background-color: rgb(12, 88, 78); z-index: 1; } #footer-menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin-bottom: 0; list-style-type: none; padding: 0; } #footer-menu li { margin-right: 20px; } #footer-menu li:last-of-type { margin-right: 0; } #footer-menu li a { font-size: 16px; text-transform: uppercase; color: var(--green); font-weight: 400; padding-right: 20px; position: relative; } #footer-menu li a:before { content: ""; display: block; position: absolute; right: 0; top: 4px; flex-basis: 10px; width: 10px; height: 12px; mask: url('./assets/icons/small-arrow.svg') no-repeat center; -webkit-mask: url('./assets/icons/small-arrow.svg') no-repeat center; -webkit-mask-size: 100%; mask-size: 100%; background-color: var(--green); webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out; } #footer-menu li a:hover { color: var(--white); text-decoration-line: none; } #footer-menu li a:hover:before { background-color: var(--white); } #footer-center { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } #privacy-menu { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-bottom: 0; padding-left: 12px; list-style-type: none; } #privacy-menu li { padding: 0 12px; } #privacy-menu li:last-of-type { padding-right: 0; } footer .year, #privacy-menu li a { color: var(--green); font-size: 16px; font-weight: 400; text-decoration-line: none; } #privacy-menu li a:hover, #privacy-menu li.current-menu-item a { color: var(--white); } #footer-right { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; } #footer-right { color: var(--green); font-size: 16px; font-weight: 400; text-decoration-line: none; } #footer-right a, #social-menu li a { font-weight: 600; color: var(--green); } #social-menu li a:hover, #footer-right a:hover { color: var(--white); text-decoration-line: none; } #social-menu { margin-bottom: 0; margin-left: 40px; list-style-type: none; } #social-menu li a { font-size: 30px; } @media only screen and (max-width: 1199.9px) { footer { padding: 40px 0; } #privacy-menu { margin-left: 5px; padding-left: 0; } #privacy-menu li { padding-right: 5px; padding-left: 0; } } @media only screen and (max-width: 991.9px) { footer .row { justify-content: center; } #footer-menu { justify-content: center; margin-bottom: 15px; } #social-menu { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto 15px auto; } footer .year { order: 2; text-align: center; width: 100%; margin-bottom: 15px; } #privacy-menu { order: 1; margin: 0 auto 15px auto; justify-content: center; } #privacy-menu li { padding: 0; margin-bottom: 15px; width: 100%; text-align: center; } #privacy-menu li:last-of-type { margin-bottom: 0; } #footer-right { justify-content: center; } } /* ===================== DEFAULT PAGE CONTENT ====================== */ #default-page-content { padding-bottom: 40px; } #default-page-content h1, #default-page-content h2, #default-page-content h3, #default-page-content h4, #default-page-content h5, #default-page-content h6 { color: var(--green); margin-bottom: 20px; font-weight: 500; } #default-page-content h1 { font-size: 36px; line-height: 42px; } #default-page-content h2 { font-size: 32px; line-height: 36px; } #default-page-content h3 { font-size: 28px; line-height: 32px; } #default-page-content h4 { font-size: 26px; line-height: 30px; } #default-page-content h5 { font-size: 22px; line-height: 26px; } #default-page-content h6 { font-size: 20px; line-height: 26px; } #default-page-content ul, #default-page-content ol { margin-bottom: 20px; padding-left: 20px; } #default-page-content ul li::marker, #default-page-content ol li::marker { color: var(--green); } #default-page-content ol, #default-page-content li ol { list-style-type: decimal; } #default-page-content ul, #default-page-content li ul { list-style-type: disc; } #default-page-content li ul, #default-page-content li ol { margin-top: 20px; } #default-page-content p, #default-page-content li { font-size: 18px; line-height: 26px; color: var(--grey); margin-bottom: 20px; font-weight: 300; } #default-page-content li { margin-bottom: 10px; } #default-page-content a { color: var(--green); text-decoration-line: underline; } #default-page-content a:hover { color: var(--light-green); } #error-container a { display: inline-flex; margin-left: auto; margin-right: auto; } .fancybox-active{ height:100%; }