html,
body {
  scroll-behavior: smooth;
}
*,
*:after,
*:before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
:root {
  --border: 1px solid rgba(0,0,0,.1);
  --radius: 6px;
  --shadow: 0px 2px 4px rgba(0,0,0,.1);
}
body {
  font-family: var(--fam1);
  color: var(--color-1);
  font-size: var(--paragraph);
}
section {
  padding: 120px 0;
}
img {
  vertical-align: middle;
  max-width: 100%;
}
@media screen and (max-width: 1240px) {
  section {
    padding: 100px 0;
  }
}
@media screen and (max-width: 780px) {
  section {
    padding: 80px 0;
  }
}
section.large {
  padding: 120px 0;
}
@media screen and (max-width: 1240px) {
  section.large {
    padding: 120px 0;
  }
}
@media screen and (max-width: 780px) {
  section.large {
    padding: 100px 0;
  }
}
.container {
  max-width: 1220px;
  padding: 0 20px;
  width: 100%;
  margin: auto;
}
.container-small {
  max-width: 780px;
  margin: auto;
  text-align: center;
}
.container-small.text-left {
  text-align: left;
}
.app-icon {
  border-radius: 24px;
  height: 200px;
  width: 200px;
}
.app-name {
  font-size: 20pt;
}
.store-icon img {
  width: 120px;
  height: 40px;
}
.heading,
h1 {
  font-size: var(--heading);
  font-family: var(--fam2);
  color: var(--color-1);
}
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3 {
  color: var(--color-1)
}
.ProseMirror > p:first-of-type:last-of-type br:first-of-type:last-of-type {
  display: none;
}
.ProseMirror p,
.ProseMirror ol,
.ProseMirror li{
  color: var(--color-2)
}
.ProseMirror p {
  font-size: var(--paragraph);
}
.subheading,
h2 {
  font-size: var(--subheading);
  color: var(--color-1);
  font-family: var(--fam1);
  font-weight: bold;
  line-height: 1.45;
}
.mt10 {margin-top: 10px !important}
.mt20 {margin-top: 20px !important}
.mt40 {margin-top: 40px !important}
.mt60 {margin-top: 60px !important}
.pt30 {padding-top: 30px !important}
.mb20 {margin-bottom: 20px !important}

a {
  text-decoration: none;
  color: var(--accent);
}
.question .link,
.awards .link,
.cta a {
  font-size: var(--paragraph);
  font-family: var(--fam2);
  font-weight: bold;
  background: var(--accent);
  color: var(--color-3);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  display: inline-block;
}
@media screen and (max-width: 460px) {
  .question .link,
  .awards .link,
  .cta a {
    width: 100%;
    text-align: center;
    margin-left: 0 !important;
    margin-top: 10px;
  }
}
.awards .link {
  margin-top: 16px;
}
.cta a:not(:first-of-type) {
  margin-left: 30px;
}
header {
  padding: 0 30px;
  min-height: 65px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.header-flex {
  width: 100%;;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-flex-logo img + .bold,
.header-flex-logo svg + .bold {
  display: none;
}
.header-flex-logo .logo-small svg,
.header-flex-logo .logo-small img {
  height: 25px;
  margin: 12px 0px;
  max-width: 80%;
}
.header-flex-logo .logo-medium svg,
.header-flex-logo .logo-medium img {
  height: 40px;
  margin: 12px 0px;
  max-width: 80%;
}
.header-flex-logo .logo-large svg,
.header-flex-logo .logo-large img {
  height: 60px;
  margin: 12px 0px;
  max-width: 80%;
}
header .header-menu > a {
  color: var(--color-2);
  font-family: var(--fam1);
}
header .header-menu > a:hover {
  color: var(--color-1);
}
header .header-menu > a:not(:last-of-type) {
  margin-right: 10px;
}
.menu {display: none;}
.menu a {
  color: var(--color-1);
  font-family: var(--fam1);
  font-size: var(--paragraph);
}
.overlay {
  position: fixed;
  visibility: hidden;
  width: 100%;
  height: 100%;
  background: white;
  left: 0;
  top: 0;
  z-index: 1000;
  opacity: 0;
}
.overlay a {
  font-size: 24px;
  display: block;
  padding: 12px 20px;
  text-align: center;
  color: black;
  font-family: var(--fam1);
}
.overlay a.close {
  font-size: 14px;
  display: block;
  padding: 23px 20px;
  text-align: right;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}
@media screen and (max-width: 780px) {
  .header-menu > a:nth-of-type(1):last-of-type {
    display: block
  }
  .header-menu > a:nth-of-type(1):last-of-type ~ .menu {
    display: none
  }
  .header-menu > a { display: none; }
 .menu { display: block; }
}

header img {
  max-height: 40px;
  width: auto;
}
header ul li:not(:last-of-type) {
  margin-right: 20px;
}
.slideshow-item {
  padding: 0 120px;
}
blockquote {
  font-family: var(--fam1);
  color: var(--color-1);
  font-weight: bold;
  text-align: center;
  max-width: 780px;
  margin: auto;
}
.ProseMirror blockquote {
  padding-left: 20px;
  margin: auto;
}
code,
pre {
  background: var(--bg2);
  padding: 2px;
  color: var(--color-1);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}
.ProseMirror img {
  margin: 20px auto;
}
pre {
  font-size: var(--paragraph);
}
.ProseMirror blockquote p:before,
.ProseMirror blockquote h1:before,
.ProseMirror blockquote h2:before,
.ProseMirror blockquote h3:before {
  content: open-quote;
}
.ProseMirror blockquote p:after,
.ProseMirror blockquote h1:after,
.ProseMirror blockquote h2:after,
.ProseMirror blockquote h3:after  {
  content: close-quote;
}
.cite {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.cite .flex-center {
  flex-direction: column;
  text-align: center;
}
.cite-image {
  margin-bottom: 20px;
  width: 65px;
  height: 65px;
  background: rgba(0,0,0,.1);
  border-radius: 50%;
}
.bold {
  color: var(--color-1);
  font-family: var(--fam2);
  display: block;
  line-height: 1.45;
}
.title {
  line-height: 1.45;
  color: var(--color-1);
  font-family: var(--fam2);
  font-size: var(--paragraph);
  display: block;
}
.freeform {
  font-size: var(--paragraph);
  font-family: var(--fam2);
}
p {
  color: var(--color-2);
}
span,
.span {
  font-size: var(--alt);
  color: var(--color-1);
  font-family: var(--fam2);
  line-height: 1.45;
}
.flex-center {
  display: flex;
  align-items: center;
}
.cite svg:first-of-type {
  margin-right: 10px;
}
.cite svg {
  color: var(--svg);
  cursor: pointer;
}
.cite svg:hover {
  color: var(--color-1);
}
@media screen and (max-width: 780px) {
  .slideshow-item {
    padding: 0 60px;
  }
  .cite-image {
    width: 38px;
    height: 38px;
    margin-right: 12px
  }
  .cite svg:first-of-type {
    margin-right: 0px;
  }
  .cite svg {
    height: 30px;
    width: 30px;
  }
}


.slideshow {
  width: 100%;
  position: relative;
  height: initial
}

.slideshow-item {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  display: none;
  top: 0
}
.slideshow-item label:first-of-type {
  position: absolute;
  left: 0;
  transform: translate3d(0,-50%,0);
  top: 50%;
}
.slideshow-item label:last-of-type {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate3d(0,-50%,0);
}
.slideshow-bullet:checked+.slideshow-item .slideshow-item-content {
  transition: all .2s ease-in-out .1s;
  opacity: 1
}

.slideshow-item-content {
  transition: all .2s ease-in-out;
  opacity: 0
}

.slideshow-bullet:checked+.slideshow-item {
  position: relative;
  opacity: 1;
  z-index: 2;
  height: initial;
  display: block;
}


.slideshow input {
  display: none
}

.pricing {
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap;
}
.pricing-item {
  width: calc(33.33% - 20px);
  background: var(--bg2);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  padding: 30px;
  margin-top: 30px;
}
.pricing-item:nth-of-type(3n - 2),
.pricing-item:nth-of-type(3n - 1) {
  margin-right: 30px;
}
.pricing-item:nth-of-type(3n - 2),
.pricing-item:nth-of-type(3n - 1) {
  margin-right: 30px;
}
@media screen and (max-width: 980px) {
  .pricing-item {
    width: 100%;
    margin-right: 0 !important;
    margin-top: 15px;
  }
  .pricing-item .cta-button {
    margin-top: 20px;
  }
}
.pricing-item-check {
  display: flex;
  margin-top: 10px;
  line-height: 1.45;
  color: var(--color-1);
  font-size: var(--alt);
  font-family: var(--fam2);
}
.pricing-item-check:before {
  content: "";
  width: 22px;
  height:22px;
  transform: rotate(45deg);
  width: 10px;
  height: 17px;
  background: var(--bg2);
  box-shadow: 1.5px 1.5px 0 1px var(--color-1);
  margin-right: 20px;
  margin-left: 5px;
  top: -1px;
  position: relative;
  flex-shrink: 0;
}
.pricing-item-spread {
  flex: 1;
}
.cta-button {
  font-size: var(--paragraph);
  font-family: var(--fam2);
  font-weight: bold;
  background: var(--accent);
  color: var(--color-3);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
}

.question:first-of-type {
  margin-top: 60px;
}
@media screen and (max-width: 780px) {
  .question:first-of-type {
    margin-top: 30px;
  }
}
.question {
  padding: 30px 0;
  max-width: 780px;
  margin: auto;
  border-top: 1px solid var(--border);
}
@media screen and (max-width: 780px) {
  .question {
    padding: 15px 0;
  }
}
.question:last-of-type {
  border-bottom: 1px solid var(--border);
}
.question summary {
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  color: var(--color-1);
  line-height: 1.45;
  font-size: var(--paragraph);
  font-family: var(--fam2);
}
.freeform {
  line-height: 1.45;
  color: var(--color-1);
  display: block;
}

.logos {
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap;
}
.logos-item {
  width: calc(25% - 22.5px);
  border-radius: var(--radius);
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logos-item:nth-of-type(4n - 3),
.logos-item:nth-of-type(4n - 2),
.logos-item:nth-of-type(4n - 1) {
  margin-right: 30px;
}
.logos-item:nth-of-type(4n - 3),
.logos-item:nth-of-type(4n - 2),
.logos-item:nth-of-type(4n - 1) {
  margin-right: 30px;
}
@media screen and (max-width: 780px) {
  .logos-item {
    width: calc(50% - 7.5px);
    margin-right: 15px !important;
  }
  .logos-item:nth-of-type(2n) {
    margin-right: 0 !important;
  }
}
.logos img {
  max-width: 100%;
  max-height: 60px;
  display: block;
}
.logos img + b {
  margin-top: 30px;
}
.checklist {
  max-width: 780px;
  margin: auto;
}
.checklist-item {
  font-weight: bold;
  color: var(--color-1);
  padding: 30px 0;
  line-height: 1.45;
  border-bottom: 1px solid var(--border);
  display: flex;
}
.press-logo{
  margin-right: 15px;
  max-width: 100%;
  max-height: 60px;
  display: block;
}
@media screen and (max-width: 780px) {
  .checklist-item {
    padding: 15px 0;
  }
}
.checklist-item p {
  flex: 1;
}
.checklist-item:first-of-type {
  border-top: 1px solid var(--border);
  margin-top: 30px;
}
.checklist-item:after {
  content: "";
  width: 22px;
  height: 22px;
  transform: rotate(45deg);
  width: 10px;
  height: 17px;
  box-shadow: 1.5px 1.5px 0 1px var(--color-1);
  margin-right: 20px;
  margin-left: 5px;
  top: -1px;
  position: relative;
  flex-shrink: 0;
  margin-left: 30px;
}

.team {
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap;
}
.team-item {
  width: calc(33.33% - 20px);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}
.team-item:nth-of-type(3n - 2),
.team-item:nth-of-type(3n - 1) {
  margin-right: 30px;
}
.team-item:nth-of-type(3n - 2),
.team-item:nth-of-type(3n - 1) {
  margin-right: 30px;
}
.team-item-img {
  width: 100%;
  height: 350px;
  background: var(--bg2);
  background-position: center;
  background-size: cover;
}
.socials svg {
  height: 20px;
  width: auto;
}
.socials a {
  margin-right: 10px;
  color: var(--color-2);
  cursor: pointer;
}
.socials a:hover {
  color: var(--color-1)
}
@media screen and (max-width: 980px) {
  .team-item {
    width: 100%;
    margin-right: 0 !important;
  }
  .team-item:not(:last-of-type) {
    margin-bottom: 30px;
  }
  .socials svg {
    height: 16px;
  }
}

.blog {
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap;
}
.blog-item {
  width: calc(33.33% - 20px);
  background: var(--background-1);
  border-radius: var(--radius);
  margin-top: 30px;
  box-shadow: var(--shadow);
  color: var(--color-1);
  cursor: pointer;
}
.blog-item-copy {
  display: flex;
  flex-direction: column;
  padding: 30px;
}
.blog-item-copy span {
  color: var(--color-2);
  font-size: var(--alt);
  display: block;
  margin-bottom: 10px;
}
.blog-item-copy p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 120px;
}
.blog-item:nth-of-type(3n - 2),
.blog-item:nth-of-type(3n - 1) {
  margin-right: 30px;
}
.blog-item:nth-of-type(3n - 2),
.blog-item:nth-of-type(3n - 1) {
  margin-right: 30px;
}
@media screen and (max-width: 980px) {
  .blog-item {
    width: 100%;
    margin-right: 0 !important;
  }
}
.blog-item-img {
  width: 100%;
  height: 220px;
  background: var(--bg2);
  background-position: center;
  background-size: cover;
}
.seemore {
  margin: auto;
  display: block;
  width: 100%;
  color: var(--color-2);
  font-weight: bold;
  margin-top: 30px;
}
.seemore:hover {
  color: var(--color-1)
}

.footer-flex {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  min-height: 97px;
}
.footer-flex nav {
  align-items: center;
  justify-content: space-between;
  display: flex;
}
.footer-flex nav ul + ul{
  margin-left: 20px;
}
footer ul,
footer ul li {
  list-style: none;
  display: inline-block;
  text-align: center;
}
footer a {
  color: var(--color-2);
  font-weight: bold;
}
footer a:hover {
  color: var(--color-1)
}
footer img {
  max-height: 40px;
  width: auto;
}
footer ul li:not(:last-of-type) {
  margin-right: 20px;
}
.feature {
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap;
}

.feature-item {
  width: calc(33.33% - 20px);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 980px) {
  .feature-item {
    width: 100%;
  }
  .feature-item:not(:last-of-type) {
    margin-bottom: 30px;
  }
}
.icon {
  width: 70px;
  height: 70px;
  background: var(--accent);
  border-radius: 50%;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon svg {
  max-width: 35px;
  max-height: 35px;
  fill: currentColor;
  color: var(--svg);
}
.feature-item:nth-of-type(n + 4) {
  margin-top: 60px;
}
.feature-item:nth-of-type(3n - 2),
.feature-item:nth-of-type(3n - 1) {
  margin-right: 30px;
}
.feature-item:nth-of-type(3n - 2),
.feature-item:nth-of-type(3n - 1) {
  margin-right: 30px;
}

.featurelist {
  max-width: 780px;
  margin: auto;
}
.featurelist-item {
  border-top: 1px solid var(--border);
  padding: 30px 0;
}
.featurelist-item:last-of-type {
  border-bottom: 1px solid var(--border);
}
.sheet {
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap;
}
.sheet-item {
  width: calc(50% - 22.5px);
  border-radius: var(--radius);
  font-size: var(--paragraph);
  margin-top: 30px;
}
.sheet-item .ProseMirror p {
  font-size: var(--alt);
}
.sheet-item:nth-of-type(even) {
  margin-right: 30px;
}
@media screen and (max-width: 780px) {
  .sheet-item {
    width: calc(50% - 7.5px);
    margin-right: 15px !important;
  }
  .sheet-item:nth-of-type(2n) {
    margin-right: 0 !important
  }
}
@media screen and (max-width: 390px) {
  .sheet-item {
    width: 100%;
    margin-right: 0 !important;
  }
}
.sheet-item b {
  display: block;
  color: var(--color-2);
  font-family: var(--fam2)
}


.map {
  height: 250px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg2);
}
.location {
  max-width: 780px;
  margin: auto;
}
.location-item {
  padding: 30px 0;
}
.location a {
  display: inline-block;
  font-family: var(--fam2)
}

.awards {
  max-width: 780px;
  margin: auto;
}
.awards-item {
  border-top: 1px solid var(--border);
  padding: 30px 0;
}
.awards-item:last-of-type {
  border-bottom: 1px solid var(--border);
}
.awards-item .flexspread {
  display: flex;
  justify-content: space-between;
}

.contact {
  display: flex;
  flex-direction: column;
  max-width: 780px;
  margin: auto;
}
.contact input,
.contact textarea {
  appearance: none;
  border: none;
  background: var(--bg2);
  border-radius: var(--radius);
  width: 100%;
  margin-bottom: 20px;
  font-size: var(--paragraph);
  padding: 20px;
  color: var(--color-1);
  resize: none;
  outline: none;
  font-family: var(--fam1);
}
@media screen and (max-width: 780px) {
  .contact input,
  .contact textarea {
    margin-bottom: 10px;
  }
}
.contact button {
  width: 100%;
  padding: 20px;
  appearance: none;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--color-3);
  font-size: var(--alt);
  font-weight: bold;
  cursor: pointer;
}
::placeholder {
  color: var(--color-2);
  font-family: var(--fam1);
}

.mailchimp-form form {
  display: flex;
  justify-contnet: space-between;
  align-items: center;
}
.mailchimp-form input {
  appearance: none;
  border: none;
  background: var(--bg2);
  border-radius: var(--radius);
  width: 100%;
  font-size: var(--paragraph);
  padding: 20px;
  color: var(--color-1);
  resize: none;
  outline: none;
  font-family: var(--fam1);
  width: 100%;
}
.mailchimp-form input[type=button], .mailchimp-form input[type=submit], .mailchimp-form input[type=reset] {
  width: fit-content;
  padding: 20px;
  appearance: none;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--color-3);
  font-size: var(--alt);
  font-weight: bold;
  cursor: pointer;
  margin-left: 20px;
}
.hours {
  display: flex;
  cursor: pointer;
}
.hours-days {
  margin-right: 20px;
}
.hours span {
  display: block;
}
.hours i {
  font-style: normal;
}
.hours i:first-of-type:after {
  content: " - "
}
.resmenu-flex,
.resmenu {
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap;
}
.resmenu .resmenu-freeform {
  display: block;
  width: 100%;
  font-family: var(--fam2);
}
.resmenu-heading {
  width: 100%;
  font-size: var(--paragraph);
  color: var(--color-1);
  font-family: var(--fam2);
  display: block;
  line-height: 1.45;
}
.resmenu .bold {
  font-size: var(--paragraph);
  color: var(--color-1);
  font-family: var(--fam2);
  line-height: 1.45;
}
.resmenu-item {
  width: calc(50% - 20px);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}
.resmenu-item:nth-of-type(2n - 1) {
  margin-right: 40px;
}
@media screen and (max-width: 390px) {
  .resmenu-item {
    width: 100%;
    margin-right: 0 !important;
  }
}
.resmenu-item-nameprice {
  display: flex;
  align-items: center;
  justify-content: center;
}
.resmenu-item-nameprice b {
  display: flex;
  width: 100%;
}
.resmenu-item-nameprice b:after {
  border-bottom: 2px dotted currentColor;
  content: '';
  flex: 1;
  top: -5px;
  position: relative;
}
.resmenu-item-img {
  width: 100%;
  height: 350px;
  background: var(--bg2);
  background-position: center;
  background-size: cover;
}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  padding: 16px;
  color: var(--color-3);
  font-weight: bold;
  font-size: 18px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  color: white;
}
.prev:before {
  content: "❮";
  background-color: rgba(0,0,0,0.2);
  left: 0;
  top: calc(50% - 26px);
  width: 42px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 3px 3px 0;
  position: absolute;
}
.next:before {
  content: "❯";
  background-color: rgba(0,0,0,0.2);
  right: 0;
  top: calc(50% - 26px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 52px;
  border-radius: 3px 0 0 3px;
  position: absolute;
}
.next {
  right: 0;
}
.prev:hover:before, .next:hover:before {
  background-color: rgba(0,0,0,0.35);
}
.text {
  color: var(--color-1);
  font-size: 15px;
  padding: 8px 12px;
  bottom: 8px;
  width: 100%;
  text-align: center;
  font-family: var(--fam2);
}
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 4px;
  top: 12px;
  left: 12px;
  border-radius: 5px;
  position: absolute;
  background: rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fam1);
}
.numbertext:before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHdpZHRoPSI0OCIgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTkgNDJxLTEuMiAwLTIuMS0uOVE2IDQwLjIgNiAzOVY5cTAtMS4yLjktMi4xUTcuOCA2IDkgNmgzMHExLjIgMCAyLjEuOS45LjkuOSAyLjF2MzBxMCAxLjItLjkgMi4xLS45LjktMi4xLjlabTAtM2gzMFY5SDl2MzBabTIuOC00Ljg1aDI0LjQ1bC03LjM1LTkuOC02LjYgOC41NS00LjY1LTYuMzVaTTkgMzlWOXYzMFoiLz48L3N2Zz4=);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 3px;
}
.image-slideshow {
  position: relative;
  background: var(--bg2)
}
.image-slideshow__full {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
}
.image-slideshow__full .mySlides {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}
.mySlides {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.image-slideshow-text > *:last-child {
  margin-bottom: 60px;
}
.image-slideshow__full img {
  max-width: 100vw;
  max-height: calc(100vh - 80px);
}
.image-slideshow__full .prev,
.image-slideshow__full .next {
  display: flex;
}
.image-slideshow-toggle-button {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.image-slideshow__full .image-slideshow-toggle-button {
  width: 30px;
  height: 30px;
  right: 12px;
  opacity: 1;
  left: initial;
  top: 6px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHdpZHRoPSI0OCIgZmlsbD0iI2ZmZiI+PHBhdGggZD0ibTEyLjQ1IDM3LjY1LTIuMS0yLjFMMjEuOSAyNCAxMC4zNSAxMi40NWwyLjEtMi4xTDI0IDIxLjlsMTEuNTUtMTEuNTUgMi4xIDIuMUwyNi4xIDI0bDExLjU1IDExLjU1LTIuMSAyLjFMMjQgMjYuMVoiLz48L3N2Zz4=);
 background-position: center;
  background-size: 100%;
}
.image-slideshow__full .image-slideshow-toggle-button:hover {
opacity: .7;}
.image-slideshow__full .numbertext {
position: relative;
top: initial;
margin-top: 12px;
margin-bottom: 6px;}

.computer .mask {
  box-shadow: 0 0 3px 1px rgba(0,0,0,.1);
  max-width: 770px;
  max-height: 520px
}

.computer {
  display: inline-block;
  background: linear-gradient(#000 0,#000 95.5%,#2c2b2d 95.5%);
  border-radius: 30px;
  position: relative;
  margin: 0 auto 25px;
  border: 3px solid #b1b2b5;
  box-shadow: -1px 1px 4px 0 rgba(0,0,0,.1),-8px 8px 24px 0 rgba(0,0,0,.1);
  padding: 30px 20px
}

.computer:after {
  content: "";
  position: absolute;
  height: 20px;
  left: -10%;
  bottom: -14px;
  width: 120%;
  transform-origin: 0 0 0;
  border-radius: 0 0 100% 100%;
  box-shadow: inset 0 18px 8px 0 #686a6e
}

.computer-bottom {
  content: "";
  height: 15px;
  background: linear-gradient(to right,#27282b 0,#a5a6aa 1.5%,#3f4044 3%,#8c8d91 10%,#8c8d91 90%,#3f4044 97%,#a5a6aa 98.5%,#27282b 100%);
  position: absolute;
  width: 120%;
  left: -10%;
  bottom: -3px;
  z-index: 2
}

.computer-bottom:before {
  content: "";
  position: absolute;
  width: 15%;
  left: calc(50% - 7.5%);
  box-shadow: inset 0 -9px 10px #0000003d,inset 10px 0 10px #0000003d,inset -10px 0 10px #0000003d;
  border-radius: 0 0 10px 10px;
  height: 10px;
  top: 0
}

.computer .mask {
  border-radius: 2px
}

.computer .mask:after {
  background-size: 11%
}

@media screen and (max-width: 820px) {
  .computer {
      padding:15px 10px 15px 10px;
      border-radius: 10px;
      border: 2px solid #cacccf;
      margin: 50px auto 20px
  }

  .computer:before {
      bottom: 2px;
      height: 5px
  }

  .computer:after {
      height: 7px;
      bottom: -5px
  }
}

.computerphone {
  margin-top: 75px;
  position: relative
}

.computerphone-computer .mask {
  box-shadow: 0 0 3px 1px rgba(0,0,0,.1)
}

.computerphone-computer {
  display: inline-block;
  background: linear-gradient(#000 0,#000 95.5%,#2c2b2d 95.5%);
  border-radius: 30px;
  position: relative;
  border: 3px solid #b1b2b5;
  box-shadow: -1px 1px 4px 0 rgba(0,0,0,.1),-8px 8px 24px 0 rgba(0,0,0,.1);
  padding: 30px 20px;
  width: 850px
}

.computerphone-computer:after {
  content: "";
  position: absolute;
  height: 21px;
  left: -10%;
  bottom: -14px;
  width: 120%;
  transform-origin: 0 0 0;
  background: #6a686d;
  box-shadow: inset 0 -3px 8px 1px #373638;
  border-radius: 0 0 100% 100%
}

.computerphone-computer-bottom {
  content: "";
  height: 7px;
  background: linear-gradient(to right,#49474a 0,#dbdbdd 1.5%,#d1d1d5 3%,#c7c7cb 10%,#c7c7cb 90%,#d1d1d5 97%,#dbdbdd 98.5%,#27282b 100%);
  position: absolute;
  width: 120%;
  left: -10%;
  bottom: 0;
  z-index: 2
}

.computerphone-computer-bottom:before {
  content: "";
  position: absolute;
  width: 20%;
  left: calc(50% - 10%);
  box-shadow: inset 5px 0 6px 0 #0000003d,inset -5px 0 6px 0 #0000003d;
  height: 7px;
  top: 0
}

.computerphone-computer .mask {
  min-height: 450px;
  max-height: 580px
}

.computerphone-iphone .mask {
  width: 250px;
  min-height: 420px;
  max-height: 540px;
  border-radius: 32px;
}

.computerphone-iphone {
  z-index: 2;
  position: absolute;
  display: inline-block;
  bottom: -20px;
  right: 0;
  background: #010101;
  box-shadow: inset 0 0 .5px 1px #6e6c72,inset 0 0 1px 2px #4d4d50,inset 0 0 0 3.5px #747479,inset -2px 0 0 3.5px #18181a,inset 2px 0 0 3.5px #18181a,inset 0 2px 10px 10px rgba(255,255,255,.28);
  border-radius: 35px;
  padding: 10px
}


.computerphone-iphone:after {
  content: "";
  width: 38px;
  height: 38px;
  border-radius: 50%;
  position: absolute;
  box-shadow: inset 0 -2px .2px 0 #4b4a4d,inset 0 0 0 2.5px #2d2d2d;
  bottom: 14px;
  left: calc(50% - 19px);
  opacity: .6
}

@media screen and (max-width: 820px) {
  .computerphone {
      margin-top:50px
  }

  .computerphone-computer {
      margin-left: 100px
  }

  .computerphone-iphone {
      right: initial
  }
}

.ipadiphone {
  position: relative
}

.ipadiphone-ipad .mask {
  min-width: 720px;
  max-width: 990px;
  height: 520px
}

.ipadiphone-ipad {
  border-radius: 35px;
  overflow: hidden;
  padding: 15px 70px;
  background: linear-gradient(#f4f4f4,#f2f2f2);
  box-shadow: inset -7px 0 .4px -7px #e5e5e5,inset 7px 0 .4px -7px #eaeaea,inset 0 4px 1px -3px #ddd,inset 0 -5px 1px -4px #8a8a8a,inset 0 0 0 2px #fff,inset 0 0 0 3px rgba(0,0,0,.08),inset 1px 0 0 4px #fff,inset -1px 0 0 4px #fff,inset 2px 0 .2px 5px rgba(0,0,0,.05),inset -2px 0 .2px 5px rgba(0,0,0,.05),inset 12px 0 .2px -1px #fff,inset -12px 0 .2px -1px #fff;
  display: inline-block;
  position: relative;
  left: 70px
}

.ipadiphone-iphone .mask {
  width: 250px;
  min-height: 420px;
  max-height: 540px;
  border-radius: 32px;
}

.ipadiphone-iphone {
  z-index: 99;
  position: absolute;
  display: inline-block;
  bottom: -20px;
  background: linear-gradient(#f4f4f4,#f2f2f2);
  box-shadow: inset 0 0 1px 1px #dbdcdd,inset 0 0 1px 4px #efefef,inset 0 0 0 5px #fff,inset 0 0 0 6.5px #edf1f2,inset 5px 0 7px 5px #fff,inset -5px 0 7px 5px #fff;
  border-radius: 35px;
  padding: 10px
}

@media screen and (max-width: 820px) {
  .ipadiphone {
      margin-top:50px
  }
}
.iphone .mask {
  width: 250px;
  min-height: 420px;
  max-height: 540px;
  border-radius: 32px;
  overflow: hidden;
}
.browserphonecoverphoto {
  width: 100%;
  margin-top: 60px;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0 0 60px;
  overflow: hidden;
  position: relative;
}
.computercoverphoto {
  width: 100%;
  margin-top: 60px;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 0 0 0;
  overflow: hidden;
  position: relative;
}
.browsercoverphoto {
  width: 100%;
  margin-top: 60px;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0 0 60px;
  overflow: hidden;
  position: relative;
}
.iphonecoverphoto {
  width: 100%;
  margin-top: 60px;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 0;
}
.iphone {
  background: linear-gradient(#f4f4f4,#f2f2f2);
  display: inline-block;
  position: relative;
  padding: 10px;
  border-radius: 37px;
  box-shadow: inset 0 0 2px 2px #dbdcdd,inset 0 0 1px 6px #efefef,inset 0 0 0 7px #fff,inset 0 0 0 8.5px #edf1f2,inset 7px 0 8px 5px #fff,inset -7px 0 8px 5px #fff,2px 2px 4px 0 rgba(0,0,0,.1),12px 12px 24px 0 rgba(0,0,0,.1)
}

@media screen and (max-width: 820px) {
  .iphone {
      position:relative;
      bottom: initial;
      right: initial;
      transform: none;
      border-radius: 34px;
      margin: 50px auto 0;
      box-shadow: inset 0 0 1px 1px #dbdcdd,inset 0 0 1px 4px #efefef,inset 0 0 0 5px #fff,inset 0 0 0 6.5px #edf1f2,inset 5px 0 7px 5px #fff,inset -5px 0 7px 5px #fff;
  }
}
.video {
  position: relative
}

.youtube-responsive {
  width: 100%;
  padding-top: 56.25%
}

.youtube-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.mask {
  width: 100%;
  overflow: hidden;
  border-radius: 0 0 4px 4px;
  background: #fff;
  position: relative
}
.customimage {
  margin-top: 60px;
}
.mask__noimage {
  height: 100%;
  max-height: 700px;
  background: #fff;
  position: relative;
}
.mask__noimage img {
  opacity: 0;
}
.mask__noimage:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM4ZThlOGUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMjQgMjRIMFYwaDI0djI0eiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0yMSAzSDNDMiAzIDEgNCAxIDV2MTRjMCAxLjEuOSAyIDIgMmgxOGMxIDAgMi0xIDItMlY1YzAtMS0xLTItMi0yek01IDE3bDMuNS00LjUgMi41IDMuMDFMMTQuNSAxMWw0LjUgNkg1eiIvPjwvc3ZnPg==);
  background-size: 20%;
  background-position: 50%;
  background-repeat: no-repeat;
  z-index: 0;
}
.mask-img {
  width: 100%;
  display: block;
  z-index: 2;
  position: relative
}

.custom-img {
  max-width: 100%;
  display: block;
  position: relative;
  margin: 100px auto 0;
}
.browser {
  border-radius: 6px;
  background-size: 60px;
  overflow: hidden;
  width: 100%;
  z-index: 2;
  left: 30px;
  top: 30px;
  background-size: auto 30px;
  box-shadow: 0 20px 30px 0 rgba(0,0,0,.1);
  position: relative
}

.browser .mask {
  max-height: 640px
}

.browser:before {
  content: "";
  height: 30px;
  line-height: 30px;
  display: block;
  width: 100%;
  position: relative;
  background: linear-gradient(-180deg,#fafbfc 0,#f1f4f7 100%)
}

.browser:after {
  content: "";
  width: 12px;
  height: 12px;
  background: #e2e5e5;
  position: absolute;
  border-radius: 50%;
  top: 10px;
  left: 8px;
  box-shadow: 18px 0 0 #e2e5e5,36px 0 0 #e2e5e5
}

.browserphone-iphone .mask {
  width: 250px;
  min-height: 420px;
  max-height: 540px;
  border-radius: 32px;
  overflow: hidden;
}

.browserphone-iphone {
  z-index: 2;
  position: absolute;
  display: inline-block;
  bottom: -30px;
  left: 60px;
  background: linear-gradient(#f4f4f4,#f2f2f2);
  box-shadow: inset 0 0 1px 1px #dbdcdd,inset 0 0 1px 4px #efefef,inset 0 0 0 5px #fff,inset 0 0 0 6.5px #edf1f2,inset 5px 0 7px 5px #fff,inset -5px 0 7px 5px #fff;
  border-radius: 35px;
  padding: 10px
}


.browserphone-browser {
  border-radius: 6px;
  background-size: 60px;
  box-shadow: 0 10px 20px rgba(40,39,66,.06);
  overflow: hidden;
  width: 900px;
  z-index: 2;
  background-size: auto 30px;
  position: relative;
  box-shadow: 0 15px 19px 6px rgba(0,0,0,.05);
  left: 120px;
  top: 30px;
}

.browserphone-browser .mask {
  min-height: 490px;
  max-height: 580px
}

.browserphone-browser:before {
  content: "";
  height: 30px;
  line-height: 30px;
  display: block;
  width: 100%;
  position: relative;
  background: linear-gradient(-180deg,#fafbfc 0,#f1f4f7 100%)
}

.browserphone-browser:after {
  content: "";
  width: 12px;
  height: 12px;
  background: #e2e5e5;
  position: absolute;
  border-radius: 50%;
  top: 10px;
  left: 8px;
  box-shadow: 18px 0 0 #e2e5e5,36px 0 0 #e2e5e5
}

@media screen and (max-width: 820px) {
  .browserphone-browser {
      margin-left:100px
  }

  .browserphone-iphone {
      right: initial
  }
}

.codeblock {
  box-shadow: 0 8px 24px 0 rgba(0,0,0,.1);
  border-radius: 6px;
  position: relative;
  max-width: calc(100vw - 40px)
}

.codeblock:before {
  content: "";
  height: 30px;
  display: block;
  width: 100%;
  position: relative;
  background: #fff;
  border-radius: 6px 6px 0 0
}

.codeblock::after {
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  border-radius: 50%;
  top: 10px;
  left: 8px;
  background: rgba(0,0,0,.07);
  box-shadow: 18px 0 0 rgba(0,0,0,.07),36px 0 0 rgba(0,0,0,.07)
}

.hljs * {
  font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
  font-size: 14px!important;
  line-height: 1.4;
  font-weight: 400
}

td.hljs-ln-numbers {
  user-select: none;
  text-align: right;
  color: #333;
  opacity: .33;
  vertical-align: top;
  padding-right: 15px
}

.hljs-ln {
  border-collapse: collapse
}

.hljs-ln-line {
  text-align: left;
  white-space: pre
}

.hljs-ln-n:before {
  content: attr(data-line-number);
  font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace
}

td.hljs-ln-code {
  padding-left: 10px
}

.hljs {
  padding: 30px;
  display: block;
  overflow-x: auto;
  background: #fff;
  color: #333;
  overflow: auto;
  width: 100%;
  border-radius: 0 0 6px 6px;
  min-height: 400px;
  -webkit-overflow-scrolling: touch
}

.hljs-comment,.hljs-quote {
  color: #6a737d
}

.hljs-keyword,.hljs-selector-tag,.hljs-subst {
  color: #2fb651
}

.hljs-literal,.hljs-number,.hljs-tag .hljs-attr,.hljs-template-variable,.hljs-variable {
  color: #0e9fda
}

.hljs-doctag,.hljs-string {
  color: #ff8d29
}

.hljs-section,.hljs-selector-id,.hljs-title {
  color: #dd2e03
}

.hljs-class .hljs-title,.hljs-type {
  color: #458
}

.hljs-attribute,.hljs-name,.hljs-tag {
  color: navy
}

.hljs-link,.hljs-regexp {
  color: #009926
}

.hljs-bullet,.hljs-symbol {
  color: #990073
}

.hljs-built_in,.hljs-builtin-name {
  color: #0086b3
}

.hljs-meta {
  color: #999
}

.hljs-deletion {
  background: #fdd
}

.hljs-addition {
  background: #dfd
}

.hljs-emphasis {
  font-style: italic
}

@media screen and (max-width: 820px) {
  .hljs {
      padding:20px;
      min-height: inherit;
      max-height: 600px
  }

  td.hljs-ln-numbers {
      display: none
  }

  .hljs * {
      font-size: 11px!important
  }
}

.footer-right-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}