/* font imports ------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200;0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900;0,6..12,1000;1,6..12,200;1,6..12,300;1,6..12,400;1,6..12,500;1,6..12,600;1,6..12,700;1,6..12,800;1,6..12,900;1,6..12,1000&display=swap');

/* root colors & fonts ------------------------------ */
:root {
	--white: #FFF;
	--black: #000;
	--grey: whitesmoke;
    --grey-dark: #212121;
    --grey-faded: rgba(0,0,0,0.15);

    --teal: #018C97;
    --green: #0EBEA9;
    --blue: #1DEAF3;
    --orange: #EE8235;
    --orangeDark: #c65f15;
    --orangeFaded: #FCE4D6;
    --charcoal: #212121;

    --kallisto: kallisto, sans-serif;
    --roboto: roboto, sans-serif;
    --mokoko: mokoko, serif;
    --nunitoSans: 'Nunito Sans', sans-serif;

    --html-font-family: var(--mokoko);
    --html-font-size: 18px;
    --html-font-weight: 400;
    --html-font-style: normal;
    --html-line-height: 2em;
    --html-letter-spacing: 0;
    --html-text-transform: none;
    --html-text-decoration: none;
    --html-color: var(--grey-dark);

    --h1-font-family: var(--kallisto);
    --h1-font-size: 2.22rem;
    --h1-font-weight: 600;
    --h1-font-style: inherit;
    --h1-line-height: 1.5em;
    --h1-letter-spacing: inherit;
    --h1-text-transform: inherit;
    --h1-text-decoration: inherit;
    --h1-color: inherit;

    --h2-font-family: var(--kallisto);
    --h2-font-size: 1.55rem;
    --h2-font-weight: 600;
    --h2-font-style: inherit;
    --h2-line-height: 1.5em;
    --h2-letter-spacing: inherit;
    --h2-text-transform: inherit;
    --h2-text-decoration: inherit;
    --h2-color: inherit;

    --h3-font-family: inherit;
    --h3-font-size: 1.75rem;
    --h3-font-weight: 500;
    --h3-font-style: inherit;
    --h3-line-height: 1.3em;
    --h3-letter-spacing: inherit;
    --h3-text-transform: inherit;
    --h3-text-decoration: inherit;
    --h3-color: inherit;

    --h4-font-family: inherit;
    --h4-font-size: 1.5rem;
    --h4-font-weight: 400;
    --h4-font-style: inherit;
    --h4-line-height: 1.3em;
    --h4-letter-spacing: inherit;
    --h4-text-transform: inherit;
    --h4-text-decoration: inherit;
    --h4-color: inherit;

    --h5-font-family: inherit;
    --h5-font-size: 1.25rem;
    --h5-font-weight: 400;
    --h5-font-style: inherit;
    --h5-line-height: 1.3em;
    --h5-letter-spacing: inherit;
    --h5-text-transform: inherit;
    --h5-text-decoration: inherit;
    --h5-color: inherit;

    --body-background-color: var(--white);
    --bold-font-weight: 700;
    --link-color: var(--black);
    --link-color-hover: var(--black);
    --hr-weight: 2px;
    --hr-color: var(--green);
    --border: 1px solid var(--grey-faded);
    --shadow: 0 0.5rem 1rem var(--grey-faded);
    --scroll-behaviour: smooth;
    --transition: 0.3s;

    --txt-1-color: var(--green);
    --txt-2-color: var(--black);
    --txt-3-color: var(--black);

    --background-color-1: var(--grey);
    --background-color-2: var(--orange);
    --background-color-3: var(--charcoal);
}

/* responsive font sizes ------------------------------ */
@media only screen and (max-width: 1350px) {
    :root {
        --html-font-size: 17.5px;
    }
}
@media only screen and (max-width: 1100px) {
    :root {
        --html-font-size: 17px;
    }
}
@media only screen and (max-width: 800px) {
    :root {
        --html-font-size: 16.5px;
    }
}
@media only screen and (max-width: 501px) {
    :root {
        --html-font-size: 16px;
    }
}

/* root element styles ------------------------------ */
:root {
    --btn-1-font-family: inherit;
    --btn-1-font-size: inherit;   
    --btn-1-font-weight: inherit;
    --btn-1-line-height: inherit;
    --btn-1-letter-spacing: inherit;
    --btn-1-text-transform: uppercase;
    --btn-1-text-decoration: inherit;
    --btn-1-color: var(--grey-dark);
    --btn-1-padding: 0 var(--space-sml) var(--space-xsml) var(--space-sml);
    --btn-1-background: none;
    --btn-1-border:none;
    --btn-1-border-radius: 0rem;
    --btn-1-box-shadow: initial;

    --btn-1-color-hover: var(--grey-dark);
    --btn-1-background-hover: none;
    --btn-1-border-hover: none;

    --btn-2-font-family: inherit;
    --btn-2-font-size: inherit;   
    --btn-2-font-weight: inherit;
    --btn-2-line-height: inherit;
    --btn-2-letter-spacing: inherit;
    --btn-2-text-transform: inherit;
    --btn-2-text-decoration: inherit;
    --btn-2-color: var(--white);
    --btn-2-padding: 0.5rem 1.25rem;
    --btn-2-background: var(--teal);
    --btn-2-border: none;
    --btn-2-border-radius: 10px;
    --btn-2-box-shadow: initial;

    --btn-2-color-hover: var(--white);
    --btn-2-background-hover: var(--green);
    --btn-2-border-hover: none;

    --input-font-family: inherit;
    --input-font-size: inherit;   
    --input-font-weight: inherit;
    --input-line-height: inherit;
    --input-letter-spacing: inherit;
    --input-text-transform: inherit;
    --input-text-decoration: inherit;
    --input-color: var(--black);
    --input-padding: 0.75rem 1.25rem;
    --input-background: var(--white);
    --input-border: 1px solid var(--black);
    --input-border-radius: 10px;
    --input-outline-focus: 3px solid var(--green);

    --select-font-family: inherit;
    --select-font-size: inherit;   
    --select-font-weight: inherit;
    --select-text-transform: inherit;
    --select-color: var(--black);
    --select-padding: 0.75rem 1.25rem;
    --select-background: var(--white);
    --select-border: 1px solid var(--black);
    --select-border-radius: 0rem;

    --textarea-font-family: inherit;
    --textarea-font-size: inherit;   
    --textarea-font-weight: inherit;
    --textarea-line-height: inherit;
    --textarea-letter-spacing: inherit;
    --textarea-text-transform: inherit;
    --textarea-text-decoration: inherit;
    --textarea-color: var(--black);
    --textarea-padding: 0.75rem 1.25rem;
    --textarea-background: var(--white);
    --textarea-border: 1px solid var(--black);
    --textarea-border-radius: 10px;
    --textarea-resize: none;

    --checkbox-radio-margin: 0.75rem;

    --label-font-family: inherit;
    --label-font-size: inherit;   
    --label-font-weight: inherit;
    --label-line-height: inherit;
    --label-letter-spacing: inherit;
    --label-text-transform: inherit;
    --label-text-decoration: inherit;
    --label-color: var(--black);

    --placeholder-font-family: inherit;
    --placeholder-font-weight: inherit;
    --placeholder-letter-spacing: inherit;
    --placeholder-text-transform: inherit;
    --placeholder-text-decoration: inherit;
    --placeholder-color: var(--grey-dark);
    --placeholder-opacity: 0.75;
}

/* fonts ------------------------------ */
html {
    font-family: var(--html-font-family);
    font-size: var(--html-font-size);
    font-weight: var(--html-font-weight);
    font-style: var(--html-font-style);
    line-height: var(--html-line-height);
    letter-spacing: var(--html-letter-spacing);
    text-transform: var(--html-text-transform);
    text-decoration: var(--html-text-decoration);
    color: var(--html-color);
}
h1 {
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight);
    font-style: var(--h1-font-style);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    text-transform: var(--h1-text-transform);
    text-decoration: var(--h1-text-decoration);
    color: var(--h1-color);
}
h2 {
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    font-style: var(--h2-font-style);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
    text-transform: var(--h2-text-transform);
    text-decoration: var(--h2-text-decoration);
    color: var(--h2-color);
}
h3 {
    font-family: var(--h3-font-family);
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight);
    font-style: var(--h3-font-style);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
    text-transform: var(--h3-text-transform);
    text-decoration: var(--h3-text-decoration);
    color: var(--h3-color);
}
h4 {
    font-family: var(--h4-font-family);
    font-size: var(--h4-font-size);
    font-weight: var(--h4-font-weight);
    font-style: var(--h4-font-style);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing);
    text-transform: var(--h4-text-transform);
    text-decoration: var(--h4-text-decoration);
    color: var(--h4-color);
}
h5 {
    font-family: var(--h5-font-family);
    font-size: var(--h5-font-size);
    font-weight: var(--h5-font-weight);
    font-style: var(--h5-font-style);
    line-height: var(--h5-line-height);
    letter-spacing: var(--h5-letter-spacing);
    text-transform: var(--h5-text-transform);
    text-decoration: var(--h5-text-decoration);
    color: var(--h5-color);
}
.bold {
    font-weight: var(--bold-font-weight);
}
.italic {
    font-style: italic;
}
.underline {
    text-decoration: underline;
}

/* color ------------------------------ */
.txt-1 {
    color: var(--txt-1-color);
}
.txt-2 {
    color: var(--txt-2-color);
}
.txt-3 {
    color: var(--txt-3-color);
}
a {
    color: var(--link-color);
    transition: color var(--transition);
}
a:hover {
    color: var(--link-color-hover);
}
body {
    background: var(--body-background-color);
}
.bg-1 {
    background: var(--background-color-1);
}
.bg-2 {
    background: var(--background-color-2);
}
.bg-3 {
    background: var(--background-color-3);
}


/* elements ------------------------------ */
hr {
    border-top: var(--hr-weight) solid var(--hr-color);
    border-left-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    opacity: 1;
}
.border {
    border: var(--border);
}
.shadow {
    box-shadow: var(--shadow);
}
button, a {
    cursor: pointer;
}
button {
    transition: var(--transition);
}
.btn-1 {
    font-family: var(--btn-1-font-family);
    font-size: var(--btn-1-font-size);
    font-weight: var(--btn-1-font-weight);
    line-height: var(--btn-1-line-height);
    letter-spacing: var(--btn-1-letter-spacing);
    text-transform: var(--btn-1-text-transform);
    text-decoration: var(--btn-1-text-decoration);
    color: var(--btn-1-color);
    padding: var(--btn-1-padding);
    background: var(--btn-1-background);
    border: var(--btn-1-border);
    border-radius: var(--btn-1-border-radius);
    box-shadow: var(--btn-1-box-shadow);
}
.btn-1:hover {
    color: var(--btn-1-color-hover);
    background: var(--btn-1-background-hover);
    border: var(--btn-1-border-hover);
}
.btn-2 {
    font-family: var(--btn-2-font-family);
    font-size: var(--btn-2-font-size);
    font-weight: var(--btn-2-font-weight);
    line-height: var(--btn-2-line-height);
    letter-spacing: var(--btn-2-letter-spacing);
    text-transform: var(--btn-2-text-transform);
    text-decoration: var(--btn-2-text-decoration);
    color: var(--btn-2-color);
    padding: var(--btn-2-padding);
    background: var(--btn-2-background);
    border: var(--btn-2-border);
    border-radius: var(--btn-2-border-radius);
    box-shadow: var(--btn-1-box-shadow);
}
.btn-2:hover {
    color: var(--btn-2-color-hover);
    background: var(--btn-2-background-hover);
    border: var(--btn-2-border-hover);
}
@media only screen and (max-width: 1100px) {
    .btn-1:hover {
        background: var(--btn-1-background);
        color: var(--btn-1-color);
        border: var(--btn-1-border);
    }
    .btn-2:hover {
        background: var(--btn-2-background);
        color: var(--btn-2-color);
        border: var(--btn-2-border);
    }
}

/* controls ------------------------------ */
input {
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    line-height: var(--input-line-height);
    letter-spacing: var(--input-letter-spacing);
    text-transform: var(--input-text-transform);
    text-decoration: var(--input-text-decoration);
    color: var(--input-color);
    padding: var(--input-padding);
    background: var(--input-background);
    border: var(--input-border);
    border-radius: var(--input-border-radius);
}
select {
    font-family: var(--select-font-family);
    font-size: var(--select-font-size);
    font-weight: var(--select-font-weight);
    letter-spacing: var(--select-letter-spacing);
    text-transform: var(--select-text-transform);
    text-decoration: var(--select-text-decoration);
    color: var(--select-color);
    padding: var(--select-padding);
    background: var(--select-background);
    border: var(--select-border);
    border-radius: var(--select-border-radius);
}
select option {
    font-family: var(--select-font-family);
    font-size: var(--select-font-size);
    font-weight: var(--select-font-weight);
    text-transform: var(--select-text-transform);
    color: var(--select-color);
}
textarea {
    font-family: var(--textarea-font-family);
    font-size: var(--textarea-font-size);
    font-weight: var(--textarea-font-weight);
    line-height: var(--textarea-line-height);
    letter-spacing: var(--textarea-letter-spacing);
    text-transform: var(--textarea-text-transform);
    text-decoration: var(--textarea-text-decoration);
    color: var(--textarea-color);
    padding: var(--textarea-padding);
    background: var(--textarea-background);
    border: var(--textarea-border);
    border-radius: var(--textarea-border-radius);
    resize: var(--textarea-resize);
}
input[type='checkbox'], input[type='radio'] {
    text-align: left;
    min-width: initial;
    width: 20px;
    margin-right: var(--checkbox-radio-margin);
}
input:focus, textarea:focus, select:focus {
    outline: var(--input-outline-focus);
}
input[type='checkbox']:focus, input[type='radio']:focus {
    outline: none;
}
label {
    font-family: var(--label-font-family);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    line-height: var(--label-line-height);
    letter-spacing: var(--label-letter-spacing);
    text-transform: var(--label-text-transform);
    text-decoration: var(--label-text-decoration);
    color: var(--label-color);
}
::placeholder {
    font-family: var(--placeholder-font-family);
    font-weight: var(--placeholder-font-weight);
    letter-spacing: var(--placeholder-letter-spacing);
    text-transform: var(--placeholder-text-transform);
    text-decoration: var(--placeholder-text-decoration);
    color: var(--placeholder-color);
    opacity: var(--placeholder-opacity);
}

/* animation ------------------------------ */
html {
    scroll-behavior: var(--scroll-behaviour);
}
.enter {
	opacity: 0;
}
.entered {
	animation: fadein 1s ease 0.3s 1 normal forwards;
}
@keyframes fadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@media only screen and (max-width: 1100px) {
    .enter {opacity: 1;}
}