@charset "utf-8";
/* CSS Document */
/* Hier wird der Inhalt der Webseite formatiert */
@font-face {
            font-family: 'Josefin Slab';
            font-style: normal;
            src: url("fonts/JosefinSlab-Regular.ttf");
}

@font-face {

            font-family: 'Josefin Slab thin';
            font-style: normal;
            src: url("fonts/JosefinSlab-Thin.ttf");
}

@font-face {
            font-family: 'Josefin Slab bold';
            font-style: normal;
            src: url("fonts/JosefinSlab-Bold.ttf");
}

@font-face {
            font-family: 'Josefin Sans regular';
            font-style: normal;
            src: url("fonts/JosefinSans-Regular.ttf");
}

@font-face {

            font-family: 'Josefin Sans thin';
            font-style: normal;
            src: url("fonts/JosefinSans-Thin.ttf");
}

@font-face {
            font-family: 'Josefin Sans light';
            font-style: normal;
            src: url("fonts/JosefinSans-Light.ttf");
}

@font-face {

            font-family: 'Josefin Sans semibold';
            font-style: normal;
            src: url("fonts/JosefinSans-SemiBold.ttf");
}

@font-face {
            font-family: 'Josefin Sans bold';
            font-style: normal;
            src: url("fonts/JosefinSans-Bold.ttf");
}



/* Small devices (portrait tablets and large phones, 600px and up) */
@media screen and (min-width: 600px) {

/*********************Cookie************************************/
#mbmcookie {position: fixed;
               bottom: 0;
               left: 0;
               right: 0;
               background: #336699;
               padding: 2% 1% 1% 1%;
               font-size: 2.1vw;
               font-family: "Josefin Sans regular";}

    #mbmcookie a.button {cursor: pointer;
                         background: #ccc;
                         padding: 1% 2% 1% 2%;
                         margin-left: 6%;
                         border-radius: 1em;
                         font-family: "Josefin Sans regular";
                         float: right;}

    #mbmcookie a.button:hover {background-color: #aaa;}

    #mbmcookie p.cookiemessage {display: block;
                               padding: 0;
                               margin: 0;
                               font-size: 2.1vw;
                               font-family: "Josefin Sans regular";
                               color: #fff;}

/*******************Cookie Ende*********************************/
/************Bildergallerie************************************/

/* {
   box-sizing: border-box;
}*/

.Gallerie {
           position: relative;
}

.Bilder {
         display: none;
}

.cursor {
         cursor: pointer;
}

.vor {
      position: absolute;
      margin-top: 40%;
      margin-left: -6%;
      font-size: 3.5vw;
      color: white;
      padding: 0% 1% 0% 0%;

}

.zurueck {
          position: absolute;
          margin-top: 40%;
          margin-left: -102%;
          font-size: 3.5vw;
          color: white;
          padding: 0% 0% 0% 1%;
}

.zurueck:hover ,
.vor:hover {
            background-color: #999999;
}

.nummerntext {
              position: absolute;
              margin-top: -4%;
              margin-left: 47%;
              font-size: 2.1vw;
              background-color: #cccccc;
              color: white;
              padding: 0.2%;
}

.BildunterschriftRahmen{
                        text-align: center;
                        background-color: #999;
                        padding: 67% 1% 0.5% 1%;
                        color: white;
}

.BildunterschriftRahmen p {
                           color: white;
                           padding-top: 4%;
}

.zeile {
}

.zeile:after {
              content: "";
              display: table;
              clear: both;
}

.spalte {
         float: left;
         width: 16.66%;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

/**************************************************************/
/************************Portfoloi Galerie**************************************/
.bookmark {
	visibility: hidden;
}

.dropdownList {
					position: relative;
					display: inline-block;
}

.dropdownList {
					text-align: center;
					width: 100%;
}

#myBtnContainer {
						display: block;
			         z-index: 1;

}

.dropdownList:hover #myBtnContainer {
					display: block;
}
select {
			width:50%;
			font-size: 2.3vw;
			font-family: "Josefin Sans light";
			text-align: center;
			margin-left: 25%;
			padding: 1% 0% 0% 0%; 
}

option.btn {
			font-family: "Josefin Sans light";	
}

h4 {
		margin: 0% 0% 0% 0%;
		padding: 2% 0% 2% 2%;
		font-family: "Josefin Sans light";
     	color: #999999;
      font-size: 2vw;
      line-height: 1;

}

.content p{
				font-size: 1.8vw;
				font-style: italic;
				margin: 0%;

}

.row {
  width: 100%;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
  margin: 2% 1%;
  padding: 2% 1%%;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 47.1%;
  display: none; /* Hide columns by default */
}

/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
  font-family: "Josefin Sans light";
}

/* Content */
/*.content {
  background-color: white;
  padding: 10px;
}*/

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

.btn {
  border: none;
  outline: none;
  background-image: linear-gradient(to bottom right, #dce4ec, #99b2cc);
  cursor: pointer;
  width: 80%;
  font-size: 2vw;
  font-family: "Josefin Sans light";
  float: left;
  opacity: 0.5;
  margin: 0% 10% 0% 10%;
}

.btn:hover {
	font-family: "Josefin Sans regular";	
	opacity: 1;
}

#myBtnContainer a {
		font-family: "Josefin Sans light";
		font-size: 2vw;
		color: black;
}


#myBtnContainer a:hover {
		font-family: "Josefin Sans regular";	
		opacity: 1;
		letter-spacing: normal;
		color: black;
}
.btn a {
	color: black;

}




/*******************************************************************************/

body {
      background-color: #ffffff;
      width: 100%;
      height: 100%;
}

article {
         background-color: #ffffff;
         width: 98%;
         margin: 0% auto;
}

a {
   color: #3282db;
   font-family: "Josefin Sans light";
   text-decoration: none;
}

a:hover {
         letter-spacing: 0.1em;
}

center {
        font-family: "Josefin Sans light";
        font-size: 2.1vw;
        line-height: 1.2;
}

p {
         font-family: "Josefin Sans light";
         padding: 0% 1% 0% 1%;
         color: #999999;
         font-size: 2.1vw;
         line-height: 1.2;
}

figcaption {
            float:left;
            width: 40%;
            clear: both;
            background-color: #336699;
            font-family: "Josefin Sans light";
            font-size: 2vw;
            padding: 0% 1% 1% 1%;
            margin: 0% 2% 1.5% 0%;
            color: #ffffff;
}

img.counterimg{
               width: 7%;
               height: auto;
               position: absolute;
               margin: 0.5% 0% 0% 0%;
}

.center {
         text-align: center;
}

.left {
       text-align: left;
       padding-left: 2%;
}


.right{
       text-align: right;
       margin-top: -22%;
       width: 97%;

}

pre {
         font-family: "Josefin Slab";
         padding: 3% 1% 1% 1%;
         color: #999999;
         font-size: 2.1vw;

}

h2 {
   font-size: 3.5vw;
   color: #336699;
   font-family: "Josefin Slab";
   text-align: center;
   padding: 5% 0% 0% 0%;
   margin-top: 5%;

}

h3 {
   font-family: "Josefin Sans regular";
   padding: 0.6% 0% 0.2% 1%;
   color: #fafafa;
   font-size: 2.1vw;
   background-image: linear-gradient(to bottom right, #dce4ec, #99b2cc);
   letter-spacing: 0.01em;
}

iframe{
       margin: auto;
       width: 100%;
}

li {
    font-family: "Josefin Sans light";
    color: #999999;
    margin-top: 3%;
}

ul {
    padding: 0% 3% 0% 6%;
    font-size: 2.1vw;

}
#rahmen {
         margin: 4% auto;
         width: 65%;
         max-width: 100%;
         box-shadow: 0em 3.625em 1.938em 0.625em rgba(111,117,125,1);
}

#webseite {
           background-color: #ffffff;
           width: 70%;
           max-width: 100%;
          -webkit-box-shadow: 0em 0em 2.438em -0.250em rgba(0,0,0,0.75);
          -moz-box-shadow: 0em 0em 2.438em -0.250em rgba(0,0,0,0.75);
          box-shadow: 0em 0em 2.438em -0.250em rgba(0,0,0,0.75);
           margin: auto;

}


#head {
       width: 100%;
}

#head  h1 {
           font-family: "Josefin Slab thin";
           font-size: 4.5vw;
           margin: 0;
           padding: 1.5em 0em 0.5em 0.3em;
           color: #999999;
}

#head img {
            width: 100%;
            max-height: 100%;
            margin-bottom: 3%;
}

#navi {
       width: 98%;
       max-height: 100%;
       font-family: "Josefin Slab";
       font-size: 2.1vw;
       background-color: #cccccc;
       height: 3.5em;
       padding-left: 2%;
}

#navi a {
         color: #ffffff;
         text-decoration: none;
         letter-spacing: 0em;
         font-family: "Josefin Sans light";
         line-height: 1.2;
}

#navi .dropdownAktuelles a {
                           color: #336699;
                           text-decoration: none;
                           font-family: Josefin Sans light;
}

#navi .dropdownAktuelles a:hover {
                                font-family: Josefin Sans semibold;
                                font-size: 1.5vw;
}


#navi .Aktuelles {
                  color: #ffffff;
                  float: left;
                  width: 20%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
                 /* background-image: url("images/hover_aktuelles.jpg");
                  background-size: cover;*/
}

#navi .Aktuelles:hover {
                        background-image: url("images/hover_aktuelles.jpg");
                        background-size: cover;
}

#navi .aktivAktuelles {
                      color: #ffffff;
                      float: left;
                      width: 20%;
                      background-color: #999999;
                      height: 98%;
                      border-color: #ffffff;
                      border-style: inset solid;
                      border-width: thin;
                      text-align: center;
                      background-image: url("images/hover_aktuelles.jpg");
                      background-size: cover;
}

#navi .aktivAktuelles .aktivDropdown a  {
                      color: #336699;

}

#navi .aktivAktuelles .aktivDropdown a:hover  {
                      color: #336699;
                      font-family: Josefin Sans semibold;
                      font-size: 1.5vw;

}

#navi  .aktivDropdown {
                      display: block;
                      margin: 3% 0 0 0.3%;
                      position: absolute;
                      background-color: #ffffff;
                      padding: 0.2em;
                      font-color: #336699;
                      color: #336699;
                      font-size: 1.5vw;
                      z-index: 1;
}



/*#navi .dropdownAktuelles  {
                            margin: 3% 0 0 -0.8%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1vw;
                                z-index: 1;

}*/

#navi .dropdownAktuelles  {
                           display: none;

                           }


#navi .Aktuelles:hover .dropdownAktuelles {
                                display: block;
                                margin: 3% 0 0 0.3%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1.5vw;
                                z-index: 1;
                                }

#navi .Choere {
               color: #ffffff;
               float: left;
               width: 20%;
               background-color: #999999;
               height: 98%;
               border-color: #ffffff;
               border-style: inset solid;
               border-width: thin;
               text-align: center;

}

#navi .Choere:hover {
                     background-image: url("images/hover_choere.jpg");
                     background-size: cover;
}

#navi .aktivChoere {
                    color: #ffffff;
                    float: left;
                    width: 20%;
                    background-color: #999999;
                    height: 98%;
                    border-color: #ffffff;
                    border-style: inset solid;
                    border-width: thin;
                    text-align: center;
                    background-image: url("images/hover_choere.jpg");
                    background-size: cover;
}

#navi .dropdownChoere {
                        display:none;
}

#navi .dropdownChoere a {
                           color: #336699;
                           text-decoration: none;
                           font-family: Josefin Sans light;
}

#navi .dropdownChoere a:hover {
                                font-family: Josefin Sans semibold;
                                font-size: 1.5vw;
}

#navi .Choere:hover .dropdownChoere {
                                display: block;
                                margin: 3% 0 0 0.07%;
                                width: 13%;
                                text-align: center;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1.5vw;
                                z-index: 1;
                                }

/*CSS-Formatierungen wenn CHOERE aktiv*/
#navi .aktivdropdownChoere {
                                display: block;
                                margin: 3% 0 0 0.07%;
                                width: 13%;
                                text-align: center;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1.5vw;
                                z-index: 1;

}

#navi .aktivChoere .aktivdropdownChoere a  {
                      color: #336699;

}

#navi .aktivChoere .aktivdropdownChoere a:hover {
                                                   color: #336699;
                                                   font-family: Josefin Sans semibold;

}

/******CHOERE aktiv ENDE***************/

/*#navi .Gospel {
                  color: #ffffff;
                  float: left;
                  width: 20%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .Gospel:hover {
                      background-image: url("images/hover_gospel.jpg");
                      background-size: cover;
}

#navi .aktivGospel {
                    color: #ffffff;
                    float: left;
                    width: 20%;
                    background-color: #999999;
                    height: 98%;
                    border-color: #ffffff;
                    border-style: inset solid;
                    border-width: thin;
                    text-align: center;
                    background-image: url("images/hover_gospel.jpg");
                    background-size: cover;
}*/

#navi .Kontakt {
                  color: #ffffff;
                  float: left;
                  width: 19%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .Kontakt:hover {
                       background-image: url("images/hover_kontakt.jpg");
                       background-size: cover;

}

#navi .aktivKontakt {
                     color: #ffffff;
                     float: left;
                     width: 19%;
                     background-color: #999999;
                     height: 98%;
                     border-color: #ffffff;
                     border-style: inset solid;
                     border-width: thin;
                     text-align: center;
                     background-image: url("images/hover_kontakt.jpg");
                     background-size: cover;
}

#navi .dropdownKontakt {
                        display:none;
}

#navi .dropdownKontakt a {
                           color: #336699;
                           text-decoration: none;
                           font-family: Josefin Sans light;
}

#navi .dropdownKontakt a:hover {
                                font-family: Josefin Sans semibold;
                                font-size: 1.5vw;
}

#navi .Kontakt:hover .dropdownKontakt {
                                display: block;
                                margin: 3% 0 0 -0.3%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1.5vw;
                                z-index: 1;
                                }

/*CSS-Formatierungen wenn KONTAKT aktiv*/
#navi .aktivdropdownKontakt {
                                display: block;
                                margin: 3% 0 0 -0.3%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1.5vw;
                                z-index: 1

}

#navi .aktivKontakt .aktivdropdownKontakt a  {
                      color: #336699;

}

#navi .aktivKontakt .aktivdropdownKontakt a:hover {
                                                   color: #336699;
                                                   font-family: Josefin Sans semibold;
                                                   font-size: 1.5vw;
}
/******KONTAKT aktiv ENDE***************/

#navi .Links {
                  color: #ffffff;
                  float: left;
                  width: 19%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .Links:hover {

                     background-image: url("images/hover_links.jpg");
                     background-size: cover;

}

#navi .aktivLinks {
                   color: #ffffff;
                   float: left;
                   width: 19%;
                   background-color: #999999;
                   height: 98%;
                   border-color: #ffffff;
                   border-style: inset solid;
                   border-width: thin;
                   text-align: center;
                   background-image: url("images/hover_links.jpg");
                   background-size: cover;
}

#navi .GaesteBilder {
                  color: #ffffff;
                  float: left;
                  width: 19%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .GaesteBilder:hover {
                            background-image: url("images/hover_gaestebilder.jpg");
                            background-size: cover;
}

#navi .aktivGaesteBilder {
                          color: #ffffff;
                          float: left;
                          width: 19%;
                          background-color: #999999;
                          height: 98%;
                          border-color: #ffffff;
                          border-style: inset solid;
                          border-width: thin;
                          text-align: center;
                          background-image: url("images/hover_gaestebilder.jpg");
                          background-size: cover;
}

#content {
          width: 98%;
          height: 100%;
          background-color: #336699;
          padding: 1% 1% 2% 1%;
          color: #999999;
}

#content img.headline{
                      width: 100%;
                      height: auto;
                      float: none;
                      background-color: #ccc;
                      padding-top: 7%;
}

#content figcaption.headline{
                             width: 98%;
                             padding-top: 2%;
                             text-align: center;
                             float: none;
                             background-color: #ccc;

}

#content p br.break{
         display: none;
}

#content .karte img{
                    width: 80%;
                    margin: auto;
}

#content .banner {
                  background-image: linear-gradient(to bottom right, #dce4ec, #99b2cc);
}

#content .banner .clearfix {
                            overflow: auto;
}

#content .banner article {
                          background-color: #ffffff;
                           font-family: "Josefin Sans thin";
                           margin: 10% 0% 0% 0%;
                           padding: 1% 0% 0.5% 15%;
                           font-size: 2.1vw;
                           border-top: thin solid black;
                           border-bottom: thin solid black;
                           width: 85%;

}

#content .banner h2 {
                     font-family: "Josefin Sans regular";
                     padding: 7% 0% 7% 15%;
                     font-size: 2.1vw;
                     text-align: left;
                     width: 40%;
                     float: left;

}

#content .banner .bild img {
                            max-width: 100%;
                            height: auto;
                            border-radius: 17%;
                            box-shadow: 0.875em 0.875em 1.188em 0em rgba(51,104,153,1);
                            float: right;
                            padding: 0%;
                            width: 23%;
                            margin: 3% 6% 6% 0%;

}

#content h1 {
             font-family: "Josefin Slab thin";
             font-size: 3.2vw;
             padding: 1% 0% 1% 22%;
             color: #336699;
}

#content img {
              width: 20%;
              margin-right: 2%;
              float: left;
}

#content .bild img {
                width: 100%;
                float: none;
                background-color: #336699;
                padding: 1%;

}

#content .fleyer img {
                width: 40%;
                float: left;
                background-color: #336699;
                padding: 1%;

}

#content .termine {
                   font-family: "Josefin Sans light";
                   margin: 0% 1% 0% 1%;
                   color: #999999;
                   font-size: 2vw;
                   line-height: 1.2;
}

#content .termine table{
                        width: 100%;
                        text-align: center;
}

#content .termine td{
                     font-family: josefin sans light;
                     text-align: center;
}

#content .termine tr{
                     padding-bottom: 2%;
}

tr.hinterlegt {
                background-color: #e4ecf4;
}

td.right {
          width: 80%;
}


#floatRight img {
             width: 20%;
             margin-left: 2%;
             margin-right: 0%;
             float: right;
}

#footer {
         width: 96%;
         max-height: 100%;
         height: 9.5em;
         font-family: "Josefin Slab";
         padding: 0% 0% 0% 2%;
         font-size: 1.5vw;
         color: #336699;
}

#footer p {
         font-family: "Josefin Sans light";
         padding: 0% 1.7% 1% 1%;
         color: #999999;
         font-size: 1.32vw;
         float: left;

}
}
/* Small devices ENDE***********************************************/

/* Medium devices (landscape tablets, 768px and up) ***************/
@media screen and (min-width: 768px) {
       /*********************Cookie************************************/
#mbmcookie {position: fixed;
               bottom: 0;
               left: 0;
               right: 0;
               background: #336699;
               padding: 2% 1% 1% 1%;
               font-size: 2.1vw;
               font-family: "Josefin Sans regular";}

    #mbmcookie a.button {cursor: pointer;
                         background: #ccc;
                         padding: 1% 2% 1% 2%;
                         margin-left: 6%;
                         border-radius: 1em;
                         font-family: "Josefin Sans regular";
                         float: right;}

    #mbmcookie a.button:hover {background-color: #aaa;}

    #mbmcookie p.cookiemessage {display: block;
                               padding: 0;
                               margin: 0;
                               font-size: 2.1vw;
                               font-family: "Josefin Sans regular";
                               color: #fff;}

/*******************Cookie Ende*********************************/
/************Bildergallerie************************************/

/* {
   box-sizing: border-box;
}*/

.Gallerie {
           position: relative;
}

.Bilder {
         display: none;
}

.cursor {
         cursor: pointer;
}

.vor {
      position: absolute;
      margin-top: 40%;
      margin-left: -6%;
      font-size: 3.5vw;
      color: white;
      padding: 0% 1% 0% 0%;

}

.zurueck {
          position: absolute;
          margin-top: 40%;
          margin-left: -102%;
          font-size: 3.5vw;
          color: white;
          padding: 0% 0% 0% 1%;
}

.zurueck:hover ,
.vor:hover {
            background-color: #999999;
}

.nummerntext {
              position: absolute;
              margin-top: -4%;
              margin-left: 47%;
              font-size: 2.1vw;
              background-color: #cccccc;
              color: white;
              padding: 0.2%;
}

.BildunterschriftRahmen{
                        text-align: center;
                        background-color: #999;
                        padding: 67% 1% 0.5% 1%;
                        color: white;
}

.BildunterschriftRahmen p {
                           color: white;
                           padding-top: 4%;
}

.zeile {
}

.zeile:after {
              content: "";
              display: table;
              clear: both;
}

.spalte {
         float: left;
         width: 16.66%;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

/**************************************************************/
/************************Portfoloi Galerie**************************************/
.bookmark {
	visibility: hidden;
}

.dropdownList {
					position: relative;
					display: inline-block;
}

.dropdownList {
					text-align: center;
					width: 100%;
}

#myBtnContainer {
						display: block;
			         z-index: 1;

}

.dropdownList:hover #myBtnContainer {
					display: block;
}

select {
			width:50%;
			font-size: 2.1vw;
			font-family: "Josefin Sans light";
			text-align: center;
			margin-left: 25%;
			padding: 1% 0% 0% 0%; 
}

option.btn {
			font-family: "Josefin Sans light";	
}

h4 {
		margin: 0% 0% 0% 0%;
		padding: 2% 0% 2% 2%;
		font-family: "Josefin Sans light";
     	color: #999999;
      font-size: 1.8vw;
      line-height: 1;

}

.content p{
				font-size: 1.8vw;
				font-style: italic;
				margin: 0%;

}

.row {
  width: 100%;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
  margin: 2% 1%;
  padding: 2% 1%%;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 30.7%;
  display: none; /* Hide columns by default */
}

/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
  font-family: "Josefin Sans light";
}

/* Content */
/*.content {
  background-color: white;
  padding: 10px;
}*/

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

.btn {
  border: none;
  outline: none;
  background-image: linear-gradient(to bottom right, #dce4ec, #99b2cc);
  cursor: pointer;
  width: 80%;
  font-size: 1.8vw;
  font-family: "Josefin Sans light";
  float: left;
  opacity: 0.5;
  margin: 0% 10% 0% 10%;
}

.btn:hover {
	font-family: "Josefin Sans regular";	
	opacity: 1;
}

#myBtnContainer a {
		font-family: "Josefin Sans light";
		font-size: 1.8vw;
		color: black;
}

#myBtnContainer a:hover {
		font-family: "Josefin Sans regular";	
		opacity: 1;
		letter-spacing: normal;
		color: black;
}
.btn a {
	color: black;

}





/*******************************************************************************/

body {
      background-color: #ffffff;
      width: 100%;
      height: 100%;
}

article {
         background-color: #ffffff;
         width: 98%;
         margin: 0% auto;
}

a {
   color: #3282db;
   font-family: "Josefin Sans light";
   text-decoration: none;
}

a:hover {
         letter-spacing: 0.1em;
}

center {
        font-family: "Josefin Sans light";
        font-size: 2.1vw;
        line-height: 1.2;
}

p {
         font-family: "Josefin Sans light";
         padding: 0% 1% 0% 1%;
         color: #999999;
         font-size: 2.1vw;
         line-height: 1.2;
}
br.break {display: none;}

figcaption {
            float:left;
            width: 40%;
            clear: both;
            background-color: #336699;
            font-family: "Josefin Sans light";
            font-size: 2vw;
            padding: 0% 1% 1% 1%;
            margin: 0% 2% 1.5% 0%;
            color: #ffffff;
}

img.counterimg{
               width: 7%;
               height: auto;
               position: absolute;
               margin: 0.5% 0% 0% 0%;
}

.center {
         text-align: center;
}

.left {
       text-align: left;
       padding-left: 2%;
}


.right{
       text-align: right;
       margin-top: -22%;
       width: 97%;

}

pre {
         font-family: "Josefin Slab";
         padding: 3% 1% 1% 1%;
         color: #999999;
         font-size: 2.1vw;

}

h2 {
   font-size: 3.5vw;
   color: #336699;
   font-family: "Josefin Slab";
   text-align: center;
   padding: 5% 0% 0% 0%;
   margin-top: 5%;

}

h3 {
   font-family: "Josefin Sans regular";
   padding: 0.6% 0% 0.2% 1%;
   color: #fafafa;
   font-size: 2.1vw;
   background-image: linear-gradient(to bottom right, #dce4ec, #99b2cc);
   letter-spacing: 0.01em;
}

iframe{
       margin: auto;
       width: 100%;
}

li {
    font-family: "Josefin Sans light";
    color: #999999;
    margin-top: 3%;
}

ul {
    padding: 0% 3% 0% 6%;
    font-size: 2.1vw;

}


#rahmen {
         margin: 4% auto;
         width: 65%;
         max-width: 100%;
         box-shadow: 0em 3.625em 1.938em 0.625em rgba(111,117,125,1);
}

#webseite {
           background-color: #ffffff;
           width: 70%;
           max-width: 100%;
          -webkit-box-shadow: 0em 0em 2.438em -0.250em rgba(0,0,0,0.75);
          -moz-box-shadow: 0em 0em 2.438em -0.250em rgba(0,0,0,0.75);
          box-shadow: 0em 0em 2.438em -0.250em rgba(0,0,0,0.75);
           margin: auto;

}


#head {
       width: 100%;
}

#head  h1 {
           font-family: "Josefin Slab thin";
           font-size: 4.5vw;
           margin: 0;
           padding: 1.5em 0em 0.5em 0.3em;
           color: #999999;
}

#head img {
            width: 100%;
            max-height: 100%;
            margin-bottom: 3%;
}

#navi {
       width: 98%;
       max-height: 100%;
       font-family: "Josefin Slab";
       font-size: 2.1vw;
       background-color: #cccccc;
       height: 3.5em;
       padding-left: 2%;
}

#navi a {
         color: #ffffff;
         text-decoration: none;
         letter-spacing: 0em;
         font-family: "Josefin Sans light";
         line-height: 1.2;
}

#navi .dropdownAktuelles a {
                           color: #336699;
                           text-decoration: none;
                           font-family: Josefin Sans light;
}

#navi .dropdownAktuelles a:hover {
                                font-family: Josefin Sans semibold;
                                font-size: 1.5vw;
}


#navi .Aktuelles {
                  color: #ffffff;
                  float: left;
                  width: 20%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
                 /* background-image: url("images/hover_aktuelles.jpg");
                  background-size: cover;*/
}

#navi .Aktuelles:hover {
                        background-image: url("images/hover_aktuelles.jpg");
                        background-size: cover;
}

#navi .aktivAktuelles {
                      color: #ffffff;
                      float: left;
                      width: 20%;
                      background-color: #999999;
                      height: 98%;
                      border-color: #ffffff;
                      border-style: inset solid;
                      border-width: thin;
                      text-align: center;
                      background-image: url("images/hover_aktuelles.jpg");
                      background-size: cover;
}

#navi .aktivAktuelles .aktivDropdown a  {
                      color: #336699;

}

#navi .aktivAktuelles .aktivDropdown a:hover  {
                      color: #336699;
                      font-family: Josefin Sans semibold;
                      font-size: 1.5vw;

}

#navi  .aktivDropdown {
                      display: block;
                      margin: 3% 0 0 0.3%;
                      position: absolute;
                      background-color: #ffffff;
                      padding: 0.2em;
                      font-color: #336699;
                      color: #336699;
                      font-size: 1.5vw;
                      z-index: 1;
}



/*#navi .dropdownAktuelles  {
                            margin: 3% 0 0 -0.8%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1vw;
                                z-index: 1;

}*/

#navi .dropdownAktuelles  {
                           display: none;

                           }


#navi .Aktuelles:hover .dropdownAktuelles {
                                display: block;
                                margin: 3% 0 0 0.3%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1.5vw;
                                z-index: 1;
                                }

#navi .Choere {
               color: #ffffff;
               float: left;
               width: 20%;
               background-color: #999999;
               height: 98%;
               border-color: #ffffff;
               border-style: inset solid;
               border-width: thin;
               text-align: center;

}

#navi .Choere:hover {
                     background-image: url("images/hover_choere.jpg");
                     background-size: cover;
}

#navi .aktivChoere {
                    color: #ffffff;
                    float: left;
                    width: 20%;
                    background-color: #999999;
                    height: 98%;
                    border-color: #ffffff;
                    border-style: inset solid;
                    border-width: thin;
                    text-align: center;
                    background-image: url("images/hover_choere.jpg");
                    background-size: cover;
}

#navi .dropdownChoere {
                        display:none;
}

#navi .dropdownChoere a {
                           color: #336699;
                           text-decoration: none;
                           font-family: Josefin Sans light;
}

#navi .dropdownChoere a:hover {
                                font-family: Josefin Sans semibold;
                                font-size: 1.5vw;
}

#navi .Choere:hover .dropdownChoere {
                                display: block;
                                margin: 3% 0 0 0.07%;
                                width: 13%;
                                text-align: center;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1.5vw;
                                z-index: 1;
                                }

/*CSS-Formatierungen wenn CHOERE aktiv*/
#navi .aktivdropdownChoere {
                                display: block;
                                margin: 3% 0 0 0.07%;
                                width: 13%;
                                text-align: center;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1.5vw;
                                z-index: 1;

}

#navi .aktivChoere .aktivdropdownChoere a  {
                      color: #336699;

}

#navi .aktivChoere .aktivdropdownChoere a:hover {
                                                   color: #336699;
                                                   font-family: Josefin Sans semibold;

}

/******CHOERE aktiv ENDE***************/

/*#navi .Gospel {
                  color: #ffffff;
                  float: left;
                  width: 20%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .Gospel:hover {
                      background-image: url("images/hover_gospel.jpg");
                      background-size: cover;
}

#navi .aktivGospel {
                    color: #ffffff;
                    float: left;
                    width: 20%;
                    background-color: #999999;
                    height: 98%;
                    border-color: #ffffff;
                    border-style: inset solid;
                    border-width: thin;
                    text-align: center;
                    background-image: url("images/hover_gospel.jpg");
                    background-size: cover;
}*/

#navi .Kontakt {
                  color: #ffffff;
                  float: left;
                  width: 19%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .Kontakt:hover {
                       background-image: url("images/hover_kontakt.jpg");
                       background-size: cover;

}

#navi .aktivKontakt {
                     color: #ffffff;
                     float: left;
                     width: 19%;
                     background-color: #999999;
                     height: 98%;
                     border-color: #ffffff;
                     border-style: inset solid;
                     border-width: thin;
                     text-align: center;
                     background-image: url("images/hover_kontakt.jpg");
                     background-size: cover;
}

#navi .dropdownKontakt {
                        display:none;
}

#navi .dropdownKontakt a {
                           color: #336699;
                           text-decoration: none;
                           font-family: Josefin Sans light;
}

#navi .dropdownKontakt a:hover {
                                font-family: Josefin Sans semibold;
                                font-size: 1.5vw;
}

#navi .Kontakt:hover .dropdownKontakt {
                                display: block;
                                margin: 3% 0 0 -0.3%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1.5vw;
                                z-index: 1;
                                }

/*CSS-Formatierungen wenn KONTAKT aktiv*/
#navi .aktivdropdownKontakt {
                                display: block;
                                margin: 3% 0 0 -0.3%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1.5vw;
                                z-index: 1

}

#navi .aktivKontakt .aktivdropdownKontakt a  {
                      color: #336699;

}

#navi .aktivKontakt .aktivdropdownKontakt a:hover {
                                                   color: #336699;
                                                   font-family: Josefin Sans semibold;
                                                   font-size: 1.5vw;
}
/******KONTAKT aktiv ENDE***************/

#navi .Links {
                  color: #ffffff;
                  float: left;
                  width: 19%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .Links:hover {

                     background-image: url("images/hover_links.jpg");
                     background-size: cover;

}

#navi .aktivLinks {
                   color: #ffffff;
                   float: left;
                   width: 19%;
                   background-color: #999999;
                   height: 98%;
                   border-color: #ffffff;
                   border-style: inset solid;
                   border-width: thin;
                   text-align: center;
                   background-image: url("images/hover_links.jpg");
                   background-size: cover;
}

#navi .GaesteBilder {
                  color: #ffffff;
                  float: left;
                  width: 19%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .GaesteBilder:hover {
                            background-image: url("images/hover_gaestebilder.jpg");
                            background-size: cover;
}

#navi .aktivGaesteBilder {
                          color: #ffffff;
                          float: left;
                          width: 19%;
                          background-color: #999999;
                          height: 98%;
                          border-color: #ffffff;
                          border-style: inset solid;
                          border-width: thin;
                          text-align: center;
                          background-image: url("images/hover_gaestebilder.jpg");
                          background-size: cover;
}

#content {
          width: 98%;
          height: 100%;
          background-color: #336699;
          padding: 1% 1% 2% 1%;
          color: #999999;
}

#content img.headline{
                      width: 100%;
                      height: auto;
                      float: none;
                      background-color: #ccc;
                      padding-top: 7%;
}

#content figcaption.headline{
                             width: 98%;
                             padding-top: 2%;
                             text-align: center;
                             float: none;
                             background-color: #ccc;

}
#content p br.break{
         display: none;
}

#content .karte img{
                    width: 80%;
                    margin: auto;
}

#content .banner {
                  background-image: linear-gradient(to bottom right, #dce4ec, #99b2cc);
}

#content .banner .clearfix {
                            overflow: auto;
}

#content .banner article {
                          background-color: #ffffff;
                           font-family: "Josefin Sans thin";
                           margin: 10% 0% 0% 0%;
                           padding: 1% 0% 0.5% 15%;
                           font-size: 2.1vw;
                           border-top: thin solid black;
                           border-bottom: thin solid black;
                           width: 85%;

}

#content .banner h2 {
                     font-family: "Josefin Sans regular";
                     padding: 7% 0% 7% 15%;
                     font-size: 2.1vw;
                     text-align: left;
                     width: 40%;
                     float: left;

}

#content .banner .bild img {
                            max-width: 100%;
                            height: auto;
                            border-radius: 17%;
                            box-shadow: 0.875em 0.875em 1.188em 0em rgba(51,104,153,1);
                            float: right;
                            padding: 0%;
                            width: 23%;
                            margin: 3% 6% 6% 0%;

}

#content h1 {
             font-family: "Josefin Slab thin";
             font-size: 3.2vw;
             padding: 1% 0% 1% 22%;
             color: #336699;
}

#content img {
              width: 20%;
              margin-right: 2%;
              float: left;
}

#content .bild img {
                width: 100%;
                float: none;
                background-color: #336699;
                padding: 1%;

}

#content .fleyer img {
                width: 40%;
                float: left;
                background-color: #336699;
                padding: 1%;

}

#content .termine {
                   font-family: "Josefin Sans light";
                   margin: 0% 1% 0% 1%;
                   color: #999999;
                   font-size: 2vw;
                   line-height: 1.2;
}

#content .termine table{
                        width: 100%;
                        text-align: center;
}

#content .termine td{
                     font-family: josefin sans light;
                     text-align: center;
}

#content .termine tr{
                     padding-bottom: 2%;
}

tr.hinterlegt {
                background-color: #e4ecf4;
}

td.right {
          width: 80%;
}


#floatRight img {
             width: 20%;
             margin-left: 2%;
             margin-right: 0%;
             float: right;
}

#footer {
         width: 96%;
         max-height: 100%;
         height: 9.5em;
         font-family: "Josefin Slab";
         padding: 0% 0% 0% 2%;
         font-size: 1.5vw;
         color: #336699;
}

#footer p {
         font-family: "Josefin Sans light";
         padding: 0% 1.7% 1% 1%;
         color: #999999;
         font-size: 1.32vw;
         float: left;

}
}
/* Medium devices ENDE ********************************************/

/* Large devices (laptops/desktops, 992px and up) ****************/
@media screen and (min-width: 992px) {
       /*********************Cookie************************************/
#mbmcookie {position: fixed;
               bottom: 0;
               left: 0;
               right: 0;
               background: #336699;
               padding: 2% 1% 1% 1%;
               font-size: 1.5vw;
               font-family: "Josefin Sans regular";}

    #mbmcookie a.button {cursor: pointer;
                         background: #ccc;
                         padding: 1% 2% 1% 2%;
                         margin-left: 6%;
                         border-radius: 0.5em;
                         font-family: "Josefin Sans regular";
                         float: right;}

    #mbmcookie a.button:hover {background-color: #aaa;}

    #mbmcookie p.cookiemessage {display: block;
                               padding: 0;
                               margin: 0;
                               font-size: 1.5vw;
                               font-family: "Josefin Sans regular";
                               color: #fff;}

/*******************Cookie Ende*********************************/
/************Bildergallerie************************************/

/* {
   box-sizing: border-box;
}*/

.Gallerie {
           position: relative;
}

.Bilder {
         display: none;
}

.cursor {
         cursor: pointer;
}

.vor {
      position: absolute;
      margin-top: 40%;
      margin-left: -6%;
      font-size: 3vw;
      color: white;
      padding: 0% 1% 0% 0%;

}

.zurueck {
          position: absolute;
          margin-top: 40%;
          margin-left: -102%;
          font-size: 3vw;
          color: white;
          padding: 0% 0% 0% 1%;
}

.zurueck:hover ,
.vor:hover {
            background-color: #999999;
}

.nummerntext {
              position: absolute;
              margin-top: -4%;
              margin-left: 47%;
              font-size: 1.5vw;
              background-color: #cccccc;
              color: white;
              padding: 0.2%;
}

.BildunterschriftRahmen{
                        text-align: center;
                        background-color: #999;
                        padding: 67% 1% 0.5% 1%;
                        color: white;
}

.BildunterschriftRahmen p {
                           color: white;
                           padding-top: 4%;
}

.zeile {
}

.zeile:after {
              content: "";
              display: table;
              clear: both;
}

.spalte {
         float: left;
         width: 16.66%;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

/**************************************************************/
/************************Portfoloi Galerie**************************************/
.bookmark {
	visibility: hidden;
}

.dropdownList {
					position: relative;
					display: inline-block;
}

.dropdownList {
					text-align: center;
					width: 100%;
}

#myBtnContainer {
						display: none;
			         z-index: 1;

}

.dropdownList:hover #myBtnContainer {
					display: block;
}




select {
			width:50%;
			font-size: 1.2vw;
			font-family: "Josefin Sans light";
			text-align: center;
			margin-left: 25%;
			padding: 1% 0% 0% 0%; 
}

option.btn {
			font-family: "Josefin Sans light";	
}

h4 {
		margin: 0% 0% 0% 0%;
		padding: 2% 0% 2% 2%;
		font-family: "Josefin Sans light";
     	color: #999999;
      font-size: 1.1vw;
      line-height: 1;

}

.content p{
				font-size: 1vw;
				font-style: italic;
				margin: 0%;

}

.row {
  width: 100%;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
  margin: 2% 1%;
  padding: 2% 1%%;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 30.7%;
  display: none; /* Hide columns by default */
}

/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
  font-family: "Josefin Sans light";
}

/* Content */
/*.content {
  background-color: white;
  padding: 10px;
}*/

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  background-image: linear-gradient(to bottom right, #dce4ec, #99b2cc);
  cursor: pointer;
  width: 50%;
  font-size: 1.2vw;
  font-family: "Josefin Sans light";
  float: left;
  opacity: 0.5;
  margin: 0% 25% 0% 25%;
}

.btn:hover {
	font-family: "Josefin Sans regular";	
	opacity: 1;
}

#myBtnContainer a {
		font-family: "Josefin Sans light";
		font-size: 1.2vw;
		color: black;
}

#myBtnContainer a:hover {
		font-family: "Josefin Sans regular";	
		opacity: 1;
		letter-spacing: normal;
		color: black;
}
.btn a {
	color: black;

}










/* Add a grey background color on mouse-over */
/*.btn:hover {
  background-color: #ddd;
}*/

/* Add a dark background color to the active button */
/*.btn.active {
  background-color: #666;
   color: white;
}*/





/*******************************************************************************/

body {
      background-color: #ffffff;
      width: 100%;
      height: 100%;
}

article {
         background-color: #ffffff;
         width: 98%;
         margin: 0% auto;
}

a {
   color: #3282db;
   font-family: "Josefin Sans light";
   text-decoration: none;
}

a:hover {
         letter-spacing: 0.1em;
}

center {
        font-family: "Josefin Sans light";
        font-size: 1.5vw;
        line-height: 1.2;
}

p {
         font-family: "Josefin Sans light";
         padding: 0% 1% 0% 1%;
         color: #999999;
         font-size: 1.5vw;
         line-height: 1.2;
}

figcaption {
            float:left;
            width: 40%;
            clear: both;
            background-color: #336699;
            font-family: "Josefin Sans light";
            font-size: 1.5vw;
            padding: 0% 1% 1% 1%;
            margin: 0% 2% 1.5% 0%;
            color: #fff;
}

img.counterimg{
               width: 5%;
               height: auto;
               position: absolute;
               margin: 0.5% 0% 0% 0%;
}

.center {
         text-align: center;
}

.left {
       text-align: left;
       padding-left: 2%;
}


.right{
       text-align: right;
       margin-top: -22%;
       width: 97%;

}

pre {
         font-family: "Josefin Slab";
         padding: 3% 1% 1% 1%;
         color: #999999;
         font-size: 1.5vw;

}

h2 {
   font-size: 2.5vw;
   color: #336699;
   font-family: "Josefin Slab";
   text-align: center;
   padding: 5% 0% 0% 0%;
   margin-top: 5%;

}

h3 {
   font-family: "Josefin Sans regular";
   padding: 0.6% 0% 0.2% 1%;
   color: #fafafa;
   font-size: 1.5vw;
   background-image: linear-gradient(to bottom right, #dce4ec, #99b2cc);
   letter-spacing: 0.01em;
}

iframe{
       margin: auto;
       width: 100%;
}

li {
    font-family: "Josefin Sans light";
    color: #999999;
    margin-top: 3%;
}

ul {
    padding: 0% 3% 0% 6%;
    font-size: 1.5vw;

}
#rahmen {
         margin: 4% auto;
         width: 65%;
         max-width: 100%;
         box-shadow: 0em 3.625em 1.938em 0.625em rgba(111,117,125,1);
}

#webseite {
           background-color: #ffffff;
           width: 50%;
           max-width: 100%;
          -webkit-box-shadow: 0em 0em 2.438em -0.250em rgba(0,0,0,0.75);
          -moz-box-shadow: 0em 0em 2.438em -0.250em rgba(0,0,0,0.75);
          box-shadow: 0em 0em 2.438em -0.250em rgba(0,0,0,0.75);
           margin: auto;

}


#head {
       width: 100%;
}

#head  h1 {
           font-family: "Josefin Slab thin";
           font-size: 4vw;
           margin: 0;
           padding: 1.5em 0em 0.5em 0.3em;
           color: #999999;
}

#head img {
            width: 100%;
            max-height: 100%;
            margin-bottom: 3%;
}

#navi {
       width: 98%;
       max-height: 100%;
       font-family: "Josefin Slab";
       font-size: 1.5vw;
       background-color: #cccccc;
       height: 3.5em;
       padding-left: 2%;
}

#navi a {
         color: #ffffff;
         text-decoration: none;
         letter-spacing: 0em;
         font-family: "Josefin Sans light";
         line-height: 1.2;
}

#navi .dropdownAktuelles a {
                           color: #336699;
                           text-decoration: none;
                           font-family: Josefin Sans light;
}

#navi .dropdownAktuelles a:hover {
                                font-family: Josefin Sans semibold;
                                font-size: 1vw;
}


#navi .Aktuelles {
                  color: #ffffff;
                  float: left;
                  width: 20%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
                 /* background-image: url("images/hover_aktuelles.jpg");
                  background-size: cover;*/
}

#navi .Aktuelles:hover {
                        background-image: url("images/hover_aktuelles.jpg");
                        background-size: cover;
}

#navi .aktivAktuelles {
                      color: #ffffff;
                      float: left;
                      width: 20%;
                      background-color: #999999;
                      height: 98%;
                      border-color: #ffffff;
                      border-style: inset solid;
                      border-width: thin;
                      text-align: center;
                      background-image: url("images/hover_aktuelles.jpg");
                      background-size: cover;
}

#navi .aktivAktuelles .aktivDropdown a  {
                      color: #336699;

}

#navi .aktivAktuelles .aktivDropdown a:hover  {
                      color: #336699;
                      font-family: Josefin Sans semibold;
                      font-size: 1vw;

}

#navi  .aktivDropdown {
                      display: block;
                      margin: 3% 0 0 0.6%;
                      position: absolute;
                      background-color: #ffffff;
                      padding: 0.2em;
                      font-color: #336699;
                      color: #336699;
                      font-size: 1vw;
                      z-index: 1;
}



/*#navi .dropdownAktuelles  {
                            margin: 3% 0 0 -0.8%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1vw;
                                z-index: 1;

}*/

#navi .dropdownAktuelles  {
                           display: none;

                           }


#navi .Aktuelles:hover .dropdownAktuelles {
                                display: block;
                                margin: 3% 0 0 0.6%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1vw;
                                z-index: 1;
                                }

#navi .Choere {
               color: #ffffff;
               float: left;
               width: 20%;
               background-color: #999999;
               height: 98%;
               border-color: #ffffff;
               border-style: inset solid;
               border-width: thin;
               text-align: center;

}

#navi .Choere:hover {
                     background-image: url("images/hover_choere.jpg");
                     background-size: cover;
}

#navi .aktivChoere {
                    color: #ffffff;
                    float: left;
                    width: 20%;
                    background-color: #999999;
                    height: 98%;
                    border-color: #ffffff;
                    border-style: inset solid;
                    border-width: thin;
                    text-align: center;
                    background-image: url("images/hover_choere.jpg");
                    background-size: cover;
}

#navi .dropdownChoere {
                        display:none;
}

#navi .dropdownChoere a {
                           color: #336699;
                           text-decoration: none;
                           font-family: Josefin Sans light;
}

#navi .dropdownChoere a:hover {
                                font-family: Josefin Sans semibold;
                                font-size: 1vw;
}

#navi .Choere:hover .dropdownChoere {
                                display: block;
                                margin: 3% 0 0 -3%;
                                width: 15%;
                                text-align: center;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1vw;
                                z-index: 1;
                                }

/*CSS-Formatierungen wenn CHOERE aktiv*/
#navi .aktivdropdownChoere {
                                display: block;
                                margin: 3% 0 0 -3%;
                                width: 15%;
                                text-align: center;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1vw;
                                z-index: 1;

}

#navi .aktivChoere .aktivdropdownChoere a  {
                      color: #336699;

}

#navi .aktivChoere .aktivdropdownChoere a:hover {
                                                   color: #336699;
                                                   font-family: Josefin Sans semibold;

}

/******CHOERE aktiv ENDE***************/

/*#navi .Gospel {
                  color: #ffffff;
                  float: left;
                  width: 20%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .Gospel:hover {
                      background-image: url("images/hover_gospel.jpg");
                      background-size: cover;
}

#navi .aktivGospel {
                    color: #ffffff;
                    float: left;
                    width: 20%;
                    background-color: #999999;
                    height: 98%;
                    border-color: #ffffff;
                    border-style: inset solid;
                    border-width: thin;
                    text-align: center;
                    background-image: url("images/hover_gospel.jpg");
                    background-size: cover;
}*/

#navi .Kontakt {
                  color: #ffffff;
                  float: left;
                  width: 19%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .Kontakt:hover {
                       background-image: url("images/hover_kontakt.jpg");
                       background-size: cover;

}

#navi .aktivKontakt {
                     color: #ffffff;
                     float: left;
                     width: 19%;
                     background-color: #999999;
                     height: 98%;
                     border-color: #ffffff;
                     border-style: inset solid;
                     border-width: thin;
                     text-align: center;
                     background-image: url("images/hover_kontakt.jpg");
                     background-size: cover;
}

#navi .dropdownKontakt {
                        display:none;
}

#navi .dropdownKontakt a {
                           color: #336699;
                           text-decoration: none;
                           font-family: Josefin Sans light;
}

#navi .dropdownKontakt a:hover {
                                font-family: Josefin Sans semibold;
                                font-size: 1vw;
}

#navi .Kontakt:hover .dropdownKontakt {
                                display: block;
                                margin: 3% 0 0 0.15%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1vw;
                                z-index: 1;
                                }

/*CSS-Formatierungen wenn KONTAKT aktiv*/
#navi .aktivdropdownKontakt {
                                display: block;
                                margin: 3% 0 0 0.15%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1vw;
                                z-index: 1

}

#navi .aktivKontakt .aktivdropdownKontakt a  {
                      color: #336699;

}

#navi .aktivKontakt .aktivdropdownKontakt a:hover {
                                                   color: #336699;
                                                   font-family: Josefin Sans semibold;
                                                   font-size: 1vw;
}
/******KONTAKT aktiv ENDE***************/

#navi .Links {
                  color: #ffffff;
                  float: left;
                  width: 19%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .Links:hover {

                     background-image: url("images/hover_links.jpg");
                     background-size: cover;

}

#navi .aktivLinks {
                   color: #ffffff;
                   float: left;
                   width: 19%;
                   background-color: #999999;
                   height: 98%;
                   border-color: #ffffff;
                   border-style: inset solid;
                   border-width: thin;
                   text-align: center;
                   background-image: url("images/hover_links.jpg");
                   background-size: cover;
}

#navi .GaesteBilder {
                  color: #ffffff;
                  float: left;
                  width: 19%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .GaesteBilder:hover {
                            background-image: url("images/hover_gaestebilder.jpg");
                            background-size: cover;
}

#navi .aktivGaesteBilder {
                          color: #ffffff;
                          float: left;
                          width: 19%;
                          background-color: #999999;
                          height: 98%;
                          border-color: #ffffff;
                          border-style: inset solid;
                          border-width: thin;
                          text-align: center;
                          background-image: url("images/hover_gaestebilder.jpg");
                          background-size: cover;
}

#content {
          width: 98%;
          height: 100%;
          background-color: #336699;
          padding: 1% 1% 2% 1%;
          color: #999999;
}

#content img.headline{
                      width: 100%;
                      height: auto;
                      float: none;
                      background-color: #ccc;
                      padding-top: 7%;
}

#content figcaption.headline{
                             width: 98%;
                             padding-top: 2%;
                             text-align: center;
                             float: none;
                             background-color: #ccc;

}

#content .karte img{
                    width: 80%;
                    margin: auto;
}

#content .banner {
                  background-image: linear-gradient(to bottom right, #dce4ec, #99b2cc);
}

#content .banner .clearfix {
                            overflow: auto;
}

#content .banner article {
                          background-color: #ffffff;
                           font-family: "Josefin Sans thin";
                           margin: 10% 0% 0% 0%;
                           padding: 1% 0% 0.5% 15%;
                           font-size: 1.5vw;
                           border-top: thin solid black;
                           border-bottom: thin solid black;
                           width: 85%;

}

#content .banner h2 {
                     font-family: "Josefin Sans regular";
                     padding: 7% 0% 7% 15%;
                     font-size: 1.5vw;
                     text-align: left;
                     width: 40%;
                     float: left;

}

#content .banner .bild img {
                            max-width: 100%;
                            height: auto;
                            border-radius: 17%;
                            box-shadow: 0.875em 0.875em 1.188em 0em rgba(51,104,153,1);
                            float: right;
                            padding: 0%;
                            width: 23%;
                            margin: 3% 6% 6% 0%;

}

#content h1 {
             font-family: "Josefin Slab thin";
             font-size: 1.8vw;
             padding: 1% 0% 1% 22%;
             color: #336699;
}

#content p br.break{
         display: none;
}

#content img {
              width: 20%;
              margin-right: 2%;
              float: left;
}

#content .bild img {
                width: 100%;
                float: none;
                background-color: #336699;
                padding: 1%;

}

#content .fleyer img {
                width: 40%;
                float: left;
                background-color: #336699;
                padding: 1%;

}

#content .termine {
                   font-family: "Josefin Sans light";
                   margin: 0% 1% 0% 1%;
                   color: #999999;
                   font-size: 1.5vw;
                   line-height: 1.2;
}

#content .termine table{
                        width: 100%;
                        text-align: center;
}

#content .termine td{
                     font-family: josefin sans light;
                     text-align: center;
}

#content .termine tr{
                     padding-bottom: 2%;
}

tr.hinterlegt {
                background-color: #e4ecf4;
}

td.right {
          width: 80%;
}


#floatRight img {
             width: 20%;
             margin-left: 2%;
             margin-right: 0%;
             float: right;
}

#footer {
         width: 96%;
         max-height: 100%;
         height: 9.5em;
         font-family: "Josefin Slab";
         padding: 0% 0% 0% 2%;
         font-size: 1vw;
         color: #336699;
}

#footer p {
         font-family: "Josefin Sans light";
         padding: 0% 1.7% 1% 1%;
         color: #999999;
         font-size: 0.95vw;
         float: left;

}
}
/* Large devices ENDE *******************************************/

/*********************************************PC-Ansicht*********************************/
@media screen and (min-width: 1200px) {

/*********************Cookie************************************/
#mbmcookie {position: fixed;
               bottom: 0;
               left: 0;
               right: 0;
               background: #336699;
               padding: 2% 1% 1% 1%;
               font-size: 1.5vw;
               font-family: "Josefin Sans semibold";}

    #mbmcookie a.button {cursor: pointer;
                         background: #ccc;
                         padding: 1% 2% 1% 2%;
                         margin-left: 6%;
                         border-radius: 0.5em;
                         font-family: "Josefin Sans semibold";
                         float: right;}

    #mbmcookie a.button:hover {background-color: #aaa;}

    #mbmcookie p.cookiemessage {display: block;
                               padding: 0;
                               margin: 0;
                               font-size: 1.5vw;
                               font-family: "Josefin Sans semibold";
                               color: #fff;}

/*******************Cookie Ende*********************************/
/************Bildergallerie************************************/

/* {
   box-sizing: border-box;
}*/

.Gallerie {
           position: relative;
}

.Bilder {
         display: none;
}

.cursor {
         cursor: pointer;
}

.vor {
      position: absolute;
      margin-top: 40%;
      margin-left: -6%;
      font-size: 3vw;
      color: white;
      padding: 0% 1% 0% 0%;

}

.zurueck {
          position: absolute;
          margin-top: 40%;
          margin-left: -102%;
          font-size: 3vw;
          color: white;
          padding: 0% 0% 0% 1%;
}

.zurueck:hover ,
.vor:hover {
            background-color: #999999;
}

.nummerntext {
              position: absolute;
              margin-top: -4%;
              margin-left: 47%;
              font-size: 1.5vw;
              background-color: #cccccc;
              color: white;
              padding: 0.2%;
}

.BildunterschriftRahmen{
                        text-align: center;
                        background-color: #999;
                        padding: 67% 1% 0.5% 1%;
                        color: white;
}

.BildunterschriftRahmen p {
                           color: white;
                           padding-top: 4%;
}

.zeile {
}

.zeile:after {
              content: "";
              display: table;
              clear: both;
}

.spalte {
         float: left;
         width: 16.66%;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

/**************************************************************/
/************************Portfoloi Galerie**************************************/
.bookmark {
	visibility: hidden;
}

.dropdownList {
					position: relative;
					display: inline-block;
}

.dropdownList {
					text-align: center;
					width: 100%;
}

#myBtnContainer {
						display: none;
			         z-index: 1;

}

.dropdownList:hover #myBtnContainer {
					display: block;
}
select {
			width:50%;
			font-size: 1.2vw;
			font-family: "Josefin Sans light";
			text-align: center;
			margin-left: 25%;
			padding: 1% 0% 0% 0%; 
}

option.btn {
			font-family: "Josefin Sans light";	
}

h4 {
		margin: 0% 0% 0% 0%;
		padding: 2% 0% 2% 2%;
		font-family: "Josefin Sans light";
     	color: #999999;
      font-size: 1.1vw;
      line-height: 1;

}

.content p{
				font-size: 1vw;
				font-style: italic;
				margin: 0%;

}

.row {
  width: 100%;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
  margin: 2% 1%;
  padding: 2% 1%%;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 30.7%;
  display: none; /* Hide columns by default */
}

/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
  font-family: "Josefin Sans light";
}

/* Content */
/*.content {
  background-color: white;
  padding: 10px;
}*/

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

.btn {
  border: none;
  outline: none;
  background-image: linear-gradient(to bottom right, #dce4ec, #99b2cc);
  cursor: pointer;
  width: 50%;
  font-size: 1.2vw;
  font-family: "Josefin Sans light";
  float: left;
  opacity: 0.5;
  margin: 0% 25% 0% 25%;
}

.btn:hover {
	font-family: "Josefin Sans regular";	
	opacity: 1;
}

#myBtnContainer a {
		font-family: "Josefin Sans light";
		font-size: 1.2vw;
		color: black;
}

#myBtnContainer a:hover {
		font-family: "Josefin Sans regular";	
		opacity: 1;
		letter-spacing: normal;
		color: black;
}
.btn a {
	color: black;

}






/*******************************************************************************/

body {
      background-color: #ffffff;
      width: 100%;
      height: 100%;
}

article {
         background-color: #ffffff;
         width: 98%;
         margin: 0% auto;
}

a {
   color: #3282db;
   font-family: "Josefin Sans light";
   text-decoration: none;
}

a:hover {
         letter-spacing: 0.1em;
}

center {
        font-family: "Josefin Sans light";
        font-size: 1.5vw;
        line-height: 1.2;
}

p {
         font-family: "Josefin Sans light";
         padding: 0% 1% 0% 1%;
         color: #999999;
         font-size: 1.5vw;
         line-height: 1.2;
}

img.counterimg{
               width: 5%;
               height: auto;
               position: absolute;
               margin: 0.5% 0% 0% 0%;
}

figcaption {
            float:left;
            width: 40%;
            clear: both;
            background-color: #336699;
            font-family: "Josefin Sans light";
            font-size: 1vw;
            padding: 0% 1% 1% 1%;
            margin: 0% 2% 1.5% 0%;
            color: #ffffff;
}

.center {
         text-align: center;
}

.left {
       text-align: left;
       padding-left: 2%;
}


.right{
       text-align: right;
       margin-top: -22%;
       width: 97%;

}

pre {
         font-family: "Josefin Slab";
         padding: 3% 1% 1% 1%;
         color: #999999;
         font-size: 1.5vw;

}

h2 {
   font-size: 2.5vw;
   color: #336699;
   font-family: "Josefin Slab";
   text-align: center;
   padding: 5% 0% 0% 0%;
   margin-top: 5%;

}

h3 {
   font-family: "Josefin Sans regular";
   padding: 0.6% 0% 0.2% 1%;
   color: #fafafa;
   font-size: 1.5vw;
   background-image: linear-gradient(to bottom right, #dce4ec, #99b2cc);
   letter-spacing: 0.01em;
}

iframe{
       margin: auto;
       width: 100%;
}

li {
    font-family: "Josefin Sans light";
    color: #999999;
    margin-top: 3%;
}

ul {
    padding: 0% 3% 0% 6%;
    font-size: 1.5vw;

}
#rahmen {
         margin: 4% auto;
         width: 65%;
         max-width: 100%;
         box-shadow: 0em 3.625em 1.938em 0.625em rgba(111,117,125,1);
}

#webseite {
           background-color: #ffffff;
           width: 50%;
           max-width: 100%;
          -webkit-box-shadow: 0em 0em 2.438em -0.250em rgba(0,0,0,0.75);
          -moz-box-shadow: 0em 0em 2.438em -0.250em rgba(0,0,0,0.75);
          box-shadow: 0em 0em 2.438em -0.250em rgba(0,0,0,0.75);
           margin: auto;

}


#head {
       width: 100%;
}

#head  h1 {
           font-family: "Josefin Slab thin";
           font-size: 4vw;
           margin: 0;
           padding: 1.5em 0em 0.5em 0.3em;
           color: #999999;
}

#head img {
            width: 100%;
            max-height: 100%;
            margin-bottom: 3%;
}

#navi {
       width: 98%;
       max-height: 100%;
       font-family: "Josefin Slab";
       font-size: 1.5vw;
       background-color: #cccccc;
       height: 3.5em;
       padding-left: 2%;
}

#navi a {
         color: #ffffff;
         text-decoration: none;
         letter-spacing: 0em;
         font-family: "Josefin Sans light";
         line-height: 1.2;
}

#navi .dropdownAktuelles a {
                           color: #336699;
                           text-decoration: none;
                           font-family: Josefin Sans light;
}

#navi .dropdownAktuelles a:hover {
                                font-family: Josefin Sans semibold;
                                font-size: 1vw;
}


#navi .Aktuelles {
                  color: #ffffff;
                  float: left;
                  width: 20%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
                 /* background-image: url("images/hover_aktuelles.jpg");
                  background-size: cover;*/
}

#navi .Aktuelles:hover {
                        background-image: url("images/hover_aktuelles.jpg");
                        background-size: cover;
}

#navi .aktivAktuelles {
                      color: #ffffff;
                      float: left;
                      width: 20%;
                      background-color: #999999;
                      height: 98%;
                      border-color: #ffffff;
                      border-style: inset solid;
                      border-width: thin;
                      text-align: center;
                      background-image: url("images/hover_aktuelles.jpg");
                      background-size: cover;
}

#navi .aktivAktuelles .aktivDropdown a  {
                      color: #336699;

}

#navi .aktivAktuelles .aktivDropdown a:hover  {
                      color: #336699;
                      font-family: Josefin Sans semibold;
                      font-size: 1vw;

}

#navi  .aktivDropdown {
                      display: block;
                      margin: 3% 0 0 0.6%;
                      position: absolute;
                      background-color: #ffffff;
                      padding: 0.2em;
                      font-color: #336699;
                      color: #336699;
                      font-size: 1vw;
                      z-index: 1;
}



/*#navi .dropdownAktuelles  {
                            margin: 3% 0 0 -0.8%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1vw;
                                z-index: 1;

}*/

#navi .dropdownAktuelles  {
                           display: none;

                           }


#navi .Aktuelles:hover .dropdownAktuelles {
                                display: block;
                                margin: 3% 0 0 0.6%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1vw;
                                z-index: 1;
                                }

#navi .Choere {
               color: #ffffff;
               float: left;
               width: 20%;
               background-color: #999999;
               height: 98%;
               border-color: #ffffff;
               border-style: inset solid;
               border-width: thin;
               text-align: center;

}

#navi .Choere:hover {
                     background-image: url("images/hover_choere.jpg");
                     background-size: cover;
}

#navi .aktivChoere {
                    color: #ffffff;
                    float: left;
                    width: 20%;
                    background-color: #999999;
                    height: 98%;
                    border-color: #ffffff;
                    border-style: inset solid;
                    border-width: thin;
                    text-align: center;
                    background-image: url("images/hover_choere.jpg");
                    background-size: cover;
}

#navi .dropdownChoere {
                        display:none;
}

#navi .dropdownChoere a {
                           color: #336699;
                           text-decoration: none;
                           font-family: Josefin Sans light;
}

#navi .dropdownChoere a:hover {
                                font-family: Josefin Sans semibold;
                                font-size: 1vw;
}

#navi .Choere:hover .dropdownChoere {
                                display: block;
                                margin: 3% 0 0 -3%;
                                width: 15%;
                                text-align: center;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1vw;
                                z-index: 1;
                                }

/*CSS-Formatierungen wenn CHOERE aktiv*/
#navi .aktivdropdownChoere {
                                display: block;
                                margin: 3% 0 0 -3%;
                                width: 15%;
                                text-align: center;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1vw;
                                z-index: 1;

}

#navi .aktivChoere .aktivdropdownChoere a  {
                      color: #336699;

}

#navi .aktivChoere .aktivdropdownChoere a:hover {
                                                   color: #336699;
                                                   font-family: Josefin Sans semibold;

}

/******CHOERE aktiv ENDE***************/

/*#navi .Gospel {
                  color: #ffffff;
                  float: left;
                  width: 20%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .Gospel:hover {
                      background-image: url("images/hover_gospel.jpg");
                      background-size: cover;
}

#navi .aktivGospel {
                    color: #ffffff;
                    float: left;
                    width: 20%;
                    background-color: #999999;
                    height: 98%;
                    border-color: #ffffff;
                    border-style: inset solid;
                    border-width: thin;
                    text-align: center;
                    background-image: url("images/hover_gospel.jpg");
                    background-size: cover;
}*/

#navi .Kontakt {
                  color: #ffffff;
                  float: left;
                  width: 19%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .Kontakt:hover {
                       background-image: url("images/hover_kontakt.jpg");
                       background-size: cover;

}

#navi .aktivKontakt {
                     color: #ffffff;
                     float: left;
                     width: 19%;
                     background-color: #999999;
                     height: 98%;
                     border-color: #ffffff;
                     border-style: inset solid;
                     border-width: thin;
                     text-align: center;
                     background-image: url("images/hover_kontakt.jpg");
                     background-size: cover;
}

#navi .dropdownKontakt {
                        display:none;
}

#navi .dropdownKontakt a {
                           color: #336699;
                           text-decoration: none;
                           font-family: Josefin Sans light;
}

#navi .dropdownKontakt a:hover {
                                font-family: Josefin Sans semibold;
                                font-size: 1vw;
}

#navi .Kontakt:hover .dropdownKontakt {
                                display: block;
                                margin: 3% 0 0 0.3%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1vw;
                                z-index: 1;
                                }

/*CSS-Formatierungen wenn KONTAKT aktiv*/
#navi .aktivdropdownKontakt {
                                display: block;
                                margin: 3% 0 0 0.3%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1vw;
                                z-index: 1

}

#navi .aktivKontakt .aktivdropdownKontakt a  {
                      color: #336699;

}

#navi .aktivKontakt .aktivdropdownKontakt a:hover {
                                                   color: #336699;
                                                   font-family: Josefin Sans semibold;
                                                   font-size: 1vw;
}
/******KONTAKT aktiv ENDE***************/

#navi .Links {
                  color: #ffffff;
                  float: left;
                  width: 19%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .Links:hover {

                     background-image: url("images/hover_links.jpg");
                     background-size: cover;

}

#navi .aktivLinks {
                   color: #ffffff;
                   float: left;
                   width: 19%;
                   background-color: #999999;
                   height: 98%;
                   border-color: #ffffff;
                   border-style: inset solid;
                   border-width: thin;
                   text-align: center;
                   background-image: url("images/hover_links.jpg");
                   background-size: cover;
}

#navi .GaesteBilder {
                  color: #ffffff;
                  float: left;
                  width: 19%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .GaesteBilder:hover {
                            background-image: url("images/hover_gaestebilder.jpg");
                            background-size: cover;
}

#navi .aktivGaesteBilder {
                          color: #ffffff;
                          float: left;
                          width: 19%;
                          background-color: #999999;
                          height: 98%;
                          border-color: #ffffff;
                          border-style: inset solid;
                          border-width: thin;
                          text-align: center;
                          background-image: url("images/hover_gaestebilder.jpg");
                          background-size: cover;
}

#content {
          width: 98%;
          height: 100%;
          background-color: #336699;
          padding: 1% 1% 2% 1%;
          color: #999999;
}

#content p br.break{
         display: none;
}

#content .karte img{
                    width: 80%;
                    margin: auto;
}

#content img.headline{
                      width: 100%;
                      height: auto;
                      float: none;
                      background-color: #ccc;
                      padding-top: 7%;
}

#content figcaption.headline{
                             width: 98%;
                             padding-top: 2%;
                             text-align: center;
                             float: none;
                             background-color: #ccc;

}

#content .banner {
                  background-image: linear-gradient(to bottom right, #dce4ec, #99b2cc);
}

#content .banner .clearfix {
                            overflow: auto;
}

#content .banner article {
                          background-color: #ffffff;
                           font-family: "Josefin Sans thin";
                           margin: 10% 0% 0% 0%;
                           padding: 1% 0% 0.5% 15%;
                           font-size: 1.5vw;
                           border-top: thin solid black;
                           border-bottom: thin solid black;
                           width: 85%;

}

#content .banner h2 {
                     font-family: "Josefin Sans regular";
                     padding: 7% 0% 7% 15%;
                     font-size: 1.5vw;
                     text-align: left;
                     width: 40%;
                     float: left;

}

#content .banner .bild img {
                            max-width: 100%;
                            height: auto;
                            border-radius: 17%;
                            box-shadow: 0.875em 0.875em 1.188em 0em rgba(51,104,153,1);
                            float: right;
                            padding: 0%;
                            width: 23%;
                            margin: 3% 6% 6% 0%;

}

#content h1 {
             font-family: "Josefin Slab thin";
             font-size: 1.8vw;
             padding: 1% 0% 1% 22%;
             color: #336699;
}

#content img {
              width: 20%;
              margin-right: 2%;
              float: left;
}

#content .bild img {
                width: 100%;
                float: none;
                background-color: #336699;
                padding: 1%;

}

#content .fleyer img {
                width: 40%;
                float: left;
                background-color: #336699;
                padding: 1%;

}

#content .fleyer p{
                   background-color: #336699;
                   padding: 1%;
                   font-size: 1vw;
                   float: left;

}

#content .termine {
                   font-family: "Josefin Sans light";
                   margin: 0% 1% 0% 1%;
                   color: #999999;
                   font-size: 1.5vw;
                   line-height: 1.2;
}

#content .termine table{
                        width: 100%;
                        text-align: center;
}

#content .termine td{
                     font-family: josefin sans light;
                     text-align: center;
}

#content .termine tr{
                     padding-bottom: 2%;
}

tr.hinterlegt {
                background-color: #e4ecf4;
}

td.right {
          width: 80%;
}


#floatRight img {
             width: 20%;
             margin-left: 2%;
             margin-right: 0%;
             float: right;
}

#footer {
         width: 96%;
         max-height: 100%;
         height: 9.5em;
         font-family: "Josefin Slab";
         padding: 0% 0% 0% 2%;
         font-size: 1vw;
         color: #336699;
}

#footer p {
         font-family: "Josefin Sans light";
         padding: 0% 1.7% 1% 1%;
         color: #999999;
         font-size: 0.95vw;
         float: left;

}

}
/*********************ENDE PC-ANSICHT*************************************************/

 /******************* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px){
/*********************Cookie************************************/
#mbmcookie {position: fixed;
               bottom: 0;
               left: 0;
               right: 0;
               background: #336699;
               padding: 2% 1% 1% 1%;
               font-size: 3vw;
               font-family: "Josefin Sans regular";}

    #mbmcookie a.button {cursor: pointer;
                         background: #ccc;
                         padding: 1% 2% 1% 2%;
                         margin-left: 6%;
                         border-radius: 0.5em;
                         font-family: "Josefin Sans regular";
                         float: right;}

    #mbmcookie a.button:hover {background-color: #aaa;}

    #mbmcookie p.cookiemessage {display: block;
                               padding: 0;
                               margin: 0;
                               font-size: 3vw;
                               font-family: "Josefin Sans regular";
                               color: #fff;}

/*******************Cookie Ende*********************************/
/************Bildergallerie************************************/

/* {
   box-sizing: border-box;
}*/

.Gallerie {
           position: relative;
}

.Bilder {
         display: none;
}

.cursor {
         cursor: pointer;
}

.vor {
      position: absolute;
      margin-top: 40%;
      margin-left: -6%;
      font-size: 4.5vw;
      color: white;
      padding: 0% 1% 0% 0%;

}

.zurueck {
          position: absolute;
          margin-top: 40%;
          margin-left: -102%;
          font-size: 4.5vw;
          color: white;
          padding: 0% 0% 0% 1%;
}

.zurueck:hover ,
.vor:hover {
            background-color: #999999;
}

.nummerntext {
              position: absolute;
              margin-top: -4%;
              margin-left: 47%;
              font-size: 3vw;
              background-color: #cccccc;
              color: white;
              padding: 0.2%;
}

.BildunterschriftRahmen{
                        text-align: center;
                        background-color: #999;
                        padding: 67% 1% 0.5% 1%;
                        color: white;
}

.BildunterschriftRahmen p {
                           color: white;
                           padding-top: 4%;
}

.zeile {
}

.zeile:after {
              content: "";
              display: table;
              clear: both;
}

.spalte {
         float: left;
         width: 16.66%;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

/**************************************************************/
/************************Portfolio Galerie**************************************/

.bookmark {
	visibility: hidden;
}

.dropdownList {
					position: relative;
					display: inline-block;
}

.dropdownList {
					text-align: center;
					width: 100%;
}

#myBtnContainer {
						display: block;
			         z-index: 1;

}

.dropdownList:hover #myBtnContainer {
					display: block;
}
select {
			width:80%;
			font-size: 3.5vw;
			font-family: "Josefin Sans light";
			text-align: center;
			margin-left: 11%;
			padding: 1% 0% 0% 0%; 
}

option.btn {
			font-family: "Josefin Sans light";	
}

h4 {
		margin: 0% 0% 0% 0%;
		padding: 2% 0% 2% 2%;
		font-family: "Josefin Sans light";
     	color: #999999;
      font-size: 2.6vw;
      line-height: 1;

}

.content p{
				font-size: 2.3vw;
				font-style: italic;
				margin: 0%;

}

.row {
  width: 100%;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
  margin: 2% 1%;
  padding: 2% 1%%;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 47.1%;
  display: none; /* Hide columns by default */
}

/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
  font-family: "Josefin Sans light";
}

/* Content */
/*.content {
  background-color: white;
  padding: 10px;
}*/

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

.btn {
  border: none;
  outline: none;
  background-image: linear-gradient(to bottom right, #dce4ec, #99b2cc);
  cursor: pointer;
  width: 100%;
  font-size: 5vw;
  font-family: "Josefin Sans light";
  float: left;
  opacity: 0.5;
  margin: 0% 0% 0% 0%;
}

.btn:hover {
	font-family: "Josefin Sans regular";	
	opacity: 1;
}

#myBtnContainer a {
		font-family: "Josefin Sans light";
		font-size: 5vw;
		color: black;
}

#myBtnContainer a:hover {
		font-family: "Josefin Sans regular";	
		opacity: 1;
		letter-spacing: normal;
		color: black;
}
.btn a {
	color: black;

}





/*******************************************************************************/

body {
      background-color: #ffffff;
      width: 100%;
      height: 100%;
}

article {
         background-color: #ffffff;
         width: 98%;
         margin: 0% auto;
}

a {
   color: #3282db;
   font-family: "Josefin Sans light";
   text-decoration: none;
}

a:hover {
         letter-spacing: 0.1em;
}

center {
        font-family: "Josefin Sans light";
        font-size: 4.5vw;
        line-height: 1.2;
}

p {
         font-family: "Josefin Sans light";
         padding: 0% 1% 0% 1%;
         color: #999999;
         font-size: 5vw;
         line-height: 1.2;
}

figcaption {
            float:left;
            width: 98%;
            clear: both;
            background-color: #336699;
            font-family: "Josefin Sans light";
            font-size: 5vw;
            padding: 0% 1% 1% 1%;
            margin: -2% 2% 1.5% 0%;
            color: #ffffff;
}

img.counterimg{
               width: 14%;
               height: auto;
               position: absolute;
               margin: 0% 0% 0% 0%;
}

.center {
         text-align: center;
}

.left {
       text-align: left;
       padding-left: 2%;
}


.right{
       text-align: right;
       margin-top: -5%;
       width: 97%;

}

pre {
         font-family: "Josefin Slab";
         padding: 3% 1% 1% 1%;
         color: #999999;
         font-size: 1.5vw;

}

h2 {
   font-size: 8vw;
   color: #336699;
   font-family: "Josefin Slab";
   text-align: center;
   padding: 5% 0% 0% 0%;
   margin-top: 5%;

}

h3 {
   font-family: "Josefin Sans thin";
   padding: 0.6% 0% 0.2% 1%;
   color: #fafafa;
   font-size: 5vw;
   background-image: linear-gradient(to bottom right, #dce4ec, #99b2cc);
   letter-spacing: 0.01em;
}

iframe{
       margin: auto;
       width: 100%;
}

li {
    font-family: "Josefin Sans light";
    color: #999999;
    margin-top: 3%;
}

ul {
    padding: 0% 3% 0% 6%;
    font-size: 5vw;

}

#rahmen {
         margin: 4% auto;
         width: 65%;
         max-width: 100%;
         box-shadow: 0em 3.625em 1.938em 0.625em rgba(111,117,125,1);
}

#webseite {
           background-color: #ffffff;
           width: 95%;
           max-width: 100%;
          -webkit-box-shadow: 0em 0em 2.438em -0.250em rgba(0,0,0,0.75);
          -moz-box-shadow: 0em 0em 2.438em -0.250em rgba(0,0,0,0.75);
          box-shadow: 0em 0em 2.438em -0.250em rgba(0,0,0,0.75);
           margin: auto;

}


#head {
       width: 100%;
}

#head  h1 {
           font-family: "Josefin Slab thin";
           font-size: 10vw;
           margin: 0;
           padding: 1.2em 0em 0.5em 0.3em;
           color: #999999;
}

#head img {
            width: 100%;
            max-height: 100%;
            margin-bottom: 3%;
}

#navi {
       width: 98%;
       max-height: 100%;
       font-family: "Josefin Slab";
       font-size: 5vw;
       background-color: #cccccc;
       height: 17.5em;
       padding-left: 2%;
}

#navi a {
         color: #ffffff;
         text-decoration: none;
         letter-spacing: 0em;
         font-family: "Josefin Sans light";
         line-height: 1.2;
}

#navi .dropdownAktuelles a {
                           color: #336699;
                           text-decoration: none;
                           font-family: Josefin Sans light;
}

#navi .dropdownAktuelles a:hover {
                                font-family: Josefin Sans semibold;
                                font-size: 3vw;
}


#navi .Aktuelles {
                  color: #ffffff;
                  width: 98%;
                  background-color: #999999;
                  height: 20%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
                 /* background-image: url("images/hover_aktuelles.jpg");
                  background-size: cover;*/
}

#navi .Aktuelles:hover {
                        background-image: url("images/hover_aktuelles.jpg");
                        background-size: 32%;
                        background-repeat: no-repeat;
                        background-position: center;
}

#navi .aktivAktuelles {
                      color: #ffffff;
                      width: 98%;
                      background-color: #999999;
                      height: 20%;
                      border-color: #ffffff;
                      border-style: inset solid;
                      border-width: thin;
                      text-align: center;
                      background-image: url("images/hover_aktuelles.jpg");
                      background-size: 32%;
                      background-repeat: no-repeat;
                      background-position: center;
}

#navi .aktivAktuelles .aktivDropdown a  {
                      color: #336699;

}

#navi .aktivAktuelles .aktivDropdown a:hover  {
                      color: #336699;
                      font-family: Josefin Sans semibold;
                      font-size: 3vw;

}

#navi  .aktivDropdown {
                      display: block;
                      margin-bottom: 0;
                      background-color: #ffffff;
                      padding: 0.2em;
                      font-color: #336699;
                      height: 19%;
                      margin-top: 8%;
                      color: #336699;
                      font-size: 3vw;
                      text-align: center;
                      z-index: 1;
}



/*#navi .dropdownAktuelles  {
                            margin: 3% 0 0 -0.8%;
                                position: absolute;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 1vw;
                                z-index: 1;

}*/

#navi .dropdownAktuelles  {
                           display: none;

                           }


#navi .Aktuelles:hover .dropdownAktuelles {
                                display: block;
                                margin-bottom: 0;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                height: 19%;
                                margin-top: 8%;
                                font-size: 3vw;
                                text-align: center;
                                z-index: 1;
                                }

#navi .Choere {
               color: #ffffff;
               width: 98%;
               background-color: #999999;
               height: 20%;
               border-color: #ffffff;
               border-style: inset solid;
               border-width: thin;
               text-align: center;

}

#navi .Choere:hover {
                     background-image: url("images/hover_choere.jpg");
                     background-size: 32%;
                     background-repeat: no-repeat;
                     background-position: center;
}

#navi .aktivChoere {
                    color: #ffffff;
                    width: 98%;
                    background-color: #999999;
                    height: 20%;
                    border-color: #ffffff;
                    border-style: inset solid;
                    border-width: thin;
                    text-align: center;
                    background-image: url("images/hover_choere.jpg");
                    background-size: 32%;
                    background-repeat: no-repeat;
                    background-position: center;
}

#navi .dropdownChoere {
                        display:none;
}

#navi .dropdownChoere a {
                           color: #336699;
                           text-decoration: none;
                           font-family: Josefin Sans light;
}

#navi .dropdownChoere a:hover {
                                font-family: Josefin Sans semibold;
                                font-size: 3vw;
}

#navi .Choere:hover .dropdownChoere {
                                display: block;
                                margin-top: 8%;
                                height: 19%;
                                text-align: center;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 3vw;
                                z-index: 1;
                                }

/*CSS-Formatierungen wenn CHOERE aktiv*/
#navi .aktivdropdownChoere {
                                display: block;
                                margin-top: 8%;
                                height: 19%;
                                text-align: center;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 3vw;
                                z-index: 1;

}

#navi .aktivChoere .aktivdropdownChoere a  {
                      color: #336699;

}

#navi .aktivChoere .aktivdropdownChoere a:hover {
                                                   color: #336699;
                                                   font-family: Josefin Sans semibold;

}

/******CHOERE aktiv ENDE***************/

/*#navi .Gospel {
                  color: #ffffff;
                  float: left;
                  width: 20%;
                  background-color: #999999;
                  height: 98%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .Gospel:hover {
                      background-image: url("images/hover_gospel.jpg");
                      background-size: cover;
}

#navi .aktivGospel {
                    color: #ffffff;
                    float: left;
                    width: 20%;
                    background-color: #999999;
                    height: 98%;
                    border-color: #ffffff;
                    border-style: inset solid;
                    border-width: thin;
                    text-align: center;
                    background-image: url("images/hover_gospel.jpg");
                    background-size: cover;
}*/

#navi .Kontakt {
                  color: #ffffff;
                  width: 98%;
                  background-color: #999999;
                  height: 20%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .Kontakt:hover {
                       background-image: url("images/hover_kontakt.jpg");
                       background-size: 32%;
                       background-repeat: no-repeat;
                       background-position: center;

}

#navi .aktivKontakt {
                     color: #ffffff;
                     width: 98%;
                     background-color: #999999;
                     height: 20%;
                     border-color: #ffffff;
                     border-style: inset solid;
                     border-width: thin;
                     text-align: center;
                     background-image: url("images/hover_kontakt.jpg");
                     background-size: 32%;
                     background-repeat: no-repeat;
                     background-position: center;
}

#navi .dropdownKontakt {
                        display:none;
}

#navi .dropdownKontakt a {
                           color: #336699;
                           text-decoration: none;
                           font-family: Josefin Sans light;
}

#navi .dropdownKontakt a:hover {
                                font-family: Josefin Sans semibold;
                                font-size: 3vw;
}

#navi .Kontakt:hover .dropdownKontakt {
                                display: block;
                                margin-top: 8%;
                                height: 19%;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 3vw;
                                z-index: 1;
                                }

/*CSS-Formatierungen wenn KONTAKT aktiv*/
#navi .aktivdropdownKontakt {
                                display: block;
                                margin-top: 8%;
                                height: 19%;
                                background-color: #ffffff;
                                padding: 0.2em;
                                font-color: #336699;
                                color: #336699;
                                font-size: 3vw;
                                z-index: 1

}

#navi .aktivKontakt .aktivdropdownKontakt a  {
                      color: #336699;

}

#navi .aktivKontakt .aktivdropdownKontakt a:hover {
                                                   color: #336699;
                                                   font-family: Josefin Sans semibold;
                                                   font-size: 3vw;
}
/******KONTAKT aktiv ENDE***************/

#navi .Links {
                  color: #ffffff;
                  width: 98%;
                  background-color: #999999;
                  height: 20%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .Links:hover {

                     background-image: url("images/hover_links.jpg");
                     background-size: 32%;
                     background-repeat: no-repeat;
                     background-position: center;

}

#navi .aktivLinks {
                   color: #ffffff;
                   width: 98%;
                   background-color: #999999;
                   height: 20%;
                   border-color: #ffffff;
                   border-style: inset solid;
                   border-width: thin;
                   text-align: center;
                   background-image: url("images/hover_links.jpg");
                   background-size: 32%;
                   background-repeat: no-repeat;
                   background-position: center;
}

#navi .GaesteBilder {
                  color: #ffffff;
                  width: 98%;
                  background-color: #999999;
                  height: 20%;
                  border-color: #ffffff;
                  border-style: inset solid;
                  border-width: thin;
                  text-align: center;
}

#navi .GaesteBilder:hover {
                            background-image: url("images/hover_gaestebilder.jpg");
                            background-size: cover;
                            background-size: 32%;
                            background-repeat: no-repeat;
                            background-position: center;
}

#navi .aktivGaesteBilder {
                          color: #ffffff;
                          width: 98%;
                          background-color: #999999;
                          height: 20%;
                          border-color: #ffffff;
                          border-style: inset solid;
                          border-width: thin;
                          text-align: center;
                          background-image: url("images/hover_gaestebilder.jpg");
                          background-size: 32%;
                          background-repeat: no-repeat;
                          background-position: center;
}

#content {
          width: 98%;
          height: 100%;
          background-color: #336699;
          padding: 1% 1% 2% 1%;
          color: #999999;
}

#content img.headline{
                      width: 100%;
                      height: auto;
                      float: none;
                      background-color: #ccc;
                      padding-top: 7%;
}

#content figcaption.headline{
                             width: 98%;
                             padding-top: 2%;
                             text-align: center;
                             float: none;
                             background-color: #ccc;

}



#content p br{
     display: none;
}

#content p br.break{
         display: inline;
}

#content .center br{
          display: block;
}

#content .right br{
          display: block;
}

#content .left br{
          display: block;
}


#content .karte img{
                    width: 80%;
                    margin: auto;
}

#content .banner {
                  background-image: linear-gradient(to bottom right, #dce4ec, #99b2cc);
}

#content .banner .clearfix {
                            overflow: auto;
}

#content .banner article {
                          background-color: #ffffff;
                           font-family: "Josefin Sans thin";
                           margin: 10% 0% 0% 0%;
                           padding: 1% 0% 0.5% 15%;
                           font-size: 3vw;
                           border-top: thin solid black;
                           border-bottom: thin solid black;
                           width: 85%;

}

#content .banner h2 {
                     font-family: "Josefin Sans regular";
                     padding: 7% 0% 7% 15%;
                     font-size: 3vw;
                     text-align: left;
                     width: 40%;
                     float: left;

}

#content .banner .bild img {
                            max-width: 100%;
                            height: auto;
                            border-radius: 17%;
                            box-shadow: 0.875em 0.875em 1.188em 0em rgba(51,104,153,1);
                            float: right;
                            padding: 0%;
                            width: 23%;
                            margin: 3% 6% 6% 0%;

}

#content h1 {
             font-family: "Josefin Slab";
             font-size: 5vw;
             padding: 1% 0% 1% 22%;
             color: #336699;
}

#content img {
              width: 40%;
              margin-right: 2%;
              float: left;
}

#content .bild img {
                width: 100%;
                float: none;
                background-color: #336699;
                padding: 1%;

}

#content .fleyer img {
                width: 98%;
                background-color: #336699;
                padding: 1%;
                margin-bottom: 2%;

}

#content .termine {
                   font-family: "Josefin Sans light";
                   margin: 0% 1% 0% 1%;
                   color: #999999;
                   font-size: 4vw;
                   line-height: 1.2;
}

#content .termine table{
                        width: 100%;
                        text-align: center;
}

#content .termine td{
                     font-family: josefin sans light;
                     text-align: center;
}

#content .termine tr{
                     padding-bottom: 2%;
}

tr.hinterlegt {
                background-color: #e4ecf4;
}

td.right {
          width: 80%;
}


#floatRight img {
             width: 40%;
             margin-left: 2%;
             margin-right: 0%;
             float: right;
}

#footer {
         width: 96%;
         height: 15.5em;
         font-family: "Josefin Slab";
         padding: 0% 0% 0% 2%;
         font-size: 2.5vw;
         color: #336699;
}

#footer p {
         font-family: "Josefin Sans light";
         padding: 0% 2.2% 1% 1%;
         color: #999999;
         font-size: 2.95vw;
         float: left;
         height: 35%;

}

}
/*******************************************************************/