#about-image { float: left; padding-left: 100px; padding-right: 50px; }
        .window-left, .window-right { background-color: #4c627e; color: #fff; height: 250px; width: 33%; position: relative;  }
    .window-center { background-color: #465973;  color: #fff; height: 250px; width: 34%; position: relative; }
    
    .window-left {  background-image: url("/images/Seaview-Farm-1©Kim-Woods-Rabbidge-1024x683.jpg"); background-size: cover; background-repeat: no-repeat; }
    .window-center {  background-image: url("/images/frank-and-julia.jpg");  background-size: cover; background-repeat: no-repeat; }
    .window-right { background-image: url("/images/Seaview_Farm_Surrounding_Attractions-1a.jpg");  background-size: cover; background-repeat: no-repeat; }
    
    .image-banner-top, .image-banner-middle, .image-banner-bottom { font-weight: 700; text-transform: uppercase; position: absolute; right: 60px; }
    .image-banner-top { font-size: 13px; line-height: 15px; bottom: 88px; }
    .image-banner-middle { font-size: 25px; line-height: 25px; bottom: 63px; }
    .image-banner-bottom { font-size: 8px; line-height: 13px; bottom: 50px; }
    
        #attract-images { width: 444px; height: 333px; padding: 33px; } 
    .attraction-header { clear: both; font-weight: 700; font-size: 16px; line-height: 21px; color: #555; padding: 13px;  }
    .attraction-description { clear: both; font-size: 14px; line-height: 23px; color: #777; }
    body { font-family: "Montserrat", sans-serif; padding: 0; margin: 0; }
    html { scroll-behavior: smooth; }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    .center { text-align: center; }
    .mySlides {display: none;}
    img {vertical-align: middle;}
    .slideshow-container { max-width: 1000px; position: relative; margin: auto; }
.text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; }
.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute;  top: 0; }
.fade { animation-name: fade; animation-duration: 1.5s; }
@keyframes fade { from {opacity: .4}  to {opacity: 1} }
@media only screen and (max-width: 300px) { .text {font-size: 11px; } }
    .accordion { border: none; background-color: #fff; border-top: 1px solid #ccc; cursor: pointer; padding: 18px; width: 100%;  text-align: left; outline: none; font-size: 15px; transition: 0.4s; }
    .active, .accordion:hover { background-color: #f7f7f7; color: #576f90; border-top: 1px solid #576f90; }
    .panel { padding: 10px 18px; display: none; background-color: white; overflow: hidden; }
    .contact-header { font-size: 20px; line-height: 32px; font-weight: 700; color: #555; padding: 23px 0; }
    .contact-subheader { font-size: 16px; line-height: 24px; font-weight: 500; color: #555; padding: 23px 0; }
    input[type=text] { padding: 5px; width: 100%;  }
    textarea { width: 100%; resize: none; height: 200px; }
    #garden-images {  width: 280px; height: 180px; margin: 10px 10px; }
    input[type=submit] { background-color: #576f90; color: #fff; width: 100px; padding: 13px; margin: 13px 0; }
    .about-window { clear: both; padding: 50px; color: #777; line-height: 26px; font-size: 16px; }
    .about-images { clear: both; padding-top: 100px; }
    .about-left, .about-center, .about-right { display: inline-block; height: 250px; background-size: cover; background-repeat: no-repeat; background-position: center;  }
    .about-left { width: 33%; background-image: url("/images/about-left.webp"); }
    .about-right { width: 33%; background-image: url("/images/about-right.webp"); }
    .about-center { width: 34%; background-image: url("/images/about-center.webp");  }
    .ptab { padding: 33px 0; }
        .garden-heading { clear: both; font-size: 20px; line-height: 32px; color: #555; font-weight: 700; text-transform: uppercase; }
    .garden-header { clear: both; font-size: 37px; line-height: 44px; color: #555; font-weight: 700; text-align: center; padding: 13px; }
    .garden-subheader { clear: both; font-size: 14px; line-height: 14px; color: #555; font-weight: 700; text-align: center; padding: 13px; }
    .garden-bold { clear: both; font-size: 20px; line-height: 32px; color: #555; font-weight: 700; text-align: center; padding: 13px; }
    .garden-description { clear: both; font-size: 16px; line-height: 26px; color: #555; font-weight: 400; text-align: center; padding: 13px; }
    #garden-image { padding: 13px; width: 300px; margin: 0 auto; }
    #SplashScreen { background-position: center;  background-image: url("/images/DSC4087-1024x705.jpg"); text-align: center; padding: 50px; background-size: cover; width: 100%; height: 600px; clear: both; }
    #splashscreen-header { text-shadow: 2px 2px #000; font-size: 64px; line-height: 54px; font-weight: 700;  text-transform: uppercase; color: #fff; }
    #splashscreen-subheader {text-shadow: 2px 2px #000; font-size: 32px; line-height: 32px; text-transform: uppercase;  color: #fff; }
    #spanBox {  background-color: #DBA07C; color: #fff; text-transform: uppercase; padding: 15px; display: block; width: 400px; margin: 50px auto; }
    #spanBox a { color: #fff; text-decoration: none; }
    header { clear: both; display: block; width: 100%; height: 100px; position: fixed; background-color: #fff; z-index: 9;  }
    .header-spacer { clear: both; height: 100px; }
    .col { clear: both; display: block; width: 100%; }
    .column, .col-2, .col-3, .col-4, .column-center { display: inline-block; vertical-align: top; }
    .col-2 { width: 45%; margin: 13px; }
    .col-3 { width: 31%; }
    .col-4 { width: 23%; padding: 20px 10px;  }
    footer { background-color: #7e91ab; color: #fff; }
    footer hr { border: 1px solid #fff; }
    .footer-header { font-weight: 700; font-size: 18px;  }
    #baseline { width: 100%; text-align: center; background-color: #465973; color: #fff; padding: 30px 0; line-height: 28px; }
    #welcome-banner { text-align: center; width: 100%; padding: 50px 0; }
    .section-banner-header { clear: both; width: 100%; padding: 0 100px; background-color: #576f90; color: #fff; font-size: 27px; line-height: 50px; height: 50px; font-weight: 700; }
    .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; }
    .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }
    .sidenav a:hover { color: #f1f1f1; }
    .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; }
    .dropdown-container { display: none; background-color: #262626; padding-left: 8px; }
    .fa-caret-down { float: right; padding-right: 8px; }
    #main { transition: margin-left .5s; padding: 16px; }
    #header-nav { line-height: 100px; font-size: 23px; color: #555; text-decoration: none; margin: 0 23px; }
        .section-window { clear: both; width: 80%; margin: 30px auto;  }
    .unit-header { clear: both; font-size: 20px; line-height: 32px; color: #555; font-weight: 700; }
    .unit-subheader { clear: both; padding-top: 23px; font-size: 16px; line-height: 21px; color: #555; font-weight: 700; }
    .unit-description { clear: both; font-size: 14px; line-height: 23px; color: #777; font-weight: 500; padding-bottom: 23px; }
    .unit-guest-subheader { clear: both; padding: 33px 0; font-size: 20px; line-height: 22px; text-transform: italic; font-weight: 700; }
    #unit-images { width: 300px; height: 300px; }
        #information-banner { clear: both; width: 100%; padding: 50px 0; background-color: #dba07c; color: #fff; text-align: center; font-size: 21px; line-height: 33px; }
    #welcome-banner { clear: both; width: 100%; color: #555; }
    #welcome-banner h2 { font-size: 41px; line-height: 49px; text-transform: uppercase; }
    #welcome-banner h3 { font-size: 18px; line-height: 29px; }
    #circle-button { font-size: 14px; cursor: pointer; font-weight: bolder; text-align: center; line-height: 16px; background-color: #fff; padding: 8px 13px; border-radius: 15px; border: 1px solid #576F90;  color: #576F90; }

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
#header-logo { height: 75px; padding-top: 13px; }
  .hide { display: none; }
  .no-hide { display: inline-block; }
  

@media screen and (max-width: 992px) {
  .hide { display: inline-block; }
  .no-hide { display: none; }
  #header-nav { display: none; }
  .column, .col-2, .col-3, .col-4, .about-left, .about-center, .about-right { display: block; vertical-align: top; width: 100%; }
  #about-image { float: left; padding: 0; width: 98%; }
  #attract-images {  width: 280px; height: 180px; margin: 10px auto; }
  #garden-images {  width: 280px; height: 180px; margin: 10px auto; }
  #splashscreen-header { text-shadow: 2px 2px #000; font-size: 24px; line-height: 34px; font-weight: 700; text-transform: uppercase; color: #fff; }
  #splashscreen-subheader { text-shadow: 2px 2px #000; font-size: 20px; line-height: 24px; padding-top: 50px; text-transform: uppercase; color: #fff; }
  #spanBox { width: 250px; }
}