/*
 Theme Name:   Werbeagentur 21 Divi Child Theme
 Theme URI:    http://wa21.de
 Description:  Child Theme Template für die Werbeagentur 21
 Author:       Werbeagentur 21
 Author URI:   http://wa21.de
 Template:     Divi
 Version:      1.0.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         wa21
 Text Domain:  child
*/

 
/* =Theme customization starts here
------------------------------------------------------- */

/* === ALLGEMEINES === */

/* Divi Lightbox deaktivieren */
.et_pb_gallery_item a {
	pointer-events: none;
}

/* Zeilenumbrüche mit Bindestrich*/
p {
	hyphens: auto;
}	
#top-menu-nav {
	hyphens: auto;
}

/* Sidebar ausblenden*/
.et_right_sidebar #main-content .container::before {
	display: none;
}
.et_right_sidebar #left-area{
	float: none;
	margin: auto;
}

.single-post.et_right_sidebar #left-area {
	padding-right: 0px;
}

/* Colorpicker-Bug beheben*/
.wp-picker-container a span{position: relative!important;}


/* === HEADER-BEREICH === */

/* Weißen Balken über Menü beim Laden verhindern */
body.et_fixed_nav.et_secondary_nav_enabled #main-header, 
body.et_non_fixed_nav.et_transparent_nav.et_secondary_nav_enabled #main-header {
	top: 9px;
}
body.admin-bar.et_fixed_nav.et_secondary_nav_enabled #main-header, 
body.admin-bar.et_non_fixed_nav.et_transparent_nav.et_secondary_nav_enabled #main-header {
	top: 41px;
}

.et_fixed_nav.et_show_nav.et_secondary_nav_enabled.et_header_style_centered #page-container, .et_non_fixed_nav.et_transparent_nav.et_show_nav.et_secondary_nav_enabled.et_header_style_centered #page-container {
	padding-top: 140px;
}

/* Mehr Platz unter Logo */
.et_header_style_centered #main-header .logo_container {
	margin-bottom: 20px;
}

/* Top-Mobile */
#top-header #et-info{
	display: none;
	font-size: 30px;
	padding: 7px;
}
/* Menü-Eintrag "Startseite" (u.a.) */
.mobile-only {
    display: none !important;
}
.desktop-only {
    display: block;
}

/* Offenes Mobil-Menü: X statt Burger anzeigen */
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
	content: '\4d';
}

/* Schrift Menü */
#top-menu li a {
	font-weight: 300 !important;
	cursor: pointer;
}
#top-menu li li {
	line-height: 1.4em;
	padding: 0 5px 0px 0px;
	display: block;
}
#top-menu li li a {
	width: 100%;
}

#top-menu-nav > ul > li > a:hover,
#top-menu-nav ul li a:hover {
	opacity: 1;
	background-color: transparent;
	color: #4a4a4a !important;
}

/* Kein Pfeil hinter Dropdown-Links in erster Ebene */
#top-menu > .menu-item-has-children > a:first-child::after {
	display: none;
}
#top-menu > .menu-item-has-children > a:first-child {
	padding-right: 0px;
}



/* Menü-Dropdowns nach UNTEN statt nach rechts */
#top-menu-nav ul.sub-menu ul.sub-menu{
	display: none;
	position: relative;
	left: 0px;
	top: 0;
	box-shadow: none;
	padding-top: 0;
	padding-bottom: 0px;
	padding-left: 35px;
	opacity: 1;
}
#top-menu-nav ul.sub-menu {
	visibility: visible;
	display: none;
	width: 260px;
}

/* In Untermenüs keine Versalien */
#top-menu li li a{
	text-transform: none;
}

/* #et-secondary-nav .menu-item-has-children > a:first-child::after, 
#top-menu .menu-item-has-children > a:first-child::after {
	display: none;
}
*/



/* === INHALTSBEREICH === */

/* H1 - Subtitle */
.subtitle-h1 {
	font-size: 22px;
}

/* Slider Startseite */
.slider-startseite .et_pb_slide_title {
	display: none;
}
.slider-startseite .et_pb_slide {
    height: 0;
    padding-bottom: 35.4%;
}
.slider-startseite .et_pb_slide_description {
	display: none;
}


/*  Bildergalerien - 3- statt 4-spaltig*/
.et_pb_gutters3 .et_pb_column_4_4 .et_pb_gallery .et_pb_grid_item,
.et_pb_gutters2 .et_pb_column_4_4 .et_pb_gallery .et_pb_grid_item{
	width: 31%;
	margin-right: 3.5%;
	margin-bottom: 3.5%;
}
.et_pb_gutters3 .et_pb_column_4_4 .et_pb_gallery .et_pb_grid_item:nth-child(3n),
.et_pb_gutters2 .et_pb_column_4_4 .et_pb_gallery .et_pb_grid_item:nth-child(3n){
	margin-right: 0%;
}

/* Bildergalerien - Vorschaubilder */
.et_pb_gallery_grid .et_pb_gallery_image {
	cursor: pointer;
}
.et_pb_gallery_grid .et_pb_gallery_image a {
	height: 0;
	padding-bottom: 67%;
	display: block;
	overflow: hidden;
	background-color: #ececec;
}
.et_pb_gallery_grid .et_pb_gallery_image a img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 50%;
}
.et_pb_gallery_grid .et_pb_gallery_image .et_overlay {
	cursor: pointer;
	width: calc(100% + 1px);
	height: calc(100% + 1px);
}

/* Special-Galerie (Türgriffe) */
.special-gallery .et_pb_gallery_grid .et_pb_gallery_image a {
	background-color: #fff;
}

.special-gallery .et_pb_gallery_grid .et_pb_gallery_image{
	border: 1px solid #d6d6d6;
}


/* Blurbs - Bilder alle in gleicher Höhe */
.et_pb_blurb .et_pb_main_blurb_image {
	height: 0;
	padding-bottom: 66%;
	width: 100%;
	position: relative;
}

.et_pb_blurb .et_pb_main_blurb_image .et_pb_image_wrap {
	height: 100%;
	width: 100%;
}

.et_pb_blurb .et_pb_main_blurb_image .et_pb_image_wrap img{
	height: 100%;
	width: 100%;
	position: absolute;
	object-fit: contain;
	object-position: 0% 0%;
}

.et_pb_blurb.platzhalter .et_pb_main_blurb_image .et_pb_image_wrap img {
	object-fit: cover;
}

.et_pb_blurb .et_pb_blurb_content .et_pb_blurb_container {
	position: relative;
}

/* Sonderbehandlung für Blurbs mit eigenen Icons (Funktionstüren) */
.et_pb_blurb.blurb-custom-icon .et_pb_main_blurb_image {
	max-width: 250px;
	height: auto;
	padding-bottom: 0px;
}

.et_pb_blurb.blurb-custom-icon .et_pb_main_blurb_image .et_pb_image_wrap img{
	position: relative;
}

/* "Zur Kollektion" nicht umbrechen */
span.link-kollektion {
	white-space: nowrap;
	hyphens: none;
}

/* Kontaktformular */
.et_pb_contact .et_pb_contact_field_checkbox label i,
.et_pb_contact .et_pb_contact_message{
	border: 1px solid #e8e2dc !important;
}

.et_pb_contact .et_pb_contact_field_checkbox label i::before {
	color: #827b7c !important;
}

/* Türen-Enzyklopädie / Glossar */
.blogmodul-glossar {
	width: 50%;
	margin-left: calc(50% - 85px);
}
.blogmodul-glossar article{
	margin-bottom: 0px;
}


/* === FOOTER-BEREICH === */
#main-footer {
	display: none;
}

/* Selbstbau-Footer-Menü */
footer .footer-links a {
	font-weight: 300;
	padding: 2px 15px;
}


/*=========================================================
=									  					  = 	
=            MEDIA QUERIES            					  =
=									  					  =
===========================================================*/

/*=========================================================
=            MediaQuery L ( ÜBER 980)           			   =
===========================================================*/
@media screen and (min-width: 981px){
	
	/* Menü: Divi-Transitions raus, damit js toggleSlide nicht ruckelt*/
	.et_primary_nav_dropdown_animation_fade #et-top-navigation ul li:hover > ul, 
	.et_secondary_nav_dropdown_animation_fade #et-secondary-nav li:hover > ul {
		-webkit-transition: none;
		-moz-transition: none;
		transition: none;
	}
	
	#main-header #mobile_menu .sub-menu-toggle {
		display: none;
	}
}

/* Diese Breakpoints entsprechen den Divi-Breakpoints. Anpassungen, die 
für alle Bildschirmgrößen und Bildschirme über 1405px gelten sollen,
gehören ÜBER DEN MEDIA-QUERY-BEREICH. */

/*=========================================================
=            MediaQuery XL ( bis 1405)           		  =
===========================================================*/
@media screen and (max-width: 1405px){


}


/*=========================================================
=            MediaQuery L ( bis 1100)         			  =
===========================================================*/
@media screen and (max-width: 1100px){


}

/*=========================================================
=            MediaQuery M ( bis 980)           			   =
===========================================================*/
@media screen and (max-width: 980px){
	
	/* Weißen Balken über Menü beim Laden verhindern */
	body.et_fixed_nav.et_secondary_nav_enabled #main-header, 
	body.et_non_fixed_nav.et_transparent_nav.et_secondary_nav_enabled #main-header {
		top: 0px;
	}
	
	.et_fixed_nav.et_show_nav.et_secondary_nav_enabled.et_header_style_centered #page-container,
	.et_non_fixed_nav.et_transparent_nav.et_show_nav.et_secondary_nav_enabled.et_header_style_centered #page-container {
		padding-top: 70px;
	}
	
	/* Menü-Eintrag "Startseite" (u.a.) */
    .mobile-only {
        display: block !important;
    }
    .desktop-only {
        display: none;
    }
	
	/* Mobiles Menü / Header */
	#main-header > .container,
	#top-header > .container {
		width: 90%;
	}
	
	.et_header_style_centered #main-header {
		padding: 10px 0px 0px 0px;
	}	
	.et_header_style_centered #main-header #et-top-navigation {
		margin-bottom: 0px;
	}
	.et_header_style_centered #et_mobile_nav_menu {
		margin-top: 0px;
	}
	.et_header_style_centered #main-header .logo_container {
		margin-bottom: 0px;
		position: relative;
	}	
	.et_header_style_centered #main-header .mobile_nav {
		background-color: transparent;
	}
	.et_header_style_centered #main-header .mobile_nav .select_page {
		display: none;
	}	
	.et_header_style_centered #main-header .et_menu_container .mobile_menu_bar {
		top: -33px;
		right: -5px;
	}
	.et_header_style_centered #main-header .mobile_nav .mobile_menu_bar::before {
		color: #858c8c;
		font-size: 40px;
	}
	
	.et_header_style_centered #main-header .et_mobile_menu {
		top: 12px;
	}

	.et_header_style_centered #main-header .et_mobile_menu,
	.et_header_style_centered #main-header .et_mobile_menu .menu-item-has-children > a{
		font-weight: 300;
	}

	

	/* Aufklappbare Untermenüs MOBIL */
	#main-header #mobile_menu .menu-item-has-children {
		position: relative; 
	}
	#main-header #mobile_menu .menu-item-has-children > a {
		pointer-events: none;
	}
	#main-header #mobile_menu .sub-menu-toggle {
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 44px;
		line-height: 44px;
		border-radius: 50%;
		top: 0px;
		right: 10px;
		cursor: pointer;
		text-align: right;
	}
	#main-header #mobile_menu .sub-menu-toggle.popped {
		background-color: rgba(0,0,0,0);
	}
	#main-header #mobile_menu .sub-menu-toggle::before {
		font-family: "ETmodules" !important;
		font-weight: normal;
		font-style: normal;
		font-variant: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		line-height: 36px;
		font-size: 24px;
		text-transform: none;
		speak: none;
		content: '\33';
	}
	#main-header #mobile_menu .sub-menu-toggle.popped::before {
		content: '\32';
	}
	#main-header #mobile_menu .sub-menu-toggle ~ ul.sub-menu {
		display: none !important;
		padding-left: 20px;
	}
	#main-header #mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
		display: block !important;
	}
	#main-header #mobile_menu li li {
		padding-left: 0;
	}
	#main-header #mobile_menu li a, 
	#main-header #mobile_menu li li a,
	#main-header #mobile_menu li li li a {
		padding-left: 20px;
		padding-right: 20px;
	}
	#main-header #mobile_menu .menu-item-has-children .sub-menu-toggle + a {
		padding-right: 20px;
	}
	#main-header #mobile_menu .menu-item-has-children > a {
		background-color: transparent;
	}
	
	
	/* Sliderhöhe */
	.et_pb_slider, .et_pb_slider .et_pb_container, .et_pb_slider .et_pb_slide {
   		min-height: 250px;
	}
	
	/* Blurbs */
	.et_pb_blurb .et_pb_main_blurb_image {
		margin-bottom: 14px;
	}
		
	/* Swap Mobile */
	.et_pb_row.swap-mobile {
		display: flex;
		flex-direction: column-reverse;
	}
	
	/* Footer */
	footer .footer-links a {
		padding: 2px 8px;
	}
	
}

/*=========================================================
=            MediaQuery S ( unter 768)       			  =
===========================================================*/
@media screen and (max-width: 767px){

	/* Sliderhöhe */
	.et_pb_slider, .et_pb_slider .et_pb_container, .et_pb_slider .et_pb_slide {
   		min-height: 100px;
	}
	
	/*  1-spaltige Bildergalerien (Standard-Verhalten, Kollektionen) */
	.et_pb_gutters3 .et_pb_column_4_4 .et_pb_gallery.kollektion .et_pb_grid_item,
	.et_pb_gutters3 .et_pb_column_4_4 .et_pb_gallery .et_pb_grid_item,
	.et_pb_gutters2 .et_pb_column_4_4 .et_pb_gallery.kollektion .et_pb_grid_item,
	.et_pb_gutters2 .et_pb_column_4_4 .et_pb_gallery .et_pb_grid_item{
		width: 100%;
	}
	
	.et_pb_gutters3 .et_pb_column_4_4 .et_pb_gallery.kollektion .et_pb_grid_item:nth-child(2n),
	.et_pb_gutters3 .et_pb_column_4_4 .et_pb_gallery .et_pb_grid_item:nth-child(2n),
	.et_pb_gutters2 .et_pb_column_4_4 .et_pb_gallery.kollektion .et_pb_grid_item:nth-child(2n),
	.et_pb_gutters2 .et_pb_column_4_4 .et_pb_gallery .et_pb_grid_item:nth-child(2n){
		margin-right: 0%;
	}
	.et_pb_gutters3 .et_pb_column_4_4 .et_pb_gallery.kollektion .et_pb_grid_item:nth-child(2n+1),
	.et_pb_gutters3 .et_pb_column_4_4 .et_pb_gallery .et_pb_grid_item:nth-child(2n+1),
	.et_pb_gutters2 .et_pb_column_4_4 .et_pb_gallery.kollektion .et_pb_grid_item:nth-child(2n+1),
	.et_pb_gutters2 .et_pb_column_4_4 .et_pb_gallery .et_pb_grid_item:nth-child(2n+1){
		margin-right: 0%;
	}
	.et_pb_gutters3 .et_pb_column_4_4 .et_pb_gallery.kollektion .et_pb_grid_item:nth-child(2n+1),
	.et_pb_gutters3 .et_pb_column_4_4 .et_pb_gallery .et_pb_grid_item:nth-child(2n+1),
	.et_pb_gutters2 .et_pb_column_4_4 .et_pb_gallery.kollektion .et_pb_grid_item:nth-child(2n+1),
	.et_pb_gutters2 .et_pb_column_4_4 .et_pb_gallery .et_pb_grid_item:nth-child(2n+1){
		clear: none;
	}
	
	/*  2-spaltige Bildergalerien (Referenzen) */
	.et_pb_gutters3 .et_pb_column_4_4 .et_pb_gallery.referenz .et_pb_grid_item,
	.et_pb_gutters2 .et_pb_column_4_4 .et_pb_gallery.referenz .et_pb_grid_item{
		width: 48.25%;
	}
	
	.et_pb_gutters3 .et_pb_column_4_4 .et_pb_gallery.referenz .et_pb_grid_item:nth-child(2n),
	.et_pb_gutters2 .et_pb_column_4_4 .et_pb_gallery.referenz .et_pb_grid_item:nth-child(2n){
		margin-right: 0%;
	}
	.et_pb_gutters3 .et_pb_column_4_4 .et_pb_gallery.referenz .et_pb_grid_item:nth-child(2n+1),
	.et_pb_gutters2 .et_pb_column_4_4 .et_pb_gallery.referenz .et_pb_grid_item:nth-child(2n+1){
		margin-right: 3.5%;
	}
	.et_pb_gutters3 .et_pb_column_4_4 .et_pb_gallery.referenz .et_pb_grid_item:nth-child(2n+1),
	.et_pb_gutters2 .et_pb_column_4_4 .et_pb_gallery.referenz .et_pb_grid_item:nth-child(2n+1){
		clear: none;
	}
	
	
	/* Türen-Enzyklopädie / Glossar */
	.blogmodul-glossar {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	
	/* Footer */
	footer .footer-links a {
		display: block;
		float: left;
		width: 50%;
		text-align: left;
		padding-left: 0;
	}

}

/*=========================================================
=            MediaQuery XS ( unter 480)        	     	  =
===========================================================*/
@media screen and (max-width: 479px){

	/* Footer */
	footer .footer-links a {
		width: 100%;
		text-align: center;
	}

}

/* DATEIENDE. Anpassungen, die für alle Bildschirmgrößen gelten,
bitte ÜBER den Media-Query-Abschnitt schreiben! Anpassungen für bestimmte
Größen in die entsprechende Media Query. */