html, body{
    margin: 0;
    padding: 0;
}

/* Containers */

.con{
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
}
.con-1440{
    max-width: 1440px;
}
.con-1200{
    max-width: 1200px;
}
.con-960{
    max-width: 960px;
}
.con-720{
    max-width: 720px;
}
.con-640{
    max-width: 640px;
}
.con-480{
    max-width: 480px;
}

/* All screen */

.enabled{ display: block;}
.disabled{ display: none;}

.tal{
    text-align: left; 
}
.tac{
    text-align: center; 
}
.tar{
    text-align: right; 
}

.margcent{
    margin-left: auto;
    margin-right: auto;
}

/*.col{
    box-sizing: border-box;
    padding-left: 3%;
    padding-right: 3%;
    padding-left: calc(30px);
    padding-right: calc(30px);     
}*/
/*.col-clear{
    width: 106%;
    margin-left: -3%;
    width: calc(100% + 60px);
    margin-left: calc(-30px);
}*/
.col{
    box-sizing: border-box;
    padding-left: 1.5%;
    padding-right: 1.5%;
    padding-left: calc(15px);
    padding-right: calc(15px);  
}

.col-clear{
    width: 106%;
    margin-left: -1.5%;
    width: calc(100% + 30px);
    margin-left: calc(-15px);
}

.col-60{
    box-sizing: border-box;
    padding-left: 3%;
    padding-right: 3%;
    padding-left: calc(30px);
    padding-right: calc(30px);     
}
.col-60-clear{
    width: 106%;
    margin-left: -3%;
    width: calc(100% + 60px);
    margin-left: calc(-30px);
}

.col-30{
    box-sizing: border-box;
    padding-left: 1.5%;
    padding-right: 1.5%;
    padding-left: calc(15px);
    padding-right: calc(15px);
}

.col-30-clear{
    width: 103%;
    margin-left: -1.5%;
    width: calc(100% + 30px);
    margin-left: calc(-15px);
}

.fl{float: left;}
.fr{float: right;}
.clear{clear: both;}
.clear::after{
    display: table;
    content: "";
    clear: both;
}

.w100{
    width: 100%;
}
.w90{
    width: 90%;
}
.w80{
    width: 80%;
}
.w75{
    width: 75%;
}
.w70{
    width: 70%;
}
.w66{
    width: 66.66666666666667%;
    width: calc(100%/3*2);
}
.w60{
    width: 60%;
}
.w50{
    width: 50% ;
}
.w40{
    width: 40%;
}
.w33{
    width: 33.33333333333333%;
    width: calc(100%/3);
}
.w30{
    width: 30%;
}
.w25{
    width: 25%;
}
.w20{
    width: 20%;
}
.w16{
    width: 16.66666666666667%;
    width: calc(100%/6);
}

/* lg < 1439px Prefix: lg */

@media screen and (max-width: 1599px)
{
    
    .lg-con-1440{
    max-width: 1440px;
    }
    .lg-con-1200{
        max-width: 1200px;
    }
    .lg-con-960{
        max-width: 960px;
    }
    .lg-con-720{
        max-width: 720px;
    }
    .lg-con-640{
        max-width: 640px;
    }
    .lg-con-480{
        max-width: 480px;
    }
    
    .col{
        box-sizing: border-box;
        padding-left: 1.5%;
        padding-right: 1.5%;
        padding-left: calc(15px);
        padding-right: calc(15px);     
    }
    .col-clear{
        width: 103%;
        margin-left: -1.5%;
        width: calc(100% + 30px);
        margin-left: calc(-15px);
    }
    
    .lg-col-60{
        box-sizing: border-box;
        padding-left: 3%;
        padding-right: 3%;
        padding-left: calc(30px);
        padding-right: calc(30px);     
    }
    .lg-col-60-clear{
        width: 106%;
        margin-left: -3%;
        width: calc(100% + 60px);
        margin-left: calc(-30px);
    }

    .lg-col-30{
        box-sizing: border-box;
        padding-left: 1.5%;
        padding-right: 1.5%;
        padding-left: calc(15px);
        padding-right: calc(15px);
    }

    .lg-col-30-clear{
        width: 103%;
        margin-left: -1.5%;
        width: calc(100% + 30px);
        margin-left: calc(-15px);
    }

    .lg-enabled{ display: block;}
    .lg-disabled{ display: none;}

    .lg-tal{
        text-align: left; 
    }
    .lg-tac{
        text-align: center; 
    }
    .lg-tar{
        text-align: right; 
    }

    .lg-fl{float: left;}
    .lg-fr{float: right;}
    .lg-clear{clear: both;}

    .lg-w100{
        width: 100%;
    }
    .lg-w90{
        width: 90%;
    }
    .lg-w80{
        width: 80%;
    }
    .lg-w75{
        width: 75%;
    }
    .lg-w70{
        width: 70%;
    }
    .lg-w66{
        width: 66.66666666666667%;
        width: calc(100%/3*2);
    }
    .lg-w60{
        width: 60%;
    }
    .lg-w50{
        width: 50% ;
    }
    .lg-w40{
        width: 40%;
    }
    .lg-w33{
        width: 33.33333333333333%;
        width: calc(100%/3);
    }
    .lg-w30{
        width: 30%;
    }
    .lg-w25{
        width: 25%;
    }
    .lg-w20{
        width: 20%;
    }
    .lg-w16{
        width: 16.66666666666667%;
        width: calc(100%/6);
    }

}

/* md < 1199px Prefix: md */

@media screen and (max-width: 1199px)
{
    .md-enabled{ display: block;}
    .md-disabled{ display: none;}
    
    .md-tal{
        text-align: left; 
    }
    .md-tac{
        text-align: center; 
    }
    .md-tar{
        text-align: right; 
    }
    
    .md-con-1440{
        max-width: 1440px;
    }
    .md-con-1200{
        max-width: 1200px;
    }
    .md-con-960{
        max-width: 960px;
    }
    .md-con-720{
        max-width: 720px;
    }
    .md-con-640{
        max-width: 640px;
    }
    .md-con-480{
        max-width: 480px;
    }
    
    .md-col-60{
        box-sizing: border-box;
        padding-left: 3%;
        padding-right: 3%;
        padding-left: calc(30px);
        padding-right: calc(30px);     
    }
    .md-col-60-clear{
        width: 106%;
        margin-left: -3%;
        width: calc(100% + 60px);
        margin-left: calc(-30px);
    }

    .md-col-30{
        box-sizing: border-box;
        padding-left: 1.5%;
        padding-right: 1.5%;
        padding-left: calc(15px);
        padding-right: calc(15px);
    }

    .md-col-30-clear{
        width: 103%;
        margin-left: -1.5%;
        width: calc(100% + 30px);
        margin-left: calc(-15px);
    }
    
    .md-fl{float: left;}
    .md-fr{float: right;}

    .md-clear{clear: both;}

    .md-w100{
        width: 100%;
    }
    .md-w90{
        width: 90%;
    }
    .md-w80{
        width: 80%;
    }
    .md-w75{
        width: 75%;
    }
    .md-w70{
        width: 70%;
    }
    .md-w66{
        width: 66.66666666666667%;
        width: calc(100%/3*2);
    }
    .md-w60{
        width: 60%;
    }
    .md-w50{
        width: 50% ;
    }
    .md-w40{
        width: 40%;
    }
    .md-w33{
        width: 33.33333333333333%;
        width: calc(100%/3);
    }
    .md-w30{
        width: 30%;
    }
    .md-w25{
        width: 25%;
    }
    .md-w20{
        width: 20%;
    }
    .md-w16{
        width: 16.66666666666667%;
        width: calc(100%/6);
    }

}

/* sm < 959px Prefix: sm */

@media screen and (max-width: 959px)
{
    .sm-enabled{ display: block;}
    .sm-disabled{ display: none;}
    
    .sm-tal{
        text-align: left; 
    }
    .sm-tac{
        text-align: center; 
    }
    .sm-tar{
        text-align: right; 
    }
    
    .sm-con-1440{
        max-width: 1440px;
    }
    .sm-con-1200{
        max-width: 1200px;
    }
    .sm-con-960{
        max-width: 960px;
    }
    .sm-con-720{
        max-width: 720px;
    }
    .sm-con-640{
        max-width: 640px;
    }
    .sm-con-480{
        max-width: 480px;
    }
    
    .sm-fl{float: left;}
    .sm-fr{float: right;}

    .sm-clear{clear: both;}

    .sm-col-60{
        box-sizing: border-box;
        padding-left: 3%;
        padding-right: 3%;
        padding-left: calc(30px);
        padding-right: calc(30px);     
    }
    .sm-col-60-clear{
        width: 106%;
        margin-left: -3%;
        width: calc(100% + 60px);
        margin-left: calc(-30px);
    }

    .sm-col-30{
        box-sizing: border-box;
        padding-left: 1.5%;
        padding-right: 1.5%;
        padding-left: calc(15px);
        padding-right: calc(15px);
    }

    .sm-col-30-clear{
        width: 103%;
        margin-left: -1.5%;
        width: calc(100% + 30px);
        margin-left: calc(-15px);
    }

    .sm-w100{
        width: 100%;
    }
    .sm-w90{
        width: 90%;
    }
    .sm-w80{
        width: 80%;
        float: left;
    }
    .sm-w75{
        width: 75%;
    }
    .sm-w70{
        width: 70%;
    }
    .sm-w66{
        width: 66.66666666666667%;
        width: calc(100%/3*2);
    }
    .sm-w60{
        width: 60%;
    }
    .sm-w50{
        width: 50% ;
    }
    .sm-w40{
        width: 40%;
    }
    .sm-w33{
        width: 33.33333333333333%;
        width: calc(100%/3);
    }
    .sm-w30{
        width: 30%;
    }
    .sm-w25{
        width: 25%;;
    }
    .sm-w20{
        width: 20%;
    }
    .sm-w16{
        width: 16.66666666666667%;
        width: calc(100%/6);
    }

}

/* xs < 599px Prefix: sx */

@media screen and (max-width: 599px)
{
    .sx-enabled{ display: block;}
    .sx-disabled{ display: none;}
    
    .sx-tal{
        text-align: left; 
    }
    .sx-tac{
        text-align: center; 
    }
    .sx-tar{
        text-align: right; 
    }

    .sx-fl{float: left;}
    .sx-fr{float: right;}

    .sx-clear{clear: both;}
    
    .col{
        box-sizing: border-box;
        padding-left: 1%;
        padding-right: 1%;
        padding-left: calc(7.5px);
        padding-right: calc(7.5px);
    }

    .col-clear{
        width: 102%;
        margin-left: -1%;
        width: calc(100% + 15px);
        margin-left: calc(-7.5px);
    }

    .sx-col-60{
        box-sizing: border-box;
        padding-left: 3%;
        padding-right: 3%;
        padding-left: calc(30px);
        padding-right: calc(30px);     
    }
    .sx-col-60-clear{
        width: 106%;
        margin-left: -3%;
        width: calc(100% + 60px);
        margin-left: calc(-30px);
    }

    .sx-col-30{
        box-sizing: border-box;
        padding-left: 1.5%;
        padding-right: 1.5%;
        padding-left: calc(15px);
        padding-right: calc(15px);
    }

    .sx-col-30-clear{
        width: 103%;
        margin-left: -1.5%;
        width: calc(100% + 30px);
        margin-left: calc(-15px);
    }
    
    .sx-col-15{
        box-sizing: border-box;
        padding-left: 1%;
        padding-right: 1%;
        padding-left: calc(7.5px);
        padding-right: calc(7.5px);
    }

    .sx-col-15-clear{
        width: 102%;
        margin-left: -1%;
        width: calc(100% + 15px);
        margin-left: calc(-7.5px);
    }

    .sx-w100{
        width: 100%;
    }
    .sx-w90{
        width: 90%;
    }
    .sx-w80{
        width: 80%;
        float: left;
    }
    .sx-w75{
        width: 75%;
    }
    .sx-w70{
        width: 70%;
    }
    .sx-w66{
        width: 66.66666666666667%;
        width: calc(100%/3*2);
    }
    .sx-w60{
        width: 60%;
        float: left;
    }
    .sx-w50{
        width: 50% ;
    }
    .sx-w40{
        width: 40%;
    }
    .sx-w33{
        width: 33.33333333333333%;
        width: calc(100%/3);
    }
    .sx-w30{
        width: 30%;
    }
    .sx-w25{
        width: 25%;
    }
    .sx-w20{
        width: 20%;
    }
    .sx-w16{
        width: 16.66666666666667%;
        width: calc(100%/6);
    }
}