/*** TRIO CIRCLES ***/

.otpscircle {
width: 100px;
height: 100px;
border-radius: 50%;
display: inline-block;
color: var(--white);
font-size: 60px;
line-height: 100px;
text-align: center;
box-shadow: 0 2px 8px 1.35px var(--xlightgrey);
}

.persoenlich { background-color: var(--circled) !important; }

.header.mh100 { min-height: 100px; }

.psi1 {
background: url('https://www.organo.de/persoenlicher.schutz/images/icon1.png') center center no-repeat;
background-size: 65%;
animation: pulse-zoom2 1.95s linear infinite;
}

.psi2 {
background: url('https://www.organo.de/persoenlicher.schutz/images/icon2.png') center center no-repeat;
background-size: 60%;
animation: pulse-zoom2 1.8s linear infinite;
animation-delay: 0.25s;
}

.psi3 {
background: url('https://www.organo.de/persoenlicher.schutz/images/icon3.png') center center no-repeat;
background-size: 45%;
animation: pulse-zoom2 2.1s linear infinite;
animation-delay: 0.5s; 
}

.psi4 {
background: url('https://www.organo.de/persoenlicher.schutz/images/icon4.png') center center no-repeat;
background-size: 55%;
animation: pulse-zoom2 1.95s linear infinite;
}

.psi5 {
background: url('https://www.organo.de/persoenlicher.schutz/images/icon5.png') center center no-repeat;
background-size: 55%;
animation: pulse-zoom2 2.1s linear infinite;
animation-delay: 0.5s; 
}



/*** GALLERY ***/

.prodgallery, .entryimg  {
display: block;
width: 100%;
}

.entry {
width: 40%;
display: block;
margin: 24px 20px 24px 0px;
opacity: 0.4;
transform: scale(0.95);
box-shadow: 0 4px 20px 1.35px var(--white); 
-webkit-transition: transform 0.5s, opacity 0.5s, box-shadow 0.5s;
-moz-transition: transform 0.5s, opacity 0.5s, box-shadow 0.5s;
-o-transition: transform 0.5s, opacity 0.5s, box-shadow 0.5s;
transition: transform 0.5s, opacity 0.5s, box-shadow 0.5s;
border-radius: 5px;
overflow: hidden;
}

.entry.is-selected { opacity: 1; transform: scale(1); box-shadow: 0 4px 20px 1.35px var(--xlightgrey); }

a.prevnext {
position: absolute;
text-decoration: none;
z-index: 15;
}

a.prevnext-pg { top: 50%; }
a.prevnext-cc { top: 180px; }

a.prevbutton {
left: 30%;
transform: translateY(-50%) translateX(-50%);
}

a.nextbutton {
right: 30%;
transform: translateY(-50%) translateX(50%);
}

a.prevbuttoncc {
left: 180px;
transform: translateY(-50%) translateX(-50%);
}

a.nextbuttoncc {
right: 20px;
transform: translateY(-50%) translateX(50%);
}

.sfullwidth { padding-left: 0 !important; padding-right: 0 !important; }


/*** VARIOUS ***/

.psg5 { margin-top: -50px; }

.mediumheaderlight { margin-left: -6px; }


/*** RESPONSIVE ***/

@media only screen and (max-width: 1440px) {
	/* TRIO CIRCLES */
		.header.mh100 { min-height: 90px; }	
    /* GALLERY */
		.entry { width: 45%; }
		a.prevbutton { left: 27.5%; }
		a.nextbutton { right: 27.5%; }
	/* VARIOUS */
		.mediumheaderlight { margin-left: -5px; }
}


@media only screen and (max-width: 1348px) {
	/* TRIO CIRCLES */
		.header.mh100 { min-height: 135px; }	
}


@media only screen and (max-width: 1080px) {
	/* TRIO CIRCLES */
		.otpscircle { width: 90px; height: 90px; }
		.header.mh100 { min-height: 114px; }	
	/* GALLERY */
		.entry { width: 50%; }
		a.prevbutton { left: 25%; }
		a.nextbutton { right: 25%; }
	/* VARIOUS */
		.psg5 { margin-top: -30px; }

		.mediumheaderlight { margin-left: -4px; }
}


@media only screen and (max-width: 880px) {
	/* TRIO CIRCLES */
		.header.mh100 { min-height: 99px; }
}


@media only screen and (max-width: 840px) {
	/* TRIO CIRCLES */
		.otpscircle { width: 80px; height: 80px; }
}


@media only screen and (max-width: 768px) {
	/* TRIO CIRCLES */
		.header.mh100 { min-height: auto; }	
	/* GALLERY */
		a.prevnext { display: none; }
		a.prevnext-pg { top: calc((100% - 85px) / 2); }
		.entry { width: 60%; }
		a.prevbutton { left: 20%; }
		a.nextbutton { right: 20%; }
	/* VARIOUS */
		.psg5 { margin-top: 0px; }
		.psg5h1 { display: none; }
		.mediumheaderlight { margin-left: -3px; }
}


@media only screen and (max-width: 480px) {
	/* TRIO CIRCLES */
		.otpscircle { width: 70px; height: 70px; }
	/* GALLERY */
		.entry { width: 70%; }
		a.prevbutton { left: 15%; }
		a.nextbutton { right: 15%; }
	/* VARIOUS */
		.mediumheaderlight { margin-left: -2px; }
}


@media only screen and (max-width: 380px) {
	/* GALLERY */
		.entry { width: 75%; }
		a.prevbutton { left: 12.5%; }
		a.nextbutton { right: 12.5%; }
}


@media only screen and (max-width: 359px) {
	/* VARIOUS */
		.mediumheaderlight { margin-left: 0px; }
}