/* WATERPARKEN */
div.image.col4.waterpark{ 
  position:relative; 
}

a.duurzaam,
a.waterpark {
    content: '';
    width: 101px;
    height: 71px;
    background-size: 101px 71px;
    position: absolute;
    left: -15px;
    top: -20px;
    z-index: 1;


    &:hover {
        cursor: help;
    }
    /*&:nth-of-type(3) {
        top: 95px;
    }*/
}

a.duurzaam {
    background: url(https://cdn.prijsvrij.nl/Upload/Images/Icon/groen-blad.png);
    background-size:cover;
    background-position:-30px;
}
a.waterpark {
    background: url(//cdn.prijsvrij.nl/Upload/images/icon/splash.png);
}

li.duurzaam a.duurzaam,
li.waterpark a.waterpark {
    left: -15px;
    top: -25px;

    &:nth-of-type(3) {
        top: 95px;
    }
}


.duurzaam-tooltip,
.waterpark-tooltip{
  
  padding:5px;
  color:#000;
  width:200px;
  .border-radius(5px);
  z-index:1;
  font-size:12px;

  strong { font-size:14px; }
}

.duurzaam-tooltip {
    background-color: #98FB98;
}
.waterpark-tooltip {
    background-color: #faf370;
}


    @media (max-width: 767px) {
        li.duurzaam a.duurzaam,
        li.waterpark a.waterpark {
            top: 0px;
        }
    }

    body.detail #content-center a.arrow,
    li.icon a.arrow {
        position: absolute;
        z-index: 99;
        left: 8px;
        top: -20px;
        height: 26px;
        width: 106px;
        cursor: help;
        .box-sizing();
    }

    body.detail #content-center a.arrow::before,
    li.icon a.arrow::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        border: 1px solid #fff;
        border-radius: 3px;
        .box-sizing();
        background-color: #16b4ef;
        position: absolute;
        top: 0;
        left: 0;
        width: 29px;
        height: 26px;
    }

    body.detail #content-center a.arrow > span.logo,
    li.icon a.arrow > span.logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 29px;
        height: 26px;
        background-size: 100% 100%;
    }

    body.detail #content-center a.arrow > span.text,
    li.icon a.arrow > span.text {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        height: 24px;
        line-height: 22px;
        margin-top: 1px;
        .box-sizing();
        background: rgba(0,0,0,0.40);
        overflow: hidden;
        color: #fff;
        font-family: 'tga_bold';
        font-size: 10px;
        font-weight: bold;
        padding: 0 5px;
        position: absolute;
        left: 29px;
        width: 78px;
    }

    body.detail #content-center a.arrow span.title,
    li.icon a.arrow span.title {
        width: 65px;
        position: absolute;
        right: 5px;
        text-align: left;
    }
    /* ANIMATIE 'TERUG' DUS MOUSEOUT */
    body.detail #content-center a.arrow,
    li.icon a.arrow {
        .transition( width 1s ease 0.5s );

        & > span.text {
            .transition( width 1s ease 0.5s );

            span.description {
                .opacity(0);
                float: left;
                color: @color-secondary;
                .transition( opacity 0.5s ease 0s );
            }
        }
    }
    /* ANIMATIE 'HEEN' DUS MOUSEOVER */
    body.detail #content-center a.arrow.clicked,
    body.detail #content-center a.arrow:hover,
    li.icon a.arrow.clicked,
    li.icon a.arrow:hover {
        width: 245px;
        .transition( width 1s ease 0s );

        & > span.text {
            width: 215px;
            .transition( width 1s ease 0s );

            span.description {
                .opacity(1);
                .transition( opacity 0.5s ease 0.5s );
            }
        }
    }
    /* als je 2 keer klikt, geforceerd sluiten */
    body.detail #content-center a.arrow.closed,
    li.icon a.arrow.closed {
        width: 106px !important;

        & > span.text {
            width: 78px !important;

            span.description {
                .opacity(0) !important;
                .transition( opacity 0s ease 0s );
            }
        }
    }
    /* POSITIE RESULTATENPAGINA */
    li.icon a.arrow {
        top: 10px;

        &:nth-of-type(2) {
            top: 40px;
        }

        &:nth-of-type(3) {
            top: 70px;
        }

        &:nth-of-type(4) {
            top: 100px;
        }

        &:nth-of-type(5) {
            top: 130px;
        }
    }
    /* POSITIE DETAILPAGINA */
    body.detail #content-center a.arrow {
        /*Hier zit een andere a tussen, dus de 1e is de 2e nth-of-type */
        &:nth-of-type(2) {
            top: 10px;
        }

        &:nth-of-type(3) {
            top: 40px;
        }

        &:nth-of-type(4) {
            top: 70px;
        }

        &:nth-of-type(5) {
            top: 100px;
        }
    }
    /* Voorgedefinieerde achtergrondkleuren */
    body.detail #content-center a.arrow,
    li.icon a.arrow {
        &.purple::before {
            background-color: #a300d9;
        }

        &.red::before {
            background-color: #d93600;
        }

        &.yellow::before {
            background-color: #ffbf00;
        }

        &.green::before {
            background-color: #00b22d;
        }

        &.water::before {
            background-image: url(https://cdn.prijsvrij.nl/Upload/Images/Icon/Theme/water.png);
            background-size: 100%;
        }
    }
    /* WATERPARKEN */