/*
 Version:      1.0.0
*/

.carte_intro {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 3;
	cursor : pointer;
    max-height: 100%;
    max-width: 100%;
}

#content .container {
     overflow-x: initial;
    padding: 0 15px;
}

#content{
    position: relative;
}

#content:before{
	position : absolute;
	top : -65px;
	left : 0;
	background : url(images/feuille_gauche.png) no-repeat;
	width : 235px;
	height : 285px;
	content : "";
}
#content:after{
	position : absolute;
	top : -91px;
	right : 0;
	background : url(images/feuille_droite.png) no-repeat;
	width : 331px;
	height : 311px;
	content : "";
}

#wrapper_res_son{
	max-height : 95vh;
}

#ressources_sonores .slick-list{
    overflow: initial;
	opacity : 0;
}

#ressources_sonores{
	opacity : 0;
	transition : opacity 0.3s;
	max-width: 540px;
	margin : auto;
}

.wrapper {
    display: block;
	width : 100%;
    overflow: hidden!important;
    min-height: 100vh;
    flex-direction: column;
    position: relative;
    transition: all .3scubic-bezier(.79,.14,.15,.86);
}

.ui-loader{
	display : none;
}

#ressources_sonores.slick-initialized{
	opacity : 1;
}

.oneLetter{
    width: fit-content;
    margin: auto;   
    perspective: 938px!important;
    max-height: calc(100vh - 280px);
    min-height: 350px;
	transform : scale(0.9);
	transition : transform 0.3s;
}

.slick-current .oneLetter{
	transform : scale(1);
}

.oneLetter .vignette{
	height:100%;
	width:auto;
	margin : auto;
    max-height: calc(100vh - 280px);
    min-height: 350px;
}

.front, .back{
    position: relative;
}

.picto_son{
	position: absolute;
    bottom: 10px;
    right: 10px;
    zoom: 0.75;
    cursor: pointer;
	z-index : 1;
    animation: zoom-in-zoom-out 5s ease infinite;
}

.picto_animal{
	position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
	z-index : 1;
    zoom: 0.75;
    animation: zoom-in-zoom-out 4s ease infinite;
}

.oneLetterFrise.slick-slide{
	transform : scale(0.6);
	transition : transform 0.4s;
    margin: 0 -2px;
}

.oneLetterFrise.slick-slide.slick-current{
	transform : scale(1);
}

.oneLetterFrise img{
	filter: drop-shadow(7px 0px 8px rgba(35, 32, 33, 0.23));
}

#frise .slick-track {
    padding-top: 35px;
    padding-bottom: 35px;
}

#frise .slick-list {
    overflow: visible;
}

.oneLetterFrise{
    cursor: pointer;
}

.oneLetterFrise,
.oneLetterFrise img{
    border: none !important;
    box-shadow: none !important;
	
}


#ressources_sonores .slick-arrow{
    position: absolute;
    top: 0;
    bottom: 0;
    height: fit-content;
    margin: auto;
    z-index: 20;
    visibility: hidden;
	opacity : 0;
	transition : opacity 0.4s;
	background: url(images/fleche_son.png) no-repeat transparent;
    text-indent: -9999px;
	width : 185px;
	height : 226px;
	
}

#ressources_sonores .slick-arrow:hover{
	opacity : 0.7!important;
}

#ressources_sonores .slick-prev{
    left: -250px;
}

#ressources_sonores .slick-next{
    right: -250px;
	transform : rotate(180deg);
}

#frise:before{
	background: url(images/select.png) no-repeat;
	position : absolute;
	left : 0;
	right : 0;
    top: 15px;
	margin: auto;
	width : 30px;
	height : 23px;
	content : "";
}

@media (max-width: 1200px) {
	#content:before,#content:after{
		display : none;
	}
}

@media (max-width: 900px) {
	#ressources_sonores .slick-arrow{
		background: url(images/fleche_small.png) no-repeat transparent;
		text-indent: -9999px;
		width: 93px;
		height: 103px;
	}
	
	#ressources_sonores .slick-next {
		right: -46px;
	}
	
	#ressources_sonores .slick-prev {
		left: -46px;
	}
}


@keyframes zoom-in-zoom-out {
    0% {
      scale: 90%;
    }
    50% {
      scale: 100%;
    }
    100% {
      scale: 90%;
    }
  }