html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

#mySidebar {
  border-right: 2px solid #ccc; /* darker gray */
}

/* Desktop: push content over */
@media screen and (min-width: 769px) {
  #main-content {
    margin-left: 15%;
    padding: 0px;
  }
}

/* Mobile: no margin */
@media screen and (max-width: 768px) {
  #main-content {
    margin-left: 0;
    padding: 0px;
  }
}

/* Desktop: hide toggle button */
.sidebar-toggle {
  display: none;
}

.sidebar-toggle i {
  font-size: 31px;  /* make icon smaller if needed */
}

/* Mobile-specific styles */
@media screen and (max-width: 768px) {
  /* Hamburger button */
  .sidebar-toggle {
    display: block;
    position: fixed;
    top: -8px;
    left: -8px;
    z-index: 1001;
    background-color: rgba(241, 241, 241, 0.5); // #f1f1f1;
    color: #000;
    border: 0px solid #ccc;
    padding: 0px 0px;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }

  /* Sidebar menu - appears just below the button */
  #mySidebar {
    display: none;
    width: 100%;
    position: absolute;
    z-index: 1000;
    top: 0px; /* Adjust to be just below the button */
    left: 0;
  }
}

@media screen and (max-width: 768px) {
  #mySidebar {
    padding-top: 60px; /* or margin-top: 60px */
  }
}



.topnav {
  //overflow: hidden;
//    background-color: rgb(182, 215, 235);
background-color: rgb(255, 255, 255);
  position: fixed;//relative;
}

.topnav #myLinks {
  display: none;
  width: 10em;
  background-color: rgb(244, 244, 244);
//  background-color: rgb(238,253,255);
}

.topnav a {
  color: white;
  padding: 1px 1px;
  text-decoration: none;
  font-size: 17px;
  display: inline-block;  // used to be block to create vertical drop down, but this filled in the top home button left to right
}

.topnav a.icon {
//  background-color: rgb(182, 215, 235);
  background-color: rgb(244, 244, 244);
  display: inline-block;
  position: absolute;
//  right: 0;
  left: 5em;
  top: 0;
}

.topnav a:hover {
  background-color: rgb(244, 244, 244);
  color: black;
}

.active {
  background-color: rgb(244, 244, 244);
//  background-color: rgb(238,253,255);
  color: rgb(244, 244, 244);
//  color: rgb(238, 253, 255);
}















@font-face {
  font-family: 'MyWebFont';
  src: url('HhyXU5sn9vOmLzGbKOCFMItgT7kJ.woff2') format('woff2');
}

@font-face {
  font-family: 'Quicksand';
  src: url('6xKtdSZaM9iE8KbpRA_hJFQNYuDyP7bh.woff2') format('woff2');
}

@font-face {
  font-family: 'Oxygen';
  src: url('2sDfZG1Wl4LcnbuKjk0mRUe0Aw.woff2') format('woff2');
}

.borderRounded
{
border-style:solid;
border-width: 1px;
border-color:rgb(205, 217, 228);
border-radius: 1em;
padding: 1em;
overflow: auto;
background: rgb(227, 240, 248);
//background: rgb(238, 250, 255);
}

.borderRounded3
{
border-style:solid;
border-width: 1px;
border-color:#287EC7;
border-radius: 2em;
padding: 5px;
overflow: auto;
}

.borderRounded4
{
border-style:solid;
border-width: 0px;
border-color:#287EC7;
border-radius: 0.2em;
padding: 1px;
padding-left:5px;
padding-right: 5px;
//border-radius: 0.7em;
//padding: 5px;
overflow: auto;
}

.borderRounded6
{
border-style:solid;
border-width: 2px;
border-color:#287EC7;
border-radius: 0.5em;
padding: 5px;
//padding-left:5px;
//padding-right: 5px;
//border-radius: 0.7em;
//padding: 5px;
overflow: auto;
}

.borderRounded5
{
border-style:solid;
border-width: 1px;
border-radius: 0.7em;
padding: 5px;
overflow: auto;
}

p.padding {
  padding-left: 1em;
  padding-right: 1em;
}

p.padding2 {
  padding-left: 20%;
  padding-right: 20%;
}

p.top-padding {
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0em;
}

body, html {
  height: 100%;
  margin-top: 0px;
  font-family: Oxygen;//Arial, Helvetica, sans-serif;
}



.hero-image {
//  background-image: linear-gradient(rgba(121, 121, 121, 0.5), rgba(0, 0, 0, 0.5)), url("banner.jpg");
//  background-image: linear-gradient(rgba(61, 61, 61, 0.5), rgba(0, 0, 0, 0.5)), url("/imgs/banner.jpg");
//  background-image: linear-gradient(rgba(100, 240, 255, 0.5), rgba(210, 210, 210, 0.5)), url("/imgs/fish_montage.jpg");


//  background-image: linear-gradient(rgba(100, 230, 255, 0.5), rgba(255, 255, 255, 0.5)), url("/imgs/fish_montage.jpg");
//  background-image: linear-gradient(rgba(182, 220, 245, 0.5), rgba(255, 255, 255, 0.5)), url("/imgs/fish_montage.jpg");
  background-image: linear-gradient(rgba(182, 220, 245, 0.64), rgba(255, 255, 255, 0.64)), url("/imgs/fish_montage.jpg");
  background-color: rgb(38,53,55);
  height: 16em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}


.whole-background-image {
//  background-image: linear-gradient(rgba(121, 121, 121, 0.5), rgba(0, 0, 0, 0.5)), url("banner.jpg");
//  background-image: linear-gradient(rgba(61, 61, 61, 0.5), rgba(0, 0, 0, 0.5)), url("/imgs/banner.jpg");
//  background-image: linear-gradient(rgba(100, 240, 255, 0.5), rgba(210, 210, 210, 0.5)), url("/imgs/fish_montage.jpg");


//  background-image: linear-gradient(rgba(100, 230, 255, 0.5), rgba(255, 255, 255, 0.5)), url("/imgs/fish_montage.jpg");
//  background-image: linear-gradient(rgba(182, 220, 245, 0.5), rgba(255, 255, 255, 0.5)), url("/imgs/fish_montage.jpg");
  background-image: linear-gradient(rgba(255, 255, 255, 0.64), rgba(182, 220, 245, 0.64)), url("/imgs/glia_background.jpg");
  background-color: rgb(38,53,55);
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
  position: relative;
}




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

.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;
}






a:link, a:visited {
  color: rgb(0, 0, 0);
 // text-align: center;
  text-decoration: none;
//  display: inline-block;
}


//a:hover, a:active {
//  background-color: rgb(155, 155, 155);
//}

/*a:hover, a:active {
  background-color: red;
}*/





        img_unused {
			width: 400px;
			height: 400px;
			object-fit: cover;
		}





//		/* Style the tab */
//		.tab {
//			position: fixed;
//			/* Set the navbar to fixed position */
//			top: 0;
//			/* Position the navbar at the top of the page */
//			width: 100%;
//			/* Full width */
//			overflow: hidden;
//			border: 1px solid #ccc;
//			background-color: #f1f1f1;
//		}
//
//		/* Style the buttons inside the tab */
//		.tab button {
  //          background-color: rgb(215, 228, 253)
////			background-color: inherit;
//			float: left;
//			border: none;
//			outline: none;
//			cursor: pointer;
//			padding: 1px 7px;
//			transition: 0.3s;
//			font-size: 1.15em;
//		}
//
//		/* Change background color of buttons on hover */
////		.tab button:hover {
////			background-color: rgb(163, 192, 248);
////		}
//
//		/* Create an active/current tablink class */
////		.tab button.active {
////			background-color: #ccc;
////		}
//
//		/* Style the tab content */
//		.tabcontent {
//			display: none;
//			padding: 36px 12px;
//			border: 1px solid rgb(31, 29, 29);
//			border-top: none;
//		}






		ctrd {
			text-align: center;
		}

		h1 {
//			font-size: 2em;
			font-size: 2.6em;
			font-family: MyWebFont;//Oxygen;//MyWebFont;//Arial;
			//font-variant: small-caps;
			font-weight: lighter;
			color: rgb(255, 255, 255)
		}

		h2 {
//			font-size: 1.6em;
			font-size: 1.9em;
			font-family: Oxygen;//MyWebFont;//Arial;
			//font-variant: small-caps;
			font-weight: lighter;
			color: rgb(255, 255, 255)
		}

		h3 {
			font-size: 1.4em;
			font-family: Oxygen;//Arial;
		//	font-variant: small-caps;
			font-weight: lighter;
//			color: rgb(50, 100, 200)
			color: rgb(20, 20, 20)
		}

		h4 {
			font-size: 1.2em;
			font-family: Oxygen;//Arial;
			font-weight: lighter;
		}

		p {
			font-size: 14px;
            font-weight: lighter;
		}


		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			font-family: Oxygen;//Arial, Helvetica, sans-serif;
            line-height: 1.5;
		}



		img {
			display: block;
			margin-left: auto;
			margin-right: auto;
			width: 100%;
			height: auto;
		}

img:hover{
    filter: alpha(opacity=100);
}
        img.emailTxt
        {width:14em;
        }
        
        img.sixtyPercentRound
        {width:80%;
        height:auto;
        border-radius:50%;
        display:block;
        margin-left:auto;
        margin-right:auto;
        }

		img.rounded-corners {
//			border-radius: 2em;
			border-radius: 0.5em;
			/*20px;*/
		}

		img.rounded-corners2 {
			border-radius: 7em;
			/*20px;*/
		}

        img.opac8 {
            filter: alpha(opacity=89);
            opacity: 0.89;
            transition: 0.2s;

        }


		img.rounded-corners3 {
			border-radius: 50%;
			/*20px;*/
		}

		div.gallery {
			border: 0px solid #ccc;
		}

		/*div.gallery:hover {
  border: 1px solid #777;
}*/

		div.gallery img {
			width: 90%;
			height: 14em;
			object-fit: cover;
			margin-left: auto;
			margin-right: auto;
			margin-top: 5px;
			margin-bottom: 5px;
			border: 1px solid rgb(145, 145, 145);
		}


        div.gallery img:hover{
            filter: alpha(opacity=100);
            opacity: 1;
        }

		div.gallery imgWide {
			width: 20;
			height: auto;
			object-fit: cover;
			margin-left: auto;
			margin-right: auto;
			margin-top: 0px;
			margin-bottom: 0px;
			border: 0px solid rgb(145, 145, 145);
		}

        div.gallery img2 {
			width: 10em;
			height: 10em;
			object-fit: cover;
			margin-left: auto;
			margin-right: auto;
			margin-top: 5px;
			margin-bottom: 5px;
			border: 1px solid black;
            border-radius: 2em;
		}

		div.desc {
			padding: 5px;
			text-align: center;
			//height: 4.5em;
            height: 3em;
            //font-weight: lighter;
            font-size: 1.2em;
		}

		div.descpadded {
			padding: 5px;
			text-align: center;
			//height: 4.8em;
            height: 4.5em;
            //font-weight: lighter;
            font-size: 1.2em;
		}

		div.descBig {
			padding: 5px;
			text-align: center;
			height: 8em;
            font-weight: lighter;
		}

		* {
			box-sizing: border-box;
		}



		.responsive {
			padding: 0 6px;
			float: left;
			width: 24.99999%;
		}



		@media only screen and (max-width: 8888em) {
			.responsive {
				width: 24.99999%;
				margin: 2px 0;
			}
         div.standardtext {
 //   font-size: 1em;
    padding-left:10%;
    padding-right:10%;
    text-align: justify;
  }
		}


		@media only screen and (max-width: 105em) {
			.responsive {
				width: 33%;//24.99999%;
				margin: 2px 0;
			}
         div.standardtext {
 //   font-size: 1em;
    padding-left:10%;
    padding-right:10%;
    text-align: justify;
  }
		}

		@media only screen and (max-width: 80em) {
			.responsive {
				width: 33%;//24.99999%;
				margin: 2px 0;
			}
              div.standardtext {
//    font-size: 1em;
    padding-left:10%;
    padding-right:10%;
    text-align: justify;
  		}
        }
        
        /*
		@media only screen and (max-width: 60em) {
			.responsive {
				width: 33.3333%; //32.99999%;
				margin: 2px 0;
			}
              div.standardtext {
    padding-left:5%;
    padding-right:5%;
    text-align: justify;
  }
    div.hero-image {
      height: 20em;
  }


		}
*/
		@media only screen and (max-width: 58em) {
			.responsive {
				width: 49.99999%;
				margin: 2px 0;
			}
            div.standardtext {
    padding-left:10%;
    padding-right:10%;
    text-align: justify;
  }

  div.hero-image {
      height: 25em;
  }

  div.whole-background-image {
      height: 25em;
  }

  }
		

		@media only screen and (max-width: 34em) {
			.responsive {
				width: 99.99%;
				margin: 2px 0;
			}
            div.standardtext {
 //   font-size: 1.05em;
    padding-left:1%;
    padding-right:1%;
    text-align: left;
  }
    div.hero-image {
      height: 25em;
  }
    div.whole-background-image {
      height: 25em;
  }
		}
 


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


        


@media screen and (max-width: 768px) {
  #mySidebar {
    height: auto;         /* Let it grow with content */
    max-height: 90vh;     /* Optional: limit height on very small screens */
    overflow-y: auto;     /* Add scrolling if needed */
  }
}

@media screen and (min-width: 769px) {
  #mySidebar {
    height: 100vh;        /* Full screen height on desktop */
  }
}