/*html{
	    background: url('../resources/img/background.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}*/

body {
    background: url('../resources/img/background.jpg') fixed;
    background-repeat: repeat;
    /*background-color: #feebab;*/
}

@font-face { font-family: OstrichSans-Medium; src: url('../resources/font/OstrichSans-Medium.otf'); } 
@font-face { font-family: BebasNeue-Bold; src: url('../resources/font/BebasNeue-Bold.otf'); } 
@font-face { font-family: BebasNeue-Regular; src: url('../resources/font/BebasNeue Regular.otf'); } 

/* For mobile phones: */
[class*="col-"] {
    width: 100%;  
    float: left;
}
/*menu invisible until toggled in desktop-viewport*/
#menu{display: none;}
#dsd_mobile{display: block;}
.dropbtn {width: 100%;}
.content_frame_menu{display: none}
.split_container{width: 90%;}
.basic_Map{width: 85vw;height: 85vw;}
.header h1 {font-size: 200%;}
.header {padding-bottom: 40px;}


@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    #menu{display: block;}
    #menu_btn{display: none;}
    .dropdown-content{width: 95%;}
    .dropbtn {width: 95%;}
    .dropdown{position: absolute !important;}
    .content_frame_menu{display: block;}
    .split_container{width: 45%;}
    .basic_Map{width: 60vw;height: 45vw;}
    .header h1 {font-size: 250%;}
    #dsd_mobile{display: none;}
    .header {padding-bottom: 20px;}
}


.header {
    background-color: rgba(236,240,241,0.9);
    color: #FFFFFF;
    padding-left: 15px;
    padding-top: 20px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.24);
    margin-bottom: 20px
    
}

.header p{
    text-decoration: none;
    color: black;
    font-family: OstrichSans-Medium;
    font-size: 30px;
}

.header img {
    float: left;
    margin-top: -10px;
    margin-right: 15px;
}

.content_frame header{
    border: 0px;
    background-color: rgba(236,240,241,0.9);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin: 5px;
    margin-bottom: 30px;
}


h1{
    font-family: OstrichSans-Medium;
    font-size: 250%;
    color: rgb(100,100,100);
}

.header h1 {
    font-family: OstrichSans-Medium;
    color: rgb(100,100,100);
}

h2{
    font-family: OstrichSans-Medium;
    color: rgb(100,100,100);
    font-size: 30px;
    margin-top: 20px;
    
}

.header a{
    text-decoration: none;
    color: white;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li {
    padding-bottom: 5px;
}

#menu_btn{
    margin-bottom: 5px;
}

#menu_btn:after{
    content:'\2261';
    color: #777;
    font-weight: bold;
    float: ;
}

.dropbtn {
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 15px;
    transition: 0.4s; 
    background-color: rgba(236,240,241,0.9);
    color: rgb(100,100,100);
    padding: 10px;
    font-family: BebasNeue-Bold;
    font-size: 23px;
    min-width: width;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    position: relative;
    display: inline-block;
}


.active, .dropbtn:hover, .dropbtn:focus {
    background-color: rgba(210,210,210,1);
}

.dropbtn:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.dropdown-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    font-family: BebasNeue-Bold;
    font-size: 20px;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    min-width: width;
}

.dropdown-content a {
    text-align: center;
    border: 0px;
    border-bottom: 1px;
    border-style: solid;
    border-bottom-color: #E0E0E0;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}


.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}

.content_frame, .content_frame_footer, .content_frame_menu {

    background-color: rgba(236,240,241,0.9);
    float: right;
    color: #ffffff;
    margin-bottom: 20px;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.24);
    padding-bottom: 30px;
    position: relative;
    z-index: 1;

}

.content_frame h1{
    margin: 0px;
    color: rgb(100,100,100);
}

.content_frame_menu h1{
    font-size: 200%;
    margin: 10px;
}

.content_frame_footer{
    padding-bottom: 10px;
    padding-top: 10px;
    color: black;
}

.content_frame_menu{
    width: 95%; 
    float: left;
}

.content_frame_footer a{
    text-decoration: none;
    color: black;
    font-family: OstrichSans-Medium;
    font-size: 30px;
    padding: 2%;
}

.content_frame p{
    color: rgb(100,100,100);
    font-family: Arial;
    font-size: 16px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: justify;
    max-width: 70%;
    margin: 0 auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    line-height:1.3;
}


.headerlink{
    text-decoration: none; 
    color: #FFFFFF;
}

img.resize {
  width:125px;
  height:125px;
}

img.fill {
    width: 85%;
}

img.dsd_logo {
  width:250px;
  height:auto;
}

table {
    margin: 0 auto;
}

#imagelightbox
{
    position: fixed;
    z-index: 9999;
 
    -ms-touch-action: none;
    touch-action: none;
}

a.imagelightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: #ff4545;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 2%;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

img.imgLarge {
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 20px 20px 20px 20px;
width: 90%;
height: auto;
}

img.imgSmall {
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 20px 20px 20px 20px;
width: 40%;
height: auto;
}

@media screen and (max-width: 768px) {
img.imgSmall {
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 20px 20px 20px 20px;
width: 90%;
height: auto;
    }}

.row {
  display: flex;
  flex-wrap: wrap;
}
    
.split_container{
height: auto;
margin: 0 auto;
margin-bottom: 15px;
}

.split_container img{
margin: 0;
width: 90%;
height: auto;
}
/* Create four equal columns that sits next to each other */

.column {
  flex: 5%;
  max-width: 100%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

.copyright p{
    color: black !important;
    padding: 0;
    margin: 0;
}

#centered{
    text-align: center;
}

#centered_gap{
    text-align: center;
    margin: 0 auto ;
    margin-top: 10px;
    margin-bottom: 10px;
}

#pano_underline{
    text-align: center;
    margin: 0 auto ;
    margin-bottom: 25px;
}

.basic_Map{
    margin: 0 auto;
    margin: 0 auto;
    border: 1px solid black;

}

#small_link{
    text-decoration: none;
    color: rgb(100,100,250);
    font-family: Arial;
    font-size: 16px;
}

#large_link{
    text-decoration: none;
    color: rgb(100,100,250);
}