<style>
  @import url("https://use.typekit.net/fwt0gjz.css");
</style>


.navbar-static-top { background: rgb(200,60,60); }

body{
  letter-spacing: 0.1em;
  font-family: magistral, sans-serif !important;
  color: #000;
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar-container{
  position: absolute;
  width: 100%;
}
.navbar{
  z-index: 999;
}
.navbar-default .container{
  height: 100%;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
  color: #fff;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{
  /*background-color: #194282;*/
  background-color: transparent;
  color: #fff;
}

.dropdown-menu{
  padding-right: 20px;
  padding-left: 20px;
  background-color: #194282;

}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{
  color: #fff;
  /*background-color: #194282;*/
  background-color: transparent;
}

.dropdown-menu > li:hover .white-line, .dropdown-menu > li:focus .white-line{
  opacity:1;
}

.white-line{
  opacity: 0;
  border-bottom: 1px solid #fff;
}

/* ==========================================================================
   Index-Suche
   ========================================================================== */
.lang-nav{
  height: 36px;
  float: right;
}

.lang-nav form{
  float: right;
  background: #e1e7ef;
  border: 2px solid #ec6607;
  border-right: 1px solid #ec6607;
  transform: perspective(1px) skew(-31deg);
-ms-transform: skew(-31deg); /* IE 9 */
-moz-transform: skew(-31deg); /* Firefox */
-webkit-transform: perspective(1px) skew(-31deg); /* Safari and Chrome */
-o-transform: skew(-31deg); /* Opera */
}

.lang-nav form input{
  background: transparent !important;
  height: 31px;
  border: none;
}

.lang-nav form input.quicksearch-sword{
  padding-left: 10px;
  color: #194282;
}

.lang-nav form input.quicksearch-sword:focus{
  outline: none;
}

.lang-nav form input.quicksearch-sword::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #194282;
    opacity: 1; /* Firefox */
}

.lang-nav form input.quicksearch-sword:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #194282;
}

.lang-nav form input.quicksearch-sword::-ms-input-placeholder { /* Microsoft Edge */
    color: #194282;
}

.lang-nav form input.quicksearch-submit{
  color: #e1e7ef;
  width: 20px;
}

.lang-nav button.btn{
  font-size: 16px;
  height: 31px;
  background: #e1e7ef;
  border: none;
  color: #194282;
}

.lang-nav button.btn:hover, .lang-nav button.btn:focus, .lang-nav button.btn:active {
  outline: 0;
  background: #e1e7ef;
  border: none;
  color: #194282;
  box-shadow: none;
}

.navbar .navbar-nav.navbar-right{
  background: #e1e7ef;
}

.navbar .navbar-nav.navbar-right li a{
  color: #194282;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.section-breadcrumb{
  overflow: hidden;
}
ul#breadcrumb{
  overflow: hidden;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

ul#breadcrumb li{
  float: left;
  font-size: 14px;
}

ul#breadcrumb li.current{
  float: left;
  font-size: 14px;
  color: #ec6607;
}

ul#breadcrumb li a{
  color: #000;
}

ul#breadcrumb li a:hover, ul#breadcrumb li a:focus{
  text-decoration: none;
}

.fixed-breadcrumb{
  z-index: 999;
  position: fixed;
  width: 100%;
  height: 35px;
  top: 106px;
  background: #fff;
}

/* ==========================================================================
   Allgemein
   ========================================================================== */
.sebro-logo{
  width: 276px;
  height: 70px;
}

.row-equal{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.blue-line{
  border-bottom: 1px solid #194282;
}

.line .container{
  padding-left: 0;
  padding-right: 0;
}

.border-line{
  margin-bottom: 60px;
  border-bottom: 2px solid #194282;
}

#c220, #page-68 .wrapper.container, #c243, #c244, #c245, #c246, #c247, #c249, #c250, #c251, #c252, #c253, #c254, #c255, #c256, #c461, #c465, #c466, #c467, #c468, #c469, #c470, #c472, #c473, #c462{
  margin-top: 106px;
  min-height: calc(100vH - 55px - 106px);
}

#c247, #c464{
  margin-top: 130px;
  min-height: calc(100vH - 55px - 130px);
}

a[name]{
  position: absolute;
  margin-top: -100px;
}

#c163 img, #c429 img{
    width: auto;
    max-height:500px;
}

#c66 img{
  width: auto;
}


/* ==========================================================================
   Headline
   ========================================================================== */
h1{
  font-style: italic;
  font-weight: 700;
  font-size: 50px;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
}

h1, h2, h3, h4, h5, h6{
  font-style: italic;
  transform: skew(-21deg);
  -ms-transform: skew(-21deg); /* IE 9 */
  -moz-transform: skew(-21deg); /* Firefox */
  -webkit-transform: skew(-21deg); /* Safari and Chrome */
  -o-transform: skew(-21deg); /* Opera */
}

.title h2{
  font-style: italic;
  /*font-size: 35px;*/
  color: #194282;
}

/* ==========================================================================
   p
   ========================================================================== */
p{
  /*font-family: "Open Sans";*/
  line-height: 1.5;
  font-size: 16px;
}

/* ==========================================================================
   Button
   ========================================================================== */
.btn-holder{
  width: 100%;
  max-width: 300px;
  text-align: center;
  background-color: rgb(236,102,7);
  border: 2px solid rgb(236,102,7);
}

.btn-holder a{
  font-style: italic;
}

html[lang="en"] .btn-holder a{
  white-space: normal;
}

.btn-holder:hover{
  background-color: #fff;
  color: #194282;
}

.btn-holder:hover a{
  color: #194282;
}

a.btn{
  width: 100%;
}

.btn-holder-trans{
  background-color: transparent;
  border: 2px solid #fff;
  width: 100%;
  max-width: 300px;
}

.btn-holder-trans .btn{
  color: #fff;
}

.btn-holder-trans:hover{
  background-color: #fff;
}

.btn-holder-trans:hover a{
  color: #194282;
}

.btn-holder p{
  margin-bottom: 0;
}

.btn-holder-trans p{
  margin-bottom: 0;
}


/* ==========================================================================
   Background
   ========================================================================== */
.background-dark {
    background-color: rgb(200,200,200);
    color: #000;
}
.background-light {
    background-color: rgb(255,255,255);
    color: #000;
}

.bg-overlay{
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(25,66,130,0.7);
}

/* ==========================================================================
   Border
   ========================================================================== */

.border-orange{
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 25px;
  width: 100%;
  max-width: 300px;
  border-bottom: 3px solid #ec6607;
  -webkit-transform: skew(-31deg);
  -moz-transform: skew(-31deg);
  -o-transform: skew(-31deg);
}

/* ==========================================================================
   Sticky-Menue
   ========================================================================== */
.sticky-menue{
  z-index: 999;
}

.sticky-menue div{
  background: rgba(236,102,7,0.7);
  border: 2px solid #fff;
  height: 50px;
  width: 85px;
  border-right: 0;
}

.sticky-menue svg{
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: #fff;
  margin-left: 20px;
}

.sticky-menue-phone{
  margin-top: 20px;
}

/* ==========================================================================
   Suche Werkstatt
   ========================================================================== */
#c225 .adr-checkbox{
display: none;
}

.hidevcard{
  display: none !important;
}

.long-lat{
  display: none;
}

.standort-none{
  display: none;
}

.address-webseite a{
  color: #000;
}

.address-webseite a:hover, .address-webseite a:focus, .address-webseite a:active{
  text-decoration: none;
}

.suche-werkstatt .border-orange{
  margin-left: 0;
}

.suche-werkstatt header h2{
  color: #194282;
}

.suche-werkstatt header h2, .suche-werkstatt header h3{
  transform: skew(0deg);
  -ms-transform: skew(0deg);
  -moz-transform: skew(0deg);
  -webkit-transform: skew(0deg);
  -o-transform: skew(0deg);
  line-height: 1.5;
}

.suche-werkstatt .btn-search{
  margin-bottom: 20px;
  width: 100%;
  max-width: 300px;
  padding: 6px 12px;
  font-size: 24px;
  color: #fff;
  background-color: #ec6607;
  border: 0;
}

.suche-werkstatt .btn-search button#btn{
  width: 100%;
  background: transparent;
  border: 0;
  display: block;
  margin-right: auto;
  margin-left: auto;
  transform: skew(-21deg);
  -ms-transform: skew(-21deg);
  -moz-transform: skew(-21deg);
  -webkit-transform: skew(-21deg);
  -o-transform: skew(-21deg);
}

.suche-werkstatt .btn-search button#btn:focus{
  outline: 0;
}

.vcard{
  display: flex;
  padding: 15px;
  border-top: 3px solid #000;
  overflow: hidden;
}

.tx-ttaddress-pi1{
  border-bottom: 3px solid #000;
}

.standort{
  margin-bottom: 20px;
  color: #ec6607;
}

.noStandort{
  font-size: 18px;
  color: #ec6607;
  text-align: center;
  margin-bottom: 30px;
}

.adr-name{
  color: #ec6607;
}

.address-webseite{
  align-self: center;
  text-align: right;
}

.address-webseite a:before{
  content: "\203A ";
}

.adr .adr-description, .adr .street-address, .adr .locality, .adr .postal-code, .adr .tel.phone{
    display: inline-block;
    margin-right: 5px;
}

.suche-form select{
  display: block;
}

.adr-checkbox{
  margin-bottom: 20px;
}

.adr-checkbox input{
  margin-right: 8px;
}

/*Ausblenden Suchfunktion*/
.suche-werkstatt h3{
  display: none;
}

.suche-werkstatt .suche-form{
  display: none;
}

/* ==========================================================================
   Text2cols
   ========================================================================== */
.twocols {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

/* ==========================================================================
   Copytext
   ========================================================================== */
.copytext p {
    margin-bottom: 0px;
}

.tabs p {
    margin-bottom: 0px;
}

/* ==========================================================================
   Bild mit Text
   ========================================================================== */
.imagewithtext h2{
  text-align: center;
  margin-bottom: 20px;
  margin-top: 20px;
  color: rgb(236,102,7);
}

.imagewithtext h3{
  font-size: 27px;
  color: #194282;
  font-style: normal;
  transform: skew(0deg);
  -ms-transform: skew(0deg); /* IE 9 */
  -moz-transform: skew(0deg); /* Firefox */
  -webkit-transform: skew(0deg); /* Safari and Chrome */
  -o-transform: skew(0deg); /* Opera */
}

.imagewithtext-header{
  margin-bottom: 40px;
}

.imagewithtext img{
  margin-bottom: 42px;
}


/* ==========================================================================
   Bilder mit Text bei Mouseover
   ========================================================================== */
.imagewithtextmouseover{
  color: #fff;
}

.imagewithtextmouseover-box{
  padding: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.imagewithtextmouseover h3{
  box-shadow: 0 6px 3px -6px #777, 0 -6px 3px -6px #777;
  text-shadow: 3px 3px 4px #777;
     font-size: 40px;
     font-weight: 700;
     text-align: center;
     margin-right: auto;
     margin-left: auto;
     border-top: 3px solid #fff;
     border-bottom: 3px solid #fff;
}

.imagewithtextmouseover h4{
  font-size: 30px;
  transform: skew(0deg);
  -ms-transform: skew(0deg);
  -moz-transform: skew(0deg);
  -webkit-transform: skew(0deg);
  -o-transform: skew(0deg);
}

.imagewithtextmouseover-header{
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.imagewithtextmouseover-content{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  padding: 40px 80px;
}

.imagewithtextmouseover-content h4{
  margin-top: 0px;
  font-style: normal;
}

.imagewithtextmouseover-box .bg-overlay{
  /*opacity: 0;*/
  display: none;
}

.imagewithtextmouseover-box:hover .imagewithtextmouseover-header{
  opacity: 0;
  transition: a
}

.imagewithtextmouseover-box:hover .imagewithtextmouseover-content, .imagewithtextmouseover-box:active .imagewithtextmouseover-content, .imagewithtextmouseover-box.focus .imagewithtextmouseover-content, .imagewithtextmouseover-box:hover .bg-overlay, .imagewithtextmouseover-box:active .bg-overlay, .imagewithtextmouseover-box.focus .bg-overlay{
  display: block;
  opacity: 1;
}

/* ==========================================================================
   Pointer Filter
   ========================================================================== */
.filter {
    cursor: pointer;
}

/* ==========================================================================
   Calltoaction
   ========================================================================== */
.calltoaction p{
  margin-right: auto;
  margin-left: auto;
}

.calltoaction .btn-holder{
  background-color: transparent;
  border: 2px solid #194282;
  float: none;
  margin-right: auto;
  margin-left: auto;
}

.calltoaction .btn-holder a{
  color: #194282;
}

.calltoaction .btn-holder:hover{
  background-color: #194282;
}

.calltoaction .btn-holder:hover a{
  color: #fff;
}

/* ==========================================================================
   Headerslider
   ========================================================================== */
h2.slider-title{
  font-style: italic;
  font-weight: 700;
  font-size: 50px;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
}
.headerslider-padding{
  padding-bottom: 66px;
}

.triangle-left{
  z-index: 2;
  position: absolute;
  width: 0;
  height: 100%;
  border-top: 1620px solid rgba(25,66,130,0.7);
  border-right: 950px solid transparent;
  float: left;
  left: 0;
  padding-left: 15px;
}

.triangle-right{
  z-index: 2;
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 390px solid rgba(236,102,7,0.7);
  border-left: 240px solid transparent;
  float: left;
  right: 0;
  bottom: 0;
}

.swiper-slide{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.swiper-container .has-bg{
  background: transparent;
  text-align: center;
}

.swiper-container .slider-content p{
  line-height: 1.2;
  transform:  skew(-21deg);
  -ms-transform: skew(-21deg);
  -moz-transform: skew(-21deg);
  -webkit-transform: skew(-21deg);
  -o-transform: skew(-21deg);
  font-size: 20px;
}

.swiper-container .slider-text{
  z-index: 4;
}

.swiper-container .slider-buttons .btn-holder{
  border: 2px solid #ec6607;
  padding-right: 0;
  padding-left: 0;
  background-color: transparent;
}

.swiper-container .slider-buttons .btn-holder:hover{
  background-color: #194282;
  border: 2px solid #fff;
}

.swiper-container .slider-buttons .btn-holder:hover a{
  color: #fff;
}

.slider-buttons .btn-cta{
  color: #fff;
}

.slider-buttons .btn-holder{
  left: 50%;
  transform: translateX(-50%);
}

/*.pagination-numb{
  display: inline-block;
  float: left;
}*/

.swiper-pag{
  position: absolute;
  height: 50px;
  width: 100%;
  bottom: 20px;
  transform: skew(-21deg);
  -ms-transform: skew(-21deg);
  -moz-transform: skew(-21deg);
  -webkit-transform: skew(-21deg);
  -o-transform: skew(-21deg);
z-index: 2;
left: 5vw;
font-style: italic;
}

.swiper-pagination{
  position: relative;
  float: left;
  width: auto;
  top: 50%;
  transform: translateY(-50%);
}

/*.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
  width: auto;
  bottom: 50px;
  left: 10vw;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
  margin: 0 25px;
}*/

.swiper-pagination-bullet{
  opacity: 1;
  color: #fff;
  width: 0;
  height: 0;
  border-radius: 0;
  font-size: 16px;
  padding-left: 30px;
  padding-right: 30px;
  /*-webkit-transform: skew(-21deg);
-moz-transform: skew(-21deg);
-o-transform: skew(-21deg);*/
}


.swiper-pagination-bullet:before{
  content:'';
  position:absolute;
  width:2px;
  height:40px;
  margin-top: -10px;
  margin-left:-25px;
  background:#fff;
}

.swiper-pagination-bullet:last-child:after{
  content:'';
  position:absolute;
  width:2px;
  height:40px;
  right:-8px;
  top: -10px;
  margin-right:0px;
  background:#fff;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active{
  color: #ec6607;
}

/*.swiper-button-prev, .swiper-button-next{
  top: 0;
  background-size: 12px 16px;
  -webkit-transform: skew(-21deg);
-moz-transform: skew(-21deg);
-o-transform: skew(-21deg);
}*/

.swiper-button-prev, .swiper-button-next{
  top: 50%;
  background-size: 12px 16px;
  margin-top: 0;
  transform: translateY(-50%);
}


.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
  position: relative;
  float: left;
  width: 10%;
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
  position: relative;
  display: block;
  float: left;
  width: 10%;
}

.swiper-button-next{
  margin-left: 10px;
}


.slider-slide-down{
  height: 60px;
  text-align: center;
  width: 90px;
  font-size: 30px;
  bottom: 0;
  position: absolute;
  left: 50%;
  z-index: 3;
  background: rgba(25,66,130, .7);
  transform: skew(-31deg) translateX(-50%);
  -webkit-transform: skew(-31deg) translateX(-50%);
  -ms-transform: skew(-31deg) translateX(-50%);
  -moz-transform: skew(-31deg) translateX(-50%);
  -o-transform: skew(-31deg) translateX(-50%);
}

.slider-slide-down a{
  color: #fff;
}

.slider-slide-down a svg{
  top: 40%;
  position: relative;
  transform: translateY(-50%);
}

.no-Slider .triangle-right, .no-Slider .slider-slide-down{
  display: none;
}

/*
.swiper-pagination:before{
  font-size: 30px;
  content: '\2039';
}

.swiper-pagination:after{
  font-size: 30px;
  content: '\203A';
}*/

.swiper-container .slider-buttons a.btn{
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Graphictext
   ========================================================================== */
.graphictext a:link, .graphictext a:hover {
    color: #fff;
    text-decoration: none;
}

.graphictext .graphictext-element .bg-overlay{
  display: none;
}

.graphictext .graphictext-element:hover .bg-overlay{
  display: block;
}

/* ==========================================================================
   4 Bilder mit Text
   ========================================================================== */
/*.four-images .four-image-single{
    height: 200px;
    overflow: hidden;
}
.four-image-single img{
  position: relative;
}*/

.four-images .four-image-single{
  height: auto;
}

.four-image-single a{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.four-image-single .image-text{
  display: flex;
  width: 100%;
  height: 100%;
}

.four-image-single .image-text .image-title{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.four-image-single a:hover .image-title{
  background-color: #fff;
  border:2px solid #ec6607;
}

.four-image-single a:hover .image-title h3{
    color: #194282;
}

.four-image-single a:hover, .four-image-single a:focus{
  text-decoration: none;
}

.four-images .image-title{
  padding: 6px 12px;
  background: #ec6607;
  border: 2px solid #ec6607;
}

.four-images .image-title h3{
  line-height: 1.42857143;
  color: #fff;
}

/* ==========================================================================
   Grafik volle breite mit Texten - rechts
   ========================================================================== */
.bigimagewithtextright{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: auto;
  position: relative;
  overflow: hidden;
}

.bigimagewithtextright h2{
  font-size: 84px;
  font-weight: 700;
  font-style: italic;
  display: inline-block;
  color: #fff;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  -webkit-transform: skew(-21deg);
  -moz-transform: skew(-21deg);
  -o-transform: skew(-21deg);
}

.text-container{
  padding-top: 50px;
  padding-bottom: 50px;
  z-index: 2
}

.text-container p{
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  color: #fff;
}

.text-container .header{
  text-align: center;
}

.text-container .btn-holder{
  border: 2px solid #fff;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(236,102,7,0.6);
}

.text-container .btn-holder:hover{
  background-color: #fff;
}

.text-container .btn-holder a:hover, .text-container .btn-holder:hover a{
  color: #194282;
}

/* ==========================================================================
   Icons links und rechts
   ========================================================================== */
.iconsleft header{
  text-align: center;
}

h3.small-strong{
  font-style: normal;
  transform: skew(0deg);
  -ms-transform: skew(0deg);
  -moz-transform: skew(0deg);
  -webkit-transform: skew(0deg);
  -o-transform: skew(0deg);
  margin-bottom: 0;
  line-height: 1.5;
  color: #ec6607;
}

.iconsleft p.text-center{
  margin-bottom: 60px;
}

/* ==========================================================================
   Breites Bild mit Text
   ========================================================================== */
.half-image-with-texts{
  border-top: 2px solid #194282;
}

.half-image-with-texts .btn-holder-trans{
  border: 2px solid #194282;
}

.half-image-with-texts .btn-holder-trans a{
  color: #194282;
  -webkit-transform: skew(-21deg);
  -moz-transform: skew(-21deg);
  -o-transform: skew(-21deg);
}

html[lang="en"] .half-image-with-texts .btn-holder-trans a{
  white-space: normal;
}

.half-image-with-texts .container-fluid{
  overflow: hidden;
}

.text-with-image h2, .text-with-image h3{
   color: #194282;
   font-style: normal;
   transform: skew(0deg);
   -ms-transform: skew(0deg);
   -moz-transform: skew(0deg);
   -webkit-transform: skew(0deg);
   -o-transform: skew(0deg);
}

.tex-with-image-box{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* ==========================================================================
   4 Grafiken mit Text
   ========================================================================== */
.graphictext .image-box{
  min-height: 320px;
  text-align: center;
}

.graphictext .image-box h3{
  font-weight: 700;
  font-size: 40px;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  display: inline-block;
  white-space: inherit;
  box-shadow: 0 6px 3px -6px #777, 0 -6px 3px -6px #777;
  text-shadow: 3px 3px 4px #777;
}

.image-box-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.graphictext .container-fluid{
  padding-right: 0;
  padding-left: 0;
}

/* ==========================================================================
   Slider
   ========================================================================== */
.slick-slide{
  text-align: center;
}

.slider-on-page-nav {
  margin-top: 60px;
  margin-bottom: 30px;
}

.slider-on-page-nav h3{
  font-size: 18px;
  color: #194282;
  cursor: pointer;
}

.slider-on-page-nav .slick-current h3{
  color: #ec6607;
}

.slider-on-page{
  background: #e8ecf2;
}

.slider-single-element h3{
  color: #194282;
  margin-bottom: 35px;
}

.slider-single-element{
  text-align: center;
}

.slide-container .slick-slide{
  padding: 0px 50px;
}
.slick-slide img{
  margin-bottom: 30px;
  margin-right: auto;
  margin-left: auto;
}

.slide-container button{
  z-index: 10;
  background: none;
  border: none;
  color: transparent;
}

.slick-slide:focus{
  outline: none;
}

.slide-container button:focus{
  outline: none;
}

.slide-container button.slick-prev{
  position: absolute;
  width: 42px;
  left: 50%;
}

.slide-container button.slick-next{
  position: absolute;
  width: 42px;
  right: 50%;
}

.slide-container button.slick-prev:before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f053";
  font-style: normal;
  text-decoration: inherit;
  color: #194282;
  font-size: 40px;
  padding-right: 0.5em;
  /*position: absolute;*/
  top: 10px;
  left: 0;
}

.slide-container button.slick-next:before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f054';
  font-style: normal;
  text-decoration: inherit;
  color: #194282;
  font-size: 40px;
  padding-right: 0.5em;
  /*position: absolute;*/
  top: 10px;
  left: 0;
}

.slide-container .slick-slide{
  opacity: 0.3;
}

.slide-container .slick-slide .slider-on-page-content{
  opacity: 0;
}

/*.slide-container .slick-slide.slick-center{
  opacity: 1;
}*/

/*.slide-container .slick-slide.slick-center .slider-on-page-content{
  opacity: 1;
}*/

.slide-container .slick-slide.slick-current{
  opacity: 1;
}

.slide-container .slick-slide.slick-current .slider-on-page-content{
  opacity: 1;
}

/* ==========================================================================
   Scrolling Div-Slider
   ========================================================================== */
   #left {
    overflow: hidden;
    border: 0px;
    padding: 0px;
    clear:both;
  }
  #left img {
    margin: 0px;
    border: 0px;
    clear:both;
  }
#left,#left img {
    height: 25vW;
    min-height: 250px;
}

html.no-touch #mixedContent-mobile-touch{
  display: none;
}

html.touch #mixedContent{
  display: none;
}

#mixedContent {
  margin-bottom: 60px;
  width:100%;
  height: auto;
  position: relative;
}

#mixedContent .contentBox {
  position: relative;
  float: left;
  display: block;
  height: auto;
  width: 500px;
  padding: 10px;
  margin: 0px 5px;
  /* If you don't want the images in the scroller to be selectable, try the following
     block of code. It's just a nice feature that prevent the images from
     accidentally becoming selected/inverted when the user interacts with the scroller. */
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  text-align:center;
}

#mixedContent .contentBox img{
  width:390px;
  height: auto;
}

#mixedContent .contentBox .imageBox{
  height: 324px;
  overflow:hidden;
}

#mixedContent .contentBox .btn-holder{
  font-size:20px;
  padding: 6px 12px;
  color: #fff;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#mixedContent .contentBox .btn-holder:hover{
  background-color: #fff;
  color: #194282 !important;
}

#mixedContent-mobile-touch .contentBox .btn-holder{
  font-size:20px;
  padding: 6px 12px;
  color: #fff;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#mixedContent-mobile-touch .contentBox .btn-holder:hover{
  background-color: #fff;
  color: #194282 !important;
}

#mixedContent .contentBox .btn-holder div{
  transform: skew(-21deg);
  -ms-transform: skew(-21deg);
  -moz-transform: skew(-21deg);
  -webkit-transform: skew(-21deg);
  -o-transform: skew(-21deg);
}

#mixedContent .contentBox a:hover, #mixedContent .contentBox a:focus{
  color: #194282;
  text-decoration: none;
}

#mixedContent .contentBox a .btn-holder div:hover, #mixedContent .contentBox a .btn-holder div:focus{
  color: #194282;
  text-decoration: none;
}

html.touch #mixedContent-mobile-touch .slick-slide img{
  max-width: 100%;
  height: auto;
}

#mixedContent-mobile-touch button.slick-prev, #mixedContent-mobile-touch button.slick-next{
  border:none;
  background-color: unset;
  color: transparent;
}

#mixedContent-mobile-touch button.slick-prev:focus, #mixedContent-mobile-touch button.slick-next:focus{
  outline: 0;
}

#mixedContent-mobile-touch button.slick-prev:before{
  content: '‹';
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 50px;
  z-index: 1;
  width: 50px;
  transform: translateY(-50%);
  color: #194282;
}

#mixedContent-mobile-touch button.slick-next:before{
  content: '›';
  position: absolute;
  top: 50%;
  right: 0;
  font-size: 50px;
  z-index: 1;
  width: 50px;
  transform: translateY(-50%);
  color: #194282;
}


/* ==========================================================================
   Kontakt
   ========================================================================== */
.contact-bar .container-fluid{
  padding: 0
}

.contact-bar p{
  color: #fff;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 20px;
  margin-bottom: 0;
}

.contact-bar a{
  color: #fff;
}

.contact-bar a:hover, .contact-bar a:focus{
  text-decoration: none;
}

.contact-bar svg{
  bottom: 15px;
  right: 15px;
  position: absolute;
  font-size: 40px;
  color: #fff;
}

/* ==========================================================================
   Kontaktformular
   ========================================================================== */
#contact .powermail_fieldwrap_upload .powermail_file {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

#contact .powermail_fieldwrap_upload .powermail_file + label {
  font-size: 24px;
  font-weight: normal;
  color: white;
  display: inline-block;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.inputfile:focus + label,
.inputfile + label:hover {
  background-color: red;
}

#contact .powermail_fieldwrap_upload .powermail_file:focus + label,
#contact .powermail_fieldwrap_upload + label:hover {
  background-color: #269abc;
}

#contact .powermail_fieldwrap_upload + label { cursor: pointer; }
#contact .powermail_fieldwrap_upload + label * {
  pointer-events: none;
}

#contact .powermail_fieldwrap_upload .powermail_file + label {
  white-space: nowrap;
  overflow: hidden;
  width: calc(100% - 55px);
  max-width: 455px;
  height: 40px;
  text-overflow: ellipsis;
  margin-right: 1px;
  float: left;
  padding: 5px 10px;
  font-size: 1.2em;
}

#contact .powermail_fieldwrap_upload .powermail_file + label > span:before {
  display: inline-block;
  font-family:'Font Awesome 5 Free';
  content: "\f093";
  margin-right: 10px;
  font-weight: 900;
  transform: skew(21deg) !important;
  -ms-transform: skew(21deg) !important;
  -moz-transform: skew(21deg) !important;
  -webkit-transform: skew(21deg) !important;
  -o-transform: skew(21deg) !important;
}

#contact .powermail_fieldwrap_upload .clear-upload {
  cursor: pointer;
  float: left;
  width: 40px;
  height: 40px;
  color: #FFF;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  text-align: center;
  line-height: 40px;
  font-size: 1.4em;
  transform: skew(0deg);
  -ms-transform: skew(0deg);
  -moz-transform: skew(deg);
  -webkit-transform: skew(0deg);
  -o-transform: skew(0deg);
  /*padding: 0;*/
}

#contact .powermail_fieldwrap_upload .powermail_field {
  overflow: hidden;
  clear: both;
  /*padding-bottom: 14px;*/
}

#c256 .powermail_fieldwrap_type_submit{
  margin-top: 0;
}

#c256 .powermail_fieldwrap_type_submit .submit-btn{
  max-width: 455px;
}

#c256 .powermail_fieldwrap_type_submit .submit-btn .btn{
  max-width: 455px;
}
.powermail_fieldwrap_upload .powermail_field { background-color: #194282 !important; }
.powermail_fieldwrap_upload .powermail_field .btn{	background-color: #194282 !important;	border: none !important;}.powermail_fieldwrap_type_captcha > .powermail_field {	display: grid;	grid-template-columns: 1fr 1fr;	align-items: center;	column-gap: 20px;	row-gap: 10px;}
/* ==========================================================================
   Bilder mit Text darunter
   ========================================================================== */
.imagewithtext-single{
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
}

.imagewithtext-single img{
  width: 100%;
}

.imagewithtext-single .image-title{
  text-align: center;
}

.imagewithtext-single .image-text{
  padding: 25px 10% 6%;
}

.imagewithtext-single .image-text h3{
  font-size: 27px;
  padding-bottom: 30px;
  color: rgb(25, 66,130);
}

.imagewithtext-single .image-text .btn-holder{
  margin-right: auto;
  margin-left: auto;
}

/* ==========================================================================
   Galerie
   ========================================================================== */
.gallery header.title{
  text-align: center;
}

.gallery .container-fluid{
  padding: 0;
}

.gallery img{
  width: 100%;
  height: auto;
}

.gallery-element{
  padding: 0;
}

/* ==========================================================================
   Akkordeon
   ========================================================================== */
.accordion-container .panel-collapse .content{
  padding-top: 35px;
}

.accordion .title h2{
  text-align: center;
}

.accordion-container{
  border-top: 1px solid #194282;
}

.btn-holder-akkordeon{
  display: inline-block;
  background-color: #ec6607;
  margin-top: 25px;
  margin-right: 25px;
}

.accordion-container a.btn{
  padding-right: 25px;
  padding-left: 25px;
  color: #fff;
  width: auto;
  -webkit-transform: skew(-21deg);
  -moz-transform: skew(-21deg);
  -o-transform: skew(-21deg);
}

.accordion .set.panel .akk-icon-plus{
  background: url("/fileadmin/user_upload/icons/plus.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  float: right;
  width: 20px;
  height: 20px;
  position: relative;
  top: -50%;
  -ms-transform: translateY(50%) skew(10deg);
  -moz-transform: translateY(50%) skew(10deg);
  -webkit-transform: translateY(50%) skew(10deg);
  -o-transform: translateY(50%) skew(10deg);
  transform: translateY(50%) skew(10deg);
}

.accordion .set.panel .akk-icon-minus{
  background: url("/fileadmin/user_upload/icons/minus.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  float: right;
  width: 20px;
  height: 20px;
  position: relative;
  top: -50%;
  -ms-transform: translateY(50%) skew(10deg);
  -moz-transform: translateY(50%) skew(10deg);
  -webkit-transform: translateY(50%) skew(10deg);
  -o-transform: translateY(50%) skew(10deg);
  transform: translateY(50%) skew(10deg);
}

/* ==========================================================================
   Grafik volle Breite mit Textkasten
   ========================================================================== */
.bigimagewithtext{
  margin-bottom: 30px;
}

.bigimagewithtext h2{
  font-size: 50px;
  font-weight: bold;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
  display: inline-block;
}

.bigimagewithtext .style-1{
  text-align: center;
}

.bigimagewithtext .btn-holder{
  margin-right: auto;
  margin-left: auto;
  border: 2px solid #fff;
}

/* ==========================================================================
   Search-Page
   ========================================================================== */
#c218 legend{
  display: none;
}

#c218 form .tx-indexedsearch-search-submit{
  background: rgb(236,102,7);
  border: 2px solid rgb(236,102,7);
  width: 100%;
  max-width: 300px;
  margin-top: 20px;
  margin-bottom: 20px;
}

#c218 form p a, #c218 form p a:hover, #c218 form p a:focus{
  color: #194282;
  text-decoration: none;
}

#c218 form .tx-indexedsearch-search-submit input{
  padding: 6px 12px;
  width: 100%;
  max-width: 300px;
  color: #fff;
  font-size: 24px;
  background: transparent;
  border: 0;
  transform: perspective(1px) skew(-31deg);
  -ms-transform: skew(-31deg); /* IE 9 */
  -moz-transform: skew(-31deg); /* Firefox */
  -webkit-transform: perspective(1px) skew(-31deg); /* Safari and Chrome */
  -o-transform: skew(-31deg); /* Opera */
}

#c218 form .tx-indexedsearch-search-submit input:focus{
  outline: 0;
}.tx-indexedsearch-browsebox {	padding: 0;	margin: 0 0 30px 0;	list-style-type: none;}.tx-indexedsearch-browsebox li {	display: inline-block;}.tx-indexedsearch-browsebox li:not(:first-child) {	margin-left: 15px;}dl.tx-indexedsearch-info {	display: none;}
/* ==========================================================================
  Datenschutz
  =========================================================================== */
#page-34 .copytext h3{
  margin-top: 40px;
}

#page-34 .copytext h4{
  margin-top: 25px;
  margin-bottom: 20px;
  color: #194282;
}

#page-34 .copytext p{
  margin-bottom: 15px;
}

#page-34 .copytext ul{
  display: inline-block;
  text-align: left;
}

/* ==========================================================================
  Impressum
  =========================================================================== */
#page-31 .copytext h3{
  color: #194282;
}

/* ==========================================================================
   News
   ========================================================================== */
.container-mix{
  margin-right: -15px;
  margin-left: -15px;
}

#news form{
  display: inline-block;
}

#news .filter li{
  overflow: hidden;
  border: 2px solid #194282;
}

#news .filter li:hover{
  background: #194282;
}

#news .filter li:hover a{
  text-decoration: none;
    color: #fff;
}

#news .filter li a{
  font-size: 20px;
  padding: 6px 12px;
  color: #194282;
}

#news form select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 20px;
  padding: 6px 12px;
  color: #194282;
  border: 2px solid #194282;
  width: 300px;
  text-align-last:center;
  background-image:url(/fileadmin/user_upload/icons/select-arrow.png);
  background-position: right;
  background-repeat: no-repeat;
  background-size: 20px;
  background-origin: content-box;
  margin-right: 20px;
}

/* hide browser-styling (arrow) in IE10 */
select::-ms-expand {
  display:none;
}

#news .has-filter{
  text-align: center;
}

#news .filter form, #news .filter li{
  float: left;
}

#news .image-content{
  color: #000;
}

#news .news-image img{
  margin-right: auto;
  margin-left: auto;
}

.news-element{
  border-top: 2px solid #194282;
}

.news-element h3{
  color: #194282;
  transform: skew(0); */
  -ms-transform: skew(0);
  -moz-transform: skew(0);
  /* -webkit-transform: skew(-21deg); */
  -o-transform: skew(0);
  font-style: normal;
}

#news .image-box{
  padding-right: 15px;
  padding-left: 15px;
}

#news .image-box .image-content{
  padding-left: 40px;
}
.image-box.news{
  overflow: hidden;
}

#news #container-mix a:last-child .news-element{
  border-bottom: 2px solid #194282;
}

.news-date{
  text-align: left;
  margin-bottom: 20px;
}

/* ==========================================================================
   Powermail
   ========================================================================== */
#contact .border-orange{
  margin-left: 0;
  margin-right: 0;
}

#contact h3{
  color: #194282;
  margin-bottom: 30px;
  transform: skew(0);
  -ms-transform: skew(0);
  -moz-transform: skew(0);
  -webkit-transform: skew(0);
  -o-transform: skew(0);
  font-style: normal;
}

.form-control{
  border: 1px solid #000;
}

.powermail_fieldwrap_nachricht textarea{
  min-height: 230px;
}

.submit-btn{
  width: 100%;
  max-width: 300px;
  overflow: hidden;
  background-color: #ec6607;
  border: 2px solid #ec6607;
}

.submit-btn:hover{
  background-color: #fff;
}

.submit-btn:hover .btn{
  background-color: #fff !important;
  border-color: transparent !important;
  color: #194282 !important;
}

#contact .btn{
  background-color: #ec6607;
  width: 100%;
  max-width: 300px;
  border: 2px solid #ec6607;
  color: #fff;
  -webkit-transform: skew(-21deg);
  -moz-transform: skew(-21deg);
  -o-transform: skew(-21deg);
}

#contact .btn:hover{
  background-color: #fff;
  color: #194282;
  border-color: transparent;
}

#contact .btn:focus, #contact .btn:active:focus, #contact .btn:active{
  outline: 0;
  outline-offset: 0;
  box-shadow: none;
}

.powermail_fieldwrap_type_submit{
  margin-top: 20px;
}

#contact .form-group ul{
  -webkit-padding-start: 0;
}

#contact .form-group li{
  list-style: none;
  color: #ec6607;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer{
  background-color: #194282;
  font-size: 16px;
}

html[lang="en"] footer{
  font-size: 14px;
}

footer li{
  color: white;
}

footer li a{
  color: white;
}

footer li a:focus, footer li a:hover{
  color: white;
  outline: 0;
  outline-offset: 0;
  text-decoration: none;
}

.footernavbar{
  position: relative;
  min-height: 50px;
}

.footernav{
  padding-left: 0;
  list-style: none;
}

.footernav li{
  position: relative;
  display: inline-block;
}

.footer-icons{
  color: white;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 32px;
}

/*footer li:nth-child(2) span{
  padding-right: 10px;
}

footer li:nth-child(3) span{
  padding-right: 10px;
}*/

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media (min-width: 768px){
    /*navbar*/

    .nav-fixed{
      position: fixed !important;
      width: 100%;
      top: 0;
      z-index: 1000;
    }
    .navbar{
      /*position: fixed !important;*/
      width: 100%;
      top: 0;
      left: 0;
    }
    .navbar-static-top{
      display: none;
    }

    .navbar-default{
      min-height: 106px;
      position: relative;
    }

    .navbar .navbar-nav{
      background-color: #194282;
      transform: perspective(1px) skew(-31deg);
   -ms-transform: skew(-31deg); /* IE 9 */
   -moz-transform: skew(-31deg); /* Firefox */
   -webkit-transform: perspective(1px) skew(-31deg); /* Safari and Chrome */
   -o-transform: skew(-31deg); /* Opera */
      float: right;
      top: calc(100% - 32px - 36px);
      position: relative;
    }

    .navbar .navbar-nav > li{
      border-right: 2px solid #fff;
    }

    .navbar .navbar-nav > li:last-child{
      border-right: 0;
    }

    .navbar-default .navbar-nav > li > a{
      color: #fff;
      transform: perspective(1px) skew(10deg);
      -ms-transform: perspective(1px) skew(10deg);
      -moz-transform: perspective(1px) skew(10deg);
      -webkit-transform: perspective(1px) skew(10deg);
    }

    .navbar-default .navbar-nav > li > a:hover{
      color: #fff;
    }

    .navbar-header{
      padding-top: 32px;
    }

    .navbar-header .navbar-brand{
      padding: 0;
    }

    .navbar-collapse.collapse{
      height: 100% !important;
    }

    .nav-background{
      width: 118px;
      height: 34px;
      -webkit-transform: skew(-31deg);
      -moz-transform: skew(-31deg);
      -o-transform: skew(-31deg);
      background: #194282;
      margin-right: 2px;
    }

    .navbar .navbar-collapse a{
      font-family: magistral, sans-serif !important;
      font-style: italic;
      font-size: 16px;
      display: block;
      position: relative;
      color: white;
      text-decoration: none;
      z-index: 1;
      padding-top: 6px;
      padding-bottom: 6px;
      padding-right: 20px;
      padding-left: 20px;
      text-align: center;
      /*-webkit-transform: skew(-31deg);
      -moz-transform: skew(-31deg);
      -o-transform: skew(-31deg);*/
    }

    .navbar .navbar-collapse .navbar-right .active a{
      background: transparent;
      color: #ec6607;
    }

    .navbar-default .navbar-nav.navbar-right > li.active > a{
      transform: perspective(1px) skew(10deg);
      -ms-transform: perspective(1px) skew(10deg);
      -moz-transform: perspective(1px) skew(10deg);
      -webkit-transform: perspective(1px) skew(10deg);
    }

    .navbar .navbar-collapse li.text-muted{
      font-family: magistral, sans-serif !important;
      font-style: italic;
      font-size: 16px;
      display: block;
      position: relative;
      color: #194282;
      text-decoration: none;
      z-index: 1;
      padding-top: 5px;
      padding-bottom:5px;
      padding-right: 20px;
      padding-left: 20px;
      text-align: center;
      transform: perspective(1px) skew(2deg);
      -ms-transform: perspective(1px) skew(2deg);
      -moz-transform: perspective(1px) skew(2deg);
      -webkit-transform: perspective(1px) skew(2deg);
    }

    .navbar .navbar-collapse .dropdown-menu a{
      text-align: left;
      padding-left: 0;
      transform: perspective(1px) skew(10deg);
      -ms-transform: perspective(1px) skew(10deg);
      -moz-transform: perspective(1px) skew(10deg);
      -webkit-transform: perspective(1px) skew(10deg);
    }

    .navbar-nav li:first-child .nav-background{
      width: 158px;
    }

    .navbar-nav li:nth-child(2) .nav-background{
      width: 206px;
    }

    .navbar-default .dropdown:hover ul.dropdown-menu{
      display: block;
    }

    .no-touch .touch-only{
      display: none !important;
    }

    .lang-nav{
      right: -4px;
    }

    .lang-nav, .menue{
      position: relative;
      top: calc(100% - 68px);
    }

    /*Sprachmenü*/
    .navbar .navbar-nav.navbar-right{
      top: 0;
    }

    .navbar .navbar-nav.navbar-right li:first-child{
      border-left: 2px solid #ec6607;
    }

    .navbar .navbar-nav.navbar-right li{
      border-top: 2px solid #ec6607;
      border-bottom: 2px solid #ec6607;
      border-right: 2px solid #ec6607;
    }

    /*Button*/

    .btn{
      font-size: 20px;
    }

    .btn-cta{
      transform: skew(-21deg);
      -ms-transform: skew(-21deg);
      -moz-transform: skew(-21deg);
      -webkit-transform: skew(-21deg);
      -o-transform: skew(-21deg);
      background: transparent;
      padding: 6px 12px;
    }

    .text-with-image .btn-holder-trans p{
      width: 100%;
    }

    /*bigimagewithtext*/
    .text-container{
      float: right;
    }

    /*Headerslider*/
    .headerslider{
      padding-top: 106px;
    }
    .pagination-mobile{
      display: none;
    }

    /*Kontaktbar*/
    .powermail_fieldset_4{
      display: none;
    }

    /*Suche-Werkstatt*/
    .suche-werkstatt input#address{
      padding: 10px;
      width: 400px;
      margin-bottom: 20px;
    }

    .suche-form select{
      margin-bottom: 30px;
    }

    /*Sticky Menü*/
    .sticky-menue{
      position: fixed;
      right: 0;
      top: 22vH;
      z-index: 1000;
    }

    /*Kontaktformular Bewerbung*/
    #contact .powermail_fieldwrap_upload .powermail_file + label{
      height: 54px;
      padding: 14.5px 10px;
    }

    #contact .powermail_fieldwrap_upload .clear-upload{
      height: 54px;
      width: 54px;
      padding: 6px 12px;
    }

    /*footernav*/
    .container .navbar-footer{
      margin-right: 0;
      margin-left: 0;
    }

    .navbar-footer{
      float: left;
    }

    .navbar-nav > li > a{
      padding-top: 15px;
      padding-bottom: 15px;
    }

    .footernavbar .footernav li{
      padding: 15px 0px 15px 6px;
    }


    .powermail_fieldset_1, .powermail_fieldset_5, .powermail_fieldset_6{
      width: 60%;
      float: left;
    }

    .powermail_fieldset_2, .powermail_fieldset_7, .powermail_fieldset_8{
      padding-left: 10px;
      width: 40%;
      float: left;
    }
}

@media (min-width: 992px){
  /*navbar*/
  .navbar-default .container{
    width: 85%;
  }

  /*Slider*/
  .swiper-container .slider-content{
    width: 35%;
  }

  .swiper-container .slider-title{
    display: inline-block;
    margin-bottom: 10px;
  }

  .swiper-container .slider-content{
    margin-top: 160px;
  }

  /*.swiper-container .swiper-slide-3 .slider-content{
    margin-top: 80px;
  }*/

  .swiper-container .has-bg{
    font-size: 25px;
  }

  /*half-image-with-text*/
  .text-with-image .border-orange{
    margin-left: 0;
    margin-right: 0;
  }

  .text-with-image p{
    width: 65%;
  }

  /*bigimagewithtext*/
  .triangle-bigimagewithtextright{
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 2428px solid rgba(236,102,7,0.7);
    border-left: 1292px solid transparent;
    float: left;
    right: 0;
    bottom: 0;
  }
}

@media (min-width: 1200px){
  /*navbar*/
  .navbar-default .container{
    width: 90%;
  }

  /*headerslider*/
  .swiper-container{
    height: 640px;
  }

  .headerslider .container{
    width: 95%;
  }

  /*Allgemein*/
  .col-lg-5elemente{
     width: 20%;
     float: left;
   }

  .container-5-elemente{
    width: 90%;
  }

  /*Slider*/
  .swiper-slide .container{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }

  .swiper-slide .container .slider-content{
    margin-top: 0;
  }

  .swiper-pag{
    left: 2vw;
    width: 55%;
  }

  /*Fourimages with Text*/
  .four-images .image-title h3{
    font-size: 1.3vw;
  }

  /*Suche-Werkstatt*/
  /*.suche-werkstatt #c225 header{
    width: 50%;
    float: left;
    height: 230px;
  }

  .suche-werkstatt #c225 .suche-form{
    width: 50%;
    float: right;
    height: 230px;
  }*/

  .suche-werkstatt header{
    width: 50%;
    float: left;
    /*height: 270px; wieder einblenden, wenn suchfunktion aktiv*/
    height: 200px;
  }

  .suche-werkstatt .suche-form{
    width: 50%;
    float: right;
    /*height: 270px; wieder einblenden, wenn suchfunktion aktiv*/
    height: 200px;
  }

  .suche-werkstatt header h2{
    margin-bottom: 30px;
  }

  .suche-werkstatt header h3{
    font-size: 18px;
  }

  .suche-werkstatt input#address{
    padding: 10px;
    width: 400px;
    margin-bottom: 20px;
  }

  .suche-platzhalter{
    /*height: 270px; wieder einblenden, wenn Suchfunktion aktiv*/
    height: 200px;
  }

  /*Kontaktformular Bewerbung*/
  #contact form{
    padding-right: 70px;
    padding-left: 70px;
  }

}

@media (max-width: 1199px){
  /*Fourimages with Text*/
  .fourimageswithtext img{
    margin-right: auto;
    margin-left: auto;
  }

  .lang-nav{
    right: 0 !important;
  }

  .navbar ul.navbar-nav.nav-menu{
    right: 10px;
  }
}

@media (max-width: 991px){
  /*Image with Text*/
  .imagewithtext h3{
    text-align: center;
  }

  .imagewithtext .image-spacer{
    margin-right: auto;
    margin-left: auto;
  }

  /*Half Image with Text*/
  .half-image-with-texts .image-half-bg{
    min-height: 300px;
    width: 100%;
  }

  .half-image-with-texts .btn-holder-trans{
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto;
  }

  .text-with-image h2, .text-with-image h3{
    text-align: center;
  }

  .text-with-image p{
    text-align: center;
  }

  /*Big Imgae with Text*/
  .triangle-bigimagewithtextright{
    display: none;
  }

  .bigimagewithtextright .text-container{
    background-color: rgba(236,102,7,0.7);
    width: 100%;
  }

  /*Slider*/
  .triangle-left{
    width: 100%;
    background: rgba(25,66,130,0.7);
    border-top: 0;
    border-right: 0;
  }

  /*Footer*/
  .footernavbar{
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .footernavbar .footernav li:first-child{
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }

  .footernavbar .footernav li{
    width: 50%;
    padding-top: 0;
    padding-bottom: 0;
  }

  .footernavbar .footernav li span{
    display: none;
  }
}

@media (max-width: 767px){
  /*Logo*/
  .sebro-logo{
    width: 178px;
    height: 45px;
    position: relative;
    top: calc(100% - 45px);
  }

  /*Navbar*/
  .navbar-container{
    position: relative;
  }

  /*Allgemein*/
  .title h2{
    font-size: 1.4em;
  }

  p{
    font-size: 16px;
  }

  .copytext .container{
    overflow: hidden;
  }

  .imagewithtext .container{
    overflow: hidden;
  }

  /*Breadcrumb*/
  .section-breadcrumb{
    display: none;
  }

  /*navbar*/
  .navbar-default .navbar-collapse ul.nav-menu li a, .navbar-default .navbar-collapse ul.nav-menu li dropdown-menu li a {
    color: #fff;
  }

  .navbar-default .navbar-nav .open .dropdown-menu > li > a, .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus{
    color: #fff;
  }

  .navbar-default .navbar-collapse{
    background: rgba(25,66,130,0.8);
  }

  .bigMenu{
   display: none !important;
  }

  .navbar-header{
    height: 100%;
    top: calc(100% - 45px);
  }

  .navbar-default{
    height: 80px;
  }

  .navbar-brand{
    height: 100%;
    padding: 0;
  }

  .navbar-toggle{
    margin-top: 0;
    margin-bottom: 0;
    top: calc(100% - 42px);
  }

  .lang-nav{
    display: none;
  }

  .navbar-default.navbar-static-top{
    height: 100%;
    min-height: 34px;
  }

  .navbar-static-top .container{
    padding: 0;
  }

  #navbar2 ul{
    width: 30%;
    float: left;
    margin: 0;
    border-top: 2px solid #ec6607;
    border-bottom: 2px solid #ec6607;
    height: 34px;
  }

  #navbar2 ul li{
    display: inline-block;
    float: left;
    width: 50%;
    height: 100%;
    border-left: 2px solid #ec6607;
    text-align: center;
  }

  #navbar2 ul li a{
    padding: 4px;
    height: 100%;
    line-height: 1.5;
  }

  #navbar2 form{
    width: 70%;
    float: left;
    background: #e1e7ef;
    border: 2px solid #ec6607;
  }

  #navbar2 form input{
    height: 30px;
    border: 0;
    background: transparent;
    line-height: 1.5;
  }

  #navbar2 form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #194282;
    opacity: 1; /* Firefox */
  }

  #navbar2 form input:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: #194282;
  }

  #navbar2 form input::-ms-input-placeholder { /* Microsoft Edge */
      color: #194282;
  }

  #navbar2 form .quicksearch-sword{
    width: 65%;
    float: left;
    padding-left: 10px;
  }

  #navbar2 form .quicksearch-submit{
    width: 2%;
    float: left;
    color: transparent;
  }

  #navbar2 form button{
    width: 20%;
    float: left;
    height: 30px;
    border: 0;
    color: #194282;
    text-align: right;
    background: transparent;
    line-height: 1.5;
  }

  /*bigimagewithtext*/
  .bigimagewithtextright h2{
    font-size: 3em;
  }

  .triangle-bigimagewithtextright{
    display: none;
  }

  .bigimagewithtextright .btn-holder{
    float: none;
  }

  .bigimagewithtextright .btn-cta{
    background: transparent;
  }

  .bigimagewithtext .style-1{
    padding: 20px 0;
  }

  .bigimagewithtext.fixed-height-450{
    height: 100%;
  }

  .bigimagewithtext .style-1 h2{
    font-size: 1.3em;
  }

  /*imagewithtextmouseover*/
  .imagewithtextmouseover h3{
    font-size: 1.5em;
  }

  .imagewithtextmouseover-content{
    padding-right: 15px;
    padding-left: 15px;
  }

  .imagewithtextmouseover-content h4{
    transform: none;
    font-size: 1.2em;
  }

  .imagewithtextmouseover-content p{
    font-size: 16px;
  }

  /*Images with Text*/
  .imagewithtext-single .image-text h3{
    font-size: 1.3em;
  }

  /*Image with Text*/
  .imagewithtext h3{
    font-size: 1em;
  }

  /*Iconsleft*/
  .iconsleft .container{
    overflow: hidden;
  }
  .icon-right{
    padding-bottom: 20px;
  }

  /*Fourimages with Text*/
  .fourimageswithtext img{
    max-width: 300px;
    width: 100%;
  }

  .fourimageswithtext .image-text{
    max-width: 300px;
    margin-right: auto;
    margin-left: auto;
  }

  .four-images .image-title h3{
    font-size: 1em;
  }

  /*Graphictext*/
  .graphictext .image-box h3{
    font-size: 1.5em;
  }

  /*On Page Slider*/
  #mixedContent button{
    display: none !important;
  }
  .slider-on-page .slider-on-page-nav .slick-slide{
    width: 100% !important;
  }

  .slide-container .slick-slide{
    padding: 0;
  }

  .slider-single-element h3{
    font-size: 1.2em;
  }

  .slider-content h1, .slider-content h2{
    font-size: 1.8em;
    display: inline-block;
  }

  .swiper-container{
    max-height: 450px;
    height: 35vh;
  }

  .swiper-container .slider-content{
    margin-top: 10px;
  }

  .slider-slide-down{
    background: transparent;
    -webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-o-transform: skew(0deg);
  }

  .triangle-left{
    width: 100%;
    background: rgba(25,66,130,0.7);
    border-top: 0;
    border-right: 0;
  }

  .triangle-right{
    border-left: 0;
    border-bottom: 0;
    display: none;
  }

  .headerslider .btn-cta{
    background: transparent;
    -webkit-transform: skew(-21deg);
    -moz-transform: skew(-21deg);
    -o-transform: skew(-21deg);
  }

  .slider-slide-down{
    height: 45px;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  /*Slider*/

  #mixedContent .contentBox {
    position: relative;
    float: left;
    display: block;
    height: auto;
    width: 300px;
    padding: 10px;
    margin: 0px 5px;
    /* If you don't want the images in the scroller to be selectable, try the following
       block of code. It's just a nice feature that prevent the images from
       accidentally becoming selected/inverted when the user interacts with the scroller. */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    text-align:center;
  }

  #mixedContent .contentBox img{
    width: 100%;
    max-width: 250px;
  }

  .scrollingHotSpotLeft, .scrollingHotSpotRight{
    display: none !important;
  }

  /*Slick Slider*/
  html.touch div.scrollableArea{
    margin-right: auto;
    margin-left: auto;
  }

  /*Akkordeon*/
  .accordion .container{
    overflow: hidden;
  }
  .set > h3{
    font-size: 1em;
    padding: 20px 10px;
  }

  .accordion-container .panel-collapse .content{
    padding-right: 0;
    padding-left: 0;
  }

  .accordion-container a.btn{
    white-space: inherit;
  }

  .btn-holder-akkordeon{
    width: 100%;
    display: block;
    max-width: 300px;
    margin-right: auto;
    margin-left: auto;
    padding: 14px 12px;
    text-align: center;
  }

  .accordion-container a.btn{
    padding: 0;
  }

  .accordion .set.panel .akk-icon-plus{
    background: url("/fileadmin/user_upload/icons/plus.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    float: right;
    width: 15px;
    height: 15px;
    position: relative;
    top: 0;
    -ms-transform: skew(10deg);
    -moz-transform: skew(10deg);
    -webkit-transform: skew(10deg);
    -o-transform: skew(10deg);
    transform: skew(10deg);
  }

  .accordion .set.panel .akk-icon-minus{
    background: url("/fileadmin/user_upload/icons/minus.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    float: right;
    width: 15px;
    height: 15px;
    position: relative;
    top: 0;
    -ms-transform: skew(10deg);
    -moz-transform: skew(10deg);
    -webkit-transform: skew(10deg);
    -o-transform: skew(10deg);
    transform: skew(10deg);
  }

  /*Half Image with Text*/
  .half-image-with-texts h2{
    font-size: 1.3em;
    text-align: center;
  }

  .half-image-with-texts .image-half-bg{
    min-height: 300px;
    width: 100%;
  }

  .half-image-with-texts .btn-holder-trans{
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto;
  }

  .half-image-with-texts .btn-holder-trans a{
    -webkit-transform: skew(-21deg);
    -moz-transform: skew(-21deg);
    -o-transform: skew(-21deg);
  }

  .half-image-with-texts .container-fluid{
    overflow: hidden;
  }

  /*Kontaktbar*/
  .contact-bar p{
    padding-left: 0;
  }

  .powermail_fieldset_1{
    width: 100%;
  }

  /*Kontaktbar*/
  .powermail_fieldset .col-xs-12{
    padding: 0;
  }

  .powermail_fieldset_2{
    display: none;
  }

  .powermail_field h3{
    text-align: center;
  }

  /*News*/
  #news .container{
    overflow: hidden;
  }
  #news form select{
    width: 100%;
    float: left;
    max-width: 300px;
    font-size: 20px;
    margin-bottom: 20px;
    margin-right: 0;
  }
  #news .filter form, #news .filter li{
    width: 100%;
  }

  #news .filter li{
    width: 100%;
    max-width: 300px;
  }

  #news .filter li a{
    font-size: 20px;
  }

  #news .image-box .image-content{
    padding-left: 0;
  }

  /*Sticky Menü*/
  .sticky-menue{
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  .sticky-menue div{
    width: 50%;
    float: left;
    background: rgba(236,102,7,0.9)
  }

  .sticky-menue-phone{
    margin-top: 0;
  }

  .sticky-menue svg{
    display: block;
    margin-right: auto;
    margin-left: auto;
  }

  /*Suche-Werkstatt*/
  .vcard{
    flex-direction: column;
  }

  .address-webseite{
    margin-top: 20px;
  }

  .suche-werkstatt input#address{
    padding: 10px;
    width: 100%;
    max-width: 300px;
    margin-bottom: 20px;
  }

  .suche-form select{
    margin-bottom: 30px;
  }

  /*Kontaktformular Bewerbung*/
  .powermail_fieldwrap_upload .powermail_field{
    max-width: 455px;
  }

  #c256 .powermail_fieldwrap_type_submit.powermail_fieldwrap_marker{
    margin-top: 20px;
  }

  #contact .powermail_fieldwrap_upload .powermail_file + label{
    padding: 10px 10px;
    font-size: 14px;
  }

  #contact .powermail_fieldwrap_upload .clear-upload{
    padding: 0;
  }

  /*Footer*/
  footer{
    margin-bottom: 50px;
  }

  ul.footernav{
    padding-right: 15px;
    padding-left: 15px;
  }

  .footernavbar .footernav li{
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ==========================================================================
   Media Queries. Navigation
   ========================================================================== */

@media (max-width: 1630px) and (min-width: 1200px){
  .navbar .navbar-collapse a{
    font-size: 13px;
  }
}

/*@media (min-width: 1600px){
  .slide-container button.slick-next{
    top:22%;
  }

  .slide-container button.slick-prev{
    top: 22%;
  }
}*/

@media (max-width: 1600px) and (min-width: 1200px){
  /*.slider-on-page .slide-container .slick-slide .slider-on-page-content{
    width: 700px;
    transform: translateX(-50%);
    margin-left: 50%;
  }*/

  .slide-container button.slick-prev{
    /*left: 10%;
    top: 100px;*/
    width: 42px;
  }

  .slide-container button.slick-next{
    /*right: 10%;
    top: 100px;*/
    width: 42px;
  }
}

@media (max-width: 1327px) and (min-width: 1200px){
  .navbar .navbar-collapse a{
    padding-right: 10px;
    padding-left: 15px;
  }
}

@media (min-width: 1480px){
  .navbar .navbar-collapse a br, .navbar .navbar-collapse a span{
    display: none;
  }
}

@media (max-width: 1480px) and (min-width: 768px){
  .navbar .navbar-collapse a{
    font-size: 13px;
  }

  .navbar .navbar-nav{
    top: calc(100% - 52px - 36px);
  }

  .lang-nav{
    top: calc(100% - 88px);
    right: -10px;
  }

  .navbar ul.navbar-nav.nav-menu{
    height: 52px;
  }

  .navbar .navbar-nav.nav-menu > li{
  height: 100%;
  }

  .navbar .navbar-nav.nav-menu li > a.bigMenu{
  top: 50%;
  transform: perspective(1px) skew(10deg) translateY(-50%);
  -ms-transform: perspective(1px) skew(10deg) translateY(-50%);
  -moz-transform: perspective(1px) skew(10deg) translateY(-50%);
  -webkit-transform: perspective(1px) skew(10deg) translateY(-50%);
  }
}

@media (max-width: 1199px) and (min-width: 992px){
  .sebro-logo{
    width: 240px;
    height: 60px;
  }

  .navbar-header{
    padding-top: 0;
    position: relative;
    top: calc(100% - 60px);
  }

  .navbar-default .container{
    width: 100%;
  }

  .navbar .navbar-collapse a{
    font-size: 11px;
  }

  .navbar .navbar-collapse a{
    padding-left: 15px;
    padding-right: 7px;
  }

  .swiper-pag{
    left: 0vw;
  }
}

@media (max-width: 991px) and (min-width: 768px){
  .sebro-logo{
    width: 149px;
    height: 37px;
  }

  .navbar-header{
    padding-top: 0;
    position: relative;
    top: calc(100% - 37px);
  }

  .navbar .navbar-nav{
    top: calc(100% - 52px - 36px);
  }

  .navbar-default .container{
    width: 100%;
  }

  .navbar .navbar-collapse a{
    font-size: 9px;
  }

  .navbar .navbar-collapse a{
    padding-left: 2vw;
    padding-right: 1vw;
  }
}

/*Slider*/
@media (max-width: 1460px) and (min-width: 1200px){
  .slider-content h1{
    font-size: 1.5em;
  }

  .swiper-container .slider-content p{
    font-size: 20px;
  }

  .swiper-pag{
    left: 1vw;
  }
}

@media (max-width: 1199px) and (min-width: 992px){
  .swiper-container{
    height: 70vh;
    min-height: 690px;
  }

  .swiper-container .slider-content{
    margin-top: 130px;
    width: 56%;
  }

  .triangle-left{
    border-right: 994 solid transparent;
    border-top: 1640px solid rgba(25,66,130,0.7);
  }
}

@media (max-width: 991px) and (min-width: 768px){
  .slider-content h1{
    font-size: 40px;
    display: inline-block;
  }

  .slider-content h2{
    font-size: 40px;
    display: inline-block;
  }

  .swiper-container .slider-content{
    margin-top: 135px;
  }

  .swiper-container{
    height: 70vh;
    min-height: 550px;
  }

  .swiper-pag{
    bottom: 55px;
  }

  .slider-slide-down{
    height: 45px;
    width: 70px;
  }

  #news form select{
    width: 200px;
  }
}

@media (max-width: 768px){
  .swiper-pagination .pagination-mobile{
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
    color: #fff;
    font-size: 16px;
  }

  .swiper-button-prev, .swiper-button-next{
    display: none;
  }

  .swiper-pag{
    bottom: 30px;
    left: 0;
    transform: none;
  }

  .swiper-pagination{
    width: 100%;
  }
}

.iconsleft .row-equal:before, .iconsleft .row-equal:after, .tex-with-image-box.row:before, .tex-with-image-box.row:after{
  content: normal;
}

@media (min-width: 992px){
.swiper-container .slider-content {
    width: 560px;
}
}

.navbar .navbar-nav > li ul.dropdown-menu > li{
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px){
  .touch .bigMenu{
    display: none !important;
  }

  .no-touch .smallMenu{
    display: none !important;
  }

  .lang-nav{
    width: 100%;
  }

  .navbar-header{
    position: absolute;
    z-index: 2;
  }
}