:root{
    --cream: #F5F8FA;
    --click-blue: #0078B4;
    --dark-gray: #979797;
    --light-blue: #F5F8FA;
    --content-background: #EAF4F9;
    --brand-primary-blue: #0077B4;
    --brand-strong-blue: #024B86;
}
@font-face{
    font-family: "Lato";
    src: url(../../local/fonts/Lato-Regular.ttf)
        format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: "Lato";
    src: url(../../local/fonts/Lato-Light.ttf)
        format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: "Lato";
    src: url(../../local/fonts/Lato-Bold.ttf)
        format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: "Roboto";
    src: url(../../local/fonts/Roboto-Light.ttf) format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}
@font-face{
    font-family: "Roboto";
    src: url(../../local/fonts/Roboto-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}
@font-face{
    font-family: "Roboto";
    src: url(../../local/fonts/Roboto-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}
@font-face{
    font-family: "LibreFranklin";
    src: url(../../local/fonts/LibreFranklin-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}
@font-face{
    font-family: "LibreFranklin";
    src: url(../../local/fonts/LibreFranklin-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}
@font-face{
    font-family: "Livvic";
    src: url(../../local/fonts/Livvic-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}
@font-face{
    font-family: "Livvic";
    src: url(../../local/fonts/Livvic-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}
*{margin: 0;padding: 0;box-sizing: border-box;}
html{
    font-family: "LibreFranklin", sans-serif;
    font-size: 16px;
    color: #000;
    background-color: var(--cream);
    line-height: 150%;
    font-weight: 400;
}
a{transition: all 0.3s ease;}
.pic{
    display: block;
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.page-wrapper-sm{width:100%;margin: 0 auto;}
.page-wrapper{width: 90%;margin: 0 auto;}
.page-wrapper, .page-wrapper-sm{max-width: 1340px;}

@media (max-width: 1360px){
    .page-wrapper-sm{padding: 0 100px;}
}
@media (min-width:769px) and (max-width: 992px){
    .page-wrapper-sm{padding: 0 32px;}
}
@media (max-width: 768px){
    .page-wrapper-sm{padding: 0 16px;}
}
@media(max-width: 820px){html{font-size: 14px;}}
@media(max-width: 480px){html{font-size: 12px;}}