/* --------------grid or flex not usual-------------- */

/* --------------grid-------------- */
.grid {
    display: grid;
}

.grid-collumns-auto {
    grid-template-columns: auto;
}

.grid-collumns-2 {
    grid-template-columns: 1fr 1fr;
}

.grid-collumns-2-31 {
    grid-template-columns: 3fr 1fr;
}

.grid-collumns-2-12 {
    grid-template-columns: 1fr 2fr;
}

.grid-collumns-2-13 {
    grid-template-columns: 1fr 3fr;
}

.grid-collumns-2-auto {
    grid-template-columns: auto auto;
}

.grid-collumns-2-max-content {
    grid-template-columns: max-content max-content;
}

.grid-collumns-3-max-content {
    grid-template-columns: max-content max-content max-content;
}

.grid-collumns-3-fr-auto-fr {
    grid-template-columns: 1fr auto 1fr;
}

.grid-collumns-2-fr-auto {
    grid-template-columns: 1fr auto;
}

.grid-collumns-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-collumns-3-auto {
    grid-template-columns: auto auto auto;
}

.grid-collumns-3-auto-1fr {
    grid-template-columns: 1fr auto auto;
}

.grid-collumns-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-collumns-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.grid-collumns-6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

/* --------------grid with media-------------- */
@media (max-width: 1500px) {
    .coll-3-lg {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 1150px) {
    .coll-2-md {
        grid-template-columns: 1fr 1fr;
    }

    .coll-1-md {
        grid-template-columns: 1fr;
    }

    .coll-12-md {
        grid-template-columns: 1fr 2fr;
    }
}

@media (max-width: 800px) {
    .coll-3-sm {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .coll-1-sm {
        grid-template-columns: 1fr;
    }

    .gap-0-sm {
        gap: 0 !important;
    }

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

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

    .justify-self-center-sm {
        justify-self: center !important;
    }

    .justify-self-left-sm {
        justify-self: left !important;
    }
}

@media (max-width: 500px) {}

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

.grid-rows {
    grid-template-rows: 1fr 1fr;
}

.grid-rows-auto {
    grid-template-rows: auto;
}

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.gap-30 {
    gap: 30px;
}

.gap-50 {
    gap: 50px;
}

.collumn-gap-30 {
    column-gap: 30px;
}

.collumn-gap-50 {
    column-gap: 50px;
}

.row-gap-30 {
    row-gap: 30px;
}

.row-gap-50 {
    row-gap: 50px;
}

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

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

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

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

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

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

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

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

.justify-self-left {
    justify-self: left;
}

.justify-self-right {
    justify-self: right;
}


/* --------------margin and padding -------------- */
.p-t-b-3 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.p-t-b-4 {
    padding-top: 50px;
    padding-bottom: 50px;
}

.m-auto {
    margin: auto;
}

.p-1 {
    padding: 5px;
}

.p-2 {
    padding: 10px;
}

.p-3 {
    padding: 20px;
}

.p-4 {
    padding: 40px;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 5px;
}

.mt-m1 {
    margin-top: -3px;
}

.mt-m2 {
    margin-top: -6px;
}

.mt-2 {
    margin-top: 10px;
}

.mt-3 {
    margin-top: 20px;
}

.mt-4 {
    margin-top: 40px !important;
}

.mt-5 {
    margin-top: 80px !important;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 5px;
}

.mb-2 {
    margin-bottom: 10px;
}

.mb-3 {
    margin-bottom: 20px;
}

.mb-4 {
    margin-bottom: 40px;
}

.mb-5 {
    margin-bottom: 80px;
}

.ml-1 {
    margin-left: 5px !important;
}

.ml-2 {
    margin-left: 10px !important;
}

.ml-3 {
    margin-left: 20px;
}

.ml-4 {
    margin-left: 40px;
}

.ml-5 {
    margin-left: 80px;
}

.mr-0 {
    margin-right: 0;
}

.mr-1 {
    margin-right: 5px;
}

.mr-2 {
    margin-right: 10px;
}

.mr-3 {
    margin-right: 20px;
}

.mr-4 {
    margin-right: 40px;
}

.mr-5 {
    margin-right: 80px;
}

.pd-l-r-0 {
    padding-right: 0;
    padding-left: 0;
}

.pt-5 {
    padding-top: 80px;
}

.pb-4 {
    padding-bottom: 40px;
}

@media (max-width: 1500px) {
    .pt-0-lg {
        padding-top: 0 !important;
    }

    .mt-3-lg {
        margin-top: 20px !important;
    }

}

@media (max-width: 1150px) {
    .p-0-md {
        padding: 0 !important;
    }

    .p-1-md {
        padding: 5px !important;
    }
    .p-2-md {
        padding: 10px !important;
    }
    .mr-0-md {
        margin-right: 0 !important;
    }

    .pt-0-md {
        padding-top: 0 !important;
    }

    .pt-2-md {
        padding-top: 10px !important;
    }

    .pb-3-md {
        padding-bottom: 20px !important;
    }

    .mt-3-md {
        margin-top: 20px !important;
    }
}

@media (max-width: 800px) {
    .p-0-sm {
        padding: 0;
    }
    .mt-0-sm {
        margin-top: 0 !important;
    }

    .mt-1-sm {
        margin-top: 5px !important;
    }

    .mt-2-sm {
        margin-top: 10px !important;
    }

    .mt-3-sm {
        margin-top: 20px !important;
    }

    .ml-0-sm {
        margin-left: 0 !important;
    }

    .mr-0-sm {
        margin-right: 0 !important;
    }

    .mr-2-sm {
        margin-right: 10px !important;
    }

    .mr-3-sm {
        margin-right: 20px !important;
    }
}

@media (max-width: 500px) {
    .p-0-xs {
        padding: 0 !important;
    }

    .p-2-xs {
        padding: 10px;
    }

    .p-3-xs {
        padding: 20px;
    }

    .mr-2-xs {
        margin-right: 10px !important;
    }
}

/* --------------font-------------- */
@font-face {
    font-family: 'UbuntuRegular';
    src: url('../fonts/Ubuntu_Sans/static/UbuntuSans-Regular.ttf');
}

@font-face {
    font-family: 'LoraRegular';
    src: url('../fonts/Lora/static/Lora-Regular.ttf');
}

.ubuntu-sans-normal,
h1,
h2,
h3,
h4,
h5,
h6,
a {
    font-family: "UbuntuRegular", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}


.font-8 {
    font-size: 0.5em !important;
}

.font-12 {
    font-size: 0.75em !important;
}

.font-16 {
    font-size: 1em !important;
}

.font-18 {
    font-size: 1.125em !important;
}

.font-20 {
    font-size: 1.25em !important;
}

.font-24 {
    font-size: 1.5em !important;
}

.font-32 {
    font-size: 2em !important;
}

.font-48 {
    font-size: 3em !important;
}

.font-72 {
    font-size: 4em;
}

.font-96 {
    font-size: 5em;
}

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


@media (max-width: 1500px) {}

@media (max-width: 1150px) {
    .font-12-md {
        font-size: 0.75rem !important;
    }

    .font-16-md {
        font-size: 1rem !important;
    }

}

@media (max-width: 800px) {
    .font-10-sm {
        font-size: 0.625em !important;
    }
    .font-11-sm {
        font-size: 0.687em !important;
    }
    .font-12-sm {
        font-size: 0.75em !important;
    }
    .font-16-sm {
        font-size: 1em !important;
    }

    .font-20-sm {
        font-size: 1.25em !important;
    }
}

@media (max-width: 500px) {
    .font-16-xs {
        font-size: 1rem;
    }

    .font-24-xs {
        font-size: 1.5rem;
    }
}

/* --------------display and positions -------------- */

.container {
    width: 1250px;
    margin-left: auto;
    margin-right: auto;
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.d-content {
    display: contents;
}

.none-d {
    display: none;
}

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

@media (max-width: 1500px) {
    .d-grid-lg {
        display: grid;
    }

    .d-block-lg {
        display: block;
    }

    .d-none-lg {
        display: none;
    }

}

@media (max-width: 1150px) {
    .d-grid-md {
        display: grid;
    }

    .d-content-md {
        display: contents;
    }

    .d-none-md {
        display: none;
    }

    .d-block-md {
        display: block;
    }

    .p-static-md {
        position: static;
    }

    .p-absolute-md {
        position: absolute;
    }
}

@media (max-width: 800px) {
    .d-grid-sm {
        display: grid;
    }

    .d-block-sm {
        display: block;
    }

    .d-none-sm {
        display: none;
    }

    .grid-area-1-sm {
        grid-area: 1;
    }

    .grid-area-2-sm {
        grid-area: 2;
    }

    .grid-area-3-sm {
        grid-area: 3;
    }

    .grid-area-4-sm {
        grid-area: 4;
    }

    .grid-area-5-sm {
        grid-area: 5;
    }
}

@media (max-width: 500px) {
    .d-grid-xs {
        display: grid;
    }

    .d-block-xs {
        display: block;
    }

    .d-none-xs {
        display: none;
    }

}