/*
 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.0
 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 ===== */

/* Automatische Umbrüche */
#top-menu-nav,
h1, h2, h3, h4, h5, h6, p{
	hyphens: auto;
}	
/* Hilfsklasse "no-hyphens" wenn man manuelle Umbrüche setzen will */
.no-hyphens,
.no-hyphens h1,
.no-hyphens h2,
.no-hyphens h3,
.no-hyphens h4,
.no-hyphens h5,
.no-hyphens p{
	hyphens: none;
}

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

/* Bugfix: Colorpicker manchmal seltsam */
.wp-picker-container a span{position: relative!important;}

/* Bugfix: Pfeil bei CTA-Button falsche Textgröße */
body #page-container .et_pb_promo .et_pb_button::after {
	font-size: 1em !important;
}


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

/* Logo überhängen lassen, Header schmaler */
#logo {
	min-height: 150px;
    border: 10px solid #fff;
    box-shadow: 0px 5px 10px -4px rgba(0,0,0,.4);
	background-color: #fff;
	object-fit: contain;
}


/* Top-Mobile */
#top-header #et-info{
	display: none;
	font-size: 20px;
	padding: 7px;
}

/* Menü-Eintrag "Startseite" */
.mobile-only {
    display: none !important;
}
.desktop-only {
    display: block;
}

/* Kreis-R in Title soll hochgestellt sein" */
.hochgestellt {
	height: 0;
	line-height: 1;
	position: relative;
	vertical-align: baseline;
	top: -0.8em;
	font-size: 20pt;
}



/* ===== INHALTSBEREICH ===== */

/* Fullscreen-Section */
.fullscreen-section {
	height: 95vh;
	position: relative;
}
/* (für Slider) */
.fullscreen-section .et_pb_slide { 
	height: 95vh;
	background-size: cover !important;
}
.scrolldown-row {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Formatieren der Subheader-Zeile*/
.et_pb_section .subheader-zeile {
	line-height: 1.3em;
	font-size: 35px;
	font-weight: normal;
	display: block;
	margin-top: 30px;
}

/* Grundsätzlich kein Bildtitel in Lightbox */
.mfp-title {
	display: none;
}

/* Slider fester Höhe mit fixem Text */
.slider-fixed-text .et-pb_gallery .et_pb_gallery_image {
	max-height: 400px; /* Legt Höhe für ganzen Slider fest */
}
.slider-fixed-text .et_pb_text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}


/* ===== FOOTER BEREICH ===== */

/* Main Footer ausblenden (Leiste ganz unten)*/
#main-footer {
	display: none;
}

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

/* 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){

	/* Sliderhöhe */
	.et_pb_slider, .et_pb_slider .et_pb_container, .et_pb_slider .et_pb_slide {
   		min-height: 250px;
	}
	
	#logo {
		min-height: 100px;
	}
	
 	/* Menü-Eintrag "Startseite" */
    .mobile-only {
        display: block !important;
    }
    .desktop-only {
        display: none;
    }
	
	
	/* Formatieren der Subheader-Zeile*/
	.et_pb_section .subheader-zeile {
		font-size: 30px;
		margin-top: 15px;
	}
	
	/* Divider grundsätzlich niedriger */
	.section_has_divider.et_pb_bottom_divider .et_pb_bottom_inside_divider,
	.section_has_divider.et_pb_top_divider .et_pb_top_inside_divider{
		background-size: 100% 75px !important;
		height: 75px !important;
	}
	
	/* Galerien nicht 3- sondern weiter 4-spaltig */
	.et_pb_column .et_pb_gallery .et_pb_grid_item {
		width: 20.875%;
		margin-right: 5.5%;
	}
	.et_pb_column .et_pb_gallery .et_pb_grid_item:nth-child(4n) {
		margin-right: 0%;
	}
	
	/* Spalten-Reihenfolge umkehren */
	.swap-mobile > .et_pb_row,
	.swap-mobile.et_pb_row{
		display: flex;
		flex-direction: column-reverse;
	}
	
	
}

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

	#top-header #et-info{
		display: block;
	}

	/* Sliderhöhe */
	.et_pb_slider, .et_pb_slider .et_pb_container, .et_pb_slider .et_pb_slide {
   		min-height: 100px;
	}
	
	
	/* Kreis-R in Title soll hochgestellt sein" */
	.hochgestellt {
		top: 0em;
	}
	
	/* Divider grundsätzlich niedriger */
	.section_has_divider.et_pb_bottom_divider .et_pb_bottom_inside_divider,
	.section_has_divider.et_pb_top_divider .et_pb_top_inside_divider{
		background-size: 100% 50px !important;
		height: 50px !important;
	}
	
	/* Formatieren der Subheader-Zeile*/
	.et_pb_section .subheader-zeile {
		font-size: 24px;
	}
	
	/* Galerien nicht mehr 4- sondern 2-spaltig */
	.et_pb_column .et_pb_gallery .et_pb_grid_item {
		width: 47.25%;
		margin-right: 5.5%;
	}
	.et_pb_column .et_pb_gallery .et_pb_grid_item:nth-child(2n) {
		margin-right: 0%;
	}

}

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


}

/* 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. */