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

body{
	position: relative;
	background-repeat: no-repeat;
	background-attachment: fixed;
	animation: animate 16s ease-in-out infinite;
	overflow-x: hidden;
}

#conteneur {
	display: flex; /* or inline-flex */
	flex-direction: column;
	
}

header{
	position: fixed;
	width: 100%;
	height: auto;
	background-color: rgba(160, 214, 232, 0.9);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 80px;
	z-index: 999;
}

header .logo img{
	width: 200px;
	user-select: none;
}

header ul{
	padding-top: 10px;
	display: flex;
}

header ul li{
	list-style: none;
}

header ul li a{
	position: relative;
	text-decoration: none;
	padding: 25px;
	color: #000;
	transition: .2s;
}

header ul li a:hover{
	color: white;
}



@keyframes animate{
	0%, 100%{
		background-image: url(../img/BackgroundSliderImg/img1.jpg);
		background-size: cover;
	}
	20%, 40%{
		background-image: url(../img/BackgroundSliderImg/img2.jpg);
	}
	50%, 80%{
		background-image: url(../img/BackgroundSliderImg/img3.jpg);
	}
}

section#accueil{
	display: flex;
	height: 100vh;
	justify-content: center;
	flex-direction: column;
}

section#accueil h1{
	color: white;
	padding-left: 40px;
	font-size: 2.75em;
	padding-bottom: 20px;
	text-transform: uppercase;
	font-weight: bolder;
	letter-spacing: 3px;
}

section#accueil h1 span{
	font-size: 1.75em;
}

section#accueil h2{
	color: white;
	font-size: 1.25em;
	padding-left: 45px;
	padding-bottom: 20px;
	letter-spacing: 1.5px;
}

section#accueil .seemore-btn{
	padding-left: 45px;
	padding-top: 50px;
}

section#accueil .seemore-btn a{
	background-color: #7E4D9A;
	color: white;
	text-decoration: none;
	padding: 10px 15px 15px 15px;
	letter-spacing: 2px;
	transition: .2s;
}

section#accueil .seemore-btn a:hover{
	background-color: #523562;
}

.LRG-btn{
	position: fixed;
	right: -280px;
	bottom: 40px;
	transition: .3s;
	transition-delay: .2s;
}

.LRG-btn a{
	text-decoration: none;
	color: black;
	font-size: 1em;
	background: rgba(255, 255, 255, 0.23);
	padding: 15px 10px 20px 15px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.LRG-btn a:hover{
	color: black;
}

.LRG-btn:hover{
	right: 0px;
}

section#mission{
	background-color: #d7d7d7;
	width: 100%;
	height: auto;
	padding: 50px 0 50px 0;
}

section#mission .text{
	width: 100%;
	height: auto;
}

section#mission .text .title{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
}

section#mission .text .title h1{
	color: #4145ac;
	font-size: 2.75em;
	text-transform: uppercase;
	font-weight: bolder;
	font-family: 'Rubik';
	letter-spacing: 2px;
	padding-bottom: 50px;
}

section#mission .text .title h1 span{
	font-size: 1.5em;
}

section#mission .text .paragrapheMission{
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
}

section#mission .text .paragrapheMission p{
	max-width: 60%;
	font-size: 1.25em;
	font-family: 'Rubik';
}

section#presentation{
	width: 100%;
	height: auto;
	background-color: white;
	padding: 30px 0 30px 0;
}

section#presentation .content{
	width: 100%;
	display: flex;
	padding-top: 50px;
}

section#presentation .content .left{
	width: 50%;
}

section#presentation .content .left img{
	width: 100%;
	height: 100%;
	user-select: none;
}

section#presentation .content .right{
	width: 50%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-right: 50px;
}

section#presentation .content .right p{
	font-size: 1.5em;
}

section#presentation .content .right h1{
	font-size: 2em;
	padding-bottom: 50px;
}

section#presentation .content .right a{
	text-decoration: none;
	font-weight: bolder;

}

section#presentation .content-reversed{
	width: 100%;
	display: flex;
	padding-top: 50px;
}

section#presentation .content-reversed .left{
	width: 50%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: 50px;
}

section#presentation .left p{
	font-size: 1.5em;
}

section#presentation .left h1{
	font-size: 2em;
	padding-bottom: 50px;
}

section#presentation .content-reversed .right{
	width: 50%;
}

section#presentation .content-reversed .right img{
	width: 100%;
	height: 100%;
	user-select: none;
}

section#contact{
	width: 100%;
	height: 100%;
	animation: animate 16s ease-in-out infinite;
	padding: 50px 100px 50px 100px;
}

section#contact .contact-form{
	width: 100%;
	height: 100%;
	background-color: white;
	border-radius: 10px;
	padding: 55px;
}

section#contact .contact-form .contact-content{
	width: 100%;
	height: 100%;
	display: flex;
}

section#contact .contact-form .contact-content .left{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

section#contact .contact-form .contact-content .left img{
	width: 100%;
}

section#contact .contact-form .contact-content .right .title h1{
	font-size: 1.5em;
	font-weight: bolder;
	color: black;
}

section#contact .contact-form .contact-content .right{
	width: 100%;
	display: flex;
	flex-direction: column;
}

section#contact .contact-form .contact-content .right .title{
	width: 100%;
	display: flex;
	justify-content: center;
}

section#contact .contact-form .contact-content .right .inputs{
	display: flex;
	flex-direction: column;
	padding: 0 100px 0 100px;
}

section#contact .contact-form .contact-content .right input{
	margin-top: 20px;
	padding: 10px;
	border: none;
	background-color: #CECECE;
}

section#contact .contact-form .contact-content .right .inputs .envoyer{
	width: 100%;
	display: flex;
	justify-content: center;
}

section#contact .contact-form .contact-content .right .inputs .envoyer input{
	padding: 10px 30px 10px 30px;
}

section#contact .contact-form .contact-content .right .inputs .envoyer input:hover{
	background-color: grey;
}

section#contact .contact-form .contact-content .right textarea{
	margin-top: 20px;
	resize: none;
	width: 100%;
	height: 300px;
	padding: 10px;
	border: none;
	background-color: #CECECE;
}