body, html, div, blockquote, img, form, label, input, a, ul, ol, li, main, section, aside, header, footer, article, p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none; }

body {
  line-height: 1;
  font-size: 100%; }

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

a {
  color: rgba(0, 0, 0, 1.0);
  text-decoration: none; }

/* Color Selection */

body ::selection {
  color: rgba(255, 255, 255, 1.0);
  background: rgba(240, 50, 70, 1.0); }

body ::-moz-selection {
  color: rgba(255, 255, 255, 1.0);
  background: rgba(240, 50, 70, 1.0); }

/* F O N T  I M P L E M E N T A T I O N */


/* HK Grotesk-Font LIGHT */

@font-face { 
  font-family: 'light';
  src: url("../fonts/HKGrotesk-Light.eot");
  src: url("../fonts/HKGrotesk-Light?#iefix") format("embedded-opentype"), url("../fonts/HKGrotesk-Light.woff2") format("woff2"), url("../fonts/HKGrotesk-Light.woff") format("woff"), url("../fonts/HKGrotesk-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

/* HK Grotesk-Font REGULAR */

@font-face { 
  font-family: 'regular';
  src: url("../fonts/HKGrotesk-Regular.eot");
  src: url("../fonts/HKGrotesk-Regular?#iefix") format("embedded-opentype"), url("../fonts/HKGrotesk-Regular.woff2") format("woff2"), url("../fonts/HKGrotesk-Regular.woff") format("woff"), url("../fonts/HKGrotesk-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

/* HK Grotesk-Font MEDIUM */

@font-face { 
  font-family: 'medium';
  src: url("../fonts/HKGrotesk-Medium.eot");
  src: url("../fonts/HKGrotesk-Medium?#iefix") format("embedded-opentype"), url("../fonts/HKGrotesk-Medium.woff2") format("woff2"), url("../fonts/HKGrotesk-Medium.woff") format("woff"), url("../fonts/HKGrotesk-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

/* HK Grotesk-Font SEMIBOLD */

@font-face { 
  font-family: 'semibold';
  src: url("../fonts/HKGrotesk-SemiBold.eot");
  src: url("../fonts/HKGrotesk-SemiBold?#iefix") format("embedded-opentype"), url("../fonts/HKGrotesk-SemiBold.woff2") format("woff2"), url("../fonts/HKGrotesk-SemiBold.woff") format("woff"), url("../fonts/HKGrotesk-SemiBold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }


/* Basic Setting */

body, html {
  width: 100%;
  height: auto;
  background-color: rgba(255, 255, 255, 1.0); }

/* T Y P O G R A F I E */

/* Basic Setting */

h1, h2, h3, h4, h5, h6, p {
    font-size: 100%;
    color: rgba(0, 0, 0, 1.0); }

h1 {
    font-size: 20px;
    letter-spacing: 0.05rem;
    line-height: 145%; }

h2 {
    font-size: 20px;
    letter-spacing: 0.05rem;
    line-height: 145%; }

p {
    font-size: 16px;
    letter-spacing: 0.05rem;
    line-height: 150%; }

/* Typography — Formate */

.titel {
  font-family: 'regular';
  margin-bottom: 20px;
  font-weight: normal;
  font-style: normal; }

.color {
  color: rgba(240, 50, 70, 1.0); }

/* Typography — Mediaqueries */

@media only screen and (min-width: 600px) and (orientation: portrait) {
   h1 {
    font-size: 21px; }
   h2 {
    font-size: 21px; }
   p {
	letter-spacing: 0.045rem; } }

@media only screen and (min-width: 850px) and (orientation: landscape) {
   h1 {
    font-size: 21px;
	letter-spacing: 0.04rem; }
   h2 {
    font-size: 21px;
	letter-spacing: 0.04rem; }
   p {
	letter-spacing: 0.045rem; } }

@media only screen and (min-width: 1000px) and (orientation: portrait) {
   h1 {
    font-size: 22px;
	letter-spacing: 0.04rem; }
   h2 {
    font-size: 22px;
	letter-spacing: 0.04rem; }
   p {
	letter-spacing: 0.045rem; } }

@media only screen and (min-width: 1170px) {
   h1 {
    font-size: 22px;
	letter-spacing: 0.04rem; }
   h2 {
    font-size: 22px;
	letter-spacing: 0.04rem; }
   p {
	letter-spacing: 0.045rem; } }

/* P A G E  E L E M E N T S */

/* Image Container Startscreen */

.heroContainerHome {
  width: 99%;
  height: 99vh;
  margin-top: 0.5%;
  margin-left: 0.5%;
  overflow: hidden;
  position: relative; }

@media only screen and (max-width: 850px) and (orientation: landscape) {
  .heroContainerHome {
  	width: 99%;
  	height: 98.5vh;
	margin-top: 0.5%;
    margin-left: 0.5%; } }

@media only screen and (min-width: 1000px) {
  .heroContainerHome {
  	width: 99.6%;
  	height: 99.3vh;
	margin-top: 0.25%;
    margin-left: 0.2%; } }

/* Overlay Container Startscreen */

.heroContainerHomeOffset {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 1.0);
  z-index: 1000;
  opacity: 0.0;
  -webkit-transition: all 1.2s ease-in-out;
  -moz-transition: all 1.2s ease-in-out;
  -ms-transition: all 1.2s ease-in-out;
  -o-transition: all 1.2s ease-in-out;
  transition: all 1.2s ease-in-out; }

.OffsetOn {
	opacity: 1.0; }

/* Container Background Images — e.g. Vita */

.backgroundContainer {
  width: 99%;
  min-height: 99vh;
  overflow: hidden;
  position: fixed;
  top: 0.5vh;
  left: 0.5%;
  opacity: 1.0;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out; }

/* Background Images */

/* Random Image 2 */

#random-2 {
   background: url("../img/startimages/startimage_landscape.jpg") no-repeat center center/cover; }
@media only screen and (orientation: portrait){
  #random-2 {
      background: url("../img/startimages/startimage_portrait.jpg") no-repeat center center/cover; } }
@media only screen and (max-width: 600px) and (orientation: portrait){
  #random-2 {
      background: url("../img/startimages/startimage_phone_portrait.jpg") no-repeat center center/cover; } }
@media only screen and (max-width: 800px) and (orientation: landscape){
  #random-2 {
      background: url("../img/startimages/startimage_phone_landscape.jpg") no-repeat center center/cover; } }

/* Text Container */

.textContainer {
  position: absolute;
  width: 80%;
  padding: 0;
  text-align: left;
  opacity: 1.0;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out; }

/* Spacer and Positions */

.startinfoSpacer {
  display: block;
  width: 25%;
  height: 5vh; }

/* Position of Text Container */

.top-left {
  left: 5vw;
  top: 3.5vh; }

.bottom-left {
  left: 5vw;
  bottom: 3.5vh; }

.top-right {
  right: 5vw;
  top: 3.5vh; }

.bottom-right {
  right: 5vw;
  bottom: 3.5vh;
  text-align: right;}

/* Mediaqueries Container and Images */

@media only screen and (orientation: landscape) {
.backgroundContainer {
  width: 99.5%;
  height: 99.5vh;
  left: 0.25%;
  top: 0.25vh; } }

@media only screen and (min-width: 1170px) {
.backgroundContainer {
  width: 99.6%;
  height: 99.6vh;
  left: 0.2%;
  top: 0.2vh; } }
	
@media only screen and (max-width: 850px) and (orientation: landscape) {
.backgroundContainer {
  width: 99%;
  height: 99vh;
  left: 0.5%;
  top: 0.5vh; } }

/* Mediaqueries */

@media only screen and (orientation: portrait) {
  .textContainer {
    width: 80%; }
  .top-left, .bottom-left {
    left: 6vw; }
  .top-right, .bottom-right {
    right: 6vw; } }

@media only screen and (min-width: 600px) {
  .textContainer {
    width: 66%; }
  .top-left, .top-right {
    top: 4.5vh; }
  .bottom-left, .bottom-right {
    bottom: 5vh; } }

@media only screen and (min-width: 850px) {
  .textContainer {
    width: 50%; } }

@media only screen and (orientation: landscape) {
  .textContainer {
    width: 33%; }
  .top-left, .bottom-left {
    left: 5vw; }
  .top-right, .bottom-right {
    right: 5vw; } }

@media only screen and (min-width: 1170px) {
  .textContainer {
    width: 33%; } }

@media only screen and (max-width: 850px) and (orientation: landscape){
  .textContainer {
    width: 66%; }
  .startinfoSpacer {
  	height: 2.5vh; } }

/*  Animation Elements */

.animationElement {
  	transition: transform .6s .0s ease-in-out;
  	-webkit-animation-fill-mode: forwards;
  	animation-fill-mode: forwards;
  	-webkit-opacity: 0;
  	-moz-opacity: 0;
  	-ms-opacity: 0;
  	-o-opacity: 0;
  	opacity: 0; }

.inView {
	-webkit-opacity: 1.0;
  	-moz-opacity: 1.0;
  	-ms-opacity: 1.0;
  	-o-opacity: 1.0;
  	opacity: 1.0;
    -webkit-transition: all 0.6s ease-in-out;
  	-moz-transition: all 0.6s ease-in-out;
  	-ms-transition: all 0.6s ease-in-out;
  	-o-transition: all 0.6s ease-in-out;
  	transition: all 0.6s ease-in-out; }

@-webkit-keyframes pulse {
  10% {
    opacity: 1; }
  20% {
    opacity: 0.5; }
  30% {
    opacity: 1; }
  40% {
    opacity: 0.5; }
  50% {
    opacity: 1; }
  60% {
    opacity: 0.5; }
  70% {
    opacity: 1; }
  80% {
    opacity: 0.5; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0; } }
	
@keyframes pulse {
  10% {
    opacity: 1; }
  20% {
    opacity: 0.5; }
  30% {
    opacity: 1; }
  40% {
    opacity: 0.5; }
  50% {
    opacity: 1; }
  60% {
    opacity: 0.5; }
  70% {
    opacity: 1; }
  80% {
    opacity: 0.5; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0; } }