/*
Theme Name: Avada for Tricor
Author: e5 media
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* Infos aus Avada-Konfig 
Small Screen 	< 640
Medium Screen	641-1200
Large Screen 	> 1201
*/

:root {
	--e5-border-radius: 8px;
}


/* Bugfix in Avada v7.13.3, da background-Size nicht korrekt übergeben wird: --awb---awb-background-size */
@media screen and (min-width: 1201px) {
	.fusion-fullwidth {
		background-size: var(--awb---awb-background-size, cover) !important;
	}	
}

/* Content-Element in Section auf ganze Breite setzen, sonst sind innerhalb von Produkten keine Fullwidth-Container möglich */
.fusion-content-tb {
	width: 100%;
}


/* Standard Abstand zw. Containern, falls keiner angegeben
muss margin sein, kein padding. Passt sonst nicht bei Farb-Containern */
.fusion-fullwidth.fullwidth-box {
	--awb-margin-bottom: 5rem;
}

.fusion-builder-placeholder {
	background: #eee !important;
	padding: 4px !important;
}




/*************************************************
 * 	 Header 
 *************************************************/
/* .fusion-standard-logo {
	width: 120px;
} */


/* Mobile Menü - Menü Button */
header .awb-menu__m-collapse-icon {
	font-size: 175%;
}

header .awb-menu.collapse-enabled .awb-menu__open-nav-submenu_mobile::before {
	font-size: 150%;
}

/* Mobile Menü - Blatt-Icon auch hier anzeigen */
header .awb-menu.collapse-enabled .awb-menu__i {
	display: flex !important;
}

/* CSS-Klasse green: für Nachhaltigkeit-Link */
header .menu-item.green {
	--awb-color: #008905;
	--awb-icons-color: #008905;
	--awb-active-color: #008905;
	--awb-mobile-active-color: #008905;
	--awb-icons-hover-color: #008905;
	--body_typography-color: #008905;
}

/* Desktop Menü: Links in eine Reihe, zweizeilig */
@media screen and (min-width: 1200px) {
	header .awb-menu__main-ul {
		flex-wrap: nowrap;
	}

	header .awb-menu__main-ul .menu-text {
		text-align: left;
	}	
}

/* Desktop Menü: erst auf großem Display mehr Abstand zwischen den Links */
@media screen and (min-width: 1700px) {
	header .awb-menu__main-li {
		--awb-gap: 16px;
	}
}

.wpml-ls-menu-item .wpml-ls-flag {
	margin-right: 4px;
}





/*************************************************
 * 	 Page Title Bar default
 * 
 * + CSS-Klassen 
 *  .page-title-bar-grauverlauf
 * 	.homepage-usp
 *  .homepage-intro
 * 
 *************************************************/
.fusion-page-title-bar .fusion-button {
	white-space: nowrap;
}

/* .page-title-bar-grauverlauf
	Mobile und Tablet: bg-image oben, Text darunter und daher grauer Hintergrund
	Desktop: bg-image hinter dem Text, grauverlauf hinter Text 
 */
.fusion-page-title-bar .fusion-fullwidth.page-title-bar-grauverlauf:after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
}

/* Fallback: Pagebar ist auf Bilder im Format 2:1 ausgelegt. 
	Falls mal falsche Größe hochgeladen wird, dann wird diese Grauflche hinter Text gelegt */
@media screen and (max-width: 640px) {
	.fusion-page-title-bar .fusion-fullwidth.page-title-bar-grauverlauf:after {
	  top: var(--awb-padding-top-medium);
	  height: calc(100% - var(--awb-padding-top-medium) );
	  background: var(--awb-background-color);
	}
}

@media screen and (min-width: 1201px) {
	.fusion-page-title-bar .fusion-fullwidth.page-title-bar-grauverlauf:after {
		top: 0;
		height: 100%;
		background: linear-gradient(90deg, #f3f3f3 20%, rgba(243,243,243,0) 60%);
	}
}



/* mit Video: 
Mobile + Tablet: Video oben wie auch Bild, nicht fullwidth */
@media screen and (max-width: 1200px) {
	.fusion-fullwidth.page-title-bar-grauverlauf.video-background .fullwidth-video {
		min-height: auto !important;
		aspect-ratio: 16 / 9;
	}

	.fullwidth-box.video-background .fullwidth-video video {
		width: 100% !important;
	}
} 





/* 
	CSS-Klassen 
		.homepage-usp
		.homepage-intro
	für Startseite oben.
	Fügt schräge vor rotem Bereich ein und passt Video an
 */


/* Slider */
@media screen and (max-width: 1200px) {
	.fullwidth-box.homepage-intro .awb-background-slider {
		height: 340px;
	}
} 

@media screen and (max-width: 640px) {
	.fullwidth-box.homepage-intro .awb-background-slider  {
		height: 240px;
	}
} 


/* Hintergrundfarbe Text */
@media screen and (max-width: 1200px) {
	.fusion-page-title-bar .fusion-fullwidth.page-title-bar-grauverlauf.homepage-intro:after {
	  background: var(--awb-color4) !important;
	}
}




@media screen and (max-width: 1200px) {
	.homepage-intro h1,
	.homepage-intro .fusion-title-heading  {
	  color: var(--awb-color1) !important;
	}
}

@media screen and (min-width: 1201px) {
	.homepage-intro:after {
    z-index: 6;
  }
}

.homepage-intro:before {
	content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  background: var(--awb-color4);
  clip-path: polygon(100% 100%, 100% 0, 0 100%);	
  z-index: 7;
}

@media screen and (max-width: 640px) {
	.homepage-intro:before {
	  top: 160px;
	}
}

@media screen and (min-width: 641px) and (max-width: 1200px) {
	.homepage-intro:before {
	  top: 260px;
	}
} 


@media screen and (min-width: 1201px) {
	.homepage-intro:before {
	  bottom: 0;
	}
} 
/*
.homepage-usp {
	<padding-top: 0 !important;
}*/

.homepage-usp:after {
	content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 0 !important;
  bottom: -79px;
  height: 80px;
  background: var(--awb-background-color);
  clip-path: polygon(0 0, 100% 0, 0 100%);	
}




/*************************************************
 * 	 Content default
 *************************************************/

/******************** Listen ********************/
.fusion-text ul {
	list-style-type: none;
	padding-left: 0;
}

.fusion-text ul li {
	padding-left: 1.5rem;
	margin-bottom: 1.25rem;
}

.fusion-text ul li:before {
	font-family: 'tricor' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  content: "\e909";
  display: inline-block;
  width: 1.5rem;
  margin-left: -1.5rem;
  color: var(--awb-color5);
}

/* bg-rot */
.fusion-fullwidth[style*="--awb-background-color:var(--awb-color4)"] .fusion-text ul li:before {
	  color: var(--awb-color1);	
}





/******************** Buttons ********************/
.fusion-button {
	white-space: nowrap;
}

.fusion-button.button-xlarge,
.fusion-button.button-large {
	font-size: var(--body_typography-font-size);
	line-height: 1.5rem;
  padding: 1rem 2rem;
}

.fusion-button.button-xlarge {
	text-transform: uppercase;
}

.fusion-button.button-medium {
  font-size: var(--awb-typography5-font-size);
  padding: 1rem 2rem;
}

.fusion-button.button-small {
  font-size: var(--awb-typography5-font-size);
  padding: 0.75rem 1.5rem;
}

/* Bilder */
.fusion-image-element .fusion-imageframe,
.fusion-image-element .fusion-imageframe .img-responsive {
	width: 100%;
}




/******************** Counter-Box ********************/
/* bg-color und Font anpassen */
.fusion-counters-box .fusion-counter-box .counter-box-container {
	background: var(--awb-border-color);
	border-radius: var(--e5-border-radius);
}

.fusion-counters-box .counter-box-content {
	text-transform: uppercase;
}




/******************** Image Carousel ********************/
/* festes Format und alle Bilder auf gleiche Breite */
.fusion-carousel-item-wrapper {
	aspect-ratio: 1.5;
}

.fusion-carousel-item-wrapper .fusion-image-wrapper {
	width: 100%;
	height: 100%;
}

.fusion-carousel-item-wrapper .fusion-image-wrapper img {
	height: 100%;
  width: 100%;
  object-fit: cover;	
}

/* Dot-Navigation immer "below" stylen */
.fusion-layout-column .fusion-image-carousel {
	--awb-border-radius-top-left: var(--e5-border-radius);	
	--awb-border-radius-top-right: var(--e5-border-radius);	 
	--awb-border-radius-bottom-left: var(--e5-border-radius);	
	--awb-border-radius-bottom-right: var(--e5-border-radius);	
	--awb-dots-spacing: 0.5rem;
}

.fusion-layout-column .swiper-pagination-horizontal.swiper-pagination-bullets {
	bottom: auto;
  position: relative;
  margin-top: 0.5rem;
}





/******************** Content Boxes ********************/

/* Bugfix: falsche Font wenn kein Icon gewählt */
.fusion-content-boxes .col,
.fusion-content-boxes .col * {
	font-family: var(--body_typography-font-family) !important;	
}


/* Icon on Top = Bild on Top
		Content Boxen so gestalten wie Post Cards Bild oben
		Z.B. für https://tricor.e5dev.de/ueber-tricor/ ganz unten */

/* Bild quadratisch */	
.fusion-content-boxes.content-boxes-icon-on-top .heading {
	overflow: visible;
}

/* Bild Hover gestalten wie bei Postcards (Produkt-Übersicht) */
.fusion-content-boxes.content-boxes-icon-on-top .image {
	overflow: hidden;
	border-radius: var(--e5-border-radius);
	box-shadow: 10px 20px 20px hsla(var(--awb-color8-h),var(--awb-color8-s),var(--awb-color8-l),calc(var(--awb-color8-a) - 90%));
	margin-bottom: 20px;
}

.fusion-content-boxes.content-boxes-icon-on-top .image img {
	margin: 0 !important;
	aspect-ratio: 1;	
	object-fit: cover;
	transition: opacity 1s,transform 1s;
}



.fusion-content-boxes.content-boxes-icon-on-top .heading img:hover {
	transform: scale3d(1.1,1.1,1);	
}


.fusion-content-boxes.content-boxes-icon-on-top .col,
.fusion-content-boxes.content-boxes-icon-on-top .col *{
	text-align: left !important;
}

.fusion-content-boxes.content-boxes-icon-on-top .content-container {
	font-size: var(--awb-typography5-font-size) ;
	line-height: var(--awb-typography5-line-height) ;
}


/* Überschrift ist verlinkt, soll aber nicht so aussehen */
.fusion-content-boxes.content-boxes-icon-on-top .heading .heading-link {
	--awb-link_decoration_line_hover: none;
	--awb-hover-accent-color: var(--awb-color8);
}


/* Mehr erfahren Link */
.fusion-content-boxes.content-boxes-icon-on-top .fusion-read-more {
	--link_color: var(--awb-color8);
	--awb-link_decoration_line: none;
	border-bottom: 1px solid var(--link_color);
	padding: 0.5rem 1rem 0.5rem 0;
	font-weight: 600 !important;
	font-size: var(--awb-typography5-font-size) !important;
	letter-spacing: var(--button_typography-letter-spacing);
}

.fusion-content-boxes.content-boxes-icon-on-top .fusion-read-more:after {
	font-family: 'tricor' !important;
	content: "\e900";
  font-size: 1rem !important;
}

.fusion-content-boxes.content-boxes-icon-on-top .fusion-read-more:hover {
	border-bottom-color: var(--awb-hover-accent-color);
}







/******************** Checklist: Icon größer *******************
.fusion-checklist .fusion-li-icon, ul.fusion-checklist .fusion-li-icon {
	font-size: 150%;
}*/




/*************************************************
 * 	 CSS-Klassen 
 *************************************************/

/* .bild-querformat
	für Content Boxes
	Normalerweise Bild fest auf aspect-ratio 1, hier querformat
	Für Presse-Übersicht ganz unten auf Startseite
*/
.bild-querformat.fusion-content-boxes.content-boxes-icon-on-top .image img {
	aspect-ratio: 3 / 2;	
}



/* 	.bg-rot
	roter Hintergrund kann über Avada Hintergrundfarbe vergeben werden oder Klasse "bg-rot"
	Für Title+Text geht beides, 
	bei umfangreichen Elementen (Post-Cards, Content Boxes auf Startseite) ist CSS-Klasse "bg-rot" nötig

	... padding einfügen */
.bg-rot.fusion-fullwidth,
#main .fusion-fullwidth[style*="--awb-background-color:var(--awb-color3)"], /* bg-grau */
#main .fusion-fullwidth[style*="--awb-background-color:var(--awb-color4)"] { /* bg-rot */
  --awb-padding-top: 3.5rem;
  --awb-padding-bottom: 3rem;
}

/* ... Schrift weiß, Text zentriert */
.fusion-body #wrapper .fusion-fullwidth[style*="--awb-background-color:var(--awb-color4)"] .fusion-title, 
.fusion-body #wrapper .fusion-fullwidth[style*="--awb-background-color:var(--awb-color4)"] .fusion-text {
  --awb-text-color: var(--awb-color1);
  --awb-content-alignment: center;
}

.fusion-body #wrapper .bg-rot.fusion-fullwidth .fusion-post-cards .fusion-title, 
.fusion-body #wrapper .bg-rot.fusion-fullwidth .fusion-post-cards .fusion-text {
	color: var(--awb-color1) !important;
	--awb-content-alignment: left;
}

.fusion-body #wrapper .bg-rot.fusion-fullwidth .fusion-post-cards .fusion-button  {
	background: transparent !important;
	--button_accent_color: var(--awb-color1) !important;
	--button_border_color: var(--awb-color1) !important;
  --button_accent_hover_color: var(--awb-color1) !important;
	--button_border_hover_color: var(--awb-color1) !important;
}



/* ... Content Box mit weißer Schrift
	z.B. für "weitere News" auf Startseite ganz unten  */
.bg-rot.fusion-fullwidth .fusion-content-boxes,
.bg-rot.fusion-fullwidth .fusion-content-boxes.content-boxes-icon-on-top .heading .heading-link {
	--awb-title-color: var(--awb-color1);
	--awb-hover-accent-color: var(--awb-color1) !important;
}

.bg-rot.fusion-fullwidth .fusion-content-boxes .content-container {
	color: var(--awb-color1);
}

.bg-rot.fusion-fullwidth .fusion-content-boxes.content-boxes-icon-on-top .fusion-read-more {
	--link_color: var(--awb-color1);
}




/* .bg-versatz:
	Für Container
	roter bg fängt etwas später an, d.h. oben 200px Höhe in weiß einfügen
*/

.fusion-fullwidth.bg-versatz:after {
	content: "";
  background: #fff;
  width: 100%;
  position: absolute;
  top: 0;
  height: 150px;
}




/* .fullwidth
	Für Bilder
	Im Post Card Libary Element bei Bildern für Ansprechpartner */
.fusion-imageframe.fullwidth {
	width: 100% !important;
}


/*.joblist
	Im Post Card Libary Element, um bei Checklist den Text näher ans Icon zu rücken */
.joblist .fusion-checklist .icon-wrapper, ul.fusion-checklist {
	--awb-icon-margin: 0;	
	--awb-content-margin: ;
}

.joblist .fusion-checklist .fusion-li-item-content, ul.fusion-checklist .fusion-li-item-content {
	margin-inline-start: calc(var(--awb-icon-width) * 1.1);
}


/*		.streched-link
	Für Container in Post Card Library:
	Wurde mal benutzt für "Bild oben (Produkte / Branchen / Ausbildung)"
	Streckt den Link (Button am Ende der Box) auf das umliegende Element, 
	aber nur auf eine quadratische Fläche oben, so dass quasi das Bild verlinkt ist, aber der Text unterm Bild noch markierbar bliebt

	Problem: Dadurch funktioniert Hover-Effekt des Bildes nicht mehr, daher doch wieder entfernt


.post-card.streched-link > .fusion-column-wrapper {
	position: relative;
}

.post-card.streched-link .fusion-column-wrapper .fusion-button  {
	position: static !important;
}

.post-card.streched-link .fusion-column-wrapper .fusion-button:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding-bottom: 102%;
	z-index: 10;
}
*/




/*	.image-contain
Für Image-Element, z.B. in Produkt-Übersicht */ 
.image-contain.fusion-imageframe img {
	object-fit: contain !important;
}





/*		.button-hell
	in bg-rot automatisch so gestalten
 */
.button-hell,
.fusion-body #wrapper .fusion-fullwidth[style*="--awb-background-color:var(--awb-color4)"] .fusion-button /*bg-rot*/ {
	--button_gradient_top_color: var(--awb-color1);
	--button_gradient_top_color_hover: var(--awb-color1);
	--button_accent_color: var(--awb-text-color);
	--button_accent_hover_color: var(--awb-color8);
}




/* 	.produkt-vorteile
	Post Card Element auf der Produkt-Detailseite
*/
.produkt-vorteile .fusion-flex-align-items-flex-start.fusion-grid-posts-cards {
	justify-content: center !important;
}


/* 	.historie
	für Content Boxes, https://tricor.e5dev.de/ueber-tricor/
	Ab Medium */
.fusion-content-boxes.historie {
	--awb-item-margin-bottom: 0 !important;
} 

.fusion-content-boxes.historie .col {
	padding: 0 !important;
	text-align: center !important;
	margin-bottom: 2rem;
}


.fusion-content-boxes.historie .col .heading,
.fusion-content-boxes.historie .col .content-container {
	border-radius: var(--e5-border-radius);	
}

.fusion-content-boxes.historie .col .heading:hover,
.fusion-content-boxes.historie .col .content-container:hover {
	cursor: default;
}



.fusion-content-boxes.historie .col .heading {
	background: var(--awb-color4);
	padding: 1.5rem 2rem;
}

.fusion-content-boxes.historie .col .content-container {
	background: var(--awb-color3);
	padding: 3.5rem 2rem;
}

@media screen and (min-width: 641px) {
	.fusion-content-boxes.historie .col {
		display: flex;
		gap: 0.5rem;
		margin-bottom: 0;
	}

	.fusion-content-boxes.historie .col .fusion-clearfix {
		display: none;
	}

	.fusion-content-boxes.historie .col .heading,
	.fusion-content-boxes.historie .col .content-container {
		flex: 1 1;
		align-content: center;
	}

	.fusion-content-boxes.historie .col .heading {
		padding: 3.5rem 2rem;
	}

	.fusion-content-boxes.historie .col .content-container {
		
	}
}








/*************************************************
 * 	 Facet WP Plugin
 *************************************************/

.facetwp-facet {
  margin-right: 2rem;
}

/* Jobsuche */
.facetwp-dropdown {
	padding: 0 1rem;
	font-size: var(--awb-typography5-font-size);	
}



/* Produktsuche */
.fs-wrap.multiple {
  width: 300px;
    font-size: var(--awb-typography5-font-size);	
}

.fs-wrap.multiple .fs-label-wrap {
	padding: 0 1rem;
	border-width: var(--form_border_width-top) var(--form_border_width-right) var(--form_border_width-bottom) var(--form_border_width-left);
  border-color: var(--form_border_color);
  border-radius: var(--form_border_radius);
  line-height: 2.5rem;
}

/* Dropdown */
.fs-wrap.multiple .fs-dropdown {
	padding: 1rem;
}

.fs-wrap.multiple .fs-dropdown .fs-search {
	border: 1px solid;
  border-color: var(--form_border_color);
  border-radius: var(--form_border_radius);
}

.fs-wrap.multiple .fs-dropdown .fs-search input {
	height: 30px;
}

.fs-wrap.multiple .fs-option .fs-checkbox i {
  border-color: var(--form_border_color);
}

.fs-wrap.multiple .fs-option.selected .fs-checkbox i {
  background-color: var(--awb-color4) !important
}

.facetwp-type-fselect .fs-option .fs-option-label {
	font-size: var(--awb-typography5-font-size);	
	white-space: wrap !important;
  word-break: break-word;
}



/* Zurücksetzen-Button - wie small-button */
button.facetwp-reset {
	background: var(--awb-color8);
  color: var(--awb-color1);
	border-radius: var(--button-border-radius-top-left,0) var(--button-border-radius-top-right,0) var(--button-border-radius-bottom-right,0) var(--button-border-radius-bottom-left,0);
	border-width: 0;
  font-size: var(--awb-typography5-font-size);
  padding: 0.75rem 1.5rem;
}