/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

#et-boc {
  position: relative;
}

#k-carte-rub {
  color: #7eabb9;
  text-align: center;
  margin: 20px 0 40px 0;
}

#k-carte-rub span {
  display: inline-block;
  width: 15%;
  text-transform: uppercase;
  font-size: 16px;
  cursor: pointer;
}

.k-carte-active,
#k-carte-legend .k-carte-active {
  display: block;
  color: white;
}

#k-carte-legend {
  width: 20%;
  float: left;
  background: #ff7e66;
  padding: 30px;
  height: 400px;
}

#k-carte-legend > div {
  display: none;
}

#k-carte-legend h3 {
  color: white;
  margin: 30px 0 30px 0;
}

#k-carte-legend ul {
  padding: 0;
  margin: 0;
}

#k-carte-legend .circle {
  background: white;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ff7e66;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 10px;
  text-align: center;
  width: 1.6em;
}

#k-carte-legend ul {
  list-style-type: none !important;
}

.leaflet-div-icon {
  background: transparent !important;
  border: none !important;
}

.leaflet-marker-icon .number {
  position: relative;
  top: -29px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  width: 24px;
  text-align: center;
}

.leaflet-container .leaflet-marker-pane img {
  width: 100%;
}

/* Sticky-menu */
#sticky-menu,
.table-of-contents {
  position: absolute;
}

#sticky-menu p,
.table-of-contents p {
  text-transform: uppercase;
  letter-spacing: 0.125em;
  color: #555;
}

h1:first-child {
  margin-top: 0;
}

.post-content {
  -ms-flex-preferred-size: 600px;
  flex-basis: 600px;
  max-width: 100%;
}

/* TOC part */
#sticky-menu svg,
.table-of-contents svg {
  position: absolute;
  left: 0;
  top: 50%;
  bottom: auto;
  display: none;
  stroke:#ff7e66;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.toc-reading svg {
  display: block;
}

#sticky-menu ul,
.table-of-contents ul {
	padding: 0;
	list-style : none;
	counter-reset: articles;
}

#sticky-menu li,
.table-of-contents li {
	counter-increment: articles;
}

#sticky-menu  li + li,
.table-of-contents li + li {
  margin-top: 2em;
}

#sticky-menu a,
.table-of-contents a {
  display: block;
  padding: 0 0 0 3.2em;
  position: relative;
  text-decoration: none;
  font-weight: bold;
}

a.toc-reading,
a.toc-already-read.toc-reading {
  color: #ff7e66;
  opacity: 1;
}

a.toc-already-read {
  opacity: 0.4;
}

#sticky-menu a:before,
.table-of-contents a:before {
  content: counter(articles, decimal);
  position: absolute;
  bottom: auto;
  left: 0;
  top: 50%;
  width: 36px;
  height: 36px;
  line-height: 34px;
  text-align: center;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
  transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #d9d9d9 inset;
  color: #4d4d4d;
}

@media all and (max-width: 479px) {
  #main-footer span,
  #k-carte-rub span {
    display: block;
    text-align: center;
    width: 100%;
    padding: 15px;
  }
  footer#main-footer span:after {
    bottom: 0 !important;
    top: auto !important;
    right: auto !important;
    left: 0 !important;
    height: 1px !important;
    width: 100% !important;
  }

  .kiosque .et_pb_blurb_0.et_pb_blurb,
  .kiosque .et_pb_blurb_1.et_pb_blurb,
  .kiosque .et_pb_blurb_2.et_pb_blurb {
    margin-top: 111px !important;
    margin-bottom: 110px !important;
  }
}