/*==============================================
  CSS RESET
  ===============================================*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	
	*{font-family: 'Open Sans', sans-serif !important;}
	
	.cf:before,
	.cf:after {
	    content: " "; /* 1 */
	    display: table; /* 2 */
	}

	.cf:after {
	    clear: both;
	}

	.cf {
	    *zoom: 1;
	}

	.hidden{display:none;}

	::selection {
		background: #12d9bf; /* Safari */
	}

	::-moz-selection {
		background: #12d9bf; /* Firefox */
	}

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

	body{
		top:0 !important;
		position:relative;
		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-o-transition: all .2s;
		-ms-transition: all .2s;
		transition: all .2s;
	}

	#cover{
		top:0;
		left:0;
		opacity:0;
		width:100%;
		z-index:99;
		height:100%;
		display:block;
		position:fixed;
		background:white;
		visibility: hidden;
		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-o-transition: all .2s;
		-ms-transition: all .2s;
		transition: all .2s;
	}

	#arrow{
		left:50%;
		opacity:.7;
		width:38px;
		bottom:50px;
		height:20px;
		z-index:999;
		display:block;
		cursor:pointer;
		margin-left:-19px;
		position:absolute;
		background:url('arrow.png') no-repeat center;
		background-size: 38px 20px;
	}

	#arrow:hover{
		opacity:1;
	}

	#back-to-top{
		opacity:.5;
		right:40px;
		width:38px;
		bottom:40px;
		height:20px;
		z-index:999;
		display:none;
		position:fixed;
		cursor:pointer;
		background:url('up-arrow.png') no-repeat center;
		background-size: 38px 20px;
	}

	#back-to-top:hover{
		opacity:1;
	}

	#next-article{
		opacity:.5;
		right:100px;
		width:38px;
		bottom:40px;
		height:20px;
		z-index:999;
		display:none;
		position:fixed;
		cursor:pointer;
		background:url('down-arrow.png') no-repeat center;
		background-size: 38px 20px;
	}

	#next-article:hover{
		opacity:1;
	}


	/*==============================================
  HEADER STYLING
  ===============================================*/

	header{
		z-index:2;
		width:100%;
		height:100%;
		overflow: hidden;
		position:relative;
		margin-bottom:80px;
		background:#ddd url('image.gif') no-repeat center;
		background-size: 50px 50px;
	}

	#title-and-nav{
		top:40px;
		z-index:9;
		width:100%;
		position:absolute;
	}

	#dark-logo{
		top:40px;
		z-index:1;
		left:40px;
		color:#333;
		position:fixed;
		opacity:.5;
		font-size:28px;
		font-weight: 800;
		letter-spacing: 1px;
		text-decoration: none;
		text-transform: uppercase;
		-webkit-font-smoothing: antialiased;
	}

	header h1{
		float:left;	
		margin-left:40px;
	}

	header h1 a, aside h1 a{
		opacity:.5;
		font-size:28px;
		font-weight: 800;
		letter-spacing: 1px;
		text-decoration: none;
		color:#FFF;
		text-transform: uppercase;
		-webkit-font-smoothing: antialiased;
		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-o-transition: all .2s;
		-ms-transition: all .2s;
		transition: all .2s;
	}

	header h1 a:hover, aside h1 a:hover, {opacity:1;}

  .nav-toggle{
		z-index:9;
		opacity:.85;
		float:right;
		font-size:21px;
		cursor: pointer;
		padding-top:5px;
		font-weight: 400;
		padding-left:25px;
		margin-right:40px;
		letter-spacing: 1px;
		text-decoration: none;
		text-transform: uppercase;
		color:#FFF;
		text-shadow: 1px 1px 3px #000000;
		-webkit-font-smoothing: antialiased;
	}


	
	.nav-toggle{
		background:url('menu-tab_2x.png') no-repeat left 7px;
		background-size: 15px 15px;
	}
	

	.nav-toggle:hover{opacity:1;}

	.nav-toggle.dark{
		top:40px;
		z-index:1;
		right:40px;
		color:#333;
		position:fixed;
		margin-right:0;
		text-shadow: none;
	}

	
	.nav-toggle.dark{
		background-image:url('menu-tab-dark.png');
		background-size: 15px 15px;
	}
	

	header #slogan{
		top:40%;
		left:50%;
		z-index: 9;
		width:800px;
		display:none;
		position:absolute;
		text-align: center;
		margin-left: -400px;
		letter-spacing: 1px;
		-webkit-font-smoothing: antialiased;
	}

	header #slogan h2{
		font-size:2.4em;
		line-height:1.3;
		font-weight:800;
		padding-bottom:24px;
//		text-transform:uppercase;
		text-shadow:1px 1px 5px #000000;
		color:#FFF;
		letter-spacing: 3px;
		font-family: 'Merriweather', sans-serif !important;
				}

	header #slogan h3{
		font-size:1.4em;
		line-height: 1.3;
		font-style: italic;
		text-shadow:1px 1px 5px #000000;
		color:#FFF;
		font-family: 'Merriweather', sans-serif !important;
	}

	#arrow{
		left:50%;
		width:38px;
		bottom:50px;
		height:20px;
		z-index:999;
		display:block;
		margin-left:-19px;
		position:absolute;
		background:url('arrow.png') no-repeat center;
		background-size: 38px 20px;
	}

	/*==============================================
	SLIDER
  ===============================================*/
	#slider{
		top:0;
		left:0;
		z-index:3;
		width:100%;
		height:100%;
		display:none;
		background:#ddd;
		overflow: hidden;
		position: absolute;
	}

	#slider img{
		top:0;
		left:0;
		width:100%;
		position: absolute;
	}

	/*==============================================
	NAVIGATION
  ===============================================*/
  aside{
  	top:0;
  	right:-300px;
  	z-index:10;
  	width:300px;
  	height:100%;
  	position:fixed;
  	-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-o-transition: all .2s;
		-ms-transition: all .2s;
		transition: all .2s;
  	background:#333838;
  }

  aside h1{
		margin-top:50px;
		padding-left:30px;
	}

	#search-form{
		margin-top:20px;
	}

	#search-form input{
		color:#FFF;
		width:220px;
		border:none;
		outline:none;
		padding:8px 10px;
		font-size: 13px;
		margin-left:30px;
		border-radius: 2px;
		background:#272b2b;
	}

	#search-form input:focus{
		background:#424444;
	}

  aside nav{
  	clear:both;
  	margin-top:32px;
  }

  aside nav a{
  	color:#ccc;
  	display:block;
  	font-size:.75em;
		padding:10px 0;
		padding-left:30px;
  	letter-spacing: 1px;
  	text-decoration: none;
  	text-transform: uppercase;
  	-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-o-transition: all .2s;
		-ms-transition: all .2s;
		transition: all .2s;
  }

  aside nav a:hover{
  	color:#FFF;
  	padding-left:45px;
  	background:#4e5656;
  }

  p.description{
		font-size:13px;
		padding:30px;
		padding-bottom: 0;
		line-height: 1.8;
		font-weight:1000;
		font-style: italic;
		color:#cdd1d4;
	}

  p.menup{
		font-size:13px;
		padding:30px;
		padding-bottom: 0;
		line-height: 1.8;
		font-weight:1000;
		color:#cdd1d4;
	}

	#social-links{
		float:left;
		clear:both;
		padding:30px;
	}

	#social-links li{
		float:left;
		margin-right:10px;
		margin-bottom:10px;
	}

	#social-links a{
		opacity:.75;
		width:24px;
		height:24px;
		display:block;
	}

	#social-links a:hover{
		opacity:.7;
	}

	#facebook{
		background-image:url('facebook.png');
		background-size:24px 24px;
	}

	#email{
		background-image:url('email.png');
		background-size:24px 24px;
	}

	/*Slide Animation*/
  body.slideout{
    margin-left:-150px;
	}

	body.slideout aside{
		right:0;
	}

	body.slideout #cover{
		left:-300px;
		opacity:.6;
		visibility: visible;
	}

	body.slideout .nav-toggle.header{
		margin-right:-200px;
	}

	body.slideout header h1 a, body.slideout #dark-logo{
		opacity:0;
		visibility: hidden;
		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-o-transition: all .2s;
		-ms-transition: all .2s;
		transition: all .2s;
	}

	body.slideout #back-to-top{
		opacity:0;
		visibility: hidden;
	}

	/*==============================================
	POST STYLING
  ===============================================*/
	
	#main{
		width:90%;
	  max-width:700px;
	  margin:0 auto;
	}

	article{padding-bottom:60px;}
	
	.post-title{
	  display:block;
	  text-align:center;
	  padding-bottom:15px;
	}
	
	h1.post-title {
	  font-size:2.4em;
	  line-height:1.4;
	  font-weight:bold;
	  text-decoration:none;
	  color:#2A2A2A;
	  -webkit-font-smoothing: antialiased;
	}

	.post-title a:hover{text-decoration: underline;}

	.post-sub-title{
		width:100%;
    font-style:italic;
    text-align: center;
    text-decoration:none;
    color:#AAA;
    font-family: 'Merriweather', sans-serif !important;
	}
	
	article .meta{
	  display:block;
	  text-align:center;
	  padding-bottom:25px;
		color:#555;
	}
	
	article .meta a{
	  margin:0 5px;
	  font-style:italic;
	  text-decoration:none;
		color:#555;
	}

	article .meta a:hover{text-decoration: underline;}

	article .post-content{
    line-height:1.8;
    font-weight:300;
    font-size:1.07em;
    text-align: center;
    color:#444;
    font-family: 'Merriweather', sans-serif !important;
	}
	
	article .post-content p{
		display: block;
		text-align: left;
		margin-bottom:30px;
		font-family: 'Merriweather', sans-serif !important;
	}
	
	article blockquote{
	  width:800px;
	  line-height:1.8;
    font-weight:300;
	  font-size:1.5em;
	  margin-left:-50px;
	  font-style:italic;
	  margin-bottom: 30px;
	  color:#444;
	  font-weight:100 !important;
	  text-align: center !important;
	  font-family: 'Merriweather', sans-serif !important;
	}

	article blockquote p{
		margin-bottom:0 !important;
		text-align: center !important;
	}

	article blockquote.quote{
		margin-bottom:30px !important;
	}

	article .post-content strong{
		font-weight:bold;
		font-family: inherit !important;
	}

	article .post-content em{
		font-style:italic;
		font-family: inherit !important;
	}

	article .post-content a{color:#3dcda9;}

	article .post-content img{
//		width:500px;
		border-radius:3px;
		box-shadow: 0 1px 5px #e5e5e5;
	}

	article .post-divider{
		width:100px;
		height:14px;
		margin:0 auto;
		display:block;
		margin-bottom:30px;
		background:url('divider.png') no-repeat center;
		background-size: 100px 14px;
	}
	
	.photo-center {
//			width:800px;
//		margin-left:-50px;
		text-align: center;
		margin-bottom:30px;
	}

.facts-table {
	text-align: left;
}

.facts-table td {
	padding-right: 40px;
}
	article .photo img{
		max-width:100%;
		border-radius:2px;
		box-shadow: 0 1px 5px #e5e5e5;
	}

	article .link{
	  line-height:1.2;
	  text-align:center;
	  margin-bottom:25px;
	}
	
	article .link .name{
	  font-size:2.4em;
    line-height:1.9;
	  font-weight:bold;
	  text-decoration:none;
	  color:#2A2A2A;
    -webkit-font-smoothing: antialiased;
	}
	
	article .link .url{
    width:100%;
    display:block;
    font-style:italic;
    text-decoration:none;
		color:#AAA;
    font-family: 'Merriweather', sans-serif !important;
	}

	article .link a:hover{text-decoration:underline;}

	.source{text-align: center !important;}

	.tags{
	  width:100%;
	  text-align:center;
	  margin-top:-10px;
	}
	
	.tags a{
		margin:5px;
		font-size:.7em;
		padding:2px 10px;
		border-radius:15px;
	  letter-spacing:1px;
		text-decoration:none;
		color:#999;
		text-transform:uppercase;
		border:1px solid #999;
	}

	.tags a:hover{
		color:#FFF;
		background:#3dcda9;
		border-color:#3dcda9;
	}

	.read_more{
    width:160px;
    margin:0 auto;
    display:block;
    font-size:1.4em;
    margin-top:-15px;
    text-align:center;
    font-style:italic;
    color:#999 !important;
    font-family: 'Merriweather', sans-serif !important;
	}

	.read_more:hover{color:#555 !important;}

	.chat-line{text-align:left;}
	
	.chat-line .name{
		font-size:.8em;
		letter-spacing:1px;
		text-transform:uppercase;
	}
	
	.chat-line p{font-family: 'Merriweather', sans-serif !important;}
	
	.chat-line.odd p{font-weight:bold;}

	.post-content iframe{
		max-width:100%;
		margin-bottom:30px;
	}

	.audio-embed{
		width: 100%;
		display: block;
		text-align: center;
		margin-bottom: 30px;
	}

	.album-art{
    width:220px !important;
    margin-left:0 !important;
	}

	.audio-player-wrapper{
		padding-top:30px;
		text-align:center;
	  padding-bottom:30px;
	}

	.video{
    overflow:hidden;
    border-radius:5px;
    margin-bottom:30px;
	}

	.video iframe{float:left;}

	.html_photoset{margin-bottom:30px;}

	.notes{
		width:600px;
		margin-left:50px;
		margin-top:70px;
	}
	
	.notes li{
		margin-bottom:15px;
		font-size:.85em;
	}
	
	.notes li img{
		float:left;
		margin-right:5px;
	}
	
	.notes li a{
		color:#3dcda9;
	}

	.notes blockquote{
    font-size:1em;
    text-align:left !important;
    border-left:5px solid #eee;
    width:500px;
    display:inline-block;
    margin:15px 0;
    padding-left:15px;
	}

	.notes blockquote a{
		color:#999;
	}

	#read_next_post{
		width: 100%;
		height:80px;
		background:#ddd;
		line-height: 78px;
	}

	#infscr-loading{
		position:fixed;
		bottom:40px;
		left:40px;
	}

	#infscr-loading img{
		width:40px;
		height:40px;
	}

	#infscr-loading span{
		padding-top:50px;
	}

	#pagination{
		opacity: 0;
		visibility: hidden;
	}

	#disqus_thread{
		padding-top:50px;
	}

	/*==============================================
	RESPONSIVE
  ===============================================*/

  @media all and (max-width: 1050px){
		#dark-logo{display:none;}
		.nav-toggle.dark{display:none;}
  }

  @media all and (max-width: 840px){
		header #slogan{
			padding:4% !important;
			width:92% !important;
			text-align: left !important;
			margin-left: 0;
			left:0 !important;
			top:30% !important;
		}

		#arrow{
			display:none;
		}
  }

  @media all and (max-width: 700px){
  	header{
			height:110px !important;
			background:#2A2A2A !important;
  	}

  	.nav-toggle.header{
  		width:0 !important;
  		overflow: hidden;
  	}

  	header #slogan, header #slider{	
  		display:none !important; 		
  	}

  	.post-title, .post-sub-title, article meta, article .post-content{
  		text-align: left !important;
  	}

  	aside h1, #social-links, p.description, #search-form{
  		display:none !important;
  	}

  	article blockquote{
  		width:90% !important;
  		margin-left:0 !important;
  	}

  	article .photo{
			width:90% !important;
			margin-left:0 !important;
		}

		article iframe{
			width:90% !important;
		}

		header h1{
			margin-left:30px !important;
		}

		header .nav-toggle{
			margin-right:30px !important;
		}

  }

	@media all and (max-width: 65em){
		header{height:400px; !important}
		header #slogan{top:35%;}
	}

	@media all and (max-width: 45em){
		header #slider{display:none;}
	}