/* general */
html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

/* clearfix */
.group:before, .container:before,
.group:after, .container:after {
	content: " ";
	display: table;
}

.group:after, .container:after {
	clear: both;
}

body {
	font-size: 2em;
	text-align: center;
}

img {
	width: 100%;
	max-width: 100%;
	vertical-align: middle;
}

h1.text-muted {
	color: #57aec1; /* questionable */
	/*opacity: .7;*/
}

a {
	text-decoration: none;
}

strong {
	color: #f9c029;
	font-weight: normal;
}

.container {
	max-width: 1120px;
	margin: 0 auto;
}

pre {
	text-align: left;
}


article {
	color: #fff;
	font-size: 17px;
	font-weight: normal;
	background: #9F3FA3;
	border-radius: 9px;
	margin-bottom: 25px;
	/*min-height: 320px;*/

	float: left;
	width: 19.2%;

	padding: 40px 14px;
	margin-right: 1%;
}

article h4 {
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 15px;
}

article p {
	/*margin-bottom: 0;*/
	font-weight: 300;
}

article a,
article a:hover {
	color: #fff;
}

article:nth-child(1) { background: #3b9ae1; }
article:nth-child(2) { background: #f6be00; }
article:nth-child(3) { background: #e64134; }
article:nth-child(4) { background: #eb70b1; }
article:nth-child(5) { background: #0f1a5f; margin-right: 0; }


.comments {
	height: 40px;
	line-height: 37px;
	width: 40px;
	background: url('chat_b.svg') 0 0 no-repeat;
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 0;
	font-weight: 600;
	font-size: 15px;
}



/* media queries */
@media screen and ( max-width: 820px ) {

	article {
		width: 49.5%; /* 2 elementy su vedla seba, to je 100%, ale medzi nimi je 1% margin, cize 99/2 = 49.5% */
		margin-bottom: 1%;
		min-height: 260px; /* uz mozu byt o nieco nizsie */
	}

	article:nth-child(2),
	article:nth-child(3) {
		margin-right: 0; /* pri druhom a tretom elemente nechceme pravy margin, lebo teraz su na kraji */
	}

	article:nth-child(3) {
		width: 100%; /* treti element je na cely riadok */
	}

}

@media screen and ( max-width: 560px ) {

	article {
		/* uz ziadne marginy */
		margin-right: 0;

		/* elementy budu na celu sirku, pod sebou, ziadne floaty */
		width: 100%;
		float: none;

		/* uz im nebudeme nastavovat minimalnu vysku */
		min-height: 0;
	}

}