:root {
	/*--bg_color: #0066cc; /*medium blue*/
	/*--bg_color:#5cd65c; /*green*/
	/*--bg_color: #bfbfbf; /*gray*/
	--bg_color:#94b8b8; /*blue-grey*/
	--bord_color: #669999; /*slightly darker blue-grey*/
}

* {
  box-sizing: border-box;
}

html {
	background: url("../images/BG.jpg") fixed no-repeat;
	background-size: cover;
	background-color: #999999; /* fallback color for browsers that don't support variables */
	background-color: var(--bg_color); /* fallback in case background image doesn't load correctly */
}

body {
    background-color: #999999; /* fallback color for browsers that don't support variables */
	background-color: var(--bg_color);
	border-style: solid;
	border-color: #666666; /* fallback color for browsers that don't support variables */
	border-color: var(--bord_color);
	border-width: 0 15px;
	width: 75%;
	margin: 0 auto;
	padding: 0;
}

/* -------------------------------- */
.Navbar {
	width: 100%;
	background-color: var(--bg_color);
	text-align: center;
	margin: 0;
	padding: 10px 0 10px 0;	
}

ul {
	overflow: hidden;	
	margin: 0;
	padding: 0;
}

li {
    list-style: none;
	border-radius: 30px;
	float: right;
	margin: 0;
	padding: 0;	
}

li a:link {
    font-variant: small-caps;
	font-weight: bold;	
	color: black;
	padding: 20px 40px;
	margin: 0;
	text-align: center;
	text-decoration: none;
}

li a:hover {
	background-color: white;
	color: black;
}

li a.active {
	background-color: black;
	color: white;
}

/* -------------------------------- */


header {
	background-color: var(--bg_color);
	width: 100%;
	padding: 0 0 20px 0;	
	margin:0;
}

header img.img_1 {	
	display: block;
	width: 70%;
	margin:0 auto;
	padding: 0;	
}

header h1 {
	font-size: 45px;
	text-shadow: 5px 5px 10px black;
	margin: 10px 0 0 0;
	padding: 0;
	color: white;
	text-align: center;
}

/*-----------------------------------*/
.lead_in {	
	text-align: center;
	padding: 10px 70px 20px 70px;
	margin:0;
	background-color: var(--bg_color); 	
}

.lead_in h1, .lead_in h2, .lead_in h3 {
	color: white;
	text-shadow: 5px 5px 10px black;
	margin: 0;
	padding: 0;
}

.lead_in h1 {
	font-size: 55px;
}

.lead_in h2 {
	font-size: 30px;
	
}

.lead_in h3 {
	font-size: 20px;
	
}

.lead_in_pic {
    display: none;
}

/*-----------------------------------*/

.centered_text h2, .centered_text h1, .centered_text p {
	text-align: center;
	color: white;
	text-shadow: 5px 5px 10px black;
	margin: 0;
	padding: 0;
}

.centered_text p {
	font-size: 120%;
	padding: 0 20px;
}

.left_column {	
	float: left;
	width: 33.3%;
	margin: 0;
	padding: 25px 10px 10px 20px;
}

.center_column {	
	float: left;
	width: 33.3%;
	margin: 0;
	padding: 25px 10px 10px 10px;
}

.right_column {	
	float: left;
	width: 33.3%;
	margin: 0;
	padding: 25px 20px 10px 10px;
}

.footer {
	clear: left;
	width: 100%;
    background-color: var(--bord_color);
	text-align: center;
	color: white;
	margin: 0;
    padding: 0;
} 

.footer p {
	padding: 5px;
	margin: 0;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 60%;
}

.map_box {
	width: 70%;
	margin: auto;
	padding: 20px 0 10px 0;
}

.map {
	width: 100%;
	height: auto;
}

.building_box_1 {
	float: left;
	width: 50%;
	margin: 0;
	padding: 0 0 10px 0;
	border-style: solid;
	border-color: var(--bord_color);
	border-width: 0 3px 0 0;
}

.building_box_2 {
	float: left;
	width: 50%;
	margin: 0;
	padding: 0px 0px 10px 0px;
}



/*-----------------------------------------*/
@media screen and (max-width: 800px) {
	body {
		width: 100%;
		border: none;
	}
	
	header img.img_1 {
		width: 100%;
	}
	
	.lead_in_pic {
	    display:block;
	    width: 100%;
	}
	
	
	
	.left_column {
		width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
		padding: 30px 0;
		margin: 0;
	}
	
	.center_column {
		width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
		padding: 30px 0;
		margin: 0;
	}
	
	.right_column {
		width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
		padding:30px 0;
		margin: 0;
	}
	
	.building_box_1 {
		width: 100%;
		padding: 30px 0;
		margin: 0;
		border-style: solid;
		border-color: var(--bord_color);
		border-width: 0 0 3px 0;
	}
	
	.building_box_2 {
		width: 100%;
		padding: 30px 0;
		margin: 0;
	}
	
	.lead_in {
	text-align: center;
	padding: 0 10px;
	margin:0;
	}
	
	.lead_in h1 {
	font-size: 2.75em;
	padding: 0;
	margin:0;
	}	
}