@font-face {
    font-family: BlitzFont;
    src: url(../fonts/bormann-blitz.ttf);
}


/* ---------- BASIC ----------- */

html{
	overflow-x: hidden;
}

body,
html {
    width: 100%;
    height: 100%;
	font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: 1.6;
}

h1 { 
	font-size: 5vw; 
	margin-top: 30px; 
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	z-index: 50;
	position: relative;
	display: inline-block;
}

h2 { 
	font-size: 50px; 
	margin-top: 0px; 
	margin-bottom: 30px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
}

h3 { 
	font-size: 20px; 
	margin-top: 0px; 
	margin-bottom: 30px; 
	font-family: 'Montserrat', sans-serif;
}

h4 { 
	font-size: 25px; 
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	color: white;
	margin-top: 50px;
    margin-bottom: 40px;
}

h5 { 
	font-size: 16px; 
	margin-top: 0px; 
	margin-bottom: 5px; 
	font-family: 'Montserrat', sans-serif;
	color: #ff6600;
}


p { 
    line-height: 1.8em;
    font-size: 16px;
	color: #666666;
}

a:hover{
	color: #666666 !important;
	text-decoration: none;
}

section{
	position:relative;
}

footer a { color: white; }

b{
	font-weight: 500 !important;
}


#loader-icon-wrap { 
	height: 100%;
	min-height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    position: fixed;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.85);
	margin: 0 auto;}

#loader-icon { color: #ffffff;  
	margin: -75px 0 0 -75px;
  left: 50%;
  top: 50%;
	height: 150px;
	width: 150px;
	position: absolute;
 }



/* ---------- COLORS ----------- */

.orange { color: #ff6600; }
.grey { color: #666666; }
.white { color: #ffffff; }

.orange-bg { background-color: #ff6600; }
.grey-bg { background-color: #666666; }
.white-bg { background-color: #ffffff; }
.light-grey-bg{ background-color: #858585; }







/* ---------- NAVIGATION ----------- */

.navbar { 
	margin-bottom: 0px; 
	height:90px;
	background-color: #ff6600;
	border-bottom: 1px solid rgba(0,0,0,0.2);
}

nav {
	background: url(../img/nav_bg.png) no-repeat center center;
background-size: cover;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.nav { 
margin-top: 40px; 
float:right; 
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.nav li { float: left; color: #1a171b; font-size: 17px; padding: 5px 15px 5px 15px; font-family: 'Montserrat', sans-serif; font-weight: 300;}

.nav li a { 
	color: #ffffff; 
	padding: 0;
	background-color: transparent !important; 
}

.nav li a:hover, .nav li a:active, .nav li a:visited { 
	background-color: transparent !important; 
	text-decoration: none;
}



.navbar-brand { 
	padding: 0; 
}

nav svg { margin-top: 16px; margin-bottom: 16px; }

.navbar img {
 	width: 100%;
  	margin-top: 0px;
	-webkit-transition: width .8s ease-in-out, margin-top .8s ease-in-out;
	-moz-transition: width .8s ease-in-out, margin-top .8s ease-in-out;
	transition: width .8s ease-in-out, margin-top .8s ease-in-out;
}

.logo-collapse img {
    width: 70%;
    margin-top: 5px;
}

.logo{width: 200px}


.navbar-toggle { 
	margin-top: 20px;
	-webkit-transition: width .8s ease-in-out, margin-top .8s ease-in-out;
	-moz-transition: width .8s ease-in-out, margin-top .8s ease-in-out;
	transition: width .8s ease-in-out, margin-top .8s ease-in-out;
}


/* NAV Collapse -------------------------------------------------- */

.top-nav-collapse { 
	height: 70px;  
}
 
 .top-nav-collapse .nav { 
	margin-top: 20px; 
}



#formbox { margin-top: 25px; }

.btn { 
	white-space: normal !important; 
	background-color:white;
	color: #ff6600;
	width:100%;
	border-radius:0;
	height: 80px;
	margin-top:30px; 
	margin-bottom:150px; 
	font-size:20px; 
	font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

.btn:hover { 
	color: #ff6600 !important;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(255,255,255,1);
	-moz-box-shadow: 0px 0px 20px 0px rgba(255,255,255,1);
	box-shadow: 0px 0px 20px 0px rgba(255,255,255,1);
}









/* ----------------------------- FORM ----------------------------- */

input {
	margin-bottom: 20px;
	background-color: #FFFFFF !important;
	color: white !important;
	width: 100% !important;
    font-size: 18px !important;
    height: 50px !important;
}

	
.form-control {
	background-color: transparent !important;
	border:0px;
	box-shadow: none;
	border-bottom: 1px solid rgba(255,255,255,0.5);
	border-radius:0;
	color: #ffffff !important;
}
	

.form-group {
	width: 100%;
	}

.terms {
	display: none;
	}
	
select {
	margin-bottom: 20px;
	color: black !important;
	width: 100% !important;
    font-size: 18px !important;
    height: 50px !important;
	
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border:none;
	border-radius: 0 !important;
	font-size: 1em;
	background-color: white !important;
}
	
select:-moz-focusring, textarea:-moz-focusring {
    color: transparent !important;
    text-shadow: 0 0 0 #000 !important;
}

select.colorMeBlue.noValue,
select.colorMeBlue option:first-child {
    color: rgba(255,255,255,0.5) !important;
}

.noValue{
	background-image:url(../img/select-arrow.png) !important;
	background-size:20px;
	background-position: calc(100% - 15px);
	background-repeat: no-repeat;
}

select:focus, select:active{
	color: white !important;
	border-bottom:1px solid white !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

option{
	color: black !important;
}


textarea { 
	font-size: 18px !important; 
	line-height: 1.25 !important; 
	width:100% !important; 
	height:190px !important; 
	border-color: transparent !important; 
	padding:10px !important;	
	border-radius: 0 !important;
	border: 0 !important;
	background-color: #FFFFFF !important;
	color: #676071 !important;
	margin-bottom: 20px;	
	border-bottom: 1px solid rgba(255,255,255,0.5) !important;
}

textarea:focus, textarea:active{
	color: white !important;
	border-bottom:1px solid white !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

label { font-size: 18px !important; font-weight: 400; line-height: 1.25; }

.has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label {
	color: #ffffff;
	background-color: #e2001a;
	padding: 5px 10px;
}

.has-success .form-control {
	border-bottom:1px solid white;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.has-success .form-control:focus {
	border-bottom:1px solid white;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.has-error .form-control {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.has-error .form-control:focus {
    border-color: transparent;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
	
.form-control-feedback { margin-top: 18px; }

.terms {
	display: none;
	}

.has-success .form-control-feedback {
    color: white;
    margin-top: 0px;
}

input:focus{
	border-bottom:1px solid white !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}


::-webkit-input-placeholder { /* Chrome */
	color: white !important;
	opacity: 0.5 !important;
}
:-ms-input-placeholder { /* IE 10+ */
	color: white !important;
	opacity: 0.5 !important;
}
::-moz-placeholder { /* Firefox 19+ */
	color: white !important;
	opacity: 0.5 !important;
}
:-moz-placeholder { /* Firefox 4 - 18 */
	color: white !important;
	opacity: 0.5 !important;
}








/* ---------- FOOTER ----------- */

.modal-body{
	font-size: 16px;
	padding: 50px;
}

.modal-title{
	color:#ff6600;
	padding: 0 30px;
}









/* ---------- FOOTER ----------- */


footer { color:white;}

footer svg{
    margin-bottom: 20px !important;
}

footer p { 
    line-height: 1.4em;
}












/* ---------- ELEMENTS ----------- */

#intro{
	background: url(../img/beton.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	padding: 150px 0;
}

#arbeitgeber{
	padding: 150px 0;
}

#jobs{
	padding: 100px 0;
}

#berufsbild{
	padding: 150px 0;
}

#projekte{
	padding: 150px 0;
}

#ausbildung{
	padding: 150px 0;
}

#form{
	padding: 150px 0;
	padding-bottom: 75px;
}


.spacer{
    margin: 200px -15px 0 -15px;
}

.a-icons{
    width: 70%;
    margin-left: 15%;
}

.no-padding{ padding-right:0;padding-left:0; }

#slideshow .owl-carousel .owl-item img {
    display: block;
    width: auto !important;
    height: 500px !important;
}

#slideshow .owl-carousel.owl-drag .owl-item {
    height: 500px !important;
}

#slideshow .owl-carousel {
    height: 500px !important;
}

.owl-prev {
    width: 50px;
    height: 80px;
    position: absolute;
    top: 50%;
    margin-left: -5vw;
    border:0px solid black;
	background: transparent url(../img/arrow.png) 0 0 no-repeat !important;
}

.owl-next {
    width: 50px;
    height: 80px;
    position: absolute;
    top: 50%;
    right: -5vw;
    border:0px solid black;
	background: transparent url(../img/arrow.png) 0 0 no-repeat !important;
	transform: rotate(180deg)
}
.owl-prev i, .owl-next i {transform : scale(1,6); color: #ccc;}

.trenner{
	width: 20px;
	transform: rotate(-90deg);
}

.projekt-box{
	padding: 60px;
	margin-top: 50px;
}

.projekt-box h2{
	text-transform: inherit;
	font-size: 40px;
}

.projekt-img{
    width: 500px !important;
    float: left;
	margin-right: 25px;
    margin-top: 25px;
}

.intro-box{
	background: url(../img/beton.jpg) no-repeat;
	background-color: #ff6600;
	background-blend-mode: multiply;
}

.intro-img{
    margin-top: -50px;
    margin-left: -50px;
    margin-bottom: -50px;
}

.intro-text{
    padding: 30px 50px 50px 0px;
    margin-left: -15px;
}

.arbeitgeber-blitz1{
    position: absolute;
    left: 10%;
    top: 40%;
    width: 10vw;
}

.arbeitgeber-blitz2{
    opacity: 0.2;
    position: absolute;
    left: 9%;
    top: 36%;
    width: 9vw;
}

.img-bulb{
    width: 60%;
    margin-left: 20%;
    position: relative;
    z-index: 50;
    margin-top: -20%;
}

.dreieck0 {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 30px solid #ffffff;
}

.dreieck1 {
    position: absolute;
    top: 0;
    left: 30%;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 30px solid #666666;
}


.dreieck2 {
    position: absolute;
    top: 0;
    left: 30%;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 30px solid #ff6600;
}


.dreieck3 {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 30px solid #666666;
}

.dreieck4 {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 30px solid #ffffff;
}

.img-elektriker{
	position: absolute;
    left: 10%;
    z-index: 2;
    top: 50%;
}

.orange-link a{
	color: #ff6600 !important;
	font-weight: 500;
}

.icon-blitz:before {
	font-family: BlitzFont;
  content: "\e900";
}

.blitz {
    position: relative;
    z-index: 5;
    font-size: 10vw;
    margin-top: -60px;
    display: inline-block;
    line-height: 0;
    margin-left: 65px;
    margin-right: -50px;
}

@media screen and (min-width: 1700px) {
	
	.blitz {
    	font-size: 160px;
	}
	
	h1 { 
		font-size: 80px; 
	}
	
}

.fb-link a{
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}

#form .container{
	border-bottom: 2px solid white;
}

.design{
    padding: 10px 0;
    margin-top: 40px;
}

.design a{
    opacity: 0.4;
}

.design a:hover{
    opacity: 1;
	color: white !important;
}

.hidden-md{
	display: none;
}

.job-inner{
	background-color: white;
	padding:30px;
}

.job-box{
	padding-left: 0;
	margin-bottom: 15px;
}

.job-box p{
	margin-bottom: 0px;
}

.job-inner:hover { 
	color: #ff6600 !important;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(255,255,255,1);
	-moz-box-shadow: 0px 0px 20px 0px rgba(255,255,255,1);
	box-shadow: 0px 0px 20px 0px rgba(255,255,255,1);
}

.rotate{
	transform: rotate(-90deg);
	color: white;
}

.rotate-box{
	margin-top: 7%;
}

#jobs h4{
	margin-top:0px;
}

.berufsbild-spacer{
	height:150px;
}

#ausbildung li {
    line-height: 1.8em;
    font-size: 16px;
    color: #666666;
}

#ausbildung ul {
    padding-left: 15px;
}








/* ------------------------------ MOBILE ------------------------------- */


@media screen and (max-width: 767px) {
	
	.fa-bars{
		color: white;
		font-size: 30px;
	}
	
	
	h1 {
    	font-size: 6vw;
	}
	
	h2 {
    	font-size: 30px;
    	text-align: left;
		text-align: center;
	}
	
	h3, h4 {
		text-align: center;
	}
	
	.projekt-box h2 {
    	font-size: 20px;
	}
	
	#intro {
    	padding: 100px 0;
    	padding-top: 150px;
	}
	
	#arbeitgeber {
    	padding: 100px 0;
	}
	
	#berufsbild {
    	padding: 100px 0;
	}
	
	#ausbildung {
   		padding: 100px 0;
	}
	
	#form {
    	padding-bottom: 30px;
	}
	
	.navbar { 
		height:85px;
		text-align: center;
	}
	
	.navbar-collapse {
    	background-color: #ff6600;
    	box-shadow: none;
    	margin-top: 0;
		margin-top: 15px;
	}
	
	.navbar-collapse .nav { 
    	float: none;
    	margin: 20px;
	}
	
	.top-nav-collapse .navbar-toggle {
    	margin-top: 10px;
	}
	
	.nav li {
    	float: none;
    	display: block;
    	margin-bottom: 10px;
	}
	
	.navbar-collapse.in {
    	overflow-y: auto;
    	border: 1px solid rgba(0,0,0,0.2);
	}

	
	.container{
		padding: 0 40px;
	}
	
	.projekt-box {
    	padding: 30px;
	}
	
	.img-elektriker {
    	position: relative;
    	left: 0;
    	top: 50%;
    	width: 100%;
	}
	
	.img-bulb {
    	width: 50%;
    	margin-left: 40%;
    	position: relative;
    	z-index: 50;
    	margin-top: 0;
    	margin-bottom: -20%;
	}
	
	.intro-img {
    	margin-top: 30px;
    	margin-left: -40px;
    	margin-bottom: 0;
    	width: calc( 100% + 80px ) !important;
    	max-width: inherit !important;
	}
	
	.intro-text {
    	padding: 30px;
		margin-left: 0px;
	}
	
	.blitz {
    	margin-left: 35px;
    	margin-right: -20px;
	}	
	
	.arbeitgeber-blitz1 {
    	left: 70%;
    	top: -3%;
    	width: 20vw;
	}
	
	.arbeitgeber-blitz2 {
    	left: 74%;
    	top: -1%;
    	width: 18vw;
	}
	
	.fb-link {
    	text-align: left;
	}
	
	.projekt-img {
    	width: 100% !important;
    	float: left;
    	margin-right: 0px;
    	margin-top: 25px;
    	margin-bottom: 25px;
	}
	
	#slideshow .owl-carousel .owl-item img {
    	display: block;
    	width: auto !important;
    	height: 200px !important;
	}

	#slideshow .owl-carousel.owl-drag .owl-item {
    	height: 200px !important;
	}

	#slideshow .owl-carousel {
   		height: 200px !important;
	}
	
	.a-icons {
    	width: 60%;
    	margin-left: 20%;
    	margin-bottom: 50px;
	}
	
	.btn {
    	font-size: 15px;
	}
	
	footer svg {
    	margin-top: 50px !important;
	}
	
	.owl-next, .owl-prev {
    	width: 40px;
    	height: 60px;
    	background-size: contain !important;
	}
	
	.spacer {
    	margin: 100px -15px 0 -15px;
	}
	
	.modal-header {
    	padding: 15px 50px;
	}
	
	.dreieck1, .dreieck4 {
    	left: 44%;
    	border-left: 25px solid transparent;
    	border-right: 25px solid transparent;
    	border-top: 20px solid #ffffff;
	}
	
	.dreieck2 {
    	left: 44%;
    	border-left: 25px solid transparent;
    	border-right: 25px solid transparent;
    	border-top: 20px solid #ff6600;
	}
	
	.dreieck3 {
    	left: 44%;
    	border-left: 25px solid transparent;
    	border-right: 25px solid transparent;
    	border-top: 20px solid #666666;
	}
	
	.top-nav-collapse { 
		height: 70px;  
	}
	
	.rotate{
		transform: rotate(0deg);
	}

	.rotate-box{
		margin-top: 7%;
	}
	
	.berufsbild-spacer{
		height:0px;
	}
	
	footer {
		padding-bottom: 50px;
	}
	
}






/* ------------------------------ TABLET ------------------------------- */


@media (min-width: 768px) and (max-width: 991px) {
	
	#intro {
    	padding-bottom: 90px;
	}
	
	.nav li {
    	font-size: 14px;
    	padding: 5px 10px 5px 10px;
	}
	
	.intro-text {
    	padding: 50px;
    	margin-left: unset;
	}
	
	.intro-img {
    	margin-top: -30px;
    	margin-left: -50px;
    	margin-bottom: 0;
	}
	
	.img-elektriker {
    	position: absolute;
    	left: 15px;
		top:0;
    	z-index: 2;
    	margin-top: 20px;
    	width: 70%;
	}
	
	.img-bulb {
    	width: 40%;
    	margin-left: 56%;
    	position: relative;
    	z-index: 50;
    	margin-top: 0;
	}
	
	.a-icons {
    	width: 70%;
    	margin-left: 15%;
    	margin-top: 30%;
	}
	
	.logo {
    	width: 160px;
    	margin-top: 10px;
	}
	
	.rotate-box {
    	margin-top: 17%;
	}
	
	.berufsbild-spacer{
		height:0px;
	}

}







/* ------------------------------ Small Desktop ------------------------------- */


@media (min-width: 992px) and (max-width: 1199px) {


	.img-elektriker {
    	top: 40%;
    	width: 120%;
	}
	
	.rotate-box {
    	margin-top: 11%;
	}
	
	.berufsbild-spacer{
		height:0px;
	}


}





/* ---- DSGVO-Anpassungen ---- */

.impressum-style h2 {
	font-size: 18px !important;
	margin-top: 35px;
    margin-bottom: 5px;
}

.impressum-style h3 {
    font-size: 16px !important;
    line-height: 1.6 !important;
	font-weight: bold !important;
	margin-top: 30px;
    margin-bottom: 5px;
}

.impressum-style b, .impressum-style strong {
    margin-top: 30px;
    margin-bottom: 5px;
    display: block;
}

.impressum-style ul {
	margin: 25px 0;
	margin-left: -15px;
}

.impressum-style li {
	list-style: disc;
}

.impressum-style a{
	color: #ff6600;
}

body.modal-open {
    overflow: visible;
}

input[type="checkbox"] {
    display: inline-block;
    width: 25px !important;
    height: auto !important;
}

.dsgvo{
	line-height: 1.8em;
    font-size: 16px;
	color: white;
}

.dsgvo a{
	color: #666666;
}




/* -- COOKIE HINWEIS -- */
.cc_container {
    background: #666666 !important;
    color: white !important;
	-webkit-box-shadow: 0px -2px 3px rgba(50, 50, 50, 0.2);
  	-moz-box-shadow: 0px -2px 3px rgba(50, 50, 50, 0.2);
  	box-shadow: 0px -2px 3px rgba(50, 50, 50, 0.2);
}

.cc_container, .cc_message, .cc_btn {
    font-size: 16px !important;
	line-height: 1 !important;
	color: white;
}

.cc_container .cc_btn, .cc_container .cc_btn:visited {
    color: #fff !important;
    background-color: #ff6600 !important;
}

.cc_container a, .cc_container a:visited {
    color: #ff6600 !important;
}

.cc_btn{
    margin-bottom: 10px;
}