:root {
    --color-magenta: #972064;
    --color-purple: #2e2460;
    --color-green: #00ce69;
    --color-grey: #939393;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-azure: #0da8e0;
    --color-ocean-blue: #002d74;
    --color-sky-blue: #00b5e2;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/poppins-v9-latin-regular.eot");
    src: local("Poppins Regular"), local("Poppins-Regular"),
        url("../fonts/poppins-v9-latin-regular.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/poppins-v9-latin-regular.woff2") format("woff2"),
        url("../fonts/poppins-v9-latin-regular.woff") format("woff"),
        url("../fonts/poppins-v9-latin-regular.ttf") format("truetype"),
        url("../fonts/poppins-v9-latin-regular.svg#Poppins") format("svg");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/poppins-v9-latin-500.eot");
    src: local("Poppins Medium"), local("Poppins-Medium"),
        url("../fonts/poppins-v9-latin-500.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/poppins-v9-latin-500.woff2") format("woff2"),
        url("../fonts/poppins-v9-latin-500.woff") format("woff"),
        url("../fonts/poppins-v9-latin-500.ttf") format("truetype"),
        url("../fonts/poppins-v9-latin-500.svg#Poppins") format("svg");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/poppins-v9-latin-600.eot");
    src: local("Poppins SemiBold"), local("Poppins-SemiBold"),
        url("../fonts/poppins-v9-latin-600.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/poppins-v9-latin-600.woff2") format("woff2"),
        url("../fonts/poppins-v9-latin-600.woff") format("woff"),
        url("../fonts/poppins-v9-latin-600.ttf") format("truetype"),
        url("../fonts/poppins-v9-latin-600.svg#Poppins") format("svg");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/roboto-v20-latin-regular.eot");
    src: local("Roboto"), local("Roboto-Regular"),
        url("../fonts/roboto-v20-latin-regular.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/roboto-v20-latin-regular.woff2") format("woff2"),
        url("../fonts/roboto-v20-latin-regular.woff") format("woff"),
        url("../fonts/roboto-v20-latin-regular.ttf") format("truetype"),
        url("../fonts/roboto-v20-latin-regular.svg#Roboto") format("svg");
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/roboto-v20-latin-500.eot");
    src: local("Roboto Medium"), local("Roboto-Medium"),
        url("../fonts/roboto-v20-latin-500.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/roboto-v20-latin-500.woff2") format("woff2"),
        url("../fonts/roboto-v20-latin-500.woff") format("woff"),
        url("../fonts/roboto-v20-latin-500.ttf") format("truetype"),
        url("../fonts/roboto-v20-latin-500.svg#Roboto") format("svg");
}
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/roboto-v20-latin-italic.eot");
    src: local("Roboto Italic"), local("Roboto-Italic"),
        url("../fonts/roboto-v20-latin-italic.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/roboto-v20-latin-italic.woff2") format("woff2"),
        url("../fonts/roboto-v20-latin-italic.woff") format("woff"),
        url("../fonts/roboto-v20-latin-italic.ttf") format("truetype"),
        url("../fonts/roboto-v20-latin-italic.svg#Roboto") format("svg");
}
@font-face {
    font-family: "Grenadine MVB";
    src: url("../fonts/Grenadine_MVB_Reg.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Grenadine MVB";
    src: url("../fonts/Grenadine_MVB_Med.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "Grenadine MVB";
    src: url("../fonts/Grenadine_MVB_Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "IvyEpic";
    src: url("../fonts/IvyEpic_Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "IvyEpic";
    src: url("../fonts/IvyEpic_Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}

.background-magenta {
    background-color: var(--color-magenta);
}
.background-purple {
    background-color: var(--color-purple);
}
.foreground-grey {
    color: var(--color-grey);
}
.foreground-black {
    color: var(--color-black);
}
.foreground-white {
    color: var(--color-white);
}
.background-ocean-blue {
    background-color: var(--color-ocean-blue);
}
.foreground-ocean-blue {
    color: var(--color-ocean-blue);
}
.background-sky-blue {
    background-color: var(--color-sky-blue);
}

html,
body {
    height: 100%;
    width: 100%;
}
html {
    scroll-behavior: smooth;
}
body {
    display: flex;
    flex-direction: column;
    color: var(--color-black);
    background-color: var(--color-white);
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    font-size: 18px;
    line-height: 25px;
}
strong {
    font-weight: bold;
}
li {
    margin-bottom: 6px;
}

.form-control:focus {
    border-color: #008f4a;
    box-shadow: 0 0 0 0.2rem rgba(0, 143, 74, 0.5);
}

.btn-green {
    color: #fff;
    background-color: var(--color-green);
    border-color: var(--color-green);
}
.btn-green:hover {
    color: #fff;
    background-color: #00a354;
    border-color: #008f4a;
}
.btn-green:focus,
.btn-green.focus {
    color: #fff;
    background-color: #00a354;
    border-color: #008f4a;
    box-shadow: 0 0 0 0.2rem rgba(0, 143, 74, 0.5);
}
.btn-green.disabled,
.btn-green:disabled {
    color: #fff;
    background-color: var(--color-green);
    border-color: var(--color-green);
}
.btn-green:not(:disabled):not(.disabled):active,
.btn-green:not(:disabled):not(.disabled).active,
.show > .btn-green.dropdown-toggle {
    color: #fff;
    background-color: #008f4a;
    border-color: #007a3f;
}
.btn-green:not(:disabled):not(.disabled):active:focus,
.btn-green:not(:disabled):not(.disabled).active:focus,
.show > .btn-green.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 143, 74, 0.5);
}

.btn-azure {
    color: #fff;
    background-color: var(--color-azure);
    border-color: var(--color-azure);
}
.btn-azure:hover {
    color: #fff;
    background-color: #0da8e0;
    border-color: #0da8e0;
}
.btn-azure:focus,
.btn-azure.focus {
    color: #fff;
    background-color: #0da8e0;
    border-color: #0da8e0;
    box-shadow: 0 0 0 0.2rem rgba(12, 150, 200, 0.5);
}
.btn-azure.disabled,
.btn-azure:disabled {
    color: #fff;
    background-color: var(--color-azure);
    border-color: var(--color-azure);
}
.btn-azure:not(:disabled):not(.disabled):active,
.btn-azure:not(:disabled):not(.disabled).active,
.show > .btn-azure.dropdown-toggle {
    color: #fff;
    background-color: #0da8e0;
    border-color: #0da8e0;
}
.btn-azure:not(:disabled):not(.disabled):active:focus,
.btn-azure:not(:disabled):not(.disabled).active:focus,
.show > .btn-azure.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(12, 150, 200, 0.5);
}

.btn-outline-grey {
    color: var(--color-grey);
    border-color: var(--color-grey);
}
.btn-outline-grey:hover {
    color: #fff;
    background-color: var(--color-grey);
    border-color: var(--color-grey);
}
.btn-outline-grey:focus,
.btn-outline-grey.focus {
    box-shadow: 0 0 0 0.2rem rgba(147, 147, 147, 0.5);
}
.btn-outline-grey.disabled,
.btn-outline-grey:disabled {
    color: var(--color-grey);
    background-color: transparent;
}
.btn-outline-grey:not(:disabled):not(.disabled):active,
.btn-outline-grey:not(:disabled):not(.disabled).active,
.show > .btn-outline-grey.dropdown-toggle {
    color: #fff;
    background-color: var(--color-grey);
    border-color: var(--color-grey);
}
.btn-outline-grey:not(:disabled):not(.disabled):active:focus,
.btn-outline-grey:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-grey.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(147, 147, 147, 0.5);
}

.form-control {
    color: var(--color-black);
}

.container-max-960 {
    width: 100%;
    max-width: 960px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.link,
.link:focus,
.link:hover {
    color: inherit;
    text-decoration: none;
}
.link:focus {
    outline-color: rgba(0, 143, 74, 0.5);
}
.animate-link {
    text-decoration: none;
    display: inline-block;
}
.animate-link:after {
    content: "";
    display: block;
    height: 2px;
    width: 0;
    background-color: transparent;
    transition: width 0.5s ease, background-color 0.5s ease; /* .5 seonds for changes to the width and background-color */
    -webkit-transition: width 0.5s ease, background-color 0.5s ease; /* Chrome and Safari */
    -moz-transition: width 0.5s ease, background-color 0.5s ease; /* FireFox */
}
.animate-link:hover:after {
    width: 100%;
    background-color: var(--color-white);
}

.z-index-1 {
    z-index: 1;
}

.checkbox {
    position: absolute;
    opacity: 0;
}
.checkbox + span {
    position: relative;
    cursor: pointer;
    padding: 0;
}
.checkbox + span:before {
    content: "";
    margin-right: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 0.3rem;
}
.checkbox:focus + span:before {
    box-shadow: 0 0 0 0.2rem rgba(0, 143, 74, 0.5);
}
.checkbox:checked + span:before {
    background: var(--color-green);
    border-color: var(--color-green);
}
.checkbox:disabled + span {
    color: #b8b8b8;
    cursor: auto;
}
.checkbox:disabled + span:before {
    box-shadow: none;
    background: #ddd;
    border-color: #b8b8b8;
}
.checkbox:checked + span:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 9px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white,
        4px -6px 0 white, 4px -8px 0 white;
    transform: rotate(45deg);
}