/* Feuille de style principal */

/* Header et logo */
/* Menu langue Français/Anglais */
/* Menu Principale */
/* container principale */
/* Retour haut */
/* Portfolio interaction */
/* Page Projet */
/* Page A propos */
/* Page Contact */




.icon{
  font-family: 'icon_me';
  font-weight: normal;
  font-style: normal;
  font-size: 22px;

}


/* Header et logo */
.site-header {
  margin-top: 50px;
  margin-bottom: 60px;
  margin-left: 50px;
  margin-right: 50px;
}

.haut{
  width: 100%;
  display: flex;
}

.site-branding{
  flex-grow: 1;
}

.logo{
  width: 70px;
}


/* Menu langue Français/Anglais */
.menu-langue{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
}

.menu-L{
  color: #000000;
}

.langue{
  list-style: none;
  display: inline-flex;
}

.langue a{
  color: #000000;
}
.langue a:hover{
  color: #999999;
  text-decoration: none;
}

.langue-element{
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.langue-element.select{
  color: #FFFFFF;
  background-color: #000000;
}


/* Menu Principale */
.fixed-menu {
    position: fixed;
    top: calc(70vh + 20px);
    left: -95px;
    z-index: 999;
    transform: rotate(-90deg);
    }

.navbar{
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .2px;
  height: 2em;
}

.nav-link{
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 2px;
  padding-bottom: 2px;

}



/* Classe principale de la barre de navigation */
.navbar-default {
 /* Couleur de fond de la barre de navigation */
 background-color: #FFFFFF;
 border-color: #;
}
/* Couleur des titres affichés dans la barre */
.navbar-default .navbar-brand {
 color: #000000;
}
/* Couleur utilisée lors du passage de la souris sur un titre de la barre */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
 color: #FFFFFF;
}
/* Couleur utilisée pour les liens */
.navbar-default .navbar-nav > li > a {
 color: #000000;
}
/* Couleur utilisée pour les liens lorsque la souris passe dessus */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
 color: #999999;
}
/* Couleur utilisée pour le lien actif (celui qui est affiché sur la page) */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
 color: #FFFFFF;
 background-color: #000000;
}


/* container principale */
.container{
  /*background-color: #ddf2ee;*/
  max-width: 1740px;
  padding-left: 200px;
  padding-right: 190px;
}


/* Retour haut */
.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
}

.fixed-up{
  position: fixed;
  top: calc(80vh + 10px);
  right: 10px;
  z-index: 999;
  transform: rotate(90deg)
}

#back-to-top{
  font-family: 'icon_me';
  font-weight: normal;
  font-style: normal;
  font-size: 100px;
  color: #000000;
}

#back-to-top:hover{
  color: #999999;
  text-decoration: none;
}


/* Portfolio interaction */
.img-fluid {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  transform: translate(2%, -80%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.fond-image:hover .img-fluid {
  width: 80%;
  opacity: 0.3;
}

.fond-image:hover .middle {
  opacity: 1;
}

.text {
  position:  sticky;
  color: black;
  font-size: 14px;
  width: 100%;
}

.titre-PF{
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.2;
  font-size: 1.8em;
  text-align: left;
}

.matiere-PF{
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 0.8em;
  text-align: left;

}


/* Page Projet */
.image-hero {
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}

.container-projet{
  max-width: 1740px;
  padding-left: 100px;
  padding-right: 100px;
  font-size: 14px;
}

.titre-projet{
  margin-top: 3rem;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 3em;
  font-weight: 400;
  line-height: 1.2;
}

.categorie{
  margin-top: 1rem;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 1px;
}

.text-projet{
  margin-top: 5rem;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2em;
  letter-spacing: .2px;
  line-height: 1.7em;
  color: #3e3e3e;
}

.italique-projet{
  margin-top: 1rem;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2em;
  letter-spacing: .2px;
  line-height: 1.7em;
  color: #3e3e3e;
}

.image-projet{
  margin-top: 60px;
  width: 100%;
  height: auto;
}

/* Page Projet - Bouton Avant/Après */
.A_A{
  color: #000000;
  list-style: none;
  display: block;
}
.icon-arrow_l{
  font-size: 50px
}
.icon-arrow_r{
  font-size: 50px
}

.V a{
  color: #000000;
  font-size: 50px;
  float: left;
  width: 50%;
}
.V a:hover{
  text-decoration: none;
}

.V .icon-arrow_l:hover{
  color: #999999;
  text-decoration: none;
  font-size: 50px;
}
.P a{
  color: #000000;
  font-size: 50px;
  float: right;
  text-align: right;
  float: right;
  width: 50%;
  padding-right: 40px;
}

.P a:hover{
  text-decoration: none;
}

.P .icon-arrow_r:hover{
  color: #999999;
  text-decoration: none;
  font-size: 50px;
}

/* Page A propos */
.portrait{
  width: 100%;
}
.propos{
  font-size: 14px;
  margin-bottom: 80px;
}

.titre-page{
  margin-bottom: 1rem;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-size: 2.8em;
  font-weight: 400;
  line-height: 1.2;
}
.texte-propos{
  margin-top: 5rem;
}
.texte-page{
  margin-top: 1rem;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.1em;
  letter-spacing: .2px;
  line-height: 1.7em;
  color: #3e3e3e;
}
.CV{
  margin-left: -20px;
}
.italique-droit{
  margin-top: 1rem;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9em;
  letter-spacing: .2px;
  line-height: 1.5em;
  color: #3e3e3e;
}

/* Page Contact */
.container-contact{
  /*background-color: #ddf2ef;*/
  max-width: 1740px;
  padding-top: 50px;
  padding-bottom: 50px;
}

.texte-contact{
  margin-top: 2rem;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.1em;
  letter-spacing: .2px;
  line-height: 1.7em;
  color: #3e3e3e;
}


font-family: 'Open Sans', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Crimson Text', serif;