@font-face {
    font-family: 'Ciutadella Slab';
    src: url('/fonts/CiutadellaSlab-SmBd.woff2') format('woff2'),
        url('/fonts/CiutadellaSlab-SmBd.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ciutadella';
    src: url('/fonts/Ciutadella-RegularItalic.woff2') format('woff2'),
        url('/fonts/Ciutadella-RegularItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Ciutadella';
    src: url('/fonts/Ciutadella-Regular.woff2') format('woff2'),
        url('/fonts/Ciutadella-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ciutadella';
    src: url('/fonts/Ciutadella-Medium.woff2') format('woff2'),
        url('/fonts/Ciutadella-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ciutadella';
    src: url('/fonts/Ciutadella-Bold.woff2') format('woff2'),
        url('/fonts/Ciutadella-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}




/* Couleur principale RGAA ok sur fond blanc : #547d61 et couleur principale RGAA ok sur fond noir : #4B7F5F */

:root {
  --primary-color: #547d61; 
  --primary-color-onblack: #4B7F5F; 
  --primary-color-darker: #405e49;   
  --footer-bg-color:#dadada;
  --menu-color: #547d61; 

  --margin-mobile: 15px;
  --negativemargin-mobile: -15px;
  }

*, *:before, *:after {  box-sizing: inherit;}

html {  box-sizing: border-box;  font-size:1rem; }

.row {
  --bs-gutter-x: 20px;
}


body { font-family:sans-serif ;  color:#000; background-color:#fff;     font-family: 'Ciutadella'; }
  a { color:black; }

/* TYPOGRAPHY
===================================== */




h1 { font-size:2.5rem; }
h2 { font-size: 1.7rem; color:var(--primary-color);  }
h3 { font-size: 1.2rem;}
p {  font-size:1rem; line-height:1.3rem;    }
p.chapo { font-size:1.3rem; line-height:1.6rem;}


@media only screen and (min-width: 1189px) {
  h1 { font-size:3rem; }
  h2 { font-size: 2rem; color:var(--primary-color);  }
h3 { font-size: 1.5rem;}
  p {  font-size:1.2rem; line-height:1.5rem;    }
p.chapo { font-size:1.5rem; line-height:1.8rem;}
  .conteneurprincipal ul li  {  font-size:1.2rem; line-height:1.5rem;    }
  
}



h2 .chevron { font-size:16px;  }



/* simple 2 cols layout */
.simplayout-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Gouttière entre les colonnes */
}

.simplayout-column {
flex: 100%;
}

main div.conteneurprincipal { max-width:1366px; margin:0 auto;  padding:0 15px; }

.conteneurprincipal h3 { margin-top:30px; }
.conteneurprincipal h2 { margin-top:30px; }



.conteneurprincipal.oeuvre-container { margin-top:20px; }
.oeuvre-container .oeuvre-description { order:2; }
.oeuvre-container .oeuvre-image { order:1; }




@media only screen and (min-width: 1189px) {
.simplayout-column-2-3 {
  flex: 2; /* 2 parts sur un total de 3 */
}

.simplayout-column-1-3 {
  flex: 1; /* 1 part sur un total de 3 */
}

.simplayout-column-1-2 {
  flex: 1; /* 1 part sur un total de 3 */
}

.oeuvre-container .oeuvre-description { order:1; }
.oeuvre-container .oeuvre-image  { order:2; }


}





/* page editoriale spec */
.bloc-infos { padding: 20px;color:white; background-color:var(--primary-color); }
.bloc-infos h3:first-child { margin-top:0; }
.bloc-infos a { color:white;   }
.bloc-infos a:hover{ color:white;   }

.accessibilite-icon { max-height:30px; }

.image_a { margin-top:20px; }

.zoomsur { display:flex;flex-direction:row; gap:30px;flex-wrap: wrap;  width: 100%;  }
.zoomsur .zoomsurcoltext {  background-color:#dde5df; color:#4C6D57 ; padding:20px;  }
.zoomsur .zoomsurcoltextcolumns {  height:100%; display:flex;flex-direction:row; gap:30px;flex-wrap: wrap;  }
.zoomsur .zoomsurcoltextcolumns-col { flex:1 1 100%;   }
.zoomsur .zoomsurcolimg img { max-width:100%; }
.zoomsur .zoomsurcolimg { }

@media only screen and (min-width: 800px) {
 .zoomsur .zoomsurcoltext {width:64%;  }
 .zoomsur .zoomsurcolimg {width:32%; }
}

@media only screen and (min-width: 1189px) {
  .zoomsur .zoomsurcoltextcolumns {  gap:30px; } 
.zoomsur .zoomsurcoltextcolumns-col { flex:1;   }

}


.oeuvre-description h2 { margin-top:0; }





h3.paragraphcollapsable { color:var(--primary-color); }

h3.paragraphcollapsable .chevron { font-size:1rem; }




/* ARIANE
================================================ */
.ariane {  font-size:1.2rem;  max-width: 1366px;  margin: 0 auto; padding:15px 15px;  }
.ariane a { color:var(--primary-color); text-decoration:none; font-weight:bold;  }


.mentionslegales p { font-size:1rem; color:#555; }
.conteneurprincipal h1 + h2 { margin-top: 0; } 


.spec-maincol { padding-top:20px; }


.content-evenement .spec-maincol h3:first-child { margin:0; color:var(--primary-color); }
.content-evenement .spec-maincol h2 { margin-top:0; color:black; }

.content-expo .spec-maincol h2 { margin:0 0 20px;  }

.conteneurprincipal ul.intext { list-style-type:none; margin:0; padding:0; }
.conteneurprincipal ul.intext a:hover { color:var(--primary-color);  }



.sidebarcartouche { padding: 20px;color:white; background-color:var(--primary-color); }
.sidebarcartouche a { color:white; text-decoration:none; }
.sidebarcartouche a:hover { color:white;  }
.sidebarcartouche h3:first-child { margin-top:0; }

header { position:relative;z-index:10;  padding:10px 0 0 ;    }

header .burger {  height:auto; text-align:right; border-radius:50% 50%;  cursor: pointer;  flex: 0 0 30px; align-self: flex-start;  -webkit-appearance: none;  outline: none;  line-height: normal;   }
header .burger span.button {  color:var(--primary-color);   font-size:45px;  vertical-align:top;   }
header .burger:hover span.button { color:black;  }

.header-upperpart {  border-bottom:solid 1px  var(--menu-color);  }

main { margin:0; padding:0;  }

.bigalert {background-color:rgba(255,255,255,0.8);  position:absolute; left:0; right:0; z-index:5; background-color:white; padding:20px; text-align:center; color:var(--primary-color); font-weight:bold;  }
.bigalert p { font-size:30px; line-height:30px; margin: 0;  }
.bigalert p.alertlink a {  color:var(--primary-color); font-size:25px;line-height:25px;  margin: 0; font-weight:normal;  }
.bigalert a.closealert { position:absolute;top:15px; right:15px; font-size:25px; text-decoration:none; color:var(--primary-color);}



.oeuvre-images { position:relative; }

img.resp { width:100%; max-width:100%; }



img.resp-portrait {   width:100%; max-width:100%; }

.noshowonmobile { display:none; }





.publicationoeuvremobile { display:block; }
.publicationoeuvredesktop { display:none; }



@media only screen and (min-width: 800px) {
  
  img.resp-portrait {   width:100%; max-width:50%; }
  
   .noshowonmobile { display:block; }

}
  




.citation {   font-weight:normal;  font-size:1.3rem; line-height:1.7rem; font-style: italic; color:var(--primary-color); max-width:  80%; margin:15px 0; }

@media only screen and (min-width: 1189px) {
  
  
.publicationoeuvremobile { display:none; }
.publicationoeuvredesktop { display:block; }
  
  .citation { font-size:1.4rem; line-height:1.8rem; max-width:  50%; margin:30px 0; }
  

.spec-maincol { padding-right:30px; }

}


@media only screen and (min-width: 1406px) {
 main div.conteneurprincipal  { padding:0 0; }
 .ariane {  padding:15px 0;  }
 
 .headerfade-headertext { padding:0; }
}





.poursuivreexp { margin-top:40px; }
.poursuivreexp h2 { color:black; margin:0 0 15px; }


.oeuvre-papl { margin-top:40px; }
.oeuvre-papl h2 { color:black; margin:0 0 15px; }


.oeuvre-images .legende { margin-top:20px; font-size:0.9rem; }

.oeuvre-images .legende::before { margin:10px 0; content: ""; width:200px; border-top:solid var(--primary-color) 3px; display:block; }


.mozaik-slideshowwrapper { position:relative; }
.mozaik-slideshowwrapper .splide__arrow  { z-index:20; }




.sitemap > li { font-size:2rem; }
.sitemap > li > ul > li { font-size:1.5rem; }
.sitemap > li > ul > li > ul > li { font-size:1rem; }


.fakeaudioplayer { max-width:300px; width:100%; }

img.pubbox-desktop { display:none; max-width:100%; width:100%;}
img.pubbox-mobile { display:block; max-width:100%; width:100%;}


@media only screen and (min-width: 789px) {
img.pubbox-desktop { display:block;}
img.pubbox-mobile { display:none; }

}










/* Search specific 
========================== */
.search-form { background-color:#eee; padding:10px; border-radius:6px; }
.search-form input { font-size:1.5rem; }
.search-form button { background-color:var(--primary-color); padding:5px 10px; border-radius:3px; color:white; font-size:1.5rem; line-height:1;  }
.search-form button:hover { background-color:var(--primary-color-darker);  }

.filter-container { margin-top:15px; }
.filterwrapper { display:inline-block; margin-right:20px; }

.search-nbresults { text-align:center; }

.search-noresults { text-align:center; font-size:3rem; padding:25px; font-style:italic;  }

.search-results ol { margin:0; list-style-type:none; padding:0; }
.search-results ol li { display:block; padding:10px; border-bottom:solid var(--primary-color) 1px; display: flex;  flex-flow: row wrap; gap: 1rem; align-items: center; }
.search-results ol li h2 { margin-top:0; margin-bottom:0; }
.search-results ol li h3 { margin-top:0; }

.search-results ol li a:hover { color:var(--primary-color); }

.search-results ol li div.search-item-content .pagetype { display:inline-block; border-radius:3px;  background-color:var(--primary-color); padding:2px 4px;  color:white;    }
.search-item-figure {
  overflow: hidden;
} 

.search-item-figure img {
  transition: .2s all linear;
  aspect-ratio: 285/190;
  object-fit: cover;
}

.search-item-figure:hover img {

transform: scale(1.1) ; ; /* Agrandit légèrement l'image au survol */
        opacity:0.7; 
}
  
.pure-img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media only screen and (min-width: 789px) {
.search-form { padding:25px; }
.search-results ol li {  padding:25px; }

.search-item-figure {
    width: 15rem;
  }
  
  
.search-results ol li div.search-item-content {width: calc(100% - 20rem);
    }
  

}







/* DROPDOWN MECHANICS
==================================================== */

header .dropdown-content { display:none; }
header .dropdown-wrapper-open .dropdown-content { display:block; }

header .dropdown-content.dropdown-content-alwaysvisible-mobile { display:block; }

header .dropdown-content ul {list-style: none;  padding: 0;  margin:0;  }
header .dropdown-current-item { text-decoration:underline; }
header .dropdown-wrapper { position: relative; }

header .dropdown-content-right { right:0; }
header .dropdown-content-left { left:0; }








/* GOOD NAV 
====================================================================*/

.header-upperpart { display: flex;  justify-content: space-between; flex-direction: row;  flex-wrap: wrap; gap:10px; padding:0 15px 10px; }

.conteneur-links {  display:none;  flex-basis: 100%; width:100%;  flex-wrap: wrap; border-top:solid  var(--primary-color) 1px; padding:10px 10px 0; font-size:18px; }
.conteneur-links .icon { font-size:12px; }
.conteneur-links > ul {   list-style: none; margin:0;  padding:0; display:flex; align-items: stretch; justify-content: space-between; flex-direction: row;  flex-wrap: wrap;   }
.conteneur-links > ul > li {  flex: 1;          white-space: nowrap;   }
.conteneur-links > ul > li:nth-child(1) { text-align:left; }
.conteneur-links > ul > li:nth-child(2) { text-align:center; }
.conteneur-links > ul > li:nth-child(3) { text-align:right; }
.conteneur-links > ul > li a {text-decoration:none;  color:var(--primary-color); }
.conteneur-links > ul > li .chevron { font-size:10px; margin-left:15px; }
.conteneur-links > ul > li button {text-decoration:none;  color:var(--primary-color); }
.conteneur-links > ul > li > ul { list-style: none; margin:0;  padding:0;  }
.conteneur-links a.dropdown-toggler { position:relative; }
.conteneur-links .dropdown-content a { padding:7px 12px; display:block;  }

.dropdown-vousetes a:hover { background-color:var(--primary-color); color:white; }


/* LANG SELECTOR */
.conteneur-links > ul > li.langselector { max-width:100px; display: inline-flex;  }
.conteneur-links > ul > li.langselector a.dropdown-toggler { display:none; }
.conteneur-links > ul > li.langselector .dropdown-content { display:block;  }
.conteneur-links > ul > li.langselector ul li { display:inline-block; }
.conteneur-links .langselector .dropdown-content a { display:inline-block; margin:0 10px 0 0 ;  padding:0; }
.conteneur-links .dropdown-content a.dropdown-current-item { text-decoration:underline; }


nav.menu { display:none;  font-size:2em;  }
nav.menu ul {  list-style: none; margin:0;  padding:0;  }
nav.menu a { color:black; text-decoration:none; display:block;  padding:0 16px;    }
nav.menu > ul > li > a { background-color:  var(--primary-color); color:white; border-bottom:solid 1px white; }
nav.menu > ul > li > a:hover { background-color:white; color:var(--primary-color); text-decoration:none;  }

a.nav1-button { position:relative;    }
a.nav1-button .chevron { font-size:16px; position: absolute; right: 50px; top: 50%; transform: translateY(-50%); transform-origin: center; }

a.nav2-button { display: block;    align-items: center; }
a.nav2-button .chevron { order: -1; margin-right: 10px;  font-size:12px; display:none; }
a.nav2-button:hover { color:var(--primary-color); }

a.nav1-button[aria-expanded=true] { background-color:var(--menu-color); color:white; text-decoration:none;  }

.headerwrapper-open nav.menu { display:block;  }
.headerwrapper-open .conteneur-links { display:block;  }

.nav1-content { display:none; background-color:white; font-size:24px;  }
.nav1-wrapper.open .nav1-content { display:block; }
.nav1-wrapper.open .nav1-button  .chevron { transform: rotate(90deg) translateY(0%) translateX(-100%); }

.nav2-content { display:none; }



.logotitre { margin-top:7px; }

.nomdumusee a {display:block;line-height:0.8;  }
.nomdumusee img { width:220px; max-width:100%; display:block; }
.nomdumusee a:hover img { opacity:0.8; }


@media only screen and (min-width: 600px) {
  .nomdumusee img { width:340px;  }
  
}


@media only screen and (min-width: 1189px) {
  .nomdumusee img { width:440px;  }
  
}

.logosstitre a { display:inline-block; line-height:0.8;  }
.logosstitre img { height:15px; display:inline-block; }
.logosstitre a:hover img { opacity:0.5; }

@media only screen and (min-width: 1189px) {
  .logosstitre img { height:17px; }
  
}







body.headerfade header { background-color:white; }
body.headerfade .ariane { position:relative; z-index:4; color:white; }
body.headerfade .ariane a { color:white; }






@media only screen and (min-width: 1189px) {
  

  
body.headerfade header { background-color:transparent; }
body.headerfade .conteneur-logo .logotitre .nomdumusee a { color:white; }
body.headerfade .conteneur-logo .logotitre p.logosstitre a { color:white; }
body.headerfade .conteneur-links > ul > li a {color:white; }
body.headerfade nav.menu > ul > li > a {color:white; }
body.headerfade .nav1-content { background-color:rgba(255,255,255,1); } 

body.headerfade header .burger span.button { color:white; }
body.headerfade header .burger:hover span.button { color:var(--primary-color);  }


 
 
}


/* DESKTOP STYLING
===================================================================== */


@media only screen and (min-width: 1189px) {

  header .dropdown-content.dropdown-content-alwaysvisible-mobile { display:none; }
  header { padding:15px 0 0 ;  margin:0;  }
  header .burger {  display:none;}
  header .burger span.button {  font-size:45px; }
  
  .header-upperpart { border:none; max-width:1366px; margin:0 auto;  }
   


  .conteneur-links { display:block;  max-width:470px; border:none;   padding-top:25px; }
  .conteneur-links > ul > li.langselector ul li { display:block; }  
  .conteneur-links > ul > li.langselector .dropdown-content { display:none; }
  .conteneur-links > ul > li.langselector a.dropdown-toggler { display:block; }
  .conteneur-links   li.langselector.dropdown-wrapper-open  .dropdown-content { display:block;  }
  .conteneur-links .langselector .dropdown-content a { padding: 7px 12px; }
  .conteneur-links .dropdown-content a:hover { color:white;background-color: var(--primary-color); }
  
  .langselector ul.dropdown-content li:first-child { display:none; }
  
  /* TO CLEAN UP */

  header ul.dropdown-content {  position:absolute;  top:100%;  margin-top:17px;   }
  header ul.dropdown-content li { border:none;    }
  header ul.dropdown-content li a { 	text-wrap: nowrap; cursor: pointer;	padding: 15px 0 15px 0;	display: block;	/* width:400px; min-width: 100%;width: -webkit-max-content;	width: max-content; */}
  header ul.dropdown-content li:last-child a { border-bottom:none; }
  header ul.dropdown-content li:hover a { text-decoration:none;  background-color:none;border-top:none;  }
  header ul.dropdown-content li:hover { background-color:var(--primary-color); border-top:solid var(--primary-color) 1px;border-bottom:solid var(--primary-color) 1px;   }
  header ul.dropdown-content li:first-child:hover {  border-top:none;   }
  header ul.dropdown-content li:last-child:hover {  border-bottom:none;   }
  header ul.dropdown-content li:hover + li a { border-top:none; }

  header li.dropdown-wrapper-open > ul.dropdown-content { border-top:solid var(--primary-color) 1px; }
  header ul.dropdown-content li:first-child a { border-top:none; }

  header .dropdown-wrapper .dropdown-content {  background: #fff;  color: #000;  margin-top:10px;  position: absolute;  top: 100%;  z-index: 1;    text-align:left;}

  header .dropdown-wrapper .dropdown-content-small { margin-top:0; }
  
  header li.dropdown-wrapper-open > ul.dropdown-content-small { border-top:none; }

  header ul.dropdown-content-small li a { padding:8px 12px;  }
  header ul.dropdown-content-small li:first-child a {border-top:solid var(--primary-color) 1px; }
  header ul.dropdown-content-small li:hover a {border-top:none; }
  header ul.dropdown-content-small li:first-child:hover { border-top:solid var(--primary-color) 1px;   }

    

  .bigalert { padding:50px; }
  .bigalert p { font-size:60px; line-height:60px;  }
  .bigalert p.alertlink a {   font-size:50px;line-height:50px;   }
  .bigalert a.closealert {top:15px; right:15px; font-size:45px; }
  
  
  
  body.headerfade .conteneur-links > ul > li > ul > li a {color:var(--primary-color);; }
}







/* IMAGE COVER ON HEADER FADE
================================== */
.largecoverwrapper { min-height:800px;position: relative;  background-size: cover;  background-position: center; }
  
.largecoverwrapper::before {
  content: '';
  position: absolute;
  z-index:0;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.95), transparent);
  pointer-events: none; /* Empêche d'interférer avec d'autres éléments */
}


.largecoverwrapper .splide__arrow { top:38%; }


@media only screen and (min-width: 1189px) {  
  .largecoverwrapper {  min-height:800px; }
  
  .largecoverwrapper .splide__arrow { top:50%; }
    
}













/* GOOD STYLES
============================ */




a { color:black; }
a:hover {color:black; text-decoration:underline;  }


a.lien { text-decoration:none; }
a.lien:hover { text-decoration:underline; }













/* RESET BUTTON */
button {
  border: 0;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: #0000;
  color: inherit;
  font: inherit;
    line-height: inherit;
  text-align: inherit;
  text-transform: inherit;
  line-height: inherit;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
  appearance: none;
}


/* MAIN STRUCTURE */
a.evitement {
   display: inline-block;
   color: #555;
   background: #fff;
   padding: .5rem;
   position: absolute;
   left: -99999rem;
   z-index: 100;
}
a.evitement:focus {
   left: 0;
}


body.responsive main { max-width:100%; }


@media only screen and (min-width: 1000px) {
.simprow { display:flex; flex-flow:row wrap; width:100%; }
.simpcol-6 { flex:1 0 34%;   }
.simpcol-4 { flex:1 0 26%;   }
.simpcol-8 { flex:1 0 51%;   }
.simpcol-5 { flex:1 0 34%;   }
}







/* HOMEPAGE
============================= */


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

.home-cover-details  {
	  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.column-ar {
 text-align:right;
}

}





/* SPLIDE SLIDESHOW
==================================== */ 
  
.splide__list a {    width: 100%;    flex: 0 0 auto;  }
.splide__list a { display:block; height:400px; overflow:hidden;position:relative;     background-size: cover;   background-position: center;     background-repeat: no-repeat;}
.splide__list a .text-wrapper {  padding:15px 25px; color:white; position:absolute; z-index:2;  bottom:0;   font-size:35px; line-height:1; font-weight:bold; }
  
.splide__list a::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50%; /* Ajustez la hauteur du dégradé */
      background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Dégradé du noir opaque à transparent */
      z-index: 1; /* Place le dégradé sous le texte */
    }
  
.splide__arrow:hover { background-color:rgba(0,0,0,0.3); }
.splide__arrow { background:none;  width:5rem; height:5rem;  }
.splide__arrow svg {  fill: #fff;   text-shadow:0 0 10px rgba(0,0,0,0.5);  height: 4rem;  width: 4rem; }
.splide__arrow:disabled {  opacity: 0;}



@media only screen and (min-width: 800px) {
.splide__list a { height:600px; }
.splide__list a .text-wrapper { padding:20px 30px;    font-size:55px; line-height:1;  }
}



@media only screen and (min-width: 1189px) {
.splide__list a { height:800px; }
.splide__list a .text-wrapper { max-width:1366px;left: 50%; width:100%;  transform: translateX(-50%); padding:25px 35px;    font-size:70px; line-height:1;  }
.splide__arrow {   width:7rem; height:7rem;  }
.splide__arrow svg { height: 5rem;  width: 5rem;   }
}

























/* AUDIO PLAYER */


.audio-player-wrapper { margin-bottom: 20px; max-width:700px; }
.audio-player-wrapper p { margin: 0px; }
.audio-player {
  padding: 10px 15px;
  margin: 15px 0 5px;
  background-color: white;
  border: 1px solid black;
  border-radius:50px;
}
.audio-player .player-controls {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.audio-player #playAudio {
  -webkit-appearance: none;
display:block;
  cursor: pointer;
  vertical-align:middle;
  flex: 0 0 30px;

}
.audio-player #playAudio .pictoplaypause {
  -webkit-appearance: none;
 width:15px;
  content: url(/img/playbutton.svg);  vertical-align:middle;
  margin:0 10px 0 5px;
}

.audio-player #playAudio.pause .pictoplaypause {
 content: url(/img/pausebutton.svg);
}
.audio-player #timer {
  flex: 0 0 100px;
  line-height: 1;
  display: inline-flex;
margin:0 10px 0 5px;
}
.audio-player #seekObjContainer {
	flex: 1;
	cursor:pointer;
  position: relative;
  /*width: 300px;*/
  margin: 0 5px;
  height: 10px;
}
.audio-player #seekObjContainer #seekObj {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #e3e3e3; border-radius:10px;
}
.audio-player #seekObjContainer #seekObj #percentage {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: coral;
  border-radius:10px;
}


@media only screen and (min-width: 700px) {
.audio-player-wrapper { margin-bottom: 50px; }

.audio-player {  padding: 15px 20px; }
.audio-player #playAudio { flex: 0 0 80px;}
.audio-player #playAudio .pictoplaypause { width:20px; }
.audio-player #timer { }

}


/* RESPONSIVE VIDEO */

.video-responsive-wrapper { max-width:800px; }

.video-responsive {
  
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}

.video-responsive iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}






/* GALERIE
=============================== */


.galerie-linear { display: flex;    flex-wrap: wrap; }
.galerie-linear a.pic { margin:0 ;  }
.galerie-linear .pic picture { padding:0 5px 5px 0; display:block; }
.galerie-linear .pic picture img {max-height:130px; display:block;   }

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

.galerie-linear {  display: flex;    flex-wrap: wrap; }
.galerie-linear a.pic { margin:0 ;  }
.galerie-linear .pic picture {  padding:0 10px 10px 0;display:block; }
.galerie-linear a.pic picture img {max-height:170px; display:block;   }
.galerie-linear a.pic picture:hover{ opacity:0.8;  }
}