.col-1{
  width:8.33%;
}

.col-2{
  width:16.66%;
}

.col-3{
  width:25%;
}

.col-4{
  width:33.32%;
}

.col-5{
  width:41.65%;
}

.col-6{
  width:50%;
}

.col-7{
  width:58.31%;
}

.col-8{
  width:66.64%;
}

.col-9{
  width:75%;
}

.col-10{
  width:83.33%;
}

.col-11{
  width:91.63%;
}

.col-12{
  width:100%;
}

.row{
  width:100%;
}

/* start extra small mobile phone */
@media only screen and (max-width:600px) {
  .col-xs-1{
    width:8.33%;
  }

  .col-xs-2{
    width:16.66%;
  }

  .col-xs-3{
    width:25%;
  }

  .col-xs-4{
    width:33.32%;
  }

  .col-xs-5{
    width:41.65%;
  }

  .col-xs-6{
    width:50%;
  }

  .col-xs-7{
    width:58.31%;
  }

  .col-xs-8{
    width:66.64%;
  }

  .col-xs-9{
    width:75%;
  }

  .col-xs-10{
    width:83.33%;
  }

  .col-xs-11{
    width:91.63%;
  }

  .col-xs-12{
    width:100%;
  }

}
/* end extra small mobile phone */

/* start medium mobile phone */
@media only screen and (min-width:600px) and (max-width:768px){
  .col-md-1{
    width:8.33%;
  }

  .col-md-2{
    width:16.66%;
  }

  .col-md-3{
    width:25%;
  }

  .col-md-4{
    width:33.32%;
  }

  .col-md-5{
    width:41.65%;
  }

  .col-md-6{
    width:50%;
  }

  .col-md-7{
    width:58.31%;
  }

  .col-md-8{
    width:66.64%;
  }

  .col-md-9{
    width:75%;
  }

  .col-md-10{
    width:83.33%;
  }

  .col-md-11{
    width:91.63%;
  }

  .col-md-12{
    width:100%;
  }

}
/* end medium mobile phone */

/* start medium laptop phone */
@media only screen and (min-width:768px) and (max-width:992px){
  .col-lg-1{
    width:8.33%;
  }

  .col-lg-2{
    width:16.66%;
  }

  .col-lg-3{
    width:25%;
  }

  .col-lg-4{
    width:33.32%;
  }

  .col-lg-5{
    width:41.65%;
  }

  .col-lg-6{
    width:50%;
  }

  .col-lg-7{
    width:58.31%;
  }

  .col-lg-8{
    width:66.64%;
  }

  .col-lg-9{
    width:75%;
  }

  .col-lg-10{
    width:83.33%;
  }

  .col-lg-11{
    width:91.63%;
  }

  .col-lg-12{
    width:100%;
  }

}
/* end medium laptop phone */

/* start medium laptop phone */
@media only screen and (min-width:992px) and (max-width:1024px){
  body{
    background-color: blue;
  }
  .col-xlg-1{
    width:8.33%;
  }

  .col-xlg-2{
    width:16.66%;
  }

  .col-xlg-3{
    width:25%;
  }

  .col-xlg-4{
    width:33.32%;
  }

  .col-xlg-5{
    width:41.65%;
  }

  .col-xlg-6{
    width:50%;
  }

  .col-xlg-7{
    width:58.31%;
  }

  .col-xlg-8{
    width:66.64%;
  }

  .col-xlg-9{
    width:75%;
  }

  .col-xlg-10{
    width:83.33%;
  }

  .col-xlg-11{
    width:91.63%;
  }

  .col-xlg-12{
    width:100%;
  }

}
/* end medium laptop phone */


/* start general coding  */

.float-left{
  float:left;
}

.float-right{
  float:right;
}

.clear-float-left{
  clear:left;
}

.clear-float-right{
  clear:right;
}

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

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

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

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

.font-weight-bold{
  font-weight:bold;
}

.font-weight-normal{
  font-weight:normal;
}

.text-decoration-none{
  text-decoration:none;
}

.mx-auto{
  margin:auto;
}

.border-danger{
  border-width:1px;
  border-style:solid;
  border-color:red;
}

.border-success{
  border-width:1px;
  border-style:solid;
  border-color:green;
}

.border-warning{
  border-width:1px;
  border-style:solid;
  border-color:yellow;
}

.list-style-none{
  list-style:none;
}

.display-block {
  display:block;
}

.display-none {
  display:none;
}