/* Element-Veranstaltungen ----------- */

.geschichte {
    width: 100%;
    position: relative;
    float: left;
    padding-bottom: 0px;
}

.geschichte .content {
    padding-top: 20px;
    padding-bottom: 0px;
    margin-bottom: -50px;
    width: 109.2%;
    position: relative;
    padding-left: 5%;
    padding-right: 4%;
    margin-left: -7%;
    background-image: url('../img/geschichte/linegeschichte.png');
    background-position: center;	
    margin-right: 0px;
    float: left;
    height: auto;
}

.geschichte .contentinner {
    width: 100%;
    position: relative;
    height: auto;
    overflow: hidden;
}

#line1{
    position:absolute;
    width:2px;
    margin-top:-1px;
    border-right: 2px dashed black;
}

#line2{
    position:absolute;
    width:2px;
    margin-top:-1px;
    border-right: 2px dashed black;
}

#line3{
    position:absolute;
    width:2px;
    margin-top:-1px;
    border-right: 2px dashed black;
}

#line4{
    position:absolute;
    width:2px;
    margin-top:-1px;
    border-right: 2px dashed black;
}
.geschichte .content .pfeil {
    position: relative;
    bottom: -24px;
    width: 28px;
    height: 28px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
}
.large1, .large2, .large3, .large4, .large5 {
    display: none;
    padding-bottom: 20px;
}
.show {
    display: block;
}



/* Allgemeine Daten ----------- */

.geschichte .content .timeline1 {
    padding: 0px;
    margin: 0px;
    width: 60%;
    margin-bottom: 10px;
    height: auto;
    position: relative;
    float: left;
    height: 320px;
}

.geschichte .content .timeline2 {
    padding: 0px;
    margin: 0px;
    width: 60%;
    margin-bottom: 10px;
    height: auto;
    position: relative;
    float: right;
    height: 400px;
    top: 58px;
}

.geschichte .content .timeline3 {
    padding: 0px;
    margin: 0px;
    width: 60%;
    margin-bottom: 10px;
    height: auto;
    position: relative;
    float: left;
    height: 290px;
}

.geschichte .content .timeline4 {
    padding: 0px;
    margin: 0px;
    width: 60%;
    margin-bottom: 10px;
    height: auto;
    position: relative;
    float: right;
    height: 325px;
}

.geschichte .content .timeline5 {
    padding: 0px;
    margin: 0px;
    width: 60%;
    margin-bottom: 10px;
    height: auto;
    position: relative;
    float: left;
    height: 300px;
}


.geschichte .content .cont {
    padding: 0px;
    margin: 0px;
    width: 80%;
    position: relative;
    min-height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.geschichte .content .time {
    z-index: 99;
    position: relative;
    color: #000;
    padding: 10px;
    top: -241px;
    left: 94px;
    font-family: MarkWeb-Bold;
    ont-weight: bold;
    font-style: normal;
    font-stretch: normal;
    font-size: 32px;
    line-height: 0.88;
    letter-spacing: 0.6px;
    width: 150px;
}

.geschichte .content .text {
    height: auto;
    z-index: 99;
    position: absolute;
    width: 220px;
    top: 157px;
    left: 100px;
    background-color: #000;
    color: #fff;
    padding: 10px;
    font-family: MarkWeb;
    ont-weight: normal;
    font-style: normal;
    font-stretch: normal;
    font-size: 15px;
    line-height: 1.33;
    letter-spacing: normal;
}

.geschichte .content .image {
    height: auto;
    z-index: 99;
    position: relative;
    width: 220px;
    color: #fff;
    padding: 10px;
    min-height: 300px;
}

/* iPads (landscape) ----------- */
@media (min-width: 420px) {
    /* -------------------------------------------- Blaue Fläche ----------- */
    .geschichte .content {
    	width: 111.5%;
        margin-left: -20px;
    }
}
@media (min-width: 505px) {
    /* -------------------------------------------- Blaue Fläche ----------- */
    .geschichte .content {
    	width: 110.5%;
    }
}
@media (min-width: 600px) {
    /* -------------------------------------------- Blaue Fläche ----------- */
    .geschichte .content {
    	width: 110.5%;
    }
}
@media (min-width: 637px) {
    /* -------------------------------------------- Blaue Fläche ----------- */
    .geschichte .content {
    	width: 109.9%;
    }
}
@media (min-width: 840px) {
    /* -------------------------------------------- Blaue Fläche ----------- */
    .geschichte .content {
    	width: 109.6%;
    }
}
@media (min-width: 980px) {
    /* -------------------------------------------- Blaue Fläche ----------- */
    .geschichte .content {
    	width: 109.1%;
    }
}
@media (max-width: 429px) {
    .geschichte .content {
        width: 114.5%;
        margin-left: -20px;
     }
    /* -------------------------------------------- Timeline 1 ----------- */
    .geschichte .content .timeline1 .image {
        top: 21px;
        left:-40px;
        width: 200px;
    }
    .geschichte .content .timeline1 .time {
        left: 104px;
        top: -231px;
    }
    .geschichte .content .timeline1 .text {
        left: 24px;
        top: 186px;
    }
    /* -------------------------------------------- Timeline 2 ----------- */
    .geschichte .content .timeline2 .image {
        top: 21px;
        left: -130px;
    }
    .geschichte .content .timeline2 .time {
        left: 47px;
        top: -188px;
    }
    .geschichte .content .timeline2 .text {
        left: -86px;
    }
    /* -------------------------------------------- Timeline 3 ----------- */
    .geschichte .content .timeline3 {
     height: 360px;
    }
    .geschichte .content .timeline3 .image {
        top: 48px;
        left: 34px;
        width: 220px;
    }
    .geschichte .content .timeline3 .time {
       top: -69px;
       left: 217px;
    }
    .geschichte .content .timeline3 .text {
        left: 0px;
    }
    /* -------------------------------------------- Timeline 4 ----------- */
    .geschichte .content .timeline4 {
        height: 400px;
    }
    .geschichte .content .timeline4 .image {
        top: 27px;
        left: -56px;
        width: 206px;
    }
    .geschichte .content .timeline4 .time {
        top: -161px;
        left: -127px;
    }
    .geschichte .content .timeline4 .text {
        left: -120px;
        top: 179px;
    }
    /* -------------------------------------------- Timeline 5 ----------- */
    .geschichte .content .timeline5 .image {
        top: 21px;
        left: -26px;
        width: 201px;
    }
    .geschichte .content .timeline5 .time {
        top: -182px;
        left: 143px;
    }
    .geschichte .content .timeline5 .text {
        left: 0px;
    }
}

@media (min-width: 430px) {
    /* -------------------------------------------- Timeline 1 ----------- */
    .geschichte .content .timeline1 {
        height: 350px;
    }
    .geschichte .content .timeline1 .image {
        width: 190px;
        top: 21px;
    }
    .geschichte .content .timeline1 .time {
        top: -243px;
        left: 128px;
    }
    .geschichte .content .timeline1 .text {
        left: 75px;
        top: 152px;
    }
    /* -------------------------------------------- Timeline 2 ----------- */
    .geschichte .content .timeline2 {
        height: 500px;
    }
    .geschichte .content .timeline2 .image {
        width: 250px;
        left: -87px;
    }
    .geschichte .content .timeline2 .time {
        top: -202px;
        left: 120px;
    }
    .geschichte .content .timeline2 .text {
        left: 28px;
        top: 148px;
    }
    /* -------------------------------------------- Timeline 3 ----------- */
    .geschichte .content .timeline3 .image {
        width: 250px;
    }
    .geschichte .content .timeline3 .time {
        top: -186px;
        left: 236px;
    }
    /* -------------------------------------------- Timeline 4 ----------- */
    .geschichte .content .timeline4 {
        height: 400px;
    }
    .geschichte .content .timeline4 .image {
        top: -6px;
        left: 50px;
        width: 210px;
    }
    .geschichte .content .timeline4 .time {
        top: -191px;
        left: -19px;
    }
    .geschichte .content .timeline4 .text {
        left: 20px;
        top: 148px;
    }
    /* -------------------------------------------- Timeline 5 ----------- */
    .geschichte .content .timeline5 .image {
        width: 250px;
    }
    .geschichte .content .timeline5 .time {
        top: -185px;
        left: 234px;
    }
}



/* iPads (landscape) ----------- */
@media (min-width: 991px) {
    .geschichte {
        width: 100%;
        position: relative;
        float: left;
        padding-bottom: 57px;
        max-width: inherit;
    }

    .geschichte .titel {
        color: #000;
        margin: 0 0 0px;
        width: 100%;
        font-size: 32px;
        line-height: 1.25;
        letter-spacing: 0.6px;
        padding-bottom: 10px;
    }

    .geschichte .content {
        padding-top: 20px;
        padding-bottom: 0px;
        position: relative;
        padding-left: 0px;
        padding-right: 0px;
        margin-left: -41px;
        margin-right: 0px;
        float: left;
        height: auto;
        padding-bottom: 10%;
    }

    .geschichte .contentinner {
        width: 100%;
        position: relative;
        height: auto;
        overflow: hidden;
    }

    .geschichte .content .timeline1 {
        padding: 0px;
        margin: 0px;
        width: 33.33%;
        margin-bottom: 10px;
        height: auto;
        position: relative;
        float: left;
        height: 400px;
    }

    .geschichte .content .timeline2 {
        padding: 0px;
        margin: 0px;
        width: 33.33%;
        margin-bottom: 10px;
        height: auto;
        position: relative;
        float: left;
        height: 400px;
        top: 58px;
    }

    .geschichte .content .timeline3 {
        padding: 0px;
        margin: 0px;
        width: 33.33%;
        margin-bottom: 10px;
        height: auto;
        position: relative;
        float: left;
        height: 400px;
    }

    .geschichte .content .timeline4 {
        padding: 0px;
        margin: 0px;
        width: 50%;
        margin-bottom: 10px;
        height: auto;
        position: relative;
        float: right;
        height: 300px;
    }

    .geschichte .content .timeline5 {
        padding: 0px;
        margin: 0px;
        width: 50%;
        margin-bottom: 10px;
        height: auto;
        position: relative;
        float: left;
        height: 300px;
    }

    .geschichte .content .cont {
        padding: 0px;
        margin: 0px;
        width: 80%;
        position: relative;
        min-height: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .geschichte .content .time {
        z-index: 99;
        position: relative;
        color: #000;
        padding: 10px;
        top: -225px;
        left: 177px;
        font-family: MarkWeb-Bold;
        ont-weight: bold;
        font-style: normal;
        font-stretch: normal;
        font-size: 32px;
        line-height: 0.88;
        letter-spacing: 0.6px;
    }

    .geschichte .content .text {
        height: auto;
        z-index: 99;
        position: absolute;
        width: 250px;
        top: 157px;
        left: 100px;
        background-color: #000;
        color: #fff;
        padding: 10px;
        font-family: MarkWeb;
        ont-weight: normal;
        font-style: normal;
        font-stretch: normal;
        font-size: 15px;
        line-height: 1.33;
        letter-spacing: 0.5px;
    }

    #geschichtecontent
    {
        margin-bottom:-110px;
    }



    .geschichte .content .image {
        height: auto;
        z-index: 99;
        position: relative;
        width: 220px;
        color: #fff;
        padding: 10px;
        min-height: 300px;
    }

    /* -------------------------------------------- Timeline 1 ----------- */
    .geschichte .content .timeline1 {
        height: 350px;
    }
    .geschichte .content .timeline1 .image {
        width: 190px;
        top: 21px;
    }
    .geschichte .content .timeline1 .time {
        top: -243px;
        left: 128px;
    }
    .geschichte .content .timeline1 .text {
        left: 77px;
        top: 154px;
    }
    /* -------------------------------------------- Timeline 2 ----------- */
    .geschichte .content .timeline2 {
        height: 500px;
        top: 155px;
    }
    .geschichte .content .timeline2 .image {
        width: 250px;
        left: 0px;
        top: 50px;
    }
    .geschichte .content .timeline2 .time {
        top: -157px;
        left: 206px;
    }
    .geschichte .content .timeline2 .text {
        left: 109px;
        top: 195px;
    }
    /* -------------------------------------------- Timeline 3 ----------- */
    .geschichte .content .timeline3 .image {
        width: 280px;
    }
    .geschichte .content .timeline3 .time {
        top: -195px;
        left: 268px;
    }
    .geschichte .content .timeline3 .text {
        left: 43px;
        top: 149px;
    }
    /* -------------------------------------------- Timeline 4 ----------- */
    .geschichte .content .timeline4 {
        height: 400px;
        left: 0px;
        top: 100px;
    }
    .geschichte .content .timeline4 .image {
        top: -38px;
        left: 104px;
        width: 260px;
    }
    .geschichte .content .timeline4 .time {
        top: -185px;
        left: 37px;
    }
    .geschichte .content .timeline4 .text {
        left: 88px;
        top: 154px;
    }
    /* -------------------------------------------- Timeline 5 ----------- */
    .geschichte .content .timeline5 {
        height: 400px;
        top: 100px;
    }
    .geschichte .content .timeline5 .image {
        width: 250px;
        left: 20px;
    }
    .geschichte .content .timeline5 .time {
        top: -185px;
        left: 260px;
    }
    .geschichte .content .timeline5 .text {
        left: 50px;
        top: 158px;
    }
}



/* iPads (landscape) ----------- */
@media (min-width: 1600px) {
    /* -------------------------------------------- Timeline 5 ----------- */
    .geschichte .content .timeline5 {
        height: 400px;
    }
    .geschichte .content .timeline5 .image {
        width: 250px;
        left: 100px;
    }
    .geschichte .content .timeline5 .time {
        top: -185px;
        left: 340px;
    }
    .geschichte .content .timeline5 .text {
        left: 123px;
	top: 160px;
    }

}
/* iPads (landscape) ----------- */
@media (min-width: 1750px) {
    /* -------------------------------------------- Timeline 4 ----------- */
    .geschichte .content .timeline4 {
        height: 400px;
        left: 0px;
    }
    .geschichte .content .timeline4 .image {
        top: -38px;
	    left: 170px;
        width: 260px;
    }
    .geschichte .content .timeline4 .time {
        top: -188px;
        left: 70px;
    }
    .geschichte .content .timeline4 .text {
        left: 156px;
        top: 122px;
    }
}
/* iPads (landscape) ----------- */
@media (min-width: 1890px) {
    /* -------------------------------------------- Blaue Fläche ----------- */
    .geschichte .content {
    	width: 121.4%;
    	padding-left: 0px;
    	padding-right: 0px;
    	margin-left: 0px;
    	margin-right: 0px;
    }
}


/* iPads (landscape) ----------- */
@media (min-width: 2200px) {
    /* -------------------------------------------- Timeline 5 ----------- */
    .geschichte .content .timeline5 {
        height: 400px;
    }
    .geschichte .content .timeline5 .image {
        width: 250px;
        left: 145px;
    }
    .geschichte .content .timeline5 .time {
        top: -185px;
        left: 385px;
    }
    .geschichte .content .timeline5 .text {
        left: 169px;
	top: 160px;
    }
}
/* iPads (landscape) ----------- */
@media (min-width: 2300px) {
    /* -------------------------------------------- Timeline 3 ----------- */
    .geschichte .content .timeline3 .image {
        width: 280px;
	left: 100px;
    }
    .geschichte .content .timeline3 .time {
        top: -57px;
        left: 283px;
    }
    .geschichte .content .timeline3 .text {
        left: 150px;
        top: 149px;
    }
    /* -------------------------------------------- Timeline 4 ----------- */
    .geschichte .content .timeline4 {
        height: 400px;
        left: 0px;
    }
    .geschichte .content .timeline4 .image {
        top: -38px;
	left: 225px;
	width: 260px;
    }
    .geschichte .content .timeline4 .time {
        top: -185px;
        left: 156px;
    }
    .geschichte .content .timeline4 .text {
        left: 212px;
        top: 154px;
    }
}
/* iPads (landscape) ----------- */
@media (min-width: 2450px) {
    /* -------------------------------------------- Timeline 5 ----------- */
    .geschichte .content .timeline5 {
        height: 400px;
    }
    .geschichte .content .timeline5 .image {
        width: 250px;
        left: 280px;
    }
    .geschichte .content .timeline5 .time {
        top: -185px;
        left: 523px;
    }
    .geschichte .content .timeline5 .text {
        left: 316px;
	top: 160px;
    }
}
/* iPads (landscape) ----------- */
@media (min-width: 2600px) {
    /* -------------------------------------------- Timeline 4 ----------- */
    .geschichte .content .timeline4 {
        height: 400px;
        left: 0px;
    }
    .geschichte .content .timeline4 .image {
        top: -38px;
	left: 315px;
	width: 260px;
    }
    .geschichte .content .timeline4 .time {
        top: -185px;
        left: 245px;
    }
    .geschichte .content .timeline4 .text {
        left: 302px;
        top: 154px;
    }
}
/* iPads (landscape) ----------- */
@media (min-width: 2800px) {
    /* -------------------------------------------- Timeline 1 ----------- */
    .geschichte .content .timeline1 {
        height: 350px;
    }
    .geschichte .content .timeline1 .image {
        width: 190px;
        top: 21px;
	left: 50px;
    }
    .geschichte .content .timeline1 .time {
        top: -243px;
        left: 186px;
    }
    .geschichte .content .timeline1 .text {
        left: 130px;
        top: 154px;
    }
    /* -------------------------------------------- Timeline 5 ----------- */
    .geschichte .content .timeline5 {
        height: 400px;
    }
    .geschichte .content .timeline5 .image {
        width: 250px;
        left: 237px;
    }
    .geschichte .content .timeline5 .time {
        top: -185px;
        left: 474px;
    }
    .geschichte .content .timeline5 .text {
        left: 266px;
	top: 160px;
    }
}
/* iPads (landscape) ----------- */
@media (min-width: 1090px) {.geschichte .content { margin-left: -42px; }}
@media (min-width: 1140px) {.geschichte .content { margin-left: -43px; }}
@media (min-width: 1190px) {.geschichte .content { margin-left: -44px; }}
@media (min-width: 1240px) {.geschichte .content { margin-left: -45px; }}
@media (min-width: 1290px) {.geschichte .content { margin-left: -46px; }}
@media (min-width: 1340px) {.geschichte .content { margin-left: -47px; }}
@media (min-width: 1390px) {.geschichte .content { margin-left: -48px; }}
@media (min-width: 1440px) {.geschichte .content { margin-left: -49px; }}
@media (min-width: 1490px) {.geschichte .content { margin-left: -50px; }}
@media (min-width: 1540px) {.geschichte .content { margin-left: -51px; }}
@media (min-width: 1590px) {.geschichte .content { margin-left: -52px; }}
@media (min-width: 1640px) {.geschichte .content { margin-left: -53px; }}
@media (min-width: 1690px) {.geschichte .content { margin-left: -54px; }}
@media (min-width: 1740px) {.geschichte .content { margin-left: -55px; }}
@media (min-width: 1790px) {.geschichte .content { margin-left: -56px; }}
@media (min-width: 1840px) {.geschichte .content { margin-left: -57px; }}
@media (min-width: 1890px) {.geschichte .content { margin-left: -274px; }}
@media (min-width: 1940px) {.geschichte .content { margin-left: -275px; }}
@media (min-width: 1955px) {.geschichte .content { margin-left: -276px; }}
@media (min-width: 1969px) {.geschichte .content { margin-left: -277px; }}
@media (min-width: 1982px) {.geschichte .content { margin-left: -278px; }}
@media (min-width: 1995px) {.geschichte .content { margin-left: -279px; }}
@media (min-width: 2009px) {.geschichte .content { margin-left: -280px; }}
@media (min-width: 2022px) {.geschichte .content { margin-left: -281px; }}
@media (min-width: 2035px) {.geschichte .content { margin-left: -282px; }}
@media (min-width: 2049px) {.geschichte .content { margin-left: -283px; }}
@media (min-width: 2062px) {.geschichte .content { margin-left: -284px; }}
@media (min-width: 2075px) {.geschichte .content { margin-left: -285px; }}
@media (min-width: 2089px) {.geschichte .content { margin-left: -286px; }}
@media (min-width: 2102px) {.geschichte .content { margin-left: -287px; }}
@media (min-width: 2115px) {.geschichte .content { margin-left: -288px; }}
@media (min-width: 2129px) {.geschichte .content { margin-left: -289px; }}
@media (min-width: 2142px) {.geschichte .content { margin-left: -290px; }}