ca:link {
	color: rgba(0,0,0,1);
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: rgba(0,0,0,1);
}
a:hover {
	text-decoration: underline;
	color: rgba(162,75,8,1);
}
a:active {
	text-decoration: none;
	color: rgba(0,0,0,1);
}
.columns {
}
@media screen and (max-width: 650px) {
    .column {
        width: 100%;
        display: block;
    }
}
body {
	background-image: url(Images/background/notes.png);
}
#main {
	background-color:rgba(140,140,140,1.00);
	height:250px;
	float:right;
	
	width:60%;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"
	color:#483054
	font-size:14px;
	line-height: 22px;
	padding:25px;
	margin:10px 50px 20px 0px;
}
#sidebar {
	background-color:rgba(162,75,8,1.00);
	height:250px;
	float:left;
	width:20%;
	font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"
	color:#483054;
	font-size:14px;
	line-height:22px;
	text-align:center;
	padding:25px;
	margin:10px 0px 20px 50px;
	
}

</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
<div class="container>
    <div class="content">
      <center>
     <img src="Images/banner/ewco".png>   
</center></div>
  <footer class="secondary_header footer">
    <div class="copyright">&copy;2018 - <strong>EWCO</strong></div>  </footer>
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}