/*

- add loader or something (maybe blur background... and loader... dunno)
- show a message for IE users
- For tags, make shadow on text instead of copying the text.

*/
@import url(sources/fonts/fonts.css);
:root {
  --fontsize-xxl:150px;
  --fontsize-xl:100px;
  --fontsize-l:50px;
  --fontsize-m:30px;
  --fontsize-s:16px;
  --fontsize-xs:14px;
  --iconsize-l:30px;
  --iconsize-s:20px; }

@keyframes rainbow {
  0% {
    filter: hue-rotate(0deg); }
  100% {
    filter: hue-rotate(360deg); } }
/* --- COMMON STYLES --- */
/* Is not supported by IE */
.fixed-overflow {
  position: relative; }
  .fixed-overflow > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip: rect(0, auto, auto, 0); }
    .fixed-overflow > * > * {
      position: fixed; }

.teaser {
  position: relative;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  font-size: var(--fontsize-s);
  height: 25vw;
  width: 25%;
  background-color: #222222;
  text-align: center; }
  .teaser > .default,
  .teaser > .teaser-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
  .teaser > .default {
    pointer-events: none;
    background-color: #000000;
    transition: opacity .4s, transform .4s;
    opacity: 1;
    transform: scale(1.01); }
    .teaser > .default .teaser-img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-position: center;
      background-size: cover;
      opacity: .5;
      filter: grayscale(80%); }
    .teaser > .default .teaser-hover {
      position: relative; }
    .teaser > .default .teaser-logo {
      position: absolute;
      height: 120px;
      width: 240px;
      max-width: 90%;
      max-height: 90%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: opacity .4s;
      opacity: 1; }
    .teaser > .default .teaser-title {
      position: absolute;
      left: 0;
      bottom: 0;
      padding: 30px;
      color: #FFFFFF;
      font-family: 'Slabo', serif;
      font-size: var(--fontsize-m); }
  .teaser > .hover {
    max-height: 100%;
    overflow: auto;
    padding: 30px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity .4s; }
    .teaser > .hover .teaser-logo {
      display: block;
      width: 140px;
      height: 70px;
      max-width: 80%;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center bottom;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 10px; }
  .teaser:hover .default, .teaser.active .default {
    opacity: .2;
    transform: scale(1.3); }
    .teaser:hover .default .teaser-logo, .teaser.active .default .teaser-logo {
      opacity: 0; }
  .teaser:hover .hover, .teaser.active .hover {
    opacity: 1; }

.filler.filler_rainbow .hover {
  z-index: 1;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  padding: 0;
  overflow: hidden;
  transform: none; }
  .filler.filler_rainbow .hover:before {
    content: "";
    top: 50%;
    left: 50%;
    width: 130px;
    height: 130px;
    border-radius: 100%;
    transform-origin: left top;
    background: linear-gradient(217deg, #ff3434, rgba(255, 52, 52, 0) 80%), linear-gradient(127deg, #34ff34, rgba(52, 255, 52, 0) 80%), linear-gradient(336deg, #3434ff, rgba(52, 52, 255, 0) 80%), linear-gradient(0deg, white, white 0%);
    position: absolute;
    animation-name: rainbow_bg;
    animation-iteration-count: infinite;
    animation-duration: 5s;
    animation-timing-function: linear; }
.filler.filler_rainbow img {
  position: relative;
  display: block;
  width: 100px;
  margin: -1px;
  border: calc(100vw + 100vh) solid #222222;
  box-sizing: content-box;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }
@keyframes rainbow_bg {
  0% {
    transform: rotate(0deg) translate(-50%, -50%); }
  100% {
    transform: rotate(360deg) translate(-50%, -50%); } }
.filler.filler_words {
  font-size: var(--fontsize-m);
  background-color: #3467ce; }
  .filler.filler_words ul {
    pointer-events: none;
    position: absolute;
    top: -10px;
    left: -50px;
    right: -50px;
    bottom: -10px;
    line-height: 0.7em; }
  .filler.filler_words li {
    font-size: 20px;
    display: inline-block;
    margin: 0px 2px;
    vertical-align: middle;
    line-height: 0.0em;
    animation-name: text-fade;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* It's starting to be a lot... */ }
    .filler.filler_words li:nth-child(5n+1) {
      font-family: 'Slabo', serif; }
    .filler.filler_words li:nth-child(5n+2) {
      font-family: 'Magnum','Brush Script MT','Courier',sans-serif; }
    .filler.filler_words li:nth-child(5n+4) {
      font-family: 'Arial','sans-serif';
      font-weight: 900;
      letter-spacing: -0.2em; }
    .filler.filler_words li:nth-child(4n+1) {
      font-size: 22px; }
    .filler.filler_words li:nth-child(4n+2) {
      font-size: 24px; }
    .filler.filler_words li:nth-child(4n+3) {
      font-size: 21px; }
    .filler.filler_words li:nth-child(4n+4) {
      font-size: 19px; }
    .filler.filler_words li:nth-child(20n+20) {
      animation-delay: -0.5s; }
    .filler.filler_words li:nth-child(20n+19) {
      animation-delay: -1s; }
    .filler.filler_words li:nth-child(20n+18) {
      animation-delay: -1.5s; }
    .filler.filler_words li:nth-child(20n+17) {
      animation-delay: -2s; }
    .filler.filler_words li:nth-child(20n+16) {
      animation-delay: -2.5s; }
    .filler.filler_words li:nth-child(20n+15) {
      animation-delay: -3s; }
    .filler.filler_words li:nth-child(20n+14) {
      animation-delay: -3.5s; }
    .filler.filler_words li:nth-child(20n+13) {
      animation-delay: -4s; }
    .filler.filler_words li:nth-child(20n+12) {
      animation-delay: -4.5s; }
    .filler.filler_words li:nth-child(20n+11) {
      animation-delay: -5s; }
    .filler.filler_words li:nth-child(20n+10) {
      animation-delay: -5.5s; }
    .filler.filler_words li:nth-child(20n+9) {
      animation-delay: -6s; }
    .filler.filler_words li:nth-child(20n+8) {
      animation-delay: -6.5s; }
    .filler.filler_words li:nth-child(20n+7) {
      animation-delay: -7s; }
    .filler.filler_words li:nth-child(20n+6) {
      animation-delay: -7.5s; }
    .filler.filler_words li:nth-child(20n+5) {
      animation-delay: -8s; }
    .filler.filler_words li:nth-child(20n+4) {
      animation-delay: -8.5s; }
    .filler.filler_words li:nth-child(20n+3) {
      animation-delay: -9s; }
    .filler.filler_words li:nth-child(20n+2) {
      animation-delay: -9.5s; }
    .filler.filler_words li:nth-child(20n+1) {
      animation-delay: -10s; }
@keyframes text-fade {
  0% {
    opacity: .1; }
  18% {
    opacity: .03; }
  92% {
    opacity: .03; }
  100% {
    opacity: .1; } }
.filler.filler_quotes {
  position: relative;
  color: #FFFFFF;
  font-size: var(--fontsize-xs); }
  .filler.filler_quotes li {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    transition: opacity 2s;
    font-size: var(--fontsize-m);
    background-color: #3467ce; }
    .filler.filler_quotes li a {
      position: relative;
      display: inline-block;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-height: 100%;
      max-width: 100%;
      width: 100%;
      padding: 30px; }
      .filler.filler_quotes li a .quote {
        margin-bottom: 10px;
        margin-bottom: 10px;
        font-size: 1.4em; }
        .filler.filler_quotes li a .quote.large {
          font-size: 1em; }
        .filler.filler_quotes li a .quote.small {
          font-size: 2.2em; }
      .filler.filler_quotes li a .author {
        font-size: var(--fontsize-m);
        margin-top: 10px;
        font-family: 'Magnum','Brush Script MT','Courier',sans-serif;
        text-align: right; }
        .filler.filler_quotes li a .author > div {
          display: inline-block;
          width: 100%; }
    .filler.filler_quotes li:not(.current) {
      opacity: 0;
      pointer-events: none; }

.item .item-title {
  margin-bottom: 10px;
  font-size: var(--fontsize-m);
  font-family: 'Slabo', serif;
  display: inline-block; }

.socials {
  font-size: 0px;
  text-align: center; }

.social {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  padding: 5px; }
  .social.facebook {
    padding-left: 1px;
    padding-right: 3px; }
  .social.linkedin .symbol {
    padding-top: 0.1em;
    font-size: calc(var(--iconsize-s) + 1px); }
  .social .symbol {
    display: inline-block;
    font-size: var(--iconsize-s); }
  .social .label {
    position: absolute;
    left: 50%;
    top: 100%;
    padding: 5px 30px 30px 30px;
    font-size: var(--fontsize-xs);
    white-space: nowrap;
    margin-top: 5px;
    transform: translateX(-50%) translateY(-5px);
    pointer-events: none;
    opacity: 0; }
  .social:hover .label,
  .social .active .label {
    opacity: 1;
    margin-top: 0px;
    pointer-events: all;
    transform: translateX(-50%) translateY(0px);
    transition: opacity .4s, transform .4s; }

.job {
  width: 100%;
  height: 100%; }
  .job .teaser-title {
    font-size: var(--fontsize-l);
    font-family: 'Magnum','Brush Script MT','Courier',sans-serif; }
  .job .teaser-company {
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: var(--fontsize-m); }
  .job .teaser-subtitle {
    font-size: var(--fontsize-xs); }
  .job .hover {
    height: 100%;
    /* Check to possibly use something else than Brackets, Support is shit, can't even indent right, and I can scroll on middle click. Wtf. Subime doesn't like Sass. Maybe Atom? */ }
    .job .hover .top,
    .job .hover .bottom {
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;
      padding-top: 30px;
      padding-bottom: 30px; }
    .job .hover .top {
      top: 0; }
    .job .hover .middle {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      max-height: calc(100% - 200px);
      overflow: auto; }
    .job .hover .bottom {
      bottom: 0; }

/* Base */
* {
  box-sizing: border-box; }

html {
  background: #fff;
  scroll-behavior: smooth; }

html,
body {
  margin: auto; }

.color-x {
  /* The color-x needs to be applied to element locally, even if this class is applied. */
  animation-name: rainbow;
  animation-iteration-count: infinite;
  animation-duration: 500s;
  animation-timing-function: linear; }

body {
  background-color: #222222;
  color: #FFFFFF;
  font-family: 'Lato',sans-serif; }

h1, h2, h3, h4, h5, h6, p {
  margin: auto;
  font-size: inherit;
  font-weight: inherit; }

h1, h2, h3 {
  text-transform: lowercase; }

section:not(.intro):not(.me) h2:after,
.style-dot:after {
  content: "."; }

.style-anchor {
  transform: scale(0);
  opacity: 0;
  position: absolute;
  bottom: calc(50% + 50vh);
  left: 0px; }

p {
  margin-top: 15px;
  margin-bottom: 15px;
  letter-spacing: 0.08em;
  line-height: 1.65em; }
  p .focus {
    font-weight: bold; }

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none; }

a {
  text-decoration: inherit;
  color: inherit; }

.tag {
  display: inline-block;
  margin: 5px; }
  .tag > *, .tag > a:before {
    display: block;
    padding: 0.4285em 0.6428em;
    border: 1px solid #FFFFFF;
    font-size: var(--fontsize-xs);
    color: #FFFFFF;
    border-radius: 1000px;
    background-color: rgba(255, 255, 255, 0.01); }
  .tag.large > *, .tag.large > a:before {
    border-width: 2px;
    font-weight: bold;
    font-size: var(--fontsize-m); }
  .tag > a {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 0.4s, -webkit-box-shadow 0.4s, -moz-box-shadow 0.4s, box-shadow .4s; }
    .tag > a:before {
      content: attr(title);
      position: absolute;
      left: -1px;
      top: -1px;
      right: -1px;
      bottom: -1px;
      color: #000000;
      border-color: #000000;
      z-index: -1;
      transform: translate(0, 0);
      opacity: 0;
      filter: blur(50%);
      white-space: nowrap;
      transition: opacity .4s, transform .4s, filter .4s; }
    @media screen and (min-width: 1600px) {
      .tag > a:hover {
        transform: translate(4px, -4px); }
        .tag > a:hover:before {
          opacity: .55;
          transform: translate(-4px, 4px);
          filter: blur(0.06rem); } }
  .tag.focus > *, .tag.focus > a:before {
    background-color: white;
    font-weight: bold;
    /* TO DO : Text should be transparent, but I don't know how yet. Maybe clip? Dunno. Fallback with color-x if ever. Maybe a blend mode or something.*/
    color: #5580d6;
    animation-name: rainbow;
    animation-iteration-count: infinite;
    animation-duration: 500s;
    animation-timing-function: linear; }

section {
  position: relative;
  background-color: #222222; }
  section .section-title {
    font-family: 'Slabo', serif;
    font-size: var(--fontsize-xl);
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    line-height: 1em;
    text-shadow: -5px 5px 1px rgba(0, 0, 0, 0.25); }
  section .section-subtitle {
    font-family: 'Magnum','Brush Script MT','Courier',sans-serif;
    font-weight: 300; }
  section.intro {
    position: relative;
    padding: 100px 50px;
    min-height: 100vh;
    /* TO DO : Change that to a finger scroll for mobile/tablet */ }
    section.intro .intro-wrap {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      background-color: #5580d6; }
    section.intro .intro-ctn {
      width: 100%;
      padding: 30px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
    section.intro .section-title {
      font-size: var(--fontsize-xxl);
      text-shadow: -7px 8px 1px rgba(0, 0, 0, 0.25);
    /*            &:before{
    content: "";
    background-image: url(sources/images/cavabienaller_3.png);
    height: 160px;
    width: 100px;
    display: block;
    background-size: contain;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
}*/ }
    section.intro .section-subtitle {
      font-size: var(--fontsize-l);
      text-shadow: -5px 5px 1px rgba(0, 0, 0, 0.25); }
    section.intro .mouse-scroll {
      position: absolute;
      top: calc(100% + 30px);
      left: 0px;
      right: 0px;
      animation-name: appear;
      animation-duration: 3s;
      animation-iteration-count: 1;
      opacity: 0.4; }
      section.intro .mouse-scroll .wrap {
        position: relative;
        display: inline-block;
        border-color: #FFFFFF; }
        section.intro .mouse-scroll .wrap, section.intro .mouse-scroll .wrap:after {
          height: 48px;
          width: 35px;
          border-width: 3px;
          border-style: solid;
          border-radius: 50px; }
        section.intro .mouse-scroll .wrap:after {
          position: absolute;
          z-index: -1;
          margin-left: -6px;
          margin-top: 5px;
          box-sizing: border-box;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          border-color: rgba(0, 0, 0, 0.25); }
        section.intro .mouse-scroll .wrap:before {
          content: "";
          position: absolute;
          width: 4px;
          height: 4px;
          border-radius: 4px;
          top: 13%;
          left: calc(50% - 2px);
          background-color: #FFFFFF;
          animation-name: wheel;
          animation-duration: 2s;
          animation-iteration-count: infinite;
          animation-timing-function: linear; }
@keyframes appear {
  0% {
    opacity: 0; }
  70% {
    opacity: 0; }
  100% {
    opacity: 0.4; } }
@keyframes wheel {
  0% {
    height: 0px; }
  20% {
    top: calc(13%);
    height: 0px;
    opacity: 0; }
  50% {
    height: 12px;
    top: calc(13%);
    opacity: 1; }
  80% {
    height: 0px;
    top: calc(13% + 12px);
    opacity: 0; }
  100% {
    height: 0px; } }
  section.projects {
    padding: 0; }
    section.projects .section-title {
      position: sticky;
      -webkit-position: sticky;
      z-index: 5;
      color: #FFFFFF;
      font-family: 'Magnum','Brush Script MT','Courier',sans-serif;
      font-size: var(--fontsize-xl);
      top: 0px;
      background-color: #5580d6;
      height: 66px;
      line-height: 105px; }
    section.projects .content > ul {
      font-size: 0; }
    @media screen and (max-width: 1600px) {
      section.projects .teaser {
        width: 33.33%;
        height: 33.33vw; } }
    @media screen and (max-width: 1200px) {
      section.projects .teaser {
        width: 50%;
        height: 50vw; } }
    @media screen and (max-width: 800px) {
      section.projects .teaser {
        width: 100%;
        height: 100vw;
        max-height: 400px; } }
@keyframes polybackAnim-1 {
  0% {
    background-position-x: 594px; }
  100% {
    background-position-x: 0px; } }
  section.me {
    position: relative;
    display: flex;
    background-color: #5580d6;
    font-size: 0px;
    padding: 100px 50px;
    text-align: center;
    min-height: 140vh;
    align-items: center; }
    section.me:before, section.me:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      animation-duration: 20s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      background-attachment: fixed; }
    section.me:before {
      animation-name: polybackAnim-1;
      background-image: url("sources/images/triangles.svg");
      opacity: 0.4; }
    section.me .section-title {
      font-size: var(--fontsize-s);
      font-weight: 500;
      margin-bottom: 40px; }
      section.me .section-title span:first-child {
        color: rgba(255, 255, 255, 0.7);
        text-shadow: none; }
      section.me .section-title span:last-child {
        display: inline-block;
        font-size: var(--fontsize-xl);
        font-family: 'Magnum','Brush Script MT','Courier',sans-serif;
        font-weight: normal;
        margin-top: 20px;
        color: #FFFFFF;
        line-height: 0.8em; }
    section.me .content {
      position: relative;
      z-index: 1;
      max-width: 800px;
      display: inline-block;
      font-size: var(--fontsize-s);
      color: #FFFFFF;
      margin-left: auto;
      margin-right: auto; }
    section.me p .focus {
      text-shadow: -3px 3px 1px rgba(0, 0, 0, 0.4); }
    section.me .buttons {
      margin-top: 30px; }
  section.skills {
    background-color: #222222;
    color: white;
    padding: 100px 50px; }
    section.skills .content {
      font-size: 0;
      margin: -30px; }
    section.skills .col {
      display: inline-block;
      vertical-align: top;
      font-size: var(--fontsize-s);
      padding: 30px;
      width: 33.33%; }
      @media screen and (max-width: 1200px) {
        section.skills .col {
          width: 100%; } }
      section.skills .col .tags {
        margin: -5px; }
  section.contact {
    text-align: center;
    min-height: 100vh; }
    section.contact .contact-wrap {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #5580d6;
      min-height: 100vh;
      width: 100%;
      display: block; }
    section.contact .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
    section.contact ul {
      display: inline-block; }
    section.contact li {
      font-size: var(--iconsize-l);
      display: inline-block;
      margin: 15px; }
      section.contact li a {
        color: white; }
        section.contact li a:hover {
          opacity: .6; }
  section.jobs .section-title {
    position: absolute;
    right: 0;
    bottom: 100%;
    right: 30px;
    font-size: var(--fontsize-xl);
    font-family: 'Magnum','Brush Script MT','Courier',sans-serif;
    bottom: calc(100% - 0.27em);
    z-index: 5;
    text-shadow: -5px 5px 1px rgba(0, 0, 0, 0.25); }
  section.jobs .content {
    font-size: 0;
    text-align: left; }
    section.jobs .content > li {
      display: inline-block;
      vertical-align: top;
      width: 33.33%;
      height: 50vw;
      max-height: 80vh; }

@keyframes loader-ring {
  0% {
    transform: rotate(0deg);
    filter: hue-rotate(0deg); }
  100% {
    transform: rotate(720deg);
    filter: hue-rotate(360deg); } }
/*@keyframes loading-fadein{
    0%{background-color:rgba(255,255,255,1);}
    100%{background-color:rgba(255,255,255,.5);}
}*/
.loading {
  position: fixed;
  pointer-events: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: white;
  z-index: 100;
  opacity: 1;
  transition: opacity .4s, z-index 0s linear .4s; }
  .loading > * {
    animation-name: rainbow;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-timing-function: linear;
    opacity: 0.8; }
  .loading .ring-1,
  .loading .ring-2,
  .loading .ring-3 {
    content: "";
    position: absolute;
    box-sizing: content-box;
    margin: auto;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
    border: 5px solid #5580d6;
    border-radius: 100%;
    border-left-color: transparent;
    border-top-color: transparent;
    transform-origin: center center;
    /* TO DO : Make animation stop once page is loaded. */
    animation-name: loader-ring;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 3s; }
  .loading .ring-1 {
    height: 29px;
    width: 29px; }
  .loading .ring-2 {
    height: 17px;
    width: 17px; }
  .loading .ring-3 {
    height: 5px;
    width: 5px; }
  body.loaded .loading {
    opacity: 0;
    z-index: -1; }

/* TO DO : Change values of variables on breakpoints. */
@media screen and (min-width: 1600px) {
  .laptop_only, .tablet_only, .mobile_only {
    transform: scale(0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0px !important;
    width: 0px !important;
    overflow: hidden !important;
    position: absolute !important; } }
@media screen and (max-width: 1600px) and (min-width: 1200px) {
  .desktop_only, .tablet_only, .mobile_only {
    transform: scale(0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0px !important;
    width: 0px !important;
    overflow: hidden !important;
    position: absolute !important; } }
@media screen and (max-width: 1200px) and (min-width: 800px) {
  .desktop_only, .laptop_only, .mobile_only {
    transform: scale(0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0px !important;
    width: 0px !important;
    overflow: hidden !important;
    position: absolute !important; } }
@media screen and (max-width: 800px) {
  .desktop_only, .laptop_only, .tablet_only {
    transform: scale(0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0px !important;
    width: 0px !important;
    overflow: hidden !important;
    position: absolute !important; } }
@media screen and (max-width: 1200px) {
  :root {
    --iconsize-s:25px; }

  .teaser .default {
    opacity: .2;
    transform: scale(1.3); }
    .teaser .default .teaser-logo {
      opacity: 0; }
  .teaser .hover {
    opacity: 1; }

  section.jobs .content > li {
    width: 100%;
    min-height: 500px; } }
@media screen and (max-width: 800px) {
  :root {
    --fontsize-xxl:24vw;
    --fontsize-xl:20vw;
    --fontsize-l:45px;
    --fontsize-s:16px;
    --fontsize-xs:18px; }

  .teaser, section.projects .teaser {
    height: auto;
    max-height: none; }
    .teaser .hover, section.projects .teaser .hover {
      position: static;
      transform: none;
      top: 0;
      max-height: none; }
    .teaser .teaser-description, section.projects .teaser .teaser-description {
      margin-bottom: 0; }

  .social .label {
    transform: scale(0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0px !important;
    width: 0px !important;
    overflow: hidden !important;
    position: absolute !important; }

  .job .hover .top,
  .job .hover .bottom {
    position: static; }
  .job .hover .middle {
    transform: none; }

  section.jobs .section-title {
    left: 30px; }
  section.jobs .content > li {
    height: auto;
    max-height: none;
    min-height: 0; }
  section.skills {
    padding: 50px 30px; }
  section.me {
    min-height: 0; }
    section.me:before {
      animation-name: none; } }