/* CSS Document */
* {
    box-sizing: border-box;
}

body {
  font-size: 100%;
}

img {
    width: 100%;
    height: auto;
}

h1{
	font-size: 30px;
	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: 700;
	font-style: italic;
	color:#003366;
	text-align:center;
	font-size: 1.25em;
	text-transform:uppercase;
    margin: 5px; 
}

h3	{
	font-family: "Cinzel";
	color:#003366;
	margin: auto;
	text-align:center;
	page-break-after:avoid;
	font-size:1.25em;
	font-weight:strong;
}

p	{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 0.875em;
	margin:6px;
}

.time	{
	padding:8px;
	}
	
.grid {
	display:grid;
	grid-row-gap: 10px;
	grid-template-columns:10% 40% 40% 10%;
	grid-template-rows:auto auto auto auto; 
	margin:0 auto;

	grid-template-areas:
		". nav nav ."
		". header header ."
		". contact-us contact-us ."
		". instruct hours ."
		". phone tech-help .";
}

.nav	{grid-area: nav;}
.header {grid-area: header;}
.contact-us{grid-area: contact-us;}
.tech-help	{grid-area: tech-help;}
.phone	{grid-area: phone;}
.hours	{grid-area: hours;}

.tech-help, .phone, .hours, .instruct {
	margin: 10px;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: auto;
    text-align: center;
    align-self: start;}

.instruct	{grid-area: instruct;
	text-align: left;
	}
.button{
	border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
    margin:0px;

}

a {
    text-decoration: none;
    font-size: 18px;
    color: white;
}

button:hover, a:hover {
    opacity: 0.7;
}

@media screen and (max-width: 800px) {
  .grid {
	display:grid;
	grid-row-gap: 10px;
	grid-template-columns:50% 50%;
	grid-template-rows:auto auto auto auto; 
	margin:0 auto;

	grid-template-areas:
		"nav nav"
		"header header"
		"contact-us contact-us"
		"instruct hours"
		"phone tech-help";
}
}
@media screen and (max-width: 600px) {
  .grid {
	display:grid;
	grid-row-gap: 25px;
	grid-template-columns:100%;
	grid-template-rows:auto auto auto auto; 
	margin:0 auto;

	grid-template-areas:
		"nav"
		"header"
		"contact-us"
		"instruct" 
		"phone" 
		"hours"
		"tech-help";

p {
font-size: 1.25em;
font-family: "Arial";
}
}
}