/*
 Theme Name:   Avada e5 media Child
 Theme URI:    -
 Description:  Child for Avada Theme
 Author:       Thomas Stollberger
 Author URI:   http://www.e5-media.de/
 Template: Avada
 Text Domain:  Avada
*/

/*
--awb-color5    = Brand blau
--awb-color4    = Brand pink

*/

:root {
	/* Breite Menü-Icon im Header. Bei 1000px wird von mobile- auf desktop-Menü-Icon gewechselt */
	--e5-menu-icon-width-mobile: 72px;
	--e5-menu-icon-width-desktop: 160px;

	/* Breite von Menü + Search Icon */
	--e5-menu-search-icon-width-mobile: 140px;
	--e5-menu-search-icon-width-desktop: 240px;

	--e5-header-height: 80px;
	/* Änderung CU 12.02.24: Nicht mehr benötigt, da dauerhaft sticky mit eigenem CSS statt Avada-Sticky */

	--e5-header-sticky-height: 64px;
}

body,
.fusion-header-wrapper {
	min-width: 320px;
}

#main {
	min-height: 500px;
}

/************************************************************
 *          Header 
 * **********************************************************/
.fusion-header {
	padding: 0 !important;
	min-width: 320px;
}

.fusion-mobile-menu-icons a.fusion-icon,
.fusion-logo .fa {
	font-size: 28px;
	min-width: 48px;
	line-height: 48px;
	margin: 0 0 0 10px;
	text-align: left;
}

/* Desktop Menü - falls das wegen Cache-Problem */
.fusion-main-menu {
	display: none !important;
	border: 2px solid red;
}

/* Logo-Container enthält zusätzliche Links */
.fusion-header .fusion-logo {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	height: var(--e5-header-height);
}

.fusion-header .fusion-logo::after,
.fusion-header .fusion-logo::before {
	display: none;
}

.fusion-header .fusion-logo .fusion-logo-link {
	margin-left: 30px;
}

.fusion-header .fusion-logo img.fusion-standard-logo {
	width: 140px;
}
/* Anpassungen für wpml flaggen, da sonst durch avada überschrieben*/
.fusion-header .wpml-ls-item img.wpml-ls-flag {
	width: 18px !important;
	height: 12px !important;
}

.fusion-header .additional-links {
	display: none;
}

.fusion-mobile-menu-icons {
	float: right;
	display: flex !important;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	width: var(--e5-menu-search-icon-width-mobile);
}

/* Burger-Menü - weiß auf blauem bg / Farben aus Avada-Config überschreiben */
.fusion-mobile-menu-icons a.awb-icon-bars,
.fusion-mobile-menu-icons a.awb-icon-bars::after,
.fusion-mobile-menu-icons a.awb-icon-bars::before {
	color: #fff !important;
}

.fusion-header .fusion-mobile-menu-icons a.awb-icon-bars {
	background: var(--awb-color5);
	text-align: center;
	margin: 0;
	width: var(--e5-menu-icon-width-mobile);
	line-height: var(--e5-header-height);
	height: var(--e5-header-height);
}

/* Suchfeld */
.fusion-mobile-menu-search {
	margin: 15px 20px;
}

/***** Header Sticky *****/
.fusion-is-sticky .fusion-logo img {
	width: 140px !important;
}

.fusion-is-sticky .fusion-logo,
.fusion-is-sticky .fusion-mobile-menu-icons a.awb-icon-bars {
	height: var(--e5-header-sticky-height);
}

.fusion-is-sticky .fusion-mobile-menu-icons a.awb-icon-bars {
	line-height: var(--e5-header-sticky-height);
}

@media screen and (min-width: 400px) {
	.fusion-header .fusion-logo img {
		width: 200px;
	}
}

/************ Header 600px ************/

@media screen and (min-width: 600px) {
	.fusion-header .fusion-logo {
		width: calc(100% - var(--e5-menu-search-icon-width-mobile));
	}

	.fusion-header .fusion-logo img {
		width: 240px;
	}

	.fusion-header .additional-links {
		display: none;
	}

	.fusion-header .additional-links .menu a {
		white-space: nowrap;
	}

	.fusion-header .additional-links li a:after {
		content: "|";
		margin: 0 8px;
		color: var(--awb-color5);
	}

	.fusion-header .additional-links li:last-child a:after {
		content: "";
		margin: 0;
	}

	.fusion-header .additional-links a,
	.fusion-header .additional-links a:before {
		color: var(--mobile_menu_toggle_color);
	}

	.fusion-header .additional-links a:hover,
	.fusion-header .additional-links a:hover:before {
		color: var(--awb-color4);
	}

	.fusion-mobile-nav-holder {
		border: 1px solid var(--awb-color5);
		border-top: 0;
	}

	/* Sticky */
	.fusion-is-sticky .fusion-mobile-nav-holder {
		top: var(--e5-header-sticky-height);
	}
}

/************ Header 1000px ************/

@media screen and (min-width: 1000px) {
	.fusion-header .fusion-logo {
		width: calc(100% - var(--e5-menu-search-icon-width-desktop));
	}

	/* Links anzeigen */
	.fusion-logo .menu-header-zusaetzliche-links-container {
		display: block;
		padding-right: 30px;
	}
	.fusion-header .additional-links {
		display: block;
	}
	.fusion-header .additional-links .menu {
		margin: 0;
		padding: 0;
		list-style-type: none;
		display: flex;
	}
	/* verstecken da sonst doppelt */
	.fusion-header #mobile-menu-hauptnavigation .wpml-ls-item {
		display: none;
	}

	.fusion-mobile-menu-icons {
		width: var(--e5-menu-search-icon-width-desktop);
	}

	.fusion-header .fusion-mobile-menu-icons a.awb-icon-bars {
		width: var(--e5-menu-icon-width-desktop);
	}

	.fusion-mobile-menu-icons a.awb-icon-bars::after {
		content: "Menü";
		font-family: var(--awb-typography1-font-family);
		font-size: 18px;
		text-transform: uppercase;
		position: relative;
		top: -6px;
		margin-left: 12px;
		margin-right: 12px;
	}

	html[lang^="en"] .fusion-mobile-menu-icons a.awb-icon-bars::after {
		content: "Menu";
	}
}

/************ Header 1300px ************/
@media screen and (min-width: 1300px) {
	.fusion-header .fusion-logo .fusion-logo-link {
		margin-left: 0;
	}

	.fusion-header .fusion-row {
		max-width: var(--site_width) !important;
		margin-left: auto;
		margin-right: auto;
	}
}

/************************************************************
 *          Menü 
 * **********************************************************/

.fusion-mobile-menu-design-modern.fusion-header-v1 .fusion-mobile-nav-holder {
	margin-left: 0px !important;
	margin-right: 0px !important;
	padding-top: 0px !important;
}

/* Aufklapp-Menü Icons */
.fusion-open-submenu:before {
	display: block !important;
	color: var(--awb-color4);
	margin-right: 8px !important;
	content: "\e903" !important ;
	font-family: "icomoon-kendox" !important;
}

.fusion-open-submenu[aria-expanded="true"]:before {
	content: "\e902" !important;
}

/* Breite Aufklapp-Menü auf Desktop begrenzen  */
@media screen and (min-width: 600px) {
	.fusion-mobile-nav-holder {
		min-width: 480px;
		position: absolute;
		right: 0px;
		top: var(--e5-header-height);
		padding-top: 0 !important;
	}
}



/************************************************************
 *         Textgrößen mobile eins runtersetzen
 * **********************************************************/

@media screen and (max-width: 800px) {
	.post-content h1 {
		font-size: var(--h2_typography-font-size) !important;
	}

	#wrapper #main .post-content .fusion-title h2,
	#wrapper #main .post-content .title h2,
	#wrapper .fusion-title h2,
	#wrapper .post-content h2,
	#wrapper .title h2 {
		font-size: var(--h3_typography-font-size) !important;
	}

	.post-content h3 {
		font-size: var(--h4_typography-font-size) !important;
	}
}




/************************************************************
 *          Content Builder Elemente 
 * **********************************************************/
/********** Logo-Gallerie ***********/
.fusion-gallery-container {
	margin-bottom: 24px;
}

/********** Bild ***********/
.fusion-imageframe a img {
	transition: all 0.3s;
}

.fusion-imageframe a:hover img {
	transform: scale(1.05);
}




/***** In Drittel-Boxen Überschriften auf 3 Zeilen begrenzen / alle Texte auf gleicher Höhe */
@media screen and (min-width: 1025px) {
	.fusion_builder_column_1_3 .fusion-title h2,
	.fusion_builder_column_1_3 .fusion-title h3,
	.fusion_builder_column_1_3 .fusion-title h4 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.fusion_builder_column_1_3 .fusion-title h2 {
		height: 180px;
	}

	.fusion_builder_column_1_3 .fusion-title h3 {
		height: 130px;
	}

	.fusion_builder_column_1_3 .fusion-title h4 {
		height: 84px;
	}
}

/************************************************************
 *          Content / Eigene CSS Klassen
 * **********************************************************/

/* Border um Check-Icons (icon-kendoxcheckbox) */
.fusion-li-icon.icon-kendoxcheckbox {
	padding: 4px;
	border: 2px solid var(--awb-color5); /* standard: Icon Pink / kreis blau */
	border-radius: 50%;
}

.highlight-teaser .fusion-li-icon.icon-kendoxcheckbox,
.header-teaser .fusion-li-icon.icon-kendoxcheckbox {
	border-color: var(
		--awb-color4
	) !important; /* alterative: Icon weiß / kreis pink */
	color: #fff !important;
}

/*************** 
    header-teaser
    dunkles bild im Hintergrund, alle Text weiß
    NEU: Farbverlauf blau zu pink wird automatisch über Bild gelegt
 ***************/
.header-teaser.fullwidth-box {
	min-height: 300px !important;
	margin-bottom: 36px !important;
	background-size: cover;
	background-image: var(--awb-background-image),
		url("/wp-content/themes/Avada-Child-Theme/img/header-default.jpg");
	background-position: center center;
	background-repeat: no-repeat;
}

.header-teaser.fullwidth-box:after {
	content: "";
	background: linear-gradient(
		to right,
		#01305e 0%,
		rgba(1, 48, 94, 0.9) 40%,
		rgba(178, 7, 113, 0.8) 90%
	);
	display: inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

@media screen and (min-width: 1000px) {
	.header-teaser.fullwidth-box {
		min-height: 300px !important;
	}
}

.header-teaser .title h1,
.header-teaser .title h2,
.header-teaser .title h3,
.header-teaser p {
	color: #fff !important;
}

.header-teaser .title h1 small,
.header-teaser .title h1 em {
	font-size: var(--h2_typography-font-size) !important;
	font-style: normal;
	display: block;
}






/*************** 
    light-box;
    hellgraue Box
 ***************/
/* container */
.light-box.fusion-fullwidth {
	padding-top: 30px !important;
	padding-bottom: 30px !important;
	background-color: var(--awb-custom_color_1) !important;
}

/*column*/
.light-box.fusion-layout-column .fusion-column-wrapper {
	background-color: var(--awb-custom_color_1) !important;
	padding: 24px 30px !important;
}

/* Überschriften immer blau, nicht pink */
.light-box .fusion-title h3,
.light-box .fusion-title h4 {
	color: var(--awb-color5) !important;
}

@media screen and (min-width: 1025px) {
	.light-box.fusion-layout-column .fusion-column-wrapper {
		padding-bottom: 72px !important;
	}

	/* Button immer unten bündig */
	.light-box.fusion-layout-column .fusion-column-wrapper .fusion-button {
		position: absolute;
		bottom: 30px;
		left: 50px;
		right: 50px;
	}
}

/*************** 
    icon-box
    hellgraue 3er Boxen, Icon ragt oben aus Box raus
 ***************/
.icon-box.fusion-layout-column {
	margin-top: 60px !important;
}

.icon-box.fusion-layout-column .fusion-column-wrapper {
	background-color: var(--awb-custom_color_1) !important;
	padding: 32px !important;
	box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
}

.icon-box .fusion-column-wrapper {
	padding: 32px !important;
}

.icon-box .fusion-text,
.icon-box .fusion-text p {
	text-align: center !important;
}

.icon-box .fusion-column-wrapper .fb-icon-element:first-child {
	margin-top: -92px !important;
}

.icon-box .fusion-title h2,
.icon-box .fusion-title h3,
.icon-box .fusion-title h4 {
	font-size: var(--h4_typography-font-size) !important;
	color: var(--awb-color5) !important;
}

@media screen and (min-width: 1025px) {
	/* Überschriften nur 2-zeilig und alles auf h4-Größe  */
	.icon-box .fusion-title h2,
	.icon-box .fusion-title h3,
	.icon-box .fusion-title h4 {
		height: 52px;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.icon-box.fusion-layout-column .fusion-column-wrapper {
		padding-bottom: 72px !important;
	}

	/* Button immer unten bündig */
	.icon-box.fusion-layout-column .fusion-column-wrapper .fusion-button {
		position: absolute;
		bottom: 30px;
		left: 50px;
		right: 50px;
	}
}

/* weißer kreis um Icons */
.icon-box .fusion-imageframe {
	background: var(--awb-color1);
	margin-left: auto;
	margin-right: auto;
	border-radius: 50%;
	width: 150px;
	height: 150px;
	vertical-align: middle;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
}

/* Wenn Icon erstes Element der Box, dann oben aus Box rausragen lassen */
.icon-box .fusion-column-wrapper div:first-child .fusion-imageframe {
	margin-top: -92px;
}

/* Rahmen ums Icon
.icon-box .fusion-imageframe.circle-white:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 16px;
    bottom: 16px;
    right: 16px;
    left: 16px;
    border: 2px solid var(--awb-color5);
    border-radius: 50%;
    
}  */

.icon-box .fusion-imageframe img {
	max-width: 82px;
}

/*************** 
    graustufen
    Logos im Image-Carousel in Graustufen
 ***************/
.fusion-image-carousel.graustufen .fusion-image-wrapper img {
	filter: grayscale(1) opacity(0.7);
}

/*************** 
    fließtext
    wird auf desktop mittig zentriert
 ***************/
.fliesstext .fusion-title,
.fliesstext .fusion-text {
	text-align: center !important;
}

@media screen and (min-width: 1025px) {
	.fliesstext .fusion-title.fusion-title-text,
	.fliesstext .fusion-text {
		max-width: 75%;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}
}




/************************************************************
 *         Footer
 * **********************************************************/

#menu-footer-spalte li.menu-item {
	border: 0 !important;
	padding-top: 0px;
}















/************************************************************
 *        STYLES EXTRA FÜR PARTNERPORTAL
 * **********************************************************/

.fusion-post-grid .fusion-post-wrapper {
	border: 0 !important;
}

#main .fusion-post-grid .fusion-post-wrapper .blog-shortcode-post-title a {
	color: var(--awb-color-5);
}



/* Tags in Meta-Daten wie Tag-Cloud stylen */
.fusion-meta-tb .fusion-tb-tags {
	color: #fff !important;
}

.fusion-meta-tb .fusion-tb-tags a {
	background: var(--awb-color4);
	color: #fff !important;
	padding: 0.5em 0.75em;
	border-radius: 16px;
	font-size: 13px;
}


.fusion-meta-tb.fusion-meta-tb-1 .fusion-tb-tags a:hover {
	background: var(--awb-text-hover-color);
	color: #fff !important;
}








/*
Blog-Grid: Alle Boxen sollen gleich hoch sein
"Equal Height" Funktion von Avada arbeitet aber nur Zeilenweise, daher die Höhe des längsten Beitrages als Vorlage genommen
*/

.fusion-archives-tb .fusion-post-wrapper .fusion-post-content-wrapper {
	min-height: 475px !important;
}