/*styles for grid*/

.grid-container {
        width : 100%; 
        max-width : 1440px;
		position: relative;
		margin-left: auto;
		margin-right: auto;	
    }
	
	.row{
		margin-left:0%;
		margin-right:0%;
		/*overflow:hidden; */
	}
	
	/*-- our cleafix hack -- */ 
    .row:before, 
    .row:after {
        content:"";
        display: table;
        clear:both;
    }
	
	
	[class*='col-'] {
		position: relative;
        float: left;
        min-height: 1px;
		padding-left:0%;
		padding-right:0%;
    }
	
	
	.col-1{
        width: 16.66%; 
    }
    .col-2{
        width: 33.33%; 
    }
    .col-3{
        width: 50%; 
		
    }
    .col-4{
        width: 66.664%;
    }
    .col-5{
        width: 83.33%;
    }
    .col-6{
        width: 100%;
    }
	
	/*-- setting border box on all elements inside the grid --*/
    .grid-container *{
        box-sizing: border-box; 
    }

	
	@media all and (max-width:800px){
        .col-1{ width: 33.33%;    }
        .col-2{ width: 50%;        }
        .col-3{ width: 100%;    } /*  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%; 
        }
    }
	@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%;    }
		
    }