
/**
 *
 * 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, .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: 10px;
}
.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 Queries */
/* ------------------------------------------------------------------------------*/


@media only screen and (min-width: 1250px) { /*  large screen  */
	.main-wrap {
		max-width: 1240px;
	}
	.inner  {
		padding: 15px;
	}
	.grid-pad {
		padding: 20px;
	}

}
/*
@media only screen and (max-width: 960px) {
	.grid, .inline-grid {
		max-width: 960px;
	}
	.inner {
		padding: 5px;
	}
	.grid-pad {
		padding: 10px;
	}

}
*/
@media handheld, only screen and (max-width: 980px) { /*  tablet  */

	.hide-on-tablet {
		display: none !important;
	}
	.show-on-tablet {
		display: block !important;
	}
	.grid, .inline-grid {
		width: 100%;
		min-width: 0;
		margin-left: 0;
		margin-right: 0;
	}
	.inner, .list.inner {
		padding: 10px;
	}
	.col, .col-1-1, .col-2-3, .col-1-2, .col-1-3, .col-1-4, .col-1-5, .col-1-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-5-6, .col-3-4, .col-5-12, .col-7-12 {
		width: auto;
		float: none;
		clear: both;
		margin: 0;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	.t-1-2, .t-1-3, .t-2-3, .t-1-4, .t-1-5, .t-1-6 {
		float: left;
		clear: none;
	}
	.inline-grid .t-1-2, .inline-grid .t-1-3, .inline-grid .t-2-3, .inline-grid .t-1-4, .inline-grid .t-1-5, .inline-grid .t-1-6 {
		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%; }

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	.col, .col-1-1, .col-2-3, .col-1-2, .col-1-3, .col-1-4, .col-1-5, .col-1-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-5-6, .col-3-4, .col-5-12, .col-7-12 {
		width: auto;
		float: none;
		clear: both;
		margin: 0;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	.t-1-2, .t-1-3, .t-2-3, .t-1-4, .t-1-5, .t-1-6 {
		float: left;
		clear: none;
	}
	.inline-grid .t-1-2, .inline-grid .t-1-3, .inline-grid .t-2-3, .inline-grid .t-1-4, .inline-grid .t-1-5, .inline-grid .t-1-6 {
		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%; }

	.t-1-3:nth-child(4n) {
		clear: left;
	}

}

@media handheld, only screen and (max-width: 640px) { /*  mobile  */
	.hide-on-mobile {
		display: none !important;
	}
	.show-on-mobile {
		display: block !important;
	}

	.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%;
	}
	.m-1-2, .m-1-3, .m-1-4 {
		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%;
	}

}
