@charset "UTF-8";

/***************************/
/***************************/
/********** ICONS **********/
/***************************/
/***************************/

@font-face {
	font-family:'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#fontello') format('svg');
	font-weight:normal;
	font-style:normal;
	font-display: swap;
}
[class^="icon-"] {
	height:1em;
}
[class^="icon-"]:before {
	font-family:"icomoon" !important;
	font-style:normal;
	font-weight:normal;
	speak:never;
	display:inline-block;
	text-decoration:inherit;
	text-shadow:none !important;
	font-variant:normal;
	text-transform:none;
	font-size:inherit;
	line-height:inherit;
	color:inherit;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/***************************/
/********** ICONS **********/
/***************************/

.icon-arrow-down:before {
	content: "\e900";
}
.icon-arrow-left:before {
	content: "\e901";
}
.icon-arrow-right:before {
	content: "\e902";
}
.icon-arrow-up:before {
	content: "\e903";
}
.icon-bluesky:before {
	content: "\e910";
}
.icon-close:before {
	content: "\e904";
}
.icon-expand:before {
	content: "\e905";
}
.icon-facebook:before {
	content: "\e906";
}
.icon-instagram:before {
	content: "\e907";
}
.icon-less:before {
	content: "\e908";
}
.icon-link:before {
	content: "\e909";
}
.icon-linkedin:before {
	content: "\e90a";
}
.icon-more:before {
	content: "\e90b";
}
.icon-search:before {
	content: "\e90c";
}
.icon-share:before {
	content: "\e90f";
}
.icon-twitter-x:before {
	content: "\e90d";
}
.icon-youtube:before {
	content: "\e90e";
}

/***********************************/
/***********************************/
/********** ICON ANIMATED **********/
/***********************************/
/***********************************/

/**
for :
.icon-expand,
.icon-more, .icon-close
**/

/*****************************/
/********** DEFAULT **********/
/*****************************/

[class^="icon-"].animated:before {
	content:"" !important;
}
[class^="icon-"].animated {
	position:relative;
	display:-webkit-inline-box;
	display:-webkit-inline-flex;
	display:-moz-inline-box;
	display:-ms-inline-flexbox;
	display:inline-flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	   -moz-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	height:1em;
	width:1em;
	color:inherit;
	text-shadow:inherit;
	-webkit-transform-origin:center center;
	   -moz-transform-origin:center center;
	    -ms-transform-origin:center center;
	     -o-transform-origin:center center;
	        transform-origin:center center;
	background:transparent;
}
[class^="icon-"].animated .label,
[class^="icon-"].animated .label:before,
[class^="icon-"].animated .label:after {
	position:absolute;
	display:block;
	height:var(--line-height);
	font-size:inherit !important;
	line-height:inherit;
	color:inherit;
	text-shadow:inherit;
	-webkit-box-shadow:inset 0 0 0 -webkit-calc(var(--line-height) * 2);
	   -moz-box-shadow:inset 0 0 0 -moz-calc(var(--line-height) * 2);
	        box-shadow:inset 0 0 0 calc(var(--line-height) * 2);
}
[class^="icon-"].animated .label:before,
[class^="icon-"].animated .label:after {
	content:"";
	-webkit-transform-origin:center center;
	   -moz-transform-origin:center center;
	    -ms-transform-origin:center center;
	     -o-transform-origin:center center;
	        transform-origin:center center;
}

/** default / no js **/

.icon-expand.animated,
body.onload .icon-expand.animated .label,
body.onload .icon-expand.animated .label:before,
body.onload .icon-expand.animated .label:after {
	-webkit-transition:none;
	-o-transition:none;
	-moz-transition:none;
	transition:none;
}

/*********************************/
/********** ICON EXPAND **********/
/*********************************/

/** default **/

.icon-expand.animated .label,
.icon-expand.animated .label:before,
.icon-expand.animated .label:after {
	left:0;
}

/** not expanded **/

.icon-expand.animated .label {
	margin:auto;
	overflow: visible;
}
.icon-expand.animated .label:before {
	-webkit-transform:translate(0,-.375em);
	   -moz-transform:translate(0,-.375em);
	    -ms-transform:translate(0,-.375em);
	     -o-transform:translate(0,-.375em);
	        transform:translate(0,-.375em);
}
.icon-expand.animated .label:after {
	-webkit-transform:translate(0,.375em);
	   -moz-transform:translate(0,.375em);
	    -ms-transform:translate(0,.375em);
	     -o-transform:translate(0,.375em);
	        transform:translate(0,.375em);
}
.icon-expand.animated .label,
.icon-expand.animated .label:before,
.icon-expand.animated .label:after {
	width:1em;
}

/** expanded **/

.expanded .icon-expand.animated .label {
	width:0;
}
.expanded .icon-expand.animated .label:before {
	-webkit-transform:translate3d(-50%,0,0) rotate(-45deg);
	   -moz-transform:translate3d(-50%,0,0) rotate(-45deg);
	        transform:translate3d(-50%,0,0) rotate(-45deg);
}
.expanded .icon-expand.animated .label:after {
	-webkit-transform:translate3d(-50%,0,0) rotate(45deg);
	   -moz-transform:translate3d(-50%,0,0) rotate(45deg);
	        transform:translate3d(-50%,0,0) rotate(45deg);
}
.expanded .icon-expand.animated .label {
	-webkit-transform:translate(.5em,0);
	   -moz-transform:translate(.5em,0);
	    -ms-transform:translate(.5em,0);
	     -o-transform:translate(.5em,0);
	        transform:translate(.5em,0);
}
.expanded .icon-expand .label:before,
.expanded .icon-expand .label:after {
	-webkit-transform:translate(-.125em,0);
	   -moz-transform:translate(-.125em,0);
	    -ms-transform:translate(-.125em,0);
	     -o-transform:translate(-.125em,0);
	        transform:translate(-.125em,0);
	width:1.289em;
}

/***************************************/
/********** ICON CLOSE / MORE **********/
/***************************************/

.icon-close.animated .label,
.icon-more.animated .label {
	left:0;
	height:1em;
	width:1em;
	-webkit-box-shadow:none !important;
	   -moz-box-shadow:none !important;
	        box-shadow:none !important;
}
.icon-close.animated .label:before,
.icon-close.animated .label:after,
.icon-more.animated .label:before,
.icon-more.animated .label:after {
	top:50%;
	left:50%;
}
.icon-more.animated .label:before,
.icon-more.animated .label:after {
	width:1em;
}
.icon-close.animated .label:before,
.icon-close.animated .label:after {
	width:1.289em;
}
.icon-close.animated .label:before {
	-webkit-transform:translate(-50%,-50%) rotate(-45deg);
	   -moz-transform:translate(-50%,-50%) rotate(-45deg);
	    -ms-transform:translate(-50%,-50%) rotate(-45deg);
	     -o-transform:translate(-50%,-50%) rotate(-45deg);
	        transform:translate(-50%,-50%) rotate(-45deg);
}
.icon-close.animated .label:after {
	-webkit-transform:translate(-50%,-50%) rotate(45deg);
	   -moz-transform:translate(-50%,-50%) rotate(45deg);
	    -ms-transform:translate(-50%,-50%) rotate(45deg);
	     -o-transform:translate(-50%,-50%) rotate(45deg);
	        transform:translate(-50%,-50%) rotate(45deg);
}
.icon-more.animated .label:before {
	-webkit-transform:translate(-50%,-50%) rotate(0deg);
	   -moz-transform:translate(-50%,-50%) rotate(0deg);
	    -ms-transform:translate(-50%,-50%) rotate(0deg);
	     -o-transform:translate(-50%,-50%) rotate(0deg);
	        transform:translate(-50%,-50%) rotate(0deg);
}
.icon-more.animated .label:after {
	-webkit-transform:translate(-50%,-50%) rotate(90deg);
	   -moz-transform:translate(-50%,-50%) rotate(90deg);
	    -ms-transform:translate(-50%,-50%) rotate(90deg);
	     -o-transform:translate(-50%,-50%) rotate(90deg);
	        transform:translate(-50%,-50%) rotate(90deg);
}

/***************************************/
/********** ICON PLAY / PAUSE **********/
/***************************************/

/** https://css-tricks.com/making-pure-css-playpause-button/ **/

.icon-play.animated .label {
	height:1em;
	width:1em;
	-webkit-box-shadow:none;
	   -moz-box-shadow:none;
	        box-shadow:none;
}
.icon-play.animated .label:before,
.icon-play.animated .label:after {
	height:1em;
	width:1em;
	-webkit-box-shadow:inset 0 0 0 1em;
	   -moz-box-shadow:inset 0 0 0 1em;
	        box-shadow:inset 0 0 0 1em;
}
.icon-play.animated .label:before {
	-webkit-clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
	        clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
}
.icon-play.animated .label:after {
	-webkit-clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
	        clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
}

/****************************/
/****************************/
/********** @MEDIA **********/
/****************************/
/****************************/

/** cf . https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/ **/

/****************************/
/********** @HOVER **********/
/****************************/

@media (hover: hover) {
	/** expand **/
	a:not(.expanded):hover .icon-expand.animated .label:before {
		-webkit-transform:translate(0,-.25em);
		   -moz-transform:translate(0,-.25em);
		    -ms-transform:translate(0,-.25em);
		     -o-transform:translate(0,-.25em);
		        transform:translate(0,-.25em);
	}
	a:not(.expanded):hover .icon-expand.animated .label:after {
		-webkit-transform:translate(0,.25em);
		   -moz-transform:translate(0,.25em);
		    -ms-transform:translate(0,.25em);
		     -o-transform:translate(0,.25em);
		        transform:translate(0,.25em);
	}
	a.expanded:hover .icon-expand .label:before,
	a.expanded:hover .icon-expand .label:after {
		width:1em;
	}
	/** more, close **/
	a:hover .icon-more.animated .label:before,
	a:hover .icon-more.animated .label:after {
		width:.75em;
	}
	a:hover .icon-close.animated .label:before,
	a:hover .icon-close.animated .label:after {
		width:1em;
	}
	/** play / pause **/
	/* pause */
	.mediaplayer-container.is-paused .play-button .icon-play.animated .label:before,
	.mediaplayer-container.is-playing .play-button:hover .icon-play.animated .label:before,
	a.is-paused .icon-play.animated .label:before,
	a.is-playing:hover .icon-play.animated .label:before {
		-webkit-clip-path: polygon(0% 0%, 33% 0, 33% 100%, 0% 100%);
		        clip-path: polygon(0% 0%, 33% 0, 33% 100%, 0% 100%);
	}
	.mediaplayer-container.is-paused .play-button .icon-play.animated .label:after,
	.mediaplayer-container.is-playing .play-button:hover .icon-play.animated .label:after,
	a.is-paused .icon-play.animated .label:after,
	a.is-playing:hover .icon-play.animated .label:after {
		-webkit-clip-path: polygon(66% 0, 100% 0, 100% 100%, 66% 100%);
		        clip-path: polygon(66% 0, 100% 0, 100% 100%, 66% 100%)
	}
	/* play */
	.mediaplayer-container.is-paused .play-button:hover .icon-play.animated .label:before,
	.mediaplayer-container.is-playing .play-button .icon-play.animated .label:before,
	a.is-paused:hover .icon-play.animated .label:before,
	a.is-playing .icon-play.animated .label:before {
		-webkit-clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
		        clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
	}
	.mediaplayer-container.is-paused .play-button:hover .icon-play.animated .label:after,
	.mediaplayer-container.is-playing .play-button .icon-play.animated .label:after,
	a.is-paused:hover .icon-play.animated .label:after,
	a.is-playing .icon-play.animated .label:after {
		-webkit-clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
		        clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
	}
}

/********** .HOVER FOR MOBILE JS **********/

@media (min-width:0px) {
	/** expand **/
	a:not(.expanded).hover .icon-expand.animated .label:before {
		-webkit-transform:translate(0,-.25em);
		   -moz-transform:translate(0,-.25em);
		    -ms-transform:translate(0,-.25em);
		     -o-transform:translate(0,-.25em);
		        transform:translate(0,-.25em);
	}
	a:not(.expanded).hover .icon-expand.animated .label:after {
		-webkit-transform:translate(0,.25em);
		   -moz-transform:translate(0,.25em);
		    -ms-transform:translate(0,.25em);
		     -o-transform:translate(0,.25em);
		        transform:translate(0,.25em);
	}
	a.expanded.hover .icon-expand .label:before,
	a.expanded.hover .icon-expand .label:after {
		width:1em;
	}
	/** more, close **/
	a.hover .icon-more.animated .label:before,
	a.hover .icon-more.animated .label:after {
		width:.75em;
	}
	a.hover .icon-close.animated .label:before,
	a.hover .icon-close.animated .label:after {
		width:1em;
	}
	/** play / pause **/
	/* pause */
	a.is-paused .icon-play.animated .label:before {
		-webkit-clip-path: polygon(0% 0%, 33% 0, 33% 100%, 0% 100%);
		        clip-path: polygon(0% 0%, 33% 0, 33% 100%, 0% 100%);
	}
	a.is-paused .icon-play.animated .label:after,
	a.is-playing.hover .icon-play.animated .label:after {
		-webkit-clip-path: polygon(66% 0, 100% 0, 100% 100%, 66% 100%);
		        clip-path: polygon(66% 0, 100% 0, 100% 100%, 66% 100%)
	}
	/* play */
	a.is-paused.hover .icon-play.animated .label:before {
		-webkit-clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
		        clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
	}
	a.is-paused.hover .icon-play.animated .label:after {
		-webkit-clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
		        clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
	}
}