* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  html {
      scroll-behavior: smooth;

  }

  body {

      font-family: "Inter", sans-serif;
      font-size: 15px;
  }



  h1 {
      font-size: 2rem;
      color: #ff8900;
      font-weight: 400;

  }

  header h1 {
      padding-top: 1.2em;
  }

  header a {
      text-transform: uppercase;
      text-decoration: none;
      padding: .5em .75em;
      color: #888;
  }

  article > p {
      line-height: 1.5em
  }

  nav {
     
      text-align: center;
      padding-top: 2em;
      letter-spacing: 1px;
line-height:28px;
  }

  h4 {
      font-family: "Dancing Script", cursive;
      color: #7d00d0;
      font-size: 2rem;
  }


  #logo {
      width: 100px;
      float: left;
      margin-top: 10px;
      margin-right: 1rem
  }

  article,
  header {
      max-width: 800px;
      margin: auto;

  }

  main {
      min-height: 100vh;
      padding-bottom: 50px;
  }

  section {
      padding: 2rem 0;
  }

  section.tight {
      padding-bottom: 3px;
  }

  #barbara {
      float: right;
      margin-left: 1rem;
      width: 250px;
      margin-top: -100px;
      position: relative;
      z-index: 20;
  }

  video {
      margin-top: -30px;
  }

  p {
      margin-bottom: 1rem;
  }

  .shaded {
      background-color: #ffe4b9;
      clear: both;
  }

  .lite {
      font-weight: 200;
  }

  .tri-column {
      column-count: 3;
      text-align: center;
  }

  .bi-column {
      column-count: 2;
      text-align: center;
  }

  .tri-column div,
  .bi-column div {
      break-inside: avoid;
      padding: 1rem;
  }

  .tri-column img {
      width: 80px;
  }

  .purple,
  .blue {

      color: #fff;
      border: 3px solid;
      font-size: 1em;
      padding: 2rem 0;

  }

  .bluecaps {
      text-transform: uppercase;
      color: #0061e7;
  }

  h1.bluecaps {
      margin-bottom: .5em;
  }

  .purple {
      background-color: #7d00d0;
      border-color: #7d00d0;
      margin-left: 1rem;
  }

  .purp {
      color: #7d00d0
  }

  .blue {
      background-color: #0061e7;
      border-color: #0061e7;
      margin-right: 1rem;
  }

  h2 {
      line-height: 1.5rem;
      margin-bottom: .3rem;

  }

  h3 {
      font-weight: 400;
      font-size: 1.75rem;
      margin-bottom: .66rem;

  }



  input,
  textarea {
      font-size: 1.1rem;
      display: inline-block;
      margin: 8px 5px;
      border: 1px solid #000;
      padding: 5px;

  }

  input[type="submit"] {
      border: 0px;
      background-color: #2e91ff;
      color: #fff;
      ;
      padding: .5rem 2rem;
      float: right;
      cursor: pointer;
      border-radius: 6px;
  }

  select {
      font-size: 1.2rem;
  }


  .p100 {
      width: 98%;
  }

  .p50 {
      width: 48%;
  }

  .p40 {
      width: 34%;
  }

  .p10 {
      width: 13%;
  }

  footer {
      height: 50px;
      background-color: #444341;
      color: #7b7b7b;
      line-height: 50px;
      padding-left: 3rem;
      margin-top: -50px;
  }

  .hpt {
      display: none;
  }

  p.micetype {
      margin-top: 2rem;
      font-size: .66rem;
  }



  /* slide carousel */

  figure {
      position: absolute;
      width: 40%;
      padding: 50px 0 0 75px;
      min-width: 400px;

  }

  figure.fullwidth {
      width: 90%;
      padding-left: 3em;
  }

  figure h2 {
      color: #fff;
      font-weight: 900;
      font-size: 3em;
      line-height: 1em;
      text-shadow: 2px 2px 4px rgba(62, 40, 6, 0.66);
      text-transform: uppercase;
  }

  /* attribution*/
  figure h3 {
      color: #000;
      font-weight: 300;
      text-align: right;
      padding-right: 3em;
  }

  /*quote*/
  figure h4 {
      font-family: "Inter", sans-serif;
      text-shadow: 2px 2px 4px rgba(62, 40, 6, 0.66);
      color: #fff;
      text-indent: -1.5em;
      font-size: 3em;
      margin-top: 1em;
      margin-bottom: 1em;
      padding-left: 3em;
  }

  figure h4 span:before {
      content: url('img/slideshow/quote.png');
  }

  figure h4 span:after {
      content: url('img/slideshow/close-quote.png');
      display: inline-block;
      vertical-align: text-top;
      margin-left: 1.5em;


  }

  .carousel-container {
      overflow: hidden;
      position: relative;
      width: 100%;
      background: #ffb301;
  }

  .carousel {
      display: flex;
      transition: transform 0.3s ease-in-out;
      position: relative;
  }

  .slide {
      flex: 0 0 100%;
      justify-content: center;
  }

  .slide img {
      max-width: 100%;
      float: right;
  }

  .slide,
  .slide img {
      max-height: 480px;
  }

  .indicators {
      display: flex;
      justify-content: center;
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
  }

  .indicator {
      width: 10px;
      height: 10px;
      margin: 0 5px;
      background-color: rgb(132, 132, 132);

      border-radius: 50%;
      cursor: pointer;
  }

  .active {
      background-color: #fefefe;
  }

  li {
      margin: 0 0 .2em 1em;
  }




  @keyframes fade {
      0% {
          opacity: 0;
          transform: translateX(500px);
      }

      22% {
          opacity: 1;
          transform: translateX(0px);
      }

      100% {
          opacity: 1;
          transform: translateX(0px);
      }
  }

  .go {
      animation: fade 4s ease;
  }



  #bos {
      position: absolute;
      z-index: 2;
      left: 32%;
  }




  #gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

  }

  #gallery div {
      padding-right: 1em;
      width: 25%;
  }

  #gallery li {
      font-size: .8rem;
      margin-bottom: .3rem;
  }

  #gallery h5 {
      font-size: 1.1rem;
  }

  h6 {
      color: #666;
      text-transform: uppercase;
      font-weight: 300;
  }

  #gallery img {
      max-width: 100%;
  }

  nav a.active {
      color: #fff;
      background: #7b7b7b;
  }

  @media only screen and (min-width:700px) and (max-width:1020px) {
      #bos {
          width: 260px;

      }

      header {
          padding: 0 15px;
      }

      main {
          margin: 0 15px;
      }

      nav {
          letter-spacing: 0px;
      }

      figure {
          padding: 20px 0 0 25px;
          width: 40%;
          min-width: auto;
      }



      figure h2 {
          font-size: 1.65rem;
      }

      figure h3 {
          font-size: 1.2rem;
      }

      figure h4 {
          font-size: 1.5rem;
      }

      #gallery div {
          width: 50%;
      }

  }

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


      .slide {
          min-height: 200px;
          background-color: #ffb301;
      }

      header h1,
      header h4 {
          font-size: 1.3rem;
      }

      header h1 {
          padding-top: 1.8em;
      }

      #logo {
          width: 75px;
      }

      #bos {
          display: none;
      }

      figure {
          padding: 10px 0 0 10px;
          width: 60%;
          min-width: auto;
      }

      figure h2 {
          font-size: 1.3rem;

      }

      figure h3 {
          font-size: .9rem;

      }

      figure h4 {
          font-size: 1.1rem;


          margin-top: 0;

          padding-left: 0em;


      }

      figure h4 span:before {
          content: url('img/slideshow/quote-sm.png');
      }

      figure h4 span:after {
          content: url('img/slideshow/close-quote-sm.png');
      }

      h4 {
          font-size: 1.5rem;

      }

      main {
          margin: 0 8px;
      }

      input,
      select,
      textarea {
          display: block;
      }

      .p50,
      .p40,
      .p10 {
          width: 98%;
      }

      .tri-column,
      .bi-column {
          column-count: 1;
      }



      .blue,
      .purple {
          display: block;
          margin: 10px auto;
          width: 92%;

      }

      #gallery div {
          width: 100%;
      }

      nav {
          letter-spacing: 0px;
      }

  }