@font-face { font-family: 'Langdon';
             src: url('Font/Langdon.otf') format('opentype'); }

@font-face { font-family: 'Nyala';
             src: url('Font/nyala.ttf') format('truetype');}

/*-----------------------Schriften Ende----------------------------*/

body{
    margin:0;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */

}

img{
    font-family:Trebuchet MS, Arial, sans-serif;
}

a:hover{cursor:pointer;}


/*------------------------Startscreen------------------------------*/

div.whitescreen{
    position:fixed;
    z-index:10;
    background-color:white;
    width:100%;
    height:100%;
}

div.whitescreen.fadeOut{
    animation: fadeAway 3s;
    animation-iteration-count:1;
}

img.logo{
    z-index:20;
    display:block;
    margin-top:150px;
    margin-left:auto;
    margin-right:auto;
}

p.einleitung{
    z-index:20;
    display:block;
    margin:40px auto 40px auto;

    font-family:Langdon, Arial, sans-serif;
    font-size:24px;
    color:#35597a;

    width:615px;
    text-align:center;
}

a.beginn{
    z-index:20;

    color:#35597a;
    font-size:48px;

    text-decoration:none;
}

a.beginn:hover{
    padding-bottom:5px;
    border-bottom:3px solid #35597a;
}

p.mitte{
    margin-top:60px;
    text-align:center;
}

@keyframes fadeAway
{
    0% {
        opacity:1;
    }

    50% {
        opacity:0
    }

    100% {
        opacity:0;
        display:none;
    }
}




/*--------------------------Kontrollleiste-------------------------*/

div.buttons{
    z-index:1;

    width:250px;
    height:100%;

    position:fixed;
    top:0;
    left:-250px;
    transition:all .2s ease-in-out;
}

div.buttons:hover{
    left:0;
}


img.hoverpoint{
    z-index:5;

    position:absolute;
    top:435px;
    left:249px;
}

div.navblock{
    z-index:3;
    position:absolute;
    top:0;
    left:0;
    width:250px;
    height:100%;
    background-color:#19334b;
}

img.whitelogo{
    width:190px;
    margin-top:30px;
    margin-left:30px;
}

a{
    font-family: Langdon, Arial, sans-serif;
    color:white;
}

a.nav{}

a.nav.start{
    text-decoration:none;
    color:white;
    font-size:24px;

    z-index:4;

    position:absolute;
    top:300px;
    left:30px;
}

a.nav.water{
    text-decoration:none;
    color:white;
    font-size:24px;

    z-index:4;

    position:absolute;
    top:400px;
    left:30px;
}

a.nav.ausblendenWater{
    text-decoration:none;
    color:white;
    font-size:24px;

    z-index:4;

    position:absolute;
    top:400px;
    left:30px;
}

a.nav.air{
    text-decoration:none;
    color:white;
    font-size:24px;

    z-index:4;

    position:absolute;
    top:500px;
    left:30px;
}

a.nav.ausblendenAir{
    text-decoration:none;
    color:white;
    font-size:24px;

    z-index:4;

    position:absolute;
    top:500px;
    left:30px;
}

a.nav.land{
    text-decoration:none;
    color:white;
    font-size:24px;

    z-index:4;

    position:absolute;
    top:600px;
    left:30px;
}

a.nav.ende{
    text-decoration:none;
    color:white;
    font-size:24px;

    z-index:4;

    position:absolute;
    top:700px;
    left:30px;
}

a.nav.ausblendenEnde{
    text-decoration:none;
    color:white;
    font-size:24px;

    z-index:4;

    position:absolute;
    top:700px;
    left:30px;
}

a.nav.film{
    text-decoration:none;
    color:white;
    font-size:24px;

    z-index:4;

    position:absolute;
    top:800px;
    left:30px;
}

a.nav.ausblendenFilm{
    text-decoration:none;
    color:white;
    font-size:24px;

    z-index:4;

    position:absolute;
    top:800px;
    left:30px;
}

/*----------------------Kontrollleiste Ende------------------------*/

ul{
    padding:0;
    position:fixed;
    top:40px;
    left:290px;
    z-index:2;
}

li{
    float:left;
    list-style-type:none;
}

li a.impr,
li a.hilf{
    text-decoration:none;
    margin-right:30px;
    display:block;
    font-size:24px;

    border-bottom:3px solid white;
}

li a.impr:hover,
li a.hilf:hover{
    color:white;
    border:none;
}

p.txt{
    margin:5px 0 5px 0;
}


/*----------------------------Content------------------------------*/

h1{
    font-family:Langdon, Arial, sans-serif;
}


div.Legende{
  z-index:10;

  position:absolute;
  top:80px;
  left:20px;
}


/*---------------------------Impressum-----------------------------*/

div h1{
    color:#35597a;
}

div.impressum{
    font-family:Trebuchet MS, Arial, sans-serif;

    overflow:auto;
    z-index:5;

    position:fixed;
    top:125px;
    left:290px;

    width:500px;
    height:675px;
    padding:10px 20px 30px 20px;

    background-color:rgba(255, 255, 255, 0.75);
    display:none;
}

a.clImp{
    position:absolute;
    bottom:20px;
    right:20px;
}




div.hilfe{
    font-family:Trebuchet MS, Arial, sans-serif;

    overflow:auto;
    z-index:5;

    position:absolute;
    top:125px;
    left:290px;

    width:500px;
    height:675px;
    padding: 10px 20px 30px 20px;

    background-color:hsla(0, 0%, 100%, 0.75);

    display:none;
}


a.clHilf{
    position:absolute;
    bottom:20px;
    right:20px;
}


/*--------------------DUNKIRK Inhalte------------*/

div.dunkirktown{
    font-family:Trebuchet MS, Arial, sans-serif;
    color:#35597a;

    display:none;
    overflow:auto;
    z-index:5;

    position:absolute;
    top:125px;
    left:290px;

    width:1150px;
    height:700px;
    padding:5px 20px 10px 20px;

    background-color:rgba(255, 255, 255, 0.75);
}




/* BILDER */

img.bild1{

    width:450px;
    max-height:255px;
}

img.bild2{
    margin-top:40px;
    width:450px;
    max-height:255px;
}

img.bild3{
    max-width:450px;
}

img.saved{
    position:absolute;
    top:500px;
    left:20px;

    width:300px
}

img.captured{
    position:absolute;
    top:500px;
    left:368px;

    width:300px;
}

/* SCHLIESSEN */

a.clDunkirk{
    position:absolute;
    bottom:20px;
    right:20px;
}




/* BILDUNTERSCHRIFTEN */

div.bild1BU{
    position:absolute;
    top:85px;
    right:20px;
    width:450px;
}

div.bild2BU{
    position:absolute;
    top:340px;
    right:20px;
    margin-top:20px;
    width:450px;
}

span.txt{
    font-size:16px;
    font-weight:bold;

    position:absolute;
    top:0;
    left:0;
    padding:10px;
    width:430px;

    background-color:rgba(0, 0, 0, 0.75);
}

span.txtdown{
    font-size:16px;
    font-weight:bold;

    position:absolute;
    bottom:3px;
    left:0;
    padding:10px;
    width:430px;

    background-color:rgba(0, 0, 0, 0.75);
}

span.source{
    font-size:12px;
    color:#aaa;
}

a.quellink{
    font-family:Trebuchet MS, Arial, sans-serif;
    color:#aaa;
}

/* *******TEXTINHALTE********** */
span{
    font-size:18px;
    color:#ddd;
}

p.inhalt{
    color:#222;
    font-size:17px;
    line-height:140%;
    text-align:justify;

    column-count:2;
    column-width:300px;
    column-gap:50px;

    width:650px;
    height:600px;
}



/* Interner LINK */

a.stukaLink,
a.doverLink{
    font-family: Trebuchet MS, Arial, sans-serif;
    color:#a36010;
}



/*--------------------DOVER Inhalte------------*/

div.dovertown{
    font-family:Trebuchet MS, Arial, sans-serif;
    color:#35597a;

    display:none;
    overflow:auto;
    z-index:5;

    position:absolute;
    top:125px;
    left:290px;

    width:1150px;
    height:700px;
    padding:5px 20px 10px 20px;

    background-color:rgba(255, 255, 255, 0.75);
}

/* SCHLIESSEN */

a.clDover{
    position:absolute;
    bottom:20px;
    right:20px;
}



/*----------------Animation Stuka------------*/

a.clAnim{
    z-index:11;
    position:absolute;
    bottom:20px;
    right:20px;

}

div.stuka{
    font-family:Trebuchet MS, Arial, sans-serif;
    color:#35597a;

    display:none;
    z-index:6;

    position:absolute;
    top:125px;
    left:260px;

    width:1150px;
    height:700px;
    padding:5px 20px 10px 20px;

    background-color:white;

    overflow:hidden;
}

div.infoblock{
  font-family:Trebuchet MS, Arial, sans-serif;
  color:#35597a;

  display:block;
  z-index:6;

  width:1150px;
  height:700px;
  padding:5px 20px 10px 20px;

  background-color:white;

  overflow:hidden;
}

h1.bombenabwurf{margin-left:20px;}

div.animation{
    z-index:10px;
    position:absolute;
    top:0;
    left:0;

    display:block;

    width:100%;
    height:100%;

    background-color:#e7af4d;

    animation-name: uebergang;
    animation-duration:5s;
    animation-delay:22s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}

@keyframes uebergang{

    0% {
        opacity:1;
    }

    100% {
        opacity:0;
    }
}

div.wind{
    position:absolute;

    animation-name:winddrehung;
    animation-duration:20s;
    animation-delay:5s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}

@keyframes winddrehung{
    0% {
        transform:rotate(0deg);
    }

    50% {
        transform:rotate(65deg);
        left:1000px;
    }

    82% {
        transform:rotate(75deg);
        left:400px;
    }

    95% {
        opacity:1;
    }

    100% {
        transform:rotate(75deg);
        left:1200px;
        opacity:0;
    }
}


img.wind1{
    z-index:1;
    position:absolute;
    top:200px;
    left:1500px;

    animation-name:wind1;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}

@keyframes wind1{

    0% {
        left:1500px
    }

    100% {
        left:-1500px;
    }
}

img.wind2{
    z-index:1;
    position:absolute;
    top:100px;
    left:1500px;

    animation-name:wind2;
    animation-duration:2s;
    animation-delay:1s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}

@keyframes wind2{

    0% {
        left:2000px;
    }

    100% {
        left:-900px;

    }
}

img.bomb{
    position:absolute;
    top:300px;
    left:600px;

    animation-name:bombe;
    animation-duration:20s;
    animation-delay:5s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}

@keyframes bombe{

    0% {
        transform:rotate(0deg);
        top:300px;
        left:600px;
    }

    50% {
        transform:rotate(65deg);
        top:410px;
    }

    52% {
        transform:rotate(65deg);
        top:450px;
        left:570px;
    }

    62% {
        transform:rotate(-105deg);
        top:480px;
        left:430px;

    }


    95% {
        top:500px;
        left:520px;
    }

    100% {
        transform:rotate(-280deg);
        top:800px;
        left:620px;

    }
}

div.flugzeug{
    position:absolute;
    top:190px;
    left:300px;



    animation-name:sturz;
    animation-duration:20s;
    animation-delay:5s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}

@keyframes sturz{

    0% {
        transform:rotate(0deg);
        left:300px;
    }

    50% {
        transform:rotate(65deg);
        top:300px;
        left:300px;
    }

    62% {
        transform:rotate(65deg);
        top:300px;
        left:300px;
    }


    65% {
        transform:rotate(-35deg);
        left:600px;
    }
    70% {
        transform:rotate(-35deg);
        top:-300px;
        left:1200px;
    }



    100% {
        transform:rotate(-35deg);
        top:-300px;
        left:1200px;
    }
}

img.korpus{
    z-index:2;
}

img.rotor{
    z-index:2;
    position:absolute;
    top:55px;
    left:565px;
    opacity:0.75;

    animation-name:rotor;
    animation-duration:0.05s;
    animation-iteration-count:infinite;
}

@keyframes rotor{

    0% {
        transform:scale(1, 1)
    }

    50%{
        transform:scale(1.2, 1.5)
    }

    100% {
        transform:scale(1, 1)
    }
}



div.schuss{
    position:absolute;
    left:0;

    animation-name:schussdrehung;
    animation-duration:20s;
    animation-delay:5s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}

@keyframes schussdrehung{

    0% {
        transform:rotate(0deg);
    }

    50% {
        transform:rotate(35deg);
        left:300px;
    }

    81% {
        opacity:1;
    }

    82% {
        transform:rotate(35deg);
        opacity:0;
        left:300px;
    }

    95% {
        opacity:1;
    }

    100% {
        transform:rotate(35deg);
        left:300px;
        opacity:0;
    }
}


img.schuss1{
    z-index:3;
    position:absolute;
    top:300px;
    left:800px;
    transform:rotate(15deg);

    animation-name:schuss1;
    animation-duration:0.01s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}

@keyframes schuss1{

    0% {
        top:300px;
        left:800px;
    }

    50% {
        top:0;
        left:500px;
    }

    100% {
        top:-300px;
        left:200px;
    }
}

img.schuss2{
    z-index:1;
    position:absolute;
    top:500px;
    left:800px;

    animation-name:schuss2;
    animation-duration:0.01s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}

@keyframes schuss2{

    0% {
        top:500px;
        left:800px;
    }

    50% {
        top:200px;
        left:300px;
    }

    100% {
        top:0;
        left:-100px;
    }

}




/* SCHLIESSEN */

a.clStuka{
    position:absolute;
    top:770px;
    left:1430px;
}







/*-------------Map-------------*/

div#map{
    background-image: url("./Bilder/Map.svg");
    width:12389.998px;
    height:7601.188px;
    position:absolute;
    top:-2900px;
    left:-6100px;

    background-size:12389.998px 7601.188px !important;
}

div#map:hover{
    cursor: url("Bilder/cursor_grab.png") 5 5, auto;
}

/*----------------Sturzkampfflugzeuge------------*/

div.luftwege{
    display:none;
}

div.luftwege.fadeIn{
    display:none;
}


a.Stuka1{
    position:absolute;
    top:3300px;
    left:6300px;

    animation-name:stuka1;
    animation-duration:10s;
    animation-fill-mode:backwards;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
}

@keyframes stuka1{
    0% {
        top:3300px;
        left:6400px;
    }

    25% {
        top:3270px;
    }

    50% {
        top:3330px;
        left:6370px;
    }

    75% {
        left:6400px;
    }

    100% {
        top:3300px;
        left:6400px;
    }
}

a.Stuka2{
    position:absolute;
    top:3300px;
    left:7200px;

    transform:rotate(155deg);

    animation-name:stuka2;
    animation-duration:10s;
    animation-fill-mode:backwards;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
}

@keyframes stuka2{

    0% {
        top:3000px;
        left:7200px;
    }

    22% {
        top:3030px;
    }

    50% {
        top:3010px;
        left:7150px;
    }

    65% {
        left:7175px;
    }

    100% {
        top:3000px;
        left:7200px;
    }
}

a.Stuka3{
    position:absolute;
    top:3700px;
    left:7200px;

    transform:rotate(-125deg);

    animation-name:stuka3;
    animation-duration:10s;
    animation-fill-mode:backwards;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
}

@keyframes stuka3{

    0% {
        top:3700px;
        left:7200px;
    }

    29% {
        top:3720px;
    }

    57% {
        top:3680px;
        left:7150px;
    }

    80% {
        7175px;
    }

    100% {
        top:3700px;
        left:7200px;
    }
}


/*----------------Kriegsschiffe------------------*/

div.Schifficon{
    display:none;
}

div.Schifficon.fadeIn{
    display:none;
}

a.Schiff1{      /* HMS Grafton */
    position:absolute;
    top:2840px;
    left:7050px;
}

a.Schiff2{      /* HMS Grenade */
    position:absolute;
    top:3270px;
    left:6600px;
}

a.Schiff3{      /* HMS Wakeful */
    position:absolute;
    top:2740px;
    left:7175px;
}

a.Schiff4{      /* HMS Basilisk */
    position:absolute;
    top:2890px;
    left:7470px;
}

a.Schiff5{      /* HMS Havant */
    position:absolute;
    top:2990px;
    left:6775px;
}

a.Schiff6{      /* HMS Keith */
    position:absolute;
    top:3340px;
    left:6305px;
}

div.Sname{
    font-size:24px;
    color:#fff;
    text-align:center;

    display:block;
}

img.Schiff1{margin-top:10px;}
img.Schiff2{margin-top:10px;}
img.Schiff2{margin-top:10px;}
img.Schiff3{margin-top:10px;}
img.Schiff4{margin-top:10px;}
img.Schiff5{margin-top:10px;}
img.Schiff6{margin-top:10px;}

div.wasser{
    z-index:5;

    position:fixed;
    top:125px;
    right:250px;


    width:300px;
    height:700px;

    background-color:rgba(255, 255, 255, 0.75);
    padding:0 20px 0 20px;

    display:none;
}

div.wasser.fadeIn{
    z-index:5;

    position:fixed;
    top:125px;
    right:250px;


    width:300px;
    height:700px;

    background-color:rgba(255, 255, 255, 0.75);
    padding:0 20px 0 20px;

    display:none;
}

a.link{
    color:#111;
    font-family:Trebuchet MS, Arial, sans-serif;
    text-decoration:none;
}

div.Schiffsroute{
    background-image:url("Bilder/Schiffwege/Routen.png");

    width:3617px;
    height:1968px;

    position:absolute;
    top:2000px;
    left:4160px;

    display:none;
}

div.Schiffsroute.fadeIn{
    background-image:url("Bilder/Schiffwege/Routen.png");

    width:3617px;
    height:1968px;

    position:absolute;
    top:2000px;
    left:4160px;

    display:none;
}

div.minenfelder{
    background-image:url("Bilder/Schiffwege/Minenfelder.png");

    width:3305px;
    height:1612px;

    position:absolute;
    top:2100px;
    left:4350px;

    display:none;
}

div.minenfelder.fadeIn{
    background-image:url("Bilder/Schiffwege/Minenfelder.png");

    width:3305px;
    height:1612px;

    position:absolute;
    top:2100px;
    left:4350px;

    display:none;
}

/*--------------schiffsrouten ende------------*/


/*----------------Zeitstrahl------------------*/

div.zeithinweis{
    display:none;

    z-index:11;

    font-family:Trebuchet MS, Arial, sans-serif;
    font-size:36px;
    font-weight:bold;
    color:white;

    padding-top:300px;
    margin-left:auto;
    margin-right:auto;

    width:550px;
    text-align:center;

    animation-name: slowFadeOut;
    animation-duration: 8s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}

@keyframes slowFadeOut{

    50% {
        opacity:1;
    }

    100% {
        opacity:0;
        display:none;
    }
}

div.zeitstrahlobjekt{

    z-index:5;

    position:absolute;
    bottom:0;
    right:0;

    width:300px;
    height:100%;

    display:none;
}


div.strahl{
    z-index:5;
    position:fixed;
    top:0;
    right:100px;

    width:5px;
    height:100%;

    background-color:white;
}


        h3.zeit{
            font-family:Langdon,
                        Arial,
                        sans-serif;

            font-size:36px;
            color:white;
            text-align:right;

            position:fixed;
            top:400px;
            right:20px;
        }

a.hoch{
    position:fixed;
    top:50px;
    right:15px;
}

a.hoch:hover{
    background-image: url("Bilder/Landwege/Zeitstrahl/hochHover.png");
    background-position:center center;
    padding:10px;
    top:40px;
    right:5px;
}

a.runter{
    position:fixed;
    bottom:50px;
    right:15px;
}

a.runter:hover{
    background-image: url("Bilder/Landwege/Zeitstrahl/runterHover.png");
    background-position:center center;
    padding:10px;
    bottom:40px;
    right:5px;
}

div.Zeitpunkt{
    display:block;

    position:fixed;
    top:125px;
    right:210px;


    width:300px;
    height:715px;

    background-color:rgba(255, 255, 255, 0.75);
    padding:0 20px 0 20px;
}

div.Zeitpunkt.MaiZe{display:none;}
div.Zeitpunkt.MaiZw{display:none;}
div.Zeitpunkt.MaiDZ{display:none;}
div.Zeitpunkt.MaiVZ{display:none;}
div.Zeitpunkt.MaiSZ{display:none;}
div.Zeitpunkt.MaiAZ{display:none;}
div.Zeitpunkt.MaiDS{display:none;}
div.Zeitpunkt.JuniE{display:none;}
div.Zeitpunkt.JuniZ{display:none;}
div.Zeitpunkt.JuniD{display:none;}
div.Zeitpunkt.JuniV{display:none;}

            p.schmalinhalt{
                font-family:Trebuchet MS,
                            Arial,
                            sans-serif;

                padding-top:20px;
                font-size:18px;
                font-size:18px;
                color:#111;
                text-align:justify;
                hyphens:auto;
            }
a.cl{
    position:absolute;
    bottom:20px;
    right:20px;
}

div.daten{
    font-family:Langdon,
                Arial,
                sans-serif;
    color:white;
    font-size:24px;
    width:300px;

    position:fixed;
    top:0;
    right:0;

    animation-name:none;
    animation-duration:2s;
    animation-iteration-count:1;
    animation-timing-function:ease-in-out;
    animation-fill-mode:forwards;
}

@keyframes runter{

    0% {
        top:0;
    }

    100% {
        top:-700px;
    }
}

@keyframes hoch{

    0% {
        top:-700px;
    }

    100% {
        top:0;
    }
}

a.Zeitlink{
    text-decoration:none;
}

        div.Mai10{
            position:absolute;
            top:50px;
            right:125px;
        }

                    div.zeitblock{    /* 10. Mai */
                        display:none;

                        position:absolute;
                        top:20px;
                        right:-20px;
                    }



        div.Mai20{
            position:absolute;
            top:550px;
            right:125px;
        }

        div.Mai23{
            position:absolute;
            top:750px;
            right:125px;
        }

        div.Mai24{
            position:absolute;
            top:800px;
            right:125px;
        }

        div.Mai26{
            position:absolute;
            top:900px;
            right:125px;
        }

        div.Mai28{
            position:absolute;
            top:1000px;
            right:125px;
        }

        div.Mai30{
            position:absolute;
            top:1100px;
            right:125px;
        }

        div.Juni1{
            position:absolute;
            top:1200px;
            right:125px;
        }

        div.Juni4{
            position:absolute;
            top:1350px;
            right:125px;
        }


a.Route{
    color:#111;
    font-family:Trebuchet MS, Arial, sans-serif;
    text-decoration:none;
}


/*----------------------Truppenbewegung-----------------------*/

div.hinweis{
    display:none;

    font-size:36px;
    position:fixed;
    left:600px;
    bottom:25px;

    animation-name: blinking;
    animation-duration: 2s;
    animation-iteration-count:8;
}

@keyframes blinking{

    0% {
        opacity:0.25;
    }

    50% {
        opacity:1;
    }

    100% {
        opacity:0.25;
    }
}

a.hinweis{text-decoration:none;}

a.armeeweg{
    font-family:Trebuchet MS, Arial, sans-serif;
    color:#111;
    font-style:italic;
    text-decoration:none;
}


div.achtundzwanzig{
    display:none;
    background-image:url("Bilder/Landwege/28Mai.png");
    z-index:2;

    position:absolute;
    top:2950px;
    left:5550px;

    width:3388px;
    height:1716px;
}

div.sechsundzwanzig{
    display:none;
    background-image:url("Bilder/Landwege/26Mai.png");
    z-index:2;

    position:absolute;
    top:2980px;
    left:5160px;

    width:5260px;
    height:2755px;
}

div.haltebefehl{
    display:none;
    background-image:url("Bilder/Landwege/24Mai.png");
    z-index:2;

    position:absolute;
    top:3010px;
    left:5380px;

    width:3891px;
    height:2717px;
}

div.dreiundzwanzig{
    display:none;
    background-image:url("Bilder/Landwege/23Mai.png");
    z-index:2;

    position:absolute;
    top:4880px;
    left:5300px;

    width:5425px;
    height:2473px;
}


div.zwanzig{
    display:none;
    background-image:url("Bilder/Landwege/20Mai.png");
    z-index:2;

    position:absolute;
    top:3260px;
    left:10300px;

    width:2050px;
    height:2526px;
}

div.ergebnisse{
    font-family:Trebuchet MS, Arial, sans-serif;
    color:#35597a;

    display:none;
    overflow:auto;
    z-index:5;

    position:absolute;
    top:125px;
    left:290px;

    width:1150px;
    height:700px;
    padding:5px 20px 10px 20px;

    background-color:rgba(255, 255, 255, 0.75);
}


/*-----------------------ERGEBNISSE ENDE----------------------------*/

/*     VERFILMUNGEN     */

div.verfilmung{
    font-family:Trebuchet MS, Arial, sans-serif;
    color:#35597a;

    display:none;
    overflow:auto;
    z-index:5;

    position:absolute;
    top:125px;
    left:290px;

    width:1150px;
    height:700px;
    padding:5px 20px 10px 20px;

    background-color:rgba(255, 255, 255, 0.75);
}

img.plakat1{
    max-width:270px;
    position:absolute;
    top:80px;
}

img.plakat2{
    max-width:270px;
    position:absolute;
    top:80px;
    left:430px;
}

img.plakat3{
    max-width:270px;
    position:absolute;
    top:80px;
    left:830px;
}

h2.titel1{
    position:absolute;
    top:460px;
    left:;
}

h2.titel2{
    position:absolute;
    top:460px;
    left:430px;
}

h2.titel3{
    position:absolute;
    top:460px;
    left:830px;
}

p.filmdaten1{
    color:#111;

    position:absolute;
    top:500px;

    max-width:270px;
}

p.filmdaten2{
    color:#111;

    position:absolute;
    top:500px;
    left:430px;

    max-width:270px;
}

p.filmdaten3{
    color:#111;

    position:absolute;
    top:500px;
    left:830px;

    max-width:270px;
}
/*     VERFILMUNGEN ENDE     */


/*----------------------------Karte--------------------------------*/

div#grenz{
    width:100%;
    height:100%;
    position:fixed;
}

div.dunkirk{

    position:absolute;
    z-index:5;
    top:3461px;
    left:6687px;
}

div.dunkirk:hover{
    background-image: url("Bilder/actionpointHover.png");
    background-position:center center;

    padding:20px;

    top:3441px;
    left:6667px;
}

div.dover{

    position:absolute;
    z-index:5;
    top:3100px;
    left:4158px;
}

div.dover:hover{
    background-image: url("Bilder/actionpointHover.png");
    background-position:center center;

    padding:20px;

    top:3080px;
    left:4138px;
}

/*--------------------------Angrenzungen---------------------------*/

div.EndeTop{
    font-family:Nyala,
                Arial,
                sans-serif;
    color:white;
    font-size:48px;

    display:none;
    position:fixed;
    top:50px;
    left:40%;
    padding:10px 40px 0 40px;
    border-top:5px solid white;
}

div.EndeRight{
    font-family:Nyala,
                Arial,
                sans-serif;
    color:white;
    font-size:48px;

    display:none;
    position:fixed;
    right:50px;
    top:43%;
    padding:40px 20px 40px 0;
    border-right:5px solid white;
}

div.EndeBottom{
    font-family:Nyala,
                Arial,
                sans-serif;
    color:white;
    font-size:48px;

    display:none;
    position:fixed;
    top:50px;
    left:40%;
    padding:0 40px 10px 40px;
    border-bottom:5px solid white;
}

div.EndeLeft{
    font-family:Nyala, Arial, sans-serif;
    color:white;
    font-size:48px;

    display:none;
    position:fixed;
    left:200px;
    top:43%;
    padding:40px 0 40px 20px;
    border-left:5px solid white;
}