:root {
  --border: 3px;
  --color1: #6be89b;
  --color2: #0076a5;
  --from: 30deg;
  --distance: 46%; }

/*:root {
    --color-white-100: hsl(206, 5%, 98%);
    --color-white-200: hsl(206, 5%, 90%);
    --color-white-300: hsl(206, 5%, 80%);
    --color-white-400: hsl(206, 5%, 65%);
    --color-white-500: hsl(206, 5%, 50%);
    --color-white-600: hsl(206, 5%, 35%);
 
    --color-black-100: hsl(213, 20%, 9%);
    --color-black-200: hsl(213, 23%, 8%);
    --color-black-300: hsl(214, 21%, 6%);
    --color-black-400: hsl(210, 21%, 6%);
    --color-black-500: hsl(216, 22%, 4%);
    --color-black-600: hsl(220, 18%, 3%);
    --color-black-700: hsl(220, 27%, 2%);
    --color-black-800: hsl(180, 20%, 1%);
 
    --color-blue-100: hsl(214, 95%, 93%);
    --color-blue-200: hsl(213, 97%, 87%);
    --color-blue-300: hsl(212, 96%, 78%);
    --color-blue-400: hsl(213, 94%, 68%);
    --color-blue-500: hsl(217, 91%, 60%);
    --color-blue-600: hsl(221, 83%, 53%);
    --color-blue-700: hsl(224, 76%, 48%);
    --color-blue-800: hsl(226, 71%, 40%);
    --color-blue-900: hsl(224, 64%, 33%);
 
    --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
       0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
       0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
       0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; }

html {
  font-size: 62.5%; }

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  box-sizing: border-box;
  font-size: 1.6rem; }

.card {
  --card-gradient: rgba(0, 0, 0, 0.8);
  --card-gradient: #223C78, #56C5D0;
  --card-blend-mode: overlay;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0.05rem 0.1rem 0.3rem -0.03rem rgba(0, 0, 0, 0.45);
  padding-bottom: 1rem;
  background-image: linear-gradient(var(--card-gradient), white calc(max(9.5rem, 27vh)));
  overflow: hidden; }
  .card__wrapper {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
    grid-gap: 1.5rem;
    max-width: 100vw;
    width: 120ch;
    padding-left: 1rem;
    padding-right: 1rem; }
  .card__link {
    font-size: 2rem;
    font-weight: 400;
    /* normal */ }
  .card__container {
    margin: 5rem;
    display: flex;
    justify-content: center; }
  .card img {
    border-radius: 0.5rem 0.5rem 0 0;
    width: 100%;
    object-fit: cover;
    max-height: calc(max(10rem, 30vh));
    aspect-ratio: 4/3;
    mix-blend-mode: var(--card-blend-mode); }
    .card img ~ * {
      margin-left: 1rem;
      margin-right: 1rem; }
  .card > :last-child {
    margin-bottom: 0; }
  .card:hover, .card:focus-within {
    --card-gradient: #24a9d5 calc(max(8.5rem, 20vh)); }
  .card > h3 {
    margin-top: 1rem;
    font-size: 1.25rem; }
  .card > a {
    color: inherit; }

.header {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10rem;
  z-index: 10;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/123024/menutexture.png);
  background-position: center top;
  background-size: auto 200px;
  background-repeat: repeat-x;
  background-color: #56C5D0;
  /*
	.logo {
		display: block;
		width: 76px;
		height: 90px;
		position: absolute;
		top: 0;
		left: 0;
		background-color: white;
		text-align: center;

		img {
			width: 45px;
			margin-top: 10px;
		}
	}
   */ }
  .header__navbar {
    max-width: 1060px;
    margin: 0 auto;
    display: flex;
    height: 70px;
    align-items: center;
    justify-content: center;
    position: relative; }

label .menu {
  position: absolute;
  right: -100px;
  top: -100px;
  z-index: 100;
  width: 200px;
  height: 200px;
  background: #FFF;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;
  display: none;
  visibility: hidden; }
  @media screen and (max-width: 800px) {
    label .menu {
      display: block;
      visibility: visible; } }

label .hamburger {
  position: absolute;
  top: 135px;
  left: 50px;
  width: 30px;
  height: 2px;
  background: #69D2e7;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out; }

label .hamburger:after, label .hamburger:before {
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #69d2e7; }

label .hamburger:before {
  top: -10px; }

label .hamburger:after {
  bottom: -10px; }

label input {
  display: none; }

label input:checked + .menu {
  box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;
  border-radius: 0; }

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); }

label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0; }

label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0; }

label input:checked + .menu + ul {
  opacity: 1; }

label ul {
  z-index: 200;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: .25s 0s ease-in-out;
  transition: .25s 0s ease-in-out; }

label a {
  margin-bottom: 1em;
  display: block;
  color: #00aabb;
  text-decoration: none; }

.navbar {
  display: none; }
  .navbar__link {
    font-family: 'Arial', serif;
    font-size: 1.5rem;
    color: #8c8c8e;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-decoration: none;
    margin: 0 18px; }
    .navbar__link.active, .navbar__link:hover {
      color: white; }
  @media screen and (min-width: 800px) {
    .navbar {
      display: block; } }

.footer {
  background-color: #00aabb; }
  .footer__container {
    height: 3.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem; }
  .footer__text {
    text-align: center;
    font-size: 1.5rem; }
  .footer__link {
    color: #FFFFFF; }

.profile {
  margin-top: 10rem;
  display: flex;
  flex-direction: column;
  padding: 1rem; }
  .profile__title {
    text-align: center;
    padding: 2rem; }
  .profile__name {
    margin-top: 2rem; }
  .profile__content {
    display: flex;
    justify-content: space-evenly;
    align-items: center; }
    @media (max-width: 75rem) {
      .profile__content {
        flex-direction: column; } }
    @media (max-width: 75rem) {
      .profile__content > * {
        margin-top: 1.5rem; } }
  .profile__left {
    width: 38rem;
    text-align: center; }
  .profile__right {
    width: 60rem; }
    @media (max-width: 75rem) {
      .profile__right {
        width: 100%; } }
  .profile__photo {
    /*width: 1rem;
        background-image: url('/img/carlos2.jpg');
        width: 100%;
        height: 20rem;
        background-size: contain;
        background-repeat: no-repeat;
        
        */
    position: relative;
    padding: 3rem; }
    .profile__photo:after {
      content: '';
      border-radius: 99rem;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: conic-gradient(from var(--from), var(--color1), var(--color2) var(--distance), transparent var(--distance));
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--border)), #fff calc(100% - var(--border) + 1px));
      mask: radial-gradient(farthest-side, transparent calc(100% - var(--border)), #fff calc(100% - var(--border) + 1px)); }
    .profile__photo > img {
      border-radius: 99rem;
      display: block;
      max-width: 100%;
      height: 30rem;
      margin: 0 auto; }

.ds {
  display: flex;
  flex-direction: column;
  padding: 2rem; }
  .ds__title {
    text-decoration: underline;
    text-align: center;
    font-size: 2rem; }
  .ds__text > p {
    font-weight: bold; }
  .ds__li {
    list-style-type: circle;
    list-style-position: inside; }
  .ds > * {
    margin: 1rem; }
  .ds__download {
    text-align: center; }

.box {
  margin-top: 5rem;
  padding: 2rem;
  background-image: linear-gradient(to right bottom, #56C5D0, #1268B3); }
  .box__subtitle {
    font-size: 2rem; }
  .box__title {
    font-size: 2rem;
    text-align: center;
    margin: 2rem; }
  .box__item {
    display: flex;
    align-items: center; }
    .box__item > * {
      margin: 2rem; }
    @media screen and (max-width: 65rem) {
      .box__item {
        flex-direction: column; } }
  .box__description {
    flex: 3; }
  .box__wrapper {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
    grid-gap: 1.5rem;
    max-width: 100vw;
    width: 120ch;
    padding-left: 1rem;
    padding-right: 1rem; }
  .box > :last-child {
    margin-bottom: 0; }
  .box__img {
    flex: 1;
    --card-gradient: rgba(0, 0, 0, 0.8);
    --card-gradient: #223C78, #56C5D0;
    --card-blend-mode: overlay;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0.05rem 0.1rem 0.3rem -0.03rem rgba(0, 0, 0, 0.45);
    padding-bottom: 1rem;
    background-image: linear-gradient(var(--card-gradient), white calc(max(9.5rem, 27vh)));
    overflow: hidden; }
    .box__img img {
      border-radius: 0.5rem 0.5rem 0 0;
      width: 100%;
      object-fit: cover;
      max-height: calc(max(10rem, 30vh));
      aspect-ratio: 4/3;
      mix-blend-mode: var(--card-blend-mode); }
      .box__img img ~ * {
        margin-left: 1rem;
        margin-right: 1rem; }
    @media screen and (max-width: 65rem) {
      .box__img {
        flex: none; } }

button {
  --c:  #56C5D0;
  /* the color*/
  font-family: system-ui, sans-serif;
  font-size: 3.5rem;
  cursor: pointer;
  padding: .1em .6em;
  font-weight: bold;
  border: none;
  box-shadow: 0 0 0 0.1em inset var(--c);
  --_g: linear-gradient(var(--c) 0 0) no-repeat;
  background: var(--_g) calc(var(--_p,0%) - 100%) 0%, var(--_g) calc(200% - var(--_p,0%)) 0%, var(--_g) calc(var(--_p,0%) - 100%) 100%, var(--_g) calc(200% - var(--_p,0%)) 100%;
  background-size: 50.5% calc(var(--_p,0%)/2 + .5%);
  outline-offset: .1em;
  transition: background-size .4s, background-position 0s .4s; }
  button:hover {
    --_p: 100%;
    transition: background-position .4s, background-size 0s; }
  button:active {
    box-shadow: 0 0 9e9q inset #0009;
    background-color: var(--c);
    color: #fff; }

.layout {
  margin-top: 20rem; }

.section-main {
  position: relative;
  padding: 20rem 0; }
  @media only screen and (max-width: 56.25em) {
    .section-main {
      padding: 15rem 0; } }
  @media only screen and (max-width: 56.25em) {
    .section-main__title {
      font-size: 2.5rem !important; } }

.section-mentors {
  padding: 10rem 5rem;
  background-color: #00aabb; }
  .section-mentors__title {
    text-align: center; }
  @media only screen and (max-width: 37.5em) {
    .section-mentors {
      padding: 10rem 0rem; } }

.section-outline {
  padding: 10rem 5rem; }
  .section-outline--box {
    color: white;
    display: flex;
    justify-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding: 5rem; }

.section-introduction {
  padding: 10rem 5rem;
  background-color: #00aabb;
  display: flex;
  justify-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  color: white; }
  @media only screen and (max-width: 37.5em) {
    .section-introduction {
      padding: 10rem 1rem; } }
  .section-introduction__text > * {
    padding: 1rem; }
  @media only screen and (max-width: 62.5em) {
    .section-introduction__img > img {
      width: 100%; } }

.section-motivation {
  padding: 10rem 5rem;
  display: flex;
  justify-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center; }
  @media only screen and (max-width: 37.5em) {
    .section-motivation {
      padding: 10rem 2rem; } }
  .section-motivation__img {
    padding: 4rem 0rem; }
  .section-motivation__list > ul > li {
    padding: 1rem; }

.section-goal {
  padding: 10rem 5rem;
  background-color: #00aabb;
  display: flex;
  justify-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center; }
  @media only screen and (max-width: 62.5em) {
    .section-goal__img > img {
      width: 100%; } }
  .section-goal__list > ul > li {
    padding: 1rem; }

.section-approach {
  padding: 10rem 5rem;
  display: flex;
  justify-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center; }
  @media only screen and (max-width: 37.5em) {
    .section-approach {
      padding: 10rem 1rem; } }
  .section-approach__img > img {
    padding: 4rem 0rem; }
    @media only screen and (max-width: 62.5em) {
      .section-approach__img > img {
        width: 100%; } }
  .section-approach__text > * {
    padding: 1rem; }

.section-results {
  padding: 10rem 5rem;
  background-color: #00aabb;
  display: flex;
  justify-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center; }
  .section-results-page {
    padding: 10rem 5rem; }
  .section-results__img {
    padding: 4rem 0rem; }
  .section-results__text > ul > li {
    padding: 1rem; }

.section-references {
  background-color: #00aabb;
  color: white;
  padding: 10rem 5rem;
  display: flex;
  justify-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center; }
  .section-references__img {
    padding: 4rem 0rem; }
  .section-references__text > ul > li {
    padding: 1rem; }

.section-dataset {
  padding: 10rem 5rem;
  display: flex;
  justify-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center; }
  @media only screen and (max-width: 37.5em) {
    .section-dataset {
      padding: 10rem 1rem; } }
  .section-dataset__img > img {
    padding: 4rem 0rem; }
    @media only screen and (max-width: 62.5em) {
      .section-dataset__img > img {
        width: 100%; } }
  .section-dataset__text > ul > li {
    padding: 1rem; }

.section-preprocessing {
  padding: 10rem 5rem;
  display: flex;
  justify-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  background-color: #00aabb;
  color: white; }
  @media only screen and (max-width: 37.5em) {
    .section-preprocessing {
      padding: 10rem 1rem; } }
  .section-preprocessing__img > img {
    padding: 4rem 0rem; }
    @media only screen and (max-width: 62.5em) {
      .section-preprocessing__img > img {
        width: 100%; } }
  .section-preprocessing__text > ul > li {
    padding: 1rem; }

.section-labeling {
  padding: 10rem 5rem;
  display: flex;
  justify-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center; }
  @media only screen and (max-width: 37.5em) {
    .section-labeling {
      padding: 10rem 1rem; } }
  .section-labeling__img > img {
    padding: 4rem 0rem;
    width: 60rem; }
    @media only screen and (max-width: 62.5em) {
      .section-labeling__img > img {
        width: 100%; } }
  .section-labeling__text > ul > li {
    padding: 1rem; }
  .section-labeling__models {
    display: flex;
    align-items: end;
    justify-content: center; }
    @media only screen and (max-width: 50em) {
      .section-labeling__models {
        flex-direction: column; } }
    .section-labeling__models > * {
      margin: 1rem; }

.section-system {
  padding: 10rem 5rem;
  display: flex;
  justify-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  background-color: #00aabb;
  color: white; }
  @media only screen and (max-width: 37.5em) {
    .section-system {
      padding: 10rem 1rem; } }
  .section-system__img {
    padding: 4rem 0rem; }
  .section-system__text > * {
    padding: 1rem; }

.section-models {
  padding: 10rem 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }
  @media only screen and (max-width: 37.5em) {
    .section-models {
      padding: 10rem 0.5rem; } }
  .section-models__img > img {
    padding: 4rem 0rem; }
    @media only screen and (max-width: 62.5em) {
      .section-models__img > img {
        width: 100% !important; } }

.row {
  max-width: 114rem;
  margin: 0 auto; }

.row:not(:last-child) {
  margin-bottom: 8rem; }

.story {
  width: 65%;
  margin: 0 auto;
  box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
  background-color: #00aabb;
  border-radius: 3px;
  padding: 6rem;
  padding-left: 9rem;
  font-size: 1.6rem;
  transform: skewX(-12deg);
  height: 22rem;
  color: white; }
  @media only screen and (max-width: 52.875em) {
    .story {
      height: auto; } }
  @media only screen and (max-width: 38.125em) {
    .story {
      transform: none;
      width: 85%;
      padding-left: 0;
      padding: 6rem 2rem; } }
  .story__shape {
    width: 13rem;
    height: 13rem;
    float: left;
    transform: translateX(-3rem) skewX(12deg);
    position: relative;
    overflow: hidden;
    border-radius: 50%; }
    @media only screen and (max-width: 52.875em) {
      .story__shape {
        float: none; } }
    @media only screen and (max-width: 38.125em) {
      .story__shape {
        transform: none;
        margin: 0 auto; } }
  .story__text {
    transform: skewX(12deg); }
    @media only screen and (max-width: 38.125em) {
      .story__text {
        transform: none; } }
  .story__img {
    height: 100%;
    backface-visibility: hidden;
    transition: all 0.5s; }
  .story__caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20%);
    color: #fff;
    text-transform: uppercase;
    font-size: 1.7rem;
    text-align: center;
    opacity: 0;
    transition: all 0.5s;
    backface-visibility: hidden; }

.u-margin-bottom-big {
  margin-bottom: 8rem !important; }

.u-center-text {
  text-align: center !important; }

.u-margin-bottom-small {
  margin-bottom: 1.5rem !important; }

.heading-tertiary {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase; }

.heading-secondary {
  font-size: 3.5rem;
  text-transform: uppercase;
  font-weight: 700;
  background-image: linear-gradient(to right, #00aabb, #0076a5);
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: 0.2rem;
  transition: all 0.2s; }

.heading-secondary2 {
  font-size: 3.5rem;
  text-transform: uppercase;
  font-weight: 700;
  background-image: linear-gradient(to right, white, white);
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: 0.2rem;
  transition: all 0.2s; }