html,body {
font-family:"Open Sans",sans-serif,"google";
font-size:16px;
color:rgb(62, 71, 76);
}
h1,h2 {
text-transform: uppercase;
color: #9c2d6b;
}
h3,h4 {
text-transform: uppercase;
color: #e41f67;
}
h3 { font-size:20px; }
hr {
border-width:0 0 1px;
border-style:solid;
border-color:#3e474c;
margin-bottom:10px;
}
a {
color: #9C2D6B;
text-decoration:none;
}

.btn {
font-size:12px;
}

.gal {
display: flex;
flex-wrap: wrap; 
padding: 0 2px;
}

.galcol {
  flex: 25%;
  max-width: 25%;
  padding: 0 2px;
}

.galcol img {
  margin-top: 4px;
  vertical-align: middle;
  width: 100%;
}
#navMobile {
	position:fixed;
	top:0;
	right:0;
	z-index:1;
	margin-top:55px;
	margin-left:20%;
	margin-right:10px;
	background-color: white;
	width:80%;
}
#hm {font-size:18px;}
#hm_a { border: 1px solid #9C2D6B; }


.acc01,.acc02,.acc03 {
    background-color: #CCCECE;
}

.xn-select {
color:white;
background-color:#9C2D6B;
}


@media screen and (max-width:700px) {
#logo {width:170px; height:36px;}
.w3-button {font-size:14px}
.xn-content {margin-top:60px;}
.w3-top {background-color:rgb(255,255,255,1);} 
h2 {font-size:24px;}
h3 {font-size:18px;}
hr {margin-top:10px;}
p  {margin-top: 8px;}
}

@media screen and (min-width:701px) {
#logo {width:200px;height:44px;}
.xn-content {margin-top:60px;}
.w3-top {background-color:rgb(255,255,255,0.9);} 
hr {margin-top:15px;}
p  {margin-top: 8px;}
}

@media screen and (max-width: 800px) {
  .galcol {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .galcol {
    flex: 100%;
    max-width: 100%;
  }
}

#nav {
max-width:1000px;
margin:0 auto;
padding:10px;
}

@media (min-width:780px){
#wzimmer {
float:right; 
width:267px;
height:auto;
}
}

@media (max-width:779px){
#wzimmer {
width:80%;
height:auto;
align:center;
}
}

#btntop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 16px;
  border: 1px solid gray;
  outline: none;
  background-color: white;
  color: gray;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#btntop:hover {
  background-color: #505050;
}

.w3-button:hover{color:rgb(255,255,255,1);background-color:rgb(156, 45, 107,1);}

.xn-plus {color:inherit;padding: 8px 16px;}
.xn-plus-none {padding: 8px 16px;}
.xn-plus:hover {color:white}
.xn-plus:active {color:white;background-color:transparent} 

.xn-content {
   margin-left: auto;
   margin-right: auto;
   max-width: 980px;
}

.xn-marquee {
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    border: 1px solid rgba(0, 0, 0, .15); */
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
    height: 30px;
    width: 100%;
    /* Full width of its parent */
    white-space: nowrap;
}

.xn-marquee h3 {
    position: absolute;
    width: auto;
    height: 100%;
    margin: 0;
    line-height: 30px;
    text-align: center;
    /* Start off the right edge */
    transform: translateX(100%);
    /* Animate to the left */
    animation: scroll-left 20s linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}