/* Theme Name: Trait Marketing Author: Nemanja Janjic Description: Our new theme for 2023 is designed to take present our company in the best light Version: 1.0 Requires at least: 6.2 Requires PHP: 7.0 Text Domain: traitmarketing This theme, like WordPress, is licensed under the GPL. */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /* ============================ 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:not(#page-wrapper ol), ul:not(#page-wrapper ul), menu:not(#page-wrapper 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; } /* ============================ GLOBAL ============================ */ :root { --white: #FFF; --dark-grey: #292929; --grey: #555555; --darker-grey: #3d3d3d; --light-grey: #b0b0b0; --white-grey: #808080; --lighter-grey: #dfdfdf; --black: #000; } .white { color: var(--white); } .grey { color: var(--grey); } .light-grey { color: var(--light-grey); } .lighter-grey { color: var(--lighter-grey); } .darker-grey { color: var(--darker-grey); } .dark-grey { color: var(--dark-grey); } body { display: flex; flex-direction: column; min-height: 100vh; background-color: var(--dark-grey); font-family: 'Manrope', sans-serif; overflow-x: hidden; width: 1920px; flex-basis: 1920px; max-width: 100%; margin: 0 auto; } #page, #main { width: 100%; max-width: 100%; overflow: hidden; } #main { opacity: 0; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #main.visible { backdrop-filter: none; opacity: 1; } /*#content.visible {*/ /* opacity: 1;*/ /*}*/ footer { margin-top: auto; position: relative; z-index: 2; } .manrope { font-family: 'Manrope', sans-serif; } .red-hat { font-family: 'Red Hat Display', sans-serif; } .d-flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .j-start { justify-content: flex-start; } .j-center { justify-content: center; } .j-end { justify-content: flex-end; } .a-center { align-items: center; } a, a > * { -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } h1, .h1 { font-size: 80px; line-height: 84px; font-weight: 600; margin-bottom: 40px; } h2, .h2 { font-size: 50px; line-height: 64px; font-weight: 400; font-family: 'Red Hat Display', sans-serif; margin-bottom: 30px; } h3, .h3 { font-size: 30px; line-height: 36px; font-family: 'Red Hat Display', sans-serif; margin-bottom: 20px; font-weight: 500; } h4, .h4 { font-size: 26px; line-height: 32px; font-weight: 500; font-family: 'Red Hat Display', sans-serif; margin-bottom: 15px; } h5, .h5 { font-size: 20px; line-height: 24px; margin-bottom: 15px; } p { font-size: 18px; line-height: 26px; font-weight: 400; margin-bottom: 15px; } .normal-button, .subtle-button { width: auto; border-radius: 5px; background-color: rgba(223, 223, 223, 0); display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 15px 20px; text-transform: uppercase; text-decoration-line: none; font-size: 14px; line-height: 14px; text-transform: uppercase; font-weight: 700; margin: 10px; height: 54px; filter: drop-shadow(0px 23px 18px rgba(0, 0, 0, 0.06)); } .normal-button { border: 2px solid var(--lighter-grey); color: var(--lighter-grey); } .subtle-button { color: var(--lighter-grey); border: 2px solid rgba(255, 255, 255, .2); } .normal-button .text, .subtle-button .text { padding-right: 20px; } .normal-button .icon { background-color: var(--darker-grey); } .normal-button { background-color: var(--lighter-grey); border-color: var(--lighter-grey); color: var(--darker-grey); } .subtle-button .icon { background-color: var(--lighter-grey); } .normal-button:hover { background-color: var(--white); border-color: var(--white); color: var(--darker-grey); text-decoration-line: none; } .normal-button:hover .icon { background-color: var(--darker-grey); } .subtle-button:hover { border-color: var(--white); color: var(--lighter-grey); text-decoration-line: none; } .subtle-button:hover .icon { background-color: var(--lighter-grey); } .play-icon { mask: url("./assets/images/play-icon.svg") no-repeat center; -webkit-mask: url("./assets/images/play-icon.svg") no-repeat center; width: 20px; height: 20px; background-size: contain; background-position: center center; background-repeat: no-repeat; } .line-icon { mask: url("./assets/images/line-right.svg") no-repeat center; -webkit-mask: url("./assets/images/line-right.svg") no-repeat center; width: 20px; height: 20px; background-size: contain; background-position: center center; background-repeat: no-repeat; } .grey-button { font-size: 14px; line-height: 15px; text-transform: uppercase; color: var(--light-grey); font-weight: 500; font-family: "Manrope"; padding: 8px 40px; border-radius: 5px; border: 2px solid rgba(255, 255, 255, .2); text-decoration-line: none; } .grey-button:hover { text-decoration-line: none; color: var(--white); border-color: var(--white); } section { width: 100%; display: block; } /* ============================ PAGES =========================== */ .page-content { position: relative; /*padding-top: 95px;*/ padding-top: 72px; padding-bottom: 20px; } #pages-cover-video, .video-before { position: fixed; top: 0; /*left: 0;*/ width: 1920px; max-width: 100%; height: 100vh; object-fit: cover; } #no-title { display: none; opacity: 0; z-index: -1; } .slide-in-elliptic-bottom-fwd { -webkit-animation: slide-in-elliptic-bottom-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-elliptic-bottom-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } /* ---------------------------------------------- * Generated by Animista on 2023-5-26 18:45:36 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation slide-in-elliptic-bottom-fwd * ---------------------------------------- */ @-webkit-keyframes slide-in-elliptic-bottom-fwd { 0% { -webkit-transform: translateY(600px) rotateX(30deg) scale(0); transform: translateY(600px) rotateX(30deg) scale(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; opacity: 0; } 100% { -webkit-transform: translateY(0) rotateX(0) scale(1); transform: translateY(0) rotateX(0) scale(1); -webkit-transform-origin: 50% -1400px; transform-origin: 50% -1400px; opacity: 1; } } @keyframes slide-in-elliptic-bottom-fwd { 0% { -webkit-transform: translateY(600px) rotateX(30deg) scale(0); transform: translateY(600px) rotateX(30deg) scale(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; opacity: 0; } 100% { -webkit-transform: translateY(0) rotateX(0) scale(1); transform: translateY(0) rotateX(0) scale(1); -webkit-transform-origin: 50% -1400px; transform-origin: 50% -1400px; opacity: 1; } } @keyframes fadeIn { from { opacity: 0; z-index: -1; transform: scale(.5); } to { opacity: 1; z-index: 1; transform: scale(1); } } @keyframes fadeOut { from { opacity: 1; z-index: 1; transform: scale(1); } to { opacity: 0; z-index: -1; transform: scale(.5); } } @keyframes slideOut { from { transform: translateY(0); } to { transform: translateY(100%); } } @keyframes slideIn { from { transform: translateY(100%); } to { transform: translateY(0); } } .slide-in-bottom { -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes slide-in-bottom { 0% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes slide-in-bottom { 0% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .show-lg { display: none; } /* ============================ HEADER ============================ */ header { position: fixed; top: 0; z-index: 99; background-color: var(--dark-grey); padding: 0px 10px; width: 1920px; flex-basis: 1920px; max-width: 100%; margin: 0 auto; } #logo-wrapper img { height: auto; width: 147px; max-width: 100%; } #main-menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0; margin: 0; list-style-type: none; } #main-menu li { padding: 24px 20px; position: relative; } #main-menu li:not(.sub-menu) > a { font-size: 16px; color: var(--white); font-weight: 500; text-decoration-line: none; padding: 8px 19px; border-radius: 5px; position: relative; } #main-menu li a:hover { background-color: rgba(255, 255, 255, .05); } #main-menu .sub-menu { position: absolute; width: 200px; border-radius: 10px; filter: drop-shadow(0px 23px 18px rgba(0, 0, 0, 0.06)); background-color: #dfdfdf; padding: 15px 0; top: 65px; left: 8px; display: none; opacity: 0; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; list-style-type: none; } #main-menu li.menu-item-has-children:not(.sub-menu) > a::before { content: ""; display: block; width: 12px; height: 8px; mask: url("./assets/images/dropdown.svg") no-repeat center; -webkit-mask: url("./assets/images/dropdown.svg") no-repeat center; background-size: contain; background-position: center center; background-repeat: no-repeat; background-color: rgba(91, 91, 91, 1); position: absolute; top: 15px; right: 2px; } #main-menu .sub-menu li { padding: 0; width: 100%; } #main-menu .sub-menu li a { display: block; width: 100%; text-align: left; padding: 15px 5px 15px 30px; font-size: 16px; line-height: 20px; font-weight: 500; color: var(--dark-grey); background-color: rgba(0, 0, 0, 0); overflow: hidden; position: relative; border-radius: 0; } #main-menu .sub-menu li a:before { content: ""; display: block; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background-color: var(--white); transform: translateX(100%); -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #main-menu .sub-menu li a:hover, #main-menu .sub-menu li.current-menu-item a:hover { background-color: rgba(0, 0, 0, 0.04); } #main-menu .sub-menu li a:hover:before, #main-menu .sub-menu li.current-menu-item a:before { transform: translateX(0); } #payment-menu { padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; } #payment-menu li { padding: 0; margin: 0; } #payment-menu li a { text-transform: uppercase; color: var(--light-grey); font-weight: 700; padding: 10px 25px; border: 2px solid var(--light-grey); border-radius: 5px; text-decoration-line: none; display: inline-block; } #payment-menu li a:hover, #payment-menu li a:focus { text-decoration-line: none; color: var(--white); border-color: var(--white); } /* ========================= FOOTER ========================= */ footer { position: relative; background-color: var(--dark-grey); } #footer-main-content { padding: 30px 35px; } #footer-left { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; } #footer-left span, #footer-left li a { font-size: 14px; line-height: 16px; color: var(--light-grey); font-weight: 400; } #footer-left li a:hover { color: var(--white); text-decoration-line: none; } footer #privacy-menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; padding: 0; margin: 0; list-style-type: none; padding-left: 12px; } footer #privacy-menu li { position: relative; padding: 0 12px; } footer #privacy-menu li:before { content: ""; display: block; position: absolute; left: 0; top: 11px; width: 3px; height: 3px; border-radius: 50%; background-color: var(--light-grey); } #footer-logo { display: flex; flex-wrap: wrap; justify-content: center; } #footer-logo img { width: 50px; max-width: 100%; } #footer-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; } #footer-right span, #footer-right li a { font-size: 23px; line-height: 16px; color: var(--light-grey); font-weight: 400; } #footer-right li.calendly a { padding: 7px 20px; border: 1px solid var(--light-grey); border-radius: 5px; font-size: 14px; text-transform: uppercase; font-weight: 500; } #footer-right li a:hover { color: var(--white); text-decoration-line: none; } #footer-right li.calendly a:hover { border-color: var(--white); } footer #social-menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; padding: 0; margin: 0; list-style-type: none; padding-left: 12px; } footer #social-menu li { position: relative; padding: 0 12px; } body.compensate-for-scrollbar { margin-right: auto; } #photos-loop-section { padding-bottom: 0; } /* =============================== PORTFOLIO FOOTER =============================== */ #portfolio-footer { padding: 30px 0; position: relative; background-color: var(--dark-grey); border-bottom: 1px solid rgba(255, 255, 255, .1) } #portfolio-menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0; margin: 0; } #portfolio-menu li { padding: 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } #portfolio-menu li a { font-size: 16px; color: #ffffff; font-weight: 500; padding: 8px 15px; border-radius: 5px; background-color: rgba(255, 255, 255, 0); border: 1px solid rgba(0, 0, 0, 0); text-decoration-line: none; } #portfolio-menu li.current-menu-item a, #portfolio-menu li a:hover, #portfolio-menu li.current-page-ancestor a { color: var(--light-grey); border: 1px solid rgba(255, 255, 255, .1); } @media (min-width: 992px) { #main-menu li.menu-item-has-children:hover > .sub-menu { display: block; opacity: 1; } } @media (min-width: 1400px) { .container { max-width: 1230px; } } @media (max-width: 1300px) { #main-menu li { padding: 20px 5px; } } @media (max-width: 991.8px) { .show-lg { display: block; } .hide-lg { display: none !important; } .page-content { padding-top: 68px; } header { padding: 20px 10px; } #logo-wrapper { z-index: 99; } /* ======================MOBILE MENU======================== */ .hamburger-menu { position: relative; width: 30px; height: 24px; cursor: pointer; z-index: 9998; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); margin-left: auto; margin-right: 0; } .bar, .bar:after, .bar:before { width: 30px; height: 3px; } .bar { position: relative; transform: translateY(10px); background-color: #b0b0b0; transition: all 0ms 300ms; } .bar.animate { background: rgba(255, 255, 255, 0); } .bar:before { content: ""; position: absolute; left: 0; bottom: 10px; background-color: #b0b0b0; 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: 10px; background-color: #b0b0b0; 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: 0; max-width: 450px; right: -100%; width: 100%; height: 100%; min-height: 100vh; position: fixed; z-index: 9; overflow-y: hidden; background: var(--dark-grey); -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; margin-top: 90px; 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: center; padding: 0; border-radius: 0; } #main-menu li.current-menu-ancestor a:not(.sub-menu a) { background-color: #212121; color: #FFF; } #main-menu li:not(.sub-menu) > a { width: 100%; display: block; font-size: 28px; line-height: 30px; color: var(--white); font-weight: 500; padding: 30px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); border-radius: 0; } #main-menu > li.menu-item-has-children > a:first-of-type:not(.sub-menu a)::before { content: ""; display: block; width: 33px; height: 22px; mask: url("./assets/images/mobile-menu-arrow.svg") no-repeat center; -webkit-mask: url("./assets/images/mobile-menu-arrow.svg") no-repeat center; background-size: contain; background-position: center center; background-repeat: no-repeat; background-color: rgba(91, 91, 91, 1); position: absolute; top: 33px; right: 20px; -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: #212121; } #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; } #main-menu .sub-menu.visible { display: block; } #main-menu .sub-menu li a { font-size: 20px; line-height: 26px; color: #b0b0b0; font-weight: 500; text-align: center; border: none; padding: 20px 0; } #main-menu .sub-menu li a:before { display: none; } #main-menu .sub-menu li a:hover, #main-menu .sub-menu li.current-menu-item a:hover, #main-menu .sub-menu li.current_page_item a { background-color: #212121; color: #FFF; } #payment-menu { width: 100%; flex-basis: 100%; margin-top: auto; justify-content: center; padding-bottom: 50px; } #payment-menu li { padding: 0 15px; width: 100%; } #payment-menu li a { width: 358px; max-width: 100%; border-radius: 8px; border: 2px solid rgba(255, 255, 255, .2); font-size: 22px; line-height: 36px; text-transform: uppercase; color: #dfdfdf; font-weight: 700; padding: 15px 20px; text-align: center; } #footer-left { order: 2; } #footer-logo { display: none; } #footer-right { order: 1; } #footer-left, #footer-logo, #footer-right { justify-content: center; } #footer-logo, #footer-right { margin-bottom: 20px; } footer #social-menu { justify-content: space-around; padding-left: 0; } footer #social-menu li.calendly { display: block; width: 100%; margin-top: 20px; text-align: center; } #footer-right li.calendly a { display: inline-flex; } #footer-right span, #footer-right li a { font-size: 40px; } #footer-left span, #footer-left li a { color: #8e8e8e; } #portfolio-footer { overflow: hidden; display: none !important; } #portfolio-footer .container { width: 100%; max-width: 100%; text-align: center; } #portfolio-footer .container::-webkit-scrollbar, #portfolio-menu::-webkit-scrollbar { display: none; } #portfolio-menu { padding: 0; margin: 0 20px; display: flex; flex-wrap: nowrap; overflow-x: scroll; -webkit-overflow-scrolling: touch; /*min-width: 1600px;*/ justify-content: flex-start; -ms-overflow-style: none; /* for Internet Explorer, Edge */ scrollbar-width: none; /* for Firefox */ } #portfolio-menu li { display: inline-block; list-style: none; margin-right: 20px; min-width: 200px; text-align: center; } #portfolio-menu li:last-child { margin-right: 0; } #portfolio-menu li a { text-decoration: none; display: block; } } @media (max-width: 767.8px) { h1 { font-size: 50px; line-height: 54px; font-weight: 400; font-family: 'Red Hat Display', sans-serif; margin-bottom: 20px; } h2, .h2 { font-size: 40px; line-height: 44px; font-weight: 400; font-family: 'Red Hat Display', sans-serif; margin-bottom: 20px; } h3, .h3 { font-size: 26px; line-height: 32px; font-family: 'Red Hat Display', sans-serif; margin-bottom: 15px; font-weight: 500; } h4, .h4 { font-size: 22px; line-height: 28px; font-weight: 500; font-family: 'Red Hat Display', sans-serif; margin-bottom: 15px; } h5, .h5 { font-size: 18px; line-height: 22px; margin-bottom: 15px; } } @media (max-width: 575.8px) { h1 { font-size: 40px; line-height: 44px; } h2, .h2 { font-size: 32px; line-height: 40px; } } @media (max-width: 479.8px) { .normal-button, .subtle-button { width: 240px; flex-basis: 240px; max-width: 100%; margin: 10px auto; } footer #privacy-menu { order: 1; padding: 0; } footer #privacy-menu li:first-of-type:before { display: none; } #footer-left .year { display: block; width: 100%; text-align: center; order: 2; padding: 0; margin-top: 10px; } } @media (max-width: 380px) { footer #privacy-menu { justify-content: center; } footer #privacy-menu li:before { display: none; } #footer-right span, #footer-right li a { font-size: 32px; } } @media (max-width: 320px) { #footer-right span, #footer-right li a { font-size: 24px; } footer #social-menu li { padding: 0 8px; } } .fancybox-navigation .fancybox-button--arrow_right { right: 30px; } .fancybox-navigation .fancybox-button--arrow_left { left: 30px; } .fancybox-is-open .fancybox-bg { opacity: 1; } #error-hero { padding: 150px 0; position: relative; background-color: var(--dark-grey); z-index: 2; min-height: 90vh; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; color: var(--darker-grey); } #error-hero .container { position: relative; } #page-wrapper { padding-top: 100px; padding-bottom: 60px; border-bottom: 1px solid rgba(255, 255, 255, .1); background-color: var(--lighter-grey); } #page-wrapper a { color: var(--black); text-decoration-line: underline; } #page-wrapper ul, #page-wrapper ol { margin-left: 30px; margin-top: 10px; } #page-wrapper ul li, #page-wrapper ol li { margin-bottom: 10px; } #page-wrapper ul li:last-of-type, #page-wrapper ol li:last-of-type { margin-bottom: 0; }