/* Basics & Universals */

html, body {
	margin:0px;
	height:100%;
	min-height:100%;
	 -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
	width:100%;
}

.clearfix:after {
  content: "";
  clear: both;
}

a {
	text-decoration:none;
}

button, input {
	transition:background-color 0.2s;
	-webkit-transition:background-color 0.2s;
	-moz-transition:background-color 0.2s;
	-o-transition:background-color 0.2s;
	-ms-transition:background-color 0.2s;
}

#bgPhoto {
	z-index:0;
	background-size:cover;
	background-attachment:fixed;
	position:fixed;
	background:url('../imgs/bgPhoto.jpg');
	width:100%;
	height:100vh;
}

.white {
	color:#FFFFFF;
}

.pink {
	color:#f7bbcd;
	}
	
.darkPink {
	color:#f9a7c2;
}	

.boldSans {
	font-family:"Montserrat", Futura, sans-serif;
	font-weight: 800;
}
	
.boldSerif {
	font-family: "Bitter", serif;
	font-weight:700;
}

.header {
	font-weight:700;
	font-family:"Montserrat", Futura, sans-serif;
	font-size:26px;
	font-weight:800;
	margin-bottom:0;
}

p {
	font-family:"Bitter", serif;
	font-size:16px;
	font-weight:400;
	color:#191919;
	font-weight:400;
	text-decoration:none;
	line-height:24px;
	margin:0;
}

h1 {
	margin:30px 0px 10px;
}

section {
	position:relative;
}



/*End Basics & Universals*/






/*Left Section*/

#leftArea {
	position:fixed;
	z-index:2
}



#leftOverlay {
	position:absolute;
	z-index:1;
	width:100%;
	height:100%;
	opacity:0.86;
	background-color:#191919;
}

.leftAreaWrapper {
	width:75%;
	margin:9px auto;
	position:relative;
	z-index:2;
}

.leftAreaWrapper a, .leftAreaWrapper a:visited, .leftAreaWrapper a:active {
	text-decoration:underline;
	color:white;
}

.leftAreaWrapper h3, .leftAreaWrapper h3:visited, .leftAreaWrapper h3:active {
	color:#f7bbcd;
}


#logo {
	margin:0 auto;
	position:relative;
	z-index:2
}

#orderButton, #send {
	padding:0px 15px;
	background-color:#5ee09f;
	.transition:background-color 0.25s;
	border-radius:3px;
	border:none;
	color:white !important;
}

#orderButton {
	background-color:#5ee09f;
}

#orderButton:hover {
	background-color:#a9ffd2;
}

#orderButton h3 {
	color:white !important;
}

.leftAreaWrapper .header {
	color:white;
}
.header + p, .header + h3 {
	padding-bottom:0px;
	margin-top:2px;
}
/*End Left Section*/





/*Right Section*/



#mainOverlay {
	width:100%;
	height:100%;
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.95) 35%, rgba(255,255,255,0.86) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.95) 35%,rgba(255,255,255,0.86) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.95) 35%,rgba(255,255,255,0.86) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColors.tr='#ffffff', endColors.tr='#dbffffff',GradientType=0 ); /* IE6-9 */
}

#menuNav {
	z-index: 10;
	overflow: auto;
	display:block;
	-webkit-transform: .translateZ(0);
	padding-top:5px;
	padding-bottom:35px;
	background-color:white;
}


.navOptionContainer {
	margin-top:8px;
}
.navLink {
	opacity:1;
	transition:color 0.25s;
	font-size:16px;
	font-family:"Montserrat", Futura, sans-serif;
	font-weight:800;
	white-space:nowrap; /*prevents word-wrap*/
}

.navLink:hover {
	color:#191919;
}

.rightWrapper {
	display:block;
	position:relative;
	z-index:2;
}








/*Menu Formatting*/

.foodType {
	font-weight:800;
}

#orderTable {
	margin-top:40px;
}


/*Menu Leaders/............Price Dots*/

.quantityInput, .tr input {
	width:46px;
	height:38px;
	margin-right:10px;
	text-align:center;
	font-family:"Bitter", serif;
	position:absolute;
}

.tr {
	display:block;
	width:100%;
	padding-bottom:5px;
	margin-top:6px;
	margin-bottom:6px;
}

.tbody, .table, .tfoot {
	display:table;
	width:100%;
}

.td {
	display:inline-block;
	padding-top:5px;
}

.tbody.leaders {
    padding: 0;
    overflow-x: hidden;
	line-height:32px;
    list-style: none;
	}




.tbody.leaders .tr {
	overflow: hidden;
}

/* That's the leader! */


	/*Removes dotted line after title*/
.noLeader:after {
	display:none !important;
	border:none !important;
}
	/*Spaces between groups of items*/
.optionWrap {
	margin-top:21px;
}
.itemWrapper .td:first-child:before {
	position:relative;
	content:'';
	width:56px;
	display:inline-block;
}

.tbody.leaders .tr {
	overflow: hidden;
}
.tbody.leaders .td:first-child {
	float: left;
	padding-right:0.4em;
	margin: 0;
	font-family:"Bitter", serif;
	font-size:17px;
}
.tbody.leaders .td + .td {
	float: right;
	padding-left: 0.4em;
	margin: 0;
	font-family:"Montserrat", sans-serif;
	font-size:16px;
	font-style:italic;
}
/* That's the leader! */
.leaders .tr:after {
	content: "";
	display: block;
	overflow: hidden;
	height: 1.2em;
	border-bottom: 1px dotted;
	padding-top:5px;
}

.itemWrapper {
	font-family:"Bitter", serif;
	font-size:17px;
}

.menuOption, .menuOptionWithPrice {
	margin-left:5%;
	font-style:italic;
	width:95%
}

.tr.menuOption:after {
	border-bottom:none; !important;
}

	
/*End Menu Formatting*/





/*Review & Submit Order Section*/


#orderTable {
	margin-top:40px;
}

.th, #orderSummary .td {
	width:33.3%;
	display:inline-block;
}

#orderSummary .td, .serif {
	font-family:"Bitter", serif;
}

.lastColumn {
	width:33.4%;
	text-align:right;
	display:inline-block;
}

.tfoot .th {
	width:66.6%;
}

.validated {
	display:none;
}

.floatRight {
	float:right;
}

.customerInfoInput label {
	display:block;
}

.customerInfo, #datepicker {
	display:inline-block;
	width:17em;
	padding-left:10px;
	height:2.75em;
}

#customerInfoSection {
	margin-bottom:50px;
}

.inputRow {
	width:100%;
	display:block;
}
.customerInfoInput {
	margin-top:13;
	margin-bottom:13px;
}

.inputRow > *, .customerInfoInput.customerInfo, .customerInfoInput p {
	display:inline-block;
}

#pickupHour, #pickupMinute {
	width:3em;
	appearance:menulist;
}
#scheduleOptions {
	display:block;
}

#datepicker {
	width:8em;
}

#orderSubmitData {
	margin-top:35px;
}

#clearOrderButton {
	background-color:#990f3b;
	height:50px;
	padding:0px 15px;
	text-align:center;
	border:none;
	border-radius:3px;
}

#clearOrderButton:hover {
	background-color:#d24774;
}

#hideSummaryButton {
	margin-top:25px;
	color:#d24774;
	text-decoration:underline !important;
	cursor:pointer;
}

#hideSummaryButton:visited {
	color:#d24774;
}

#submitOrder {
	background-color:#1fd178;
	color:white;
	height:3.5em;
	font-size:20px;
	border:none;
	text-align:center;
	transition:background-color 0.2s;
	-webkit-transition:background-color 0.2s;
	-moz-transition:background-color 0.2s;
	-o-transition:background-color 0.2s;
	-ms-transition:background-color 0.2s;
}

.disabled {
	background-color:#b5b5b5 !important;
	color:#dedede !important;
}

#submitOrder:hover {
	background-color:#2ee087;
}

#submitOrder:active {
	background-color:#177245;
}

#submitOrder:visited {
	background-color:#18804D;
}

/*Right Section (cont'd)*/
	
.menuSection {
	display:block;
	margin:40px 0;
	width:100%;
}

/*Contact Form*/

input, textarea, .customerInfo {
	border-radius:3px;
	text-align:left;
	border:2px solid #f9a7c2;
	background-color:white;
	font-size:17px;
	-webkit-appearance:none;
	box-sizing:border-box;
	font-family:"Bitter", serif;
	font-weight:400;
}

input {
	height:50px;
}

textarea {
	height:170px;
}

input, textarea, #orderForPickup, #send, select {
	width:100%;
	margin-bottom:10px;
	box-sizing:border-box;
	display:block;
	position:relative;
}

#send {
	background-color:#f9a7c2;
	text-align:center;
}

/*End Contact Form*/



/*End Right Section*/





/*NON-MOBILE ONLY SETTINGS*/

@media (min-width:1000px) {
	
#logo {
	width:50%;
	padding:26px 10% 0px 10%;
}

h1 {
	font-size:50px;
}

#leftArea {
	height:100%;
}
	
section {
width:unset;
display:inline-block;
}

#menuNav {
	position: fixed;
}

#mainOverlay {
	position:fixed;
}

.navLink {
	margin-right:30px;
}

.customerInfoInput {
	margin-right:30px;
}

#submitOrder {
	width:19em;
}
#menu, .slicknav_menu {
	display:none !important;
}

#mainArea {
		height:100%;
		margin-top:150px;
}

}






/*Left to Right section proportions on larger desktops*/
@media (min-width: 1431px) {
	#leftArea {
	width:20vw;
	}
	
	
	#mainArea {
		width:80vw;
		margin-left:20vw;
	}
	
	#menuNav {
		width: 60vw;
		padding-left:10vw;
		padding-right:10vw;
		margin-left:20vw;
	}
	
	#logo {
		padding-bottom:10px !important;
	}
	
	.rightWrapper {
	padding-left:10vw;
	padding-right:10vw;
	}
}






/*Left to Right section proportions on smaller desktops*/

@media (max-width: 1430px) and (min-width: 1000px) {
	
	#leftArea {
		width:27vw;
		height:100%;
	}
	#mainArea {
		width:73vw;
		margin-left:27vw;
	}
	
	#menuNav {
		width: 53vw;
		padding-left:10vw;
		padding-right:10vw;
		margin-left:27vw;
		position: fixed;
	}
	
	.rightWrapper {
	padding-left:10vw;
	padding-right:10vw;
	}
}







/*MOBILE ONLY SETTINGS*/

@media (max-width: 999px), handheld, handheld and (orientation:landscape) {
	
	
section, #menuNav {
	display:block !important;
	width:100vw !important;
	position:relative !important;
	overflow:hidden;
	margin:0 auto !important;
	padding-left:0 !important;
}

#menu {
	display:none !important;
}

#mainOverlay {
	position:absolute !important;
}

#leftArea {
	padding-top:54px;
}
	
.leftAreaWrapper {
	text-align:center;
}
	
#logo {
	width:50vw !important;
	display:block;
	padding: 26px 15vw 20px 18vw;
}

#navOptionContainer p, h1 {
	text-align:center;
	padding:5vw
}

h1 {
	font-size:8vw;
}

#menuNav {
	height:unset !important;
}

#mainArea, #leftArea {
	height:unset;
}

.navLink {
	margin:0 15px;
}

.customerInfoInput, .customerInfo, #submitOrder {
	width:100%;
}

#menu, .slicknav_menu {
	display:fixed;
}

.rightWrapper {
	padding-left:7vw;
	padding-right:7vw;
}

h3 {
	font-size:16px;
}

.td, .itemWrapper {
	font-size:14px !important;
}

.leaders .tr:after {
	font-size:17px;
}

#clearOrderButton {
	display:block;
	margin:0 auto;
}

}