/* Applies across all pages */

/* Base Elements */

html {
	font-family:'Cormorant',serif;
	cursor: crosshair;
}

@media (min-width: 1601px) {
	html {
		font-size:17px;
		size:17px;
	}
}

@media (max-width: 1600px) and (min-width: 1301px) {
	html {
		font-size:16px;
		size:16px;
	}
}

@media (max-width: 1300px) and (min-width: 1001px) {
	html {
		font-size:15px;
		size:15px;
	}
}

@media (max-width: 1000px) and (min-width: 801px) {
	html {
		font-size:14px;
		size:14px;
	}
}

@media (max-width: 800px) and (min-width: 601px) {
	html {
		font-size:13px;
		size:13px;
	}
}

@media (max-width: 600px) {
	html {
		font-size:12px;
		size:12px;
	}
}

body {
	margin:0;
	border:0;
	padding:0;
	background-color: rgba(255,255,255,0);
/*	background-color: rgba(112,181,150,1); /* copper oxide */*/
	color:rgba(0,0,0,1);
	animation-name: fadeIn;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-duration: 2s;
}

/* animation for fading in opacity */
@-webkit-keyframes fadeIn {
      0% {opacity:0;}
    100% {opacity:1;}
}

@keyframes fadeIn {
      0% {opacity:0;}
    100% {opacity:1;}
}

@-webkit-keyframes fadeOut {
      0% {opacity:1;}
    100% {opacity:0;}
}

@keyframes fadeOut {
      0% {opacity:1;}
    100% {opacity:0;}
}

  p
, h1
, h2
, h3
, h4
, h5
, h6
, ol
, ul
, blockquote
, table {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	border:0;
	padding:0;
	color: rgba(0,0,0,1);
	line-height: 130%;
}

  p::selection
, h1::selection
, h2::selection
, h3::selection
, h4::selection
, h5::selection
, h6::selection
, ol::selection
, ul::selection
, blockquote::selection
, table::selection
, a::selection
, td::selection
, li::selection
, em::selection
, div::selection
, span::selection
, br::selection {
	color: white;
	background-color: rgba(0,0,200,1);
	/*background-color: rgba(112,181,150,1); /* copper oxide */*/
}

  iframe::selection
, img::selection {
	background-color: rgba(255,255,255,0);
	box-shadow: 0px 0px 15px 5px rgba(0,0,200,1);
	/*box-shadow: 0px 0px 15px 5px rgba(112,181,150,1); /* copper oxide */*/
}

/* Specific HTML Tags */
/* Links */

a {
	text-decoration: underline;
	text-decoration-color: rgba(0,0,200,1);
	text-decoration-thickness: 0.1rem;
	text-decoration-style: double;
	color: black;
	transition: text-decoration-thickness 0.5s ease-out;
}

a:hover {
	text-decoration: underline;
	text-decoration-color: rgba(0,0,200,1);
	text-decoration-thickness: 0.25rem;
	color: black;
}

a:active {
	text-decoration: underline;
	text-decoration-color: rgba(0,0,200,1);
	text-decoration-thickness: 0.25rem;
	color: rgba(0,0,200,1);
}

  .navigation a
, .navigation a:hover
, .navigation a:active
, .footer a
, .footer a:hover
, .footer a:active {
	color:black;
	text-decoration: none;
	transition: 0.5s ease-out;
}

  .navigation a:hover
, .navigation a:active
, .footer a:hover
, .footer a:active {
	transform: scale(1.033);
	color: rgba(0,0,200,1);
}

p {

}

ul {
	list-style: none;
}
li {
	position:relative;
	margin-left: 2rem;
	text-indent: -2rem;
	padding-left: 2rem;
}
li:before {
	position:absolute;
	content:"+";
	left: 0.66rem;
}

table, blockquote, ul, li, .sidenote, .postscript p, .postscript ul, .list {
	line-height:125%;
}

@media screen and (min-width: 1600px) {
	p {
		font-size: 1.35rem;
	}
	table, blockquote, ul, li, .sidenote, .postscript p, .postscript ul, .list  {
		font-size: 1.2rem;
	}
	  .postscript h3
	, .footer-links a {
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 1599px) and (min-width: 1300px) {
	p {
		font-size: 1.4rem;
	}
	table, blockquote, ul, li, .sidenote, .postscript p, .postscript ul, .list {
		font-size: 1.25rem;
	}
	  .postscript h3
	, .footer-links a {
		font-size: 1.6rem;
	}
}

@media screen and (max-width: 1299px) and (min-width: 1000px) {
	p {
		font-size: 1.5rem;
	}
	table, blockquote, ul, li, .sidenote, .postscript p, .postscript ul, .list {
		font-size: 1.3rem;
	}
	  .postscript h3
	, .footer-links a {
		font-size: 1.7rem;
	}
}

@media screen and (max-width: 999px) and (min-width: 600px) {
	p {
		font-size: 1.6rem;
	}
	table, blockquote, ul, li, .sidenote, .postscript p, .postscript ul, .list {
		font-size: 1.35rem;
	}
	  .postscript h3
	, .footer-links a {
		font-size: 1.8rem;
	}
}

@media screen and (max-width: 599px) {
	p {
		font-size: 1.7rem;
		text-align:left;
	}
	table, blockquote, ul, li, .sidenote, .postscript p, .postscript ul, .list {
		font-size: 1.4rem;
	}
	  .postscript h3
	, .footer-links a {
		font-size: 1.9rem;
	}
}

tr.header {
	font-weight: bold;
	font-size: 120%;
	text-align: center;
}

td {
	padding:1rem;
	vertical-align: top;
}

.double-negative {
	font-size:120%;
	font-family:'Argento Bold';
	text-transform:uppercase;
	color: rgba(245,35,35,1);
}


/* Spacing and Framing */

.page-underlay {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-size: 50% 50%;
	z-index:-1;
}

.page-frame {
	position: relative;
/*	margin:1rem;
	padding:1rem;*/
	background-color:rgba(255,255,255,1); 
/*	background-color:rgba(255,255,250,1); /* off white with splash of yellow */*/
}

/* Header / Navigation */

.navigation {
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
	display: flex;
	flex-wrap:nowrap;
	/* Row */
	flex-direction:row;
	justify-content: flex-start;
	/* Column */
/*	flex-direction:column;
	justify-content: center;*/
	align-items:center;
	align-content:center;
	text-align:center;
	padding-top:1rem;
	padding-bottom:1rem;
	border-bottom-style:solid;
	border-bottom-width:0.1rem;
	border-bottom-color:black;
	background-color:white;
}

.navigation-spacer {
	width:100%;
	height:0px;
}

.navigation.fixed {
	position: fixed;
	top:0;
	left:0;
	width:100%;
	z-index:1;
}

.navigation .initials {
	height:3rem;
	margin-left:2rem;
	margin-right:2rem;
}

.navigation .initials img {
	height: 3rem;	
}

.navigation .project {
	font-family:'Argento Bold',serif;
	text-transform:uppercase;
	font-size:3rem;
	margin-left:2rem;
	margin-right:2rem;
	color:black;
}

.navigation .tagline {
	font-family:'Josefin Sans',serif;
	text-transform:lowercase;
	font-size:1rem;
}

.navigation .tagline {
	border-top-style:solid;
	border-top-color:black;
	border-top-width:0.1rem;
	padding-top:0.5rem;
}

.navigation .links {
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:center;
	align-content:center;
	text-align:center;
	padding-right:3rem;
	line-height:200%;
	font-family:'Argento';
	/* Column */
/*	padding-top:0rem;
	padding-bottom:1rem;
	border-top-style:solid;
	border-top-color:black;
	border-top-width:0.1rem;
	padding-top:0.5rem;*/
}

.navigation .link {
	text-transform:capitalize;
	font-size:1.5rem;
	margin-left:1rem;
	margin-right:1rem;
}

.navigation .link.current a {
	color: rgba(0,0,200,1);
}

.navigation .link.first {

}

.navigation .link.last {

}

.link-divider {
	color: rgba(245,35,35,1);
	size:1rem;
}

  .menu
, .menu img {
	height: 4rem;
}

.menu {
	position: fixed;
	top: 0.5rem;
	right: 1rem;
}

.menu img {
	border-radius:50%;
	background-color:white;
	box-shadow: 0px 0px 8px 8px rgba(255,255,255,0.9);
	animation-name: twitch;
	animation-play-state:paused;
	animation-duration:1s;
	animation-iteration-count:infinite;
	animation-fill-mode: backwards;
}

.menu img:hover {
	animation-play-state:running;
}

.navigation.fixed .menu img {
	transform: rotate(-8deg);
	transition: 0.2s;
	animation:none;
}

/* animation for fading in opacity */
@-webkit-keyframes twitch {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(4deg);
    }
    30% {
    	transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes twitch {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(4deg);
    }
    30% {
    	transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}



/* Body */

.main {
	width:100%;
	margin-top:1rem;
	margin-bottom:1rem;
	padding-top:2rem;
}

/* Footer */

.footer-spacer-in-flow {
	font-size:2.5rem;     /* 2x of 1.5rem */
	margin-top:1rem;    /* 2x of 1rem */
	margin-bottom:1rem; /* 2x of 1.5rem */
	color:rgba(0,0,0,0);
	visibility: hidden;
}

.footer {
/*	position:absolute;
    bottom:0;*/
    width: calc(100% - 2rem); /* 2rem accounts for the margin of page-frame defined in core-styles.css */
    margin-top:2rem;
    margin-bottom:2rem;
    font-family:'Reem Kufi';
	text-align:center;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
	display: flex;
	flex-direction:column;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
	align-content:center;
	text-align:center;
	z-index:1;
}

.footer > * {
	margin-top:0.5rem;
	margin-bottom:0.5rem;
}

.divider {
    font-family:'Reem Kufi';
    font-size:1.25rem;
	text-align:center;
}

.footer-links {
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
	display: flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
	align-content:center;
	text-align:center;
}

.footer-links a {
	margin-left:1rem;
	margin-right:1rem;
}

/* Fonts */

/* Faux Peignot */

@font-face {
    font-family: 'Faux Peignot - Medium';
    font-style: normal;
    font-weight: normal;
    src: local('MontereyMediumFLF'), url('f/MontereyMediumFLF.woff') format('woff');
}

@font-face {
    font-family: 'Faux Peignot';
    font-style: normal;
    font-weight: normal;
    src: local('MontereyFLF Regular'), url('f/MontereyFLF.woff') format('woff');
    }
    

@font-face {
    font-family: 'Faux Peignot - Medium Italic';
    font-style: normal;
    font-weight: normal;
    src: local('MontereyFLF Medium Italic'), url('f/MontereyFLF-Italic.woff') format('woff');
    }
    

@font-face {
    font-family: 'Faux Peignot - Bold';
    font-style: normal;
    font-weight: normal;
    src: local('MontereyFLF Bold'), url('f/MontereyFLF-Bold.woff') format('woff');
    }
    

@font-face {
    font-family: 'Faux Peignot - Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('MontereyFLF Bold Italic'), url('f/MontereyFLF-BoldItalic.woff') format('woff');
    }
    
/* Argento */

@font-face {
    font-family: 'Argento';
    font-style: normal;
    font-weight: normal;
    src: local('Optima'), url('f/OPTIMA.woff') format('woff');
}
    

@font-face {
    font-family: 'Argento Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Optima Italic'), url('f/Optima_Italic.woff') format('woff');
}
    

@font-face {
    font-family: 'Argento Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Optima Medium'), url('f/Optima Medium.woff') format('woff');
    }
    

@font-face {
    font-family: 'Argento Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Optima Bold'), url('f/OPTIMA_B.woff') format('woff');
}


/* Unique to prose */

.prose {
	/* shell */
}

.prose > * {
	/* reference by children for margin so can be overriden */
	text-align:justify;
}

@media screen and (min-width: 1600px) {
	  .titles > *
	, .authors > *  
	, .prose-body > * 
	, .postscript > *
	, .prose-body blockquote.research-interests {
		margin-left:30%;
		margin-right:30%;
		width: 40%;
	}
	  .prose-body table
	, .prose .oversized {
		margin-left: 23%;
		margin-right: 23%;
		width: 54%;
	}
	.prose-body blockquote {
		margin-left: 32%;
		margin-right: 32%;
		width: 36%;
	}
	.prose-body .page-title {
		font-size:3rem;
	}
}

@media screen and (max-width: 1599px) and (min-width: 1400px) {
	  .titles > *
	, .authors > *  
	, .prose-body > * 
	, .postscript > *
	, .prose-body blockquote.research-interests {
		margin-left:25%;
		margin-right:25%;
		width:50%;
	}
	  .prose-body table
	, .prose .oversized {
		margin-left: 20%;
		margin-right: 20%;
		width: 60%;
	}
	  .prose-body blockquote {
		margin-left: 28%;
		margin-right: 28%;
		width: 44%;
	}
	.prose-body .page-title {
		font-size:4rem;
	}
}

@media screen and (max-width: 1399px) and (min-width: 1200px) {
	  .titles > *
	, .authors > *  
	, .prose-body > * 
	, .postscript > *
	, .prose-body blockquote.research-interests {
		margin-left:22.5%;
		margin-right:22.5%;
		width:55%;
	}
	  .prose-body table
	, .prose .oversized {
		margin-left: 17%;
		margin-right: 17%;
		width: 66%;
	}
	.prose-body blockquote {
		margin-left: 26%;
		margin-right: 26%;
		width: 48%;
	}
	.prose-body .page-title {
		font-size:3.5rem;
	}
}

@media screen and (max-width: 1199px) and (min-width: 1000px) {
	  .titles > *
	, .authors > *  
	, .prose-body > * 
	, .postscript > *
	, .prose-body blockquote.research-interests {
		margin-left:20%;
		margin-right:20%;
		width:60%;
	}
	  .prose-body table
	, .prose .oversized {
		margin-left: 9%;
		margin-right: 9%;
		width: 82%;
	}
	.prose-body blockquote {
		margin-left: 24%;
		margin-right: 24%;
		width: 52%;
	}
	.prose-body .page-title {
		font-size:3rem;
	}
}

@media screen and (max-width: 999px) and (min-width: 800px) {
	  .titles > *
	, .authors > *  
	, .prose-body > * 
	, .postscript > *
	, .prose-body blockquote.research-interests {
		margin-left:15%;
		margin-right:15%;
		width: 70%;
	}
	  .prose-body table
	, .prose .oversized {
		margin-left: 5%;
		margin-right: 5%;
		width: 90%;
	}
	  .prose-body blockquote
	, .prose-body .page-title {
		margin-left: 20%;
		margin-right: 20%;
		width: 60%;
	}
	.prose-body .page-title {
		font-size:2.5rem;
	}
}

@media screen and (max-width: 799px) and (min-width: 600px) {
	  .titles > *
	, .authors > *  
	, .prose-body > * 
	, .postscript > *
	, .prose-body blockquote.research-interests {
		margin-left:10%;
		margin-right:10%;
		width: 80%;
	}
	  .prose-body table
	, .prose .oversized {
		margin-left: 3%;
		margin-right: 3%;
		width:94%;
	}
	  .prose-body blockquote
	, .prose-body .page-title {
		margin-left: 15%;
		margin-right: 15%;
		width: 70%;
	}
	.prose-body .page-title {
		font-size:2rem;
	}
}

@media screen and (max-width: 599px) and (min-width: 400px) {
	  .titles > *
	, .authors > *  
	, .prose-body > * 
	, .postscript > *
	, .prose-body blockquote.research-interests {
		margin-left: 5%;
		margin-right: 5%;
		width:90%;
	}
	  .prose-body table
	, .prose .oversized {
		margin-left: 2%;
		margin-right: 2%;
		width:96%;
	}
	  .prose-body blockquote
	, .prose-body .page-title {
		margin-left: 10%;
		margin-right: 10%;
		width: 80%;
	}
	.prose-body .page-title {
		font-size:1.75rem;
	}
}

@media screen and (max-width: 399px) {
	  .titles > *
	, .authors > *  
	, .prose-body > * 
	, .postscript > *
	, .prose-body blockquote.research-interests {
		margin-left:3%;
		margin-right:3%;
		width:94%;
	}
	  .prose-body table
	, .prose .oversized {
		margin-left: 1%;
		margin-right: 1%;
		width: 98%;
	}
	  .prose-body blockquote
	, .prose-body .page-title {
		margin-left: 6%;
		margin-right: 6%;
		width: 88%;
	}
	.prose-body .page-title {
		font-size:1.5rem;
	}
}


.section {
	margin-top: 5rem;
	margin-bottom: 5rem;
}

.prose-body .page-title {
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
	display: flex;
	flex-wrap:nowrap;
	flex-direction:row;
	justify-content: space-between;
	align-items:center;
	align-content:center;
	text-align:center;
	font-family: 'Argento Bold';
	color: rgba(0,0,200,1);
}

.prose-body .page-title .letter {
	display: inline-block;
}

.prose-body {
	margin-bottom:3rem;
}

.postscript {
	margin-bottom:3rem;
}

.postscript > * {
	margin-top: 2rem;
	margin-bottom:2rem;
}

  .prose h1
, .prose h2
, .prose h3 {
	font-family:'Argento';
	color: rgba(0,0,200,1);
}

.prose h2 {
	text-transform: uppercase;
	letter-spacing: 4px;
	font-size:1.5rem;
}

.prose h1.title {
	font-size:2.33rem;
	font-weight: normal;
	text-indent: -2.33rem;
	padding-left: 2.33rem;
	text-align: left;
}

.prose h2.subtitle {
	font-style:italic;
	margin-top: -0.5rem;
	font-size: 1.25rem;
	text-indent: -1.25rem;
	padding-left: 3.58rem;
}

  .prose h1.title    span
, .prose h2.subtitle span {
	white-space: nowrap;
}

  .prose-body table
, .prose-body blockquote {
	margin-top:2rem;
	margin-bottom:2rem;
}



/* Images & other inline objects */

.prose .float-left {
	float:left;
}

.prose .float-right {
	float:right;
}

.prose .float-left,
.prose .float-right {
	border-width: 0;
	border-style: solid;
	border-color: black;
}

/* Does the image float or takeover width?
     * > 800px - float
     * < 800px - takeover */

@media screen and (min-width:800px) {
	.prose .float-left,
	.prose .float-right {
		padding-top: 0px;
		padding-bottom: 0px;
		margin-bottom: 1rem;
		margin-top: 1rem;

	}
	.prose .float-left {
		border-right-width: 0.05rem;
	}
	.prose .float-right {
		border-left-width: 0.05rem;
	}
}
@media screen and (max-width:800px)  {
	  .prose .float-right
	, .prose .float-left {
		width: 100%;
		margin-bottom: 2rem;
		margin-top: 2rem;
		padding-top: 2rem;
		padding-bottom: 2rem;
		border-top-width: 0.1rem;
		border-bottom-width: 0.1rem;
	}
}

/* If takeover, how wide should it stretch? */

@media screen and (min-width:1600px) {
	.prose .float-left {
		width: 100%;
		padding-right: 5%;
		margin-right: -68.5%;
			-webkit-transform:translateX(-70%);
			-ms-transform:translateX(-70%);
		transform: translateX(-70%);
	}
	.prose .float-right {
		width: 100%;
		padding-left: 5%;
		margin-left: -68.5%;
			-webkit-transform:translateX(70%);
			-ms-transform:translateX(70%);      
		transform: translateX(70%);
	}
			/* sidenote completely in margin */
			.prose .float-left.sidenote {
				width: 50%;
					-webkit-transform:translateX(-110%);
					-ms-transform:translateX(-110%);      
				transform: translateX(-110%);
			}
			.prose .float-right.sidenote {
				width: 50%;
					-webkit-transform:translateX(110%);
					-ms-transform:translateX(110%);      
				transform: translateX(110%);
			}
}

@media screen and (max-width:1599px) and (min-width:1300px) {
	.prose .float-left {
		width: 80%;
    padding-left: 5%;
    padding-right: 5%;
    margin-right: -35.5%;
    	-webkit-transform: translateX(-45%);
    	-ms-transform: translateX(-45%);
    transform: translateX(-45%);
	}
	.prose .float-right {
		width: 80%;
    padding-left: 5%;
    padding-right: 5%;
		margin-left: -35.5%;
			-webkit-transform:translateX(45%);
			-ms-transform:translateX(45%);      
		transform: translateX(45%);
	}
}
		/* sidenote completely in margin */
		@media screen and (max-width:1599px) and (min-width:1400px) {
			.prose .float-left.sidenote {
				width: 35%;
				margin-right: -53%;
					-webkit-transform:translateX(-113%);
					-ms-transform:translateX(-113%);      
				transform: translateX(-113%);
			}
			.prose .float-right.sidenote {
				width: 35%;
				margin-left: -53%;
					-webkit-transform:translateX(113%);
					-ms-transform:translateX(113%);      
				transform: translateX(113%);
			}
		}


@media screen and (max-width:1299px) and (min-width:1000px) {
	.prose .float-left {
		width: 80%;
		padding-right: 5%;
		padding-left:5%;
		margin-right: -31%;
			-webkit-transform:translateX(-40%);
			-ms-transform:translateX(-40%);
		transform: translateX(-40%);
	}
	.prose .float-right {
		width: 80%;
		padding-left: 5%;
		padding-right:5%;
		margin-left: -31%;
			-webkit-transform:translateX(40%);
			-ms-transform:translateX(40%);      
		transform: translateX(40%);
	}
}

@media screen and (max-width:999px) and (min-width:800px) {
	.prose .float-left {
		width: 60%;
		padding-right: 5%;
		margin-right: -15%;
			-webkit-transform:translateX(-30%);
			-ms-transform:translateX(-30%);
		transform: translateX(-30%);
	}
	.prose .float-right {
		width: 60%;
		padding-left: 5%;
		margin-left: -15%;
			-webkit-transform:translateX(30%);
			-ms-transform:translateX(30%);      
		transform: translateX(30%);
	}
}

.prose .full-column {
	float:left;
	margin-top: 1rem;
	margin-bottom: 1rem;
	border: 0;
	border-top-width: 0.1rem;
	border-bottom-width: 0.1rem;
	border-style: solid;
	border-color: black;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.prose .oversized {
	display: block;
	margin-bottom: 2rem;
	margin-top: 2rem;
	border-width: 0;
	border-style: solid;
	border-color: black;
}


.meme {
	font-family: Impact;
	text-transform: uppercase;
	font-size: 80%;
}


.prose .sidenote-attribution {
	color: rgba(0,0,200,1);
	vertical-align: super;
	font-size: 55%;
	margin-left: 0.2em;
}

.prose .sidenote .attribution {
	color: rgba(0,0,200,1);
    font-size: 200%;
    float: left;
    margin-top: 0.2em;
    margin-right: 0.5em;
    margin-bottom: 0.2em;
}

.spacer {
	display: inline-block;
}

blockquote.lyrics {
	font-style: italic;
}

footer {
	text-align:center;
	margin-top:1rem;
	padding-bottom:1rem; /* convinced body to align with footer ; otherwise extra whitespace*/
}

/* Footer */

/* Moth */

.moth-box {
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
	display: flex;
	flex-wrap:nowrap;
	flex-direction:row;
	justify-content: center;
	align-items:flex-start;
	align-content:center;
	text-align:center;	
}

.moth-box span {
	width:20rem;
	font-family:'Argento';
	text-transform:uppercase;
	color: rgba(0,0,200,1);
	font-size:1.33rem;
	margin-top:2.5rem;
}

.moth-box .double {
	text-align:right;
	margin-right:-1rem;
}

.moth-box .negative {
	text-align:left;
	margin-left:-1rem;
}

.moth {
	position: relative;
	display: inline-block;
	width:8rem;
}

.moth::before {
	position:absolute;
	left:0;
	content:"NEGATIVE";
}

.moth::after {
	position:absolute;
	right:0;
	content:"DOUBLE";
}

.copyright {
	margin-top:0.25rem;
	margin-bottom:0.5rem;
	color: rgba(0,0,200,1);
}

.copyright-spacer {
	opacity:0;
}


/* Ex Libris*/

.ex-libris {
	position:fixed;
	top:50%;
	left:50%;
	width:0%;
	height:0%;	
	background-color:rgba(255,255,255,0.9);
	box-shadow: 0rem 0rem 1rem 5rem rgba(0,0,255,0.3);
	flex-wrap:nowrap;
	flex-direction:column;
	justify-content: center;
	align-items:center;
	align-content:center;
	text-align:center;
	opacity:0;
	z-index:1;
	transition:opacity 2s;
}

.ex-libris.active {
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
	display: flex;
	opacity:1;
	top:2%;
	left:2%;
	width:96%;
	height:96%;
}

  .ex-libris.completed 
, .ex-libris.active.completed {
	opacity:0;
}

.ex-libris .back {
	display:none;
	position:fixed;
	top: 2%; /* accounts for whitespace in vertical but not horizontal */
	left: 4%;
	font-size:4rem;
	width:4rem;
	color:rgba(0,0,200,1);
	transition: 1s;
}

.ex-libris .back:hover {
	width: 4.5rem;
}

.exlibris .back img {
	width:100%;
}

.ex-libris.active .back {
	display:inline-block;
}

.ex-libris .inner {
	position:relative;
}

.ex-libris .inner img {
	width:100%;
	height:100%;
}

.ex-libris .inner form {
	position: absolute;
    top: 70%;
    left: 28%;
    width: 35%;
    height: 3%;
}

#email {
	font-family:'Cormorant',serif;
	color: blue;
	font-size:1.5rem;
	position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    border-style:none;
    background-color:rgba(255,255,255,0);
    text-align:center;
}

#email::placeholder {
	color:rgba(0,0,255,0.5);
}

#submit {
	display:none;
	position: absolute;    
    top: 50%;
    left: 90%;
    width: 10%;
    height: 100%;
	background-color: rgba(255,255,255,0);
    border: 0;
}


input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
    box-shadow: 0px 0px 20px 10px rgba(0,0,200,1)
              , 0px 0px  1px  1px rgba(0,0,200,1) inset;
}


@media screen and (min-width: 1601px) {
	.ex-libris .inner {
		width:40%;
	}
	.ex-libris .inner form {
		width:38%;
	}
	.ex-libris #email {
	    padding-top:1rem;
	    padding-bottom:1rem;
	    padding-left:2rem;
	    padding-right:2rem;
	}
}

@media screen and (max-width: 1600px) and (min-width: 1301px) {
	.ex-libris .inner {
		width:50%;
	}
	.ex-libris .inner form {
		width:36%;
	}
	.ex-libris #email {
	    padding-top:1rem;
	    padding-bottom:1rem;
	    padding-left:2rem;
	    padding-right:2rem;
	}
}

@media screen and (max-width: 1300px) and (min-width: 1001px) {
	.ex-libris .inner {
		width:65%;
	}
	.ex-libris .inner form {
		width:39%;
	}
	.ex-libris #email {
	    padding-top:0.9rem;
	    padding-bottom:0.9rem;
	    padding-left:1.33rem;
	    padding-right:1.33rem;
	}
}

@media screen and (max-width: 1000px) and (min-width: 801px) {
	.ex-libris .inner {
		width:70%;
	}
	.ex-libris .inner form {
		top:69.5%;
		left:28.5%;
		width:38%;
	}
	.ex-libris #email {
	    padding-top:0.8rem;
	    padding-bottom:0.8rem;
	    padding-left:1rem;
	    padding-right:1rem;
	}
}

@media screen and (max-width: 800px) and (min-width: 601px) {
	.ex-libris .inner {
		width:80%;
	}
	.ex-libris .inner form {
		top:69%;
		width:40%;
	}
	.ex-libris #email {
	    padding-top:0.7rem;
	    padding-bottom:0.7rem;
	    padding-left:0.8rem;
	    padding-right:0.8rem;
	}
}

@media screen and (max-width: 600px) and (min-width: 501px) {
	.ex-libris .inner {
		width:85%;
	}
	.ex-libris .inner form {
		top:70%;
		width:42%;
	}
	.ex-libris #email {
	    padding-top:0.6rem;
	    padding-bottom:0.6rem;
	    padding-left:0.6rem;
	    padding-right:0.6rem;
	}
}

@media screen and (max-width: 500px) and (min-width: 401px) {
	.ex-libris .inner {
		width:90%;
	}
	.ex-libris .inner form {
	    top: 70%;
	    width: 41%;
	}
	.ex-libris #email {
	    padding-top:0.5rem;
	    padding-bottom:0.5rem;
	    padding-left:0.5rem;
	    padding-right:0.5rem;
	}
}

@media screen and (max-width: 400px)  {
	.ex-libris .inner {
		width:95%;
	}
	.ex-libris .inner form {
		top: 71%;
	    width: 42%;
	}
	.ex-libris #email {
		font-size: 1rem;
	}
}



/* BOOK PAGES */

/* Applies to all elements of book pages */

.page_book {

}

.page_book .columns {
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
	display: flex;
	flex-wrap:nowrap;
	align-items:start;
	align-content:center;
}

.page_book .columns > * {
	width:45%;
	list-style: none;
}

.page_book .columns .column.left {
	margin-right:5%;
}

.page_book .columns .column.right {
	margin-left:5%;
}

/* Handling small mobile widths by collapsing two columns to one*/
@media screen and (max-width: 600px) {
	.page_book .columns {
		flex-direction:column;
	}

	.page_book .columns .column.right 
, .page_book .columns .column.left {
		width:100%;
		margin-right:0%;
		margin-left:0%;
	}
}

.page_book .columns .li {
	position:relative;
	margin-left: 2rem;
	text-indent: -2rem;
	padding-left: 2rem;
	text-align:left;
}
.page_book .columns .li:before {
	position:absolute;
	content:"+";
	left: 0.66rem;
}


/* Applies to all sections of book page */

.page_book .header {
	margin-top:1rem;
	margin-bottom:3rem;
}

.page_book .header > * {
	margin-top:1rem;
	margin-bottom:1rem;
	text-align:center;
}

@media screen and (min-width: 1600px) {
	.page_book .header > * {
		margin-left: 25%;
		margin-right: 25%;
	}
}

@media screen and (max-width: 1599px) and (min-width: 1300px) {
	.page_book .header > * {
		margin-left: 20%;
		margin-right: 20%;
	}
}

@media screen and (max-width: 1299px) and (min-width: 1000px) {
	.page_book .header > * {
		margin-left: 15%;
		margin-right: 15%;
	}
}

@media screen and (max-width: 999px) and (min-width: 800px) {
	.page_book .header > * {
		margin-left: 10%;
		margin-right: 10%;
	}
}

@media screen and (max-width: 799px) and (min-width: 600px) {
	.page_book .header > * {
		margin-left: 5%;
		margin-right: 5%;
	}
}

@media screen and (max-width: 599px) {
	.page_book .header > * {
		margin-left: 2%;
		margin-right: 2%;
	}
}

.page_book .title-s {
	margin-top:0rem;
	margin-bottom:0rem;
    line-height: 110%;
}

.page_book h1.title {
	color: rgba(245,35,35,1);
  	font-family: Didot;
  	font-style: italic;
  	font-size: 5rem;
  	margin-top:0rem;
  	margin-bottom:0rem;
  	padding:0;
	text-align:center;
}

.page_book h2.subtitle {
	color: rgba(245,35,35,1);
	font-style:normal;
	margin-top: 0rem;
	margin-bottom: 0.75rem;
	padding:0;
	text-align:center;
}

.page_book .author-s {
	font-size:2rem;
	text-align:left;
	margin-top:1rem;
	margin-bottom:0rem;
}

.page_book .by {
	font-family:Cormorant,Garamond,serif;
	font-style:italic;
	font-size:1.1rem;
	text-align:center;
}

.page_book .author {
	text-align:center;
	padding:0;
}

.page_book .ampersand {
	font-size:1rem;
	text-align:center;
	padding:0;
}

/* Applies to specific sections of book pages */

/* Main Box */

.page_book .box {
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
	display: flex;
	flex-wrap:nowrap;
	align-items:center;
	align-content:center;
	margin-top:1rem;
	margin-bottom:1rem;
}

.page_book .box_main {
	/* Row */
	flex-direction:row;
	justify-content: center;
}

.page_book .box_main > * {
	width:50%;
}

.page_book .cover {
	padding-right: 1.5rem;
}

.page_book .cover img {
	display:inline-block;
	max-width:100%;
	transition:0.5s ease-out;
	animation-name: buyThrob;
	animation-duration:5s;
	animation-play-state:running;
	animation-iteration-count: infinite;
}

@-webkit-keyframes buyThrob {
      0% {box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.5);}
     50% {box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.7);}
    100% {box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.5);}
}

@keyframes buyThrob {
      0% {box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.5);}
     50% {box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.7);}
    100% {box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.5);}
}

.page_book .cover img:hover {
	cursor: pointer;
	box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.9);
	transform:scale(103%);
	animation-play-state: paused;
}

@media screen and (min-width: 1600px) {
	.page_book .cover img {
	    max-width: 120%;
	    transform: translateX(-20%);
	}
	.page_book .cover img:hover {
		transform: scale(103%) translateX(-20%);
	}
}

.page_book .cover .buy {
    font-family: Argento;
    font-size: 1rem;
    text-transform: uppercase;
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border-style: solid;
    border-color: rgba(245,35,35,1);
    border-width: 0.2rem;
    padding: 1rem;
    transition:0.5s;
}

  .page_book .cover .buy:hover
, .page_book .cover .buy:active {
	background-color:rgba(245,35,35,1);
	color:white;
	text-decoration: none;
}


.page_book .descriptions {
	padding-left: 1.5rem;
	text-align:justify;
}

.page_book .descriptions > * {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.page_book .initiation {
	font-style:italic;
	font-size: 1.5rem;
	max-width:66.66%;
	text-align:left;
}

.page_book .synopsis {
	font-size: 1.2rem;
}

.page_book .specs {
	float:right;
	max-width:33.33%;
	margin-left:2rem;
	text-align:right;
}
.page_book .specs .spec {
	display:block;
	margin:0;
}

.page_book .spec.index {
	color:rgba(245,35,35,1);
}

/* Handling mobile widths by flipping to 1 column */

@media screen and (max-width: 800px) {
	.page_book .box_main {
		flex-direction: column;
	}
	.page_book .box_main > * {
		width:100%;
		padding-left:0rem;
		padding-right:0rem;
		margin-top:1rem;
		margin-bottom:1rem;
	}
	.page_book .cover {
		text-align:center;
	}
	.page_book .cover img {
		max-width: 60%;
	}
}


/* Applies to all sections of book page */

.page_book .section {
	margin-top:3rem;
	margin-bottom:3rem;
}

.page_book .section-title {
	font-family:Argento;
	color: rgba(245,35,35,1);
	font-size:1.5rem;
	text-transform:uppercase;
	margin-bottom:0.5rem;
}

.page_book .section-content {
	font-size:1.1rem;
}

/* By Section - Discourse & Events */

  .section.discourse .section-content
, .section.events    .section-content {
	display:table;
}

  .discourse-elem
, .events-elem {
	display:table-row
}

  .discourse-elem > *
, .events-elem > * {
	display:table-cell;
}

  .discourse-elem .date
, .events-elem    .date {
	width: 15%;
	padding-right:0.5rem;
	text-transform: uppercase;
	color:rgba(0,0,200,1);
}

@media screen and (max-width:600px) and (min-width: 450px) {
	  .discourse-elem .date
    , .events-elem    .date {
		width:17.5%;
		padding-right:0.5rem;
	}
}

@media screen and (max-width:449px) {
	  .discourse-elem .date
    , .events-elem    .date {
		width: 20%;
		padding-right:0.33rem;
	}
}

  .discourse-elem .text
, .events-elem    .text {

}

/* By Section - Authors/Bio */

.section.bio .section-content {
	margin-bottom:1rem;
}


/* By Section - Colophon */

.section.colophon .section-content {
	display:table;
	border:0;
}

.colophon-elem {
	display:table-row
}

.colophon-elem > * {
	display:table-cell;
}

.colophon-elem .key {
	text-align: right;
	width: 4rem;
	padding-right: 0.66rem;
	text-transform: uppercase;
	border-right-width:0.1rem;
	border-right-style:solid;
}

.colophon-elem .value {
	text-align: left;
	width: calc(100% - 4rem);
	padding-left: 0.66rem;
}



/* By Section - Coda */

.section.coda {
	text-align:center;
	font-family: 'Argento';
    text-transform: uppercase;
}


/*		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
	display: flex;
	flex-wrap:nowrap;
	align-items:center;
	align-content:center;
	margin-top:1rem;
	margin-bottom:1rem;*/