@font-face {
    font-family: 'open_sanslight';
    src: url('../fonts/opensans-light-webfont.eot');
    src: url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-light-webfont.woff2') format('woff2'),
         url('../fonts/opensans-light-webfont.woff') format('woff'),
         url('../fonts/opensans-light-webfont.ttf') format('truetype'),
         url('../fonts/opensans-light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/opensans-regular-webfont.eot');
    src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('../fonts/opensans-regular-webfont.woff') format('woff'),
         url('../fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('../fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/opensans-bold-webfont.eot');
    src: url('../fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-bold-webfont.woff2') format('woff2'),
         url('../fonts/opensans-bold-webfont.woff') format('woff'),
         url('../fonts/opensans-bold-webfont.ttf') format('truetype'),
         url('../fonts/opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

div, p, span {
	color: #777777;
	font-size: 14px;
}

a {
	color: #777777;

}
a:hover, a:active {
	text-decoration: none;
}

.clearfix:after {
    clear: both;
}

.help-block {
	color: #FF0000;
}

.action {position:absolute; top:3px; right:10px;}
.action--right {text-align:right;}
.action--left {text-align:left;}

.action__button .fa {
	color:#FFF;
	border:none;
	background-color:#2980b9;
	border-radius:50%;
	padding:5px;
	
	
}

.action--replace {}
.action--add {}

.header {
	position: relative;
    padding-bottom: 33px;
	background:#1a527a url('/images/front/header_bg.jpg') no-repeat top center;
		
	-webkit-box-shadow : 0px -10px 20px 2px #000;
	box-shadow: 0px -19px 50px 20px rgba(0, 0, 0, 0.42);
	z-index:5;
	
}

.header__top {
	position:relative;
    background: rgb(39, 43, 49);
    border-bottom: 4px solid rgb(26, 28, 33);
	
	display: flex;
	
	-webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -o-flex-flow: row wrap;
    flex-flow: row wrap;
	
	-webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -o-justify-content: flex-end;
    justify-content: flex-end;
	
	-webkit-align-items: center;
	-moz-align-items: center;
	-o-align-items: center;
	align-items: center;
}

.header__top {

}

.header__top .form-control {
	color:#CCC;
	background-color:#3b3b3b;
	border: none;
	border-radius:0px;
}

.header__top .btn-default {
	background-color:#717171;
	border: none;
	color:#FFF;
	border-radius:0px;
	margin-top:-3px;
}


.header__top a:hover {
	color:#88898c;
}


.header__search {
	position:relative;
	flex-basis: 60%;
	padding: 6px 15px 6px 6px; 
	border-right: solid #1a1c21 3px;
}

@media only screen and (min-width : 768px) {
	.header__search {
		flex-basis: 30%;
	}
}

.header__searchloader {
	position:absolute;
	top:0;
	right: 30px;
	width:25px;
	height:25px;
	background:transparent url('/images/front/loading.gif') no-repeat center center;	
}

.header__submit {
	flex-basis: 40%;
    padding: 6px 6px 6px 15px ;
}

@media only screen and (min-width : 768px) {
	.header__submit {
		flex-basis: 15%;
	}
}


.header__submit a {
	font:600 12px/17px "Open Sans",sans-serif;
	color:#FFFFFF;	
}




.header__bottom {}



.header__logo {
    padding-top: 46px;
    padding-left: 15px;
    float: left;
}




.hero {
	position:relative;
	width:100%;
	height:300px;
	background-size: cover;
	background-position:top center;
	

}

.hero__image {
	position:relative;
}

.hero__headline {
	position:absolute;
	top:18%;
	width:100%;
	text-align:center;
	padding: 0 20px;
}

.hero__headlinetxt1{
	font-family:'open_sansregular',arial,sans-serif;
	font-size:30px;
	line-height:30px;
	color:#FFFFFF;
}

.hero__headlinetxt2{
	font-family:'open_sansregular',arial,sans-serif;
	font-size:30px;
	line-height:30px;
	color:#FFFFFF;
}

.hero__headlinetxt3{
	font-family:'open_sansregular',arial,sans-serif;
	font-size:30px;
	line-height:30px;
	color:#FFFFFF;
}


@media only screen and (min-width : 768px) {
	.hero__headline  {
		top:25%;
		font-size:60px;
		line-height:60px;
		padding: 0px;
	}
	
	.hero__headlinetxt1{
		font-family:'open_sansregular',arial,sans-serif;
		font-size:28px;
		line-height:35px;
	}

	.hero__headlinetxt2{
		font-family:'open_sansregular',arial,sans-serif;
		font-size:55px;
		line-height:55px;
	}

	.hero__headlinetxt3{
		font-family:'open_sansregular',arial,sans-serif;
		font-size:45px;
		line-height:45px;
	}

}


.hero__headline a{
	font-size:20px;
}

.hero--home {
	background-image:url('/images/front/hero-home.jpg');
	height:320px;
}

@media only screen and (min-width : 768px) {
	.hero--home  {
		height:520px;
	}
}


.hero--page {
	position:relative;
	background-image:url('/images/front/hero-page.jpg');
	background-position: center center;
}

.hero--release {
	position:relative;
	background-image:url('/images/front/hero-release.jpg');
	min-height: 400px;
}

@media only screen and (min-width : 768px) {
	.hero--release {
		min-height: 250px;
	}
}
	

.hero--release  .hero__goodcover {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:0;
	background-size:cover;
	filter: blur(10px);
	-webkit-filter: blur(10px);
	-moz-filter: blur(10px);
	-o-filter: blur(10px);
	-ms-filter: blur(10px);
	filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius='10');
  
}

.hero--release  .hero__infos {
	position:relative;
	z-index:1;
}

.hero--release .hero__container {
	display: flex;
	margin-top: 50px;
	
	-webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -o-flex-flow: row wrap;
    flex-flow: row wrap;

    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -o-justify-content: space-around;
    justify-content: space-around;
	
	-webkit-align-items: center;
	-moz-align-items: center;
	-o-align-items: center;
	align-items: center;
}

.hero--release .hero__leftcolumn {
	position: relative;
	
}

.hero--release .hero__cover {
	width: 200px;
	text-align:right;
}

.hero--release .hero__cover img {	
	-webkit-box-shadow : 0px 0px 10px 1px #122f45;
	box-shadow: 0px 0px 10px 1px #122f45;
}

.hero--release .hero__rightcolumn {
	background-color: rgba(0,0,0,0.2);
	padding:15px;
	text-align: left;
}

.hero--release .hero__title {
	color:#FFF;	
	font-size: 22px;
}

.hero--release .hero__date {
	color:#FFF;
	font-size: 15px;
}


	



.breadcrumb {
	position:relative;
	padding: 10px;
	margin-bottom: 20px;
}

.breadcrumb__item {
	border:1px solid #efefef;
	color:#777777;
	padding:5px;
	margin-right:5px;

}


.headline {
	position:relative;
	margin-top: -80px;
	margin-bottom: 80px;
}

.headline__block {
	background-color:#FFF;
	padding: 30px;
	text-align:center;
	box-shadow: lightgrey 0.02em 4px 0;	
}

.headline__picto {
	font-size: 3.462em;
    line-height: 1em;
    color: #2980b9;
    text-shadow: 0 1px rgba(32,99,142,0.96);
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
	margin-bottom:20px; 
}
	
@media only screen and (min-width : 768px) {
	.headline__picto {
		font-size: 6.462em;
	}
}

	
.headline__title {
	font: 300 1.5em/0.95em "Open Sans",sans-serif;
	text-transform: uppercase;
	color: #31353d;
}	

@media only screen and (min-width : 768px) {
	.headline__title {
		font: 300 2.5em/0.95em "Open Sans",sans-serif;
	}
}
	
.content {
	position:relative;
	background-color:#FFF;
	min-height:150px;
}

.content__container {
	position:relative;
	margin-top:20px;
}

.content__container--home {
	position:relative;
	margin-top: -20px;
}


.block {position:relative}

.block--ad {margin-bottom: 20px;}


.block__header {
	position: relative;
	text-transform: uppercase;
	font-size: 18px;
	margin: 0 0 20px;
	font-family: "Open Sans", sans-serif;
    font-weight: 600;
	color: #FFFFFF;
}

.block__header--primary {
    background: #2980b9;
    -webkit-box-shadow: #206490 0.02em 4px 0;
	box-shadow: #206490 0 4px 0;
}

.block__header--dark {
    background: #272b31;
    -webkit-box-shadow: #1a1c21 0.02em 4px 0;
	box-shadow: #1a1c21 0 4px 0;
}

.block__header--grey {
	color: #344046;
    border: 1px solid #efefef;
    border-bottom: none;
    background: #fbfbfb;
}


.block__header--page {
	color: #344046;
	font-size: 30px;

}

.block__title {
	position:relative;
	font: 600 20px/22px "Open Sans", sans-serif;
	padding:0 25px;
	line-height:1.1;
	color: #FFFFFF;
}

.block__header--primary .block__title {padding:17px;}
.block__header--grey .block__title {color:#777777; padding:17px;}
.block__header--page .block__title {color:#777777;}


.block__tab {
	position:relative;
	display:block;
	float:left;
	font: 600 20px/22px "Open Sans", sans-serif;
	padding:0 25px;
	text-decoration:none;
	color:#FFF;
	line-height:55px;
}

.block__header a:hover, .block__header .block__tab--active  {
	moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;

	color:#FFF;
	text-decoration:none;
	background-color:#2980b9;
	box-shadow: #206490 0.02em 4px 0;
	-webkit-box-shadow: #206490 0.02em 4px 0;
}

.block__content {
	position:relative;
	margin-bottom:40px;
}


.block__headline{
	position:relative;
	margin-bottom:40px;
}




.block__list {
	list-style: none;
	list-style-position: inside;
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}


.block__list a {
	font: 400 15px/18px "Open Sans", sans-serif;
    color: #ababab;
    display: block;
    padding: 17px 30px 19px 27px;
    word-break: break-all;
	moz-transition: background 0.2s linear;
    -o-transition: background 0.2s linear;
    -webkit-transition: background 0.2s linear;
    transition: background 0.2s linear;
}

.block__list a:hover, .block__list .active {
	text-decoration:none;
	color:#FFF;
	background-color:#3498db;
}
.block__list li:nth-child(odd) {
	background-color:#f1f1f1;
}

.block__list li:nth-child(even) {
	background-color:#E2E2E2;
}

.release {
	moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
	
	margin-bottom: 20px;
}

.release img {
	moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear;
	
	-ms-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg);
}

.release--list {
	cursor: pointer;
	min-height: 150px;
	moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.release--hover {
	background-color:#E2E2E2;
}

.release--hover .release__image {
	background-color:transparent;
}

.release--hover img {
	-ms-transform: rotate(7deg); 
    -webkit-transform: rotate(7deg); 
    transform: rotate(7deg);
}


.release__info {position:relative; padding:5px;}
.release__info--bg {background-color:#f4f4f4;}

.release__image {padding:40px; background-color:#f4f4f4;}
.release__title {position:relative; padding:10px; min-height:100px; }
.release__band {display:block; font-family:"Open Sans", sans-serif; font-size:14px; font-weight:800; color:#344046;}
.release__album {display:block; font-family:arial, sans-serif; font-size:14px; color:#344046;}

.release .noavailable {font-style:italic; opacity:0.5;}

.page {}
.page__link {text-decoration:underline;}


.footer {
	position: relative;
}

.footer__disclaimer {
	position:relative;
	background-color:#f4f4f5;
	padding:20px;
	text-align:center;
	color:#FFF;
	
}
.footer__disclaimer a {
    color: #959393;
	text-decoration:underline;
}


.footer__twitter a:before {content: "\f081";}
.footer__facebook a:before {content: "\f082";}



.footer__links {
	background-color: #f9f9f8;
	padding: 20px 10px;
	text-align: center;
}


.footer__category {
	font: 600 14px/17px "Open Sans", sans-serif;
    color: #3498db;
	margin: 15px 0;
	text-transform: uppercase;
	text-align: center;
}

.footer__link {
	display:block;
	margin-bottom:5px;
	font: 400 12px/17px Arial, Helvetica, sans-serif;
	color: #3a3a3a;
}


@media only screen and (min-width : 768px) {

	.footer__category {
		text-align: left;
	}
	
	.footer__link {
		text-align: left;
	}
	
}



.footer__bottom {
	background-color:#31353d;
	padding:10px;
	font-size:10px;
	text-align:center;
	color:#6f7584;
}

.footer__copyright {
	display: flex;
	
	-webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -o-flex-flow: row wrap;
    flex-flow: row wrap;

    -webkit-justify-content: center;
    -moz-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
	
	-webkit-align-items: center;
	-moz-align-items: center;
	-o-align-items: center;
	align-items: center;	
}







.category {
}

.category h1 {
	font-family: 400 25px/30px "Open Sans",sans-serif;
}

.category--article {
	border-top: solid #efefef 1px;
	margin-top: 40px;
}

.category--item {
	color: #1b537c;
	border: solid #CCC 1px;
	padding: 5px;
	margin:5px;
	
	moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.category--item:hover {
	color: #FFF;
	border: solid #3498db 1px;
    background-color: #3498db;
	
}



.release {

}

.release h1 {
	font-family: 400 25px/30px "Open Sans",sans-serif;
}

.release--article {
	border-top: solid #efefef 1px;
	margin-top: 40px;
}


.release--item {
	display: flex;

	padding: 5px;
	border: solid #CCC 1px;
	margin:5px;
	color: #1b537c;

	-webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -o-flex-flow: row wrap;
    flex-flow: row wrap;

    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
	
	moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.release--item .release__date {width: 17%; color: inherit;}
.release--item .release__artist {width: 40%; color: inherit;}
.release--item .release__name {width: 43%; color: inherit;}


.release--item:hover {
	color: #FFF !important;
	border: solid #3498db 1px;
    background-color: #3498db;
	
}


/* MODAL */
.modalbox {
 padding:20px; 
}

.modalbox__title {
	font: 300 1.5em/0.95em "Open Sans",sans-serif;
	text-transform: uppercase;
	margin: 0 0 20px 0; 
	border-bottom: solid #f9f9f9 10px;
}

.modalbox__title h1 {
	margin: 10px 0 20px 0; 
}

.modalbox__content {}
.modalbox__release {
	position: relative;
	margin-bottom: 20px;	

}

.modalbox .btn  {
	margin-top:20px;
}

.modalbox__warning {
	font-size: 12px;
	margin: 10px 0 20px 0;
	padding:5px;
	border:dashed 1px #CCC;
}





/* AUTOCOMPLETION */


.twitter-typeahead {
	width:100%;
}

.tt-query, .tt-hint {
    border: 2px solid #CCCCCC;
    font-size: 20px;
    height: 34px;
    outline: medium none;
    padding: 8px 12px;
	width:100%;
}

.twitter-typeahead:focus {
    border: 1px solid #0097CF;
}
.tt-query {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
    color: #FFF;
}
.tt-dropdown-menu {
	color:#FFF;
    background-color: #3b3b3b;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 5px;
	font-size: 20px;
    padding: 8px 0;
    width: 100%;
}

@media screen and (min-width: 768px) {
	.tt-dropdown-menu {
		min-width: 350px;
	}
}

.tt-suggestion {
    font-size: 16px;
    line-height: 24px;
    padding: 3px 20px;
}
.tt-suggestion.tt-cursor {
    background-color: #0097CF;
    color: #FFFFFF;
}
.tt-suggestion p {
    margin: 0;
	 color: #FFFFFF;
}
.gist {
    font-size: 14px;
}





/* CAPTCHA */

.g-recaptcha {
	margin:30px 0;
}