@britannica/ui
Version:
Consumer style system
2,801 lines (2,611 loc) • 232 kB
CSS
@charset "UTF-8";
.container {
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
width: 100%;
max-width: 1140px;
}
.container-lg {
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
width: 100%;
max-width: 1140px;
}
@media (min-width: 1248px) {
.container-lg {
max-width: 1366px;
}
}
.container-fluid {
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
width: 100%;
}
.container-absolute {
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
width: 100%;
max-width: calc(100% - 40px);
}
/*.container .container {
padding-left: 0;
padding-right: 0;
}*/
.grid {
--grid-gutter-x: 20px;
--grid-gutter-y: 0;
display: flex;
flex: 1;
flex-wrap: wrap;
margin-left: calc(var(--grid-gutter-x) / -2);
margin-right: calc(var(--grid-gutter-x) / -2);
margin-top: calc(var(--grid-gutter-y) * -1);
max-height: 100%;
}
.grid > * {
flex-shrink: 0;
margin-top: var(--grid-gutter-y);
max-width: 100%;
padding-left: calc(var(--grid-gutter-x) / 2);
padding-right: calc(var(--grid-gutter-x) / 2);
}
.col {
flex: 1 0 0%;
min-height: 0;
min-width: 0;
}
.col-auto {
flex: 0 0 auto;
width: auto;
}
.col-5 {
flex: 0 0 auto;
width: 5%;
}
.col-10 {
flex: 0 0 auto;
width: 10%;
}
.col-15 {
flex: 0 0 auto;
width: 15%;
}
.col-20 {
flex: 0 0 auto;
width: 20%;
}
.col-25 {
flex: 0 0 auto;
width: 25%;
}
.col-30 {
flex: 0 0 auto;
width: 30%;
}
.col-35 {
flex: 0 0 auto;
width: 35%;
}
.col-40 {
flex: 0 0 auto;
width: 40%;
}
.col-45 {
flex: 0 0 auto;
width: 45%;
}
.col-50 {
flex: 0 0 auto;
width: 50%;
}
.col-55 {
flex: 0 0 auto;
width: 55%;
}
.col-60 {
flex: 0 0 auto;
width: 60%;
}
.col-65 {
flex: 0 0 auto;
width: 65%;
}
.col-70 {
flex: 0 0 auto;
width: 70%;
}
.col-75 {
flex: 0 0 auto;
width: 75%;
}
.col-80 {
flex: 0 0 auto;
width: 80%;
}
.col-85 {
flex: 0 0 auto;
width: 85%;
}
.col-90 {
flex: 0 0 auto;
width: 90%;
}
.col-95 {
flex: 0 0 auto;
width: 95%;
}
.col-100 {
flex: 0 0 auto;
width: 100%;
}
.col-offset-0 {
margin-left: 0;
}
.col-offset-5 {
margin-left: 5%;
}
.col-offset-10 {
margin-left: 10%;
}
.col-offset-15 {
margin-left: 15%;
}
.col-offset-20 {
margin-left: 20%;
}
.col-offset-25 {
margin-left: 25%;
}
.col-offset-30 {
margin-left: 30%;
}
.col-offset-35 {
margin-left: 35%;
}
.col-offset-40 {
margin-left: 40%;
}
.col-offset-45 {
margin-left: 45%;
}
.col-offset-50 {
margin-left: 50%;
}
.col-offset-55 {
margin-left: 55%;
}
.col-offset-60 {
margin-left: 60%;
}
.col-offset-65 {
margin-left: 65%;
}
.col-offset-70 {
margin-left: 70%;
}
.col-offset-75 {
margin-left: 75%;
}
.col-offset-80 {
margin-left: 80%;
}
.col-offset-85 {
margin-left: 85%;
}
.col-offset-90 {
margin-left: 90%;
}
.col-offset-95 {
margin-left: 95%;
}
.col-16 {
flex: 0 0 auto;
width: 16.66666%;
}
.col-33 {
flex: 0 0 auto;
width: 33.33333%;
}
.col-66 {
flex: 0 0 auto;
width: 66.66666%;
}
.col-offset-16 {
margin-left: 16.66666%;
}
.col-offset-33 {
margin-left: 33.33333%;
}
.col-offset-66 {
margin-left: 66.66666%;
}
.col-da-160 {
flex: 0 0 auto;
box-sizing: content-box;
width: 160px;
}
.col-da-200 {
flex: 0 0 auto;
box-sizing: content-box;
width: 200px;
}
.col-da-300 {
flex: 0 0 auto;
box-sizing: content-box;
width: 300px;
}
.col-da-320 {
flex: 0 0 auto;
box-sizing: content-box;
width: 320px;
}
.g-0,
.gx-0 {
--grid-gutter-x: 0;
}
.g-0,
.gy-0 {
--grid-gutter-y: 0;
}
.g-5,
.gx-5 {
--grid-gutter-x: 5px;
}
.g-5,
.gy-5 {
--grid-gutter-y: 5px;
}
.g-10,
.gx-10 {
--grid-gutter-x: 10px;
}
.g-10,
.gy-10 {
--grid-gutter-y: 10px;
}
.g-15,
.gx-15 {
--grid-gutter-x: 15px;
}
.g-15,
.gy-15 {
--grid-gutter-y: 15px;
}
.g-20,
.gx-20 {
--grid-gutter-x: 20px;
}
.g-20,
.gy-20 {
--grid-gutter-y: 20px;
}
.g-25,
.gx-25 {
--grid-gutter-x: 25px;
}
.g-25,
.gy-25 {
--grid-gutter-y: 25px;
}
.g-30,
.gx-30 {
--grid-gutter-x: 30px;
}
.g-30,
.gy-30 {
--grid-gutter-y: 30px;
}
.g-35,
.gx-35 {
--grid-gutter-x: 35px;
}
.g-35,
.gy-35 {
--grid-gutter-y: 35px;
}
.g-40,
.gx-40 {
--grid-gutter-x: 40px;
}
.g-40,
.gy-40 {
--grid-gutter-y: 40px;
}
.g-45,
.gx-45 {
--grid-gutter-x: 45px;
}
.g-45,
.gy-45 {
--grid-gutter-y: 45px;
}
.g-50,
.gx-50 {
--grid-gutter-x: 50px;
}
.g-50,
.gy-50 {
--grid-gutter-y: 50px;
}
.g-55,
.gx-55 {
--grid-gutter-x: 55px;
}
.g-55,
.gy-55 {
--grid-gutter-y: 55px;
}
.g-60,
.gx-60 {
--grid-gutter-x: 60px;
}
.g-60,
.gy-60 {
--grid-gutter-y: 60px;
}
.g-70,
.gx-70 {
--grid-gutter-x: 70px;
}
.g-70,
.gy-70 {
--grid-gutter-y: 70px;
}
.g-80,
.gx-80 {
--grid-gutter-x: 80px;
}
.g-80,
.gy-80 {
--grid-gutter-y: 80px;
}
.g-90,
.gx-90 {
--grid-gutter-x: 90px;
}
.g-90,
.gy-90 {
--grid-gutter-y: 90px;
}
.g-100,
.gx-100 {
--grid-gutter-x: 100px;
}
.g-100,
.gy-100 {
--grid-gutter-y: 100px;
}
@media (min-width: 672px) {
.col-sm {
flex: 1 0 0%;
min-height: 0;
min-width: 0;
}
.col-sm-auto {
flex: 0 0 auto;
width: auto;
}
.col-sm-5 {
flex: 0 0 auto;
width: 5%;
}
.col-sm-10 {
flex: 0 0 auto;
width: 10%;
}
.col-sm-15 {
flex: 0 0 auto;
width: 15%;
}
.col-sm-20 {
flex: 0 0 auto;
width: 20%;
}
.col-sm-25 {
flex: 0 0 auto;
width: 25%;
}
.col-sm-30 {
flex: 0 0 auto;
width: 30%;
}
.col-sm-35 {
flex: 0 0 auto;
width: 35%;
}
.col-sm-40 {
flex: 0 0 auto;
width: 40%;
}
.col-sm-45 {
flex: 0 0 auto;
width: 45%;
}
.col-sm-50 {
flex: 0 0 auto;
width: 50%;
}
.col-sm-55 {
flex: 0 0 auto;
width: 55%;
}
.col-sm-60 {
flex: 0 0 auto;
width: 60%;
}
.col-sm-65 {
flex: 0 0 auto;
width: 65%;
}
.col-sm-70 {
flex: 0 0 auto;
width: 70%;
}
.col-sm-75 {
flex: 0 0 auto;
width: 75%;
}
.col-sm-80 {
flex: 0 0 auto;
width: 80%;
}
.col-sm-85 {
flex: 0 0 auto;
width: 85%;
}
.col-sm-90 {
flex: 0 0 auto;
width: 90%;
}
.col-sm-95 {
flex: 0 0 auto;
width: 95%;
}
.col-sm-100 {
flex: 0 0 auto;
width: 100%;
}
.col-sm-offset-0 {
margin-left: 0;
}
.col-sm-offset-5 {
margin-left: 5%;
}
.col-sm-offset-10 {
margin-left: 10%;
}
.col-sm-offset-15 {
margin-left: 15%;
}
.col-sm-offset-20 {
margin-left: 20%;
}
.col-sm-offset-25 {
margin-left: 25%;
}
.col-sm-offset-30 {
margin-left: 30%;
}
.col-sm-offset-35 {
margin-left: 35%;
}
.col-sm-offset-40 {
margin-left: 40%;
}
.col-sm-offset-45 {
margin-left: 45%;
}
.col-sm-offset-50 {
margin-left: 50%;
}
.col-sm-offset-55 {
margin-left: 55%;
}
.col-sm-offset-60 {
margin-left: 60%;
}
.col-sm-offset-65 {
margin-left: 65%;
}
.col-sm-offset-70 {
margin-left: 70%;
}
.col-sm-offset-75 {
margin-left: 75%;
}
.col-sm-offset-80 {
margin-left: 80%;
}
.col-sm-offset-85 {
margin-left: 85%;
}
.col-sm-offset-90 {
margin-left: 90%;
}
.col-sm-offset-95 {
margin-left: 95%;
}
.col-sm-16 {
flex: 0 0 auto;
width: 16.66666%;
}
.col-sm-33 {
flex: 0 0 auto;
width: 33.33333%;
}
.col-sm-66 {
flex: 0 0 auto;
width: 66.66666%;
}
.col-sm-offset-16 {
margin-left: 16.66666%;
}
.col-sm-offset-33 {
margin-left: 33.33333%;
}
.col-sm-offset-66 {
margin-left: 66.66666%;
}
.col-sm-da-160 {
flex: 0 0 auto;
box-sizing: content-box;
width: 160px;
}
.col-sm-da-200 {
flex: 0 0 auto;
box-sizing: content-box;
width: 200px;
}
.col-sm-da-300 {
flex: 0 0 auto;
box-sizing: content-box;
width: 300px;
}
.col-sm-da-320 {
flex: 0 0 auto;
box-sizing: content-box;
width: 320px;
}
.g-sm-0,
.gx-sm-0 {
--grid-gutter-x: 0;
}
.g-sm-0,
.gy-sm-0 {
--grid-gutter-y: 0;
}
.g-sm-5,
.gx-sm-5 {
--grid-gutter-x: 5px;
}
.g-sm-5,
.gy-sm-5 {
--grid-gutter-y: 5px;
}
.g-sm-10,
.gx-sm-10 {
--grid-gutter-x: 10px;
}
.g-sm-10,
.gy-sm-10 {
--grid-gutter-y: 10px;
}
.g-sm-15,
.gx-sm-15 {
--grid-gutter-x: 15px;
}
.g-sm-15,
.gy-sm-15 {
--grid-gutter-y: 15px;
}
.g-sm-20,
.gx-sm-20 {
--grid-gutter-x: 20px;
}
.g-sm-20,
.gy-sm-20 {
--grid-gutter-y: 20px;
}
.g-sm-25,
.gx-sm-25 {
--grid-gutter-x: 25px;
}
.g-sm-25,
.gy-sm-25 {
--grid-gutter-y: 25px;
}
.g-sm-30,
.gx-sm-30 {
--grid-gutter-x: 30px;
}
.g-sm-30,
.gy-sm-30 {
--grid-gutter-y: 30px;
}
.g-sm-35,
.gx-sm-35 {
--grid-gutter-x: 35px;
}
.g-sm-35,
.gy-sm-35 {
--grid-gutter-y: 35px;
}
.g-sm-40,
.gx-sm-40 {
--grid-gutter-x: 40px;
}
.g-sm-40,
.gy-sm-40 {
--grid-gutter-y: 40px;
}
.g-sm-45,
.gx-sm-45 {
--grid-gutter-x: 45px;
}
.g-sm-45,
.gy-sm-45 {
--grid-gutter-y: 45px;
}
.g-sm-50,
.gx-sm-50 {
--grid-gutter-x: 50px;
}
.g-sm-50,
.gy-sm-50 {
--grid-gutter-y: 50px;
}
.g-sm-55,
.gx-sm-55 {
--grid-gutter-x: 55px;
}
.g-sm-55,
.gy-sm-55 {
--grid-gutter-y: 55px;
}
.g-sm-60,
.gx-sm-60 {
--grid-gutter-x: 60px;
}
.g-sm-60,
.gy-sm-60 {
--grid-gutter-y: 60px;
}
.g-sm-70,
.gx-sm-70 {
--grid-gutter-x: 70px;
}
.g-sm-70,
.gy-sm-70 {
--grid-gutter-y: 70px;
}
.g-sm-80,
.gx-sm-80 {
--grid-gutter-x: 80px;
}
.g-sm-80,
.gy-sm-80 {
--grid-gutter-y: 80px;
}
.g-sm-90,
.gx-sm-90 {
--grid-gutter-x: 90px;
}
.g-sm-90,
.gy-sm-90 {
--grid-gutter-y: 90px;
}
.g-sm-100,
.gx-sm-100 {
--grid-gutter-x: 100px;
}
.g-sm-100,
.gy-sm-100 {
--grid-gutter-y: 100px;
}
}
@media (min-width: 960px) {
.col-md {
flex: 1 0 0%;
min-height: 0;
min-width: 0;
}
.col-md-auto {
flex: 0 0 auto;
width: auto;
}
.col-md-5 {
flex: 0 0 auto;
width: 5%;
}
.col-md-10 {
flex: 0 0 auto;
width: 10%;
}
.col-md-15 {
flex: 0 0 auto;
width: 15%;
}
.col-md-20 {
flex: 0 0 auto;
width: 20%;
}
.col-md-25 {
flex: 0 0 auto;
width: 25%;
}
.col-md-30 {
flex: 0 0 auto;
width: 30%;
}
.col-md-35 {
flex: 0 0 auto;
width: 35%;
}
.col-md-40 {
flex: 0 0 auto;
width: 40%;
}
.col-md-45 {
flex: 0 0 auto;
width: 45%;
}
.col-md-50 {
flex: 0 0 auto;
width: 50%;
}
.col-md-55 {
flex: 0 0 auto;
width: 55%;
}
.col-md-60 {
flex: 0 0 auto;
width: 60%;
}
.col-md-65 {
flex: 0 0 auto;
width: 65%;
}
.col-md-70 {
flex: 0 0 auto;
width: 70%;
}
.col-md-75 {
flex: 0 0 auto;
width: 75%;
}
.col-md-80 {
flex: 0 0 auto;
width: 80%;
}
.col-md-85 {
flex: 0 0 auto;
width: 85%;
}
.col-md-90 {
flex: 0 0 auto;
width: 90%;
}
.col-md-95 {
flex: 0 0 auto;
width: 95%;
}
.col-md-100 {
flex: 0 0 auto;
width: 100%;
}
.col-md-offset-0 {
margin-left: 0;
}
.col-md-offset-5 {
margin-left: 5%;
}
.col-md-offset-10 {
margin-left: 10%;
}
.col-md-offset-15 {
margin-left: 15%;
}
.col-md-offset-20 {
margin-left: 20%;
}
.col-md-offset-25 {
margin-left: 25%;
}
.col-md-offset-30 {
margin-left: 30%;
}
.col-md-offset-35 {
margin-left: 35%;
}
.col-md-offset-40 {
margin-left: 40%;
}
.col-md-offset-45 {
margin-left: 45%;
}
.col-md-offset-50 {
margin-left: 50%;
}
.col-md-offset-55 {
margin-left: 55%;
}
.col-md-offset-60 {
margin-left: 60%;
}
.col-md-offset-65 {
margin-left: 65%;
}
.col-md-offset-70 {
margin-left: 70%;
}
.col-md-offset-75 {
margin-left: 75%;
}
.col-md-offset-80 {
margin-left: 80%;
}
.col-md-offset-85 {
margin-left: 85%;
}
.col-md-offset-90 {
margin-left: 90%;
}
.col-md-offset-95 {
margin-left: 95%;
}
.col-md-16 {
flex: 0 0 auto;
width: 16.66666%;
}
.col-md-33 {
flex: 0 0 auto;
width: 33.33333%;
}
.col-md-66 {
flex: 0 0 auto;
width: 66.66666%;
}
.col-md-offset-16 {
margin-left: 16.66666%;
}
.col-md-offset-33 {
margin-left: 33.33333%;
}
.col-md-offset-66 {
margin-left: 66.66666%;
}
.col-md-da-160 {
flex: 0 0 auto;
box-sizing: content-box;
width: 160px;
}
.col-md-da-200 {
flex: 0 0 auto;
box-sizing: content-box;
width: 200px;
}
.col-md-da-300 {
flex: 0 0 auto;
box-sizing: content-box;
width: 300px;
}
.col-md-da-320 {
flex: 0 0 auto;
box-sizing: content-box;
width: 320px;
}
.g-md-0,
.gx-md-0 {
--grid-gutter-x: 0;
}
.g-md-0,
.gy-md-0 {
--grid-gutter-y: 0;
}
.g-md-5,
.gx-md-5 {
--grid-gutter-x: 5px;
}
.g-md-5,
.gy-md-5 {
--grid-gutter-y: 5px;
}
.g-md-10,
.gx-md-10 {
--grid-gutter-x: 10px;
}
.g-md-10,
.gy-md-10 {
--grid-gutter-y: 10px;
}
.g-md-15,
.gx-md-15 {
--grid-gutter-x: 15px;
}
.g-md-15,
.gy-md-15 {
--grid-gutter-y: 15px;
}
.g-md-20,
.gx-md-20 {
--grid-gutter-x: 20px;
}
.g-md-20,
.gy-md-20 {
--grid-gutter-y: 20px;
}
.g-md-25,
.gx-md-25 {
--grid-gutter-x: 25px;
}
.g-md-25,
.gy-md-25 {
--grid-gutter-y: 25px;
}
.g-md-30,
.gx-md-30 {
--grid-gutter-x: 30px;
}
.g-md-30,
.gy-md-30 {
--grid-gutter-y: 30px;
}
.g-md-35,
.gx-md-35 {
--grid-gutter-x: 35px;
}
.g-md-35,
.gy-md-35 {
--grid-gutter-y: 35px;
}
.g-md-40,
.gx-md-40 {
--grid-gutter-x: 40px;
}
.g-md-40,
.gy-md-40 {
--grid-gutter-y: 40px;
}
.g-md-45,
.gx-md-45 {
--grid-gutter-x: 45px;
}
.g-md-45,
.gy-md-45 {
--grid-gutter-y: 45px;
}
.g-md-50,
.gx-md-50 {
--grid-gutter-x: 50px;
}
.g-md-50,
.gy-md-50 {
--grid-gutter-y: 50px;
}
.g-md-55,
.gx-md-55 {
--grid-gutter-x: 55px;
}
.g-md-55,
.gy-md-55 {
--grid-gutter-y: 55px;
}
.g-md-60,
.gx-md-60 {
--grid-gutter-x: 60px;
}
.g-md-60,
.gy-md-60 {
--grid-gutter-y: 60px;
}
.g-md-70,
.gx-md-70 {
--grid-gutter-x: 70px;
}
.g-md-70,
.gy-md-70 {
--grid-gutter-y: 70px;
}
.g-md-80,
.gx-md-80 {
--grid-gutter-x: 80px;
}
.g-md-80,
.gy-md-80 {
--grid-gutter-y: 80px;
}
.g-md-90,
.gx-md-90 {
--grid-gutter-x: 90px;
}
.g-md-90,
.gy-md-90 {
--grid-gutter-y: 90px;
}
.g-md-100,
.gx-md-100 {
--grid-gutter-x: 100px;
}
.g-md-100,
.gy-md-100 {
--grid-gutter-y: 100px;
}
}
@media (min-width: 1248px) {
.col-lg {
flex: 1 0 0%;
min-height: 0;
min-width: 0;
}
.col-lg-auto {
flex: 0 0 auto;
width: auto;
}
.col-lg-5 {
flex: 0 0 auto;
width: 5%;
}
.col-lg-10 {
flex: 0 0 auto;
width: 10%;
}
.col-lg-15 {
flex: 0 0 auto;
width: 15%;
}
.col-lg-20 {
flex: 0 0 auto;
width: 20%;
}
.col-lg-25 {
flex: 0 0 auto;
width: 25%;
}
.col-lg-30 {
flex: 0 0 auto;
width: 30%;
}
.col-lg-35 {
flex: 0 0 auto;
width: 35%;
}
.col-lg-40 {
flex: 0 0 auto;
width: 40%;
}
.col-lg-45 {
flex: 0 0 auto;
width: 45%;
}
.col-lg-50 {
flex: 0 0 auto;
width: 50%;
}
.col-lg-55 {
flex: 0 0 auto;
width: 55%;
}
.col-lg-60 {
flex: 0 0 auto;
width: 60%;
}
.col-lg-65 {
flex: 0 0 auto;
width: 65%;
}
.col-lg-70 {
flex: 0 0 auto;
width: 70%;
}
.col-lg-75 {
flex: 0 0 auto;
width: 75%;
}
.col-lg-80 {
flex: 0 0 auto;
width: 80%;
}
.col-lg-85 {
flex: 0 0 auto;
width: 85%;
}
.col-lg-90 {
flex: 0 0 auto;
width: 90%;
}
.col-lg-95 {
flex: 0 0 auto;
width: 95%;
}
.col-lg-100 {
flex: 0 0 auto;
width: 100%;
}
.col-lg-offset-0 {
margin-left: 0;
}
.col-lg-offset-5 {
margin-left: 5%;
}
.col-lg-offset-10 {
margin-left: 10%;
}
.col-lg-offset-15 {
margin-left: 15%;
}
.col-lg-offset-20 {
margin-left: 20%;
}
.col-lg-offset-25 {
margin-left: 25%;
}
.col-lg-offset-30 {
margin-left: 30%;
}
.col-lg-offset-35 {
margin-left: 35%;
}
.col-lg-offset-40 {
margin-left: 40%;
}
.col-lg-offset-45 {
margin-left: 45%;
}
.col-lg-offset-50 {
margin-left: 50%;
}
.col-lg-offset-55 {
margin-left: 55%;
}
.col-lg-offset-60 {
margin-left: 60%;
}
.col-lg-offset-65 {
margin-left: 65%;
}
.col-lg-offset-70 {
margin-left: 70%;
}
.col-lg-offset-75 {
margin-left: 75%;
}
.col-lg-offset-80 {
margin-left: 80%;
}
.col-lg-offset-85 {
margin-left: 85%;
}
.col-lg-offset-90 {
margin-left: 90%;
}
.col-lg-offset-95 {
margin-left: 95%;
}
.col-lg-16 {
flex: 0 0 auto;
width: 16.66666%;
}
.col-lg-33 {
flex: 0 0 auto;
width: 33.33333%;
}
.col-lg-66 {
flex: 0 0 auto;
width: 66.66666%;
}
.col-lg-offset-16 {
margin-left: 16.66666%;
}
.col-lg-offset-33 {
margin-left: 33.33333%;
}
.col-lg-offset-66 {
margin-left: 66.66666%;
}
.col-lg-da-160 {
flex: 0 0 auto;
box-sizing: content-box;
width: 160px;
}
.col-lg-da-200 {
flex: 0 0 auto;
box-sizing: content-box;
width: 200px;
}
.col-lg-da-300 {
flex: 0 0 auto;
box-sizing: content-box;
width: 300px;
}
.col-lg-da-320 {
flex: 0 0 auto;
box-sizing: content-box;
width: 320px;
}
.g-lg-0,
.gx-lg-0 {
--grid-gutter-x: 0;
}
.g-lg-0,
.gy-lg-0 {
--grid-gutter-y: 0;
}
.g-lg-5,
.gx-lg-5 {
--grid-gutter-x: 5px;
}
.g-lg-5,
.gy-lg-5 {
--grid-gutter-y: 5px;
}
.g-lg-10,
.gx-lg-10 {
--grid-gutter-x: 10px;
}
.g-lg-10,
.gy-lg-10 {
--grid-gutter-y: 10px;
}
.g-lg-15,
.gx-lg-15 {
--grid-gutter-x: 15px;
}
.g-lg-15,
.gy-lg-15 {
--grid-gutter-y: 15px;
}
.g-lg-20,
.gx-lg-20 {
--grid-gutter-x: 20px;
}
.g-lg-20,
.gy-lg-20 {
--grid-gutter-y: 20px;
}
.g-lg-25,
.gx-lg-25 {
--grid-gutter-x: 25px;
}
.g-lg-25,
.gy-lg-25 {
--grid-gutter-y: 25px;
}
.g-lg-30,
.gx-lg-30 {
--grid-gutter-x: 30px;
}
.g-lg-30,
.gy-lg-30 {
--grid-gutter-y: 30px;
}
.g-lg-35,
.gx-lg-35 {
--grid-gutter-x: 35px;
}
.g-lg-35,
.gy-lg-35 {
--grid-gutter-y: 35px;
}
.g-lg-40,
.gx-lg-40 {
--grid-gutter-x: 40px;
}
.g-lg-40,
.gy-lg-40 {
--grid-gutter-y: 40px;
}
.g-lg-45,
.gx-lg-45 {
--grid-gutter-x: 45px;
}
.g-lg-45,
.gy-lg-45 {
--grid-gutter-y: 45px;
}
.g-lg-50,
.gx-lg-50 {
--grid-gutter-x: 50px;
}
.g-lg-50,
.gy-lg-50 {
--grid-gutter-y: 50px;
}
.g-lg-55,
.gx-lg-55 {
--grid-gutter-x: 55px;
}
.g-lg-55,
.gy-lg-55 {
--grid-gutter-y: 55px;
}
.g-lg-60,
.gx-lg-60 {
--grid-gutter-x: 60px;
}
.g-lg-60,
.gy-lg-60 {
--grid-gutter-y: 60px;
}
.g-lg-70,
.gx-lg-70 {
--grid-gutter-x: 70px;
}
.g-lg-70,
.gy-lg-70 {
--grid-gutter-y: 70px;
}
.g-lg-80,
.gx-lg-80 {
--grid-gutter-x: 80px;
}
.g-lg-80,
.gy-lg-80 {
--grid-gutter-y: 80px;
}
.g-lg-90,
.gx-lg-90 {
--grid-gutter-x: 90px;
}
.g-lg-90,
.gy-lg-90 {
--grid-gutter-y: 90px;
}
.g-lg-100,
.gx-lg-100 {
--grid-gutter-x: 100px;
}
.g-lg-100,
.gy-lg-100 {
--grid-gutter-y: 100px;
}
}
@media (min-width: 1400px) {
.col-xl {
flex: 1 0 0%;
min-height: 0;
min-width: 0;
}
.col-xl-auto {
flex: 0 0 auto;
width: auto;
}
.col-xl-5 {
flex: 0 0 auto;
width: 5%;
}
.col-xl-10 {
flex: 0 0 auto;
width: 10%;
}
.col-xl-15 {
flex: 0 0 auto;
width: 15%;
}
.col-xl-20 {
flex: 0 0 auto;
width: 20%;
}
.col-xl-25 {
flex: 0 0 auto;
width: 25%;
}
.col-xl-30 {
flex: 0 0 auto;
width: 30%;
}
.col-xl-35 {
flex: 0 0 auto;
width: 35%;
}
.col-xl-40 {
flex: 0 0 auto;
width: 40%;
}
.col-xl-45 {
flex: 0 0 auto;
width: 45%;
}
.col-xl-50 {
flex: 0 0 auto;
width: 50%;
}
.col-xl-55 {
flex: 0 0 auto;
width: 55%;
}
.col-xl-60 {
flex: 0 0 auto;
width: 60%;
}
.col-xl-65 {
flex: 0 0 auto;
width: 65%;
}
.col-xl-70 {
flex: 0 0 auto;
width: 70%;
}
.col-xl-75 {
flex: 0 0 auto;
width: 75%;
}
.col-xl-80 {
flex: 0 0 auto;
width: 80%;
}
.col-xl-85 {
flex: 0 0 auto;
width: 85%;
}
.col-xl-90 {
flex: 0 0 auto;
width: 90%;
}
.col-xl-95 {
flex: 0 0 auto;
width: 95%;
}
.col-xl-100 {
flex: 0 0 auto;
width: 100%;
}
.col-xl-offset-0 {
margin-left: 0;
}
.col-xl-offset-5 {
margin-left: 5%;
}
.col-xl-offset-10 {
margin-left: 10%;
}
.col-xl-offset-15 {
margin-left: 15%;
}
.col-xl-offset-20 {
margin-left: 20%;
}
.col-xl-offset-25 {
margin-left: 25%;
}
.col-xl-offset-30 {
margin-left: 30%;
}
.col-xl-offset-35 {
margin-left: 35%;
}
.col-xl-offset-40 {
margin-left: 40%;
}
.col-xl-offset-45 {
margin-left: 45%;
}
.col-xl-offset-50 {
margin-left: 50%;
}
.col-xl-offset-55 {
margin-left: 55%;
}
.col-xl-offset-60 {
margin-left: 60%;
}
.col-xl-offset-65 {
margin-left: 65%;
}
.col-xl-offset-70 {
margin-left: 70%;
}
.col-xl-offset-75 {
margin-left: 75%;
}
.col-xl-offset-80 {
margin-left: 80%;
}
.col-xl-offset-85 {
margin-left: 85%;
}
.col-xl-offset-90 {
margin-left: 90%;
}
.col-xl-offset-95 {
margin-left: 95%;
}
.col-xl-16 {
flex: 0 0 auto;
width: 16.66666%;
}
.col-xl-33 {
flex: 0 0 auto;
width: 33.33333%;
}
.col-xl-66 {
flex: 0 0 auto;
width: 66.66666%;
}
.col-xl-offset-16 {
margin-left: 16.66666%;
}
.col-xl-offset-33 {
margin-left: 33.33333%;
}
.col-xl-offset-66 {
margin-left: 66.66666%;
}
.col-xl-da-160 {
flex: 0 0 auto;
box-sizing: content-box;
width: 160px;
}
.col-xl-da-200 {
flex: 0 0 auto;
box-sizing: content-box;
width: 200px;
}
.col-xl-da-300 {
flex: 0 0 auto;
box-sizing: content-box;
width: 300px;
}
.col-xl-da-320 {
flex: 0 0 auto;
box-sizing: content-box;
width: 320px;
}
.g-xl-0,
.gx-xl-0 {
--grid-gutter-x: 0;
}
.g-xl-0,
.gy-xl-0 {
--grid-gutter-y: 0;
}
.g-xl-5,
.gx-xl-5 {
--grid-gutter-x: 5px;
}
.g-xl-5,
.gy-xl-5 {
--grid-gutter-y: 5px;
}
.g-xl-10,
.gx-xl-10 {
--grid-gutter-x: 10px;
}
.g-xl-10,
.gy-xl-10 {
--grid-gutter-y: 10px;
}
.g-xl-15,
.gx-xl-15 {
--grid-gutter-x: 15px;
}
.g-xl-15,
.gy-xl-15 {
--grid-gutter-y: 15px;
}
.g-xl-20,
.gx-xl-20 {
--grid-gutter-x: 20px;
}
.g-xl-20,
.gy-xl-20 {
--grid-gutter-y: 20px;
}
.g-xl-25,
.gx-xl-25 {
--grid-gutter-x: 25px;
}
.g-xl-25,
.gy-xl-25 {
--grid-gutter-y: 25px;
}
.g-xl-30,
.gx-xl-30 {
--grid-gutter-x: 30px;
}
.g-xl-30,
.gy-xl-30 {
--grid-gutter-y: 30px;
}
.g-xl-35,
.gx-xl-35 {
--grid-gutter-x: 35px;
}
.g-xl-35,
.gy-xl-35 {
--grid-gutter-y: 35px;
}
.g-xl-40,
.gx-xl-40 {
--grid-gutter-x: 40px;
}
.g-xl-40,
.gy-xl-40 {
--grid-gutter-y: 40px;
}
.g-xl-45,
.gx-xl-45 {
--grid-gutter-x: 45px;
}
.g-xl-45,
.gy-xl-45 {
--grid-gutter-y: 45px;
}
.g-xl-50,
.gx-xl-50 {
--grid-gutter-x: 50px;
}
.g-xl-50,
.gy-xl-50 {
--grid-gutter-y: 50px;
}
.g-xl-55,
.gx-xl-55 {
--grid-gutter-x: 55px;
}
.g-xl-55,
.gy-xl-55 {
--grid-gutter-y: 55px;
}
.g-xl-60,
.gx-xl-60 {
--grid-gutter-x: 60px;
}
.g-xl-60,
.gy-xl-60 {
--grid-gutter-y: 60px;
}
.g-xl-70,
.gx-xl-70 {
--grid-gutter-x: 70px;
}
.g-xl-70,
.gy-xl-70 {
--grid-gutter-y: 70px;
}
.g-xl-80,
.gx-xl-80 {
--grid-gutter-x: 80px;
}
.g-xl-80,
.gy-xl-80 {
--grid-gutter-y: 80px;
}
.g-xl-90,
.gx-xl-90 {
--grid-gutter-x: 90px;
}
.g-xl-90,
.gy-xl-90 {
--grid-gutter-y: 90px;
}
.g-xl-100,
.gx-xl-100 {
--grid-gutter-x: 100px;
}
.g-xl-100,
.gy-xl-100 {
--grid-gutter-y: 100px;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-family-base);
font-size: var(--font-size-base);
font-weight: var(--font-weight-base);
line-height: var(--line-height-base);
color: var(--body-color);
text-align: var(--body-text-align);
background-color: var(--body-bg);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
[tabindex="-1"]:focus:not(:focus-visible) {
outline: 0;
}
hr {
margin: var(--hr-margin-y) 0;
color: var(--hr-color);
background-color: var(--border-color);
border: 0;
opacity: var(--hr-opacity);
}
hr:not([size]) {
height: var(--hr-height);
}
h6,
.h6, h5,
.h5, h4,
.h4, h3,
.h3, h2,
.h2, h1,
.h1 {
margin-top: 0;
margin-bottom: var(--headings-margin-bottom);
font-family: var(--headings-font-family);
font-style: var(--headings-font-style);
font-weight: var(--headings-font-weight);
line-height: var(--headings-line-height);
}
h1,
.h1 {
font-family: var(--font-family-serif);
font-size: var(--h1-font-size);
}
h2,
.h2 {
font-size: var(--h2-font-size);
}
h3,
.h3 {
font-size: var(--h3-font-size);
}
h4,
.h4 {
font-size: var(--h4-font-size);
}
h5,
.h5 {
font-size: var(--h5-font-size);
}
h6,
.h6 {
font-size: var(--h6-font-size);
}
p {
margin-top: 0;
margin-bottom: var(--paragraph-margin-bottom);
}
abbr[title],
abbr[data-original-title] {
text-decoration: underline;
text-decoration: underline dotted;
cursor: help;
text-decoration-skip-ink: none;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul {
padding-left: var(--list-padding-left);
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: var(--list-margin-bottom);
}
ol ol,
ol ol li,
ul ul,
ul ul li,
ol ul,
ol ul li,
ul ol,
ul ol li {
margin-bottom: unset;
}
li {
margin-bottom: var(--list-item-margin-bottom);
}
dt {
font-weight: var(--dt-font-weight);
}
dd {
margin-bottom: 0.5rem;
margin-left: 0;
}
blockquote {
margin: 0 0 1rem;
}
b,
strong {
font-weight: var(--font-weight-bold);
}
small {
font-size: var(--small-font-size);
}
/*
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub { bottom: -.25em; }
sup { top: -.5em; }
*/
a {
color: var(--link-color);
text-decoration: var(--link-decoration);
}
@media (hover: hover) {
a:hover {
color: var(--link-hover-color);
text-decoration: var(--link-hover-decoration);
}
}
a:not([href]), a:not([href]):hover {
color: inherit;
text-decoration: none;
}
pre,
code,
kbd,
samp {
font-family: var(--font-family-monospace);
font-size: 1em;
}
pre {
display: block;
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
font-size: var(--code-font-size);
color: var(--pre-color);
}
pre code {
font-size: inherit;
color: inherit;
word-break: normal;
}
code {
font-size: var(--code-font-size);
color: var(--code-color);
word-wrap: break-word;
}
a > code {
color: inherit;
}
kbd {
padding: var(--kbd-padding-y) var(--kbd-padding-x);
font-size: var(--kbd-font-size);
color: var(--kbd-color);
background-color: var(--kbd-bg);
border-radius: var(--border-radius-sm);
}
kbd kbd {
padding: 0;
font-size: 100%;
font-weight: var(--nested-kbd-font-weight);
}
img {
max-width: 100%;
vertical-align: middle;
}
svg {
overflow: hidden;
vertical-align: middle;
}
table {
border-collapse: collapse;
}
caption {
padding-top: var(--table-cell-padding);
padding-bottom: var(--table-cell-padding);
color: var(--table-caption-color);
text-align: left;
}
th {
text-align: inherit;
}
label {
display: inline-block;
margin-bottom: 5px;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
select {
word-wrap: normal;
}
[list]::-webkit-calendar-picker-indicator {
display: none;
}
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
cursor: pointer;
}
::-moz-focus-inner {
padding: 0;
border-style: none;
}
input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
-webkit-appearance: textfield;
}
textarea {
overflow: auto;
resize: vertical;
-webkit-appearance: textfield;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
float: left;
width: 100%;
padding: 0;
margin-bottom: var(--legend-margin-bottom);
font-size: var(--legend-font-size);
font-weight: var(--legend-font-weight);
line-height: inherit;
color: inherit;
white-space: normal;
}
mark {
background-color: var(--mark-bg);
padding: var(--mark-padding);
}
progress {
vertical-align: baseline;
}
::-webkit-datetime-edit {
overflow: visible;
line-height: 0;
}
[type=search] {
outline-offset: -2px;
-webkit-appearance: textfield;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-color-swatch-wrapper {
padding: 0;
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
output {
display: inline-block;
}
summary {
display: list-item;
cursor: pointer;
}
template {
display: none;
}
main {
display: block;
}
:root {
--navy: #0e365a;
--navy-dark: #071c2e;
--blue: #14599d;
--blue-strong: #0284c7;
--blue-dark: #0e3f70;
--green: #00794a;
--green-dark: #00462b;
--muted: #666;
--red: #9a2222;
--red-dark: #701919;
--orange: #c94100;
--orange-light: #f59e0b;
--orange-dark: rgb(150, 48.5074626866, 0);
--purple: #670a6f;
--purple-dark: #331f5f;
--yellow: #ffc615;
--yellow-light: #fffbf4;
--white: #fff;
--black: #000;
--opaque: rgba(255, 255, 255, 0.2);
--violet-strong: #550dbb;
--gray-50: #fafafa;
--gray-100: #f2f2f2;
--gray-200: #ddd;
--gray-300: #ccc;
--gray-400: #b3b3b3;
--gray-500: #999;
--gray-600: #666;
--gray-700: #4d4d4d;
--gray-800: #333;
--gray-900: #1a1a1a;
--facebook: #4267b2;
--flickr: #ff0084;
--google: #dd4b39;
--instagram: #3897f0;
--linkedin: #0077b5;
--pinterest: #e60023;
--twitter: #00aced;
--yahoo: #720e9e;
--youtube: #c00;
--input-btn-focus-color: rgba(0, 0, 0, 0.75);
--input-btn-focus-box-shadow: 0 0 0 0.15rem rgba(0, 0, 0, 0.75);
--form-label-color: ;
--input-plaintext-color: #1a1a1a;
--body-bg: #fff;
--body-color: #1a1a1a;
--body-text-align: ;
--border-color: #f2f2f2;
--border-color-hover: #ddd;
--border-width: 1px;
--border-radius-sm: 0.25rem;
--border-radius: 0.5rem;
--border-radius-lg: 1rem;
--box-shadow-sm: 0 0 4px rgba(0, 0, 0, 0.04);
--box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
--box-shadow-lg: 0 0 16px rgba(0, 0, 0, 0.16);
--code-color: #670a6f;
--code-font-size: 0.875em;
--pre-color: ;
--dt-font-weight: 700;
--hr-color: inherit;
--hr-height: 1px;
--hr-margin-y: 10px;
--hr-opacity: 0.2;
--kbd-bg: #1a1a1a;
--kbd-color: #fff;
--kbd-font-size: 0.875em;
--kbd-padding-x: 0.4rem;
--kbd-padding-y: 0.2rem;
--nested-kbd-font-weight: 700;
--legend-font-size: 1.5rem;
--legend-font-weight: ;
--legend-margin-bottom: 0.5rem;
--link-color: #14599d;
--link-decoration: none;
--link-hover-color: rgb(11.3559322034, 50.5338983051, 89.1440677966);
--link-hover-decoration: underline;
--list-item-margin-bottom: unset;
--list-margin-bottom: 1rem;
--list-padding-left: 2rem;
--mark-bg: #fffbf4;
--mark-padding: 0.2em;
--paragraph-margin-bottom: 1rem;
--font-family-base: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Roboto, Arial, sans-serif;
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Roboto, Arial, sans-serif;
--font-family-serif: Georgia, serif;
--font-size-base: 1rem;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-weight-base: 400;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-semi-bold: 600;
--font-weight-bold: 700;
--font-weight-extra-bold: 800;
--h1-font-size: clamp(1.5rem, 2.1vw, 2rem);
--h2-font-size: clamp(1.25rem, 2vw, 1.5rem);
--h3-font-size: 1.25rem;
--h4-font-size: 1.125rem;
--h5-font-size: 1rem;
--h6-font-size: 1rem;
--headings-font-family: ;
--headings-font-style: ;
--headings-font-weight: 800;
--headings-line-height: 1.2;
--headings-margin-bottom: 1rem;
--display1-size: clamp(2.8rem, 2vw, 3.75rem);
--display2-size: clamp(2rem, 2vw, 2.8rem);
--display3-size: clamp(1.8rem, 2vw, 2rem);
--display4-size: 1.8rem;
--display1-weight: 800;
--display2-weight: 800;
--display3-weight: 800;
--display4-weight: 800;
--display-line-height: 1.2;
--letter-spacing-normal: normal;
--letter-spacing-lg: 0.05em;
--line-height-sm: 1.2;
--line-height-base: 1.4;
--line-height-lg: 1.6;
--small-font-size: 0.875em;
}
.display-1 {
font-size: clamp(2.8rem, 2vw, 3.75rem);
font-weight: 800;
line-height: 1.2;
}
.display-2 {
font-size: clamp(2rem, 2vw, 2.8rem);
font-weight: 800;
line-height: 1.2;
}
.display-3 {
font-size: clamp(1.8rem, 2vw, 2rem);
font-weight: 800;
line-height: 1.2;
}
.display-4 {
font-size: 1.8rem;
font-weight: 800;
line-height: 1.2;
}
.list-unstyled {
padding-left: 0;
list-style: none;
}
.list-inline {
padding-left: 0;
list-style: none;
}
.list-inline > li {
display: inline;
}
.list-column {
column-gap: 2rem;
}
.blockquote {
--blockquote-border-color: #f2f2f2;
--blockquote-border-width: 1px;
--blockquote-font-family: Georgia, serif;
--blockquote-font-size: 1.125rem;
--blockquote-padding-left: 20px;
border-left: var(--blockquote-border-width) solid var(--blockquote-border-color);
font-family: var(--blockquote-font-family);
font-size: var(--blockquote-font-size);
padding-left: var(--blockquote-padding-left);
}
.blockquote-footer {
--blockquote-footer-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Roboto, Arial, sans-serif;
--blockquote-footer-font-size: 1rem;
display: block;
font-family: var(--blockquote-footer-font-family);
font-size: var(--blockquote-footer-font-size);
margin-top: 5px;
}
.blockquote-footer::before {
content: "— ";
}
.breadcrumb {
--breadcrumb-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Roboto, Arial, sans-serif;
--breadcrumb-font-size: 0.75rem;
--breadcrumb-font-weight: ;
--breadcrumb-letter-spacing: ;
--breadcrumb-margin-bottom: 10px;
--breadcrumb-text-transform: ;
--breadcrumb-item-padding-x: 5px;
--breadcrumb-divider-icon: "keyboard_arrow_right";
--breadcrumb-divider-weight: 400;
--breadcrumb-divider-font-family: Material Icons;
display: flex;
flex-wrap: wrap;
font-family: var(--breadcrumb-font-family);
font-size: var(--breadcrumb-font-size);
margin-bottom: var(--breadcrumb-margin-bottom);
}
.breadcrumb-item {
display: inline-flex;
font-size: var(--breadcrumb-font-size);
font-weight: var(--breadcrumb-font-weight);
letter-spacing: var(--breadcrumb-letter-spacing);
text-transform: var(--breadcrumb-text-transform);
}
.breadcrumb-item > * {
margin-left: 0.25em;
margin-right: 0.25em;
}
.breadcrumb-item + .breadcrumb-item {
padding-left: var(--breadcrumb-item-padding-x);
}
.breadcrumb-item + .breadcrumb-item::before {
box-sizing: content-box;
display: inline-flex;
padding-right: var(--breadcrumb-item-padding-x);
content: var(--breadcrumb-divider-icon);
font-weight: var(--breadcrumb-divider-weight);
font-family: var(--breadcrumb-divider-font-family);
height: 1em;
justify-content: center;
text-decoration: none;
text-transform: none;
width: 1em;
}
@media (hover: hover) {
.breadcrumb-item + .breadcrumb-item:hover::before {
text-decoration: none;
}
}
.btn {
--btn-active-bg: inherit;
--btn-active-border-color: transparent;
--btn-active-color: inherit;
--btn-bg: transparent;
--btn-border-color: transparent;
--btn-border-radius-xs: 0.5rem;
--btn-border-radius: 0.5rem;
--btn-border-radius-sm: 0.5rem;
--btn-border-radius-lg: 0.5rem;
--btn-border-radius-xl: 0.5rem;
--btn-border-width: var(--border-width);
--btn-color: var(--bg-color);
--btn-disabled-opacity: 0.65;
--btn-hover-bg: inherit;
--btn-hover-border-color: inherit;
--btn-hover-color: var(--btn-color);
--btn-hover-text-decoration: none;
--btn-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Roboto, Arial, sans-serif;
--btn-font-size-xs: 0.75rem;
--btn-font-size: 1rem;
--btn-font-size-sm: 0.875rem;
--btn-font-size-lg: 1.125rem;
--btn-font-size-xl: 1.25rem;
--btn-font-weight: 600;
--btn-line-height: 1.4;
--btn-padding-x-xs: 1.25em;
--btn-padding-x: 1.25em;
--btn-padding-x-sm: 1.25em;
--btn-padding-x-lg: 1.25em;
--btn-padding-x-xl: 1.25em;
--btn-padding-y-xs: 0.75em;
--btn-padding-y: 0.75em;
--btn-padding-y-sm: 0.75em;
--btn-padding-y-lg: 0.75em;
--btn-padding-y-xl: 0.75em;
--btn-text-decoration: ;
--btn-white-space: ;
align-items: center;
background-color: var(--btn-bg);
border: var(--btn-border-width) solid var(--btn-border-color);
border-radius: var(--btn-border-radius);
color: var(--btn-color);
cursor: pointer;
display: inline-flex;
font-family: var(--btn-font-family);
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
line-height: var(--btn-line-height);
justify-content: center;
padding: var(--btn-padding-y) var(--btn-padding-x);
text-decoration: var(--btn-text-decoration);
user-select: none;
vertical-align: middle;
white-space: var(--btn-white-space);
}
@media (hover: hover) {
.btn:hover {
background-color: var(--btn-hover-bg);
color: var(--btn-color);
text-decoration: var(--btn-hover-text-decoration);
}
}
.btn:focus, .btn.focus {
background-color: var(--btn-bg);
border-color: var(--btn-border-color);
color: var(--btn-hover-color);
outline: 0;
}
.btn:active, .btn.active {
background-color: var(--btn-active-bg);
border-color: var(--btn-active-border-color);
color: var(--btn-active-color);
}
.btn:disabled, .btn.disabled {
pointer-events: none;
opacity: var(--btn-disabled-opacity);
}
.btn-link {
--btn-link-color: var(--link-color);
--btn-link-decoration: var(--link-decoration);
--btn-link-disabled-color: #666;
--btn-link-font-weight: var(--font-weight-normal);
--btn-link-hover-color: var(--link-hover-color);
--btn-link-hover-decoration: var(--link-hover-decoration);
color: var(--btn-link-color);
text-decoration: var(--btn-link-decoration);
font-weight: var(--btn-link-font-weight);
}
@media (hover: hover) {
.btn-link:hover {
color: var(--btn-link-hover-color);
text-decoration: var(--btn-link-hover-decoration);
}
}
.btn-link:focus, .btn-link.focus {
text-decoration: var(--btn-link-hover-decoration);
}
.btn-link:disabled, .btn-link.disabled {
color: var(--btn-link-disabled-color);
}
.btn-unstyled {
appearance: none;
background: inherit;
border: unset;
color: inherit;
cursor: pointer;
font: inherit;
margin: unset;
padding: unset;
text-align: unset;
}
.btn-xs {
--btn-font-size: var(--btn-font-size-xs);
--btn-border-radius: var(--btn-border-radius-xs);
--btn-padding-x: var(--btn-padding-x-xs);
--btn-padding-y: var(--btn-padding-y-xs);
}
.btn-sm {
--btn-font-size: var(--btn-font-size-sm);
--btn-border-radius: var(--btn-border-radius-sm);
--btn-padding-x: var(--btn-padding-x-sm);
--btn-padding-y: var(--btn-padding-y-sm);
}
.btn-lg {
--btn-font-size: var(--btn-font-size-lg);
--btn-border-radius: var(--btn-border-radius-lg);
--btn-padding-x: var(--btn-padding-x-lg);
--btn-padding-y: var(--btn-padding-y-lg);
}
.btn-xl {
--btn-font-size: var(--btn-font-size-xl);
--btn-border-radius: var(--btn-border-radius-xl);
--btn-padding-x: var(--btn-padding-x-xl);
--btn-padding-y: var(--btn-padding-y-xl);
}
.btn-navy {
--btn-active-color: #fff;
--btn-active-bg: rgb(0.2692307692, 1.0384615385, 1.7307692308);
--btn-active-border-color: hsl(208.4210526316, 73.0769230769%, -24.6078431373%);
--btn-bg: #0e365a;
--btn-border-color: hsl(208.4210526316, 73.0769230769%, -4.6078431373%);
--btn-color: #fff;
--btn-hover-bg: rgb(5.4182692308, 20.8990384615, 34.8317307692);
--btn-hover-border-color: hsl(208.4210526316, 73.0769230769%, -17.1078431373%);
--btn-hover-color: #fff;
}
.btn-outline-navy {
--btn-active-color: #fff;
--btn-active-bg: rgb(12.2836538462, 47.3798076923, 78.9663461538);
--btn-active-border-color: rgb(12.2836538462, 47.3798076923, 78.9663461538);
--btn-border-color: #0e365a;
--btn-color: #0e365a;
--btn-hover-bg: rgba(14, 54, 90, 0.1);
--btn-hover-border-color: rgb(12.2836538462, 47.3798076923, 78.9663461538);
--btn-hover-color: rgb(12.2836538462, 47.3798076923, 78.9663461538);
}
.btn-navy-dark {
--btn-active-color: #fff;
--btn-active-bg: hsl(207.6923076923, 73.5849056604%, -9.6078431373%);
--btn-active-border-color: hsl(207.6923076923, 73.5849056604%, -34.6078431373%);
--btn-bg: #071c2e;
--btn-border-color: hsl(207.6923076923, 73.5849056604%, -14.6078431373%);
--btn-color: #fff;
--btn-hover-bg: hsl(207.6923076923, 73.5849056604%, -2.1078431373%);
--btn-hover-border-color: hsl(207.6923076923, 73.5849056604%, -27.1078431373%);
--btn-hover-color: #fff;
}
.btn-outline-navy-dark {
--btn-active-color: #fff;
--btn-active-bg: rgb(5.3160377358, 21.2641509434, 34.9339622642);
--btn-active-border-color: rgb(5.3160377358, 21.2641509434, 34.9339622642);
--btn-border-color: #071c2e;
--btn-color: #071c2e;
--btn-hover-bg: rgba(7, 28, 46, 0.1);
--btn-hover-border-color: rgb(5.3160377358, 21.2641509434, 34.9339622642);
--btn-hover-color: rgb(5.3160377358, 21.2641509434, 34.9339622642);
}
.btn-blue {
--btn-active-color: #fff;
--btn-active-bg: rgb(8.4745762712, 37.7118644068, 66.5254237288);
--btn-active-border-color: hsl(209.7810218978, 77.4011299435%, -10.2941176471%);
--btn-bg: #14599d;
--btn-border-color: rgb(5.593220339, 24.8898305085, 43.906779661);
--btn-color: #fff;
--btn-hover-bg: rgb(12.7966101695, 56.9449152542, 100.4533898305);
--btn-hover-border-color: hsl(209.7810218978, 77.4011299435%, -2.7941176471%);
--btn-hover-color: #fff;
}
.btn-outline-blue {
--btn-active-color: #fff;
--btn-active-bg: rgb(18.5593220339, 82.5889830508, 145.6906779661);
--btn-active-border-color: rgb(18.5593220339, 82.5889830508, 145.6906779661);
--btn-border-color: #14599d;
--btn-color: #14599d;
--btn-hover-bg: rgba(20, 89, 157, 0.1);
--btn-hover-border-color: rgb(18.5593220339, 82.5889830508, 145.6906779661);
--btn-hover-color: rgb(18.5593220339, 82.5889830508, 145.6906779661);
}
.btn-blue-strong {
--btn-active-color: #fff;
--btn-active-bg: rgb(0.9850746269, 65.0149253731, 98.0149253731);
--btn-active-border-color: hsl(200.4060913706, 98.0099502488%, -5.5882352941%);
--btn-bg: #0284c7;
--btn-border-color: rgb(0.7313432836, 48.2686567164, 72.7686567164);
--btn-color: #fff;
--btn-hover-bg: rgb(1.3656716418, 90.1343283582, 135.8843283582);
--btn-hover-border-color: rgb(0.0970149254, 6.4029850746, 9.6529850746);
--btn-hover-color: #fff;
}
.btn-outline-blue-strong {
--btn-active-color: #fff;
--btn-active-bg: rgb(1.8731343284, 123.6268656716, 186.3768656716);
--btn-active-border-color: rgb(1.8731343284, 123.6268656716, 186.3768656716);
--btn-border-color: #0284c7;
--btn-color: #0284c7;
--btn-hover-bg: rgba(2, 132, 199, 0.1);
--btn-hover-border-color: rgb(1.8731343284, 123.6268656716, 186.3768656716);
--btn-hover-color: rgb(1.8731343284, 123.6268656716, 186.3768656716);
}
.btn-blue-dark {
--btn-active-color: #fff;
--btn-active-bg: rgb(2.6666666667, 12, 21.3333333333);
--btn-active-border-color: hsl(210, 77.7777777778%, -20.2941176471%);
--btn-bg: #0e3f70;
--btn-border-color: hsl(210, 77.7777777778%, -0.2941176471%);
--btn-color: #fff;
--btn-hover-bg: rgb(6.9166666667, 31.125, 55.3333333333);
--btn-hover-border-color: hsl(210, 77.7777777778%, -12.7941176471%);
--btn-hover-color: #fff;
}
.btn-outline-blue-dark {
--btn-active-color: #fff;
--btn-active-bg: rgb(12.5833333333, 56.625, 100.6666666667);
--btn-active-border-color: rgb(12.5833333333, 56.625, 100.6666666667);
--btn-border-color: #0e3f70;
--btn-color: #0e3f70;
--btn-hover-bg: rgba(14, 63, 112, 0.1);
--btn-hover-border-color: rgb(12.5833333333, 56.625, 100.6666666667);
--btn-hover-color: rgb(12.5833333333, 56.625, 100.6666666667);
}
.btn-green {
--btn-active-color: #fff;
--btn-active-bg: rgb(0, 19, 11.6198347107);
--btn-active-border-color: hsl(156.694214876, 100%, -21.2745098039%);
--btn-bg: #00794a;
--btn-border-color: hsl(156.694214876, 100%, -1.2745098039%);
--btn-color: #fff;
--btn-hover-bg: rgb(0, 57.25, 35.0123966942);
--btn-hover-border-color: hsl(156.694214876, 100%, -13.7745098039%);
--btn-hover-color: #fff;
}
.btn-outline-green {
--btn-active-color: #fff;
--btn-active-bg: rgb(0, 108.25, 66.2024793388);
--btn-active-border-color: rgb(0, 108.25, 66.2024793388);
--btn-border-color: #00794a;
--btn-color: #00794a;
--btn-hover-bg: rgba(0, 121, 74, 0.1);
--btn-hover-border-color: rgb(0, 108.25, 66.2024793388);
--btn-hover-color: rgb(0, 108.25, 66.2024793388);
}
.btn-green-dark {
--btn-active-color: #fff;
--btn-active-bg: hsl(156.8571428571, 100%, -6.2745098039%);
--btn-active-border-color: hsl(156.8571428571, 100%, -31.2745098039%);
--btn-bg: #00462b;
--btn-border-color: hsl(156.8571428571, 100%, -11.2745098039%);
--btn-color: #fff;
--btn-hover-bg: rgb(0, 6.25, 3.8392857143);
--btn-hover-border-color: hsl(156.8571428571, 100%, -23.7745098039%);
--btn-hover-color: #fff;
}
.btn-outline-green-dark {
--btn-active-color: #fff;
--btn-active-bg: rgb(0, 57.25, 35.1678571429);
--btn-active-border-color: rgb(0, 57.25, 35.1678571429);
--btn-border-color: #00462b;
--btn-color: #00462b;
--btn-hover-bg: rgba(0, 70, 43, 0.1);
--btn-hover-border-color: rgb(0, 57.25, 35.1678571429);
--btn-hover-color: rgb(0, 57.25, 35.1678571429);
}
.btn-muted {
--btn-active-color: #fff;
--btn-active-bg: #333333;
--btn-active-border-color: hsl(0, 0%, -5%);
--btn-bg: #666;
--btn-border-color: rgb(38.25, 38.25, 38.25);
--btn-color: #fff;
--btn-hover-bg: rgb(70.125, 70.125, 70.125);
--btn-hover-border-color: rgb(6.375, 6.375, 6.375);
--btn-hover-color: #fff;
}
.btn-outline-muted {
--btn-active-color: #fff;
--btn-active-bg: rgb(95.625, 95.625, 95.625);
--btn-active-border-color: rgb(95.625, 95.625, 95.625);
--btn-border-color: #666;
--btn-color: #666;
--btn-hover-bg: rgba(102, 102, 102, 0.1);
--btn-hover-border-color: rgb(95.625, 95.625, 95.625);
--btn-hover-color: rgb(95.625, 95.625, 95.625);
}
.btn-red {
--btn-active-color: #fff;
--btn-active-bg: rgb(70.4468085106, 15.5531914894, 15.5531914894);
--btn-active-border-color: hsl(0, 63.829787234%, -8.137254902%);
--btn-bg: #9a2222;
--btn-border-color: rgb(49.5585106383, 10.9414893617, 10.9414893617);
--btn-color: #fff;
--btn-hover-bg: rgb(101.7792553191, 22.4707446809, 22.4707446809);
--btn-hover-border-color: hsl(0, 63.829787234%, -0.637254902%);
--btn-hover-color: #fff;
}
.btn-outline-red {
--btn-active-color: #fff;
--btn-active-bg: rgb(143.5558510638, 31.6941489362, 31.6941489362);
--btn-active-border-color: rgb(143.5558510638, 31.6941489362, 31.6941489362);
--btn-border-color: #9a2222;
--btn-color: #9a2222;
--btn-hover-bg: rgba(154, 34, 34, 0.1);
--btn-hover-border-color: rgb(143.5558510638, 31.6941489362, 31.6941489362);
--btn-hover-color: rgb(143.5558510638, 31.6941489362, 31.6941489362);
}
.btn-red-dark {
--btn-active-color: #fff;
--btn-active-bg: rgb(28.6131386861, 6.3868613139, 6.3868613139);
--btn-active-border-color: hsl(0, 63.503649635%, -18.137254902%);
--btn-bg: #701919;
--btn-border-color: rgb(7.7664233577, 1.7335766423, 1.7335766423);
--btn-color: #fff;
--btn-hover-bg: rgb(59.8832116788, 13.3667883212, 13.3667883212);
--btn-hover-border-color: hsl(0, 63.503649635%, -10.637254902%);
--btn-hover-color: #fff;
}
.btn-outline-red-dark {
--btn-active-color: #fff;
--btn-active-bg: rgb(101.5766423358, 22.6733576642, 22.6733576642);
--btn-active-border-color: rgb(101.5766423358, 22.6733576642, 22.6733576642);
--btn-border-color: #701919;
--btn-color: #701919;
--btn-hover-bg: rgba(112, 25, 25, 0.1);
--btn-hover-border-color: rgb(101.5766423358, 22.6733576642, 22.6733576642);
--btn-hover-color: rgb(101.5766423358, 22.6733576642, 22.6733576642);
}
.btn-orange {
--btn-active-color: #fff;
--btn-active-bg: rgb(99, 32.0149253731, 0);
--btn-active-border-color: hsl(19.4029850746, 100%, -5.5882352941%);
--btn-bg: #c94100;
--btn-border-color: rgb(73.5, 23.7686567164, 0);
--btn-color: #fff;
--btn-hover-bg: rgb(137.25, 44.3843283582, 0);
--btn-hover-border-color: rgb(9.75, 3.1529850746, 0);
--btn-hover-color: #fff;
}
.btn-outline-orange {
--btn-active-color: #fff;
--btn-active-bg: rgb(188.25, 60.8768656716, 0);
--btn-active-border-color: rgb(188.25, 60.8768656716, 0);
--btn-border-color: #c94100;
--btn-color: #