body {
    font-size: 17px;
}
p {
    line-height: 20px;
    margin-bottom: 15px;
}

[class*="container"] {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

@media (min-width: 768px) {
    body {
        font-size: 14px;
    }
    p {font-size: 16px;line-height: 18px; margin-bottom: 10px;}
    [class*="container"] {
        width: 750px;
    }
}
@media (min-width: 992px) {
    body {
        font-size: 14px;
    }
    p {font-size: 16px;line-height: 18px; margin-bottom: 10px;}
    [class*="container"] {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    body {
        font-size: 14px;
    }
    p {font-size: 16px;line-height: 18px; margin-bottom: 10px;}
    [class*="container"] {
        width: 1200px;
    }
}

[class*="current"] {
    cursor: default;
    text-decoration: none;
}

[class*="col-"] {
    margin-left: 15px;
    margin-right: 15px;
    width: 100%;
    -webkit-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;
}

/*COLUMN SIZE*/

@media (min-width: 768px) {
    [class*="col-"] {
        margin-left: 5px;
        margin-right: 5px;
    }
    [class*="col-12"] {
        width: calc(100% - 10px);
    }
    [class*="col-11"] {
        width: calc(100% / 12 * 11 - 10px);
    }
    [class*="col-10"] {
        width: calc(100% / 12 * 10 - 10px);
    }
    [class*="col-09"] {
        width: calc(75% - 10px);
    }
    [class*="col-08"] {
        width: calc(100% / 12 * 8 - 10px);
    }
    [class*="col-07"] {
        width: calc(100% / 12 * 7 - 10px);
    }
    [class*="col-06"] {
        width: calc(50% - 10px);
    }
    [class*="col-05"] {
        width: calc(100% / 12 * 5 - 10px);
    }
    [class*="col-04"] {
        width: calc(100% / 3 - 10px);
    }
    [class*="col-03"] {
        width: calc(25% - 10px);
    }
    [class*="col-02"] {
        width: calc(100% / 6 - 10px);
    }
    [class*="col-01"] {
        width: calc(100% / 12 - 10px);
    }
}
@media (min-width: 992px) {
    [class*="col-"] {
        margin-left: 10px;
        margin-right: 10px;
    }
    [class*="col-12"] {
        width: calc(100% - 20px);
    }
    [class*="col-11"] {
        width: calc(100% / 12 * 11 - 20px);
    }
    [class*="col-10"] {
        width: calc(100% / 12 * 10 - 20px);
    }
    [class*="col-09"] {
        width: calc(75% - 20px);
    }
    [class*="col-08"] {
        width: calc(100% / 12 * 8 - 20px);
    }
    [class*="col-07"] {
        width: calc(100% / 12 * 7 - 20px);
    }
    [class*="col-06"] {
        width: calc(50% - 20px);
    }
    [class*="col-05"] {
        width: calc(100% / 12 * 5 - 20px);
    }
    [class*="col-04"] {
        width: calc(100% / 3 - 20px);
    }
    [class*="col-03"] {
        width: calc(25% - 20px);
    }
    [class*="col-02"] {
        width: calc(100% / 6 - 20px);
    }
    [class*="col-01"] {
        width: calc(100% / 12 - 20px);
    }
}
@media (min-width: 1220px) {
    [class*="col-"] {
        margin-left: 15px;
        margin-right: 15px;
    }
    [class*="col-12"] {
        width: calc(100% - 30px);
    }
    [class*="col-11"] {
        width: calc(100% / 12 * 11 - 30px);
    }
    [class*="col-10"] {
        width: calc(100% / 12 * 10 - 30px);
    }
    [class*="col-09"] {
        width: calc(75% - 30px);
    }
    [class*="col-08"] {
        width: calc(100% / 12 * 8 - 30px);
    }
    [class*="col-07"] {
        width: calc(100% / 12 * 7 - 30px);
    }
    [class*="col-06"] {
        width: calc(50% - 30px);
    }
    [class*="col-05"] {
        width: calc(100% / 12 * 5 - 30px);
    }
    [class*="col-04"] {
        width: calc(100% / 3 - 30px);
    }
    [class*="col-03"] {
        width: calc(25% - 30px);
    }
    [class*="col-02"] {
        width: calc(100% / 6 - 30px);
    }
    [class*="col-01"] {
        width: calc(100% / 12 - 30px);
    }
}

/*PADDING*/
[class*="-pad-15"] {
    padding-left: 15px;
    padding-right: 15px;
}

/*MARGIN*/
[class*="-mr-11"], [class*="-ml-11"],
[class*="-mr-10"], [class*="-ml-10"],
[class*="-mr-09"], [class*="-ml-09"],
[class*="-mr-08"], [class*="-ml-08"],
[class*="-mr-07"], [class*="-ml-07"],
[class*="-mr-06"], [class*="-ml-06"],
[class*="-mr-05"], [class*="-ml-05"],
[class*="-mr-04"], [class*="-ml-04"],
[class*="-mr-03"], [class*="-ml-03"],
[class*="-mr-02"], [class*="-ml-02"],
[class*="-mr-01"], [class*="-ml-01"] {
    margin-right: 15px;
    margin-left: 15px;
}
[class*="-mg-00"] {
    margin: 0;
}
[class*="-mr-00"] {
    margin-right: 15px;
}
[class*="-ml-00"] {
    margin-left: 15px;
}
[class*="-mb-40"] {
    margin-bottom: 40px;
}
[class*="-mb-20"] {
    margin-bottom: 20px;
}
[class*="-last"]{
    margin-right: 0;
}
[class*="-first"]{
    margin-left: 0;
}

@media (min-width: 768px) {
    [class*="-mr-11"] {
        margin-right: calc(100% / 12 * 11 + 5px);
    }
    [class*="-mr-10"] {
        margin-right: calc(100% / 12 * 10 + 5px);
    }
    [class*="-mr-09"] {
        margin-right: calc(75% + 5px);
    }
    [class*="-mr-08"] {
        margin-right: calc(100% / 12 * 8 + 5px);
    }
    [class*="-mr-07"] {
        margin-right: calc(100% / 12 * 7 + 5px);
    }
    [class*="-mr-06"] {
        margin-right: calc(50% + 5px);
    }
    [class*="-mr-05"] {
        margin-right: calc(100% / 12 * 5 + 5px);
    }
    [class*="-mr-04"] {
        margin-right: calc(100% / 3 + 5px);
    }
    [class*="-mr-03"] {
        margin-right: calc(25% + 5px);
    }
    [class*="-mr-02"] {
        margin-right: calc(100% / 6 + 5px);
    }
    [class*="-mr-01"] {
        margin-right: calc(100% / 12 + 5px);
    }

    [class*="-ml-11"] {
        margin-left: calc(100% / 12 * 11 + 5px);
    }
    [class*="-ml-10"] {
        margin-left: calc(100% / 12 * 10 + 5px);
    }
    [class*="-ml-09"] {
        margin-left: calc(75% + 5px);
    }
    [class*="-ml-08"] {
        margin-left: calc(100% / 12 * 8 + 5px);
    }
    [class*="-ml-07"] {
        margin-left: calc(100% / 12 * 7 + 5px);
    }
    [class*="-ml-06"] {
        margin-left: calc(50% + 5px);
    }
    [class*="-ml-05"] {
        margin-left: calc(100% / 12 * 5 + 5px);
    }
    [class*="-ml-04"] {
        margin-left: calc(100% / 3 + 5px);
    }
    [class*="-ml-03"] {
        margin-left: calc(25% + 5px);
    }
    [class*="-ml-02"] {
        margin-left: calc(100% / 6 + 5px);
    }
    [class*="-ml-01"] {
        margin-left: calc(100% / 12 + 5px);
    }
    [class*="-mr-00"] {
        margin-right: 0;
    }
    [class*="-ml-00"] {
        margin-left: 0;
    }
}
@media (min-width: 992px) {
    [class*="-mr-11"] {
        margin-right: calc(100% / 12 * 11 + 10px);
    }
    [class*="-mr-10"] {
        margin-right: calc(100% / 12 * 10 + 10px);
    }
    [class*="-mr-09"] {
        margin-right: calc(75% + 10px);
    }
    [class*="-mr-08"] {
        margin-right: calc(100% / 12 * 8 + 10px);
    }
    [class*="-mr-07"] {
        margin-right: calc(100% / 12 * 7 + 10px);
    }
    [class*="-mr-06"] {
        margin-right: calc(50% + 10px);
    }
    [class*="-mr-05"] {
        margin-right: calc(100% / 12 * 5 + 10px);
    }
    [class*="-mr-04"] {
        margin-right: calc(100% / 3 + 10px);
    }
    [class*="-mr-03"] {
        margin-right: calc(25% + 10px);
    }
    [class*="-mr-02"] {
        margin-right: calc(100% / 6 + 10px);
    }
    [class*="-mr-01"] {
        margin-right: calc(100% / 12 + 10px);
    }

    [class*="-ml-11"] {
        margin-left: calc(100% / 12 * 11 + 10px);
    }
    [class*="-ml-10"] {
        margin-left: calc(100% / 12 * 10 + 10px);
    }
    [class*="-ml-09"] {
        margin-left: calc(75% + 10px);
    }
    [class*="-ml-08"] {
        margin-left: calc(100% / 12 * 8 + 10px);
    }
    [class*="-ml-07"] {
        margin-left: calc(100% / 12 * 7 + 10px);
    }
    [class*="-ml-06"] {
        margin-left: calc(50% + 10px);
    }
    [class*="-ml-05"] {
        margin-left: calc(100% / 12 * 5 + 10px);
    }
    [class*="-ml-04"] {
        margin-left: calc(100% / 3 + 10px);
    }
    [class*="-ml-03"] {
        margin-left: calc(25% + 10px);
    }
    [class*="-ml-02"] {
        margin-left: calc(100% / 6 + 10px);
    }
    [class*="-ml-01"] {
        margin-left: calc(100% / 12 + 10px);
    }

    [class*="-mr-00"] {
        margin-right: 0;
    }
    [class*="-ml-00"] {
        margin-left: 0;
    }
}
@media (min-width: 1220px) {
    [class*="-mr-11"] {
        margin-right: calc(100% / 12 * 11 + 15px);
    }
    [class*="-mr-10"] {
        margin-right: calc(100% / 12 * 10 + 15px);
    }
    [class*="-mr-09"] {
        margin-right: calc(75% + 15px);
    }
    [class*="-mr-08"] {
        margin-right: calc(100% / 12 * 8 + 15px);
    }
    [class*="-mr-07"] {
        margin-right: calc(100% / 12 * 7 + 15px);
    }
    [class*="-mr-06"] {
        margin-right: calc(50% + 15px);
    }
    [class*="-mr-05"] {
        margin-right: calc(100% / 12 * 5 + 15px);
    }
    [class*="-mr-04"] {
        margin-right: calc(100% / 3 + 15px);
    }
    [class*="-mr-03"] {
        margin-right: calc(25% + 15px);
    }
    [class*="-mr-02"] {
        margin-right: calc(100% / 6 + 15px);
    }
    [class*="-mr-01"] {
        margin-right: calc(100% / 12 + 15px);
    }

    [class*="-ml-11"] {
        margin-left: calc(100% / 12 * 11 + 15px);
    }
    [class*="-ml-10"] {
        margin-left: calc(100% / 12 * 10 + 15px);
    }
    [class*="-ml-09"] {
        margin-left: calc(75% + 15px);
    }
    [class*="-ml-08"] {
        margin-left: calc(100% / 12 * 8 + 15px);
    }
    [class*="-ml-07"] {
        margin-left: calc(100% / 12 * 7 + 15px);
    }
    [class*="-ml-06"] {
        margin-left: calc(50% + 15px);
    }
    [class*="-ml-05"] {
        margin-left: calc(100% / 12 * 5 + 15px);
    }
    [class*="-ml-04"] {
        margin-left: calc(100% / 3 + 15px);
    }
    [class*="-ml-03"] {
        margin-left: calc(25% + 15px);
    }
    [class*="-ml-02"] {
        margin-left: calc(100% / 6 + 15px);
    }
    [class*="-ml-01"] {
        margin-left: calc(100% / 12 + 15px);
    }

    [class*="-mr-00"] {
        margin-right: 0;
    }
    [class*="-ml-00"] {
        margin-left: 0;
    }
}