:root {
  --blue: #3369b1;
  --accentblue: #3fc2cf;
  --purple: #561245;
  --white: #fff9f2;
  --pink: #ec2677;
  --raspberry: #8f1e5a;
  --sea: #15727a;
  --grey: #ced2d2;
  --black: #000000;
}
BODY {
  margin: 0; padding: 0;
  background-color: var(--purple) !important;
  font-family: Poppins, arial, sans-serif; font-size: 1.9vh; font-weight: 300; background-color: var(--purple);
 }

H1 { margin: 0; padding: 0; font-size: 6.5vh; font-weight: 100; color: var(--white); }
H2 { margin: 0; padding: 0; font-size: 4.5vh; font-weight: 700; color: var(--grey); }
H3 { margin: 1vh 0 0 0; padding: 0; font-size: 2.2vh; font-weight: 700; color: var(--black); }
P { font-size: 1.9vh; font-weight: 100; }
A { color: var(--sea); }
BUTTON {
  margin: 0; padding: 1vh 2vh; height: auto; width: auto; border-radius: 10px;
  background-color: #245E56; border: 0.4vh solid var(--white); color: var(--white); cursor: pointer;
  font-family: Poppins, arial, sans-serif; font-size: 3.5vh; font-weight: 100; color: --var(white); text-transform: uppercase;
}
LI { margin: 0 0 1vh 0; text-align: left; }
DIV.thirds { text-align: center; }
DIV.thirds DIV.third { display: inline-block; margin: 0 2% 0 0; width: 25%; vertical-align: top; overflow: hidden; }


HEADER, FOOTER { margin: 0; padding: 20px 10vh 0 0; overflow: hidden; text-align: right; }
FOOTER { margin: 0; padding: 5vh 10vh; background: #000000; text-align: center; }
HEADER P, FOOTER P {
  font-family: Mulish, arial, sans-serif; font-size: 1.125rem; font-weight: 100; line-height: 1.5; color: var(--white); text-transform: uppercase;
}
HEADER P A, FOOTER P A { color: var(--white) !important; text-decoration: underline; }
HEADER IMG#logo { float: left; margin: 0 0 0 5vw; height: 100px; }

IMG#logo { margin: 5vh auto; height: 25vh; }

SECTION { margin: 0; text-align: left; overflow: hidden; text-align: center; }

/* About/Services Page */
SECTION#spiel { margin: 0; padding: 5vh 10vw; background-color: var(--white); }
SECTION#spiel H1 { color: var(--black); }
SECTION#spiel P { text-align: left; }

SECTION#tiers { padding: 5vh 0; background: var(--black); color: var(--white); }
SECTION#tiers H2 { margin: 2vh 0 1vh 0; font-size: 2.5vh; color: var(--raspberry);}
SECTION#tiers UL { margin: 0; text-align: left; }
SECTION#tiers UL LI { margin: 0 0 1vh 0; font-size: 2vh; }

SECTION#about { margin: 5vh 5vw; padding: 4vh 5vw 5vh 5vw; text-align: left; background: var(--white); }
SECTION#about H1 { margin: 0 0 3vh 0; font-size: 4.5vh; font-weight: 700; color: var(--black); }
SECTION#about IMG { float: right; margin: 0 0 2vh 2vh; width: 50%; }
SECTION#about P { margin: 0 0 2vh 0; }

/* Home Page */
SECTION#top { padding: 0 2vw; }
SECTION#top H1 { font-style: italic; font-weight: 0; }

SECTION#services { background-color: var(--white); margin: 5vh 0 0 0; padding: 2vh 10vh; text-align: left; }
SECTION#services TABLE {}
SECTION#services TABLE TD { padding: 1vh 1vw; }
SECTION#services UL { margin: 0; font-size: 1.9vh; font-weight: 100; color: --var(white); line-height: 2vh; }
SECTION#services LI { margin: 0 0 1vh 0; }

SECTION#recommendations { margin: 0; padding: 5vw 5vh; background-color: var(--purple); color: var(--white); text-align: center; }
SECTION#recommendations TABLE { width: 100% color: var(--white); text-align: left; }
SECTION#recommendations TABLE TR TD { width: 33%; padding: 2vw; text-align: left; }
SECTION#recommendations H2 { margin: 0; text-align: center; font-style: italic; }
SECTION#recommendations P { margin: 0.5vh 0 0 0; font-size: 1.7vh; line-height: 2.3vh; font-weight: 100; }

SECTION#consulting { margin: 0; padding: 5vh 5vw; background: var(--black); color: var(--white); text-align: left; }
DIV#articles { margin: 5vh 0 0 0; text-align: center; }
DIV#articles DIV.article { margin: 0 9% 0 0; width: 40%; display: inline-block; text-align: left; vertical-align: top; }
DIV#articles DIV.article DIV.img { width: 100%; height: 15vh; background-image: url(); background-repeat: no-repeat; background-size: cover; background-position: center 30%; background-color: var(--grey); }
DIV#articles DIV.article H3 { margin: 1vh 0 0.5vh 0; font-weight: 700; }
DIV#articles DIV.article P { margin: 0 0 0.5vh 0; }
DIV#articles DIV.article A {  }

DIV#background { position: absolute; top: 25vh; left: 0; width: 100%; height: 1920px; z-index: -100; overflow: hidden; background-image: linear-gradient(#561245, #000000);   }
DIV#background DIV { position: absolute; top: 0; left: 0; width: 7680px; height: 1920px; background-repeat: repeat-x; ba1ckground-size: cover; background-position: top left; opacity: 0.1; }
DIV#bg1 { background-image: url('one-white.png'); animation: 13s glide linear infinite; }
DIV#bg2 { background-image: url('one-black.png'); animation: 24s glide linear reverse infinite; }
DIV#bg3 { background-image: url('three.png'); animation: 31s glide linear infinite; }
@keyframes glide {
  0% {
    left: 0%;
  }
  100% {
    left: -1920px;
  }
}



div#cal {
  display: none;
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}
div#cal div.modal {
  margin: 10vh auto auto auto;
  width: 1000px;
  padding1: 5vh1;
  background-color1: white;
  text-align: center;
}




 @media only screen and (max-width: 1000px) {
   HEADER, FOOTER { padding: 5vh 2vw 0 2vw; }
   HEADER P, FOOTER P { text-align: center; line-height: 3vh; }
   DIV.thirds DIV.third { display: block; margin: 0; width: 100%; }
   SECTION#services { padding: 2vh 2vw; }
   DIV#articles DIV.article { margin: 0 0 2vh 0; width: 100%; display: block; }
   SECTION#tiers { padding: 5vh 2vw; }
   DIV#cal DIV.modal { width: 700px; }
   DIV#cal DIV.modal DIV.calendly-inline-widget { height: 1000px !important; }
 }

@media only screen and (max-width: 699px) {
  DIV#cal DIV.modal { width: 320px; }
  DIV#cal DIV.modal DIV.calendly-inline-widget { height: 850px !important; }
}