html {
         font-size:100%; /* housekeeping to normalize fonts across all browsers */
  }
 
body {
                
        margin:0;
		font-family:'Open Sans', Helvetica, Arial, sans-serif;
		/*font-size:16px; /* default font size in all browsers*/
		font-size:1em; /* same as 16 px  -  divide wanted target size by 16 to get em size*/
 }
 
img, video, object  {
	  max-width:100%;   
	  /* width:100%;  only for ie 6 */
 }
 
/*title {
	background-image:url(title.jpg);               
} */
#wrapper {
	    /*width:960px;*/
		max-width:50em; /* 960/16 = 60 em */
        margin:0 auto;
		padding: 20px 0 0 0;
		background-color:rgba(255,255,255,.1); /*last octect translucent fill */
		-webkit-box-shadow: 0px 0px 15px #000; /* Saf3.0+, Chrome */
		-moz-box-shadow: 0px 0px 15px #000; /* FF3.5 - 3.6 - was 5px 5px 6px #666; */
		box-shadow: 0px 0px 15px #000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
		background: #225341; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyNTM0MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMmZjZmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #225341 0%, #f2fcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#225341), color-stop(100%,#f2fcfc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #225341 0%,#f2fcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #225341 0%,#f2fcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #225341 0%,#f2fcfc 100%); /* IE10+ */
background: linear-gradient(to bottom, #225341 0%,#f2fcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#225341', endColorstr='#f2fcfc',GradientType=0 ); /* IE6-8 */
}
 
header#main { 
   		text-align:center;
		margin:20px 0 0 0;
		width:100%;
		height:100px;
		background-color:black;
		background-image:url(images/office_tech_solutions3.jpg);
		background-repeat: no-repeat;
		/* height:6.25em; */
}
 
header h1 {
	font-family:Tahoma, Geneva, sans-serif;/*font-size:50px; browser*/
	font-size:3em; /* use all decimals - text use ems 3.125 */
	color:#fff; /* was #222 */
	text-shadow:0 3px 3px #6a8a1f;
	 /* margin:0; */
	 padding:20px 0 0 0; 
	    }
 
article {
	background-color:rgba(255,255,255,.8);
	padding:5px 20px;
	border-radius:30px;
}
 
 
mainc {
	font-size:.5em;	!Important
}

aside {
	width : 26%; /* was 27.08 */
	float : left;
	border-radius : 24px;
	margin : 35px 0 0 19px;
	text-align : center;
	background-color : rgba(255, 255, 255, 0.9);
	box-shadow : 0 0 10px #222 inset;
	padding : 0 0 20px 0;
	font-size:.9em;
}
 
aside ul {
	text-align: left;
	margin: 0;
	padding: 0 0 0 20px;  
}
 
aside li {
	list-style: none; 
}

aside a {
	color: #000;
	text-decoration:none;
	padding:4px; 
}
  
aside a:link {
	background-color:transparent;
}
 
aside a:visited {
	background-color:transparent;
}
 
aside a:hover {
	background-color:rgba(255,255,255,.1);
}

aside a:active {
	background-color:rgba(255,255,255,.1);
}
 
footer {
	overflow:hidden;
	clear:both;
	background-image:url("footer_logo.gif"); 
}
 
#content {
	/*outline:1px red solid;*/
	/*width:520px;*/
	width:65.16%;
	float:left;
	margin:20px 0 0 20px;
	background-color:rgba(255,255,255,.8);
	padding:12px;
	border-radius:9px;
	}
 
nav ul {
	margin:0;
	padding:0; 
	
}

nav li{
	width:125px;
	float: left;
	list-style:none;
	margin:0 15px 0 15px;
	outline
}

nav li a{
	display:block;
	background-color: #deecea; /* for ie 6, 7, 8 */
	background-image: -webkit-linear-gradient(top, #C1FA3B, #5A7F03);     /*write this rule 4 times - 1 for each browser */
	border-radius:4px;
	border:1px solid #374d02;
	padding:3px 3px; /* was 3 16px */
	text-decoration:none;
	text-align:center;
	color:#636161;
	text-shadow:rgba(0,0,0,.2) 0 1px 1px; 
	-webkit-box-shadow:#7eb105 0 0 1px inset, rgba(0,0,0,.4) 0 1px 1px; /*two box shadows */
	-webkit-transition:color 1s ease; /*setting up transition */
}

nav li a:hover{
	color:#000;          /*here's the change */
}

footer section{
	 /*width:280px;*/
	 width: 29.2%;
	 /*height:220px;*/
	 min-height:32%;
	 float:left;
	 /*outline:1px red dashed; */
	 text-align:center;
	 /*padding:20px;*/
	 padding:1.25em;
	 /*margin:20px 0 0 0;*/
	 margin:1.25em 0 0 0;
}
 
footer section h2 {
	color:#666;
	text-shadow: 1px 1px 3px #000; 
}
 
footer section a {
	padding:6px; 
	color:#555;
	text-decoration:none;
	text-shadow:1px 1px 1px #000;
	background-color:transparent;
	-webkit-transition:background-color 1s ease;
	-webkit-transition:color 1s ease;
}
 
footer section a:hover {
	 background-color:rgba(0,0,0,.3);
	 color:#999; 
}

section#copyright {
	/*background-color:rgba(0,0,0,.3); 
}
 
section#contact {
	background-color:rgba(0,0,0,.4);  
}
 
section#footersubnav {
	background-color:rgba(0,0,0,.3);
	} */
	}
 
 
/* media queries always go to the bottom @media screen and (max-width: 960px) {*/
 
@media screen and (max-width: 767px) {
		#content, aside {
			width: 94%;
			float: none;
			margin: 2%;	
		}
		header#main { 
   		background-color:none;
		background-image:none;
		background-repeat: no-repeat;
		/* height:6.25em; */
}
		header h1 {
		font-size:2em; 
			    }
		footer section {
			width: 95%;
			float: none;
			margin:2%;
		}
		nav li {
			width:95%;
			float: none;
		}
}