﻿html{
	height:100%;
}
body{
	font-family:sans-serif;
	padding:0;
	margin:0;
	height:100%;
}

#home-logo-img{
	width:50px;
	margin:auto;
	display:block;
    padding:25px 10px 10px 10px;
}

#home-logo-text{
	width:auto;
	display:block;
	margin:auto;
	padding:25px;
	
}

/*===== HOME PAGE MENU =====*/

.body-home{
	background-image:url('images/background-01-port.png');
	background-position:center;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-size:cover;
	
}

.body-meals{
	background-image:url('images/background-02-port.png');
	background-position:center;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-size:cover;
	
}

/*========== HEADER ==========*/

.header{
	background-color:#2196f3;
	width:100%;
	height:50px;
	top:0;
	position:fixed;
	overflow:hidden;
	text-align:center;
}

.header i{
	float:left;
	padding:17px 0px 0px 17px;
	color:#ffffff;
}

.header img{
	width:150px;
	padding-top:14px;
	padding-right:25px;
}

/*========== HOME PAGE ==========*/

.home-menu-item{
	text-decoration:none;
	text-transform:uppercase;
	color:white;
	font-weight:bold;
	font-size:25px;
	text-align:center;
	border:5px white solid;
	display:block;
	margin:auto;
	margin-bottom:10px;
	width:80%;

}

/*========== MEALS PAGE ==========*/

#meals{
	padding-top:50px;
}

/*===== MEALS PAGE MENU =====*/

.meals-list a{
	text-decoration:none;
}
.meals-list-items{
	border:5px #1a1a1a solid;
	margin:10px;
	 
}
.meals-list-items h1{
	font-weight:bold;
	font-size:20px;
	padding-left:10px;
	color:#1a1a1a;
}

.meals-list-items i{
	float:right;
	color:#1a1a1a;
	padding-right:10px;
}


.meals-list-items p{
	font-size:15px;
	font-style:italic;
	color:#4d4d4d;
	margin-top:-7px;
	padding-left:10px;
	
}

/*========== RECIPE PAGE ==========*/

#recipe{
	padding-top:50px;
}


/*===== RECIPE DETAILS =====*/

.recipe-details img {
	width:100%;
}

.recipe-details h1{
	font-size:25px;
	text-align:center;
	border:5px #1a1a1a solid;
	margin:10px;
	padding:5px;
}

.recipe-details h2{
	font-size:20px;
	text-align:left;
	margin:0;
	margin-left:10px;
}
.recipe-details-info{
	margin-left:25px;
	margin-right:25px;
}

.recipe-details-info p{
	font-size:13px;
	display:inline-block;
}

.recipe-details-ingredients label{
line-height:25px;
margin-left:10px;
	
}

.recipe-details-steps{
	padding-top:20px;
}

.recipe-details-steps ol{
	padding-left:28px;
}

/*========== RESPONSIVE LAYOUT ==========*/

@media only screen and(min width:1500px){
	#meals{
	width:40%;
	margin:auto;
}
    #recipe{
	width:40%;
	margin:auto;

}
}

@media only screen and(min width:720px){
	.body-home{
	background-image:url('images/background-01-land.png');
}
    .body-meals{
    background-image:url('images/background-02-port.png');

	
}  
	

}






