@import url("https://fonts.googleapis.com/css?family=Exo:700");



/*CLEARFIX*/
.clearfix:after {content: ".";  display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
.clearfix { display: inline-block;} 
html[xmlns] .clearfix {display: block;} 
* html .clearfix {height: 1%;}

/*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;}

/*GLOBALS*/
a{text-decoration:none; color:#fff }
a:hover { color:#666666 }
body, hmtl{background: #444; font-family: "Source Sans Pro", "Open Sans", sans-serif; line-height: 24px; font-size: 16px;}

h1{ font-size:36px; color:#fff;}
h2{font-size:20px;  margin:15px 0 40px; color:#fff; }

.row h2 {color:white; font-size: 20px}
.row.active h2 {color:#f5d803;}
.row p {color:white;text-decoration: none; font-size: 16px; line-height: 1.5;}
h3 {font-size:18px;  }
h4 {font-size:15px;  }

.caps {text-transform: uppercase;}

.blockquote {
text-align: right;
}
.blockquote p  {
font: 20px Times, serif;
color: white;
 font-style: italic;
margin-top: 15px;
}
.blockquote cite {
font-family: "Source Sans Pro", "Open Sans", sans-serif;
color:#f5d803;
font-size: 18px;
   }



ul.navsocial {
  margin: 0;
  padding: 0;
  }
ul.navsocial li {
  display: inline;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  top: 0px;
  }
    

#navsocial{
  height:40px;
  width:400px;
  position: absolute;
  left: 0;  
}

#navsocial ul{position:relative;}

/*NAV*/
#nav-wrap{
 
  /*background-image: url("images/bgmenu.png");*/
  background-color: #000;
  height:40px;
  position:fixed;
  top:0;
  left: 0;
  width:100%;
  z-index:100;
  display: block;
}

#nav{
  height:40px;
  width:715px;
  position: absolute;
  right: 0;
  
  
}

#nav ul{position:relative;}
#nav-indicator{
  position:absolute;
  width:100px;
  top:37px;
  left:0;
  height:2px;
  background:#f5d803; 


  
  -webkit-transition: all 0.2s ease;
  -moz-transition:    all 0.2s ease;
  -o-transition:      all 0.2s ease;
  -ms-transition:     all 0.2s ease;
  transition:         all 0.2s ease;
}

.nav-btn{
  width:99px;
  height: 40px;
  float:left;
  padding:10px 0;
  list-style:none;
  color:#fff;
  text-align:center;
  cursor:pointer;
  text-transform:uppercase;
  font-size:14px;
  color:#fff;
  /*border-left:1px solid rgba(255,255,255,0.2);
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.5) ;*/
}

.mobile-menu .nav-btn{
  width:100%;
}

.nav-btn:first-child{
  border:none;
  box-shadow: none;
}

.nav-btn:hover, .nav-btn.active {
  color:#FFF;
  background:#222;
  box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5) ;
}

/*NAV portable*/

.mobile-menu .nav-btn{
  width:100%;
}

.sub-navigation {
 
  position:fixed; 
  top:0px; 
  width:100%;
  display:none;
  background-color: #000; 
  z-index:10000;
   }
  
.sub-navigation .toggle-menu {
    background: none;
    color:#666;
    font-size: 18px;
    font-size: 1.125em;
    border: none;
    outline: none;
    position: fixed;
    top: 30px;
  right:20px;
   }
    /* line 40, sass/layout/_header.scss */
    .sub-navigation .toggle-menu:hover, .sub-navigation .toggle-menu:active, .sub-navigation .toggle-menu.active {
      color:#FFF; }
    @media screen and (max-width: 640px) {
      /* line 30, sass/layout/_header.scss */
       .sub-navigation {
        display: block; }
        #nav-wrap {
    display:none;
   } }

.mobile-menu {
  clear: both;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: none;
  margin-bottom: 20px; }

  @media screen and (min-width: 641px) {
    /* line 105, sass/layout/_header.scss */
    .mobile-menu {
      display: none !important; } }
  /* line 112, sass/layout/_header.scss */
  .mobile-menu .menu {
    list-style: none;
    margin: 0;
    padding: 0; }
    /* line 117, sass/layout/_header.scss */
    .mobile-menu .menu a {
      padding: 10px;
      color: #fff;
      text-decoration: none;
      display: block;
      background:#000; }
      /* line 124, sass/layout/_header.scss */
      .mobile-menu .menu a:hover {
        color:#333; }
    /* line 126, sass/layout/_header.scss */
    .mobile-menu .menu .current-menu-item a {
      color: #333; }

/*NAV DOSSIER*/

#navdossier ul{position:relative;}
#navdossier-indicator{
  position:absolute;
  width:100px;
  top:37px;
  right:0;
  height:2px;
  background:#f5d803; 

  
  
  -webkit-transition: all 0.2s ease;
  -moz-transition:    all 0.2s ease;
  -o-transition:      all 0.2s ease;
  -ms-transition:     all 0.2s ease;
  transition:         all 0.2s ease;
}




/*CONTENT*/
#content-wrap{
  width:80%;
  margin: auto;
}
#animleft, #animright {
  color:#fff;
  
  text-align:center;  
  
  -webkit-transition: all 0.5s ease;
  -moz-transition:    all 0.5s ease;
  -o-transition:      all 0.5s ease;
  -ms-transition:     all 0.5s ease;
  transition:         all 0.5s ease;  
}

.row {
  width:100%;
  /*padding:30px 3%;*/
  padding: 20px 15px 80px;
  font-size:18px;
  color:#999;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.5) ;
  position:relative;
}

.border-bottom {
border-bottom:1px solid rgba(255,255,255,0.2);
}

.row.active{background-image: url('images/bgmenu.png')}
.nobg.active{background:none; border: none}
.nobg.{background:none; border: none}


.row-btn{
  position:absolute;
  top:25px;
  right:20px;
  background:#2b2b2b;
  border-bottom:1px solid rgba(255,255,255,0.2);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.5) ;
  width:40px;
  height:20px;
  border-radius:20px;
}

.circle{
  border-radius:50%;
  background:#555;
  border-top:1px solid rgba(255,255,255,0.2);
  box-shadow: 0 1px 0 rgba(0,0,0,0.5) ;
  width:20px;
  height:20px;
  
  
}

.row.active .row-btn{ background:#f5d803;}
.row.active .circle{  margin-left:20px;}








/*ANIMATION*/
.row-btn, .circle, .row{
  -webkit-transition: all 0.1s ease;
  -moz-transition:    all 0.1s ease;
  -o-transition:      all 0.1s ease;
  -ms-transition:     all 0.1s ease;
  transition:         all 0.1s ease;  
}

/*hide left*/
#animleft{
  -moz-transform: translateX(-200px);
  -webkit-transform: translateX(-200px);
  -o-transform: translateX(-200px);
  -ms-transform: translateX(-200px);
  transform: translateX(-200px);
  opacity:0;
}

/*hide right*/
#animright{
  -moz-transform: translateX(200px);
  -webkit-transform: translateX(200px);
  -o-transform: translateX(200px);
  -ms-transform: translateX(200px);
  transform: translateX(200px); 
  opacity:0;
}

/*Slide left > right || right > left*/
#animleft.animationActive, #animright.animationActive {
  -moz-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  -o-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px); 
  opacity:1;
}


.contactlist {
  font-size: 14px;
  color: #818181;
  line-height: 1.5;
}

.footer {
  
  background-color: #333333;
}

.intro {
  background-image: url("dummy/slide-1.jpg");
  background-size: cover;
  padding-bottom: 50px;
}

.intro-img {
  width: 80%; max-width: 500px;
}


.voirplus {
  text-align: center; 
  margin-top:40px;
}

.voirplus a {
  text-align: center; 
  margin-top:40px;
  font-size: 14px;
}

.musicsec {
  background-image: url("dummy/bg_musicsec.jpg");
  background-size: cover;
  background-attachment: fixed;
}
.biosec {
  background-image: url("dummy/cag_bg.jpg");
  background-size: cover;
  background-attachment: fixed;
}

/* line 1, sass/libs/_component.scss */
.btn1 {
  
  background-color: #ffde59;
  color: black;
  font-size: 18px;
  padding: 12px 40px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
   box-shadow: #ffde59 0 10px 20px -10px;
}
.btn1:hover {
  background-color:#cccccc;
}

#top{
  width:40px;
  height:40px;
  background-image:url("images/fleche.png");
  display: inline-block;
  margin: 0 auto;
  cursor: pointer;
  }

#top:active{

  background-image:url("images/fleche.png");
}
#topwrap{
  width: 100%; 
  height: auto; 
  position: fixed; 
  bottom: 50px; 
  text-align: center;
  display: none;
  z-index: 99;
}


/* neeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee */

.quotes{ 
  height: auto;
  min-height: 150px;
}
#slideshow { 
  margin:auto; 
  position: relative; 
  width:80%; 
  height: auto; 
  padding: 10px;  
}

#slideshow > div { 
  position: absolute; 
}

/* neeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee */
* {
  box-sizing: border-box;
}

.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Create two equal columns that floats next to each other */
.column2 {
  float: left;
  width: 50%;
  padding-top: 30px;

}
.column3 {
  float: left;
  width: 33.3333%;
  padding-top: 30px;
  display: block;
  overflow: hidden;

}
.column4 {
  float: left;
  width: 25%;
  padding: 10px;
  overflow: hidden;
}

.column4 img{
width: 100%;
}

 .col-60 {
    width: 60%; 
    float: left;
    padding-top: 30px;
    display: block;
    overflow: hidden;
    }
 .col-40 {
    width: 40%; 
    float: left;
    padding-top: 30px;

    display: block;
    overflow: hidden;
    }
.fade img{
transition: 1s ease;
opacity: 1;
width: 100%;
}

.fade img:hover{
 opacity: 0.6;
transition: 1s ease;
}

/* Clear floats after the columns */
.row2:after {
  content: "";
  display: table;
  clear: both;
  margin-top: 80px;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .column2 {
    width: 100%;
  }
}
@media screen and (max-width: 800px) {
  .column3 {
    width: 100%;
  }
}
@media screen and (max-width: 800px) {
  .column4 {
    width: 100%;
  }
}
@media screen and (max-width: 800px) {
  .col-60 {
    width: 100%;
  }
}
@media screen and (max-width: 800px) {
  .col-40 {
    width: 100%;
  }
}
/* icones social media */


.fa {
  padding: 2px;
  font-size: 20px;
  width: 25px;
  text-align: center;
  text-decoration: none;
  margin: 8px 1px 0px; 
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook, .fa-youtube, .fa-instagram .fa-itunes {
  background: none;
  color: #fff;
}

 .logo-cont {
       width: 100%;
       margin: 0 auto;
     padding:0;
     text-align:center;
     height:auto;
     overflow:hidden;
     position: relative;
   }

   .logo-cont a {
       text-decoration:none;
       float:left;
       text-align:center;
     margin-right:30px;
     opacity: 0.4;
    filter: alpha(opacity=40);  
  }
   .logo-cont a:hover {
     opacity: 1.0;
    filter: alpha(opacity=100); 
     
   }

   /* dossier ssssssssssssssssssssssssssssssssss */

.dossierpresse {
  background-image: url("dummy/cloud_bg.jpg");
 
}

b, strong {
  font-weight: bold;
}

.content .post {
  position: relative;
  margin-bottom: 30px;
  padding-left: 100px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  /* line 80, sass/layout/_content.scss */
.content .post .entry-date {
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    color:#FFF;
    padding: 10px;
    text-align: center; }
    /* line 96, sass/layout/_content.scss */
    .content .post .entry-date .date {
      font-size: 36px;
      font-size: 2.25em;
      font-weight: 900; }
    /* line 100, sass/layout/_content.scss */
    .content .post .entry-date .month {
      font-size: 14px;
      font-size: 0.875em;
      text-transform: uppercase; }
  /* line 105, sass/layout/_content.scss */
  .content .post .featured-image {
    overflow: hidden;
    margin-bottom: 20px; }
    /* line 109, sass/layout/_content.scss */
    .content .post .featured-image img {
      width: 100%;
      max-width: 100%;
      height: auto;
      display: block; }
  /* line 116, sass/layout/_content.scss */

  /* line 116, sass/layout/_content.scss */
  
 .content .post .entry-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 24px;
    font-size: 1.5em;
    font-size: normal;
    font-weight: 700;
  text-transform:uppercase;
  color:#FFF;
   }
    /* line 123, sass/layout/_content.scss */
    .content .post .entry-title a {
      color:#FFF;
      text-decoration: none;
      -webkit-transition: .3s ease;
              transition: .3s ease; }
      /* line 127, sass/layout/_content.scss */
      .content .post .entry-title a:hover {
        color: #a3c1ba; }
  /* line 130, sass/layout/_content.scss */
  .content .post p {
    margin-bottom: 10px;
  color:#FFF; }
  /* line 131, sass/layout/_content.scss */
  .content .post a {
    color:#999;
    text-decoration: none; }
  .content .post a:hover {
    color:#CCC;
    text-decoration: none; }



/* line 74, sass/layout/_content.scss */
.content .post-dossier {
  position: relative;
  margin-bottom: 30px;
  padding-left: 0px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align:justify; }
  /* line 80, sass/layout/_content.scss */
.content .post-dossier .entry-date {
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    color: white;
    padding: 10px;
    text-align: center; }
    /* line 96, sass/layout/_content.scss */
    .content .post-dossier .entry-date .date {
      font-size: 36px;
      font-size: 2.25em;
      font-weight: 900; }
    /* line 100, sass/layout/_content.scss */
    .content .post-dossier .entry-date .month {
      font-size: 14px;
      font-size: 0.875em;
      text-transform: uppercase; }
  /* line 105, sass/layout/_content.scss */
  .content .post-dossier .featured-image {
    overflow: hidden;
    margin-bottom: 20px; }
    /* line 109, sass/layout/_content.scss */
    .content .post-dossier .featured-image img {
      width: 100%;
      max-width: 100%;
      height: auto;
      display: block; }
  /* line 116, sass/layout/_content.scss */
 @media screen and (max-width: 480px) {
        /* line 22, sass/layout/_footer.scss */
        .content .post-dossier img {
      width: 100%;
      max-width: 100%;
      height: auto;
      display: block; } }
  /* line 116, sass/layout/_content.scss */
  
 .content .post-dossier .entry-title {
    margin-top: 20px;
    margin-bottom: 0px;
    font-size: 24px;
    font-size: 1.5em;
    font-size: normal;
    font-weight: 700;
  color:#666;
  text-transform: uppercase;
   }
 
.content .post-dossier .entry-sub-title {
    margin-top: 0;
    margin-bottom: 10px;
  color:#000;
  font-weight:600;
  text-transform: uppercase;
   }
    /* line 123, sass/layout/_content.scss */
    .content .post-dossier .entry-title a {
      color: #666;
      text-decoration: none;
      -webkit-transition: .3s ease;
              transition: .3s ease; }
      /* line 127, sass/layout/_content.scss */
      .content .post-dossier .entry-title a:hover {
        color: #fff; }
  /* line 130, sass/layout/_content.scss */
  .content .post-dossier p {
    margin-bottom: 10px;
  color:#666; }
  /* line 131, sass/layout/_content.scss */
  .content .post-dossier a {
    color:#666;
    text-decoration: none; }
  .content .post-dossier a:hover {
    color:#fff;
    text-decoration: none; }

  .widgetdivdossier {
  height:auto;
  padding: 0 100px 40px;   
  color:#333;
   }
 @media screen and (max-width: 480px) {
        /* line 22, sass/layout/_footer.scss */
        .widgetdivdossier {
          width: 100%; } } 

  .quote-dossier p {
    color:#666;
    display: block;
  font-style:italic;
  text-align:left }

  .quote-dossier-bio {
    border-bottom:#FFF 1px solid; }
  
  .quote-dossier-bio p {
    color:#666;
    display: block;
  text-align:left }
  
 .quote-dossier .credits, .quote-dossier-bio .credits  {
  text-align:right;
  line-height:18px;
   }
   
 .quote-dossier .credits .auteur, .quote-dossier-bio .credits .auteur {
    color:#FFF;
  text-transform:uppercase;
  font-size:14px;
   }
  .quote-dossier .credits, .quote-dossier-bio .credits .source {
    color:#333;
  font-size:14px; 
   }
.quote-dossier-bio .credits {
  margin-bottom:10px; 
   }  
.credits {
  margin-top:10px; 
   }