@charset "UTF-8";

/**************************/
/**************************/
/********** VARS **********/
/**************************/
/**************************/

:root {
	/* duration */
	--duration-fast: .25s;
	--duration-normal: .5s;
	--duration-slow: 1s;
	/* easing */
	--ease-fast: cubic-bezier(0,.5,.5,1);
	--elastic: cubic-bezier(1, 0.01, 0, 1.22);
	--ease: ease;
	--easeInQuint: cubic-bezier(0.64, 0, 0.78, 0);
	--easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
}

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

/*******************************/
/********** STRUCTURE **********/
/*******************************/

#wrapper {
	transition:
	filter var(--duration-fast) var(--ease);
}
body {
	transition:
	color var(--duration-fast) var(--ease),
	background var(--duration-slow) var(--ease);
}
header {
	transition:
	opacity var(--duration-fast) var(--ease),
	background var(--duration-normal) var(--ease);
}
main,
footer {
	transition:
	opacity var(--duration-fast) var(--ease-fast),
	filter var(--duration-fast) var(--ease-fast),
	transform var(--duration-normal) var(--ease);
}

/****************************/
/********** STYLES **********/
/****************************/

/*********************************/
/*********************************/
/********** NAVIGATIONS **********/
/*********************************/
/*********************************/

/*****************************/
/********** DEFAULT **********/
/*****************************/
a,
button {
	transition:
	color var(--duration-fast) var(--ease),
	text-decoration var(--duration-fast) var(--ease),
	background var(--duration-fast) var(--ease),
	opacity var(--duration-fast) var(--ease),
	border var(--duration-fast) var(--ease),
	width var(--duration-fast) var(--elastic),
	transform var(--duration-fast) var(--elastic),
	filter var(--duration-fast) var(--elastic);
}
a:before,
a:after,
a span,
a span:before,
a span:after {
	transition:inherit;
}

/********************************/
/********** NAVIGATION **********/
/********************************/

/** in **/
body.expanded #navigation {
	transition:visibility .01s linear,
	height var(--duration-fast) var(--easeOutQuint);
}
body.expanded #navigation .navigation-content > * {
	transition:
	opacity var(--duration-fast) var(--easeOutQuint) var(--duration-fast),
	transform var(--duration-fast) var(--easeOutQuint) var(--duration-fast);
}
/** out **/
#navigation {
	transition:
	visibility .01s linear calc(var(--duration-fast) * 1.5),
	height var(--duration-fast) var(--easeInQuint) var(--duration-fast);
}
#navigation .navigation-content > * {
	transition:
	opacity var(--duration-fast) var(--easeInQuint),
	transform var(--duration-fast) var(--easeInQuint);
}

/*********************************/
/*********************************/
/********** COLLAPSIBLE **********/
/*********************************/
/*********************************/

/* OK */

a.collapsible-toggle > * {
	transition:
	transform var(--duration-fast) var(--elastic);
}
.collapsible {
	transition:
	opacity var(--duration-fast) var(--easeOutQuint),
	max-height var(--duration-fast) var(--easeOutQuint),
	margin-top var(--duration-fast) var(--easeOutQuint),
	padding-bottom var(--duration-fast) var(--easeOutQuint);
}
.collapsible > * {
	transition:
	opacity var(--duration-fast) var(--easeOutQuint);
}

/****************************/
/****************************/
/********** MEDIAS **********/
/****************************/
/****************************/

/*********************************/
/********** MEDIAPLAYER **********/
/*********************************/

/* in */
.mediaplayer-container.is-playing iframe,
.mediaplayer-container.is-playing .v-controlBar:after {
	transition:
	opacity var(--duration-fast) var(--ease) var(--duration-fast) !important;
}
/* out */
.mediaplayer-container.is-paused iframe,
.mediaplayer-container.is-paused .v-controlBar:after {
	transition:
	opacity var(--duration-fast) var(--ease) !important;
}

/*************************/
/********** IMG **********/
/*************************/

/* for [loading='lazy'] */
img {
    transition:
	opacity var(--duration-fast) var(--easeOutQuint);
}

/*******************************/
/********** THUMBNAIL **********/
/*******************************/

.thumbnail a:before {
	transition:opacity var(--duration-fast) var(--ease);
}

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

svg > * {
	transition:
	fill var(--duration-fast) var(--ease),
	stroke var(--duration-fast) var(--ease);
}
[class^="icon-"].animated .label,
[class^="icon-"].animated .label:before,
[class^="icon-"].animated .label:after {
	transition:
	transform var(--duration-fast) var(--elastic),
	right var(--duration-fast) var(--elastic),
	margin var(--duration-fast) var(--elastic),
	clip-path var(--duration-fast) var(--elastic),
	height var(--duration-fast) var(--elastic),
	width var(--duration-fast) var(--elastic);
}

/***************************/
/***************************/
/********** GRIDS **********/
/***************************/
/***************************/

/***************************/
/********** GRIDS **********/
/***************************/

.grid .item {
	transition:
	opacity var(--duration-fast) var(--easeOutQuint),
	transform var(--duration-fast) var(--easeOutQuint);
}
.grid .item .cover,
.grid .item .infos {
	transition:
	opacity var(--duration-fast) var(--easeOutQuint);
}
.grid.medias .grid-archive-link [class^="icon-"]:after {
	transition:
	transform var(--duration-fast) var(--easeOutQuint);
}
.grid.alias .item-content:hover .thumbnail.media,
.grid.medias .item-content:hover .thumbnail {
	animation: tilt-shaking 0.25s linear;
}

/*****************************/
/********** RESULTS **********/
/*****************************/

.results-title {
	transition:
	opacity var(--duration-fast) var(--ease),
	transform var(--duration-fast) var(--ease);
}

/******************************/
/********** OVERLAYS **********/
/******************************/

/** out **/

.overlay {
	transition:
	opacity var(--duration-fast) var(--easeInQuint),
	background calc(var(--duration-fast) / 2) var(--easeInQuint),
	backdrop-filter calc(var(--duration-fast) / 2) var(--easeInQuint),
	visibility .01s linear var(--duration-fast);
}
.overlay .overlay-container {
	transition:
	filter var(--duration-fast) var(--easeInQuint),
	transform var(--duration-fast) var(--easeInQuint);
}
/** in **/

.overlay.active {
	transition:
	visibility .01s linear,
	opacity var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2),
	background var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2),
	backdrop-filter var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2);
}
.overlay.active .overlay-container {
	transition:
	filter var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2),
	transform var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2);
}
/** onload **/

body.onload .overlay {
	transition: none;
}

/***************************/
/********** FORMS **********/
/***************************/

input[type="submit"],
button {
	transition:
	color var(--duration-fast) var(--ease-fast),
	text-shadow var(--duration-fast) var(--ease-fast),
	transform var(--duration-fast) var(--ease-fast),
	opacity var(--duration-fast) var(--ease-fast),
	background var(--duration-fast) var(--ease-fast),
	border var(--duration-fast) var(--ease-fast) !important;
}
input[type="radio"],
input[type="checkbox"] {
	transition:
	box-shadow var(--duration-fast) var(--ease-fast);
}
input[type="radio"]:before,
input[type="checkbox"]:before {
	transition:
	transform var(--duration-fast) var(--ease-fast),
	opacity var(--duration-fast) var(--ease-fast);
}
.form-container input[type="search"] + button [class^="icon-"]:before {
	transition:
	transform var(--duration-fast) var(--ease-fast);
}

/****************************/
/********** SWIPER **********/
/****************************/

.swiper-scrollbar {
	transition-duration: var(--duration-fast) !important;
}
.swiper-controls .previous span,
.swiper-controls .next span {
	-webkit-transition:inherit;
	-o-transition:inherit;
	transition:inherit;
}

/***********************************/
/********** ACCESSIBILITY **********/
/***********************************/

.accessibility-options .fontSize {
	-webkit-transition:
	color var(--duration-fast) var(--ease),
	text-shadow var(--duration-fast) var(--ease),
	background var(--duration-fast) var(--ease);
	-o-transition:
	color var(--duration-fast) var(--ease),
	text-shadow var(--duration-fast) var(--ease),
	background var(--duration-fast) var(--ease);
	-moz-transition:
	color var(--duration-fast) var(--ease),
	text-shadow var(--duration-fast) var(--ease),
	background var(--duration-fast) var(--ease);
	transition:
	color var(--duration-fast) var(--ease),
	text-shadow var(--duration-fast) var(--ease),
	background var(--duration-fast) var(--ease);
}
a.switcher {
	-webkit-transition:
	padding var(--duration-fast) var(--elastic),
	background var(--duration-fast) var(--ease),
	-webkit-transform var(--duration-fast) var(--elastic);
	transition:
	padding var(--duration-fast) var(--elastic),
	background var(--duration-fast) var(--ease),
	-webkit-transform var(--duration-fast) var(--elastic);
	-o-transition:
	padding var(--duration-fast) var(--elastic),
	background var(--duration-fast) var(--ease),
	-o-transform var(--duration-fast) var(--elastic);
	-moz-transition:
	transform var(--duration-fast) var(--elastic),
	padding var(--duration-fast) var(--elastic),
	background var(--duration-fast) var(--ease),
	-moz-transform var(--duration-fast) var(--elastic);
	transition:
	transform var(--duration-fast) var(--elastic),
	padding var(--duration-fast) var(--elastic),
	background var(--duration-fast) var(--ease);
	transition:
	transform var(--duration-fast) var(--elastic),
	padding var(--duration-fast) var(--elastic),
	background var(--duration-fast) var(--ease),
	-webkit-transform var(--duration-fast) var(--elastic),
	-moz-transform var(--duration-fast) var(--elastic),
	-o-transform var(--duration-fast) var(--elastic);
}
a.switcher:before {
	-webkit-transition:
	left var(--duration-fast) var(--elastic),
	-webkit-transform var(--duration-fast) var(--elastic);
	transition:
	left var(--duration-fast) var(--elastic),
	-webkit-transform var(--duration-fast) var(--elastic);
	-o-transition:
	left var(--duration-fast) var(--elastic),
	-o-transform var(--duration-fast) var(--elastic);
	-moz-transition:
	transform var(--duration-fast) var(--elastic),
	left var(--duration-fast) var(--elastic),
	-moz-transform var(--duration-fast) var(--elastic);
	transition:
	transform var(--duration-fast) var(--elastic),
	left var(--duration-fast) var(--elastic);
	transition:
	transform var(--duration-fast) var(--elastic),
	left var(--duration-fast) var(--elastic),
	-webkit-transform var(--duration-fast) var(--elastic),
	-moz-transform var(--duration-fast) var(--elastic),
	-o-transform var(--duration-fast) var(--elastic);
}
a.switcher:after {
	-webkit-transition:
	width var(--duration-fast) var(--elastic),
	-webkit-transform var(--duration-fast) var(--elastic);
	transition:
	width var(--duration-fast) var(--elastic),
	-webkit-transform var(--duration-fast) var(--elastic);
	-o-transition:
	width var(--duration-fast) var(--elastic),
	-o-transform var(--duration-fast) var(--elastic);
	-moz-transition:
	transform var(--duration-fast) var(--elastic),
	width var(--duration-fast) var(--elastic),
	-moz-transform var(--duration-fast) var(--elastic);
	transition:
	transform var(--duration-fast) var(--elastic),
	width var(--duration-fast) var(--elastic);
	transition:
	transform var(--duration-fast) var(--elastic),
	width var(--duration-fast) var(--elastic),
	-webkit-transform var(--duration-fast) var(--elastic),
	-moz-transform var(--duration-fast) var(--elastic),
	-o-transform var(--duration-fast) var(--elastic);
}

/*****************************/
/********** INSTANT **********/
/*****************************/

.instant-transition {
	transition:none !important;
}


/**************************/
/**************************/
/********** AJAX **********/
/**************************/
/**************************/

/**
is-loading
is-refreshing
**/

/****************************/
/********** LOADER **********/
/****************************/

/*
/** icon only **/

.loader:before {
	content:"" !important;
	display:inline-block;
	height:2rem;
	width:2rem;
	margin:-.5rem;
	        border-radius:50%;
	border-style:solid;
	border-width:var(--line-height);
	border-bottom:solid var(--line-height) transparent;
	        animation: spinner 1s infinite linear;
}
/*****************************/
/********** LOADING **********/
/*****************************/

/** loading txt **/

.is-loading:before {
	content:"";
	display:inline-block;
	vertical-align:middle;
	height:1.75em;
	width:1.75em;
	margin:-.375em .375em -.375em -.375em;
	border-radius:50%;
	border-style:solid;
	border-width:var(--line-height);
	border-bottom:solid var(--line-height) transparent;
	color:var(--theme-1-color);
	animation: spinner .5s infinite linear;
}

/*****************************/
/********** REFRESH **********/
/*****************************/

body.is-loading:before {
	content: "";
	position: fixed;
	z-index: 100;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	     -o-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}
body.is-loading #wrapper {
	/*filter: blur(.125em) grayscale(.66);*/
	opacity: .66;
}
/*
.grid-container.is-loading .results-title,
.grid-container.is-loading .item,
.grid-container.is-loading .grid-message,
.grid.is-loading .item {
	opacity: 0;
}
*/


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

/**********************************/
/********** TILT SHAKING **********/
/**********************************/

@keyframes tilt-shaking {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(5deg); }
	50% { transform: rotate(0eg); }
	75% { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); }
}

/*****************************/
/********** SPINNER **********/
/*****************************/

@-webkit-keyframes spinner {
	0%, 50%, 100% { -webkit-animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); }
	0% { -webkit-transform: rotate(0); }
	50% { -webkit-transform: rotate(180deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spinner {
	0%, 50%, 100% { -moz-animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); }
	0% { -moz-transform: rotate(0); }
	50% { -moz-transform: rotate(180deg); }
	100% { -moz-transform: rotate(360deg); }
}
@-o-keyframes spinner {
	0%, 50%, 100% { -o-animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); }
	0% { -o-transform: rotate(0); transform: rotate(0); }
	50% { -o-transform: rotate(180deg); transform: rotate(180deg); }
	100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spinner {
	0%, 50%, 100% { -webkit-animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); -moz-animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); -o-animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); }
	0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); }
	50% { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
	100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}