/******************** PIZZABILITY ********************/

/* COLORS
/* #ed1c24; /*RED*/
/* #367c2b; /*GREEN*/
/* #82a837; /* LIGHT GREEN */
/* #e8a022; /*YELLOW*/
/* #e78800; /*ORANGE*/

body {
	margin: 0;
	padding: 0;
	background: #ffffff;
	color: #000000;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 18px;
	text-align: center;
}
h1, h2, h3, h4, h5, p, table {
	margin: 20px;
}
h1 {
	margin: 20px 20px;
	font-size: 240%;
}
h1 i {
	font-style: normal;
	color: #db1820;
}
h2 {
	font-size: 160%;
	color: #ed1c24; /*RED*/
}
h2.menuheading {
	display: block;
	border-radius: 10px;
	padding: 10px 15px;
	/*background: #db1820; OLD RED */
	background: #ed1c24; /*RED*/
	color: #FFFFFF;
	font-size: 160%;
	text-transform: uppercase;
}
h3 {
	font-size: 120%;
}
h4 {
	font-size: 110%;
	color: #367c2b; /*GREEN*/
}
h5 { /* features */
	font-size: 16pt;
	font-weight: normal;
	line-height: 140%;
}
p, li {
	line-height: 140%;
}
a {
	color: #ed1c24; /*RED*/
	text-decoration: none;
}
a:hover {
	color: #db1820;
	text-decoration: underline;
}
.center {
	padding: 0 10px;
	text-align: center;
}
.center img {
	margin: 0 auto;
}
img, object {
	display: block;
	border: 0;
	max-width: 100%;
	height: auto;
}
div {
	box-sizing: border-box;
}
hr {
	clear: both;
	margin: 0;
	padding: 0;
	border: 0;
}
.clear {
	clear: both;
}
form, fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}
input, textarea, select {
	font-family: Arial;
	font-size: 100%;
}
textarea {
	width: 100%;
	min-height: 160px;
}
form table {
	margin: 0;
}

/******************** STRUCTURE ********************/
#widescreen {
	padding: 0;
	background: #ffffff;
}
#header {
	position: fixed;
	z-index: 100;
	margin: 0;
	padding: 0;
	width: 100%;
	background: #ed1c24; /*RED*/
}
.content {
	margin: 0 auto;
	padding: 10px;
	max-width: 1280px;
	text-align: left;
}
.social img {
	margin: 0 auto 15px auto;
}

/******************** NAVIGATION ********************/
#header .content {
	padding: 0 30px;
}
#header .logo {
	display: block;
	float: left;
	margin-right: 10px;
	padding: 10px 0;
	/* LOGO SIZE IS 160 x 60 so ADD padding to height: */
	width: 160px;
	height: 80px;
	cursor: pointer;
}
.nav {
	margin: 0 auto;
	max-width: 1200px;
}
.nav ul, .nav li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}
.nav ul {
	/*float: left;*/
	display: inline-block;
	text-align: center;
}
.nav a {
	display: block;
	font-size: 110%;
	font-weight: bold;
	color: #ffffff;
}
.nav a:hover {
	text-decoration: none;
	background: #e78800;
	color: #000000;
}

#header #btn-order {
	display: inline-block;
	display: block;
	float: right;
	margin: 0;
}
#header #btn-order a {
	display: inline-block;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	padding: 20px 15px 10px 15px;
	font-size: 110%;
	font-weight: bold;
	text-decoration: none;
	background: #000000;
	color: #eeeeee;
}
#header #btn-order a:hover {
	background: #e78800;
	color: #ffffff;
}

a.button, input.button, button, span.button {
	display: inline-block;
	margin: 5px auto;
	border: 0;
	border-radius: 10px;
	padding: 8px 12px;
	font-family: Arial;
	font-size: 110%;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	background: #367c2b;
	color: #ffffff;
	cursor: pointer;
}
a.button:hover, input.button:hover, button:hover, span.button:hover {
	background: #82a837;
	text-decoration: none;
}
.btn-menu {
	text-align: center;
}
.btn-menu .menuphoto {
	width: 100%;
}
.btn-menupizza, .btn-menupasta, .btn-menucurry {
	display: block;
	box-sizing: border-box;
	border-radius: 20px;
	padding: 30%;
	max-width: 400px;
	max-height: 400px;
}
.btn-menupizza {
	background: url(images/btn-pizza.jpg) no-repeat center;
}
.btn-menupasta {
	background: url(images/menu-lasagna.jpg) no-repeat center;	
}
.btn-menucurry {
	background: url(images/btn-curry.jpg) no-repeat center;
}
.btn-location {
	float: left;
	width: 50%;
}
.btn-location a {
	display: block;
	margin: 0 10px;
	padding: 10px;
	border-radius: 10px;
	background: #e78800;
	color: #ffffff;
	font-size: 150%;
	text-align: center;
}
h2.btn-order {
	margin: 0;
	padding: 0;
	background: none;
	color: none;
}
h2.btn-order a, a.btn-orderfrommenu {
	display: block;
	margin: 10px;
	padding: 10px;
	border-radius: 10px;
	color: #ffffff;
	text-align: center;
}
.btn-location a:hover {
	background: #367c2b;
	text-decoration: none;
}
h2.btn-order a, a.btn-orderfrommenu {
	background: #367c2b;
}
h2.btn-order a:hover, a.btn-orderfrommenu:hover {
	background: #82a837;
	text-decoration: none;
}
a.btn-orderfrommenu {
	margin: 0 auto;
	width: 160px;
}


.headerphoto {
	padding: 80px 20px 20px 20px;
	width: 100%;
	min-height: 400px;
	align-content: center;
	background: #999999;
}



.headerphoto h1 {
	color: #ffffff;
	text-shadow: 0 0 10px #333333;
}

#page_home .headerphoto {
	/*background: url(images/hdr-homepizza.jpg) no-repeat center;*/
	background: url(images/hdr-pierogipizza.jpg) no-repeat center top;
	background-size: cover;
}
#page_menu .headerphoto {
	background: url(images/hdr-butterchickenpizza.jpg) no-repeat center;
	background-size: cover;
}
#page_pastasides .headerphoto {
	background: url(images/hdr-pastasides.jpg) no-repeat center;
	background-size: cover;
}
#page_curry .headerphoto {
	background: url(images/hdr-curry.jpg) no-repeat center;
	background-size: cover;
}
#page_sooke .headerphoto {
	background: url(images/hdr-sooke.jpg) no-repeat center;
	background-size: cover;
}
#page_langford .headerphoto {
	background: url(images/hdr-pizzamenu.jpg) no-repeat center;
	background-size: cover;
}
#page_jobs .headerphoto {
	background: url(images/hdr-pizzajobs.jpg) no-repeat center;
	background-size: cover;
}
#page_order .headerphoto {
	min-height: 140px; /* over ride from 400px */
	background: url(images/hdr-pizzamenu.jpg) no-repeat center;
	background-size: cover;
}


/******************** FEATURES ********************/
/*.feature {
	padding: 10px 0;
	width: 100%;
	min-height: 400px;
	background: #cccccc;
	font-size: 125%;
}*/

div.NinetiesPizza {
	padding-top: 80px;
	background: #f4db5f; /*mustard*/
	text-align: left;
}
div.NinetiesPizza h1, div.NinetiesPizza a {
	color: #db3f7b; /*hot pink*/
}
div.NinetiesPizza h2 {
	color: #4a9cbc; /* darker ELECTRIC BLUE */
}
div.NinetiesPizza .button {
	background: #db3f7b; /*hot pink*/
	color: #ffffff;
}
div.NinetiesPizza .button:hover {
	background: #4a9cbc; /* darker ELECTRIC BLUE */
	color: #ffffff;
}

@media screen and (min-width: 960px) {
	div.NinetiesPizza {
		column-count: 2;
	}
	div.NinetiesPizza div {
		min-height: 600px;
		align-content: center;
	}
}


div.feature {
	display: block;
	position: relative;
	padding-bottom: 50%;
	background: #cccccc;
	min-height: 400px;
	font-size: 125%;
}
div.feature div.feature_overlay {
	display: inline-block;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}
div.feature div.content {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: 10px;
	top: 50%;
	transform: translateY(-50%);
	max-width: 960px;
	color: #f0f2ed; /* offwhite */
	text-align: center;
}


.feature h2, .feature p {
	margin: 20px;
	color: #ffffff;
	text-shadow: 0 0 5px #666666;
}
.feature a.btn-orderfrommenu {
	background: #82a837;
}
.newpizza {
	background: #367c2b;
	color: #ffffff;
	min-height: 0;
}
.newpizza .content {
	margin: 0 auto;
	padding: 120px 10px 10px 10px;
	max-width: 860px;
	background: url(images/bg-newfeature.png) no-repeat center 10px;
}
div.pizzabilityapp {
	padding: 10px 0;
	width: 100%;
	/*min-height: 400px;*/
	font-size: 125%;
	text-align: center;
	background: #367c2b url(images/feature-mobileapp.jpg) no-repeat center right;
	background-size: cover;
}
div.pizzabilityapp h2, div.pizzabilityapp p {
	margin: 20px;
	color: #ffffff;
	text-shadow: 0 0 5px #666666;
}
.appstorebutton {
	display: inline-block;
	margin: 5px;
}
.appstorecredits {
	font-size: 60%;
	text-align: center;
	color: #999999;
}
div.pizzacrust {
	/*padding: 20px;*/
	background: url(images/feature-pizzacrust.jpg) no-repeat center;
	background-size: cover;
}
div.delivery {
	/*padding: 20px;*/
	background: url(images/feature-delivery.jpg) no-repeat center;
	background-size: cover;
}
div.delivery .feature_overlay, div.pizzacrust .feature_overlay {
	background: rgba(153,71,8,0.25);
}

/*div.pizzacrust div {
	margin: 0 auto;
	padding: 10px;
	border-radius: 10px;
	max-width: 420px;
	background: rgba(153,71,8,0.75);
}*/
/*.delivery div {
	margin: 0 auto;
	padding: 10px;
	border-radius: 10px;
	max-width: 420px;
	background: rgba(153,71,8,0.75);
}*/

/******************** HOMEPAGE ********************/
.homebuttons {
	margin: 0 auto;
	padding: 0 0 20px 0;
	max-width: 960px;
}

.features {
	margin: 10px;
	padding: 10px;
	border-radius: 10px;
	background: #000000;
	color: #ffffff;
	text-align: center;
}
.jumpmenu {
	float: left;
	box-sizing: border-box;
	padding: 0px 10px;
	width: 25%;
}
.jumpmenu h4 {
	margin: 10px 0 0 0;
	font-family: Arial;
	font-weight: bold;
	color: #db1820;
}
.jumpmenu ul, .jumpmenu li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.promo {
	margin: 10px;
}
.promowinners {
	margin: 10px 10px 20px 10px;
	border-radius: 10px;
	padding: 5px 10px;
	background: #fcc540;
	color: #333333;
	font-size: 110%;
	font-weight: bold;
}
.promowinners p {
	margin: 10px 5px;
	line-height: 110%;
}
.promowinners b {
	font-size: 130%;
	color: #000000;
}

/******************** MENUS ********************/
#housespecials:target, #gourmet:target, #bestsellers:target, #toppings:target {
	margin-top: -80px;
	padding-top: 80px;
}
.menu {
	margin-bottom: 20px;
}
.menu h2 {
	margin-top: 30px;
}
.menu h3 {
	margin-bottom: 6px;
	/*text-align: center;*/
	color: #ed1c24; /*RED*/
}
.menu p{
	margin-top: 6px;
}
.menu i {
	font-family: Georgia, serif;
	font-size: 85%;
}
.menu img {
	margin: 20px auto;
}
.menuphoto {
	max-width: 240px;
	border-radius: 50%;
}
.menu table.prices {
	clear: both;
	margin: 30px auto;
	border: 0;
	padding: 0;
	max-width: 600px;
	font-size: 22px;
}
.prices td {
	padding: 5px;
	text-align: right;
	/*font-weight: bold;*/
}

.price {
	font-size: 110%;
	font-weight: bold;
}
.healthyhearty {
	margin: 50px 15px 15px 15px;
	border: 6px double #367c2b;
	border-radius: 10px;
	padding: 0 0 250px 0;
	background: url(images/bg-healthyhearty.jpg) no-repeat center bottom;
}
.healthyhearty h3 {
	font-family: Georgia;
	color: #367c2b;
}
.substitutions {
	/*margin: 50px 15px;
	padding: 10px;
	background: #eeeeee;
	border-radius: 10px;
	font-size: 90%;
	color: #666666;*/
}
.familymeals {
	margin: 300px 15px 15px 15px;
	border: 6px double #367c2b;
	border-radius: 10px;
	text-align: center;
}
.creditcards p {
	text-align: center;
}
.creditcards img {
	margin: 0 auto;
}

/******************** LOCATIONS ********************/

div.location {
	margin: 20px;
	border: 4px solid black;
	border-radius: 20px;
	padding: 1px 0;
}
div.location h1 {
	margin-bottom: 5px;
}
div.location h2 {
	margin-top: 5px;
}
div.location table.location-hours {
	margin: 0 15px 15px 15px;
	width: 280px;
}

iframe { /* google map */
	clear: both;
	margin: 10px;
}
.openingbanner {
	position: absolute;
	z-index: 1;
	top: 60px;
	right: 0;
}

/******************** ABOUT ********************/
.welcomemessage {
	margin-left: 280px;
}
.welcomemessage p {
	margin: 20px;
	font-family: Times New Roman, Georgia, serif;
	font-size: 100%;
}
.signature {
	padding: 30px 0 1px 0;
	/*background: url('images/clivesignature.gif') no-repeat top right;*/
	font-size: 85%;
	text-transform: uppercase;
	text-align: right;
}
div.reviews {
	color: #367c2b;
}
p.review {
	margin-top: 20px;
	min-height: 90px;
	padding: 0 0 0 120px;
	font-family: Georgia;
	font-size: 110%;
	background: url(images/bg-quote.gif) no-repeat left top;
}
p.review-credit {
	margin-top: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 95%;
	text-align: right;
}
#featurebox p {
	margin: 10px;
}
.destinationhighways {
	margin: 15px auto;
	width: 640px;
}
.DHlogo {
	float: left;
	padding: 10px 0 10px 10px;
	width: 120px;
}
.DHtext {
	float: right;
	width: 500px;
}

/******************** FEEDBACK ********************/
p.feedbackcol {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
p.feedbackcol small {
	font-size: 85%;
	text-transform: uppercase;
	color: #666666;
}
.feedbackform .button {
	display: block;
	margin: 0 auto;
	border: 0;
	border-radius: 10px;
	padding: 15px;
	width: 100px;
	font-size: 150%;
	text-align: center;
	background: #367c2b; /*GREEN*/
	color: #ffffff;
	cursor: pointer;
}
.feedbackform .button:hover {
	background: #82a837; /* LIGHT GREEN */
}

/******************** FOOTER ********************/
footer {
	padding: 0;
	color: #666666;
}
footer .content {
	text-align: center;
}
footer p {
	font-size: 90%;
}
footer .footerlogo {
	padding-top: 20px;
}
footer .footerlogo a {
	margin: 0 auto;
	display: inline-block;
}
footer div.locations {
	margin: 0 auto;
	padding: 20px 0;
	max-width: 800px;
}
footer div.locations b {
	font-size: 125%;
}
div.subscribe {
	padding: 20px 0;
	background: #367c2b; /*GREEN*/
	color: #ffffff;
}
div.subscribe h4 {
	color: #ffffff;
}
div.subscribe label {
	display: block;
}
div.subscribe input[type=text], div.subscribe input[type=email], div.subscribe button {
	display: inline-block;
	margin: 5px;
	border: 0;
	border-radius: 10px;
	padding: 15px;
	font-family: Arial;
	font-size: 110%;
}
div.subscribe button {
	background: #82a837;
}
div.subscribe button:hover {
	background: #e78800;
}
.social {
	margin: 0 auto;
	width: auto;
}
.social .icon {
	display: inline-block;
	padding: 5px;
	width: 50px;
}
.social .icon a {
	opacity: 0.5;
}
.social .icon a:hover {
	opacity: 1.0;
}

footer ul.footernav, footer ul.footernav li {
	margin: 0;
	padding: 0;
	list-style: none;
}
footer ul.footernav {
	margin: 20px auto 20px auto;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
	padding: 6px;
	max-width: 800px;
}
footer ul.footernav li {
	display: inline-block;
}
footer ul.footernav a {
	display: block;
	padding: 4px 8px;
	color: #999999;
}
footer ul.footernav a:hover {
	color: #666666;
}

.credit {
	font-size: 75%;
	text-align: center;
	text-transform: uppercase;
	color: #999999;
}
.credit a {
	color: #999999;
	text-decoration: none;
}
.credit a:hover {
	color: #666666;
	text-decoration: underline;
}


@media screen and (max-width: 639px) {
	.NOmobile {
		display: none !important;
	}
	p.feedbackcol {
		margin: 0 10px;
	}
	p.feedbackQ {
		margin-top: 20px;
	}
	p.feedbackA {
		margin-bottom: 20px;
	}
	#header .logo {
		/* LOGO SIZE IS 160 x 60 so ADD padding to height: */
		/* BUT MAKE LOGO 75% ON MOBILE = 120 x 45 */
		width: 120px;
		height: 80px;
		cursor: pointer;
	}
	.btn-mobilenav {
		display: block;
		float: left;
		width: 60px;
		height: 60px;
	}
	.btn-mobilenav::after {
		clear: both;
		content: "";
		display: table;
	}
	.btn-mobilenav a {
		display: block;
		background: url(images/btn-mobilenav.png) no-repeat 10px center;
		padding: 15px 10px 15px 30px;
	}
	.btn-mobilenav a:hover{
		background: url(images/btn-mobilenav.png) no-repeat 10px center;
	}
	ul.navnav {
		position: absolute;
		top: 80px;
		width: 200px;
		background: #ed1c24; /*RED*/
	}
	.nav ul {
		display: none;
		text-align: center;
	}
	.nav:hover ul {
		display: block;
		padding: 10px;
		text-align: center;
	}
	.nav ul a {
		display: block;
		border-radius: 10px;
		padding: 10px;
	}
	.jumpmenu {
		display: none;
	}
	p.review {
		margin-top: 20px;
		padding: 100px 0 0;
		background: url(images/bg-quote.gif) no-repeat top center;
	}
	p.review-credit {
		text-align: center;
	}
	#page_order .headerphoto {
		display: block;
		position: fixed;
	}
	#order-locations {
		padding-top: 280px;
	}
	/*.location-anchor {
		padding-top: 460px;
		margin-top: -460px
	}*/
	.location-anchor::before {
		content: '';
		display: block;
		height: 280px;
		margin-top: -280px;
		visibility: hidden;
	}
}
@media screen and (min-width: 600px) {
	div.subscribe label {
		display: inline-block;
	}

}
@media screen and (min-width: 640px) {
	.mobile {
		display: none;
	}
	.nav ul {
		float: left;
		display: inline-block;
		text-align: center;
	}
	.nav li {
		display: inline-block;
	}
	.nav a {
		padding: 20px 15px 10px 15px;
	}
	.nav a:hover {
		border-radius: 0;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
	}

	.nav ul ul {
		display: none;
	}
	.nav ul li:hover > ul {
		display: block;
		position: absolute;
		float: left;
		border-radius: 10px;
		padding: 10px 0;
		background: #ed1c24; /* RED */
		text-align: left;
		z-index: 99999;
	}
	.nav ul li ul li {
		display: block;
	}
	.nav ul ul a {
		padding: 5px 15px;
	}
	.nav ul ul a:hover {
		background: #ed1c24; /* RED */
		color: #000000;
	}
	.col .col, .menucol {
		float: left;
		width: 50%;
	}
	.newpizza .content {
		margin: 0 auto;
		padding: 0 130px;
		max-width: 1200px;
		background: url(images/bg-newfeature.png) no-repeat 20px 0;
	}
	.btn-menu {
		float: left;
		width: 33.33%;
	}
	.pizzabilityapp {
		/*height: 550px;*/
		/*height: 20%;*/
		overflow: hidden;
	}
	.pizzabilityapp .content {
		display: flex;
		flex-flow: row;
		justify-content: space-between; /*horizontal*/
		align-items: center; /*vertical*/
	}
	.appstorebuttons {
		/*padding-top: 100px;*/
	}
	p.feedbackcol {
		float: left;
		margin: 0;
		padding: 10px;
		width: 50%;
	}
	p.feedback:nth-of-type(2n+1) {
		clear: left;
	}
	footer div.locations div {
		float: left;
		width: 50%;
	}
}

@media screen and (min-width: 960px) {
	.col {
		float: left;
		width: 50%;
	}
	p.feedbackcol {
		width: 25%;
	}
	p.feedback:nth-of-type(2n+1) {
		clear: none;
	}
	p.feedback:nth-of-type(4n+1) {
		clear: left;
	}
}