@import url(all.min.css);
@import url(normalize.css);
@import url(lightbox.min.css);
@import url(flickity.min.css);


/*ALLGEMEINE FORMATIERUNGEN ///////////////////////*/
* {
  box-sizing: border-box;
}

/*Beim Aktivieren(drücken und gedrückt halten) / Fokusieren von Formulareingabefeldern den Aktivierungsrahmen(gepunktete Outline) verwerfen/ausblenden*/
*:active,
*:focus{
  outline:0;
  outline:none;
}

body{
  margin:0;
  color: #202020;
  background: rgb(255, 255, 255);
  -webkit-font-smoothing: antialiased;
  font-family: 'Lato',sans-serif;
}

a{
  text-decoration: none;
  color: #fc5b46;
}


p{
  padding-top: 10px 5px 10px 5px;
  line-height:30px;
  font-size: 18px;
  width: 640px;
}

li{
  margin-bottom: 20px;
  margin-left: 20px;
  line-height:20px;
  font-size: 18px;
}

.halbe p{
  font-size: 18px;
  padding-bottom: 10px;
  line-height:30px;
  width: 87%;
  text-align: center;
}

h1{
  text-align: center;
  color:#fc5b46;
  margin: 0px 10px 5px 10px;
  font-size: 40px;
  }

  span.subtitle-h1{
    color: #000000;
    font-size: 20px;
    display: block;
    margin-top: 0px;
  }

h2{
  text-align: center;
  color:#fc5b46;
  font-size: 30px;
  margin-top: 25px;
  padding: 15px;
  }
  
  span.subtitle-h2{
    color: #000;
    font-size: 20px;
  }
  


h3{
  text-align: center;
  font-size: 25px;
  color:#fc5b46;
  margin-top: 25px;
  margin-bottom: 10px;
  padding: 15px;
}

span.subtitle-h3{
  color: #000;
  font-size: 20px;
}



ul,ol{
  padding:0;
  margin:0;
  list-style-type:none;
}


.center-block{
  text-align: center;
  margin: auto;
  font-size: 18px;
}


.center{
  text-align: center;
  margin: auto;
  padding-top: 20px;
}



.fa-circle-check{
  margin-right: 10px;
}


/* Adressbox*/
address{
  font-style: normal;/*italic voreingestellt*/
  padding:30px;
  color: #202020;
}


/*Innerbox ////////////////*/
.innerbox{
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  padding-top: 20px;
}

section .innerbox{
  padding: 50px 2%;
}

footer .innerbox{
  padding:30px 2%;
}

.innerbox img{
  width: 100%;
  border-radius: 30px;
  }
  
  .impressum{
    padding-left: 25px;
    padding-right: 25px;
  }

.impressum .hero{
  margin-top:200px;
}

.impressum a{
  color: #202020;
}

.impressum figcaption{
  font-size: 12px;
  color: #c4c4c4;
}

.impressum .innerbox{
  padding-top: 0px;
}

.datenschutz{
  max-width: 640px;
  margin: auto;
  text-align: left;
}

.innerbox .datenschutz{
  padding-top: 0px;
}

#datenschutz .innerbox{
  padding-top: 0px;
}

.datenschutz a{
  color: #202020;
}


.datenschutz .hero{
  margin-top:200px;
}

.datenschutz figcaption{
  font-size: 12px;
  color: #c4c4c4;
}



/*////////////STARTSEITE/////////////////////////*/


/*services Mein Konzept für ganzheitliches Content Marketing  ///////////////////////////////////*/
#services{
  background-image: linear-gradient(to right, #f5be31, #f57f31, #fc5b46, #f34f6a, #e43aa9);
  border-radius: 15% 0% 15% 0%;
 margin-top: 80px;
 margin-bottom: 0px;
 overflow: hidden;
}

#services h2{
  color: white;
 }

.fa-stack{
  padding-top: 40px;
  padding-bottom: 20px;
}

#what-i-do h3{
  padding-top: 40px;
}

#services .drittel{
  float: left;
  width: 30%;
  border-radius: 20px;
 text-align: center;
 background:#fff;
 padding: 20px;
 margin-top: 20px; 
 margin-bottom: 13px;
 margin-right: 15px;
 margin-left: 15px;
}


#services .drittel:last-child{
 margin-right: 10px;
}

#services h2{
  margin-bottom: 10px;
  text-align: center;
}


#services .drittel h3{
  padding: 40px 0px 0px 0px;
  text-align: center;
}

#services .drittel .center-block{
  padding:0px;
  text-align: center;
}


#services .drittel p{
  padding-bottom: 1em;
  line-height:30px;
  font-size: 18px;
  width: 95%;
  text-align: center;
}

#services .drittel:hover{
  -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
  -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
  box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
}

#fa-circle{
  color:#ff6048;
}

.fa-circle-check{
  color: #ff6048;
}


/*Section ID Schritte: So erreichen Inhalte Ihre Zielgruppe über die Suchmaschine*/

figcaption{
  text-align: center;
  font-size: 12px;
  color: #c4c4c4;

}

figure{
  margin-bottom: 50px;
}

#schritt1{
  overflow: hidden;
  padding-left: 25px;
  padding-right: 25px;
} 

#schritt1 .zweidrittel{
  width: 70%;
  float: left;
}

#schritt1 .drittel{
  width: 20%;
  float: left;
}

#schritt2{
  overflow: hidden;
  padding-left: 25px;
  padding-right: 25px;
} 

#schritt2 .zweidrittel{
  width: 70%;
  float: left;
}

#schritt2 .drittel{
  width: 20%;
  float: left;
}


#schritt3{
  overflow: hidden;
  padding-left: 25px;
  padding-right: 25px;
} 

#schritt3 .zweidrittel{
  width: 70%;
  float: left;
}

#schritt3 .drittel{
  width: 20%;
  float: left;
}

#schritt1 h3, subtitle-h3{
  text-align: left;
  margin: 0px;
} 


#schritt2 h3, subtitle-h3{
  text-align: left;
  margin: 0px;
} 

#schritt3 h3, subtitle-h3{
  text-align: left;
  margin: 0px;
} 

/*Welche Webseiten kann ich für Sie optimieren?*/
/*Parallax-Effekt ///////////////////  */
.parallax-1{
  background:#9abcd2 url(/images/website-optimierung-freelance.jpg) no-repeat center center fixed;
  background-size: cover;
  border-radius: 15% 0% 15% 0%;
  padding-top:60px;
  padding-bottom:60px;
  text-align: center;
  margin-top: 60px;
  margin-bottom: 60px;
  overflow: hidden;
  }
  

  .text-on-parallax{ 
    text-align: center;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3%;
    padding: 20px;
    background: white;
    border-radius: 30px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  }

  .parallax-1 h2{
    display: block;
      color: #ff6048;
      margin: auto;
      font-size: 30px;
  }


  .parallax-1 .halbe{
    background-color: white;
    width:44%;
    float:left;
    border-radius: 30px;
    margin-left: 30px;
    }

.halbe{
  background-color: white;
  width:47%;
  float:left;
  margin: 3% 3% 1.5% 0%;
  padding: auto;
  border-radius: 30px;
  }

.parallax-1 .halbe:hover{
  -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
  -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
  box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
}


.parallax-1 .button-para{
  display:inline-block;
  border-radius: 20px;
  border: 2px solid white;
  background:#202020;
  color:#fff;
  font-weight: 700;
  font-size: 18px;
  padding: 20px 20px;
  margin: 30px;
  line-height: 30px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  }
  
    
    .button-para:hover{
      -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
      -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
      box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    }




/*schnellkontakt //////////////////////////*/
#schnellkontakt{
overflow: hidden;
 margin-top: 120px;
 margin-bottom: 100px;
 margin-left: 20px;
} 


#schnellkontakt h3{
  text-align: left;
} 

#schnellkontakt p{
  text-align: left;
  width: 100%;
} 


#schnellkontakt .innerbox{
  padding: 0px;
} 

#schnellkontakt .zweidrittel{
  width: 50%;
  float: left;
  margin-left: 5%;
  margin-right: 0%;
}

#schnellkontakt .drittel{
  width: 45%;
  float: left;
}


#schnellkontakt .button{
  background:#fc5b46;
  color:#fff;
  }

  #schnellkontakt figcaption{
    font-size: 12px;
    color: #c4c4c4;
  }


/*Footer - Formatierung*/
footer{
  background-color: #202020;
  overflow: hidden;
  max-width: none;
}


footer .rechtliches li{
display:inline;
margin-left: 30px;
}

footer .rechtliches li a{
  color:white;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  margin-right:40px;
  font-size: 18px;
  }

  footer .rechtliches li a:hover{
      color:#fc5b46;
      }


/*scroll-to-top */
#scroll-to-top{
  position:fixed;
  bottom:12px;
  right:15px;
  display:none;
  font-size:3em;
  background-color: #fc5b46;
  color:white;
  padding:5px 10px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#scroll-to-top:hover{
color: #202020;}


/*header + nav ////////////////*/
/*Schmale fixe Headerleiste*/

.nav1{
  background-image: linear-gradient(to right, #f5be31, #f57f31, #fc5b46, #f34f6a, #e43aa9);
  color: #fff;
 height: 55px;
 padding-top: 15px;
}

.nav1 ul li{
  display: inline;
  margin: 14px 10px 0px 10px;
  font-size: 20px;
}

.nav1 ul li a{
  color: white;
}


.nav1 ul li:nth-child(4){
  display: none;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  margin-top: 0;
}

.nav1 .innerbox{
  padding: 0px 0px 0px 22px;
}



/*Breite fixe Headerleiste*/
.main_h {
  background-color: #fff;
  position: fixed;
  top:0px;
  left:0;
  z-index: 999;
  width: 100%;
  border-bottom: 1px solid #bdbdbd;
  -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
  -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
  box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
  /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:255px;
  overflow: hidden;
  padding-top: 0px;
  padding-bottom: 0px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}

/*Nur in der mobilen Ansicht erscheint der toggle(Hamburger-Icon-Menu). Wenn man anklickt wird das navigation-menu auf/zu geklappt  und von der sichtbaren Anfangshöhe 70px wird die Höhe auf 400px erhöht
----wenn man auf das Hamburger Menü klickt öffnet sich ein höheres Menü und hier wird die Höhe angegeben, also die aufgeklappte Höhe, bei header main_h wird die Höhe zugeklappt angegeben*/
.open-nav {
  max-height: 700px !important;
}



.open-nav .mobile-toggle {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}


/* 
mobile-toggle
Generieren und Positionieren des Hamburger-Icons in der mobilen Ansicht
*/
.mobile-toggle {
  display: none;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingebledet*/
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  left: 22px;
  top: 135px;
  width: 30px;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  -ms-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
}

.mobile-toggle span {
  width: 50px;
  height: 8px;
  margin-bottom: 8px;
  border-radius: 1000px;
  background: #fc5b46;
  display: block;
}


/*navigation ///*/
nav {
  float: left;
  margin-top: 60px;
}

nav ul {
  text-align: left;
}

nav ul li {
  display: inline;
  line-height: 30px;
  margin-right: 25px;
}

nav ul li:first-child {
  margin-left: 50px;
}

nav ul li a {
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}


nav ul li a:hover,
#aktiv{ 
  color: #fc5b46;
}

.fa{
  margin-right: 7px;
  margin-bottom: 15px;
}


/*Logo im Header*/
.logo {
  float: right;
  display:inline-block;
  width:463px;
  height:150px;
  background: url(/images/logo-seo-content-marketing-by-zofia-martinez.png) no-repeat;
}


/* Hero-Großbild-Bereich //////////*/
.hero{
  display: block;
  margin-top: 240px;
  border-radius: 0% 0% 20% 0%;
  
}

.button{
  display:inline-block;
  border-radius: 20px;
  border: 2px solid white;
  background:#fc5b46;
  color:#fff;
  font-weight: 700;
  font-size: 18px;
  padding: 10px 20px;
  margin: 10px 5px 25px 5px;
  line-height: 30px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  }
  
    
    .button:hover{
      -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
      -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
      box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    }


/*////////////ÜBER MICH/////////////////////////*/


/*Section - Formatierung*/
/*about ///////////////////////////////////*/
      /*skill-bars*/
      #skill-bars{
          max-width: 470px;
          margin: 0 auto;
          position: relative;
          padding: 20px;
      }

      label {
        display: inline-block;
        margin-bottom: 5px;
        font-weight: 700;
        color: #777;
        letter-spacing: 2px;
        font-size:0.7em;
      }

      .progress {
        height: 4px;
        margin-bottom: 20px;
        background-color: #f5f5f5;
      }

      .progress-bar {
        width: 0;
        height: 100%;
        line-height: 20px;
        background-color:  #f57f31;
      }



  .ueber-mich{
    overflow: hidden;
   margin-top: 0px;
   margin-bottom: 10px;
  } 
  
  #ueber-mich-cv h1{
    text-align: center;
    margin-top: 250px;
  }

  #cv .innerbox{
    margin-top: 0px;
    padding-top: 0px;
  }
  
  #cv h1{
    margin-top: 0px;
    padding-top: 0px;
  }
  
  .ueber-mich .row{
    margin-bottom: 30px;
    margin-top: 0px;
    padding-top: 0px;
    overflow: hidden;
  } 
  
  .ueber-mich h1{
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
    display: block;
    text-align: center;
  } 
  
  .ueber-mich p{
    margin-bottom:60px;
  }
  
  .ueber-mich .innerbox{
    text-align: left;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
    display: block;
  } 
  
  .ueber-mich h2{
    margin-bottom: 10px;
    padding-top: 30px;
    color: #7f7f7f;
  } 

  .ueber-mich h3{
    text-align: center;
    margin-bottom: 0px;
    margin-top: 0px;
    display: block;
  } 

  .ueber-mich small{
    text-align: center;
    margin-bottom: 0px;
    margin-top: 5px;
    display: block;
  } 
  
  .ueber-mich h3{
    text-align: center;
    margin-bottom: 0px;
    margin-top: 25px;
    color: #fc5b46;
    display: block;
  } 


  .ueber-mich h4{
    text-align: center;
    margin-bottom: 0px;
    margin-top: 10px;
    color: #fc5b46;
    display: block;
  } 
  
  .ueber-mich p{
    text-align: center;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 3px;
    padding-left: 80px;
    padding-right: 80px;
  } 
  
  .ueber-mich li{
    text-align: left;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 15px;
    margin-left: 30px;
    padding-right: 20px;
  } 
  
  
  .ueber-mich .innerbox{
    margin-top: 0px;
    padding: 0px;
    max-width: 80%;
  } 
  
  .ueber-mich .zweidrittel{
    width: 100%;
    float: left;
    margin-left: 0;
    padding: 10px 20px 30px 20px;
  }
  
  .zweidrittel ul{
    margin-top: 20px;
    padding-left:0px;
  }

  
  .ueber-mich .drittel{
    width: 100%;
    padding: 10px 20px 30px 20px;
    float: right;
  }
  
  
  .ueber-mich .button{
    background:#fc5b46;
    color:#fff;
    margin-top: 20px;
    display: inline-block;
    position: relative;
    left: 48.4%; 
    transform: translateX(-48.4%);
    }
  
   .ueber-mich figure{
      margin: auto;
      width: 60%;
      margin-top: 13%;
    }
  
  
    .ueber-mich figcaption{
      font-size: 12px;
      color: #c4c4c4;
      text-align: center;
    }
  
  
    .ueber-mich .fa-solid{
      margin-right: 10px;
    }



/*////////////SERVICES/////////////////////////*/
#dienstleistungen section .innerbox{
  padding: 0px 0px 50px 0px;
}

#what-i-do{
  background:#f9f9f9; 
 }

 #what-i-do .drittel{
  padding: 5px;
  margin-top: 40px;
  text-align: center;
  background:#fff;
  border:1px solid #eee;
 }

 #what-i-do .drittel p{
  padding: 5px;
  width: auto;
 }

 #what-i-do h1{
  margin-top: 50px;
  padding-top: 0px;
 }
 

.row{
  overflow:hidden;
  /*display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;*/
}

#what-i-do .halbe{
width:47%;
float:left;
margin-right:6%;
}

#what-i-do .drittel{
  width:29.333%;
  float:left;
  margin-right:3%;
  /*display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex;*/
  }

  #what-i-do .zweidrittel{
    width:64.666%;
    float:left;
    margin-right:3%;
  }

  #what-i-do .ganze{
    width:100%;
    float:left;
    margin-bottom: 20px;
  }

/*letztes Element einer Reiche des Aussenabstand verwerfen*/
.halbe:last-child,
.drittel:last-child,
.zweidrittel:last-child{
  margin-right:0;
}

 #what-i-do .drittel{
  text-align: center;
  background:#fff;
  padding:2em;
  border:1px solid #eee;
 }
 
 
 .iconbox{
   background: #fc5b46;
   width:80px;
   height:80px;
   display:inline-block;
   padding-top:14px;
   transform:rotate(45deg);
   margin:1em 0;
   -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
 }
 
 
 .drittel:hover .iconbox{
   background: #fc5b46;
   border-radius: 50%;
 }
 
 
 .iconbox i{
   font-size:3em;
   color:#fff;
   transform:rotate(-45deg);
   -webkit-transition: all 0.5s ease-in-out 0.5s;
   -moz-transition: all 0.5s ease-in-out 0.5s;
   -ms-transition: all 0.5s ease-in-out 0.5s;
   -o-transition: all 0.5s ease-in-out 0.5s;
   transition: all 0.5s ease-in-out 0.5s;
 }
  

 #flex-container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.panel .panel-test2 h3{
  display: block;
}

.panel-test2 {
 display: -webkit-flex; 
 display: -ms-flexbox; 
 display: flex;

 width: 30%;
 padding: 20px;
 float: left;
 margin: 10px;
 border: 1px solid #aaa;
}

/*////////////ÜBERSETZUNGEN/////////////////////////*/ 

#uebersetzer .hero{
  display: block;
  margin-top: 186px;
}

/*////////////PORTFOLIO/////////////////////////*/
/*.sprung{
  visibility: hidden; 
  height: 0px !important; 
  position: absolute; 
  margin: -600px;}*/

.portfolio{
  margin-top: 0px;
  }

  .portfolio .innerbox{
    margin-top: 0px;
    padding-top: 0px;
    }

    .portfolio h1{
      margin-top: 0px;
      }
  
      .portfolio figure{
        margin-bottom: 40px;
        }


        .portfolio h2{
          margin-top: 50px;
          }

  .innerbox img{
    width: 100%;
    border-radius: 0px;
    margin-bottom: 0px;
    }
    

    #work .innerbox{
      max-width: 100%;
      padding: 0 0;
    }
  
  ul#workliste{
      overflow: hidden;
      }
      
      ul#workliste li{
      float:left;
      width:25%;
      margin-bottom: 0;
      margin-left: 0;
      line-height: 0;
      }
      
      
      ul#workliste li img{
      width:100%;
      }
   

      ul#workliste figure{
      line-height: 0;
      position:relative;
      margin: 0px;
      }
      
      ul#workliste figcaption{
      line-height: 1.5;
      background:rgba(0,0,0,0.7);
      position:absolute;
      left:0;
      right:0;
      top:0;
      bottom:0;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      opacity:0.8;
      }
      
      ul#workliste figure:hover figcaption{
        opacity:0;
        }
      
      
      .figcaptionbox{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        text-align: center;
        color:#fff;
      }
      
      .projekt{
            display:block;
            color:#000;
            background:#fff;
            padding:3px 30px;
            margin-bottom:5px;
            transform:translateY(-0px);
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
            opacity:1;
            -webkit-transform:translateY(-0px);
            -moz-transform:translateY(-0px);
            -ms-transform:translateY(-0px);
            -o-transform:translateY(-0px);
      }
      .kategorie{
        display:block;
        transform:translateY(0px);
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        opacity:1;
      }
      
      ul#workliste figcaption:hover .projekt{
        transform:translateY(0px);
        opacity:1;
      }
      ul#workliste figcaption:hover .kategorie{
        transform:translateY(0px);
        opacity:1;
      }







/*KONTAKT //////////////////////////////*/
#kontakt h1{
  text-align: left;
  color:#fc5b46;
  margin: 0px 0px 5px 0px;
  font-size: 40px;
  margin-top: 186px;
  }


label{
  font-weight: 700;
  font-size: 20px;
}


.erfolgsstatus{
  margin-top: 0px;
  color: #fc5b46;
}

/*BREAKPOINTS//////////////////////////*/

/*Print-Optimierung erstellen*/
@media only print{
  body{
    /*display: none; --> verhindert das ausdrucken, manche Elemente werden nicht ausgedruckt*/
    font-size: 12pt;/*entspricht 16px*/
    background: #fff;
    color: #000;
  }
  
  .hero{
    display: none;
  }

  figure{
    margin-bottom: 20px;
  }

  figcaption{
    display: none;
  }

  #what-i-do .drittel{
    margin: 0px;
    padding: 0px;
    border: 0px;
  }

  #what-i-do{
    background: #fff;
  }

.drittel{
  width: 32%;
  float: left;
  margin: 5px;
  padding: 0px;
}
  .non-print{
    display: none;
  }

  p{
    line-height: 18px;
  }


  #ueber-mich-cv h1{
    text-align: center;
    margin-top: 20px;
  }

      #skill-bars{
          max-width: 470px;
          margin: 0 auto;
          position: relative;
          padding: 10px 10px 5px 10px;
      }


  header,footer{
    display: none;
  }

  .ueber-mich .button{
    display: none;
    }

  #scroll-to-top{
    display: none;
  }
  
    .halbe{
      width:47%;
      float:left;
      margin-right:3%;
      }

      #dienstleistungen h1{
        margin-top: 20px;
        font-size: 30px;
      }

      h3{
        text-align: center;
        font-size: 25px;
        color:#fc5b46;
        margin-top: 5px;
        margin-bottom: 10px;
      }

      .halbe h3{
        margin-bottom: 0;
        padding-left: 0px;
        padding-right: 15px;
        padding-bottom: 5px;
        text-align: left;
      }

      .ueber-mich h3{
        margin-top: 20px;
      }

      .ueber-mich .row{
        border: none;
        border-radius: 30px;
        margin-bottom: 30px;
        margin-top: 0px;
        padding-top: 0px;
        overflow: hidden;
      } 

      .ueber-mich .zweidrittel{
        width: 100%;
        float: left;
        margin: 0;
        padding: 0px;
      }


      .ueber-mich p{
        text-align: center;
        width: 100%;
        margin-top: 0px;
        margin-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
      } 


      #scroll-to-top{
        display: none;
      }

      #schnellkontakt{
        display: none;
      }

  /*Print-Logo einblenden*/
  #print-logo{
    display: inherit;
  }
  
  #what-i-do:after{ 
    content: "Vielen Dank, dass Sie meine Inhalte ausgedruckt haben. Möchten Sie mehr erfahren oder haben Sie Fragen? Dann senden Sie mir eine E-Mail an zm@seo-content-marketing.shop oder rufen Sie mich an unter +49 176 4578 5408. Ich freue mich auf Ihre Anfrage.";
    }

    #ueber-mich-cv:after{ 
      content: "Vielen Dank, dass Sie meine Inhalte ausgedruckt haben. Möchten Sie mehr erfahren oder haben Sie Fragen? Dann senden Sie mir eine E-Mail an zm@seo-content-marketing.shop oder rufen Sie mich an unter +49 176 4578 5408. Ich freue mich auf Ihre Anfrage.";
      }

      

#schnellkontakt{
  display: none;
} 
  
  /*Seitenumbruch steuern*/
  .seitenumbruch-davor{
  page-break-before: always;
  }
  
  .seitenumbruch-danach{
    page-break-after: always;
  }
  
  
  }
  /*Ende Print-Optimierung erstellen*/

@media only screen and (max-width: 2400px) {
  #what-i-do .drittel{
    padding: 5px;
    margin-top: 40px;
    text-align: center;
    background:#fff;
    border:1px solid #eee;
   }

nav ul li{
  margin-right: 0px;
}

}/*Ende Breakpoint max-width 2400px*/

@media only screen and (max-width: 1430px) {
  .logo {
    float: left;
    margin-left: 34%;
    display:inline-block;
    width:463px;
    height:150px;
    background: url(images/logo-seo-content-marketing-by-zofia-martinez.png) no-repeat;
  }

  
  nav {
    float: left;
    margin-top: 0px;   
  }


  nav ul {
    padding-top: 20px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 600px;
  }


  nav ul li{
    border-bottom: 1px solid #bebebe;
    width: 100%;
    margin-left: 90px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    display: block; /*Menüpunkte werden daurch untereinander angezeigt, ohne display block sind sie nebeneinander*/
  }

 
nav ul li:first-child {
  margin-left: 90px;
}

   /*Header zugeklappt*/
  .main_h {
    background-color: #fff;
    position: fixed;
    top:0px;
    left:0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:207px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
  }
    

  .mobile-toggle {
    display: inherit;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingeblendet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 22px;
    top: 110px;
    width: 30px;
  }

  #schnellkontakt .drittel{
    margin-top: 35px;
  }

}/*Ende Breakpoint max-width 1430px*/


@media only screen and (max-width: 1241px) {
  #what-i-do .drittel{
    padding: 5px;
    margin-top: 40px;
    text-align: center;
    background:#fff;
    border:1px solid #eee;
   }


   nav {
    float: left;
    margin-top: 0px;   
  }


  nav ul {
    padding-top: 20px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 600px;
  }


  nav ul li{
    border-bottom: 1px solid #bebebe;
    width: 100%;
    margin-left: 90px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    display: block; /*Menüpunkte werden daurch untereinander angezeigt, ohne display block sind sie nebeneinander*/
  }

 
nav ul li:first-child {
  margin-left: 90px;
}

   /*Header zugeklappt*/
  .main_h {
    background-color: #fff;
    position: fixed;
    top:0px;
    left:0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:207px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
  }
    

  .mobile-toggle {
    display: inherit;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingeblendet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 22px;
    top: 110px;
    width: 30px;
  }

  #schnellkontakt .drittel{
    margin-top: 35px;
  }

}/*Ende Breakpoint max-width 1241px*/


@media only screen and (max-width: 1172px) {
  .logo {
    float: left;
    margin-left: 30%;
    display:inline-block;
    width:463px;
    height:150px;
    background: url(images/logo-seo-content-marketing-by-zofia-martinez.png) no-repeat;
  }

  
  nav {
    float: left;
    margin-top: 0px;   
  }


  nav ul {
    padding-top: 20px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 500px;
  }


  nav ul li{
    border-bottom: 1px solid #bebebe;
    width: 100%;
    margin-left: 90px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    display: block; /*Menüpunkte werden daurch untereinander angezeigt, ohne display block sind sie nebeneinander*/
  }

 
nav ul li:first-child {
  margin-left: 90px;
}

   /*Header zugeklappt*/
  .main_h {
    background-color: #fff;
    position: fixed;
    top:0px;
    left:0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:207px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
  }
    

  .mobile-toggle {
    display: inherit;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingeblendet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 22px;
    top: 110px;
    width: 30px;
  }

  #schnellkontakt .drittel{
    margin-top: 35px;
  }

  #services .drittel{
    float: left;
    width: 60%;
    border-radius: 20px;
   text-align: center;
   background:#fff;
   padding-top: 2em;
   padding-bottom: 2em;
   margin-top: 20px; 
   margin-bottom: 20px;
   margin-right: 35px;
   margin-left: 20%;
  }
  
  
  #services .drittel:last-child{
   margin-right: 0px;
   margin-bottom: 90px;
  }

}/*Ende Breakpoint max-width 1172px*/

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


  .ueber-mich p{
    text-align: center;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
  } 


  ul#workliste li{
    width:50%;
    border: 4px solid white;
  }

  .logo {
    float: left;
    margin-left: 24%;
    display:inline-block;
    width:463px;
    height:150px;
    background: url(images/logo-seo-content-marketing-by-zofia-martinez.png) no-repeat;
  }

  .nav1 ul li{
    display: inline;
    font-size: 16px;
    padding-bottom: 5px;
  }

  .nav1 ul li:first-child{
    display: none;
  }


  .nav1 ul li:nth-child(2){
    display: none;
  }

  .nav1 ul li:nth-child(3){
    display: none;
  }


  .nav1 ul li:nth-child(4){
    display: inherit;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    margin-top: 0;
  }

  nav {
    float: left;
    margin-top: 0px;   
  }


  nav ul {
    padding-top: 0px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }


  nav ul li{
    border-bottom: 1px solid #bebebe;
    width: 100%;
    margin-left: 90px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    display: block; /*Menüpunkte werden daurch untereinander angezeigt, ohne display block sind sie nebeneinander*/
  }

 
nav ul li:first-child {
  margin-left: 90px;
}

   /*Header zugeklappt*/
  .main_h {
    background-color: #fff;
    position: fixed;
    top:0px;
    left:0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:207px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
  }
    

  .mobile-toggle {
    display: inherit;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingeblendet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 22px;
    top: 110px;
    width: 30px;
  }


  

  #services .drittel{
    float: left;
    width: 60%;
    border-radius: 20px;
   text-align: center;
   background:#fff;
   padding-top: 2em;
   padding-bottom: 2em;
   margin-top: 20px; 
   margin-bottom: 20px;
   margin-right: 35px;
   margin-left: 20%;
  }
  
  
  #services .drittel:last-child{
   margin-right: 0px;
   margin-bottom: 90px;
  }


#schnellkontakt .drittel{
  margin-top: 35px;
}


}/*Ende Breakpoint max-width 922px*/


@media only screen and (max-width: 815px) {
  ul#workliste li{
    width:50%;
    border: 4px solid white;
  }

  .logo {
    float: left;
    margin-left: 22%;
    display:inline-block;
    width:463px;
    height:150px;
    background: url(images/logo-seo-content-marketing-by-zofia-martinez.png) no-repeat;
  }

  .nav1 ul li{
    display: inline;
    font-size: 18px;
    padding-bottom: 5px;
  }

  
  .nav1 ul li:first-child{
    display: none;
  }

  nav {
    float: left;
    margin-top: 0px;   
  }


  nav ul {
    padding-top: 20px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 500px;
  }


  nav ul li{
    border-bottom: 1px solid #bebebe;
    width: 100%;
    margin-left: 90px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    display: block; /*Menüpunkte werden daurch untereinander angezeigt, ohne display block sind sie nebeneinander*/
  }

 
nav ul li:first-child {
  margin-left: 90px;
}

   /*Header zugeklappt*/
  .main_h {
    background-color: #fff;
    position: fixed;
    top:0px;
    left:0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:207px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }
    

  .mobile-toggle {
    display: inherit;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingeblendet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 22px;
    top: 110px;
    width: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
  }


  
#services .drittel{
  float: left;
  width: 60%;
  border-radius: 20px;
 text-align: center;
 background:#fff;
 padding-top: 2em;
 padding-bottom: 2em;
 margin-top: 20px; 
 margin-bottom: 20px;
 margin-right: 35px;
 margin-left: 20%;
}


#services .drittel:last-child{
 margin-right: 0px;
 margin-bottom: 90px;
}


  .parallax-1 .halbe{
    background-color: white;
    padding: 20px 10px 30px 20px;
    margin: 20px 10px 30px 20px;
    border-radius: 30px;
    width:70%;
    float:left;
  }
  
    #schnellkontakt .drittel{
    margin-top: 50px;
  }

  #schnellkontakt .button{
    background:#fc5b46;
    color:#fff;
    margin-left: 0%;
    }

}/*Ende Breakpoint max-width 815px*/


@media only screen and (max-width: 770px) {
  ul#workliste li{
    width:50%;
    border: 4px solid white;
  }

  .logo {
    float: left;
    margin-left: 23%;
    display:inline-block;
    width:463px;
    height:150px;
    background: url(images/logo-seo-content-marketing-by-zofia-martinez.png) no-repeat;
  }


  .nav1 ul li{
    display: inline;
    font-size: 18px;
    padding-bottom: 5px;
  }

  .nav1 ul li:first-child{
    display: none;
  }

  nav {
    float: left;
    margin-top: 0px;   
  }


  nav ul {
    padding-top: 50px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }


  nav ul li{
    border-bottom: 1px solid #bebebe;
    width: 100%;
    margin-left: 90px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    display: block; /*Menüpunkte werden daurch untereinander angezeigt, ohne display block sind sie nebeneinander*/
  }

 
nav ul li:first-child {
  margin-left: 90px;
}

   /*Header zugeklappt*/
  .main_h {
    background-color: #fff;
    position: fixed;
    top:0px;
    left:0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:207px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }
    

  .mobile-toggle {
    display: inherit;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingeblendet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 22px;
    top: 110px;
    width: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
  }


  
#services .drittel{
  float: left;
  width: 60%;
  border-radius: 20px;
 text-align: center;
 background:#fff;
 padding-top: 2em;
 padding-bottom: 2em;
 margin-top: 20px; 
 margin-bottom: 20px;
 margin-right: 35px;
 margin-left: 20%;
}


#services .drittel:last-child{
 margin-right: 0px;
 margin-bottom: 90px;
}


  #schritt1 .drittel{
    margin-top: 35px;
    margin-left: 30px;
  }

  #schritt2 .drittel{
    margin-top: 27px;
  }


#schritt3 .drittel{
  margin-left: 35px;
  margin-top: 27px;
}

  .parallax-1 .halbe{
    background-color: white;
    padding: 20px 10px 30px 20px;
    margin: 20px 10px 30px 20px;
    border-radius: 30px;
    width:70%;
    float:left;
  }
  

  /*schnellkontakt //////////////////////////*/
#schnellkontakt{
  overflow: hidden;
 margin-top: 100px;
 margin-bottom: 100px;
} 

#schnellkontakt h3{
  text-align: left;
} 

#schnellkontakt p{
  text-align: left;
  width: 100%;
  margin-bottom: 10px;
} 


#schnellkontakt .innerbox{
  padding: 0px;
} 

#schnellkontakt .zweidrittel{
  width: 55%;
  float: left;
  margin-left: 5%;
  margin-right: 0%;
}

#schnellkontakt .drittel{
  width: 40%;
  float: left;
  margin-top: 50px;
}


#schnellkontakt .button{
  background:#fc5b46;
  color:#fff;
  margin-top: 0px;
  }


}/*Ende Breakpoint max-width 770px*/


@media only screen and (max-width: 710px) {
  ul#workliste li{
    width:50%;
    border: 4px solid white;
  }

  .logo {
    float: left;
    margin-left: 20%;
    display:inline-block;
    width:463px;
    height:150px;
    background: url(images/logo-seo-content-marketing-by-zofia-martinez.png) no-repeat;
  }


  h1{
    width: 70%;
    margin: auto;
  }

  .nav1 ul li{
    display: inline;
    font-size: 18px;
    padding-bottom: 5px;
  }

  .nav1 ul li:first-child{
    display: none;
  }

  nav {
    float: left;
    margin-top: 0px;   
  }


  nav ul {
    padding-top: 50px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }


  nav ul li{
    border-bottom: 1px solid #bebebe;
    width: 100%;
    margin-left: 90px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    display: block; /*Menüpunkte werden daurch untereinander angezeigt, ohne display block sind sie nebeneinander*/
  }

 
nav ul li:first-child {
  margin-left: 90px;
}

   /*Header zugeklappt*/
  .main_h {
    background-color: #fff;
    position: fixed;
    top:0px;
    left:0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:207px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }
    

  .mobile-toggle {
    display: inherit;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingeblendet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 22px;
    top: 110px;
    width: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
  }


  
#services .drittel{
  float: left;
  width: 80%;
  border-radius: 20px;
 text-align: center;
 background:#fff;
 padding-top: 20px;
 padding-bottom: 20px;
 margin-top: 20px; 
 margin-bottom: 20px;
 margin-right: 35px;
 margin-left: 50px;
}


#services .drittel:last-child{
 margin-right: 0px;
 margin-bottom: 80px;
}

  #schritt1 .drittel{
    width: 40%;
    margin-top: 50px;
    margin-left: 30%;
  }

  #schritt2 .drittel{
    width: 40%;
    margin-top: 50px;
    margin-left: 30%;
  }


#schritt3 .drittel{
  width: 40%;
  margin-top: 50px;
  margin-left: 30%;
}


  .parallax-1 .halbe{
    background-color: white;
    padding: 20px 10px 30px 20px;
    margin: 20px 10px 30px 20px;
    border-radius: 30px;
    width:70%;
    float:left;
  }
  
  #schnellkontakt .drittel{
    margin-top: 170px;
  }


/*schnellkontakt //////////////////////////*/
#schnellkontakt{
  overflow: hidden;
 margin-top: 100px;
 margin-bottom: 100px;
} 

#schnellkontakt h3{
  text-align: left;
} 

#schnellkontakt p{
  text-align: left;
  width: 100%;
  margin-bottom: 10px;
} 


#schnellkontakt .innerbox{
  padding: 0px;
} 

#schnellkontakt .zweidrittel{
  width: 100%;
  float: left;
  margin-left: 10px;
  margin-right: 0%;
}

#schnellkontakt .drittel{
  width: 100%;
  float: left;
  margin-top: 50px;
}


#schnellkontakt .button{
  background:#fc5b46;
  color:#fff;
  margin-top: 0px;
  }


}/*Ende Breakpoint max-width 710px*/


@media only screen and (max-width: 680px) {
  ul#workliste li{
    width:50%;
    border: 4px solid white;
  }

  p{
    padding: 15px;
    line-height:30px;
    font-size: 18px;
    width: 100%;
  }

  h1{
    width: 70%;
    padding: 15px;
    margin: auto;
  }

  .nav1 ul li{
    display: inline;
    font-size: 18px;
    padding-bottom: 5px;
  }

  .nav1 ul li:first-child{
    display: none;
  }


  .logo {
    float: left;
    margin-left: 17%;
    display:inline-block;
    width:463px;
    height:150px;
    background: url(images/logo-seo-content-marketing-by-zofia-martinez.png) no-repeat;
  }


  nav {
    float: left;
    margin-top: 0px;   
  }


  nav ul {
    padding-top: 50px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }


  nav ul li{
    border-bottom: 1px solid #bebebe;
    width: 100%;
    margin-left: 90px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    display: block; /*Menüpunkte werden daurch untereinander angezeigt, ohne display block sind sie nebeneinander*/
  }

 
nav ul li:first-child {
  margin-left: 90px;
}

   /*Header zugeklappt*/
  .main_h {
    background-color: #fff;
    position: fixed;
    top:0px;
    left:0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:207px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }
    

  .mobile-toggle {
    display: inherit;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingeblendet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 22px;
    top: 110px;
    width: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
  }

  .mobile-toggle span {
    width: 30px;
    height: 4px;
    margin-bottom: 6px;
    border-radius: 1000px;
    background: #fc5b46;
    display: block;
  }
  
#services .drittel{
  float: left;
  width: 70%;
  border-radius: 20px;
 text-align: center;
 background:#fff;
 padding-top: 2em;
 padding-bottom: 2em;
 margin-top: 20px; 
 margin-bottom: 20px;
 margin-right: 35px;
 margin-left: 13%;
}

#services .drittel:last-child{
  margin-right: 0px;
  margin-bottom: 80px;
 }
 
   #schritt1 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
   #schritt2 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
 
 #schritt3 .drittel{
   width: 40%;
   margin-top: 50px;
   margin-left: 30%;
 }

  .parallax-1 .halbe{
    background-color: white;
    padding: 20px 10px 30px 20px;
    margin: 20px 10px 30px 20px;
    border-radius: 30px;
    width:70%;
    float:left;
  }
  
  .halbe{
    width: 100%;
  }

/*schnellkontakt //////////////////////////*/
#schnellkontakt{
  overflow: hidden;
 margin-top: 100px;
 margin-bottom: 100px;
} 

#schnellkontakt h3{
  text-align: center;
} 

#schnellkontakt p{
  padding-top: 10px;
  padding-bottom: 10px;
  line-height:30px;
  font-size: 18px;
  margin: 10px 0px 10px 0px;
  width: 90%;
  text-align: center;
}


#schnellkontakt .innerbox{
  padding: 0px;
} 

#schnellkontakt .zweidrittel{
  width: 100%;
  float: left;
  margin-left: 5px;
  margin-right: 10px;
}

#schnellkontakt .drittel{
  width: 100%;
  float: left;
  margin-top: 0px;
}


#schnellkontakt .button{
  background:#fc5b46;
  color:#fff;
  margin-left: 13%;
  }


}/*Ende Breakpoint max-width 680px*/


@media only screen and (max-width: 605px) {
  #what-i-do .drittel{
    padding-top: 30px;
    margin-top: 40px;
    text-align: center;
    background:#fff;
    border:1px solid #eee;
    width: 100%;
   }


  ul#workliste li{
    width:50%;
    border: 4px solid white;
  }

  p{
    padding: 15px;
    line-height:30px;
    font-size: 18px;
    width: 100%;
  }

  h1{
    width: 70%;
    padding: 15px;
    margin: auto;
  }

  .nav1 ul li{
    display: inline;
    font-size: 16px;
    padding-bottom: 5px;
  }

  .nav1 ul li:first-child{
    display: none;
  }


  .logo {
    float: left;
    margin-left: 17%;
    display:inline-block;
    width:463px;
    height:150px;
    background: url(images/logo-seo-content-marketing-by-zofia-martinez.png) no-repeat;
  }


  nav {
    float: left;
    margin-top: 0px;   
  }


  nav ul {
    padding-top: 50px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }


  nav ul li{
    border-bottom: 1px solid #bebebe;
    width: 100%;
    margin-left: 90px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    display: block; /*Menüpunkte werden daurch untereinander angezeigt, ohne display block sind sie nebeneinander*/
  }

 
nav ul li:first-child {
  margin-left: 90px;
}

   /*Header zugeklappt*/
  .main_h {
    background-color: #fff;
    position: fixed;
    top:0px;
    left:0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:207px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }
    

  .mobile-toggle {
    display: inherit;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingeblendet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 22px;
    top: 110px;
    width: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
  }


  
#services .drittel{
  float: left;
  width: 70%;
  border-radius: 20px;
 text-align: center;
 background:#fff;
 padding-top: 2em;
 padding-bottom: 2em;
 margin-top: 20px; 
 margin-bottom: 20px;
 margin-right: 35px;
 margin-left: 13%;
}


#services .drittel:last-child{
 margin-right: 0px;
 margin-bottom: 90px;
}

#schritt1 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}


#schritt2 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}

#schritt3 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}



#services .drittel:last-child{
  margin-right: 0px;
  margin-bottom: 80px;
 }
 
   #schritt1 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
   #schritt2 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
 
 #schritt3 .drittel{
   width: 40%;
   margin-top: 50px;
   margin-left: 30%;
 }

figure{
  margin-bottom: 30px;
}

.parallax-1 .halbe{
  background-color: white;
  padding: 20px 10px 30px 20px;
  margin: 20px 10px 30px 20px;
  border-radius: 30px;
  width:90%;
  float:left;
}

  

/*schnellkontakt //////////////////////////*/
#schnellkontakt{
  overflow: hidden;
 margin-top: 100px;
 margin-bottom: 100px;
} 

#schnellkontakt h3{
  text-align: center;
} 

#schnellkontakt p{
  padding-top: 10px;
  padding-bottom: 10px;
  line-height:30px;
  font-size: 18px;
  margin: 10px 0px 10px 0px;
  width: 90%;
  text-align: center;
}


#schnellkontakt .innerbox{
  padding: 0px;
} 

#schnellkontakt .zweidrittel{
  width: 100%;
  float: left;
  margin-left: 5px;
  margin-right: 10px;
}

#schnellkontakt .drittel{
  width: 100%;
  float: left;
  margin-top: 0px;
}


#schnellkontakt .button{
  background:#fc5b46;
  color:#fff;
  margin-left: 13%;
  }


}/*Ende Breakpoint max-width 605px*/


@media only screen and (max-width: 580px) {
  #what-i-do .drittel{
    padding-top: 30px;
    margin-top: 40px;
    text-align: center;
    background:#fff;
    border:1px solid #eee;
    width: 100%;
   }
  ul#workliste li{
    width:100%;
    border: 4px solid white;
  }

  p{
    padding: 15px;
    line-height:30px;
    font-size: 18px;
    width: 100%;
  }

  h1{
    width: 70%;
    padding: 15px;
    margin: auto;
  }

  .nav1 ul li{
    display: inline;
    font-size: 16px;
    padding-bottom: 5px;
  }

  .nav1 ul li:first-child{
    display: none;
  }


  .logo {
    float: left;
    margin-left: 17%;
    display:inline-block;
    width:463px;
    height:150px;
    background: url(images/logo-seo-content-marketing-by-zofia-martinez.png) no-repeat;
  }


  nav {
    float: left;
    margin-top: 0px;   
  }


  nav ul {
    padding-top: 50px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }


  nav ul li{
    border-bottom: 1px solid #bebebe;
    width: 100%;
    margin-left: 90px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    display: block; /*Menüpunkte werden daurch untereinander angezeigt, ohne display block sind sie nebeneinander*/
  }

 
nav ul li:first-child {
  margin-left: 90px;
}

   /*Header zugeklappt*/
  .main_h {
    background-color: #fff;
    position: fixed;
    top:0px;
    left:0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:207px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }
    

  .mobile-toggle {
    display: inherit;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingeblendet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 22px;
    top: 110px;
    width: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
  }


  
#services .drittel{
  float: left;
  width: 70%;
  border-radius: 20px;
 text-align: center;
 background:#fff;
 padding-top: 2em;
 padding-bottom: 2em;
 margin-top: 20px; 
 margin-bottom: 20px;
 margin-right: 35px;
 margin-left: 13%;
}


#services .drittel:last-child{
 margin-right: 0px;
 margin-bottom: 90px;
}

#schritt1 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}


#schritt2 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}

#schritt3 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}



#services .drittel:last-child{
  margin-right: 0px;
  margin-bottom: 80px;
 }
 
   #schritt1 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
   #schritt2 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
 
 #schritt3 .drittel{
   width: 40%;
   margin-top: 50px;
   margin-left: 30%;
 }


.parallax-1 .halbe{
  background-color: white;
  padding: 20px 10px 30px 20px;
  margin: 20px 10px 30px 20px;
  border-radius: 30px;
  width:90%;
  float:left;
}

  
  h2{
    width: 90%;
    margin: auto;
  }
/*schnellkontakt //////////////////////////*/
#schnellkontakt{
  overflow: hidden;
 margin-top: 100px;
 margin-bottom: 100px;
} 

#schnellkontakt h3{
  text-align: center;
  padding-right: 20px;
} 

#schnellkontakt p{
  padding-top: 10px;
  padding-bottom: 10px;
  line-height:30px;
  font-size: 18px;
  margin: 10px 0px 10px 0px;
  width: 90%;
  text-align: center;
}

#schnellkontakt .innerbox{
  padding: 0px;
} 

#schnellkontakt .zweidrittel{
  width: 100%;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}

#schnellkontakt .drittel{
  width: 100%;
  float: left;
  margin-top: 0px;
}


#schnellkontakt .button{
  background:#fc5b46;
  color:#fff;
  margin-left: 9%;
  }



}/*Ende Breakpoint max-width 580px*/


@media only screen and (max-width: 555px) {
  #what-i-do .drittel{
    padding-top: 30px;
    margin-top: 40px;
    text-align: center;
    background:#fff;
    border:1px solid #eee;
    width: 100%;
   }

  ul#workliste li{
    width:100%;
    border: 4px solid white;
  }

  p{
    padding: 15px;
    line-height:30px;
    font-size: 18px;
    width: 100%;
  }

  h1{
    width: 70%;
    padding: 15px;
    margin: auto;
  }

  .nav1 ul li{
    display: inline;
    font-size: 16px;
    padding-bottom: 5px;
  }

  .nav1 ul li:first-child{
    display: none;
  }


  .logo {
    float: left;
    margin-left: 21%;
    margin-top: 5%;
    display:inline-block;
    width:360px;
    height:100px;
    background: url(images/logo-seo-content-marketing-by-zofia-martinez-mobile.png) no-repeat;
  }


  nav {
    float: left;
    margin-top: 0px;   
  }


  nav ul {
    padding-top: 50px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }


  nav ul li{
    border-bottom: 1px solid #bebebe;
    width: 100%;
    margin-left: 90px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    display: block; /*Menüpunkte werden daurch untereinander angezeigt, ohne display block sind sie nebeneinander*/
  }

 
nav ul li:first-child {
  margin-left: 90px;
}

   /*Header zugeklappt*/
  .main_h {
    background-color: #fff;
    position: fixed;
    top:0px;
    left:0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:207px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }
    

  .mobile-toggle {
    display: inherit;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingeblendet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 22px;
    top: 110px;
    width: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
  }

  .mobile-toggle span {
    width: 30px;
    height: 4px;
    margin-bottom: 6px;
    border-radius: 1000px;
    background: #fc5b46;
    display: block;
  }
  
  p{
    padding: 15px;
    line-height:30px;
    font-size: 18px;
    width: 100%;
  }

  h1{
    width: 70%;
    padding: 15px;
    margin: auto;
  }


#services .drittel{
  float: left;
  width: 70%;
  border-radius: 20px;
 text-align: center;
 background:#fff;
 padding-top: 2em;
 padding-bottom: 2em;
 margin-top: 20px; 
 margin-bottom: 20px;
 margin-right: 35px;
 margin-left: 13%;
}


#services .drittel:last-child{
 margin-right: 0px;
 margin-bottom: 90px;
}

#schritt1 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}


#schritt2 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}

#schritt3 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}


#services .drittel:last-child{
  margin-right: 0px;
  margin-bottom: 80px;
 }
 
   #schritt1 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
   #schritt2 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
 
 #schritt3 .drittel{
   width: 40%;
   margin-top: 50px;
   margin-left: 30%;
 }

.parallax-1 .halbe{
  background-color: white;
  padding: 20px 10px 30px 20px;
  margin: 20px 10px 30px 20px;
  border-radius: 30px;
  width:90%;
  float:left;
}

  h2{
    width: 70%;
    padding: 15px;
    margin: auto;
  }

/*schnellkontakt //////////////////////////*/
#schnellkontakt{
  overflow: hidden;
 margin-top: 100px;
 margin-bottom: 100px;
} 

#schnellkontakt h3{
  text-align: center;
  padding-right: 20px;
} 

#schnellkontakt p{
  padding-top: 10px;
  padding-bottom: 10px;
  line-height:30px;
  font-size: 18px;
  margin: 10px 0px 10px 0px;
  width: 90%;
  text-align: center;
}

#schnellkontakt .innerbox{
  padding: 0px;
} 

#schnellkontakt .zweidrittel{
  width: 100%;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}

#schnellkontakt .drittel{
  width: 100%;
  float: left;
  margin-top: 0px;
}


#schnellkontakt .button{
  background:#fc5b46;
  color:#fff;
  margin-left: 9%;
  }

}/*Ende Breakpoint max-width 555px*/


@media only screen and (max-width: 522px) {
  #what-i-do .drittel{
    padding-top: 30px;
    margin-top: 40px;
    text-align: center;
    background:#fff;
    border:1px solid #eee;
    width: 100%;
   }

  ul#workliste li{
    width:100%;
    border: 4px solid white;
  }

  nav ul {
    padding-top: 50px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }

  .nav1 ul li{
    display: inline;
    font-size: 16px;
    padding-bottom: 5px;
  }


  .nav1 ul li{
    display: inline;
    font-size: 16px;
    padding-bottom: 5px;
  }

  .nav1 ul li:first-child{
    display: none;
  }


  .nav1 ul li:nth-child(2){
    display: none;
  }

  .nav1 ul li:nth-child(3){
    display: none;
  }


  .nav1 ul li:nth-child(4){
    display: inherit;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    margin-top: 0;
  }

  .logo {
    float: left;
    margin-left: 19%;
    margin-top: 5%;
    display:inline-block;
    width:360px;
    height:100px;
    background: url(images/logo-seo-content-marketing-by-zofia-martinez-mobile.png) no-repeat;
  }


  nav {
    float: left;
    margin-top: 0px;   
  }


  nav ul {
    padding-top: 50px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }


  nav ul li{
    border-bottom: 1px solid #bebebe;
    width: 100%;
    margin-left: 90px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    display: block; /*Menüpunkte werden daurch untereinander angezeigt, ohne display block sind sie nebeneinander*/
  }

 
nav ul li:first-child {
  margin-left: 90px;
}

   /*Header zugeklappt*/
  .main_h {
    background-color: #fff;
    position: fixed;
    top:0px;
    left:0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:207px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }
    

  .mobile-toggle {
    display: inherit;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingeblendet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 22px;
    top: 110px;
    width: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
  }

  .mobile-toggle span {
    width: 30px;
    height: 4px;
    margin-bottom: 6px;
    border-radius: 1000px;
    background: #fc5b46;
    display: block;
  }

  p{
    padding: 15px;
    line-height:30px;
    font-size: 18px;
    width: 100%;
  }

  h1{
    width: 70%;
    padding: 15px;
    margin: auto;
  }


#services .drittel{
  float: left;
  width: 70%;
  border-radius: 20px;
 text-align: center;
 background:#fff;
 padding-top: 2em;
 padding-bottom: 2em;
 margin-top: 20px; 
 margin-bottom: 20px;
 margin-right: 35px;
 margin-left: 13%;
}


#services .drittel:last-child{
 margin-right: 0px;
 margin-bottom: 90px;
}

#schritt1 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}


#schritt2 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}

#schritt3 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}


#services .drittel:last-child{
  margin-right: 0px;
  margin-bottom: 80px;
 }
 
   #schritt1 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
   #schritt2 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
 
 #schritt3 .drittel{
   width: 40%;
   margin-top: 50px;
   margin-left: 30%;
 }

  .parallax-1 .halbe{
    background-color: white;
    padding: 20px 10px 30px 20px;
    margin: 20px 10px 30px 20px;
    border-radius: 30px;
    width:90%;
    float:left;
  }
  
  h2{
    width: 90%;
    margin: auto;
  }

/*schnellkontakt //////////////////////////*/
#schnellkontakt{
  overflow: hidden;
 margin-top: 100px;
 margin-bottom: 100px;
} 

#schnellkontakt h3{
  text-align: center;
  padding-right: 20px;
} 

#schnellkontakt p{
  padding-top: 10px;
  padding-bottom: 10px;
  line-height:30px;
  font-size: 18px;
  margin: 10px 0px 10px 0px;
  width: 90%;
  text-align: center;
}

#schnellkontakt .innerbox{
  padding: 0px;
} 

#schnellkontakt .zweidrittel{
  width: 100%;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}

#schnellkontakt .drittel{
  width: 100%;
  float: left;
  margin-top: 0px;
}


#schnellkontakt .button{
  background:#fc5b46;
  color:#fff;
  margin-left: 9%;
  }


}/*Ende Breakpoint max-width 522px*/


@media only screen and (max-width: 460px) {
  #what-i-do .drittel{
    padding-top: 30px;
    margin-top: 40px;
    text-align: center;
    background:#fff;
    border:1px solid #eee;
    width: 100%;
   }

  ul#workliste li{
    width:100%;
    border: 4px solid white;
  }

  p{
    padding: 15px;
    line-height:30px;
    font-size: 18px;
    width: 100%;
  }

  h1{
    width: 70%;
    padding: 15px;
    margin: auto;
  }

  nav ul {
    padding-top: 50px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }


  .nav1 ul li{
    display: inline;
    font-size: 16px;
    padding-bottom: 5px;
  }

  .nav1 ul li:first-child{
    display: none;
  }


  .nav1 ul li:nth-child(2){
    display: none;
  }

  .nav1 ul li:nth-child(3){
    display: none;
  }


  .nav1 ul li:nth-child(4){
    display: inherit;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    margin-top: 0;
  }

  .logo {
    float: left;
    margin-left: 16%;
    margin-top: 5%;
    display:inline-block;
    width:360px;
    height:100px;
    background: url(images/logo-seo-content-marketing-by-zofia-martinez-mobile.png) no-repeat;
  }


  nav {
    float: left;
    margin-top: 0px;   
  }


  nav ul {
    padding-top: 30px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }


  nav ul li{
    border-bottom: 1px solid #bebebe;
    width: 100%;
    margin-left: 90px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    display: block; /*Menüpunkte werden daurch untereinander angezeigt, ohne display block sind sie nebeneinander*/
  }

 
nav ul li:first-child {
  margin-left: 90px;
}

   /*Header zugeklappt*/
  .main_h {
    background-color: #fff;
    position: fixed;
    top:0px;
    left:0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:207px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }
    

  .mobile-toggle {
    display: inherit;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingeblendet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 22px;
    top: 110px;
    width: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
  }

  .mobile-toggle span {
    width: 30px;
    height: 4px;
    margin-bottom: 6px;
    border-radius: 1000px;
    background: #fc5b46;
    display: block;
  }


#services .drittel{
  float: left;
  width: 80%;
  border-radius: 20px;
 text-align: center;
 background:#fff;
 padding-top: 2em;
 padding-bottom: 2em;
 margin-top: 20px; 
 margin-bottom: 20px;
 margin-right: 35px;
 margin-left: 9%;
}


#services .drittel:last-child{
 margin-right: 0px;
 margin-bottom: 90px;
}

#schritt1 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}


#schritt2 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}

#schritt3 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}


#services .drittel:last-child{
  margin-right: 0px;
  margin-bottom: 80px;
 }
 
   #schritt1 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
   #schritt2 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
 
 #schritt3 .drittel{
   width: 40%;
   margin-top: 50px;
   margin-left: 30%;
 }

  .parallax-1 .halbe{
    background-color: white;
    padding: 20px 10px 30px 20px;
    margin: 20px 10px 30px 20px;
    border-radius: 30px;
    width:90%;
    float:left;
  }
  
  h2{
    width: 90%;
    margin: auto;
  }

/*schnellkontakt //////////////////////////*/
#schnellkontakt{
  overflow: hidden;
 margin-top: 100px;
 margin-bottom: 100px;
} 

#schnellkontakt h3{
  text-align: center;
} 

#schnellkontakt p{
  padding-top: 10px;
  padding-bottom: 10px;
  line-height:30px;
  font-size: 18px;
  margin: 10px 0px 10px 0px;
  width: 90%;
  text-align: center;
}


#schnellkontakt .innerbox{
  padding: 0px;
} 

#schnellkontakt .zweidrittel{
  width: 100%;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}

#schnellkontakt .drittel{
  width: 100%;
  float: left;
  margin-top: 0px;
}


#schnellkontakt .button{
  background:#fc5b46;
  color:#fff;
  margin-left: 15px;
  margin-right: 5px;
  }


}/*Ende Breakpoint max-width 460px*/


@media only screen and (max-width: 430px) {
  #what-i-do .drittel{
    padding-top: 30px;
    margin-top: 40px;
    text-align: center;
    background:#fff;
    border:1px solid #eee;
    width: 100%;
   }

  ul#workliste li{
    width:100%;
    border: 4px solid white;
  }

  p{
    padding: 15px;
    line-height:30px;
    font-size: 18px;
    width: 100%;
  }

  h1{
    width: 70%;
    padding: 15px;
    margin: auto;
  }

  h1 span{
    width: 100%;
    margin: auto;
    padding-top: 10px;
  }

  nav ul {
    padding-top: 50px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }

  .nav1 ul li{
    display: inline;
    font-size: 16px;
    padding-bottom: 5px;
  }

  .nav1 ul li:first-child{
    display: none;
  }


  .nav1 ul li:nth-child(2){
    display: none;
  }

  .nav1 ul li:nth-child(3){
    display: none;
  }


  .nav1 ul li:nth-child(4){
    display: inherit;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    margin-top: 0;
  }

  .logo {
    float: left;
    margin-left: 24%;
    margin-top: 10%;
    display:inline-block;
    width:100%;
    height:100px;
    background: url(images/logo-seo-content-marketing-by-zofia-martinez-mobile.png) no-repeat;
  }


  nav {
    float: left;
    margin-top: 0px;   
  }


  nav ul {
    padding-top: 30px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }


  nav ul li{
    border-bottom: 1px solid #bebebe;
    width: 100%;
    margin-left: 90px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    display: block; /*Menüpunkte werden daurch untereinander angezeigt, ohne display block sind sie nebeneinander*/
  }

 
nav ul li:first-child {
  margin-left: 90px;
}

   /*Header zugeklappt*/
  .main_h {
    background-color: #fff;
    position: fixed;
    top:0px;
    left:0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:207px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }
    

  .mobile-toggle {
    display: inherit;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingeblendet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 10px;
    top: 110px;
    width: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
  }


  .mobile-toggle span {
    width: 30px;
    height: 4px;
    margin-bottom: 6px;
    border-radius: 1000px;
    background: #fc5b46;
    display: block;
  }


  
#services .drittel{
  float: left;
  width: 80%;
  border-radius: 20px;
 text-align: center;
 background:#fff;
 padding-top: 2em;
 padding-bottom: 2em;
 margin-top: 20px; 
 margin-bottom: 20px;
 margin-right: 35px;
 margin-left: 9%;
}


#services .drittel:last-child{
 margin-right: 0px;
 margin-bottom: 90px;
}

#schritt1 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}


#schritt2 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}

#schritt3 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}

#services .drittel:last-child{
  margin-right: 0px;
  margin-bottom: 80px;
 }
 
   #schritt1 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
   #schritt2 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
 
 #schritt3 .drittel{
   width: 40%;
   margin-top: 50px;
   margin-left: 30%;
 }

  .parallax-1 .halbe{
    background-color: white;
    padding: 20px 10px 30px 20px;
    margin: 20px 10px 30px 20px;
    border-radius: 30px;
    width:95%;
    float:left;
  }
  
  h2{
    width: 90%;
    margin: auto;
  }

/*schnellkontakt //////////////////////////*/
#schnellkontakt{
  overflow: hidden;
 margin-top: 100px;
 margin-bottom: 100px;
} 

#schnellkontakt h3{
  text-align: left;
} 

#schnellkontakt p{
  padding-top: 10px;
  padding-bottom: 10px;
  line-height:30px;
  font-size: 18px;
  margin: 10px 0px 10px 0px;
  width: 90%;
  text-align: left;
}


#schnellkontakt .innerbox{
  padding: 0px;
} 

#schnellkontakt .zweidrittel{
  width: 100%;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}

#schnellkontakt .drittel{
  width: 100%;
  float: left;
  margin-top: 0px;
  margin-bottom: 0px;
}


#schnellkontakt .button{
  background:#fc5b46;
  color:#fff;
  margin-left: 5px;
  margin-right: 5px;
  }


}/*Ende Breakpoint max-width 430px*/

@media only screen and (max-width: 430px) {
  #what-i-do .drittel{
    padding-top: 30px;
    margin-top: 40px;
    text-align: center;
    background:#fff;
    border:1px solid #eee;
    width: 100%;
   }

  ul#workliste li{
    width:100%;
    border: 4px solid white;
  }

  p{
    padding: 15px;
    line-height:30px;
    font-size: 18px;
    width: 100%;
  }

  h1{
    width: 70%;
    padding: 15px;
    margin: auto;
  }

  h1 span{
    width: 100%;
    margin: auto;
    padding-top: 10px;
  }

  nav ul {
    padding-top: 50px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }

  .nav1 ul li{
    display: inline;
    font-size: 16px;
    padding-bottom: 5px;
  }

  .nav1 ul li:first-child{
    display: none;
  }


  .nav1 ul li:nth-child(2){
    display: none;
  }

  .nav1 ul li:nth-child(3){
    display: none;
  }


  .nav1 ul li:nth-child(4){
    display: inherit;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    margin-top: 0;
  }

  .logo {
    float: left;
    display:inline-block;
    width:100%;
    background: url(images/logo-seo-content-marketing-shop-mobile-s.png) no-repeat;
  }

  nav {
    float: left;
    margin-top: 0px;   
  }


  nav ul {
    padding-top: 30px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }


  nav ul li{
    border-bottom: 1px solid #bebebe;
    width: 100%;
    margin-left: 90px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    display: block; /*Menüpunkte werden daurch untereinander angezeigt, ohne display block sind sie nebeneinander*/
  }

 
nav ul li:first-child {
  margin-left: 90px;
}

   /*Header zugeklappt*/
  .main_h {
    background-color: #fff;
    position: fixed;
    top:0px;
    left:0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:207px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }
    

  .mobile-toggle {
    display: inherit;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingeblendet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 10px;
    top: 110px;
    width: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
  }


  .mobile-toggle span {
    width: 30px;
    height: 4px;
    margin-bottom: 6px;
    border-radius: 1000px;
    background: #fc5b46;
    display: block;
  }

  
#services .drittel{
  float: left;
  width: 80%;
  border-radius: 20px;
 text-align: center;
 background:#fff;
 padding-top: 2em;
 padding-bottom: 2em;
 margin-top: 20px; 
 margin-bottom: 20px;
 margin-right: 35px;
 margin-left: 9%;
}


#services .drittel:last-child{
 margin-right: 0px;
 margin-bottom: 90px;
}


#schritt1 .innerbox{
  margin-top: 0px;
  padding-top: 20px;
}


#schritt2 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}

#schritt3 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}

#services .drittel:last-child{
  margin-right: 0px;
  margin-bottom: 80px;
 }
 
   #schritt1 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
   #schritt2 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
 
 #schritt3 .drittel{
   width: 40%;
   margin-top: 50px;
   margin-left: 30%;
 }

  .parallax-1 .halbe{
    background-color: white;
    padding: 10px 5px 10px 5px;
    margin: 20px;
    border-radius: 30px;
    width:91%;
    float:left;
  }
  
  h1{
    width: 90%;
    margin: auto;
  }

  h2{
    width: 90%;
    margin: auto;
  }

/*schnellkontakt //////////////////////////*/
#schnellkontakt{
  overflow: hidden;
 margin-top: 100px;
 margin-bottom: 100px;
} 

#schnellkontakt h3{
  text-align: left;
} 

#schnellkontakt p{
  padding-top: 10px;
  padding-bottom: 10px;
  line-height:30px;
  font-size: 18px;
  margin: 10px 0px 10px 0px;
  width: 90%;
  text-align: left;
}


#schnellkontakt .innerbox{
  padding: 0px;
} 

#schnellkontakt .zweidrittel{
  width: 100%;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}

#schnellkontakt .drittel{
  width: 100%;
  float: left;
  margin-top: 0px;
  margin-bottom: 0px;
}


#schnellkontakt .button{
  background:#fc5b46;
  color:#fff;
  margin-left: 5px;
  margin-right: 5px;
  }


}/*Ende Breakpoint max-width 430px*/


@media only screen and (max-width: 395px) {
  #what-i-do .drittel{
    padding-top: 30px;
    margin-top: 40px;
    text-align: center;
    background:#fff;
    border:1px solid #eee;
    width: 100%;
   }

  ul#workliste li{
    width:100%;
    border: 4px solid white;
  }

  p{
    padding: 15px;
    line-height:30px;
    font-size: 18px;
    width: 100%;
  }

  h1{
    width: 70%;
    padding: 15px;
    margin: auto;
  }

  h1 span{
    width: 100%;
    margin: auto;
    padding-top: 10px;
  }

  nav ul {
    padding-top: 50px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }

  .nav1 ul li{
    display: inline;
    font-size: 16px;
    padding-bottom: 5px;
  }

  .nav1 ul li:first-child{
    display: none;
  }


  .nav1 ul li:nth-child(2){
    display: none;
  }

  .nav1 ul li:nth-child(3){
    display: none;
  }


  .nav1 ul li:nth-child(4){
    display: inherit;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 5px;
  }

  .logo {
    float: left;
    display:inline-block;
    width:100%;
    background: url(images/logo-seo-content-marketing-shop-mobile-s.png) no-repeat;
  }

  nav {
    float: left;
    margin-top: 0px;   
  }


  nav ul {
    padding-top: 30px;
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
    text-align: left;
    width: 100%;
  }


  nav ul li{
    border-bottom: 1px solid #bebebe;
    width: 100%;
    margin-left: 90px;
    margin-right: 0px;
    margin-bottom: 15px;
    padding-bottom: 0px;
    display: block; /*Menüpunkte werden daurch untereinander angezeigt, ohne display block sind sie nebeneinander*/
  }

 
nav ul li:first-child {
  margin-left: 90px;
}

   /*Header zugeklappt*/
  .main_h {
    background-color: #fff;
    position: fixed;
    top:0px;
    left:0;
    z-index: 999;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
    -webkit-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 0px 11px 3px rgba(0, 0, 0, 0.65);
    /*fürdieAuf-Zu-Klapp-FunktiondesToggleswichtig*/max-height:207px;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }
    

  .mobile-toggle {
    display: inherit;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingeblendet*/
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 10px;
    top: 110px;
    width: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
  }


  .mobile-toggle span {
    width: 30px;
    height: 4px;
    margin-bottom: 6px;
    border-radius: 1000px;
    background: #fc5b46;
    display: block;
  }

  
#services .drittel{
  float: left;
  width: 80%;
  border-radius: 20px;
 text-align: center;
 background:#fff;
 padding-top: 2em;
 padding-bottom: 2em;
 margin-top: 20px; 
 margin-bottom: 20px;
 margin-right: 35px;
 margin-left: 9%;
}


#services .drittel:last-child{
 margin-right: 0px;
 margin-bottom: 90px;
}


#schritt1 .innerbox{
  margin-top: 0px;
  padding-top: 20px;
}


#schritt2 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}

#schritt3 .innerbox{
  margin-top: 0px;
  padding-top: 0px;
}

#services .drittel:last-child{
  margin-right: 0px;
  margin-bottom: 80px;
 }
 
   #schritt1 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
   #schritt2 .drittel{
     width: 40%;
     margin-top: 50px;
     margin-left: 30%;
   }
 
 
 #schritt3 .drittel{
   width: 40%;
   margin-top: 50px;
   margin-left: 30%;
 }

  .parallax-1 .halbe{
    background-color: white;
    padding: 10px 5px 10px 5px;
    margin: 20px;
    border-radius: 30px;
    width:91%;
    float:left;
  }
  
  h1{
    width: 90%;
    margin: auto;
  }

  h2{
    width: 90%;
    margin: auto;
  }

/*schnellkontakt //////////////////////////*/
#schnellkontakt{
  overflow: hidden;
 margin-top: 100px;
 margin-bottom: 100px;
} 

#schnellkontakt h3{
  text-align: left;
} 

#schnellkontakt p{
  padding-top: 10px;
  padding-bottom: 10px;
  line-height:30px;
  font-size: 18px;
  margin: 10px 0px 10px 0px;
  width: 90%;
  text-align: left;
}


#schnellkontakt .innerbox{
  padding: 0px;
} 

#schnellkontakt .zweidrittel{
  width: 100%;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}

#schnellkontakt .drittel{
  width: 100%;
  float: left;
  margin-top: 0px;
  margin-bottom: 0px;
}


#schnellkontakt .button{
  background:#fc5b46;
  color:#fff;
  margin-left: 5px;
  margin-right: 5px;
  }


}/*Ende Breakpoint max-width 395*/

/*Lato-Schrift über den fonts-Ordner im Projekt online datenschutz-konform zur Verfügung stellen*/

/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/lato-v23-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/lato-v23-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/lato-v23-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/lato-v23-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/lato-v23-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/lato-v23-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* lato-900 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: local(''),
       url('../fonts/lato-v23-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/lato-v23-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* lato-900italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 900;
  src: local(''),
       url('../fonts/lato-v23-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/lato-v23-latin-900italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}