#mod_map{
	display:block;
	width:100%;
	color:#333;
	position:relative;
	-webkit-perspective: 1700px;
    -webkit-perspective-origin: 0 50%;

    -moz-perspective: 1700px;
    -moz-perspective-origin: 0 50%;

    perspective: 1700px;
    perspective-origin: 0 50%;
}

#mod_map h3{
	display:inline;
}

#mod_map #map-toggle{
	position:absolute;
	left:-20000px;
}

#mod_map #map-toggle-label{
	cursor:pointer;
	display:inline;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	perspective: 800px;
	background:#eee;
	padding:0.4em 1em;
	margin-left:0.5em;
	-webkit-transition:background 0.4s ease-in-out;
	-moz-transition:background 0.4s ease-in-out;
	transition:background 0.4s ease-in-out;
}

#mod_map #map-toggle-label:hover,
#mod_map #map-toggle-label:focus,
#mod_map #map-toggle:checked ~ #map-toggle-label {
	background: #ddd;
}

#mod_map figure{
	margin:20px 0 0 0;
	position:relative;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

#mod_map figure > div{
	overflow:hidden;
}

#mod_map figure #mod_mapMap{
	display:block;
	height:400px;
	z-index:1;
	max-width:100%;
	position:relative;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}

#mod_map #map-toggle:checked ~ figure #mod_mapMap{
	right:-25%;
}

#mod_map #mod_mapMap img{
	max-width:none;
}

#mod_map figcaption{
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
	position:absolute;
	top:0;
	z-index:5;
	left:0;
	padding:20px;
	background:#333;
	color:white;
	font-size:0.875em;

	height: 100%;
    width: 50%;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotateY(-90deg);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.3s;

    -moz-backface-visibility: hidden;
    -moz-transform-origin: 0 0;
    -moz-transform: rotateY(-90deg);
    -moz-transition: -moz-transform 0.4s, opacity 0.3s;

    backface-visibility: hidden;
    transform-origin: 0 0;
    transform: rotateY(-90deg);
    transition: transform 0.4s, opacity 0.3s;
}

#mod_map #map-toggle:checked ~ figure figcaption{
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    -webkit-transition: transform 0.4s, opacity 0.1s;

    -moz-transform: rotateY(0deg);
    -moz-transition: transform 0.4s, opacity 0.1s;

   	transform: rotateY(0deg);
    transition: transform 0.4s, opacity 0.1s;
}

#mod_map .infobox{
	display:block;
	margin-bottom:0.5em;
}

#mod_map .infobox .infoTitle{
	margin-bottom:0.1em;
	color:#ccc;
}

#mod_map .infobox .inforMation{
	margin-bottom:0;
}

@media only screen and (min-width:37.5em){
	#mod_map figcaption{font-size:1em;}	
	#mod_map .infobox .infoTitle{margin-bottom:0;}
}