* { box-sizing: border-box; }
body {font-family: Verdana, Arial, sans-serif;
      background-color: #e4e4e4;
}
#wrapper {  background-color: #ffffff; 
            color: #2C2C54;
            display: grid;
            grid-template-columns: auto;
		    grid-template-rows: auto; }


.mySlides {display:none;}

h1, h2 { color: #2c2c54; }

h1 { text-align: center; 
     font-size: 300%; 
     padding-bottom: 1em; text-shadow: 3px 3px 3px #E9FBFC;}

h3 { text-align: left; 
     font-size: 100%; 
     padding-bottom: 1em; text-shadow: 3px 3px 3px #E9FBFC;}


nav {font-size: 80%; height: 105px;}

nav ul { list-style-type: none; text-align: center; font-size: 1.5em; margin: 5px; color: blue;}
nav li { display: inline;}
nav a {text-decoration: none; padding-left: 10px; padding-right: 10px; font-family: tahoma;}
nav a:link { color: #0013c2; }
nav a:visited { color: #0013c2; }
nav a:hover { color: #2C2C54; text-decoration: underline;}
nav img{padding-left: 10px;}
nav table{width: 100%;}

aside {display: none;  padding: 1em;}
aside a {text-decoration: none; padding-left: 10px; padding-right: 10px; font-family: tahoma;}
aside a:link { color: #0013c2; }
aside a:visited { color: #0013c2; }
aside a:hover { color: #2C2C54; text-decoration: none;}


main {padding: 0 1em 1em;}

footer { text-align: center;
		 padding: 1em; font-size: 75%; height: 60px;}

footer ul { list-style-type: none; text-align: center; font-size: 1.5em; margin: 5px; color: blue;}
footer li { display: inline;}
footer a {text-decoration: none; padding-left: 10px; padding-right: 10px; font-family: tahoma;}
footer a:link { color: #0013c2; }
footer a:visited { color: #0013c2; }
footer a:hover { color: #2C2C54; text-decoration: underline;}


@media (min-width: 30em) {
        #wrapper { display: grid;
            grid-template-columns: 60% 40%;
		    grid-template-rows: auto; }
			aside { display: block; }

        header { grid-row: 2 / 3; grid-column: 1 / 3; }
         nav    { grid-row: 1 / 2; grid-column: 1 / 3; }
         main   { grid-row: 3 / 4; grid-column: 1 / 2; }
         aside  { grid-row: 3 / 4; grid-column: 2 / 3; }
         footer { grid-row: 4 / 5; grid-column: 1 / 3; }
}
@media (min-width: 65em) {
          body { margin: 0; padding: 0; } 
          #wrapper { display: grid;
		    width: 80%;
			margin: auto;
            grid-template-columns: 50px 1fr 30%;
		    grid-template-rows: auto; }
			aside { display: block; }
            header { grid-row: 2 / 3; grid-column: 1 / 4; }
            nav    { grid-row: 1 / 2; grid-column: 1 / 4; }
            main   { grid-row: 3 / 4; grid-column: 1 / 3; }
            aside  { grid-row: 3 / 4; grid-column: 3 / 4; }
            footer { grid-row: 4 / 5; grid-column: 1 / 4; }
}
img { max-width: 100%; height: auto; }