#selectedTLM{
  background: #006600;
  border-color: #c47700;
}

#selectedNavMenu{
  background: #006600;
  border-color: #c47700;
}	

.nav-container{
	 display: flex;
	 flex-direction: column;
}	


  #main {
    display: flex;
    min-height: calc(100vh - 40vh);
  }
	
  #main > nav {
    flex: 0 0 25%;
    order: -1;
  }

#clouds{
  width: 28.0vh;
	height: 8.0vh;
  margin: auto;
  margin-top: 32.0vh;
  padding: 1.8vh 0 0 4.3vh;
	background: #0042aa;
	background: -webkit-linear-gradient(top, #0042aa 0%, #86afd0 100%);
	background: -linear-gradient(top, #0042aa 0%, #86afd0 100%);
	background: -moz-linear-gradient(top, #0042aa 0%, #86afd0 100%);
	border-radius: 3.75vh;
}

/*Time to finalise the cloud shape*/
.cloud {
	width: 6.25vh; height: 1.875vh;
  background: #fdfeff;
	border-radius: 6.25vh;
	-moz-border-radius: 6.25vh;
	-webkit-border-radius: 6.25vh;
  margin: -2.25vh 0;	
	position: relative; 
}

.cloud:before, .cloud:after {
	content: '';
	position: absolute; 
  background: #fdfeff;
	width: 3.125vh; height: 2.5vh;
	position: absolute; top: -0.47vh; left: 0.3125vh;
	
	border-radius: 3.125vh;
	-moz-border-radius: 3.125vh;
	-webkit-border-radius: 3.125vh;
	
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}

.cloud:after {
	width: 3.75vh; height: 3.75vh;
	top: -1.72vh; left: auto; right: 0.47vh;
}

/*Time to animate*/
.x1 {
/*  position: relative;
  z-index:  -1;*/
	right: 14vh;
        top: 2.0vh;
	-webkit-animation: moveclouds 40s linear infinite;
	-moz-animation: moveclouds 40s linear infinite;
	-o-animation: moveclouds 40s linear infinite;
	opacity: 1.0; /*opacity proportional to the size*/
        filter: brightness(80%);
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
	right: 14vh;
	-webkit-transform: scale(0.85);
	-moz-transform: scale(0.85);
	transform: scale(0.85);
	opacity: 1.0; /*opacity proportional to the size*/
        filter: brightness(90%);
	/*Speed will also be proportional to the size and opacity*/
	/*More the speed. Less the time in 's' = seconds*/
	-webkit-animation: moveclouds 30s linear infinite;
	-moz-animation: moveclouds 30s linear infinite;
	-o-animation: moveclouds 30s linear infinite;
}
/*variable speed, opacity, and position of clouds for realistic effect*/
.x3 {
	right: 14.0vh;
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 1.0; /*opacity proportional to the size*/
	
	/*Speed will also be proportional to the size and opacity*/
	/*More the speed. Less the time in 's' = seconds*/
	-webkit-animation: moveclouds 22s linear infinite;
	-moz-animation: moveclouds 22s linear infinite;
	-o-animation: moveclouds 22s linear infinite;
}

@-webkit-keyframes moveclouds {
	0% {margin-left: 60vh;}
	100% {margin-left: -20vh;}
}
@-moz-keyframes moveclouds {
	0% {margin-left: 60vh;}
	100% {margin-left: -20vh;}
}
@-o-keyframes moveclouds {
	0% {margin-left: 60vh;}
	100% {margin-left: -20vh;}
}


.glow {
  color: #ff0;  
  animation: glow 3s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 1.5vh #fff, 0 0 2.0vh #fff, 0 0 2.5vh #dde301, 0 0 3.0vh #dde301, 0 0 3.5vh #dde301, 0 0 4.0vh #dde301, 0 0 4.5vh #dde301;
  }
  
  to {
    text-shadow: 0 0 2.0vh #fff, 0 0 2.5vh #f5ff79, 0 0 3.0vh #f5ff79, 0 0 3.5vh #f5ff79, 0 0 4.0vh #f5ff79, 0 0 4.5vh #f5ff79, 0 0 5.0vh #f5ff79;
  }
}


nav h3{  /* Select Search Preference, Text */
   margin-top: 1.5vh;
   margin-bottom: 0.0vh;
   width: 100%;
   font-family: Calibri;
	 font-style: italic;
	 text-align: center;
	 font-size: 2.7vh;
	 color: #003400;
	 overflow: wrap;
}

.brackets{
	 color: #583400;
}

.nav-menu{
	 left: 18.50vh;
   margin: auto;
   width: 25.0vh;
   padding: 0.5vh;
	 text-align: center;
   list-style: none
}

.nav-menu a
{
  background: #a4d1ec;
  display: block;
  border: ridge 0.7vh #609f60;
	border-radius: 1.0vh;
	padding:0.2vh;			
	margin: 0.5vh;
}


.nav-menu a:hover {
  background: #bfad13;
  border: ridge 0.7vh #c47700;
	border-radius: 1.0vh; /*	 Puts an equal radius on all four border corners*/			
	padding:0.2vh;			
	margin: 0.5vh;
	text-decoration: none;
}

#sun-exposure-icon {
    width: 9.0vh;
		height: 4.5vh;
}

	
  #main > article {
    position: relative;
    z-index:  1;
   flex: 0 0 60%;
 }
 
  #main > aside {
    flex: 0 0 15%;
  }

  .container-1{
    width: 100%;
	}
		
  .container-1 img {
    width: 95%;
		margin-left: 2.5%;
		margin-top: 5.0vh;
  }

.rain {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.drop {
  position: absolute;
  bottom: 100%;
  width: 1.5vh;
  height: 12.0vh;
  pointer-events: none;
  animation: drop 0.5s linear infinite;
}

@keyframes drop {
  0% {
    transform: translateY(0vh);
  }
  75% {
    transform: translateY(130vh);
  }
  100% {
    transform: translateY(1305vh);
  }
}

.stem {
  width: 0.25vh;
  height: 100%;
  margin-left: 0.7vh;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
  animation: stem 0.5s linear infinite;
}

@keyframes stem {
  0% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.splat {
  width: 1.5vh;
  height: 1.0vh;
  opacity: 1;
  transform: scale(0);
  animation: splat 0.5s linear infinite;
  display: none;
}

article.splat-toggle .splat {
  display: block;
}

@keyframes splat {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  80% {
    opacity: 1;
    transform: scale(0);
  }
  90% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.flashit{
    animation-delay: 4s;
    -webkit-animation: flash ease-out 10s infinite;
    -moz-animation: flash ease-out 10s infinite;
    animation: flash ease-out 10s infinite;
}

.flashit img{
  width: 100%;
	index: 1;
}

@-webkit-keyframes flash {
	from { opacity: 0; } 
    83% { opacity: 0; }
	84% { opacity: 0.6; }
    85% { opacity: 0.5; }
    87% { opacity: 0.8; } 
	to { opacity: 0; }
}
@keyframes flash {
	from { opacity: 0; } 
    83% { opacity: 0; }
	84% { opacity: 0.6; }
    85% { opacity: 0.5; }
    87% { opacity: 0.8; } 
	to { opacity: 0; }
}

/* The class attributes of the 'photo-grid-container' in relationship to the page...Contains the 'photo-grid, which contains the 'photo-grid-items' */
.photo-grid-container {
  display: flex;
  justify-content: center;
}
	
/* The class attributes of the 'photo-grid' in relationship to the photo-grid-container...Contains the 'photo-grid-items'...The grid layout for the photos */
.photo-grid {
  flex-wrap: wrap;
  width: 100%;
  display: flex;
  justify-content: center;
	flex-direction: row;
	align-items: center;
  background-image: url("Tan Background.png");
}

/* The class attributes of the 'photo-grid-items': The item, or items, within each 'cell' of the grid...In this case, an image */
.photo-grid-item {
  justify-content: center;
  width: 30.7vh;
  height: 40.5vh;
  padding: 0.3vh;
  border: 0.8vh double #939393;
	border-radius: 2.5vh 2.5vh 6.5vh 6.5vh;
	margin: 1.0vh;
}

/* The class attributes for the buttons inside of the photo-grid-container */
.button1 {
  display: inline-block;
  width: 28.0vh;
	height: 4.7vh;
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(125,125,125,1));
  border: 0.2vh solid #b3b3b3;
  color: #144e14;
  text-decoration: none;
	font-family: Angsana New;
	font-size: 2.2vh;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
	border-radius: 1.5vh;
	margin-top: 0.5vh;
}

/* The class attributes for the buttons inside of the photo-grid-container cedad0*/
article h2 {
  display: inline-block;
  width: 28vh;
	height: 2.5vh;
	font-family: LilyUPC;
	font-size: 1.7vh;
  letter-spacing: 0.2vh;
  background: transparent;
  color: #545454;
	padding-left: 0.3vh;
	padding-right: 0.3vh;
	margin-top: 0.5vh;
	margin-bottom: -0.2vh;
  text-decoration: none;
  cursor: pointer;
}

/* The class attributes that create the 'Hover' effects for the button inside of 'footer-Item1' */
.button1:hover {
  color: #008000;
  text-shadow: 0.1vh 0.1vh #00ff00;
  border-color: #006000;
}

article h2.pointer:hover {
  text-decoration: none;
	cursor: default;
}

hr.greenline {
  margin-top: 0.5vh;
  margin-bottom: 0.5vh;
  border-top: 0.1vh solid #008000;
}


  #slideshow img {
    position: absolute;
		height:auto;
		left: 2.5%;
		width: 20%;
  min-width: 26.0vh;
		border: ridge 1.0vh #004400;
		border-radius: 2.5vh;
  }

  #slideshow img:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 10s;
    animation-duration: 10s;
    z-index: 20;
  }
	
  #slideshow img:nth-of-type(2) {
    z-index: 10;
  }
	
  #slideshow img:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }


.searchTable{
  height: 9.0vh;
  border-collapse: separate;
  border-radius: 1.5vh; 
  background-image: linear-gradient(to right, #00aa00, #004400);
  border: solid 0.2vh #fff;
  color: #fff;
}

.dropup {
  position: relative;
  margin-top: 1.0vh;
  margin-right: 2.0vh;
	display: inline-block;
	width: 30.0vh;
	z-index: 1;
}

.dropup-content {
  display: none;
  position: absolute;
}

#myInput {
  background-repeat: no-repeat;
  background-color: #e6ffe6;
  width: 30vh;
  height: 3.0vh;
  font-size: 2.0vh;
  color: #000;
  border-radius: 0.5vh;
  margin-left: 0.8vh;
}


#myUL {
  position: absolute;
  width: 29.5vh;
  list-style-type: none;
  padding: 0;
  margin-left: 1.0vh;
  height: 25.0vh;
  overflow-y:scroll;
  bottom: 2.8vh;
}

#myUL li {
  display: none;
  text-align: left;
}

#myUL li a {
  border: .1vh solid #006400;
  border-radius: .5vh;
  background-color: #f0f8ff; /*  AliceBlue  */
  text-decoration: none;
  text-indent: 0.5em;
  font-size: 1.6vh;
  color:  #555;
  display: block;
  height: 2.75vh;
  padding-top: 0.4vh;
}

#myUL li a:hover:not(.header) {
	color: #e6ffe6;
  background-color: #006400;
}

.radioButton{
  filter: saturate(75%) hue-rotate(240deg) brightness(100%) contrast(100%);    
}

label{
	margin-left: -0.75vh;
	padding: 1.5vh 1.75vh 0 0.5vh;
  vertical-align: 0.25em;
	font-size: 1.3vh;
}

.listTable{
  height: 9.0vh;
  border-collapse: separate;
	border: solid 0.2vh #fff;
  border-radius: 1.5vh; 
  background-image: linear-gradient(to right, #00aa00, #006600);
}

.listTable th{
	border: none;
  font-size: 1.7vh;
	text-align: center;
  color: #d8f6d9;
}

.listTable td{
	padding-left: 1.0vh;
	padding-right: 1.0vh;
}

.listTable a{
	color: #fff;
	line-height: 1.4vh;
}