@font-face {
  font-family: 'VG5000';
  src:    url('VG5000-Regular_web.eot');
  src:    url('VG5000-Regular_web.eot?#iefix') format('embedded-opentype'),
          url('VG5000-Regular_web.woff') format('woff'),
          url('VG5000-Regular_web.woff2') format('woff2'),
          url('VG5000-Regular_web.ttf') format('truetype'),
          url('VG5000-Regular_web.svg#svgFontName') format('svg');
  font-weight: normal;
  font-style: normal;
}

*::-webkit-scrollbar {
  width: 1.5vw;
}

*::-webkit-scrollbar-track {
  background:#090036;
}
*::-webkit-scrollbar-thumb {
  background-color: #fcfdf5;
  border: 3px solid #090036;
}

body{
 padding:0;
 margin:0;
 font-family: 'VG5000';
}

     #loader-container {
       background: #fcfdf5;
       position: absolute;
       width: 100vw;
       height: 100vw;
              z-index:3;
     }

     #loader {
       position: relative;
       left: 45vw;
       top: 45vh;
       width: 4vw;
       height: auto;
       animation: tourne 1.5s ease-in-out infinite;
       overflow: hidden;
     }

     .titre-menu{
       width:6vw;
     }



.menu{
  background-color:  #fcfdf5;
  position: fixed;
  width:5vw;
  height:100vh;
    padding:2vw;
  margin:0;
    z-index: 2;
    border : 8px solid  #fcfdf5;
  }
  .menu:hover{
    margin:0;
    width:20vw;
    border : 8px solid  #090036;
    }
.blabla{
display: none;
  width:90%;
  margin-left: 3%;
}
.picto{
  width:30%;
  display: none;
  margin: 5% 0 0 5%;
}
.lien {
  display: none;
  margin-top: 2vh;
  padding:1vw;}

.contact{
  display: none;
  width:80%;
  padding:1vw;
  margin : 30vh 0 0 3%;
  border : 4px solid  #090036;
}

.plus{position: absolute;
margin: 0 0 0 15vw;
width:3vw;
padding:0;
}
.plus2{position: absolute;
margin: 0 0 0 15vw;
width:3vw;
padding:0;
display:none;
}
.cache{position: absolute;
margin: 0 0 0 15vw;
width:3.3vw;
padding:0;
display:none;
z-index: 4;
}


@keyframes tourne {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}


#gentil {position:fixed;}

.tou{
 width:75vw;
 padding: 1vw;
 margin-left: 15vw;
 display: inline-block;
}

.casekibouge{
    padding:0vw;
    margin:0vw 0vw 3vw 3vw;
        overflow: hidden;
    height: 20vw;
    width:20vw;
    display: inline-block;
      position:relative;
      background-color: #fcfdf5;
            border : 8px solid #fcfdf5;
}
.casekibouge:hover{
        border : 8px solid  #090036;

}
@keyframes shake {
  0% { transform: rotate(0.7deg); }
  50% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0.7deg); }
}
.casekibouge:visited{
    width:100%;
}

.casekibougepas{
    padding:0vw;
    margin:0vw 0vw 10vw 3vw;
        overflow: hidden;
    height: 20vw;
    width:20vw;
    display: inline-block;
      position:relative;
      background-color: #fcfdf5;
}

.croix {
  width:5vw;
  display:none;
  margin: 5vw 0 0 91vw;
  position: fixed;
    z-index: 2;
}

.croix:hover {
animation: tourne 1s;}


.titre{
  position:relative;
    font-size: 80px;
    margin: 0 0 2vw 3vw;
    color:#090036;
}


.portfolio{
margin: 0;
padding:0;
display:inline-block;
font-size: 10vw;}

h1{
margin: 0;
padding:0;
font-size: 2vw;
}

h2 {
  font-size: 50px;
  display:inline-block;
  margin: 0 0vw 0 0vw;
}
#propos {margin-left:10vw;}
h3{
  font-weight: lighter;
  font-size:15px;
}
h4 {
  margin: 1vw 0 0 0;
  padding:0;
  text-align:right;
  font-size:15px;
}

h5{
font-size:25px;
width: 90%;
}

h6 {
  font-size:15px;
display:inline-block;
}


.texte {
  border : 2px solid black;
width:60%;
margin : 1vw 1vw auto 0;
padding:1vw;
display:block;
}
.texte2 {
  border : 2px solid black;
width:18vw;
padding:1vw;
  z-index: 2;
position:absolute;
display:block;
grid-column : 2;
margin:50vw 1vw   auto 2vw;
}

.carte{
 padding: 1vw;
 margin: 0;
  display: grid;
grid-template-columns:40vw 30vw;
  grid-auto-rows: minmax(100px, auto);
    position:relative;
}
.carte:hover{ }

.col1{
  padding:0vw;
  margin:0vw;
  grid-column : 1;
    position:relative;
}

.col2{
    padding:0 0 0 1vw;
    margin:0vw;
    width:25vw;
    height: 40vw;
    grid-column : 2;
    overflow-x: hidden;
    overflow-y: scroll;
}
/*
@keyframes bouge {
  0%   {margin-top:0 ;}
  100%  {margin-top: -150%;}
}*/

   img {
     width:80%;
   }
.imgc1 {
    width:100%;
padding:0; }

.imgc2 {
  position: relative;
  display: flex;
width:20vw;
  margin:0;
  padding:0 0 0 1vw;

}

a{color:#090036;}

a:hover{color:#9984ff;}




  @media (min-width: 0px) and (max-width: 800px) {
  .menu{display:none;}
  .casekibouge{
  width: 68vw;}
  .plus{
  margin: 4vw 0 0 55vw;
  width:9vw;
  }
  .plus2{
  margin: 4vw 0 0 55vw;
  width:9vw;
  }
  .cache{
  margin: 4vw 0 0 55vw;
  width:9vw;
  }
  .carte{
      display: grid;
  grid-template-columns:90%;
  }
  h1{font-size: 30px;}
  .col2{
    height:auto;
    width:75vw;
      grid-column : 1;
        display:inline-block;
      overflow-y:auto;
  }
  .imgc1 {
    display:flex;
width:60vw;
    margin:0;
    padding:0 0 0 0;
  }

  .imgc2 {
    display:flex;
width:60vw;
    margin:0;
    padding:0 0 0 0;
  }

  .texte {
  width:100%;
    margin : 1vw 1vw 2vw 0;

  }
  .texte2 {
      width:100%;
  grid-column : 1;
  margin : 1vw 1vw 2vw 0;
  padding:1vw;
  position:relative;

  }



    }