@import url("reset.css");
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700');
@font-face { font-family: 'Impact Label';
             src: url(' ../fonts/Impact Label.ttf ') format('truetype'); }
@font-face { font-family: 'Impact Label Reversed';
             src: url(' ../fonts/Impact Label Reversed.ttf ') format('truetype'); }

* {
    box-sizing: border-box;
}

.clear {
    clear: both;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    line-height: 18px;
    /* Schriftschitt/Größe/Zeilenabstand/Art*/
}
strong{font-weight: bold!important;}

header{position: relative;}

.logo{width: 25%; position: absolute; bottom: 16%; right: 5%}

.headerbild {
    width: 100%;
    height: auto;
    display: block;
}

.pn{padding-left: 0px!important;}

nav {
    display: inline-block;
    width: 100%;
    height: 70px;
    padding: 22px 20%;
    text-align: left;
    background-image: url(../images/pattern-carbon.png);
    background-repeat: repeat;
}

nav ul li {
    font-family: 'Impact Label';
    font-size: 18px;
    display: inline-block;
    padding-left: 5%;
    text-align: right;
}

nav ul li a {
    text-decoration: none;
    color: #900000;
    margin-left: 0px;
    font-size: 24px;
    padding: 0 2px;
}

nav a:hover,
nav a.active {
    color: #adacab;
}

.subnav{ text-align: right; margin-right: 5%; margin-top: 10px;}
.subnav ul{}
.subnav ul li{display: inline-block;
padding-left: 20px;}
.subnav ul li a{ 
    font-family: 'Impact Label Reversed';
    font-size:   20px;
    color: #900000;
     text-decoration: none;
}

.wrapper{width: 100%;
box-sizing: border-box;
    padding: 0 20%;
}


h1 {
    font-family: 'Impact Label';
    font-size: 34px;
    width: 100%;
    margin-top: 15%;
    padding: 8px 0px 3px 0px;
    color: #900000;
    margin-bottom: 10%;
    line-height: 48px;
}

h2 {font-size: 16px;
}
h3{font-family: 'Impact Label Reversed';
    font-size:   24px;
    color: #900000;     
    padding-bottom: 25px;
}

h4{font-family: 'Impact Label Reversed';
    font-size:   24px;
    color: #900000;     
    padding-bottom: 25px;
}
.u1{
    font-family: 'Impact Label';
    font-size: 34px;
    width: 100%;
    margin-top: 15%;
    padding: 8px 0px 3px 0px;
    color: #900000;
    margin-bottom: 10%;
    line-height: 48px;
}
.u2{    
    font-family: 'Impact Label';
    font-size: 17px;
    width: 100%;
    margin-top: 15%;
    padding: 8px 0px 3px 0px;
    color: #000000;
    margin-bottom: 10%;
    line-height: 48px;
}

.u3{
    font-family: 'Impact Label';
    font-size: 34px;
    width: 100%;
    margin-top: 15%;
    padding-left: 15px;
    color: #900000;
    margin-bottom: 10%;
    line-height: 48px;
}
.u4{    
    font-family: 'Impact Label';
    font-size: 17px;
    width: 100%;
    margin-top: 15%;
    padding-left: 30px;
    color: #000000;
    margin-bottom: 10%;
    line-height: 48px;
    float: left;
}

p{padding-bottom: 14px;
}

.box1{display: inline-block;width: 46%;margin: 0 4% 0 0;}

.box2{display: inline-block;width: 46%;vertical-align: top;}

.box3{width: 100%;margin-top: 10%;}

.thumb{width: 24%; 
    box-sizing: border-box; 
    padding: 5px;max-width: 200px;}

.thumb2{box-sizing: border-box; 
padding-top: 10px; 
padding-left: 20px; 
padding-bottom: 10px;
max-height: 150px;
border: 3px; 
border-color: black;
}

.thumbh{box-sizing: border-box;
    padding-top: 10px;
    padding-left: 20px;
    max-height: 150px;
    float: left;}

footer {
    width: 100%;
    height: 200px;
    padding: 36px 20%;
    background-image: url(../images/pattern-carbon.png);
    background-repeat: repeat;
    margin-top: 15%;
    box-sizing: border-box;
}

footer .inner{display: inline-block;
    width: 33%; box-sizing: border-box; color: #adacab;font-size: 16px; line-height: 26px; text-decoration: none;}

footer .inner a{color: #adacab; text-decoration: none;}

.icon{width: 18px; height: auto; display: inline-block; margin-right: 15px; vertical-align: middle;}
.icon-2{width: auto; height: 18px; display: inline-block; margin-right: 25px; vertical-align: middle;}

.team{width: 49%; box-sizing: border-box; padding: 5px;max-width: 200px;display: inline-block;}
.vita{display: inline-block;width: 49%;vertical-align: top; padding-top: 10px;}
em { font-style: italic; }

.last{display: none;}

iframe{width: 100%;}

ul li{ padding-bottom: 5px;}

/*--------------ANIMATION--------------------------------*/

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}


.arrow {
  position: absolute;
  bottom: 100px;
  left: 50%;
  margin-left: -40px;
  width: 80px;
  height: 80px;
  background-image: url(../images/arrow.svg);
  background-size: contain;
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
display: block;
}


/*---------------------------------------
MEDIA Queries | Tablet | Phone
---------------------------------------*/

@media screen and (max-width: 1300px) {
    nav ul li { padding-left: 2%;}
    .last-1{width: 25%!important; display: block;}
    .last-2{width: 34%!important; display: block;}
    .last-3{width: 39%!important; display: block;}
    
}

@media screen and (max-width: 1120px) {
   nav {padding: 22px 10%;}
    .wrapper{padding: 0 10%;}
    footer{padding: 36px 10%;}
    .logo {bottom: 21%;}
}

@media screen and (max-width: 1050px) {
    footer {padding: 36px 0 36px 10%;}
}

@media screen and (max-width: 850px) {
   nav ul li a {font-size: 19px;}
    .logo {bottom: 25%;}
    .bounce{display: none;}
}

@media screen and (max-width: 720px) {
    .logo {bottom: 28%;}
    .last-1, .last-2, .last-3 {width: 100%!important;}
    footer{height: auto;}
    footer .inner{line-height: 32px;}
}

@media screen and (max-width: 680px) {
    .logo {bottom: 36%;}
    h1{font-size: 24px;line-height: 34px;}
    nav{height: 125px;padding: 15px 10%;}
    nav ul li a {line-height: 40px;}
    nav ul li a {font-size: 25px;}

}

@media screen and (max-width: 540px) {
    .box1, .box2{width: 100%;}
    .logo {bottom: 40%;}
}

@media screen and (max-width: 530px) {
    /*CSS*/
    nav {height: 160px;}
    .logo {bottom: 45%;}
}

@media screen and (max-width: 460px) {
    h1 {font-size: 24px; line-height: 34px;}
      .logo {
    bottom: 48%;
}
}

@media screen and (max-width: 420px) {
  .logo {
    bottom: 50%;
}
}

@media screen and (max-width: 370px) {
  .logo {
    bottom: 53%;
}
}

@media screen and (max-width: 320px) {
  .logo {
    bottom: 57%;
}
}