section.main {
  min-height: 90vh;
  padding: 0 25px 5%;
  box-sizing: content-box;
}
section.main.light {
  background: #fff;
  color: #000;
}
section.main.medium {
  background: #e7e7e7;
  color: #000;
}
section.main.dark {
  background: #000;
  color: #fff;
}
section.main > div.blurb {
  width: 74%;
  padding: 5% 0;
}
section.main > div.blurb > * {
  margin-bottom: 4%;
}
section.main > div.blurb > *.title {
  font-size: 25px;
}
section.main > div.blurb > *.body {
  line-height: 1.4;
}
section.main > div.blurb > *.buttonCont .button {
  margin-right: 3%;
}
section.main#intro {
  position: relative;
  background: linear-gradient(270deg, #693cb9, #1c285b);
}
section.main#intro > div {
  margin: 0 auto;
  width: 100%;
}
section.main#intro > div#introHeader {
  text-align: center;
  color: #fff;
}
section.main#intro > div#introHeader .heading {
  font-size: 4em;
  margin: 3% 0 0;
}
section.main#intro > div#introHeader span {
  margin: 2% 0;
  font-size: 1.5em;
}
section.main#intro > div.introSS {
  position: relative;
  height: 508px;
}
section.main#intro > div.introSS #introVid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
section.main#intro > div.introSS #introVid img {
  filter: drop-shadow(0px 0px 9px black);
  cursor: pointer;
}
section.main#intro > div.introSS #introVid img[src$="spinner.png"] {
  animation: rotate360 600ms steps(9) infinite;
}
section.main#intro > div.introSS #introVid img[src$="yt.png"] {
  display: none;
}
section.main#intro > div.introSS #introVid.loaded img[src$="spinner.png"] {
  display: none;
}
section.main#intro > div.introSS #introVid.loaded img[src$="yt.png"] {
  display: inline;
}
section.main#intro > div.introSS img {
  max-width: 96vw;
}
section.main#intro > div#introFooter {
  position: absolute;
  background: rgba(0, 0, 0, 0.568627451);
  bottom: 0;
  left: 0;
  color: #fff;
  height: 23%;
  text-align: center;
}
section.main#intro > div#introFooter > span {
  margin: 0.83em;
  font-size: 1.5em;
}
section.main#intro > div#introFooter .buttonCont {
  margin-bottom: 1.7%;
}
section.main#intro > div#introFooter .buttonCont .button {
  margin: 0 1%;
  background: #fff;
}
section.main#intro > div#introFooter .link {
  color: #fff;
}
section.main#clientApp {
  padding: 66px 25px;
  height: 40vw;
  min-height: initial;
  background: #e7e7e7;
}
section.main#clientApp .ss {
  display: none;
}
section.main#clientApp .blurb {
  padding: 0;
  width: 35%;
}
section.main#clientApp .blurb .button {
  border-color: rgb(163, 163, 163);
}
section.main#features .featuresCont > div {
  margin-bottom: 6%;
}
section.main#features .featuresCont > div > * {
  width: 45%;
}
section.main#features .featuresCont > div img {
  max-width: 45vw;
  border-radius: 6px;
  cursor: pointer;
}
section.main#features h3 {
  margin-top: 0;
  letter-spacing: 1px;
}
section.main#features li {
  line-height: 1.4;
  border-left: thin solid #afafaf;
  padding-left: 4%;
  position: relative;
}
section.main#features li:not(:last-child) {
  padding-bottom: 5%;
}
section.main#features li:before {
  content: "";
  width: 7px;
  height: 7px;
  display: block;
  background: #ffffff;
  left: -4px;
  position: absolute;
  border-radius: 4px;
  top: 10%;
}
section.main#pricing {
  background: linear-gradient(rgba(255, 255, 255, 0.2), #fff), url(/assets/gridBgLight.jpg);
}
section.main#pricing .blurb {
  margin: 0 auto;
  font-size: 1.2em;
}
section.main#pricing .colCont {
  align-items: flex-start;
}
section.main#pricing .colCont > div {
  width: 30%;
  background: #f7f7f7;
  display: flex;
  flex-direction: column;
  padding: 25px;
  border-radius: 25px;
  box-shadow: 0 0 18px 0 #bfbfbf;
  border: thin solid #fff;
}
section.main#pricing .colCont > div > * {
  margin-bottom: 6%;
}
section.main#pricing .colCont > div .button {
  background: #fff;
}
section.main#pricing .colCont > div .price {
  font-size: 1.6em;
}
section.main#pricing .colCont > div ul {
  margin-bottom: 0;
}
section.main#pricing .colCont > div ul li {
  line-height: 1.4;
  padding-bottom: 3%;
  padding-left: 10%;
  margin-bottom: 3%;
  position: relative;
}
section.main#pricing .colCont > div ul li:not(:last-child) {
  border-bottom: thin solid #e7e7e7;
}
section.main#pricing .colCont > div ul li:before {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  background: url("/assets/checkmark.png") no-repeat;
}
section.main#faq {
  background: linear-gradient(rgba(255, 255, 255, 0.2), #fff), url(/assets/gridBgLight.jpg);
}
section.main#faq h1 {
  padding: 3% 0;
}
section.main#faq .colCont {
  flex-wrap: wrap;
}
section.main#faq .colCont > div {
  width: 30vw;
  padding: 0 2%;
  box-sizing: border-box;
  margin-bottom: 3%;
  line-height: 1.4;
}
section.main#faq .colCont > div > div {
  margin: 2% 0 0;
}
section.main#faq .colCont > div > span {
  font-weight: bold;
}