@import url(http://reset5.googlecode.com/hg/reset.min.css);

/* =============================================================================
   MY OWN CSS
   ========================================================================== */


   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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time, video{
      font-weight: normal;
      font-size: 14px;  
   }


   
   body {

     display: flex;
     display: -webkit-flex;
     /* crée un contexte flex pour ses enfants */
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
     /* affichage vertical */
     min-height: 100vh;
     /* toute la hauteur du viewport (compatible IE9+) */
     padding:0;
     margin:0;
     -webkit-transition: 1s all;
     -moz-transition:1s all ;
     -ms-transition:1s all ;
     -o-transition:1s all ;
     transition:1s all ;
     -webkit-backface-visibility: hidden;
     -webkit-transform: translate3d(0, 0, 0);
     -webkit-transform-style: preserve-3d;
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
     -webkit-tap-highlight-color: transparent; 

  }
body.index{
   overflow: hidden;
}
  .OCRAM { 
   font-family: 'OCRAM';
   font-weight: normal;
   font-style: normal;
}

a{
   text-decoration: none;

}
#bio a{
   color:#F6B098;
}

#bio a:hover{
   color: #E94D1E;
}
.art a:hover{
   color: #E94D1E;
}


header {
   position: fixed;
   height:88px;
   /* IE fix */
   /*flex: 1;*/
   /* occupe la hauteur restante */
   display: flex;
   display: -webkit-flex;
   /* crée un contexte flex pour ses enfants */
   width:100%;
   justify-content: space-between;
   align-content: stretch;
   /* valeur par défaut */
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: left;
   -moz-box-pack: left;
   -webkit-justify-content: left;
   -ms-flex-pack: left;
   justify-content: left;



   color: white;

}


header #topHeader{
   height: 28px;
   background: black;


}

header #topHeader:before{
   box-shadow: 0 0 8px rgba(0,0,0,0.2),0 8px 12px rgba(0,0,0,0.2);
   content: "";
   
   position: fixed;
   width: 104%;
   height: 10px;
   top: 18px;
   left: -2%;
   will-change: top,left;
   z-index: 999;
}


header nav{ 
   height: 60px;
   /* occupe la hauteur restante */
   display: flex;
   display: -webkit-flex;
   /* crée un contexte flex pour ses enfants */
   width:100%;
   -webkit-justify-content: space-between;
   -ms-justify-content: space-between;     
   justify-content: space-between;
   -webkit-align-items: center;
   -ms-align-items: center;
   align-items: center;

   /* valeur par défaut */
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-box-pack: center;
   -moz-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;

   text-align: center;

   background: #E94D1E;

}
header nav div{
   z-index: 1000;
}

header nav:before{
   box-shadow: 0 0 8px rgba(0,0,0,0.2),0 8px 12px rgba(0,0,0,0.2);
   content: "";

   position: fixed;
   width: 104%;
   height: 60px;
   top:28px;
   left: -2%;
   will-change: top,left;
   z-index: 999;
}

.underdashed{
   padding-bottom: 2px;
   border:0px;
   border-bottom: 2px dashed white;
   border-image: url("http://marcbretillot.com/_img/bordure.png") 2 round;
   -moz-border-image: url("http://marcbretillot.com/_img/bordure.png") 2 2 2 2 round;
   -webkit-border-image: url("http://marcbretillot.com/_img/bordure.png")  2 2 2 2 round;
   -o-border-image: url("http://marcbretillot.com/_img/bordure.png")  2 2 2 2 round;

}




body.index .bio a {
   display: none;
}

#langue > div{
   display: inline-block;
   padding: 8px 0 0 6px;
   font-size: 12px;
   z-index: 1000;
}

#langue a{

   font-size: 12px;

}

#langue a {
   color: white;
}

#langue a.unactive{
   text-decoration:line-through;
}

#langue a.unactive:hover {
   text-decoration: none;
}


#page {
   padding-top: 88px;
   /* IE fix */
   flex: 1;
   /* occupe la hauteur restante */
   display: flex;
   display: -webkit-flex;
   /* crée un contexte flex pour ses enfants */
   width:100%;
   -webkit-justify-content: space-between;
   -ms-justify-content: space-between;     
   justify-content: space-between;
   -webkit-align-items: stretch;
   -ms-align-items: stretch;
   align-items: stretch;

   /* valeur par défaut */
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-box-pack: center;
   -moz-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
}

header nav .type {
  width: 250px;

}

body.index header nav .type {cursor: default;}
body.projet header nav .type a {cursor: pointer;}

header nav a{

   text-decoration: none;
   color: white;
   cursor: default;
   line-height: 20px;
}

header nav .type.active a{
   /*border-bottom: 2px dashed white;*/
  /* background-image: linear-gradient(to right, #fff 50%, rgba(255, 255, 255, 0) 0%);
   background-position: top;
   background-size: 30px 2px;
   background-repeat: repeat-x;*/

}
header nav .type.active  a:hover{
   /*border-bottom: 0px dashed white;*/
   
}

.type.bio {
   width: 350px;
}

.dashed {
   /*border-left: 2px dashed #E94D1E;*/
   background-image: linear-gradient(to bottom, #E94D1E 50%, rgba(255, 255, 255, 0) 0%);
   background-position: left;
   background-size: 2px 20px;
   background-repeat: repeat-y;


}

#page div h1 {
   /*color: #E94D1E;*/
   margin: 0;
}

#page div h3 {
   text-transform: uppercase;
   color: #E94D1E;
   padding-top: 4px;
   padding-bottom: 18px;
   margin:0px;
}


#bio {
 /*  background:#698996;*/
 color:#E94D1E;
}


div.art {
  overflow: hidden;
  /*position:relative;*/
  /*float: left;*/
}

#bio div {
   width: 350px;
   
}

#bio{
   color:#F6B098;
}

#bio:hover{
   /*color:#E94D1E;*/
}

div#bio .article {
   cursor: default;
   width: 328px;
}

.produit div, .espace div, .performance div, #produit div, #espace div, #performance div  {
   width: 250px;
}

#page .carte{
   cursor:pointer;
   color:white;
   display: flex;
   display: -webkit-flex;
   width: 94%;
   height: 60px;
   -webkit-justify-content: space-between;
   -ms-justify-content: space-between;
   justify-content: space-between;
   -webkit-align-items: center;
   -ms-align-items: center;
   align-items: center;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-box-pack: center;
   -moz-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   margin-top:15px;
}




.project_content_wrapper {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0px 20px 0 0;
  width: 200px;
}
.content {
  cursor:pointer;
  height:auto;
  padding: 40px 18px 50px;
  overflow: hidden;
  visibility: visible;
  line-height: 17px;
}

.content div{
   /*padding-bottom: 20px;*/
}

.projet .content {
   width: 850px;
}

.content a img {
  cursor: pointer;

}

.projet .content{
   width:930px;
}


.projet .content {
   cursor: auto;

   /*padding-bottom: 5px;*/
}

div#textContent {
   padding: 20px 0px 30px 0px;
   width: 460px;
   color: #F6B098;
   /*color:#E94D1E;*/
}

div#textContent  p:first-child {
   padding-bottom: 30px;
}

div.credit{
   display: -webkit-inline-box;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   color: #FCEEEE;
   padding-left: 5px;
   padding-bottom: 15px;
}

div.credit:hover{

   color: #F6B098;
}

.projet footer{

   flex: 1; 
   display: flex;
   display: -webkit-flex;
   width: 100%;
   justify-content: space-between;
   align-content: stretch;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-box-pack: left;
   -moz-box-pack: left;
   -webkit-justify-content: left;
   -ms-flex-pack: left;
   justify-content: left;
   color: white;
}


.projet .contentFooter{
   display: flex;
   display: -webkit-flex;
   width: 100%;
   -webkit-justify-content: space-between;
   -ms-justify-content: space-between;
   justify-content: space-between;
   -webkit-align-items: center;
   -ms-align-items: center;
   align-items: center;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-box-pack: center;
   -moz-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   text-align: center;
}

.contentFooter div{
   width: 250px;
   /*padding-top: 5px;*/
   -webkit-justify-content:space-between;
   -ms-justify-content: space-between;
   justify-content: space-between;
   -webkit-align-items: center;
   -ms-align-items: center;
   align-items: center;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-box-pack: center;
   -moz-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;

}

.contentFooter div:first-child{


}

.contentFooter .gauche{
   /*flex:1;*/
   margin-left: 20px;
   -webkit-justify-content:flex-start;
   -ms-justify-content: flex-start;
   justify-content: flex-start;
   -webkit-align-items: center;
   -ms-align-items: center;
   align-items: center;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-box-pack: flex-start;
   -moz-box-pack: flex-start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: flex-start;
   justify-content: flex-start;

}

.projet footer {
   background: black;
   
   bottom: 0;
   display: -webkit-inline-box;
   width: 100%;
}
.projet .contentFooter{
   height: 50px;
}

footer a {
   color: white;
}

/*  Accordeon
=====================*/
/*background: #E94D1E;*/

div.article{width: 320px;padding:4px;}

.article em {
   color: black;
   font-style: normal;
}

.accordion{
/*
   box-shadow: 
      0px 0px 0px 1px rgba(155,155,155,0.3), 
      0px 2px 2px rgba(0,0,0,0.1);
   */}
   .accordion label{
      position: relative;
      display: block;
      cursor: pointer;

   }
   .accordion label:hover{
      background: #E94D1E;
   }
   .accordion input + label {
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      -webkit-backface-visibility: hidden;
   }

   .accordion input+ label{background: #F6B098;
   }
   .accordion input:checked + label,
   .accordion input:checked + label:hover{
      background: #E94D1E;
      color:white;
/*   box-shadow: 
      0px 0px 0px 1px rgba(155,155,155,0.3), 
      0px 2px 2px rgba(0,0,0,0.1);*/
   }
   .accordion input{
      display: none;
   }
   .accordion .article{
      background: rgb(255, 255, 255);
      overflow: hidden;
      height: 0px;
      padding:   0px 0px 0px 0px;

      zoom: 1;
      filter: alpha(opacity=50);
      opacity: 0.5;
      color:#E94D1E;;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
   }
   .accordion .article p{
      font-style: italic;
      color: #777;
      line-height: 23px;
      font-size: 14px;
      padding: 20px;
   }
   .accordion input:checked ~ .article{
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      padding:   20px 0px 30px 0px;
      zoom: 1;
      filter: alpha(opacity=100);
      opacity: 1;
      height: auto;
   }

/*.accordion input:checked ~ .article.ac-small{
   height: 155px;
}
.accordion input:checked ~ .article.ac-medium{
   height: 195px;
}
.accordion input:checked ~ .article.ac-large{
   height: 245px;
   }*/




   @media only screen and (max-width: 1080px){

      header nav a{
         cursor: pointer;
      }

      .dashed {
         border: none;
         background-image:none;
      }
      .projet img{
         display: block;
      }
      header{
         /*height: 128px;*/
      }
      header nav:before {
         /*height: 100px;*/
      }
      header nav{
        /* height: 100px;
         -webkit-flex-direction: row;
         -ms-flex-direction: row;
         flex-direction: COLUMN;*/
      }

      #page {
         /*padding-top: 128px;*/
      }

      #performance:not(.active), #espace:not(.active), #produit:not(.active), #produit:not(.active){
         display:none;
      }
      
      #performance:target, #espace:target, #produit:target{
         display:block;
      }



   }


   @media only screen and (max-width: 670px){



     .projet .content ,div#textContent, .projet .content img{
      width:100%;
   }
   .justify {
      text-align: justify;
   }

   body.index .bio a {
      display:inline;
   }

   .dashed {
      border: none;
   }
   .projet img{
      display: block;
   }
   header{
      height: 60px;
   }
   header nav:before {
      height: 32px;
   }
   header nav{
      height: 32px;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: ROW;
   }
   header nav .type , .type.bio{
      padding: 0px;         
      width: 250px;

   }
   
   .bio.type {
      float: right;
      text-align: right;
      margin-right: 8px;
   }

   #page {
      padding-top: 60px;
   }
   #bio div {
      width: 99%;
   }
   .content {
      padding: 40px 13px 50px 13px;
   }

   #page .carte {
      width: 100%;
   }
   #performance:not(.active), #espace:not(.active), #produit:not(.active), #produit:not(.active),#bio:not(.active){
      display:none;
   }
   
   #bio:target, #performance:target, #espace:target, #produit:target{
      display:block;
   }



}


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


   body.index .underdashed{

      border: 0px dashed white;
   }

}


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



   .content-video{
      width: 460px;
   }

}


/*                  */
/* RESPONSIVE VIDEO */
/*                  */



.flex-video {
   position: relative;
   padding-top: 25px;
   padding-bottom: 67.5%;
   height: 0;
   margin-bottom: 16px;
   overflow: hidden;
}

.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }

.flex-video iframe,
.flex-video object,
.flex-video embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
   .flex-video { padding-top: 0; }
}