*, html, body{
margin:0px;
padding:0px;

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

user-select: none;
font-family:'Montserrat',Arial,Helvetica,sans-serif;
}


body{
background-color: #333333;
}

/* Styling */
::-moz-selection{ background: #523066; color:#fff; text-shadow: none; }
::selection { background:#523066; color:#fff; text-shadow: none; }



/*#################################################################### Menü ##################################################################*/
.MenuBtn{
position:fixed;
z-index:1000;
top:20px;
left: 20px;
cursor:pointer;
}

.MenuBtnImg{
background-color:#fff;
float:left;
padding:15px;
}

.MenuBtnImg img{
	width:20px;
	height:20px;
}

.MenuBtnText{
background-color:#c8aa61;
font-size:18px;
line-height:32px;
color:#fff;
float:left;
padding-top:9px;
padding-bottom:9px;
font-family: "Montserrat",Arial,Helvetica,sans-serif;
width:0px;
text-align:center;
overflow:hidden;


transition: all 0.5s; /* explorer 10 */
-webkit-transition: all 0.5s; /* chrome & safari */
-moz-transition: all 0.5s; /* firefox */
-o-transition: all 0.5s; /* opera */
}

.MenuBtn:hover .MenuBtnText{
width:200px;


transition: all 0.5s; /* explorer 10 */
-webkit-transition: all 0.5s; /* chrome & safari */
-moz-transition: all 0.5s; /* firefox */
-o-transition: all 0.5s; /* opera */
}

.MenuBtn:hover{
background-color:#ededed;
}

.closeBtnMenu{
cursor:pointer;
}

#menu{ /* Wenn die Navigation ausgetoogled ist */
width:303px;
height:100%;
background-color:#fff;
overflow:hidden;
position:fixed;
z-index:10000000000000000000000000000000000000000;
left:-303px;
}


#menu ul{
list-style:none;
width:100%;
padding-top:9px;
padding-bottom:9px;
font-family: "Montserrat",Arial,Helvetica,sans-serif;
font-size:15px;
line-height:40px;
}

#menu a{
text-decoration:none;
}

#menu ul li{
width:100% !important;
height:40px;
padding-left:16px;
color:#333;
background-color:#e7dfcd;
margin-top:2px;
margin-bottom:2px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
cursor:pointer;

transition: all 0.2s; /* explorer 10 */
-webkit-transition: all 0.2s; /* chrome & safari */
-moz-transition: all 0.2s; /* firefox */
-o-transition: all 0.2s; /* opera */
}

#menu ul li:hover{
background-color:#c8aa61;
color:#fff;

transition: all 0.2s; /* explorer 10 */
-webkit-transition: all 0.2s; /* chrome & safari */
-moz-transition: all 0.2s; /* firefox */
-o-transition: all 0.2s; /* opera */
}

#menu .unactive{
background-color:#c73d3d;
color:#fff;
}

.link_startseite{
background-color:#dfdfdf !important;
}


.smallInfomenu{
padding-left:16px;
padding-right:16px;
font-size:14px;
line-height:20px;
padding-top:10px;
font-family: "Montserrat",Arial,Helvetica,sans-serif;
color:#333;
}


.menuFooter{
margin-top:20px;
width:100%;
height:63px;
background-color:#dfdfdf;
text-align:center;
}

.menuFooter a{
color:#c8aa61;
font-size:14px;
line-height:63px;
padding-top:10px;
font-family: "Montserrat",Arial,Helvetica,sans-serif;
}

#menuHeader{
width:100%;
height:63px;
}

#menuBottom{
width:100%;
position:absolute;
bottom:0px;
}

/*#################################################################### Standart-Klassen ##################################################################*/



#mobileHeader,
#warning{
display:none;
}

img[usemap] {
	border: none;
	height: 100%;
	/*max-width: 100%;*/
	width: auto;
}


area{
cursor:pointer;
}


.map_point{
position:absolute;
width:70px;
height:70px;
background-image:url(../img/map_point.svg);
z-index:30;

background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
}

.center{
width:100%;
max-width:1000px;
height:auto;
margin:0 auto;position:relative;
}

.right{
float:right;
}

.left{
float:left;
padding-right:10px;
}


.notfloat,
.clear{
clear:both;
position:relative;
}

.point{
cursor:pointer;
position:absolute;
z-index: 5;
width:50px;
height:50px;

background-image:url(../img/point.png);
background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
}


.pointtext{
position:absolute;
z-index:6;
color:#fff;
font-size:20px;
font-weight:bold;
font-style:italic;
text-shadow: 0px 0px 5px #545454;
}



.infoPoint{
cursor:pointer;
position:absolute;
z-index: 5;
width:30px;
height:30px;

background-image:url(../img/info_point.png);
background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
}

.infoPoint+.pointtext{
font-family:'Montserrat', Arial, Helvetica, sans-serif;
position:absolute;
z-index:4;
color:#fff;
background-color: #cd0000;
font-size:15px;
font-weight:400;
font-style: normal;
padding:5px;
padding-left:20px;
margin-left:-45px;
margin-top:-20px;
}

.centerThis{
position:absolute;
width:100%;
text-align:center;
}


/*#################################################################### Content ##################################################################*/



#content{
width:100%;
overflow:hidden;
background-color: #000;
opacity:0;
}


#footer{
position:absolute;
bottom:0px;
width:100%;
height:50px;
background-color:#333;
}

#headline a{
font-family:'Montserrat', Arial, Helvetica, sans-serif;
font-size: 30px;
color: #fff;
text-transform: uppercase;
margin-top:0px;
margin-left:30px;
letter-spacing: -2px;
text-decoration:none;
}

#lr_logo{
margin-top:10px;
margin-right:20px;
}



#loadbalken{
height:3px;
width:100%;
background-color:#545454;
}

#isload{
width:0%;
height:3px;
background-color:#c9ac65;
}

/*#################################################################### Startseite ##################################################################*/

#startScreen{
opacity:0;
width:100%;
height:100%;
position:absolute;
z-index:20;


background-size: 100%;
-moz-background-size: 100%;
-webkit-background-size:100%;

background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}

#startScreen h1{
font-family:'Montserrat', Arial, Helvetica, sans-serif;
font-size: 50px;
width:100%;
text-align:center;
line-height: 50px;
color: #fff;
text-transform: uppercase;
letter-spacing: -2px;
}

#startScreen h2{
font-family:'Montserrat', Arial, Helvetica, sans-serif;
font-size: 50px;
width:100%;
text-align:center;
line-height: 60px;
color: #fff;
text-transform: uppercase;
letter-spacing: -2px;
margin-bottom:40px;
}

#startScreen .startBtn{
cursor:pointer;
font-family:'Montserrat', Arial, Helvetica, sans-serif;
font-size: 30px;
margin:0 auto;
color: #fff;
margin-top:80px;
text-align:center;
width:300px;
padding:20px;
border: 5px solid #fff;
background-image:url(../img/start_bg.png);
background-size:0 100%;
}

#startScreen .startBtn:hover{
/*color:#cf0000;
border: 5px solid #cf0000;*/
background-size:100% 100%;

}

.howToUse{
margin:0 auto;
position:relative;
width:600px;
margin-top:50px;
opacity:0.7;

transition: all 0.5s; /* explorer 10 */
-webkit-transition: all 0.5s; /* chrome & safari */
-moz-transition: all 0.5s; /* firefox */
-o-transition: all 0.5s; /* opera */
}

.howToUse:hover{
opacity:1;

transition: all 0.5s; /* explorer 10 */
-webkit-transition: all 0.5s; /* chrome & safari */
-moz-transition: all 0.5s; /* firefox */
-o-transition: all 0.5s; /* opera */
}

.centerThis{
margin-top:100px;
}
/*#################################################################### Startseite ##################################################################*/

#timeline{
width:100%;
height:90px;
background-color:rgba(0,0,0,0.3);
border-bottom:3px solid #fff;
overflow:hidden;
position:fixed;
z-index:500;
bottom:48px;
	transition: all 0.5s ease;
}

#timeline.open{
	height: calc( 100% - 48px );
	transition: all 0.5s ease;
	background-color:rgba(0,0,0,0.8);
}

#moreTimelineContent{
margin-top:100px;
width:80%;
margin-left:10%;
overflow-y:scroll;
height:80%;
}

#moreTimelineContent h2{
margin-top:50px;
font-family:'Oswald',Arial,Helvetica,sans-serif;
font-size:80px;
color:#fff;
}

#moreTimelineContent div{

text-align:justify;
border-top: 5px solid #fff;
padding-top:50px;

column-count:3;
  -moz-column-count: 3;
  -webkit-column-count: 3;

  column-gap:30;
  -moz-column-gap: 30;
  -webkit-column-gap: 30;

  margin-bottom:200px;
  padding-right:30px;
}

#moreTimelineContent div p{
font-family:'PT Sans',Arial,Helvetica,sans-serif;
font-size:16px;
line-height:25px;
color:#fff;
margin-top:20px;
}

#moreTimelineContent div p:first-element{
margin-top:0px;
}


#closeTimeline{
width:100px;
height:50px;
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;

border:3px solid #fff;
border-bottom:0px;
color:#fff;
font-family:'Montserrat',Arial,Helvetica,sans-serif;
font-size:50px;
line-height:40px;
text-align:center;
position:absolute;
bottom:0px;
z-index:100000000;
left:50%;
margin-left:-50px;
cursor:pointer;
display:none;
}

#timeline ul{
width:2000px;
border-top:3px solid #fff;
top:42px;
position:relative;
}


#timeline li{
    transition: all 0.2s ease-in 0.2s; /* explorer 10 */
    -webkit-transition: all 0.2s ease-in 0.2s; /* chrome & safari */
    -moz-transition: all 0.2s ease-in 0.2s; /* firefox */
    -o-transition: all 0.2s ease-in 0.2s; /* opera */top:30px;

top:-8px;
left:0px;
position:relative;
z-index:520;
height:16px;
width:16px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background-color:#C8AA61;
margin-left:10%;
float:left;
list-style:none;
cursor:pointer;
overflow:hidden;
border:3px solid #fff;
}

#timeline li:hover{
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

    transition: all 0.2s ease-in 0.2s; /* explorer 10 */
    -webkit-transition: all 0.2s ease-in 0.2s; /* chrome & safari */
    -moz-transition: all 0.2s ease-in 0.2s; /* firefox */
    -o-transition: all 0.2s ease-in 0.2s; /* opera */
position:relative;
display: inline-block;
top:-33px;
left:-16px;
height:56px;
width:56px;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
background-color:#fff;
margin-left:10%;
float:left;
text-align:center;

}

#timeline li img{
    transition: all 0.2s ease-in 0.2s; /* explorer 10 */
    -webkit-transition: all 0.2s ease-in 0.2s; /* chrome & safari */
    -moz-transition: all 0.2s ease-in 0.2s; /* firefox */
    -o-transition: all 0.2s ease-in 0.2s; /* opera */

opacity:0;
height:56px;
width:auto;
}



#timeline li:hover img{
    transition: all 0.2s ease-in 0.2s; /* explorer 10 */
    -webkit-transition: all 0.2s ease-in 0.2s; /* chrome & safari */
    -moz-transition: all 0.2s ease-in 0.2s; /* firefox */
    -o-transition: all 0.2s ease-in 0.2s; /* opera */
height:50px;
width:auto;

opacity:1;
}

#timelinePopUp{
width:auto;
max-width:300px;
height:30px;
padding:10px;
padding-top:5px;
padding-bottom:5px;
background-color:#545454;
color:#fff;
position:absolute;
z-index:100000000000000;
font-family:'Oswald',Arial,Helvetica,sans-serif;
font-size:20px;
display:none;
}



#uebersicht{
position:relative;
height:100%;
width:auto;
margin:0 auto;
}


.startMap{
width:100%;
height:100%;
display:block;
overflow:hidden;
position:relative;
background-image:url(../img/wave.png);
}

.startMap img {
width:2200px;
height:1393px;
cursor:move;
}

.btn_map{
position:absolute;
top:50%;
left:20px;
z-index:10000000;
width:30px;
height:30px;
background-color:rgba(0,0,0,0.5);
color:#fff;
line-height:28px;
font-family:'Montserrat',Arial,Helvetica,sans-serif;
font-size:20px;

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

cursor:pointer;
border:2px solid #fff;
text-align:center;
}

#bigger{
margin-top:-30px;
}

#smaller{
margin-top:30px;
}

/*#################################################################### Detailseiten ##################################################################*/

.detail-timeline{
position:relative;
height:100%;
overflow:hidden;
cursor:move;
}

.frame{
position:absolute;
overflow:hidden;
height:100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.darker{
width:100%;
height:100%;
position:absolute;
z-index:3;
opacity:0.5;
background-color:#000;
top:0px;
}

/*.left-paper{
width:50px;
height:100%;
position:absolute;
z-index:4;
top:0px;
left:0px;
background-image:url(../img/border-right.png);
background-size: 100% 100%;
}*/

.right-paper{
width:50px;
height:100%;
position:absolute;
z-index:4;
top:0px;
right:0px;
background-image:url(../img/border-left.png);
background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
}

.frame-content{
height:100%;
position:relative;
width:auto;
z-index:1;
}

.frame-content img{
height:100%;
width:auto;
}

.frame-info{
width:100%;
display:none;
height:auto;
background-image:url(../img/bg.png);
background-position:top;
background-size:cover;
color:#000;
line-height:28px;

font-size:20px;
position:absolute;
bottom:0px;
z-index:10;
padding:20px;
padding-right:50px;
padding-top:120px;

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

.frame-info p,
.frame-info h2,
.frame-info h3{
	max-width: 560px;
margin-inline: auto;
line-height:120%;
}

.frame-info p,
.textneutral p{
font-family:'Montserrat',Arial,Helvetica,sans-serif !important;
font-size:1rem;
line-height:150%;
text-align:left !important;
margin-top:10px;
}

.frame-info h2{
font-family:'Montserrat',Arial,Helvetica,sans-serif;
font-size: 2rem;
padding-bottom: 1rem;
border-bottom:2px dotted #333;
margin-bottom:2rem;
}

.frame-info-close,
.slider-btn{
z-index: 10;
width: 3.25rem;
height: 3.25rem;
position: absolute;
border: 2px solid #C8AA61;
cursor: pointer;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 2.9rem;
font-size: 1.5rem;
text-align: center;
color: #C8AA61;
transition: all 0.5s;
right: 3rem;
}

.frame-info-close:hover,
.slider-btn:hover{
border:2px solid #fff;
background-color:#c8aa61;
color:#fff;

transition: all 0.5s; /* explorer 10 */
-webkit-transition: all 0.5s; /* chrome & safari */
-moz-transition: all 0.5s; /* firefox */
-o-transition: all 0.5s; /* opera */
}

.text{
width:800px;
height:100%;

background-image:url(../img/old_paper.jpg);
background-size: auto 100%;
-moz-background-size: auto 100%;
-webkit-background-size: auto 100%;

line-height: 120%;
font-size: 1.75rem;
font-style: normal;
font-weight: 400;
text-align:center;
padding-left:100px;
padding-right:100px;
color:#fff;

padding-top:50px;
}

.text p{
margin-top:20px;
font-family: 'Caveat',Times, 'Times New Roman', serif;
}

.text h2{
font-size: 2rem;
line-height:35px;
font-family: 'Caveat',Times, 'Times New Roman', serif;
}


.textneutral h2{
margin-top:25px;
font-family: "Montserrat",Arial,Helvetica,sans-serif;
text-align:left;
}

/*Für klickbare Karten in der Detailseite*/

.circle-btn{
z-index:10;
width:3.25rem;
height:3.25rem;
position:absolute;
border:2px solid #C8AA61;
cursor:pointer;
background-color:#fff;
border-radius:50%;
text-align:center;
line-height:3.25rem;
font-size:1.5rem;
text-align:center;
color:#C8AA61;
transition: all 0.5s; /* explorer 10 */
}

.circle-btn:hover{
border:5px solid #fff;
color:#fff;
border:2px solid #fff;
background-color:#C8AA61;

transition: all 0.5s; /* explorer 10 */
}

.circle-click-bg{
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
position:absolute;
z-index:1000;
display:none;
}

.circle-click-content{
width:500px;
padding:50px;
height:auto;
padding:20px;
position:relative;
left:50%;
margin-left:-250px;
top:100px;

display:block !important;
background-color:#fff;
background-position:top;
background-size:100% 100%;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.circle-click-content p{
text-align: left;
margin-top:15px;
font-size:16px;
color:#333;
line-height:22px;
font-family:'Montserrat',Arial,Helvetica,sans-serif;
color:#333;
}

.circle-click-content h2{
font-family:'Montserrat',Arial,Helvetica,sans-serif;
color:#c9ac65;
font-size:30px;
padding-bottom:5px;
border-bottom:1px solid #333;
}

.circle-click-content-move{
text-align:center;
}

.circle-click-content-move img{
width:auto;
height:250px;
margin-bottom:20px;

}

.circle-click-content-close{
margin-top:30px;
width:300px;
height:50px;
font-family:'Montserrat',Arial,Helvetica,sans-serif;
font-size:20px;
line-height:50px;
color:#fff;
cursor:pointer;
background-color:#C8AA61;
text-align:center;
margin-left:80px;
margin-bottom:30px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.circle-click-content-close:hover {
background-color:#9c8243;
}

.infoKasten{
opacity:1;
position:absolute;
margin-left:400px;
z-index:4;
height:80%;
margin-top:10%;
width:500px;
background-color:#fff;
}


#lausitzpoints{
position:absolute;
z-index:100000;
width:100%;
height:100%;
background-color:rgba(30,30,30,0.8);
display:none;
}


.contentofLausitzpoint{
width:80%;
margin-left:10%;
height:80%;
margin-top:5%;
}


.contentofLausitzpoint ul{
list-style:none;
width:100%;
font-family: "Montserrat",Arial,Helvetica,sans-serif;
font-size:25px;
line-height:150px;
}

.contentofLausitzpoint a{
text-decoration:none;
}

.contentofLausitzpoint ul li{
border:1px solid #fff;
width:49% !important;
float:left;
height:40%;
text-align:center;
color:#333;
background-color:#e7dfcd;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
cursor:pointer;

transition: all 0.2s; /* explorer 10 */
-webkit-transition: all 0.2s; /* chrome & safari */
-moz-transition: all 0.2s; /* firefox */
-o-transition: all 0.2s; /* opera */
}

.contentofLausitzpoint ul li:hover{
background-color:#c8aa61;
color:#fff;

transition: all 0.2s; /* explorer 10 */
-webkit-transition: all 0.2s; /* chrome & safari */
-moz-transition: all 0.2s; /* firefox */
-o-transition: all 0.2s; /* opera */
}

.contentofLausitzpoint .unactive{
background-color:#c73d3d;
color:#fff;
}


.viertelLausitz{
width:50%;
height:50%;
background-size: 100% 100%;
background-size: cover;
float:left;
position:relative;
box-sizing: border-box;         /* Opera/IE 8+ */
transition: all 0.5s; /* explorer 10 */
}

.viertelLausitz:hover{
border:10px solid #C8AA61;

transition: all 0.5s; /* explorer 10 */
}

.viertelLausitz a{
	width:100%;
	height:100%;
	position:absolute;
	left: 0px;
bottom: 0px;
font-weight: bold;
color: #fff;
text-shadow: 0 0 10px black;
font-size: 2rem;
line-height:120%;
padding-top: 3rem;
}

.infoBtn{
position:absolute;
z-index:10;

cursor:pointer;
font-family:'Montserrat', Arial, Helvetica, sans-serif;
font-size: 20px;
padding:10px;
color: #C8AA61;
text-align:center;
max-width:300px;
padding:10px;
border: 5px solid #C8AA61;
background-color:rgba(0,0,0,0.5)
}

.centerText{
padding-left:10%;
padding-right:10%;
}

@media(max-width : 1024px){
.howToUse{display:none;}
}