body{
    padding: 0;
    margin: 0;
}
.container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}
.colonne1{
    width: 20%;
    min-height: 50vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.colonne1 p a{
    text-decoration: none;
    color: black;
    cursor: pointer;
}
.colonne1 p a:hover{font-weight: bold;}
.logo{
    width: 100%;
    min-height: 15vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
nav{
    width: 100%;
    min-height: 45vh;
}
nav ul {
    list-style: none;
}
nav ul li{
    width: 100%;
    min-height: 7vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}
nav ul li a{
    color: black;
    text-decoration: none;
    font-family: 'Cambay', Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
}
nav ul li a:hover{color: #da4fb7;}
.rs{
    width: 100%;
    min-height: 15vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.l1 {width: 15%;} 


.colonne2{
    width: 70%;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
header{
    background-color: #bc93f3;
    min-height: 30vh;
    width: 100%;
}
main{
    width: 100%;
    min-height: 80vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
h1{font-family: 'Mitr', Verdana, Arial, Helvetica, sans-serif;}
.presentation{
    width: 100%;
    min-height: 10vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 5vh;
}
.p_texte{
    width: 65%;
    min-height: 10vh;
    text-align: justify;
    margin-right: 2vh;
    text-indent: 2vh;
}
.p_img{
    width: 30%;
    min-height: 10vh;
}
footer{
    width: 100%;
    background-color:#a6a5a5;
    min-height: 10vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.apercu{
    min-height: 25vh;
    width: 95%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-bottom: 4vh;
    border: 1px solid #bc93f3;
    border-radius:0.5vh;
}
.apercu h1 a{
    color:#7265ce;
    margin-top : 0;
    margin-left: -5vh;
    text-decoration: none;
}
.apercu h1 a:hover{color: black;}
.titre_comp{
    width: 100%;
}
.logo_comp{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 90%;
    min-height: 5vh;
}
.boite_comp{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 95%;
}
.comp{
    width:30% ;
    min-height: 2vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
   
}
.comp ul{font-family: 'Cambay', Verdana, Arial, Helvetica, sans-serif;}
.comp h2{color:#7265ce;}
.slider{
    width: 95%;
    min-height:20vh;
    margin-bottom: 2vh;
    margin-left:2vh;
}
.block1{
    width: 30%;
    min-height: 10vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: space-around;
    margin-top: 2vh; 
}
.block1 a {margin-left: 1vh;}
.block2{
    width: 30%;
    min-height: 10vh;
}
.block2 ul{list-style: none;}
.block2 ul li a{
    color: black;
    text-decoration: none;
    font-family: 'Cambay', Verdana, Arial, Helvetica, sans-serif;
}
.block2 ul li a:hover{
    color:#da4fb7;
    font-weight: bold;
}
.block2 ul li {font-family: 'Cambay', Verdana, Arial, Helvetica, sans-serif;}
.gras{font-weight: bold;}
/*************************************slider */
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: grey;
  font-size: 15px;
  position: absolute;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: grey;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* 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: 500px) {
  .text {display: none;}
}
/*  *************************************************************************** responsive design */
@media screen and (max-width: 1100px){
.container{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.colonne1{
    width: 90%;
    min-height: 10vh;
    display: flex;
    flex-wrap: wrap;
}
.logo{
    width: 20%;
    height: 5vh;
}
.colonne1 nav ul li{
    width: 70%;
    min-height: 10vh;
    display: flex;
    flex-wrap: wrap;
}
.rs{
    width: 10%;
    min-height: 10vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.colonne2{
    width: 90%;
    min-height: 100vh;
}

}/*************fin 1110px **************/
@media screen and (max-width: 800px){    /********** 800px *************/
.logo{width: 100%;}
header h1{display: none;}
.colonne1 p{display: none;}
nav{
    width: 100%;
    min-height: 7vh;
}
.rs{display: none;}
.apercu_comp{
    width: 100%;
    min-height: 50vh;
    flex-direction: column;
}
.apercu h2{font-size: 4.5vw;}
.apercu a{font-size: 3vh;}
.logo_comp{
    width: 20%;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.comp{
    width: 100%;
    flex-direction: row;
}
.presentation{
    flex-direction: column-reverse;
}
.p_texte{
    width: 85%;
    margin-left: 2vh;
    margin-right: 4vh;
}
.p_titre{
    width: 90%;
    font-size: 3vw;
}
.sous-out{margin-bottom: 4vh;}
} /********fin 800px ************/