#map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}




body#naturlehrpfad::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

body#naturlehrpfad::-webkit-scrollbar {
    width: 20px;
    background-color: #F5F5F5;
}


body#naturlehrpfad::-webkit-scrollbar-thumb {
    border-radius: 10px;
    height: 20px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #e3a036;
}

.nlp-scroll-bar-area h2 {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 0%;
    transform: rotate(270deg) translate(-50%, 0%);
    -webkit-text-fill-color: white;
    font-size: 2em;
    text-transform: uppercase;
    transform-origin: center;
    white-space: nowrap;
}

.nlp-scroll-bar-area {
    position: fixed;
    top: 0;
    right: 0;
    width: 6em;
    height: 100%;
    z-index: 10;
    background: rgb(15, 52, 65);
    background: -moz-linear-gradient(0deg, rgba(15, 52, 65, 1) 0%, rgba(16, 38, 34, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(15, 52, 65, 1) 0%, rgba(16, 38, 34, 1) 100%);
    background: linear-gradient(0deg, rgba(15, 52, 65, 1) 0%, rgba(16, 38, 34, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0f3441", endColorstr="#102622", GradientType=1);
}

/* ///// NATURLEHRPFAD STORYTELLING ///// */

a.nlp-rd-logo {
    position: fixed;
    top: 2em;
    left: 7%;
    width: 100px;
    height: 100px;
    background-image: url(../images/reussdelta-logo-bubble.svg);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1000;
}

a.nlp-rd-logo p {
    position: absolute;
    bottom: -52px;
    left: -27px;
    color: #fff;
    -webkit-text-fill-color: #ffffff;
    white-space: nowrap;
    text-shadow: 1px 1px 1px #000000;
}

#map a.nlp-rd-log,
#map a.nlp-rd-log p {
    color: #fff;
    -webkit-text-fill-color: #ffffff;
}

.item-page.naturlehrpfad {
    background: rgb(15, 52, 65);
    background: -moz-linear-gradient(0deg, rgba(15, 52, 65, 1) 0%, rgba(16, 38, 34, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(15, 52, 65, 1) 0%, rgba(16, 38, 34, 1) 100%);
    background: linear-gradient(0deg, rgba(15, 52, 65, 1) 0%, rgba(16, 38, 34, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0f3441", endColorstr="#102622", GradientType=1);
    color: #fff;
}

.naturlehrpfad-bg {
    position: absolute;
    display: block;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 1;
    background-image: url(/static/images/heaven-bg.webp);
    background-size: cover;
    background-position: center;
}

.noise {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.05;
    background-image: url("../images/naturlehrpfad/noise.gif");
    background-repeat: repeat;
    z-index: 2;
}


.cloud {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.2;
    z-index: 2;
}

.cloud:before,
.cloud:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 600%;
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;
}



.cloud:before {
    background-image: url(/static/images/clouds.png);
    animation: drift 60s linear 0s infinite;
}

@keyframes drift {
    from {
        transform: translate3d(-200vw, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}


.nlp-intro {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    opacity: 1;
}


#container.naturlehrpfad-map {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80vw;
    height: 35vw;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%,-50%);
}

img#map-webp {
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
}

#container.naturlehrpfad-map #boxed, #container.naturlehrpfad-map #medium {
    height: 100%;
}

.naturlehrpfad {
    position: relative;
    background: rgb(15, 52, 65);
    background: -moz-linear-gradient(0deg, rgba(15, 52, 65, 1) 0%, rgba(16, 38, 34, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(15, 52, 65, 1) 0%, rgba(16, 38, 34, 1) 100%);
    background: linear-gradient(0deg, rgba(15, 52, 65, 1) 0%, rgba(16, 38, 34, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0f3441", endColorstr="#102622", GradientType=1);
}


.nlp-scroll-bar-area {
    position: fixed;
    top: 0;
    right: 0;
    width: 6em;
    height: 100%;
    z-index: 10;
    background: rgb(15, 52, 65);
    background: -moz-linear-gradient(0deg, rgba(15, 52, 65, 1) 0%, rgba(16, 38, 34, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(15, 52, 65, 1) 0%, rgba(16, 38, 34, 1) 100%);
    background: linear-gradient(0deg, rgba(15, 52, 65, 1) 0%, rgba(16, 38, 34, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0f3441", endColorstr="#102622", GradientType=1);
}

.nlp-scroll-bar {
    position: fixed;
    top: 0;
    right: 6em;
    width: 10px;
    height: 0;
    z-index: 10;
    background-color: #e3a036;
}

.nlp-scroll-bar-area .scroll-text {
    position: absolute;
    top: 1em;
    bottom: auto;
    transform: rotate(270deg) translate(-50%, 0%);
    transform-origin: center;
    -webkit-transform-origin: center right;
    -webkit-transform: rotate(270deg) translate(-50%, 0%);
    white-space: nowrap;
    right: 50%;
    width: 60px;
    height: 20px;
    line-height: 1.4;
}


.nlp-scroll-bar-area .scroll-text span {
    position: absolute;
    top: 0;
    left: -15px;
    width: 20px;
    height: 20px;
    margin-left: 0;
    border-left: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: sdb05 1.5s infinite;
    animation: sdb05 1.5s infinite;
    box-sizing: border-box;
    border-radius: 5%;
}


.nlp-scroll-bar-text {
    color: #fff;
}


.scene {
    z-index: 4;
}

#specks {
    position: absolute;
    z-index: 999;
    height: 100vh;
    width: 100vw;
}

.speck {
    opacity: 0;
    height: 4px;
    width: 4px;
    background-size: cover;
    position: absolute;
    border-radius: 10px;
    z-index: 99;
}

.img {
    position: absolute;
    height: 100000px;
    width: 100000px;
    top: -8500px;
    left: -8000px;
    animation-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
    animation-name: float;
    animation-iteration-count: infinite;
}

#img-1 {
    opacity: 0.25;
    background: url(../images/naturlehrpfad/pickles1.png);
    background-repeat: repeat;
    animation-duration: 600s;
}

#img-2 {
    opacity: 0.15;
    background: url(../images/naturlehrpfad/pickles2.png);
    background-repeat: repeat;
    animation-duration: 450s;
}

#img-3 {
    opacity: 0.1;
    background: url(../images/naturlehrpfad/pickles3.png);
    background-repeat: repeat;
    animation-duration: 350s;
}


/*ANIMATIONS*/

@keyframes twinkle {
    0% {
        transform: translate(0px, 0px);
    }

    30% {
        opacity: 0;
    }

    50% {
        opacity: 0.75;
    }

    70% {
        opacity: 0;
    }

    100% {
        transform: translate(175px, 100px);
    }
}

@keyframes float {
    0% {
        transform: translate(0px, 0px);
    }

    100% {
        transform: translate(8000px, 4000px);
    }
}



.overlay-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(16, 38, 34);
    background: -moz-linear-gradient(90deg, rgba(16, 38, 34, 1) 0%, rgba(15, 52, 65, 0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(16, 38, 34, 1) 0%, rgba(15, 52, 65, 0) 100%);
    background: linear-gradient(90deg, rgba(16, 38, 34, 1) 0%, rgba(15, 52, 65, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#102622", endColorstr="#0f3441", GradientType=1);
    z-index: 2;
    opacity: 0;
}


.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

}

.routenstart {
    margin: 100px 0;
    height: 1px;
}

.space {
    min-height: 80vh;
    width: 30px;
}

.sektoren,
.section {
    z-index: 4;
}

.controlpanel {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    background: #f0f0f0;
    border-radius: 0 20px 20px 0;
    -webkit-box-shadow: 10px 10px 38px -18px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 38px -18px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 38px -18px rgba(0, 0, 0, 0.75);
    z-index: 10;
    padding: 20px;
    display: block;
    float: left;
}

img.flussregenpfeifer,
div#introbird {
    width: 24vw;
    height: 19vw;
    margin-left: 5vw;
    margin-top: 4vw;
}

div#outrobird {
    width: 15vw;
    height: 11vw;
    margin-bottom: 40px;
}

div#outrobird img.flussregenpfeifer {
    width: 100%;
    height: 100%;
    margin-left: 0;
    margin-top: 0;
}


.sprechblase {
    position: relative;
    width: 60vh;
    background: #e3a036;
    padding: 3%;
    border-radius: 50px;
    float: left;
    -webkit-box-shadow: 10px 10px 22px -4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 10px 10px 22px -4px rgba(0, 0, 0, 0.3);
    box-shadow: 10px 10px 22px -4px rgba(0, 0, 0, 0.3);
}

.sprechblase:before {
    content: "";
    position: absolute;
    width: 8vw;
    height: 5vw;
    right: -7.8vw;
    top: 10%;
    background-image: url(/static/images/sprechblase.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.sprechblase h3 {
    color: #fff;
    -webkit-text-fill-color: white;
    font-size: 1.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5%;
	-moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.sprechblase p {
    color: var(--white);
    font-size: 1rem;
}




/*#linesvg {
    position: absolute;
  overflow: visible;
  width: auto;
  height: auto;
  max-width: 80%;
  margin: 10% 40px 100vh 40px;
    z-index: 3;
}*/

svg#scroll-line {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 2;
    right: 30px;
    top: 0;
}

.route-start,
.route-ende,
.route-1,
.route-2,
.route-3,
.route-4,
.route-5,
.route-6,
.route-7,
.route-8,
.route-9,
.route-10,
.route-11,
.route-12,
.route-13,
.route-14 {
    z-index: 2;
    width: 100%;
    height: 100%;
}

.route-ende-container {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    top: -20px;
    left: 0;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    background: rgb(15, 52, 65);
    background: -moz-linear-gradient(0deg, rgba(15, 52, 65, 1) 0%, rgba(16, 38, 34, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(15, 52, 65, 1) 0%, rgba(16, 38, 34, 1) 100%);
    background: linear-gradient(0deg, rgba(15, 52, 65, 1) 0%, rgba(16, 38, 34, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0f3441", endColorstr="#102622", GradientType=1);

}

.route-ende-content {
    position: relative;
    width: 50%;
}

.route-ende-content p {
    color: var(--white);
}

.bird-entry {
    position: fixed;
    display: block;
    top: 160px;
    width: 130px;
    height: auto;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 6;
}

.bird-entry p {
    margin-top: 20%;
}

#wings1,
#wings2,
#wings19,
#wings21,
#wings22,
#wings23 {
    visibility: hidden;
}

.naturlehrpfad-routes {
    position: absolute;
    z-index: 6;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}


svg#route0-svg {
    position: absolute;
    width: 7px;
    top: -100%;
    left: 50%;
    z-index: 3;
    overflow: visible;
}

svg#route1-svg {
    position: absolute;
    width: 10.5%;
    bottom: 33.6%;
    left: 50.35%;
    z-index: 3;
    overflow: visible;
}


svg#route2-svg {
    position: absolute;
    width: 22%;
    bottom: 26.4%;
    left: 38%;
    z-index: 3;
    overflow: visible;
}

svg#route3-svg {
    position: absolute;
    width: 7.6%;
    bottom: 45.0%;
    left: 32.8%;
    z-index: 3;
    overflow: visible;
}

svg#route4-svg {
    position: absolute;
    width: 10.1%;
    bottom: 43.8%;
    left: 23.5%;
    z-index: 3;
    overflow: visible;
}

svg#route5-svg {
    position: absolute;
    width: 16%;
    bottom: 53.8%;
    left: 26.9%;
    z-index: 3;
    overflow: visible;
}

svg#route6-svg {
    position: absolute;
    width: 4.2%;
    bottom: 57.1%;
    left: 42.6%;
    z-index: 3;
    overflow: visible;
}

svg#route7-svg {
    position: absolute;
    width: 10.2%;
    bottom: 63.3%;
    left: 32.4%;
    z-index: 3;
    overflow: visible;
}

svg#route8-svg {
    position: absolute;
    width: 15.7%;
    bottom: 60.4%;
    left: 16.9%;
    z-index: 3;
    overflow: visible;
}

svg#route9-svg {
    position: absolute;
    width: 10.6%;
    bottom: 69.8%;
    left: 20.9%;
    z-index: 3;
    overflow: visible;
}

svg#route10-svg {
    position: absolute;
    width: 7.5%;
    bottom: 66.5%;
    left: 31.25%;
    z-index: 3;
    overflow: visible;
}

svg#route11-svg {
    position: absolute;
    width: 15.5%;
    bottom: 74.8%;
    left: 37%;
    z-index: 3;
    overflow: visible;
}

svg#route12-svg {
    position: absolute;
    width: 19.7%;
    bottom: 64.1%;
    left: 51.95%;
    z-index: 3;
    overflow: visible;
}

svg#route13-svg {
    position: absolute;
    width: 13.2%;
    bottom: 38.8%;
    left: 71.4%;
    z-index: 3;
    overflow: visible;
}

svg#route14-svg {
    position: absolute;
    width: 33.5%;
    bottom: 30.5%;
    left: 46%;
    z-index: 3;
    overflow: visible;
}

svg#route15-svg {
    position: absolute;
    width: 19.5%;
    bottom: 2.5%;
    left: 32.3%;
    z-index: 3;
    overflow: visible;
}

#motionCircleSVG-0,
#motionCircleSVG-1,
#motionCircleSVG-2,
#motionCircleSVG-3,
#motionCircleSVG-4,
#motionCircleSVG-5,
#motionCircleSVG-6,
#motionCircleSVG-7,
#motionCircleSVG-8,
#motionCircleSVG-9,
#motionCircleSVG-10,
#motionCircleSVG-11,
#motionCircleSVG-12,
#motionCircleSVG-13,
#motionCircleSVG-14,
#motionCircleSVG-15 {
    visibility: hidden;
    opacity: 0;
    transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    /* move the origin to top-left */
    -webkit-transform-origin: 50% 50%;
    /* move the origin to top-left */
    /*transformY: 50%;
    transformX: 50%;
    -moz-transformY: 50%;
    -webkit-transformY: 50%;
    -moz-transformX: 50%;
    -webkit-transformX: 50%;*/
    transform: scale(1.4);
}



.nest {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.nest img {
    position: relative;
    width: 40px;
    height: 40px;
    z-index: 2;
}

.nest .ping {
    position: absolute;
    opacity: 0;
    top: -20px;
    left: -20px;
    background: #e3a036;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    z-index: 1;
    -webkit-animation: ping 2s ease-in-out infinite both;
    animation: ping 2s ease-in-out infinite both;
}

.nest p {
    color: #fff;
    font-size: 8px;
    font-family: "UniNeueRegular";
    text-transform: uppercase;
}

.nest1 {
    position: absolute;
    bottom: 30.5%;
    left: 58%;
}

.nest2 {
    position: absolute;
    bottom: 42%;
    left: 37.3%;
}

.nest3 {
    position: absolute;
    bottom: 46%;
    left: 31.5%;
}

.nest4 {
    position: absolute;
    bottom: 50.5%;
    left: 25.4%;
}

.nest5 {
    position: absolute;
    bottom: 53.2%;
    left: 40.8%;
}

.nest6 {
    position: absolute;
    bottom: 61.5%;
    left: 41%;
}

.nest7 {
    position: absolute;
    bottom: 60.4%;
    left: 31%;
}

.nest8 {
    position: absolute;
    bottom: 69.2%;
    left: 19.7%;
}

.nest9 {
    position: absolute;
    bottom: 66%;
    left: 29.6%;
}

.nest10 {
    position: absolute;
    bottom: 72%;
    left: 36%;
}

.nest11 {
    position: absolute;
    bottom: 80.5%;
    left: 50.4%;
}

.nest12 {
    position: absolute;
    bottom: 65.7%;
    left: 70.4%;
}

.nest13 {
    position: absolute;
    bottom: 34.8%;
    left: 77.7%;
}

.nest14 {
    position: absolute;
    bottom: 29.5%;
    left: 44.8%;
}

.nest1 .ping,
.nest2 .ping,
.nest3 .ping,
.nest4 .ping,
.nest5 .ping,
.nest6 .ping,
.nest7 .ping,
.nest8 .ping,
.nest9 .ping,
.nest10 .ping,
.nest11 .ping,
.nest12 .ping,
.nest13 .ping,
.nest14 .ping {
    visibility: hidden;
    opacity: 1;
}


@-webkit-keyframes ping {
    0% {
        -webkit-transform: scale(0.2);
        transform: scale(0.2);
        opacity: 1;
    }

    80% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(2.2);
        transform: scale(2.2);
        opacity: 0;
    }
}

@keyframes ping {
    0% {
        -webkit-transform: scale(0.2);
        transform: scale(0.2);
        opacity: 1;
    }

    80% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(2.2);
        transform: scale(2.2);
        opacity: 0;
    }
}





.thema {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    opacity: 1;
}


.nlp-end {
    position: relative;
    margin-top: 10000vh;
}

.szene {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    border-radius: 0;
    z-index: 7;
    visibility: hidden;
    opacity: 0;
}

.szene-content {
    visibility: hidden;
    opacity: 0;
}

.nlp-bild h3 {
    color: #fff;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-text-fill-color: white;
    text-transform: uppercase;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}




@media screen and (max-width : 1400px)  {

a.nlp-rd-logo {
    left: 3em;
    width: 60px;
    height: 60px;
}

a.nlp-rd-logo p {
    bottom: -38px;
    font-size: 0.8rem;
}

.bird-entry p {
    font-size: 0.8rem;
}

.bird-entry {
    width: 100px;
}

svg#route0-svg {
    width: 5px;
}

.nlp-scroll-bar-area h2 {
    font-size: 1.5em;
}

.sprechblase {
    width: 45vw;
    padding: 2%;
    border-radius: 20px;
}

.sprechblase p {
    line-height: 1.5;
}

.nlp-scroll-bar-area {
    width: 5em;
}

.nlp-scroll-bar {
    right: 5em;
    width: 5px;
}

.nest img {
    width: 25px;
    height: 25px;
}

.nest .ping {
    top: -8px;
    left: -8px;
    width: 40px;
    height: 40px;
}

}




@media screen and (max-width : 1100px)  {

    .nlp-end {
        margin-top: 5000vh;
    }

}


@media screen and (max-width : 700px)  {


    .nlp-scroll-bar-area {
        width: 3em;
    }

    .nlp-scroll-bar {
        right: 3em;
        width: 5px;
    }

    .nlp-scroll-bar-area h2 {
        font-size: 1em;
    }

    .nlp-scroll-bar-area .scroll-text {
        font-size: 12px;
        width: 50px;
        height: 15px;
    }
    
    .nlp-scroll-bar-area .scroll-text span {
        width: 10px;
        height: 10px;
        border-left: 1px solid var(--white);
        border-bottom: 1px solid var(--white);
        left: -10px;
        top: 2px;
    }

    svg#route0-svg {
        width: 3px;
    }

    .bird-entry {
        top: 120px;
    }

    .bird-entry p {
        margin-top: 0;
    }

    .sprechblase h3 {
        font-size: 1.4em;
        letter-spacing: 0px;
        max-width: 70%;
    }

    .sprechblase p {
        font-size: 0.8rem;
    }

    .sprechblase {
        width: 80vw;
        border-radius: 10px;
        float: none;
        padding: 1em 1em 0.5em;
        margin-left: -7vw;
    }

    .sprechblase:before {
        display: none;
    }

    img.flussregenpfeifer {
        width: 12em;
        height: 9em;
        left: auto;
        top: -6em;
        position: absolute;
        margin-top: 0;
        margin-left: 0;
        bottom: auto;
        right: 0em;
    }

    a.nlp-rd-logo {
        left: 2.5em;
        width: 50px;
        height: 50px;
    }

    a.nlp-rd-logo p {
        font-size: 0.7rem;
    }

    #container.naturlehrpfad-map {
        width: 100vw;
        height: 40vw;
        margin-left: -1em;
    }

    .nest img {
        width: 15px;
        height: 15px;
    }

    .nest .ping {
        top: -5px;
        left: -5px;
        width: 25px;
        height: 25px;
    }

}




@media screen and (max-width : 450px)  {

    .nlp-scroll-bar-area {
        width: 2em;
    }

    .nlp-scroll-bar {
        right: 2em;
        width: 2px;
    }

    .sprechblase {
        padding: 2em 1em 1em;
        margin-left: -10vw;
    }

    .sprechblase h3 {
        font-size: 1.2em;
    }

    img.flussregenpfeifer {
        width: 7em;
        height: 5.5em;
        top: -2em;
    }

    #container.naturlehrpfad-map {
        width: 103vw;
        height: 52vw;
        margin-left: -0.5em;
    }

    .nlp-end {
        margin-top: 2000vh;
    }

    .nlp-scroll-bar-area .scroll-text {
        font-size: 9px;
        width: 40px;
        height: 10px;
    }

    .nlp-scroll-bar-area .scroll-text span {
        left: -8px;
        top: 1px;
    }

}



@media screen and (min-width : 901px) and (max-height: 900px) and (orientation: landscape) {

    a.nlp-rd-logo {
        left: 3em;
        width: 50px;
        height: 50px;
        top: 1em;
    }
    
    a.nlp-rd-logo p {
        bottom: -38px;
        font-size: 0.8rem;
    }

    .intro-content, .szene-content {
        margin-top: 7em;
    }

    svg#route0-svg {
        width: 4px;
    }

    .bird-entry {
        top: 90px;
    }

    .bird-entry p {
        margin-top: 5px;
    }

    .sprechblase {
        width: 55vw;
    }

    .sprechblase h3 {
        font-size: 1.4em;
    }

    .sprechblase p {
        font-size: 1rem;
    }

    .nlp-scroll-bar-area h2 {
        font-size: 1.2em;
        top: auto;
        bottom: 6em;
    }

    .nlp-scroll-bar-area .scroll-text {
        width: 48px;
        height: 12px;
        font-size: 12px;
    }

    .nlp-scroll-bar-area .scroll-text span {
        top: 2px;
        left: -10px;
        width: 10px;
        height: 10px;
        margin-left: 0;
    }

    img.flussregenpfeifer {
        width: 19vw;
        height: 15vw;
    }


}


@media screen and (max-width : 900px) and (max-height: 450px) and (orientation: landscape) {

    a.nlp-rd-logo {
        left: 3em;
        width: 50px;
        height: 50px;
        top: 1em;
    }

    .intro-content, .szene-content {
        margin-top: 7em;
    }

    svg#route0-svg {
        width: 3px;
    }

    .bird-entry {
        top: 80px;
    }

    .bird-entry p {
        margin-top: 0;
    }

    .sprechblase {
        width: 55vw;
    }

    .sprechblase h3 {
        font-size: 1.2em;
        margin-bottom: 3%;
    }

    .sprechblase p {
        font-size: 0.8rem;
    }


    .nlp-scroll-bar-area h2 {
        font-size: 1em;
        top: auto;
        bottom: 6em;
    }

    .nlp-scroll-bar-area .scroll-text {
        width: 48px;
        height: 12px;
        font-size: 12px;
    }

    .nlp-scroll-bar-area .scroll-text span {
        top: 2px;
        left: -10px;
        width: 10px;
        height: 10px;
        margin-left: 0;
    }

    img.flussregenpfeifer {
        width: 19vw;
        height: 15vw;
    }


}