/* ===========================================
Custom Grid system 
12 column grid each column is 60px + 20px gutter 
target (60px) / context (960px) * 100 to get percent = result
=========================================== */

/* Global
===========================================*/

.grid-container {
	/*padding-left: 0.9375rem;
    padding-right: 0.9375rem;*/
	margin: 0 auto 0 auto;
}

.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%;
}


* html .cf {
	height: 1%;
}

.cf {
	display: block;
}


.left{
	float: left;
}

.right{
	float: right;
}


/* Grid >> IE Last Child Fix, Alpha = First Child & Omega = Last Child
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

@media screen and  (min-width: 1px) and (max-width: 659px){
	.grid-container > [class^="grid-"] {
		min-height: 1px;		
    padding-left:2%;
    padding-right:2%;

	} 

	.no-padding {
		padding: 0;
	}


	.hide-mobile{
		display: none;
	}
}

@media screen and (min-width:660px){

	.hide-large{
		display: none;
	}

	/* Columns
	===========================================*/

	.grid-container > [class^="grid-"] {
		float: left;
		min-height: 1px;
		padding: 0 1%;
		margin-left: 0;
    margin-right: 0;
		-webkit-transition: all 0.2s ease;
		 -moz-transition: all 0.2s ease;
		 -o-transition: all  0.2s ease;
		 -ms-transition: all 0.2s ease;
		 transition: all 0.2s ease;
	}

	
    .grid-container > [class^="grid-"]:first-child{
		margin-left: 0;
	}


	.grid-container > [class^="grid-"]:last-child{
		/*float:right;*/
		margin-right:0;
	}

	/*.grid-container > [class^="grid-"]:last-child{
		float:right;
	}*/

	.grid-1 { 
		width:8.333%;
	}
	.grid-2{ 
		width:16.667%;
	}
	.grid-3{
		width:25.0%;
	}
	.grid-4 {
		width:33.333%;
	}
	.grid-5 {
		width:41.667%;
	}
	.grid-6 {
		width:50.0%;
	}
	.grid-7 {
		width:58.333%;
	}
	.grid-8 {
		width:66.667%;
	}
	.grid-9 {
		width:75.0%;
	}
	.grid-10 {
		width:83.333%;
	}
	.grid-11 {
		width:91.667%;
	}
	.grid-12 {
		width:100%;
	}

  .push-0 {
    position: relative;
    left: 0%;
    right: auto; }

  .pull-0 {
    position: relative;
    right: 0%;
    left: auto; }

  .push-1 {
    position: relative;
    left: 8.33333%;
    right: auto; }

  .pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto; }

  .push-2 {
    position: relative;
    left: 16.66667%;
    right: auto; }

  .pull-2 {
    position: relative;
    right: 16.66667%;
    left: auto; }

  .push-3 {
    position: relative;
    left: 25%;
    right: auto; }

  .pull-3 {
    position: relative;
    right: 25%;
    left: auto; }

  .push-4 {
    position: relative;
    left: 33.33333%;
    right: auto; }

  .pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto; }

  .push-5 {
    position: relative;
    left: 41.66667%;
    right: auto; }

  .pull-5 {
    position: relative;
    right: 41.66667%;
    left: auto; }

  .push-6 {
    position: relative;
    left: 50%;
    right: auto; }

  .pull-6 {
    position: relative;
    right: 50%;
    left: auto; }

  .push-7 {
    position: relative;
    left: 58.33333%;
    right: auto; }

  .pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto; }

  .push-8 {
    position: relative;
    left: 66.66667%;
    right: auto; }

  .pull-8 {
    position: relative;
    right: 66.66667%;
    left: auto; }

  .push-9 {
    position: relative;
    left: 75%;
    right: auto; }

  .pull-9 {
    position: relative;
    right: 75%;
    left: auto; }

  .push-10 {
    position: relative;
    left: 83.33333%;
    right: auto; }

  .pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto; }

  .push-11 {
    position: relative;
    left: 91.66667%;
    right: auto; }

  .pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto; 
	} 

	/* Clearfix
	===========================================*/
	.cf:after,
	.grid-container:after{
		content:" ";
		display: table;
		clear: both;
	}

}


@media screen and (min-width:1140px){
	.grid-container{
		max-width: 1140px;
	}

}