@charset "utf-8";
/* © Horstaxe 2017 */
/* conception graphique et développement : http://marjorieober.com/ */


/* CSS Document */


/* code */

html {
  height:100vh;
  width:105vw;
  overflow:hidden;
}

body {
	top:0;
	left:0;
	width:100vw;
	margin:0;
	padding:0;
	background-color:#FFFFFF;
	overflow:hidden;
	z-index:-5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}


p {
	margin: 0;
	padding: 0;
}


/* image background */

#img-background {
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  margin:auto;
}

#img-background img {
  width:100%;
  height:auto;
  position:relative;
  top:-25%;
}



/* dossiers-projets */

#dossiers-projets {
  position:absolute;
	left:0;
	width:100%;
  height:30vh;
  bottom:-70vh;
}



.menu {
width:100%;
border-top:1px solid black;
background-color:#FFFFFF;
position:absolute;
height:6vh;
padding:1vh;
}

.menu h1 {
  text-align:left;
  font-family:'Space Mono', monospace;
  font-weight:normal;
  color:#000000;
  font-size:2.25vh;
  line-height:0.25;
}

.menu.active, .menu:hover {
  cursor:pointer;
}

.close {
  position:absolute;
  font-family:'Scope One', serif;
  color:#000000;
  font-weight:normal;
  font-size:8vh;
  line-height:5vh;
  right:1vh;
  bottom:94vh;
  z-index:60;
  visibility:hidden;
  transition:all 0.4s ease;
  margin:auto;
}


.reveal {
  visibility:visible;
}

.disappear {
  color:#FFFFFF;
}



.close.active, .close:hover {
cursor:pointer;
}


#cellule1 {
	z-index: 10;
  bottom:94vh;
  transition:all 0.4s ease;
}

.slidehaut {
  border-top:0;
  transform: translate(0, -70vh);
  border-bottom:1px solid black;
}


/* FF hack */
@-moz-document url-prefix() {
  #cellule2.slidehaut {
    z-index: 9;
  }
}

/* FF hack */
@-moz-document url-prefix() {
  #cellule5.slidehaut {
    z-index: 39;
  }
}


.slidehaut2 {
  transform: translate(0, -70vh);
}


#cellule2 {
	z-index: 20;
  bottom:88vh;
  transition:all 0.4s ease;
}

#cellule3 {
	z-index: 30;
  bottom:82vh;
  transition:all 0.4s ease;
}

#cellule4 {
	z-index: 40;
  bottom:76vh;
  transition:all 0.4s ease;
}

#cellule5 {
	z-index: 50;
  bottom:70vh;
  transition:all 0.4s ease;
}


.swiper-container {
    width:100%;
    height:70vh;
    position:absolute;
    transition:all 0.4s ease;
    overflow:hidden;
}


 .swiper-container1 {
     bottom:-70vh;
 }

 .slidebas1 {
   bottom:0;
 }

 .swiper-container2 {
     bottom:0;
 }

 .slidebas2 {
   bottom:64vh;
 }

 .swiper-container3 {
     bottom:64vh;
 }

 .slidebas3 {
   bottom:128vh;
 }

 .swiper-container4 {
     bottom:128vh;
 }

 .slidebas4 {
   bottom:192vh;
 }

 .swiper-container5 {
     bottom:192vh;
 }

 .slidebas5 {
   bottom:256vh;
 }


 .swiper-slide {
		 background:#FFFFFF;
     position:relative;
 }

 .swiper-slide p {
   text-align:left;
   font-family:'Space Mono', monospace;
   font-weight:normal;
   font-size:2.25vh;
   color:#000000;
   word-wrap:break-word;
 }

 #titre {
	 width:15%;
   padding:2vh;
 }

 #txt{
	 width:28%;
   padding:2vh;
   border-left: 1px solid black;
 }

 .swiper-slide:nth-child(n+3){
   width: auto!important;
 }

 .swiper-slide img {
   height:100%;
 }

 .img1 img {
   border-left: 1px solid black;
 }

 .move-once {
   animation-duration:5s;
   animation-name: slideleft;
   animation-timing-function:ease-in-out;
   animation-iteration-count:1;
   animation-fill-mode:none;
  }

  @keyframes slideleft {

   0% {
        left: 0;
      }

   50% {
        left: -25%;
      }

   100% {
        left:0;
      }

 }




 /* pastille ! */

.pastille {
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
width:10vh;
height:10vh;
background-color:red;
z-index:1000;
position:absolute;
cursor:pointer;
display:flex;
}

.pastille2 {
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
width:10vh;
height:10vh;
background-color:red;
z-index:1000;
position:absolute;
cursor:pointer;
display:none;
}

.infos-popine {
  font-family: 'Roboto', sans-serif;
	font-size:9vh;
	color:#000000;
	display:none;
	justify-content:center;
  align-items:center;
	text-align:center;
	vertical-align:middle;
	line-height:9vh;
	margin:auto;
}

.hover {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}


.croix {
	position:relative;
	font-family:'Scope One', serif;
	font-size:14vh;
	color:#000000;
	display:none;
	justify-content:center;
  align-items:center;
	text-align:center;
	vertical-align:middle;
	line-height:12.5vh;
	margin:auto;
}

.active {
display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}




/* page infos (noire) */

.page-infos {
	top:-0.25vw;
  background-color:#000000;
	left:-1vw;
	width:103vw;
	height:101%;
	position:fixed;
	z-index:999;
	overflow-y:scroll;
}


.texte-infos {
	top:0;
	background-color:#000000;
	font-family:'Space Mono', monospace;
	color:#FFFFFF;
	font-size:1.1vw;
	line-height:1.8vw;
	font-weight:normal;
	height:101%;
}


.custom-scroll {
  height: calc(80% - 20px);
  /*position:fixed;*/
}

.scrolltop {
	top:-101%;
	transition:all 1s ease;
}

.scrolldown {
	top:-0.25vw;
	transition:all 1s;
}


.table-texte-infos {
	border-collapse:collapse;
	border-spacing:0;
	width:100%;
	height:auto;
}


.colonne1 {
	width:16.5vw;
	border-collapse:collapse;
	border-spacing:0;
	vertical-align:top;
	padding-bottom:1vw;
	padding-top:1.5vw;
	padding-left:1.75vw;
	padding-right:1vw;
}


.colonne2 {
	width:32.5vw;
	border-collapse:collapse;
	border-left:1px solid white;
	border-spacing:0;
	vertical-align:top;
	padding-bottom:2vw;
	padding-top:1.5vw;
	padding-left:1vw;
	padding-right:1vw;
}


.colonne3 {
width:auto;
border-collapse:collapse;
border-left:1px solid white;
border-spacing:0;
vertical-align:top;
padding-bottom:2vw;
padding-top:1.5vw;
padding-left:1vw;
padding-right:1vw;
}


.colonne-titre {
	padding-top:1vw;
	padding-bottom:1vw;
	text-align:left;
  border-bottom:1px solid white;
}

.titre {
	font-size:1.5vw;
	padding-left:1.75vw;
}

.sup-small {
	font-size:0.7vw;
}

.credits {
	font-size:0.75vw;
	line-height:1vw;
}

.page-infos img {
	position:relative;
	display:block;
	width:55%;
}

.texte-infos a {
	text-decoration:none;
	cursor: pointer;
	color:#FFFFFF;
}