@font-face {
			font-family: screamingclaws;
			src: url(sc.ttf);
		}
		html, body{ height:100%; width:auto; border: 0; }
		body{
			margin: 0 auto;
			padding:0;
			background: url(images/background2.gif) no-repeat;
			background-attachment: fixed;
			background-size: cover;
			color:#777;
			font-family: sans-serif; 
			
		}
		@media only screen and (min-width: 800px) {
			section { min-height: 100vh;}
		}
		section { 
			min-height: 500px; 
			margin-bottom: 100px; 
			padding-bottom: 100px;
			-webkit-box-shadow: 0 0 50px 75px #FFFFFF;
			box-shadow: 0 0 100px 25px #FFFFFF;
 		}
 		section#top { 
			min-height: 500px; 
			margin-bottom: 100px; 
			padding-bottom: 100px;
			-webkit-box-shadow:none; 
			box-shadow:none;
			
 		}

 		#esb { max-width:100%; height: auto;}
 		.scale-with-grid {max-width: 100%; height:auto;}

 		.one-third { max-width: 20%; float: right;}
 		.two-thirds { max-width: 60%; float: left;}
		section:nth-child(5) { margin-bottom: 0;}
		
		p { font-size: 22px; padding:0 100px; text-align: justify; line-height: 26px;}
		p.lead { font-size: 26px; font-family:'screamingclaws', sans-serif ; padding:0 100px; text-align: justify; color: #aaa; line-height: 30px;}
		h1 { font-size: 46px; font-family: 'screamingclaws', sans-serif; color:#000;}
		h2 { font-size: 38px; font-family: 'screamingclaws', sans-serif; color:#ddd;}
		h3 { font-size: 30px; padding:0 100px; text-align: left; font-family: 'screamingclaws', sans-serif; font-style: italic; color:#ddd;}
		h4 { font-size: 26px; font-family: 'screamingclaws', sans-serif; color: #ddd;}
		
		ul { padding:0 100px;list-style-type: none; cursor: default; font-size: 1.5em; font-style: bold; text-align: justify;}
		li {border: solid #ebebeb 2px; border-collapse: collapse; margin: 5px; padding-left: 175px; transition: background .5s; text-indent: -175px;}
		li:hover { background:rgba(222,222,222,0.5);}
		li:hover span {color:#333;}
		li span {font-weight: bolder; letter-spacing: -1px; color: #aaa; transition: color .5s; min-width: 175px;}
		a {color: #000; font-weight: bold;}
		a:hover { color:#b30086; }

		#top {
			height:100%;
			z-index:1;

		}

		#left {
			padding-left: 100px;
			text-align: left;
		}

		img.title { 
			position:relative;
			top:50%;
			left:50%;
			margin-top:-100px;
			margin-left: -250px;

		}	
		.light {
			z-index: 2;
			padding:100px 55px;
			background: rgba(219, 255, 179, 1);
			text-align: center;
		}
		.events {
		
			z-index: 2;
			padding: 10px 30px;
			background: rgba(219, 255, 179, 1);
			text-align: center;

		}

		.events p,.sounds p {text-align: center;}

		

		#logo {
			background: url('images/sc_logo.png') no-repeat fixed;
			background-position: center;
			max-width:100%;
			height:100%; 
			z-index: 999;
		}

		@media only screen and (max-width:65em) { 
			body{ margin-top: 10em; background-attachment: scroll; background-repeat:repeat-y; }
			#logo { display: none;}
			section#top {
				display: none;
			}
			#email {font-size: 18px;}
			p { padding: 0 20px; text-align: justify;}
			p.lead { padding: 0 20px; text-align: justify;}
			#left {
				padding-left: 0;
				text-align: justify;
			}
}