@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
#header-content {
	width: 60%;
	position: relative;
  margin-left: auto;
	margin-right: auto;
	padding: 10px 1.04166667%;
}
#header-content img{
height: 120px;
}
nav{
position: absolute;
width: 76.041666677%; /*730px*/
top: 90px;
right:0;
font-size: 1.25em;
font-weight: 300;
}
nav ul{
  display: block;
	text-align: right;
}
nav li{
  display: inline-block;
	padding: 0 4.10958904%;
}
nav a:link{
  color: #034001;
  text-decoration: none;
	padding: 10px auto;
}
nav a:hover{
  text-decoration: underline;
  text-decoration-color: #034001;
	padding: 10px auto;
}
#banner{
  width: 100%;
  background-image: url("images/clear-lake-banner.jpg");
  height: 525px;
  text-align: center;
}
#explore{
position: relative;
top: 180px;
}
#banner h1{
  font-size: 3.5em;
  font-weight: 700;
  color: white;
font-family: 'Jost', sans-serif;
}
#banner h4{
  font-size: 1.625em;
  font-weight: 700;
  font-family: 'Jost', sans-serif;
  color: white;
  margin-bottom: 20px;
}
#banner a{
  background-color: #034001;
  font-family: 'Jost', sans-serif;
  color: white;
  font-size: 1.25em;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 1.5625%;
}
#wrapper-white{
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin-left: auto;
	margin-right: auto;
  padding-top: 30px;
  padding-bottom: 30px;
}
section{
width: 60.4166667%;
height: 340px;
position: relative;
text-align: center;
}
section img {
     opacity: 1;
     width: 100%;
     height: 340px;
     transition: 1s ease;
}
section:hover img {
     opacity: .5;
}
section a{
  font-size: 1.25em;
  font-weight: 700;
  background-color: #034001;
  font-family: 'Jost', sans-serif;
  color: white;
  padding: 10px 1.5625%;
  text-decoration: none;
	display: block;
}
.discover-content {
     position: absolute;
     top: 45%;
     left: 20%;
     right: 20%;
     transition: .5 ease;
}
section:hover .discover-content {
     transform: scale(1.25);
}
aside{
  width: 33.33333333%;
}
aside h1{
font-size: 1.875em;
font-weight: 700;
text-transform: uppercase;
font-family: 'Jost', sans-serif;
color: #034001;
}
aside p{
font-size: 1.125em;
font-weight: 300;
line-height: 150%;
font-family: 'Jost', sans-serif;
}
#wrapper-trails{
  width: 100%;
  background-color: #f0ebe8;
  padding-bottom: 60px;
}
#wrapper-trails h2{
  font-size: 2em;
  font-weight: 700;
  text-align: center;
  font-family: 'Jost', sans-serif;
  color: #034001;
  padding-top: 40px;
}
#trail-content{
  width:60%;
  margin-left: auto;
	margin-right: auto;
  padding-top: 20px;
}
#trail-content h3{
  font-size: 1.75em;
  font-weight: 700;
  text-align: center;
  font-family: 'Jost', sans-serif;
}
#trail-content p{
  font-size:1em;
  font-weight: 300;
  text-align: center;
  font-family: 'Jost', sans-serif;
}
.trail-box{
  display:inline-block;
  width: 31.25%;
  text-align: center;
  vertical-align: top;
  font-family: 'Jost', sans-serif;
  color: #034001;
}
#wrapper-around h1{
  text-decoration-color: #034001;
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  font-size: 1.875em;
  margin-bottom: 16px;
  text-transform: uppercase;
  text-align: center;
}
#wrapper-around p{
  font-family: 'Jost', sans-serif;
  font-size: 1.375em;
  line-height: 150%;
  margin-top: 10px;
  margin-bottom: 0px;
}
#wrapper-trails h2{
  font-size: 2em;
  font-weight: 700;
  text-align: center;
  font-family: 'Jost', sans-serif;
  color: #034001;
  padding-top: 40px;
}
#spirit-content{
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#spirit-content img{
	padding-bottom: 20px;
}
#spirit-content .trail-gallery:first-child {
     width: 65.625%; /* (600px (width of pic) + 30px (margin)) / 960px */
}

#spirit-content .trail-gallery {
     width: 31.25%; /* (300px / 960px */
}

#spirit-content img {
     width: 100%;
}
/* --------- SLIDESHOW --------- */
#slideshow-wrapper {
  width: 100%;
  height: 525px;
}
#slideshow {
  width: 100%;
  height: 525px;
  overflow: hidden;
  white-space: nowrap;
}
#slideshow img {
  width: 100%;
  display: inline-block;
}
.rectangle {
  display: inline-block;
  background-color: #f0ebe8;
  width: 2.70833333%;
  height: 5px;
  margin-right: 1.5625%;
}
#rectangle-nav {
  margin-top: -50px;
  text-align: center;
}
footer{
  width: 100%;
  background-color: #034001;
  padding-top: 20px;
  padding-bottom:20px;
}
#footer-content{
display: flex;
justify-content: space-between;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
footer h3{
font-size: 1em;
font-weight: 700;
text-transform:uppercase;
color: white;
padding:10px 1.04166667%;
}
footer p{
font-size: 1em;
font-weight: 300;
color: white;
}
footer a{
  color: white;
}
#footer-left{
  width: 30%;
}
#footer-center{
width: 30%;
}
#footer-center img{
  height:50px;
}
#footer-right{
  width: 30%;
}
#footer-right img{
  height:50px;
}
/*media query tablet*/
@media only screen and (max-width: 1024px) {
#header-content{
position: relative;
margin: auto;
display: block;
width: 100%;
text-align: center;
}
nav{
text-align: center;
padding:10px 1.04166667%;
position: relative;
top: auto;
right: auto;
width: 100%;
}
nav ul{
	text-align: center;
}
#banner{
	height: 300px;
}
#explore{
	top:90px;
}
#explore a{
	font-size: 1.25em;
}
#rectangle-nav{
	margin: -50px -5.208333333%;
}
#wrapper-white{
	width:90%;
}
#banner h1 {
	font-size: 1.75em;
}
#banner h4{
	padding-top: 5px;
	font-size: 1.25em;
}
aside p {
	font-size: 1em;
}
aside h1 {
	font-size: 1.375em;
}
#wrapper-around h1{
	font-size: 1.75em;
}

#wrapper-trails h2{
	font-size: 1.75em;
}
#trail-content h3{
	font-size: 1.25em;
	padding-bottom: 5px;
}
#slideshow-wrapper{
height: 300px;
}
#slideshow{
	height: auto;
}
#wrapper-around{
	padding: 10px 1.04166667%;
	text-align: center;
}
footer h3{
	font-size: 0.75em;
}
footer p{
	font-size: 0.75em;
}
.trail-box{
	width: 100%;
	clear: both;
	padding-bottom: 15px;
}
}
@media only all and (max-width: 480px){
nav{
	width:100%;
}
nav li {
	display: block;
	text-align: center;
	background-color: #034001;
	border-bottom: 1px solid #fff;
}
nav a:link, nav a:hover, nav a:visited{
	color: white;
}
#banner h1 {
	font-size: 1.25em;
}
#banner h4{
	font-size: 1em;
}
#banner{
	height: 200px;
	}
#explore a{
	font-size: 1em;
}
#explore{
	top: 60px;
}
#wrapper-white{
	clear: both;
	width: 100%;
	display: block;
}
section{
	font-size: 0.75em;
	width: 100%;
}
aside{
	padding-top: 20px;
	width: 100%;
	text-align: center;
}
.trail-box{
	width: 100%;
}
.trail-box img{
	width: 90%;
}
#trail-content h3{
	font-size: 1.15em;
}
#wrapper-around h1{
	font-size: 1.25em;
}
#wrapper-around p{
	font-size: 0.95em;
}
#spirit-content .trail-gallery {
     width: 48%;
}
#spirit-content .trail-gallery:first-child {
     width: 100%;
}

#slideshow-wrapper{
height: 200px;
}
#slideshow{
	height: auto;
}
#slideshow img{
	height: 170px;
}
	footer h3{
		font-size: 0.5em;
	}
	footer p{
		font-size: 0.5em;
	}
	#footer-center img{
	  height:20px;
	}
	#footer-right img{
	  height:20px;
	}
}