:root {
  --colour-main: #d26851;
  --colour-palebg: #ddf2dc;
}

body {  
  margin: 0 auto;
  font-family: "proxima-nova", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px
}

.more::after {
  content: "\00a0»";
}

a:link, a:visited {
  color: var(--colour-main);
  transition: color 1s;
}
a:hover, a:active {
  color: #000;
}

img.resize,
span.resize img {
  width: 100%;
  height: auto;
}

h1, h2 {
  font-family: "ogg", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--colour-main);
}

h3, h4 {
  font-family: "lft-etica", sans-serif;
  font-weight: 600;
  font-style: normal;
}

h1 {
  font-size: 2.55em;
}
h2 {
  font-size: 2em;
}

a:hover,
a:focus {
  text-decoration: underline !important;
}

div.container {
  margin: 2em auto;
  padding: 1em 2em;
  max-width: 1200px;
  width: calc(100% - 4em);
  background: rgba(255,255,255,0.8);
}

div#breadcrumbs_container p {
  margin: 1em auto -1em;
  max-width: 1236px;
  font-size: 0.85em;
  color: rgba(0,0,0,0.7);
}
div#breadcrumbs_container p a:link,
div#breadcrumbs_container p a:visited {
  color: rgba(0,0,0,0.7);
}

.form-page {
  position: relative; 
  margin: 2em auto; 
  background-color: white; 
  padding: 1em 2em; 
  width: 600px;
}

@media only screen and (max-width: 672px) { 

  .form-page {
    width: calc(94% - 4em);
  }

}
fieldset {
  margin: 1em 0;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #eee;
  background-image: linear-gradient(to bottom, white, white 80%, #eee);
}

form fieldset > fieldset {
  clear: left;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 1em;
}

legend {
  padding: 2px 8px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 -1px 1px rgba(0,0,0,0.4);
  font-size: 0.9em;
  color: #333;
}
fieldset > label {
  float: left;
  clear: left;
  padding-top: 2px;
  width: 120px;
  text-align: right;
  font-size: 0.9em;
  color: #333;
}
fieldset > label::after {
  content: ":";
}
fieldset > label strong {
  color: #c00;
}
fieldset > span {
  display: block;
  margin: 0 0 0 120px;
  padding: 0 0 4px 4px;
}
fieldset > span label {
  cursor: pointer;
}
fieldset > span.validation-errors {
  font-style: italic;
  font-size: 0.9em;
  color: #f33;
}
fieldset input,
fieldset textarea,
fieldset select {
  padding: 2px 4px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background-color: #fff;
  line-height: 1.1;
  font-family: inherit;
  font-size: 1.1em;
}
fieldset input:focus,
fieldset textarea:focus,
fieldset select:focus {
  border: 1px solid #aaa;
  box-shadow: 0 0 3px rgba(0,0,0,.2);
  color: #333;
}

fieldset input[type=image],
fieldset input[type=file] {
  border: none;
}
fieldset input[type=submit],
fieldset input[type=reset],
fieldset input[type=button] {
  padding: 2px 6px;
  border: #b5bbc4 1px solid;
  background-color: #f7fafc;
  background-image: linear-gradient(to bottom, #fff, #dae6f1);
  font-size: 100%;
  color: #333;
}
fieldset input[type=submit]:hover,
fieldset input[type=reset]:hover,
fieldset input[type=button]:hover {
  color: #e36627;
}
fieldset input[type=submit]:active {
  border-color: #666;
}

fieldset input:disabled,
fieldset input:disabled:hover,
fieldset input:disabled:focus {
  color: #999 !important;
}

input.cssform-undo:disabled {
  display: none;
}

button.check-speling {
  padding: 2px 6px;
  background: rgba(255,255,255,0.8);
  border: none;
  line-height: 1.4;
  font-weight: normal;
  color: #666;
  cursor: pointer;
}

a.delete:link {
  white-space: nowrap;
  color: #c00 !important;
}
a.delete:visited {
  color: #c00 !important;
}
a.delete:hover,
a.delete:focus {
  color: #000 !important;
  background-color: yellow !important;
}

.warning {
  margin: 0.5em 0;
  border: 1px solid #f00;
  background-color: #ff0;
  font-size: 0.8em;
  color: #333;
}
p.warning,
.warning p,
span.warning {
  padding: 0.5em;
}
.warning b {
  text-transform: uppercase;
  color: #f00;
}

input:required:invalid,
input:focus:invalid,
textarea:required:invalid,
textarea:focus:invalid {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAT1JREFUeNpi/P//PwMpgImBRMACY/x7/uDX39sXt/67cMoDyOVgMjBjYFbV/8kkqcCBrIER5KS/967s+rmkXxzI5wJiRSBm/v8P7NTfHHFFl5mVdIzhGv4+u///x+xmuAlcdXPB9KeqeLgYd3bDU2ZpRRmwH4DOeAI07QXIRKipYPD35184/nn17CO4p/+cOfjl76+/X4GYAYThGn7/g+Mfh/ZZwjUA/aABpJVhpv6+dQUjZP78Z0YEK7OezS2gwltg64GmfTu6i+HL+mUMP34wgvGvL78ZOEysf8M1sGgZvQIqfA1SDAL8iUUMPIFRQLf+AmMQ4DQ0vYYSrL9vXDz2sq9LFsiX4dLRA0t8OX0SHKzi5bXf2HUMBVA0gN356N7p7xdOS3w5fAgcfNxWtn+BJi9gVVBOQfYPQIABABvRq3BwGT3OAAAAAElFTkSuQmCC');
  background-position: right top;
  background-repeat: no-repeat;
  box-shadow: none;
}
input:required:valid,
textarea:required:valid {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZZJREFUeNpi/P//PwMpgImBRMAy58QshrNPTzP8+vOLIUInisFQyYjhz98/DB9/fmT48/+35v7H+8KNhE2+WclZd+G0gZmJmYGThUNz1fUVMZtvbWT59eUXG9wGZIWMUPj993eJ5VeWxuy8veM/CzPL3yfvH/9H0QBSBDYZyOVm4mGYfn6q4cory5lYmFh+MrEwM/76/YsR7mk2ZjbWP///WP37/y8cqIDhx58fjvtu7XV6//ndT34G/v8FasUsDjKO/+A2PP3wpGLd+TVsfOz8XH6KAT+nHpokcu7h6d9q/BoMxToVbBYqlt9///+1GO4/WVdpXqY/zMqXn13/+vTjI9mj94/y//v9/3e9ZRObvYbDT0Y2xnm///x+wsfHB3GSGLf41jb3rv0O8nbcR66d+HPvxf2/+YZFTHaqjl8YWBnm/vv37yly5LL8+vuLgYuVa3uf/4T/Kd8SnSTZpb6FGUXwcvJxbAPKP2VkZESNOBDx8+9PBm4OwR1TwmYwcfzjsBUQFLjOxs52A2YyKysrXANAgAEA7buhysQuIREAAAAASUVORK5CYII=');
  background-position: right top;
  background-repeat: no-repeat;
}

input::-webkit-input-placeholder {
  color: #ababab;
}
input:-moz-placeholder {
  color: #ababab;
}

input[type="number"] {
  max-width: 4em;
}

#preview_desktop img {
  max-width: 100%;
  height: auto;
}

.cropper {
  display: inline-block;
  margin: 0 1em;
  padding-left: 18px;
  height: 16px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABRElEQVQ4jZXSsUsVUBzF8Y/yhgKRSOdwFpUgpxZX/4BElxwKcWhJqNbOIiEOBuIQiuioaUsSBRFCBIKjq0KERdoUhIRIOLyr2LNnvgN3+d37Pfzu+f1oQEmGk8yerVUagB/iGbrP1psvCT/BFJ4n2W7IIMkjTGAX47X3lSQV3EEHvmAlyWGB72GyvB1L8itJCzrRg/ZmLOI+ruIulgrcgZkCv8W1JDv4iU/ow6umJHvoTrKfpBU/0IZZDOEzRrGKA8xjJsku1Sms4XWSDfTiO27jJa7jKQZKd29OvneaAUbQjy58xQe8wBXcSvIbG/VCbqotJBkuuRzgQZKFevA5gySwhWmsYxNtSY7qGdRu4g20Yw6t+FNOXdUaHJXaTdXkl5NcaPDXJib5hvf4qDqBxxfB/+rgRINJ1v4Hn+ug6J1qDpfSMVLdY4b2kZcrAAAAAElFTkSuQmCC);
  background-position: left center;
  background-repeat: no-repeat;
}
.cropper:link {
  text-decoration: none !important;
  font-size: 0.75em;
  color: rgba(0,0,0,0) !important;
}
.cropper:visited {
  color: rgba(0,0,0,0) !important;
}
.cropper:hover,
.cropper:focus {
  color: rgba(0,0,0,0.5) !important;
}

#captcha {
  border: 1px outset #666;
}

/* file input drop box */

.attach-file {
  position: relative;
  display: block;
}
.attach-file input[type=file] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}
.attach-file input[type=file] + div {
  margin: 0 0 0.2em 0;
  padding: 1em;
  background-color: rgba(255,255,255,0.5);
  border: 2px dashed rgba(0,0,0,0.2);
  text-align: center;
  font-size: 2em;
  color: rgba(0,0,0,0.3);
  transition: 0.2s;
}
.attach-file input[type=file]:invalid + div {
  border-color: rgba(255,0,0,0.4);
}
.attach-file:hover input[type=file] + div,
.attach-file input[type=file]:focus + div {
  border-color: rgba(0,0,0,0.4);
  color: rgba(0,0,0,0.4);
}
.attach-file input[type=file]:focus + div {
  box-shadow: 0 0 4px Highlight inset;
}
.attach-file input[type=file]:active + div {
  background: #ccc;
}
.attach-file input[type=file].file-attached + div {
  padding: 2em;
  background-color: rgba(0,255,0,0.2);
  border-color: rgba(0,128,0,0.5);
  font-size: 1em;
  color: rgba(0,128,0,0.75);
}
.attach-file input[type=file] + div strong {
  color: #666;
}

@media only screen and (max-width: 767px) {

  fieldset > label {
    display: block;
    float: none;
    width: auto;
    text-align: left;
  }
  fieldset > span {
    display: block;
    margin: 0 0 4px 0 !important;
    padding: 0;
  }
  #captcha {
    width: 320px;
    height: 90px;
  }

}
.flex {
  display: flex;
  flex-flow: row nowrap;
}
.flex-2 {
  display: flex;
  flex-flow: row nowrap;
  column-gap: 2em;
}
.flex-2 > * {
  flex: 1;
}

@media only screen and (max-width: 719px) { 

  .flex,
  .flex-2 {
    flex-flow: column nowrap;
    row-gap: 1em;
  }
  .flex-2.reverse {
    flex-flow: column-reverse nowrap;
  }

}
footer {
  padding: 1em 0;
  background-color: var(--colour-main);
}
footer > div {
  margin: 1em auto;
  max-width: 960px;
  width: 100%;
  color: white;
}
footer > div a:link,
footer > div a:visited {
  text-decoration: none;
  color: white;
}
footer > div > div {
  flex: 1;
}

footer > div > div:first-of-type img {
  width: 50%;
  height: auto;
  padding-top: 1em;
}

footer ul {
  margin: 1em 0;
  padding: 0;
  list-style-type: none;
}
footer ul.nav a:link,
footer ul.nav a:visited {
  display: block;
  padding: 0.25em 0;
}

footer ul.socials {
  display: flex;
  flex-flow: row nowrap;
  column-gap: 1em;
}

footer aside {
  font-size: 0.75em;
}

#ll-footer {
  display: block;
  margin: 0;
  height: 32px;
  padding: 7px 0 0;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  background: #566;
}
#ll-footer img {
  opacity: 0.8;
}

@media only screen and (max-width: 719px) {

  footer > div {
    align-items: center;
  }
  footer ul.nav {
    text-align: center;
  }
  footer ul.socials {
    justify-content: center;
  }

}
fieldset {
  margin: 1.5em 0px;
  padding: 15px 10px;
  background-color: white;
  background-image: none;
  border-radius: 5px;
}

legend {
  box-shadow: none;
  font-size: 0.7em;
  text-transform: uppercase;
}

fieldset > label {
  padding-top: 4px; 
}

fieldset > span.cssform-field {
  padding-bottom: 14px;
}

a.edit:link,
a.edit:visited {
  white-space: nowrap;
  text-decoration: none;
  color: magenta;
}

fieldset input[type="submit"],
fieldset input[type="reset"],
fieldset input[type="button"] {
  margin: 1em 0;
  padding: 9px 16px;
  border-radius: 5px;
}

fieldset tt {
  font-size: 0.7em;
}

@media only screen and (max-width: 672px) { 

  fieldset input,
  fieldset textarea,
  fieldset select {
    width: calc(100% - 8px);
  }

}
.flex-grid,
.flex-grid-thirds,
.flex-grid-quarters { 
  margin: 0 auto;
  clear: both;
}
.col {
  margin: 20px;
}

.col.padded {
  padding: 15px;
  border: 1px solid #aaa;
}

/* clearfix */
.flex-grid::before,
.flex-grid::after,
.flex-grid-thirds::before,
.flex-grid-thirds::after,
.flex-grid-quarters::before,
.flex-grid-quarters::after {
  content: "";
}
.flex-grid::after,
.flex-grid-thirds::after,
.flex-grid-quarters::after {
  clear: both;
}

.flex-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.flex-grid .col {
  flex: 1;
}
.col.w45 {
  flex: 1 0 45%;
}
.flex-grid-thirds {
  display: flex;
  justify-content: space-between;
}
.flex-grid-thirds.col33 {
  width: 33%;
}
.flex-grid-thirds .col {
  width: 32%;
}
.flex-grid-thirds .col.twothirds {
  width: 66%;
}
.flex-grid-quarters {
  display: flex;
}
.flex-grid-quarters .col {
  width: 25%;
}
.flex-grid-half {
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
}
.flex-grid-half .col {
  box-sizing: border-box;
  width: 49.5%;
  margin: 0 0.25% 0.25% 0;
}
.flex-grid-half.stats {
  width: 66%;
}

@media (max-width: 959px) {

  .flex-grid-thirds .col,
  .flex-grid-half .col,
  .flex-grid-half.stats,
  .flex-grid-half .col.stats {
    width: 100%;
  }

}

@media (max-width: 767px) {

  .flex-grid,
  .flex-grid-thirds,
  .flex-grid-half {
    display: block;
  }
  .flex-grid .col,
  .flex-grid-thirds .col,
  .flex-grid-thirds .col.twothirds,
  .flex-grid-half .col,
  .flex-grid-half.stats,
  .flex-grid-thirds.col33 {
    display: block;
    width: 100%;
    margin: 0 0 10px 0;
  }
  .flex-grid-quarters {
    flex-flow: wrap;
  }
  .flex-grid-quarters .col {
    width: 50%;
  }

}
header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center; 
  padding: 0 2em;
  max-width: calc(100% - 4em);
  background-color: white;
}

header > div:first-of-type img {
  transform: scale(65%);
}

header nav ul {
  display: flex;
  flex-flow: row nowrap;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
header nav ul > li {
  display: block;
}
header nav ul > li a:link,
header nav ul > li a:visited {
  padding: 0.5em 1em;
  text-decoration: none;
  color: #333;
}
.home h1 {
  text-align: center;
  margin-bottom: 0;
}

#home_intro {
  max-width: 600px;
  margin: 0 auto 1em;
  text-align: center;
}

#home_itineraries {
  background-color: #fff2f0;
}

#home_map {
  margin: 4em auto;
}
#home_map h2 {
  text-align: center;
}

.home .itineraries > li > a {
  display: flex;
  height: 100%;
  flex-flow: column nowrap;
  justify-content: space-between;
}
.home .itineraries h3 {
  display: block;
}
.home .itineraries .photo {
  height: 160px;
  flex: 0 0 160px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 0 0 5px 5px;
}
.admin-list li > a:first-of-type {
  font-weight: bold;
}
.admin-list small {
  color: #666;
}
.admin-list span {
  text-transform: uppercase;
  font-size: 0.75em;
}

.col-2 {
  columns: 2;
  column-gap: 2em;
}
.col-2 h3 {
  margin-top: 0;
  break-after: avoid-column;
}
.col-2 ul {
  break-inside: avoid-column;
}
#menu_trigger {
  display: none;
  padding-right: 0.2em;
  font-size: 2.5em;
  cursor: pointer;
}

@media only screen and (max-width: 1199px) { 

  #menu_trigger {
    display: block;
  }

  header nav {
    position: relative;
  }
  header nav > ul {
    position: absolute;
    right: 0;
    top: -1.5em;
    flex-flow: column nowrap;
    background: white;
    white-space: nowrap;
  }
  header nav > ul > li {
    text-align: right;
  }
  header nav > ul > li > a {
    display: block;
    padding: 0.25em 0;
  }
  header nav > ul:not(.active) > li:nth-child(n+1) {
    display: none;
  }

}
.notice {
  margin: 1em 0 !important;
  padding: 0.75em 0.75em 0.65em;
  background-color: #fff9e6;
  border: 1px solid #ffc605;
  font-size: 1em;
  border-radius: 3px;
}
.notice b {
  color: #ff3b05;
}
.notice.success {
  border-color: #20d020;
  background-color: #ecfceb;
}
.notice.success b {
  color: #20d020;
}
.notice.warning {
  border-color: #ff3333;
  background-color: #ffefef;
}

#grace_notice {
  position: relative;
  font-size: 0.9em;
}
#grace_notice > .close {
  cursor: pointer
}
#grace_notice > .close::after {
  position: absolute;
  top: 0.25em;
  right: 0.5em;
  content: "\2715";
  color: #ffc605;
  transition: 0.25s;
}
#grace_notice > .close:hover::after {
  color: #333;
}
.button-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  column-gap: 1em;
  row-gap: 0.5em;
  margin: 1em 0;
  padding: 0;
  list-style-type: none;
}
.button-list button {
  cursor: pointer;
  padding: 0.7em 1em;
  border-radius: 9px;
  border-top: 0;
  border-right: 1px solid rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.5);
  border-left: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  font-size: 0.8em;
  font-weight: 600;
}
.button-list button.active {
  border-top: 1px solid rgba(0,0,0,0.5);
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 0 6px 1px rgb(100,210,0);
}

.closer {
  position: absolute;
  right: 1em;
  font-size: 2em;
  cursor: pointer;
  transition: 0.25s ease-in-out;
}
.closer:hover {
  transform: scale(1.2);
}

.place-panels {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  column-gap: 1em;
  row-gap: 1em;
  margin: 2em 0;
}
.place-panels > div {
  display: flex;
  flex-flow: column nowrap;
  width: 320px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.place-panels .photo {
  flex: 0 0 160px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 5px 5px 0 0;
}
.place-panels .details {
  flex-grow: 1;
  padding: 0 1em;
}
.place-panels .rating {
  font-weight: bold;
  color: var(--colour-main);
}
.place-panels .nav {
  flex-grow: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  padding: 0 1em 1em;
}

.place-panels.wide > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "photo details"
    "photo nav";
  width: 640px;
  max-width: 100%;
}

.place-panels.wide > div .photo    { grid-area: photo; }
.place-panels.wide > div .details  { grid-area: details; }
.place-panels.wide > div .nav      { grid-area: nav; }
.submenu {
  display: flex;
  flex-flow: row nowrap;
  margin: 1em 0;
  padding: 0;
  list-style-type: none;
}
.submenu li.prefix::after {
  content: ":";
}
.submenu li:not(:first-child)::before {
  content: "\00a0|\00a0";
}
.submenu li.prefix + li::before {
  content: "\00a0";
}