/*
Theme Name: Geometry
Description: A theme by Geometry - Brussels - Visit us at http://www.geometry.be
Author: Geometry
Version: 1.0
*/

/* CSS RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
/* END CSS RESET */

:root {
	--max-width: 1350px;
}

@font-face {
    font-family: 'InstrumentSerifKarmenCamina';
    src: url('fonts/InstrumentSerifKarmenCamina.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body {
	background: #000000;
	color: #ffffff;
}

body,
input,
textarea,
select {
	font-family: 'InstrumentSerifKarmenCamina';
	font-size: 27px;
	letter-spacing: 0;
	line-height: 1.2em;
}

input,
textarea,
select {
	color: #000000;
	width: calc(100% - 1em);
	margin: 0.125em 0;
}

form {
	position: relative;
	display: block;
}

textarea {
	height: 4em;
}

input[type=checkbox],
input[type=submit] {
	width: auto;
	margin: 0.25em 0;
}

.wpcf7-list-item {
	margin: 0 0.5em 0 0 !important;
}

input[type=checkbox] {
	margin-right: 0.25em;
}

#content,
nav {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
}

#header {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.layer {
	position: absolute;
	top: 0;
	width: 100%;
	height: 56.25%;
    display: block;
}

#slide-title {
	position: relative;
	overflow: hidden; 
	z-index: 100;
}

#slide-title::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

#slide-title > * {
	position: absolute; 
	top: 100%; 
	left: 0;  
	width: 100%; 
	height: 100%;
	animation: 20s autoplaytitle infinite ease-in-out;
}

@keyframes autoplaytitle {
	0% {top: 100%}
	2% {top: 0%}
	25% {top: 0%}
	27% {top: -100%}
	100% {top: -100%}
}

#slide-title > *:nth-child(1) {animation-delay: 0s}
#slide-title > *:nth-child(2) {animation-delay: 5s}
#slide-title > *:nth-child(3) {animation-delay: 10s}
#slide-title > *:nth-child(4) {animation-delay: 15s}

#slide-title img {
	width: 100%;
	height: auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

#slide-shape {
	position: relative;
	overflow: hidden; 
	z-index: 50;
}

#slide-shape::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

#slide-shape > * {
	visibility: hidden; 
	position: absolute;
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
	animation: 10s autoplayshape infinite;
}

@keyframes autoplayshape {
	0% {visibility: visible}
	20% {visibility: hidden}
}

#slide-shape > *:nth-child(1) {animation-delay: 0s}
#slide-shape > *:nth-child(2) {animation-delay: 2s}
#slide-shape > *:nth-child(3) {animation-delay: 4s}
#slide-shape > *:nth-child(4) {animation-delay: 6s}
#slide-shape > *:nth-child(5) {animation-delay: 8s}

#slide-shape img {
	width: 100%;
	height: auto;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}

#slide-bg {
	position: relative;
	overflow: hidden; 
	z-index: 0;
}

#slide-bg::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

#slide-bg > * {
	position: absolute;
	animation: 25s autoplaybg infinite linear;
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
	opacity: 0.0;
}

@keyframes autoplaybg {
	0% {opacity: 0}
	20% {opacity: 1}
	40% {opacity: 0}
	100% {opacity: 0}
}

#slide-bg > *:nth-child(1) {animation-delay: 0s}
#slide-bg > *:nth-child(2) {animation-delay: 5s}
#slide-bg > *:nth-child(3) {animation-delay: 10s}
#slide-bg > *:nth-child(4) {animation-delay: 15s}
#slide-bg > *:nth-child(5) {animation-delay: 20s}

#slide-bg img,
#header {
	width: 100%;
	height: auto;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}

/* MENU */

#loading {
	opacity: 0;
}

.displayNav {
	top: 0px;
	transition: 0.5s;
	opacity: 1;
}

nav {
	position: fixed;
	width: 100%;
	top: -10vh;
	height: 10vh;
	transition: 0.5s;
	opacity: 0;
	z-index: 1000000000;
	left: 50%;
	transform: translateX(-50%);
}

#menu.sticky {
	position: fixed;
	top: 0;
	z-index: 10000;
	width: 100%;
	max-width: var(--max-width);
}

#nav {
	background-image: url(img/menu_bg.png);
	background-size: auto 100%;
	background-repeat: repeat-x;
	background-position: center bottom;
	overflow: hidden;
}

#nav li {
    margin: 0;
    padding: 0;
}

#nav li img {
	height: auto;
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	float: left;
    margin: 0;
    padding: 0;
    border: 0;
}

#nav li.karmen img {
	width: calc(258% / 14.46);
}

#nav li.edito img {
	width: calc(110% / 14.46);
	background-image: url(img/menu_edito.png);
}

#nav li.edito.current img,
#nav li.edito:hover img {
	background-image: url(img/menu_edito_current.png);
}

#nav li.programmation img {
	width: calc(231% / 14.46);
	background-image: url(img/menu_programmation.png);
}

#nav li.programmation.current img,
#nav li.programmation:hover img {
	background-image: url(img/menu_programmation_current.png);
}

#nav li.fonctionnement img {
	width: calc(231% / 14.46);
	background-image: url(img/menu_fonctionnement.png);
}

#nav li.fonctionnement.current img,
#nav li.fonctionnement:hover img {
	background-image: url(img/menu_fonctionnement_current.png);
}

#nav li.infos-pratiques img {
	width: calc(217% / 14.46);
	background-image: url(img/menu_infos-pratiques.png);
}

#nav li.infos-pratiques.current img,
#nav li.infos-pratiques:hover img {
	background-image: url(img/menu_infos-pratiques_current.png);
}

#nav li.contact img {
	width: calc(141% / 14.46);
	background-image: url(img/menu_contact.png);
}

#nav li.contact.current img,
#nav li.contact:hover img {
	background-image: url(img/menu_contact_current.png);
}

#nav li.camina img {
	width: calc(258% / 14.46);
}

.bg {
	position: absolute;
	overflow: hidden; 
	top: 0;
	bottom: 0;
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}

#programmation,
#billetterie,
#edito,
#fonctionnement,
#infos-pratiques,
#contact {
	position: relative;
	overflow: hidden; 
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}

#programmation::after,
#edito::after,
#fonctionnement::after,
#infos-pratiques::after,
#contact::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.bg-text {
    position: absolute;
    top: 10%; 
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1000;
}

.slide-edito,
.slide-fonctionnement,
.slide-infos-pratiques,
.slide-contact {
    position: absolute;
    top: 9%; 
    bottom: 9%;
    left: 50%;
    transform: translateX(-50%);
    width: 82%;
    background-color: #000000;
}

.slide-edito .carousel-cell,
.slide-fonctionnement .carousel-cell,
.slide-infos-pratiques .carousel-cell,
.slide-contact .carousel-cell {
    width: 100%;
    height: 100%;
}

.flickity-page-dots {
	bottom: 20px;
	z-index: 10000;
}

.flickity-page-dots .dot {
	opacity: 1;
	width: 24px;
	height: 24px;
	margin: 0 10px;
	position: relative;
	box-sizing: border-box;
	color: #FFF;
	background: #000000;
	background-clip: padding-box; /* !importanté */
	border: solid $border transparent; /* !importanté */
	border-radius: 50%;
	&:before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -3px; /* taille du border */
    border-radius: inherit;
    background: linear-gradient(to right, white, black);
  }
}

.flickity-page-dots .dot.is-selected {
	background: #ffffff;
}

.red .flickity-page-dots .dot {
	&:before { background: linear-gradient(to right, white, #ff0707); }
}

.violet .flickity-page-dots .dot {
	&:before { background: linear-gradient(to right, white, #b701b6); }
}

.text {
	padding: 0.5em;
}

.red .text,
.red .text > * {
    background: linear-gradient(0deg, #ff0707, white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.violet .text,
.violet .text > * {
    background: linear-gradient(0deg, #b701b6, white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.slide-programmation {
    position: absolute;
    top: 0; 
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.slide-programmation .carousel-cell {
    background-color: #000000;
    width: auto;
    height: 100%;
}

.slide-programmation img {
	height: 100%;
	width: auto;
}

.left {
	width: calc(50% - 0.25em);
	padding-right: 0.25em;
	float: left;
}

.right {
	width: calc(50% - 0.25em);
	padding-left: 0.25em;
	float: right;
}

#mc-embedded-subscribe {
	background-color: transparent;
	background-image:url(img/newsletter_send.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	width: calc(165% / 14.46);
	height: 40px;
	color: transparent;
	cursor: pointer;
	border: 0;
	margin: 0;
	padding: 0;
}

input#mce-EMAIL {
	background-color: transparent;
	color: white;
	border: 2px solid white;
	width: calc(100% - 15px);
}

.mc-field-group {
	float: left;
}

#newsletter-center {
	text-align: center;
}

.gradient {
	position: absolute;
	overflow: hidden; 
	top: 0;
	bottom: 0;
	width: 100%;
	background-size: 1em;
	background-repeat: repeat-x;
	background-position: center bottom;
	z-index: 500;
}

.wpcf7 form .wpcf7-response-output {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#newsletter {
    margin-right: 10px; /* Espace entre les éléments, ajustez si nécessaire */
    width: calc(324% / 14.46);
}

.mc-field-group {
    margin-right: 10px; /* Espace entre les éléments, ajustez si nécessaire */
}

#mce-EMAIL {
    width: 200px; /* Ajustez la largeur du champ email selon vos besoins */
}

#mc-embedded-subscribe {
    padding: 10px 20px; /* Ajustez le padding du bouton selon vos besoins */
}

#programmation .flickity-page-dots {
	bottom: 40px;
}

#billetterie img {
	height: auto;
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
    margin: 0 auto;
    padding: 0;
    border: 0;
	width: calc(174% / 14.46);
	background-image: url(img/billetterie.png);
}

#billetterie a:hover img {
	background-image: url(img/billetterie_current.png);
}

#logos img {
	width: 100%;
	height: auto;
	border: 0;
	display: block;
}































@media only screen and (max-width : 1250px) {

body,
input,
textarea,
select {
	font-size: 23px;
	line-height: 1.2em;
}

}

@media only screen and (max-width : 1100px) {

body,
input,
textarea,
select {
	font-size: 21px;
	line-height: 1.2em;
}

}

@media only screen and (max-width : 1000px) {

body,
input,
textarea,
select {
	font-size: 19px;
	line-height: 1.2em;
}

}

@media only screen and (max-width : 900px) {

body,
input,
textarea,
select {
	font-size: 17px;
	line-height: 1.2em;
}

}

@media only screen and (max-width : 800px) {

body,
input,
textarea,
select {
	font-size: 15px;
	line-height: 1.2em;
}

}

@media only screen and (max-width : 700px) {

li.karmen,
li.camina {
	display: none;
}

#programmation::after {
    padding-top: 100%;
    display: block;
    content: '';
}

#edito::after,
#fonctionnement::after,
#infos-pratiques::after,
#contact::after {
    padding-top: 80vh;
    display: block;
    content: '';
}

.bg-text {
  top: 5%;
  bottom: 5%;
  width: 90%;
}

#nav li.edito img {
	width: calc(110% / 9.3);
}

#nav li.programmation img {
	width: calc(231% / 9.3);
}

#nav li.fonctionnement img {
	width: calc(231% / 9.3);
}

#nav li.infos-pratiques img {
	width: calc(217% / 9.3);
}

#nav li.contact img {
	width: calc(141% / 9.3);
}

#billetterie img {
	width: calc(174% / 9.3);
}

#newsletter {
    width: calc(324% / 9.3);
}

#mc-embedded-subscribe {
	width: calc(165% / 9.3);
}

.flickity-page-dots .dot {
	width: 16px;
	height: 16px;
}

.left {
	width: 100%;
	padding-right: 0;
	float: none;
}

.right {
	width: 100%;
	padding-left: 0;
	float: none;
}

.slide-infos-pratiques .right {
	margin-top: 1em;
}

textarea {
	height: 8em;
}

}