/* ======= Variables ======= */
/* :root {
  --brand-primary: #003120;
  --brand-secondary: #71B644;
  --brand-accent: #E7EDFF;
  --neutral-dark: #000;
  --neutral-light: #fff;
} */

/* ======= Duurzaamheid - Dot ======= */

.c-duurzaamheid__dot{
    width: 20px !important;
    height: 20px !important;
    background-color: var(--brand-primary) !important;

    transform: translateY(-50%) translateX(-48px) !important;
    border-radius: 50% !important;

    opacity: 0 !important;
    transition: all 0.4s ease !important;
}

.c-duurzaamheid__dot--alt{
    transform: translateY(-50%) translateX(48px) !important;
}

@media(max-width: 1024px){
    .c-duurzaamheid__dot--alt{
        transform: translateY(-50%) translateX(-48px) !important;
        left: calc(100% + 16px) !important;
    }
}

.u-observed .c-duurzaamheid__dot{
    opacity: 1 !important;
    transform: translateX(0) !important;
}

@media(max-width: 576px){
    .c-duurzaamheid__dot{
        display: none !important;
    }
}