@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body 
	{ 
	font-family: 'Open Sans', sans-serif;
	font-size: .9em;
	color: #666;
	margin:0;
	padding:0;
	background-image: url('../img/bg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    }

* {
  box-sizing: border-box;
}
        
#pagewrap 
	{
	padding: 1em;
	width: 90%;
	margin: 2% auto;
	position:relative;
	top:40px;
	border: solid 1px #ccc;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8), 0 6px 10px 0 rgba(0, 0, 0, 0.8);
	}
	
header 
	{
	height: 110px;
	margin-left:24px;
	}

.subhead
	{
	position:relative;
	top:-30px;
	font-size:140%;
	color:#333;
	}
	
h1 
	{
	font-size:350%;
	font-weight:800;
	color:#000;
	}
	
#content 
	{
	width: 55%;
	padding: 1% 2%;
	float: left;
	line-height:1.7em;
	border:1px solid #333;
	border-radius: 15px 50px 30px;
	background: #f8f8f8;
	text-align:left;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 4s;	
	}
	
#mid-mid 
	{
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 4s;	
	}
	
video
	{
	width:100%; !important;
	border:2px solid black;
	border-radius: 15px 50px 30px 15px;
	}
	
#content-wide 
	{
	width: 90%;
	padding: 2% 4%;
	float: left;
	line-height:1.7em;
	border:1px solid #333;
	border-radius: 15px 50px 30px;
	background: #f8f8f8;
	text-align:left;
	}
	
#middle 
	{
	width: 41%;
	padding: 1% 2%;
	position: absolute; 
	bottom: 90px;
	right: 10px;
	margin: 0px 5px 5px 5px;
	border:1px solid #ccc;
	line-height:1.7em;
	color:#fff;
	background-color:rgba(0, 0, 0, 0.55);
	border-radius: 15px 50px 30px;
	text-align:left;
	}

footer 
	{
	clear: both;
	padding: 15px 15px;
	margin-top:0;
	font-size:90%;
	color:#cccccc;
	}

#tri
	{
	margin-left:-8px;
	margin-top:8px;
	}

img
	{
	image-orientation: from-image;
	float:left;
	margin:1px 15px 15px 0;
	padding: 5px 5px 5px 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 8px 0 rgba(0, 0, 0, 0.6);
	}

img.pics
	{
	width:95%;
	image-orientation: from-image;
	float:left;
	margin:1px 15px 15px 0;
	padding: 5px 5px 5px 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 8px 0 rgba(0, 0, 0, 0.6);
	}
		
img.right
	{
	float:right;
	margin:1px 0 15px 15px;
	padding: 5px 5px 5px 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 8px 0 rgba(0, 0, 0, 0.6);
	}
	
.poem
	{
	float:right;
	width:190px; 
	margin:1px 0 15px 15px;
	background-color: #444;
	color:#fff;
	border:1px solid #990000;
	padding:1.2em 0 1.2em 1.2em;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 8px 0 rgba(0, 0, 0, 0.6);
	}
	
.cap
	{
	font-size: 24px;
	text-shadow:2px 5px 12px black;
	}
	
h2
	{
	text-shadow:5px 5px 10px black;
	}

i 
	{
	font-weight:600;
	}
a 
	{ 
	color: #093; 
	text-decoration:none; 
	}

p 
	{ 
	text-align: left; 
	}

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
  opacity: 0.5;
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

.modal-content {
display: block;
float: none;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  max-width: 700px;
}

.rasp{
display: none;
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
  #myImg {
  border-radius: 1px;
  cursor: pointer;
  transition: 0.3s;
}
}
.reviews 
	{
    border-radius: 15px 50px 30px;
    background: #eeeedd;
    border:1px solid #cccc99;
    padding: 15px; 
    width: 88%; 
    font-size:80%;
    line-height:1.6em;
    margin: 0 0 10px 0;
    white-space: normal;
    border-left: 10px solid #663;
    border-right: 10px solid #663;
	}

.reviews:before 
	{
	font-family: Arial;
	color: #999;
	content: open-quote;
	font-size: 3em;
	margin: 0 0.25em 0 0;
	vertical-align: -0.17em;
	}

.reviews:after 
	{
	font-family: Arial;
	color: #999;
	content: close-quote;
	font-size: 3em;
	margin: 0 0 0 0.25em;
	vertical-align: -0.5em;
	}

.toggle, [id^=drop] 
 	{
 	display: none;
	}
	
hr 
	{
	border: 0;
	border-bottom: solid 1px rgba(160, 160, 160, 0.3);
	margin: 1.5em 0;
	}
	
nav 
	{
	margin: 0;
	padding: 0;
	position:fixed;
	top:0;
	z-index:20;
	width:100%;
	}

#logo 
	{
	display: block;
	padding: 0 30px;
	float: left;
	font-size: 20px;
	line-height: 60px;
	}

nav:after 
	{
	content: "";
	display: table;
	clear: both;
	}

nav ul 
	{
	float: left;
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
	z-index:20;
	width:100%;
	}

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color:rgba(0, 0, 0, 0.30);
}

nav a 
	{
	display: block;
	padding: 0 20px;
	color: #FFF;
	font-size: 20px;
	line-height: 40px;
	text-decoration: none;
	font-size:80%;
	z-index:20;
	}

nav ul li ul li:hover 
	{ 
	background: #000000; 
	}

nav a:hover 
	{ 
	background-color: #000000; 
	}

nav ul ul 
	{
	display: none;
	position: absolute;
	top: 40px;
	white-space: nowrap;
	min-width:125px;
	width:auto;
	}

nav ul li:hover > ul 
	{ 
	display: inherit; 
	}

nav ul ul li 
	{
	width: auto;
	float: none;
	display: list-item;
	position: relative;
	}

nav ul ul ul li 
	{
	position: relative;
	top: -40px;
	left: 140px;
	}

li > a:after 
	{ 
	content: ' +'; 
	}

li > a:only-child:after
	{ 
	content: ''; 
	}


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 950px) 
	{

	#logo 
		{
		display: block;
		padding: 0;
		float: none;
		}

	nav 
		{ 
		margin: 0; 
		width:100%;
		}

	.toggle + a, .menu 
		{ 
		display: none; 
		}

	.toggle 
		{
		display: block;
		background-color:rgba(0, 0, 0, 0.25);
		padding: 0 20px;
		color: #FFF;
		font-size:80%;
		line-height: 40px;
		text-decoration: none;
		border: none;
		}

	.toggle:hover 
		{ 
		background-color: #000000; 
		}

	[id^=drop]:checked + ul 
		{ 
		display: block; 
		}

	nav ul li 
		{
		display: block;
		width: 100%;
		background-color:rgba(0, 0, 0, 0.5);
		}

	nav ul ul .toggle, nav ul ul a 
		{ 
		padding: 0 40px; 
		}

	nav ul ul ul a 
		{ 
		padding: 0 80px; 
		}

	nav a:hover, nav ul ul ul a 
		{ 
		background-color:rgba(0, 0, 0, 0.8); 
		}

	nav ul ul 
		{
		float: none;
		position: static;
		color: #ffffff;
		width:100%;
		}

	nav ul ul li:hover > ul, nav ul li:hover > ul 
		{ 
		display: none; 
		}

	nav ul ul li 
		{
		display: block;
		width: 100%;
		}

	nav ul ul ul li 
		{
		position: static;
		}

	#pagewrap 
		{
		width: 88%;
		}
	
	#content 
		{
		text-align:left;
		width: auto;
		float: none;
		border-bottom:1px solid #ccc;
		margin-bottom:20px;
		padding: 5px 15px;
		}
	
	#middle 
		{
		width: auto;
		float: none;
		float: none;
		margin: 0px;
		border-right:1px solid #fff;
		border-left:1px solid #fff;		
		border-bottom:1px solid #ccc;	
		position:static !important;
		text-align:left;
		padding: 5px 15px;
		}

}

@media all and (max-width : 480px) 
	{

	nav ul li 
		{
		display: block;
		width: 60%;
		}

	header 
		{
		height: 60px;
		margin-left:14px;
		margin-top:-20px;
		}

	.subhead
		{
		position:relative;
		top:-14px;
		font-size:100%;
		color:#333;
		}
	h1 
		{
		font-size:160%;
		font-weight:800;
		color:#000;
		}
		
	.reviews 
		{
		width: 85%; 
		}
}

@media all and (max-width : 320px) 
	{
	#pagewrap 
		{
		padding: 0.5em;
		width: 98%;
		}
	
	img 
		{
		image-orientation: from-image;
		margin:1px 17px 15px 15px;
		}

	img.pics 
		{
		width:95%;
		image-orientation: from-image;
		margin:1px 17px 15px 15px;
		}
			
	.subhead
		{
		position:relative;
		top:-14px;
		font-size:90%;
		color:#333;
		}	
		
	.reviews 
		{
		width: 85%; 
		}
		
}