html, body {
	margin: 0;
	padding: 0;
}

body {
	background-color: #F5F3EE; /*default to off-white background color*/
	background-image: url("img/serpentwallbg5.jpg"); /*serpent wall background image*/
	background-repeat: no-repeat; /*do not repeat background image*/
	background-attachment: fixed; /*background image is stationary*/
	background-size: cover; /*fit background image to screen*/
}

html {
	font-family: "Verdana", sans-serif;
}

* {
	box-sizing: border-box;
}

img {
	width: 100%;
	height: auto;
}

header img {
	width: auto;
	height: auto;
	max-width: 550px;
	display: block;
	margin-right: auto;
	margin-left: auto;
	/*min-width: 120px;*/
}

a {
	/*color: #6C00FF;*/
	color: #77450a;
}
a:hover {
	color: #3c3c3c;
}

header {
	background-color: rgba(215, 206, 187, 0.95); /*#D7CEBB; beige background*/
	color: #ffffff;
	padding: 15px;
	border-bottom: 10px solid #006900; /*10 px high, solid, dark-green bottom border*/ /*#a2906a;*/
}

section ul {
	list-style-image: url(img/bullet.png);
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: block;
}
/*----- nav li {
	padding: 8px;
	margin-bottom: 7px;
	background-color: #006900;
	color: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
nav li:hover {
	background-color: #4F914F;
	color: #fff;
} -----*/

nav a {
	/*color: #F5F3EE;*/
	color: #111;
	text-decoration: none;
	display: block;
	padding: 8px;
	background-color: #D7CEBB; /*beige background*/
}

/*formatting for active links*/
nav li a.active {
	background-color: #006900;
	color: #fff;
	padding: 8px;
	display: block;
}
nav li a:hover:not(.active) {
	background-color: #555;
	color: #fff;
	padding: 8px;
}
/*end formatting for active links*/

aside {
	background-color: #D7CEBB; /*beige background*/
	padding: 15px;
	color: #111;
	text-align: center;
	font-size: 14px;
}

aside a  {
	/* color: #f3f360; yellow*/
	color: #006900; /*dark green*/
}

aside a:hover {
	/*color: #fff; */
	color: #3c3c3c;
}

footer {
	background-color: rgba(215, 206, 187, 0.95); /*#D7CEBB; beige background*/
	color: #000; /*black text*/
	text-align: center;
	font-size: 12px;
	padding: 15px;
	border-top: 10px solid #006900; /*10px high, solid, dark green top border*/ /*#a2906a; light brown*/
	box-shadow: 1px 1px 1px #888;
}

footer a {
	color: /*#f3f360; yellow*/ #006900; /*dark green*/
}

footer a:hover {
	color: #3c3c3c;
}

.row:after {
	content: "";
	clear: both;
	display: block;
}

marquee {
	behavior: scroll;
	direction: left;
	background-color: #d7cebb;
	color: #006900;
	font-weight: bold;
	padding: 0 0 3px 0;
}

.red {
	color: #cd0000;
}

.whitebg {
	background-color: rgba(255, 255, 255, 0.85); /*background color white, opacity 85%*/
}

.transorange {
			background-color: rgba(255,84,0,0.4);
}

/* the following style was taken from the accordion tutorial on https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion and modefied*/
	.accordion {
		font: "Verdana", sans-serif;
		background-color: #D7CEBB;
		color: #111;
		font-size: 1.0em;
		cursor: pointer;
		padding: 8px;
		width: 100%;
		border: none;
		text-align: left;
		outline: none;
	}

	.live, .accordion:hover {
		background-color: #555;
		color: #fff;
		padding: 8px;
	}
	
	.panel {
		padding: 0 18px;
		display: none;
		background-color: none;
		overflow: hidden;
	}
/* end copied style */	
	
/*any class with col-*/
[class*="col-"] {
	float: left; /*float to the left*/
	padding: 15px; /*15 pixels of padding*/
	width: 100%; /*fill the element*/
}
/*for smartphones*/
@media only screen and (max-width: 599px) { /*for screens under 599 pixels*/
	.col-s-1 { 
		width: 8.33%; /*8.33% of the page*/
	}
	.col-s-2 {
		width: 16.66%; /*16.66% of the page*/
	}
	.col-s-3 {
		width: 25%; /*25% of the page*/
	}
	.col-s-4 {
		width: 33.33%; /*33.33% of the page*/
	}
	.col-s-5 {
		width: 41.66%; /*41.66% of the page*/
	}
	.col-s-6 {
		width: 50%; /*50% of the page*/
	}
	.col-s-7 {
		width: 58.33%; /*58.33% of the page*/
	}
	.col-s-8 {
		width: 66.66%; /*66.66% of the page*/
	}
	.col-s-9 {
		width: 75%; /*75% of the page*/
	}
	.col-s-10 {
		width: 83.33%; /*83.33% of the page*/
	}
	.col-s-11 {
		width: 91.66%; /*91.66% of the page*/
	}
	.col-s-12 {
		width: 100%; /*100% of the page*/
	}
/*on screens smaller than 320px, change body*/
body {
	background-color: #fff; /*body background color white*/
	background-image: none; /*remove background image*/
	}
header img {
	width: 100%;
	height: auto;
	}
/* nav li {
	margin-bottom: 1px;
	} */

}
/*for tablets*/
@media only screen and (min-width: 600px) { /*for screens over 600 pixels*/
	.col-m-1 {
		width: 8.33%; /*8.33% of the page*/
	}
	.col-m-2 {
		width: 16.66%; /*16.66% of the page*/
	}
	.col-m-3 {
		width: 25%; /*25% of the page*/
	}
	.col-m-4 {
		width: 33.33%; /*33.33% of the page*/
	}
	.col-m-5 {
		width: 41.66%; /*41.66% of the page*/
	}
	.col-m-6 {
		width: 50%; /*50% of the page*/
	}
	.col-m-7 {
		width: 58.33%; /*58.33% of the page*/
	}
	.col-m-8 {
		width: 66.66%; /*66.66% of the page*/
	}
	.col-m-9 {
		width: 75%; /*75% of the page*/
	}
	.col-m-10 {
		width: 83.33%; /*83.33% of the page*/
	}
	.col-m-11 {
		width: 91.66%; /*91.66% of the page*/
	}
	.col-m-12 {
		width: 100%; /*100% of the page*/
	}
/* nav li {
	margin-bottom: 1px;
	} */
}
/*for desktops*/
@media only screen and (min-width: 768px) { /*for screens over 768 pixels*/
	.col-1 {
		width: 8.33%; /*8.33% of the page*/
	}
	.col-2 {
		width: 16.66%; /*16.66% of the page*/
	}
	.col-3 {
		width: 25%; /*25% of the page*/
	}
	.col-4 {
		width: 33.33%; /*33.33% of the page*/
	}
	.col-5 {
		width: 41.66%; /*41.66% of the page*/
	}
	.col-6 {
		width: 50%; /*50% of the page*/
	}
	.col-7 {
		width: 58.33%; /*58.33% of the page*/
	}
	.col-8 {
		width: 66.66%; /*66.66% of the page*/
	}
	.col-9 {
		width: 75%; /*75% of the page*/
	}
	.col-10 {
		width: 83.33%; /*83.33% of the page*/
	}
	.col-11 {
		width: 91.66%; /*91.66% of the page*/
	}
	.col-12 {
		width: 100%; /*100% of the page*/
	}
nav li {
	margin-bottom: 0;
	}
	
}

/*for large desktops*/
@media only screen and (min-width: 1200px) { /*for screens over 1200 pixels*/
	.col-L-1 {
		width: 8.33%; /*8.33% of the page*/
	}
	.col-L-2 {
		width: 16.66%; /*16.66% of the page*/
	}
	.col-L-3 {
		width: 25%; /*25% of the page*/
	}
	.col-L-4 {
		width: 33.33%; /*33.33% of the page*/
	}
	.col-L-5 {
		width: 41.66%; /*41.66% of the page*/
	}
	.col-L-6 {
		width: 50%; /*50% of the page*/
	}
	.col-L-7 {
		width: 58.33%; /*58.33% of the page*/
	}
	.col-L-8 {
		width: 66.66%; /*66.66% of the page*/
	}
	.col-L-9 {
		width: 75%; /*75% of the page*/
	}
	.col-L-10 {
		width: 83.33%; /*83.33% of the page*/
	}
	.col-L-11 {
		width: 91.66%; /*91.66% of the page*/
	}
	.col-L-12 {
		width: 100%; /*100% of the page*/
	}
nav li {
	margin-bottom: 0;
	}

}

/*Rules for printers. Do not add any CSS below this rule.*/

@media print {
	nav, footer, aside, marquee {
		display: none;
	}
	.w3-content {
		display: none;
	}
	header {
		background-color: #fff;
		border-bottom: none;
	}
	header:after {
		display: block;
		content: "Thank you for printing our content at www.StonehengeUSA.com.";
		margin-bottom: 10px;
		padding: 3px 5px;
		font-style: italic;
		text-align: center;
	}
	@page {
		margin: 1cm;
	}
	body {
		font: 12pt Georgia, "Times New Roman", Times, serif;
		line-height: 1.3;
	}
	h1 {
		font-size: 24pt;
	}
	h2 {
		font-size: 14pt;
		margin-top: 25px;
	}
	li {
		list-style-image: none;
		list-style-type: "» "
	}
	
}

/*End printer rules. Do not add any CSS below this rule.*/