@charset "UTF-8";
html {
  font-size: 100%;
  transition: font-size 0.2s linear;
}
@media (min-width: 70em) {
  html {
    font-size: 125% !important;
  }
}

body {
  font-size: inherit !important;
  background: #efebe0;
  color: #000;
  font-family: 'Raleway', sans-serif;
}

.navbar-inverse {
  background-color: transparent; border-color: transparent;
  margin-bottom: 0;
}

#header #logo img {
  padding: 0; margin: 0;
}
.navbar-logo img {
  max-height: 50px;
}
.featurette-heading {
  font-size: 60px;
  font-weight: 900;
  line-height: 66px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: var(--color--hex-alizarin-crimson);
}
.featurette-subheading {
  color: #fff;
  background-color: var(--color--hex-alizarin-crimson);
  position: relative;
  padding: 5px 0;
  color: white;
  background: var(--color--hex-alizarin-crimson);
  box-shadow: 10px 0 0 var(--color--hex-alizarin-crimson), -10px 0 0 var(--color--hex-alizarin-crimson);
}

.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover {
  color: var(--color--hex-alizarin-crimson);
  background-color: transparent;
}

.key-points{
  font-size: var(--large);
}

a {
  color: hsl(var(--color--hue-strikemaster), 19%, 44%);
}
a:hover {
  color: hsl(var(--color--hue-strikemaster), 19%, 64%);
  text-decoration: none;
}

.blog-ads-wrapper {
  margin: 0 auto;
  text-align:center;
  padding: 10px;
}

.clear::before, .clear::after { content: " "; display: table; }
.clear::after { clear: both; }

.fz-11 { font-size: 11px; }
.fz-12 { font-size: 12px; }
.fz-13 { font-size: 13px; }
.fz-14 { font-size: 14px; }
.fz-15 { font-size: 15px; }
.fz-16 { font-size: 16px; }
.fz-18 { font-size: 18px; }
.fz-30 { font-size: 30px; }
.fz-48 { font-size: 48px !important; }
.fw100 { font-weight: 100; }
.fw300 { font-weight: 300; }
.fw400 { font-weight: 400 !important; }
.fw500 { font-weight: 500; }
.f700 { font-weight: 700; }
.fsi { font-style: italic; }

.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mt-70 { margin-top: 70px; }
.mt-80 { margin-top: 80px; }
.mt-100 { margin-top: 100px; }
.mt-120 { margin-top: 120px; }
.mt-150 { margin-top: 150px; }

.ml-0 { margin-left: 0 !important; }
.ml-5 { margin-left: 5px !important; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }
.ml-30 { margin-left: 30px; }
.ml-50 { margin-left: 50px; }

.mr-0 { margin-right: 0 !important; }
.mr-5 { margin-right: 5px !important; }
.mr-15 { margin-right: 15px; }
.mr-10 { margin-right: 10px; }
.mr-20 { margin-right: 20px; }
.mr-30 { margin-right: 30px; }
.mr-50 { margin-right: 50px; }

.mb-0 { margin-bottom: 0px; }
.mb-0-i { margin-bottom: 0px !important; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }
.mb-80 { margin-bottom: 80px; }
.mb-90 { margin-bottom: 90px; }
.mb-100 { margin-bottom: 100px; }

.pt-0 { padding-top: 0px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }
.pt-25 { padding-top: 25px; }
.pt-30 { padding-top: 30px; }
.pt-40 { padding-top: 40px; }
.pt-50 { padding-top: 50px; }
.pt-60 { padding-top: 60px; }
.pt-70 { padding-top: 70px; }
.pt-80 { padding-top: 80px; }
.pt-90 { padding-top: 90px; }
.pt-100 { padding-top: 100px; }
.pt-120 { padding-top: 120px; }
.pt-150 { padding-top: 150px; }
.pt-170 { padding-top: 170px; }

.pb-0 { padding-bottom: 0px; }
.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.pb-50 { padding-bottom: 50px; }
.pb-60 { padding-bottom: 60px; }
.pb-70 { padding-bottom: 70px; }
.pb-80 { padding-bottom: 80px; }
.pb-90 { padding-bottom: 90px; }
.pb-100 { padding-bottom: 100px; }
.pb-120 { padding-bottom: 120px; }
.pb-150 { padding-bottom: 150px; }

.pr-30 { padding-right: 30px; }

.pl-30 { padding-left: 30px; }
.pl-90 { padding-left: 90px; }
.p-40 { padding: 40px; }


.button {
  padding: 10px;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  font-size: 1.25rem;
  -webkit-transition: background 0.1s ease;
  transition: background 0.1s ease;
  background: hsl(var(--hue), 100%, 50%);
  outline-color: hsl(var(--hue), 100%, 80%);
  outline: none;
}
.button:hover {
  background: hsl(var(--hue), 100%, 40%);
}
.button:active {
  background: hsl(var(--hue), 100%, 30%);
}

/*--------------------------------------------*\
	HOMEPAGE FANCY
\*--------------------------------------------*/
.diagonal-box {
  position: relative;
  padding: var(--skew-padding) 0;
  margin-top: -1px;
}
.diagonal-box:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transform: skewy(var(--angle));
  transform-origin: 50% 0;
  outline: 1px solid transparent;
  backface-visibility: hidden;
}

.bg-one:before {
  background-color: #fff;
}

.bg-two:before {
  background-image: linear-gradient(45deg, hsl(var(--color--hue-alizarin-crimson), 75%, 50%), hsl(var(--color--hue-alizarin-crimson), 75%, 60%));
}

.content {
  max-width: var(--width);
  margin: 0 auto;
  padding: 1.5em;
  position: relative;
  /* -----------
  enable the border to see, that the content
  perfectly fits into the section withou
  bleeding into the adjecting areas:
  ------------ */
}

/* --------------------
Clip Path Update
-------------------- */
.clip-path {
  position: relative;
  margin-top: calc( ( var(--clip-padding) * -1 ) - 2px );
  background-image: linear-gradient(hsl(var(--color--hue-strikemaster), 19%, 14%, 9%) 50%, 0, transparent 100%), linear-gradient(-135deg, hsl(var(--color--hue-whiterock), 22%, 81%), hsl(var(--color--hue-whiterock), 32%, 91%));
  background-size: .5em .5em, 100% 100%;
  padding: calc( ( var(--clip-padding) * 2 ) - ( var(--clip-padding) - var(--skew-padding) ) ) 0 4em;
  clip-path: polygon(0% calc(var(--clip-padding) * 2), 100% 0%, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(0% calc(var(--clip-padding) * 2), 100% 0%, 100% 100%, 0% 100%);
}

/* --------------------
Blog
-------------------- */
.post-body figure {
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 10px 0;
}

h1.heading-post {
  color: hsl(var(--color--hue-strikemaster), 19%, 44%);
}

.post .post-link {
  color: hsl(var(--color--hue-strikemaster), 19%, 44%);
}
.post .post-link:hover {
  color: hsl(var(--color--hue-strikemaster), 19%, 54%);
  text-decoration: none;
}
.post-body h3,
.post-body h2 {
  font-weight: 700;
}

/* --------------------
Presentational Styles
-------------------- */
h1 {
  line-height: 1.2;
  font-size: 3em;
  font-weight: 900;
  color: #444;
}
h1.home-page {
  text-align: center;
  margin: 0 auto 1em;
  padding: 0 1em;
  max-width: 42rem;
  line-height: 1.2;
  transform: skewY(var(--angle));
  font-size: 3em;
  text-transform: uppercase;
  font-weight: 900;
}


h2 {
  font-size: 2.5em;
  margin: 0 0 0.5em;
  font-weight: 900;
  color: #444;
  margin: 10px 0 0 0 !important;
}

.intro {
  font-size: 1.25em;
  transform: skewY(var(--angle));
  margin: 0em auto 0em;
  text-align: center;
  background: #fff;
  color: var(--color--hex-strikemaster);
  font-weight: 400;
  padding: 0.5em;
}
.intro a {
  background-image: linear-gradient(transparent 90%, 0, #003 100%);
  background-image: none;
  border-bottom: 4px solid;
  transition: none;
}
.intro a:hover {
  border-color: #a06;
  opacity: 1;
}

.box-wrapper {
  display: inline-block;
  vertical-align: top;
  margin: 5px;
  position: relative;
  z-index: 1;
  border: 1px solid #f6f4f3;
  border-top-color: #fff;
  border-radius: 3px;
  background-color: #ebe8e5;
  padding: 8px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.15);
}
.box-wrapper:after {
  position: absolute;
  z-index: 10;
  left: 8px;
  top: 8px;
  content: "";
  box-shadow: inset 1px 0 3px 2px rgba(0, 0, 0, 0.4);
}

/* image frame with image inset shadow by Thomas Bertok */
/* CREDIT: https://codepen.io/innerstorm/pen/hoidJ */
figure.frame {
  display: inline-block;
  vertical-align: top;
  margin: 10px;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 1px solid #f6f4f3;
  border-top-color: #fff;
  border-radius: 3px;
  background-color: #ebe8e5;
  padding: 8px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.15);
}
figure.frame:after {
  position: absolute;
  z-index: 10;
  left: 8px;
  top: 8px;
  content: "";
  width: inherit;
  height: 100%;
  box-shadow: inset 1px 0 3px 2px rgba(0, 0, 0, 0.4);
}
figure.frame img {
  border: 1px solid #f2f0ee;
  border-bottom-color: #fff;
  background: #fff;
  width: 100%;
}
figure.frame figcaption {
  position: absolute;
  left: 8px;
  bottom: 0;
  color: #a19181;
  font: normal 14px/18px "Archivo Black";
  text-shadow: 0 1px 0 #fff;
}

.newsletter-box {
  border-radius: 8px;
  background-image: linear-gradient(hsl(var(--color--hue-strikemaster), 19%, 14%, 2%) 80%, 0, transparent 100%), linear-gradient(-135deg, hsl(var(--color--hue-whiterock), 1%, 99%), hsl(var(--color--hue-whiterock), 32%, 91%));
  background-size: .5em .5em, 100% 100%;
}

.upper-case {
  text-transform: uppercase;
}

ul.customlist {
  padding-left: 6px;
}
ul.customlist li {
  margin-bottom: 8px;
  list-style-type: none;
}
ul.customlist li:before {
  font-family: FontAwesome;
  content: '\f00c';
  text-align: center;
  color: #1aaf87;
  display: inline-block;
  margin-right: 3px;
  padding: 1px 0;
  border-radius: 50%;
}

/*-------------------------------------------------------
  The lines below ain't related for the code.
  Their only purpose is to improve this demo's design.
-------------------------------------------------------*/
@media (max-width: 319px) {
  body {
    font-size: 15px;
  }
  body ul.customlist li:before {
    font-size: 9px;
  }
}

textarea:focus,
input:focus,
input[type]:focus,
.uneditable-input:focus {
  border-color: hsl(var(--color--hue-strikemaster), 19%, 44%);
  box-shadow: 0 1px 1px hsl(var(--color--hue-strikemaster), 19%, 44%, 100%) inset, 0 0 8px hsl(var(--color--hue-strikemaster), 19%, 44%, 100%);
  outline: 0 none;
}

.btn-primary {
  background-color: var(--button--bg-color);
  border-color: hsl(var(--color--hue-alizarin-crimson), 50%, 90%);
  display: inline-block;
}
.btn-primary:hover {
  background-color: hsl(var(--color--hue-alizarin-crimson), 50%, 50%);
  border-color: hsl(var(--color--hue-alizarin-crimson), 50%, 90%);
}

.post-body ul li,
.post-body ol li,
p {
  color: #444;
  font-size: 1.25em !important;
  margin: 0;
  line-height: 1.5;
}
p + p, svg + p {
  margin-top: 1em;
}
@media (min-width: 35em) {
  p code {
    white-space: nowrap;
  }
}
p a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(transparent 90%, 0, #fffa 100%);
  padding: 0.125em 0;
  transition: opacity 0.3s ease-out;
  color: #f0292a;
  font-weight: 800;
}
p a:hover {
  color: #f03535;
  text-decoration: none;
  opacity: 0.8;
}

.columns {
  display: flex;
  margin: 2em -1em;
}

.figure {
  display: block;
  width: 100%;
  margin: 0 1em;
}
.figure svg {
  display: block;
  width: 100%;
}
.figure .object {
  transform-origin: 140px 140px;
}
.figure .object--rotate {
  animation: rotate 3s ease-in-out alternate infinite;
}
.figure .object--skew {
  animation: skew 3s ease-in-out alternate infinite;
}
.figure .object--skew-pause {
  animation: skew-pause 6s ease-in-out infinite;
}
.figure .object--skew-pause-alt {
  animation: skew-pause-alt 6s ease-in-out infinite;
}
.figure figcaption {
  margin-top: 0.5em;
  line-height: 1.5;
  font-weight: 700;
  opacity: 0.9;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-11deg);
  }
  100% {
    transform: rotate(-11deg) scaleX(1.2);
  }
}
@keyframes skew {
  to {
    transform: skewY(-11deg);
  }
}
@keyframes skew-pause {
  0%, 70%, 100% {
    transform: skewY(0deg);
  }
  20%, 50% {
    transform: skewY(-11deg);
  }
}
@keyframes skew-pause-alt {
  0%, 40%, 100% {
    transform: skewY(0deg);
  }
  20%, 30% {
    transform: skewY(-11deg);
  }
}
.formula {
  font-family: monospace;
  font-size: 1.5em;
  display: block;
  margin: 1em auto;
  text-align: center;
}
@media (min-width: 26em) {
  .formula {
    font-size: 2em;
  }
}

.boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 3%;
  margin: 2em 0;
  --translation: 0;
}
.boxes .box {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border: 1px solid #fff;
  background: #fff3;
  transform: translateY(var(--translation));
  animation: translate 3s ease-in-out infinite;
}
.boxes .box:nth-child(1) {
  --translation: calc(var(--skew-padding) * 1.5);
}
.boxes .box:nth-child(2) {
  --translation: calc(var(--skew-padding) * 1);
}
.boxes .box:nth-child(3) {
  --translation: calc(var(--skew-padding) * 0.5);
}
.boxes .box:nth-child(4) {
  --translation: calc(var(--skew-padding) * 0);
}

@keyframes translate {
  0%, 20%, 100% {
    transform: translateY(0);
  }
  50%, 70% {
    transform: translateY(var(--translation));
  }
}
/* ---------------------------------
   Interactive Controls
--------------------------------- */
.controls {
  background: #FFF3;
  z-index: 5;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0 0 0.5em 0.5em;
  max-width: 90%;
}
.controls__headline {
  color: #fff;
  margin: 0.75em 1.125em 0.625em;
  font-size: 1em;
  text-align: center;
  font-weight: 400;
}

.angle-control {
  padding: 0.75em 0.625em 0.625em;
  margin: 0 0.5em;
  font-size: 1em;
  border-top: 1px solid #fff3;
  display: flex;
}
.angle-control > * {
  vertical-align: middle;
  margin: 0 0.5em;
}
.angle-control span {
  display: inline-block;
  min-width: 6ch;
}
.angle-control input {
  width: 8em;
  flex-shrink: 1;
}

.result {
  text-align: right;
}

[hidden] {
  display: none;
}


/*--------------------------------------------*\
	CSS VARIABLES
\*--------------------------------------------*/
@media (min-width: 42em) {
  :root {
    --width: 42rem;
  }
}
:root {
  --hue: 360;
  /*--width: 100vw;*/
  --full-width: 100vw;
  --angle: -6deg;
  /*-----------------
  Magic Number Alert:

  the 0.09719 is calculated by this formula:
  tan(11°) / 2
  11° is the current skewY value.
  ------------------*/
  --magic-number: 0.05419;
  --skew-padding: calc(var(--width) * var(--magic-number));
  --clip-padding: calc(var(--full-width) * var(--magic-number));


  /* breakpoints */
  --breakpoint--mobile-tablet: 640px;
  --breakpoint--tablet-desktop: 1024px;
  /* --breakpoint--desktop-wide: 1280px; */

  --color--hue-alizarin-crimson: 3; /* 75% 50% */
  --color--hex-alizarin-crimson: #de2820;

  --color--hue-strikemaster: 301; /* 19% 44% */
  --color--hex-strikemaster: #865c85;

  --color--hue-whiterock: 44; /* 32% 91% */
  --color--hex-whiterock: #efebe0;

  --color--hue-rhino: 147; /* 100% 54% */
  --color--hex-rhiono: #274259;

  /* colors */
  --color--bg: #fff;
  --color--fg: #000;
  --color--milky-white: #d7eef4;
  --color--milkier-white: #fdfff5;
  --color--light-grey: #cccccc;
  --color--lighter-brown: #edecec;
  --color--dark-grey: #a2bade;
  --color--grunge-grey: #97a1a4;
  --color--grunge-dark: #5a6062;
  --color--main-blue: #2e3cb4;
  --color--lighter-blue: #d7eef4;
  --color--light-blue: #cae1e6;
  --color--navy-blue: #383b57;
  --color--light-navy: #054656;
  --color--pale-blue: #367fa9;
  --color--dark-blue: #0b2228;
  --color--teal: #00ffd4;

  --color--retro-blue: #3c9aa7;
  --color--retro-green: #ced07d;
  --color--pj-red: #f0292a;
  --color--retro-yellow: #f6cb5b;
  --color--retro-teal: #96ceb3;

  /* spacing & padding */
  --small: 8px;
  --medium: 16px;
  --medium-top-bottom: 16px 0;
  --large: 32px;

  /* typography  */
  --serif: Georgia, 'Times New Roman', Times, serif;
  --sans-serif: -apple-system, BlinkMacSystemFont, 'Metropolis', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --monospace: monospace;

  --weight-light: 300;
  --weight-normal: 400;
  --weight-bold: 700;

  --family--h1: var(--sans-serif);
  --weight--h1: var(--weight-bold);
  --size--h1: 3rem;
  --line--h1: 1;
  --spacing--h1: 0;

  --family--h2: var(--sans-serif);
  --weight--h2: var(--weight-bold);
  --size--h2: 2.25rem;
  --line--h2: 1;
  --spacing--h2: 0;

  --family--h3: var(--sans-serif);
  --weight--h3: var(--weight-bold);
  --size--h3: 2rem;
  --line--h3: 1;
  --spacing--h3: 0;

  --family--h4: var(--sans-serif);
  --weight--h4: var(--weight-normal);
  --size--h4: 1.675rem;
  --line--h4: 1;
  --spacing--h4: 0;

  --family--h5: var(--sans-serif);
  --weight--h5: var(--weight-normal);
  --size--h5: 1.5rem;
  --line--h5: 1;
  --spacing--h5: 0;

  --family--h6: var(--sans-serif);
  --weight--h6: var(--weight-normal);
  --size--h6: 1.25rem;
  --line--h6: 1;
  --spacing--h6: 0;

  --family--body: var(--sans-serif);
  --weight--body: var(--weight-normal);
  --size--body: 16px;
  --line--body: 1.4;
  --spacing--body: 0;

  /* readability */
  --container-width: 960px;
  --readability-width: 50ch;

  /* links */
  --link--color: #00ffd4;

  /* buttons */
  --button--bg-color: var(--color--hex-alizarin-crimson);
  --button--fg-color: #fff;
  --button--px: 24px;
  --button--py: 8px;
  --button--border: 0;
  --button--rounded: 4px;
}