@charset "utf-8";
/* CSS Document */
* {
    box-sizing: border-box;
}

/*this goes to the about us page in the navigation*/
img {
    width: 100%;
    height: auto;
}

h1{
	font-size: 2.45em;
	font-weight: 900;
	color:#003366;
	margin:10px 0px 0px 0px ; 
	text-align:center;
	page-break-after:avoid;
	font-family: "Cinzel";
	text-transform:uppercase;
	letter-spacing:2px;
}

h2 {
	font-family: "Cinzel";
	font-weight: 300;
	font-style: italic;
	color:#003366;
	text-align:center;
	font-size: 1.75em;
	text-transform:uppercase;
    margin: 5px; 

}
h3	{
	font-family: "Cinzel";
	color:#003366;
	margin: 20px 0px 0px 0px;
	text-align:left;
	page-break-after:avoid;
	font-size:1.25em;
	font-weight:strong;
}
p{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 1.05em;
	margin:6px;
}

.grid {
	display:grid;
	grid-template-columns:10% 40% 40% 10%;
	grid-template-rows:auto auto auto auto; 
	margin:0 auto;

	grid-template-areas:
		". nav nav ."
		". banner banner ."
		". header header ."
		". content content ."; 
		}
.nav{grid-area: nav;
	background-color: #333;
    overflow: hidden;
}
/* Style the links inside the navigation bar */
.nav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the nav on small screens */
.nav .icon {
    display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.nav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}


.header {grid-area: header ;
}
.banner {
	grid-area: banner;

}



.about-us {grid-area: about-us ;
}

.content {grid-area: content ;
}

@media screen and (max-width: 800px) {
  .grid {
	display:grid;
	grid-template-columns:50% 50%;
	grid-template-rows:auto auto auto auto; 
	margin:0 auto;
	grid-template-areas:
		"nav nav"
		"banner banner" 
		"header header"
		"content content";
}
@media screen and (max-width: 400px) {
  .grid {
	display:grid;
	grid-template-columns:100%;
	grid-template-rows:auto auto auto auto; 
	margin:0 auto;
	grid-template-areas:
		"nav"
		"banner" 
		"header
		"content";
}
h1{
	font-size: 2.2em;
}
p {
font-size: 1.25em;
font-family: "Arial";
}