/** General page styling **/
html{
	margin: 0px;
	padding:0px;
}

body {
	background-color: #000;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	color: #fff;
	margin: 0px;
	padding:0px;
	font-family: 'Open Sans', sans-serif;
}

@font-face {
	font-family: Ailerons;
	src: url("../fonts/Ailerons.otf") format("opentype");
}

.ailerons {
	font-family: Ailerons;
}

.title {
	margin-top: 100px;
	font-size: 650%;
}

.authortitle {
	font-size: 250%;
}

nav,h1,h2,h3,h4,h5,h6{
	text-transform: uppercase;
	font-family: 'Exo', sans-serif;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,.nav-pills > li > a:hover ,
.nav-pills > li.active > a:focus{
	color: #fff;
	text-decoration: none;
    background-color: #5bc0de;
	border-color: #46b8da;
}
.nav-pills > li > a{
	text-transform: uppercase;
	color: #fff;
}

.home {
	height: 100vh;
    background: #333;
	margin: 50px 0 0 0;
    background: #333 url('../img/homepage.jpg') no-repeat center -450px fixed;
    background-size: cover;
	border-bottom: 1px solid #ccc; 
}

.home h1 {
	text-align: center;
	font-size: 100px;
	font-weight: 300;
	margin: 200px 0 0px 0;
	color: #fff;
}

.home h2 {
	text-align: center;
	font-size: 30px;
	font-weight: 400;
	margin: 0px 0 10px 0;
	color: #fff;
}

.blurb {
	text-align: center;
	font-size: 22px;
	font-weight: 300;
	margin: 30px 50px 0 50px;
	color: #bdf0fd;
	font-family: 'Exo', sans-serif;
}

.sellers{
	font-family: 'Exo', sans-serif;
	margin-top: 30px;
	text-transform: uppercase;
}

/* Small devices (tablets, 768px and up) */
@media(max-width:767px){

	.home{
	    background: #333 url('../img/homepage.jpg') no-repeat top center fixed;
	    background-size: cover;
	}

	.home h1{
		font-size: 40px;
		margin: 40px 0 0px 0;
		}
	.home h2{
		font-size: 25px;
		}
	.home p {
		font-size: 16px;
		font-weight: 300;
		margin: 20px 30px 0 50px;
		}
	.home .btn{
		margin: 0px 0px 10px 0px;
		}	

	.sellers {
		max-width: 220px;
	}
}

	

/* ==========================================================================
   AUTHOR
   ========================================================================== */

.author{
	background: #455257;
	padding: 50px 0;
	color: #bdf0fd;
	border-bottom: 1px solid #ccc; 
}

.alex{
	border: 5px solid #bdf0fd;
}

.mihaela {
	width: 60%;
	height: 60%;
}

.james {
	height: 160px;
}

.author .btn{
	margin: 2px auto;
}

.blue-link a:hover {
	color: white;
}

/* Small devices (tablets, 768px and up) */
@media(max-width:767px){
	.author{
		padding: 0 20px 30px 20px;
	}
	.alex{
		margin-top: 40px;
		border: 2px solid #bdf0fd;
		width: 70%;
		height: 70%;
		text-align: center;
	}

	.mihaela {
		width: 50%;
		height: 50%;
	}

	.james {
		width: 160px;
	}

	.author h2{
		font-size: 25px;
	}
	.author .btn{
		font-size: 11px;
		margin: 0px 0px 3px 0px;
	}	
}


/* ==========================================================================
   ARTWORK
   ========================================================================== */

.artwork{
	background: #465358;
	padding: 50px 0;
	color: #bdf0fd;
	border-bottom: 1px solid #ccc; 
}

.mihaela {
	width: 80%;
	height: 80%;
}

.author .btn{
	margin: 2px auto;
}

.img-small {
	width: 50px;
}

/* Small devices (tablets, 768px and up) */
@media(max-width:767px){
	.artwork{
		padding: 0 20px 30px 20px;
	}

	.mihaela {
		width: 70%;
		height: 70%;
	}

	.author h2{
		font-size: 25px;
	}
	.author .btn{
		font-size: 11px;
		margin: 0px 0px 3px 0px;
	}	
	.img-small {
		width: 50px;
	}
}

/* ==========================================================================
   PREVIEW
   ========================================================================== */

.preview{
    background: #333;
	  padding: 50px 0;
    background: #333 url('../img/listen.jpg') no-repeat top center fixed;
    background-size: cover;
	  border-bottom: 1px solid #ccc;  
}

.chapter{
	border-top: 1px solid #ccc;
	margin: 20px 0; 
	padding-top: 10px;
}

.white-links a {
	color: #fff;
	text-decoration: none;
}

.white-links a:hover {
	text-decoration: underline;
}

.very-small {
	font-size: 8px;
}

/* Custom, iPhone Retina */ 
@media only screen and (max-device-width: 640px) {
	.preview{
	    background: #333 url('../img/listen.jpg') no-repeat top center fixed;
	    background-size: cover;
	}
	.preview p {
		font-size: 16px;
	}
	.preview h2{
		font-size: 25px;
	}
	.preview .btn{
		font-size: 11px;
		margin: 0px 0px 3px 0px;
		}
	.white-links a {
		color: #fff;
		text-decoration: none;
	}

	.white-links a:hover {
		text-decoration: underline;
	}

	.very-small {
		font-size: 8px;
	}
}

audio{
	margin-bottom: 20px;
}
/* PLAYER */
.audiojs audio {
	position: absolute;
	left: -1px;
}
.audiojs{
	width: 450px;
	height: 36px;
	background: #ccc;
	opacity: 0.8;
	filter: alpha(opacity=80); /* For IE8 and earlier */
	overflow: hidden;
	font-family: monospace;
	font-size: 12px;
}
.audiojs .play-pause{
	width: 40px;
}
.audiojs .time{
	float: right;
}

ol {
	padding: 0px;
	margin: 0 0 20px 0;
	list-style: decimal-leading-zero inside;
	color: #ff0;
	width: 450px;
	border-top: 1px solid #999;
	font-size: 0.9em;
}
ol li {
	position: relative;
	margin: 0px;
	padding: 9px 2px 10px;
	border-bottom: 1px solid #999;
	cursor: pointer;

  /*  background: -webkit-linear-gradient(#333, #666); /* For Safari 5.1 to 6.0 */
  /*  background: -o-linear-gradient(#333, #666); /* For Opera 11.1 to 12.0 */
  /*  background: -moz-linear-gradient(#333, #666); /* For Firefox 3.6 to 15 */
  /*  background: linear-gradient(#333, #666); /* Standard syntax */
 
}
ol li a {
	font-family: 'Exo', sans-serif;
	font-weight: bold;
	color: #fff;
	display: block;
	padding: 0px 0px 0px 20px;
}
ol li a:hover {
	color: #d7db29;
}
li.playing {
	color: #ff0;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
}
li.playing a { color: #d7db29; }
li.playing:before { 
	content: '♬';
	width: 14px;
	height: 14px;
	padding: 3px; 
	line-height: 14px;
	margin: 0px;
	position: absolute;
	left: -24px;
	top: 9px;
	color: #d7db29;
	font-size: 13px;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
}

/* Custom, iPhone Retina */ 
@media only screen and (max-device-width: 640px) {
	.audiojs{
		width: 100%;
	}
	ol {
		width: 100%;
	}
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */

.testimonial{
	padding: 50px 0;
	border-bottom: 1px solid #ccc;  
    background: #000 url('../img/testimonial.jpg') no-repeat top right fixed;
}

/* Custom, iPhone Retina */ 
@media only screen and (max-device-width: 640px) {
	.testimonial{
	    background: #000 url('../img/testimonial.jpg') no-repeat fixed;
	    background-position: 0px 0px; 
		padding: 0 20px;
	    background-size: cover;
	}
	.testimonial p {
		font-size: 16px;
	}
}

/* ==========================================================================
   CHAPTER
   ========================================================================== */

.chapterPreview{
	padding: 50px;
	border-bottom: 1px solid #ccc;  
	font-size: 20px;
	color: #000;
    /*background: #000 url('../img/chapter.jpg') no-repeat center center fixed;
    background-size: cover; */
    background: #cdd2d3;
}

.chapterPreview h1{
	border-bottom: 1px solid #fff;
	margin-bottom: 50px;
}

.firstPhrase {
	font-size: 30px;
	
}

/* Small devices (tablets, 768px and up) */
@media(max-width:767px){
	.chapterPreview{
		font-size: 20px;
		}
	.chapterPreview h1{
		font-size: 25px;
		margin-bottom: 20px;
		}
	.chapterPreview p{
		font-size: 14px;
	}	
}


/* ==========================================================================
   FOOTER
   ========================================================================== */
 
.footer{
	background: #333;
	padding: 30px 0;
	text-align: center;
}