/* Width Utility Classes  */
.w100 {
    width: 100%;
}

.w95 {
    width: 95%;
}

.w90 {
    width: 90%;
}

.w85 {
    width: 85%;
}

.w80 {
    width: 80%;
}

.w75 {
    width: 75%;
}

.w70 {
    width: 70%;
}

.w65 {
    width: 65%;
}

.w60 {
    width: 60%;
}

.w55 {
    width: 55%;
}

.w50 {
    width: 50%;
}

.w45 {
    width: 45%;
}

.w40 {
    width: 40%;
}

.w35 {
    width: 35%;
}

.w30 {
    width: 30%;
}

.w31 {
    width: 31%;
}

.w32 {
    width: 32%;
}

.w33 {
    width: 33%;
}

.w34 {
    width: 34%;
}

.w35 {
    width: 35%;
}

.w36 {
    width: 36%;
}

.w37 {
    width: 37%;
}

.w38 {
    width: 38%;
}

.w39 {
    width: 39%;
}

.w25 {
    width: 25%;
}

.w20 {
    width: 20%;
}

.w15 {
    width: 15%;
}

.w10 {
    width: 10%;
}

.w5 {
    width: 5%;
}

.wf {
    width: fit-content;
}

.wa {
    width: auto;
}


/* Height Utility Classes */
.h100 {
    height: 100%;
}

.h95 {
    height: 95%;
}

.h90 {
    height: 90%;
}

.h85 {
    height: 85%;
}

.h80 {
    height: 80%;
}

.h75 {
    height: 75%;
}

.h70 {
    height: 70%;
}

.h65 {
    height: 65%;
}

.h60 {
    height: 60%;
}

.h55 {
    height: 55%;
}

.h50 {
    height: 50%;
}

.h45 {
    height: 45%;
}

.h40 {
    height: 40%;
}

.h35 {
    height: 35%;
}

.h30 {
    height: 30%;
}

.h25 {
    height: 25%;
}

.h20 {
    height: 20%;
}

.h15 {
    height: 15%;
}

.h10 {
    height: 10%;
}

.h5 {
    height: 5%;
}

.hf {
    height: fit-content;
}

.ha {
    height: auto;
}


/* Margin Auto  */
.a {
    margin: auto;
}

.alr {
    margin: 0 auto;
}

/* Gap Utility Classes */
.gap1 {
    gap: 1px;
}

.gap2 {
    gap: 2px;
}

.gap3 {
    gap: 3px;
}

.gap4 {
    gap: 4px;
}

.gap5 {
    gap: 5px;
}

.gap6 {
    gap: 6px;
}

.gap7 {
    gap: 7px;
}

.gap8 {
    gap: 8px;
}

.gap9 {
    gap: 9px;
}

.gap10 {
    gap: 10px;
}

/* Padding Utility Classes  */
.p1 {
    padding: 1px;
}

.pt1 {
    padding-top: 1px;
}

.pb1 {
    padding-bottom: 1px;
}

.pl1 {
    padding-left: 1px;
}

.pr1 {
    padding-right: 1px;
}

.p2 {
    padding: 2px;
}

.pt2 {
    padding-top: 2px;
}

.pb2 {
    padding-bottom: 2px;
}

.pl2 {
    padding-left: 2px;
}

.pr2 {
    padding-right: 2px;
}

.p3 {
    padding: 3px;
}

.pt3 {
    padding-top: 3px;
}

.pb3 {
    padding-bottom: 3px;
}

.pl3 {
    padding-left: 3px;
}

.pr3 {
    padding-right: 3px;
}

.p4 {
    padding: 4px;
}

.pt4 {
    padding-top: 4px;
}

.pb4 {
    padding-bottom: 4px;
}

.pl4 {
    padding-left: 4px;
}

.pr4 {
    padding-right: 4px;
}

.p5 {
    padding: 5px;
}

.pt5 {
    padding-top: 5px;
}

.pb5 {
    padding-bottom: 5px;
}

.pl5 {
    padding-left: 5px;
}

.pr5 {
    padding-right: 5px;
}

.p6 {
    padding: 6px;
}

.pt6 {
    padding-top: 6px;
}

.pb6 {
    padding-bottom: 6px;
}

.pl6 {
    padding-left: 6px;
}

.pr6 {
    padding-right: 6px;
}

.p7 {
    padding: 7px;
}

.pt7 {
    padding-top: 7px;
}

.pb7 {
    padding-bottom: 7px;
}

.pl7 {
    padding-left: 7px;
}

.pr7 {
    padding-right: 7px;
}

.p8 {
    padding: 8px;
}

.pt8 {
    padding-top: 8px;
}

.pb8 {
    padding-bottom: 8px;
}

.pl8 {
    padding-left: 8px;
}

.pr8 {
    padding-right: 8px;
}

.p9 {
    padding: 9px;
}

.pt9 {
    padding-top: 9px;
}

.pb9 {
    padding-bottom: 9px;
}

.pl9 {
    padding-left: 9px;
}

.pr9 {
    padding-right: 9px;
}

.p10 {
    padding: 10px;
}

.pt10 {
    padding-top: 10px;
}

.pb10 {
    padding-bottom: 10px;
}

.pl10 {
    padding-left: 10px;
}

.pr10 {
    padding-right: 10px;
}

.p15 {
    padding: 15px;
}

.pt15 {
    padding-top: 15px;
}

.pb15 {
    padding-bottom: 15px;
}

.pl15 {
    padding-left: 15px;
}

.pr15 {
    padding-right: 15px;
}

.p20 {
    padding: 20px;
}

.pt20 {
    padding-top: 20px;
}

.pb20 {
    padding-bottom: 20px;
}

.pl20 {
    padding-left: 20px;
}

.pr20 {
    padding-right: 20px;
}

.p25 {
    padding: 25px;
}

.pt25 {
    padding-top: 25px;
}

.pb25 {
    padding-bottom: 25px;
}

.pl25 {
    padding-left: 25px;
}

.pr25 {
    padding-right: 25px;
}

.p30 {
    padding: 30px;
}

.pt30 {
    padding-top: 30px;
}

.pb30 {
    padding-bottom: 30px;
}

.pl30 {
    padding-left: 30px;
}

.pr30 {
    padding-right: 30px;
}

/* Margin Utility Classes */
.m1 {
    margin: 1px;
}

.mt1 {
    margin-top: 1px;
}

.mb1 {
    margin-bottom: 1px;
}

.ml1 {
    margin-left: 1px;
}

.mr1 {
    margin-right: 1px;
}

.m2 {
    margin: 2px;
}

.mt2 {
    margin-top: 2px;
}

.mb2 {
    margin-bottom: 2px;
}

.ml2 {
    margin-left: 2px;
}

.mr2 {
    margin-right: 2px;
}

.m3 {
    margin: 3px;
}

.mt3 {
    margin-top: 3px;
}

.mb3 {
    margin-bottom: 3px;
}

.ml3 {
    margin-left: 3px;
}

.mr3 {
    margin-right: 3px;
}

.m4 {
    margin: 4px;
}

.mt4 {
    margin-top: 4px;
}

.mb4 {
    margin-bottom: 4px;
}

.ml4 {
    margin-left: 4px;
}

.mr4 {
    margin-right: 4px;
}

.m5 {
    margin: 5px;
}

.mt5 {
    margin-top: 5px;
}

.mb5 {
    margin-bottom: 5px;
}

.ml5 {
    margin-left: 5px;
}

.mr5 {
    margin-right: 5px;
}

.m6 {
    margin: 6px;
}

.mt6 {
    margin-top: 6px;
}

.mb6 {
    margin-bottom: 6px;
}

.ml6 {
    margin-left: 6px;
}

.mr6 {
    margin-right: 6px;
}

.m7 {
    margin: 7px;
}

.mt7 {
    margin-top: 7px;
}

.mb7 {
    margin-bottom: 7px;
}

.ml7 {
    margin-left: 7px;
}

.mr7 {
    margin-right: 7px;
}

.m8 {
    margin: 8px;
}

.mt8 {
    margin-top: 8px;
}

.mb8 {
    margin-bottom: 8px;
}

.ml8 {
    margin-left: 8px;
}

.mr8 {
    margin-right: 8px;
}

.m9 {
    margin: 9px;
}

.mt9 {
    margin-top: 9px;
}

.mb9 {
    margin-bottom: 9px;
}

.ml9 {
    margin-left: 9px;
}

.mr9 {
    margin-right: 9px;
}

.m10 {
    margin: 10px;
}

.mt10 {
    margin-top: 10px;
}

.mb10 {
    margin-bottom: 10px;
}

.ml10 {
    margin-left: 10px;
}

.mr10 {
    margin-right: 10px;
}

.m15 {
    margin: 15px;
}

.mt15 {
    margin-top: 15px;
}

.mb15 {
    margin-bottom: 15px;
}

.ml15 {
    margin-left: 15px;
}

.mr15 {
    margin-right: 15px;
}

.m20 {
    margin: 20px;
}

.mt20 {
    margin-top: 20px;
}

.mb20 {
    margin-bottom: 20px;
}

.ml20 {
    margin-left: 20px;
}

.mr20 {
    margin-right: 20px;
}

.m25 {
    margin: 25px;
}

.mt25 {
    margin-top: 25px;
}

.mb25 {
    margin-bottom: 25px;
}

.ml25 {
    margin-left: 25px;
}

.mr25 {
    margin-right: 25px;
}

.m30 {
    margin: 30px;
}

.mt30 {
    margin-top: 30px;
}

.mb30 {
    margin-bottom: 30px;
}

.ml30 {
    margin-left: 30px;
}

.mr30 {
    margin-right: 30px;
}

.m40 {
    margin: 40px;
}

.mt40 {
    margin-top: 40px;
}

.mb40 {
    margin-bottom: 40px;
}

.ml40 {
    margin-left: 40px;
}

.mr40 {
    margin-right: 40px;
}

.m50 {
    margin: 50px;
}

.mt50 {
    margin-top: 50px;
}

.mb50 {
    margin-bottom: 50px;
}

.ml50 {
    margin-left: 50px;
}

.mr50 {
    margin-right: 50px;
}

.m60 {
    margin: 60px;
}

.mt60 {
    margin-top: 60px;
}

.mb60 {
    margin-bottom: 60px;
}

.ml60 {
    margin-left: 60px;
}

.mr60 {
    margin-right: 60px;
}


/* Flex Utilities */
.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

/* Justify Content */
.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* Align Items */
.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.items-stretch {
    align-items: stretch;
}

.items-baseline {
    align-items: baseline;
}

/* Align Self */
.self-start {
    align-self: flex-start;
}

.self-center {
    align-self: center;
}

.self-end {
    align-self: flex-end;
}

.self-stretch {
    align-self: stretch;
}

.self-baseline {
    align-self: baseline;
}

/* Align Content */
.content-start {
    align-content: flex-start;
}

.content-center {
    align-content: center;
}

.content-end {
    align-content: flex-end;
}

.content-between {
    align-content: space-between;
}

.content-around {
    align-content: space-around;
}

.content-evenly {
    align-content: space-evenly;
}

/* Flexbox Combinations */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-around {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.flex-evenly {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.flex-column-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.flex-column-between {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.flex-column-around {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

/* Basic Flex */
.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

/* Flex Wrap */
.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}


.bw {
    border: 1px solid #fff;
}

.bb {
    border: 1px solid #000;
}

/* Shadow Utilities classes  */
.b-shadow {
    box-shadow: 0 0 20px rgb(0, 0, 0, .1);
}

.t-shadow {
    text-shadow: 0 0 20px rgb(0, 0, 0, .1);
}


/* Border Radius Utility Classes */
.br3 {
    border-radius: 3px;
}

.br4 {
    border-radius: 4px;
}

.br5 {
    border-radius: 5px;
}

.br6 {
    border-radius: 6px;
}

.br7 {
    border-radius: 7px;
}

.br8 {
    border-radius: 8px;
}

.br9 {
    border-radius: 9px;
}

.br10 {
    border-radius: 10px;
}

.br15 {
    border-radius: 15px;
}

.br20 {
    border-radius: 20px;
}

.br25 {
    border-radius: 25px;
}

.br30 {
    border-radius: 30px;
}

.br35 {
    border-radius: 35px;
}

.br40 {
    border-radius: 40px;
}

.br45 {
    border-radius: 45px;
}

.br50 {
    border-radius: 50px;
}

/* Text Center  */
.t-center {
    text-align: center;
}

.t-left {
    text-align: left;
}

.t-right {
    text-align: right;
}

/* Button  */
.btn {
    background: lightgray;
    padding: 10px 15px;
    border-radius: 9px;
    color: var(--color-bl);
    font-family: avenirLight;
    text-decoration: none;
    font-size: 13px;
    transition: .3s linear;
}

.btn:hover,
.btn:focus {
    color: var(--color-wh);
    background: var(--color-mn);
}


.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}



.clamp-5 {
    display: -webkit-box !important;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clamp-4 {
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clamp-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clamp-1 {
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.hide-temp {
    display: none;
}