/**
 * LR Flipbox – Ersatz fuer das Supreme-Modules-Modul dsm_flipbox (Startseite).
 * Werte 1:1 aus dem Original uebernommen (Effekt "right", Ausloeser Hover, Icon oben).
 * Markup: inc/flipbox.php, Shortcode [lr_flipbox].
 */

/* Behaelter */
.lr-flipbox {
	height: var(--lr-fb-h, 350px);
	position: relative;
	-webkit-perspective: 1000px;
	perspective: 1000px;
}

.ios .lr-flipbox-module,
.safari .lr-flipbox-module {
	-webkit-transform: translateZ(0);
}

/* Vorder- und Rueckseite */
.lr-flipbox__face {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: -webkit-transform .6s ease-in-out;
	transition: -webkit-transform .6s ease-in-out;
	transition: transform .6s ease-in-out;
	transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-style: solid;
}

.lr-flipbox__face.et_pb_module {
	margin-bottom: 0 !important;
}

.lr-flipbox__face,
.lr-flipbox__face .et_pb_module_inner {
	width: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Drehung: Ruhezustand */
.lr-flipbox .lr-flipbox__face--front {
	z-index: 1;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	transform: rotateX(0deg) rotateY(0deg);
}

.lr-flipbox .lr-flipbox__face--back {
	-webkit-transform: rotateX(0deg) rotateY(-180deg);
	transform: rotateX(0deg) rotateY(-180deg);
}

/* Drehung: Hover (Modul-Huelle oder Flipbox selbst) */
.lr-flipbox-module:hover .lr-flipbox .lr-flipbox__face--front,
.lr-flipbox:hover .lr-flipbox__face--front {
	-webkit-transform: rotateX(0deg) rotateY(180deg);
	transform: rotateX(0deg) rotateY(180deg);
}

.lr-flipbox-module:hover .lr-flipbox .lr-flipbox__face--back,
.lr-flipbox:hover .lr-flipbox__face--back {
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	transform: rotateX(0deg) rotateY(0deg);
}

/* Rueckseite: Flaeche */
.lr-flipbox__face--back {
	background-color: #9CAF96;
	padding: 0 20px;
}

/* Icon */
.lr-flipbox__icon {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 30px;
	line-height: 0;
}

.lr-flipbox__icon-wrap {
	display: block;
	margin: auto;
}

.lr-flipbox__face .lr-flipbox__glyph {
	font-family: FontAwesome !important;
	font-size: 50px;
}

.lr-flipbox__face .lr-flipbox__glyph--solid {
	font-weight: 900 !important;
}

.lr-flipbox__face .lr-flipbox__glyph--regular {
	font-weight: 400 !important;
}

.lr-flipbox__face--front .lr-flipbox__glyph {
	color: #9CAF96;
}

.lr-flipbox__face--back .lr-flipbox__glyph {
	color: #F4EEE5;
}

/* Textblock: linksbuendig (die Vorderseiten-Ueberschrift wird unten wieder zentriert) */
.lr-flipbox__face .lr-flipbox__body {
	text-align: left;
}

/* Ueberschriften */
.lr-flipbox__face h1.et_pb_module_header,
.lr-flipbox__face h2.et_pb_module_header,
.lr-flipbox__face h3.et_pb_module_header,
.lr-flipbox__face h4.et_pb_module_header,
.lr-flipbox__face h5.et_pb_module_header,
.lr-flipbox__face h6.et_pb_module_header {
	line-height: 1em;
}

.lr-flipbox .lr-flipbox__face--front h1.et_pb_module_header,
.lr-flipbox .lr-flipbox__face--front h2.et_pb_module_header,
.lr-flipbox .lr-flipbox__face--front h3.et_pb_module_header,
.lr-flipbox .lr-flipbox__face--front h4.et_pb_module_header,
.lr-flipbox .lr-flipbox__face--front h5.et_pb_module_header,
.lr-flipbox .lr-flipbox__face--front h6.et_pb_module_header {
	font-size: 40px;
	text-align: center;
}

.lr-flipbox .lr-flipbox__face--back h1.et_pb_module_header,
.lr-flipbox .lr-flipbox__face--back h2.et_pb_module_header,
.lr-flipbox .lr-flipbox__face--back h3.et_pb_module_header,
.lr-flipbox .lr-flipbox__face--back h4.et_pb_module_header,
.lr-flipbox .lr-flipbox__face--back h5.et_pb_module_header,
.lr-flipbox .lr-flipbox__face--back h6.et_pb_module_header {
	font-size: 26px;
	color: #222222 !important;
}

/* Text der Rueckseite */
.lr-flipbox .lr-flipbox__face--back .lr-flipbox__content {
	color: #222222 !important;
}

/* Button der Vorderseite */
.lr-flipbox__face .et_pb_button {
	text-shadow: none;
	text-decoration: none;
	display: inline-block;
	margin-top: 20px;
}

.lr-flipbox__face--front .et_pb_button_wrapper {
	text-align: center;
}

body #page-container .et_pb_section .lr-flipbox__face--front .et_pb_button {
	font-size: 12px;
}

body #page-container .et_pb_section .lr-flipbox__face--front .et_pb_button:after {
	font-size: 1.6em;
}

body.et_button_custom_icon #page-container .lr-flipbox__face--front .et_pb_button:after {
	font-size: 12px;
}

/* Tablet */
@media only screen and (max-width: 980px) {
	.lr-flipbox {
		height: var(--lr-fb-h-tablet, var(--lr-fb-h, 350px));
	}

	body #page-container .et_pb_section .lr-flipbox__face--front .et_pb_button:after {
		opacity: 0;
	}

	.lr-flipbox .lr-flipbox__face--back .lr-flipbox__content {
		font-size: 16px;
	}

	.lr-flipbox .lr-flipbox__face--back h1.et_pb_module_header,
	.lr-flipbox .lr-flipbox__face--back h2.et_pb_module_header,
	.lr-flipbox .lr-flipbox__face--back h3.et_pb_module_header,
	.lr-flipbox .lr-flipbox__face--back h4.et_pb_module_header,
	.lr-flipbox .lr-flipbox__face--back h5.et_pb_module_header,
	.lr-flipbox .lr-flipbox__face--back h6.et_pb_module_header {
		font-size: 24px;
	}
}

/* Handy */
@media only screen and (max-width: 767px) {
	.lr-flipbox {
		height: var(--lr-fb-h-phone, var(--lr-fb-h-tablet, var(--lr-fb-h, 350px)));
	}
}