header, main, nav, footer, figure, figcaption, aside, section, article  { display: block; }

body, html	{height: 100%;
	  position: relative;
	  margin: 0px auto;
	  padding: 0pxauto;
	  padding-bottom: [footer-height];
	  background-color:  #4f6d53;
	  color:  #2E0000;
	  font-family: Verdana, Arial, sans-serif;
	  background-image: url(chalkboard1.jpeg); }

#wrapper	{height: auto;
	  min-height: 100%;
	  width: 80%;
	  position: relative;
	  padding-bottom: [footer-height];
	  margin-left: auto;
	  margin-right: auto;
	  background-color: #FFFFFF;
	  background-image: url(green-bamboo.jpg);
	  max-width: 2048px;
	  box-shadow: 3px 3px 3px #2E0000; }

header	{background-color:  #bbb;}

h1	{font-family: Georgia, "Times New Roman", serif;
	  height: 100px;
	  margin: 0;
	  background-image: url(bw_logo5.jpg);
	  background-position: center;
	  background-repeat: no-repeat; 
	  text-indent: -9999px; }
	  
h2	{font-family: Georgia, "Times New Roman", serif; 
	  text-align: center;
	  font-size: 1.5em;  }

h3	{font-family: Georgia, "Times New Roman", serif; 
	  text-align: center;
	  font-size: 1.0em;  }


h4	{font-family: Georgia, "Times New Roman", serif; 
	  text-align: left;
	  font-size: 1.5em;  
	  padding: 10px;
	  margin: 10px; }

h5	{font-family: Georgia, "Times New Roman", serif; 
	  align: bottom;
	  text-align: center;
	  font-size: 1.0em;
	  padding: 10px;
	  margin: 0;  }

nav ul	{list-style-type: none;
	  background-color: #bbb; 
	  background-image: url(fg.jpg);
	  text-align: center;
	  font-size: 1.5em;
	  font-weight: bold; 
	  border: 1px;
	  margin: 0; 
	  padding: 0;}

nav li	{display: inline;}

nav a	{display: inline-block; 
	  text-decoration: none;
	  padding-top: 5px;
	  padding-bottom: 5px; 
	  padding-left: 10px; 
	  padding-right: 10px;
	  transition: color 3s ease-out; }

nav a:link  {color: #4f6d53; }
nav a:visited  {color: #4f6d53; }
nav a:hover  {color: #6D4F69; }

main 	{display: block;
	  overflow: auto;
	  font-size: 90%;
	  padding-left: 10px;
	  padding-right: 10px;
	  padding-bottom: 50px;
	  margin-left: 30px;
	  margin-right: 30px; }

#back	  {display: block;
	    list-style-type: none;
	    text-align: center;
	    text-shadow:0px 1px 0px #ddd2d7;
	    width: 125px;
	    line-height: 30px;
	    font-size: 1.0em; 
	    font-weight: bold;
	    margin-left: auto; 
	    margin-right: auto;
	    margin-top: 20px;
	    margin-bottom: 20px;}

#back  a	   {display: block; 
	     border-radius: 15px;
	     border: 1.5px solid #74b178;
	     background-color:#74b178;
	     text-decoration: none; 
	     text-align: center; 
	     padding-left: 10px; 
	     padding-right: 10px;
	     transition: color 3s ease-out; 
	     box-shadow: 0px 2px 1px #ecffed inset, 0px -2px 8px #ecffed, 
	     0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1); 
	     -webkit-transition:box-shadow 0.5s;}



#back a:link  {color: #714659; 
	      box-shadow: 0px 2px 1px #ecffed inset, 0px -2px 8px #ecffed, 
	      0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);}

#back a:visited  {color: #714659; }

#back a:hover  {color: #714659; 
	          box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5) inset, 0px -2px 20px white, 0px 1px 5px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
	          background:-webkit-linear-gradient(top, #5f9063 0%,#78b37d 100%);}


#buttons li  {display: inline-block;
	    list-style-type: none;
	    text-align: center;
	    text-shadow:0px 1px 0px #ddd2d7;
	    width: 175px;
	    line-height: 40px;
	    font-size: 1.0em; 
	    font-weight: bold;
	    margin-left: 5px; 
	    margin-right: 5px;
	    margin-top: 15px;
	    margin-bottom: 15px;}

#buttons li a {display: block; 
	     border-radius: 15px;
	     border: 1.5px solid #bbb;
	     background-color:#bbb;
	     text-decoration: none; 
	     text-align: center; 
	     padding-left: 10px; 
	     padding-right: 10px;
	     transition: color 3s ease-out; 
	     box-shadow: 0px 2px 1px #ecffed inset, 0px -2px 8px #ecffed, 
	     0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1); 
	     -webkit-transition:box-shadow 0.5s;}

#buttons a:link  {color: #4f6d53;
	           box-shadow: 0px 2px 1px #ecffed inset, 0px -2px 8px #ecffed, 
	           0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);}

#buttons a:visited  {color: #4f6d53; }

#buttons a:hover  {color: #714659;
	           box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5) inset, 0px -2px 20px white, 0px 1px 5px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
	           background:-webkit-linear-gradient(top, #a1a1a1 0%,#bbb 100%);}

#designs ul  {list-style-type: none;
	    text-align: center;
	    font-size: .5em; 
	    margin: 0; 
	    padding-top: 0;
	    padding-bottom: 10%; }

#designs li	{display: inline-block; 
	  text-align: center; 
	  font-size:.5em;
	  padding: 10px;}

#designs a	{display: block;
	  text-decoration: none; 
	  padding-left: 10px; 
	  padding-right: 10px;
	  transition: color 3s ease-out;}

#designs a:link  {color: #411f3f; }
#designs a:visited  {color: #714659; }
#designs a:hover  {color: #8b6c89; }

p	{display: block;
	  text-align: left;
	  font-size: 1.1em; 
	  margin:0; 
	  padding-top: 0;
	  padding-bottom: 5%; 
	  padding-left: 5%;
	  padding-right: 5%; }

.center	{display: block;
    	  margin-left: auto;
   	  margin-right: auto;
   	  width: 50%; }

ul	{list-style-type: none;
	  text-align: center;
	  font-size: 1.1em; 
	  margin-left: 0; 
	  padding: 5px;}

contact ul	{list-style-type: none;
	  display: block;
	  text-align: left;
	  font-size: 1.1em; 
	  margin-left: 33%; 
	  padding: 5px;}

contact a:link  {color: #4f6d53; }
contact a:visited  {color: #4f6d53; }
contact a:hover  {color: #6D4F69; }


table, th, td {font-size: 1.1em;
	    background-color: #FFFFFF; }

table	{border-collapse: collapse;
	  border: 2px solid #4f6d53;
	  box-shadow: 0 0 20px rgba(0,0,0,0.4);
	  margin-top: 30px;
	  margin-bottom: 50px; }

th, td 	{border: 1px solid black;
	  padding: 15px;
	  text-align: left; 
}

th 	{text-align: left;}

.dropbtn {	background-color: #78b37d;
	color: #714659;
	width: 200px;
	padding: 5px;
	font-size: 18px;
	border: 1px solid black;
	margin-left: auto;
	margin-right: auto; }

.dropdown {position: relative;
	   display: inline-block;
	   list-style-type: none;
	   text-align: center;
	   margin-left: 39%; 
	   margin-right: 39%;
	   padding-bottom: 100px; }

.dropdown-content { display: none;
		position: absolute;
		margin-left: auto;
		margin-right: auto;
		background-color: #f9f9f9;
	   	max-height: 200px;
	   	height: 160px;
		width: 200px;
	  	overflow-x: hidden;
	  	overflow-y: auto;
		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; }

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

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

.dropdown:hover .dropbtn {background-color: #5f9063;
		           color: #F5F5DC; }

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  width: 500px;
  max-height: 300px;
  position: relative;
  margin: 0 auto;
  text-align: center;
  background-color: #FFFFFF;
  box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}


/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color:  #f2f2f2;
  font-weight: bold;
  font-size: 18px;
  transition: 1s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Position the "prev button" to the left */
.prev {
  left: 0;
  border-radius: 0px 3 3 0px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 15px;
  width: 15px;
  margin: 1px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

#BGlink img      {display: inline-block;
	           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
#products	{float: left;
	  overflow: auto; }

/* Next & previous buttons */
.prv, .nxt {
  	cursor: pointer;
  	position: absolute;
 	top: 88%;
 	width: 100px;
  	margin-top: -22px;
	text-align: center;
	text-shadow:0px 1px 0px #ddd2d7;
	width: 125px;
	line-height: 30px;
	font-size: 1.0em; 
	font-weight: bold;
	border-radius: 5px;
	border: 1.5px solid #bbb;
	background-color:#bbb;
	text-decoration: none; 
	text-align: center; 
	padding-left: 10px; 
	padding-right: 10px;
	transition: color 3s ease-out; 
	box-shadow: 0px 2px 1px #ecffed inset, 0px -2px 8px #ecffed, 
	0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1); 
	-webkit-transition:box-shadow 0.5s;}

/* Position the "next button" to the right */
.nxt {right: 10px;
         color: #4f6d53;
         box-shadow: 0px 2px 1px #ecffed inset, 0px -2px 8px #ecffed, 
         0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);}

/* Position the "prev button" to the left */
.prv {left: 10px;
         color: #4f6d53;
         box-shadow: 0px 2px 1px #ecffed inset, 0px -2px 8px #ecffed, 
         0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);}

/* On hover, add a black background color with a little bit see-through */
.prv:hover, .nxt:hover {color: #714659;
		  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5) inset, 0px -2px 20px white, 0px 1px 5px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
		  background:-webkit-linear-gradient(top, #a1a1a1 0%,#bbb 100%);}

.fb-container  {display: block;
	       position: relative;
	       margin: 0 auto;
	       text-align: center;
	       padding-top: 30px;
	       padding-bottom: 20px; }

.fb-like a	{position: absolute;
	  left: 50%;
	  margin-right: -50%; 
	  transform: translate(-50%, -50%); }



footer	{position: absolute;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color:  #5a7247;
	  background-image: url(fg.jpg);
	  color:  #4f6d53;
	  text-align: center;
	  font-style: italic;
	  font-size: .60em;
	  padding: 10px; }

footer a:link  {color: #000000; }
footer a:visited  {color: #000000; }
footer a:hover  {color: #000000; }


@media only screen and (max-width: 64em)  {
	#wrapper	{width: auto;
		  max-width: 64em;}

	h1	{font-family: Georgia, "Times New Roman", serif;
		  max-width: 64em;
		  height: 100px;
		  margin: auto;
		  background-image: url(bw_logo10.jpg);
		  background-position: center;
		  background-repeat: no-repeat; 
		  text-indent: -9999px; }

	#BGlink	{max-width: 100%;
		  height: auto;
		  margin-left: auto;
	  	  margin-right: auto;
		  padding-bottom: 10px;}

	.slideshow-container {
		  max-width: 100%;
		  height: auto; }

	table, th, td {font-size: .6em;
	    	   background-color: #FFFFFF; }

	table	{width: 100%;
		  border-collapse: collapse;
		  border: 2px solid #4f6d53;
		  box-shadow: 0 0 20px rgba(0,0,0,0.4); }

	th, td 	{border: 1px solid black;
		  padding: 5px;
		  text-align: left; }

	th 	{height: auto;
		  text-align: left;}

	contact ul	{margin-left: auto;
		  margin-right: auto; }


}

@media only screen and (max-width: 37.5em)  {
	#wrapper	{width: auto;
		  max-width: 37.5em;}

	h1	{font-family: Georgia, "Times New Roman", serif;
		  max-width: 37.5em;
		  height: 100px;
		  margin: auto;
		  background-image: url(bw_logo15.jpg);
		  background-position: center;
		  background-repeat: no-repeat; 
		  text-indent: -9999px; }

	nav ul	{list-style-type: none;
		  background-color: #8FBC8F; 
		  text-align: center;
		  font-size: 1.5em; 
		  border: 1.5px solid #4f6d53;
		  margin: 0; 
		  padding: 0;}

	nav li	{display: inline;}

	nav a	{display: block; 
		  text-decoration: none;
		  border: 1px solid #4f6d53; 
		  font-weight: bold;
		  padding-left: 10px; 
		  padding-right: 10px;
		  transition: color 3s ease-out; }

	nav a:link  {color: #4f6d53; }
	nav a:visited  {color: #4f6d53; }
	nav a:hover  {color: #6D4F69; }


main 	{display: block;
	  overflow: auto;
	  font-size: 90%;
	  padding-left: 5px;
	  padding-right: 5px;
	  padding-bottom: 100px;
	  margin-left: 20px;
	  margin-right: 20px; }

	.slideshow-container {
		  max-width: 100%;
		  height: auto; }

	#BGlink	{max-width: 100%;
		  height: auto;
		  margin-left: auto;
	  	  margin-right: auto;}

	p	{display: block;
		  text-align: left;
		  font-size: 1em; 
		  margin: 0; }

	#products	{display: block;
		  float: none;
		  text-align: center;
		  margin-left: auto;
		  margin-right: auto;}
		

	.prv, .nxt {
		cursor: pointer;
		position: absolute;
		top: 93%;
		margin-top: -22px;
		text-align: center;
		text-shadow:0px 1px 0px #ddd2d7;
		width: 90px;
		line-height: 30px;
		font-size: .75em; 
		font-weight: bold;
		border-radius: 5px;
		border: 1.5px solid #bbb;
		background-color:#bbb;
		text-decoration: none; 
		text-align: center; 
		padding-left: 10px; 
		padding-right: 10px;
		transition: color 3s ease-out; 
		box-shadow: 0px 2px 1px #ecffed inset, 0px -2px 8px #ecffed, 
		0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1); 
		-webkit-transition:box-shadow 0.5s;}

	table, th, td {font-size: .6em;
	    	   background-color: #FFFFFF; }

	table	{width: 100%;
		  border-collapse: collapse;
		  border: 2px solid #4f6d53;
		  box-shadow: 0 0 20px rgba(0,0,0,0.4); }

	th, td 	{border: 1px solid black;
		  padding: 5px;
		  text-align: left; }

	th 	{height: auto;
		  text-align: left;}

	contact ul	{margin-left: auto;
		  margin-right: auto; 
		  font-size: .8em; }

}