@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');
/*POUR IFRAME


/*1. Essential, basic container*/
body,html{
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  /*min-height: 100vh;*/
  width: 100vw;
  overflow: hidden;
  -webkit-overflow-scrolling:touch;
}

p{
  line-height:1.4;
}

.timeline-containers{
  box-sizing: border-box;
  /*flex-grow: 1;*/
  width:100%;
  height:100vh;
  /*border:1px solid red;*/
}

#container-project{
  height:calc(100% - 6rem);
  /*background-color: white;*/
  width: 100%;
  position: relative;
}
#container-timeline {
  height:6rem;
  width: 100%;
  min-width: 100vw !important;
  overflow-x:scroll;
  -webkit-overflow-scrolling:touch;
  box-sizing: border-box;
  position: relative;
  background-color: white;
}
/*TO REMOVE : better to have it out of the wrapper so it stays between projects*/
/*#container-timeline:before {
  content: "";
  display: block;
  position: fixed;
  bottom: 0px;
  left: 50%;
  width: 1px;
  height: 10%;
  z-index: 1000;
  border-left: 1px solid black;
}*/

/*Scrollbars*/
#container-timeline::-webkit-scrollbar,
.pop-inside::-webkit-scrollbar {
  display: none;
  scrollbar-width: none;
}

#container-timeline,
.pop-inside {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  scrollbar-width: none;
}

/* Containers for Timeline only*/
#timeline-scrollable {
  position:absolute;
  bottom:0;
  left:0;
  height: 100%;
  overflow:hidden;
  /*background:rgba(255, 0, 0, 0.5);*/
  display : flex;
  flex-flow: line;
  flex-wrap: nowrap;
  padding-left: 50%;
  padding-right: 50%;
}

.timeline-cell {
  texte-size: 1rem;
	text-align: center;
	width: 8.333vw;
  min-width: 8.333vw;
	border-left: 1px solid rgba(0, 0, 0, 1);
	height: 4rem;
	margin: auto;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */

}

.timeline-cell:last-child {
  border-right: 1px solid rgba(0, 0, 0, 1);
}

.hidden {
  visibility:hidden;
  display:none;
}

/*to remove*/
#shadow {
    z-index: 10;
    width: 20px;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: -20px;
    box-shadow: -4px 0px 49px black;
}

/*@media only screen and (max-width: 992px) {*/
  html.mobile,
  body.mobile {
    font-size: 15px;
    background-color: blue;
  }

  .mobile .timeline-cell {
    text-size: 1rem;
  	text-align: center;
  	width: 16.666vw;
  	border-left: 1px solid rgba(0, 0, 0, 1);
  	height: 4rem;
  	margin: auto;
  }
  .mobile h1, .mobile .font-large{
    font-size: 2rem;
  }

  @media only screen and (max-width: 800px) {
    .timeline-cell {
      text-size: 1rem;
    	text-align: center;
    	width: 16.666vw;
    	border-left: 1px solid rgba(0, 0, 0, 1);
    	height: 4rem;
    	margin: auto;
    }
  }
/*}*/