@import url('https://fonts.googleapis.com/css?family=Sriracha');

html, body {height: 100%; font-family: sans-serif;  -ms-text-size-adjust: 100%;  -webkit-text-size-adjust: 100%;}
body {min-height:100%; padding:0; margin:0; line-height: 1.25; height: auto; position: relative; font-family: Helvetica, "Helvetica Neue", Arial, Gotham, "sans-serif"}
#conteneur{min-height:100%; width:100%;}
.container {width: 1170px; margin: 0 auto; }
img{border:0; max-width:100%; height: auto;} #map{ max-width:100% ;} #map img{  max-width: none !important;}
.width100pc{width:100%;} .invisible{display:none;}


a, p, td, li{ color:#222222; text-decoration:none }
main a{ color:#897367;  }
main a:hover{ text-decoration: underline}
h1, .titre1{ font-size:160%; font-weight:normal; padding:10px 0 8px 64px; margin:0 0 .7em 0; font-family: 'Sriracha', cursive;
background-image:url(/charte/titre1.png); background-repeat:no-repeat; background-position: 4px ; color:#000;background-color:#DAB4125E;}
.page-arto h1, .page-arto .titre1{ color:#fff;background-image:url(/charte/titre1-blanc.png); background-color:#416f97;}
.page-media h1, .page-media .titre1{ color:#fff;background-image:url(/charte/titre1-blanc.png); background-color:#7B5E50;}
.page-media .titre1 *, .page-arto .titre1 * { color:#fff;}
.titre1{ display:block}
.titre1 p{ margin:0}
.page-arto .titre1 p{ color:#fff}
.page-arto .titre1 p{ color:#fff}
h2{ font-size:1.5em; margin:.3em 0 .5em 0; }
h3{ font-size:1.3em; color: #C91F4B; margin:.2em 0 .4em 0; }
.page-arto h3{ color: #416f97; }
.page-media h3{ color: #7B5E50; }
h4{ font-size:1.2em;  margin:.1em 0 .3em 0; font-family: 'Sriracha', cursive;}
.legende{ font-size:90% ; color:#555555; }
.image_ombree{ width:auto; }
.image_ombree img{box-shadow:0px 0px 4px #545454; -moz-box-shadow:0px 0px 4px #545454; -webkit-box-shadow:0px 0px 4px #545454; }
ul.enligne, .enligne{margin:0; padding:0; list-style-type:none; }
ul.enligne li, .enligne a{ list-style-type:none; margin:0; padding:0; display:inline; }
main ul{ padding-left:1.2em}
main ul li, main ul li ul li{ margin:0; margin-left:.1em}
.invisible{display:none;}

/* HEADER */
header {width:100%; position:relative; }
.header-line{ position:relative}
#logo{ padding:0 0 0 0; top:0; left:12%; position:absolute;  z-index:20; max-width:250px; }
.vague{ background-image:url(/charte/vague.png) ;  background-repeat:no-repeat; background-position:-40px center; background-size:100% 100%; 
  width:58%; height:138px;  /*! z-index:3; */ top:0; left:0; position:absolute; right:auto; bottom:auto }
.slogan{ position:absolute; top:20px; right:30px; background:url(/charte/slogan.png) center center no-repeat ; background-size:100% 100%; 
  width:260px; height:214px; text-align:center; padding:60px 30px 10px 58px; font-size:120%; font-style: italic }
.page-media .slogan{ padding:78px 20px 0px 64px; }
.page-arto .slogan{ background:none; padding:60px 30px 0 0; }
.slogan span{font-family: 'Sriracha', cursive; font-size:140%; text-transform: uppercase; font-style: initial}
.page-media .slogan span{font-size:130%; text-transform: none; }

/* diaporama */
#diaporama{ width:100%; float:left; overflow:hidden; position:relative; border-bottom: 3px solid #A5958D; }
#bis_images{float:left; width:100%; text-align:center; overflow:hidden; position:absolute; top:0; left:0; right:0; bottom:0 }
.bis_image{ width:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; top:0; left:0; right:0; bottom:0 }
#bis_container{position:relative;  width:100%; height: 28vw; }
#bis_caption{ position:absolute; bottom:15%; left:60px; right:60px }
.bis_title{ color:#fff; font-size:280%; text-shadow: 0 1px 4px rgba(0,0,0,0.9); margin:0; font-family: 'brannboll_f_personal_use_onRg'; }
/*puces*/
#bis_position{ text-align:center; z-index:20; position:absolute; bottom:5%; left:60px; right:60px}
*+html .thumbNav li, *+html .thumbNav a{float:left; display:block;}
ul.thumbNav{padding:0; margin:0; list-style-type:none; text-align:center}
.thumbNav a{cursor:pointer; border:1px solid #ffffff; border-radius:10px; -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.2);
box-shadow: 0 0 3px 1px rgba(0,0,0,0.2); overflow:hidden; text-indent:-1000px;  color:transparent; width:14px; height:14px; line-height:14px; display:block; margin:4px;}
.jFlowSelected, .thumbNav a:hover, .thumbNav a.cur{ background:#ffffff; }
.thumbNav li{list-style-type:none; padding:0; display:inline-block}
/*fleches*/
#bis_next, #bis_back{width:40px; height:40px; font-weight:700; font-size:140%;
  top:50%; position:absolute; z-index:20; cursor:pointer; opacity:1;  text-align:center;}
#bis_next{ right:0}
#bis_next:before{ content: url(/charte/right.png); color:#fff; width:40px; height:40px;  }
#bis_back{left:0; }
#bis_back:before{ content: url(/charte/left.png); color:#fff; width:40px; height:40px;  }
#bis_next:hover, #bis_back:hover{opacity:0.8;}

/* bandeau */
#bandeau{ position:relative; overflow:hidden; width:100%; float:left; height: 22vw; min-height:160px; z-index:-10 }
.bandeau{background-repeat: no-repeat; background-position: center center; background-size:cover;}

/* Top-line */
.header-line{background-color: #21195B; width:100%; float:left;}
.page-media .header-line{background-color: #7B5E50; width:100%; float:left;}
.page-arto .header-line{background-color: #416f97;}
.top-line{ width:100%; float:left; padding:8px 10px; background:#fff; border-top: 3px solid #DAB412; border-bottom: 3px solid #DAB412;}
/* reseaux sociaux */
.pictos{ float:right; display: flex; align-items: center;}
.pictos a{ float:left; margin:0 10px}
/* moteur */
#moteur{position:relative; float:right; width:160px; margin:0 10px }
#moteur .moteur{ border: 2px solid #DAB412; width:100%; color:#222222; font-style: italic; height:24px; line-height:24px; 
  font-size:90%; text-indent:7px;   background: #fff; border-radius:6px}
#moteur .ok{position:absolute; right:4px; top:4px; border:none}

/* MENU HAUT */ 
nav{ /*! z-index:2; */ position:relative;float:left;width:100%; color: #ffffff; height: auto; 
  display: block;text-align:right; }
nav #menu{ display: table; width:100%; padding-left:36%; z-index: 20; }
nav dl, nav dt, nav dd, nav ul, nav li{ margin:0; padding:0; list-style-type: none;}
nav dl { position:relative; display:table-cell; text-align:center }
nav dl dt a{display:block; font-size:110%; color:#fff; padding:18px 12px 12px 12px; text-decoration:none; font-weight:600 }
nav dl.menu0active dt a, nav dl dt a:hover{ text-decoration:none; background:#fff; color:#21195B }
.page-arto nav dl.menu0active dt a, .page-arto nav dl dt a:hover{ color:#7B5E50 }
.page-media nav dl.menu0active dt a, .page-media nav dl dt a:hover{ color:#7B5E50 }

/*survol*/
nav dd{ position:absolute; height:0px; overflow:hidden; opacity:0; z-index:200; top:100%;  width:100%;min-width:200px;
left:0; background-color:#21195B; padding:0; text-align:left }
.page-arto nav dd{  background-color:#416f97;}
.page-media nav dd{ background-color:#7B5E50}
nav dl:hover dd{ height:auto; opacity:1; overflow:visible; 
-moz-box-shadow: 0px 6px 6px 0px  rgba(0,0,0,0.4); -webkit-box-shadow: 0px 6px 6px 0px  rgba(0,0,0,0.4);
-o-box-shadow: 0px 6px 6px 0px  rgba(0,0,0,0.4);box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.4); }
nav dd a{color:#fff; display:block; padding:10px 6px 8px 12px; font-size:95%; text-decoration:none; text-transform: none; 
  border-bottom:1px dotted #fff ;  border-top:1px dotted #fff }
nav dd a:hover{ background:#fff; color:#21195B}

/* colD */
.liens-utiles { padding:20px 0;  }
.liens-utiles ul {padding: 5px 0; margin:0; display: flex; width: 100%;flex-direction: row;
flex-wrap: wrap;align-items: stretch;}
.liens-utiles li {list-style: none; text-align:center;position: relative; margin: 5px 0;width: 33.33%;
display: flex;flex-direction: column;flex-wrap: wrap;align-items: stretch; padding:0 0.5%}
.liens-utiles li span{ display:block; margin:5px}
.liens-utiles li img{ display:block;}
.liens-utiles li a {color: #000; text-decoration: none; font-size: 110%; font-weight: 500; display:block; }

/* MenuLat */
#titre_rub, .haut_menuLat, .bas_menuLat, .Sous_menu_dyn_haut, .Sous_menu_dyn_bas{ display: none }
.menuLat ul, .menuLat li { margin: 0; padding: 0; list-style-type: none; clear: both; }
.menuLat > ul{ width:100%; padding:12px 0; background:#ffffff }
.menuLat a { text-decoration: none; display: block; }
.menuG-2 a, .menuGactive-2 a{  padding: 10px 6px 10px 18px; color: #000; font-size:105%; border-bottom:1px solid #857d73; background:#fff; }
.menuGactive-2 a, .menuG-2 a:hover{ color:#ffffff; background: #857d73; border-bottom:1px solid #fff;}
.menuG-3 a, .menuGactive-3 a { padding: 8px 6px 8px 28px;; color: #333333; font-size:90%;border-bottom:1px dotted #857d73; background:#fff; }
.menuGactive-3 a, .menuG-3 a:hover{color:#fff; background: #857d73; border-bottom:1px dotted #fff;}
.menuG-3 a::before, .menuGactive-3 a::before{ content:"→ "}
.menuG-4 a, .menuGactive-4 a { padding: 6px 6px 6px 40px; color: #555555; font-size:85%; border-bottom:1px dotted #857d73; background:#fff; }
.menuGactive-4 a, .menuG-4 a:hover{ color:#fff; background: #857d73; border-bottom:1px dotted #fff;}
.menuG-4 a::before, .menuGactive-4 a::before{ content:"- "}
/* contact */
.page-int .contact-nous{ padding:18px; background:#857d73; margin:15px 0}
.page-int .contact-nous *{ color:#ffffff}

/*- zone centrale -*/
main{ padding-bottom:30px;width:100%; float:left; background:url(/charte/frise.png) center bottom no-repeat; padding-bottom:12.5vw; background-size:contain}
main .container{ padding-top:30px; padding-bottom:30px;}

/* FIL D'ARIANE */
#div_lien_yahoo{ margin:0 0 30px 0; width:100%; float:left}
.lien_yahoo, .lien_yahoo a, #div_lien_yahoo {text-decoration:none; line-height:1em; font-size:90%; color:#888; font-style:italic}

/*Footer*/
footer{width:100%; float:left; }
.page-int .footer{ /*! border-top:5px solid #857d73; */ }
/* footer haut */
.footer-haut{ display:none}
.footer-haut *{ color:#fff }
/* liens footer */
#liens-footer{ width:100%; float:left; text-align: center; padding-top:15px; padding-bottom:15px; color:#fff; background:#C91F4B;  }
.page-arto #liens-footer{ background:#416f97;  }
.page-media #liens-footer{ background:#7B5E50;  }
#liens-footer a{ color:#fff; text-decoration:none }

/* Sitemap footer */
.plan-site{ width:100%; float:left; padding:20px 0; background:#A5958D; border-bottom:1px solid #fff; border-top:3px solid #fff}
.page-arto .plan-site{ background:rgba(65,111,151,0.5); }
.sitemap ul, .sitemap li{margin:0; padding:2px; list-style-type:none; color:#fff }
.sitemap dd{ margin:15px 0; font-size:90%}
.sitemap a{ color:#fff}
.page-arto .sitemap a{ color:#000}
.sitemap{ display: table; width:100%; }
.sitemap #menu > dl{  position:relative; display:table-cell; text-align:left; min-width:15%}
.sitemap dl dt a{ font-weight:bold}


/*Bouton retour haut de page*/
#btn-up{ display:none; background: #C91F4B url("/charte/retour-haut.png") center 6px no-repeat; box-shadow: 2px 3px 7px #323232; color: white;
 cursor: pointer; font-size: 0.833em; line-height: 1.167em;  padding: 38px 0 5px 0; position: fixed; right: 0; text-align: center; bottom:35px;
 width: 70px; z-index: 501; }
.page-arto #btn-up{ background-color:#416f97}
.page-media #btn-up{ background-color:#7B5E50}

/*ACTUALITES*/
.actu-bloc{ overflow:hidden; margin:10px 0;  text-align:center }
.actu-img img{ width:100%}
.actu-info{ position: absolute; left:20px; right:20px; bottom:0; top:0; transition: all 0.5s ease-out; padding:20px ;
  background:rgba(133,125,115,0.85); color:#ffffff; text-align:center; opacity:0}
.actu-bloc:hover .actu-info{ opacity:1}
.actu-titre{ font-weight:bold; font-size:110%; margin:10px 0}
a.actu-lien{  position: absolute; left:48%; bottom:20px; height:36px; width:36px; line-height:36px; 
  font-size:30px; color:#fff;font-weight:bold;  background:rgba(133,125,115,1);}

/* Landing */
.listSousMenu{ display: flex; width:100%; flex-direction: row;flex-wrap: wrap; align-items: stretch; text-align:center;}
.Liste_Sous_menu{position:relative; overflow: hidden; border:1px solid rgba(0, 0, 0, .2); margin:10px 1.3% 10px 1.3% ;padding:0 0 44px 0; width: 30.6%; 
display: flex;flex-direction: column;flex-wrap: wrap;align-items: stretch;}
.sous_menu_item_image{ max-height:176px; overflow: hidden}
.sous_menu_item_titre{ text-align:center; display:block; padding:10px ; position:absolute; left:0; right:0; bottom:0; 
background:#ffffff}

/*ACTUALITES*/
.actu{ width:100%; float:left}
.actu .titre1{ position:absolute; z-index:2; top:0; left:0; padding-right:35px; background-color:rgba(255,255,255,0.8); 
background-image:url(/charte/titre1-rose.png); color:#C91F4B; margin:0 }
.title-block {display: block; width: auto !important;}
.jflow-content-slider {position: relative;}
.jflow-content-slider, #jFlowSlide {width: 100% !important;}
#jFlowSlide {max-height: 490px;}
.slide-thumbnail {width: 100% !important; margin: 0 !important;}
.slide-thumbnail img {height: 100%; max-width: 300% !important; max-height: 100% !important; min-width:100%}
.slide-details {position: absolute; top: auto; right: 0; left:0; bottom: 0; background: rgba(255,255,255,0.8); padding: 15px;}
.News_titre a { font-size: 120%; color:#C91F4B ; text-decoration: none; font-family: 'Sriracha', cursive;}
.News_resume p {color: #000;}
.News_lien a {color: #000; font-weight: 700; text-decoration: none; text-align: right; width: 100%; display: inline-block;}
.jFlowControl {display: none;}
/*fleches*/
#myController {position: absolute; top: 40%; left: 0; width: 100% /*! display:none */}
.jFlowPrev, .jFlowNext{width:40px; height:40px; font-weight:700; font-size:0;
  top:50%; position:absolute; z-index:2; cursor:pointer; opacity:1;  text-align:center;}
.jFlowNext{ right:0}
.jFlowNext:before{ content: url(/charte/right.png); color:#fff; width:40px; height:40px;  }
.jFlowPrev{left:0; }
.jFlowPrev:before{ content: url(/charte/left.png); color:#fff; width:40px; height:40px;  }
.jFlowNext:hover, .jFlowPrev:hover{opacity:0.8;}

.News_titre a:hover, #lien-plus a:hover {text-decoration: none !important;}

/*ACTUS EN DETAIL*/
.bloc-news { padding:10px 25px;float:left; width:100%; background:#f2ece8; margin-bottom:15px; border-bottom:1px solid #E3D7CD}
.titre-news {text-decoration: none;  font-family: 'Sriracha', cursive;}
.img-news {width: 48%; float:right }
.bloc-news .image_droite, .bloc-news .image_gauche{ max-width:96%; float:right; margin:0}

/* meteo */
#tameteo { text-align:center}

.tout a{ display:block;background:#21195B; text-align:right; padding:2px 15px; color:#fff}
.page-media .tout a{ background:#7B5E50;}
.tout a::after{ content:" >"}
.tout p{ margin:0}


/* newsletter */
.newsletter{ background:rgba(227,215,205,0.5); width:100%; float:left; margin:10px 0}
.page-arto .newsletter{ background:rgba(65,111,151,0.5); }
.newsletter span{ font-family: 'Sriracha', cursive; text-align: center; display:block; padding:10px }
.newsletter form{ padding:10px 20px; text-align:center}
.input-saisie{ display:block; width:100%}
.ok2{ background: #C91F4B; color:#fff; padding:3px 20px; margin:5px }
.page-arto .ok2{ background: #416f97}
.page-media .ok2{ background: #7B5E50}

/* oeuvre */
.bloc-oeuvre-accueil{ text-align:center; margin-bottom:10px; width:100%; float:left;}
.page-accueil .img-oeuvre img{ width:100%}

#liste-oeuvres {  display: flex; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: stretch;}
.bloc-oeuvre { position: relative; overflow: hidden; margin: 10px 1% 12px 1%; text-align:center; padding:2px;
    width: 31.33%; display: flex; flex-direction: column;  flex-wrap: wrap;  align-items: stretch; 
box-shadow:0px 0px 4px #545454; -moz-box-shadow:0px 0px 4px #545454; -webkit-box-shadow:0px 0px 4px #545454;}
#liste-oeuvres .bloc-img-oeuvre{ height:12vw; max-height:240px; overflow:hidden; min-height:100px}
.agrandi{ position:absolute; z-index:2; top:30%; left:45%; background:rgba(255,255,255,0.5); padding:5px; width:30px; height:30px; line-height:25px; border-radius:15px;}
.infos-oeuvre{ padding:4px;}

.titre-form{ font-weight:bold}
input{ border:1px solid #999; border-radius:4px}
form p{ font-size:90%; color:#777; margin:.2em 0 0 0}
.input-light{ max-width:70px}
.ligne-form{ margin:4px 0}
#div-annees label{ clear:both}
.page-accueil #div-oeuvre .titre-form{ float:left; margin-right:8px}
#actions-form{ text-align:right}
#actions-form input{ padding:3px 16px}
#colD .col-md-6{ width:100%}
#colD .titre-form{ display:block}
#div-annees input{ max-width:70px}
#colD #div-annees span{ display:block; margin:2px 0}
#div-dispo-oeuvre  .titre-form{ display:inline}
/*nuage de tags*/
.nuagetags{ margin:15px 0}
.nuage ul{ margin:0; padding:12px; border:1px solid #aaa; border-radius:6px; margin:8px 0; text-align:center}
.Tagcloud{ list-style-type:none; margin:0 6px; padding:0; display:inline-table}
.Tag0{font-size:90%; color:#416f97; font-weight:normal;}
.Tag1{font-size:100%; color:#0E9450; font-weight:bold}
.Tag2{font-size:110%; color:#2B3B47}
.Tag3{font-size:120%; color:#94133A }
.Tag4{font-size:130%; color:#94133A}
.Tag5{font-size:140%; color:#000; font-weight:bold}

/* annuaire */
.list-annu {     display: flex;width: 100%;flex-direction: row;flex-wrap: wrap;align-items: stretch;}
.bloc-annu{ position: relative;overflow: hidden; margin: 5px .5% 5px .5%;width: 49%; padding:10px 12px 26px 12px ; border:1px solid #857d73;
  display: flex;flex-direction: column;flex-wrap: wrap;align-items: stretch; position:relative}
.annuaire-nom{ font-weight:bold; text-transform:uppercase}
.annuaire-famille{ font-style:italic}
.annuaire-info{ font-weight:bold; color:#857d73; }
.annuaire-adresse{ margin-top:10px}
.annuaire-lien-detail{ background:#857d73; color:#fff; position:absolute; right:0; bottom:0; padding: 3px 12px}
.annuaire-logo img{ float:right; margin:0 0 10px 15px}
.annu-retour{ margin:15px 0}
.annu-retour a{ background:#857d73; color:#fff; padding: 3px 12px; }

/*plan du site*/
.PLAN0 a, .PLAN1 a, .PLAN2 a, .PLAN3 a{text-decoration:none !important}
.PLAN0{ padding-bottom:0.1em; margin-top:0.7em}
.PLAN0 a{ font-size:1.6em; margin:.3em 0 .5em 0;}
.PLAN1{list-style-type:none; margin:10px 0;}
.PLAN1, .PLAN1 a{color:#0095C7;}
.PLAN1 a{font-size:1.5em; color: #C91F4B; margin:.2em 0 .4em 0;  }
.PLAN2{list-style-type:disc; font-weight: normal}
.PLAN2 a{color:#333333; font-size:1em}
.PLAN3{ font-size:.9em;  margin:.1em 0 .3em 0; }
.PLAN3 a{font-weight:normal; color:#333333; margin:1px 0;}
.PLAN4{list-style-type:disc; color:#CFDDEB; margin:0 0 0 25px;}
.PLAN4 a{color:#333333;  font-size:0.9em;}

/* .facebook{ display:none} */
.newsletter{ display:none}
.page-media .newsletter{ display:block}

/* css illicobilite */

:root{
  --logo_text: #ffffff;
  --logo_text_hover: #ffffff00;
  --backgound: #A5958D;
  --checkbox: black;
  --size: 15px;
}

.gray{
  filter: grayscale(1);
}

.inverter{
  filter: invert(1);
}

#custom-accessibility-menu {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: start;
  z-index: 99;
  bottom: 5vh;
  left: -1px;
}

#bt_menu_acessibilite {
  font-size: 16px;
  margin: 5px;
  cursor: pointer;
  border: none;
  color: var(--logo_text);
  text-align:start;
  padding: 5px;
  font-family:"Montserrat", sans-serif;
}

#bt_menu_acessibilite svg{
  fill: var(--logo_text);
  padding-right: 5px;
  height: 20px;
  width: 20px;
  padding-top: 7px; 
}

#bt_menu_acessibilite:hover {
  background-color: var(--logo_text_hover);
  color: var(--logo_text);
}

.bt_accesibilite{
  display: flex;
  padding: 7px;
  background-color: var(--backgound);
  border-radius: 10px;
  height: min-content;
  position: relative;
  left: -2px;
  margin-left: 10px;
}

.bt_accesibilite svg{
  width: 30px;
  height: 30px;
  fill: var(--logo_text)!important;
}

.menu_acessibilite{
  display: none;
  flex-direction: column;
  padding: 10px;
  background-color: var(--backgound);
  border-radius: 0 10px  10px 0;
  float: left;
  text-align: center;
  max-width: 280px;
  min-width: 0;
}

.liensoulines{
  text-decoration: underline!important;
}

.title_acessibilite{
  font-weight: 700;
  font-size: 1.3em;
  font-family:"Montserrat", sans-serif;
  color: var(--logo_text);
  margin: 0;
  margin-bottom: 15px;
}

@font-face {
  font-family: 'opendyslexic';
  src: url('../fonts/dyslexic.ttf');

} 

.opendyslexic{
  font-family: 'opendyslexic', eulexia!important;
}



#custom-accessibility-menu details div{
  text-align: start;

}

#custom-accessibility-menu details summary{
  color: var(--logo_text);
  list-style: none;
  list-style-type: none;
}

#custom-accessibility-menu details summary::-webkit-details-marker{
  display: none;
}

/*------ Settings ------*/
#custom-accessibility-menu .container {
  position: relative;
  cursor: pointer;
  font-size: var(--size);
  user-select: none;
  fill: var( --logo_text);
}

#custom-accessibility-menu .container svg{
  height: var(--size)!important;
  width: var(--size)!important;
}

#custom-accessibility-menu .container .play {
  /* position: absolute; */
  animation: keyframes-fill .5s;
  padding: 0px !important;
}

#custom-accessibility-menu .container .pause {
  /* position: absolute; */
  display: none;
  animation: keyframes-fill .5s;
  padding: 0px !important;
}

/* ------ On check event ------ */
#custom-accessibility-menu .container input:checked ~ .play {
  display: none;
}

#custom-accessibility-menu .container input:checked ~ .pause {
  display: inline;
}

/* ------ Hide the default checkbox ------ */
#custom-accessibility-menu .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* ------ Animation ------ */
@keyframes keyframes-fill {
  0% {
    transform: rotate(-180deg) scale(0);
    opacity: 0;
  }

  50% {
    transform: rotate(-10deg) scale(1.2);
  }
}


#custom-accessibility-menu #config_lecaudio_d div{
  display: flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  color: var(--logo_text);
}

#custom-accessibility-menu #config_lecaudio_d select, #custom-accessibility-menu input{
  width: min-content;
  max-width: 70%;
  background-color: var(--logo_text);
  color: var(--checkbox);
  border-radius: 20px!important;
  width: min-content;
  padding: 3px 10px!important;
}

#custom-accessibility-menu summary::before {
  content: "+"; 
  margin-left: 5px; 
  float: right; 
}

#custom-accessibility-menu details[open] summary::before {
  content: "-"; 
}