* { margin:0px; padding:0px; box-sizing:border-box }
body { background:white;  color:black;  font-family:sans-serif;  font-size:100%; display:grid; grid-template-areas: 
    "header"
    "nav"
    "main"
    "footer";
  grid-template-rows: auto auto 1fr auto;  
  grid-template-columns: 1fr;
  grid-gap: 0px;
  height:100vh;
  margin: 0
}

p, li, h1, h2, h3, h4 { font-family:sans-serif }
p   { font-size:100%; color:#000000; line-height:1.5; margin-bottom:1em }
h1 { font-size:200%; color:#445c7e; line-height:1.5; margin-bottom:1em }
h2 { font-size:150%; font-weight:normal; color:#445c7e; line-height:1.5; margin-bottom:1em }
h3 { font-size:100%; color:#445c7e; line-height:1.5; margin-bottom:1em }
h4 { font-size:150%; font-weight:normal; color:#445c7e; line-height:1.5; margin-bottom:1em }

a:link { color:#445c7e}
a:visited { color:#445c7e}
a:hover { color:#000000}
img { max-width:100%; height:auto; border:0px }

#pageHeader { grid-area:header;background-color:white }
#pageNav { grid-area:nav }
#pageMain { grid-area:main;padding:20px; background-color:#fff; box-shadow: inset 0px 10px 10px -8px rgba(0,0,0,0.9) }
#pageFooter { grid-area:footer;text-align:center; padding:40px 20px 20px 20px; background:#9cb8d5; color:#445c7e; font-size:100% }

.logo { width:100%; text-align:center }
.logo img { max-width:50%; height:auto; padding:20px }
.banner { width:100%; text-align:center; padding:40px 20px 20px 20px; background:#445c7e; color:#ffffff; font-size:100% }
.banner h1 { color:white; font-weight:400; letter-spacing:1px; margin-bottom:.5em }
.banner h2, .banner h3 { color:white; font-weight:400; text-transform:uppercase; margin-bottom:1em }

#pageNav { width:100%; background:#e0e0e0; border-bottom:0px }
#pageNav ul { width:100%; list-style:none }
#pageNav li a { font-size:100%; background:#e0e0e0; width:100%; display:block; float:none; padding:16px 10px; text-align:center; text-decoration:none; text-transform:uppercase; border-bottom:1px solid #fff; border-right:1px solid #fff; border-left:1px solid #fff }
#pageNav li a:hover { background:#9cb8d5; color:#201a1b }

#pageMain h3 { font-size:150%; text-transform:uppercase }
#pageMain ol { font-size:100%; list-style-type:decimal }
#pageMain ul { margin-left:10px; font-size:100%; list-style-type:circle; margin-bottom:2em }
#pageMain li { font-size:100%; line-height:1; margin-bottom:1em; margin-left:20px; list-style-position:outside }
#pageMain li li { margin-top: 1em }

/********************************************************************* For medium sizes */
@media only screen and (min-width: 700px) {
#pageNav li a  { width:50%; float:left }
}

/********************************************************************* For medium sizes */
@media only screen and (min-width: 400px) {

.logo img { max-width:50%; height:auto; padding:25px }
nav li a  { width:50%; float:left }
}

/********************************************************************* For large sizes */
@media only screen and (min-width: 1150px) {

body { display:grid; grid-template-areas: 
  "header aside"
  "nav aside"
  "main aside"
  "footer aside";
grid-template-rows: auto auto 1fr auto;
grid-gap: 0px;  
grid-template-columns: 1fr 20%;
height: 100vh;
margin: 0px
}

#pageHeader { grid-area:header;background-color:white }
#pageNav { grid-area:nav }
#pageMain { grid-area:main;padding: 60px 85px 85px 85px;background-color:#fff; box-shadow: inset 0px 10px 10px -8px rgba(0,0,0,0.9) }
#pageAside { grid-area:aside;grid-column:span 4;padding:20px;
  vertical-align:top; text-align:center; padding:20px; 
  background-color:#e0e0e0;
  background-image: url(images/background2.png), url(images/consulting_side.jpg);
  background-repeat: repeat-y, no-repeat;
  background-position: top left, top right }
#pageFooter { grid-area:footer;text-align:center; padding:40px 20px 20px 20px; background:#9cb8d5; color:#445c7e; font-size:100% }

.logo     { width:100%; text-align:center }
.logo img { max-width:25%; height:auto }
#pageNav li a  { width:25%; float:left; padding:12px 10px; border:0px }
}