/*BC Benn CSS
Colors:
bisque = #FFE4C4
corn silk = #FFF8DC
gray = #666666
linen = #FAF0E6
powder blue = #B0E0E6
teal = #008080
alice blue = #F0F8FF

*/

* {box-sizing:border-box;}

body {	color:#008080;
		background-color:#FAF0E6;
		background-image: url(IMG_6999.JPG);
		background-repeat:no-repeat;
		background-size:100%;
		font-family:papyrus,verdana;
		}

#wrapper {	color: #000066;
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		min-width: 960px;
		max-width: 1200px;
		background-color:#FFE4C4;
		background-image:radial-gradient(#FFF8DC,#FFE4C4);
		box-shadow: 3px 3px 3px #666666;
		border-radius: 5px;
		padding-top:20px;
		} 
           

	
main {	color:#008080;
		background-color:#666666;
		font-family:papyrus,verdana;
		width:70%;
		height:auto;
		border: 1px 2px #B0E0E6;
		margin-left:auto;
		margin-right:auto;
		border-radius: 5px;
		box-shadow: 3px 3px 3px #666666;
		padding:25px;}
		
iframe {color: #000066;
		width: 90%;
		margin-left: 50px;		
		width: 1100px;
		height:1000px;
		background-color:#FFE4C4;
		background-image:radial-gradient(#FFF8DC,#FFE4C4);
		box-shadow: 3px 3px 3px #666666;
		border-radius: 5px;
		padding-top:20px;}

header h1 {	color: teal;
		text-shadow: 4px 3px 10px #B0E0E6;
		text-align: center;
		font-family: papyrus, verdana;
		font-size: 300%;		
		line-height:.3em;}
		
header h2 {	color: teal;
		text-shadow: 2px 1.5px 5px #B0E0E6;
		text-align: center;
		font-family: papyrus, verdana;
		font-size: 100%;		
		padding-bottom:5px;}
		
h1 {	color: teal;
	text-shadow: 2px 1.5px 5px #B0E0E6;
	text-align: center;
	font-family:"lucida handwriting", papyrus;
	font-size: 120%;		
	}
	
h2 {	color: teal;
	text-shadow: 2px 1.5px 5px #B0E0E6;
	text-align: center;
	font-family:"lucida handwriting", papyrus;
	font-size: 90%;		
	}
	
		
nav {color:#008080;
	font-family:"lucida handwriting", papyrus;
	font-size: 120%;
	font-weight: bold;
	width:auto;	
	background-image:linear-gradient(to top, #FFF8DC,#FFA07A);
	border-radius: 5pt;	
	text-shadow: .5pt .5pt .5pt #B0E0E6;
	margin:auto;
	border-bottom:1px solid #008080;
	padding-bottom:0.4em;
	padding-top:0.5em;
	line-height:.8em;
	
	}
	
nav ul  {	margin:auto;			
		padding:0;
		text-align:center;}	

				
nav ul li {	list-style-type:none;		
			
			display:inline;
			padding-left:25pt;}
			
nav ul li form {	display:inline;
			padding-left:0;
			}
		

a {	text-decoration:none;
	color: #008080;	}
	
nav a:link {color:#2F4F4F;}
nav a:visited {color:#696969;}
nav a:hover {color: #FFFAFA;}

table {	width:auto;
	margin:auto;
	height:auto;
	color: #000066;
	background-color:#FFE4C4;
	background-image:radial-gradient(#FFF8DC,#FFE4C4);
	box-shadow: 3px 3px 3px #666666;
	border-radius: 5px;
	padding-top:20px;}

tr td {	border:1px solid #191970;
		color:#2E8B57;
		text-align:center;
		text-shadow: 1px 1px 1px #191970;
		font-size:100%;		
		font-family:"lucida handwriting";
		background-image:linear-gradient(to top, #FFF8DC,#FFA07A);
		box-shadow: 2px 2px 2px #191970;
		border-radius:5px;
		width:80em;}
		
footer {	text-align:center;
		font-family: "lucida handwriting", papyrus;
		font-size: .8em;
		}
	 
footer a {	text-decoration:none;
		color: teal;}

footer nav {	text-align:center;
		font-family: "lucida handwriting", papyrus;
		font-weight:bold;
		text-decoration:none;
		color: teal;}	
	
img { border-radius: 5px;}


				
.galleryList {	list-style-type:none;
		display: inline-block;
		width: 512px;
		padding-bottom: 10px;
		margin: 15px;
		margin-left:20px;
		background-color:#F0F8FF;
		text-align: center;
		text-shadow: 1px 1px 1px #B0E0E6;
		color: teal;
		font-style: italic;
		font-family: "lucida handwriting", papyrus;}
		
.galleryListG {	list-style-type:none;
		display: inline-block;
		width: 342px;
		
		margin-bottom:10px;
		margin-left:20px;
		background-color:#F0F8FF;
		text-align: center;
		text-shadow: 1px 1px 1px #B0E0E6;
		color: teal;
		font-style: italic;
		font-family: "lucida handwriting", papyrus;}	


/*Responsive code*/

@media only screen and (max-width: 1024px){

	body {	margin:0;
		padding:0;}
	

	#wrapper {	width:auto;
			min-width:0;
			margin:0;}
			
	h1 {	margin:0;
		font-size:2em;
		line-height: 100%;}
	
	nav {	width:auto;}
	
		
	nav a {	padding:0;	
		font-size: 1em;
		line-height:0;}
	
	nav ul {text-align:center;
		padding:0;
		margin:auto;
		display:inline;}
		
	
		
			
	main {	font-size:50%;
		margin:auto;
		padding-left:5em;}
		
	table {	width:auto;
		margin:auto;
		height:auto;}

	tr td {	border:1px solid #191970;
		color:#2E8B57;
		text-align:center;
		text-shadow: 1px 1px 1px #191970;
		font-size:100%;		
		font-family:"lucida handwriting";
		box-shadow: 1px 1px 1px #191970;
		border-radius:5px;
		width:80em;}
	
	footer {margin:0;}
	
	.slideshow-container {  max-width: 650px;
 				position: relative;
  				margin: auto; }
  	

}

@media only screen and (max-width:768px){

	body {	max-width:768px;}
	
	header h1 {	font-size:1.5em;
			line-height: .8em;
			text-align:center;
			padding-bottom:10px;}
		
	header h2 {	font-size:.5em;
			line-height: .8em;
			text-align:center;}
	
	h1 {	font-size:.8em;
		line-height: .8em;
		text-align:center;}
		
	h2 {	font-size:.6em;
		line-height: .8em;
		text-align:center;}	
		
	nav {	width:auto;}
	
	nav a {	display:block;
		padding:.5em;
		width:auto;
		font-size:1em;
		border-bottom: 1px solid #008080;}
	
	nav li { display:block;
		padding-left:20em;
		padding-top:0;
		
		}
	nav ul li form {display:inline;
			padding-left:7em;}
		
	
	nav ul { text-align:center;}
		
	table {	width:auto;
		margin:auto;
		height:auto;}

	tr td {	border:1px solid #191970;
		color:#2E8B57;
		text-align:center;
		text-shadow: 1px 1px 1px #191970;
		font-size:100%;		
		font-family:"lucida handwriting";
		box-shadow: 1px 1px 1px #191970;
		border-radius:5px;
		width:80em;}
	
	main { 	width:95%;
		height:auto;
		font-size:25%;
		}
		
	iframe {color: #000066;
		
		margin-left: 25pt;		
		width: auto;
		height: auto;
		background-color:#FFE4C4;
		background-image:radial-gradient(#FFF8DC,#FFE4C4);
		box-shadow: 3px 3px 3px #666666;
		border-radius: 5px;
		padding-top:20px;}
			
	#mobile { display: inline;}
	
	#desktop {display:none;}
	
	#iphone {display:none;}
	
	

}

/* Slideshow container */
.slideshow-container {  max-width: 650px;
			position: relative;
 			margin: auto;
  			padding-right:.6em; }

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

/* Next & previous buttons */
.prev{	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 15px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	transition: 0.6s ease;
	border-radius: 0;
	color: #008080;
	text-shadow: 1px 1px 1px #191970;}

 .next {cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 15px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	transition: 0.6s ease;
	border-radius: 0;
	color: #008080;
	text-shadow: 1px 1px 1px #191970;
	margin-right:15px;}

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

/* 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: #008080;
  text-shadow: 1px 1px 1px #191970;
  font-size: 25px;
  padding: 5px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;}

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

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  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.0s;
  animation-name: fade;
  animation-duration: 1.0s;
}

@-webkit-keyframes fade {
  from {opacity: .4;
		left:0px;} 
  to {opacity: 1;
		left:0px;}
}

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