@charset "utf-8";
/* ABOUT CSS Document */
.body {
	width: 100%;
	height: auto;
	margin-right: 0;
	margin-left: 0;
	color: #fff;
	background-image: url("../images/supporting_images/site_background.jpg");
	background-position: center;  	
	background-repeat: no-repeat;
	background-size: cover;	
	background-color: #000;
	}
.page-top {	
  	background: #000;
	width: 100%;
	height: auto;
	margin-left: 0;
	margin-right: 0;
	padding-left: 5%;
	padding-right: 5%;	
	}
.nav-link {
		font-size: 1.0em;		
	}
.bg-dark {
  background-color: #000 !important;
	width: 95%;
	font-size: 140%;
	}
.navbar navbar-expand-lg navbar-dark bg-dark {
	background: white;
	padding-left: 5%;
	padding-right: 5%;
	}
.collapse navbar-collapse {
	width: auto;	
	}
.my-sm-0 {
	border: none;
	font-size: 150%;	
}
.h2 {	
	text-align: center;
	color: #ccc;
	font-size: 2em;
	padding-top: 55px;
	padding-bottom: 2%;
	background-image: linear-gradient(
	to bottom,
	rgba(0,0,0,1), rgba(0,0,0,0));
	}
.h3 {		
	text-align: center;
	color: #eee;	
}
.h4 {	
	font-size: 1.1em;
	text-align: center;
	color: #eee;	
}
.row {	
	display: flex;
  	width: 100%;
	height: auto;
	/* background-color: #000; */
	background-color: rgba(0, 0, 0, .5);
	box-shadow: 5px 10px #000;
	}
.column {	
	/*
	position: absolute;
	*/
  	width: 95%;
	height: auto;
	padding-top: 100px;
	background-color:#25292a;
	border: solid thick black;
	/* margin: auto; */	
	}
.p {
	color:#eee;
	font-size: large;
	text-indent: 35px;
	padding: 10px;	
}
.signature {	
	max-width: 200px;
	min-width: 25%;
	/*
	width: 50%;
	height: auto;
	*/
}
/*........ begin dropdown menue here ........ */
/* Dropdown Button */
.dropbtn {
  background-color: #6F6C6C;
  color: #000;
  padding: 16px;
  font-size: 20px;
  /* border: solid medium #423939; */
	border: outset thick gray;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
	width: 100%;
	padding-left: 15%;
	padding-bottom: 20px;
  position: relative;
  display: inline-block;
	
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
	/* padding-bottom: 10px; */
  background-color: #000;
	border: outset medium #888;
  min-width: 90px;

 /*  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  */
  z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
	height: 45px;
	font-size: 20px;	
  	color: #6F87F9;
	background-color: black;
	border: inset medium #888;
  	padding: 10px;
  	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;
	background-color: #eee;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
	background-color: #000000;
}
.dropbtn {
	font-size: 20px;
	
	color: #eee;
	background-color: #444;
	border: outset medium #888;		
}
/*...... image example control............... */
.image_example_1 {	
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}
/*........ end dropdown menue here ........ */
.footer {
	align-content: center;
	padding-top: 2%;		
	}	
/*........ begin media quiry ........ */
@media (max-width: 576px) {	
.body {
	width: 100%;
	height: auto;
	}	
.logo-image {	  
		display: block;
    	margin-left: auto;
    	margin-right: auto; 
    	width: 100%;
		Height: auto;
		}	
.h2 {
		padding-top: 30px;
		}	
.row {	
		width: 90%;
		padding: 0;
		height: auto;
		margin: auto;	
		}	
.column {
  		float: left;
		width: 100%;
		margin: 0;
		padding: 10px;	
		}	
}
@media (min-width: 576px) {	
.body {
	width: 100%;
	height: 1500px;
	}	
.page-top {    
		padding-left: 8%;
		padding-right: 8%;
		}	
.row {	
		width: 80%;
		padding: 0;
		height: auto;
		margin: auto;	
		}	
.column {
  		float: left;
		width: 100%;
		margin: auto;
		padding: 10px;	
		}
@media (min-width: 768px) {	
.body {		
		height: 1500px;	
		}
.page-top {    
		padding-left: 8%;
		padding-right: 8%;
		}
.bg-dark {  
		width: 100%;	
		}		
.row {	
		width: 80%;
		padding: 0;
		height: auto;
		margin: auto;	
		}	
.column {
  		float: left;
  		width: 100%;		
		padding: 10px;	
		}	
}
@media (min-width: 992px) {	
.body {
		width: 100%;	
	 	height: 1300px;		
		}	
.page-top {    
		padding-left: 10%;
		padding-right: 10%;
		}	
.bg-dark {		
		width: 100%;
		padding-left: 20px;
		padding-right: 40px;
		margin-left: auto;
		margin-right: auto;
		}	
.row {	
		width: 70%;
		padding: 0;
		height: auto;
		margin: auto;
		}	
.column {
  		float: left;
  		width: 100%;		
		/* padding: 50px 10px 10px 10px;*/
		}
}
@media (min-width: 1200px) {	
.body {
		width: 100%;
		height: 1450px;	
		}	
.page-top {    
		padding-left: 13%;
		padding-right: 13%;
		}	
.bg-dark {		
		width: 100%;
		padding-left: 20px;
		padding-right: 40px;
		margin-left: auto;
		margin-right: auto;
		}
	
}
}