/*
    Description: 	Grid Container & columns
    Author: 		Inside Lab
    Version: 		1.0
*/

/*	--------------------------------------------------
	:: Grid & Columns of 1200px
	-------------------------------------------------- */

    .grid-container {
	    position:relative;
	    max-width:1200px;
		margin:0 auto;
	    width:100%;
		padding:0;
		-webkit-box-sizing:border-box;
	       -moz-box-sizing:border-box; 
	            box-sizing:border-box;
    }
	
	.grid-container:after { 
	    content:""; 
	    display:block; 
	    height:0; 
	    clear:both; 
	    visibility:hidden; 
	}

    .grid-container .column.one,
    .grid-container .column.two,
    .grid-container .column.three,
    .grid-container .column.four,
    .grid-container .column.five,
    .grid-container .column.six,
    .grid-container .column.seven,
    .grid-container .column.eight,
    .grid-container .column.nine,
    .grid-container .column.ten,
    .grid-container .column.eleven,
    .grid-container .column.twelve {
	    display:inline-block;
	    float:left;
	    margin-left:1%;
	    margin-right:1%;
    }
	
	.grid-container .column img{
	    display:block;
	    width:100%;
	    height:auto;
		-webkit-box-sizing:border-box;
		   -moz-box-sizing:border-box;
		     -o-box-sizing:border-box;
		    -ms-box-sizing:border-box;
		        box-sizing:border-box;
    }
	
    .grid-container .column.one { width:6.333333333333333%; }
    .grid-container .column.two { width:14.666666666666667%; }
    .grid-container .column.three { width:23%; }
    .grid-container .column.four { width:31.33333333333334%; }
    .grid-container .column.five { width:39.66666666666667%; }
    .grid-container .column.six { width:48%; }
    .grid-container .column.seven { width:56.33333333333334%; }
    .grid-container .column.eight { width:64.66666666666667%; }
    .grid-container .column.nine { width:73%; }
    .grid-container .column.ten { width:81.33333333333334%; }
    .grid-container .column.eleven { width:89.66666666666667%; }
    .grid-container .column.twelve { width:98%; }
	
	.grid-container .column.one.nospace-left { width:7.333333333333333%; margin-left:0; }
    .grid-container .column.two.nospace-left { width:15.66666666666667%; margin-left:0; }
    .grid-container .column.three.nospace-left { width:24%; margin-left:0; }
    .grid-container .column.four.nospace-left { width:32.33333333333334%; margin-left:0; }
    .grid-container .column.five.nospace-left { width:40.66666666666667%; margin-left:0; }
    .grid-container .column.six.nospace-left { width:49%; margin-left:0; }
    .grid-container .column.seven.nospace-left { width:57.33333333333334%; margin-left:0; }
    .grid-container .column.eight.nospace-left { width:65.66666666666667%; margin-left:0; }
    .grid-container .column.nine.nospace-left { width:74%; margin-left:0; }
    .grid-container .column.ten.nospace-left { width:82.33333333333334%; margin-left:0; }
    .grid-container .column.eleven.nospace-left { width:90.66666666666667%; margin-left:0; }
    .grid-container .column.twelve.nospace-left { width:99%; margin-left:0; }
	
	.grid-container .column.one.nospace-right { width:7.333333333333333%; margin-right:0; }
    .grid-container .column.two.nospace-right { width:15.66666666666667%; margin-right:0; }
    .grid-container .column.three.nospace-right { width:24%; margin-right:0; }
    .grid-container .column.four.nospace-right { width:32.33333333333334%; margin-right:0; }
    .grid-container .column.five.nospace-right { width:40.66666666666667%; margin-right:0; }
    .grid-container .column.six.nospace-right { width:49%; margin-right:0; }
    .grid-container .column.seven.nospace-right { width:57.33333333333334%; margin-right:0; }
    .grid-container .column.eight.nospace-right { width:65.66666666666667%; margin-right:0; }
    .grid-container .column.nine.nospace-right { width:74%; margin-right:0; }
    .grid-container .column.ten.nospace-right { width:82.33333333333334%; margin-right:0; }
    .grid-container .column.eleven.nospace-right { width:90.66666666666667%; margin-right:0; }
    .grid-container .column.twelve.nospace-right { width:99%; margin-right:0; }
	
	.grid-container .column.twelve.nospace-left.nospace-right { width:100%; margin-left:0; margin-right:0; }
	
/*	--------------------------------------------------
	:: Grid Columns good for Portfolio
	-------------------------------------------------- */
	
	.grid-container .column.one.nospace { width:8.333333333333333%; margin-left:0; margin-right:0; }
    .grid-container .column.two.nospace { width:16.66666666666667%; margin-left:0; margin-right:0; }
    .grid-container .column.three.nospace { width:25%; margin-left:0; margin-right:0; }
    .grid-container .column.four.nospace { width:33.33333333333334%; margin-left:0; margin-right:0; }
    .grid-container .column.five.nospace { width:41.66666666666667%; margin-left:0; margin-right:0; }
    .grid-container .column.six.nospace { width:50%; margin-left:0; margin-right:0; }
    .grid-container .column.seven.nospace { width:58.33333333333334%; margin-left:0; margin-right:0; }
    .grid-container .column.eight.nospace { width:66.66666666666667%; margin-left:0; margin-right:0; }
    .grid-container .column.nine.nospace { width:75%; margin-left:0; margin-right:0; }
    .grid-container .column.ten.nospace { width:83.33333333333334%; margin-left:0; margin-right:0; }
    .grid-container .column.eleven.nospace { width:90.66666666666667%; margin-left:0; margin-right:0; }
    .grid-container .column.twelve.nospace { width:100%; margin-left:0; margin-right:0; }

/*	--------------------------------------------------
	:: Grid Columns for 768px and below
	-------------------------------------------------- */
	
	@media only screen and (max-width: 768px) {
	
	    .grid-container .column.one,
		.grid-container .column.two,
		.grid-container .column.three,
		.grid-container .column.four,
		.grid-container .column.five,
		.grid-container .column.six,
		.grid-container .column.seven,
		.grid-container .column.eight,
		.grid-container .column.nine,
		.grid-container .column.ten,
		.grid-container .column.eleven,
		.grid-container .column.twelve {
			margin:0;
		}
		
		.grid-container .column.one.nospace-left,
		.grid-container .column.two.nospace-left,
		.grid-container .column.three.nospace-left,
		.grid-container .column.four.nospace-left,
		.grid-container .column.five.nospace-left,
		.grid-container .column.six.nospace-left,
		.grid-container .column.seven.nospace-left,
		.grid-container .column.eight.nospace-left,
		.grid-container .column.nine.nospace-left,
		.grid-container .column.ten.nospace-left,
		.grid-container .column.eleven.nospace-lef,
		.grid-container .column.twelve.nospace-left { width:100%; }
		
		.grid-container .column.one.nospace-right,
		.grid-container .column.two.nospace-right,
		.grid-container .column.three.nospace-right,
		.grid-container .column.four.nospace-right,
		.grid-container .column.five.nospace-right,
		.grid-container .column.six.nospace-right,
		.grid-container .column.seven.nospace-right,
		.grid-container .column.eight.nospace-right,
		.grid-container .column.nine.nospace-right,
		.grid-container .column.ten.nospace-right,
		.grid-container .column.eleven.nospace-right,
		.grid-container .column.twelve.nospace-right { width:100%; }
		
		.grid-container .column.twelve.nospace-left.nospace-right { width:100%; }
	
	    .grid-container .column.one,
        .grid-container .column.two,
        .grid-container .column.three,
        .grid-container .column.four,
        .grid-container .column.five,
        .grid-container .column.six,
        .grid-container .column.seven,
        .grid-container .column.eight,
        .grid-container .column.nine,
        .grid-container .column.ten,
        .grid-container .column.eleven,
        .grid-container .column.twelve { width:100%; }
		
		.grid-container .column.one.nospace,
		.grid-container .column.two.nospace,
		.grid-container .column.three.nospace,
		.grid-container .column.four.nospace,
		.grid-container .column.five.nospace,
		.grid-container .column.six.nospace,
		.grid-container .column.seven.nospace,
		.grid-container .column.eight.nospace,
		.grid-container .column.nine.nospace,
		.grid-container .column.ten.nospace,
		.grid-container .column.eleven.nospace,
		.grid-container .column.twelve.nospace { width:100%; }
		
	}