@font-face {
  font-family: 'HEL-BO';
  src: url('helvetica_neue_lt_std/HelveticaNeueLTStd-Bd.otf');
}

@font-face {
  font-family: 'HEL-ME';
  src: url('helvetica_neue_lt_std/HelveticaNeueLTStd-Roman.otf');
}

@font-face {
  font-family: 'HEL-TH';
  src: url('helvetica_neue_lt_std/HelveticaNeueLTStd-UltLt.otf');
}



html,
body {
  background-color: #fff;
  color: #303030;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #333;
}

*, ::before, ::after {
  box-sizing: inherit;
}

body {
  min-width: 16em;
  /*  max-width: 60em;*/

  font-family: 'HEL-ME', helvetica, sans-serif;
  font-size: 16px;
  line-height: 24px;
}






/*
orange: #FF7405
blau: #00fcfe
grau: #98a2a9
near black: #303030
*/


::selection {
  background: #00fcfe; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #00fcfe; /* Gecko Browsers */
}
a {
  color: #fff;
  text-decoration: none;
  opacity: 1;
  -webkit-transition: opacity 1s linear;
  /* Safari prior 6.1 */
  transition: opacity 1s linear;
}

a.blk {
  color: #000;
  text-decoration: underline;
}
a.planprint{
  color: #000;
  text-decoration: underline;
  float: right;
  font-family: 'HEL-BO', helvetica, sans-serif;
  color: #777;
  font-size: 0.7em;
}

a:hover {
  opacity: 0.66;
  color: #FF7405;
}

#hfk-logo{
  position: absolute;
  top: 0px;
  right: 0px;
}

/* Credits to https://www.gradient-animator.com/ by by Ian Forrest */

.starter {
    background: linear-gradient(235deg, #000000, #b328d6, #d62867);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 35s ease infinite;
    -moz-animation: AnimationName 35s ease infinite;
    -o-animation: AnimationName 35s ease infinite;
    animation: AnimationName 35s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:5% 0%}
    50%{background-position:96% 100%}
    100%{background-position:5% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:5% 0%}
    50%{background-position:96% 100%}
    100%{background-position:5% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:5% 0%}
    50%{background-position:96% 100%}
    100%{background-position:5% 0%}
}
@keyframes AnimationName {
    0%{background-position:5% 0%}
    50%{background-position:96% 100%}
    100%{background-position:5% 0%}
}
.starter_svg{
  fill: #fff;
}
.starter_text{
  padding: 20px 20px 20px 20px;
  width: 66%;
  font-family: 'HEL-BO', helvetica, sans-serif;
  color: #fff;
}

.plan_svg{
width:97%;
margin: 0 auto;
margin-top: 200px;
margin-bottom: 100px;

}
.title{
  padding-left: 15px;
  margin-top: 150px;
}
.txt{
  width: 800px;
  margin: 0 auto;


}

h1{
  font-family: 'HEL-TH', helvetica, sans-serif;
  font-size: 4em;
  line-height: 1.4em;


}

.footer{
  padding-top: 100px;

}

/* for Bottom Line only until 55em */
@media (max-width: 1300px) {


}

@media (max-width: 1190px) {

}

/* END for Bottom Line only */
@media (min-width: 65em) {


}

@media print {}