/** wrapper styles **/

.wrapper{
    width: 100%;
    background-color: #000;
}

.container-fluid{
    width: 100%;
    margin: 0 auto;
    background-color: #ccc;
}
.container{
    width: 100%;
    margin: 0 auto;
    background-color: whitesmoke;
}


/*set container width 568px = 35.5 em / 550px = 34.4em*/
@media screen and (min-width: 35.5em) {
    .container{
       /*width: 34.4em;*/
        max-width: 48em;
    }
}
/*set container width 768px = 48 em / 750px = 47em*/
@media screen and (min-width: 48em) {
    .container{
        /*width: 47em;*/
        max-width: 64em;
    }
}
/*set container width 1024px = 64 em / 1001px = 62.5em*/
@media screen and (min-width: 64em) {
    .container{
        /*width: 62.5em;*/
        max-width: 80em;
    }
}
/*set container width 1280px = 80 em / 1251px = 78.2em*/
@media screen and (min-width: 80em) {
    .container{
        /*width: 78.2em;*/
       max-width: 90em;  /*990em = 1440px */
    }
}