@import url(https://fonts.googleapis.com/css?family=Vesper+Libre:400,500,700|Fjord+One);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700italic,700,600italic,600,400italic);
body,
html {
  height: 100%;
  width: 100%;
  vertical-align: top;
  margin: 0;
  padding: 0;
  color: #000000;
  overflow: auto;
  background: white;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#fff, #efefef);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#fff, #efefef);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#fff, #efefef);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#fff, #efefef);
  /* Standard syntax */
  line-height: 1.45;
  font-family: 'Fjord One', serif;
 }

.columns {
  width: 75vw; }

h1 {
  margin: 0.25em 0 0.25em;
  font-size: 1em;
  font-weight: bold;
  font-family: 'Source Sans Pro';
  display: inline-block;
}
.titreGris{ color:#888; display:inline; }
h2 {
  display: inline-block;
  font-size: 1em;
  margin: 0;
  font-family: 'Source Sans Pro';
  font-weight: normal; }

a {
  color: grey;
  text-decoration: none; }

a:hover {
  color: black;
  border-bottom: 1px solid black; }

#cv a {
  color: white;
  border-bottom: 1px solid white; }

#cv a:hover {
  color: white;
  border-bottom: 0 solid white; }

p { margin: 0.5em 0; }

pre, code {
  font-family: 'Consolas','Menlo','Monaco','Lucida Console','Liberation Mono','DejaVu Sans Mono',monospace;
  font-size: 0.7em;
  line-height: 1.2;
  background-color: #EEE;
  padding: 0.6em;
  margin: 0.9em 0; }

.citation {
  padding: 1.8em 2.1em;
  background-color: #EEE;
  margin: 0.6em 0;
  font-size: 1em;
  font-weight: 400; }

.right {
  display: block;
  float: right;
  margin-left: 0.6em; }

.imgBig {
  position: fixed;
  max-width: 46%;
  max-height: 92%;
  top: -5px;
  z-index: 1;
  margin: 2%;
  cursor: pointer;
  left: 50%;
  -moz-box-shadow: 0 0 30px rgba(50, 50, 50, 0.33);
  -webkit-box-shadow: 0 0 30px rgba(50, 50, 50, 0.33);
  box-shadow: 0 0 30px rgba(50, 50, 50, 0.33); }

.imgBig.projet {
  right: 50%;
  left: auto; }

#recherche img { height: 2.4em;   filter: grayscale(50%);}
#recherche h1 { margin-top: 4.5em; margin-bottom: 0.8em; }
#recherche h1:first-of-type { margin-top: 2em; }
.main.projetMax img:first-child{ margin-top: 0; }
img.video { background-size: cover; }
strong {
  font-style: normal;
  font-weight: normal;
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: white;
  font-family: 'Source Sans Pro';
  font-size: 0.7em;
  padding: 0 5px;
  max-width: 20em; }

/*/
/////// MAIN DIV //////////////////////////////////////////////////////*/
#projet,
#recherche {
  position: absolute;
  width: 50%;
  top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0; }

#scroll-left {
  direction: ltr; }

#projet {
  left: 0;
  direction: rtl;
  border-right: 1px solid rgba(50, 50, 50, 0.5);
  transition: width 50ms;
}

#recherche {
  right: 0;
  border-left: 1px solid rgba(50, 50, 50, 0.5); }
.projets:first-child {  margin-top: 5em;  }
.projets .index{
  flex-wrap: wrap;
  /* display: flex; */
  /* justify-content: space-around; */
}

.projets .index img {
    display: block;
  margin-top: 0.1em;
  width:80%;
  height: auto;
  -webkit-box-shadow: 2px 6px 20px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 2px 6px 20px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 6px 20px 0px rgba(0, 0, 0, 0.3);
 }
.projets .index h1{
    padding-top:0em;
    padding-bottom: 2em;
  }
.index .titreGris{
    float: right; margin-top: 0.25em; padding-right: 20%;
    font-family: 'Source Sans Pro';
}
.projets .post h2 { color: grey; }
.projets .post h1 { margin-top: 2em; }
.projets .post {
  display: none;
}
 .projets .video {
   height: 500px;
   background-color: black;
 }

.projets .post img {
  width: 100%;
  height: auto; }
.projets .post img:not(:first-child){ padding-top:1em; }

.inner {
  margin: 3em 12%;
  background: transparent;
  transition: margin 50ms; }

/* marges interieures des bloc projet & recherche */
.min {
  height: 50%;
  cursor: pointer;
  border-bottom: 1px solid black;
  z-index: 1;
  opacity: 0.3;
  background: white;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#fff, #ececec);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#fff, #ececec);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#fff, #ececec);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#fff, #ececec);
  /* Standard syntax */ }

.max {
  height: 100%;
  z-index: 2;
  opacity: 1;
  background: white;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#fff, #efefef);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#fff, #efefef);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#fff, #efefef);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#fff, #efefef);
  /* Standard syntax */ }

.main.projetMax { width: 62% !important; }
.max.projetMax .inner { margin: inherit 15% ; }
#projet:not(.projetMax) .inner { margin-left: 15% ; }
.title {
  display: inline;
  font-weight: bold;
  font-family: 'Source Sans Pro';
  position: fixed;
  z-index: -1;
  top: 1.5em;
  /*padding-top: 0.23em;*/ }

  #projet .title, #close {
    cursor: pointer; }
  #close{ text-align: right;
    font-size: 1em;
    font-weight: bold;
    padding-left: 45.3%; display: none; }
.max.projetMax #close{
    display: inline;
    z-index: 5;
}


.max .title {
  padding-top: 0.15em;
  font-size: 1.1em; }

.min .title {
  opacity: 0.7; }

/*/
/////// INFO //////////////////////////////////////////////////////*/
#info {
  font-family: 'Source Sans Pro';
  font-size: 1.1em;
  line-height: 1.35em;
  position: absolute;
  right: 3%;
  z-index: 1;
  width: 18%;
  top: 50%;
  margin-top: 4%; }

#info .title {
  position: relative;
  top: 0; }

#info i { font-size: 0.7em; font-style: normal; }
#info i a:first-child {float: left; }
#info i a:last-child { padding-right: 4em; float: right; }
#info a { border-bottom: none; margin-top: 0.8em;  }
#info a:hover { font-weight: bold; }


.infoLink {
  cursor: pointer; }

.infoPop {
    display: none;
  font-size: 1.1em;
  line-height: 1.3em;
  font-family: 'Source Sans Pro';
  position: absolute;
  width: 38%;
  height: 77%;
  z-index: 5;
  padding: 4%;
  margin: 2%;
  color: white;
  overflow-y: auto; }

.infoLeft {
  left: 0; }

.infoRight {
  right: 0; }

p.info {
  font-family: 'Fjord One', serif; }

/*/
/////// MENU //////////////////////////////////////////////////////*/
.menu {
  font-family: 'Source Sans Pro';
  font-size: 0.75em;
  position: absolute;
  top: 50%;
  bottom: 0;
  z-index: 1;
  width: 18%;
  margin: 4% 0;
  font-weight: bold;
  overflow-x: hidden;
  overflow-y: auto; }

.menu .categorie {
  padding-bottom: 1em; }

.menu a:hover, .menu #index {
  font-weight: bold;
  border: none; }

.menu a {
  font-weight: normal;
  line-height: 1.2em;
  color: #000;
  display: block;
  padding-left: 0; }

#menu-recherche {
  left: 26%;
  display: none; }

#menu-projet {
  left: 56%; }

#menu-projet.projetMax {
  left: 68% !important; }

#menu-projet a {
  cursor: pointer;
  padding-bottom: 5px; }

/* ---------------------------------------------- MOBILE ------ */
@media (orientation:portrait) {
      body{ font-size: 20px !important;}
      #recherche{ display: none !important; }
      #projet{ width: 100%; border: none; top:0; }
      #scroll-left{
          margin-top: 0;
          margin-right: 0 !important;
          margin-left: 0 !important;
      }
      .projets .index img{ width: 100%; }
      .main.projetMax{ width: 100% !important; }
      .projets h2{ padding: 0 0 0 20px; }
      .projets p, .projets a{ padding: 0 20px; }
      .index h1{ padding-left: 20px}
      .index .titreGris{ padding-right: 20px; }
      #close{
          padding-right: 20px;
          padding-left: 20px;
          margin-right: 20px;
          float: right;
      }
      #info{
          position: fixed;
          width: 100%;
          padding: 20px;
          z-index: 9 !important;
          background: #eee;
          top:0;
          left: 0;
          margin-top:0;
      }
      #cv{ width:92%; }
      .infoPop{ margin:5em 0 0 0; width:100%; height:auto;}

}

/*# sourceMappingURL=custom.css.map */