@charset "utf-8";
/* CSS Document */
* { margin:0; padding:0; }

html{
 height:100%;
 min-height:100%;
 width:100%;
 min-width:100%;
 }
body{
 min-height:100%;
 min-width:100%;
 }

.line {
  border-bottom:1px solid rgba(255,255,255,0.2);
  transition: all 0.25s ease-in-out 0s;
  padding-bottom: 3px;
}

.line:hover {
  border-bottom:1px dotted rgba(255,255,255,1);
      transition: all 0.25s ease-in-out 0s;
}

b {
    font-weight:400;
}
body { 
  margin:0;
  padding:0;
  background-color: #333;
  -webkit-background-size: cover;
  background-size: cover;
  font-size:20px;
  line-height:30px;
  font-family: 'Open Sans', sans-serif;
  font-weight:100;
  color:#fff;
}


.bt_titre  {
  margin: 0px;
}

.bt_titre-intro  {
  margin: 0px;
}

#bt_date {
  background-color: rgba(0, 0, 0, 0.2); transition: all 0.20s ease-in-out 0s;
  box-shadow: 0 0 100px rgba(255,255,255,.20) ;
  margin: 0px;
  text-align: left;
  line-height: 34px;
  font-size: 24px;
  padding:25px;
  display:table;
}

#bas-page {
  background: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.2)) repeat scroll 0% 0% transparent;
  margin: 0px;
  text-align: left;
  line-height: 26px;
  font-size: 16px;
  border-top:1px solid rgba(255,255,255,0.25);
}

#performances {
  background: url(img/background-www-blur.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

#residence {
  background: url(img/residence.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

#mediation {
  background: url(img/mediation.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

#informations {
  background: url(img/background-www-blur.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

#img_intro {
    border: 1px #000 solid;
}

#conciliabule {
  background: url(img/conciliabule.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

#hertz-seconde {
  background: url(img/hertz-seconde.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

#lighthouses {
  background: url(img/lighthouses.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

#meknine-ezzine {
  background: url(img/meknine-ezzine.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

#hoaxophonie {
  background: url(img/hoaxophonie.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

#paysage-sonore {
  background: url(img/paysage-sonore.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

#silent-entertainment {
  background: url(img/silent-entertainment.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}


#bt_img1 {
  background: url(img/mourir-com-un-hom-7.jpg) no-repeat center; 
  -webkit-background-size: cover;
  background-size: cover;
}


#mardi27juin {
  background: url(img/annee-des-treize-lunes-4.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

#mercredi28juin {
  background: url(img/tout-ce-que-le-ciel-1.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}


#jeudi29juin {
  background: url(img/tous-les-autres-2.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

#vendredi30juin {
  background: url(img/ecrits-sur-du-vent-4.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

#samedi1erjuillet {
  background: url(img/mourir-com-un-hom-8.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

#dimanche2juillet {
  background: url(img/corps-a-coeur-1.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

#videoclub {
  background: url(img/videoclub.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

#couv, #end {
  background: url(img/sirk-bisou-neige.gif) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}


  .proj-left, .proj-right, .proj-intro, .proj-info, .couv, #bas-page {
    padding: 70px;
}

.couv {
    background: linear-gradient(-20deg, rgba(0, 0, 0, 0),transparent,rgba(0, 0, 0, .1),rgba(0, 0, 0, 0.8)) repeat fixed 0% 0% transparent;
    transition: all 0.25s ease-in-out 0s;
}

.bt_proj_3 {
  background: url(/hugues-clement/img/ecran5.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

.proj-left {
  border-top:1px solid #444;
  background: linear-gradient(-65deg, rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.1),rgba(0, 0, 0, .5),rgba(0, 0, 0,.8)) repeat scroll 0% 0% transparent;
  margin: 0px;
  text-align: left;
  transition: all 0.5s ease-in-out 0s;
}

.proj-right {
  border-top:1px solid #444;
  background: linear-gradient(65deg, rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.1),rgba(0, 0, 0, .5),rgba(0, 0, 0,.8)) repeat scroll 0% 0% transparent;
  margin: 0px;
  text-align: right;
  transition: all 0.5s ease-in-out 0s;
}

.proj-right div {
  margin-left: auto;
}


.proj-intro {
  border-top:1px solid #444;
  background: radial-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0.9)) repeat fixed 0% 0% transparent;
  margin: 0px;
  text-align: left;
  transition: all 0.25s ease-in-out 0s;
}

.proj-info {
  border-top:1px solid #444;
  background: radial-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, 0.8)) repeat fixed 0% 0% transparent;
  margin: 0px;
  text-align: left;
  transition: all 0.25s ease-in-out 0s;
}


#img_proj {
  border: 1px #444 solid;
}

hr { 
  height: 1px;
  padding: 0px;
  margin-top:10px;
  margin-bottom:10px;
  background-color: rgba(255,255,255,0.2);
  border: 0;
}

h3 {
  font-size:34px;
  line-height:42px;
    font-weight:100;
}

h4 {
  font-size:21px;
  line-height:30px;
    font-weight:300;
}

h2 {
  font-size:50px;
  font-weight:300;
  line-height:60px;
  margin-bottom: 10px;
}

h2, h3, h4 {
  color:#fff; 
}

h1, .titre {
  color:#fff;
    font-weight: 100;
    line-height:70px;
    font-size:60px;
}

.sous-titre {
font-size: 34px;
line-height: 40px;
margin-top: 8px;
font-weight: 100;
}

.artiste {
  line-height: 30px;
}

a {
  text-decoration: none; color:#fff;
  transition: all 0.75s cubic-bezier(.19,1,.22,1)
}

a:hover{
	text-decoration: none; color:#fff;
}

.mybutton {
  padding :12px 17px;
  border: 1px solid rgba(255,255,255,1);
  background-color: rgba(255,255,255,1);
  white-space: nowrap;
  border-radius: 2px;
  line-height: 60px;
              font-size:15px;
 color:rgba(0,0,0,1);
}

.mybutton:hover {
  border: 1px solid #ddd;
  background-color: rgba(0, 0, 0, 1);
  box-shadow: 0 0 50px rgba(255,255,255,.35);
  color: #FFF;
}


.mybutton-minimal, .mybutton-next {
  padding :14px 17px;
  border: 1px solid rgba(255,255,255,0.4);
  background-color: rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  border-radius: 3px;
  line-height: 80px;
  font-size:20px;
  /*font-weight:300;*/
  color:rgba(255,255,255,.75);
  margin-left:0px;
  font-weight:400;
}

.mybutton-minimal {
  /*font-size:14px;*/
  margin-right:15px;
}

.mybutton-next:hover {
  margin-left: 15px;
}

.mybutton-fleche {
    padding: 15px 7px;
    border: 1px solid rgba(255,255,255,0.4);
    background-color: rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    font-size: 24px;
    font-family: monospace;
    color: rgba(255, 255, 255, 1);
    border-radius: 3px;
    margin:3px;
}

.mybutton-fleche:hover {
  padding: 18px 10px;
  margin:0px;
}

.arrow-next {
  opacity:0.3;
  text-shadow: 0px 0px 20px #000;
    transition: all 0.25s ease-in-out 0s;
}

.arrow-next:hover {
  opacity:0.85;
    transition: all 0.25s ease-in-out 0s;
}

.mybutton-langue, .mybutton-langue-on {
  white-space: nowrap;
  color:rgba(255,255,255,.6);
}

.mybutton-langue-on, .mybutton-langue-on:hover {
  color:#fff;
}

.mybutton-langue:hover {
  color:#fff;
}

.mybutton-minimal:hover, .mybutton:hover,  .mybutton-next:hover, .mybutton-fleche:hover {
  border: 1px solid rgba(255,255,255,.75);
  background-color: rgba(0, 0, 0, .6);
  color:#fff;
}

.mybutton-next:hover, .mybutton-fleche:hover, .mybutton-minimal:hover {
  box-shadow: 0 0 25px rgba(255,255,255,.2);
}


.picto {
  vertical-align: middle;
  margin-right: 10px;}

.social {
  vertical-align: middle;
  /*margin: 0px 10px 0px 0px;*/
  margin: 0px;
  transition: all 0.20s ease-in-out 0s;
  font-size: 16px !important;
    opacity: .6 !important;
}

.social-end {
  vertical-align: middle;
  /*margin: 0px 10px 0px 0px;*/
  margin: 0px;
  transition: all 0.20s ease-in-out 0s;
  font-size: 20px !important;
      margin-right: 15px;
    opacity: .6 !important;
}

.social:hover {
  vertical-align: middle;
  opacity: 1 !important;
}

.multilangue {
  position: fixed;
  top: 10px;
  right: 25px;
  font-size: 14px;
  text-shadow: 0px 0px 6px #000;
}

.pipe {
  color:rgba(255,255,255,.3);
}

.pipe-n {
  color:rgba(0,0,0,.3);
}


.col-left-line {
  display:inline-block;
  width: 231px;
  margin-right: 69px;
  text-align: right;
    vertical-align:top;
}

.col-right-line {
  display:inline-block;
  width: 300px;
    vertical-align:top;
}

.date-eve, .lieu-eve, .fullpath {
  margin-bottom:4px;
  font-size:16px;
  line-height: 20px;
}

.date-eve {
  line-height: 28px;
}

.lieu-eve {
  font-size:12px;
}

.fullpath {
    font-size:12px;
  opacity:0.6;
  transition: all 0.25s ease-in-out 0s;
}

.note {
    font-size:12px;
  opacity:0.6;
}

.fullpath:hover {
  opacity:1;
  transition: all 0.25s ease-in-out 0s;
}

.start {
text-align:center;
}

.table {
  display:table;
  width:100%;
  vertical-align:top;
}

.col-left {
  padding-right:35px;
  display:table-cell;
  width:50%;
  vertical-align:top
}

.col-right {
  padding-left:35px;
  display:table-cell;
  width:50%;
  vertical-align:top
}

.col-left-3 {
  padding-right:70px;
  display:table-cell;
  width:33%;
  vertical-align:top
}

.col-center-3 {
  padding-right:0px;
  padding-left:0px;
  display:table-cell;
  width:34%;
  vertical-align:top
}

.col-right-3 {
  padding-left:70px;
  display:table-cell;
  width:33%;
  vertical-align:top
}


.icone-info {
    margin-right: 10px;
    font-size: 15px !important;
}

#informations .social {
    opacity: 1 !important;
    margin-right: 0px;
    font-size: 100%;
}

#informations .social:hover {
    opacity: 0.65 !important;
}

#informations .table p {
    margin-top:6px;
}

.arrow-next a:hover {
  opacity:1;
}

.jaquette {
  margin: 30px;
  vertical-align:middle;
  width:175px;
  border:1px solid rgba(255,255,255,.2);
  box-shadow: 0 0 15px rgba(0,0,0,.75);
      transition: all 0.25s ease-in-out 0s;
}

.jaquette:hover {
  border:1px solid rgba(255,255,255,.65);
      transition: all 0.25s ease-in-out 0s;
}


/* responsive */

@media all and (max-width: 950px) {
  
  .col-left, .col-right, .col-left-3, .col-center-3, .col-right-3 {
    padding:0px;
    padding-bottom:50px;
    display:block;
      width:100%;
  }

  
  .proj-left, .proj-right, .proj-intro, .proj-info, .couv, #bas-page {
    padding: 25px;
    transition: all 0.25s ease-in-out 0s;
  }
  
  .col-left-line {
    display:inline-block;
    width: 160px;
    margin-right: 46px;
    text-align: right;
    vertical-align:top;
  }

  .col-right-line {
    display:inline-block;
    width: 200px;
    vertical-align:top;
  }

.mybutton-minimal, .mybutton-next {
      font-size:16px;
      line-height:70px;
}

.arrow-next {
  font-size:150%;
  opacity:0.5;
}


}