@charset "utf-8";
/* CSS Document */
* {
  box-sizing: border-box;
}
.NoteBox     {
    border: 8px solid black;
    text-align: left;
    padding: 25px;  
}

p	{
    text-align:left; 
    padding:5px;
}

.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 ." 
		". box1 box1 ." 
		". box2 box2 ." 
		". box3 box3 ." 
		". box4 box4 ." 
		". box5 box5 ." 
		". box6 box6 ."
		". box7 box7 .";
		}

.nav{grid-area: nav;
	background-color: #333;
    overflow: hidden;
}

/*the title at the top of page*/

.banner {
	grid-area: banner ;
	width:100%;
	padding: 0px;
    margin: 0px;
}

.banner h1	{
	color: #044476;
	font-weight:bold;
	font-size:3vw;
	padding:5px;
	font-family:Cinzel;
	margin-bottom:5px;
	display: block;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.header {grid-area: header ;
	border: 2px solid black;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	padding: 10px;
	margin: 0px 0px 10px 0px;
	font-size:1vw;
}
	
.box1, .box2, .box3, .box4, .box5, .box6, .box7{grid-area: box1;
    background-color: white;
    width: 95%;
    border: 3px solid black;
    padding: 10px;
    margin: auto;
    margin-bottom:5px;
    justify-self: left;
}

.box2{grid-area: box2;
   
}


.box3{grid-area: box3;
}

.box4{grid-area: box4;
}


.box5{grid-area: box5;
}


.box6{grid-area: box6;
}

.box7{grid-area: box7;
}

.pic	{
	border: 2px solid black;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}





.add-it {
  border-radius: 4px;
  background-color: #A3D0D3;
  border: none;
  color: #000000;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}



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

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

.add-it:hover span {
  padding-right: 25px;
}

.add-it:hover span:after {
  opacity: 1;
  right: 0;
}

.left	{
	text-align: left;
	}
	

/*For tablets*/
	
		
@media screen and (max-width: 826px) {
  .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"
		"box1 box2"
		"box3 box4"
		"box5 box6"
		"box7 box7";}
}
	
		
		
/*For cphones*/

@media screen and (max-width: 658px) {
  .grid {
	display:grid;
	grid-template-columns:100%;
	grid-template-rows:auto auto auto auto; 
	margin:0 auto;
	
	grid-template-areas:
		"nav"
		"banner" 
		"header"
		"box1"
		"box2"
		"box3" 
		"box4"
		"box5" 
		"box6"
		"box7";
		}
.banner h1	{
	font-size:10vw;

}


.header p {
font-size: 20px;
font-family: "Arial";
}
h3	{

	font-size:20px;
	font-weight:bold;
}
h2 {
font-size:.75em;
	font-weight:bold;
}
h1 {
	font-size:1.25em;
	font-weight:bold;
}
.box1,.box2, .box3,.box4, .box5, .box6, .box7 {
justify-self: center;
}

}