.baby-nurse a,
.little-smoby a {
    display: inline-block;
}

.baby-nurse--container,
.little-smoby--container {
    position: relative;
    width: calc(295px + 56px);
    height: calc(132px + 32px);

    margin-bottom: 2rem;

    animation: littleSmobyContainer 2s ease forwards;
    animation-delay: .5s;

    opacity: 0;
}

@keyframes littleSmobyContainer {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.baby-nurse--banner,
.little-smoby--banner {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 295px;
    height: 132px;

    background: transparent url(/build/img/little_smoby/banner.png) center no-repeat;

    border-radius: 50rem;

    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .1));

    z-index: 3;

    transition: all .2s linear;
}

.baby-nurse--banner {
    background-image: url(/build/img/little_smoby/bn-banner.png);
}

.baby-nurse a:hover .baby-nurse--banner,
.little-smoby a:hover .little-smoby--banner {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, .3));
}

.baby-nurse--link,
.little-smoby--link {
    position: absolute;
    bottom: -2rem;
    left: 0;

    width: 100%;

    text-align: center;
    white-space: nowrap;
    color: #859f97;

    z-index: 4;
    transition: all .2s linear;
}

.baby-nurse--link {
    color: #e0ccb1;
}

.baby-nurse a:hover .baby-nurse--link,
.little-smoby a:hover .little-smoby--link {
    color: var(--scheme-primary)
}

.baby-nurse--logo,
.little-smoby--logo {
    position: absolute;
    top: 5px;
    right: 5px;

    width: calc(124px - 2px);
    height: calc(124px - 2px);

    background: transparent url(/build/img/little_smoby/logo.png) center no-repeat;
    background-size: contain;

    z-index: 3;

    animation: littleSmobyLogo 1.5s ease forwards;
    animation-delay: 1s;
    opacity: 0;
}

.baby-nurse--logo {
    background: transparent url(/build/img/little_smoby/bn-logo.png) center no-repeat;
}

@keyframes littleSmobyLogo {
    from {
        right: calc(124px + 56px);
        transform: rotate(-360deg);
    }

    40% {
        opacity: 1;
    }

    to {
        opacity: 1;
        right: 5px;
        transform: rotate(0);
    }
}

/*.baby-nurse--leaf,*/
.little-smoby--leaf {
    position: absolute;
    top: 0;
    right: calc(30px + 56px);

    width: 50px;
    height: 111px;

    background: transparent url(/build/img/little_smoby/blatt.png) center no-repeat;
    background-size: contain;

    z-index: 1;

    animation: littleSmobyLeafWiggle 2s ease infinite alternate, littleSmobyLeafFade 1s ease forwards;
    animation-delay: 0s, 3s;

    transform-origin: bottom center;
    transform: rotate(-10deg);
    opacity: 0;
}

@keyframes littleSmobyLeafWiggle {
    from {
        transform: rotate(-10deg);
    }
    to {
        transform: rotate(10deg);
    }
}

@keyframes littleSmobyLeafFade {
    from {
        top: 50px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

/*.baby-nurse--tiggi,*/
.little-smoby--tiggi {
    position: absolute;
    bottom: 13px;
    right: 0;

    width: 95px;
    height: 129px;

    background: transparent url(/build/img/little_smoby/tiggi.png) center no-repeat;
    background-size: contain;

    animation: littleSmobyTiggi 1s ease forwards;
    animation-delay: 4s;

    z-index: 1;

    opacity: 0;
}

@keyframes littleSmobyTiggi {
    from {
        opacity: 0;
        transform: translate(-100%, 20px) scale(.8);
    }
    30% {
        opacity: 1;
    }
    to {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .baby-nurse,
    .little-smoby {
        display: flex;
        justify-content: center;
        margin-top: -2rem;
        margin-bottom: 1rem;
    }
}

@media (min-width: 1200px) {
    .baby-nurse,
    .little-smoby {
        margin-bottom: -5rem;
    }
}