a {color:#0061a5 !important;}
a:hover {color:gray !important;}

header{top:0;width:100%;height:70px;position:fixed;z-index: 10;}
header .logo{margin-top:25px;margin-left:30px;float:left;width:100%;max-width:60px;z-index:10;}
header a.hamburger{text-decoration:none;float:right;margin-right: 30px;margin-top:28.5px;width:30px;height: 19px;background:url(../img/hamburger_icon2.png) no-repeat;z-index:999;}
.close {text-decoration:none;float:right;margin-right: 31.5px;margin-top:26px;width:27px;height: 27px;background:url(../img/close_menu_icon1a.png) no-repeat;z-index:999;}
.logo-menu{margin-top:25px;margin-left:30px;float:left;width:100%;max-width:60px;z-index:999;}
.landing {
        position: relative;
        top: 0;
        width: 100%;
        height: 100vh;
        background: url(../img/landing-f.jpg) center center;
        background-size: cover;
        z-index:999;
}

.landing-mobile {display:none;position:relative;margin: 50px 0 5% 0;}

.arrow {position: absolute; bottom:4px; left:50%;margin-left:-25px;max-width: 50px;;}

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF EIGHT  */
.span_8_of_8 {
	width: 100%;
}

.span_7_of_8 {
  	width: 87.3%;
}

.span_6_of_8 {
  	width: 74.6%;
}

.span_5_of_8 {
  	width: 61.9%;
}

.span_4_of_8 {
  	width: 49.2%;
}

.span_3_of_8 {
  	width: 36.5%;
}

.span_2_of_8 {
  	width: 23.8%;
}

.span_1_of_8 {
  	width: 11.1%;
}

/*
  GO FULL WIDTH BELOW 480 PIXELS 
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 100%; }
}
*/

/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.25%;
}
.span_2_of_4 {
	width: 48.5%;
}
.span_1_of_4 {
	width: 22.75%;
}

/*
  GO FULL WIDTH BELOW 480 PIXELS 
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}
*/

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 65.66%; }
.span_1_of_3 { width: 31.33%; }

/*
  GO FULL WIDTH BELOW 480 PIXELS 
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
*/

.headline {text-align: center; width: 100%;margin-top:6em; margin-bottom: 6em;}
h1 {font-family: 'Roboto';font-size:2em;font-weight:100;color:black;letter-spacing: 1px;}
h1 span {color: gray; font-style: italic;}

img{width:100%;height:auto;}
.caption{text-align:center;font-size:0.9em;font-family:'Roboto';font-weight:500;color:black;margin-top:15px;}
.caption span{color:gray;font-weight:100;}

.exp{text-decoration:none;color:black;font-family:'Roboto',Helvetica,Arial,sans-serif;font-size:1em;text-align:center;font-weight:400;margin-top:4em;transition:all .45s linear;-webkit-transition:all .45s linear;-moz-transition:all .45s linear;-o-transition:all .45s linear;cursor:pointer;margin-bottom:1.6%}
.exp span{color:#0086e4;font-style:italic;}
.expclose{margin-top:50px;text-decoration:none;color:black;font-family:'Roboto',Helvetica,Arial,sans-serif;font-size:1em;text-align:center;font-weight:500;transition:all .45s linear;-webkit-transition:all .45s linear;-moz-transition:all .45s linear;-o-transition:all .45s linear;cursor:pointer;margin-bottom:1.6%;z-index:999}
.expcontent{display:none}
.expcontent-wrapper{margin-left:15%; margin-right: 15%;}
.uebersicht {margin: 1% 0 1% 3%;};
.exp:hover{color:blue}
.expclose:hover{color:blue}

.exposition {font-family:'Roboto';font-weight:500;color:black;margin-top:0;margin-left:2%;}
.exposition span{color:gray;font-weight:100;}
.expogrid {margin-top: 2em;}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.vita-txt {
    font-family:'Roboto';font-weight:400;text-align: center;color:black;
}
.fr {color:#0086e4; font-style:italic;}
.anschrift {color:black;}

.footer {text-align:center;width:100%;margin-top:3em; margin-bottom:1em;font-family:'Roboto';font-size:0.75em;}

.menu {position: fixed;top: 0;background-color: mediumblue;opacity:0.9;width:100vw;height:100vh;z-index:998;}

nav {text-align:center;position: absolute; top:50%;transform: translateY(-50%);width: 100%;}
nav ul {text-align: center; padding-left:0;}
nav li {text-decoration:none;list-style: none;padding-top:20px;line-height:10vh;}
nav li a {font-family: 'Roboto';font-size:2em;font-weight:100;color:white !important;letter-spacing: 1px;}
nav li a span {color: gray; font-style: italic;}

 /* Style the buttons that are used to open and close the accordion panel */
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 30%;
    text-align: center;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

/* Style the accordion panel. Note: hidden by default */
div.panel {
    width:100%;
    padding: 0 18px;
    display: none;
}

/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel.show {
    display: block;
}
.expo-ext {
    text-align: center; font-family: 'Roboto';font-weight: 300; color:black;margin: 0;padding:0;
}
.expo-ext ul {
    text-align: center;
}
.expo-ext li {
    list-style: none;
}
.exp-weitere {
    width:100%; text-align: center;margin-top: 3em;margin-bottom:2em;
}
.expo-ext li span{color: gray;}
.expo-ext h4{font-weight: 400;}

.contact-txt-mobile {display: none;}

@media only screen and (max-width: 740px) {
    .content {margin: 0 25px 0 25px !important;}
    .wrapper {display:block;}
    .hundret {width: 100% !important;margin-right:25px; margin-left:0 !important;margin-top: 2% !important;}
    .hundret-hide {display: none;}
    p {}
    #woherichkomme {display:none;}
    header {background-color: rgba(255,255,255,0.98);height: 50px;}
    header .logo {margin-top: 17px;}
    .logo-menu {margin-top: 17px;}
    .close {margin-top: 14px;}
    header a.hamburger {margin-top: 17px;}
    .headline {margin-top:3em; margin-bottom: 3em;}
    .landing {display:none;}
    .landing-mobile {display:block;}
    .exposition {font-size: 0.8em;}
    .expo-ext li {font-size:0.8em;}
    .swr-beitrag {margin-top:2% !important;font-size:1em;}
    h1 {font-size: 1.75em !important;}
    .expcontent-wrapper .caption {display: none;}
    .expcontent-wrapper  {margin-top: 10% !important;}
    .contact-txt {display: none;}
    .contact-txt-mobile {display: block; text-align: center;}
    .expogrid {margin-left: -25px;}
    .blackimg {padding: 1em;}
}

@media only screen and (max-width: 430px) {
    nav ul li {font-size: 0.7em;}
}

@media only screen (min-width:600px) and (max-width: 739px) {
    .landing-mobile {margin-top: 5%;}
}