/*

	pixelwg
	rot : #e62e2e

GRAU hell
________________________________________________
#efefef

Border -Accordion-Buttons-aktiv,
weisse Schrift,


GRAU mittel
-----------------------------
#999794

smalltags


Grau  dunkel
-----------------------------
#5c5855

a in smalltags

*/

body , html {
	min-height:100%;
	height:100%;
	width: 100%;
	margin:0px;
	padding:0px;
	background-color: #ebeaeb;
	font-family: 'Barlow 300', sans-serif;
	font-weight: 300;
	line-height: 1.4;
	color: #332F2A;        /* /////////////////////////////////// FONT COLOR brown ///////////////////////// */
	-webkit-text-size-adjust: 100%;
	/*
	-webkit-text-size-adjust: none;
	*/
	-ms-text-size-adjust: none;
}

html {
	font-size:112%;                                 /* Schriftgröße Fontsize */
}

.preloads {
  position:absolute;
  top:-1px;
  left:0px;
  width:1px;
  height:1px;
  overflow:hidden;
}

#console , #console2 {
  position:fixed;
  left:80px;
  top:120px;
  color:red;
  z-index: 2040;
  font-size:0.86rem;
  background-color:#FFFFFF;
}
#console2 {
  color: white;
  padding:0.6rem;
  background-color:black;
  left:280px;
  display:none;
}
#console2:after {
    content:'desktop';
}
.debug #console2 {
  display:block;
}

#page {
    position: relative;
    width: 100%;
    max-width:1600px;                            /* MAX WIDTH */
    margin: 0px;
    margin: 0 auto;
    overflow:hidden;
    border-left:0px dotted black;
    border-right:0px dotted black;
    background-color:#ebeaeb;
}


.bg-grey-light {
    background-color: #ebeaeb;
}
.bg-grey {
    background-color: #5c5955;
}
.bg-brown {
    background-color: #332f2a;
}
.font-white {
    /* color: #efefef; */
    color: rgba(239,239,239,0.92);
}
.font-grey {
    color: rgba(51,47,42,0.8);
}
.font-brown {
    color: #332f2a;
}
.font-black {
    color: #000000;
}

.downward-left-grey {
    border-color: transparent #ebeaeb #ebeaeb transparent;
}
.downward-right-grey {
    border-color: #ebeaeb #ebeaeb transparent transparent;
}
.downward-right-brown {
    border-color: #332f2a #332f2a transparent transparent;
}
.downward-left-brown {
    border-color: transparent #332f2a #332f2a transparent;      /*  --->  .filler-vertical-brown */
}


/*
.downward-left-grey {
    border-color: yellow green red blue;
}
.downward-right-grey {
    border-color: tomato lime blue grey;
}
.downward-left-brown {
    border-color: transparent #332f2a #332f2a transparent;
}
*/

/* top area permanent */

#top_area {
	display:block;
	position:absolute;
	top:-1px;
	left:0px;
	z-index:888;
	width: 100% !important;
	width: 100%;
	border-top:1px solid transparent;
	border-bottom:1px solid transparent;
}
#topnavi_area {                               /* upper centered */
	display:block;
	position:relative;
	width: calc(100% - 64px);
	margin: 21px 32px 18px 32px;
	padding: 0px;
	border-top:1px solid transparent;
	border-bottom:1px solid transparent;
}

#topnavi {                                    /* L */
  display:block;
  float:left;
}

#dynamic_vspacer_source {
  width:1px;
  height:2.6rem;
  float:left;
}
#dynamic_vspacer {
  height:3.8rem;
}

/* //////////////////////// AUSRICHTUNG, SPACER, CLEAR //////////////////////////////////////////////// */
.clear {
  clear:both;
}
.spacer-v-1,
.spacer-v-1_0 {
  width:100%;
  clear:both;
  font-size:1px;
  color:transparent;
  height:1.0rem;
}
.spacer-v-1_5 {
  width:100%;
  clear:both;
  font-size:1px;
  color:transparent;
  height:1.5rem;
}
.spacer-v-2_0 {
  width:100%;
  clear:both;
  font-size:1px;
  color:transparent;
  height:2.0rem;
}
.spacer-v-2_5 {
  width:100%;
  clear:both;
  font-size:1px;
  color:transparent;
  height:2.5rem;
}
.spacer-v-0_5 {
  width:100%;
  clear:both;
  font-size:1px;
  color:transparent;
  height:0.48rem;
}
.centered {
  margin: 0 auto;
}

.hidden,
.invisible {
  display:none !important;
  display:none;
}

.mobile-only {
  display:none;
}

#outer_contact {                            /* R */
  display:flex;
  justify-content: flex-end;
  float:right;
}

#logo_top {
  display:block;
  float:right;
  width:139px;
  height:47px;
  margin-right:14px;
  margin-top:0px;
  background-image: url(../images/logo-pxelwg.svg);
  background-size: cover;
}

#outer_navitoggle {                          /* hamburger menü --- x */
  display:none;
}

#top_navi_mobile {
	display:none;
	position:relative;
	border-top:2px solid transparent;
}


/*  ////////////////////////////////////////////////////////////////////////  oberer Bereich schräg m. Inhalt  */


.wrapper-layout-area {
    padding: 0px 0px 0px 0px;
    position:relative;
    overflow:visible;
}

.Einrueckung-L-R {
  width: calc(100% - 44px);
  margin-left:22px;
}

.downward-right {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 102px 1600px;     /* 102 */
}
.downward-left {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 145px 1600px;     /* 145 */
    margin-top:-290px;
}
.downward-left-footer {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 80px 1000px;     /* 145 */
    z-index:44;                   /*  footer-navi = 45  */
}
.downward-position-204 {
    position: absolute;
    bottom:-204px;
}
.downward-position-102 {
    position: absolute;
    bottom:-102px;
}
.downward-margin-top-145 {
    margin-top:-145px;
}
.downward-position {
    position: absolute;
    right:0px;
    top:0.6rem;
}

.wrapper-padding-downward {     /* accordion */
    padding-bottom:160px;
}

.vspacer-calc-minus {
  /*
  background-color:yellow;
  */
  width:100%;
  height:calc(100px - 10vw);
  min-height:1px;
  max-height:60px;
}

.vspacer-calc-plus {
  /*
  background-color: rgba(120,42,16,0.4);
  */
  width:100%;
  height:calc(1px + 9vw);
  min-height:1px;
  max-height:100px;
  border-top:0px dotted green;
}

.filler-vertical-brown {
  width:100%;
  height:500px;
  z-index:43;                 /*  downward-left-footer = 44  */
  position:absolute;
  top:160px;
  left:0px;
  background-color:#332f2a;
}



.wrapper-header-outer {
  position:relative;
  width: 100%;
  margin: 0px;
  overflow:hidden;
  max-height:800px;
}

.wrapper-header-start-animation {
  position:relative;
  width:100%;
  margin:0 auto;
  margin-top:0px;
  padding:0px 0px 0px 0px;
}

#startanimation_D,
#startanimation_M {
  width:100%;
  float:left;
  height:auto;
}

#startanimation_D > img,
#startanimation_M > img {
  width:100%;
  float:left;
  height:auto;
}

#startanimation_text_spacer {
  width:100%;
  height:3rem;
  float:left;
  /*
  background-color:lime;
  */
}

#startanimation_text_block {
  position:absolute;
  border:0px yellow dotted;
  top:39.2%;
  left:23.5%;
  font-size:0.94rem;
  line-height:1.5;
  text-align:center;
  width:53%;
  padding:0px 0px 0px 0px;
}
#startanimation_text a {
  text-decoration:none;
  font-family: 'Barlow 500', sans-serif;
  font-weight:500;
}
.animated-splitter {
  width:12.6%;
  height:1px;
  padding-top:0.65%;
  margin-top:3.6%;
  margin-bottom:4%;
  animation-duration: 600ms;
  animation-name: animate-splitter_Start;
}
.static-splitter,
.splitter {
  width:0px;
  height:1px;
  padding-top:0.65%;
  margin-top:3.6%;
  margin-bottom:4%;
}
#startanimation_text_block .static-text {
  visibility:hidden;
}
#startanimation_text_block .animated-text {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  animation-duration: 600ms;
  animation-name: fadeInUp_Start;
}

@keyframes animate-splitter_Start {
  0% {
    width:0px;
  }
  40% {
    width:0px;
  }
  100% {
    width:12.6%;
  }
}

@keyframes fadeInUp_Start {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


.wrapper-headline-area,
.wrapper-center-indent-area {
  position:relative;
  width:53%;
  margin:0 auto;
  padding:0px 0px 0px 0px;
}

.wrapper-center-indent-area {
  width:60%;
}

.flex-center {
  display:flex;
  align-items:center;
  justify-content: center;
  flex-wrap: wrap;
}

.flex-linebreak {
  height:1px;
  margin-top:-1px;
  width:100%;
}


/* Preloader/Spinner
---------------------------------------------*/

#preloader {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255,255,255,0.1);
  z-index: 900;
}
#spinner {
  position: relative;
  height:35px;
  width:35px;
  top: 35%;
  margin-bottom: -12px;
  margin:0 auto;
  border:3px solid rgba(226, 226, 226, 0.75);
  border-radius:100%;
  -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
      -o-animation: rotation .6s infinite linear;
         animation: rotation .6s infinite linear;
}
#spinner:before {
   content:"";
   display:block;
   position:absolute;
   left:-3px;
   top:-3px;
   height:100%;
   width:100%;
   border-top:3px solid rgba(0,0,0,1);
   border-left:3px solid transparent;
   border-bottom:3px solid transparent;
   border-right:3px solid transparent;
   border-radius:100%;
}
@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
   from {-o-transform: rotate(0deg);}
   to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}


/* ////////////////////////////////////////// FONTS ///////////////////////// */
a, .link-telefon {
  text-decoration:none;
  color: rgba(239,239,239,0.9);
}

h1 {
  font-size: 2.3rem;
  line-height:1.2;
  font-weight: 400;
}

h2 ,
.teaser-headline {
  font-size: 1.32rem;
  margin-top:0.1rem;
  margin-bottom:0.4rem;
  letter-spacing:0.02rem;
  font-family: 'Barlow 400', sans-serif;
  font-weight: 400;
}

h2.teaser-subline {
  font-size: 1.0rem;
  margin-top:unset;
  margin-bottom:unset;
  letter-spacing:unset;
  font-weight: 300;
	line-height: 1.4;
}


.wrapper-headline-area h1 {
  margin:0px;
  padding:0px;
  border-bottom:0px;
  text-align:center;
  line-height:1.2;
  font-family: 'Barlow 400', sans-serif;
  font-weight: 400;
}

.font-taller {
  font-size:1.14rem;
  letter-spacing:0.06rem;
}

.bolder {
  font-family: 'Barlow 500', sans-serif;
  font-weight:500;
}

.wrapper-header-image {
  width:100%;
  padding-top:56%;
  background-size: cover;
}

#headertesaser_absolute {
  position:absolute;
  width:100%;
  /*
  background-color: rgba(46,120,0,0.2);
  */
  z-index:885;
  cursor:pointer;
}

.wrapper-img-text {
  margin-left:21px;
  max-width: calc(296px - 0.6rem);
  padding:0.96rem 0.6rem 1.14rem 1.12rem;
  line-height:1.1;
  font-size:1.01rem;
  margin-top:-29.6%;
}
#headertesaser_absolute .wrapper-img-text {
  margin-top:26.4%;
}
.wrapper-img-text h2 {
  color: rgba(239,239,239,0.9);
}

.project-detail-text h1 {
  margin-top:-0.2rem;
  margin-bottom:0.6rem;
  letter-spacing:0.02rem;
}

.project-detail-text-left p {
  margin-top:0px !important;
}

/* ///////////////////////////////////////////// small tags /////////////////// */
.smalltags {
  text-decoration:none;
  text-transform:uppercase;
  font-family: 'Barlow 400', sans-serif;
  font-weight: 400;
  font-size:0.76rem;
}

.smalltags > a ,
.smalltag-entry {
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  font-family: 'Barlow 400', sans-serif;
  font-weight: 400;
  font-size: 0.76rem;
  max-width:100%;
  padding-right:0.1rem;
  word-break: break-word !important;
}

.pagelist-teaser-outer .smalltags {
  color: rgba(51,47,42,0.7);
}
.pagelist-teaser-outer .smalltags > a {
  color: rgba(51,47,42,1.0);
}

.wrapper-img-text .smalltags {
  color:rgba(255,255,255,0.7);
}
.wrapper-img-text .smalltags > a {
  color:rgba(255,255,255,1.0);
}

.project-detail-text .smalltags {
  margin-top:0.2rem;
  color: rgba(51,47,42,0.7);
}
.project-detail-text .smalltag-entry {
  margin-top:0.1rem;
  margin-bottom:0.8rem;
  color: rgba(51,47,42,1.0);
}
.project-detail-text .smalltag-entry p:first-child {
  margin-top:0px;
}
.project-detail-text .smalltag-entry p:last-child {
  margin-bottom:0px;
}

/*  ////////////////////////////////////////////////////////////////////////  top navigation */

.topnavi .nav {
  list-style: none;
  margin:0px;
  padding:0px;
  float:left;
  display:flex;
}

.topnavi .nav li a {
  display:block;
  text-decoration:none;
  text-transform:uppercase;
  color: rgba(239,239,239,0.9);
  font-size:1.0rem;
  line-height:1.0;
  padding-left:   0.3rem;
  padding-top:    0.2rem;
  padding-right:  0.3rem;
  padding-bottom: 0.3rem;
}

.topnavi .nav li a:hover {
  background-color:#332f2a;
}

.topnavi .nav li a.nav-selected,
.topnavi .nav li a.nav-path-selected {
  background-color:#332f2a;
  padding-left:  0.62rem;
  padding-right: 0.62rem;
}

.btn-contact {
  color: rgba(239,239,239,0.9);
  font-size:1.0rem;
  line-height:1.0;
  text-decoration:none;
}

.pencil-writing {
  display:inline-block;
  background-image: url(../images/pencil.svg);
  background-size: 100% auto;
  height:1.2rem;
  width:3.2rem;
  margin-bottom:-0.05rem;
  margin-left:0.3rem;
}
.ictn {
  display:none !important;
  display:none;
}

.btn-to-top {
  display:block;
  position:absolute;
  bottom: 8px;
  left: 20px;
  background-image: url(../images/btn-top.svg);
  background-size: 50% auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height:2.5rem;
  width: 2.5rem;
  z-index:887;
}

/* ///////////////////// Accordion /////////////////////////////////////////////////////////////////////////// */
.accordion-item {
  margin-bottom:3.2rem;
  max-height:0px;
  overflow:hidden;
}
.accordion-item-open {
  max-height:2000px;
  margin-bottom:0px;
  animation-duration: 2000ms;
  animation-name: accordionOpen;
}
.accordion-item-open-start {
  max-height:2000px;
  margin-bottom:0px;
  animation-duration: 2000ms;
}
.accordion-item-close {
  max-height:0px;
  animation-duration: 800ms;
  animation-name: accordionclose;
}

@keyframes accordionOpen {
  0% {
    max-height:0px;
    margin-bottom:3.2rem;
  }
  20% {
    margin-bottom:0px;
  }
  100% {
    max-height:2000px;
  }
}
@keyframes accordionclose {
  0% {
    max-height:600px;
    margin-bottom:0px;
  }
  20% {
    margin-bottom:0px;
  }
  100% {
    max-height:0px;
    margin-bottom:3.2rem;
  }
}

.wrapper-absolute-positioner {  /* /////////////// ACCORDION //////////////////// */
  position:relative;
  height:1px;
  overflow:visible;
  margin-bottom:12px;
}

.button {                     /*  siehe  -->  .accordion-btn  */
  display:flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-appearance: none;
  -webkit-focus-ring-color: none;
  outline:none;
	outline-style:none;
	box-shadow:none;
  width:14.0rem;
  min-height:58px;
  line-height:1.0;
  border-width:3px;
  border-style:solid;
  text-align:center;
  text-decoration:none;
  font-family: 'Barlow 400', sans-serif;
  font-weight:400;
  font-size:1.2rem;
}
.button-normal {
  border-color: rgba(51,47,42,0.7);
  color: rgba(51,47,42,0.7);
}
.button * {
  margin-top:-0.17rem !important;
  margin-top:-0.17rem;
}
.button-width {
  width:14.0rem;
  display:block;
  float:left;
  width:auto;
  margin:0 auto;
  position:relative;
}

.button-no-border {
  border-width:0px !important;
}

.wrapper-filter {
  position:absolute;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-wrap:wrap;
  z-index:885;
  width:99%;
  height:1px;
  overflow:visible;
}

.filter-outer {
  display:block;
  float:left;
  width:auto;
  margin:0 auto;
  position:relative;
}

.btn-filter-select {
  float:left;
}
.button-filter-select {
  float:left;
}

#btn_filter_clear {
  width:11rem;
}
.btn-filter-clear {
  float:left;
  max-width:0px;
  overflow:hidden;
  white-space:nowrap;
}

.btn-inner-wrapper {
  display:flex;
  justify-content: space-between;
  align-items:center;
  width:100%;
  border:1px solid transparent;
}

.filter-option {
  max-height:0px;
  max-width:0px;
  min-height:0px;
  overflow:hidden;
  margin:0 auto;
}
.filter-option:hover {
  background-color:#332f2a;
}
.wrapper-filter-options {
  margin-top:0.2rem;
}

.caret-up {
  display:flex;
  justify-content: center;
  align-items: flex-start;
  border-width:0px !important;
  min-height:0px !important;
  overflow:hidden !important;
  font-size:3rem !important;
  padding:0px !important;
  margin-top:0px !important;
  background-color:transparent !important;
}
.fa-caret-up {
  border-width:0px !important;
  margin-top:-1.0rem;
  max-height:1.8rem !important;
  background-color:transparent !important;
}
.caret-up:hover {
  background-color:transparent !important;
}

/* FILTER ENDE */


.arrow-right {
  display:inline-block;
  line-height:1.0;
  height:1.34rem;
  width:2.56rem;
  margin-bottom:-0.24rem;
  background-image: url(../images/bg_alle_projekte.svg);
  background-size: auto 99%;
  background-position: right 50%;
  background-repeat: no-repeat;
}
.icon-filter {
  display:inline-block;
  line-height:1.0;
  height:1.6rem;
  width:1.7rem;
  margin-bottom:-0.3rem;
  background-image: url(../images/bg-filter-red.svg);
  background-size: auto 99%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  /*
  background-color: rgba(170,20,40,0.4);
  */
}
.icon-filter-clear {
  display:inline-block;
  line-height:1.0;
  height:1.4rem;
  width:1.7rem;
  margin-bottom:-0.3rem;
  background-image: url(../images/toggle-close-mobile-nav.svg);
  background-size: auto 62%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  /*
  background-color: rgba(170,20,40,0.4);
  */
}

@keyframes transformCatArrowOpen {
  0% {
      transform: scaleX(1);
  }
  100% {
      transform: scaleX(-1);
  }
}
@keyframes transformCatArrowClose {
  0% {
      transform: scaleX(-1);
  }
  100% {
      transform: scaleX(1);
  }
}

.icon_uebersicht {
  display:inline-block;
  line-height:1.0;
  height:1.34rem;
  width:2.56rem;
  margin-bottom:-0.22rem;
  background-image: url(../images/bg-zur-uebersicht.svg);
  background-size: auto 99%;
  background-position: right 50%;
  background-repeat: no-repeat;
}

.button-wrapper {
  width:100%;
  /*
  border-top:1px solid green;
  */
  border-top:1px solid transparent;     /*   IMPORTANT ! */
}

.accordion-btn {
  position:relative;
  margin:0 auto;
  margin-top:-0.78rem;
  /* - 14px */
  /*
  border-color: rgba(51,47,42,0.7);
  color: rgba(51,47,42,0.7);
  */
  border-color: rgba(51,47,42,0.7);
  color: rgba(51,47,42,0.7);
  z-index:885;
}
.accordion-btn-active {
  border-color: #ebeaeb;
  color: #ebeaeb;
}

.accordion-content-left {
  width: calc(36% - 76px);
  margin: 4rem 40px -1.0rem 36px;
  min-height:40px;
  float:left;
  display:flex;
  justify-content: center;
  align-items: center;
}
.accordion-content-right {
  width: calc(64% - 32px);
  margin: 4rem 32px 0px 0px;
  min-height:40px;
  float:left;
  color: rgba(239,239,239,0.9);
}
.accordion-content-right h2 {
  color: rgba(51,47,42,1.0);
}
.accordion-content-left img,
.accordion-content-left > .jsgif {
  width: 75%;
  height: auto;
}
.accordion-content-left > .jsgif > canvas {
  width: 100%;
  height: auto;
}
.accordion-content-right .tags {
  color: rgba(51,47,42,1.0);
  margin-right:1.0rem;
}

.twocols-content p:first-child {
  margin-top:0px;
}

.onecol-indent {
  width: calc(100% - 72px);
  margin: 0px 36px 0px 36px;
  border-top:1px solid transparent;
}

.twocols-content-left {
  width: calc(72.4% - 80px);
  float:left;
  margin: 0px 44px -1.0rem 36px;
}

.twocols-content-right {
  width: calc(27.6% - 36px);
  float:left;
  margin: 0px 36px -1.0rem 0px;
  position:relative;
}
.twocols-content-link p {
  margin:0px;
  padding:0px;
}
.twocols-content-link a {
  display:inline-block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-appearance: none;
  -webkit-focus-ring-color: none;
  outline:none;
	outline-style:none;
	box-shadow:none;
  color: rgba(239,239,239,0.9);
  text-decoration:none;
  text-transform:uppercase;
  font-size:0.8rem;
  letter-spacing:0.02rem;
  line-height:1.3;
  font-family: 'Barlow 500', sans-serif;
  font-weight: 500;
  padding:0.53rem 1.2rem 0.53rem 1.34rem;
  white-space:nowrap;
}

.icon_zurwebsite {
  display:inline-block;
  line-height:1.0;
  height:1rem;
  width:2rem;
  margin-bottom:-0.2rem;
  background-image: url(../images/arrow-white-small.svg);
  background-size: auto 60%;
  background-position: right 50%;
  background-repeat: no-repeat;
}

.twocols-content-right img {
  width: 42%;
  height: auto;
  margin-left: 23.5%;
  margin-top: -19%;
  margin-bottom: -0.8rem;
}

.ccm-block-social-links a {
  display:block;
  float:left;
  width:2.0rem;
  height:2.0rem;
  padding:0px !important;
  margin-top:-0.02rem;
  margin-right: 0.9rem;
}

.ccm-block-social-links a .fab,
.ccm-block-social-links a .fas {
  display:inline;
  font-size:2.24rem !important;
  margin: 0px !important;
  padding:0px !important;
  line-height:0.9;
}
.ccm-block-social-links a .fas {
  font-size:2.0rem !important;
  line-height:1.0;
}


.page-list-elements-wrapper {
	margin:0 auto;
}
.masonry-grid {
  animation-duration: 600ms;
  animation-name: content_fadeIn;
}

.pagelist-teaser-outer {		                        /* Listenansicht - 1 Block - OUTER */		/* siehe .projects-teaser-outer */
	float:left;
	background-color:#FFFFFF;
}
.no-background {
	background-color:unset;
}

.teaser-image {
  width:100%;
  height:auto;
  float:left;
}

@keyframes content_fadeIn {
  0% {
      -webkit-transform: scale3d(0.4, 0.4, 0.4);
      transform: scale3d(0.4, 0.4, 0.4);
      opacity:0.1;
  }
  100% {
      -webkit-transform: scale3d(1.0, 1.0, 1.0);
      transform: scale3d(1.0, 1.0, 1.0);
      opacity:1.0;
  }
}

.wrapper-customer-logos {
  position:relative;
  width:102% !important;
  margin-left:-1% !important;
}
.customer-logos {
    width:16.6%;
    margin:2.5% 4.2% 3.5% 4.2%;
    padding-top:7%;
    background-size: 100% auto;
    background-position: 50% 50%;
    background-repeat:no-repeat;
    float:left;
}


.wrapper-bottom-block {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

.bottom-block {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items:center;
  margin-top:0.8rem;
  margin-bottom:0.8rem;
}
.wrapper-sbm-mobile {
    display:none;
}
.bottom-block-left {
  justify-content:flex-start;
  width:calc(33.3% - 36px);
  margin-left:36px;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.bottom-block-center {
  justify-content:center;
  width:33.4%;
}
.bottom-block-right {
  justify-content:flex-end;
  width:calc(33.3% - 36px);
  margin-right:36px;
  text-align:right;
}

.margin-bottom-reduced {
  margin-bottom:-1.7rem;
}

.btn_sbm {
	display:block;
	width:2.0rem;
	height:2.0rem;
	max-width: 48px;
	max-height:48px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
.btn_sbm_be {
	background-image: url(../images/sbm-be.svg);
}
.btn_sbm_vi {
	background-image: url(../images/sbm-vi.svg);
}
.btn_sbm_in {
	background-image: url(../images/sbm-in.svg);
}

.footer-navi {
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  min-height: 4.8rem;
  z-index:45;               /*  downward-left-footer = 44  */
  position:relative;
}
.footer-navi .nav {
  list-style: none;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  font-size:0.7rem;
  text-align:right;
  margin:0px 36px 0.5rem 0px;
}
.footer-navi > .nav > li > a {
  display:inline-block;
  text-decoration:none;
  text-transform:uppercase;
}
.footer-navi a:after {
  content: '|';
  color: rgba(239,239,239,0.9);
  margin:0px 0.4rem 0px 0.4rem;
}
.footer-navi li:last-child a:after {
  content: '';
  margin:0px 0px 0px 0px;
}

.footer-navi a.nav-selected {
  color:#FFFFFF !important;
}

/* ///////////////////////////////////////////// GRID gallery masonry //////// */

.grid-sizer {
  width:5%;
}

.project-image-wrapper {
  position:relative;
  float:left;
  margin-bottom:21px;
}
.project-image {
  float:left;
  width:100%;
}
.width-50-p {
  width:50%;
}
.width-35-p {
  width:35%;
}
.width-25-p {
  width:25%;
}
.width-65-p {
  width:65%;
}
.width-100-p {
  width:100%;
}

.inner-border {     /* ////////////////////////////////// masonry item */
  position:absolute;
  display:block;
  width:100%;
  height:100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-appearance: none;
  -webkit-focus-ring-color: none;
  outline:none;
	outline-style:none;
	box-shadow:none;
	border-width: 0px 11px 0px 11px;
	border-style: solid;
	border-color: #ebeaeb;
	/*
	border-color: rgba(255,14,40,0.3);
	*/
}
.inner-border-left {     /* ////////////////////////////////// masonry item - vimeoBlock_masonry */
  left: 0px;
  width:1px;
	border-width: 0px 0px 0px 11px;
}
.inner-border-right {     /* ////////////////////////////////// masonry item - vimeoBlock_masonry */
  right: 0px;
  width:1px;
	border-width: 0px 11px 0px 0px;
}

.divider {
  position:absolute;
  width:100%;
  top: calc(50% - 11px);
  height:22px;
  background-color: #ebeaeb;
  /*
  background-color: rgba(30,230,40,0.3);
  */
}

.img-link-divided {
  display:block;
  position:absolute;
  width:100%;
  height:50%;
}

.link-divided-top {
  top:0px;
}
.link-divided-bottom {
  top: 50%;
}

/* ////////////////////////////////////////////// VIMEO ////////////////// */

.vimeoBlock {
  border-bottom: 20px solid #ebeaeb;
  position:relative;
  margin:0 auto;
  width: calc(100% - 44px);
}

.vimeo-player {
  float:left;
  margin:0px !important;
  height:100%;
  display:block;
}

.vimeoBlock_masonry {  /* customized .vimeoBlock --- inside masonry */
  position:relative;
}
.vimeoBlock_masonry > div {   /* --- inside masonry */
  position: absolute;
  top: 0;
  left: 6px;
  width: calc(100% - 12px);
  height: 100%;
}
.vimeoBlock_masonry > div > .vimeo-player {   /* --- inside masonry */
  margin:0px !important;
  width:100%;
  display:block;
}


/* ///////////////////////////////////////////// COOKIE accept //////// */
#coockie_notice {
  position:fixed;
  bottom:0px;
  left:0px;
  width:100%;
  z-index:901;
  display:none;
}
.wrapper-coockie-notice {
  position: relative;
  width: 100%;
  max-width:1600px;                            /* MAX WIDTH */
  margin: 0 auto;
  background-color:#332F2A;
}

.wrapper-cookie-text {
  width:calc(100% - 328px);
  color:#FFFFFF;
  font-size:0.82rem;
  margin:1.1rem 0px 1.3rem 24px;
}

.wrapper-cookie-button {
  width:280px;
  display:flex;
  justify-content:flex-end;
  margin:1.3rem 24px 1.3rem 0px;
}

.cookie-button {
  width:200px;
  padding:0.2rem 0.4rem 0.2rem 0.6rem;
  min-height:42px;
  line-height:1.0;
  border-width:2px;
  border-color:#FFFFFF;
  color:#FFFFFF;
  font-family: 'Barlow 400', sans-serif;
  font-weight:400;
  font-size:0.9rem;
  letter-spacing:0.03rem;
}

.icon_checkmark {
  display:inline-block;
  line-height:1.0;
  height:1.34rem;
  width:2.1rem;
  margin-bottom:-0.32rem;
  background-image: url(../images/checkmark.svg);
  background-size: auto 60%;
  background-position: right 50%;
  background-repeat: no-repeat;
}

#cookie_links a {
  text-transform:uppercase;
}

#cookie_links a:after {
  content: '|';
  color: rgba(239,239,239,0.9);
  margin:0px 0.4rem 0px 0.4rem;
}
#cookie_links a:last-child:after {
  content: '';
  margin:0px 0px 0px 0px;
}



.masonry-clear {
  width:100%;
  height:1px;
  overflow:hidden;
  color: transparent;
}


@media screen and (max-width: 660px) {

  #console2 {
    color:lime;
  }
  #console2:after {
    content:'lowres';
  }

  .desktop-only {
    display:none;
  }
  .mobile-only {
    display:block;
  }
  #topnavi_area {                               /* upper centered */
    width: calc(100% - 44px);
    margin: 21px 22px 0px 22px;
    overflow:hidden;
  }
  #topnavi,
  .wrapper-img-text {
    display:none;
  }
  .behind-topmenu {
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    z-index:887;
    width: 100% !important;
  }
  .cover-startani {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity:0;
    background-color: #000000;
    z-index: 886;
  }
  .wrapper-header-image {
    padding-top:76%;
    background-size: cover;
    background-position: 51% 50%;
  }
  .topnavi-flex-mobile {
    display:flex;
    justify-content: space-between;
    align-items:flex-start;
  }
  #outer_navitoggle {                           /* OUTER hamburger menü --- x - LEFT  */
    display:block;
  }
  #btn_navitoggle,
  .btn-navi-toggle-preload {
    display:block;
    background-size: auto 99%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor:pointer;
    width:2.3rem;
    max-width:40px;
    padding-top:69.75%;
  }
  .btn-navi-toggle-start {
    background-image: url(../images/toggle-open-mobile-nav.svg);
  }
  .btn-navi-toggle-closed {
    background-image: url(../images/toggle-open-mobile-nav.svg);
    animation-duration: 600ms;
    animation-name: toggleButton_close;
  }
  .btn-navi-toggle-open {
    background-image: url(../images/toggle-close-mobile-nav.svg);
    animation-duration: 600ms;
    animation-name: toggleButton_open;
  }

@keyframes toggleButton_close {
  0% {
      opacity:1;
      transform: rotate(90deg);
      background-image: url(../images/toggle-close-mobile-nav.svg);
  }

  50% {
      opacity:0.1;
      transform: rotate(45deg);
      background-image: url(../images/toggle-close-mobile-nav.svg);
  }
  52% {
      opacity:0.1;
      transform: rotate(0deg);
      background-image: url(../images/toggle-open-mobile-nav.svg);
  }
  100% {
      opacity:1;
      background-image: url(../images/toggle-open-mobile-nav.svg);
  }
}
@keyframes toggleButton_open {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(90deg);
  }
}

  /* JS #dynamic_vspacer_source , #dynamic_vspacer */

  #dynamic_vspacer_source {
    width:10px;
    height:2.6rem;
    max-height:46px;
    /*
    background-color:yellow;
    */
  }
  #dynamic_vspacer {
    width:90%;
    height:3.66rem;
    /*
    background-color:rgba(255,255,255,0.4);
    */
  }

  #outer_logo {                                 /* OUTER logo - RIGHT  */
    display:block;
    margin:0px;
    padding:0px;
    /*
    background-color:rgba(0,255,48,0.4);
    */
  }
  #logo_top {
    display:flex;
    background-size: cover;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    height:2.6rem;
    max-height:46px;

    margin-right: unset;
    margin-left:  unset;
  }
  #outer_contact {                            /* OUTER contact btn - RIGHT  */
    margin-left:10px;
    white-space:nowrap;
  }

  #top_navi_mobile {
    margin-top: 0px !important;
    padding-top:0px !important;
    display:block;
    position:relative;
    overflow:hidden;
    width:100%;
    float:left;
  }
  .navigation-start {
    max-height:0px;
	}
	.navigation-open {
    max-height:600px;
    animation-duration: 1600ms;
    animation-name: openTopNavi;
	}
	.navigation-closed {
    max-height:0px;
    animation-duration: 800ms;
    animation-name: closeTopNavi;
	}
  #top_navi_mobile a {
    display:flex;
    align-items:center;
    width:8.0rem;
    max-width:140%;
    min-height:40px;
    text-indent:2.1rem;
    padding:0.2rem 0px 0.2rem 32px;
    margin:0px;
    font-family: 'Barlow 400', sans-serif;
    font-weight:400;
    text-decoration:none;
    text-transform:uppercase;
    /*
    color: rgba(239,239,239,0.9);
    */
    color: #FFFFFF;
  }

  #top_navi_mobile a:hover,
  #top_navi_mobile a.nav-selected,
  #top_navi_mobile a.nav-path-selected {
    background-color:#332F2A;
  }

  .wrapper-headline-area {
    width: calc(100% - 40px);
  }
  #startanimation_text {
    border-bottom:2.0rem solid transparent;
  }
  #startanimation_text_block {
    top:41%;
    left:20px;
    width:calc(100% - 40px);
  }
  #startanimation_text_spacer {
    height:0.2rem;
  }
  .wrapper-center-indent-area {
    width: calc(100% - 40px);
  }

  .animated-splitter {
    width:17%;
    height:1px;
    padding-top:0.9;
    margin-top:1.2rem;
    margin-bottom:1.2rem;
    animation-duration: 600ms;
    animation-name: animate-splitter_Start_mobile;
  }
  .static-splitter,
  .splitter {
    width:0px;
    height:1px;
    padding-top:0.9%;
    margin-top:1.2rem;
    margin-bottom:1.2rem;
  }

  @keyframes animate-splitter_Start_mobile {
    0% {
      width:0px;
    }
    40% {
      width:0px;
    }
    100% {
      width:17%;
    }
  }

  .downward-right {
    border-width: 102px 1000px;     /* 102 */
  }
  .wrapper-padding-downward {
    padding-bottom:80px;
  }

  .accordion-item {           /* ////////// ACCORDION MOBILE auf Desktop //////////////////// */
    margin-bottom:64px;
  }
  .accordion-item-open {
    max-height:3000px;
    margin-bottom:20px;
  }
  .accordion-item-close {
    max-height:0px;
    margin-bottom:64px;
  }
  @keyframes accordionOpen {
  0% {
    max-height:0px;
    margin-bottom:64px;
  }
  20% {
    margin-bottom:20px;
  }
  100% {
    max-height:3000px;
    margin-bottom:20px;
  }
  }
  @keyframes accordionclose {
  0% {
    max-height:1000px;
    margin-bottom:20px;
  }
  20% {
    margin-bottom:20px;
  }
  100% {
    max-height:0px;
    margin-bottom:64px;
  }
  }                           /* ////////// ACCORDION MOBILE auf Desktop - END //////////////////// */

  .accordion-content-left {
    width: 64%;
    margin: 3.4rem 18% 1.6rem 18%;
  }
  .accordion-content-right {
    width: calc(100% - 44px);
    margin: 0px 22px 0px 22px;
    text-align:center;
  }

  .onecol-indent {
    width: calc(100% - 44px);
    margin: 0px 22px 0px 22px;
  }
  .twocols-content-left,
  .twocols-content-right {
    width: calc(100% - 44px);
    margin: 0px 22px 0px 22px;
  }
  .twocols-content-right {
    margin-top: 2.0rem;
    overflow:hidden;
  }
  .twocols-flex-wrapper {
    width: calc(100% - 44px);
    margin: 0px 22px 0px 22px;
    display:flex;
    justify-content: space-between;
  }
  .twocols-content-smb {
    width:unset;
    margin:unset;
  }
  .twocols-content-link {
    width:unset;
    margin:unset;
  }
  .wrapper-sbm-mobile {
    display:flex;
    width:100%;
    justify-content: center;
    margin-bottom:1.8rem;
  }

  .page-list-elements-wrapper {
    width:100%;
  }

  .pagelist-teaser-outer {		                        /* Listenansicht - 1 Block - OUTER */		/* siehe .projects-teaser-outer */
    width:100%;
    margin:0px 0px 1.0rem 0px;
  }
  .pagelist-teaser-content {
    margin:1.2rem 22px 1.0rem 22px;
  }

  .wrapper-customer-logos {
    width:102% !important;
    margin-left:-1%  !important;
  }
  .customer-logos {
    width:33.2%;
    margin:5% 8.4% 7% 8.4%;
    padding-top:11%;
  }

  .bottom-block-left {
    justify-content:flex-start;
    align-items:flex-end;
    width:calc(60% - 22px);
    margin-left:22px;
    text-align:left;
    border-bottom:0px dotted yellow;
  }
  .bottom-block-center {
    display:none;
  }
  .bottom-block-right {
    justify-content:flex-end;
    align-items:flex-end;
    width:calc(40% - 22px);
    margin-right:22px;
    text-align:right;
    border-bottom:0px dotted lime;
  }
  .footer-navi .nav {
    margin:0px 22px 0.56rem 0px;
  }
  .btn_sbm {
    max-width: 68px;
    max-height:68px;
  }

  .project-image-wrapper {
    margin-bottom:1.0rem;
  }
  .width-50-p {
    width:100%;
  }
  .width-35-p {
    width:100%;
  }
  .width-25-p {
    width:100%;
  }
  .width-65-p {
    width:100%;
  }

  .inner-border {
    border-width: 0px 0px 0px 0px;
  }

  .divider {
    top: calc(50% - 0.5rem);
    height:1.0rem;
  }
  /* ////////////////////////////////////////// VIMEO BLOCK --> view.css /////// */
  .vimeoBlock {
    width: 100% !important;
    margin:0px !important;
    margin-bottom:1.0rem;
    padding-bottom: 56% !important;
  }
  .vimeoBlock_masonry > div {   /* --- inside masonry */
    left: 0px;
    width: 100%;
  }

  /* ///////////////////////////////////////////// COOKIE accept //////// */
  .wrapper-cookie-text {
    width:calc(100% - 100px);
    font-size:0.9rem;
    margin:1.1rem 32px 1.3rem 22px;
  }

  .wrapper-cookie-button {
    width:280px;
    display:block;
    margin-top:0px;
  }

  .btn-to-top {
    bottom: -0.2rem;
    left: calc(22px - 0.625rem);
    background-size: 50% auto;
    height:2.5rem;
    width: 2.5rem;
  }

  /* /////////////////////////////////////////// SELECTOR FILTER MOBILE */
  #selector_outer,
  .filter-outer,
  .wrapper-filter-options {
    width:100% !important;
  }
  .button-filter-select,
  .btn-filter-clear,
  .filter-option {
    width:48% !important;
    white-space:nowrap;
  }

  .icon-filter {
    width:1.8rem;
  }
  .icon-filter-clear {
    width:1.34rem;
  }

}
@media screen and (max-width: 550px) {
  /* /////////////////////////////////////////// SELECTOR FILTER MOBILE */
  .button-filter-select,
  .btn-filter-clear,
  .filter-option {
    /* font-size:0.7rem; */
    font-size: calc( (1vw * 5) + 1px);
  }

}

@media screen and (max-width: 440px) {
  .twocols-content-link a {
    font-size: calc(1rem + ((1vw - 11px) * 0.8));
    padding-left: calc(0.9rem + ((1vw - 11px) * 0.8));
    padding-right: calc(0.8rem + ((1vw - 11px) * 0.8));
  }
  .ccm-block-social-links a:first-child {
    margin-bottom:0.9rem;
  }
  .button-filter-select,
  .btn-filter-clear {
    min-height:2.4rem;
  }
}

@media screen and (min-width: 661px) and (max-width: 1024px) {

  #console2 {
    color:yellow;
  }
  #console2:after {
    content:'tablet';
  }

  #startanimation_text_block {
    left:13%;
    width:74%;
  }
  .wrapper-headline-area {
    width: 74%;
  }
  .wrapper-center-indent-area {
    width:70%;
  }
  .wrapper-img-text {
    max-width: 300px;
    margin-top:-30.8%;
  }
  #headertesaser_absolute .wrapper-img-text {
    margin-top:25%;
  }
  .wrapper-padding-downward {
    padding-bottom:120px;
  }

  .page-list-elements-wrapper {
    width:calc(100% - 16px);
  }

  .project-image-wrapper {
    margin-bottom:16px;
  }

  .inner-border {
    border-width: 0px 8px 0px 8px;
  }
  .inner-border-left {     /* ////////////////////////////////// masonry item - vimeoBlock_masonry */
    border-width: 0px 0px 0px 8px;
  }
  .inner-border-right {     /* ////////////////////////////////// masonry item - vimeoBlock_masonry */
    right: 0px;
    width:1px;
    border-width: 0px 8px 0px 0px;
  }

  .divider {
    top: calc(50% - 4px);
    height:8px;
  }

  .vimeoBlock {
    border-bottom: 16px solid #ebeaeb;
    width: calc(100% - 32px);
  }

  .pagelist-teaser-outer {		                        /* Listenansicht - 1 Block - OUTER */		/* siehe .projects-teaser-outer */
    width:calc(50% - 16px);
    margin:0px 8px 16px 8px;
  }
  .pagelist-teaser-content {
    margin:14px 16px 18px 16px;
  }

  .tablet-hide-second .pagelist-teaser-outer:nth-child(2) {
    display:none !important;
    display:none;
  }

  .bottom-block {
    margin-top:-0.8rem;
  }
}
@media screen and (min-width: 1025px) {
  .page-list-elements-wrapper {
    width:calc(100% - 24px);
    border-left:0px solid blue;
    border-right:0px solid blue;
  }

  .pagelist-teaser-outer {		                        /* Listenansicht - 1 Block - OUTER */		/* siehe .projects-teaser-outer */
    width:calc(33.3% - 22px);
    margin:0px 11px 22px 11px;
  }
  .pagelist-teaser-content {
    margin:16px 18px 18px 22px;
  }

}
@media screen and (min-width: 1025px) and (max-width: 1200px) {

  .bottom-block {
    margin-top:0px;
  }
}
@media screen and (min-width: 1201px) and (max-width: 1400px) {

  .bottom-block {
    margin-top:0.15rem;
  }
}
@media screen and (min-width: 1401px) and (max-width: 1599px) {

  .bottom-block {
    margin-top:0.55rem;
  }
}



@keyframes openTopNavi {
  0% {
      max-height:0px;
  }
  100% {
      max-height:1000px;
  }
}
@keyframes closeTopNavi {
  0% {
      max-height:1000px;
  }
  100% {
      max-height:0px;
  }
}

/*
//
//
// COMPOSER
//
//
*/

.selectize-control {
  margin-bottom: 2.0rem !important;
  margin-bottom: 2.0rem;
}