article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
  display: block;
}

figure {
  margin: 0;
}

a:link {
  color: #3498db;
  text-decoration: none;
  font-weight: 400;
}
a:visited {
  color: #3498db;
}
a:hover {
  color: #151d29;
  outline: 0;
}
a:focus {
  color: #151d29;
  outline: thin dotted;
}
a:active {
  color: #151d29;
  outline: 0;
}

h1 {
  margin: 0.67em 0;
  font-size: 2em;
  font-weight: 100;
}

img {
  border: 0;
  max-width: 100%;
}

[hidden] {
  display: none;
}

/* ==========================================================================
Helper classes
========================================================================== */
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  *text-indent: -9999px;
}

.ir::before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}

.hidden {
  display: none !important;
  visibility: hidden;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.invisible {
  visibility: hidden;
}

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

#loader {
  overflow: visible;
  position: fixed;
  width: 100%;
  height: 100%;
  background: #3498db;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  opacity: 1;
  transition: opacity 500ms;
  z-index: 101;
  pointer-events: none;
}
#loader[uiState=hidden] {
  opacity: 0;
}
#loader::after {
  content: "";
  height: 240px;
  width: 240px;
  margin: 0 auto;
  position: relative;
  animation: rotation 0.6s infinite linear;
  border-left: 48px solid rgba(0, 174, 239, 0.15);
  border-right: 48px solid rgba(0, 174, 239, 0.15);
  border-bottom: 48px solid rgba(0, 174, 239, 0.15);
  border-top: 48px solid rgba(0, 174, 239, 0.8);
  border-radius: 100%;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
body[data-display=divertissement] #resume {
  display: none;
}

#bottomContainer {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

[role=placeholder] {
  position: absolute;
  top: 0;
  width: 100%;
}

[role=site] {
  opacity: 0;
  height: 100%;
}
[role=site][uiState=show] {
  opacity: 1;
}
[role=site][uiState=hidden] {
  display: none;
}

#videoPlayer {
  background-color: black;
  margin: 0 auto;
  width: 1px;
  z-index: 110;
  height: 1px;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
}

#menu {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 103;
}

#vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 200px rgba(0, 0, 0, 0.3) inset;
  z-index: 109;
  pointer-events: none;
  opacity: 1;
  transition: 500ms opacity;
}
#vignette[uiState=hidden] {
  opacity: 0;
}

.scrollable {
  position: fixed;
  z-index: 100;
}

.scrollable .scrollable {
  position: absolute;
}

.scrollable .scrollable .scrollable {
  position: static;
}

/* ---------------------------------------------------------
Print styles
--------------------------------------------------------- */
@media print {
  * {
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background: transparent !important;
  }
  html {
    background-color: #fff;
    height: auto !important;
  }
  #sidebar {
    border: none !important;
  }
  #sidebar h3 {
    display: none;
  }
  #sidebar #thislink {
    display: block;
  }
  header p {
    margin: 0;
    padding: 0;
  }
  .print_only {
    display: block !important;
  }
  .no-print {
    display: none !important;
  }
  figure,
  #printit,
  #reopen,
  #printfriendly {
    display: none !important;
    content: "";
  }
  body {
    display: block;
    font-size: 12px;
    overflow: hidden;
    height: auto !important;
  }
  /* Show link destinations in brackets after the link text */
  a[href]::after {
    content: ": " attr(href) " ";
  }
  a[href] {
    text-decoration: none;
    color: #06c;
    border: none;
  }
  h3 {
    font-weight: bold !important;
  }
  h3 a {
    font-weight: bold !important;
  }
  /* Don't show link destinations for JavaScript or internal links */
  a[href^="javascript:"]::after,
  a[href^="#"]::after,
  a.plain[href]::after {
    content: "";
  }
  /* Show abbr title value in brackets after the text */
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  .main-container > div > aside > p {
    margin: 0;
    font-size: 14px;
  }
  .main-container > div > aside section p {
    margin: 0;
    padding: 0;
  }
  .main-container > div > aside a {
    font-size: 14px;
  }
  .main-container > div > aside p::before {
    content: "";
  }
  .main aside {
    border: 0;
    padding: 0;
  }
}
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Roboto", sans-serif;
  color: #151d29;
}
body[data-display=none] {
  background: #3498db;
}

#resume {
  width: 90%;
  margin: 0 auto;
  max-width: 1026px;
}
[data-display=none] #resume {
  display: none;
}

#sidebar {
  border-top: 15px solid #388ac1;
  background: #3498db;
}
#sidebar a strong {
  font-weight: normal;
}
#sidebar a:link, #sidebar a:visited {
  color: white;
  font-weight: 100;
}
#sidebar a:hover, #sidebar a:focus {
  color: #151d29;
}
#sidebar #thislink {
  display: none;
}
#sidebar #printfriendly {
  font-weight: 100;
  font-size: 2rem;
}

.portrait-mode {
  display: none;
}

@media all and (orientation: portrait) {
  .portrait-mode {
    display: block;
    text-align: center;
    background: #3498db;
    font-size: 1.5em;
    color: white;
    padding: 1.5em;
  }
}
.main {
  padding: 0;
}
.main article {
  margin-bottom: 64px;
}
.main article h1 {
  font-size: 2em;
}
.main aside {
  color: white;
  padding: 0 5% 10px;
}
.main p {
  font-weight: 400;
}

.main h1,
.main h2,
.main h3 {
  font-weight: 300;
}

.print_only {
  display: none;
}

/* ==========================================================================

========================================================================== */
.list time {
  float: right;
}
.list section {
  border-bottom: 1px solid #151d29;
  font-size: small;
  margin-left: 1em;
}
.list section:last-child {
  border: none;
}
.list p {
  margin-top: 0;
  margin-bottom: 0.3em;
  clear: left;
}
.list h3 {
  float: left;
  margin-bottom: 0;
  margin-top: 0.3em;
}

#reopen {
  color: #151d29;
}
#reopen:hover {
  color: white;
}

.skill-set {
  font-size: small;
  margin-bottom: 16px;
  overflow: auto;
}
.skill-set ul {
  float: left;
  list-style: none;
  padding: 0;
  margin: 0;
}
.skill-set ul li::before {
  content: "-";
  color: grey;
  margin: 0 16px;
}

.horizontal-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: small;
  font-style: italic;
}
.horizontal-list li:last-child::after, .horizontal-list li:nth-child(1)::after {
  content: "";
  margin: 0;
}
.horizontal-list li:nth-child(1)::after {
  margin-left: 4px;
}
.horizontal-list li::after {
  content: "-";
  color: grey;
  margin: 0 2px;
}

@media only screen and (min-width: 768px) {
  #sidebar {
    box-shadow: 0 5px 10px #aaa;
    float: right;
    width: 28%;
  }
  #resumeData {
    float: left;
    width: 57%;
  }
}nav #bgmenu {
  opacity: 0;
  pointer-events: none;
}
nav #sc-menu1 {
  cursor: default;
}
nav #sc-menu3 {
  cursor: default;
}
nav #sc-menu5 {
  cursor: default;
}
nav #sc-menu6 {
  cursor: default;
}
nav #bar {
  -st-animation-name: menubar;
}
@-st-frames menubar {
  nav [data-frame="0"] {
    transform: scale(0, 1);
    fill: rgba(52, 152, 219, 0.99);
  }
  nav [data-frame="600"] {
    transform: scale(0.34, 1);
    fill: rgba(52, 152, 219, 0.99);
  }
  nav [data-frame="1720"] {
    transform: scale(0.35, 1);
    fill: rgba(68, 198, 80, 0.99);
  }
  nav [data-frame="2000"] {
    transform: scale(0.38, 1);
    fill: rgba(68, 198, 80, 0.99);
  }
  nav [data-frame="3800"] {
    transform: scale(0.58, 1);
    fill: rgba(68, 198, 80, 0.99);
  }
  nav [data-frame="3820"] {
    transform: scale(0.59, 1);
    fill: rgba(231, 76, 60, 0.99);
  }
  nav [data-frame="4100"] {
    transform: scale(0.62, 1);
    fill: rgba(231, 76, 60, 0.99);
  }
  nav [data-frame="5900"] {
    transform: scale(0.72, 1);
    fill: rgba(231, 76, 60, 0.99);
  }
  nav [data-frame="5920"] {
    transform: scale(0.73, 1);
    fill: rgba(43, 172, 181, 0.99);
  }
  nav [data-frame="6200"] {
    transform: scale(0.75, 1);
    fill: rgba(43, 172, 181, 0.99);
  }
  nav [data-frame="8400"] {
    transform: scale(0.9, 1);
    fill: rgba(43, 172, 181, 0.99);
  }
  nav [data-frame="8420"] {
    transform: scale(1.15, 1);
    fill: rgba(43, 172, 181, 0.99);
  }
  nav [data-frame="8700"] {
    transform: scale(1.16, 1);
    fill: rgba(43, 172, 181, 0.99);
  }
}
nav #menu {
  -st-animation-name: menu;
}
@-st-frames menu {
  nav [data-frame="60"] {
    transform: translate(0px, 200px);
  }
  nav [data-frame="100"] {
    transform: translate(0px, 0px);
  }
}
nav #barleft {
  -st-animation-name: barleft;
}
@-st-frames barleft {
  nav [data-frame="0"] {
    fill: rgba(52, 152, 219, 0.99);
  }
  nav [data-frame="600"] {
    fill: rgba(52, 152, 219, 0.99);
  }
  nav [data-frame="1720"] {
    fill: rgba(68, 198, 80, 0.99);
  }
  nav [data-frame="2800"] {
    fill: rgba(68, 198, 80, 0.99);
  }
  nav [data-frame="3800"] {
    fill: rgba(68, 198, 80, 0.99);
  }
  nav [data-frame="3820"] {
    fill: rgba(231, 76, 60, 0.99);
  }
  nav [data-frame="5900"] {
    fill: rgba(231, 76, 60, 0.99);
  }
  nav [data-frame="5920"] {
    fill: rgba(43, 172, 181, 0.99);
  }
  nav [data-frame="8400"] {
    fill: rgba(43, 172, 181, 0.99);
  }
  nav [data-frame="8420"] {
    fill: rgba(43, 172, 181, 0.99);
  }
  nav [data-frame="8700"] {
    fill: rgba(43, 172, 181, 0.99);
  }
}
nav #barcenter {
  -st-animation-name: barcenter;
}
@-st-frames barcenter {
  nav [data-frame="0"] {
    fill: rgba(51, 127, 177, 0.99);
  }
  nav [data-frame="600"] {
    fill: rgba(51, 127, 177, 0.99);
  }
  nav [data-frame="1720"] {
    fill: rgba(69, 155, 69, 0.99);
  }
  nav [data-frame="2800"] {
    fill: rgba(69, 155, 69, 0.99);
  }
  nav [data-frame="3800"] {
    fill: rgba(69, 155, 69, 0.99);
  }
  nav [data-frame="3820"] {
    fill: rgba(190, 61, 47, 0.99);
  }
  nav [data-frame="5900"] {
    fill: rgba(190, 61, 47, 0.99);
  }
  nav [data-frame="5920"] {
    fill: rgba(34, 144, 152, 0.99);
  }
  nav [data-frame="8400"] {
    fill: rgba(43, 172, 181, 0.99);
  }
  nav [data-frame="8420"] {
    fill: rgba(43, 172, 181, 0.99);
  }
  nav [data-frame="8700"] {
    fill: rgba(43, 172, 181, 0.99);
  }
}
nav #barright {
  -st-animation-name: barright;
}
@-st-frames barright {
  nav [data-frame="0"] {
    fill: rgba(51, 127, 177, 0.99);
  }
  nav [data-frame="1700"] {
    fill: rgba(51, 127, 177, 0.99);
  }
  nav [data-frame="1720"] {
    fill: rgba(69, 155, 69, 0.99);
  }
  nav [data-frame="2800"] {
    fill: rgba(69, 155, 69, 0.99);
  }
  nav [data-frame="3800"] {
    fill: rgba(69, 155, 69, 0.99);
  }
  nav [data-frame="3820"] {
    fill: rgba(190, 61, 47, 0.99);
  }
  nav [data-frame="5900"] {
    fill: rgba(190, 61, 47, 0.99);
  }
  nav [data-frame="5920"] {
    fill: rgba(34, 144, 152, 0.99);
  }
  nav [data-frame="8400"] {
    fill: rgba(34, 144, 152, 0.99);
  }
  nav [data-frame="8420"] {
    fill: rgba(34, 144, 152, 0.99);
  }
  nav [data-frame="8700"] {
    fill: rgba(34, 144, 152, 0.99);
  }
}

#scene1 .svg {
  width: 100%;
  height: 100%;
}
#scene1 #wire1 {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: 6000;
  stroke-dashoffset: 0;
  -st-animation-name: wire1;
}
@-st-frames wire1 {
  #scene1 [data-frame="100"] {
    stroke-dashoffset: 6000;
  }
  #scene1 [data-frame="2464"] {
    stroke-dashoffset: 0;
  }
}
#scene1 #linecover1 {
  opacity: 0;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
#scene1 #scrollthing {
  -st-animation-name: scrollthing;
}
#scene1 #viewresume {
  cursor: pointer;
  opacity: 0;
}
#scene1 #viewresume:hover {
  fill: rgba(44, 62, 80, 0.99);
}
#scene1 #scrolldown {
  opacity: 0;
}
@-st-frames scrollthing {
  #scene1 [data-frame="0"] {
    opacity: 1;
    transition-delay: 2000ms;
    transition-duration: 500ms;
  }
  #scene1 [data-frame="5"] {
    opacity: 1;
    transition-delay: 0;
    transition-duration: 0;
  }
  #scene1 [data-frame="30"] {
    opacity: 0;
    transition-delay: 0;
    transition-duration: 0;
  }
}
#scene1 #hellocontainer {
  -st-animation-name: hellohello;
}
@-st-frames hellohello {
  #scene1 [data-frame="0"] {
    transform[swing]: translate(355px, -30px);
  }
  #scene1 [data-frame="100"] {
    transform[swing]: translate(0px, 0px);
  }
}
#scene1 #subtitle {
  -st-animation-name: subtitle;
}
@-st-frames subtitle {
  #scene1 [data-frame="0"] {
    opacity: 1;
  }
  #scene1 [data-frame="50"] {
    opacity: 0;
  }
}
#scene1 #intro1 {
  -st-animation-name: intro1;
}
@-st-frames intro1 {
  #scene1 [data-frame="100"] {
    transform[swing]: translate(0, -10px);
    opacity: 0;
  }
  #scene1 [data-frame="200"] {
    transform[swing]: translate(0, 0px);
    opacity: 1;
  }
}
#scene1 #intro2 {
  -st-animation-name: intro2;
  cursor: pointer;
}
#scene1 #intro2:hover text {
  fill: rgba(214, 219, 220, 0.8) !important;
}
@-st-frames intro2 {
  #scene1 [data-frame="0"] {
    pointer-events: none;
  }
  #scene1 [data-frame="120"] {
    pointer-events: auto;
    transform[swing]: translate(0, -10px);
    opacity: 0;
  }
  #scene1 [data-frame="170"] {
    transform[swing]: translate(0, 0px);
    opacity: 1;
  }
}
#scene1 #intro3 {
  -st-animation-name: intro3;
}
@-st-frames intro3 {
  #scene1 [data-frame="230"] {
    transform[swing]: translate(0, -10px);
    opacity: 0;
  }
  #scene1 [data-frame="300"] {
    transform[swing]: translate(0, 0px);
    opacity: 1;
  }
}
#scene1 #macbook {
  -st-animation-name: macbook;
}
@-st-frames macbook {
  #scene1 [data-frame="50"] {
    transform[swing]: translate(0, -500px) rotate(-10deg);
    opacity: 0;
  }
  #scene1 [data-frame="150"] {
    transform[swing]: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
#scene1 #mouse {
  -st-animation-name: mouse;
}
@-st-frames mouse {
  #scene1 [data-frame="100"] {
    transform[swing]: translate(200px, 0px) rotate(-30deg);
    opacity: 0;
  }
  #scene1 [data-frame="200"] {
    transform[swing]: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
#scene1 #schema {
  -st-animation-name: schema;
}
@-st-frames schema {
  #scene1 [data-frame="100"] {
    transform[swing]: translate(0, -200px) rotate(-10deg);
    opacity: 0;
  }
  #scene1 [data-frame="200"] {
    transform[swing]: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
#scene1 #bevanda {
  -st-animation-name: bevanda;
}
@-st-frames bevanda {
  #scene1 [data-frame="150"] {
    transform[swing]: translate(0, -200px) rotate(-10deg);
    opacity: 0;
  }
  #scene1 [data-frame="250"] {
    transform[swing]: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
#scene1 #matita1 {
  -st-animation-name: matita1;
}
@-st-frames matita1 {
  #scene1 [data-frame="25"] {
    transform[swing]: translate(0, -200px) rotate(-10deg);
    opacity: 0;
  }
  #scene1 [data-frame="125"] {
    transform[swing]: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
#scene1 #cancelleria1 {
  -st-animation-name: cancelleria1;
}
@-st-frames cancelleria1 {
  #scene1 [data-frame="125"] {
    transform[swing]: translate(0, -200px) rotate(-10deg);
    opacity: 0;
  }
  #scene1 [data-frame="225"] {
    transform[swing]: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
#scene1 #righello {
  -st-animation-name: righello;
}
@-st-frames righello {
  #scene1 [data-frame="175"] {
    transform[swing]: translate(0, -200px) rotate(-10deg);
    opacity: 0;
  }
  #scene1 [data-frame="275"] {
    transform[swing]: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
#scene1 #gomma {
  -st-animation-name: gomma;
}
@-st-frames gomma {
  #scene1 [data-frame="120"] {
    transform[swing]: translate(0, -200px) rotate(-10deg);
    opacity: 0;
  }
  #scene1 [data-frame="220"] {
    transform[swing]: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
#scene1 #iphone {
  -st-animation-name: iphone2;
}
@-st-frames iphone2 {
  #scene1 [data-frame="150"] {
    transform[swing]: translate(-200px, 0) rotate(-10deg);
    opacity: 0;
  }
  #scene1 [data-frame="200"] {
    transform[swing]: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
#scene1 #occhiali {
  -st-animation-name: occhiali;
}
@-st-frames occhiali {
  #scene1 [data-frame="270"] {
    transform[swing]: translate(100px, -300px) rotate(-10deg);
    opacity: 0;
  }
  #scene1 [data-frame="310"] {
    transform[swing]: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
#scene1 #foglio1 {
  -st-animation-name: foglio1;
}
@-st-frames foglio1 {
  #scene1 [data-frame="0"] {
    transform[swing]: translate(0, -500px) rotate(-10deg);
    opacity: 0;
  }
  #scene1 [data-frame="75"] {
    transform[swing]: translate(0, -500px) rotate(-10deg);
    opacity: 1;
  }
  #scene1 [data-frame="175"] {
    transform[swing]: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
#scene1 #foglio2 {
  -st-animation-name: foglio2;
}
@-st-frames foglio2 {
  #scene1 [data-frame="50"] {
    transform[swing]: translate(-200px, 0) rotate(-10deg);
    opacity: 0;
  }
  #scene1 [data-frame="150"] {
    transform[swing]: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
#scene1 #calcolatrice {
  -st-animation-name: calcolatrice;
}
@-st-frames calcolatrice {
  #scene1 [data-frame="0"] {
    transform[swing]: translate(-500px, 0) rotate(-10deg);
    opacity: 0;
  }
  #scene1 [data-frame="200"] {
    transform[swing]: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}

#scene2 .svg {
  width: 100%;
  height: 100%;
}
#scene2 #wire2 {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: 6000;
  stroke-dashoffset: 0;
  -st-animation-name: wire2;
}
@-st-frames wire2 {
  #scene2 [data-frame="730"] {
    stroke-dashoffset: 6000;
  }
  #scene2 [data-frame="3220"] {
    stroke-dashoffset: 0;
  }
}
#scene2 #text1 {
  -st-animation-name: text1;
}
@-st-frames text1 {
  #scene2 [data-frame="800"] {
    opacity: 0;
  }
  #scene2 [data-frame="850"] {
    opacity: 1;
  }
}
#scene2 #text2 {
  -st-animation-name: text2;
}
@-st-frames text2 {
  #scene2 [data-frame="850"] {
    opacity: 0;
  }
  #scene2 [data-frame="900"] {
    opacity: 1;
  }
  #scene2 [data-frame="1050"] {
    opacity: 1;
  }
  #scene2 [data-frame="1100"] {
    opacity: 0;
  }
}
#scene2 #text3 {
  -st-animation-name: text3;
}
@-st-frames text3 {
  #scene2 [data-frame="1050"] {
    opacity: 0;
  }
  #scene2 [data-frame="1150"] {
    opacity: 1;
  }
}
#scene2 #london {
  -st-animation-name: london;
}
@-st-frames london {
  #scene2 [data-frame="1100"] {
    transform: translate(-250px, 600px);
  }
  #scene2 [data-frame="1300"] {
    transform: translate(0px, 0px);
  }
}
#scene2 #bus1 {
  -st-animation-name: bus1;
}
@-st-frames bus1 {
  #scene2 [data-frame="1200"] {
    transform: translate(400px, 275px) scale(0.12);
  }
  #scene2 [data-frame="2100"] {
    transform: translate(1000px, 275px) scale(0.12);
  }
}
#scene2 #bus2 {
  -st-animation-name: bus2;
}
@-st-frames bus2 {
  #scene2 [data-frame="1200"] {
    transform: translate(0, 0);
  }
  #scene2 [data-frame="2100"] {
    transform: translate(300px, 0px);
  }
}
#scene2 #planebig {
  -st-animation-name: planebig;
}
@-st-frames planebig {
  #scene2 [data-frame="1000"] {
    transform: translate(50px, 10px);
  }
  #scene2 [data-frame="1300"] {
    transform: translate(3000px, 200px);
  }
  #scene2 [data-frame="1500"] {
    transform: translate(8000px, 400px);
  }
}
#scene2 #clouds {
  -st-animation-name: clouds;
}
@-st-frames clouds {
  #scene2 [data-frame="750"] {
    transform: translate(-100px, 0px);
    opacity: 0;
  }
  #scene2 [data-frame="800"] {
    transform: translate(-50px, 0);
    opacity: 1;
  }
  #scene2 [data-frame="1600"] {
    transform: translate(0px, 0);
    opacity: 1;
  }
  #scene2 [data-frame="2000"] {
    opacity: 1;
    transform: translate(200px, 0);
  }
}
#scene2 #plane {
  -st-animation-name: plane;
}
@-st-frames plane {
  #scene2 [data-frame="750"] {
    transform: translate(-2600px, 0px);
    opacity: 1;
  }
  #scene2 [data-frame="1300"] {
    transform: translate(2600px, -600px);
    opacity: 1;
  }
}
#scene2 #mountains {
  -st-animation-name: mountains;
}
@-st-frames mountains {
  #scene2 [data-frame="850"] {
    transform: translate(-200px, 0px);
    opacity: 0;
  }
  #scene2 [data-frame="900"] {
    transform: translate(0px, 0px);
    opacity: 1;
  }
  #scene2 [data-frame="1100"] {
    transform: translate(50px, 0px);
    opacity: 1;
  }
  #scene2 [data-frame="1150"] {
    transform: translate(-200px, 0px);
    opacity: 0;
  }
}
#scene2 #torre {
  -st-animation-name: torre;
}
@-st-frames torre {
  #scene2 [data-frame="800"] {
    transform: translate(-1200px, 0px) scale(1);
    opacity: 1;
  }
  #scene2 [data-frame="850"] {
    transform: translate(-10px, 10px) scale(0.7);
    opacity: 1;
  }
  #scene2 [data-frame="1150"] {
    transform: translate(-10px, 10px) scale(0.7);
    opacity: 1;
  }
  #scene2 [data-frame="1200"] {
    transform: translate(-300px, 0px) scale(1);
    opacity: 0;
  }
}

#scene3 .svg {
  width: 100%;
  height: 100%;
}
#scene3 {
  background-color: #44c650;
}
#scene3 #wire3 {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: 6000;
  stroke-dashoffset: 0;
  -st-animation-name: wire3;
}
@-st-frames wire3 {
  #scene3 [data-frame="1825"] {
    stroke-dashoffset: 6000;
  }
  #scene3 [data-frame="3750"] {
    stroke-dashoffset: 0;
  }
}
#scene3 #title {
  -st-animation-name: s2-title;
}
@-st-frames s2-title {
  #scene3 [data-frame="1870"] {
    opacity: 0;
    transform[swing]: translate(0px, 0px);
  }
  #scene3 [data-frame="1900"] {
    opacity: 1;
    transform[swing]: translate(0px, 20px);
  }
}
#scene3 #linecover2 {
  -st-animation-name: wheel2;
  opacity: 0;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
#scene3 #tblock1 {
  -st-animation-name: tblock1;
}
@-st-frames tblock1 {
  #scene3 [data-frame="2170"] {
    opacity: 0;
    transform[swing]: translate(-30px, 0);
  }
  #scene3 [data-frame="2190"] {
    opacity: 1;
    transform[swing]: translate(0, 0);
  }
}
#scene3 #tblock2 {
  -st-animation-name: tblock2;
}
@-st-frames tblock2 {
  #scene3 [data-frame="2370"] {
    opacity: 0;
    transform[swing]: translate(-30px, 0);
  }
  #scene3 [data-frame="2390"] {
    opacity: 1;
    transform[swing]: translate(0, 0);
  }
}
#scene3 #tblock3 {
  -st-animation-name: tblock3;
}
@-st-frames tblock3 {
  #scene3 [data-frame="2430"] {
    opacity: 0;
    transform[swing]: translate(-20px, 0);
  }
  #scene3 [data-frame="2450"] {
    opacity: 1;
    transform[swing]: translate(0, 0);
  }
}
#scene3 #imac {
  -st-animation-name: imac;
}
#scene3 #imac #grid rect {
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
#scene3 #imac #gridbg {
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -st-animation-name: gridbg;
}
#scene3 #imac #grid1 {
  -st-animation-name: grid1;
}
#scene3 #imac #grid2 {
  -st-animation-name: grid2;
}
#scene3 #imac #grid3 {
  -st-animation-name: grid3;
}
#scene3 #imac #grid4 {
  -st-animation-name: grid4;
}
#scene3 #imac #grid5 {
  -st-animation-name: grid5;
}
#scene3 #imac #grid6 {
  -st-animation-name: grid6;
}
#scene3 #imac #grid7 {
  -st-animation-name: grid7;
}
#scene3 #imac #grid8 {
  -st-animation-name: grid8;
}
#scene3 #imac #grid9 {
  -st-animation-name: grid9;
}
#scene3 #imac #grid10 {
  -st-animation-name: grid10;
}
#scene3 #imac #grid11 {
  -st-animation-name: grid11;
}
#scene3 #imac #b1 {
  -st-animation-name: b1;
}
#scene3 #imac #b2 {
  -st-animation-name: b2;
}
#scene3 #imac #b3 {
  -st-animation-name: b3;
}
#scene3 #imac #b4 {
  -st-animation-name: b4;
}
#scene3 #imac #bg1 {
  -st-animation-name: s1-bg1;
}
#scene3 #imac #bg2 {
  -st-animation-name: s1-bg2;
}
#scene3 #imac #f1 {
  -st-animation-name: s1-f1;
}
#scene3 #imac #f8 {
  -st-animation-name: s1-f8;
}
#scene3 #imac #f13 {
  -st-animation-name: s1-f13;
}
#scene3 #imac #f18 {
  -st-animation-name: s1-f18;
}
@-st-frames gridbg {
  #scene3 [data-frame="2150"] {
    transform: scale(1, 0);
    opacity: 0;
  }
  #scene3 [data-frame="2180"] {
    transform: scale(1, 1);
    opacity: 1;
  }
}
@-st-frames grid1 {
  #scene3 [data-frame="2040"] {
    transform: scale(1, 0);
  }
  #scene3 [data-frame="2060"] {
    transform: scale(1, 1);
  }
}
@-st-frames grid2 {
  #scene3 [data-frame="2050"] {
    transform: scale(1, 0);
  }
  #scene3 [data-frame="2070"] {
    transform: scale(1, 1);
  }
}
@-st-frames grid3 {
  #scene3 [data-frame="2060"] {
    transform: scale(1, 0);
  }
  #scene3 [data-frame="2080"] {
    transform: scale(1, 1);
  }
}
@-st-frames grid4 {
  #scene3 [data-frame="2070"] {
    transform: scale(1, 0);
  }
  #scene3 [data-frame="2090"] {
    transform: scale(1, 1);
  }
}
@-st-frames grid5 {
  #scene3 [data-frame="2080"] {
    transform: scale(1, 0);
  }
  #scene3 [data-frame="2100"] {
    transform: scale(1, 1);
  }
}
@-st-frames grid6 {
  #scene3 [data-frame="2090"] {
    transform: scale(1, 0);
  }
  #scene3 [data-frame="2110"] {
    transform: scale(1, 1);
  }
}
@-st-frames grid7 {
  #scene3 [data-frame="2100"] {
    transform: scale(1, 0);
  }
  #scene3 [data-frame="2120"] {
    transform: scale(1, 1);
  }
}
@-st-frames grid8 {
  #scene3 [data-frame="2110"] {
    transform: scale(1, 0);
  }
  #scene3 [data-frame="2130"] {
    transform: scale(1, 1);
  }
}
@-st-frames grid9 {
  #scene3 [data-frame="2120"] {
    transform: scale(1, 0);
  }
  #scene3 [data-frame="2140"] {
    transform: scale(1, 1);
  }
}
@-st-frames grid10 {
  #scene3 [data-frame="2130"] {
    transform: scale(1, 0);
  }
  #scene3 [data-frame="2150"] {
    transform: scale(1, 1);
  }
}
@-st-frames grid11 {
  #scene3 [data-frame="2140"] {
    transform: scale(1, 0);
  }
  #scene3 [data-frame="2160"] {
    transform: scale(1, 1);
  }
}
@-st-frames s1-f18 {
  #scene3 [data-frame="2170"] {
    display: none;
  }
  #scene3 [data-frame="2190"] {
    display: inline;
  }
}
@-st-frames b4 {
  #scene3 [data-frame="2180"] {
    display: none;
  }
  #scene3 [data-frame="2200"] {
    display: inline;
  }
}
@-st-frames s1-f13 {
  #scene3 [data-frame="2190"] {
    display: none;
  }
  #scene3 [data-frame="2210"] {
    display: inline;
  }
}
@-st-frames b3 {
  #scene3 [data-frame="2200"] {
    display: none;
  }
  #scene3 [data-frame="2220"] {
    display: inline;
  }
}
@-st-frames s1-f8 {
  #scene3 [data-frame="2210"] {
    display: none;
  }
  #scene3 [data-frame="2230"] {
    display: inline;
  }
}
@-st-frames b2 {
  #scene3 [data-frame="2220"] {
    display: none;
  }
  #scene3 [data-frame="2240"] {
    display: inline;
  }
}
@-st-frames b1 {
  #scene3 [data-frame="2230"] {
    display: none;
  }
  #scene3 [data-frame="2250"] {
    display: inline;
  }
}
@-st-frames s1-f1 {
  #scene3 [data-frame="2240"] {
    display: none;
  }
  #scene3 [data-frame="2260"] {
    display: inline;
  }
}
@-st-frames s1-bg2 {
  #scene3 [data-frame="2250"] {
    display: none;
  }
  #scene3 [data-frame="2270"] {
    display: inline;
  }
}
@-st-frames s1-bg1 {
  #scene3 [data-frame="2280"] {
    opacity: 0;
  }
  #scene3 [data-frame="2300"] {
    opacity: 1;
  }
}
#scene3 #ipad {
  -st-animation-name: ipad;
}
#scene3 #ipad #s2 #s2-bg1 {
  -st-animation-name: s2-bg1;
}
#scene3 #ipad #s2 #g1 {
  -st-animation-name: s2-g1;
}
#scene3 #ipad #s2 #g2g {
  -st-animation-name: s2-g2g;
}
#scene3 #ipad #s2 #g6g {
  -st-animation-name: s2-g6g;
}
#scene3 #ipad #s2 #g10 {
  -st-animation-name: s2-g10;
}
#scene3 #ipad #s2 #g11g {
  -st-animation-name: s2-g11g;
}
#scene3 #ipad #s2 #g15 {
  -st-animation-name: s2-g15;
}
#scene3 #ipad #s2 #g16 {
  -st-animation-name: s2-g16;
}
#scene3 #ipad #s2 #g17 {
  -st-animation-name: s2-g17;
}
#scene3 #ipad #s2 #g18 {
  -st-animation-name: s2-g18;
}
#scene3 #ipad #s2 #g19 {
  -st-animation-name: s2-g19;
}
#scene3 #ipad #s2 #g20 {
  -st-animation-name: s2-g20;
}
#scene3 #ipad #s2 #g21 {
  -st-animation-name: s2-g21;
}
@-st-frames ipad {
  #scene3 [data-frame="2370"] {
    opacity: 0;
    transform[swing]: translate(10px, 0);
  }
  #scene3 [data-frame="2400"] {
    opacity: 1;
    transform[swing]: translate(0px, 0);
  }
}
@-st-frames s2-bg1 {
  #scene3 [data-frame="2400"] {
    display: none;
  }
  #scene3 [data-frame="2420"] {
    display: inline;
  }
}
@-st-frames s2-g1 {
  #scene3 [data-frame="2480"] {
    display: none;
  }
  #scene3 [data-frame="2500"] {
    display: inline;
  }
}
@-st-frames s2-g2g {
  #scene3 [data-frame="2490"] {
    display: none;
  }
  #scene3 [data-frame="2510"] {
    display: inline;
  }
}
@-st-frames s2-g6g {
  #scene3 [data-frame="2500"] {
    display: none;
  }
  #scene3 [data-frame="2520"] {
    display: inline;
  }
}
@-st-frames s2-g10 {
  #scene3 [data-frame="2510"] {
    display: none;
  }
  #scene3 [data-frame="2530"] {
    display: inline;
  }
}
@-st-frames s2-g11g {
  #scene3 [data-frame="2520"] {
    display: none;
  }
  #scene3 [data-frame="2540"] {
    display: inline;
  }
}
@-st-frames s2-g15 {
  #scene3 [data-frame="2530"] {
    display: none;
  }
  #scene3 [data-frame="2550"] {
    display: inline;
  }
}
@-st-frames s2-g16 {
  #scene3 [data-frame="2540"] {
    display: none;
  }
  #scene3 [data-frame="2560"] {
    display: inline;
  }
}
@-st-frames s2-g17 {
  #scene3 [data-frame="2550"] {
    display: none;
  }
  #scene3 [data-frame="2570"] {
    display: inline;
  }
}
@-st-frames s2-g18 {
  #scene3 [data-frame="2560"] {
    display: none;
  }
  #scene3 [data-frame="2580"] {
    display: inline;
  }
}
@-st-frames s2-g19 {
  #scene3 [data-frame="2570"] {
    display: none;
  }
  #scene3 [data-frame="2590"] {
    display: inline;
  }
}
@-st-frames s2-g20 {
  #scene3 [data-frame="2580"] {
    display: none;
  }
  #scene3 [data-frame="2600"] {
    display: inline;
  }
}
@-st-frames s2-g21 {
  #scene3 [data-frame="2590"] {
    display: none;
  }
  #scene3 [data-frame="2610"] {
    display: inline;
  }
}
#scene3 #iphone {
  -st-animation-name: iphone;
}
#scene3 #iphone #s3 #s3-bg1 {
  -st-animation-name: s3-bg1;
}
#scene3 #iphone #s3 #i1 {
  -st-animation-name: s3-i1;
}
#scene3 #iphone #s3 #i2 {
  -st-animation-name: s3-i2;
}
#scene3 #iphone #s3 #i3 {
  -st-animation-name: s3-i3;
}
#scene3 #iphone #s3 #i4 {
  -st-animation-name: s3-i4;
}
#scene3 #iphone #s3 #i5 {
  -st-animation-name: s3-i5;
}
#scene3 #iphone #s3 #i6 {
  -st-animation-name: s3-i6;
}
#scene3 #iphone #s3 #i7 {
  -st-animation-name: s3-i7;
}
#scene3 #iphone #s3 #i8 {
  -st-animation-name: s3-i8;
}
#scene3 #iphone #s3 #i9 {
  -st-animation-name: s3-i9;
}
#scene3 #iphone #s3 #i10 {
  -st-animation-name: s3-i10;
}
#scene3 #iphone #s3 #i11 {
  -st-animation-name: s3-i11;
}
@-st-frames iphone {
  #scene3 [data-frame="2320"] {
    transform[swing]: translate(10px, 0);
    opacity: 0;
  }
  #scene3 [data-frame="2350"] {
    opacity: 1;
    transform[swing]: translate(0px, 0);
  }
}
@-st-frames s3-bg1 {
  #scene3 [data-frame="2330"] {
    display: none;
  }
  #scene3 [data-frame="2350"] {
    display: inline;
  }
}
@-st-frames s3-i1 {
  #scene3 [data-frame="2350"] {
    display: none;
  }
  #scene3 [data-frame="2370"] {
    display: inline;
  }
}
@-st-frames s3-i2 {
  #scene3 [data-frame="2360"] {
    display: none;
  }
  #scene3 [data-frame="2380"] {
    display: inline;
  }
}
@-st-frames s3-i3 {
  #scene3 [data-frame="2370"] {
    display: none;
  }
  #scene3 [data-frame="2390"] {
    display: inline;
  }
}
@-st-frames s3-i4 {
  #scene3 [data-frame="2380"] {
    display: none;
  }
  #scene3 [data-frame="2400"] {
    display: inline;
  }
}
@-st-frames s3-i5 {
  #scene3 [data-frame="2390"] {
    display: none;
  }
  #scene3 [data-frame="2410"] {
    display: inline;
  }
}
@-st-frames s3-i6 {
  #scene3 [data-frame="2400"] {
    display: none;
  }
  #scene3 [data-frame="2420"] {
    display: inline;
  }
}
@-st-frames s3-i7 {
  #scene3 [data-frame="2410"] {
    display: none;
  }
  #scene3 [data-frame="2430"] {
    display: inline;
  }
}
@-st-frames s3-i8 {
  #scene3 [data-frame="2420"] {
    display: none;
  }
  #scene3 [data-frame="2440"] {
    display: inline;
  }
}
@-st-frames s3-i9 {
  #scene3 [data-frame="2430"] {
    display: none;
  }
  #scene3 [data-frame="2450"] {
    display: inline;
  }
}
@-st-frames s3-i10 {
  #scene3 [data-frame="2460"] {
    display: none;
  }
  #scene3 [data-frame="2480"] {
    display: inline;
  }
}
@-st-frames s3-i11 {
  #scene3 [data-frame="2470"] {
    display: none;
  }
  #scene3 [data-frame="2490"] {
    display: inline;
  }
}
#scene3 #appunti {
  -st-animation-name: appunti;
}
#scene3 #appunti #ag1 {
  -st-animation-name: ag1;
}
#scene3 #appunti #ag2 {
  -st-animation-name: ag2;
}
#scene3 #appunti #ag3 {
  -st-animation-name: ag3;
}
#scene3 #appunti #ag4 {
  -st-animation-name: ag4;
}
#scene3 #appunti #ag5 {
  -st-animation-name: ag5;
}
@-st-frames appunti {
  #scene3 [data-frame="2375"] {
    transform[swing]: translate(0, 510px);
  }
  #scene3 [data-frame="2425"] {
    transform[swing]: translate(0, 0);
  }
}
@-st-frames ag1 {
  #scene3 [data-frame="2425"] {
    opacity: 0;
  }
  #scene3 [data-frame="2445"] {
    opacity: 1;
  }
}
@-st-frames ag2 {
  #scene3 [data-frame="2445"] {
    opacity: 0;
  }
  #scene3 [data-frame="2475"] {
    opacity: 1;
  }
}
@-st-frames ag3 {
  #scene3 [data-frame="2455"] {
    opacity: 0;
  }
  #scene3 [data-frame="2475"] {
    opacity: 1;
  }
}
@-st-frames ag4 {
  #scene3 [data-frame="2465"] {
    opacity: 0;
  }
  #scene3 [data-frame="2485"] {
    opacity: 1;
  }
}
@-st-frames ag5 {
  #scene3 [data-frame="2475"] {
    opacity: 0;
  }
  #scene3 [data-frame="2495"] {
    opacity: 1;
  }
}
#scene3 #diagramma1 {
  -st-animation-name: diagramma1;
}
#scene3 #diagramma1 #dg1 {
  -st-animation-name: dg1;
}
#scene3 #diagramma1 #dg2 {
  -st-animation-name: dg2;
}
#scene3 #diagramma1 #dg3 {
  -st-animation-name: dg3;
}
#scene3 #diagramma1 #dg4 {
  -st-animation-name: dg4;
}
#scene3 #diagramma1 #dg5 {
  -st-animation-name: dg5;
}
#scene3 #diagramma1 #dg6 {
  -st-animation-name: dg6;
}
#scene3 #diagramma1 #dg7 {
  -st-animation-name: dg7;
}
#scene3 #diagramma1 #dg8 {
  -st-animation-name: dg8;
}
#scene3 #diagramma1 #dg9 {
  -st-animation-name: dg9;
}
@-st-frames diagramma1 {
  #scene3 [data-frame="2520"] {
    transform[swing]: translate(0, 610px);
  }
  #scene3 [data-frame="2570"] {
    transform[swing]: translate(0, 0);
  }
}
@-st-frames dg1 {
  #scene3 [data-frame="2590"] {
    opacity: 0;
  }
  #scene3 [data-frame="2610"] {
    opacity: 1;
  }
}
@-st-frames dg2 {
  #scene3 [data-frame="2600"] {
    opacity: 0;
  }
  #scene3 [data-frame="2620"] {
    opacity: 1;
  }
}
@-st-frames dg3 {
  #scene3 [data-frame="2610"] {
    opacity: 0;
  }
  #scene3 [data-frame="2630"] {
    opacity: 1;
  }
}
@-st-frames dg4 {
  #scene3 [data-frame="2620"] {
    opacity: 0;
  }
  #scene3 [data-frame="2640"] {
    opacity: 1;
  }
}
@-st-frames dg5 {
  #scene3 [data-frame="2630"] {
    opacity: 0;
  }
  #scene3 [data-frame="2650"] {
    opacity: 1;
  }
}
@-st-frames dg6 {
  #scene3 [data-frame="2640"] {
    opacity: 0;
  }
  #scene3 [data-frame="2660"] {
    opacity: 1;
  }
}
@-st-frames dg7 {
  #scene3 [data-frame="2650"] {
    opacity: 0;
  }
  #scene3 [data-frame="2670"] {
    opacity: 1;
  }
}
@-st-frames dg8 {
  #scene3 [data-frame="2660"] {
    opacity: 0;
  }
  #scene3 [data-frame="2680"] {
    opacity: 1;
  }
}
@-st-frames dg9 {
  #scene3 [data-frame="2670"] {
    opacity: 0;
  }
  #scene3 [data-frame="2690"] {
    opacity: 1;
  }
}
#scene3 #fullstack {
  -st-animation-name: fullstack;
}
@-st-frames fullstack {
  #scene3 [data-frame="2330"] {
    opacity: 0;
  }
  #scene3 [data-frame="2350"] {
    opacity: 1;
  }
}

#scene4 #wire4 {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: 6000;
  stroke-dashoffset: 0;
  -st-animation-name: wire4;
}
@-st-frames wire4 {
  #scene4 [data-frame="2695"] {
    stroke-dashoffset: 6000;
  }
  #scene4 [data-frame="4250"] {
    stroke-dashoffset: 0;
  }
}
#scene4 #interested {
  -st-animation-name: interested;
}
@-st-frames interested {
  #scene4 [data-frame="3250"] {
    opacity: 0;
  }
  #scene4 [data-frame="3300"] {
    opacity: 1;
  }
}
#scene4 #lalineag {
  -st-animation-name: lalineag;
}
@-st-frames lalineag {
  #scene4 [data-frame="3200"] {
    opacity: 0;
  }
  #scene4 [data-frame="3250"] {
    opacity: 1;
  }
}
#scene4 #list {
  -st-animation-name: list;
}
@-st-frames list {
  #scene4 [data-frame="3000"] {
    transform: translate(0px, 0px) scale(1);
  }
  #scene4 [data-frame="3050"] {
    transform: translate(-200px, -230px) scale(2);
  }
}
#scene4 #listshadow {
  -st-animation-name: listshadow;
}
@-st-frames listshadow {
  #scene4 [data-frame="3000"] {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  #scene4 [data-frame="3020"] {
    transform: translate(-60px, -3px) scale(1.1);
    opacity: 0;
  }
}
#scene4 #list2 {
  -st-animation-name: list2;
}
@-st-frames list2 {
  #scene4 [data-frame="3200"] {
    transform: translate(0px, 0px) scale(1);
  }
  #scene4 [data-frame="3250"] {
    transform: translate(-1000px, -900px) scale(2.5);
  }
}
#scene4 #list2shadow {
  -st-animation-name: list2shadow;
}
@-st-frames list2shadow {
  #scene4 [data-frame="3200"] {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  #scene4 [data-frame="3220"] {
    transform: translate(-60px, -3px) scale(1.1);
    opacity: 0;
  }
}
#scene4 #book1 {
  cursor: pointer;
  -st-animation-name: book1;
}
@-st-frames book1 {
  #scene4 [data-frame="2850"] {
    opacity: 0;
    transform: translate(-20px, -20px);
  }
  #scene4 [data-frame="2900"] {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
#scene4 #book3 {
  cursor: pointer;
  -st-animation-name: book3;
}
@-st-frames book3 {
  #scene4 [data-frame="2800"] {
    opacity: 0;
    transform: translate(-20px, -20px) scale(0.3) rotate(12);
  }
  #scene4 [data-frame="2850"] {
    opacity: 1;
    transform: translate(0px, 0px) scale(0.3) rotate(12);
  }
}
#scene4 #notebook1 {
  -st-animation-name: notebook1;
}
@-st-frames notebook1 {
  #scene4 [data-frame="2900"] {
    opacity: 0;
    transform: translate(30, -210) rotate(-3);
  }
  #scene4 [data-frame="2950"] {
    opacity: 1;
    transform: translate(50, -190.8734) rotate(-3);
  }
}
#scene4 #book2 {
  cursor: pointer;
  -st-animation-name: book2;
}
@-st-frames book2 {
  #scene4 [data-frame="2950"] {
    opacity: 0;
    transform: translate(-20px, -20px);
  }
  #scene4 [data-frame="3000"] {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
#scene4 #book4 {
  -st-animation-name: book4;
}
@-st-frames book4 {
  #scene4 [data-frame="3000"] {
    opacity: 0;
    transform: translate(1000px, 800px) rotate(-6.4) scale(0.49);
  }
  #scene4 [data-frame="3050"] {
    opacity: 1;
    transform: translate(1000px, 600px) rotate(-6.4) scale(0.49);
  }
}
#scene4 #book5 {
  -st-animation-name: book5;
}
#scene4 #drawing {
  -st-animation-name: drawing;
}
@-st-frames book5 {
  #scene4 [data-frame="3150"] {
    opacity: 0;
    transform: translate(-20px, -20px);
  }
  #scene4 [data-frame="3200"] {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
@-st-frames drawing {
  #scene4 [data-frame="3100"] {
    opacity: 0;
    transform: translate(450, 0) scale(0.4);
  }
  #scene4 [data-frame="3150"] {
    opacity: 1;
    transform: translate(500, 260) scale(0.4);
  }
}

#videoPlayer {
  -st-animation-name: a_videoplayer;
}

@-st-frames a_videoplayer {
  [data-frame="5450"] {
    opacity: 0;
    display: none;
  }
  [data-frame="5470"] {
    opacity: 1;
    display: inline;
  }
  [data-frame="5690"] {
    opacity: 1;
    display: inline;
  }
  [data-frame="5710"] {
    opacity: 0;
    display: none;
  }
}
#scene5 #wire5 {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: 6000;
  stroke-dashoffset: 0;
  -st-animation-name: wire5;
}
@-st-frames wire5 {
  #scene5 [data-frame="3715"] {
    stroke-dashoffset: 6000;
  }
  #scene5 [data-frame="5100"] {
    stroke-dashoffset: 0;
  }
}
#scene5 #bg {
  -st-animation-name: bg;
}
@-st-frames bg {
  #scene5 [data-frame="4100"] {
    opacity: 0;
  }
  #scene5 [data-frame="4260"] {
    opacity: 0;
  }
  #scene5 [data-frame="4300"] {
    opacity: 1;
  }
  #scene5 [data-frame="4450"] {
    opacity: 1;
  }
  #scene5 [data-frame="4490"] {
    opacity: 0;
  }
}
#scene5 #scene {
  -st-animation-name: scene4r;
}
@-st-frames scene4r {
  #scene5 [data-frame="5250"] {
    transform: rotate(0deg) translate(0px, 0px) scale(1);
  }
  #scene5 [data-frame="5450"] {
    transform: rotate(90deg) translate(-6930px, -530px) scale(8);
  }
}
#scene5 #fg {
  -st-animation-name: fgg;
}
@-st-frames fgg {
  #scene5 [data-frame="4100"] {
    opacity: 0;
  }
  #scene5 [data-frame="4260"] {
    opacity: 0;
  }
  #scene5 [data-frame="4300"] {
    opacity: 0.4;
  }
  #scene5 [data-frame="4450"] {
    opacity: 0.4;
  }
  #scene5 [data-frame="4490"] {
    opacity: 0;
  }
}
#scene5 #titles #title1 {
  -st-animation-name: title1;
}
#scene5 #titles #title2 {
  -st-animation-name: title2;
}
#scene5 #titles #title3 {
  -st-animation-name: title3;
}
@-st-frames title1 {
  #scene5 [data-frame="4100"] {
    opacity: 0;
  }
  #scene5 [data-frame="4200"] {
    opacity: 1;
  }
  #scene5 [data-frame="4400"] {
    opacity: 1;
  }
  #scene5 [data-frame="4450"] {
    opacity: 0;
  }
}
@-st-frames title2 {
  #scene5 [data-frame="4100"] {
    opacity: 0;
  }
  #scene5 [data-frame="4500"] {
    opacity: 0;
  }
  #scene5 [data-frame="4550"] {
    opacity: 1;
  }
  #scene5 [data-frame="5000"] {
    opacity: 1;
  }
  #scene5 [data-frame="5050"] {
    opacity: 0;
  }
}
@-st-frames title3 {
  #scene5 [data-frame="5040"] {
    opacity: 0;
  }
  #scene5 [data-frame="5080"] {
    opacity: 1;
  }
}
#scene5 #desks {
  -st-animation-name: desks;
}
#scene5 #desks #employee {
  -st-animation-name: employee;
}
#scene5 #desks #entrepeneur {
  -st-animation-name: entrepeneur;
}
#scene5 #desks #freelance {
  -st-animation-name: freelance;
}
@-st-frames desks {
  #scene5 [data-frame="4500"] {
    transform: translate(0px, 0px) scale(1);
  }
  #scene5 [data-frame="4550"] {
    transform: translate(300px, 0px) scale(0.6);
  }
  #scene5 [data-frame="5000"] {
    transform: translate(300px, 0px) scale(0.6);
  }
  #scene5 [data-frame="5050"] {
    transform: translate(0px, 0px) scale(1);
  }
}
#scene5 #clients #vneuron {
  -st-animation-name: vneuron;
  cursor: pointer;
}
#scene5 #clients #makerlab {
  -st-animation-name: makerlab;
  cursor: pointer;
}
#scene5 #clients #sofia {
  -st-animation-name: sofia;
  cursor: pointer;
}
#scene5 #clients #eonics {
  -st-animation-name: eonics;
  cursor: pointer;
}
#scene5 #clients #rabobank {
  -st-animation-name: rabobank;
  cursor: pointer;
}
#scene5 #clients #ah {
  -st-animation-name: ah;
  cursor: pointer;
}
#scene5 #clients #googlejam {
  -st-animation-name: googlejam;
  cursor: pointer;
}
#scene5 #clients #sfaxcpc {
  -st-animation-name: sfaxcpc;
  cursor: pointer;
}
@-st-frames sofia {
  #scene5 [data-frame="4200"] {
    transform: translate(-3000px, -8000px) scale(16);
    opacity: 0;
  }
  #scene5 [data-frame="4250"] {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
}
@-st-frames vneuron {
  #scene5 [data-frame="4240"] {
    transform: translate(0px, 1000px);
    opacity: 0;
  }
  #scene5 [data-frame="4310"] {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@-st-frames makerlab {
  #scene5 [data-frame="4360"] {
    transform: translate(-3000px, -8000px) scale(16);
    opacity: 0;
  }
  #scene5 [data-frame="4410"] {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
}
@-st-frames eonics {
  #scene5 [data-frame="4450"] {
    transform: translate(-2600px, -8000px) scale(16);
    opacity: 0;
  }
  #scene5 [data-frame="4550"] {
    transform: translate(-13.6981, 100.055) scale(1);
    opacity: 1;
  }
}
@-st-frames rabobank {
  #scene5 [data-frame="4550"] {
    transform: translate(-2400px, -8000px) scale(16);
    opacity: 0;
  }
  #scene5 [data-frame="4650"] {
    transform: translate(30.72, 150.055) scale(1);
    opacity: 1;
  }
}
@-st-frames ah {
  #scene5 [data-frame="4650"] {
    transform: translate(-2200px, -5000px) scale(16);
    opacity: 0;
  }
  #scene5 [data-frame="4750"] {
    transform: translate(80.72, 200.055) scale(1);
    opacity: 1;
  }
}
@-st-frames googlejam {
  #scene5 [data-frame="4220"] {
    transform: translate(-2600px, -8000px) scale(1) rotate(7.2);
    opacity: 0;
  }
  #scene5 [data-frame="4270"] {
    transform: translate(636.72, 204.062) scale(0.4) rotate(7.2);
    opacity: 1;
  }
}
@-st-frames sfaxcpc {
  #scene5 [data-frame="4300"] {
    transform: translate(-4700px, -8000px) scale(10);
    opacity: 0;
  }
  #scene5 [data-frame="4400"] {
    transform: translate(-15.6153, -175.672) scale(1);
    opacity: 1;
  }
}
#scene5 #mouse04 {
  -st-animation-name: mouse04;
}
@-st-frames mouse04 {
  #scene5 [data-frame="3900"] {
    transform: rotate(1deg);
  }
  #scene5 [data-frame="3950"] {
    transform: rotate(-1deg);
  }
  #scene5 [data-frame="4000"] {
    transform: rotate(2deg);
  }
  #scene5 [data-frame="4050"] {
    transform: rotate(-1deg);
  }
  #scene5 [data-frame="4100"] {
    transform: rotate(0deg);
  }
  #scene5 [data-frame="4150"] {
    transform: rotate(0deg);
  }
  #scene5 [data-frame="4200"] {
    transform: rotate(-1deg);
  }
  #scene5 [data-frame="4250"] {
    transform: rotate(-2deg);
  }
  #scene5 [data-frame="4400"] {
    transform: rotate(-2deg);
  }
  #scene5 [data-frame="4450"] {
    transform: rotate(1deg);
  }
  #scene5 [data-frame="4650"] {
    transform: rotate(1deg);
  }
  #scene5 [data-frame="4700"] {
    transform: rotate(2deg);
  }
  #scene5 [data-frame="4750"] {
    transform: rotate(1deg);
  }
  #scene5 [data-frame="4850"] {
    transform: rotate(0deg);
  }
  #scene5 [data-frame="4950"] {
    transform: rotate(1deg);
  }
  #scene5 [data-frame="5150"] {
    transform: rotate(2deg);
  }
  #scene5 [data-frame="5350"] {
    transform: rotate(-1deg);
  }
}
#scene5 #mouse04-1 {
  -st-animation-name: mouse04-1;
}
@-st-frames mouse04-1 {
  #scene5 [data-frame="3900"] {
    transform: rotate(1deg);
  }
  #scene5 [data-frame="3950"] {
    transform: rotate(-1deg);
  }
  #scene5 [data-frame="4000"] {
    transform: rotate(2deg);
  }
  #scene5 [data-frame="4050"] {
    transform: rotate(-1deg);
  }
  #scene5 [data-frame="4100"] {
    transform: rotate(0deg);
  }
  #scene5 [data-frame="4150"] {
    transform: rotate(0deg);
  }
  #scene5 [data-frame="4200"] {
    transform: rotate(-1deg);
  }
  #scene5 [data-frame="4250"] {
    transform: rotate(-2deg);
  }
  #scene5 [data-frame="4400"] {
    transform: rotate(-2deg);
  }
  #scene5 [data-frame="4450"] {
    transform: rotate(1deg);
  }
  #scene5 [data-frame="4650"] {
    transform: rotate(1deg);
  }
  #scene5 [data-frame="4700"] {
    transform: rotate(2deg);
  }
  #scene5 [data-frame="4750"] {
    transform: rotate(1deg);
  }
  #scene5 [data-frame="4850"] {
    transform: rotate(0deg);
  }
  #scene5 [data-frame="4950"] {
    transform: rotate(1deg);
  }
  #scene5 [data-frame="5150"] {
    transform: rotate(2deg);
  }
  #scene5 [data-frame="5350"] {
    transform: rotate(-1deg);
  }
}
#scene5 #mouse04-2 {
  -st-animation-name: mouse04-2;
}
@-st-frames mouse04-2 {
  #scene5 [data-frame="3900"] {
    transform: rotate(1deg);
  }
  #scene5 [data-frame="3950"] {
    transform: rotate(-1deg);
  }
  #scene5 [data-frame="4000"] {
    transform: rotate(2deg);
  }
  #scene5 [data-frame="4050"] {
    transform: rotate(-1deg);
  }
  #scene5 [data-frame="4100"] {
    transform: rotate(0deg);
  }
  #scene5 [data-frame="4150"] {
    transform: rotate(0deg);
  }
  #scene5 [data-frame="4200"] {
    transform: rotate(-1deg);
  }
  #scene5 [data-frame="4250"] {
    transform: rotate(-2deg);
  }
  #scene5 [data-frame="4400"] {
    transform: rotate(-2deg);
  }
  #scene5 [data-frame="4450"] {
    transform: rotate(1deg);
  }
  #scene5 [data-frame="4650"] {
    transform: rotate(1deg);
  }
  #scene5 [data-frame="4700"] {
    transform: rotate(2deg);
  }
  #scene5 [data-frame="4750"] {
    transform: rotate(1deg);
  }
  #scene5 [data-frame="4850"] {
    transform: rotate(0deg);
  }
  #scene5 [data-frame="4950"] {
    transform: rotate(1deg);
  }
  #scene5 [data-frame="5150"] {
    transform: rotate(2deg);
  }
  #scene5 [data-frame="5350"] {
    transform: rotate(-1deg);
  }
}
@-st-frames employee {
  #scene5 [data-frame="4500"] {
    opacity: 0;
  }
  #scene5 [data-frame="4550"] {
    opacity: 1;
  }
  #scene5 [data-frame="5000"] {
    opacity: 1;
  }
  #scene5 [data-frame="5050"] {
    opacity: 0;
  }
}
@-st-frames entrepeneur {
  #scene5 [data-frame="5000"] {
    opacity: 0;
  }
  #scene5 [data-frame="5050"] {
    opacity: 1;
  }
}
@-st-frames freelance {
  #scene5 [data-frame="4500"] {
    opacity: 1;
  }
  #scene5 [data-frame="4550"] {
    opacity: 0;
  }
}
#scene5 #deskleft {
  -st-animation-name: deskleft;
}
@-st-frames deskleft {
  #scene5 [data-frame="4500"] {
    opacity: 0;
    transform: translate(-500px, 0px);
  }
  #scene5 [data-frame="4550"] {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  #scene5 [data-frame="5000"] {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  #scene5 [data-frame="5050"] {
    opacity: 0;
    transform: translate(-500px, 0px);
  }
}
#scene5 #deskright {
  -st-animation-name: deskright;
}
@-st-frames deskright {
  #scene5 [data-frame="4500"] {
    opacity: 0;
    transform: translate(500px, 0px);
  }
  #scene5 [data-frame="4550"] {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  #scene5 [data-frame="5000"] {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  #scene5 [data-frame="5050"] {
    opacity: 0;
    transform: translate(500px, 0px);
  }
}

@font-face {
  font-family: "Simple Chalk Regular";
  font-style: normal;
  font-weight: normal;
  src: url("/assets/Simple%20Chalk-BopKzs2d.woff") format("woff");
}
#scene6 .scene-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
  pointer-events: none;
  -st-animation-name: a_scene6_content;
}
@-st-frames a_scene6_content {
  #scene6 [data-frame="5900"] {
    display: block;
    opacity: 0;
  }
  #scene6 [data-frame="6200"] {
    opacity: 1;
  }
}
#scene6 #skills_container {
  -st-animation-name: a_scene6_skillscontainer;
}
@-st-frames a_scene6_skillsContainer {
  #scene6 [data-frame="7400"] {
    opacity: 1;
    display: block;
  }
  #scene6 [data-frame="7450"] {
    opacity: 0.5;
    display: block;
  }
  #scene6 [data-frame="7460"] {
    display: none;
  }
}
#scene6 .word {
  position: absolute;
  opacity: 0;
  width: 100%;
  white-space: nowrap;
  transform-origin: 0 0;
  color: #f5ecd9;
  font-weight: 100;
}
#scene6 .polaroid {
  width: 36vh;
  height: 36vh;
  background: #1e1c18;
  border: 2vh solid #f5f5f5;
  border-bottom: 8vh solid #f5f5f5;
  box-shadow: 0 0 1vh -0.1vh #000;
  overflow: hidden;
}
#scene6 .caption {
  width: 32vh;
  margin-top: -7vh;
  margin-left: 5vh;
  font-family: "Simple Chalk Regular";
  font-size: 3.5vh;
}
#scene6 #photo_container {
  position: relative;
  width: 100%;
  height: 100%;
}
#scene6 .photo1 {
  position: absolute;
  left: 0;
  -st-animation-name: a_scene6_photo1;
}
@-st-frames a_scene6_photo1 {
  #scene6 [data-frame="7700"] {
    transform: translate(-60vh, 0vh) rotate(0deg);
  }
  #scene6 [data-frame="7750"] {
    transform: translate(9vh, 5vh) rotate(-5deg);
  }
}
#scene6 .photo2 {
  position: absolute;
  left: 3vh;
  -st-animation-name: a_scene6_photo2;
}
@-st-frames a_scene6_photo2 {
  #scene6 [data-frame="7800"] {
    transform: translate(-60vh, 0vh) rotate(-5deg);
  }
  #scene6 [data-frame="7850"] {
    transform: translate(10vh, 8vh) rotate(0deg);
  }
}
#scene6 .photo3 {
  position: absolute;
  left: 0vh;
  -st-animation-name: a_scene6_photo3;
}
@-st-frames a_scene6_photo3 {
  #scene6 [data-frame="7900"] {
    transform: translate(-60vh, 0vh) rotate(0deg);
  }
  #scene6 [data-frame="7950"] {
    transform: translate(3vh, 12vh) rotate(5deg);
  }
}
#scene6 .photo4 {
  position: absolute;
  left: 4vh;
  -st-animation-name: a_scene6_photo4;
}
@-st-frames a_scene6_photo4 {
  #scene6 [data-frame="8000"] {
    transform: translate(-60vh, 0vh) rotate(0deg);
  }
  #scene6 [data-frame="8050"] {
    transform: translate(8vh, 7vh) rotate(-4deg);
  }
}
#scene6 .photo5 {
  position: absolute;
  left: 4vh;
  -st-animation-name: a_scene6_photo5;
}
@-st-frames a_scene6_photo5 {
  #scene6 [data-frame="8100"] {
    transform: translate(-60vh, 0vh) rotate(0deg);
  }
  #scene6 [data-frame="8150"] {
    transform: translate(11vh, 8vh) rotate(3deg);
  }
}
#scene6 .photo6 {
  position: absolute;
  left: 4vh;
  -st-animation-name: a_scene6_photo6;
}
@-st-frames a_scene6_photo6 {
  #scene6 [data-frame="8200"] {
    transform: translate(-60vh, 0vh) rotate(0deg);
  }
  #scene6 [data-frame="8250"] {
    transform: translate(6vh, 11vh) rotate(2deg);
  }
}
#scene6 .photo7 {
  position: absolute;
  left: 4vh;
  -st-animation-name: a_scene6_photo7;
}
@-st-frames a_scene6_photo7 {
  #scene6 [data-frame="8300"] {
    transform: translate(-60vh, 0vh) rotate(0deg);
  }
  #scene6 [data-frame="8350"] {
    transform: translate(4vh, 16vh) rotate(4deg);
  }
}
#scene6 #email,
#scene6 #linkedin,
#scene6 #instagram,
#scene6 #contactresume,
#scene6 #githubsite,
#scene6 #medium,
#scene6 #twitter {
  cursor: pointer;
  transition-duration: 500ms;
}
#scene6 #email:hover text,
#scene6 #linkedin:hover text,
#scene6 #instagram:hover text,
#scene6 #contactresume:hover text,
#scene6 #githubsite:hover text,
#scene6 #medium:hover text,
#scene6 #twitter:hover text {
  fill: rgba(44, 62, 80, 0.99);
}
#scene6 #sc6title {
  -st-animation-name: a_sc6_title;
}
@-st-frames a_sc6_title {
  #scene6 [data-frame="6000"] {
    opacity: 0;
  }
  #scene6 [data-frame="6050"] {
    opacity: 1;
  }
  #scene6 [data-frame="7400"] {
    opacity: 1;
  }
  #scene6 [data-frame="7450"] {
    opacity: 0;
  }
}
#scene6 #graph1 {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: 3000;
  stroke-dashoffset: 0;
  stroke-opacity: 0.7;
  -st-animation-name: graph1;
}
@-st-frames graph1 {
  #scene6 [data-frame="6050"] {
    stroke-dashoffset: 3000;
  }
  #scene6 [data-frame="6800"] {
    stroke-dashoffset: 0;
  }
}
#scene6 #graph2 {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: 3000;
  stroke-dashoffset: 0;
  stroke-opacity: 0.7;
  -st-animation-name: graph2;
}
@-st-frames graph2 {
  #scene6 [data-frame="6150"] {
    stroke-dashoffset: 3000;
  }
  #scene6 [data-frame="6600"] {
    stroke-dashoffset: 0;
  }
}
#scene6 #skills {
  -st-animation-name: a_skills;
}
@-st-frames a_skills {
  #scene6 [data-frame="7340"] {
    transform: scale(1) translate(0px, 100px);
  }
  #scene6 [data-frame="7380"] {
    transform: scale(1.6) translate(-120px, 100px);
  }
  #scene6 [data-frame="7630"] {
    opacity: 1;
  }
  #scene6 [data-frame="7680"] {
    opacity: 0;
  }
}
#scene6 #skillpath {
  -st-animation-name: a_skillpath;
}
@-st-frames a_skillpath {
  #scene6 [data-frame="6150"] {
    opacity: 0;
  }
  #scene6 [data-frame="6200"] {
    opacity: 1;
  }
}
#scene6 #skillnames {
  -st-animation-name: a_skillnames;
}
@-st-frames a_skillnames {
  #scene6 [data-frame="6200"] {
    opacity: 0;
  }
  #scene6 [data-frame="6300"] {
    opacity: 1;
  }
}
#scene6 #invincible {
  -st-animation-name: a_invincible;
}
@-st-frames a_invincible {
  #scene6 [data-frame="7280"] {
    opacity: 0;
  }
  #scene6 [data-frame="7320"] {
    opacity: 1;
  }
}
#scene6 #hellobye {
  opacity: 0;
  -st-animation-name: a_hellobye;
}
@-st-frames a_hellobye {
  #scene6 [data-frame="7800"] {
    opacity: 0;
  }
  #scene6 [data-frame="7850"] {
    opacity: 1;
  }
}
#scene6 #endtitles {
  -st-animation-name: a_endtitles;
}
@-st-frames a_endtitles {
  #scene6 [data-frame="7700"] {
    transform: translate(0, 800px);
  }
  #scene6 [data-frame="8500"] {
    transform: translate(0, -860px);
  }
}
#scene6 #bgright {
  -st-animation-name: a_bgright;
}
#scene6 #me {
  transform: scale(0.2);
}
@-st-frames a_bgright {
  #scene6 [data-frame="7650"] {
    transform: translate(800px, 0);
    opacity: 0;
  }
  #scene6 [data-frame="7700"] {
    transform: translate(0, 0);
    opacity: 1;
  }
}
#scene6 .clip-svg {
  clip-path: url("#myClip");
}

#scene1 {
  -st-animation-name: scene1;
}

@-st-frames scene1 {
  [data-frame="0"] {
    top: 0%;
  }
  [data-frame="400"] {
    top: 0%;
  }
  [data-frame="900"] {
    top: -100%;
  }
}
#scene2 {
  -st-animation-name: scene2;
}

@-st-frames scene2 {
  [data-frame="400"] {
    top: 100%;
  }
  [data-frame="900"] {
    top: 0%;
  }
  [data-frame="1500"] {
    top: 0%;
  }
  [data-frame="2000"] {
    top: -100%;
  }
}
#scene3 {
  -st-animation-name: scene3;
}

@-st-frames scene3 {
  [data-frame="1500"] {
    top: 100%;
  }
  [data-frame="2000"] {
    top: 0%;
  }
  [data-frame="2600"] {
    top: 0%;
  }
  [data-frame="3100"] {
    top: -100%;
  }
}
#scene4 {
  -st-animation-name: scene4;
}

@-st-frames scene4 {
  [data-frame="2600"] {
    top: 100%;
  }
  [data-frame="3100"] {
    top: 0%;
  }
  [data-frame="3600"] {
    top: 0%;
  }
  [data-frame="4100"] {
    top: -100%;
  }
}
#scene5 {
  -st-animation-name: scene5;
}

@-st-frames scene5 {
  [data-frame="3600"] {
    top: 100%;
  }
  [data-frame="4100"] {
    top: 0%;
  }
  [data-frame="5700"] {
    top: 0%;
  }
  [data-frame="6200"] {
    top: -100%;
  }
}
#scene6 {
  -st-animation-name: scene6;
}

@-st-frames scene6 {
  [data-frame="5700"] {
    top: 100%;
  }
  [data-frame="6200"] {
    top: 0%;
  }
  [data-frame="8200"] {
    top: 0%;
  }
}