@font-face {
  font-family:"FuturaCondensedBQ-ExtraBold";
  src:url("fonts/futura.woff2") format("woff2"),url("fonts/futura.woff") format("woff"),url("fonts/futura.otf") format("opentype");
  font-style:normal;font-weight:400;
}

@font-face {
  font-family:"BemboStd";
  src:url("fonts/BemboStd.woff2") format("woff2"),url("fonts/BemboStd.woff") format("woff"),url("fonts/BemboStd.otf") format("opentype");
  font-style:normal;font-weight:400;
}


@font-face {
  font-family:"BemboStd-Bold";
  src:url("fonts/BemboStd-Bold.woff2") format("woff2"),url("fonts/BemboStd-Bold.woff") format("woff"),url("fonts/BemboStd-Bold.otf") format("opentype");
  font-style:normal;font-weight:400;
}



@media screen and (min-device-width: 600px) {


body, html{
  background-color:#409ed8;
  scroll-behavior: smooth;
  padding, margin:0;
  overflow-y: auto;
}




#cover{

  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  display:flex;
  /*background-color:#409ed8;*/
  background-image:url("img/giscardpunkcover.png");

  background-repeat: no-repeat;
  background-size:100%;

/*
animation: intro3 5s;
  animation-fill-mode: forwards;
  */
}

#ciel_cover{

  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  display:flex;
  background-color:#409ed8;
  background-image:url("img/ciel.jpg");

  background-repeat: no-repeat;
  background-size:100%;

/*
animation: intro3 5s;
  animation-fill-mode: forwards;
  */
}



#titre{

  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  color:black;
  display: flex;
  justify-content: center;
  align-items:flex-start;
  background-color: rgba(255,255,255,1);
  font-family: "FuturaCondensedBQ-ExtraBold", sans-serif;
  mix-blend-mode:screen; 
  text-transform: uppercase;
/*
animation: intro 10s;
  animation-fill-mode: forwards;

  */
}

#titreTrigger{
  position: absolute;
  top:0px;
  left:0px;
  display: block;
  width:100%;
  height:100vh;
  z-index: 1;
}
#titreTrigger2{
  position: absolute;
  top:100vh;
  left:0px;

  display: block;
  width:100%;
  height:100vh;
  z-index: 1;
}


#titreover{

  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  color:rgba(255,255,255,0);
  display: flex;
  justify-content: center;
  align-items:flex-start;

  font-family: "FuturaCondensedBQ-ExtraBold", sans-serif;

  text-transform: uppercase;
/*
animation: intro2 5s ;
  animation-fill-mode: forwards;

  */

}



#titreoverover{

  position:absolute;
  top:100vh;
  left:0;
  width:100%;
  height:100vh;
  color:rgba(255,255,255,1);
  display: none;
  justify-content: center;
  align-items:flex-start;



  font-family: "FuturaCondensedBQ-ExtraBold", sans-serif;

  text-transform: uppercase;
/*
animation: intro2 5s ;
  animation-fill-mode: forwards;

  */
}

h1{
	padding, margin:0;
  max-width:80%;
  height:80%;
  font-size:8em;

}


.textover{

  filter:drop-shadow(0px 2px 2px black);

}


#titre_spec{


  width:100%;

  height:30vh;
  display: flex;


  justify-content: center;
  align-items: center;
  font-family: "FuturaCondensedBQ-ExtraBold", sans-serif;

  font-size: 5em;

}

#lettre_c{
      display:none;
  opacity:0;

}

#lettre_tif{

  display:none;
  opacity:0;

}

#page{


  position: absolute;
  left:0;
  width:100%;

  top:200vh;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;



  background-color: white;




}
/*
#info{

  top:0;
  position: fixed;
left: 0;
width: 50px;
height:50px;
  background-image: url("img/iconeinfo.svg");
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
 margin: 1%;
}

#info:hover{


}
*/



#infolayer{

  top:0;
  position: fixed;
  width: 3vw;
  height:3vw;

  background-image: linear-gradient(45deg, #000000 25%, #000000 25%, #000000 50%, #000000 50%, #000000 75%, #000000 75%, #000000 100%),url('img/icone.svg');

  background-size: 2.00px 2.00px, cover;
  background-blend-mode: screen;
  background-repeat: repeat, no-repeat;
  display: flex;
  margin: 1%;
  cursor:pointer;
    border:1px solid white;

}


#info{
    border:1px solid white;

  top:0;
  position: fixed;
  width: 3vw;
  height:3vw;
  background-image: linear-gradient(45deg, #ffffff 25%, #a8aaab 25%, #a8aaab 50%, #ffffff 50%, #ffffff 75%, #a8aaab 75%, #a8aaab 100%),url('img/icone.svg');

  background-size: 2.00px 2.00px, cover;
  background-blend-mode: screen;
  background-repeat: repeat, no-repeat;
  display: flex;
  margin: 1%;
  transition:opacity 1s;
  cursor:pointer;
}

.infobtn{
  left: -6vw;
}


#closelayer{

  top:0;
  position: absolute;
  right: 0;
  width: 4vw;
  height:4vw;
  border:1px solid white;

  background-image: linear-gradient(45deg, #000000 25%, #000000 25%, #000000 50%, #000000 50%, #000000 75%, #000000 75%, #000000 100%),url('img/iconeclose.svg');

  background-size: 2.00px 2.00px, cover;
  background-blend-mode: screen;
  background-repeat: repeat, no-repeat;
  display: flex;
  margin: 1%;
  cursor:pointer;

}


#close{

  top:0;
  position: absolute;
  right:  0;
  width: 4vw;
  height:4vw;

  background-image: linear-gradient(45deg, #ffffff 25%, #a8aaab 25%, #a8aaab 50%, #ffffff 50%, #ffffff 75%, #a8aaab 75%, #a8aaab 100%),url('img/iconeclose.svg');
  border:1px solid white;

  background-size: 2.00px 2.00px, cover;
  background-blend-mode: screen;
  background-repeat: repeat, no-repeat;
  display: flex;
  margin: 1%;
  transition:opacity 1s;
  cursor:pointer;
}

#close:hover{
  /*background-image: linear-gradient(45deg, #000000 25%, #000000 25%, #000000 50%, #000000 50%, #000000 75%, #000000 75%, #000000 100%),url('img/icone.svg');*/

  opacity: 0;
}

#info:hover{
  /*background-image: linear-gradient(45deg, #000000 25%, #000000 25%, #000000 50%, #000000 50%, #000000 75%, #000000 75%, #000000 100%),url('img/icone.svg');*/

  opacity: 0;
}




#infopage{
  top:-100vh;
  left: 0;
  width: 100%;
  height:100vh;
  position: fixed;
  display: flex;
  visibility: hidden;
  justify-content: center;
  align-items: center;
  background-color: white;
  font-family:"BemboStd";
  font-size:1.4em;
  z-index: 999;

  transition:top 2s ease-in-out, visibility 2s ease-in-out;

}

#infopage.on{

top:0vh;
visibility: visible;
}




#infopage a{
  font-weight: bold;
  color:#a8aaab;

  background-image: linear-gradient(45deg, #ffffff 25%, #a8aaab 25%, #a8aaab 50%, #ffffff 50%, #ffffff 75%, #a8aaab 75%, #a8aaab 100%);
  background-size: 2.00px 2.00px;
  background-repeat: repeat-x;
  background-position: bottom;

  transition:color 1s,background-image 1s ;
}

#infopage a:hover{
  color:black;
  background-image: linear-gradient(45deg, #ffffff 25%, #000000 25%, #000000 50%, #ffffff 50%, #ffffff 75%, #000000 75%, #000000 100%);

}




#infotext{
  opacity: 0;
  width: 80%;
  transition: opacity 1.5s ease-in-out 1s;
}

#infotext.on{

  opacity: 1;
}

#infotitre{
  font-family: "FuturaCondensedBQ-ExtraBold", sans-serif;

  font-size: 3em;

}

.special{

  background-image: linear-gradient(45deg, #ffffff 25%, #a8aaab 25%, #a8aaab 50%, #ffffff 50%, #ffffff 75%, #a8aaab 75%, #a8aaab 100%);
  background-size: 2.00px 2.00px;
  padding-top: 0.5%;
  padding-left: 0.5%;
  padding-right: 0.5%;
  color:white;
}







.filler{

  display: flex;
  width: 100%;
  height:80vh;
  
}



.year{
  font-family: "FuturaCondensedBQ-ExtraBold", sans-serif;

  /*    font-family:"BemboStd-Bold";*/

  font-size:3em;
  font-weight: 800;

}

.bloc{

  padding-top: 2em;
  width:80%;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;

  align-items: flex-start;

}

.texte{


  font-family:"BemboStd";
  font-size:1.4em;
  

}

p{
  margin-top:0.5em;
}



#timeline_cadre{
  position: fixed;
  opacity: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:100%;
  height:0vh;
  bottom:0px;
  left:0px;
  z-index: 999;
  background-color: white;
}



#timeline{

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width:90%;
  height:90%;

  /*background-color: gray;*/
}

#timeline_top{

  display: flex;
  flex-direction: row;
  justify-content: space-around;

  width:100%;
  height:90%;

  /*background-color: blue;*/
}


#timeline_scrollbar{
  display: flex;
  flex-direction: column;

  justify-content:  center;
  width:100%;
  height:6%;
/*
background-color: rgb(240,240,240);*/
background-image: linear-gradient(45deg, #ffffff 25%,rgb(200,200,200) 25%, rgb(200,200,200) 50%, #ffffff 50%, #ffffff 75%, rgb(200,200,200) 75%, rgb(200,200,200) 100%);
background-size: 2.00px 2.00px;
}

#timeline_cursor{
  display: flex;

  width:0%;
  height:90%;
  /*background-color: rgb(180,180,180);*/
  background-color: black;

  /*background:linear-gradient(-90DEG,rgb(240,240,240),black);*/

}

a{

  text-decoration: none;
}


.tl_object{
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;

  width:5%;
  height:100%;
  /*background-color: green;*/

}

.year_tl{
  font-family: "FuturaCondensedBQ-ExtraBold", sans-serif;

  display:flex;
  justify-content: center;
  align-items: flex-end;
  height: 30%;
  width:100%;
  color:rgb(200,200,200);
  font-size: 1em;
  /*overflow:hidden ;*/
  transition:font-size 1s, color 1s;
}

.bloc_tl{


  display: flex;
  width:60%;
  height:40%;
  background-image: linear-gradient(45deg, #ffffff 25%,rgb(200,200,200) 25%, rgb(200,200,200) 50%, #ffffff 50%, #ffffff 75%, rgb(200,200,200) 75%, rgb(200,200,200) 100%);
  background-size: 2.00px 2.00px;

  /*background-color: rgb(200,200,200);*/
  transition: width 1s, height 1s, background-color 1s;
}


.tl_object:hover > .year_tl{

  font-size: 1.5em;
  color:rgb(180,180,180);

}

.tl_object:hover > .bloc_tl{

  width:80%;
  height:60%;

  background-color: rgb(180,180,180);
}


.animationTimeline{


  animation: timelinegrow 0.5s ease-out alternate forwards;
}

.animationTimeline2{


  animation: timelinegrow2 0.5s ease-in normal forwards;
}



}








@keyframes timelinegrow{
  0%{ height: 0vh;    }
  100%{ height: 20vh; }


}


@keyframes timelinegrow2{
  0%{ height: 20vh;    }
  100%{ height: 0vh; }


}



@keyframes intro{
  0%{ background-color: rgba(255,255,255,1);    }
  100%{ background-color: rgba(255,255,255,0); }



}


@keyframes intro2{
  0%{ color:rgba(255,255,255,0);  }
  100%{ color:rgba(255,255,255,1); }



}

@keyframes intro3{
  0%{filter:grayscale(0%); }
  100%{ filter:grayscale(70%); }



}



/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////MOBILE ET TABLETTES///////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/


@media screen and (max-device-width: 600px) {


body, html{
  background-color:#409ed8;
  scroll-behavior: smooth;
  padding, margin:0;
  overflow-y: auto;
}




#cover{

  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  display:flex;
  /*background-color:#409ed8;*/
  background-image:url("img/giscardpunkcovermobile.png");
  background-repeat: no-repeat;
  background-size:100%;

}

#ciel_cover{

  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  display:flex;
  background-color:#409ed8;
  background-image:url("img/cielmobile.jpg");
  background-repeat: no-repeat;
  
    background-size:100%;


}



#titre{

  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  color:black;
  display: flex;
  justify-content: center;
  align-items:center;
  background-color: rgba(255,255,255,1);
  font-family: "FuturaCondensedBQ-ExtraBold", sans-serif;
  mix-blend-mode:screen; 
  text-transform: uppercase;


}

#titreTrigger{
  position: absolute;
  top:0px;
  left:0px;
  display: block;
  width:100%;
  height:100vh;
  z-index: 1;
}
#titreTrigger2{
  position: absolute;
  top:100vh;
  left:0px;

  display: block;
  width:100%;
  height:100vh;
  z-index: 1;
}


#titreover{

  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  color:rgba(255,255,255,0);
  display: flex;
  justify-content: center;
  align-items:center;

  font-family: "FuturaCondensedBQ-ExtraBold", sans-serif;

  text-transform: uppercase;


}



#titreoverover{

  position:absolute;
  top:100vh;
  left:0;
  width:100%;
  height:100vh;
  color:rgba(255,255,255,1);
  display: none;
  justify-content: center;
  align-items:flex-start;



  font-family: "FuturaCondensedBQ-ExtraBold", sans-serif;

  text-transform: uppercase;

}

h1{
  padding, margin:0;
  max-width:80%;
  height:auto;
  font-size:3em;
}


.textover{

  filter:drop-shadow(0px 2px 2px black);

}


#titre_spec{


  width:100%;

  height:30vh;
  display: flex;


  justify-content: center;
  align-items: center;
  font-family: "FuturaCondensedBQ-ExtraBold", sans-serif;

  font-size: 2em;

}

#lettre_c{
      display:none;
  opacity:0;

}

#lettre_tif{

  display:none;
  opacity:0;

}

#page{


  position: absolute;
  left:0;
  width:100%;

  top:200vh;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;



  background-color: white;




}



#infolayer{

  top:0;
  position: fixed;
  width: 8vw;
  height:8vw;

  background-image: linear-gradient(45deg, #000000 25%, #000000 25%, #000000 50%, #000000 50%, #000000 75%, #000000 75%, #000000 100%),url('img/icone.svg');

  background-size: 2.00px 2.00px, cover;
  background-blend-mode: screen;
  background-repeat: repeat, no-repeat;
  display: flex;
  margin: 1%;
  cursor:pointer;
    border:2px solid white;

}


#info{
  top:0;
  position: fixed;
  width: 8vw;
  height:8vw;
  background-image: linear-gradient(45deg, #ffffff 25%, #a8aaab 25%, #a8aaab 50%, #ffffff 50%, #ffffff 75%, #a8aaab 75%, #a8aaab 100%),url('img/icone.svg');

  background-size: 2.00px 2.00px, cover;
  background-blend-mode: screen;
  background-repeat: repeat, no-repeat;
  display: flex;
  margin: 1%;
  transition:opacity 1s;
  cursor:pointer;
  border:2px solid white;
}

.infobtn{
  left: -20vw;
}


#closelayer{

  top:0;
  position: absolute;
  right: 0;
  width: 10vw;
  height:10vw;

  background-image: linear-gradient(45deg, #000000 25%, #000000 25%, #000000 50%, #000000 50%, #000000 75%, #000000 75%, #000000 100%),url('img/iconeclose.svg');

  background-size: 2.00px 2.00px, cover;
  background-blend-mode: screen;
  background-repeat: repeat, no-repeat;
  display: flex;
  margin: 1%;
  cursor:pointer;
  border:1px solid white;

}


#close{

  top:0;
  position: absolute;
  right:  0;
  width: 10vw;
  height:10vw;

  background-image: linear-gradient(45deg, #ffffff 25%, #a8aaab 25%, #a8aaab 50%, #ffffff 50%, #ffffff 75%, #a8aaab 75%, #a8aaab 100%),url('img/iconeclose.svg');

  background-size: 2.00px 2.00px, cover;
  background-blend-mode: screen;
  background-repeat: repeat, no-repeat;
  display: flex;
  margin: 1%;
  transition:opacity 1s;
  cursor:pointer;
    border:1px solid white;

}

#close:hover{
  /*background-image: linear-gradient(45deg, #000000 25%, #000000 25%, #000000 50%, #000000 50%, #000000 75%, #000000 75%, #000000 100%),url('img/icone.svg');*/

  opacity: 0;
}

#info:hover{
  /*background-image: linear-gradient(45deg, #000000 25%, #000000 25%, #000000 50%, #000000 50%, #000000 75%, #000000 75%, #000000 100%),url('img/icone.svg');*/

  opacity: 0;
}



#infopage{
  top:-100vh;
  left: 0;
  width: 100%;
  height:100vh;
  position: fixed;
  display: flex;
  visibility: hidden;
  justify-content: center;
  align-items: center;
  background-color: white;
  font-family:"BemboStd";
  font-size:1.2em;
  z-index: 999;

  transition:top 2s ease-in-out, visibility 2s ease-in-out;

}

#infopage.on{

top:0vh;
visibility: visible;
}




#infopage a{
  font-weight: bold;
  color:#a8aaab;

  background-image: linear-gradient(45deg, #ffffff 25%, #a8aaab 25%, #a8aaab 50%, #ffffff 50%, #ffffff 75%, #a8aaab 75%, #a8aaab 100%);
  background-size: 2.00px 2.00px;
  background-repeat: repeat-x;
  background-position: bottom;

  transition:color 1s,background-image 1s ;
}

#infopage a:hover{
  color:black;
  background-image: linear-gradient(45deg, #ffffff 25%, #000000 25%, #000000 50%, #ffffff 50%, #ffffff 75%, #000000 75%, #000000 100%);

}




#infotext{
  opacity: 0;
  width: 80%;
  transition: opacity 1.5s ease-in-out 1s;
}

#infotext.on{

  opacity: 1;
}

#infotitre{
  font-family: "FuturaCondensedBQ-ExtraBold", sans-serif;

  font-size: 2em;

}

.special{

  background-image: linear-gradient(45deg, #ffffff 25%, #a8aaab 25%, #a8aaab 50%, #ffffff 50%, #ffffff 75%, #a8aaab 75%, #a8aaab 100%);
  background-size: 2.00px 2.00px;
  padding-top: 0.5%;
  padding-left: 0.5%;
  padding-right: 0.5%;
  color:white;
}







.filler{

  display: flex;
  width: 100%;
  height:80vh;
  
}



.year{
  font-family: "FuturaCondensedBQ-ExtraBold", sans-serif;

  /*    font-family:"BemboStd-Bold";*/

  font-size:2.5em;
  font-weight: 800;

}

.bloc{

  padding-top: 2em;
  width:80%;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;

  align-items: flex-start;

}

.texte{


  font-family:"BemboStd";
  font-size:1.4em;
  

}

p{
  margin-top:0.5em;
}



#timeline_cadre{
  position: fixed;
  opacity: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:100%;
  height:0vh;
  bottom:0px;
  left:0px;
  z-index: 999;
  background-color: white;
}



#timeline{

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width:90%;
  height:95%;

  /*background-color: gray;*/
}

#timeline_top{

  display: flex;
  flex-direction: row;
  justify-content: space-around;

  width:100%;
  height:90%;

  /*background-color: blue;*/
}


#timeline_scrollbar{
  display: flex;
  flex-direction: column;

  justify-content:  center;
  width:100%;
  height:4%;
/*
background-color: rgb(240,240,240);*/
background-image: linear-gradient(45deg, #ffffff 25%,rgb(200,200,200) 25%, rgb(200,200,200) 50%, #ffffff 50%, #ffffff 75%, rgb(200,200,200) 75%, rgb(200,200,200) 100%);
background-size: 2.00px 2.00px;
}

#timeline_cursor{
  display: flex;

  width:0%;
  height:90%;
  /*background-color: rgb(180,180,180);*/
  background-color: black;

  /*background:linear-gradient(-90DEG,rgb(240,240,240),black);*/

}

a{

  text-decoration: none;
}


.tl_object{
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;

  width:6%;
  height:100%;
  /*background-color: green;*/

}

.year_tl{
  font-family: "FuturaCondensedBQ-ExtraBold", sans-serif;

  display:flex;
  justify-content: center;
  align-items: center;
  height: 30%;
  width:100%;
  color:rgb(200,200,200);
  font-size: 0.8em;

  transition:font-size 1s, color 1s;
/*  writing-mode: vertical-lr;*/
transform: rotate(90DEG);
}

.bloc_tl{


  display: flex;
  width:60%;
  height:50%;
  background-image: linear-gradient(45deg, #ffffff 25%,rgb(200,200,200) 25%, rgb(200,200,200) 50%, #ffffff 50%, #ffffff 75%, rgb(200,200,200) 75%, rgb(200,200,200) 100%);
  background-size: 2.00px 2.00px;

  /*background-color: rgb(200,200,200);*/
  transition: width 1s, height 1s, background-color 1s;
}


.tl_object:hover > .year_tl{

  font-size: 1.5em;
  color:rgb(180,180,180);

}

.tl_object:hover > .bloc_tl{

  width:80%;
  height:60%;

  background-color: rgb(180,180,180);
}


.animationTimeline{


  animation: timelinegrow 0.5s ease-out alternate forwards;
}

.animationTimeline2{


  animation: timelinegrow2 0.5s ease-in normal forwards;
}



}