/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}
a {
	outline:none !important;
}
#js #sitecover {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background-color:#fff;
	z-index:9999;
}
body {
    font-size: 1em;
    line-height: 1.4;
    /*background-image:url('../img/sitebg.jpg');*/
    -moz-backgound-size:cover;
    -ms-backgound-size:cover;
    -o-backgound-size:cover;
    -webkit-backgound-size:cover;
    backgound-size:cover;
    background-attachment: fixed;
    background-position:center;
}
.oldie body {
	font-size:16px;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   SITE WRAPPER
   ========================================================================== */
   
#site-wrapper {
	position:relative;
}
.oldie #site-wrapper {
	min-width:960px;
}
#site-wrapper {
	width:100%;
	position:relative;
	height:100%;
}
.touch #site-wrapper {
	overflow:scroll;
}
#inner-height {
	display:block;
	position:relative;
	width:100%;
}

/* ==========================================================================
   NAV BAR
   ========================================================================== */
#nav-container {
	position: fixed;
	background-color: black;
	width: 100%;
	z-index: 2000;
	top: 0;
	height: 3em;
}
#js #nav-container {
	margin-top:-3em;
	z-index:12000
}
@media only screen and (max-width: 45.75em) {
	#nav-container {
		height: 2.8125em;
	}
}
#nav-container a {
	float:right;
	height:1.8125em;
	width:1.8125em;
	margin:0.5625em 0.625em 0 0;
	font-size:1em;
	display:inline-block;
	opacity:1;
	-moz-transition:opacity 0.5s;
    -webkit-transition:opacity 0.5s;
    -o-transition:opacity 0.5s;
    transition:opacity 0.5s;
}
@media only screen and (max-width: 45.75em) {
	#nav-container a {
		height:1.6875em;
		width:1.6875em;
		margin:0.5625em 0.625em 0 0;
	}
}
.no-touch #nav-container a:hover {
	opacity:0.75;
	-moz-transition:opacity 0.5s;
    -webkit-transition:opacity 0.5s;
    -o-transition:opacity 0.5s;
    transition:opacity 0.5s;
}
#nav-container a img {
	height:100%;
	width:100%;
}	
body #more {
	height: 2.25em;
	color: #fff;
	background-color: #000;
	width: auto;
	position: absolute;
	bottom: 0;
	right: 0;
	display: block;
	text-decoration: none;
	padding: 0 0.8125em;
	line-height: 2.5em;
	font-size: 1em;
	padding-right:2em;
	
}
@media only screen and (max-width: 45.75em) {
	body #more {
		display:none;
	}
}
body #more img {
	position:absolute;
	top:1em;
	right:0.625em;
	height:0.4375em;
	width:0.875em;
}
#thankyou {
	display: none;
	position: absolute;
	width: 100%;
	bottom: 1.875em;
	left:0;
}
@media only screen and (max-width: 45.75em) {
	#thankyou span {
		display:none;		
	}
}
/* ==========================================================================
   SITE HEADER
   ========================================================================== */
   
   
#header {
	position: absolute;
	top: 0px;
	left: 0;
	padding: 0.5625em 0.625em 0.5625em;
	background-color: black;
	z-index: 3000;
	width: 13.9375em;
	height: 1.875em;
}
@media only screen and (max-width: 45.75em) {
	#header {
		width: 12.1875em;
		height: 1.6875em;
	}
}
h2,
h1 {
	position:relative;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	font-weight:normal;
}
#header h2 {
	padding:0 !important;
	text-indent:-9999px;
	background-image:url('../img/pomlogo.png');
}
@media only screen and (max-width: 45.75em) {
	#header h2 {
		background-image:url('../img/pomlogo-mobile.png');
	}
}
@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    #header h2 {
		background-image:url('../img/pomlogo-retina.png');
		-moz--webkit-background-size:100% 100%;
		-ms-webkit-background-size:100% 100%;
		-o-webkit-background-size:100% 100%;
		-webkit-background-size:100% 100%;
		background-size:100% 100%;
	}
}
@media 
only screen and (max-width: 45.75em) and (-webkit-min-device-pixel-ratio: 1.25), 
only screen and (max-width: 45.75em) and (min-resolution: 120dpi){ 
    #header h2 {
		background-image:url('../img/pomlogo-mobile-retina.png');
	}
}
h3 {
	font-size: 0.625em;
	font-family: 'AvenirNextLTW01-Medium';
	color: #333;
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 0.3em;
	font-weight:normal;
}


/* ==========================================================================
   CONTENT PANELS
   ========================================================================== */

.content {
	display:block;
	max-width:40em;
	position:relative;
	margin:0 auto;
	padding:2.25em 2.5em 2.8125em;
	background-color:#fff;
	background-color:rgba(255,255,255,0.9);
}
.oldie .content {
	background-color:#fff;
	width:40em;
	margin:0 auto;
}
#about .content {
	background-color:transparent;
}
@media only screen and (max-width: 45.75em) {
	.content {
		font-size:0.75em;
		padding:2.25em 1.25em 2.8125em;
	}
}
@media only screen and (max-width: 31.25em) {
	.content {
		margin:0 0.625rem;
	}
}
h2,
h1, 
h4,
#more {
	font-family: 'AvenirNextLTW01-Medium';
	font-size: 1.375em;
	line-height: 1.25em;
	color: #222;
	padding: 0 0 1.3125em 0;
	margin: 0 auto;
	text-align: center;
	text-transform: uppercase;
	max-width: 18em;
	font-weight:normal;
}
.content p,
input {
	font-family: 'GeorgiaProW02-Light';
	font-size: 1.125em;
	line-height: 1.5em;
	color: #555;
	padding: 0 0 1.5em 0;
	margin: 0em;
	text-align: center;
}
.content a {
	color: #555;
}
#about p {
	text-align:left;
}

input,
input:focus {
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	margin:0;
	padding:0.25em;
	border: 1px solid #999;
	margin: 0;
	padding: 0.25em 0.5em;
	height: 2.25em;
	text-align: left;
	display: inline-block;
	float: left;
	background-color:transparent;
	background-color:rgb(255,255,255,0);
	box-shadow:0 0 0.125em rgba(0,0,0,0);
	width:100%;
	color:#aaa;
	-webkit-appearance: none;
	outline:none;
	border-radius:0px;
	-moz-transition:background-color 0.5s, box-shadow 0.5s,color 0.5s;
    -webkit-transition:background-color 0.5s, box-shadow 0.5s,color 0.5s;
    -o-transition:background-color 0.5s, box-shadow 0.5s,color 0.5s;
    transition:background-color 0.5s, box-shadow 0.5s,color 0.5s;
}
input:focus {
	box-shadow:0 0 0.125em rgba(0,0,0,0.2);
	color:#555;
	-webkit-appearance: none;
	background-color:#fff;
	background-color:rgb(255,255,255,1);
	-moz-transition:background-color 0.5s, box-shadow 0.5s,color 0.5s;
    -webkit-transition:background-color 0.5s, box-shadow 0.5s,color 0.5s;
    -o-transition:background-color 0.5s, box-shadow 0.5s,color 0.5s;
    transition:background-color 0.5s, box-shadow 0.5s,color 0.5s;
}
form {
	position:relative;
	height:2.25em;
	display:block;
	max-width:20em;
	margin:0.625em auto 0;
}
#submit,
#submit:focus {
	background-color: #fff;
	color: #555;
	width: 4.5em;
	position: absolute;
	top: 0;
	right: 0;
	text-align: center;
	box-shadow:none;
}
#submit:focus,
.no-touch #submit:hover {
	color:#fff;
	background-color:#111;
}
.image-holder,
.image-holder img {
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
}
.image-holder img {
	display:none;
}
.divide {
	width:4.125em;
	height:0.375em;
	margin:0.625em auto 2.1825em;
	display:block;
}
.oldie .divide {
	height:1px;
	background-color:#aaa;
}
.divide div {
	width:0.375em;
	height:0.375em;
	margin:0 0.5em;
	background-color:#aaa;
	border-radius: 0.25em;
	float:left;
	display:inline-block;
}
.oldie .divide div {
	display:none;
}
/* ==========================================================================
   CONTENT PANELS
   ========================================================================== */
   
.slide {
	background-color:transparent;
	width:100%;
	height:100%;
	position:relative;
	box-shadow:0 0 0.5em rgba(0,0,0,0.5);
}



/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */
html, body {
	height:100%;
	width:100%;
}
#screen-size {
	height:100%;
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
}
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}