﻿* {margin:0; padding:0; outline:none; border:none; box-sizing:border-box; -moz-box-sizing:border-box;}

/* PepsiCo Cookies */

#consent_blackbar {position: fixed; top: 0; left: 0; z-index: 999; width: 100%;}
#teconsent {position: fixed; bottom: 0; left: 0; z-index: 999;}


/* GLOBAL */
html { }
body {line-height:1; color:#000000; font-family: 'Open Sans', sans-serif; text-rendering: optimizeLegibility;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}

::-webkit-input-placeholder     {color:#bdbdbd;}
::-moz-placeholder              {color:#bdbdbd; opacity:1;}
:-ms-input-placeholder          {color:#bdbdbd;}
:-moz-placeholder               {color:#bdbdbd; opacity:1;}


img     {max-width:100%; height:auto; user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none;}
a       {color:inherit;}
a.cover {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0); display:block;}

.inner {max-width:1208px; width:100%; margin:0 auto; padding: 0 22px;}

p		{font-size: 20px; margin-bottom: 1em;}

form { font-size: 0; }

/* HEADER */
header			{width: 100%; position: relative; z-index: 100; background-color: #642b90; padding: 15px 0; box-shadow: 0 10px 0 rgba(0,0,0,0.1);}
header .inner 	{display:flex; justify-content:space-between; align-items: center; position: relative;}

nav ul				{display: flex; align-items: center;}
nav li			{margin-left: 30px; text-transform: uppercase; font-family: 'Gotham-Black', 'Arial Narrow', sans-serif;}
nav li a		{color: #ffffff; text-decoration: none; font-size: 18px; transition: 0.2s ease-out}
nav li a:hover	{color: #ffd01e;}


.logo { height: 60px; flex-shrink: 0 }

strong.mello	{text-transform: uppercase; font-size:20px; color:#FFD01E; font-family: 'Gotham', 'Arial Narrow', sans-serif;}

.minus-top	{margin-top: -20px;}


.mobile-nav-logo { display: none; }

/* NAV ICON */
.nav-icon 					{width: 28px; height: 22px; z-index: 100; position: absolute; right:20px; bottom:8px; cursor: pointer; display: none}
.nav-icon span 				{width: 100%; display: block; height: 2px; background-color: #ffffff; position: absolute; top: 0; left: 0; border-radius: 1px; }
.nav-icon span:nth-child(1) {}
.nav-icon span:nth-child(2) {top: 8px; }
.nav-icon span:nth-child(3) {top: 16px; }

.nav-icon.open span:nth-child(1) 	{top: 10px; transform: rotate(45deg) }
.nav-icon.open span:nth-child(2) 	{opacity: 0; transform: scale(0) }
.nav-icon.open span:nth-child(3) 	{top: 10px; transform: rotate(-45deg)}

/* HEADER IMAGES */

.hero-dk-2 {display: none;}

.main-hero { position: relative; z-index: 5; }
.main-hero img { width: 100%; }


.sub-header		{position: relative; display: flex; align-items: center; z-index: 4; background-color: #642b90; padding: 30px 0; }
.sub-header img { width: 100%; }
.sub-header h1 { font-size: 50px; text-transform: uppercase; width: 100%; display: block; text-align: center; font-family: 'Gotham-Black', 'Arial Narrow', sans-serif; color: #ffffff }

/* MAIN CONTENT */
.grey-section { padding: 60px 0 80px; /*background-image: url(/_assets/bg-grey.jpg);*/ background-size: cover; background-position: top; background-color: #ffffff; margin-top: 0px; position: relative; overflow: hidden; }
.border-container { border: 5px solid #642890; border-radius: 10px; background-color: #ffffff; padding: 70px 40px; position: relative; z-index: 5 }

.text-block			{text-align: center}
.text-block p		{line-height: 1.4em; width:1000px; max-width: 100%; margin: 40px auto 0px}

.meet-the-owners .text-block	{margin-top:0; margin-bottom: 120px; width:860px; margin-left: auto; margin-right: auto; max-width: 100%;}
.meet-the-owners .text-block p	{color:#145893}

/* FOOD IMAGES */

.food-1 { position: absolute; left: 0; top: 25%; bottom: 0; width: 20%; overflow: hidden; background-image: url("/_assets/burger-1.jpg?v=2"); background-size: auto 75%; background-position: top left; background-repeat: no-repeat; }
.food-2 { position: absolute; right: 0; top: 0%; bottom: 0; width: 20%; overflow: hidden; background-image: url("/_assets/chips-1.jpg?v=2"); background-size: auto 75%; background-position: top right; background-repeat: no-repeat;  }

.text-page .food-1  { width: 300px; background-size: contain; top: 300px; }

.text-page .food-2 { width: 300px; background-size: contain; top: 0; }



.sub-header .potato-1		{position: absolute; width:200px; left: 70px; top:10px;}
.crisp-1					{position: absolute; right:0; top:200px; width: 290px;}
.crisp-2					{position: absolute; right:-130px; top:100px; width: 290px;}
.sub-header img.crisp-3		{position: absolute; right:0; top:-100px; width: 192px;}

.crisp-4					{position: absolute; right:50px; top:100px;}
.crisp-5					{position: absolute; right:60px; bottom:200px;}

.sub-header img.madras		{position: absolute; width:398px; left: -60px; top:10px;}

.potato-2					{position: absolute; left: 0; top:100px;}
.potato-3					{position: absolute; left: 0; bottom:0px;}

.hotdog-1					{position: absolute; top:350px; left: 0; width: 300px;}
.sushi-1					{position: absolute; top:100px; right: 0; width: 300px;}

/* BLUE SECTION */
.purple-section { padding: 60px 0; background-image: url(/_assets/bg-purple.jpg); background-size: cover; background-position: top; margin-top: -20px; overflow: hidden; position: relative; }
.purple-section h2 { font-size: 50px; text-transform: uppercase; width: 100%; display: block; text-align: center; font-family: 'Gotham-Black', 'Arial Narrow', sans-serif; color: #ffffff; margin-bottom: 60px; }

/* RED SECTION */
.red-section { padding: 80px 0 70px 0; background-color: #9B1B18; margin-top: -20px; overflow: hidden; position: relative; }
.red-section h2		{font-size: 80px; text-transform: uppercase;  width:100%; display: block; text-align: center; font-family: 'Mello-Cm', 'Arial Narrow', sans-serif; color:#ffffff; margin-bottom: 60px;}
.red-section:before	{position: absolute; left: 0; top:0; width:100%; height: 100%; background-image:url(/_assets/white-pattern.svg); background-size: 350px auto; content: ''; opacity: 0.1}
.red-section .inner	{z-index: 5; position: relative;}
.red-section p		{font-size: 20px; color:#ffffff; line-height: 1.3em;}

.manifesto .inner		{display: flex; width:1385px; max-width: 100%;}
.manifesto .text		{width:570px; max-width: 100%; text-align: left; margin: auto; position: relative; z-index: 5}
.manifesto .text h2		{text-align: left; margin-bottom: 30px;}

.manifesto .plate		{left: -48px; top:-60px; position: absolute;}
.manifesto .receipt		{right: 0; top:-40px; position: absolute;}
.manifesto .signature	{margin-top: 20px;}

.purple-section .col-container { display: flex; justify-content: center; }
.purple-section .col-3 { width: 33%; padding: 8px; }

.graphic-panel					{text-align: center;}
.graphic-panel img				{height:182px; width:auto;}
.graphic-panel h3				{color:#FFD01E; font-size: 55px; font-family: 'Gotham-Black', 'Arial Narrow', sans-serif; margin-bottom: 0.2em;}
.graphic-panel h3 span			{color:#ffffff; font-size: 35px; display: block;}
.graphic-panel p				{color:#ffffff; font-size: 18px; line-height: 1.4em; max-width: 100%; width:260px; margin-left: auto; margin-right: auto;}
.graphic-panel-image			{margin-bottom: 20px;}

/* MEET THE OWNERS */
.meet-the-owners					{padding: 50px 0 90px; overflow: hidden}
.meet-the-owners .col-container		{display: flex; flex-wrap: wrap}
.meet-the-owners .inner .col-2		{width:50%; padding: 10px;}
.meet-the-owners .inner				{position: relative; z-index: 4}

.mto-panel					{border-radius: 10px; border:5px solid #0064AF; color:#ffffff; background-image:url(/_assets/bg-wavey.jpg); background-size: cover; height: 100%; margin-bottom: 10px;}
.mto-panel-top				{padding: 40px; padding-bottom: 35px; display: flex; align-items: flex-start; position: relative;}
.mto-panel-top img			{width:340px; position: absolute; right:-40px; top:-110px;}
.mto-panel-top p			{font-size: 18px; margin-bottom: 0}
.mto-panel-top p.inspired	{margin-bottom: 0.2em; font-style: italic;}
.mto-panel-top p a			{text-decoration: none}
.mto-panel-top h3			{font-family: 'Summer Loving', 'Arial Narrow', sans-serif; font-weight: normal; font-size: 60px; margin-bottom: 0.5em; line-height: 0.8em}
.mto-panel-top h4			{font-family: 'Mello-Cm', 'Arial Narrow', sans-serif; font-size: 30px; text-transform: uppercase; margin-bottom: 0.2em;}
.mto-panel h5				{font-family: 'Mello-Cm', 'Arial Narrow', sans-serif; font-size: 25px; text-transform: uppercase; margin-top: 15px;}
.mto-panel-top-text			{width:calc(100% - 230px);}

.mto-text-outer				{padding: 13px; text-align: center;}
.mto-text					{background-color:rgba(0,100,175,0.8); padding: 30px; padding-bottom: 40px; border-radius: 10px; display: flex; justify-content: flex-start; flex-direction: column}
.mto-text p					{font-size: 18px; margin-bottom: 0; line-height: 1.3em;}

.mto-panel.green					{border-color:#15882E}
.mto-panel.green h3,
.mto-panel.green h4,
.mto-panel.green .mto-panel-top p	{color:#15882E}
.mto-panel.green .mto-text			{background-color:rgba(21,136,46,0.95)}	

.mto-panel.orange					{border-color:#EE7900}
.mto-panel.orange h3,
.mto-panel.orange h4,
.mto-panel.orange .mto-panel-top p	{color:#4E2800}
.mto-panel.orange .mto-text			{background-color:rgba(238,121,0,0.95)}	

.mto-panel.purple					{border-color:#6A1F7A}
.mto-panel.purple .mto-text			{background-color:rgba(106,31,122,0.95)}

/* CONTACT US */
.contact { padding: 80px 0 60px 0; position: relative; flex-basis: 60%; display: flex; flex-direction: row; font-size: 0; }
.contact .inner { width: 932px; max-width: 100%; margin: auto; position: relative; z-index: 10 }
.contact h2		{font-size: 90px; text-transform: uppercase;  width:100%; display: block; text-align: center; font-family: 'Gotham-Black', 'Arial Narrow', sans-serif; color:#642b90; margin-bottom: 60px;}
.contact h3 { font-size: 45px; text-transform: uppercase; width: 100%; display: block; font-family: 'Gotham-Black', 'Arial Narrow', sans-serif; color: #642b90; margin-bottom: 15px; }
.contact p		{font-size: 24px; line-height: 1.4em}

.contact .left,
.contact .right { flex-basis: 30%; max-width: 300px; position: relative; overflow: hidden; }

.contact .left .food-1 { width: 300px; background-size: contain; top: 200px; }

.contact .right .food-2 { width: 300px; background-size: contain; top: 50px; }

.contact-top					{border-top:2px solid #FFD01E; border-bottom: 2px solid #FFD01E; padding-top: 30px; padding-bottom: 40px;}
.contact .form-cell-checkbox	{max-width:100%; margin-left: 0; margin-bottom: 10px;}

.contact-bottom { padding: 60px 0 40px; }
.contact-bottom .form-cell label { color: #642b90; }
.contact-bottom .btn { color: #642b90; border-color: #642b90; min-width: unset; padding-left: 40px; padding-right: 40px }
.contact-bottom .btn:hover { background-color: #642b90; }

@media (max-width: 1640px ) {
   .text-page .food-1 { left: auto; right: 32px; }
   .text-page .food-2 { right: auto; left: 32px; }

   .contact .left .food-1 { left: auto; right: 0px; }
   .contact .right .food-2 { right: auto; left: 0px; }
}

/* TERMS */
.text-page			{padding:100px 0 60px 0; position: relative;}
.text-page .inner	{width:976px; max-width:100%; margin: auto; position: relative; z-index: 10}
.text-page h1		{text-transform: uppercase; font-family: 'Gotham-Black', 'Arial Narrow', sans-serif; color:#642b90; font-size: 45px; margin-bottom: 0.5em;}

.text-page p,
.text-page ol,
.text-page ul		{font-size: 18px; line-height: 1.4em; margin-bottom: 1em;}

.text-page ol,
.text-page ul		{margin: 1em; margin-left: 1.2em;}

.text-page strong.mello { color: #642b90; }

ol.alpha	{list-style: lower-alpha}
ol.roman	{list-style: lower-roman}

/* FAQ ACCORDION */
.faqs h1													{text-align: center; display: block; font-size:90px;}
.faq-accordion h2											{font-family: 'Gotham-Black', 'Arial Narrow', sans-serif; font-size: 42px; margin-bottom: 10px; margin-top: 25px; color:#642b90; text-decoration: underline;}
.faq-accordion .accordion-item								{padding:15px 0; margin-bottom:6px; border-bottom: 2px solid #FFD01E}
.faq-accordion .accordion-item h3							{padding-right: 30px; font-size:24px; color: #642890; text-transform: uppercase; background-color: #ffffff; position: relative; cursor: pointer; line-height: 1.2em; font-family: 'Gotham-Black', 'Arial Narrow', sans-serif;}
.faq-accordion .accordion-item h3 span.plus                 {width: 24px; height: 20px; background-image: url(/_assets/triangle.png); background-size: cover; position: absolute; right: 0; display: block; top: 50%; margin-top: -10px;}
.faq-accordion .accordion-expanded							{display:none; padding:20px 0;}
.faq-accordion .accordion-expanded p						{font-size: 24px;}
.faq-accordion .accordion-expanded p:last-child				{margin-bottom:0;}
.faq-accordion .accordion-item.active h3 span.plus			{transform: rotate(180deg);}
.text-page.faqs ol                                          {font-size: 24px;}

/* RESTAURANTS PAGE */
.restaurants-page				{padding: 80px 0; position: relative}
.restaurants-page strong.mello	{color:#A60109}
.pay-options					{display: flex; justify-content: center; align-items: center}
.pay-options img				{margin: 0 30px;}

.restaurants-page .inner		{position: relative; z-index: 10}

.map-container .border-container { border-radius: 10px; border: 5px solid #421366; width: 1248px; max-width: calc(100% - 40px); margin: 30px auto 0; padding: 0 }
.map-container .border-container .inner	{width:100%; max-width: 100%; padding: 0}

.map-container-top { text-align: center; background-color: #642b90; padding: 50px; border-bottom: 5px solid #421366; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.map-container-top h3	{color:#642b90; text-transform: uppercase; font-size: 40px; font-family: 'Gotham-Black', 'Arial Narrow', sans-serif;}

.map-container-top h3 .large {font-size: 35px; color: #ffd01e; }
.map-container-top h3 .small {font-size: 24px;}


.map-container-top input[type='text']	{border-radius: 5px; border:2px solid #441469; width:630px; max-width: 100%; font-size:20px; color:#000000; padding: 20px; text-align: center; display: block; margin: 25px auto}

.map-container-top .btn { background-color: #ffd01e; border-color: #ffd01e; color: #642b90; }
.map-container-top .btn:hover { border-color: #421366; }

.map-search	{position: relative; z-index: 5}

.map { width: 100%; height: 60vh; position: relative; }

.map.loading:before { content:"Loading ..."; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #ffffff; font-family: Mello, sans-serif; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; }

.map-search p.qr-code { font-size: 14px; font-family: "Open Sans", sans-serif, Arial; font-weight: bold; margin-top: 8px; color: #A60109; }

.map-search p.qr-code.strapline { font-size: 18px; color: #ffffff;}

.map-search p.error { color: #cc0000; }

.map-container .disclaimer p {font-size: 14px; margin-top: 20px; text-align: center; }


.current-location		{display: inline-flex; font-size: 20px; text-transform: uppercase; font-family: 'Gotham-Black', 'Arial Narrow', sans-serif; background: none; color:#ffd01e; margin-bottom: 20px; align-items: center;}
.current-location span	{text-decoration: underline}
.current-location img	{width:27px; margin-right: 10px;}

.restaurant-information:before,
.pattern:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(/_assets/bg-purple.jpg); background-size: cover; content: ''; }

/* RESTAURANT DETAIL */
.restaurant-details-container	{border:5px solid #441469; border-radius: 10px; background-color: #ffffff; width:932px; max-width:calc(100% - 40px); margin: auto; position: relative; z-index: 5; display: none}

.restaurant-image { width: 126px; height: auto; border-radius: 10px; margin-bottom: 15px; }
.restaurant-information { background-color: #FAB52C; text-align: center; position: relative; padding: 30px 20px; border-bottom: 5px solid #441469; border-top-left-radius: 4px; border-top-right-radius: 4px; }
.restaurant-information h3.restaurant-name { font-family: 'Gotham-Black', 'Arial Narrow', sans-serif; font-size: 45px; text-transform: uppercase; color: #ffffff; margin-bottom: 15px; }
.restaurant-information-inner-top { position: relative; z-index: 5; color: #ffffff; }

.restaurant-rating				{background-color: #ffffff; display: inline-flex; border-radius: 10px; padding: 2px 10px; align-items: center; margin-bottom: 15px}
.restaurant-rating ul			{list-style: none; display: inline-flex}
.restaurant-rating ul li		{width:31px; height: 30px; background-image: url(/_assets/star-empty.png); background-size: cover;}
.restaurant-rating ul li.full	{background-image: url(/_assets/star.png)}
.restaurant-rating ul li.half	{background-image: url(/_assets/star-half.png)}
.rating-score					{font-size: 18px; font-weight: 600; margin-left: 6px; color: #000000;}
.restaurant-address { font-size: 18px; font-weight: 600; margin-bottom: 15px; }
.restaurant-telephone { font-size: 18px; font-weight: 600; margin-bottom: 0; }

.dining-service { font-family: 'Open Sans', sans-serif; font-size: 18px; margin: 16px; text-transform: uppercase; color: #ffd01e; font-weight: bold; }

.restaurant-opening-times ul	{font-size: 18px; font-weight: 700; list-style: none}
.restaurant-opening-times ul li	{margin-bottom: 5px;}

.restaurant-opening-times { margin: 0 0 20px 0; }
.restaurant-opening-times.desktop { display: block; }
.restaurant-opening-times.mobile { display: none; }

table.open-close-times { display: inline-block; width: auto; margin: 0 auto; }
table.open-close-times tr { }
table.open-close-times tr td { text-align: left; padding: 0 5px 5px 0; font-size: 18px; font-weight: 700;  }
table.open-close-times tr:last-child td { padding-bottom: 0; }
table.open-close-times tr td.oc-day { }
table.open-close-times tr td.oc-time { }

.restaurant-opening-times.mobile table.open-close-times td { font-size: 15px; font-weight: 400; }


.restaurant-details { }

.restaurant-details .btn-claim { margin-top: 20px; border-color: #441469; }

.restaurant-terms { padding: 50px 20px; }
.restaurant-terms h4			{font-family: 'Gotham-Black', 'Arial Narrow', sans-serif; font-size: 24px; text-transform: uppercase; color:#642b90; margin-bottom: 15px; width:616px; max-width: 100%; margin-left: auto; margin-right: auto;}
.restaurant-terms ul			{color:#505050; font-size: 16px; line-height: 1.3em; width:616px; max-width: 100%; margin: auto; padding-left: 20px;}
.restaurant-terms ul li			{margin-bottom: 8px}

.restaurant-terms .btn			{display: block; width:275px; max-width: 100%; color:#642b90;  margin: 30px auto 0; border-color:#642b90; text-align: center;}
.restaurant-terms .btn:hover	{border-color:#441469;}

/* INFO TOGGLE */
.input-border.with-info						{position: relative}
.info-popup-container						{position: absolute; right: 10px; width:29px; height: 29px;}
.info-popup-container .info-toggle			{width:29px; height: 29px; height: auto; cursor: pointer; z-index: 5; position: relative}
.info-popup-container .info-popup			{position: absolute; top:-100px; left: 18px; width:258px; max-width: unset; display: none; z-index: 4}
.info-popup-container .info-popup.active	{display: block}

/* RESOURCES */
.resources				{text-align: center}
.resources h1			{font-size: 70px; margin-bottom: 0.2em;}
.resources p.intro		{font-size:24px; width:616px; max-width: 100%; margin-left: auto; margin-right: auto}
.resource				{text-align: left; border-top:2px solid #FFD01E; padding: 20px 0; display: flex; justify-content: space-between; align-items: flex-end}
.resource h2			{background-size: 45px auto; background-repeat: no-repeat; background-position: left center; font-size: 40px; font-family: 'Mello-Cm', 'Arial Narrow', sans-serif; color: #A60109; text-transform: uppercase; padding: 5px 0 5px 75px}
.resource p				{margin-top: 0.75em; margin-bottom: 0; padding-right: 20px; }
.resource .btn			{border-color:#A60109; color:#A60109; width:219px; max-width: 100%; min-width: unset; text-align: center; flex-shrink: 0}
.resource .btn:hover	{background-color:#A60109;}
.resource:last-of-type	{border-bottom:2px solid #FFD01E;}

.resource-listing	{margin-top: 50px;}

/* FORM */
.form-errors { background-color: #f1f1f1; width: 414px; max-width: 100%; margin: auto; margin-bottom: 40px; padding: 30px; }
.form-errors ul { color: #C4000A; display: block; margin-left: 20px; line-height: 1.3em; }
.form-errors ul li { margin-bottom: 10px; font-size: 14px; line-height: 1.3em; }
.form-errors ul li:last-child { margin-bottom: 0 }

.form-cell { display: flex; align-items: center; margin-bottom: 30px; padding-right: 80px;  }

.form-cell > label { text-transform: uppercase; color: #642b90; font-size: 22px; font-family: 'Gotham-Black', 'Arial Narrow', sans-serif; text-align: right; padding-right: 30px; flex-shrink: 0; flex-basis: 340px; }
.form-cell > div { flex-basis: 100%; }

.form-cell textarea,
.form-cell input[type="text"],
.form-cell div.input-border { border-radius: 5px; border: 1px solid #505050; color: #000000; font-size: 18px; width: 100%; -webkit-appearance: none; }

.form-cell textarea,
.form-cell input[type="text"] { padding: 10px 15px; }

.form-cell input.no-border { border: 0; width: 100%; }
.form-cell .input-border { border-radius: 5px; border: 1px solid #505050; display: flex; flex-direction: row; align-items: center; width: 630px;}

.form-cell textarea { height: 230px; max-width: 100%; }
.form-cell.deep					{align-items: flex-start;}

.form-cell input[type="text"].error,
.form-cell textarea.error,
.form-cell.error input[type="text"],
.form-cell.error textarea,
.form-cell.error .input-border { border-color: #cc0000; }

.form-cell.form-cell-checkbox.error .checkmark { border-color: #cc0000; }
.form-cell.form-cell-checkbox.error label.container { color: #cc0000; }

.form-cell.error input[type="text"],
.form-cell.error textarea { border-color: #cc0000; }


.form-cell.form-cell-submit		{margin: auto; display: block; text-align: center; margin-top: 40px;}

.form-cell span.gb-prefix { font-size: 18px; padding-left: 15px; padding-right: 0px; color: #000000; }
/*.form-cell input.unique-code { padding-left: 3px; }*/

.form-cell.error { margin-bottom: 12px; }
.form-cell.error label[for] { margin-bottom: 17px; }

.form-cell.error .form-field-error,
.form-captcha.error .form-field-error,
.form-cell-radio-group.error .form-field-error { font-size: 14px; color: #cc0000; margin-top: 5px; }

.form-cell-radio-group.error label.radio-container { color: #cc0000; }

.form-captcha { text-align: center; }

/* CHECKBOX */
.form-cell-checkbox { /*width: 640px;*/ margin-left: 340px; /*max-width: calc(100% - 270px);*/ }
.form-cell-checkbox .container				{/*width:100%;*/ flex-basis: 100%; display: block; position: relative; padding-left: 40px; cursor: pointer; font-size: 18px; padding-top: 0px;
											-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-family: 'Open Sans', sans-serif; text-transform: none; color:#000000; text-align: left; line-height: 1.3em;}
.container input 							{position: absolute; opacity: 0; cursor: pointer;}
.checkmark 									{position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #ffffff; border-radius: 4px; border:1px solid #000000}
.container:hover input ~ .checkmark 		{background-color: #ffffff;}
.container input:checked ~ .checkmark 		{background-color: #ffffff;}
.checkmark:after 							{content: ""; position: absolute; display: none;}
.container input:checked ~ .checkmark:after {display: block;}
.container .checkmark:after 				{left: 8px; top: 4px; width: 5px; height: 10px; border: solid #000000; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.form-cell-checkbox .container.radio-container					{font-size: 24px;}
.form-cell-checkbox .container.radio-container .checkmark { width: 24px; height: 24px; border-radius: 24px; border: 1px solid #642b90; top: 3px; }
.form-cell-checkbox .container.radio-container .checkmark:after { width: 16px; height: 16px; border-radius: 16px; border: none; left: 3px; top: 3px; background-color:#642b90; }

/* RESTAURANTS */
.success {display: block; padding: 20px 0px; max-width: 659px; margin: auto;}
.success h1 {text-align: center; font-size: 80px; color: #135994; font-family: 'Mello-Cm', 'Arial Narrow', sans-serif; }
.success p {text-align: center; font-size: 20px; color: #C4000A; text-transform: uppercase; margin-top: 10px; line-height: 1.2em;  }



/* MAP - FIND A RESTAURANT */
#map { width: 100%; padding-top: 55%; }

.restaurant-list 								{ background-color: #ffffff; margin-top: 16px; margin-left: 16px; width: 100%; max-width: 540px; border-radius: 12px; overflow-y: auto; overflow-x: hidden; max-height: 55vh;}
#map .restaurant-list .restaurant-panel 		{ padding:15px 30px; transition: all 0.2s; cursor: pointer; border: 3px double transparent !important; }
#map .restaurant-list .restaurant-panel:hover	{background-color:#F4F4F4}

/*.restaurant-list .restaurant-panel .top { display: flex; flex-direction: row; align-items: start; justify-content: space-between }*/

.restaurant-list .restaurant-panel .top .restaurant-details { flex-basis: 100%; }
.restaurant-list .restaurant-panel .top .restaurant-details .name { font-size: 30px; color: #642b90; font-family: 'Mello-Cm', 'Arial Narrow', sans-serif; text-transform: uppercase; text-decoration: underline; margin-bottom: 0.5em; background-color: transparent; }
.restaurant-list .restaurant-panel .top .restaurant-details p.address 	{ font-size: 18px; color: #818181; margin-bottom: 0.5em; line-height: 1.3em; font-weight: 600 }
.restaurant-list .restaurant-panel .top .restaurant-details p.address span.cuisine-type { text-transform: capitalize; }
.restaurant-list .restaurant-panel .top .icon-container { display: none; width: 30%; font-size: 0; padding-left: 00px; padding-right: 2px; text-align: right; } /* I don't think there are icons in this */

.restaurant-list .restaurant-panel .middle { width: 100%; }
.restaurant-list .restaurant-panel .middle .distance { font-size: 14px; font-weight: 700; color: #3D403D; margin-bottom: 4px; }

.restaurant-list .restaurant-panel .bottom { display: flex; flex-direction: row; align-items: center; width: 100%; justify-content: space-between; margin-top: 15px;}
.restaurant-list .restaurant-panel .bottom .instructions-container { width: 100%; }
.restaurant-list .restaurant-panel .bottom .instructions-container .instructions { font-size: 18px; margin: 0; font-weight: 600; text-transform: uppercase; color: #642b90;}
.restaurant-list .restaurant-panel .bottom .button-container { }
.restaurant-list .restaurant-panel .bottom  p	{margin:0}

.restaurant-list .restaurant-panel-divider { margin: 6px 0; width: 100%; height: 1px; background-color: #F0ECF3;}
.restaurant-list .restaurant-panel-divider:last-child { display: none; }

.restaurant-info-popup { display: flex; flex-direction: row; align-items: center; }
.restaurant-info-popup span { }
.restaurant-info-popup .name { color: #674186; padding-right: 10px; font-size: 14px; font-weight: 500; }
.restaurant-info-popup .distance { color: #646664; font-size: 12px; }

.restaurant-list.no-restaurants,
.restaurant-list.insufficient-balance { background-color: #bb1229; padding: 12px; }

.restaurant-list.no-restaurants p,
.restaurant-list.insufficient-balance p { font-size: 14px; margin-bottom: 0.5em; line-height: 1.3em; color: #ffffff; }

.restaurant-list.no-restaurants p:last-of-type,
.restaurant-list.insufficient-balance p:last-of-type { margin-bottom: 0; }

.restaurant-list-form { }

.button-container .btn			{width:158px; min-width: 100%; padding: 10px; border-color:#642b90; color:#642b90}
.button-container .btn:hover	{border-color:#441469; }

.button-container-center {text-align: center;}
.button-container-center .btn {min-width: 158px; }    
        



.restaurant-list.no-restaurants { background-color: #bb1229; padding: 12px; }
.restaurant-list.no-restaurants p { font-size: 14px; margin-bottom: 0.5em; line-height: 1.3em; color: #ffffff; }
.restaurant-list.no-restaurants p:last-of-type { margin-bottom: 0; }
#map div { border: none !important; }

#map .restaurant-list .restaurant-panel			{border:3px solid transparent}
#map .restaurant-list .restaurant-panel.active	{border:3px solid #642b90 !important; border-radius: 10px; margin: 5px;}



/* FOOTER */
footer					{background-color:#441469; padding: 25px 0; box-shadow: 0 -5px 5px rgba(0,0,0,0.2); position: relative}
footer .inner			{display: flex; justify-content: space-between;}
footer ul				{font-size: 17px; display: flex; list-style: none; margin: 0;}
footer ul li			{margin-right: 60px;}
footer ul li a			{color:#ffffff; text-decoration: none}
footer ul li a:hover	{text-decoration: underline}

.footer-right			{display: inline-flex; justify-content: flex-end; align-items: flex-end; flex-direction: column}
.footer-right ul li		{margin-right: 0; margin-left: 30px;}
.footer-right ul li img	{height: 18px;}
.footer-right .btn { display: block; color: #642b90; background-color: #ffffff; border-color: #ffffff; width: auto; min-width: unset }
.footer-right .btn:hover	{background-color: transparent}

.btn { border: 2px solid #642b90; color: #642b90; border-radius: 5px; padding: 15px; min-width: 340px; font-family: 'Gotham-Bold', 'Arial Narrow', sans-serif; font-size: 14px; text-decoration: none; text-transform: uppercase; background-color: #ffffff; transition: 0.2s ease-out; }
.btn:hover	{background-color:#642b90; color: #ffd01e;}

.btn.btn-gold	{color:#ffffff; background-color: #F9B32A; border-color:#F9B32A;}

.btn[disabled] { border-color: #cccccc !important; background-color: #f0f0f0 !important; color: #999999 !important; cursor: wait; }

/* COOKIE BAR */
/*
.cookieBar              {width: 100%; background: url('/_assets/bg_cookiebar.png'); position: fixed; bottom: 0px; left: 0px; text-align: center; padding: 10px 10px; z-index: 99999999; box-sizing:border-box; -moz-box-sizing:border-box; }
.cookieBar p			{color:#ffffff; font-size:14px; font-family:inherit; line-height:1.5em; text-align:center; display:inline-block;}
.cookieBar .acceptBtn   {border:0px; background:#000; border:1px solid #DEDEDE; font-weight:bold; display:inline-block; margin-top:6px; margin-left:5px; font-family:inherit; font-size:12px; padding:5px 10px; text-decoration:none; color:#FFF; text-transform:uppercase; }
*/


/* CAPTCHA */

.g-recaptcha div {margin: auto;}



.lds-ring { display: inline-block; position: fixed; top: 50%; left: 50%; margin-left: -32px; margin-top: -32px; width: 64px; height: 64px; z-index: 1000000;  }
.lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 51px; height: 51px; margin: 6px; border: 6px solid #975385; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #975385 transparent transparent transparent; }
.lds-ring div:nth-child(1) { animation-delay: -0.45s; }
.lds-ring div:nth-child(2) { animation-delay: -0.3s; }
.lds-ring div:nth-child(3) { animation-delay: -0.15s; }

@keyframes lds-ring {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}




.popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 10000; padding: 0 20px; }

.popup .popup-form { border: 2px solid #441469; background-color: #ffffff; margin: 25vh auto 0 auto; width: 100%; max-width: 600px; border-radius: 10px; overflow: hidden; }
.popup .popup-form h3.title { background-color: #ffd01e; color: #642b90; padding: 15px 20px; font-size: 24px; font-family: Gotham-Bold, Arial, Helvetica, sans-serif; border-bottom: 1px solid #441469; margin-bottom: 10px; }

.popup .popup-form .content { background-color: #ffffff; padding: 10px 20px 20px 20px; }

.popup .popup-form .content p { font-size: 16px; color: #000000; line-height: 1.4em;}
.popup .popup-form .content p:last-child { margin-bottom: 0; }

.popup  .popup-form .buttons { margin-top: 10px; border-top: 1px solid #441469; padding: 10px; display: flex; flex-direction: row; justify-content: center; }

.popup .popup-form a,
.popup .popup-form input { flex-basis: 20%; margin-right: 10px; min-width: auto; text-align: center; }

.popup .popup-form a:last-child,
.popup .popup-form input:last-child { margin-right: 0; }
