/* ToDo 

general:
  [OPTIONAL]  use em modified by vw for phone view; start wide, become slimmer
  [OPTIONAL]  Flexbox JS? Sane fallback, Class-Switching? 
  []  universal Modals (in-page infos / explanations), include INFO symbol
  []  Checkbox: enable functional checklist and evaluation
  [DONE]  table 'DATENSCHUTZ' is too wide
  [DONE]  limit size for Logo and Side-images (phone view)
  [DONE]  generalize impressum data structure
  [DONE]  generate FAV-ICON (package from fav-icon generator)

CMS:  
  [DONE] data fields for contact info, etc
  [DONE] reformat footer data (no table)

HEADER: 
  [DONE] logo links to home

FOOTER: 
  [DONE] portrait links to appropriate page (currently links to Aktuelles)
  [DONE]  change diamond to absolute positioning

MODAL:
  [DONE] include js-snippet to prevent background-scrolling

nav: 
  page structure
  [DONE] phone nav (hamburger); code from Ritz
  [DONE] correct alignment
  [DONE] correct sizing
  [DONE] remove search

quicknav:
  [DONE] top h1: center
  [DONE] superimpose quicknav icons in grid container
  [DONE] switch active/inactive icons on hover
  [DONE] repeater: change structure (one repeater-field for all 3 items);

pages:

  Home:
    swap:
    [DONE] "Kennen Sie das...?"
    [DONE] Beziehung als Kraftort - der Diamant
    [OPTIONAL] automate quicknav generation

  Aktuelles:
    [DONE] adjust structure to actual entries
    [DONE] style modals
    [DONE] apply js for correct scrolling

  Paarcoaching:
    media box/iFrame: video
    explanation: the diamond/Kraftort
    [OPTIONAL] in-page nav (for desktop); sticky
    [OPTIONAL] intersection handler - highlight current section in nav

  Feedback:
    Feedback boxes
    quote stripe (link to "Über Mich"), formatted like qn-stripe

  Kontakt:
    no aside images
    tables from Impressum / convert tables to function
    Google Map
    Anfahrt (Beschreibung)
    optional images

  Impressum:
    [DONE] layout and backend
    [] content: Datenschutz;
    [] content: Haftung;
    [] content: Copyright;
    [] content: Website;
*/


/* GENERAL SETTINGS =============================================================================================*/

/* load font from own server (as opposed to Google fonts) */
@font-face {
    font-family: RustScript;
    font-display: swap;
    src: url("/site/assets/files/fonts/ZingScriptRustSBDemo-Base.otf");
}

@font-face {
    font-family: Raleway;
    font-display: fallback;
    src: url("/site/assets/files/fonts/Raleway-Regular.ttf");
}

@font-face {
    font-family: Raleway;
    font-display: fallback;
    /*src: url("/site/assets/files/fonts/Raleway-Medium.ttf");*/
    src: url("/site/assets/files/fonts/Raleway-MediumItalic.ttf");
    /*src: url("/site/assets/files/fonts/Raleway-SemiBold.ttf");*/
    /*src: url("/site/assets/files/fonts/Raleway-SemiBoldItalic.ttf");*/
    /* src: url("/site/assets/files/fonts/Raleway-Bold.ttf");*/
    /* src: url("/site/assets/files/fonts/Raleway-BoldItalic.ttf");*/
    font-weight: bold;
}

/* @font-face {
    font-family: Qwigley;
    src: url("/site/assets/files/fonts/Qwigley-Regular.ttf");
}
 */
header, nav, main, footer, .quicknav-wrapper {
  display: grid;
  grid-template-columns: [far-left] 1fr [content-start] minmax(33rem, 73rem) [content-end] 1fr [far-right] 
}

body {
  margin: 0;
  padding: 0;
  background-image: url("/site/assets/files/background patterns/new/stripes-light.png");
  /* background-image: url("/site/assets/files/background patterns/ep_naturalwhite.png"); */
  /* color: #494949; */
  color: #000000;
  max-width: 100vw;
}

em {
  font-weight: bold;
}

h1 {
  font-family: 'RustScript', cursive;
  font-weight: normal;
  font-size: 1.8em;
  color: #777777;
}

h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: normal;
  font-size: 1.5em;
  color: #777777;
  text-transform: uppercase;
}

h3 {
  font-family: 'Raleway', sans-serif;
  font-weight: normal;
  font-size: 1.4em;
  color: #777777;
 /*  text-transform: uppercase; */

}

h4 {
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  font-size: 1.1em;
  color: #777777;
  /* text-transform: uppercase; */
}

th {
  font-family: 'Raleway', sans-serif;
  font-size: 1.2em;
  font-weight: normal;
  color: #656578;
  text-align: left;
}

p, h2, h3, td, li {

  font-family: 'Raleway', sans-serif;
  /* font-family: 'Lato', sans-serif; */
}

p {
  font-size: 1.1em;
}

img {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* a.link-on-red {
  
  color: #ffffff;
  font-weight: normal;
} */

header {
  background-color: #fff;
  border-top: 5px solid #a8090942;
  /* background-image: url('/site/assets/files/background patterns/new/stripes-light.png'); */  
  /* background-image: url('/site/assets/files/background patterns/regal.png'); */
      /*   justify-items: center;
      align-items: center; */
  width: 100%;

  display: grid;
  align-items: inherit;
  justify-items: inherit;

/* background: rgba(214,214,214,1);
background: -moz-linear-gradient(left, rgba(214,214,214,1) 0%, rgba(238,238,238,1) 35%, rgba(238,238,238,1) 50%, rgba(238,238,238,1) 65%, rgba(214,214,214,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(214,214,214,1)), color-stop(35%, rgba(238,238,238,1)), color-stop(50%, rgba(238,238,238,1)), color-stop(65%, rgba(238,238,238,1)), color-stop(100%, rgba(214,214,214,1)));
background: -webkit-linear-gradient(left, rgba(214,214,214,1) 0%, rgba(238,238,238,1) 35%, rgba(238,238,238,1) 50%, rgba(238,238,238,1) 65%, rgba(214,214,214,1) 100%);
background: -o-linear-gradient(left, rgba(214,214,214,1) 0%, rgba(238,238,238,1) 35%, rgba(238,238,238,1) 50%, rgba(238,238,238,1) 65%, rgba(214,214,214,1) 100%);
background: -ms-linear-gradient(left, rgba(214,214,214,1) 0%, rgba(238,238,238,1) 35%, rgba(238,238,238,1) 50%, rgba(238,238,238,1) 65%, rgba(214,214,214,1) 100%);
background: linear-gradient(to right, rgba(214,214,214,1) 0%, rgba(238,238,238,1) 35%, rgba(238,238,238,1) 50%, rgba(238,238,238,1) 65%, rgba(214,214,214,1) 100%); */

}

/* .svg-bg {
  width: 100%;
  height: 4.3em;
  grid-column: far-left / far-right;
  grid-row: 1;
} */

/* .svg-bg img {
  width: 100%;
  height: 100%;
  opacity: 0.5;
} */

.rel-box {position: relative;}

.padding-top {padding-top: 2em;}

.top-bar {
  /* display: grid; */
  grid-column: far-left / far-right; 
  z-index: 2;
  grid-row: 1;
  justify-self: center;
  /* padding: 0.9em 0 0.6em 0; */
}


.top-bar img {
  max-width: 14em;
  align-self: center;
}


/* TOPNAV ==================================================================================================*/

nav {
  position: sticky;
  position: -webkit-sticky;
  margin: 0;
  top: 0px;
  left: 0;
  z-index: 999;
  width: 100%;
  /* background-image: url(/site/assets/files/background patterns/new/light_checkered_tiles.png); */
  background-color: white;
  border-top: 2px solid #ffd3d3;
  border-bottom: solid 2px #7f0000;
  min-height: 3em;
  background-color: #c31313;
  box-shadow: 0px 6px 15px 4px #00000054;

  background: rgb(162,16,16);
  background: -webkit-linear-gradient(left, rgba(162,16,16,1) 0%, rgba(178,14,14,1) 25%, rgba(196,15,15,1) 40%, rgba(196,15,15,1) 60%, rgba(196,15,15,1) 60%, rgba(178,14,14,1) 75%, rgba(178,14,14,1) 75%, rgba(160,4,4,1) 100%);
  background: -o-linear-gradient(left, rgba(162,16,16,1) 0%, rgba(178,14,14,1) 25%, rgba(196,15,15,1) 40%, rgba(196,15,15,1) 60%, rgba(196,15,15,1) 60%, rgba(178,14,14,1) 75%, rgba(178,14,14,1) 75%, rgba(160,4,4,1) 100%);
  background: linear-gradient(to right, rgba(162,16,16,1) 0%, rgba(178,14,14,1) 25%, rgba(196,15,15,1) 40%, rgba(196,15,15,1) 60%, rgba(196,15,15,1) 60%, rgba(178,14,14,1) 75%, rgba(178,14,14,1) 75%, rgba(160,4,4,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a21010', endColorstr='#a00404',GradientType=1 );
}

.topnav-wrapper {
  grid-column: content-start / content-end;
  display: grid;
  grid-template-columns: 
  [edge-left] 1fr 
  [core-start] 8fr [core-center] 8fr 
  [core-end] 1fr [edge-right];
  grid-gap: 1rem;
  margin: 0;
  align-self: center; 
  color: white; 
}

.topnav {
  grid-column: 1 / span 4;
  margin-top: 0.3em;
  flex-wrap: wrap;
  font-family: 'Raleway', sans-serif;
  /* font-weight: bold; */
  line-height: 1.4em;
  display: flex;
  justify-content: center;
}

.lownav {
  display: none;
}


/*the following 3 .topnav entries are copied directly from main.css and adapted*/
.topnav a {
  font-size: 1rem;
  padding: 0.25em 0.5em 0.25em 0em;
  text-decoration: none; 
  text-transform: uppercase;
  display: block;
  background: none; 
  color: #fdbfbf;
  border: none; 
}

.topnav a:hover {
  background: none;
  /* color: #d20404; */ 
  /* font-weight: bold; */
  color: white;
}

.topnav li {
  margin: 0 0.5em;
}

.topnav li.current a {
  color: #ffffff;
  font-weight: bold;
  background: none; 
  /* color: #d20404;  */
}

.topnav-search {
  grid-column: 3;
  justify-self: right;
  display: none;
}

.small-logo {
  display: none;
}

form.search {
  width: auto;
  float: none;
}

.breadcrumbs-wrapper {
  display: grid;
  grid-template-columns: 2fr 4fr 2fr;
}

.breadcrumbs {
  grid-column: 2;
}

/*  HOME ================================================================================================================*/

/* MAIN CONTENT / HOME ==================================================================================================*/

main {
  grid-column: far-left / far-right;
  border-top: 2px solid #ccc;

  /* gradient ABBA from full transparancy at A, to 40% opacity white at B, and back */
  /* enhances central readability and diminishes distraction from bg-pattern*/
/*   background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.4) 70%, rgba(255,255,255,0) 99%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.4) 70%, rgba(255,255,255,0) 99%, rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.4) 70%, rgba(255,255,255,0) 99%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); */

  background: -moz-linear-gradient(left, rgba(255,249,249,0) 0%, rgba(255,249,249,0.4) 30%, rgba(255,249,249,0.4) 70%, rgba(255,249,249,0) 100%);
background: -webkit-linear-gradient(left, rgba(255,249,249,0) 0%,rgba(255,249,249,0.4) 30%,rgba(255,249,249,0.4) 70%,rgba(255,249,249,0) 100%);
background: linear-gradient(to right, rgba(255,249,249,0) 0%,rgba(255,249,249,0.4) 30%,rgba(255,249,249,0.4) 70%,rgba(255,249,249,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fff9f9', endColorstr='#00fff9f9',GradientType=1 );
}

.header-img {
  grid-column: edge-left / edge-right;
  grid-row: 1;
  margin: 0.8em 0 0 0;
  /*prevent borders from causing horizontal scrollbar*/
  box-sizing: border-box;
  border-top: 1px solid #4e3a21;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  border-left: 2px solid #4e3a21;
}

.header-img img {
  zoom: 2;
  max-width: 100%;
  box-shadow: 2px 2px 9px 0.4px rgba(0, 0, 0, 0.5);
}

.quotations {
  position: relative;
  display: grid;
  text-align: center;
  color: #656565;
  grid-template-columns: 1fr;
  grid-column: 2 / 4;
  font-size: 1.5em;
  margin-top: 0.5rem;
  padding-bottom: 1rem;
}


.q-marks-open, .q-marks-close {

/*z-index: 0;
  opacity: 0.15; */
  
  position: absolute;
  grid-column: 1;
  grid-row: 1;
  font-size: 9em;
  
  z-index: -1;
  opacity: 1;
  color: #6b6b6b2e;
}

.q-marks-open {
  left: -10px;
  bottom: -20px;
}

.q-marks-close {
  right: 10px;
  bottom: -20px;
}

.quote {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}


/* Example: keyframe animation in HOME */
/* start identical animation with different delays*/
/*
.quote-0 { animation: quote-anim 75s 0s  infinite linear; }
.quote-1 { animation: quote-anim 75s 15s infinite linear; }
.quote-2 { animation: quote-anim 75s 30s infinite linear; }
.quote-3 { animation: quote-anim 75s 45s infinite linear; }
.quote-4 { animation: quote-anim 75s 60s infinite linear; }


@keyframes quote-anim {

  0%   { opacity:0; }
  2%   { opacity:1; }

  20%   { opacity:1; }
  22%   { opacity:0; }

  100%  { opacity:0; }

}
*/
.profession-title, .profession-name {
  text-transform: uppercase;
  margin: 0;
  font-size: 1em;
  align-self: center;
  line-height: 1em;
}

.profession-title {
  grid-column: 1 / 3;
  text-align: right;
  font-weight: bolder;
  color: #ff1616;
}

.profession-name {
  grid-column: 3 / 5;
  text-align: left;
  font-weight: bold;
  color: #757575;
}


.separator {
  opacity: 0.3;
  justify-self: center;
  margin: 0;
  width: 15em;
  max-width: 40%;
  margin-bottom: 1em;
}

.duo-card {
  display: grid;
  grid-template-columns: 10fr 1fr 10fr;
  /* color: #656565; */
}

#intro .duo-card {
  grid-column: 2 /-2;
}

.duo-card.impress-data, .contact-data {
  grid-column: 2 /-2;
}

.duo-card .left {
  grid-column: 1; 
}

.duo-card .right {
  grid-column: 3;
}

.duo-card ul {
/*   padding-inline-start: 20px; */
  align-self: end;
  margin: 0 auto;
  width: auto;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  padding-right:  0.4em;
}

.white-card {
  background-color: white;
  border: 1px solid #c7c7c7;
  border-top: 1px solid #ef3b3b;
  padding: 0;
  font-size: 1.1em;
}

#intro .white-card {
  display:  grid;
}

.white-card h1 {
  text-align: center;
}

.white-card h2 {
  font-family: RustScript, cursive;
  text-transform: initial;
/*   font-size: 1.4em; */
}

.white-card p, .white-card h1, .white-card h2 {
  padding-left: 0.5em;
  padding-right:  0.5em;
}

.white-card table td {
  line-height: 1.3em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  vertical-align: top;
}

.white-card.left table {
  padding-bottom: 0;
}

#intro .white-card.left h1 {
  /* color: #656565; */
  align-self: center;
}

#intro .white-card.right h2 {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
  color: #656565;
}

#intro .white-card.right p:first-of-type {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  text-align: left;
  justify-self: left;
  margin: 0;
  padding-bottom: 0.5em;
  padding-top: 0.2em;

  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.7em;
}

#intro .white-card.right p:nth-of-type(2) {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  text-align: right;
  justify-self: right;
  margin: 0;
  padding-bottom: 0.5em;
  padding-top: 0.2em;

  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.7em;
}

#intro .white-card.right p:nth-of-type(3), #intro .white-card.left p {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  text-align: center;
  border-top: 1px solid #cacaca;
  margin: 0;
  padding: 0.5em 0;
  background-color: #d63e3e;
  color: white;
}

#intro .white-card.right img {
  grid-row: 1 / 3;
  grid-column: 1 / -1;
  justify-self: center;
  align-self: start;
  height: 7em;
  opacity: 0.2;
  padding-top: 0.3em;
}

.tag {
  justify-content: left;
  display: grid;
  color: white;
  text-shadow: 0px 0px 8px black;
  content: " ";
  position: relative;
  grid-column: 1 / 5;
  margin: 0;
}

.credo {
  margin: 0;
  position: absolute;
  top: -51px;
  left: 11px;
  font-size: 1.16em;
  font-weight: bold;
}

.partner {
  margin: 0;
  left: 10px;
  top: -60px;
  position: absolute;
  font-size: 1em;
  line-height: 0.9em;
  text-transform: uppercase;
}


.shoutout-phone {
  width: 4em;
  max-width: 15%;

}

.shoutout-left {
  grid-column: 1 / 3;
  justify-self: right;
  max-width: 75%;
  z-index: 2;
}

.shoutout-right {
  grid-column: 3 / 5;
  justify-self: left;
  max-width: 75%;
  z-index: 2;
}

.shoutout-left img, .shoutout-right img {
  width: 10em;
}

.shoutout p {
  margin-top: 0;
  color: #808080;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1em;
}

.bloom-bg {
  width: 50em;
  max-width: 90%;
  opacity: 0.3;
  z-index: 1;
  /* align-self: start; */
}

.ca-teaser {
  border: 1px solid #d6d6d6;
  display: grid;
  padding: 0.5em;
  grid-column: 2 / -2;
  /* grid-template-columns: 19rem 2rem 1fr; */
  grid-template-columns: 19em 1em 1fr;
  background-color: #ffffffc7;
}

.border-top {
  border-top: 1px solid #ff7a7a;
}

.ca-teaser .ca-img {
  grid-column: 1;
  grid-row: 1 / 4;
  padding: 1em;
  display: grid;
  align-self: center;
  border: none;
  max-width: 17em;
}

.ca-teaser a.ca-img img {
  transition: box-shadow 0.2s linear;
  box-shadow: 4px 4px 4px 2px #00000029;
  background-color: white;
  box-sizing: border-box;
  border: 1px solid white;
}

.bracket-bg {
  display: none;
}

.ca-teaser .ca-title {
  grid-column: 3 / 4;
  grid-row: 1;
}

.ca-teaser a.ca-title {
  border: none;
}

.ca-teaser .tri-card-text {
  grid-column: 3;
  grid-row: 2;
  font-size: 1.1em;
}

.tri-card-text li {
  font-family: 'Raleway', sans-serif;
}

a.text-link {
  font-weight: bold;
}

.ca-teaser a.ca-img:hover img {
  box-shadow: 4px 4px 10px 2px #00000060;
}


/* Intro block for Aktuelles (Übersicht) */
.tri-card {
  display: grid;
  grid-column: 2 / -2;
  grid-row: 1;
  grid-template-columns: 7.8rem 2vw 1fr;
  grid-template-rows: 2rem 6rem;
  /* border-top: 1px solid #7f7f7f; */
  padding-top: 0rem;
  margin-bottom: 2rem;
  padding-right: 10vw;
}

.tri-card img {
  grid-row: 1 / 3;
  grid-column: 1;
  width: 8em;
  border-radius: 1.2em;
  transition: transform 0.3s, box-shadow 0.2s linear;
  box-shadow: 4px 4px 4px 2px #00000029;
}

.tri-card img:hover {
  box-shadow: 4px 4px 10px 2px #00000060;
  -ms-transform: translate(0px,-4px);
  -webkit-transform: translate(0px,-4px);
  transform: translate(0px,-4px);
}

.tri-card h1 {
  grid-row: 1;
  grid-column: 3;
  align-self: start;
  margin: 0;
}

.tri-card p {
  grid-row: 2;
  grid-column: 3;
  align-self: start;
  margin: 0;
}

/* QUICKNAV / HOME ==================================================================================================*/

.quicknav-wrapper {
    grid-column: far-left / far-right;
    display: grid;
    position: relative;
    overflow: hidden;
    background-color: #ffffff8f;
    background-image: url('/site/assets/files/background patterns/2019/brushed_alu_dark.png');
    border-top: 3px solid #bb0000;
    border-bottom: 3px solid #bb0000;
    box-shadow: 0px 2px 5px 2px #00000066;
    margin-top: 2em;
    margin-bottom: 1em;
}

.quicknav-content {
  display: grid;
  grid-column: content;
  grid-row: 1;
  position: relative;
  /* grid-template-columns: [edge-left] 1fr minmax(5em, 20em) minmax(5em, 20em) minmax(5em, 20em) 1fr [edge-right]; */
  grid-template-columns: [edge-left] 1fr minmax(5em, 19em) minmax(5em, 19em) minmax(5em, 19em) 1fr [edge-right];
  grid-gap: 4px;
  padding: 2em 0px 1em 0;
  justify-items: center;
}

  .quicknav-deko-1{
    display: none;
    width: 125px;
    position: absolute;
    bottom: 35%;
    right: 4vw;
  }

  .quicknav-deko-2 {
    position: absolute;
    right: -19em;
    bottom: -2.6em;
    width: 46em;
    opacity: 0.4;
  }

.quicknav-deko-1 img, .quicknav-deko-2 img {
  /* opacity: 0.4; */
  width: 50em;
  z-index: -1;
  }

.quicknav-content h1 {
  grid-column: edge-left / edge-right;
  margin: 0 0 1em 0;
  color: #e8e8e8;
}

.quicknav-content img {
  max-height: 9em;
  max-width: none;
  transform: translate3d(0, 0, 0);
} 

.quicknav-content a {
  border: none;
  background-image: url("/site/assets/files/background patterns/redox_01.png");
  /* background-image: url("/site/assets/files/background patterns/new/cardboard.png"); */
  align-self: center;
  justify-self: center;
  border-radius: 5px;
  padding: 0.1em 1.2em;
  box-shadow: 1px 3px 16px 1px rgba(0, 0, 0, 0.3);
  /* transition: box-shadow 0.3s ease; */
  -webkit-transition: transform .3s, box-shadow .25s;
  -moz-transition: transform .3s, box-shadow .25s;
  -ms-transition: transform .3s, box-shadow .25s;
  -o-transition: transform .3s, box-shadow .25s;
  transition: transform .3s, box-shadow .25s;
  border-top: 3px solid #c31313;
  }

.quicknav-content a:hover {
  text-decoration: none;
  box-shadow: 2px 6px 17px 5px #04040433;
  -ms-transform: translate(0px,-4px);
  -webkit-transform: translate(0px,-4px);
  transform: translate(0px,-4px);
}  

.quicknav-content a .inactive-img, .quicknav-content a .inactive-img {
  transition: opacity 0.4s ease;
  opacity: 1;
  padding-top: 8px;
}

.quicknav-content a .active-img, .quicknav-content a .active-img {
  transition: opacity 0.4s ease;
  opacity: 0;
  padding-top: 8px;
}

.quicknav-content h2 {
  font-family: 'RustScript', cursive;
  text-transform: initial;
  font-size: 1.8em;
  color: #e8e8e8;
  margin: 0.3em 0 1em 0;
}

h2.qn-coach , h2.qn-paar, h2.qn-team {grid-row: 3;}

a.qn-coach, a.qn-paar, a.qn-team  {grid-row: 2;}

h2.qn-super, h2.qn-psycho, h2.qn-massage {grid-row: 5;}

a.qn-super, a.qn-psycho, a.qn-massage {grid-row: 4;}

h2.qn-coach, a.qn-coach, h2.qn-super, a.qn-super {grid-column: 2;}

h2.qn-paar, a.qn-paar, h2.qn-psycho, a.qn-psycho {grid-column: 3;}

h2.qn-team, a.qn-team, h2.qn-massage, a.qn-massage {grid-column: 4;}

.qn-left h2 {
  justify-self: center;
}

.qn-right h2 {
  justify-self: center;
  grid-column: 2;
}

.qn-left img, .qn-left a img {
  grid-column: 2;
  margin: 0;
  justify-self: right;
}

.qn-right img, .qn-right a img  {
  grid-column: 1;
  margin: 0;
  justify-self: left;
}

.superlink {
  display: grid;
}

.quicknav-content a:hover .inactive-img {
  opacity: 0;
}

.quicknav-content a:hover .active-img {
  opacity: 1;
}

.superlink img {
  grid-column: 1;
  grid-row: 1;
}

/* END: QUICKNAV / HOME ==================================================================================================*/

/* MAIN GENERAL / HOME =========================================================================================================*/

.content-wrapper {
  grid-column: content-start / content-end;
  display: grid;
  grid-template-columns: 
  [edge-left] 1fr 
  [core-start] 8fr [core-center] 8fr 
  [core-end] 1fr [edge-right];
  grid-gap: 1rem;
  margin-bottom: 1rem;
}

.content-wrapper.layout-aside {
  grid-column: content-start / content-end;
  display: grid;
  grid-template-columns: [edge-left] 1.3fr [core-start] 8fr [core-center] 8fr [core-end] 1.3fr [edge-right];
  grid-auto-rows: min-content;
  grid-gap: 1rem;
  margin-bottom: 2rem;
}

.content-wrapper.layout-2c {
  grid-auto-rows: min-content;
}

/* PAGE Aktuelles: adjust top margin, make space for .top-line */
.content-wrapper.layout-aside:first-of-type {
  margin-top: 2rem;
}

.content-wrapper a {
  /* border: none */;
}

/* .layout-2c-off .ca-teaser h1, #credo h1 { */
.ca-teaser h1 {
  grid-column: 2 / 4;
  grid-row: 2;
  margin-bottom: 0;
}

#credo h1 {
    grid-column: 2 / 4;
    margin-bottom: 1em;
    text-align: center;
}

.column-1  {
  grid-column: core-start / core-center;
  grid-row: 3;
  margin: 0;
}

.inset-image {
  width: 14em;
  max-width: 50vw;
  float: left;
  margin-right: 1rem;
}

.column-1 p:first-of-type, .column-2 p:first-of-type {
  margin-top: 0;
}

.intro-img {
  grid-column: 3;
  grid-row: 3;
  max-width: 12rem;
  justify-self: center;
}

.column-2 {
  grid-column: 3;
  grid-row: 3;
  margin-left: 0;
}

#credo .column-2 {
  display: grid;
  grid-column: core-center;
  grid-template-rows: 8fr 1fr 1fr;
  /* border-top: 1px solid red; */
  margin: initial;
  color: #505050;
  background-color: #ffffff;
  border: 1px solid lightgray;
  border-top: 1px solid red;
}

#credo .column-2 h2 {
  grid-column: 1;
  grid-row: 1;
  font-family: 'RustScript', cursive;
  text-transform: initial;
  text-align: center;
  align-self: center;
  padding-left: 10%;
  padding-right: 10%;
  color: #777777;
}

#credo .column-2 p {
  grid-column: 1;
  justify-self: right;
  text-align: right;
  margin: 0;
  font-weight: bold;
  padding-right: 2rem;
  color: #5f5f5f;
}

#credo .column-2 p:first-of-type {
  grid-row: 2;
  align-self: end;
  text-transform: uppercase;
}

#credo .column-2 p:last-of-type {
  grid-row: 3;
  align-self: start;
  font-size: small;
}

.ornament-left, .ornament-right {
  grid-column: 1;
  grid-row: 1 / 5;
  height: 11em;
  opacity: 0.2;
  max-height: 60%;
}

.ornament-left {
  align-self: start;
  margin-top: 1em;
  justify-self: left;
}

.ornament-right {
  align-self: end;
  justify-self: right;
}

/* END: HOME ==================================================================================================*/



/* START: AKTUELLES ===========================================================================================*/
.debug {
  display: none;
}

.top-line {
  border-bottom: 2px solid white;
  position: absolute;
  grid-column: 1 / -2;
  /* left: -2.1rem; */
  grid-row: 1;
  top: -4.2rem;
  width: 100%;
}

.content-wrapper:first-of-type .top-line {
  grid-row: 2;
}

.side-image {
  position: sticky;
  position: -webkit-sticky;
  grid-column: 1;
  grid-row: 1 / 3;
  top: 70px;
  width: 4em;
}

#seminare .side-image {
  grid-column: 1;
  grid-row: 2 / 4;
}

.impress .side-image{
  grid-column: 1;
  grid-row: 1 / 4;
}

.impress .white-card.left, .contact .white-card.left {
  display: grid;
  align-items: center;
}

.impress .white-card.right table, .contact .white-card.right table {
  width: 100%;
}

.coaching ul.contact-table {
  padding-inline-start: 0;
  list-style-type: none;
  text-align: center;
  padding: 5px;
}

.side-image {
  grid-column: 1;
  grid-row: 1 / span 4;
}

#impressum .side-image {
  grid-column: 1;
  grid-row: 1 / 3;
}

.centered {
  grid-column: 1 / -1;
  justify-self: center;
}

.centered-2 {
  grid-column: 2 / -2;
  justify-self: center;
}

.img-link img {
  border: 1px solid gray;
  border-top: 1px solid red;
  width: 6em;
  transition: transform 0.3s, box-shadow 0.2s linear;
  box-shadow: 4px 4px 4px 2px #00000029;
}

.img-link img:hover {
  box-shadow: 4px 4px 10px 2px #00000060;
  -ms-transform: translate(0px,-4px);
  -webkit-transform: translate(0px,-4px);
  transform: translate(0px,-4px);
}

#checkup .img-link {
  margin-right: 2em;
}

.checkup-test {
  display: grid;
  grid-template-columns: 8em 8em 1fr;
}

.checkup-test h3 {
  grid-column: 1 / -1;
}

.checkup-test p {
  grid-column: 3;
  grid-row: 2 / 4;
  margin-top: 0;
}

.checkup-test .img-link:first-of-type {
  grid-row: 2;
  grid-column: 1;
  margin-top: 0.5em;
}

.checkup-test .img-link:nth-of-type(2) {
  grid-row: 2;
  grid-column: 2;
  margin-top: 0.5em;
}


@media (max-width: 767px) {

  .checkup-test {
    grid-template-columns: 1fr 1fr;
  }

  .checkup-test p {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  /* both links */
  .checkup-test .img-link {
    margin-bottom: 1em;
    justify-self: center;
  }

  .checkup-test .img-link:first-of-type {
    grid-column: 1;
    grid-row: 3;
   }

  .checkup-test .img-link:nth-of-type(2) {
    grid-column: 2;
    grid-row: 3;
  }
}

.left-deko {
  grid-row: 1;
  grid-column: 1 / -1;
  justify-self: left;
  align-self: end;
}

.right-deko {
  grid-row: 1;
  grid-column: 1 / -1;
  justify-self: right;
  align-self: end;
}

.left-deko img, .right-deko img {
  width: 5em;
  max-width: 15vw;
  opacity: 0.5;
}

.soe-wrapper {
  grid-column: core-start / core-end;
  display: grid;
  border-radius: 0.5em;
  /* grid-gap: 2em; */
  grid-template-columns: 4fr 0.2fr 4fr;
  /* grid-template-columns: 4fr 4fr; */
  margin: 0 0 2em 0;
  line-height: 1.3em;
}

.event-wrapper {
  grid-column: core-start / core-end;
  display: grid;
  /* grid-gap: 2em; */
  /* grid-template-columns: 1fr 3fr 0.2fr 1fr 3fr; WHY OH WHY?*/
  grid-template-columns: 1fr 3fr;
  border: 1px solid #c7c7c7;
  margin: 0 0 1em 0;
}

.soe-card {
  grid-row: 1 / span 4;
  transition: box-shadow 0.2s linear;
  box-shadow: 0px 0px 10px 3px #08080838;
  border: 2px solid #ffffff;
  content: " ";
  z-index: 5;
}

.soe-card:hover {
  box-shadow: 0px 0px 12px 3px #00000080;
  border: 3px solid white;
}

.soe-image {
  grid-row: 1 /span 4;
  margin: 0;
  /*  min-width: 20.1rem; */
  max-width: 100%;
  width: 100%;
}

.soe-image.filler-img {
    position: absolute;
    left: 0em;
    bottom: 0em;
    /* justify-self: unset; */
    /* align-self: unset; */
    /* height: auto; */
    width: 100%; 
    /* height: 100%; */
    opacity: 1;
    /* height: 20vw; */
    max-width: 100%; 
    z-index: 0;
    /* transform: rotate(-45deg); */
}

.soe-title {
  grid-row: 2;
  background-color: white;
  opacity: 0.8;
  color: #c31313;
  margin: 0;
  font-size: 1.7em;
  /* flex-flow: column-reverse; */
  padding: 0.9rem 0 1.1rem 0.6rem;
  line-height: 1em;
}

.modal-inner .soe-title {
  background-color: #a22828;
  opacity: 1;
  color: white;
  margin: 0;
  /* flex-flow: column-reverse; */
  padding: 0.5em 0.3em;
}

.soe-description {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
  opacity: 0.8;
  color: black;
  max-height: 5em;
  padding: 0 0.6rem 0.6rem 0.6rem;
  /* align-self: end; */
  background-color: white;
  /* align-content: end; */
  overflow: hidden;
  flex-flow: column-reverse;
  z-index: 2;
}

.soe-timing {
  grid-row: 4;
  margin: 0;
  background-color: #bf2828;
  color: white;
  min-height: 2.6em;
  /* font-weight: bold; */
  padding: 0.2rem 0.6rem 0.2rem 0.6rem;
  border: 3px solid #ffffff;
}

.soe-details-off {
  grid-column: 2;
  margin: 0;
  padding: 0 0.6rem;
  padding: 0 0.6rem 0.6rem 0.6rem;
  align-self: self-end;
  font-weight: bold;
}

.left.soe-card, .left.fadeout-white, .left.soe-image, .left.soe-title, .left.soe-description, .left.soe-timing {
  grid-column: 1;
}
.right.soe-card, .right.fadeout-white, .right.soe-image, .right.soe-title, .right.soe-description, .right.soe-timing {
  grid-column: 3;
}

.event-title {
  grid-column: 1 / -1;
  grid-row: 1;
  color: white;
  margin: 0;
  text-align: center;
  padding: 0.6rem;
  background-color: #d63e3e;
}

.event-fill {
  grid-row: 1 / span 3;
  align-self: end;
  justify-self: center;
  max-height: 100%;
}

.event-sub-title {
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: center;
  color: #bf2828;
  font-weight: bold;
  background-color: white;
  font-size: 1.2em;
  margin: 0;
  padding: 0 0.6rem 0 0.6rem;
}

.event-description {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
  text-align: center;
  background-color: white;
  padding: 0.6rem;
  line-height: 1.3em;
  border-bottom: 1px solid #c7c7c7;
}

.event-date {
  grid-column: 1;
  grid-row: 4;
  display: grid;
  align-content: center;
  margin: 0;
  padding: 0.6rem;
  padding-right: 0;
  background-color: #fff;
  font-weight: bold;
  line-height: 1em;
  color: #c31313;
}

.event-location {
  grid-column: 2 / -1;
  grid-row: 4;
  display: grid;
  align-content: center;
  /* text-align: center; */
  font-weight: bold;
  line-height: 1em;
  margin: 0;
  padding: 0.6rem;
  background-color: #fff;
  border-bottom-left-radius: inherit;
} 
/* END: AKTUELLES ===========================================================================================*/

/* START: PAARCOACHING ==================================================================================================*/

/* .coaching h1, .coaching h2, .coaching h3, .coaching p, .coaching ul {
  margin: 0 0 1em 0;
}  */

/* .coaching .ca-teaser h1, .coaching .ca-teaser h2, .coaching .ca-teaser h3, .coaching .ca-teaser p, .coaching .ca-teaser ul {
  margin: 0;
}  */

.contact-image {
    grid-column: 3;
    grid-row: 1 / 10;
    padding-right: 10px;
}

.contact-image img {
    min-width: 6em;
    width: 8em;
    margin-top: 3em;
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}

.coaching ul {    
  line-height: 1.5em;
  font-size: 1.1em;
  background-color: #ffd3d34d;
  padding: 5px;
  box-sizing: border-box;
  padding-inline-start: 25px;
  border-top: 1px solid red;
}

.coaching li {
  margin-bottom: 0.5em;
}

.column-left {
  grid-column: 2;
}

.column-right {
  grid-column: 3;
}


.column-span {
  grid-column: 2 / 4;
}

/*

.column-left.centered-image {
  justify-self: left;
  align-self: center;
}

.column-right.centered-image {
  justify-self: right;
  align-self: center;
}

.pos-left { text-align: left; }
.pos-center { text-align: center; }
.pos-right { text-align: right; }
*/




.column-left, .column-right {
  display: grid;
  grid-template-rows: min-content;

}

.column-left img, .column-right img {
/* align-self: center; */
width: 100%;
max-width: 500px;
margin-top: 1em;
}

.column-left img {
  justify-self: left;
}

.column-right img {
  justify-self: right;
}

/* #paarcoaching .column-right img, #paarcoaching .column-left img {
width: 90%;
} */

/* exception for signet and signature NOTICE difference of main #uber-mich and section #ueber-mich */

#ueber-mich .column-right img:first-of-type {
  justify-self: center;
  width: 12em;
  max-width: 60%;
}

#ueber-mich .column-right img:nth-of-type(2) {
 justify-self: center;
  width: 16em;
  max-width: 80%;
}

/* .column-right.centered-image img:first-of-type {
  justify-self: left;
  } */

/* .column-right.centered-image img:nth-of-type(2) {
  justify-self: left;
  } */


.column-left h1, .column-left h2, .column-left h3, 
.column-right h1, .column-right h2, .column-right h3 {
  text-align: left;
} 

.column-span h1, .column-span h2, .column-span h3 {
  text-align: center;
}

p a {
  font-weight: bold;
  color: #ea4545;
}


/* END: PAARCOACHING =======================================================================================*/

/* START: FEEDBACK ===========================================================================================*/

/* INTRO */

#intro-feedback {
  display: grid;
  /* grid-template-columns: 3fr 7fr; */
  grid-column: 2 / -2;
  grid-gap: 0.8em;
}

#intro-feedback img {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
}

#intro-feedback h1 {
  /* grid-column: 2; */
  grid-row: 1;
}

#intro-feedback p {
  grid-column: 2;
  grid-row: 2;
}

.gender {
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: bold;
    color: #c83030;
}

img.gender {
  display: grid;
  margin: 0 auto;
  width: 18em;
  margin-top: 1em;
  grid-column: 1 / -1;
  opacity: 0.9;
}

#feedback h1 {
  margin-top: 0;
  margin-bottom: 0;
  grid-column: 1 / -1;
  /* grid-row: 3; */
  text-align: center;
}

#feedback p{
  grid-column: 1 / -1;
}


/* END: FEEDBACK =======================================================================================*/

/* START: Kontakt ===========================================================================================*/

.phoning-img, .phoning-left, .phoning-right {
    grid-row: 1;
    grid-column: 2 / -2;
    justify-self: center;
    align-self: center;
    width: 4em;
    max-width: 15%;
}

.phoning-left, .phoning-right  {width: 10em; max-width: 60%;}

.phoning-left {grid-column: 1 / 3;}
.phoning-right{grid-column: 3 / 5;}

/* END: Kontakt =======================================================================================*/

/* START: IMPRESSUM ===========================================================================================*/

.content-wrapper.asym {
  grid-column: content-start / content-end;
  display: grid;
  grid-template-columns: [edge-left] 1.3fr [core-start] 10fr [core-center] 6fr [core-end] 1.3fr [edge-right];
  grid-gap: 1rem;
  margin-bottom: 2rem;

//	display: grid;
//	grid-column: 2 / 3;
//	grid-template-columns: [edge-left] 1fr [core-start] 10fr [core-center] 6fr [core-end] 1fr [edge-right];
}

.content-wrapper.impress > h1, .content-wrapper.contact > h1, 
.content-wrapper.impress > h3, .content-wrapper.contact > h3, 
.content-wrapper.impress > p, .content-wrapper.contact > p {
  grid-column: 2 / 4;
  grid-row: 1;
  margin-top: 0;
}

.impress-data .white-card.left {
  grid-column: 1;
}

.impress-data .white-card.left tr td:first-of-type {
  text-transform: uppercase;
}


.impress-data .white-card.right {
  grid-column: 3;
}

.impress-data .white-card.left, .impress-data .white-card.right {
  grid-row: 2;
}

.sidebar {
	grid-column: 3 / 4;
  grid-row: 1 / -1;
}

.impress table, .contact table {
  width: auto;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-bottom: 0.5em;
}

.impress tr:nth-child(even), .contact tr:nth-child(even) {
  background-color: #f2f2f2;
}

.impress .separator {
  grid-column: 2 / 4;
  /* grid-row: 3;  gets auto appended*/
  margin-bottom: 0;
  align-self: end;
}

.sep2 {
  grid-column: 2 / 4;
  /* grid-row: -1; gets auto appended*/
  align-self: end;
}

.impress section, .contact section {
  grid-column: 2 / 4;
}

.contact iframe {
  grid-column: 2 / 4;
  width: 100%;
  box-sizing: border-box;
  border: 2px solid lightgray;
  border-top: 1px solid red;
}




/* END: IMPRESSUM ===========================================================================================*/

/* FOOTER ==================================================================================================*/

footer {
	position: relative;
	display: grid;
	grid-column: 1 / 6;
	/* grid-template-columns: 1fr [far-left] 10fr [content-start] minmax(15rem, 35rem) 3rem [content-center] minmax(15rem, 35rem) [content-end] 1fr [far-right]; */
	/* grid-template-columns: [far-left] 1fr [content-start] 8fr [content-center] 7fr [content-end] 1fr [far-right]; */
	/* grid-template-columns: [far-left] 1fr [content-start] minmax(33rem, 73rem) [content-end] 1fr [far-right]; */
	
	border-top: 3px solid #da7a7a;
	border-bottom: 5em solid #7c0e0e;

  padding-top: 1.5em;
  padding-bottom: 1.5em;

	margin-top: 4em;

  /* gradient*/
  background: rgb(132,9,9);
  background: -moz-linear-gradient(left, rgba(132,9,9,1) 0%, rgba(170,13,13,1) 35%, rgba(170,13,13,1) 65%, rgba(132,9,9,1) 100%);
  background: -webkit-linear-gradient(left, rgba(132,9,9,1) 0%,rgba(170,13,13,1) 35%,rgba(170,13,13,1) 65%,rgba(132,9,9,1) 100%);
  background: linear-gradient(to right, rgba(132,9,9,1) 0%,rgba(170,13,13,1) 35%,rgba(170,13,13,1) 65%,rgba(132,9,9,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#840909', endColorstr='#840909',GradientType=1 );


}

.footer-inner {
  padding-top: 2em;
  margin-left: 1em;
  margin-right: 1em;
  grid-column: content-start / content-end;
  display: grid;
  grid-template-columns: [edge-left] 1fr [core-start] 8fr [core-center] 8fr [core-end] 1fr [edge-right];
}

.footer-deko {
  position: relative;
  grid-row: 8;
  width: 5em;
  align-self: end;
  grid-column: 1 / 5;
  justify-self: center;
}

.footer-deko img {
  position: absolute;
  top: -2.5em;
} 

footer p, footer h1, footer h2, footer h3, footer th, footer td {
  color: #ffc5c5;
}

/* content: Kontakt */
footer h1 {
  grid-column: core-start / core-end;
  grid-row: 1;
  margin: 0;
  margin-bottom: 1em;
}

footer p {
}

footer th {
  height: 1.4em;
}

/*content: hinterlassen Sie eine Nachricht... */
footer h2:first-of-type {
  font-family: 'RustScript', cursive;
  text-transform: initial;
  grid-column: 2 / -2;
  text-align: center;
  grid-row: 7;
  margin-top: 0.1em;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
  background-color: #ce3535;
  /* border: 2px solid #ff7b7b54; */
  border-radius: 5px;
  /* background: linear-gradient(to right, rgba(133, 9, 9,0) 20%,rgba(206, 53, 54, 0.8) 45%,rgba(206, 53, 53, 0.8) 55%,rgba(133, 9, 9,0) 80%); */

}

footer table {
  border-collapse: collapse;
}

/* content: phone number and mobile; */
footer table:first-of-type {
/* display:none; */

  grid-column: 2 / -2;
  grid-row: 2 / 4;
  align-self: end;
  margin: 0;
  line-height: 1.5em;
  text-transform: uppercase;
}

/* content: e-mail address; */
footer table:nth-of-type(2) {
/* display:none; */

  grid-column: 2 / -2;
  grid-row: 5;
  margin: 0;
  /* justify-self: left; */
  text-align: left;
  /* text-transform: uppercase; */ 
}

footer td {
  line-height: 1em;
  vertical-align: top;
}

footer td:first-of-type {
  min-width: 4.2em;
  width: 10%;
  font-weight: bold;
}

/* content: TEL - MOBIL; */
p.footer-phone {
display:none;

  grid-column: 2 / -2;
  grid-row: 2 / 4;
  align-self: end;
  margin: 0;
  line-height: 1.5em;
  text-transform: uppercase;
}

/* content: Blandina Scholz */
p.footer-name {
  grid-column: 3;
  grid-row: 4;
  margin: 0;
  text-align: right;
  font-size: 0.95em;
  font-weight: bold;
}

/* content: Datenschutz - Impressum */
p.footer-links {
  grid-column: core-center;
  grid-row: 8;
  justify-self: right;
  text-align: right;
  align-self: end;
  margin: 0;
}

/* content: Öffnungstermin */
p.footer-time {
  grid-column: 2 / -2;
  grid-row: 6;
  line-height: 1.2em;
  margin: 0;
  margin-top: 1.5em;
}

a.footer-portrait {
  grid-column: 3;
  grid-row: 1 / 4;
  align-self: end;
  justify-self: right;
  border: none;
  max-width: 7em;
  
  transform: translate3d(0,0,0);

  -webkit-transition: transform .3s;
  -moz-transition: transform .3s;
  -ms-transition: transform .3s;
  -o-transition: transform .3s;
  transition: transform .3s;
}

a.footer-portrait:hover {
  -ms-transform: translate(0px,-4px);
  -webkit-transform: translate(0px,-4px);
  transform: translate(0px,-4px);
}

a.footer-portrait img {
    box-shadow: 1px 3px 16px 1px rgba(0, 0, 0, 0.3);
    border: 2px solid #ffc5c5;
}

a.footer-portrait:hover img {
  box-shadow: 8px 8px 17px 0px #0000005e;
}

footer .footer-line {
  grid-column: 1 / -1;
  grid-row: 1 / 5;
  justify-self: center;
  border-right: 2px solid #ffffff24;
}

/* absolute position for logout and edit*/
footer a.dev-tool {
  position: absolute;
  top: -30px;
  text-transform: uppercase;
  left: 10px;
  color: #b6b6b6;
  z-index: 100;
  border: none;
}

footer a.dev-tool:nth-of-type(2) {
  left: 100px;
}


/*
************************************************************** 
FUNCTIONAL CLASSES:
**************************************************************
*/
.mt0 {margin-top: 0em;}
.mt1 {margin-top: 1em;}
.mt2 {margin-top: 2em;}
.mt3 {margin-top: 3em;}

.mb0   {margin-bottom: 0em;}
.mb1   {margin-bottom: 1em;}
.mb2   {margin-bottom: 2em;}
.mb1-5 {margin-bottom: 1.5em;}
.mb3   {margin-bottom: 3em;}

.pl1 {padding-left: 1em;}
.pr1 {padding-right: 1em;}


.row-1    {grid-row: 1;}
.row-2    {grid-row: 2;}
.row-3    {grid-row: 3;}
.row-4    {grid-row: 4;}
.row-5    {grid-row: 5;}
.row-6    {grid-row: 6;}
.row-7    {grid-row: 7;}
.row-8    {grid-row: 8;}

.row-1-4  {grid-row: 1 / 4;}
.row-5-8  {grid-row: 5 / 8;}

.c-1 {grid-column: 1;}
.c-2 {grid-column: 2;}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.text-white {
  color: white;
}

.dark-gray p {
  color: #6f6f6f;
}

.bold p {
  font-weight: bold;
}

.text-rose {
  color: #ffafaf;
  text-decoration-color: #ffafaf;
}

a.hover-white:hover {
  color: white;
  text-decoration-color: white;
} 

p a:hover, a.hover-red:hover, a.hover-red h1:hover {
  text-decoration-color: #ff0000;
} 

.stripe-red {
  border-left: 3em solid #d63e3e;
}

/* ERROR 404 PAGE NOT FOUND */ 

#error404 {
  margin-bottom: 0;
}

#error404 .side-image {
  grid-row: 1 / 3;
}

#error404 h1 {
  grid-column: 2 / 4;
  text-align: center;
  font-size: 2.6em;
}

.error-images {  
  grid-column: 2 / 4;
  height: 40em;
  /* max-height: 40em; */
}

#error404 img:nth-of-type(2) {
  justify-self: left;
  z-index: 2;
}

#error404 img:nth-of-type(3) {
  justify-self: center;
  z-index: 1;
}

#error404 img:nth-of-type(4) {
  justify-self: right;
  z-index: 1;
}

#error404 img:nth-of-type(5) {
  justify-self: left;
  z-index: 3;
}

@media (max-width: 650px) {

  #error404 h1 {
  font-size: 2em;
  margin: 0;
}

  .error-images {  
    grid-column: 2 / 4;
    height: 40em;
    max-height: 70vh; 
  }

  #error404 img:nth-of-type(2) {
    justify-self: left;
  }

  #error404 img:nth-of-type(3) {
    justify-self: center;
    display: none;
  }

  #error404 img:nth-of-type(4) {
    justify-self: right;
  }

  #error404 img:nth-of-type(5) {
    justify-self: left;
  }

}