* {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-sans);
  font-weight: 300;
}

h2 {
  font-weight: 500;
  position: sticky;
  top: 1rem;
}

:root {
  --padding: 1.5rem;
  --color-black: #000;
  --color-white: #fff;
  --color-grey: #777;
  --color-light: #ded6d3;
  --color-green: #718878;


  --font-family-sans: "Jost", sans-serif;
 /* --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;*/
}

/*
Z:\web\site\templates\default.php
*/

section {
  display: flex;
  flex-flow: column nowrap;
  padding: 5vh .5rem;

  @media only screen and (min-width: 600px) {
    flex-flow: row nowrap;
    padding: 5vh 1rem;
  }

  @media only screen and (min-width: 900px) {
    padding: 5vh 7.5vh;
  }

  @media only screen and (min-width: 1200px) {
    padding: 5vh 15vh;
  }

  @media only screen and (min-width: 1400px) {
    padding: 5vh 17.5vh;
  }
}

.column {
  width: 100%;
  width: calc(100% - 1rem);
  padding: .5rem;
}

.column__3 {
  @media only screen and (min-width: 600px) {
    width: 25%;
  }
}

.column__4 {
  @media only screen and (min-width: 600px) {
    width: 33.333%;
  }
}

.column__6 {
  @media only screen and (min-width: 600px) {
    width: 50%;
  }
}

.column__8 {
  @media only screen and (min-width: 600px) {
    width: 66.666%;
  }
}

.column__12 {
  @media only screen and (min-width: 600px) {
    width: 100%;
  }
}

/*
site\blueprints\blocks\cv.yml
site\snippets\blocks\cv.php
*/
.jobs {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}

.jobs__item {
  display: flex;
  flex-flow: column nowrap;
  padding: .5rem;
  width: 100%;

  @media only screen and (min-width: 600px) {
    flex-flow: row nowrap;
  }
}

.jobs__item__time {
  p {
    font-weight: 700;
  }

  @media only screen and (min-width: 600px) {
    width: 5rem;
  }
    @media only screen and (min-width: 1200px) {
    width: 10rem;
  }
}

.jobs__item__content {
  display: flex;
  flex-flow: column nowrap;

  @media only screen and (min-width: 600px) {
    width: calc(100% - 5rem);
    padding-left: .5rem;
  }

  @media only screen and (min-width: 1200px) {
    width: calc(100% - 10rem);
    padding-left: 1.5rem;
  }
}

.jobs__item__content__position {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}

/*
site\blueprints\blocks\skill.yml
site\snippets\blocks\skill.php
*/
.skills {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}

.skills__item {
  display: flex;
  flex-flow: column nowrap;
  padding: .5rem;
  width: 100%;

  @media only screen and (min-width: 600px) {
    flex-flow: row nowrap;
  }

}

.skills__item__title {
  font-weight: 500;

  @media only screen and (min-width: 600px) {
    width: 5rem;
  }
    @media only screen and (min-width: 1200px) {
    width: 10rem;
  }
}

.skills__item__width {
  width: 100%;
  padding: .5rem 0;
  position: relative;

  @media only screen and (min-width: 600px) {
    width: calc(100% - 5rem);
    padding-left: .5rem;
  }

  @media only screen and (min-width: 1200px) {
    width: calc(100% - 10rem);
    padding-left: 1.5rem;
  }
}

.skills__item__width::before {
  content: '';
  position: absolute;
  transform: translateY(50%);
  top: .65rem;
  width: calc(100% - .5rem);
  height: .0125rem;
  background: var(--color-light);
  z-index: -11;

  @media only screen and (min-width: 1200px) {
    width: calc(100% - 2.5rem);

  }
}

.skills__item__width--5, .skills__item__width--10, .skills__item__width--15, .skills__item__width--20, .skills__item__width--25, .skills__item__width--30, .skills__item__width--35, .skills__item__width--40, .skills__item__width--45, .skills__item__width--50, .skills__item__width--55, .skills__item__width--60, .skills__item__width--65, .skills__item__width--70, .skills__item__width--75, .skills__item__width--80, .skills__item__width--85, .skills__item__width--90, .skills__item__width--95, .skills__item__width--100 {
  height: .25rem;
  background:  var(--color-green);
  z-index: 1;
}
.skills__item__width--5 {
  width: 5%;
}

.skills__item__width--10 {
  width: 10%;
}
.skills__item__width--15 {
  width: 15%;
}

.skills__item__width--20 {
  width: 20%;
}

.skills__item__width--25 {
  width: 25%;
}

.skills__item__width--30 {
  width: 30%;
}

.skills__item__width--35 {
  width: 35%;
}

.skills__item__width--40 {
  width: 40%;
}

.skills__item__width--45 {
  width: 45%;
}

.skills__item__width--50 {
  width: 50%;
}

.skills__item__width--55 {
  width: 55%;
}

.skills__item__width--60 {
  width: 60%;
}

.skills__item__width--65 {
  width: 65%;
}

.skills__item__width--70 {
  width: 70%;
}

.skills__item__width--75 {
  width: 75%;
}

.skills__item__width--80 {
  width: 80%;
}

.skills__item__width--85 {
  width: 85%;
}

.skills__item__width--90 {
  width: 90%;
}

.skills__item__width--95 {
  width: 95%;
}

.skills__item__width--100 {
  width: 100%;
}