/*=======================================
 	MENUS
========================================*/

/* menu list */
#menu-bar { background:#FFD100; box-shadow:0px 3px 10px 0px rgba(0,0,0,0.25); -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; position: static; top:0px; }

.menu-list { padding: 5px 0; margin-left: 225px }
.menu-list li:first-child { display:none; }
.menu-list li { display: inline-block; position: relative; }
.menu-list li a, .menu-list li span, .step a { color: #000; cursor: pointer; display: inline-block; font-family: 'Bitter', serif; font-size: 1em; font-weight: 700; padding: 5px 10px; text-transform: uppercase; }
.menu-list li a.active, .menu-list li a:hover { color: #D6001C; text-decoration: underline; }

#menu-bar.sticky { position:fixed; top:0; left:0; width:100%; z-index:99; }

.support-menu .menu-list li:first-child { display:inline-block; }

/* menu items */
#menu { text-align:center; padding:0 70px; }
#menu h1 { background:#FFD100; color:#1a1a1a; font-size:2em; padding:5px 10px; text-align:left; }
#menu h2 { background:#FFD100; color:#1a1a1a; font-size:2em; padding:5px 10px; text-align:left; }
#menu h1.egg-gondola-title-h1 { text-align:center; }
#menu h1.egg-gondola-title { padding:20px 0; }
#menu .eg-logo { width:120px; }
#menu .ooak-logo { width:100px; }


#menu .menu-title { display:flex; flex-direction:column; text-align:left; width:100%; }
#menu .menu-title h1 { background:none; text-align:left; padding:0; }
#menu .menu-title h2 { background:none; text-align:left; padding:0; }

#menu h1 span { position:relative; height:80px; line-height:80px; }

/* 
#menu h1 span.egg-gondola-title::before { background:url('../images/logos/egg-gondola.png') no-repeat; background-size:cover; height:80px; display:block; content:""; position:absolute; top:50%; left:-100px; width:80px; }
#menu h1 span.egg-gondola-title::after { background:url('../images/logos/one-of-a-kind.png') no-repeat; background-size:cover; height:79px; display:block; content:""; position:absolute; top:50%; right:-80px; width:66px; }
#menu h1 span.egg-gondola-title::before, #menu h1 span.egg-gondola-title::after { transform:translateY(-50%); }
*/

.menu-items { padding:0 0px; text-align:left; } 

.menu-items .menu-item-list { display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-flex-flow:row wrap; -ms-flex-flow:row wrap; -moz-flex-flow:row wrap; flex-flow:row wrap; }
.menu-item-list.first-row { width: 100% }
.menu-item-list h2 { padding: 0 10px; margin: 1em 0 0; }
.menu-items h3 { padding: 0 10px; margin: 1em 0 0; color: #1a1a1a; font-size: 2em; font-weight: 700; text-align: left; }
.menu-items .menu-item { border:3px solid #e8e0c7; position:relative; background:#f7efd9; display:flex; flex-flow:column nowrap; float:left; flex-basis:calc(25% - 20px); margin:20px 10px 0 10px; overflow: hidden; width:calc(25% - 20px); -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; }
.menu-items .menu-item:hover { transition:all 0.1s ease; -webkit-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.1); -moz-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.1); box-shadow:0px 0px 10px 0px rgba(0,0,0,0.1); }

.menu-items .item-img { height: 235px; position: relative; }
.menu-items .item-img img{ width: 385px; position: absolute; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;}
.menu-items .item-img:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.05); transform: scale(1.05); }

.menu-items .item-info { padding: 15px 6% 15px 15px; }

.menu-items .menu-item span { display: block; }
.menu-items .menu-item .item-price { font-family: 'Bitter', serif; font-weight: 700; color: #000; margin-bottom: 5px }
.menu-items .menu-item .item-name { color: #000; display: block; font-size: 1.267em; font-family: 'Bitter', serif;  font-weight: 700; line-height: 1.3; padding-bottom: 5px; }
.menu-items .menu-item .item-name:hover { color: #444 }

.menu-items .item-button { position: absolute; bottom: 20px; }

/*size*/
#pizzaSizeModal.modal { z-index:9999; }
.size { margin:2rem 0 25px 0; }
.size li { display: inline-block; margin:10px; text-align:center; }
.size li span { font-family: 'Bitter', serif; font-weight: 700; font-size: 1.3em; color: #fec81d; display:inline-block;  border: 3px solid #aaa; border-radius: 110px; width: 45px; height: 45px; vertical-align: middle; line-height: 2; background: url('../images/size/pizza-tray-blk.png') center no-repeat; background-size: contain; -webkit-transition: 0.1s; -moz-transition: 0.1s; -o-transition: 0.1s; }
.size li span:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);}
.size li b { font-family: 'Bitter', serif; font-size: 1.1em; color: #000; text-transform: uppercase; display:block; text-align: center; argin-left: 10px;   }
.size li em { display: block; font-weight: 400; font-size: .9em;  color: #444; line-height: 1.3; padding-top: 5px; text-transform: none; }

.size.pizza-regular-size .slices span { background: url('../images/size/slice.png') center no-repeat; background-size:contain; border-radius:0; border:0; width:40px; height:50px; position:relative; }
.size.pizza-regular-size .med span { width: 55px; height: 55px; line-height: 2.7; }
.size.pizza-regular-size .lg span { width: 65px; height: 65px;  line-height: 3.2;}
.size.pizza-regular-size .xlg span { width: 75px; height: 75px; line-height: 3.8;}
.size.pizza-regular-size .jumbo span { width: 75px; height: 75px; line-height: 3.8; }
.size.pizza-regular-size .mama span { width: 95px; height: 95px;  line-height: 4.8;}
.size.pizza-regular-size .papa span { width: 115px; height: 115px; line-height: 5.7;}
.size.pizza-regular-size .gf-sm span { width: 50px; height: 50px; line-height: 2.2; }
.size.pizza-regular-size .gf-lg span { background: url('../images/size/pizza-tray-gf-blk.png') center no-repeat; background-size: contain; width: 150px; height: 65px; border-radius: 10px;  line-height: 3.2;}

.size.pizza-regular-size .gf-lg b { padding-top:5px; }

.size.calzone { margin:5px 0 0; }
.size.calzone li span { background: url('../images/size/cal-1.png') center no-repeat; background-size: contain; border-radius: 0; border: 0; width: 45px; height: 40px;  }
.size.calzone .cal-2 span { background: url('../images/size/cal-1.png') center no-repeat; background-size: contain; width: 55px; height: 45px;  }
.size.calzone .cal-2 b {  }

.size.egg { margin:5px 0 0; }
.size.egg li span { background: url('../images/size/egg-1.png') center no-repeat; background-size: contain; border-radius: 0; border: 0; width: 67px; height: 42px;  }
.size.egg .egg-2 span { background: url('../images/size/egg-2.png') center no-repeat; background-size: contain; width: 89px; height: 48px; }

.size.slices li span { background: url('../images/size/slice.png') center no-repeat; background-size: contain; border-radius: 0; border: 0; width: 50px; height: 60px;  }
.size.pizza-regular-size .slices span::before { color:#FFF000; content:"17''"; position:absolute; left:-27px; top:0; z-index:9999; -ms-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); transform:rotate(-90deg); -webkit-text-stroke-width: 1px;  -webkit-text-stroke-color: black; }
.size.pizza-regular-size .slices span::after { color:#FFD100; content:"14''"; position:absolute; right:-7px; top:-22px; -ms-transform:rotate(25deg); -webkit-transform:rotate(25deg); transform:rotate(25deg); -webkit-text-stroke-width: 1px;  -webkit-text-stroke-color: black; }


/*hand tossed*/
.hand-tossed { background: url('../images/size/hand-tossed.png') left center no-repeat; background-size: contain; color: #1a1a1a; display: inline-block; font-family: 'Bitter', serif; font-weight: 700; font-size: 1.2em; padding: 8px 0 8px 50px; }


/* view all menu */
.intro-menu { padding: 100px 0 100px; text-align: center; -webkit-clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%); }
.intro-menu-list li { float: left; width: 25%; margin: 40px 0;  }
.intro-menu-list li img { width: 90%; display: inline-block; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;  }
.intro-menu-list li a:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.05); transform: scale(1.05); }

.intro-menu-list li a span{ background: #000; display: inline-block; color: #fff; font-family: 'Bitter', serif; font-weight: 700; font-size: 1.3em;  padding: 8px 20px;  margin-top: 10px; text-transform: uppercase;  /*-webkit-box-shadow: 4px 4px 0px 0px #ddd7c6; -moz-box-shadow: 4px 4px 0px 0px #ddd7c6; box-shadow: 4px 4px 0px 0px #ddd7c6;*/ }
.intro-menu-list li a span:hover { background: #fec81d; color: #000; }


/*Extra large devices (large desktops, 1200px and up)*/
@media (max-width: 1430px) { 
	/* menu list */ 
	.menu-list li a { padding:5px; }
	
	
	/* menu items */
	.menu-items .menu-item { flex-basis:calc(33.3334% - 20px); width:calc(33.3334% - 20px); }
}

@media (max-width: 1200px) {  
	/* menu list */ 
  #menu { padding:0; }
	.menu-list { margin-left:0px; text-align:center; }
	.menu-list li:first-child { display:inline-block; }
	.menu-list li:not(:first-child) { display:none; line-height:2em; }
  .menu-list li, .menu-list li a { width:100%; }
	.menu-list.active li:not(:first-child) { display:inline-block; width:100%; }
	.menu-list.active li:nth-child(2) { margin-top:10px; padding-top:10px; border-top:1px solid rgba(0,0,0,0.1); }
  
  
    .size li em { font-size:0.8em; }

  .support-menu .menu-list { display:flex; text-align:center; }
  .support-menu .menu-list li:not(:first-child) { display:inline-block; }
  .menu-list li:nth-child(1) { padding-left:205px; }
  .support-menu .menu-list li, .support-menu .menu-list li a { width:auto; }
  .support-menu .menu-list li, .support-menu .menu-list li a { align-items:center; display:flex; justify-content: center; line-height:1em; }
	
}

/*Large devices (desktops, 992px and up)*/
@media (max-width: 992px) { 
	/* menu list */
	#menu-bar, #menu-bar.sticky { position:static; top:auto; top:60px; left:0%; width:100%; z-index:99; }
  #menu-bar.sticky { position:fixed; }
	
	/* menu items */
	.menu-items { padding: 30px;  } 
  
	#menu { margin-top:0px; }
    
    .intro-menu-list li {  width: 33.3334%; margin: 30px 0;  }
  
  .menu-list li:nth-child(1) { padding-left:145px; }

}

/*Medium devices (tablets, 768px and up)*/
@media (max-width: 768px) {  

	/* menu items */
	.menu-items .menu-item { flex-basis:calc(50% - 20px); width:calc(50% - 20px); }
	
	#menu .eg-logo { width:60px; }
	#menu .ooak-logo { width:40px; }
	
	#menu h1 {font-size:2em; }
    
    .intro-menu-list li {  width: 50%; margin: 20px 0;  }
    .intro-menu-list li a span { font-size:1em; }

}

/*Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) { 
	#menu h1 { font-size:2em; }


	/* menu items */
	.menu-items { padding: 0px;  } 
	.menu-items .menu-item { flex-basis:calc(50% - 10px); margin:10px 5px 0 5px; width:calc(50% - 10px); }
	
	.menu-items .item-img img { width:260px; }
	.menu-items .item-img { height:160px; }
	
	.size { margin:0 0 25px 0; }
	.size li { margin:5px; }
	.size li b { font-size:0.9em; }
	.size li span { font-size:1em; }
	
	.size.pizza-regular-size .slices span { width:30px; height:40px;  }
	.size.pizza-regular-size .sm span { line-height: 2.5; }
	.size.pizza-regular-size .med span { width: 52px; height: 52px; line-height: 3; }
	.size.pizza-regular-size .lg span { width: 58px; height: 58px;  line-height: 3.6;}
	.size.pizza-regular-size .xlg span { width: 62px; height: 62px; line-height: 3.8;}
	.size.pizza-regular-size .jumbo span { width: 68px; height: 68px; line-height: 4.2; }
	.size.pizza-regular-size .mama span { width: 75px; height: 75px;  line-height: 4.8;}
	.size.pizza-regular-size .papa span { width: 80px; height: 80px; line-height: 5.2;}
	.size.pizza-regular-size .gf-sm span { width: 50px; height: 50px; line-height: 2.9; }
	.size.pizza-regular-size .gf-lg span { background: url('../images/size/pizza-tray-gf-blk.png') center no-repeat; background-size: contain; width: 100px; height: 50px; border-radius: 10px;  line-height: 3;}

	
	.size.calzone li span { width: 45px; }
	.size.calzone .cal-2 span { width: 60px;  }
	
	#menu h1 span.egg-gondola-title::before, #menu h1 span.egg-gondola-title::after { display:none; }
	
	.size.pizza-regular-size .slices span::before { left:-20px; top:0; }
	.size.pizza-regular-size .slices span::after { right:-4px; top:-18px; }



}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
	.menu-items .menu-item { flex:0 0 auto; width:calc(25% - 20px); }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:1430px) { 
	.menu-items .menu-item { flex:0 0 auto; width:calc(33.3334% - 20px); }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px) { 
	.menu-items .menu-item { flex:0 0 auto; width:calc(50% - 10px); }
}