/* global positioning start */
* {
 padding: 0;
 margin: 0;
}
 
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address {
 margin: 0em 0%;
}
li, blockquote {
 margin-left: 5%;
}

dd {
 margin-left: .2em;
}
fieldset {
 padding: .5em; 
}
 /* global positioning end */

BODY {
	background-color: #152B45;
	border:2px solid #fff;
	border-radius: 16px;
	font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
	font-size: 1em;
	color: #000000;
	text-align: center;
	margin: 10px auto;
	max-width: 750px;
	width: 100%;
}

/* links */

a {
    outline: none;
}

A:link    { text-decoration:underline; color: #CC0001; }
A:visited    { text-decoration:underline; color: #CC0001; }
/*A:visited { text-decoration:underline; color: #E4880B; }*/
A:active  { text-decoration:underline; color: #CC0001; }
A:hover   { text-decoration:underline; color: #E4880B; }
/* links */

/* start div tag declarations */

.clear {
	clear: both;
}

h2 {
	font-weight: bold;
	font-size: 1.2em;
	margin-top: 1.5em;
}

h3 {
	font-size: 110%;
}

p {
	margin-bottom: 1em;
}
/* header start */

#header {
	background: url(../images/header-bg.jpg) center top no-repeat transparent;
	background-size: auto 100%;
	border-radius: 12px 12px 0 0;
	width: 100%;
} 

#header_ordering {
	width: 750px;
	height: 76px;
	padding: 0px;
	margin: 0px;
} 

.header-main {
	position: relative;
	padding: .125em .5em .5em;
}

.header-main .page-title {
	margin: 1em 0 1.5em;
}

.header-main .phone img {
	margin-left: 15%;
}

.header-main .pizzaguy {
	position: absolute;
	bottom: -.5em;
	right: 20%;
}

.phone {
	display: block;
}

.phone img {
	display: block;
}

#maincontent .wrapper{
	padding: 1.25em .975em; /* 20/16 15/16*/
}

/* MENU NAVIGATION */

#menu {
	background-color: #fff;
}

#menu a,
#menu span {
	display: inline-block;
	}

#menu a:link,
#menu a:visited {
	color: #000;
	font-size: 1.375em;
	font-weight: 900;
	line-height: 1em;
	margin: 0 1em;
	padding: .125em .5em;
	text-decoration: none;
	text-transform: uppercase;
	transition: ease .5s all;
}

#menu a:hover {
	background-color:#cd0302;
	color: #fff;
}

#maincontent {
	background:#EEEEEE;
}

.page-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 1em 0;
}

#rightimage {
	margin-top: -3.5em;
}

.two-columns {
	display: flex;
	flex-wrap: wrap;
}

.left-column {
  flex: 1 1 250px;
}

.right-column-map {
	flex: 1 1 280px;
	margin-left: 1em;
}

.right-column-map iframe{
	border: 2px solid #000 !important;
	border-radius: 12px;
}

#maincontent .phone img{
	margin: 2em auto 0;

}

.pic {
	border: 1px solid #333333;
}

#splash img {
	display: block;
}

.title {
	font-size: 110%; 
	font-weight: bold;
}

.wrapper {
	width: 100%;
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	box-sizing: border-box;
}
.description {
	padding:	0 4px 0 8px;
}

/* menu */

.menubox {
	background-color: #fff;
	border: 2px solid #000;
	border-radius: 10px;
	flex: 1 1 250px;
	margin-bottom: 1.5em;
}

.menutitle {
	background-color: #012E72;
	color: #fff;
	padding: .25em .5em;
	font-size: 1.5em;
	font-weight: 700;
}

.menubody {
	padding: .5em 1em;
}

.menuboxleft {
	margin-right:2em;
}

ol li {
	margin-bottom: .5em;
}

/* home page */

#maincontent.home-page {
	background: url(../images/background.jpg) center top no-repeat transparent;
	background-size: auto 100%;
}

.home-no {
	display: none;
}

.mmmm,
.page-title {
	flex: 1 1 90%;
	max-width: 689px;
	margin:0;
}

.mmmme {
	max-width: 689px;
}

.page-title {
	max-width: 608px;
	transform: rotate(-5deg);
}

.home-columns {
	display: flex;
	flex-wrap: wrap;
	margin-top: -3.5em;
}

.left {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	flex:1 1 400px;
}

.right {
	background-color:rgba(255,255,255,.65);
	border-radius: 16px;
	flex:1 1 180px;
	font-size: .75em ;
	padding: .25em .75em .5em;    
	z-index: 1000;
}

.right .pizzaguy {
	float: left;
	margin:-3em 1em 1em -3em;
}

.right h3 {
	color: #cc0000;
	font-size: 1rem; /* 14/12*/
	font-weight: 900;
	margin-bottom: 0;
	text-transform: uppercase;	
  line-height: 1.125em;
  margin-top: .25em;
}

.right h4 {
	font-size: 1.166666666666667em;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.125em;
}

.right p {
	margin-bottom: 0;
}


.left .phone img{
	margin-left: auto;
  margin-right: 1em;
}



/* footer */

#footer {
	background-color: #cc0000;
	border-radius: 0 0 14px 14px;
	text-align: center;
	color: #fff;
	padding: .5em 0;
}

.contact h3 {
	font-size: 2.25em; /* 36/16*/
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
}

.contact h4,
.contact .services  {
	font-size: 1.625em; /* 26/16*/
	font-weight: bold;
	text-align: center;	
	text-transform: uppercase;
	line-height: 1.125em;
}

.contact h4:last-of-type {
	text-transform: capitalize;
}

.services span {
	padding: 0 .5em;
}

.services span::after { 
  content: "•";
  padding-left: 1em;
	display: inline-block;
	font-size: 1rem;
	vertical-align: top;
	margin-top: .5em;
	line-height: .5em;
}

.services span:last-of-type::after {
	display: none;
}

.copyright {
	font-size: 0.6875em; /*11/16*/
	color: #b4b0b0;
	text-align: center;
	margin-top: 1em;
}

.copyright a:link,
.copyright a:visited {
	color: #fff;
	text-decoration: none;
}

.footerbottom {
	color: #e6d395;
}


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

	.header-main .pizzaguy {
    right: 10%;
	}
	body {
		border: none;
	}

	.mmmm, 
	.page-title {
		flex: 1 1 100%;
		max-width: 90%;
		height: auto;
	}

	.page-title img {
		max-width: 100%;
		height: auto;
	}

}

@media screen and (max-width: 670px) {
	#rightimage {
	  margin-top: -1em;
	}

	.header-main .page-title {
		max-width: 90%;
		height: auto;
	}

	.contact {
    font-size: 80%;
	}
}

@media screen and (max-width: 650px) {
	.header-main .pizzaguy {
    right: 0;
	}
	.left {
		flex: 1 1 200px;
	}
	.right {
		margin-top: 4em;
	}
	BODY {
		border-radius: 0;
		margin: auto;
	}
	#header,
	#footer {
		border-radius: 0;
	}
}

@media screen and (max-width: 570px) {
	.menuboxleft {
    margin-right: 0;
	}
	.menubox {
		flex: 1 1 100%;
	}

	.right-column-map {
		margin-left: 0;
		flex: 1 1 100%;
	}
}

@media screen and (max-width: 550px) {
	.promos .promo {
    display: inline-block;
    max-width: 32%;
	}

	.promos .location img,
	.promos .menu img,
	.promos .payment {
		width: 90%;
		height: auto;
	}

	.promos .phone {
		max-width: 80%;
	}
	.right .pizzaguy {
		float: right;
		margin:1em;
	}

	.right,
	.left {
		margin: 0;
		flex: 1 1 100%;
	}

	.header-main {
		margin-bottom: 1em;
	}

	.left {
    margin: 4em auto 1em;
	}

	#maincontent.home-page {
		background-image: url(../images/background-mob.jpg);
	}
	#header {
    background-image: url(../images/header-bg-mob.jpg)
  }

}

@media screen and (max-width: 500px) {
	.header-main .phone img {
	  margin-left: 0em;
	}
	.header-main .pizzaguy {
    display: none;
	}
	#menu a:link, 
	#menu a:visited {
		margin: 0;
		font-size: 1.25em;
	}
	

	#rightimage {
		max-width: 30%;
	}

	#rightimage img{
		width: 100%;
		height: auto;
	}
}

@media screen and (max-width: 340px) {
	#rightimage {
		display: none;
	}

	.phone {
		max-width: 90%;
	}
	.phone img {
		width: 100%;
		height: auto;
	}
}