/*------------------------------------------------------------------------------
Fonts
------------------------------------------------------------------------------*/

/* lato-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/lato-v24-latin-regular.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../fonts/lato-v24-latin-regular.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* lato-700 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/lato-v24-latin-700.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../fonts/lato-v24-latin-700.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* bodoni-moda-500 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Bodoni Moda';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/bodoni-moda-v25-latin-500.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../fonts/bodoni-moda-v25-latin-500.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/*------------------------------------------------------------------------------
Global Definitions
------------------------------------------------------------------------------*/

html,
body {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

body {
    padding-top: 92px;
}

a:hover {
    text-decoration: none;
}

a:focus-visible,
button:focus-visible {
    outline-color: #0D5D67;
    outline-offset: 4px;
    outline-width: 4px;
    outline-style: solid;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Bodoni Moda', serif;
    font-weight: 500;
}

h1 {
    color: #fff;
    line-height: 4rem;
    font-size: 3rem !important;
    text-shadow: 1px 1px 4px rgb(28 32 33 / 80%);
}

h2 {
    color: #005f4b;
    line-height: 2.25rem;
    font-size: 1.875rem !important;
    padding: 0 0 .5rem 0;
}

h3 {
    color: #005f4b;
    line-height: 2rem;
    font-size: 1.5rem !important;
    padding: .5rem 0;
}

.text-only h1 {
    color: #005f4b;
    text-shadow: none;
    padding-bottom: 1.5rem;
}

.text-only h2 {
    padding-top: 1.5rem;
}

.text-only h3 {
    padding-top: 1rem;
}

p {
    padding: .5rem 0;
}

p:empty {
    display: none;
}

.text ul,
.callout ul,
.feature ul,
details ul {
    padding: .5rem 0;
}

.text ul li,
.callout ul li,
.feature ul li,
details ul li {
    list-style-type: disc;
    margin-left: 20px;
}

p a,
.text-only li a,
.collapsible details a {
    color: #005f4b;
    text-decoration: underline;
}

p a:hover,
p a:active,
.text-only li a:hover,
.text-only li a:active,
.collapsible details a:hover,
.collapsible details a:active {
    color: #35826c;
}

.button {
    background-color: #005f4b;
    color: #FFF;
    font-weight: 700;
    padding: .75rem 1.25rem 1rem;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.button:hover,
.button:active {
    background-color: #35826c;
    color: #FFF;
}

/*------------------------------------------------------------------------------
Navigation
------------------------------------------------------------------------------*/

#menu-collapse li.selected,
#menu-collapse li:hover {
    background-color: rgba(53, 130, 108, .2);
}

#menu-collapse li.selected a {
    font-weight: 700;
}

#menu-collapse a:focus-visible {
    outline-color: #005f4b;
    outline-offset: 0px;
}

#menu-collapse {
    opacity: 0;
    visibility: hidden;
    max-height: 0px;
    transition-property: opacity, max-height;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 100ms;
}

#menu-collapse.in {
    clear: both;
    opacity: 1;
    visibility: visible;
    max-height: 999px;
    transition-property: opacity, max-height;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 600ms;
}

#menu-toggle {
    position: relative;
    float: right;
    padding: 13px 14px;
    margin: 20px 0;
}

#menu-toggle .icon-bar+.icon-bar {
    margin-top: 4px;
}

#menu-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: #FFF;
    transition: 0.4s;
}

#menu-toggle:not(.collapsed)>.icon-bar:first-child {
    transform: translate(0, 6px) rotate(-45deg);
}

#menu-toggle:not(.collapsed)>.icon-bar:nth-child(2) {
    opacity: 0;
}

#menu-toggle:not(.collapsed)>.icon-bar:nth-child(3) {
    transform: translate(0, -6px) rotate(45deg);
}

#menu-toggle:focus-visible {
    outline-color: #005f4b;
}

@media (min-width: 1024px) {
    #menu-collapse {
        opacity: 1;
        visibility: visible;
        max-height: 999px;
        clear: both;
    }

    #menu-collapse ul {
        height: 100%;
        padding: 20px 0;
    }

    #menu-collapse li.selected,
    #menu-collapse li:hover {
        background-color: #fff;
    }

    #menu-collapse li:after {
        content: "";
        position: absolute;
        width: 0%;
        height: 2px;
        display: block;
        transition: all 0.3s ease;
        bottom: 0;
        left: 0;
    }

    #menu-collapse li.selected::after {
        width: 100%;
        background-color: #005f4b;
    }

    #menu-collapse li:hover::after {
        width: 100%;
        background-color: #35826c;
    }

    #menu-toggle {
        display: none;
    }
}

/*------------------------------------------------------------------------------
Footer & Contactbox
------------------------------------------------------------------------------*/

footer a:focus-visible {
    outline-color: #fff0c6;
}

footer .bg-primary,
section.contactbox>div {
    background-image: url('../img/pattern.svg');
    background-repeat: repeat;
    background-size: 106px;
}

.contactbox td {
    padding: 0;
    vertical-align: top;
}

.contactbox tr td:first-child {
    padding-right: 12px;
}

.contactbox a {
    color: #f1d073;
    transition: color 1.5ms ease-in-out;
    text-decoration: none;
}

.contactbox a:hover,
.contactbox a:active {
    color: #fff0c6;
}

.contactbox a:focus-visible {
    outline-color: #fff0c6;
}

/*------------------------------------------------------------------------------
Modular: Collapsibles
------------------------------------------------------------------------------*/

.collapsible summary {
    cursor: pointer;
    font-family: 'Bodoni Moda', serif;
    font-weight: 500;
    color: #005f4b;
    line-height: 2rem;
    font-size: 1.5rem !important;
    padding: .5rem 3rem;
    position: relative;
}

.collapsible summary::-webkit-details-marker,
.collapsible summary::marker {
    display: none !important;
    content: none !important;
    list-style: none !important;
}

.collapsible details[open]>summary:before {
    transform: rotate(90deg);
}

.collapsible summary:before {
    content: "";
    background-image: url('../img/chevron.svg');
    height: 24px;
    width: 24px;
    position: absolute;
    top: .75rem;
    left: 1rem;
    transform: rotate(0);
    transition: 0.25s transform ease-in-out;
}

.collapsible details {
    background-color: #fff0c6;
    transition: background-color 0.3s;
    border-radius: 4px;
}

.collapsible details:hover,
.collapsible details:active {
    background-color: #f1d073;
}

.collapsible details:focus-visible,
.collapsible summary:focus-visible {
    outline-color: #005f4b;
}

.collapsible .content {
    padding: .25rem 3rem .75rem;
}

/*------------------------------------------------------------------------------
Modular: Form
------------------------------------------------------------------------------*/

input,
textarea {
    padding: .5rem !important;
    width: 100%;
    border: 1px solid #828C89;
    border-radius: 4px;
}

input:focus-visible,
textarea:focus-visible {
    outline-color: #005f4b;
}

.form-label {
    padding-bottom: 2px;
    font-weight: 700;
}

/*------------------------------------------------------------------------------
Login
------------------------------------------------------------------------------*/

#grav-login h1 {
    color: #005f4b;
    line-height: 3rem;
    font-size: 2rem !important;
    text-shadow: none;
    margin-bottom: 8px;
}

.login-form .form-field {
    margin-bottom: 8px;
}

.login-form .rememberme input {
    width: auto;
    margin-right: 4px;
}

.login-form .button.primary,
.login-form .button.secondary {
    padding: .5rem 1rem .75rem;
    display: inline-block;
}