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

.test {
  border: solid 1px red;
}

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;
  border-radius: 7px;
  background-color: #293344;
  color: #F1F1F1;
  text-align: left;
  user-select: all;
  counter-reset: line;
  padding: 10px 50px 10px 50px;
  margin-bottom: 40px;
}

.code-example pre{
  counter-reset: line;
  margin-bottom: 15px;
  overflow: scroll;
}

.curl-example {
  display: inline-block;
  overflow: scroll;
}

.email-form {
  user-select: none;
}

.spinner {
  margin-top: 5px;
  display: none;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.hidden {
  display: none;
}

/* 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: 40px;
  font-weight: 600;
  color: #28292e;
}

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

h3 {
  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;
  }
}

.pricing-container {
  background-color: #FFFFFF;
  border-radius: 3px;
  margin-top: 50px;
  padding: 50px;
}

.pricing-container li {
  list-style: none;
}

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

.blogpost h2 {
  font-size: 3.1rem !important;
  font-weight: 500;
}

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

.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;
  }
}