body{font-family: 'Roboto', sans-serif;margin: 0;}
.head{padding: 0;padding-bottom: 20px;transition: padding 300ms ease;}
.fixed{position: fixed;width: 100%;top: 0;background-color: #fff;z-index: 50;
background-color: #fffffff2;}
.shrink{    box-shadow: 0 1px 8px rgba(0,0,0,0.15);}
.logo h2{margin: 0;padding: 0;font-size: 22px;letter-spacing: 3px;padding-top: 20px;transition: padding 300ms ease;}
.logo img{padding-top: 17px;width: 230px;padding-bottom: 5px;display: block;}
.logo span{opacity: 0.5;transition: opacity 300ms ease;}

  .shrink .logo span{opacity: 0;}
.shrink .navi a{padding: 22px 0;}
.shrink .logo h2{padding-top: 17px;}
.shrink .logo img{padding-top: 17px;    padding-bottom: 0;}
.shrink .head{padding-bottom: 0px;}

.wrapper{width: 1100px;margin: 0 auto;max-width: 90%;position: relative;}
.navi{position: absolute;right: 0;top: 0;}

.navi a{display: inline-block;margin-left: 32px;padding: 31px 0;color: #000;text-decoration: none;border-top: 3px solid #fff;font-size: 16px;
font-weight: 700;letter-spacing: 1px;transition: padding 300ms ease;opacity: 0.6;}
.navi a:hover{border-top: 3px solid #ececec;opacity: 1;}
.navi a.highl{border-top: 3px solid #000;opacity: 1;}
.abstand{height: 92px;}
.resc h2{font-size: 22px;font-weight: 400;text-align: center;margin-top: 30px}
.resc .fas,.resc .fab{background-image: linear-gradient(to right top, #51c468, #00b699, #00a3c2, #0089d2, #246ac1);
    color: #fff;
    padding: 18px;
    height: 17px;width: 17px;
    border-radius: 100%;
    margin-right: 10px;
    font-size: 18px;}
.footer{padding-bottom: 16px;}
.line {
    border-top: 1px solid #dbdbdb;
    margin: 10px 0;
}
.contct{
    margin-top: 40px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
width: 31%;
    padding: 40px 30px;
    text-align: center;
    box-sizing: border-box;
    color: #fff;
    margin-left: 3.5%;
    background: rgb(82,175,169);
    background: -moz-linear-gradient(45deg, rgba(82,175,169,1) 0%, rgba(77,162,226,1) 24%, rgba(35,105,194,1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(82,175,169,1) 0%,rgba(77,162,226,1) 24%,rgba(35,105,194,1) 100%);
    background: linear-gradient(45deg, rgba(82,175,169,1) 0%,rgba(77,162,226,1) 24%,rgba(35,105,194,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52afa9', endColorstr='#2369c2',GradientType=1 );
    position: relative;
    float: left;
}
.contct:first-child{margin-left: 0;}
.contct .icon{    color: #000;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    background-color: #fff;
    border-radius: 100%;
    padding: 20px;
    height: 20px;
    width: 20px;
    font-size: 20px;
    position: absolute;
    top: -34px;
    left: 50%;
    margin-left: -30px;}
.contct a{color: #fff;display: block;background-color: rgba(255,255,255,0.2);padding: 10px 10px;text-decoration: none;margin-top:10px;}
.button-group{padding: 40px 0;}
.button-group button{ 
    padding: 12px 00px;
    box-sizing: border-box;
width: 18%;
    margin-right: 2%;
    font-size: 16px;
    color: #444;
    color: rgba(0,0,0,.8);
    border: 0px solid #999;
    border: transparent;
    outline: none;
    background-color: #E6E6E6;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    border-radius: 2px;
cursor: pointer;}
.button-group button {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.button-group button:hover {
     -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}
.button-group button:last-child{margin-right: 0;}
.button-group button:focus, .button-group button:hover {
    filter: alpha(opacity=90);
    background-image: -webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
    background-image: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
}
button.highlight{background-color: #51c468; background-image: linear-gradient(to right top, #51c468, #00b699, #00a3c2, #0089d2, #246ac1);color: #fff;
font-weight: 700;}
button.highlight:hover,button.highlight:focus{background-image: linear-gradient(to right top, #51c468, #00b699, #00a3c2, #0089d2, #246ac1);}
.fotos .grid-sizer, .grid-item{width: 32.33%;margin-bottom: 18px;overflow: hidden;}
.subtitle{position: absolute;bottom: 0px;background-color: rgba(0,0,0,0.6);color: #fff;padding: 10px 0;text-align: center;width: 100%;font-size: 16px;
transform: translateY(30px);transition: transform 300ms ease;}
.grid-item:hover .subtitle{transform: translateY(0);}
.gutter-sizer{width: 1.5%;}
img.billd{width: 100%;height: auto;display: block;}
a.home{text-decoration: none;color: #000;}
.leftww{position: relative;left: -30%;background-color: #000;padding-left: 30%;width: 100%;
background-image: url(back.jpg);background-size: cover;border-radius: 10px;overflow: hidden;}
.grad{background: #61e448;
background: -moz-linear-gradient(45deg, #61e448 0%, #52afa9 21%, #4da2e2 61%, #2369c2 100%);
background: -webkit-linear-gradient(45deg, #61e448 0%,#52afa9 21%,#4da2e2 61%,#2369c2 100%);
background: linear-gradient(45deg, #61e448 0%,#52afa9 21%,#4da2e2 61%,#2369c2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61e448', endColorstr='#2369c2',GradientType=1 );
    position: absolute;left: 0;right: 0;top: 0;height: 100%;opacity: 0.8;}

.leftww .daniel{position: absolute;right: 70px;bottom: 0;height: 96%}
.textt{position: relative;width: 50%;color: #fff;padding: 120px 0;}
.textt h1{font-size: 48px;font-weight: 900;line-height: 62px;margin: 0;padding: 0;}
.textt h2{font-size: 20px;font-weight: 400;line-height: 34px;margin: 20px 0;padding: 0;}
.textt button{display: inline-block;background-color: #fff;text-align: center;padding: 16px 56px;color: #448DA8;font-size: 17px;font-weight: 700;letter-spacing: 2px;
text-decoration: none;border-radius: 5px;margin-top: 11px;border: 0px solid #fff;cursor: pointer;outline: none;}
.textt button:hover{opacity: 0.9;}
.textt button img{height: 15px;margin-right: 13px;position: relative;top: 2px;}
.social{  -webkit-box-shadow: 0px 5px 20px 0px rgba(212,212,212,1);
-moz-box-shadow: 0px 5px 20px 0px rgba(212,212,212,1);
box-shadow: 0px 5px 20px 0px rgba(212,212,212,1);
    transition: all 300ms ease;
    width: 31%;
    text-align: center;
    padding: 20px 36px;
    box-sizing: border-box;
    float: left;
    border-radius: 5px;margin-right: 3.33%;}
.soziale a:hover{color: #fff;}
.insta{background: rgb(255,255,255);
background: -moz-linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );}
.insta:hover{background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );}
.facebook:hover{background-color: #3B5998;}
.youtube:hover{background-color: #ff0000;}
.soziale{padding: 60px 0;}
.soziale a{color: #000;}
.soziale a:nth-child(3) .social{margin-right: 0;}
.social .fab{font-size: 46px;}
.social p{line-height: 26px;font-size: 16px;opacity: 0.7;}
.clear{clear: both;}
.text2{width: 64%;float: left;}
.text2 h2{font-size: 38px;line-height: 56px;margin-top: 0;}
.text2 p{font-size: 18px;line-height: 26px;}
.screenshot{width: 32%;margin-left: 4%;padding: 0;}
.text2 a{    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    z-index: 3;
    padding: 16px 50px;border-radius: 4px;text-decoration: none;font-weight: 700;letter-spacing: 2px;margin-top: 16px;display: inline-block;
background-image: linear-gradient(to right top, #51c468, #00b699, #00a3c2, #0089d2, #246ac1);
    color: #fff;}
.text2 a:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.tool{
    width: 15.8%;
    margin-right: 1%;
    margin-top: 26px;
    margin-bottom: 30px;
    text-align: center;color: #000;
    text-decoration: none;
}
.web{width: 24%;margin-right: 1.33%;float: left;text-align: center;color: #000;margin-top: 26px;margin-bottom: 30px;text-decoration: none;}
.webi a:nth-child(4n) .web{margin-right: 0;}
.shopif{margin: 0 36px;background-color: #fff;border-radius: 5px;overflow: hidden;
box-shadow: 0 5px 10px rgba(0,0,0,0.15);margin-bottom: 11px;}
.resc a{text-decoration: none;}
.tool{float: left;}
.tooli a:nth-child(6n) .tool{margin-right: 0;}
.resc h3{margin: 10px 0;font-size: 20px;padding: 0;}
.resc p{opacity: 0.7;font-size: 16px;line-height: 22px;margin: 0;}
.shopif img{width: 100%;height: auto;display: block;}
.mobile{display: none;}
.mobile .fas{
    color: #000;
    font-size: 28px;
    position: absolute;
    right: 0;
    top: 25px;}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 3px 0px;
  display: inline-block;
  cursor: pointer;
    outline: none;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #000; }

.hamburger-box {
      width: 33px;
    height: 25px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 33px;
    height: 3px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -9px;}
  .hamburger-inner::after {
    bottom: -9px; }
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
  .hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
  .hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

.headimg{width: 100%;height: auto;}
.sfigure{padding-bottom: 20px;}
@media only screen and (max-width: 1110px) {
    .social{padding: 20px 24px;}
    .textt {
    position: relative;
    width: 60%;
    color: #fff;
    padding: 40px 0;
        
}
    .contct{padding: 40px 10px;}
}
@media only screen and (max-width: 980px) {
    .text2 h2{font-size: 30px;line-height: 40px;}
    .textt h1{font-size: 36px;line-height: 44px;}
}

@media only screen and (max-width: 930px) {
    .contct{width: 100%;margin-left: 0;margin-bottom: 16px;}
    .logo h2{font-size: 20px;letter-spacing: 1.5px;padding-top: 14px;}
    .logo span{font-size: 15px;}
    .tool{width: 30%;margin-right: 5%;}
    .tooli a:nth-child(3n) .tool{margin-right: 0;}
    .web{width: 45%;margin-right: 10%;}
    .webi a:nth-child(2n) .web{margin-right: 0;}
    .mobile {
    display: block;
    position: absolute;
    right: 0;
    top: 18px;
        
}
    .button-group button{width: 48%;margin-bottom: 10px;}
    .button-group button:nth-child(2n){margin-right: 0;}
    .mobileno{width: 100%;max-width: 100%;margin: 0;}
    .leftww{padding: 0 5%;width: 100%;left: 0;box-sizing: border-box;border-radius: 0;}
    
    .head{padding-bottom: 0;}
    .navi{position: relative;text-align: center;height: 0;overflow: hidden;transition: height 300ms ease;margin-top: 0px;}
    .navi a{display: block;border-bottom: 1px solid #e7e7e7;margin-left: 0;padding: 20px 0;border-top: 0 solid #fff;}
    .navi a:hover {
    border-top: 0px solid #ececec;
}

    .navi a:last-child{border-bottom: 0px solid #fff;}
    .navi a.highl{border-top: 0 solid #fff;}
    .footer .logo{display: none;}
    .yees{height: auto;margin-top: 14px;}
    .footer .navi{height: auto;margin-top: 30px;}
}
@media only screen and (max-width: 800px) {
    .screenshot{display: none;}
    .text2{float: none;width: 100%;}
    
}
@media only screen and (max-width: 725px) {
    .fotos .grid-sizer, .grid-item{width: 48%;margin-bottom: 8px;}
    .gutter-sizer{width: 2%;}
    .button-group button{width: 100%;margin-bottom: 12px;margin-right: 0;padding: 10px 0;font-size: 14px;}
    .button-group{padding: 20px 0;}
    .textt{width: 100%;}
    .leftww{text-align: center;overflow: hidden;}
    .textt h2{font-size: 18px;line-height: 28px;}
    .textt h1{font-size: 28px;line-height: 36px;}
    .soziale{padding: 30px 0;}
    .leftww .daniel {
        margin-bottom: -5px;
    position: relative;
    right: 0;
    bottom: 0;
        width: 200px;}
    .social{width: 100%;margin-bottom: 20px;}
    .text2 h2{font-size: 20px;line-height: 32px;}
    .social .fab{float: left;font-size: 46px;padding: 20px 0;margin-right: 20px;}
    .social h3{text-align: left;margin: 5px 0;}
    .social p{text-align: left;margin: 5px 0;}
    
}
@media only screen and (max-width: 620px) {
    .resc h2{text-align: left;}
    .tool{width: 100%;margin-right: 0%;text-align: left;}
    .tool .shopif{margin: 0;width: 76px;margin-right: 16px;float: left;}
    .web .shopif{margin: 0;}
    .web{width: 48%;margin-right: 4%;}
}