/* JAC- Johnny A C */

:root{
    --globalScale: 1;
}

/* Margin Top */
.mt-a { margin-top: auto; }
.mt-0 { margin-top: 0; }
.mt-5 { margin-top: calc(5px * var(--globalScale)); }
.mt-10 { margin-top: calc(10px * var(--globalScale)); }
.mt-15 { margin-top: calc(15px * var(--globalScale)); }
.mt-20 { margin-top: calc(20px * var(--globalScale)); }
.mt-25 { margin-top: calc(25px * var(--globalScale)); }
.mt-30 { margin-top: calc(30px * var(--globalScale)); }
.mt-35 { margin-top: calc(35px * var(--globalScale)); }
.mt-40 { margin-top: calc(40px * var(--globalScale)); }
.mt-45 { margin-top: calc(45px * var(--globalScale)); }
.mt-50 { margin-top: calc(50px * var(--globalScale)); }

/* Margin Right */
.mr-a { margin-right: auto; }
.mr-0 { margin-right: 0; }
.mr-5 { margin-right: calc(5px * var(--globalScale)); }
.mr-10 { margin-right: calc(10px * var(--globalScale)); }
.mr-15 { margin-right: calc(15px * var(--globalScale)); }
.mr-20 { margin-right: calc(20px * var(--globalScale)); }
.mr-25 { margin-right: calc(25px * var(--globalScale)); }
.mr-30 { margin-right: calc(30px * var(--globalScale)); }
.mr-35 { margin-right: calc(35px * var(--globalScale)); }
.mr-40 { margin-right: calc(40px * var(--globalScale)); }
.mr-45 { margin-right: calc(45px * var(--globalScale)); }
.mr-50 { margin-right: calc(50px * var(--globalScale)); }

/* Margin Bottom */
.mb-a { margin-bottom: auto; }
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: calc(5px * var(--globalScale)); }
.mb-10 { margin-bottom: calc(10px * var(--globalScale)); }
.mb-15 { margin-bottom: calc(15px * var(--globalScale)); }
.mb-20 { margin-bottom: calc(20px * var(--globalScale)); }
.mb-25 { margin-bottom: calc(25px * var(--globalScale)); }
.mb-30 { margin-bottom: calc(30px * var(--globalScale)); }
.mb-35 { margin-bottom: calc(35px * var(--globalScale)); }
.mb-40 { margin-bottom: calc(40px * var(--globalScale)); }
.mb-45 { margin-bottom: calc(45px * var(--globalScale)); }
.mb-50 { margin-bottom: calc(50px * var(--globalScale)); }

/* Margin Left */
.ml-a { margin-left: auto; }
.ml-0 { margin-left: 0; }
.ml-5 { margin-left: calc(5px * var(--globalScale)); }
.ml-10 { margin-left: calc(10px * var(--globalScale)); }
.ml-15 { margin-left: calc(15px * var(--globalScale)); }
.ml-20 { margin-left: calc(20px * var(--globalScale)); }
.ml-25 { margin-left: calc(25px * var(--globalScale)); }
.ml-30 { margin-left: calc(30px * var(--globalScale)); }
.ml-35 { margin-left: calc(35px * var(--globalScale)); }
.ml-40 { margin-left: calc(40px * var(--globalScale)); }
.ml-45 { margin-left: calc(45px * var(--globalScale)); }
.ml-50 { margin-left: calc(50px * var(--globalScale)); }


.d-flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}
.d-flex-column{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
}
.flex-1{
    flex: 1;
}

.d-none{
    display: none;
}


.row{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.align-center{
    align-items: center;
}
.justify-center{
    justify-content: center;
}
[class*="col-"]{
    padding: 6px;
    box-sizing: border-box;
}

.np-all{
    padding: 0;
}
.np-t{
    padding-top: 0 !important;
}
.np-b{
    padding-bottom: 0;
}
.np-l{
    padding-left: 0;
}
.np-r{
    padding-right: 0;
}
.pb-vh{
    padding-bottom: 50vh;
}
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}


[class*="col-d1"] {width: 8.33%;}
[class*="col-d2"] {width: 16.66%;}
[class*="col-d3"] {width: 25%;}
[class*="col-d35"] {width: 29.1667%;}
[class*="col-d4"] {width: 33.33%;}
[class*="col-d5"] {width: 41.66%;}
[class*="col-d6"] {width: 50%;}
[class*="col-d7"] {width: 58.33%;}
[class*="col-d8"] {width: 66.66%;}
[class*="col-d9"] {width: 75%;}
[class*="col-d10"] {width: 83.33%;}
[class*="col-d11"] {width: 91.66%;}
[class*="col-d12"] {width: 100%;}

@media only screen and (max-width: 1200px) {
    [class*="col-"][class*="-sd1"] {width: 8.33%;}
    [class*="col-"][class*="-sd2"] {width: 16.66%;}
    [class*="col-"][class*="-sd3"] {width: 25%;}
    [class*="col-"][class*="-sd4"] {width: 33.33%;}
    [class*="col-"][class*="-sd5"] {width: 41.66%;}
    [class*="col-"][class*="-sd6"] {width: 50%;}
    [class*="col-"][class*="-sd7"] {width: 58.33%;}
    [class*="col-"][class*="-sd8"] {width: 66.66%;}
    [class*="col-"][class*="-sd9"] {width: 75%;}
    [class*="col-"][class*="-sd10"] {width: 83.33%;}
    [class*="col-"][class*="-sd11"] {width: 91.66%;}
    [class*="col-"][class*="-sd12"] {width: 100%;}
}

@media only screen and (max-width: 950px) {
    [class*="col-"][class*="-tc1"] {width: 8.33%;}
    [class*="col-"][class*="-tc2"] {width: 16.66%;}
    [class*="col-"][class*="-tc3"] {width: 25%;}
    [class*="col-"][class*="-tc4"] {width: 33.33%;}
    [class*="col-"][class*="-tc5"] {width: 41.66%;}
    [class*="col-"][class*="-tc6"] {width: 50%;}
    [class*="col-"][class*="-tc7"] {width: 58.33%;}
    [class*="col-"][class*="-tc8"] {width: 66.66%;}
    [class*="col-"][class*="-tc9"] {width: 75%;}
    [class*="col-"][class*="-tc10"] {width: 83.33%;}
    [class*="col-"][class*="-tc11"] {width: 91.66%;}
    [class*="col-"][class*="-tc12"] {width: 100%;}
}

@media only screen and (max-width: 768px) {
    [class*="col-"][class*="-t1"] {width: 8.33%;}
    [class*="col-"][class*="-t2"] {width: 16.66%;}
    [class*="col-"][class*="-t3"] {width: 25%;}
    [class*="col-"][class*="-t4"] {width: 33.33%;}
    [class*="col-"][class*="-t5"] {width: 41.66%;}
    [class*="col-"][class*="-t6"] {width: 50%;}
    [class*="col-"][class*="-t7"] {width: 58.33%;}
    [class*="col-"][class*="-t8"] {width: 66.66%;}
    [class*="col-"][class*="-t9"] {width: 75%;}
    [class*="col-"][class*="-t10"] {width: 83.33%;}
    [class*="col-"][class*="-t11"] {width: 91.66%;}
    [class*="col-"][class*="-t12"] {width: 100%;}
}

@media only screen and (max-width: 500px) {
    [class*="col-"][class*="-m1"] {width: 8.33%;}
    [class*="col-"][class*="-m2"] {width: 16.66%;}
    [class*="col-"][class*="-m3"] {width: 25%;}
    [class*="col-"][class*="-m4"] {width: 33.33%;}
    [class*="col-"][class*="-m5"] {width: 41.66%;}
    [class*="col-"][class*="-m6"] {width: 50%;}
    [class*="col-"][class*="-m7"] {width: 58.33%;}
    [class*="col-"][class*="-m8"] {width: 66.66%;}
    [class*="col-"][class*="-m9"] {width: 75%;}
    [class*="col-"][class*="-m10"] {width: 83.33%;}
    [class*="col-"][class*="-m11"] {width: 91.66%;}
    [class*="col-"][class*="-m12"] {width: 100%;}
}

[class*="contain-lg"]{
    max-width: 1200px;
}
[class*="contain-md"]{
    max-width: 992px;
}
[class*="contain-sm"]{
    max-width: 768px;
}
[class*="contain-"][class$="-left"]{
    margin-right: auto;
}
[class*="contain-"][class$="-right"]{
    margin-left: auto;
}
[class*="contain-"][class$="-center"]{
    margin-left: auto;
    margin-right: auto;
}



@media only screen and (max-width: 1045px) {
    :root {
        --globalScale: 0.7; 
    }
}
@media only screen and (min-width: 1045px) {
    :root {
        --globalScale: 0.55; 
    }
}

@media only screen and (min-width: 1140px) {
    :root {
        --globalScale: 0.60; 
    }
}

@media only screen and (min-width: 1235px) {
    :root {
        --globalScale: 0.65; 
    }
}

@media only screen and (min-width: 1330px) {
    :root {
        --globalScale: 0.70; 
    }
}

@media only screen and (min-width: 1425px) {
    :root {
        --globalScale: 0.75; 
    }
}

@media only screen and (min-width: 1520px) {
    :root {
        --globalScale: 0.80; 
    }
}

@media only screen and (min-width: 1615px) {
    :root {
        --globalScale: 0.85; 
    }
}

@media only screen and (min-width: 1710px) {
    :root {
        --globalScale: 0.90; 
    }
}

@media only screen and (min-width: 1805px) {
    :root {
        --globalScale: 0.95; 
    }
}

@media only screen and (min-width: 1900px) {
    :root {
        --globalScale: 1; 
    }
}

@media only screen and (min-width: 1900px) {
    :root {
        --globalScale: 1; 
    }
}

@media only screen and (min-width: 2005px) {
    :root {
        --globalScale: 1.05; 
    }
}

@media only screen and (min-width: 2110px) {
    :root {
        --globalScale: 1.10; 
    }
}

@media only screen and (min-width: 2215px) {
    :root {
        --globalScale: 1.15; 
    }
}

@media only screen and (min-width: 2320px) {
    :root {
        --globalScale: 1.20; 
    }
}

@media only screen and (min-width: 2425px) {
    :root {
        --globalScale: 1.25; 
    }
}

@media only screen and (min-width: 2530px) {
    :root {
        --globalScale: 1.30; 
    }
}

@media only screen and (min-width: 2635px) {
    :root {
        --globalScale: 1.35; 
    }
}

@media only screen and (min-width: 2740px) {
    :root {
        --globalScale: 1.40; 
    }
}

@media only screen and (min-width: 2845px) {
    :root {
        --globalScale: 1.45; 
    }
}

@media only screen and (min-width: 2950px) {
    :root {
        --globalScale: 1.50; 
    }
}