/*reset css*/
*, ::before, ::after{
	margin:0;
	padding: 0;
	box-sizing :border-box; 

}

html, body{
	    max-width: 100%;
    overflow-x: hidden;

}

/*Typographie*/

@font-face{
	font-family:"typojust01";
	src:url(src/JUST-Sans-ExBold.woff);}

@font-face{	
	font-family:"typojust02";
	src:url(src/JUST-Sans-Regular.woff);}

/*Générique*/

/*MENU*/

header{
	width:100%;
	min-height:80px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:0%;
	margin-top: 2%;
}

header a{
	width: 13%;
}

.logo{
	width:100%;

}
.splashfestival{
	width:100%;
	transition: 0.5s;
}
.splashprogrammation{
	width:100%;
	transition: 0.5s;
}
.splashchasseauxane{
	width:100%;
	transition: 0.5s;
}
.splashbénévole{
	width:100%;
	transition: 0.5s;
}
.splashinfos{
	width:100%;
	transition: 0.5s;
}
.splashbilleterie{
	width:100%;
	transition: 0.5s;
}


.splashfestival:hover{
	-ms-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	transform: scale(1.5);}

.splashprogrammation:hover{
	-ms-transform: scale(1.5);
	-webkit-transform: scale(1.5); 
	transform: scale(1.5);}

.splashchasseauxane:hover{
	-ms-transform: scale(1.5);
	-webkit-transform: scale(1.5); 
	transform: scale(1.5);}

.splashbénévole:hover{
	-ms-transform: scale(1.5);
	-webkit-transform: scale(1.5); 
	transform: scale(1.5);}

.splashbilleterie:hover{
	-ms-transform: scale(1.5);
	-webkit-transform: scale(1.5); 
	transform: scale(1.5);}	

.splashinfos:hover{
	-ms-transform: scale(1.5);
	-webkit-transform: scale(1.5); 
	transform: scale(1.5);}

body{
	background-color: rgb(255, 255, 255);
	background-size: cover;
	background-attachment: fixed;

}

/*Corps de la page*/

/******************************section 1*********************/
#section1{
	width: 100vw;
	min-height: 80px;
	display: flex;
	align-items: space-around;
	justify-content: center;
	padding-bottom: 20px;

	background-image: url(src/fond_texture_vert_ane.png);
	background-size: 100%;
	background-repeat:no-repeat;
	position: relative;
}

.anecouv{
	width: 33%;
	animation: slidedroite 1.5s ease 0s normal forwards;
}
.bulleetsplash{
	width:36%;
	display:flex;
	justify-content: center;
	align-items: flex-end;
	flex-direction: column;
}

.logocouv{
	width: 100%;
 
}
.texteelectrocouv{
	width: 18%;
    position: absolute;
    bottom: 0;
	animation: boomboom 2s linear 0s infinite normal forwards;
}

.datecouv{
	width:26%;
	animation: slidegauche 1.5s ease 0s normal forwards;
}

.
/******************************section 2**************************/
#section2 {
	width:100vw;
	min-height:80px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	

	background-image: url(src/NEW_splash01.png);
	background-size: 100%;
	background-repeat:no-repeat;
}

.textesection02{
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.titrefestival{
	width: 40%;
	margin-top:20px;
	margin-bottom:10px;
}

.textefestival{
	color:rgba(0, 0, 0, 1);
	font-family:"typojust01";
	font-size:1rem;
	text-align:center;
}
.illuactivités{
	display:flex;
	justify-content: space-around;
}	

.cerfvolantgif{
		width: 20%;
		margin-left:6px;
}

.graffitigif, .tattoogif, .peinturegif{
	width: 20%;
}


/*********************************section 3***************************/

#section3{
	width:100vw;
	display: flex;
	justify-content: center;
	align-items: center ;
	flex-direction: column;

	
	background-image: url(src/fond_texture_rose_ane.png);
	background-size: 100%;
	background-repeat:no-repeat;
	
}

.titreprogrammation{
	width: 60%;
	align-items: center;
	margin-top: 3%;
}

.imageettexte03{
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: -40px;
}

.progtexte{
	width: 65%;
	margin-left:-4px;
	margin-bottom: 27px;
	}

.anebleu{
	width: 28%;
    margin-bottom: 13px;
    right:0;


    background-image: url(src/splash_jaune.png);
    background-size: 100%;
    background-repeat:no-repeat
	
}


/*****************************section 4**************************/
	
#section4{
	width:100%;
	min-height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.titrechasse{
	width: 50%;
	align-items: center;
}

.compopage04{
	display:flex;
	justify-content: center;
	align-items: center;
	min-height: 80%;
}
.mock-chasse{
	width: 60%;
	padding: 20px;
}



/********partie texte et carte********/

.texteetcarte{
	width: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-top: 179px;
	margin-right: 20px;
}

.texte04{
	display:flex;
	flex-direction: column;
	align-items: center;
}

.soustitrecollectez{
	width:60%;
	z-index:2;
} 

.textechasse{
	color: rgba(0, 0, 0, 1);
    font-family: "typojust01";
    font-size: 1rem;
    text-align: center;
    z-index:2;
    margin-top: 20px;

  }
  .carte{
	width:70%;
	z-index:2;
} 

 .splashrose{
    margin-top: -300px;
    transition: 0.5s;
    animation: show 3s ease 4s infinite normal forwards;

 } 

/*********************************section 5***************************/


#section5{
	width:100%;
	height: auto;
	text-align: center;
	margin-bottom: 90px;

	background-image: url(src/fond_texture_jaune_ane.png);
	background-size: 100%;
	background-repeat:no-repeat;
	background-position: center;
}

.titrebénévoles{
	width: 50%;
	margin-top: 41px;
}

.compopage05{
	width: 100%;
 
    display: flex;
    justify-content: center;
    align-items: space-between;
    margin: -66px 9px
  
}

.aneetbulle{

	display:flex;
	align-items: center;
	width:40%;
	margin-left: 20px;

}

.ane{
	width:100%;
	display:flex;
	justify-content: flex-start;
}

.bullerejoigneznous{
	width: 200px;
    height: 170px;
    margin-top: 135px;
	z-index: 2;
    animation: boomboom 2s linear 0s infinite normal forwards;
}

.teteane05{
	width: 100%;
	z-index: 2;
}

.splashvert{
	width: 627px;
    margin-top: 230px;
    margin-left: -262px;
}

.imageetformulaire{
	width: 60%;
    display: flex;
   justify-content:center;
    align-items: center;
    flex-direction: column;
    padding: 139px;

    background-image: url(src/bulle_formulaire.png);
    background-size: 90%;
    background-position: center;

    background-repeat: no-repeat;
}

h1 {
	 font-family: "typojust01";
	 font-size: 40px;
	 text-align: center;
	 margin-bottom: 10px;
}

.formulaire {
  display: flex;
  box-sizing: border-box;
  max-height: 60px;
  font-size: 1rem;
  display: table;
  margin-left: 28px;

  font-family: "typojust01";
  color: rgba(0, 0, 0, 1);;
  text-align: left;
}

label,
input {
    display: table;
    margin-bottom: 10px;
    border-top:none;
}

input{
	width: 250px;
	border:1px solid black ;
}

#message{
	height: 100px;
	width: 548px;
}

.colonne{
	column-count: 2;
	column-gap: 0;
	column-width: auto;
}

label{
	padding-right: 10px;
}


.envoyer{
	width:30%;
	border:none;
	transition: 0.5s;
}

.envoyer:hover{
	-ms-transform: scale(1.2);
	-webkit-transform: scale(1.2); 
	transform: scale(1.2);
}
	



/*********************************section 6***************************/

#section6{
	width:100%;
	height: auto;
	text-align: center;
	justify-content: center;
}
.titrebilletterie{
	width:40%;
	text-align: center;
}

.compopage06{
	display:flex;
    justify-content: space-around;
    align-items: center;

}

.ane-billet{
	width:25%;
}

.compo-billetgratuit{
display: flex;
    flex-direction: column;
    align-items: center;
}

.billets-grp{
	display:flex;
	width:100%;
	align-items: flex-end;
	justify-content: space-around;
}

.billet{
	display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: rgb(66, 254, 162);
    border:4px solid black;
    padding: 37px 10px;
    margin-right: 30px;
    transition: 0.5s;
}

.billet:hover{
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1); 
	transform: scale(1.1);}

.tete{
	width:200px
}

h2, h3, h4, h5{
  font-family: "typojust01";
  font-size: 1.2rem;
  color: rgb(255, 91, 226);
  text-align: center;
  margin-top: 45px;
}


.textetete{
  font-family: "typojust01";
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 1);
  text-align: center;
  margin-top: 10px;
}

.gratuit{
font-family: "typojust01";
font-size: 2rem;
color: rgb(255, 91, 226);
text-align: center;
margin-top: 60px;
transition: 0.5s;
animation: show 3s ease 4s infinite normal forwards;

}


/*********************************section 7***************************/

#section7{
	width:100vw;
	display:flex;
	align-item:center;
	justify-content: center;
	flex-direction: column;
	align-items: center;

	background-image: url(src/fond_texture_vert_ane02.png);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.titreinfos{
	width: 50%;
	margin-top: 20px;
}

.compopage07{
	width: 100%;
	display:flex;
	align-items: flex-start;
	height: 610px;

}

#éléments-infos{
	width:40%;
	display:flex;
	justify-content: center;
	flex-direction: column;
	align-items: flex-start;
	margin-left: 121px;
}

.infos{
font-family: "typojust01";
font-size: 2rem;
color: rgba(0, 0, 0, 1);;
text-align: left;

}

.icon-et-texte{
	display: flex;
	align-items: center;
}

.lieu{
	display: flex;
    flex-direction: column;
    margin-top: 10px
}

.date{
	display: flex;
    flex-direction: column;
    margin-top: 10px
}
.horaire{
	display: flex;
    flex-direction: column;
    margin-top: 10px
}

.icon{
	margin-right: 10px;
}

.textesinfos{
	font-family: "typojust02";
font-size: 1rem;
color: rgba(0, 0, 0, 1);;

}

/*contacts*/
#contacts{
	width: 40%;
    display: flex;
    align-items: flex-start;
    margin-left: 56px;
}

#éléments-contacts{
	width:30%;
	display:flex;
	justify-content: center;
	flex-direction: column;
	align-items: flex-start;
}
.textes-contacts{
font-family: "typojust02";
font-size: 1rem;
color: rgba(0, 0, 0, 1);;
text-align: left;

}

.icon-contacts{
	display: flex;
    align-items: center;
}

.mail{
	display: flex;
    flex-direction: column;
    margin-top: 10px
}

.insta{
	display: flex;
    flex-direction: column;
    margin-top: 10px
}
.facebook{
	display: flex;
    flex-direction: column;
    margin-top: 10px
}

.icon03{
	width: 70px;
	margin-right: 10px;
}

.icon02{
	width: 70px;
	margin-right: 10px;
	transition: 0.5s;
}

.icon02:hover{
	-ms-transform: scale(1.2);
	-webkit-transform: scale(1.2); 
	transform: scale(1.2);}

.anerose{
	width: 300px;
    margin-right: 125px;
}

footer{
	height: 50px
}


/*********************************ANIMATIONS***************************/

@keyframes boomboom {
	0%,
	100% {
		transform: translateX(0%);
		transform-origin: 50% 50%;
	}

	15% {
		transform: translateX(-30px) rotate(-6deg);
	}

	30% {
		transform: translateX(15px) rotate(6deg);
	}

	45% {
		transform: translateX(-15px) rotate(-3.6deg);
	}

	60% {
		transform: translateX(9px) rotate(2.4deg);
	}

	75% {
		transform: translateX(-6px) rotate(-1.2deg);
	}
}

@keyframes slidedroite {
	0% {
		opacity: 0;
		transform: translateX(-250px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slidegauche {
	0% {
		opacity: 0;
		transform: translateX(250px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}


}

@keyframes rotationsplashrose {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes show {
	0% {
		transform: scale(0.5);
	}

	100% {
		transform: scale(1);
	}
}