@charset "UTF-8";

@media all
{

	.block-maps .map {
		margin-bottom: 20px !important;
	}

	.block-maps .map .loader{
		width: 64px;
		height: 64px;
		position: absolute;
		top: 50%;
		left: 50%;
		cursor: pointer;
		transform: translate(-50%, -60%);
		z-index: 999;
	}

	.block-maps .map .loader::before {
		content: "Karte laden";
		text-align: center;
		width: 200px;
		display: inline-block;
		position: absolute;
		left: -67px;
		bottom: -32px;
		font-size: 18px;
		font-weight: bold;
		opacity: 1;
		transition: all 400ms ease-in-out;
	}

	.block-maps .map .loader.active::before {
		animation: loadertext 500ms infinite alternate;
	}

	@keyframes loadertext {
		to {
			opacity: .2;
		}
	}

	.block-maps .map .loader .spinner,
	.block-maps .map .loader .spinner div,
	.block-maps .map .loader .icon {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.block-maps .map .loader .spinner {
		border-radius: 50%;
		background: radial-gradient(farthest-side,#003764 95%,#0000) 50% 1.4px/0 0 no-repeat, radial-gradient(farthest-side,#0000 calc(100% - 8px),rgba(0,55,100,0.1) 0);
		background-position: center;
		transition: all 400ms ease-in-out;
		z-index: 10;
	}

	.block-maps .map .loader .spinner div{
		background: radial-gradient(farthest-side,#003764 95%,#0000) 50% 1.4px/8px 8px no-repeat;
		background-position: top;
		transition: all 400ms ease-in-out;
		opacity: 0;
	}

	.block-maps .map .loader.active .spinner div{
		animation: loader 600ms infinite linear;
		opacity: 1;
	}

	@keyframes loader {
		to {
			transform: rotate(1turn);
		}
	}

	.block-maps .map .loader .icon {
		background-image: url('/pub/theme/mango/skin/styles/images/icon-approach_blue.png');
		background-size: 32px;
		background-repeat: no-repeat;
		background-position: center;
		z-index: 12;
		opacity: .8;
	}

	.block-maps .map .loader.active .icon {
		animation: icon 500ms infinite alternate;
	}

	@keyframes icon {
		to {
			transform: scale(.8);
		}
	}

	.block-maps .map .loader .pointer {
		z-index: 11;
	}

	.block-maps .map .loader.inactive {
		opacity: 0;
		pointer-events: none;
		cursor: none;
	}

	.block-maps .map .loader.pending {
		opacity: .6;
		pointer-events: all;
		cursor: pointer;
	}

	.block-maps .map .loader.active {
		opacity: 1;
		pointer-events: none;
		cursor: none;
	}

	.block-maps .map .loader:hover {
		opacity: .8;
	}

	.block-maps .map .canvas {
		position: relative;
		border: 1px solid rgba(0,55,100,.2);
		overflow: hidden;
		border-radius: 4px;
		background-image: url('/pub/theme/mango/skin/images/placeholder/map_bg.jpg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	.block-maps .map iframe {
		transition: opacity 100ms ease-in-out;
		margin-bottom: -10px;
		opacity: 1;
	}

	.block-maps .map iframe.active {
		pointer-events: all;
		opacity: 1;
	}

	.block-maps .map iframe.inactive {
		pointer-events: none;
		opacity: 0;
	}

	.block-maps .map iframe.pending {
		pointer-events: all;
		opacity: .4;
	}

	.block-maps .map.fullscreen iframe {
		width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;
		max-width: 100% !important;
	}

	.block-maps .map.medium,
	.block-maps .map.small {
		float: none;
		margin-right: 0;
	}

	.block-maps .text {
		overflow: hidden;
		padding: 8px 4px 8px 12px;
	}

	.map.fullscreen {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100000;
		background-color:rgba(255,255,255,1);
	}

	.map.fullscreen .canvas {
		border: 0;
		width: 100% !important;
		height: calc(100% - 50px) !important;
		max-height: 100% !important;
		max-width: 100% !important;
	}

	body.fullscreen {
		overflow: hidden;
	}

	.block-maps .map .panel {
		overflow: hidden;
	}

	.block-maps .map .button-fullscreen {
		width: 42px;
		height: 42px;
		margin: 4px 0 4px 4px;
		padding: 6px;
		float: right;
		background-color: rgba(255,255,255,1);
		cursor: pointer;
	}

	.block-maps .map.fullscreen .button-fullscreen {
		margin-right: 8px;
	}

	.block-maps .map .button-fullscreen svg {
		width: 30px;
		height: 30px;
		overflow: auto;
		transform-origin: center;
		transition: all 100ms ease-in-out;
	}

	.block-maps .map .button-fullscreen svg path {
		fill: rgba(0,55,100,1);
	}

	.block-maps .map .button-fullscreen .square,
	.block-maps .map .button-fullscreen .plus,
	.block-maps .map .button-fullscreen .minus {
		transition: all 100ms ease-in-out;
		transform-origin: center;
	}

	.block-maps .map .button-fullscreen .square { opacity: .4; }
	.block-maps .map .button-fullscreen:hover .square { opacity: .6; transform: scale(.92) translate(-1px,-1px);}

	.block-maps .map .button-fullscreen .plus { opacity: .4; }
	.block-maps .map .button-fullscreen:hover .plus { opacity: 1; }
	.block-maps .map.fullscreen .button-fullscreen .plus { opacity: 0; }

	.block-maps .map .button-fullscreen .minus { opacity: 0; }
	.block-maps .map.fullscreen .button-fullscreen .minus { opacity: .4; }
	.block-maps .map.fullscreen .button-fullscreen:hover .minus { opacity: 1; }

	.block-maps .map .panel .button-fullscreen span {
		display: none;
	}

}

@media all and (max-width: 620px)
{
	.block-maps .map iframe {
		max-width: 280px;
		max-height: 280px;
	}

}

@media all and (min-width: 620px)
{}

@media all and (min-width: 920px)
{
	.block-maps .map.medium iframe {
		max-width: 420px;
		max-height: 400px;
	}

	.block-maps .map.medium,
	 .block-maps .map.small {
		 float: left;
		 margin-right: 20px;
	 }
}

@media all and (min-width: 1240px)
{
	.block-maps .map.medium iframe {
		max-width: 600px;
		max-height: 450px;
	}
}