/*
Theme Name: RahuLamo v3
Version: 1
Text Domain: rahulamo
*/


/* Fonts
---------------------------------------------------- */

/*@font-face {
	font-family: Reckless;
	src: url('fonts/Reckless/RecklessStandardM-Medium.woff2');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: Reckless;
	src: url('fonts/Reckless/RecklessStandardM-MediumItalic.woff2');
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: Reckless;
	src: url('fonts/Reckless/RecklessStandardM-Regular.woff2');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: Reckless;
	src: url('fonts/Reckless/RecklessStandardM-RegularItalic.woff2');
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: Reckless;
	src: url('fonts/Reckless/RecklessStandardM-Light.woff2');
	font-weight: 300;
	font-style: normal;
}*/


/* General
---------------------------------------------------- */
* {
	box-sizing: border-box;

}

:root {

	/*font-size: 1vw;*/
	/*font-size: 5.4795vw;*/
	font-size: 2.5vw;
	/* full = 18.27rem */
	/*--grey1: #b1a8a4;*/

	/*--bgcolor0: #141414;*/
	--bgcolor0: #006CFF;
	--bgcolor1: #FFE200;
	--bgcolor2: #FF6A00;
	--bgcolor3: #FF001E;
	--bgcolor4: #FF00CE;
	--bgcolor5: #FF99FF;
	--bgcolor6: #B22EFF;
	--bgcolor7: #006CFF;
	--bgcolor8: #3BE7FF;
	--bgcolor9: #008D30;
	--bgcolor10: #00C40A;
	--bgcolor11: #008D30;
	--bgcolor12: #31E300;
	--bgcolor13: #B36100;
	--bgcolor14: #BFBFC9;

	/*--color0: white;*/
	--color0: black;
	--color1: black;
	--color2: black;
	--color3: black;
	--color4: black;
	--color5: black;
	--color6: black;
	--color7: black;
	--color8: black;
	--color9: black;
	--color10: black;
	--color11: black;
	--color12: black;
	--color13: black;
	--color14: black;

	/*--filter0: invert(1);*/


}


@media (min-width: 900px) {
	:root {
		/* width (libre-office): 1728pt */
		/*font-size: 1.1111vw;*/
		font-size: 0.9259vw;
	}
}

@media (min-width: 1440px) {
	:root {}
}

body {
	/*position: relative;*/
	margin: 0;
	font-family: "Onest", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 1.875rem;
	font-optical-sizing: auto;
	line-height: 1.2;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	background-color: white;

	display: flex;
	flex-direction: column;
}

@media (min-width: 900px) {
	body {
		min-height: 100vh;
		flex-direction: row;

		/* -> Single (slideshow must wrap) */
		flex-wrap: wrap;
	}
}


body.menu-open {
	overflow: hidden;
}

figure {
	margin: 0;
}

svg {
	display: block;
}

a {
	color: inherit;
	text-decoration: inherit;
	/*transition: color 300ms;*/
}


h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

sup {
	line-height: 0;
}

button {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	appearance: none;
	border-radius: 0;

	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	cursor: pointer;
}

.hidden {
	display: none !important;
}

@media (max-width: 899px) {
	.desktop-only {
		display: none !important;
	}
}

@media (min-width: 900px) {
	.mobile-only {
		display: none !important;
	}
}




/* Nav
---------------------------------------------------- */

.site-nav {
	/*padding: 1.485rem 1.845rem;*/
	padding: 0 1.845rem;
	font-size: 1.875rem;

	position: relative;
	z-index: 2;

}

.nav-content {
	display: flex;
	flex-direction: column;
	gap: 1.875rem;
	/*align-items: flex-end;*/
	padding: 1.485rem 0;
	position: sticky;
	top: 0;
}

.site-nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;

}

.site-menu {
	/*display: flex;
	flex-direction: column;
	align-items: flex-end;*/

	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.site-menu .menu-item a:hover,
.site-menu .menu-item.current-menu-item a {
	font-weight: 600;
}

@media (min-width: 900px) {
	.site-nav {
		order: 2;
	}

	.burger,
	.close {
		display: none;
	}

}

@media (max-width: 899px) {
	.site-nav {
		position: fixed;
		background-color: var(--bgcolor);
		right: -100%;
		width: 35rem;
		height: 100%;

		transition: right 200ms;
	}

	body.menu-open .site-nav {
		right: 0;
	}

	.nav-content {
		align-items: flex-end;
		padding-top: 7rem;
	}

	.burger {
		position: absolute;
		top: 7rem;
		right: 2rem;
	}

	.burger svg {
		display: block;
		width: 3.5rem;
		height: auto;
	}

	.close svg {
		display: block;
		width: 3.5rem;
		height: auto;
	}
}






/* Languages
---------------------------------------------------- */

.languages {
	font-size: 1.25rem;
	display: flex;
	justify-content: flex-end;
}

ul.languages {
	padding: 0;

}

.languages .language {
	padding-right: 0.4rem;
}

.languages .language:not(:first-child)::before {
	content: "|";
}

.languages .language .active {
	font-weight: 600;
}

/* Page
---------------------------------------------------- */

.page-main {
	/*order: 1;*/
	flex-grow: 1;
	flex-basis: 0;
	padding: 4rem 2rem 4rem;
	min-width: 0;
}

.page-header {
	font-size: 2.8125rem;
	line-height: 0.85;
	margin: 0 0 4rem;
}

.page-header h1 {
	text-transform: uppercase;
	font-weight: 600;
}

.page-content {
	font-size: 1.875rem;
	max-width: 73rem;
}

.page-content h1 {
	font-size: 2.8125rem;
	line-height: 0.85;
	margin: 3.75rem 0 1.875rem;
	text-transform: uppercase;
	font-weight: 600;
}

.page-content h2 {
	font-size: 2.8125rem;
	line-height: 0.85;
	margin: 3.75rem 0 1.875rem;
	font-weight: 600;
}

.page-content h3 {
	margin: 1.875rem 0;
	font-weight: 600;
}

.page-content h4 {
	margin: 0;
	font-weight: 600;
}

.page-content p {
	margin-top: 0;
}



.page-header {
	margin: 0 0 4rem;
}

.page-header h1 {
	text-transform: uppercase;
	font-weight: 600;
}

@media (min-width: 900px) {
	.page-main {
		order: 1;
		padding: 4rem 0 4rem 4.23rem;
	}
}

@media (max-width: 899px) {
	.page-main {
		padding-top: 7rem;
	}

	.page-header {
		max-width: 30rem;
	}
}


/* Page single items
---------------------------------------------------- */

.single-items {
	margin: 4rem 0 0;
	font-size: 2.8125rem;
	line-height: 0.85;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.single-item-title {
	text-transform: uppercase;
	font-weight: 600;
}

.single-item .single-item-image {
	opacity: 0;
}

.single-item-image {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 20rem;
	height: 24rem;
	pointer-events: none;
}

.single-item:hover {
	/*cursor: none;*/
}

.single-item .single-item-image {
	opacity: 0;
	transition: opacity 200ms;
}

.single-item:hover .single-item-image {
	opacity: 1;
}

.single-item-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 899px) {
	.single-item .single-item-image {
		display: none;
	}
}


/* Single
---------------------------------------------------- */

.slideshow {
	order: 3;
	display: flex;
	min-width: 0;
	position: relative;
	/*height: 43.75rem;
	overflow: auto;
	display: flex;
	cursor: grab;*/
}

.slideshow .viewer {

	height: 43.75rem;
	overflow: auto;
	display: flex;
	cursor: grab;
}

.slideshow.grabbing {
	cursor: grabbing;
}

.slideshow img {
	height: 100%;
	width: auto;
	display: block;
}

.single-soutiens h3 {
	font-weight: 600;
}

.single-soutiens p {
	margin-top: 0;
}


/* Slideshow controler
---------------------------------------------------- */

.controler .zone {
	position: absolute;
	width: 25rem;
	max-width: 50%;
	height: 100%;
	top: 0;
}

.controler .zone.left {
	left: 0;
}

.controler .zone.right {
	right: 0;
}




/* Single Dates
---------------------------------------------------- */

.date-item {
	margin: 1.875rem 0;
}

.date-item-dates {
	font-weight: 600;
}




/* Accordeon
---------------------------------------------------- */

.accordeon-header {
	display: flex;
	align-items: flex-end;
	gap: 0.4rem;
	/*gap: 0.875rem;
	padding: 0.675rem 0;*/
	cursor: pointer;
	padding: 0.4rem 0;
}

.accordeon-header .picto {
	height: 3.2rem;
	width: 3.2rem;
}

.accordeon-header .picto img {
	height: 100%;
	width: auto;
	display: block;
	transition: transform 200ms;

	filter: var(--filter);
}

.accordeon-item.open .picto img {
	transform: rotate(90deg);
}

.accordeon-header .title {
	font-size: 2.8125rem;
	line-height: 0.85;
	text-transform: uppercase;
	font-weight: 600;
}

.accordeon-body {
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	height: 0;
}

.accordeon-content {
	max-width: 73rem;
}

.accordeon-content h3 {
	/*margin: 1.875rem 0 1.875rem 3.8rem;*/
	margin: 1.875rem 0;
	font-weight: 600;
	text-transform: uppercase;
}

.accordeon-content h4 {
	margin: 1.875rem 0;
	font-weight: 600;
}

.accordeon-content ul {
	/*margin: 0;*/
	margin: 1.875rem 0 1.875rem 3.8rem;
	padding: 0;
	list-style-type: none;
}




/* Home
---------------------------------------------------- */

body.home {
	background-repeat: no-repeat;
	height: 100vh;
	background-size: 20%;
}

ul.home-anim,
ul.home-anim ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.home-anim .menu-item-type-custom>a {
	display: none;
}

.home-anim {
	position: fixed;
	top: 50%;
	left: 50%;
}

.home-anim .menu-item {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 3.125rem;
}

.home-anim .menu-item:first-child {
	left: -12rem;
}

.home-anim .menu-item:last-child {
	left: 8rem;
}

.home-anim .sub-menu .menu-item:first-child {
	left: -8rem;
}

.home-anim .sub-menu .menu-item:last-child {
	left: 8rem;
}

.home-anim a {
	position: absolute;
	padding: 2rem;
	white-space: nowrap;
}

.home-anim a:hover {
	font-weight: 600;
}


/* Pages template
---------------------------------------------------- */

body .site-nav {
	background-repeat: no-repeat;
	background-position: right 20rem;
	background-attachment: fixed;
}

body.page-creations .site-nav {
	background-image: url(images/illustration-1.png);
	background-size: 11%;
}

body.page-collaborations .site-nav {
	background-image: url(images/illustration-2.png);
	background-size: 13%;
}

body.page-mouvements .site-nav {
	background-image: url(images/illustration-3.png);
	background-size: 17%;
}

@media (max-width: 899px) {

	body.page-creations .site-nav,
	body.page-collaborations .site-nav,
	body.page-mouvements .site-nav {
		background-position: right 30rem;
		background-size: 16rem;
	}
}



/* Animation Mouvement
---------------------------------------------------- */

.mouvements-title span {
	animation-timing-function: ease-in-out;
	animation-delay: 4500ms;
	animation-duration: 3000ms;
	animation-fill-mode: both;
	animation-iteration-count: 1;
}

.mouvements-title span:nth-child(2) {
	text-decoration: underline;
	animation-name: underline;
}

.mouvements-title span:nth-child(3) {
	animation-name: fade1;
}

.mouvements-title span:nth-child(4) {
	animation-name: fade2;
}

.mouvements-title span:nth-child(5) {
	animation-name: fade3;
}

.mouvements-title span:nth-child(6) {
	animation-name: fade4;
}

.mouvements-title span:nth-child(7) {
	animation-name: fade5;
}

.mouvements-title span:nth-child(8) {
	animation-name: fade6;
}

.mouvements-title span:nth-child(9) {
	animation-name: fade7;
}

.mouvements-title span:nth-child(10) {
	animation-name: fade8;
}


@keyframes underline {
	0% {
		text-decoration-color: black;
	}

	15% {
		text-decoration-color: transparent;
	}

	85% {
		text-decoration-color: transparent;
	}

	100% {
		text-decoration-color: black;
	}
}

@keyframes fade1 {

	0% {
		opacity: 0;
	}

	15% {
		opacity: 1;
	}

}

@keyframes fade2 {
	0% {
		opacity: 0;
	}

	5% {
		opacity: 0;
	}

	20% {
		opacity: 1;
	}
}

@keyframes fade3 {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 0;
	}

	25% {
		opacity: 1;
	}
}

@keyframes fade4 {
	0% {
		opacity: 0;
	}

	15% {
		opacity: 0;
	}

	30% {
		opacity: 1;
	}
}

@keyframes fade5 {
	0% {
		opacity: 0;
	}

	20% {
		opacity: 0;
	}

	35% {
		opacity: 1;
	}
}

@keyframes fade6 {
	0% {
		opacity: 0;
	}

	25% {
		opacity: 0;
	}

	40% {
		opacity: 1;
	}
}

@keyframes fade7 {
	0% {
		opacity: 0;
	}

	30% {
		opacity: 0;
	}

	45% {
		opacity: 1;
	}
}

@keyframes fade8 {
	0% {
		opacity: 0;
	}

	35% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}
}

/*.mouvements-title span {
	animation-timing-function: ease-in-out;
	animation-duration: 2000ms;
	animation-fill-mode: backwards;
	animation-iteration-count: infinite;
}

.mouvements-title span:nth-child(2) {
	text-decoration: underline;
	animation-name: underline;
}

.mouvements-title span:nth-child(3) {
	animation-name: fade1;
}

.mouvements-title span:nth-child(4) {
	animation-name: fade2;
}

.mouvements-title span:nth-child(5) {
	animation-name: fade3;
}

.mouvements-title span:nth-child(6) {
	animation-name: fade4;
}

.mouvements-title span:nth-child(7) {
	animation-name: fade5;
}

.mouvements-title span:nth-child(8) {
	animation-name: fade6;
}

.mouvements-title span:nth-child(9) {
	animation-name: fade7;
}

.mouvements-title span:nth-child(10) {
	animation-name: fade8;
}


@keyframes underline {
	0% {
		text-decoration-color: black;
	}

	15% {
		text-decoration-color: transparent;
	}

	85% {
		text-decoration-color: transparent;
	}

	100% {
		text-decoration-color: black;
	}
}

@keyframes fade1 {
	0% {
		opacity: 0;
	}

	0% {
		opacity: 0;
	}

	15% {
		opacity: 1;
	}

	85% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fade2 {
	0% {
		opacity: 0;
	}

	5% {
		opacity: 0;
	}

	20% {
		opacity: 1;
	}

	80% {
		opacity: 1;
	}

	95% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fade3 {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 0;
	}

	25% {
		opacity: 1;
	}

	75% {
		opacity: 1;
	}

	90% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fade4 {
	0% {
		opacity: 0;
	}

	15% {
		opacity: 0;
	}

	30% {
		opacity: 1;
	}

	70% {
		opacity: 1;
	}

	85% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fade5 {
	0% {
		opacity: 0;
	}

	20% {
		opacity: 0;
	}

	35% {
		opacity: 1;
	}

	65% {
		opacity: 1;
	}

	80% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fade6 {
	0% {
		opacity: 0;
	}

	25% {
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	60% {
		opacity: 1;
	}

	75% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fade7 {
	0% {
		opacity: 0;
	}

	30% {
		opacity: 0;
	}

	45% {
		opacity: 1;
	}

	55% {
		opacity: 1;
	}

	70% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fade8 {
	0% {
		opacity: 0;
	}

	35% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	50% {
		opacity: 1;
	}

	65% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}*/
