/*
  Pedalers CSS development v26 - stories test - July 2025

  Change to pastel colors 26-01-29
  Change to light color scheme 26-02-01
  New burger button 26-02-24
  New cards format 26-03-10

  to minify: https://www.toptal.com/developers/cssminifier
*/

:root {
  --body-back: #ebd0c5;
  --page-back: #fff;
  --border-blue: #bbb;
  --title-main: #e72413;
  --title-highlight: #85462c;
  --title-photo: #FFDB58;
  --button-yellow: #FFD700;
  --accent-red: #e72413;
  --font-main: #212121;
  --body-weight: 450
}

/* reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
    interpolate-size: allow-keywords;
  }
}

body {
  min-height: 100vh;
  line-height: 1.618;
  -webkit-font-smoothing: subpixel-antialiased;
  font-smooth: auto;
  text-rendering: optimizeSpeed;
  font-feature-settings: "kern"1, "liga"1, "calt"1, "onum"1;
}

div {
  display: block;
  position: relative;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

p {
  margin: calc(1ex / 0.32) 0;
  line-height: calc(1ex / 0.32);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

input,
textarea,
select,
button {
  font: inherit;
  line-height: 1.1;
  outline: 0;
}

textarea:not([rows]) {
  min-height: 15ex;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  background-color: transparent;
  color: currentColor;
  text-underline-offset: 0.15ex;
}

/* fonts */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-display: swap;
  src: url(../jco/quicksand-400.woff2) format('woff2'),
    url(../jco/quicksand-400.woff) format('woff');
}

@font-face {
  font-family: 'Quicksand-V';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(../jco/Quicksand-VariableFont_wght.woff2) format('woff2-variations'),
    url(../jco/Quicksand-VariableFont_wght.woff2) format('woff2') tech('variations');
}

@font-face {
    font-family: 'Grape Nuts';
    src: local('Grape Nuts'), local('Grape Nuts-Regular'),
        url(../jco/GrapeNuts.woff2) format('woff2'),
        url(../jco/GrapeNuts.woff) format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'Winky Rough';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(../jco/WinkyRough-VariableFont_wght.woff2) format('woff2-variations'),
    url(../jco/WinkyRough-VariableFont_wght.woff2) format('woff2') tech('variations');
}

@font-face {
  font-family: 'Adjusted Verdana Fallback';
  src: local(Verdana);
  font-weight: 300;
  size-adjust: 93%;
  ascent-override: 106%;
  descent-override: normal;
  line-gap-override: 7%;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.1); 
}

::-webkit-scrollbar-thumb {
  background: var(--border-blue);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-blue);
}

html { 
  scrollbar-color: var(--border-blue) transparent;
}

body {
  font-family: 'Quicksand', 'Adjusted Verdana Fallback', 'SF Rounded', ui-rounded, Verdana, Arial;
  font-size: 1.8rem;
  line-height: 1.618;
  font-size: clamp(1.8rem, 1.6rem + 0.299vw, 2.0rem);
  color: var(--font-main);
}

@supports (font-variation-settings: normal) {
  body {
   font-family: 'Quicksand-V', 'Adjusted Verdana Fallback', 'SF Rounded', ui-rounded, Verdana, Arial;
   font-weight: var(--body-weight);
  }

  h1, h2, h3, h4, h5 {
    font-family: 'Winky Rough', 'Adjusted Verdana Fallback';
  }
 }


/* clear underline from a href links, add back as needed */
a {
  text-decoration: none;
  border: none;
}

p a {
  text-decoration: underline;
}

a:visited {
  color: var(--font-main);
}

/* GO titles, sizes and colors */
h1,
h2,
h3,
h4,
h5 {
  font-weight: var(--body-weight);
  text-align: center;
  color: var(--title-main);
}

.title1 {
  font-size: 9.113rem;  
  letter-spacing: -3px;
}
 
.title2 {
  font-size: 7.2rem;
}

.title3 {
  font-size: 5.1rem;
}

.title4 {
  font-size: 3.6rem;
}

.title5 {
  font-size: 2.55rem;
}

.title6 {
  font-size: 2.4rem;
}

.textsize {
  font-size: 1.0em;
  line-height: 1.613;
}

.blk {
  color: #232323;
}

.wht {
  color: #FFF;
}

.flow {
  display: flex;
  flex-flow: row nowrap;
}

.sml {
  font-size: 0.8em;
}

.nbtxt {
  white-space: nowrap;
}

.tight {
  line-height: 1.2;
  display: inline-block;
}

/* universal containers */
/* TODO critical css */

#mstrwrap {
  width: 100%;
  min-width: 300px;
  max-width: 1600px;
  margin: 0 auto;
  box-shadow: 0 0 15px rgba(60,48,50,0.35);
}

@media only screen and (min-width:1600px) {
  #mstrwrap {
    margin-bottom: 50px;
  }
}

#mstrwrap > div{
  width: 100%;
  
}

#content {
  min-height: calc(100vh - 536px);
  padding: 0 0 135px 0; /* add extra white space to top of footer */
}

/* GO hide by media size */
/* hide on phones */
@media only screen and (max-width:767px) {
  .xp {
    display: none;
  }
}

/* hide on desktop */
@media only screen and (min-width:768px) {
  .xd {
    display: none;
  }
}

/* set universal white space between main divs */
article,
section {
  padding: 135px 20px;
  max-width: 100%;
  margin: 0 auto;
}

/* extra spacing on first div to allow for navbar */
#content > div:first-of-type {
  padding: 175px 20px 135px;
}

/* GO containers for sections */
/* TODO critical css */

.textbox {
  width: 65ch;
  max-width: 100%;
  margin: 0 auto;
}

.storybox {
  max-width: 100%;
  border-radius: 10px;
  margin: 24px auto;
  padding: 2ch 5ch;
}

.sbarticle {
  width: 80ch;
}

.sbfull {
  width: 90%;
  background: #fff;
  color: #212121;
}

.sbhalf {
  width: 45%;
}

.sbgeneral {
  width: 75ch;
}

.storybox.sbgeneral {
  margin: 0 auto;
  padding: 125px 5ch 2ch;
}

/* universal backgrounds */
/* TODO critical css */

body {
  background: var(--body-back);
}

#mstrwrap {
  background: var(--page-back);
}

/* GO layer controls using z-index */
/* TODO critical css */

.backimg {
  z-index: 1;
}

#mylst,
#tab26:checked + .yearlabel,
#tab27:checked + .yearlabel,
#tab28:checked + .yearlabel,
#tab29:checked + .yearlabel
{
  z-index: 2;
}

#flmenu,
#phonenav {
  z-index: 4;
}

#nvbar,
#phnvbar {
  z-index: 6;
}

#modals dialog {
  z-index: 10;
}


/* GO flex set up, borrowed from https://meowni.ca/posts/monica-dot-css/ */
.horz,
.vert2horz {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.vert{
  display: flex;
  flex-direction: column;
}

/* GO alt text styling */
img {
  font-size: 0.9em;
  color: #11d6e7;
  font-weight: 500;
  font-style: italic;
}

/* GO buttons */
/* reset links and buttons */
a.btn {
  text-decoration: none;
}

a.btn,
button.btn,
span.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* base shape and borders */
.btn,
button,
input[type='submit'] {
  font-family: inherit;
  line-height: 1.1;
  min-width: 10ch;
  min-height: 4rem;
  text-align: center;
  font-weight: 600;
  border-radius: 20px;
  padding: 7px 20px;
}

/* on hover changes */
.btn:hover,
button:hover,
input[type='submit']:hover,
input[type='submit']:focus,
span.btn:hover {
  filter: saturate(1.5);
  border-bottom: 2px solid rgba(60,48,40,0.35);
  border-right: 1px solid rgba(60,48,40,0.35);
  transform: scale(1.05);
  transition: transform 100ms;
  box-shadow: 1px 1px 5px rgba(60, 48, 40, 0.6);
}

/* on press movement */
.btn:active
button:active,
input[type='submit']:active {
  transform: translateY(1px);
  transition: transform 100ms;
}

/* colors */
.byel {
  color: #111 !important;
  background: var(--button-yellow);
  border: none;
}

/* GO dialogs when used in modal mode */
/* TODO critical css */

dialog {
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  margin: auto;
  text-align: center;
  font-size: 1.6rem;
  border-radius: 10px;
  padding: 2rem;
  color: #323232;
  outline: none;
}

dialog::backdrop {
  backdrop-filter: blur(15px);
  background-color: rgba(60,48,40,0.6);
}

/* transparent modals */

dialog.ghost:modal {
  background: rgba(255,255,255,0.1);
  border: 0px solid rgba(255,255,255,0.1);
  box-shadow: 1px 1px 10px rgba(60, 48, 40, 0.5);
  font-weight: 450;
  color: #fff;
}

/* white modals */

dialog.wht:modal {
  background: #fff;
  border: 0px solid #fff;
  box-shadow: 1px 1px 10px rgba(60, 48, 40, 0.5);
  font-weight: 600;
}

/* use ✖ for 'close button' */

.mdlclose {
  position: absolute;
  top: 5px;
  right: 15px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.wht .mdlclose {
  color: #aaa;
}

.mdlclose:hover,
.wht .mdlclose:hover {
  color: var(--accent-red);
  font-weight: 900;
  font-family: 'Arial Black';
}

/* transitions for modal */

dialog, ::backdrop {
  transition: display 1s allow-discrete, overlay 1s allow-discrete, opacity 1s;
  opacity: 0;
}

[open],
[open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open],
  [open]::backdrop {
    opacity: 0;
  }
}

/* GO modal forms */

#modals input:not([type="checkbox"]),
#modals textarea,
#modals select {
  padding: 8px 15px 9px;
  width: 90%;
  background: #fffbe6;
  border: 1px solid #aaa;
  border-radius: 5px;
}

#modals input:focus-within,
#modals textarea:focus-within
{
  border: 2px solid #f17c71;
}

#modals dialog{
  padding: 3rem;
  width: 40vw;
}

#modals h4 {
  font-size: 2.55rem;
  margin-bottom: 10px;
}

.inpt.last {
  margin: 3rem 0 0;
}

/* goshdarn content */

#goshdarn {
  transform: rotate(-2deg);
  width: 50ch;
  text-wrap: balance;
}

.stuff { 
  display: inline;
}

/* GO card links styling */
/* for info card with title and content, enetire card is clickable, underline on the title on hover */

a.card-link,
a.card-link:visited {
  text-decoration: none;
  color: var(--font-main);
}

/* Underline only the bold tags when this specific link is hovered */
a.card-link:hover h2,
a.card-link:hover b {
  text-decoration: underline var(--accent-red) 2px;
  text-underline-offset: 3px;
}

/* GO Logos */
/* logo container CSS can be any name ie: .nvbarlogo, .footerlogo, etc */
.nvlogocontainer,
.phnnvlogocontainer,
.ftrlogocontainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* size variations */
.nvlogocontainer{
  height: 6.1rem;  /* needs a defined height to be centered vertically */
  font-size: 3.5rem;
}

.phnnvlogocontainer {
  height: 5.8rem;  /* needs a defined height to be centered vertically */
  font-size: 3.25rem;
}

.ftrlogocontainer {
  height: 6.1rem;  /* needs a defined height to be centered vertically */
  font-size: 5rem;
  margin-bottom: 2px;
}

/* logo CSS */
.logo {
  font-family: 'Quicksand', Verdana, Arial;
  line-height: 1.5;
  font-weight: 500;
  text-shadow: 0.5px 0.5px 0 #fff, 0.5px -0.5px 0 #fff, -0.5px -0.5px 0 #fff, -0.5px 0.5px 0 #fff;
}

.logotease {
  font-size: 0.4em;
  font-style: italic;
  line-height: 1;
  text-align: left;
  margin-top: -0.95em;
  margin-left: 0.2em;
}

.logomain {
  z-index: 1;    
}

.logomain::after {
  content: url("../img/circle.svg");
  display: inline-block;
  width: 1.55em;
  height: auto;
  position: absolute;
  z-index: -1;
  margin-left: -1.05em;
}

a.logomain {
  color: #111 !important;
  text-decoration: none;
}

.logoplus {
  position: absolute;
  font-family: 'grape nuts';
  font-size: 4rem;
  top: 7px;
  right: -156px;
  z-index: 1;
  font-weight: 700;
  color: #4B0082;
  transform: rotate(-3deg);
}


/* GO Nav */
/* TODO critical css */

#nvbar,
#phnvbar {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  text-align: right;
  font-size: 2rem;
  font-weight: 200;
  width: calc(100% - 70px);
  max-width: 1530px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  background-color: var(--page-back);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  box-shadow: 2px 2px 20px rgba(60,48,40,0.4);
  border-radius: 20px;
}

#phnvbar {
  display: none;
}

.nvbar-hidden {
  transform: translateY(-110%);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

#nvlogobox {
  width: 40%;
  padding: 3px 13px 5px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;  
  text-shadow: 0.5px 0.5px 0 #fff, 0.5px -0.5px 0 #fff, -0.5px -0.5px 0 #fff, -0.5px 0.5px 0 #fff;
}

#nvlinkbox {
  width: 60%;
  padding: 3px 0px 4px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
}

#nvlinkbox a, #nvlinkbox {
  color: #666;
  margin-top: 5px;
  font-size: 2.2rem;
  font-weight: 450;
}

#nvlinkbox a:hover,
footer a:not(.hmlnk):hover,
p a:hover,
#tourpgnav a:hover,
.nvopen,
#nav1 a:hover,
.swap a:hover,
#whylist a:hover h2,
#phonenav a:hover {
  text-decoration: underline var(--accent-red) 2px;
  text-underline-offset: 3px;
}

#nvburger,
#phonenav {
  display: none;
}

#nvbtn5 {
  text-decoration: none !important;
  line-height: 1;
  max-height: 37px;
  margin-top: 3px !important;
  font-weight: 600 !important;
}

#flmenu {
  background: #F9F6F0;;
  width: 100%;
  max-width: 1600px;
  height: 0;
  position: fixed;
  top: 0;
  transition: all 450ms;
}

#nav1,
#nav2,
#nav3,
#nav4,
#nav5 {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 50px;
}

#nav4 {
  flex-direction: row;
}

/*  add-on for laptops */
@media (min-width: 1024px) and (max-width: 1440px) and (aspect-ratio: 16/9) {
  #nav1,
  #nav2,
  #nav3,
  #nav4,
  #nav5 {
    margin-top: 30px;
  }
}

#nav1 {
  padding: 0 75px;
}

.nav-icon-mint,
.nav-icon-remix {
  background: #568203;
  color: #fff;
  font-weight: 700;
  font-size: 1.0rem;
  padding: 2px 4px;
  border-radius: 3px;
  margin-left: 8px;
  display: inline-block;
  line-height: 1;
}

.nav-icon-remix {
  background: #7a4d82;
  color: #fff;
}

/* nav1 tours & destinations */
#mainnav, #whynav {
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--font-main);
}

#mainnav h1,
#mainnav h2 {
  text-align: left;
  font-weight: 500;
}

#mainnav h1 {
  font-size: 3.8rem;
  line-height: 1.4;
  text-align: center;
  width: 100%;
}

#mainnav h2, 
#whynav h2 {
  font-size: 2.8rem;
  margin-top: 0.5rem;
  margin-bottom: -20px;
}

#fulllist {
  width: 100%;
  column-count: 3;
  column-gap: 1.5rem;
  overflow-y: scroll;
}

.destinGroup {
  display: inline-block;
  margin-top: 15px;
  break-inside: avoid;
}

/*GO - new and refeshed icons
usages
<span class="nav-icon-mint" title="Brand new Pedalers tour" aria-label="Brand new Pedalers tour">MINT</span>
<span class="nav-icon-remix" title="Updated Pedalers tour with a fresh route & new stays" aria-label="Updated Pedalers tour with a fresh route & new stays">REMIX</span>
*/

.newicon {
  height: 13px;
  display: inline-block;
  margin-left: 5px;
}

.astrx {
  display: inline-block;
  color: #f5a7a1;
  padding-left: 2px;
}

.footnote {
  font-size: 1.2rem;
  margin-top: 20px;
  width: 100%;
  text-align: center;
  color: #b91d0f;
}

/* nav2 My List */
#mylfull {
  font-size: 1.6rem;
  width: 65ch;
  text-align: center;
}

.mylstItem {
  border: 1px solid #aaa;
  border-radius: 15px;
  margin: 10px auto;
  max-width: 400px;
  padding: 0 0 5px;
  background: #fff;
}

.mylstItem:hover {
  box-shadow: 2px 2px 10px rgba(60,48,40,0.4);
}

/* nav3 about us */
#whynav .navtitle {
  width: 65ch;
  position: relative;
  margin: 0 auto 40px;
}

#whynav h1,
#whynav h2 {
  margin-bottom: 10px;
}

#whynav h2 {
  text-align: left;
}

#whylist {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

#whylist a:hover {
  text-decoration: none;
}

.whyGroup {
  display: flex;
  flex-direction: column;
  padding: 0 9px 7px 15px;
  border: 1px solid #F1E9E0;
}

#whylist a:hover .whyGroup {
  border-left-color: #CBAC87;
  border-bottom-color: #CBAC87;
}

/* nav4 contact */

.asktom {
  flex: 0 0 70%;
  padding: 150px;
}

.asktom label {
  font-size: 0.9em;
  margin-bottom: 10px;
}

.contact {
  flex: 0 0 38%;
  background: var(--title-highlight);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
  color: #fff;
  font-weight: 600;
  font-size: 0.8em;
  mask: radial-gradient(44.82px at 63px 50%,#000 99%,#0000 101%) 0 calc(50% - 70px)/100% 140px, radial-gradient(44.82px at -28px 50%,#0000 99%,#000 101%) 35px 50%/100% 140px repeat-y;
}

.contact h3 {
  color: #fff;
  font-size: 2.75rem;
}

.contacticons {
  display: flex;
  flex-flow: row;
  justify-content: center;
  width: 100%;
}

#fb-msg-icon, #whtapp-icon {
  height: 50px;
  margin: 5px 10px 20px 10px;
}


/* nav5 booking */
nav input[type="date"],
nav input[type="email"],
nav input[type="tel"],
nav input[type="text"],
nav select,
nav textarea {
  border: 1px solid var(--border-blue);
  background-color: var(--page-back);
  width: 100%;
  max-width: 60ch;
  border-radius: 8px;
  padding: .65em 1.25em;
  font-size: .95em;
  line-height: 1.2;
  margin-bottom: 15px;
}

nav input[type="submit"] {
  background: var(--title-photo);
  border-width: 0;
  border-radius: 20px;
}

nav input:focus-within,
nav textarea:focus-within
{
  border: 2px solid #f17c71;
}

#tourid > option {
  font-size: 0.75em;
  font-weight: 200;
}

.bluebox {
  border: 1px solid var(--border-blue);
  border-radius: 8px;
}

#datecontainer {
  padding: .65em 1.25em;
  border-radius: 8px 0 8px 8px;
}

#yearrow {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  width: 100%;
}

.bkyear {
  display: inline-block;
  text-align: center;
  border-radius: 8px 8px 0 0;
  border-width: 1px 1px 0 1px;
  padding: 0 10px !important;
  margin: 0 0 0 auto;
  box-shadow: inset 0 -7px 4px -7px rgba(55,55,55,0.4);
}

.bkyear.crnt {
  margin: 0 0 -1px auto;
  border-bottom: 1px solid var(--page-back);
  box-shadow: none;
}

.bkchkbx {
  margin-right: 10px;
}

.daterow input[type="radio"] {
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid #fff;
  border-radius: 50%;
}

.bkdates,
.bkprice,
.bknotes {
  display: inline-block;
  padding: 0 30px 0 0;
}

/* loader bar for adding dates to booking form */
#datefetch {
  width: 100%;
}

.waiting.bluebox {
  padding: 0px 20px 10px;
  margin-bottom: 15px;
}

.loader {
  width: 100%;
  height: 4.8px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.loader::after {
  content: '';  
  width: 0%;
  height: 4.8px;
  background-color: var(--border-blue);
  font-size: 15px;
  background-image: linear-gradient(45deg, rgba(60,67,210, 0.5) 25%, transparent 25%, transparent 50%, rgba(60,67,210, 0.5) 50%, rgba(60,67,210, 0.5) 75%, transparent 75%, transparent);
  background-size: 1em 1em;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  animation: animFw 5s ease-in infinite,  barStripe 1s linear infinite;
}

@keyframes barStripe {
  0% {
    background-position: 1em 0;
  }
  100% {
    background-position: 0 0;
  }
}

@keyframes animFw {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}


/* GO footer */
/* TODO non-crit css */
/* TODO add margin/padding to the div above to provide white space */

footer {
  text-align: center;
  color: var(--font-main);
  font-weight: var(--body-weight);
  position: relative;
}

footer a {
  color: var(--font-main);
  text-decoration: none;
}

#ftlogo {
  margin-bottom: 20px;
  width: 100%;
  display: inline-block;
}

/* new logo */

.logobox {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  align-content: flex-end;  
}

footer .logobox {
  font-size: 3.75rem;
}

.logoname {
  font-weight: 500;
  line-height: 1;
  z-index: 1;
  text-shadow: 0.5px 0.5px 0 #fff, 0.5px -0.5px 0 #fff, -0.5px -0.5px 0 #fff, -0.5px 0.5px 0 #fff; 
}

.rgt .logoname::after {
  content: url("../img/circle.svg");
  display: inline-block;
  width: 1.65em;
  position: absolute;
  z-index: -1;
  top: -0.3em;
  right: -0.62em;
}

.rgt .tease {
  font-size: 0.4em;
  font-style: italic;
  line-height: 1;
  text-align: left;
  margin-top: -0.25em;
}

#ftrlinks {
  margin: 20px auto 0;
  padding: 20px 10px 0 20px;
  border-top: 5px dotted #243116;
  width: 70%;
  font-size: 0.8em;
}

.social {
  display: inline-flex;
  align-content: center;
  padding: 32px;
}

#ftrcpyrgt, #ftrextra {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 1.2rem;
}

#ftrextra {
  left: unset;
  right: 25px;
}

#fttours,
#ftdestn,
#ftblog,
#ftessen {
  display: none;
}

#fttours,
#ftdestn,
#ftblog,
#ftessen {
  font-size: 1.4rem;
  columns: 3;
  width: 70%;
  margin: 0 auto;
}

#fttours h5,
#ftdestn h5,
#ftblog h5,
#ftessen h5  {
  font-size: 1.8rem;
  column-span: all;
  margin: 10px;
}


/* GO Homepage */

/* homepage minis */
/* TODO critical css */

#cupoftea {
  padding: 20px 0 150px !important;
  background: #E6D3C3;
  mask: radial-gradient(76.03px at 50% calc(100% - 102px),#000 99%,#0000 101%) calc(50% - 68px) 0/136px 100%, radial-gradient(76.03px at 50% calc(100% + 68px),#0000 99%,#000 101%) 50% calc(100% - 34px)/136px 100% repeat-x;

}

#cupoftea .theme {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40vh;
}

#cupoftea .title2 {
  font-size: 10.25rem;
  font-weight: 400;
  color: var(--title-highlight);
  letter-spacing: -5px;
}

.nb {
   break-inside: avoid;
   white-space: nowrap;
}
/* end image inserts */


/* GO new cards format */

.cardcontainer {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.card {
  flex-grow: 0;
  flex-shrink: 0;
  height: 50vh;
  max-height: 325px;
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  font-size: 1.6rem;
  text-shadow: 1px 1px 1px rgb(0, 0, 0), 0 0 7px rgba(60, 48, 40,.85), 0 0 15px rgba(60, 48, 40,.55);
  overflow: hidden;
  border-radius: 50px 15px;
  box-shadow: 2px 2px 10px rgba(60,48,40,0.5);
}

.card .dark {
  position: absolute;
  top: 0;
  width: 100%;
  padding: 20px 20px 25px;
  z-index: 1;
  background: linear-gradient(180deg, rgba(33, 33, 33, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  text-align: center;
}

.card .dark hr {
  margin: 7px 0 5px;
  border: 1px solid white;
}

#tourcards .card .dark {
  padding: 20px 40px;
}

.card img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}

.card a:visited {
  color: #fff;
}

.card .bottomnotes {
  width: 100%;
  font-weight: 500;
  position: absolute;
  bottom: 0px;
  text-align: center;
  text-wrap: balance;
  background: linear-gradient(0deg, rgba(33, 33, 33, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  padding: 0 0 10px;
}

#othertours .card .bottomnotes {
  padding: 10px 10%;
}

a.tourpagelink {
  color: #fff;
}

/* flex basis by use */
#minis .card,
#tour-cards .card {
  flex-basis: calc((100% - 77px)/3);
  margin: 12px;
}

#unique .card,
#othertours .card {
  flex-basis: calc((100% - 90px)/4);
  margin: 10px;
}

#tour-cards .card {
  max-height: 375px;    
}

/* TODO h2, h3, h4 sizing for card titles */
.card h2,
.card h3,
.card h4 {
  color: var(--title-photo);
  font-weight: 475;
}

#minis .card h2 {
  font-weight: 350;
}

#unique {
  padding: 175px 0 !important;
  background: #CFE0C3;
  mask: radial-gradient(78.26px at 50% 105px,#000 99%,#0000 101%) calc(50% - 70px) 0/140px 51% repeat-x, radial-gradient(78.26px at 50% -70px,#0000 99%,#000 101%) 50% 35px/140px calc(51% - 35px) repeat-x, radial-gradient(78.26px at 50% calc(100% - 105px),#000 99%,#0000 101%) 50% 100%/140px 51% repeat-x, radial-gradient(78.26px at 50% calc(100% + 70px),#0000 99%,#000 101%) calc(50% - 70px) calc(100% - 35px)/140px calc(51% - 35px) repeat-x;

}

#unique .cardcontainer {
  margin-top: 35px;
}

#unique.effectClass #u1,
#unique.effectClass #u2,
#unique.effectClass #u3,
#unique.effectClass #u4{
  opacity: 0;
}

#u1 {  
  opacity: 1;
  transition: opacity 300ms ease-in;
}

#u2 {  
  opacity: 1;
  transition: opacity 700ms ease-in;
}

#u3 {  
  opacity: 1;
  transition: opacity 1100ms ease-in;
}

#u4 {  
  opacity: 1;
  transition: opacity 1500ms ease-in;
}

/* GO who travels with us */
#whotravels {
  padding: 230px 50px 135px;
}

.tinycardsdiv {
  width: 100%;
  padding: 20px;
  border: 5px solid #f1e0d8;
  border-radius: 75px;
  background: #fefcfb;
}

.tinycards {
  display: flex;
  flex-flow: row nowrap;
  width: 94%;
  margin: auto;
  gap: 30px;
}

.tinycard {
  flex: 1;
  font-size: 0.9em;
}

.tinycard b {
  font-weight: 700;
  color: var(--title-highlight);
}

/* GO theme & destination pages */
.topdiv {
  padding-top: 160px !important;
  font-size: 0.8em;
}

.topdiv .title2 {
  font-size: 5rem;
}

.topdiv .title4 {
  font-size: 3.5rem;
  color: #bb623e !important;
  font-family: 'Grape Nuts';
}

#geninfo section {
  padding: 0;
}

#geninfo a:hover h2 {
  text-decoration: underline var(--accent-red) 2px;
  text-underline-offset: 3px;
}

/* ohdarn */
#ohdarn {
  text-align: center;
}

#ohdarnbtn {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 600;
  color: #bb623e;
  cursor: pointer;
}

#ohdarnbtn:hover {
  text-decoration: underline 2px var(--accent-red);
  text-underline-offset: 3px;
}

/* GO Homepage parts */
/* TODO non-critical css */

/* food tease */
#foodteaser {
  max-width: 100vw !important;
  padding: 150px 0 !important;
  display: flex;
  justify-content: center;
  background-image: url(../img/home/a-world-of-food.jpg);
  background-position: center;
  margin: 160px auto !important;
  background-size: cover; 
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}

#foodteaser.effectClass {
  opacity: 0;
}

#foodtease {
  text-align: center;
  max-width: 44ch !important;
  line-height: 1;
  font-family: 'Winky Rough', sans-serif;
  color: #fff;
  font-size: 4.5rem;
  text-shadow: 2px 2px 0 #111, 0px 0px 10px rgb(60,55,48), 0 0 20px rgb(55,55,55); 
  transition: opacity 1s ease-in-out;
}

#organic .textbox {
  font-family: monospace;
  width: 50%;
  font-size: .8em;
  padding: 13px 45px;
  border: 5px solid var(--border-blue);
  border-width: 0 5px;
  border-radius: 50px 15px;
  color: #555;
  background: #ffffef;
}

#cardsintro {
  padding: 0 0 135px !important;
}


/* GO tour pages */
/* TODO critical css */

#tour-facts {
  color: #fff;
  height: 95vh;
  max-height: 750px;
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 30vh 0;
  mask: radial-gradient(76.03px at 50% calc(100% - 102px),#000 99%,#0000 101%) calc(50% - 68px) 0/136px 100%, radial-gradient(76.03px at 50% calc(100% + 68px),#0000 99%,#000 101%) 50% calc(100% - 34px)/136px 100% repeat-x;
  z-index: 2;
}

.tourttl.title2 {
  color: #ffd700;
  position: relative;
  z-index: 2;
  text-shadow: 2px 2px 4px rgb(55, 55, 55), 2px 2px 10px rgb(55, 55, 55), -1px -1px 1px rgba(55, 55, 55,0.3);
}

#tour-story .tourttl.title2,
#tour-itin .tourttl.title2,
.topdiv .tourttl.title2 {
  text-shadow: 2px 2px 4px rgb(55, 55, 55), -1px -1px 1px rgba(55, 55, 55,0.3);
}

#tour-facts picture {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  position: absolute;
  z-index: 0;
}

#tour-facts img {
  width: 100%;
}
    
.toursynopsis,
.tourhighlights {
  width: 70ch;
  margin: 0 auto;
  font-size: 1.8rem;
  text-align: center;
  z-index: 2;
  position: relative;
  text-shadow: 1px 1px 2px rgb(55, 55, 55), 2px 2px 4px rgb(55, 55, 55), 2px 2px 10px rgb(55, 55, 55), -1px -1px 3px rgba(55, 55, 55,0.7);
  font-weight: 650;
}

.toursynopsis {
  width: 65ch;
  font-size: 2.1rem;
  line-height: 1.2;
  margin: 10px auto 20px;
}

.checkdates {
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: center;
  font-size: 0.85em;
}

.downarrow {
  z-index: 2;
  font-size: 2.6rem;
  color: #fff;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 0px;
}

#tour-story,
#tour-itin,
#tour-itin section:last-of-type {
  padding-bottom: 20px !important;
}

#tour-itin section:first-of-type {
  padding-top: 50px;
}

.tour-title {
  width: 100%;
  padding: 40px 20px 20px;
  margin: 0 auto;
}

.tour-title h2 {
  font-weight: 200;
  color: #555 !important;
}

.tour-title .lead-in,
.blog-title .lead-in {
  width: 55ch;
  margin: 35px auto 0;
  text-align: center;
  color: var(--title-highlight);
  font-weight: 400;
  font-family: 'Grape Nuts';
  font-size: 1.35em;
}

#story p {
  text-indent: 20px;
  margin: 1.5rem 0 0;
}

#story p:first-of-type,
#story p span {
  text-indent: 0;
}

@supports (initial-letter:3) {
  #story p:first-of-type::first-letter {
    initial-letter: 3;
    margin-right: 0.5rem;
    color: #ccc;
    font-family: 'Winky Rough';
  }
}

#gen .tour-title .lead-in {
  width: 45ch;
}

.img-rgt img,
.img-lft img {
  margin: 20px;
  width: 500px;
  height: 400px;
  object-fit: cover;
  border-radius: 50px 15px;
}

#home .img-rgt img,
#home .img-lft img {
  width: 400px;
  height: 320px;
}

.img-rgt {
  float: right;
  margin-right: -150px;
  position: relative;
}

.img-lft {
  float: left;
  margin-left: -150px;
  margin-right: 40px;
  position: relative;
}

.cptn-tl,
.cptn-tr,
.cptn-bl,
.cptn-br {
  position: absolute;
  font-family: 'Winky Rough';
  color: var(--title-photo);
  width: 30%;
  line-height: 1.1;
  text-shadow: 0 0 10px #000, 0 0 15px #111;
}

.cptn-tl {
  top: 60px;
  left: 60px;
}

.cptn-tr {
  top: 45px;
  right: 55px;
  text-align: right;
}

.cptn-bl {
  bottom: 45px;
  left: 45px;
}

.cptn-br {
  bottom: 60px;
  right: 60px;
}

.swap {
  width: 100%;
  text-align: center;
  font-size: 0.7em;
}

.itinpref {
  font-size: 0.8em;
  text-align: center;
  color: var(--title-highlight);
  font-style: italic;
  font-weight: 600;
}

.join {
  padding-top: 150px;
}

.datebox {
  display: flex;
  flex-flow: row nowrap;
  width: 90%;
  margin: 0 auto;
  justify-content: space-around;
}

#rqstbox,
#bkbox {
  width: 40%;
}

/* itinerary */
#tour-itin {
  display: none;
}

#itinerary article {
  width: 65ch;
  padding: 25px 0;
}

#itinerary footer {
  padding-top: 0;
  text-align: left;
}

#itinerary h2 {
  text-align: left;
  margin-bottom: 30px;
}

#itinerary .highlights {
  margin-left: 40px;
}

#itinerary .blk {
  color: #a2190d;
}

.misc {
  width: 100%;
  padding: 75px 0 50px;
  text-align: center;
  font-size: 0.85em;
  color: var(--border-blue);
  font-weight: 600;
  cursor: pointer;
}

.join {
  padding-top: 150px;
  background: bisque;
  mask: radial-gradient(78.26px at 50% 105px,#000 99%,#0000 101%) calc(50% - 70px) 0/140px 51% repeat-x, radial-gradient(78.26px at 50% -70px,#0000 99%,#000 101%) 50% 35px/140px calc(51% - 35px) repeat-x, radial-gradient(78.26px at 50% calc(100% - 105px),#000 99%,#0000 101%) 50% 100%/140px 51% repeat-x, radial-gradient(78.26px at 50% calc(100% + 70px),#0000 99%,#000 101%) calc(50% - 70px) calc(100% - 35px)/140px calc(51% - 35px) repeat-x;
  margin-top: 75px;
}

/* GO date table */
#dates header {
  width: 65ch;
  max-width: 90vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
}

.bktbltourname {
  white-space: nowrap;
}

/* TODO calculate min-height based on year with greatest number of rows, add to page  */
#dategrid {
  margin: 10px auto;
  width: 65%;
  min-height: 400px;
}

.years {
  display: flex;
  flex-flow: row nowrap;
  justify-content: end;
}

.yearlabel {
  display: inline-block;
  padding: 6px 35px;
  border: 1px solid var(--border-blue);
  border-radius: 10px 10px 0 0;
  border-width: 2px 0 0 0;
  margin: 3px 30px 0 0;
  top: 0;
  height: 47px;
  cursor: pointer;
}

.yearlabel:hover {
  font-weight: 650;
}

#tab26:checked + .yearlabel,
#tab27:checked + .yearlabel,
#tab28:checked + .yearlabel,
#tab29:checked + .yearlabel {
  border-width: 2px 1px 3px 1px;
  border-bottom-color: var(--page-back); 
}

.years input[type="radio"] {
  display: none;
}

[id^="yr"] {
  position: absolute;
  top: 47px;
  display: none;
}

#tab26:checked ~ #yr26,
#tab27:checked ~ #yr27,
#tab28:checked ~ #yr28,
#tab29:checked ~ #yr29 {
  display: table;
}

/* GO date calendar */
.tbl {
  width: 100%;
  border: 1px solid var(--border-blue);
  border-width: 3px 0 0 0;
  border-radius: 15px;
  padding-top: 5px;
  border-collapse: collapse;
}

.trw {
  display: table-row;
}

.trw:nth-child(2n of :not(.trprv)) {
  background: #ffffde;
}

.trw.trprv {
    background: transparent;
}

a.rqstprvdate {
  text-decoration: underline var(--accent-red) 2px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.trw.trprv a:visited {
  color: var(--font-main);
}

.tbdates {
  width: 26%;
  padding: 12px 0px 12px 30px;
}

.tbprice {
  width: 12%;
  text-align: center;
}

.tbdays {
  width: 12%;
  text-align: center;
}

.tbbtn {
  width: 25%;
  text-align: center;
}

.tbnotes {
  width: 25%;
}

.tbfull {
  width: 100%;
  text-align: center;
}

.tblfoot {
  font-size: 0.65em;
  padding: 5px;
  font-size: 1.3rem;
  background: rgba(55,55,55,0.2);
}

.tblprv {
  padding: 35px 40px;
  font-size: 0.9em;
}

.flexrow {
  display: flex;
  justify-content: space-evenly;
}

.flexrow span {
  display: inline block;
  padding: 0 10px;
}

/* GO sold out, private, etc */
.btn.byel.sod {
  background: transparent;
  font-weight: 200;
} 

.btn.byel.sod:hover {
  box-shadow: none;
  transform: none;
  transition: none;
  border: 0 solid var(--page-back);
}

/* GO hotels slider */
#hotels {
  padding: 150px 0 !important;
}

.list-wrapper {
  
  width: calc(100% - 100px);
  margin: 10px auto 0;
}

.list {
  display: flex;
  gap: 15px;
  padding: 0;
  list-style: none;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;  /* Hide scrollbar in Firefox */
  -ms-overflow-style: none;  /* Hide scrollbar in IE and Edge */
}

.list::-webkit-scrollbar {
  display: none;
}

.item {
  flex-shrink: 0;
  width: calc((100% - 45px)/3);
  height: 420px;
  scroll-snap-align: center;
  width: calc((100% - 40px)/3);
}
  
.button {
  position: absolute;
  width: 3rem;
  height: 3rem;
  font-size: 3.6rem;
  cursor: pointer;
  color: var(--accent-red);
}

.button--previous {
  left: -1.5rem;
  top: 40%;
  transform: rotate(180deg);
  z-index: 1;
}

.button--next {
  right: 0;
  top: 33%;
}

.hotelimg {
  height: 300px;
  width: 100%;
  overflow: hidden;
  border-radius:50px 15px; 
  box-shadow: 2px 2px 10px rgba(60,48,40,0.5) 
}

.hotelimg img {
  object-fit: cover;
  width: 100%;
  min-height: 100%;
}

.hotelname {
  position: absolute;
  bottom: 15px;
  width: 100%;
  padding: 0 10px;
}

.hotelname h4 {
  font-size: 2.4rem;
  color: #fff !important;
  text-shadow: #111 0 0 8px, #111 0 0 4px, #111 0 0 2px, #000 1px 1px 0;
  width: 90%;
  margin: auto;
}

.hoteldesc {
  height: auto;
  width: 95%;
  padding: 0 25px;
  font-size: 1.3rem;
  font-style: italic;
}

.tiny {
  font-size: 1.1rem;
  display: inline-block;
  text-align: center;
  width: 100%;
  color: #bb623e;
}

/* GO bikes and schwag */
#bikes .storybox {
  display: flex;
  flex-flow: row nowrap;
  justify-content: start;
  overflow: hidden;
  height: 542px;
  padding: 3%;
  background: #ffe68a;
  border-radius: 75px;
  width: 95%;
}

#bikes .title5 {
  color: #222;
  font-weight: 550;
}

.sbhalf:first-of-type {
  margin-right: 10%;
}

.bikeimg {
  position: relative;
  bottom: -36%;
  left: -20%;
  margin-top: 28px;
  max-width: unset;
}

.jersey {
  float: right;
  right: -34%;
  position: relative;
  shape-outside: polygon(41% 0, 100% 0, 100% 100%, 15% 100%, 16% 46%, 0 32%, 0 18%);
  clip-path: polygon(41% 0, 100% 0, 100% 100%, 15% 100%, 16% 46%, 0 32%, 0 18%);
  margin-left: -34%;
  width: 100%;
  max-width: unset;
}

/* GO other tours */

#othertours {
  background: #C1D5F0;
  mask: radial-gradient(78.26px at 50% 105px,#000 99%,#0000 101%) calc(50% - 70px) 0/140px 51% repeat-x, radial-gradient(78.26px at 50% -70px,#0000 99%,#000 101%) 50% 35px/140px calc(51% - 35px) repeat-x, radial-gradient(78.26px at 50% calc(100% - 105px),#000 99%,#0000 101%) 50% 100%/140px 51% repeat-x, radial-gradient(78.26px at 50% calc(100% + 70px),#0000 99%,#000 101%) calc(50% - 70px) calc(100% - 35px)/140px calc(51% - 35px) repeat-x;
  padding: 175px 0 !important;
}

#othertours .title3 {
  width: 90%;
  margin: auto;
  color: #2C4A6B;
}

/* GO accordians for details */

#details .storybox.sbgeneral {
  padding-top: 43px;
}

#details details p {
  margin: 10px 0 10px 25px;
}

details p:last-of-type {
  margin-bottom: 30px;
}

#details details b {
  color: #8b160b;
  font-weight: 600;
}

#details details ul {
  margin-left: 40px;
}

#details details b,
#details details ul,
#details details p {
  font-size: 0.9em;
}

.incl-list {
  display: inline-block;
  margin: 10px 0 20px 20px;
}

#details summary {
  border: 1px solid #ccc;
  padding: 5px 20px;
  margin-bottom: 5px;
  border-radius: 5px;
}

#details summary:hover,
#details details[open] summary {
  box-shadow: 1px 1px 4px rgba(55,55,55,0.7);
  background: var(--title-highlight);
  border-color: var(--title-highlight);
  color: #212121;
}

.tip {
  border: 1px solid #8b160b;
  border-radius: 7px 20px;
  color: #8b160b;
  font-weight: 600;
  border-width: 0 4px;
}

/* GO my list buttons */
#mylst {
  position: fixed;
  top: 45vh;
  left: 20px;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px !important;
  background: #ffe4c4;
  border-radius: 5px;
  z-index: 1;
}

#onlist,
#phonlist {
  display: none;
  color: #D23C45;
}

#notlist,
#phnotlist {
  color: #e0777d;    
}

/* GO vertical tablet css */
@media only screen and (min-width:767px) and (max-width:990px) and (orientation: portrait) {

  body {
    background: var(--page-back);
  }

  /* nav */

  #nvbar {
    display: none;
  }

  #phnvbar {
    display: flex;
  }

  .nvlogo::after {
    top: 5px;
  }

  #nvphburger {
    padding: 16px 15px 10px 0;
  }

  #mylst {
     display: none;
  }

  #nvmylst {
    padding: 7px 6px 10px 19px;
    font-size: 3rem;
    visibility: hidden;
  }

  #tours #nvmylst {
    visibility: visible;
  }

  #nvburger {
    display: block;
    position: fixed;
    bottom: 10px;
    right: 10px;
  }

  #hamburger-toggle {
    opacity: 0;
    cursor: pointer;
    position: absolute;
  }

  /* 44 x 38 px button size */
  #hamburger {
    display: block;
    padding: 4px 5px 0px 5px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    box-sizing: content-box;
    transition: transform 0.2s ease;
    border-radius: 5px;
  }

  #hamburger .slice {
    --slice-height: 3px;
    display: block;
    position: relative;
    width: 100%;
    height: var(--slice-height, 2px);
    border-radius: var(--slice-height);
    transition: all 250ms ease;
    background-color: black;
    opacity: 90%;
  }

  #hamburger .slice {
    margin-top: 18%; /* Fallback to produce something hamburger-ish if calc is not available */
    margin-top: calc(30% - var(--slice-height));
    top: calc((30% - var(--slice-height)) / -2);
  }

  /* add to make X when used */
  #hamburger-toggle:checked ~ #hamburger {
    background: transparent;
    width: 20px;
    height: 20px;
    padding: 11px 12px 7px 12px;
  }

  #hamburger-toggle:checked ~ #hamburger .slice:nth-child(1) {
    top: calc(45% - 33% + var(--slice-height) / 2);
    transform: rotate(45deg);
    background-color: var(--accent-red);
  }
  
  #hamburger-toggle:checked ~ #hamburger .slice:nth-child(2) {
    opacity: 0;
  }

  #hamburger-toggle:checked ~ #hamburger .slice:nth-child(3) {
    top: calc(-50% + var(--slice-height) / 2);
    transform: rotate(-45deg);
    background-color: var(--accent-red);
  }
 
  #nvlogobox {
    width: 100%;
    padding: 5px;
  }

  .phnnvlogosize {
    font-size: 3.75rem;
  }

  .nvlogo::after {
    bottom: 1px;
  }

  #nvlinkbox,
  #flmenu {
    display: none;
  }

  #phonenav {
    width: 55vw;
    height: 100vh;
    background: #fff;
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: -101vw;
    box-shadow: 0 0 15px rgba(60,48,40,0.3);
    overflow: hidden;
    display: block;
    transition: left 400ms ease-in-out;
  }

  .phnavspacer {
    height: 65px;
    width: 100%;
  }

  /* all details sections */
  #phonenav summary::-webkit-details-marker {
    display: none;
  }

  #phonenav details a {
    line-height: 2.3;
    text-decoration: none;
    color: #222;
  }

  /* main nav panel class="phnav" */
  details.phnav summary:not(.subdestn ) {
    height: 10vh;
    padding: 30px 30px 20px;
    font-size: 2.55rem;
    list-style: none;
    font-family: "Winky Rough", sans-serif;
    font-weight: 400;
    color: var(--accent-red);
  }

  details.phnav div {
    padding: 15px 30px;
  }

  #phonenav:has(.phnav[open]) > .phnav summary:not(.subdestn ) {
    display: none;
  }

  #phonenav:has(.phnav[open]) > .phnav[open] summary:not(.subdestn ) {
    height: 10vw;
    padding: 17px 30px 12px;
    background: #b91d0f;
    color: white;
    display: block;
  }

  /* destinations nav panel class="subnav" */
  #phonenav details.subnav > div a {
    display: inline-block;
    line-height: 1;
    margin: 0 0 20px 7px;
  }
  
  details.subnav summary.subdestn {
    line-height: 1.6;
    padding: 10px 0;
    list-style: none;
    color: var(--font-main);
  }

  details.subnav div {
    padding: 5px 0 0 0;
  }

  #phdestins:has(.subnav[open]) > .subnav .subdestn {
    display: none;
  }

  #phdestins:has(.subnav[open]) > .subnav[open] .subdestn {
    display: block;
    font-weight: 700;
    color: var(--accent-red);
    text-decoration: underline var(--accent-red) 2px;
    text-underline-offset: 3px;
  }

  /* footer */
  footer {
    padding: 270px 0 5px
  }

  #ftrcpyrgt, #ftrextra {
    bottom: 65px;
  }
 
  /* GO Homepage crit parts */

  #cupoftea .title2 {
    font-size: 11rem;
  }

  #organic .textbox {
    width: 75%;
  }
  
  /* change flex-basis */
  #minis .card, #tour-cards .card, #unique .card, #othertours .card {
    flex-basis: calc((100% - 66px)/2);
    margin: 12px
  }

  /* tour pages */
  .toursynopsis, .tourhighlights {
    width: 55ch;
  }

  #tour-facts {
    height: 90vh;
    width: 100%;
    padding: 135px 0 0;
    max-height: unset;
  }

  #tour-facts picture {
    height: 60vh;
    top: 0px;
  }

  #tour-facts img {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
  }

  .tour-title h2 {
    margin-top: 1.5rem;
  }

  .tour-title .lead-in,
  .blog-title .lead-in {
    width: 90%;
  }

  .img-rgt {
    margin-right: -40px;
    width: 50vw;
  }

  .img-lft {
    margin-left: -40px;
    width: 50vw;
  }
  
  #bikes .storybox {
    width: 100%;
    padding: 0;
  }

  #bikes .sbhalf {
    overflow: hidden;
    padding: 35px;
  }

  .bikeimg {
    width: 166%;
    bottom: -5%;
    left: -52%;
    margin-top: 29px;
  }

  .button--previous {
    top: 30%;
  }

  .button--next {
    top: 23%;
  }

  #dategrid {
    width: 94%;
  }

  .item {
    width: calc((100% - 30px)/3);
    height: auto;
  }

  #othertours .card {
    flex-basis: calc((100% - 76px)/3);
  }

}


/* GO mobile css */
@media only screen and (max-width:767px) {
    
  body {
    background: var(--page-back);
  }

  article {
    padding: 135px 10px;
  }

  .vert2horz {
    flex-direction: column;
  }
  
  .title1 {
    font-size: 6.1rem;
  }
  
  .title2 {
    font-size: 4rem;
  }
  
  .title3 {
    font-size: 3.65rem;
  }
  
  .title4 {
    font-size: 2.8rem;
  }
  
  .title5,
  .title6 {
    font-size: 2.4rem;
  }
  
  .textbox {
    width: 95%;
  }

  /* nav */
  #nvbar {
    display: none;
  }

  #phnvbar {
    display: flex;
    justify-content: space-around;
    width: calc(100% - 12px);
    left: 6px;
    transform: unset;
    border-radius: 12px;
  }
   
  #nvlogobox {
    width: 100%;
    padding: 0;
  }

  .phnnvlogosize {
    font-size: 3.1rem;
    padding-top: 7px;
  }

  .nvlogo {
    font-size: 3.25rem;
  }

  .nvlogo::after {
    bottom: 1px;
  }

  .nvlogo::after {
    top: 5px;
  }

  #nvphburger {
    padding: 12px 15px 6px 20px;
  }

  #mylst {
     display: none;
  }

  #nvmylst {
    padding: 5px 15px 6px 18px;
    font-size: 3rem;
    visibility: hidden;
  }

  #tours #nvmylst {
    visibility: visible;
  }

  #nvburger {
    display: block;
    position: fixed;
    bottom: 10px;
    right: 10px;
    padding: 16px 0 10px 16px;
  }

  #hamburger-toggle {
    opacity: 0;
    cursor: pointer;
    position: absolute;
  }

  /* 44 x 38 px button size */
  #hamburger {
    display: block;
    padding: 4px 5px 0px 5px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    box-sizing: content-box;
    transition: transform 0.2s ease;
    border-radius: 5px;
  }

  #hamburger .slice {
    --slice-height: 3px;
    display: block;
    position: relative;
    width: 100%;
    height: var(--slice-height, 2px);
    border-radius: var(--slice-height);
    transition: all 250ms ease;
    background-color: black;
    opacity: 90%;
  }

  #hamburger .slice {
    margin-top: 18%; /* Fallback to produce something hamburger-ish if calc is not available */
    margin-top: calc(30% - var(--slice-height));
    top: calc((30% - var(--slice-height)) / -2);
  }

  /* add to make X when used */
  #hamburger-toggle:checked ~ #hamburger {
    background: transparent;
    width: 20px;
    height: 20px;
    padding: 11px 12px 7px 12px;
  }

  #hamburger-toggle:checked ~ #hamburger .slice:nth-child(1) {
    top: calc(45% - 33% + var(--slice-height) / 2);
    transform: rotate(45deg);
    background-color: var(--accent-red);
  }
  
  #hamburger-toggle:checked ~ #hamburger .slice:nth-child(2) {
    opacity: 0;
  }

  #hamburger-toggle:checked ~ #hamburger .slice:nth-child(3) {
    top: calc(-50% + var(--slice-height) / 2);
    transform: rotate(-45deg);
    background-color: var(--accent-red);
  }

  .whyGroup {
    font-size: 1.6rem;
    line-height: 1.1;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 12px 20px !important;
  }

  #ftlogo {
    margin-bottom: 20px !important;
  }

  .ftrlogocontainer {
    font-size: 4.5rem;
  }

  .logoplus {
    font-size: 3rem;
    top: 36px;
    right: -63px;
  }

  #nvlinkbox,
  #flmenu {
    display: none;
  }

  #phonenav {
    width: 100vw;
    height: 100vh;
    background: #F9F6F0;;
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: -101vw;
    box-shadow: 0 0 15px rgba(60,48,40,0.3);
    overflow: hidden;
    display: block;
    transition: left 400ms ease-in-out;
  }

  .phnavspacer {
    height: 65px;
    width: 100%;
  }

  /* all details sections */
  #phonenav summary::-webkit-details-marker {
    display: none;
  }

  #phonenav details a {
    line-height: 2.3;
    text-decoration: none;
    color: #222;
  }

  #mylphn a {
    line-height: 1.3 !important;
  }

  /* scroll and padding */
  #phdestins,
  #mylphn,
  #whypdlr,
  #askpdlr,
  #bookpdlr {
    max-height: 80vh;
    overflow-y: auto;
  }

  #whypdlr {
    padding-bottom: 70px;
  }

  /* main nav panel class="phnav" */
  details.phnav summary:not(.subdestn ) {
    height: 10vh;
    padding: 30px 30px 20px;
    font-size: 2.55rem;
    list-style: none;
    font-family: "Winky Rough", sans-serif;
    font-weight: 400;
    color: var(--accent-red);
  }

  details.phnav div {
    padding: 15px 30px;
  }

  #phonenav:has(.phnav[open]) > .phnav summary:not(.subdestn ) {
    display: none;
  }

  #phonenav:has(.phnav[open]) > .phnav[open] summary:not(.subdestn ) {
    height: 17vw;
    padding: 10px 30px 12px;
    background: #b91d0f;
    color: white;
    display: block;
  }

  /* destinations nav panel class="subnav" */
  #phonenav details.subnav > div a {
    display: inline-block;
    line-height: 1;
    margin: 0 0 20px 7px;
  }
  
  details.subnav summary.subdestn {
    line-height: 1.6;
    padding: 10px 0;
    list-style: none;
    color: var(--font-main);
  }

  details.subnav div {
    padding: 5px 0 0 0;
  }

  #phdestins:has(.subnav[open]) > .subnav .subdestn {
    display: none;
  }

  #phdestins:has(.subnav[open]) > .subnav[open] .subdestn {
    display: block;
    font-weight: 700;
    color: var(--accent-red);
    text-decoration: underline var(--accent-red) 2px;
    text-underline-offset: 3px;
  }

  /* contact */
  details.phnav div.inpt {
    padding: 0px 10px;
    font-size: 0.9em;
  }

  /* modals */
  #modals dialog {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    border: none;
  }

  #modals input:not([type="checkbox"]), #modals textarea, #modals select {
    width: 100%;
  }

  /* footer */
  #ftlogo {
    margin-bottom: 95px;
  }

  footer .logobox {
    font-size: 3.25rem;
  }

  #ftrlinks {
    margin: 10px auto 0;
    width: 90%;
  }

  #fttours,
  #ftdestn,
  #ftblog,
  #ftessen {
    columns: 1;
  }
  
  /* GO Homepage crit parts */

  #cupoftea {
    padding: 70px 0 150px !important;
  }

  #cupoftea .title2 {
    font-size: 20vw;
    width: 75%;
  }

  .cardcontainer {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
  }

  section.cardcontainer,
  section#othertours {
    padding: 135px 6px;
  }

  #minis.cardcontainer,
  #unique .cardcontainer {
    padding: 0 15px;
  }

  .card {
    height: 40vh;
  }

  #minis .card img {
    min-height: 40vh;
  }

  /* flex-basis all same */
  #minis .card,
  #tourcards .card, 
  #unique .card,
  #tourcards .card {
    flex-basis: 90%;
    margin: 10px 19px;
  }
  
  #ohdarn {
    margin-top: 30px;
  }

  #goshdarn {
    height: 33ch;
  }

  #foodtease {
    max-width: 90% !important;
  }
  
  #whotravels {
    padding: 230px 20px 135px;
  }

  .tinycardsdiv {
    border-radius: 20px;
  }

  .tinycards {
    flex-flow: column nowrap;
  }

  #organic .textbox {
    width: 96%;
    padding: 14px 24px;
  }

  /* GO tours, general */

  #tour-facts {
    height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #tour-facts picture {
    top: -50px;
  }

  .toursynopsis,
  .tourhighlights {
    width: 90vw;
    font-size: 1.2rem
  }

  .toursynopsis {
    font-size: 1.8rem;
    margin-top: 20px;
  }

  #tour-story {
    padding-top: 165px;
  }

  .tour-title {
    padding: 0 0 20px 0;
  }

  .tour-title h2 {
    margin-top: 1.5rem;
  }

  .tour-title .lead-in,
  .blog-title .lead-in {
    width: 100%;
    margin: 35px auto 10px;
  }

  #story p {
    text-indent: 0;
    margin: inherit;
  }

  #general-info .tour-title .lead-in {
    width: 90%;
    margin: 35px auto 10px;
  }

  #general-info .title3 {
    font-size: 4.5rem;
    color: #e72413 !important;
  }

  .storybox {
    width: 100vw;
    padding: 15px;
  }

  .sbarticle {
    width: 100vw;
    box-shadow: none;
  }

  .list-wrapper {
    width: 100%;
  }

  .img-rgt,
  .img-lft {
    float: unset;
    margin: 0 0 50px;
    border-radius: 0;
    display: block;
    height: 400px;
  }

  .img-rgt img, .img-lft img {
    margin: 45px 0;
    border-radius: 10px;
  }

  #home .img-rgt,
  #home .img-lft {
    height: auto;
  }

  .cptn-tl,
  .cptn-tr,
  .cptn-bl,
  .cptn-br {
    width: 115px;
    z-index: 1;
  }

  .cptn-tl {
    top: 30px;
    left: 30px;
  }

  .cptn-tr {
    top: 30px;
    right: 30px;
    text-align: right;
  }

  .cptn-bl {
    bottom: 30px;
    left: 30px;
  }

  .cptn-br {
    bottom: 30px;
    right: 30px;
  }

  #rqstbox,
  #bkbox {
    width: 96%;
    margin-bottom: 30px;
  }

  .datebox,
  #bikes .storybox {
    flex-flow: column nowrap;
    width: 100%;
    align-items: center;
    height: auto;
    padding: 0;
  }

  #bikes .storybox {
    border-radius: 20px;
  }
  
  .sbhalf {
    margin: 50px auto 0;
    width: 100%;
  }
  
  .sbhalf:first-of-type {
    margin-right: unset;
    height: 490px;
    overflow: hidden;
  }
  
  .sbhalf:first-of-type img {
    width: 135vw;
  }

  .sbhalf p {
    padding: 0 25px;
  }

  .item {
    width: 100%
  }

  .hoteldesc {
    padding: 0;
    text-align: center;
  }

  #hotels ,list-wrapper {
    width: calc(100vw - 50px);
  }

  .button--previous {
    left: -11px;
  }

  .button--next {
    right: -10px;
  }

  #dates {
    width: 100vw;
    padding: 0 10px;
    scroll-margin-top: 70px;
  }
  
  .bktbltourname {
    white-space: normal;
  }

  #dategrid {
    width: 100%;
    font-size: 0.9em;
    line-height: 1.1;
  }

  .yearlabel {
    padding: 6px 15px;
    margin-right: 10px;
  }

  .tbl {
    width: 100%
  }

  .tbdates {
    width: 30%;
    padding: 8px 5px;
  }

  .tbprice {
    width: 18%;
    padding: 8px 5px;
  }

  .tbbtn {
    width: 10%;
    padding: 10px 0
  }

  .tbnotes,
  .tbdays {
    display: none;
  }

  #details .storybox {
    padding: 70px 0 2ch;
  }

  #details summary {
    width: 100%;
  }
    
  #othertours .card {
    margin: 10px 25px
  }

  #mylst {
    top: unset;
    bottom: 15px;
    left: 15px;
  }

  .mylstItem {
    padding: 10px 19px !important;
  }

}