html, body, main, article {
  padding: 12px;
}

body {
  font-family: 'Montserrat', sans-serif; /* famille de typo */
 /* background-image: url('fond4.jpg');
  background-size: 125% 125%;
  background-position: center;*/
}

.italique {font-style: italic;}

ul {
  padding-left: 0px;
  font-size: 25px;
  line-height: 50px;
}

button{
  font-family: 'Montserrat', sans-serif;
  background: white;
  border: 1px solid black;
  padding: 8px;
  margin-top: 10px;
}

button:hover{
  color: #00bef1; /* bleu */
  transition: 0.2s ease;
  border: 1px solid;
}

a:hover { /* style des liens au survol*/
  color: #00bef1; /* bleu */
  transition: 0.5s ease;
}

a { /* style des liens */
  text-decoration: none;
  color: black;
}

/* bloc de gauche - menu */
nav {
  position:fixed;
  width: 180px;
}

nav header h1 {display: none;}

.menu {
  font-weight: bold; /* menu en gras */
  margin-top: 40px; /* espace entre le menu et le logo */
}

.logo{
  margin-left: -1em;
}

.menu h1, .menu h2 {display: none;}

.a-propos h2{
  margin-top: 50px;
  font-size: 15px;
  line-height: 20px;
}

.a-propos {
  font-size: 13px;
  line-height: 16px;
}

.reseaux{
  max-width: 30px;
  margin-top: 20px;
}
.reseaux:hover{
  opacity: 30%;
}

.reseauxLFDE{
  max-width: 30px;
  margin-top: 0.5em;
}

.reseauxLFDE:hover{
  opacity: 30%;
}



/* mentions légales */

.textementions{
  max-width: 100%;
  font-size: 12px;
  margin-left: 165px;
}

.textementions h3{
  font-size: 13px;
  font-weight: bold;
  margin-top: 40px;
}

.textementions h2{
  font-size: 16px;
  font-weight: bold;
}

/* ACCUEIL */

* {box-sizing:border-box}

.phrase{
font-size: 15vw;
font-family: 'Montserrat', sans-serif;
line-height: 15vw;
padding-left: 22vw;
}

/* Slideshow container */
.slideshow-container {
  margin-left: 15vw;
  margin-top: -15vw;
  max-width: 1200px;
}


.slideshow-container:hover { /* style des liens au survol*/
    cursor: pointer;
    opacity: .4;
    transition: opacity 0.3s ease;
  }


.active {
  background-color: white;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 1s;
}

.langue{
  margin-left: 190px;
  grid-gap: 4em;
  display: grid;
}

/*
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}



/* page des projets */

.page-projets{
  margin-left: 170px;
}

.box {
  font-size: 1rem;
  min-width: 250px;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: -0.3em;
}

.wrapper {
  width: 100%;
  display: grid;
  grid-template-areas: 
  "box collections" 
  "box mona" 
  "box Oper" 
  "box chroniques" 
  "box collection 2"
  "box rs"
  "box air"
  "box chamaleon"
  "box prenez le pli"
  "box martinez"
  "box medecine"
  "box 15ans"
  "box sitegp"
  "box alteream"
  "box voeux"
}

@media (min-width: 750px) {
  .wrapper { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .wrapper { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1300px) {
  .wrapper { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1500px) {
  .wrapper { grid-template-columns: repeat(5, 1fr); }
}

.projet-image {
  grid-area: projet-image;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.projet-image:hover {
  cursor: pointer;
  opacity: .15;
  transition: opacity 0.5s ease;
}

.footer{
  position: fixed;
  font-size: .6em;
  bottom: 0px;
  padding-bottom: .5em;
  text-decoration: underline;
}

.page-projets h2 {
  position: absolute;
  text-align: left;
  margin-left: 1em;
  padding-top: 1em;
  font-size: 1.3em;
  line-height: 1.2em;
  font-weight: bold;
}

.page-projets h3 {
  position: absolute;
  text-align: left;
  margin-left: 1.7em;
  padding-top: 4.5em;
  font-size: .8em;
  line-height: 1.2em;
  font-weight: normal;
}

.page-projets h4 {
  position: absolute;
  margin: 1.7em;
  padding-top: 5.5em;
  font-size: 0.8em;
  line-height: 1.2em;
  font-weight: normal;
}

.page-projets h5 {
  position: absolute;
  margin: 1.7em;
  padding-top: 7.5em;
  font-size: 0.8em;
  line-height: 1.2em;
  font-weight: normal;
}
/* page descriptive des projets */

.page-description {
  margin-left: 190px;
  grid-gap: 4em;
  display: grid;
  grid-template-areas:
  "visuels"
  "description"
}

@media (min-width: 900px) {
  .page-description { grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 1000px) {
  .page-description { grid-template-columns: repeat(2, 1fr); }
}

.description{
  font-size: 13px;
  line-height: 20px;
  text-align:left;
}

.description h1{
  font-size: 20px; 
  margin-bottom:-10px;
 }

.description h3{
  font-size: 12px;
  line-height: 15px;
  margin-bottom: 30px;
}

.icone{
  width: 80%;
  margin-top: 14px;
}

.taille {
  width: 100%;
  padding-bottom: 0.5em;
}

/* Next & previous buttons */ 

.nextprevious{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.prev {
  font-size: 25px;
  font-weight: bold;
}

.next {
	font-size: 25px;
  font-weight: bold;
  position: inline;
  text-align: right;
}

#textenext{
	font-size: 12px;
  line-height: 14px;
  margin-top: -2em;
}

#texteprev{
	font-size: 12px;
  line-height: 14px;
  margin-top: -2em;
}



/* Position the "next button" to the right 
right: 20%;
}

<section class="nextprevious">
	<div class="texteprev"> Conformism</div>
	<a href="conformism.html"><img class="prev" src="images/prev.jpg"></a>
	<div class="textenextun"> Rdv <br>au Martinez</div>
	<a href="rdvmartinez.html"><img class="next" src="images/next.jpg"></a>
</section>


.nextprevious {
  top: 18vw;
  position: absolute;
  font-weight: bold;
  font-size: .6vw;
  color: black; 
}

.prev  {
  cursor: pointer;
  opacity : 1;
  margin-left: -.2vw;
}

.next {
  cursor: pointer;
  margin-left: 11vw;
  opacity : 1;
}

.next:hover {
  opacity: 0;
}

.prev:hover {
  opacity: 0;
}

.texteprev{
    position:absolute;  
    margin-top:.2vw;
    margin-right:-7vw;
}

.textenextun{
  position:absolute;
  margin-left: 14vw;
  margin-top: .2vw;
  text-align: right;
}
.prev {
  left: 20%;
}*/