:root {
    /* colors */
    --Base-Black: #000000;
    --Base-Black-Pearl: #08142D;
    --Base-White: #FFFFFF;
    --Background-White: #F5F3F8;
    --Primary-Mariner: #3067DB;
    --Base-Cod-Gray: #1A1A1A;
    --Gray-Black-Haze: #F1F2F2;
    --Grey-Abbey: #4D4D4F;
    --Secondary-Celestial-Cathedral: #DDE6F9;
    --Primary-Twilight-Indigo: #10285B;
    --Hibiscus-Hibiscus: #FF607F;
    --Hibiscus-Hibiscus-50: #FFEFF4;
    --Hibiscus-Hibiscus-75: #FFDCE6;
    --Hibiscus-Hibiscus-200: #F6CAD7;
    --Prince-Prince: #5C2B9C;
    --Prince-Prince-50: #EEE5FF;
    --Sunflower-Sunflower: #F9C342;
    --Sunflower-Sunflower-50: #FFF8DD;
    --Wasabi-Wasabi:var(--Background-White);
    --Wasabi-Wasabi-50:#B2D400;
    --Laguna-Laguna:var#00D8CD;
    --Laguna-Laguna-50:#E1FFFD;
    --Primary-Santorini-Santorini: #3067DB;
    --Santorini-Santorini-50:#EBF8FF;
    --Breeze-Breeze-:#43BEEF;
    --Breeze-Breeze-50:#E5FCFF;

    /* font styles */
    --Font-Family-Title: "ClarikaGeometric-DemiBold";
    --Font-Family-Title-Regular: "Clarika Geometric Regular";
    --Font-Family-Body: "ClarikaGrotesque-Light";

    /* sizes */
    --stroke-weight-2: 2px;
    --line-height-24: 24px;
    --item-spacing-xs: 8px;
    --item-spacing-s: 16px;
    --item-spacing-l: 48px;
    --item-spacing-124: 124px;

    /* z-index */
    --z-index-header: 1000;
}

::-webkit-scrollbar {
    background: transparent;
}

::-webkit-scrollbar-track {
    background: transparent;
}

* {
    scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scrollbar-gutter: stable;
}

@font-face {
    font-family: "Clarika Geometric Regular";
    src: url("/fonts/d3148d.eot");
    src: url("/fonts/d3148d_iefix.eot")format("embedded-opentype"),
    url("/fonts/d3148d.woff2")format("woff2"),
    url("/fonts/d3148d.woff")format("woff"),
    url("/fonts/d3148d.ttf")format("truetype")
}

@font-face {
    font-family: 'ClarikaGeometric-DemiBoldItalic';
    src: url("/fonts/359476_0_0.eot");
    src: url("/fonts/359476_0_0.eot?#iefix") format("embedded-opentype"), url("/fonts/359476_0_0.woff2") format("woff2"), url("/fonts/359476_0_0.woff") format("woff"), url("/fonts/359476_0_0.ttf") format("truetype");
}

@font-face {
    font-family: 'ClarikaGeometric-DemiBold';
    src: url("/fonts/359476_1_0.eot");
    src: url("/fonts/359476_1_0.eot?#iefix") format("embedded-opentype"), url("/fonts/359476_1_0.woff2") format("woff2"), url("/fonts/359476_1_0.woff") format("woff"), url("/fonts/359476_1_0.ttf") format("truetype");
}

@font-face {
    font-family: 'ClarikaGrotesque-Light';
    src: url("/fonts/359476_2_0.eot");
    src: url("/fonts/359476_2_0.eot?#iefix") format("embedded-opentype"), url("/fonts/359476_2_0.woff2") format("woff2"), url("/fonts/359476_2_0.woff") format("woff"), url("/fonts/359476_2_0.ttf") format("truetype");
}

@font-face {
    font-family: 'ClarikaGrotesque-LightItalic';
    src: url("/fonts/359476_3_0.eot");
    src: url("/fonts/359476_3_0.eot?#iefix") format("embedded-opentype"), url("/fonts/359476_3_0.woff2") format("woff2"), url("/fonts/359476_3_0.woff") format("woff"), url("/fonts/359476_3_0.ttf") format("truetype");
}

body {
    color: #4D4D4F;
    font-family: ClarikaGrotesque-Light, Arial, sans-serif;
    font-size: 1.2em;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: ClarikaGeometric-DemiBold;
    font-weight: 500;
}

.container {
    padding: 32px 16px;
}

h1 {
    font-size: 40px;
    font-weight: 700;
    line-height: 46px;
}

h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 32px;
}

h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 27.6px;
}

a {
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
}

#side-menu {
    margin-bottom: 2.6em;
    max-width: none;
}

main .service-list a {
    display: block;
    padding-left: 2em;
    position: relative;
}

main .service-list a .plus {
    left: 0;
    position: absolute;
    top: -5px;
}

@media (min-width: 768px) {
    .container {
        padding: 40px 40px;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 60px 100px;
    }
    h1 {
        font-size: 64px;
        font-weight: 700;
        line-height: 73.6px;
    }

    h2 {
        font-size: 40px;
        font-weight: 700;
        line-height: 46px;
    }

    h3 {
        font-size: 32px;
        font-weight: 700;
        line-height: 36.8px;
    }

    a {
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
    }

}

a {
    color: var(--portal-theme-color);
    font-family: var(--Font-Family-Title);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

p {
    font-size: 16px;
    line-height: 24px;
    color: var(--Base-Cod-Gray);
    font-family: ClarikaGrotesque-Light, Arial, sans-serif;
    font-weight: 300;
}

.container {
    max-width: 1440px;
}

.home header {
    padding: 1em 0 14em;
}

.home header #hero-name {
    padding: 5em 0 1em;
    text-align: center;
}

main {
    flex: 1;
}

main .card {
    border: none;
}

main .card .row {
    margin: 0 0 2em;
}

main .card .card-img {
    height: 125px;
    margin-right: 15px;
    width: 125px;
}

main .card .card-img img {
    height: 62px;
}

main .card .card-img span {
    background: #F1F2F2;
    display: block;
    margin-top: 7px;
    padding: 1em;
    text-align: center;
}

main .card .card-body {
    font-size: 16px;
    padding: 0;
}

main .card .card-body .card-title {
    color: #1A1A1A;
    margin-bottom: 5px;
}

main .card .card-body .card-date {
    color: #63A5EA;
    font-size: 12px;
    margin-bottom: 1em;
}

main .service-list {
    border-bottom: solid 1px #F1F2F2;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

main .service-list h3 {
    font-size: 22px;
}

main .service-list h3 .plus {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 0;
    font-size: 1.5em;
    position: relative;
    top: 13px;
}

main .service-list h3 .plus span {
    position: absolute;
    transition: .3s;
    background: var(--Primary-Mariner);
}

main .service-list h3 .plus span:first-of-type {
    top: 25%;
    bottom: 25%;
    width: 4px;
    left: 45%;
}

main .service-list h3 .plus span:last-of-type {
    left: 25%;
    right: 25%;
    height: 4px;
    top: 45%;
}

main .service-list h3 a[aria-expanded="true"] {
    color: #63A5EA;
}

main .service-list h3 a[aria-expanded="true"] span {
    background: #63A5EA !important;
}

main .service-list h3 a[aria-expanded="true"] .plus span:first-of-type,
main .service-list h3 a[aria-expanded="true"] .plus span:last-of-type {
    transform: rotate(90deg);
}

main .service-list h3 a[aria-expanded="true"] .plus span:last-of-type {
    left: 50%;
    right: 50%;
}

main .service-list h3 a:hover span {
    background: #4D4D4F;
}

main .multi-collapse .service-list {
    border-bottom: none;
}

main .multi-collapse.collapse,
main .collapsing {
    margin-left: 45px;
}

main .btn-blue {
    background: var(--Primary-Mariner);
    color: var(--Base-White);
    font-family: ClarikaGeometric-DemiBold;
    padding: .6em 2.1em;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
}

main .btn-blue:hover {
    background: #1e51bf;
    color: var(--Base-White);
}

#side-menu {
    list-style-type: none;
    margin: 0;
    max-width: 175px;
    padding: 0;
}

#side-menu li {
    border-left: solid 5px #F1F2F2;
    display: block;
    font-family: ClarikaGeometric-DemiBold;
    line-height: 22px;
    margin-bottom: 1em;
    padding-left: 1em;
}

#side-menu li a {
    color: #4D4D4F;
    display: block;
    font-size: 18px;
}

#side-menu li a:hover {
    text-decoration: none;
}

#side-menu li.active,
#side-menu li:hover {
    border-left: solid 5px var(--Primary-Mariner);;
}

#side-menu li.active a,
#side-menu li:hover a {
    color: var(--Primary-Mariner);
}