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

body {
    margin: 0px;
    padding: 0px 0px 0 0px; /* Done to remove default padding */
}


/* ------------------------------------------------------------------------------------------------- */
/* SCRIPT FOR TOP-ALL-PAGES DIV (id #top-all-pages) - THIS IS THE HEADER WHERE THE LINKS BUTTONS ARE OVER THE REDMAN SUNRISE BACKGROUND PIC */

#top-all-pages .dropbtn {
  background-color: rgba(0,0,0,0.00);
  opacity: 1;
  color: #0000FF;  /* blue; */
  padding: 16px;
  font-size: 1.24rem;
  /* text-shadow: 2px 2px 25px #000000; */
  border: none;
  cursor: pointer;
  }

#top-all-pages .dropdown {
  position: relative;
}

/* Mobile first */
#top-all-pages .dropdown-content {
  display: none;
  position: absolute;
  z-index: 999; /* A high value Z-index to ensure it's on top when mobile buttons stack */
  background-color: #B3BBC8;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    top: 0;
    left: 80%;
   /* transform: translateX(85%); */
}

@media (min-width: 576px) {
  
#top-all-pages .dropdown-content {
  display: none;
  position: absolute;
  z-index: 999; /* A high value Z-index to ensure it's on top when mobile buttons stack */
  background-color: #B3BBC8;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	top: 0;
	right: 0;
	left: 0;
    transform: translateY(25%);
	}
}

#top-all-pages .dropdown-content a {
  color: midnightblue;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#top-all-pages .dropdown-content a:hover {
  background-color: #DCDCDC;
  color: blue;
}

#top-all-pages .dropdown:hover .dropdown-content {
  display: block;
}

/*  #top-all-pages .dropdown:hover .dropbtn {
  background-color: #E51616;
}  */

/* ----------------------------------------------------- */

#top-all-pages .link-style-address {
  front-family: Verdana, Geneva, sans-serif;
  color: white;
  font-size: 1.2rem;
  text-decoration: none;
  font-weight: bold;
  font-style: none;
  text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  /*v text-shadow: 0 0 4px #fff, 0 0 10px #fff; */ /* Creates a glow effect */
}

/* ------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

#top-all-pages .container-top-all-pages {
  display: grid;
  grid-template-columns: repeat(13, [col-start] 1fr); 
	/* grid-template-columns: [col-start] 1fr repeat(12, 1fr); */
  gap: 0px;
  /* height: 400px; */
  position: relative; /* Needed for positioning the pseudo-element */
  z-index: 100; /* set to 100 so dropdowns are above background image (Redman Bluff) and above DIV ID #main images */
	
	
}
/* ------------------------------------------------------------------------------------------------- */
#top-all-pages .container-top-all-pages::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("jpg/2026-buttons/20060530-023--redman-bluff-at-sunrise--at-grampians-paradise---cropped-939px--sky-corrected-.jpg");
  background-size: cover;
  background-position: center;
  /* Optional: Add an overlay or opacity */
  opacity: 0.8; 
  /* background-color: rgba(0, 0, 0, 0.4); */

  /* Place the pseudo-element behind the grid items */
  z-index: -1; 
}

/* ------------------------------------------------------------------------------------------------- */
/* Below is the CSS for the Home Botton that appears on hover over the "Grampians Paradise Camping and Caravan" image link */

.hover-image {
  display: none; /* Hide the hover image by default */
}

.image-wrapper:hover .default-image {
  display: none; /* Hide the default image on hover */
}

.image-wrapper:hover .hover-image {
  display: block; /* Show the hover image on hover */
}

/* ------------------------------------------------------------------------------------------------- */
	
/* Mobile first */
  #top-all-pages .container-top-all-pages > * {
    /*  border: 1px solid green; */
    /* background-color: beige; */
    padding: 0px 5px 0px 5px; /* Top: 0px, Right: 5px, Bottom: 0px, Left: 5px */
    grid-column: col-start / span 13;
    font-family: Arial, "sans-serif";
 }
  #top-all-pages .home-business-column1 {
   	grid-column: col-start / span 4;
    grid-row: 1 / 4;
	padding: 1px 10px 0px 5px;
	/* border: 1px solid green; */
  }
  #top-all-pages .buttons-sitemap {
	grid-column: col-start 10 / span 2;
    grid-row: 4;
	display:flex;
	justify-content: center;
	padding: 10px 10px 0px 0px;
	/* border: 1px solid green; */
  }
  #top-all-pages .buttons-column2 {
	grid-column: col-start 10 / span 3;
    grid-row: 3;
	display:flex;
	justify-content: center;
	padding: 10px 10px 0px 0px;
	/* border: 1px solid green; */
  }
  #top-all-pages .buttons-column3 {
	grid-column: col-start 10 / span 3;
    grid-row: 5;
	display:flex;
	justify-content: center;
	padding: 10px 10px 0px 0px;
	/* border: 1px solid green; */
  }
  #top-all-pages .buttons-column4 {
	grid-column: col-start 10 / span 3;
	grid-row: 6;
	display:flex;
	justify-content: center;
	padding: 10px 10px 0px 0px;
	/* border: 1px solid green; */
  }
  #top-all-pages .dropdowns-column2 {
	grid-column: col-start / span 6;
	grid-row: 4;
	padding: 2px 10px 0px 0px;
	}
  #top-all-pages .dropdowns-column3 {
	grid-column: col-start / span 6;
	grid-row: 5;
	padding: 2px 10px 0px 0px;
	}
  #top-all-pages .dropdowns-column4 {
	grid-column: col-start / span 6;
	grid-row: 6;
	padding: 2px 10px 0px 0px;
	}
/* ----------------------------------------------------- */
@media (min-width: 576px) { /* Tablet Size */
  #top-all-pages .home-business-column1 {
    grid-column: col-start / span 4;
    grid-row: 4;
	padding: 10px 10px 0px 5px;
	/* border: 1px solid green; */
  }
  #top-all-pages .buttons-column2 {
	grid-column: col-start 1 / span 2;
    grid-row: 1 / 2;
	padding: 10px 10px 0px 60px;
	/* border: 1px solid green; */
  }
  #top-all-pages .buttons-sitemap {
	grid-column: col-start 4 / span 4;
    grid-row: 1 / 2;
	display:flex;
	justify-content: left;
	padding: 10px 10px 0px 5px;
	/* border: 1px solid green; */
  }
  #top-all-pages .buttons-column3 {
	grid-column: col-start 9 / span 2;
    grid-row: 1 / 2;
	padding: 10px 20px 0px 10px;
	/* border: 1px solid green; */
  }
  #top-all-pages .buttons-column4 {
	grid-column: col-start 12 / span 2;
    grid-row: 1 / 2;
	padding: 10px 50px 0px 10px;
	/* border: 1px solid green; */
  }
  #top-all-pages .dropdowns-column2 {
    grid-column: col-start 5 / span 3;
    grid-row: 4;
	place-self: center; /* if set to left "Campground Info" will translate  vertically upwards */
	padding: 70px 10px 0px 10px;
	}
  #top-all-pages .dropdowns-column3 {
    grid-column: col-start 8 / span 3;
    grid-row: 4;
	place-self: center;
	padding: 70px 10px 0px 10px;
	}
  #top-all-pages .dropdowns-column4 {
    grid-column: col-start 11 / span 3;
	grid-row: 4;
	place-self: center;
	padding: 70px 10px 0px 10px;
	}
	/* change min-width to screen resolution (width) we want to change from mobile phone viewport to tablet viewport  */
}
/* ----------------------------------------------------- */
@media (min-width: 768px) { /* Desktop Size */
  #top-all-pages .home-business-column1 {
    grid-column: col-start / span 4;
    grid-row: 4;
	padding: 10px 10px 0px 5px;
   /* border: 1px solid green; */
  }
  #top-all-pages .buttons-column2 {
	grid-column: col-start / span 3;
	grid-row: 1 / 2;
	padding: 10px 10px 0px 20px;
	/* border: 1px solid green; */
  }
  #top-all-pages .buttons-sitemap {
	grid-column: col-start 5 / span 3;
    grid-row: 1 / 2;
	display:flex;
	justify-content: left;
	padding: 10px 10px 0px 5px;
	/* border: 1px solid green; */
  }
  #top-all-pages .buttons-column3 {
	grid-column: col-start 8 / span 4;
	grid-row: 1 / 2;
	padding: 10px 10px 0px 10px;
	/* border: 1px solid green; */
  }
  #top-all-pages .buttons-column4 {
	grid-column: col-start 11 / span 3;
	grid-row: 1 / 2;
	padding: 10px 10px 0px 10px;
	/* border: 1px solid green; */
  } 
  #top-all-pages .dropdowns-column2 {
    grid-column: col-start 5 / span 3;
    grid-row: 4;
	place-self: center;
	padding: 70px 10px 0px 10px;
	}
  #top-all-pages .dropdowns-column3 {
    grid-column: col-start 8 / span 3;
    grid-row: 4;
	place-self: center;
	padding: 70px 0px 0px 10px;
	}
  #top-all-pages .dropdowns-column4 {
    grid-column: col-start 11 / span 3;
	grid-row: 4;
	place-self: center;
	padding: 70px 0px 0px 10px;
	}
  /* change min-width to screen resolution (width) we want to change from tablet viewport to desktop viewport  */	
}
/* ------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------- */



/* SCRIPT FOR MAIN DIV (id #main) - THE PART WITH THE RESPOSIVE PICTURES L-594pxHIGH, M-768pxWIDE, S-576pxWIDE */

#main h1 { 
	font-size: 2.4rem;
	font-style: bold;
	line-height: 1.2;
	padding: 0.6rem 8px 0.6rem 8px;
	text-align: center;
	}

#main h2 { 
	font-size: 1.8rem;
	font-style: bold;
	line-height: 1.2;
	padding: 0.3rem 8px 0.0rem 8px;
	text-align: center;
	}

#main p {
	padding: 0 8px 0 8px;
	font-size: 1.2rem;
}

#main .p-large {
	padding: 0 8px 0 8px;
	font-size: 2.2rem;
}


#main .caption {  /*This is for the captions under pictures) */
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 0.9rem;
	text-align: center;
}

/* ------------------------------------------------------------------------------------------------- */

#main .image-container {
	width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
	position: relative; /* Add this */
	}

#main .image-container img {
    width: auto; /* Add this */
    height: 100%; /* Add this */
	min-width: 100%; /* Add this */
	object-fit: cover; /* Add this */
	/* width: auto;
    /* height: 100%;
    /*margin: 0 -50%; /* Negative margin creates the crop effect */
    /* max-width: none; /* Override any max-width constraints */
	}

/* ------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------- */

/* Mobile first - mobiles under 358px  */
  #main .iframe-container {
            display: flex;
            justify-content: center; /* Centers horizontally */
            align-items: center;     /* Centers vertically */
            width: 100%; /* 100vw includes the area that is under the vertical scroll bar, 100% does not */
			height: 50vw;           /* Set a height for the container to enable vertical centering */
            /* border: 1px solid black; */
	    }
        .iframe-container iframe {
            width: 100%;
            aspect-ratio: 2/1;
        }

@media (max-device-height: 450px) and (orientation: landscape) {
  #main .iframe-container {
            display: flex;
            justify-content: center; /* Centers horizontally */
            align-items: center;     /* Centers vertically */
            width: 200vh;
			height: 100%;           /* Set a height for the container to enable vertical centering */
            /* border: 1px solid black; */
        }
        .iframe-container iframe {
            hight: 100%;
            aspect-ratio: 2/1;
        }
      }
	
	
@media (min-device-height: 451px) and (min-width: 576px) { /* Tablet Size */
  #main .iframe-container {
            display: flex;
            justify-content: center; /* Centers horizontally */
            align-items: center;     /* Centers vertically */
            width: 100%;
			height: 49vw;           /* Set a height for the container to enable vertical centering */
            /* border: 1px solid black; */
        }
        .iframe-container iframe {
            width: 98%;
            aspect-ratio: 2/1;
        }
     }


@media (min-device-height: 451px) and (min-width: 768px) { /* Desktop Size */
  #main .iframe-container {
            display: flex;
            justify-content: center; /* Centers horizontally */
            align-items: center;     /* Centers vertically */
            width: 100%;  /* 100vw includes the area that is under the vertical scroll bar, 100% does not */
			height: 42.5vw; /* Set a height for the container to enable vertical centering */
            /* border: 1px solid black; */
	       }
        .iframe-container iframe {
            width: 85%;
            aspect-ratio: 2/1;
        }
     }

.homepage-grid-cards-and-image-slider-container {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(max(180px, 30vw), 1fr));
  grid-auto-flow:row;
  gap:5px; /* distance between */
  padding-top: 5px; /* Padding above top set of tiles (eg immediately under under the header background image)*/
	text-align: center;
	align-items: flex-start;
	
} 

@media (min-width: 360px) {
	.homepage-grid-cards-and-image-slider-container {
	grid-template-columns: repeat(auto-fit, minmax(max(280px, 30vw), 1fr));
}
}

.grid-card-text {
	font-size: 1.3rem;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	position: relative;
	z-index: 99;
	margin-top: -27px; 
}/* apply text formatting in this box for cards */

.homepage-grid-cards-and-image-slider-container > div {
	display: grid;
	margin: 3px 0px; /* Sets padding around cards top+bottom left+right, can be split to 4 digits */
} /* effects all divs within .homepage-grid-cards-and-image-slider-container if needed */

.image-grid {
	display: flex;
  width: 98%;
  max-width: 400px; /* resizes cards on large screens */
  height: auto;
  grid-column: auto;
  grid-row: auto;
 object-fit: cover;
 object-position: center;
 object-position: bottom;
 outline: auto;
 border-bottom: 1.8rem solid hsla(0,0%,90%,0.90);
}

.slider-grid-container{
	display:grid;
	width: 100%;
	/* Forces the slider to span from the first column to the very last available column */
	grid-column: 1 / -1; 
	/* Locks the slider into the 3rd vertical slot */
	grid-row: 3;
}

.slider-container { 
	width: 100%;
    max-width: 98vw;
	/* Not AI code, coppied from test for slider */
	 /* just a generic container with some padding to stop anything else interfering */
  padding:.2rem;
  height: 22vh; /* defines the height of the slide bar - 9 lines of code */
  max-height:22vh; /* defines the height of the slide bar - 9 lines of code */
  min-height: 100px; /* defines the height of the slide bar - 9 lines of code */
  display: block;
	overflow: hidden;

	
	/* Not AI code, coppied from test for slider */
}

.slider img {
  width: 100%;
  height: auto;
}
 /* Ai code above between here and .homepage-grid-cards-and-image-slider-container */


.slider-wrapper { /* the part where things start to matter, positions the slider within the above container to allow buttons and the like to sit nicely, also sets the width that images scale to (in theory) and internal margin of the box before the pictures and buttons are introduced so they can all position nicely */
  position:relative;
  margin: 0 auto;
  height: 22vh; /* defines the height of the slide bar - 9 lines of code */
  max-height:22vh; /* defines the height of the slide bar - 9 lines of code */
  min-height: 100px; /* defines the height of the slide bar - 9 lines of code */
}
.slider { /* the thing that sets image details, x overflow (hiding extra left and right images), sets the base for scrolling by buttons and circles and rounds the corners of the images */
  display:flex;
  height: 22vh; /* defines the height of the slide bar - 9 lines of code */
  max-height:22vh; /* defines the height of the slide bar - 9 lines of code */
  min-height: 100px; /* defines the height of the slide bar - 9 lines of code */
  overflow: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
  border-radius: 0.4rem;
}
.slider img{ /* sets responsive scaling details for all images within .slider, sets the x-scroll details and covers images outside the .slider box  */ 
  padding: 0 2px;
  max-width: 100%;
  height: auto;
  object-fit: cover;/* hides the image overflow */
  min-width: 939px;
  flex-shrink: 0;
  scroll-snap-align: center;/* (overflow x) snap align so the center of each image is the snap point */
}

.slider-nav { /* the bit we set up the circle buttons location */
  display: flex; /* lets them scale depending on screen */
  column-gap: 1rem; /* spacing between buttons */
  position: absolute; /* don't move position when scaling */
  bottom: .75rem; /* stay this far off x */
  left: 50%; /* stay this far off x */
  transform: translateX(-50%); /* stay this far off x (forces to stay centered by giving 2 x axis references) */
  z-index: 1; /* puts it in front of images */
}

.slider-nav a{ /* the bit we set up the circle buttons */
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  outline: solid; /* to make visable even on white */
  outline-width: .1rem; /* to make visable even on white */
  outline-color: hsla(0,0%,0%,0.80); /* to make visable even on white */
  background-color: #7E7E7E; /* sets the colour of dots */
  opacity: 0.6;
  transition: opacity ease 250ms;
}

.slider-nav a:hover { /* when you hover on circles they lose opacity and change colour therefore apearing to light up */
  background-color: #FFED00; /* sets the colour on hover */
  opacity: 1;
}
.slider-nav a.active { /* attempting to set the currently selected nav button to be coloured using the js  */
 background-color: rgba(255,255,255,1.00);
	opacity: .5;
}

.navigation-buttons {
  position: absolute;
  top: 50%;
  width: 98%; /* adjust here + for space off sides */
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 1% 0 1%; /* adjust here + for space off sides */
  z-index: 2;
}
#prevBtn, #nextBtn {
  background-color: rgba(255,255,255,0.5); /* sets colour and opacity of buttons */
  color: hsla(0,0%,0%,1); /* expected to override above and set text colour but does not seem to */
  border: none;
  padding: 0.3rem .2rem;
  cursor: pointer;
  border-radius: 0.3rem;
}
/* the code for the image slider pasted in, no checks */

/* ------------------------------------------------------------------------------------------------- */

/* script for red links */
.link-style-red {
  color: red !important; /* !important declaration to override "#top-all-pages .dropdown-content a" */
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  text-decoration: none;
  font-style: none;
}

/* ------------------------------------------------------------------------------------------------- */

/* SCRIPT FOR BOTTOM-LINKS DIV (id #bottom-links) - THIS IS THE FOOTER WHERE THE GRID OF LINKS TO PAGES AND SUB-DIRECTORY PAGES IS LOCATED */

#bottom-links .link-style-subdirectory1 {
  color: mediumblue;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: 1.875rem;
  text-decoration: none;
  font-style: none;
}
#bottom-links .link-style-pages2 {
  color: darkblue;
  front-family: Verdana, Geneva, sans-serif;
  font-size: 1.25rem;
  text-decoration: none;
  font-style: none;
}
#bottom-links .link-style-footer3 {
  color: midnightblue;
  front-family: Verdana, Geneva, sans-serif;
  font-size: 0.9rem;
  text-decoration: none;
  font-style: none;
}

* {
  box-sizing: border-box;
}

 #bottom-links .container-bottom-links {
    display: grid;
	background: #C9D9E4;
	grid-template-columns: repeat(12, [col-start] 1fr); 
	/* grid-template-columns: [col-start] 1fr repeat(12, 1fr); */
    gap: 0px;
  }



/* Mobile first - mobiles under 358px  */
  #bottom-links .container-bottom-links > * {
    /* border: 1px solid green; */
    /* background-color: beige; */
    padding: 0px 10px 0px 10px; /* Top: 0px, Right: 20px, Bottom: 30px, Left: 40px */
    grid-column: col-start / span 12;
    font-family: Arial, "sans-serif";
  }

  #bottom-links .buttons-column2 {
	grid-column: col-start / span 6;
    grid-row: 1;
	display:flex;
	justify-content: center;
	padding: 0px 10px 0px 0px;
  }
  #bottom-links .buttons-column3 {
	grid-column: col-start 6 / span 6;
	grid-row: 1;
	display:flex;
	justify-content: center;
	padding: 0px 10px 0px 0px;
  }
  #bottom-links .buttons-column4 {
	grid-column: col-start / span 12;
	grid-row: 2;
	display:flex;
	justify-content: center;
	padding: 0px 10px 0px 0px;
  }

  #bottom-links.campground-column1 {
   	padding: 0px 10px 0px 10px;
	border: 1px solid green;
  }
  #bottom-links .conatct-column2top {
	padding: 0px 10px 0px 10px;
	border: 1px solid green;
  }
  #bottom-links .conatct-column2bottom {
	padding: 0px 10px 0px 10px;
	border: 1px solid green;
  }
  #bottom-links .nature-column3 {
	padding: 0px 10px 0px 10px;
	border: 1px solid green;
  }

  #bottom-links .footer-smap {
    grid-column: col-start / span 3;
	text-align: center;
  }
  #bottom-links .footer-gallery {
    grid-column: col-start 4 / span 4;
	text-align: center;
  }
  #bottom-links .footer-tandc {
    grid-column: col-start 8 / span 4;
	text-align: left;
  }



@media (min-width: 358px) { /* Mobile phones over 358 */
#bottom-links .container-bottom-links > * {
    /* border: 1px solid green; */
    /* background-color: beige; */
    padding: 0px 10px 0px 10px; /* Top: 0px, Right: 20px, Bottom: 30px, Left: 40px */
    grid-column: col-start / span 12;
    font-family: Arial, "sans-serif";
  }

  #bottom-links .buttons-column2 {
	grid-column: col-start / span 3;
    grid-row: 1;
	display:flex;
	justify-content: center;
	padding: 0px 10px 0px 0px;
  }
  #bottom-links .buttons-column3 {
	grid-column: col-start 4 / span 4;
	grid-row: 1;
	display:flex;
	justify-content: center;
	padding: 0px 10px 0px 0px;
  }
  #bottom-links .buttons-column4 {
	grid-column: col-start 8 / span 5;
	grid-row: 1;
	display:flex;
	justify-content: center;
	padding: 0px 10px 0px 0px;
  }

  #bottom-links.campground-column1 {
   	padding: 0px 10px 0px 10px;
	border: 1px solid green;
  }
  #bottom-links .conatct-column2top {
	padding: 0px 10px 0px 10px;
	border: 1px solid green;
  }
  #bottom-links .conatct-column2bottom {
	padding: 0px 10px 0px 10px;
	border: 1px solid green;
  }
  #bottom-links .nature-column3 {
	padding: 0px 10px 0px 10px;
	border: 1px solid green;
  }

  #bottom-links .footer-smap {
    grid-column: col-start / span 3;
	text-align: center;
  }
  #bottom-links .footer-gallery {
    grid-column: col-start 4 / span 4;
	text-align: center;
  }
  #bottom-links .footer-tandc {
    grid-column: col-start 8 / span 4;
	text-align: left;
  }
	
}



@media (min-width: 576px) { /* Tablet Size */
  #bottom-links .buttons-column2 {
	grid-column: col-start / span 3;
    grid-row: 1;
	display:flex;
	justify-content: center;
	padding: 0px 10px 0px 0px;
  }
  #bottom-links .buttons-column3 {
	grid-column: col-start 4 / span 4;
	grid-row: 1;
	display:flex;
	justify-content: center;
	padding: 0px 10px 0px 0px;
  }
  #bottom-links .buttons-column4 {
	grid-column: col-start 8 / span 5;
	grid-row: 1;
	display:flex;
	justify-content: center;
	padding: 0px 10px 0px 0px;
  }

  #bottom-links .campground-column1 {
    grid-column: col-start / span 6;
    grid-row: 2;
	padding: 0px 10px 0px 10px;
	border: 1px solid green;
  }
  #bottom-links .conatct-column2top {
    grid-column: col-start / span 6;
    grid-row: 3;
	padding: 0px 10px 0px 10px;
	border: 1px solid green;
  }
  #bottom-links .conatct-column2bottom {
    grid-column: col-start 7 / span 6;
    grid-row: 3;
	padding: 0px 10px 0px 10px;
	border: 1px solid green;
  }
  #bottom-links .nature-column3 {
    grid-column: col-start 7 / span 6;
	grid-row: 2;
	padding: 0px 10px 0px 10px;
	border: 1px solid green;
  }
  #bottom-links .footer-smap {
    grid-column: col-start / span 4;
	grid-row: 6;
	text-align: center;
  }
  #bottom-links .footer-gallery {
    grid-column: col-start 5 / span 4;
	grid-row: 6;
	text-align: center;
  }
  #bottom-links .footer-tandc {
    grid-column: col-start 9 / span 4;
	grid-row: 6;
	text-align: left;
  }
  nav ul {
    display: flex;
    justify-content: space-around;
  }
	/* change min-width to screen resolution (width) we want to change from mobile phone viewport to tablet viewport  */
}



@media (min-width: 768px) { /* Desktop Size */
  #bottom-links .nav {
    grid-column: col-start / span 12;
  }
  
  #bottom-links .buttons-column2 {
	grid-column: col-start / span 3;
    grid-row: 1;
	display:flex;
	justify-content: center;
	padding: 0px 10px 0px 0px;
  }
  #bottom-links .buttons-column3 {
	grid-column: col-start 4 / span 4;
	grid-row: 1;
	display:flex;
	justify-content: center;
	padding: 0px 10px 0px 0px;
  }
  #bottom-links .buttons-column4 {
	grid-column: col-start 8 / span 5;
	grid-row: 1;
	display:flex;
	justify-content: center;
	padding: 0px 10px 0px 0px;
  }

  #bottom-links .campground-column1 {
    grid-column: col-start / span 4;
    grid-row: 2 / 4;
	padding: 0px 10px;
    border: 1px solid green;
  }
  #bottom-links .conatct-column2top {
    grid-column: col-start 5 / span 4;
    grid-row: 2;
	padding: 0px 10px 0px 10px;
	border: 1px solid green;
  }
  #bottom-links .conatct-column2bottom {
    grid-column: col-start 5 / span 4;
    grid-row: 3;
	padding: 0px 10px 0px 10px;
	border: 1px solid green;
  }
  #bottom-links .nature-column3 {
    grid-column: col-start 9 / span 4;
	grid-row: 2 / 4;
	padding: 0px 10px 0px 10px;
	border: 1px solid green;
  }
  #bottom-links .footer-smap {
    grid-column: col-start / span 4;
	grid-row: 6;
	text-align: center;
  }
  #bottom-links .footer-gallery {
    grid-column: col-start 5 / span 4;
	grid-row: 6;
	text-align: center;
  }
  #bottom-links .footer-tandc {
    grid-column: col-start 9 / span 4;
	grid-row: 6;
	text-align: center;
  }
   nav ul {
    display: flex;
    justify-content: space-around;
  }
	/* change min-width to screen resolution (width) we want to change from tablet viewport to desktop viewport  */
}