/*
   Project : Mbox Responsive Grid System 
   URI: http://.com/
   Version: 1.0
   Author: Oussama BOUGNOUCH
   Author URI: http://www..com
   Github URI: https://github.com/
*/

/************************************************************************************************

*****************   THE GRID

*************************************************************************************************/
.box-container,
.box-container-fluid{
    margin-left: auto;
    margin-right: auto;
}
.box-container-fluid{
    width: 100%;
}
.clearfix:after,
.box-container:after,
.box-container-fluid:after{
    content: "";
    display: block;
    width: 100%;
    height: 0;
    clear: both;	
}
.box-1, .box-2, .box-3, .box-4, .box-5, .box-6, .box-7, .box-8, .box-9, .box-10, .box-11, .box-12 {
    display:block;
    float: left;
    /* padding-left: 10px; */
    padding-right: 10px;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.box-1 {
    width: 8.33333333%;
}
.box-2 {
    width: 16.66666667%;
}
.box-3 {
    width: 25%;
}
.box-4 {
    width: 33.33333333%;
}
.box-5 {
    width: 41.66666667%;
}.box-6 {
    width: 50%;
}
.box-7 {
    width: 58.33333333%;
}
.box-8 {
    width: 66.66666667%;
}
.box-9 {
    width: 75%;
}
.box-10 {
    width: 83.33333333%;
}
.box-11 {
    width: 91.66666667%;
}
.box-12 {
    width: 100%;
}
/*						*
  *  ---  OFFSET ---   *
*						*/					
.box-offset-1 {
    margin-left: 8.33333333%;
}
.box-offset-2 {
    margin-left: 16.66666667%;
}
.box-offset-3 {
    margin-left: 25%;
}
.box-offset-4 {
    margin-left: 33.33333333%;
}
.box-offset-5 {
    margin-left: 41.66666667%;
}
.box-offset-6 {
    margin-left: 50%;
}
.box-offset-7 {
    margin-left: 58.33333333%;
}
.box-offset-8 {
    margin-left: 66.66666667%;
}
.box-offset-9 {
    margin-left: 75%;
}
.box-offset-10 {
    margin-left: 83.33333333%;
}
.box-offset-11 {
    margin-left: 91.66666667%;
}
.box-offset-12 {
    margin-left: 100%;
}

/************************************************************************************************

*****************   @MEDIA QUERIES

*************************************************************************************************/

@media (min-width: 1245px) {
    .box-container {
        width: 1200px;
    }
}
@media (min-width: 960) and (max-width: 1199px) {
    .box-container {
        width: 960px;
    }
}
@media (max-width: 767px) {
    .box-container {
        width: 90%;
    }
    .box-1, .box-2, .box-3, .box-4, .box-5, .box-6, .box-7, .box-8, .box-9, .box-10, .box-11, .box-12 {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    /* offsets */
    .box-offset-1, .box-offset-2, .box-offset-3, .box-offset-4, .box-offset-5, .box-offset-6, .box-offset-7, .box-offset-8, .box-offset-9, .box-offset-10, .box-offset-11, .box-offset-12 {
        margin-left: 0;
    }
}
/************************************************************************************************

*****************   RESPONSIVE IMAGES

*************************************************************************************************/
.rsp-img,
.scale{
    width: 100%;
    height: auto;
}