@font-face {
    font-family: Peppermint;
    src: url(/tp3/base/fonts/peppermint.woff);
}
.klantenservice-2015 {
    width: 991px;
}

.klantenservice-2015 .column1 {
    width: 182px;
    margin-right: 16px;
    float: left;
}

    .klantenservice-2015 .column1 .menu {
        background: #f2f2f2;
        padding: 13px 16px 16px;
    }
            
        .klantenservice-2015 .column1 .menu h3 {
            font-family: museo-sans-rounded, arial, sans-serif;
            font-size: 16px;
            font-weight: bold;
            margin-top: 0;
            margin-bottom: 16px;
            color: #009cdd;
        }

        .klantenservice-2015 .column1 .menu .menuItem {
            display: block;
            background: url(/tp3/base/images/arrow-to-right.png) no-repeat 0 6px;
            background-size: 4px;
            padding-left: 15px;
            font-family: open-sans, arial, sans-serif;
            color: #333842;
            font-size: 12px;
            margin-bottom: 8px;
            font-weight: bold;
            cursor: pointer;
        }

            .klantenservice-2015 .column1 .menu .menuItem .sub {
                display: none;
            }

            .klantenservice-2015 .column1 .menu .menuItem .sub a {
                font-family: 'open-sans', arial, sans-serif;
                color: #333842;
                font-size: 12px;
                font-weight: normal;
                margin-left: 10px;
                margin-top: 6px;
                display: block;
            }

                .klantenservice-2015 .column1 .menu .menuItem .sub a:hover {
                    color: #009cdd;
                    text-decoration: none;
                }

        .klantenservice-2015 .column1 .menu .menuItem:hover {
            color: #009cdd;
            text-decoration: none;
        }

        .klantenservice-2015 .column1 .menu .menuItem.active {
            color: #009cdd;
            background-image: url(/tp3/base/images/blue-arrow-down.png);
            background-size: 6px;
        }

            .klantenservice-2015 .column1 .menu .menuItem.active .sub {
                display: block;
            }

.klantenservice-2015 .column2 {
    width: 567px;
    margin-right: 19px;
    float: left;
}

    /* Header image */
    .klantenservice-2015 .column2 .imageHeader {
        background: url(/tp3/base/images/klantenservice/klantenservice.png);
        width: 566px;
        height: 178px;
        position: relative;
        max-width: 100%;
        background-position: right;
        min-width: 310px;
    }

        .klantenservice-2015 .column2 .imageHeader div {
            background: #e3007e;
            position: absolute;
            left: 16px;
            font-family: Peppermint, arial, sans-serif;
            padding: 0 9px 0 11px;
            color: white;
            text-transform: uppercase;
        }

            .klantenservice-2015 .column2 .imageHeader div.text1 {
                top: 25px;
                font-size: 28px;
            }

            .klantenservice-2015 .column2 .imageHeader div.text2 {
                top: 59px;
                font-size: 28px;
            }

            .klantenservice-2015 .column2 .imageHeader div.text3 {
                top: 129px;
                font-size: 15px;
                line-height: 24px;
            }

    .klantenservice-2015 .column2 h2 {
        font-family: open-sans, arial, sans-serif;
        font-size: 14pt;
        text-transform: uppercase;
        color: #009cdd;
    }

    .klantenservice-2015 .column2 h4 {
        font-family: museo-sans-rounded, arial, sans-serif;
        font-size: 12pt;
        color: #009cdd;
        font-weight: normal;
        margin-top: 22px;
    }

    .klantenservice-2015 .column2 p {
        font-family: open-sans, arial, sans-serif;
        font-size: 10pt;
        color: #7a7a7a;
    }

    .klantenservice-2015 .column2 .winkel {
        background: url(/tp3/base/images/klantenservice/locatie.png);
        width: 567px;
        height: 114px;
        position: relative;
        margin-bottom: 100px;
        display: block;
    }

        .klantenservice-2015 .column2 .winkel h3 {
            text-transform: uppercase;
            color: white;
            font-family: open-sans, arial, sans-serif;
            font-weight: bold;
            width: 260px;
            position: absolute;
            top: 17px;
            left: 210px;
            margin: 0;
            font-size: 14px;
            line-height: 17px;
        }

        .klantenservice-2015 .column2 .winkel p {
            font-family: open-sans, arial, sans-serif;
            position: absolute;
            top: 55px;
            left: 210px;
            margin: 0;
            color: white;
        }

        .klantenservice-2015 .column2 .winkel span {
            font-family: open-sans, arial, sans-serif;
            position: absolute;
            top: 84px;
            left: 210px;
            font-weight: bold;
            text-transform: uppercase;
            background: #fff02a;
            padding: 0 7px;
            font-size: 13px;
            line-height: 21px;
        }

        .klantenservice-2015 .column2 .winkel span.second {
            left: 370px;
        }

/* Navigation x 3 */
    .klantenservice-2015 .column2 .lp-box-3 {
        margin-top: 17px;
        font-size: 0;
    }

    .klantenservice-2015 .column2 .lp-box-3 a {
        display: block;
        position: relative;
        float: left;
        margin-right: 10px;
    }

    .klantenservice-2015 .column2 .lp-box-3 a:last-of-type {
        margin-right: 0;
    }

    .klantenservice-2015 .column2 .lp-box-3 a h3 {
        font-family: "Peppermint",arial,sans-serif;
        position: absolute;
        text-transform: uppercase;
        bottom: 12px;
        left: 15px;
        color: white;
        line-height: 22px;
        font-size: 20px;
        font-weight: normal;
        margin: 0;
    }


.klantenservice-2015 .column3 {
    width: 190px;
    float: left;
}

    .klantenservice-2015 .column3 .sideBlock {
        width: 100%;
        margin-bottom: 17px;
    }

        .klantenservice-2015 .column3 .title {
            background: black;
            padding: 0 17px;
            font-family: open-sans, arial, sans-serif;
            color: white;
            font-size: 16px;
            line-height: 32px;
        }

        .klantenservice-2015 .column3 .content {
            border: solid #f1f2f5;
            border-width: 0 1px 1px 1px;
            padding: 16px 14px 12px 17px;
            font-family: open-sans, arial, sans-serif;
            font-size: 12px;
            color: #1f211c;
            line-height: 22px;
        }

            .klantenservice-2015 .column3 .content p {
                margin: 0;
            }

            .klantenservice-2015 .column3 .content h5 {
                text-transform: uppercase;
                font-size: 14px;
            }

            .klantenservice-2015 .column3 .content a.button {
                background: #feeb34;
                padding: 5px 16px;
                font-family: museo-sans-rounded, arial, sans-serif;
                font-size: 14px;
                margin-top: 17px;
                text-transform: uppercase;
                display: inline-block;
                border: 2px solid #feeb34;
            }

                .klantenservice-2015 .column3 .content a.button:hover {
                    background: none;
                    text-decoration: none;
                }

/* Mobile */
@media (max-device-width: 760px) {
    .klantenservice-2015 {
        width: auto;
    }

    .klantenservice-2015 .column1, .klantenservice-2015 .column2, .klantenservice-2015 .column3 {
        width: auto;
        float: none;
        margin-bottom: 20px;
    }

    .lp-box-3 br {
        display: none;
    }

    .klantenservice-2015 .column2 .lp-box-3 a {
        margin-bottom: 8px;
    }

    .klantenservice-2015 .column2 .lp-box-3 a h3 {
        width: 167px;
        min-width: auto;
    }

    .klantenservice-2015 .column2 .lp-box-3 a:last-of-type {
        margin-right: 10px;
    }

    .klantenservice-2015 .column2 .winkel {
        height: 146px;
        width: auto;
        background-position: right;
        background-repeat: none;
        background-size: cover;
        max-width: 380px;
        margin-bottom: 0;
    }

    .klantenservice-2015 .column2 .winkel h3, .klantenservice-2015 .column2 .winkel p, .klantenservice-2015 .column2 .winkel span {
        left: 10px;
    }

    .klantenservice-2015 .column2 .winkel span.second {
        left: 10px;
        top: 113px;
    }
}