html {
	font-family: 'Roboto', sans-serif;
}
body {
	margin: 0;
	background-color: white;
}
#wrapper {
	height: 200px;
	background-color: #b1d7f5;
	background-image: url("images/header-wave.png"), url("images/header-image.jpg");
    background-position: center top, calc(50% + 260px) top;
    background-repeat: no-repeat, no-repeat;	
	background-size: 5000px, 760px;
	text-align: center;
}
#logo {
	display: inline-block;
	width: 100%;
	height: 80px;
	margin-top: 30px;
	background-image: url("images/logo-meraki.png");
    background-position: calc(50% - 37.5%) top;
    background-repeat: no-repeat;	
	background-size: contain;
}

.row {
	width: 100%;
	margin: auto;
	display: block;
	text-align: center;
}
#first, #second, #third {
	width: 28%;
	margin: auto;
	margin-top: 30px;
	padding-top: 27%;
	padding-bottom: 6%;
	text-align: center;
}
#one #first {
    background-image: url("images/salads-tzatziki-800.jpg");
    background-position: center top;
    background-repeat: no-repeat;	
	background-size: 100%;
}
#one #second {
    background-image: url("images/salads-tirokafteri-800.jpg");
    background-position: center top;
    background-repeat: no-repeat;	
	background-size: 100%;
}
#one #third {
    background-image: url("images/salads-melitzano-salata-800.jpg");
    background-position: center top;
    background-repeat: no-repeat;	
	background-size: 100%;
	clear: right;
}
#two #first {
    background-image: url("images/salads-tirokafteri-800.jpg");
    background-position: center top;
    background-repeat: no-repeat;	
	background-size: 100%;
}
#two #second {
    background-image: url("images/salads-melitzano-salata-800.jpg");
    background-position: center top;
    background-repeat: no-repeat;	
	background-size: 100%;
	clear: right;
}
h1 {
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
}
#one #first h1 {
	color: #0083c9;
}
#one #second h1 {
	color: #d04832;
}
#one #third h1 {
	color: #674d68;
}
#two #first h1 {
	color: #488523;
}
#two #second h1 {
	color: #ac3482;
}
.row h2 {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	margin: 2px;
	padding: 0;
}
.row p {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	margin: 2px;
	padding: 0;
}
#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%;
	}
	#one #first {
		margin-left: 4%;
		margin-right: 4%;
		float: left;
	}
	#one #second {
		margin-right: 4%;
		float: left;
	}
	#one #third {
		margin-right: 4%;
		float: left;
	}
	#two #first {
		margin-left: 18%;
		margin-right: 4%;
		float: left;
	}
	#two #second {
		margin-right: 18%;
		float: left;
	}
}
@media only screen and (min-width: 700px) and (max-width: 1000px) {
	.row {
		width: 100%;
	}
	#first, #second, #third {
		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 {
		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 {
		width: 92%;
		height: 150%;
		padding-top: 88%;
		padding-bottom: 20%;		
		margin-left: 4%;
		margin-right: 4%;
	}
}
@media only screen and (max-width: 1000px) {
	#wrapper {
		background-position: calc(50% + 120px) top, calc(50% + 400px) top;
	}
}
@media only screen and (max-width: 540px) {
	#logo {
		margin-top: 120px;
		background-position: calc(50% - 20px);
		background-size: 140px;
	}
}
@media only screen and (min-width: 540px) and (max-width: 650px) {
	#logo {
		margin-top: 30px;
		background-position: calc(50% - 170px) top;
		background-size: 180px;
	}
}
@media only screen and (min-width: 650px) and (max-width: 1000px) {
	#logo {
		margin-top: 30px;
		background-position: calc(50% - 190px) top;
		background-size: 180px;
	}
}
