@charset "utf-8";
/* CSS Document */


* {
  box-sizing: border-box;
}




#body p {
	font-size: 0.875em;
}

/* Head */

.header {
	clear:both;
	float:left;
	width: 100%;
	display: block;
	background-color: #fff;
	margin-left: 0.00%;
}
.photo_left {
	background-color: #fff;
	text-align: left;
	float: left;
	padding-right: 100px;
	padding-left: 100px;
	padding-top: 0px;
	padding-bottom: 0px;
}
#header h1 {
	font-size: 4vw;
	font-family: Georgia;
	color: #000;
	font-style:italic;
	text-align:center;
	text-shadow:0vw 5px 5px #333;
}
#header p {
	font-size: 0.15vw;
}


.parent {
        position: relative;
        top: 0;
        left: 0;
      }
      .image1 {
        position: relative;
        top: 0;
        left: 0;
        border: 0px solid #000000;
      }
      .image2 {
        position: absolute;
        top: 7%;
        right: 3%;
        border: 0px solid #000000;
      }



/* End of Header/*



/* Navigation Menu */

.topnav {
  overflow: hidden;
  background-color: #06F;
}

.topnav a {
  float: left;
  display: block;
  color: #FFF;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover {
  background-color: #06F;
  color: #FFF;
}


.active {
  background-color: #06F;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: #06F;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #06F;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  color:#FFF;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #FFF;
  color: #06F;
}

.dropdown-content a:hover {
  background-color: #FFF;
  color: #06F;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}


function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}


/* End of Navigation Menu */

/* Begin Left Column */

#left {
	clear: none;
	float: left;
	margin-left: 1.00%;
	margin-right: 1.00%;
	width: 47.5%;
	display: block;
}
h4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	font-weight: bold;
	color: #000000;
	text-align: center;
	margin-bottom: 0.25em;
	margin-top: 1.00em;
}
.aligncenter	{
	text-align:center;
}



/* End Left Column */

/* Begin Right Column */


#right {
	clear: none;
	float: left;
	margin-left: 1.00%;
	margin-right: 1.00%;
	margin-top: 0.00%;
	padding-left: 1.00%;
	margin-bottom: 1%;
	width: 47.50%;
	display: block;
	background-color:#FFF;
	color:#000;
}
#right h4 {
	color:#FFF;
}
#right a:link    {
	color:yellow;
}
#right a:visited {
	color:white;
}


/* Right Column */

/* Content */

#top {
	clear: none;
	float: left;
	margin-left: 1.00%;
	margin-right: 1.00%;
	width: 95.0%;
	display: block;
}

#content {
	clear:both;
	padding-left:1%;
	padding-right: 1%;
	padding-top: 1%;
	display:block;
}

	

/* End of content */


/* footer */

/* Styles for Footer */
#footer {
	text-align: center;
	clear: both;
	margin-right: 0px;
	margin-left: 0px;
	padding-top: 0.5%;
	padding-bottom:0.5%;
	overflow: auto;
	background-color: #06F;
	color: #FFF;
}
#footer p {
	font-size: 0.8em;
	color: #FFF;
	margin: 0;
	padding:0;
}
#footer a {
	color: #FFF;
	text-decoration: underline;
}
#footer a:hover {
	color: #FFF;
	text-decoration: none;
}
#footer p {
	font-size: 0.8em;
	color: #FFF;
	margin: 0;
	padding:0;
}
#footer a {
	color: #FFF;
	text-decoration: underline;
}
#footer a:hover {
	color: #118;
	text-decoration: none;
}
 /* End of footer */
 
@media (max-width: 620px) {
    table {
        display: block;
    }
    tr {
        display: block;
    }
    td {
        display: inline-block;
        width: 32%;/* to have 3 columns */
    }
}
@media screen and (max-width: 620px) {
  /* For mobile phones: */
  #left, #right, #top, .content {
    width:100%;
  } 
}



/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
	@media only screen and (max-width: 620px)   {

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
			width:100%;
		}
	}
	

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    tr {
      margin: 0 0 1rem 0;
    }
      
    tr:nth-child(odd) {
      background: #fff;
    }
    
		td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 0%;
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 0%;
			padding-right: 10px;
			white-space: nowrap;
		}