@import url("https://fonts.googleapis.com/css?family=Lato:400,700,500|Roboto:400|Roboto+Mono:400,500|Lexend:400,700,500");


@font-face {
    font-family: "Material Icons-Regular";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/MaterialIcons-Regular.ttf") format("truetype");
}

:root {
    --abbey: #4f4f4f;
    --bahama-blue: #006493;
    --bali-hai: #7e97b1;
    --black: #000000;
    --black-10: #00000014;
    --black-2: #000000de;
    --black-3: #00000099;
    --black-4: #0000008a;
    --black-5: #00000033;
    --black-6: #0000006b;
    --black-7: #00000061;
    --black-8: #0000001f;
    --black-9: #00000029;
    --burning-orange: #f3722c;
    --charade: #2b3137;
    --coconut: #fbfcff;
    --coconut-2: #fcfcff;
    --coral-red: #f94144;
    --curious-blue: #2d9cdb;
    --daintree: #001e2d;
    --fern: #63d46b;
    --french-gray: #b5bdc4;
    --lavender: #bb86fc1f;
    --lily-white: #e6f2ff;
    --lily-white-2: #e4f3ff;
    --lochmara: #007eb8;
    --log-cabin: #212121;
    --log-cabin-2: #21212114;
    --malibu: #8ccdff;
    --manatee: #8b9198;
    --mirage: #161c21;
    --olivine: #90be6d;
    --onahau: #cae6ff;
    --picton-blue: #4fb6f8;
    --prussian-blue: #00344f;
    --regal-blue: #004b70;
    --ronchi: #f9c74f;
    --scarpa-flow: #595f65;
    --sonic-silver: #757575;
    --thunderbird: #ba1a1a;
    --tree-poppy: #f8961e;
    --white: #ffffff;
    --white-2: #ffffffbd;
    --yellow-orange: #f5bc41;
    --zircon: #f6f9ff;
    --font-size-l: 16px;
    --font-size-m: 14px;
    --font-size-s: 12px;
    --font-size-xl: 18px;
    --font-size-xs: 11px;
    --font-size-xxl: 20px;
    --font-size-xxxl: 24px;
    --font-family-lato: "Lato", Helvetica;
    --font-family-lexend: "Lexend", Helvetica;
    --font-family-material_icons-regular: "Material Icons-Regular", Helvetica;
    --font-family-roboto: "Roboto", Helvetica;
    --font-family-roboto_mono: "Roboto Mono", Helvetica;
}

.lato-normal-black-14px {
    color: var(--black-2);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
}

.lexend-medium-abbey-11px {
    color: var(--abbey);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: 500;
}

.lato-bold-sonic-silver-12px {
    color: var(--sonic-silver);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 700;
}

.lexend-medium-mirage-16px {
    color: var(--mirage);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 500;
}

.lato-normal-black-12px {
    color: var(--black-2);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
}

.lato-normal-black-16px {
    color: var(--black-2);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 400;
}

.lexend-medium-white-14px {
    color: var(--white);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 500;
}

.lato-normal-white-12px {
    color: var(--white);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
}

.materialicons-regular-normal-black-24px {
    color: var(--black-4);
    font-family: var(--font-family-material_icons-regular);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 400;
}

.lexend-normal-black-24px {
    color: var(--black);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 400;
}

.lexend-medium-black-11px {
    color: var(--black);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: 500;
}

.lato-normal-black-14px-2 {
    color: var(--black-3);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
}

.lato-normal-picton-blue-14px {
    color: var(--picton-blue);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
}

.lato-normal-black-14px-3 {
    color: var(--black);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
}

.lato-medium-black-14px {
    color: var(--black-3);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 500;
}

.lato-normal-log-cabin-56px {
    color: var(--log-cabin);
    font-family: var(--font-family-lato);
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
}

.lato-medium-lochmara-14px {
    color: var(--lochmara);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 500;
}

.lexend-medium-black-12px {
    color: var(--black);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 500;
}

.lato-bold-black-14px {
    color: var(--black-2);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 700;
}

.lato-medium-black-20px {
    color: var(--black-2);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 500;
}

.lexend-normal-scarpa-flow-24px {
    color: var(--scarpa-flow);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 400;
}

.materialicons-regular-normal-black-24px-2 {
    color: var(--black-5);
    font-family: var(--font-family-material_icons-regular);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 400;
}

.lexend-medium-daintree-12px {
    color: var(--daintree);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 500;
}

.lato-normal-daintree-16px {
    color: var(--daintree);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 400;
}

.lato-normal-black-12px-2 {
    color: var(--black);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
}

.lato-normal-thunderbird-14px {
    color: var(--thunderbird);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
}

.lato-medium-white-14px {
    color: var(--white-2);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 500;
}

.lexend-bold-daintree-20px {
    color: var(--daintree);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 700;
}

.lato-normal-manatee-16px {
    color: var(--manatee);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 400;
}

.lexend-normal-black-20px {
    color: var(--black-2);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 400;
}

.lexend-normal-scarpa-flow-14px {
    color: var(--scarpa-flow);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
}

.lexend-medium-lochmara-16px {
    color: var(--lochmara);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 500;
}

.menu-nav{
    color: var(--mirage);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 500;
    text-decoration:none;
}
.menu-nav-a {
    color: var(--lochmara);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 500;
    text-decoration:none;
}

.lato-normal-black-12px-3 {
    color: var(--black-3);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
}

.lato-normal-lochmara-12px {
    color: var(--lochmara);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
}

.lato-normal-log-cabin-12px {
    color: var(--log-cabin);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
}

.lato-normal-white-14px {
    color: var(--white);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
}

.lato-medium-white-14px-2 {
    color: var(--white);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 500;
}

.lexend-medium-prussian-blue-16px {
    color: var(--prussian-blue);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 500;
}

.lexend-normal-prussian-blue-22px {
    color: var(--prussian-blue);
    font-family: var(--font-family-lexend);
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
}

.lato-bold-regal-blue-14px {
    color: var(--regal-blue);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 700;
}

.lato-bold-black-12px {
    color: var(--black-2);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 700;
}

.materialicons-regular-normal-black-18px {
    color: var(--black-2);
    font-family: var(--font-family-material_icons-regular);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 400;
}

.lexend-medium-white-16px {
    color: var(--white);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 500;
}

.lexend-medium-charade-16px {
    color: var(--charade);
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 500;
}

.materialicons-regular-normal-black-24px-3 {
    color: var(--black-3);
    font-family: var(--font-family-material_icons-regular);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 400;
}

.lato-bold-black-16px {
    color: var(--black-2);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 700;
}

.lato-medium-malibu-14px {
    color: var(--malibu);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 500;
}

.lato-normal-black-24px {
    color: var(--black-2);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 400;
}

.lato-medium-black-10px {
    color: var(--black-2);
    font-family: var(--font-family-lato);
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
}

.roboto-normal-black-18px {
    color: var(--black);
    font-family: var(--font-family-roboto);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 400;
}