/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 16 2026 | 10:17:10 */
 .flip-box {
 background-color: transparent;
 width: 300px;
 width:300px;
 height:auto;
 _border: 1px solid #f1f1f1;
 perspective: 1000px; /* Remove this if you don't want the 3D effect */
 _border-radius:8px;
 }
 /* This container is needed to position the front and back side */
 .flip-box-inner {
 position: relative;
 width: 100%;
 height: 100%;
 text-align: center;
 transition: transform 0.8s;
 transform-style: preserve-3d;
 _border-radius:8px;
 }

 /* Do an horizontal flip when you move the mouse over the flip box container */
 .flip-box:hover .flip-box-inner {
 transform: rotateY(180deg);
 }

 /* Position the front and back side */
 .flip-box-front, .flip-box-back {
 position: absolute;
 width: 100%;
 height: 100%;
 -webkit-backface-visibility: hidden; /* Safari */
 backface-visibility: hidden;
 _border-radius:8px;
 border:1px solid #ccc;
 }

 /* Style the front side */
 .flip-box-front {
 background-color: #fff;
 color: black;
 background-size:cover !important;
 background-position:center !important;
 
 display: flex;
 align-content: center;
 justify-content: center;
 align-items: center;


 }

 /* Style the back side */
 .flip-box-back {
 background-color:#558ec5;
 color:#fff;
 transform: rotateY(180deg);
 display: flex;
 flex-direction: column;
 align-content: center;
 justify-content: center;
 align-items: center;
 padding:10px;
 hyphens:manual;
 }
 .flip-box-back h2 {
 font-size:25px !important;
 margin:0px 0 10px 0;
 color:#fff !important;
 }
 .flip-box-back h3 {
 font-size:18px !important;
 margin:0px 0 10px 0;
 color:#fff !important;
 }
 .f-caption {
 position:absolute;
 width:100%;
 bottom:20px;
 padding:10px;
 font-size: 40px;
 font-weight:bold;
 color:#009fe3;
 _border-radius: 0 0 8px 8px;
 }
 .f-caption span {
 display:block;
 }
 .f-caption span:first-child {
 font-size:20px !important;
 font-weight:bold !important;
 }
 .f-wrap {
 display:flex;
 gap: 66px;
 justify-content: center;
 flex-wrap: wrap;
 max-width: 100%;
 margin-top:30px;
 hyphens: auto !important;
 }
 /* Flip 2*/
 .f-wrap .flip-box {
 aspect-ratio:1;
 }

 .pic {
 display: flex;
 flex-direction: column;
 align-content: center;
 justify-content: center;
 align-items: center;
 background-color: #fff;
 color: black;
 background-size:cover !important;
 background-position:center !important;
 }
 .pic {
 width:130px;
 
 _height:146px;
 aspect-ratio:190/146; 
 _height: calc(100% - 61px);
 _border-radius:8px 8px 0 0;
 }


 #f-1 {
 background:url('https://pharmastammtisch-bayern.de/wp-content/uploads/2025/09/mid-c-1.jpg');
 }
 #f-2 {
 background:url('https://pharmastammtisch-bayern.de/wp-content/uploads/2025/09/mid-c-2.jpg');
 }
 #f-3 {
 background:url('https://pharmastammtisch-bayern.de/wp-content/uploads/2025/09/mid-c-3.jpg');
 }
@media only screen and (max-width: 640px) {
	.pic {
	width:83px !important;	
	}	
}