body {
}
::-webkit-scrollbar {
  width: 1em;
}
::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 10px;
  margin-block: 0.5em;
}
::-webkit-scrollbar-thumb {
  background-color: skyblue;
  border-radius: 10px;
}
.wrapper {
  margin-top: 40px;
  margin-bottom: 40px;
  width: 100%;
  max-width: 2000px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  padding-bottom: 120px;
}
.even-cols {
  display: flex;
}

.even-cols > * {
  flex-basis: 100%;
}

.gridish {
  animation: transit1 1s;
  display: flex;
  flex-wrap: wrap;
}
.gridish > * {
  flex: 1 1 31em;
  min-width: 350px;
}
.contentbox {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  width: 100%;
  gap: 20px;
}
.menu {
  position: absolute;
  display: flex;
  top: 0px;
  right: 10px;
  left: auto;
  margin-top: 10px;
  text-align: center;
}

.menu a {
  font-family: "Raleway", Helvetica, sans-serif;
  font-size: 1.5em;
  font-weight: bolder;
  text-decoration: none;
  padding: 0px 10px;
  margin-top: 10px;
  line-height: 2.2em;
  color: black;
}
.menu a:hover {
  margin-bottom: 0;
  padding-bottom: 4px;
  line-height: 1em;
  text-decoration: underline lightskyblue;
}
.menu a:visited {
  color: black;
}
img.logo {
  width: 200px;
  float: left;
  margin-left: 20px;
  margin-right: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 15px 15px 15px rgb(171, 171, 171);
}

.col {
  background-image: linear-gradient(
      rgba(242, 249, 194, 0.7),
      rgba(242, 249, 194, 0.7)
    ),
    url(images/sunlitho.jpg);
  background-size: cover;

  padding-left: 50px;
  padding-right: 50px;
  margin: 20px;
  height: auto;

  min-width: 600px;
  border: none;
  text-align: left;
  box-shadow: 0px 0px 30px gray;
  border-radius: 10px;
}

.col h2 {
  font-family: "Raleway", Arial, Helvetica, sans-serif;
  font-size: 2em;
  text-align: left;
}
.col h6 {
  padding-top: 5px;
  padding-bottom: 0px;
  margin: 0px;
  font-family: "Raleway", Arial, Helvetica, sans-serif;
  font-size: 1em;
  text-align: left;
  font-weight: normal;
}
.avail {
  background-image: linear-gradient(rgba(0, 80, 0, 0.5), rgba(0, 80, 0, 0)),
    url(images/sequoiaroad.jpg);

  background-size: cover;
  padding: 50px;
  height: auto;
  display: grid;
  place-items: center;
  margin: 20px;
  border: none;
  box-shadow: 0px 0px 30px gray;
  border-radius: 10px;
}
.referral {
  background-image: linear-gradient(rgba(2, 56, 90, 0.5), rgba(13, 4, 116, 0));

  background-size: cover;
  padding: 50px;
  height: auto;
  display: grid;
  place-items: center;
  margin: 20px;
  border: none;
  box-shadow: 0px 0px 30px gray;
  border-radius: 10px;
}

.referral h2 {
  padding: 0px 25px;
  margin-top: 0px;
  margin-left: 8%;
  margin-right: 8%;
  text-shadow: 0px 1px 1px skyblue;
  color: darkblue;

  font-family: "Raleway", sans-serif;
  font-size: 2em;
  font-weight: bolder;
  line-height: 1.3em;
}
.referral h4 {
  color: white;
  font-family: "Alatsi", Helvetica, sans-serif;
  font-size: 3.2em;
  text-align: center;
  text-shadow: 2px 2px 2px darkblue;
  margin-top: 5px;
  margin-bottom: 0px;
}
.referral h6 {
  padding: 0px 35px;
  margin-top: 0px;
  margin-left: 8%;
  margin-right: 8%;

  color: black;

  font-family: "Raleway", sans-serif;
  font-size: 1.1em;
  font-weight: bolder;
  line-height: 1.3em;
}

.avail .btn {
  display: grid;
  place-items: center;
  font-family: "Raleway", sans-serif;
  font-weight: 900;
  color: black;
  background-color: white;
  border-radius: 0px;
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
}
.avail form {
  display: none;

  margin-left: auto;
  margin-right: auto;
  color: black;
  border-radius: 10px;
  border: solid steelblue 2px;
  padding: 25px 5px;
  margin-top: 10%;
  margin-bottom: 10%;
  width: 94%;
  row-gap: 10px;
  height: auto;
  display: grid;
  gap: 5px;
  grid-template-columns: 100%;
  grid-template-rows: 11;

  justify-content: center;

  background-color: rgb(200, 197, 197);
}
.avail input {
  background-color: white;

  width: 95%;
  color: black;
  border: solid 2px steelblue;
  font-family: "Alatsi", Helvetica, sans-serif;
  line-height: 2em;
  font-size: 1.6em;
  text-align: left;
  padding: 5px;
  margin-top: 10px;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
}
.avail input::placeholder {
  color: gray;
  font-family: "Alatsi", Helvetica, sans-serif;
  text-align: left;
}
.avail button {
  cursor: pointer;
  background-color: steelblue;
  color: white;
  font-family: "Alatsi", Helvetica, sans-serif;
  font-size: 2em;
  text-align: center;
  margin-top: 20px;
  border-radius: 10px;
  padding-top: 20px;
  place-content: center;
}
.aboutus {
  background-color: beige;
  padding: 50px;
  height: auto;
  margin: 20px;
  box-shadow: 0px 0px 30px gray;
  border-radius: 10px;
}

h1.aboutustxt {
  color: blue;
  font-family: "Alatsi", Impact, Haettenschweiler, "Arial Narrow Bold",
    sans-serif;
  font-size: 3.2em;
  text-align: center;
}

h3.aboutustxt {
  font-family: "Raleway", Arial, Helvetica, sans-serif;
  font-size: 2em;
  text-align: left;
}

h4.countxt {
  color: white;
  font-family: "Alatsi", Helvetica, sans-serif;
  font-size: 3.2em;
  text-align: center;
  text-shadow: 2px 2px 2px darkgreen;
  margin-top: 5px;
  margin-bottom: 0px;
}
h3.countxt {
  color: white;
}

.col h4 {
  font-family: "Alatsi", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  color: rgb(143, 6, 6);
  text-align: center;
  font-size: 3.3em;
  font-weight: bolder;
  letter-spacing: 0.08em;
}
.col a {
  text-decoration: none;
  text-shadow: 1px 1px 1px rgb(143, 6, 6);
}
.firstchar {
  color: rgb(143, 6, 6);
  font-family: "Raleway", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  font-size: 2em;
  margin-bottom: 0px;
}
.aboutusred {
  color: rgb(143, 6, 6);
  font-family: "Raleway", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  font-size: 1em;
}
.firstword {
  color: rgb(143, 6, 6);
  font-family: "Raleway", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  font-size: 1.2em;
  margin-bottom: 0px;
}
h1.logotxt {
  font-family: "Raleway", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  color: black;
  text-align: left;
  font-size: 3em;
  font-weight: bolder;
  margin-bottom: 0px;
  margin-top: 110px;
  padding: 0px;
  line-height: 1em;
  letter-spacing: 0.2em;
}
h2.logotxt {
  font-family: "Raleway", Arial, Helvetica, sans-serif;
  font-size: 1em;
  float: left;
  margin-left: 5px;
  margin-right: 20px;
  text-align: center;
}
.dot {
  font-size: 1em;
  font-family: "raleway", arial;
}

h1.title {
  font-family: "Alatsi", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  color: rgb(131, 17, 17);
  text-shadow: 10px 10px 20px gray;
  text-align: center;
  font-size: 64px;
  font-weight: bolder;
  margin-top: 50px;
  margin-bottom: 0px;
}
h2.title {
  font-family: "Raleway", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  color: black;
  text-align: center;
  font-size: 2em;
  font-weight: bolder;
  margin-top: 0px;
  margin-bottom: 20px;
}
h1.contact {
  font-family: "Raleway", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  color: black;
  text-align: left;
  font-size: 2em;
  font-weight: bolder;
  margin-top: 10px;
  margin-bottom: auto;
  margin-right: 10%;
  margin-left: 20px;
}
.header {
  background-color: white;

  padding: 0px;
}
.footer {
  display: flex;
  width: 100%;

  min-width: 350px;
  background-color: white;

  justify-content: center;
  border-top: solid black 3px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  padding-top: 20px;
}

img.suptom {
  width: 12em;
  float: left;
  margin-left: 10%;
  margin-right: 20px;
  margin-top: 0px;
  border-radius: 10px;
  box-sizing: border-box;

  border: solid black 3px;
  box-shadow: 10px 10px 20px gray, inset 0 0 20px black,
    inset 2px 2px 30px black;
  transition: width 1s;
}
.flip {
}
.flap {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(/images/tombw.jpg) no-repeat;
  width: 12em; /* Width of new image */

  animation: flipOut 2s ease-in-out;
  overflow: hidden;
}
@keyframes flipOut {
  25% {
    transform: rotateY(90%) scale(1.1);
  }
  50% {
    transform: rotateY(180%) scale(1.5);
  }
  100% {
    transform: rotateY(360deg) scale(1);
  }
}

.footer a {
  margin-right: 25px;
  margin-left: 10%;
}
.col ul a {
  margin-top: 0px;
  text-decoration: none;
  color: black;
  font-family: "Alatsi", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
}
.col ul {
  color: black;
  line-height: 1.5em;
  margin-top: 20px;
  margin-left: 10%;
  float: left;
  text-align: left;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 0px;
  font-size: 2.5em;
  font-family: "Alatsi", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  text-shadow: 1px 1px 1px rgb(143, 6, 6);
}
::marker {
  font-size: 1.2em;
  color: rgb(143, 6, 6);
}

.col li:hover::marker {
  color: rgb(12, 211, 71);
}
.col li:hover {
  color: rgb(143, 6, 6);
  font-size: 1.1em;
}
.col a:hover {
  color: rgb(143, 6, 6);
}
.col ul li {
  font-family: "Alatsi", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  transition: text-shadow 0.5s, color 0.5s, font-size 0.5s;
}
.wbmail {
  max-width: 350px;

  min-width: 350px;
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
  margin: 20px;
  border: none;
  box-shadow: 0px 0px 30px gray;
  border-radius: 10px;
  background-color: rgba(143, 6, 6);
  align-items: center;
}
.wbmail h1.wbmailtxt {
  font-family: "Raleway", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    arial;
  color: black;
  background-color: white;
  text-align: center;
  font-size: 3em;
  font-weight: bolder;
  padding: 0px;
  margin-bottom: 0px;
  text-shadow: 2px 2px 2px black;
}
.wbmail h2.webtxt {
  font-family: "Raleway", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  color: white;
  text-align: center;
  font-size: 2em;
  font-weight: bolder;
  margin-top: 0px;
  margin-bottom: 20px;
}
.wbmail h3.webtxt {
  margin-top: 80px;
  margin-left: 15%;
  text-align: left;
  font-family: "Raleway", sans-serif;
  font-size: 1.3em;
  color: white;
}

.btn {
  font-family: "Alatsi", sans-serif;
  text-align: center;
  font-size: 2em;
  color: rgb(143, 6, 6);
  margin-left: auto;
  margin-right: auto;
  cursor: POINTER;

  text-decoration: none;

  padding: 10px 75px;
  height: 60px;
  width: 360px;
  border-radius: 20px;
  border: 2px solid black;
  background-color: white;
}
.btn:hover {
  color: green;
  box-shadow: 0px 0px 40px yellow;
  border: 2px solid yellow;
}

.btn a {
  position: absolute;

  color: white;
  text-decoration: none;
}
.news {
  background-color: rgb(154, 153, 153);
  border-radius: 10px;
  border: solid black 4px;
  text-align: center;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 50px;
  min-width: 430px;
  min-height: 600px;
}
.news h2 {
  padding: 10px;
  text-align: center;
  letter-spacing: 0.14em;
  color: white;
  font-family: "Alatsi", arial;
  font-size: 2.5em;
  margin-top: 20px;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0px black;
}
.news iframe {
  text-align: center;
  height: 15em;
  width: 80%;
  min-width: 300px;
  background-color: white;
  border: none;
}

img.county {
  width: 150px;
  float: left;
  padding: 0px;
  margin-right: 20px;
}
h2.countxt {
  font-family: "Raleway", Arial, Helvetica, sans-serif;
  font-size: 2em;
  color: rgb(224, 252, 224);
  background-color: rgb(16, 15, 15, 0.5);
}
.bgmodal {
  display: none;
  position: absolute;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  background-image: none;
  width: 100%;
  height: 100%;
}
.close {
  display: block;
  position: absolute;
  top: 15px;
  right: 35px;
  font-size: 3em;
  font-weight: bolder;
  transform: rotate(45deg) scale(1.2);
  cursor: pointer;
}

@media only screen and (max-width: 500px) {
  .header {
    display: block;
    min-width: 375px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .menu {
    margin-left: 25%;
  }
  .col {
    display: block;
    width: 400px;

    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border: none;
  }
  .news {
    display: block;
    width: 300px;

    margin-left: 0;
    margin-right: 0;
    padding: 0px;
    border: none;
  }
  .news h2 {
    padding: 0px;
    text-align: center;
    color: rgb(89, 4, 4);
    font-family: "Alatsi", arial;
    font-size: 2.5em;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .wbmail {
    display: block;
    width: 400px;
    min-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
  }
  .avail {
    display: block;
    width: 400px;

    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    border: none;
  }
  .footer {
    display: block;
    width: 300px;

    margin-left: auto;
    margin-right: auto;
    padding: 0px;
  }
  img.logo {
    margin-left: 25%;
    margin-right: auto;
  }
  h1.logotxt {
    text-align: center;
  }
  h2.logotxt {
    text-align: center;
  }
  .news iframe {
    width: 250;
    margin-left: 0;
    margin-right: 0;
    padding: 0px;
  }
}
@keyframes transit1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}