@import url('https://fonts.googleapis.com/css?family=Tenor+Sans');
@import url('https://fonts.googleapis.com/css?family=Roboto');

:root {
	--NavTextColour: #111111;
	--NavBGColour: #f0f0f0;
	--TestColour: #FF0000;
	--HideColour: #54d17a;
	--MainContentTextColour: #111111;
	--MainContentBGColour: #eeeeee;
	--MainContentLinkColour: #0000ff;
	--MainContentBorderColour: #444444;
}


html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	background-image: url(images/white_parchment_paper_background_1800x1600.jpg);
	background-position: center;
}
html {
	font-family: Arial, Helvetica, sans-serif;
}

.Nav {
	border-bottom: 1px solid var(--MainContentBorderColour);
	text-align: left;
	height: auto;
 	line-height: 40px;
	min-height: 40px;
}

.Menu {
	margin: 0 30px 0 0;
	background-color: var(--NavBGColour);

}

.Menu a {
	clear: left;
	text-decoration: none;
	color: var(--NavTextColour);
	margin: 0 10px;
	line-height: 10px;
}

span {
	color: var(--HideColour);
}

/* hamburger Settings */
label {
	margin: 0 0 0 20px;
	font-size: 26px;
	line-height: 40px;
	display: none;
	width: 26px;
	float: left;
}

#toggle {
	display: none;
}

hr {
	display: block;
       position: relative;
       padding: 0;
       margin: 8px auto;
       height: 0;
       width: 50%;
       max-height: 0;
       font-size: 1px;
       line-height: 0;
       clear: both;
       border: none;
       border-top: 1px solid #aaaaaa;
       border-bottom: 1px solid #ffffff
}
.container-1 {
	display: flex;
	flex-direction: column;
	position: static;
}

.container-1 div {
	padding-top: 8px;
	padding-right: 8px;
	padding-left: 8px;
	padding-bottom: 8px;
	text-align: center;
}

/* Index.html Specific */
.TitleBox {
	margin-top: 32px;
	font-family: 'Tenor Sans', sans-serif;
	font-size: 32px;
	text-transform: uppercase;
}

.DescriptionBox {
	margin-top: 100px;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	font-style: italic;
}

.NameBox {
	margin-top: 16px;
	font-family: 'Tenor Sans', sans-serif;
	font-size: 24px;
}

.AddressBox {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
}

.LocationBox {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
}

/* Bio.html Specific */
.BioBox {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	margin: 20px auto auto auto;
	height: 500px;
	width: 500px;
	text-align: justify!important;
}
/* Location.html Specific */
.GmapBox{
	margin:auto;
	height:500px;
	width:80%;
	filter: grayscale(100%);
	 
}

.GmapCanvas {
	overflow:hidden;
	background:none!important;
	height:500px;
	width:100%;
}


@media only screen and (max-width:500px) {
label {
	display: block;
	cursor: pointer;
}

.Menu {
	text-align: center;
	width: 100%;
	display: none;
	background-color: var(--NavBGColour);
	border-bottom: 1px solid var(--TestColour);
}

.Menu a {
	display: block;	
	margin: 0 10px;
	line-height: 50px;
	color: var(--NavTextColour);
}
/* Location.html Specific */
.GmapBox{
	margin:auto;
	filter: grayscale(100%);
	height:500px;
	width:350px;
	 
}
.GmapCanvas {
	overflow:hidden;
	background:none!important;
	height:100%;
	width:100%;
}
/* Bio.html Specific */
.BioBox {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	margin-top: 20px;
	height: 500px;
	width: 90%;
	text-align:justify!important;
}
#toggle:checked + .Menu {
	display: block;
}