/**   bootstrap mock    **/

@media screen and (min-width:970px) {
.col-sm-4 {
  width: 33%;
  float:left;

}



.col-sm-2 {
  width: 16%;
    float:left;

}

.col-sm-8 {
  width: 66%;
    float:left;
}

.col-sm-3 {
  width: 25%;
    float:left;
}
.col-sm-6 {
    width: 50%;
    float:left;
}

.col-sm-7{
    width: 58%;
    float:left;
}

.col-sm-1 {
    width: 8%;
    float:left;
}


}


 

/**   bootstrap mock    **/





@media screen and (max-width:970px)     and (min-width:800px)     {
.col-sm-4 {
  width: 50%;
  float:left;

}

.col-sm-2 {
  width: 20%;
    float:left;

}

.col-sm-8 {
  width: 80%;
    float:left;
}
.col-sm-10 {
  width: 100%;
    float:left;
}
.col-sm-3 {
  width: 30%;
    float:left;
}
.col-sm-6 {
    width: 60%;
    float:left;
}

.col-sm-7{
    width: 70%;
    float:left;
}

.col-sm-1 {
    width: 8%;
    float:left;
}


}






@media screen and (max-width: 800px) {

.col-sm-4 {
  width: 50%;
  float:left;

}

.col-sm-2 {
    width: 40%;
    float:left;

}

.col-sm-8 {
  width: 100%;
    float:left;
}

.col-sm-3 {
   width: 50%;
    float:left;
}
.col-sm-6 {
    width: 100%;
    float:left;
}

.col-sm-10 {
    width: 100%;
    float:left;
}


.col-sm-7{
   width: 100%;
    float:left;
}
.col-sm-1 {
    width: 40%;
    float:left;
}


}