/*****************************************
MOBILES IN LANDSCAPE (smaller logo)
******************************************/
@media screen and (min-width: 30em) and (max-width: 46em) {
    /*HEADER**********************************
        .header-logo {
            float: left;
            height: 160px;

        }

     */

}


/*****************************************
TABLETS IN PORTRAIT (bigger logo)
******************************************/
@media screen and (min-width: 46em) {
    /*HEADER**********************************
        header{
            background:url(../img/HeaderBackground02M.png) no-repeat;
        }

        .header-logo {
            float: left;
        }

        #phone-icon {
            display: none;
        }

        #mail-icon {
            display: none;
        }
      */
    #top_content {
        height: 300px;
    }
}


/*****************************************
TABLETS IN LANDSCAPE (full nav)
******************************************/
@media screen and (min-width: 63em) {
    /*HEADER**********************************/
    header {
        /*background:url(../img/HeaderBackground02L.png) no-repeat;*/
    }

    .bullet {
        display: inline-block;
    }

    .onexpand {
        display: inline-block;
    }

    body {

    }

    #flex_wrapper {
        background: url("../img/background/imgBG00.jpg") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .content-wrapper, .header-wrapper {
        width: 70%;
        min-width: 63em;
        margin: 0 auto;
    }

    .content-wrapper {
        min-height: 100%;
        margin: 0 auto;
    }

    #top_content {
        width: 100%;
        background: none;
        min-height: 0px;
        height: inherit;
        margin-bottom: 0px;
    }

    .content {
        margin-top: 20px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 0 0 20px 0;
        box-shadow: 10px 10px 5px rgba(125, 125, 125, 0.3);
    }

    .contentcolumn {
        width: 90%;
        margin-left: 50px;
    }

    .center {
        display: inline-block;
        width: 80%;
        margin-left: 14.5%;
    }

    .left {
        display: inline-block;
        float: left;
        width: 20%;
    }

    .right {
        display: inline-block;
        float: right;
        width: 20%;
        margin-left: 0px;
    }

    .content h1 {
        font-size: 2em;
        display: block;
        float: left;
        text-align: left;
        margin: 20px 0 20px 40px;
    }

    table {
        clear: left;
        display: inline-block;
        float: left;
        font-size: 1.2em;
    }

    .link {
        margin-left: 0%;
        margin-right: 10%
    }

    /*NAV MAIN**********************************/
    #menu-icon {
        display: none;
    }

    #phone-icon {
        display: none;
    }

    #mail-icon {
        display: none;
    }

    #top_content {
        margin-top: 20px;
        width: 100%;
        /*background: rgba(195,195,195,  1);*/
    }

    #nav-bar {
        width: 100%;
        margin-top: 0px;
        min-width: 63em;
        background: rgba(255, 255, 255, 0.5);
    }

    nav {
        display: table;
        margin: auto;
        float: none;
    }

    nav ul {
        display: table;
        position: static;
        float: left;
        margin: auto;
        margin-top: 5px;
        height: 40px;
        padding: 0;
        background: none;
        border: none;
    }

    nav:active ul {
        display: table;
        position: static;
        margin: auto;
        margin-top: 5px;
        height: 40px;
        padding: 0;
        background: none;
        border: none;
    }

    nav li {
        padding: 5px;
        text-align: center;
        display: table-cell;
    }

    nav li:not(:last-child) {
        border-right-width: 2px;
        border-right-style: solid;
        border-bottom-style: none;
        border-right-color: rgb(229, 229, 229);
    }

    nav li a {
        display: inline;
    }

    a {
        font-size: 1.5em;
    }

    nav:hover ul {
        display: inherit;
    }


    /*****************************************
    Page: TEAM
    ******************************************/
    .teampicture {
        margin: auto 50px 50px;
    }

    .teampic {
    }

    .person {
        width: 50%;
        margin: auto;
        margin-bottom: 50px;
    }

    .personpicture {

    }

    .personprofession {

    }

    /*****************************************
    Page: Produkte
    ******************************************/
    .supplier {
        float: left;
        max-width: 200px;
        margin-right: 24%;
    }

    /*****************************************
    Page: Kontakt
    ******************************************/
    .address {
        float: left;
        margin-right: 10%;
    }

    #map {
        width: 500px;
        height: 500px;
    }

    /*****************************************
    Page: Referenzen
    ******************************************/
    .refpic_wrapper {
        width: 100%;
    }

    .refpic {
        margin-left: 12%;
    }

    /*****************************************
    Page: Index
    ******************************************/
    .picturelink {
        max-width: inherit;
        width: 60%;
        display: inline-block;
        float: left;
        margin: 20px;
        margin-top: 100px;
    }

    /*****************************************/
}