/**
 * (en) Points of Interest
 * (de) Points of Interest
 *
 * @copyright       Copyright 2020, crossbase mediasolution GmbH
 * @version         1.0
 */

@media screen {

	.cd-single-point.base-modules {
		left: calc(50% - 12px);
		top: calc(55% - 12px);
	}

	.cd-single-point.application-import {
		left: calc(50% - 12px);
		top: 17.5%;
	}

	.cd-single-point.application-maintenance {
		left: calc(12% - 12px);
		top: calc(55% - 12px);
	}

	.cd-single-point.application-translation {
		right: calc(16% - 12px);
		top: calc(55% - 12px);
	}

	.cd-single-point.application-provision {
		left: calc(50% - 12px);
		top: calc(95% - 12px);
	}

	.cd-single-point.application-print {
		right: calc(16% - 12px);
		top: calc(95% - 12px);
	}

	.cd-single-point.application-online {
		left: calc(12% - 12px);
		top: calc(95% - 12px);
	}


	/* (en) Styling Layout  */
	/* (en) Layout gestalten  */

	.point-list {
		position: static;
		margin: 0;
	}

	.cd-img-replace {
		/* replace text with background images */
		display: inline-block;
		overflow: hidden;
		text-indent: 100%;
		white-space: nowrap;
	}

	.cd-single-point {
		display: none\9;
	}

	.cd-single-point,
	.cd-single-link {
		position: absolute;
		border-radius: 50%;
	}

	.cd-single-point>a,
	.cd-single-link>a {
		position: relative;
		z-index: 2;
		display: block;
		width: 24px;
		height: 24px;
		border-radius: inherit;
		background: #0d0d6e;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
		-webkit-transition: background-color 0.2s;
		transition: background-color 0.2s;
	}

	.cd-single-link>a::before {
		font-family: FontAwesome;
		font-size: 24px;
		content: '\f105';
		position: absolute;
		left: 9px;
		top: -1px;
		color: #fff;
		text-indent: 0;
	}

	.cd-single-point>a::after,
	.cd-single-point>a::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		bottom: auto;
		right: auto;
		/* Force Hardware Acceleration */
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);
		transform: translateZ(0) translateX(-50%) translateY(-50%);
		background-color: #fff;
		-webkit-transition-property: -webkit-transform;
		transition-property: -webkit-transform;
		transition-property: transform;
		transition-property: transform, -webkit-transform;
		-webkit-transition-duration: 0.2s;
		transition-duration: 0.2s;
	}

	.cd-single-point>a::after {
		height: 2px;
		width: 12px;
	}

	.cd-single-point>a::before {
		height: 12px;
		width: 2px;
	}

	.cd-single-point::after,
	.cd-single-link::after {
		/* this is used to create the pulse animation */
		content: '';
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-radius: inherit;
		background-color: transparent;
		-webkit-animation: cd-pulse 2s infinite;
		animation: cd-pulse 2s infinite;
	}

	.cd-single-point.is-open>a {
		background-color: #0d0d6e;
	}

	/* rotation with minus-symbol */

	.cd-single-point.is-open>a::before {
		/* Force Hardware Acceleration */
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: translateZ(0) translateX(-50%) translateY(-50%) rotate(90deg);
		transform: translateZ(0) translateX(-50%) translateY(-50%) rotate(90deg);
	}

	/* rotation with plus-symbol */
	/*
  .cd-single-point.is-open > a::after,
  .cd-single-point.is-open > a::before {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(135deg);
    -moz-transform: translateX(-50%) translateY(-50%) rotate(135deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(135deg);
    -o-transform: translateX(-50%) translateY(-50%) rotate(135deg);
    transform: translateX(-50%) translateY(-50%) rotate(135deg);
  }
  */

	.cd-single-point.is-open::after {
		/* remove pulse effect */
		display: none;
	}

	.cd-single-point.is-open .cd-more-info {
		visibility: visible;
		opacity: 1;
		/* Force Hardware Acceleration */
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: translateZ(0) scale(1);
		transform: translateZ(0) scale(1);
		-webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
		-webkit-transition: opacity 0.3s 0s, visibility 0s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s, -webkit-transform 0.3s 0s;
		transition: opacity 0.3s 0s, visibility 0s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s, -webkit-transform 0.3s 0s;
		transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
		transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s, -webkit-transform 0.3s 0s;
	}

	.cd-single-point.visited>a {
		background-color: #0d0d6e;
	}

	.cd-single-point.visited::after {
		/* pulse effect no more active on visited elements */
		display: none;
	}

	.cd-single-point .cd-more-info {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		height: 100%;
		overflow-y: auto;
		/*-webkit-overflow-scrolling: touch;*/
		text-align: left;
		background-color: rgba(255, 255, 255, 1);
		padding: 24px 24px 0 24px;
		visibility: hidden;
		opacity: 0;
		/* Force Hardware Acceleration */
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: translateZ(0) scale(0.8);
		transform: translateZ(0) scale(0.8);
		-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
		-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s, -webkit-transform 0.3s 0s;
		transition: opacity 0.3s 0s, visibility 0s 0.3s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s, -webkit-transform 0.3s 0s;
		transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
		transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s, -webkit-transform 0.3s 0s;
	}

	.cd-single-point .cd-more-info::before {
		/* triangle next to the interest point description - hidden on mobile */
		content: '';
		position: absolute;
		height: 0;
		width: 0;
		display: none;
		border: 8px solid transparent;
	}

	/* close the interest point description - only on mobile */
	.cd-close-info {
		position: absolute;
		top: 0;
		right: 0;
		height: 44px;
		width: 44px;
	}

	.cd-close-info::after,
	.cd-close-info::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		bottom: auto;
		right: auto;
		/* Force Hardware Acceleration */
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: translateZ(0) translateX(-50%) translateY(-50%) rotate(45deg);
		transform: translateZ(0) translateX(-50%) translateY(-50%) rotate(45deg);
		background-color: #6482be;
		transition: all 0.3s ease;
	}

	.cd-close-info::after {
		height: 2px;
		width: 18px;
	}

	.cd-close-info::before {
		height: 18px;
		width: 2px;
	}

	.cd-close-info:hover::after,
	.cd-close-info:hover::before {
		background-color: #0d0d6e;
	}

	.cd-single-point .cd-more-info img {
		max-width: 74px;
	}

	.cd-single-point .float-col h3+p.pdefault {
		margin: 0;
	}

}


@media only screen and (min-width: 850px) {

	.cd-single-point.is-open .cd-more-info.cd-left {
		right: 140%;
	}

	.cd-single-point.is-open .cd-more-info.cd-right {
		left: 140%;
	}

	.cd-single-point.is-open .cd-more-info.cd-top {
		bottom: 140%;
	}

	.cd-single-point.is-open .cd-more-info.cd-bottom {
		top: 140%;
	}

	.cd-single-point .cd-more-info {
		position: absolute;
		width: 460px;
		height: auto;
		padding: 12px;
		overflow-y: visible;
		border-radius: 8px;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	}

	.cd-single-point .cd-more-info::before {
		display: block;
	}

	.cd-single-point .cd-more-info.cd-left,
	.cd-single-point .cd-more-info.cd-right {
		top: 50%;
		bottom: auto;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.cd-single-point.chrome-fix .cd-more-info.cd-left,
	.cd-single-point.chrome-fix .cd-more-info.cd-right {
		top: 50%;
		bottom: auto;
		/* Fix for Chrome to prevent blurry text */
		-webkit-transform: translateY(calc(-50% - 0.5px));
		transform: translateY(calc(-50% - 0.5px));
	}


	.cd-single-point .cd-more-info.cd-left::before,
	.cd-single-point .cd-more-info.cd-right::before {
		top: 50%;
		bottom: auto;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.cd-single-point .cd-more-info.cd-left {
		right: 160%;
		left: auto;
	}

	.cd-single-point .cd-more-info.cd-left::before {
		border-left-color: rgba(255, 255, 255, 0.95);
		left: 100%;
		border-style: solid outset;
	}

	.cd-single-point .cd-more-info.cd-right {
		left: 160%;
	}

	.cd-single-point .cd-more-info.cd-right::before {
		border-right-color: rgba(255, 255, 255, 1);
		right: 100%;
		border-style: solid inset;
	}

	.cd-single-point .cd-more-info.cd-top,
	.cd-single-point .cd-more-info.cd-bottom {
		left: 50%;
		right: auto;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.cd-single-point .cd-more-info.cd-top::before,
	.cd-single-point .cd-more-info.cd-bottom::before {
		left: 50%;
		right: auto;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.cd-single-point .cd-more-info.cd-top {
		bottom: 160%;
		top: auto;
	}

	.cd-single-point .cd-more-info.cd-top::before {
		border-top-color: rgba(255, 255, 255, 0.95);
		top: 100%;
		border-style: solid outset;
	}

	.cd-single-point .cd-more-info.cd-bottom {
		top: 160%;
	}

	.cd-single-point .cd-more-info.cd-bottom::before {
		border-bottom-color: rgba(255, 255, 255, 0.95);
		bottom: 100%;
		border-style: solid outset;
	}

	.cd-close-info {
		/*display: none;*/
	}

}

@-webkit-keyframes cd-pulse {
	0% {
		-webkit-transform: scale(1);
		box-shadow: inset 0 0 1px 1px rgba(0, 20, 137, 0.8);
	}

	50% {
		box-shadow: inset 0 0 1px 1px rgba(0, 20, 137, 0.8);
	}

	100% {
		-webkit-transform: scale(1.6);
		box-shadow: inset 0 0 1px 1px rgba(0, 20, 137, 0);
	}
}

@keyframes cd-pulse {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
		box-shadow: inset 0 0 1px 1px rgba(0, 20, 137, 0.8);
	}

	50% {
		box-shadow: inset 0 0 1px 1px rgba(0, 20, 137, 0.8);
	}

	100% {
		-webkit-transform: scale(1.6);
		transform: scale(1.6);
		box-shadow: inset 0 0 1px 1px rgba(0, 20, 137, 0);
	}
}