@font-face {
  font-family: "CaviarDreams";
  src: url('fonts/CaviarDreams/CaviarDreams.ttf');
}

@font-face {
  font-family: "Roboto-Regular";
  src: url('fonts/Roboto/Roboto-Regular.ttf');
}

@font-face {
  font-family: "Harabara";
  src: url('fonts/Harabara/Harabara.otf');
}

@font-face {
  font-family: "Alpaca";
  src: url('fonts/Alpaca/Alpaca Scarlett Demo.ttf');
}

.loader {
  position : fixed;
  z-index: 9999;
  background : url('../data/loader/icon-loader.gif') 50% 50% no-repeat;
  top : 0px;
  left : 0px;
  height : 100%;
  width : 100%;
  cursor : wait;
}

.fondloader{
  position : fixed;
  z-index: 9990;
  background-color: rgba(255,255,255,0.8);
  top : 0px;
  left : 0px;
  height : 100%;
  width : 100%;
}

.home{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

.header{
  position: relative;
  margin: auto;
  width: 60%;
  height: 400px;
  /*background: rgba(255,255,255,0.1);*/
  z-index: 100;
  /*text-shadow: 0.3px 0.3px 0.3px #000; /* OMBRES PORTEES*/ 
}

.header:hover{
  cursor: pointer;
}

h1{
  font-family: "Alpaca",sans-serif;
  /*color: #171717;*/
  color: white;
  font-size: 3.3em;
  text-shadow: 1px 1px 2px #000;
}

h2{
  font-family: "CaviarDreams",sans-serif;
  margin-bottom: 50px;
  color: #16527C;
}

h2:hover{
  color: #04303C;
}

#top_header{
  text-align: center;
  padding-top: 60px;
}

#top_header p{
  font-family: "Alpaca",sans-serif;
  color: #16527C;
  font-size: 1.9em;
}

/*#nom, #statut{
  display: none;
}*/

#thumbnail{
  position: absolute;
  width: 100%;
  height: 400px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /*-webkit-animation: feature-bg-anim .6s ease-in-out;
  animation: feature-bg-anim .6s ease-in-out;*/
}

#thumbnail:hover{
  cursor: pointer;
}

#header-bg{
  width: 100%;
}

.container{
  width: 100%;
  text-align: center;
}

#bloc-content{
  width: 100%;
  font-family: "Roboto-Regular",sans-serif;
  font-size: 1em;
  line-height: 1.8em;
  letter-spacing: .4px;
  font-weight: 300;
  font-style: normal;
  color: rgba(31,37,38,.75);
}

.about-me{
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: justify;
  /*animation-name: FadeIn;
  animation-duration: 5s;*/
}

/*@keyframes FadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}*/

.lien-projet{
  width: 65%;
  display: flex;
  margin: auto;
  margin-bottom: 50px;
  /*background: red;*/
}

.wrapper_img{
  width: 32%; /*31.8% Pour avoir une taille similaire pour chaque image */
  position: relative;
  /*background: rgba(0,0,0,0.4);*/
  /*padding: 20px;*/
  margin: 6px;
  overflow: hidden;
}

.wrapper_img:hover{
  cursor: pointer;
}

.wrapper_img:hover > a .nom_projet{
  opacity: 1;
}

.wrapper_img:hover > a .img_projet{
  -webkit-filter: grayscale(80%);
  filter:grayscale(80%); 
  -webkit-filter: grayscale(80%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: grayscale(80%);
  -moz-transform: scale(1.10);
  -webkit-transform: scale(1.10);
  -o-transform: scale(1.10);
  -ms-transform: scale(1.10);
  transform: scale(1.10);
}

.nom_projet{
  position: absolute;
  top: 12%;
  width: 100%;
  text-align: center;
  font-family: "fira-sans",sans-serif;
  font-size: 1.3em;
  /*background: rgba(0,0,0,0.4);*/
  z-index: 20;
  color: #E6E6FA;
  opacity: 0;
  text-shadow: 1px 1px 2px #000; /* OMBRES PORTEES */
  -moz-transition: opacity 1s;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
  -ms-transition: opacity 1s;
  transition: opacity 1s;
}

.img_projet{
  position: relative;
  width: 100%;
  -webkit-filter: grayscale(0%);
  moz-webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  -moz-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  -ms-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
}

.footer{
  width: 100%;
  margin: 0;
}

.top_footer{
  width: 100%;
  height: 360px;
  background: #DEE5F6;
  display: flex;
}

#res_sociaux{
  width: 60%;
  margin: auto;
  text-align: center;
  font-family: "CaviarDreams",sans-serif;
}

#text_contact{
  font-size: 1em;
  color: #171717;
}

#text_contact p{
  margin-top: 20px;
  margin-bottom: 20px;
}

#bloc_icon_res{
  width: 114px;
  display: flex;
  margin: auto;
}

.icon_res{
  width: 32px;
  height: 32px;
  margin: 3px;
}

.icon_res:hover{
  cursor: pointer;
}

.footer-inner{
  width: 100%;
  height: 60px;
  background: #171717;
  color: #B5B5B5;
  font-family: "fira-sans",sans-serif;
  text-align: center;
  display: flex;
}

#copyright{
  margin: auto;
  font-size: 0.8em;
}

/***********************

    PROJETS

************************/

.titre_projet{
  margin-top: 50px;
}

.videos_pres{
  padding: 0;
}

.images_pres{
  padding: 0;
}

.images_pres_carousel{
  width: 100%;
}

#credit_hors_service{
  text-align: center;
}

/******* SLIDER **********/

/*** Carousel ***/

/* external css: flickity.css */

* { box-sizing: border-box; }

.main-carousel{
  padding: 0;
  margin-bottom: 80px;
  min-height: 300px;
}

.carousel-cell {
  width: 100%;
  /*counter-increment: gallery-cell;*/
  /*border-left: 2px solid #3C3C3C;*/
}

/* cell number */
/*.carousel-cell:before {
  display: block;
  text-align: center;
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.button-group {
  position: absolute;
  width: 100%;
  top: 4vw;
  left: 18.2vw;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}*/

/************************

    MEDIA QUERIES

************************/

@media screen and (min-width: 700px) and (max-width: 900px) { /* Medium Screen*/
  .lien-projet {
    width: 80%;
  }
}

@media screen and (min-width: 400px) and (max-width: 700px) { /* Small Screen*/
 .lien-projet {
    flex-direction: column;
  }

  .wrapper_img {
    width: 100%;
  }

  .nom_projet{
    top: 20%;
    font-size: 1.6em;
  }

  .main-carousel{
    min-height: 150px;
  }
}

@media screen and (min-width: 400px) and (max-width: 600px) {
  .header{
    height: 280px;
  }
}

@media screen and (min-width: 460px) and (max-width: 700px) {
  #top_header p{
    font-size: 1.6em;
  }

  h1{
    font-size: 2.5em;
  }
}

@media screen and (min-width: 400px) and (max-width: 460px) {
  #top_header p{
    font-size: 1.4em;
  }

  h1{
    font-size: 2.1em;
  }
}

@media screen and (max-width: 400px){ /* Very Small Screen*/
  .header{
    height: 180px;
  }

  #top_header p{
    font-size: 1.2em;
  }

    h1{
    font-size: 1.5em;
  }

   .lien-projet {
    flex-direction: column;
  }

  .wrapper_img {
    width: 100%;
  }

  .nom_projet{
    top: 12%;
    font-size: 1.2em;
  }

  .main-carousel{
    min-height: 110px;
  }
}