/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&display=swap'); */

body {
    letter-spacing: -.031em;
    font-size: 16px;
    margin: 0;
/*     font-family: 'Open Sans', sans-serif !important; */
/*     font-family: system-ui, sans-serif !important; */
    font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
    font-weight: normal;
    color: #686868;
}

.container {
  max-width: 1000px !important;
}

p {
  font-size: 17px; /* 2vh */
  /*line-height: 4vh;*/
}

.nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  border-bottom: 1px solid #dfdfdf;
  height: 75px;
  color: #28292e;
  background-color: #fff;
  z-index: 69420; /* nice */
  padding: 0 10px 0 10px;
}

/* Stand out */

.stand-out {
  background-color: #1a1a1a;
  padding: 25px 5px 25px 5px ;
}

.stand-out h1, .stand-out h3 {
  color: #fff;
}

.stand-out p {
  color: #b3b3b3;
}


.code-example {
  vertical-align: middle;
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 3px;
  text-align: center;
  user-select: all;
  counter-reset: line;
  line-height: 50px;
  margin-top: 75px;
}

.code-example pr{
    counter-reset: line;
}
.code-example sample{
    font-size: 15px !important;
    counter-increment: line;
}

.code-example sample:before{
    color: #ccc;
    content: counter(line)  ".   ";
}

/* Stand out less */
.stand-out-less {
  background-color: #fafafa;
  padding: 25px 5px 25px 5px ;
}

.stand-out-less h3 {
  color: #28292e;
}

/* CTA */

.cta h1, .cta h2, .cta  h3 { color: #eef2fc; }
.cta button { 
  background-color: #f8f9fa;
  color: #757575;
  border: none;
}
.cta {
  width: 100%;
  background-color: #8ea6e6;
  color: #eef2fc;
  padding-top: 15px;
}
.cta-button-container {
  text-align: right
}

@media screen and (max-width: 1024px) {
  .cta {
    text-align: center !important;
  }
  .cta-button-container {
    text-align: center;
  }
}

/* Control Panel */
.box {
  background-color: #fafafa;
  padding: 15px;
  border-radius: 10px;
}


/* General Styling  */

h1 {
  font-size: 60px;
  font-weight: 600;
  color: #28292e;
}

h2 {
  font-size: 37px;
  font-weight: 300;
  color: #24272d;
}

.spacer-s {
  margin: 25px 0px 25px 0px;
}

.spacer-m {
 margin: 25px 0px 25px 0px;
}

.spacer-footer {
  margin-bottom: 15px;
}

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}


a:link{color:#222;text-decoration:none}
a:visited{color:#222;text-decoration:none}
a:hover{color:#222;text-decoration:none}
a:active{color:#222;text-decoration:none}

/* Pricing */

.pricing-modal {
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 20px;
  margin-bottom: 60px;
}

.pricing-modal-price {
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .pricing-modal-price {
    margin-top: 40px;
  }
}

/* Blogpost */
.blogpost a {
  color: #222;
  text-decoration: underline !important;
}

.blogpost h3 {
  font-size: 2.9rem !important;
}

.blogpost table {
  width: 100%;
}

.blogpost blockquote {
  border-left: 2px solid #ccc;
  padding-left: 8px;
}

.blogpost ul, ol {
  margin-left: 2em;
  text-align: left;
}

.blogpost .image-left {
  float: left;
  margin: 5px 20px 5px -50px;
}

.blogpost .image-full-width {
  width: 100%;
}

.published-date {
  color: #b4b4b4;
}

.blogpost .image-right {
  float: right;
  margin: 5px -50px 5px 20px;
}

@media screen and (max-width: 1024px) {
  .blogpost .image-right {
    width: 100%;
    margin: 5px 0 5px 0 !important;
  }
  .blogpost .image-left {
    width: 100%;
    margin: 5px 0 5px 0 !important;
  }
}