/*CLEARFIX*/
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

/*PARENTS*/
body{
    font-weight:300;
    font-family: "john-doe",serif;
    color:white;
    background-color:black;
    padding:60px 0;

}
.wrapper{
    padding:30px;
    position:relative;
    clear:both;
    box-sizing: border-box
}

.section{
    /* background:url(../images/lines_h_small_simple.png) center top; */
    background-repeat:repeat-x;
    padding-top:30px;
    margin-bottom:40px;
}    
  
/*LIGHTBOXES*/
#cboxContent *{
    font-family: "john-doe",serif;
    font-weight:300;
}

/*COMMON TAGS & EFFECTS*/
a{
    color:inherit;
    text-decoration: none;
    /*-webkit-transition: all 0.3s;*/ /* Safari */
    /*transition: all 0.3s;*/
}
strong{
    font-weight:700;
}
em{
    font-weight:500;
}
.grayscale{
    -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

/*HEADER*/
body.home header{
    margin-bottom:40px;
}
h1 img{
    display:block;
    width:100%;
    margin-bottom:0;
}
h1 span{
    display:block;
    font-size:80%;
}
#logo{
    margin-bottom:0;
}
#social{
    position:absolute;
    top:20px;
    right:20px;
    text-align:right;
    z-index:10;
    opacity:0.8;
}
    #social li{
        padding:0;
        list-style-type: none;
        display:inline-block;
        font-size:22px;
    }
    #social a{
        cursor:pointer;
    }

/*NAVIGATION*/
#nav a:hover{
    opacity:0.8;
}
#nav{
    margin-bottom:30px;
}
#nav{
    padding-top:5%;
    position:relative;
}
#nav .nav{
    background:url(../images/lines_h_small_double.png) center top;
    background-repeat:repeat-x;
    padding-top:15px;
    margin-bottom:0;
}

#nav .nav li{
    display:block; float:left; position:relative;
    line-height:40px;
    height:40px;
    padding-bottom:10px;
    width:25%;
    text-transform: lowercase;
    text-align:center;
    font-size:120%;
    background:url(../images/lines_h_small_simple.png) center bottom;
    background-repeat:repeat-x;
}
#nav .nav li:after{
    content:'';
    width:20px;
    position:absolute;
    right:0px;
    top:0;
    bottom:10px;
    background:url(../images/lines_v_small_simple.png) right center;
    background-repeat:repeat-y;
}
#nav .nav li:last-child:after, #nav .nav li:nth-child(4):after{
    display:none;
}
#nav .nav li.siamese{
    width:50%;
}
#nav .nav li a{
    border-bottom:1px solid transparent;
    text-decoration: none;
    padding-bottom:5px;
}
#nav .nav li a:hover{
    border-bottom:1px solid white;
    color:white;
}





/*NEWS*/
#news{
     padding-top:40px; 
}
#flexslider{
    position:relative;
    height:600px;
}
#flexslider .slides li{
    background-position:center center;
    background-size: cover;
    background-repeat:no-repeat;
    height:600px;
    width:100%;
    position:relative;
    margin-bottom:65px;
    overflow:hidden;
	z-index: 1000;
}

#flexslider .slides li strong{
}
#flexslider .slides li span{
    display:block;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background-color:rgba(255,255,255,0.7);
    padding:20px; 
    color:black;
}
.flex-control-paging li a{
    background:white;
}
.flex-control-paging li a.flex-active, .flex-control-paging li a:hover{
    background:gray;
}
.flex-direction-nav a{
    color:white;
}
.flex-direction-nav a:before{
    color:white;
}
#slider:after{
    content:'';
    background-color:rgba(77,175,152,0.7);
    display:block;
    width:100%;
    position:absolute;
    bottom:-20px;
    height:40px;
}
#slider .wrapper{
    position:relative;
}
#slider .wrapper div{
    display:block;
    position:absolute;
    right:0;
    top:0;
    height:580px;
    width:420px;
    padding:300px 20px 20px 20px;
    box-sizing:border-box;
    background-color:rgba(0,0,0,0.6);
    color:white;
}

/*SECTION TITLES*/
h2{
    font-size:18px;
    text-transform:uppercase;
    text-align:left;
    margin-bottom:20px;
    background-size:contain;
    background-repeat: no-repeat;
    font-weight:bold;
    background-position:center left;
}
h2.news{
    background-image:url(../images/h2_news.png);
    width:254px;
    height:29px;
    text-align:right;
    color:black;
    padding-top:43px;
    padding-right:45px;
}
h2.releases{
    background-image:url(../images/h2_releases.png);
    width:275px;
    height:37px;
    text-align:right;
    color:black;
    padding-top:45px;
    padding-right:100px;
}

h2.distribution{
    background-image:url(../images/h2_releases.png);
    width:275px;
    height:37px;
    text-align:right;
    color:black;
    padding-top:45px;
    padding-right:100px;
}

h2.promo{
    background-image:url(../images/h2_news.png);
    width:275px;
    height:37px;
    text-align:right;
    color:black;
    padding-top:45px;
    padding-right:100px;
}

h2.contact{
    background-image:url(../images/h2_tourdates.png);
    width:275px;
    height:37px;
    text-align:right;
    color:black;
    padding-top:45px;
    padding-right:100px;
}

h2.artists{
    background-image:url(../images/h2_artists.png);
    width:280px;
    height:88px;
    text-align:left;
    color:black;
    padding-top:12px;
    padding-left:95px;
}
h2.tourdates{
    background-image:url(../images/h2_tourdates.png);
    width:275px;
    height:37px;
    text-align:right;
    color:black;
    padding-top:45px;
    padding-right:100px;
}
h3{
    font-weight:500;
    font-size:20px;
    margin-bottom:10px;
}

/*RELEASES*/
#releases li{
    height:auto;
    list-style-type: none;
    margin-bottom:20px;
    position:relative;
    /* -webkit-transition: all 0.3s;*/ /* Safari */
    /*transition: all 0.3s;*/
}

/*#releases li img{
    display:block;
    width:100%;
    height:auto;
}*/
#releases li span{
    opacity:0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    /*width:100%;*/
    /*height:100%;*/
    overflow:hidden;
}
#releases li a{
	cursor: pointer;
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:20px;
    text-align:center;
    font-size:20px;
    line-height:1;
    font-weight:bold;
    color:white;
    /*-webkit-transition: all 0.6s; */ /* Safari */
    /*transition: all 0.6s; */
}
#releases li:hover span{
    opacity:1;
	-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

}
#releases li:hover a{
    background:rgba(0,0,0,0.75);
}
#releases .row{
    margin-bottom:0;
}
#releases li:hover{
    -moz-filter: none; 
    -o-filter: none;
    -webkit-filter: none;
    filter:none;
}




/*DISTRIBUTION*/

#distribution {
    padding-top:40px;
}

#distribution li{
    height:auto;
    list-style-type: none;
    margin-bottom:20px;
    position:relative;
    /* -webkit-transition: all 0.3s;*/ /* Safari */
    /*transition: all 0.3s;*/
}

#distribution li img{
    display:block;
    width:100%;
    height:auto;
}

#distribution .row{
    background:url(../images/lines_h_small_double.png) center top;
    background-repeat:repeat-x;
    padding-top:15px;
    position:relative;
}
#distribution .row3{
    background:url(../images/lines_h_small_double.png) center top;
    background-repeat:repeat-x;
    padding-top:15px;
    position:relative;
}




/*PROMO*/

#promo {
    padding-top:40px;
}

#promo li{
    height:auto;
    list-style-type: none;
    margin-bottom:20px;
    position:relative;
    /* -webkit-transition: all 0.3s;*/ /* Safari */
    /*transition: all 0.3s;*/
}

#promo li img{
    display:block;
    width:100%;
    height:auto;
}

#promo .row{
    background:url(../images/lines_h_small_double.png) center top;
    background-repeat:repeat-x;
    padding-top:15px;
    position:relative;
}
#promo .row3{
    background:url(../images/lines_h_small_double.png) center top;
    background-repeat:repeat-x;
    padding-top:15px;
    position:relative;
}








/*RELEASES*/
#releases2 {
    background:url(../images/lines_h_small_double.png) center top;
    background-repeat:repeat-x;
    padding-top:15px;
    position:relative;
}

#releases2 li{
    height:auto;
    list-style-type: none;
    margin-bottom:20px;
    position:relative;
    /* -webkit-transition: all 0.3s;*/ /* Safari */
    /*transition: all 0.3s;*/
}

#releases2 li img{
    display:block;
    width:100%;
    height:auto;
}
#releases2 li span{
    opacity:0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width:100%;
    height:100%;
    overflow:hidden;
}
#releases2 li a{
	cursor: pointer;
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:20px;
    text-align:center;
    font-size:20px;
    line-height:1;
    font-weight:bold;
    color:white;
    /*-webkit-transition: all 0.6s; */ /* Safari */
    /*transition: all 0.6s; */
}
#releases2 li:hover span{
    opacity:1;
	-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

}
#releases2 li:hover a{
    background:rgba(0,0,0,0.75);
}
#releases2 .row{
    margin-bottom:0;
}
#releases2 li:hover{
    -moz-filter: none; 
    -o-filter: none;
    -webkit-filter: none;
    filter:none;
}






/*ARTISTS*/
#artists .row{
    background:url(../images/lines_h_small_double.png) center top;
    background-repeat:repeat-x;
    padding-top:15px;
    position:relative;
}
#artists li{
    background:url(../images/lines_h_small_simple.png) center bottom;
    background-repeat:repeat-x; 
    border-bottom:none;
    padding-top:6px;
    padding-bottom:12px;
    list-style-type: none;
}
ul.points-de-conduite{
    overflow-x:hidden;
    position:relative;
}
ul.points-de-conduite li{
    display:block;
    float:none !important;
}
ul.points-de-conduite li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "}
ul.points-de-conduite  span:first-child {
    padding-right: 0.33em;
    background: black}
ul.points-de-conduite  span + span {
    float: right;
    padding-left: 0.33em;
    background: black}


#artists .row:before{
    content:'';
    position:absolute;
    display:block;
    width:40px;
    left:50%;
    margin-left:-20px;
    top:20px;
    bottom:20px;
    background:url(../images/lines_v_small_simple.png) center center;
    background-repeat:repeat-y; 
}





/*TOUR DATES*/
#tourdates .row{
    background:url(../images/lines_h_small_double.png) center top;
    background-repeat:repeat-x;
    padding-top:15px;
    position:relative;
}
#tourdates .row2{
    background:url(../images/lines_h_small_double.png) center top;
    background-repeat:repeat-x;
    padding-top:15px;
    position:relative;
}
#tourdates li{
    background:url(../images/lines_h_small_simple.png) center bottom;
    background-repeat:repeat-x; 
    border-bottom:none;
    padding-top:6px;
    padding-bottom:12px;
}
#tourdates li{
    list-style-type: none;
}
#tourdates ul{
    position:relative;
}
#tourdates a:hover span.date, #tourdates a:hover span.venue{
    color:white;
}
#tourdates .row:before{
    content:'';
    position:absolute;
    display:block;
    width:40px;
    left:50%;
    margin-left:-20px;
    top:20px;
    bottom:20px;
    /*background:url(../images/lines_v_small_simple.png) center center;
    background-repeat:repeat-y; */
}
#tourdates .row2:before{
    content:'';
    position:absolute;
    display:block;
    width:40px;
    left:50%;
    margin-left:-20px;
    top:20px;
    bottom:20px;
    
    background-repeat:repeat-y; 
}
#tourdates span.date{
    display:block;
    font-weight:bold;
    text-transform: uppercase;
}
#tourdates span.venue{
    /* text-decoration: underline; */
    display:block;
    /* margin-bottom:0.5em; */
}


#footer .copy{
    text-align:center;
    font-size:70%;
}

/*PAGE COMMON*/
content.twelve .wrapper, body.page .section:first-child{
    padding-top:0;
    background-image:none;
}

/*PAGE CATALOG ITEM*/
.coverart img{
    width:100%;
    height:auto;
}
#item{
    background:url(../images/lines_h_small_simple.png) center top;
    background-repeat:repeat-x;
    padding-top:15px;
    position:relative;
}
.details table{
    width:100%;
    /*background:url(../images/lines_h_small_double.png) center top;*/
    background-repeat:repeat-x;
    position:relative;
}
.details table tbody{padding-top:20px;}
.details th{
    font-weight:bold;
}
.details table:after{
    content:'';
    position:absolute;
    display:block;
    width:40px;
    left:30%;
    margin-left:-20px;
    top:10px;
    bottom:20px;
    /*background:url(../images/lines_v_small_simple.png) center center;*/
    background-repeat:repeat-y; 
}
.details th{
    width:30%;
    text-transform: uppercase;
}
.details td{
   /* width:70%;*/
}
.details ol, .details ul{
    margin-bottom:0;
}
.details th, .details td{
    /*background:url(../images/lines_h_small_simple.png) center bottom;*/
    background-repeat:repeat-x; 
    border-bottom:none;
    padding-top:6px;
    padding-bottom:12px;
}
.details table tr:first-child th, .details table tr:first-child td{
    padding-top:15px;
}
.details ol li{
    list-style-type:upper-roman !important;
    padding-left:10px;
    margin-bottom:0.5em !important;
}
.details .button{
    color:green;
    height:30px;
    line-height:30px;
    margin-bottom:0;
}
.details .button.out{
    color:red;
}
.coverart, details{
    position:relative;
}
#item .fb-share-button{
    position:absolute;
    right:0;
}
.details .about{
    font-size:80%;
}
.details .button{
    white-space:normal;
    height:auto;
}




/*TABS*/
.tabs {
  width: 100%;
  float: none;
  display: list-item;
  list-style-type: none;
  list-style: none;
  position: relative;
  margin: 0;
  text-align: left;
  
  /*display: inline-block;*/
  /*height: 1800px;*/
}
.tabs li {
  width: 300px;
  display: table-cell;
  float: none;
  list-style-type: none;
  list-style: none;
}

.tabs label {
  display: block;
  list-style-type: none;
  list-style: none;
  /*padding: 14px 21px;*/
  border-radius: 2px 2px 0 0;
  /*font-size: 18px;*/
  font-weight: normal;
  text-transform: uppercase;
  background: black;
  cursor: pointer;
  position: relative;
  top: 4px;
  color:white;
  border-top:1px solid white;
  border-left:1px solid white;
  border-right:1px solid white;
  margin-right:5px;
  opacity:0.8;
}
.tabs label:hover {
	opacity:1;
}
.tabs .tab-content {
  z-index: 2;
  display: none;
  overflow: hidden;
  width: 100%;
  font-size: 17px;
  line-height: 25px;
  padding: 0;
  position: absolute;
  top: 53px;
  left: 0;
  box-sizing: border-box;
  list-style-type: none;
  list-style: none;
}


/*FRISE STUFF*/
.frise{
    position:relative;
}
    .frise .line{
        display:block;
        content:'';
        position:absolute;
    }
    .frise .rosace{
        display:block;
        content:'';
        position:absolute; 
        background:url(../images/rosace.png) center center;
        width:25px;
        height:25px;
        background-repeat:no-repeat;
        background-size:contain;
    }
    .frise .line.top{
        background:url(../images/lines_h_big_double.png) center top;
        background-repeat:repeat-x;
        top:0;
        left:25px;
        right:25px;
        height:50px;
    }
    .frise .line.bottom{
        background:url(../images/lines_h_big_double.png) center bottom;
        background-repeat:repeat-x;
        bottom:0;
        left:25px;
        right:25px;
        height:50px;
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
    }
    .frise .line.left{
        background:url(../images/lines_v_big_double.png) left top;
        background-repeat:repeat-y;
        top:25px;
        bottom:25px;
        left:0;
        width:50px;
    }
    .frise .line.right{
        background:url(../images/lines_v_big_double.png) right top;
        background-repeat:repeat-y;
        top:25px;
        bottom:25px;
        right:0;
        width:50px;
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
    }
    .frise .rosace.topleft{left:-5px;top:-5px;}
    .frise .rosace.topright{right:-5px;top:-5px;}
    .frise .rosace.bottomleft{left:-5px;bottom:-5px;}
    .frise .rosace.bottomright{right:-5px;bottom:-5px;}



/*MEDIA QUERIES*/

@media (min-width: 1000px) {
    body.home #releases ul li:nth-child(5){
       margin-left:0;
    }
}
@media (max-width: 1000px) {
    #nav .nav li a{
        font-size: 80%;
    }
      #releases li a{
        font-size:80%;
    }
    #social{
        display:none;
    }
    #item .coverart, #item .details{
        width:100%;
        margin:auto;
        margin-bottom:30px;
        float:none;
    }
    #item .details{
        width:100%;
        margin:0;
    }
   
}
@media (max-width: 1000px) and (min-width: 800px) {
    body.home #releases li{
        width:30.6666666667%;
    }
    body.home #releases ul li:nth-child(4), body.home #releases ul li:nth-child(7){
        margin-left:0;
    }
     
}
@media (max-width: 800px) {
    body.home #releases li{
        width:48%;
    }
    body.home #releases ul li:nth-child(odd){
        margin-left:0;
    }
     #releases li a{
        font-size:80%;
    }
}
@media (max-width: 750px) {
    #nav{
        width:100%;
        margin-left:0;
        margin-right:0;
        padding-top:20px;
    }
    #logo{
        width:50%;
        margin-left:auto;
        margin-right:auto;
        float:none;
    }
  
}

@media (max-width: 750px) {
    #nav .nav li{
        width:50%;
    }
    #nav .nav li:nth-child(2):after, #nav .nav li.siamese:after{
        background:none;
    }
    #nav .nav li.siamese{
        width:100%;
    }
	#logo{
        width:80%;
    }
	
	.mobhide{
        display:none !important;
    }
}	
	
@media (max-width: 549px) {
    .mobhide{
        display:none !important;
    }
    #artists .row:before, #tourdates .row:before{
        background:none;
    }
    body.home #releases li{
        width:100%;
        margin-left:auto !important;
        margin-right:auto !important;
        clear:both;
        float:none;
    }
    #artists .columns:first-child, #tourdates .columns:first-child{
        margin-bottom:0;
    }
    #logo{
        width:80%;
    }
}
@media (max-width: 400px) {
    body{padding:15px;}
    
    h2{
        width:100%;
        padding:0 !important;
        background-image:none !important;
        color:white !important;
        font-size:27px;
        font-weight:bold;
        text-align:left !important;
        height:27px !important;
        line-height:27px;
        margin-bottom:20px;
    }
    .container{
        padding:0;
    }
    #flexslider, #flexslider .slides li{
        height:500px;
    }
}