body {
  font-family: 'Arial', sans-serif;
  padding: 0;
  margin: 0;
  width: 100vw;
  overflow-x: hidden;
}

header{
	overflow-x:hidden ;
}

footer{
	overflow-x: hidden;
}

/* div id logo */
div#logo {
  position: sticky;
  float:left;
  display: flex;
  width: auto;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: #000000;
  font-size: 30px;
}

h2 {
  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-weight: 800;
  color: black;
  font-size: 22px;
}

p{
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  text-align: justify;
  color: #000000;
}

/*NAVBAR*/

#navbar {
  overflow: hidden;
  background-color: #f7f7f7;
  max-height: 120px;
  transition: 0.4s; /* Adds a transition effect when the padding is decreased */
  position: fixed!important; /* Sticky/fixed navbar */
  width: 100vw;
  top: 0; /* At the top */
  z-index: 99;
}

/* header */
header{
  width: 100vw;
  position: sticky;
  z-index: 100;
  background-color: #fff;
  top:0;
  min-height: 148px;
}


/* div id logo */
div#logo {
  position: sticky;
  float:left;
  display: flex;
  width: 50%;
  height: 12%;
  background: #f7f7f7;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

/* div class header */
div.logo {
  height: auto;
}

/* img class logo */
img.logo{
  max-height: 8em;
  display: flex;
  text-align:center;
}


/* div id header */
div#header {
  float:left;
  display: flex;
  justify-content: center;
  width: 50%;
  height: 8em;
  display: flex;
  background: #f7f7f7;
  align-items: center;

}

/* img class logo */
img.logo{
  height: 70%;
  display: flex;
  text-align:center;
}

/* nav ul */
nav ul {
  list-style: none;
  text-align: center;
}

/* ul */
ul{
  padding:0;
}

/* nav ul li */
nav ul li {
  display: inline-block;
}

/* nav ul li a */
nav ul li a {
  display: block;
  text-decoration: none;
  color: #000000;
  font-weight: bold;
  font-size: 20px;
  margin: 10px;
  font-family: Poppins;
}

nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .5s;
}
nav ul li a:hover {
  color: grey;
}

/* taille icone instagram */
nav ul li.menu a.js-scrollTo img#instagram {
  height: 28px;
}

/* stroke animation du menu */
nav.stroke ul li a,
nav.fill ul li a {
  position: relative;
}

nav.stroke ul li.menu a:after,
nav.fill ul li.menu a:after {
  position: absolute;
  bottom: -10%;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: grey;
  height: 2px;
}

nav.stroke ul li a:hover:after {
  width: 100%;
}

nav.fill ul li a {
  transition: all 2s;
}

/*FIN HEADER*/

/* BODY */

/*id oeuvre*/

	h1#oeuvre{
		text-decoration: underline #f7f7f7;
		margin-left:23vw;
		padding-top: 14vh;
	}





/* div id presentation */

div.presentation h1 {
  	width:70%;
    display: block;
    margin-left:165px;
    text-decoration: underline #f7f7f7;
}

div.presentation {
    width:70%;
    display: block;
    margin-top: 3%;
  }

/* div id presentation p */
div.presentation p {
    text-align: justify;
    
    margin-top: 50px!important;
    margin-left:165px;
    margin-right:165px;
  }

.memoire{
		margin-right: auto;
    margin-left: auto;
    display: block;
    background-color: white;
  	color: black;
  	border: 2px solid #555555;
    width: 140px;
    padding: 10px;
    font-family: 'Poppins';
    font-size: medium;
    border-radius: 10px;
    margin-bottom: 50px;
}

.memoire:hover{
		background-color: #555555;
    color: white;
    transition-duration: 0.4s;
  	cursor: pointer;
  	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

a.lienmemoire{
		width: 140px;
		margin-right: auto;
    margin-left: auto;
    display: block;
}
/*FIN Présentation*/

/* div id contact */
div.contact h1 {
  	width:70%;
    display: block;
    margin-left:364px;
    text-decoration: underline #f7f7f7;

}

div.contact {
    width:100vw;
    display: block;
    padding: 15px;
    margin-top: 3%;
    background-color:#f7f7f7;
    border-radius: 15px 15px 0 0;
  }

/* div id contact p */
div.contact p {
    text-align:center;
    display:  block;
    margin-top: 50px!important;
    margin-left:auto;
    margin-right:auto;
    font-size: x-large;
  }

/*FIN Contact*/

/*Grille Oeuvre collapse*/



/*Fin Grille Oeuvre collapse*/


/*FIN BODY*/

/*FOOTER*/
footer {
    display: flex;
    clear: initial;
    justify-content: center;
    background-color: #efefef;
    color: #000000;
    bottom:0;
    width:100vw;
    margin:0;
    padding:0;
    }

a {
  text-decoration: none;
  color: #000000;
}



/* Modal Mentions légales */
.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .8);
  transition: all .5s;
}

.modal:target {
  visibility: visible;
  opacity: 1;
  z-index: 2000;
}

.modal_content {
    border-radius: 4px;
    position: relative;
    z-index: 200;
    width: 509px;
    max-height: 100vh;
    max-width: 100vw;
    background: #f7f7f7;
    padding: 1.5em 2em;
}

.modal_close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: black;
  text-decoration: none;
  font-weight: bold;
  font-size: x-large;
}

/* Fin Modal Mentions légales */

/*FIN FOOTER*/


/* @media queries min-width: 642px - max-width: 1024 px*/
/*
@media only screen
  and (min-width: 642px)
  and (max-width: 1024px) {
    
h1{
  padding-top: 7%;
}

/*HEADER*/
/*

div#logo{
  float:left;
  display: flex;
  width: 50%;
  background: #f7f7f7;
  justify-content: center;
}

header{
  position: sticky;
  display: flex;
  justify-content: center;
  align-items: center;
}

div#header {
  float:left;
  display: flex;
  width: 50%;
  
  background: #f7f7f7;
  justify-content: space-around;
  align-items: center;
}

img.logo {
    width: 100%;
    display: flex;
    justify-content: center;
}

section#stroke {
  display: flex;
  width: auto;
  height: 12%;
  background: #f7f7f7;
  justify-content: space-around;
  align-items: center;
}

section {
  height: 10px;
}

nav.stroke ul li.menu a,
nav.fill ul li.menu a{
  display: inline-table;
  margin-left: auto;
  margin-right: auto;
  bottom: 20%;
  margin: auto;
  width: 0vw;
  content: '.';
  color: #000000;
  background: #f7f7f7;
}

nav {
  width: 100%;
  background: #f7f7f7;
  
}

li.menu {
  display: inline-table;
  width: 2vw;
  font-size:12px;
}

nav ul li.menu a {
  padding: 10px;
  text-decoration: none;
  color: #aaa;
  font-weight: 800;
  font-size:18px;

}

/*BODY*/
/*

h1#oeuvre{
		padding-top: 3%;
		padding-left: 7%;
	}


div.presentation {
    width: 50%;
    text-align: justify;

  }

div.presentation p {
    padding: 7%;
    margin: 30;

  }

div.presentation h1{
    padding-left: 7%;
    margin-left: 0;

  }


}*/

/* FIN @media queries min-width: 642px - max-width: 1024 px*/

/* @media queries min-width: 280px - max-width: 642px */
    @media screen and (min-width: 280px)
                  and (max-width: 642px) {

    /*HEADER*/
body{
	width:100vw;
}

header{
  position: sticky;
  display: inline-block;
  justify-content: center;
  align-items: center;
  width: 100vw;
}

#navbar{
	overflow: visible;
}

nav.stroke.responsive {position: relative;}
nav.stroke.responsive {
    position: relative;
    right: 0;
    top: 0;
  }

nav.stroke.responsive a {
    float: none;
    display: block;
    text-align: left;
  }


div#logo{
  float:none;
  display: flex;
  width: 100vw;
  height: 8em;
  background: #f7f7f7;
  justify-content: center;
}

div#header {
  float:none;
  display: flex;
  width: 100vw;
  height: 5%;
  background: #f7f7f7;
  justify-content: space-around;
  align-items: center;
}

img.logo {
  width: 100vw;
  height: 43%;
  display: flex;
  align-items: center;
}

section#stroke {
  display: flex;
  width: 100vw;
  height: 12%;
  background: #f7f7f7;
  justify-content: space-around;
  align-items: center;
}

section {
  height: 10px;
}

nav.stroke ul li.menu a,
nav.fill ul li.menu a{
  display: inline-table;
  margin-left: auto;
  margin-right: auto;
  bottom: 20%;
  margin: auto;
  width: 0vw;
  content: '.';
  color: #000000;
  background: #f7f7f7;
}

nav {
  width: 100vw;
  background: #f7f7f7;
}

li.menu {
  display: inline-table;
  width: 2vw;
  font-size:9px;
}

nav ul li.menu a {
  padding: 8px;
  text-decoration: none;
  color: #aaa;
  font-weight: 800;
  font-size:16px;
}

nav.stroke ul li.menu a:after,
nav.fill ul li.menu a:after {
  bottom: 10%;
  
}

/* taille icone instagram */
nav ul li.menu a.js-scrollTo img#instagram {
  height: 20px;
}

 /*HEADER*/

/*BODY*/

/*Div Oeuvre*/

h1#oeuvre{
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 25vw;
    text-align: center;
	}

	h1#presentation{
		margin: 0;
    margin-top: revert;
    
	}

/* Div id presentation */

h1#presentation{
		margin: 0;
    margin-top: revert;
    text-align: center!important;
    margin-left: auto!important;
    margin-right: auto!important;
	}

div.presentation {
    width: 100vw;
    text-align: justify;
    padding-top: 425vw;
    display: flow-root;
  }

div.presentation p {
    padding: 5%;
    margin: 0;
    margin-top: 7px!important;
    line-height: 1;
    font-size: 18px;
  }



  div.box-container three-cols{
  	padding-bottom:2vh ;
  }

h1#contact{
		margin: 0;
    margin-top: revert;
    text-align: center!important;
    margin-left: auto!important;
    margin-right: auto!important;
	}


div.contact {
    width:100vw;
    display: block;
    margin-top: 3%;
    padding-left: 0;
    padding-top:10px;
    background-color:#f7f7f7;
    border-radius: 15px 15px 0 0;
  }

div.contact p {
    text-align:center;
    display:  block;
    margin-top: 50px!important;
    margin-left:auto;
    margin-right:auto;
    font-size: large;
  }

#mentions p{
		font-size: 15px;
    line-height: 15px;
}

body{
	overflow-x:hidden;
}

header{
	overflow-x:hidden;
}

footer{
	overflow-x: hidden;
}


}

/* FIN @media queries min-width: 280px - max-width: 642 px*/