/*
marges laterales :
    - big : 146
    - small: 73

colors : 
    - bleu fonce: #c90021
    - bleu clair : #dadada

    - rouge : #c90021
*/

body {
    background-color: #FFF;
}
html{
    width: 100%;
    height: 100%;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
    font-size: 14px;
    line-height: 1.3;
}
.mCSB_container{
    margin-right: 0;
}


h1 {
    font-weight: normal;
    font-size: 40px;
    font-family: 'Arial';
    margin: 0 0 0.5em;
}


h2 {
    font-weight: normal;
    font-size: 1.8em;
    line-height: 1em;
    padding: 0;
    margin: 0 0 1.2em;
}


h3 {
    font-weight: normal;
    font-size: 1.2em;
    padding: 0;
    margin: 1.7em 0 0.5em;
}


h4 {
    font-size: 1.3em;
    margin: 0 0 1em;
}

a {
    color: #c90021;
}
a.bouton, .mainalbum-buy p a{
    display: block;
    position: relative;
    color: #fff;
    background-color: #c90021;
    font-size: 1em;
    overflow: hidden;
    height: 35px;
    line-height: 35px;
    padding: 0 10px 0 0;
    margin: 5px 0;
    text-transform: capitalize;
}
a.bouton:hover, .mainalbum-buy p a:hover{
    color: #fff;
    background-color: #000;
    text-decoration: none;
}
a.bouton img, .mainalbum-buy p a img{
    max-width: 27px;
    width: 100%;
    height: auto;
    vertical-align: middle;
    display: inline-block;
    padding: 0;
    margin: 0 3px 5px;
}
a.bouton#bMail{
    margin-top: -4px;
}
a.bouton.centerbutton{
    text-align: center;
}
a:hover {
    color: #000;
    text-decoration: underline;
}

p{
    margin: 0.6em 0 0 0;
}

ul,ol{
    margin: 0;
}

/* "bolt_widget" is the default container for widgets in Bolt. */
.bolt_widget {
    background: #f2f2f2;
    border: solid 1px #e6e6e6;
    margin-bottom: 8px;
    padding: 6px;
}
.logger{
    display:none;
}
/* Background --------------------------------  */

#bgphoto{
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    background-size:cover;
    background-position: center center;
}



/**************************************************
* 
*                   Main Holders 
*
**************************************************/
.maincontentcontainer{
    display: block;
    position: relative;
    z-index: 100;
}
#maincontent{
    display: block;
    position: relative;
    padding: 4% 4% 4% 34%;
    max-height: 100%;
}


/*******      transitions       *******/
#bandeau {
    /*
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    */
}



/*******      Bandeau       *******/
#bandeau{
    position: fixed;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    width: 30%;
    height: auto;
    margin: 0;
    padding: 2%;
    background: rgba(0,0,0,0.8);

    z-index: 101;

    -moz-box-shadow: 0px 0px 24px 0px rgba(0,0,0,.13);
    -webkit-box-shadow: 0px 0px 24px 0px rgba(0,0,0,.13);
    -o-box-shadow: 0px 0px 24px 0px rgba(0,0,0,.13);
    box-shadow: 0px 0px 24px 0px rgba(0,0,0,.13);
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=24);
}
#imglogo{
    height: auto;
    width: auto;
}

#bandeau.ishome{
    width: 100%;
    padding: 4% 25%;
    margin: 0 auto;
    background: none;
}
#logoarea{
    margin-bottom: 1em;
    background-color: #fff;
    -moz-box-shadow: 0px 0px 24px 0px rgba(0,0,0,.13);
    -webkit-box-shadow: 0px 0px 24px 0px rgba(0,0,0,.13);
    -o-box-shadow: 0px 0px 24px 0px rgba(0,0,0,.13);
    box-shadow: 0px 0px 24px 0px rgba(0,0,0,.13);
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=24);
}
#bandeau.ishome #logoarea{
    position: relative;
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    top: auto;
    left: auto;
}
.logobox{
    position: relative;
    text-align: left;
    padding: 8%;
    margin: 0 -8%;
    background-color: #fff;
    overflow-y: auto;
}
#bandeau.ishome .logobox{
    text-align: center;
    padding-bottom: 5%;
    margin: 0;
}

/*******      Artistes       *******/
.mainalbum{
    position: relative;
}

.mainalbum .mainalbum-over{
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}
.mainalbum .mainalbum-over:hover{
    opacity: 0.1;
}
.mainalbum .mainalbum-info p{
    background: url('../images/album_quotes.png') no-repeat #FFF center;
    background-size: 100% auto;
    text-align: center;
    font-style: italic;
    line-height: 1.6em;
    padding: 1em 4em;
}
.albumplaylist{
    display: none;
}

.mainalbum-visu{
    margin-bottom: 1.2em;
}

/*******      Actus       *******/
#actus{
    display: none;
}
#bandeau.ishome #actus{
    display: block;
    margin: 0;
    background-color: #fff;
    padding: 0 8%;
    white-space: nowrap;
    text-align: center;
}
#actus .thumbitem{
    margin: 0 0 10%;
    padding: 0;
    width: 47%;
    max-width: 160px;
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
}
.thumbitem p{
    margin: 0;
    padding: .5em;
}
.thumbitem{
    border: 0em #fff solid;
    -webkit-transition: border 0.3s ease;
    -moz-transition: border 0.3s ease;
    -ms-transition: border 0.3s ease;
    -o-transition: border 0.3s ease;
    transition: border 0.3s ease;
}
.thumbitem.active, .thumbitem:hover{
    border: 0.4em #c90021 solid;
}
#actus .thumbitem:first-child{
    margin-right: 4%;
}
#actus .thumbitem img{
    height: auto;
    margin: 0;
}
#actus .thumbitem .thumbover{
    text-align: left;
    max-width: 100%;
    white-space: normal;
    background-color: #c90021;
}
#actus .thumbitem a{
    color: #000;
}
#actus .thumbitem a:hover{
    color: #fff;
}

/*******      Menus       *******/
.menuholder{
    background-color: #fff;
    padding: 8%;
    margin: 0 -8% 8%;
}
#bandeau.ishome .menuholder{
    margin: 8% 0;
}
.menuholder li{
    text-align: left;
    list-style-type: none;
    line-height: 1.1em;
    font-size: 1.1em;
    border-bottom: 1px dotted #edd;
}
#bandeau.ishome .menuholder ul, #bandeau.ishome .menuholder li{
    font-size: 1.3em;

}
#bandeau .menuholder ul li.active, #bandeau .menuholder ul li.active a{
    font-weight: bold;
    color: #000;
    text-align: right;

}

/*******      Mediabox       *******/
#playerholder, #playlistholder{
    display: none;
}
div.langbtnHolder{
    display: block;
    position: relative;
    width: 100%;
    max-height: 60px;
    margin: 0 0 3px;
    padding: 0;
    background-color: #c90021;
    overflow: hidden;
    text-align: center;
    vertical-align: bottom;
}
div.langbtnHolder a.langbtn, div.langbtnHolder span.langbtn{
    vertical-align: middle;
    margin: 0 0 3px;
    padding: 0;
    width: 100%;
    line-height: 28px;
    color: #fff;
    font-size: 1em;
}
div.langbtnHolder a.langbtn:hover, div.langbtnHolder span.langbtn.active{
    color: #000;
    text-decoration: none;
}
span.langbtnFR.active:after {
    content: ' | ';
}
span.langbtnEN.active:before {
    content: ' | ';
}
a.squaredicon{
    display: inline-block;
    position: relative;
    width: 22%;
    height: auto;
    max-width: 60px;
    max-height: 60px;
    margin: 0;
    padding: 0;
    background-color: #c90021;
}
a.squaredicon:hover{
    background-color: #000;
}
a.squaredicon img{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
}
#mediabox.ishome #socialholder{
    padding: 0;
    white-space: nowrap;
    text-align: center;
}


/*******      Footer info       *******/
.footerbaseline{
    padding: 8%;
    background-color: #fff;
    opacity: 1;
}
.footerbaseline p{
    font-size: 0.6em;
}


/*******      Submenus       *******/
#submenus li.thumbitem{
    width: 100%;
    display: inline-block;
    vertical-align: top;
    margin: 0 0 1em;
}
#submenus .thumbover{
    position: relative;
    height: auto;
    left: auto;
    right: auto;
    bottom: auto;
    background-color: rgba(0,0,0,0.7);
    overflow: hidden;
}

.thumbitem a, .thumbitem a:hover, .thumbitem.active a, .thumbitem.active a:hover{
    color: #fff;
    text-decoration: none;
}
#submenus .thumbover p{
    padding: 0.5em;
    white-space: normal;
    line-height: 1em;
}



/*******      BLOCS & COMMONS       *******/
.bloccontent{
    display: block;
    position: relative;
    padding: 8%;
    margin: 0 0 4%;
    background-color: #fff;
    width: auto;
    height: auto;
}
.bloclisting .btnback{
    position:absolute;
    top: 0;
}


/*******      IMAGES       *******/
.galeriethumbs-holder{
    position: relative;
}
.galeriethumbs-holder a{
    padding: 0;
    margin: 0;
}



.galeriethumbs-holder img{
    max-width: 49%;
    margin: 0 0 0.4em;
    padding: 0;
}


/*******      LOADER       *******/
#loader{
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.9);
}
#loader p{
    margin: 20% auto;
    height: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 2em;
}



/* Styles for 'min-width 580px' : mobile -----------------------------------------  */
@media only screen and (min-width: 580px) {
    #submenus li.thumbitem{
        width: 48%;
    }

}
/* Styles for 'min-width 860px' : mobile->pad -----------------------------------------  */
@media only screen and (min-width: 860px) {
    #submenus li.thumbitem{
        width: 49%;
    }

}



/* Styles for 'min-width 1025' : screen -----------------------------------------  */
@media only screen and (min-width: 1025px) {


    /**************************************************
    * 
    *                   Main Holders 
    *
    **************************************************/

    body, div, dl, dt, dd, ul, ol, li, pre, form, p, blockquote, th, td {
        font-size: 12px;
        line-height: 1.3;
    }
    .maincontentcontainer{
        display: block;
        position: relative;
        z-index: 100;
        max-height: 62%;
        overflow : hidden;
        height: 60%;
        max-width: 100%;
        max-height: 100%;
    }
    #maincontent{
        display: block;
        position: relative;
        padding: 4% 8% 0%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
    #maincontent.actus{
        display: block;
        position: relative;
        padding: 4% 0 34%;
    }

    /*******      BLOCS COMMONS       *******/


    .bloclisting{
        position: fixed;
        display: block;
        top: 4%;
        bottom: auto;

        max-height: 96%;

        background-color: #fff;
        -moz-box-shadow: 0px 0px 24px 0px rgba(0,0,0,.13);
        -webkit-box-shadow: 0px 0px 24px 0px rgba(0,0,0,.13);
        -o-box-shadow: 0px 0px 24px 0px rgba(0,0,0,.13);
        box-shadow: 0px 0px 24px 0px rgba(0,0,0,.13);
        filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=24);
        overflow-y: auto;
    }
    .bloclisting.bloclong{
        max-height: 70%;
    }
    .blocgauche{
        left: 8%;
        width: 20%;
    }
    .bloccentre{
        left: 30%;
        width: 40%;
    }
    .blocdroite{
        right: 8%;
        width: 20%;
    }

    .bloccontent{
        display: block;
        position: relative;
        padding: 0.5em !important;
        margin: 0;
        background-color: #fff;
        width: auto;
        height: auto;
    }

    .bloccontent p:last-child{
        margin-bottom: 0;
    }



    /*******      Bandeau       *******/
    #bandeau{
        top: auto;
        bottom: 0;
        width: 100%;
        height: 20%;
        min-height: 110px;
        max-height: 160px;
        padding: 1% 0;
        overflow: visible;
        background-color: #fff;
    }

    #bandeau #logoarea{
        position: absolute;
        display: block;
        width: 20%;
        height: auto;
        margin: 0;
        padding: 1.5%;
        top: auto;
        bottom: 100%;
        left: 8%;
    }

    #bandeau.issmall #logoarea{
        top: 0;
        bottom: auto;
    }
    #bandeau.ishome #imglogo{
        max-height: none;
    }
    #imglogo{
        max-height: 100px;
    }

    /* Styles 12" screen -----------------------------------------  */
    @media only screen and (max-height: 700px) {
        #imglogo{
            max-height: 80px;
        }
    }

    #bandeau.ishome #logoarea{
        position: absolute;
        display: block;
        width: 340px;
        height: auto;
        margin: 0 0 0 -170px;
        padding: 1.5%;
        top: -161px;
        bottom: auto;
        left: 50%;
    }
    #bandeau.ishome{
        padding: 0;
        margin: 0;
        top: 40%;
        height: 150px;
        bottom: auto;
        overflow: visible;
        background: #fff;
    }

    .logobox{
        position: relative;
        padding: 0;
        margin: 0;
        background-color: #fff;
        overflow-y: auto;
        max-width: 340px;
    }
    #bandeau.ishome .logobox{

    }


    /*******      Actus       *******/
    #bandeau.ishome #actus{
        display: block;
        padding: 0;
        margin: 0;
        max-width: 340px;
    }
    #actus .thumbitem{
        margin: 0;
    }
    .actucontainer{
        position: fixed;
        top: 0;
        bottom: 19%;
        left: 0%;
        right: 0;
        padding: 1.5% 8%;
        overflow-x: auto;
    }
    .actuitem{
        position: relative;
        white-space: normal;
        width: 23.8%;    
        min-width: 250px;
        max-width: 322px;
        height: auto;
        padding: 1.5%;
        vertical-align: top;
        margin: 0 1em 0 0;
        display: inline-block;
        overflow-y: auto;
    }

    .actuitem .imageholder, .imageholder.bottommargin{
        margin-bottom: 2em;
    }

    /*******      Menus       *******/
    .menuholder{
        right: auto;
        left: 0;
        top: 0;
        background-color: #fff;
        padding: 0;
        margin: 0;
        width: 8%;
        min-width: 90px;
    }
    #bandeau.ishome .menuholder{
        position: absolute;
        top: 0.4em;
        right: 50%;
        left: auto;
        margin: 0 180px 0 0;
        padding: 0;
        font-size: 1.2em;
    }
    .menuholder ul, .menuholder li{
        text-align: right;
        font-size: 1em;
        border-bottom: none;
    }
    #bandeau.ishome .menuholder ul, #bandeau.ishome .menuholder li{
        font-size: 1em;
    }
    #bandeau .menuholder ul li.active a{
        font-weight: bold;
    }

    /*******      Mediabox       *******/

    a.squaredicon {
        width: 100%;
        max-width: 40px;
        max-height: 40px;
    }
    a.squaredicon img{
        margin: 0;
        padding: 0;
        max-width: 40px;
        max-height: 40px;        
    }
    div.langbtnHolder{
        display: inline-block;
        width: 40px;
        height: 40px;
        margin: 0;
    }
    div.langbtnHolder a.langbtn, div.langbtnHolder span.langbtn{
        font-size: 1em;
        line-height: 14px;
    }
    span.langbtnFR.active:after {
        content: '';
        display: block;
    }
    span.langbtnEN.active:before {
        content: '';
        display: block;
    }
    #mediabox.ishome #socialholder .squaredicon{
        display: none;
    }
    #mediabox #socialholder{
        position: absolute;
        bottom: 100%;
        top: auto;
        right: 28%;
        margin: 0 1.7% 0 0;
    }

    #mediabox.ishome #socialholder{
        right: 50%;
        margin-right: 180px;
        bottom: 100%;
    }

    #bandeau.issmall #mediabox #socialholder{
        top: 0;
        bottom: auto;
    }

    /*******      Footer info       *******/
    .footerbaseline{
        position: absolute;
        bottom: 100%;
        left: 28%;
        text-align: left;
        max-width: 23%;
        padding: 0.6em;
        margin: 0;
        opacity: 0;
        -webkit-transition: opacity 0.5s ease-out; 
        -moz-transition: opacity 0.5s ease-out;
        -ms-transition: opacity 0.5s ease-out; 
        -o-transition: opacity 0.5s ease-out;
        transition: opacity 0.5s ease-out
    }
    .footerbaseline p {
        margin: 0;
    }
    #bandeau.issmall .footerbaseline{
        top: 0;
        bottom: auto;
    }
    #mediabox:hover .footerbaseline{
        opacity: 1;
    }
    #bandeau.ishome .footerbaseline{
        display: none;
    }


    /* PLAYER AUDIO -----  */
    #playerholder{
        height: 40px;
        width: 20%;
        display: block;
        position: absolute;
        right: 8%;
        bottom: 100%;
        top: auto;
    }
    #playerholder, #playerholder p {
        font-size: 12px;
    }

    #bandeau.issmall #playerholder{
        top: 0;
        bottom: auto;
    }
    #playerholder .squaredicon{
        background-color: #dadada;
    }
    #playerholder .squaredicon:hover{
        background-color: #fff;
    }
    #playerholder .audioinfo{
        display: block;
        position: relative; 
        background-color: #c90021;
        color: #fff;
        width: 100%;
        margin: 0;
        padding: 0.2em 50px;
        height: 100%;
    }

    .progressHolder{
        display: none;
        position: absolute;
        bottom: 3px;
        left: 50px;
        right: 50px;
        height: 5px;
        background-color: #dadada;
    }
    .playhead{
        position: absolute;
        left: 0;
        bottom: 0;
        height: 5px;
        width: 5px;
        background-color: #000;
    }

    p.song-title{
        font-weight: bold;
        line-height: 1.1em;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    p.song-artist{
        font-style: italic;
        line-height: 1.1em;
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
    }
    #playeraudio iframe{
        max-height: 210px;
    }
    #bPlay, #bPause{
        position: absolute;
        bottom: 0;
        left:0;
        display: none;
    }
    #bAudioList{
        position: absolute;
        bottom: 0;
        right:0;
    }

    #playlistholder{
        position: absolute;
        display: block;
        width: 20%;
        overflow-y: auto;
        background-color: #dadada;
        bottom: 100%;
        margin-bottom: 40px;
        right: 8%;
        -webkit-transition: height 0.5s ease-out; 
        -moz-transition: height 0.5s ease-out;
        -ms-transition: height 0.5s ease-out; 
        -o-transition: height 0.5s ease-out;
        transition: height 0.5s ease-out;
    }

    #bandeau.issmall #playlistholder{
        margin-bottom: 0;
    }
    #playlistholder.opened{
        height: 250px;
    }
    #playlistholder.closed{
        height: 0;
    }
    #playlistholder ul{
        margin: 0;
        padding: 0;
    }
    #playlistholder #playlistcontent{
        padding: 5px 5px 23px;
        font-size: 16px;
        line-height: 16px;
    }
    #playlistholder ul li{
        list-style-type: none;
    }
    #playlistholder ul li a{
        display: block;
        font-size: 16px;
        line-height: 20px;
        width: 100%;
        padding: 2px 5px;
        color: #000;
    }
    #playlistholder ul li a.active{
        color: #fff;
        font-weight: bold;
    }
    #playlistholder ul li a:hover{
        background-color: #c90021;
        color: #fff;
        text-decoration: none;
    }
    .playlistfooter{
        position: absolute;
        width: 100%;
        bottom: 0;
        height: 23px;
    }
    #playlistholder .playlistfooter p {
        color: #fff;
        font-size: 12px;
        line-height: 16px;
        padding: 3px;
        text-align: right;
    }


    #bandeau.ishome #playerholder, #bandeau.ishome #playlistholder{
        right: auto;
        left: 50%;
        margin-left: 180px;
    }



    /*******      Submenus       *******/
    #submenus{
        position: absolute;
        display: block;
        left: 8%;
        margin: 0;
        padding: 1em;
        right: 0;
        top: 0;
        width: 90%;
        bottom: 0;
    }
    #submenus li.thumbitem{
        position: relative;
        max-width: 130px;
        height: auto;
        display: inline-block;
        vertical-align: top;
        margin: 0 1em 1em 0;
    }
    #submenus .thumbover{
        display: block;
        position: absolute;
        height: 33%;
        left: 0;
        right: 0;
        bottom: 0px;
        background-color: rgba(0,0,0,0.7);
    }
    .thumbitem a:hover, .thumbitem.active a, .thumbitem.active a:hover{
        color: #fff;
        text-decoration: none;
    }
    #submenus .thumbover p{
        padding: 0.4em 0.5em;
        white-space: normal;
        line-height: 1em;
    }
    #submenus .thumbitem.active .thumbover p{
        padding: 0.4em 0.5em;
        white-space: normal;
        line-height: 0.9em;
    }

}



/* Styles for 'min-width 1025' : screen -----------------------------------------  */
@media only screen and (min-width: 1280px) {


    /**************************************************
    * 
    *                   Main Holders 
    *
    **************************************************/

    body, div, dl, dt, dd, ul, ol, li, pre, form, p, blockquote, th, td {
        font-size: 14px;
        line-height: 1.3;
    }
}




/* Styles for Firefox -----------------------------------------  */

.bloclisting{
    padding: 1.4em 1.2em !important;
}
.actuitem{
    padding: 1.6em !important;
}
.bloccentre{
    padding: 3.3em 3em !important;
}
/*
@-moz-document url-prefix() { 
    #maincontent{
        padding: 4% 8% 4%;
    }

    .bloclisting{
        max-height: 56%;
        padding: 1.4em 1.2em !important;
    }
    .actuitem{
        padding: 1.6em !important;
    }
    .bloccentre{
        padding: 3.3em 3em !important;
    }
}

/* Styles for IE 10+ -----------------------------------------  */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
    #maincontent{
        padding: 4% 8% 4%;
    }

    .bloclisting{
        max-height: 56%; 
    }
}