/*credits to http://j4n.co/blog/Creating-your-own-css-grid-system*/
/*-- setting border box on all elements inside the grid --*/
.grid-container *{
    box-sizing: border-box; 
}
.grid-container{
    width: 100%;    
}

/*-- our cleafix hack -- */ 
.row:before, 
.row:after {
    content:"";
    display: table ;
    clear:both;
}

[class*='col-'] {
    float: left; 
    min-height: 1px; 
    width: 16.66%; 
    /*-- our gutter -- */
    
    /*background-color: #FFE3AA;*/
}

.col-1{ width: 16.66%; }
.col-2{ width: 33.33%; }
.col-3{ width: 50%;    }
.col-4{ width: 66.66%; }
.col-5{ width: 83.33%; }
.col-6{ width: 100%;   }

.outline, .outline *{
    /*outline: 1px solid #D4B16A; */
}

/*-- some extra column content styling --*/
[class*='col-'] > p, [class*='col-'] > h2 {
 padding: 0 10px;
}

/*-- some extra column content styling --*/
[class*='col-']:nth-of-type(1) > p, [class*='col-']:nth-of-type(1) > h2 {
    padding: 0 0;
   }

   
@media all and (max-width:800px){
    .col-1{ width: 33.33%;  }
    .col-2{ width: 50%;     }
    .col-3{ width: 83.33%;  }
    .col-4{ width: 100%;    }
    .col-5{ width: 100%;    }
    .col-6{ width: 100%;    }

    .row .col-2:last-of-type{
        width: 100%; 
    }

    .row .col-5 ~ .col-1{
        width: 100%; 
    }
    /*-- some extra column content styling --*/
    [class*='col-'] > p, [class*='col-'] > h2 {
        padding: 0;
    }
}

@media all and (max-width:650px){
    .col-1{ width: 50%;     }
    .col-2{ width: 100%;    }
    .col-3{ width: 100%;    }
    .col-4{ width: 100%;    }
    .col-5{ width: 100%;    }
    .col-6{ width: 100%;    }
}