/***************************************************************** 
earthlily@gmail.com
------------------------------------------------------------------
Creation Date 7-30-2024
******************************************************************
******************************************************************
Updated or Modified Code must be commmented, dated and initialed.
Major revisions are dated and commented here.
-------------------------------------------------------------------
PAGE: styleSheet.CSS
Note: to verify all previous codes
MODIFIED DATE:
MODIFIED DATE:
*******************************************************************/


/*------------ BODY --------------------------*/

body {
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	background-color: #000000;
	}

/*------------ Fonts --------------------------*/

h1 {
font-size: 20px;
}

h2 {
font-size: 18px;
}

h3 {
font-size: 16px;
}

h4 {
font-family: Tahoma, Verdana, sans-serif;
font-size: 14px;
}

p {
	font-size: 12px;
	color: #FFFFFF;
}

/*------------ Links --------------------------*/

a:link {
	color: #FFFFFF;
	text-decoration: underline;
}

a:visited {
	color: #FFFFFF;
	text-decoration: underline;
}

a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

a:active {
	color: #FFFFFF;
	text-decoration: underline;
}

/*------------ Grid Links --------------------------*/

a.grid:link {
	color: #FFFFFF;
	text-decoration: none;
	font-weight: 300;
}

a.grid:visited {
	color: #FFFFFF;
	text-decoration: none;
	font-weight: 300;
}

a.grid:hover {
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
}

a.grid.activeGrid {
	color: #FFFFFF;
	text-decoration: underline;
	font-weight: bold;
}


a.grid2:link {
	color: #FFFFFF;
	text-decoration: none;	
	font-weight: bold;
}

a.grid2:visited {
	color: #FFFFFF;
	text-decoration: none;	
	ont-weight: bold;
}

a.grid2:hover {
	color: #FFFFFF;
	text-decoration: underline;
	font-weight: bold;
}

a.grid2.activeG2 {
	color: #FFFFFF;
	text-decoration: underline;
	font-weight: bold;
}


a.grid3:link {
	color: #000000;
	text-decoration: none;
}

a.grid3:visited {
	color: #000000;
	text-decoration: none;
}

a.grid3:hover {
	color: #000000;
	text-decoration: none;
	font-weight: bold;
}

a.grid3.activeG3 {
	color: #000000;
	text-decoration: underline;
	font-weight: bold;
}

a.grid4:link {
	color: #FFFFFF;
	text-decoration: none;	
}

a.grid4:visited {
	color: #FFFFFF;
	text-decoration: none;	
}

a.grid4:hover {
	color: #778899;
	text-decoration: none;
	font-weight: bold;
}

a.grid4.activeG4 {
	color: #778899;
	text-decoration: underline;
	font-weight: bold;
}

/*------------ Image Links --------------------------*/
/*--- called on the Galleries pages for images on hover------*/

a.menubarImg:link {
	padding: 0px;
}

a.menubarImg:visited {
	padding: 0px;
}

a.menubarImg:hover {
	padding: 0px;
	opacity: 0.65;
}

a.menubarImg:active {
	padding: 0px;
	opacity: 0.65;
}


/*------------ Overall Page Layout ----------------------*/

		.header {
			background-color: #3E3E3E;
			padding: 16px;
			border-bottom: 4px solid #808080;
			border-top-left-radius: 20px 20px;
			border-top-right-radius: 20px 20px;
			box-shadow: 3px 0px 0px rgba(255,255,255,0.25), 3px 0px 0px rgba(255,255,255,0.5);
		}

		.header2 {
			background-color: #3E3E3E;
			padding: 3px;
			border-bottom: 4px solid #808080;
			border-top-left-radius: 20px 20px;
			border-top-right-radius: 20px 20px;
			box-shadow: 3px 0px 0px rgba(255,255,255,0.25), 3px 0px 0px rgba(255,255,255,0.5);
		}


		.main {
			display: block;
			align-content: center;
			background-color: #000000;
			padding: 15px;
			margin-top: 3px;
		}

		.footer {
			background-color: #000000;
			text-align: center;
			font-size: 12px;
			padding: 0px;
		}

		.menu ul {
			list-style-type: none;
			margin-top: 3px;
			padding: 0px;
		}

		.menu li a {
			display: block;
			color: #FFFFFF;
			text-decoration: none;
			font-size: 16px;
			padding: 8px;
			margin-bottom: 7px;
			background-color: #000000;
			border: 1px solid #808080;
			border-top-left-radius: 7px 7px;
			border-top-right-radius: 7px 7px;
		}

		.menu li a:hover {
			font-weight: bold;
			color: #FFFFFF;
			border: 1px solid #808080;
			background-color: #778899;
		}

		.menu li a.active {
			font-weight: bold;
			color: #FFFFFF;
			border: 1px solid #808080;
			background-color: #778899;
		}


		.menu2 ul {
			list-style-type: none;
			margin-top: 3px;
			padding: 0px;
		}

		.menu2 li a {
			display: block;
			color: #FFFFFF;
			text-decoration: none;
			text-align: center;
			font-size: 14px;
			padding: 6px;
			margin-bottom: 7px;
			background-color: #808080;
			border: 1px solid #808080;
			border-top-left-radius: 7px 7px;
			border-top-right-radius: 7px 7px;
		}

		.menu2 li a:hover {
			font-weight: bold;
			color: #FFFFFF;
			border: 1px solid #808080;
			background-color: #5F7C98;
		}

		.menu2 li a.active {
			font-weight: bold;
			color: #FFFFFF;
			border: 1px solid #808080;
			background-color: #5F7C98;
		}

		.caption {
 		 color: #FFFFFF;
 		 font-size: 11px;
 		 padding-top: 4px;
 		 padding-bottom: 2px;
 		 position: relative;
 		 width: 100%;
 	     text-align: center;
		 font-weight: bold;
		}

		.captionNoBold {
 		 color: #FFFFFF;
 		 font-size: 11px;
 		 padding-top: 4px;
 		 padding-bottom: 2px;
 		 position: relative;
 		 width: 100%;
 		 text-align: center;
		}

		.captionMd {
 		 color: #FFFFFF;
 		 font-size: 14.5px;
 		 padding-top: 4px;
 		 padding-bottom: 2px;
 		 position: relative;
 		 width: 100%;
 		 text-align: center;
		 font-weight: bold;
		}

		.captionLg {
 		 color: #FFFFFF;
 		 font-size: 16px;
 		 padding-top: 4px;
 		 padding-bottom: 2px;
 		 position: relative;
 		 width: 100%;
 		 text-align: center;
		 font-weight: bold;
		}

/*------------ Links Grid  -------------------------*/


.wrapper {
  border: 2px solid #000000;
  border-radius: 8px;
  background-color: #000000;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(40px, auto);
  grid-column-gap: 2px;
  grid-row-gap: 2px;
}

.wrapper > div {
  background-color: #778899;
  border-radius: 7px 7px 0px 0px;
  text-align: center;
  padding: 8px;
  color: #FFFFFF;
  line-height: 1.4;
  font-size: 16px;
}

.wrapper2 {
  border: 2px solid #3E3E3E;
  border-radius: 8px;
  background-color: #3E3E3E;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(40px, auto);
  grid-column-gap: 2px;
  grid-row-gap: 2px;
}

.wrapper2 > div {
  background-color: #5F7C98;
  text-align: left;
  padding: 8px;
  color: #FFFFFF;
  line-height: 1.4;
  font-size: 12px;
}

.wrapper3 {
  border: 0px solid #3E3E3E;
  border-radius: 8px;
  background-color: #FFFFFF;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(40px, auto);
  grid-column-gap: 1px;
  grid-row-gap: 2px;
}

.wrapper3 > div {
  background-color: #000000;
  text-align: center;
  padding: 8px;
  color: #FFFFFF;
  line-height: 1.4;
  font-size: 14px;
}


/*------------ Move Left Side Items to Bottom on small devices------------------*/

		.showImages {
			display: block;
		}

/* hide left images from top use showImages2 for placement above the copyright */
		div.hideImages {
			
		}
				
		@media screen and (max-width: 600px) {
			div.hideImages{
			display: none;
			}
		}

/* hide pricing from bottom use until viewport is small enough - placement above the copyright */
		div.hideImages2 {
			
		}
				
		@media screen and (min-width: 601px) {
			div.hideImages2{
			display: none;
			}
		}

		@media screen and (max-width: 600px) {
		div.showImages2 {
			display: block;
		}
}

/*------------ Change Grid on small devices------------------*/

		.showFullGrid {
			display: block;
		}

/* hide left images from top use showImages2 for placement above the copyright */
		div.hideFullGrid {
			
		}
				
		@media screen and (max-width: 900px) {
			div.hideFullGrid{
			display: none;
			}
		}

/* hide pricing from bottom use until viewport is small enough - placement above the copyright */
		div.hideFullGrid2 {
			
		}
				
		@media screen and (min-width: 901px) {
			div.hideFullGrid2{
			display: none;
			}
		}

		@media screen and (max-width: 850px) {
		div.showFullGrid2 {
			display: block;
		}
}


/*------------ Layout Items-------------------------*/

		
		img {
			max-width: 100%;
			height: auto;
			}


		img.border {
			border: .75px solid #808080;
		}
		
		table {
 			border-collapse: collapse;
  			width: 100%;
		}
		tr {
			border-bottom: 1px solid #808080;
		}

		hr {
			display: block;
			height: .5px;
			opacity: .65;
		}

		tr.both{
		border-top: 1px solid #808080;
		border-bottom: 1px solid #808080;
		}

		tr.topOnly{
		border-top: 1px solid #808080;
		border-bottom: 0px solid #808080;
		}

		tr.hide {
			border-style: hidden;
		}
		tr.shade {
			background-color: #191919;
			opacity: .85;
		}
		
		th, td.space {
  			padding: 14px;
		}
		
		th, td.space2 {
			padding-top: 0px;
  			padding-left: 14px;
			padding-right: 14px;
			padding-bottom: 0px;
		}

		th, td.space3 {
			padding-top: 6px;
  			padding-left: 14px;
			padding-right: 14px;
			padding-bottom: 6px;
		}
		
		p.welcome {
			font-size: 17px;			
		}

		p.aboutHead {
			font-size: 16px;			
		}

		p.aboutText {
			font-size: 14px;			
		}

		img.lily {
 			 z-index: 0;
			 opacity: 0.85;
		}

		.list ul {
			color: #FFFFFF;
		}

		.list li {
			color: #FFFFFF;
			font-size: 13.5px;
			line-height: 1.4;
		}

		.list2 ul {
			color: #FFFFFF;
		}

		.list2 li {
			color: #FFFFFF;
			font-size: 12.5px;
			line-height: 1.4;
		}


/* ---------------- Form Style ---------------*/

	input[type=text] {
        padding: 5px;
	    border: 1px solid #808080;
        border-radius: 3px;
		font-family: Tahoma, Verdana, sans-serif;
      }

      input[type=text]:focus {
        border: 1px solid #808080;
      }

      textarea {
        padding: 5px;
        border: 1px solid #808080;
        border-radius: 3px;
		font-family: Tahoma, Verdana, sans-serif;
      }

      textarea:focus {
        border: 1px solid #808080;
      }

      input[type=submit] {
        padding: 5px 15px;
        background: #FFFFFF;
		color: #000000;
        border: 1px solid #808080;
        cursor: pointer;
        border-radius: 5px;
		font-weight: bold;
		}

		input[type=submit]:hover {
		opacity: .85;
		}

      input[type=reset] {
        padding: 5px 15px;
        background: #FFFFFF;
		color: #000000;
        border: 1px solid #808080;
        cursor: pointer;
        border-radius: 5px;
		font-weight: bold;
		}

		input[type=reset]:hover {
		opacity: .85;
		}


/* ---------------- Screen Sizing ------------*/
       *{
			box-sizing: border-box;
		}
		
		.row::after {
			content: "";
			clear: both;
			display: table;
		}
		
		[class*="col-"] {
			float:left;
			padding: 15px;
		}
		
		/* ex small mobile phones */
		@media only screen and (max-width: 600px) {
		[class*="col-"] {
				width: 100%;
			}
		}
		
		/* small tablets and large phones */
		@media only screen and (min-width: 600px) {
		.col-s-1 {width: 8.33%;}
		.col-s-2 {width: 16.66%;}
		.col-s-3 {width: 25%;}
		.col-s-4 {width: 33.33%;}
		.col-s-5 {width: 41.66%;}
		.col-s-6 {width: 50%;}
		.col-s-7 {width: 58.33%;}
		.col-s-8 {width: 66.66%;}
		.col-s-9 {width: 75%;}
		.col-s-10 {width: 83.33%;}
		.col-s-11 {width: 91.66%;}
		.col-s-12 {width: 100%;}
		}
		
		/* medium devices and desktops */
		@media only screen and (min-width: 768px) {
		.col-m-1 {width: 8.33%;}
		.col-m-2 {width: 16.66%;}
		.col-m-3 {width: 25%;}
		.col-m-4 {width: 33.33%;}
		.col-m-5 {width: 41.66%;}
		.col-m-6 {width: 50%;}
		.col-m-7 {width: 58.33%;}
		.col-m-8 {width: 66.66%;}
		.col-m-9 {width: 75%;}
		.col-m-10 {width: 83.33%;}
		.col-m-11 {width: 91.66%;}
		.col-m-12 {width: 100%;}
		}
		
		/* landscape designation, same as medium -- */
		@media only screen and (orientation: landscape) {
		.col-m-1 {width: 8.33%;}
		.col-m-2 {width: 16.66%;}
		.col-m-3 {width: 25%;}
		.col-m-4 {width: 33.33%;}
		.col-m-5 {width: 41.66%;}
		.col-m-6 {width: 50%;}
		.col-m-7 {width: 58.33%;}
		.col-m-8 {width: 66.66%;}
		.col-m-9 {width: 75%;}
		.col-m-10 {width: 83.33%;}
		.col-m-11 {width: 91.66%;}
		.col-m-12 {width: 100%;}
		}
		
		/* desktops and laptops */
		@media only screen and (min-width: 992px) {
		.col-lg-1 {width: 8.33%;}
		.col-lg-2 {width: 16.66%;}
		.col-lg-3 {width: 25%;}
		.col-lg-4 {width: 33.33%;}
		.col-lg-5 {width: 41.66%;}
		.col-lg-6 {width: 50%;}
		.col-lg-7 {width: 58.33%;}
		.col-lg-8 {width: 66.66%;}
		.col-lg-9 {width: 75%;}
		.col-lg-10 {width: 83.33%;}
		.col-lg-11 {width: 91.66%;}
		.col-lg-12 {width: 100%;}
		}
		
		/* extra large desktops and laptops */
		@media only screen and (min-width: 1200px) {
		.col-xl-1 {width: 8.33%;}
		.col-xl-2 {width: 16.66%;}
		.col-xl-3 {width: 25%;}
		.col-xl-4 {width: 33.33%;}
		.col-xl-5 {width: 41.66%;}
		.col-xl-6 {width: 50%;}
		.col-xl-7 {width: 58.33%;}
		.col-xl-8 {width: 66.66%;}
		.col-xl-9 {width: 75%;}
		.col-xl-10 {width: 83.33%;}
		.col-xl-11 {width: 91.66%;}
		.col-xl-12 {width: 100%;}
		}


/* ---------------- Slideshow Code ------------*/
.mySlides {display: none}

/* Slideshow container */
.slideshow-container {
  max-width: 98%;
  position: relative;
  margin: auto;
}

/* Position the previous button */
.prev {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 6px 4px;;
  margin-top: -22px;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 14px;
  transition: 0.6s ease;
  left: 0;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 6px 4px;
  margin-top: -22px;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 14px;
  transition: 0.6s ease;
  right: 0;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* 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);
	opacity: .45;
}

/* Caption text */
.text {
  color: #FFFFFF;
  font-size: 13px;
  padding: 8px 12px;
  text-align: center;
  font-weight: bold;
}

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

/* The dots/bullets/indicators */
.dot1 {
  cursor: pointer;
  height: 9px;
  width: 9px;
  margin: 0 2px;
  background-color: #D3D3D3;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot1:hover {
  background-color: #778899;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: .5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 8px}
}

/*-------------- Image Hover Fade --------------*/	
.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.1s;
}

.myImg:hover {
	opacity: 0.7;
}


/*-------------- Image Hover Home Page --------------*/	
.myImgHome {
  cursor: pointer;
  transition: 0.1s;
}

.myImgHome:hover {
	opacity: 0.65;
}

/*-------------- Image Rounded Corners --------------*/	
.myImgRound {
  border-radius: 5px;
  transition: 0.1s;
}

/*---------------- The Modal (background) ----------------*/
		
		
.modal {
  display: none;
  position: fixed;
  z-index: 5;
  padding-top: 45px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #000000;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #000000;
  opacity: 1;
  margin: auto;
  padding: 0;
  width: 95%;
  max-width: 1080px;
}

/* The Close Button */
.close {
  color: #FFFFFF;
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 24px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #808080;
  text-decoration: none;
  cursor: pointer;
}

.myImages {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Position the previous buttons */
.prev2 {
  cursor: pointer;
  padding: 6px 4px;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next2 {
  cursor: pointer;
  padding: 6px 4px;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  right: 0;
  border-radius: 0 3px 3px 0;
  user-select: none;  
}

/* On hover, add slight opacity to show action */
.prev2:hover,
.next2:hover {
	opacity: .45;
	text-decoration: none;
}		
		
/* Number text (1/3 etc) */
.numbertext2 {
  color: #FFFFFF;
  font-size: 11px;
  padding: 8px 12px;
  position: relative;
  top: 0;
  right: 0;
}
		
.captionModal {
  color: #FFFFFF;
  font-size: 13px;
  padding: 8px 12px;
  text-align: center;
  font-weight: bold;
}

/* ---- using this instead of the close button ---*/
div.back {
	font-size: 28px;
	color: #FFFFFF;
	text-decoration: none;
	text-align: right;
}

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