@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat&display=swap');


*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	scrollbar-width: thin;
  scrollbar-color: #292b2d #1a1d1f;
}
html{
	width: 100%;
	font-size: 62%;
	min-height: 100%;
	background-color: #292b2d;

	/*background-color: #4F5A5E;*/
}
body{
	width: 100%;
	overflow-x: hidden;
}



#scrollUp
{
position: fixed;
bottom : 10px;
left: 10px;
opacity: 0.5;
}


/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background:#1a1d1f;
}

*::-webkit-scrollbar-thumb {
  background-color: #292b2d;
  border-radius: 20px;
  border: 3px solid #1a1d1f;
}




 [data-scrollanim~="lefttoright"] {
            transform: translateX(-200vw);
        }
 [data-scrollanim~="opacity"] {
            opacity: 0;
        }

 .animation {
            /*            Gestion de la durée des animations 3s = 3 secondes*/
            transition: all 5s;
        }
[data-scrollanim~="righttoleft"] {
            transform: translateX(200vw);
        }

.closeButton{
	transition: 0.5s;
}
.closeButton:hover{
	transform: rotate(180deg) scale(2);
	color: skyblue;
}





/*____________________________________HEADER___________________________________*/


@keyframes header-anim{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}



.header{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #1a1d1f;
	padding: 2rem;
	transition: all 0.7s ease 0s;
	position: fixed;
	z-index: 4;
	opacity: 0.9;

    animation-fill-mode: forwards;
}
.header:hover{
	color:  #5DC1ED;
}
.anchor{ 
  display: block;
  height: 4vh; /*same height as header*/
  margin-top: -4vh; /*same height as header*/
  visibility: hidden;
}

.socialMedia{
	display: flex;
	align-items: center;
	margin-top: 0%;
	margin-right: 5%;
	margin-left: 3rem;
}
.facebook, .instagram{
	height: 5vh;
	margin: 1vh;
	border-radius: 5rem;
	transition: all 0.5s ease 0s;
}
.facebook:hover{
	background-color: #5179A8;
}
.instagram:hover{
	background-color: #A87D51;
}






/*___________________________MENU BURGER________________________________________*/



label 
{
	display: none;
	justify-content: flex-end;
	min-width: 100%;
	margin: 0 ;
	font-size: 40px;
	color: white;
	cursor: pointer;
}
#toggle
{
	position: absolute;
	left: -9999px;
}
nav{    
	z-index: 3;

}

nav li {
	display: inline-block;
	align-self: center;
	padding: 0px 5vh;
    
}

nav .menu{
	text-decoration: none;
	font-size: 3vh;
	font-family: 'Bebas Neue', sans-serif;
	color: #fff;
	transition: all 0.5s ease 0s;
	width: 10%;

}

.illu:hover{
	color: skyblue;
	font-size: 2.1rem;
}
.com:hover{
	color: skyblue;
	font-size: 2.1rem;
}
.art:hover{
	color: skyblue;
	font-size: 2.1rem;
}


nav .main_pages {
	display: flex;
	background: #1a1d1f;
    border-radius: 3vh;
    height: 10vh;
    margin-right: 50px;


}

nav .main_pages a {
        width: 0.5vh;

    }


#toggle:checked + .main_pages {
        display: flex;
        animation-name: animpopup;
        animation-duration: 0.3s;
        animation-fill-mode: forwards;

    }
    @keyframes animpopup{
    	from{

    width: 0vh;
    height: 0vh;
    	}
    	to{

    width: 40vh;
    height: 70vh;
    	}
    }



button{
	padding: 2rem;
	background-color: rgba(0, 136, 169, 1);
	border: none;
	border-radius: 2rem;
	cursor: pointer;
	transition: all 0.7s ease 0s;
	text-decoration: none;
	font-family: 'Monserrat', sans-serif;
	color: whitesmoke;
	font-size: 1.5rem;
	
}
/*___________________________FIN MENU BURGER________________*/


button a{
	text-decoration: none;
	color: #fff;
}
.header button:hover{
	background-color:rgba(0, 136, 169, 0.6);
}
.logo{
	display: inline-block;
	padding: 0;
	margin: 0;
}
.logoHayah_visuel-header{
	height: 10vh;
	padding: 0.2rem;
}
.logoHayah_texte-header{
	height: 7vh;
}








/*____________________________________________CARTES___________________________________*/


section{
	width: 100%;
	min-height: 10vh;
	display: flex;
	justify-content: center;
	padding-top: 13rem;
	position: relative;
	
}
.container{
	width: 100%;


}


@keyframes slidein{
	0%{
		
		transform: translateX(-200rem);
	}
	60%{
		transform: translateX(5rem);
	}
	80%{
		transform: translateX(-2rem);
	}
	95%{
		transform: translateX(1rem);
	}
	100%{
		
		transform: translateX(0rem);
	}
}

@keyframes opacity{
	from{
		opacity: 0;
	}
	to{
		opacity: 0.5;
	}
}
.cartes .illustrations{
	animation-timing-function: ease-in;
	animation-duration: 2s;

  animation-name: slidein;
}
.cartes .communication{
	animation-timing-function: ease-in;
	animation-duration: 1.5s;
  animation-name: slidein;
}
.cartes .artisanat{
	animation-timing-function: ease-in;
	animation-duration: 1s;
  animation-name: slidein;
}

.carte .illustrations-titre{
	animation-duration: 1s;
  animation-name: opacity;

}
.carte .communication-titre{
	animation-duration: 1s;
  animation-name: opacity;
}
.carte .artisanat-titre{
	animation-duration: 1s;
  animation-name: opacity;
}
.cartes{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
	grid-gap: 1.1rem;
	padding: 5vh;
	width: 100%;
	overflow: hidden;
	color: #fff;
	font-family: sans-serif;
	text-align: center;
}
.carte{
	display: inline-block;
	justify-content: space-between;
	background-color: #2a2d2f;
	
	overflow: hidden;
	height: 50vh;
	width: 50vh;
	border-radius: 25vh;
	transition: 0.5s;
	z-index: 0;
	position: relative;
	text-align: center;
	box-shadow: 40px 50px 70px rgba(0, 0, 0, 0.4);

}
.carte:hover{
	margin-bottom: 10px;

}
.shadow{
	height: 50vh;
	width: 50vh;
	border-radius: 25vh;
	box-shadow: inset 100px 0px 100px rgba(0, 0, 0, 0.8);

	
	position: absolute;
	z-index: 3;
	transition: all 0.5s;
	
}
.carte:hover .shadow-illu{
	box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.8);
}
.carte:hover .shadow-com{
	box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.8);
}
.carte:hover .shadow-art{
	box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.8);
}
.carte:hover{

	background-color: #1a1d1f;

}
.carte-titre-grand{
	font-family: 'Bebas Neue', sans-serif;
	font-size: 15vh;
	color: #fff;
	position: absolute;
	z-index: 1;
	opacity: 0.5;
	text-shadow: 1rem 1rem 3rem rgba(0, 0, 0, 0.5);

	transform: translateX(18rem);
	transition: transform 5s, filter 0.7s;
}

.carte:hover .illustrations-titre{
	transform: translateX(-20rem);
	opacity: 0.7;
}
.carte:hover .communication-titre{
	transform: translateX(-27rem);
	opacity: 0.7;
}
.carte:hover .artisanat-titre{
	transform: translateX(-10rem);
	opacity: 0.7;
}

.carte-titre-petit{
	margin-top: 4vh;
	font-size: 4vh;
	padding: 1.5rem;
	color: #fff;

	transition: all 0.7s ease 0s;
}
.carte:hover .carte-titre-petit{
	color:  #fff;
}
.lien{
	text-decoration: none;
}
.carte:hover .image-cartes{
	transform: scale(1.1);
}

.image-cartes{
	width: 100%;
	display: block;
  	align-items: center;
  	justify-content: center;
	transition: all 2s ease 0s;
	overflow: hidden;
	transform: scale(1.0);
}

.image-container{
	display: block;
	background-color: #1a1d1f;
	height: 100%;
	width: auto;
	overflow: hidden;
	z-index: 0;
	transition: all 0.7s ease 0s;
}



















/* ____________________________________________PRESENTATION_______________________ */

.PresentationContainer{
	width: 100%;
	display: block;
	text-align: center;
	color: #fff;
}
.presentationLigneContainer{
	width: 70%;
	background-color: #41474b;
 	box-shadow: 0px 50px 80px rgba(0, 0, 0, 0.7);
 	padding: 3rem;
 	margin: 0 auto;
 	margin-top: 3rem;
 	margin-bottom: 3rem;
 	overflow: hidden;
 	border-radius:3vh;

}
.Ligne{
	font-size: 3rem;
	font-family: 'Montserrat', sans-serif;
	padding: 1rem;

}
.titrePresentation{
	padding-top: 5rem;
	font-size: 10rem;
	font-family: 'bebas Neue', sans-serif;
	transition: all 0.7s;

}
.soustitrePresentation{
    transition: all 0.2s;
    padding-bottom: 5rem;
}
.presentationLigne1{transition: all 0.7s;
}
.presentationLigne2{transition: all 1s;
}
.presentationLigne3{transition: all 1.3s;
}
.presentationLigne4{transition: all 1.7s;
}
.presentationLigne5{transition: all 2s;
}
.LigneGras{
	color: skyblue;
}

.buttonContainer{
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.bouttonPresentation{
	margin-top: 5rem;
	margin-bottom: 1rem;
	width: 30%;
		transition: 0.7s;

}
.bouttonPresentation a{
	text-decoration: none;
		font-size: 3rem;
	font-family: 'Bebas Neue', sans-serif;
	letter-spacing: 0.2rem;

}
.bouttonPresentation:hover{
	transform: rotate(-2deg);
	opacity: 0.9;
}

@keyframes Lignes{
	0%{
		transform: translateX(-200rem);
	}
	100%{
		transform: translateX(0rem);
	}
}
.boutiqueTxt{
	animation-timing-function: ease-in;
	animation-duration: 2s;
  animation-name: slidein;
  margin-bottom: 10vh;
  margin-top: 10vh;
}



/*_______________________________________AJOUTS___________________________________*/




.titre-ajouts{

	font-family: 'Bebas Neue', sans-serif;
	font-size: 7rem;
	color: #fff;
	text-align: center;
	transition: all 0.7s ease 0s;
	margin-top: 10rem;
	text-shadow: 10px 10px 40px rgba(0, 0, 0, 0.4);
}











/*_________________________________________FOOTER_____________________________________*/

.footer{
	background-color: #1a1d1f;
	width: 100%;
	margin-top: 10vh;
}
.footer .firstLigne{
	justify-content: space-between;
	display: flex;
	padding: 3rem;
}
.footer .logo{
	
}
.footer li{
	display: block;
	color: #fff;
	list-style: none;
	text-align: right;
	padding-right: 3rem;
	padding-top: 2rem;
}
.footer li a{
	font-family: 'Montserrat', sans-serif;
	font-size: 1.5rem;
	color: #fff;
	text-decoration: none;
}
.footer li a:hover{
	font-size: 1.7rem;
	color: skyblue;
	transition: 1s;
}
.footer ul{
	width: 50%;
}
.footer p{
	align-self: flex-start;
	text-align: left;
	color: #fff;
	padding: 1rem;
}
.cc{
	padding: 1rem;
}













/*________________________________________PAGES______________________________________*/


.titre-page{
	font-family: 'Bebas Neue', sans-serif;
	font-size: 7rem;
	color: #fff;
	text-align: center;
	transition: all 0.7s ease 0s;
	padding: 5rem;
	animation-name: header-anim;
	animation-duration: 2s;
	background-position: center 70%;
	margin-bottom: 10vh;
	margin-top: 20vh;
	box-shadow: 2px 2px 40px black;
	width: 100%;
	text-shadow:5px 5px 10px rgba(0, 0, 0, 0.6); ;
}

 .page-illustrations{
 	box-shadow:  0px 20px 50px rgba(0, 0, 0, 0.8);
 	background-position: center 70%;
 	background-image: url(https://cdnb.artstation.com/p/assets/images/images/022/615/485/large/marvin-hay-bois-de-cerf-copie-8.jpg?1576081532);
 }
 .page-com{
 	box-shadow:  0px 20px 80px rgba(0, 0, 0, 0.8);
 	background-position: center 35%;
 	background-image: url(https://cdna.artstation.com/p/assets/images/images/041/010/702/large/marvin-hay-couverture-la-margelle.jpg?1630506590);
 }
 .page-art{
 	box-shadow:  0px 20px 80px rgba(0, 0, 0, 0.8);
 	background-position: center 70%;
 	background-image: url(https://cdna.artstation.com/p/assets/images/images/042/537/926/large/marvin-hay-20210702-181728-copie.jpg?1634765312);
 	background-size: 100% auto;
 }
  .boutique{
 	box-shadow:  0px 20px 80px rgba(0, 0, 0, 0.8);
 	background-position: center 50%;
 	background-image: url(https://zupimages.net/up/22/03/my1a.jpg);
 	background-size: 100% auto;
 }
   .videos{
 	box-shadow:  0px 20px 80px rgba(0, 0, 0, 0.8);
 	background-position: center 50%;
 	background-image: url(https://images.unsplash.com/photo-1533746228171-962520811097?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=874&q=80);
 	background-size: 100% auto;
 }
 #vidModal{
 	margin: 5rem;
 }

.titre-categories{
	font-family: 'Montserrat', sans-serif;
	font-size: 3rem;
	color: #fff;
	padding: 2rem;
	margin-top: 1rem;
	margin: 0px;
	background-color: #41474b;
 	box-shadow: 0px 50px 80px rgba(0, 0, 0, 0.7);
 	transition: all 0.7s;
 	width: 100%;

}



.redbubble{
	width:100%; 
	transform: scale(0.6);
}



.etsy a{
	color: skyblue;
}





























/*___________________________POUR LES SMARTPHONES_____________________________*/



@media only screen and (max-width:  900px){
	
.logo-chargement .logo-visuel{
	height: 10rem;
}
.logo-chargement .logo-texte{
	height: 7rem;
}


.logoHayah_visuel-header{
	height: 10vh;
}
.logoHayah_texte-header{
	height: 7vh;
}
.liste li{
	display: none;
}
.header button{
	padding: 2rem;
	color: black;
	background-color: rgba(0, 136, 169, 1);
	border: none;
	border-radius: 20rem;
	cursor: pointer;
	transition: all 0.7s ease 0s;
}
.logo{
	padding: 0;
}


.PresentationContainer{
	width: 100%;
	display: block;
	text-align: center;
	color: #fff;
}
.presentationLigneContainer{
	width: 70%;
	background-color: #41474b;
 	box-shadow: 0px 50px 80px rgba(0, 0, 0, 0.7);
 	padding: 3rem;
 	margin: 0 auto;
 	overflow: hidden;

}
.Ligne{
	font-size: 1.5rem;
	font-family: 'Montserrat', sans-serif;
	padding: 1rem;

}
.titrePresentation{
	padding: 5rem;

	font-size: 5rem;
	font-family: 'bebas Neue', sans-serif;
	transition: all 0.7s;

}
.bouttonPresentation{
	padding: 2vh;
	margin:1vh;
	width: 40%;
		transition: 0.7s;
margin-top: 3rem;
}
.bouttonPresentation a{
	text-align: center;
	text-decoration: none;
		font-size: 1.5rem;

}
.bouttonPresentation:hover{
	transform: rotate(-2deg);
	opacity: 0.9;
}



.image-container{
	display: flex;
	height: 100%;
}
section{
	margin-top: 0;
	padding-top: 18rem;
}
.cartes{
	display: block;
	padding: 2vh;

	width: 100%;
	overflow: hidden;
	color: #fff;
	font-family: sans-serif;
	text-align: center;
}
.carte{
	max-height: 100%;
	height: 30vh;
	width: 30vh;
	border-radius: 15vh;
}
.image-cartes{
	min-height: 100%;
	min-width: auto;

}

.carte-titre-petit{
	font-size: 1.5vh;
	padding-top: 10px;
	margin-top: 0;
	font-family: sans-serif;
	font-weight: lighter;
	letter-spacing: 0.05rem;
		margin-bottom: 2rem;


}
.carte-titre-grand{
	display: none;
}
.shadow{
	height: 30vh;
	width: 30vh;
	border-radius: 15vh;
	box-shadow: inset 100px 0px 100px rgba(0, 0, 0, 0.6);

	
	position: absolute;
	z-index: 3;
	transition: all 0.5s;
	
}


.titre-ajouts, .titre-page{
	font-size: 4rem;
}
.titre-ajouts-image, .titre-page-image{
	transform: translateX(0);
}
.titre-categories{
	font-size: 1.5rem;
	margin: 0;
}

.header{
	position: relative;
	position: fixed;
	
}
label{
	display: flex;
	align-items: center;
}
.headerDroite{
	min-width: 30%;
	display: flex;
	align-items: center;

}
nav{
	position: static;
}
nav .main_pages {
	display: none;
	flex-direction: column;
	background: #1a1d1f;
	right: 0vh;
	top: 25vh;
	position: absolute;
	border-radius: 3vh;
}

button{
	padding: 10%;
	margin: 5rem;
	background-color: rgba(0, 136, 169, 1);
	border: none;
	border-radius: 2rem;
	cursor: pointer;
	transition: all 0.7s ease 0s;
	text-decoration: none;
	font-family: montserra, sans-serif;
	color: whitesmoke;
	font-size: 2rem;
	
}
nav li{
	width: 100%;
	text-decoration: none;
	padding: 3rem;
	border-color: #6D6D6D;
	border-bottom: thick double;
	transition: all 0.2s;
}
.socialMedia{
	display: block;
}
 [data-scrollanim~="lefttoright"] {
            transform: translateX(-100vw);
        }
 [data-scrollanim~="opacity"] {
            opacity: 0.7;
        }

 .animation {
            /*            Gestion de la durée des animations 3s = 3 secondes*/
            transition: all 1s;
        }
[data-scrollanim~="righttoleft"] {
            transform: translateX(-100vw);
        }


.fenetreBody img{
	align-items: center;
	margin-right: 2rem;
	margin-bottom: 1rem;
	margin-left: 2rem;
	max-height: 100%;
	width: 100%;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 1.0);
}
.modal{
 	max-height: 95%;
 	width: 95%;
}
.ModalCarousel-cell img{
	max-width: 90% ;
}


.fenetreBody{
	align-items: center;
	height: 70%;
}
.flickity-button {
display: none;
}
.profil{

	width: 100%;
}


}

@media (min-width:  900px){

	.ModalCarousel-cell{
  	height: 65vh;
  }
}





________________________SLIDER COMPONENT______________________



.ModalMain-carousel{
	margin-bottom: 10vh;
	width: 95%;
}


.ModalCarousel-cell{
	width: 100%;
  	transition: all 1s;
  	text-decoration: none;
}
.ModalCarousel-cell img{
  	height: 65vh;
  	width: auto;
  	box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.7);
  	transition: all 0.5s;
  	border-radius: 25px;
}
@keyframes Modal{
	0%{
		transform: translateY(50%) scale(2.0);
	}
	50%{
		transform: translateY(-50%) scale(2.0);
	}
	100%{
		transform: translateY(50%) scale(2.0);
	}
}
.ModalCarousel-cell img:hover{
	animation-timing-function: ease-in;
	animation-duration: 10s;
  animation-name: Modal;
  transition: 0.5s; 
  animation-iteration-count: infinite;
}



.main-carousel{
	margin-bottom: 10vh;
	padding-bottom: 5vh;
}
.carousel-cell{
	opacity: 0.9;
  	height: 65vh;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	margin-right: 2vh;
  	transition: all 1s;
  	text-decoration: none;
}

.carousel-cell button{
	background: none;
	padding: 0;
	margin: 0;
}

.carousel-cell h3{
    display: none;
	font-size: 1.4rem;
	font-family: Montserrat, sans-serif;
	font-weight: 100;
	text-decoration: none;
	color: #fff;
	margin-bottom: 1rem;
transition: 1s;
opacity: 0;
}



.carousel-cell:hover img{
	  	box-shadow: 0px 13px 10px rgba(0, 0, 0, 0.5);
	  	opacity: 1;
	transition: 0.2s;
}
.carousel-cell:hover h3{
	display: block;
	opacity:1;
	transition: 1s;
} 

.carousel-cell img{
  	height: 270px;
  	width: auto;
  	box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.7);
  	transition: all 0.5s;
  	border-radius: 25px;
}



.modal{
	position: fixed;
	width: 95%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	transition: 0.4s;
	transition-delay: 0s;
	z-index: 5;
	background-color: #1a1d1f;
 	box-shadow: 20px 50px 80px rgba(0, 0, 0, 1.0);
 	height: 95%;
 	max-width: 95%;
 	border-radius: 20px;
}
.modal.active{
	transform:  translate(-50%, -50%) scale(1.0);
	transition-delay: 1s;
}
#titreModal{
	font-family: Bebas Neue, sans-serif;
	font-size: 3rem;
	letter-spacing: 1rem;
	margin-top: 5vh;
	justify-content: center;
}
#paragrapheModal{
	font-family: Montserrat, sans-serif;
	color: white;
	font-size: 1.5rem;
	margin-top: 2vh;
	width: 80%;
	justify-content: center;
}
#titre6Modal{
	font-family: Bebas Neue, sans-serif;
	font-size: 3rem;
	letter-spacing: 1rem;
	margin-top: 5vh;
	justify-content: center;
}
#paragraphe6Modal{
	font-family: Montserrat, sans-serif;
	color: white;
	font-size: 1.5rem;
	margin-top: 2vh;
	width: 80%;
	justify-content: center;
}
.fenetreHeader{
	display: flex;
	justify-content: right;
}
.fenetreHeader button{
	margin: 0;
	padding: 1rem;
	cursor: pointer;
	border: none;
	outline: none;
	background: none;
	font-size: 2rem;
	font-weight: bold;
}
.fenetreBody{
	height: 90%;
 	text-align: center;

}
.fenetreBody img{
	margin-right: 2rem;
	margin-bottom: 1rem;
	margin-left: 2rem;
	max-height: 95%;
	width: auto;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 1.0);
}
.fenetreBody h3{
	font-family: 'Monserrat', sans-serif;
	font-size: 2rem;
	color: #fff;
}
#overlay{
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	pointer-events: none;
	opacity: 0;
}
#overlay.active{
	opacity: 1;
	pointer-events: all;
}
/* position dots up a bit */
.flickity-page-dots {
  bottom: -22px;
}
/* dots are lines */
.flickity-page-dots .dot {
  height: 4px;
  width: 40px;
  margin: 0;
  border-radius: 0;
}