* { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; *behavior:url(boxsizing.htc); }
html, body { 
	margin:0;
	padding:0;background:#000;
	line-height:1;
	font-family:'Source Sans Pro', sans-serif;
}
h1, h2, .nav-link, .playlist-btn {
	font-family:'Source Sans Pro', sans-serif; font-weight:900; 
	text-transform:uppercase;
}
h1 {
	font-size:4em; 
}
h1, h2, h3, h4, h5, h6, p { margin:0 0 10px; color:#fff; text-shadow: 1px 1px 1px #000;}
p { line-height:1.4;  }
a { color:#fff; text-decoration:none;}

 /* unvisited link */
a:link {
    text-decoration: none;
	color: #ffcc00;
}
/* visited link */
a:visited {
	color: #666;
}
/* mouse over link */
a:hover {
	color: #ff3333;
}
/* selected link */
a:active {
	color: #ff3333;
}



blockquote { 
	background:#fff; 
	margin:0 0 20px;
	padding:5px 20px; 
}
pre {
	white-space:pre-wrap;       /* css-3 */
	white-space:-moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space:-pre-wrap;      /* Opera 4-6 */
	white-space:-o-pre-wrap;    /* Opera 7 */
	word-wrap:break-word;       /* Internet Explorer 5.5+ */
}
video {
width: 100% !important;
height: 100% !important;
}

 /* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

/* Style the button used to pause/play the video */
#myBtn {
	font-family:'Source Sans Pro', sans-serif;
	margin-top: 20px;	
	padding: 10px;
	text-align: left;
	width: 100px;
	font-size: 12px;
	border: none;
	background: #666;
	color: #fff;
	cursor: pointer;
}

#myBtn:hover {
  background: red;
  color: #fff;
} 


.highlight { 
 color:#ffcc00;
}
.highlightpoetry { 
 color:#ffcc00;
 font-family: 'Courgette', cursive;
 font-size: 1.3em;
 line-height: 1.4em;
}
.red { 
 color:#ff3333;
}

.linkbar{ 
	font-family:'Source Sans Pro', sans-serif; font-weight:900; 
	text-transform:uppercase;	
	display:block;
	padding-bottom:10px;
	text-decoration:none;
	font-style:normal;

}
.box { 
	background:#444; background:rgba(0,0,0,.6);
	padding:20px;
	border-radius:5px;
	margin-bottom:20px;
	margin-right:5%;
	width:70%;
}
.box2 { 
	background:#444; background:rgba(0,0,0,.6);
	padding:20px;
	border-radius:5px;
	margin-bottom:20px;
}
.nav { 
	position:fixed; 
	top:50px;left:50px;
	width:150px; 
	-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;
}
.credit {
	margin:20px 0;
}
.download-links { margin-top:20px; }
.download { margin-left:10px; padding:5px 10px; color:#fff; background:#111; border-radius:5px; }
.video-list {
	list-style:none;
	margin:0 0 -10px;
	padding:0;
	text-align:center;
}
.video-list li {
	margin-bottom:10px;
}
.video-list .playlist-btn {
	display:block;
	width:100%;
}
.main {
	position:relative;
	margin:50px 50px 440px 220px;
	min-width:300px;
	-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;
}
.nav-link {
	display:block;
	padding-bottom:10px;
	text-decoration:none;
	font-style:normal;
}
.toggle-btn {
	position: absolute;
	bottom: -50px;
	left: 5px;
	background:rgba(0,0,0,.8);
	padding: 6px 12px;
	border-radius: 10px;
	color: #fff;
	font-size: .8em;
	font-family:'Source Sans Pro', sans-serif; font-weight:900; 
	text-transform: uppercase;
}
.playlist { 
	padding:0; 
	margin:25px 0px 0px 0px;
}
.playlist-btn { 
	text-decoration:none; 
	font-weight:bold; 
	font-style:normal; 
	text-transform:uppercase; 
	font-size:12px; 
}
.poetry
{
float:left; 
width:65%; 
margin-left:25px; 
}
.dimmed {opacity:.7;}
.footer-text {

	font-size:.9em;
	font-style:italic;
	opacity:.8;
	text-shadow: 1px 1px 1px rgba(0,0,0,.8);
}
/* Overlay contact box*/
#contact-overlay {background-color:#000;}

/* Container */
#contact-container {font: 16px/22px 'Trebuchet MS', Verdana, Arial; text-align:left; width:450px;}
#contact-container .contact-content {background-color:#333; color:#ddd; height:40px;}
#contact-container h1 {color:#d76300; font-size:20px; line-height:20px; margin:0; padding:0 0 6px 12px; text-align:left;}
#contact-container .contact-loading {background:url(../img/contact/loading.gif) no-repeat; height:55px; margin:-14px 0 0 190px; padding:0; position:absolute; width:54px; z-index:8000;}
#contact-container .contact-message {text-align:center;}
#contact-container .contact-error {background:#000; border:2px solid #ccc; font-size:14px; font-weight:bold; line-height:18px; margin:0 auto; padding:2px; width:92%;}
#contact-container br {clear:both;}
#contact-container form {margin:0; padding:0;}
#contact-container label {clear:left; display:block; float:left; font-weight:bold; padding-right:4px; text-align:right; width:100px;}
#contact-container .contact-input {background:#eee; border:1px solid #fff; font-family:'Trebuchet MS', Verdana, Arial; float:left; padding:2px; margin:2px; width:300px;}
#contact-container textarea {height:114px;}
#contact-container .contact-cc {cursor:default; font-size:14px; vertical-align:top;}
#contact-container .contact-top {background-color:#333; height:13px; margin:0; padding:0; -webkit-border-top-left-radius:8px; -webkit-border-top-right-radius:8px; -moz-border-radius-topleft:8px; -moz-border-radius-topright:8px; border-radius:8px 8px 0 0;}
#contact-container .contact-bottom {background-color:#333; font-size:12px; height:13px; line-height:12px; text-align:center; -webkit-border-bottom-right-radius:8px; -webkit-border-bottom-left-radius:8px; -moz-border-radius-bottomright:8px; -moz-border-radius-bottomleft:8px; border-radius:0 0 8px 8px;}
#contact-container .contact-bottom a,
#contact-container .contact-bottom a:link,
#contact-container .contact-bottom a:active,
#contact-container .contact-bottom a:visited {color:#666; position:relative; top:-4px; text-decoration:none;}
#contact-container .contact-bottom a:hover {color:#888;}
#contact-container .contact-button {background:#d76300; border:0; color:#fff; cursor:pointer; font-size:16px; font-weight:bold; height:26px; margin:4px 0 0 4px; text-align:center; vertical-align:middle; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;}
#contact-container .contact-button:hover {background:#f49000;}
#contact-container a.modal-close,
#contact-container a.modal-close:link,
#contact-container a.modal-close:active,
#contact-container a.modal-close:visited {color:#999; font-size:18px; font-weight:bold; position:absolute; text-decoration:none; right:8px; top:0px;}
#contact-container a.modal-close:hover {color:#ccc;}

/* carousel*/
#container{
	max-width:620px;
	margin:0 auto;
	padding-bottom:80px;
}

#banner-fade,
#banner-slide{
	margin-bottom: 60px;
}

ul.bjqs-controls.v-centered li a{
	display:block;
	padding:10px;
	background:#fff;
	color:#000;
	text-decoration: none;
}

ul.bjqs-controls.v-centered li a:hover{
	background:#000;
	color:#fff;
}

ol.bjqs-markers li a{
	padding:5px 10px;
	background:#000;
	color:#fff;
	margin:5px;
	text-decoration: none;
}

ol.bjqs-markers li.active-marker a,
ol.bjqs-markers li a:hover{
	background: #999;
}

p.bjqs-caption{
	background: rgba(255,255,255,0.5);
}



/* end carousel*/


/*iPad in portrait & landscape */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
{ 
html, body { 
	font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.box { 
	margin-right:0%;
	width:100%;
}
.poetry
{
width:90%; 
margin-left:0px; 
margin-top:0.8em;
}
 }
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
html, body { 
	font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.box { 
	margin-right:0%;
	width:100%;
}
.poetry
{
width:90%; 
margin-left:0px; 
margin-top:0.8em;
}
 }
/* queries */
/*tablet 7 inch */
@media all and (max-width: 700px) and (min-width: 480px) {
html, body { 
	font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.box { 
	margin-right:0%;
	width:100%;
}
.poetry
{
width:100%; 
margin-left:0px; 
margin-top:0.8em;
}
 }
/*phones*/
@media all and (max-width: 480px) and (min-width: 0px) {
html, body { 
	font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.box { 
	margin-right:0%;
	width:100%;
}
.poetry
{
width:90%; 
margin-left:0px; 
margin-top:0.0em;
}
 }
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 200px) {
.box { 
	margin-right:0%;
	width:100%;
}
.poetry
{
width:90%; 
margin-left:0px; 
}
}
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 930px) {
.box { 
	margin-right:0%;
	width:100%;
}
.poetry
{
float:left; 
width:45%; 
margin-left:25px; 
}
.poetry2
{
float:left; 
width:45%; 
margin-left:5px; 
margin-top:5px; 
}
.poetry3
{
float:left; 
width:45%; 
margin-left:5px;
margin-top:25px; 
}
}
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1424px) {
.box { 
	margin-right:0%;
	width:85%;
}
.poetry
{
float:left; 
width:45%; 
margin-left:25px; 
}
.poetry2
{
float:left; 
width:45%; 
margin-left:5px;
margin-top:5px; 
}
.poetry3
{
float:left; 
width:45%; 
margin-left:5px;
margin-top:30px; 
}
}
/* Large screens ----------- */
@media only screen 
and (min-width : 1624px) {
.box { 
	margin-right:0%;
	width:70%;
}
.poetry
{
float:left; 
width:45%; 
margin-left:25px; 
}
.poetry2
{
float:left; 
width:45%; 
margin-left:5px;
margin-top:5px; 
}
.poetry3
{
float:left; 
width:45%; 
margin-left:5px; 
margin-top:30px;
}
}