html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    font:inherit;
    font-size:100%;
    vertical-align:baseline
}
b {
    font-weight: bold;
}
html{
    line-height:1
}
ol,ul{
    list-style:none
}
table{
    border-collapse:collapse;
    border-spacing:0
}
caption,th,td{
    text-align:left;
    font-weight:normal;
    vertical-align:middle
}
q,blockquote{
    quotes:none
}
q:before,q:after,blockquote:before,blockquote:after{
    content:"";
    content:none
}
a img{
    border:0
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
    display:block
}

.dunkelgruen {
    background-color: #a7be7e;
    color: white;
}
body{
    font-family:"Roboto Condensed",sans-serif;
    font-size:17px;
    font-weight:300;
    line-height:26px;
    letter-spacing:.5px
}
body *{
    box-sizing:border-box
}
a{
    text-decoration:none;
    -webkit-transition:color .2s linear;
    transition:color .2s linear;
    color:#FFF
}
a:hover{
    color:#f0f0f0
}
blockquote{
    font-size:30px;
    line-height:38px;
    font-style:italic;
    letter-spacing:1.5px
}
h2,h3{
    font-size:17px;
    letter-spacing:1px;
    margin-bottom:0;
    font-weight:700;
    text-transform:uppercase
}
h3{
    font-size:17px
}
h2{
    margin-bottom:.25em
}
p{
    margin-bottom:1.5em
}
p.no-margin{
    margin-bottom:0
}
strong{
    font-weight:700
}
em{
    font-style:italic
}
.container{
    margin:0 auto;
    width:100%;
    max-width:870px;
    padding:0 15px
}
.container-2{
    position: absolute;
    right: 20px;
    bottom: 20px;
}
.container-2 img{
    width: 100px;
}
header{
    position:fixed;
    top:0;
    padding-top:16px;
    padding-bottom:10px;
    z-index:100
}
header .container{
    width:100%;
    max-width:1170px
}
header > div > nav > ul{
    margin-bottom: 0;
}
.image-section{
    padding-top:145px;
    padding-bottom:105px;
    text-align:center
}
.image-section img{
    max-width:90%;
    height:auto
}
.text-section{
    padding-top:30px;
    padding-bottom:40px
}
.parallax-window{
    min-height:400px;
    background:transparent
}
.clearfix:after,.container:after{
    content:".";
    clear:both;
    display:block;
    visibility:hidden;
    height:0
}

.linkedImg{
    margin-bottom: -12px;
}

.impressum{
    color: #71e145;
}

header{
    width:100%;
    background-color:#e5ffd0
}
header #logo{
    display:inline-block;
    float:left
}
header #logo h1{
    display:none
}
header #logo img {
    width: 380px;
}
header #nav-toggle{
    float:right;
    width:24px;
    height:24px;
    border:0;
    padding:0;
    margin-top:15px;
    background:#e5ffd0 url("../img/nav-toggle_2.png") no-repeat top left;
    background-size:100%;
    -webkit-appearance:none;
    outline:0;
    cursor:pointer;
    opacity:.8;
    -webkit-transition:opacity .2s ease-in;
    transition:opacity .2s ease-in
}
header #nav-toggle:hover{
    opacity:1
}
header nav{
    position:fixed;
    top:47px;
    right:0;
    width:100%;
    z-index:-1;
    padding:15px;
    background:#e5ffd0;
    -webkit-transform:translateY(-150%);
    transform:translateY(-150%);
    -webkit-transition:-webkit-transform .4s ease-in-out;
    transition:-webkit-transform .4s ease-in-out;
    transition:transform .4s ease-in-out;
    transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out;
    transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out;
    transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out
}
header nav ul{
    float:right
}
header nav ul li:last-child{
    margin-right:0
}
header nav ul li a{
    display:inline-block;
    padding: 5px 0;
    font-size: 23px;
    font-weight: 300;
    text-transform:uppercase;
    color:#6ae12d;
}
header nav ul li a:hover,header nav ul li a.active{
    color:#6ae12d;
    font-weight: bold;
    text-decoration: none;
}
header .info{
    display:inline-block;
    width:24px;
    height:24px;
    background:transparent url("../img/info-mobile.png") 0 0 no-repeat;
    float:right;
    margin-left:15px
}
.nav-open header nav{
    -webkit-transform:translateY(0);
    transform:translateY(0)
}
#what{
    margin-top:55px;
    position: relative;
}
#what-information{
    background-color:#e5ffd0;
}

.sprachen-img{
	width:100%;
    max-width:400px;
    margin: 40px 0 30px 0;
}

.languages-overview-start{
    float: left;
    /*text-transform: uppercase;*/
    position: absolute;
}

#what-information .languages-overview{
    margin:10px 0;
    display: flex;
    justify-content: center;
    width: 100%;
}
#what-information .languages-overview .language{
    display:inline-block;
    width:28px;
    height:28px;
    background-color:#6ae12d;
    border-radius:50%;
    padding-top:2px;
    padding-left:2px;
    margin-right:2px;
    margin-bottom:10px;
    font-size:12px;
    font-weight:700;
    text-align:center;
    letter-spacing:1px
}
#what-information .languages-overview .language.base{
    background-color:#788f67;
    color:#fff
}
#what-information .languages-overview .direction{
    display:inline-block;
    width:28px;
    height:100%;
    padding-top:3px;
    background:transparent url("../img/arrow_black.png") top 8px center no-repeat;
    background-size:30%
}
#what-information .languages-overview .language-origin{
    float:left
}
#what-information .languages-overview .language-group{
    float:left;
    width:calc(100% - 70px);
    padding-left:5px
}
#what-information ul{
    margin-bottom:1.5em
}
#what-information .customers a{
    display:inline-block;
    width:49%;
    height:52px;
    margin-bottom:50px;
    text-align:center
}
#what-information .customers a img{
    /*max-width:90%;*/
	max-width:100%;
    vertical-align:middle
}
#what-information .floating-box{
    display:flow-root
}
#what-information .floating-element1{
   width:100%;
   float:none
}
#what-information .floating-element2{
   width:100%;
   float:none
}
#who-information{
    background-color:#a7be7e;
    color:#FFF
}
#who-information ul{
    padding-left:20px
}
#who-information ul li{
    margin-bottom:5px;
    position:relative
}
#who-information ul li:before{
    content:'';
    position:absolute;
    top:2px;
    left:-18px;
    width:9px;
    height:17px;
    background:transparent url("../img/arrow_white.png") center center no-repeat;
    background-size:74%
}
#who-information blockquote{
    margin-top:2em;
    margin-bottom:2em
}
#who-information .network .member{
    position:relative;
    display:inline-block;
    width:50%;
    text-align:center;
    float:left;
    padding-bottom:16px
}
#who-information .network .member:after{
    content:'';
    position:absolute;
    bottom:0;
    left:50%;
    display:inline-block;
    width:30px;
    height:1px;
    background-color:#FFF;
    margin-bottom:20px;
    margin-left:-15px
}
#who-information .network .member p{
    font-size:14px;
    margin-bottom:0;
    letter-spacing:1px
}
#how-information{
    background-color:#e5ffd0
}

#who-information .network .member img{
    max-width: 113px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
}
#who-information .qualified-pros{
    margin-top: 40px;
}

footer{
    background-color:#e5ffd0
}
footer .footer-logo{
    margin-bottom:30px;
    float: right;
}
footer .footer-text{
    margin-bottom:30px;
    float: left;
	width:100%;
}
footer a{
    color:#000
}
footer a:hover{
    color:#666
}
footer address{
    margin-bottom:40px;
    line-height: 1.4em;
}
footer .imprint{
    line-height: 1.4em;
}
footer h3{
    text-transform:none
}
@media only screen and (min-width:450px){
    #who-information .network .member{
        width:33%
    }
}

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

    header #nav-toggle{
        margin-top: 10px;
    }
}

@media only screen and (min-width:600px){
    .image-section{
        padding-top:80px;
        padding-bottom:105px
    }
    .text-section{
        padding-top:60px;
        padding-bottom:80px
    }
    #what-information .customers a{
        width:32%
    }
    #who-information .network .member{
        width:25%
    }
    #who-information .network .member img{
        max-width: 113px;
        border-radius: 100%;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
    }
    #who-information .network .member:after{
        bottom:-4px
    }

}
@media only screen and (min-width:768px){
    .image-section{
        padding-top:140px;
        padding-bottom:180px
    }
    .image-section{
        padding-top:240px;
        padding-bottom:280px
    }
    #who-information .network{
        margin-left:-12px
    }
    #who-information .network .member{
        width:12.5%
    }
    #who-information .network .member img{
        max-width:80%
    }
    footer address,footer .imprint{
        width:33%;
        padding: 1%;
        font-size: 14px;
        float:left;

    }
		footer .footer-text{
    margin-bottom:30px;
    float: left;
	max-width: 70%;
	margin-top: 10px;
}
}

.linkedImg{
    margin-bottom: -6px;
    margin-left: 10px;
}

.btn-link{
    color: black!important;
}

@media only screen and (max-width: 940px){
    body > header > div > nav > ul{
        float: left;
        margin-top: 20px
    }
}

@media only screen and (min-width:940px){



    header #nav-toggle{
        display:none
    }
    header nav{
        position:static;
        padding:0;
        z-index:10
    }
    header nav ul li{
        margin-right:30px;
        float:left
    }
    header nav ul li a{
        padding:14px 0px 10px 0px;
    }
    header .info{
        background:transparent url("../img/info.png") 0 0 no-repeat;
        margin-top:8px;
        margin-left:30px
    }
    #what-information .customers a{
        width: auto;
        margin-right:50px
    }
    #what-information .customers a.white-label,#what-information .customers a.klettershop{
        margin-right:0
    }
}
@media only screen and (min-width:1030px){
    .image-section img{
        max-width:100%
    }
    #who-information ul{
        padding-left:0
    }
}

@media only screen and (max-width: 520px){
    header #logo > img, header #logo{
        width: 90%;
    }
	#what-information .floating-element1{
   width:100%;
   float:none
}
#what-information .floating-element2{
   width:100%;
   margin-top:1em;
   float:none
}
.sprachen-img{
	width:100%;
    max-width:420px;
    margin: 40px 0 30px 0;
}
							  
}

@media only screen and (max-width:768px){
    .languages-overview-start {
        position: relative;
        width: 100%;
    }
    blockquote{
        font-size:28px
    }
}
hr.black{
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #000;
    margin: 7px 0;
    padding: 0;
}

/* Flexcontainer für Head of Team hinzugefügt 01-2024 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-container img 
{
  max-width: 200px;
}
.flex-item-left {
  padding: 10px;
  flex: 10%;
  
}
.flex-item-left img{
border-radius: 100%;
}

.flex-item-right {
  padding: 10px;
  flex: 90;
}


/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 600px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
 .sprachen-img{
	width:100%;
    max-width: 420px;
    margin: 40px 0 30px 0;
}				
}