@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,700,900');

* {
margin: 0;
padding: 0;
}

body {
  background-color: #46647f;
}

.section {
  text-align:center;
  font-size: 3em;
}
.content{
  margin:100px
}

h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  font-size: 3.8vw;
  text-align: left;
  color: #ffffff;
}

h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 38px;
  text-align: right;
  color: #ffffff;
}

a {
  text-decoration: none;
  color: #ffffff;
  -webkit-transition: color 0.2s; /* For Safari 3.0 to 6.0 */
  transition: color 0.2s; /* For modern browsers */
}

h1::selection,
br::selection {
  background: #03f592;
}

h1::-moz-selection,
br::-moz-selection {
  background: #03f592;
}

#callbacks-placeholder{
  position:fixed;top:150px;left:50px;color:black;z-index:999;display:none;
}


div#core_close_button,
div#vripulvt_close_button,
div#mymobility_close_button,
div#app_close_button,
div#buddy_close_button {
  position: relative;
  background-image: url(../img/close.png);
  background-size: cover;
  width: 25px;
  height: 25px;
  opacity: 0.5;
  float: right;
  right: 20.83vw;
  top: -25px;
  -webkit-transition: opacity 0.2s; /* For Safari 3.0 to 6.0 */
  transition: opacity 0.2s; /* For modern browsers */
}

div#core_close_button:hover,
div#vripulvt_close_button:hover,
div#mymobility_close_button:hover,
div#app_close_button:hover,
div#buddy_close_button:hover {
  opacity: 1;
  cursor: pointer;
}

div#core_video,
div#vripulvt_video,
div#mymobility_video,
div#app_video,
div#buddy_video {
  display: none;
  z-index: 99;
}

/* ----------------------------------------- LOGO */

div#logo {
  position: fixed;
  z-index: 1;
  background-image: url(../img/kk_logo.png);
  background-size: cover;
  width: 70px;
  height: 57px;
  margin-top: 40px;
  margin-left: 50px;
  opacity: 0.5;
  -webkit-transition: opacity 0.2s; /* For Safari 3.0 to 6.0 */
  transition: opacity 0.2s; /* For modern browsers */
  -webkit-transition: margin-left 1s 1s, opacity 0.2s;
  transition: margin-left 1s 1s, opacity 0.2s;
}

div#logo:hover {
  opacity: 1;
  cursor: pointer;
}

.fp-viewing-6 div#logo {
  margin-left: -1500px;
}

.fp-viewing-0 div#logo,
.fp-viewing-1 div#logo,
.fp-viewing-2 div#logo,
.fp-viewing-3 div#logo,
.fp-viewing-4 div#logo,
.fp-viewing-5 div#logo {
  margin-left: 50px;
}

/* ----------------------------------------- DOTS */
/*
#fp-nav.fp-left {
  margin-top: 15.05vw !important;
  left: 42px;
  opacity: 0.5;
  -webkit-transition: margin-top 0.7s;
  transition: margin-top 0.7s;
}

#fp-nav ul li a, .fp-slidesNav ul li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}

#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {
    border-radius: 0%;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span {
    border-radius: 0;
    background: #fff;
}

#fp-nav ul li .fp-tooltip {
    position: absolute;
    top: -2px;
    color: #fff;
    font-size: 14px;
    font-family: 'Raleway', sans-serif;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0;
    cursor: pointer;
}

.fp-viewing-6 #fp-nav.fp-left {
  margin-top: -31px !important;
}*/

/* ----------------------------------------- MOBILE MENU */

div#menu_mobile_close {
    background-image: url(../img/close.png);
    background-size: cover;
    width: 25px;
    height: 25px;
    opacity: 0.5;
    right: 20.83vw;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    margin: 0 auto;
    margin-bottom: 2.5vw;
}

div#menu_mobile_close:hover {
    opacity: 1;
    cursor: pointer;
}

div#menu_mobile {
 display: none;
 position: fixed;
 z-index: 999;
 background-color: rgba(0, 0, 0, 0.98);
 width: 100vw;
 height: 100vh;
 text-align: center;
}

div#menu_mobile_content {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  overflow: hidden;
}

p.menutext {
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  font-size: 3vw;
  color: #ffffff;
  opacity: 0.5;
  -webkit-transition: opacity 0.2s; /* For Safari 3.0 to 6.0 */
  transition: opacity 0.2s; /* For modern browsers */
}

p.menutext:hover {
  opacity: 1;
  cursor: pointer;
}

p#menu_mobile_kontakt {
  margin-bottom: 2.12vw;
}

/* ----------------------------------------- MENU */

div#hamburgermenu_container {
  position: fixed;
  z-index: 1;
}

div#hamburgermenu {
  position: fixed;
  right: 0;
  background-image: url(../img/menu.png);
  background-size: cover;
  width: 51px;
  height: 35px;
  opacity: 0.5;
  margin-top: 55px;
  margin-right: -1500px;
  -webkit-transition: margin-right 1s 1s, opacity 0.2s;
  transition: margin-right 1s 1s, opacity 0.2s;
}

.fp-viewing-0 div#hamburgermenu,
.fp-viewing-6 div#hamburgermenu {
  margin-right: -1500px;
}

.fp-viewing-1 div#hamburgermenu,
.fp-viewing-2 div#hamburgermenu,
.fp-viewing-3 div#hamburgermenu,
.fp-viewing-4 div#hamburgermenu,
.fp-viewing-5 div#hamburgermenu {
  margin-right: 50px;
}

div#hamburgermenu:hover {
  opacity: 1;
  cursor: pointer;
}

div#menu {
  position: fixed;
  right: 0;
  z-index: 1;
  margin-top: 50px;
  margin-right: 50px;
  -webkit-transition: margin-right 1s 1s; /* For Safari 3.0 to 6.0 */
  transition: margin-right 1s 1s; /* For modern browsers */
}

.fp-viewing-0 div#menu {
  margin-right: 50px;
}

.fp-viewing-1 div#menu,
.fp-viewing-2 div#menu,
.fp-viewing-3 div#menu,
.fp-viewing-4 div#menu,
.fp-viewing-5 div#menu,
.fp-viewing-6 div#menu {
  margin-right: -1000px;
}

h2#menu_projekte {
  float: right;
  opacity: 0.5;
  margin-right: 45px;
  -webkit-transition: opacity 0.2s; /* For Safari 3.0 to 6.0 */
  transition: opacity 0.2s; /* For modern browsers */
}

h2#menu_about {
  float: right;
  opacity: 0.5;
  margin-right: 45px;
  -webkit-transition: opacity 0.2s; /* For Safari 3.0 to 6.0 */
  transition: opacity 0.2s; /* For modern browsers */
}

h2#menu_kontakt {
  float: right;
  opacity: 0.5;
  -webkit-transition: opacity 0.2s; /* For Safari 3.0 to 6.0 */
  transition: opacity 0.2s; /* For modern browsers */
}

h2#menu_projekte:hover {
  opacity: 1;
}

h2#menu_about:hover {
  opacity: 1;
}

h2#menu_kontakt:hover {
  opacity: 1;
}

/* ----------------------------------------- HOME */

div#home {
  background-image: url(../img/home_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

div#home_content {
  width: 767px;
  height: 226px;
  background-image: url(../img/moin.png);
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div#arrow_down {
  position:absolute;
  background-image: url(../img/arrow_down.png);
  background-size: cover;
  width:42px;
  height:24px;
  bottom:40px;
  right:25%;
  left:50%;
  margin-left:-21px;
  z-index: 1;
  opacity: 0.5;
  -webkit-transition: opacity 0.2s; /* For Safari 3.0 to 6.0 */
  transition: opacity 0.2s; /* For modern browsers */
}

div#arrow_down:hover {
  opacity: 1;
  cursor: pointer;
}

/* ----------------------------------------- ABOUT */

div#home_about {
  display: none;
  margin-left: 11.25vw;
}

h2#about {
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  font-size: 38px;
  text-align: left;
  color: #ffffff;
  margin-bottom: 35px;
}

p#about {
  width: 39.06vw;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  color: #ffffff;
  margin-top: 25px;
}

/* ----------------------------------------- CORE */

div#core {
  background-image: url(../img/core_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

div#core_content_left {
  margin-top: 9.55vw;
  margin-left: 8.5vw;
  float: left;
}

div.whitestripe {
  width: 13.2vw;
  height: 8px;
  background-color: white;
}

h1#core {
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  font-size: 3.8vw;
  text-align: left;
  color: #ffffff;
  margin-top: 2.5vw;
  margin-bottom: 2.5vw;
}

h1#core::selection {
  background: #fa9639;
}

h1#core::-moz-selection {
  background: #fa9639;
}

div#whitebox_core {
  background-color: white;
  padding-top: 0.36vw;
  padding-left: 0.42vw;
  padding-bottom: 0.36vw;
  width: 27.9vw;
}

h2#whitebox_core {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 1.665vw;
  text-align: left;
  color: #e89243;
}

h2#whitebox_core::selection {
  background: #ffffff;
}

h2#whitebox_core::-moz-selection {
  background: #ffffff;
}

div#core_content_right {
  width: 51.4vw;
  height: 30.9vw;
  background-image: url(../img/core_trailerpic.png);
  background-size: cover;
  float: right;
  margin-right: 6.75vw;
  margin-top: 2.6vw;
}

div#core_content_right:hover {
  cursor: pointer;
}

/* ----------------------------------------- VRIPULVT */

div#vripulvt {
  background-image: url(../img/vripulvt_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

div#vripulvt_content_left {
  margin-top: 8.32vw;
  margin-left: 8.5vw;
  float: left;
}

div.whitestripe {
  width: 13.2vw;
  height: 8px;
  background-color: white;
}

h1#vripulvt {
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  font-size: 3.8vw;
  text-align: left;
  color: #ffffff;
  margin-top: 2.5vw;
  margin-bottom: 2.5vw;
}

h1#vripulvt::selection {
  background: #ffffff;
}

h1#vripulvt::-moz-selection {
  background: #ffffff;
}

div#whitebox_vripulvt {
  background-color: white;
  padding-top: 0.36vw;
  padding-left: 0.42vw;
  padding-bottom: 0.36vw;
  width: 15.55vw;
}

h2#whitebox_vripulvt {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 1.665vw;
  text-align: left;
  color: #2f3238;
}

h2#whitebox_vripulvt::selection {
  background: #ffffff;
}

h2#whitebox_vripulvt::-moz-selection {
  background: #ffffff;
}

div#vripulvt_content_right {
  width: 55.4vw;
  height: 30.9vw;
  background-image: url(../img/vripulvt_trailerpic.png);
  background-size: cover;
  float: right;
  margin-right: 8.48vw;
  border-style: solid;
  border-color: white;
}

div#vripulvt_content_right:hover {
  cursor: pointer;
}

/* ----------------------------------------- MYMOBILITY */

div#mymobility {
  background-image: url(../img/mymobility_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

div#mymobility_content_left {
  margin-top: 13.85vw;
  margin-left: 8.5vw;
  float: left;
  width: 32vw;
}

div.whitestripe {
  width: 13.2vw;
  height: 8px;
  background-color: white;
}

h1#mymobility {
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  font-size: 3.8vw;
  text-align: left;
  color: #ffffff;
  margin-top: 2.5vw;
  margin-bottom: 2.5vw;
}

h1#mymobility::selection {
  background: #3c92ba;
}

h1#mymobility::-moz-selection {
  background: #3c92ba;
}

div#whitebox_mymobility {
  background-color: white;
  padding-top: 0.65vw;
  padding-left: 0.42vw;
  padding-bottom: 0.36vw;
  width: 28.2vw;
}

h2#whitebox_mymobility {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 1.665vw;
  text-align: left;
  color: #367b9b;
}

h2#whitebox_mymobility::selection {
  background: #ffffff;
}

h2#whitebox_mymobility::-moz-selection {
  background: #ffffff;
}

div#mymobility_content_right {
  width: 33.38vw;
  height: 42.39vw;
  background-image: url(../img/mymobility_trailerpic.png);
  background-size: cover;
  float: right;
  margin-right: 16.09vw;
}

div#mymobility_content_right:hover {
  cursor: pointer;
}

/* ----------------------------------------- APP */

div#app {
  background-image: url(../img/app_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

div#app_content_left {
  margin-top: 5.4vw;
  margin-left: 8.5vw;
  float: left;
}

div.whitestripe {
  width: 13.2vw;
  height: 8px;
  background-color: white;
}

h1#app {
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  font-size: 3.8vw;
  text-align: left;
  color: #ffffff;
  margin-top: 2.5vw;
  margin-bottom: 2.5vw;
}

h1#app::selection {
  background: #010101;
}

h1#app::-moz-selection {
  background: #010101;
}

div#whitebox_app {
  background-color: white;
  padding-top: 0.36vw;
  padding-left: 0.42vw;
  padding-bottom: 0.36vw;
  width: 29.35vw;
}

h2#whitebox_app {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 1.665vw;
  text-align: left;
  color: #02142a;
}

h2#whitebox_app::selection {
  background: #ffffff;
}

h2#whitebox_app::-moz-selection {
  background: #ffffff;
}

div#app_content_right {
  width: 52.92vw;
  height: 27.08vw;
  background-image: url(../img/app_trailerpic.png);
  background-size: cover;
  float: right;
  margin-right: 6.75vw;
}

div#app_content_right:hover {
  cursor: pointer;
}

/* ----------------------------------------- LEARN-BUDDY */

div#buddy {
  background-image: url(../img/buddy_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

div#buddy_content_left {
  margin-top: 13.85vw;
  margin-left: 8.5vw;
  float: left;
  width: 32vw;
}

div.whitestripe {
  width: 13.2vw;
  height: 8px;
  background-color: white;
}

h1#buddy {
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  font-size: 3.8vw;
  text-align: left;
  color: #ffffff;
  margin-top: 2.5vw;
  margin-bottom: 2.5vw;
}

h1#buddy::selection {
  background: #3ec9a7;
}

h1#buddy::-moz-selection {
  background: #3ec9a7;
}

div#whitebox_buddy {
  background-color: white;
  padding-top: 0.65vw;
  padding-left: 0.42vw;
  padding-bottom: 0.36vw;
  width: 31.7vw;
}

h2#whitebox_buddy {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 1.665vw;
  text-align: left;
  color: #334a5d;
}

h2#whitebox_buddy::selection {
  background: #ffffff;
}

h2#whitebox_buddy::-moz-selection {
  background: #ffffff;
}

div#buddy_content_right {
  width: 33.38vw;
  height: 42.39vw;
  background-image: url(../img/buddy_trailerpic.png);
  background-size: cover;
  float: right;
  margin-right: 16.09vw;
}

div#buddy_content_right:hover {
  cursor: pointer;
}

/* ----------------------------------------- FOOTER */

div#footer {
  background-color: #3f3f3f;
  padding-bottom: 4.5vw;
}

div#logo_footer {
  float: left;
  background-image: url(../img/kk_logo.png);
  background-size: cover;
  width: 3.65vw;
  height: 2.97vw;
  margin-left: 12.45vw;
  margin-top: 6.72vw;
  opacity: 0.5;
  -webkit-transition: opacity 0.2s; /* For Safari 3.0 to 6.0 */
  transition: opacity 0.2s; /* For modern browsers */
}

div#logo_footer:hover {
  opacity: 1;
  cursor: pointer;
}

div#menu_footer {
  float: left;
  text-align: left;
  margin-left: 7.29vw;
  margin-top: 6.25vw;
  overflow: hidden;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 1.25vw;
  color: #ffffff;
}

div#projekte_footer {
  float: left;
  text-align: left;
  margin-left: 7.29vw;
  margin-top: 4.64vw;
  overflow: hidden;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 1.25vw;
  color: #ffffff;
}

a#projekte_footer,
a#about_footer,
a#kontakt_footer,
a#core_footer,
a#vripulvt_footer,
a#mymobility_footer,
a#app_footer,
a#buddy_footer {
  opacity: 0.5;
  -webkit-transition: opacity 0.2s; /* For Safari 3.0 to 6.0 */
  transition: opacity 0.2s; /* For modern browsers */
}

a#projekte_footer:hover,
a#about_footer:hover,
a#kontakt_footer:hover,
a#core_footer:hover,
a#vripulvt_footer:hover,
a#mymobility_footer:hover,
a#app_footer:hover,
a#buddy_footer:hover {
  opacity: 1;
}

div#social_footer {
  float: left;
  margin-left: 7.29vw;
  margin-top: 6.98vw;
}

div#twitter {
  float: left;
  background-image: url(../img/twitter.png);
  background-size: cover;
  width: 2.24vw;
  height: 2.24vw;
  opacity: 0.5;
  -webkit-transition: opacity 0.2s; /* For Safari 3.0 to 6.0 */
  transition: opacity 0.2s; /* For modern browsers */
}

div#facebook {
  float: left;
  margin-left: 0.42vw;
  background-image: url(../img/facebook.png);
  background-size: cover;
  width: 2.24vw;
  height: 2.24vw;
  opacity: 0.5;
  -webkit-transition: opacity 0.2s; /* For Safari 3.0 to 6.0 */
  transition: opacity 0.2s; /* For modern browsers */
}

div#xing {
  float: left;
  margin-left: 0.42vw;
  background-image: url(../img/xing.png);
  background-size: cover;
  width: 2.24vw;
  height: 2.24vw;
  opacity: 0.5;
  -webkit-transition: opacity 0.2s; /* For Safari 3.0 to 6.0 */
  transition: opacity 0.2s; /* For modern browsers */
}

div#mail {
  float: left;
  margin-left: 0.42vw;
  background-image: url(../img/mail.png);
  background-size: cover;
  width: 2.24vw;
  height: 2.24vw;
  opacity: 0.5;
  -webkit-transition: opacity 0.2s; /* For Safari 3.0 to 6.0 */
  transition: opacity 0.2s; /* For modern browsers */
}

div#twitter:hover,
div#facebook:hover,
div#xing:hover,
div#mail:hover {
  opacity: 1;
  cursor: pointer;
}

div#copyright_footer {
  float: left;
  text-align: left;
  margin-left: 7.29vw;
  margin-top: 7.86vw;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 0.94vw;
  color: #ffffff;
  opacity: 0.5;
}

div#arrow_up {
  background-image: url(../img/arrow_up.png);
  background-size: cover;
  width: 2.19vw;
  height: 1.25vw;
  margin-left: 7.29vw;
  margin-top: 7.6vw;
  float: left;
  opacity: 0.5;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

div#arrow_up:hover {
  opacity: 1;
  cursor: pointer;
}

/* --------------------------------------- RESPONSIVE --------------------------------------- */

/* ----------------------------------------- 1440px ----------------------------------------- */

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

div#menu {
    margin-top: 57px;
}

h2#menu_projekte,
h2#menu_about,
h2#menu_kontakt {
    font-size: 28px;
}

p#about {
  width: 645px;
}

}

/* ----------------------------------------- 1180px ----------------------------------------- */

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

div#menu {
  margin-right: -1000px;
}

.fp-viewing-0 div#menu {
  margin-right: -1000px;
}

div#hamburgermenu {
  margin-right: 50px;
}

.fp-viewing-0 div#hamburgermenu,
.fp-viewing-6 div#hamburgermenu {
  margin-right: 50px;
}

.fp-viewing-6 div#logo {
  margin-left: 50px;
}

h1 {
  font-size: 4.8vw;
}

p.menutext {
  font-size: 4vw;
}

div#home_about {
    margin-left: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

}

/* ----------------------------------------- 1024px ----------------------------------------- */

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

div#core_close_button,
div#vripulvt_close_button,
div#mymobility_close_button,
div#app_close_button,
div#buddy_close_button {
  top: -30px;
  float: none;
  right: 0;
  margin: 0 auto;
}

video {
  width: 85%;
}

div#home_content {
  width: 74.9vw;
  height: 22.07vw;
}

/* ----------------------------------------- CORE */

div#core_content {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div#core_content_left {
    float: none;
    margin: 0 auto;
    width: 79.6vw;
}

div.whitestripe {
    margin: 0 auto;
    width: 29.3vw;
    height: 4px;
}

h1#core {
    text-align: center;
    font-size: 8.0vw;
    margin-top: 3.37vh;
    margin-bottom: 3.37vh;
}

div#whitebox_core {
    margin: 0 auto;
    width: 64.8vw;
}

h2#whitebox_core {
    font-size: 3.9vw;
}

div#core_content_right {
    float: none;
    margin: 0 auto;
    width: 71.19vw;
    height: 42.77vw;
    margin-top: 5.37vh;
}

/* ----------------------------------------- VRIPULVT */

div#vripulvt_content {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div#vripulvt_content_left {
    float: none;
    margin: 0 auto;
    width: 79.6vw;
}

div.whitestripe {
    margin: 0 auto;
    width: 29.3vw;
    height: 4px;
}

h1#vripulvt {
    text-align: center;
    font-size: 8.0vw;
    margin-top: 3.37vh;
    margin-bottom: 3.37vh;
}

div#whitebox_vripulvt {
    margin: 0 auto;
    width: 70.4vw;
    padding-bottom: 0;
}

h2#whitebox_vripulvt {
    font-size: 3.9vw;
}

div#vripulvt_content_right {
    float: none;
    margin: 0 auto;
    width: 71.19vw;
    height: 42.77vw;
    margin-top: 5.37vh;
}

/* ----------------------------------------- MYMOBILITY */

div#mymobility_content {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div#mymobility_content_left {
    float: none;
    margin: 0 auto;
    width: 79.6vw;
}

div.whitestripe {
    margin: 0 auto;
    width: 29.3vw;
    height: 4px;
}

h1#mymobility {
    text-align: center;
    font-size: 8.0vw;
    margin-top: 3.37vh;
    margin-bottom: 3.37vh;
}

div#whitebox_mymobility {
    margin: 0 auto;
    width: 65.7vw;
}

h2#whitebox_mymobility {
    font-size: 3.9vw;
}

div#mymobility_content_right {
    float: none;
    margin: 0 auto;
    width: 37.11vw;
    height: 47.17vw;
    margin-top: 5.37vh;
}

/* ----------------------------------------- APP */

div#app_content {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div#app_content_left {
    float: none;
    margin: 0 auto;
    width: 79.6vw;
}

div.whitestripe {
    margin: 0 auto;
    width: 29.3vw;
    height: 4px;
}

h1#app {
    text-align: center;
    font-size: 8.0vw;
    margin-top: 3.37vh;
    margin-bottom: 3.37vh;
}

div#whitebox_app {
    margin: 0 auto;
    width: 68.2vw;
}

h2#whitebox_app {
    font-size: 3.9vw;
}

div#app_content_right {
    float: none;
    margin: 0 auto;
    width: 83.19vw;
    height: 42.77vw;
    margin-top: 5.37vh;
}

/* ----------------------------------------- LEARN-BUDDY */

div#buddy_content {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div#buddy_content_left {
    float: none;
    margin: 0 auto;
    width: 79.6vw;
}

div.whitestripe {
    margin: 0 auto;
    width: 29.3vw;
    height: 4px;
}

h1#buddy {
    text-align: center;
    font-size: 8.0vw;
    margin-top: 3.37vh;
    margin-bottom: 3.37vh;
}

div#whitebox_buddy {
    margin: 0 auto;
    width: 73.8vw;
}

h2#whitebox_buddy {
    font-size: 3.9vw;
}

div#buddy_content_right {
    float: none;
    margin: 0 auto;
    width: 37.11vw;
    height: 47.17vw;
    margin-top: 5.37vh;
}

/* ----------------------------------------- FOOTER */

div#logo_footer,
div#menu_footer,
div#projekte_footer {
  display: none;
}

div#social_footer {
  margin-left: 23.44vw;
}

div#twitter,
div#facebook,
div#xing,
div#mail {
    width: 4.2vw;
    height: 4.2vw;
}

div#copyright_footer {
    font-size: 1.76vw;
}

div#arrow_up {
    width: 4.1vw;
    height: 2.34vw;
}

}

/* ------------------------------------------ 850px ----------------------------------------- */

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

h1 {
  font-size: 7.8vw;
  line-height: 125%;
}

p.menutext {
  font-size: 4vw;
}

h2#about {
 font-size: 33px;
}

p#about {
  width: 65.88vw;
  font-size: 14px;
}

}

/* ------------------------------------------ 700px ----------------------------------------- */

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

div#logo {
  width: 35px;
  height: 29px;
}

p.menutext {
  font-size: 6vw;
}



/* ----------------------------------------- MENU */

div#hamburgermenu {
  width: 25px;
  height: 17px;
  margin-top: 46px;
}

/* ----------------------------------------- HOME */

div#arrow_down {
  width:21px;
  height:12px;
  margin-left:-10px;
}

div#home {
  background-position: right;
}

/* ----------------------------------------- CORE */

div#core_content_left {
    width: 79.6vw;
}

div.whitestripe {
    width: 36.3vw;
}

h1#core {
    font-size: 10.275vw;
}

div#whitebox_core {
    width: 79.6vw;
}

h2#whitebox_core {
    font-size: 4.786vw;
}

div#core_content_right {
    width: 82.4vw;
    height: 49.9vw;
}

/* ----------------------------------------- VRIPULVT */

div#vripulvt_content_left {
    width: 79.6vw;
}

div.whitestripe {
    width: 36.3vw;
}

h1#corevripulvt {
    font-size: 10.275vw;
}

div#whitebox_vripulvt {
    width: 44.0vw;
}

h2#whitebox_vripulvt {
    font-size: 4.786vw;
}

div#vripulvt_content_right {
    width: 82.4vw;
    height: 49.9vw;
}

/* ----------------------------------------- MYMOBILITY */

div#mymobility_content_right {
    width: 49.60vw;
    height: 63vw;
}

/* ----------------------------------------- APP */

div#app_content_left {
    width: 79.6vw;
}

div.whitestripe {
    width: 36.3vw;
}

h1#app {
    font-size: 10.275vw;
}

div#whitebox_app {
    width: 80.0vw;
}

h2#whitebox_app {
    font-size: 4.786vw;
}

div#app_content_right {
    width: 97.4vw;
    height: 49.9vw;
}

/* ----------------------------------------- LEARN-BUDDY */

div#buddy_content_right {
    width: 49.60vw;
    height: 63vw;
}

/* ----------------------------------------- FOOTER */

div#social_footer {
  margin-left: 14.86vw;
}

div#twitter,
div#facebook,
div#xing,
div#mail {
    width: 6.14vw;
    height: 6.14vw;
}

div#copyright_footer {
    font-size: 2.57vw;
}

div#arrow_up {
    width: 6.0vw;
    height: 3.43vw;
}

}

/* ------------------------------------------ 520px ----------------------------------------- */

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

h2#about {
 font-size: 26px;
 margin-bottom: 0px;
}

p#about {
  font-size: 12px;
  margin-top: 10px;
}

}

/* ------------------------------------------ 360px ----------------------------------------- */

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

h2#about {
 font-size: 20px;
}

p#about {
  font-size: 8px;
}

}