.osection {
	
	width: 100%;
	margin-bottom: 200px;
	
}

.osection.losowe {margin-bottom: 0;}

.osection article {float: left; width: 24%; margin-right: 1%; margin-bottom: 1%; height: 300px; position: relative; overflow: hidden;}
.osection article img {max-width: 100%; width: 100%; height: auto;}
.osection article:nth-of-type(4n+1) {clear: left;}

.osection article figcaption {position: absolute; width: 100%; height: 40%; left: 0; bottom: 0; padding: 15px; background-color: #ffffff; border: 1px solid #e9e9e9;}
.osection article h3 {font-size: 15px; color: #000000; font-weight: 600;}
.osection article p {font-size: 13px; color: #666666; font-weight: 300;}
.osection article p strong {font-weight: 400; color: #000000;}

.osection article:hover {cursor: pointer;}
.osection article a {display: inline-block !important; height: 100%;}
.osection article:hover h3 {color: #23b249;}

.osection .quadrant {width: 24%; margin-right: 1%; margin-bottom: 1%; float: left;}

.osection .quadrant > div.media {font-size: 12px !important; line-height: 15px !important;}

.osection .quadrant input[type="submit"] {width: 100%;}

.singleoffer img {width: 100%; max-width: 100%; height: auto;}
.offerinfo {float: left; width: 75%; padding: 20px 30px; font-weight: 300;}
.offerinfo strong {color: #000000; font-weight: 400;}
.offerinfo .offerdesc {padding: 20px 0px; font-size: 14px; color: #333333; font-weight: 300;}


@media (max-width: 1024px) {
	
.osection .quadrant {
	width: 49%;
}

.osection article {
	
	width: 49%;
	height: 300px;
	
}

.osection .quadrant.singleoffer {width: 24%;}
.offerinfo {width: 65%; padding: 20px 0px 20px 10px;}
	
	
	
}

@media (max-width: 600px) {
	
.osection article {height: 250px;}
	
.osection article figcaption {
	
	height: 50%;
	bottom: auto;
	top: 40%;
	
}

.osection article h3 {
	font-size: 12px;
}

.osection article p {
	
	font-size: 12px;
	
}


}

@media (max-width: 400px) {
	
	.osection article figcaption {
			top: 35%;
		}
	
}