.container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px ; position:relative;  }
.container { width: 960px; margin-left: auto; margin-right: auto; box-sizing: border-box;position:relative;}

.ML15{margin-left: 15px;}.MR15{margin-right: 15px}.PL15{padding-left: 15px;}.PR15{padding-right: 15px;}
.row { margin-left: -15px; margin-right: -15px;position:relative; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { position: relative; min-height: 1px; box-sizing: border-box;float: left; }
.col-p { padding-left: 15px; padding-right: 15px; }
.col-12{ width: 100% }
.col-11{ width: 91.66666667% }
.col-10{ width: 83.33333333% }
.col-9 { width: 75% }
.col-8 { width: 66.66666667% }
.col-7 { width: 58.33333333% }
.col-6 { width: 50% }
.col-5 { width: 41.66666667% }
.col-4 { width: 33.33333333% }
.col-3 { width: 25% }
.col-2 { width: 16.66666667% }
.col-1 { width: 8.33333333% }
.pull-12{ right: 100% }
.pull-11{ right: 91.66666667% }
.pull-10{ right: 83.33333333% }
.pull-9 { right: 75% }
.pull-8 { right: 66.66666667% }
.pull-7 { right: 58.33333333% }
.pull-6 { right: 50% }
.pull-5 { right: 41.66666667% }
.pull-4 { right: 33.33333333% }
.pull-3 { right: 25% }
.pull-2 { right: 16.66666667% }
.pull-1 { right: 8.33333333% }
.pull-0 { right: auto }
.offset-12{ margin-left: 100% }
.offset-11{ margin-left: 91.66666667% }
.offset-10{ margin-left: 83.33333333% }
.offset-9 { margin-left: 75% }
.offset-8 { margin-left: 66.66666667% }
.offset-7 { margin-left: 58.33333333% }
.offset-6 { margin-left: 50% }
.offset-5 { margin-left: 41.66666667% }
.offset-4 { margin-left: 33.33333333% }
.offset-3 { margin-left: 25% }
.offset-2 { margin-left: 16.66666667% }
.offset-1 { margin-left: 8.33333333% }
.offset-0 { margin-left: 0 }

.percent{width:100%; zoom:1;position:relative;}
.percent .per{float: left;position:relative;}
.per-2_1, .per-50{width:50%;}
.per-3_1{width:33.333333%;}
.per-3_2{width:66.666666%;}
.per-4_1{width:25%;}
.per-4_3{width:75%;}
.per-5_1{width:20%;}
.per-5_2{width:40%;}
.per-5_3{width:60%;}
.per-5_4{width:80%;}
.per-6_1{width:16.666666%;}
.per-6_5{width:83.333333%;}

@media only screen and (min-width:1200px) {
    html,body {min-width: 1200px;}
    .container{width: 1200px;}
}

@media only screen and (max-width:1023px) {
    .percent .per{float: none;width:100%;}
}
@media only screen and (max-width:767px) {
    html,body{min-width: 320px;}
    .container, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{width: 100%;float: none;}
}


/* #Clearing
================================================== */

/* Self Clearing Goodness */
.clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .row:after, .row:before { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:after, .container-fluid:after, .container:after, .row:after, .row:after, .clearfix:after { clear: both }

/* <div class="row"> <div class="clearfix"> */
.clearfix:before, .clearfix:after, .row:before, .row:after, dd div:after, .percent:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.row, .clearfix, dd div{ zoom: 1; }

/* <br class="clear" />  */
.clear, .clr { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clr { visibility: visible; overflow: visible; }