.vypiscols {
	overflow: hidden;
}

/************************************************************************************
http://webdesignerwall.com/tutorials/responsive-column-layouts
COLUMN

POZOR POZOR

POZOR - zmenené - nastavené pre zobrazovanie grid4
*************************************************************************************/
.col {
	float: left;
	margin-left: 2.2%;
	margin-bottom: 2.2%;
}
.fullwidth .col {
	float: none;
	margin-left: 0;
}
/* grid4 col */
.grid4 .col {
	width: 23.35%;
}
/* grid3 col */
.grid3 .col {
	width: 31.2%;
}
/* grid2 col */
.grid2 .col {
	width: 48.4%;
}
/* clear col */
.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
	margin-left: 0;
	clear: left;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* reset cols to 3-column */
@media screen and (max-width: 1600px) {
	/* grid4 */
	.grid4 .col {
		width: 31.45%;
  	margin-left: 2.8%;
	  margin-bottom: 2.8%;
	}
	.grid4 .col:nth-of-type(4n+1) {
		margin-left: 2.8%;
		clear: none;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 0;
		clear: left;
	}
}

/* reset cols to 2-column */
@media screen and (max-width: 1280px) {
	/* grid4 */
	.grid4 .col {
		width: 48.5%;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 2.8%;
		clear: none;
	}
	.grid4 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}

	/* grid3 */
	.grid3 .col {
		width: 48.4%;
	}
	.grid3 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid3 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}
}

/* reset cols to fullwidth */
@media screen and (max-width: 1024px) {
	/* grid4 */
	.col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
}