*{
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
}

html{


}	


body{
	font-family: sans-serif;
	font-size: 1rem;
	background-color: #FFFFFF;

}

gros {
	font-size: 1.9rem;
	color: red;

}

form { 
width: 80%;

}
header{
	height: 100vh;
	display: fixed;
/*	width: 100vw;
	background-image: url(images/fond1.webp);

	background-size: cover;	*/

}



/* Slideshow container */
.slideshow-container {
   max-height :27%;
   top: 20%;
  width : auto;
  left: 30 px;
  position: absolute;
 margin-left: 10px;
 
}

.slideshow-container .img-rounded{
	max-width: 400px;
	 height : auto;
	
}

.slideshow-container2 {
   max-height :27%;
   top: 20%;
  width : auto;
  right: 90px;
  position: absolute;
   margin-right: 10px;

}

.slideshow-container2 .img-rounded{
	max-width: 400px;
	 height : auto;
}



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



.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
opacity: 0;
  animation: fade-in 3s ease-in forwards, fade-out 3s 6s ease-out forwards;
}

@keyframes fade-in {
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}



.barre_recherche {
	z-index: 0;
		position: absolute;
width: 35%;
left: 64%;
margin-right: 5px;
	top: 42%;
	color: white;
	  font-size: 4rem;
	  
}

 input[type=text] {
	 
	 border-radius: 5px 0 0 5px;*/ 
 }


      .search {
        width: 100%;
		
  font-size: 70%;
        position: relative;
        display: flex;
      }
      .searchTerm {
        width: 100%;
        border: 3px solid #9e0098;
        border-right: none;
        padding: 5px;
        height: 50px;
       border-radius: 5px 0 0 5px;*/
        outline: none;
		color: #380136;
      }
      .searchTerm:focus {
        
      }
      .searchButton {
        width: 50px;
        height: 50px;
        border: 1px solid #9e0098;
        background: #9e0098;
        text-align: center;
        color: #eeeeee;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
        font-size: 20px;
      }
      .wrap {
        width: 30%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
.fond1{
	z-index: -4;
		position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-image: url(images/fond1.webp);
	
	background-size: cover;	
}
.fond1 img{
	width: 100%;
}

.couleur{
	position: absolute;
	top: 70px;
	width: 150px;
	 font-size: 3rem;
}


.cc {
	
	z-index: 10;
		position: absolute;
	top: 29%;
	left: 20px;
	width: 58%;
	padding-left: 150 px;
z-index: 0;

	/*margin: auto;*/

}

.texte_accueil {
	z-index: 5;
	position: relative;

top: 104%;		


width: 98%;
background-color: hsl(200, 88%, 65%);
 margin-left: 1%;	
 margin-top: 10px;
 margin-right: auto;
 margin-bottom: 10px;

 padding-left: 80px;
 padding-right: 60px;
 padding-top: 50px;
 padding-bottom: 100px;
 border-radius: 150px 5px 150px 5px;

 
 
}

.footer{
	z-index: 4;
		position: absolute;
width: 100%;
 top: 180%;
}
.photos_accueil {
	z-index: 6;
		
		
top: 140px;
left: 9%;

}

.photos_accueil2 {
	z-index: 7;
		
top: 140px;
left: 70%;

}

.textecci{
	width: 60%;
	
}



.navbar{
	position: absolute;
	z-index: 1050;
	/*padding: 10px;*/
	display: flex;
	background: hsl(205, 53%, 50%);
	justify-content: space-between;
	align-items: center;
	/*width: 100%;*/
	box-sizing: border-box;
	width: 100%;
}
	
.navbar a {
	color: white;
	
}

.navbar .logo{
	position: absolute;
	top: 4px;
	left: 6px;
	
}

.navbar .nav-links ul{
	display: flex;
	
}
.navbar .nav-links ul li{
	margin: 0 10px;
}
.navbar .menu-hamburger {
	display: none;
	position: absolute;
	top: 10px;
	right: 20px;
	z-index: 10;
	width: 40px;
}
.mobile-menu{
	
	margin-left: 0;
}



.parent {
    position: relative;
    width: 100%;

	    display: flex;
    justify-content: center;
    
  
}
.child1 {
    position: absolute;
   

    top: 70px;
 margin-left: 25%;	
 margin-right: 1%;
}

.page_recherche {
    position: relative;
   

    top: 100px;
 margin-left: 5%;	
 margin-right: 5%;
width: 90%; 
}
 
 .appli {
	z-index: 0;
		position: absolute;
width: 400px;
left: 66%;
	top: 63%;
}
 
.appli img {

    width: 100%;

}


 


@media only screen and (max-width: 1279px){ 
 .cc {

width: 70%;	 
 }
  
 
.barre_recherche {
left: 58%;
width: 50%;

margin-right: auto;
margin-left: auto;



} 

.appli {

		position: absolute;
width: 400px;
left: 58%;

	

}
 
.navbar{
		z-index: 2000;
		/*padding: 0;*/
		background: none;
		
	}
	
	.navbar .logo{
		
	}
	.navbar .menu-hamburger {
		z-index: 10;
	display: block;
	}
	.nav-links {
		top: 0;
		left: 15px;
		
		position: absolute;
		/*background-color: rgba(255, 255, 255, 0.20);
		backdrop-filter: blur(8px);*/
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: left;
		align-items: center;
		margin-left: -100%;
		transition: all 0.5s ease;
	}
	
	.mobile-menu{
	margin-left: 0;
}
	.nav-links ul{
	display: flex;
	flex-direction: column;	
	/*align-items: center;*/
	}
	.navbar .nav-links ul li{
	margin: 0.5px 0;
	font-size: 1em;
	
}
 .slideshow-container .img-rounded{
	max-width: 250px;
	max-height : 200px;
	
}

 .slideshow-container2 .img-rounded{
	max-width: 250px;
	max-height : 200px;
}
 
}
 

@media only screen and (max-width: 800px){
	header{
	height: 40vh;
	/*width: 100vw;*/
	}

form { 
width: 100%;

}
	
.cc {
				position: absolute;
		z-index: 0;
		width: 95%;
		left: 2%;
		top: 60%;
	}


.barre_recherche {

width: 80%;

left: 9%;
	top: 20%;
font-size: 2.5rem;
}	


.couleur {
	top: 90%;
	width: 150px;
	 font-size: 1.5rem;
}


.textecci{
	
	width: 100%;
}
.child1 {
  
    width: 95%;

    top: 70px;
 margin-left: 2%;	
 
}



.texte_accueil {
	position: absolute;

top: 110%;	

}


.photos_accueil {
	/*display: none;*/

top: 21%;
left: 20%;

}

.photos_accueil2 {
	display: none;
	z-index: 6;
		position: absolute;
top: 100%;
left: 30%;
}

.appli {

		position: absolute;
width: 80%;
left: 9%;
	top: 40%;
	

}

.slideshow-container {
	top: 19%;


}


	
}

@media only screen and (max-height: 600px){
	 .cc {
    top: 50%;
    width: 50%;
  }

	
}

@media only screen and (max-height: 450px){

form {
width: 100%
}

.textecci{
	
	width: 80%;
}

.child1 {
  
    width: 70%;

    top: 10px;
 margin-left: 30%;	
 
}

.barre_recherche {

width: 40%;

left: 55%;
	top: 150px;
font-size: 2.2rem;
}	

.appli {

width: 300px;
left: 55%;
	top: 80%;
	

}



 .cc {
    top: 45%;
    width: 50%;
  }
.texte_accueil {
	top: 120%;
}
 
 
}




@media only screen and (max-height: 70px) and (max-width: 800px){
.slideshow-container {
	top: 20%;
}	




	
}