@import url('https://fonts.googleapis.com/css?family=Lovers+Quarrel|Source+Sans+Pro|Yrsa');
p{font-family: 'Source Sans Pro', sans-serif;}
#info div h3{padding-top:10px; padding-bottom:0px; margin-bottom:0px; text-transform:uppercase; color:white; text-align:left}
#info div .buffet-time{color:white}
.buffet .fa{width:30px; margin:0 auto}
.buffet{margin-bottom:0px} 
.dollar{margin-bottom:10px}
#info{position:relative; top:-22px}
.icon-circle{padding: 20px;font-size: 30px; width: 70px;border-radius: 50%;text-decoration: none;background-color:#ddd;	display:block; margin: 0 auto}
.aboutus{float:left;padding:15px}
.title{   color: white;
    position: relative;
    top: 100px;
    text-align: center;
    width:100%;
	text-shadow: 2px 2px #bd1e1e;
	text-transform:uppercase; 

}
.box div ul{-webkit-padding-start: 20px}
.box{min-height:150px}
.side-box{padding:40px; background-color:white}
.deliveryfee{    
	border: 1px #ccc solid;
    padding: 20px;
    border-radius: 10px;
	margin-bottom:10px;
}
h5{font-size:16px}
#map_canvas{border:1px #aaa solid;}
#restaurant-name{margin:0}
#pitch{margin:0}
#main-photo{
    /* The image used */
    background-image: url("../images/pic1.jpg");
    /* Set a specific height */
    height: 575px; 
	background-repeat: no-repeat;
    background-size: cover;
    /* Create the parallax scrolling effect */
}

#restaurant-info{
	background-color: #bd1e1e;
	color:white;
	font-family: 'Titillium Web', sans-serif;
	height:60px;
	position:relative;
	z-index:1
}
#mobileSlides, #mobileDot{display:none}
.clear {
    clear:both;
    line-height:0;
}

.border{
	border:1px #eee solid;
	border-radius: 15px;
	margin-bottom:20px;
	padding: 0px 10px 5px
}


.freecontainer{
	width:90%;
	display:block;
	margin:0 auto;
	height:auto;
	color:white;
	background-color:#f97d01;
}

.note{font-size:90%; font-style:italic}
.hours p{font-family: 'Roboto' , san-serif;} 
.accept{
	text-align:center;
	font-family: 'Titillium Web', sans-serif;
	padding:15px 0px;
}


.rightside h4{
	text-align:center;
	font-family: 'Shadows Into Light Two', cursive;
	margin-bottom:2px
	
}

.free-table th{text-decoration:underline}

.rightside p{
	text-align:center;
	font-size:115%;
	font-family: 'Shadows Into Light Two', cursive;
}

h3{
	text-align: center;
}


.info-photo img{width:40%}

.dot, .myMobileDot{
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover, .myMobileDot:hover {
  background-color: #717171;
}

/* Fading animation */
.fadeSlide {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.left-delivery{width:50%; float:left}

.right-delivery{width:50%; float:left;}

.freeDelivery{display:block}

.topMargin{margin-top:30px}

.underline{text-decoration:underline}

.notbold{font-weight:normal}

.deliveryFee p{text-align:justify;}

@media only screen and (min-width: 1101px){
	.end{margin-bottom:50px}
	.phone a:link{color:white; text-decoration:none}
	.aboutus{width:calc( 60% - 50px);margin-left:50px; margin-top:30px}
	
	.info-photo img{margin-bottom:50px; margin-left:-50px; z-index:-1}
	.aboutus p, .deliveryFee p{font-size:110%; z-index:1; position:relative}
	.delivery-photo{float:left; margin:30px 0px 30px 50px}
	.delivery-photo img{width:300px}
	.delivery p{float:left; width:calc( 100% - 370px); padding:40px; margin:120px 0px 0px -20px; background-color:#bd1e1e; color:white}

	
}

@media only screen and (max-width: 1100px) {
	.delivery-photo{display:none}
	.info-photo img{padding-right: 0px;width:100% ;margin: 0;height:auto; padding:0px 40px}
	.aboutus{width:100%; padding:20px 40px}
	#main-photo{background-attachment: scroll;}
	.title{position:relative}
	.rightside{
		clear:both;
		width:100%;
		position:relative;
		padding-right:0px;
		padding-bottom:120px;
		height:auto;
	}
	.banners{
		border-top:1px grey solid;
		padding-top:25px;
		width:85%;
		margin:0 auto;}
		
	.single-banner{
		width: 33%; 
		float:left;
	}
	
	.bottom-left{
		margin-left:16.67%;
	}
	
	.bottom-right{
		margin-right:16.67%;
	}
	
	main{width:100%}
	.buffet-info {width:100%}		
}

@media only screen and (max-width: 767px) {
	.box{height:inherit}
	#restaurant-info{color:#bd1e1e}
	.mySlides{width:100%;}
	.single-banner{width: 100%; clear:both;}
	.bottom-left, .bottom-right{margin-left:0; margin-right:0}
	.border{
		border-top:1px purple solid;
		border-bottom:1px purple solid;	
		border-right:1px #e3e3e3 solid;
		border-left:1px #e3e3e3 solid;
		margin-top:50px;
		margin-bottom:50px;
		padding-right:20px;
		padding-left:20px;
		border-radius:0px;
	}
}

@media only screen and (max-width: 870px){
	div.hours.box, .takeoutInfo, .box{ height:inherit; float:none}
	.box{width: 90%; margin:50px auto; height:inherit}
	.menu, .middle{height: calc(100vh - 70px-22px);}
	.copyright{padding-bottom:20px}
	.copyright_div{padding-bottom:140px}	
}

@media only screen and (max-width: 767px) {
	.copyright_div{padding-bottom:80px}	
}

@media only screen and (max-width: 355px) {
	#restaurant-name{font-size: 50px}
}

@media only screen and (min-width: 396px){
	#main-photo{
    /* The image used */
    background-image: url("../images/pic5.jpg");
	}