@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Halant:wght@300;400;500;600;700&display=swap');

body {background-image: url("up-north-supplemental-materials/images/woods.jpeg")}

#wrapper1 {width: 100%; background-color: tan; align-content: center; margin-top: 20px;}

header {width: 100%;}
#content {width: 70%; margin: 0 auto; position: relative;} /*width: 960px*/

.color {background-color: #012E03; width: 100%;} /*width: 960px*/

#content img {float: center; margin-left: 22.8%;} /*width: 250/1200 = 0.228333333333%*/

	nav {width: 100%; position: absolute; padding: 5px 1.041666667%; align: center; margin-bottom: 40px; color: ghostwhite;} /*padding: 10/960 = .010416667*/

	nav li {display: inline-block; margin: 15px; font-size: 1.25em; color: ghostwhite;} /*fontsize = 20px/16 = 1.25em*/

	nav a {text-decoration: none; color: ghostwhite;}

	nav a:hover {background-color: tan; color: forestgreen;}

.bannerimg {margin-top: 125px; width: 100%; overflow: hidden; white-space: nowrap;}


/*slideshow for home page*/
#slideshow-wrapper {width: 100%; height: 441px; margin-top: 125px;}

#slideshow {width: 100%; height: 441px; overflow: hidden; white-space: nowrap;}

#slideshow img {width:100%; height: 100%; display: inline-block;}

/*ends slideshow*/


/*Index page columns*/

main h1 {color: ghostwhite; text-align: center; font-family: 'Halant'; margin-top: 10px;} 

#paragraph {font-size: 1em; color: ghostwhite; text-align: left; font-family: 'Halant'; padding: 0 0.1%; margin: 0 0.1% 0.1%;} /*font-size = 16/16 = 1em | padding and margin= 10/100 = 0.1%*/

#col1 {width: 35%; margin-right: 0.3%; float: left;} /*500px | margin: 30/100= .3*/

#col2 {width: 35%; margin-left: 0.3%; float: right;} /*500px | margin: 30/100= .3*/

#col3 {width: 35%; float: center;} /*500px*/

.img1 {float: right; margin-top: -170px; margin-right: -45%;} 

.img3 {float: right; margin-top: 320px; margin-left: 20%; margin-right: -25%;}

.img4 {float: right; margin-top: -175px; margin-right: -45%;}


/*footer*/

footer {background-color: #012E03; color: ghostwhite; padding: 10px 0;}

#footer-content {width: 100%; margin: 0px auto; display: flex; justify-content: space-between; align: center;} /*960px */

#footer-left {display: inline-block; color: ghostwhite; font-family: 'Halant'; margin-left: 0.2%;} /*20/100*/

#footer-right {display: inline-block; color: ghostwhite; text-align: right; float: right; margin-right: 0.2%;} /*20/100*/

footer h3 {color: ghostwhite; font-size: 1em; text-transform: uppercase; font-family: 'Halant';} /*fontsize = 16/16 = 1em*/

footer p {color: ghostwhite; font-size: 0.875em; font-family: 'Halant';} /*fontsize = 14/16 = 0.875em*/

/*About page*/

.img2 {float: right; padding: 10px; margin-top: -160px; width: 8%; heigh: 100px; transition: width 2s;}

.img2:hover {width: 16%}

#wrapper2 {width: 100%; background-color: tan;}

#wrapper2 h1 {color: ghostwhite; text-align: left; margin-left: 1.2%; font-family: 'Halant';} /*20/100*/

#wrapper2 p {color: ghostwhite; margin-right: 22%; margin-left: 1.2%; margin-bottom: 20px; font-family: 'Halant';}

/*Guest Reviews/Testimonials*/

#wrapper3 {width: 100%; background-color: tan;}

#wrapper3 h1 {color: ghostwhite; text-align: center; font-family: 'Halant';}

#wrapper3 h2 {color: ghostwhite; text-align: center; font-family: 'Halant';}

#wrapper3 p {color: ghostwhite; text-align: center; margin: 0 3% 20px; font-family: 'Halant';}

/*media*/

@media only screen and (max-width: 1024px) {
	
	#content {width: 100%;
	align-content: center;}
	
	#content img {align: center; margin-left: 27.34375%;}
	
	.color {width: 98%;
		float: center;
	height: 60px;}
	
	nav {width: 80%;
	position: relative;
	margin-bottom: 0px;}
	
	nav li {margin: 0px 1.4648438%;}
	
	#slideshow-wrapper, #slideshow {margin-top: 20px;
	height: 225px;}
	
	#col1, #col3 {margin-left: 1.953125%;}
	
	.img1, .img4 {margin-left: 9.765625%;
	margin-right: -70%;
	margin-top: -200px;}
	
	.img3 {margin-top: 410px;}
	
	footer {height: 80px;
	margin-top: 20px;}
	
	footer h3, footer p {margin-top: 0px;}
	
	.bannerimg {margin-top: 20px;
	height: 225px;}
	
	.img2 {height: 100px;
	width: 100px;
	margin-top: -200px;}
	
	.img2:hover {width: 200px;
	height: 200px;}
	
	
}


@media only all and (max-width: 480px) {
	
	body {background-image: url("up-north-supplemental-materials/images/woods.jpeg"); width: auto; height: auto;}
	
	#content {align: center;
	width: 100%;}
	
	#content img {height: 150px;
	width: 45%;
	align: center;
	margin-left: 29.166666667%;}
	
	.color {height: 100px;}
	
	nav {width: 100%;
	position: relative;
	margin-bottom: 0px;
	margin-top: -2px;
	background-color: #012E03;}
	
	nav a {color: ghostwhite;
		display: block;
		border-bottom: 1px solid white;
		padding: 2px 0px;
		width: 100%;}
	
	nav a:hover {color: none;}
	
	nav li {align: center;
	font-size: 1em;
	display: flex;
	flex-direction: column;
	margin-left: -4.166666667%;
	width: 100%} /*16/16=0.75*/
	
	#slideshow, #slideshow-wrapper {height: 200px;
	margin-top: 10px;}
	
	#wrapper1, #wrapper2, #wrapper3 {margin-top: 10px;
	width: 100%;}
	
	main h1, #wrapper2 h1, #wrapper3 h1 {font-size: 1.25em;}
	
	#paragraph, #wrapper2 p, #wrapper3 p {font-size: 1em;}
	
	#col1, #col2, #col3 {display: flex;
	flex-direction: column;
	align: center;
	width: 100%;
	margin: 0px;
	float: none;}
	
	.img1, .img3, .img4 {width: 90%; height: 150px; float: center;}
	
	#col1 {margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;}
	
	.img1 {margin-top: -10px;
	margin-left: auto;
	margin-right: auto;}
	
	#col2 {margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;}
	
	.img3 {margin-top: -30px;
	margin-left: auto;
	margin-right: 4.16666667%;
	margin-bottom: 20px;}
	
	#col3 {margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;}
	
	.img4 {margin-top: -30px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;}
	
	footer {margin: auto;
	height: 60px;
	width: 100%;}
	
	footer h3 {font-size: 0.75em;}
	
	footer p {font-size: 0.625em;}
	
	.bannerimg {height: 200px; margin-top: 10px;}
	
	#wrapper2 {margin-bottom: 20px;
	height: 800px;}
	
	#wrapper2 p, #wrapper2 h1 {text-align: center;
	margin: 0 auto;}
	
	#wrapper2 p {margin-bottom: 20px;}
	
	.img2 {margin-left: 72.916666667%;
	margin-bottom: 20px;
	margin-top: -10px;}
	
}