/*** PROZESS ***/

#prozess {
	padding-top:0
}
#prozess > .content > .multicol > .col > .box {
	padding-top:0;
	_padding-bottom:0;
}
#prozess h2 {
	text-align: center;
	font-size: 2em;
	margin-bottom:1.5em;
}
.pingpong {
	--black: 0,0,0;
	--white: 255,255,255;
	--darkblue: 120,147,156;
	--blue: 0,73,118;
	--blue2: 241, 244, 245;
	--blue3: 214,223,225;
	--blue4: 244,246,247;
	--pink: 120,147,156;
	--box-shadow: none; /*0 0.125em 1em -0.5em rgba(var(--black),0.75);*/
	position: relative;	
	padding-top: 1em !important;
	padding-bottom: 1em;
}
.pingpong::before {
	content:'';
	position: absolute;
	inset: -2em auto -1em 50%;
	transform: translateX(-50%);
	border-left: 3px dotted rgb(var(--pink))
	
}
.pingpong::after {
	content:'';
	position: absolute;
	left:50%;
	bottom: -1em;
	transform: translate(-50%, 100%);
	border: 1em solid transparent;
	border-top-color: rgb(var(--pink));
	
}
.pingpong .innercol {
	display: grid;
	grid-template-areas: 
		"image desc";
	grid-template-columns: 50% 50%;
	margin-top: -2em;
	margin-bottom: 0em;
	animation-duration: 1500ms;
}
.pingpong .innercol:nth-child(2n+2) {
	display: grid;
	grid-template-areas: 
		"desc image";
	grid-template-columns: 50% 50%;
}
.pingpong .innercol .image {
	grid-area: image;
	width:auto;
	position: relative;
	display: grid;
	height: 100%;
	/*background: linear-gradient(90deg,rgba(var(--blue3),0), rgba(var(--blue3),0.5)10%, rgba(var(--blue3),0.5)90%, rgba(var(--blue3),0));*/
}

.pingpong .innercol .image .box {
	padding:0;
	margin: 0em -10%;
	align-self: center;
	position: relative;
	overflow: hidden;
	display: none;
}
.pingpong .innercol .image .box img {
	position: relative;
	margin-top:-5%;
	margin-bottom:-5%
}
.pingpong .innercol .desc {
	grid-area: desc;
	width: 90%;
	display: grid;
	/*background: linear-gradient(90deg,rgba(var(--blue3),0), rgba(var(--blue3),0.5)10%, rgba(var(--blue3),0.5)90%, rgba(var(--blue3),0));*/
}
.pingpong .innercol .desc .box {
	margin: 0 -2em 0 0;	
	align-self: center;
	position: relative;
	z-index: 1;
}
.pingpong .innercol .desc .box .cont {
	padding:1em 0.75em 1em 3em;
	color: rgb(var(--blue));
	background: rgb(var(--blue4));
	box-shadow: var(--box-shadow);
	min-height: 7em;
	display: grid;
	align-content: center;
}

.pingpong .innercol:nth-child(2n+2) .desc {
	margin-left:10%;
	text-align: right;
}
.pingpong .innercol:nth-child(2n+2) .desc .box {
	margin: 0 0 0 -2em;
}
.pingpong .innercol:nth-child(2n+2) .desc .box .cont {
	padding:1em 3em 1em 0.75em;
}

.pingpong .innercol .desc .box h3 {
	font-size:1.375em;
	line-height:1.1;
	font-weight:600;
	margin-top:0 !important;
	margin-bottom: 0 !important;
	position: static;
}
.pingpong .innercol .desc .box h3 span {
	position:absolute;
	left:0;
	top:50%;
	width:2em;
	height:2em;
	background:rgb(var(--white));
	border: solid 0.125em rgb(var(--pink));
	color: rgb(var(--pink));
	border-radius:50%;
	text-align: center;
	padding-top:0.875em;
	padding-left:0.2em;
	font-size:1.125em;
	line-height:0;
	box-shadow: 0 0 0.5em -0.125em rgba(var(--darkblue),0.5);
	transform: translate(-50%,-50%);
}
.pingpong .innercol:nth-child(2n+2) .desc .box h3 span { 
	left: auto;
	right:0;
	transform: translate(50%,-50%);
}
.pingpong .innercol .desc .box p {
	font-size:0.9em;
	line-height: 1.35;
	font-weight: 500;
	color: rgb(var(--black),0.75);
	margin-top: 0.25em !important;
}
.pingpong .innercol .desc .box p a {
	font-size:0.95em;
	font-weight:800;
	text-decoration: underline;
}
@media(max-width:1825px){
	.pingpong .innercol .image .box {
		margin: 0em -10% 0 -1em;
	}
	.pingpong .innercol:nth-child(2n+0) .image .box {
		margin: 0em -1em 0 -10%;
	}
}

@media(max-width:767px) and (min-width: 661px){
	.pingpong .innercol:nth-child(2n+1) .desc .box {
		margin-right: 0 !important;;
	}
	.pingpong .innercol:nth-child(2n) .desc .box {
		margin-left: 0 !important;;
	}
	
}
@media(max-width:660px){
	.pingpong {
		padding-top: 0.25em !important;
	}
	.pingpong .innercol {
		display: block !important;
		margin-top: 2.5em;
		margin-bottom: 1em
	}
	.pingpong .innercol .col .box {
		margin:0 !important;
	}
	.pingpong .innercol .desc .box {
		_padding: 0.5em 1em 1em !important;
		text-align: center;
	}
	.pingpong .innercol .desc .box .cont {
		padding: 1.25em 1em 1em !important;
		text-align: center;
	}
	.pingpong .innercol .desc .box p {
		font-size: 1em;
	}
	.pingpong .innercol .desc .box h3 {
		font-size: 1.5em;
		line-height:1.1;
		margin-top:0 !important;
	}
	.pingpong .innercol .desc .box h3 span {
		position:absolute;
		left:50% !important;
		right:auto !important;
		top:0%;
		transform: translate(-50%,-75%) !important;
		font-size: 1em;
		margin: auto !important;
	}
}