/* GENERAL */

BODY {
 border: 0;
 margin: 0;
 padding: 0;
 background: #ffffff;
 font-family: 'Montserrat', sans-serif;
 color: #111111;
 }
DIV {
 margin: 0;
 width: 100%;
 }
TABLE {
 width: 100%;
 }
A IMG {
 border: 0;
 }
BODY, DIV, TD {
 box-sizing: border-box;
 }
H1 {
 color: #000000;
 font-variant: small-caps;
 font-weight: 700;
 }
TD {
 vertical-align: top;
 }
A,
A:visited {
 text-decoration: underline;
 color: #111111;
 }
A:hover,
A:active {
 text-decoration: none;
 }
A.neg,
A.neg:visited {
 color: #ffffff;
 }
A.butt,
A.butt:visited,
INPUT.butt {
 border: 2px solid #104c5c;
 border-radius: 5px;
 margin: 10px 0;
 padding: 9px 15px;
 text-decoration: none;
 color: #104c5c;
 background: transparent;
 font-size: 18px;
 font-variant: small-caps;
 transition: border-color 1s, background 1s, color 1s;
 /* white-space: nowrap; retire 15.04.2023 car button captions too long on Billetterie */
 line-height: 48px;
 }
A.butt:hover,
A.butt:active,
INPUT.butt:hover {
 background: #104c5c;
 color: #ffffff;
 }
A.buttneg,
A.buttneg:visited,
INPUT.buttneg {
 border: 2px solid #ffffff;
 border-radius: 5px;
 margin: 10px 0;
 padding: 9px 15px;
 text-decoration: none;
 color: #ffffff;
 background-color: #02596f;
 font-size: 18px;
 font-variant: small-caps;
 transition: color 1s, background-color 1s;
 white-space: nowrap;
 line-height: 48px;
 }
A.buttneg:hover,
A.buttneg:active,
INPUT.buttneg:hover {
 background-color: #f3ae21;
 color: #02596f;
 }
A.evidence,
A.evidence:visited {
 background-color: #e2a93d;
 color: #104c5c;
 border-color: #e2a93d !important;
}
A.evidence:hover,
A.evidence:active {
 background: #104c5c;
 color: #ffffff;
 border-color: #e2a93d !important;
}
A.buttneg2,
A.buttneg2:visited {
 border: 2px solid #104c5c;
 border-radius: 5px;
 margin: 10px 0;
 padding: 9px 15px;
 text-decoration: none;
 color: #ffffff;
 background-color: #104c5c;
 font-size: 18px;
 font-variant: small-caps;
 transition: color 1s, background-color 1s;
 white-space: nowrap;
 line-height: 48px;
 }
A.buttneg2:hover,
A.buttneg2:active {
 background-color: transparent;
 color: #104c5c;
 }
H2 {
 font-size: 18px;
 }
VIDEO {
 background-color: #104c5c;
 }
.spoiler {
 height: 1px;
 overflow: hidden;
 opacity: 0;
 transition: opacity 1s;
 }


/* LAYOUT */

#topbar {
 background: transparent;
 z-index: 2;
 }
#topbarback, #menuback {
 position: fixed;
 top: 0;
 left: 0;
 height: 77px;
 background-color: #104c5c;
 z-index: 1;
 }
#topbarback DIV {
 position: relative;
 background-color: #104c5c;
 }
#menushadow {
 position: fixed;
 top: 0;
 left: -15px;
 height: 77px;
 width: 110vw;
 overflow: hidden;
 box-shadow: 0 7px 5px #333333; 
}

#logo {
 width: 350px;
 margin-left: 15px;
 margin-top: 0;
 }
.social {
 color: #ffffff;
 padding-top: 50px;
}
.social A,
.social A:visited {
 text-decoration: none;
 opacity: 1;
 transition: opacity 1s;
 }
.social A:hover,
.social A:active {
 opacity: 0.6;
 }
.social IMG {
 width: 50px;
 height: 50px;
 }
#menu, #mobileMenu, .acad-submenu, .medias-submenu {
 overflow: hidden;
 font-size: 17px;
 font-variant: small-caps;
 z-index: 2;
 }
#menu, .acad-submenu, .medias-submenu {
 background: transparent;
}
#mobileMenu {
 background-color: #104c5c;
}
#menu A, #mobileMenu A,
#menu A:visited, #mobileMenu A:visited,
#menu A:active, #mobileMenu A:active,
.acad-submenu A,
.acad-submenu A:visited,
.medias-submenu A,
.medias-submenu A:visited {
 text-decoration: none;
 color: #ffffff;
 transition: color 1s;
 }
#menu A:hover, #mobileMenu A:hover {
 color: #aaaaaa;
 }
.acad-submenu A, .medias-submenu A {
 padding: 3px 7px;
 margin: 3px;
 transition: color 1s, background-color 1s;
 }
.acad-submenu A.active,
.acad-submenu A.active:visited,
.acad-submenu A:hover,
.acad-submenu A:active,
.medias-submenu A.active,
.medias-submenu A.active:visited,
.medias-submenu A:hover,
.medias-submenu A:active  {
 background-color: #f3ae21;
 }
#pgtitle {
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center center;
 color: #ffffff;
 font-variant: small-caps;
 font-weight: bold;
 }
#bottom {
 background: #104c5c;
 padding-top: 50px;
 }
.columns, #bottom TABLE {
 width: 100%;
 border: 0;
 margin: 0;
 padding: 0;
 }
.columns TD {
 margin: 10px;
 border: 0;
 border-radius: 10px;
 padding: 50px 20px;
 height: 332px;
 background-size: cover;
 text-align: center;
 color: #ffffff;
 filter: drop-shadow(1mm 1mm 0 #f3ae21);
 }
#events {
 border: 0;
 border-radius: 10px;
 padding: 50px 20px;
 background-size: cover;
 background-position: center center;
 }
#media {
 text-align: center;
 padding: 50px 0;
 }
#bottom TH {
 padding: 0;
 }
#bottom TD {
 margin: 10px;
 border: 0;
 padding: 20px;
 text-align: center;
 color: #ffffff;
 }
.columns TD H1 {
 font-size: 28px;
 font-weight: bold;
 font-variant: small-caps;
 filter: drop-shadow(0.8mm 0.8mm 7px #000000); 
 color: #ffffff;
 }
.columns TD P {
 font-size: 17px;
 padding: 5px 0;
 }
#bottom TD H1 {
 font-size: 20px;
 padding: 15px;
 color: #ffffff;
 }
#bottom TD P {
 font-size: 13px;
 padding: 10px;
 }
#partenaires IMG {
 max-width: 150px;
 }

A.anchor { position: relative; top: -77px; }



/* CONTENT */

#homevideod, #homevideom {
 position: absolute;
 top: 0;
 left: 0;
 width: calc(100% + 1px);
 height: 100vh;
 overflow: hidden;
 padding: 0;
 }
#homevideod VIDEO, #homevideom VIDEO {
 display: block;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 z-index: 1;
 }
#homelogo_onvideo {
 position: absolute;
 z-index: 3;
 text-align: center;
 }
#homelogo_onvideo H4 {
 margin: 0;
 margin-top: 30px;
 color: #ffffff;
 font-variant: small-caps;
 font-weight: bold;
 letter-spacing: 0.1em;
 filter: drop-shadow(0.8mm 0.8mm 7px #000000);
 }
#homebutton {
 position: absolute;
 bottom: 10vh;
 text-align: center;
 z-index: 10;
 }
#homemargin {
 height: 100vh;
 }
#homecolumns A {
 position: relative;
 top: 120px;
 }
#homecolumns P {
 position: relative;
 top: -60px;
 }

#numbers {
 border: 0;
 width: 100%;
 height: 180px;
 }
.getInfos {
 border: 0;
 width: 500px;
 max-width: 80vw;
 height: 25px;
}

#events H1 {
 text-align: center;
 }
#eventstable TD {
 padding: 7px 10px;
 }
#eventstable TD:first-child {
 white-space: nowrap;
 }
.subcontent TD {
 padding: 0;
 }
.subcontent TD.img {
 padding: 0;
 }
#cours TD {
 height: 100px;
 background-size: cover;
 vertical-align: bottom;
 padding: 20px;
 color: #ffffff;
 font-size: 18px;
 }
.pictos TD {
 margin: 20px 0;
 font-size: 20px;
 }
.pictos TD IMG {
 height: 60px;
 vertical-align: -15px;
 margin-right: 15px;
 }
.pictos TD P {
 font-size: 0.8em;
}
.pictos A, .pictos A:visited {
 text-decoration: none;
 }
#ev37, #evpe {
 margin-top: 50px;
 padding: 0 25px;
 height: 1px;
 overflow: auto;
 transition: height 2s;
 background-color: #cccccc;
 }
#ev37 TD, #evpe TD {
 white-space: nowrap;
 padding: 2px 3px;
 }
#profs TD {
 height: 300px;
 background-size: cover;
 vertical-align: bottom;
 padding: 0;
 }
#profs A,
#profs A:visited {
 display: block;
 background: linear-gradient(rgba(16,76,92,1), rgba(16,76,92,1));
 padding: 10px;
 text-align: center;
 color: #ffffff;
 text-decoration: none;
 opacity: 1;
 transition: opacity 1s;
 }
#profs A:hover,
#profs A:active {
 color: #ffffff;
 opacity: 0.6;
 }
.tarifs {
 padding: 20px;
}
.tarifPrix {
 font-size: 30px;
 font-weight: bold;
 color: #ffcc00;
}
.about TD {
 text-align: center;
 }
.about IMG {
 width: 200px;
 height: 200px;
 border-radius: 100px;
 }
#map IFRAME {
 border: 0;
 width: 100%;
 }

TABLE#docsforms {
 width: auto;
 }
TABLE#docsforms TD {
 padding: 9px 0;
 }
 
.instruments IMG {
 width: 150px;
 float:left;
 margin-right: 10px;
 margin-left: 10px;
}


/* FORM */

FORM {
 padding: 20px 0;
 text-align: center;
 }
LABEL {
 display: block;
 font-size: 1.1em;
 margin: 20px;
 }
INPUT, SELECT {
 max-width: 90%;
 padding: 12px;
 margin: 10px 0;
 font: normal 1.2em Montserrat, sans-serif;
 border: 1px solid #555555;
 border-radius: 5px;
 }
 
DIV.sectionTitle {
 margin: 20px auto 15px;
 padding: 10px 0;
 background-color: #104c5c;
 font-weight: bold;
 font-size: 1.2em;
 font-variant: small-caps;
 color: #ffffff;
}
 
 
/* FAQ */

DIV.faq, DIV.faqSearch {
 border: 1px solid #dddddd;
 padding: 20px 20px 7px;
 margin: 10px 0;
}
DIV.faq SPAN, DIV.faqSearch SPAN {
 font-weight: bold;
 text-decoration: none;
 color: #104c5c;
 transition: opacity 1s;
}
DIV.faq:hover SPAN {
 opacity: 0.6;
}
DIV.faq DIV {
 margin: 7px;
 height: 1px;
 opacity: 0;
 transition: opacity 1s;
 overflow: hidden;
}

.checkbox {
 transform: scale(1.75);
 width: 25px;
}

INPUT[type=radio] {
 border-radius: 12.5px;
}



/* MULTISCREEN */

@media all and (max-width: 980px) {
 .desktopOnly { display: none; }
 BODY { overflow-x: hidden; }
 #menu { display: none; }
 .subMenu { background-color: rgba(255,255,255,0.1); height: 0; overflow: auto; }
 #mobileHomeTrigMenu { position: absolute; top: 25px; text-align: center; z-index: 6; }
 #mobileHomeTrigMenu A, #mobileHomeTrigMenu A:visited { color: #ffffff; font-size: 3em; text-decoration: none; }
 #topbar { position: absolute; top: 0; left: 0; }
 #topbarback { display: none; }
 #menumargin { height: 55px; }
 #menuback { transition: height 1s; z-index: 2; }
 #menushadow { z-index: 0; }
 TH, TD { display: block; }
 #ev37 TD, #evpe TD, #docsforms TD { display: table-cell; }
 #topbar { padding: 10px; text-align: center; z-index: 5; }
 #logo { display: block; max-width: 90%; margin: auto; }
 .social IMG { margin: 5px; }
 .bottomLinks { padding: 23px; }
 A.butt, A.buttneg { display: block; margin: 10px; text-align: center; }
 #mobileMenu { position: sticky; top: 10px; height: 55px; text-align: center; transition: height 1s; z-index: 3; }
 #mobileMenu A { display: block; margin: 5px auto; }
 .acad-submenu A, .medias-submenu A { padding: 0; }
 .acad-submenu A.active, .acad-submenu A.active:visited, .medias-submenu A.active, .medias-submenu A.active:visited { background-color: transparent; }
 #trigger { font-size: 40px; }
 #content { margin-top: -55px; }
 #homelogo_onvideo { top: 20vh; }
 #homelogo_onvideo IMG { width: 90vw; }
 #homevideod { display: none; }
 #homevideom { z-index: 3; }
 #pgtitle { height: 30vh; padding: 20vh 0 0 8vw; font-size: 24px; }
 #pgtitle .acad-submenu, #pgtitle .medias-submenu { display: none; }
 .contenttxt { padding: 20px 8vw; }
 TD.img { width: 100%; text-align: center; }
 .columns TD { margin: 30px 0; }
 #bottom { padding-bottom: 50px; }
 #bottom TD { padding: 0; }
 #bottom H1 { margin: 0; padding: 0; }
 #bottom P { margin: 0; padding: 0; }
 .buttons { text-align: center; background-color: #104c5c; padding: 15px; }
 #events { margin: 40px 0; }
 #events H1 { font-size: 22px; }
 #eventstable TD:first-child { border-top: 1px solid #aaaaaa; padding-top:5px; padding-bottom: 20px; }
 #profs TD { margin-bottom: 10px; }
 #profs A, #profs A:visited { position: relative; top: 242px; }
 #media VIDEO, #media IFRAME { margin: 10px; }
 #map IFRAME { height: 45vh; }
 #profbio TD:first-child { text-align: center; }
 #profbio IMG { max-width: 80vw; }
 TABLE.calendrier TD:first-child { padding-top: 20px; }
 IMG.vign { height: 100px; }
 .desktop-only { display: none; }
 .pictos TD {
  width: 100%;
 }
 .tarifs TD { padding-top: 8px; }
 .getInfos { height: 50px; }
 .media IMG { width: 85vw; }
 #homecolumns P { top: -100px; }
}

@media all and (min-width: 981px) {
 .mobileOnly { display: none; }
 #mobileMenu { display:none; }
 .subMenu { display: none; }
 #mobileHomeTrigMenu { display: none; }
 #topbar, #menu { position: fixed; }
 #topbar { height: 77px; padding: 10px; left:0; top: 0; }
 #menuback { display: none; }
 #menushadow { display: none; }
 #menumargin { display: none; }
 /* .social P { position: relative; top: 100px; } supprime le 24.08.2021 (demande Alain) */
 .social IMG { vertical-align: 7px; margin: 0 5px; }
 /* .bottomLinks { position: relative; top: 120px; }  supprime le 24.08.2021 (demande Alain) */
 .buttons { text-align: center; margin: 22px 0; background-color: rgba(16,76,92,1); padding: 22px; }
 #menu { padding: 10px; top: 29px; right: 0; width: auto; text-align: right; }
 #trigger { display: none; }
 #menu A { margin: 0 15px; }
 #homemargin { margin-bottom: 77px; } /* si workshop: 0 */
 #homelogo_onvideo { top: 50vh; margin-top: -113px; }
 #homelogo_onvideo IMG { width: 900px; position: relative; left: 5vw; }
 #homevideod { margin-left: -1px; }
 #homevideom { display: none; }
 #pgtitle { margin-top: 77px; height: 300px; padding: 200px 0 0 10vw; font-size: 50px;  }
 .contenttxt { padding: 50px 10vw; }
 TD.img { width: 250px; }
 .subcontent TD:nth-child(even) { padding-left: 25px; }
 .subcontent H1 { margin-top: 0; }
 .columns { border-spacing: 45px; }
 .columns TD, #bottom TD { width: 33%; }
 /* #bottom TH IMG { position: relative; top: 100px; } supprime le 24.08.2021 (demande Alain) */
 #events { margin: 45px; width: auto; }
 #cours TD { width: 20%; }
 #profs TD { width: 25%; }
 #media VIDEO, #media IFRAME, .media VIDEO, .media IFRAME { width: 560px; height: 316px; margin: 0 10px; }
 .media IMG { width: 560px; margin: 10px; }
 SPAN.media { float:right; margin-left:25px; }
 #media IFRAME.large { width: 1124px; height: 632.25px; }
 .about TD { width: 25%; }
 #map TD { width: 50%; padding: 25px 50px 25px 0; }
 #map IFRAME { height: 80vh; }
 #profbio TD:first-child { padding-right: 25px; }
 #profbio H1 { margin-top: 0; }
 TABLE.calendrier TD { padding: 10px 0; }
 TABLE.calendrier TD:first-child { width: 250px; }
 IMG.vign { height: 170px; transition: transform 1s; margin: 1px 3px; }
 IMG.vign:hover { transform: scale(1.5, 1.5); }
 .upper-if-desktop { position: relative; top: -400px; }
 .mobile-only { display: none; }
 .pictos TD { width: 33.33%; }
 TABLE.auditionsTable TD { border-bottom: 1px solid #dddddd; padding: 7px 5px; }
 }

@media all and (min-width: 981px) and (max-width: 1260px) {
 #menu A {
  margin: 0 10px;
  }
 .about IMG {
  width: 150px;
  height: 150px;
  border-radius: 75px;
  }
 }

@media screen and (max-aspect-ratio: 1920/1080) {
 #homevideod VIDEO, #homevideom VIDEO {
  height: 100%;
 }
}
@media screen and (min-aspect-ratio: 1920/1080) {
 #homevideod VIDEO, #homevideom VIDEO {
  width: 100%;
 }
}

/* POPUP */

#backForPopup {
 opacity: 0;
 z-index: 9;
 position: fixed;
 top: 0;
 left: 0;
 background-color: #104c5c;
 overflow: auto;
 text-align: center;
 width: 100vw;
 height: 100vh;
 transition: opacity 1s;
 }
#popup {
 opacity: 0;
 z-index: 10;
 position: fixed;
 top: 50%;
 left: 50%;
 background-color: #104c5c;
 color: #ffffff;
 overflow: hidden;
 text-align: center;
 margin-top: -110px;
 transition: opacity 1s;
 border-radius: 15px;
 }
@media all and (min-width: 601px) {
 #popup {
  width: 600px;
  height: 220px;
  margin-left: -300px;
  }
 #popup IMG {
  width: 600px;
  }
 }
@media all and (max-width: 600px) {
 #popup {
  width: 90vw;
  margin-left: -45vw;
  }
 #popup IMG {
  width: 90vw;
  }
 }
 
 
/*  WORKSHOP AD */

@media all and (min-width: 981px) {
 #workshopAd {
  position: relative;
  top: -80px;
 }
 #workshopAd DIV {
  height:500px;
  background-image: url("../img/workshops/backPL.jpg");
  background-size: cover;
  text-align: center;
  margin-top: 80px;
 }
 #workshopAd H2 {
  /* margin-top: -110px; */
 }
 #workshopAd A {
  font-size: 2.2em;
  position: relative;
  top: -40px;
 }
}
@media all and (max-width: 980px) {
 #workshopAd {
  margin-top: -70px;
 }
 #workshopAd DIV {
  height:500px;
  background-image: url("../img/workshops/backPLmobile.jpg");
  background-size: cover;
  background-position: center center;
  text-align: center;
  padding-top: 300px;
 }
 #workshopAd A {
  font-size: 1.5em;
 }
}

.clickFormIframe {
 border: 0;
 width: 100%;
 min-height: 80vh;
}
@media all and (min-width: 981px) {
.clickFormIframe {
  height: 1400px;
 }
}
@media all and (max-width: 980px) {
.clickFormIframe {
  height: 1600px;
  margin: 0;
 }
}

#homelogo_onvideo IMG {
 filter: drop-shadow(0.8mm 0.8mm 7px #000000);
}

#menu A.active,
#menu A.active:visited {
 font-weight: bold;
 text-decoration: underline;
}

#pgtitle A {
 font-weight: normal;
}

#profs TD A::first-line {
 font-weight: bold;
}

DIV.twoColumns {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}
@media all and (min-width: 1400px) {
 DIV.twoColumns DIV {
  flex: 45%;
 }
}