body {
    font-family: "Nunito", sans-serif;
    background-color: #e7e7e7;
    /* margin: 3rem; */
    margin-top: 3rem;
    margin-right: .2rem;
    margin-bottom: 3rem;
    margin-left: .2rem;
}

h1, h2, h3, h4, h5, h6 {font-family: "Nunito", sans-serif;}

.nav-subtitle {font-family: "Nunito", sans-serif;
  font-size: 24px;
  font-weight: 900;
  padding: 0px 0px 10px 0px;
  pointer-events: none;
  }

  /* <uniquifier>: Use a unique and descriptive class name */
  /* <weight>: Use a value from 100 to 400 */
  
.hello {
  font-family: "Playwrite US Trad", cursive;
  font-size: 35px;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  }

.menu a {
    padding: .7rem .7rem;
}

.bottom-copyright {
    font-family: "Nunito", sans-serif;
    color: rgb(0, 0, 0);
    font-size: 0.9rem;   
}

label {
  font-size: 1em;
}

.button {
  font-size: 1em;
}

/* Image Gallery */
div.gallery {
  border: 1px solid #b9b9b9;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  background-color: #f8f8f8;
  padding: 5px;
  width: 100%;
  height: auto;
}

div.desc {
  padding: 10px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

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

  .responsive {
    width: 100%;
  }
  .orbit-caption {
    display: none;
  }
  .orbit-bullets {
    display: none;
  }
  legend {
    display: none;
  }
  .bottom-copyright {
    font-size: 0.74rem;   
  }
  p2{
    font-size: .8rem; 
  }
  .hello {
    font-family: "Playwrite US Trad", cursive;
    font-size: 25px;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.fieldset {
    /*This centers it in the middle of the page*/
    margin: auto;
    text-align: center;
    width: 98%;
    border-radius: 25px;
    border: 3px solid blue;
    /*This will add equal padding on all four sides*/
    padding: 20px;
  }

  
legend {
  /*background-color: blue;*/
  width: 20%;
  color: blue;
  padding: 10px;
}

  
/*Scrolling Menu*/

div.scrollmenu {
  /*background-color: #333;*/
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: rgb(0, 0, 0);
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a.active {
  /*border-bottom: 2px solid #E64A19;*/
  color: #0000FF;
}

/* div.scrollmenu a:hover {
background-color: #777;
}  */


.thumbnail {
  padding: 2px;
}

/* Add a hover effect (blue shadow) */
img:hover {
    box-shadow: 0 0 3px 3px rgba(0, 140, 186, 0.6);
  }

.header-nav {
    text-align: center;
    margin-bottom: 3rem;
}

.header-nav img{
    margin-bottom: 1rem;
}

/* .header-nav-subtitle {
    font-family: "Nunito", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.3rem;
    letter-spacing: .05rem;
}*/

.header-nav-link {
    text-transform: uppercase;
    font-weight: 600;
    color: #000;
    letter-spacing: .05rem;
}

.header-nav-link:hover {
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(0, 140, 186, 0.7);

}

.is-active {
    color: #0000FF;
}

/* Thank you card for submitting contact form */
.card {
    /*This centers it in the middle of the page*/
    display: contents;
    margin: auto;
    text-align: center;
    width: 100%;
    border-radius: 10px;
    border: 2px solid blue;
    /*This will add equal padding on all four sides*/
    padding: 0px;
    pointer-events: none;
}

.content {
    margin: 3 rem 0;
}

ul{
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

footer {
  text-align: center;
  padding: 5px 5px 5px 5px;
  /* background-color: rgb(20, 51, 97);*/
  color: black;
}

#myImg2 {
 /* background-color: #f8f8f8;
  border: 1px solid #b9b9b9;
  padding: 10px;
  width: 100%;
  height: auto;*/
  border-radius: 5px;
  pointer-events: none;
}

/* Table properties*/
table, th, td {
  border: 1px solid #e7e7e7;
  background-color: #e7e7e7;
}

/* Style the Image Used to Trigger the Modal */
#myImg {
    border-radius: 5px;
    pointer-events: none;
  }
/* #myImg:hover {opacity: 1;} */


/* The Close Button */
.close-button {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-family: "Arial, Helvetica, sans-serif";
  font-size: 45px;
  font-weight: 900;
  transition: 0.3s;
  padding: 5px 10px 5px 10px;
  background-color: rgba(0,0,0,0.8);
}

.close-button:hover {
  background-color: rgba(0,0,0,0.8);
  color: rgba(255, 255, 255, 0.5);
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
  }

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
  }
  
  @keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
  }

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 800px){
    .modal-content {
      width: 100%;
    }
  }