@charset "utf-8";
/* CSS Document */

/* Font Styles */
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(../fonts/lato_latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(../fonts/lato_latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* General Styling */
body,
a,
td,
th,
p,
select,
button {
	font-family: 'Lato', Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.2em;
}
body {
	margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
}
ul,
li {
	font-family: 'Lato', Arial, Helvetica, sans-serif;
}
a {
	text-decoration: none;
}

a:focus{
  text-decoration: underline;
  border: 2px solid #3397db;
}

a:hover {
  font-weight: bold;
  color: #996515;
  text-decoration: underline;
}

a img {
	border: none 0px #fff;
}

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

.lazy:not([src]):not([srcset]) {
  /* visibility: hidden; */
}

input,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

input {
  overflow: visible;
}

input[type="text"], textarea {
  width: 100%;
  padding: 0.3em 0 0.3em 0.2em;
  font-size: 1em;
  line-height: 1.5em;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25em;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

}

input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

textarea {
  overflow: auto;
  resize: vertical;
}
fieldset {
  min-width: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
}

/* Screen Reader Styling */
.sr-only {
  position: absolute;
  left: 0;
  top: -5000px;
}

/*============================= Navigation =================================*/
header {
  border-bottom: 2px solid #d3d3d3;
}
nav{
  width: 100%;
  min-height: 50px;
  text-align: center;
}

nav h1 a {
  font-size: 1.3em;
  color: #947119;
  text-transform: uppercase;
}

.breadcrumb {
  padding: 10px 40px 16px;
  list-style: none;
  background-color: #eee;
  font-size: 17px;
  margin: 0;
  width: inherit;
}

/* Display list items side by side */
.breadcrumb li {
  display: inline;
}

.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}

/* Add a color to all links inside the list */
.breadcrumb li a {
color: #946114;
font-weight: 600;
text-decoration: none;
}

/* Add a color on mouse-over */
.breadcrumb li a:hover {
color: #daa520;
text-decoration: underline;
}

.skip-link {
position: absolute;
top: -100px;
color: #fff;
background: #946114;
left: 0;
padding: 0.3em;
z-index: 1000;
}

.skip-link:hover,
.skip-link:focus {
font-weight: 600;
border: 2px solid #daa520;
-webkit-box-shadow: 3px 3px 6px 0px rgba(128,128,128,0.75);
-moz-box-shadow: 3px 3px 6px 0px rgba(128,128,128,0.75);
box-shadow: 3px 3px 6px 0px rgba(128,128,128,0.75);
}

.skip-link:hover {
text-decoration: underline;
color: #fff;
}

.skip-link:focus {
top: 0;
}


/*============================ Footer Styling  ============================= */
.footer {
  background-color: #555;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 25px 0;
  text-align: center;
  text-transform: uppercase;
}

.footer a {
  color: #ebcf89;
  font-size: inherit;
}

.footer a:hover {
  color: #daa520;
  text-decoration: underline;
  font-weight: 900;
}


/* ============================= Map ======================================= */

.map {
  height: 400px;
  width: 100%;
  background-color: #ccc;
}


/* ============================ Map. TODO: Change map attribution background============ */
.leaflet-container .leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.8)!important;
}


/* =========================== Restaurant Filtering ========================== */
.filter-options {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  padding: 0.5em 2em;
}

.filter-options h2,
.filter-options .form-element {
  width: 100%;
}

.filter-options select {
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  display: block;
  margin: 10px 0;
  padding: 0 10px;
  background-color: white;
  border: 2px solid #DCDCDC;
  border-radius: 0.3em;
  height: 40px;
  letter-spacing: 0;
}


/* ========================= Restaurant Listing ============================== */
.restaurants-list-section {
  padding: 0.5em 2em;
  background: #d3d3d3;
}

.toggle-map {
  padding: 0.5em 1em;
  margin-top: 1em;
  background: none;
  border: 2px solid #333;
  color: #333;
  font-weight: 600;
}

.toggle-map:hover,
.toggle-map:focus {
  border: 2px solid #ccc;
  box-shadow: 0 0 8px 3px rgba(94, 96, 99, 0.8);
  border-radius: 0.2em;
}

.restaurants-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-top: 1.5em;
}

.restaurants-list li{
  min-height: 450px;
  box-sizing: border-box;
  background: #fff;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
  border-radius: 0 0 0.3em 0.3em;
  margin-bottom: 1.5em;
  color: #444;
  padding-bottom: 1.5em;
  -webkit-box-shadow: 3px 3px 6px 0px rgba(128,128,128,1);
  -moz-box-shadow: 3px 3px 6px 0px rgba(128,128,128,1);
  box-shadow: 3px 3px 6px 0px rgba(128,128,128,1);
}

.pic-container {
  position: relative;
}

.favorite-button {
  float: right;
  position: absolute;
  left: 320px;
  top: 20px;
  z-index: 1000;
  padding: 0.3em 0.4em;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 50%;
  color: #b8b7b6;
  text-align: center;
  text-decoration: none;
  font-size: 1.2em;
}

.is-favorite {
  font-size: 1.3em;
  color: #e1375b;
  transition: color 50ms linear;
}

.restaurants-list .restaurant-img {
  width: 100%;
  display: block;
  min-height: 300px;
}

.restaurants-list li h2 {
  font-size: 1.6em;
  margin-left: 1em;
  margin-right: 1em;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.3;
}

.restaurants-list li p {
  margin-left: 2em;
  margin-right: 1em;
  text-transform: uppercase;
  font-size: 0.8em;
  font-weight: 600;
}

.restaurants-list li a {
  margin-left: 1.5em;
  margin-right: 1em;
  color: #947119;
  font-weight: bold;
  text-decoration: underline;
}

.restaurants-list li a:hover {
  color: #daa520;
  text-decoration: underline;
  font-size: 1.1em;
}


/* ====================== Restaurant Details Page ====================== */
.inside {
  background-color: #fdfdfd;
}

.inside header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  border-bottom: 2px solid #d3d3d3;
}

.status{ 
  background: #edf0f1; 
  color: #946114; 
  font-size: 1.1em;
  text-align: center;
  font-weight: 700;
}

.inside .map-container {
  width: 100%;
  height: 400px;
  position: relative;
  z-index: 1;
  top: 130px;
}

.inside .maincontent {
  display: flex;
  flex-wrap: wrap;
}

.restaurant-container,
.reviews-container {
    width: 90%;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3em;
    border-top: none;
}

.restaurant-container {
  margin-top: 150px;
}

.restaurant-name {
  color: #996515;
  font-family: Arial,sans-serif;
  font-size: 2em;
  font-weight: 500;
  letter-spacing: 0;
  margin: 15px 0 30px;
  text-transform: uppercase;
  line-height: 1.1;
}

.restaurant-img,
.restaurant-cuisine {
    width: 100%;
}

.inside .restaurant-img {
  border-top-left-radius: 2em;
}

.restaurant-cuisine {
  margin-top: 0;
  background: #333;
  border-bottom-right-radius: 2em;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 10px;
  margin: 0 0 20px;
  padding: 2px 0;
  text-align: center;
  text-transform: uppercase;
}

.restaurant-address {
  text-align: center;
  color: #333;
  font-size: 1.1rem;
}

.restaurant-hours{
  width: 100%;
  border-collapse: collapse;
}

.restaurant-hours td {
  padding: 0.5em 2em;
}

.restaurant-hours tr:nth-child(even) td {
  background-color:#ccc;
}

.reviews-container h3 {
  color: #946114;
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -1px;
  padding-bottom: 1pt;
}

.reviews-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.reviews-list li {
  border-top-left-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
  border: 2px solid #f3f3f3;
  display: block;
  list-style-type: none;
  margin: 0 0 30px;
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 0;
}

.review-item-header {
  background-color: #333;
  padding: 0.7em 1.5em;
  color: #f3f3f3;
  font-size: 1.5em;
  margin-bottom: 0;
  margin-top: 0;
}

.review-item-header span {
  font-size: 0.7em;
  color: #bbb;
  float: right;
  padding: 0.1em 0;
  line-height: 1.2em;
}

.review-item-body{
  padding: 1em 1.5em;
  background: #fff;
}

.review-item-body p:last-of-type {
  line-height: 1.4em;
  font-size: 18px;
}

.review-item-rating {
  background: #996515;
  color: #fff;
  border-radius: 0.3em;
  width: 8.5em;
  text-transform: uppercase;
  padding: 0.5em;
  text-align: center;
}
.reviews-section-header {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 0 1em;
}

.reviews-section-header .title {
  flex: 0 0 80%;
  width: 80%;
}

.reviews-section-header .new-review-btn-div{
  flex: 0 0 20%;
  width: 20%
}

.new-review-btn, .add-review {
  padding: 0.5em;
  margin: 1.5em 1em;
  color: #ffffff;
  background: #946114;
  border: 1px solid #947119;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #947119;
  font-weight: 600;
}

.new-review-btn:hover, .add-review:hover {
  background: #ffffff;
  color: #946114;
  border: 1px solid #947119;
}

.new-review-form {
  margin-top: 0.5em;
  margin-bottom: 1.5em;
  border: 1px solid #ced4da;
  border-radius: 0.2em;
  padding: 1em;
  box-shadow: 2px 2px 5px #DCDCDC;
}

.review-form-heading {
  text-align: center;
  font-size: 1.2em;
}

.form-elements {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.5em;
}

.label-col {
  flex: 0 0 16.6666667% !important;
  max-width: 16% !important;
  margin-bottom: 0;
  font-size: inherit;
  font-weight: 600;
  line-height: 1.5;
}

.input-col {
  flex: 0 0 83.333333%;
  max-width: 84%;
}

.legend-col {
  font-weight: 600;
  margin-bottom: 0.3em;
}

.radio-group-col {
  margin-top: 0.5em;
  margin-left: 0.3em;
}

.radio-group-col input {
  margin-right: 0.3em;
}

.radio-group-col label {
  margin-right: 1em
}

.form-elements:nth-of-type(5) {
  justify-content: flex-end;
}

.inside .footer {
  width: 100%;
}