/*
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Titel : style.scss
Autor : Raimund Buechner, rb@netzbrausen.de, www.netzbrausen.de
Fuer : Dirk "Emti" Freier
Projekt: Web Visitenkarte

Erstellt: 17.08.2017
Aenderungen nach Fertigstellung:
- Datum, Was, Autor
- Datum, Was, Autor
- Datum, Was, Autor

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* This mixin is meant to help enable/disable OpenType features in your web pages with web fonts that support them 
** Taken from Jason Pamental < *cool dude*!
** https://github.com/jpamental/otfeatures
*/
/*
OpenType Features Key
@mixin otfeatures($c2sc: 0, $calt: 0, $clig: 0, $dlig: 0, $frac: 0, $hist: 0, $hlig: 0, $kern: 0, $liga: 0, $nalt: 0, $ncase: 0, $nspace: 0, $salt: 0, $ss01: 0, $ss02: 0, $ss03: 0, $ss04: 0, $ss05: 0, $swsh: 0, $zero: 0)

// Ligatures 
"liga" : common ligatures 
"dlig" : discretionary ligatures 
"clig" : contextual ligatures 
"hlig" : historical ligatures 

// Alternate Characters
"swsh" : swashes 
"calt" : contextual alternates 
"hist" : historical character alternatives 
"salt" : stylistic alternatives 

// Kerning
"kern" : enable use of embedded kerning table 

// Letter Case
"smcp" : small caps 
"c2sc" : small caps from caps 

// Stylistic Alternates
"ss01" : alternate stylistic set 1 
"ss02" : alternate stylistic set 2  
"ss03" : alternate stylistic set 3 
"ss04" : alternate stylistic set 4 
"ss05" : alternate stylistic set 5 

// Numeric Extras
"zero" : slashed-zero 
"nalt" : alternate annotation 

The following OT Features are either/or rather than single choices, so require some 'if/else' logic
// Number Case
"ncase" : number case
    0: default
    lnum: lining figures
    onum: old style figures

// Number Spacing
"nspace": number spacing
    0: default
    pnum: proportional spacing
    tnum: tabuplar spacing

"frac"  : fractions
    0: off
    frac: normal fractions
    afrc: alternate fractions
*/
/**
 * Helper functions
 */
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

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

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  line-height: 1;
  font-family: sans-serif; }

iframe {
  border: 0; }

header,
footer,
nav,
section,
article,
figure,
main {
  display: block; }

ul,
ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0; }

dl {
  margin-top: 0;
  margin-bottom: 0; }

dd {
  margin-left: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: inherit; }

blockquote {
  margin: 0;
  padding: 0; }

p {
  margin-top: 0;
  margin-bottom: 0; }

sup {
  position: relative;
  top: -.5em;
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0; }

strong {
  font-weight: bold; }

figure {
  margin: 0; }

img {
  border: 0;
  max-width: 100%;
  height: auto;
  vertical-align: middle; }

a {
  text-decoration: none;
  color: inherit; }

button {
  border: 0;
  margin: 0;
  padding: 0;
  text-align: inherit;
  text-transform: inherit;
  font: inherit;
  -webkit-font-smoothing: inherit;
  letter-spacing: inherit;
  background: none;
  cursor: pointer;
  overflow: visible; }

::-moz-focus-inner {
  border: 0;
  padding: 0; }

body {
  font-family: "Fira Mono", monospace;
  font-size: 1em;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1.4;
  color: #366063;
  background: #e0eaeb;
  background: -webkit-radial-gradient(ellipse farthest-corner, #d7dbdb 20%, #e4e7e7 40%, #d7dbdb 90%, #c9cecf);
  background: -o-radial-gradient(ellipse farthest-corner, #d7dbdb 20%, #e4e7e7 40%, #d7dbdb 90%, #c9cecf);
  background: radial-gradient(ellipse farthest-corner, #d7dbdb 20%, #e4e7e7 40%, #d7dbdb 90%, #c9cecf); }
  @media only screen and (min-width: 64.0625em) {
    body {
      font-size: 1.1em;
      line-height: 1.5; } }

h1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin: 0;
  padding: 1rem 4% .5rem;
  width: 100%;
  text-align: center;
  font-size: 2em;
  font-weight: 400;
  color: #577375;
  text-shadow: 3px 3px 8px #798486; }
  h1 span {
    padding: 0 .5rem; }
  h1 strong {
    font-weight: 500; }
  @media only screen and (min-width: 48em) {
    h1 {
      margin: 0;
      padding: 2rem 0 .5rem;
      width: calc(46% - 1rem);
      text-align: left; } }

h2 {
  margin: 0 0 1em;
  padding: 6px 0 3px 1em;
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #50a4b1;
  color: #577375;
  background: rgba(237, 247, 248, 0.05);
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 4px rgba(33, 145, 156, 0.1), 1px 1px 1px rgba(255, 255, 255, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 4px rgba(33, 145, 156, 0.1), 1px 1px 1px rgba(255, 255, 255, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.1); }

ol,
ul {
  margin: 0;
  padding-left: 1rem;
  list-style-type: none; }

li {
  margin: 0 0 1.4em; }

strong {
  font-weight: 500; }

a {
  font-weight: 500;
  text-decoration: none;
  color: #088691;
  background: transparent;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  a:hover, a:focus, a:active {
    color: #0068b3;
    text-decoration: underline; }

.animated--float {
  -webkit-animation: float_rbu01 10s linear infinite;
  animation: float_rbu01 10s linear infinite;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%; }

.animated--shake_vertical {
  -webkit-animation: shake-vertical 10s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
  animation: shake-vertical 10s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%; }

@-webkit-keyframes float_rbu01 {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  1% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px); }
  4% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px); }
  5% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  6% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px); }
  8% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px); }
  9% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes float_rbu01 {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  1% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px); }
  4% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px); }
  5% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  6% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px); }
  8% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px); }
  9% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes shake-vertical {
  0%,
  89%,
  99%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  90%,
  92%,
  94%,
  96% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px); }
  91%,
  93%,
  95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px); }
  97% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px); }
  98% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px); } }

@keyframes shake-vertical {
  0%,
  89%,
  99%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  90%,
  92%,
  94%,
  96% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px); }
  91%,
  93%,
  95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px); }
  97% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px); }
  98% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px); } }

.c_page_content_box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  padding: 0 0 0;
  min-height: auto;
  background: #e0eaeb;
  border-radius: 10px;
  -webkit-box-shadow: 1px 1px 6px rgba(38, 108, 115, 0.1), 8px 10px 20px rgba(38, 108, 115, 0.2), -1px 2px 2px rgba(38, 108, 115, 0.1), -1px -1px 0 white;
  box-shadow: 1px 1px 6px rgba(38, 108, 115, 0.1), 8px 10px 20px rgba(38, 108, 115, 0.2), -1px 2px 2px rgba(38, 108, 115, 0.1), -1px -1px 0 white;
  background: -webkit-gradient(linear, left top, left bottom, from(#e4e7e7), color-stop(15%, #f2f3f3), color-stop(85%, #e2e9e9), to(#d3dede));
  background: -webkit-linear-gradient(top, #e4e7e7, #f2f3f3 15%, #e4e7e7 85%, #d7dbdb);
  background: -o-linear-gradient(top, #v, #f2f3f3 15%, #e4e7e7 85%, #d7dbdb);
  background: linear-gradient(to bottom, #e4e7e7, #f2f3f3 15%, #e4e7e7 85%, #d7dbdb); }
  @media only screen and (min-width: 17.5em) {
    .c_page_content_box {
      padding: 0; } }

.c_page_content_box__header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row  wrap;
  -ms-flex-flow: row  wrap;
  flex-flow: row  wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 1rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px; }
  @media only screen and (min-width: 48em) {
    .c_page_content_box__header {
      -webkit-box-pack: end;
      -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
      justify-content: flex-end; } }

.c_page_content_box__main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  margin: 0;
  padding: 0 0 1.5em;
  max-width: 1400px; }
  @media only screen and (min-width: 48em) {
    .c_page_content_box__main {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: stretch;
      -webkit-align-items: stretch;
      -ms-flex-align: stretch;
      align-items: stretch; } }

.c_page_content_box__section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  margin: 0;
  padding: 6px 4% 0;
  width: 100%; }
  @media only screen and (min-width: 17.5em) {
    .c_page_content_box__section {
      padding: .7em 4% 0; } }
  @media only screen and (min-width: 48em) {
    .c_page_content_box__section {
      padding: .7em 4% 2em;
      width: 50%; } }

.vcard {
  margin-top: 0;
  margin-bottom: 0; }

.vcard_data {
  margin: 0 0 0;
  padding-left: 1rem; }

/*.vcard_data.fn,*/
.vcard_data.adr {
  margin: 0 0 1.4em; }

.vcard_term {
  display: none; }

.vcard_term.org {
  display: block;
  margin: 0 0 1em;
  padding: 6px 0 3px 1em;
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #50a4b1;
  color: #0f808a;
  background: rgba(237, 247, 248, 0.05);
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 4px rgba(33, 145, 156, 0.1), 1px 1px 1px rgba(255, 255, 255, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 4px rgba(33, 145, 156, 0.1), 1px 1px 1px rgba(255, 255, 255, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.1); }

.vcard_term.disclaim {
  display: block;
  margin: 0 0 1.4em;
  padding-left: 1rem;
  font-weight: 500;
  font-style: italic; }

.vcard_term.disclaim span {
  display: block;
  font-weight: normal; }

.vcard_term.disclaim + .vcard_data span {
  display: block; }

.scripsit {
  display: block;
  padding: 0;
  font-size: 1rem;
  line-height: 1; }
  .scripsit img {
    display: block;
    margin: 16px auto;
    margin: 1rem auto;
    border: none;
    background: transparent; }
  @media only screen and (min-width: 48em) and (min-height: 38.75em) {
    .scripsit {
      position: absolute;
      bottom: 0;
      right: 1rem;
      margin: 0; } }

.l_wrapper_outer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0;
  padding: 0; }
  @media only screen and (min-width: 17.5em) {
    .l_wrapper_outer {
      width: 100%;
      height: 100%; } }

.l_wrapper_inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: auto 0;
  padding: 2%; }
  @media only screen and (min-width: 17.5em) {
    .l_wrapper_inner {
      min-height: 100vh; } }
  @media only screen and (min-width: 48em) {
    .l_wrapper_inner {
      padding: 4%; } }

.l_centered_box {
  margin: 0 auto;
  width: 66.666%;
  max-width: 37em;
  text-align: left; }
  @media only screen and (min-width: 17.5em) {
    .l_centered_box {
      width: 96%;
      max-width: none; } }
  @media only screen and (min-width: 48em) {
    .l_centered_box {
      max-width: 50em; } }