/* 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:#EFEFEF; /*background-image: url('pics/back3.png');
    background-repeat: repeat;
    background-size: auto;*/}

li {color:#d3bda7; padding-bottom:15px; font-size: 1.5rem; line-height:1.7; }

/* ELEMENTS */
.content-wrap {margin-left:10%; margin-right:10%;}
.faded {width:100%; border: none; height: 2px; margin:30px auto 20px; background: linear-gradient(to right, transparent, transparent 1%, #adc0d3 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;}
.opaque {opacity:0.7;}
.opaque:hover {opacity:1;}
a {color:#FFCC99;}
a:hover {color:#FFF;}

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

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


.firm { margin-top:10px; padding:12px 30px;  border:solid 2px #d3bda7; border-radius:4px; background:none; color:#d3bda7;}
.firm:hover {padding:12px 30px; border:solid 2px #fff; border-radius:4px; background:#3998d3; color:#fff; }
.float_right { float:right; }
.fullwide {width:100%;}
.separator {
    position:relative; margin-top:-40px; z-index:1;
	height: 102px;
    width: 100%;
    background-image: url('pics/diamond.png');
    background-repeat: repeat; 
    display: inline-block; 
    vertical-align: middle; 
}
.sepgold { position:relative; margin-top:-35px; z-index:1;
	height: 70px;
    width: 100%;
    background-image: url('pics/diamond_gold.png');
    background-repeat: repeat; 
    display: inline-block; 
    vertical-align: middle;  
}

/* 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;}

/* Oswald 500 for H1 to H3 */
@font-face {
    font-family: 'Oswald';
    src: url('/fonts/Oswald-Medium.woff2') format('woff2'),
        url('/fonts/Oswald-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Oswald 300 for H4 to H6 */
@font-face {
    font-family: 'Oswald';
    src: url('/fonts/Oswald-Light.woff2') format('woff2'),
        url('/fonts/Oswald-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Raleway 300 for other text */
@font-face {
    font-family: 'Raleway';
    src: url('/fonts/Raleway-Light.woff2') format('woff2'),
        url('/fonts/Raleway-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('/fonts/Raleway-Italic.woff2') format('woff2'),
        url('/fonts/Raleway-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* Handwriting Signatures*/
@font-face {
    font-family: 'PaulSignature';
    src: url('/fonts/RPaulSignature.woff2') format('woff2'),
        url('/fonts/PaulSignature.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Handwriting*/
@font-face {
    font-family: 'handlee';
    src: url('/fonts/handlee.woff2') format('woff2'),
        url('/fonts/handlee.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 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;
}

/* Apply Handlee font to handwriting */
.handlee {font-family: 'Handlee', cursive;}

/* Apply PaulSignature to signatures */
.signature, .writ {font-family: "Paul Signature"; font-size:8rem; position:relative; z-index:10; text-shadow:  0 1px 0 hsl(174,5%,80%),

0 1px 4px rgba(0,0,0,.5),
0 4px 5px rgba(0,0,0,.5),
0 7px 10px rgba(0,0,0,.5),
0 12px 10px rgba(0,0,0,.5),
0 22px 20px rgba(0,0,0,.5);
2px 5px 5px rgba(255,255,255,.09),}

.writ { font-size:4rem;}
.writname {font-family: "Raleway";   font-weight: 300; font-size:2rem;}
.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;}
.heading {color:#555;}
.golden {color:#FFCC99;}
.dusk {color:#776b5f;}
.spark {color:#9966FF;}


/* PAGE GRID */
 .page-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, auto);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.page-div1 { grid-area: 1 / 1 / 2 / 2;    background: #6375bf; border-bottom: solid 3px #7f7367;}
.page-div2 { grid-area: 2 / 1 / 3 / 2; }
.page-div3 { grid-area: 3 / 1 / 4 / 2; }
.page-div4 { grid-area: 4 / 1 / 5 / 2; } 
	
.container {width: 100%; margin-right: auto; margin-left: auto;}
.innerwrap {width: 70%; margin-right: auto; margin-left: auto;}
.innerwrapwide {width: 100%; margin-right: 10%; margin-left: 14%;}
.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 { position:relative; z-index:100; display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: 50px; padding: 1em;  font-size:1.6rem;}

.logo_head { margin-top:20x; margin-left:20px; width:80%; max-width:230px; 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 1rem;
  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-color:#4F76FF;
	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%; }
}

/* SPLASH */
.pre_splash {text-align:center; width:100%; margin-top:0px; background:none; color:#EADAB5; position:relative;}

.splash {width:50%; max-width:600px; margin-left:auto; margin-right:auto; margin-top:-30px; margin-bottom:50px; padding:7px; border: solid 4px #999; background-color:#333; border-radius:12px; color:#EADAB5;}
.splash h2,
.splash h3,
.splash img { width:100%; height: auto margin-bottom: -15px; font-size: 14px; font-weight: 100; cursor: pointer; margin-left:auto; margin-right:auto;}

@media (max-width: 900px) {
.pre_splash {text-align:center; width:100%; margin-top:-70px; }
.pre_splash img {width:90%; max-width:500px; z-index:900;}
.splash {width:80%; margin-top:-40px;}
}

@media (max-width: 500px) {
.pre_splash {text-align:center; width:100%; margin-top:-40px; }
.splash {width:90%; margin-top:10px;}
}

@media (max-width: 340px) {
.pre_splash {text-align:center; width:100%; margin-top:-0px; }
.splash {.splash {width:100%; margin-top:12px;}
}

/* FOOTER */

.main_footer {
    padding: 80px 0 0;
	position: relative;
   /* background: #39bfee; */
 background: rgb(43,43,73);
background: -moz-linear-gradient(180deg, rgba(43,43,73,1) 0%, rgba(59,59,110,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(43,43,73,1) 0%, rgba(59,59,110,1) 100%);
background: linear-gradient(180deg, rgba(43,43,73,1) 0%, rgba(59,59,110,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2b2b49",endColorstr="#3b3b6e",GradientType=1); 
    margin-top: 70px;
}

.rowthree {
    padding: 30px 0;
	position: relative;
	margin-top: 0px;
	 background: rgb(210,210,210);
background: -moz-linear-gradient(27deg, rgba(210,210,210,1) 0%, rgba(233,233,233,1) 32%, rgba(249,249,249,1) 100%);
background: -webkit-linear-gradient(27deg, rgba(210,210,210,1) 0%, rgba(233,233,233,1) 32%, rgba(249,249,249,1) 100%);
background: linear-gradient(27deg, rgba(210,210,210,1) 0%, rgba(233,233,233,1) 32%, rgba(249,249,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d2d2d2",endColorstr="#f9f9f9",GradientType=1); 
	}

.rowfour {
    padding: 30px 0;
	position: relative;
	margin-top: 70px;
	 background: rgb(3,48,71);
	background: -moz-linear-gradient(27deg, rgba(3,48,71,1) 0%, rgba(41,83,126,1) 24%, rgba(32,104,157,1) 42%, rgba(41,110,181,1) 100%);
	background: -webkit-linear-gradient(27deg, rgba(3,48,71,1) 0%, rgba(41,83,126,1) 24%, rgba(32,104,157,1) 42%, rgba(41,110,181,1) 100%);
	background: linear-gradient(27deg, rgba(3,48,71,1) 0%, rgba(41,83,126,1) 24%, rgba(32,104,157,1) 42%, rgba(41,110,181,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#033047",endColorstr="#296eb5",GradientType=1); 
	}
	
.footer_sec ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer_sec ul li a {
    color: #97b9c9;
    display: inline-block;
    position: relative;
    padding: 0 0 0 20px;
}

.footer_sec ul li a:before {
    content: "\f105";
    display: block;
    position: absolute;
    top: 1px;
    font-family: "Font Awesome 5 Free";
    left: 0;
    font-weight: 900;
}

.footer_sec ul li {
    margin: 0 0 5px;
}

.footer_sec h3 {
    color: #97b9c9;
    margin: 10px 0 10px;
    font-size: 20px;
}

.footer_sec {
    color: #888;
}

.footer_top {
    max-width: 750px;
    margin: 0 auto 40px;
    display: block;
    width: 100%;
}

.footer_top p {
    color: #888;
}

a.footer-logo {
    height: 130px;
    width: 130px;
    display: block;
    margin: 0px auto 0;
    padding: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 -6px 26px rgba(146, 90, 164, 0.15);
    position: relative;
    z-index: 2;

}

a.footer-logo:after {
    border-radius: 50%;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-animation: 2.5s anim-effect-front 0s linear infinite;
    animation: 2.5s anim-effect-front 0s linear infinite;
    z-index: -1;
    box-shadow: 0 0 0 40px rgba(232, 232, 232, 1);
	border: 2px solid #ffd0aa;
}