body
{
	margin:0;
	padding:0;
	font-family: sans-serif;
}
/*this is a class called container*/
  .container{
	  width:80%;
	  margin:auto;
	  overflow:hidden;
  }
  .container-frame{
	  border-style:solid;
	  border-color:blue;
	  width:80%;
	  margin:auto;
	  overflow:hidden;
  }
  /*Buttons used for newsletter*/
  .button_1{
	  height:36px;
	  background:#e8491d;
	  border:0;
	  padding-left:20px;
	  padding-right:20px;
	  color:#ffffff;
}
/* This is to use as dark background for a section*/
 .dark{
	  padding:15px;
	  background:#8080ff;
	  color:#ffffff;
	  margin-top:10px;
	  margin-bottom:10px;
 }
 /* Sidebar*/
aside#sidebar{
	  float:right;
	  width:40%;
	  margin-top:10px;
}
/*main-col*/
article#main-col{
	  float:left;
	  width:55%;
	  text-align:justify;
}
article#contact-info{
	float:left;
	font-size:15px;
	margin-top:50px;
	padding-left:50px;
	width:30%
}
header
{
	padding:0 100px;
	width:100%;
	height: 80px;
	box-sizing:border-box;
	background:rgba(255,255,255,.2);
	box-shadow:0 5px 15px rgba(0,0,0,.2);
	transition: .5s;
}
/*to highlight the menu items*/
header .highlight, header .current a{
	color:#e8491d;
	font-weight:bold;
}
ul
{
	position:relative;
	margin:0;
	padding:0;
	display:flex;
	float:right;
	transition: .5s;
}
ul li
{
	list-style:none;
}
ul li a 
{
	position:relative;
	display:block;
	padding:10px 20px;
	margin:20px 0;
	text-transform:uppercase;
	text-decoration:none;
	color:#24247E;                            <!--colour of menu items-->
	font-weight:bold;
	transition: .5s;
}
ul li a:hover
{
	background:#24247E;
	color:#fff;
}
.toggle
{
	display:none;
	position:absolute;
	right:10px;
	top:26px;
	background:#f00;
	color:#fff;
	padding:5px;
	cursor:pointer;
	font-weight:bold;
}
footer
{
	padding:10px;
	font-size:15px;
	margin-top:10px;
	color:#0000ff;
	background-color:#6fd1d1;
	text-align:center;
}
@media(max-width:992px)
{
	.toggle
	{
		display:block;
	}
	
   header 
   {
	padding:0 0px;
	background:rgba(255,255,255,.5);
   }
   header ul
   {
	   width:100%;
	   top:-4px;
	   display:none;
   }
   header ul.active
   {
	   display:block;
   }
   header ul li a 
   {
	   margin:0;
	   display:block;
	   text-align:center;
	   color:#ffff;
	   background:rgba(0,0,0,.5);
   }

header #branding,
	header nav,
	header nav li,
	article#main-col,
	article#contact-info,
	aside#sidebar{
       float:none;
       text-align:centre;
width:100%;	   
}
}