@font-face {
    font-family: 'bebasregular';
    src: url('../bebas___-webfont.eot');
    src: url('../bebas___-webfont.eot?#iefix') format('embedded-opentype'),
         url('../bebas___-webfont.woff') format('woff'),
         url('../bebas___-webfont.ttf') format('truetype'),
         url('../bebas___-webfont.svg#bebasregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'charis_silregular';
    src: url('../charissilr-webfont.eot');
    src: url('../charissilr-webfont.eot?#iefix') format('embedded-opentype'),
         url('../charissilr-webfont.woff') format('woff'),
         url('../charissilr-webfont.ttf') format('truetype'),
         url('../charissilr-webfont.svg#charis_silregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'znikomitregular';
    src: url('../znikomit-webfont.eot');
    src: url('../znikomit-webfont.eot?#iefix') format('embedded-opentype'),
         url('../znikomit-webfont.woff') format('woff'),
         url('../znikomit-webfont.ttf') format('truetype'),
         url('../znikomit-webfont.svg#znikomitregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/** MEDIA QUERIES **/
@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}
@media screen,
	(-o-min-device-pixel-ratio: 5/4),
	(-webkit-min-device-pixel-ratio: 1.25),
	(min-resolution: 120dpi) {
	.home-link{
		background: url(../images/logo-2x.png) no-repeat;
		background-size: 270px 182px;
		
	}	
}
@media screen and (min-width: 20em){/*320px*/
	body{
		margin-left: 0;
		margin-top: 0;
		font-size: 90%;
		width:100%;
		-webkit-font-smoothing: antialiased !important;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	}
	div[role=container] {
		float: left;
		width:100%;
		background: url(../images/planks-small.png) top left;
		background-size: 354px 621px;
		background-position: 5px 0;
	}
	header[role=pageHeader] {
		width: 100%;
	}
	div[role="mainContent"]{
		width: 100%;
		margin-left: 0px;
		margin-right: 0px;
	}
	div[role=topPage] {
		height: auto;
	}
	header[role=pageHeader] {
		padding-top: 30px;

	}
	a[aria-label=home-link]{
		background: url(../images/logo-2x.png) no-repeat;
		background-size: 182px 125px;
		display: block;
		width: 182px;
		height: 125px;
		margin-left: 6.25%;
		margin-top:0;
	}
	header[role=pageHeader] > blockquote{
		font: normal 1.25em 'charis_silregular';/*20px*/
		/*font: normal 1.375em;/*22px*/
		line-height: 1.9;/*40px*/
		color: #ffffff;
		margin: 35px 0 0 0;
		padding-left: 6.25%;
		padding-right:6.25%;
	}	
	header[role=pageHeader] > blockquote:before{
		content:'“';
	}	
	header[role=pageHeader] > blockquote:after{
		content:'”';
	}
	nav[role=mainNavigation]{
		position: fixed;
		top:0;
		left:0;
		z-index: 2;
		width: 100%;
		margin-left: 0px;
		padding-left: 0px;
	}
	nav[role=mainNavigation] ul{
		padding-left: 0;
		list-style: none;
		margin:0;
		display: none;
		background-color: rgba(255,255,255,0.85);
		position:relative;
	}
	nav[role=mainNavigation] ul li{
		
	}
	nav[role=mainNavigation] ul li a {
		font: bold 1.1875em 'bebasregular';/*19px*/
		text-decoration: none;
		color: #000000;
		padding: 8px;
		font-weight: normal;
		display: block;
	}
	nav[role=mainNavigation] ul li a.active,
	nav[role=mainNavigation] ul li a:hover {
		color: #ffffff;
		background-color: #cc0000;
	}
	nav.toggled-on ul{
		display: block;
	}
	nav.toggled-on ul:before,
	nav.toggled-on ul:after{
		content: "";
		width:400px;
		top:0;
		bottom:0;
		position:absolute;
		background-color: rgba(255,255,255,0.75);
	}
	nav.toggled-on ul:before{
		left:100%;
	}
	nav.toggled-on ul:after{
		right:100%;
	}
	div[role=mainContent] nav[role=subNavigation] ul{
		padding-left:6.25%;
	}
	h3[role=menu-toggle]{
		cursor: pointer;
		display:block;
		font: normal 1.1875em 'bebasregular';/*17px*/
		color:#2c2317;
		margin: 0px 0 0 110px;
		background-color: rgba(255,255,255,0.75);
		padding: 6px;
		float:right;
	}
	h3[role=menu-toggle]:after{
		content: "\25BC";
		font-size: 10px;
		position: relative;
		margin-left: 2px;
		top: -2px;
	}
	.toggled-on h3[role=menu-toggle]:after{
		content: "\25B2";
	}
	div[role=mainContent] nav[role=subNavigation] ul{
		list-style: none;
	}
	div[role=mainContent] nav[role=subNavigation] ul li a{
		color: #ffffff;
		font: normal 1.25em 'bebasregular';/*20px*/
		display: block;
		line-height: 1.5;/*30px*/
		text-decoration: none;
	}
	div[role=mainContent] nav[role=subNavigation] ul li a:hover,
	div[role=mainContent] nav[role=subNavigation] ul li a.subActive {
		color: #c0171d;
	}
	div[role=mainContent] nav[role=subNavigation]{
		float: none;
	}
	div[role=mainContent] h1{
		margin: 35px 0 15px 0;
		padding-left: 6.25%;
		font: normal 2.875em 'bebasregular';/*49px*/
		color: #ffffff;
	}
	div[role=mainContent] h1 span{
		display: block;
		font: 0.489em 'bebasregular';/*24px*/
		color: #ffffff;
	}
	article {
		width: 100%;
	}
	article p {
		font-size: 1.1875em;/*19px*/
		line-height: 1.4118;/*24px*/
	}
	article h2 {
		color: #cc0000;
		font-family: 'charis_silregular';
		margin-bottom: 0;
	}
	article h2 + p {
		margin-top:0;
	}
	article > div{
		background: none;
		background-color: rgba(255,255,255,0.85);
		padding: 5px 6.25% 25px 6.25%;
	}
	article div blockquote{
		font-size: 1.625em;/*26px*/
		font-weight: 200;
		line-height: 1.0625;
		color:#000;
		margin-left: 0;
	}
	article div blockquote b {
		color: #cc0000; 
		font-family: 'bebasregular';
		font-weight: normal;
	}
	/**GALLERY**/
	div[role=gallery] figure {
		margin:0 0 20px 0;
	}
	div[role=gallery] figure img{
		margin: 0;
		width:100%;
		box-shadow: none;
	}
	div[role=gallery] figcaption{
		padding: 3px 15px 12px 15px;
		margin-top: -4px;
		background-color: #ffffff;
	}
	div[role=gallery] figcaption h3{
		margin:0;
		color: #bd0000;
		font: 1.25em 'charis_silregular';/*20px*/
	}
	footer[role=pageFooter] {
		height: auto;
		width: 100%;
		margin-left:0;
		margin-top: 100px;
		background: url(../images/footer.png) no-repeat bottom left;
		background-position: -89px 67px;
		background-size: 1083px 154px;
		background-color: #cc0000;
	}
	/*footer.pageFooter span {
		height: 67px; /*135px
		width: 100%;
		display: block;
	}*/
	footer[role=pageFooter] h3{
		font: normal 1.806em 'bebasregular';/*26px*/
		margin: 0;
		padding-left: 6.25%;
		padding-top: 16px;
		/*font: normal 2.215em 'bebasregular';/*34px;*/
		display: block;
		color: #ffffff;
		
	}
	footer[role=pageFooter] address{
		padding: 65px 0 0 6.25%;
		margin: 0;
		width: auto;
		color: #ffffff;
		font: 1.319em 'charis_silregular';/*19px*/
		line-height: 2.525;/*48px*/
		/*font: 1.5625em'charis_silregular';/*25px*/*/
	}
	footer[role=pageFooter] address a[href^="tel:"]{
		color: #cc0000;
		text-decoration: none;
	}
	footer[role=pageFooter] address a[href^="tel:"]:hover{
		color: white;
		text-decoration: underline;
	}

}
@media screen and (min-width: 32.5em){/*520px*/
	div[role=container]{
		background-position: 20px 0;
	}
	div[role=mainContent] h1 span{
		display: inline-block;
	}
	div[role=gallery] figure,
	div[role=mainContent],
	footer[role=pageFooter],
	footer[role=pageFooter] address {
		float:left;
	}
	div[role=gallery]{
		padding-left:6.25%;
	}
	div[role=gallery] figure{
		width:46.15%;
		margin-right: 3.85%;
		box-shadow: 0px 0px 10px #000000;
	}
}
@media screen and (min-width: 43.75em){/*700px*/
	body{
		font-size: 95%;
	}
	div[role=container]{
		background-size: 397px 697px;
		background-position: 23px 0;
	}
	header[role=pageHeader] > blockquote{
		font-size: 1.4375em;/*22px*/
	}	
	article div blockquote{
		font: 1.875em'charis_silregular';/*30px*/
		line-height: 1.0625;/*34px*/
	}
}
@media screen and (min-width: 49.84em){/*797px*/
	article p {
		font-size: 1.25em;/*19px*/
		line-height: 1.5625;/*25px*/
	}
	div[role=container]{
		background-position: 33px 0;
	}
	div[role=mainContent] h1,
	article > div,
	footer[role=pageFooter] h3,
	footer[role=pageFooter] address,
	header[role=pageHeader] > blockquote,
	div[role="gallery"],
	div[role=mainContent] nav[role=subNavigation] ul{
		/*padding-left:52px;
		padding-right:52px;*/
		padding-left:7.9%;
		padding-right: 12%;
	}
	div[role=gallery]{
		padding-right:0;
	}
	a[aria-label=home-link]{
		margin: 30px 100px 0 52px;
		background-size: 200px 148px;
		width: 200px;
		height: 148px;
		float:left;
	}
	header[role=pageHeader]{
		float:left;
	}
	header[role=pageHeader] > blockquote{
		float:left;
		width:53.19%;
		padding:0 0 0 1.81%;
	}
	header[role=pageHeader]{
		padding-top:0;
	}
	nav[role=mainNavigation] {
		float: left; 
		position: inherit;
		width:auto;
	}
	nav[role=mainNavigation] ul {
		float:left;
		display:block;
		position:inherit;
	}
	nav[role=mainNavigation] ul li {
		float: left;
	}
	nav[role=mainNavigation] ul li a {
		margin-top:0;
		padding: 20px;
		padding-top: 80px;
	}
	h3[role=menu-toggle]{
		display:none;
	}
}
@media screen and (min-width: 54.31em){/*868px*/
	body{
		font-size: 100%;
	}
	a[aria-label=home-link]{
		background-size: 200px 148px;
	}
	div[role="gallery"] figure{
		width:30.06%;
		margin-right: 3.27%
	}
	footer[role=pageFooter]{
		background-position: 0 72px;
	}
	footer[role=pageFooter] address{
		padding-left:100px;
	}

}
@media screen and (min-width: 65em){/*1040px*/
	div[role="container"]{
		max-width: 68.75em;/*1100*/
		background-position: 40px 0;
	}
	footer[role=pageFooter]{
		background-size: 1100px 189px
	}
	footer[role=pageFooter] address{
		margin-top: 20px;
	}
	a[aria-label=home-link]{
		background-size: 240px 162px;
		width:240px;
		height:162px;
	}
}
/*@media screen,
	(-o-min-device-pixel-ratio: 5/4),
	(-webkit-min-device-pixel-ratio: 1.25),
	(min-resolution: 120dpi) {
	.home-link{
		background: url(../images/logo-2x.png) no-repeat;
		background-size: 182px 125px;
		
	}	
}*/