body {
	 margin: auto;
	 padding: 50px;
	 color: #000;
	 
 }
 
 
 /* ---- set up site grid ---- */
 
   .wrapper {
	 display: grid;
	 grid-template-columns: 300px 2fr 1fr;
	 grid-template-rows: auto;
	 grid-template-areas:
	      "logo banner banner"
		  "nav nav nav"
		  "main main side"
		  "footer footer footer";
	  grid-gap: 4px;	  
 }
 
  /* ---- end of grid setup ---- */
 
 
 /* -00- area styling -000- */
 
 /* ---- Area coloring... */
	
			
 
 
 .box {
	 PADDING:20px;
	 border-radius: 10px;
	 BACKGROUND-color:  #ddd;
 }
 
 .logo {
     grid-area: logo;
	 padding: 0;
	 height: 199px;
	 background-image: url(images/logov2.png)
 }
 
 .banner {
	 grid-area: banner;
 }
 
 /* set font on dark areas to white */
 .logo, .banner, .side,.footer {
	 color: #fff;
 }
 
 .nav {
	 grid-area: nav;
	background-color: #D6EAF8;  /* blue */
	font-size: 150%;
	text-align: center;
 }
 
 .main {
	 grid-area: main;
	 background-color: #FAD7A0; /* yellow */
 }
 
 .side {
	 grid-area: side;
	 text-align: left;
	 background-color: #8CCDF2     ; /* black */
 }

 .footer {
	 grid-area: footer;
	 background-color: #2E4053; /* black */
 }
 
  
     /* ---- Area coloring... */
	
	/* logo, banner and footer background are the same */
.logo, .banner, .footer {
	background-color: #885566; /* dark purple */
 }
/* ---- Area coloring... */
	
	
 		
 
 /*-000-End of area styling -000-*/
 
     h1, h2, h3, h4 {
		 font-family: 'Raleway', sans-serif;
	}
	
	
	/* navigation links */
	.nav a {font-weight: bold;}
	.nav a:link, .nav a:visited {color: #885566;}
	.nav a:hover {color: #604830; text-decoration: none;}
	
	
	/* contact form styling */
	.contact  {
		width: 100%;
	}
	
	 .img-circle {
		border-radius: 50%;
		max-width: 85%;
		height: auto;
	    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.8);
	
	}
	
	
	.center_image {
		text-align: center;
		
	}