/* Home layout values adapted from the pinned site/static/main.css. */
.vl-home .title h1 { margin: .3em 0 .3em; font-size: 2.5em; font-weight: 300; line-height: 1.2; }
.vl-home .page-content { padding-top: 0; padding-bottom: 3em; line-height: 1.5; }
.vl-home h2 { font-size: 1.75em; font-weight: 500; border-bottom: 1px solid #ccc; margin-top: 1.5em; padding-bottom: 1px; }
.vl-home .lead { font-size: 1.3em; font-weight: 300; color: inherit; line-height: 1.5; }
.vl-home .lead-columns { display: flex; flex-direction: row; justify-content: space-around; align-items: stretch; }
.vl-home .lead-columns > div:first-child { margin-right: 60px; }
.vl-home .lead-buttons { flex: 0 0 auto; }
.vl-home .lead-buttons a { display: block; width: 250px; padding: 8px 16px; margin: 1em 0; text-align: center; background: #3771ad; border: 1px solid #153c63; color: white; border-radius: 4px; font-size: 1.2em; }
.vl-home .lead-buttons a:last-child { color: #333; background: #fff; border-color: #ccc; }
.vl-home .lead-buttons a:hover { text-decoration: none; background: #285e8e; }
.vl-home .lead-buttons a:last-child:hover { background: #ebebeb; }
.vl-home #showcase { width: 100%; height: 300px; overflow: hidden; margin: 0; padding: 0; position: relative; }
.vl-home #showcase:after, .vl-home #showcase:before { content: ''; display: block; width: 100%; position: absolute; background: white; height: 16px; z-index: 2; pointer-events: none; }
.vl-home #showcase:before { bottom: -16px; box-shadow: 0 -8px 16px #0005; }
.vl-home #showcase:after { top: -16px; box-shadow: 0 8px 16px #0005; }
.vl-home #showcase .examples { margin: 0 auto; height: 300px; width: 1300px; line-height: 0; }
.vl-home #showcase .preview { display: block; float: left; width: 180px; height: 100px; padding: 0; outline: 1px solid #ddd; background-position: left top; background-size: cover; overflow: hidden; position: relative; z-index: 0; transition: background-position 2s; }
.vl-home #showcase .preview:hover { background-position: right bottom; outline: 2px solid #4682b4; z-index: 1; }
.vl-home .home-example { display: flex; align-items: stretch; margin-top: 1em; flex-flow: row wrap; width: 100%; max-width: 786px; overflow: auto; border: 0; padding: 0; }
.vl-home .home-example .example-vis { flex: 1 1 0; margin-right: 10px; text-align: center; background: white; margin-bottom: 1em; align-self: flex-start; }
.vl-home .home-example .example-code { flex: 1.618 1 0; margin: 0; align-self: flex-start; min-width: 350px; max-width: 100%; padding: 8px 10px; line-height: 1em; border: 1px solid #eee; background: #f9f9f9; }
.vl-home .example-code code { white-space: pre-wrap; font-size: .8em; }
.vl-home .home-example .example-code.code-copy-wrapper { padding-right: 90px; }
.vl-home .example-vis svg { border: 1px dashed #ddd; }
.vl-home .carousel { position: relative; width: 100%; }
.vl-home .slide { display: none; }
.vl-home .slide[data-state='active'] { display: block; }
.vl-home .slide.video-demo { position: relative; }
.vl-home .slide.video-demo:not(.video-revealed) .example-vis { visibility: hidden; }
.vl-home .slide.video-demo video { position: absolute; top: 0; left: 0; max-width: 100%; border: 1px dashed #ddd; }
.vl-home .indicators { position: absolute; top: -40px; width: 100%; text-align: right; }
.vl-home .indicator { cursor: pointer; }
.vl-home .slide-nav { cursor: pointer; }
.vl-home .slide-nav[data-state='active'] { color: #373a3c; font-weight: bold; }
.vl-home .next-slide { padding: 3px 5px; margin-left: 2em; color: #333; font-weight: 600; background: #f8f8f8; border: 1px solid #999; border-radius: 2px; font-size: .8em; cursor: pointer; }
.vl-home .next-slide:hover { background: #ebebeb; color: #000; }
.vl-home .logos { list-style: none; padding-left: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.vl-home .logos li { flex: 0; }
.vl-home .logos li img { box-sizing: content-box; padding: 18px; height: 50px; transition: all .4s; filter: grayscale(100%); opacity: .8; }
.vl-home .logos li img:hover { opacity: 1; filter: grayscale(0%); }
@media (max-width: 900px) {
  .vl-home { font-size: 14px; }
}
@media (max-width: 640px) {
  .vl-home .lead-columns { flex-direction: column; }
  .vl-home .lead-columns > div:first-child { margin-right: 0; }
  .vl-home .lead-buttons a { width: inherit; }
  .vl-home .home-example .example-vis, .vl-home .home-example .example-code { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow-x: auto; }
  .vl-home .example-code code { min-width: 600px; display: block; }
}