@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,600');

/* ------- colors -------
havi-link-color (#ca2a08)
patrol-green (#369794)
light-grey (#f3f5f9)
logo-bordeaux-red (#801c08)
very-dark-footer-blue (#292a36)
gradient-blue (#365697)
------- */

html, body { margin: 0; padding: 0; font-size: 18px; line-height: 1.6rem;scroll-behavior: smooth; }
body { font-family: 'IBM Plex Sans', sans-serif; color: #000000; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: #fc3a0a; color: #fff; }

h1 { margin-bottom: 1.1rem; font-size: 2.0rem; line-height: 2.7rem; font-weight: 400; }
h2 { margin-bottom: 1.1rem; font-size: 2.0rem; line-height: 2.7rem; font-weight: 400; }
h2.bigger { font-size: 2.0rem; font-weight: 800;line-height:2.2rem;letter-spacing:-0.1rem;}
h2.bigger a { color: black;}
h3 { margin-bottom: 0.9rem; font-size: 1.6rem; font-weight: 800; }
h3 a {color:#fff;}
h3 a:hover {color:#fff;text-decoration: underline;}
h4 { font-size: 1rem; line-height: 1.4rem; font-weight: 800; }
h5 { text-transform: uppercase; font-size: 0.9rem; line-height: 1.4rem; font-weight: 500;color: #ca2a08;letter-spacing:0.1rem;margin-bottom:0.7rem }
p { font-size:1.1rem;line-height:1.7rem;margin-bottom: 1.25rem;}
li { font-size:1.1rem;}
#case-study ul {list-style-type: none;padding: 0;margin-bottom: 3rem;}
#case-study li{font-size: 1.4rem;font-weight: 200;background-color:#f3f5f9;margin-bottom:3vh;padding:2rem;border-left: 15px solid #ca2a08; line-height: 2.4rem;}
p:last-child {margin-bottom:0;}
p.bigger { font-size: 1.4rem; line-height: 2.4rem;margin-bottom: 5rem; }
p.bigger:last-child {margin-bottom:0;}
a { color:#ca2a08; text-decoration: none; }
a img {border: 0; } 
a:hover, a:active, a:focus { color:#ca2a08; text-decoration: underline; }
a.link-overlay { width: 100%; height: 100%; margin: 0px; padding: 0px; display: block; position: absolute; left: 0px; top: 0px; text-decoration: none; z-index: 1000; }
a.link-overlay:hover,
a.link-overlay:active,
a.link-overlay:focus { text-decoration: none; }
img { max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; }
.red {color:#ca2a08;}
figure { display: table; margin: 0px 0px 15px 0px; }
figure figcaption { display: table-row; text-align: right; }
figure img { display: table-row; }
ul.row { padding: 0px; margin-top: 0px; margin-bottom: 0px; list-style-type: none; }
section > .inner { width: 100%; height: 100%; position: relative; }
.button { padding: 10px 20px 10px 20px; display: inline-block; border: none; font-size: 1em; line-height: 1em; background-color: #369794; color: #ffffff; text-decoration: none; cursor: pointer; }
.button:hover,
.button:active,
.button:focus { color: #ffffff; text-decoration: none; background-color: #801c08;transition:all 2s ease;}
.button.fullwidth { width: 100%; text-align:center; }
.nobreak { white-space: nowrap; }

.quicknav ul { list-style-type: none; margin: 0; padding: 0; justify-content: center; align-items: stretch; }
.quicknav ul li { padding-top: 15px; padding-bottom: 15px; }
.quicknav ul li .button { width: 100%; height: 100%; padding: 10px 10px 10px 10px; font-size: 0.9em; }

/**************************************
 * Colors & Backgrounds
 *************************************/
 .bg-grey {background-color: #f3f5f9;}
 
 

.form-control { border: none; border-radius: 0px; }
.form-control:focus { border: none; box-shadow: none; }
textarea { height: 150px; }
footer .textarea { height: 130px; }

.modal-header { border: none; padding: 8px 15px 0px 15px; }
.modal-body { padding: 0px 15px 15px 15px; }
body.modal-open { padding-right: 0px !important; }
.modal-error .modal-content { color: #ffffff; background-color: #dc3545; }
.modal-error .close { color: #ffffff; }

/* expand-button */
.expandable-trigger {
    margin-top: 5vh;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 20px 10px 20px;
    border: none;
    cursor: pointer;
    display: block;
    font-size: 1em;
    line-height: 1em;
    background-color: #369794;
    color: #ffffff;
    text-decoration: none;
}
.expandable-trigger span::after { padding-left: 15px; display: inline-block; font-size: 1em; line-height: 1; color: #ffffff; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f107"; }
.expandable-trigger.open span::after { content: "\f106"; }
.expandable-content { display: none; }

/* scroll-to-top-button */
#scroll-to-top { width: 44px; height: 44px; padding: 0px 10px; display: block; position: fixed; bottom: 10vh; right: -44px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background-color: rgba(0,0,0,0.4); text-align: center; font-size: 24px; line-height: 44px; color: #ffffff; transition: right 250ms ease-out; z-index: 2000; }
#scroll-to-top.active { right: 0px; }

/* zoom-area */
.zoom-area { width: 100%; height: 100%; position: relative; overflow: hidden; }
.zoom-area .zoom-image { width: 100%; height: 100%; position: relative; z-index: 10; background-repeat: no-repeat; background-size: cover; background-position: center center; -webkit-transition: transform 2500ms ease-in-out; transition: transform 2500ms ease-in-out; }
.zoom-area:hover .zoom-image { -ms-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }
.zoom-area .zoom-text { padding: 15px 15px 10px 15px; position: absolute; left: 0px; top: 0px; z-index: 11; color: #ffffff; }

/* bg-image */
.bg-image { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; color: #ffffff; background-repeat: no-repeat; background-size: cover; background-position: center center; }

/* box */
.box .box-top { height: 40vh; position: relative; }
.box .box-top .bg-image { padding: 7vh 5vw 7vh 5vw; color: #ffffff; }
.box .box-content { padding: 7vh 5vw 7vh 5vw; border: 1px solid #cccccc; background-color: #ffffff; }

/* page-header text + image */
.header { background-color: #f3f5f9; }
.header-text { padding: 0 6vw 0 10vw; align-self: center; }
.header-image { padding: 0; }
.header-image img { width: 100%; }

/* padding in areas */
.hspace-1 { padding-left: 10vw; padding-right: 10vw; }
.hspace-2 { padding-left: 15vw; padding-right: 15vw; }
.hspace-3 { padding-left: 22vw; padding-right: 22vw; }
.vspace-1 { padding-top: 10vh; padding-bottom: 10vh; }
.vspace-2 { padding-top: 15vh; padding-bottom: 15vh; }
.intro { padding: 0 8vw 5vh 8vw; }

/* smaller gutter for grid */
.smallgutter.container-fluid { padding-left: 4px; padding-right: 4px; }
.smallgutter .row { margin-left: 4px; margin-right: 4px; }
.smallgutter .col, .smallgutter .col-1, .smallgutter .col-10, .smallgutter .col-11, .smallgutter .col-12, .smallgutter .col-2, .smallgutter .col-3, .smallgutter .col-4, .smallgutter .col-5, .smallgutter .col-6, .smallgutter .col-7, .smallgutter .col-8, .smallgutter .col-9, .smallgutter .col-auto, .smallgutter .col-lg, .smallgutter .col-lg-1, .smallgutter .col-lg-10, .smallgutter .col-lg-11, .smallgutter .col-lg-12, .smallgutter .col-lg-2, .smallgutter .col-lg-3, .smallgutter .col-lg-4, .smallgutter .col-lg-5, .smallgutter .col-lg-6, .smallgutter .col-lg-7, .smallgutter .col-lg-8, .smallgutter .col-lg-9, .smallgutter .col-lg-auto, .smallgutter .col-md, .smallgutter .col-md-1, .smallgutter .col-md-10, .smallgutter .col-md-11, .smallgutter .col-md-12, .smallgutter .col-md-2, .smallgutter .col-md-3, .smallgutter .col-md-4, .smallgutter .col-md-5, .smallgutter .col-md-6, .smallgutter .col-md-7, .smallgutter .col-md-8, .smallgutter .col-md-9, .smallgutter .col-md-auto, .smallgutter .col-sm, .smallgutter .col-sm-1, .smallgutter .col-sm-10, .smallgutter .col-sm-11, .smallgutter .col-sm-12, .smallgutter .col-sm-2, .smallgutter .col-sm-3, .smallgutter .col-sm-4, .smallgutter .col-sm-5, .smallgutter .col-sm-6, .smallgutter .col-sm-7, .smallgutter .col-sm-8, .smallgutter .col-sm-9, .smallgutter .col-sm-auto, .smallgutter .col-xl, .smallgutter .col-xl-1, .smallgutter .col-xl-10, .smallgutter .col-xl-11, .smallgutter .col-xl-12, .smallgutter .col-xl-2, .smallgutter .col-xl-3, .smallgutter .col-xl-4, .smallgutter .col-xl-5, .smallgutter .col-xl-6, .smallgutter .col-xl-7, .smallgutter .col-xl-8, .smallgutter .col-xl-9, .smallgutter .col-xl-auto { padding-left: 4px; padding-right: 4px; }

/**************************************
 * Menu
 *************************************/
 #toplink { margin-top: -3px; }
.navbar-expand-lg { padding: 30px 4vw 30px 4vw; align-items: center; }
.navbar-expand-lg .navbar-brand { padding: 0; margin: 0 1em 0 0; }
.navbar-expand-lg .navbar-brand img { width: auto; max-width: none; height: 61px; display: block; }
.navbar-expand-lg .navbar-toggler { padding: 6px 0px 6px 0px; background-color: #369794; }
.navbar-expand-lg .navbar-toggler .icon-bar { margin: 6px 20px 6px 20px; width: 60px; height: 3px; display: block; background-color: #ffffff; }
.navbar-expand-lg .navbar-nav .nav-item { padding: 0 0.8em 0 0.8em; }
.navbar-expand-lg .navbar-nav .nav-item > .nav-link { padding: 0px; color: #000000; border-bottom: 3px solid #ffffff; }
.navbar-expand-lg .navbar-nav .nav-item.active > .nav-link { border-bottom: 3px solid #369794;font-weight: 600; }
.navbar-expand-lg .navbar-nav .nav-item > .nav-link:hover { transition:all 2s ease;border-bottom: 3px solid #369794; color: #ca2a08; }
.navbar-expand-lg .navbar-nav .nav-item > .nav-link:focus { transition:all 2s ease;border-bottom: 3px solid #369794; }
.navbar-expand-lg .navbar-collapse { padding: 15px 0 0 0; }
/* responsive collapsed */
.navbar-expand-lg .navbar-collapse.collapsing,
.navbar-expand-lg .navbar-collapse.collapse.show { padding: 0 4vw 0 4vw; background-color: #ffffff; border-bottom: 1px solid #cccccc; position: absolute; left: 0px; right: 0px; top: 121px; z-index: 2000; align-self: flex-start; }
.navbar-expand-lg .navbar-collapse.collapsing .navbar-nav .nav-item,
.navbar-expand-lg .navbar-collapse.collapse.show .navbar-nav .nav-item { padding: 0px; font-size: 1em; line-height: 1.8em; }
.navbar-expand-lg .navbar-collapse.collapsing .navbar-nav .nav-item > .nav-link,
.navbar-expand-lg .navbar-collapse.collapse.show .navbar-nav .nav-item > .nav-link { padding: 0px; color: #000000; }
.navbar-expand-lg .navbar-collapse.collapsing .navbar-nav .nav-item.active > .nav-link,
.navbar-expand-lg .navbar-collapse.collapse.show .navbar-nav .nav-item.active > .nav-link { border-bottom: none; font-weight: 800; }
.navbar-expand-lg .navbar-collapse.collapsing #toplink,
.navbar-expand-lg .navbar-collapse.collapse.show #toplink { margin: 20px 0px 20px 0px; }

/* mobile navbar */
.navbar-toggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0; 
}

/**************************************
 * Slideshow
 *************************************/
#\32 5J-banner { display:block;position:absolute; right:5%;top:10%; z-index: 102;}
#slideshow-main {  }
.slideshow { visibility: hidden; position: relative; }
.slideshow-items { background-color: #ffffff; z-index: 100; }
.slideshow-item { width: 100%; }
.slideshow-image { position: relative; z-index: 101; }
.slideshow-image .img-responsive { width: 100%; height: auto; }
.slideshow-text { height: 100%; width: 100%; display: flex; flex-wrap: wrap; align-items: center; position: absolute; left: 0px; top: 0px; z-index: 102; }
.slideshow-text .inner {  }
a.slider-link-white {color: #fff;}
.slideshow-control { padding: 10px 20px; position: absolute; left: 10vw; top: 10vh; background: rgba(0,0,0,0.2); z-index: 103; }
.slideshow-control a { margin: 0px 20px 0px 0px; display: inline-block; color: #ffffff; font-size: 30px; line-height: 40px; }
.slideshow-control a:last-child { margin-right: 0px; }
.slideshow-control a.slideshow-play { font-size: 26px; }

/**************************************
 * Carousel
 *************************************/
#logo-carousel { padding: 3vh 0 3vh 0; }
.slick-slide img { margin: 0px auto; }
.slick-dots { margin: 10px 0px 0px 0px; padding: 0px; list-style-type: none; text-align: center; }
.slick-dots li { margin: 0px 8px; position: relative; display: inline-block; }
.slick-dots li button { width: 10px; height: 10px; line-height: 10px; margin: 0px 0px 10px 0px; padding: 0px; border: none; display: inline-block; font-size: 0px; background-color: transparent; cursor: pointer; }
.slick-dots li button:hover,
.slick-dots li button:active,
.slick-dots li button:focus { background-color: transparent; }
.slick-dots li button::before {  font-size: 11px; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f111"; text-align: center; color: #cccccc; }
.slick-dots li.slick-active button::before { color: #777777; }

/**************************************
 * Parallax
 *************************************/
.parallax-container { height: 70vh; position: relative; }
.parallax-text { position: absolute; left: 0px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: transparent; z-index: 11; }
.parallax-window { width: 100%; height: 100%; position: absolute; left: 0px; right: 0px; top: 0px; z-index: -100; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.parallax-mirror img { width: 100%; height: auto; }

/**************************************
 * Tab-Menu
 *************************************/
.tabmenu {
    background-color: #ffffff;
    padding: 2rem 1rem 2rem 1rem;
}
.tabmenu nav .nav-tabs { border: none; }
.tabmenu nav .nav-tabs .nav-link { border: none; border-radius: 0px; white-space: nowrap; }
/* horizontal */
.tabmenu.horizontal nav { padding: 3vh 4vw 0 4vw; border-bottom: 1px solid #cccccc; }
.tabmenu.horizontal nav .nav-tabs .nav-link { padding: 0.8rem 0 0.7rem 0; margin: 0 2.5rem 0 0; border-bottom: 5px solid #ffffff; color: #999999; font-size: 1.36rem; font-weight: 600; }
.tabmenu.horizontal nav .nav-tabs .nav-link.active { border-bottom: 5px solid #369794; color: #000000; }
.tabmenu.horizontal .tab-content { padding: 5vh 4vw 4vh 4vw; }
/* vertical */
.tabmenu.vertical { display: flex; flex-wrap: no-wrap;;margin-top:7vh }
.tabmenu.vertical nav { padding: 0; flex-basis: 20%; }
.tabmenu.vertical nav .nav-tabs .nav-link { padding: 0.7rem 0 0.7rem 1rem; margin: 0 0 0 -5px; border-left: 5px solid #cccccc; color: #999999; font-size: 1.1rem; font-weight: 400; flex-basis: 100%; }
.tabmenu.vertical nav .nav-tabs .nav-link.active { border-left: 5px solid #369794; color: #000000; }
.tabmenu.vertical .tab-content { padding: 0 0 0 4vw; flex-basis: 80%; }

/**************************************
 * Tooltip
 *************************************/
.tooltip { z-index: 2000; }
.tooltip.show { opacity: 1; }
.tooltip-inner { max-width: 260px; padding: 10px 15px 10px 15px; border: none; border-bottom: 5px solid #292a36; background-color: #ffffff; color: #666666; text-align: center; font-size: 0.8rem; border-radius: 4px; box-shadow: 0px 0px 5px rgba(200,200,200,0.8); }
.bs-tooltip-top .arrow::before { border-width: .4rem .4rem 0; border-top-color: #292a36; }

/**************************************
 * Sections: Homepage
 *************************************/
#havi-systeme { background-color: #f3f5f9; }

#data-quality-text { padding-top: 10vh; padding-left: 10vw; padding-right: 3vw; }
#data-quality-images { padding-right: 0px; }

#dataperformance {
padding-top: 20vh;	padding-bottom:15vh;
color: #ffffff; background-image: url(img/bg-dataperformance-gradient.jpg); background-repeat: no-repeat; background-size: cover;
}

#product-banner { padding-left: 0px; padding-right: 0px; padding-top: 4px; padding-bottom: 4px; }
#product-banner section { height: 55vh; padding-top: 4px; padding-bottom: 4px; }
#product-banner section .inner { padding: 0; }
#product-banner #afp-solutions .zoom-image { background-image: url(img/homepage-bg-afp-solutions.jpg); }
#product-banner #netarc .zoom-image { background-image: url(img/homepage-bg-netarc.jpg); }
#product-banner #lza .zoom-image { background-image: url(img/homepage-bg-lza.jpg); }
#product-banner #extractor .zoom-image { background-image: url(img/homepage-bg-extractor.jpg); }

#havi-statement { color: #ffffff; background-image: url(img/bg-havi-statement.jpg); background-repeat: no-repeat; background-size: cover; }
#havi-statement .statement { font-size: 1.3em; }

#cta #cta-boxes { margin-top: 10vh;padding-left:4vw;padding-right:4vw; }
#cta #cta-boxes li { margin-bottom: 30px; }
#cta #cta-boxes .inner {height: 100%; padding: 15px 15px 35px 15px;border: 20px solid #f4f5f9;}
#cta #cta-boxes .inner h4 { padding: 8px 0px 8px 0px; margin: 8px 0px 8px 0px; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; text-transform: uppercase; }

/**************************************
 * Sections: Datenmigration
 *************************************/ 
 /* list */
.benefits { padding-top: 3vh; display: flex; flex-wrap: nowrap; } 
.benefits ul { margin: 0 2vw 0 0; padding: 0; list-style-type: none; text-align: left; }
.benefits ul:last-child { margin-right: 0; }
.benefits li { background-color: #f3f5f9; margin-bottom: 2vh; padding: 0.8rem; border-left: 10px solid #369794; line-height: 120%; }
.tab-icons {margin-bottom: 1vh;}
/* 3 Boxes */
#teaser {color:white;text-align:center}
#teaser .row { justify-content: center; align-items: stretch; }
#teaser .row > div { padding-top: 15px; padding-bottom: 15px; }
#teaser .inner { height: 100%; padding: 1.4rem; box-shadow: 0 0 0 1px white inset; }
#teaser h2 { margin-bottom: 1.1rem; font-size: 1.4rem; line-height: 120%; font-weight: 900;letter-spacing:-0.09rem}
#teaser p {line-height:140%;}
#teaser .flyer .inner { background-color:#973639; border: 15px solid #973639; }
#teaser .casestudy .inner { background-color:#369794; border: 15px solid #369794; }
#teaser .casestudy .inner img { margin-top:30px; }
#teaser .fragebogen .inner { background-color:#366d97; border: 15px solid #366d97; }
/* weitere Gruende------- */
#more-benefits li {background-color:white;}

/**************************************
 * Sections: Service
 *************************************/
#service-tabs {
	background-repeat: no-repeat; 
	background-size: cover; 
	background-blend-mode: darken; 
	background-image: -moz-linear-gradient( 0deg, rgb(54,86,151) 0%, rgb(54,151,148) 65%); 
	background-image: -webkit-linear-gradient( 0deg, rgb(54,86,151) 0%, rgb(54,151,148) 65%); 
	background-image: -ms-linear-gradient( 0deg, rgb(54,86,151) 0%, rgb(54,151,148) 65%); 
}

#health-check {
padding: 15vh 15vw 15vh 15vw; color: #ffffff; background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.3)), url(img/bg-image-healthcheck.jpg); background-repeat: no-repeat; background-size: cover;
}
.health-box {background-color:black;padding:10%; opacity:0.5}
#health-check h2 {text-shadow: 5px 5px 40px rgb(20, 32, 56);}
#health-check p {text-shadow: 5px 5px 40px rgb(20, 32, 56);}

/**************************************
 * Sections: Produkte
 *************************************/
.produkt { border-bottom: 1px solid #999999; }
#produkte-afp-solutions { background-color: #f3f5f9; }
#produkte-afp-solutions .bg-image { background-image: url(img/homepage-bg-afp-solutions.jpg); }
#produkte-netarc { background-color: #f3f5f9; }
#produkte-netarc .bg-image { background-image: url(img/homepage-bg-netarc.jpg); }
#produkte-lza { background-color: #f3f5f9; }
#produkte-lza .bg-image { background-image: url(img/homepage-bg-lza.jpg); }
#produkte-storage-connector { background-color: #f3f5f9; }
#produkte-storage-connector .bg-image { background-image: url(img/homepage-bg-extractor.jpg); }

/**************************************
 * Sections: Referenzen
 *************************************/
ul.kundenlogos { justify-content:center;}
ul.kundenlogos li {margin-top:30px;}

/**************************************
 * Sections: Unternehmen
 *************************************/
.havi-history {display:flex;margin-top:7vh;}

/* h6 temp horizontal spacer ------- */
#zertifikate h2 {margin-bottom:7vh;}
.havi-history h6 {width:20vw;}

#team p { font-size: 1rem; }
#team p.name {font-size:1.26rem; margin-bottom: 0;font-weight:400;}
ul.team {margin-bottom:2vh; justify-content:center;}
ul.team:last-child {margin-bottom:0}
ul.team li { margin-top:7vh; }
ul.team img {margin-bottom:3vh;}
#ansprechpartner img {margin-bottom: 3vh;margin-top: 7vh;}
#partner {padding-top: 20vh;padding-bottom:20vh;color: #ffffff; background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.1)), url(img/bg-partner.jpg); background-repeat: no-repeat; background-size: cover;}
.zertifikat {padding: 50px;margin-bottom: 30px;border: 20px solid #f4f5f9;display: flex;}
.zertifikat img {min-width:149px}
.zertifikat img:nth-child(1) {margin-right: 3vw;}
.zertifikat p{color:#000000;}
.datenschutz-box {background-color:#fff;padding:4%;width:80%;margin: 10vh auto 10vh auto;}

/**************************************
 * Sections: News
 *************************************/
.news h1 {margin-bottom: 1.1rem;font-size: 4rem;line-height: 100%;font-weight: 600;letter-spacing: -0.2rem;}
.news h3 {font-size:0.93rem; font-weight:600;margin-bottom:12px;color:#ca2a08;letter-spacing:0.05rem}
/*.news h2, h2 a {color:#000000;font-size:2.0rem; font-weight:600;letter-spacing: -0.1rem;margin-bottom:15px;}
.news p {font-size:1.3rem;line-height:155%; font-weight:100;}*/
.news-flexcontainer {display: flex; flex-wrap: nowrap;}
.news-text-content {padding-top:10px;}
.news picture {min-width: 25%;margin-right:10px;}

@media (max-width: 767px) {
.news-flexcontainer {display: flex; flex-wrap: wrap;}
.news picture {margin-bottom:25px;}	
}


/**************************************
 * Sections: Kontakt
 *************************************/
iframe {height:40vh; width: 100%; border: none;}/* height of google map */
#kontaktformular { background-color: #f3f5f9; }
#kontaktformular h2 { margin-bottom: 2.8rem; }
#kontaktformular #contact { max-width: 800px; margin-left: auto; margin-right: auto; }

/**************************************
 * Footer
 *************************************/
.footer-kontakt-form {} 
#footer-content { padding: 7vh 10vw; background-color: #292a36; color: #ffffff; font-size: 0.9rem; }
#footer-content p { font-size: 0.9rem; }
#footer-content a { color: #ffffff; text-decoration: underline; }
#footer-content a:hover,
#footer-content a:active,
#footer-content a:focus { color: #ffffff; text-decoration: underline; }
#footer-content .footer-menu { padding: 0px; margin: 0px 0px 40px 0px; list-style: none; }
#footer-content .footer-menu a { color: #ffffff; text-decoration: none; font-size: 0.9rem; }
#footer-content .footer-menu a:hover,
#footer-content .footer-menu a:active,
#footer-content .footer-menu a:focus{ color: #ffffff; text-decoration: none; }
#footer-content .socialicons { padding: 0px; margin: 0px 0px 40px 0px; }
#footer-bottom { padding: 30px 0px 10px 0px; background-color: #f4f5f9; text-align: center; font-size: 0.9rem; }
#footer-bottom p { font-size: 0.9rem; }
/* ---- hide twitter logo & link ------- */
#footer-content figure {display: none;}

/**************************************
 * Breakpoints
 *************************************/

@media (max-width: 1199px) {
	.header-text h1 { font-size: 1.3rem; line-height: 1.7rem; }
	.header-text p { font-size: 1rem; }
	.slideshow-control a { font-size: 22px; line-height: 32px; }
	.slideshow-control a.slideshow-play { font-size: 18px; }
}

@media (max-width: 991px) {
	.navbar-expand-lg .navbar-collapse { padding: 0; }
	
	.slideshow-text .inner { padding-left: 5vw; flex-basis: 70vw; }
	.slideshow-text .inner h2 { font-size: 1.4rem; line-height: 1.9rem; }
	.slideshow-text .inner p { font-size: 0.9rem; line-height: 1.4rem; }
	.slideshow-control { left: 5vw; top: 5vh; }
	
	/* transform vertical tabmenu to horizontal */
	.tabmenu.vertical { display: block; }
	.tabmenu.vertical nav { padding: 3vh 0 0 0; border-bottom: 1px solid #cccccc; border-left: none; flex-basis: 100%; }
	.tabmenu.vertical nav .nav-tabs .nav-link { padding: 0.8rem 0 0.7rem 0; margin: 0 1.3rem 0 0; border-bottom: 5px solid #ffffff; border-left: none; flex-basis: auto; }
	.tabmenu.vertical nav .nav-tabs .nav-link.active { border-bottom: 5px solid #369794; border-left: none; }
	.tabmenu.vertical .tab-content { padding: 3vh 0 3vh 0; flex-basis: 100%; }
	
	.parallax-container { height: auto; }
	.parallax-text { position: relative; left: auto; top: auto; -webkit-transform: none; -ms-transform: none; transform: none; }
	.parallax-window { display: none; }
	
	.intro { padding: 0 5vw 5vh 5vw; }
	
	#data-quality-text { padding-bottom: 10vh; }
	#data-quality-images { padding-left: 0; }
	/* benefits */
	.benefits {flex-wrap:wrap;}
	.benefits ul { margin-right: 0; }
	.benefits li { padding: 0.6rem; font-size: 1rem; }
	
	#case-study figure { margin-top: 30px; }
	
	.tabmenu.vertical,
	#service-tabs { display: none; }
}

@media (max-width: 767px) {
	#\32 5J-banner { display:none;}
	h1 { color: white; }
	.hspace-1, .hspace-2, .hspace-3 { padding-left: 15px; padding-right: 15px; }
	
	.header-text { padding-top: 4vh; padding-bottom: 3vh; }
	.header-text h1 { font-size: 1.6rem; line-height: 2.2rem; }
	
	.slideshow-text { padding-top: 20px; position: relative; left: auto; top: auto; background-color: #369794; }
	.slideshow-text h2,
	.slideshow-text p,
	.slideshow-text a,
	.slideshow-text a:hover,
	.slideshow-text a:active,
	.slideshow-text a:focus { color: #ffffff; }
	.slideshow-text .inner { padding-bottom: 20px; flex-basis: 90vw; }
	.slideshow-control { left: 5vw; right: auto; top: 5vh; }
	
	/* center sections-content */
	#data-quality-text { padding-left: 15px; padding-right: 15px; text-align: center; }
	#case-study { text-align: center; }
	#case-study figure { margin: 30px auto 15px auto; }
	#havi-statement .statement { font-size: 1.1em; }
	#cta #cta-boxes .inner { text-align: center; }
	
	.zertifikat { display: block; }
	.zertifikat > a { display: block; text-align: center; }
	.zertifikat > p { margin-top: 20px; }
	
	.havi-history { display: block; }
	
	#cta-HAVI img { margin: 0px auto 20px auto; display: block; }
	
	.datenschutz-box img { margin-top: 20px; }
	
	footer { text-align: center; }
}

@media (max-width: 575px) {
	h1 { margin-bottom: 0.6rem; font-size: 1.4rem; line-height: 1.8rem;color: white; }
	h2 { margin-bottom: 0.6rem; font-size: 1.4rem; line-height: 1.8rem; }
	h2.bigger { font-size: 1.6rem; }
	h3 { font-size: 1.4rem; }
	h4 { font-size: 1rem; }
	p, ul, li, figcaption, .benefits li { font-size: 0.9rem; }
	p.bigger { font-size: 1rem; line-height: 1.6rem; }
	#footer-bottom p { font-size: 0.8rem; }
	
	.header-text h1 { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
	
	.slideshow-text .inner { padding-left: 15px; flex-basis: 90vw; }
	.slideshow-control { left: 15px; }
}

@media (min-width: 576px) {
	
}

@media (min-width: 768px) { 
	.slideshow-text .inner { padding-left: 10vw; flex-basis: 50vw; }
	.slideshow-control { left: 10vw; top: 5vh; }
	
	/* HAVI Ansprechpartner */
	#cta-HAVI { display:flex;justify-content:center;align-items:center; }
	#cta-HAVI p { flex-basis: 50%; padding-left: 5vw; }
}

@media (min-width: 992px) {
	.navbar-expand-lg .navbar-nav .nav-item { font-size: 0.8em; padding: 0 0.6em 0 0.6em; }
	#toplink { font-size: 0.8em; }
	
	.parallax-text h2 { color: #ffffff; }
}

@media (min-width: 1200px) {
	.navbar-expand-lg .navbar-nav .nav-item { font-size: 0.9em; padding: 0 0.8em 0 0.8em; }
	#toplink { font-size: 0.9em; }
	
	.slideshow-control { left: 10vw; top: 10vh; }
	.slideshow-control a { font-size: 30px; line-height: 40px; }
	.slideshow-control a.slideshow-play { font-size: 26px; }
	
	#cta #cta-boxes .col-xl-3 { max-width: 50%; flex-basis: 50%; } /* 2 boxen nebeneinander statt 4 */
	
	#teaser .inner { padding: 2rem; }
}

@media (min-width: 1400px) {
	.navbar-expand-lg { padding-left: 10vw; padding-right: 10vw; }
	
	#cta #cta-boxes .col-xl-3 { max-width: 25%; flex-basis: 25%; } /* ab hier 4 boxen nebeneinander (default) */
}

@media (min-width: 1600px) {
	.header-text { padding-left: 13vw; }
	
	#data-quality-images .col-xl-6 { max-width: 33.333333%; flex-basis: 33.333333%; } /* auf großen Bildschirmen 3 Elemente nebeneinander statt 2 */
}

/****************************
* HAVI personalized elements
****************************/

.h3forcedtoh4 { font-size: 0.8rem; line-height: 1.4rem; font-weight: 800; text-align: center;
		padding: 8px 0px 8px 0px; margin: 8px 0px 8px 0px; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; text-transform: uppercase; }

#logo-carousel-accessible-section{ /* hide the simple list from visual browsers, but show it to screenreaders */
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

:focus /* override focus from webkit */
{
    outline: #369794 auto 4px;
    outline-color: #369794;
    outline-style: auto;
    outline-width: 4px;
    background-color:rgba(0, 0, 0, 0.2);
}

#logo-carousel-havi{
	text-align: center;
	margin: auto;
}

.carousel-havi ul{
	list-style-type: none;
	margin: auto;
	padding: 0;
}

.carousel-havi li{
	display: inline;
}