/*
 Theme Name:   Divi Child
 Description:  !!Enter Project Name Here!!
 Author:       Tobias Both
 Template:     Divi
 Version:      2.6.1
*/

/* 

Regeln:
1. BEM Naming Convention benutzen (Block__Element--modifier -> .form__submit--disabled)
2. Prefixes für Klassen benutzen (bf-)

*/

/****************************************************************
********************** INHALTSVERZEICHNIS ***********************
****************************************************************/

/*
1. Base Rules
2. Layout Rules
3. Modules Rules
*/

/****************************************************************
************************ 1. BASE RULES **************************
****************************************************************/

/* fonts */
@font-face {
    font-family: 'bodoni_16regular';
    src: url('/wp-content/themes/Divi-child/fonts/bodoni/bodoni-16-book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotolight';
    src: url('/wp-content/themes/Divi-child/fonts/roboto/roboto-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotomedium';
    src: url('/wp-content/themes/Divi-child/fonts/roboto/roboto-medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* colors */
    --c-blue-dark: #101C28;
    --c-blue-light: #14A0DB;    
    --c-red: #E72337;
    --c-beige: #C3AE95;
    --c-gray-1: #BAC8D0;
    
    --c-headline:#101C28;
    --c-body-text:#555;
    --c-link:#101C28;
    --c-accent1:#E72337;
    --c-accent2:#14A0DB;
    --c-button-primary:#14A0DB;
    --c-button-secondary:#101C28;
    
    /* fonts */
    --f-headline: 'bodoni_16regular';
    --f-text-light: 'robotolight';
    --f-text-medium: 'robotomedium';
}

/* body */
body {
    font-family: var(--f-text-light);
}
@media (max-width:1370px) {
    body {font-size:15px !important;}
}

/* headlines */
h1,h2,h3,h4,h5,h6 {
    font-family: var(--f-headline);
}
/* 1.250 Major Third*/
h1 {font-size:3.052rem;}
h2 {font-size:2.441rem;}
h3 {font-size:1.953rem;}
h4 {font-size:1.563rem;}
h5 {font-size:1.25rem;}
h6 {font-size:1rem;}

/* Schriftgrößen Smartphones */
@media (max-width:425px){
    h3 {font-size:1.25rem !important;}
}

/* Selection */
::-moz-selection { background: #E85E39; color:#fff; }
::selection { background: #E85E39 !important; color:#fff;}

/****************************************************************
*********************** 2. LAYOUT RULES *************************
****************************************************************/

/* 
****************************
header & navigation 
****************************
*/

/* Sekundärmenü */
#top-header .container {font-weight:normal !important;}

/* Hauptmenü */
#top-menu .bf-menu-cta a, .et-fixed-header #top-menu .bf-menu-cta a, .et-fixed-header #top-menu li.current-menu-item.bf-menu-cta>a {
    background:transparent;
    border:2px solid #E85E39;
    color:#E85E39 !important;
    padding:.7rem 1.25rem !important;
}
#top-menu .bf-menu-cta a:hover, .et-fixed-header #top-menu .bf-menu-cta a:hover, .et-fixed-header #top-menu li.current-menu-item.bf-menu-cta>a:hover {
    background:#E85E39;
    color:#fff !important;
    opacity: 1;
}
@media (max-width: 980px){
    .et_header_style_left #logo, .et_header_style_split #logo {
        max-width: 70%;
    }
}

@media (min-width: 981px) {
    .et_header_style_left #et-top-navigation, .et_header_style_split #et-top-navigation {
        padding: 35px 0 0 0 !important;
    }
    .et_header_style_left .et-fixed-header #et-top-navigation {
        padding: 25px 0 0 0 !important;
    }
    #top-menu a:after, .et-fixed-header #top-menu a:after {
        content:"";
        background:#e5e5e5;
        width:1px;
        height:34px;
        position: absolute;
        right:-14px;
        top:-10px;
    }
    #top-menu li:last-child a:after, .et-fixed-header #top-menu li:last-child a:after {display: none;}
}


@media (max-width: 1330px) {
     #et_mobile_nav_menu {
        display: block;
    }
 
    #top-menu {
        display: none;
     }
 }

/****************************************************************
*********************** 3. MODULES RULES ************************
****************************************************************/

/* Buttons */
.et_pb_scroll_top.et-pb-icon {
    background:rgba(0,0,0,0.8) !important;
    font-size:1.25rem;
    border-radius:0px;
    padding:.7rem;
    margin-right:21px;
    z-index:1000;
}
.et_pb_scroll_top:before {
    content:"";
    font-family: 'Linearicons-Free';
}
.et_pb_scroll_top.et-visible {
    webkit-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
    -moz-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
    -o-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
    animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
}
.et_pb_scroll_top.et-hidden {
    webkit-animation: fadeOutTop 1s 1 cubic-bezier(.77,0,.175,1);
    -moz-animation: fadeOutTop 1s 1 cubic-bezier(.77,0,.175,1);
    -o-animation: fadeOutTop 1s 1 cubic-bezier(.77,0,.175,1);
    animation: fadeOutTop 1s 1 cubic-bezier(.77,0,.175,1);
}

/* First Paragraph */
.first-paragraph::first-letter {
    color:#E85E39;
    font-family: 'bodoni_16regular';
    float: left;
    font-size: 2.55em;
    line-height: 1em;
    padding-top: 6px;
    padding-right: 6px;
    padding-left: 0px;
}

/* Slider */

/* Passt die Sliderhöhe an */
.bf-main-slider.et_pb_slider, .bf-main-slider.et_pb_slider .et_pb_container {height: 70vh; padding:0;}
.bf-main-slider.et_pb_slider .et_pb_container {width:80%;}
.bf-main-slider.et_pb_slider, .bf-main-slider.et_pb_slider .et_pb_slide {padding:0;}
.bf-main-slider.et_pb_slider .et_pb_slide_description { 
    position: absolute;
    background:#fff;
    bottom: 16%; 
    left:0;        
    max-width:500px;
    border-left:3px solid #e85e39;
}
/* Mobile Geräte */
@media (max-width:980px) {
    .bf-main-slider.et_pb_slider, .bf-main-slider.et_pb_slider .et_pb_container {height: 35vh; padding:0;}
    .bf-main-slider.et_pb_slider, .bf-main-slider.et_pb_slider .et_pb_slide {padding:0;}
    .bf-main-slider.et_pb_slider .et_pb_slide_description { 
        position: absolute;
        background:#fff;
        bottom: 10%; 
        left:0;        
        max-width:450px;
        border-left:3px solid #e85e39;
    }
}


/* Slider Projektbeispiele */
.bf-text-slider .et-pb-arrow-prev, .bf-text-slider .et-pb-arrow-next {opacity:1;}
.bf-text-slider .et-pb-arrow-prev:before, .bf-text-slider .et-pb-arrow-next:before {
    font-family: 'Linearicons-Free' !important;
    color:#333;
    font-size:1.25rem;
    border:1px solid #333; padding:.8rem;
}
.bf-text-slider .et-pb-arrow-prev:before {content:"" !important;}
.bf-text-slider .et-pb-arrow-next:before {content:"" !important;}

.bf-text-slider .et-pb-arrow-prev {left:0;}
.bf-text-slider .et-pb-arrow-next {right:0;}


/* Section Divider */
.bf-divider-roundedsplit:before,
.bf-divider-roundedsplit:after {
    position: absolute;
	content: "";
	top: -30px;
	left: 0;
	z-index: 10;
	width: 50%;
	height: 30px;
	background: inherit;
}
.bf-divider-roundedsplit:before {
	border-radius: 0 50px 0 0;
}
.bf-divider-roundedsplit:after {
	left: 50%;
	border-radius: 50px 0 0 0;
}


/* Lists */
.et_pb_module li:before {
    content:"";
    color:#333;
    font-family: 'Linearicons-Free';
    position: absolute;
    left:0;   
}
.et_pb_module ul {
    list-style-type:none;
    padding: 0 0 23px 1.5em;
}
.et_pb_module ul li {margin:.5rem;}
.et_pb_widget_area #menu-datenschutz-sidebar-menue {position: relative; padding: 0 0 0 1.5em !important;}
.et-menu-nav li:before {
    display: none;
}


/* Leistungen Grid */
@media (min-width:981px) and (max-width:1300px) {
    .bf-leistungen .et_pb_column_1_3, .bf-leistungen .et_pb_column_2_3 {
        width: 100% !important;
    }
    .bf-leistungen .et_pb_column_1_3 {
        margin-bottom:2rem;
    }
}


/* Contact Modul */
.bf-contact-modul a {color:#fff;}
.bf-contact-modul-dark a {color:#131011 !important;}
.bf-contact-modul a:hover, .bf-contact-modul-dark a:hover {text-decoration: underline;}
.bf-contact-modul .et_pb_module_header, .bf-contact-modul-dark .et_pb_module_header {font-family: var(--f-text-medium);}
.bf-contact-modul .lnr, .bf-contact-modul-dark .lnr,
.bf-contact-modul .fab, .bf-contact-modul-dark .fab {margin-right:.3rem;}


/* Standard Headline Zentriert */
.bf-standard-headline-zentriert p {
    font-family: var(--f-text-medium);
    font-size:1.25rem;
    color:#E85E39 !important;
    margin-bottom:1rem;
}
@media (max-width:425px) {
    .bf-standard-headline-zentriert p {font-size:1rem;}
    .bf-standard-headline-zentriert h2 {font-size:1.5rem;}
}


/* Job Listing */

/* padding zurücksetzen */ 
ul.job_listings li.job_listing a div.position, div.job_listings ul.job_listings {padding-left:0;}
ul.job_listings li.job_listing a {padding:1rem 1.25rem;}

/* Liste anpassen */
div.job_listings ul.job_listings {border:1px solid #ccc; padding-bottom:0;}
div.job_listings ul.job_listings li:before {display: none;}
div.job_listings ul.job_listings li:nth-of-type(odd), div.job_listings ul.job_listings li.job_position_featured:nth-of-type(odd) a {background:#fff;}
ul.job_listings .claim {color:#131011;}
ul.job_listings li.job_listing a div.position {width:80%;}
ul.job_listings li.job_listing a div.location {width:20%;}
ul.job_listings li.job_listing a div.location:before {
    content:"";
    color:#333;
    font-family: 'Linearicons-Free';
    position: relative;
    left:0; 
}
ul.job_listings li.job_listing a div.position h3 {font-family:var(--f-text-medium); position: relative; display: inline-block; margin-bottom:.5rem;}
ul.job_listings li.job_listing a div.position h3:before {content: ""; width:100%; height: 1px; background: #131011; position: absolute; bottom:0; left:0;}
ul.job_listings li.job_listing a div.position h3:after {
    content:"";
    color:#333;
    font-family: 'Linearicons-Free';
    position: relative;
    right:0; 
    margin-left:.5rem;
    transition: all 200ms;
}
ul.job_listings li.job_listing a div.position h3:hover:after {
    margin-left:1rem;
}
ul.job_listings li.job_listing a:hover, div.job_listings ul.job_listings li.job_position_featured a:hover {background: #e9e9e9;}
@media (max-width:425px) {
    ul.job_listings li.job_listing a div.position h3 {font-size:1rem !important;}
    ul.job_listings li.job_listing a {padding:.8rem;}
    ul.job_listings .claim {font-size:.8rem;}
    ul.job_listings li.job_listing a div.position {width:100%;}
    ul.job_listings li.job_listing a div.location {width:100%;}
}

.single-job_listing .et_pb_post_content h2 {
    border-left:3px solid #E85E39;
    padding:0 1.25rem;
    line-height:normal;
    margin-top:2rem;
    margin-bottom:1rem;
}

/* Passwortgeschützter Beitrag */
.post-password-required .entry-content {
    max-width:1300px;
    margin:auto;
    padding:5% 0;
}

/* Contact Form 7 */
.form-row {width: 100%; padding:10px 0;}
.form-row p {
    margin-bottom:12px;
    padding-bottom:0px;
    color:#1A222F;
    font-weight:600;
}
.column-half, .column-quarter {
    float: left;
	position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.column-half {width:100%;}
.column-quarter {width:50%;}
.form-col-left {padding:0 10px 20px 0;}
.form-col-right {padding:0 0 20px 10px;}
span.wpcf7-list-item {margin-left:0 !important;}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.wpcf7 input[type="text"], 
.wpcf7 input[type="email"], 
.wpcf7 textarea, 
.wpcf7 input[type="tel"], 
.wpcf7 select {
	width: 100%;
    font-size:1rem;
	padding: .9rem;
	background:#fff;
    border:0;
    border-radius:0;
    border-bottom:1px solid #131011;
	-webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	      box-sizing: border-box;
}
.wpcf7 textarea {background:#fff;}
label .wpcf7-list-item-label {font-size: 14px; color:#333 !important; line-height:14px;}
.wpcf7 input:focus, 
.wpcf7 textarea:focus{
    -webkit-box-shadow:inset 0px 0px 0px 2px #E85E39;
    -moz-box-shadow:inset 0px 0px 0px 2px #E85E39;
    box-shadow:inset 0px 0px 0px 2px #E85E39;
}
.wpcf7 textarea {height:256px;}
.wpcf7-submit{
    font-size:1rem;
	background:transparent;
    border:2px solid #E85E39;
    color:#E85E39 !important;
	padding:.7rem 1.25rem;
	cursor: pointer;
    font-weight:normal;
    position: absolute;
    right:0;
    margin-top:1rem;
    text-transform: uppercase;
    opacity: 1;
    -webkit-transition: all 200ms ease-in-out; /* Firefox */
    -moz-transition: all 200ms ease-in-out; /* WebKit */
    -o-transition: all 200ms ease-in-out; /* Opera */
    transition: all 200ms ease-in-out; /* Standard */
}
.wpcf7-submit:hover{
    color:#fff !important;
    background:#E85E39;
}
span.wpcf7-not-valid-tip{
	text-shadow: none;
	font-size: .8rem;
	color: #D24335;
	background: transparent;
	padding: 5px 0;
}
div.wpcf7-validation-errors { 
	text-shadow: none;
	border: transparent;
	background: #FFE29E;
	padding: 1rem;
	color: #9C6533;
	text-align: center;
	margin: 40px 0 0 !important;
	font-size: 1rem;
}
div.wpcf7-mail-sent-ok{
	text-align: center;
	text-shadow: none;
	padding: 20px;
	font-size: 16px;
	background: #8EDA89;
	border-color: #8EDA89;
	color: #fff;
	margin: 40px 0 0 !important;
}
.ssl-info {font-size:16px;}
.ssl-info .lnr {color:#0D8A74;}

@media (max-width:1500px) { 
    .form-column-half {width:100% !important;}
}
@media (max-width:660px) {
    .et_pb_text .form-row column-quarter.form-col-right.senden-button {width:100% !important;}
}
@media (max-width:425px) {
    .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7 input[type="tel"], .wpcf7 select {font-size:16px;}
}