/* CSS Document for Screens */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,700,700italic);

/********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************* Header7 1200 ****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************** 7777777 */

 /* header { height: 430px; background: #cf0004 url(../images/HCsandwichOriginalE.jpg) no-repeat center bottom; position:relative; } */




/* old header    header { height: 281px; background: #cf0004 url(../images/banner/storeBanner02-1200x281px.png) no-repeat center bottom; position:relative; }    */
 
header.menu { height: 281px; background: #cf0004 url(../images/banner/banner_pizza_MeatLoversPC.jpg) no-repeat center bottom; position:relative; }



header.bakingTips { height: 281px; background: #cf0004 url(../images/banner/Banner_1200x281_PizzaCookingProgress.jpg) no-repeat center bottom; position:relative; }
header.loyaltyRewards { height: 200px; background: #cf0004 url(../images/banner/joinRewardsBanner1200x200px.jpg) no-repeat center bottom; position:relative; }


header a.logo { 
	z-index: 1;
	position: absolute; 
	display: block; width: 20%; height: auto;
	background: none;
	/* 	background: url(../images/Valentinos-Logo.png) no-repeat 0 0; background-size: contain;            old background image, delete after know it is correct without*/
	top: 10px; left: 10px;
}

header a.logo span { display: none; }

header div.hero { position: absolute; width: 30%; top: 130px; left:800px; display:none; }
header div.hero h4 { font-size:2em; line-height: 1em; margin: 0 0 30px 0; color: #FFF; }
header div.hero h5 { font-size:2em; line-height: 1em; margin: 0 0 30px 0; color: #FFF; }


header div.hero_bakingTips { position: absolute; width: 45%; top: 240px; margin-left: auto; margin-right: auto; left: 0; right: 0; }
header div.hero_bakingTips h1 { font-size: 1.6em; line-height: .8em; margin: 0 0 30px 0; color: #fff; }








section.main { margin-top: 10px; margin-bottom: 30px; padding: 0; }

section.main aside { width: 33%; float: left; text-align: center; }

/*for the orderNow.html page i think *****************************************************************/
section.main aside h1 { font-size:3.5em; margin-bottom: 5px; color: #4CAF50; }
section.main aside h2 { margin-top:5px; margin-bottom: 5px; }
section.main aside h4 { margin-bottom:0px; }
section.main aside p { margin-bottom:0; }
section.main aside p.strong { font-weight:550; }



.locationBackground:hover { background-color:#e3dcd7; }
.locationBackground a { color:#000;}
.locationBackground a:hover { color:#4CAF50;}



div.menu { width: 80%; float: left; text-align:center; margin:0; padding:0; }
div.subMenu { width: 20%; float: left; text-align: center; margin:0; padding:0; }


div.menuFull { clear:both; width: 100%; float: left; text-align:center; margin:0; padding:0; }



.linktosection {  width:100%; clear:both; float:left; margin: 0px 0px 115px 0px; padding: 0px 0px 0px 0px;} /*space beween each section so the  navigation bar doesnt cover the titles of each section */


#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 100%; 
    max-height: auto; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}



/* -- Header --   i dont think this is part of my website anymore.. check and then delete */
header.menuNavbar {
	background: #30353d;
	width: 100%;
	height: 80px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}

#fullMenu{
	margin: 0 20px;
	float: left;
	width: 250px;
	height: 40px;
	display: block;
}

#fullMenu h1 {
    text-decoration: none;
    color: white;
}

#menu-icon {
     display: none;
     float: right;
     padding: 33px 20px;
     margin-bottom: -6px;
	 
 }

 #menu-icon i {
     color: white;
 }

 /* -- Navigation -- */

#main-navigation {
	background-color: #333;
	overflow: hidden;
}

#main-navigation ul {
	list-style: none;
	margin:0;
	padding:0;
}

#main-navigation li {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	text-decoration: none;
	font-size: 17px;
}

#main-navigation ul li a {
	width:100%;
}

#main-navigation ul li a:hover {
	background-color: #555;
	color: white;
}



/* 00000 MENU PAGE NAVIGATION menunav *************************************************************************************************************/



			/* Add a black background color to the top navigation */
			.menunav {
				background-color: #333;
				/* overflow: hidden;   i took this out*/
			}
			
			/* Style the links inside the navigation bar */
			/* Add a black background color to the top navigation */
			.menunav {
				background-color: #333;
				overflow: hidden;
			}
			
			/* Style the links inside the navigation bar */
			.menunav a {
				float: left;
				display: block;
				color:#FFF;
				text-align: center;
				padding: 20px 8px;
				text-decoration: none;
				font-size: 22px;
			}
			
			.menunav a.activeMenu { /*for the full menu  navbar */
				background-color: #4CAF50;
				color: white;
			}
			
			/* Add an active class to highlight the current page */
			.activeMenu {
				background-color: #4CAF50;
				color: white;
			}
			
			/* Hide the link that should open and close the topnav on small screens */
			.menunav .iconMenu {
				display: none;
			}
			
			/* Dropdown container - needed to position the dropdown content */
			.dropdownMenu {
				float: left;
				overflow: hidden;
			}
			
			/* Style the dropdown button to fit inside the topnav */
			.dropdownMenu .dropbtnMenu {
				font-size: 22px; 
				border: none;
				outline: none;
				color: white;
				padding: 20px 8px;
				background-color: inherit;
				font-family: inherit;
				margin: 0;
			}
			
			/* Style the dropdown content (hidden by default) */
			.dropdown-contentMenu {
				display: none;
				position: absolute;
				background-color: #f9f9f9;
				min-width: 160px;
				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				z-index: 1;
			}
			
			/* Style the links inside the dropdown */
			.dropdown-contentMenu a {
				float: none;
				color: black;
				padding: 20px 8px;
				text-decoration: none;
				display: block;
				text-align: left;
			}
			
			/* Add a dark background on topnav links and the dropdown button on hover */
			.menunav a:hover, .dropdownMenu:hover .dropbtnMenu {
				background-color: #555;
				color: white;
			}
			
			/* Add a grey background to dropdown links on hover */
			.dropdown-contentMenu a:hover {
				background-color: #ddd;
				color: black;
			}
			
			/* Show the dropdown menu when the user moves the mouse over the dropdown button */
			.dropdownMenu:hover .dropdown-contentMenu {
				display: block;
			}





















body { font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 300; color: #555; margin: 0; padding: 0; }

img {vertical-align: middle;}

#page { max-width:1200px; margin: 0 auto; position: relative;}

/* Text */

h1 {margin: 0 0 1em 0; font-size: 2.8em; font-weight: 700; }
h2 {margin: 0 0 .5em 0; font-size: 1.6em; font-weight: 700; line-height: 1.1em; }
h3 {margin: 0 0 .5em 0; font-size: 1.3em; font-weight: 700; }
h4 {margin: 0 0 1.5em 0; font-size: 1em; font-weight: 700; }

p { margin: 0 0 1em 0; }

p.right {
	text-align:right;
	padding-right: 40px;
	
}


a { color: #007eff; }
a:visited { color: #65b1ff; }

a.btn { font-size: 1.2em; text-decoration: none; color: #fff; border: 1px solid #fff; padding: 4px 15px; 
	transition: background-color .5s; }
a.btn:hover { background-color: rgba(0,0,0,.3); }




a.activeLocation {
	background-color:#F00;
	color:#FFF;
}
a.Location {
	color:#FFF;
}
a.Location:hover {
	background-color:#F00;
	color:#FFF;
}






/* Section - All  */

section { padding: 0 30px; }
section::after {content:''; display: block; clear: both; }


.smDescrip { font-size:.65em; padding-left:18px; color:#999; }



.menuTitleOverview { font-weight:600; font-size:2em; text-align: center;}

.menuTitleOverview p.descrip { color:#F00; font-weight:600; font-size:.7em; margin-bottom:0px; }
.menuTitleOverview p.descripSmall { font-weight:400; font-size:.5em; }



/* Rewards Page **************************************************************/
.rewardsPageMain { 
	text-align:center;	
}

.rewardsPageMain p {
	font-size: .5em;
	font-weight:300;
}
.rewardsPageMain p.emph {
	text-align: left;
	padding-left:5px;
	font-size: .60em;
	font-weight:500;
	margin:0;
	padding:0;
}
.rewardsPageMain h1 {
	font-size: .6em;
	margin-top:5px;
	margin-bottom:5px;
}

.rewardsPageMain div.center {
	text-align:center;
}

.rewardsPageMain div.center ul {
	display: inline-block; text-align: left;
	margin-top:0;
	margin-bottom:0;
	padding-right:3px;
}


/*top menu bar Navigation   i think i need to delete this now that i have a new menunav styling for this
#menuNavbar {
  overflow: hidden;
  background-color: #333;
}

#menuNavbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 17px;
}

#menuNavbar a:hover {
  background-color: #ddd;
  color: black;
}



#menuNavbar a.active {
  background-color: #4CAF50;
  color: white;
}

#menuNavbar a.StartOrder {
  background-color:#F00 ;
  color: f2f2f2;
}
#menuNavbar a.StartOrder:hover {
  
  color: #000;
}



#menuNavbar a:visited:active {
  background-color: #4CAF50;
  color: white;
}

#menuNavbar a[tabindex]:focus {
    background-color: #4CAF50;
    outline: none;
}  

*/




.sticky {
  position: fixed;
  top: 0;
  max-width:1200px;
  width: 100%;
}

.sticky + section.main .menu, .sticky + section.main .subMenu{
  padding-top: 100px;
}
.sticky + section.main #confirmCamarilloBox {
	padding-top: 135px;
}

/*top location bar Navigation */
#locationNavbar {
  overflow: hidden;
  background-color: #FF0000;
  z-index: 1;
}

#locationNavbar div.thirds {
  box-sizing:border-box;
  width:33.33%;
  float: left;
  display: block;
  color: #f2f2f2;
  font-weight:600;
  text-align: center;
  padding: 2px 5px 0 5px;
  font-size: 1.5em;
}
/* #locationNavbar div.thirds:hover, #locationNavbar div.thirds div.descrip:hover {
    background-color: #ddd;
  	color: black;
} */

#locationNavbar div.thirds div.descrip {
  box-sizing:border-box;
  width:100%;
  float: center;
  display: block;
  color: #4CAF50;
  text-align: center;
  padding: 0 0 0 0;
  font-size: .7em;
}

#locationNavbar div.thirds div.orderNow {
  box-sizing:border-box;
  width:auto;
  float: center;
  display: block;
  color: #4CAF50;
  text-align: center;
  padding: 3px 0;
  font-size: .7em;
}	

#locationNavbar div.thirds a.StartOrder {
	box-sizing:border-box;
	display:block;
	margin:auto;
	width:65%;
	padding:5px 0;
  	background-color:#F00 ;
  	color: #f2f2f2;
	text-decoration:none;
}
#locationNavbar div.thirds a.StartOrder:hover {
	color:#F00;
	background-color:#f2f2f2;
}

#locationNavbar p.small {
	color:#666;	
	font-size:.9em;
}


#locationNavbar p.largeRed {
	color:#F00;	
	font-size:1em;
	font-weight:600;
}


















/*left side menu navigation 
#subMenuNavbar { 
	width: 20%; 
	float: left; 
	text-align: center;
	margin:0; 
	padding: 0 0 0 0;  
	}

  overflow: hidden;
  background-color: #333;
}

#subMenuNavbar a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 12px;
  text-decoration: none;
  font-size: 17px;
}

#subMenuNavbar a:hover {
  background-color: #ddd;
  color: black;
}



#subMenuNavbar a.active {
  background-color: #4CAF50;
  color: white;
}

#subMenuNavbar a:visited:active {
  background-color: #4CAF50;
  color: white;
}

#subMenuNavbar a[tabindex]:focus {
    background-color: #4CAF50;
    outline: none;
}



.2 {
  position: fixed;
  top: 0;
  width: 1200px;
}

.2 + section.main .menu {
  padding-top: 100px;
}
*/




















/* Section - Main */

.newsBulletin {			/* For giving updates/announcements to customers */
	box-sizing:border-box;
	margin: 0;
	padding: 10px;
	border: 1px solid #999;
	width:100%
	
}

.newsBulletin div.update {
	box-sizing:border-box;
	margin: 0;
	padding: 0 0 10px 0;
	
}
.newsBulletin div.update p {
	text-align:justify;	
	clear: both;
}

.newsBulletin div.update div.date {
	box-sizing:border-box;
	margin: 0;
	padding: 0;
	display:block;
	overflow: none;
	float:right;
	font-weight: 550;

}

div.feedbackform {
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	width: 60%;
	background-color:#FFF;
	padding:30px;
	overflow: hidden;
	
}

div.feedbackform p { 
	float: left;
	width: 70%;
}

div.feedbackform p.right {
	float: left;
	width: 100%;
	margin-top:15px;
}

div.feedbackform img {
	float: right;
	width: 25%;
}

div.feedbackform h1 { margin-bottom:5px; font-size:2em; float:left; width:70%;} 
div.feedbackform h2 { margin-bottom:5px; font-size:1em; margin-top:15px; } 


section.feedback { margin: 0px; padding: 25px 0px; background-color:#EEE; }
section.feedback div.endSectionBorder { 
	box-sizing:border-box;
	width:100%;
	border-top:2px solid #CCC;
	float:left; 
	margin: 10px 0 10px 0;
}

textarea {
    width: 100%; /* Full width */
	height: 200px;
}

div.feedbackform button {
	margin-top:0px;
	float:right;
	margin-right:35px;
}









/* camarilloConfirm.html Page ********************************************************************/
		section.main div.confirmCamBox { 
			box-sizing:border-box;
			width:60%; 
			float:left; 
			text-align:left; 
			padding:10px; 
			font-size:1.2em; 
			font-weight:400; 
			font-style:normal; 
			margin: 10px; 
		}
		section.main div.confirmCamBox div.bold { 
			font-weight:600;
			display:inline;
		}
		input[type="radio"] { /* 316316 */
			border: 0px;
			margin: 15px 0 15px 0;			
		}
		input[type="submit"] {
			background-color: #F00;
			font-size:1.5em;
			color:#FFF;
			font-weight:600;
			width: auto; /* width of image */
			margin-top:15px;
			padding: 10px; /* height of image */
		}
		input[type="submit"]:hover {
			background-color: #f2f2f2;
			font-size:1.5em;
			color:#F00;
			font-weight:600;
			width: auto; /* width of image */
			padding: 10px; /* height of image */
		}
		section.main div.menuSubTitleRIGHT {
			box-sizing:border-box;
			width:49%;
			float:right;
			text-align:left;
			margin: 0 0 10px 0;
			font-size:1.5em;
			font-weight:700;
			font-style:oblique;
		}
		section.main div.menuSubTitleRIGHT div.wBG {
			color:#FFF; 
			background-color:#4CAF50; 
			padding:15px;
			margin: 100px 0 50px 0;	
		}

	

	.itemBeingOrderedConfirm {
		width:35%;
		text-align:center;
		font-size:2.0em;
		font-weight:600em;
		margin-left:15px;
	}
	.itemBeingOrderedConfirm img{
		width:100%;
		height:auto;
		float:left;
	}
	.notification {
			box-sizing:border-box;
			width:100%;
			float:right;
			text-align:left;
			margin: 0 0 10px 0;
			font-size:1.3em;
			font-weight:700;
			font-style:oblique;
		}
	section.main div.notification div.wBG {
		color:#FFF; 
		background-color:#4CAF50; 
		padding:15px;
		margin: 10px 0 10px 0;	
	}
	section.main div.notification div.wBG div.smallTitle {
		font-size:.75em;
		float:inherit;
	}









section.main div.endSectionBorder { 
	box-sizing:border-box;
	width:100%;
	border-top:2px solid #CCC;
	float:left; 
	margin: 50px 0 50px 0;
}

section.main div.endSectionBorderOnlySmScreens { 
	box-sizing:border-box;
	width:100%;
	border-top:2px solid #CCC;
	float:left; 
	margin: 50px 0 50px 0;
	display: none;
	}




/* 000000 GENERIC DIVS ***************************************************************************************************************************/

div.center {
	text-align:center;
}

div.menuSubTitleFull {
	box-sizing:border-box;
	width:100%;
	border-top:none;   /* border-top:2px solid #CCC;  */
	float:left; 
	text-align:left;
	margin: 20px 0px 10px 5px;
	font-size:2em; 
	font-weight:700; 
	font-style:oblique; 
	padding-top:5px;
	padding-bottom: 5px;
	color: #4CAF50;
}
		
div.contentBox {
	box-sizing:border-box;
	width: 70%;
	float: left;
	padding-right:15px;
}



div.imageSize{
		width:50%;
	}



		
div.contentBox h2 {
	text-align:left;
	padding-left: 25px;
	margin-bottom: 5px;
}	
div.contentBox h3 {
	text-align:left;
	padding-left: 25px;
}

div.contentBox h4 {
	text-align:left;
	padding-left: 40px;
}	

div.contentBox p {
	text-align:left;
	padding-left: 40px;
}

div.contentBox p.right {
	text-align:right;
	padding-right: 40px;
}


		
div.contentBox table {
	width:75%;
}		

div.contentBox td {
	font-size:1.25em;
	text-align:center;
}		

div.contentBox td.title {  
	width:60%;
	text-align:right;
}

div.contentBox td.price {  
	width:30px;
	text-align:right;
}

div.contentBox th.narrow {
	width:100px;
	padding:0 15px;
}	


div.thirds {
	box-sizing:border-box;
	width:33%;
	float:left;
	margin:0;
	padding:0;
}
div.thirds h2{
	text-align:center;
}
	
div.titleBox {
	box-sizing:border-box;
	width: 50%;
	float: left;
}
div.titleBox h4 {
	margin-top:15px;
	margin-bottom:0px;
}
div.titleBoxSmallScreens {
	box-sizing:border-box;
	display:none;
}
div.titleBoxSmallScreens h4 {
	margin-top:15px;
	margin-bottom:0px;
	text-align: center;
	
}
div.halves {
	box-sizing:border-box;
	width:50%;
	margin:0;
	margin-top:20px;
	padding:0;
	float: left;
}




/* 000 Title and subTitle font type ******************************************************************************************************/

div.menuTitle { 
	width:100%; 
	float:left; 
	text-align:center; 
	padding:10px 0px 10px 0px; 
	color:#FFF; 
	background-color:#4CAF50; 
	font-size:2em; font-weight:800; 
	font-style:oblique; 
	margin: 0px 0px 10px 0px; 
	border-bottom:medium solid #999; 
}

div.menuTitleRed { 
	width:100%; 
	float:left; 
	text-align:center; 
	padding:10px 0px 10px 0px; 
	color:#FFF; 
	background-color:#F00; 
	font-size:2em; font-weight:800; 
	font-style:oblique; 
	margin: 00px 0px 10px 0px; 
	border-bottom:medium solid #999; 
}
div.menuSubTitle { 
	box-sizing:border-box;
	width:49%; 
	float:left; 
	text-align:left; 
	padding-top:0px;				 /* used to have 80px for top padding because of the sticky nav, but the javascript fixed this */
	margin:0px 0px 10px 5px;  /* used to have -80px for top margin because of the sticky nav, but the javascript fixed this */
	font-size:1.5em; 
	font-weight:700; 
	font-style:oblique;
}
div.menuSubTitle div.wBG {
	color:#FFF; 
	background-color:#4CAF50; 
	padding:15px;
	margin: 10px 0 0 0;
	
}
div.menuSubTitleDescrip { 
	width:100%; 
	float:left; 
	text-align:left; 
	padding:0; 
	font-size:.65em; 
	font-weight:400; 
	font-style:oblique; 
	margin: 10px 0px 10px 0px; 
}
div.menuSubTitleDescrip ::first-letter { 
	padding-left:20px;
}
div.menuSubTitleDescrip p{ 
	text-align:justify; 
	font-style:normal; 
}







/* 00000 BAKING TIPS SECTION **********************************************************************************************************************/


		section.main div.BBQbakingInstructions {
			box-sizing:border-box;
			padding-top:10px;		 /* used to have 90px for top padding for all the sections because of the sticky nav, but the javascript fixed this */
			width:100%;
		}



/* 00000 Take-n-bake PIZZA section ****************************************************************************************************************/

		section.main div.tnbBox {
			box-sizing:border-box;
			margin-top:-90px;
			padding-top:90px;		 /* used to have 90px for top padding for all the sections because of the sticky nav, but the javascript fixed this */
			width:100%;
		}
		
		
		section.main div.tnbBox div.titleImageBox {
			box-sizing:border-box;
			width:50%;
			float: left;
		}
		
		section.main div.tnbBox div.titleImageBox img {
			box-sizing:border-box;
			width: 100%;
		}
			


/* 00000 SALADS section ****************************************************************************************************************/

		section.main div.saladBox {
			box-sizing:border-box;
			padding-top:90px;
			width:100%;
		}
		
/* 00000 SUBS section ****************************************************************************************************************/

		section.main div.subBox {
			box-sizing:border-box;
			padding-top:90px;
			width:100%;
		}

/* 00000 SANDWICHES section ****************************************************************************************************************/

		section.main div.sandwichBox {
			box-sizing:border-box;
			padding-top:90px;
			width:100%;
		}
		
		
/* 00000 BAKED PIZZAS section ****************************************************************************************************************/

		section.main div.bakedPizzaBox {
			box-sizing:border-box;
			padding-top:90px;
			width:100%;
		}
		
		div.menuSubTitle p.green { color:#4CAF50; margin-bottom:5px; margin-top:40px; font-style: normal; text-align:center; }
		div.menuSubTitle p.small { font-size:.8em; font-weight:400; font-style: normal; text-align:center; }
		
		section.main div.bakedPizzaBox table.slices {
			width: 100%;
			text-align: center;
			
		}
		section.main div.bakedPizzaBox table.slices th.right {
			text-align: right;
			font-style: normal;
		}
		section.main div.bakedPizzaBox img.bakedSlices { /*image that hides when the screen is big, but i will display it when it gets smaller display screen */
			display: none;	
		}
		
		
		
/* 00000 DESSERTS section ****************************************************************************************************************/

		section.main div.dessertBox {
			box-sizing:border-box;
			padding-top:90px;
			width:100%;
		}
		
		
/* 00000 EXTRA/ADD ONS section ****************************************************************************************************************/

		section.main div.addOnsBox {
			box-sizing:border-box;
			padding-top:90px;
			width:100%;
		}
	

		
/* 00000 BEVERAGE section ****************************************************************************************************************/

		section.main div.beverageBox {
			box-sizing:border-box;
			padding-top:90px;
			width:100%;
		}		





		section.main div.beverageItem { width:50%; float:left; text-align:left; padding:0; font-size:1.5em; font-weight:700; font-style:oblique; margin: 10px 0px 10px 5px; }
		section.main div.beverageItem div.smDescrip { font-weight:400; font-size:1em; display:inline-block; }
		section.main div.beverageItemList { width:100%; float:left; text-align:left; padding:0; font-size:.65em; font-weight:400; font-style:oblique; margin: 10px 0px 10px 0px; }
		
		
		section.main div.beverageTable { width:100%; display:block; margin: 10px auto; }
		section.main div.beverageTable table.beverageTable { width:100%; }
		section.main div.beverageTable table.beverageTable th { text-align:center; vertical-align:top; width:auto%; font-size:.8em; font-weight:700; font-style:oblique; }
		section.main div.beverageTable table.beverageTable th.centerSmDescrip {text-align:center; vertical-align:top; font-size:.65em; color:#999; }
		section.main div.beverageTable table.beverageTable td { text-align:center; vertical-align:top; font-size:.7em; font-weight:700; font-style:oblique; }
		
		section.main div.doughTable { width:100%; display:block; margin: 10px auto; }
		section.main div.doughTable table.beverageTable { width:100%; }
		section.main div.doughTable table.beverageTable th { text-align:center; vertical-align:top; width:auto%; font-size:.9em; font-weight:700; font-style:oblique; }
		section.main div.doughTable table.beverageTable th.centerSmDescrip {text-align:center; vertical-align:top; font-size:.80em; color:#999; }
		section.main div.doughTable table.beverageTable td { text-align:center; vertical-align:top; font-size:.9em; font-weight:700; font-style:oblique; }

		
		section.main div.doughTableSmScreens { display: none; }
		
		
		
		
		
		section.main div.beverageSideImg { width:48%; height: auto; float:right; text-align:right; padding:0; font-size:1em; font-weight:400; font-style:oblique; margin: 10px 0px 10px 5px; }
		/*background-image:url(../images/menuImg/Beverage/vendingMachineSelectionImgSM.jpg); used to have this as the background image, but took out for now*/
		section.main div.beverageSideImg img {
			 margin: 0 auto; display: block;
		}


		






/* 00000 CATERING section ************************************************************************************************************************/

		section.main div.CateringBox {
			box-sizing:border-box;
			padding-top:90px;
			width:100%;
		}


		section.main div.titleBox p.title {
			box-sizing:border-box;
			text-align:justify;
			font-size:1.2em;
			width:100%;
			color:#999;
			padding-left: 15px;
			padding-right: 15px;
			float: left;
		}
		section.main img.title {
			box-sizing:border-box;
			width:50%;
			float:left;
		}
		section.main img.titleNoSmScreens { /* title image that will not be displayed on small screens */
			box-sizing:border-box;
			width:50%;
			float:left;
		}
		
		section.main p.title::first-letter {
			font-size:1.75em;

		}

		section.main div.CateringBox div.contentBox {
			box-sizing:border-box;
			width: 60%;
			float: left;
		}
		section.main div.CateringBox div.imageBox {
			box-sizing:border-box;
			width: 40%;
			float: left;
		
		}
		section.main div.CateringBox div.menuSubTitle { 
			width:60%; 
		}
		
		

		
		section.main div.CateringBox div.menuSubTitleFull { /*catering section header titles for each section */
			box-sizing:border-box;
			width:49%; 
			float:left; 
			text-align:left; 
			padding-top:0px;						 /* used to have 80px for top padding because of the sticky nav, but the javascript fixed this */
			margin:0px 0px 10px 5px;				 /* used to have -80px for top margin because of the sticky nav, but the javascript fixed this */
			font-size:2.0em; 
			font-weight:700; 
			font-style:oblique;
		}
		

		section.main div.CateringBox table {
			box-sizing:border-box;
			width:200px;
			margin:auto;
			
		}	
		
		section.main div.CateringBox td {
			padding:0 20px;
		}
		
		section.main div.CateringBox h2 {
			font-size:1.5em;
		}
		section.main div.CateringBox h5 {
			font-size:.80em;
			text-align:left;
			padding: 0 15px 0 40px;
		}
		section.main div.CateringBox h5.right {
			font-size:.80em;
			text-align:right;
			padding-right: 15px;
		}

		
		div.contentBox div.h4smallRegular, div.contentBox2 div.h4smallRegular{
			display:inline;;
			font-size:1em;
			font-weight:400;
			padding-left:5px;
			color:#999;
		}

		section.main div.CateringBox div.h2smallRegular {
			display:block;
			padding-top:5px;
			text-align:center;
			color:#999;
			font-weight:550;
		}
		
		section.main div.CateringBox div.h2smaller {
			display:block;
			padding-top:5px;
			text-align:center;
			color:#999;
			font-size:.6em;
			font-weight:550;
			
		}
		
		section.main div.CateringBox div.thirds {
			margin-top:25px;
			
		}

		section.main div.CateringBox div.contentBox p {
			padding-left: 25px;
		}



		div.thirds table {
			width:75%;
		}		
		
		div.thirds td {
			font-size:1.25em;
			text-align:center;
		}		
		
		div.thirds td.price {
			width:30px;
			text-align:right;
		}
		
		div.thirds th.narrow {
			width:100px;
			padding:0 15px;
			color:#999;
		}



		
		div.halves table.saladBowls {
			box-sizing:border-box;
			table-layout:fixed;
			width: auto;
			height:auto;
			
			
		}
		
		div.halves table.saladBowls th.name {
			width:140px;
			padding:0 15px;
			text-align:left;
		}
		
		div.halves table.saladBowls th.price {
			width:40px;
			padding:0 15px;
		}
		div.halves table.saladBowls td.name {
			width:150px;
			padding:0 15px;
			text-align:left;
		}
		
		section.main div.imageBox h2 {	
			box-sizing:border-box;
			float:left;
			padding: 15px 5px 0 20px;
		}
		
		div.imageBox div.h2smallRegular {
			display:inline;
			font-size:.6em;
			font-weight:550;	
		}
		div.imageBox div.h2smaller {
			display: inline;
			font-size: .55em;
			font-weight: 550;
			padding-top: 0;
		}
		
		



/* 00000 SPECIALS section ************************************************************************************************************************/

		section.main div.SpecialsBox {
			box-sizing:border-box;
			padding-top:90px;
			width:100%;
		}

		section.main div.SpecialsBox div.menuSubTitleFull { /*specials section header titles for each section */
			box-sizing:border-box;
			width:49%; 
			float:left; 
			text-align:left; 
			padding-top:0px;						 /* used to have 80px for top padding because of the sticky nav, but the javascript fixed this */
			margin:0px 0px 10px 5px;				 /* used to have -80px for top margin because of the sticky nav, but the javascript fixed this */
			font-size:2.0em; 
			font-weight:700; 
			font-style:oblique;
			color: #4CAF50;
			border-top:none;   /* border-top:2px solid #CCC;  */
		}
		
		
		
		
		section.main div.SpecialsBox div.contentBox {
			box-sizing:border-box;
			width: 70%;
			float: left;
		}
		section.main div.SpecialsBox div.contentBox2 {
			box-sizing:border-box;
			width: 70%;
			float: left;
		}
		section.main div.SpecialsBox div.imageBox {
			width: 30%;
			float: left;
		
		}
		section.main div.SpecialsBox div.imageBox2 {
			width: 30%;
			float: left;
		
		}
		
		section.main div.SpecialsBox div.contentBox h2 {
			text-align:left;
			padding-left: 25px;
			margin-bottom: 5px;
		}	
		section.main div.SpecialsBox div.contentBox2 h2 {
			text-align:left;
			padding-left: 25px;
			margin-bottom: 5px;
		}	
		section.main div.SpecialsBox div.contentBox h3 {
			text-align:left;
			padding-left: 25px;
		}

		section.main div.SpecialsBox div.contentBox h4 {
			text-align:left;
			padding-left: 40px;
		}	

		section.main div.SpecialsBox div.contentBox p {
			text-align:left;
			padding-left: 40px;
		}
		section.main div.SpecialsBox div.contentBox2 p {
			text-align:left;
			padding-left: 40px;
		}
		
		section.main div.SpecialsBox div.contentBox table {
			width:75%;
		}		

		section.main div.SpecialsBox div.contentBox td {
			font-size:1.25em;
			text-align:left;
			padding: 5px 0 5px 35px;
		}
		
		section.main div.SpecialsBox div.contentBox table {
			width:100%;
		}
		
		section.main div.SpecialsBox div.contentBox td.title {
			width: 60%;
			text-align:left;
			padding-right: 3px;
		}

		section.main div.SpecialsBox div.contentBox td.price {
			width:20%;
			text-align:center;
			padding-right: 0px;
			vertical-align:top;
		}
		
		section.main div.SpecialsBox div.contentBox td.price p.smallTO {
			text-align:center;
			font-size:.8em;
			margin-bottom:0px;
			color:#999;
			padding-left:0px;
			padding-right:0px;
		}

		section.main div.SpecialsBox div.contentBox p.small {
			text-align:left;
			padding-left: 40px;
			font-size:.8em;
			margin-bottom:0px;
			color:#999;
		}





















/*for the about section */
section.main div.menuSubTitleFull { 
	box-sizing:border-box;
	width:100%;
	float:left; 
	text-align:left;
	margin: 20px 0px 10px 5px;
	font-size:1.5em; 
	font-weight:700; 
	font-style:oblique; 
	padding-top:5px;
	color: #4CAF50;

}
section.main p.aboutPage { 
	padding:0 15px 0 25px; 
}
section.main p.strongAboutPage { 
	font-weight:550; 
	padding:0 15px 0 25px; 
}
section.main div.locationHistory {
	box-sizing:border-box;
	float:left;
	width:100%
	padding: 15px 0;
}
section.main div.locationHistory h2 {	
	box-sizing:border-box;
	float:left;
	padding: 15px 5px 0 20px;
}
.h2smallRegular {
	display:inline;;
	font-size:.7em;
	font-weight:400;
	padding-left:7px;
}
.locationHistory p {
	box-sizing:border-box;
	float: left;
	width: 75%;
	padding: 0 20px;
}
.locationHistory p.address {
	box-sizing:border-box;
	float: left;
	width: 75%;
	padding: 0 40px;
	margin-top:-8px;
	font-size:.9em;
}
.locationHistory img {
	float: right;
	width: 25%;
	padding-top: 15px;
}


/*right hand side pic about sub menus*/
section.main div.menuSubTitlePic { width:49%; float:right; text-align:right; padding:0; font-size:1em; font-weight:400; font-style:oblique; margin: 10px 0px 10px 5px; }
/*right hand side info about sub menus*/
section.main div.menuSubTitleInfo { width:49%; float:right; text-align:right; padding:0; font-size:1em; font-weight:400; font-style:oblique; margin: 10px 0px 10px 5px; } 

section.main div.menuSubTitlePic img {
	width:100%;
	height:auto;
}




#confirmCamarilloBox {
	box-sizing:border-box;
	border: 2px solid #F00;	
}

#mustChoose {
	color:#F00;
	font-weight:600;
}


/********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************* GRID MODIFICATIONS FOR MENU IMAGE LINKS AND MENU ITEMS 1200 screen size *****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

/* 1200 Menu Overview Links modifications **********************************************************************************************************************/

	.grid-containerWeOffer {
	  display: grid;
	  grid-template-columns: auto auto auto;
	  grid-column-gap: 3px;
	  grid-row-gap: 3px;
	}
	.grid-containerWeOffer > div.visualMenuLinkContainer { /*div container for the links to the sections of the different menu options we offer*/
		margin:3px .25% 3px .25%; 
		padding:0px 0px 0px 0px; 
		border:2px solid black;
	}
	div.visualMenuLinkContainer:hover {
		box-sizing:border-box;
		background-color: #FF0000;
		color: #FFFFFF;
	}
	a.menuTitleLinks {  /* color that the links change to */
		box-sizing:border-box;
		color: #000;
		display:inline-block;
		height:100%;
	}
	a.menuTitleLinks:hover {
		color: #FFFFFF;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemImage { 
		box-sizing:border-box;
		width:45%;
		float: left;
		padding-top:2px;
		padding-right:5px;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemTitle {   /* Name/Title of the menu item inside each menu item div */
		box-sizing:border-box;
		font-size: 1.4em; 
		font-weight:600; 
		width:55%;
		float:right;  
		padding: 20px 0 0 0;
		margin: 0;
		text-align:center;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemTitle div.smallTitle { 
		display: inline; 
		font-size:.65em; 
		font-weight:600;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemDescrip {
		box-sizing:border-box;
		font-size: .95em; 
		padding: 5px; 
		font-weight:400; 
		float:left; 
		width:100%;
		text-align:left; 
	}
	
	
	
/* 1200 SubMenu Overview Links modifications **********************************************************************************************************************/	
	.grid-containerWeOfferTypes {
	  display: grid;
	  grid-template-columns: auto auto;
	  grid-column-gap: 3px;
	  grid-row-gap: 3px;
	}
	.grid-containerWeOfferTypes > div.visualSubMenuLinkContainer { /*div container for the links to the sections of the different menu options we offer*/
		margin:3px .25% 3px .25%; 
		padding:0px 0px 0px 0px; 
		border:2px solid black;
	}
	div.visualSubMenuLinkContainer:hover {
		box-sizing:border-box;
		background-color: #4CAF50;
		color: #FFF;
	}
	a.subMenuTitleLinks {  /* color that the links change to */
		box-sizing:border-box;
		color: #000;
		display:inline-block;
		height:100%;
	}
	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemImage { 
		box-sizing:border-box;
		width:30%;
		float: left;
		padding-top:2px;
		padding-right:5px;
	}

	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemTitle {   /* Name/Title of the menu item inside each menu item div */
		box-sizing:border-box;
		font-size: 1.4em; 
		font-weight:600; 
		width:70%;
		float:right;  
		padding: 5px 0 0 0;
		margin: 0;
		text-align:center;
	}
	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemTitle div.smallTitle { 
		display: inline; 
		font-size:.65em; 
		font-weight:600;
	}
	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemDescrip {
		box-sizing:border-box;
		font-size: .95em; 
		padding: 10px 5px 2px 5px; 
		font-weight:400; 
		float:left; 
		width:70%;
		text-align:left; 
	}
	
/* 1200 MENU ITEM grid modifications *************************************************************************************************************************/
	.grid-containerMenuItem {
	  display: grid;
	  grid-template-columns: auto auto auto;
	  grid-column-gap: 5px;
	  grid-row-gap: 5px;
	}
	.grid-containerMenuItem > div.menuItem { /*div container for the links to the sections of the different menu options we offer*/
		margin:0px; 
		padding:5px; 
		background-image:url(../images/backgroundImage400x267px.jpg);
		/* background-color:#FCEBBF; */ 
		border:2px solid #000;
		float:left;
	}
	div.menuItem div.menuItemTitle { /*Title of each Menu Item inside each menuItem div */
		box-sizing:border-box;
		font-size: 1em; 
		font-weight:600; 
		float:left; width:47%; 
	}
	div.menuItem div.menuItemDescrip {  /*Description of each menu item inside each menu item div */
		box-sizing:border-box;
		font-size: .90em; 
		text-align:justify;
		font-style:normal;
		font-weight:400; 
		float:left; 
		width:47%; 
		
	} 
	
	div.menuItem div.menuItemImage {
		float:right;
		width:47%;
	}
	
	div.menuItem div.menuItemImage img {   /*image insdie the each menu item div */
		box-sizing:border-box; 
		width:100%; 
		float:right; 
		margin:0; 
		padding:3px; 
		background-color:#FFF; 
	}
	div.menuItemOrderOnline {
		box-sizing:border-box;
		width:100%;
		text-align:center;
	}
		
	div.menuItemOrderOnline a {  /*Link div to order each item online inside each menu item div 123123 */
		margin:0 auto;
		font-weight:500;
		color:#F00;
		text-decoration:none;
	}
	div.menuItemOrderOnline a:hover{
		font-weight:600;
		text-decoration:underline;
	}		
	

	
	div.menuItem div.menuItemPriceTable { 
		width:100%; 
		clear:both; 
		padding-top:5px;
	}

	/*  pizza pricing table */
div.menuItem table.menuItemPriceTablePizza { width:100%; }	
div.menuItem table.menuItemPriceTablePizza th { text-align:left; padding-left:10px; font-size:.85em;  }
div.menuItem table.menuItemPriceTablePizza th.small { text-align:left; padding-left:10px; font-size:.7em; }
div.menuItem table.menuItemPriceTablePizza td { width:20%; text-align:left; padding-left:3px; font-size:.85em; }
div.menuItem table.menuItemPriceTablePizza td.small { width:20%; text-align:left; padding-left:3px; font-size:.8em; }

	/*  salad and sub pricing table with three columns */
div.menuItem table.menuItemPriceTableThree { width:100%; }
div.menuItem table.menuItemPriceTableThree th { text-align:right; padding-left:10px; font-size:.85em; }
div.menuItem table.menuItemPriceTableThree th.small { text-align:right; padding-left:10px; font-size:.7em; }
div.menuItem table.menuItemPriceTableThree td { width:20%; text-align:left; padding-left:3px; font-size:.85em; }
div.menuItem table.menuItemPriceTableThree td.small { width:20%; text-align:left; padding-left:3px; font-size:.8em; }

	/* pricing table with  two price columns (sandwiches and desserts) */
div.menuItem table.menuItemPriceTableTwo { width:60%; }
div.menuItem table.menuItemPriceTableTwo th { text-align:right; padding-left:10px; font-size:.85em; }
div.menuItem table.menuItemPriceTableTwo th.small { text-align:right; padding-left:10px; font-size:.7em; }
div.menuItem table.menuItemPriceTableTwo td { text-align:left; padding-left:5px; font-size:.85em; }
div.menuItem table.menuItemPriceTableTwo td.small { text-align:left; padding-left:5px; font-size:.8em; }

	/* pricing table with only one price (side salad)*/
div.menuItem table.menuItemPriceTableOne { width:50%; }
div.menuItem table.menuItemPriceTableOne th { text-align:right; padding-left:5px; font-size:.85em; }
div.menuItem table.menuItemPriceTableOne th.small { text-align:right; padding-left:5px; font-size:.7em; }
div.menuItem table.menuItemPriceTableOne td { width:70%; text-align:left; padding-left:8px; font-size:.85em; }
div.menuItem table.menuItemPriceTableOne td.small { width:70%; text-align:left; padding-left:8px; font-size:.8em; }

	



/************ Build Your Own Pizza Table Table *************************/

	div.pizzaTable { 
		box-sizing: border-box; 
		width: 100%; 
		margin: 0px; 
		padding: 5px 0px 5px 5px; 
		background-image: url(../images/background-image.jpg);
		border: 2px solid black;

		/* background-color:#FFC; */
	}
	div.pizzaTable div.pizzaTableTitle {
		clear:left;
		box-sizing:border-box; 
		width:100%;
		margin: 0;
		font-size: 1.5em;
		font-weight: 600;
		padding: 5px 0 25px 0;
		text-align: center;
		overflow: hidden;
	}
	div.pizzaTable div.size {
		clear:left;
		box-sizing:border-box; 
		width:100%;
		margin: 0;
		padding: 0 0 15px 0;
		min height: 200px;
		display: inline;
		float:left;
		text-align:left;
		overflow: hidden;
		
	}
	div.pizzaTable div.crust {
		clear:left;
		width:100%;
		margin: 0;
		padding: 0 0 15px 0;
		min height: 100px;
		overflow: hidden;
	}
	div.pizzaTable div.sauce {
		clear:left;
		width:100%;
		margin: 0;
		padding: 0 0 15px 0;
		min height: 100px;
		overflow: hidden;
	}
	div.pizzaTable div.toppings {
		clear: left;
		width:100%;
		margin: 0;
		padding: 0;
		min height: 100px;
		overflow: hidden;
	}
	
	div.pizzaTable div.step {
		width:42px;
		float: left;
		display: inline;
	}
	div.pizzaTable div.step img {
		width:42px;
		float: left;
		display: inline;
		
	}
	
	div.pizzaTable div.title {
		width:25%;
		display: inline;
		float: left;
		font-size: 1.5em;
		font-weight:600;
		text-align: left;
		padding-left: 10px;
		min-height:75px;
	}
	
	div.pizzaTable div.title div.small {
		display:block;
		font-size: .72em;
		font-weight: 400;
		text-align:center;
	}
	div.pizzaTable div.titlePrice {
		font-size:1.5em;
		font-weight: 600;
		float: left;
		padding-left: 100px;
	}
	
	div.pizzaTable div.options {
		width:21%;
		float: left;
		font-size: 1.1em;
		font-weight:450;
		text-align: center;
		padding-bottom:30px;
	}
	

	div.pizzaTable div.options div.small {
		display:block;
		font-size: .75em;
	}
	
	div.pizzaTable div.toppingOptionsBox {
		clear:left;
		width:100%;
		float:left;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	
	div.pizzaTable div.toppingOptionsBox div.toppingOptionsColumn {
		box-sizing:border-box; 
		float: left;
		width: 25%;
		font-size:1.1em;
		font-weight:450;
	}
	
	
	
	
	div.pizzaTable div.pizzaSize {
		width: 12%;
		
		font-size: 1.3em;
		font-weight: 600;
		float: left;
		text-align:center;
	}
	
	div.pizzaTable div.pizzaFeeds {
		display: block;
		font-size:.70em;
		font-weight: 400;

	}	
	
	div.pizzaTable div.pizzaPrice {
		display: block;
		font-size:1em;
		font-weight: 400;
		padding-bottom: 30px;

	}	
	
	
	div.pizzaTable div.optionsFour {
		width:17%;
		float: left;
		font-size: 1.2em;
		font-weight:400;
		text-align: center;
		padding-bottom:20px;
	}	
	























/************ Build Your Own Pizza Table Table ******************* GOING TO HIDE THIS FOR NOW

	section.main div.pizzaTable { 
		width:100%; 
		float:left; 
		margin:0px; 
		padding:5px 0px 5px 0px; 
		background-image:url(../images/background-image.jpg);
		overflow:none;
	}
	
	
	section.main div.pizzaTable div.smDescrip { font-size:.70em; color:#000; }
	
	section.main div.pizzaTable table.pizzaTable { 
		width:100%;
		text-align:center;
	}
	
	section.main div.pizzaTable th.step { width:42px; padding-bottom:50px; }
	section.main div.pizzaTable th {text-align:left; vertical-align:top; font-size:1.25em; }
	section.main div.pizzaTable th.center {text-align:center; vertical-align:top; font-size:1.25em; width:25%; }
	section.main div.pizzaTable th.centerNarrow {text-align:center; vertical-align:top; font-size:1.25em; width: 18%; }
	section.main div.pizzaTable th.centerSmDescrip {text-align:center; vertical-align:top; font-size:.90em; color:#999; width:auto; }
	section.main div.pizzaTable th.crust { padding-bottom:50px; }
	section.main div.pizzaTable th.sauce { padding-bottom:100px }
	section.main div.pizzaTable th.toppings { padding-bottom:25px }
	
	section.main div.pizzaTable td {text-align:center; vertical-align:top; font-size:1.25em; }
	
	section.main div.pizzaTable table.toppings {float:center; width:96%; }
	section.main div.pizzaTable table.toppings td {width:24%; font-size:1em; color:#333; font-weight:525;}
	
	
	******/
	
	section.main div.menuSubTitleInfo table.subs { width:100%; }
	




















section.main .content { margin: 15px; background: no-repeat center top; background-size: 75px 75px; padding-top: 85px; }

section.main aside h3 a { color: #000; text-decoration: none; }
section.main aside h3 a:hover {  text-decoration: underline; }

section.main aside .content.whats-new { 
	background-image: url(../images/star.svg); 
}
section.main aside .content.whats-new p { 
	text-align:justify;
	margin-bottom: 10px;
}
section.main aside .content.whats-new p::first-letter { 
	padding-left:20px;
}
section.main aside .content.fun-facts { background-image: url(../images/facts.svg); }
section.main aside .content.locations { background-image: url(../images/icon_location.svg); }













/* Section - Atmosphere */

section.atmosphere { background-color: #cc6633; padding-top: 30px; padding-bottom: 30px; color: #fff; }

section.atmosphere article { padding: 0 20px 0 515px; background: url(../images/doughBallsSM.png) no-repeat 0 5px; min-height: 220px; }



/* Section - Atmosphere2 */

section.atmosphere2 { background-color: #cc6633; padding-top: 30px; padding-bottom: 30px; color: #fff; }

section.atmosphere2 article { padding: 0 20px 0 515px; background: url(../images/locallyOwnedSignWBGsm.png) no-repeat 0 5px; min-height: 220px; }








/* Section - Customers -- used to be How To */

section.customers { background-color: #eee9d9; position: relative; }

section.customers aside { width: 30%; float: left; margin-right: 10px; }

section.customers aside .content { padding: 30px 30px 20px 0; }

section.customers aside .content img { display:block; margin-left: auto;
    margin-right: auto; margin-bottom: 15px; width: 65%;  }


section.customers aside .content h4 { margin-bottom: 0; }
section.customers aside .content p { margin-bottom: .5em; }
section.customers aside .content a { display: inline-block; color: #cc6633; font-weight: 700; }

section.customers blockquote { 
	margin: 0; width: 32%;
	color: #444;
	background-color: #fff;
	position: absolute; bottom: 0; right: 4%;
	
}

section.customers blockquote p { margin: 30px 30px 20px 50px; }

section.customers blockquote p.quote { font-style: italic; font-size: 1.2em; }

section.customers blockquote p.credit {
	color: #777;
	font-size: .9em; margin-top: 0; padding-left: 20px; line-height: 1.3em;
	position: relative;
}

section.customers blockquote::before { 
	content:'\201c';
	color: #d2bd65; 
	position: absolute;
	top: 10px; left: 8px;
	font-size: 5em;
	font-family: serif;
}
section.customers blockquote p.quote::after { content:'\201d'; font-family: serif; }
section.customers blockquote p.credit::before { content:'\2014'; position: absolute; top: -1px; left: 0; }


/* 00000 MAIN MENU NAVIGATION topnav *************************************************************************************************************/

			
			/* Style the links inside the navigation bar */
			/* Add a black background color to the top navigation */
			.topnav {
				background-color: #FF0000;
				overflow: hidden;
			}
			
			/* Style the links inside the navigation bar */
			.topnav a {
				float: left;
				display: block;
				color: #f2f2f2;
				text-align: center;
				padding: 25px 16px;
				text-decoration: none;
				font-size: 20px;
				font-weight: bold;
			}
			.topnav a.floatright{
				float: right;
				color: #FF0000;
				background-color: #FFFFFF;
				margin: 20px;
				padding: 5px 15px;
				margin-right: 25px;
				border-radius: 20px
			}
			
			/* Add an active class to highlight the current page */
			.active {
				background-color: #C00004;
				color: white;
			}
			
			/* Hide the link that should open and close the topnav on small screens */
			.topnav .icon {
				display: none;
			}
			
			/* Dropdown container - needed to position the dropdown content */
			.dropdown {
				float: left;
				overflow: hidden;
			}
			
			/* Style the dropdown button to fit inside the topnav */
			.dropdown .dropbtn {
				font-size: 17px; 
				border: none;
				outline: none;
				color: white;
				padding: 5px 16px;
				background-color: inherit;
				font-family: inherit;
				margin: 0;
			}
			
			/* Style the dropdown content (hidden by default) */
			.dropdown-content {
				display: none;
				position: absolute;
				background-color: #f9f9f9;
				min-width: 160px;
				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				z-index: 1;
			}
			
			/* Style the links inside the dropdown */
			.dropdown-content a {
				float: none;
				color: black;
				padding: 5px 16px;
				text-decoration: none;
				display: block;
				text-align: left;
			}
			
			/* Add a darker red background on topnav links and the dropdown button on hover */
			.topnav a:hover, .dropdown:hover .dropbtn {
				background-color: #C00004;
				color: white;
				
			}
			
			/* Add a grey background to dropdown links on hover */
			.dropdown-content a:hover {
				background-color: #ddd;
				color: black;
			}
			
			/* Show the dropdown menu when the user moves the mouse over the dropdown button */
			.dropdown:hover .dropdown-content {
				display: block;
			}



























/* Footer */

footer { font-size: .8em; margin: 40px; color: #999; text-align: center; }
footer .content { display: inline; }
footer a { margin-left: 30px; color: #777; }
footer a:visited { color: #777; }
footer a:hover { color: #000; }



header { 
	width:100%;
    min-height:234px;
}

/* slideshow styling *******************************************************************************************/


* {box-sizing: border-box;}




/* START OF SLIDESHOW CONTAINER HEADER BANNER ********************************************************************* 000000 */
.mySlides {display: none;}

.slideshow-container {
  box-sizing: border-box;
  max-width:100%;
  position: relative;
  margin: auto;
  overflow: hidden;
  /* used to be this in original index.html, can delte if like with new style z-index: 0; */
}

.dot {
  display: none;
}

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

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

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


/* Slideshow container-header-banner */
.slideshow-container-sidebar {
  max-width: 100%;
  max-height: 400px;
  position: relative;
  margin: auto;
  overflow: hidden;
  z-index: 0;
  
}
.dot-sidebar {
  display: none;
}
.mySlides-sidebar {display: none}



/* END OF SLIDESHOW CONTAINER HEADER BANNER ********************************************************************************* 00000 */








/* 000000 Media Queries ************************************************************************************************************************************************************ MEDIA QUERIES */




@media screen and (max-width: 1000px) {
	
	h1 { font-size: 2.4em; }

	div.menu { width: 75%; float: left; text-align:center; margin:0; padding:0; }
	div.subMenu { width: 25%; float: left; text-align: center; margin:0; padding:0; }

/********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************* Header7 1000 ****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************** 7777777 */

	header {
		min-height:193px;
	}

	header div.hero {left: 61%; }
	header div.hero h4 {margin-bottom: 20px; }
	
	/* Section - Atmosphere */
	section.atmosphere article { padding-left: 400px; background-size: 375px auto; }




/* 1000 confirmOrderOnlineModifications **********************************************************************************************************************/

	.itemBeingOrderedConfirm {
		width:35%;
	}
	section.main div.confirmCamBox { 
		width:60%; 
		
	}
	section.main div.menuSubTitleRIGHT {
		box-sizing:border-box;
		width:49%;
		float:right;
		text-align:left;
		margin: 0 0 10px 0;
		font-size:1.5em;
		font-weight:700;
		font-style:oblique;
	}
	section.main div.menuSubTitleRIGHT div.wBG {
		color:#FFF; 
		background-color:#4CAF50; 
		padding:15px;
		margin: 100px 0 50px 0;	
	}
	.notification {
			font-size:1.0em;
		}
	section.main div.notification div.wBG {
		color:#FFF; 
		background-color:#4CAF50; 
		padding:15px;
		margin: 10px 0 10px 0;	
	}
	section.main div.notification div.wBG div.smallTitle {
		font-size:.85em;
		float:inherit;
	}






/********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************* GRID MODIFICATIONS FOR MENU IMAGE LINKS AND MENU ITEMS 1000 screen size *****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

/* 1000 Menu Overview Links modifications **********************************************************************************************************************/

	.grid-containerWeOffer {
	  display: grid;
	  grid-template-columns: auto auto;
	  grid-column-gap: 3px;
	  grid-row-gap: 3px;
	}
	.grid-containerWeOffer > div.visualMenuLinkContainer { /*div container for the links to the sections of the different menu options we offer*/
		margin:3px .25% 3px .25%; 
		padding:0px 0px 0px 0px; 
		border:2px solid black;
	}
	div.visualMenuLinkContainer:hover {
		box-sizing:border-box;
		background-color: #4CAF50;
		color: #FFF;
	}
	a.menuTitleLinks {  /* color that the links change to */
		box-sizing:border-box;
		color: #000;
		display:inline-block;
		height:100%;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemImage { 
		box-sizing:border-box;
		width:45%;
		float: left;
		padding-top:2px;
		padding-right:5px;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemTitle {   /* Name/Title of the menu item inside each menu item div */
		box-sizing:border-box;
		font-size: 1.4em; 
		font-weight:600; 
		width:55%;
		float:right;  
		padding: 20px 0 0 0;
		margin: 0;
		text-align:center;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemTitle div.smallTitle { 
		display: inline; 
		font-size:.65em; 
		font-weight:600;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemDescrip {
		box-sizing:border-box;
		font-size: .95em; 
		padding: 5px; 
		font-weight:400; 
		float:left; 
		width:100%;
		text-align:left; 
	}
	
	
	
/* 1000 SubMenu Overview Links modifications **********************************************************************************************************************/	
	.grid-containerWeOfferTypes {
	  display: grid;
	  grid-template-columns: auto auto;
	  grid-column-gap: 3px;
	  grid-row-gap: 3px;
	}
	.grid-containerWeOfferTypes > div.visualSubMenuLinkContainer { /*div container for the links to the sections of the different menu options we offer*/
		margin:3px .25% 3px .25%; 
		padding:0px 0px 0px 0px; 
		border:2px solid black;
	}
	div.visualSubMenuLinkContainer:hover {
		box-sizing:border-box;
		background-color: #4CAF50;
		color: #FFF;
	}
	a.subMenuTitleLinks {  /* color that the links change to */
		box-sizing:border-box;
		color: #000;
		display:inline-block;
		height:100%;
	}
	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemImage { 
		box-sizing:border-box;
		width:30%;
		float: left;
		padding-top:2px;
		padding-right:5px;
	}

	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemTitle {   /* Name/Title of the menu item inside each menu item div */
		box-sizing:border-box;
		font-size: 1.4em; 
		font-weight:600; 
		width:70%;
		float:right;  
		padding: 5px 0 0 0;
		margin: 0;
		text-align:center;
	}
	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemTitle div.smallTitle { 
		display: inline; 
		font-size:.65em; 
		font-weight:600;
	}
	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemDescrip {
		box-sizing:border-box;
		font-size: .95em; 
		padding: 10px 5px 2px 5px; 
		font-weight:400; 
		float:left; 
		width:70%;
		text-align:left; 
	}
	
/* 1000 MENU ITEM grid modifications *************************************************************************************************************************/
	.grid-containerMenuItem {
	  display: grid;
	  grid-template-columns: auto auto;
	  grid-column-gap: 5px;
	  grid-row-gap: 5px;
	}
	.grid-containerMenuItem > div.menuItem { /*div container for the links to the sections of the different menu options we offer*/
		margin:0px; 
		padding:5px; 
		background-image:url(../images/backgroundImage400x267px.jpg);
		/* background-color:#FCEBBF; */ 
		border:2px solid #000;
		float:left;
	}
	div.menuItem div.menuItemTitle { /*Title of each Menu Item inside each menuItem div */
		box-sizing:border-box;
		font-size: 1em; 
		font-weight:600; 
		float:left; width:47%; 
	}
	div.menuItem div.menuItemDescrip {  /*Description of each menu item inside each menu item div */
		box-sizing:border-box;
		font-size: .90em; 
		text-align:justify;
		font-style:normal;
		font-weight:400; 
		float:left; 
		width:47%; 
		
	} 
	div.menuItem img{   /*image insdie the each menu item div */
		box-sizing:border-box; 
		width:47%; float:right; 
		margin:0; 
		padding:3px; 
		background-color:#FFF; 
	}
	div.menuItem div.menuItemPriceTable { 
		width:100%; 
		clear:both; 
		padding-top:5px;
	}

	/*  pizza pricing table */
div.menuItem table.menuItemPriceTablePizza { width:100%; }	
div.menuItem table.menuItemPriceTablePizza th { text-align:left; padding-left:10px; font-size:.85em;  }
div.menuItem table.menuItemPriceTablePizza th.small { text-align:left; padding-left:10px; font-size:.7em; }
div.menuItem table.menuItemPriceTablePizza td { width:20%; text-align:left; padding-left:3px; font-size:.85em; }
div.menuItem table.menuItemPriceTablePizza td.small { width:20%; text-align:left; padding-left:3px; font-size:.8em; }

	/*  salad and sub pricing table with three columns */
div.menuItem table.menuItemPriceTableThree { width:100%; }
div.menuItem table.menuItemPriceTableThree th { text-align:right; padding-left:10px; font-size:.85em; }
div.menuItem table.menuItemPriceTableThree th.small { text-align:right; padding-left:10px; font-size:.7em; }
div.menuItem table.menuItemPriceTableThree td { width:20%; text-align:left; padding-left:3px; font-size:.85em; }
div.menuItem table.menuItemPriceTableThree td.small { width:20%; text-align:left; padding-left:3px; font-size:.8em; }

	/* pricing table with  two price columns (sandwiches and desserts) */
div.menuItem table.menuItemPriceTableTwo { width:60%; }
div.menuItem table.menuItemPriceTableTwo th { text-align:right; padding-left:10px; font-size:.85em; }
div.menuItem table.menuItemPriceTableTwo th.small { text-align:right; padding-left:10px; font-size:.7em; }
div.menuItem table.menuItemPriceTableTwo td { text-align:left; padding-left:5px; font-size:.85em; }
div.menuItem table.menuItemPriceTableTwo td.small { text-align:left; padding-left:5px; font-size:.8em; }

	/* pricing table with only one price (side salad)*/
div.menuItem table.menuItemPriceTableOne { width:50%; }
div.menuItem table.menuItemPriceTableOne th { text-align:right; padding-left:5px; font-size:.85em; }
div.menuItem table.menuItemPriceTableOne th.small { text-align:right; padding-left:5px; font-size:.7em; }
div.menuItem table.menuItemPriceTableOne td { width:70%; text-align:left; padding-left:8px; font-size:.85em; }
div.menuItem table.menuItemPriceTableOne td.small { width:70%; text-align:left; padding-left:8px; font-size:.8em; }




}  /* end of 1000 media querey */





@media screen and (max-width: 825px) {
	h1 { font-size: 2.2em; }
	
	
	div.menu { width: 72%; float: left; text-align:center; margin:0; padding:0; }
	div.subMenu { width: 28%; float: left; text-align: center; margin:0; padding:0; }
	
/********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************* Header7 825 ****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************** 7777777 */
	/*   used to be:      header { height: 193px; background-image: url(../images/banner/banner_pizza_MeatLoversPC.jpg); }   */
	
	
	header { min-height: 180px; background-image:none; overflow:none; }   
	
	header a.logo { display: block; width: 20%; height: auto; }
	header div.hero { top: 120px; left 48%; }
	

	/* Section - Atmosphere */
	section.atmosphere article { padding-left: 325px; background-size: 300px auto; }
	
	/* Section - customers */
	section.customers blockquote p.quote {font-size: 1.1em; line-height: 1.2em; }
	section.customers blockquote p.credit { font-size: .85em; }	
	
	div.feedbackform {
		width: 80%;
	}

/* 825 online ordering menu item confirm modifications */
	#confirmCamarilloBox div.menuTitle { 
		font-size:1.7em;
	}	
	section.main div.confirmCamBox { 
			width:60%; 
			padding:10px; 
			font-size:1.0em; 
		}
		input[type="radio"] {
			margin: 10px 0 10px 0;			
		}
		input[type="submit"] {
			font-size:1.4em;
		}
		input[type="submit"]:hover {
			font-size:1.4em;
		}
		section.main div.menuSubTitleRIGHT {
			box-sizing:border-box;
			width:49%;
			float:right;
			text-align:left;
			margin: 0 0 10px 0;
			font-size:1.5em;
			font-weight:700;
			font-style:oblique;
		}
		section.main div.menuSubTitleRIGHT div.wBG {
			color:#FFF; 
			background-color:#4CAF50; 
			padding:15px;
			margin: 100px 0 50px 0;	
		}
	

	.itemBeingOrderedConfirm {
		width:35%;
		text-align:center;
		font-size:2.0em;
		font-weight:600em;
		margin-left:15px;
	}
	.itemBeingOrderedConfirm img{
		width:100%;
		height:auto;
		float:left;
	}
	.notification {
			box-sizing:border-box;
			width:100%;
			float:right;
			text-align:left;
			margin: 0 0 10px 0;
			font-size:1.3em;
			font-weight:700;
			font-style:oblique;
		}
	section.main div.notification div.wBG {
		color:#FFF; 
		background-color:#4CAF50; 
		padding:15px;
		margin: 10px 0 10px 0;	
	}
	section.main div.notification div.wBG div.smallTitle {
		font-size:.75em;
		float:inherit;
	}






}




@media screen and (min-width:769px) {
      #main-navigation { display:block !important; }
}

@media screen and (max-width: 768px) {
	
	h1 { font-size: 1.8em; }
	h2 { font-size: 1.4em; }
	h3 { font-size: 1.1em; }
	a.btn { font-size: 1em; }



    #menu-icon {
        display: inline-block;
    }

    #main-navigation{
        background-color: #4d525b;
        width: 100%;
        text-align: center;
        display: none;
    }

    #main-navigation ul li {
        display: block;
       	margin: 0 auto;
        padding: 0;
		width:100%;
    }

    #main-navigation ul li a {
        font-size: 18px;
    }

/* 768 online ordering menu item confirm modifications */
	#confirmCamarilloBox div.menuTitle { 
		font-size:1.5em;
	}
	section.main div.confirmCamBox { 
		padding:10px; 
		font-size:.9em; 
		margin: 5px; 
	}
	input[type="radio"] { /* 316316 */
		border: 0px;
		margin: 10px 0 10px 0;			
	}
	input[type="submit"] {
		font-size:1.2em;
	}
	input[type="submit"]:hover {
		font-size:1.2em;
	}
		
	.itemBeingOrderedConfirm {
		text-align:center;
		font-size:1.7em;
		margin-left:5px;
	}
	.itemBeingOrderedConfirm img{
		width:100%;
		height:auto;
		float:left;
	}
	.notification {
			margin: 0 0 10px 0;
			font-size:1.0em;
		}
	section.main div.notification div.wBG {
		color:#FFF; 
		background-color:#4CAF50; 
		padding:8px;
		margin: 5px 0 5px 0;	
	}
	
	
	
	
	
	/* Header */
	
	header {
		min-height:145px;
	}
	
	
	     /*header a.logo { width: 100px; height: 100px; }  used to have this before the dynamic header percentage 7777777*/
	header div.hero { top: 115px; left: 70%; }
	
	/* Section - Main */
	section.main { margin-top: 10px; margin-bottom: 10px; }
	section.main aside div.content { background-size: 55px 55px; padding-top: 60px; }
	
	/* Section - Customers */
	section.customers aside div.content img { width: 85%; }
	


 /* changes the topNav display */
	.topnav a:not(:first-child) {display: none;}
  	.topnav a.icon {
    	float: right;
    	display: block;
  	}
	.topnav.responsive {position: relative;}
  	.topnav.responsive a.icon {
    	position: absolute;
    	right: 0;
    	top: 0;
  	}
  	.topnav.responsive a {
    	float: none;
    	display: block;
    	text-align: left;
  	}

 /* changes the menunav display */
	.menunav a:not(:first-child) {
		display: none;

	}
  	.menunav a.iconMenu {
    	float: right;
    	display: block;
  	}
	.menunav.responsiveMenu {  /*tells the menu where to go when you click the icon */
		position: relative;
	}
  	.menunav.responsiveMenu a.iconMenu {
    	position: absolute;
    	right: 0;
    	top: 0;
  	}
  	.menunav.responsiveMenu a {
    	float: none;
    	display: block;
    	text-align: center;
  	}
	
/* 768 but was 625 before 07082019  625 Menu Overview Links modifications **********************************************************************************************************************/

	.grid-containerWeOffer {
	  display: grid;
	  grid-template-columns: auto auto auto;
	  grid-column-gap: 3px;
	  grid-row-gap: 3px;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemImage { 
		width:100%;
		padding-top:2px;
		padding-right:0;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemTitle {   /* Name/Title of the menu item inside each menu item div */
		font-size: 1.4em; 
		font-weight:600; 
		width:100%;
		padding: 10px 0 0 0;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemTitle div.smallTitle { 
		font-size:.65em; 
		font-weight:550;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemDescrip {
		font-size: .95em; 
		display:none;
	}
	
	
	
/*  768 but was 625 before 07082019 625 SubMenu Overview Links modifications **********************************************************************************************************************/	
	.grid-containerWeOfferTypes {
	  display: grid;
	  grid-template-columns: auto auto auto;
	  grid-column-gap: 2px;
	  grid-row-gap: 2px;
	}
	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemImage { 
		width:100%;
	}

	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemTitle {   /* Name/Title of the menu item inside each menu item div */
		font-size: 1.25em; 
		font-weight:600; 
		width:100%; 
		padding: 15px 0 0 0;
	}
	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemTitle div.smallTitle { 
		font-size:.65em; 
		font-weight:550;
	}
	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemDescrip {
		width:100%;
		display:none;
	}	
	
	
	
	
	
	
	
	
}



@media screen and (max-width: 700px) {

/* 700 online ordering menu item confirm modifications */
	#confirmCamarilloBox div.menuTitle { 
		font-size:1.3em;
	}	
}



@media screen and (max-width: 625px) {
	

	h1 { font-size: 1em; }
	h3 { margin-bottom: 0px; }
	a.btn {font-size: .9em; }

/********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************* Header7 625 ****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************** 7777777 */
	/*   used to be:      header { height: 193px; background-image: url(../images/banner/banner_pizza_MeatLoversPC.jpg); }   */
	
	header {
		min-height:100px;
	}
	/* Header */
	/* header { height: 145px; background-image: url(../images/banner/storeBanner03-625pxx145px.jpg); background-position: left right; } */
	
	
	/* header a.logo { width: 100px; height: 100px; } */
	header div.hero { top: 115px; left: 70%; }
	
	/* Loyalty Rewards page mods */
	header.loyaltyRewards { background: #cf0004 url(../images/banner/joinRewardsBanner625x200px.jpg) no-repeat center bottom; position:relative; }

	.sticky + section.main #confirmCamarilloBox {
		padding-top: 100px;
	}



	div.feedbackform {
		width: 95%;
	}


/* 625 online ordering menu item confirm modifications */
	#confirmCamarilloBox div.menuTitle { 
		font-size:1.1em;
	}



/* 00000 MAIN MENU NAVIGATION topnav  for 625px *************************************************************************************************************/
	
			/* Style the links inside the navigation bar */
			.topnav a {
				padding: 1px 8px;
				text-decoration: none;
				font-size: 1em;
			}
			
			/* Add an active class to highlight the current page */
			.active {
				background-color: #4CAF50;
				color: white;
			}
			
			/* Hide the link that should open and close the topnav on small screens */
			.topnav .icon {
				display: none;
			}
			
			/* Dropdown container - needed to position the dropdown content */
			.dropdown {
				float: left;
				overflow: hidden;
			}
			
			/* Style the dropdown button to fit inside the topnav */
			.dropdown .dropbtn {
				font-size: 17px; 
				border: none;
				outline: none;
				color: white;
				padding: 5px 16px;
				background-color: inherit;
				font-family: inherit;
				margin: 0;
			}
			
			/* Style the dropdown content (hidden by default) */
			.dropdown-content {
				display: none;
				position: absolute;
				background-color: #f9f9f9;
				min-width: 160px;
				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				z-index: 1;
			}
			
			/* Style the links inside the dropdown */
			.dropdown-content a {
				float: none;
				color: black;
				padding: 5px 16px;
				text-decoration: none;
				display: block;
				text-align: left;
			}
			
			/* Add a dark background on topnav links and the dropdown button on hover */
			.topnav a:hover, .dropdown:hover .dropbtn {
				background-color: #555;
				color: white;
			}
			
			/* Add a grey background to dropdown links on hover */
			.dropdown-content a:hover {
				background-color: #ddd;
				color: black;
			}
			
			/* Show the dropdown menu when the user moves the mouse over the dropdown button */
			.dropdown:hover .dropdown-content {
				display: block;
			}






	
/* top location bar Navigation for 625px *************************************************************************************************************************/

	
	#locationNavbar div.thirds {
	  font-weight:600;
	  padding: 0px 2px 0 2px;
	  font-size: 1.15em;
	}
	/* #locationNavbar div.thirds:hover, #locationNavbar div.thirds div.descrip:hover {
		background-color: #ddd;
		color: black;
	} */
	
	#locationNavbar div.thirds div.descrip {
	  font-size: .75em;
	}
	
	#locationNavbar div.thirds div.orderNow {
	  width:auto;
	  float: center;
	  display: block;
	  padding: 1px 0 0 0;
	  font-size: .75em;
	}
	
	#locationNavbar div.thirds a.StartOrder {
		margin:auto;
		width:60%;
		padding:1px 0;
	}
	
	#locationNavbar p.small {  															/* check - might need to adjust this part copy and pasted didnt change... */
		color:#666;	
		font-size:.9em;
	}
	
	
	#locationNavbar p.largeRed {														/* check - might need to adjust this part copy and pasted didnt change... */
		color:#F00;	
		font-size:1em;
		font-weight:600;
	}	
	
	
	
	



/********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************* GRID MODIFICATIONS FOR MENU IMAGE LINKS AND MENU ITEMS 625 screen size *****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/


	
/* 625 MENU ITEM grid modifications *************************************************************************************************************************/
	.grid-containerMenuItem {
	  display: grid;
	  grid-template-columns: auto auto;
	  grid-column-gap: 5px;
	  grid-row-gap: 5px;
	}
	div.menuItem div.menuItemTitle { /*Title of each Menu Item inside each menuItem div */
		font-size: 1.2em; 
		font-weight:600; 
		float:none;
		width:100%;
		margin: 0 auto;
		
	}
	div.menuItem div.menuItemDescrip {  /*Description of each menu item inside each menu item div */
		font-size: .90em; 
		width:100%; 
		padding-top:7px;
	} 
	div.menuItem div.menuItemImage {
		clear:both;
		float:none;
		width:90%;
		margin: 0 auto;
	}
	div.menuItem div.menuItemImage img{   /*image insdie the each menu item div */
		width:100%; 
		float:none; 
		margin:0 auto; 
		padding:3px; 
	}
	
	div.menuItemOrderOnline {
		box-sizing:border-box;
		width:100%;
		text-align:center;
	}
	div.menuItem div.menuItemPriceTable { 
		width:100%; 
		clear:both; 
		padding-top:5px;
	}
	
	/*  pizza pricing table */
div.menuItem table.menuItemPriceTablePizza { width:100%; }	
div.menuItem table.menuItemPriceTablePizza th { text-align:left; padding-left:10px; font-size:.65em;  }
div.menuItem table.menuItemPriceTablePizza th.small { text-align:left; padding-left:10px; font-size:.5em; }
div.menuItem table.menuItemPriceTablePizza td { width:20%; text-align:left; padding-left:3px; font-size:.65em; }
div.menuItem table.menuItemPriceTablePizza td.small { width:20%; text-align:left; padding-left:3px; font-size:.6em; }

	/*  salad and sub pricing table with three columns */
div.menuItem table.menuItemPriceTableThree { width:100%; }
div.menuItem table.menuItemPriceTableThree th { text-align:right; padding-left:10px; font-size:.65em; }
div.menuItem table.menuItemPriceTableThree th.small { text-align:right; padding-left:10px; font-size:.5em; }
div.menuItem table.menuItemPriceTableThree td { width:20%; text-align:left; padding-left:3px; font-size:.65em; }
div.menuItem table.menuItemPriceTableThree td.small { width:20%; text-align:left; padding-left:3px; font-size:.6em; }

	/* pricing table with  two price columns (sandwiches and desserts) */
div.menuItem table.menuItemPriceTableTwo { width:60%; }
div.menuItem table.menuItemPriceTableTwo th { text-align:right; padding-left:10px; font-size:.85em; }
div.menuItem table.menuItemPriceTableTwo th.small { text-align:right; padding-left:10px; font-size:.7em; }
div.menuItem table.menuItemPriceTableTwo td { text-align:left; padding-left:5px; font-size:.85em; }
div.menuItem table.menuItemPriceTableTwo td.small { text-align:left; padding-left:5px; font-size:.8em; }

	/* pricing table with only one price (side salad)*/
div.menuItem table.menuItemPriceTableOne { width:50%; }
div.menuItem table.menuItemPriceTableOne th { text-align:right; padding-left:5px; font-size:.85em; }
div.menuItem table.menuItemPriceTableOne th.small { text-align:right; padding-left:5px; font-size:.7em; }
div.menuItem table.menuItemPriceTableOne td { width:70%; text-align:left; padding-left:8px; font-size:.85em; }
div.menuItem table.menuItemPriceTableOne td.small { width:70%; text-align:left; padding-left:8px; font-size:.8em; }



	
	/* Section - Main ************************************************************************************************************************/
	
	
		section.main img.title {
			box-sizing:border-box;
			width:50%;
			float:left;
			display:none; /*just stopped displaying on 8/14/18 CHECK TO MAKE SURE OK */
		}	
	
	
	
	section.main aside { width: 100%; float: none; text-align: center; }
	
	section.main aside div.content {
		margin: 8px 20px 8px 0px;
		padding: 5px 0px 10px 10px;
		background-size: 50px 50px;
		background-position: 20px 5px;
	}

	
	
	/* Section - Atmosphere - wonders of take-n-bake ***************************************************************************************/
	section.atmosphere article { padding: 190px 20px 0px 0px; background-size: 300px auto; min-height: initial; }
	
	
	/* Section - Customers -  was how-to ***************************************************************************************************/
	section.customers aside { width: 100%; float: none; margin: 0; position: relative; }
	
	section.customers aside div.content { padding: 20px 20px 20px 150px; }
	
	section.customers aside div.content p { font-size: .9em; }
	
	section.customers aside div.content img {
		display: inline-block;
		width: 125px;
		position: absolute;
		top: 30px; left: 0px;		
	}
	
	section.customers blockquote {
		margin: 0 20px 0 40px;
		width: 90%;
		padding: 1px 0px 20px 0px;
		position: relative;
	}
	
	section.customers blockquote p.credit { margin-bottom: 0px; }
	
	
	/* Footer */
	
	footer div.content { display: block; margin-top: 15px; }  /* div will take up full width and space anchor links aways from copyright symbol */
	
	footer div. content a { margin: 0 0 0 0; }  /* aligning footer */


/* 625 container for each submenu item of menu options layout *************************************************************************************************************/
	div.menuTitle {
		
		padding:10px 0px 10px 0px; 
		color:#FFF; 
		background-color:#4CAF50; 
		font-size:1.5em; font-weight:600; 
		font-style:oblique; 
		margin: 0px 0px 2px 0px; 
		border-bottom:medium solid #999; 
	}
		
	div.titleBox {
		width:100%
	}
	
	div.tnbBox div.titleImageBox {
		display:none;
		
	}
}


@media screen and (max-width: 550px) {
	
	
	
	header { height: auto; background-image:none; overflow:none; } 
	
/* 550 online ordering menu item confirm modifications */
	#confirmCamarilloBox div.menuTitle { 
		font-size:.92em;
	}
	section.main div.confirmCamBox { 
		width:100%;
		font-size:.9em; 
		margin: 0;
		padding:10px 20px 20px 10px;
	}
	input[type="radio"] { /* 316316 */
		margin: 0px 0 0px 0;			
	}
	.itemBeingOrderedConfirm {
		width:100%;
		height:auto;
		text-align:center;
		font-size:1.0em;
		font-weight:600em;
		margin-left:0;
	}
	input[type="radio"] {
		margin: 0 5px 0 5px;	
		padding: 0 5px o 5px;
	}
	input[type="submit"] {
		margin-top:5px;
		padding: 10px; /* height of image */
	}
	input[type="submit"]:hover {
		margin-top:5px;
		padding: 10px; /* height of image */
	}
	.itemBeingOrderedConfirm img{
		width:50%;
		height:auto;
		float:inherit;
		margin: 0 auto;
	}
	.notification {
			margin: 0 0 0 0;
			font-size:1.0em;
		}
	section.main div.notification div.wBG {
		color:#FFF; 
		background-color:#4CAF50; 
		padding:8px;
		margin: 0px 0 0px 0;	
	}	

/* 550 MENU ITEM grid modifications *************************************************************************************************************************/
	.grid-containerMenuItem {
	  display: grid;
	  grid-template-columns: auto;
	  grid-column-gap: 0px;
	  grid-row-gap:2px;
	}
	.grid-containerMenuItem > div.menuItem { /*div container for the links to the sections of the different menu options we offer*/
		border:1px solid #000;
	}
	div.menuItem div.menuItemTitle { /*Title of each Menu Item inside each menuItem div */
		font-size: 1.1em; 
		font-weight:600; 
		float:left;
		width:50%;
		
	}
	div.menuItem div.menuItemDescrip {  /*Description of each menu item inside each menu item div */
		font-size: .90em; 
		width:50%; 
		padding-top:7px;
		float: left;
		text-align:left;
	} 
	div.menuItem div.menuItemImage {
		float:right;
		width:50%;
		margin: 0 auto;
	}
	div.menuItem div.menuItemImage img{   /*image insdie the each menu item div */
		width:100%; 
		float:right; 
		padding:3px; 
	}
	div.menuItemOrderOnline {
		box-sizing:border-box;
		width:100%;
		text-align:center;
	}
	div.menuItem div.menuItemPriceTable { 
		width:100%; 
		clear:both; 
		padding-top:5px;
	}
	
/* 550 Menu Overview Links modifications **********************************************************************************************************************/

	.grid-containerWeOffer {
	  display: grid;
	  grid-template-columns: auto auto;
	  grid-column-gap: 3px;
	  grid-row-gap: 3px;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemImage { 
		width:100%;
		padding-top:2px;
		padding-right:0;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemTitle {   /* Name/Title of the menu item inside each menu item div */
		font-size: 1.4em; 
		font-weight:600; 
		width:100%;
		padding: 10px 0 0 0;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemTitle div.smallTitle { 
		font-size:.65em; 
		font-weight:550;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemDescrip {
		font-size: .95em; 
		display:none;
	}
	
	
	
/*  550 SubMenu Overview Links modifications **********************************************************************************************************************/	
	.grid-containerWeOfferTypes {
	  display: grid;
	  grid-template-columns: auto auto;
	  grid-column-gap: 2px;
	  grid-row-gap: 2px;
	}
	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemImage { 
		width:100%;
	}

	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemTitle {   /* Name/Title of the menu item inside each menu item div */
		font-size: 1.25em; 
		font-weight:600; 
		width:100%; 
		padding: 15px 0 0 0;
	}
	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemTitle div.smallTitle { 
		font-size:.65em; 
		font-weight:550;
	}
	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemDescrip {
		width:100%;
		display:none;
	}		
	
	
	
	
}


@media screen and (max-width: 425px) {
	
	
	header { max-height: 100px; background-image:none; overflow:none; }                                                          /*CHECK max height used to be 80px */
	header.menu { background: #cf0004 url(../images/banner/banner_pizza_MeatLovers425x100px.jpg) no-repeat center bottom; position:relative; }
	
	/* Slideshow container-header-banner */
	.slideshow-container-sidebar {
	  
	  max-width: 240px;
	  max-height: 400px;
	  position: relative;
	  margin: auto;
	  overflow: hidden;
	  z-index: 0;
	}
  
	div.newsBulletin {
		display:none;	
	}
	div.menu { 
		width: 100%;
		font-size:.75em;	
	}
	div.subMenu { width:100%;  }

	
	aside {
		width: 100%;
		padding-bottom: 10px;
		border-bottom: 1px solid #999;	
	}


		 /* 1234567 works with } here */
	
	
		/* 1234567 doesnt work with } here */
	div.endSectionBorder { 
		width:93%;
		margin: 10px;
	}
	div.endSectionBorderOnlySmScreens { 
		display: block;
		width:93%;
		margin: 10px;

	}


	div.feedbackform p { 
		float: left;
		width: 100%;
	}


/* 425 Confirm online ordering modifications **********************************************************************************************************************/
	#confirmCamarilloBox div.menuTitle { 
		font-size:.85em;
	}
	section.main div.confirmCamBox { 
		
		width:100%;
		font-size:.9em; 
		margin: 0;
		padding:10px 20px 20px 10px;
	}
	input[type="radio"] { /* 316316 */
		margin: 0px 0 0px 0;			
	}
	.itemBeingOrderedConfirm {
		width:100%;
		height:auto;
		text-align:center;
		font-size:1.0em;
		font-weight:600em;
	}
	input[type="radio"] {
		margin: 0 5px 0 5px;	
		padding: 0 5px o 5px;
	}
	input[type="submit"] {
		margin-top:5px;
		padding: 10px; /* height of image */
	}
	input[type="submit"]:hover {
		margin-top:5px;
		padding: 10px; /* height of image */
	}
		
	.itemBeingOrderedConfirm img{
		width:50%;
		height:auto;
		float:inherit;
		margin: 0 auto;
	}
	.notification {
			margin: 0 0 0 0;
			font-size:1.0em;
		}
	section.main div.notification div.wBG {
		color:#FFF; 
		background-color:#4CAF50; 
		padding:8px;
		margin: 0px 0 0px 0;	
	}	
	
	
	
/********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************* GRID MODIFICATIONS FOR MENU IMAGE LINKS AND MENU ITEMS 425 screen size *****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

/* 425 Menu Overview Links modifications **********************************************************************************************************************/

	.grid-containerWeOffer {
	  display: grid;
	  grid-template-columns: auto auto;
	  grid-column-gap: 3px;
	  grid-row-gap: 3px;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemImage { 
		width:100%;
		padding-top:2px;
		padding-right:0;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemTitle {   /* Name/Title of the menu item inside each menu item div */
		font-size: 1.4em; 
		font-weight:600; 
		width:100%;
		padding: 10px 0 0 0;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemTitle div.smallTitle { 
		font-size:.65em; 
		font-weight:550;
	}
	div.visualMenuLinkContainer a.menuTitleLinks div.menuItemDescrip {
		font-size: .95em; 
		display:none;
	}
	
	
	
/* 425 SubMenu Overview Links modifications **********************************************************************************************************************/	
	.grid-containerWeOfferTypes {
	  display: grid;
	  grid-template-columns: auto auto;
	  grid-column-gap: 2px;
	  grid-row-gap: 2px;
	}
	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemImage { 
		width:100%;
	}

	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemTitle {   /* Name/Title of the menu item inside each menu item div */
		font-size: 1.25em; 
		font-weight:600; 
		width:100%; 
		padding: 15px 0 0 0;
	}
	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemTitle div.smallTitle { 
		font-size:.65em; 
		font-weight:550;
	}
	div.visualSubMenuLinkContainer a.subMenuTitleLinks div.menuItemDescrip {
		width:100%;
		display:none;
	}
	
/* 425 MENU ITEM grid modifications *************************************************************************************************************************/
	.grid-containerMenuItem {
	  display: grid;
	  grid-template-columns: auto;
	  grid-column-gap: 0px;
	  grid-row-gap:2px;
	}
	.grid-containerMenuItem > div.menuItem { /*div container for the links to the sections of the different menu options we offer*/
		border:1px solid #000;
	}
	div.menuItem div.menuItemTitle { /*Title of each Menu Item inside each menuItem div */
		font-size: 1.1em; 
		font-weight:600; 
		float:left;
		width:50%;
		
	}
	div.menuItem div.menuItemDescrip {  /*Description of each menu item inside each menu item div */
		font-size: .90em; 
		width:50%; 
		padding-top:7px;
		float: left;
		text-align:left;
	} 
	div.menuItem div.menuItemImage {
		float:right;
		width:50%;
		margin: 0 auto;
	}
	div.menuItem div.menuItemImage img{   /*image insdie the each menu item div */
		width:100%; 
		float:right; 
		padding:3px; 
	}
	div.menuItemOrderOnline {
		box-sizing:border-box;
		width:100%;
		text-align:center;
	}
	div.menuItem div.menuItemPriceTable { 
		width:100%; 
		clear:both; 
		padding-top:5px;
	}



	/*  pizza pricing table */
div.menuItem table.menuItemPriceTablePizza { width:100%; }	
div.menuItem table.menuItemPriceTablePizza th { text-align:left; padding-left:1px; font-size:.85em;  }
div.menuItem table.menuItemPriceTablePizza th.small { text-align:left; padding-left:3px; font-size:.7em; }
div.menuItem table.menuItemPriceTablePizza td { width:20%; text-align:left; padding-left:3px; font-size:.85em; }
div.menuItem table.menuItemPriceTablePizza td.small { width:20%; text-align:left; padding-left:3px; font-size:.8em; }

	/*  salad and sub pricing table with three columns */
div.menuItem table.menuItemPriceTableThree { width:100%; }
div.menuItem table.menuItemPriceTableThree th { text-align:right; padding-left:10px; font-size:.85em; }
div.menuItem table.menuItemPriceTableThree th.small { text-align:right; padding-left:10px; font-size:.7em; }
div.menuItem table.menuItemPriceTableThree td { width:20%; text-align:left; padding-left:3px; font-size:.85em; }
div.menuItem table.menuItemPriceTableThree td.small { width:20%; text-align:left; padding-left:3px; font-size:.8em; }

	/* pricing table with  two price columns (sandwiches and desserts) */
div.menuItem table.menuItemPriceTableTwo { width:60%; }
div.menuItem table.menuItemPriceTableTwo th { text-align:right; padding-left:10px; font-size:.85em; }
div.menuItem table.menuItemPriceTableTwo th.small { text-align:right; padding-left:10px; font-size:.7em; }
div.menuItem table.menuItemPriceTableTwo td { text-align:left; padding-left:5px; font-size:.85em; }
div.menuItem table.menuItemPriceTableTwo td.small { text-align:left; padding-left:5px; font-size:.8em; }

	/* pricing table with only one price (side salad)*/
div.menuItem table.menuItemPriceTableOne { width:50%; }
div.menuItem table.menuItemPriceTableOne th { text-align:right; padding-left:5px; font-size:.85em; }
div.menuItem table.menuItemPriceTableOne th.small { text-align:right; padding-left:5px; font-size:.7em; }
div.menuItem table.menuItemPriceTableOne td { width:70%; text-align:left; padding-left:8px; font-size:.85em; }
div.menuItem table.menuItemPriceTableOne td.small { width:70%; text-align:left; padding-left:8px; font-size:.8em; }	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/* Loyalty Rewards page mods */
		header.loyaltyRewards {
			background: #cf0004 url(../images/banner/joinRewardsBanner425x100px.jpg) no-repeat center bottom; position:relative; 
		}
	
		header.loyaltyRewards a.logo {
			width: 90px; height: 90px; background: rgba(0,0,0,0) url(../images/logo_square.svg) no-repeat center center; /* hid the background by alpha being 0, and just put logo */
			background-size: 90px 90px;
			top: 5px; left: 10px;
			/* background-size: 126px 17px;  needed if logo is a different size, but mine is not */
		}
		.rewardsPageMain p {
			font-size: .45em;
			font-weight:300;
		}
		.rewardsPageMain p.emph {
			text-align: left;
			padding-left:5px;
			font-size: .47em;
			font-weight:500;
			margin:0;
			padding:0;
		}
		.rewardsPageMain h1 {
			font-size: .6em;
			margin-top:5px;
			margin-bottom:5px;
		}
		
		.rewardsPageMain div.center {
			text-align:center;
		}
		
		.rewardsPageMain div.center ul {
			display: inline-block; text-align: left;
			margin-top:0;
			margin-bottom:0;
			padding-right:3px;
		}
		div.rewardsPageMain a {
			font-size:.75em;
		}
	
	
	
div.contentBox {
		box-sizing:border-box;
		width: 100%;
		float: left;
		padding:0;
		margin:0;
	}	
div.menuSubTitleFull {
	box-sizing:border-box;
	width:100%;
	border-top:none;   /* border-top:2px solid #CCC;  */
	float:left; 
	text-align:left;
	margin: 0;
	padding: 0;
	font-size:1.3em; 
	font-weight:700; 
	font-style:oblique; 
	color: #4CAF50;
}

div.titleBoxSmallScreens {
	box-sizing:border-box;
	display:inherit;
	text-align:justify;
	margin: 0 5px;
	font-size: .9em;
}
div.titleBoxSmallScreens div.center {
	text-align:center;
}


section.main img.titleNoSmScreens {
	display: none;
}



/* beverage and extra/add-ons section modifications for 425 **********************************************************************/

	section.main div.beverageItem { width:55%; float:left; text-align:left; padding:0; font-size:1em; font-weight:700; font-style:oblique; margin: 10px 0px 10px 5px; }
	section.main div.beverageItem div.smDescrip { font-weight:400; font-size:.8em; display:inline-block; }
	section.main div.beverageItemList { width:100%; float:left; text-align:left; padding:0; font-size:.8em; font-weight:400; font-style:normal; margin: 2px 0px 10px 0px; }
	
	
	section.main div.doughTable { display:none; }
	
	section.main div.beverageTable { width:100%; display:block; margin: 10px auto; }
	section.main div.beverageTable table.beverageTable { width:100%; }
	section.main div.beverageTable table.beverageTable th { text-align:center; vertical-align:top; width:auto%; font-size:.9em; font-weight:700; font-style:oblique; }
	section.main div.beverageTable table.beverageTable th.centerSmDescrip {text-align:center; vertical-align:top; font-size:.80em; color:#999; }
	section.main div.beverageTable table.beverageTable td { text-align:center; vertical-align:top; font-size:.9em; font-weight:700; font-style:oblique; }
	
	section.main div.doughTableSmScreens { width:100%; display:block; clear:both; margin:0 0 30px 0;   }
	section.main div.doughTableSmScreens table.beverageTable { width:100%; }
	section.main div.doughTableSmScreens table.beverageTable th { text-align:center; vertical-align:top; width:auto%; font-size:.9em; font-weight:700; font-style:oblique; }
	section.main div.doughTableSmScreens table.beverageTable th.centerSmDescrip {text-align:center; vertical-align:top; font-size:.70em; color:#999; }
	section.main div.doughTableSmScreens table.beverageTable td { text-align:center; vertical-align:top; font-size:.9em; font-weight:700; font-style:oblique; }
	
	
	
	section.main div.beverageSideImg { width:41%; height: auto; float:right; text-align:right; padding:0; font-size:1em; font-weight:400; font-style:oblique; margin: 10px 0px 10px 5px; background-image:none;  }
	section.main div.beverageSideImg img {
			 width: 100%; height: auto; margin: 0 auto; display: block;
		}

























	
/* bakingTips page modifications */
	header.bakingTips { height: 281px; background: #cf0004 url(../images/banner/Banner_425x100px_PizzaCookingProgress.jpg) no-repeat center bottom; position:relative; }
	header div.hero_bakingTips { display:none; }
	header div.hero_bakingTips h1 { font-size: .8em; line-height: .7em; margin: 0 0 30px 0; color: #FFF; }
	
	

		
	div.contentBox {
		width:100%;
	}
	
	div.contentBox p{
		width:100%;
		margin: 0;
		padding-left: 15px;
		padding-bottom: 10px;
	}
	div.imageSize{
		width:100%;
	}
	


/*  index page aside bar modifications ********************************************************************/

		section.main .content { margin: 0px; background: no-repeat center top; background-size: 0 0; padding-top: 0px; }

		section.main aside .content.whats-new p { 
			width:100%
			text-align:justify;
			margin-bottom: 10px;
		}
		section.main aside .content.whats-new p::first-letter { 
			padding-left:20px;
		}
		section.main aside .content.whats-new { background-image: none; }
		section.main aside .content.fun-facts { background-image: none; }
		section.main aside .content.locations { background-image: none; }



/*for the orderNow.html page i think *****************************************************************/

		
		
		section.main aside h1 { font-size:2em; margin-bottom: 0px; color: #4CAF50; text-align: center; }
		section.main aside h2 { margin-top:10px; margin-bottom: 0px; font-size:1em;}
		section.main aside h3 a { color: #000; text-decoration: none; font-size:.75em; text-align: center; }  	/* i changed this line not sure i was supposed to */
		section.main aside h3 a:hover {  text-decoration: underline; text-align: center; }						/* i changed this line not sure i was supposed to */
		
		section.main aside a { color: #000; text-decoration: underline; font-size:.75em; } 
		section.main aside a:hover {  text-decoration: none; }					
		
		
		section.main aside h4 { margin-bottom:0px; }
		section.main aside p { margin-bottom:10px; margin-top:10px; font-size:.75em; text-align: center; }
		section.main aside p.strong { font-weight:550; }	
	
	
		section.main aside div.display { display:none;  }
	
	
	
		
		
	header div.hero { width: 80%; left: 66px; top: 0px; text-align:center; display:inherit; }
	
	header div.hero h4 { font-size: 1em; margin-bottom: 5px; float:right; margin-right:10px; clear:both; }
	header div.hero h5 { font-size: .75em; margin-bottom: 5px; float:right; margin-right:10px; clear:both; }
	
	header div.hero a.btn { padding: 2px 30px; margin-right:15px; font-size: .8em; float:right; clear:both;  }
	
	header div.hero a.btn span { display: none; }  /* this line literally deletes part of the button if button was too long for small screens, i would just have to add a span tag to the part i wanted to delete */
	
	
	#locationNavbar div.thirds {
		font-size: .9em;
		 padding: 2px 0px 0 0px;
	}
	#locationNavbar div.thirds div.smaldThirds {
		font-size: .9em;	
	}
	
	#locationNavbar div.thirds div.orderNow {
	  box-sizing:border-box;
	  width:auto;
	  float: center;
	  display: block;
	  color: #4CAF50;
	  text-align: center;
	  padding: 1px 0 0 0;
	  font-size: .6em;
	}	
	
	#locationNavbar div.thirds div.descrip {
		font-size:.75em;
	}
	
	



/* 425 Menu Overview Links modifications ************************************************************************************************1234567**********************/

	section.main div.menu a.menuTitleLinks div.linksToMenuTitles {  /*div container for the menu overview links to menu titles*/
		width:49%; 
		min-height:auto; 
		float:left; 
		margin:3px .25% 3px .25%; 
		padding:0px 0px 0px 0px; 
		border:1px solid black; 
	} 
	
	section.main div.menu a.menuTitleLinks div.linksToMenuTitles div.menuItemTitle {   /*Name/title of the menu item inside each menu item div */
		width:100%;
		padding: 0;
		margin: 0;
		text-align:center;
		
	}

	section.main div.menu a.menuTitleLinks div.linksToMenuTitles div.menuItemDescrip {   /*Description of the menu item inside each menu item div */
		display: none;
	}
	
	section.main div.menu a.menuTitleLinks div.linksToMenuTitles div.menuItemImage {   /*image insdide each link menu navigation */
		box-sizing:border-box;
		width:100%;
		float:left; 
		margin:0 0 0 0; 
		padding-top:2px;	
	}
	section.main div.menu a.menuTitleLinks div.linksToMenuTitles div.menuItemImage img {
		width: 100%;
	}
	
	
	
	section.main div.menu a.menuTitleLinks div.linksToMenuTitles div.menuItemPriceTable { 
		box-sizing:border-box;
		width:100%; 
		clear:both; 
		padding-top:10px;
	}	

	div.menuTitle {
		
		padding:2px 0px 2px 0px; 
		color:#FFF; 
		background-color:#4CAF50; 
		font-size:1.5em; font-weight:600; 
		font-style:oblique; 
		margin: 0px 0px 2px 0px; 
		border-bottom:medium solid #999; 
	}
		
	div.titleBox {
		display:none;
	}
	
	section.main div.tnbBox div.titleImageBox {
		
		width:100%
	}






	section.main div.menuFull a.menuTitleLinks div.linksToMenuTitles {  /*div container for the menu overview links to menu titles*/
		box-sizing:border-box;
		width:99%;
		float: left;
		min-height:auto; 
		padding:0px 0px 0px 0px; 
		border:1px solid black; 
	} 
	
	section.main div.menuFull a.menuTitleLinks div.linksToMenuTitles div.menuItemTitle {   /*Name/title of the menu item inside each menu item div */
		width:70%;
		padding: 8px 0 0 0;
		margin: 0;
		text-align:center;
		font-size:1.4em;
		line-height:1em;
		
	}
	
	section.main div.menuFull a.menuTitleLinks div.linksToMenuTitles div.menuItemTitle div.smallTitle {  font-size:.58em; font-weight:550;}

	section.main div.menuFull a.menuTitleLinks div.linksToMenuTitles div.menuItemDescrip {   /*Description of the menu item inside each menu item div */
		display: none;
	}
	
	section.main div.menuFull a.menuTitleLinks div.linksToMenuTitles div.menuItemImage {   /*image insdide each link menu navigation */
		box-sizing:border-box;
		width:30%;
		float:left; 
		margin:0 0 0 0; 
		padding-top:2px;	
	}
	section.main div.menuFull a.menuTitleLinks div.linksToMenuTitles div.menuItemImage img {
		width: 100%;
	}
	
	
	
	section.main div.menuFull a.menuTitleLinks div.linksToMenuTitles div.menuItemPriceTable { 
		box-sizing:border-box;
		width:100%; 
		clear:both; 
		padding-top:10px;
	}

	section.main div.menuFull div.menuSubTitle {
		box-sizing:border-box;
		width:100%; 
		text-align:center; 
		padding:0;				 /* used to have 80px for top padding because of the sticky nav, but the javascript fixed this */
		margin:0px 0px 10px 0px;  /* used to have -80px for top margin because of the sticky nav, but the javascript fixed this */
		font-size:1.3em; 
		font-weight:550; 
		font-style:oblique;
	}
	
	
	section.main div.menuSubTitle div.wBG {
		color:#FFF; 
		background-color:#4CAF50; 
		padding:2px;
		margin: 2px 0 0 0;
		font-size: .9em;
		
	}
	section.main div.menuSubTitle div.wBG div.smallTitle { display: inline; font-size:.9em; font-weight:500;}

	section.main div.menuSubTitleDescrip { 
		width:97%; 
		float:left; 
		text-align:left; 
		padding:0 3px;
		font-size:.59em; 
		font-weight:400; 
		font-style:normal; 
		margin: 10px 0px 10px 0px; 
	}
	
	section.main div.menuSubTitleDescrip ::first-letter { 
		padding-left:10px;
	}
	
	section.main div.menuSubTitleDescrip p{ 
		text-align:justify; 
		font-style:normal; 
	}



	section.main div.menuSubTitlePic { 
		display: none;
	}
	
	/*right hand side info about sub menus*/
	section.main div.menuSubTitleInfo { 
		display:none;
	} 








/************ Build Your Own Pizza Table Table @425px or less*************************/

	div.pizzaTable { 
		box-sizing: border-box; 
		width: 100%; 
		margin: 0px; 
		padding: 5px 0px 5px 5px; 
		background-image: url(../images/background-image.jpg);
		border: 2px solid black;

		/* background-color:#FFC; */
	}
	div.pizzaTable div.pizzaTableTitle {
		margin: 0;
		font-size: 1.35em;
		font-weight: 600;
		padding: 0px 0 10px 0;
		text-align: center;
		overflow: hidden;
	}
	
	div.pizzaTable div.size {
		clear:left;
		box-sizing:border-box; 
		width:100%;
		margin: 0;
		padding: 0 0 15px 0;
		min height: 200px;
		display: inline;
		float:left;
		text-align:left;
		overflow: hidden;
		
	}
	div.pizzaTable div.crust {
		clear:left;
		width:100%;
		margin: 0;
		padding: 0 0 15px 0;
		min height: 10px;
		overflow: hidden;
	}
	div.pizzaTable div.sauce {
		clear:left;
		width:100%;
		margin: 0;
		padding: 0 0 15px 0;
		min height: 100px;
		overflow: hidden;
	}
	div.pizzaTable div.toppings {
		clear: left;
		width:100%;
		margin: 0;
		padding: 0;
		min height: 100px;
		overflow: hidden;
	}
	
	div.pizzaTable div.step {
		width:25px;
		float: left;
		display: inline;
	}
	div.pizzaTable div.step img {
		width:25px;
		float: left;
		display: inline;
		
	}
	
	div.pizzaTable div.title {
		width:85%;
		display: inline;
		float: left;
		font-size: 1.2em;
		font-weight:700;
		text-align: left;
		padding-left: 10px;
		padding-bottom: 5px;
		min-height: 20px;
	}
	
	div.pizzaTable div.title div.small {
		display:block;
		font-size: .72em;
		font-weight: 400;
		text-align:center;
	}
	div.pizzaTable div.titlePrice {
		font-size:1.2em;
		font-weight: 550;
		float: left;
		padding-left: 140px;
	}
	
	div.pizzaTable div.options {
		width:33.33%;
		float: left;
		font-size: 1em;
		font-weight:400;
		text-align: center;
		padding-bottom:15px;
	}

	div.pizzaTable div.options div.small {
		display:block;
		font-size: .8em;
	}
	
	div.pizzaTable div.toppingOptionsBox {
		clear:left;
		width:100%;
		float:left;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	
	div.pizzaTable div.toppingOptionsBox div.toppingOptionsColumn {
		box-sizing:border-box; 
		float: left;
		width: 50%;
		font-size:1em;
		font-weight:550;
	}

	div.pizzaTable div.pizzaSize {
		width: 19%;
		font-size: 1.1em;
		font-weight: 550;
		float: left;
		text-align:center;
	}
	
	div.pizzaTable div.pizzaFeeds {
		display: block;
		font-size:.64em;
		font-weight: 400;

	}	
	
	div.pizzaTable div.pizzaPrice {
		display: block;
		font-size:.9em;
		font-weight: 400;
		padding-bottom: 10px;

	}	
	
	
	div.pizzaTable div.optionsFour {
		width:25%;
		float: left;
		font-size: .95em;
		font-weight:400;
		text-align: center;
		padding-bottom:0;
	}	


/* 00000 BAKED PIZZAS section @425px ****************************************************************************************************************/

		section.main div.bakedPizzaBox {
			box-sizing:border-box;
			padding-top:10px;
			width:100%;
		}
		
		div.menuSubTitle p.green { color:#4CAF50; margin-bottom:5px; margin-top:5px; font-size: .9em; font-style:normal; }
		div.menuSubTitle p.small { font-size:.7em; font-weight:400; font-style:normal; }
		
		section.main div.bakedPizzaBox table.slices {
			box-sizing:border-box; 
			width: 60%;
			float: left;
			text-align: center;
		}
		section.main div.bakedPizzaBox table.slices th.right {
			
			box-sizing:border-box; 
			text-align: right;
			font-size: .6em;
			font-style:normal;
		}
		section.main div.bakedPizzaBox img.bakedSlices {
			box-sizing:border-box; 
			width: 40%;
			display:inline;	
		}


















/* 00000 CATERING section @425 **********************************************************************************************************************/

		section.main div.CateringBox {
			box-sizing:border-box;
			padding-top:10px;
			width:100%;
		}

		section.main div.titleBox p.title {
			box-sizing:border-box;
			text-align:justify;
			font-size:1.2em;
			width:100%;
			color:#999;
			padding-left: 15px;
			padding-right: 15px;
			float: left;
		}
		section.main img.title {
			box-sizing:border-box;
			width:50%;
			float:left;
		}
		section.main img.titleNoSmScreens { /* title image that will not be displayed on small screens */
			box-sizing:border-box;
			width:50%;
			float:left;
		}
		
		section.main p.title::first-letter {
			font-size:1.75em;

		}

		section.main div.CateringBox div.contentBox {
			box-sizing:border-box;
			width: 97%;
			float: left;
		}
		section.main div.CateringBox div.imageBox {
			box-sizing:border-box;
			width: 35%;
			float: right;
			margin-top:-175px;
			margin-right:5px;
		
		}
		section.main div.CateringBox div.menuSubTitle { 
			width:60%; 
		}
		
		

		
		section.main div.CateringBox div.menuSubTitleFull { /*catering section header titles for each section */
			box-sizing:border-box;
			width:75%; 
			float:left; 
			text-align:left; 
			padding:0;						 /* used to have 80px for top padding because of the sticky nav, but the javascript fixed this */
			margin:0px 0px 0px 5px;				 /* used to have -80px for top margin because of the sticky nav, but the javascript fixed this */
			font-size:1.5em; 
			font-weight:700; 
			font-style:oblique;
		}
		

		section.main div.CateringBox table {
			box-sizing:border-box;
			width:200px;
			margin:auto;
			
		}	
		
		section.main div.CateringBox td {
			padding:0 20px;
		}
		
		section.main div.CateringBox h2 {
			font-size:1em;
		}
		section.main div.CateringBox h5 {
			box-sizing:border-box;
			width: 60%;
			font-size:.75em;
			text-align:left;
			padding: 0 5px 0 5px;
			
		}
		section.main div.CateringBox h5.right {
			font-size:.75em;
			text-align:right;
			padding-right: 15px;
		}

		
		section.main div.CateringBox div.contentBox div.h4smallRegular {
			display:inline;;
			font-size:1em;
			font-weight:400;
			padding-left:5px;
			color:#999;
		}

		section.main div.CateringBox div.h2smallRegular {
			display:block;
			padding-top:5px;
			text-align:center;
			color:#999;
			font-weight:550;
			font-size:.75em;
		}
		
		section.main div.CateringBox div.h2smaller {
			display:block;
			padding-top:5px;
			text-align:center;
			color:#999;
			font-size:.7em;
			font-weight:550;
			
		}
		
		section.main div.CateringBox div.thirds {
			margin-top:0px;
		}

		section.main div.CateringBox div.contentBox p {
			padding-left: 5px;
			text-align:justify;
			font-size: .8em;
		}



		section.main div.CateringBox div.thirds table {
			box-sizing:border-box;
			width:100%;
		}		
		
		section.main div.CateringBox div.thirds table td {
			box-sizing:border-box;
			width:auto;
			font-size:.85em;
			text-align:center;
		}		
		
		section.main div.CateringBox div.thirds table td.price {
			width:auto;
			text-align:right;
		}
		
		section.main div.CateringBox div.thirds table th.narrow {
			box-sizing:border-box;
			width:auto;
			padding:0 1px;
			color:#999;
			font-size:.7em;
		}



		
		section.main div.CateringBox div.halves table.saladBowls {
			box-sizing:border-box;
			table-layout:fixed;
			width: auto;
			height:auto;
			
			
		}
		
		section.main div.CateringBox div.halves table.saladBowls th.name {
			width:110px;
			padding:0 2px;
			text-align:left;
			font-size:.9em;
			
		}
		
		section.main div.CateringBox div.halves table.saladBowls th.price {
			width:20px;
			padding:0 2px;
			font-size:.9em;
		}
		section.main div.CateringBox div.halves table.saladBowls td.name {
			width:110px;
			padding:0 2px;
			text-align:left;
			font-size:.8em;
		}
		section.main div.CateringBox div.halves table.saladBowls td {
			width:20px;
			padding:0 2px;
			font-size:.8em;
		}
		
		section.main div.imageBox h2 {	
			box-sizing:border-box;
			float:left;
			padding: 15px 5px 0 20px;
		}
		
		div.imageBox div.h2smallRegular {
			display:inline;
			font-size:.6em;
			font-weight:550;	
		}
		div.imageBox div.h2smaller {
			display: inline;
			font-size: .55em;
			font-weight: 550;
			padding-top: 0;
		}
		
		



/* 00000 Specials Section for 425 px or less *************************************************************************************/

		
	section.main div.SpecialsBox div.menuSubTitleFull {
		width:100%;
		font-size:1.35em; 
		font-weight:550; 
		padding-top:5px;
		padding-bottom: 5px;
		margin: 5px 0px 5px 2px;
	}
	section.main div.SpecialsBox div.contentBox {
		box-sizing:border-box;
		width: 60%;
		float: left;	
	}
	section.main div.SpecialsBox div.contentBox2 {
		box-sizing:border-box;
		width: 100%;
		float: left;
		padding-right: 10px;
			
	}	
	section.main div.SpecialsBox div.imageBox {
		width: 40%;
		float: right;
		padding-top: 24px;
	}
	section.main div.SpecialsBox div.imageBox2 {
		width: 100%;
		float: right;
		padding-top: 5px;
	}	
	section.main div.SpecialsBox div.contentBox h2 {
		text-align:left;
		font-size: 1em;
		padding-left: 5px;	
	}	
	section.main div.SpecialsBox div.contentBox2 h2 {
		text-align:left;
		font-size: 1em;
		padding-left: 5px;	
	}
	section.main div.SpecialsBox div.contentBox h3 {
		text-align:left;
		padding-left: 25px;
	}

	section.main div.SpecialsBox div.contentBox h4 {
		text-align:left;
		padding-left: 40px;
	}	

	section.main div.SpecialsBox div.contentBox p {
		text-align:left;
		padding-left: 40px;
	}
	section.main div.SpecialsBox div.contentBox2 p {
		text-align: justify;
		padding-left: 15px;
	}
	
	section.main div.SpecialsBox div.contentBox table {
		width: 100%;
		margin-bottom: 20px;
	}		

	section.main div.SpecialsBox div.contentBox td {
		font-size: 1.1em;
		text-align: left;
		padding: 0px 0 0px 5px;
	}		

	section.main div.SpecialsBox div.contentBox td.price {
		width:5%;
		text-align:right;
		padding-right: 5px;
		font-size:.85em;
	}


	section.main div.SpecialsBox div.contentBox p.small {
		text-align:left;
		padding-left: 10px;
		font-size:.65em;
		margin-bottom:0px;
		color:#999;
	}		




	
	
	
	/*
	
	section.main div.pizzaTable div.smDescrip { font-size:.70em; color:#000; }
	
	section.main div.pizzaTable table.pizzaTable { 
		width:100%;
		text-align:center;
	}
	
	section.main div.pizzaTable th.step { width:42px; padding-bottom:50px; }
	section.main div.pizzaTable th {text-align:left; vertical-align:top; font-size:1.25em; }
	section.main div.pizzaTable th.center {text-align:center; vertical-align:top; font-size:1.25em; width:25%; }
	section.main div.pizzaTable th.centerNarrow {text-align:center; vertical-align:top; font-size:1.25em; width: 18%; }
	section.main div.pizzaTable th.centerSmDescrip {text-align:center; vertical-align:top; font-size:.90em; color:#999; width:auto; }
	section.main div.pizzaTable th.crust { padding-bottom:50px; }
	section.main div.pizzaTable th.sauce { padding-bottom:100px }
	section.main div.pizzaTable th.toppings { padding-bottom:25px }
	
	section.main div.pizzaTable td {text-align:center; vertical-align:top; font-size:1.25em; }
	
	section.main div.pizzaTable table.toppings {float:center; width:96%; }
	section.main div.pizzaTable table.toppings td {width:24%; font-size:1em; color:#333; font-weight:525;}
	
	*/
	
	
	section.main div.menuSubTitleInfo table.subs { width:100%; }
	


	
	
	
	

	
	
	
	
	
	
	
	
	
	
	
	
	
	/* Section - Customers */
	
	section.customers aside div.content { padding: 140px 20px 20px 0px; }
	
	section.customers aside div.content img { width: auto; height: 100px; top: 30px;}
	
	section.customers blockquote { margin: 10px 40px 0 20px; }
	
	/* Footer */
	
	footer::after { content:''; display: block; clear: both; }  /* footer element will extend in height to cover all of childern inside that have float properties */
	
	footer div.content a {
		display: inline-block; margin: 0 0 10px 0;
		float: left;
		clear: both; /* everyone of anchor links will float to left hand side but each element will clear on both sides which will stack all anchor links; */
		
		
	}
	
	
}



@media screen and (max-width: 370px) {
	
	section.main div.menu a.menuTitleLinks div.linksToMenuTitles div.menuItemTitle div.menuItemTileSmall {   /*Name/title of the menu item inside each menu item div */
		width:100%;
		padding: 0;
		margin: 0;
		text-align:center;
		font-size: .75em;
		min-height:24px;
		
	}
	
  	.prev, .next,.text {
		font-size: 11px
	}
}