@charset "utf-8";
/* CSS Document */

/*
Framework by Andy Shearouse
*/
html, body{
	margin:0px !important;
	padding:0px !important;
    overflow-x: hidden;
    
}

img{
	max-width:100% !important;	
}
.container{
	max-width:2560px;
	width:100%;
	position:relative;
	font-family: "Open Sans", sans-serif;
}

.header{
    width: 100%;
}

#logo{
    padding-top:3.4vh;
    margin:auto;
}
.new-container{
    
}

.First-Text-Box{
    padding:4%;
    font-size: clamp(1rem, 1.25vw, 1.3vw);
    margin: 6% 3%;

}
.First-Text-Box ul {
    list-style-type: disc !important;
    padding-left: 35px !important;
}

.First-Text-Box li {
    list-style-type: disc !important;
}

h2{
	color: #59c9db;
	margin:0px;
}
.orange-text{
    color: #f39214;
    font-weight: bold;
    margin:0px;
}
#button-one{
    padding: 1% 4%;
    margin:4px;
    color:white;
    max-height: 50px;
    /*width:200px;*/
    text-align: center;
    background-image: linear-gradient(to top, #ff934e, #fc686f);
    /*place-self: left;*/
    /*justify-self: center;*/
    /*align-self: center;*/
    border-radius: 20px;
    font-weight: bold;
    text-decoration: none;


}
#button-one:hover{
    background-image: linear-gradient(to top, #cc743d, #c4505a);

}

#button-two{
    margin: 4px;
    /* width: 200px; */
    max-height: 1.71vw;
    background-image: linear-gradient(to top, #45aff7, #1fd4e7);
    justify-self: center;
    border-radius: 20px;
    padding: 0.5% 4%;
    color: white;
    text-decoration: none;
    font-weight: bold;
}
#button-two:hover{
    background-image: linear-gradient(to top, #328ac4, #1aa6b4);
}
.camp-images-background{
    display:grid;
    -ms-grid-rows:1fr 5fr 1fr ;
	grid-template-rows:1fr 5fr 1fr;
	background-image: linear-gradient(to top, #ff934e, #fc686f);
	font-size: 1.25vw;

}
.amenities-images{
    /*max-height:400px;*/
    place-self: center;
    /*margin:4%;*/
    /*height: 70%;*/
    width:70%;
    /*object-fit: cover;*/
    /*align-self: center;*/
}
#right-image{
    /*grid-area: 1 / 9 / 2 / 13;*/
}
#left-image{
    /*grid-area: 1 / 1 / 2 / 4; */
    /*margin-left:4%;*/
}
#middle-image{
    /*grid-area: 1 / 4 / 2 / 9;*/
}
/*#middle-image{*/
/*    max-width:950px !important;*/
/*}*/
/*#right-image{*/
/*    max-width:750px !important;*/
/*}*/
.amenities-text{
    text-align: center;
    color:white;
}
.amenities-images-box{
    display:grid;
    -ms-grid-columns:5fr 9fr 7fr ;
    grid-template-columns:5fr 9fr 7fr;
    /*grid-template-columns: repeat(12, 1fr);*/
    /*grid-template-rows: 1fr;*/
    /*grid-column-gap: 0px;*/
    /*grid-row-gap: 0px;*/

}

.fireworks-box{
    display:grid;
	-ms-grid-columns:1fr 2fr;
	grid-template-columns:1fr 2fr;
	margin-top: 4%;
	margin-bottom: 4%;
	margin-left:2%;
	margin-right:2%;
	grid-column-gap: 50px;
	font-size: clamp(1rem, 1.25vw, 1.3vw);

}

#last-image{
    height: 100%;
    width:100%;
    /*object-fit: cover;*/
}

.footer{
    display:grid;
	-ms-grid-columns:1fr 1fr;
	grid-template-columns:1fr 1fr;
	background-color:#282828;
	color:white;
	font-size:1.5rem;
	padding: 1%;

}
.footer-navigation{
	justify-self: right;
	display:grid;
	-ms-grid-columns:2fr 2fr 2fr 2fr;
	grid-template-columns:2fr 2fr 2fr 2fr;
	place-items: center;
	align-items: top;
	font-size:1.5rem;
}
.footer-nav{
    color:white;
    text-decoration: none;
}
#list-one{


}
#Augie{
    align-self: center;
}


#contact-info{
    text-align:center;
    background-color:#f9fcfd;
    font-size:1.8em;
    color:white;
    padding:8%;
    border-top: 4px solid #59c9db;
    border-bottom: 4px solid #f39214;
    
}

#contact-info a{
    color:#59c9db;
}
.contact-box{
    background-color:white;
    color:black;
    border:5px solid #59c9db;;
    width:40%;
    border-radius:25px;
    padding:5% 2%;
    margin:auto;
}


/*------------- History ----------------*/
.History {
    background-color: #f9fcfd; /* very light aqua background */
    border-top: 4px solid #59c9db;
    border-bottom: 4px solid #f39214;
    padding: 5%;
    color: #333;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.8;
    font-size: clamp(1rem, 1.2vw, 1.3vw);
}
.History img{
    float:left;
    margin-right:3%;
}
.History p {
    margin-bottom: 1.2em;
}

.History h2 {
    color: #59c9db;
    font-weight: bold;
    font-size: clamp(1.5rem, 2vw, 2.2rem);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-left: 6px solid #f39214;
    padding-left: 10px;
    margin-bottom: 0.8em;
}

.History h2:hover {
    color: #f39214;
    transition: color 0.3s ease-in-out;
}
/*------------- Amenities ----------------*/
.Title-Amenities{
    margin-top:25px;
    color: white;
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    text-transform: uppercase;
    margin-bottom: 1.5em;
    letter-spacing: 2px;
}
.Amenities {
    background-image: linear-gradient(to top, #ff934e, #fc686f);
    padding: 4% 6%;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}

.Amenities img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.Amenities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); 
    gap: 20px;
    justify-items: center;
    align-items: center;
}

.Amenities img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/*Use the following for top drop-down nav
Change the background-color in #nav to change the color of the navigation bar
Change the background-color in #nav ul li ul to change the background color of the dropdown menus
These values do also need to be changed further down, in the 600px, 400px, and 300px wide sections 
*/
/* -------------------- Start Navigation -------------------- */
/*
.nav-list{
    align-items: end;
    align-self: end;
    padding-top: 0%;
	padding-bottom: 0%;
	margin-left:4%;
	margin-right:4%;
}
.nav-container{

}
.nav-and-icon{
    transform: translate(0%, 91%);
    display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 1fr 1fr;
	grid-template-columns:1fr 1fr 1fr;

}
.header-nav{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 1fr;
	grid-template-columns:1fr 1fr;
	padding-left:0px;

}
*/
.nav-container{
    display: grid;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    transform: translate(0, 30%);
}

.nav-left {
  justify-self: center;
  padding-left:0px;
      width: 100%;
}
.nav-right {
  justify-self: center;
  padding-left:0px;
      width: 100%;
}
nav ul li {
  display: inline-block;
  margin: 0 15px;
}
nav ul li a {
  font-weight: bold;
}
.logo img {
    width: 16vw;
    height: auto;
    object-fit: contain;
}

#nav{
	width: 100%;
	z-index:10;
	position:relative;
	margin-bottom:15px;
	text-align: center;
    color: white;
    background-image: url(images/Banner.png);
    background-size: cover;
    height: auto;
    max-width: 100%;
    max-height: 826px;
    width: 100%;
    aspect-ratio: 16 / 9;
}

#nav > a{
	display: none;
}

#nav li{
	position: relative;
	list-style-position:inside;
	list-style-type:none;
}
#nav li a{
	color: #fff;
	display: block;
	text-decoration:none;
	font-size: 1.3vw;
}
#nav li a:hover{
     color: rgba(128, 128, 128, 1.2); 
}

/* first level */

#nav > ul{
	text-align:center;
	padding-left:0px !important;
	margin-left:0px !important;
}
#nav > ul > li{
	margin:0px 15px;
	padding:4px 8px;
	height: 100%;
	/*display:inline-block;*/
}
#nav > ul > li > a{
	height: 100%;
	text-align: center;
}
#nav > ul > li:not( :last-child ) > a{
	
}

#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a{
	
}
/* second level */

#nav li ul{
	background-color:#ccc;
	display: none;
	position: absolute;
	top: 100%;
	margin-left:0 !important;
	padding-left:0 !important;
	width:170px;
	text-align:left;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
#nav li:hover ul{
	display: block;
	left: 0;
	right: 0;
}
#nav li:not( :first-child ):hover ul{
	left: -1px;
}
#nav li ul a{
	color:#000;
	padding: 0.75em; /* 15 (20) */
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
    
}
#nav-toggle {
  display: none;
}

/* Hamburger button */
.hamburger {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}

.hamburger img {
  width: 30px;
}

@media (max-width: 768px) {

  .hamburger {
    display: block;
  }
    
  .nav-container {
     
    display: none;
    grid-template-columns: 1fr;
    text-align: center;
    background: rgba(0,0,0,0.6);
    padding: 20px 0;
    
  }
  .logo      { order: 1; }
  .nav-left  { order: 2; }
  .nav-right { order: 3; }
  


  /* When checkbox is checked → Show nav */
  #nav-toggle:checked ~ .nav-container {
    display: grid;
    z-index:2;
  }

  .nav-left, .nav-right {
    display: block;
    padding: 0;
    margin-left: 25px;
  }

  .nav-left li,
  .nav-right li {
    display: block;
    margin: 10px 0;
  }

}
/* -------------------- End Navigation -------------------- */

.local-am-content h2{
    font-size:1.5em;
}
.local-am-content{
    margin:5%;
    font-size:1.5em;
}
.local-am-content li{
    display:list-item;
}


.map-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5%;
}
.content{
	width:100%;
	display:inline-block;
	padding-bottom:20px;
}



.no-margin{
	margin:0px !important;
}

.no-padding{
	padding:0px !important;	
}

.no-bold{
	font-weight:normal !important;	
}

.no-border{
	border:none !important;
}

.center{
	text-align:center;	
}

.block{
	display:block !important;	
}

@media only screen and (max-width:1200px){
	
}

@media only screen and (max-width:960px){	
	.grid-four-columns{
		-ms-grid-columns:1fr;
		grid-template-columns:1fr 1fr;
	}
}
.hide-after-720 {
    display: none;
}
@media only screen and (max-width:870px){
	/* -------------------- Start Navigation -------------------- */
	#logo{
	    width:35%;
	}
	#button-two{
	    height:35px;
	}
.header-nav {
        display: block; 
        grid-template-columns: none;
        -ms-grid-columns: none;
    }
    .hide-after-720 {
        display: list-item;
    }
    .hide-on-small {
        display: none;
    }
    
    /*.nav-list{*/
    /*    display: grid; */
    /*    grid-template-columns: 1fr 1fr 1fr 1fr;*/
    /*    -ms-grid-columns: 1fr 1fr 1fr 1fr;*/
    /*}*/
    .nav-and-icon {
        transform: none;
        margin: 0;
        padding: 0;
    }
    .footer{
        display:grid;
    	-ms-grid-columns:1fr;
    	grid-template-columns:1fr;
    	color:white;
    	font-size:1rem;
    }
    
    
    .footer-navigation{
    	justify-self: center;
    	display:grid;
    	-ms-grid-columns:2fr 2fr 2fr 2fr;
    	grid-template-columns:2fr 2fr 2fr 2fr;
    	place-items: center;
    	align-items: top;
    	font-size:1rem;
}

	 #nav-one{
    transform: none;
    display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr;
	grid-template-columns:1fr;

}

	#nav{
        position: relative;
    }
    #nav img{
        vertical-align:middle;
    }
	#nav > a{
	}
	
	#nav:not( :target ) > a:first-of-type,
	#nav:target > a:last-of-type{
		display: block;
		width:100%;
		color:white;
		font-size:1.25rem;
		padding:5px 10px;
		text-decoration:none;
	}
	
	#nav a{
		/*font-size:1.25rempx;	*/
	}
	#nav li a {
    color: #fff;
    display: block;
    text-decoration: none;
    font-size: 1.7rem;
    margin: 0%;
    text-align: left;
    }
 
    /* first level */
 
    #nav div> div > ul{
        height: auto;
        display: none;
        /*position: absolute;*/
        left: 0;
        right: 0;
		/*background-color:#ccc;*/
		margin-top:8px !important;
		padding-bottom:10px;
    }
	#nav:target div > div > ul{
		display: block;
	}
	#nav div > div > ul > li{
		width: 100%;
		float: none;
		margin:0px !important;
		padding:4px 0px;
	}

    /* second level */
 
    #nav li ul{
        position: static;
		width:98%;
		margin:0 !important;
		text-align:center;
		padding:0 !important;
    }
	#nav li ul a{
		padding:0.5em 0;
		margin:0.25em 0;
	}
	/*End Navigation*/
	
	
	.footer{
		text-align:center;
	}
	
}

@media only screen and (max-width:1831px){
	.First-Text-Box {
        margin: 8% 4%;
        padding-top: 10.5%;
    }
    #logo{
        padding-top:2vh;
        
    }
}
@media only screen and (max-width:1024px){
	#nav li a {

    font-size: 1.25rem;
}

}

@media only screen and (max-width:769px){
    .First-Text-Box{
        font-size: 1.5rem;

    }
    #button-two{
        /*height: 335px; */*/
        font-size: 1.5rem;
        place-self: center;
        /* margin: 4px; */
        /* width: 200px; */
        max-height: 600px;
        background-image: linear-gradient(to top, #45aff7, #1fd4e7);
        justify-self: center;
        border-radius: 20px;
        padding: 1.3% 6%;
        color: white;
        text-decoration: none;
        font-weight: bold;
    }
    .camp-images-background{
    	font-size: 1.5rem;
    }
    .fireworks-box{
    	font-size: 1.5rem;
    }
    .camp-images-background{
        display:grid;
        -ms-grid-rows:1fr 7fr 1fr ;
    	grid-template-rows:1fr 7fr 1fr;
    	background-image: linear-gradient(to top, #ff934e, #fc686f);
    }
    #left-image{
        max-height:400px;
    }
    .amenities-images{
        /*max-height:400px;*/
        /*place-self: center;*/
        margin:4%;
        /*height: 70%;*/
        /*object-fit: cover;*/
    
        /*align-self: center;*/
    }
    .amenities-text{
        text-align: center;
        color:white;
        place-self:center;
    }
    .amenities-images-box{
        display:grid;
        -ms-grid-columns:1fr;
		grid-template-columns:1fr;
    }
    .fireworks-box{
        display:grid;
    	-ms-grid-columns:1fr;
    	grid-template-columns:1fr;
    	margin-top: 4%;
    	margin-bottom: 4%;
    	margin-left:2%;
    	margin-right:2%;
    	grid-column-gap: 50px;
    }
    #last-image{
        max-height:450px;
    }
	
}