body {
    max-width: 100%;
    font-size: 110%;
    font-family: "proxima-nova", proxima-nova, sans-serif;
    font-weight: 300;
    color: #9197A6;
}

.background {
  position: absolute;
  max-width: 100%;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
}

#background_animation {
    width: 98%;
    height: auto;
    max-height: 98%;
    padding: 2%;
}

.content {
    position: absolute;
    top: 30%;
    max-width: 100%;
    height: auto;
    padding: 0 60px;
}

#logo {
    position: relative;
    height: 60px;
}

.logotype { color: #070430; }
.subtitle { color: #FFC759; margin-bottom: 60px; }
.subtitle::selection { background: #070430; }
.subtitle::-moz-selection { background: #070430; }

/* animation test */

.st0 { fill: none; stroke: #9197A6; stroke-width: 0.5px; stroke-miterlimit: 10; }
.st0.hidden { stroke-width: 0; }
.st1 { fill: none; stroke: #EB2F5B; stroke-width: 0.5px; stroke-miterlimit: 10; }
.st2 { opacity: 0.1; fill: #FFB194; }
.st3 { opacity: 0.1; fill: #FFC759; }
.st4 { opacity: 0.1; fill: #FF7146; }

#_1_line            { stroke-dasharray: 200;
                      stroke-dashoffset: 200;
                      animation: draw 1s ease-in-out forwards, color_fade 0.2s ease-out 1s forwards;
                    }

#radius_AB          { opacity: 0;
                      animation: blink 0.2s ease-in 1.2s forwards;
                    }

#_2_circle          { stroke-dasharray: 450;
                      stroke-dashoffset: 450;
                      animation: draw 2s ease-in-out 1.4s forwards, color_fade 0.2s ease-out 3.4s forwards;
                    }

#radius_BL          { opacity: 0;
                      animation: blink 0.2s ease-in 3.6s forwards;
                    }

#_4_circle          { stroke-dasharray: 895;
                      stroke-dashoffset: 895;
                      animation: draw 3s ease-in-out 3.8s forwards, color_fade 0.2s ease-out 6.8s forwards;
                    }

#_3_circle          { stroke-dasharray: 895;
                      stroke-dashoffset: 895;
              /*        transform-origin: 50%;
                      transform: rotate(180deg); */
                      animation: draw 3s ease-in-out 6.8s forwards, color_fade 0.2s ease-out 9.8s forwards;
                    }

#_5_line            { stroke-dasharray: 310;
                      stroke-dashoffset: 310;
                      animation: draw 2s ease-in-out 9.8s forwards, color_fade 0.2s ease-out 11.8s forwards;
                    }

#_6_line            { stroke-dasharray: 150;
                      stroke-dashoffset: 150;
                      animation: draw 1s ease-in-out 11.8s forwards, color_fade 0.2s ease-out 12.8s forwards;
                    }

#_7_line            { stroke-dasharray: 150;
                      stroke-dashoffset: 150;
                      animation: draw 1s ease-in-out 12.8s forwards, color_fade 0.2s ease-out 13.8s forwards;
                    }

#_8_equi_triangle   { opacity: 0;
                      animation: blink_part 0.4s ease-in-out 14s forwards;
                    }

#_9_circle          { stroke-dasharray: 455;
                      stroke-dashoffset: 455;
              /*        transform-origin: 50%;
                      transform: rotate(270deg); */
                      animation: draw 2s ease-in-out 15.2s forwards, color_fade 0.2s ease-out 17.2s forwards;
                    }

#_10_circle         { stroke-dasharray: 500;
                      stroke-dashoffset: 500;
          /*            transform-origin: 50%;
                      transform: rotate(180deg); */
                      animation: draw 2s ease-in-out 17.2s forwards, color_fade 0.2s ease-out 19.2s forwards;
                    }

#_11_line           { stroke-dasharray: 72;
                      stroke-dashoffset: 72;
                      animation: draw 0.6s ease-in-out 19.2s forwards, color_fade 0.2s ease-out 19.8s forwards;
                    }

#_12_line           { stroke-dasharray: 72;
                      stroke-dashoffset: 72;
                      animation: draw 0.6s ease-in-out 19.8s forwards, color_fade 0.2s ease-out 20.4s forwards;
                    }

#_13_equi_square    { opacity: 0;
                      animation: blink_part 0.2s ease-in-out 20.6s forwards;
                    }

#_14_circle         { stroke-dasharray: 300;
                      stroke-dashoffset: 300;
              /*        transform-origin: 50%;
                      transform: rotate(180deg); */
                      animation: draw 2s ease-in-out 21.6s forwards, color_fade 0.2s ease-out 23.6s forwards;
                    }

#_15_line           { stroke-dasharray: 80;
                      stroke-dashoffset: 80;
                      animation: draw 0.8s ease-in-out 23.6s forwards, color_fade 0.2s ease-out 24.4s forwards;
                    }

#_16_line           { stroke-dasharray: 50;
                      stroke-dashoffset: 50;
                      animation: draw 0.8s ease-in-out 24.4s forwards, color_fade 0.2s ease-out 25.2s forwards;
                    }

#_17_isosceles_triangle { opacity: 0;
                      animation: blink_part 0.2s ease-in-out 25.4s forwards;
                    }

#_18_line           { stroke-dasharray: 130;
                      stroke-dashoffset: 130;
                      animation: draw 1s ease-in-out 26.6s forwards, color_fade 0.2s ease-out 28.6s forwards;
                    }

#radius_EB          { opacity: 0;
                      animation: blink 0.2s ease-in-out 28.8s forwards;
                    }

#_20_circle         { stroke-dasharray: 502;
                      stroke-dashoffset: 502;
          /*            transform-origin: 50%;
                      transform: rotate(270deg); */
                      animation: draw 2s ease-in-out 30s forwards, color_fade 0.2s ease-out 32.8s forwards;
                    }

#radius_AF          { opacity: 0;
                      animation: blink 0.2s ease-in-out 33s forwards;
                    }

#_21_circle         { stroke-dasharray: 300;
                      stroke-dashoffset: 300;
                      animation: draw 2s ease-in-out 33s forwards, color_fade 0.2s ease-out 35s forwards;
                    }

@keyframes draw           { to { stroke-dashoffset: 0; } }
@keyframes blink          { to { opacity: 1; } }
@keyframes blink_part     { to { opacity: 0.1; } }
@keyframes color_fade     { to { stroke: #cccccc; } }


  nav a {
      margin-right: 20px;
  }
  ::selection {
  	background: #FFC759;
  	}
  ::-moz-selection {
  	background: #FFC759;
  }
  a {
      color: #070430;
      text-decoration: underline;
  }
  a i {
      color: #FF7146;
      font-size: 1.6em;
  }
  a:hover {
      color: #FFB194;
      text-decoration: underline;
  }
  a i:hover {
      color: #FFB194;
  }

  h1 {
      font-size: 3.875em;
      font-weight: 900;
      line-height: 1em;
      padding: 0;
      margin: 30px 0 0 0;
  }

  h2 {
      font-size: 1.8em;
      font-weight: 700;
      line-height: 1em;
      margin: 16px 0 20px 0px;
  }

  h3 {
      font-weight: 300;
      font-size: 1em;
      margin-left: 30px;
  }

  p {
      font-size: 0.825em;
  }

  ul {
      font-size: 0.825em;
      margin-left: 20px;
  }

  li {
      padding-bottom: 10px;
      padding-left: 20px;
  }
  
@media (max-width: 812px) {


#background_animation {
    width: 200%;
    height: auto;
    padding: 2%;
    margin-left: -50%;
    margin-top: 10%;
}

.content {
    top: initial;
    bottom: 20%;
    padding: 0 60px;
}

}
  
@media only screen and (max-device-width: 812px) {
  
  body  {
    font-size: 200%;
  }
  
  #background_animation {
      width: 200%;
      height: auto;
      padding: 2%;
      margin-left: -50%;
      margin-top: 10%;
  }
  
  .content {
      top: initial;
      bottom: 20%;
      padding: 0 60px;
  }
  nav {
    margin-top: 80px;
  }
  nav a {
      margin-right: 40px;
  }
  a i {
      font-size: 1.8em;
  }
  
}