@font-face {
	font-family: "Circula";
	src: url('../../public/css/circula.otf');
}

*
{
	box-sizing: border-box;
}

html, body
{
	margin: 0;
	padding: 0;
	font-size: 100%;
	min-height: 100%;
	font-family: Tahoma, Helvetica, sans-serif;
	height: 100%;
	
}

.theme-2, .theme-1
{
	color: #f3f3f3;
	background: #333;
	min-height: 100%;
}

.bg-1
{
	background: #FD93B7;
}

.color-1
{
	color: #FD93B7;
}

.bg-2
{
	background: #6040a5;
}

.color-2
{
	color: #6040a5;
}

.contrast, a.contrast, .theme-1 a.contrast
{
	color: #f3f3f3;
}

.shine
{
	color: #f3f3f3;
	text-shadow: 2px 2px 2px #666;
}

.font-2
{
	font-family: "Circula", sans-serif;
	letter-spacing: .1em;
}

.icon32
{
	display: inline-block;
	width: 32px;
	height: 32px;
}

.icon64
{
	display: inline-block;
	width: 64px;
	height: 64px;
}

.clock, .insta, .facebook, .linkedin, .twitter, .mail, .locked, .unlocked, .download, .edit, .rm, .tiktok
{
	background: url('../../public/images/css/icons/icons.png') top left no-repeat;
}

.linkedin.icon32 { background-position: 0px 0; }
.clock.icon32 { background-position: -32px 0; }
.mail.icon32 { background-position: -64px 0; }
.facebook.icon32 { background-position: -96px 0; }
.twitter.icon32 { background-position: -128px 0; }
.insta.icon32 { background-position: -160px 0; }
.locked.icon32 { background-position: -192px 0; }
.unlocked.icon32 { background-position: -224px 0; }
.download.icon32 { background-position: -256px 0; }
.edit.icon32 { background-position: -288px 0; }
.rm.icon32 { background-position: -320px 0; }
.tiktok.icon32 { background-position: -352px 0; }
.linkedin.icon64 { background-position: 0px -32px; }
.clock.icon64 { background-position: -64px -32px; }
.mail.icon64 { background-position: -128px -32px; }
.insta.icon64 { background-position: -192px -32px; }
.twitter.icon64 { background-position: -256px -32px; }
.facebook.icon64 { background-position: -320px -32px; }
.tiktok.icon64 { background-position: -384px -32px; }

.g-recaptcha > div
{
	margin: auto;
}

.box
{
	margin: 0 120px;
}

.hidden
{
	display: none;
}

.message
{
	background: #FCF6AC;
	border-radius: 4px;
	padding: 4px;
	margin: 10px;
	color: #B05473;
}

body > header, body > header > div, body > header #diaporama, body > header #title
{
	height: 100%;
}

header a
{
	text-decoration: none;
}

#menu
{
	position: absolute;
	width: 100%;
	top: -50px;
	z-index: 10;
	background: transparent;
}

#menu.scrolling, #submenu
{
	position: fixed;
	top: 0px;
	background: #111;
	transition: background 1s ease 0s;
	transition: top 1s ease 0s;
	border-bottom: 2px solid #B05473;
	z-index: 250;
}

#menu ul, #submenu ul
{
	list-style: inside none;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	position: relative;
	top: 100px;
}

#menu li, #submenu li
{
	margin: 0 10px;
	font-size: 24px;
	color: #f3f3f3;
}

#menu a, #submenu a
{
	color: #f3f3f3;
	text-decoration: none;
}

#menu a:hover, #menu a.active, #submenu a:hover
{
	color: #f3f3f3;
	text-decoration: underline;
}

#menu .onscroll, #submenu .onscroll
{
	display: none;
	flex-grow: 1;
}

#menu.scrolling .onscroll, #submenu .onscroll
{
	display: inherit;
}

#menu.scrolling ul, #submenu ul
{
	top: 0;
}

#submenu
{
	width: 100%;
}

section
{
	padding-top: 60px;
}

section > div
{
	padding-top: 10px;
}

#horaires
{
	position: absolute;
	top: 0;
	width: 100%;
	height: 40px;
	padding: 4px;
	background: #B05473;
	box-shadow: 0 2px 2px #333;
}

#horaires.dark-bg-2
{
	background: #432D73;
}

#horaires > div
{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

#horaires ul, #social ul
{
	list-style: outside none;
	padding: 0;
	margin: 0;
}

.social a
{
	text-decoration: none;
}

.social a:hover, #social a:hover
{
	opacity: 0.75;
}

#horaires p
{
	margin: 0;
	line-height: 32px;
}

#horaires li
{
	display: inline-block;
}

#horaires a
{
	display: inline-block;
	border-left: 2px solid #f3f3f3;
	margin-left: 8px;
	padding-left: 8px;
}

#horaires a:hover
{
	border-left-color: transparent;
}

#social
{
	position: fixed;
	top: 0;
	bottom: 0;
	right: -250px;
	width: 80px;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	z-index: 50;
	transition: right 1s ease 0s;
}

#social.scrolling
{
	right: 0px;
	transition: right 1s ease 0s;
}

#social nav
{
	background: #666;
	padding: 8px;
	flex: 0 0 auto;
	border: 1px solid #111;
	border-right: 0;
	border-radius: 4px 0 0 4px;
}

#top
{
	position: relative;
}

#diaporama
{
	background: url('../../public/images/css/hd2.webp') top left no-repeat;
	background-size: cover;
	position: relative;
	display: flex;
}

#diaporama.bg-nowebp
{
	background: url('../../public/images/css/hd2.jpg') top left no-repeat;
}

#diaporama div
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.75);
}

#title
{
	display: flex;
	flex-direction: column;
	width: 25%;
	position: absolute;
	top: 0;
	right: 120px;
	align-items: center;
	justify-content: center;
}
	
#title nav
{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	width: 100%;
}

#title nav a
{
	flex-basis: 175px;
}

a.button, button
{
	border: 2px solid #333;
	border-radius: 4px;
	padding: 4px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	line-height: 30px;
}

a.button:hover, button:hover
{
	cursor: pointer;
	text-decoration: underline;
}

.theme-2 a.button, .theme-1 a.button
{
	border-color: #f3f3f3;
}

a.button.contrast, button
{
	border: 2px solid #f3f3f3;
}

button
{
	line-height: inherit;
	color: #f3f3f3;
	font-variant: small-caps;
	background: #333;
}

button:hover
{
	cursor: pointer;
}

button[disabled], input[disabled]
{
	cursor: default;
	background: #333;
	color: #666;
	border-color: #666;
}

form input, form textarea
{
	font-family: Tahomas, Helvetica, sans-serif;
	font-size: 1em;
	border: solid 2px #B05473;
	border-radius: 4px;
	padding: 4px 8px;
	margin: 4px;
	display: inline-block;
}

.g-recaptcha
{
	margin: 4px 0;
}

form input.error, form textarea.error, .g-recaptcha.error > div
{
	border-color: red;
	border-style: dotted;
}

h1
{
	font-size: 60px;
	text-align: center;
	line-height: 0.75;
	text-shadow: 4px 2px #333;
}

h1 .sub
{
	font-size: 45px;
}

h2, h3
{
	text-align: center;
	padding: 10px 0;
	font-size: 30px;
	margin: 0;
}

h3
{
	font-size: 28px;
}

.theme-2 a, .theme-1 a
{
	color: #f0f0fc;
}

.line
{
	display: inline-block;
	width: 150px;
	border-top: 2px solid #000;
	height: 10px;
}

.line.contrast
{
	border-color: #f3f3f3;
}

.line.color-1
{
	border-color: #FD93B7;
}

.line.color-2
{
	border-color: #6040a5;
}

#bio aside
{
	margin: 0 10px 10px 0;
	border: solid 2px #f3f3f3;
	border-radius: 4px;
	line-height: 0;
}

#studiopics
{
	display: flex;
	flex-flow: column wrap;
	height: 620px;
	justify-content: space-between;
	align-content: center;
}

#studiopics img
{
	min-width: 300px;
	max-width: 400px;
	margin: 0 5px;
}

#studiopics .wide
{
	min-width: 300px;
	max-width: 465px;
	flex-grow: 2;
}

#studiopics > div
{
	width: 400px;
	max-height: 300px;
	flex-grow: 1;
	margin: 0 5px;
	padding: 10px;
}

.topic
{
	border: 2px solid #f3f3f3;
	border-radius: 4px;
}

.topic.item-theme-2
{
	background: #111;
	border-radius: 16px;
}

.topic > div
{
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-evenly;
	height: 100%;
}

#studiopics p
{
	text-align: justify;
}

#studio #montage
{
	width: 465px;
	height: 261px;
	margin: 10px auto;
}
	

/* PLAYLIST */
.playlist
{
	display: flex;
	flex-flow: row wrap;
	margin-bottom: 40px;
	justify-content: center;
}

.media
{
	border: 2px solid #f3f3f3;
	width: 400px;
	margin: 5px;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background: black;
}

.media.active
{
	border-color: #FD93B7;
}

.media .player
{
	position: relative;
	height: 223px;
	overflow: hidden;
}

.media.video .player .icon
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.5;
	background: url('../../public/images/css/icons/movie.png') center center no-repeat;
}

.media.audio .player
{
	background: url('../../public/images/css/icons/audio.png') center center no-repeat;
	display: flex;
	flex-flow: column nowrap;
	opacity: 0.5;
}

.media.audio:hover .player, .media.video .player .icon:hover
{
	opacity: 0.75;
}

.media.audio.active
{
	opacity: 1;
}

.media.audio audio
{
	flex-grow: 1;
}

.media.audio canvas
{
	flex-grow: 1;
}

.media video, .media iframe
{
	width: 100%;
	height: 100%;
}

.media p
{
	padding: 10px 5px;
	background: #333;
	margin: 0;
	box-shadow: 0 2px 2px #666;
	z-index: 100;
	position: absolute;
	top: -80px;
	width: 100%;
}

.media .cover
{
	position: absolute;
	top: 0;
	z-index: 0;
}

.media:hover p
{
	top: 0px;
	transition: top 0.4s ease; 
}

.dlfile
{
	display: flex;
	flex-flow: row nowrap;
}

.dlfile a
{
	background: rgba(0,0,0,0.6);
}

/* REF */
#reflist
{
	position: relative;
}

#reflist > div
{
	position: relative;
	width: 100%;
}

#reflist ul
{
	display: flex;
	list-style: outside none;
	flex-flow: row nowrap;
	width: 100%;
	padding: 10px 0;
	align-items: center;
}

#reflist li
{
	margin: 10px;
}

#reflist img
{
	min-width: 150px;
	max-width: 150px;
}


/* CONTACT */
#contact form
{
	width: 50%;
	margin: auto;
	padding: 10px 0;
	text-align: center;
	
}

/* FOOTER */
.theme-2 footer, .theme-1 footer
{
	background: #666;
}

.theme-1 footer
{
	background: #333;
}

#contact .item-theme-1
{
	background: #111;
}

footer
{
	padding-top: 60px;
	padding-bottom: 100px;
}

footer > div
{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-end;
}

footer ul
{
	list-style: outside none;
	padding-left: 8px;
	margin: 0;
}

footer li
{
	padding: 2px 0;
}

footer h2
{
	text-align: left;
	font-size: 24px;
}


/* COOKIES */
#cookieprivacy
{
	position: fixed;
	bottom: 0;
	padding: 0 10px;
	background: orange;
	border: 2px solid black;
	width: 100%;
	font-size: 12px;
	z-index: 100;
	color: #333;
}

#cookieprivacy a
{
	color: #666;
}