/*** TEXT & HEADINGS ***/

body {
    font-family: var(--font-family-body);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: var(--font-size-body);
    color: var(--text-color);
    line-height: var(--line-height-body);
    background-color: var(--background-color);
}


::selection {
    color: var(--selection-font-color);
    background: var(--selection-color);
}

.hidden-desktop,
.hidden-mobile,
.hidden-tablet {
    display: none !important;
}

p {
    margin-bottom: 1.5rem;
}


p b,
p strong {
    font-weight: 700;
}


p u {
    text-decoration: none !important;
    background-image: linear-gradient(var(--focus-color), var(--focus-color));
    background-size: 100% 4px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding-bottom: 0;
}


hr {
    color: var(--line-color);
    background-color: var(--line-color);
    border-color: var(--line-color);
    border-style: solid;
    border-width: 1px;
    border-bottom: 0;
    margin: 20px 0 20px 0;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading);
    font-style: normal;
    text-transform: none;
    color: var(--headings-color);
    line-height: var(--line-height-headings);
    margin-top: 0;
    margin-bottom: 0;
}

h1 {
    font-size: var(--font-size-h1);
    margin-bottom: 0;
}

h2 {
    font-size: var(--font-size-h2);
    margin-bottom: 0;
}

h3 {
    font-size: var(--font-size-h3);
    margin-bottom: -10px;
}

h4 {
    font-size: var(--font-size-h4);
    margin-bottom: -15px;
}

h5 {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-heading-light);
    margin-bottom: -15px;
}

h6 {
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-heading-light);
    margin-bottom: -15px;
}

.intro-section h1 strong,
.intro-section h2 strong,
.intro-section h3 strong,
.intro-section h4 strong,
.intro-section h5 strong {
    font-weight: inherit;
    color: var(--focus-color);
}

.pre-heading h3,
.pre-heading h4,
.pre-heading h5 {
    color: var(--headings-color);
}


.large-text,
.intro {
    font-family: var(--font-family-body);
    font-size: var(--font-size-intro);
    line-height: var(--line-height-body);
    font-weight: 400;
    margin-bottom: 0 !important;
}

.meta {
    color: var(--text-color-light);
    font-size: var(--font-size-meta);
}




/*** LINKS ***/

a {
    color: var(--focus-color);
    transition: all 0.1s ease-in-out !important;
}

a:hover {
    color: var(--focus-color-lighter);
}




/*** IMAGES ***/

figure figcaption {
    font-family: var(--font-family-body);
    color: var(--text-color);
    font-size: 1rem;
    line-height: 150%;
    margin-top: 10px;
    font-style: italic;
}




/*** BUTTONS ***/

a.btn,
li.btn a,
input[type=submit],
button[type=button],
button[type=submit] {
    display: inline-block;
    font-family: var(--font-family-heading);
    text-transform: none;
    font-size: var(--font-size-buttons);
    line-height: var(--line-height-buttons);
    font-weight: var(--font-weight-buttons);
    border-radius: var(--border-radius-buttons);
    padding: var(--padding-buttons) !important;
    color: var(--buttons-text-color);
    background-color: var(--buttons-background-color);
}

li.btn a:hover,
input[type=submit]:hover,
input[type=button]:hover,
button[type=button]:hover,
button[type=submit]:hover {
    background-color: var(--buttons-color-darker);
    text-decoration: none !important;
    scale: var(--button-hover-scale);
    transition: var(--button-hover-transition);
}


input[type=submit]:focus,
input[type=button]:focus,
button[type=button]:focus {
    box-shadow: none;
}


li.btn-success a {
    background-color: var(--focus-color);
}

li.btn-success a:hover {
    background-color: var(--focus-color-lighter);
}




/*** FORMS ***/

.form-wrapper {
    padding: var(--box-padding);
    background-color: var(--form-background-color);
    margin: 10px 0 20px 0;
    transition: all 0.3s ease-in-out !important;
    border-radius: 50px;
    corner-shape: squircle;
    color: var(--text-color);
}

input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea {
    min-height: 50px;
    line-height: 167%;
    border: 2px solid var(--line-color);
    border-radius: 5px;
    color: var(--text-color);
    padding: 10px 10px;
    font-size: 1.25rem;
    background-color: var(--field-background-color);
}

textarea.textarea-field {
    min-height: 180px !important;
}


input[type=date]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus,
select:focus,
textarea:focus {
    border: 2px solid #EBE2BD !important;
}

input:focus-visible,
textarea:focus-visible {
    outline-width: 0;
}

label,
.field-label {
    font-family: var(--font-family-body);
    font-weight: 700;
    color: var(--headings-color);
    line-height: 167.5%;
    margin-bottom: 5px;
}

.form-group {
    margin-bottom: 10px;
}


.form-actions {
    text-align: center;
}

.form-actions input[type=submit] {
    margin: 0 auto;
}


fieldset {
    border: 0 !important;
}




/*** TABLES ***/

table {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--text-color);
}




/*** ANIMATIONS ***/

html.js .fade-in {
    opacity: 0;
}

html.js .fade-in-up {
    opacity: 0;
}




/*** RESPONSIVE STUFF ***/


/* tablets */
@media screen and (max-width: 1024px) {
    .hidden-mobile {
        display: none;
    }

    .hidden-desktop {
        display: block !important;
    }
}


/* mobile */
@media screen and (max-width: 767px) {

    a.btn,
    li.btn a,
    input[type=submit],
    button[type=button],
    button[type=submit] {
        /* font-size: 1rem; */
    }
}




/*** LAYOUT ***/

.wrapper {
    padding: 0;
}