/* Layer Declarations */
@layer bootstrap, utilities, fonts, rs, slick, components, overrides ;
/* Bootstrap */
@import url('assets/css/vendor/bootstrap.min.css') layer(bootstrap);
@import url('assets/css/vendor/slick.css') layer(slick);
/* Utilities */
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
font-family: 'Gunterz';
src: url('assets/fonts/Gunterz-BlackItalic.woff2') format('woff2'),
url('assets/fonts/Gunterz-BlackItalic.woff') format('woff');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Gunterz';
src: url('assets/fonts/Gunterz-BoldItalic.woff2') format('woff2'),
url('assets/fonts/Gunterz-BoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Gunterz';
src: url('assets/fonts/Gunterz-Medium.woff2') format('woff2'),
url('assets/fonts/Gunterz-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gunterz';
src: url('assets/fonts/Gunterz-Black.woff2') format('woff2'),
url('assets/fonts/Gunterz-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gunterz';
src: url('assets/fonts/Gunterz-MediumItalic.woff2') format('woff2'),
url('assets/fonts/Gunterz-MediumItalic.woff') format('woff');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Gunterz';
src: url('assets/fonts/Gunterz-Bold.woff2') format('woff2'),
url('assets/fonts/Gunterz-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gunterz';
src: url('assets/fonts/Gunterz-Regular.woff2') format('woff2'),
url('assets/fonts/Gunterz-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gunterz';
src: url('assets/fonts/Gunterz-Italic.woff2') format('woff2'),
url('assets/fonts/Gunterz-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
/* RS */
@layer rs {
/* Variables
----------------------------------------------------
*/
:root {
/* - - Fonts - - */
--museo: museo, Helvetica, Arial, sans-serif;
--sans: museo-sans, Helvetica, Arial, sans-serif;
--gunterz: 'Gunterz', ‘Montserrat’, ‘Arial’, sans-serif;
--monserrat: "Montserrat", Helvetica, Arial, serif;
--inter: "Inter", sans-serif;
--weight-normal: 400;
--weight-bold: 700;
--font-factor: 1;
--font-scale: 1.125;
--font-size: 1rem;
/* - - Colors - - */
--blue: oklch(from #9BD0E4 l c h);
--light-blue: oklch(from #D6EFF7 l c h);
--rich-black: #020617;
--gainsboro: #E9E9E9;
--white-smoke: #F5F5F5;
--light-grey: oklch(from #1D1D1D l c h);
--silver-grey: oklch(from #C7C6C7 l c h);
--dark-red: oklch(from #B52E38 l c h);
--orange: #FF5C39;
/* -- Eearthquake strong colors */
--burgundy-brick: #7A1E1E;
--yellow: #FFC800;
--grey-rgb: 67 66 68; /* #434244 */
--grey: rgb(var(--grey-rgb) / 100%);
--black-rgb: 0 0 0;
--black: oklch(from #262526 l c h);
--white-rgb: 255 255 255; /* #FFF */
--white: rgb(var(--white-rgb) / 100%);
/* - - Global Assignments - - */
--navbar-toggler: var(--white);
--navbar-accent: var(--white);
--placeholder: var(--black);
--placeholder-fz: 14px;
--focus: var(--black);
--skip-background: var(--white);
--skip-border: var(--black);
--skip-color: var(--black);
--selection-background: var(--dark-red);
--selection-color: var(--white);
--header: 7.1875rem;
/* --scroll-header: Xrem; */
/* --footer: Xrem; */
--body-color: var(--grey);
--body-font: var(--monserrat);
--body-weight: 400;
--content-margin: 1rem;
--heading-color: var(--black);
--heading-font: var(--gunterz);
--heading-weight: var(--weight-bold);
--heading-margin: 1rem;
--btn-radius: 8px;
--icon-width: 56px;
--btn-icon-radius: 4px;
--heading-spaser: 1rem;
--spacer: 4rem;
--gutter: 2rem;
--row-x: 30px;
--row-y: 0;
--transition: .25s all;
--list-color: var(--dark-red);
/* - - Spacing - - */
--col-1: 8.3333333333%;
--col-2: 16.6666666667%;
--col-3: 25%;
--col-4: 33.3333333333%;
--col-5: 41.6666666667%;
--col-6: 50%;
--col-7: 58.3333333333%;
--col-8: 66.6666666667%;
--col-9: 75%;
--col-10: 83.3333333333%;
--col-11: 91.6666666667%;
--container-col-1: calc(var(--container-width) * (1 / 12));
--container-col-2: calc(var(--container-width) * (2 / 12));
--container-col-3: calc(var(--container-width) * (3 / 12));
--container-col-4: calc(var(--container-width) * (4 / 12));
--container-col-5: calc(var(--container-width) * (5 / 12));
--container-col-6: calc(var(--container-width) * (6 / 12));
--container-col-7: calc(var(--container-width) * (7 / 12));
--container-col-8: calc(var(--container-width) * (8 / 12));
--container-col-9: calc(var(--container-width) * (9 / 12));
--container-col-10: calc(var(--container-width) * (10 / 12));
--container-col-11: calc(var(--container-width) * (11 / 12));
--container-width: 100%;
--container-padding: 2rem;
--page-gutters: calc(100vw - (var(--container-padding) * 2));
--single-gutter: var(--container-padding);
--padded-gutter: var(--container-padding);
--align-items: normal;
--flex-direction: row;
--justify-content: normal;
--negative-spacer: calc(var(--spacer) * -1);
--subspacer: calc(var(--spacer) / 2);
--negative-subspacer: calc(var(--subspacer) * -1);
--negative-gutter: calc(var(--gutter) * -1);
}
@media (min-width: 576px) {
:root {
--container-padding: calc(var(--row-x) * .5);
--container-width: 540px;
--page-gutters: calc(100vw - var(--container-width));
--single-gutter: calc(var(--page-gutters) / 2);
--padded-gutter: calc(var(--single-gutter) + var(--container-padding));
}
}
@media (min-width: 768px) {
:root {
--container-width: 720px;
--spacer: 5rem;
}
}
@media (min-width: 992px) {
:root {
--container-width: 960px;
--font-scale: 1.25;
--spacer: 6rem;
}
}
@media (min-width: 1200px) {
:root {
--container-width: 1140px;
}
}
@media (min-width: 1400px) {
:root {
--container-width: 1380px;
--font-scale: 1.333;
--row-x: 60px;
}
}
@media (min-width: 1600px) {
:root {
--container-width: 1520px;
}
}
/* Icons
----------------------------------------------------
*/
@font-face {
font-family: 'icons';
src: url('assets/css/icons/icomoon.eot');
src: url('assets/css/icons/icomoon.eot') format('embedded-opentype'),
url('assets/css/icons/icomoon.ttf') format('truetype'),
url('assets/css/icons/icomoon.woff') format('woff'),
url('assets/css/icons/icomoon.svg') format('svg');
font-display: block;
font-style: normal;
font-weight: normal;
}
:root {
--icons: 'icons';
--arrow-down: "\e900";
--arrow-left: "\e901";
--arrow-right: "\e902";
--arrow-up: "\e903";
--chevron-down: "\e904";
--chevron-left: "\e905";
--chevron-right: "\e906";
--chevron-up: "\e907";
--facebook: "\e908";
--instagram: "\e909";
--linkedin: "\e90a";
--pinterest: "\e90f";
--tiktok: "\e90b";
--twitter: "\e90c";
--vimeo: "\e90d";
--x: "\e910";
--youtube: "\e90e";
}
[class*="icon"] {
text-decoration: none;
}
[class*="icon"]:before {
font-family: var(--icons);
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-decoration: none;
text-transform: none;
}
.icon.arrow-down:before {
content: var(--arrow-down);
}
.icon.arrow-left:before {
content: var(--arrow-left);
}
.icon.arrow-right:before {
content: var(--arrow-right);
}
.icon.arrow-up:before {
content: var(--arrow-up);
}
.icon.chevron-down:before {
content: var(--chevron-down);
}
.icon.chevron-left:before {
content: var(--chevron-left);
}
.icon.chevron-right:before {
content: var(--chevron-right);
}
.icon.chevron-up:before {
content: var(--chevron-up);
}
.icon.facebook:before {
content: var(--facebook);
}
.icon.instagram:before {
content: var(--instagram);
}
.icon.linkedin:before {
content: var(--linkedin);
}
.icon.pinterest:before {
content: var(--pinterest);
}
.icon.tiktok:before {
content: var(--tiktok);
}
.icon.twitter:before {
content: var(--twitter);
}
.icon.vimeo:before {
content: var(--vimeo);
}
.icon.x:before {
content: var(--x);
}
.icon.youtube:before {
content: var(--youtube);
}
/* Resets & Structure
----------------------------------------------------
*/
*:focus {
box-shadow: none;
outline: .0625rem dashed var(--focus);
outline-offset: .125rem;
}
::selection {
background: var(--selection-background);
color: var(--selection-color);
-webkit-text-fill-color: var(--selection-color);
}
.skip-to {
background-color: var(--skip-background);
border: .125rem solid var(--skip-border);
color: var(--skip-color);
height: 1px;
inset: auto auto auto -10000px;
overflow: hidden;
padding: .5rem 1rem;
position: absolute;
text-decoration: none;
width: 1px;
z-index: 9999;
}
.skip-to:focus {
height: auto;
inset: .25rem auto auto .25rem;
width: auto;
}
html {
scroll-behavior: smooth;
}
body {
color: var(--body-color);
display: flex;
font-family: var(--body-font);
font-size: var(--font-size);
font-weight: var(--body-weight);
flex-direction: column;
line-height: 1.5;
margin: 0;
min-height: 100vh;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html.open-menu, html.open-menu body {
min-height: 100vh;
overflow: hidden;
position: static !important;
}
body > :where(iframe, img) {
border: 0 !important;
clip: rect(0, 0, 0, 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
main {
padding-top: var(--header);
position: relative;
}
.container {
max-width: var(--container-width);
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
.row {
align-items: var(--align-items);
flex-direction: var(--flex-direction);
justify-content: var(--justify-content);
margin-left: calc(var(--row-x) / -2);
margin-right: calc(var(--row-x) / -2);
margin-top: calc(var(--row-y) * -1);
}
.row > * {
margin-top: var(--row-y);
padding-left: calc(var(--row-x) / 2);
padding-right: calc(var(--row-x) / 2);
}
.section {
margin-bottom: var(--spacer);
}
.subsection {
margin-bottom: var(--subspacer);
}
.wrapper {
padding-bottom: var(--spacer);
padding-top: var(--spacer);
}
.wrapper.section + .wrapper {
margin-top: var(--negative-spacer);
}
:where(header, main, footer) img {
height: auto;
max-width: 100%;
object-fit: cover;
width: 100%;
}
iframe {
aspect-ratio: 16 / 9;
height: auto;
position: relative;
width: 100%;
}
.lazy {
opacity: 0;
transition: var(--transition);
}
.lazy.loaded {
opacity: 1;
}
:where(a, *[class^="btn"], button, input, select, textarea, #navigation),
:where(a, *[class^="btn"], button, input, select, textarea, #navigation):after,
:where(a, *[class^="btn"], button, input, select, textarea, #navigation):before {
transition: var(--transition);
}
@media (min-width: 768px) {
.two-col,
.three-col {
column-gap: var(--gutter);
columns: 2;
}
.two-col > *,
.three-col > * {
break-inside: avoid;
page-break-inside: avoid;
}
}
@media (min-width: 992px) {
.container.inset {
max-width: var(--container-col-10);
}
.three-col {
columns: 3;
}
}
@media (min-width: 1200px) {
.container.inset-xl {
max-width: var(--container-col-10);
}
}
@media (min-width: 1400px) {
.container.inset-xxl {
max-width: var(--container-col-10);
}
}
/* Forms
----------------------------------------------------
*/
input,
label,
select,
textarea,
button,
fieldset,
legend,
datalist,
output,
option,
optgroup {
-webkit-appearance: none;
-webkit-border-radius: 0;
appearance: none;
border: 0;
border-radius: 0;
display: block;
width: 100%;
padding: 17px 26px;
}
::-webkit-input-placeholder {
color: var(--placeholder);
font-size: var(--placeholder-fz);
}
:-ms-input-placeholder {
color: var(--placeholder);
font-size: var(--placeholder-fz);
}
::placeholder {
color: var(--placeholder);
font-size: var(--placeholder-fz);
}
.input {
margin-bottom: var(--gutter);
}
input[type='submit'] {
padding: 17px 102px 16px 46px;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
border: 2px solid var(--dark-red);
color: var(--white);
font-weight: 700;
font-size: 14px;
background-color: transparent;
position: relative;
}
p:has(input[type='submit']) {
position: relative;
}
p:has(input[type='submit']):after {
content: '';
border-left: 1px solid var(--dark-red);
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 56px;
background-repeat: no-repeat;
background-position: center;
background-image: url('data:image/svg+xml,');
pointer-events: none;
}
input[type='submit']:hover {
background-color: var(--dark-red);
}
/* Typography
----------------------------------------------------
*/
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
color: var(--heading-color);
font-family: var(--heading-font);
font-size: calc(var(--font-size) * pow(var(--font-scale), var(--font-factor)));
font-weight: var(--heading-weight);
margin-bottom: var(--heading-spaser);
}
h1, .h1 {
--font-factor: 4.1;
line-height: 1;
}
h2, .h2 {
--font-factor: 2.85;
--heading-weight: 900;
}
h3, .h3 {
--font-factor: 2.6;
}
h4, .h4 {
--font-factor: 2;
}
h5, .h5 {
--font-factor: 1.4;
--heading-font: var(--monserrat);
--heading-weight: 800;
}
h6, .h6 {
--font-factor: 0.8;
}
@media (min-width: 1400px) {
h1, .h1 {
font-size: 3.875rem;
}
}
a {
color: var(--black);
}
a:hover {
color: var(--dark-red);
}
p {
margin-bottom: var(--content-margin);
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
main :where(ul, ol) {
--item-margin: .5rem;
margin-bottom: var(--content-margin);
}
main :where(ul, ol) li {
margin-bottom: var(--item-margin);
position: relative;
}
main ul li {
background: linear-gradient(to bottom, var(--list-color), var(--list-color)) no-repeat bottom;
background-position: 0 .625rem;
background-size: .375rem .375rem;
padding-left: 1.25rem;
}
main ol {
padding-left: 1.25rem;
}
main ol li {
padding-left: .25rem;
}
main ol li::marker {
color: var(--list-color);
font-weight: var(--weight-bold);
}
:where(
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
ul, ol, li,
p
):last-child {
margin-bottom: 0;
}
/* Footer
----------------------------------------------------
*/
footer {
color: var(--grey);
font-size: 0.875rem;
margin-top: auto;
padding-bottom: 5.625rem;
padding-top: 8.75rem;
}
.footer-menu {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
display: flex;
flex-wrap: wrap;
font-size: 1.125rem;
gap: 1.875rem;
justify-content: center;
margin-bottom: 2.8125rem;
padding-bottom: 1.875rem;
}
footer a {
color: var(--rich-black);
font-weight: 700;
text-decoration: none;
}
footer a:hover {
color: var(--dark-red);
}
footer address {
color: var(--grey);
margin-left: auto;
margin-right: auto;
max-width: 17.8125rem;
}
.copy {
border-top: 1px solid rgba(0, 0, 0, 0.2);
color: var(--grey);
font-family: var(--inter);
font-size: 0.75rem;
margin-top: 2.8125rem;
padding-top: 1.875rem;
}
.footer-form-inner {
--heading-color: var(--white);
background-color: var(--dark-red);
border-radius: 1rem;
color: var(--white);
margin-bottom: -6.875rem;
padding: 2.5rem 1.875rem;
}
.footer-logo {
height: 3.8125rem;
object-fit: contain;
width: 13.875rem;
}
.footer-mail {
font-size: 1.125rem;
}
.wpcf7 {
margin-top: -1rem;
}
.wpcf7-form p br {
display: none;
}
@media (min-width: 768px) {
.wpcf7-form {
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 0.5rem;
padding: 0.5rem;
}
.wpcf7-form p {
margin-bottom: 0;
}
input {
border-radius: 0.5rem 0 0 0.5rem;
}
input[type="submit"] {
border-radius: 0 0.5rem 0.5rem 0;
}
}
@media (min-width: 992px) {
footer address {
margin-right: 0;
}
.footer-menu {
justify-content: space-around;
}
}
@media (min-width: 1200px) {
.footer-form-inner {
padding: 4.6875rem;
}
}
}
/* Main Styles */
@layer components {
/* Global Styles
----------------------------------------------------
*/
.btn {
align-items: center;
border: 2px solid var(--dark-red);
border-radius: 0.5rem;
box-sizing: border-box;
color: var(--grey);
display: flex;
flex-direction: row;
font-size: 0.875rem;
font-weight: 700;
gap: 0.625rem;
justify-content: center;
padding: 0.75rem 0.9375rem;
}
.btn:hover {
background-color: var(--dark-red);
color: var(--white);
}
.logo,
.logo img {
display: inline-block;
height: 3.125rem;
object-fit: contain;
width: 13.125rem;
}
/* Navigation
---------------------------------------------------- */
.scroll.down:not(.open-menu) header.hideable {
transform: translateY(-100%);
}
.scroll header {
box-shadow: 0 0 1rem 0 rgb(var(--black-rgb) / 25%);
}
header {
background-color: var(--white);
inset: 0 0 auto;
position: fixed;
transition: var(--transition);
width: 100%;
z-index: 9999;
}
header .navbar {
align-items: center;
padding: 2.0625rem 0;
}
#navigation {
background-color: var(--white);
display: flex;
flex-direction: column;
height: 0;
inset: var(--header) 0 0;
opacity: 0;
overflow: scroll;
padding: var(--gutter) var(--padded-gutter) var(--subspacer);
position: fixed;
visibility: hidden;
}
#navigation.show {
height: calc(100% - var(--header));
opacity: 1;
visibility: visible;
}
#navigation .navbar-nav,
#navigation .navbar-nav > li {
width: 100%;
}
#navigation .navbar-nav > li:not(:first-child) {
border-top: 0.0625rem solid rgb(var(--grey-rgb) / 25%);
margin: var(--gutter) 0 0;
padding: var(--gutter) 0 0;
}
#navigation .sub-menu {
border-left: 0.125rem solid rgb(var(--grey-rgb) / 25%);
margin: 0.5rem 0 0;
padding: 0 0 0 var(--gutter);
width: 100%;
}
#navigation .sub-menu > li:not(:last-child) {
margin-bottom: 0.5rem;
}
#navigation a:not(.btn) {
color: var(--black);
display: inline-block;
font-size: 1.25rem;
font-weight: 600;
text-decoration: none;
}
#navigation a:not(.btn):hover {
color: var(--dark-red);
}
#navigation a:not(.btn).tell {
font-family: var(--gunterz);
font-weight: 900;
margin-bottom: 1.5rem;
}
header .current-menu-item {
border-bottom: 1px solid var(--dark-red);
}
.menu-container{
margin-bottom: var(--gutter);
}
@media (min-width: 992px) {
.menu-container{
margin-bottom: 0;
}
header .navbar {
align-items: end;
}
.header-phone{
width: 100%;
}
#navigation {
align-items: center;
background: 0;
flex-wrap: wrap;
gap: 0.7rem 1.875rem;
height: auto;
inset: auto;
margin: 0 0 0 var(--gutter);
opacity: 1;
overflow: visible;
padding: 0;
position: relative;
visibility: visible;
}
#navigation .navbar-nav {
align-items: center;
border: 0;
flex: 0 0 auto;
padding: 0;
position: relative;
width: auto;
}
#navigation .navbar-nav,
#navigation .navbar-nav > li {
position: relative;
width: auto;
}
#navigation .navbar-nav > li:not(:first-child) {
border-top: 0;
margin: 0 0 0 var(--gutter);
padding: 0;
}
#navigation .navbar-nav > li:last-child(1) .sub-menu {
inset: 100% 0 auto auto;
}
#navigation .navbar-nav > li:hover .sub-menu {
opacity: 100%;
visibility: visible;
}
#navigation .navbar-nav > li > a {
color: var(--black);
}
#navigation .sub-menu {
background-color: var(--white);
border: 0;
border-radius: 0.5rem;
box-shadow: 0 0 0.5rem 0.125rem rgb(var(--black-rgb) / 15%);
display: inline;
inset: 100% auto auto 0;
margin: 0;
min-width: 14.5rem;
opacity: 0;
padding: 1rem 1.5rem;
position: absolute;
transition: var(--transition);
visibility: hidden;
}
#navigation .sub-menu > li:not(:last-child) {
border-bottom: 0.0625rem solid rgb(var(--grey-rgb) / 25%);
margin-bottom: 0.75rem;
padding-bottom: 0.75rem;
}
#navigation a:not(.btn),
#navigation .sub-menu a:not(.btn) {
font-size: 0.8125rem;
}
#navigation a:not(.btn).tell {
margin-bottom: 0;
}
.logo,
.logo img {
margin-top: -.8rem;
height: 2.5625rem;
width: 9.375rem;
}
header .navbar-toggler {
display: none;
}
#navigation > ul > li > a:not(.btn, :only-child):after {
color: var(--white);
content: var(--chevron-down);
font-family: var(--icons);
font-size: .375rem;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
margin-left: .375rem;
opacity: 50%;
position: relative;
text-decoration: none;
text-transform: none;
top: -.125rem;
}
}
@media (min-width: 1200px) {
.logo,
.logo img {
display: inline-block;
width: 13.875rem;
height: 3.8125rem;
}
#navigation .sub-menu a:not(.btn) {
font-size: 1rem;
}
#navigation a:not(.btn),
#navigation .sub-menu a:not(.btn) {
font-size: 0.875rem;
}
.btn {
padding: 0.75rem 1.4375rem;
border-radius: var(--btn-radius);
font-size: 1rem;
}
}
@media (min-width: 1400px) {
#navigation a:not(.btn),
#navigation .sub-menu a:not(.btn) {
font-size: 1rem;
}
}
header .navbar-toggler {
border: 0;
border-radius: 0;
height: 1.5rem;
padding: 0;
position: relative;
transition: var(--transition);
width: 2rem;
z-index: 1;
}
header .navbar-toggler .inner {
background-color: var(--black);
height: .125rem;
inset: auto 0;
position: absolute;
transition: var(--transition);
width: 2rem;
}
header .navbar-toggler .inner:nth-child(1) {
animation-duration: .25s;
animation-fill-mode: forwards;
animation-name: navbar-toggler-1-close;
animation-timing-function: linear;
top: 0;
}
header .navbar-toggler .inner:nth-child(2) {
top: calc(50% - (.125rem / 2));
transition-delay: .125s;
transition-duration: 0s;
}
header .navbar-toggler .inner:nth-child(3) {
animation-duration: .25s;
animation-fill-mode: forwards;
animation-name: navbar-toggler-3-close;
animation-timing-function: linear;
top: calc(100% - .125rem);
}
header .navbar-toggler[aria-expanded="true"] .inner {
background-color: var(--black);
top: calc(50% - (.125rem / 2));
}
header .navbar-toggler[aria-expanded="true"] .inner:nth-child(1) {
animation-name: navbar-toggler-1-open;
}
header .navbar-toggler[aria-expanded="true"] .inner:nth-child(2) {
left: 50%;
right: 50%;
width: 0;
}
header .navbar-toggler[aria-expanded="true"] .inner:nth-child(3) {
animation-name: navbar-toggler-3-open;
}
@keyframes navbar-toggler-1-open {
0% {
top: 0;
transform: rotate(0);
}
50% {
top: calc(50% - (.125rem / 2));
transform: rotate(0);
}
100% {
top: calc(50% - (.125rem / 2));
transform: rotate(45deg);
}
}
@keyframes navbar-toggler-1-close {
0% {
top: calc(50% - (.125rem / 2));
transform: rotate(45deg);
}
50% {
top: calc(50% - (.125rem / 2));
transform: rotate(0);
}
100% {
top: 0;
transform: rotate(0);
}
}
@keyframes navbar-toggler-3-open {
0% {
top: calc(100% - .125rem);
transform: rotate(0);
}
50% {
top: calc(50% - (.125rem / 2));
transform: rotate(0);
}
100% {
top: calc(50% - (.125rem / 2));
transform: rotate(-45deg);
}
}
@keyframes navbar-toggler-3-close {
0% {
top: calc(50% - (.125rem / 2));
transform: rotate(-45deg);
}
50% {
top: calc(50% - (.125rem / 2));
transform: rotate(0);
}
100% {
top: calc(100% - .125rem);
transform: rotate(0);
}
}
/* Footer
----------------------------------------------------
*/
footer {
background-color: var(--white-smoke);
color: var(--rich-black);
}
.text-white {
color: var(--white);
}
.text-orange {
color: var(--orange);
}
.text-burgundy-brick {
color: var(--burgundy-brick);
}
.text-grey {
color: var(--grey);
}
.text-dark-red {
color: var(--dark-red);
}
.footer-phone {
--heading-weight: 900;
}
.footer-phone:hover {
color: var(--body-color);
}
.h5 + .h2 {
margin-top: calc(var(--heading-spaser) * -1);
}
.btn-icon {
border: 0.0625rem solid;
border-radius: var(--btn-icon-radius);
font-size: 0.875rem;
font-weight: 800;
min-width: 11.25rem;
padding: 1.0625rem calc(1.375rem + var(--icon-width)) 1.0625rem 1.375rem;
position: relative;
width: fit-content;
}
.btn-icon:after {
content: '';
position: absolute;
right: 0;
top: 0;
height: 100%;
width: var(--icon-width);
background-repeat: no-repeat;
background-position: center;
border-left: 0.0625rem solid;
}
.btn-dark-red-arrow {
color: var(--grey);
background-color: var(--white);
margin: 0.4375rem;
}
.btn-dark-red-arrow:before {
position: absolute;
content: '';
width: calc(100% + 1rem);
height: calc(100% + 1rem);
background-color: var(--white);
border-radius: var(--btn-radius);
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-dark-red-arrow:after {
background-image: url("data:image/svg+xml,%3Csvg width='1.5625rem' height='1.5625rem' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 12.5H19.5' stroke='%23B52E38' stroke-width='0.09375rem' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5 5.5L19.5 12.5L12.5 19.5' stroke='%23B52E38' stroke-width='0.09375rem' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
border-left: 0.0625rem solid var(--white);
border-color: var(--grey);
}
.btn-dark-red-arrow:hover {
background-color: var(--dark-red);
border-color: var(--dark-red);
color: var(--white);
}
.btn-dark-red-arrow:hover:after {
background-image: url("data:image/svg+xml,%3Csvg width='1.5625rem' height='1.5625rem' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 12.5H19.5' stroke='white' stroke-width='0.09375rem' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5 5.5L19.5 12.5L12.5 19.5' stroke='white' stroke-width='0.09375rem' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
border-left: 0.0625rem solid var(--white);
border-color: var(--white);
}
.btn-yellow-border-arrow {
color: var(--grey);
border: 0.125rem solid var(--yellow);
background-color: transparent;
}
.btn-yellow-border-arrow:after {
background-image: url('data:image/svg+xml,');
border-left: 0.125rem solid var(--yellow);
}
.btn-yellow-border-arrow:hover {
background-color: var(--yellow);
color: var(--white);
}
.btn-yellow-border-arrow:hover:after {
background-image: url('data:image/svg+xml,');
border-color: var(--white);
}
.btn-orange-arrow {
border-color: rgba(67, 66, 68, 0.5);
background-color: transparent;
color: var(--grey);
}
.btn-orange-arrow:after {
background-image: url('data:image/svg+xml,');
border-color: rgba(67, 66, 68, 0.5);
}
.btn-orange-arrow:hover {
background-color: var(--dark-red);
border-color: var(--dark-red);
color: var(--white);
}
.btn-orange-arrow:hover:after {
background-image: url('data:image/svg+xml,');
border-color: var(--white);
}
.btn-orange-bg-search {
background-color: var(--dark-red);
border: none;
border-radius: var(--btn-radius);
color: var(--white);
margin-left: 0.4375rem;
padding: 1.625rem calc(2.1875rem + var(--icon-width)) 1.625rem 2.5rem;
}
.btn-orange-bg-search:after {
background-image: url('data:image/svg+xml,');
border-color: var(--white);
height: calc(100% - 1.0625rem);
right: 0.625rem;
top: 0.5625rem;
}
.btn-orange-bg-search:before {
border: 1px solid var(--white);
border-radius: 0.25rem;
content: '';
height: calc(100% - 1rem);
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 1rem);
}
.btn-orange-bg-search:hover {
background-color: var(--white);
color: var(--dark-red);
}
.btn-orange-bg-search:hover:after {
border-color: var(--dark-red);
background-image: url('data:image/svg+xml,');
}
.btn-orange-bg-search:hover:before {
border-color: var(--dark-red);
}
.btn-orange-bg-download {
background-color: var(--dark-red);
border: none;
border-radius: var(--btn-radius);
color: var(--white);
margin-left: 0.4375rem;
padding: 1.625rem calc(2.1875rem + var(--icon-width)) 1.625rem 2.5rem;
}
.btn-orange-bg-download:before {
border: 1px solid var(--white);
border-radius: 0.25rem;
content: '';
height: calc(100% - 1rem);
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 1rem);
}
.btn-orange-bg-download:after {
background-image: url('data:image/svg+xml,');
height: calc(100% - 1.0625rem);
right: 0.625rem;
top: 0.5625rem;
}
.btn-orange-bg-download:hover:before {
border-color: var(--dark-red);
}
.btn-orange-bg-download:hover {
background-color: var(--white);
color: var(--dark-red);
border-color: var(--dark-red);
}
.btn-orange-bg-download:hover:after {
border-color: var(--dark-red);
background-image: url('data:image/svg+xml,');
}
.btn-orange-download {
color: var(--grey);
border-color: rgba(67, 66, 68, 0.5);
background-color: transparent;
}
.btn-orange-download:after {
background-image: url('data:image/svg+xml,');
border-color: rgba(67, 66, 68, 0.5);
}
.btn-orange-download:hover {
background-color: var(--dark-red);
color: var(--white);
border-color: var(--dark-red);
}
.btn-orange-download:hover:after {
border-color: var(--white);
background-image: url('data:image/svg+xml,');
}
.min-w-content {
min-width: fit-content;
}
.small-container {
max-width: var(--container-width);
padding-left: var(--container-padding);
padding-right: var(--container-padding);
margin: 0 auto;
}
small {
font-size: calc(0.89 * 1em);
}
/* Lightbox styling */
#custom-video-lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
justify-content: center;
align-items: center;
}
body:has(#custom-video-lightbox iframe, #custom-video-lightbox iframe) {
overflow: hidden;
}
#custom-video-lightbox .lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#custom-video-lightbox .video-wrapper {
max-width: 1600px;
margin: 0 auto;
}
#custom-video-lightbox .video-wrapper iframe,
#custom-video-lightbox .video-wrapper video {
width: 100%;
height: 100%;
}
#custom-video-lightbox .lightbox-close {
color: white;
cursor: pointer;
font-size: 5.625rem;
line-height: 1;
position: absolute;
right: 2.25rem;
top: 0.625rem;
z-index: 10000;
}
#custom-video-lightbox .video-wrapper.preloader::before {
animation: spin 1s linear infinite;
border: 0.3125rem solid #f3f3f3;
border-radius: 50%;
border-top: 0.3125rem solid #3498db;
content: '';
display: block;
height: 4.375rem;
left: 50%;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
width: 4.375rem;
z-index: 9999;
}
.bg-dark-grey {
background-color: var(--light-grey);
}
.bg-grey {
background-color: var(--gainsboro);
}
.container .small-container {
--container-padding: 1.875rem;
}
p + *:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
margin-top: 1.875rem;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@media (min-width: 1400px) {
.small-container {
--container-width: calc(1095px + 4rem);
}
}
@media (min-width: 1600px) {
.small-container {
--container-width: calc(1300px + 4rem);
}
}
/* Hero section */
.hero {
background-color: var(--light-blue);
position: relative;
overflow: hidden;
font-weight: 600;
}
.hero h5, .hero .h5 {
--heading-color: var(--black);
}
.hero-image-with-content p:has(small) {
margin-bottom: 0;
}
.hero-image-with-content h1{
--heading-spaser: 0;
}
.hero-image-with-content small {
/* opacity: .5; */
font-weight: 700;
letter-spacing: 0.1em;
}
body.single .hero-image-with-content small {
font-size: 1.25rem;
text-transform: uppercase;
}
.hero-image-with-content p + *:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
margin-top: 0;
}
body.single .hero-image-with-content p + h1 {
--font-factor: 3.875;
font-family: var(--monserrat);
text-transform: none;
}
.hero:after {
content: '';
background-color: var(--blue);
position: absolute;
height: 20%;
width: 100%;
top: auto;
right: 0;
z-index: 2;
bottom: 0;
}
.hero > div {
position: relative;
z-index: 3;
}
.home h1 {
line-height: 1.03;
}
.hero-video-image {
aspect-ratio: 6 / 4;
}
.hero-video-image:not(.image-rounded){
border-radius: 1rem 0 0 1rem;
border-right: 1rem solid var(--dark-red);
}
.hero-video-image.image-rounded {
border-radius: 1rem;
}
.hero .hero-content {
padding-left: 4.0625rem;
position: relative;
}
.hero-image-with-content .image-with-content {
background-color: var(--blue);
border-radius: 1rem;
margin-bottom: -32.5rem;
padding-bottom: 1.875rem;
padding-top: 1.875rem;
position: relative;
transform: translateY(-30.5rem);
z-index: 10;
}
.hero-image-with-content.page-title .hero {
padding: var(--subspacer) 0;
}
.hero-image-with-content:not(.page-title) .hero {
padding-bottom: 28.75rem;
}
body.single .hero-image-with-content .image-with-content {
margin-bottom: -28.75rem;
transform: translateY(-28.75rem);
}
.hero .image-with-content small {
opacity: .5;
}
.hero-image-with-content .image-with-content .btn-grey-arrow {
color: var(--white);
}
.hero-image-with-content .image-with-content .btn-grey-arrow:after {
background-image: url('data:image/svg+xml,');
}
.hero .image-with-content h5, .hero .image-with-content .h5 {
--heading-color: var(--white);
}
.hero-content::after {
content: '';
height: 100%;
position: absolute;
border-left: 2px dashed var(--white);
top: 0;
left: 15px;
}
.hero-image-with-content .hero::after {
display: none;
}
.hero-bg {
bottom: -15.625rem;
min-height: 100%;
opacity: 0.7;
position: absolute;
right: -40vw;
rotate: 180deg;
width: var(--container-width);
z-index: 1;
}
.hero-video-container {
position: relative;
}
.hero-video-container:hover .play-button {
background-color: var(--white);
}
.play-button {
align-items: center;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 50%;
display: flex;
height: 5rem;
justify-content: center;
left: 46%;
padding: 0;
position: absolute;
scale: 0.7;
top: 46%;
transform: translate(-50%, -50%);
width: 5rem;
}
.play-button svg {
transform: translateX(0.125rem);
}
@media (min-width: 576px) {
/*Hero*/
.play-button {
scale: 1;
top: 49%;
left: 49%;
}
}
@media (min-width: 768px) {
.hero-bg {
bottom: -11.5625rem;
}
}
@media (min-width: 992px) {
.hero-image-with-content .hero{
padding-top: calc(var(--spacer) * 1.5);
}
.hero-bg {
position: absolute;
top: 43%;
right: -3.8125rem;
width: 77%;
transform: translateY(-50%);
min-height: 100%;
rotate: 5deg;
z-index: 1;
}
.hero-image-with-content .hero-bg {
right: -15.1875rem;
top: 50%;
width: 74%;
min-height: 100%;
rotate: 0deg;
}
.hero:after {
height: 100%;
width: calc((100vw - var(--container-width)) / 2 + (var(--container-width) / 2 * 0.33));
top: 0;
right: 0;
bottom: auto;
}
.hero .hero-content {
padding-right: 6.25rem;
}
.hero-image-with-content .image-with-content {
transform: translateY(-26.25rem);
margin-bottom: -26.25rem;
padding-bottom: var(--spacer);
padding-top: var(--spacer);
}
}
@media (min-width: 1200px) {
.hero.image-left .hero-bg {
left: -19.375rem;
}
}
@media (min-width: 1400px) {
.hero.image-left .hero-content {
padding-left: 3.75rem;
}
.hero .hero-content {
padding-left: 8.75rem;
}
.hero-content:after {
left: 5.625rem;
}
}
/* Image with content section */
.image-with-content .image-container img {
border-radius: 1rem;
}
.image-with-content.image-right .row {
--flex-direction: row-reverse;
}
@media (min-width: 576px) {
.image-with-content + .protect:not(.protect-card) {
margin-top: var(--negative-spacer);
}
}
@media (min-width: 992px) {
.image-with-content {
--row-x: 3rem;
}
}
/* Protect section */
.protect:has(.protect-card) {
margin-bottom: var(--spacer);
}
.protect:has(.protect-card) .protect-banner {
margin-bottom: -7rem;
margin-top: 5.3125rem;
}
.protect:not(:has(.protect-banner)) {
margin-bottom: 0;
}
.protect .protect-card {
background-color: var(--white);
border: 1px solid transparent;
border-radius: 1rem;
box-shadow: 0.375rem 0.375rem 1.25rem rgba(0, 0, 0, 0.05);
color: var(--grey);
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
padding: 1.3125rem 2.375rem 2.375rem 2.375rem;
position: relative;
transition: all 0.3s ease;
}
.protect .protect-card:hover {
border: 1px solid var(--dark-red);
color: inherit;
}
.protect-card-title {
border-bottom: 1px solid var(--gainsboro);
padding-bottom: 1.25rem;
padding-left: 5rem;
position: relative;
}
.protect-card-content {
padding-top: 1.0625rem;
}
.protect-card-content .text {
max-width: calc(100% - 2.1875rem);
}
.protect-card-content svg {
display: block;
height: 1.5rem;
width: 0.9375rem;
}
.protect-icon {
bottom: 1.375rem;
left: 0;
position: absolute;
width: 4.375rem;
}
.protect a {
text-decoration: none;
}
.protect-banner {
align-items: center;
background-color: var(--dark-red);
border-radius: 1rem;
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
justify-content: space-between;
padding-bottom: 5rem;
padding-left: 2rem;
padding-right: 2rem;
text-align: center;
--heading-color: var(--white);
--heading-spaser: 0;
}
.protect-banner.light {
--heading-color: var(--black);
background-color: var(--light-blue);
}
.protect-banner .btn-icon {
margin: 0 auto;
}
.protect-banner .button-container {
width: 100%;
}
.protect-banner-image {
margin-top: -3.125rem;
position: relative;
width: 100%;
}
.protect-banner-image img {
display: block;
margin: 0 auto;
width: 50%;
}
.protect-banner-text {
color: var(--white);
font-size: 1.125rem;
width: 100%;
}
.protect-banner-content {
align-items: center;
display: flex;
flex: 1;
flex-direction: column;
flex-wrap: wrap;
gap: 1.25rem 6.875rem;
}
.container:has(.protect-banner) {
--container-padding: 0;
}
.protect-card h2 {
--font-factor: 0.78;
}
@media (min-width: 576px) {
.container:has(.protect-banner) {
--container-padding: calc(var(--row-x) * 0.5);
}
.protect-banner {
padding: 0 5rem 3.125rem 5rem;
}
.protect:has(.protect-card) .protect-banner {
margin-top: 7.5rem;
}
}
@media (min-width: 768px) {
.protect-banner-text {
flex: 1;
width: auto;
}
.protect-banner .btn-icon {
margin: 0 auto;
}
.protect:has(.protect-card) .protect-banner {
margin-bottom: -10.625rem;
}
.protect-banner .button-container {
width: auto;
}
}
@media (min-width: 992px) {
.protect-banner-image {
width: 27%;
margin: -9.375rem 0;
}
.protect-banner {
padding-top: 5rem;
text-align: start;
}
.protect-banner-image img {
width: 100%;
}
.protect-banner-content {
flex-direction: row;
align-items: center;
}
}
@media (min-width: 1200px) {
.protect-card {
padding-top: 1.875rem;
}
.protect-card-title {
padding-bottom: 1.5625rem;
padding-left: 6.875rem;
}
.protect-icon {
width: 5.9375rem;
bottom: 1.875rem;
}
}
/* Small hero */
.small-hero .container {
max-width: 100%;
--container-padding: 0;
}
.hero.image-left .row {
flex-direction: row-reverse;
}
.small-hero .hero-video-image.image-rounded {
box-shadow: 0 0.25rem 0.25rem oklch(from var(--black) l c h / 0.25);
}
.hero.image-left:after {
left: 0;
right: auto;
}
.small-hero .hero-content:after {
display: none;
}
.small-hero-slider .slick-prev,
.small-hero-slider .slick-next {
opacity: 1;
border-color: var(--white);
right: 1.875rem;
top: 5rem;
}
.small-hero-slider .slick-prev:not(.slick-disabled),
.small-hero-slider .slick-next:not(.slick-disabled) {
background-color: var(--white);
}
.small-hero-slider .slick-prev:hover,
.small-hero-slider .slick-next:hover {
background-color: var(--dark-red);
opacity: 1;
}
.small-hero-slider .slick-prev:hover:before,
.small-hero-slider .slick-next:hover:before {
background-color: var(--white);
}
.small-hero-slider .slick-prev:before {
background-color: var(--dark-red);
background-image: none;
mask-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 12.5L5.5 12.5' stroke='%238F8F8F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5 19.5L5.5 12.5L12.5 5.5' stroke='%238F8F8F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
}
.small-hero-slider .slick-next:before {
background-color: var(--dark-red);
background-image: none;
mask-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 12.5L19.5 12.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5 5.5L19.5 12.5L12.5 19.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
}
.small-hero-slider .slick-next.slick-disabled:before, .small-hero-slider .slick-prev.slick-disabled:before {
background-color: var(--white);
}
.small-hero-slider .slick-next:hover:before, .small-hero-slider .slick-prev:hover:before {
background-color: var(--white);
}
.small-hero-slider .slick-prev {
transform: translate(-100%, -50%);
}
.small-hero-slider .slick-dots {
bottom: -1.25rem;
}
@media (min-width: 992px) {
.small-hero .hero {
border-radius: 1rem;
--content-margin: 1.25rem;
}
.small-hero .hero:after {
width: calc(var(--container-width) * 0.2);
}
.small-hero .container {
max-width: var(--container-width);
--container-padding: calc(var(--row-x) * 0.5);
}
.hero.image-left .hero-bg {
left: -13.75rem;
}
}
@media (min-width: 1400px) {
.small-hero-slider .slick-prev, .small-hero-slider .slick-next {
right: 6.875rem;
}
.small-hero-bg {
padding: 7.5rem 0;
}
}
@media (min-width: 1600px) {
.small-hero-slider .slick-prev, .small-hero-slider .slick-next {
right: 4.8125rem;
}
}
/* Post loop section */
.post-loop:has(.slider) {
overflow: hidden;
padding: 0 0 2rem;
}
.post-loop .post-loop-slider .slick-list {
margin-right: -1.25rem;
}
.post-loop .slick-slide {
padding-right: 1.25rem;
}
.post-loop .title {
max-width: 52.125rem;
}
.post-loop + .protect {
padding-top: 2.5rem;
}
.post-loop-slider .slick-next {
right: 0;
}
.post-loop-slider .slick-prev {
right: 3.5rem;
}
.post-loop .slider {
margin-right: calc(var(--padded-gutter) * -1);
}
.post-loop :is(.slick-prev, .slick-next) {
top: -4.25rem;
}
.post-loop-item {
overflow: hidden;
border-radius: 1.125rem;
height: 100%;
}
.post-loop-item h5 {
font-size: 1.5rem;
}
.post-loop-item .btn-icon {
margin-top: auto;
}
.post-loop-content {
padding: 1.25rem 1.5625rem 2.1875rem;
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
}
.category {
text-transform: uppercase;
margin-bottom: 0.3125rem;
--heading-weight: 700;
--heading-font: var(--monserrat);
--font-factor: -0.45;
--heading-color: rgba(67, 66, 68, 0.5);
}
h5.title-post {
--heading-color: black;
--heading-weight: 800;
--font-factor: 0.78;
}
.post-loop-image {
aspect-ratio: 6 / 4;
}
.post-loop-intro{
margin-bottom: .5rem;
}
@media (min-width: 576px) {
.post-loop:has(.slider) {
padding: 1.875rem 0 0;
}
.slide {
max-width: calc(var(--container-width) * 0.9);
}
.post-loop .slide {
max-width: calc(var(--container-width) * 0.95);
}
.slide-content {
background-color: var(--white);
padding: 2.5rem 3.125rem 3.75rem;
}
.slide-title {
background-color: var(--grey);
padding: 3.125rem 3.75rem;
}
.list-image {
float: right;
margin-left: 1.875rem;
}
.slider-section .title {
max-width: 75%;
}
}
@media (min-width: 768px) {
.post-loop .post-loop-item {
align-items: center;
display: flex;
}
.post-loop-item .post-loop-image {
aspect-ratio: 1 / 1;
max-width: 18.75rem;
min-height: 100%;
}
.post-loop-icon img {
width: 80%;
}
.slide {
max-width: calc(var(--container-width) * 0.7);
}
}
@media (min-width: 992px) {
.post-loop-intro{
margin-bottom: var(--subspacer);
}
.post-loop + .protect {
padding-top: 0;
}
.post-loop .post-loop-item {
flex-direction: column;
}
.post-loop-item .post-loop-image {
aspect-ratio: 6 / 4;
max-width: 100%;
min-height: auto;
}
.post-loop-icon img {
width: 100%;
}
.slide {
max-width: calc(var(--container-width) * 0.6);
}
.post-loop .slide {
max-width: calc(var(--container-width) * 0.31);
}
.post-loop:has(.subsection .btn):has(.slick-arrow) .subsection {
margin-bottom: calc(var(--spacer) * 1.2);
}
}
@media (min-width: 1400px) {
.slide {
max-width: calc(var(--container-width) * 0.421);
}
.post-loop .slide {
max-width: calc(var(--container-width) * 0.29);
}
}
/*card list section*/
.card-list-item {
border: 1px solid rgba(67, 66, 68, 0.3);
border-radius: 1rem;
padding: 2.1875rem 2.8125rem;
box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.05);
margin-bottom: 1.875rem;
height: 95%;
display: flex;
flex-direction: column;
}
.card-list-title {
--heading-color: rgba(67, 66, 68, 0.6);
--font-factor: 0;
--heading-weight: 700;
--heading-font: var(--monserrat);
text-transform: uppercase;
letter-spacing: 0.2em;
}
.card-list .card-icon {
bottom: 1.25rem;
}
.card-icon {
width: 4.375rem;
position: absolute;
left: 0;
bottom: 1.375rem;
}
.card-icon .counter {
color: var(--white);
font-weight: 500;
font-size: 1.125rem;
font-family: var(--gunterz);
left: 50%;
letter-spacing: -0.08em;
position: absolute;
top: 30%;
transform: translateX(-50%);
}
.card-title {
padding-bottom: 1.25rem;
position: relative;
padding-left: 5rem;
border-bottom: 1px solid var(--gainsboro);
}
.card-list-item .card-content img {
margin-bottom: 1.25rem;
}
.card-list-item .card-content {
--heading-spacer: 0.875rem;
padding-top: 1.25rem;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.card-list-item .card-content .h6 {
--heading-weight: 900;
--heading-font: var(--gunterz);
}
.card-list-item .card-content > .btn:last-child,
.card-list-item .card-content > *:has(.btn):last-child {
margin-top: auto;
}
@media (min-width: 992px) {
.card-list-item {
margin-bottom: 3.125rem;
}
.card-icon .counter {
font-size: 1.5rem;
}
}
@media (min-width: 1200px) {
.card-icon {
width: 5.9375rem;
bottom: 1.875rem;
}
.card-title {
padding-bottom: 1.5625rem;
padding-left: 6.875rem;
}
.revers-card {
padding: 8.125rem 6.875rem;
}
}
/*Tab section*/
.tab-section .inner {
border: 1px solid rgba(67, 66, 68, 0.3);
background-color: var(--white);
padding: 3.125rem 0;
border-radius: 1rem;
box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.05);
}
.tabs-button-container {
display: flex;
gap: 1.25rem 0.625rem;
flex-wrap: wrap;
margin-bottom: 2.5rem;
justify-content: center;
}
.tab-button {
padding: 0.75rem 0.875rem;
border-radius: 0.875rem;
background-color: transparent;
width: fit-content;
font-family: var(--gunterz);
font-size: 0.625rem;
font-weight: 500;
}
.tab-button.active,
.tab-button:hover {
background-color: var(--dark-red);
color: var(--white);
}
@media (min-width: 768px) {
.container:has(.tab-content) {
max-width: var(--container-width);
--container-padding: calc(var(--row-x) * 0.5);
}
.tab-button {
padding: 0.75rem 1.4375rem;
}
}
@media (min-width: 992px) {
.tabs-button-container {
justify-content: start;
}
.tab-button {
padding: 0.75rem 2.3125rem;
font-size: 0.875rem;
}
.tabs-button-container {
margin-bottom: 4.375rem;
}
.tab-section .inner {
padding: 5.625rem 0;
}
}
@media (min-width: 1200px) {
.tab-button {
padding: 0.9375rem 3.25rem;
}
}
@media (min-width: 1400px) {
.tab-button {
padding: 1.25rem 3.5625rem;
}
}
.container:has(.tab-content) {
--container-padding: 0;
max-width: 100%;
}
.intro {
max-width: 56.25rem;
margin-left: auto;
margin-right: auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
.intro + .card-list, .intro + .image-with-content, .image-with-content + .image-with-content {
padding-top: 0;
}
.post-loop-item-banner {
background-color: var(--dark-red);
border-radius: 1rem;
height: 100%;
text-align: center;
--heading-color: var(--white);
}
.post-loop-item-banner .btn {
margin: 0 auto;
}
.post-loop-item-banner .btn-white-search {
display: inline;
z-index: 1;
}
.post-loop-icon {
padding: 0 1.875rem;
text-align: center;
}
.post-loop-icon img {
margin-top: 4.375rem;
max-width: 15.625rem;
}
.post-loop .slick-slide:has(.slide) {
display: flex;
height: auto;
padding-bottom: 0.625rem;
padding-left: 0.0625rem;
}
.post-loop .slick-track {
display: flex;
}
.post-loop .slick-slide:has(.slide) > div {
width: 100%;
}
.revers-card {
background-color: var(--white-smoke);
border-radius: 1rem;
color: #2F2F2F;
display: flex;
flex-direction: column;
font-weight: 600;
gap: 3.125rem;
justify-content: space-between;
padding: 2.5rem 2.1875rem;
height: 100%;
}
.revers-cards .row > div:nth-child(even) .revers-card {
flex-direction: column-reverse;
}
.revers-card-image {
border-radius: 1rem;
}
.small-hero .hero .hero-content {
padding-left: calc(var(--row-x) / 2);
}
.slider-section .slider {
padding-left: calc((100vw - var(--scrollbar-width) - var(--container-width)) / 2 + var(--container-padding));
}
.slider-list .slide .list {
margin-bottom: 1.875rem;
padding-left: 2.5rem;
position: relative;
}
.slider-list .slide .list:last-child {
margin-bottom: 0;
}
.slider-list .slide .list strong {
color: #020617;
font-weight: 700;
}
.slider-list .list .list-marker {
left: 0;
position: absolute;
top: 0;
width: 1.75rem;
}
@media (min-width: 992px) {
.list-image {
max-width: 12.5rem;
float: right;
margin-left: 1.875rem;
border-radius: 1rem;
}
.small-hero .slick-slider .small-container {
padding-top: 1rem;
}
}
@media (min-width: 1200px) {
.slide {
max-width: calc(var(--container-width) * 0.55);
}
}
.list-image {
border-radius: 1rem;
display: block;
float: unset;
margin-bottom: 0.625rem;
margin-left: auto;
margin-right: auto;
max-width: 10rem;
}
.slide {
border-radius: 1.125rem;
border: 0.0625rem solid rgba(67, 66, 68, 0.3);
box-shadow: 0.375rem 0.375rem 1.25rem rgba(0, 0, 0, 0.05);
max-width: calc(100vw - var(--container-padding) * 2 - var(--scrollbar-width));
overflow: hidden;
}
.post-loop .slide {
height: 100%;
min-width: 100%;
}
.slide-content {
background-color: var(--white);
padding: 1.25rem;
}
.slide-title {
background-color: var(--grey);
padding: 1.25rem;
}
body:has(.error-404) :where(header, .footer-form, footer) {
display: none;
}
body:has(.error-404) main {
padding-top: 0;
}
.hero.error-404 {
--content-margin: var(--gutter);
align-items: center;
display: flex;
font-size: 1.25rem;
height: 100vh;
}
.hero.error-404 .hero-bg {
object-fit: contain;
}
.hero.error-404 .hero-content {
margin-bottom: 20vh;
}
.hero.error-404 h1 {
--font-factor: 10;
margin-top: 0;
}
@media (min-width: 992px) {
.hero.error-404 .hero-content {
margin-bottom: 0;
}
.hero.error-404 h1 {
--font-factor: 5;
}
}
@media (min-width: 1200px) {
.hero.error-404 h1 {
--font-factor: 6;
}
}
/* Checklists */
.checklists{
background-color: var(--light-blue);
}
.checklists .inner {
border: 1px solid rgba(67, 66, 68, 0.3);
background-color: var(--white);
padding: 3.125rem;
border-radius: 1rem;
box-shadow: 0.375rem 0.375rem 1.25rem rgba(0, 0, 0, 0.05);
}
.checklists .content :is(h3, .h3) {
--font-factor: 1.4;
}
.checklists .accordion-item {
border: 0.0625rem solid rgba(var(--grey-rgb) / 50%);
border-radius: 1rem;
color: var(--body-color);
}
.checklists .accordion-item:focus,
.checklists .accordion-item > button:focus {
outline: none;
}
.checklists .accordion-item:not(:last-child) {
margin-bottom: var(--gutter);
}
.checklists .accordion-item > button {
background: 0;
border: 0;
color: var(--dark-red);
font-family: var(--gunterz);
font-size: 0.875rem;
letter-spacing: 0.0875rem;
padding: 1rem 3.2rem 1rem 1.5rem;
position: relative;
text-align: left;
}
.checklists .list:not(:last-child) .list-item {
padding-bottom: 1.875rem;
border-bottom: 0.0625rem solid var(--silver-grey);
margin-bottom: 1.5625rem;
}
.checklists .list-item .content {
padding: 0 0 0 2.5rem;
}
.accordion-body .list .list-item .item:last-child {
margin-bottom: 0;
}
.checklists .accordion-item > button:after {
color: var(--grey);
content: var(--chevron-down);
font-family: var(--icons);
font-size: 0.75rem;
font-style: normal;
font-variant: normal;
font-weight: normal;
inset: 50% 1.5rem auto auto;
line-height: 1;
position: absolute;
text-decoration: none;
text-transform: none;
transform: translateY(-50%) rotate(180deg);
}
.checklists .accordion-item > button.collapsed:after {
transform: translateY(-50%);
}
.checklists .accordion-body {
padding: 1rem 1.5rem;
position: relative;
}
.checklists .accordion-body:after {
background-color: rgba(var(--grey-rgb) / 50%);
content: '';
height: 0.1875rem;
inset: 0 1.5rem auto;
position: absolute;
}
.checklists .list:not(:last-child) {
margin-bottom: 1.25rem;
}
.checklists .list :is(.item:not(.title), .item .answer span):before {
border: 0.125rem solid rgba(var(--grey-rgb) / 50%);
border-radius: 0.25rem;
content: '';
height: 1.125rem;
inset: 0.125rem auto auto 0;
position: absolute;
width: 1.125rem;
}
.checklists .list .item {
display: flex;
flex-direction: column;
gap: var(--content-margin);
justify-content: space-between;
padding-left: 2.5rem;
position: relative;
font-weight: 600;
}
.checklists .list .item:has(.answer) {
align-items: flex-start;
flex-direction: row;
justify-content: space-between;
}
.checklists .list .item:not(:last-child) {
margin-bottom: 1.25rem;
}
.checklists .list .item.title {
border-bottom: 0;
font-size: 1.125rem;
font-weight: bold;
padding-bottom: 0;
padding-left: 0;
}
.checklists .list .item.title:not(:first-child) {
margin-top: var(--gutter);
}
.checklists .list .item p {
margin: 0;
}
.checklists .list .item .answer {
display: none;
}
.checklists .list .item .answer span {
padding-left: 1.5rem;
position: relative;
}
.checklists .list .item .answer span:before {
inset: 50% auto auto 0;
transform: translateY(-50%);
}
.checklists .accordion-body p:has(+ .list) {
margin-bottom: var(--content-margin);
}
.checklists .accordion-item .btn {
display: block;
margin: 1.25rem auto 0;
width: fit-content;
}
@media (min-width: 992px) {
.checklists .inner {
padding: 5.625rem;
}
.checklists .accordion-item > button,
.checklists .accordion-body {
padding: 1.5rem 2rem;
}
.checklists .accordion-body:after {
inset: 0 2rem auto;
}
.checklists .accordion-item > button:after {
inset: 50% 2rem auto auto;
}
.small-hero-slider .wrapper {
--spacer: 6.875rem;
}
.checklists .list-item .content {
padding-right: 7.5rem;
}
}
@media (min-width: 1200px) {
.checklists .list .item .answer {
display: flex;
gap: 1rem;
text-transform: uppercase;
}
.checklists .content {
margin-left: auto;
margin-right: auto;
}
.checklists .accordion-item > button,
.checklists .accordion-body {
padding: 2rem 1.875rem;
}
.checklists .accordion-item > button:after {
inset: 50% 2.5rem auto auto;
}
}
.ctct-popup-content button.ctct-popup-close {
position: absolute !important;
right: 1rem !important;
top: 1rem !important;
}
.ctct-popup-content div.ctct-form-defaults {
border: 1rem solid var(--gainsboro);
padding: 2.5rem !important;
}
.ctct-popup-content div.ctct-form-defaults h2.ctct-form-header {
color: var(--black) !important;
font-family: var(--heading-font) !important;
font-weight: var(--heading-weight) !important;
margin-bottom: 0 !important;
}
.ctct-popup-content div.ctct-form-defaults p.ctct-form-text {
color: var(--body-color) !important;
font-family: var(--body-font) !important;
font-weight: var(--body-weight) !important;
}
.ctct-popup-content div.ctct-form-popup form.ctct-form-custom label.ctct-form-label {
font-family: var(--body-font) !important;
font-weight: var(--weight-bold) !important;
padding: 0 !important;
}
.ctct-popup-content div.ctct-form-popup form.ctct-form-custom input.ctct-form-element {
border: 1px solid var(--grey) !important;
border-radius: .5rem !important;
box-shadow: none !important;
color: var(--body-color) !important;
font-family: var(--body-font) !important;
font-weight: var(--body-weight) !important;
}
.ctct-popup-content .ctct-form-popup.form_0 .ctct-form-custom .ctct-form-button {
box-sizing: border-box !important;
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
padding: 0.75rem 1.5rem !important;
gap: 0.625rem !important;
border: 0.125rem solid var(--dark-red) !important;
border-radius: 0.5rem !important;
color: var(--grey) !important;
font-weight: 700 !important;
font-size: 0.875rem !important;
background: 0 !important;
font-family: var(--body-font) !important;
width: fit-content !important;
margin: 0 auto !important;
}
.ctct-popup-content .ctct-form-popup.form_0 .ctct-form-custom .ctct-form-button:hover {
background-color: var(--dark-red) !important;
color: var(--white) !important;
}
.post-filter label {
width: auto;
padding: 0;
}
.post-filter input[type="checkbox"] {
display: inline-block;
width: auto;
padding: 0 0.5rem;
position: relative;
cursor: pointer;
height: 0.9375rem;
border-radius: 0.25rem;
}
.post-filter .categories {
display: flex;
gap: 1.25rem;
}
.post-filter input[type="checkbox"]:before {
width: 1rem;
height: 1rem;
content: '';
border: 0.0625rem solid var(--black);
position: absolute;
left: 0;
top: 0;
border-radius: 0.25rem;
}
.post-filter input[type="checkbox"]:checked:after {
content: '';
position: absolute;
left: 0.25rem;
top: 0.125rem;
width: 0.375rem;
height: 0.625rem;
border: solid #000;
border-width: 0 0.125rem 0.125rem 0;
transform: rotate(45deg);
}
.post-filter .filter {
align-items: center;
display: flex;
gap: 1.25rem;
font-size: 1.875rem;
font-weight: 700;
}
.post-filter .filters {
width: 100%;
}
.post-filter .filter .btn {
width: auto;
}
.post-filter .search {
position: relative;
width: 100%;
}
.post-filter .resource-filter {
display: flex;
justify-content: space-between;
gap: 1.875rem;
flex-wrap: wrap;
}
.post-filter .search button[type="submit"] {
position: absolute;
width: 3.625rem;
height: 3.625rem;
right: 0;
top: 0;
background-color: transparent;
border-radius: 0 0.5rem 0.5rem 0;
border-left: 0.0625rem solid var(--yellow);
padding: 0;
}
.post-filter .filter .btn:after {
content: var(--chevron-up);
font-family: var(--icons);
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-decoration: none;
text-transform: none;
font-size: 0.5625rem;
color: var(--dark-red);
}
.post-filter .filter .btn.collapsed:after {
transform: rotate(180deg);
}
.post-filter .search input[type="text"] {
padding-right: 3.625rem;
border: 0.0625rem solid var(--yellow);
border-radius: 0.5rem;
}
.post-filter #load-more {
max-width: 12.5rem;
margin: 3.125rem auto 0;
}
.post-filter hr {
border-color: var(--dark-red);
margin: 0;
width: 100%;
border-width: 0.1875rem;
opacity: 1;
}
.post-filter .results-count,
.post-filter #loader {
font-size: 1.125rem;
text-transform: uppercase;
font-weight: 500;
}
@media (min-width: 992px) {
.post-filter .search {
max-width: 31.25rem;
}
}
}
/* Overrides */
@layer overrides {
/*
html {
margin-top: 0 !important
}
*/
/*
#wpadminbar {
display: none !important;
}
*/
}
/* END
----------------------------------------------------
*/