*{
  box-sizing: border-box;
}
a{
  text-decoration: none;
}
.inclusive{
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/*                                          -- bol-1 - bol-12 --                                                  */
.col-w1{
  float:left;
  width: 1%;
}
.col-w2{
  float:left;
  width: 2%;
}
.col-w3{
  float:left;
  width: 3%;
}
.col-w4{
  float:left;
  width: 4%;
}
.col-w5{
  float:left;
  width: 5%;
}
.col-w6{
  float:left;
  width: 6%;
}
.col-w7{
  float:left;
  width: 7%;
}
.col-w8{
  float:left;
  width: 8%;
}
.col-w9{
  float:left;
  width: 9%;
}
.col-w10{
  float:left;
  width: 10%;
}
.col-w11{
  float:left;
  width: 11%;
}
.col-w12{
  float:left;
  width: 12%;
}
.col-w13{
  float:left;
  width: 13%;
}
.col-w14{
  float:left;
  width: 14%;
}
.col-w15{
  float:left;
  width: 15%;
}
.col-w16{
  float:left;
  width: 16%;
}
.col-w17{
  float:left;
  width: 17%;
}
.col-w18{
  float:left;
  width: 18%;
}
.col-w19{
  float:left;
  width: 19%;
}
.col-w20{
  float:left;
  width: 20%;
}
.col-w21{
  float:left;
  width: 21%;
}
.col-w22{
  float:left;
  width: 22%;
}
.col-w23{
  float:left;
  width: 23%;
}
.col-w24{
  float:left;
  width: 24%;
}
.col-w25{
  float:left;
  width: 25%;
}
.col-w26{
  float:left;
  width: 26%;
}
.col-w27{
  float:left;
  width: 27%;
}
.col-w28{
  float:left;
  width: 28%;
}
.col-w29{
  float:left;
  width: 29%;
}
.col-w30{
  float:left;
  width: 30%;
}
.col-w31{
  float:left;
  width: 31%;
}
.col-w32{
  float:left;
  width: 32%;
}
.col-w33{
  float:left;
  width: 33%;
}
.col-w34{
  float:left;
  width: 34%;
}
.col-w35{
  float:left;
  width: 35%;
}
.col-w36{
  float:left;
  width: 36%;
}
.col-w37{
  float:left;
  width: 37%;
}
.col-w38{
  float:left;
  width: 38%;
}
.col-w39{
  float:left;
  width: 39%;
}
.col-w40{
  float:left;
  width: 40%;
}
.col-w41{
  float:left;
  width: 41%;
}
.col-w42{
  float:left;
  width: 42%;
}
.col-w42{
  float:left;
  width: 42%;
}
.col-w43{
  float:left;
  width: 43%;
}
.col-w44{
  float:left;
  width: 44%;
}
.col-w45{
  float:left;
  width: 45%;
}
.col-w46{
  float:left;
  width: 46%;
}
.col-w47{
  float:left;
  width: 47%;
}
.col-w48{
  float:left;
  width: 48%;
}
.col-w49{
  float:left;
  width: 49%;
}
.col-w50{
  float:left;
  width: 50%;
}
.col-w51{
  float:left;
  width: 51%;
}
.col-w52{
  float:left;
  width: 52%;
}
.col-w53{
  float:left;
  width: 53%;
}
.col-w54{
  float:left;
  width: 54%;
}
.col-w55{
  float:left;
  width: 55%;
}
.col-w56{
  float:left;
  width: 56%;
}
.col-w57{
  float:left;
  width: 57%;
}
.col-w58{
  float:left;
  width: 58%;
}
.col-w59{
  float:left;
  width: 59%;
}
.col-w60{
  float:left;
  width: 60%;
}
.col-w61{
  float:left;
  width: 61%;
}
.col-w62{
  float:left;
  width: 62%;
}
.col-w63{
  float:left;
  width: 63%;
}
.col-w64{
  float:left;
  width: 64%;
}
.col-w65{
  float:left;
  width: 65%;
}
.col-w66{
  float:left;
  width: 66%;
}
.col-w67{
  float:left;
  width: 67%;
}
.col-w68{
  float:left;
  width: 68%;
}
.col-w69{
  float:left;
  width: 69%;
}
.col-w70{
  float:left;
  width: 70%;
}
.col-w71{
  float:left;
  width: 71%;
}
.col-w72{
  float:left;
  width: 72%;
}
.col-w73{
  float:left;
  width: 73%;
}
.col-w74{
  float:left;
  width: 74%;
}
.col-w75{
  float:left;
  width: 75%;
}
.col-w76{
  float:left;
  width: 76%;
}
.col-w77{
  float:left;
  width: 77%;
}
.col-w78{
  float:left;
  width: 78%;
}
.col-w79{
  float:left;
  width: 79%;
}
.col-w80{
  float:left;
  width: 80%;
}
.col-w81{
  float:left;
  width: 81%;
}
.col-w82{
  float:left;
  width: 82%;
}
.col-w83{
  float:left;
  width: 83%;
}
.col-w84{
  float:left;
  width: 84%;
}
.col-w85{
  float:left;
  width: 85%;
}
.col-w86{
  float:left;
  width: 86%;
}
.col-w87{
  float:left;
  width: 87%;
}
.col-w88{
  float:left;
  width: 88%;
}
.col-w89{
  float:left;
  width: 89%;
}
.col-w90{
  float:left;
  width: 90%;
}
.col-w91{
  float:left;
  width: 91%;
}
.col-w92{
  float:left;
  width: 92%;
}
.col-w93{
  float:left;
  width: 93%;
}
.col-w94{
  float:left;
  width: 94%;
}
.col-w95{
  float:left;
  width: 95%;
}
.col-w96{
  float:left;
  width: 96%;
}
.col-w97{
  float:left;
  width: 97%;
}
.col-w98{
  float:left;
  width: 98%;
}
.col-w99{
  float:left;
  width: 99%;
}
.col-w100{
  float:left;
  width: 100%;
}


/*                                          -- bol-1 - bol-12 --                                                  */




.bol-1{
  width: 100%;
}
.bol-2{
  width: 50%;
}
.bol-3{
  width: 33.33%;
}
.bol-4{
  width: 25%;
}
.bol-5{
  width: 20%;
}
.bol-6{
  width: 16.66%;
}
.bol-7{
  width: 14.28%;
}
.bol-8{
  width: 12.5%;
}
.bol-9{
  width: 11.11%;
}
.bol-10{
  width: 10%;
}
.bol-11{
  width: 9.09%;
}
.bol-12{
  width: 8.33%;
}
.bol-13{
  width: 7.69%;
}
.bol-14{
  width: 7.14%;
}
.bol-15{
  width: 6.66%;
}




/*                                          -- col-1 - col-12 --                                                  */



.col-1{
  width: 8.33%;
}
.col-2{
  width: 16.66%;
}
.col-3{
  width: 25%;
}
.col-4{
  width: 33.33%;
}
.col-5{
  width: 41.66%;
}
.col-6{
  width: 50%;
}
.col-7{
  width: 58.33%;
}
.col-8{
  width: 66.66%;
}
.col-9{
  width: 75%;
}
.col-10{
  width: 83.33%;
}
.col-11{
  width: 91.66%;
}
.col-12{
  width: 100%;
}





/*                                          -- row column --                                                  */




.row-2{
  columns: 2;
  display: flex;
}
.row-3{
  columns: 3;
  display: flex;
}
.row-3m{
  columns: 3;
  display: flex;
}
.row-4{
  columns: 4;
  display: flex;
}
.row-5{
  columns: 5;
  display: flex;
}
.row-6{
  columns: 6;
  display: flex;
}
.row-7{
  columns: 7;
  display: flex;
}
.row-8{
  columns: 8;
  display: flex;
}
.row-9{
  columns: 9;
  display: flex;
}
.row-10{
  columns: 10;
  display: flex;
}
.row-11{
  columns: 11;
  display: flex;
}
.row-12{
  columns: 12;
  display: flex;
}

/*  Padding Classes Start */


/* all direction  */
.pa-10 {
  padding: 10px;
}
.pa-20 {
  padding: 20px;
}
.pa-30 {
  padding: 30px;
}
.pa-40 {
  padding: 40px;
}
.pa-50 {
  padding: 50px;
}
.pa-60 {
  padding: 60px;
}
.pa-70 {
  padding: 70px;
}
.pa-80 {
  padding: 80px;
}
.pa-90 {
  padding: 90px;
}
.pa-100 {
  padding: 100px;
}
/* all direction */

/* just top and bottom */


.ph-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.ph-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.ph-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.ph-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.ph-50 {
  padding-top: 50px;
  padding-bottom: 50px;
}
.ph-60 {
  padding-top: 60px;
  padding-bottom: 60px;
}
.ph-70 {
  padding-top: 70px;
  padding-bottom: 70px;
}
.ph-80 {
  padding-top: 80px;
  padding-bottom: 80px;
}
.ph-90 {
  padding-top: 90px;
  padding-bottom: 90px;
}
.ph-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}
/* just top and bottom */


/*  Padding Classes Finish */


/*  Margin Classes Start */


/* all direction */
.ma-10 {
  margin: 10px;
}
.ma-20 {
  margin: 20px;
}
.ma-30 {
  margin: 30px;
}
.ma-40 {
  margin: 40px;
}
.ma-50 {
  margin: 50px;
}
.ma-60 {
  margin: 60px;
}
.ma-70 {
  margin: 70px;
}
.ma-80 {
  margin: 80px;
}
.ma-90 {
  margin: 90px;
}
.ma-100 {
  margin: 100px;
}
/* all direction for margin */

/* just top and bottom for margin */


.mh-10{
  margin-top: 10px;
  margin-bottom: 10px;
}
.mh-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.mh-30 {
  margin-top: 30px;
  margin-bottom: 30px;
}
.mh-40 {
  margin-top: 40px;
  margin-bottom: 40px;
}
.mh-50 {
  margin-top: 50px;
  margin-bottom: 50px;
}
.mh-60 {
  margin-top: 60px;
  margin-bottom: 60px;
}
.mh-70 {
  margin-top: 70px;
  margin-bottom: 70px;
}
.mh-80 {
  margin-top: 80px;
  margin-bottom: 80px;
}
.mh-90 {
  margin-top: 90px;
  margin-bottom: 90px;
}
.mh-100 {
  margin-top: 100px;
  margin-bottom: 100px;
}
/* just top and bottom */


/*  Padding Classes Finish */



.ct{
  text-align: center;
}
.lft{
  text-align: left;
}
.rght{
  text-align: right;
}
#footer{
  background-color: black;
  padding:10px;
  position: relative;
  z-index: 1;
  color:white;
}
@media screen and (max-width: 1200px) {
  .mw{
    width: 100%;
  }
  .inclusive{
    max-width: 1000px;
  }

}
@media screen and (max-width: 1024px) {
  .mw-1{
    width: 100%;
  }
  .inclusive{
    max-width: 768px;
  }
}
@media screen and (max-width: 768px) {
  .mw-2{
    width: 100%;
  }
  .inclusive{
    max-width: 600px;
  }
}
@media screen and (max-width: 600px) {
  .mw-3{
    width: 100%;
  }
  .inclusive{
    max-width: 480px;
  }
}
@media screen and (max-width: 480px) {
  .mw-4{
    width: 100%;
  }
  .inclusive{
    max-width: 360px;
  }
}