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

@media only screen and (min-device-width: 1000px) {
*{
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: #777777;
}

body, html {
	width: 100%;
	height: 100%;
}

.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -3em auto;
}

.videowrap {
	position: relative;
	width: 80%;
	height: 300px;
	display: inline-block;
	top: 0;
	left: 15%;	
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: 0.4em;
	
	
}


.playvideo {
	position: relative;
	width: 40%;
	display: block;
	top: 3%;
	left: 55%;	
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	
	font-size: .95em;
	text-transform: uppercase;
	letter-spacing: 0.4em;
	cursor: pointer;
	margin: 1.75em 0;
	-webkit-transition: all 1s;

}

.playvideo p {
	text-indent: 6em;
	text-transform: none;
	letter-spacing: 0.1em;
	font-size: .8em;
	margin: .45em 0 0;
}


video {
	height: 400px;
	width: auto;
	display: inline-block;
	
}

video#fullscreen {
	
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -1;
	
	/*
	background: url(.lpg) no-repeat;
	background-size: cover;
	*/	
	
	
}

#content {
	position: relative;
	width: 45%;
	text-align: left;
	top: 4%;
	left: 15%;
	z-index: 2;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 0.9em;
	line-height: 3em;
	padding: 0 0 6em 0;
	
}

#backtocontents {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: 1.2em; 	
	letter-spacing: 0.2em;
	text-transform: uppercase;
	
	position: absolute;
	left: 65%;
	width: 20%;
	top: 1.6em;
	color: #777777;
	
}

#prosebio {
	float: right;
	position: relative;
	display: inline-block;
	left: 25%;
	
	margin: 0% 0 0% -12.5%;
	width: 50%;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 0.9em;
	line-height: 2em;
	font-style: italic;
	color: #DD4D38;
}

#prosebio a, #poembio a {
	color: #620000;
}

#prosebio a:hover, #poembio a:hover {
	color: #AE0000;
}

#poembio {
	float: right;
	position: relative;
	display: inline-block;
	left: 50%;
	
	margin: 0% 0 0% -12.5%;
	width: 40%;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 0.9em;
	line-height: 2em;
	font-style: italic;
	color: #DD4D38;
}



#content p {
	padding: 1.6em 0 0 0;
	
	
}

#content p.mastheadname {
	padding: 0.4em 0 0 0;
}

#content p.introtext {
	font-size: 0.8em;
	line-height: 2.6em;
	color: #4C4C4C;	
}

pre.poem {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 1em;
	line-height: 2.4em;
	padding: 1em 0 2em 0;
}

.heading {
	position: relative;
	top: 0;
	width: 100%;
	background:#FBFBFB;
	box-shadow: 0px 3px 5px #CBCBCB;
}

img.logo-content {
	width: 300px;
	height: auto;
	position: relative;
	left: 65%;
	top: 0px;
	opacity: 1;
	background: #FBFBFB;
}



.title {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: 2em; 	
	position: relative;
	left: 10%;
	width: 90%;
	margin: 2em 0 0 0;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	
}

.mastheadtitle {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: 2em; 	
	position: relative;
	left: 10%;
	width: 35%;
	display: inline-block;
	margin: 2em 0 0 0;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	
}

.authorName {
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-size: 1.25em;
	position: relative;
	left: 10%;
	width: 90%;
}

.subtitle {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: 1.6em;
	color: #4D4D4D;
}

.subtitle:hover{
	position: relative;
	
	cursor: pointer;	
	color: #000000;
}

.subtitle span {
	font-weight: 300;
}

.subsection {
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-size: 1.6em;
	color: #000000;
	padding: 1.1em 0 0 0;
}

.subsection:hover {
	cursor: pointer;
}

.mastheadsection {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: 1.6em;
	color: #4D4D4D;
	padding: 1.1em 0 0 0;
	text-decoration: underline;
	
}

.whatwedo {
	float: right;
	position: relative;
	display: inline-block;
	left: 35%;
	
	margin: 0% 0 0% -15.5%;
	width: 62%;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 0.9em;
	line-height: 2em;
	
	color: #000000;
}

p.poemtitle {
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-size: 1.6em;
	
}


.firstcharacter { 
float: left; color: #4C4C4C; font-size: 4em; line-height: 1.3em; padding-top: 4px; padding-right: 6px; padding-left: 3px; font-family: "Oswald"; }




#morecontent {
	font-family: "Oswald", sans-serif;
	width: 200px;
	text-align: left;
	background: #fff;
	position: fixed;
	z-index: 9999;
	bottom: 10%;
	right: -160px;
	opacity: 0.3;
	font-size: 0.8em;
	padding: 0;
	transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;

	
	
	
}

#morecontent:hover {
	
	right: 20px;
	opacity: 1.0;
	transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
}




#morecontent ul {
	list-style: none;
}

#morecontent ul li {
	display: block;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-weight: 300;
	font-size: 0.85em;
	line-height: 1.4em;
	margin: 0.7em 0;

	color: #000000;

}


#morecontent ul li a {
text-decoration: none;
	color: #000000;
}

#morecontent ul li a:hover {
	color: #777777;
}

#moreconimg {
	position: relative;
	display: inline-block;
	float: left;
	height: 260px;
	margin: 0 0.6em 0 0;
	
}



.artwrap {
	position: relative;
	width: 65%;
	text-align: left;
	top: 4%;
	left: 5%;
	z-index: 200;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 0.8em;
	
	padding: 0 0 3em 0;
	float: left;
	

}

.artbio {
float: right;
	position: relative;
	display: inline-block;
	left: 35%;
	z-index: 1;
	margin: 5% 0 0% -70%;
	width: 30%;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 0.9em;
	line-height: 2em;
	font-style: italic;
	color: #DD4D38;
}
	
img.artseries {
	display: block;
	margin: 0 auto;
	width: auto;
	max-width: 100%;
	max-height: 570px;
	
}



.art p {
	text-align: center;
	margin: 1em 0 0 0;
	text-indent: 0;
	
}

#prev, #next {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: 0.9em;
	color: #4D4D4D;
	display: inline-block;
	position: relative;
	width: 30%;
	margin: 0 10%;
	text-align: center;
	padding: 3em 0 0 0;
	cursor: pointer;
	
}

footer, .push {
	height: -3em;
	clear: both;
}

footer {
	position: relative;
	width: 100%;	
	
	z-index: 4;
	border-top: 1px solid #E4E4E4;
	
	
}


footer ul {
	list-style: none;
	position: relative;
	text-align: center;
	
}

footer ul li {
	font-family: "Oswald", sans-serif;
	font-size: 1.2em;
	display: inline-block;
	padding: 0.5em 1.5em 0 1.5em;	
}

footer ul li a:hover {
	color: #A2A2A2;
}

#mobilebio, .mobilefrogbio {
	display: none;
}

#mobilecontents {
	display: none;
}

#mobilecontentbutton {
display: none;
}

.videocontainer {
	background: url(../Issue1/Kelner/images/tv.jpg) no-repeat center;
	background-size: contain;
	width: 600px;
	height: 433px;
	display: block;
	margin: 0;
	
	
}

.videocontainer video {
	width: 60%;
	height: auto;
	position: relative;
	display: block;
	top: 72px;
	left: 62px;
}

/*DYNAMIC FOOTNOTES*/

sup {
	cursor: pointer;
	color: #777777;
	text-decoration: underline;
}

.footnotecontent {
	position: absolute;
	left: 65%;
	width: 20%;
	
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: .7em;
	line-height: 1.7em;
	color: #777777;
	z-index: 1000;
}




.sidebarimg {
	display: inline;
	width: 100%;
	position: relative;
	left: -35%;
	float: left;
	margin: 2em -30% 0 0;
}

.sidebarimgright {
	display: inline;
	width: 80%;
	position: relative;
	right: -45%;
	float: right;
	margin: 0 0 0 -30%;
}

.datetime {
	
	width: 30%;
	display: inline-block;
	position: absolute;
	left: -30%;
	top: .4em;
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-size: 2.1em;
	color: #B7B7B7;
	line-height: 1.2em;
}

#poembio em, #prosebio em, #mobilebio em, #artbio em {
	font-style: normal;

}

}

@media only screen and (max-device-width: 1001px) {

a {
	text-decoration: none;
	color: #777777;
}
	
#content {
	position: relative;
	width: 85%;
	text-align: left;
	top: 0;
	left: 10%;
	z-index: 2;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 3em;
	line-height: 2.25em;
	padding: 1em 0 3em 0;
	float: none;
	
}

.datetime {
	
	
	display: block;
	
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-size: 2.1em;
	color: #B7B7B7;
	line-height: 1.2em;
}

#content p {
	padding: 1.6em 0 0 0;
}

#prosebio, #poembio, .artbio {
	display: none;
}

#mobilebio {
	float: none;
	position: relative;
	display: block;
	left: 10%;
	
	margin: 0;
	width: 85%;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 2.25em;
	line-height: 2em;
	font-style: italic;
	color: #DD4D38;
	padding: 0 0 1em 0;

}

#mobilebio a {
	font-size: 1.2em;
}

.mobilefrogbio {
	float: none;
	position: relative;
	display: block;
	left: 5%;
	
	margin: 0;
	width: 90%;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 1em;
	line-height: 2em;
	font-style: italic;
	color: #DD4D38;
	padding: 0 0 1em 0;
	
}

.heading {
	position: relative;
	top: 0;
	width: 100%;
	background:#FBFBFB;
	box-shadow: 0px 3px 5px #CBCBCB;
}

img.logo-content {
	width: 70%;
	height: auto;
	position: relative;
	left: 10%;
	top: 0px;
	opacity: 1;
	background: #FBFBFB;
}

#backtocontents {
	display: none;
	
}

#mobilecontents {
	position: relative;
	width: 95%;
	background: #F5F5F5;
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-size: 3em;
	padding: 1em 0 1em 5%;
	box-shadow: 0px 3px 5px #CBCBCB;
}

#mobilecontents a {
	padding: 1em 0 1em 5%;
	
	display: block;
	color: #373737;
	text-decoration: none;
	font-size: .8em;
}

#mobilecontents a span, #mobilecontents span {
	font-weight: 400;
	text-transform: uppercase;
	color: #000000;
}

#mobilecontentbutton {
	width: 10%;
	height: auto;
	display: inline;
	vertical-align: top;
	padding: 5% 0 0 5%;
}



.title {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: 3.75em; 	
	position: relative;
	left: 10%;
	width: 80%;
	margin: 2em 0 0 0;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	
}

.authorName {
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-size: 3.25em;
	position: relative;
	left: 10%;
	width: 80%;
}

.firstcharacter { 
float: left; color: #4C4C4C; font-size: 3.5em; line-height: 1.3em; padding-top: 4px; padding-right: 6px; padding-left: 3px; font-family: "Oswald"; }

footer {
	position: relative;
	width: 100%;	
	
	z-index: 4;
	border-top: 1px solid #E4E4E4;
	
	
}


footer ul {
	list-style: none;
	position: relative;
	text-align: center;
	
}

footer ul li {
	font-family: "Oswald", sans-serif;
	font-size:2.5em;
	display: block;
	padding: 0.5em 1.5em 0 1.5em;	
}

.subtitle {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: 1.1em;
	color: #4D4D4D;
}

p.poemtitle {
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-size: 1.6em;
	
}

pre.poem {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 1.0em;
	line-height: 2.4em;
	padding: 1em 0 2em 0;
}

.artwrap {
	position: relative;
	width: 85%;
	text-align: left;
	top: 0;
	left: 0;
	margin: 0 auto;
	z-index: 200;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 0.8em;
	
	padding: 0 0 3em 0;
	float: none;
	

}

img.artseries {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: none;
	max-height: none;
	
}

.art p {
	text-align: center;
	margin: 1em 0 0 0;
	text-indent: 0;
	font-size: 1.5em;
	
}

#prev, #next {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: 2em;
	color: #4D4D4D;
	display: inline-block;
	position: relative;
	width: 30%;
	margin: 0 10% 2em 10%;
	text-align: center;
	padding: 3em 0 0 0;
	cursor: pointer;
	
}

.videocontainer {
	background: url(../Issue1/Kelner/images/tv.jpg) no-repeat center;
	background-size: contain;
	width: 600px;
	height: 433px;
	display: block;
	margin: 2em 0;
	
	
}

.videocontainer video {
	width: 60%;
	height: auto;
	position: relative;
	display: block;
	top: 72px;
	left: 62px;
}

.mastheadtitle {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: 3.5em; 	
	position: relative;
	left: 10%;
	width: 80%;
	display: inline-block;
	margin: 2em 0 0 0;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	
}

.mastheadsection {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: 0.9em;
	color: #4D4D4D;
	padding: 1.1em 0 0 0;
	text-decoration: underline;
	
}

#content p.mastheadname {
	padding: 0;
}

#morecontent {
	display: none;
}