

body {
	background-color: #1d2329;
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	color: #f7f3f3;
}
/** HEADER **/
#header-nav {
background-color: #f54e4e;
border-radius: 0;
height: 160px;

border: 0;
}
#logo-img {
	background: url('../images/logo.webp') no-repeat;
	width: 150px;
	height: 150px;
	margin:5px 5px 5px 5px;

	background-size: cover;
	background-position: center;
	border-radius: 50%;

}
.navbar-brand{
	padding-top: 25px;	
}
.navbar-brand h1{ /* Restaurant name */
	color: #f7f3f3;
	font-weight: bold;
	text-shadow: 5px 5px 5px #222;
	margin-top: 0;
	margin-bottom: 0;
} 
.navbar-brand a:hover,.navbar-brand a:focus{
	text-decoration: none;
}
.navbar-brand p{ /* Authentic taste of spices */	
	font-style: italic;
	color: #f7f3f3;
	text-shadow: 2px 2px 2px #222;
	margin-top: 10px;
}
#nav-list{
	margin-top: 10px;
	padding-right: 0px;
	background-color: #f54e4e;
	;
}
#nav-list a{
	color: #0c0c0c;
	text-align: center;

}
#nav-list a:hover {
		background: #f9f1f1;
}
#nav-list a span{
	font-size: 1.8em;
}
#phone {
	margin-top: 5px;

	
}
#phone a{/* Phone number */
	text-align: right;
	padding-bottom: 0;
}
#phone div { /* We Deliver */
	color: #0c0c0c;
	text-align: right;
	font-style: italic;
	 

}

.navbar-default .navbar-toggle .icon-bar {
    background-color: black;
}
.navbar-header button.navbar-toggle,.navbar-toggle .iconbar {
	border: 1px solid #343a40;
}
.navbar-header button.navbar-toggle {
	clear: 	both;	
	margin-top: -10px;
}
/* END HEADER */
/*footer*/
.panel-footer{
	margin-top: 30px;
	padding-top: 35px;
	padding-bottom: 30px;
	background-color: #000000;
	border-top: 0;
	color: #fffdfd;
}
.pannel-footer div.row{
	margin-bottom: 35px; 
}
#hours, #address{
	line-height: 2;
}
#hours >span, #address > span{
	font-size: 1.3em;
}
#address p{
	color:#557c3e;
	font-size: .8em;
	line-height: 1.8;
}
#testimonials{
	font-style: italic;
}
#testimonials p:nth-child(2) {
	margin-top: 25px;
}


/* home page  */
.container .jumbotron{
	box-shadow: 0 0 50px #222;
		border: 2px solid #222;
		 
}
#menu-tile, #specials-tile,#map-tile{
	height: 250px;
	width: 100%
	margin-bottom :15px;
	position: relative;
	border: 2px solid black;
	overflow: hidden;

}
#menu-tile:hover, #specials-tile:hover, #map-tile:hover{
	box-shadow: 0 1px 5px 1px #cccccc;
}
#menu-tile{
	background: url('../images/menu.jpg');
	background-position: center;
	background-size: cover;
}
#specials-tile{
	background: url('../images/specials.jpg');
	background-position: center;
	background-size: cover;
}
#menu-tile span,#specials-tile span,#map-tile span{
	position: absolute;
	width: 100%;
	bottom:0; 
	right: 0;
	text-align:center;
	font-size: 1.6em;
	background-color:black;	
	opacity:.8;
	color:#f7f3f3;
}

/* menu categories page */
.category-tile{
	position: relative;
	border: 2px solid black;
	height: 198px;
	width: 198px;
	margin:0 auto 20px;
	overflow: hidden;


}
.category-tile span{
	position: absolute;
	width: 100%;
	bottom:0; 
	right:0;
	text-align:center;
	font-size: 1.6em;
	background-color:black;	
	opacity:.8;
	color:#f7f3f3;
}
.category-tile:hover{
	box-shadow: 5px 5px 5px 5px black;
}
#menu-categories-title {
	margin-bottom: 50px;
	color: #f7f3f3;
}
/* singe category page*/
.menu-item-tile{
	margin-bottom: 25px;.
}
.menu-item-tile  hr{
	width: 80%;
}
.menu-item-tile .menu-item-price {
	font-size: 1.1em;
	text-align: right;
	margin-top: -15px;
	margin-right: -15px;


}
.menu-item-tile .menu-item-price span{
	font-size: .6em;
}
.menu-item-photo {
	position: relative;
	border: 2px solid black;
	overflow:hidden;
	padding: 0;
	margin-right: -15px;
	margin-left: auto;
	margin-bottom: 20px;
	max-width: 250px;
	background-size: cover;
	
}
.menu-item-photo div {
	position: absolute;
	bottom: 0;
	right: 0;
	width:80px;
	background-color: red;
	text-align: center;
	border-radius: 50%

}

.menu-item-description{
	padding-right: 30px;
	
}
h3.menu-item-title{
	margin:0 0 10px;
}
.menu-item-details{
	font-size: .9em;
	font-style: italic;
}
/*end home page*/

/********** Large devices only **********/
@media (min-width: 1200px) {
	.container .jumbotron {
		background:url('../images/2.jpg')no-repeat;
		background-size: cover;
		height: 450px;
		
	}

}

/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
	.container .jumbotron {

		background:url('../images/2.jpg')no-repeat;
		background-size: cover;
		height: 558px;
  	}
  }
  /********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
	#nav-list{
		margin-top: 25px;

	}
	.container .jumbotron {

background:url('../images/2.jpg')no-repeat;
		background-size: cover;
		height: 432px;
  	}

}
/********** Extra small devices only **********/
@media  (max-width: 767px) {
	.container .jumbotron {
		background-size: contain;
		background: no-repeat;
		overflow: hidden;
		height: 250px;
  	}
	.navbar-brand{
		padding-top: 10px;
		

	}
	.navbar-brand h1{
		padding-top: 10px;
		font-size: 7vw;
		text-shadow: 2px 2px 2px #222;
		margin-top: 10px;
		
	}
	.navbar-brand p{
		font-size: .6em;
		margin-top: -5px;
		margin-bottom: 20px;
	}
	#header-nav{
		height: 120px;
	}
	#collapsable-nav a{
	font-size: 1.2em;
	}
	#collapsable-nav a span{
		font-size: 1em;
		margin-right: 5px;
	}
	
	#call-btn > a {
		font-size: 1.5em;
		color:  #f7f3f3;
		display: block;
		margin: 0 20px;
		padding: 10px;

		border: 2px solid black;
		background-color: #f54e4e;

		
	}
	#xs-deliver {
		margin-top: 5px;
		color:  #f7f3f3;
		font-size: .7em;
		letter-spacing: .1em;
		text-transform: uppercase;

	}
	.panel-footer section{
		 margin-bottom: 30px;
		 text-align: center;
	}
	.panel-footer section:nth-child(3){
		margin-bottom: 0;
	}
	.panel-footer section hr{
		width: 50%;
	}
	.container .jumbotron{
		margin-top: 30px;
		padding: 0px;

	}
	#menu-tile,#specials-tile{
		width: 360px;
		margin: 0px auto 15px;
	}
	.menu-item-photo {
		margin-right: auto;
	}
	.menu-item-tile .menu-item-price{
		text-align: center;
	}
	.menu-item-description{
		text-align: center;
	}
}

@media (max-width: 388px) {
	#menu-tile, #specials-tile {
		width: 280px;
		margin: 0 auto 15px;

	}
	.navbar-brand h1 {
		padding-top: 5px;
		font-size: 9vw;
	}
	.col-xxs-12 {
		position: relative;
		min-height: 1px;
		padding-right: 15px;
		padding-left: 15px;
		float: left;
		width: 100%;
	}
	
	}
}
 