/*========== FREE ART TEMPLATE  ==========*/
/*
Thème créé par Jean-Emmanuel Doucet - 2013 (v2 2014).
Copyleft : cette oeuvre est libre, vous pouvez la copier, la diffuser et la modifier selon les termes de la Licence Art Libre.
http://www.artlibre.org/
*/


/*========== MISC ==========*/
* {
	margin:0;
	padding:0;
	box-sizing:border-box;

}
html, body {
	height:100%;
	background-color:#000;
}
/*========== MISC ==========*/

/*========== HOME PAGE ==========*/
.home-container {
	position:relative;
	height:100%;
	width:100%;
}
.home-overlay {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: url('overlay.png') repeat fixed 0% 0% / auto transparent;
    opacity:0.5;
}




	/*== bandcamp player ==*/
	.player {
		z-index:1;
		width:42px;
		height:42px;
    position:absolute;
    top:20px;
    left:20px;
		background:rgba(255,255,255,0.4);
		border:1px solid #fff;
		overflow:hidden;
		border-radius:47px;
		opacity:0.6;
		transition:all 0.3s;
	}
	.player:hover {
	  opacity:0.9;
	  width:240px;
	}
	.player iframe {
		border: 0;
		margin:0;
		padding:0;
		position:absolute;
		display:block;top:-1px;
		left:-1px;opacity:0.5;
		background-color:transparent;
		width:242px;
		height:42px;

	}



	/*== title & links ==*/
	.header {
	  position:absolute;
	  bottom:50%;
	  margin-bottom:-50px;
	  left:0;
	  right:0;
	}
	/*== title ==*/
	.title {
		color:#fff!important;
		color:rgba(255,255,255,0.9)!important;
		display:block;
		border:0;
		outline:0;
		text-align:center;
		font-weight:400;
	}
	.title h1 {
		font-size:34px;
		line-height:44px;
		font-variant:inherit!important;
		font-weight:300;
		margin:0;
		text-align:inherit;
	}
	.title ::selection {
		color:rgba(255,255,255,0.9);
	}
	.title span{
		display:block;
		font-size:16px;
		line-height:16px;
		text-align:inherit;
	}

	/*== links list ==*/
	.links {
		z-index:3;
	  text-align:center;
	}
	.links-list {
		list-style:none;
		display:inline-block;
		border-radius:20px;
		margin:0;
		text-align:center;
	}
	.links li{
		padding:0;
		display:inline-block;
		background:rgba(255,255,255,0.4);
		border:1px solid #fff;
		opacity:0.6;
		margin:20px 10px 0;
		text-align:center;
		font-size:18px;
		width:44px;
		height:44px;

		border-radius:40px;
		transition:opacity 0.3s;
	}
	.links li:hover {
		opacity:0.9;
	}
	.links li:before {
		display:none;
	}
	.links a {
		border:0;
		display:block;
		outline:0;
		color:#fff!important;
	}
	.links a span {
		display:none;
	}
	.links i {
		line-height:43px;
	}
	i.fa-bandcamp:before {
		content:"\f04d";
	}
	i.fa-bandcamp {
		transform:skew(-13deg);
	}


	/*== scroll-knobs (knob-bottom in .content div ==*/
	#knob {
		position:absolute;
		top:-67px;
		left:50%;
		margin-left:-27px;
	    color:#fff;
		height:54px;
		width:54px;
		opacity:0.6;
		border-radius:27px;
		background-color:rgba(255,255,255,0.2);
		border:1px solid #fff;
		outline:0;
		text-shadow: 0 0 1px #000;
		transition:opacity 0.3s;
		text-align: center;
	}

	#knob-bottom {
		margin:0 auto;
		border:0;
		text-align:center;
		border-radius:12px;
		outline:0;
		display:block;
		height:54px;
		width:54px;
		border-radius:27px;
		border:1px solid #555;
		color:#555;
		outline:0;
		transition:all 0.3s;
		text-align: center;

	}
	#knob:hover {
		opacity:0.9;
	}
	#knob-bottom:hover {
		background-color:#eee;
	}
	#knob i, #knob-bottom i {
		vertical-align:middle;
		height: 50px;
		font-size:31px;
	}
  #knob i {
    line-height:51px;
  }
  #knob-bottom i {
    line-height:46px;
  }

/*========== /HOME PAGE ==========*/

/*========== CONTENT PAGE ==========*/
.content-container {
	z-index:1;
	padding-top:1px;
	background:#fafafa;
	position:relative;
}
.content {
	margin:0 auto;
	max-width:100%;
	width:460px;
	padding:20px 20px 0;
}
.bottom {
  background:#fafafa;
  padding:0 0 20px;
  position:relative;
}
.article {
  padding-bottom:60px;
  position:relative;
}
.article:before {
	border:0;
  	border-top: 1px solid #999;
	display:block;
	content:"";
	position:absolute;width:100%;
	bottom:25px;
	left:0;

}
.article:first-child {
  margin-top:0px;
}
/*========== /CONTENT PAGE ==========*/


/*========== MEDIAS FRAMES ==========*/
.vimeo, .bandcamp, .soundcloud, .youtube, .dailymotion  {
	height:220px;
	margin-top:20px;
	background-color:#fff;
	background-size:cover;
	background-position:center;
}
.vimeo iframe, .bandcamp iframe, .youtube iframe, .dailymotion iframe  {
	border:0;
	display:block;
	width:100%;
	height:218px;
	background:transparent;
	position:absolute;
	z-index:2;
}
.bandcamp iframe, .bandcamp {
	height:120px;
	border:0;
}
.soundcloud.tracks iframe, .soundcloud.tracks {
	height:166px;
	border:0;
	width:100%;
}
.soundcloud.playlists iframe, .soundcloud.playlists {
	height:320px;
	width:100%;
	border:0;
}
.soundcloud.playlists {
  height:267px;
}
/*========== /MEDIAS FRAMES ==========*/



/*========== SLIDER ==========*/
.slider {
	height: 220px;
	margin-top:20px;
}
.swiper-container {
	height: 220px;
}
.swiper-slide {
	height: 220px;
	background-size:cover;
	background-position:center;
	background-color:#000;
	background-repeat:no-repeat;
}
.fullscreen {
	border:1px solid #333!important;
	border-radius:0!important;
	background-size:contain!important;
	background-repeat: no-repeat;
}
.fullscreen .swiper-container  {
	height:100%;
}
.fullscreen .fa-expand:before{
	content:"\f066"
}
.fullscreen .fa-compress:before{
	content:"\f065"
}
#layer {
	background-color:#111;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:999;
	display:none;
	background-image:url(loaderb.gif);
	background-position: center;
	background-repeat: no-repeat;
}
/*========== /SLIDER ==========*/




/*========== ARTICLES LIST ==========*/
.sub-article-list {
	transition:opacity 0.3s;
	opacity:1;
	border-top:1px solid #ccc;
	margin-top:20px;
}
.sub-article-list .sub-article-list .sub-article {
  padding:0 10px 20px;
  border-left:5px solid #eee;
  border-right:5px solid #eee;
}
.sub-article-list .sub-article-list .sub-article-list-footer {
  padding:0 10px;
}
.sub-article-list.loading {
	background:url(loaderw.gif) center no-repeat;
}
.sub-article-list.loading * {
	opacity:0.8;
}
.sub-article {
	border-top:1px solid #fff;
	border-bottom:1px solid #ccc;
	padding-bottom:20px;
	max-height:80px;
	overflow:hidden;
}
.sub-article.past .sub-article-date {
  color:#555;
}
.sub-article.today .sub-article-date, .sub-article.futur .sub-article-date {
	color:#298;
}

.sub-article:first-child {
	border-top:0;
}
.sub-article .sub-article-title {
	outline:0;

}
.previous-article {
	height:80px;
	line-height:80px;
	padding-left:10px;
	float:right;
	display:none;
	outline:0;
}
.sub-article.focus > .previous-article {
  display:block;
}
.sub-article h3 {
	margin:0px 0 0;
	height:80px;
	line-height:80px;
	position:relative;
	overflow:hidden;
	text-align: left;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.sub-article.focus  {
	max-height:none;
}
.sub-article  h3 i.star {
 a color:#555;
}
.sub-article.focus  > a h3 i.star:before{
	content:"\f192";
}
.sub-article-date {
  font-weight:400;
  float:none;
  display:block;
  position:absolute;top:20px;
}
.sub-article-list-footer {
	border-top:1px solid #fff;
	text-align:center;
	font-size:0px;
}
.pagination-anchor {
  position:relative;
}
.pagination-anchor a {
  display: block;
  position: absolute;
  bottom: -22px;
  height: 1px;
}
.sub-article-pagination {
	display:inline-block;
	line-height:19px;
}
.sub-article-pagination .sep {
	display:none;
}
.sub-article-pagination strong, .sub-article-pagination a {
		border:1px solid #555;
		color:#555;
		margin:20px 10px 0;
		text-align:center;
		font-size:16px;
		width:32px;
		height:32px;
		line-height:30px;
		border-radius:34px;
		display:inline-block;
		outline:0;
}
.sub-article-pagination strong {
	background:#ddd;
}
.sub-rss {
		border:1px solid #555;
		color:#555;
		margin:20px 10px 0;
		text-align:center;
		font-size:16px;
		width:33px;
		height:32px;
		line-height:30px;
		border-radius:34px;
		display:inline-block;
		outline:0;
}
.sub-article-list-keywords {
		border:1px solid #555;
		color:#555;
		margin:20px 10px 0;
		text-align:center;
		font-size:16px;
		width:32px;
		height:32px;
		line-height:30px;
		border-radius:34px;
		display:inline-block;
		outline:0;
	  cursor:pointer;
	  transition: all 0.3s;
	  position:relative;
}
.sub-article-list-keywords.on {
  border-color:#298;
  width:auto;
}
.sub-article-list-keywords.on span {
  padding-right:10px;
  font-size:12px;
  padding-bottom: 4px;
  vertical-align: middle;
}
.sub-article-list-keywords i {
	width:32px;
	height:34px;
	line-height:32px;
	text-align:center;
}
.sub-article-keywords {
	margin-top:20px;
}
.modal {

}

.modal-keywords {
  font-size:15px;
  z-index:2;
  display: none;
  background: #fafafa;
  border-radius: 8px;
  box-shadow: 0 0 10px #000;
}
.modal-keywords a.keyword {
  display:block;
  text-align:center;
  line-height:20px;
  padding:10px;
  outline:0;
  border-top:1px solid #ccc;
}

.modal-keywords a.keyword:first-child {
  border-top:0px;
}
.sub-rss:hover, .sub-article-list-keywords:hover,  .sub-article-pagination a:hover {
  background-color:#eee;
}
/*========== /ARTICLES LIST ==========*/



/*========== GUI ==========*/
.ui-container {
	position:relative;
	background-size: cover;
	background-position: center;
	background-color:#fff;
	border:1px solid rgb(210, 210, 210);
	overflow:hidden;
}
.ui-container.noborder {
	border:0;
	border-radius:0;
	background-color:transparent;
	background-image:none;
}
.ui-element{
	font-size:18px;
	line-height:20px;
	min-height:20px;
	border:0;
	outline:0;
	color:#fff;
	background:#222;
	background:rgba(0,0,0,.6);
	padding: 10px;
	z-index:100;
	display:block;
	position:absolute;
	text-align:center;
	z-index:1;
}
.ui-element.text {
  font-size:14px;
}
.center-center {
    width:50px;
    height:50px;
	line-height:40px;
	text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
	border-radius:25px;
	padding:7px;
}
.center-center.with-top {
	margin-top: -17px;
}
.center-left, .center-right {
	position:absolute;
	top:50%;
	margin-top:-20px;
}
.center-left {
	left:0;
	border-top-right-radius:25px;
	border-bottom-right-radius:25px;
}
.center-right {
	right:0;
	border-top-left-radius:25px;
	border-bottom-left-radius:25px;
}
.bottom-left {
	bottom:0;
	left:0;
	border-top-right-radius:15px;
}
.bottom-right {
	bottom:0;
	right:0;
	border-top-left-radius:15px;
}
.top {
	top:0;
	right:0;
	left:0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.top-right {
	top:0;
	right:0;
	border-bottom-left-radius:15px;
}
.top-left {
	top:0;
	border-bottom-right-radius:15px;
}
.ui-container .alt {
	display:none;
}
.ui-container a:hover {
  color:#298;
}
/*========== /GUI ==========*/


/*========== TYPO & GENERATED CONTENT ==========*/
body {
	font-family:Source Sans Pro, sans-serif;
	font-size:15px;
	line-height:20px;
	color:#222;
}
p, h1, h2, h3, blockquote, ul.spip, ol.spip, .spip_image, .footnotes {
	margin-bottom:0px;
	margin-top:20px;
	line-height:20px;
}
h1 {
	font-size:20px;
	text-align:center;
	font-variant:small-caps;
}
h2 {
	font-size:30px;
	text-align:center;
	abackground:#333;
	color:#333;
	font-weight:300;
	line-height:30px;
	position:relative;
	margin:0;
	z-index:2;
}
h3 {
	font-size:16px;
	font-weight:600;
	margin:25px 0px -5px;
}
hr {
	border:0;
  border-bottom: 1px solid #ddd;
	height:0px;
	margin-top:18px;
}

ul.spip {
	list-style:none;
	text-align:left;
}

ul.spip li ul {
	margin-top:0;
}

ul.spip  li ul li {
	padding-left:20px;
}
.content ul li:before  {
	height:0;
	content:"\f0da";
	font-family:FontAwesome;
}
ol.spip {
    counter-reset:li;
	text-align:left;
}
ol.spip li ol {
	margin-top:0;
}
ol.spip li {
    list-style:none;
}
ol.spip li ol li {
 padding-left:20px
}
ol.spip > li:before {
    content:counter(li)".";
    counter-increment:li;
    width:15px;
    display:inline-block;
}

.spip_in, .spip_out, .spip_mail, .spip_document {
  transition: all 0.2s ease-in-out 0s;
  color:inherit;
  text-decoration: none;
  border-bottom: 1px solid #999;
}
.spip_in:hover, .spip_out:hover, .spip_mail:hover, .spip_document:hover {
	border-color: transparent;
}
a {
  color:inherit;
  text-decoration: none;
  transition: all 0.2s ease-in-out 0s;
}
a.on {
  font-weight:600;
  color:#298;
}
.align-center, .center {
	text-align:center;
}
.align-right {
	text-align:right;
}
.float-left {
	float:left;
}
.float-right{
	float:right;
}
.float-center{
	margin-left:auto;
	margin-right:auto;
}
.small {
  font-size:11px;
}
.spip_note_ref {
	font-size:11px;
	vertical-align:super;
}
.spip_note {
	vertical-align:middle;
}
.footnotes {
	border-top:1px solid #aaa;
}
.footnotes p {
	margin:0;
}

blockquote {
	padding-left:20px;
	position:relative;
	font-style:italic;
}
blockquote:before {
	font-family:'FontAwesome';
	content:"\f10d";
	position:absolute;
	left:2px;
	top:0;
	opacity:0.5;
	font-style:normal;
}
.spip_size {
	font-size: 9px;
	line-height: 8px;
	vertical-align: middle;
	display: inline-block;
	margin-top:-2px;
}
.spip_size span {
	display:table-row;
}
.spip_image {
	max-width:100%;
	background-size:cover;
	position:relative;
}
.spip_image.float-right {
	margin-left:10px;
	margin-top:0px;
}
.spip_image.float-left {
	margin-right:10px;
	margin-top:0px;
}
.spip_image img {
	display:block;
	width:100%;
	height:auto;
	opacity:0;
	visibility:hidden;
}
.clear {
	clear:both;
}
.normal {
	font-size:14px;
}
iframe {
	display:block;
}
.biglink {
  text-align:center;
  margin-top:20px;
}
.biglink a {
	padding:0;
	display:inline-block;
	background:transparent;
	border:1px solid #555;
	color:#555;
	text-align:center;
	padding:0 20px;
	line-height:34px;
	border-radius:20px;
	transition:background-color 0.3s;
	outline:0;
}
.biglink a:hover {
  background-color:#eee;
}

code {
	display:block;
	font-family: "Bitstream Vera Sans Mono","Courier",monospace;
	line-height:20px!important;
	padding:8px 8px 8px 14px ;
	font-size:14px;
	margin-top:20px;
	overflow-x: auto;
  white-space: nowrap;
  border: 1px solid #eee;
  border-left:3em solid #eee;
}
.syntax-container {
  margin-top:20px;
}
.syntax-container .toolbar {
  display:none;
}
.syntax-container.syntax-theme-paper div.fixed.syntax {
    overflow-y:hidden;
    padding:0px!important;
    font-size:14px;
    box-shadow:0 0 0 0!important;
    background:none!important;
    line-height:20px!important;
}
.numbers-column {
    position:relative;
    background:#eee!important;;
}
.numbers-column:after {
content:"";
    display:block;
    width:100%;
    height:10px;
    position:absolute;
    background:#eee;
    left:0;
    bottom:-30px;
    height:30px;z-index:-1

}


/*========== /TYPO & GENERATED CONTENT ==========*/



.modal a.close-modal {
  position: absolute;
  top: -12.5px;
  right: -12.5px;
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  background: url(close.png) no-repeat 0 0;
}

.modal-spinner {
  display: none;
  width: 64px;
  height: 64px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-right: -32px;
  margin-top: -32px;
  background: url(spinner.gif) #111 no-repeat center center;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px;
}





/*========== RESPONSIVENESS ==========*/
@media only screen and (max-width: 480px) {

.player {
  width:240px;
  left:50%;
  margin-left:-120px;
}
.spip_image.size-3:not(.fullscreen) {
  float:none;
  clear:both;
  margin:20px auto 0;
  width:100%!important;
}
.content {
	width:auto;
}
}
@media only screen and (max-width: 320px) {
.spip_image.size-2:not(.fullscreen) {
  float:none;
  clear:both;
  margin:20px auto 0;
  width:100%!important;
}
}

/*========== /RESPONSIVENESS ==========*/

/* == FIX == */
/*.biglink > .title {
	display: none;
}*/

.header {
	text-align: center;
	bottom: auto;
	top: 5%;
	height: 80%;
}

.header > .title {
	position: absolute;
	width: 100%;
	bottom: 10%;
}

.header .biglink {
	display: inline-block;
}

.header .biglink a {
	background: rgba(255,255,255,0.2);
	color: white;
	border-color: white;
}

.header .biglink a:hover {
	background: #eee;
	color: #555;
}

.header .facebook{
	display: block;
	margin-top:1em;
	background: transparent url(img/facebook.png) no-repeat center;
	background-size: contain;
	height: 40px;
}

@media screen{
	.header .facebook span{
		display:none;
	}
}


/*.header > .spip_image img {
	height: 100px;
}*/