@charset "utf-8";
/* CSS Document */
nav#mainNav ul li a.mobileDrop{
    display: none;
}
#burgerButton{
    display:none;   
}

/* Burger-Item */
#burgerButton{
    position:absolute;
    right:20px;
    top:10px;
    line-height:30px;      
    cursor: pointer;
    font-size:1.4em;
    float:left;
    width:48px;
    display:none;
    border-radius: 7px;
    padding:4px;
}
#nav-icon {
  display:inline-block;
  vertical-align:middle;
  width: 40px;
  height: 30px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  margin-right:20px;
}
#nav-icon span {
  display: block;
  position: absolute;
  height:6px;
  width: 100%;
  background: #00afff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
  top: 11px;
}

#nav-icon span:nth-child(4) {
  top: 23px;
}

#nav-icon.open span:nth-child(1) {
  top: 11px;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
  top: 10px;
  width: 0%;
  left: 50%;
}
/* BURGER ENDE */



@media only screen 
and (max-width : 1400px) {
    .websiteSize{
        width:960px;
    }
    body{
        font-size:1em;
    }
    footer address{
        font-size:0.8em;
    }
    nav#footernav{
        padding-left:40px;
    }
    #slick, #slick .slide{
        height:770px;
    }
    a.filterIcon{
        height:160px;
        font-size:1.2em;
    }

    a.boxLink{
        width:32%;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0.6em;
    }
    
    a.boxLink:nth-of-type(3n-1){
        margin-left: 1.5%;
        margin-right: 1.5%;
    }    
    
    
    .bilderleisteUnten img{
        height: 239px;
    }
    .gebietsInfo{
        width:250px;
        height: 250px;
    }
    .bilderleisteUntenImg, .bilderleisteUnten{
        height: 250px;
    }

    .headerFlex div h1{
        font-size:1.9em;
    }
    .textBlockWrapper a.textBlockButton{
        width:20%;
    }
    
    .iconsWrapper a .imgWrapper{
        height: auto;
    }
        .flip-card{
        width:30%;
    }

}
@media only screen 
and (max-width : 990px) {
    .websiteSize{
        width:750px;
    }
        .flip-card{
        width:47%;
    }
    
    .textBlockWrapper a.textBlockButton{
        width:auto;
        min-width:30%;
        margin-top: 0.4em;
    }
    body{
        font-size:1em;
    }
    .fullScreenBackgroundPage{
        padding-left:10%;
        padding-right: 10%;
    }
    .page .bildergalerie, .page .smallColumn, .bilderleisteUnten img:first-child{
        display: none;
    }
    .page .bigColumn{
        width:100%;
    }
    nav#footernav, footer address{
        width:100%;
        text-align: center;
    }
    #innerfooter{
        flex-wrap: wrap !important;
    }
    nav#topNav{
        margin-left: 5px;
    }
    #slick .slide .slickOverlay{
        padding-left:5%;
        padding-right: 5%;
    }
    .gebietsInfo{
        width:200px;
        height: auto !important;
    }
    .standorteKarte h1{
        font-size:1.8em;
        top:10px;
        left: 10px;
    }
    footer{
        position: relative;
    }
    .bilderleisteUntenImg, .bilderleisteUnten{
        height: 200px;
    }
    
    .product .bildergalerie{
        display: block !important;
        width:100%;
    }
    .product .bildergalerie img{
        width:100%;
        height: auto;
    }
    .product{
        margin-bottom:6em;
    }
    .product article{
        order: 1;
    }
    .product .bildergalerie{
        order: 2;
    }
    
    .headerFlex div h1{
        font-size:1.6em;
    }
    
    .iconsWrapper{
        width:100%;
        margin-left: 0px;
    }
    .textBlockWrapper a.textBlockButton{
        min-width:25%;
    }
    .bilderleiste{
        margin-left: 2%;
        margin-right: 2%;
        width:100%;
    }
    .schnellsucheKarriere{
        width:60%;
    }
    .blueTextBlock{
        width:100%;
    }
    .textBlockMitBlockRechts{
        width:100%;
        margin-bottom: 2em;
    }
    
    a.zertifikatItem{
         width:22%;   
    }
    
    .marginBottonElement{
        margin-bottom: 1em;
    }
}

@media only screen 
and (max-width : 760px) {
    .websiteSize{
        width:100%;
        padding-left:10px;
        padding-right: 10px;
        font-size:1.1em;
    
    }
    
    
    .teamItemWrapperFilter{
        width:48%;
    }
    
    .flip-card{
        width:100%;
    }
    .schnellsucheKarriere{
        width:100%;
        margin-left: 0px;
    }
    a.zertifikatItem{
        width:33%;
    }
    
    
    nav#topNav, nav#mainNav ul, .gebietsInfoEinfach{
        display: none;
    }
    .pagePaddingLeftRight{
        padding-left:0px;
        padding-right: 0px;
    }
    #slick .slide .slickOverlay{
        font-size:0.9em;
        bottom:0px;    
        padding-bottom:0px;
        padding-top:10px;
    }
    
    #slick, #slick .slide{
        height: 300px;
    }
    #cebonalogo{
        width:80%;
        max-width:300px;
        margin-left: 5%;
    }
    a.filterIcon{
        width:50%;
        height:auto;
        margin-bottom: 1em;
        font-size:1.2em;
    }
    a.boxLink{
        width:47.5%;
        margin-bottom: 0.6em;
    }
    
    a.boxLink:nth-of-type(3n-1){
        margin-right: 0px;
        margin-left: 0px;
    }
    a.boxLink:nth-of-type(2n){
        margin-left: 2.5%;
    }
    
    .standorteKarte h1{
        font-size:1.3em;
        top:10px;
        left: 10px;
    }
    article h1{
        font-size:2em;
    }
    nav#mainNav{
        min-height: 30px;
    }
    
    #burgerButton{
        display: block !important;
    }    
    nav#mainNav ul li, ul#respLangNav ul li{
        font-size:1.4em;
        margin-bottom: 1em;
    }
    nav#mainNav ul li ul, ul#respLangNav ul li ul{
        display: none;
        position: relative;
       padding-left:20px;
    }
    nav#mainNav ul li:hover ul{
        display: none;
    }
    nav#mainNav ul li.item-has-children>a{

        
    }
    nav#mainNav li.item-has-children{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    a.mobileLi{
        background-image: none !important;
        width: auto !important;
        flex-grow: 2;
    }
    nav#mainNav ul li a.mobileDrop{
        display: block;
        width:auto !important;
        flex-grow: 1;
        cursor: pointer;
    }
    nav#mainNav ul, nav#topNav ul{
        padding-right: 0px;
    }
    nav#mainNav ul li ul li, ul#respLangNav ul li ul li{
         font-size:0.9em;

    }
    nav#topNav ul li ul, nav#mainNav ul li ul{
        top:inherit;
        left: inherit;
        background-color: #00afff;
    }
    nav#mainNav ul{
        padding-top:2em;
        padding-bottom: 1em;
    }
    nav#mainNav ul li:hover{
        background-color: transparent;    
    }
    
    
    ul#respLangNav{
        border-top:2px solid #fff;
        display: none !important;
    } 
    ul#respLangNav li{

    }  
    a#sprachwahl{
        font-size:0em;
    }
    ul#respLangNav li ul li{
    }
    .rex-article-4{
        background-image: none;
    }

    .gebietsInfoEinfach{
        display: none !important;
    }
    .gebietsInfoDownunder{
        width:100% !important;
            
    }
    ul#respLangNav{
        
    }    
    
    
    header{
        position: relative;
    }
    #contentWrapper{
        padding-top:1em;
    }
    
    .iconsWrapper a{
        width:49%;
        margin-bottom: 0.5em;
    }
    .flex_oneLine{
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        display: block;
    }
    .textBlockWrapper a.textBlockButton{
        display: inline-block;
    }
    .flex_oneLine>div{
        width:100%;
    }
    .flex_oneLine>img{
        width:100%;
        height: auto;
    }
    .marginObject{
        margin-left: 2%;
        margin-right: 2%;
    }
    .iconsWrapper {
        display: flex !important;
        justify-content: space-between;
    }
    
    .bilderleiste img, .bilderleiste img:first-child, .bilderleiste.breiteBilderleiste img{
        margin-bottom: 0.5em;
        width:48%;
        margin-left: 1%;
        margin-right: 1%;
    }


    .bilderleiste{
        margin-right: 0px;
        margin-left: 0px;
    }
    .teamDetailImg{
        margin-right: 0%;
    }
    .schnellsucheKarriere .flex_oneLine{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: stretch;
    }
    .blueTextBlock{
        margin-bottom: 1em;
    }   
    .fullscreenimg{
        width:100% !important;
    }
}
@media only screen 
and (max-width : 550px) {
    
    
    .marginBottonElement{
        margin-bottom: 1em;
    }

    .zweispaltig{
        column-count: 1;
    }
    .gebietsInfoDownunder{
        display: block;
    }
    .bilderleisteUntenImg, .bilderleisteUnten{
        height: 180px;
    }
    .bilderleisteUntenImg{
        width:50%;
    }
    .bilderleisteUnten .firstImage{
        display: none;
    }
    
    a.zertifikatItem{
        width:70%;
    }
    .iconsWrapper a{
        font-size:1.1em;
    }
    a.cebonaJobHeader h3{
        display: block;
    }
    a.coloredButton{
        white-space: nowrap;
        width:100%;
        display: inline-block;
        margin-top: 1em;
    }
    nav#footernav, footer address{
        padding-left: 5px;
        padding-right: 5px;
    }
    
    h1,h2,h3{
         hyphens:auto;
    }
}

@media only screen 
and (max-width : 400px) {


    .iconsWrapper a{
        font-size:0.7em;
        min-height: 140px;
    }
    a.zertifikatItem{
        width:100%;
    }
    .bilderleiste img, .bilderleiste img:first-child, .bilderleiste img, .bilderleiste img:first-child, .bilderleiste.breiteBilderleiste img{
        /*
        margin-bottom: 0.5em;
        width:100%;
        margin-left: 0%;
        margin-right: 0%;
        */
    }
   
}