/*fonts*/
@font-face{
font-family: 'Source Sans Pro';
 src: url('fonts/SourceSansPro-Light.ttf');
    font-weight: 100;
} 
@font-face{
font-family: 'Source Sans Pro';
 src: url('fonts/SourceSansPro-LightItalic.ttf');
    font-style: italic;
     font-weight: 100;
}
@font-face{
font-family: 'Source Sans Pro';
 src: url('fonts/SourceSansPro-Regular.ttf');
    font-weight: 200;
} 
@font-face{
font-family: 'Source Sans Pro';
 src: url('fonts/SourceSansPro-SemiBold.ttf');
    font-weight: 300;
} 
@font-face{
font-family: 'Source Sans Pro';    
 src: url('fonts/SourceSansPro-SemiBoldItalic.ttf');
    font-weight: 300;
    font-style: italic;
}
@font-face{
font-family: 'Source Sans Pro';    
 src: url('fonts/SourceSansPro-Bold.ttf');
    font-weight: 500;
} 





/********************/
/*** Reset css ***/
/********************/
html body {
  border: 0;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
html div,
html span,
html object,
html iframe,
html img,
html table,
html caption,
html thead,
html tbody,
html tfoot,
html tr,
html tr,
html td,
html article,
html aside,
html canvas,
html details,
html figure,
html hgroup,
html menu,
html nav,
html footer,
html header,
html section,
html summary,
html mark,
html audio,
html video {
  border: 0;
  margin: 0;
  padding: 0;
}
html h1,
html h2,
html h3,
html h4,
html h5,
html h6,
html p,
html blockquote,
html pre,
html a,
html abbr,
html address,
html cite,
html code,
html del,
html dfn,
html em,
html ins,
html q,
html samp,
html small,
html strong,
html sub,
html sup,
html b,
html i,
html hr,
html dl,
html dt,
html dd,
html ol,
html ul,
html li,
html fieldset,
html legend,
html label {
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}
html article,
html aside,
html canvas,
html figure,
html figure img,
html figcaption,
html hgroup,
html footer,
html header,
html nav,
html section,
html audio,
html video {
  display: block;
}
html table {
  border-collapse: separate;
  border-spacing: 0;
}
html table caption,
html table th,
html table td {
  text-align: left;
  vertical-align: middle;
}
html a,
html img {
  border: 0;
  text-decoration: none;
}
html :focus {
  outline: 0;
}
body {
  font-family: Source Sans Pro;
}
.textshadow {
  text-shadow: 1px 1px 1.5px rgba(0, 0, 0, 0.5);
}
.bold {
  font-weight: 300;
}
.four-boxes {
  width: 33vw;
  height: 33vw;
  color: white;
  margin: 0 auto;
}
@media only screen and (min-aspect-ratio: 9/4) {
  .four-boxes {
    transform: scale(0.8);
  }
}
@media only screen and (max-width : 880px) {
  .four-boxes {
    width: 90vw;
    height: 90vw;
  }
}
.four-boxes > a {
  cursor: default;
  text-decoration: none;
  width: 49%;
  height: 49%;
  color: white;
  background-color: rgba(167, 200, 25, 0.9);
  float: left;
  text-align: center;
  font-size: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0.5%;
  box-sizing: border-box;
}
.four-boxes > a > div {
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}
.four-boxes > a h4 {
  font-size: 2rem;
  text-shadow: 1px 1px 1.5px rgba(0, 0, 0, 0.5);
  font-weight: 300;
  height: 30%;
}
@media only screen and (max-width : 880px) {
  .four-boxes > a h4 {
    font-size: 1.5rem;
  }
}
.four-boxes > a p {
  font-weight: 400;
  font-size: 1.3rem;
  padding: 0 0.5rem;
  height: 20%;
}
.four-boxes > a .img {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}
.four-boxes > a .img.start {
  background-image: url("img/start_1.svg");
  background-size: auto 60%;
}
.four-boxes > a .img.transform {
  background-image: url("img/rescue_1.svg");
  background-size: auto 80%;
}
.four-boxes > a .img.boost {
  background-image: url("img/boost_1.svg");
  background-size: auto 80%;
}
.four-boxes > a .img.rescue2 {
  background-image: url("img/transform_1.svg");
  background-size: auto 85%;
  position: absolute;
  top: 0.3vw;
  height: 50%;
}
.logo {
  width: auto;
  height: 3.5rem;
  align-self: flex-end;
  margin: 10px;
}
@media only screen and (max-width : 880px) {
  .logo {
    height: 2.5rem;
  }
}
.logo img {
  height: 100%;
}
.content {
  display: flex;
}
#section-start {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#section-start .content {
  display: flex;
  height: calc(100vh - 8rem);
  background-position: 0% 70%;
  background-size: cover;
  background-image: url("img/cologne-3771209_1920.jpg");
}
@media only screen and (max-width : 880px) {
  #section-start .content {
    flex-direction: column;
  }
}
#section-start .content .slogan {
  font-weight: 100;
  height: auto;
  margin-left: 3vw;
  color: white;
  text-align: left;
  align-self: center;
  white-space: nowrap;
  font-size: 6.7vw;
  line-height: 1.2;
}
@media only screen and (max-width : 880px) {
  #section-start .content .slogan {
    text-align: center;
  }
}
#section-start .content .slogan-box {
  background-image: url(img/slogan-box-r.svg);
  height: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  width: 50vw;
  background-position: right;
  display: flex;
}
@media only screen and (max-width : 880px) {
  #section-start .content .slogan-box {
    background-color: rgba(161, 35, 43, 0.9);
    background-image: none;
    height: 25%;
    width: 100%;
    justify-content: center;
  }
}
#section-start .content .slogan-box img {
  position: absolute;
  right: 5vh;
  top: 4.5vh;
  height: 27%;
}
#section-start .content .fadeWrapper {
  width: 50vw;
  height: 100%;
  position: relative;
  -js-display: flex;
  display: flex;
  align-items: center;
  justify-content: center;
  clear: both;
}
@media only screen and (max-width : 880px) {
  #section-start .content .fadeWrapper {
    width: 100vw;
  }
}
#section-start .content .fadeWrapper > div {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#section-start .content .fadeWrapper > div#slide2 {
  left: 0;
  right: auto;
}
#section-start .content .fadeWrapper .four-boxes > a > div {
  height: 50%;
}
#section-start .content .fadeWrapper .four-boxes > a .img.start {
  background-size: auto 75%;
}
#section-start .content .fadeWrapper .four-boxes > a .img.transform {
  background-size: auto 80%;
}
#section-start .content .fadeWrapper .four-boxes > a .img.boost {
  background-size: auto 80%;
}
#section-start .content .fadeWrapper .four-boxes > a .img.rescue,
#section-start .content .fadeWrapper .four-boxes > a .img.rescue2 {
  background-size: auto 80%;
}
#section-start .content .fadeWrapper .four-boxes > a .img.rescue2 {
  background-size: auto 85%;
  height: 70%;
  top: 0vw;
}
#section-start .content .placeholder {
  width: 3%;
}
#section-impressum {
  display: flex;
  flex-direction: column;
}
#section-impressum div.container {
  width: 60%;
  margin: auto;
}
#section-impressum div.container h1 {
  font-size: 3rem;
}
.footer {
  white-space: nowrap;
  float: left;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 4rem;
  width: 100vw;
  background-color: white;
  display: flex;
  padding-left: 2vh;
  font-size: 1.2rem;
}
@media only screen and (max-width : 880px) {
  .footer {
    font-size: 0.6rem;
    padding: 0;
  }
}
.footer ul {
  align-self: center;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.footer li {
  display: inline-block;
  margin: 5px;
  color: grey;
    font-weight: 200;
}
.footer li:not(:first-of-type) {
  border-left: 1px solid #A1C519;
}
.footer li:hover a {
  color: #A1C519;
}
.footer li:nth-child(2) {
  padding-left: 10px;
}
.footer li a {
  color: grey;
  margin-left: 10px;
}
/**********************************************/
/************* Media Queries ******************/
/**********************************************/

/*# sourceMappingURL=style.css.map */