body {
     font-family: 'Mulish', sans-serif;
     font-family: 'Prompt', sans-serif;
     background-color: black;
     text-align: center;
     color: white;


 }



 .grid_12 {
     padding-left: 0px;
     padding-right: 0px;
     /*border: 1px solid blue;*/
     background-color: black;
     width: 500px;
     margin-bottom: 10px;
     margin-top: 10px;

 }



 .grid_2 {
     background-color: white;
 }

 /*footer decoration bar*/
 .grid_3 {
     height: 50px;
     border-bottom: 3px solid #fffc99;
     opacity: 0.6;
     margin-top: 0px;
 }

 .grid_5 {
     /*border: 1px solid orange;*/
 }

 /*citation pour la page de presentation*/
 .grid_7 {
     margin-bottom: 60px;
     background-color: #fffc99;
     height: inherit;
     padding: 10px;
 }

 /*grid pour les textes*/
 .grid_10 {
     padding-right: 50px;
     /*border: 1px solid aqua;*/
 }



 h1 {
     font-family: 'Prompt', sans-serif;
     font-size: 80px;
     color: #fffc99;
     opacity: 0.8;
     text-align: center;
     letter-spacing: 3px;
     margin-top: -30px;
     margin-bottom: 80px;
 }



 p.citation {
     font-family: 'Prompt', sans-serif;
     font-style: oblique;
     opacity: 0.8;
     /*border: 1px orange solid;*/
     font-size: 24px;
     font-weight: 600;
     padding: 10px 30px 10px 30px;
     text-align: left;
     color: black;
 }


 p.legende {
     font-family: 'Prompt', sans-serif;
     font-size: 13px;
     font-weight: 700;
     opacity: 0.5;
     text-align: right;
     /*border: 1px solid blue;*/
     width: 350px;
     margin-left: 380px;
     color: black;
 }

 p.contenu {
     font-family: 'Prompt', sans-serif;
     font-size: 23px;
     padding: 60px;
     text-align: left;
     line-height: 30px;
     word-spacing: 0.3px;
 }

 p.important {
     font-family: 'Prompt', sans-serif;
     font-weight: 600;
     font-size: 27px;
     padding-left: 150px;
     padding-right: 150px;
     /*border: 1px solid red;*/
     color: #fffc99;
     text-align: left;
 }

 p.footer {
     font-size: 15px;
     color: white;
     font-family: 'Prompt', sans-serif;
     letter-spacing: 0.7px;
     margin-top: -5px;
     display: inline;
     margin-left: 12px;
     margin-right: 20px;
     /*border: 1px solid green;*/
 }

 .three {
     /*border: 1px solid green;*/
     display: block;
     width: 329px;
 }

 #footer {
     margin-top: 30px;
     text-align: center;
 }

 .titre {
     height: 180px;
 }

 .titre:hover {
     filter: invert(100%);
 }



 img {
     border-left: 7x solid black;
     border-right: 7px solid black;
     width: 130px;
     background-color: black;
     margin-bottom: -7px;
     margin-top: -1px;
     margin-left: -3px;
 }




 /*rectangle outside for decoration*/
 .one {
     height: 3px;
     width: 100%;
     background-color: black;


 }

 /*rectangle inside for decoration*/
 .two {
     height: inherit;
     width: 135px;
     background-color: #fffc99;
     opacity: 0.4;
     margin-left: 35px;
 }

 /*rectangle for p navbar*/
 .rectangle {
     height: 300px;
     width: 130px;
     border-left: 7px solid black;
     border-right: 7px solid black;
     background-color: black;
     margin-left: 50px;
 }



 /*p navbar--pour utiliser l'effect hover simulanement faut lui mettre en forme de div*/
 .nav_bar {
     font-family: 'Prompt', sans-serif;
     font-weight: 600;
     font-size: 21px;
     color: white;
     height: 290px;
     padding-top: 10px;
     line-height: 23.5px;
     /*border: 1px solid orange;*/
 }

 /*p navbar--pour le site activee*/
 .nav_bar_actif {
     background-color: white;
     font-family: 'Prompt', sans-serif;
     font-weight: 600;
     font-size: 21px;
     color: black;
     height: 290px;
     padding-top: 10px;
     line-height: 23.5px;

 }

 .rectangle:hover .nav_bar {
     background-color: white;
     color: black;
 }


 /*side nav bar*/
 .sidenav {
     width: 130px;
     height: inherit;
     position: fixed;
     z-index: 1;
     top: 303px;
     left: 1712px;
     background: white;
     overflow-x: hidden;
     transition: 0.5s;
 }

 .sidenav a {
     padding: 19px 0px 18.5px 4px;

     text-decoration: none;
     font-size: 18px;
     color: black;
     display: block;
     transition: top 0.3s;
 }

 .sidenav .closebtn {
     position: absolute;
     top: -27px;
     right: 0px;
     bottom: 275px;
     font-size: 30px;
     color: black;
 }

 .sidenav a:hover {
     background-color: black;
     color: #fffc99;
 }


 /*image slideshow*/
 /*image slideshow*/
 /*image slideshow*/
 .slideshow-container {
     max-width: 1000px;
     position: relative;
     margin-left: 30px;
     /*border:1px solid orange;*/
     height: 600px;
 }

 /* Next & previous buttons */
 .prev,
 .next {
     cursor: pointer;
     position: absolute;
     top: 50%;
     width: auto;
     padding: 50px;
     margin-top: -70px;
     color: #fffc99;
     font-weight: bold;
     font-size: 30px;
     transition: 0.6s ease;
     border-radius: 0 3px 3px 0;
     user-select: none;
     margin-left: -650px;
     margin-right: -180px;
     /*border: 1px solid red;*/
 }

 /* Position the "next button" to the right */
 .next {
     right: 0;
     border-radius: 3px 0 0 3px;
 }

 /* On hover, add a black background color with a little bit see-through */
 .prev:hover,
 .next:hover {
     background-color: rgba(0, 0, 0, 0.8);
 }



 /* The dots/bullets/indicators */
 .dot {
     cursor: pointer;
     height: 10px;
     width: 10px;
     margin: 10px;
     background-color: #bbb;
     display: inline-block;
     transition: background-color 0.6s ease;
 }

 .active,
 .dot:hover {
     background-color: #fffc99;
 }

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


 @-webkit-keyframes fade {
     from {
         opacity: .4
     }

     to {
         opacity: 1
     }
 }

 @keyframes fade {
     from {
         opacity: .4
     }

     to {
         opacity: 1
     }
 }

 /* On smaller screens, decrease text size */
 @media only screen and (max-width: 300px) {

     .prev,
     .next,
     .text {
         font-size: 11px
     }
 }


 .container_12 {
     /*border: 1px red solid;*/
     margin-top: 70px;


 }