/* CSS openlogic */

body {
  font-family: 'Open Sans';
  line-height: 1.8;
}


/*Responsive Font */
@media (max-width: 1200px) {
  legend {
    font-size: calc(1.275rem + 0.3vw);
  }
  h1,
  .h1 {
    font-size: calc(1.375rem + 1.5vw);
  }
  h2,
  .h2 {
    font-size: calc(1.325rem + 0.9vw);
  }
  h3,
  .h3 {
    font-size: calc(1.3rem + 0.6vw);
  }
  h4,
  .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }
  .display-1 {
    font-size: calc(1.725rem + 5.7vw);
  }
  .display-2 {
    font-size: calc(1.675rem + 5.1vw);
  }
  .display-3 {
    font-size: calc(1.575rem + 3.9vw);
  }
  .display-4 {
    font-size: calc(1.475rem + 2.7vw);
  }
  .close {
    font-size: calc(1.275rem + 0.3vw);
  }
}
/* -------- Top Bar ------------- */

#sp-top-bar {
    font-family: 'Open Sans Condensed', sans-serif;
    background: #fff;
    color: #215a68;
}

#sp-top-bar a {
    color: #252525;
}

#sp-top1 .sp-module {
margin-left: -0.05rem;
}


/* -------- Nav ------------- */
#sp-header {
    height: 80px;
}

#sp-logo .logo {
margin-top: 10px;
}

#sp-logo .logo-image {
height: 54px;
}



.sp-megamenu-parent li.sp-menu-item {
    text-transform: uppercase;
}

.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {
    color: #215A68;
}

.sp-megamenu-parent > li:hover > a {  
    color: #215A68;
}

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 17px;
}

.sp-megamenu-parent > li.active > a {
    font-weight: 400;
}

/* -------- Nav-Dropdown ------------- */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item {
    text-transform: uppercase;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
  color: #215A68;
  margin-left: 1px;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 17px;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  color: #215A68;
  margin-left: 10px;
  transition-property: margin-left, color;
  transition-duration: 0,8s;
  transition-delay: 0,6s;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    padding: 1px;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item {
    padding: 0px 10px;
    background-color: #fff;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover {
    background-color: #f8f8f8;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    padding: 0px 10px;
}

/* ----------- Offcanvas ------------- */

.offcanvas-menu .offcanvas-inner .sp-module ul > li a:hover, .offcanvas-menu .offcanvas-inner .sp-module ul > li span:hover, .offcanvas-menu .offcanvas-inner .sp-module ul > li a:focus, .offcanvas-menu .offcanvas-inner .sp-module ul > li span:focus {
    color: #215A68;
}

#offcanvas-toggler > .fa:hover, #offcanvas-toggler > .fa:focus, #offcanvas-toggler > .fa:active {
    color: #215A68;
}
/* ----------- Hero ------------- */

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 110px;
    left: 15%;
    z-index: 10;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    text-align: center;
    background: rgba(33, 90, 104, 0.8);
}

@media (max-width: 992.98px) {
.carousel-caption {
    right: 15%;
    bottom: 10px;
    left: 15%;
}
}

.carousel-caption2 {
    position: absolute;
    right: 15%;
    top: 15%;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
}

#carouselExampleSlidesOnly {
z-index: 2;
}

#carouselExampleSlidesOnly p {
font-size: 1.01rem;
}

#carouselExampleSlidesOnly .logo-carousel {
max-height: 200px;
  opacity: 0.7;
  filter: alpha(opacity=70); /* For IE8 and earlier */
}

/* ----------- Breadcrumb ------------- */
.breadcrumb {
    background-color: #f3f3f3;
}

/* ----------- Content ------------- */

#sp-main-body{
padding: 50px 0;
}

#sp-main-body p,li{
font-size: 14px;
font-weight: 300;
hyphens: auto;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-chars: auto 5;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: auto 5;
-ms-hyphenate-limit-lines: 4;
}

#sp-main-body h1,h2,h3,h4,h5 {
 color: #215A68;
 font-weight: 500;
 margin-bottom: .9rem;
}

#sp-main-body .headline {
text-transform: uppercase;
}

#sp-main-body a {
 color: #215A68;
 font-weight: 500;
 text-decoration-line: none;
}

#sp-main-body .black {
 color: #2a2a29;
 font-weight: 500;
}

#sp-main-body a:hover {
 color: #122d34;
 font-weight: 500;
}

.article-list .article .readmore a {
    color: #215A68;
    font-weight: 300;
}

/*------     Listenpunkte   -----------*/

                                                                                                                                                                                         
.check ul,
li { 
  padding: 0;
  margin: 0;
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 4px;
  list-style: none;
  line-height: 1.3rem;
}

.check li {
 margin-left: -1.5em; 
}

.check li:before {
  content:"\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #215A68;
  font-size: 1.22rem;
  float: left;
  margin-left: -1.2em; 
}

.card-title {
font-size: 0.92rem;
text-align: center !important;
}

.card {
border: 1px solid #fff;
}

.card:hover {
border: 1px solid #215A68;
}


.button-header {
    font-size: 0.91rem;
    background: #3e7a98;
    color: rgb(255,255,255) !important;
    padding: 4px 7px;
    box-shadow: 2px 3px 3px grey;
    border-radius: 4px;
}

.button-header:hover {
    background: #122d34;
}

.gruen {
color: #215A68;
}

/* ----------- Kundensupport ------------- */

div#fox-container-c123 .btn, div#fox-container-c123 .btn span {
    color: #ffffff;
}

div#fox-container-c123 .btn {
    text-shadow:none;
    background-color: #3e7a98;
    background-image: none;
    background-repeat: repeat-x;
    border: 0px;
    border-radius: 4px;
    box-shadow: 2px 3px 3px grey;
    padding: 4px 12px;
    line-height: 20px;
}

div#fox-container-c123 .btn:hover {
    background-color: #122d34;
}

/* ----------- Refrenzen ------------- */

#referenzen .figure-caption {
position: absolute;
bottom: 0px;
color: #215a68;
}

#referenzen .figure-img {
transition: transform .2s; /* Animation */
}
 

#referenzen .figure-img:hover {
transform: scale(1.05);
}

#referenzen .figure-caption a {
color:#3e7a98;
}

#referenzen .figure-caption a:hover {
color:#122d34;
}

@media (max-width: 768.98px) {
#referenzen .figure-caption a {
font-size: 0.6rem;
}
}

@media (max-width: 576.98px) {
#referenzen .figure-caption a {
font-size: 0.8rem;
}
}

#referenzen .figure-img {
max-height: 70px;
}

/* ----------- Download ------------- */

thead {
    color: #ffffff;
    background-color: #3e7a98;
}

tbody a {
    color: #3e7a98;
    text-decoration: underline;
}

tbody a:hover {
    color: #122d34;
    text-decoration: underline;
}

.download-h5 h5{
font-size: 1.25rem;
}

tbody .btn {
text-decoration-line: none;
}

@media (max-width: 768.98px) {
.download-h5 h5{
font-size: 0.94rem;
}
}


/* ----------- Kontakt ------------- */

div#fox-container-c108 .btn, div#fox-container-c108 .btn span {
    color: #ffffff;
}

div#fox-container-c108 .btn {
    text-shadow:none;
    background-color: #3e7a98;
    background-image: none;
    background-repeat: repeat-x;
    border: 0px;
    border-radius: 4px;
    box-shadow: 2px 3px 3px grey;
    padding: 4px 12px;
    line-height: 20px;
}

div#fox-container-c108 .btn:hover {
    background-color: #122d34;
}

.td1 { 
padding-right: 15px;
}


/* ----------- BOTTOM 1 ------------- */

#sp-bottom {
background: #f9f9f9;
color: #000;
font-size: 14px;
}

#sp-bottom a {
    color: #252525;
}

#sp-bottom a:hover, #sp-bottom a:active, #sp-bottom a:focus {
    color: #3e7a98;
}

#sp-bottom .fa{
color: #215A68;
font-size: 44px;
margin-bottom: 20px;
}

.rund {
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
 transition: transform .2s; /* Animation */
}

.rund:hover {
  transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
 
.schild {
 color: white;
 background-color: #215A68;
 padding: 0px 4px;
 border-radius:  4px;
}

/* ----------- FOOTER ------------- */
    
    
#sp-footer {
  position: relative;
  bottom: 0px;
  width: 100%;
}
#sp-footer1 {
color: #adddf1;
}

#sp-footer a {
color: #adddf1;
}


#sp-footer2 {
color: #adddf1;
}

#sp-footer2 a {
color: #adddf1;
}

#sp-footer2 a:hover {
color: #ffffff;
}

.sp-copyright {
color: #215A68;
}

#sp-copyright {
position: relative;
bottom: 0;
font-size: 11px;
background-color: #122d34;
width: 100%;
padding: 5px 15px 5px 15px;
}

#sp-copyright a {
  color: #adddf1;
}

#sp-copyright a:hover {
 color: #215A68;
}



@media (max-width: 767.98px) {
#sp-footer2 .col-sm-12  {
    text-align: left !important;
} 
}

.sp-scroll-up {
    color: #fff;
    background: #3e7a98;
}

.sp-scroll-up:hover, .sp-scroll-up:active, .sp-scroll-up:focus {
    color: #fff;
    background: #444;
}