@font-face {
    font-family: myFirstFont;
    src: url("../fonts/Montserrat-Regular.otf");	
}

@font-face {
    font-family: myFirstFont;
    src: url("../fonts/Montserrat-SemiBold.otf");
	font-weight: bold;
}

@font-face {
    font-family: myTitleFont;
    src: url("../fonts/Gobold-Extra2.otf");
	font-weight: bold;
}

@font-face {
    font-family: mySlogan;
    src: url("../fonts/Amalfi.ttf");
}


.btnMembreMenu{font-size: 0.8em; letter-spacing: 0.05em; text-transform: uppercase;}
.header-before{opacity: 0.2; -webkit-transition: 400ms ease; transition: 400ms ease;}
.header-after{opacity: 1; border-bottom: solid 1px #d0cbc6;  box-shadow: 2px 0px 10px 0px #3281a9; -webkit-transition: 400ms ease; transition: 400ms ease;}
.titreCls{font-family: mySlogan; font-size:0.9em; letter-spacing: 0.1em;}
.titre1 {font-family: myTitleFont; letter-spacing: 0em; font-size: 2em; font-weight: bold;}
.titre2 {font-family: myTitleFont; letter-spacing: 0em; font-size: 1.6em; font-weight: bold;}
.titre3 {font-family: myFirstFont; letter-spacing: 0em; font-size: 1.4em; font-weight: bold;}
.titre-section{font-family: myTitleFont2; font-size: 2em; letter-spacing: -0.05em; text-transform: uppercase;}
.titre-art{font-family: myTitleFont2; font-size: 1.5em; letter-spacing: -0.02em; text-transform: uppercase;}
.clTitre{font-size:0.9em; font-weight:bold; letter-spacing:0.05em; text-transform: uppercase;}
.btn-link{text-decoration: none;}
.btn-link:hover {text-decoration:none;}
.btn-link:focus {text-decoration:none; outline:none; outline-style: none; -webkit-box-shadow: none;  box-shadow: none;}
.btn-warning{background-color:#F1F1F1; color:#292929; border:solid 2px #ff6666; border-radius: 0px;}
.btn-warning:hover{color:#FFF; background-color:#ff6666; border:solid 2px #292929;}
.btn-warning:focus{color:#FFF; background-color:#ff6666; border:solid 2px #292929; text-decoration:none; outline:none; outline-style: none; -webkit-box-shadow: none;  box-shadow: none;}
.clArtName{font-size:1.2em; letter-spacing: 0.1em;	}
.clAreaName{font-size:0.7em; font-weight: bold; letter-spacing: 0.25em; text-transform: uppercase;}
.clArtwName{font-size:0.8em; letter-spacing: 0.1em; text-transform: lowercase;}
.clArtwTitle{font-size:0.9em; letter-spacing: 0em;}
.box{ -webkit-transition: 300ms ease; transition: 300ms ease}
.box:hover{box-shadow: 2px 0px 10px 0px #666666; -webkit-transition: 300ms ease; transition: 300ms ease}
.cl-btn-footer{font-size:0.85em; letter-spacing: 0.15em; text-transform: uppercase;}
.cl-slogan{font-family: mySlogan; font-size:2em; text-shadow: 2px 2px rgba(33,33,33,.7); color:#FFFFFF; line-height: 2em;}
.thumbnail{
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
}
.thumbnail:hover {
    transform: scale(1.05);
}

.blurClass {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
  -webkit-transition: 800ms ease;
  transition: 800ms ease;
}
.bckBlur {
 	backdrop-filter: blur(10px);
}
.bwimg{filter: grayscale(100%); -webkit-filter: grayscale(100%);}


/*--------MENU HAMBURGER-------------------*/
ul { position: relative; } ul li { list-style: none; text-align: center; } .menu_cls ul li a { font-family: myTitleFont; color: #FFFFFF; padding: 5px 20px; text-decoration: none; font-size: 2em; display: inline-flex; font-weight: 700; letter-spacing: 0.05em; transition: 0.5s; } .menu_cls ul:hover li a { color: #0002; } .menu_cls ul li:hover a { color: #000; background: rgba(255,255,255,1); } .menu_cls ul li a:before { font-family: myTitleFont; content: ''; position: absolute; top: 50%; left: 40%; transform: translate(-50%,-50%); display: flex; justify-content: center; align-items: center; font-size: 5em; color: rgba(0,0,0,.1); border-radius: 50%; z-index: -1; opacity: 0; font-weight: 900; text-transform: uppercase; letter-spacing: 500px; transition: letter-spacing 0.5s,left 0.5s; } .menu_cls ul li a:hover:before { content: attr(data-text); opacity: 1; left: 50%; letter-spacing: 10px; width: 1800px; height: 1800px; } .menu_cls ul li:nth-child(6n+1) a:before { background: #663366; } .menu_cls ul li:nth-child(6n+2) a:before { background: #663366; } .menu_cls ul li:nth-child(6n+3) a:before { background: #663366; } .menu_cls ul li:nth-child(6n+4) a:before { background: #663366; } .menu_cls ul li:nth-child(6n+5) a:before { background: #663366; } .menu_cls ul li:nth-child(6n+6) a:before { background: #663366; } .menu_cls ul li:nth-child(6n+7) a:before { background: #663366; }


.hamburger .line{
  width: 50px;
  height: 5px;
  background-color: #FFFFFF;
	border-radius:2px;
  display: block;
  margin: 8px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hamburger:hover{
  cursor: pointer;
}

#hamburger-6.is-active{
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#hamburger-6.is-active .line:nth-child(2){
  width: 0px;
}

#hamburger-6.is-active .line:nth-child(1),
#hamburger-6.is-active .line:nth-child(3){
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

#hamburger-6.is-active .line:nth-child(1){
  -webkit-transform: translateY(13px);
  -ms-transform: translateY(13px);
  -o-transform: translateY(13px);
  transform: translateY(13px);
}

#hamburger-6.is-active .line:nth-child(3){
  -webkit-transform: translateY(-13px) rotate(90deg);
  -ms-transform: translateY(-13px) rotate(90deg);
  -o-transform: translateY(-13px) rotate(90deg);
  transform: translateY(-13px) rotate(90deg);
}


/*---------FORMS------------------*/

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #359b87;
}

input:focus + .slider {
  box-shadow: 0 0 1px #359b87;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 30px;
}

.slider.round:before {
  border-radius: 50%;
}
/*-----*/

.box-shadow-radio {
    appearance: none;
    margin: 0;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;

    /* White border = gap between dot and ring */
    border: 0.15em solid #FFF;

    /* A box-shadow with no offset/blur = the outer ring */
    box-shadow: 0 0 0 0.1em #999;

    /* Center the ::before dot */
    display: grid;
    place-content: center;
}

.box-shadow-radio:checked {
    box-shadow: 0 0 0 0.1em #663366;
}

/* The checked dot (hidden by default) */
.box-shadow-radio::before {
    content: "";
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;

    /* Using box-shadow instead of background so it prints */
    box-shadow: inset 1em 1em #663366;

    /* Fallback for Windows High Contrast Mode */
    background-color: CanvasText;
}

.box-shadow-radio:checked::before {
    transform: scale(1);
}

/* Keyboard focus ring */
.box-shadow-radio:focus-visible {
    outline: max(2px, 0.1em) solid currentColor;
    outline-offset: max(2px, 0.1em);
}



/*Range Reset*/
input[type="range"] {
   -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 15rem;
}

/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
   background-color: #663366;
   border-radius: 0.5rem;
   height: 0.5rem;  
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
   appearance: none;
   margin-top: -12px; /* Centers thumb on the track */

   /*custom styles*/
   background-color: #efe7ee;
   height: 2rem;
   width: 2rem;
	border-radius: 50%;
	border: 1px solid #663366;
}

input[type="range"]:focus::-webkit-slider-thumb {   
  outline: 3px solid #663366;
  outline-offset: 0.125rem; 
}

/******** Firefox styles ********/
/* slider track */
input[type="range"]::-moz-range-track {
   background-color: #663366;
   border-radius: 0.5rem;
   height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
  	border: 1px solid #663366; /*Removes extra border that FF applies*/
   border-radius: 50%; /*Removes default border-radius that FF applies*/

   /*custom styles*/
   background-color: #efe7ee;
   height: 2rem;
   width: 2rem;
}

input[type="range"]:focus::-moz-range-thumb {
  outline: 3px solid #663366;
  outline-offset: 0.125rem; 
}




form .form-row .input-data{
  width: 100%;
  height: 40px;
  margin: 0 20px;
  position: relative;
}
form .form-row .textarea{
  height: 70px;
}
.input-data input,
.textarea textarea,
.input-data select,
.input-data date,
.input-data tel,
.input-data email{
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  font-size: 17px;
  border-bottom: 2px solid rgba(51,51,51, 0.25);
  outline:none;
  outline-style: none;
  border-radius: 0px;
  background-color: transparent;
  color: #000;
}
.input-data input:focus ~ label, .textarea textarea:focus ~ label, .input-data select:focus ~ label, .input-data date:focus ~ label, .input-data tel:focus ~ label, .input-data email:focus ~ label,
.input-data input:valid ~ label, .textarea textarea:valid ~ label, .input-data select:valid ~ label, .input-data date:valid ~ label, .input-data tel:valid ~ label, .input-data email:valid ~ label{
  transform: translateY(-20px);
  font-size: 14px;
  color: #660066;
}
.textarea textarea{
  resize: none;
  padding-top: 10px;
}
.input-data label{
  position: absolute;
  pointer-events: none;
  bottom: 10px;
  font-size: 16px;
  transition: all 0.3s ease;
  color: #990099;
}
.textarea label{
  width: 100%;
  bottom: 40px;
  background: transparent;
}
.input-data .underline{
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 100%;
}
.input-data .underline:before{
  position: absolute;
  content: "";
  height: 2px;
  width: 100%;
  background: #990099;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.input-data input:focus ~ .underline:before,
.input-data input:valid ~ .underline:before,
.textarea textarea:focus ~ .underline:before,
.textarea textarea:valid ~ .underline:before,
.input-data select:focus ~ .underline:before,
.input-data select:valid ~ .underline:before,
.input-data date:focus ~ .underline:before,
.input-data date:valid ~ .underline:before,
.input-data tel:focus ~ .underline:before,
.input-data tel:valid ~ .underline:before,
.input-data email:focus ~ .underline:before,
.input-data email:valid ~ .underline:before{
  transform: scale(1);
}
.submit-btn .input-data{
  border-radius: 10px;
  overflow: hidden;
  height: 45px!important;
  width: 25%!important;
  min-width: 140px;
}
.submit-btn .input-data .inner{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  background: -webkit-linear-gradient(right, #996699, #660066, #996699, #660066);
  transition: all 0.4s;
}
.submit-btn .input-data:hover .inner{
  left: 0;
}
.submit-btn .input-data input{
  background: none;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}


.message {
  display:none;
  background: #FFFFFF;
  color: #000;
  position: relative;
  padding: 5px;
  margin-top: 5px;
  border: solid 2px #663366;
}

.message span {
  padding: 5px 5px;
  font-size: 0.9em;
}


/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -35px;
}

/* Add a red text color and an "x" icon when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -35px;
}


.inpCls{border:0px; border-bottom:solid 1px #292929; height: 30px; background-color:transparent; color: #006666; outline:none; border-radius:0px; font-size: 1em; width: 100%; padding-left: 10px; }
.inpCls:focus{border:solid 1px #292929; outline:none; outline-style: none; -webkit-box-shadow: none;  box-shadow: none; font-size: 1.1em;}
.inpCls::placeholder{
  color:  #006666;
  opacity: 1; /* Firefox */
}

.inpSearchCls{border:0px; border:none; height: 40px; background-color:transparent; color: #000; outline:none; border-radius:0px; font-size: 1.3em; width: 100%; padding-left: 10px; }
.inpSearchCls:focus{border:none; outline:none; outline-style: none; -webkit-box-shadow: none;  box-shadow: none; font-size: 1.3em;}




.selectCls{border:0px; border-bottom:solid 1px #292929; height: 30px; background-color:transparent; color: #006666; outline:none; border-radius:0px; font-size: 1em; width: 100%; padding-left: 10px; }
.selectCls:focus{border:solid 1px #292929; outline:none; outline-style: none; -webkit-box-shadow: none;  box-shadow: none; font-size: 1.1em;}

.txtareaCls{border:solid 1px #292929; height: 150px; background-color:transparent; color: #666666; outline:none; border-radius:0px; font-size: 1em; width: 100%; padding-left: 10px; }
.txtareaCls:focus{outline:none; outline-style: none; -webkit-box-shadow: none;  box-shadow: none; font-size: 1.1em;}
.txtareaCls::placeholder{
  color:  #006666;
  opacity: 1; /* Firefox */
}

.txtareaClsCom{border:solid 1px #FFFFFF; height: 70px; background-color:transparent; color: #FFFFFF; outline:none; border-radius:0px; font-size: 1em; width: 100%; padding-left: 10px; }
.txtareaClsCom:focus{outline:none; outline-style: none; -webkit-box-shadow: none;  box-shadow: none; font-size: 1.1em;}
.txtareaClsCom::placeholder{
  color:  #006666;
  opacity: 1; /* Firefox */
}
.inpChkb{border:solid 1px #1f2422; width: 20px; height: 20px; background-color:#131615;}
.txtarCls{border:solid 1px #FFFFFF; height: 100px; resize: vertical;}


.btn-submit{cursor: pointer; border-radius: 25px; background-size : contain; background-position: center center; background-repeat: no-repeat; width:50px; height:50px; background-image: url('../img/btn_next.png');}
button[type='submit']:disabled {
  opacity: 0.2;
}

.holographic-card {
  width: 300px;
  height: 60px;
  background: #663366;
  display: flex;
  padding-top: 3px;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transition: all 0.5s ease;
}

.holographic-card h2 {
  color: #fff;
  font-size: 1.5em;
  position: relative;
  z-index: 2;
}

.holographic-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 400%;
  background: linear-gradient(
    0deg, 
    transparent, 
    transparent 30%, 
    rgba(0,255,255,0.3)
  );
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
}

.holographic-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0,255,255,0.5);
}

.holographic-card:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

.inputLab{
	display: block;
  	position: relative;
  	cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;}

.checkmark {
  position:relative;
  float:left;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #FFF;
  border:solid 1px #131615;
}
.inputLab input {
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* On mouse-over, add a grey background color */
.inputLab:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.inputLab input:checked ~ .checkmark {
  background-color: #663366;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.inputLab input:checked ~ .checkmark:after {
  display: block; 
}

/* Style the checkmark/indicator */
.inputLab .checkmark:after {
  left: 6px;
  top: -4px;
  width: 10px;
  height: 20px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}





/*---------------------------*/
.cl-mask{background-color: #000; opacity:0.6; position: fixed; z-index: 40; top: 0px; left:0px; width:100%; height:100%;}




.cl-conex{ position: fixed; top:-100vh; height: 200px; opacity: 0; z-index:50;
	-webkit-transform: translateY(-150px);
    -ms-transform: translateY(-150px);
    transform: translateY(-150px);
    -webkit-transition: 800ms ease-in;
    transition: 800ms ease-in;
}
.cl-conex-reveal{top:0px; opacity: 1; height: 100vh;
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transition: 800ms ease;
  transition: 800ms ease;
}

.cl-cook{ position: fixed; top:0; left:0; height: 100vh; width:100vw; display: none;}
.cl-msg-admin{position: fixed; top:100px; right:-200px; color:#FFF; font-size:0.9em; font-weight: bold; background-color: #006666; width:200px; height: auto; padding:10px ;padding-top: 20px; padding-bottom: 20px; z-index: 100; box-shadow: 2px 0px 10px 0px #666666; 
	-webkit-transform: translateX(200px);
    -ms-transform: translateX(200px);
    transform: translateX(200px);
    -webkit-transition: 400ms ease;
    transition: 400ms ease;
}
.cl-msg-admin-reveal{right:-0px;
	-webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition: 400ms ease;
    transition: 400ms ease;
}


.cl-btn-tit{left:80px; padding-top: 4px; color:#FFF; text-align: center; font-size: 0.9em; width:150px; border-radius:6px; position: absolute; z-index: 1001; background-color:#292929; height:30px; display: none;}	
.cl-btn-hov{opacity:0.75;}
.cl-btn-hov:hover{opacity:1;}
.cl-menu-more{width:320px; height:320px; margin-top: auto; top:0px; right:-30px; position:absolute; z-index: 1001; background-color: #FFFFFF; border-radius:6px; border: solid 1px #000; box-shadow: 0 0 11px rgba(33,33,33,.5); display: none;}
.cl-col-bar{width:auto; height:28px; border-radius:6px; background-color:#000; margin-right:20px; padding:5px; padding-left:15px; padding-right:15px; text-align:center; font-size:0.8em; float:left;}
.cl-col-bar:hover{background-color:#ff6666; transition:300ms ease;}
.cl-ms-none{display:none;}
.cl-ms-show{width: 300px; height:30px; overflow-x: scroll; overflow-y: hidden; background-color: #FFFFFF; border-bottom: solid 2px #ff6666; white-space: nowrap;}
.cl-ms-edit{width: 300px; height:40px; background-color: #FFFFFF; border: solid 2px #ff6666; border-radius: 20px; padding-left:10px; color:#303030; font-weight: bold;}
.cl-ms-edit:focus{outline:none; outline-style: none; -webkit-box-shadow: none;  box-shadow: none;}
/*---------------------------*/

.ytcontainer {
    display: flex;
    justify-content: center;
}
    
iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
	height: 100% !important;
}
/*---------BODY & BTNS & COLORS------------------*/

.btnBlanc{color:#FFFFFF;}
.btnBlanc:hover{color:#FFFFFF;}
.btnNoir{color:#000;}
.btnNoir:hover{color:#000;}
.btnViolet{color:#9000ff;}
.btnViolet:hover{color:#9000ff;}
.btnVert{ color:#006666;}
.btnVert:hover{ color:#006666;}
.btnVert4{color:#1f2422;}
.btnVert4:hover{color:#1f2422;}
.btnBleu{color:#3281a9;}
.btnBleu:hover{color:#3281a9;}
.bgBleu{background-color: #3281a9;}
.btnRouge{color:#990033;}
.btnRouge:hover{color:#990033;}
.btnRose{color:#663366;}
.btnRose:hover{color:#663366;}
.bgOrange{background-color: #ff6666;}
.btnLang{letter-spacing: 0.1em; font-size:1em; font-weight:bold; cursor:pointer;}
.btnLang:hover{color: #ff6666;}
.btn-menu-max{font-size:0.8em; letter-spacing: 0.05em;}
.btn-footer{color:#FFF; font-size:0.8em; text-decoration: none;}
.btn-footer:hover {color:#FFF; text-decoration: none;}
.btn-footer-publier{max-width:120px; width:auto; height:24px; margin:0px; padding:15px; letter-spacing: 0.1em; padding-top:5px; font-weight:bold; padding-bottom:4px; font-size:0.75em; background-color: #9933cc; color:#FFFFFF; border-radius:11px; }

a {
	text-decoration: none;
}

a:hover {
	text-decoration:none;
}




.blanc{color: #FFFFFF;}
.rose1{color:#663366;}
.rose2{color:#660066;}
.rose3{color:#996699;}
.rose4{color:#efe7ee;} 
.noir{color:#000000; }
.rouge{color:#990033;}
.vert{ color:#006666;}
.violet{color:#9000ff;}
.bleu{color:#3281a9;}
.orange{color:#ff6666;}
.mint{color:#184637;} 


 body {
	 min-height: 100vh;
	font-family: myFirstFont, Verdana;
    color: #FFFFFF;
	font-size: 0.9em;
	background: #663366;
	 background-attachment: fixed;
	 background-position: center center;
	 background-repeat: no-repeat;
	 background-size: cover;
	 overflow-x:hidden;
}