@import url(fonts.css);


:root {
    /* COLOUR */

    --light: #f3f3f3;
    --light-box: #e7e7e7;
    --light-form: #eeeeee;
    --menu-bg: #00000030;
    --search-results: #f3f3f350;
    --mid: #999999;
    --primary: #333333;
    --blue: #18a0fb;
    --gold: rgb(255, 165, 0);
    --pink: rgb(196, 0, 163);
    --purple: #641c58;
    --dark-blue: #001c33;
    --sky-blue: #2ee0ff;
    --foggy: rgba(0, 0, 0, 0.6);
    --gradient-top: #001c33;
    --gradient-mid: #001c3363;
    --gradient-bottom: rgba(194, 0, 161, 0.4);
    --gradient-bottom: hsla(310, 100%, 38%, 0.4);
    --gradient-bottom: rgba(194, 0, 161, 0.4);
    --green: #25D366;
    --orange: #FB7A17;
    --red: #EA4236;
    --accommodation: #FBBB01;
    --bikes: #EA4236;
    --shops: #A042F5;
    --wellbeing: #33A851;
    --tourism: #FB7A17;
    /*    --accommodation: #FFA500;
    --bikes: #A020F0;
    --shops: #912a30;
    --wellbeing: #20f088;
    --tourism: #33A851;*/

    --background-maintenance: radial-gradient(circle at top left,rgba(0,28,51,0.5) 20%, rgba(196,0,163,0.4) 100% ), radial-gradient(circle at bottom left, rgba(196,0,163,0.5) 20%, rgba(0,28,51,1) 100% ), radial-gradient(circle at top right,rgba(0,28,51,0.5) 50%, rgba(0,28,51,1) 100% ), radial-gradient(circle at bottom right,rgba(0,28,51,0.5) 50%, rgba(0,28,51,1) 100% );
    --bg-foggy: radial-gradient(circle at left,rgba(196,0,163,0) 80%, rgba(196,0,163,0.2) 100% ), linear-gradient(180deg, rgba(0,28,51,0) 50%, rgba(0,28,51,0.9) 100% ), radial-gradient(circle at right,rgba(0,28,51,0) 50%, rgba(0,28,51,0.7) 100% ), radial-gradient(circle at bottom,rgba(0,28,51,0) 50%, rgba(0,28,51,0.5) 100% );
    --bg-extra-foggy: radial-gradient(circle at left,rgba(196,0,163,0) 20%, rgba(196,0,163,0.4) 100% ), linear-gradient(180deg, rgba(0,28,51,0) 50%, rgba(0,28,51,1) 100% ), radial-gradient(circle at right,rgba(0,28,51,0) 50%, rgba(0,28,51,0.9) 100% ), radial-gradient(circle at bottom,rgba(0,28,51,0.5) 20%, rgba(0,28,51,0.9) 100% );
    --bg-ball: radial-gradient(circle at left top, rgba(196, 0, 163) 0%, rgb(0, 28, 51) 100%);
    --bg-stats: linear-gradient(90deg, rgba(243,243,243,1) 10%, rgba(0,0,0,0) 99%);
    --bg-gradient-silver: linear-gradient(0deg, rgba(187,187,187,1) 0%, rgba(231,231,231,1) 50%, rgba(187,187,187,1) 100%);
    /* Z-INDEX */
    --z-search-block: 20;
    --z-menu: 14;
    --z-navbar: 13;
    --z-menu-overlay: 12;
    --z-header: 20;
    --z-breadcrumbs: 10;
    --z-dashboard-menu: 15;
    --z-dashobard-cat: 11;
}

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    list-style-type: none;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-family: Montserrat Regular,
}

html {
    font-size: 100%;
    box-sizing: inherit;
    scroll-behavior: smooth;
    height: -webkit-fill-available;
    text-align: left;
    max-width: 100%;
    overflow-x: hidden;
}

main {
    overflow: hidden;
 }

 h1 {
  font-family: 'Montserrat Medium', Arial Bold, Helvetica, sans-serif;
  font-size: clamp(35px, 8vw, 60px);
  letter-spacing: -0.05rem;
  line-height: 1.2;
  color: white;
}

.home-heading, .routes-heading {
    font-family: 'Montserrat Medium', Arial, Helvetica, sans-serif;
    font-size: clamp(40px, 8vw, 50px);
    letter-spacing: 0;
    line-height: 1;
    color: white;
    padding-bottom: 10px;
    min-width: 350px;
    z-index: 2;
}

.routes-heading {
    font-size: clamp(25px, 3vw, 38px);
}

.tagline, .tagline-roadbook {
    position: relative;
    top: -10px;
    font-family: 'Montserrat Medium', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 2.5vw, 18px);
    letter-spacing: clamp(1px, 0.8vw, 5px);
    text-transform: uppercase;
    width: 100%;
    line-height: 1.6;
    padding: 0 0.5rem;
    margin-top: clamp(0.6rem, 5vw, 0.2rem);
    margin-bottom: clamp(0.5rem, 5vw, 1rem);
    color: var(--light);
}

.tagline-roadbook {
    top: 5px;
}


.home-tagline {
    position: relative;
    top: -15px;
    font-family: 'Montserrat Medium', Arial, Helvetica, sans-serif;
    font-size: clamp(14px, 3vw, 18px);
    width: 100%;
    line-height: 1.6;
    padding: 0 0.5rem;
    margin-top: clamp(0.6rem, 5vw, 0.2rem);
    margin-bottom: clamp(0.5rem, 5vw, 1rem);
    color: var(--light);
    min-width:375px;
}

.home-message {
    color: var(--pink);
    animation: fadeOut 16s;
    font-weight: 700;
    animation-iteration-count: 1;
    margin: 0.2rem 0 0 0;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


body {
    -webkit-font-smoothing: antialiased;
    font-family: 'Montserrat Regular', Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    height: -webkit-fill-available;
    color: var(--primary);
    background-color: var(--light);
}

b {
    font-family: 'Montserrat Regular', Arial Bold, Helvetica, sans-serif;
    font-weight: bold;
}

section{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: auto;
    background-color: var(--light);
}

h2, .widget-biz-heading {
  font-family: 'Montserrat Medium', Arial, Helvetica, sans-serif;
    font-size: clamp(1.4rem, 5vw, 1.6rem);
    color: inherit;
}

h3, h5, .dashboard-analytics-item h3 {
  font-family: 'Montserrat Medium';
  font-size: clamp(0.6rem, 5vw, 0.8rem);
  color: inherit;
  text-transform: uppercase;
}

h4 {
  font-size: clamp(1.2rem, 5vw, 1.3rem);
  color: inherit;
}

.strokethrough {
    font-weight: 500;
    text-decoration: line-through;
    color: lightgrey;
}

a,
button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  text-transform: unset;
  text-decoration: none;
  transition: opacity 0.3s ease-in-out;
  color: inherit;
}

a:hover, button:hover{
    opacity:0.7;
}

a:hover, button:hover {
    animation: pulsate 1s infinite alternate;
}

@keyframes pulsate {
    from {
        opacity: 1 !important;
    }

    to {
        opacity: 0.5 !important;
    }
}


.btn, .btn-coming-soon {
    position: relative;
    min-height: 2.5rem;
    padding: 0.5rem 1.25rem;
    min-width: 150px;
    border: none;
    cursor: pointer;
    font-size: clamp(0.8rem, 5vw, 1rem);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    outline: none;
    background-color: var(--blue);
    color: var(--light);
    transition: all 0.25s ease-in-out;
}

.btn:focus, .btn:hover {
  background-color: var(--dark-blue);
}

.btn-home {
    background-color: var(--pink);
    border-radius: 20px;
    width: 60px;
    min-width: 60px;
    transition: all 0.25s ease-in-out;
    font-size: 16px;
    text-align: center;
    padding-left: 5px;
}

.btn-home:hover {
    background-color: var(--blue);
    opacity: 1 !important;
}

.btn-home:focus, .btn-home:active {
    background-color: var(--mid);
}


.launch-map-modal{
  position: relative;
  width: 100%;
  height: 100vh;
  opacity: 0;
  cursor: pointer;
}

/* .launch-climb-profile-modal{
  position: relative;
  width: 100%;
  height: 100vh;
  opacity: 0;
  cursor: pointer;
} */


p {
    margin-top: 1rem;
}

q {
  margin: 2rem 0;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  quotes: none;
}

blockquote {
    margin: 2.5rem 10px;
    padding: 0.5em 1rem;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: justify;
    word-spacing: -2px;
}

blockquote::before {
    content: "";
    position: absolute;
    transform: translateY(-20%) translateX(-20%);
    background-color: var(--blue);
    opacity: 0.1;
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

blockquote p {
    display: inline;
}


i {
  padding-right: 0.2rem;
}


video {
   display: block;
   max-width: 100%;
   height: auto;
   object-fit: cover;
}

img {
/*   image-rendering: -webkit-optimize-contrast;*/
   image-rendering: -moz-crisp-edges;
   image-rendering: crisp-edges;
}

small img{
  transform: scale(0.7);
}

.climb-cat {
  background-color: var(--pink);
  padding: 0.1rem 0.2rem 0.1rem 0.5rem;
  margin-right:0.25rem;
  border-radius: 1rem;
  letter-spacing: 0.5px;
  font-weight: 700;
  text-align: center;
}



.climb-cat-search {
  background-color: var(--pink);
  padding: 0.1rem 0.2rem 0.1rem 0.5rem;
  margin-right:0.25rem;
  border-radius: 0.8rem;
  letter-spacing: 0.5px;
  font-weight: 700;
  text-align: center;
}

.climb-must-ride-search {
    position: relative;
    bottom: 0.2rem;
    color: var(--blue);
    background-color: rgb(226 244 255);
    padding: 0.1rem 0.2rem 0.1rem 0.5rem;
    border: solid 2px var(--blue);
    margin-right: 0.25rem;
    border-radius: 0.8rem;
    letter-spacing: 0.5px;
    font-weight: 700;
    text-align: center;
    font-size: 0.8rem;
}



.climb-region-search {
    top: clamp(-0.3rem, 3vw, -1rem);
    opacity: 0.7;
}










/* MAINTENANCE */
.temp {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: auto;
    padding: 3rem 10px;
    width: 100%;
    max-width: 800px;
}

.temp span {
  padding: 3rem 0;
  width: 100%;
  background-color: var(--light-box);
  border-radius: 2rem;
  text-align: center;
  color: var(--primary);
} 
} 

@media only screen and (max-width: 800px) {
  .temp {
    display: flex;
    flex-direction: column;
  }
}

.fullcolour {
  background: var(--background-maintenance);
  color: var(--light);
  overflow-y: scroll;
}

.splash {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-align: center;
  width: 100vw;
  min-width: 320px;
  padding: 5rem 10px;
}

.splash-footer {
    font-size: 10px;
    color: var(--light-box);
    margin-top: auto;
    padding-top: 5rem;
}

.splash-back-form{
  position: fixed;
  top: 0;
  left: 0;
}

.splash-back-arrow{

  font-family: 'Montserrat Regular';
  font-size: 1.5rem;
  margin: 10px;
  font-weight: 200;
  font-size: 3rem;
  background-color: #ffffff00;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.25s ease-in-out;
}

.back-arrow:hover{
  opacity: 0.;
}



.splash-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 1rem;
}


.splash-container small a {
  font-weight: 800;
  text-decoration: underline;
}



.logo-ball {
    position: relative;
    width: clamp(170px,35vw,200px);
    height: clamp(170px,35vw,200px);
    border-radius: 50%;
    border: 5px solid var(--light);

}

.logo-ball span {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      width: 100%;
      height: 100%;
      background: var(--bg-ball);
      z-index: 1;
}


.logo-ball::before{
  content: '';
  position: absolute;
  top: 85px;
  left: 15%;
  width: 70%;
  height: 70%;
  background: rgb(196, 0, 163);
  box-shadow: -60px -55px 0 rgb(24, 160, 251);
  border-radius: 50%;
  animation: glowing 5s linear infinite;
  border: 5px solid var(--light);
}

.logo-ball::after{
      content: '';
      position: absolute;
      bottom: 85px;
      left: 15%;
      width: 70%;
      height: 70%;
      background: #2ee0ff;
      box-shadow: 60px 55px 0 #001c33;
      border-radius: 50%;
      animation: glowing 9s linear infinite;
}


@keyframes glowing
{
  0%
  {
    filter: blur(50px) invert(0%);
  }
  50%
  {
    filter: blur(40px) invert(50%);
  }
  100%
  {
    filter: blur(50px) invert(0%);
  }
}

.dashboard-login {
    font-family: 'Montserrat Regular', Arial, Helvetica, sans-serif;
    letter-spacing: -1px;
    font-size: clamp(1.2rem, 4vw, 1.4rem);
    font-weight: 300;
    opacity: 0.5;
    z-index: 2;
}

/* Elements */

.section {
   margin: 0 auto;
   padding: 6rem 0 1rem;
}

.menu-container {
   height: auto;
   margin: 0 auto;
   padding: 0 1.25rem;
}

.nav-logo{
    display: flex;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.nav-sbs-logo {
    position: fixed;
    top: 10px;
    left: 20px;
}

.nav-sbs-title {
    font-family: 'Bebas Neue Bold', Arial Bold, Helvetica, sans-serif;
    font-size: 2rem;
    position: relative;
    top: 3px;
    left: 30px;
    display: inline;
}


.nav-logo:focus, .nav-logo:hover{
    opacity: 0.6;
}

@media only screen and (max-width: 800px) {
    .nav-sbs-title {
        left: 60px;
    }
}

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
    color: white;
    width: 15px;
    height: 15px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* HEADER */

.pre-header {
    position: absolute;
    left: 0;
    top: -200px;
    width: 100%;
    height: 200px;
    background: radial-gradient(circle at left,rgba(0,28,51,1) 20%, rgb(87, 0, 72) 100% );
    border: none;
    z-index: var(--z-header);
}

.header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: var(--z-header);
    margin: 0 auto;
    color: var(--light);
    background: radial-gradient(circle at left,rgba(0,28,51,1) 20%, rgb(87, 0, 72) 100% ); 
    border-bottom: 1px solid white;
}


.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.4rem;
    padding: 0 1rem;
    margin: 0 2rem;
    margin-left: clamp(0rem, 1.5vw ,2rem);
    z-index: var(--z-navbar);
}

.menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100%;
    padding: 0rem 0 0 1rem;
    overflow-y: auto;
    transition: all 0.5s ease-in-out;
    color: inherit;
    z-index: var(--z-menu);
    background: var(--dark-blue);
    background: -moz-linear-gradient(180deg, var(--dark-blue) 0%, var(--sky-blue) 100%);
    background: -webkit-linear-gradient(180deg, var(--dark-blue) 0%, var(--sky-blue) 100%);
    background: linear-gradient(180deg, var(--dark-blue) 0%, var(--sky-blue) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#18a0fb",endColorstr="#2ee0ff",GradientType=1);
}

.menu.is-active{
    top: 0;
    left: 0;
    padding-top: 2rem;
}

.menu-inner{
    display: flex;
    flex-direction: column;
    row-gap: 1.2rem;
    margin: 0 1.2rem 0 0;
}

.menu-link {
    font-family: 'Montserrat Medium', Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.5;
    padding-left: 24px;
    text-transform: capitalize;
    color: var(--light);
}

.menu-link:hover{
    opacity: 0.7;
}



@media only screen and (min-width: 850px) {
    .menu{
        position: relative;
        top: 0;
        left: 0;
        width: auto;
        height: auto;
        margin-left: auto;
        background: none;
        box-shadow: none;
    }
    .menu-inner {
         display: flex;
         flex-direction: row;
    }

    .menu-link {
        text-transform: capitalize;
    }

    .menu-block {
        margin-left: 2rem;
    }
}


.dots {
   position: relative;
   display: block;
   cursor: pointer;
   order: -1;
   width: 1.75rem;
   height: auto;
   border: none;
   text-align: center;
   outline: none;
   visibility: visible;
}

@media only screen and (min-width: 850px) {
    .dots{
      display: none;
      visibility: hidden;
   }
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-menu-overlay);
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease-in-out;
}

.menu-overlay.is-active {
    display: block;
    opacity: 1;
    visibility: visible;
}

.buttons-container {
    min-width: 25rem !important;
    gap: 1px;
}

/* SEARCH BAR */

.search-home {
    margin-bottom: 1rem !important;
    text-align: left !important;
    min-width: 22rem !important;
    color: var(--mid) !important;
    font-size: 0.9rem !important;
    display: inline !important;
}

.search-cancel, .dashboard-icon {
    display: block;
    cursor: pointer;
    line-height: inherit;
    color: var(--light);
    opacity: 1;
    transition: all 0.25s ease-in-out;
    padding: 0.5rem;
    font-size: 1rem;
}

.search-block {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    z-index: var(--z-search-block);
    overflow: hidden;
    color: var(--light);
    background: var(--dark-blue);
    background: -moz-linear-gradient(180deg, var(--dark-blue) 0%, var(--sky-blue) 100%);
    background: -webkit-linear-gradient(180deg, var(--dark-blue) 0%, var(--sky-blue) 100%);
    background: linear-gradient(180deg, var(--dark-blue) 0%, var(--sky-blue) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#18a0fb",endColorstr="#2ee0ff",GradientType=1);
    transition: all 0.45s ease-in-out;
}

.search-block.is-active {
    top: 0;
    right: 0;
}

.search-form {
  font-family: 'Montserrat Medium', Arial, Helvetica, sans-serif;
  display: flex;
  justify-content:center;
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.75rem 1.5rem 0.75rem 1rem;
}

.search-input, .search-toggle {
  font-family: 'Montserrat Medium', Arial, Helvetica, sans-serif;
  display: block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  width: 60%;
  min-width: 300px;
  height: auto;
  padding: 0.65rem 1.25rem;
  margin: auto;
  border: none;
  outline: none;
  border-radius: 100px;
  color: var(--primary);
  background-color: var(--light);
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
  cursor: text;
}

.search-toggle {
    color: var(--primary);
    background-color: var(--light);
    min-width: 199px;
    font-size: 0.8rem;
    font-weight: 400;
    width: clamp(13rem, 25vw,25rem);
    margin: 0;
}

.search-toggle::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f002";
    position: relative;
    left: -1px;
    pointer-events: none;
    opacity: 0.8;
}

.search-input::-webkit-search-decoration, .search-input::-webkit-search-cancel-button {
    display: none;
    visibility: hidden;
}

#search-results {
    display: flex;
    flex-direction: column;
    min-width: 365px;
    width: 30vw;
    margin: 0 auto;
    z-index: 20;
}

#search-results a {
    padding: 15px 20px 15px 40px;
    margin: 5px auto;
    position: relative;
    background: var(--search-results);
    border-radius: 10px;
    transition: 0.25s background ease-in-out;
    min-width: 365px;
    transition: 0.25s all ease-in-out;
}

.search-instructions {
    margin-left: 15px;
}

.search-result-last-li {
    border-bottom: 1px solid rgb(26 138 166 / 50%);
}

.search-result-first-li {
    border-top: 1px solid rgb(26 138 166 / 50%);
    position: relative;
    top: -1px;
}

.result {
    font-family: 'Montserrat Medium', Arial, Helvetica, sans-serif;
    display: inline-block;
    width: 100%;
    color: var(--light);
    line-height: 1.1;
    min-width: 300px;
}

.result h2 {
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
    font-family: 'Montserrat Regular', Arial, Helvetica, sans-serif;
    text-transform: none;
}

.result h3 {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    text-transform: none;
}

.result small {
    position: relative;
    bottom: 1px;
    color: var(--light-box);
/*    font-size: clamp(0.7rem, 2vw, 0.9rem);*/
    opacity: 0.9;
}

.result small div{
  margin: 0.2rem 0rem 0rem 0.4rem;
  opacity: 0.8;
}

.result-region::before {
    position: absolute;
    left: 5px;
    top: 5px;
    color: var(--mid);
    font-weight: 900;
    z-index: -100;
    opacity: 0.5;
}

.result-region::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='17' cy='7' r='7' opacity='0.7' fill='white'/%3E%3Ccircle cx='20' cy='37' r='12' opacity='0.7' fill='white'/%3E%3Ccircle cx='35' cy='17' r='10' opacity='0.5' fill='white'/%3E%3Ccircle cx='35' cy='17' r='6' opacity='0.4' fill='white'/%3E%3C/svg%3E ");
}

.result-climb-data, .result-climb-data-gravel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    font-size: 12px;
    color: #666 !important;
    background-color: var(--light-box);
    margin: 3px;
    width: 300px;
    height: 28px;
    padding: 0px 15px 0px 1px;
    border-radius: 14px;
    font-weight: 400 !important;
    border: 1px solid var(--mid);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.result-climb-data:hover {
    background-color: var(--blue);
    color: var(--light) !important;
    border: 1px solid rgba(0,0,0,0);
}

.result-climb-feature-top-gravel-spot, .result-climb-feature-top-spot, .result-climb-feature-gravel-spot {
    font-size: 9px;
    margin: 1px;
    padding: 1px 3px 1px 3px;
    border-radius: 9px;
    font-weight: 400;
    color: var(--pink);
    background-color: #ffeafb;
    border: var(--pink) solid 2px;
}

.result-climb-data-gravel:hover {
    background-color: var(--pink) !important;
    color: var(--light) !important;
    border: 1px solid rgba(0,0,0,0);
}


.result-climb-feature-top-gravel-spot {
    width: 90px;
}

.result-climb-feature-gravel-spot {
    width: 70px;
}

.result-climb-feature-top-spot {
    color: var(--blue);
    background-color: #d5eeff;
    border: var(--blue) solid 2px;
    width: 66px;
}

.result-climb-data-cat {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 24px;
    width: 24px;
    font-size: 9px;
    border-radius: 12px;
}

.nav-regions::before, .nav-routes::before, .nav-calendar::before, .nav-dashboard::before, .nav-spots::before, .nav-about::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: relative;
    left: 18px;
    pointer-events: none;
    opacity: 0.8;
}

.nav-regions::before {
    content: "\f57d";
}

.nav-routes::before {
    content: "\f4d7";
}

.nav-calendar::before {
    content: "\f073";
}

.nav-dashboard::before {
    content: "\f625";
}

.nav-spots::before {
    content: "\f3c5";
}

.nav-about::before {
    content: "\f05a";
}



.nav-home {
    color: var(--light);
    line-height: 1.5;
    padding: 3rem 0.5rem;
    min-width: 320px;
    background-color: var(--dark-blue);
    text-align: center;
    border-top: 1px solid var(--light);
    border-bottom: 1px solid var(--light);
}

.nav-home-list::before {
    content: " • ";
}

/* BREADCRUMBS */

.breadcrumbs {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 30px;
  position: absolute;
  top: 4.4rem;
  color: var(--light);
  background: var(--dark-blue);
  z-index: var(--z-breadcrumbs);
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  background: radial-gradient(circle at left,rgba(0,28,51,1) 20%, rgb(87, 0, 72) 100% ); 
  text-align: left;
}


.breadcrumbs:after {
  position: absolute;
  width: 15%;
  height: 100%;
  right: 0;
  top: 0;
  content: "";
  
}

.breadcrumbs-list {
  position: relative;
  width: 100%;
  padding: 0 4rem;
  white-space: nowrap;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  margin-left: clamp(0rem, 1.5vw ,2rem);
}

.breadcrumbs-list li {
  font-size: 0.8rem;
  display: inline-block;
}

.breadcrumbs-list label {
  cursor: pointer;
}

.breadcrumbs-list li:before {
  content: " • ";
  padding: 0.2 0.25em 0 0.5em;
}

.breadcrumbs-list li.first:before, .breadcrumbs-list li.first:after {
  content: "";
}

.breadcrumbs-list li a{
  font-size: 0.8rem;
}

.selected{
  font-weight: 900;
}


.newsflash {
  font-size: 0.8rem;
  width: 100%;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.4rem;
  color: var(--mid);
}


.newsflash span{
  color: var(--blue);
}


@media only screen and (max-width: 800px) {
  .navbar{
    margin: 0 2rem 0 0.5rem;
  }

  .breadcrumbs-list{
    overflow-x: scroll;
    padding: 0 2rem;
  }
}

/* FOOTER */

footer {
    position: absolute;
    z-index: 1;
    margin: 25px auto;
    width: 100%;
    padding: 1rem 0;
    color: var(--mid);
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    font-size: 12px;
    background-color: var(--light);
}
  
footer ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 400px;
    width: 100%;
    list-style: none;
    padding: 20px;
  }

footer a {
  color: var(--mid);
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
  
footer img{
  fill: var(--primary);
}
  
.footer-bar{
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
  padding: 30px;
  border-bottom: var(--mid) solid 1px;
}

.footer-dashboard-control{
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding-bottom: 20px;
}

.dropdown-language {
    position: absolute;
    top: 24px;
    right: 17px;
}

.dropdown-languages {
    display: none;
    right: -10px;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 5px 5px;
    border-radius: 10px;
    z-index: 1;
    opacity: 0;
    transition: 0.2s ease-in-out all;
}

.dropdown-language:hover .dropdown-languages {
    display: block;
    opacity: 1;
}

.dropdown-languages img {
    padding: 5px 5px;
}



/* CONTENT */
.glow {
    box-shadow: 35vw -85vh 200vw 2vh var(--pink);
}

#banner, #form {
    padding: 0;
    width: 100%;
    min-height: 50vh;
    height: 100vh;
    color: var(--light);
}

.banner, #form{
    /* Display stuff */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    /* Positioning */
    position: relative;
    padding: 0 0.2rem 0 0.2rem;
    padding-bottom: 2.5rem;
    /* box-model stuff */
    width: 100%;
    min-height: 690px;
    height: 100vh;
    /* Typography */
    color: var(--light);
    text-align: center;
    /* Manipulation */
        /* Animations */
    /* Misc */
    /* ...then, alphabetical order within each */
}

.banner-sm{
    height:100px;
}

.banner q {
    max-width: 800px;
    font-size: 18px;
    margin: 0 0 1.5rem 0;
}


/* DETAIL VIEWS */
.region-details {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    margin: 0;
}

.region-content p {
    margin-bottom: 2rem;

}

.region-content img {
    padding-top: clamp(1rem, 5vw, 2.5rem);
    padding-bottom: clamp(1rem, 5vw, 2.5rem);
    width: 100%;
}
 .region-description, .region-content, .region-list, .calendar {
    width: 50%;
    padding-top: clamp(3rem, 5vw, 6rem);
    padding-bottom: clamp(3rem, 5vw, 6rem);
    padding-left: clamp(2rem, 5vw, 10rem);
    padding-right: clamp(2rem, 5vw, 6rem);
    background-color: var(--light-box);
}

.article-intro, .article-content {
    background: none;
    padding: 2rem 2rem;
    width: 800px;
    text-align: justify;
}

.article-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.article-media {
    min-width: 320px;
    height: 90vh;
    margin: 3rem 0;
}

.article-hotspots {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    min-width: 320px;
    gap: 25px;
    padding: 2rem 0;
}

.article-hotspots div {
    width: 100%;
}

.article-form {
    max-width: 400px;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.article-form small {
    padding: 1rem 0.5rem 0.5rem 0.5rem;
}

.region-description, .region-content, .region-list, .calendar {
    padding: 4.5rem;
}

/*.region-heading {
    width: 100%;
    padding-top: clamp(1rem, 5vw, 2rem);
    padding-bottom: clamp(1rem, 5vw, 2rem);
}*/

.region-list {
    width: 25%;
    background-color: var(--light);
    padding-top: clamp(1rem, 5vw, 2rem);
}

.region-list h4 {
    padding-top: 1rem;
}

@media (max-width: 1000px) {
    .region-list {
        width: 50%;
    }
}

@media (max-width: 800px) {
  .region-list {
      width: 100%;
      padding-left: 5rem;
  }
    .article-intro, .article-content {
        width: 100%;
        min-width: 300px;
    }
}

.article-content h2 {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    padding-top: 2rem;
}

.article-content h4 {
    text-transform: uppercase;
    text-align: center;
    font-size: clamp(1rem, 3vw, 1.3rem);
    padding: 1rem 10px;
}

.region-content table {
    margin-left: clamp(2rem, 4vw, 5rem);
}

.region-content tr {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-weight: 300;
    margin: 1rem 0;
}

.region-content th, .region-content td {
    font-weight: 300;
}

.region-content table a {
    font-weight: 300;
    margin: 0 0 0 0;
}


.region-widget {
    width: 50%;
    min-height: 415px;
    padding-top: clamp(3rem, 5vw, 6rem);
    padding-bottom: clamp(3rem, 5vw, 6rem);
    padding-left: clamp(1rem, 3vw, 6rem);
    padding-right: clamp(1rem, 3vw, 10rem);
    background-color: var(--light);
}

.home-media, .region-media, .region-zone-map {
    display: flex;
    flex-direction: column;
    justify-content: end;
    width: 100%;
    height: 90vh;
    background-size: cover;
    background-position: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    background-color: var(--dark-blue);
    transition: all 0.5s ease-in-out;
}

.home-media {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
}



.region-media h3 {
    color: var(--light);
    background-color: var(--foggy);
    padding: 1rem;
    width: 100%;
    opacity: 1;
    text-align: right;
    transition: opacity 0.25s ease-in-out;
}

.region-media small {
    color: var(--light);
    padding: 1rem;
    width: 100%;
    font-weight: 500;
    opacity: 0.7;
    text-align: left;
    transition: opacity 0.25s ease-in-out;
}

.region-media-half {
    width: 50%;
}

.region-media h3:hover {
    opacity: 0.8;
}


.media-video {
    position: relative;
    display: flex;
    justify-self: center;
    min-height: 100vh;
    min-width: 100vw;
    overflow: hidden;
    background-color: var(--primary);
}

.media-video:hover{
    opacity: 0.9;
}

.media-video__background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120vw;
    height: 100%;
    padding-bottom: 66.25%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.media-video__video-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-content: space-between;
}

.media-video__video-overlay--fadeOut {
    opacity: 0;
    visibility: hidden;
}

.media-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


.region-description {
    font-size: 1.5rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

.region-content p {
    text-align: justify;
}

.region-content a {
    position: relative;
    margin-top: 3rem;
}

.region-list-light {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--light);
}

.region-list-light-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--light-box);
}

/* PRESENTATION & SWITCHBACKSATURDAYS */


.collapsible, .noncollapsible {
    background-color: var(--light-box);
    padding: 0.5rem 1rem;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    margin: 1px;
}

.collapsible {
    cursor: pointer;
}

.collapsible::before {
    position: relative;
    left: -1%;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f078";
}

.content {
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    display: none;
    overflow: hidden;
}

.home-banner, .presentation-text, .presentation-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90vh;
    text-align: center;
    font-size: 1.2rem;
    gap: 2rem;
    padding: 4rem 2rem;
    min-width: 375px;
    /*z-index: -2;*/
}

.presentation-text small {
    font-size: 0.7rem;
    line-height: 1.5;
    opacity: 0.7;
}


.route-form, .routes-info {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    width: 100%;
    max-width: 340px;
    padding: 2rem 1rem 2.5rem 1rem;
    height: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    margin: 1rem;
}

.routes-info {
    width: 100%;
    max-width: 400px;
    min-width: 340px;
    padding: 3rem 1rem;
    background-color: var(--light);
}


.route-form .local-expert-img {
    position: absolute;
    top: -30px;
    left: -15px;
    width: 85px;
    height: 85px;
}


.routes-info p {
    font-size: 0.8rem !important;
    text-align: left;
}

.routes-info li{
    text-align: left;
    line-height: 2;
}

.region-heroshot {
    width: 100%;
    margin: 2rem 0;
}

.home-form {
    display: flex;
    justify-content: space-between;
    gap:5px;
    width: 365px;
    background-color: var(--purple);
    padding: 9px;
    border-radius: 40px;
}

.route-form h2 {
    font-size: 1.3rem !important;
    text-transform: none;
    max-width: 300px
}

.route-form h3 {
    font-size: 1.1rem;
    min-width: 300px;
    padding: 1rem 0 0.5rem 0 ;
}

.route-form p {
    margin: 0;
}

.route-form-input {
    width: 60% !important;
    min-width: 300px;
    min-height: 42px;
    max-height: 180px;
    margin: 0.2rem;
}

.article-form-input {
    min-width: 300px;
    margin: 0.2rem;
}


.route-form-filled {
    background-color: var(--light-form);
}

.route-form div {
    display: flex;
    text-align: left;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    width: 60%;
    min-width: 300px;
}

.route-form small {
    font-size: 0.75rem;
    margin: 0.5rem 0;
    min-width: 80px;
}

.route-map-nav-arrow-left {
    position: absolute;
    left: clamp(10px,4vw,50px);
    top: 50vh;
    color: var(--dark-blue);
    opacity: 0.1;
    transform: scale(2);
}

.route-map-nav-arrow-right {
    position: absolute;
    right: clamp(10px,4vw,50px);
    top: 50vh;
    color: var(--pink);
    opacity: 0.1;
    transform: scale(2);
}

.presentation-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    font-size: 1rem;
    padding: 1rem 1rem 1rem 3rem;
    text-align: left;
    min-height: 70vh;
    padding-left: clamp(2rem, 4vw, 5rem);
    padding-right: 1rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: var(--light-box);
}


.presentation-img {
    color: var(--light);
    background-color: var(--dark-blue);
    height: 90vh;
}

.presentation-img div {
    position: absolute;
    width:100%;
    opacity: 0.4;
}

/*.presentation-text div {
    position: absolute;
    height: 130%;
}*/

.presentation-text p, .presentation-img p {
    font-size: 1.2rem;
    max-width: 610px;
    margin: 1rem;
}

.presentation-img h2, .presentation-text h2, .calendar h3 {
    font-size: clamp(1.4rem, 5vw, 1.6rem);
    pointer-events: none;
    padding-top: 1rem;
}

.presentation-text label, .presentation-text a {
    z-index: 2;
}

.presentation-spots i {
    margin: 10px 0px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    color: var(--light);
    font-size: 20px;
    text-align: left;
}

.roadbook-presentation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    min-height: 100vh;
    text-align: center;
    padding: 2rem 1rem;
}

.roadbook-presentation p {
    font-weight: 700;
}



.sbs-bg {
    background: rgb(0,28,51) !important;
    background: -moz-linear-gradient(120deg, rgb(3 49 87) 10%, #0a65394d 100%) !important;
    background: -webkit-linear-gradient(120deg, rgb(3 49 87) 10%, #0a65394d 100%) !important;
    background: linear-gradient(120deg, rgb(3 49 87) 10%, #0a65394d 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#001c33",endColorstr="#06562e",GradientType=1) !important;
}

.sbs-bg-solid {
    background: rgb(0,28,51);
    background: -moz-linear-gradient(120deg, rgba(0,28,51,1) 10%, rgb(10 51 31) 100%) !important;
    background: -webkit-linear-gradient(120deg, rgba(0,28,51,1) 10%, rgb(10 51 31) 100%) !important;
    background: linear-gradient(120deg, rgba(0,28,51,1) 10%, rgb(10 51 31) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#001c33",endColorstr="#06562e",GradientType=1) !important;
}

.sbs-grid {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas:
        "sbs1 sbs2"
        "sbs3 sbs4"
        "sbs5 sbs6"
        "sbs7 sbs8";
}

@media (max-width: 800px) {
    .sbs-grid {
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas:
            "sbs1"
            "sbs2"
            "sbs4"
            "sbs3"
            "sbs5"
            "sbs6"
            "sbs8"
            "sbs7";
    }
}

.sbs-home-buttons{
    min-width:400px;
    gap: 1px;
}

.sbs-row-even, .sbs-row-odd {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.sbs-row-even {
    flex-direction: row-reverse;
}



.sbs-row-odd .home-banner,
.sbs-row-odd .presentation-list,
.sbs-row-odd .presentation-text,
.sbs-row-odd .home-media,
.sbs-row-odd .region-media,
.sbs-row-odd .region-content,
.sbs-row-even .home-banner,
.sbs-row-even .presentation-list,
.sbs-row-even .presentation-text,
.sbs-row-even .home-media,
.sbs-row-even .region-media {
    width: 50%;
    min-height: 90vh;
    height: auto;
    transition: all 0.5s ease-in-out;
}

.bg-img {
    width: 100%;
    height: 100%;
    min-height: 90vh;
    object-fit: cover;
    z-index: 2;
}
​
.front-img {
    position: absolute;
    z-index: 3;
}

​

.sbs-odd-bg {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1176.97 1166.57'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none%3B stroke: %2399999930%3B stroke-miterlimit: 10%3B stroke-width: 2px%3B %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M335.29 313.88c154.81 19.96 383.34 59.75 479.75 77.48 145 26.67 770.44 188.96-61.67 278.33C2.3 750.37 .04 748.03 .04 748.03'/%3E%3Cpath class='cls-1' d='M.04 284.47c218.33 25.22 392.14 65.46 488.55 83.19 141.41 26.01 772.78 174.7-61.67 268.33-50.88 5.71-139.29 15.42-139.29 15.42'/%3E%3Cpath class='cls-1' d='M185.8 12.78c62.57 8.19 132.73 19.88 167.98 25.85 53.02 8.97 281.54 72.13-24.62 85.11-254.79 10.8-261.13 11.79-261.13 11.79'/%3E%3Cpath class='cls-1' d='M60.04 .05c79.93 9.23 138.88 21.83 174.13 27.79 51.7 8.75 282.31 63.03-24.55 82.24-18.71 1.17-55.47 3.1-55.47 3.1'/%3E%3Cpath class='cls-1' d='M205.7 1082.52c134.47 8.98 258.51 18.97 372.87 29.33 170.56 15.46 340.49 33.68 509.8 54.67'/%3E%3C/svg%3E");
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.sbs-even-bg {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1176.97 1166.57'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none%3B stroke: %2399999930%3B stroke-miterlimit: 10%3B stroke-width: 2px%3B %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M841.68 313.88c-154.81 19.96-383.34 59.75-479.75 77.48-145 26.67-770.44 188.96 61.67 278.33 751.07 80.67 753.33 78.33 753.33 78.33'/%3E%3Cpath class='cls-1' d='M1176.93 284.47c-218.33 25.22-392.14 65.46-488.55 83.19-141.41 26.01-772.78 174.7 61.67 268.33 50.88 5.71 139.29 15.42 139.29 15.42'/%3E%3Cpath class='cls-1' d='M991.17 12.78c-62.57 8.19-132.73 19.88-167.98 25.85-53.02 8.97-281.54 72.13 24.62 85.11 254.79 10.8 261.13 11.79 261.13 11.79'/%3E%3Cpath class='cls-1' d='M1116.93 .05c-79.93 9.23-138.88 21.83-174.13 27.79-51.7 8.75-282.31 63.03 24.55 82.24 18.71 1.17 55.47 3.1 55.47 3.1'/%3E%3Cpath class='cls-1' d='M971.27 1082.52c-134.47 8.98-258.51 18.97-372.87 29.33-170.56 15.46-340.49 33.68-509.8 54.67'/%3E%3C/svg%3E");
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.sbs-row-odd .home-banner {
    color: var(--light) !important;
    min-height: 100vh;
    padding: 3rem;
}

@media (max-width: 800px) {
    .sbs-row-odd, .sbs-row-even {
        flex-direction: column;
    }

    .sbs-row-odd .home-banner,
    .sbs-row-odd .presentation-list,
    .sbs-row-odd .presentation-text,
    .sbs-row-odd .home-media,
    .sbs-row-odd .region-media,
    .sbs-row-odd .region-content,
    .sbs-row-even .presentation-list,
    .sbs-row-even .presentation-text,
    .sbs-row-even .home-media,
    .sbs-row-even .region-media {
        width: 100%;
        min-height: 550px;
    }
}

.sbs1 {
    grid-area: sbs1;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1176.97 1166.57'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none%3B stroke: %2399999930%3B stroke-miterlimit: 10%3B stroke-width: 2px%3B %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M841.68 313.88c-154.81 19.96-383.34 59.75-479.75 77.48-145 26.67-770.44 188.96 61.67 278.33 751.07 80.67 753.33 78.33 753.33 78.33'/%3E%3Cpath class='cls-1' d='M1176.93 284.47c-218.33 25.22-392.14 65.46-488.55 83.19-141.41 26.01-772.78 174.7 61.67 268.33 50.88 5.71 139.29 15.42 139.29 15.42'/%3E%3Cpath class='cls-1' d='M991.17 12.78c-62.57 8.19-132.73 19.88-167.98 25.85-53.02 8.97-281.54 72.13 24.62 85.11 254.79 10.8 261.13 11.79 261.13 11.79'/%3E%3Cpath class='cls-1' d='M1116.93 .05c-79.93 9.23-138.88 21.83-174.13 27.79-51.7 8.75-282.31 63.03 24.55 82.24 18.71 1.17 55.47 3.1 55.47 3.1'/%3E%3Cpath class='cls-1' d='M971.27 1082.52c-134.47 8.98-258.51 18.97-372.87 29.33-170.56 15.46-340.49 33.68-509.8 54.67'/%3E%3C/svg%3E");
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.sbs4 {
    grid-area: sbs4;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1176.97 1166.57'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none%3B stroke: %2399999930%3B stroke-miterlimit: 10%3B stroke-width: 2px%3B %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M335.29 313.88c154.81 19.96 383.34 59.75 479.75 77.48 145 26.67 770.44 188.96-61.67 278.33C2.3 750.37 .04 748.03 .04 748.03'/%3E%3Cpath class='cls-1' d='M.04 284.47c218.33 25.22 392.14 65.46 488.55 83.19 141.41 26.01 772.78 174.7-61.67 268.33-50.88 5.71-139.29 15.42-139.29 15.42'/%3E%3Cpath class='cls-1' d='M185.8 12.78c62.57 8.19 132.73 19.88 167.98 25.85 53.02 8.97 281.54 72.13-24.62 85.11-254.79 10.8-261.13 11.79-261.13 11.79'/%3E%3Cpath class='cls-1' d='M60.04 .05c79.93 9.23 138.88 21.83 174.13 27.79 51.7 8.75 282.31 63.03-24.55 82.24-18.71 1.17-55.47 3.1-55.47 3.1'/%3E%3Cpath class='cls-1' d='M205.7 1082.52c134.47 8.98 258.51 18.97 372.87 29.33 170.56 15.46 340.49 33.68 509.8 54.67'/%3E%3C/svg%3E");
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.sbs5 {
    grid-area: sbs5;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1225.52 1160.87'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none%3B stroke: %2399999930%3B stroke-miterlimit: 10%3B stroke-width: 2px%3B %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M1082.12 222.19c-83.92 3.72-207.84 11.88-260.12 15.56-78.64 5.54-418.02 41.61 32.19 72.21 406.37 27.62 346.2 26.77 346.2 26.77'/%3E%3Cpath class='cls-1' d='M1225.52 222.82c-118.34 4.5-174.36 8.13-226.64 11.81-76.69 5.4-419.23 37.91 32.23 69.63 27.53 1.93 81.71 4.6 81.71 4.6'/%3E%3Cpath class='cls-1' d='M1156.85 1088.69c-123.43 7.71-237.29 16.29-342.26 25.19-156.56 13.28-312.54 28.93-467.95 46.94'/%3E%3Cpath class='cls-1' d='M749.51 555.78c-137.96 12.63-341.62 37.79-427.53 49.01-129.22 16.87-685.29 101.14 54.96 176.06 329.04 33.3 758.58 28.5 758.58 28.5'/%3E%3Cpath class='cls-1' d='M981.6 546.79c-202.07 15.96-255.86 31.79-345.08 43.01-130.88 16.45-715.22 110.51 57.07 169.73 47.09 3.61 252.04 9.75 252.04 9.75'/%3E%3Cpath class='cls-1' d='M877.96 .05c39.08 7.52 75.2 14.16 108.55 20.08 49.74 8.83 99.4 17.14 149 24.93'/%3E%3Cpath class='cls-1' d='M1117.08 1044.51c-165.21 6.18-317.61 13.06-458.11 20.2-209.55 10.65-418.33 23.2-626.34 37.65'/%3E%3C/svg%3E");
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.sbs6 {grid-area: sbs6;}
.sbs7 {grid-area: sbs7;}
.sbs8 {grid-area: sbs8;}

.sbs8 {
    grid-area: sbs8;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1168.16 1168.46'%3E%3Cpath d='M335.36 314.82c154.81 19.96 383.34 59.75 479.75 77.48 145 26.67 705.07 188.27-127.04 277.64-751.07 80.68 480 113 480 113' style='fill: none%3B stroke: %2333333330%3B stroke-miterlimit: 10%3B stroke-width: 2px%3B'/%3E%3Cpath d='M.11 285.41c218.33 25.22 392.14 65.46 488.55 83.19 141.41 26.01 772.78 174.7-61.67 268.33-1155.92 112.05 741.08 278.01 741.08 278.01' style='fill: none%3B stroke: %2333333330%3B stroke-miterlimit: 10%3B stroke-width: 2px%3B'/%3E%3Cpath d='M269.36 22.17c104.1 13.63 220.84 33.08 279.49 43.01 88.22 14.92 468.43 120.01-40.96 141.61-423.92 17.97-434.47 19.62-434.47 19.62' style='fill: none%3B stroke: %2333333330%3B stroke-miterlimit: 10%3B stroke-width: 2px%3B'/%3E%3Cpath d='M60.11 .99c132.99 15.36 231.07 36.32 289.72 46.24 86.02 14.56 469.71 104.87-40.85 136.83-31.13 1.95-92.29 5.16-92.29 5.16' style='fill: none%3B stroke: %2333333330%3B stroke-miterlimit: 10%3B stroke-width: 2px%3B'/%3E%3Cpath d='M205.77 1083.46c134.47 8.98 258.51 18.97 372.87 29.33 170.56 15.46 340.49 33.68 509.8 54.67' style='fill: none%3B stroke: %2333333330%3B stroke-miterlimit: 10%3B stroke-width: 2px%3B'/%3E%3C/svg%3E");
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.presentation-list ol {
    font-size: 1rem;
    gap: 1rem;
}

.presentation-list li {
    margin: 20px 0;
}


.calendar {
    background-color: var(--light);
    font-size: 1rem;
}

.calendar h2 {
    font-family: 'Bebas Neue Bold', Arial Bold, Helvetica, sans-serif;
    font-size: clamp(4rem, 2vw, 5rem);
    padding: 0.5rem;
    letter-spacing: -0.05rem;
    line-height: 0.75;
    }

.calendar li {
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    margin: 0.6rem 0;
    font-weight: 700;
}

.calendar strong {
    font-size: clamp(1rem, 2vw, 1.2rem);
    padding: 1rem 0.5rem;
}

.calendar small {
    padding: 1rem 0.5rem;
}

#calendar-top {
    display: none;
    position: fixed;
    top: 10px;
    width: 50px;
    height: 50px;
    text-align: center;
    right: 20px;
    z-index: 99;
    font-size: 14px;
    outline: none;
    background-color: var(--menu-bg);
    border: 1px solid var(--light-box);
    color: var(--light-box);
    cursor: pointer;
    border-radius: 30px;
    padding-left: 3px;
}

/* CLIMB DETAIL STATS */

.spot-summary {
    display: grid;
    width: 100%;
    grid-template-columns: 40% 20% 40%;
    grid-template-areas:
        "spot-overview spot-stats spot-expert";
    background-color: var(--light-box);
    padding-top: 0rem;
}

@media (max-width: 1200px) {
    .spot-summary {
        grid-template-columns: 100%;
        grid-template-areas:
            "spot-overview"
            "spot-stats"
            "spot-expert";
        padding-top: 2rem;
    }
}

.spot-overview {
    grid-area: spot-overview;
    width: 100%;
    font-size: clamp(1.1rem, 2vw, 1.2rem);
    text-align: center;
    display: flex;
    align-items: center;
    padding-left: clamp(3rem, 8vw, 10rem);
    padding-right: clamp(3rem, 8vw, 10rem);
    transition: all 0.3s ease-in-out;
    padding-bottom: 1rem;
}


.spot-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem 1rem 1rem;
    font-size: 12px;
    width: 100%;
}


.spot-stats table, .spot-stats-btn, .spot-stats-info {
    min-width: 320px;
    width: 100%;
    max-width: 500px;
    text-align: center;
    border-collapse: collapse !important;
}

.spot-stats-info {
    margin: 5px;
}


.spot-stats tr, .spot-stats-btn{
    background-color: var(--light);
    height: 36px;
    border-radius: 18px;
    text-align: left;
    width: 100%;
    border-top:    2px solid var(--light-box);
    border-bottom: 1px solid var(--light-box);
}

.spot-stats tr{
    transition: 0.4s all ease-in-out;
}

.spot-stats tr:hover {
    background-color: #fff;
}

.spot-stats-report, .spot-stats-btn, #climb-status {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#climb-status {
    flex-direction: column;
}

.spot-stats-btn i, .spot-stats-btn strong {
    margin: 5px;
}

.spot-stats-report strong {
    padding-left: 5px;
}

.spot-stats-btn {
    color: var(--light);
    background-color: var(--mid);
}


.spot-stats-title {
    padding-left: 20px;
}

.spot-stats th {
    border-radius: 18px 0 0 18px;
    width: 45%;
    font-weight: 100;
}

.spot-stats td {
    border-radius: 0 18px 18px 0;
    position: relative;
    font-family: 'Montserrat Medium';
}

.spot-stats div {
    text-align: center;
    width: 100%;
}

.spot-stats-climb-cat::before,
.spot-stats-surface::before,
.spot-stats-summit-elev::before,
.spot-stats-length::before,
.spot-stats-avg-grad::before,
.spot-stats-length::before,
.spot-stats-elev-gain::before,
.spot-multiple-routes::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: relative;
    left: 15px;
    padding-right: 20%;
    pointer-events: none;
    opacity: 0.8;
}

.spot-stats-climb-cat::before {
    content: "\f192";
}

.spot-stats-surface::before {
    content: "\f206";
}

.spot-stats-summit-elev::before {
    content: "\f176";
}

.spot-stats-length::before {
    content: "\f07e";
}

.spot-stats-avg-grad::before {
    content: "\e4b7";
}

.spot-stats-elev-gain::before {
    content: "\f07d";
    left: 20px;
}

.spot-multiple-routes::before {
    content: "\f277";
    left: 20px;
}

.spot-expert {
    grid-area: spot-expert;
    width: 100%;
    display: flex;
    padding-top: clamp(0rem, 5vw, 2rem);
    padding-bottom: clamp(1rem, 5vw, 2rem);
    justify-content: center;
    align-items: center;
}

/* WIDGET VIEWS */

.products-container {
    padding: 2rem;
    gap:1rem;
}

.products-deck {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 300px;
}

.product-card {
    display: grid;
    width: 100%;
    min-width: 320px;
    max-width: 600px;
    min-height:310px;
    text-align: left;
    grid-template-columns: 50%;
    grid-template-rows: auto;
    grid-template-areas:
        "product-heading    product-heading"
        "product-tagline    product-tagline"
        "product-features   product-price";
    padding: 2rem;
    margin: 2rem 1rem;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.02);
}

.dashed-border {
    border: 1px dashed var(--mid);
}

.product-card h3 {
    grid-area: product-heading;
    font-size: clamp(1.2rem, 4vw, 1.8rem);
    line-height: 1;
    margin: 0 0 0.5rem 0;
}

.product-card h3 a {
    font-size: clamp(0.8rem, 3vw, 1rem);
    color: var(--blue);
}

.product-card-tagline {
    grid-area: product-tagline;
    font-size: 0.8rem;
    line-height: 1.8;
    padding: 0;
    font-weight: 700;
}

.product-card ul {
    grid-area: product-features;
}

.product-card li {
    font-size: 0.8rem;
    line-height: 1;
    padding: 0.4rem 0.2rem 0 1rem;
}


.product-card .checkmark::before {
    position: relative;
    left: -5px;
    font-family: "Font Awesome 5 Free";
    content: "\f058";
    color: var(--green);
}

.product-price {
    grid-area: product-price;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding: 1rem;
}
.product-price div{
    font-size: 1.5rem;
    font-weight: 700;
}

@media (max-width: 630px) {
    .product-card {
        width: auto;
        grid-template-columns: 100%;
        grid-template-areas:
            "product-heading"
            "product-tagline"
            "product-features"
            "product-price";
    }
}


.widget-biz-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 250px;
    padding: 3rem 1rem;
    color: var(--light);
    background: radial-gradient(circle at left,rgba(0,28,51,1) 20%, rgb(87, 0, 72) 100% );
    border-top: 1px solid var(--light);
}

.widget-biz-panel h3, .widget-biz-panel p {
    text-align: center;
    font-size: 1rem;
}

.widget-biz-panel p {
    max-width: 500px;
    margin: 2.5rem 0 1rem 0;
}

.widget-biz-tagline {
    position: relative;
    min-width: 350px;
    top: -15px;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: clamp(1px, 0.8vw, 5px);
    text-transform: uppercase;
    line-height: 1.6;
    padding: 0 0.5rem;
    margin-top: clamp(0.6rem, 5vw, 0.2rem);
    text-align: center;
}

.widget-biz-listings {
    display: flex;
    justify-content: center;
    text-align: center;
    flex-grow: 1;
    color: var(--light);
    flex-wrap: wrap;
    max-width: 1330px;
}

@media (max-width: 1300px) {
    .widget-biz-listings{
        width: 700px;
    }
}

@media (max-width: 700px) {
    .widget-biz-listings{
        width: 320px;
    }
}

.widget-biz-listings h5 {
    min-width: 100%;
    margin: 1rem 0 0.5rem 0;
}

.widget-biz-list {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    font-size: 12px;
    width: 320px;
}

.widget-biz-list a, .widget-biz-list button {
    background-color: var(--blue);
    min-height: 36px;
    border-radius: 18px;
    width: 100%;
    line-height: 1.2;
    padding: 0.25rem 1.5rem;
    margin: 1px;
}

.widget-biz-list a {
    text-align: left;
    color: var(--primary);
    background-color: var(--light-box);
}

.widget-biz-card {
    display: grid;
    background-color: var(--light-box);
    color: var(--primary);
    font-size: 12px;
    text-align: left;
    padding: 1rem;
    width: 320px;
    border-radius: 18px;
    margin: 5px;
}

.widget-biz-regions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    flex-direction: row;
    text-align: center;
    margin: 2rem 0 0 0;
}

.widget-biz-regions div {
    margin-bottom: 3rem;
}

.widget-biz-region {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem 0;
    min-width: 320px;
}



.widget-local-expert {
    display: grid;
    min-width: 320px;
    max-width: 500px;
    grid-template-columns: 100%;
    grid-template-areas:
        "expert-photo"
        "expert-text"
        "expert-foot";
    text-align: center;
    font-size: clamp(0.8rem, 5vw, 1rem);
    margin: auto;
}

.widget-local-expert img, .local-expert-img {
    grid-area: expert-photo;
    margin: 10px auto;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--dark-blue);
    text-align: center;
    border: solid 3px var(--blue);
}


.widget-local-expert p {
    grid-area: expert-text;
    padding: 0;
    margin: 0;
}

.widget-local-expert div {
    grid-area: expert-foot;
    text-align: center;
    padding: 15px;
}

.widget-planning p {
    text-align: justify;
    word-spacing: -2px;
}

.widget-planning h4 {
    padding: 4rem 0 0rem 0;
}

.widget-planning h5 {
    color: var(--mid);
    padding: 1rem 0;
}

.widget-planning ol {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    margin: 2rem;
    position: relative;
}

.widget-planning-zone {
    display: flex;
    align-items: end;
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    background-color: var(--dark-blue);
    transition: all 0.5s ease-in-out;
}

.widget-planning-zone:hover, .widget-planning-zone:focus {
    opacity: 0.7;
}

.region-widget .months {
    display: flex;
    margin: 2rem 0;
    max-width: 600px;
}

.widget-planning .months button {
    flex-grow: 1;
    margin: 0.5px;
    border-radius: 35px;
    transition: opacity 0.25s ease-in-out;
    width: clamp(25px,6vw,45px);
    height: clamp(25px,6vw,45px);
}

.widget-planning .months button:hover, .widget-planning .months button:focus {
    opacity: 0.7;
}

.widget-planning p {
    margin: 1rem 0;
}


.condition3 {
    background-color: #70AD47;
}

.condition2 {
    background-color: #A8D08D;
}

.condition1 {
    background-color: #FFE599;
}

.condition0 {
    background-color: #F7CAAC;
}

.preselected-month {
    -webkit-box-shadow: inset 0px 0px 0px 3px #ffffff50;
    -moz-box-shadow: inset 0px 0px 0px 3px #ffffff50;
    box-shadow: inset 0px 0px 0px 3px #ffffff50;
}

.selected-month, selected-spots {
    z-index: 100;
    -webkit-box-shadow: 0px 0px 0px 3px #000;
    -moz-box-shadow: 0px 0px 0px 3px #000;
    box-shadow: 0px 0px 0px 3px #000;
}

.widget-zone-spots p {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 1rem 0 1rem 0;
}


.widget-planning a, .widget-zone-spots a {
    background-color: var(--mid);
    height: 100%;
}

.widget-planning p a {
    background: none;
    color: var(--blue);
    text-decoration: underline;
}

.widget-planning-link {
    display: flex;
    width: 300px;
    flex-direction: column;
}

@media (max-width: 800px) {
    .widget-planning-link {
        width: 100%;
        text-align: center;
    }
}

.phone {
    -webkit-animation: vibrate 4s cubic-bezier(.36, .07, .19, .97) infinite;
    animation: vibrate 4s cubic-bezier(.36, .07, .19, .97) infinite;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 300px;
    perspective: 300px;
}


@keyframes vibrate {
    0%, 2%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18% {
        -webkit-transform: translate3d(-1px, 0, 0);
        transform: translate3d(-1px, 0, 0);
    }

    1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19% {
        -webkit-transform: translate3d(1px, 0, 0);
        transform: translate3d(1px, 0, 0);
    }

    20%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


.roadcycling {
    padding: 11px 0 0 10px;
    background-color: #18A2FF;
}

.gravel {
    padding: 11px 0 0 10px;
    background-color: #184BFF;
}

.accommodation {
    padding: 11px 0 0 10px;
    background-color: var(--accommodation);
}

.bikes {
    padding: 12px 0 0 11px;
    background-color: var(--bikes);
}

.shops {
    padding: 12px 0 0 10px;
    background-color: var(--shops);
}

.wellbeing {
    padding: 12px 0 0 10px;
    background-color: var(--wellbeing);
}

.tourism {
    padding: 12px 0 0 10px;
    background-color: var(--tourism);
}

@media (max-width: 800px) {
    .region-details {
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .region-description, .region-content, .region-widget {
        width: 100%;
        padding-left: clamp(1rem, 5vw, 6rem);
        padding-right: clamp(1rem, 5vw, 10rem);
    }

    .calendar {
        width: 100%;
        padding: 2rem 2.5rem;
    }

    .widget-planning ol {
        flex-direction: column;
    }

    .region-media-half {
        width: 100%;
    }
}

.detail-container {
    display: grid;
    grid-template-columns: auto 450px;
    grid-template-rows: auto 100%;
    grid-template-areas:
        "description summary"
        "content  summary";
    padding-top: clamp(2rem, 4vw, 3rem);
    padding-right: clamp(1.5rem, 4vw, 2rem);
    padding-left: clamp(1.5rem, 4vw, 2rem);
    max-width: 1200px;
}

.detail-description {
    grid-area: description;
    padding-top: 2rem;
    padding-right: clamp(1rem, 5vw, 3rem);
    padding-left: clamp(1rem, 5vw, 3rem);
    padding-bottom: 2rem;
}

.detail-content {
    grid-area: content;
    padding-top: 0rem;
    padding-right: clamp(1rem, 5vw, 3rem);
    padding-left: clamp(1rem, 5vw, 3rem);
    padding-bottom: 2rem;
}

    /* ...to conttol html loaded in from db */
    .detail-content ul {
        display: flex;
        flex-direction: column;
        row-gap: 1rem;
    }

        .detail-content ul li {
            display: flex;
            flex-direction: column;
        }

/*   .detail-summary {
    grid-area: summary;
}

.detail-summary-panel {
    display: flex;
    flex-direction: column;
    max-width: 380px;
    font-size: 0.9rem;
    margin: auto;
}

    .detail-summary-panel h2 {
        margin-top: 2rem;
    }


.detail-summary-icons {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    justify-content: center;
    margin: 1rem 0 0.5rem 0;
}


    .detail-summary-icons button, .detail-summary-icons label {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 40px;
        height: 40px;
        color: var(--mid);
        border-radius: 50%;
        border: 1px solid var(--mid);
        padding-left: 5px;
        opacity: 1;
    }

    .detail-summary-icons label {
        color: var(--light);
        border: none;
    }

.cycling-button-selected i {
    color: var(--light);
    opacity: 1;
    border: none;
}

.gravel-button-selected i {
    background-color: var(--blue);
    opacity: 1;
    border: none;
}

.detail-summary-icons .cycling-button:hover, .cycling-button-selected {
    background-color: var(--blue);
    color: var(--light);
    opacity: 1;
    border: none;
}



.detail-summary-icons .accommodation-button:hover, .accommodation-button-selected {
    background-color: var(--accommodation);
    color: var(--light);
    opacity: 1;
    border: none;
}

.detail-summary-icons .bikes-button:hover, .bikes-button-selected {
    background-color: var(--bikes);
    color: var(--light);
    opacity: 1;
    border: none;
}

.detail-summary-icons .shop-button:hover, .shop-button-selected {
    background-color: var(--shops);
    color: var(--light);
    opacity: 1;
    border: none;
}

.detail-summary-icons .wellbeing-button:hover, .wellbeing-button-selected {
    background-color: var(--wellbeing);
    color: var(--light);
    opacity: 1;
    border: none;
}

.detail-summary-icons .tourism-button:hover, .tourism-button-selected {
    background-color: var(--tourism);
    color: var(--light);
    opacity: 1;
    border: none;
}

.detail-summary-panel label, .detail-summary button {
    font-family: inherit;
    text-align: left;
    opacity: 1;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
    padding-left: 0.2rem;
}

    .detail-summary-panel label:hover, .detail-summary button:hover {
        opacity: 0.5;
    }

.detail-summary-panel small {
    color: var(--mid);
    font-size: 0.7rem;
}*/


/* always within detail-content */
.detail-curator {
    width: 100%;
    padding: 2.5rem 3rem;
    background-color: var(--light-box);
    border-radius: 2rem;
    margin: 0 0 2.5rem 0;
}


.detail-desktop-only {
    display: inline;
}


.detail-mobile-only {
    display: none;
}


@media (max-width: 800px) {
    .detail-container {
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas:
            "description"
            "summary"
            "content";
    }

    .detail-desktop-only {
        display: none;
    }

    .detail-mobile-only {
        display: inline;
    }

    .search-toggle {
        display: block;
        cursor: pointer;
        line-height: inherit;
        opacity: 1;
        transition: all 0.25s ease-in-out;
        padding: 0.5rem 0.5rem 0.5rem 0.7rem;
        width: 2.2rem;
        min-width: 2.2rem;
        text-align: center;
    }
    .search-home {
        display: inline !important;
        min-width: 20rem;
    }
}

#search-input::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f044";
    position: absolute;
    top: 10px;
    left: 10px;
    opacity: 0.4;
    z-index: 100;
}


/* DETAILS TEXT EDITORS */

/* .description-text {
display: flex;
flex-direction: column;
gap: 10px;
padding: 1rem 3rem;
text-align: justify;
} */







.edit-button {
    position: absolute;
    width: 50%;
    height: 50%;
    max-height: inherit;
    cursor: pointer;
    font-size: 4rem;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

    .edit-button::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f044";
        position: absolute;
        top: 10px;
        left: 10px;
        opacity: 0.4;
    }


.text-editor, .textarea-editor, select-menu {
    font-family: inherit;
    width: 100%;
    outline: none;
    resize: vertical;
    padding: 0.8rem 25px;
    padding-left: clamp(20px, 4vw, 25px);
    font-size: 0.8rem;
    line-height: 1.5;
    border-radius: 1.5rem;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background-color: var(--light);
}



.number-editor {
    font-family: inherit;
    width: 75px !important;
    min-width: 75px !important;
    outline: none;
    resize: vertical;
    padding: 0.8rem 15px 0.8rem 25px;
    padding-left: clamp(20px, 4vw, 25px);
    font-size: 0.8rem;
    line-height: 1.5;
    border-radius: 1.5rem;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background-color: var(--light-form);
}

.route-form-selector, .route-form-input, .article-form-selector, .home-form-selector {
    width: 100%;
    font-family: inherit;
    outline: none;
    resize: vertical;
    padding: 0.8rem 15px 0.8rem 25px;
    padding-left: clamp(20px, 4vw, 25px);
    font-size: 0.7rem;
    line-height: 1.5;
    border-radius: 1.5rem;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    margin: 0 0.5rem;
    background-color: var(--light-form);
    color: var(--primary);
}

.home-form-selector, .home-form-input{
    height: 2.2rem;
    padding: 0.3rem 0.5rem 0.3rem 11px;
    width: 105px;
    margin: 0;
    border-radius: 1rem;
}

.home-form-input {
    width: 180px !important;
}

.text-editor, .textarea-editor, select-menu, .route-form-selector, .number-editor {
    outline: 2px solid #ffffff00;
    outline-offset: -2px;
    transition: outline 0.25s ease-in-out
}

.text-editor:focus, .textarea-editor:focus, select-menu:focus, .route-form-selector:focus, .number-editor:focus {
    outline: 2px solid var(--mid);
    outline-offset: -2px;
}

@media (min-width: 800px) {
    .content:hover > .edit-button, .region-description:hover > .edit-button {
        display: block;
        opacity: 1;
    }
}


@media (min-width: 800px) {
    .description-text:hover > .edit-button {
        display: block;
        opacity: 1;
    }
}

.submit-button {
    font-family: inherit;
    font-weight: 700;
    width: 100%;
    text-align: center;
    color: var(--light);
    margin: 1px;
}


/*TBC Delete?*/

.form-multiline {
    font-family: inherit;
    width: 100%;
    outline: none;
    resize: vertical;
    padding: 1rem 25px;
    font-size: inherit;
    line-height: 1.5;
    border-radius: 1.5rem;
    appearance: none;
    text-align: justify;
    word-spacing: -2px;
    -webkit-appearance: none;
    border: none;
    background-color: #ffffffcc;
    margin: 1rem 0;
}

.contact-message {
    max-width: 320px;
    text-align: left;
}

.form-singleline {
    font-family: inherit;
    width: 100%;
    max-width: 400px;
    outline: none;
    resize: vertical;
    padding: 5px 5px;
    font-size: inherit;
    line-height: 1.5;
    border-radius: 5px;
    appearance: none;
    text-align: justify;
    word-spacing: -2px;
    -webkit-appearance: none;
    border: none;
}


/* DASHBOARD */

#dashboard {
    display: grid;
    grid-template-columns: 310px auto 460px;
    grid-template-rows: 200px auto auto 100%;
    grid-template-areas:
        "menu   header    header"
        "menu   body      sidebar"
        "menu   footer    sidebar";
    padding-top: 100px;
    margin-bottom: 2rem;
    min-height: 100vh;
    background: var(--bg-foggy);
    color: var(--light);
}


#dashboard-menu {
    display: block;
    grid-area: menu;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    width: 100%;
    font-size: clamp(0.8rem, 3vw, 1rem);
    padding: 1.5rem 2rem 3rem 3.6rem;
    background-color: var(--menu-bg);
    z-index: var(--z-dashboard-menu);
    background: -moz-linear-gradient(180deg, var(--menu-bg) 0%, #ffffff00 80%);
    background: -webkit-linear-gradient(180deg, var(--menu-bg) 0%, #ffffff00 80%);
    background: linear-gradient(180deg, var(--menu-bg) 0%, #ffffff00 80%);
    font-family: 'Montserrat Medium';
    padding-top: clamp(0.2rem, 3vw, 3rem);
    color: var(--light);
    transition: background-color 0.5s ease-in-out;
    font-family: 'Montserrat Medium';
}

.dashboard-menu h4 {
    padding-top: 20px;
}

.dashboard-menu a i {
    opacity: 0.8;
    padding: 0 0.5rem;
}

.dashboard-menu a span {
    position: relative;
    right: 19px;
    top: -12px;
    font-size: 0.5rem;
    color: var(--pink);
}


#dashboard-header {
    grid-area: header;
    padding: 0 3rem;
    padding-top: clamp(3rem, 5vw, 5rem);
}

#dashboard-content {
    grid-area: body;
    padding: 1rem 1.5rem 7rem 3rem;
}

#dashboard-sidebar {
    grid-area: sidebar;
    padding: 1rem 3rem 3rem 1.5rem;
}

#dashboard-sidebar small {
    opacity: 0.7;
}

#dashboard-analytics {
    grid-area: body;
    margin: 1rem;
    width: auto;
}

.dashboard-analytics-basic {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
}

#dashboard-analytics-advanced {
    grid-area: footer;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 1rem 3rem 1rem;
    width: auto;
}

.dashboard-stat {
    font-family: 'Bebas Neue Bold', Arial Bold, Helvetica, sans-serif;
    flex-grow: 1;
    padding: 1rem;
    background-color: var(--light-box);
    color: var(--primary);
    font-size: 5rem;
    border-radius: 10px;
    text-align: center;
    min-height: 10rem;
}

.dashboard-graph {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    padding: 2rem;
    background-color: var(--light-box);
    color: var(--primary);
    border-radius: 10px;
    text-align: center;
    font-size: 0.8rem;
    width: 40%;
    min-height: 25rem;
}

.dashboard-stat-graph {
    padding-bottom: 1rem;
}

.dashboard-graph ul, .dashboard-graph ol {
    padding: 1rem 0;
    width: 100%;
}

.dashboard-graph li {
    width: 100%;
    margin: 1px
}

.dashboard-graph canvas {
    padding: 1rem;
}



.dashboard-graph li a, .dashboard-graph li span {
    display: block;
    width: 100%;
    padding: 0.3rem 0.7rem;
    text-align: left;
    background-color: var(--light);
}

.dashboard-stat h3 {
    font-family: 'Montserrat Medium';
}

.dashboard-stats-legend {
    background-color: var(--light-box);
    color: var(--primary);
    font-size: 0.8rem;
    gap: 1rem;
    border-radius: 10px;
    margin: 0rem 1rem 1rem 0;
    padding: 2rem !important;
}

.dashboard-stats-legend h2 {
    font-size: 1.2rem;
}


@media (max-width: 1200px) {
    #dashboard {
        display: grid;
        grid-template-columns: 300px auto;
        grid-template-rows: 140px auto auto auto;
        grid-template-areas:
            "menu header"
            "menu body"
            "menu footer"
            "menu sidebar";
    }

    #plans {
        grid-area: plans;
    }

    #dashboard-content {
        grid-area: body;
        padding: 1rem 3rem 3rem 3rem;
    }

    #dashboard-sidebar {
        grid-area: sidebar;
        padding: 1rem 3rem 3rem 3rem;
    }
}

@media (max-width: 800px) {
    #dashboard {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 100px auto auto auto;
        grid-template-areas:
            "header"
            "body"
            "footer"
            "sidebar";
    }

    #dashboard-content {
        grid-area: body;
        padding: 2rem 1.5rem 0 1.5rem;
    }

    #dashboard-sidebar {
        grid-area: sidebar;
        padding: 2rem 1.5rem 2rem 1.5rem;
    }

    #dashboard-menu {
        display: none;
    }

    #dashboard-analytics {
        width: clamp(93vw, 93vw, 98vw);
    }

    #dashboard-analytics-advanced {
        width: 93vw;
    }

    .dashboard-graph {
        width: 100%;
    }

    .dashboard-stats-legend {
        margin: 0rem 1rem 2rem 1rem;
    }
}

.dashboard-analytics-legend-warning {
    background: var(--blue);
    border-radius: 5px;
    padding: 1.5rem;
    margin-top: 2rem;
}

button .bg-blue:hover {
    background-color: var(--dark-blue);
}


.dashboard-home-list-item, .dashboard-content-list-item, .dashboard-dynamic-list-item, .dashboard-content table tr, .dashboard-btn {
    font-family: inherit;
    font-weight: 700;
    text-align: left;
    width: 100%;
    min-width: 305px;
    padding: 0.75rem;
    line-height: 1.25;
    margin: 1px 0px;
    background-color: var(--light-box);
    color: var(--primary);
    opacity: 1;
    transition: all 0.25s ease-in-out;
}

.dashboard-content table tr {
    background-color: #ffffff00;
}

.price-tally {
    text-align: right;
    margin: 0 1.5rem 1.5rem 0;
}

.price-tally h2 {
    margin-top: 0.5rem;
}


.dashboard-btn {
    text-align: center;
}

.dashboard-climb-cat, .dashboad-route-status {
    background-color: var(--pink);
    font-size: 0.75rem;
    color: var(--light);
    padding: 0.1rem 0.4rem 0.1rem 0.4rem;
    margin-right: 0.25rem;
    border-radius: 1rem;
    letter-spacing: 0.5px;
    font-weight: 700;
    text-align: center;
    z-index: var(--z-dashobard-cat);
}

.dashboard-content {
    display: flex;
    flex-direction: column;
    z-index: 10;
}


.dashboard-content h1 {
    font-family: Montserrat Medium;
    font-size: clamp(24px, 3vw, 35px);
}

.dashboard-content small {
    opacity: 0.7;
    font-weight: 700;
}

.dashboard-dynamic-list-item .bg-blue a small {
    color: var(--light-box);
}

.dashboard-content p {
    margin: 0.5rem 1rem 1rem 1.5rem;
}

.dashboard-home-list-item {
    background-color: #99999900;
    color: var(--primary);
    font-size: 1.5rem;
}



/* DELETE DASHBOARD PLANS once Product cards are done*/

.dashboard-plans {
    min-width: 400px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
        "plan1    plan2     plan3     plan4 ";
    gap: 2rem;
}


.dashboard-plans .dashboard-plan, .dashboard-plans #current-plan {
    position: relative;
    width: 100%;
    min-height: 280px;
    border-radius: 20px;
    margin: 1rem auto;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.02);
    transition: all 0.25s ease-in-out;
    bottom: 0px;
    z-index: 1;
    background-color: var(--light)
}


.dashboard-plans div {
    padding: 1rem 0 0 1rem;
    font-size: 0.75rem;
}

.dashboard-plans li {
    padding: 0.4rem 0.2rem 0 1rem;
}

.dashboard-plans li::before {
    position: absolute;
    left: 14px;
    font-family: "Font Awesome 5 Free";
    content: "\f058";
    color: var(--green);
}

.dashboard-plans h3 {
    width: 100%;
    height: 60px;
    padding: 0.9rem;
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.dashboard-plans h4{
    font-size: 1.15rem;
    line-height: 3;
}

.dashboard-plan:hover {
    bottom: 5px;
    box-shadow: 0 16px 24px 0 rgba(0,0,0,0.1);
    opacity: 1;
}

.dashboard-plans-description {
    padding: 6rem 1rem 3rem 1rem;
    text-align: center;
}

.dashboard-plans-description i {
    font-size: 5rem;
    padding: 0 0 4rem 0;
    color: var(--dark-blue);
}

@media (max-width: 1600px) {

    .dashboard-plans {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas:
            "plan1  plan2 "
            "plan3  plan4 ";
    }
}

@media (max-width: 500px) {

    .dashboard-plans {
        min-width: 200px;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "plan1"
            "plan2"
            "plan3"
            "plan4";
    }
    .dashboard-plans .dashboard-plan, .dashboard-plans #current-plan {
        width: 70vw;
    }
}

#current-plan {
    border: 2px solid lightgrey;
    background-color: var(--light-box) !important;
    box-shadow: none;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(30deg);
    }
    80% {
        transform: translateX(-100%) translateY(-100%) rotate(30deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(30deg);
    }
}

.box--gradient {
    display: flex;
    height: 300px;
    position: relative;
    width: 300px;
    z-index: 0;
    overflow: hidden;

    p {
        align-items: center;
        align-content: center;
        justify-content: center;
        text-align: center;
        flex-grow: 1;
        margin: 0;
        font-size: 30px;
    }

    &:after {
        content: '';
        top: 0;
        transform: translateX(100%) rotate(30deg);
        width: 300%;
        height: 300%;
        position: absolute;
        z-index: 1;
        animation: shine 3s infinite ease-in;
        background: linear-gradient( to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(128,186,232,0) 100%);
    }

    &#bronze {
        background: linear-gradient( to bottom, #b08d57, #d6bb85, #b08d57);

    }

    &#silver {
        background: linear-gradient( to bottom, #bcc6cc, #eee, #bcc6cc);
        &:after {
        animation-delay: 1s;
        }
    }

    &#gold {
        background: linear-gradient( to bottom, #c39738, #deb761, #c39738);
        &:after {
            animation-delay: 2s;
        }
    }
}

.recommended {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0.5rem;
    border-radius: 0 0 20px 20px;
    text-align: center;
    font-size: 0.8rem;
    margin: 0;
}


/* DELETE DASHBOARD PLANS once Product cards are done*/

.must-ride {
    background-color: var(--blue);
    color: var(--light-box);
}

.must-ride b {
    color: var(--light-box);
    color: var(--light);
}

.dashboard-content-list-item h4 {
    padding: 0 0 0 0;
}

.dashboard-content table {
    font-size: inherit;
    width: 100%;
}


.dashboard-content table td {
    font-size: inherit;
    word-wrap: break-word;
    font-size: clamp(0.9rem, 3vw, 1rem);
}

.dashboard-business-status {
    position: relative;
    bottom: 2px;
    font-size: 0.7rem;
    padding: 3px 9px;
    border-radius: 5rem;
    gap: 2px;
}

.dashboard-checklist li {
    padding: 1rem;
}

.dashboard-checklist-pending {
    opacity: 0.5;
}


.dashboard-box {
    align-items: center;
    gap: 1rem;
    margin: auto;
    padding: 3rem 10px;
    width: 100%;
    max-width: 800px;
    background-color: var(--light-box);
    border-radius: 2rem;
    color: var(--primary);
    text-align: center;
}

.dashboard-review-items {
    width: 100%;
}

.dashboard-review-items tr {
    display: flex;
    justify-content: space-between;
}

.dashboard-review-items tr td {
    cursor: pointer;
    text-align: right;
    padding: 0.5rem;
}


.dashboard-form-table {
    width: 100%;
    padding: 0.5rem;
}

.dashboard-form-table td {
    padding: 0.5rem;
}


.dashboard-form-table td input, .dashboard-form-table td b, .dashboard-form-table td select, .dashboard-form-table td textarea {
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    background-color: #ffffff50;
    color: var(--primary);
    width: 100%;
    padding: 12px 12px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}



.dashboard-form-table td b {
    color: #cccccc;
}

.dashboard-mobile-only {
    display: none;
}

.dashboard-mobile-only li {
    font-size: clamp(12px, 3vw, 16px);
}

.dashboard-desktop-only {
display: inline;
}

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

.dashboard-warning i {
    opacity: 0.8;
}

.dashboard-criteria b {
opacity: 1;
}

/* The container */
.spot-checkbox-container {
    display: block;
    position: relative;
    right: 0px;
    cursor: pointer;
    width: 100%;
    height: 0px;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.spot-checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.spot-checkbox {
    position: absolute;
    top: -40px;
    right: 0;
    height: 22px;
    width: 22px;
    background-color: var(--light-box);
    border-radius: 5px;
    transition: background-color 0.25s ease-in-out;
    opacity: 0.9;
}

/* On mouse-over, add a grey background color */
.spot-checkbox-container:hover input ~ .spot-checkbox {
    background-color: var(--mid);
}

/* When the checkbox is checked, add a blue background */
.spot-checkbox-container input:checked ~ .spot-checkbox {
    background-color: var(--blue);
}

/* Create the checkmark/indicator (hidden when not checked) */
.spot-checkbox:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.spot-checkbox-container input:checked ~ .spot-checkbox:after {
    display: block;
}

/* Style the checkmark/indicator */
.spot-checkbox-container .spot-checkbox:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


.spot-list-button {
    border-radius: 0 0 10px 10px;
    width: 100%;
    height: 100%;
    background-color: var(--light);
    color: var(--primary);
    text-align: center;
}

.spot-list-button:hover {
    background-color: var(--blue);
    color: var(--light);
}




.loading-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #f3f3f350;
}

#spinner {
    position: absolute;
    transform: translate(0, -40%);
}

@media (max-width: 800px) {

    #dashboard-header {
        padding: 3.5rem 0 0 2.5rem;
    }

    .dashboard-mobile-only {
        display: inline;
    }

    .dashboard-desktop-only {
        display: none;
    }

    .dashboard-content {
        padding-top: 3rem;
        min-width: 300px;
    }

    .dashboard-form-table td textarea {
        width: 100%;
        height: 120px;
    }

    .form-multiline {
        margin: 1rem 0;
    }

    .data {
        padding: 1.5rem 2rem;
    }
}


.dashboard-dynamic-list-item:hover {
    cursor: -webkit-grab;
    cursor: grab;
}

.dashboard-dynamic-list-item:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

/* ARTICLES NOT USED...check REGION text */ 
#article {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    margin-bottom: 2rem;
}

#article a, #article span {
    z-index: 10;
}

#article h1 {
    max-width: 1400px;
    z-index: 10;
    padding: clamp(0rem 0.5rem 0.5rem 0.5rem, 5vh, 0rem 1rem 1rem 1rem);
    text-align: center;
    scale: 0.8;
    color: var(--primary);
}

#article h2 {
    padding: 3rem 0 0 0;
}

#article .byline {
    font-size: 0.8rem;
}

#article article {
    text-align: justify;
    word-spacing: -2px;
    max-width: 800px;
    padding: 0 2rem 2rem 2rem;
}

.img-fade, .text-fade {
    width: 100%;
    max-width: 800px;
    z-index: 100;
    max-width: 800px;
    position: relative;
    z-index: 1;
}

.img-fade {
    margin: 4.3rem auto auto auto;
}

.img-fade img, .text-fade img {
    z-index: 1;
    object-fit: cover;
    width: 100%;
    max-width: 800px;
    max-height: 300px;
}

.img-fade::before, .text-fade::before {
    content: '';
    background: -moz-linear-gradient(180deg, rgba(243,243,243,0) 50%, var(--light) 93%);
    background: -webkit-linear-gradient(180deg, rgba(243,243,243,0) 50%, var(--light) 93%);
    background: linear-gradient(180deg, rgba(243,243,243,0) 50%, var(--light) 93%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f3f3f3",endColorstr="#ffffff",GradientType=1);
    position: absolute;
    height: 300px;
    right: 0;
    bottom: 0;
    left: 0;
}

.img-fade::after, .text-fade::after {
    content: '';
    display: block;
    z-index: 1;
}

/* FORMS */

#form form li {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: stretch;
    padding: 10px;
}

    #form form li label {
        min-width: 100px;
    }

.form {
    width: 300px;
    position: relative;
    height: 65px;
    overflow: hidden;
}

.form input {
    font-size: 1rem;
    width: 100%;
    height: 100%;
    color: var(--mid);
    padding-top: 30px;
    border: none;
    outline: none;
    background-color: #ffffff00;
    padding-left: 5px;
    -webkit-appearance: none;
}


.form label {
    position: absolute;
    font-size: 14px;
    bottom: 0px;
    left: 0%;
    width: 110%;
    height: 100%;
    pointer-events: none;
    border-bottom: 1px solid var(--mid);
    padding-left: 5px;
}

.form label span {
    color: #999999;
    padding-left: 5px;
}

.form label::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: -1px;
    width: 100%;
    height: 100%;
    border-bottom: 3px solid var(--blue);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.content-text {
    position: absolute;
    bottom: 5px;
    left: 0px;
    transition: all 0.3s ease;
}


.form input:focus + .label-text .content-text, .form input:valid + .label-text .content-text {
    transform: translateY(-150%);
    font-size: 14px;
    color: rgba(47,130,227);
}

.form input:focus + .label-text::after, .form input:valid + .label-text {
    transform: translateX(0%);
}

.formError {
    width: 100%;
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    color: var(--red);
}

.formError small {
    font-size: 0.8rem;
    justify-content: center;
    color: var(--red)
}

.form-link {
    font-weight: 700;
    text-decoration: underline;
}

.form-text {
    padding-top: 1rem;
    width: 300px;
}

.form-textbox input {
    font-size: 1rem;
    width: 300px;
    height: 100%;
    padding: 0.75rem;
    margin: 5px 0;
    border: none;
    outline: none;
    background-color: #dbd1df;
    border-radius: 10px;
    -webkit-appearance: none;
}

.form-textbox input::placeholder, .textarea-editor::placeholder, .text-editor::placeholder {
    color: var(--mid);
    transition: color 0.2s ease-in-out;
}

.form-textbox input:focus::placeholder, .textarea-editor:focus::placeholder, .text-editor:focus::placeholder {
    color: #cccccc;
}

.form-text input {
    padding: 0 2px;
}


span.deleteicon {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 60vw;
    min-width: 300px;
}

span.deleteicon span {
    position: absolute;
    display: block;
    right: 15px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    color: #fff;
    background-color: #ccc;
    font: 14px monospace;
    text-align: center;
    line-height: 1em;
    cursor: pointer;
}

span.deleteicon input {
    padding-left: 40px;
    box-sizing: border-box;
    width: 60vw;
    min-width: 300px;
}

span.deleteicon::before {
    position: absolute;
    left: 16px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f002";
    color: var(--mid);
    z-index: 1;
}

/* PAGES */

#banner p {
    max-width: 500px;
    font-size: clamp(0.9rem, 3vw, 1rem);
    padding: 0 1rem;
    background-color: var(--dark-blue);
}


.banner_map {
    position: absolute;
    width: 100%;
    min-height: 50vh;
    height: 100vh;
    bottom: 0;
    left: 0;
    z-index: -100;
    text-align: center;
    background-color: var(--light);
}

.zone-map {
    width: 100%;
    min-height: 50vh;
    height: 100vh;
    bottom: 0;
    left: 0;
    z-index: -100;
    text-align: center;
    background-color: var(--dark-blue);
}

.routes-region-map {
    pointer-events: none;
    user-select: none;
    width: 100%;
    height: 100%;
    background-color: var(--light);
}


.banner_profile {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 120px;
    height: 100%;
    max-width: 1000px;
}


.banner_map img {
    padding-top: 40vh;
    animation: fadeIn 2s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


#main {
    max-width: 800px;
    margin: auto;
}



#policies, #site-map {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10rem 0 0 3rem;
    margin-bottom: 5rem;
}

#policies div h1, #site-map div h1 {
    color: var(--primary);
    font-size: 3rem;
    margin-bottom: 2rem;
}

#policies div h3 {
    font-size: 1rem;
    margin-top: 3rem;
}

#policies div, #site-map div {
    max-width: 800px;
}

#policies ul li, #site-map ul li {
    margin-left: 2rem;
    margin-top: 1rem;
    list-style: circle inside;
}

#site-map {
    font-size: 0.8rem;
}

#site-map {
    background-color: var(--light-box);
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

#site-map ul {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
}





/* CARDS */

.deck {
    display: flex;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 1rem auto;
    gap: 2rem;
    padding: 0 1rem;
}

.deck-single {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    text-align: center;
    margin: 1rem 3rem;
    gap: 2rem;
}

.card {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
    gap: 1rem;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.05);
    transition: 0.4s ease-in-out all;
    border-radius: 10px;
}

.card-highlighter {
    border: 5px solid var(--blue);
    border-radius: 15px;
}


.card-live:hover {
    opacity: 0.8;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
}

.card .card-heroshot {
    height: 200px;
    object-fit: cover;
    width: 100%;
    border-radius: 10px 10px 0 0;
}

.card div {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    color: var(--primary);
    font-size: 0.9rem;
}

.card-summary {
    padding: 0 1rem 1rem 1rem;
}

.card span {
    color: var(--mid);
    font-size: 0.8rem;
    margin-bottom: 2rem;
}

.card p {
    font-size: 0.8rem;
    font-weight: 700;
    text-align: left;
    margin: 1rem 0 1rem 1rem;
}

.link-between-cards {
    width: 100%;
}


/* MAP MODAL */
/* This relates to the popout mappy */
#modal, #modal_accommodation {
    position: absolute;
}

#htmx_modal {
    position: fixed;
}

.wrap {
    padding: 1em;
}

@media (min-width: 43.75em) {
    .wrap {
        padding: 2em;
    }
}

.modal {
    display: block;
    padding: 0 1em;
    text-align: center;
    width: 100%;
}

@media (min-width: 43.75em) {

    .modal {
        padding: 1em 2em;
        text-align: right;
    }
}

.modal > label {
    background: #000;
    border-radius: .2em;
    color: #FFDE16;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin: 0.5em 1em;
    padding: 0.75em 1.5em;
    -webkit-transition: all 0.55s;
    transition: all 0.55s;
}

.modal > label:hover {
    -webkit-transform: scale(0.97);
    -ms-transform: scale(0.97);
    transform: scale(0.97);
}

.modal input {
    position: fixed;
    right: 100px;
    top: 30px;
    z-index: -10;
}

.modal__overlay {
    background: black;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    z-index: -800;
}

.modal__box {
    position: relative;
    width: 100%;
    height: 100vh;
}

@media (min-height: 37.5em) {
    .modal__box {
        left: 50%;
        position: absolute;
        top: 80vh;
        -webkit-transform: translate(-50%, -80%);
        -ms-transform: translate(-50%, -80%);
        transform: translate(-50%, -80%);
    }
}

@media (min-width: 5em) {
    .modal__box label {
        background: var(--light);
        border-radius: 50%;
        color: var(--primary);
        cursor: pointer;
        display: inline-block;
        height: 2rem;
        width: 2rem;
        line-height: 1.95em;
        position: absolute;
        right: 1.5rem;
        top: 1.5rem;
    }

    .modal__box h2 {
        color: #FFDE16;
        margin-bottom: 1em;
        text-transform: uppercase;
    }

    .modal__box p {
        color: #FFDE16;
        text-align: left;
    }

    .modal__overlay {
        opacity: 0;
        overflow: hidden;
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
        transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
    }

    input:checked ~ .modal__overlay {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
        transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
        z-index: 800;
    }

    input:focus + label {
        -webkit-transform: scale(0.97);
        -ms-transform: scale(0.97);
        transform: scale(0.97);
    }
}

/* COOKIE MODAL */




/* OVERRIDES */

.dark, .dark a {
    color: var(--primary);
}

.mid, .mid a {
    color: var(--mid);
}

.light, .light a {
    color: var(--light);
}

.blue, .blue a {
    color: var(--blue);
}

.pink, .pink a {
    color: var(--pink);
}

.orange, .orange a {
    color: var(--orange);
}

.red, .red a {
    color: var(--red);
}

.gold, .gold a {
    color: var(--gold);
}

.green, .green a {
    color: var(--green);
}

.bg-gold {
    background-color: var(--gold);
}

.bg-foggy {
    background: rgba(0,28,51,0.8);
    background: var(--bg-foggy);
    width: 100%;
    height: 100%;
}

.bg-extra-foggy {
    background: rgba(0,28,51,0.8);
    background: var(--bg-extra-foggy);
    width: 100%;
    height: 100%;
}

.bg-light {
    background-color: var(--light) !important;
    color: var(--primary) !important;
}

.bg-light-box {
    background-color: var(--light-box) !important;
    color: var(--primary) !important;
}

.bg-mid {
    background-color: var(--mid) !important;
    color: var(--light);
}

.bg-dark {
    background-color: var(--primary) !important;
    color: var(--light) !important;
}


.bg-dark-blue {
    background-color: var(--dark-blue) !important;
    color: var(--light) !important;
}

.bg-purple {
    background-color: var(--purple) !important;
    color: var(--light) !important;
}

.bg-green {
    background-color: var(--green) !important;
    color: var(--light) !important;
}

.bg-orange {
    background-color: var(--orange) !important;
    color: var(--light) !important;
}

.bg-red {
    background-color: var(--red) !important;
    color: var(--light) !important;
}

.bg-blue, .bg-blue b {
    background-color: var(--blue) !important;
    color: var(--light) !important;
}

.bg-pink {
    background-color: var(--pink) !important;
    color: var(--light) !important;
}

.bg-pink:hover {
    background-color: var(--purple) !important;
    color: var(--mid) !important;
    opacity: 1 !important;
}

.rounded {
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

.htmx-indicator {
    padding: 1rem 0 0 0;
    margin: auto;
    text-align: center;
}

#fade-in.htmx-added, .fade-in.htmx-added {
    opacity: 0;
}

#fade-in, .fade-in {
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.fade-out.htmx-swapping {
    opacity: 0;
}

.fade-out {
    opacity: 1;
    transition: opacity 0.5s ease-in;
}


    
.offscreen {   /* Used to hide activation keys in dashboard business static list */
    position: absolute;
    left: -999em;
}

/* ANIMATIONS */

.reveal, small .reveal {
    position: relative;
    transform: translateY(100px);
    opacity: 0 !important;
    transition: 1s all ease;
}


.reveal.active {
    transform: translateY(0);
    opacity: 1 !important;
}

small .reveal.active {
    transform: translateY(0);
    opacity: 0.7 !important;
}


/* FORMATTING STANDARD */
/* .name{ */
/* Display stuff */
/* display: flex; */
/* justify-content: flex-start; */
/* align-items: center; */
/* flex-direction: column; */
/* gap: 10px; */

/* Positioning */
/* padding-top: 43vh;
left: 0;
z-index: 15; */

/* box-model stuff */
/* width: 100%; */
/*min-height: 100vh; */

/* Typography */
/* color: var(--primary); */
/* text-align: center; */

/* Manipulation */
/* Animations */

/* Misc */

/* ...then, alphabetical order within each */
/* } */