html {
	font-family: 'Roboto', sans-serif;
}
body {
	margin: 0;
	background-color: white;
}
#wrapper {
	height: 150px;
	background: url("images/header-background.png") repeat-x center bottom;
	text-align: center;
}
#logo {
	display: inline-block;
	width: 472px;
	height: 73px;
	margin-top: 21px;
	margin-left: 3px;
	background: no-repeat center url("images/logo-radomirka.png");
	background-size: contain;
}
#title {
    margin: auto;
	width: 200px;
	height: 110px;
	margin-top: 25px;
	background-image: url("images/ready-salads-logo.png");
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#row {
	width: 100%;
	margin: auto;
	display: block;
	text-align: center;
}

#first {
	width: 28%;
	margin: auto;
	margin-top: 30px;
	padding-top: 27%;
	padding-bottom: 6%;
    background-image: url("images/stitch-blue.png"), url("images/salads-snejanka-1200.jpg");
    background-position: center bottom 30px, center top;
    background-repeat: no-repeat, no-repeat;	
	background-size: 30px 29px, 100%;
	text-align: center;
}
#second {
	width: 28%;
	margin: auto;
	margin-top: 30px;
	padding-top: 27%;
	padding-bottom: 6%;
    background-image: url("images/stitch-red.png"), url("images/salads-ruska-1200.jpg");
    background-position: center bottom 30px, center top;
    background-repeat: no-repeat, no-repeat;	
	background-size: 30px 29px, 100%;
	text-align: center;
}
#third {
	width: 28%;
	margin: auto;
	margin-top: 30px;
	padding-top: 27%;
	padding-bottom: 6%;
    background-image: url("images/stitch-green.png"), url("images/salads-trakiiska-1200.jpg");
    background-position: center bottom 30px, center top;
    background-repeat: no-repeat, no-repeat;	
	background-size: 30px 29px, 100%;
	text-align: center;	
	clear: right;
}
#forth {
	width: 28%;
	margin: auto;
	margin-top: 30px;
	padding-top: 27%;
	padding-bottom: 6%;
    background-image: url("images/stitch-orange.png"), url("images/salads-zmm-1200.jpg");
    background-position: center bottom 30px, center top;
    background-repeat: no-repeat, no-repeat;	
	background-size: 30px 29px, 100%;
	text-align: center;
}
h1 {
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
}
#first h1 {
	color: #009fe1;
}
#second h1 {
	color: #cc2229;
}
#third h1 {
	color: #6da651;
}
#forth h1 {
	color: #f56443;
}
#footer {
	position: relative;
	clear: both;
	height: 129px;
	background-image: url("images/footer-background.png");
	text-align: center;
}
#footer h2 {
	padding-top: 27px;
	color: white;
	font-size: 20px;
}
@media only screen and (min-width: 1000px) {
	#row {
		width: 100%;
	}
	#first {
		margin-left: 4%;
		margin-right: 4%;
		float: left;
	}
	#second {
		margin-right: 4%;
		float: left;
	}
	#third {
		margin-right: 4%;
		float: left;
	}
	#forth {
		margin-left: 4%;
		margin-right: 4%;
		float: left;
	}
}
@media only screen and (min-width: 700px) and (max-width: 1000px) {
	#row {
		width: 100%;
	}
	#first, #second, #third, #forth {
		width: 56%;
		height: 90%;
		padding-top: 53%;
		padding-bottom: 12%;		
		margin-left: 23%;
		margin-right: 23%;
	}
}
@media only screen and (min-width: 400px) and (max-width: 700px) {
	#row {
		width: 100%;
	}
	#first, #second, #third, #forth {
		width: 72%;
		height: 110%;
		padding-top: 67%;
		padding-bottom: 15%;		
		margin-left: 14%;
		margin-right: 14%;
	}
}
@media only screen and (max-width: 400px) {
	#row {
		width: 100%;
	}
	#first, #second, #third, #forth {
		width: 92%;
		height: 150%;
		padding-top: 88%;
		padding-bottom: 20%;		
		margin-left: 4%;
		margin-right: 4%;
	}
}
@media only screen and (max-width: 500px) {
	#wrapper {
		background-image: url("images/header-background.png");
		background-repeat: repeat-x;
		background-position: center bottom;
		background-size: 28%;
	}
	#logo {
		width: 90%;
		height: 73px;
	}
	#footer h2 {
		font-size: 16px;
	}
}
@media only screen and (max-width: 400px) {
	#logo {
		width: 300px;
		height: 73px;
	}
	#footer h2 {
		font-size: 12px;
	}
}