﻿/*css for achieving responsive design*/

body {
    /*This must solve problems with vertical scrollbars...*/
    overflow-x: hidden;
}

@media all and (max-width: 1085px) {
    .top-menu li ul {
        width: inherit;
    }
}

@media all and (max-width: 1020px) {
    body {
        width: 100% !important;
    }

    .master-wrapper-page, .master-wrapper-content, .header, .header-menu, .wrapper-menu, .master-wrapper-main {
        width: 100% !important;
    }

    .center-2 {
        width: 79.8% !important;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0 0 10px 1% !important;
    }

    .side-2 {
        width: 19% !important;
    }

    .navigation-account {
        display: none !important;
    }

    .main-content-item {
        margin-right: 3%;
        width: 31.25%;
    }

        .main-content-item a div {
            width: 100% !important;
        }


    .main-content {
        width: 100%;
        min-height: 250px;
    }

    .header {
        width: 99% !important;
        margin: auto;
    }

    .header-links-wrapper {
        width: auto;
    }

    .newsletter-subscribe-block {
        margin-right: 1% !important;
        width: 20% !important;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

        .newsletter-subscribe-block .newsletter-email {
            width: 72% !important;
        }

            .newsletter-subscribe-block .newsletter-email #newsletter-email {
                width: 100%;
            }

    .last-box {
        margin-right: 0 !important;
    }

    .footer-information-box, .footer-links-box {
        margin-right: 2.5%;
        width: 24.5%;
    }

    .footer-links-box-first {
        width: 18% !important;
    }

    .social-media-logo-first {
        margin-left: 40% !important;
    }

    .footer-information-box table {
        margin-left: 23.2%;
    }

    .footer-wrapper {
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    #links-list-customerinfo {
        margin-left: 23.2%;
    }

    #links-list-service {
        margin-left: 38.4%;
    }

    #links-list-company {
        margin-left: 38%;
    }

    .product-list .product-item {
        height: 180px;
    }

        .product-list .product-item .add-info {
            top: 100px;
        }

    .rating {
        width: 80px;
    }
}

@media all and (max-width:1020px) {
    .product-grid .item-box:nth-child(n+3) {
        margin-top: 22px !important;
    }

    .product-grid .item-box:nth-child(odd) {
        margin-right: 22px !important;
    }

    .product-grid .item-box:nth-child(even) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media all and (max-width:600px) {
    .order-details-area td {
        font-size: 9px !important;
    }

    .order-details-page .title {
        font-size: 10px !important;
    }

    .order-details-page .order-details-area {
        margin-left: 0px;
        padding-left: 0px;
    }

    .order-details-page .checkout-attributes {
        padding-left: 0px;
        font-size: 9px;
    }

    .order-details-page .cart-header-row .responsive-col {
        visibility: hidden;
        min-width: 150px;
        max-width: 500px;
        padding: 2px;
        font-size: 1px;
        line-height: 1px;
        height: 1px;
        border-bottom: 0px solid #EEE;
    }

    .order-details-page .cart-item-row .responsive-col {
        visibility: visible;
        min-width: 150px;
        max-width: 500px;
        padding: 2px;
        border-bottom: 0px solid #EEE;
    }

    .order-details-page .cart-header-row th.name, th.price, th.quantity, th.total, th.a-left {
        visibility: hidden;
        width: 1px;
        min-width: 1px;
        max-width: 1px;
        padding: 0px;
        font-size: 1px;
        border-bottom: 0px solid #EEE;
    }

    .order-details-page .cart-header-row th {
        visibility: hidden;
        width: 1px;
        min-width: 1px;
        max-width: 1px;
        padding: 0px;
        font-size: 1px;
        border-bottom: 0px solid #EEE;
    }

    .order-details-page .cart-item-row td.product-picture, td.name, td.price, td.quantity, td.total {
        visibility: hidden;
        width: 1px;
        min-width: 1px;
        max-width: 1px;
        padding: 0px;
        font-size: 1px;
        border-bottom: 0px solid #EEE;
    }

    .order-details-page .data-table .responsive-col td {
        border-top-style: none;
    }
}

@media all and (max-width:950px) {

    .product-viewmode, .product-page-size {
        margin-left: 50px !important;
    }
}

@media all and (max-width:890px) {
    .search-box {
        width: auto;
    }

        .search-box input[type="text"] {
            width: auto !important;
        }
}

@media all and (max-width: 820px) {
    .side-2 {
        display: none !important;
    }

    .navigation-account {
        display: block !important;
    }

    .center-2 {
        width: 100% !important;
        margin: 0 !important;
    }

    #footer-id {
        position: relative;
        top: 50px !important;
    }

    .product-list .product-item {
        height: 100% !important;
    }

        .product-list .product-item .add-info {
            display: inline-block;
            vertical-align: bottom;
            margin-bottom: 10px;
            top: 0px;
            position: static;
        }

        .product-list .product-item .details {
            height: 100%;
            margin-bottom: 40px;
        }

    .rating {
        width: 77px !important;
    }
}

@media all and (max-width: 580px) {
    .header-competence-pur {
        display: none;
    }

    .header {
        min-height: 220px;
        background-size: 150px 31px;
        background-repeat: no-repeat;
    }

    .header-links-wrapper {
        margin: auto !important;
        position: relative !important;
    }

    .header-logo {
        float: none;
        margin: auto !important;
    }

    /*.header {
        background: none;
    }*/

    .product-page-size, .product-viewmode {
        display: none;
    }
}

@media all and (max-width: 768px) {
    body {
        width: 100% !important;
    }

    .master-wrapper-page, .master-wrapper-content, .header, .header-menu, .wrapper-menu, .master-wrapper-main {
        width: 100% !important;
    }

    .wrapper-menu {
        width: 100%;
    }

    .header {
        width: 99% !important;
    }

    .top-menu {
        display: none !important;
    }

    .top-menu-dropdown {
        display: block !important;
        z-index: 1001;
    }

    .dropdown {
        display: none;
    }

    .search-box {
        display: none !important;
    }

    .header-links-wrapper {
        float: none;
        margin-top: 30px;
        position: absolute;
    }

    .language-selector {
        display: none;
    }

    .footer-information {
        display: none;
    }

    .footer-links-box {
        float: none;
    }

    .footer-links {
        height: 415px;
    }

        .footer-links > .footer-wrapper {
            height: 415px;
        }

            .footer-links > .footer-wrapper > .footer-links-box, .footer-links-box-first {
                margin: auto;
            }

                .footer-links > .footer-wrapper > .footer-links-box ul {
                    margin-left: 0 !important;
                    display: block;
                    list-style: none;
                }

                    .footer-links > .footer-wrapper > .footer-links-box ul li {
                        text-align: center;
                        display: list-item;
                    }

    .last-box {
        margin: auto !important;
    }

    .main-content-item {
        width: 250px !important;
    }

    .main-content div:last-child {
        clear: left;
        margin-top: 25px;
    }
}

@media all and (max-width: 542px) {
    .header-links-wrapper {
        min-width: 260px;
    }

    .header-logo {
        float: none !important;
    }

    .header {
        width: 99% !important;
        /*background: none !important;*/
    }
}

@media all and (max-width: 560px) {
    .pager ul {
        clear: left;
    }
}

@media all and (max-width: 545px) {
    .main-content div:nth-child(2) {
        clear: left;
        margin-top: 25px;
    }

    .product-grid .item-box {
        clear: both;
        margin-top: 0;
        margin-bottom: 22px;
    }
}

@media all and (max-width: 420px) {
    .product-viewmode {
        display: none;
    }
}

@media all and (max-width:350px) {
    .header {
        overflow: hidden;
    }

    .master-wrapper-content {
        overflow: hidden;
    }
}

/* START Shopping Cart Erweiterungen im Responsive-Bereich */
@media only screen and (max-width: 600px) {
    .cart-content-small-screen-table {
        width: 99%;
        border-width: 0px;
        padding: 1px;
        border-spacing: 0px;
        outline: 1px dashed #969696;
        margin-top: 15px;
        visibility: visible;
    }

    .cart-content-small-screen-row {
        width: 99%;
        text-align: center;
        padding: 1px;
        border: 0px;
        visibility: visible;
    }

    .order-summary-content .cart .cart-item-row .cart-content-small-screen-cell {
        width: 99%;
        text-align: center;
        padding: 5px;
        border: 0px;
        visibility: visible;
        font-size: 12px;
    }

    .cart-content-small-screen-cell-productpicture {
        visibility: visible;
        height: auto;
        width: auto;
    }

    .cart-content-small-screen-cell-link {
        font-size: 13px;
        visibility: visible;
    }

    .cart-content-small-screen-cell-product-unit-price {
        font-size: 12px;
        font-family: Arial,Verdana;
        font-weight: normal;
        color: #000000;
        visibility: visible;
    }

    .cart-content-small-screen-cell-qty-input {
        border: solid 1px #E3E3E3;
        font-size: 12px;
        text-align: right;
        width: 40px;
        text-align: center;
        visibility: visible;
    }

    .order-summary-content .cart .cart-header-row th.picture, .wishlist-content .cart .cart-header-row th.picture {
        visibility: hidden;
        width: 1px;
        min-width: 1px;
        max-width: 1px;
        padding: 0px;
        font-size: 1px;
        border-bottom: 0px solid #EEE;
    }

    .order-summary-content .cart .cart-header-row th, .wishlist-content .cart .cart-header-row th {
        visibility: hidden;
        width: 1px;
        min-width: 1px;
        max-width: 1px;
        padding: 0px;
        font-size: 1px;
        border-bottom: 0px solid #EEE;
    }

    .order-summary-content .cart .cart-header-row th, .wishlist-content .cart .cart-header-row th {
        visibility: hidden;
        width: 1px;
        min-width: 1px;
        max-width: 1px;
        padding: 0px;
        font-size: 1px;
        border-bottom: 0px solid #EEE;
    }

    .order-summary-content .cart .cart-header-row th, .wishlist-content .cart .cart-header-row th {
        visibility: hidden;
        width: 1px;
        min-width: 1px;
        max-width: 1px;
        padding: 0px;
        font-size: 1px;
        border-bottom: 0px solid #EEE;
    }

        .order-summary-content .cart .cart-header-row th.end, .wishlist-content .cart .cart-header-row th.end {
            visibility: hidden;
            width: 1px;
            min-width: 1px;
            max-width: 1px;
            padding: 0px;
            font-size: 1px;
            border-bottom: 0px solid #EEE;
        }

    .order-summary-content .cart .cart-item-row td.product-picture, .wishlist-content .cart .cart-item-row td.product-picture {
        visibility: hidden;
        width: 1px;
        min-width: 1px;
        max-width: 1px;
        padding: 0px;
        font-size: 1px;
        border-bottom: 0px solid #EEE;
    }

    .order-summary-content .cart .cart-item-row td.product, .wishlist-content .cart .cart-item-row td.product {
        visibility: hidden;
        width: 1px;
        min-width: 1px;
        max-width: 1px;
        padding: 0px;
        font-size: 1px;
        border-bottom: 0px solid #EEE;
    }

    .order-summary-content .cart .cart-item-row td.unit-price, .wishlist-content .cart .cart-item-row td.unit-price {
        visibility: hidden;
        width: 1px;
        min-width: 1px;
        max-width: 1px;
        padding: 0px;
        font-size: 1px;
        border-bottom: 0px solid #EEE;
    }

    .order-summary-content .cart .cart-item-row td.qty, .wishlist-content .cart .cart-item-row td.qty {
        visibility: hidden;
        width: 1px;
        min-width: 1px;
        max-width: 1px;
        padding: 0px;
        font-size: 1px;
        border-bottom: 0px solid #EEE;
    }

    .order-summary-content .cart .cart-item-row td.end, .wishlist-content .cart .cart-item-row td.end {
        visibility: hidden;
        width: 1px;
        min-width: 1px;
        max-width: 1px;
        padding: 0px;
        font-size: 1px;
        border-bottom: 0px solid #EEE;
    }

    .order-summary-content .cart .cart-header-row .responsive-col {
        visibility: hidden;
        min-width: 150px;
        max-width: 500px;
        padding: 2px;
        font-size: 1px;
        line-height: 1px;
        height: 1px;
        border-bottom: 0px solid #EEE;
    }

    .order-summary-content .cart .cart-item-row .responsive-col {
        visibility: visible;
        min-width: 150px;
        max-width: 500px;
        padding: 2px;
        border-bottom: 0px solid #EEE;
    }

    .cart-content-small-screen-cell-cartbuttonlink {
        font-size: 15px;
        background: none;
        border: none;
        color: #033483;
        text-decoration: underline;
        cursor: pointer;
        font-family: Arial,Verdana;
        font-weight: bold;
        text-align: center;
        visibility: visible;
    }
}

/*Start Produktauswahl Responsive*/
@media only screen and (max-width: 400px) {
    .product-details-page .product-variant-list .product-variant-line {
        width: auto;
        border-bottom: 2px solid #EEEEEE;
        padding-bottom: 20px;
    }

    .tierprice-list-page .tierprice-list .info .article {
        padding-right: 0;
    }

    .product-details-page .product-variant-list .product-variant-line:last-child {
        border-bottom: 0px !important;
        padding-bottom: 0 !important;
    }

    .add-to-cart {
        position: relative !important;
    }

    .kleiberit-sku-container {
        position: relative;
        margin-top: 20px;
        width: 150px;
    }

    .product-details-page .sku, .product-details-page .stock {
        margin-right: 0;
    }

    .kleiberit-product-availabilty {
        left: 120px;
    }

    .kleiberit-productlist-left {
        margin-left: 20px;
        clear: both;
        width: auto;
    }

    .product-details-page .variant-picture {
        width: 100% !important;
    }

    .product-details-page .variant-overview {
        /*min-height: 0px !important;*/
    }

    .opc .checkout-info {
        display: block;
    }

        .opc .checkout-info li {
            display: block;
        }

        .opc .checkout-info .right {
            float: none;
        }
}

@media only screen and (max-width: 480px) {
    .product-details-page .overview {
        width: 90%;
    }

    .product-details-page .short-description {
        width: 250px;
    }

    .cart-total-left {
        width: 20%;
    }

    .tier-prices {
        margin-bottom: 40px;
    }

    .product-details-page .kleiberit-productlist-bottom {
        position: relative;
        width: 250px;
    }

    .product-details-page .add-to-cart-prodList {
        float: left;
        width: 100%;
        padding-left: 5px;
    }

    .add-to-cart-button-prodList {
        float: none;
    }

    .demand-price-button-prodList {
        float: none;
    }

    .login-page .returning-wrapper .buttons {
        top: 480px;
    }

    .login-page .new-wrapper {
        float: left;
        width: 70%;
        min-height: 180px;
    }

    .login-page .returning-wrapper {
        width: 70%;
        min-height: 180px;
    }

    .login-page .new-wrapper .buttons {
        top: 650px;
    }

    .product-simple .overview .simple-right {
        float: left;
        margin-right: 0px;
        padding-right: 0px;
        width: 100%;
        position: static;
        height: 70px;
    }
}



@media only screen and (max-width: 661px) {
    #kleiberit-produkt-video-container iframe {
        width: 100%;
        float: none;
    }

    #kleiberit-produkt-video-container .kleiberit-videolist {
        float: none;
        margin-top: 15px;
    }

    .order-details-page .total-info {
        min-width: 210px;
    }

    .opc .checkout-info .right .confirm-order-kleib {
        float: none;
    }
}

@media only screen and (max-width: 500px) {
    .kleiberit-tabcontainer #visibletabs {
        display: none;
    }

    .kleiberit-tabcontainer .kleiberit-produkt-tabs-dropdown {
        display: block;
    }

    .checkout-data .address-select {
        width: 100%;
        min-width: 50px;
    }

    .edit-address input, select {
        min-width: 200px;
        height: 25px;
    }
}

@media only screen and (max-width: 400px) {
    .edit-address input, select {
        width: 100%;
        height: 25px;
        min-width: 1px !important;
    }
}

/*Ende Produktauswahl Responsive*/

/* START Tradersearch Responsive-Bereich */
@media only screen and (max-width: 380px) {
    .tradersearch-page .searchpanel-wrapper {
        float: left;
        min-width: 250px;
        width: 99%;
        min-height: 100px;
        padding: 0px;
        padding-bottom: 10px;
        border: 1px solid #eee;
        margin-bottom: 30px;
        border-radius: 5px;
        min-width: 220px;
    }

    .tradersearch-page .resultpanel-wrapper {
        float: left;
        min-width: 250px;
        width: 99%;
        min-height: 100px;
        padding: 0px;
        border: 1px solid #eee;
        margin-bottom: 10px;
        border-radius: 5px;
        margin-top: 20px;
    }

    .tradersearch-page .noresultpanel-wrapper {
        float: left;
        min-width: 250px;
        width: 99%;
        min-height: 100px;
        padding: 0px;
        border: 0px solid #eee;
        margin-bottom: 10px;
        border-radius: 5px;
    }

    .tradersearch-grid {
        margin-bottom: 15px;
        margin-left: auto;
        margin-right: auto;
        width: auto;
        text-align: center;
        zoom: 1;
        float: left;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-top: 0px;
    }

        .tradersearch-grid .item-box {
            background-color: #eee;
            float: left;
            text-align: center;
            vertical-align: text-top;
            margin-left: 5px;
            position: relative;
            width: 230px;
            border: 1px solid #8099C2;
            margin-top: 10px;
            margin-bottom: 10px;
            height: 180px;
            padding: 5px;
            border-radius: 5px;
        }

        .tradersearch-grid .tradertableheadlinecell {
            width: 50%;
            text-align: left;
            vertical-align: top;
            font-size: 10px;
        }

        .tradersearch-grid .tradertablecell {
            width: 50%;
            text-align: left;
            vertical-align: top;
            font-size: 10px;
        }
}
