/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Hanlding Updates
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
	Typography
-----------------------------------------------------------------*/

body { font-size: 1.1rem; }

h1 { font-size: 2.5rem; }

h2 { font-size: 2rem; color: #990000 }

h3 { font-size: 1.75rem; }

h4 { font-size: 1.5rem; }

h5 { font-size: 1.3rem; }

h6 { font-size: 1.15rem; }


.promo.promo-dark h4, .promo.promo-dark p {
    color: #FFF;
}

.feature-box h3 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #990000;
}

.highlight {
    background-color: #9900000f;
    color: #000;
}

/* MENU  */

#primary-menu ul li > a {
    font-weight: 700;
    font-size: 1.1rem;
}



/* FOOTER */
#footer .footer-widgets-wrap {
	position: relative;
	padding: 30px 0;
}


/* PRODUKTE */

.diesel {
	background-color: #002868 !important;
}
.heizoel {
	background-color: #4F0000 !important;
}
div.promo.promo-dark h3 span a {
	color: #FFF !important;
	border-bottom: 2px dashed #FFF;
}
div.promo.promo-dark h3 span a:hover {
	color: #FFF !important;
	border-bottom: 2px solid #FFF;
}

/* KARTE */

.fluid-width-video-wrapper {
	width: 100%;
	position: unset !important;
	padding: 0;
}


/* KONTAKT */

.form-check-label, label.error {
	margin-left: 20px;
}

.form-check-input {
	margin-left: 0;
}

.form-control::placeholder {
    color:	#E5E5E5;
}

label.form-check-label.checker {
	margin-left: 1.25rem;
}

label {
    font-weight: 300;
    font-family: 'Raleway', sans-serif;
    text-transform: none;
}

		/* Als erstes verstecken wir die Standard Form-Elemente */
		.form-group.brennstoffe label input[type="radio"] {
		    display: none !important;
		}
		/* 
		Dem Label gebe ich ein Display Block, 
		damit dieser über die komplette Breite klickbar ist.
		*/
		.form-group.brennstoffe label {
		    display: block;
		    position: relative;
		    padding: 20px;
		    color: #FFF;
		    height: 140px;
		    font-size: 1.5em;
		}
		
		/* Der span ist unsere neue Checkbox und den stylen wir wie folgt */
		.form-group.brennstoffe label span {
		    width: 100%;
		    height: 100%;
		    display: inline-block;
		    border: 2px solid #DDD;
		    position: absolute;
		    top: 0;
		    left: 0;
		    
		    /* Ein Transition Effekt für den Hover - Checked Status. Dadurch wirkt es etwas animiert. */
		    transition: all .2s linear;
		}

		/* Hover-Effekt */
		.form-group.brennstoffe label:hover span {
		    border: 1px solid #8BC34A;
		}
		
		/* 
		Mit dem "+" Selektor können wir das direkt nachfolgende Element
		ansprechen, indem Fall unser Label mit darin enthalten span.
		*/
		.form-group.brennstoffe label input[type="radio"]:checked + span {
		    border: 6px solid #8BC34A;
		}




/* div  */

.colborder {
	border-right: 1px solid #555555;
}

.history {
	border: 15px solid #FFF;
	margin: 1em 0;
	box-shadow: 0 2px 2px #555;
}

/* SLIDER  */