/* *{
    box-sizing:border-box;
}
html, body, container{
    padding:0;
    margin:0;
    height:100%;
    font-family:arial;
    color:#333;
}
container, content{
    display:flex;
    justify-content:center;
    align-items:center;
}*/

/* --------- */

box{
	display:inline-block;
	width:190px;
	height:190px;
	border:1px solid #a3a3a3;
	border-radius:5px;
	margin:8px;
	background-position:center;
	background-size:cover;
	position:relative;
	box-shadow:5px 5px 10px #ccc;
	cursor:pointer;
}
    box span {
        display: block;
        position: absolute;
        z-index: 5;
        overflow: hidden;
        background-color: rgba(29, 150, 22, 0.8) /*rgba(150, 192, 47, 0.8) rgba(254, 174, 89, 0.8)*/;
        bottom: 0;
        left: 0;
        right: 0;
        height: 65px;
        padding: 8px 8px 0;
        transition: all ease .3s;
        color: #fff;
    }
box span p{
	opacity: 0;
	transition: all ease .8s;
	font-size: 17px;
}
box span h3{
	margin:0 0 12px;
	padding:0;
	font-weight:bold;
}
box span p {
	padding: 0 3px;
}
box::after{
	content:"";
	display:block;
	position:absolute;
	z-index:4;
	background-color:rgba(255, 255, 255, .2);
	top:0; right:0; bottom:0; left:0;
}
box:hover span{
	height:100%;
}
box:hover span p{
	opacity: 1;
}

.artikelsectie {
    display: inline-flex;
    flex-direction: column;
    width: 190px;
    height: 250px;
    border: 1px solid #a3a3a3;
    border-radius: 5px;
    margin: 8px;
    background-position: center;
    background-size: cover;
    position: relative;
    box-shadow: 5px 5px 10px #ccc;
    cursor: pointer;
    text-align: center;
    padding: 0 10px;
    vertical-align: top;
    transition: all .55s ease-in-out;
}

    .artikelsectie:hover {
        color: white;
        background-color: var(--artikelBackColorHover);
    }

.artikelsectie img {
    background-color: var(--artikelImgBackColor);
    border-radius: 14px;
    background-clip: content-box;
}
       
    .artikelsectie:hover img {
            transform: scale(1.15);
            background-color: transparent;
     }

/*.artikelimgsectie .imgdiv {
    display: none;
    height: unset;
    width: unset;
    opacity: 0;*/
    /*transition: opacity 0.5s ease-in;*/
/*}
    .artikelimgsectie:hover .imgdiv {
    display: block !important;*/
 /*   transition: all .55s ease-in-out;
     */
 /*opacity:1 !important;
}*/

    .artikelsectie .titel {
        font-size: 18px;
        line-height: 21px;
        width: 180px;
        overflow: hidden;       
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 8px 0;
        text-align:left;
    }

.svg-spinners--bars-fade {
    display: inline-block;
    width: 186px;
    height: 50px;
    --svg: url( 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200"> <rect fill="%234640FF" stroke="%234640FF" stroke-width="26" width="10" height="58" x="0" y="15"> <animate attributeName="opacity" calcMode="spline" dur="4" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-2.25"></animate> </rect> <rect fill="%234640FF" stroke="%234640FF" stroke-width="26" width="10" height="58" x="50" y="15"> <animate attributeName="opacity" calcMode="spline" dur="4" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-2"></animate> </rect> <rect fill="%234640FF" stroke="%234640FF" stroke-width="26" width="10" height="58" x="100" y="15"> <animate attributeName="opacity" calcMode="spline" dur="4" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-1.75"></animate> </rect> <rect fill="%234640FF" stroke="%234640FF" stroke-width="26" width="10" height="58" x="150" y="15"> <animate attributeName="opacity" calcMode="spline" dur="4" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-1.5"></animate> </rect> <rect fill="%234640FF" stroke="%234640FF" stroke-width="26" width="10" height="58" x="200" y="15"> <animate attributeName="opacity" calcMode="spline" dur="4" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-1.25"></animate> </rect> <rect fill="%234640FF" stroke="%234640FF" stroke-width="26" width="10" height="58" x="250" y="15"> <animate attributeName="opacity" calcMode="spline" dur="4" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-1"></animate> </rect> <rect fill="%234640FF" stroke="%234640FF" stroke-width="26" width="10" height="58" x="300" y="15"> <animate attributeName="opacity" calcMode="spline" dur="4" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-0.75"></animate> </rect> <rect fill="%234640FF" stroke="%234640FF" stroke-width="26" width="10" height="58" x="350" y="15"> <animate attributeName="opacity" calcMode="spline" dur="4" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-0.5"></animate> </rect> <rect fill="%234640FF" stroke="%234640FF" stroke-width="26" width="10" height="58" x="400" y="15"> <animate attributeName="opacity" calcMode="spline" dur="4" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-0.25"></animate> </rect> <rect fill="%234640FF" stroke="%234640FF" stroke-width="26" width="10" height="58" x="450" y="15"> <animate attributeName="opacity" calcMode="spline" dur="4" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="0"></animate> </rect> </svg>'); 
    background-color: var(--menuheaderselected_BG); 
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.DivMiddle {
    display: grid;
    align-items: center;
}

.disabled{
    pointer-events:none;
    opacity:0.5;
}