.illustration-wrapper,
.illustration-wrapper a {
    display: flex;
    align-items: center;
}

.illustration-wrapper.left,
.illustration-wrapper.left a .header-abandoned-shopping-basket-notice {
    justify-content: flex-start;
}

.illustration-wrapper.center,
.illustration-wrapper.center a {
    justify-content: center;
}

.illustration-wrapper.right,
.illustration-wrapper.right a {
    justify-content: flex-end;
}

.illustration {
    display: block;
    width: 100%;
}

.illustration.large {
    width: 75%;
}

.illustration.medium {
    width: 50%;
}

.illustration.small {
    width: 25%;
}

.illustration-caption {
    padding: 5px 10px;
    background: #777;
    color: #fff;
}

.illustration-container.clr-wit {
    margin: 0 0 40px;
    padding: 20px;
    background: #fff;
}

.illustration-container.clr-zwart {
    margin: 0 0 40px;
    padding: 20px;
    background: #000;
    color: #fff;
}

.illustration-container.clr-lightgrijs {
    margin: 0 0 40px;
    padding: 20px;
    background: #efefef;
}

.illustration-container.clr-donkergrijs {
    margin: 0 0 40px;
    padding: 20px;
    background: #4a4f56;
    color: #fff;
}

.illustration-container.clr-accent {
    margin: 0 0 40px;
    padding: 20px;
    background: #0084bc;
    color: #fff;
}

.illustration-container.clr-accent2 {
    margin: 0 0 40px;
    padding: 20px;
    background: #5ebc02;
}

.illustration-container.transparant {
    margin: 0 0 40px;
    background: none;
}

.illustration-container.clr-action {
    margin: 0 0 40px;
    background: #e33e86;
}

.illustration-link-wrapper {
    padding: 20px 0 0;
    font-weight: 900;
    text-decoration: none;
}

.illustration-link-wrapper a {
    display: block;
}

.illustration-link-wrapper.topborder a {
    padding: 15px 0 0;
    border-top: 1px solid #000;
}

.illustration-button-wrapper {
    padding: 20px 0 0;
}

.illustration-button-wrapper.topborder {
    margin: 20px 0 0;
    padding: 15px 0 0;
    border-top: 1px solid #000;
}

.illustration-container.clr-accent .illustration-button-wrapper.topborder,
.illustration-container.clr-donkergrijs .illustration-button-wrapper.topborder {
    border-top: 1px solid #fff;
}

.illustration-container.clr-donkergrijs .button {
    background-color: #fff;
    color: #000;
}

.illustration-container.clr-donkergrijs .product-info-bestelitem-button-icon {
    background: url('../images/icon-bezoek.svg') 2px 2px / 16px auto no-repeat;
}

.clr-action .illustration-wrapper {
    margin: 0 0 15px !important;
}

.illustration-container.clr-action .illustration-intro-wrapper {
    padding: 0 20px;
    color: #fff;
}

.illustration-container.clr-action .illustration-link-wrapper {
    padding: 0 20px 20px;
}

.illustration-container.clr-action .illustration-link-wrapper a {
    color: #fff;
}

.illustration-container.clr-action.left,
.illustration-container.clr-action.right {
    display: flex;
}

.clr-action.left .illustration-wrapper.left {
    order: 0;
    flex: 0 0 30%;
    margin: 0 !important;
}

.clr-action.right .illustration-wrapper.right {
    order: 1;
    flex: 0 0 30%;
    margin: 0 !important;
}

.illustration-container.clr-action.left .illustration-intro-wrapper,
.illustration-container.clr-action.right .illustration-intro-wrapper {
    padding: 10px 20px 0;
}