/* reset básico */

* {
    
margin: 0;
    
padding: 0;
    
-webkit-box-sizing: border-box;
       
-moz-box-sizing: border-box;
            
box-sizing: border-box;
}



/* container */

.container  {
    
width: 100%;
    
margin-left: auto;
    
margin-right: auto;
    
padding: 0 20px;

}
    

@media (min-width: 1170px) {
        
.container {
            
max-width: 1170px;
            
padding: 0;
       
 }
    
}



/* linha */

.row {
    
margin-left: -5px;
    
margin-right: -5px;

}
    

.row:before,
    
.row:after {
        
content: "";
        
display: table;
    
}
    

.row:after {
        
clear: both;
    
}



/* colunas */

.col {
    
display: inline-block;
    
vertical-align: top;
    
min-height: 1px;
    
padding-left: 5px;
    
padding-right: 5px;
    
width: 100%;
    
margin-right: -4px;
    
*zoom: 1;
    
*display: inline;

}
    

/* duas colonas */
    
@media (min-width: 480px) {
        
.col-2 {
            
width: 50%;
        
}
    
}

    

/* tres colunas */
    
@media (min-width: 728px) {
        
.col-3 {
width: 33.3333%;
       
 }
    
}

    

/* 60-40 */
    
@media (min-width: 992px) {
        
.col-content {
            
width: 60%;
        
}

        
.col-sidebar {
           
width: 40%;
        
}
    
}




/* USAR APENAS PARA DEMOSTRAÇÂO */

.teste {
    
background: #666;
    
padding: 5px;
    
text-align: center;
    
margin: 2px 0;
    
color: #fff;

}