/*
This stylesheet is read after stylesheet.css and is
used for modifications while preserving the default.

These styles vary or supplement the default styles
for the Works Unit WordPress theme (used for qwwwik)

[ Updated 06 Aug 2025 ]
*/

/* UNMINIFIED VERSION */

p.metadata { display: none; }

/* Contact page */
/* -------------------------------------------------- */

.contactform .submit {
  font-family: "Open Sans", Tahoma, sans-serif;
  font-size: 1.1rem;
  margin: 0.8rem 0 0.6rem 0;
  padding: 7px 17px 7px 16px;
  color: #fff;
  font-weight: 600;
  background-color: #239e3d;
  border: 0;
}

.contactform .submit:hover {
  color: #fff;
  background-color: #666;
  cursor: pointer;
}

.response p {
  margin-top: 6px;
  color: #649300;
}

.zap { /* For contact form */
  display: none;
}

@media screen and (min-width: 778px) {

  form.contactform  {
    width: 700px;
    margin: 0 0 10px 0;
  }

  .contactform label {
    font-size: 1.0rem;
    line-height: 1.5;
  }

  .contactform input[type=text] {
    margin: 6px 6px 6px 0;
    padding: 5px 5px;
    width: 240px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 1.0rem;
  }

  .contactform textarea {
    width: 100%;
    max-width: calc(100% - 12px);
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: var(--white);
    margin-top: 6px;
    padding: 5px 5px 5px 5px;
    font-size: 1.0rem;
    overflow: auto; /* Remove default vertical scrollbar in IE 8/9/10/11 */
  }

}

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

  form.contactform {
    margin: 0 0 0 0;
    padding: 0 0 1.35rem 0;
    text-align: left;
    background-color: #f9f9f9;
  }

  .contactform input[type=text] {
    display: block;
    margin: 0;
    padding: 0.5em 5px;
    width: 75%;
    background-color: var(--white);
    border: 1px solid #ddd;
    border-radius: 0.25em;
    font-size: 1.0em;
  }

  form.contactform label {
    display: block;
    margin-top: 0.6em;
    margin-bottom: 0;
    line-height: 0.6;
  }

  .contactform textarea {
    margin: 0;
    padding: 0.5rem 5px;
    width: calc(100% - 12px);
    height: 10.0rem;
    font-size: 1.0rem;
    background-color: var(--white);
    border: 1px solid #ddd;
    border-radius: 0.25em;
  }

}

/* -------------------------------------------------- */

del { color: #666; }

.flip { transform: scaleX(-1); }

div.video {
  background: none;
}

.bgred, .bgpurple, .bggreen, .bgdark {
  margin: 2.4rem 0 2.5rem 0;
  padding: 1.2rem 30px 1.2rem 30px;
  border-radius: 12px;
  color: #fff;
}

.bgred { background-color: #d16356; /* #d66c60 */ }
.bgpurple { background-color: #6c5db5; }
.bggreen { background-color: #37ae50; }
.bgdark { background-color: #555; }

.shadow1 { /* #70 */
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

.shadow2 { /* #83  */
  box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
}

.shadow3 { /* #30  */
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

pw { /* div */
  margin: 2.0em auto 0.6em auto;
  padding-top: 0.4em;
  padding-bottom: 1.0em;
  text-align: center;
  width: 360px;
  background-color: var(--white);
  border: 1px solid #ddd;
  border-radius: 10px;
}

/* SEARCH */

.searchform,
#pw {
  text-align: center;
}

#s h1 {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.searchform p,
#pw p {
  margin-bottom: 0.4em;
  text-align: center;
}

div#s a span {
  color: var(--link);
  font-style: normal;
}

div#s span.faded {
  opacity: .6;
}

#s ul.listing {
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
}

#s ul.listing li {
  margin-bottom: 1.0rem;
}

.search input[type=search] {
  margin: 4px 6px 4px 0;
  padding: 7px 8px;
  width: 290px;
  background-color: #fdffe4;
  border: 1px solid #dee47e;
  border-radius: 3px;
  font-size: 1.0rem;
  font-family: inherit;
}

.search input[type=search]:hover,
input[type=search]:focus {
  background-color: var(--white);
  border: 1px solid #ddd;
}

.searchform input[type=submit] {
  display: block;
  font-family: "Open Sans", Tahoma, sans-serif;
  font-size: 1.1rem;
  margin: 0.8rem auto 0.6rem auto;
  padding: 7px 21px 7px 20px;
  color: #fff;
  font-weight: 600;
  background-color: #37ae50;
  border: 1px solid #37ae50;
}

.searchform input[type=submit]:hover {
  color: #fff;
  background-color: #666;
  border: 1px solid #666;
  cursor: pointer;
}

.search .submit,
form.pw .submit {
  margin: 8px auto 0 auto;
  text-align: center;
}

div#s ::placeholder { /* Chrome, Firefox, Opera, Safari */
  color: #999;
  opacity: 1; /* Firefox */
}

div#s ::-ms-input-placeholder { /* Microsoft Edge */
  color: #999;
}

/* ------------------------------------------------------------ */
/* Series of collapsible boxes 300 x 300px */

.flexcontainer {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: flex-start; /* vertical */
  flex-wrap: wrap;
  width: auto;
  margin-top: 2.4rem;
  margin-bottom: 0rem;
  padding: 0 30px;
  /* -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; */
  }

.row { flex-direction: row; }

.rowreverse { flex-direction: row-reverse; }

.flexitem {
  width: 300px;
  height: 290px;
  padding: 0 0 9px 0;
  background-color: #fff;

  -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);

  border-bottom: 1px solid #ccc;
  line-height: 1;
}

#content .max .flexitem img,
#wide .max .flexitem img { /* Don't want it for all images */
  width: auto;
  margin: 0 auto 0 auto;
}

.flexitem img {
  max-width: 300px;
  max-height: 240px;
  margin: 0 auto 0 auto;
  text-align: center;
  vertical-align: top;
}

.flexitem h5 {
  margin: 16px auto 0 auto;
  text-align: center;
  padding: 0 6px;
  color: #888;
  font-family: "Ubuntu", "Tahoma", sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0px;
}

.flexitem h5 a {
  color: #888;
}

.flexitem h5 a:hover {
  color: var(--link);
}

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

  .flexcontainer {
    margin: 0 auto 2.4rem auto;
    -webkit-row-gap: 20px;
    -moz-row-gap: 20px;
    row-gap: 20px;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
  }

}

@media screen and (min-width: 481px) {

  .flexcontainer {
    -webkit-row-gap: 25px;
    -moz-row-gap: 25px;
    row-gap: 25px;
    -webkit-column-gap: 25px;
    -moz-column-gap: 25px;
    column-gap: 25px;
  }

}

@media screen and (min-width: 778px) {

  .flexcontainer {
    -webkit-row-gap: 30px;
    -moz-row-gap: 30px;
    row-gap: 30px;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
  }

}

/* SIDE ARROWS */
/* ================================================== */

.imgnav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: -1.2rem;
  margin-bottom: -1.8rem;
  line-height: 1.0;
  font-size: 1.5rem;
}

.imgnavb {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0;
  margin-bottom: 1.0rem;
  line-height: 1.0;
  font-size: 1.5rem;
}

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

  .imgnav {
    margin-top: -1.0rem;
    margin-bottom: -1.0rem;
  }

}

.goright { /* <div> */
  display: inline-block;
  text-align: right;
}

.goleft {
  display: inline-block;
  text-align: left;
}

.goright a { /* linktext */
  padding: 6px 0 6px 10px;
  color: #666;
}

.goleft a { /* background-color: #ebebeb; */
  padding: 6px 10px 6px 0;
  color: #666;
}

.goleft a:hover,
.goright a:hover {
  color: #f09;
}

/* MAX2 */
/* ================================================== */

@media screen and (min-width: 601px) {

  .max2 { /* Fills screen width */
    width: calc(100vw - var(--scrollbar-width));
    height: auto;
    position: relative;
    left: 50%; /* middle of width */
    right: 50%; /* middle of width */
    margin-top: 0;
    margin-right: calc(-50vw + (var(--scrollbar-width) / 2));
    margin-bottom: 0;
    margin-left: calc(-50vw + (var(--scrollbar-width) / 2));
    padding: 0;
    text-align: center;
  }

}

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

  .max2 {
    margin: 0 -20px 0 -20px;
    min-width: 100%;
    text-align: center;
  }

}

/* MODAL IMAGES (see modal-img.js) */
/* ================================================== */

main img.modal-target {
  margin: 2.4em auto;
}

@media screen and (min-width: 778px) {

  .modal-target {
    cursor: pointer;
    transition: 0.3s;
  }

  .modal-target:hover { opacity: 1.0; }

  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top (doesn't work) */
    margin-bottom: 0em;
    padding-top: 0px; /* Places the box */
    left: 0;
    top: 48px; /* Keep below header */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.6);
  }

  /* Modal Content (image) */
  .modal-content {
    margin: 0 auto 0 auto;
    padding: 0;
    display: block;
    width: 100%;
    max-width: 700px;
    width: auto;
    opacity: 1 !important;
  }

  /* Caption of Modal Image */
  .modal-caption {
    margin: 0.5em auto 1.0em auto;
    padding-right: 0.25em;
    padding-left: 0.25em;
    display: block;
    /* width: 80%;
    max-width: 1200px; */
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.9em;
    line-height: 1.5;
  }

  /* Add Animation */
  .modal-content, .modal-caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
  }

  @-webkit-keyframes zoom {
    from {-webkit-atransform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }

  @keyframes zoom {
    from { transform:scale(0) }
    to { transform:scale(1) }
  }

  /* The Close Button */
  .modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    padding: 0 12px 2px 12px;
    color: #000;
    background-color: #fff;
    font-weight: bold;
    font-size: 2.7em;
    line-height: 1.0;
    border-radius: 50%;
    transition: 0.3s;
    z-index: 3;
  }

  .modal-close:hover,
  .modal-close:focus {
    color: var(--link);
    text-decoration: none;
    cursor: pointer;
  }

  .relative { /* Enclose picture element */
    position: relative;
    margin: 2.4em auto 1.6em auto;
    padding: 0;
    text-align: center;
  }

  p.enlarge {
    position: absolute;
    margin: 0;
    padding: 0;
    text-align: center;
    right: 0;
    top: -25px;
    color: #666;
    font-size: 0.75em;
  }

}

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

  div#modal,
  div.modal,
  #modal-close,
  .modal-close,
  #modal-content,
  .modal-content,
  #modal,
  .modal,
  #modal-caption,
  .modal-caption,
  p.enlarge {
    display: none;
  }

}