* {
    margin:0;
    padding: 0;   
    box-sizing: border-box;
}

html, body {
    /* give this to all tags from html to .fullscreen */
    height:100%;
    margin:0;
    padding: 0;
    font-size:10px;
    line-height:100%;
    font-family: 'Roboto';
    -webkit-font-smoothing: antialiased;
}

/* Grundaufbau */
header {
    top: 0;
    z-index: 2000;
    transform: translateY(0);
    padding: 40px 40px 0 40px;
}

#wrapper {
    height: calc(100vh - 140px);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

#message {
    display: flex;
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
}

.column2 {
    margin-left: 20px;
}

/* Typografie */

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v18-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../fonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

h1, h2 {
    font-weight: 300;
    font-size: 32px;
    color: #565656;
    line-height: 36px;
    margin-bottom: 15px;
}

h2 {
    font-size: 20px;
    color: #000000;
    line-height: 24px;  
    margin-bottom: 0;
}

p, li {
    font-size: 15px;
    color: #878787;
    text-align: left;
    line-height: 20px;
    margin-top: 15px;
}

a {
    color: #d91f43;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul {
    margin-left: 15px;
}

/* Icons */

#info {
    fill: #000000;
}

#forbidden {
    fill: #d91f43;
}

#confirm {
    fill: #0ac100;
}

/* Loading Animation */

@-webkit-keyframes dot-keyframes {
  0% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  50% {
    opacity: 0.4;
    -webkit-transform: scale(0.7,0.7);
            transform: scale(0.7, 0.7);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

.loading-dots {
    margin: 50px 0;
    width: 100%;
}

.loading-dots--dot {
  -webkit-animation: dot-keyframes 2s infinite ease-in-out;
          animation: dot-keyframes 2s infinite ease-in-out;
  background-color: #d91f43;
  border-radius: 8px;
  display: inline-block;
  height: 8px;
  width: 8px;
    margin: 0 10px 0 0;
}

.loading-dots--dot:nth-child(2) {
  -webkit-animation-delay: .2s;
          animation-delay: .2s;
}

.loading-dots--dot:nth-child(3) {
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}

.loading-dots--dot:nth-child(4) {
  -webkit-animation-delay: .6s;
          animation-delay: .6s;
}

.loading-dots--dot:nth-child(5) {
  -webkit-animation-delay: .8s;
          animation-delay: .8s;
}

.loading-dots--dot:nth-child(6) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

/* Media Queries */

@media only screen and (max-height: 500px) and (orientation: landscape) {
    #wrapper {
        height: auto;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }
}

@media only screen and (max-width: 360px) and (orientation: portrait) {
    #wrapper {
        height: calc(100vh - 110px);
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }
}

@media only screen and (max-width: 640px)
{
    
    header {
        padding: 40px 40px 0 20px;
    }

    
    #message {
        display: block;
    }
    
    .column1, .column2 {
        width: 100%;
        margin: 20px 0 0 0;
    }
}