/* Général */

body {
  font-family: 'Roboto', sans-serif;
  font-size: 0.7em;
  color: black;
}
.row{
  margin:0;
}
.container-fluid {
  padding-right: 0;
  padding-left: 0;;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9
{
  padding: 0px;
}

.btn-default {
  font-size: 1em;
}

a:link {
  color: black;
  text-decoration: none;
}
a:visited {
  color: black;
  text-decoration: none;
}

a:active {
  color: black;
  text-decoration: none;
}

/* a:hover.souligne {
  color: black;
  text-decoration: underline;
} */

a:hover.couleur {
  color: #777777;
  text-decoration: none;
}
.souligne{
  position: relative;
}
.souligne::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -5px;
  left: 0;
  background-color: black;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
}
.souligne:hover:before{
  visibility: visible;
  transform: scaleX(1);
}

a{
  transition: all .4s ease-in-out;
}

img {
  width: 100%;
}


h1 {
  font-size: 1.5em;
  margin: 1px;
  font-weight: 400;
}

h2 {
  font-size: 1.3em;
  margin: 1px;
  font-weight: 100;
  padding-bottom: 10px;
}

p{
  margin: 1px;
  text-align: left;
  font-weight: 100;
  font-size: 1.2em;
}

.skills {
  font-size: 1.2em;
  padding-top: 60px;
  font-style: italic;

}

#ContainerTop {
  padding-top: 60px;
}

/* Fin Général */



/* Navigation */

#header {
  font-weight: 300 ;
  font-style: normal;
  padding: 15px 30px 15px 30px;
  right:0px;
	left:0px;
  position: fixed;
  overflow:auto;
  z-index: 100;
  font-size: 1em;
  align-items: center;
  background: #fff;
}

#navigation {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}

#navigation li {
  display: inline;
  margin-left: 10px;
}


#logo {
  width: 25px;
  height: 25px;
}

/*
.menu {
  position: absolute;
  top: 50%;
  right : 0%;
  transform: translate(-50%, -50%);
}
*/
#header > div {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}
#header .menu {
  justify-content: flex-end;
}

/* Fin Navigation */



/* Footer */

.footer {
  position: relative;
  padding: 14px 0px 14px 0px;
  border-top: 1px solid black;
  margin-top: 28px;
  margin-bottom: 28px;
  font-size: 1em;
  font-weight: 400;
  text-align: center;
}

/* Fin Footer */



/* Home */

#Projet {
  height: 35vw;
  background-color: #efefef;
}

.milieu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

.relative {
  position: relative;
}

.imageIndex:hover {
    transform: scale(2, 2);
    cursor: pointer
}

.zoomimg {
height: 50%;
overflow: hidden;
}

.imgIndex {
  height: 35vw;
  -o-object-fit:cover;
     object-fit:cover;
  transition: all 1s ease-in-out;
}

.imgIndex:hover {
transform: scale(1.10);
}

.NomProjet {
  font-size: 3em;
  margin: 0px;
  font-weight: 100;
  text-align: center;
}

.TypeProjet {
  font-size: 1.2em;
  margin: 0px;
  font-weight: 300;
  text-align: center;
}

/* Fin Home */




/* Projet */

.imagefull {
  padding-bottom: 10px;
  height: 50%;
}


.texteprojet {
  padding: 8% 30px 8% 30px;
}

.imagedroite {
  padding-left: 5px;
  height: 50vw;
  -o-object-fit:cover;
     object-fit:cover;
}

.imagegauche {
  padding-right: 5px;
  height: 50vw;
  -o-object-fit:cover;
     object-fit:cover;
}

.imghalf {
  padding-bottom: 10px;
  height: 50vw;
  -o-object-fit:cover;
     object-fit:cover;
}

.projetprecsuiv {
  padding: 15px 30px 0px 30px;
}

.projetsuiv {
  text-align: right;
}


/* Fin Projet */
.textecontact {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5em;
  color: black;
}

/* Contact */

/* Fin contact */

/* STYLE POUR LES SMARTPHONES / TABLETTES */

@media (max-width: 820px) {
  #Projet,
  .imgIndex{
    height: 50vh;
  }
}