/* @option user-selected theme width */

body {margin-left: 2%;}
#container,#containerstrip {width: 33%;}
#containerborder {width: 32.9%;}
#myExtraContent4{width:47%;}
#sidebarContainer{width:50%;;}
#pageHeader img {padding-top: 10px;}
#strip {left: 35%;width:  40%;}
#nav-wrap {margin-top: 0px;display: none;}
#pageHeader h1,#pageHeader h2,#myExtraContent1,#myExtraContent2,#myExtraContent3,#contentContainer #content,#pageHeader img{padding-left: 30px;padding-right: 20px;}
#breadcrumbcontainer {padding-left: 20px;padding-right: 10px;}
/* menu icon */
#sb-icon,#menu-icon {display: none; /* hide menu and sidebar icon initially */}
#nav ul {display: none; /* hide dropdown */}

@media screen and (max-width:1224px) {
#container,#containerstrip {width: 40%;}
#containerborder {width: 39.8%;}
#pageHeader img {padding-top: 10px;}
#strip {left: 42%;width:  42%;}#pageHeader h1,#pageHeader h2,#myExtraContent1,#myExtraContent2,#myExtraContent3,#contentContainer #content,#pageHeader img {padding-left: 25px;padding-right: 15px;}}  

@media screen and (max-width:1024px) {
#container,#containerstrip {width: 50%;}
#containerborder {width: 49.8%;}
#pageHeader img {padding-top: 10px;}
#strip {left: 52%;width: 47.5%;}
#pageHeader h1,#pageHeader h2,#myExtraContent1,#myExtraContent2,#myExtraContent3,#contentContainer #content,#pageHeader img {padding-left: 20px;padding-right: 10px;}
#myExtraContent2 {padding-top: 0px;margin-bottom: 4px;}}

@media screen and (max-width:768px) {
body {margin-left: 0%;}
#breadcrumbcontainer {padding-top: 10px;}
#sidebarContainer {display: none;margin-top: 0px;width: auto;margin-bottom: 0;padding: 0 15px;border-bottom-style: solid;border-bottom-width: 1px;}
#strip {left: 0%;width: 100%;}
input.form-input-field,textarea.form-input-field {width: 95%;}
#pageHeader {padding-top: 15px;}
#pageHeader h1,#pageHeader h2 {padding-left: 15px;padding-right: 15px;}
#contentContainer{width:auto;padding-top: 12px;padding-bottom: 0px !important;}
#navcontainer{position: relative;display: none;padding: 10px 15px;top: 0;margin-top: 0;margin-bottom: 6px;border-bottom-style: solid;
border-bottom-width: 1px;}
#navcontainer a,#navcontainer ul ul a{line-height: 1.1;}
#pageHeader img{padding: 0 15px;}
#contentContainer,#container,#pageHeader,#containerstrip,#containerborder {width: 100%;}
#containerborder{border-right-style: none;border-left-style: none;}
#contentContainer #content {padding: 0 15px 10px;}
#strip {position: relative;top: 0;width: 100%;}
#sidebarContainer #sidebar {padding: 0;margin-bottom: 10px;margin-top: 3px;}
#sidebarContainer .sideHeader {font-size: 14px;}
#myExtraContent1,#myExtraContent2,#myExtraContent3{padding-left: 15px;padding-right: 10px;}
#myExtraContent1 {padding-top: 14px;}
#myExtraContent2{padding-top: 10px;padding-bottom: 12px;}
#myExtraContent3{padding-top: 10px;padding-bottom: 12px;}
#myExtraContent4{margin-bottom: 0;padding: 10px 15px 5px;width: 94%;}
#myExtraContent5{width:100% !important;margin-top: 5px;margin-bottom:5px;}

/* nav-wrap */
#nav-wrap {position: relative;height: 55px;display: block;}
#menu-icon {
   cursor: pointer;
    display: block;
	top: 0;
    font-size: 40px;
	text-transform: uppercase;
    line-height: 1.1;
	text-align: right;
    position: absolute;
	z-index: 100;
	right: 0px;
	padding: 6px 15px 4px 0;
	margin-bottom: 0;
	width: 50%;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	text-shadow: 0 0px 3px rgba(0,0,0,0.35);}
#menu-icon:hover {}
#menu-icon.active {	text-shadow: none;}

#menu-icon:before {
content: "\f0c9";
font-family: FontAwesome;}

#menu-icon.active:before {content: "\f00d";}

#sb-icon {
    cursor: pointer;
    display: block;
	top: 0;
    font-size: 40px;
	text-transform: uppercase;
    line-height: 1.1;
	text-align: left;
    position: absolute;
	z-index: 100;
	left: 0px;
	padding: 6px 0 4px 15px;
	margin-bottom: 0;
	width: 50%;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	text-shadow: 0 0px 3px rgba(0,0,0,0.35);
	background-color: transparent;}
	
#sb-icon:hover {background-color: transparent;}
#sb-icon.active {text-shadow: none;background-color: transparent;}

#sb-icon:before {
content: "\f078";
font-family: FontAwesome;}

#sb-icon.active:before {content: "\f077";}
}

@media screen and (max-width: 600px) {
#pageHeader img{padding-bottom: 10px;}}

@media screen and (max-width: 480px) {
#myExtraContent4{width: 90%;}
#myExtraContent2 {padding-top: 8px;padding-bottom: 14px;}
}

@media screen and (max-width: 320px) {
#myExtraContent4{width: 89.5%;}
}