:root {
  --hoverColor: #FF3C10;
}

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: red;
  background-image: linear-gradient(RoyalBlue, Snow, Green);
}

body#stax{
background-image: linear-gradient(Olive, snow, LightSkyBLue);
}

body#n26{
/*background-image: linear-gradient(to top, #3b41c5 0%, #a981bb 49%, #ffc8a9 100%);*/
background-image: linear-gradient(SlateBlue, Snow, YellowGreen);
}

body#travelViz{
/*background-image: linear-gradient(to top, #3b41c5 0%, #a981bb 49%, #ffc8a9 100%);*/
background-image: linear-gradient(Pink, YellowGreen);
}

p.normal {
  color: black;
  font-size: 21px;
  line-height: 1.58;
}

p.extra {
  margin-bottom: 2.5em;
}

p {
  color: black;
  font-size: 21px;
  line-height: 1.58;

}

p.bold {
  font-weight: 700;
  line-height: 1.58;
  ;
  font-size: 21px;
  margin-bottom: -10px;
}

p.intro {
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  text-align: center;
  color: black;
  padding: 0.6em 0.6em 0 0.6em;
  max-width: 500px;
  margin: auto;
}

span.height {
  margin-top: -24px;
}

h1 {
  font-size: 28px;
  font-weight: 600;
  color: black;
}

h1.black {
  font-size: 32px;
  font-weight: 800;
  color: black;
  /*margin-bottom:-10px; */
}

h1.claim {
  position: absolute;
  z-index: 999999;
  right: 0;
  height: 60%;
  text-align: center;
}

h1.hero {
  font-size: 42px;
  font-weight: 800;
  color: black;
  text-align: left;
  padding-top: 1em;
  /*letter-spacing: -.03em;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #A513FE;
    display: inline-block;
    display: inline-block;
    transform: rotate(-5deg);*/
}

h1.hola {
  /*transform: rotate(-6deg);*/
}

.hero {
  margin-left: 0em;
  margin-top: -0em;
}

h2 {
  font-size: 24px;
  font-weight: 400;
  color: black;
}

h2.role {
  margin-top: -20px;
  /*transform: rotate(-6deg);*/
}

h2.bold {
  font-weight: 700;
}

h5 {
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  color: black;
}

h5.light {
  font-weight: 400;
  text-align: left;
  color: black;
  margin-top: -1.5em;
}

img.team {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
max-width: 500px;
margin-left: auto;
margin-right: auto;
}

img.large{
  max-width: 900px;
}

nav {
  /*border: solid cyan;*/
  position: fixed;
  width: 23%;
}

ul {
  list-style-type: none;
  text-align: right;
  list-style-type: none;
  font-size: 28px;
  font-weight: 400;
  text-align: right;
  margin: 16px auto;
}

li {
  display: block;
}

ol{

}

.back{
  font-size: 21px !important;
  padding:1em 0em 0em 2em;
  z-index: 99 !important;
  position: fixed;

}
.zoom {
  padding: 0px;
  transition: transform .2s;
  margin: 0 auto;
  cursor:;
}

.zoom:click {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
  cursor:;
}

#img-note{
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 3em;

}
a {
  color: black;
  font-weight: 600;
  text-decoration: none;
  background-color: transparent;
  transition: color .2s cubic-bezier(.645, .045, .355, 1), border .2s cubic-bezier(.645, .045, .355, 1), background .2s cubic-bezier(.645, .045, .355, 1);
}

a:hover {
  color: black;
  background-color: #D6E8FA;
  transition: color .2s cubic-bezier(.645, .045, .355, 1), border .2s cubic-bezier(.645, .045, .355, 1), background .2s cubic-bezier(.645, .045, .355, 1);
}

a.work {
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  cursor: default;
  /*color: #038001 !important;*/
}

a.work:hover {
  text-decoration-line: none;
  cursor: pointer;
}

a.stroke {
  font-size: 42px;
  font-weight: 800;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  display: inline-block;
  /*transform: rotate(4deg);
  text-decoration-line: underline;
  text-decoration-style: wavy;*/
}

a.stroke:hover {
  text-decoration-line: none;
  /*cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAPCAMAAAAxmgQeAAAACVBMVEX///8AAAD///9+749PAAAAAXRSTlMAQObYZgAAAD5JREFUGNN1j9EKADAIAnP//9GjFq6w7iU4DNRsB06cb44TJ+UzYUcniqnqoA6ag/62JhjKIU0rxx1lKveuXJ5UAQs/G/2vAAAAAElFTkSuQmCC),auto;*/
  background-color: transparent;
}

a.stroke-purpledesign {
  font-size: 42px;
  font-weight: 800;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  display: inline-block;
  /*border-bottom: 3px solid yellow;
  box-shadow: inset 0 -4px 0 yellow;
  margin-bottom: .5em;*/
}

a.paragraph {
  color: black;
  font-size: 21px;
  line-height: 1.58;
  font-weight: 400;
  cursor: pointer;
  transition: 0.3s;
  display: inline-block;
  background-color: transparent;
  border-bottom: 3px solid yellow;
  box-shadow: inset 0 -4px 0 yellow;
}

a.paragraph:hover {
  background-color: yellow;
  border-bottom: 3px solid yellow;
  box-shadow: inset 0 -4px 0 yellow;
}


.flex-container {
  display: flex;
  flex-direction: row;
  text-align: left;
}

.flex-item-left {
  flex: 30%;
  background-color: red;
}

.flex-item-right {
  flex: 70%;
  background-color: blue;

}

.img-text {
  display: flex;
  flex-direction: row;
  padding-top: 1em;
}

.img-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

img.left {
  margin-right: 1.5em;
  width: 120px;
  height: 160px;
  decoration: none;
  border-radius: 0px;
  /*transform: rotate(-6deg);*/
}

.center{
  margin: auto;
  padding: 1em;
  max-width: 900px;
}

/* Work content */
section.work {
  /* background-color: AntiqueWhite;*/
  padding-bottom: 3em;
}

#projects {
  /*background-color: #EA7334;*/
}

#things {
  /*background-color: DodgerBlue;*/
}

#contact {
  /*background-color: LightSteelBlue;*/
}

.content {
  position: relative;
  max-width: 640px;
  margin: auto;
  padding: 2em;
  /*border: 6px solid purple;*/
}

.portfolio-link {
  color: black;
  font-size: 20px;
  cursor: pointer;
  transition: 0.3s;
  display: inline-block;
  background-color: transparent;
  border-bottom: 3px solid #F7CB62;
  box-shadow: inset 0 -4px 0 #F7CB62;
  margin-bottom: .5em;
}

.portfolio-link:hover {
  background-color: #F7CB62;
  border-bottom: 3px solid #F7CB62;
  box-shadow: inset 0 -4px 0 #F7CB62;
}

/* Image and motto container */
.container {
  position: relative;
  /*height: 100vh;
  /*border: solid cyan;*/
  max-width:
}

.flex-grid {
  margin: auto;
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 1em;
  padding-bottom: 1em;
  display: flex;
  max-width: 1400px;
  /*border: solid orange;*/
  height: 100%;
}

.col-left {
  position: relative;
  /*border: solid red;*/
  width: 75%;
  z-index: 99 !important;

}

.col-project {
  position: relative;
  /*border: solid red;*/
  margin-right: 1em;
  margin-bottom: 3em;
  width: 100%;

}

.col-things {
  position: relative;
  margin-right: 1em;
}

.flex-grid-project {
  margin: auto;
  padding-left: 0em;
  padding-top: 1em;
  padding-bottom: 1em;
  display: flex;
  max-width: 1400px;
  /*border: solid red;*/
}

.col-right {
  position: relative;
  /*border: solid blue;*/
  overflow: auto;
  text-align: right;
  z-index: 99 !important;
  width: 25%;
}

.col-middle {
  position: relative;
  text-align: center;
  /*border: 2px solid black;*/
  width: 50%;
  padding: 0px;
}

/* image and text center */
.inner-div {
  position: relative;
  /*border:solid red;*/
  margin: 0 auto;
  top: 20%;
}

img.profile {
  max-width: 300px;
}

/* Masonry */
.row {
  display: -ms-flexbox;
  /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap;
  /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%;
  /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* progress bar */
.progress-container {
  width: 100%;
  height: 8px;
  background: transparent;
  position: fixed;
  z-index: 1;
}

.progress-bar {
  height: 8px;
  background: #D8C3FF;
  width: 0%;
}

p.floating-element {
  font-size: .5em;
  font-weight: 400;
  position: fixed;
  bottom: 2em;
  right: 5em;
  z-index: 1;
  /* or higher/lower depending on other elements */
}

/*#purpledesign {
  height:2.5em;
}*/
@media (max-width: 1080px) {
  .floating-element {
    display: none;
  }
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 880px) {
.back{
  position: static;}
}


/* TransferWise section + fun image on hover */
.hover_img a {
  position: relative;
  background: none;
  cursor: default;
  color: black;
}


.hover_img a span {
  position: absolute;
  display: none;
  z-index: 99;
}

.hover_img a:hover span {
  display: block;
}

.timeframe {
  border-left: 4px solid black;
  opacity: .6;
  padding-left: .7em;
  margin-bottom: 1em;
  margin-top: -.5em;
}

#corner{
  border-radius: 100px;
  border: 1px solid black;
  padding: 2px 8px 2px 8px;
  display: inline;

}

#gds {
    
}

#wise {
    
}

#stax {

}

#N26 {

}

#TravelViz {

}



span.wave {
  animation-name: wave-animation;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  transform-origin: 70% 70%;
  display: inline-block;
}

@keyframes wave-animation {
  0% {
    transform: rotate(0.0deg)
  }

  10% {
    transform: rotate(-10.0deg)
  }

  20% {
    transform: rotate(12.0deg)
  }

  30% {
    transform: rotate(-10.0deg)
  }

  40% {
    transform: rotate(9.0deg)
  }

  50% {
    transform: rotate(0.0deg)
  }

  100% {
    transform: rotate(0.0deg)
  }
}

@media (max-width: 820px) {
  .flex-grid {
    display: block;
    height: auto;
  }

  .flex-grid-project {
    display: block;
    height: auto;
  }

  .container {
    height: auto;
  }

  img.center {
    margin-top: auto;

  }




  .col-left {
    width: 100%;
    padding-bottom: 3em;

  }

  .col-middle {
    width: 100%;
  }

  .col-right {
    display: none;
  }
}


@media (max-width: 600px) {

  .flex-container {
    flex-direction: column;
  }
.img-text{
  flex-direction: column;
}

img.large{
  max-width: 100%;
}


}