/* ==================================================
   Grid
   ================================================= */
*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.row:after, .col:after{
	content: "";
	display: table;
	clear: both;
}
.row {
	clear: both;
	min-height: 1px;
}
/* Nested grid */
.row  > .row  {
	clear: none;
	float: left;
	margin: 0 !important;
}
/* Default col*/
.col {
	float:left;
	display: block;
	min-height: 1px;
	width: 100%;
}

.col100{
	width: 100%;
}
.col66{
	width: 66.66%;
}
.col50{/*col x2*/
	width: 50%;
}
.col33{ /*col x3*/
	width: 33.33%;
}
.col25{/*col x4*/
	width: 25%;
}
.col12{/*col x8*/
	width: 12.5%;
}
.col6{/*col x16*/
	width: 6.25%;
}

/* float */
.floatleft{
	float: left;
}
.floatright{
	float: right;
}

/*
http://arnaudleray.github.io/pocketgrid/docs/
gutter:
===================
option 1
.row { margin: -2px -6px; }
.col { padding: 2px 6px; }
===================
option 2
.row  { margin: -4px 0 0 -12px; }
.col { padding: 4px 0 0 12px; }
*/

/*custom style =========================================*/
.rowgutter{
	margin: -4px 0 0 -12px;
}
.colgutter{
	padding: 4px 0 0 12px;
}
/* modul=>row col modul */
.modul, .mod{
	border: 1px solid #ccc;
	height: 100px;
	text-align: center;
	background: #ccc;
}

/* ======================================================
   Media Queries
   ==================================================== */

/* standard 960 ========================================*/
@media only screen and (min-width: 960px) {
	.rowimg {
		margin: -20px;
	}
	.colimg {
		padding: 20px;
	}
}
/* Smaller than standard 960==============================*/
@media only screen and (max-width: 959px) {
}
/* All Mobile Sizes=======================================*/
@media only screen and (max-width: 767px) {
	.col50{
		width: 100%;
	}
	.col25{
		width: 50%;
	}
}
/* All Mobile Sizes=======================================*/
@media only screen and (max-width: 479px) {
	.col25{
		width: 100%;
	}
}