@charset "utf-8";
/* CSS Document */
html{
    scroll-behavior: smooth;
}

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('/resources//fonts/roboto-v19-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('/resources//fonts/roboto-v19-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/resources//fonts/roboto-v19-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/resources//fonts/roboto-v19-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/resources//fonts/roboto-v19-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/resources//fonts/roboto-v19-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/resources//fonts/roboto-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('/resources//fonts/roboto-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/resources//fonts/roboto-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/resources//fonts/roboto-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/resources//fonts/roboto-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/resources//fonts/roboto-v19-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('/resources//fonts/roboto-v19-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('/resources//fonts/roboto-v19-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/resources//fonts/roboto-v19-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('/resources//fonts/roboto-v19-latin-500.woff') format('woff'), /* Modern Browsers */
       url('/resources//fonts/roboto-v19-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/resources//fonts/roboto-v19-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('/resources//fonts/roboto-v19-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('/resources//fonts/roboto-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/resources//fonts/roboto-v19-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/resources//fonts/roboto-v19-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/resources//fonts/roboto-v19-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/resources//fonts/roboto-v19-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

*{
    box-sizing:border-box;   
}
a:active, a:focus {outline: none;}
a{
    color:#00afff;
}
body{
    font-family: 'Roboto', Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
    font-style: normal;
    font-size:1.1em;
    color:#575757;
}
p{
    margin-top: 0px;
    margin-bottom: 1em;
}
.websiteSize{
    width:1300px;
    margin-left:auto;
    margin-right:auto;   
}
header{
     position:fixed;
     top:0px;
     left:0px;
     width:100%;
     z-index:9999;
     background-color:#fff; 
     border-bottom:2px solid #fff;
}

.teamWrapperGrid{
    width:100%; 
    display: flex; 
    flex-wrap: wrap; 
    margin-top: 2em; 
    justify-content: flex-start
}
.flex_oneLine{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;   
}
.flex_wrap{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;   
}

.pagePaddingLeftRight{
    padding-left:60px;
    padding-right: 60px;
}

#innerheader{
    align-items:flex-end;
    padding-bottom:15px;
    position: relative;
    padding-top:11px;
}
#cebonalogo{
    width:250px;
    height:auto;
    margin-right:50px;
    margin-left: 6px;
}
.negativeMarginTopObject{
    margin-top:-4em;
}
nav#topNav{
    margin-left:66px; 
    height: auto;
}
nav#topNav a{
    color:#00afff;
    text-decoration:none;
    margin-right:40px;
}

nav#topNav ul li ul, nav#mainNav ul li ul{ 
    display: none;
    position: absolute;
    flex-wrap:wrap;
    z-index: 9999999;
    background-color: #00afff;
    background-color: rgba(153,163,196,0.9);
    padding-top:1em;
    min-width: 100%;
    left:-0px;
    top:36px;
    padding-right: 0px;

}
nav#mainNav>ul li, nav#topNav>ul li{
    margin-bottom: 0px;
}

nav#mainNav ul li:hover{
    background-color: #99a3c4;    
}
nav#mainNav ul li.item-has-children a{
    background-image:url(../img/pfeilunten_invers.png);
    background-size: auto 30%;
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 30px;
}
nav#mainNav ul li.item-has-children{
    padding-right: 20px;
}
nav#topNav ul li:hover ul, nav#mainNav ul li:hover ul{
    display: block;
}
nav#topNav ul li ul li a, nav#mainNav ul li ul li a{
    background-image: none !important;
    width:100%;
    color:#fff;
    padding-right: 0px;
}
nav#topNav ul li ul li, nav#mainNav ul li ul li{
    width:100%;
}
nav#mainNav{
    background-color:#00afff;
}
nav#mainNav ul, nav#topNav ul{
    margin:0px;
    padding:0px;
    list-style:none;
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-end;
    padding-right:50px;
    line-height: 36px;
}
nav#topNav ul{
     line-height: 0px;   
}
nav#mainNav li{
    position: relative;
}

nav#mainNav ul li a{
    display: block;
    padding-left:22px;
    padding-right: 22px;
}

nav#mainNav li ul li{
    margin-left:0px;
    margin-bottom: 0.8em;
}
nav#mainNav li ul li>a{
    line-height: 1.1em;
    padding-top:0.2em;
    padding-bottom: 0.2em;
}

nav#mainNav li a{
    display:block;
    width:100%;   
    color:#fff;
    text-decoration:none;
}
#slick{
    height:770px;
    width:100%;
    margin-bottom:0em;
}
#slick .slide{
    height:72vh;
    height:770px;
    background-size:cover;
    background-position: center center;
    position:relative;
}
#slick .slick-arrow{
    display:none !important;   
}

#slick .slide .slickOverlay{
    position:absolute;
    bottom:40px;
    left:0px;
    width:100%;
    background-color:rgba(0,0,0,0.3);
    padding-top:38px;
    padding-bottom:20px; 
    color:#fff;
    padding-left:32%;
    line-height:normal;
    padding-right:40px;
    font-size:1.3em;
}
#slick .slide .slickOverlay h1{
    margin:0px;
    margin-bottom:0.4em;
    font-size:1.9em;
    font-weight:normal;
    color:#fff;
}

footer{
    position:fixed;   
    width:100%;
    left:0px;
    bottom:0px;
}
footer a{
    color:#fff;
}

footer #innerfooter{
    background-color:#fff;
    line-height:36px;
}
nav#footernav{
    padding-left:94px;
    width:31.6%;
    color:#00afff;
}
nav#footernav a{
    color:#00afff;
    text-decoration:none;
}
footer address{
    width:68.4%;
    background-color:#00afff;
    display:block;
    font-style:normal;
    text-align:right; 
    color:#fff;
    font-size:0.8em;  
    padding-right:50px;
    padding-left:24px;
}
.page{
}

.page .bigColumn{
    width:68.4%;   
    
}
.page .smallColumn{
    width:31.6%;  
}
.page .bildergalerie{
    background-color:#00afff;  
    position: relative;
}
.page .bildergalerie img{
    border-top:2px solid #fff;
    width:100%;
    height:auto;
}
.page .bildergalerie img:last-child{
    border-bottom:2px solid #fff;
}
article.textBlock{
    width:100%;
}
.page .content{
    padding-top:110px;
    padding-bottom:60px;
    overflow: auto;
    align-items:flex-start;
    align-content:flex-start;
}
#contentWrapper{
    padding-bottom:2.2em;   
    padding-top:171px;
}


.fullscreenimg{
    width:100%;
    height: auto;
    margin-bottom: 1em;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    align-self: flex-start;
}
.wholeRow{
    border-top:2px solid #fff;
    width:100%;
    clear: both;
}


a.boxLink{
    display: block;
    width:23.5%;
    background-color: #00afff;
    padding:8px;
    text-align: center;
    text-decoration: none;
    color: #21377e;
    margin-bottom: 0.8em;
    height:180px;
    margin-right: 1.5%;
}
a.boxLink:nth-of-type(4n){
    margin-right: 0px;
}

a.boxLink h3{
    margin: 0px;
    padding: 0px;
    margin-bottom: 0.4em;
    font-size:1.1em;
    font-weight: bold;
}
a.boxLink p{
    font-size:0.9em;
}

.bilderleisteUnten{
    vertical-align: top;
    display: flex;
    flex-wrap: nowrap;
    height: 324px;
    box-sizing: content-box;    
}
.bilderleisteUntenImg{
    height: 324px;
    width:34.2%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    box-sizing: content-box;    
    border-left:2px solid #fff;
}

.bilderleisteUnten .firstImage{
    width:31.6%;
    border-left: none;
}

.bilderleisteUnten img{
    height: 324px;
    width: auto;
    border-left:5px solid #fff;
}

.bilderleisteUnten img:first-child{
    width:31.6%;
    height: auto;
    border-left: none;
}
article.fullscreenArticle{
    width:100%;
    padding-top:80px;
    
}
.keinPadding {
    padding-left: 10px !important;
    padding-top:40px !important;
}
.noPaddingTop{
    padding-top:10px !important;
    padding-bottom: 10px !important;
}


.downloadWrapper {

    border-top: 2px solid #00afff;
    padding-top: 10px;
    padding-bottom: 45px;
    overflow: auto;
    font-weight: bold;

}
.downloadWrapper .text {

    float: left;

}
.downloadWrapper .downloads {

    float: right;
    text-align: right;

}
.downloadWrapper .downloads a {

    display: inline-block;
    text-align: center;
    color: #000;
    text-decoration: none;
    font-weight: normal;
    margin-left: 10px;

}
.serviceTable{
    margin-top: 40px;
    margin-bottom: 40px;
}
.serviceTable th, td{
    text-align: left;
    border-bottom: 1px solid #000;
    line-height: 1.8em;
}
.serviceTable td:first-child{
    color:#21377e;
    font-weight: bold;
}

.fullScreenBackgroundPage{
    background-color: #00afff;
    padding-top:60px;
    paddintg-bottom:60px;
    padding-left:200px;
    padding-right:200px;
    padding-bottom:60px;
    color:#fff;
}
.fullScreenBackgroundPage a{
    color:#fff;
}
.fullScreenBackgroundPage input[type=text], .fullScreenBackgroundPage textarea{
    width:100%;
    margin-bottom: 1em;
    line-height: 1.8em;
    padding-left:10px;
}


a.filterIcon{
    width:25%;
    height: 220px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    display: block;
    color:#00afff;
    text-align: center;
    text-decoration: none;
    font-size:1.4em;
    color:#21377e !important;
}
a.filterIcon img{
    width:70%;
    height: auto;
}
.product h1{
    font-weight: bold;
    margin-bottom: 0em;
    margin-top: 0.6em;
}
.product h2{
    font-size:2em;
    font-weight: normal;
    color:#21377e;
}
.product{
    order: 2;
}
.priority{
    order:1;
}
ul{
    list-style-image: url(../img/bulletpoint.png);
    padding-left: 28px;
}
ul li{
    margin-bottom: 0.6em;
}
.filterIcons img{
    height: 60px;
    width: auto;
    margin-left: 10px;
    margin-top: 1em;
}
.standorteKarte{
    position: relative;
    background-color: #e9ebf2;
    border-top:2px solid #fff;
}
.standorteKarte h1{
    position: absolute;
    left:40px;
    top:60px;
}
.gebietsInfo h2, .gebietsInfoDownunder h2{
    color:#00afff;
    font-size:1.2em;
}
.gebietsInfo{
    position: absolute;
    background-color:#00afff;
    width:300px;
    min-height: 250px;
    left:3%;
    top:40%;
    padding:10px;
    color:#fff;
    text-align: center;
    font-size:0.9em;
    display: none;
}
.gebietsInfoEinfach{
    display: block !important;
}
.gebietsInfo a, .gebietsInfoDownunder a{
    color:#fff;
}
.gebietsInfoDownunder{
    display: none;
    background-color:#00afff;
    padding:10px;
    color:#fff;
    text-align: center;
}
.standorteKarte #karte{
    width:100%;
    height: auto;
}


.gebietPunkt{
    position: absolute;
    display: block;
    width:15px;
    height: 15px;
    background-color: #00afff;
    border-radius: 15px;
    cursor: pointer;
}
.gebietPunkt:hover{
    background-color: #dc5a28;
}

.imgTrademark{
    position: absolute;
    color:#fff;
    font-size:0.6em;
    z-index: 9999;
    bottom:8px;
    text-align: center;
    width:100%;
}
.gebietsInfoDownunder{
    display: none;
}
.product .bildergalerie img{
    border-top:0px !important;
}
.hideMe{
    display: none !important;
}

.searchHighlight{
    background-color: #00ff00;
}

nav#mainNav ul#respLangNav{
    display: none;
}



/* NEU */

.marginBottonElement{
    margin-bottom: 4em;
}

.headerFlex{
    background-color: #bcc3d8;
    width:100%;
}
.headerFlex img{
    width:45%;
    height: auto;
}
.headerFlex div{
    width: 55%;
    display: flex;
    align-items: center;
    padding-left:5%;
    padding-right: 2%;
}
.headerFlex div h1{
    color:#fff;
    font-size:2.3em;
    hyphens: auto;
    font-weight: normal;
}
.headerFlex.textUndBild div{
    order:1;
}
.headerFlex.textUndBild img{
    order:2;
}
.iconsWrapper{
    width:68%;
    margin-left: 32%;
}
.iconsWrapper a{
    text-align: center;
    background-color: #00afff;
    color:#fff;
    text-decoration: none;
    font-size:1.4em;
    font-weight: bold;
    width:23%;
    text-transform: uppercase;
    padding-bottom: 0.5em;
}

.iconsWrapper a .imgWrapper{

    padding-left:10%;
    padding-right: 10%;
    padding-top:10%;
    height: 160px;
}
.iconsWrapper a img{
    width:100%;
    height: auto;
}
.marginObject{
    margin-left: 3%;
    margin-right: 3%;
}
.textBlockWrapper{
        align-items: flex-start;
    width: 100%;
}
.textBlockWrapper a.textBlockButton, a.coloredButton{
    width:15%;
    color:#fff;
    text-decoration: none;
    background-color: #00afff;
    padding:2%;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}
a.coloredButton{
    width: auto;
    margin-top: 4em;
}
.textBlock{
    width:70%;
}
.textBlock p{
     margin:0em;   
}

.zweispaltig{
  column-count: 2;
column-gap: 10%;}

.textBlockMitBlockRechts{
    width:60%;
}
.bilderleiste{
    width:85%;
    justify-content:flex-start;
    align-items: flex-start !important;

}
.bilderleiste img{
    width:24%;
    height: auto;
    margin-left: 1%;
    margin-right: 1%;
}
.bilderleiste img:first-child{
     margin-left: 0px;
}
.bilderleiste img:last-child{
     margin-right: 0px;
}
.blueTextBlock{
    width:30%;
    background-color: #bcc3d8;
    padding:20px;
    color:#fff;
}
.bilderLeisteRechts{
    margin-top:1em;
    width:30%;
}

.bilderLeisteRechts img{
    width:100%;
    height: auto;
    margin-bottom: 2em;
}
.blueTextBlock a{
    color:#fff;
    font-weight: bold;
}

h1, h2, h3{
    margin-top: 0px;
}
h1{
    margin-top: 0.8em;
    line-height: 1.2em;
}
h2{
    margin-bottom: 0.2em;
    margin-top: 0.4em;
}
#formWrapper{
    width:70%;
}
#formWrapper input[type=text], #formWrapper input[type=email], textarea{
     width:100%;   
    border:2px solid #bcc3d8;
    margin-bottom: 1em;
    line-height: 1.4em;
}
#yform-formular-dse{
    margin-top: 0px;
    margin-bottom: 1em;
}
#formWrapper button{
    background-color: #00afff;
    border:none;
    color:#fff;
    line-height: 1.8em;
    margin-bottom: 3em;
}

.team-card{
  background-color: transparent;
  width: 22%;
  height: 200px;
  border: 1px solid #f1f1f1;
    margin-bottom: 3em;
    margin-right: 2%;
}

 /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 22%;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; 
    margin-bottom: 3em;
    margin-right: 2%;
    transition: 1s;

}
.flip-card img, .team-card img{
     width:100%;
    height: auto;
}
/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: white;
  color: #575757;
    border:1px solid #575757;
  transform: rotateY(180deg);
} 
.flip-card-back{
    padding-top:0.8em;
    padding-left: 3%;
    padding-right: 3%;
}
.team-card .back{
    padding-top:0.8em;
    padding-left: 3%;
    padding-right: 3%;
      background-color: white;
      color: #575757;
    border:1px solid #575757;
}
a.cebonaJobHeader{
    background-image:  url(../img/pfeilrechts.png); 
    padding-left:30px;
    background-size: 20px auto;
    background-repeat: no-repeat;
    background-position: left center;
    display: block;
    margin-bottom: 1em;
    color:#575757;
    text-decoration: none;
}
a.cebonaJobHeader h3{
    display: inline-block;
    width:auto;
    margin-bottom: 0px;
    font-weight: normal;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
a.cebonaJobHeader h3 strong{
    margin-right: 5px;   
}
.cebonaJobHeader{
    
}

.flip-card{
    transition: 1s;
}
.teamItem{
    font-size:0.9em;
}
@keyframes teamKf {
   0%   {  transform:scale(1)    }
   99%  { transform: scale(0); }
   100%  { transform: scale(0); width:0%; height:0%; display: none;}
}

.hiddenItem{
    display:none !important;
}
.teamButton{
    cursor: pointer;
}
.teamButton.selected{
    font-weight: bold;
}


a.anchor{
    position: absolute;
    top:-100px;
}
.slick-initialized .slick-slide{
    display: flex !important
}
.breiteBilderleiste{
    width:100%;
}
.bilderleiste.breiteBilderleiste img{
    width:22%;
}

.schnellsucheKarriere{
    margin-left: 40px;
    width:30%;
    text-align: right;
}
.schnellsucheKarriere h3{
    background-color: #bcc3d8;
    font-size:1.2em;
    margin: 0px;
    margin-bottom: 0.3em;
    padding-top:1em;
    padding-bottom:1em;
    text-align: center;
    text-transform: uppercase;
    color:#fff;
    
}
.schnellsucheKarriere input, .schnellsucheKarriere select{
    width:100%;
    margin-bottom: 0.3em;
    border: 1px solid #bcc3d8;
    line-height: 1.3em;
    text-align: right;
    padding-right: 5%;
    color:#575757;
    font-weight: normal;
}

.schnellsucheKarriere .flex_oneLine  input, .schnellsucheKarriere  .flex_oneLine  select{
    width:48%;
}

.schnellsucheKarriere select option, .schnellsucheSelect, .schnellsucheSelect option{
    font-weight: 300;
    font-style: normal;
}
.schnellsucheKarriere button, form.search_it-form button{
    color:#fff;
    background-color: #00afff;
    width: 48%;
    text-align: center;
    border: none;
    margin-top: 1em;
    text-transform: uppercase;
    font-size:1em;
    font-weight: bold;
    padding:5px;
}
form.search_it-form button{
    width: auto;
    height: auto;
    padding-top:0.3em;
    margin-top: 0px;
    padding-bottom: 0.3em;
}
form.search_it-form input{
    padding-top:0.6em;
    padding-bottom: 0.6em;
    padding-left:5px;
    min-width: 20%;
   
}
.schnellsucheKarriereBreit{
    width:40%;
}
.schnellsucheLinks{
    margin-left: 0px;
    width:60%;
    
}
a.zertifikatItem{
    width:15%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 4em;
    text-align: center;
    
}
a.zertifikatItem img{
    width:100%;
    height: auto;
}
article.textUndBildNebeneinander{
    margin-bottom:2em;
}
article .cLeftRow{
    width:60%;
}
article .cRightRow{
    width:35%;
}

.foundItem{
    font-weight: bold;
}

.teamFlipWrapper {
  background-color: transparent;
  width: 22%;
    height: auto;
    margin-bottom: 3em;
    margin-right: 2%;
    transition: 1s;
}

.teamFlipWrapper .flipcard-team{
    width:100%;
    height: 100%;
    background-color: #fff;
}
.teamFlipWrapper .flipcard-team .front{
    background-color: #fff;
}
.teamFlipWrapper .flipcard-team .back{
    background-color: #fff;
    padding-top:0.8em;
    padding-left: 3%;
    padding-right: 3%;
    color: #575757;
    border:1px solid #575757;
    overflow: hidden;
    
}
.teamFlipWrapper .flipcard-team .front img{
    width:100%;
    height: auto;
}

.teamDetail{
    width:100%; 
    margin-bottom: 2em; 
    background-color: #bcc3d8; 
    color:#fff; 
    display: none; 
    position: relative;
}
.teamDetailInner{
    padding:15px;
    width:33%;
    margin-right: 15px;
}

.teamDetailImg{
    width:35%;
    height: auto;
    margin-right: 15px;
}

.teamItemWrapperFilter{
    cursor: pointer;

    margin-bottom: 1.4em;
    margin-left: 2%;

}

.teamItemWrapperFilter{
    display: none;
    width:23%;
}

.teamItemWrapperVisible{
    display: block;
}


.teamElements{
    width: 102%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: -2%;
}
ul{
    margin-top: 0px;
}