html {
         scroll-behavior: smooth;
      }

      body {background-color:#161616;
             color: #e6e6e6;
             font-family: Verdana, Arial, sans-serif;
             font-size:100%;
             margin-bottom: 1em;
             }

      h2 {font-weight: normal;
           color: #ff88c4;
           text-transform: uppercase;
          }

      h2.day {color: #ffffff;
              text-transform:none;}

      h3 {font-weight: bold;
          font-size: 100%;
          color: #ffffff;
          margin-top:2em;
          margin-bottom:2em;
          }


      h4 {font-weight: bold;
          font-size: 100%;
          color: #ff88c4;
          margin-top: 0em;
          margin-bottom: 2em;
          }

      h5 {color: #ff88c4;
          font-size: 100%;
          font-weight: normal;
          margin-top: 2em;
          margin-bottom: 1em;
          font-variant: small-caps;
      }


      ul {
         margin-left:2em;
      }

   p.popup {
     color:#000;
     line-height:1.5;
   }

      p {font-size: 100%;
         color: #e6e6e6;
         }

      a {font-weight: normal;
         color: #0be;
         text-decoration: none;
         transition:1.0s;
         cursor: pointer;}

      a:hover {
         color: #ff88c4;
         transition:1.0s;
      }

   b.day {
   font-weight:bold;
   color:#ff88c4;
   }

   p.tutor {
      line-height:1.5;
   }

   b.tutor {
      font-weight:bold;
      color:#0be;
   }

   h3.cost {
      font-size: 150%;
      font-weight:bold;
      color:#161616;
      margin-top:0.5em;
      margin-bottom:0.5em;
   }


   b.offer,
   b.cost{
      font-weight:bold;
      color:#ff88c4;
   }

   b.note {
      font-weight:bold;
      font-variant: small-caps;
      color:#0be;
   }



   div.main {
      margin:auto;
   }

   div.nav {
      position:fixed;
   }

   div.nav.desktop {
      top:100px;
      left:0;
      background-color:#ff88c4;
   }

   div.nav.mobile {
      bottom:0;
      left:0;
      width:100%;
      background-color:#ff88c4;
   }

   div.banner {
      width:100%;
      background-color:#079;
      border-style:solid;
      border-width: 0px 0px 6px 0px;
      border-color:#fff;
      text-align:left;
      position:fixed;
      padding-top: 0.25em;
      padding-bottom: 0.5em;
      top:0;
      left:0;
   }

   span.banner {
      font-weight:normal;
      color: #fff;
   }

   div.centred {
      width: 80%;
      margin-left:auto;
      margin-right:auto;
      text-align:center;
   }

   div.blurb {
      margin-bottom:4em;
      width:80%;
      margin:auto;
   }

   div.cost {
      padding-top: 16px;
      background-color: #fff;
      width: 80%;
      border-radius: 8px;
      border-style: solid;
      border-width: 4px;
      border-color: #0be;
      padding: 1em;
      margin:auto;
   }


   div.day {
      width: 80%;
      border-radius: 8px;
      border-style: solid;
      border-width: 4px;
      padding: 2em;
      margin-bottom: 2em;
   }

   div.day.scheduled {
      border-color: #ff88c4;
   }

   div.day.planned {
      border-color: #3b3b3b;
   }

   div.itenary {
      margin-left:2em;
      margin-right:2em;
   }

   div.break {
      padding-top:2em;
      padding-bottom:2em;
   }

   div.footer {
      position:fixed;
      bottom:0px;
      left:0px;
      background-color: #079;
      margin-top:2em;
      width:100%;
      padding-top: 0.5em;
      padding-bottom: 0.5em;
      color: #fff;
      text-align: right;
   }


      div.modal {
         display: none; 
     position: fixed; 
     z-index: 1; 
     left: 0%;
     top: 0%;
     width: 100%; 
     height: 100%; 
     overflow: auto; 
     background-color: rgb(0,0,0); /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
   }
      

   div.activity-detail {
     background-color: #fff;
     color:#000 !important;
     margin: 15% auto; /* 15% from the top and centered */
     padding: 20px;
     border: 6px solid #079;
     border-radius:16px;
     width: 80%; /* Could be more or less, depending on screen size */
   }


   .close {
     color: #aaa;
     float: right;
     font-size: 28px;
     font-weight: bold;
   }

   .close:hover,
   .close:focus {
     color: black;
     text-decoration: none;
     cursor: pointer;
   }


   p.cost {
      color:#000;
   }


   span.footer {
      padding-right:2em;
      text-decoration: none;
      font-weight:bold;
      color: #fff;
   } 

   span.footer a {
      text-decoration: none;
      font-weight:bold;
      color: #fff;
   }

   hr.break {
      height:2px;
      width:67%;
      margin:auto;
      background-color:#fff;
   }

   img {
      padding-left:0.25em;
   }

   img.flyout {
      height:16px;
   }
   
   img.flyout:hover {
      cursor:pointer;
   }

   .button {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 100%;
  cursor: pointer;
  background-color: #ff88c4;
   }

   .button.desktop {
     display:block; 
     margin-top:0.5em;
     margin-bottom:0.5em;
   }

   .button.mobile {
  width:23%;
  display: inline-block;
  padding-top:1em;
  padding-left:0em;
  padding-right:0em;
  padding-bottom:1em;
   }

  .button.desktop.active,
  .button.mobile.active {
     background-color:#161616;
  }


   .button.register {
      margin-top: 0.5em;
      padding: 0.5em;
      background-color:#0be;
      border-radius: 8px;
      font-size:125%;
   }

   li.home {
      padding: 0.5em;
   }

@media screen and (max-width: 600px) {
   div.nav.desktop {
      display: none;
   }
   div.nav.mobile {
      display: block;
   }

   div.footer {
      display:none;
   }

   div.main {
      padding:4em 0em 4em 0em;
      width:100%;
   }

   h2 {
      font-size: 150%;
   }

   img.logo {
      height:18px;
   }

   span.banner {
      font-size: 125%;;
   }

}

@media screen and (min-width:601px) {
   div.nav.mobile {
      display:none;
   }
   div.nav.desktop {
      display: block;
   }

   div.main {
      padding:4em;
      width:80%;
   }


   h2 {
      font-size: 300%;
   }

   span.banner {
      font-size: 250%;
   }

   .button {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  }
}