/*!
 * Copyright (C) 2022 DagsHub - All Rights Reserved.
 *  You may not use, distribute or modify this code under any circumstances.
 */
.padded-masthead {
  padding: 10em 0;
}
.above-the-fold {
  padding-top: 30px;
  background: none;
  /* fallback for old browsers */
  padding-bottom: 250px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vh), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vh), 0 100%);
  z-index: 4;
}
.background-effect-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.background-effect-container #animation_bg {
  width: 100%;
  height: 100%;
}
#homepagehero_container {
  pointer-events: none;
}
.homepagehero_content p {
  color: #f5fffa !important;
  font-size: 1.5rem !important;
  line-height: 2.8rem;
  font-weight: 300;
  letter-spacing: 1px;
}
.homepagehero_content p.subtitle-2 {
  font-size: 1.1rem !important;
}
.homepagehero_content h1.ui.header {
  font-size: 3.6rem !important;
  margin-bottom: 30px;
  text-shadow: -2px 2px 5px rgba(0, 0, 0, 0.4);
  color: #f2fff9;
  font-weight: 900;
  letter-spacing: 2px;
  font-family: "Inter", sans-serif !important;
}
.homepagehero_content h1.ui.header .emphasis-header {
  color: #a18cd1;
  background-image: -webkit-linear-gradient(90deg, #a18cd1 0%, #d0a8df 66.15%, #fbc2eb 100%);
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.home_search .ui.input input::placeholder {
  color: rgba(0, 0, 0, 0.5);
}
/* Sign up section */
.home-signup {
  margin: 40px 0 5px;
  position: relative;
}
.home-signup .ui.button {
  pointer-events: auto;
  font-weight: normal;
  border-radius: var(--button-radius-big);
  margin: 0 0.25em;
}
.home-signup .ui.button:not(.inverted) {
  background: var(--purple-600);
}
.home-signup .ui.button:not(.inverted):hover {
  background: var(--purple-800);
}
.home-signup .alternative-options {
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
}
.home-signup .ui.button .icon {
  opacity: 1;
}
.home-signup h3,
.home-signup .segment {
  margin-top: 0 !important;
}
.home-signup .segment,
.home-signup .ui.form input {
  padding: 0.4em 1em;
}
.home-signup #github-login-button {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 270px;
  margin-bottom: 5px;
  border-radius: var(--roundness);
  box-shadow: -2px 2px 4px 0 rgba(34, 36, 38, 0.5);
  -webkit-box-shadow: -2px 2px 4px 0 rgba(34, 36, 38, 0.5);
  -moz-box-shadow: -2px 2px 4px 0 rgba(34, 36, 38, 0.5);
}
.home-signup #email-signup-button {
  background-color: #b500b3;
}
.touch-to-scroll {
  margin-top: 2rem;
  display: none;
}
.touch-to-scroll .ui.button {
  pointer-events: auto;
  font-weight: normal;
}
/* End Sign up section*/
/* Featured repos section */
.ui.header.featured_header {
  opacity: 0.8;
  font-size: 1.4rem;
}
#featured-repos .card {
  opacity: 0.9;
  font-size: 1em;
  color: var(--text-color-dark);
  border-top: 2px solid #b500b3 !important;
  border-radius: var(--roundness);
  background-color: rgba(29, 29, 29, 0.4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  -webkit-box-shadow: 0 1px 2px 0 rgba(100, 100, 100, 0.25);
  -moz-box-shadow: 0 1px 2px 0 rgba(100, 100, 100, 0.25);
  box-shadow: 0 1px 2px 0 rgba(100, 100, 100, 0.25);
  -webkit-transition: -webkit-box-shadow 0.25s ease, -webkit-transform 0.25s ease;
  transition: box-shadow 0.25s ease, transform 0.25s ease, -webkit-box-shadow 0.25s ease, -webkit-transform 0.25s ease;
}
#featured-repos .card:hover {
  transform: translateY(-3px);
  -webkit-box-shadow: 0 0 0 1px rgba(100, 100, 100, 0.25), 0 2px 4px 0 rgba(34, 36, 38, 0.15), 0 2px 10px 0 rgba(34, 36, 38, 0.25);
  box-shadow: 0 0 0 1px rgba(100, 100, 100, 0.25), 0 2px 4px 0 rgba(34, 36, 38, 0.15), 0 2px 10px 0 rgba(34, 36, 38, 0.25);
}
#featured-repos .card.two {
  margin-left: -25px;
}
#featured-repos .card.three {
  margin-left: -50px;
}
#featured-repos .breadcrumb {
  display: flex;
  align-items: baseline;
  color: lightskyblue;
}
#featured-repos .breadcrumb .divider {
  color: var(--text-color-dark-faded);
}
.featured_repo_desc {
  color: var(--text-color-dark) !important;
  padding-top: 0.6rem;
  font-size: 1.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  -webkit-box-orient: vertical;
}
.featured_user_name {
  margin-bottom: 0.6rem;
  font-size: 1.1rem;
}
.featured_image {
  border: 1px solid rgba(122, 176, 229, 0.5);
}
.featured_icon {
  padding: 0 7px;
  opacity: 0.7;
}
.featured_project_name {
  font-size: 1.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* End featured repo section */
/* Media Queries */
@media (hover: none), only screen and (max-width: 950px) {
  .touch-to-scroll {
    display: block;
    z-index: 5;
  }
}
@media only screen and (max-width: 767px) {
  .home-signup .ui.button {
    margin: 0.25em;
    padding: 15px 20px;
  }
  .above-the-fold {
    padding-bottom: 125px;
  }
  #featured-repos {
    display: none;
  }
  .homepagehero_content {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
  .padded-masthead {
    padding: 2em 0em 3em;
  }
}
@media only screen and (max-width: 600px) {
  .homepagehero_content h1.ui.header {
    font-size: 2.5rem !important;
    margin: 0 0 1rem;
    font-weight: 800;
  }
  .homepagehero_content p.homepage_copy {
    font-size: 1.1rem !important;
    line-height: 1.7rem;
    font-weight: 400;
    letter-spacing: 3px;
  }
  .homepagehero_content p.subtitle-2 {
    font-size: 0.8rem !important;
  }
}
@media only screen and (min-width: 601px) and (max-width: 767px) {
  .homepagehero_content h1.ui.header {
    font-size: 2.7rem !important;
  }
  .homepagehero_content p {
    font-size: 1.4rem !important;
  }
  .homepagehero_content p.subtitle-2 {
    font-size: 1.3rem !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
  .homepagehero_content p {
    font-size: 1.4rem !important;
  }
  .homepagehero_content p.subtitle-2 {
    font-size: 1.3rem !important;
  }
}
@media only screen and (min-width: 971px) and (max-width: 1200px) {
  .homepagehero_content p {
    font-size: 1.4rem !important;
  }
  .homepagehero_content p.subtitle-2 {
    font-size: 1.3rem !important;
  }
}
#blog-updates {
  background: var(--medium-bg);
  z-index: 0;
  margin-top: -200rem;
  padding: calc(200rem + 10rem) 0 10rem;
}
#blog-updates .ui.main.header {
  margin-bottom: 3rem;
}
#blog-updates .ui.main.header a {
  color: var(--white);
}
#blog-updates .ui.warning.message {
  text-align: left;
  width: 500px;
  margin: auto;
}
#blog-updates .card {
  border-radius: var(--roundness);
  background: var(--dark-bg);
  -webkit-box-shadow: 0 0 0 1px var(--dark-bg), 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  box-shadow: 0 0 0 1px var(--dark-bg), 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}
#blog-updates .card:hover {
  -webkit-box-shadow: 0 0 0 1px var(--dark-bg), 0 2px 4px 0 rgba(34, 36, 38, 0.15), 0 2px 10px 0 rgba(34, 36, 38, 0.25);
  box-shadow: 0 0 0 1px var(--dark-bg), 0 2px 4px 0 rgba(34, 36, 38, 0.15), 0 2px 10px 0 rgba(34, 36, 38, 0.25);
}
#blog-updates .card > :first-child {
  border-radius: var(--roundness) 10px 0 0 !important;
}
#blog-updates .card img {
  height: 250px;
  object-fit: cover;
  object-position: center;
}
#blog-updates .card .main.content {
  padding: 2rem 2rem 1.5rem;
  min-height: 220px;
}
#blog-updates .card .header {
  color: var(--text-color-dark);
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  -webkit-box-orient: vertical;
  height: 56px;
}
#blog-updates .card .description {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-color-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* number of lines to show */
  -webkit-box-orient: vertical;
}
#blog-updates .card .meta {
  color: var(--text-color-dark-faded);
  margin-bottom: 1rem;
}
#blog-updates .card .extra.content {
  color: var(--text-color-dark-faded);
  border-top: 1px solid var(--text-color-dark-very-faded) !important;
  padding: 1rem 2rem;
}
.ui.cards > .card > :first-child {
  border-radius: var(--roundness) 10px 0 0 !important;
}
@media only screen and (max-width: 767px) {
  #blog-updates .ui.card img {
    display: none;
  }
}
#get-started {
  margin-top: -380px;
  padding: 5rem 0 2rem;
  font-weight: 300;
  background: none;
}
#get-started .segment {
  z-index: 5;
  -webkit-box-shadow: 0 4px 8px 0 rgba(34, 36, 38, 0.1), 0 4px 20px 0 rgba(34, 36, 38, 0.25);
  box-shadow: 0 4px 8px 0 rgba(34, 36, 38, 0.1), 0 4px 20px 0 rgba(34, 36, 38, 0.25);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 0;
}
#get-started .subtitle {
  font-size: 1.3rem;
  margin-bottom: 2rem;
}
#get-started img {
  border-radius: 0px;
}
#get-started #tutorial-cta {
  position: absolute;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  width: 100%;
  margin-top: 1rem;
  font-weight: 500;
}
#get-started .get-started-link {
  text-decoration: underline;
  color: rgba(0, 0, 0, 0.6);
}
#get-started .get-started-link:hover {
  text-decoration: underline;
  color: rgba(0, 0, 0, 0.8);
}
#get-started .large.text {
  font-size: 1.3rem;
}
#get-started .button {
  font-weight: normal;
  box-shadow: -2px 2px 4px 0 rgba(34, 36, 38, 0.1);
  -webkit-box-shadow: -2px 2px 4px 0 rgba(34, 36, 38, 0.1);
  -moz-box-shadow: -2px 2px 4px 0 rgba(34, 36, 38, 0.1);
  border-radius: var(--roundness);
}
#get-started #video-modal-trigger {
  position: relative;
}
#get-started #video-modal-trigger img {
  width: 100%;
  cursor: pointer;
}
#get-started #video-modal-trigger .play_button {
  position: absolute;
  width: 15%;
  max-width: 100px;
  cursor: pointer;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  transition: transform 0.2s ease-in-out;
  border-radius: 50%;
}
#get-started #video-modal-trigger:hover .play_button {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  transform: scale(1.1) translate(-45%, -45%);
}
@media only screen and (max-width: 767px) {
  #get-started {
    margin-top: -225px;
    padding: 5rem 0 1rem;
  }
}
#how-it-works-segment {
  padding: calc(5vh + 6rem) 0;
  background: var(--medium-bg);
  z-index: 2;
  clip-path: polygon(0 0, 100% 5vh, 100% 100%, 0 calc(100% - 5vh));
  -webkit-clip-path: polygon(0 0, 100% 5vh, 100% 100%, 0 calc(100% - 5vh));
  margin-top: 2px;
}
#how-it-works-segment h2 a {
  color: var(--white);
  font-weight: 900;
}
#how-it-works-segment p {
  line-height: 1.7;
}
#how-it-works-segment .main.header {
  margin-bottom: 5rem;
}
#how-it-works-segment h2.header {
  margin-bottom: 2rem;
}
#how-it-works-segment a {
  font-weight: bold;
  color: #78d8fc;
}
#how-it-works-segment .step-img {
  width: 100px;
  margin: 0 0 3rem;
}
#dagshub-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid teal;
  border-radius: var(--roundness);
  margin-bottom: 4rem;
  padding: 2rem 0 1rem;
  max-width: 500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#dagshub-visual #dagshub-logo {
  position: absolute;
  top: -3rem;
  background: var(--homepage-non-white-section);
}
#dagshub-visual img {
  padding: 0 1rem;
}
#dagshub-visual i.icon {
  height: auto;
}
@media only screen and (max-width: 767px) {
  #how-it-works-segment {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  #how-it-works-segment #questions.grid .column:not(:last-child) {
    margin-bottom: 1rem !important;
  }
  #how-it-works-segment .column {
    display: flex !important;
  }
  #how-it-works-segment .step-img {
    width: 64px;
    margin-right: 2rem;
  }
  #how-it-works-segment h2.header {
    margin-bottom: 0.5rem;
  }
  #how-it-works-segment .number.symbol {
    display: none;
  }
}
@media only screen and (max-width: 500px) {
  #how-it-works-segment {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  #dagshub-visual img {
    padding: 0 0.5rem;
  }
  #dagshub-visual #git {
    height: 30px;
    width: 100px;
  }
  #dagshub-visual #dvc {
    height: 45px;
    width: 60px;
  }
  #dagshub-visual #mlflow {
    height: 50px;
    width: 95px;
  }
}
#principles {
  z-index: 3;
  background: var(--bright-bg);
  margin-top: -100rem;
  padding-top: calc(93rem + 20px);
  padding-bottom: 6rem;
}
#principles .ui.header.subtitle {
  margin-bottom: 0;
}
#principles .middle-segment img {
  object-fit: cover;
  width: 100%;
  border: 1px solid #eee;
  border-radius: var(--roundness);
  background: #fff;
}
#principles.ui.segment {
  color: var(--text-color-bright);
}
#principles h4 {
  margin-top: 3px;
}
#principles h5 {
  font-size: 1.5rem;
  margin: 7px 0;
}
#principles p,
#principles p code {
  font-size: 1.3rem;
  font-weight: 400;
}
#principles .ui.segment ul {
  padding-left: 20px;
}
#principles .ui.segment ul li {
  font-size: 1.3rem;
  padding: 8px 0;
}
#principles .principle-detail.sub-segment {
  font-size: 1.2rem;
  font-weight: 400;
}
#principles .principle-link {
  font-size: 1.3rem;
  font-weight: bold;
}
#principles img {
  object-fit: cover;
  width: 100%;
  border: 1px solid #eee;
  border-radius: var(--roundness);
  background: #f6f8f8;
  -webkit-box-shadow: 3px 3px 3px 0 rgba(214, 214, 214, 0.2), 0 0 0 1px rgba(214, 214, 214, 0.05);
  box-shadow: 3px 3px 3px 0 rgba(214, 214, 214, 0.2), 0 0 0 1px rgba(214, 214, 214, 0.05);
}
#principles .next-prev-buttons {
  display: none;
}
#principles .next-prev-buttons .icon {
  position: absolute;
  top: 45%;
  color: var(--text-color-dark-faded);
}
#principles .next-prev-buttons .icon:hover {
  color: var(--text-color-dark);
}
#principles .next-prev-buttons .icon.left {
  left: 0;
}
#principles .next-prev-buttons .icon.right {
  right: 0;
}
#principles .principle-description {
  margin-bottom: 0;
  width: 100%;
  color: var(--text-color-bright);
}
#principles #mobile-principle-container {
  display: none;
}
#principle-container .center.aligned.image {
  overflow: hidden;
}
#principle-container .center.aligned.image > img {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  #principles .middle-segment {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #principles .ui.header {
    font-weight: 900;
  }
  #principles .subtitle.header {
    font-size: 1.2rem;
  }
  #principles p,
  #principles p code {
    font-size: 1.1rem;
  }
  #principles .ui.segment ul li {
    font-size: 1.1rem;
    padding: 4px 0;
  }
  #principles .principle-link {
    font-size: 1rem;
  }
}
#proof-segment {
  z-index: 4;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}
#proof-segment .row {
  padding-top: 0;
}
#proof-segment .column {
  padding-bottom: 15px;
}
#proof-segment p.large.text {
  margin-bottom: 40px;
  font-weight: normal;
}
#proof-segment .container {
  border-bottom: 1px solid #d7d7d7;
}
#proof-segment img {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
#proof-segment .column:hover img {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
  -webkit-transform: scale(1.1);
}
#proof-segment #any-other-tool {
  margin-top: 1em;
  font-weight: 600;
  font-size: 1.75em;
  line-height: 1.2;
}
#proof-segment .ui.center.aligned.relaxed.equal.width.grid {
  margin: 0;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  #proof-segment h1 .underline-animation {
    font-size: 1.75rem;
    padding: 0;
  }
  #proof-segment h2.ui.header {
    font-size: 1.4rem;
  }
  #proof-segment #any-other-tool {
    font-size: 1.4rem;
  }
  #proof-segment .column img {
    max-width: 100%;
  }
}
/* Transitions & Emphasis */
.transition-up {
  visibility: hidden;
}
#supported-tools-segment {
  z-index: 1;
  background: var(--bright-bg);
  margin-top: -100rem;
  padding: calc(100rem + 6rem) 0 200px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vh), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vh), 0 100%);
}
#supported-tools-segment .row {
  padding-top: 0;
}
#supported-tools-segment .column {
  padding-bottom: 15px;
}
#supported-tools-segment .ui.header.subtitle {
  margin-top: -10px;
  font-weight: normal;
}
#supported-tools-segment .home-page-tooltip[data-tooltip]:after {
  background: var(--medium-bg);
  color: var(--text-color-dark);
  border: var(--dark-bg);
  padding: 0.333em 1em;
}
#supported-tools-segment .home-page-tooltip[data-tooltip]:before {
  background: var(--medium-bg);
  -webkit-box-shadow: 1px 1px 0 0 var(--dark-bg);
  box-shadow: 1px 1px 0 0 var(--dark-bg);
}
#supported-tools-segment img {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
#supported-tools-segment .column:hover img {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
  -webkit-transform: scale(1.1);
}
#supported-tools-segment #any-other-tool {
  margin-top: 1em;
  font-weight: 600;
  font-size: 1.75em;
  line-height: 1.2;
}
#supported-tools-segment .ui.center.aligned.relaxed.equal.width.grid {
  margin: 0;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  #supported-tools-segment h1 .underline-animation {
    font-size: 1.75rem;
    padding: 0;
  }
  #supported-tools-segment h2.ui.header {
    font-size: 1.4rem;
  }
  #supported-tools-segment #any-other-tool {
    font-size: 1.4rem;
  }
  #supported-tools-segment .column img {
    max-width: 100%;
  }
}
.faux-h2 {
  font-size: 1.71428571rem !important;
}
.faux-h3 {
  font-size: 1.28571429rem !important;
}
@media only screen and (max-width: 767px) {
  #get-started .large.text {
    line-height: 2;
  }
}