* {
   margin: 0;
   padding: 0;
   box-sizing:border-box;
}

li {
 margin-left: 15px;
}
.bg-img {
   /* The image used */
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("image/campsites.jpeg");
 
   min-height: 100vh;
   width:100%;
 
   /* Center and scale the image nicely */
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 
   /* Needed to position the navbar */
   position: relative;
 }
 
 /* Position the navbar container inside the image */
 .container {
   position: absolute;
   margin: 20px;
   width: auto;
 }
 
 /* The navbar */
 .topnav {
   overflow: hidden;
   background-color: darkgreen;
 }
 
 /* Navbar links */
 .topnav a {
   float: left;
   color: #f2f2f2;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
 }
 
 .topnav a:hover {
   background-color: #ddd;
   color: black;
 }

 .topnav a.split {
   float: left;
   background-color: white;
   color:black

 }

 .hero-text {
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: white;
   text-align:center;
 }
 
 ul{ 
 columns: 2;
       -webkit-columns: 3;
       -moz-columns: 3;
       text-align: left ;
       margin-left: 50px;

     }
h2, h3{
 margin-left: 10px;
 
}

p {
   margin-left: 10px; 
}

div.gallery {
 border: 1px solid green;
 margin-top: 5%;
}

div.gallery:hover {
 border: 1px solid green;
}

div.gallery img {
 width: 100%;
 height: auto;
}

div.desc {
 padding: 15px;
 text-align: center;
}

* {
 box-sizing: border-box;
}

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

@media only screen and (max-width: 700px) {
 .responsive {
   width: 49.99999%;
   margin: 6px 0;
 }
}

@media only screen and (max-width: 500px) {
 .responsive {
   width: 50%;
 }
}

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


div.scroll-container {
 background-color: lightgoldenrodyellow;
 overflow: auto;
 white-space: nowrap;
 padding: 10px;
}

div.scroll-container img {
 padding: 5px;
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.sbscolumn {
 float: left;
 padding: 5px;
 align-content: center;
}

/* Clear floats after image containers */
.sbsrow::after {
 content: "";
 clear: both;
 display: table;
}

.map {
 width: 80%;
 margin: auto;

}
.map iframe{
 width: 100%;
}


.contact { 
 text-align: center;
 font-size: 30px;
}

.book {
 padding-left: 5px;
}

.footer {
 position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 background-color: darkgoldenrod;
 color: white;
 text-align: center;
}