/* BLOCK VIEW (block.html.twig) */
.mx_pagination ul {
    margin: 0 !important;
}

#mx_news_block {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2%; /* Deze zorgt voor een ruimte tussen de items */
    margin: 40px 0;
    max-width:1400px;
        margin: 0 auto; 
    
}

@keyframes fadeInFly {
    from {
        opacity: 0;
        transform: translateY(30px); /* Laat het van onder naar boven invliegen */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mx_news_block_item {
    display: flex;
    flex-direction: column;
    width: 31.333%;
    margin-bottom: 40px;
    padding-bottom: 15px;
    margin-top: 60px;

     position:relative;
 opacity: 0; /* Start onzichtbaar */
    transform: translateY(30px);
     transition: opacity 0.8s ease-out 0.3s, transform 0.8s ease-out 0.3s; /* 0.3s vertraging */
}
.mx_news_block_item.visible  {
    opacity: 1;
    transform: translateY(0);
}

.mx_news_block_item:nth-of-type(3), .mx_news_block_item:nth-of-type(6) {
    margin-right: 0;
}

.mx_news_block_date {
      align-self: center;
    margin-top: 0;
    width: 120px;
    height: 120px;
    background-color: #ffdd00;
    color: #009fe3;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    top: -52px;
    padding: 23px;
    font-weight: bold;
    z-index: 9;
}

.mx_news_block_date time {
    text-align: center;
}

.mx_news_block_date .day-month {
    font-size: 28px; /* Pas de grootte van de dag/maand aan */
    font-weight: bold;
}

.mx_news_block_date .year {
    font-size: 24px; /* Maak het jaartal kleiner */
    font-weight: bold;
    margin-top: -46px; /* Brengt het jaartal dichter bij de dag/maand */
}


.mx_news_block_date span {
    display: block;
    font-family: 'Montserrat', sans-serif;
    line-height: 44px;
    font-size: 32px;
    margin-top: 2px;
}

.mx_news_block_item h3 {
    margin: 0;
    padding: 0;
    color: #009fe3;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 26px;
}

.mx_news_block_item em {
    display: block;
    margin-bottom: 15px;
    font-size: 14px;
    color: #000;
}

.mx_news_block_item em a {
    display: inline-block;
    color: #000;
}

.mx_news_block_image img {
    width: 100%;
    height: auto;
    -webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

.mx_news_block_image {
    margin-bottom: 35px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    position: relative; /* Dit is nodig voor het positioneren van de cirkel */
}

.mx_news_block_image::after {
    content: "";
    position: absolute;
    bottom: -31px; /* Afstand van de cirkel ten opzichte van de afbeelding */
    left: 50%;
    transform: translateX(-50%);
    width: 50px; /* Diameter van de cirkel */
    height: 50px; /* Diameter van de cirkel */
    background-color: white;
    border-radius: 50%; /* Maakt het een cirkel */
   
}

.mx_news_block_image::before {
    content: "";
    position: absolute;
    bottom: -15px; /* Plaats de gele streep net boven de cirkel */
    left: 0;
    width: 100%;
    height: 4px; /* Hoogte van het gele streepje */
    background-color: #ffdd00; /* Kleur van het streepje */
}


.mx_news_block_content {
        padding: 0px 0 40px;
}

.mx_news_block_footer {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Zorgt ervoor dat de button aan de onderkant staat */
    position: absolute;
    bottom:0;
    width: 100%;
    padding: 0; /* Verwijder eventueel extra ruimte */
}

.mx_news_block_footer a {
    display: block;
    padding: 9px 5px;
    color: #FFFFFF;
    background-color: #ffdd00;
    border: solid 2px #ffdd00;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    line-height: 100%;
    transition: all 500ms ease;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    text-align: right;
    color: #00a1e4;
    -webkit-border-bottom-right-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    position: relative;
}

.mx_news_block_footer a::before {
    content: "";
    position: absolute;
    top: -39px; /* Plaatst de cirkel boven de knop */
    left: 50%;
    transform: translateX(-50%); /* Centreert het element */
    width: 50px; /* Breedte van de cirkel */
    height: 50px; /* Zorgt ervoor dat de hoogte gelijk is aan de breedte voor een perfecte cirkel */
    background-color: #ffffff; /* Witte kleur voor de cirkel */
    border-radius: 50%; /* Maakt het element een perfecte cirkel */
}

.mx_news_block_footer a:hover {
    color: #FFFFFF;
    background-color: #009fe3;
    border: solid 2px #009fe3;
}

@media screen and (max-width: 1500px) {
    .mx_news_block_item {
     
    }

    .mx_news_block_item:nth-of-type(2) {
        margin-right: 0;
    }

    .mx_news_block_item:nth-of-type(3) {
        margin-right: 2%;
    }
}

@media screen and (max-width: 768px) {
	
	.mx_news_block_footer {position:inherit;}
	
    .mx_news_block_item {
        width: 100%;
        margin: 1% 0 90px 0;
        padding: 0 25px;
        
    }
    
    #mx_news_block {
        justify-content: center;
    }
}

@media screen and (max-width: 550px) {
    .mx_news_category_date {
        font-size: 24px;
    }

    .mx_news_category_date span {
        font-size: 38px;
    }
}



#mx_news_category {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2%;
    margin: 40px 0;
    max-width: 1400px;
    margin: 0 auto;
}

.mx_news_category_item {
    display: flex;
    flex-direction: column;
    width: 31.333%;
    margin-bottom: 40px;
    padding-bottom: 15px;
    margin-top: 60px;
    position: relative;
    transform: translateY(30px);
     transition: opacity 0.8s ease-out 0.3s, transform 0.8s ease-out 0.3s; /* 0.3s vertraging */
}
.mx_news_category_item.visible {
    opacity: 1;
    transform: translateY(0);
}

.mx_news_category_item:nth-of-type(3), .mx_news_category_item:nth-of-type(6) {
    margin-right: 0;
}

.mx_news_category_date {
    align-self: center;
    margin-top: 0;
    width: 120px;
    height: 120px;
    background-color: #ffdd00;
    color: #009fe3;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    top: -52px;
    padding: 23px;
    font-weight: bold;
    z-index: 9;
}

.mx_news_category_date time {
    text-align: center;
}

.mx_news_category_date .day-month {
    font-size: 28px;
    font-weight: bold;
}

.mx_news_category_date .year {
    font-size: 24px;
    font-weight: bold;
    margin-top: -46px;
}

.mx_news_category_item h3 {
    margin: 0;
    padding: 0;
    color: #009fe3;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 26px;
}

.mx_news_category_image img {
    width: 100%;
    height: auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.mx_news_category_image {
    margin-bottom: 35px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    position: relative;
}

.mx_news_category_image::after {
    content: "";
    position: absolute;
    bottom: -31px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%;
}

.mx_news_category_image::before {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #ffdd00;
}

.mx_news_category_footer {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0;
}

.mx_news_category_footer a {
    display: block;
    padding: 9px 5px;
    color: #00a1e4;
    background-color: #ffdd00;
    border: solid 2px #ffdd00;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    line-height: 100%;
    transition: all 500ms ease;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    text-align: right;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    position: relative;
}

.mx_news_category_footer a::before {
    content: "";
    position: absolute;
    top: -39px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 50%;
}

.mx_news_category_footer a:hover {
    color: #FFFFFF;
    background-color: #009fe3;
    border: solid 2px #009fe3;
}

@media screen and (max-width: 768px) {
	
		.mx_news_catergory_footer {position:inherit;}
	
    .mx_news_category_item {
        width: 100%;
        margin: 1% 0 90px 0;
        padding: 0 25px;
    }
    
    #mx_news_category {
        justify-content: center;
    }
}

@media screen and (max-width: 550px) {
    .mx_news_category_date {
        font-size: 24px;
    }

    .mx_news_category_date span {
        font-size: 38px;
    }
}