/* CSS Document */
* {
    box-sizing: border-box;
}
p, li {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 1.25em;
	margin:6px;
}

h1, h2, h3, h4 {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	
}

h1	{
	color:#24679A;
	margin:12.0pt 0in; 
	text-align:center;
	page-break-after:avoid;
	font-size:18px;
	font-weight: bold;
	text-transform:uppercase;
	letter-spacing:2px;
	}


h2  {
	color:#24679A;
	text-align:left;
	font-size: 1em;
	font-weight: bold;
    margin-bottom: 4pt 
    }

h3	{
	color:#24679A;
	font-family: 'Cinzel', serif;
	letter-spacing:2px;
	margin-top:12.0pt;
	margin-right:0in;
	margin-bottom:3.0pt;
	margin-left:0in;
	text-align:left;
	page-break-after:avoid;
	font-size:22px;
	font-weight:bold;
}



img	{
	border:1px solid black;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	border-radius: 5px;
	}
	
.mission {
	text-align: inherit;
    border: 5px inset#FFDC8E;
	-webkit-border-radius:5px;
	padding:  7px 10px;
	background-color:#FAFBE3; 
	margin-top:20px; 
	margin-bottom:20px;
}
.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:
		
		". header header ."
		". nav nav ."
		". banner banner ."
		". nested nested ."

		". img1 text1 ."
		". text2 img2 ."
		". img3 text3 .";
}
.nested{grid-area:nested;
			display: grid;
			grid-template-columns: 30% 70%;
			grid-template-rows:auto;
			grid-gap: 10px;
			border:2px solid black;
			border-radius: 5px;

		}
		
		.nested img	{
			width:200px;
			margin: 30px 15px 30px 35px;}
			
		.nested h1{
		display: block;
		font-family: 'Cinzel', serif;
		padding: 10px 10px 0px 10px;
		margin: 8px;
		}

		
		.nested p{
			width:100%;
			display: block;
			padding: 0px 10px 10px 10px;
			margin: 0;
		}

.header {grid-area: header;
color: #003366;
font-family: 'Cinzel', serif;
font-weight: 500;}

.header h1, .header h2, .header h3, .header p, .header ol, .header li{
color:#003366;
font-family: 'Cinzel', serif;
margin-bottom: 0px;
}

.header h1 {
	color:#24679A;
	margin:12.0pt 0in; 
	text-align:center;
	page-break-after:avoid;
	font-size:40px;
	font-weight: bold;
	text-transform:uppercase;
	letter-spacing:2px;
	}


.header h2{
color:#0669B2;
	font-weight: 700;
	font-size: 25px;
	text-align:center;
}



h3.header {
	font-weight:700;
	font-size: 20px;
	}

p.header {
font-weight: 500;
	font-size: 20px;
	text-align: center;
}

ol.header, ol.course-list{
	list-style-type: none;
	margin:inherit;
}

ol.course-list{
	padding: 0px 20px;
	}
	
li.header	{
border: 1px solid #0669B2;
padding:4px;
}

li.header, li.course-list {
	display: relative;
}

.nav {grid-area: nav;
margin: auto;
}
.banner {
	grid-area: banner;
    width: 100%;
    height: 250px;
    background-image:url(../images/HomePageImages/hero_image.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    border: 1px solid #003366;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	border-radius: 5px;
}

		

.img1 {grid-area: img1;
	margin: 15px 60px 0px 40px;}

.img2 {grid-area: img2;
	margin: 20px 60px 0px 20px;
}

.img3 {grid-area: img3;
margin: 60px 20px 0px 0px;
}

.text1 {grid-area: text1;}	
.text2 {grid-area: text2;}
.text3 {grid-area: text3;}

.products	{
	font-family: 'Cinzel', serif;
	color:#24679A;
	margin:12.0pt 0in; 
	text-align:center;
	page-break-after:avoid;
	font-size:18px;
	font-weight: bold;
	text-transform:uppercase;
	letter-spacing:2px;
}

.products:hover	{
	color:blue;
	}

 .nav li{
  position: relative;
    display: inline-block;
 }
 .nav a{
 	text-decoration:none;}

 .nav li:hover{
    background-color: #CDDCE6;
}
 
 /* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

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

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

/*blue boxes to take you to our products */
.go-to {
  border-radius: 4px;
  background-color: #A3D0D3;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.go-to span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.go-to span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.go-to:hover span {
  padding-right: 25px;
}

.go-to:hover span:after {
  opacity: 1;
  right: 0;
}



/*For tablets*/
@media(max-width: 835px) {



.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:
		
		"header header"
		"nav nav"
		"banner banner"
		"nested nested" 
		"img1 text1"
		"text2 img2"
		"img3 text3";
}
.nested{grid-area:nested;
			display: grid;
			grid-template-columns: 100%;
			grid-template-rows:auto; 
			
			grid-gap: 10px;
			border:2px solid black;
			border-radius: 5px;
		}
			.nested img	{
				margin: 20px 20px 0px 170px;
				}
			
		.nested h1{
		display: block;
		color:#002768;
		font-family: 'Cinzel', serif;
		padding: 10px 10px 10px 10px;
		margin: 0px 10px 10px 10px;
		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

		}

		
		.nested p{
			width:100%;
			display: block;
			padding: 0px 10px 10px 10px;
			margin: 0;
		}

.img1, .img3 {
margin:20px;}

}


/*For cphones*/
@media(max-width: 450px) {

.grid {
	display:grid;
	grid-row-gap: 10px;
	grid-template-columns:100%;
	grid-template-rows:auto;auto;auto;auto; 
	margin:0 auto;
	grid-template-areas:
		
		"header"
		"nav"
		"banner"
		"nested" 
		"img1" 
		"text1"
		"img2"
		"text2" 
		"img3" 
		"text3";
}
.nested{grid-area:nested;
			display: grid;
			grid-template-columns: 100%;
			grid-template-rows:auto;
			grid-gap: 10px;
			border:2px solid black;
			border-radius: 5px;
		}
		.nested img	{
			margin:20px 20px 0px 40px;
			}
			
		.nested h1{
		display: block;
		padding: 10px 10px 0px 10px;
		margin: 8px;
		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

		}



h1	{
	color:#002768;
	font-family: 'Cinzel', serif;
	margin:auto; 
	text-align:center;
	page-break-after:avoid;
	font-size:18px;
	font-weight: bold;
	text-transform:uppercase;
	letter-spacing:2px;

	}


		
		.nested p{
			width:100%;
			display: block;
			padding: 10px 10px 10px 12px;
			margin: 0;
		}
.header h3{
	font-weight: 700;
	font-size: 25px;
}

.img1, .img2, .img3 {
margin:auto;}

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