/* Resets */
*, *:before, *:after {
  box-sizing: border-box;
}
* {padding: 0; margin: 0;}
div {padding: 0; margin: 0;}
.url {text-decoration: underline;}

/* Design */
.screen, .page {width:100%}
.page {margin: 20px auto; display: table;}
.text-content, .contact {padding-left: 0.5em; padding-right: 0.5em;}
.video {margin: 0; padding: 0;}
#social {padding: 0; margin: 0;}
#resume {padding: 0; margin: 0;}
.clear {clear:both;}
a {color: black;}
a:hover {color:lightblue}
.anchor:hover {color: black}
.section {margin-bottom: 1.5em; width: 500px; margin: 0 auto 1.5em auto; padding: 0;}
#head {margin-bottom: 1em;}

#lottie-hand {width: 50%; clear: both; margin: 0 auto;  margin-bottom: 1em;}
#lottie-foot {width: 75%; clear: both; margin: 0 auto;  margin-bottom: 1em;}

/* Styling */
h1, h2, h3, h4, h5 {padding: 0; margin: 0; padding-top: 0.75em;}
h1 {padding-bottom: 0.5em; text-align: center;}
h2 {padding-bottom: 0.2em; text-align: center;}
p {padding:0; padding-top: 0.75em; line-height: 145%; }
p:first-child {padding-top: 0.75em;}
.contact {text-align: center;}
.contact p {padding: 0;}
.contact p:last-child {padding-bottom: 1em;}
.roll {margin-top:0.75em;}
.image-100, .image-50, .image-33, .image-25, .image-20 {padding: 0; margin: 0; line-height: 0; float: left;}

.image-100 {width: 100%;}
.image-50 {width: 50%;}
.image-33 {width: 50%;}
.image-25 {width: 50%;}
.image-20 {width: 50%;}

.yt-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.yt-video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Typography */
html, body {font-family: 'Fredoka', sans-serif;}
html, body {width: 100%;}
.title, h1, h2, .back {font-family: 'Fredoka One', cursive;}
h1 {font-size: 3em}
h2 {font-size: 1.75em}
.text, .page {font-size: 1.25em;}
.text-smal {font-size: 0.75em;}
.bold {font-weight: 600;}
.roll {color: gray; font-style: italic;}
.bold {font-style: normal;}
.resumeBlock {font-size: 0.70em; text-align: center;}
/* p {line-height: 1.5em;} */

/* Navigation */
.back {width: 100%; margin: auto; text-align: center; padding-top: 1.5em;}
.back a {width: 5em; height: 5em; margin: auto; text-align: center; display: inline-block; text-decoration: none; font-weight: 2em; font-size: 1em;}
.back a div {margin: auto; height: 5em; line-height: 5em; white-space: nowrap; border-radius: 5em;}
.back a div { transition: all 0.2s ease; background: black; color: white;}
.back a:hover div {color: white; background: #6699cc; }


/* Resume */
#resume h3, #resume , #resume p { padding: 0; margin: 0}
#resume h3 {}
#clients {margin: 2em 0;}

.resumeBlock {float: left; display: block; width: 100%;}
.resumeBlock h4 {line-height: 1.8em; padding: 0; margin: 0;}
.resumeBlock div {padding: 10px;}
.resumeBlock a {text-decoration: none;}

.rowA a:hover>div { background-color: #f9de74; }
.rowB a:hover>div { background-color: #ed706d; }
.rowC a:hover>div { background-color: #e28a9f; }
.rowD a:hover>div { background-color: #faf24f; }
.rowE a:hover>div { background-color: black; }
.rowA a:hover { color: black; }
.rowB a:hover { color: black; }
.rowC a:hover { color: black; }
.rowD a:hover { color: black; }
.rowE a:hover { color: white; }

/* - - - Animation - - - - - - - - - - - - */

@keyframes fadeIn {
    from { opacity: 0;}
      to { opacity: 1;}
}
@keyframes slideUp {
    from { transform:translate(0,1.5em)}
      to { transform:translate(0,0)}
}

.rowA, .rowB, .rowC, .rowD, .rowE {
  display: block;
  opacity: 0;
}

.rowA-anim, .rowB-anim, .rowC-anim, .rowD-anim, .rowE-anim {
  animation: fadeIn 2s;
  animation-fill-mode: forwards;
}


.rowA-anim div, .rowB-anim div, .rowC-anim div, .rowD-anim div, .rowE-anim div {
  animation: slideUp 1s;
}

.rowA-anim {
}
.rowB-anim, .rowB-anim , .rowB-anim .line {
  animation-delay: 0.25s;
}
.rowC-anim, .rowC-anim , .rowC-anim .line {
  animation-delay: 0.5s;
}
.rowD-anim, .rowD-anim , .rowD-anim .line {
  animation-delay: 0.75s;
}
.rowE-anim, .rowE-anim , .rowE-anim .line {
  animation-delay: 0.90s;
}

/* - - - - - - - - Gridsystem - - - - - - - - - */

.grid-item {
  background: white;
  display: block;
  width: 250px;
  height: 250px;
  float: left;
  z-index:2;
  background-repeat:no-repeat;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

.grid-item--bigSquare { width: 500px; height: 500px; }
.grid-item--movie { width: 500px; height: 250px; }


.grid-item-L { width: 500px; height: 500px; }
.grid-item-M { width: 500px; height: 250px; }
.grid-item-S { width: 250px; height: 250px; }


.grid-item a {
  width:100%; height:100%;
  position:absolute;
  top:0; left:0;
  z-index:3;
  display: block;
}
.grid-item a:hover .overlay{opacity:1}
.grid-item a:hover .overlay .title{
  -webkit-transform:translate(-50%,-210%);
  transform:translate(-50%,-210%);
  opacity: 1;
}
.grid-item a:hover .overlay .line{
  -webkit-transform:translate(-50%,-110%);
  transform:translate(-50%,-110%);
  opacity: 1;
}
.grid-item a:hover .overlay .text{
  -webkit-transform:translate(-50%,10%);
  transform:translate(-50%,10%);
  opacity: 1;
}
.overlay-mobile{
  opacity:1;
  background-color:rgba(0,0,0,.70);
}

.overlay{
  width:100%; height:100%;
  position:absolute;
  top:0; left:0;
  z-index:10;
  opacity:0;
  -webkit-transform:translateY(0);
  transform:translateY(0);
  transition:opacity 350ms;
}

.overlay-gif {
  background-repeat:no-repeat;
  background-size: 100% 100%;
}

.overlay-black {
  background-color:rgba(0,0,0,.70);
}

.overlay .title, .overlay .line, .overlay .text {
  position:absolute;
  top:50%;
  left:50%;
  color:#fff;
  transition:-webkit-transform 350ms;
  transition:transform 350ms;
}
.overlay .title{
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  font-size: 1em;
  opacity:0;
  margin: 1em 0;
}
.overlay .line {
  -webkit-transform:translate(-50%,20%);
  transform:translate(-50%,20%);
  font-size: .85em;
  font-weight: normal;
  text-align: center;
  line-height: .25em;
  margin-top: .25em;
  width: 25%;
  opacity:0;
}
.overlay hr {border: 1px solid white;}
.overlay .text {
  -webkit-transform:translate(-50%,130%);
  transform:translate(-50%,130%);
  font-size: .85em;
  font-weight: normal;
  text-align: center;
  line-height: 1.1em;
  opacity:0;
  margin: 1.3em 0;
}

.overlay-mobile{
  z-index: 100;
  opacity:1;
  background-color:rgba(0,0,0,.70);
}
.overlay-mobileTitle {
  opacity: 1 !important;
  -webkit-transform:translate(-50%,-210%) !important;
  transform:translate(-50%,-210%) !important;
}
.overlay-mobileLine {
  opacity: 1 !important;
  -webkit-transform:translate(-50%,-110%) !important;
  transform:translate(-50%,-110%) !important;
}
.overlay-mobileText {
  opacity: 1 !important;
  -webkit-transform:translate(-50%,10%) !important;
  transform:translate(-50%,10%) !important;
}



/* workspace CSS */

#work .entry {
    text-align: center;
}


#work h2 {margin-bottom: 0;}

@keyframes fadeIn {
    from { opacity: 0;}
      to { opacity: 1;}
      from { transform:translate(0,1.5em)}
        to { transform:translate(0,0)}
}

.workspaceA, .workspaceB, .workspaceC, .workspaceD, .workspaceE, .workspaceF, .workspaceG {
  display: block;
  opacity: 0;
}

.workspaceA-anim, .workspaceB-anim, .workspaceC-anim, .workspaceD-anim, .workspaceE-anim, .workspaceF-anim, .workspaceG-anim {
  animation: fadeIn 1s;
  animation-fill-mode: forwards;
}

.timelineA-anim, .timelineB-anim, .timelineC-anim, .timelineD-anim, .timelineE-anim, .timelineF-anim, .timelineG-anim {
  display: block;
  margin: 0 auto;
border-radius: 5px;
  width: 15px;
  height: 30px;
  background: #000;
  z-index: 1;
  transform-origin: top;
  transform: scaleX(0);
  animation: timeline 0.5s;
  animation-fill-mode: forwards;

}


.workspaceA-anim {
  animation-delay: 0.25s;
}
.workspaceB-anim {
  animation-delay: 0.75s;
}
.workspaceC-anim {
  animation-delay: 1.25s;
}

.workspaceD-anim {
  animation-delay: 1.75s;
}

.workspaceE-anim {
  animation-delay: 2.25s;
}

.workspaceF-anim {
  animation-delay: 2.75s;
}

.workspaceG-anim {
  animation-delay: 3.25s;
}



.timelineA-anim {
  animation-delay: 0s;
}
.timelineB-anim {
  animation-delay: 0.5s;
}
.timelineC-anim {
  animation-delay: 1s;
}

.timelineD-anim {
  animation-delay: 1.5s;
}

.timelineE-anim {
  animation-delay: 2s;
}

.timelineF-anim {
  animation-delay: 2.5s;
}

.timelineG-anim {
  animation-delay: 3s;
}


#contact {
  margin-top: 4em;
  padding-bottom: 0em;
}


@keyframes timeline {
  0% {
    transform: translateY(0) scaleY(0);
    transform-origin: top;
  }
  100% {
    transform: translateY(0) scaleY(1);
    transform-origin: top;

  }
}

#resume {
  margin-top: 0.5em;
}
#resume h2 {margin-bottom: 0.5em;}

.entry {font-size: 1.5em;}
.entry p {margin: 0; padding: 0; line-height: 1.25em;}
.entry {margin: 1em 0;}
.entry .workspace {font-family: Fredoka One; font-weight: 800; font-size: 1.2em;}
.entry .workperiod {font-size: 1em;}
.entry .workrole {font-style: italic; font-size: 0.9em;}
.entry .workspace {}

/* Workspace end */


@media only screen and (min-width: 0px) {
.text-content {font-size: 1.5em;}
h2 {font-size: 2.5em;}
.contact {font-size: 1.5em;}
}

@media only screen and (max-width: 767px) {
  #lottie-hand {width: 75%;}
  #lottie-foot {width: 100%;}
}


@media only screen and (min-width: 768px) {
  .page {width:100%;}
  .text-content, .contact {margin-left: 0; margin-right: 0;}
  .resumeBlock {width: 50%; text-align: left;}
  .section {width: 100%; }

  .image-100 {width: 100%;}
  .image-50 {width: 50%;}
  .image-33 {width: 50%;}
  .image-25 {width: 25%;}
  .image-20 {width: 20%;}

  .text-content, .contact {padding-left: 0; padding-right: 0;}


}

@media screen and (min-width: 770px) {
  .page {width: 770px;}
  .resumeBlock {width: 33%; text-align: left;}
  .image-33 {width: 33.33333%;}
}

@media screen and (min-width: 1000px) {
  .page {width: 1000px;}
  .resumeBlock {width: 33%; text-align: left;}
  .image-33 {width: 33.33333%;}
}

@media screen and (min-width: 1200px) {
  .page {width: 100%; max-width: 1000px;}
  .image-33 {width: 33.33333%;}
}

´