.row                                { margin:0 auto;  display:table; }
.row .row                           { width:auto; display:inline-block; }



.row                                { width:960px; }
.row .row                           { margin:0 -16px; }

.grid_1                             { width:48px; margin:0 16px; float:left; display:inline; }
.grid_2                             { width:128px; margin:0 16px; float:left; display:inline; }
.grid_3                             { width:208px; margin:0 16px; float:left; display:inline; }
.grid_4                             { width:288px; margin:0 16px; float:left; display:inline; }
.grid_5                             { width:368px; margin:0 16px; float:left; display:inline; }     
.grid_6                             { width:448px; margin:0 16px; float:left; display:inline; }
.grid_7                             { width:528px; margin:0 16px; float:left; display:inline; }
.grid_8                             { width:608px; margin:0 16px; float:left; display:inline; }
.grid_9                             { width:688px; margin:0 16px; float:left; display:inline; }
.grid_10                            { width:768px; margin:0 16px; float:left; display:inline; }
.grid_11                            { width:848px; margin:0 16px; float:left; display:inline; }
.grid_12                            { width:928px; margin:0 16px; float:left; display:inline; }
    
.offset_1                           { margin-left:96px; }
.offset_2                           { margin-left:176px; }
.offset_3                           { margin-left:256px; }
.offset_4                           { margin-left:336px; }
.offset_5                           { margin-left:416px; }
.offset_6                           { margin-left:496px; }
.offset_7                           { margin-left:576px; }
.offset_8                           { margin-left:656px; }
.offset_9                           { margin-left:736px; }
.offset_10                          { margin-left:816px; }
.offset_11                          { margin-left:896px; }

.show-mobile                        { display:none !important; }
.show-tablet                        { display:none !important; }
.show-screen                        { display:inherit !important; }
    
.hide-mobile                        { display:inherit !important; }
.hide-tablet                        { display:inherit !important; }
.hide-screen                        { display:none !important; }





/***** Tablet (Smaller than 959px) *****/
@media only screen and (min-width: 768px) and (max-width: 959px) {

.row                                { width:768px; }
.row .row                           { margin:0 -14px; }
        
.grid_1                             { width:36px; margin:0 14px; float:left; display:inline; }
.grid_2                             { width:100px; margin:0 14px; float:left; display:inline; }
.grid_3                             { width:164px; margin:0 14px; float:left; display:inline; }
.grid_4                             { width:228px; margin:0 14px; float:left; display:inline; }
.grid_5                             { width:292px; margin:0 14px; float:left; display:inline; }
.grid_6                             { width:356px; margin:0 14px; float:left; display:inline; }
.grid_7                             { width:420px; margin:0 14px; float:left; display:inline; }
.grid_8                             { width:484px; margin:0 14px; float:left; display:inline; }
.grid_9                             { width:548px; margin:0 14px; float:left; display:inline; }
.grid_10                            { width:612px; margin:0 14px; float:left; display:inline; }
.grid_11                            { width:676px; margin:0 14px; float:left; display:inline; }
.grid_12                            { width:740px; margin:0 14px; float:left; display:inline; }
        
.offset_1                           { margin-left:78px; }
.offset_2                           { margin-left:142px; }
.offset_3                           { margin-left:206px; }
.offset_4                           { margin-left:270px; }
.offset_5                           { margin-left:334px; }
.offset_6                           { margin-left:398px; }
.offset_7                           { margin-left:462px; }
.offset_8                           { margin-left:526px; }
.offset_9                           { margin-left:590px; }
.offset_10                          { margin-left:654px; }
.offset_11                          { margin-left:718px; }
    
.show-mobile                        { display:none !important; }
.show-tablet                        { display:inherit !important; }
.show-screen                        { display:none !important; }
    
.hide-mobile                        { display:inherit !important; }
.hide-tablet                        { display:none !important; }
.hide-screen                        { display:inherit !important; }

}



/***** Mobile *****/
/***** Updated based on essencious Mobile version *****/
@media only screen and (max-width: 767px) {

.row                                { padding:0 16px; width:100%; display:block; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.row .row                           { margin:0; padding:0; width:100%; display:block; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12                            { width:100%; margin:10px 0 0 0; float:none; display:block; }

.show-mobile                        { display:inherit !important; }
.show-tablet                        { display:none !important; }
.show-screen                        { display:none !important; }
    
.hide-mobile                        { display:none !important; }
.hide-tablet                        { display:inherit !important; }
.hide-screen                        { display:inherit !important; }

}



/***** Clean up *****/

.container:after                    { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } 
.clearfix:before,
.clearfix:after,
.row:before,
.row:after                          { content:'\0020'; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }
.row:after, .clearfix:after         { clear:both; }
.row, 
.clearfix                           { zoom:1; }
.clear                              { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }