div#main-wrapper {
	width: 100%;
	max-width: none
}



#background {min-height: 40vw; background-position:bottom!important}
div#sidebar {
	float: left;
	right: 0;top:0;position: absolute;
	width: 100%;
	padding: 0 0 20px 0px;
	margin: 0px;
	background:none;
	text-align: center;
	/* z-index: 100; */ }
	
	 div#sidebar h1 { color:#fff; margin:0 0 1em; text-shadow:0 0 10px #999}
div#breadcrumb { display:none;}

div#menu {width:80%; text-align:center;margin:5% auto 0; position:absolute; left:50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%);-ms-transform: translateX(-50%); display:table}
#menu h2,
#menu ul { clear:both; text-align:center; float:none; }


#menu h2 {color: #fff; width:auto;background:rgba(10,149,216,.7);  padding:1em 2em;display:inline-block; margin:0 auto; text-transform:uppercase}

#menu UL li { float:none; display:inline-block; width:auto;margin:.5em;  }
#menu UL LI A {	font-size: 1.2em;	padding:.5em 1em; background:rgba(112,111,111,.7); color:#fff; display:block}


@media screen and (max-width:850px) {
	#background {min-height:60vw;}
	#menu UL li {
	display: block;
	width: auto;
	margin:.5em;}
}
@media screen and (max-width:600px) {
#background {min-height:80vw;}
}
@media screen and (max-width:480px) {
	#menu h2 {padding: .5em 1em;}
	#background {min-height: 100vw;}
}
@media screen and (max-width:380px) {
	#background {min-height: 120vw;}
}

.section {float: none;width: 90%; max-width:970px; margin:33.25% auto 0; text-align:justify}
ol#articles {float: none;width: 90%; max-width:970px; margin:0 auto; }

.intro-h2 { position:absolute;  color:#fff; max-width:970px; width:90%; z-index:2; padding:2rem 2rem; box-sizing:border-box; margin:18% auto;
	left: 50%; 
	transform: translateX(-50%);
	-webkit-transform:) translateX(-50%);
	-ms-transform: translateX(-50%);
	-moz-transform:  translateX(-50%)}
	.intro-h2:before {display:block; background:rgba(150,193,31,0.8); content:''; height:100%; bottom:0; width:100%; position:absolute; z-index:-1;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform:) translateX(-50%);
	-ms-transform: translateX(-50%);
	-moz-transform:  translateX(-50%)}
#introPic { position:absolute; z-index:-1}

div.artmedia {width: 100%;	margin: 0 0 10px 0;}
.artmedia IMG {	max-width: 100%;max-height: none;}

#cat-description  { position:relative; }
#cat-description div#products {	float:right;width:23.5%; position:absolute; right:1%; top:112px}
	
	
ol#articles {margin: 3rem auto;}
#cat-description { max-width:none; }
#cat-description  OL.articles {
	padding: 0 0 20px 0;
	box-pack: right;
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
	-moz-justify-content: flex-end;
	align-items: right;
	float:right}
#cat-description LI.product {	width: 100%; float:right  }
@media screen and (max-width: 1415px) {
	.intro-h2 {  margin:15% auto; }
	h2 {font-size:30pt;}
}
@media screen and (max-width: 1280px) {
#cat-description div#products  {
	width: 22%; right:2%}
}
@media screen and (max-width: 1200px) {
#cat-description div#products { position:relative; top:0; left:0;
	margin: 0 2% 3rem;float: left; padding:0;	width: 29.333%;}
}
@media screen and (max-width: 1030px) {
	h2 {font-size:29pt;}
}
@media screen and (max-width: 965px) {
		h2 {font-size:1.8em!important;}
		.intro-h2 { padding:1rem;}
		
}
@media screen and (max-width: 865px) {
.intro-h2 { position:relative; top:0; width:90%; transform:none; left:0; padding:0; color:#707173; margin:20px auto 0;}
.intro-h2::before { display:none;}
#introPic { position:relative}
.section { margin:0 auto;}
}
@media screen and (max-width: 700px) {
#cat-description div#products   {margin: 0 4% 2rem 2%;	width: 46%;}
#cat-description LI.product {	margin: 0 0 2rem;	width: 100%;}
}
@media screen and (max-width: 370px) {
#cat-description div#products   {margin: 0 0 2rem ;	width: 100%;}
}