/* MAIN STYLES */
html, body {
  height: 100%;  font-size: 10px; /* Easy to calculate rem sizes. */ 
}
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}
body {background-color:#efedee; }

hr.hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(190,190,190, 1), rgba(0, 0, 0, 0));
}

li {color:#d3bda7; padding-bottom:15px; font-size: 1.5rem; line-height:1.7; }
.innerwrap ul li {color:#4b5788; padding-top:0px; font-size: 1.6rem; line-height:1; margin-left:40px; }

/* ELEMENTS */ 
.bluebar {color:#fff; text-align:center; padding:40px 0;}
.bluebar2 {color:#fff; text-align:center; padding:40px 0;}
.bluebar3 {color:#fff; text-align:center; padding:40px 0; background: rgb(64,84,119);
background: linear-gradient(175deg, rgba(64,84,119,1) 0%, rgba(94,126,182,1) 27%, rgba(64,84,119,1) 100%);}
.whitebar {background-color:#fff; color:#777; text-align:center; padding:0px 0;}
.darkbar {background-color:#333; text-align:center; padding:40px 0;}
.darkbar p {color:#dbdbdbd; text-align:center;}
.darkbargrid p {color:#dbdbdb; text-align:left;}
.timegrid .phead  {margin-top:-10px; border-bottom:dotted 2px #78B1F4; color:#78B1F4; text-align:left;}
.faque {background-color:#526f8c; color:#fff; text-align:center; padding:40px 0; background-image: faqback.png;}
.faq {
    background-color: #526f8c;
    color: #fff;
    text-align: center;
    padding: 40px 0;
    background-image: url('pics/faqback2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.faqblu {
    color: #fff;
    text-align: center;
    padding: 40px 0;
    background-image: url('pics/faqback2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
	display:inline;
}
.dblue {
    background-color: #E4E1E3;
    color: #fff;
    text-align: center;
    padding: 40px 0;
    background-image: url('pics/faqback.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center; /* Adjusted background-position */
}
.dblueb {
    background-color: #;
    color: #999;
    text-align: center;
    padding: 40px 0;
	margin-top:-12px!important;
}


.faded {width:100%; border: none; height: 1px; margin:30px auto; background: linear-gradient(to right, transparent, transparent 1%, #999 50%, transparent 99%, transparent 100%);}
button { margin-top:10px; padding:2px 20px; border:solid 2px #999; border-radius:4px; background:none;}
button:hover {padding:2px 20px; border:solid 2px #fff; border-radius:4px; background:#3998d3; color:#fff;}
.author_button { margin-top:10px; padding:2px 20px 4px; border:solid 1px #777; border-radius:2px; background:#333; text-align:left;}
.author_button:hover {padding:2px 20px 4px; border:solid 1px #777; border-radius:2px; background:#555; color:#fff;}
.bodbutton1 {color: rgb(108, 108, 108); position:relative; z-index:999999;
  padding-bottom: 10px;
  border-color: rgb(164, 187, 198);
  letter-spacing: 0.15em;
  padding-right: 30px;
  margin-top: 20px;
  padding-left: 30px;
  border-radius: 0px;
  padding-top: 10px;
  margin-bottom: 10px;
  background-color: rgba(0, 0, 0, 0);}
  .bodbutton1:hover {background-color:#3399FF; color:#fff;}
  .probutton {display: inline-block; background-color:#353757; border:2px solid #fff;padding:6px 16px;text-align:center;text-decoration:none;font-size:1.6rem; border-radius:8px; color:#fff;	margin-bottom:20px;cursor:pointer;justify-content:center;margin:0 auto;}
   .probutton  a {color:#909eb2;}
  .probutton:hover{	background-color:#6aa9cc;	color:#fff!important;	padding:6px 16px;} 
    .probutton  a:hover {color:#fff;}
	
	  .probutton2 {display: inline-block; background-color:#3b4e7c; border:2px solid #4d5f8e;padding:5px 14px;text-align:center;text-decoration:none;font-size:1.4rem; border-radius:8px; color:#bcc8d8;	cursor:pointer;justify-content:center;margin:5px;}
   .probutton2  a {color:#909eb2;}
  .probutton2:hover{	background-color:#6aa9cc;	color:#fff!important;	padding:5px 14px;} 
    .probutton2  a:hover {color:#fff;}
	
	 .probutton3 {display: inline-block; background-color:#3b4e7c; border:2px solid #fce6b0;padding:5px 14px;text-align:center;text-decoration:none;font-size:1.4rem; border-radius:8px; color:#fff;	cursor:pointer;justify-content:center;margin:5px; 
	 background: rgb(234,224,154);
background: linear-gradient(138deg, rgba(234,224,154,1) 0%, rgba(223,179,65,1) 27%, rgba(182,145,49,1) 100%);}
   .probutton3  a {color:#909eb2;}
  .probutton3:hover{	background-color:#6aa9cc;	color:#fff!important;	padding:5px 14px;} 
    .probutton3  a:hover {color:#fff;}
	
	

.opaque {opacity:0.7;}
.opaque:hover {opacity:1;}
a {color:#FFCC99; text-decoration:none;}
a:hover {color:#FFF; text-decoration:none!important;}

.image-hover {
    transition: opacity 0.3s; /* Smooth transition for opacity change */
    cursor: pointer; /* Change cursor to hand symbol */
}
.image-hover:hover {
    opacity: 0.7; /* Set opacity to 0.7 on hover */
}

.btn-header{	display:flex;	flex-basis:20%;background-color:rgba(220,160,120, 0.8);color:black;border:2px solid #fff;padding:10px 30px;text-align:center;text-decoration:none;font-size:130%;	color:#fff;	text-transform:uppercase;margin-bottom:20px;cursor:pointer;justify-content:center;margin:0 2px;margin-top:30px;}.btn-header:hover{	background-color:rgba(244,244,244,0.7);	color:#12130F;	padding:10px 30px;} a{text-decoration:none;}

.firm { margin-top:10px; font-size:1.3rem; padding:3px 26px 5px;  border:solid 2px #d3bda7; border-radius:4px; background:none; color:#d3bda7;}
.firm:hover {border:solid 2px #fff; padding:3px 26px 5px; border-radius:4px; background:#3998d3; color:#fff; }

.callme { margin-top:10px; font-size:1.3rem; padding:5px 26px 6px;  border:solid 2px #d6c59e; border-radius:4px; background:#bfad80; color:#fff; margin-bottom:10px;}
.callme:hover {border:solid 2px #fff; padding:5px 26px 6px; border-radius:4px; background:#86AAE0; color:#fff; }

.specialty { margin-top:10px; font-size:1.1rem; padding:1px 14px 2px;  border:solid 1px #777; border-radius:4px; background:#444; color:#d3bda7;}
.specialty:hover {border:solid 1px #fff; padding:1px 14px 2px; border-radius:4px; background:#757775; color:#fff; }
.specialty-div {margin-top:-10px;}

.watch { margin-top:10px; padding:12px 30px;  border:solid 2px #fff; border-radius:4px; background:#10bfef; color:#fff; padding:10px 30px;text-align:center;text-decoration:none;font-size:140%; text-transform:uppercase;margin-bottom:20px;cursor:pointer;justify-content:center;margin:0 2px;margin-top:30px;}
.watch:hover {padding:9.5px 40px; border:solid 2px #fff; border-radius:4px; background:#3998d3; color:#fff; font-size:150%; }

.float_right { float:right; }
.fullwide {width:100%;}
.separator {
    position:relative; margin-top:-40px; z-index:1;
	height: 50px;
    width: 100%;
    background-image: url('pics/diamond.png');
    background-repeat: repeat; 
    display: inline-block; 
    vertical-align: middle; 
}
.sepgold {
    position: relative;
    margin-top: -100px;
    z-index: 1;
    height: 100px;
    width: 100%;
    background-image: url('pics/0wave2.png');
    background-size: 100% 100px;
    display: inline-block;
    vertical-align: middle;
}

.sepdb {
    position: relative;
    margin-top: -100px;
    z-index: 1;
    height: 100px;
    width: 100%;
    background-image: url('pics/0wave2.png');
    background-size: 100% 100px;
    display: inline-block;
    vertical-align: middle;
}
.sepdb2 {
    position: relative;
    margin-top: -110px;
	z-index: 1;
    height: 100px;
    width: 100%;
    background-image: url('pics/0wave0.png');
    background-size: 100% 100px;
    /* display: inline-block;
    vertical-align: middle; */
}

 @media (max-width: 770px) { 
 .sepdb2 { margin-top: -40px;}
 }

/* FONTS */
/* font Sizes */
h1 {font-size: 4.0rem;}
h2 {font-size: 3.6rem;}
h3 {font-size: 3.2rem;}
h4 {font-size: 2.8rem;}
h5 {font-size: 2.4rem;}
h6 {font-size: 2.2rem;}
p {font-size: 2rem; padding-top:20px; padding-bottom:20px;}

/* Import Oswald 500 from Google Fonts for H1 to H3 */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

/* Import Oswald 300 from Google Fonts for H4 to H6 */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap');

/* Import Raleway 300 and Italic from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400i&display=swap');

/* Apply fonts to elements */
/* Oswald 500 for H1 to H3 */
h1, h2, h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
}

/* Oswald 300 for H4 to H6 */
h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
}

/* Raleway 300 for other text */
body {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
}

/* Raleway Italic for italicized text */
em, i {
    font-family: 'Raleway', sans-serif;
    font-style: italic;
}


/* Apply Oswald 500 to H1 to H3 */
h1, h2, h3, .oswald500  {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
}

/* Apply Oswald 300 to H4 to H6 */
h4, h5, h6, .oswald300  {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
}

/* Apply Raleway 300 to other text */
body, p, li, .raleway {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
}

.writ { font-size:4rem;}
.writname {font-family: "Raleway";   font-weight: 300; font-size:1.6rem;}
.erase {font-family: "Erase"; } /* Use to clear fonts */

@media (max-width: 900px) {
.signature, .writ {font-size:6rem;}
}
  
  @media (max-width: 495px) {
.signature, .writ {font-size:4rem;}
}

/* COLORS */
.white {color:#fff;}
.golden {color:#FFCC99;}
.dusk {color:#7f6b57;}
.icon {width:35px; height:35px; margin:5px; opacity:0.8;}
.icon:hover {opacity:1.0;}

.container {width: 100%; margin-right: auto; margin-left: auto;}
.innerwrap {width: 70%; margin-right: auto; margin-left: auto;}
.innerwrap p { font-size:1.8rem; line-height:1.5;}
.gallery_container {width: 80%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}


/* ALIGNMENT */
.text-center {
  text-align: center !important;
}

/* Top nav */
.top-nav {
  background-color: rgba(98, 113, 127, 0.5); /* transparent */
  position: fixed; /* Make it sticky */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 1em 0px;
  font-size: 1.6rem;
  transition: background-color 0.4s ease; /* Smooth transition */
}

/* Add this class when scrolling down */
.top-nav.scrolled {
  background-color: rgba(52,53,53, 0.3); /* Fully opaque blue */
    border-bottom: solid 2px rgba(200,200,200,0.3);
}


.logo_head { margin-top:80px; margin-left:20px; width:80%; max-width:340px; height:auto; position:relative; z-index:999; }
.author_head {font-size:3rem; margin-left:20px;}

@media (max-width: 1000px) {
.logo_head { margin-top:70px; margin-left:20px; width:70%; max-width:240px; height:auto; position:relative; z-index:999; }
}

@media (max-width: 800px) {
.logo_head { margin-top:70px; margin-left:20px; width:80%; max-width:240px; height:auto; position:relative; z-index:999; }
.author_head {font-size:2rem;}
}

@media (max-width: 600px) {
.logo_head { margin-top:70px; margin-left:20px; width:80%; max-width:180px; height:auto; position:relative; z-index:999; }
}
  
.header_wrap, {top: 0; width: 100%; padding: 3px 0px 0; margin-left: auto; margin-right: auto; background-color: rgba(3, 32, 98, 0.5);  color: #f2c79d; border-bottom: solid 1px #a57f59; z-index: 100; }



.menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu > li {
  margin: 0 5px;
  overflow: hidden;
}

.menu > li a {color: #f2c79d;}
.menu > li a:hover {color: #fff;}

.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #fff;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: "";
  margin-top: -8px;
}

.menu-button::after {
  content: "";
  margin-top: -8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: -18px;
  transform: rotate(-405deg);
}

@media (max-width: 840px) {

  .menu-button-container {
    display: flex;
  }

  .menu {
    position: absolute;
    top: 0;
    margin-top: 80px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  #menu-toggle:checked ~ .menu li {
    border: 1px solid #333;
    height: 1.4em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .menu > li {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: white;
    background-color:  rgba(0, 0, 0, 0.7);
  }

  .menu > li:not(:last-child) {
    border-bottom: 1px solid #444;
  }
}

/* HERO */
.hero_pic {width:100%; height:auto; padding-bottom:12px;
    background-size:100% 100%;
    background-repeat:no-repeat;
	z-index: -100; }
	
.hero_div_medium, .hero_div_small {display:none;}	

@media (max-width: 900px) {
.hero_div_large, .hero_div_small {display:none;}	
.hero_div_medium {display:inline;}	
}
  
  @media (max-width: 495px) {
.hero_div_large, .hero_div_medium {display:none;}	
.hero_div_small {display:inline;}	
  }

/* VIDEO MODAL */
  /* Styles for the modal overlay */.modal-overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);z-index: 999;  }  /* Styles for the modal container */.modal-container {display: none; /* Hide the modal container by default */position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: none;padding: 0px;border-radius: 5px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);width: 75%;max-width: 80%; /* Make the modal responsive */max-height: 90%;height: auto; /* Make the modal responsive */box-sizing: border-box;  }  /* Styles for the close button */.modal-close {/* No changes here */  }  /* Style the video container with 16:9 aspect ratio */.modal-video-container {position: relative;padding-bottom: 56.15%; /* 16:9 aspect ratio. Was 56.25% */  }  /* Style the video */.modal-video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: solid 1px orange;  }   .my-modal-close  {font-size: 3.4rem;font-weight: 400;color: orange;padding-top: 0px;margin-top: -44px;top: 20px;margin-bottom: 30px;z-index: 900;position: relative;text-align: right;margin-right: 0px;  }
  
  @media (max-width: 700px) {
.modal-container {display: none; /* Hide the modal container by default */position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #222;padding: 0px;border-radius: 5px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);max-width: 95%;width: 100%; }
}