/* NEED TO DESIGN FOR MOBILE FIRST */
/* SET UP FOR MOBILE AND ADD MEDIA QUERIES TO */
/* FIX PROBLEMS OR REARRANGE AS SCREEN GETS LARGER */
/* FIX MIN-WIDTH BASED ON SCREEN SIZE SO NO */
/* HORIZONTAL SCROLL HAPPENS EXCEPT WHEN ZOOMING */


html {
	/* gray color that goes with SEER background #CBCECF */
	background: #000000 url("/ryanbeckauthor/images/SEERBackground.jpg") no-repeat center center fixed; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
	height: 100vh;
	max-width: 1500px;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-left: auto;
	margin-right: auto;
}

body {
	/* background-color: lavender;
	background-image: url("/ryanbeckauthor/images/Cover.PNG");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
	height: 100vh;
	*/
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	box-sizing: border-box;
	opacity: 0.98;
}

h1 {
	font-size: 1.25em;
	font-weight: 900;
}

.mainheader {
	border-bottom: 1px solid;
}

.tag {
	margin: 0.67em 0.67em 0.67em 1em;
}

h2 {
	font-size: 1.2em;
	font-weight: bold;
}

.worktitles {
	margin: 0 0.67em 0 0;
	color: #5BABE5;
}

.secondheader {
	margin: 0 0.67em 0.25em 0;
	color: #5BABE5;
}

.pheader {
	font-size: 1.15em;
	font-weight: bold;
	line-height: 1.2em;
	margin: 0.96em 0em 0.67em 0em;
	border-bottom: 1px solid;
}

@media screen and (min-width: 600px) {
	.pheader {
		border-bottom: none;
	}
}

p {
	font-size: 1.1em;
	line-height: 1.4em;
	margin: 0em 0em 1em 0em;
}

.workparagraph {
	color: #5BABE5;
}

.navwrapper {
	text-align: center;
}

@media screen and (min-width: 600px) {
	.navwrapper {
		margin: 0px 10%;
		text-align: left;
	}
}

.navul {
	display: inline-block;
  	list-style-type: none;
  	margin: 0px 0px;
  	padding: 0;
  	overflow: hidden;
	background-color: #5BABE5;
	width: 100%;
}


/* for desktop */
@media screen and (min-width: 600px) {
	.navul {
		display: inline-block;
  		list-style-type: none;
  		padding: 0;
  		overflow: hidden;
	}
}

.navli {
  	display: inline-block;
}

.nava {
  	display: block;
  	color: white;
  	text-align: center;
  	padding: 12px 4px;
  	text-decoration: none;
	font-size: 1em;
}

@media screen and (min-width: 400px) {
	.nava {
  		padding: 12px 8px;
		font-size: 1em;
	}
}

@media screen and (min-width: 475px) {
	.nava {
  		padding: 14px 16px;
		font-size: 1.2em;
	}
}

/* mobile */
.title {
	margin: 0;
}

/* desktop */
@media screen and (min-width: 600px) {
	.title {
		margin: 0 10%;
	}
}

.name {
	float: left;
	width: 50%;
	max-width: 350px;
}

/* for mobile */
.social {
	width: 25%;
	padding: 2% 0 0 0;
	float: right;
	max-width: 150px;
}

/* for desktop */
@media screen and (min-width: 600px) {
	.social {
		width: 20%;
		padding: 1em 0 0 0;
	}
}

.socblock {
	width: 100%;
	display: flex;
}

.soca {
  	display: block;
  	text-align: center;
  	padding: 0px 0px;
	margin: 0 10%;
  	text-decoration: none;
}

.icon {
	width: 100%;
	height: auto;
	vertical-align: middle;
}

.img1 { flex: 1.0084; }
.img2 { flex: 1.2255; }
.img3 { flex: 0.6371; }
.img4 { flex: 1.2663; }
.img5 { flex: 1.3988; }

/* styles list on homepage */
.lipostlinks {
	margin: 1em 0;
}

/* styles the list of links on home page */
.postlinks:link {
	color: #004F99;
	text-decoration: none;
	line-height: 1.4em;
	font-size: 1.1em;
}

.postlinks:hover {
	color: inherit;
	background-color: inherit;
}

/* styles the list of links on blog page */
.postlinksblog:link {
	color: #004F99;
	text-decoration: none;
	line-height: 1em;
	font-size: 1.1em;
}

.postlinksblog:hover {
	color: inherit;
	background-color: inherit;
}

/* styles blog header links */
.headerlink {
	color: #5BABE5;
}

.headerlink:link {
	text-decoration: none;
}

.headerlink:hover {
	color: inherit;
	background-color: inherit;
}

/* styles work titles header links */
.worklinks {
	color: inherit;
}

.worklinks:link {
	text-decoration: none;
}

.worklinks:hover {
	color: black;
	background-color: inherit;
}

li a:hover {
  background-color: #5396C6;
}

.left {
	background-color: inherit;
	color: black;
	margin: 0px 0px;
	padding: 0px 0px;
	float: left;
	width: 100%;
	word-wrap: break-word;
}

@media screen and (min-width: 600px) {
	.left {
		width: 70%;
	}
}

.aboutleft {
	background-color: inherit;
	color: black;
	margin: 0px 0px;
	padding: 0px 0px;
	float: left;
	width: 100%;
	word-wrap: break-word;
}

@media screen and (min-width: 600px) {
	.aboutleft {
		width: 60%;
	}
}

/* used for home page */
.homeright {
	float: left;
	background-color: inherit;
	color: black;
	padding: 0 1em 0 1em;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}

@media screen and (min-width: 600px) {
	.homeright {
		width: 28%;
		padding: 0;
		margin: 0;
		padding: 0 1% 0 1%;
	}
}

.aboutright {
	float: left;
	background-color: inherit;
	color: black;
	padding: 0 1em 0 1em;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}

@media screen and (min-width: 600px) {
	.aboutright {
		float: right;
		width: 38%;
		padding: 0;
		margin: 0;
		padding: 0 1% 0 1%;
	}
}

/* used for blogs and posts mobile */
.sidebar {
	float: right;
	background-color: salmon;
	color: black;
	margin: 0;
	padding: 0px 0px;
	overflow: hidden;
	width: 100%;
}

/* used for blogs and posts desktop */
@media screen and (min-width: 600px) {
	.sidebar {
		width: 30%;
		margin: 1em 0 0 0;
	}
}

.image {
	width: 12em;
	float: right;
	margin: 0 0 0 1.5em;
}

.headshot {
	width: 8em;
	float: left;
	margin: 0 1em 0 0;
}

@media screen and (min-width: 600px) {
	.headshot {
		width: 8em;
	}
}

@media screen and (min-width: 800px) {
	.headshot {
		width: 12em;
	}
}

@media screen and (max-width: 350px) {
	.image {
		width: 50%;
		margin: 0px 0px 0px 5%;
	}
}

@media screen and (max-width: 700px) and (min-width: 600px) {
	.image {
		width: 50%;
		margin: 0px 0px 0px 5%;
	}
}

.description {
	overflow: hidden;
	margin: 0px;
	padding: 0 1em 0 1em;
}

@media screen and (min-width: 600px) {
	.description {
		padding: 0 6% 0 1em;
	}
}

.container {
	background-color: white;
	color: black;
	margin: 0px 0px;
	padding: 5px 0px;
	overflow: hidden;
}

/* for desktop */
@media screen and (min-width: 600px) {
	.container {
		margin: 0px 10%;
	}
}

.posts {
	list-style: none;
	padding-left: 0;
}

.posts2 {
	list-style: none;
	padding-left: 0;
	margin: 0.5em 0em 0.5em 0em;
}

/* formatting for blog posts in lists and individual */
.post {
	background-color: white;
	word-wrap: break-word;
	margin: 1em 0.25em;
	padding: 1em;
	border-style: groove;
}

@media screen and (min-width: 600px) {
	.post {
		margin: 1em 1em;
	}
}

h1.blog {
	font-size: 1.5em;
	margin: 0;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsible:after {
	content: "+";
	float: right;
}

.active:after {
	content: "-";
	float: right;
}

/* 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, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 0 0 5%;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

.PageNavigation {
  	overflow: hidden;
	margin: 0 1em;
}

.PageNavigation a {
  	display: block;
  	width: 40%;
  	float: left;
  	margin: 1em 0;
	color: #5BABE5;
}

.PageNavigation .next {
  	text-align: right;
	float: right;
}

.PageNavigation a:visited {
	color: #5BABE5;
}

.books {
	float: left;
	width: 100%;
	padding: 0 1em 1em 1em;
	box-sizing: border-box;
}

@media screen and (min-width: 600px) {
	.books {
		width: 50%;
	}
}

.stories {
	float: left;
	width: 100%;
	padding: 0 1em 1em 1em;
	box-sizing: border-box;
}

@media screen and (min-width: 600px) {
	.stories {
		width: 50%;
	}
}

.workimage {
	width: 30%;
	float: left;
	margin: 0 0.67em 0 0;
}

.bookimage {
	width: 100%;
}

.shortblurb {
	float: left;
	width: 60%;
}

.mainlisting {
	float: left;
	width: 100%;
	padding: 1em 1em 1em 1em;
	box-sizing: border-box;
}

.listingimage {
	width: 50%;
	box-sizing: border-box;
	margin: auto;
	padding: 0 0 1em 0;
}

@media screen and (min-width: 600px) {
	.listingimage {
		float: left;
		width: 35%;
		margin: 0;
		padding: 0 2em 1em 0;
	}
}

.longblurb {
	display: none;
}

@media screen and (min-width: 600px) {
	.longblurb {
		display: block;
		float: left;
		width: 65%;
	}
}

.longblurb2 {
	display: block;
	float: left;
	width: 100%;
}

@media screen and (min-width: 600px) {
	.longblurb2 {
		display: none;
	}
}

.listingtitles {
	font-size: 2em;
	margin: 0 0.67em 0 0;
	color: #5BABE5;
}

.moreinfo {
	margin: 1em 1em 1em 0;
}

.copyrightcontainer {
	position: relative;
	min-height: 100vh;
	padding: 8px 0 3em 0;
	box-sizing: border-box;
}

.copyrightspacer {
	margin: 0;
}

.copyright {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	color: #DEE3E7;
	text-align: center;
}

.embedvideodiv {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;	
}

.embediframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

figure {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

figcaption {
	text-align: center;	
}

.infinite-spinner {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background-color: #333;
  margin: 60px auto;
  
  -webkit-animation: scaleout 1.0s infinite ease-in-out;
  animation: scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes scaleout {
  0% { -webkit-transform: scale(0.0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes scaleout {
  0% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}