/* ========================================
 * STYLE:   RESPONSIVE - MEDIA QUERIES
 * ========================================
 */

/* ------------------------------------
 *  RESPONSIVE
 * ------------------------------------  
 */

/*#header-wrap::after,
.menu_wrap:after {
    -webkit-filter: drop-shadow(0px 4px 2px rgba(0,0,0,0.1));
    filter: drop-shadow(0px 4px 2px rgba(0,0,0,0.1));
    }*/
    
/*#main-slider::after {
    -webkit-filter: drop-shadow(0px 4px 2px rgba(0,0,0,0.1));
    filter: drop-shadow(0px 4px 2px rgba(0,0,0,0.1));
    }*/
    
    
@media (max-width: 1140px) {
}


@media (max-width: 1024px) {
/*@media (max-width: 1140px) {*/
    
    /* ------------------------------------
     *  LAYOUT CONTAINER
     * ------------------------------------  
     */
    /*.container {width:960px;width:96rem;}  */
    .container {width:100%;} 
    /*#main-slider {max-height:420px;}*/
    
    /* ------------------------------------
     *  HEADER CONTAINER
     * ------------------------------------  
     */
    #header-wrap {/*min-height:140px;*/min-height:80px;width:100%;}
    /*#header-wrap::after, .menu_wrap::after {width:100%;}*/


    /* ------------------------------------
     *  ANIMATED LOGO
     * ------------------------------------  
     */
    #sitelogo {
        width:82px;
        /*width:8.2rem;*/
        height:54px;
        /*height:5.4rem;*/
        top:20px;
        /*top:2rem;*/
        }
    body.compositum #sitelogo {
        width:326px;
        /*width:32.6rem;*/
        height:50px;
        /*height:5rem;*/
        top:20px;
        /*top:2rem;*/
        }


    /* ------------------------------------
     *  SEARCH
     * ------------------------------------  
     */
    #openSearch, #openNav {top:20px;/*top:2rem;*/margin-right:5px;/*margin-right:0.5rem;*/}
    #openSearch span, #openNav span {display:none;}
    
    #openNav {margin-right:15px;/*margin-right:1.5rem;*/}
    #closeNav {top:20px;/*top:2rem;*/right:15px;/*right:1.5rem;*/}
        
        
    /* ------------------------------------
     *  SEARCH FORM
     * ------------------------------------  
     */
    .searchform {padding-top:20px;/*padding-top:2rem;*/}
    .searchform input.formsubmit, .searchform #closeSearch {top:20px;/*top:2rem;*/}
    

    /* ------------------------------------
     *  MAIN MENU
     * ------------------------------------  
     */
    .menu_wrap {/*top:8rem;*/top:80px;z-index:9999;}
    .menu_main {padding-top:60px;/*padding-top:6rem;*/}
    
    
    /* ------------------------------------
     *  REFERENCE SLIDER
     * ------------------------------------  
     */
    #main-slider {height:449px;}
    #main-slider img {width:1024px;height:auto;}
    #main-slider.sketch #sketchFont {background-size:1024px auto;}
    
    #main-slider .info-panel h2 {font-size: 28px;font-size: 2.8rem;}
    #main-slider .info-panel h3 {font-size: 24px;font-size: 2.4rem;}
    
    #main-slider .info-panel .sector, #main-slider .info-panel .cat, #main-slider .info-panel .tags {font-size: 14px;font-size: 1.4rem;}
    #main-slider a.button, a.bigBttn {font-size: 16px;font-size: 1.6rem;padding-right:16px;padding-left:16px;}
    #main-slider a.button::before {font-size:30px;font-size:3rem;}
    
    #main-slider .sequence-prev,
    #main-slider .sequence-next {bottom:35px;}
    #main-slider .sequence-prev {left:20px;}
    #main-slider .sequence-next {right:20px;}
    .sequence-pagination {bottom:50px;}
    
    
    /* ------------------------------------
     *  CONTENT TEXT
     * ------------------------------------  
     */
    /*.content-wrap .body-text.col50 {padding-bottom:0;}*/
    .content-wrap .col50 {width:48%;}
    .content-wrap .col50 img {width:100%;}
    /*.content-wrap .col50.rightcol {float:none;} */
    /*.content-wrap .col50  img {text-align:left;}*/
    
    
    /* ------------------------------------
     *  JOB PORTAL
     * ------------------------------------  
     */
    /* panel buttons */
    #career_bttns {position:relative;top:auto;right:auto;}
    #career_bttns .button {margin-left:0!important;margin-top:0!important;margin-bottom:20px!important;/*margin-bottom:2rem!important;*/}
    
    
    /* headline, cat */
    ol#job_list li.job_list_item .job_label {float:none;width:auto;border-radius: 7px 7px 0 0;}
    
    /* contents */    
    ol#job_list li.job_list_item .job_details {float:none;width:auto;border-radius:0 0 7px 7px;}
    
    /* ------------------------------------
     *  FOOTER
     * ------------------------------------  
     */
    #colophon #additionalinfo,
    #colophon #copyright,
    #colophon #routeplanner {padding-left:20px;padding-right:20px;/*padding-left:2rem;padding-right:2rem;*/}
    
    
    
}


@media (max-width: 768px) {
.references-wrap.medium .reference-single {margin-right:10px;margin-bottom:15px;}
    
    
    /* ------------------------------------
     *  CONTENT TEXT
     * ------------------------------------  
     */
    .content-wrap .body-text.col50 {padding-bottom:0;}
    .content-wrap .col50 {width:100%;float:none;}
    .content-wrap .col50.rightcol {float:none;} 
    .content-wrap .col50  img {text-align:left;}
    
    
    /* ------------------------------------
     *  REFERENCE SLIDER
     * ------------------------------------  
     */
    /*#main-slider {height:337px;}
    #main-slider img {width:768px;height:auto;}
    #main-slider.sketch #sketchFont {background-size:768px auto;}
    
    #main-slider .info-panel {padding-top:10px;padding-bottom:10px;}
    #main-slider .info-panel h2 {font-size: 24px;font-size: 2.4rem;}
    #main-slider .info-panel h3 {font-size: 20px;font-size: 2rem;}
    
    #main-slider .info-panel .sector, #main-slider .info-panel .cat, #main-slider .info-panel .tags {font-size: 10px;font-size: 1rem;}
    #main-slider a.button, a.bigBttn {font-size: 14px;font-size: 1.4rem;padding: 8px 14px;}
    #main-slider a.button::before {font-size:20px;font-size:2rem;top:3px;}
    
    #main-slider .sequence-prev,
    #main-slider .sequence-next {bottom:25px;}
    .sequence-pagination {bottom:40px;}*/
    
}


@media (max-width: 745px) {

    /* ------------------------------------
     *  BASIC
     * ------------------------------------  
     */
    body, button, input, select, textarea {
        font-size: 18px;
        font-size: 1.8rem;
        }
        
    .content_block {padding:0 0 20px 0;/*padding:0 0 2rem 0;*/}
    
    
    /* ------------------------------------
     *  HEADLINES
     * ------------------------------------  
     */
    h1 {
        font-size:32px;
        font-size:3.2rem;
        padding-bottom:20px;
        /*padding-bottom:2rem;*/
        }
    h2 {
        font-size:26px;
        font-size:2.6rem;
        }
    h3 {
        font-size:24px;
        font-size:2.4rem;
        }
    h4 {
        font-size:22px;
        font-size:2.2rem;
        }
    body.compositum h4 {
        font-size:20px;
        font-size:2rem;
        }
    h5 {
        font-size:20px;
        font-size:2rem;
        }
    h6 {
        font-size:18px;
        font-size:1.8rem;
        }   
        
    
    
    /* ------------------------------------
     *  MAIN MENU
     * ------------------------------------  
     */ 
    .menulist_wrap {
        width:100%;
        padding-bottom:40px;
        /*padding-bottom:4rem;*/
        } 
    
    
    /* ------------------------------------
     *  CONTENT TEXT
     * ------------------------------------  
     */
    .content-wrap,
    .content-wrap.sliderpage,
    .content-wrap.modpage {padding-top:40px;/*padding-top:6rem;*/}
    

    /* ------------------------------------
     *  CONTENT IMAGES / GALLERY
     * ------------------------------------  
     */
    /*.content-wrap .contentimages_wrapper .contentimage, .content-wrap .imagegallery .contentimage {width:50%;}*/
    
    /*.content-wrap #gallery .item img, .content-wrap .imagegallery .item img,
    .content-wrap .contentimages_wrapper .contentimage img, .content-wrap .imagegallery .contentimage img {width:100%;height:auto;}*/
 
 
    /* ------------------------------------
     *  FOOTER
     * ------------------------------------  
     */
    #colophon .container {font-size:18px;font-size:1.8rem;padding:10px 0 20px 0;/*padding:1rem 0 2rem 0;*/}
    
    #colophon .container a.colo_contact {line-height:30px;/*line-height:3rem;*/}
    
    /* route planner */
    #colophon .container a.route {
        position:relative;
        top:auto;
        right:auto;
        font-size:inherit;
        }
    #colophon .container a.route.icon-location::before {font-size: 30px;font-size: 3rem;}
    
    #copyright.container {font-size:14px;font-size:1.4rem;}
    #colophon #routeplanner #directions_view {font-size:14px;font-size:1.4rem;}
    
    #colophon #routeplanner {padding-bottom:10px;/*padding-bottom:1rem;*/}
    


    /* ------------------------------------
     *  COMPETENCE SLIDER (only landing page)
     * ------------------------------------  
     */   
    body.creart .content-wrap .com-slider-pager li {
        width:100px;
        /*width:8rem;*/
        top:-36px;
        /*top:-3.6rem;*/
        }

    body.creart .content-wrap .com-slider-pager li a {
        width:44px;
        /*width:4.4rem;*/
        height:44px;
        /*height:4.4rem;*/
        background-repeat:no-repeat;
        background-position:center center;
        background-size:44px;
        /*background-size:4.4rem;*/
        }
    
    
    /* ------------------------------------
     *  FORM ELEMENTS
     * ------------------------------------  
     */
    form label {float:none;width:100%;}
    select, input, textarea {width:100%;}
    
    
    /* ------------------------------------
     *  LEISTUNGSSPEKTRUM
     * ------------------------------------  
     */
    h1 span.com-icon {width:44px;/*width:4.4rem;*/height:44px;/*height:4.4rem;*/}
    
    
    /* ------------------------------------
     * COMPETENCE SECTOR (landing page)
     * ------------------------------------  
     */
    body.compositum .content-wrap #com_pageblock {float:none;width:100%;}
    body.compositum .content-wrap #gf_pager {display:none;}
    
    body.compositum .content-wrap #slider_pager ul.comlist li a {font-size:12px;font-size:1rem;line-height: 43px;/*line-height: 4.3rem;*/padding:0px 10px;/*padding: 0 1rem;*/}
    


    /* ------------------------------------
     *  REFERENCES
     * ------------------------------------  
     */
    .sector, .cat, .tags {font-size:14px;font-size:1.4rem;}


    /* ------------------------------------
     *  JOB PORTAL
     * ------------------------------------  
     */
    /* panel buttons */
    #career_bttns {position:relative;top:auto;right:auto;}
    #career_bttns .button {margin-left:0!important;margin-top:0!important;margin-bottom:20px!important;/*margin-bottom:2rem!important;*/}

}


@media (max-width: 480px) {


    /* ------------------------------------
     *  ANIMATED LOGO
     * ------------------------------------  
     */
    #sitelogo {
        width:68px;
        /*width:6.8rem;*/
        height:45px;
        /*height:4.5rem;*/
        top:22px;
        /*top:2.2rem;*/
        left:20px;
        /*left:2rem;*/
        margin:0;
        }
    body.compositum #sitelogo {
        width:140px;
        /*width:14rem;*/
        height:23px;
        /*height:2.3rem;*/
        top:30px;
        /*top:3rem;*/
        }  


    /* ------------------------------------
     *  CONTENT IMAGES / GALLERY
     * ------------------------------------  
     */
    .content-wrap .contentimages_wrapper {padding-bottom:0;}
    
    .content-wrap .contentimages_wrapper.rightfloat,
    .content-wrap .contentimages_wrapper.leftfloat {float:none;margin-left:0;margin-right:0;}
    
    .content-wrap .contentimages_wrapper .contentimage a img, .content-wrap .imagegallery .contentimage a img {width:100%;}
    /* Bilder skalieren auf 100% Breite bei kleiner Auflösung */
    .content-wrap .contentimages_wrapper .contentimage img, .content-wrap .imagegallery .contentimage img, 
    .content-wrap .col50 > img {width:100%;}
    /*.content-wrap .contentimages_wrapper .contentimage, .content-wrap .imagegallery .contentimage {width:100%;}*/
    /*.content-wrap #gallery .item img, .content-wrap .imagegallery .item img,
    .content-wrap .contentimages_wrapper .contentimage img, .content-wrap .imagegallery .contentimage img {width:100%;height:auto;} */
 
 
 
    /* ------------------------------------
     *  FOOTER
     * ------------------------------------  
     */
    
    /* ROUTE */
    #colophon #routeplanner #gmaps {height:300px;/*height:30rem;*/} 
    


    /* ------------------------------------
     *  COMPETENCE SLIDER (only landing page)
     * ------------------------------------  
     */   
    body.creart .content-wrap .com-slider h1 {font-size:2.6rem;}
    body.creart .content-wrap .com-slider h2 {font-size:2.4rem;}
    
    /* pager */
    body.creart .content-wrap .com-slider-pager {
        margin-top:40px;
        /*margin-top:2rem;*/
        padding-bottom:0;
        height:40px;
        /*height:4rem;*/
        }

    body.creart .content-wrap .com-slider-pager::before,
    body.creart .content-wrap .com-slider-pager::after {top:-13px;/*top:-1.3rem;*/}
    
    body.creart .content-wrap .com-slider-pager li {
        width:40px;
        /*width:4rem;*/
        top:-40px;
        /*top:-4rem;*/
        
        margin:0 7px;
        /*margin:0 0.7rem;*/
        }
    
    /* static pager */    
    body.creart .content-wrap .com-slider-pager li a svg {
        width:40px;
        /*width:4rem;*/
        height:40px;
        /*height:4rem;*/
    } 


    /* bxSlider */
    .content-wrap .bx-wrapper ul li {
        margin-left:0; /* !!IMPORTANT for box-sizing: border-box */
        padding-bottom:40px;
        /*padding-bottom:4rem;*/
        }
        
    .content-wrap .com-slider_el li {padding-bottom:60px;/*padding-bottom:6rem;*/}
    
    
    /* ------------------------------------
     *  KOMPETENZEN
     * ------------------------------------  
     */
    h1.centeralign {text-align:left;}
    
    
    /* ------------------------------------
     *  LEISTUNGSSPEKTRUM
     * ------------------------------------  
     */
    ul#ba-list.list_grid > li {width:100%;float:none;}
    ul#ba-list.list_grid li div.ui-accordion-content {padding:20px 40px 20px 20px;/*padding:2rem 4rem 2rem 2rem;*/}
    
    
    /* ------------------------------------
     *  FILE LIST
     * ------------------------------------  
     */
    .content-wrap ul.file_list a.button {text-align:left;display:block;width:100%;}


    /* ------------------------------------
     *  JOB PORTAL
     * ------------------------------------  
     */
    form#app_form {padding:20px 10px;/*padding:2rem 1rem;*/}
    
    
    
    /* headline, cat */
    ol#job_list li.job_list_item .job_label {float:none;width:auto;padding:14px 20px 5px 20px;/*padding:1.4rem 2rem 0.5rem 2rem;*/}
    
    /* contents */    
    ol#job_list li.job_list_item .job_details {float:none;width:auto;}
    
    #jobportal_joblist h2.leftfloat {float:none;}
    
    .filteroptions.rightfloat {float:none;}
    
    #jobportal_joblist .filteroptions .dk-select,#jobportal_joblist .filteroptions .dk-select-multi, 
    .dk-select, .dk-select-multi,
    .filteroptions select {width:100%!important;margin-left:0;margin-bottom:20px;/*margin-bottom:2rem;*/}
    
    #jobportal_joblist .filteroptions .dk-select.leftfloat {float:none;} 
    
    
    ol#job_list li.job_list_item .job_details .job_content .job_qualification, 
    ol#job_list li.job_list_item .job_details .job_content .job_application {padding-bottom:20px;/*padding-bottom:2rem;*/}
    



    /* ------------------------------------
     *  REFERENCES
     * ------------------------------------  
     */
    .references-wrap.medium .reference-single {height:auto;width:100%;}
    
    .references-wrap.medium .reference-single .ref_image,
    .references-wrap.medium .reference-single .ref_image img {width:100%;}
    
    
    .references-wrap.medium .reference-single .ref_contents {width:auto;}
    .references-wrap.medium .reference-single .ref_contents {margin-right:20px;/*margin-right:2rem;*/}
    
    .references-wrap.medium .reference-single .content {display:block;height:auto;}
    .references-wrap.medium .reference-single .title {height:auto;}
    
    .refpage .filteroptions ul#ref_view {display:none;}
    
    
    /* ------------------------------------
     * COMPETENCE SECTOR (landing page)
     * ------------------------------------  
     */
    body.compositum .content-wrap #com_pageblock {float:none;width:100%;}
        


    /* COM slider pager */
    body.compositum .content-wrap #slider_pager {margin-top:30px;/*margin-top:3rem;*/}
    
    body.compositum .content-wrap #slider_pager ul.comlist li {display:block;}
    body.compositum .content-wrap #slider_pager ul.comlist li a {float:none;text-align:left;}

    body.compositum .content-wrap #slider_pager ul.comlist li::before {width:100%;height:1px;/*height:0.1rem;*/border-left:0px;border-top: 1px solid rgba(255, 255, 255, 0.1);}
    body.compositum .content-wrap #slider_pager ul.comlist li:firstChild::before {border-top:0 none;}
    
    /* COM slider contents */
    body.compositum .content-wrap .slider_content_wrap {margin-top:30px;/*margin-top:3rem;*/border-bottom:1px solid rgb(223,226,228);}

    body.compositum .content-wrap .slider_content_wrap .slider_content_el {float:none;width:100%;}


    /* ------------------------------------
     *  NEWS
     * ------------------------------------  
     */
     .timeline {
        background-position: 23px 0;
        /*background-position: 2.3rem 0;*/
        background-size: 3px 3px;
        /*background-size: 0.3rem 0.3rem;*/
        width:100%;
        }
    .timeline > ol > li {
        margin:0 0 20px 0;
        /*margin:0 0 2rem 0;*/
        }
    .timeline .date {
        padding: 10px 0;
        /*padding: 1rem 0;*/
        width: 50px;
        /*width: 5rem;*/
        height: 50px;
        /*height: 5rem;*/
        font-size: 14px;
        /*font-size: 1.4rem;*/
        }
    
    .timeline .title, .timeline .details, .timeline .pub_date, .timeline .cat {padding-left:60px;/*padding-left:6rem;*/}
    .timeline .title {
        font-size:20px;
        /*font-size:2rem;*/
        }
    .timeline .pub_date,
    .timeline .cat, .timeline .cat a {
        font-size:14px;
        /*font-size:1.4rem;*/
        }
    
    
    .timeline .details .detail {
        font-size:14px;
        font-size: 1.4rem;
        margin: 20px auto 0;
        /*margin: 2rem auto 0;*/
    }
    .news_content .contenttext.wimageblock {width:100%;}
    
    
    
    
    body.creart .filteroptions select {margin-left:0;margin-right:10px;/*margin-right:1rem;*/}
    
    
}



@media (max-width: 380px) {


    /* ------------------------------------
     *  JOB PORTAL
     * ------------------------------------  
     */
    #jobportal_joblist a.button,
    #career_bttns .button {text-align:left;display:block;width:100%;}
    
    body.creart .filteroptions select.leftfloat {float:none;}
    
}