/* hide for desktop*/
@media only screen and (min-width: 641px) {
    #mobile-nav, #mobile-nav-icon, .mobile-projectList-label, .mobile-imageTiles, #mobile-bar,#mobile-langNav, #mobile-logo, #mobile-ctitle, #mobile-highlights{
        display: none !important;
    }
}

/* mobile*/
@media only screen and (max-width: 640px) {

    /*fonts sizes*/
    .home #mobile-highlights .homeRight {
        font-size: 17px;
        line-height: 22px;
    }
    .newsboxText{
        font-size: 15px;
        line-height: 20px;
    }

    #desktop-nav{
        display: none;
    }

    body, #mainWrap, #wrap, #header, #toolNav, #l1Nav, #langNav, #newscontainer, #cwrapper, #ctitle, #ctitle #tools, #ctitle form, #content, #colRight, #colLeft, #content #newsAggregate, #imageTilesContainer, .footer1 {
        box-sizing: border-box;
        width:100% !important;
        position:relative;
        float:none !important;
    }

    html {
        /*height: 100%;*/
    }

    body {
        overflow: hidden;
        /*height: 100%;*/
    }

    #mobile-bar{
        box-sizing: border-box;
        width:100%;
        height: 50px;
        background-color: black;
        padding:4px 20px 4px 12%;
    }

    .input-wrapper {
        width:100%;
    }

    .input-wrapper.center{
        display: inline-block;
        margin:auto;
        width: auto;
        text-align: center;
    }

    .suchformular .inputNormal {
        border-radius: 0;
    }

    /* base form*/
    input[type=text], input[type=submit], input[type=date], input[type=password], textarea, select {
        border:1px solid #aaaaaa;
        -webkit-appearance: none;
        -moz-appearance: none;
        border-radius: 0;
    }

     [type="checkbox"]:not(:checked),
     [type="checkbox"]:checked,
     [type="radio"]:not(:checked),
     [type="radio"]:checked {
         position: absolute;
         left: -9999px;
     }

    [type="checkbox"]:not(:checked) + label,
    [type="checkbox"]:checked + label,
    [type="radio"]:not(:checked) + label,
    [type="radio"]:checked + label {
        position: relative;
        padding-left: 20px;
        cursor: pointer;
    }

    [type="checkbox"]+label,
    [type="radio"]+label{
        margin-left:0;
    }

    [type="checkbox"]:checked + label,
    [type="radio"]:checked + label {
    }

    [type="checkbox"] + label:before,
    [type="radio"] + label:before {
        left:0;
        top:3px;
        width: 10px; height: 10px;
        content: '';
        position: absolute;
        border: 1px solid #aaaaaa;
    }

    [type="checkbox"]:not(:checked) + label:before,
    [type="radio"]:not(:checked) + label:before {
    }

    [type="radio"]:not(:checked) + label:before {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -khtml-border-radius: 50%;
        border-radius: 50%;
    }

    [type="checkbox"]:checked + label:before,
    [type="radio"]:checked + label:before {
        background-color: #aaaaaa !important;
        background-size: 15px;
    }

    /*mobile search overlay*/

    #fancybox-overlay {
        background-color: rgba(122, 127, 138, 0.8) !important;
        opacity: 1 !important;
    }

    #fancybox-outer {
        background-color: transparent !important;
    }

    #fancybox-outer .fancy-bg{
        display: none;
    }

    /*#mobile-search-overlay{*/
        /*display: none;*/
    /*}*/

    .mobile-search-overlay-wrapper {
        width:100%;
        display: block;
    }

    .mobile-search-overlay-wrapper [type="checkbox"] + label:before,
    .mobile-search-overlay-wrapper [type="radio"] + label:before {
        border: none;
        border: 1px solid black;
        background-color: white;
        margin-top:2px;
    }

    .mobile-search-overlay-wrapper .suchformular label {
        margin:10px 0 !important;
        float: none !important;
        text-align: left;
        color:white;
        font-size:15px !important;
        line-height: 20px;

    }

    .mobile-search-overlay-wrapper .suchformular #submitSearchForm {
        position:relative;
        text-align: right;
        float:none;
        color:white;
        width: 100%;
        font-size:15px !important;
        line-height: 20px;
        border-top:1px solid white;
        background-color: transparent;
        height: auto;
        background: none;
    }

    .mobile-search-overlay-wrapper .suchformular .inputNormal{
        width:100%;
        font-family: FrutigerLTProLight, Verdana, Arial, sans-serif;
        box-sizing: border-box;
        border:1px solid black;
        padding:8px 5px 5px 35px;
        font-size:18px;
        line-height:25px;
        height: auto;
        color:#7a7f8a;
        background-color: white;
        background-image: url(../images/mobile/mobile-search-icon-black@2x.png);
        background-position: left 10px bottom 11px ;
        background-repeat: no-repeat ;
        background-size: 15px;

    }

    #fancybox-close {
        /*position: absolute !important;*/
        /*top: -30px !important;*/
        /*right: -30px !important;*/
        /*width: 30px !important;*/
        /*background-image: url('../images/mobile/mobile-nav-close@2x.png') !important;*/
        /*background-position: center !important;*/
        /*background-size: 20px;*/
        /*background-repeat: no-repeat;*/
        display: none !important;
    }

    #mobile-bar #mobile-search-icon{
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        width:32px;
        height:38px;
        float:left;
    }

    #mobile-bar #mobile-search-icon img, #mobile-bar #mobile-nav-icon img{
        width:100%;
        height:auto;
    }

    #mobile-bar #mobile-nav-icon{
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        width:32px;
        height:28px;
        float:right;
    }

    #mobile-nav-icon-close {
        display: none;
    }

    #mobile-nav-icon.is-active #mobile-nav-icon-close{
        display: block;
    }

    #mobile-nav-icon.is-active #mobile-nav-icon-open{
        display: none;
    }

    #mobile-nav-icon.is-active{

    }

    #mobile-nav {
        font-family: FrutigerLTProLight, Verdana, Arial, sans-serif;
        font-size:18px;
        line-height:20px;
        display: none;
        position: absolute;
        z-index: 501;
        width: 100%;
        background-color: #737b8b;
        overflow-x: hidden;
        overflow-y: scroll;

    }

    #headBack {
        width:100% ;
        left: 0;
        top: 0;
        height: auto;
        background: transparent;
        overflow: hidden;
    }

    #headBack img {
        min-height:0 !important;
    }

    #header {
        height: auto !important;
        background-color: rgba(255,255,255,0.3)
    }

    #logo {
        height: auto;
        position: relative;
        top:0;
        left: 0;
        z-index: 100;
    }

    #logo #desktop-logo{
        display: none;
    }

    #logo #mobile-logo{
        box-sizing: border-box;
        padding:25px 10px 25px 10px;
        display: block;
        width: 100%;
    }

    #logo #mobile-logo img{
        width: 100%;
    }

    #newscontainer {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100%;
        z-index: 500;
        height: auto;
        padding:10px 20px 10px 12%;
        display: block !important;
        background-image: none;
        background-color: #cfd1d5;
    }

    #newscontainer #newscontainer_closer{
        display: none !important;
    }

    #newsbox1, #newsbox2, #newsbox3, #newsbox4 {
        transform: none !important;
        -ms-transform: none !important;
        -webkit-transform: none !important;
        position: relative;
        top: auto;
        left: auto;
        font-size: 13px;
        color: #ca1111;
        width: 100%;
    }



    #newsbox1 a, #newsbox2 a, #newsbox3 a, #newsbox4 a {
        position: relative;
        top: auto;
        left: auto;
        background-image: none;
        padding:0;
        color: #ca1111;
    }

    .newsboxText {
        padding:5px 0;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 15px;
        line-height: 20px;
    }

    #langNav {
        position: absolute;
        height: auto;
        top: 0 !important;
        left: 0 !important;
    }


    #mobile-langNav {
        position: relative;
        width:100%;
        padding-left:12%;
        padding-top:5px;
    }

    #mobile-langNav ul{
        box-sizing: border-box;
        width:100%;
        list-style:none;
    }
    #mobile-langNav > ul > li{
        float: left;
        padding-right:10px;
    }

    #mobile-langNav > ul > li > a{
        color:black;
    }
    #mobile-langNav > ul > li.active > a{
        text-shadow: 0.1em 0.1em #3b7e98;
    }

    #mobile-l1Nav {
        height: auto;
        padding: 0;
        top: auto !important;
        left: auto !important;
    }

    #mobile-l1Nav ul li a{
        display: block;
        color:white;
        width: 100%;
    }


    /* l1*/
    #mobile-l1Nav > ul{
        width:100%;
        border-top:3px solid white;
    }

    #mobile-l1Nav > ul > li{
        float:none;
        width: 100%;
        padding: 0;
        border-bottom:1px solid white;
    }

    #mobile-l1Nav > ul > li > a{
        padding:6px 4px 4px 12%;
        text-transform: uppercase;
        background-color: black;
        background-image: url(../images/mobile/mobile-nav-li-open@2x.png);
        background-position: right 20px bottom 10px ;
        background-repeat: no-repeat ;
        background-size: 15px;
        width: 100%;
        box-sizing: border-box;
    }

    #mobile-l1Nav > ul > li.active > a {
        background-color: #737b8b;
        /*background-image: url(../images/mobile/mobile-nav-li-close@2x.png);*/
        background-position:  right 20px bottom 8px;
        background-repeat: no-repeat;
        background-size: 15px;
    }

    #mobile-l1Nav > ul > li  ul {
        background-color: #4d525d;
        display: none;
    }

    #mobile-l1Nav > ul  li.active > ul {
        display: block;
    }

    /* l2 */
    #mobile-l1Nav > ul > li  ul  li  a{
        padding:6px 4px 4px 20px;
        margin-left:12%;
        border-top:1px solid #737b8b;
        background: url(../images/arrow-right-white.png) 0 11px no-repeat;
    }

    #mobile-l1Nav > ul > li > ul > li > ul > li >  a{
        padding:6px 4px 4px 40px;
        margin-left:12%;
        border-top:1px solid #737b8b;
        background: url(../images/arrow-right-white.png) 21px 11px no-repeat;
    }

    #mobile-l1Nav > ul > li > ul > li:first-child > a{
        border-top:none;
    }

    #mobile-l1Nav > ul > li > ul  li.active > a{
        color:#3b7e98;
    }

    #mobile-toolNav {
        padding:10px 10px 10px 12%;
        background-color: white;
        border-bottom:1px solid black;
    }

    #mobile-toolNav ul{
        list-style: none;
    }
    #mobile-toolNav ul li{
        float:left;
        margin-right:10px ;
    }

    .home #ctitle{
        display: none;
    }

    .home #mobile-highlights{
        display: block;
        box-sizing: border-box;
    }



    #mobile-ctitle {
        display: none;
    }

    .home #mobile-ctitle{
        padding-left: 12% !important;
        padding-right: 20px;
        padding-top: 10px;
        padding-bottom: 7px;
        display: block;
    }

    .home #mobile-ctitle h1{

        font-family: FrutigerLTProLight, Verdana, Arial, sans-serif;
        margin: 0;
        padding: 0;
        font-size: 20px;
        font-weight: normal;
        text-transform: none;
        color: #aaaaaa !important;
        letter-spacing: 0;
        line-height: 25px;
        height: auto !important;

    }

    #ctitle #tools{
        display: block !important;
    }



    #ctitle {
        border-bottom: none;
        height: auto;
    }

    #ctitle h1 {
        font-family: FrutigerLTProLight, Verdana, Arial, sans-serif;
        margin: 0;
        padding: 0;
        font-size: 20px;
        font-weight: normal;
        color: #aaaaaa;
        letter-spacing: 0;
        line-height: 25px;
        height: auto !important;
    }

    #ctitle form, #header form{
        display: none;
    }


    #rightcol {
        box-sizing: border-box;
    }

    .boxesright, #rightcol .newsEntry {
        width:100%;
        box-sizing: border-box;
    }

    /*hack to hide the home styled text and images in the right column. They are outputted in another div specific for mobile.*/
    .home #mobile-highlights .homeRight{
        margin-bottom:5px !important;
        padding-left:12% !important;
        padding-right:20px;

    }
    .home #mobile-highlights {
        background-color: #cfd1d5;
    }

    .home #rightcol .homeRight{

        display: none;
    }

    #cwrapper {
        min-height: 100vh;
        padding-left:0;
        padding-right:0;
    }

    #content, #colRight, #colLeft, #ctitle {
        padding-left:12% !important;
        padding-right:20px;
    }

    #colRight {
        margin:0;
        padding-top:20px;
        border-top:1px solid #aaaaaa;
    }

    #colRight #search , #content .search{
        box-sizing: border-box;
        width: 100%;
    }

    #colRight #search .suchformular {
        box-sizing: border-box;
        width: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    #colRight #search .inputNormal {
        box-sizing: border-box;
        width: 100%;
        border:1px solid #aaaaaa;
        padding: 4px;
    }

    #colLeft {
        padding-bottom:20px;
    }

    #colLeft #l2Nav{
        display: none;
    }

    #newsAggregateWrap .scrollbar{
        display: none;
    }

    #newsAggregateWrap .overview .newsEntry{
        display: none;
    }

    #newsAggregateWrap .overview .newsEntry:nth-child(-n+3){
        display:block;
    }

    #content #newsAggregateWrap {
        overflow: auto;
        white-space: normal !important;
    }

    #content .newsEntry {
        display: block;
        white-space: normal;
        float: none !important;
        vertical-align: top;
    }

    /* textAndImage*/
    .textAndImage img, .textAndImage table{
        width:100%;
    }

    iframe, object{
        width:100%;
    }

    #footer {
        border-top:none;
        margin:0;
        padding:10px 10px 10px 12%;
        background-color: black;
        color: white;
        font-size: 10px;
    }

    .footer2 {
        width: auto;
    }

    #footer a{
        color: white;
        font-size: 10px;
    }

    /*image titles*/

    .imageTiles {
        display: none;
    }

    .mobile-imageTiles {
        display: block;
        height: 180px;
        margin-left:-15%;
        margin-right:-21px;
    }

    .mobile-imageTiles .swiper-pagination-bullet {
        background:transparent;
        border:2px solid #7b868f;
        opacity: 1;
        width:6px;
        height:6px;
        margin: 0 2px !important;
    }

    .mobile-imageTiles .swiper-pagination-bullet-active{
        background:#7b868f;
        border:2px solid #7b868f;
    }

    .mobile-imageTiles .swiper-container{
        height: 100%;
    }
    .mobile-imageTiles .swiper-wrapper {
        height: 150px;
    }

    .mobile-imageTiles .swiper-slide{
        height: 100%;
        width: auto;
        max-width: 233px;
        overflow: hidden;
    }

    .mobile-imageTiles .swiper-slide .image {
        display: block !important;
    }


    .mobile-imageTiles .swiper-slide .image img{
        height: 100%;
        width:auto;
    }

    .mobile-imageTiles .swiper-slide .text {
        position: absolute;
        top:0;
        left:0;
        max-width: 233px;
        width:100%;
        height:100%;
        box-sizing: border-box;
    }

    .mobile-imageTiles .swiper-slide .text .bar {
        display: none
    }

    .mobile-imageTiles .swiper-slide .text h2 {
        box-sizing: border-box;
        margin-top:85px !important;
        padding:7px !important;
        background-color: rgba(255, 255,255, .8);
        color:black !important;
        width:100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size:15px !important;
    }

    .mobile-imageTiles .swiper-slide .text h3 {
        display: none;
    }

    /* project list*/
    .mobile-projectList-label {
        width:50% !important;
        display: inline-block;
        color:#aaabab;
    }

    .pl1,  .pl2,  .pm,  .pr {
        display: block !important;
        width:100% !important;

        floaT:none !important;
        margin-left: 0 !important;
    }
    .pr {
        text-align: left;
        float:left !important;
    }

    /* project detail*/
    #mobile-projectList-nav{
        display: block;
    }

    #mobile-projectList-nav ul{
        list-style: none;
        text-align:center;
        margin-top:20px;
        margin-bottom:20px;
        clear: both;
        overflow: hidden;
        display: block;
        border: none
    }

    #mobile-projectList-nav li{
        margin-left:5px;
        margin-right:5px;
        background: none;
        display:inline;
        padding:0;
    }
    #mobile-projectList-nav li.active > a{
        color:black !important;
    }

    .projectDetails h1, .projectDetails h2, .projectDetails h3 {
        width:100% !important;
    }

    .projectDetails p {
        margin-left:0;
    }

    .tleft, .tright{
        width: auto !important;
    }
}