
.typedbody {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

.zparallax.paragraph {
    margin: 0px 0px;
}

h1 {
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

.slushcomment {
  position: absolute;
  z-index: 100;
  background: #FFF; padding: 20px;
  bottom: 200px; right: 120px;
  max-width: 30vw;
  text-align: left;
}

.slushhead {
  margin-bottom: 0px;
  text-transform: uppercase;
}

.slushcomment p {
  margin-top: 10px;
}

.paragraph-id--678 {
  padding: 10px 0px 10px 10px;
  position: absolute;
  z-index: 100;
  right: 150px;
  width: 224px;
  height: 110px;
  bottom: 50px;
}

.paragraph-id--678 img {
  width: 100%!important;
  height: 100%!important;
}

.path-user .mainheader {
  display: none;
}

.form-radios {
  margin-bottom: 50px;
}
.form-radios .js-form-item {
  color: #9EA4A2;
}
.form-radios .js-form-item:hover {
  color: #282828;
}

main .productlist .views-row,
main .paragraph--type--products article.commerce-product--catalog { float: left; width: 25%; text-align: center;
margin: 25px 0px;
position: relative;
min-height: 1px;
padding-right: 20px;
padding-left: 20px; }

.leistungen .flexbox-container { justify-content: flex-start; }
.leistungen .accordeon-header { displaY: block; line-height: 1.5em; }

.relative { position: relative; }
.absolut { position: absolute; width: 100%; height: 100%; }

.huge strong, .huge b { font-size: 5em; line-height: 1em; }
.huge::after {
  display: block;
height: 2px; width: 15px; background: #9EA4A2; }

.webformbtn:hover { cursor: pointer; }

.paragraph--type--teaser article {  max-width: 100%; }

.bigcontact { padding-top: 140px; }
.bigcontact .hugebtn { display: block; margin-bottom: 70px; font-size: 5em; line-height: 1.2em; }

.footer { position: relative;  padding: 80px 0px; margin: 10px 0px 0px 0px; border-top: 1px solid #0d0d0d;  }

.footer .flexbox-container { justify-content: space-between; align-content: flex-end; align-items: flex-end; font.size: 1.4em; }
.footer .webformbtn.hugebtn { font-size: 1.8em; line-height: 1.4em; }

.bigprojects { width: 220px; height: auto; max-width: 100%; margin-top: 40px; }

.footer .spacebetween > div:nth-child(1) { order: 2; }
.footer .spacebetween > div:nth-child(2) { order: 3; }
.footer .spacebetween > div:nth-child(3) { order: 1; }

.footer p { margin-bottom: 0px; }
.footer .leistungen { display: flex; flex-wrap: wrap; }
.footer .leistungen > div { display: inline-block; margin: 0px 10px 10px 0px; }

.footer span, .footer a{ line-height: 1.7em; }
.footer h2 { font-size: 3.2em;  }
.footerlinks a { margin-right: 10px; }

.lastgrid { text-align: right; }

.to-the-top {
position: relative;
margin-top: 120px;
text-align: center;
-webkit-animation: scrollbounce 2.5s infinite alternate;
animation: scrollbounce 2.5s infinite alternate;
}

@-webkit-keyframes scrollbounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(15px); }
 }

  @keyframes scrollbounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(15px);
  }
}

#leistungsteaser > .paragraph { margin-top: 60px; }

.topper {
  display: inline-block;
  width: 30px;
  height: 60px;
    padding: 17px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

.topper span {
    display: block;
}

.topper img {
    display: inline-block;
    width: 30px;
    height: 60px;
    -webkit-animation: pulse 3.5s infinite alternate;
  animation: pulse 3.5s infinite alternate;
}

#projectpopup {
  overflow-y: scroll; align-items: ;
}


#block-views-block-websitemedia-socialicons { margin-left: 120px; }
.socialicons img { width: 28px; height: auto;  }
.icon { position: relative; }

#contactpopup .headline { width: 200px; margin-right: 80px; margin-top: 30px; font-size: 0.8em; }
#contactpopup .headline a { display: block; margin-top: 0px; padding: 0px 0px 10px 0px; }
#contactpopup #block-webform { width: calc(100% - 280px); max-width: 900px; margin: 0px auto; }

@media only screen and (min-width: 0px) and (max-width: 1200px) {
  .teaserimage { width: 400px; margin-right: 50px; }
  .teasercontent {
    width: calc(100% - 450px);
  }
  .bigcontact .hugebtn, .huge strong, .huge b {
 font-size: 4em;
 line-height: 1em;
}
}


 @media only screen and (min-width: 0px) and (max-width: 900px) {

   #contactpopup #block-webform {
    width: 100%;
  }
  #contactpopup {
   padding: 80px 40px;
 }
   .footer .grid, .leistungen .flexbox-container { display: block; }
    .lastgrid { text-align: left; }
    .footer .margintopsmall { margin-top: 20px!important; }
    .footer .grid { margin-bottom: 50px; }

   .teaserimage { width: 400px; margin-right: 0px; max-width: 100%; }
   .teasercontent {
     width: 100%; margin-top: 30px;
   }

   .bigcontact .hugebtn, .huge strong, .huge b { font-size: 3.2em; }
   .bigprojects { width: 200px; }

}

 @media only screen and (min-width: 0px) and (max-width: 600px) {
.footer .flexbox-container.spacebetween, .footer .flexbox-container > div { display: block!important; }
.bigcontact .flexbox-container { display: block; }
.bigcontact { padding-top: 60px; }
}

 @media only screen and (min-width: 0px) and (max-width: 480px) {
   #contactpopup {
    padding: 60px 20px;
  }
    .bigcontact { padding-top: 30px; }
   .bigcontact .hugebtn { margin-bottom: 50px; }
   .huge strong, .huge b,  .bigcontact .hugebtn { font-size: 2.4em; }
   .footerlinks a { margin-right: 0px; margin-bottom: 4px; display: block;  }
}
