.explainer { color: #efefef; background-color: #efefef; padding-top: 10px; padding-bottom: 10px; }
.explainer h1, .explainer .blog-archive-year { text-align: center; color: #15253e; font-weight: 700; letter-spacing: -1px; font-size: clamp(30px, 40px, 60px); grid-column: 1 / 2; grid-row: 3 / 5; }
.explainer h1::after, .explainer .blog-archive-year::after { padding-top: 70px; border-bottom: solid; border-color: #fb9401; content: ""; width: 220px; position: absolute; margin-left: -230px; }

* { font-family: "Overpass", sans-serif; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; overflow: -moz-scrollbars-none; -ms-overflow-style: none; }

body { background: #15253e; width: 100%; height: 100%; overflow-y: visible; padding-top: 0; }

h1, .blog-archive-year { padding-top: 1em; font-size: 68px; line-height: 1.1; letter-spacing: -1px; font-weight: medium; color: #15253e; }

h1 + *, .blog-archive-year + * { padding-top: 1.5em; }

h2 { font-size: 36px; line-height: 1.2; font-weight: bold; }

h2 + * { padding-top: 0.5em; }

h3 { font-size: 24px; line-height: 1.4; }

h3 + * { padding-top: 0.5em; }

h4 { font-size: 18px; line-height: 1.2; letter-spacing: -1px; }

h4 + * { padding-top: 0.25em; }

h5 { font-size: 14px; letter-spacing: -1px; line-height: 1.1; font-weight: bold; }

h5 + * { padding-top: 0.165em; }

a { text-decoration: underline; color: #46a493; }

p { color: #000; letter-spacing: 0; line-height: 1.4; font-weight: lighter; font-size: 18px; }

ul, ol { color: #000; font-weight: lighter; padding-left: 2.5%; }

/** Nested numbered list with correct indentation.  Tested on Firefox 32, Chromium 37, IE 9 and Android Browser. Doesn't work on IE 7 and previous. Source: https://gist.github.com/jirutka/32049196ab75547b7f47 */
ol { list-style-type: none; counter-reset: item; margin: 0; }

ol > li { display: table; counter-increment: item; margin-bottom: 0.6em; font-size: 20px; line-height: 1.1; }
ol > li p { font-size: 20px; }

ol > li:before { content: counters(item,".") ". "; display: table-cell; padding-right: 0.7em; }

li ol > li { margin: 0; white-space: nowrap; }

li ol > li:before { content: counters(item,".") " "; }

/* end ordered list with correct indendation */
hr { margin-top: 15px; margin-bottom: 15px; padding-top: 0px; border-width: 4px; border-color: orange; border-style: solid; }

blockquote { font-style: italic; padding-left: 2%; }

.videos h3, .install h3, .support h3, .blog-newsletter h3, .categories h3 { width: 175px; margin: 0 auto; padding-top: 50px; font-size: 30px; color: #15253e; text-decoration: none; }
.videos h3::after, .install h3::after, .support h3::after, .blog-newsletter h3::after, .categories h3::after { content: ""; width: 100px; position: absolute; padding-top: 35px; border-bottom: solid; border-color: #fb9401; margin-left: -125px; }

.btn { text-align: center; padding-top: 8px; padding-bottom: 8px; height: 20px; font-size: 16px; width: 100px; }

.btn-install { text-transform: uppercase; color: #fff; background-color: #46a493; font-weight: 400; width: 210px; padding-top: 15px; padding-bottom: 12px; padding-left: 30px; }
.btn-install img { position: absolute; height: 25px; width: 25px; margin-left: -40px; margin-top: -5px; }

.btn-subscribe { text-transform: uppercase; color: #fff; background-color: #46a493; padding: 10px 0 8px 0; font-weight: 700; width: clamp(250px, 380px, 85vw); border: 2px solid #46a493; }

.btn-event { display: block; margin: 0 auto; text-align: center; text-transform: uppercase; color: #fff; background-color: #46a493; padding: 10px 25px 8px 25px; font-weight: 700; width: clamp(264px, 280px, 300px); }

.invisible { visibility: hidden; }

.visible { visibility: visible; }

.hidden { display: none; }

.show { display: block; }

.show-grid { display: grid; }

.hover:hover { padding-bottom: 10px; border-bottom: 3px solid #fb9401; }

header { position: fixed; top: 0; background-color: #15253e; color: #fff; height: 90px; width: 100%; z-index: 5; }
header h1, header .blog-archive-year { color: #fff; }
header .show-after::after { content: ""; white-space: pre-line; width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 25px solid #fff; position: absolute; left: -5px; top: 14px; }
header .hide-after::after { display: none; }
header #navbar, header #navbar-small { position: fixed; height: 90px; width: 100vw; display: flex; top: 0; margin-top: 0; overflow-y: hidden; }
header #navbar .logo, header #navbar-small .logo { padding-top: 25px; padding-bottom: 5px; margin-left: 10%; width: 189px; overflow-x: visible; }
header #navbar .logo img, header #navbar-small .logo img { width: 189px; height: unset; }
@media screen and (min-width: 993px) { header #navbar .logo #submenu-dots .grid-mob-menu, header #navbar-small .logo #submenu-dots .grid-mob-menu { display: none; }
  header #navbar .logo .main-menu-mobile, header #navbar-small .logo .main-menu-mobile { display: none; } }
header #navbar ul.main-menu, header #navbar-small ul.main-menu { text-transform: uppercase; width: 50%; font-size: 14px; list-style: none; position: absolute; right: 15%; display: inline-flex; justify-content: space-between; margin-top: 0; padding-top: 0; }
header #navbar li.nav-item, header #navbar-small li.nav-item { height: 14px; white-space: nowrap; padding-top: 60px; }
header #navbar li.nav-item a, header #navbar-small li.nav-item a { text-decoration: none; position: relative; font-weight: 700; color: #fff; }
header #navbar li.nav-item.wide-text, header #navbar-small li.nav-item.wide-text { padding-right: 50px; overflow-x: hidden; }
@media screen and (min-width: 993px) { header #navbar #submenu-dots .grid-mob-menu, header #navbar-small #submenu-dots .grid-mob-menu { display: none; }
  header #navbar .main-menu-mobile, header #navbar-small .main-menu-mobile { display: none; } }
header #navbar #dropdown-dots, header #navbar-small #dropdown-dots { overflow: hidden; position: absolute; top: 45px; right: 100px; padding-top: 0; padding-bottom: 1px; font-size: 10px; display: grid; grid-template-columns: repeat(3, 5px); grid-template-rows: repeat(3, 5px); grid-gap: 5px; }
header #navbar #dropdown-dots .dropwdown-show, header #navbar-small #dropdown-dots .dropwdown-show { display: none; }
header #navbar #dropdown-dots .dropwdown-show:hover, header #navbar-small #dropdown-dots .dropwdown-show:hover { display: block; }
header #navbar #dropdown-dots .dropdown-dot-top, header #navbar-small #dropdown-dots .dropdown-dot-top { width: 5px; padding: 0; grid-column: 2 / 3; grid-row: 1 / 2; }
header #navbar #dropdown-dots .dropdown-dot-middle, header #navbar-small #dropdown-dots .dropdown-dot-middle { padding: 0; width: 5px; }
header #navbar #dropdown-dots .dot-1, header #navbar-small #dropdown-dots .dot-1 { grid-column: 1 / 1; grid-row: 2 / 3; }
header #navbar #dropdown-dots .dot-2, header #navbar-small #dropdown-dots .dot-2 { grid-column: 2 / 3; grid-row: 2 / 3; }
header #navbar #dropdown-dots .dot-3, header #navbar-small #dropdown-dots .dot-3 { grid-column: 3 / 4; grid-row: 2 / 3; }
header #navbar #dropdown-dots .dropdown-dot-bottom, header #navbar-small #dropdown-dots .dropdown-dot-bottom { width: 5px; padding: 1px 0 0 0; grid-column: 2 / 3; grid-row: 3 / 4; }
header #navbar #dropdown-dots.dropdown-dots-small, header #navbar-small #dropdown-dots.dropdown-dots-small { top: 10px; }
header .menu-blog-link a { position: absolute; top: 15px; right: 85px; width: 150px; font-size: 14px; font-weight: 700; text-transform: uppercase; color: #9c9c9c; }
header #submenu-about { z-index: 1; position: relative; margin-top: 90px; margin-left: 5%; width: 90%; background-color: #fff; border-radius: 25px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px; }
header #submenu-about.submenu-about-small { margin-top: 0; }
header #submenu-about ul { width: 95%; list-style: none; display: inline-flex; background-color: #fff; border-radius: 25px; padding-bottom: 10px; }
header #submenu-about ul li { margin: 15px; justify-content: space-around; }
header a.submenu-title { margin: 20px; text-transform: uppercase; color: #46a493; font-weight: 700; font-size: 12px; text-decoration: none; padding-bottom: 5px; border-bottom: #fb9401 0.25em solid; }
header a.submenu-title:hover { border-bottom: none; }
header #submenu-about ul li ul { display: block; }
header #submenu-about ul li ul li { padding-top: 0; padding-left: 5px; height: 20px; width: 100px; }
header #submenu-about ul li ul li a { color: #15253e; text-decoration: underline; font-size: 12px; padding-top: 0; }
header #submenu-about li.submenu-list { padding-top: 0; }
header #submenu-about li.submenu-list.wide { white-space: nowrap; }
header #submenu-dots { position: fixed; top: 90px; right: 5%; list-style: none; height: 550px; width: 210px; background-color: #46a493; padding: 20px 25px 50px 10px; z-index: 5; overflow-y: scroll; }
header #submenu-dots.submenu-dots-small { top: 45px; }
header #submenu-dots li { height: 15%; padding: 10px; border-radius: 5px; text-align: right; }
header li.nav-item #submenu-dots li a { height: 30px; }
header #submenu-dots li a::after { content: ""; width: 50px; height: 5px; position: absolute; right: 33px; padding-top: 20px; border-bottom: solid; border-color: #fb9401; }
header #submenu-dots a { color: #fff; font-weight: 900; text-transform: uppercase; text-decoration: none; }
header #submenu-dots a:hover { text-decoration: underline; }
header #submenu-dots p { white-space: normal; font-style: italic; font-size: 12px; text-align: right; text-transform: none; line-height: 14px; padding-top: 15px; }
header li.nav-item.dropdown:hover #submenu-dots li:hover { background-color: rgba(255, 255, 255, 0.5); }

#header-small { height: 45px; position: relative; }

header #navbar-small { height: 45px; position: relative; }
header #navbar-small .logo-small { margin-left: 10%; }
header #navbar-small .logo-small img { padding-top: 10px; width: 100px; }
header #navbar-small ul.main-menu .nav-item { padding-top: 15px; }

#main { z-index: -1; background-color: #15253e; padding-top: 0; }

.general { background-color: #fff; margin-top: 90px; padding: 0 5% 5% 5%; }

.banner { overflow: hidden; margin-top: 90px; color: #fff; height: auto; width: unset; display: grid; grid-template-columns: 50% 30%; grid-template-rows: repeat(6, 0.15fr); grid-column-gap: 25px; justify-content: center; padding-bottom: 25px; }
.banner h1, .banner .blog-archive-year { color: #fff; font-weight: 700; letter-spacing: -1px; font-size: clamp(50px, 70px, 80px); grid-column: 1 / 2; grid-row: 3 / 5; }
.banner h1::after, .banner .blog-archive-year::after { content: ""; color: #15253e; width: 100px; height: 10px; padding-top: 80px; border-botwtom: solid; border-color: #fb9401; position: absolute; left: 10%; }
.banner p { padding-top: 175px; color: #fff; font-size: 22px; font-weight: 500; grid-column: 1 / 2; grid-row: 5 / 6; }
.banner .banner-image { grid-column: 2 / 2; grid-row: 1 / 7; overflow-y: hidden; }
.banner .banner-image img { width: 100%; height: 100%; object-fit: contain; }

.news-wrapper { height: auto; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #fff 50%); display: flex; align-items: center; }

.news { background-color: lightgray; width: 70%; margin-left: 30%; padding: 20px; width: 40%; border-radius: 5px; box-shadow: 1px 1px 1px #9c9c9c; height: auto; }
.news h2 { color: #15253e; }
.news .btn-event { margin: 0; }

.videos { background-color: #fff; height: 400px; height: auto; padding-top: 100px; padding-bottom: 50px; margin-top: -1px; }
.videos h3 { padding-bottom: 10px; border-bottom: 4px solid #fb9401; width: 151px; }
.videos h3::after { display: none; }

.container-video { margin-top: 50px; }

.owl-stage { padding: 0 !important; }

.owl-carousel .owl-stage-outer { overflow-x: hidden; }

.owl-prev span, .owl-next span { position: absolute; color: #46a493; font-size: 60px; font-weight: 900; margin-top: -160px; }

button.owl-prev { position: absolute; left: 0; width: 50px; z-index: 3; }

button.owl-next { position: absolute; right: 4%; width: 50px; z-index: 3; }

.owl-carousel .item-video { height: 280px; width: 500px; }

.owl-item iframe { height: 200px; width: 500px; }

.owl-item.active { position: absolute; margin-left: -250px; border: solid 1px red; }

.owl-theme .owl-dots, .owl-theme .owl-nav { display: inline-flex; width: 48%; }

.owl-theme .owl-dots { width: 100%; justify-content: center; }

.owl-dot { max-width: 25px; }

.owl-theme .owl-dots .owl-dot span { border: 1px solid #9c9c9c; background: #fff; }

.owl-theme .owl-dots .owl-dot.active span { border: 1px solid #46a493; background: #46a493; }

.install { color: #fff; width: 100%; height: auto; display: grid; grid-template-columns: 22.5% 22.5% 25px 22.5% 22.5%; grid-template-rows: 90px 90px 33% 33% 15%; grid-row-gap: 5px; grid-column-gap: 10px; justify-content: center; object-fit: contain; }
.install h3 { grid-column: 1 / 2; grid-row: 1 / 2; margin: 0; color: #fff; width: 80px; margin-left: 80px; padding-bottom: 30px; border-bottom: solid 4px #fb9401; }
.install h3::after { display: none; }
.install h6 { font-size: 18px; font-weight: 700; height: 18px; padding-bottom: 50px; }
.install p { color: #fff; }
.install .release-img-1 { justify-self: center; min-width: 225px; max-width: 250px; padding-top: 20px; grid-column: 1 / 2; grid-row: 2 / 6; }
.install .install-text-1 { grid-column: 2 / 3; grid-row: 3 / 4; }
.install .btn-install-left { grid-column: 2 / 3; grid-row: 4 / 5; place-self: center; justify-self: start; }
.install .divider-horizontal { grid-column: 3 / 4; grid-row: 2 / 4; border-right: 3px solid #fb9401; }
.install .release-img-2 { transform: scale(0.8); min-width: 350px; max-width: 400px; grid-column: 4 / 5; grid-row: 2 / 4; }
.install .install-text-2 { grid-column: 5 / 6; grid-row: 3 / 4; }
.install .btn-install-right { align-items: end; grid-column: 5 / 6; grid-row: 4 / 5; place-self: center; justify-self: start; }

.support { background-color: #fff; width: 100%; height: auto; overflow: hidden; }
.support h3 { width: 105px; padding-bottom: 10px; border-bottom: 4px solid #fb9401; }
.support h3::after { display: none; }
.support p { padding-top: 25px; width: 550px; margin: 0 auto; font-size: 22px; height: 75px; text-align: center; }

.support-carousel-mob { display: none; }

.support-grid { display: grid; grid-template-columns: 175px 60px 175px 60px 175px 60px 175px; grid-template-rows: 175px 50px 150px; justify-content: center; background-color: #fff; }
.support-grid p { padding-top: unset; width: unset; height: unset; text-align: center; font-size: 18px; }
.support-grid strong { text-align: center; }
.support-grid img { margin-top: 30px; }
.support-grid .img-1 { justify-self: center; height: 75px; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; }
.support-grid .img-caption-1 { font-size: 22px; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; }
.support-grid .blurb-1 { grid-column-start: 1; grid-row-start: 3; }
.support-grid .img-2 { justify-self: center; height: 75px; grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; }
.support-grid .img-caption-2 { font-size: 22px; grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; }
.support-grid .blurb-2 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; }
.support-grid .img-3 { justify-self: center; height: 75px; grid-column-start: 5; grid-column-end: 6; grid-row-start: 1; }
.support-grid .img-caption-3 { font-size: 22px; grid-column-start: 5; grid-column-end: 6; grid-row-start: 2; }
.support-grid .blurb-3 { grid-column-start: 5; grid-column-end: 6; grid-row-start: 3; }
.support-grid .img-4 { justify-self: center; height: 75px; grid-column-start: 7; grid-row-start: 1; }
.support-grid .img-caption-4 { font-size: 22px; grid-column-start: 7; grid-row-start: 2; }
.support-grid .blurb-4 { grid-column-start: 7; grid-column-end: 8; grid-row-start: 3; }

.blog-newsletter { height: auto; background-color: #efefef; padding-bottom: 25px; }

.blog-grid { height: 100%; display: grid; grid-template-columns: 600px 270px; grid-template-rows: 50px 225px 250px; grid-gap: 30px; justify-content: center; }
.blog-grid h4 { height: 50px; width: 500px; margin-top: 35px; font-weight: 700; font-size: 30px; letter-spacing: -1px; }
.blog-grid .block-post-title { grid-column: 1 / 2; grid-row: 1 / 2; }
.blog-grid .highlighted-post { overflow-y: visible; grid-column: 1 / 2; grid-row: 2 / 4; padding-top: 0; }
.blog-grid .highlighted-post-title, .blog-grid .highlighted-post-subtitle, .blog-grid .highlighted-post-author-date { height: 30px; padding-top: 0; }
.blog-grid .highlighted-post-title h1, .blog-grid .highlighted-post-title .blog-archive-year, .blog-grid .recent-posts h1, .blog-grid .recent-posts .blog-archive-year { font-size: 18px; font-weight: 700; line-height: 1.2; }
.blog-grid .highlighted-post-subtitle h2 { font-size: 16px; font-weight: 400; padding-top: 0.5em; }
.blog-grid .highlighted-post-author-date h3 { width: inherit; padding-top: 1em; padding-bottom: 1em; font-size: 12px; font-style: italic; color: #9c9c9c; margin-left: 0 auto; }
.blog-grid .highlighted-post-author-date h3::after { display: none; }
.blog-grid .highlighted-post-content { height: auto; padding-top: 15px; }
.blog-grid .highlighted-post-content p { line-height: 25px; }
.blog-grid .recent-posts { height: unset; grid-column: 2 / 3; grid-row: 2 / 3; }
.blog-grid .recent-posts a { color: #000; font-size: 13px; text-decoration: none; }
.blog-grid .recent-posts a:hover { text-decoration: underline; }
.blog-grid .recent-post { padding-top: 15px; padding-left: 15px; height: auto; }
.blog-grid .recent-post-title h2 { font-size: 12px; font-weight: 700; line-height: 20px; }
.blog-grid .recent-post-author-date h3 { width: inherit; padding-top: 0; font-size: 12px; font-style: italic; color: #9c9c9c; margin-top: -10px; margin-left: 0 auto; }
.blog-grid .recent-post-author-date h3::after { display: none; }
.blog-grid a.read-more { color: #46a493; text-decoration: underline; text-transform: uppercase; }
.blog-grid a.blog-archives { color: #46a493; text-decoration: underline; text-transform: capitalize; padding-left: 15px; }
.blog-grid .newsletter-signup { white-space: pre-line; grid-column: 2 / 3; grid-row: 3 / 4; align-self: start; margin-top: -25px; }
.blog-grid .newsletter-signup h2 { font-size: 12px; font-weight: 700; }
.blog-grid .newsletter-signup input { margin-bottom: 10px; width: clamp(260px, 275px, 300px); height: unset; padding: 8px 0 8px 0; }
.blog-grid .newsletter-signup input::placeholder { color: #9c9c9c; font-style: italic; font-size: 12px; text-align: center; }
.blog-grid .newsletter-signup .btn-subscribe { height: unset; }

footer a { text-decoration: none; }

.footer-main { padding-top: 25px; height: auto; background-color: #15253e; }
.footer-main .logo { display: block; margin: 0 auto; width: 125px; padding-bottom: 15px; border-bottom: #fb9401 4px solid; }
.footer-main .footer-menu { width: 50%; margin: 0 auto; padding-top: 25px; padding-bottom: 25px; }
.footer-main .footer-menu ul { display: flex; list-style: none; justify-content: space-around; }
.footer-main .footer-menu li { max-width: 100px; text-align: center; padding-top: 0; }
.footer-main .footer-menu a { font-size: 14px; font-weight: 700; text-transform: uppercase; color: #fff; }
.footer-main .footer-menu a:hover { text-decoration: underline; }

.footer-sub { background-color: #efefef; height: auto; }
.footer-sub .footer-sub-menu { width: 80%; margin-left: 10%; padding-top: 10px; }
.footer-sub .footer-sub-menu ul { display: flex; list-style: none; justify-content: space-around; }
.footer-sub .footer-sub-menu li { max-width: 180px; text-align: center; padding-top: 0; }
.footer-sub .footer-sub-menu a { font-size: 14px; font-weight: 700; text-transform: lowercase; color: #15253e; }
.footer-sub .footer-sub-menu a:hover { text-decoration: underline; }

.footer-submenu-mob { display: none; }

.legal p { display: block; margin: 0 auto; text-align: center; width: 700px; padding-top: 15px; padding-bottom: 15px; font-size: 12px; font-style: italic; color: #9c9c9c; }

h1, .blog-archive-year { line-height: 81px; font-size: 68px; letter-spacing: -1px; }

h2 { line-height: 48px; font-size: 36px; font-weight: 700; letter-spacing: -1px; }

h3 { line-height: 32px; font-size: 24px; letter-spacing: -1px; }

.blog-wrapper { background-color: #fff; }
.blog-wrapper h1, .blog-wrapper .blog-archive-year, .blog-wrapper h2 { color: #15253e; }
.blog-wrapper h3 { width: unset; color: #000; padding-bottom: 5px; }
.blog-wrapper h3::after { display: none; }
.blog-wrapper p { color: #404040; font-size: 18px; line-height: 21px; font-weight: 300; padding: 15px 0 15px 0; }

.bg-dark { background-color: #15253e; height: fit-content; background-color: #15253e; grid-column: 1 / 5; grid-row: 1 / 2; }
.bg-dark h1, .bg-dark .blog-archive-year, .bg-dark h2, .bg-dark h3, .bg-dark p { color: #fff; }
.bg-dark h1, .bg-dark .blog-archive-year { z-index: 2; width: 100%; }
.bg-dark h2 { font-family: "Montserrat", sans-serif; font-size: 24px; letter-spacing: -1px; line-height: 24px; padding-top: 75px; }

.blog-grid-main { margin-top: -1px; overflow: hidden; padding-bottom: 75px; display: grid; grid-template-columns: auto 50% 25% auto; grid-template-rows: 1fr auto; grid-column-gap: 30px; }

.bg-photo, .bg-dark, .bg-light, .bg-lighter { height: fit-content; display: grid; grid-template-columns: auto 76% auto; grid-column-gap: 0; }

.bg-photo h1, .bg-photo .blog-archive-year, .bg-dark h1, .bg-dark .blog-archive-year, .bg-light h1, .bg-light .blog-archive-year, .bg-lighter h1, .bg-lighter .blog-archive-year { grid-column: 2 / 3; }

.bg-photo h2, .bg-dark h2, .bg-light h2, .bg-lighter h2 { grid-column: 2 / 3; padding-top: 50px; padding-bottom: 30px; }

.bg-photo { padding-top: 5%; background-image: url("/https/ros.org/imgs/rover.png"); background-repeat: no-repeat; background-size: cover; background-position: 10% 50%; grid-column: 1 / 5; grid-row: 1 / 2; }
.bg-photo h1, .bg-photo .blog-archive-year { color: #fff; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.65); z-index: 2; }
.bg-photo h2 { color: #fff; font-family: "Montserrat", sans-serif; font-size: 24px; letter-spacing: -1px; line-height: 24px; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.65); }

.bg-light, .bg-lighter { height: fit-content; padding-top: 5%; grid-column: 1 / 5; grid-row: 1 / 2; }

.bg-light { background-color: #fff; }

.bg-lighter { background-color: #fff; }

.bg-light h1, .bg-light .blog-archive-year, .bg-light h2, .bg-lighter h1, .bg-lighter .blog-archive-year, .bg-lighter h2 { color: #15253e; }
.bg-light h3, .bg-lighter h3 { color: #000; }

.blog-post-main { grid-column: 2 / 3; grid-row: 2 / 5; background-color: #fff; padding-top: 5%; }

.blog-post-main h1 a, .blog-post-main .blog-archive-year a, .blog-post-main h2 a { color: #000; text-decoration: none; }
.blog-post-main h1 a:hover, .blog-post-main .blog-archive-year a:hover, .blog-post-main h2 a:hover { text-decoration: underline; }

.blog-post-main .image-large img { max-width: 100%; }

.blog-post-main--archive { padding-bottom: 35px; }

.blog-post-main--archive__link { font-weight: 700; font-size: 24px; }

.blog-image-row { display: flex; justify-content: space-between; }

.blog-image-row .image-small { max-width: 30%; }

.blog-sidebar { padding: 0 15px 70px 15px; grid-column: 3 / 4; grid-row: 2 / 3; background-color: #fff; }
.blog-sidebar h1, .blog-sidebar .blog-archive-year { height: 50px; max-width: 330px; margin-top: 35px; font-weight: 700; font-size: 30px; letter-spacing: -1px; font-weight: 900; }
.blog-sidebar h1 + *, .blog-sidebar .blog-archive-year + * { padding-top: 0; }
.blog-sidebar h2 { color: #000; font-size: 14px; line-height: 19px; }
.blog-sidebar h2:hover { text-decoration: underline; }
.blog-sidebar h3 { font-size: 12px; line-height: 16px; color: #9c9c9c; padding-top: 0; font-style: italic; }

.blog-sidebar .recent-post { max-width: 90%; margin-left: 15px; margin-top: 25px; }
.blog-sidebar .recent-post h1 a, .blog-sidebar .recent-post .blog-archive-year a, .blog-sidebar .recent-post h2 a, .blog-sidebar .recent-post h3 a { color: #000; text-decoration: none; }
.blog-sidebar .recent-post h1 a:hover, .blog-sidebar .recent-post .blog-archive-year a:hover, .blog-sidebar .recent-post h2 a:hover, .blog-sidebar .recent-post h3 a:hover { text-decoration: underline; }

.blog-sidebar--archive { padding: 25px 0 0 15px; }

.blog-sidebar--archive__link { font-size: 16px; font-weight: 700; }

.newsletter-signup { display: none; margin-top: 25px; margin-bottom: 25px; }
.newsletter-signup h2 { width: 300px; }
.newsletter-signup input { width: 98%; padding: 8px 0 8px 0; margin-top: 10px; }
.newsletter-signup input::placeholder { color: #9c9c9c; font-style: italic; font-size: 12px; text-align: center; }

.blog-sidebar .btn-subscribe { margin-top: 10px; width: 100%; }

.blog-archive-wrapper { width: 100%; min-height: 65vh; background: #fff; }

.blog-archive-body__header { width: 100%; margin: 0 auto; margin-top: -1px; background-color: #15253e; height: fit-content; }
.blog-archive-body__header h1, .blog-archive-body__header .blog-archive-year { padding-left: 10%; color: #fff; }

.blog-archive-body { width: 80%; margin: 0 auto; padding-bottom: 30px; }

.blog-archive-year { font-size: 44px; padding-top: 50px; }

.blog-archive-post { padding-top: 10px; padding-bottom: 10px; }

.blog-archive-post__title { font-size: 24px; color: #15253e; text-decoration: none; line-height: 26px; }
.blog-archive-post__title:hover { text-decoration: underline; }

.blog-archive-post__date-author { font-size: 18px; color: #404040; padding-top: 0; }

@media screen and (max-width: 767px) { .blog-wrapper { padding-top: 0; }
  .bg-lighter, .bg-light, .bg-dark, .bg-photo { background-position: 20% 50%; grid-template-columns: auto 95% auto; }
  .bg-lighter h1, .bg-lighter .blog-archive-year, .bg-light h1, .bg-light .blog-archive-year, .bg-dark h1, .bg-dark .blog-archive-year, .bg-photo h1, .bg-photo .blog-archive-year { font-size: 55px; line-height: 1; }
  .bg-lighter h2, .bg-light h2, .bg-dark h2, .bg-photo h2 { font-size: 22px; line-height: 24px; padding-top: 15px; }
  .blog-grid-main { padding-bottom: 0; }
  .blog-post-main { display: block; width: 85vw; margin: 0 auto; }
  .blog-post-main .image-large { padding: 0; padding-top: 1em; margin-left: -8vw; width: 100vw; }
  .blog-sidebar { grid-column: 1 / 5; grid-row: 5 / 6; }
  .blog-sidebar--archive { padding-left: 0; }
  .recent-post { padding-top: 0; padding-left: 10px; }
  .blog-sidebar .newsletter-signup { width: 90%; margin: 0 auto; padding-bottom: 50px; }
  .blog-sidebar .newsletter-signup input { width: 90%; }
  .blog-sidebar .newsletter-signup .btn-subscribe { width: 91%; } }
@media screen and (max-width: 993px) and (min-width: 450px) { .blog-wrapper { padding-top: 0; }
  .bg-light, .bg-lighter { padding-bottom: 15px; height: auto; }
  .blog-grid-main { padding: 0; grid-template-columns: auto 50% 33% auto; } }
@media screen and (max-width: 449px) { .blog-grid-main { padding: 0; } }
@media screen and (max-width: 380px) { .bg-photo h1, .bg-photo .blog-archive-year, .bg-dark h1, .bg-dark .blog-archive-year, .bg-light h1, .bg-light .blog-archive-year, .bg-lighter h1, .bg-lighter .blog-archive-year { font-size: 50px; line-height: 1; }
  .blog-post-main { grid-column: 1 / 4; width: 90vw; padding-left: 15px; } }
.categories-wrapper { padding-top: 90px; background-color: #fff; height: auto; }

.categories { padding-top: 50px; width: 80%; margin: 0 auto; }
.categories a { text-decoration: none; }
.categories h1, .categories .blog-archive-year { color: #15253e; font-size: 48px; font-weight: 900; line-height: 54px; letter-spacing: -2px; }
.categories h3 { width: auto; margin: 0; padding-top: 35px; }
.categories h3::after { margin-left: 0; margin-top: 10px; left: 10%; width: 210px; z-index: 0; }

.row-buttons { padding-top: 85px; padding-bottom: 75px; max-width: 75vw; display: flex; justify-content: space-around; }

.btn-category { display: flex; justify-content: flex-start; align-content: center; text-transform: uppercase; text-align: center; letter-spacing: 2px; color: #15253e; font-weight: 800; border: 3px solid #15253e; padding: 5px 30px 5px 10px; font-size: 14px; line-height: 14px; text-decoration: none; }
.btn-category.active, .btn-category:hover { background-color: #15253e; color: #fff; transition-property: background-color; transition-duration: 0.2s; }
.btn-category.active:hover { background-color: inherit; color: inherit; }
.btn-category span { padding-left: 15px; padding-top: 5px; }
.btn-category .fas { padding-top: 3px; }

.btn-aerial .fas { transform: rotate(-135deg) !important; margin-top: -5px; }

.manipulator { height: 100%; width: 100%; margin-left: 0px; }

.manipulator::before { content: url("/https/ros.org/imgs/manipulator.svg"); height: 20px; margin-left: 0px; }

.active > .manipulator, .btn-category:hover > .manipulator { filter: brightness(0) invert(1); }

.btn-manipulator span { padding-left: 15px; }

.col-tags { padding-bottom: 25px; }

.tag { text-transform: uppercase; text-align: center; letter-spacing: 2px; color: #15253e; font-weight: 800; border: 2px solid #15253e; padding: 5px 3px 4px 3px; margin-right: 2px; font-size: 12px; line-height: 36px; white-space: pre; text-decoration: none; }
.tag:hover { background-color: #15253e; color: #fff; transition-property: background-color; transition-duration: 0.2s; }

.grid-wrapper { position: relative; padding-top: 25px; }

.col-tags { width: 20%; position: absolute; }

.categories-grid { display: block; margin-left: 0; padding-left: 23%; }

.grid-item { width: 23%; padding-left: 2.5%; }

.card { position: relative; width: 100%; -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.6); -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.6); box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.6); border-radius: 25px; border-top: 1px solid black; border-top-color: rgba(0, 0, 0, 0.1); border-bottom-color: rgba(0, 0, 0, 0.1); height: fit-content; padding-bottom: 10px; margin-bottom: 1.5em; order: 2; }
.card .card-title { padding-top: 10px; padding-left: 5%; font-size: 18px; line-height: 20px; font-weight: 600; letter-spacing: 0.5px; }
.card .card-title a { color: inherit; }
.card .card-title + * { padding-top: 0; }
.card .card-subtitle { padding-left: 5%; font-size: 14px; line-height: 14px; font-weight: 500; font-style: italic; color: #9c9c9c; }
.card .card-subtitle + * { padding-top: 0; }
.card a img, .card img { object-fit: contain; width: 100%; border-radius: 25px 25px 0 0; }
.card .card-description { padding-left: 2.5%; }

.card-description { padding-bottom: 10px; }
.card-description p, .card-description a { font-size: 14px; line-height: 20px; font-weight: 500; }
.card-description a { padding-left: 2.5%; text-decoration: underline; color: #1c9c84; }
.card-description p { color: #9c9c9c; width: 95%; margin: 0 auto; }

.card-facts { width: 100%; display: grid; grid-template-columns: 30% 30% 30%; grid-template-rows: 24px; grid-auto-rows: 24px; grid-row-gap: 10px; grid-column-gap: 3px; justify-content: center; margin-left: 1%; padding-bottom: 10px; }
.card-facts .card-fact { color: #1c9c84; font-size: 12px; line-height: 12px; padding-top: 0; white-space: pre-line; }
.card-facts .card-fact::after { display: none; }

.featured { order: 1; }

.ribbon { width: 95px; height: 0; position: absolute; top: 20px; right: -35px; border-bottom: 17px solid #fb9401; border-left: 17px solid transparent; border-right: 17px solid transparent; transform: rotate(45deg); }
.ribbon h2 + * { padding-top: 10px; }

.ribbon::before { content: ""; position: absolute; top: 20px; left: 104px; border-left: 5px solid transparent; border-right: 5px solid #fb9401; border-top: 5px solid transparent; border-bottom: 5px solid #fb9401; transform: rotate(-90deg); }

.ribbon::after { content: ""; position: absolute; right: 103px; bottom: -30px; border-left: 5px solid transparent; border-right: 5px solid #fb9401; border-top: 5px solid transparent; border-bottom: 5px solid #fb9401; transform: rotate(180deg); }

.ribbon-text { z-index: 1; color: #fff; font-size: 12px; line-height: 12px; text-align: center; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; white-space: nowrap; }

.row-buttons-mob { display: none; }

@media screen and (max-width: 1200px) { .btn-category { width: auto; font-size: 10px; padding-right: 25px; } }
@media screen and (max-width: 993px) { .categories-wrapper { padding-top: 0; }
  .row-buttons { display: none; }
  .row-buttons-mob { display: block; margin-top: 25px; }
  .row-buttons-mob .fa-plane { transform: rotate(-45deg); }
  .row-buttons-mob .manipulator { width: 30px; height: 30px; padding-left: 10px; }
  #submenu-categories { list-style: none; display: grid; position: relative; grid-template-columns: 5% minmax(150px, 700px) 5%; grid-template-rows: 50px; grid-auto-rows: 50px; }
  #submenu-cateogries > * { display: grid; }
  .menu-collapsed { grid-column: 1 / 4; grid-row: 1 / 2; max-height: 50px; background-color: #efefef; color: #9c9c9c; }
  .menu-collapsed .text { grid-column: 1 / 3; margin-top: 15px; padding-left: 10px; width: 90%; }
  .menu-collapsed #plus, .menu-collapsed #minus { height: 20px; width: 2.5%; margin-left: auto; margin-top: -20px; padding-right: 10px; color: #000; }
  .top-item-text-color { color: #15253e; }
  #submenu-categories .menu-expanded { transition: 1s ease-out; grid-column: 1 / 4; z-index: 2; grid-row-gap: 0px; background-color: #efefef; }
  #submenu-categories .menu-expanded .submenu-category { display: grid; color: #15253e; background-color: #efefef; padding-top: 15px; padding-bottom: 15px; margin-top: -1px; grid-template-columns: minmax(25px, 75px) minmax(100px, auto) minmax(25px, 50px); }
  #submenu-categories .menu-expanded .submenu-category i { padding-left: 15px; grid-column: 1 / 2; width: 50px; }
  #submenu-categories .menu-expanded .submenu-category p { text-transform: uppercase; font-weight: bold; color: #9c9c9c; margin: 0 auto; grid-column: 2 / 3; width: 100%; }
  #submenu-categories .menu-expanded .submenu-category p.selected { color: inherit; }
  #submenu-categories .menu-expanded .submenu-category input { margin-left: auto; grid-column: 3 / 4; width: 50px; }
  #submenu-categories .menu-expanded .submenu-category .fa-plane { transform: rotate(220deg); margin-top: -15px; margin-left: -15px; padding-top: 10px; }
  #submenu-categories .menu-expanded .submenu-category .manipulator { width: 25px; height: 25px; margin-top: -5px; padding-left: 15px; }
  .col-tags { display: none; }
  .checkbox-container { display: inline-block; margin-left: auto; margin-right: 20px; height: 10px; width: 10px; border: 2px solid #000; }
  .checkbox-container input { display: none; }
  .custom-checkmark { display: inline-block; position: absolute; margin-top: 1px; margin-left: 1px; background-color: #fff; height: 8px; width: 8px; }
  .checkbox-container input:checked + .custom-checkmark { background-color: #000; }
  .categories-grid { padding-left: 1%; width: 100%; margin: 0 auto; }
  .grid-item { width: 30%; } }
@media screen and (max-width: 850px) { .categories { padding-bottom: 15%; }
  .menu-collapsed #plus, .menu-collapsed #minus { padding-right: 20px; }
  .grid-wrapper { height: 100%; margin-bottom: 10%; }
  .categories-grid { max-width: 100%; padding-left: 0; }
  .grid-item { width: 100%; padding: 0; }
  .card { order: 2; }
  .featured { grid-row: auto; order: 1; } }
@media screen and (max-width: 450px) { .checkbox-container { margin-right: 12.5px; } }
.page-wrapper { padding-top: 40px; background-color: #fff; }
.page-wrapper h1, .page-wrapper .blog-archive-year, .page-wrapper h2 { color: #15253e; }
.page-wrapper h3 { width: unset; color: #000; padding-bottom: 5px; }
.page-wrapper h3::after { display: none; }
.page-wrapper p { color: #404040; font-size: 16px; line-height: 21px; font-weight: 300; padding: 15px 0 15px 0; }

.description-grid-main { overflow: hidden; padding-top: 5px; padding-bottom: 75px; display: grid; grid-template-columns: auto 50% 25% auto; grid-template-rows: 1fr auto; grid-column-gap: 30px; }

.bg-header-robot { height: 300px; padding-top: 5%; background-image: url("/https/ros.org/imgs/rover.png"); background-repeat: no-repeat; background-size: cover; background-position: 50% 11%; grid-column: 1 / 5; grid-row: 1 / 2; }
.bg-header-robot h1, .bg-header-robot .blog-archive-year { color: #fff; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.65); z-index: 2; padding-top: 5%; padding-left: 10%; width: 700px; }
.bg-header-robot h2 { color: #fff; font-family: "Montserrat", sans-serif; font-size: 24px; letter-spacing: -1px; line-height: 24px; padding-top: 15px; padding-left: 10%; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.65); }

.description-main-content { padding-top: 5%; grid-column: 2 / 3; grid-row: 2 / 5; background-color: #fff; }
.description-main-content h3 + * { padding-top: 0.5em; padding-bottom: 2em; }

.description-main-content ul { list-style: none; }
.description-main-content ul li { padding-top: 0.5em; }

.description-main-content .image-large img { max-width: 100%; grid-column: 2 / 3; }

.list-links { list-style: none; }
.list-links a { font-size: 18px; line-height: 1.4; color: #1c9c84; text-decoration: underline; }

.page-wrapper p.subtitle { font-size: 12px; line-height: 1.2; font-style: italic; padding-top: 0; }

.description-sidebar { padding-left: 15px; padding-top: 5%; padding-bottom: 10%; margin-top: 5px; grid-column: 3 / 4; grid-row: 2 / 3; background-color: #efefef; }
.description-sidebar h1, .description-sidebar .blog-archive-year { height: 50px; max-width: 330px; font-size: 24px; letter-spacing: 0; font-weight: 500; color: #000; }
.description-sidebar h2 { color: #000; font-size: 14px; line-height: 19px; }
.description-sidebar h2:hover { text-decoration: underline; }
.description-sidebar h3 { font-size: 12px; line-height: 16px; color: #9c9c9c; padding-top: 0; font-style: italic; }

.tags-wrapper-sidebar { margin-left: 5%; margin-right: 10%; padding-top: 5%; padding-bottom: 5%; }

@media screen and (max-width: 767px) { .bg-header-robot { height: 30vh; background-position: 20% -5%; }
  .bg-header-robot h1, .bg-header-robot .blog-archive-year { font-size: 60px; line-height: 60px; width: 67vw; padding-top: 15px; padding-left: 15px; }
  .bg-header-robot h2 { width: 90vw; font-size: 22px; line-height: 24px; padding-top: 15px; padding-left: 15px; }
  .description-grid-main { padding-bottom: 0; }
  .description-main-content { display: block; width: 85vw; margin: 0 auto; }
  .description-main-content .image-large { padding: 0; margin-left: -8vw; width: 100vw; }
  .recent-post { padding-left: 10px; }
  .description-sidebar { display: none; } }
@media screen and (max-width: 993px) and (min-width: 450px) { .page-wrapper { padding-top: 0; }
  .bg-header-robot { height: 60vh; padding-left: 7%; }
  .bg-header-robot h1, .bg-header-robot .blog-archive-year { width: 67vw; padding-top: 40%; padding-left: 15px; }
  .bg-header-robot h2 { width: 67vw; font-size: 22px; line-height: 24px; padding-top: 15px; padding-left: 15px; }
  .description-grid-main { padding: 0; } }
@media screen and (max-width: 449px) { .description-grid-main { padding: 0; } }
@media screen and (max-width: 380px) { .bg-robot-r2 h1, .bg-robot-r2 .blog-archive-year { font-size: 50px; line-height: 50px; width: 75vw; }
  .description-main-content { grid-column: 1 / 4; width: 90vw; padding-left: 15px; } }
@media screen and (max-width: 1100px) and (min-width: 601px) and (max-width: 992px) { header { width: unset; }
  header, header #navbar, header #navbar-small { position: fixed; z-index: 5; top: 0; height: 45px; background-color: #15253e; }
  header #navbar .logo, header #navbar-small .logo { padding-top: 10px; padding-left: 25px; margin: 0; }
  header #navbar .logo img, header #navbar-small .logo img { height: 20px; width: auto; }
  header #navbar #dropdown-dots, header #navbar-small #dropdown-dots, header #navbar-small #dropdown-dots .dropdown-dots-small { top: 10px; right: 20px; width: 20px; display: grid; grid-template-columns: repeat(3, 5px); grid-template-rows: repeat(3, 5px); grid-gap: 2.5px; }
  header #navbar #dropdown-dots .dropdown-dot-top, header #navbar-small #dropdown-dots .dropdown-dot-top, header #navbar-small #dropdown-dots .dropdown-dots-small .dropdown-dot-top { padding: 0; grid-column: 2 / 3; grid-row: 1 / 2; }
  header #navbar #dropdown-dots .dropdown-dot-middle, header #navbar-small #dropdown-dots .dropdown-dot-middle, header #navbar-small #dropdown-dots .dropdown-dots-small .dropdown-dot-middle { padding: 0; }
  header #navbar #dropdown-dots .dot-1, header #navbar-small #dropdown-dots .dot-1, header #navbar-small #dropdown-dots .dropdown-dots-small .dot-1 { grid-column: 1 / 1; grid-row: 2 / 3; }
  header #navbar #dropdown-dots .dot-2, header #navbar-small #dropdown-dots .dot-2, header #navbar-small #dropdown-dots .dropdown-dots-small .dot-2 { grid-column: 2 / 3; grid-row: 2 / 3; }
  header #navbar #dropdown-dots .dot-3, header #navbar-small #dropdown-dots .dot-3, header #navbar-small #dropdown-dots .dropdown-dots-small .dot-3 { padding-left: 1px; grid-column: 3 / 4; grid-row: 2 / 3; }
  header #navbar #dropdown-dots .dropdown-dot-bottom, header #navbar-small #dropdown-dots .dropdown-dot-bottom, header #navbar-small #dropdown-dots .dropdown-dots-small .dropdown-dot-bottom { padding: 1px 0 0 0; grid-column: 2 / 3; grid-row: 3 / 4; }
  header #navbar ul.main-menu, header #navbar-small ul.main-menu { display: none; }
  .menu-blog-link { display: none; }
  header #submenu-dots { position: fixed; margin: 0; top: calc(45px - 1px); right: 0; width: 225px; padding: 20px 10px 50px 10px; background-color: #15253e; }
  .grid-menu { height: 200px; width: 240px; display: grid; grid-template-columns: 0.3fr 0.7fr; grid-template-rows: repeat(4, 1fr); }
  header #submenu-dots .grid-mob-menu { height: 175px; display: grid; grid-template-columns: 0.3fr 0.7fr; grid-template-rows: repeat(4, 1fr); }
  header #submenu-dots a.twitter-icon, header #submenu-dots a.discourse-icon, header #submenu-dots a.github-icon { height: 25px; width: 25px; }
  header #submenu-dots a.twitter-icon::after, header #submenu-dots a.discourse-icon::after, header #submenu-dots a.github-icon::after, header #submenu-dots a.mob-nav-item-1::after, header #submenu-dots a.mob-nav-item-2::after, header #submenu-dots a.mob-nav-item-3::after, header #submenu-dots a.mob-nav-item-4::after { display: none; }
  header #submenu-dots a.twitter-icon { grid-column: 1 / 1; grid-row: 1 / 1; }
  header #submenu-dots a.discourse-icon { align-self: end; grid-column: 1 / 1; grid-row: 2 / 3; }
  header #submenu-dots a.github-icon { grid-column: 1 / 1; grid-row: 4 / 5; }
  header #submenu-dots a.mob-nav-item-1, header #submenu-dots a.mob-nav-item-2, header #submenu-dots a.mob-nav-item-3, header #submenu-dots a.mob-nav-item-4 { text-align: right; text-transform: uppercase; font-size: 18px; font-weight: 900; color: #1c9c84; padding-right: 0; }
  a.mob-nav-item-1 { grid-column: 2 / 2; grid-row: 1 / 1; }
  a.mob-nav-item-2 { grid-column: 2 / 3; grid-row: 2 / 3; }
  a.mob-nav-item-3 { grid-column: 2 / 3; grid-row: 3 / 4; }
  a.mob-nav-item-4 { grid-column: 2 / 3; grid-row: 4 / 4; }
  header #submenu-dots li a::after { right: 15px; }
  header #submenu-dots { overflow-y: scroll; }
  header #submenu-dots a { text-transform: uppercase; font-weight: 900; }
  header #submenu-dots p { color: #fff; width: 210px; }
  header #submenu-dots li.sub-item a { margin-right: -5px; } }
@media screen and (max-width: 1100px) and (min-width: 601px) { #submenu-about { display: none; }
  #main { position: static; margin-top: calc(-45px); }
  .banner { padding-bottom: 175px; background-image: url("/https/ros.org/imgs/JazzyNoBG.png"); background-attachment: fixed; background-size: 400px; background-repeat: no-repeat; background-position: 100% 15%; grid-template-columns: 60% 25%; grid-template-rows: repeat(8, 1fr); }
  .banner h1, .banner .blog-archive-year { font-size: clamp(25px, 80px, 90px); grid-row: 3 / 6; }
  .banner h1::after, .banner .blog-archive-year::after { left: 7%; }
  .banner p { font-weight: 400; padding-top: 75px; padding-left: 10px; width: 400px; grid-row: 6 / 9; }
  .banner-image { display: none; }
  .news { background-color: #fff; margin-left: 10%; height: 150px; width: 75%; padding: 20px; border-radius: 10px; box-shadow: 1px 1px 1px #9c9c9c; padding-bottom: 50px; }
  .news h2 { color: #15253e; }
  .news p { padding-bottom: 15px; }
  .videos { padding-top: 0; margin-top: -1px; }
  .videos h3 { width: 19vw; text-align: center; overflow-y: hidden; font-weight: bolder; letter-spacing: -2px; }
  .videos h3::after { margin-left: -115px; }
  .videos .container-video { margin-top: 0; overflow-y: hidden; }
  .owl-stage { padding: 0; }
  .owl-carousel.owl-drag .owl-item { overflow-y: visible; }
  .owl-item iframe { margin-top: 50px; }
  .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next { display: none; }
  .owl-nav button.owl-prev, .owl-nav button.owl-next { display: none; }
  .install { margin: 0 auto; grid-template-columns: 175px 175px 25px 175px 175px; grid-template-rows: 90px 1fr 0.25fr; grid-column-gap: 0; }
  .install h3 { margin-left: 0; overflow-y: hidden; padding: 25px 0 20px 0; margin-left: 50px; height: 30px; width: 80px; grid-column: 1 / 2; grid-row: 1 / 2; }
  .install h6 { padding: 0; overflow-y: hidden; }
  .install p { padding-top: 50px; }
  .install .install-text-1 { overflow-y: hidden; margin-top: 25px; z-index: 1; padding-left: 15px; grid-column: 1 / 2; grid-row: 2 / 3; }
  .install .release-img-1 { z-index: 0; margin-top: -50px; margin-left: -50px; transform: scale(0.75); grid-column: 2 / 3; grid-row: 2 / 3; }
  .install .btn-install-left { align-self: start; margin: 0 5vw; margin-top: 0; width: 30vw; grid-column: 1 / 3; grid-row: 2 / 3; place-self: end; justify-self: center; margin-bottom: -50px; }
  .install .divider-horizontal { grid-column: 3 / 4; grid-row: 2 / 3; border-right: 5px solid #fb9401; }
  .install .install-text-2 { width: 150px; padding-top: 25px; padding-left: 15px; padding-right: 70px; grid-column: 4 / 5; grid-row: 2 / 3; }
  .install .release-img-2 { margin-top: -80px; margin-left: -115px; transform: scale(0.5); grid-column: 5 / 6; grid-row: 2 / 3; }
  .install .btn-install-right { align-self: start; margin-left: 60px; width: 30vw; grid-column: 4 / 6; grid-row: 2 / 3; place-self: end; justify-self: center; margin-bottom: -50px; }
  .install .install-text-1 h6, .install .install-text-2 h6 { margin-left: 10px; }
  .install .install-text-1 p, .install .install-text-2 p { margin-left: 10px; font-size: 16px; font-weight: 400; }
  .btn-install img { margin-top: -5px; }
  .support { overflow-y: hidden; }
  .support h3 { width: 110px; }
  .support h3::after { margin-top: 0; margin-left: -100px; }
  .support p { font-size: 16px; width: 500px; text-align: center; }
  .support .support-carousel-mob { display: none; }
  .support .support-grid { display: grid; grid-template-columns: repeat(3, 175px); grid-template-rows: 150px 50px 100px; background-color: #fff; grid-column-gap: 75px; justify-content: center; }
  .support .support-grid p { text-align: center; font-size: 18px; width: unset; }
  .support .support-grid strong { text-align: center; }
  .support .support-grid img { margin-top: 0; }
  .support .img-1 { transform: scale(0.8); grid-column: 1 / 2; grid-row: 1 / 2; }
  .support .img-caption-1 { font-size: 22px; grid-column: 1 / 2; grid-row: 2 / 3; width: unset; }
  .support .blurb-1 { grid-column: 1 / 2; grid-row: 3 / 4; }
  .support .img-2 { transform: scale(0.8); grid-column: 2 / 3; grid-row: 1 / 2; }
  .support .img-caption-2 { font-size: 22px; grid-column: 2 / 3; grid-row: 2 / 3; }
  .support .blurb-2 { grid-column: 2 / 3; grid-row: 3 / 4; }
  .support .img-3 { align-self: start; transform: scale(0.8); grid-column: 3 / 4; grid-row: 1 / 2; }
  .support .img-caption-3 { font-size: 22px; grid-column: 3 / 4; grid-row: 2 / 3; }
  .support .blurb-3 { grid-column: 3 / 4; grid-row: 3 / 4; padding-right: 10px; }
  .blog-newsletter { display: block; overflow-y: visible; }
  .blog-newsletter .blog-grid { height: 100%; display: grid; grid-template-columns: 400px 300px; grid-template-rows: 50px 225px 250px; grid-gap: 30px; justify-content: center; padding-top: 10px; }
  .blog-newsletter .blog-grid h4 { height: 50px; width: 500px; margin-top: 35px; font-weight: 700; font-size: 30px; letter-spacing: -1px; }
  .blog-newsletter .blog-grid .block-post-title { grid-column: 1 / 2; grid-row: 1 / 2; }
  .blog-newsletter .blog-grid .highlighted-post { overflow-y: visible; grid-column: 1 / 2; grid-row: 2 / 4; }
  .blog-newsletter .blog-grid .highlighted-post-title, .blog-newsletter .blog-grid .highlighted-post-subtitle, .blog-newsletter .blog-grid .highlighted-post-author-date { height: 30px; }
  .blog-newsletter .blog-grid .highlighted-post-title h1, .blog-newsletter .blog-grid .highlighted-post-title .blog-archive-year, .blog-newsletter .blog-grid .recent-posts h1, .blog-newsletter .blog-grid .recent-posts .blog-archive-year { font-size: 18px; font-weight: 700; padding-bottom: 25px; }
  .blog-newsletter .blog-grid .highlighted-post-subtitle h2 { font-size: 16px; font-weight: 400; padding-top: 5px; }
  .blog-newsletter .blog-grid .recent-post-title h2 { font-size: 12px; font-weight: 700; padding-left: 15px; padding-bottom: 5px; }
  .blog-newsletter .blog-grid .highlighted-post-author-date h3, .blog-newsletter .blog-grid .recent-post-author-date h3 { padding-top: 0; font-size: 12px; font-style: italic; color: #9c9c9c; margin-left: 0 auto; }
  .blog-newsletter .blog-grid .highlighted-post-author-date h3::after, .blog-newsletter .blog-grid .recent-post-author-date h3::after { display: none; }
  .blog-newsletter .blog-grid .recent-post-author-date { padding-left: 15px; }
  .blog-newsletter .blog-grid .highlighted-post-content { height: auto; }
  .blog-newsletter .blog-grid .highlighted-post-content p { line-height: 25px; }
  .blog-newsletter .blog-grid .recent-posts { grid-column: 2 / 3; grid-row: 2 / 3; }
  .blog-newsletter .blog-grid .recent-posts a { color: #000; font-size: 13px; text-decoration: none; }
  .blog-newsletter .blog-grid .recent-posts a:hover { text-decoration: underline; }
  .blog-newsletter .blog-grid .recent-post { padding: 0; }
  .blog-newsletter .blog-grid a.read-more { color: #1c9c84; text-decoration: underline; text-transform: uppercase; }
  .blog-newsletter .blog-grid a.blog-archives { color: #1c9c84; text-decoration: underline; text-transform: capitalize; padding-left: 15px; }
  .blog-newsletter .blog-grid .newsletter-signup { margin: 0; white-space: pre-line; grid-column-start: 2; grid-row-start: 3; }
  .blog-newsletter .blog-grid .newsletter-signup h2 { width: auto; font-weight: 700; font-size: 12px; line-height: 12px; }
  .blog-newsletter .blog-grid .newsletter-signup input { margin-bottom: 10px; width: clamp(50px, 240px, 300px); padding: 8px 0 8px 0; }
  .blog-newsletter .blog-grid .newsletter-signup input::placeholder { color: #9c9c9c; font-style: italic; font-size: 12px; text-align: center; }
  .blog-newsletter .blog-grid .newsletter-signup .btn-subscribe { width: clamp(50px, 245px, 300px); }
  .footer-main .logo { height: auto; }
  .footer-submenu-mob { display: none; }
  .footer-sub .footer-sub-menu ul { margin-left: 20px; margin-right: 20px; }
  .footer-sub .footer-sub-menu li a { font-size: 13px; }
  .footer-sub .legal { display: block; }
  .footer-sub .legal p { width: unset; } }
@media screen and (max-width: 1100px) and (min-width: 1000px) { .banner { background-position: 100% 60%; }
  .banner h1, .banner .blog-archive-year { width: 700px; }
  .banner p { padding-top: 0; width: 550px; } }
@media screen and (max-width: 1000px) and (min-width: 900px) { .banner { background-position: 110% -25%; }
  .banner h1, .banner .blog-archive-year { width: 700px; }
  .banner p { padding-top: 0; width: 550px; } }
@media screen and (min-width: 993px) { .btn-subscribe { width: clamp(264px, 280px, 300px); } }
@media screen and (max-width: 1440px) and (min-width: 1101px) { .install .release-img-2 { margin-left: -50px; transform: scale(0.7); } }
@media screen and (max-width: 1100px) and (min-width: 1000px) { .banner { background-attachment: scroll; }
  .banner h1::after, .banner .blog-archive-year::after { left: 7%; }
  .banner p { width: unset; grid-row: 7 / 9; }
  .install { grid-gap: 0px; }
  .install .release-img-2 { margin-left: -50px; transform: scale(0.7); } }
@media screen and (max-width: 993px) and (min-width: 600px) { .banner { background-position: 100% 85%; }
  .banner p { margin-top: 35px; }
  .install .release-img-2 { margin-left: -80px; } }
@media screen and (max-width: 768px) and (min-width: 601px) { .banner { background-position: 100% 10%; grid-template-rows: repeat(5, 20%); }
  .banner h1, .banner .blog-archive-year { grid-row: 1 / 3; }
  .banner img { grid-row: 1 / 6; }
  .banner p { font-weight: 400; padding-top: 100px; width: 340px; grid-row: 3 / 5; }
  .install { grid-template-columns: 150px 150px 1px 150px 150px; }
  .install .install-text-1 p { margin: 0; }
  .blog-newsletter .blog-grid { grid-column-gap: 10px; grid-template-columns: 375px 200px; } }
@media screen and (max-width: 700px) and (min-width: 601px) { .install .release-img-2 { transform: scale(0.4); margin-left: -100px; }
  .blog-newsletter .blog-grid .newsletter-signup input { max-width: 200px; }
  .blog-newsletter .blog-grid .newsletter-signup .btn-subscribe { max-width: 206px; } }
@media screen and (max-width: 601px) and (min-width: 500px) { #main .banner { background-size: 300px; background-position: 110% 9%; grid-template-columns: 65% 35%; }
  #main .banner h1, #main .banner .blog-archive-year { padding-left: 15px; font-size: 72px; }
  #main .banner p { padding-top: 175px; width: 500px; } }
@media screen and (max-width: 499px) and (min-width: 400px) { #main .banner { background-position: 110% 15%; }
  #main .banner p { padding-top: 50px; width: 375px; } }
@media screen and (max-width: 992px) { header { width: unset; }
  header, header #navbar, header #navbar-small { position: fixed; z-index: 5; top: 0; height: 45px; background-color: #15253e; }
  header #navbar .logo, header #navbar-small .logo { padding-top: 10px; padding-left: 25px; margin: 0; }
  header #navbar .logo img, header #navbar-small .logo img { height: 20px; width: auto; }
  header #navbar #dropdown-dots, header #navbar-small #dropdown-dots, header #navbar-small #dropdown-dots .dropdown-dots-small { top: 10px; right: 20px; width: 20px; display: grid; grid-template-columns: repeat(3, 5px); grid-template-rows: repeat(3, 5px); grid-gap: 2.5px; }
  header #navbar #dropdown-dots .dropdown-dot-top, header #navbar-small #dropdown-dots .dropdown-dot-top, header #navbar-small #dropdown-dots .dropdown-dots-small .dropdown-dot-top { padding: 0; grid-column: 2 / 3; grid-row: 1 / 2; }
  header #navbar #dropdown-dots .dropdown-dot-middle, header #navbar-small #dropdown-dots .dropdown-dot-middle, header #navbar-small #dropdown-dots .dropdown-dots-small .dropdown-dot-middle { padding: 0; }
  header #navbar #dropdown-dots .dot-1, header #navbar-small #dropdown-dots .dot-1, header #navbar-small #dropdown-dots .dropdown-dots-small .dot-1 { grid-column: 1 / 1; grid-row: 2 / 3; }
  header #navbar #dropdown-dots .dot-2, header #navbar-small #dropdown-dots .dot-2, header #navbar-small #dropdown-dots .dropdown-dots-small .dot-2 { grid-column: 2 / 3; grid-row: 2 / 3; }
  header #navbar #dropdown-dots .dot-3, header #navbar-small #dropdown-dots .dot-3, header #navbar-small #dropdown-dots .dropdown-dots-small .dot-3 { padding-left: 1px; grid-column: 3 / 4; grid-row: 2 / 3; }
  header #navbar #dropdown-dots .dropdown-dot-bottom, header #navbar-small #dropdown-dots .dropdown-dot-bottom, header #navbar-small #dropdown-dots .dropdown-dots-small .dropdown-dot-bottom { padding: 1px 0 0 0; grid-column: 2 / 3; grid-row: 3 / 4; }
  header #navbar ul.main-menu, header #navbar-small ul.main-menu { display: none; }
  .menu-blog-link { display: none; }
  header #submenu-dots { position: fixed; margin: 0; top: calc(45px - 1px); right: 0; width: 225px; padding: 20px 10px 50px 10px; background-color: #15253e; }
  .grid-menu { height: 200px; width: 240px; display: grid; grid-template-columns: 0.3fr 0.7fr; grid-template-rows: repeat(4, 1fr); }
  header #submenu-dots .grid-mob-menu { height: 175px; display: grid; grid-template-columns: 0.3fr 0.7fr; grid-template-rows: repeat(4, 1fr); }
  header #submenu-dots a.twitter-icon, header #submenu-dots a.discourse-icon, header #submenu-dots a.github-icon { height: 25px; width: 25px; }
  header #submenu-dots a.twitter-icon::after, header #submenu-dots a.discourse-icon::after, header #submenu-dots a.github-icon::after, header #submenu-dots a.mob-nav-item-1::after, header #submenu-dots a.mob-nav-item-2::after, header #submenu-dots a.mob-nav-item-3::after, header #submenu-dots a.mob-nav-item-4::after { display: none; }
  header #submenu-dots a.twitter-icon { grid-column: 1 / 1; grid-row: 1 / 1; }
  header #submenu-dots a.discourse-icon { align-self: end; grid-column: 1 / 1; grid-row: 2 / 3; }
  header #submenu-dots a.github-icon { grid-column: 1 / 1; grid-row: 4 / 5; }
  header #submenu-dots a.mob-nav-item-1, header #submenu-dots a.mob-nav-item-2, header #submenu-dots a.mob-nav-item-3, header #submenu-dots a.mob-nav-item-4 { text-align: right; text-transform: uppercase; font-size: 18px; font-weight: 900; color: #1c9c84; padding-right: 0; }
  a.mob-nav-item-1 { grid-column: 2 / 2; grid-row: 1 / 1; }
  a.mob-nav-item-2 { grid-column: 2 / 3; grid-row: 2 / 3; }
  a.mob-nav-item-3 { grid-column: 2 / 3; grid-row: 3 / 4; }
  a.mob-nav-item-4 { grid-column: 2 / 3; grid-row: 4 / 4; }
  header #submenu-dots li a::after { right: 15px; }
  header #submenu-dots { overflow-y: scroll; }
  header #submenu-dots a { text-transform: uppercase; font-weight: 900; }
  header #submenu-dots p { color: #fff; width: 210px; }
  header #submenu-dots li.sub-item a { margin-right: -5px; } }
@media screen and (max-width: 600px) { .github-corner { display: none; }
  body { height: auto; }
  #submenu-about { display: none; }
  header #submenu-dots li a { text-align: right; }
  .content-wrapper { height: 100%; width: 100%; }
  .banner { background-attachment: fixed; background-size: 250px; background-repeat: no-repeat; background-position: 135% 20%; grid-template-columns: 80% 20%; grid-template-rows: 90px 60px 20% auto; grid-column-gap: 10px; }
  .banner h1, .banner .blog-archive-year { padding-top: 10px; margin-left: 10px; font-size: 60px; line-height: 60px; grid-column: 1 / 2; grid-row: 3 / 5; }
  .banner h1::after, .banner .blog-archive-year::after { left: 5%; padding-top: 100px; }
  .banner p { font-size: 21px; padding-top: 115px; padding-left: 20px; width: 335px; grid-row: 5 / 6; }
  .banner-image { display: none; }
  .news-wrapper { height: 200px; }
  .news { margin-left: 0; padding: 0 0 15px 0; width: 100vw; border-radius: 10px; box-shadow: 1px 1px 1px #9c9c9c; }
  .news h2 { color: #15253e; margin-top: 15px; margin-left: 30px; }
  .news p { padding-left: 25px; width: 335px; }
  .news .btn-event { margin: 0 auto; width: clamp(230px, 275px, 375px); }
  .videos { padding-top: 0; }
  .videos h3 { width: 145px; text-align: center; overflow-y: hidden; font-weight: bolder; letter-spacing: -2px; }
  .videos h3::after { display: none; }
  .videos .container-video { margin-top: 0; overflow-y: hidden; }
  .owl-carousel.owl-drag .owl-item { overflow-y: visible; }
  .owl-item iframe { margin-top: 50px; }
  .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next { display: none; }
  .owl-nav button.owl-prev, .owl-nav button.owl-next { display: none; }
  .install { grid-template-columns: repeat(4, 22.5%); grid-template-rows: auto auto auto auto auto; grid-column-gap: 0; padding-bottom: 50px; }
  .install h3 { overflow-y: hidden; padding: 25px 0 20px 0; height: 30px; width: 80px; margin-left: 0; grid-column: 1 / 5; grid-row: 1 / 2; justify-self: center; }
  .install h6 { padding: 0; overflow-y: hidden; }
  .install p { padding-top: 50px; }
  .install .install-text-1 { margin-top: 20px; margin-left: -20px; z-index: 1; padding-left: 15px; grid-column: 1 / 3; grid-row: 2 / 3; }
  .install .release-img-1 { z-index: 0; margin-left: -50px; transform: scale(0.8); grid-column: 4 / 5; grid-row: 2 / 3; }
  .install .btn-install-left { width: 80vw; grid-column: 2 / 4; grid-row: 3 / 4; place-self: end; justify-self: center; margin-top: -20px; }
  .install .divider-horizontal { display: none; }
  .install .install-text-2 { margin-top: 20px; margin-left: -20px; z-index: 1; padding-left: 15px; grid-column: 1 / 3; grid-row: 4 / 5; }
  .install .release-img-2 { z-index: 0; margin-left: -190px; transform: scale(0.5); grid-column: 4 / 5; grid-row: 4 / 5; }
  .install .btn-install-right { width: 80vw; grid-column: 2 / 4; grid-row: 5 / 6; place-self: end; justify-self: center; margin-top: -90px; }
  .install .install-text-1 h6, .install .install-text-2 h6 { margin-left: 10px; }
  .install .install-text-1 p, .install .install-text-2 p { margin-left: 10px; font-size: 16px; font-weight: 400; }
  .install .btn-install img { margin-top: -2.5px; }
  .support { padding-bottom: 50px; }
  .support h3 { border-bottom: 4px solid #fb9401; width: 105px; }
  .support h3::after { display: none; }
  .support p { margin: 0; font-size: 16px; width: 300px; text-align: center; }
  .support .support-carousel-mob { display: block; }
  .support .support-grid { display: none; }
  .support #support-carousel { padding-top: 50px; }
  .support .owl-item { height: auto; padding: 0 7vw; overflow-y: auto; }
  .support .support-documentation { display: flex; flex-direction: column; justify-content: center; align-items: center; height: auto; margin-top: 10px; }
  .support .img-1 { height: 50px; padding-left: 15px; }
  .support .img-caption-1 { padding-top: 20px; font-size: 18px; width: auto; }
  .support .blurb-1 { padding-top: 20px; width: auto; }
  .support .support-stack-exchange { display: flex; flex-direction: column; justify-content: center; align-items: center; height: auto; margin-top: 10px; }
  .support .img-2 { height: 50px; }
  .support .img-caption-2 { width: auto; padding-top: 20px; }
  .support .blurb-2 { width: auto; padding-top: 20px; }
  .support .support-forums { display: flex; flex-direction: column; justify-content: center; align-items: center; height: auto; margin-top: 10px; }
  .support .img-3 { height: 50px; }
  .support .img-caption-3 { width: auto; padding-top: 20px; }
  .support .blurb-3 { width: auto; padding-top: 20px; }
  .blog-newsletter { display: block; width: 100%; padding-top: 35px; padding-bottom: 25px; }
  .blog-newsletter .blog-grid { display: block; width: 90%; margin: 0 auto; }
  .blog-newsletter .blog-grid h4 { color: #15253e; width: auto; }
  .blog-newsletter .blog-grid .recent-post { padding-top: 0; }
  .blog-newsletter .blog-grid .recent-posts h1, .blog-newsletter .blog-grid .recent-posts .blog-archive-year { padding-bottom: 15px; }
  .blog-newsletter .highlighted-post-title h1, .blog-newsletter .highlighted-post-title .blog-archive-year { font-size: 22px; line-height: 22px; color: #15253e; }
  .blog-newsletter .highlighted-post-subtitle h2 { font-size: 16px; color: #15253e; }
  .blog-newsletter .highlighted-post-content { margin-top: 10px; }
  .blog-newsletter a.read-more { line-height: 30px; }
  .blog-newsletter .recent-posts { padding-top: 10px; }
  .blog-newsletter .recent-posts .recent-post-author-date h3 { padding-top: 5px; }
  .blog-newsletter .newsletter-signup { margin: 0 auto; grid-column-start: 2; grid-row-start: 3; }
  .blog-newsletter .newsletter-signup h2 { font-size: 12px; font-weight: 700; }
  .blog-newsletter .newsletter-signup input { margin-left: 0; margin-bottom: 10px; height: 20px; overflow-y: visible; width: clamp(250px, 380px, 85vw); padding: 8px 0 8px 0; margin-left: 0; }
  .blog-newsletter .newsletter-signup .btn-subscribe { margin-left: 0; padding: 10px 0; border: 4px solid #1c9c84; }
  .footer-main { margin-top: 0; padding-bottom: 15px; }
  .footer-main .logo { height: auto; }
  .footer-main .footer-menu { margin-left: 15px; }
  .footer-main .footer-menu ul { display: block; list-style: none; }
  .footer-main .footer-menu ul .link-home { display: none; }
  .footer-main .footer-menu ul li { padding-bottom: 20px; text-align: left; }
  .footer-sub-menu { display: none; }
  .footer-submenu-mob { display: block; position: absolute; margin-top: -190px; right: 15px; }
  .footer-submenu-mob ul { display: block; list-style: none; text-align: right; }
  .footer-submenu-mob li { margin-bottom: 20px; }
  .footer-submenu-mob li a { color: #9c9c9c; }
  .footer-sub { padding-bottom: 5px; overflow-y: visible; }
  .footer-sub .legal { overflow-y: visible; }
  .footer-sub .legal p { width: 100%; } }
@media screen and (max-width: 992px) and (max-height: 450px) { .banner { background-size: 200px; background-position: 100% 200%; }
  .banner h1, .banner .blog-archive-year { font-size: 60px; grid-row: 2 / 6; }
  .banner p { width: 425px; grid-row: 4 / 6; } }
@media screen and (max-width: 768px) and (min-width: 500px) and (max-height: 450px) and (min-height: 200px) { .banner { background-size: 300px; background-position: 110% -50%; }
  .blog-newsletter { padding-left: 0; }
  .blog-newsletter .blog-grid { grid-column-gap: 0; grid-template-columns: 300px 200px; }
  .blog-newsletter .blog-grid .newsletter-signup .btn-subscribe { width: 184px; }
  .blog-newsletter .blog-grid .newsletter-signup input { width: 180px; } }
@media screen and (max-width: 500px) { .github-corner { display: none; }
  .banner { background-size: 250px; background-position: 125% 25%; grid-template-columns: auto; margin-top: 0; }
  .banner h1, .banner .blog-archive-year { font-size: 20vw; line-height: 20vw; }
  .blog-newsletter .btn-subsribe { width: clamp(250px, 380px, 85vw); } }
@media screen and (max-width: 330px) { .github-corner { display: none; }
  .banner { background-position: 150% 30%; grid-template-columns: 90% 10%; grid-template-rows: 90px 60px 20% auto; }
  .banner h1, .banner .blog-archive-year { padding-top: 5px; }
  .banner p { padding-top: 125px; width: 300px; }
  .news-wrapper { height: 245px; }
  .news h2, .news p { width: 90vw; }
  .news .btn-event { width: 70vw; }
  .install .release-img-2 { transform: scale(0.4); margin-right: -25px; margin-bottom: 50px; }
  .blog-newsletter .newsletter-signup input { margin-left: 5%; width: 90%; height: 25px; }
  .blog-newsletter .newsletter-signup .btn-subscribe { margin-left: 5%; width: 90%; } }
code { font-family: "Liberation Mono", Monaco, Consolas, "Courier New", monospace; border: solid #9c9c9c 2px; border-radius: 2px; white-space: pre-wrap; }

pre code { max-width: 100%; display: block; margin-bottom: 0.5rem; border-width: 7px; border-radius: 5px; padding: 10px; overflow-x: scroll; }

table { border-collapse: collapse; }
table thead { background-color: #1c9c84; }
table thead th, table thead td { color: white; }
table tbody tr:hover { background-color: #6ce5ce; }
table td, table th { border: solid #e7e7e7 1px; padding: 5px 20px; }