.d-flex{
    display: flex;
}

.my-0{
    margin: 0 0 !important;
}
.my-1{
    margin: 0.5em 0 !important;
}
.my-2{
    margin: 1em 0 !important;
}
.my-3{
    margin: 1.5em 0 !important;
}
.my-4{
    margin: 2em 0 !important;
}
.my-5{
    margin: 3em 0 !important;
}

.mx-0{
    margin: 0 0  !important;
}
.mx-1{
    margin: 0 0.5em  !important;
}
.mx-2{
    margin: 0 1em  !important;
}
.mx-3{
    margin: 0 1.5em  !important;
}
.mx-4{
    margin: 0 2em  !important;
}
.mx-5{
    margin: 0 3em  !important;
}

.mt-0{
    margin-top: 0 !important;
}
.mt-1{
    margin-top: 0.5em !important;
}
.mt-2{
    margin-top: 1em !important;
}
.mt-3{
    margin-top: 1.5em !important;
}
.mt-4{
    margin-top: 2em !important;
}
.mt-5{
    margin-top: 3em !important;
}


.mb-0{
    margin-bottom: 0 !important;
}
.mb-1{
    margin-bottom: 0.5em !important;
}
.mb-2{
    margin-bottom: 1em !important;
}
.mb-3{
    margin-bottom: 1.5em !important;
}
.mb-4{
    margin-bottom: 2em !important;
}
.mb-5{
    margin-bottom: 3em !important;
}

.ml-0{
    margin-left: 0 !important;
}
.ml-1{
    margin-left: 0.5em !important;
}
.ml-2{
    margin-left: 1em !important;
}
.ml-3{
    margin-left: 1.5em !important;
}
.ml-4{
    margin-left: 2em !important;
}
.ml-5{
    margin-left: 3em !important;
}

.mr-0{
    margin-right: 0 !important;
}
.mr-1{
    margin-right: 0.5em !important;
}
.mr-2{
    margin-right: 1em !important;
}
.mr-3{
    margin-right: 1.5em !important;
}
.mr-4{
    margin-right: 2em !important;
}
.mr-5{
    margin-right: 3em !important;
}

.py-0{
    padding: 0 0 !important;
}
.py-1{
    padding: 0.5em 0 !important;
}
.py-2{
    padding: 1em 0 !important;
}
.py-3{
    padding: 1.5em 0 !important;
}
.py-4{
    padding: 2em 0 !important;
}
.py-5{
    padding: 3em 0 !important;
}

.px-0{
    padding: 0 0  !important;
}
.px-1{
    padding: 0 0.5em  !important;
}
.px-2{
    padding: 0 1em  !important;
}
.px-3{
    padding: 0 1.5em  !important;
}
.px-4{
    padding: 0 2em  !important;
}
.px-5{
    padding: 0 3em  !important;
}

.pt-0{
    padding-top: 0 !important;
}
.pt-1{
    padding-top: 0.5em !important;
}
.pt-2{
    padding-top: 1em !important;
}
.pt-3{
    padding-top: 1.5em !important;
}
.pt-4{
    padding-top: 2em !important;
}
.pt-5{
    padding-top: 3em !important;
}


.pb-0{
    padding-bottom: 0 !important;
}
.pb-1{
    padding-bottom: 0.5em !important;
}
.pb-2{
    padding-bottom: 1em !important;
}
.pb-3{
    padding-bottom: 1.5em !important;
}
.pb-4{
    padding-bottom: 2em !important;
}
.pb-5{
    padding-bottom: 3em !important;
}

.pl-0{
    padding-left: 0 !important;
}
.pl-1{
    padding-left: 0.5em !important;
}
.pl-2{
    padding-left: 1em !important;
}
.pl-3{
    padding-left: 1.5em !important;
}
.pl-4{
    padding-left: 2em !important;
}
.pl-5{
    padding-left: 3em !important;
}

.pr-0{
    padding-right: 0 !important;
}
.pr-1{
    padding-right: 0.5em !important;
}
.pr-2{
    padding-right: 1em !important;
}
.pr-3{
    padding-right: 1.5em !important;
}
.pr-4{
    padding-right: 2em !important;
}
.pr-5{
    padding-right: 3em !important;
}

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

.i-black{
    color: black;
}
.i-white{
    color: white;
}

.fs-20{
    font-size: 20px;
}
.fs-60{
    font-size: 60px;
}

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

.justify-center{
    justify-content: center;
}
.justify-content-right{
    justify-content: flex-end;
}
.justify-between{
    justify-content: space-between;
}
.force-center{
    text-align: -webkit-center;

}
.row{
    width: 100%;
}
.col-7{
    width: 70%;
}
.col-1{
    width: 10%;
}.col-2{
    width: 20%;
}.col-4{
    width: 40%;
}.col-5{
    width: 50%;
}.col-6{
    width: 60%;
}.col-8{
    width: 80%;
}.col-9{
    width: 90%;
}
.col-3{
    width: 30%;
}

.text-end{
    text-align: end;
}
.align-self-cemter{
    align-self: center;
}
.display-none{
    display: none;
}
.desktop-nav{
    display: flex;
    width: 100%;
}
.mobile-nav{
    display: none;
}
.desktop-footer{
    display: flex;
    width: 100%;
}
.mobile-footer{
    display: none;
}
.height-400px{
    height: 400px;
}
.margin-auto{
    margin: auto;
}

@media(max-width:1024px) and (min-width:768px){
    
    .desktop-nav{
        display: none;
    }
    .mobile-nav{
        display: flex;
        width: 100%;
    }   
} 
@media(max-width:768px) and (min-width:500px){
    
    .desktop-nav{
        display: none;
    }
    .mobile-nav{
        display: flex;
        width: 100%;
    }   
} 
@media(max-width:500px) and (min-width:375px){
    
    .desktop-nav{
        display: none;
    }
    .mobile-nav{
        display: flex;
        width: 100%;
    }   
    nav {
        padding: 0 1%;
        padding-left: 0;
    }
    nav .main-logo {
        padding: 0px 0;
    }
    nav .logo {
        width: 100%;
    }
    nav .mail {
        display: none;
    }
    .hamburger {
        width: 8%;
        padding: 0 0;
        margin: 0 10%;
    }
    .ham-span span {
        left: 0%;
        margin: 2px;
    }
    .desktop-footer{
        display: none;
    }
    .mobile-footer{
        display: flex;
        width: 100%;
        flex-direction: column;
    }
} 
@media(max-width:375px) and (min-width:320px){
    
    .desktop-nav{
        display: none;
    }
    .mobile-nav{
        display: flex;
        width: 100%;
    }   
    nav {
        padding: 0 1%;
        padding-left: 0;
    }
    nav .main-logo {
        padding: 0px 0;
    }
    nav .logo {
        width: 100%;
    }
    nav .mail {
        display: none;
    }
    .hamburger {
        width: 8%;
        padding: 0 0;
        margin: 0 10%;
    }
    .ham-span span {
        left: 0%;
        margin: 2px;
    }
    .desktop-footer{
        display: none;
    }
    .mobile-footer{
        display: flex;
        width: 100%;
        flex-direction: column;
    }
} 
@media(max-width:500px) and (min-width:375px){
    
    .desktop-nav{
        display: none;
    }
    .mobile-nav{
        display: flex;
        width: 100%;
    }   
    nav {
        padding: 0 1%;
        padding-left: 0;
    }
    nav .main-logo {
        padding: 0px 0;
    }
    nav .logo {
        width: 100%;
    }
    nav .mail {
        display: none;
    }
    .hamburger {
        width: 8%;
        padding: 0 0;
        margin: 0 10%;
    }
    .ham-span span {
        left: 0%;
        margin: 2px;
    }
    .desktop-footer{
        display: none;
    }
    .mobile-footer{
        display: flex;
        width: 100%;
        flex-direction: column;
    }
} 
@media(max-width:320px){
    
    .desktop-nav{
        display: none;
    }
    .mobile-nav{
        display: flex;
        width: 100%;
    }   
    nav {
        padding: 0 1%;
        padding-left: 0;
    }
    nav .main-logo {
        padding: 0px 0;
    }
    nav .logo {
        width: 100%;
    }
    nav .mail {
        display: none;
    }
    .hamburger {
        width: 8%;
        padding: 0 0;
        margin: 0 10%;
    }
    .ham-span span {
        left: 0%;
        margin: 2px;
    }
    .desktop-footer{
        display: none;
    }
    .mobile-footer{
        display: flex;
        width: 100%;
        flex-direction: column;
    }
}