@font-face {
  font-family: HostGrotesk;
  src: url(HostGrotesk.ttf);
}

a:hover{
	cursor : zoom-in;
}

a.underline2{
	cursor : n-resize;
}

a.underline{
	cursor : s-resize;
}


.chargement{
  position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background-color: #527b29;
	z-index: 100;
	display:flex;
	align-items:center;
	justify-content:center;
}

.chargementimage{
  width:40%;
}


html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  color : #black;
  background-color: black;
  
}


img{
  width: 100%;
}

hr, h1, p{
  margin: 0;
}

h1{
  font-family: "HostGrotesk";
  font-size: 1.5vw;
}


header{
  width: 100%;
  padding-top : 1%;
  position: fixed;
  //background-color: white;
  mix-blend-mode : difference;
  z-index: 99;

}

a{
  color: inherit;
  text-decoration: none;
}

.logo{
  float: left;
  width: 4%;
  margin-top : 0.5vh;
  margin-left: 3%;
  margin-right: 3%;
}

.navbar{
  display: flex;
}

.trait{
  margin-top: 1%;
  height: 1px;
	border: 0;
	background-color: white;
}

.underline, .fin{
  color : white;
  background-color: none;
  text-decoration: none;
  font-size: 15pt;
  //border: solid 1pt;
  //border-radius: 25px;
  padding : 1%;
  margin-right: 2%;
  font-family : "HostGrotesk";
}

.underline2{
  color : white;
  background-color: none;
  text-decoration: none;
  font-size: 15pt;
  //border: solid 1pt;
  //border-radius: 25px;
  padding : 1%;
  margin-right: 2%;
  display: block;
  font-family : "HostGrotesk";
}

.underline:hover{
	opacity : 0.6;
  //background-color: white;
  text-decoration: none;
}

.underline2:hover{
  //color : black;
  opacity : 0.6;
  //background-color: white;
  text-decoration: none;
}

.fin{
  margin-left: auto;
}
.fin:hover{
	opacity : 0.6;
  //background-color: white;
  text-decoration: none;
  //font-size: 15pt;
  //border: solid 1pt black;
  //border-radius: 25px;
}



.card{
	//padding-top : 6%;
	//margin-bottom : 5%;
	width : 100%;
	margin-left: auto;
	margin-right: auto;
}




.projets{
  background-color: white;
  padding-top : 3%;
}

.titre1{
  font-size: 3vw;
  margin-top: 2%;
  padding: 3%;
}

.description{
  font-size: 1vw;
}

.image1{
  width: 25vw;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}



.bloc{
  mix-blend-mode : luminosity ;
  opacity: 60%;
  margin-left: 3%;
  display: flex;
  flex-direction: column;
  //border: 1px solid black;
  border-radius: 0px;
  background-color: white;
  width: 25vw;
  height: 25vw;
    filter: blur(0.5px);
    -webkit-filter: blur(0.5px);
}

.bloc:hover{
  mix-blend-mode: normal;
  opacity: 100%;

    filter: blur(0px);
    -webkit-filter: blur(0px);
}

.lesblocs{
  //padding-left: 3%;
  padding-right: 3%;
  margin-top: 2%;
  padding-bottom: 2%;
  display: flex;
  overflow-x: scroll;
}

.texte{
  padding: 2%;
}







.footerflex{
  display: flex;
  padding: 3%;
  background-color : white;
}

.footerdroite{
  padding-top: 1%;
  margin-left: auto;
  width: 5%;
  display: flex;
}

.logos{
  margin-right: 20%;
}

.mail{
  text-decoration: none;
  color : inherit;
}

.cc{
  text-align: center;
  padding-top: 1%;
  padding-bottom: 1%;
  
  background-color : white;
}


@media only screen and (max-width: 700px) {
  .chargementimage{
    width:70%;
  }
  .logo{
	margin-top : 1%;
    width: 5vh;
  }
  .underline2{
    display: none;
  }
  .underline, .fin{
    font-size: 2vh;
    padding: 2%;
  }
  .droite{
    margin-top: 35vw;
  }
  .bawflex{
    padding-bottom: 15%;
  }
  .lesblocs{
    display: block;
    text-align: center;
  }
  .bloc{
    display: inline-block;
    width: 40vw;
    height: 35vw;
    overflow: hidden;
    margin : 2%;
    text-align: left;
    filter: none;
  }
  h1{
	  width : 80%;
	  font-size: 2vh;
	  line-height : 1.6vh;
  }
  .image1{
    width: 100%;
  }
  .footerdroite{
    width: 15%;
  }
  .cc{
    font-size: 10pt;
  }
  .description{
   display: none;
  }
}