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

body{
	background:#9ab7a3;
	color:#5e605f;
	font-family: "Berlin Sans FB", "Calibri", "Arial", "sans-serif";
	font-size:15pt;
	}
@media only screen and (min-width: 800px) {
#wrapper{
	position: relative;
	padding: 10px;
	background:#D8E9DD;
	margin-left:15%;
	margin-right:15%;
	font-size:15pt;
	height:100%;
}}
@media only screen and (max-width: 800px) {
#wrapper{
	position: relative;
	padding: 5px;
	background:#D8E9DD;
	margin-left:5%;
	margin-right:5%;
	height:100%;
}
}

	a{
		font-family: "Calibri", "Arial", "sans-serif";
		color:#FFFFFF;
	}
	a:visited{
		color:#FFFFFF;
	}
	a:hover{
		color:#74887A;
	}
	.intextlink{
		color:#5e605f;
	}
	#nav{
		background:#9ab7a3;
		padding-top:5px;
		padding-bottom:5px;
		text-align: center;
	}
	#socialmedia{
	text-align: center;	
	background:#9ab7a3;
	padding-top:5px;
	padding-bottom:5px;
	position: absolute, bottom;
	width: 100%;
	bottom:5px;
}
	
/*index*/
	#intro{
	background:#9ab7a3;
	color:#FFFFFF;
	}
	
	#news{
	color: #5e605f;
	text-align: left;
	padding-left:10%;
	padding-right:10%;
	border:2pt, #9ab7a3;
	}

	.accordion {
  	background-color: #eee;
 	 color: #5e605f;
  	cursor: pointer;
 	 padding: 18px;
 	 width: 100%;
 	 text-align: left;
 	 border: none;
 	 outline: none;
 	 transition: 0.4s;
	font-family: "Berlin Sans FB", "Calibri", "Arial", "sans-serif";
	font-size:15pt;
	}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}


	.thumbnail{
	width: 200px;
	float: left;
	margin-right:5%;
	margin-left:220px;
	margin-bottom:50px;
	margin-top:-40px;
	}
	
	.intro{
	text-align:top;
	margin-right: 10%;
	}

	#navigation{
	background:#D8E9DD;
	color: #9ab7a3;
	text-align: center;
	}
	
	#biblio{
	background:#D8E9DD;
	color: #5e605f;
	text-align: left;
	padding-left:10%;
	}
	
	.biblio{
	width: 300px;
	float: right;
	margin-left:5%;
	margin-right:5%;
	margin-top:50px;
	}

/*index over*/
/*writings*/
	#albumnav{
		text-align: center;
	}
	#booknav{
		color:#485e53;
	}
	a.booknav{
		color:#9ED8E9;
	}
	.cover{
		float: left;
		margin-right:5%;
	}
	#cbs{
		text-align: justify;
		border:#74887A;
		background:#B0C1B5;
		padding-right:20px;
	}
	#wd{
		text-align: justify;
		border:#74887A;
		background:#B0C1B5;
		padding-right:20px;	
	}
	.print{
		color:#EC4420;
	}
	#atom{
		text-align: justify;
		border:#74887A;
		background:#B0C1B5;
		padding-right:20px;	
	}
	#cover{
		padding-bottom:10%;
		text-align:top;
}
	.shortcover{
		float: left;
		margin-right:5%;
		margin-left:15%;
	}

	#cover{
		padding-bottom:10px;
		text-align:left;
	}
/*writingsover*/
/*films*/
	.vid{
		margin-bottom: 15px;
	}
/*filmsover*/
/*tabs*/
		/* Style the tab */
		div.tab {
			float: left;
			border: 1px solid #ccc;
			background-color: #9ab7a3;
			width:200px;
		}

		/* Style the buttons inside the tab */
		div.tab button {
			display: block;
			background-color: #525252;
			color: #CDCDCD;
			padding: 22px 16px;
			width: 100%;
			border: none;
			outline: none;
			text-align: left;
			cursor: pointer;
			transition: 0.3s;
		}

		/* Change background color of buttons on hover */
		div.tab button:hover {
			background-color: #9aa59d;
		}

		/* Create an active/current "tab button" class */
		div.tab button.active {
			background-color: #6d8273;
		}

		/* Style the tab content */
		.tabcontent {
			float: left;
			padding: 0px 12px;
			width: 70%;
			display: none;
		}


/*contact form*/
	#talk{
		padding: 10px;
		margin:auto;
		width:400px;
		border:#74887A;
		background:#B0C1B5;
		}
	.g-recaptcha{
		width:300px;
		margin:auto;
	}
	.contact{
		text-align: center;
		position: center;
		}
/*contact form over*/


/*about*/
	.pics{
		float:right;
		margin-left:5%;
		height: 300px;
		}
	.leftpics{
		float:left;
		padding-right: 25px;
		height: 300px;
		}
	.bio{
		text-align:top;
		margin-right: 10%;
		margin-left:10%;
		}
/*about over*/



#bows{
	padding-left: 8%;
	padding-right: 8%;
	text-align: justify;}
#excerpt{
	padding: 5%;
	text-align: justify;}
#bookish{
	text-align: center;
padding-top:5px;}




* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}