html, body {
  scroll-behavior: smooth; 
  scroll-snap-type: y proximity;
scroll-padding: 10em 0 0;
}

html {
  font-size: 62.5%;
}

body {
  font-family:  'Open Sans Condensed', 'Arial Narrow', sans-serif;
  line-height: 1em;
  color: #FFF;
}

* {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
}


picture {
  display: block;
  width: 12em;
  height: 12em;
  margin: auto;
  background-color: rgba(255,255,255,.15);
  border-radius: 100%;
  border: 1px solid rgba(255,255,255,.5);
  padding: 0.75em;
  -webkit-transition: 300ms all cubic-bezier(0.68, -0.55, 0.27, 1.55);
  -o-transition: 300ms all cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transition: 300ms all cubic-bezier(0.68, -0.55, 0.27, 1.55);
  position: relative;
  z-index: 5;
}

picture:hover {
  -webkit-animation: jello-horizontal 0.7s both;
          animation: jello-horizontal 0.7s both;
}


@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 0.85);
            transform: scale3d(1.15, 0.85, 0.85);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}


@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 0.85);
            transform: scale3d(1.15, 0.85, 0.85);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes gradient {
	0% {
		background-position: center, 0% 50%;
	}
	50% {
		background-position: center, 100% 50%;
	}
	100% {
		background-position: center, 0% 50%;
	}
}

@keyframes gradient {
	0% {
		background-position: center, 0% 50%;
	}
	50% {
		background-position: center, 100% 50%;
	}
	100% {
		background-position: center, 0% 50%;
	}
}


img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

img#qr {
  padding: .5em;
  background: #FFF;
  border-radius: .5em;
  border: 1px solid #FFF;
  -webkit-box-shadow: 0 0 0 0.75em rgba(255,255,255,.2);
          box-shadow: 0 0 0 0.75em rgba(255,255,255,.2);
  margin: 3rem auto 0rem;
  max-width: 40vh;
}

abbr[title] {
  text-decoration: none;
}

section {
  position: relative;
  z-index: 1;
  min-height: 96vh;
  -webkit-transition: .5s all ease-in-out;
  -o-transition: .5s all ease-in-out;
  transition: .5s all ease-in-out;
  scroll-snap-align: start none;
scroll-snap-stop: always;

}
section:first-child {
  text-align: center;
}
section:first-child:before {
  padding-top: 20em;
}
section#contact:before {
  padding-bottom: 20em;
}
section:first-child .wrapper {
  padding-top: 8vh;
  padding-bottom: 10vh;
}

@media screen and (orientation:landscape) {

  #branding picture {
    margin-right: 1em;
  }

  #branding .wrapper > * {
    display: inline-block;
    vertical-align: middle;
  }

  #branding h1 { margin-top: 0; }
  #branding h2 { margin-bottom: 0; }
  
     img#qr { max-width: 20vh; }


}


section:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 100%;
  -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,.8);
          box-shadow: 0 0 0 1px rgba(255,255,255,.8);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-transform: translate(-50%,-50%) rotate(-5deg);
      -ms-transform: translate(-50%,-50%) rotate(-5deg);
          transform: translate(-50%,-50%) rotate(-5deg);
  z-index: -1;
  background-color: #C7402D;

  background-image: -webkit-linear-gradient(315deg,
    rgba(255,255,255,.1) 14.29%,
    rgba(255,255,255,.0) 14.29%,
    rgba(255,255,255,.0) 50%,
    rgba(255,255,255,.1) 50%,
    rgba(255,255,255,.1) 64.29%,
    rgba(255,255,255,.0) 64.29%,
    rgba(255,255,255,.0) 100%
  ), -webkit-linear-gradient(340deg,
    #ea8f15 0%,
    #8e0033 100%
  );

  background-image: -o-linear-gradient(315deg,
    rgba(255,255,255,.1) 14.29%,
    rgba(255,255,255,.0) 14.29%,
    rgba(255,255,255,.0) 50%,
    rgba(255,255,255,.1) 50%,
    rgba(255,255,255,.1) 64.29%,
    rgba(255,255,255,.0) 64.29%,
    rgba(255,255,255,.0) 100%
  ), -o-linear-gradient(340deg,
    #ea8f15 0%,
    #8e0033 100%
  );

  background-image: linear-gradient(135deg,
    rgba(255,255,255,.1) 14.29%,
    rgba(255,255,255,.0) 14.29%,
    rgba(255,255,255,.0) 50%,
    rgba(255,255,255,.1) 50%,
    rgba(255,255,255,.1) 64.29%,
    rgba(255,255,255,.0) 64.29%,
    rgba(255,255,255,.0) 100%
  ), linear-gradient(110deg,
    #ea8f15 0%,
    #8e0033 100%
  );
  background-size: 7.00px 7.00px, auto;
  /* background-size: 7.00px 7.00px, 100% 100%;
  -webkit-animation: gradient 30s ease-out infinite;
          animation: gradient 30s ease-out infinite; */
}

section .wrapper {
  max-width: 48em;
  margin: 0 auto;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  padding: 10vh 2em 8em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

footer .wrapper {
  max-width: 48em;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin: 0 auto;
  padding: 0 10vw;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


footer {
  z-index: 10;
  position: fixed;
  bottom: 5vh;
  left: 0;
  width: 100%;
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  -o-transition-property: opacity, transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition:none;
  -o-transition:none;
  transition:none;
}
footer.hidden {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
  opacity: 0;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  -o-transition-property: opacity, transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-delay: 500ms;
       -o-transition-delay: 500ms;
          transition-delay: 500ms;
  -webkit-transition-duration: 0ms;
       -o-transition-duration: 0ms;
          transition-duration: 0ms;
  -webkit-transition-timing-function: linear;
       -o-transition-timing-function: linear;
          transition-timing-function: linear;
}


h1 {
  font-size: 3em;
  font-weight: normal;
  padding: 0;
  margin: .25em 0 0 ;
  display: inline-block;
  line-height: 100%;
}
h3:after,
h1:after {
  font-size: 4rem;
  content: "";
  display: block;
  vertical-align: super;
  height: 0.25em;
  width: 100%;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.st0{animation:shift .5s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23FFFFFF88' stroke-width='1' class='st0' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-size: auto 0.25em;
  background-repeat-y: no-repeat;
  margin: 20px 0;
}

h2 {
  font-size: 1.8em;
  font-weight: normal;
  margin: 0 auto 20vh;
}

h3 {
  margin: .5em 0 0 ;
  display: inline-block;
  line-height: 100%;
  font-size: 4em;
  font-weight: normal;
  margin-left: -0.075em;
}
h3:after {
  margin-left: 0.075em;
}
#about h3:after {
  width: 96%;
}

h5 {
  font-size: 1.6em;
  margin: 0.5em 0 1em;
  font-weight: bold;
}

p {
  font-size: 1.8em;
  line-height: 1.6em;
  margin: 0 0 0.5em;
}

a {
  color: inherit;
}

a[href="#top"],
body[section="branding"] footer a[href="#top"],
body[section="about"] footer a[href="#top"],
body[section="cv"] footer a[href="#cv"],
body[section="save"] footer a[href="#save"],
body[section="follow"] footer a[href="#follow"],
body[section="contact"] footer a[href="#contact"] {
  display: none;
}

body[section="cv"] footer a[href="#top"],
body[section="save"] footer a[href="#top"],
body[section="follow"] footer a[href="#top"],
body[section="contact"] footer a[href="#top"] {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
  display: inline-block;
}

.nowrap {
  white-space: nowrap;
}

.buttons,
.buttons li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.buttons.centered {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.buttons.centered li {
  display: inline-block;
}

.button {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  margin: 1em;
}

.button.wide {
  position: relative;
  margin: 1em 0;
  padding-left: 6em;
  text-align: left;
}

.buttons.inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

.buttons.inline li {
  display: inline-block;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50%;
          flex: 1 1 50%;
}

.button.small [class^="icon-"],
.button.small [class*=" icon-"] {
  font-size: 2em;
}

.button.wide.small {
  padding-left: 4em;
  margin: 0.5em 0;
}

.button.wide.small .secondary.label {
  display: none;
}


.button [class^="icon-"], .button [class*=" icon-"] {
  display: block;
  font-size: 3em;
  line-height: 1em;
  padding: .4em;
  background-color: rgba(255,255,255,.1);
  background-size: 4.00px 4.00px;
  border-radius: 4em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  -webkit-transition-duration: 450ms;
       -o-transition-duration: 450ms;
          transition-duration: 450ms;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  -o-transition-property: transform, opacity;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transition-timing-function: cubic-bezier(0.18, 1.15, 0.57, 1.24);
       -o-transition-timing-function: cubic-bezier(0.18, 1.15, 0.57, 1.24);
          transition-timing-function: cubic-bezier(0.18, 1.15, 0.57, 1.24);
  -webkit-transition-delay: 200ms;
       -o-transition-delay: 200ms;
          transition-delay: 200ms;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

html.no-touchevents .button:hover [class^="icon-"],
html.no-touchevents .button:hover [class*=" icon-"] {
  background-color: rgba(255,255,255,.25);
  -webkit-transition: 200ms all ease-in-out;
  -o-transition: 200ms all ease-in-out;
  transition: 200ms all ease-in-out;
}

.button:active [class^="icon-"], .button:active [class*=" icon-"] {
  background-color: rgba(255,255,255,.5);
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}

.button.wide [class^="icon-"], .button.wide [class*=" icon-"] {
  left: 0;
  top: 0;
  position: absolute;
  line-height: 1em;
  min-width: 1.8em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.button [class^="icon-"]:before, .button [class*=" icon-"]:before {
  color: inherit;
}

.button span,
.button small {
  display: block;
  margin: .75em .25em 1em;
  font-size: 1.4em;
  line-height: 1.2em;
  -webkit-transition: 400ms all ease-in-out 100ms;
  -o-transition: 400ms all ease-in-out 100ms;
  transition: 400ms all ease-in-out 100ms;
  opacity: 1;
}

.button small {
  color: rgba(255,255,255,.5);
}
.button span + small {
  margin-top: -.75em;
}

.icon-linkedin:before {
  font-size: 90%;
}

footer.hidden .button [class^="icon-"],
footer.hidden .button [class*=" icon-"] {
  opacity: 0;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transition: 450ms all cubic-bezier(0.22, 0.61, 0.36, 1) 50ms;
  -o-transition: 450ms all cubic-bezier(0.22, 0.61, 0.36, 1) 50ms;
  transition: 450ms all cubic-bezier(0.22, 0.61, 0.36, 1) 50ms;
}

footer.hidden .button .label {
  -webkit-transition: 200ms all ease-in 0ms;
  -o-transition: 200ms all ease-in 0ms;
  transition: 200ms all ease-in 0ms;
  opacity: 0;
  -webkit-transform: translateY(-0.25em) scale(0.5);
      -ms-transform: translateY(-0.25em) scale(0.5);
          transform: translateY(-0.25em) scale(0.5);
}


footer.side.hidden,
footer.side.hidden * {
  opacity: 1 !important;
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
}


#container {
  background-color: #fc7e00;
  color: #FFFFFFDD;
  overflow: hidden;
}


#branding h2 span {
  display: block;
  line-height: 1.3em;
}

@media (max-width: 500px) {
 section .wrapper {
    padding: 5em 2em 30em;
  }
  section:before {
    -webkit-transform: translate(-50%,-50%) rotate(-10deg);
        -ms-transform: translate(-50%,-50%) rotate(-10deg);
            transform: translate(-50%,-50%) rotate(-10deg);
  }
}

@media screen and (orientation:landscape) and (max-height: 370px) {
  section:first-child .wrapper {
    font-size: 0.85em;
  }

  footer {
    bottom: 0;
  }
}

@media screen and (orientation:landscape) and (max-height: 480px){

  section .wrapper {
    padding-bottom: 50vh;
  }

  section:first-child .wrapper {
    padding-bottom: 20vh;
  }

}

@media screen and (orientation:portrait) and (min-width: 360px) {

  section:first-child .wrapper {
    font-size: 1.1em;
  }

}

@media screen and (orientation:portrait) and (min-width: 375px) {
  section:first-child .wrapper {
    font-size: 1.25em;
  }
}

@media screen and (orientation:portrait) and (min-width: 410px) {
  section:first-child .wrapper {
    font-size: 1.4em;
  }
}

@media screen and (orientation:portrait)  and (min-width: 768px),
       screen and (orientation:landscape) and (min-width: 768px) and (min-height: 576px) {
  section:first-child .wrapper {
    font-size: 2em;
  }
}

@media screen and (orientation:landscape) and (min-width: 768px) and (min-height: 375px) {

  section:first-child .wrapper {
    padding-top: 20vh;
  }

  section:first-child .wrapper {
    font-size: 1.4em;
  }
}

@media screen and (orientation:landscape) and (min-width: 1600px) and (min-height: 800px) {
	
   html { font-size: 70%; }
   img#qr { max-width: 20vh; }
   
}


body.debug .line {
  display:block;
  position:absolute;
  z-index:999999;
  width:100%;
  left:0;
  border-bottom: 1px dashed currentColor;
}

body.debug .line:after {
  content: attr(id);
  position: absolute;
  top: 0;
  left: 0;
  padding: .5em;
  font-weight: bold;
  font-size: 1.2em;
}
body.debug .line[id^="line-"]:after {
  display: none;
}
e;
}
}
y: none;
}
e;
}
}