* {
box-sizing: border-box;  /* set width regardless of padding */
}

body, html {
  height: 100%;
  margin: 0;
  font: 400 16px/1.8 "Arial", sans-serif;
  color: #777;
}

h1 {
  letter-spacing: 0px;
  line-height: 160%;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
  margin-top:0;
  text-align:center;
}
.darktextbox h1 {
  color: #FFF;
}
h2 {
  letter-spacing: 0px;
  line-height: 160%;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
  margin-top:0;
  text-align:center;
}
.darktextbox h2 {
  color: #FFF;
}
h3 {
  letter-spacing: 0px;
  line-height: 160%;
  text-transform: uppercase;
  font: 16px "Lato", sans-serif;
  color: #FFC60B;
  margin-top:0;
}
.lighttextbox h3 {
  color: #111;
}


.overflow {
width: 100%;
overflow: auto;
}

a {
  color: #FFC60B;
  text-decoration: none;
}
a.calltoaction {
  display: inline-block;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 2px;
  padding: 0 28px;
  border-radius: 0px;
  margin: 4px;
}
    .bgimg-1 a.calltoaction {
      color: #000 !important;
      background: #FFC60B;
    }
    .darktextbox a.calltoaction {
      color: #111 !important;
      background: #FFC60B;
    }
    .bgimg-1 a.calltoaction:hover,
    .darktextbox a.calltoaction:hover {
      color: #FFF !important;
      background: #282E34;
    }

.larger {
  font-size: 120%;
  text-decoration: underline;
}
.note {
  font-size: 80%;
  margin-bottom: 5px;
}

.left, .lft {
    float: left;
}
.right, .rgt {
    float: right;
}
.clear, .clr {
    clear: both;
}
.hidden {
  visibility: collapse;
}





/* Header */
#header {
  padding: 0 4%;
  position: fixed;
  width: 100%;
  height: 120px;
  background: #fff;
  z-index: 100;
  border-bottom: 3px solid #282E34;
}

  .logo {
    float: left;
    display: block;
    width: 80%;        /* smaller for mobile portrait */
    height: auto;
    margin-top: 10px;
  }

  .contact {
    float: right;
    text-align: left;
    padding: 10px 0;
  }
    .contact p {
      margin: 0;
    }
    .contact p img {
      margin-right: 10px;
      position: relative;
      top: 5px;
    }
    .contact p a {
      color: #282E34;
      font-size: 17px;
      padding-bottom: 5px;
    }
    .contact p span {
      display: none;
    }

/* end header */





.twocol1 {
}
.twocol2 {
    text-align: left;
}
    #cal-outer.twocol1 {
        width: 100%;
        padding-top: 0px;
    }
    #frm-outer.twocol2 {
        width: 100%;
        padding-top: 0px;
    }
    #map-outer.twocol1 {
        width: 100%;
        padding-top: 0px;
    }
    #tbl-outer.twocol2 {
        width: 100%;
        padding-top: 0px;
    }


.threecol1 {
}
.threecol2 {
}
.threecol3 {
}
    .threecol1 h2,
    .threecol2 h2,
    .threecol3 h2 {
        background: #FFC60B;
        padding: 5px;
    }

.bgimg-1 {
  position: relative;
  opacity: 1;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
.bgimg-2, .bgimg-3 {
/*  position: relative;
  opacity: 1;                  */
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;

}
@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */
    .bgimg-2, .bgimg-3 {
      background-attachment: fixed;
    }
}
.bgimg-1 {
  background-image: url("../images/waspbg01.jpg");
  min-height: 300px;
  border-bottom: 3px solid #FFC60B;
}
    #home .bgimg-1 {
    background-image: url("../images/waspbg01.jpg");
    /*min-height: 100%;*/
    }
    #blog .bgimg-1 {
    background-image: url("../images/waspbg04.jpg");
    min-height: 250px;
    }
    #post .bgimg-1 {
    background-image: url("../images/waspbg04.jpg");
    min-height: 120px;
    }

.bgimg-2 {
  background-image: url("../images/waspbg02.jpg");
  min-height: 350px;
}

.bgimg-3 {
  background-image: url("../images/waspbg03.jpg");
  min-height: 350px;
}

.caption {
  position: absolute;
  left: 0;
  bottom: 36px;
  width: 100%;
  text-align: center;
}
    #home .caption {
    /*top:35%;*/
    }

.caption span.border {
  color: #FFF;
  font-weight: bold;
  padding: 0px;
  font-size: 20px;
  letter-spacing: 5px;
}
.caption span.border a {
  color: #FFF;
  text-decoration: none;
}
.caption span.border a:hover{
  color: #FFC60B;
}

.lighttextbox {
  color:#777;
  background-color:white;
  text-align:center;
  padding:50px 20px;
}
.darktextbox {
  color:#ddd;
  background-color:#282E34;
  text-align:center;
  padding:50px 20px;
}

.overimgtextbox {
    background-color:transparent;
    font-size:25px;
    color: #f7f7f7;
    text-transform: uppercase;
    text-shadow: 2px 2px 6px  #111;
}


  /* ADMIN */

  /* tabs */
  #tabs.darktextbox {
      padding:10px 2px 0;
  }
  #tabs a {
      display: inline-block;
      background: #FFC60B;
      color: #282E34;
      border-radius: 5px 5px 0 0;
      padding: 4px 8px;
      margin: 0 2px;
  }
  #tabs a:hover,
  #tabs a#current {
      background: #fff;
  }

  /* tables */

  th {
      font-weight: bold;
      color: #fff;
      background: #282E34;
      border: 0;
      padding: 0 4px;
      text-align: left;
  }
  td {
      background: #f7f7f7;
      border: 0;
      padding: 0 4px;
      text-align: left;
      vertical-align: top;
  }

  .id {
      background: #E6E6E6;
  }
  .newdate {
      background: #ededed;
  }
  .notes {
      font-style: italic;
  }
  .end {
      border-bottom: 1px solid #fff;
  }

  #admin th, #admin td  {
      font-size: 90%;
  }

  input.delete {
      background: #FFC60B;
      color: #282E34;
      font-size: 90%;
      font-weight: bold;
      border: 0;
      border-radius: 4px;
      padding:2px 8px;
      cursor: pointer;
  }

  .nw {
      white-space: nowrap;
  }

  .spam {
      background: red;
  }



  /*------ BLOG ---------*/

  /* index */

    #blog-container {
      max-width:1200px;
      margin:80px auto;
      padding:0 20px;
      line-height:1.5;
    }

    #blog-container h2 {
      font-weight: bold;
      text-transform: none;
      text-align:left;
      margin-bottom:10px;
    }
    #blog-container h2 a {
      /* display: inline-block;
      width: 100%;
      background: #FFC60B; */
      color: #282E34;
      /* padding:2px 8px; */
    }
    #blog-container h2 a:hover {
      color: #FFC60B;
      /* background: #282E34;
      color: #fff; */
    }

    /* GRID */
    .grid{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:30px;
    }

    /* CARD */
    .card{
      border: 0px solid #FFC60B;
      border-radius:0;
      padding:0px;
      display:flex;
      flex-direction:column;
      height:100%;
    }

    .card img{
      width:100%;
      height:180px;
      object-fit:cover;
      border-radius:0;
      margin-bottom:10px;
    }

    .meta{
      font-size:0.95rem;
      color:#282E34;
      margin-bottom:10px;
      font-style: italic;
    }

    .excerpt{
      flex:1;
      font-size:0.95rem;
      color:#282E34;
    }

    .read-more{
      margin-top:12px;
      font-weight:500;
    }
    .read-more a:hover {
      color:#282E34;
    }

    /* Pagination */
    .pagination{
      display:flex;
      gap:8px;
      align-items:center;
      justify-content:center;
      margin:26px 0 10px;
      flex-wrap:wrap;
    }
    .pagination a, .pagination span{
      border:1px solid #ddd;
      border-radius:10px;
      padding:8px 12px;
      font-size:14px;
    }
    .pagination .current{
      border-color:#111;
      font-weight:600;
    }
    .pagination .disabled{
      color:#999;
      border-color:#eee;
    }
    .pagination .dots{
      border:none;
      padding:0 6px;
    }

    /* post */

    #post-container {
      max-width:1000px;
      margin:40px auto 120px;
      padding:0 20px;
      line-height:1.5;
    }
    #post article {border:0px solid #e5e5e5;border-radius:0;padding:0px}
    #post h1 {
      font-size:2em;
      font-weight: bold;
      text-transform: none;
      text-align:left;
      margin-bottom:10px;
    }
    /* #post img {max-width:100%;height:auto;border-radius:0} */
    .post img{
      width:100%;
      height:300px !important;
      object-fit:cover;
      border-radius:0;
      margin-bottom:10px;
    }

    article table { width:100%; border-collapse:collapse; margin:12px 0; }
    article th, article td { border:1px solid #e5e5e5; padding:10px; text-align:left; }
    article thead th { font-weight:600; }
    article img { max-width:100%; height:auto; border-radius:12px; }




    /* TABLET */
    @media (max-width: 900px){
      .grid{grid-template-columns:repeat(2, 1fr);}
    }

    /* MOBILE */
    @media (max-width: 600px){
      .grid{grid-template-columns:1fr;}
      .post img{height:200px;}
    }

 /*------ BLOG ---------*/


/* footnotes */

.footnotes {
    width: 90%;
    margin: 0 auto;
    text-align: left;
}


.footer {
}








/***** MEDIA QUERIES *****/


/* Small devices (mobile (landscape), 420px and up) */
@media (min-width: 368px) {

    body {
    border: 0px solid red;
    }

    #tabs a {
    padding: 4px 16px;
    }

    .logo {
      width: 280px;        /* reset size */
      height: auto;
      margin-top: 6px;
    }

}

/* Small devices (mobile (landscape), 620px and up) */
@media (min-width: 472px) {

    body {
    border: 0px solid cyan;
    }


}


/* Small devices (tablets (portrait), 768px and up) */
@media (min-width: 768px) {

  body {
    border: 0px solid orange;
    }



    /* Header */
    #header {

    }

      .contact p span {
        display: inline-block;
      }
    /* end header */

}


/* Medium devices (tablets (landscape), 1024px and up)    */
@media (min-width: 1024px) {

    body {
    border: 0px solid lime;
    }

    .logo {
    margin-top: 6px;
    }

    .lighttextbox {
    padding:50px 80px;
    }
    .darktextbox {
    padding:50px 80px;
    }
    .twocol1 {
    float: left;
    }
    .twocol2 {
    float: right;
    }
        #cal-outer.twocol1 {
            width: 62%;
            padding-top: 0px;
        }
        #frm-outer.twocol2 {
            width: 34%;
            padding-top: 74px;
        }
        #map-outer.twocol1 {
            width: 40%;
            padding-top: 0px;
            overflow: auto;
        }
        #tbl-outer.twocol2 {
            width: 58%;
            padding-top: 0px;
        }

      .footnotes {
        width: 60%;
      }

    .threecol1 {
    float: left;
    width: 33%;
    padding: 0 20px;
    }
    .threecol2 {
    float: left;
    width: 33%;
    padding: 0 20px;
    }
    .threecol3 {
    float: left;
    width: 33%;
    padding: 0 20px;
    }

}


/* Medium devices (desktops, 1170px and up)    */
@media (min-width: 1170px) {

    body {
    border: 0px solid blue;
    }

}

/* Large devices (large desktops, 1400px and up)    */
@media (min-width: 1400px) {

    body {
    border: 0px solid lilac;
    }


}