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

#k-carte {
	width: 70% !important;
	float: right !important;
}

.select-style {
    border: 1px solid #ccc;
    width: 100%;
    border-radius: 3px;
    overflow: hidden;
    background: #fafafa url("img/icon-select.png") no-repeat 90% 50%;
}

.select-style select {
    padding: 5px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
	
    font-size: 16px;
}

.select-style select:focus {
    outline: none;
}

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

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

#k-carte-rub .k-carte-active {
	color: #197592;
}

.k-carte-filter-default {
	color: white;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}


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

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

#k-carte-legend > div:not(#k-carte-rub) {
	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: black;
	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%;
}

/* Menuland */

.menuland {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-webkit-transition: opacity 0.5s ease-in-out;
}

.menuland.is-affixed {
	opacity: 1;
	transition: opacity 0.25s ease-in-out;
	-moz-transition: opacity 0.25s ease-in-out;
	-webkit-transition: opacity 0.25s ease-in-out;
}

.inner-wrapper-sticky {
	top: 160px !important;
	width: 200px !important;
	left: 20px !important;
	padding: 0 !important;
}

.table-of-contents {
	position: fixed !important;
}

.inner-wrapper-sticky {
	padding: 20px;
	background: #f5f5f5;
}

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

.table-of-contents ul {
	/* position: fixed; */
	/* Chrome (asshole) */
	/* position: sticky; */
	/* Firefox */
	margin-top: 20px;
	top: 20px;
}

/* TOC part */

.table-of-contents svg {
	position: absolute;
	left: 0;
	top: 50%;
	bottom: auto;
	display: none;
	stroke: #b2c908;
	transform: translateY(-50%);
}

.toc-reading svg {
	display: block;
}

.table-of-contents ul {
	width: 200px;
	counter-reset: articles;
	padding: 0;
}

.table-of-contents li {
	display: block;
	counter-increment: articles;
}

.table-of-contents li + li {
	margin-top: 2em;
}

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

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

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

.table-of-contents a:after {
	content: counter(articles, decimal);
	position: absolute;
	bottom: auto;
	left: 0;
	top: 50%;
	width: 36px;
	height: 36px;
	line-height: 34px;
	text-align: center;
	transform: translateY(-50%);
	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;
}

/* Lefleat FULLSCRREN */
.leaflet-control-fullscreen a {
	background: #fff
		url(/wp-content/plugins/wp_koality/public/img/fullscreen.png) no-repeat
		0 0;
	background-size: 26px 52px;
}
.leaflet-touch .leaflet-control-fullscreen a {
	background-position: 2px 2px;
}
.leaflet-fullscreen-on .leaflet-control-fullscreen a {
	background-position: 0 -26px;
}
.leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a {
	background-position: 2px -24px;
}

/* Do not combine these two rules; IE will break. */
.leaflet-container:-webkit-full-screen {
	width: 100% !important;
	height: 100% !important;
}
.leaflet-container.leaflet-fullscreen-on {
	width: 100% !important;
	height: 100% !important;
}

.leaflet-pseudo-fullscreen {
	position: fixed !important;
	width: 100% !important;
	height: 100% !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 99999;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.leaflet-control-fullscreen a {
		background-image: url(/wp-content/plugins/wp_koality/public/img/fullscreen@2x.png);
	}
}

@media all and (max-width: 479px) {
	#k-carte-rub span {
		display: block;
		text-align: center;
	}

}