@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro|Yrsa|Yellowtail');
@import url('https://fonts.googleapis.com/css?family=Roboto|Shadows+Into+Light+Two|Titillium+Web');
.address a:link, .address a:hover{color:white; text-decoration:none}
#info h2, #delivery-information{margin:0px; text-align:center; padding: 40px 30px 10px; }
.white{color:white}
.red{color:#bd1e1e}
.copyright{color:#bd1e1e}
#wrapper{
			width:100%;
			min-height:100%;
			padding: 0px;
			top:0;
}
.deliveryDiv{width:220px; margin:0px auto; border-radius: 10px; padding:10px; height:300px}
#order_wrapper{top:100px; position:fixed;}
.phone_header, #menu_word, #phone_word{display:none}
.border.hours p{text-indent:10px} <!--changed-->
#info div, .box{padding:20px}
.copyright_div{position: relative; top: -22px;}
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 10000; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.hours h4, #contact_info h4, .box h4{margin-top:10px; text-align:left; text-transform:uppercase;}
#holidayclose{color:white}
/*::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {	display:none;}*/
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.hours p, .box ul li{text-align:left; margin-bottom:0px}
p.days{margin-bottom:0px}
h3{margin-top:10px}
#contact_info a:hover{text-decoration:none}
.info-box, .box{
	border:1px #e3e3e3 solid;
	margin:50px auto;
	padding-right:20px;
	padding-left:20px;
	border-radius:10px;
}

#info div hr{
	display:none
}

.logotext{
	float:left; 
	text-align:center;
	display:block;
	font-size:30px; 
	padding: 0px 8px ;
	color: white;
	position:fixed;


}


/* Modal Content/Box */
.modal-content {
	position: relative;
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s;
	background-color: #fefefe;
	margin: 80px auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	overflow-y: auto;
	max-width: 600px; /* Could be more or less, depending on screen size */
	max-height: 80%;
	
}

.bigModalSize{
	max-width: 600px; /* Could be more or less, depending on screen size */
	max-height: 80%;
}

.smallModalSize{
	width: ; /* Could be more or less, depending on screen size */
	max-height:600px
}


.modal-header {
    padding: 2px 16px;
    background-color: #4CAF50;
    color: white;
    margin-bottom: 10px;
	border-radius: 8px;
}

.header-mobile{
	display:none;
}

.Caveat{
	font-family: 'Caveat', cursive;
}

.border{
	border:1px grey solid;
	border-radius:10px;
}

.loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 20px;
  height: 20px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

div.border.hours{
	max-width:300px;
	margin:0 auto;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

html, body{
	margin:0px;
	padding:0px;
	height:100%;
	font-family: 'Roboto', sans-serif;
}

.TA_rated{
	margin:0px auto;
}

.leftside{
	width:20%;
	float:left;
	background-color:#2e3548;
	position:fixed;
	height:100vh;
	padding:0px;
	color:white;
	margin: 0px;
	left: 0px;
	padding-bottom:40px;
	overflow-y:auto;
	
}

.left{text-align:left;}

#free{float:left;}

.menu, .middle{
	margin:0 auto;
	height: calc(100vh - 70px);
	background-color:white;
	position: relative;
	overflow-y:scroll
}

#bottom{
	clear:both;
	width:100%;
	position:relative;
	top:-22px
}

nav{
	margin-top:15px;
}

.navmenu li:hover:not(.active), .navmenu li:hover:not(.active) a{
    background-color: #bd1e1e;
    color: white;
	border-radius:40px

}
.glyphicon{color:black}


.navmenu{
		padding:0px;
		margin:0px;

}

.navmenu li a{
			display:block;
			text-decoration:none;
			text-transform:uppercase;
			cursor: pointer;
			font-size:90%;
			padding:3px;
			color:#bd1e1e;
			
		}
		
		
.navmenu li {
		
			list-style-type:none;
			display:block;
			width:100%;
			color:white;
			text-indent: 30px;
			margin:0px;
			padding:0px;
}

.navmenu li.active {
		background-color:  #bd1e1e;
}

.navmenu li.active a{
	color: white;
	
}

.contactinfo {
	padding:15px;
	text-align:center;
}
.contactinfo a{
	color: white;
	text-decoration:none;
	padding-left:5px
}


.logoimage{
	display:block;
	margin:auto;
	height:50px;
	margin-top:15px
}


.delivery{
	padding-top:5px;
	margin:0 auto;
}

.closedHeader{
	text-transform: uppercase;
    text-align: center;
}

.90{font-size:90%}
.clear{clear:both; height:0px}
.copyright{
	clear:both;
	text-align:center;
	font-family: 'Roboto', sans-serif;
	margin:0px; 
	padding:10px 0px 40px;

}

footer{
	margin-top:30px;
}


.closedHours{
	border-top: 1px #ddd solid;
    padding: 5px;
	font-size:90%
}

.info{
	margin:0 auto;
}

#Checkout{display:none;}

p.endHolidays{
	margin-bottom:40px;
}

@media only screen and (min-width: 651px){
	#restaurant-info div{
		text-decoration:none;
		font-size:15px;
		text-transform:uppercase;
		cursor: pointer;
		font-family: 'Titillium Web', sans-serif;			
		padding:19px 5px;
		margin:0 20px;
		float:left;
		display:block;
	}
	#restaurant-info  .address{float:right}	
}


@media only screen and (max-width: 1100px) {
	.navmenu li:hover:not(.active), .navmenu li:hover:not(.active) a{background-color: #b32231;	border-radius:0px }
	header{display:none}
	.deliverybox{padding:20 0}
	#leftside{display:none}
	#order_wrapper{top: 70px; position:fixed}
	.menu, .middle{height: calc(100vh -22px);}
	.copyright{padding-bottom:20px}
	.copyright_div{padding-bottom:120px}
	.menuopen{width:300px; float:right; height:100%; background-color:white; }	
	div#onlineInfo{margin:0px 10% 50px; width:80%}	
	.navmenu li {padding-top:20px; padding-bottom:20px;}	.leftside{
		background-color:rgba(0,0,0,0.4);
		display:none;
		position: fixed; /* Stay in place */
		z-index: 3; /* Sit on top */
		width: 100%; /* Full width */
		overflow: auto; /* Enable scroll if needed */
		clear:both;
		padding:0px;
		top:0px;
		left:initial;
		right:0px;
	}	
	
	.leftpanel{	display:none;}	
	#wrapper{border:none;}	
	.header-mobile{	
		display:block;
		width:100%;
		position:fixed
	}
	.bars, .header-close{
		float:right;
		margin-top:20px; 
		padding-left:7px;
		margin-right:15px;
		color:#bd1e1e;
	}
	
	.header-close{
		font-size:200%;
		margin-top:5px;
	}	
	#menucollapse{float:right; top:0px; right:0px; position:fixed}	
	.banners h4{font-size:18px;}	
	#shopping-cart, .numberCircle{display:none}
	.box div ul{-webkit-padding-start: 40px}
}


@media only screen and (max-width: 767px) {
		::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {	display:none;}
		#order_wrapper{top: 70px; width:100%}
		.bars, .header-close{margin-top:8px}
		.modal-content{margin:5% auto }
		#online_menu{position:fixed; right:50px; margin-top:12px; padding: 2px 13px 21px;}
		.phone_header{display:block}
		#phone_word, #menu_word, #onlineMenu_word{position:fixed; font-size:8px; top:46px; text-align:center; width:40px;}
		#menu_word{display:block;  right:5px}
		#onlineMenu_word{display:block; right:52px; line-height:1}
		.fa-utensils, .fa-phone-square{font-size:25px; }
		#phone_word{display:block; right:99px;}		
		.menu, .middle{width:100%}
		.phone_header a:link {color:black; text-decoration:none}
		.bars{margin-top:15px; padding-left:7px; padding-top:4px}
		.menu, .middle{width:100%}
		#Checkout{display:block;}				
		#map_canvas{border:none}
		.leftside, .right-mobile{top:0px;}
		.leftside, .rightside{width:100%; height:100%; margin-bottom:50px}
		.leftside{background-color:rgba(0,0,0,0.4)}
		.menuopen{width:80%; float:right; height:100vh;}
		.info-box, .box, div.box.takeoutInfo, div.border{float:initial; width:90%; padding:5px 20px 10px; margin:0 auto 20px; height:initial}
		.info-box{width:250px}
		.deliveryFee{padding:15px 20px 10px}
		#info div h3{padding: 5px 0px}
		#shopping-cart{display:block;}
		.numberCircle{display:block; right:55px; top:30px; font-size:60%;}
		.numberCircle {position:absolute; border-radius: 50%;
			width: 15px;
			height: 15px;
			background: #fff;
			border: 1px solid #666;
			color: #666;
			text-align: center;
		}	
		main{width:100%}
		#myModal_holiday div div div.border.hours p{text-indent:0px}
		#myModal_holiday div div div.border.hours p.endHolidays{margin-bottom: 20px}
		#myModal_holiday div div div.border.hours{width:inherit; font-size:12px}
		.contactinfo{padding-bottom:120px;}
		.smallModalSize{
			width: 90%; /* Could be more or less, depending on screen size */
			max-height:90%
		}
		#phone_icon{
			display: block;
			position: fixed;
			right: 97px;
			margin-top: 12px;
			padding: 4px 10px 19px;
		}
		div#onlineInfo{margin-bottom:0px}
		#call_us{display:none}
		.box div ul{-webkit-padding-start: 20px}
		div.box.takeoutInfo{margin-bottom:100px}
		.address a{text-align: center; display: block;}
}

@media only screen and (min-width: 1101px) {
	.deliveryDiv{top:-22px}
	.menuopen{width:400px; float:right}
	header{display:block}
	#titleList{width:725px; float:left}
	.leftside{
		width:100%;
		position:fixed;
		height:90px;
		padding:0px;
		color:white;
		background-color:white;
		margin: 0px;
		left: 0px;	
		overflow-y:initial;
		box-shadow: 0px 4px 5px 0 rgba(0, 0, 0, 0.3);
	}
	
	main{
		left:0;
		width:100%;
		padding:0px;
		margin:0px;
		position:relative;
	}

	nav{
		margin-top:15px;
		
	}

	.navmenu li:hover:not(.active), .navmenu li:hover:not(.active) a{
		color:#feedd2;

	}


	.navmenu{
			padding:0px;
			margin:0px;

	}

	.navmenu li a{
				text-decoration:none;
				font-size:15px;
				text-transform:uppercase;
				cursor: pointer;		
				padding:24px 10px;
				margin:10px 20px;
				float:left;
				display:block;
			}			
			
	.navmenu li {
			
				text-indent: 0px;
				background-color:#e3e3e3;
				width:100%;
				color:black;
				margin:0px;
				padding:0px;
	}

	.navmenu li.active {
			background-color:  #b32231;
	}
	
	.navmenu li.active a{
			background-color: #bd1e1e;
			border-radius:40px
	}
	
				
	#map_canvas{width:100%; float:left; display:block; margin:0 auto}
		
	#map-box{
		float:left;
		width:calc(60%);
		padding:15px;
	}
}

@media only screen and (min-width: 871px){
	.logoimage{height:70px; position:fixed; left:100px}

	.info-box, .box{
		width:40%; 
		margin:0px 20px 50px;
		float:left;
	}
	
	.box{
		width:44%; 
		margin:50px 3%;
		float:left;
	}	
}
	
@media only screen and (min-width: 900px){
	#info-box{width:900px; display:block; margin:0 auto}
	.deliveryDiv{float:left;margin:40px}
		
}

@media only screen and (max-width: 450px){
	.deliveryDiv{width:90%; height:initial}
		
}