@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&display=swap');


* {
  box-sizing: border-box;
}
	#banner {
	width:100%;
	height: 130px;
	background-image: url(../images/banner3.jpg); /*BANNER was banner3.png, also change angencyadd.css #banner height back to 175px*/
	background-repeat: no-repeat;
}
	.content {
  max-width: 1000px;
  margin: auto;
  background: white;
/*  padding: 10px;*/
}
/* Style the body */
body {
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
  margin: 0;
	background-color: #b7cfd9;
	    line-height: 20px;
    color: #333;
}
figcaption{
	font-style: italic;
}
		.wte-box{
			background-color: white;
			margin: 2px;
			padding: 12px;
			border: 1px grey solid;
}
.bluebox{
	background-color: #4090C3;
	border:  1px dotted solid;
	color: whitesmoke;
	padding: 10px;
}
.tagline{
	color: #e60000;
	font-style: italic;
	text-align: center;
	font-size: .95em;
}
.title{
	font-family: 'Marcellus SC', serif;
	text-align: center;
}
/* Header/logo Title */
.header {
/*  padding: 60px;*/
  text-align: center;
/*  background: #1abc9c;*/
  color: white;
}

/* Style the top navigation bar */
.navbar {
  display: flex;
	 display: -ms-flexbox;
  background-color: #333;
}

/* Style the navigation bar links */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

	
/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Change color on live page */
.navbar a.livepage {
  background-color: #b7cfd9;
  color: black;
}

/* Column container */
.row {  
  display: flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
}

/*sidebar right column*/
.side2 {
  flex: 30%;
  -ms-flex: 30%;
/*  background-color: #f1f1f1;*/
  padding: 20px;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  -ms-flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}
	.responsive {
  width: 100%;
  height: 100%;
/*	height: 80%;*/
}
	.captioning{
		font-size: .9em;
		color: #3B4551;
		font-style: italic;
/*		padding-left: 15%;*/
	}
/* Main column */
.main {
  flex: 70%;
  -ms-flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
.flex-item-center {
  background-color: blue;
  padding: 10px;
  flex: 100%;
  -ms-flex: 100%;
}

/* Footer */

#footer_left ul li {
		display: inline-block;
		padding: 10px;
		}
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
	flex: 0 1 auto;
}
	.centerimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
	@media screen and (min-width:1025px)
	{
		.smbannerimg{
			display: none;
		}
		.test{
			display: none;
		}
			.mainwebsitelogo{
		position: absolute;
		right: 10px;
/*		top: 40px;*/
				top: -90px;
	}
		.website-name{
		display: none;
		}
	}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 1024px){
		.website-name {
			position: relative;
/*			top: 105px;*/
			left: 2px;
/*			object-fit: contain;*/
		}
		.bluecontainer {
/*			width: 40%;*/
			display: none;
		}
		.bluecontainer2{
			display: block;
		}
			.bannerimg {
		display: none;
	}
		.smbannerimg {
			display: inline-block;	
		}
	.mainwebsitelogo{
		position: absolute;
/*		left: 200px;*/
/*		top: 40px;*/
		top: 40px;
		left: 40px;
	}
	
	#banner {
	width: 100%;
	height: 130px;
	background-image: url(../images/content_bkground.png); /*BANNER was banner3.png, also change angencyadd.css #banner height back to 175px*/
	background-repeat: no-repeat;
		background-size: cover;
/*	object-fit: cover;*/
}	
	#banner2 {
	width: 100%;
	height: 130px;
	background-image: url(../images/content_bkground.png); /*BANNER was banner3.png, also change angencyadd.css #banner height back to 175px*/
	background-repeat: no-repeat;
		background-size: cover;
/*	object-fit: cover;*/
}
	}
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
    -ms-flex-direction: column;
  }

	/*.bluecontainer{
		display: none;
	}*/

}
	.container {
		position: relative;
	}
.btn-bio{
	display: block;
    padding: 6px 25px 6px 15px;
/*    font-weight: bold;*/
    font-size: 16px;
    background: #4090C3;
    border: 1px solid grey;
			color: white;
/*    float: left;*/
			margin: auto;
			box-shadow: 2px 2px #888888;
		}
.bluecontainer {
  		position: absolute;
  		bottom: 35px;
  		left: 15px;
		width: 35%;
		line-height: 1.5em;
		font-size: .9em;
}
	.bluecontainer2 {
			display: none;
		}
.initial {
  font-size: 1.6em;
  font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}
		.slavery-icon a{
	display: block;
	width: 114px;
	height: 99px;
	background:url(../images/slavery-icon.png) no-repeat;
/*	float:left;*/
	margin: auto;
}
.slavery-icon a:hover {
	background-position: 0 -99px;
}