/* Flex part */

.row{
    display: flex;
}

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

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

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

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

.js-st{
    justify-content: flex-start;
}

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


.ai-s{
    align-items: flex-start;
}

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

.f-w-nw{
    flex-wrap: nowrap;
}

.gap-10{
    gap: 10px;
}

.gap-20{
    gap: 20px;
}

.gap-30{
    gap: 30px;
}

.gap-40{
    gap: 40px;
}

.gap-50{
    gap: 50px;
}

.gap-60{
    gap: 60px;
}


/* font-size */

.fs1{
    font-size: 1rem;
}

.fs1-5{
    font-size: 1.3rem;
}

.fs2{
    font-size: 2rem;
}

.fs3{
    font-size: 3rem;
}

.fs4{
    font-size: 4rem;
}

.fs5{
    font-size: 5rem;
}

/* text-position */

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

/*ul and a*/


a{
    text-decoration: none;
}

ul{
    list-style: none;
}


/*margin*/

.m-a{
    margin: auto;
}

.mt-1{
    margin-top: 1rem;
}

.mt-2{
    margin-top: 2rem;
}

.mt-3{
    margin-top: 3rem;
}

.mt-4{
    margin-top: 4rem;
}

.ml-1{
    margin-left: 1rem;
}

.ml-2{
    margin-left: 2rem;
}

.ml-3{
    margin-left: 3rem;
}

.ml-4{
    margin-left: 4rem;
}

.mr-1{
    margin-right: 1rem;
}

.mr-2{
    margin-right: 2rem;
}

.mr-3{
    margin-right: 3rem;
}

.mr-4{
    margin-right: 4rem;
}

.mr-5{
    margin-right: 10rem;
}

.mb-1{
    margin-bottom: 1rem;
}

.fw-bold{
    font-weight: bold;
}

.mb-2{
    margin-bottom: 2rem;
}

.mb-3{
    margin-bottom: 3rem;
}

.mb-4{
    margin-bottom: 4rem;
}

.br-0{
    border-radius: 0 !important;
}


/*Colors*/

.grey{
    color: #333;
}

.white{
    color: #fff;
}

.black{
    color: #000;
}

.red{
    color: red;
}

.blue{
    color: blue;
}

.green{
    color: green;
}

.light-green{
    color: #9DFF00;
}

.yellow{
    color: yellow;
}

.orange{
    color: orange;
}

.purple{
    color: purple;
}

/*background-color*/

.bg-grey{
    background-color: #333;
}

.bg-white{
    background-color: #fff;
}

.bg-black{
    background-color: #000;
}

.bg-red{
    background-color: red;
}

.bg-blue{
    background-color: blue;
}

.bg-green{
    background-color: green;
}

.bg-yellow{
    background-color: yellow;
}

.bg-orange{
    background-color: orange;
}

.bg-purple{
    background-color: purple;
}



/**/

.pdt-1{
    padding-top: 1rem;
}

.pdt-2{
    padding-top: 2rem;
}

.pdt-3{
    padding-top: 3rem;
}

.pdt-4{
    padding-top: 4rem;
}

.pdt-6{
    padding-top: 6rem;
}

.pdt-15{
    padding-top: 15rem;
}

.pdl-1{
    padding-left: 1rem;
}

.pdl-2{
    padding-left: 2rem;
}

.pdl-3{
    padding-left: 3rem;
}

.pdl-4{
    padding-left: 4rem;
}

.pdr-1{
    padding-right: 1rem;
}


.pdr-2{
    padding-right: 2rem;
}

.pdr-3{
    padding-right: 3rem;
}

.pdr-4{
    padding-right: 4rem;
}


.pdb-1{
    padding-bottom: 1rem;
}

.pdb-2{
    padding-bottom: 2rem;
}

.pdb-3{
    padding-bottom: 3rem;
}

.pdb-4{
    padding-bottom: 4rem;
}

/* position */

.abs{
    position: absolute;
}

/*z-index*/

.z-1{
    z-index: 1;
}

.z-2{
    z-index: 2;
}

.z-3{
    z-index: 3;
}

.z-4{
    z-index: 4;
}

.w-35 {
    width: 35em
}

.w-75{
    width: 75%;
}

/* responsive texte */

/* @media screen and (max-width: 768px){
    .column{
        flex-direction: column;
    }
} */
.h2-title {
    font-size: 32pt;
}

.h3-title {
    font-size: 26pt;
}

.w-33{
    width: 33%;
}