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

body {
	background-color: #fff; /*default to 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*/
	z-index: 1;
}

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

* {
	box-sizing: border-box;
}

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

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

a {
	color: #060;
	font-weight: bold;
}
a:hover {
	color: #390;
}

header {
	background-color: rgba(255, 255, 255, 0.85); 
	color: #ffffff;
	padding: 15px;
	border-bottom: 10px solid #060; /*10 px high, solid, dark-green bottom border*/ /*#a2906a;*/
}

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

nav	{
	border: 0;
	margin: 0;
	padding: 0;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

nav li {
  float: left;
}

nav li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a.active {
  background-color: #04AA6D;
}

/* Change the link color to #000(black) on hover */
nav li a:hover {
  background-color: #000;
}


nav li a:hover, .dropdown:hover .dropbtn {
  background-color: #000;
}

nav li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #ccc;}

.dropdown:hover .dropdown-content {
  display: block;
}

/*end formatting for active links*/

aside {
	background-color: rgba(51, 51, 51, 0.85); /*beige background*/
	padding: 15px;
	color: #fff;
	text-align: center;
	font-size: 14px;
}

aside a  {
	color: #00cc00; /*light green*/
}

aside a:hover {
	color: #999;
}

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

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

footer a:hover {
	color: #333;
}

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

marquee {
	behavior: scroll;
	direction: left;
	background-color: #006600;
	color: #eee;
	font-weight: bold;
	padding: 8px 0 8px 0;
}

.red {
	color: #c00;
}

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

.transorange {
			background-color: rgba(255,102,0,0.4);
}
	
/*any class with col-*/
[class*="col-"] {
	float: left; /*float to the left*/
	width: 100%; /*fill the element*/
}
/*for smartphones*/
@media only screen and (max-width: 599px) { /*for screens under 599 pixels*/
	.col-s-0 {
		display: none; /*disappear*/
	}
	.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 for smartphone screens*/
/* -------
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: inline;
}
nav li {
	padding: 8px;
	margin-bottom: 7px;
	background-color: #006600;
	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: #696;
	color: #fff;
}

nav a {
	color: #000;
	text-decoration: none;
	display: inline;
	padding: 8px;
	background-color: #cc9;
}

nav li a.active {
	background-color: #006600;
	color: #fff;
	padding: 8px;
	display: inline;
}
nav li a:hover:not(.active) {
	background-color: #666;
	color: #fff;
	padding: 8px;
	
	-------- */
/* end nav for smartphone screens */
}
/* nav li {
	margin-bottom: 1px;
	} */

}
/*for tablets*/
@media only screen and (min-width: 600px) { /*for screens over 600 pixels*/
	.col-m-0 {
		display: none; /*disappear*/
	}
	.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-0 {
		display: none; /*disappear*/
	}
	.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.*/