.productbox {
    background-color: #fff;
    border: 1px solid #d1d3d4;
    border-radius: 20px;
    margin-bottom: 15px;
}

.productbox-header {
    padding: 15px;
}

.productbox-body {
    padding: 15px;
}

.productbox-met-volgnummer {
    overflow: hidden;
    position: relative;
}

.productbox-volgnummer {
    position: absolute;
	display: block;
	height: 100px;
	width: 100px;
	left: -50px;
	top: -50px;
	border-radius: 50px;
	background-color: #89d0c8;
	padding-top: 58px;
	padding-left: 56px;
    padding-right: 10px;
	font-size: 20px;
    text-align: center;
	color: #fff;
	font-weight: bold;
}

.productbox-footer {
    background-color: #5dc4bf;
    color: #fff;
    padding: 0px 15px 0px 15px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    text-align: center;
}

.productbox-header ~ .productbox-body  {
    padding-top: 0px;
}

.productbox-seperator {
    margin-top: 15px;
    border-bottom: 1px solid #ebebec;
}

.productbox-footer.top:before {
    content: " ";
    position: absolute;
    right: calc(50% - 20px);
    margin-top: -20px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #5dc4bf;
}

.productbox-footer.top {
    margin-top: 25px;
}

.productbox-footer.right:before {
    right: calc(10%);
}

.productbox-footer.left:before {
    left: calc(10%);
    right: inherit;
}

.productbox-footer.background-yellow.top:before {
    border-bottom-color: #ffc222;
}

.productbox-body ~ .productbox-footer.top {
    margin-top: 15px;
}

@media (min-width: 1200px) {
    .productbox {
        margin-bottom: 30px;
    }
}