.section {
  box-sizing: border-box;
  width: 100%;
  height: 200vh;
}

.trigger {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  perspective: 200px;
  transform-style: preserve-3d;
}

.content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.image1-wrapper {
  position: relative;
  left: 10%;
  top: 10%;
}

.image2-wrapper {
  position: relative;
  bottom: 10%;
  right: 10%;
}

.image3-wrapper {
  position: relative;
  top: 5%;
  left: 60%;
}

.image4-wrapper {
  position:relative;
  top: 50%;
  left: 20%;
}

.image5-wrapper {
  position: absolute;
  bottom: -20%;
  left: 20%;
}

.image6-wrapper {
  position: absolute;
  bottom: -20%;
  right: 0%;
}

/* For demo only*/
body {
  background-color: #f1e0ac;
  margin: 0;
}

@font-face {
  font-family: "Montserrat";
  src: url(font/"tiny5x3-140-webfont.woff2") format('woff2');
  src: url(font/"tiny5x3-140-webfont.woff") format('woff');

}


@font-face {
  font-family: "FT88";
  src: url(../font/"FT88-Bold.ttf") format('truetype');
}

@font-face {
  font-family: "FT88";
  src: url(../font/"FT88-Regular.ttf") format('truetype');
}


.div-titre {
font-size:60px;
color: white;
font-style: normal;
font-weight: bold;
font-family: "Writer", "Montserrat";
background-color: none;
overflow: hidden;
height:100px;
width: 500px;
display: inline-block;
vertical-align:top;
border-style: none;
flex: auto;
margin-left: 10px;

}

.logo {
  font-size:60px;
  color: white;
  font-style: normal;
  font-weight: bold;
  background-color: none;
  overflow: hidden;
  display: inline-block;
  vertical-align:top;
  border-style: none;
  flex: auto;

  -webkit-animation: flicker 2s infinite;
}

@-webkit-keyframes flicker
{
0% {opacity:0;}
9% {opacity:0;}
10% {opacity:.5;}
13% {opacity:0;}
20% {opacity:.5;}
25% {opacity:1;}
}

#credits{
font-size:20px;
color: white;
font-style: normal;
font-weight: bold;
font-family: "FT88";


}
.div-gif {
font-size:40px;
color: white;
background-color: none;
overflow: hidden;
height:100px;
width: 200px;
display: inline-block;
vertical-align:top;
border-style: none;
flex: auto;
margin-left: 10px;

}


.div-info {
font-size:20px;
color: white;
font-style: normal;
font-weight: none;
font-family: 'Montserrat', sans-serif;
background-color: none;
overflow: hidden;
height:100px;
width: 400px;
display: inline-block;
vertical-align:top;
border-style: none;
flex: auto;
margin-left: 20px;
marg
padding-left: 15px;
align-content: center;


}

.div-cv {
font-size:30px;
color: white;
font-style: normal;
font-weight: bold;
font-family: "Montserrat", Helvetica, sans-serif ;
background-color: none;
overflow: hidden;
height:100px;
width: 300px;
display: inline-block;
vertical-align:top;
border-style: none;
flex: auto;
margin-left: 10px;

}

h1 {
font-size:50px;
color: white;
font-style: none;
font-family: "Montserrat", Helvetica, sans-serif ;
margin-left: 10px;
}

img{
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin-left: 10px;
      }


.gallerie{

      width:80%;
      display:flex;
      overflow: hidden;
      flex-wrap: wrap;
      justify-content: center;
      border-style: dashed;
      color: white;
      max-width: 1300px;
      margin: 70px auto 0;
      padding-top: 20px;
      background: none;

      }


.item{
  width: 400px;
  height:300px;
  margin: 10px;
  overflow: none;
  flex-shrink: 0;
  color: white;
  padding: 50px;
  justify-content: center;
}

.item img{
  width: 100%;
  height: 100%;
  transition: transform .1s;
}

.item img:hover{
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari 3-8 */
transform: scale(1.1);
}


a  {
   animation-duration:  2s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
  font-style: normal;
  color:#FFFFFF;
}
@keyframes clignoter {
  0%   { color:#FFFFFF; }
  40%   {color:#ff005a; }
  100% { opacity:#FFFFFF; }
}



a:link {

  font-family: "Montserrat";
  font-weight: normal;
  color: #FFFFFF ;
  text-decoration : none;
}
a:hover {
font-family: "Montserrat", Times, serif;
font-weight: normal;
color: #FFFFFF ;
text-decoration : line-through ;
}


div.sticky {
  position: -webkit-sticky;
  position: fixed;
	left: 0;
  top: 20;
  margin-top: 200px;
	writing-mode: vertical-lr;
	text-orientation: mixed;
	border: none;

  width: 100px;
  border-style: none;
  color: white;

}
.finpage{width:90%;
display:flex;
flex-wrap: wrap;
justify-content: center;
border-style: none;
color: white;
max-width: 1300px;
margin: 70px auto 0;
padding-top: 20px;
background: none;

}

.slide {
  animation-duration: 3s;
  animation-name: slide;
  animation-iteration-count: infinite;
}

.messagebienvenue{
  width:100%;
  font-size:40px;
  font-family: "Montserrat", Times, serif;
  color: #FFFFFF ;
  margin: 70px auto 0;
  padding-top: 20px;
  text-decoration : none;