/*
.btn, .pandion-dark-link, .pandion-dark-to-white-link { text-shadow: none; color: #000; text-decoration: none; background: url(../images/arrow-right-solid-45-kl.svg) no-repeat right 10px; text-transform: none; padding-top: 10px; padding-right: 35px; padding-bottom: 3px; border-style: none; transition: all 0.2s ease; }
.pandion-light-link { color: #fff; text-decoration: none; background: url(../images/arrow-right-solid-45white-kl.svg) no-repeat right 10px; padding-top: 10px; padding-right: 35px; padding-bottom: 3px; transition: all 0.2s ease; }
.btn:hover, .pandion-dark-link:hover  { color: #a5302e; text-decoration: none; background: url(../images/arrow-right-solid-45red-kl.svg) no-repeat right 0; transition: all 0.2s ease; }
.pandion-light-link:hover  { color: #fff; text-decoration: none; background: url(../images/arrow-right-solid-45white-kl.svg) no-repeat right 0; transition: all 0.2s ease; }
.pandion-dark-to-white-link:hover  { color: #a5302e; text-decoration: none; background: url(../images/arrow-right-solid-45white-kl.svg) no-repeat right 0px; transition: all 0.2s ease; }

.zoom-image-container:hover .pandion-dark-link { color: #fff; background: url(../images/arrow-right-solid-45white-kl.svg) no-repeat right 10px;}
.zoom-image-container:hover .pandion-dark-link:hover { color: #a5302e; background: url(../images/arrow-right-solid-45red-kl.svg) no-repeat right 0px;}

.pandion-teaser-link { color: #000; text-decoration: none; background: url(../images/arrow-right-solid-45.svg) no-repeat right 10px; padding-top: 15px; padding-right: 50px; padding-bottom: 8px; transition: all 0.2s ease; }
.pandion-teaser-link:hover { color: #a5302e; text-decoration: none; background: url(../images/arrow-right-solid-45red.svg) no-repeat right 0px; transition: all 0.2s ease; }

.pandion-klein-link { text-shadow: none; color: #000; text-decoration: none; background: url(../images/arrow-right-solid-45grey-xkl.svg) no-repeat right 10px; text-transform: none; padding-top: 5px; padding-right: 25px; padding-bottom: 0px; border-style: none; transition: all 0.2s ease; }
.pandion-klein-link:hover  { color: #a5302e; text-decoration: none; background: url(../images/arrow-right-solid-45red-xkl.svg) no-repeat right 5px; transition: all 0.2s ease; }

.pandion-teaser-link-20 { color: #000; text-decoration: none; background: url(../images/arrow-right-solid-45.svg) no-repeat right 25px; padding-top: 15px; padding-right: 50px; padding-bottom: 3px; transition: all 0.2s ease; }
.pandion-teaser-link-20:hover { color: #a5302e; text-decoration: none; background: url(../images/arrow-right-solid-45red.svg) no-repeat right 15px; transition: all 0.2s ease; }
*/

.local-scroll-cont {
  width: 50px;
  height: 50px;
  position:absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -25px;
  text-align: center;
  z-index: 20;
  
  -webkit-animation: scroll-down-anim ease-in-out 1s infinite;
  -moz-animation: scroll-down-anim ease-in-out 1s infinite;
  -o-animation: scroll-down-anim ease-in-out 1s infinite;
  animation: scroll-down-anim ease-in-out 1s infinite; 
}

@-webkit-keyframes scroll-down-anim {
    0%{ -webkit-transform: translateY(-8px); transform: translateY(-8px); }
    50%{ -webkit-transform: translateY(0px); transform: translateY(0px); }
    100%{ -webkit-transform: translateY(-8px); transform: translateY(-8px); }
}
@-moz-keyframes scroll-down-anim {
    0%{ -moz-transform: translateY(-8px); transform: translateY(-8px); }
    50%{ -moz-transform: translateY(0px); transform: translateY(0px); }
    100%{ -moz-transform: translateY(-8px); transform: translateY(-8px); }
}
@-o-keyframes scroll-down-anim {
    0%{ -o-transform: translateY(-8px); transform: translateY(-8px); }
    50%{ -o-transform: translateY(0px); transform: translateY(0px); }
    100%{ -o-transform: translateY(-8px); transform: translateY(-8px); }
}
@keyframes scroll-down-anim {
    0%{ transform: translateY(-8px); }
    50%{ transform: translateY(0px); }
    100%{ transform: translateY(-8px); }
}

/* image ist eine Bilddarstellung ohne Zoom oder Einblender, einfach nur Bild mit Unterschrift */

.image-container { position: relative; width: 100%; overflow:hidden; cursor: default; }
.image-container .head-5:after { background-color: #000; }
.image { display: block; width: 100%; height: auto; }
.image-text { padding:15px   }
.image-text h2 { font-weight: normal; margin:0 0 5px; padding:0; }
.image-text h3 { margin:0; padding:15px 0 0; font-weight: normal; }

.zoom-image-container { position: relative; width: 100%; overflow:hidden; cursor: pointer; }
.zoom-image-container img { transition: 0s ease; }
.zoom-image-container:hover img { -webkit-filter: blur(0.5px); filter: blur(0.5px); transition: 0s ease; }

.zoom-image-text { padding:0 15px 15px   }
.zoom-image-text h2 { font-weight: normal; line-height: 1.1em; margin:0 0 5px; padding:0; }
.zoom-image-text h3, .image-text h3, .zoom-image-text p { margin:0; padding:15px 0 0; font-weight: normal; }
.zoom-image-container h2, .zoom-image-container h3, .zoom-image-container .dark-color { transition: 0.3s ease; }
.zoom-image-container:hover .zitate, .zoom-image-container:hover .icon-box-small, .zoom-image-container:hover h2, .zoom-image-container:hover h3, .zoom-image-container:hover p, .zoom-image-container:hover .dark-color { color: #fff; transition: 0.3s ease; }

.zoom-image-container:hover .pandion-light-link { color: #fff; text-decoration: none; background: url(../images/arrow-right-solid-45white-kl.svg) no-repeat right 10px; padding-top: 10px; padding-right: 35px; padding-bottom: 3px; transition: all 0.2s ease; }
.zoom-image-container .pandion-light-link { text-shadow: none; color: #000; text-decoration: none; background: url(../images/arrow-right-solid-45-kl.svg) no-repeat right 10px; text-transform: none; padding-top: 10px; padding-right: 35px; padding-bottom: 3px; border-style: none; transition: all 0.2s ease; }
.zoom-image-container .pandion-light-link:hover  { color: #fff; text-decoration: none; background: url(../images/arrow-right-solid-45white-kl.svg) no-repeat right 0; transition: all 0.2s ease; }

.zoom-image-container .head-5:after { background-color: #000; transition: 0.3s ease; }
.zoom-image-container:hover .head-5:after { background-color: #fff; transition: 0.3s ease; }

/* zoom-image ist eine Bilddarstellung mit Bild mit Unterschrift, darf nicht mit rollover bei Blog verwendet werden, wohl aber bei Zoom */
/* blog-image kann als Backgroundbild genutzt werden, damit sind die Bilder flächenfüllend und brauchen nicht auf Format geschnitten werden */
.zoom-image { display: block; width: 100%; height: auto; }
.zoom-image-boxen:hover .blog-image { transform: scale(1.1); }
.blog-image { transition: transform .2s; background-repeat: no-repeat; background-position: center center; background-size: 100%; background-size: cover;}
.zoom-image-container:hover .blog-image  { -webkit-filter: blur(0.5px); filter: blur(0.5px); transition: 0s ease; }
.zoom-image-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: 1s ease; background-color:rgba(0,0,0,0.4) }
.zoom-image-container:hover .zoom-image-overlay { opacity: 1; }

.zoom-image-icon { color: white; font-size: 75px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; }
.zoom-blog-icon { font-size: 50px; position: absolute; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; right: 40px; width: 40px; height: 0px; padding-top: 35px; }
.zoom-blog-icon-info { position: absolute; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }
.zoom-blog-icon-info h3 { color: #fff !important; font-weight: normal;}

.zoom-partner-icon { font-size: 50px; position: absolute; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; right: 30px; width: 40px; height: 40px; padding-top: 20px; }

.post-meta li { float: left; font-size: 14px; padding-right: 5px; padding-bottom: 20px; padding-top: 20px; }
.zoom-image-container:hover .post-meta li { color: #fff !important; transition: 0.3s ease; }

.zoom-image-container .zoom-blog-icon, .zoom-image-container .zoom-partner-icon {
  -webkit-transform: translateY(0px) rotate(315deg);
  -moz-transform: translateY(0px) rotate(315deg);
  -ms-transform: translateY(0px) rotate(315deg);
  -o-transform: translateY(0px) rotate(315deg);
  transform: translateY(0px) rotate(315deg);
  transition: 0.3s ease;
}
.zoom-image-container:hover .zoom-partner-icon {
  -webkit-transform: translateY(-180%) rotate(315deg);
  -moz-transform: translateY(-180%) rotate(315deg);
  -ms-transform: translateY(-180%) rotate(315deg);
  -o-transform: translateY(-180%) rotate(315deg);
  transform: translateY(-180%) rotate(315deg);
  transition: 1s ease;
  opacity: 0; 
}
.zoom-image-container:hover .zoom-blog-icon, .zoom-image-container:hover .zoom-partner-icon {
  -webkit-transform: translateY(-180%) rotate(315deg);
  -moz-transform: translateY(-180%) rotate(315deg);
  -ms-transform: translateY(-180%) rotate(315deg);
  -o-transform: translateY(-180%) rotate(315deg);
  transform: translateY(-180%) rotate(315deg);
  transition: 0.3s ease;
}
.zoom-image-container .zoom-blog-icon-info {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  transition: 0.3s ease;
}
.zoom-image-container:hover .zoom-blog-icon-info {
  -webkit-transform: translateY(-150%);
  -moz-transform: translateY(-150%);
  -ms-transform: translateY(-150%);
  -o-transform: translateY(-150%);
  transform: translateY(-150%);
  transition: 0.3s ease;
}

/* Spaltendarstellung für Bilderübersicht */

/* .p-container { padding-top: 1%; padding-right: 0.5%; padding-left: 0.5%; }
.p-1-cols .zoom-image-boxen { width:100%; margin: 0 0.5% 1% !important; }
.p-2-cols .zoom-image-boxen { width:49%; margin: 0 0.5% 1% !important; }
.p-3-cols .zoom-image-boxen { width:32.33%; margin: 0 0.5% 1% !important; } 
.p-4-cols .zoom-image-boxen { width:24%; margin: 0 0.5% 1% !important; } */

.p-3-cols .breite1 { width:32.33%; margin: 0 0.5% 10px !important; } 
.p-3-cols .breite2 { width:65.66%; margin: 0 0.5% 10px !important; } 


@media (min-width: 1200px) {
/* .blog-image { height: 375px; } */
.p-3-cols .hoehe1 { height: 300px; }
.p-3-cols .hoehe2 { height: 610px; }
.zoom-blog-icon-info { top: 400px; }
.zoom-blog-icon { top: 360px; }
}
@media (max-width: 1200px) {
/* .blog-image { height: 250px; } */
.p-3-cols .hoehe1 { height: 250px; }
.p-3-cols .hoehe2 { height: 510px; }
.zoom-blog-icon-info { top: 265px; }
.zoom-blog-icon { top: 235px; }
}
@media (max-width: 992px) {
/* .p-3-cols .zoom-image-boxen { width:48.5%; margin: 0 0.75% 1.5% !important; } */
.p-3-cols .breite1, .p-3-cols .breite2 { width:48.5%; margin: 0 0.75% 1.5% !important; }
/*.blog-image { height: 300px; }*/
.p-3-cols .hoehe1 { height: 250px; }
.p-3-cols .hoehe2 { height: 250px; }
.zoom-blog-icon-info { top: 315px; }
.zoom-blog-icon { top: 285px; }
}
@media (max-width: 992px) and (min-width: 600px) {
/* .col-md-4 .blog-image { height: 450px; } */

}
@media (max-width: 600px) {
.p-container { padding-top: 4%; }
/*.p-3-cols .zoom-image-boxen { width:96%; margin: 0 2% 4% !important; } */
.p-3-cols .b1, .p-3-cols .b2 { width:96%; margin: 0 2% 4% !important; }
.blog-image { height: 300px; }
.zoom-blog-icon-info { top: 315px; }
.zoom-blog-icon { top: 285px; }
}

------------- Parallax --------------- */
.parallax { position:relative; background-attachment: fixed !important; background-position: 0 0; background-repeat: no-repeat; overflow: hidden; background-size: cover !important;
  /* transform: translate(0,0); */
}
.parallax-overlay{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:1;
}
.page-title h1, .page-title h3 { padding-left: 10px; }
.page-title h1 {
  margin: 50px 0 5px;
  font-size: 40px;
  line-height: 1;
}
.page-title h3 {
  font-size: 20px;
  font-weight: 400;
}
@media (max-width: 992px) {
  .parallax{ padding: 0 0; background-position:center !important; background-attachment:scroll !important; background-size: cover !important;}
  .viewport-fader { width: 100%; min-height: 50vh !important; }
  .page-title.parallax { padding: 150px 0; }
}
@media (min-width: 992px){
  .parallax { min-height: 60vh; padding: 0; background-size: cover !important; }
  .viewport-fader { width: 35%; min-height: 75vh !important; }
  .page-title.parallax { padding: 300px 0; }
}


/* Zeilen unterschiedlich einfärben, z.B. für Projekte 
p:nth-child(even)
p:nth-of-type(even) 
p:nth-last-of-type(even) */

.auflistung p:nth-last-of-type(odd) { background-color: #f5f5f5; margin-bottom: 5px; padding: 20px 25px; }
.auflistung p:nth-last-of-type(even) { background-color: #fff; margin-bottom: 5px; padding: 20px 25px; }
.auflistung p:nth-last-of-type(odd):hover, .auflistung p:nth-last-of-type(even):hover { background-color: #eceff0; transition: 0.3s ease-in-out; }

.auflistung2 p:nth-last-of-type(odd) { background-color: #F6F8F9; margin-bottom: 0px; padding: 20px 25px; }
.auflistung2 p:nth-last-of-type(even) { background-color: #eceff0; margin-bottom: 0px; padding: 20px 25px; }
.auflistung2 p:nth-last-of-type(odd):hover, .auflistung2 p:nth-last-of-type(even):hover { transition: 0.3s ease-in-out; }
.auflistung2 p:nth-last-of-type(odd):hover a, .auflistung2 p:nth-last-of-type(even):hover a { }

.viewport-fader { display: table; background: #4e565a; float:right; height: 100%; margin:0 auto; opacity: 0; transition: opacity 0.7s ease-in-out; }
.viewport-fader-visible { background: #4e565a; opacity: 0.95; }

/* Filter für Isotop Modul und Pagination */

.button, .button-clear { border-color: #4E565A; color: #FFF; background-color: #4E565A; border: 1px solid; }
.button:hover, .button-clear:hover, .button.light:hover { border-color: #4E565A; color: #FFF; background-color: #393F42; }
.button.is-checked, .button.light.is-checked { color: #4E565A; background-color: #fff; border-color: #4E565A; }    
.button.light {background-color: #69767D}

/*
@media (max-width: 680px) {
.button { padding: 0 15x 0; margin-bottom: 5px; margin-right: 5px }
}
@media (min-width: 680px) {
.button { min-width: 130px; padding: 0 30px 0; margin-bottom: 10px; margin-right: 10px }
}

.button { clear:right; display:table; position:relative; float:left; background-color: #4E565A; border: solid 1px #4E565A; transition: 0.3s ease }
.button:hover { color: #4E565A !important; background-color: #fff; transition: 0.5s ease }
.button:hover p { color: #4E565A !important; transition: 0.5s ease }
.button a { display:block; text-align:center}
.button:active, .button.is-checked   { background-color: #fff; color: #4E565A !important; text-shadow: 0 -1px hsla(0, 0%, 0%, 0) }
.button:active p, .button.is-checked p  { color: #4E565A !important }
.button:active { box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0) } 
.button p {color: #fff; margin: 0 }
*/

.isotope:after { content: ''; display: block; clear: both }
.element-item  { position: relative; float: left }
.element-item > * { margin: 0; padding: 0 }

.pagination, .filter-by {
  clear:both;
  padding-top:15px;
  padding-bottom:25px;
  display:table;
  /* margin:auto; */
  position:relative; 
}
.pagination ul li, .filter-by ul li {
  float:left;
  margin:0 0 0 3px;
  /*background-color: #4E565A; */
  background-color: #fff;
  border: 1px #fff solid;
  transition: 0.3s ease;
}
.pagination ul li:hover, .filter-by ul li:hover { background-color: #4E565A; transition: 0.5s ease;}
.pagination ul li:first-child{ margin-left: 2px }
.pagination ul li a, .filter-by ul li a { color: #000; display:block; text-align:center; height:40px; line-height:40px; min-width: 80px; padding-right: 15px; padding-left: 15px; }
.filter-by ul li a:hover,.filter-by:not(.style-2):not(.style-3) ul li.active a { color:#fff }


/*the container must be positioned relative:*/
.custom-select { position: relative; width: 30%; float: left; clear: right; margin-right: 3%; }
.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  /* background-color: #4E565A; */
 /*  background-color: #B6BEC2; */
   background-color: #fff;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  top: 15px;
  right: 10px;
  width: 0;
  height: 0;
  /* border: 6px solid transparent; */
  /* border-color: #fff transparent transparent transparent; */
  content: "\f053";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
    -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  /* border-color: transparent transparent #fff transparent; */
  position: absolute;
  top: 30px;
  right: 40px;
  width: 0;
  height: 0;
  content: "\f053";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
    -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  /* color: #ffffff; */
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #fff;
  opacity: 1;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  color: #fff; background-color: rgba(78, 86, 90, 1);
  /* background-color: #A5302E; */
}

/* Teaser Boxen, siehe auch https://codepen.io/landb/pen/grBJNQ */

.teaser-content p { padding-top: 7px; }

@media (max-width: 992px) { 
  .teaser-image { background-size: 100% auto; background-repeat: no-repeat; background-position: center top; }  
  .teaser-content { padding: 15px; background: #ECEFF0; margin-bottom: 15px; }  
  .teaser-post { opacity: 1; background: #fff; transition: all 800ms cubic-bezier(0.42, 0, 0.07, 0.94); }
  .teaser-post [class*='col-md-']::after { height: 0px; }
  .teaser-post.hidden-up { opacity: 1; }
  .teaser-post.hidden-down { opacity: 0.1; }
}
@media (min-width: 992px) { 
  .teaser-image { min-height: 60vh; background-size: auto 100%; background-repeat: no-repeat; background-position: left top; }    
  .teaser-content { padding-top: 25px; padding-left: 20px; }
  .teaser-post { opacity: 1; background: #ECEFF0; transition: all 800ms cubic-bezier(0.42, 0, 0.07, 0.94); }
  .teaser-post.hidden-up, .teaser-post.hidden-down { opacity: 0.1; }
}  

/* Accordion */
  
.accordion { margin: 0 auto; border-radius: 0px; width: 100%; }
.accordion-header, .accordion-body { background: #fff; }
.accordion-header { padding: 1.5em 1.5em 1.0em; background: #fff; color: #000; cursor: pointer; transition: all .3s; }
.accordion-header:hover { background: #dde2e3; position: relative; z-index: 5; }
.accordion-body { background: #fff; color: #000; display: none;}
.accordion-body__contents { padding: 1.5em 1.5em; }
.accordion-body__contents li { line-height: 2em; margin-left: 2em; padding-left: 0.5em; list-style-type: square; }
.accordion__item.active:last-child .accordion-header { border-radius: none; }
.accordion:first-child > .accordion__item > .accordion-header { border-bottom: 1px solid transparent; }
.accordion__item > .accordion-header:after {
  content: "\f107";
  font-family: FontAwesome;
  font-size: 1.2em;
  float: right;
  position: relative;
  top: -2px;
  transition: .3s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header:after { transform: rotate(-180deg); }
.accordion__item.active .accordion-header { background: #fff; }
.accordion__item .accordion__item .accordion-header { background: #dde2e3; color: black; }
  
.accordion input[type="radio"] { display:none; }
.accordion label { color: #000; display:block; text-align:center; min-width: 80px; margin-right: 4px; padding: 8px 10px 0px; background:#fff; cursor:pointer; transition: all .3s; float:left;}
.accordion label:hover { background:#4E565A; color: #fff; transition: all .3s; }
.accordion input[type="radio"]:checked + label  { background:#A5302E; color: #fff; }    /* Wenn nach ID unterschieden werden soll input[type="radio"][id="NAME"]:checked + label  { ... }*/
.accordion .element { width:100%; float:left; transition:all .6s; margin-bottom: 10px;}
  
.accordion input[type="radio"][id="nr1"]:checked ~ .nr2, input[type="radio"][id="nr1"]:checked ~ .nr3, input[type="radio"][id="nr1"]:checked ~ .nr4, input[type="radio"][id="nr1"]:checked ~ .nr5, input[type="radio"][id="nr1"]:checked ~ .nr6, input[type="radio"][id="nr1"]:checked ~ .nr7 { width:0; height:0; padding:0; margin:0; opacity:0; }  
.accordion input[type="radio"][id="nr2"]:checked ~ .nr1, input[type="radio"][id="nr2"]:checked ~ .nr3, input[type="radio"][id="nr2"]:checked ~ .nr4, input[type="radio"][id="nr2"]:checked ~ .nr5, input[type="radio"][id="nr2"]:checked ~ .nr6, input[type="radio"][id="nr2"]:checked ~ .nr7 { width:0; height:0; padding:0; margin:0; opacity:0; }  
.accordion input[type="radio"][id="nr3"]:checked ~ .nr2, input[type="radio"][id="nr3"]:checked ~ .nr1, input[type="radio"][id="nr3"]:checked ~ .nr4, input[type="radio"][id="nr3"]:checked ~ .nr5, input[type="radio"][id="nr3"]:checked ~ .nr6, input[type="radio"][id="nr3"]:checked ~ .nr7 { width:0; height:0; padding:0; margin:0; opacity:0; }  
.accordion input[type="radio"][id="nr4"]:checked ~ .nr2, input[type="radio"][id="nr4"]:checked ~ .nr3, input[type="radio"][id="nr4"]:checked ~ .nr1, input[type="radio"][id="nr4"]:checked ~ .nr5, input[type="radio"][id="nr4"]:checked ~ .nr6, input[type="radio"][id="nr4"]:checked ~ .nr7 { width:0; height:0; padding:0; margin:0; opacity:0; }  
.accordion input[type="radio"][id="nr5"]:checked ~ .nr2, input[type="radio"][id="nr5"]:checked ~ .nr3, input[type="radio"][id="nr5"]:checked ~ .nr4, input[type="radio"][id="nr5"]:checked ~ .nr1, input[type="radio"][id="nr5"]:checked ~ .nr6, input[type="radio"][id="nr5"]:checked ~ .nr7 { width:0; height:0; padding:0; margin:0; opacity:0; }  
.accordion input[type="radio"][id="nr6"]:checked ~ .nr2, input[type="radio"][id="nr6"]:checked ~ .nr3, input[type="radio"][id="nr6"]:checked ~ .nr4, input[type="radio"][id="nr6"]:checked ~ .nr5, input[type="radio"][id="nr6"]:checked ~ .nr1, input[type="radio"][id="nr6"]:checked ~ .nr7 { width:0; height:0; padding:0; margin:0; opacity:0; }  
.accordion input[type="radio"][id="nr7"]:checked ~ .nr2, input[type="radio"][id="nr7"]:checked ~ .nr3, input[type="radio"][id="nr7"]:checked ~ .nr4, input[type="radio"][id="nr7"]:checked ~ .nr5, input[type="radio"][id="nr7"]:checked ~ .nr6, input[type="radio"][id="nr7"]:checked ~ .nr1 { width:0; height:0; padding:0; margin:0; opacity:0; }
  
/* Top Navigation für die Filter im Portfolio */

@media (min-width: 1200px) {
.portfolio_button_container { padding-top: 15px; padding-bottom: 30px; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; width: 60%; }
}
@media (max-width: 1200px) {
.portfolio_button_container { padding-top: 15px; padding-bottom: 30px; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; width: 80%; }
}
@media (max-width: 992px) {
.portfolio_button_container { padding-top: 15px; padding-bottom: 30px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; width: 100%; }
}
@media (max-width: 680px) {
.dropdown_portfolio { width: 31%; margin-right: 3px;}
.dropdown-content_portfolio { width: 99%; }
}
@media (min-width: 680px) {
.dropdown_portfolio { width: 30%; margin-right: 3%;}
.dropdown-content_portfolio { width: 99%; }
}

.portfolio { width: 100% !important; margin:0 0 0 0; text-align: left !important; border-top: 1px solid #ECEFF0;}
   
.dropbtn_portfolio {
  background-color: #fff;
  color: #000;
  border: none;
  cursor: pointer;
  width: 99% !important;
}
    
.dropdown_portfolio { position: relative; display: inline-block; }

.dropdown-content_portfolio {
  display: none;
  position: absolute;
  background-color: #fff;
  z-index: 999;
  margin-left: 0px;
}

.dropdown-content_portfolio a {
  color: black;
  text-decoration: none;
  display: block;
}

.dropdown-content_portfolio a:hover {background-color: #fff}
.dropdown_portfolio:hover .dropdown-content_portfolio {display: block;}
.dropdown:hover_portfolio .dropbtn_portfolio {background-color: #3e8e41;}

/* Socialmedia Icons für die Startseite */

  .fl-fl {
    background: #41474A;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0px;
    width: 150px;
    position: fixed;
    right: -120px;
    z-index: 1000;
    font-size: 14px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    box-shadow: 4px 4px 2px -2px rgba(.25, .25, .25, .25);
    opacity: 1;
  }
  .fl-fl .fa {font-size: 20px; color: #fff; padding: 10px 0; width: 40px; margin-left: 8px;}
  .fl-fl a { color: #fff !important; text-decoration: none; text-align: center; line-height: 40px!important; vertical-align: top!important; }
  .fl-fl:hover { right: 0; }