@charset "UTF-8";
/* CSS Document */
.center {margin: auto;width: 100%;}
.headline {margin: auto; width: 100%; 
            font-size: 2.5rem;
/*
            color: #fff;
            font-weight: 600;
*/
            text-align: center;
            padding-bottom: 30px;}

.stamp{background-image:url("images/Jax-stamp-faded.png");background-repeat: no-repeat;
  background-size: 105%; background-position:center;}
/* Full height image header */
.bgimg-1 {
  background-position: center;
  background-size: cover;
/*background-image: url("images/frontHome2.jpg");*/
  min-height: 100%;
}
/* add video */
/*
#myVideo {
  right: 0;
  width: 100%; 
  height: auto;
}
*/
.make-white {
  background-color: rgba(255,255,255,.7); /* white background with opacity */
	border-radius: 10px;
	box-shadow: 0 5px 20px 20px rgba(255,255,255, 0.7);
	padding:2px 10px 5px 15px;
	margin-top:0px;
/*mask-image: linear-gradient(to bottom, black 0%, transparent 100%);*/

}
.bgimg-cattails {
  background-image: url('images/bkgd-cattails.jpg');
  min-height: 100%;
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center;
  background-size: cover;
}
.bgimg-beachhouses {
  background-image: url('images/bkgd-beachhouses.jpg');
  min-height: 100%;
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center;
  background-size: cover;
}
.bgimg-map {
  background-image: url('images/bkgd-overhead-grid.jpg');
  min-height: 100%;
	height:100%;
/*	margin-bottom:0px;*/
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center;
  background-size: cover;
}
.bgimg-pier {
  background-image: url('images/bkgd-pier.jpg');
  min-height: 100%;
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center;
  background-size: cover;
}
.bgimg-beach2 {
  background-image: url('images/bkgd-beach.jpg');
  min-height: 100%;
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center;
  background-size: cover;
}
.bgimg-downtown {
  background-image: url('images/bkgd-downtown-night.jpg');
  min-height: 100%;
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center;
  background-size: cover;
}
.bgimg-beach {
  background-image: url('images/bkgd-beach-seagulls.jpg');
  min-height: 100%;
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center;
  background-size: cover;
}

.bgimg-beach-above {
  background-image: url('images/bkgd-beach-above.jpg');
  min-height: 100%;
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center;
  background-size: cover;
}

.bgimg-A1A {
  background-image: url('images/bkgd-a1a.jpg');
  min-height: 100%;
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center;
  background-size: cover;
}
.bgimg-golf {
  background-image: url('images/bkgd-golf.jpg');
/*	 filter: brightness(1.1);;*/
  min-height: 100%;
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center;
  background-size: cover;
}
.video-container {
  /* Set the desired dimensions for the container */
  width: 100%; /* Or a specific width, like 80vw or 500px */
  height: 100vh; /* Or a specific height, like 75vh or 400px */
  overflow: hidden; /* This is crucial to hide the overflowing parts of the video */
  position: relative; /* Essential for positioning the video absolutely within it */
/* background-image: url("images/kitchen-still.gif");*/
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This scales the video to fill the container while preserving its aspect ratio and cropping the excess */
  position: absolute; /* Allows the video to be positioned relative to its container */
  top: 0;
  left: 0;
}

.mainImg {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This scales the video to fill the container while preserving its aspect ratio and cropping the excess */
  position: absolute; /* Allows the video to be positioned relative to its container */
  top: 0;
  left: 0;
	z-index: -1;
}
/* END add video */
.bar .button {
  padding: 12px;
}

.responsive-logo {
  width: 100%;
  max-width: 230px;
  height: auto;
	}
.responsive-logo-mobile {
  width: 100%;
  max-width: 300px;
  height: auto;
	}
.shadow {
    text-shadow: 5px 5px 5px rgb(0 0 0 / .9), -1px -1px 5px rgb(0 0 0 / .7)
}
	.black-overlay {filter: brightness(80%)}
	.centerImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}
.centerImgButton {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
	.pale-teal{background-color: rgba(51,153,153,.20)}
	.pale-teal-bar{background-image: linear-gradient(to left, rgba(51,153,153, .8),   rgba(255,255,255,.9));}

	.collapsible {
  background-color: #fff;
  color: #0DC4C4;
text-transform: uppercase;
font-weight: bold;
  cursor: pointer;
  padding: 0 10px;
  width: 100%;
  border: none;
  text-align: right;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #fff;
}

.content {
  padding: 0 5px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #fff;
}
	
	
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.circle {height: 10vw;width: 10vw;background-color: teal;border-radius: 50%;display: flex; align-items: center; 
  justify-content: center;padding-left:auto;padding-right:auto;margin:10px;}

.circle-container-sm{display: flex;flex-direction:row;justify-content: center;}
.circle-sm {height: 4vw;width: 4vw;background-color: teal;border-radius: 50%;display: flex; align-items: center; 
  justify-content: center;padding-left:auto;padding-right:auto;margin:10px;}

.circle-outline {height: 120px;width: 120px;border-radius: 50%; background-color: #f0f0f0; display: flex;justify-content: center;align-items: center;border: 5px solid teal;}


.circle-container-photo{display: flex;flex-direction:row;justify-content: right;height:100%; align-items: center;
}

.circle-photo {height: 90%;width:50%;background-color: teal;border-radius: 50%;display: flex; align-items: right; 
  justify-content: center;padding-left:auto;padding-right:auto;margin:10px;}
.inset-photo{;width: 60%;border-radius: 50%;justify-content: center;padding-left:auto;padding-right:auto;margin:10px;}
/* Slideshow container */
.slideshow-container {
  position: relative;
  background-color: rgba(51,153,153,.20);
/*	height: 800px;overflow: hidden;*/
/* display: flex;align-items: stretch;*/
}
.slideshow-container .fade {
  transition: opacity 1.5s ease-in-out; /* Changed from 0.5s to 1.5s */
}
/* Slides */
.mySlides {display: none;height: 500px;padding-top: 120px;padding-left:30%;padding-right:30%;padding-bottom:50px;text-align: center;}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    padding: 20px;
    background-color: rgba(51,153,153,.50);
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: rgba(51,153,153,.80);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active, .dot:hover {
  background-color: #717171;
}

/* Add an italic font style to all quotes */
q {font-style: italic;font-size: 1.2em }

/* Add a blue color to the author */
.author {color: teal;font-size: 1.2em }
	
/* END Slideshow container */
	

/*Gallery of Communities ----------------------------------------------------------------------------*/
img {
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.container-communities {
  position: relative;
}

/* Hide the images by default */
.myJaxSlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

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

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

/*
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: black;
   color: white;
   text-align: center;
	
}
*/
.photograph {float:left; margin:25px 60px 30px 0; border: #fff solid 15px; box-shadow: 5px 10px 8px 10px #888888; width:45%; rotate: -2deg;}
.photograph-right {float:right; margin:20px -20px 20px 60px; border: #fff solid 15px; box-shadow: 5px 10px 8px 10px #888888; width:45%; rotate: 2deg;}

.contact-container {width: 70%; margin-left:auto;margin-right:auto}
.radio-container {display:flex; flex-direction: row; justify-content: center;}
.radio-container > div {
/*  background-color: dodgerblue;*/
  color: white;
  width: 150px;
  margin: 5px 0;
  text-align: center;
  line-height: 50px;
  font-size: 15px;
}
.sub-menu {
    display: none;
/*    flex-direction: column;*/
    position: relative;
/*
    top: 3.45rem;
    left: -5%;
*/
    background-color:#EAEAEA;
    width: 100%;
}

.dropdown-hover-sub:hover .dropdown-container{display:block}


.hero-text {
  text-align: center;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
	line-height: 1.1;
}

.hero-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

.hero-text button:hover {
  background-color: #555;
  color: white;
}
	
.flex-container-text {
display: flex;
flex-direction: row;
flex-wrap: wrap;
/*  background-color: #f1f1f1;*/
}
.flex-container-text > div {
background-color: rgba(198,198,198,0.50);
color: black;
flex: 30%;
margin: 10px;
text-align: center;
line-height: 1.3;
font-size: 16px;
padding:20px;
border-radius: 20px;
}

.whitish >div {background-color: rgba(255,255,255,0.50);}




.flex-container-4 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5); /* Horizontal offset, vertical offset, blur radius, spread radius, color */
}
.flex-container-4 > div {
background-color: rgba(198,198,198,0.50);
color: black;
flex: 22%;
margin: 10px;
text-align: center;
line-height: 1.5;
font-size: 16px;
padding:20px;
border-radius: 20px;
}


h1, h2 {line-height: 1.2}
h3 {line-height:1.2}


a {text-decoration: none;}
a:hover {color:teal; text-decoration: none;font-weight:bolder;font-size:17px;}
.subhead{color: teal; font-weight: 800;font-size: 30px}
.subhead-h3{color: teal; font-weight: 600;}

input[type="radio"]{
   appearance: none;
   border: 1px solid #d3d3d3;
   width: 30px;
   height: 30px;
   content: none;
   outline: none;
   margin: 0;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

input[type="radio"]:checked {
  appearance: none;
  outline: none;
  padding: 0;
  content: none;
  border: none;	

}

input[type="radio"]:checked::before{
  position: absolute;
  color: teal !important;
  content: "\00A0\2713\00A0" !important;
  border: 1px solid #d3d3d3;
  font-weight: bolder;
  font-size: 23px;
	width: 30px;
   height: 30px;
	line-height: 1.3em;
}
.contactInfo{display:inline-block; text-align: left; max-width: 600px; padding:20px 10px 0; color: white;}
.contact {font-size: 18px;}
.contactInfo-mobile{display:inline-block; text-align: center; max-width: 600px; padding:20px 10px 0; color: white;}
.contact-mobile {font-size: 20px; padding:0px;margin:0px;padding-bottom:20px;line-height:1.3}

ul {  list-style: none; /* Removes default bullets */
  padding-left: 0; /* Resets default padding */
}
li {margin-left:20px;   position: relative;
  padding-left: 20px; /* Creates space for the custom bullet */
}
li::before{content: '•'; 
	font-size: 2em;
	line-height:1em;
  position: absolute;
  left: 0;
  color: teal;
  font-weight: bold;}

/* MOBILE DROPDOWN------------------------------------------*/

.mobileBlock {background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(23, 46, 46, 1)); border-bottom:1px white solid;border-top:1px white solid;
}
.mobilePad{padding-left:50px;}

.submobilePad{padding:0 50px; margin:0}

.closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

.sideBar-img{height: 100vh !important; background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/01-Sunset.jpg");		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		left: 0 !important;
		top: 0 !important;
		padding: 0;}
.black-overlay-mobile {
position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100vh; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
color:white;}

.social:hover{opacity:0.60}
.employee-card{margin-top:64px; margin-left:20%; margin-right:20%;}
/*
@media (min-width:993px){.modal-content{width:900px}.hide-large{display:none!important}.sideBar-img.collapse{display:block!important}}
@media (max-width:992px){.sideBar-img.collapse{display:none}.main{margin-left:0!important;margin-right:0!important}.auto{max-width:100%}}
*/
#testimonials {
	padding-top: 150px; /* Adjust this value based on your header's height */
  margin-top: -150px;
  display: block; /* Ensure the padding and margin are applied correctly */
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.image-wide {display:inline}.image-square{display:none}
.mySlides {padding-left:20%;padding-right:20%;}.add-row {margin-top:15px;}.contact-container {width: 95%; margin-left:auto;margin-right:auto}.radio-container > div {text-align: left; font-size: 20px;  width: 200px;}h5.contact{padding:20px 1px 0; font-size: 15px}.radio-container {flex-direction: column;}.mySlides {height: 600px;padding-top: 100px;padding-left:10%;padding-right:10%;padding-bottom:50px;}.photograph {float:none; margin:25px 10px 30px 10px; border: #fff solid 13px; width:100%; rotate: 0deg;}
.photograph-right {float:none; margin:25px 10px 30px 10px; border: #fff solid 13px; width:100%; rotate: 0deg;}.flex-container-4 {flex-direction: column;}.headline {margin: auto; line-height: 1}.employee-card{margin-top:64px; margin-left:5%; margin-right:5%;}.accordian-body{overflow-wrap: break-word;word-break: break-word}

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {.image-wide {display:inline}.image-square{display:none}.quarter{width:100%}.mySlides {padding-left:20%;padding-right:20%;}.add-row {margin-top:15px;}.circle{height: 16vw;width: 16vw;font-size: 1.0em;line-height: 1.05em;}.contact-container {width: 90%; margin-left:auto;margin-right:auto}.radio-container > div {text-align: left; font-size: 20px;  width: 200px;}h5.contact{padding:20px 1px 0; font-size: 16px}.radio-container {flex-direction: column;}.mySlides {height: 600px;padding-top: 50px;padding-left:10%;padding-right:10%;padding-bottom:50px;}.photograph {float:none; margin:25px 60px 30px 0; border: #fff solid 13px; width:100%; rotate: 0deg;}
.photograph-right {float:none; margin:25px 10px 30px 10px; border: #fff solid 13px; width:100%; rotate: 0deg;}.flex-container-4 {flex-direction: column;}.employee-card{margin-top:64px; margin-left:5%; margin-right:5%;}

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {.image-wide {display:none}.image-square{display:inline}.quarter{width:45%;margin-left:1%; margin-right:1%;}.mySlides {padding-left:20%;padding-right:20%;}.add-row {margin-top:0px;}.circle{height: 14vw;width: 14vw;font-size: 1.0em;line-height: 1.05em;}.contact-container {width: 75%; margin-left:auto;margin-right:auto}.radio-container > div {margin: 5px 10px;font-size: 20px;}.mySlides {height: 500px;padding-top: 50px;padding-left:10%;padding-right:10%;padding-bottom:50px;}.photograph {float:left; margin:25px 60px 30px 0; border: #fff solid 13px; width:60%; rotate: -2deg;}
.photograph-right {float:none; margin:25px 10px 30px 10px; border: #fff solid 13px; width:100%; rotate: 0deg;}.flex-container-4 {flex-direction: column;}.employee-card{margin-top:64px; margin-left:20%; margin-right:20%;}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {.image-wide {display:none}.image-square{display:inline}.quarter{width:22.99999%;}.mySlides {padding-left:30%;padding-right:30%;}.add-row {margin-top:0px;}.circle{font-size: 1.1em;line-height: 1.1em;}.radio-container {flex-direction: row;}.mySlides {height: 500px;padding-top: 100px;padding-left:10%;padding-right:10%;padding-bottom:50px;}.photograph {float:left; margin:25px 60px 30px 0; border: #fff solid 15px; box-shadow: 5px 10px 8px 10px #888888; width:45%; rotate: -2deg;}
.photograph-right {float:right; margin:20px -20px 20px 60px; border: #fff solid 15px; box-shadow: 5px 10px 8px 10px #888888; width:45%; rotate: 2deg;}.flex-container-4 {flex-direction: row;}



}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	.image-wide {display:inline}.image-square{display:none}.circle{height: 10vw;width: 10vw;font-size: 1.2em;line-height: 1.2em;}.mySlides {height: 500px;padding-top: 100px;padding-left:30%;padding-right:30%;padding-bottom:50px;}

	}