/* ------------------------------------------------ */
/*           LEAFLET GESTURE HANDLING               */
/* ------------------------------------------------	*/

/* before pseudo is the background */
.leaflet__gestures::before {
    pointer-events: none;

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: '';
	z-index: 401;

	background: #000;

	opacity: 0;
}
.leaflet__gestures.leaflet__gestures--hide::before {
	-webkit-animation: leaflet-gestures-background-fadeout 0.8s forwards;
	        animation: leaflet-gestures-background-fadeout 0.8s forwards;
}
.leaflet__gestures.leaflet__gestures--shown::before {
	-webkit-animation: leaflet-gestures-background-fadein 0.8s forwards;
	        animation: leaflet-gestures-background-fadein 0.8s forwards;
}
.leaflet__gestures--mob-detailed {
	display: none;
}

/* after psuedo is the message */
.leaflet__gestures::after {
    pointer-events: none;

	color: #fff;
	text-align: center;
	font-size: 28px;
	text-shadow: 2px 2px 5px #000;
	margin: 0;
	padding: 0 5%;

	content: 'Use ctrl + scroll to zoom the diagram';

	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	z-index: 402;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);

	opacity: 0;
}
.leaflet__gestures.leaflet__gestures--hide::after{
	-webkit-animation: leaflet-gestures-message-fadeout 0.8s both;
	        animation: leaflet-gestures-message-fadeout 0.8s both;
}
.leaflet__gestures.leaflet__gestures--shown::after {
	-webkit-animation: leaflet-gestures-message-fadein 0.8s both;
	        animation: leaflet-gestures-message-fadein 0.8s both;
}

/* alternative leaflet gesture messages */
.leaflet__gestures--win::after {
	content: 'Use ctrl + scroll to zoom the diagram';
}
.leaflet__gestures--mac::after {
	content: 'Use ⌘ + scroll to zoom the diagram';
}
.leaflet__gestures--mob::after {
	content: ' ';
}

/* special mobile case with icon */
.leaflet__gestures--mob .leaflet__gestures--mob-detailed {
	pointer-events: none;

	display: initial;
	position: absolute;
	z-index: 401;
	height: 80px;
	margin: auto;

	top: calc(50% - 160px);
	left: 0;
	right: 0;
	margin: auto;
	-webkit-transform: translateY(50%);
	        transform: translateY(50%);

	opacity: 0;
}
.leaflet__gestures--hide.leaflet__gestures--mob .leaflet__gestures--mob-detailed {
	-webkit-animation: leaflet-gestures-message-fadeout 0.8s both;
	        animation: leaflet-gestures-message-fadeout 0.8s both;
}
.leaflet__gestures--shown.leaflet__gestures--mob .leaflet__gestures--mob-detailed {
	-webkit-animation: leaflet-gestures-message-fadein 0.8s both;
	        animation: leaflet-gestures-message-fadein 0.8s both;
}

.leaflet__gestures--method {
	font-size: 20px;
	color: #fff;
	margin-bottom: 15px;
}

.leaflet__gestures--method-msg, .leaflet__gestures--method-img {
	text-shadow: 2px 2px 5px #000;
}

.leaflet__gestures--method-msg {
	line-height: 1.25;
	padding: 15px;
	margin-bottom: 0;
}

.leaflet__gestures--method-img {
	display: inline-block;
	width: auto;
	height: 80px;
	opacity: 0.9;
}

/* leaflet gesture animations */
@-webkit-keyframes leaflet-gestures-background-fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0.45;
	}
}
@keyframes leaflet-gestures-background-fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0.45;
	}
}
@-webkit-keyframes leaflet-gestures-background-fadeout {
	0% {
		opacity: 0.45;
	}
	100% {
		opacity: 0;
	}
}
@keyframes leaflet-gestures-background-fadeout {
	0% {
		opacity: 0.45;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes leaflet-gestures-message-fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes leaflet-gestures-message-fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes leaflet-gestures-message-fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes leaflet-gestures-message-fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}