/*
 Theme Name:     Agentur Klocke
 Theme URI:      https://www.klocke-agentur.de
 Description:    Divi Child Theme
 Author:         Florian Heinz
 Author URI:     https://www.workin-media.de
 Template:       Divi
 Version:        1.0.0
*/



@import url("../Divi/style.css");
@import url("css/style.css");
 
/* =Theme customization starts here

------------------------------------------------------- */



#top-header {position: relative; background-color: #007f9d;  }

/* ##### Navigation ##### */

#top-menu li a {font-size: 14px !important;}
li.current_page_item, li.current_page_parent {color: #fff;}

.et_header_style_left #et-top-navigation, .et_header_style_split #et-top-navigation {padding-top: 20px;}
.et_header_style_left #et-top-navigation nav > ul > li > a, .et_header_style_split #et-top-navigation nav > ul > li > a {padding-bottom: 20px;}

#intro.et_pb_section_1 {border-top: 0;}
#intro .et_pb_row,
#aktuelles .et_pb_row {width: 100% !important;}
#intro .introbutton {
    font-family: Caveat,cursive;
    /*font-size: 22px;
    color: #fff !important;
    line-height: 1.2;
    text-align: center;*/
    text-transform: uppercase;
}

.introbutton a {color: #fff; text-decoration: none;}
.introbutton a:hover, #intro .introbutton a:focus {color: #fff; text-decoration: underline;}

#intro.mobile #introtext {   
	background: #e5ad63;
    padding: 2em;
	margin-right: 0 !important;
}

#intro.mobile .introbutton p {font-size: 1.5rem; padding: 12px 0;}

#aktuelles h2.entry-title {
    font-size: 16px !important;
    line-height: 20px !important;
    margin-top: 12px !important;
    padding-bottom: 12px !important;
	padding-left: 36px;
	padding-right:36px;
}

.et_pb_column_1_3 h5,
.et_pb_column_1_4 h5 {font-weight: bold;}

#aktuelles p, 
#aktuelles a.more-link {
    font-size: 13px;
    line-height: 1.75;
	padding-left: 36px;
	padding-right:36px;
	font-weight: normal;
}

#pre-footer p {
	font-size: 13px;
	line-height: 1.5;
	color: #007f9d;
}

/* ##### Button "Zukunft" Startseite ##### */

#button-zukunft img {
	z-index: 10;
    width: 300px;
}


/* ##### Button "Video" ##### */

.videobutton {
    text-align: center;
    border: 4px solid #F7AF5E;
    border-radius: 3px;
    width: 85%;
    margin: 0 auto;
}

.videobutton a{
	display: block;
	padding: 12px 48px;
	color: #fff;
	background: #F7AF5E;
	text-decoration: none;
	transition: all ease 0.3s;
	font-size: 1.5em;
	text-transform: uppercase;
}

.videobutton a:hover, .videobutton a:focus, .videobutton a:active {
	color: #F7AF5E;
	background: #fff;
	text-decoration: none;
}


/* ##### Grid Layout der Startseite ##### */

#aktuelles {overflow: hidden;}

    .four-column-blog-grid .et_pb_column_1_2,
    .four-column-blog-grid .et_pb_column_1_3, 
    .four-column-blog-grid .et_pb_column_1_4 {
        width: 100%;
    }

	.four-column-blog-grid.et_pb_row {
		padding: 0;
		border-bottom: 60px solid #E5AD63;
	 }

	.et_pb_section .four-column-blog-grid.et_pb_row .et_pb_column .et_pb_module:last-child {margin-bottom:-1px;}

    .four-column-blog-grid .et_pb_post {
        display:inline-block;
        vertical-align:top;
       	width: 25%;
        margin-left: -3px !important; 
    }

	.four-column-blog-grid .et_pb_post:nth-child(1),
	.four-column-blog-grid .et_pb_post:nth-child(3),
	.four-column-blog-grid .et_pb_post:nth-child(6),
	.four-column-blog-grid .et_pb_post:nth-child(8) {background-color: #007f9d;}

	.four-column-blog-grid .et_pb_post:nth-child(1) h2,
	.four-column-blog-grid .et_pb_post:nth-child(3) h2,
	.four-column-blog-grid .et_pb_post:nth-child(6) h2,
	.four-column-blog-grid .et_pb_post:nth-child(8) h2 {color: #fff;}

	.four-column-blog-grid .et_pb_post:nth-child(1) p,
	.four-column-blog-grid .et_pb_post:nth-child(3) p,
	.four-column-blog-grid .et_pb_post:nth-child(6) p,
	.four-column-blog-grid .et_pb_post:nth-child(8) p {color: #fff;}

	.four-column-blog-grid .et_pb_post:nth-child(1) a.more-link,
	.four-column-blog-grid .et_pb_post:nth-child(3) a.more-link,
	.four-column-blog-grid .et_pb_post:nth-child(6) a.more-link,
	.four-column-blog-grid .et_pb_post:nth-child(8) a.more-link {color: #E5AD63;}

	#pre-footer .et_pb_column.et_pb_column_1_4.et_pb_column_6,
	#pre-footer .et_pb_column.et_pb_column_1_4.et_pb_column_10 {margin-right:0; width: 23%;}



#footer-info {display: none;}

@media (max-width: 1200px) and (min-width: 981px){
.four-column-blog-grid .et_pb_post {width: 50% !important;}
}

@media screen and (min-width: 981px) {
#intro .et_pb_column {margin-right: 10px !important;}
#intro .et_pb_column.last, #intro .et_pb_gutters4 .et_pb_column {margin-right: 0 !important;}
#intro .et_pb_column_1_2#introtext {width: 60.334%;}

#aktuelles .size-1of3 {
    width: 33.333%;
    margin-right: 0;
}

#aktuelles .et_pb_post {
    margin-bottom: 0;
    height: 600px;
	border: 0;
	/*padding: 1em 3em;*/
}

.four-column-blog-grid .et_pb_row {padding: 0 !important;}

}

@media (max-width:980px) {
	.four-column-blog-grid .et_pb_post {
		width:100%;
	}
}

@media (min-width:320px) {
	.desktop {display: none;}
	body.desktop {display: block;}
	.mobile {display: block;}

	#button-zukunft {
    position: relative;
    left: 0;
    top: 0;
}

#intro.mobile #introtext {width: 100% !important;}
}

@media (min-width:980px) {

	#intro.mobile #introtext {width: 70.75% !important;}
}

@media (min-width:981px) and (max-width:1200px) {
	.four-column-blog-grid .et_pb_post {
		width:46%;
	}
}

@media (min-width:1025px) {
	.desktop {display: block;}
	.mobile {display: none;}

	#button-zukunft {
	position: absolute;
    left: -33px;
    top: -155px;
}
}