@font-face {
  font-family: "Circular Std";
  font-weight: 700;
  src: url("../fonts/CircularStd-Bold.woff");
  font-display: swap;
}

@font-face {
  font-family: "Circular Std";
  font-weight: 350;
  src: url("../fonts/CircularStd-Book.woff");
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  font-weight: 700;
  src: url("../fonts/Roboto-Bold.woff2");
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  font-weight: 400;
  src: url("../fonts/Roboto-Regular.woff2");
  font-display: swap;
}

/* prevent anchor links from scrolling too far down */
html {
  --ck-bar-height: 35px;
  --navbar-height: 76px;
  scroll-padding-top: calc(var(--ck-bar-height) + var(--navbar-height));
}

@media all and (max-width: 991px) {
  html {
    --navbar-height: 44px;
  }
}


html,
body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #F9F9F9;
}

a {
  color: #DC2727;
}

.btn-check:focus+.btn, .btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(220 39 39 / 25%);
}

.btn {
  border-radius: 30px;
  font-weight: 700;
  font-size: 1rem;
  line-height: calc(19 / 16);
  transition: color 250ms, background-color 250ms;
}

.btn.btn-primary {
  background-color: #DC2727;
  border-color: #DC2727;
}

.btn.btn-primary:hover {
  background-color: #DC2727;
  border-color: #DC2727;
}

.btn.btn-outline-primary {
  color: #DC2727;
  border-color: #DC2727;
  background-color: white;
}

.btn.btn-outline-primary:hover {
  color: white;
  border-color: #DC2727;
  background-color: #DC2727;
}

.btn.btn-link {
  color: #DC2727;
  text-decoration: underline;
}

.btn.btn-link:hover {
  color: #0a58ca;
}

.page {
  padding-top: 112px;
}

.highlights a,
.highlights-new a,
.features-detail a,
.features-extra a {
  font-weight: 700;
  text-decoration: none;
}

@media all and (max-width: 991px) {
  .page {
    padding-top: 70px;
  }
}

#blog,
#blog-intro {
  padding-top: 20px;
  padding-bottom: 50px;
  background-color: white;
}

header {
  position: fixed;
  z-index: 10;
  top: 35px;
  left: 0;
  width: 100%;
  border-bottom: 1px solid #EBEBEB;
  background-color: white;
}

header .navbar {
  background-color: #121212;
  font-size: 12.8px;
}

header .navbar .container {
  width: 100%;
}

header .navbar .col {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header .navbar a {
  color: white;
  text-decoration: none;
}

header .navbar ul.brand-nav {
  display: flex;
  text-transform: uppercase;
  margin: 0;
}

header .navbar ul.brand-nav li.nav-item {
  padding: 1px 15px;
}

header .navbar ul.brand-nav li.nav-item a {
  font-weight: 700;
  font-size: .75rem;
}

header .col {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .col .logo img {
  width:  182px;
  height: auto;
}

@media all and (max-width: 767px) {
  header .col .logo img {
    width: 125px;
    position: relative;
    z-index: 6;
  }
}

header .col .ui.dropdown.chapters {
  width: auto;
  flex-grow: 1;
  max-width: 47.5%;
  margin: 0 2rem 0 auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms;
}

header .col .ui.dropdown.chapters.appear {
  opacity: 1;
  pointer-events: all;
}

@media all and (max-width: 991px) {
  header .col .ui.dropdown.chapters {
    display: none
  }
}

header .col .btn-search {
  display: none;
  margin-left: auto;
}

@media all and (max-width: 991px) {
  body:not(.home) header .col .btn-search {
    display: block;
  }
}

header .col .hamburger {
  display: none;
  padding: 10px;
}

@media all and (max-width: 991px) {
  header .col .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 6;
  }
}

header .col ul.nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media all and (max-width: 991px) {
  header .col ul.nav {
    position: fixed;
    z-index: 5;
    top: 45px;
    left: 0;
    width: 100%;
    transform: translateY(-500px);
    transition: transform 500ms;
    flex-direction: column;
    justify-content: flex-start;
    background-color: white;
    padding: 1rem 0;
  }

  header .col ul.nav.open {
    transform: translateY(0);
  }
}

header .col ul.nav a {
  font-size: 1rem;
  color: black;
  display: block;
  padding: 26px 10px;
  transition: color 250ms;
  text-decoration: none;
}

@media all and (max-width: 991px) {
  header .col ul.nav a {
    padding: 10px 0;
  }
}

header .col ul.nav a svg path {
  transition: fill 250ms;
}

header .col ul.nav a:hover {
  color: #DC2727;
  background-color: transparent;
}

header .col ul.nav a:hover svg path {
  fill: #DC2727;
}

header .col ul.nav li.mobile {
  display: none;
}

@media all and (max-width: 991px) {
  body:not(.home) header .col ul.nav li.mobile {
    display: list-item;
  }
}

header .col ul.nav li.mobile a.active {
  color: #DC2727;
  font-weight: 700;
}

header .col ul.nav li.pre-cart a {
  padding-right: 20px;
}

@media all and (max-width: 991px) {
  header .col ul.nav li.pre-cart a {
    padding-right: 0;
  }
}

header .col ul.nav li.cart a {
  border-left: 1px solid #EEEEEE;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 20px;
}

@media all and (max-width: 991px) {
  header .col ul.nav li.cart a {
    border-left: none;
  }
}

header .col ul.nav li.cart svg {
  margin-left: 0.875rem;
}

header .col form.search-form {
  display: none;
}

@media all and (max-width: 991px) {
  header .col form.search-form {
    position: fixed;
    z-index: 5;
    top: 45px;
    left: 0;
    width: 100%;
    transform: translateY(-200px);
    /*transition: transform 500ms;*/
    background-color: white;
    display: block;
    padding: 1rem 15px;
  }

  header .col form.search-form.open {
    transform: translateY(0);
  }
}

.hero {
  /* background-image: linear-gradient(-43deg, #EAEAEA 0%, #F9F9F9 100%); */
  position: relative;
}

.hero::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url(../images/mk4-all-colors.webp);
  background-size: cover;
  background-position: center;
  filter: brightness(1.2) contrast(0.8) sepia(0);
}

.hero::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, #000000a3 30%, #0000002e 80%);
}

@media all and (max-width: 991px) {
  .hero::after {
    background: linear-gradient(to bottom, #000000a3 45%, #0000002e 80%);
  }
}

.hero * {
  z-index: 1;
}

.hero .left {
  padding-top: 75px;
  padding-bottom: 115px;
}

.hero .left * {
  color: hsl(0, 0%, 98%) !important;
  text-shadow: 0 0 0.375em hsla(0, 0%, 0%, 1);
}

@media all and (max-width: 767px) {
  .hero .left {
    padding-top: 1rem;
  }
}

.hero .made {
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items:  center;
  justify-content: flex-start;
  margin-bottom: 23px;
}

.hero .made img {
  margin-right: 11.5px;
  width: 27.75px;
  height: auto;
}

.hero .made a {
  color: black;
}

.hero h1 {
  font-family: "Circular Std";
  font-size: 4.0625rem;
  font-weight: 700;
  letter-spacing: -1.18px;
  line-height: 1;
  margin: 0 0 20px;
}

@media all and (max-width: 767px) {
  .hero h1 {
    font-size: 2.75rem;
  }
}

.hero .sub {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  line-height: calc(28 / 16);
  margin: 0 0 30px;
}

.hero .features {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 35px;
  padding: 0;
}

@media all and (max-width: 767px) {
  .hero .features {
    flex-wrap: wrap;
  }
}

.hero .features li {
  position: relative;
  padding: 0 0 0 27px;
  margin-right: 27px;
}

@media all and (max-width: 767px) {
  .hero .features li {
    margin-right: 0;
    width: 50%;
    flex: 0 0 50%;
    padding-bottom: 1rem;
  }
}

.hero .features li:last-child {
  margin-right: 0;
}

.hero .features li::before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 17px;
  height: 17px;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3ClinearGradient x1='101.044492%25' y1='59.6007186%25' x2='4.3031316%25' y2='39.8564274%25' id='linearGradient-1'%3E%3Cstop stop-color='%23EAEAEA' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23F9F9F9' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3Cpolygon id='path-2' points='0 1.12088117e-12 1440 8.49417758e-13 1440 631 0 631'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Home' transform='translate(-140.000000, -474.000000)'%3E%3Cg id='CC-Front' transform='translate(0.000000, 75.000000)'%3E%3Cmask id='mask-3' fill='white'%3E%3Cuse xlink:href='%23path-2'%3E%3C/use%3E%3C/mask%3E%3Cuse id='Mask-2' fill='url(%23linearGradient-1)' xlink:href='%23path-2'%3E%3C/use%3E%3Cg id='Group-15' mask='url(%23mask-3)'%3E%3Cg transform='translate(139.000000, 121.000000)' id='Group-8'%3E%3Cg transform='translate(0.500000, 273.000000)'%3E%3Cg id='Group-13' transform='translate(0.500000, 0.000000)'%3E%3Cg id='Organization-/-Status-/-checkmark--filled-/-32' transform='translate(0.000000, 5.000000)'%3E%3Cpath d='M8.4,0 C3.7608081,0 0,3.7608081 0,8.4 C0,13.0391919 3.7608081,16.8 8.4,16.8 C13.0391919,16.8 16.8,13.0391919 16.8,8.4 C16.8,6.17218149 15.9150025,4.03560862 14.339697,2.46030304 C12.7643914,0.884997459 10.6278185,0 8.4,0 Z M7.2,11.75448 L4.2,8.75448 L5.15436,7.8 L7.2,9.84552 L11.646,5.4 L12.60342,6.35154 L7.2,11.75448 Z' id='Fill' fill='%2303C96E'%3E%3C/path%3E%3Cpolygon id='Inner-Fill' fill='%23FFFFFF' points='7.2 11.7546 4.2 8.7546 5.1546 7.8 7.2 9.8454 11.646 5.4 12.603 6.351'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  border-radius: 100%;
  border: 1px solid #eaeaea;
}

.hero .buttons .btn {
  padding: 20px 36px;
  margin: 0 1rem 0 0;
}

@media all and (max-width: 767px) {
  .hero .buttons .btn {
    margin-right: 0;
    display: block;
  }
}

.hero .buttons .btn:last-child {
  margin-right: 0;
}

@media all and (max-width: 767px) {
  .hero .buttons .btn:last-child {
    margin-top: 1rem;
  }
}

.hero .hodl-safe {
  position: relative;
  max-width: max-content;
}

.hero .hodl-safe .by {
  min-width: max-content;
  position: absolute;
  left: 62.5%;
  top: 23%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background-color: white;
  color: black !important;
  border-radius: 14px;
  font-style: italic;
  font-size: 1rem;
  line-height: calc(19 / 16);
  z-index: 3;
}

.hero .right {
  display: flex;
  align-items: flex-end;
}

.hero .right img {
  max-width: 100%;
  height: auto;
}

@media all and (max-width: 991px) {
  .hero .right img {
    max-width: 400px;
  }
}

.hero .by::before {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - 5px);
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;  
  border-top: 10px solid white;
}

.hero .by svg {
  width: 15px;
  height: auto;
  margin-right: 11px;
}

.highlights {
  padding: 100px 0;
}

.highlights .row > div:nth-child(-n + 2) {
  border-right: 1px solid #EFEFEF;
}

.highlights .row > div:first-child {
  padding-left: 0;
}

.highlights .row > div:last-child {
  padding-right: 0;
}

@media all and (max-width: 767px) {
  .highlights .row > div:first-child {
    padding-left: 15px;
  }

  .highlights .row > div:last-child {
    padding-right: 15px;
  }
}

.highlights .icon-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  padding: 0 30px;
}

@media all and (max-width: 767px) {
  .highlights .icon-text {
    padding: 0 0 2rem;
  }
}

.highlights .icon-text .icon {
  width: 53px;
  height: 53px;
  border-radius: 15px;
  background-color: #D72626;
  margin-right: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media all and (max-width: 991px) and (min-width: 768px) {
  .highlights .icon-text .icon {
    margin-bottom: 1rem;
  }
}

.highlights .icon-text .icon svg {
  height: auto;
}

.highlights .icon-text h4 {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.33px;
  line-height: 1;
  margin: 0;
}

.highlights .icon-text p {
  width: 100%;
  margin: 18px 0 0;
  font-size: 0.875rem;
  line-height: 2;
}

.features {
  position: relative;
}

.features .screens {

}

.features .screens .screen {
  height: 50vh;
  width: 100%;
}

.features .container {
  background-image: linear-gradient(137deg, #374249 11%, #171D1E 99%);
  border-radius: 15px;
  position: sticky;
  top: 90px;
}

.features .container > .row {
  min-height: 600px;
}

.features .left {
  position: relative;
}

@media all and (max-width: 767px) {
  .features .left {
    padding-top: 200px;
  }
}

.features .left .bubbles {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.features .left .bubbles img {
  opacity: 0;
  width: 200px;
  height: auto;
  position: absolute;
  transition: opacity 250ms, transform 250ms;
  transform: scale(0.25);
}

@media all and (max-width: 991px) {
  .features .left .bubbles img {
    width: 100px;
  }
}

.features .left .bubbles img:nth-child(1) {
  right: 5%;
  bottom: 10%;
}

.features .left .bubbles img:nth-child(2) {
  right: 5%;
  top: 25%;
}

.features .left .bubbles img:nth-child(3) {
  left: 0;
  top: 50%;
}

.features .left .bubbles img:nth-child(4) {
  left: 0;
  top: 40%;
}

.features .left .bubbles img:nth-child(5) {
  right: 5%;
  bottom: 20%;
}

.features .left .bubbles img:nth-child(6) {
  right: 5%;
  top: 25%;
}

@media all and (max-width: 991px) {
  .features .left .bubbles img:nth-child(1) {
    bottom: 30%;
  }

  .features .left .bubbles img:nth-child(5) {
    bottom: 30%;
  }
}

@media all and (max-width: 767px) {
  .features .left .bubbles img:nth-child(1) {
    right: 20%;
    top: 10%;
  }

  .features .left .bubbles img:nth-child(2) {
    right: 20%;
    top: 5%;
  }

  .features .left .bubbles img:nth-child(3) {
    left: 15%;
    top: 40%;
  }

  .features .left .bubbles img:nth-child(4) {
    left: 15%;
    top: 30%;
  }

  .features .left .bubbles img:nth-child(5) {
    right: 20%;
    bottom: 20%;
  }

  .features .left .bubbles img:nth-child(6) {
    right: 20%;
    top: 25%;
  }
}

.features .left .bubbles img.appear {
  opacity: 1;
  transform: scale(1);
}

.features .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media all and (max-width: 767px) {
  .features .right {
    padding-bottom: 2rem;
  }
}

.features .mk3 {
  width: 464px;
  height: auto;
  position: absolute;
  bottom: -180px;
  left: calc(50% - (464px / 2));
}

@media all and (max-width: 991px) and (min-width: 768px) {
  .features .mk3 {
    width: 100%;
    bottom: auto;
    top: 20%;
    left: 0;
  }
}

@media all and (max-width: 767px) {
  .features .mk3 {
    width: 40%;
    left: 30%;
    bottom: auto;
    top: -90px;
  }
}

@media all and (max-width: 425px) {
  .features .mk3 {
    width: 50%;
    left: 25%;
  }
}

@media all and (max-width: 375px) {
  .features .mk3 {
    width: 55%;
    left: 22.5%;
  }
}

.features .sub {
  font-family: "Circular Std";
  font-weight: 700;
  letter-spacing: 0.89px;
  font-size: 1rem;
  line-height: calc(20/16);
  color: #C0C0C0;
  display: block;
  margin: 0 0 15px;
  text-transform: uppercase;
}

@media all and (max-width: 767px) {
  .features .sub {
    margin-bottom: 5px;
  }
}

.features h2 {
  font-family: "Circular Std";
  font-weight: 700;
  letter-spacing: -0.82px;
  font-size: 2.8125rem;
  line-height: 1;
  margin: 0 0 43px;
  color: white;
}

@media all and (max-width: 767px) {
  .features h2 {
    font-size: 1.75rem;
  }
}

.features .features-box {
  border: 1px solid #FFFFFF;
  border-radius: 15px;
  padding: 28px;
  margin: 0 0 43px;
  height: 150px;
  position: relative;
}

@media all and (max-width: 1399px) and (min-width: 992px) {
  .features .features-box {
    height: 190px;
  }
}

@media all and (max-width: 991px) {
  .features .features-box {
    height: 170px;
  }
}

@media all and (max-width: 767px) {
  .features .features-box {
    height: 200px;
  }
}

.features .features-box .progress {
  position: absolute;
  right: 10px;
  top: 10px;
  bottom: 10px;
  width: 10px;
  height: auto;
  background: transparent;
}

.features .features-box .progress::before {
  content: "";
  position: absolute;
  top: var(--top);
  right: 0;
  width: 10px;
  background-color: white;
  height: var(--height);
  border-radius: 0.25rem;
  transition: top 250ms;
}

.features .feature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  padding: 28px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 250ms;
}

.features .feature.active {
  opacity: 1;
}

.features .feature img {
  margin-right: 28px;
}

.features .feature h4 {
  flex-grow: 1;
  font-family: "Circular Std";
  font-weight: 700;
  color: white;
  line-height: 1;
  font-size: 1.625rem;
  letter-spacing: -0.47px;
  margin: 0;
  color: white;
}

.features .feature .text {
  width: 100%;
  font-size: 0.875rem;
  line-height: 2;
  margin: 11.5px 0 0;
  color: white;
}

.features .feature .text p {
  margin: 0;
  /*width: 50%;*/
}

.features .feature .text p.short {
  max-width: 75%;
}

@media all and (max-width: 1249px) {
  .features .feature .text p.short {
    max-width: 100%;
  }
}

@media all and (max-width: 767px) {
  .features .feature .text p.short {
    max-width: 100%;
  }
}

.features .btn.btn-block {
  padding: 1rem .75rem;
}

.highlights-new {
  margin-top: 190px;
}

.highlights-new .container {
  background-image: url("../images/mk4_bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #FFF;
  padding-top: 108px;
  padding-bottom: 108px;
  border-radius: 15px;
  border: 1px solid #EFEFEF;
}

.highlights-new .header span.title,
.connectivity .header span.title,
.slide-cover .header span.title,
.multiple-colors .header span.title {
  font-family: "Circular Std", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: calc(20/16);
  color: #DC2727;
  text-transform: uppercase;
  display: block;
  margin: 0 0 15px;
  letter-spacing: 0.89px;
}

.highlights-new .header span.title {
  margin-bottom: 25px;
}

.highlights-new .header h2,
.connectivity .header h2,
.slide-cover .header h2,
.multiple-colors .header h2 {
  font-family: "Circular Std", sans-serif;
  font-weight: 700;
  font-size: 2.8125rem;
  letter-spacing: -0.82px;
  line-height: 1;
  margin: 0;
}

.highlights-new .header h2 {
  margin-bottom: 25px;
}

.highlights-new img,
.connectivity img,
.slide-cover img {
  max-width: 100%;
}

.highlights-new .content,
.connectivity .content {
  font-size: .875rem;
  line-height: 2;
  font-weight: 400;
  font-family: Roboto, sans-serif;
  color: #303030;
}

.highlights-new .content ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.highlights-new .content ul.new-mk4-list>li {
  position: relative;
  padding-left: 25px;
}

.highlights-new .content ul.new-mk4-list>li::before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 17px;
  height: 17px;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3ClinearGradient x1='101.044492%25' y1='59.6007186%25' x2='4.3031316%25' y2='39.8564274%25' id='linearGradient-1'%3E%3Cstop stop-color='%23EAEAEA' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23F9F9F9' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3Cpolygon id='path-2' points='0 1.12088117e-12 1440 8.49417758e-13 1440 631 0 631'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Home' transform='translate(-140.000000, -474.000000)'%3E%3Cg id='CC-Front' transform='translate(0.000000, 75.000000)'%3E%3Cmask id='mask-3' fill='white'%3E%3Cuse xlink:href='%23path-2'%3E%3C/use%3E%3C/mask%3E%3Cuse id='Mask-2' fill='url(%23linearGradient-1)' xlink:href='%23path-2'%3E%3C/use%3E%3Cg id='Group-15' mask='url(%23mask-3)'%3E%3Cg transform='translate(139.000000, 121.000000)' id='Group-8'%3E%3Cg transform='translate(0.500000, 273.000000)'%3E%3Cg id='Group-13' transform='translate(0.500000, 0.000000)'%3E%3Cg id='Organization-/-Status-/-checkmark--filled-/-32' transform='translate(0.000000, 5.000000)'%3E%3Cpath d='M8.4,0 C3.7608081,0 0,3.7608081 0,8.4 C0,13.0391919 3.7608081,16.8 8.4,16.8 C13.0391919,16.8 16.8,13.0391919 16.8,8.4 C16.8,6.17218149 15.9150025,4.03560862 14.339697,2.46030304 C12.7643914,0.884997459 10.6278185,0 8.4,0 Z M7.2,11.75448 L4.2,8.75448 L5.15436,7.8 L7.2,9.84552 L11.646,5.4 L12.60342,6.35154 L7.2,11.75448 Z' id='Fill' fill='%2303C96E'%3E%3C/path%3E%3Cpolygon id='Inner-Fill' fill='%23FFFFFF' points='7.2 11.7546 4.2 8.7546 5.1546 7.8 7.2 9.8454 11.646 5.4 12.603 6.351'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.connectivity {
  border-bottom: 1px solid #E7E7E7;
  padding: 120px 0 80px;
}

.connectivity .card-mk4 .card-img {
  position: relative;
  margin-bottom: 50px;
  font-size: .625rem;
  line-height: 1;
  font-weight: 700;
  font-family: Roboto, sans-serif;
}

.connectivity .card-mk4 .card-img.disabled::after {
  content: "Disabled By Default";
  position: absolute;
  left: 25px;
  bottom: 15px;
  display: block;
  background: black;
  color: #fff;
  border-radius: 15px;
  border: 2px solid #fff;
  padding: 6px 8px;
}

.connectivity .card-mk4 h3 {
  font-weight: 700;
  font-family: "Circular Std", sans-serif;
  font-size: 1.625rem;
  line-height: 1;
  color: #000;
  margin-bottom: 19px;
}

.connectivity .card-mk4 p {
  margin-bottom: 20px;
}

.connectivity .header h2 {
  margin-bottom: 59px;
}

.slide-cover,
.multiple-colors {
  border-bottom: 1px solid #E7E7E7;
  padding-top: 120px;
  padding-bottom: 120px;
}

.slide-cover .header h2,
.multiple-colors .header h2 {
  margin-bottom: 25px;
}

.slide-cover img {
  max-height: 430px;
}

.slide-cover .content p
.multiple-colors .content p {
  font-size: .875rem;
  line-height: 2;
  color: #303030;
}

.slide-cover video {
  width: 140px;
  height: 140px;
  position: absolute;
  top: calc(50% - 70px);
  border-radius: 50%;
  border: 5px solid #F9F9F9;
  background: #fff;
  left: 213px;
  box-shadow: 0 2px 27px RGBA(0, 0, 0, 0.1);
}

.multiple-colors .video-container {
  position: relative;
  max-width: 18rem;
  overflow: hidden;
  border-radius: 36px;
  margin: 0 auto;
}


.multiple-colors .video-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 1px solid #e6e6e6; 
  border-radius: 36px;
  z-index: 1;
  pointer-events: none;
}

.multiple-colors video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.multiple-colors .btn {
  margin-top: 1.5rem;
  padding: 1rem 0.75rem;
}

@media all and (max-width: 767px) {
  .multiple-colors .video-container {
    margin: 0 auto 3rem;
  }
}

.features-extra {
  padding: 190px 0 72px;
  border-bottom: 1px solid #E7E7E7;
}

.features-extra.alt {
  padding-top: 100px;
  padding-bottom: 100px;
}

.features-extra .features-list {
  background-image: linear-gradient(137deg, #374249 11%, #171D1E 99%);
  border-radius: 15px;
  padding: 40px 50px;
  list-style: none;
  margin: 25px 0 0 50px;
}

@media all and (max-width: 991px) {
  .features-extra .features-list {
    padding: 20px;
    margin-left: 0;
  }
}

@media all and (max-width: 767px) {
  .features-extra .features-list {
    padding: 20px;
    margin: 0 0 2rem 0;
  }
}

.features-extra .features-list li {
  border-bottom: 1px solid rgba(255,255,255,0.35);
}

.features-extra .features-list li .btn-link {
  font-size: 1.125rem;
  color: white;
  font-family: "Circular Std";
  font-weight: 350;
  letter-spacing: -0.33px;
  line-height: 1.25;
  padding: 1rem 0;
  -webkit-appearance: none;
  border: none;
  text-decoration: none;
  background-color: transparent;
  text-align: left;
  transition: padding-left 250ms;
}

@media all and (max-width: 991px) {
  .features-extra .features-list li .btn-link {
    font-size: 1rem;
  }
}

.features-extra .features-list .btn-link.sel,
.features-extra .features-list .btn-link:hover {
  font-weight: 700;
  position: relative;
  padding-left: 20px;
}

.features-extra .features-list .btn-link.sel::before,
.features-extra .features-list .btn-link:hover::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='8px' height='10px' viewBox='0 0 8 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpolygon id='Triangle' fill='%23C0C0C0' transform='translate(4.000000, 5.000000) rotate(-270.000000) translate(-4.000000, -5.000000) ' points='4 1 9 9 -1 9'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
  display: block;
  width: 8px;
  height: 10px;
  position: absolute;
  top: 22px;
  left: 0;
}

.features-extra .feature-container {
  display: none;
  transition: opacity 250ms, transform 250ms;
}

.features-extra .feature-container.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.features-extra .feature-container.out {
  opacity: 0;
  transform: translateY(50px);
}

.features-extra .feature-container.in {
  display: block;
  opacity: 0;
  transform: translateY(50px);
}

.features-extra .header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 35px;
}

.features-extra .header .title span {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 1rem;
  line-height: calc(20/16);
  color: #DC2727;
  text-transform: uppercase;
  display: block;
  margin: 0 0 15px;
  letter-spacing: 0.89px;
}

.features-extra .header .title h3 {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 2.8125rem;
  letter-spacing: -0.82px;
  line-height: 1;
  margin: 0;
}

.features-extra .header .title h3.short {
  max-width: 70%;
}

.features-extra .header .image {
  background: #FFFFFF;
  border: 1px solid #EFEFEF;
  border-radius: 14px;
  padding: 8px;
  margin-left: 2rem;
}

.features-extra .header .image img {
  max-width: 100%;
  width: 300px;
  height: auto;
}

.features-extra .sub {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: -0.47px;
  line-height: 1;
  margin: 0 0 19px;
}

.features-extra p,
.features-extra li {
  font-size: 0.875rem;
  line-height: 2;
}

.features-extra p:last-child {
  margin-bottom: 0;
}

.more-products {
  padding: 94px 0;
}

.more-products.videos {
  background-color: white;
}

.more-products .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 50px;
}

@media all and (max-width: 767px) {
  .more-products .top {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

.more-products h3 {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: -0.47px;
  line-height: 1;
  margin: 0;
}

@media all and (max-width: 767px) {
  .more-products h3 {
    margin-bottom: 2rem;
  }
}

.more-products .controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.more-products .controls a {
  font-size: 1rem;
  font-weight: 700;
  text-decoration: underline;
  line-height: calc(19/16);
  margin-right: 30px;
}

.more-products .controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  border: 1px solid #DC2727;
  border-radius: 50%;
  background-color: white;
  padding: 0;
}

.more-products .controls button:last-child {
  margin-left: 15px;
}

.more-products .products-carousel {
  display: flex;
}

.more-products .products-carousel .slick-track {
  display: flex;
}

.more-products .product-card.slick-slide {
  background: #FFFFFF;
  border: 1px solid #EFEFEF;
  border-radius: 15px;
  padding: 70px 80px;
  max-width: 1040px;
  width: 100%;
  margin-right: 40px;
  display: flex;
  height: auto;
}

@media all and (max-width: 1099px) {
  .more-products .product-card.slick-slide {
    max-width: none;
    width: 90vw;
  }
}

@media all and (max-width: 991px) {
  .more-products .product-card.slick-slide {
    padding: 20px;
    max-width: none;
    width: 80vw;
  }
}

@media all and (max-width: 767px) {
  .more-products .product-card.slick-slide {
    padding: 20px;
    max-width: none;
    width: 90vw;
  }
}

.more-products .product-card .left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.more-products .product-card .left .title {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 1rem;
  color: #DC2727;
  letter-spacing: 0.89px;
  line-height: calc(20 / 16);
  text-transform: uppercase;
}

.more-products .product-card .left h2 {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 2.8125rem;
  color: #000000;
  letter-spacing: -0.82px;
  line-height: 1;
  margin: 25px 0 33px;
}

@media all and (max-width: 767px) {
  .more-products .product-card .left h2 {
    font-size: 2rem;
  }
}

.more-products .product-card .left ul {
  font-size: 0.875rem;
  color: #303030;
  line-height: 2;
  margin: 0 0 30px 1.25rem;
  padding: 0;
}

.more-products .product-card .left p {
  font-size: 0.875rem;
  color: #303030;
  line-height: 2;
  margin-bottom: 30px;
}

.more-products .product-card .left .buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: auto;
}

@media all and (max-width: 767px) {
  .more-products .product-card .left .buttons {
    flex-direction: column
  }
}

.more-products .product-card .left .buttons .btn {
  font-weight: 700;
  padding: 1rem 1.25rem;
}

.more-products .product-card .left .buttons .btn:first-child {
  margin-right: 30px;
}

@media all and (max-width: 767px) {
  .more-products .product-card .left .buttons .btn:first-child {
    margin-right: 0;
    margin-top: 1rem;
  }
}

.more-products .product-card .right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.more-products .product-card .right img {
  max-width: 100%;
  height: auto;
}

@media all and (max-width: 991px) and (min-width: 768px) {
  .more-products .product-card .right img {
    width: 50%;
  }
}

.more-products .video-card.slick-slide {
  border-radius: 15px;
  background-color: #F9F9F9;
  overflow: hidden;
  max-width: 431px;
  width: 100%;
  margin-right: 40px;
  border: 1px solid #EFEFEF;
  height: auto;
}

@media all and (max-width: 767px) {
  .more-products .video-card.slick-slide {
    width: 90vw;
    max-width: none;
  }
}

.more-products .video-card .video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.more-products .video-card .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.more-products .video-card .bottom {
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
}

.more-products .video-card .bottom .title {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.36px;
  line-height: calc(26/20);
}

.more-products .video-card .bottom .date {
  font-family: Roboto-Regular;
  font-size: 0.875rem;
  color: #303030;
  line-height: 2;
}

.compatibility {
  background: #FFF;
  border-bottom: 1px solid #E7E7E7;
  padding: 100px 0 105px;
}

.compatibility .title {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 1rem;
  color: #DC2727;
  letter-spacing: 0.89px;
  line-height: calc(20 / 16);
  text-transform: uppercase;
}

.compatibility h2 {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 2.8125rem;
  color: #000000;
  letter-spacing: -0.82px;
  line-height: 1;
  margin: 25px 0 0;
}

@media all and (max-width: 767px) {
  .compatibility h2 {
    font-size: 2rem;
  }
}

.compatibility h2 svg {
  width: 35px;
  height: auto;
}

.compatibility p {
  margin: 50px 0;
  font-size: 0.875rem;
  color: #303030;
  line-height: 2;
}

.compatibility .logo-col {
  border-top: 1px solid #EFEFEF;
  padding-top: 22px;
}

.compatibility .logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-left: -18px;
  margin-right: -18px;
}

@media all and (max-width: 767px) {
  .compatibility .logos {
    margin-left: 0;
    margin-right: 0;
  }
}

.compatibility .logos img {
  width: 16.6666667%;
  height: auto;
  padding: 35px 18px;
  filter: grayscale(1);
}

@media all and (max-width: 767px) {
  .compatibility .logos img {
    width: 45%;
    padding: 35px 15px;
  }
}

.compatibility .logos span {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.33px;
}

@media all and (max-width: 767px) {
  .compatibility .logos span {
    text-align: center;
    width: 45%;
  }
}

.features-detail {
  padding: 110px 0 0;
  background-color: white;
}

.features-detail .top {
  text-align: center;
}

.features-detail .top .title {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 1rem;
  color: #DC2727;
  letter-spacing: 0.89px;
  line-height: calc(20 / 16);
  text-transform: uppercase;
}

.features-detail .top h2 {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 2.8125rem;
  color: #000000;
  letter-spacing: -0.82px;
  line-height: 1;
  margin: 15px 0 90px;
}

.features-detail h3 {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: -0.47px;
  line-height: 1;
  margin: 0 0 19px;
}

.features-detail p,
.features-detail ul li {
  font-size: 0.875rem;
  color: #303030;
  letter-spacing: 0;
  line-height: 2;
  margin-bottom: 1rem;
}

.features-detail ul {
  padding: 0 0 0 1.25rem;
}

.features-detail ul li {
  margin-bottom: 0;
}

.features-detail .more-content {
  display: none;
}

.features-detail .image-col,
.features-detail .text-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.features-detail .text-col {
  padding-top: 5rem;
}

.features-detail .image-col {
  justify-content: flex-start;
}

.features-detail .image-col img {
  max-width: 100%;
  height: auto;
}

.features-detail .feature-row {
  margin-bottom: 50px;
}

@media all and (min-width: 768px) {
  .features-detail .feature-row:nth-child(odd) {
    flex-direction: row-reverse;  
  }
}

.features-detail .feature-row:nth-child(odd) .image-col {
  align-items: flex-end;
}

.features-detail .mini-features {
  border-top: 1px solid #EFEFEF;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 38px 0;
}

@media all and (max-width: 767px) {
  .features-detail .mini-features {
    flex-direction: column;
    align-items: flex-start;
  }
}

.features-detail .mini-features .features {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 80px;
  margin-left: 80px;
}

@media all and (max-width: 991px) {
  .features-detail .mini-features .features {
    margin-left: 0;
    margin-right: 0;
  }
}

@media all and (max-width: 767px) {
  .features-detail .mini-features .features {
    margin-right: 0;
    margin-left: 0;
    align-items: flex-start;
    margin-bottom: 1rem;
  }

  .features-detail .mini-features .features:last-child {
    margin-bottom: 0;
  }
}

.features-detail .mini-features .features svg {
  margin-right: 19px;
}

@media all and (max-width: 767px) {
  .features-detail .mini-features .features svg {
    margin-top: 6px;
  }
}

.features-detail .mini-features .features span {
  font-weight: 700;
  font-size: 0.875rem;
  color: #303030;
  line-height: 2;
}

.production {
  background: #fff;
  padding-top: 100px;
  padding-bottom: 90px;
  border-bottom: 1px solid #E7E7E7;
}

.production .top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 70px;
}

@media all and (max-width: 767px) {
  .production .top {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

.production .section-title .title {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 1rem;
  color: #DC2727;
  letter-spacing: 0.89px;
  line-height: calc(20 / 16);
  text-transform: uppercase;
}

.production .section-title h2 {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 2.8125rem;
  color: #000000;
  letter-spacing: -0.82px;
  line-height: 1;
  margin: 25px 0 0;
  max-width: 60%;
}

@media all and (max-width: 767px) {
  .production .section-title h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    max-width: 100%;
  }
}

.production .top a {
  font-weight: 700;
  font-size: 1rem;
}

.production .step {
  display: flex;
  flex-direction: column;
}

@media all and (max-width: 767px) {
  .production .step {
    margin-bottom: 2rem;
  }
}

.production .step .image {
  background-image: linear-gradient(-43deg, #EAEAEA 0%, #F9F9F9 100%);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 362px;
}

@media all and (max-width: 1099px) and (min-width: 992px) {
  .production .step .image {
    height: 250px;
  }
}

@media all and (max-width: 991px) and (min-width: 768px) {
  .production .step .image {
    height: 150px;
  }
}

.production .step .image img {
  max-width: 75%;
  max-height: 90%;
  width: auto;
  height: auto;
}

.production .step .step-title {
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: -0.47px;
  line-height: 1;
  margin: 40px 0 20px;
}

.production .step p:not(.step-title) {
  font-size: 0.875rem;
  color: #303030;
  line-height: 2;
  margin: 0;
}

.cta {
  background-image: linear-gradient(-43deg, #EAEAEA 0%, #F9F9F9 100%);
  padding: 105px 0;
}

.cta h2 {
  text-align: center;
  font-family: "Circular Std";
  font-weight: 700;
  font-size: 3.4375rem;
  letter-spacing: -1px;
  line-height: 1;
  margin: 0 0 35px;
}

@media all and (max-width: 767px) {
  .cta h2 {
    font-size: 2.5rem;
  }
}

.cta .buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 7.5px;
  margin-right: 7.5px;
}

.cta .buttons .btn {
  margin: 0 7.5px;
  font-size: 1rem;
  padding: 1rem 2rem;
}

footer {
  background-color: white;
  padding: 60px 0 0;
  border-top: 1px solid #EFEFEF;
}

footer .left img {
  width: 101px;
  height: auto;
  margin: 0 0 34px;
}

footer .left .made {
  font-size: 1rem;
  line-height: calc(19 / 16);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  color: black;
}

footer .left .made:hover {
  text-decoration: underline;
  color: black;
}

footer .left .made svg {
  width: 15px;
  height: auto;
  margin: 0 2px;
}

footer .right .title {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0;
}

@media all and (max-width: 767px) {
  footer .right .title {
    margin-top: 2rem;
    display: block;
  }
}

footer .right ul {
  list-style: none;
  margin: 25px 0 0;
  padding: 0;
}

footer .right ul li {
  padding: 0 0 1rem;
}

footer .right ul li a {
  font-size: 1rem;
  line-height: calc(19 / 16);
  color: black;
  text-decoration: none;
}

footer .bottom {
  margin-top: 100px;
  border-top: 1px solid #EFEFEF;
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media all and (max-width: 767px) {
  footer .bottom {
    margin-top: 2rem;
    flex-direction: column-reverse;
  }
}

footer .bottom .copy {
  font-size: 1rem;
  color: #9B9B9B;
  margin: 0;
}

@media all and (max-width: 767px) {
  footer .bottom .copy {
    margin-top: 1rem;
    font-size: 0.9rem;
  }
}

footer .bottom ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
}

footer .bottom ul li {
  padding-right: 24px;
}

footer .bottom ul li:last-child {
  padding-right: 0;
}

footer .bottom ul li a {
  font-size: 1rem;
}

footer .bottom ul li a.social {
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #D92626;
}

footer .bottom ul li a.social svg {
  width: 16px;
  height: auto;
}

.docs {
  padding-top: calc(100px + 50px);
  padding-bottom: 100px;
  background-color: white;
}

@media all and (max-width: 767px) {
  .docs {
    padding-top: 110px;
  }
}

.docs .sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0 10px 0 0;
  width: 300px;
  overflow: auto;
  position: sticky;
  top: 9.3rem;
  height: calc(100vh - 12rem);
  scrollbar-gutter: stable;
}

.docs .sidebar-nav > li {
  padding: 10px 0 0 0;
}
.docs .sidebar-nav > li.search {
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 20px;
}

.docs .sidebar-nav > li > :is(button, a) {
  display: block;
  width: 100%;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  position: relative;
  color: rgba(0, 0, 0, 1);
  font-family: "Circular Std";
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.29px;
  text-align: left;
}

.docs .sidebar-nav > li > :is(button, a)::after {
  /* chevron right of nav item */
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: 4px;
  width: 12px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg width='5px' height='8px' viewBox='0 0 5 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Actions-/-Navigation-/-chevron--right-/-24' transform='translate(-4.000000, -2.000000)' fill='%23000000'%3E%3Cpolygon id='Fill' points='8.25 6 4.5 9.75 3.975 9.225 7.2 6 3.975 2.775 4.5 2.25'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  transition: transform 0.1s ease-out;
  transform-origin: left;
}
.docs .sidebar-nav > li > :is(button, a)[aria-expanded=true]::after {
  /* rotate chevron when subnav expanded */
  transition: transform 0.1s ease-in;
  transform: rotate(90deg);
}

.docs .sidebar-nav > :is(li.active, li:hover) > :is(button, a) {
  background-color: rgba(215, 38, 38, 0.07);
}

.docs .sidebar-nav > li > div {
  /* slide animation by transitioning grid-template-rows */
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease-out, visibility 0.4s;
}
.docs .sidebar-nav > li > div.open {
  transition: grid-template-rows 0.3s ease-in, visibility 0.4s;
  grid-template-rows: 1fr;
  visibility: visible;
}
.docs .sidebar-nav > li > div > * {
  min-height: 0;
  align-self: flex-end;
}

.docs .sidebar-nav > li > div.open ul {
  padding: 8px 0 0 16px;
}

.docs .sidebar-nav > li ul > :is(li.active, li:hover) a {
  color: #D92626;
}

.docs .sidebar-nav > li > ul li {
  margin: 0;
  padding: 0;
}

.docs .sidebar-nav > li ul > li a {
  color: rgba(0, 0, 0, 1);
  font-family: "Roboto";
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0px;
  text-align: left;
  padding: 8px 0;
}

.docs .sidebar-nav button:focus {
  box-shadow: none;
}

.docs .sidebar-nav > li form.search-form input,
header .col form.search-form input {
  background-color: #f8f8f8;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M15.853 16.56c-1.683 1.517-3.911 2.44-6.353 2.44-5.243 0-9.5-4.257-9.5-9.5s4.257-9.5 9.5-9.5 9.5 4.257 9.5 9.5c0 2.442-.923 4.67-2.44 6.353l7.44 7.44-.707.707-7.44-7.44zm-6.353-15.56c4.691 0 8.5 3.809 8.5 8.5s-3.809 8.5-8.5 8.5-8.5-3.809-8.5-8.5 3.809-8.5 8.5-8.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  background-size: 16px auto;
  padding-left: 3rem;
  border-radius: 6px;
  font-size: 0.875rem;
}

.docs .ui.fluid.selection.dropdown.nav-menu {
  display: none;
}
.docs .ui.selection.dropdown.chapters {
  display: none;
}

@media all and (max-width: 991px) {
  .docs .sidebar-nav {
    display: none;
  }

  .docs .ui.fluid.selection.dropdown.nav-menu {
    display: block;
    margin-bottom: 1rem;
  }
  .docs .ui.selection.dropdown.chapters {
    display: block;
  }
  .ui.selection.dropdown .menu{
    min-height: 100% !important;
    max-height: 400px !important;
  }

  .docs h2.ui.header:nth-child(2),
  .docs h1.ui.header.category {
    font-size: 2rem;
  }

  .docs h1.ui.header.category {
    display: none;
  }

  .docs h2.ui.header.hide-mobile {
    display: none;
  }
}

.ui.selection.dropdown.nav-menu>.dropdown.icon {
  top: 1em;
}

.docs .ui.fluid.selection.dropdown.nav-menu li {
  list-style: none;
  display: block;
}

.docs .ui.fluid.selection.dropdown.nav-menu li.search {
  display: none;
}

.docs h2.ui.header:nth-child(2),
.docs h1.ui.header.category {
  font-size: 3.5rem;
  font-family: "Circular Std";
  font-weight: 700;
  letter-spacing: -1.18px;
  line-height: 1;
  margin: 0 0 17px;
}

.docs h2.ui.header:not(:nth-child(2)) {
  font-family: "Circular Std";
  font-size: 1.733333rem;
  color: black;
  letter-spacing: -0.47px;
  line-height: 1;
  margin: 40px 0 30px !important;
  padding: 0 !important;
}

.docs a:hover {
  color: black;
}

.docs-content h1,
.docs-content h2,
.docs-content h3,
.docs-content h4,
.docs-content h5 {
  font-family: "Circular Std";
  font-weight: 700;
}

.docs-content h4,
.docs-content h5 {
  font-size: 1.125rem;
  line-height: calc(45 / 18);
  margin: 2rem 0 9px;
}

.docs-content,
.docs-content p {
  font-size: 0.875rem;
  line-height: 2;
}

.docs-content img {
  max-width: 100%;
  height: auto;
}

.docs-content table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  vertical-align: top;
  border-color: #F1F1F1;
}

@media all and (max-width: 767px) {
  .docs-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

.docs-content table thead tr {
  border-top-width: 1px;
}

.docs-content table thead tr,
.docs-content table tbody tr {
  border-left-width: 1px;
}

.docs-content table thead tr.row-group td,
.docs-content table tbody tr.row-group td {
  background: #f9f9f9 !important;
}

.docs-content table.comparison-table tbody tr:last-child td:nth-child(2) {
  border-bottom: 2px solid #00ca6e !important;
}

.docs-content table>thead:not(caption)>*>*,
.docs-content table>tbody:not(caption)>*>* {
  padding: 0.5rem 0.5rem;
  background-color: #fefefe;
  border-bottom-width: 1px;
  border-right-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
  text-align: center;
}

.docs-content table thead th {
  font-size: .8rem;
  color: #000;
  font-weight: 700;
  line-height: 1.1;
  padding: 10px;
}

.docs-content table thead tr th:first-child {
  font-size: 1rem;
  color: #000;
  font-weight: 700;
  line-height: calc(19 / 16);
  padding: 0 20px;
  text-align: left;
}

.docs-content table.comparison-table tr td:nth-child(2) {
  background-color: #fff;
  filter: drop-shadow(0px 20px 30px rgb(0,0,0,5%));
  border-right: 2px solid #00ca6e !important;
  border-left: 2px solid #00ca6e;
}

.docs-content table.comparison-table thead tr th:nth-child(2) {
  background-color: #00ca6e;
  border: 2px solid #00ca6e;
}

.docs-content table thead tr th:nth-child(2) a {
  color: #fff;
  text-decoration: none;
}

.docs-content table thead tr th:nth-child(2) a:hover {
  text-decoration: underline;
}

.docs-content table>tbody:not(caption)>*>*[scope='row'],
.docs-content table>tbody:not(caption)>*>*[scope='rowgroup'] {
  padding-left: 20px;
  text-align: left;
}
.docs-content table>tbody:not(caption)>*>*[scope='rowgroup'] {
  background: #f9f9f9;
  font-size: .8rem;
}
.docs-content table thead >*>* {
  border-bottom-width: 1px;
  padding: 0.5rem 0.5rem;
}

.docs .tiles {
  margin-top: 50px;
}

.docs .tile-col {
  display: flex;
}

.docs .tile {
  background: #F9F9F9;
  border: 1px solid #EFEFEF;
  border-radius: 15px;
  padding: 32px 34px;
  margin-bottom: 1.75rem;
  width: 100%;
}

.docs .tile img {
  box-shadow: 0 6px 18px 0 rgba(0,0,0,0.10);
  border-radius: 15px;
}

.docs .tile h3 {
  font-size: 1.125rem;
  font-weight: 700;
  font-family: "Circular Std";
  letter-spacing: -0.33px;
  line-height: calc(45/18);
  margin: 24px 0 9px;
}

.docs .tile p {
  font-size: 0.875rem;
  line-height: 2;
  margin: 0 0 37px;
}

.docs .tile ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs .tile li {
  padding-bottom: 0.5rem;
}

.docs .tile li:last-child {
  padding-bottom: 0;
}

.docs .tile a {
  color: #DC2727;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: calc(16/14);
}

.docs .tile hr {
  border-color: #EFEFEF;
  margin: 26px 0 20px;
}

.docs hr {
  background-color: #EFEFEF;
  opacity: 1;
}

.ui.selection.dropdown.chapters,
.ui.selection.dropdown.nav-menu {
  border-color: black;
  border-width: 2px;
  border-radius: 15px;
  padding: 1rem 2.1em 1rem 1rem;
}

header .ui.selection.dropdown.chapters {
  padding: 0.5rem 2.1rem 0.5rem 1rem;
}

.ui.selection.dropdown.chapters {
  margin: 40px 0;
}

.ui.selection.dropdown.chapters:focus,
.ui.selection.active.dropdown.chapters:hover .menu,
.ui.selection.dropdown.chapters .menu,
.ui.selection.dropdown.nav-menu:focus,
.ui.selection.active.dropdown.nav-menu:hover .menu,
.ui.selection.dropdown.nav-menu .menu {
  border-color: #D72626;
  border-width: 2px;
}

.ui.selection.dropdown.chapters .menu>.item,
.ui.selection.dropdown.nav-menu .menu>.item {
  padding: 0 !important;
}

.ui.selection.dropdown.chapters .menu>.item a,
.ui.selection.dropdown.nav-menu .menu>.item a {
  padding: .78571429rem 1.14285714rem;
}

.selection.dropdown.chapters .item a,
.selection.dropdown.chapters .text a,
.selection.dropdown.nav-menu .item a,
.selection.dropdown.nav-menu .text a {
  display: block;
  font-size: 0.875rem;
  line-height: 2;
  color: black;
  text-decoration: none;
}

.selection.dropdown.chapters .item a strong,
.selection.dropdown.chapters .text a strong,
.selection.dropdown.nav-menu .item a strong,
.selection.dropdown.nav-menu .text a strong {
  color: #D72626;
}

.ui.selection.dropdown.chapters>.dropdown.icon {
  top: 1.25rem;
}

header .ui.selection.dropdown.chapters>.dropdown.icon,
header .ui.selection.dropdown.nav-menu>.dropdown.icon {
  top: 0.75rem;
}

.docs .navigation {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  padding: 50px 0;
  border-top: 1px solid #EFEFEF;
}

.docs .navigation a.btn {
  margin: 0 0.5rem;
  padding: 1rem 3rem;
  min-width: 145px;
}

.docs.listing-page hr {
  margin: 50px 0 60px;
}

.docs.listing-page .docs-col ul {
  margin: 0;
  padding: 0;
  font-weight: 700;
}

.docs.listing-page .docs-col ul li {
  line-height: 2.5;
}

.docs.listing-page .navigation,
.docs.faq .navigation,
.docs.home .navigation {
  display: none;
}

.docs .breadcrumbs {
  display: none;
  font-size: 0.875rem;
}

.docs .breadcrumbs a {
  font-weight: 700;
  display: inline-block;
  margin-right: 0.5rem;
}

.docs .breadcrumbs span {
  display: inline-block;
  margin-left: 0.5rem;
}

.docs .breadcrumbs hr {
  margin: 30px 0;
}

.docs.faq .faq-header {
  margin: 67px 0 0;
  padding: 16.5px 0 18px;
  border-width: 1px 0;
  border-style: solid;
  border-color: #EFEFEF;
  display: grid;
  grid-template-columns: 0.5fr 0.25fr 1fr;
  grid-gap: 1rem 3rem;
}

@media all and (max-width: 767px) {
  .docs.faq .faq-header {
    display: none;
  }
}

.docs.faq .faq-header span {
  flex: 0 0 50%;
  max-width: 50%;
  font-size: 1rem;
  color: #DC2727;
  font-weight: 700;
  font-family: "Circular Std";
  letter-spacing: 0.89px;
  line-height: calc(20/16);
  text-transform: uppercase;
}

.docs.faq .faq-header span:last-child {
  grid-column: 3;
}

.docs.faq .docs-content {
  display: grid;
  grid-template-columns: 0.5fr 0.25fr 1fr;
  grid-gap: 1rem 3rem;
}

@media all and (max-width: 767px) {
  .docs.faq .docs-content {
    display: block;
  }
} 

.docs.faq .docs-content h4 {
  grid-row: span(var(--span));
  line-height: 1.5;
  padding-top: 1.5rem !important;
  margin-top: 0 !important;
}

.docs.faq .docs-content h4 + * {
  padding-top: 1.5rem;
}

.docs.faq .docs-content h4:not(:first-child) + * {
  position: relative;
}

.docs.faq .docs-content h4:not(:first-child) + *::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 1px;
  background: #EFEFEF;
}

@media all and (max-width: 767px) {
  .docs.faq .docs-content h4:not(:first-child) + *::after {
    display: none;
  }
}

.docs.faq .docs-content > *:not(h4) {
  grid-column: 3;
}

.docs .search-col {
  display: none;
}

.docs .search-col h1.ui.header {
  margin-bottom: 2rem;
  font-weight: 400;
  font-size: 4.06rem;
  font-family: "Circular Std";
  letter-spacing: -1.18px;
  line-height: 1;
  margin: 0 0 17px;
}

@media all and (max-width: 767px) {
  .docs .search-col h1.ui.header {
    font-size: 2rem;
  }
}

.docs .search-col h1.ui.header strong {
  font-weight: 700;
}

.docs .search-col .summary {
  margin-bottom: 3rem;
}

.docs .search-col .result {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

.docs .search-col .result .title {
  color: #DC2727;
  font-size: 1rem;
  font-weight: 700;
  display: block;
  margin: 0 0 1rem;
}

.docs .search-col .result p {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.docs .search-col .result ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs .search-col .result ul li {
  padding-right: 0.5rem;
}

.docs .search-col .result ul li::after {
  content: "/";
  color: black;
  padding-left: 0.5rem;
}

.docs .search-col .result ul li:last-child::after {
  content: "";
}

.docs .search-col .result ul li a {
  color: #DC2727;
  font-weight: 700;
}

.docs code {
  display: inline-block;
}