
/**
 *
 * OKIA GRID v1.0
 * Developed by Kristo Vaarmari & Tauno Hanni
 * www.okia.ee
 *
 */

.grid, .inline-grid, .col, .col-1-1, .col-2-3, .col-1-2, .col-1-3, .col-1-4, .col-1-5, .col-1-6, .col-5-6, .col-1-8,
.col-3-8, .col-5-8, .col-1-10, .col-3-10, .col-2-5, .col-3-5, .col-7-10, .col-8-10,
.col-9-10, .col-1-12, .col-10-12, .col-11-12, .col-3-4, .col-5-12, .col-7-12 {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.inline-grid .col, .inline-grid .col-1-1, .inline-grid .col-2-3, .inline-grid .col-1-2, .inline-grid .col-1-3, .inline-grid .col-1-4,
.inline-grid .col-1-5, .inline-grid .col-1-6, .inline-grid .col-5-6, .inline-grid .col-1-8,
.inline-grid .col-3-8, .inline-grid .col-5-8, .inline-grid .col-1-10, .inline-grid .col-3-10, .inline-grid .col-2-5,
.inline-grid .col-3-5, .inline-grid .col-7-10, .inline-grid .col-8-10,
.inline-grid .col-9-10, .inline-grid .col-1-12, .inline-grid .col-10-12, .inline-grid .col-11-12,
.inline-grid .col-3-4, .inline-grid .col-5-12, .inline-grid .col-7-12 {
	float: none !important;
	display: inline-block;
	font-size: 13px;
	line-height: 1;
	vertical-align: top;
}

.grid .col, .grid .col-1-1, .grid .col-2-3, .grid .col-1-2, .grid .col-1-3, .grid .col-1-4, .grid .col-1-5, .grid .col-1-6,
.grid .col-5-6, .grid .col-1-8, .grid .col-3-8, .grid .col-5-8, .grid .col-1-10, .grid .col-3-10, .grid .col-2-5,
.grid .col-3-5, .grid .col-7-10, .grid .col-8-10, .grid .col-9-10, .grid .col-1-12, .grid .col-10-12, .grid .col-11-12, .grid .col-3-4,
.grid .col-5-12, .grid .col-7-12 {
	float: left;
	margin: 0;
}
.grid {
	max-width: 1200px;
	/*background-color: rgba(0,0,0,.1);*/
}
.grid, .inline-grid {
	margin: 0 auto;
}
.inline-grid {
	width: 100%;
	font-size: 0px;
	line-height: 1;
}
.grid-pad {
	padding:15px;

}
.grid:after, .inline-grid:after {
	content: " ";
	display: table;
	clear: both;
}
.inner {
	margin: 0;
	padding: 15px;
}
.show-on-tablet, .show-on-mobile  {
	display: none !important;
}

.inline-grid .pull-right {
	float: right !important;
}

/* => Cols */
/* ------------------------------------------------------------------------------*/

.col-1-1	{ width: 100%;		}
.col-2-3	{ width: 66.667%;	}
.col-1-2	{ width: 50%;		}
.col-1-3	{ width: 33.3334%;	}
.col-1-4	{ width: 25%;		}
.col-1-5	{ width: 20%;		}
.col-1-6	{ width: 16.667%;	}
.col-1-8	{ width: 12.5%;		}
.col-3-8	{ width: 37.5%;		}
.col-5-8	{ width: 62.5%;		}
.col-1-10	{ width: 10%;    	}
.col-3-10	{ width: 30%;    	}
.col-2-5	{ width: 40%;    	}
.col-3-5	{ width: 60%;    	}
.col-7-10	{ width: 70%;    	}
.col-8-10	{ width: 80%;    	}
.col-9-10	{ width: 90%;    	}
.col-1-12	{ width: 8.3334%;	}
.col-10-12	{ width: 83.334%;	}
.col-11-12	{ width: 91.667%;	}
.col-5-6	{ width: 83.3337%;	}
.col-3-4	{ width: 75%;		}
.col-5-12	{ width: 41.667%;	}
.col-7-12	{ width: 58.334%;	}

@media only screen and (max-width: 1024px) {
	.grid, .inline-grid { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }
	.inner, .list.inner { padding: 10px; }
	.col, *[class*='col-']{ float: none; clear: both; margin: 0; width: 100%; padding-left: 0; padding-right: 0; }
	*[class*='t-'] { float: left; clear: none; }
	.inline-grid *[class*='t-'] { display: inline-block; line-height: 1; font-size: 13px; clear: none; }
	.t-2-3 { width: 66.667%; }
	.t-1-2 { width: 50%;     }
	.t-1-3 { width: 33.33%;  }
	.t-1-4 { width: 25%;     }
	.t-1-5 { width: 20%;  	 }
	.t-1-6 { width: 16.667%; }

	/* Visibility classes */
	.hide-on-tablet { display: none !important; }
	.show-on-tablet { display: block !important; }
	.show-on-mobile { display: none !important; }
}

@media only screen and (max-width: 640px) { /* mobile */
	.grid { width: 100%; }
	.t-1-2, .t-1-3, .t-2-3, .t-1-4, .t-1-5, .t-1-6 { display: block; width: auto; float: none; clear: both; width: 100%; }
	*[class*='m-1'] { float: left; clear: none; }
	.inline-grid .m-1-2, .inline-grid .m-1-3 { display: inline-block; float: none; line-height: 1; font-size: 13px; }
	.m-1-2, .inline-grid .m-1-2 { width: 49%; }
	.m-1-3, .inline-grid .m-1-3 { width: 33.33%; }
	.m-1-4, .inline-grid .m-1-4 { width: 25%; }

	/* Visibility classes */
	.hide-on-mobile { display: none !important; }
	.show-on-mobile { display: block !important; }
}