/* --- TEAM --- */
#resp-grid {display: flex; flex-wrap: wrap; font-size: 14px; margin: 25px 0;}
#resp-grid .team-member {display: inline-block; margin-bottom: 8px; width: calc(20% - 6px); min-height: 180px; margin-right: 5px; text-decoration: none; padding: 8px; -webkit-transition: background-color 0.25s ease-out; -moz-transition: background-color 0.25s ease-out; -o-transition: background-color 0.25s ease-out; transition: background-color 0.25s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
#resp-grid .team-member span {display: block; margin-top: 10px;}
#resp-grid a:nth-of-type(2n) {margin-right: 8px;}
#resp-grid a:nth-of-type(2n) {margin-right: 8px;}
#resp-grid a:nth-of-type(4n) {margin-right: 0;}
#resp-grid .team-member:hover img {-webkit-filter: grayscale(0%); filter: grayscale(0%);}
.figure {margin: 0; overflow: hidden; text-align: center; padding-top: 10px; position: relative;}
.figcaption {margin-top: 15px;}
#resp-grid img {margin: 0 auto; border: none; width: 220px; height: auto; display: block; -webkit-filter: grayscale(100%); filter: grayscale(100%);}


/*#resp-grid span {font-family: 'Raleway', 'Verdana', sans-serif; font-size: 16px;}*/
#resp-grid h5 span {font-family: 'Verdana', sans-serif; font-size: 13px; color: #a7a7a7; display: none;}

.person {position: relative; overflow: hidden; margin-bottom: 10px;}
.person img {width: 100%;}

.mfp-content h3 {font-size: 24px !important;}
.mfp-content table td {width: 50%; padding: 10px 20px; vertical-align: top;}
.mfp-content table td:first-child {border-right: 1px solid #eee;}
.mfp-content h4 {font-family: 'Raleway', 'Verdana', sans-serif; font-size: 20px;}


a.icon {display: inline-block; width: 30px; height: 30px; border-radius: 50%; background-color: #888888; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; cursor: pointer;}
a.icon:hover {background-color: #df252b;}
a.icon img {width: 100%; padding: 0;}

.social-video {display: none; width: 100%; height: auto; min-height: 320px;}
.social-video.videolink {width: 320px; height: auto; margin-right: 30px;}
.social-video.videolink p {margin-top: 20px; font-size: 13px;}
.social-video.videolink .buttons-ext a {float: none; display: block; margin-top: 10px; margin-right: 0px;}
.social-video.videolink img {width: 100%; height: auto; padding-right: 0px;}
.social-video-container {width: 320px; height: 435px; display: inline-block; margin-right: 30px;}


/* --- Produkte > Marken/Fabrikate und Schnittstellen --- */
.fab-layout {margin-bottom: 60px;}
.fab-layout h1, .fab-layout h2, .fab-layout h3 {text-align: center;}
.fab-layout p {text-align: justify; text-align-last: center;}
#resp-grid.marken .team-member:hover {background-color: #ededed;}
#resp-grid.marken img {border: none; max-width: 100%; width: 260px; height: auto; display: block; margin: 0 auto; transition: transform .2s ease-in-out; -webkit-filter: grayscale(0%); filter: grayscale(0%); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}


#resp-grid span.ctext {margin: 0 auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: 'Raleway', 'Verdana', sans-serif; font-size: 24px;}
#resp-grid span.ctext.smaller {font-size: 22px;}


#resp-grid.marken a.open-popup-link {position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;}
#resp-grid.marken .team-member {width: calc(25% - 6px);}
.mfp-container .content-w {max-width: 470px; vertical-align: top; display: inline-block;}


/* locommunity */
#locommunity p {line-height: 1.7;}
#lococommunity-form .checkbox_container legend {padding: 10px 5px 0px 5px;}
p.intro {font-size: 20px; font-family: 'Raleway', sans-serif !important; font-weight: 400; text-align: left;}
.mw-880 {max-width: 880px; margin: 0 auto;}

#resp-grid img.no-filter {-webkit-filter: none; filter: none;}
#resp-grid .team-member.ansprechpartner, #resp-grid .team-member.w40 {width: calc(40% - 6px); text-align: left; padding-right: 20px;}
#resp-grid .team-member.w60 {width: calc(60% - 6px); text-align: left; padding-right: 20px; padding-left: 90px;}
#resp-grid .team-member.w50 {width: calc(50% - 6px); text-align: left;}
#resp-grid .team-member.w33 {width: calc(33% - 6px); text-align: left; padding-right: 20px;}

.motto {width: 100%; background-color: #f8f8f8; padding: 35px 0 45px 0; margin: 45px 0 35px 0;}
.motto h3 {font-size: 28px !important;}
.motto p {font-size: 20px; font-family: 'Raleway', sans-serif !important; font-weight: 400; margin-bottom: 10px;}
.motto span.name {color: #b2b2b2;}

ul.next-event li {font-family: 'Raleway', sans-serif !important; font-size: 20px;}
ul.next-event li:before {font-family: "icons"; text-indent: 0; display: inline-block; position: relative; top: -1px;	left: 0;}
ul.next-event li.calendar:before {content: "\1f4c5"; margin-right: 10px;}
ul.next-event li.location:before {content: '\e93d'; left: 3px; margin-right: 15px;}





/* --- ZENTRALE - SVG-Raumplan --- */
path {fill: #ffffff;}

.hinweis {fill: #df252b;}

a path {fill: #ededed; stroke: none; stroke-width: 0; stroke-miterlimit: 10; transition: all 0.3s;}

a, a:hover, a:focus {text-decoration: none; outline: none;}

a:hover path, polyline:hover, a:hover polyline {fill: #df252b;}
.kontur {fill: #888888;}
.buero-1 {fill: #ededed;}
.title {font-family: 'Raleway', 'Verdana', sans-serif; font-size: 6px; fill: #ededed; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}



#mySVG {width: 100%; height: 620px;}



@media only screen and (max-width: 1280px) {
#resp-grid.marken .team-member {width: calc(33% - 6px);}
}

@media only screen and (max-width: 989px) {
#resp-grid .team-member {width: calc(25% - 6px);}
#resp-grid.marken .team-member {width: calc(50% - 6px);}
}

@media only screen and (max-width: 880px) {
#resp-grid .team-member {width: calc(50% - 6px);}
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {width: 90%; text-align: center;}
.mfp-content .fullwidth {padding: 0%;}
.mfp-container, .mfp-content .content, {width: 100%; text-align: center;}
.social-video.videolink {width: 100%; margin-right: 0px;}
.social-video-container, .mfp-container .content {width: 100%; height: auto;}
.mfp-content table td {width: 100%; text-align: center; display: block;}
a.mail-icon {margin: 0 auto;}
#locommunity p, #locommunity ul {text-align: center !important;}
#resp-grid .team-member.ansprechpartner, #resp-grid .team-member.w40, #resp-grid .team-member.w60, #resp-grid .team-member.w50, #resp-grid .team-member.w33 {width:100%; text-align: left; padding-right: 0px; padding-left: 0px;}
#mySVG {width: 100%; height: 440px;}
}

@media screen and (max-width: 640px) {
#resp-grid .team-member {width: calc(100% - 6px);}
#resp-grid.marken .team-member {width: calc(100% - 6px);}
.mfp-container .content, .mfp-content img {width: 100%; padding-right: 0px;}
.mfp-content h3, .mfp-content h4 {text-align: left;}
#resp-grid img {width: 320px;}
.mfp-content img.marken {width: auto;}
#mySVG {width: 100%; height: 300px;}
}