/*=======================================
 	BIG MAMAS AND PAPAS FRANCHISE CSS
========================================*/
/*===================================
	GENERAL STYLING
===================================*/
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Josefin Sans", sans-serif; font-size: 1em; line-height: 1.5; transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -webkit-transition:all .5s ease-in-out; background-image: url(../images/background/body.jpg); color: #404040; background-attachment: fixed; }
ul { list-style: none; padding: 0; margin: 0 }
a { text-decoration: none; cursor: pointer; color: #F4EECC; line-height: 1 }

li a { overflow: hidden; display: inline-block; position: relative; vertical-align: middle; padding: 12px 0 5px }
li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #F4EECC; opacity: 0; transition: opacity 500ms, transform 500ms; transform: translate3d(-100%, 0, 0); }
li a:hover::after, li a:focus::after{ transform: translate3d(0, 0, 0); opacity: 1; }

div, ul, li, a, nav { box-sizing: border-box; }

/*font*/
h1, h2, h3, h4 { font-family: "Kalnia", serif; font-weight: 600; margin: 0 0 15px; line-height: 1.2; }
h1 { font-size: 160px; text-transform: uppercase; text-align: center; }
h2 { font-size: 56px; text-transform: uppercase; text-align: center; }
h3 { font-size: 46px;  text-transform: uppercase; }
.subtitle { font-family: "Corinthia", cursive; font-size: 46px; display: block; line-height: 1; font-weight: 700; }
h4 { font-size: 26px; line-height: 1.2; font-weight: 500; }
.mini-title { text-transform: uppercase; font-weight: 700; font-size: 15px; }
p { margin: 0 0 10px; }

.red { color: #AC3834 }
.white { color: #fff }
.yellow { color: #F4EECC }

.text-shadow, .home h1, .home h2, #location h3, #about h3, .home h4, #social .social-media, #contact .contact-us { text-shadow: 2px 2px 10px rgba(0,0,0,.3) }

/*button*/
.btn { padding: 14px 25px; border-radius: 0; display: inline-block; height: fit-content; width: fit-content; box-sizing: border-box; text-transform: capitalize; transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; }
.red-btn { background-color: #AC3834; }
.outlined-btn { border: 1px solid #F4EECC; }
.white-btn { background-color: #fff; color: #AC3834; }

.red-btn:hover, .modal-inner > a:hover .white-btn { background-color: #9C2824; color: #F4EECC }
.outlined-btn:hover, .social-media a:hover { background-color: #F4EECC; color: #333 }

/*page*/
.section { align-items: center; display: flex; justify-content: center; }
.section-inner, .footer-top, .footer-bottom { padding: 0 1em; width: 100%; }
.section-inner { opacity: 0; transform: translate(0, 10vh); transition: all 1s; animation: fadeIn 1s; -webkit-animation: fadeIn 1s; -moz-animation: fadeIn 1s; -ms-animation: fadeIn 1s; }
.section-inner.visible { opacity: 1; transform: translate(0, 0); }

.green-bg { background-color: rgba(108,133,104, .8); text-align: center; color: #fff; padding: 8em 1em; }
.red-bg { background-color: rgba(172,56,52, .8); }
.grey-bg { background-color: rgba(64,64,64, .8); color: #fff }
.yellow-bg { background-color: rgba(244,238,204, .8); }
.white-bg { background-color: rgba(255,255,255, .8); }

@media screen and (max-width: 800px) {
	h1 { font-size: 70px; }
	h2, .subtitle { font-size: 34px; }
	h3 { font-size: 30px; }
	h4 { font-size: 22px; }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/*===================================
	HEADER
===================================*/
nav { display: flex; align-items: center; justify-content: center; position: relative; z-index: 10; }

.hamburger-menu { background-color: #6C8568; position: fixed; top: 0; right: 0; color: #F4EECC; padding: 10px; font-size: 28px; cursor: pointer; z-index: 3; }
.header-logo { max-width: 50px; position: absolute; top: 5px; left: 10px }
.header-logo img { width: 100% }

.dropdown { position: relative; }
.dropdown a { display: flex; align-items: center; width: fit-content; }
.dropdown span { font-size: 16px; }
.dropdown-content { opacity: 0; transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; height: 0; }
.dropdown-content li { padding: 5px 0 }
.dropdown-content.show { opacity: 1; padding: 5px 15px; background: #61775d; margin-top: 5px; height: auto; }


/*===================================
	FOOTER
===================================*/
footer { background-color: #6C8568; color: #F4EECC; padding: 3em 0 2em; text-align: center; position: relative; }
footer::before { content: ""; background-image: url(../images/assets/footer-deco.png); bottom: 0; right: 0; position: absolute; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; width: 300px; height: 60%; opacity: .15; }

.footer-top { border-bottom: 1px dashed #F4EECC; margin-bottom: 20px !important; padding-bottom: 3em; }
.footer-top > div:first-child { flex: .5 }
.footer-top > div:last-child { flex: 1 }
.footer-links { display: flex; align-items: start; text-align: left; }
.footer-links ul { flex: 1 }
.footer-button { margin-bottom: 20px; }

.footer-bottom { color: #fff; text-align: center; font-size: 15px; position: relative;	z-index: 2; }
.footer-bottom .social-media { margin-bottom: 10px; }
.social-media a { background-color: #fff; color: #404040; width: 33px; height: 33px; border-radius: 50%; display: inline-block; padding: 10px 5px; text-align: center; }
.social-media a img { width: 14px; }

.poweredby { display: inline-block; }
.poweredby img { filter: brightness(0) invert(1); }

#back-to-top { position: fixed; right: 0; bottom: 5%; background: rgba(64, 64, 64, .5); display: none; padding: 8px 20px; color: #fff; text-transform: uppercase; font-size: 13px; transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; }
#back-to-top:hover { background: rgba(64, 64, 64, 1) }
#back-to-top span { display: block; }


/*===================================
	Home
===================================*/
/*HOME*/
/* .hero { color: #F4EECC; text-align: center; margin-top: -80px; position: relative; background-image: url(../images/background/pizza-1.png), url(../images/background/pizza-2.png);	background-repeat: no-repeat;	background-position: left bottom, right bottom;	background-size: 40%, 55%; height: 100vh; } */
.hero { color: #F4EECC; text-align: center; margin-top: -80px; position: relative; background-image: url(../images/assets/hand-2.png);	background-repeat: no-repeat;	background-position: 95% bottom; background-size: 75%; height: 100vh; }
.hero h4 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.dot { font-variation-settings: 'FILL' 1; font-size: 18px; margin: 0 5px }
.hero .red-btn { display: flex; align-items: center; margin: 50px auto 0; width: 215px; justify-content: space-between; }
.hero::before, .hero::after { content: ""; position: absolute; display: block; background-repeat: no-repeat; background-size: contain; background-position: center; height: 35%; width: 130px; }
.hero::before { background-image: url(../images/assets/border-1.png); top: 0; right: 0 }
.hero::after { background-image: url(../images/assets/border-2.png); bottom: 0; left: 0 }

/*HOME - TOP5*/
.top5 { background-image: url(../images/background/top5.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: right; height: 60vh; -moz-background-size: cover; -webkit-background-size: cover; }
.top5 .section-inner { display: flex; flex-direction: column; align-items: center; }
#star { max-width: 350px; width: 100%; text-align: center; margin-bottom: 10px; }
#star img { max-width: 165px; width: 100%; }
.top5 p { max-width: 350px; color: #fff; text-align: center; }
.top5 p span { text-transform: uppercase; font-weight: 700; font-size: 26px; display: block; }

/*HOME - ABOUT*/
#about .section-inner { position: relative; }
#about .green-bg::before, #about .green-bg::after { content: ""; position: absolute; display: block; background-repeat: no-repeat; background-size: contain; background-position: center; height: 75px; width: 320px; }
#about .green-bg::before { background-image: url(../images/assets/border-3.png); left: calc(50% - 160px); top: 20px }
#about .green-bg::after { background-image: url(../images/assets/border-4.png); right: calc(50% - 160px); bottom: 25px; }

/*HOME - LOCATION*/
.downtown, .greenwood { background-repeat: no-repeat; background-position: top; background-size: cover; height: 60vh; color: #fff; text-align: center; -moz-background-size: cover; -webkit-background-size: cover; }
.downtown { background-image: url(../images/background/downtown.jpg); background-position: top left; }
.greenwood { background-image: url(../images/background/greenwood.jpg); background-position: top right; }

.store-info { display: flex; width: fit-content; text-align: left; margin-bottom: 15px; }
.store-info > li:last-child { margin-left: 35px }
.greenwood .store-info { margin-left: auto}

/*HOME - contact*/
#social, #contact { height: 50vh; }
#social h3, #contact h3 { margin-bottom: 0; }
#social { padding: 9em 0 0; }
#social p, #contact p { font-size: 20px; font-weight: 700; }
#social .section-inner, #contact .section-inner { display: flex; position: relative; justify-content: flex-end; }
#contact .section-inner { flex-direction: row-reverse; }

#social .white-bg, #contact .yellow-bg { max-width: 230px; padding: 25px; position: absolute; z-index: 3; }
#social .white-bg { left: 16px; top: -140px; }
#contact .yellow-bg { right: 16px; top: -140px; }

#social .social-media, #contact .contact-us { padding: 30px; width: 100%; height: 280px; display: flex; flex-direction: column; justify-content: center; }
#social .social-media { border: 3px solid #fff; color: #fff }
#social .social-media a { width: 50px; height: 50px; padding: 15px 15px 0px; text-shadow: none; margin-right: 15px; }
#social .social-media a img { width: 20px; }
#contact .contact-us { border: 3px solid #F4EECC; color: #F4EECC }
#contact .red-btn { margin-top: 20px }


/*=======================================
 	MODAL
========================================*/
.modal { background:rgba(0,0,0,0.75); display:none; height:100%; position:fixed; top:0px; left:0px; width:100%; z-index:10000; text-align: center; border-radius: var(--globel-border-radius);}
.modal h2 { margin-bottom: 30px; color: #F4EECC; width: 100%; }

.modal-close { background:none; border:none; color:#fff; cursor:pointer; font-weight:600; font-size:18px; padding:0; position:absolute; top:25px; right:25px; }
.modal-close:hover { color:#ce0e2d; background: none; }
button.modal-close span { font-size:35px; }

.modal-inner { display:flex; flex-direction: column; height:auto; position:absolute; top:45%; left:50%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); transform:translate(-50%, -50%); width:90%; max-width: 1100px; }
.modal-inner > a { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px solid #fff; background: url(../images/background/best-gf-pizza.webp) center no-repeat; background-size: cover; padding: 60px 35px; max-width: 350px; margin: 0 auto; width: 100%; position: relative; min-height: 240px; }
.modal-inner > a:last-child { background-image: url(../images/background/best-gf-dining.webp)}
.modal-inner .overlay { display: block; background-color: rgba(0,0,0,.4); width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10000 }
.modal-inner > a:hover .overlay { background-color: rgba(0,0,0,0) }
.modal-inner h3 { font-family: inherit; text-transform: capitalize; color: #fff; font-size: 22px; text-shadow: 0 0 15px rgba(0,0,0,.7); z-index: 10001; line-height: 1.3;}
.modal-inner .btn { z-index: 10001; }


/*===================================
	MENUS
===================================*/
.menus h2 { position: relative; margin-bottom: 95px; }
.menus h2::before, .menus h2::after { content: ""; position: absolute; display: block; background-repeat: no-repeat; background-size: contain; height: 65px; width: 45%; bottom: -70px; }
.menus h2::before { background-image: url(../images/assets/title-deco-1.png); left: 0; background-position: left }
.menus h2::after { background-image: url(../images/assets/title-deco-2.png); right: 0; background-position: right }

.menus .section-inner > p { border-bottom: 3px solid #6C8568; padding-bottom: 10px; }
.menus .section-inner > p b { color: #6C8568; font-weight: 600; }
.menus table { width: 100% }
.menus td { display: block; font-weight: 600; margin-bottom: 5px; font-size: 18px; vertical-align: baseline; }
.menus td > b, .menus td > span { margin-left: 15px; font-size: 16px; font-weight: 600; }
.menus td p { color: #646865; font-weight: 400; font-size: 16px; }

.menu-nav { text-align: center; margin-bottom: 30px; }
.menu-nav a { color: #404040; padding: 10px 5px 0; }
.menu-nav a:hover, .menu-nav a.active { color: #AC3834 !important }

.menu-img { height: 220px; overflow: hidden; display: flex; align-items: center; margin: 40px 0; }
.menu-img img { width: 100% }

.menus h3 { margin-top: 40px; text-transform: capitalize; font-weight: 500; }

/*menu title & price color*/
.menus.traditional td b, .menus.traditional h2 { color: #991A1D; }
.menus.gluten-free td b, .menus.gluten-free h2 { color: #4269B2; }
.menus.gluten-free-vegan td b, .menus.gluten-free-vegan h2 { color: #F15929; }
.menus.vegan td b, .menus.vegan h2 { color: #2E9A46; }


/*===================================
	OTHER PAGES
===================================*/
.otherpages { text-align: center; }
.otherpages .section-inner, .menus .section-inner { padding: 5em 1em }

.vintage-graphic { display: none; }
.vintage-graphic img { width: 100% }

/*Gift Card*/
.gift-card .subtitle { margin: -10px 0 0 }
.gift-card img { max-width: 500px; width: 100%; margin: 35px 0 30px }

/*Careers*/
.careers .subtitle { margin-bottom: -5px; }
.careers #job-opening { color: #404040; margin: 25px auto; max-width: 750px; }
.careers #job-opening li > p:first-child { display: flex; justify-content: center; font-weight: 700; font-size: 18px; align-items: flex-start; margin: 10px auto; }
.careers #job-opening li { padding: 20px; border-radius: 15px; background-color: #fff; margin: 15px 0; }
.careers #job-opening li span { margin-right: 10px }

/*Franchise*/
.franchise .subtitle { margin: -10px 0 30px }

/*Catering & Reservation*/
.reserve-info { margin: 30px 0; padding-top: 30px; border-top: 1px dashed #404040; border-bottom: 1px dashed #404040; }
.reserve-info p { padding: 0 10px; max-width: 400px; margin: 0 auto 20px; }
.reserve-info a, .reserve-info span { display: inline-block; }

.reservation a { color: #AC3834; }

.catering .btn, .banquet .btn { margin: 10px 5px 0px; display: inline-block; }


/*===================================
	MEDIA QUERY
===================================*/
@media screen and (min-width: 800px) {
	.section-inner { font-size: 18px }

	nav, .footer-top, .footer-bottom { width: 98%; margin: auto; }
	nav.sticky { position: fixed; top: 0; right: 0; animation: fadeIn .5s; -webkit-animation: fadeIn .5s; -moz-animation: fadeIn .5s; -ms-animation: fadeIn .5s; box-shadow: 0 0 10px rgba(0,0,0,.5); max-width: none; width: 100%; margin-top: 0 }

	/*HOME*/
	.downtown, .greenwood, .top5 { background-attachment: fixed; }
  
  /*MODAL*/
  .modal-inner { flex-direction: row; flex-wrap: wrap; }
  .modal-inner h3 { font-size: 30px; margin-bottom: 40px; }
  .modal-inner h2 { margin-bottom: 50px; }
  .modal-inner > a { height: 370px; max-width: 550px; padding: 85px; }

	/* .hero { background-size: 24%, 33%; } */
  .hero { background-size: 50%; }
	.hero::before, .hero::after { height: 38%; width: 230px; }
	.top5 .section-inner { align-items: flex-end; }
	#star img { max-width: 200px; }

	#about { padding: 10em 0; }
	#about, #social, #contact { margin: 0 1em; }
	#about .section-inner { padding: 6em }
	#about .green-bg::before, #about .green-bg::after { height: 130px; width: 535px; }
	#about .green-bg::before { background-image: url(../images/assets/border-3.png); left: 0; top: -60px }
	#about .green-bg::after { background-image: url(../images/assets/border-4.png); right: 0; bottom: -40px; }

	.downtown { text-align: left; }
	.greenwood, .greenwood .store-info { text-align: right; }

	#social { padding: 4em 0 0; }
	#contact { padding: 0 0 4em; }

	#social .social-media, #contact .contact-us { width: 80%; height: 330px; padding: 30px 20%; }
	#social .white-bg, #contact .yellow-bg { padding: 50px; top: 30%; max-width: 270px; padding: 50px; }
	#social p, #contact p { font-size: 24px; }

	#social .white-bg { left: 0; }
	#contact .yellow-bg { right: 0; }
	#social .white-bg, #contact .yellow-bg { max-width: 330px; }

	/*Catering & Reservation*/
	.reserve-info { display: flex; justify-content: center; padding: 30px 0; }
	.reserve-info p { margin: 0; }

	/*OTHER PAGES*/
	.otherpages, .menus { margin: 5em auto; display: block; width: 98%; max-width: 1400px; }
	.otherpages .section-inner, .menus .section-inner { padding: 5em }

	/*MENUS*/
	.menu-nav { display: none; }

	/*FOOTER*/
	footer { text-align: left; }
	.footer-top, .footer-bottom { display: flex; align-items: center; justify-content: center; justify-content: space-between; }
	footer::before { height: 92%; opacity: .7; }
	.footer-bottom .social-media { margin-bottom: 0px; }

	#site-map-links { display: flex; }
	#site-map-links > ul:nth-child(2) { padding-top: 26px; }

	/*HEADER*/
	nav { background-color: #6C8568; margin-top: 20px; padding: 15px; }
	.navlist { display: flex; align-items: center; justify-content: center; }
	.navlist > li > a { margin: 0 10px; display: flex; align-items: center; }
	.header-logo, .hamburger-menu { display: none; }

	.dropdown-content { transform: translateY(-40px); background-color: #60795C; padding: 1em; position: absolute; width: max-content; height: auto; height: 0; }
	.dropdown-content.more { right: -15px; }
	.dropdown:hover .dropdown-content { opacity: 1; transform: translateY(10px); height: fit-content; }
	.dropdown-content.show { top: 40px; transform: none; }
	.dropdown:hover .dropdown-content.show { transform: none; }
}

@media screen and (min-width: 1100px) {
	/*HOME*/
	.hero { background-size: 480px; }
	.hero::before { right: 5% }
	.hero::after { left: 5% }
	.hero::before, .hero::after { height: 46%; width: 20%; }

	/*MENUS*/
	.menus h3, .menus .section-inner > p { padding: 0 10px 10px }
	.menus td { width: 49%; display: inline-table; border-spacing: 10px 5px; }
}

@media screen and (min-width: 1300px) {
	.section-inner, nav, .footer-top, .footer-bottom { max-width: 1400px; }

	/*HEADER*/
	.navlist > li > a { margin: 0 20px; }

	/*OTHER PAGES*/
	.vintage-graphic { display: block; position: absolute; z-index: 5; width: 37% }

	.franchise, .banquet, .catering { display: flex; position: relative; margin: 5em auto }
	.franchise .section-inner, .banquet .section-inner, .catering .section-inner { width: 66%; margin-left: auto; margin-top: 60px }

	.banquet .section-inner { width: 71%; margin-right: auto; margin-left: 0 }
	.banquet .vintage-graphic { width: 32%; right: 0 }
}

@media screen and (min-width: 1600px) {
	.section-inner, nav, .footer-top, .footer-bottom { max-width: 1400px; }
}

@media screen and (max-width: 699px) {
	/*HOME - LOCATION*/
	.store-info { margin: 10px auto; }

	/*FOOTER*/
	.footer-links { max-width: 300px; margin: auto; }
	#footer-logo img { max-width: 150px; padding-bottom: 20px;  }
}

@media screen and (max-width: 799px) {
	/*HEADER*/
	.navlist { transform: translateX(235px); background-color: #6C8568; transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; width: 235px; padding: 3em 1.5em 2em; top: 0; position: fixed; right: 0; }
	.navlist li { padding: 5px 0 }
	.navlist.show { transform: translateX(0); }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}