/**************************************/
/** MeNeds Mobile Pizza Party | JSA **/
/**************************************/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&family=Roboto:wght@400;700&display=swap');

* {
    box-sizing: border-box;
}

/*************************/
/** variable controller **/
/*************************/
:root {
	--main-corp-color: #000;
	--main-corp-gold: #fff;
	--main-corp-blk: #000;
    --bg-image-height-0: 100%, 100vh;
    --bg-image-height-auto: auto;
    --bg-image-height-1: 750px;
    --foreground-color-1: #ffffff;

    --h1-size: 65px;
    --h2-size: 34px;
    --h2-color: #0d385f;
    --h3-size: 24px;
    --h4-size: 14px;
    --paragraph-size: 23px;
	--paragraph-lh: 26px;
    --paragraph-font: 'Roboto Condensed', sans-serif;
	--reserve-font: 'Roboto', sans-serif;
	--copyright: 20px;
    --span-color: #000000;

    --margin-segment-2a: -67em;
    --margin-segment-2b: -67em;
    --margin-segment-2c: -75em;
    --margin-segment-3a: -4em;
    --margin-segment-3b: auto;
    --margin-segment-5a: auto;
    --margin-segment-5b: -40em;

    --menu-width-lg: 700px;
    --menu-width-md: 90%;
	--site-large-width: 1290px;
	--site-medium-width: 1056px;

    --footer-menu-size: 21px;
    --footer-input-border-color: #ccac41;

    --mobile-view-600: 600px;
}
/** variable controller end **/

.form-title{
	margin-top: 1.5rem;
	display:block;
	margin-bottom:0.5rem;
}
.form-title + br{
	display:none;
}
body {
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
	width: 100%;
}
html, body, nav, ul {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}
header ul {
    display: flex;
    justify-content: center;
    flex-direction: row;
    list-style: none;
	margin-top: 18px;
}
header li {
    margin: 12px 50px;
	height: 35px;
}
	@media only screen and (max-width: 600px) {
		header li {
			margin: 12px 24px;
			height: 35px;
		}
	}
header li a {
    width: 100%;
    height: 100%;
    display: inline-block;
    font-size: 24px;
    line-height: 24px;
    text-decoration: none;
    text-transform: uppercase;
	font-weight: 700;
	color: var(--foreground-color-1);
	background-color:var(--main-corp-color);
}
header a:hover:after {
    transform: scaleX(1);
}
header a:after {
    display: block;
    content: '';
    border-bottom: solid 3px var(--main-corp-blk);
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
    height: 6px;
}
main {
    overflow-x: hidden;
	margin-top: -77px;
}
div, label, h1, h2, h3, h4, h5, h6, p, a, li {
	font-family: var(--paragraph-font);
}
h1 {
    font-size: var(--h1-size)!important;
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-transform: uppercase;
}
h2 {
	font-size: var(--h2-size);
}
.gold-banner p, h3, h2 {
    font-size: var(--paragraph-size);
    line-height: var(--paragraph-lh);
	font-weight: 700;
}
section {
    display: flex;
    justify-content: center;
}
.section-inner {
    width: 100%;
    max-width: var(--site-large-width);
    margin: 0 auto;
}
.section-inner2 {
    width: 100%;
    max-width: var(--site-medium-width);
    margin: 0 auto;
}
header, section#host, section#reserve, section#menubg h2, footer {
	text-align: center;
}
section#hero, section#menubg {
	background-color: var(--main-corp-color);	
}
section#reserve, footer {
	background-color: var(--main-corp-blk);	
	color: var(--foreground-color-1);
}
section#hero {
    padding-top: 125px;
}
.hero-image {
	background-image: url(/mobilepizzaparty/imgs/MEN_PizzaParty_Webpage.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 640px;
	width: 100%;
	padding-top: 56px;
}
.mpp-svg {
    max-width: 560px;
    width: 100%;
}
	@media only screen and (max-width: 1350px) {
		.mpp-svg {
			padding-left: 30px;
		}
	}
	@media only screen and (max-width: 600px) {
		.mpp-svg {
			padding: 0 15px;
		}
	}
.gold-banner {
    background-color: #ffffff;
    color: var(--main-corp-color);
    position: absolute;
    width: 100%;
    max-width: 44%;
    display: flex;
	justify-content: flex-end;
    left: 0;
	padding-left: 30px;
}
	@media only screen and (max-width: 1260px) {
		.gold-banner {
			max-width: 560px;
		}
	}
	@media only screen and (max-width: 600px) {
		.gold-banner {
			max-width: 88%;
		}
	}
.gold-banner p {
    max-width: 560px;
    display: flex;
    padding-right: 15px;
    text-align: center;
    margin: 15px 0;
}
@supports(filter:brightness(1000)){
.gold-banner:after {
    content: "";
    width: 41px;
    height: 100%;
    background-image: url(/mobilepizzaparty/imgs/arrow-end.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: -40px;
	filter:brightness(1000);
}
}
section#host {
	padding: 8px 0;
	background:#ffffff;
}
section#host h2 {
    padding: 0 50px;
    color: var(--main-corp-color);
}
/*New section*/
section#mobilepizza {
    padding: 40px 0 60px;
	background-color: var(--main-corp-blk);	
	color: var(--foreground-color-1);
	text-align:center;
}
section#mobilepizza p {
	font-family: var(--reserve-font);
    margin: 0;
	font-size: 19px;
}
section#mobilepizza p.perfect {
    color: var(--main-corp-gold);
    font-size: 16px;
    letter-spacing: 3px;
    padding-bottom: 7px;
	font-weight: 700;
}
p.categories {
    letter-spacing: 3px;
    padding-bottom: 32px;
}
/*End new section*/
section#reserve {
    padding: 80px 0 60px;
}
section#reserve p {
	font-family: var(--reserve-font);
    margin: 0;
	font-size: 19px;
}
section#reserve p.perfect {
    color: var(--main-corp-gold);
    font-size: 16px;
    letter-spacing: 3px;
    padding-bottom: 7px;
	font-weight: 700;
}
p.categories {
    letter-spacing: 3px;
    padding-bottom: 32px;
}
img.food {
    padding: 48px 0 80px;
    width: 100%;
    height: auto;
}
section#reserve h2 {
    color: var(--main-corp-gold);
    letter-spacing: 1px;
    background-color: var(--main-corp-blk);
    max-width: 172px;
    margin: -19px auto 0;
	text-align: center;
}
.reserve-form {
    border: 1px solid var(--main-corp-gold);
	padding: 0 80px 55px;
	text-align: left;
}
	@media only screen and (max-width: 1130px) {
		.reserve-form {
			margin: 0 20px;
		}
	}
	@media only screen and (max-width: 768px) {
		.reserve-form {
			padding: 0 40px 55px;
		}
		#reserve p {
			padding: 0 25px 20px;
		}
	}
.reserve-form h3 {
    color: var(--main-corp-gold);
    text-transform: uppercase;
}
h3.check-subs {
    text-align: left;
}
@media only screen and (max-width: 600px) {
	.checks:last-child {
		height: 140px;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		margin-top: 17px;
	}
}
.row.form-inner-side {
    display: flex;
    flex-wrap: wrap;
	padding-bottom: 20px;
}
.field-holder {
    width: 100%;
}
.field-holder.half {
    width: 50%;
}
	@media only screen and (max-width: 768px) {
		.field-holder.half {
			width: 100%;
		}
	}
.field-holder.half:nth-child(1), .field-holder.half:nth-child(6), .field-holder.one-third:nth-child(3), .field-holder.one-third:nth-child(4), .field-holder.one-third:nth-child(1) {
    padding-right: 20px;
}
	@media only screen and (max-width: 768px) {
		.field-holder.half:nth-child(1), .field-holder.half:nth-child(6), .field-holder.one-third:nth-child(3), .field-holder.one-third:nth-child(4), .field-holder.one-third:nth-child(1) {
			padding-right: 0;
		}
	}
.field-holder.one-third {
    width: 33.33%;
}
	@media only screen and (max-width: 768px) {
		.field-holder.one-third {
			width: 100%;
		}
	}

.field-holder.one-six {
    width: 16.66%;
}
.field-holder.one-six:nth-child(n+5) {
    padding-right: 20px;
}
	@media only screen and (max-width: 768px) {
		.field-holder.one-six {
			width: 100%;
		}
		.field-holder.one-six:nth-child(n+5) {
			padding-right: 0;
		}
	}
span.wpcf7-form-control-wrap input {
    width: 100%;
    height: 45px;
    padding: 5px 16px;
    font-size: calc(var(--paragraph-size) - 3px);
    font-weight: 300;
}
.checks label {
    margin-right: 12px;
	line-height: 30px;
	font-weight: 300;
}
form fieldset {
    padding: 0;
    border: none;
}
.container {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: -1px;
  left: 0;
  height: 21px;
  width: 21px;
  background-color: #eee;
}

.container:hover input ~ .checkmark {
  background-color: #ccc;
}

.container input:checked ~ .checkmark {
  background-color: var(--main-corp-color);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked ~ .checkmark:after {
  display: block;
}

.container .checkmark:after {
  left: 7px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.submit-button {
	margin-top: 35px;
}
.submit-button input {
    background-color: var(--main-corp-gold);
    border: 0;
    padding: 10px 25px;
    color: var(--main-corp-blk);
    font-size: calc(var(--paragraph-size) - 2px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1;
}
.menu-container {
    border: 1px solid var(--main-corp-gold);
	margin: 80px auto 60px;
}
	@media only screen and (max-width: 1130px) {
		.menu-container {
			margin: 80px 20px 60px;
		}
	}
section#menubg h2 {
    color: var(--foreground-color-1);
    background-color: var(--main-corp-color);
    width: 123px;
    margin: -19px auto 0;
    letter-spacing: 1px;
}
.menu-sub {
    width: 100%;
    margin: 18px auto 0;
    text-align: center;
    color: #fff;
    letter-spacing: 5px;
}
.package-container {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.package {
    width: 41%;
}
	@media only screen and (max-width: 768px) {
		.package {
			width: 100%;
		}
	}
.package:nth-child(-n+2) {
    margin-top: 25px;
}
.package:nth-child(-n+2) .package-inner {
    margin-top: 0;
}
.package:nth-child(odd) {
    border-right: 1px solid var(--main-corp-gold);
}
.package:nth-child(-n+4) {
    border-bottom: 1px solid var(--main-corp-gold);
}
.package:nth-child(even) .package-inner {
    margin-right: 0;
}
.package:nth-child(odd) .package-inner {
    margin-left: 0;
}
.package:nth-child(n+5) .package-inner {
    margin-bottom: 0;
}
.package:nth-child(n+5) {
    margin-bottom: 55px;
}
	@media only screen and (max-width: 768px) {
		.package:nth-child(-n+2) {
			margin-top: 25px;
		}
		.package:nth-child(-n+2) .package-inner {
			margin-top: 0;
		}
		.package:nth-child(odd) {
			border-right: 0;
		}
		.package:nth-child(-n+4) {
			border-bottom: 0;
		}
		.package:nth-child(even) .package-inner {
			margin-right: 25px;
		}
		.package:nth-child(odd) .package-inner {
			margin-left: 25px;
		}
		.package:nth-child(n+5) .package-inner {
			margin-bottom: 0;
		}
		.package:nth-child(n+5) {
			margin-bottom: 55px;
		}
	}
.package-inner {
    background: var(--foreground-color-1);
    padding: 22px 5px 25px 18px;
    margin: 25px;
	min-height: 315px;
	-moz-box-shadow: 10px 10px 2px rgb(0 0 0 / 0.2);
	-webkit-box-shadow: 10px 10px 2px rgb(0 0 0 / 0.2);
	box-shadow: 10px 10px 2px rgb(0 0 0 / 0.2);
}
.package-inner h3 {
    margin: 0;
    color: var(--main-corp-color);
    line-height: 1.3em;
}
.package-inner ul {
    padding-left: 23px;
	font-weight: 700;
	line-height: 25px;
}
.package-inner li {
    font-size: var(--paragraph-size);
    padding: 1px 0;
}
span.bullet {
    position: relative;
    left: -7px;
}
.package-inner ul span.package-sub {
    font-weight: 300;
	font-size: calc(var(--paragraph-size) - 7px);
    display: flex;
    letter-spacing: 1px;
}
.package-inner h4 {
    border: 2px solid var(--main-corp-color);
    display: inline-flex;
    padding: 8px 10px;
    color: var(--main-corp-gold);
    letter-spacing: 1px;
	margin: 15px 0 0 0;
}
.package-inner h4:hover {
    background-color: var(--main-corp-color);
    cursor: default;
}
.package.extras {
    text-align: center;
}
.package.extras h3 {
    margin-bottom: 0.5em;
    font-size: calc(var(--paragraph-size) + 3px);
    color: #ffffff;
}
.extras p {
    margin-top: 2px;
    font-size: calc(var(--paragraph-size) - 3px);
    font-weight: 700;
    color: var(--foreground-color-1);
	letter-spacing: 1px;
}
.package-sub2 {
    display: flex;
    justify-content: center;
    font-weight: 300;
    font-size: calc(var(--paragraph-size) - 7px);
    padding-top: 2px;
}


footer {
    padding: 20px 0;
}
p.copyright a {
    color: #fff;
    text-decoration: none;
}

.contactinner {
	margin-left: auto;
	margin-right: auto;
	max-width: 75%;
	text-align: center;
}
@media (max-width: 599px){
	.contactinner {
		max-width: 90%;
		margin-left: 5%;
		padding-top: 20px;
	}
}

.disclaimer{
	text-align: center;
	padding: 3rem;
	font-size: 1rem!important;
}

/***************
Thank You Page
***************/

.section.thankyou {
    background-color: var(--main-corp-blk);
	color: var(--foreground-color-1);
    width: 100%;
    height: 100%;
}
.caption {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
a.ty-message {
	max-width: 380px;
    margin: 85px auto 45px;
    background-color: #000;
}