/*
Theme Name: VLM
Theme URI: 
Author: Krzysiek Dróżdż (WPmagus.pl)
Author URI: https://wpmagus.pl/
Description: 
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: vlm
*/


/* Style guide
 * ======================================== */

:root {
    --color-navy-100: #001B2D;
    --color-navy-80: #203A4D;
    --color-navy-60: #475D6D;
    --color-navy-40: #808F9A;
    --color-navy-30: #D8D8DF;
    --color-navy-20: #E8EAEE;

    --color-blue-100: #144160;
    --color-blue-80: #325F7E;
    --color-blue-60: #6592B1;
    --color-blue-20: #DEE9F2;
    --color-green: #3D9432;
    --color-light-green: #EDF9E8;
    --color-red: #D7301B;
    --color-light-red: #FFD4CE;
    --color-yellow: #EDAF2A;
    --color-light-yellow: #F9E9D7;
    --color-black: #000000;
    --color-almost-white: #F8F8F8;
    --color-white: #FFFFFF;

    --font-0: normal 800 3rem/1.2 'Google Sans Flex', sans-serif;
    --font-1: normal 800 3rem/1.2 'Google Sans Flex', sans-serif;
    --font-2: normal 800 2.25rem/1.4 'Google Sans Flex', sans-serif;
    --font-3: normal 700 1.5rem/1.4 'Google Sans Flex', sans-serif;
    --font-4: normal 700 1.25rem/1.4 'Google Sans Flex', sans-serif;
    --font-5: normal 500 1.25rem/1.4 'Google Sans Flex', sans-serif;
    --font-6: normal 500 1.25rem/1.2 'Google Sans Flex', sans-serif;

    --font-base: normal 300 1.125rem/1.6 'Google Sans Flex', sans-serif;
    --font-featured: normal 400 1.25rem/1.6 'Google Sans Flex', sans-serif;
    --font-meta: normal 400 0.875rem/1.6 'Google Sans Flex', sans-serif;
    --font-quote: normal 400 0.875rem/1.75 'Google Sans Flex', sans-serif;
    --font-menu: normal 600 1rem/1.5 'Google Sans Flex', sans-serif;
    --font-subheading: normal 700 1.125rem/1 'Google Sans Flex', sans-serif;
    --font-button: normal 700 0.875rem/1 'Google Sans Flex', sans-serif;
    --font-button-small: normal 600 1rem/1 'Google Sans Flex', sans-serif;

    --font-size-small: 0.875rem;
    --font-size-medium: 1.25rem;
    --font-size-large: 1.5rem;
    --font-size-x-large: 3rem;
    --line-height-base: 1.4;
    --line-height-meta: 1.4;

    --space-0: 6rem;
    --space-1: 5.625rem;
    --space-2: 5rem;
    --space-3: 3.75rem;
    --space-4: 1.25rem;
    --space-5: 1rem;
    --space-6: 0.75rem;
    --space-7: 0.5rem;
    --space-8: 0.25rem;

    --base-space: var(--space-4);
    --container-padding-space: var(--space-3);

    --container-width: 1260px;
    --container-max-width: calc(100vw - 2 * var(--container-padding-space));

    --content-wide-width: 1260px;
    --content-width: 800px;

    /* ----- */
    --base-color: var(--color-navy-100);
    --content-bg-color: var(--color-white);
    --html-bg-color: var(--color-navy-100);

    --link-color: var(--color-blue-100);
    --link-hover-color: var(--color-blue-100);
    --link-visited-color: var(--color-navy-60);

    --base-color-on-dark: var(--color-blue-20);
    --link-color-on-dark: var(--color-white);
    --link-hover-color-on-dark: var(--color-blue-20);
    --link-visited-color-on-dark: var(--color-navy-40);

    --button-padding: var(--space-5) var(--space-4);
    --button-small-padding: var(--form-input-padding);
    --button-border-radius: var(--form-input-border-radius);
    --button-primary-color: var(--color-white);
    --button-primary-color-hover: var(--color-white);
    --button-primary-color-disabled: var(--color-navy-20);
    --button-primary-bg-color: var(--color-blue-80);
    --button-primary-bg-color-disabled: var(--color-navy-30);
    --button-primary-bg-color-hover: var(--color-blue-60);
    --button-light-color: var(--color-navy-100);
    --button-light-color-hover: var(--button-primary-color-hover);
    --button-light-color-disabled: var(--button-primary-color-disabled);
    --button-light-bg-color: var(--color-blue-80);
    --button-light-bg-color-disabled: var(--button-primary-bg-color-disabled);
    --button-light-bg-color-hover: var(--button-primary-bg-color-hover);

    --form-input-margin: var(--space-7);
    --form-input-border-color: var(--color-blue-20);
    --form-input-border-radius: var(--space-8);
    --form-input-placeholder-color: var(--color-navy-40);
    --form-input-padding: var(--space-6) var(--space-5);

    --meta-color: var(--color-navy-40);

    --base-animation-easing: ease-in-out;

    /* -- wp -- */
    --wp--style--block-gap: var(--space-3);
}

@media (max-width: 960px) {
    :root {
        --container-padding-space: var(--space-4);
    }
}

@keyframes spin {
    100% {
        transform: rotate(360deg)
    }
}


/* html5doctor.com based Reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

body {
    line-height: 1
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

nav ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

blockquote:before, blockquote:after, q:before, q:after {
    content: none
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

ins {
    background-color: transparent;
    color: var(--base-color);
    text-decoration: none
}

mark {
    background-color: transparent;
    color: var(--base-color);
    font-style: normal;
    font-weight: normal
}

del {
    text-decoration: line-through
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--form-input-border-color);
    margin: 1rem 0;
    padding: 0
}

input, select {
    vertical-align: middle
}

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

a {
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

p, ul, ol, table, blockquote, address, dl, pre {
    margin: var(--base-space) 0;
}

pre {
    max-width: 100%;
    overflow: auto;
}

h1, h2, h3, h4, h5, h6 {
    margin: var(--space-3) 0 var(--base-space) 0;
}

::-webkit-input-placeholder {
    color: var(--form-input-placeholder-color);
}

:-moz-placeholder {
    color: var(--form-input-placeholder-color);
}

::-moz-placeholder {
    color: var(--form-input-placeholder-color);
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--form-input-placeholder-color);
}

img {
    max-width: 100%;
    height: auto;
}

img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
    height: auto;
}

embed,
iframe,
object,
video {
    margin: var(--base-space) 0;
    max-width: 100%;
}

.grecaptcha-logo iframe {
    margin: 0;
}

p > embed,
p > iframe,
p > object,
span > embed,
span > iframe,
span > object {
    margin-bottom: 0;
}

input[type="submit"],
button,
select {
    -webkit-appearance: none;
}

address {
    font-style: normal;
}

main, article, section, header, footer, nav, aside {
    display: block;
}


small, sub, sup {
    font-size: var(--font-size-small);
}

sub {
    vertical-align: sub
}

sup {
    vertical-align: super
}

/* Tools
 * ======================================== */

#page-wrap {
    overflow-x: clip;
    width: 100%;
    position: relative;
}


.container {
    width: var(--container-width);
    max-width: var(--container-max-width);
    margin: 0 auto;
}

.container:after {
    content: '';
    display: block;
    clear: both;
}


.alignleft {
    float: left;
}

.alignright {
    float: right;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


.video-container {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    position: relative;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.video-container .video-thumbnail {
    position: relative;
}

.video-container .video-thumbnail:after {
    content: '\25ba';
    font-size: 2rem;
    text-align: center;
    opacity: 0.8;
    width: 7rem;
    height: 5rem;
    margin: -2.5rem auto auto -3.5rem;
    line-height: 5rem;
    border-radius: 2rem;
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--button-primary-bg-color);
    color: var(--button-primary-color);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.video-container .video-thumbnail img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.video-container .video-thumbnail:hover {
    opacity: 1;
}

.video-container .video-thumbnail:hover img {
    opacity: 0.8;
}

.video-container .video-thumbnail:hover:after {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}


a.icon {
    text-decoration: none;
}

a.icon:before {
    content: '';
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
}

a.icon--facebook:before {
    content: '\f39e';
}

a.icon--youtube:before {
    content: '\f167';
}

a.icon--vimeo:before {
    content: '\f27d';
}

a.icon--twitter:before {
    content: '\f099';
}

a.icon--tumblr:before {
    content: '\f174';
}

a.icon--tiktok:before {
    content: '\e07b';
}

a.icon--linkedin:before {
    content: '\f0e1';
}

a.icon--google-plus:before {
    content: '\f0d4';
}

a.icon--vimeo:before {
    content: '\f194';
}

a.icon--spotify:before {
    content: '\f1bc';
}

a.icon--pinterest:before {
    content: '\f0d3';
}

a.icon--instagram:before {
    content: '\f16d';
}

a.icon--reddit:before {
    content: '\f281';
}

a.icon--quora:before {
    content: '\f2c4';
}

a.icon--behance:before {
    content: '\f1b4';
}

a.icon--github:before {
    content: '\f09b';
}

a.icon--stackoverflow:before {
    content: '\f16c';
}

a.icon--stackexchange:before {
    content: '\f18d';
}

a.icon--rss:before {
    content: '\f143';
}

a.icon--search:before {
    content: '\f002';
    font-weight: 600;
}

a.icon--phone:before {
    content: '\f879';
    font-weight: bold;
}

a.icon--mail:before {
    content: '\f0e0';
}

a.icon--cart:before {
    content: '\f07a';
    font-weight: bold;
}


a.icon--account:before {
    content: '\f007';
    font-weight: bold;
}



.screen-reader-text {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}


.skip-links {
    list-style: none;
    display: inline-block;
    position: absolute;
}

.skip-link {
    position: fixed;
    left: -100vw;
    z-index: 9999;
    min-width: 20rem;
    top: 0;
    padding: var(--space-3) var(--base-space);
    text-decoration: none;
    background: var(--base-color);
    color: var(--content-bg-color);
}

.skip-link:hover,
.skip-link:focus,
.skip-link:active {
    left: 0;
}

.admin-bar .skip-link {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .skip-link {
        top: 46px;
    }
}


.toggle {
    color: var(--base-color);
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
    width: auto;
    height: 1.5rem;
}


.nav .toggle--nav {
    display: none;
    z-index: 10001;
    cursor: pointer;
    background: transparent;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    text-indent: -9999px;
    border-radius: 0;
    border: none;
}

.nav .toggle--nav span {
    background: var(--base-color);
    top: 50%;
    display: block;
    margin-left: 12.5%;
    right: 0;
    border-radius: 2px;
    -webkit-transition: background 0.3s var(--base-animation-easing) 0.15s;
    -moz-transition: background 0.3s var(--base-animation-easing) 0.15s;
    -ms-transition: background 0.3s var(--base-animation-easing) 0.15s;
    -o-transition: background 0.3s var(--base-animation-easing) 0.15s;
    transition: background 0.3s var(--base-animation-easing) 0.15s;
}

.nav .toggle--nav span:before,
.nav .toggle--nav span:after {
    content: '';
    background: var(--base-color);
    position: absolute;
    display: block;
    width: 87.5%;
    left: 0;
    border-radius: 2px;
    -webkit-transition: all 0.3s var(--base-animation-easing) 0s;
    -moz-transition: all 0.3s var(--base-animation-easing) 0s;
    -ms-transition: all 0.3s var(--base-animation-easing) 0s;
    -o-transition: all 0.3s var(--base-animation-easing) 0s;
    transition: all 0.3s var(--base-animation-easing) 0s;
}

.nav .toggle--nav span:before {
    top: 0;
}

.nav .toggle--nav span:after {
    bottom: 0;
}

.nav.nav-on .toggle--nav {
}

.nav.nav-on .toggle--nav span {
    background: transparent !important;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

.nav.nav-on .toggle--nav span:before,
.nav.nav-on .toggle--nav span:after {
    width: 100%;
    -webkit-transition-delay: 0.15s;
    -moz-transition-delay: 0.15s;
    -ms-transition-delay: 0.15s;
    -o-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

.nav.nav-on .toggle--nav span:before {
    top: 50%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nav.nav-on .toggle--nav span:after {
    bottom: 50%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.nav .nav-container {
    -webkit-transition: all .5s var(--base-animation-easing) 0s;
    -moz-transition: all .5s var(--base-animation-easing) 0s;
    -ms-transition: all .5s var(--base-animation-easing) 0s;
    -o-transition: all .5s var(--base-animation-easing) 0s;
    transition: all .5s var(--base-animation-easing) 0s;
}


.toggle--search-box {
    aspect-ratio: 1 / 1;
}

.toggle--search-box > span {
    position: absolute;
    clip: unset;
    clip-path: none;
    background: var(--base-color);
    border-radius: 2px;
    bottom: 1px;
    right: 0;
    width: 2px;
    height: 57%;
    display: block;
    transform: rotate(-45deg);
    transform-origin: 100% 100%;
    transition: all .3s var(--base-animation-easing) 0s;
}

.toggle--search-box:before {
    content: '';

    position: absolute;
    background: var(--base-color);
    border-radius: 2px;
    bottom: calc(50% - 0.5px);
    right: calc(50% - 0.15px);
    width: 2px;
    height: 0;
    display: block;
    transform: rotate(-45deg) translate(50%, 50%);
    transform-origin: 100% 100%;
    transition: all .3s var(--base-animation-easing) 0s;
    z-index: 1;
}

.toggle--search-box:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5px;
    display: block;
    height: 70%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid var(--base-color);
    transition: all .3s var(--base-animation-easing) 0s;
}

.search-box-container .search-box {
    -webkit-transition: all .5s var(--base-animation-easing) 0s;
    -moz-transition: all .5s var(--base-animation-easing) 0s;
    -ms-transition: all .5s var(--base-animation-easing) 0s;
    -o-transition: all .5s var(--base-animation-easing) 0s;
    transition: all .5s var(--base-animation-easing) 0s;
}

.search-box-container.search-box-on .toggle--search-box:before {
    height: 134%;
    bottom: calc(50% - 0.5px);
    right: calc(50% + 0.5px);
    transform: rotate(45deg) translate(50%, 50%);
}

.search-box-container.search-box-on .toggle--search-box:after {
    transform: scale(0);
    transform-origin: 20% 20%;
}

.search-box-container.search-box-on .toggle--search-box span {
    height: 134%;
}


/* Global
 * ======================================== */

html {
    font-size: 16px;
    background: var(--html-bg-color);
}

body {
    font: var(--font-base);
    color: var(--base-color);
}

ul,
ol {
    margin-left: var(--base-space);
}

li > ul,
li > ol {
    margin-top: 0;
    margin-bottom: 0;
}

dl {
}

dl dt {
    font-weight: bold;
}

dl dd {
    padding-left: var(--base-space);
    margin-bottom: var(--space-3);
}

a {
    color: var(--link-color);
    text-decoration: underline;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

a:hover:not(.button) {
    color: var(--link-hover-color);
    text-decoration: none;
    opacity: .75;
}

a:visited:not(.button) {
    color: var(--link-visited-color);
}

h1,
h2,
h3,
h4,
h5,
h6,
h1.has-text-color,
h2.has-text-color,
h3.has-text-color,
h4.has-text-color,
h5.has-text-color,
h6.has-text-color {
}

h1 {
    font: var(--font-1);
}

h2 {
    font: var(--font-2);
}

h3 {
    font: var(--font-3);
}

h4 {
    font: var(--font-4);
}

h5 {
    font: var(--font-5);
}

h6 {
    font: var(--font-6);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    text-decoration: none;
    color: inherit;
}

q,
blockquote {
    font-style: italic;
    position: relative;
}

.wp-block-quote.is-large p,
.wp-block-quote.is-style-large p {
    font-size: var(--font-size-large);
}

table {
    width: 100%;
}

table th,
table td {
    padding: var(--space-4) var(--space-3);
    text-align: left;
}

table thead th,
table thead td {
    border: 1px solid var(--color-navy-40);
}

table tbody th,
table tbody td {
    border: 1px solid var(--color-navy-40);
}

table tfoot th,
table tfoot td {
    border: 1px solid var(--color-navy-40);
}


form {
}

label {
    display: block;
}
label .label {
    font: var(--font-menu);
}

.alignwide .wp-block-contact-form-7-contact-form-selector,
.alignfull .wp-block-contact-form-7-contact-form-selector {width: var(--content-wide-width); max-width: var(--container-max-width); margin-left: auto; margin-right: auto; position: relative; left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

input,
button,
select,
textarea,
span.select2 .select2-selection,
span.select2 .select2-selection--single {
    font: var(--font-base);
    padding: var(--form-input-padding);
    max-width: 100%;
    width: 100%;
    border: 1px solid var(--form-input-border-color);
    border-radius: var(--form-input-border-radius);
    height: auto;
    margin: var(--form-input-margin) 0;
}

input[type="radio"],
input[type="checkbox"] {
    padding: 0;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: var(--space-5);
    display: inline-block;
    vertical-align: middle;
}

span.select2 .select2-selection .select2-selection__rendered {
    line-height: 1;
}

span.select2 .select2-selection .select2-selection__arrow {
    height: 100%;
}

span.select2 .select2-selection .select2-selection__arrow:after {
    content: '\25BE';
    position: absolute;
    font-weight: bold;
    color: var(--color-navy-60);
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

span.select2 .select2-selection .select2-selection__arrow b {
    display: none;
}

form .fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column-gap: var(--space-3);
    grid-row-gap: var(--base-space);
}

form .field {
    grid-column: span 3;
}

form .field--short {
    grid-column: span 1;
}

@media (max-width: 960px) {
    form .fields {grid-template-columns: repeat(1, minmax(0, 1fr));}
    form .field {
        grid-column: span 1;
    }

}

form .field--submit {text-align: center;}
form .field--submit button {display: inline-block;}

form .field .label {
    display: block;
}

button,
input[type="submit"],
.button,
.wp-block-button__link {
    min-width: 0;
    width: fit-content;
    background: var(--button-primary-bg-color);
    color: var(--button-primary-color);
    cursor: pointer;
    font: var(--font-base);
    display: block;
    padding: var(--button-padding);
    text-align: center;
    border: 1px solid inherit;
    border-radius: var(--button-border-radius);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: var(--form-input-margin) 0;
    -webkit-transition: opacity .3s, color .3s;
    -moz-transition: opacity .3s, color .3s;
    -ms-transition: opacity .3s, color .3s;
    -o-transition: opacity .3s, color .3s;
    transition: opacity .3s, color .3s;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover {
    opacity: .75;
}

button:disabled,
input[type="submit"]:disabled,
.button:disabled,
.wp-block-button__link:disabled {
    cursor: not-allowed;
    opacity: .5;
}

button.loading,
input[type="submit"].loading,
.button.loading,
.wp-block-button__link.loading,
.wpcf7-form.submitting .wpcf7-submit.has-spinner {
    opacity: .25;
    position: relative;
}

button.loading:after,
input[type="submit"].loading:after,
.button.loading:after,
.wp-block-button__link.loading:after,
.wpcf7-form.submitting .wpcf7-submit.has-spinner:after {
    content: '\2686';
    animation: spin 2s linear infinite;
    position: absolute;
    right: var(--space-4);
    line-height: 1.2;
    font-size: 1.5rem;
}


.thumbnail,
.video-thumbnail {
    display: block;
    background: transparent no-repeat 50% 50%;
    background-size: cover;
    overflow: hidden;
}

.thumbnail img,
.video-thumbnail img {
    display: block;
    width: 100%;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -ms-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
}

.thumbnail:hover {
    opacity: 1;
}

.thumbnail:hover img {
    opacity: .75;
}


.meta {
    font: var(--font-meta);
    line-height: var(--line-height-meta);
    color: var(--meta-color);
    margin: var(--space-4) 0;
}

.meta a {
    color: inherit;
    text-decoration: none;
}

.meta > * {
    margin-right: var(--space-3);
}


.wpcf7 {
    position: relative;
}

.wpcf7 br {
    display: none;
}

.wpcf7 form {
    display: grid;
    grid-gap: var(--space-3);
}

.wpcf7 form .wpcf7-not-valid-tip {
    position: absolute;
    top: -16px;
    right: -10px;
    font-size: 80%;
    color: var(--color-white);
    background: var(--color-red);
    display: block;
    padding: 4px 6px;
}

.wpcf7 form .wpcf7-response-output {
    display: block;
    position: absolute;
    top: 100px;
    left: 10%;
    right: 10%;
    padding: var(--base-space);
    border: 0;
    text-align: center;
    font-size: 18px;
    color: var(--color-white);
    font-weight: bold;
    box-shadow: var(--space-3) var(--space-3) var(--space-3) 0 rgba(0, 0, 0, .2);
    z-index: 101;
}

.wpcf7 form .wpcf7-response-output.wpcf7-display-none {
    display: none;
}

.wpcf7 form .wpcf7-response-output:after {
    content: '\00D7';
    position: absolute;
    top: 10px;
    right: 12px;
    color: var(--color-white);
    cursor: pointer;
}

.wpcf7 form.sent .wpcf7-response-output {
    background: var(--color-green);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
    border-color: var(--color-red);
    background: var(--color-red);
}

.wpcf7 form .wpcf7-spinner {
    display: none !important;
}


.gallery {
    display: flex;
    align-items: normal;
    flex-wrap: wrap;
    gap: var(--wp--style--block-gap, 0.5em);
}

.gallery .gallery-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    max-width: 100%;
    position: relative;
}

.gallery .gallery-item img {
    flex: 1 0 0%;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.gallery.gallery-columns-2 .gallery-item {
    width: calc(50% - var(--wp--style--block-gap));
}

.gallery.gallery-columns-3 .gallery-item {
    width: calc(33.3333333333% - var(--wp--style--block-gap));
}

.gallery.gallery-columns-4 .gallery-item {
    width: calc(25% - var(--wp--style--block-gap));
}

.gallery.gallery-columns-5 .gallery-item {
    width: calc(20% - var(--wp--style--block-gap));
}

.gallery.gallery-columns-6 .gallery-item {
    width: calc(16.6666666667% - var(--wp--style--block-gap));
}

.gallery.gallery-columns-7 .gallery-item {
    width: calc(14.285714286% - var(--wp--style--block-gap));
}

.gallery.gallery-columns-8 .gallery-item {
    width: calc(12.5% - var(--wp--style--block-gap));
}

.gallery.gallery-columns-9 .gallery-item {
    width: calc(11.111111111% - var(--wp--style--block-gap));
}


.wp-pagenavi {
    text-align: center;
    display: block;
    width: 100%;
    margin: var(--space-0) 0;
}

.wp-pagenavi .pages {
    display: none;
}

.wp-pagenavi a,
.wp-pagenavi span {
    display: inline-block;
    min-width: 2rem;
    padding: var(--space-5) var(--space-5);
    color: var(--color-navy-60);
    border: 0;
}

.wp-pagenavi a:hover,
.wp-pagenavi .current {
    color: var(--base-color);
    font-weight: bold;
}


.slick-slider {
}

.slick-slider .slick-arrow {
    position: absolute;
    top: 50%;
    z-index: 99;
    border: 0;
    text-indent: -9999px;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    margin-top: -4.5rem;
    background: transparent;
}

.slick-slider .slick-arrow:before {
    position: absolute;
    color: var(--base-color);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    font-size: 2rem;
    text-indent: 0;
    opacity: .5;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
}

.slick-slider:hover .slick-arrow:before {
    opacity: 1;
}

.slick-slider .slick-prev {
    left: -2rem;
}

.slick-slider .slick-prev:before {
    content: '\f0a8';
}

.slick-slider .slick-next {
    right: -2rem;
}

.slick-slider .slick-next:before {
    content: '\f0a9';
}

.slick-dots {
    list-style: none;
    margin-left: 0;
}

.slick-dots li {
    margin-right: var(--space-3);
    display: inline-block;
    vertical-align: middle;
}

.slick-dots button {
    display: block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-navy-60);
    text-indent: -9999px;
    border-radius: 100%;
    padding: 0;
    background: transparent;
}

.slick-dots .slick-active {
}

.slick-dots button:hover,
.slick-dots .slick-active button {
    border-width: 4px;
    width: 12px;
    height: 12px;
}


.menu {
    list-style: none;
    display: flex;
    gap: var(--base-space);
    margin: var(--base-space) 0;
    padding: 0;
}

@media (max-width: 800px) {
    .menu {gap: var(--space-3);}
}

.menu--social {
}


#breadcrumbs {
    font: var(--font-meta);
    opacity: .65;
}

#breadcrumbs a {
    text-decoration: none;
}


/* Articles */


/* Lists */
.list:not(:has(.list-items)),
.list .list-items {
    list-style: none;
    display: grid;
    margin: var(--base-space) 0;
    grid-gap: var(--base-space);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 960px) {
    .list:not(:has(.list-items)),
    .list .list-items {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.list .item {
    margin: 0;
}


.list.list--diagram {grid-gap: var(--space-2); position: relative;}
.list.list--diagram .item {border: 4px solid var(--color-navy-80); border-radius: var(--space-8); padding: var(--base-space); position: relative;}
.list.list--diagram .item .icon {width: 3.625rem; aspect-ratio: 1 / 1; object-fit: contain;}
.list.list--diagram .item .title {margin: var(--base-space) 0;}
.list.list--diagram .item .description :last-child {margin-bottom: 0;}

.list.list--diagram.has-items-4 {grid-gap: var(--space-2) calc(2 * var(--space-2));}
.list.list--diagram.has-items-4:before {content: ''; position: absolute; top: 5rem; bottom: 5rem; left: calc(50% - 3px); border-left: 6px solid var(--color-navy-80);}
.list.list--diagram.has-items-4 .item:before {content: ''; position: absolute; top: 4.75rem; border-top: 6px solid var(--color-navy-80); width: 5.25rem;}
.list.list--diagram.has-items-4 .item:nth-child(2n):before {right: 100%;}
.list.list--diagram.has-items-4 .item:nth-child(2n+1):before {left: 100%;}
.list.list--diagram.has-items-4 .item:nth-child(3):before,
.list.list--diagram.has-items-4 .item:nth-child(4):before {top: auto; bottom: 4.75rem;}
@media (max-width: 960px) {
    .list.list--diagram.has-items-4:before {content: none;}
    .list.list--diagram.has-items-4 .item:nth-child(1n):before {top: 100%; left: calc(50% - 3px); height: 5.25rem; border-left: 6px solid var(--color-navy-80); border-top: 0;}
    .list.list--diagram.has-items-4 .item:last-child:before {content: none;}
}

.list.list--diagram.has-items-6 {grid-template-columns: repeat(3, minmax(0, 1fr));  grid-gap: calc(2 * var(--space-2)) var(--space-2);}
.list.list--diagram.has-items-6:before {content: ''; position: absolute; left: 14.5%; right: 14.5%; top: calc(50% - 3px); border-top: 6px solid var(--color-navy-80);}
.list.list--diagram.has-items-6 .item:before {content: ''; position: absolute; left: 50%; top: 100%; border-left: 6px solid var(--color-navy-80); height: 5.25rem;}
.list.list--diagram.has-items-6 .item:nth-child(4):before,
.list.list--diagram.has-items-6 .item:nth-child(5):before,
.list.list--diagram.has-items-6 .item:nth-child(6):before {bottom: 100%; top: auto;}
@media (max-width: 960px) {
    .list.list--diagram.has-items-6 {grid-template-columns: repeat(1, minmax(0, 1fr)); grid-gap: var(--space-2);}
    .list.list--diagram.has-items-6:before {content: none;}
    .list.list--diagram.has-items-6 .item:nth-child(1n):before {top: 100%; left: calc(50% - 3px); height: 5.25rem; border-left: 6px solid var(--color-navy-80); border-top: 0;}
    .list.list--diagram.has-items-6 .item:last-child:before {content: none;}
}



.list.list--icon {
    margin: 0;
}
.list.list--icon .item {
    background: var(--color-almost-white);
    padding: var(--space-4);
    border: 2px solid var(--color-blue-20);
    border-radius: var(--space-8);
}
.list.list--icon .item > :first-child {margin-top: 0;}
.list.list--icon .item .icon {aspect-ratio: 1 / 1; object-fit: contain; width: 3rem;}
.list.list--icon .item .title {margin-top: var(--base-space);}
.list.list--icon .item .description {font-size: var(--font-size-small);}
.list.list--icon .item .description :last-child {margin-bottom: 0;}

.has-navy-100-background-color .list.list--icon {grid-template-columns: repeat(3, minmax(0, 1fr));}
.has-navy-100-background-color .list.list--icon .item {background: transparent; border-color: var(--color-navy-80);}

@media (max-width: 960px) {
    .has-navy-100-background-color .list.list--icon {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 640px) {
    .has-navy-100-background-color .list.list--icon {grid-template-columns: repeat(1, minmax(0, 1fr));}
}


.list--logo {
}


.list--faq {
}


.list--page {
}

.list--page .list-items {
    display: block;
}


.list.list--photo-box {grid-template-columns: repeat(3, minmax(0, 1fr));}
.list.list--photo-box .item {position: relative; color: var(--color-white); z-index: 1; aspect-ratio: 1 / 1; display: flex; flex-direction: column; padding: var(--space-4); justify-content: end;}
.list.list--photo-box .item:before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1;
    background: linear-gradient(180deg, rgba(0, 27, 45, 0.40) 33.17%, rgba(0, 27, 45, 0.80) 75.58%);
    background-blend-mode: normal, multiply;
}
.list.list--photo-box .item img {position: absolute; z-index: -2; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.list.list--photo-box .item .title {margin-top: 0;}
.list.list--photo-box .item .description {font-size: var(--font-size-small);}
.list.list--photo-box .item .description :first-child {margin-top: 0;}
.list.list--photo-box .item .description :last-child {margin-bottom: 0;}

@media (max-width: 1080px) {
    .list.list--photo-box {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 640px) {
    .list.list--photo-box {grid-template-columns: repeat(1, minmax(0, 1fr));}
}



.list--post {
}


.list.list--process {grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: process-stage;}
.list.list--process .item {padding: var(--space-8) 0 var(--space-8) 4rem; position: relative; counter-increment: process-stage;}
.list.list--process .item :first-child {margin-top: 0;}
.list.list--process .item .description {font-size: var(--font-size-small);}
.list.list--process .item .description :last-child {margin-bottom: 0;}
.list.list--process .item:before {content: counter(process-stage); position: absolute; left: 0; top: var(--space-8); font: var(--font-3);}
.list.list--process .item:after {content: ''; position: absolute; left: 2.5rem; top: 0; bottom: 0; border-left: 4px solid var(--color-blue-60); }
@media (max-width: 1080px) {
    .list.list--process {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 640px) {
    .list.list--process {grid-template-columns: repeat(1, minmax(0, 1fr));}
}

.list--team {
}


.list--testimonial {

}
.list--testimonial .list-items{
    display: block;
}


.list--statistic {
}

.list--statistic .item {
}

.list--statistic .item .value {
}

.list--statistic .item .name {
}


.list--toc {
}


/* Gutenberg Blocks */
/* Block styles */

.has-small-font-size {
    font-size: var(--font-size-small);
}

.has-medium-font-size {
    font-size: var(--font-size-medium);
}

.has-large-font-size {
    font-size: var(--font-size-large);
}

.has-x-large-font-size {
    font-size: var(--font-size-x-large);
}


.is-layout-flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--base-space);
    word-break: break-word;
}

.is-layout-grid {
    display: grid;
    gap: var(--base-space);
    word-break: break-word;
}


.alignwide {
    width: var(--content-wide-width);
    max-width: var(--container-max-width);
    position: relative;
    left: 50%;
    margin-left: 0;
    margin-right: 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.alignfull {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}


blockquote.alignleft,
figure.wp-caption.alignleft,
img.alignleft,
.wp-caption.alignleft {
    margin: 0 var(--base-space) var(--base-space) 0;
}


blockquote.alignright,
figure.wp-caption.alignright,
img.alignright,
.wp-caption.alignright {
    margin: 0 0 var(--base-space) var(--base-space);
}


blockquote.aligncenter,
img.aligncenter,
.wp-caption.aligncenter {
    margin-top: var(--base-space);
    margin-bottom: var(--base-space);
}


.wp-caption {
    margin-bottom: 1rem;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin: 0;
}


.wp-caption-text,
.wp-element-caption {
    font: var(--font-meta);
}


.wp-element-caption {
    margin-top: calc(-1 * var(--space-3));
}


.wp-smiley {
    border: 0;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}


/* Blocks */


.is-style-subheading {color: var(--color-blue-60); font: var(--font-menu); letter-spacing: 0.07rem; text-transform: uppercase; margin-bottom: var(--space-6);}
.is-style-subheading + .wp-block-heading {margin-top: var(--space-6);}


.wp-block-group.has-navy-100-background-color,
.vlm-block.has-navy-100-background-color {
    background: var(--radial-BG, radial-gradient(87.28% 87.28% at 50% 49.98%, rgba(101, 146, 177, 0.12) 0%, rgba(101, 146, 177, 0.00) 58.07%), #001B2D);
    color: var(--color-blue-20);
}
.wp-block-group.has-navy-100-background-color h2,
.wp-block-group.has-navy-100-background-color h3,
.wp-block-group.has-navy-100-background-color a,
.vlm-block.has-navy-100-background-color h2,
.vlm-block.has-navy-100-background-color h3,
.vlm-block.has-navy-100-background-color a {color: var(--color-white);}


.wp-block-code,
.wp-block-columns,
.wp-block-cover,
.wp-block-details,
.wp-block-embed,
.wp-block-gallery,
.wp-block-group,
.wp-block-media-text,
.wp-block-pullquote,
.wp-block-quote,
.wp-block-table,
.vlm-block {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
}


.wp-block-code {
}


.wp-block-columns {
}

.wp-block-columns {
    gap: var(--space-2);
}

.wp-block-columns .wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
}

.wp-block-columns .wp-block-column > :first-child {margin-top: 0;}
.wp-block-columns .wp-block-column > :last-child {margin-bottom: 0;}

.wp-block-columns .wp-block-column[style^="flex-basis"] {
}

.wp-block-columns .wp-block-group,
.wp-block-columns .vlm-block {
    max-width: 100%;
}


.wp-block-cover {
    min-height: 30vw;
}

.wp-block-cover.alignfull {
    width: 100vw;
    max-width: 100vw;
}

.wp-block-cover.alignfull .wp-block-cover__inner-container {
    width: var(--content-wide-width);
    max-width: var(--container-max-width);
}
.wp-block-cover.alignfull .wp-block-cover__inner-container > * {
    margin-right: 30%;
}


.wp-block-details {
}


.wp-block-embed {
}

.wp-block-embed.is-type-video iframe {
    width: 100%;
    height: auto;
}

.wp-block-embed.is-type-video.wp-embed-aspect-16-9 iframe {
    aspect-ratio: 16 / 9;
}


.wp-block-gallery {
}


.wp-block-group {
}

.wp-block-group.alignfull {}
.wp-block-group.alignfull .wp-block-group__inner-container {width: var(--content-width); max-width: var(--container-max-width); margin-left: auto; margin-right: auto;}

.wp-block-media-text {
}

.wp-block-media-text > .wp-block-media-text__content {
    padding: 0 0 0 var(--base-space);
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    padding-left: 0;
}

.wp-block-media-text.has-media-on-the-left .wp-block-media-text__content {
    padding-right: 0;
}


.wp-block-pullquote {
    border-top: .5rem solid var(--color-navy-40);
    border-bottom: .5rem solid var(--color-navy-40);
}

.wp-block-pullquote cite {
    font: var(--font-meta);
}

.wp-block-pullquote cite:before {
    content: '\2013';
    margin-right: var(--space-5);
}


blockquote,
.wp-block-quote,
.wp-block-quote.is-large,
.wp-block-quote.is-style-large {
    padding-left: var(--space-1);
    border-left: .5rem solid var(--color-navy-40);
}

blockquote cite,
.wp-block-quote cite {
    font: var(--font-meta);
}

blockquote cite:before,
.wp-block-quote cite:before {
    content: '\2013';
    margin-right: var(--space-5);
}


.wp-block-table {
}

.wp-block-table thead {
    border-bottom-width: 1px;
}


.wp-block-buttons {
}


p.has-background {
    padding: var(--base-space);
}

.wp-block-group.has-background,
.vlm-block.has-background {
    padding: var(--space-2) 0;
}

.wp-block-group.has-background > .wp-block-group__inner-container > :first-child,
.vlm-block.has-background > .vlm-block__inner-container >:first-child {
    margin-top: 0;
}

.wp-block-group.has-background > .wp-block-group__inner-container > :last-child,
.vlm-block.has-background > .vlm-block__inner-container >:last-child {
    margin-bottom: 0;
}


.wp-block-group.has-background.alignfull {
    width: 100vw;
    max-width: 100vw;
    padding-left: 0;
    padding-right: 0;
    z-index: 50;
}

.wp-block-group.has-background.alignfull > .wp-block-group__inner-container {
    width: var(--content-width);
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
}

.section-content > .has-background:first-child,
.section-content > .wp-block-cover:first-child {
    margin-top: 0;
}

.section-content > .has-background:last-child,
.section-content > .wp-block-cover:last-child {
    margin-bottom: 0;
}

.wp-block-cover + .wp-block-cover,
.wp-block-cover + .wp-block-group.has-background,
.wp-block-cover + .vlm-block.has-background,
.wp-block-group.has-background + .wp-block-cover,
.wp-block-group.has-background + .wp-block-group.has-background,
.wp-block-group.has-background + .vlm-block.has-background,
.vlm-block.has-background + .wp-block-cover,
.vlm-block.has-background + .wp-block-group.has-background,
.vlm-block.has-background + .vlm-block.has-background {
    margin-top: calc(-1 * var(--space-2));
}


.vlm-block {
}


.vlm-block-google-map {
}

.vlm-block-google-map .map {
    background: var(--color-navy-40);
    aspect-ratio: 16 / 9;
}


/* Widgets */

.widget {
}

.widget-title {
    font: var(--font-4);
}

.widget .list > .list-items {
    grid-template-columns: minmax(0, 1fr);
}


.widget_calendar {
}

.widget_calendar table {
    width: 100%;
    margin-bottom: var(--space-4);
}

.widget_calendar table caption {
    margin-bottom: var(--space-5);
}

.widget_calendar td,
.widget_calendar th {
    padding: var(--space-5);
    text-align: center;
}


.widget_nav_menu .menu {
    display: block;
}


/* Sections */
.section {
    width: var(--content-width);
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
}

.section-header {
}

.section-header .section-title {
}


.section--wide {
    width: var(--content-wide-width);
}


/* Header
 * ======================================== */

#header {
    background: radial-gradient(15625.52% 435.06% at 93.58% 50.5%, rgba(101, 146, 177, 0.12) 49%, rgba(101, 146, 177, 0.00) 85.75%), var(--html-bg-color);
}

#header .container {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: var(--base-space);
}

#header .container:after {
    content: none;
}


#header .site-title {
    margin: 0;
    padding: 0;
    max-width: calc(100% - 5rem);
}

#header .site-title a {
    width: auto;
    white-space: nowrap;
    max-width: 100%;
    height: 5rem;
    line-height: 5rem;
    display: block;
    font: var(--font-1);
    text-decoration: none;
    background: transparent no-repeat left 50%;
    background-size: contain;
}


#header .nav {
    text-align: left;
    padding: 0;
    right: 0;
    position: static;
    display: flex;
    gap: var(--space-1);
}

@media (max-width: 1080px) {
    #header .nav {
        text-align: left;
        justify-content: end;
        padding-right: calc(2rem + var(--space-1));
    }
}

@media (max-width: 800px) {
    #header .nav {
        padding-right: calc(2rem + var(--base-space));
    }
}

#header .nav .nav-container {
    height: 100%;
}


#header .nav a {
    text-decoration: none;
    display: block;
    color: var(--color-white);
    font: var(--font-menu);
    letter-spacing: 0.07rem;
}

#header .nav a:hover {
    opacity: 1;
}


#header .nav .menu {
    align-items: center;
    height: 100%;
    justify-content: end;
    margin: 0;
}

#header .nav .menu li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

@media (max-width: 1080px) {
    #header .nav .nav-container .menu {
        display: block;
        height: auto;
        text-align: center;
    }

    #header .nav .nav-container .menu li {
        display: block;
    }

    #header .nav .nav-container .menu a {
        padding: var(--space-5) 0;
    }
}



#header .nav .menu-item-has-children > a {
    padding-right: var(--space-3);
    position: relative;
}

#header .nav .menu-item-has-children > a:after {
    content: '\203A';
    line-height: 1;
    display: block;
    font-size: .875rem;
    font-weight: bold;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%) rotate(90deg);
    -moz-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    -o-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}

@media (max-width: 1080px) {
    #header .nav .menu-item-has-children > a {
        padding-right: 0;
    }
    #header .nav .menu-item-has-children > a:after {
        content: none;
    }
}

#header .nav .current_page_parent > a,
#header .nav .current-menu-item > a,
#header .nav .current-menu-ancestor > a {}


#header .nav .sub-menu {
    display: none;
    text-align: left;
    min-width: 15rem;
    margin: 0;
    position: absolute;
    z-index: 1000;
    left: calc(-1 * var(--base-space));
    top: 100%;
    background: var(--content-bg-color);
    height: auto;
}

@media (max-width: 1080px) {
    #header .nav .sub-menu {
        display: block;
        position: static;
        text-align: center;
        background: rgba(0, 0, 0, .05);
        font-size: var(--font-size-small);
    }
}


#header .nav .menu li a:focus + .sub-menu,
#header .nav .menu li:focus-within > .sub-menu,
#header .nav .menu li:hover > .sub-menu {
    display: block;
}


#header .nav .sub-menu li {
    display: block;
}

#header .nav .sub-menu a {
    padding: var(--space-5) var(--base-space);
}

#header .nav .sub-menu .menu-item-has-children > a {
    padding-right: calc(var(--base-space) + var(--space-3));
}

#header .nav .sub-menu .menu-item-has-children > a:after {
    right: var(--base-space);
    -webkit-transform: translateY(-50%) rotate(0);
    -moz-transform: translateY(-50%) rotate(0);
    -ms-transform: translateY(-50%) rotate(0);
    -o-transform: translateY(-50%) rotate(0);
    transform: translateY(-50%) rotate(0);
}

@media (max-width: 1080px) {
    #header .nav .sub-menu .menu-item-has-children > a {
        padding: var(--space-5) 0;
    }
}

#header .nav .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}


#header .nav .toggle--search-box {
    height: 1.25rem;
}


#header .nav .toggle--nav {
    position: absolute;
    display: none;
    width: 2rem;
    height: 1.5rem;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

#header .nav .toggle--nav span {
    height: 2px;
    background: var(--base-color);
}

#header .nav .toggle--nav span:before,
#header .nav .toggle--nav span:after {
    background: var(--base-color);
    height: 2px;
}

#header .nav.nav-on .toggle--nav span:before {
    margin-top: -1px; /* half of height */
}

#header .nav.nav-on .toggle--nav span:after {
    margin-bottom: -1px; /* half of height */
}

@media (max-width: 1080px) {
    #header .nav .toggle--nav {
        display: none;
    }

    #header .nav .nav-container {
        background: var(--content-bg-color);
        padding: var(--space-0) var(--container-padding-space);
        position: absolute;
        top: 100%;
        min-height: 100vh;
        right: calc(-1 * var(--container-padding-space));
        z-index: 10000;
        width: 100vw;

        -webkit-transform: translateX(150%);
        -moz-transform: translateX(150%);
        -ms-transform: translateX(150%);
        -o-transform: translateX(150%);
        transform: translateX(150%);
    }

    #header .nav.nav-on .nav-container {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}


#header .search-box-container .search-box {
    background: var(--content-bg-color);
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0;
    right: 0;

    -webkit-transform: translateY(-100vh);
    -moz-transform: translateY(-100vh);
    -ms-transform: translateY(-100vh);
    -o-transform: translateY(-100vh);
    transform: translateY(-100vh);
}

#header .search-box-container .search-box:before {
    content: '';
    width: 100vw;
    position: absolute;
    left: 50%;
    height: 100%;
    background: var(--content-bg-color);
    z-index: -1;

    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

#header .search-box-container.search-box-on .search-box {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}


@media (max-width: 1080px) {
    body #main,
    body #footer {
        -webkit-transition: opacity .3s;
        -moz-transition: opacity .3s;
        -ms-transition: opacity .3s;
        -o-transition: opacity .3s;
        transition: opacity .3s;
    }

    body.nav-menu-on #main,
    body.nav-menu-on #footer,
    body.search-on #main,
    body.search-on #footer {
        opacity: .15;
    }
}


/* Footer
 * ======================================== */

#footer {
    padding: var(--space-3) 0;
    margin-top: 0;
    color: var(--color-white);
    font-size: var(--font-size-small);
}

#footer a {
    text-decoration: none;
    color: var(--link-color-on-dark);
}
#footer a:hover {
    color: var(--link-hover-color-on-dark);
}
#footer a:visited {
    color: var(--link-color-on-dark);
}

#footer ul {
    margin-left: 0;
    list-style: none;
}

#footer ul li {
    margin: var(--space-7) 0;
}

#footer .list--widgets {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: var(--space-3);}

#footer .list--widgets > .list-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));  grid-gap: var(--space-3);
}

#footer .list--widgets > .list-items > .item:nth-child(3n) {text-align: right;}

#footer .list--widgets > .list-items > .item .widget-title {margin-top: 0; font: var(--font-menu); text-transform: uppercase; letter-spacing: 0.07rem;}

@media (max-width: 960px) {
    #footer .site-title a {margin-left: auto; margin-right: auto; background-position: 50% 50% !important;}
    #footer .list--widgets {grid-template-columns: repeat(1, minmax(0, 1fr)); text-align: center;}
    #footer .list--widgets > .list-items {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    #footer .list--widgets > .list-items > .item:nth-child(1n) {text-align: center;}
}

@media (max-width: 480px) {
    #footer .list--widgets > .list-items {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

#footer .madeby {
    font: var(--font-meta);
    text-align: center;
    opacity: .6;
}


/* Main
 * ======================================== */

#main {
    background: var(--content-bg-color);
    padding: .1px 0;
}


/* Print
 * ======================================== */

@media print {
    body {
        background: none !important;
        color: #2b2b2b;
        font-size: 10pt;
        width: 100%;
    }

    #header {
        background: none;
        min-height: 100px;
    }

    #header .site-title a {
        height: 100px;
        width: auto;
    }

    #header nav {
        display: none;
    }

    #footer {
        display: none;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }

    #main a {
        font-weight: bolder;
        text-decoration: none;
    }

    #main a[href^=http]:after {
        content: " <" attr(href) "> ";
    }

    #main .secondary {
        display: none;
    }
}
