/* ------------------------------------
Site: Moun of Tunis
CSS Author: Donia
Updated at: 4/20/18
Updated by: Donia
--------------------------------------*/	

/* ------------------------------------
resets
--------------------------------------*/

html, body, ul, ol, li, form, fieldset, legend {
   margin: 0;
   padding: 0;
}

fieldset, img {
   border: 0;
}

legend {
   color: #000;
}

input, textarea, select, button {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 100%;
   line-height: 1.1;
}

button {
  width: auto;
  overflow: visible;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  vertical-align: top;
  font-weight: normal;
}

abbr, acronym {
  border-bottom: .1em dotted;
  cursor: help;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

pre, code {
  font-family: "Courier New", monospace, serif;
  font-size: 100%;
  line-height: 1.2;
}
/* Tell the browser to render HTML 5 elements as block */  
header, footer, aside, nav, article {  
    display: block;  
}
li {
	list-style: none;
}

/* ------------------------------------
elements
-------------------------------------*/

	body {
		color:#000;
		font: 110% 'Lato', sans-serif;
		background-color: #fff; /* #f3e4cc; #e3c89d; */
		margin:0;
		position:relative;
	}
	
	h1, h2, h3, h4, h5, h6 {
	    margin: 0 0 0.5em 0;
	}

	h1 {
		color: #000;
		font-family: Gruppo, sans-serif;
		font-weight: 400;
		font-size: 300%;
		font-weight: 700;
	}

	h2 {
		color: #000;
		font-family: 'Poiret One', sans-serif;
		font-weight: 400;
		font-size: 200%;
		font-weight: bold;
	}
	h2 span.title {
		padding-bottom:1em;
		margin-bottom:1em;
		border-bottom: solid 2px #ba8c2e;
		display: inline-block;
	}

	h3 {
		color: #000;
		font-family: 'Poiret One', sans-serif;
		font-weight: 400;
		font-size: 150%;
		font-weight: bold;
	}

	h4 {
		color: #000;
		font-size: 14px;
		/* font-style: italic;*/
		font-weight: normal;
		font-size: 125%;
		padding: 0 35px 0 0;
	}

	h5 {
		color: #000;
		font-size: 14px;
		font-weight: normal;
		text-align: justify;
	}
	
	p {
		margin: 0;
		padding-bottom:20px;
		color:#000;
	}
	
	a:link {color: #000; } /* text-decoration:none; */
	a:visited {color: #000;}
	a:focus {color: #f3ad4e; outline: thin dotted;}
	a:hover {color: #f3ad4e;}
	a:active {color: #f3ad4e;}
	
	button { background: none; }
	.button {
		display:inline-block;
		padding: 7px 20px;
		border: 2px #000000 solid;
	}
	.button:hover, button:hover {
		background: #000000;
		color: #FFF;
	}
	
	 
/* ------------------------------------
structure
--------------------------------------*/

	#header {
		position: relative;
		overflow: auto;
		min-height: 70vh;
		padding: 1em;
		}
		#header.menu {
			background: url(../images/tea_glass.jpg);
			background-repeat: no-repeat;
	    	background-size: cover;
			background-position: bottom;
		}
		/* #logo {
			position: absolute;
			top: 1em;
			left: 1em;
			width: calc(30% - 1em);
			}
			#logo h1 { font-family: 'Hind Madurai', sans-serif; }
			#logo h1, #logo h2, #logo h3, #logo p, #logo a { font-family: 'Hind Madurai', sans-serif; color: #FFF; }
		#nav {
			position: absolute;
			top: 1em;
			right: 1em;
			width: calc(65% - 1em);
			text-align: right;
		}*/
		#hamburger { display:none; }
		#mobile_nav { display:none; }
		#nav {
			width: 100%;
			text-align: right;
			}
			#nav li {
				display: inline-block;
				margin-left: 0.75em;
			}
			#nav a { 
				color: #FFF; 
				font-size: 120%;
				text-decoration: none;
				padding: 0.5em 1em;
				border: 2px solid transparent;
				}
				#nav a:hover { 
					border: 2px solid #f4ae4f;
				}
				#nav a.current { 
					background-color: #f3ad4e;
					border: 2px solid #f3ad4e;
				}
			#header p {
				font-family: 'Noto Sans', serif;
				font-size: 120%;
			}
		
		#header_highlight {
			text-align: center;
			position: absolute;
			bottom: 4em;
			left: 0;
			width: 100%;
			}
			#header_highlight h1, h2, h3 { 
				font-family: 'Hind Madurai', sans-serif; 
				color: #FFF; 
			}
			#header_highlight h1 { font-size: 600%; margin-bottom: 0; }
			#header_highlight h2 { font-size: 215%; }
			#header_highlight h3 { font-size: 150%; }
			/* #header_highlight h2 {
				font-size: 500%;
				color: #FFF;
				/* font-family: 'Homemade Apple', cursive; 'Pacifico', 'Merienda One', 'Lora','Yesteryear', serif;				
			} */
			#header_highlight p {
				color: #FFF;
			}
		#header_highlight a, a.call_me {
			margin-top: 1em;
			padding: 1em;
			border: 1px solid #FFF;
			color: #FFF;
			display: inline-block;
			text-decoration: none;
		}
		#header_highlight a:hover, a.call_me:hover { 
			background: white;
			color: #000;
		}
		a.call_me {
			border-color: #000;
			color: #000;
		}
		a.call_me:hover { 
			background: #000;
			color: #FFF;
		}
	
	#main_section, .main_section {
		clear: both;
		padding: 5% 10%;
		position:relative;
		}
		#main_section h2 {
			font-family: 'Hind Madurai', sans-serif;
			margin-bottom: 1em;
			color: #000;
		}
		#jump_to_top {
			position: absolute;
			bottom: -2em;
			right: calc(50% - 2em);
			background: #FFF;
			border-radius: 50%;
			width: 4em;
			height: 4em;
			text-align: center;
		}
		#jump_to_top a { color: #000; text-decoration:none; }
			
	#footer {
		padding: 5%;
		background: #000;
		overflow:auto;
		}
		#footer p, #footer a { color: #fff; }
		#address {
			float:left;
			width: 30%;
			}
			#address a { text-decoration: none; }
			#address a:hover { color: #f4ae4f; }
		#hours {
			float:right;
			width: 30%;
		}

/* ------------------------------------
shared bits
--------------------------------------*/
	#header_highlight a.mobile_only, a.mobile_only { display:none; }
	
	.inline_left {
		float: left;
		padding: 0 5% 5% 0;
		width: 20%;
	}
	.inline_right {
		float: right;
		padding: 0 0 5% 5%;
		width: 20%;
	}

	.testimonial {
		font-weight: 200%;
		text-align:center;
		width: 50%;
		margin: 10em auto 4em;
		position: relative;
		}
		.testimonial span {
			padding: 50px;
			background-image: url(../images/QuotesStartGray50.png);
			background-position:top left;
			background-repeat:no-repeat;
		}
		.testimonial p {
			background-image: url(../images/QuotesEndGray50.png);
			background-position:bottom right;
			background-repeat:no-repeat;
			font-family: 'Coming Soon', cursive;
			font-size: 125%;
			/* font-family: 'Patrick Hand', Kalam, 'Nanum Brush Script', 'Indie Flower', cursive; */
		}
		
		.clearfix:after { 
		  content: "";
		  visibility: hidden;
		  display: block;
		  height: 0;
		  clear: both;
		}



/* ------------------------------------
 Index
--------------------------------------*/
	#special {
		 width:50%; 
		 margin: 0 auto 5em;
		}
		#special.big_message {
			 width:75%; 
			 margin: 0 auto 5em;
		}
	#special table td:first-child {
		width:45%;
		padding-right:5%;
		vertical-align:middle;
		}
		#special.big_message table td:first-child {
			width:55%;
			padding-right:5%;
			vertical-align:middle;
		}
	#special table td:last-child {
		width:45%;
		padding-left:5%;
		text-align:center;
		vertical-align:middle;
		}
		#special.big_message table td:last-child {
			width:35%;
			padding-left:5%;
			text-align:center;
			vertical-align:middle;
		}
	.newspaper {
		-webkit-columns: auto 2;
   	       -moz-columns: auto 2;
                columns: auto 2;
     -webkit-column-gap: 5%;
        -moz-column-gap: 5%;
             column-gap: 5%;
		  margin-bottom: 2em;
	}
	
	#spice_frame {
		width: 80%;
		margin: 10%;
		}
		#spice_frame img {
			width: 100%;
		}
		#spice_frame h2 {
			margin: 1em 0 0.5em;
		}
	
	#spice_corner {
		width: 60%;
		margin: 10%;
		padding: 10%;
		background-image: url(../images/spices-right_corner.png);
		background-repeat: no-repeat;
		background-size:cover;
		}
		#spice_corner img {
			display:none;
		}
		#spice_corner h2 {
			margin: 20px 0 0.5em;
		}
	
	#celebrate {
		width: 80%;
		margin: 10%;
		}
		#celebrate img {
			width: 100%;
		}
		#celebrate h2 {
			color:#000;
			margin: 20px 0 0.5em;
		}
	
		
/* ------------------------------------
 Menu
--------------------------------------*/
	#how_to_order {
		clear: both;
		padding: 5% 20%;
		position:relative;
		overflow:auto;
		text-align:center;
		}
		#how_to_order h2 {
			font-family: 'Hind Madurai', sans-serif;
			color: #ed2d2c;
			font-size: 300%;
		}
		#how_to_order .overview {
			float: left;
			width: 25%;
			margin-right: 12.5%;
			position: relative;		
			}
			#how_to_order .overview img {
				width: 80%;
				padding: 0 10% 5%;		
			}
			#how_to_order .arrow {
 				position: absolute;
			    top: calc(50% - 2em);
			    right: -25%;
				}
				#how_to_order .arrow img {
	 				width: 2em;
	 				padding: 0;
				}
	#dinner_choices {
		clear: both;
		padding: 5% 10%;
		background-color: #f4ae4f;
		overflow: auto;
		}
		#dinner_choices h2, h4 {
			margin-bottom: 0;
		}
		#dinner_choices h2 img {
			display:none;
			vertical-align: middle;
			width: 1em;
		}
		#dinner_choices img.menu-pics {
			display: none;
			float: left;
			width: 20%;
			padding: 5%;	
		}
		
		.feast {
			float: left;
			width: 35%;
			margin-right: 30%;
			margin-bottom: 5%;
			}
			.feast:nth-child(even) {
				margin-right: 0;
			}
			.feast h2 {
				color: #FFF;
			}
			.feast h2:hover {
				cursor: hand;
			}
			.feast h4 {
				font-family: 'Hind Madurai', sans-serif;
				font-size: 90%;
				font-weight: bold;
				color: #e62927;
			}
			.feast li {
				list-style: square;
				margin-left: 1em;
			}
			.feast li:hover {
				cursor: hand;
			}

	#menu_card, .menu_description { display:none; }
	#menu_card { 
		z-index: 100;
		background: #FFF;
		color: #000;
		padding: 2.5% 5%;
		width: 50%;
		height: 50%;
		position: fixed;
		top: 25%;
		left: 20%;
		overflow: auto;
		border: 5px solid #000;
		}
		#menu_card .close_icon { position: fixed; top: 27%; right: 21%; width: 1.5em; }
		#menu_card .menu_description { display: block; }
		#menu_card .menu_description h2 { color: #000; }
		#menu_card p.or { color:#e62927; text-transform:uppercase; font-weight: strong; padding: 10px 0 20px; }
	
	#picture_pane {
		padding: 0;
		margin: 0;
		overflow:auto;
		}
		#picture_pane img {
			float: left;
			width: 33.3%;
			/* width: 100%; */
		}
	#picture_bar {
		padding: 0;
		margin: 0;
		overflow:auto;
		}
		#picture_bar img {
			float: left;
			width: 50%;
			/* width: 100%; */
		}


/* ------------------------------------
 Contact
--------------------------------------*/
	.col1 {
		float:left;
		width: 40%;
		padding-bottom: calc(5% - 20px);
	}
	.col2 {
		float: right;
		width: 40%;
		padding-left: 10%;
		padding-bottom: calc(5% - 20px);
    }