.drawer {
  height: 100%;
  width: 230px;
  position: fixed;
  z-index: 10;
  top: 0;
  left: -350px;
  background-color: #111;
  overflow-x: hidden;
  overflow-y: scroll;
  transition: 0.5s ease;
  z-index: 500;
  padding: 20px;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 15px;
  background-color: #ffffff;
}

.drawer-thumbnails {
  height: 100%;
  width: 130px;
  position: fixed;
  z-index: 10;
  top: 0;
  left: -130px;
  align-content: left;
  overflow-x: hidden;
  overflow-y: scroll;
  transition: 0.5s ease;
  z-index: 500;
  font-size: 15px;
  color: #ffffff;
  text-decoration: none;
}

.drawer-toc {
  height: 100%;
  width: 230px;
  position: fixed;
  z-index: 10;
  top: 0;
  left: -350px;
  background-color: #111;
  overflow-x: hidden;
  overflow-y: scroll;
  transition: 0.5s ease;
  z-index: 500;
  padding: 20px;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 15px;
  background-color: #ffffff;
}

.drawer-glossaire {
  height: 100%;
  width: 230px;
  position: fixed;
  z-index: 10;
  top: 0;
  left: -350px;
  background-color: #111;
  overflow-x: hidden;
  overflow-y: scroll;
  transition: 0.5s ease;
  z-index: 500;
  padding: 20px;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 15px;
  background-color: #ffffff;
}


.drawer-thumbnails::-webkit-scrollbar {
  display: none;
  } 

.drawer-glossaire::-webkit-scrollbar {
  display: none;
  } 




.glossaire-lettre {
  font-size: 30px;
  color: #493823;
  font-weight: bolder;
  margin-top: 50px;
  margin-bottom: -10px;
}

.glossaire-word {
  font-size: 18px;
  color: #493823;
}

.glossaire-definition {
  font-size: 14px;
  color: #cfb595;
  margin-bottom: -0px;
}

p.glossaire-definition {
  font-size: 14px;
  color: #cfb595;
  margin-top: -10px;
}

.glossaire-spacer-top {
  width: 100px;
  height: 10px;
  opacity: 0;
}

.glossaire-definition a {
  color: #cfb595;
}

.glossaire-definition a:hover {
  color: #cfb595;
}

.glossaire-definition a:visited {
  color: #cfb595;
}

.glossaire-definition a:visited:hover {
  color: #cfb595;
}




.menu-links a {
  font-size: 20px;
  color:#493823;
  text-decoration: none;
  line-height: 120%;
  border-bottom: none;
}

.menu-links a:hover {
  color:#cfb595;
  text-decoration: none;
}

.menu-links a:visited {
  color:#493823;
  text-decoration: none;
}

.menu-links a:visited:hover {
  color:#cfb595;
  text-decoration: none;
}

.menu-titre {
  font-size: 26px;
  color: #493823;
}

.menu-subtitles {
  font-size: 14px;
  color: #493823;
  padding-left: 0px;
}

p.menu-subtitles {
  font-size: 14px;
  color: #cfb595;
  margin-top: -10px;
}

p.menu-subtitles a{
  font-size: 14px;
  color: #cfb595;
  margin-top: -10px;
  border-bottom: none;
}

p.menu-subtitles a:hover{
  font-size: 14px;
  color: #cfb595;
  margin-top: -10px;
  border-bottom: none;
}




.toc-links a {
  color:#735f47;
  text-decoration: none;
  border-bottom: none;
  font-size: 18px;
  line-height: 0.8;
}

.toc-links a:hover {
  color:#493823;
  text-decoration: none;
}

.toc-links a:visited {
  color:#cfb595;
  text-decoration: none;
}

.toc-links a:visited:hover {
  color:#493823;
  text-decoration: none;
}


.toc-titre {
  font-family: 'ClearfaceStd-Regular', serif;
  font-size: 24px;
  color: #493823;
}

.drawer-overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 401;
  top: 0;
  background-color: #3d332a;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s ease;
}


.drawer-toc::-webkit-scrollbar {
  display: none;
  } 



.openbtn-menu {
  position: fixed;
  font-size: 20px;
  cursor: pointer;
  background-color: #cfb595;
  color: white;
  width: 50px;
  height: 50px;
  border: none;
  top: 0px;
  left: 0px;
  outline:none;
  z-index: 400;
  margin-right: 10px;
  transition: .3s ease;
}

.openbtn-menu:hover {
  background-color: #5d1229;
  transition: .3s ease;
}

.openbtn-toc {
  position: fixed;
  font-size: 20px;
  cursor: pointer;
  background-color: #cfb595;
  color: white;
  width: 50px;
  height: 50px;
  border: none;
  top: 50px;
  left: 0px;
  outline:none;
  z-index: 400;
  margin-right: 10px;
  transition: .3s ease;
}

.openbtn-toc:hover {
  background-color: #513e2f;
  transition: .3s ease;
}

.openbtn-glossaire {
  position: fixed;
  font-size: 20px;
  cursor: pointer;
  background-color: #cfb595;
  color: white;
  width: 50px;
  height: 50px;
  border: none;
  bottom: 0px;
  left: 0px;
  outline:none;
  z-index: 400;
  margin-right: 10px;
  transition: .3s ease;
}

.openbtn-glossaire:hover {
  background-color: #513e2f;
  transition: .3s ease;
}


.transcript-btn {
  font-size: 20px;
  background-color: #cfb595;
  text-align: center;
  vertical-align: middle;
  width: 50px;
  height: 50px;
  position: relative;
  bottom: 25px;
  left: 0px;
  outline:none;
  cursor:pointer;
  z-index: 10;
  transition: .3s ease;
}

.transcript-btn:hover + .transcript-modale {
  display:block;
  transition: .3s ease;
}

.transcript-btn:hover{
  background-color: #513e2f;
  transition: .3s ease;
}

.transcript-modale {
  display:none;
  opacity: 1;
  background: #c0a789;
  position: relative;
  top: -75px;
  left: 0;
  padding: 40px;
  padding-left: 60px;
  padding-right: 60px;
  margin-left: 0px;
  width: 180px;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 15px;
  color: #ffffff;
  text-decoration: none;
  z-index: 1;
  overflow-y: scroll;
}

.thumbnails {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
}

#nav {
  transition: margin-left .5s ease;
}