/* CSS Document */

	* {margin:0;padding:0;text-decoration:none;border:0;}
	* { -moz-box-sizing: border-box; margin: 0; padding: 0; }
	body,html { width: 100%; height: 100%; overflow: hidden; -webkit-font-smoothing: antialiased; font-size: 15px; font-family: "brandon-grotesque", "brandon grotesque", sans-serif; font-size: 16px; }
	.wrapper { position: relative; min-height: 100%; }
	.clear { clear: left; }

/* HEADER */
	header { color: #000; width: 100%; top: 0; margin: 0; padding: 8px 15px 6px; text-align: center; }
		header em { font-style: italic; }


/* SECTIONS */

	.wrapper { background-image: url(../images/essex-bar.jpg); background-attachment: fixed; background-size: cover; }
		h1 { position: absolute; top: 15%; left: 10%; right: 10%; }
		h1 img { width: 100%; height: auto; }

	#message {
		position: fixed; bottom: 0; max-height: 0; -webkit-transition: max-height 0.5s ease-in-out; -moz-transition: max-height 0.5s ease-in-out; transition: max-height 0.5s ease-in-out;
		background: #fff; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); z-index: 800;
		font-family: "brandon grotesque", "brandon-grotesque", futura, sans-serif; font-weight: 400; font-size: 1.1em; line-height: 1.25em; color: #847f71; width: 100%; }

	#message:target { max-height: 100%; }

		.container { padding: 25px 10% 15px; margin: 0 auto; }

		p.details { display: block; width: 100%; margin: 1% auto 0; text-align: center; color: #998b7d; font-size: 1.1em;
			line-height: 1.7em; font-weight: normal; }
			
			.line { border-top: 1px solid #998b7d; width: 30%; text-align: center; margin: 15px 35% 0; }
			
		p.closure { color: #000; text-transform: uppercase; font-size: 80%; font-weight: 700; text-align: center; letter-spacing: 0.05em; }

		p.credit { font-size: .75em; padding: 15px 0 0; text-align: center; font-style: italic; }
		
		em { font-style: italic;}

	.showmemore {
		opacity: 1; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
		width: 76px; height: 30px; background-image: url("../images/whales.jpg");
		position: absolute; top: -27px; left: 50%; margin-left: -38px; z-index: 999; text-align: center; padding: 4px; color: #000; border-radius: 3px;
		text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
		#message:target .showmemore { opacity: 0; }

	.showmemore a {
		color: #3c4f54; -webkit-transition: color 400ms ease-in-out; -moz-transition: color 400ms ease-in-out; -o-transition: color 400ms ease-in-out;
		-ms-transition: color 400ms ease-in-out; transition: color 400ms ease-in-out; }

	.showmemore a:hover { color: #CE733D; }


/* LINK STYLES */

a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }
a {  -webkit-transition: all 0.16s linear; -moz-transition: all 0.16s linear; -ms-transition: all 0.16s linear;
  -o-transition: all 0.16s linear; transition: all 0.16s linear; -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; text-decoration: none; color: #000; }

/* Responsive Details */

	@media only screen and (min-width: 100px) and (max-width: 530px) {
		#opening { height: 42%; }
		p.details { line-height: 1.3em; font-size: 1.1em; }
		.container { padding: 25px 5% 20px; }
	}

	@media (max-width: 400px) {
	    .photo { background-attachment: scroll; }


	}