body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  background-color: #2196F3; }

/* Menu-icon-1*/
.menu-icon-x {
  position: absolute;
  top: 50%;
  left: 30%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100px;
  height: 50px; }

.menu-icon-line {
  display: block;
  position: absolute;
  width: 100px;
  height: 10px;
  background-color: #FFFFFF;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  -webkit-transition: -webkit-transform 400ms ease-out;
  transition: -webkit-transform 400ms ease-out;
  -o-transition: transform 400ms ease-out;
  transition: transform 400ms ease-out;
  transition: transform 400ms ease-out, -webkit-transform 400ms ease-out; }
  .menu-icon-line:nth-child(1) {
    top: 0; }
  .menu-icon-line:nth-child(2) {
    top: 20px;
    opacity: 1; }
  .menu-icon-line:nth-child(3) {
    top: 40px; }
  .active .menu-icon-line:nth-child(1) {
    -webkit-animation: slide-from-top 400ms ease-out forwards;
            animation: slide-from-top 400ms ease-out forwards; }
  .active .menu-icon-line:nth-child(2) {
    opacity: 0;
    -webkit-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    transition: opacity 200ms linear; }
  .active .menu-icon-line:nth-child(3) {
    -webkit-animation: slide-from-bottom 400ms ease-out forwards;
            animation: slide-from-bottom 400ms ease-out forwards; }
  .close .menu-icon-line:nth-child(1) {
    -webkit-animation: slide-close-from-top 400ms ease-out forwards;
            animation: slide-close-from-top 400ms ease-out forwards; }
  .close .menu-icon-line:nth-child(2) {
    opacity: 1;
    -webkit-transition: opacity 800ms linear;
    -o-transition: opacity 800ms linear;
    transition: opacity 800ms linear; }
  .close .menu-icon-line:nth-child(3) {
    -webkit-animation: slide-close-from-bottom 400ms ease-out forwards;
            animation: slide-close-from-bottom 400ms ease-out forwards; }

@-webkit-keyframes slide-from-top {
  50% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px); }
  100% {
    -webkit-transform: translateY(20px) rotate(45deg);
            transform: translateY(20px) rotate(45deg); } }

@keyframes slide-from-top {
  50% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px); }
  100% {
    -webkit-transform: translateY(20px) rotate(45deg);
            transform: translateY(20px) rotate(45deg); } }

@-webkit-keyframes slide-from-bottom {
  50% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px); }
  100% {
    -webkit-transform: translateY(-20px) rotate(-45deg);
            transform: translateY(-20px) rotate(-45deg); } }

@keyframes slide-from-bottom {
  50% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px); }
  100% {
    -webkit-transform: translateY(-20px) rotate(-45deg);
            transform: translateY(-20px) rotate(-45deg); } }

@-webkit-keyframes slide-close-from-top {
  0% {
    -webkit-transform: translateY(20px) rotate(45deg);
            transform: translateY(20px) rotate(45deg); }
  50% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px); }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); } }

@keyframes slide-close-from-top {
  0% {
    -webkit-transform: translateY(20px) rotate(45deg);
            transform: translateY(20px) rotate(45deg); }
  50% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px); }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); } }

@-webkit-keyframes slide-close-from-bottom {
  0% {
    -webkit-transform: translateY(-20px) rotate(-45deg);
            transform: translateY(-20px) rotate(-45deg); }
  50% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px); }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); } }

@keyframes slide-close-from-bottom {
  0% {
    -webkit-transform: translateY(-20px) rotate(-45deg);
            transform: translateY(-20px) rotate(-45deg); }
  50% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px); }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); } }

/*Menu-icon-2*/
.menu-icon-arrow span {
  position: absolute;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100px;
  height: 10px;
  background-color: #FFFFFF;
  -webkit-transition: 0.7s ease-in-out;
  -o-transition: 0.7s ease-in-out;
  transition: 0.7s ease-in-out;
  -webkit-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 5px;
          border-radius: 5px; }
  .menu-icon-arrow span:before {
    content: "";
    position: absolute;
    width: 100px;
    height: 10px;
    background-color: #FFFFFF;
    -webkit-transform: translate(0, 20px);
        -ms-transform: translate(0, 20px);
            transform: translate(0, 20px);
    -webkit-transition: 0.7s ease-in-out;
    -o-transition: 0.7s ease-in-out;
    transition: 0.7s ease-in-out;
    -webkit-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 5px;
            border-radius: 5px; }
  .menu-icon-arrow span:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 10px;
    background-color: #FFFFFF;
    -webkit-transform: translate(0, -20px);
        -ms-transform: translate(0, -20px);
            transform: translate(0, -20px);
    -webkit-transition: 0.7s ease-in-out;
    -o-transition: 0.7s ease-in-out;
    transition: 0.7s ease-in-out;
    -webkit-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 5px;
            border-radius: 5px; }

.menu-icon-open span {
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
  -webkit-transform-origin: 20%;
      -ms-transform-origin: 20%;
          transform-origin: 20%;
  -webkit-box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.2); }
  .menu-icon-open span:before {
    width: 45px;
    -webkit-box-shadow: 15px 0 white, 0px -2px 0px rgba(0, 0, 0, 0.2);
            box-shadow: 15px 0 white, 0px -2px 0px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate(56px, 24px) rotate(-45deg);
        -ms-transform: translate(56px, 24px) rotate(-45deg);
            transform: translate(56px, 24px) rotate(-45deg); }
  .menu-icon-open span:after {
    width: 60px;
    -webkit-box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.2);
            box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate(55px, -18px) rotate(45deg);
        -ms-transform: translate(55px, -18px) rotate(45deg);
            transform: translate(55px, -18px) rotate(45deg); }

/*Menu-icon-3*/
.container {
  position: absolute;
  top: 50%;
  right: 23%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100px;
  height: 50px;
  -webkit-perspective: 1000px;
          perspective: 1000px; }

.flip-line {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1000ms;
  transition: -webkit-transform 1000ms;
  -o-transition: transform 1000ms;
  transition: transform 1000ms;
  transition: transform 1000ms, -webkit-transform 1000ms; }
  .flip-line:nth-child(1) {
    position: absolute;
    top: 0;
    width: 100%;
    height: 20%; }
    .flip-line:nth-child(1) figure {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      -webkit-border-radius: 5px;
              border-radius: 5px; }
    .flip-line:nth-child(1) .frontside {
      background-color: #FFFFFF; }
    .flip-line:nth-child(1) .backside {
      background-color: #1976D2;
      -webkit-transform: rotateY(180deg);
              transform: rotateY(180deg); }
  .flip-line:nth-child(2) {
    position: absolute;
    top: 20px;
    width: 100%;
    height: 20%; }
    .flip-line:nth-child(2) figure {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      -webkit-border-radius: 5px;
              border-radius: 5px; }
    .flip-line:nth-child(2) .frontside {
      background-color: #FFFFFF; }
    .flip-line:nth-child(2) .backside {
      background-color: white;
      -webkit-transform: rotateY(180deg);
              transform: rotateY(180deg); }
  .flip-line:nth-child(3) {
    position: absolute;
    top: 40px;
    width: 100%;
    height: 20%; }
    .flip-line:nth-child(3) figure {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      -webkit-border-radius: 5px;
              border-radius: 5px; }
    .flip-line:nth-child(3) .frontside {
      background-color: #FFFFFF; }
    .flip-line:nth-child(3) .backside {
      background-color: white;
      -webkit-transform: rotateY(180deg);
              transform: rotateY(180deg); }
  .flipped .flip-line:nth-child(1) {
    -webkit-animation: flip-animation 1000ms linear forwards;
            animation: flip-animation 1000ms linear forwards; }
  .flipped .flip-line:nth-child(2) {
    -webkit-animation: flip-animation-deg1 1000ms linear forwards;
            animation: flip-animation-deg1 1000ms linear forwards;
    -webkit-animation-delay: 400ms;
            animation-delay: 400ms; }
  .flipped .flip-line:nth-child(3) {
    -webkit-animation: flip-animation-deg2 1000ms linear forwards;
            animation: flip-animation-deg2 1000ms linear forwards;
    -webkit-animation-delay: 600ms;
            animation-delay: 600ms; }
  .flipped-back .flip-line:nth-child(1) {
    -webkit-animation: flip-animation-back 1000ms linear forwards;
            animation: flip-animation-back 1000ms linear forwards; }
  .flipped-back .flip-line:nth-child(2) {
    -webkit-animation: flip-animation-back-deg1 1000ms linear forwards;
            animation: flip-animation-back-deg1 1000ms linear forwards; }
  .flipped-back .flip-line:nth-child(3) {
    -webkit-animation: flip-animation-back-deg2 1000ms linear forwards;
            animation: flip-animation-back-deg2 1000ms linear forwards; }

@-webkit-keyframes flip-animation {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0); }
  50% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    height: 25px; }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    height: 50px; } }

@keyframes flip-animation {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0); }
  50% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    height: 25px; }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    height: 50px; } }

@-webkit-keyframes flip-animation-deg1 {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0); }
  50% {
    -webkit-transform: rotateY(180deg) translate(-25px) rotate(-45deg);
            transform: rotateY(180deg) translate(-25px) rotate(-45deg);
    width: 50px; }
  100% {
    -webkit-transform: rotateY(180deg) translate(-25px) rotate(-45deg);
            transform: rotateY(180deg) translate(-25px) rotate(-45deg);
    width: 50px; } }

@keyframes flip-animation-deg1 {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0); }
  50% {
    -webkit-transform: rotateY(180deg) translate(-25px) rotate(-45deg);
            transform: rotateY(180deg) translate(-25px) rotate(-45deg);
    width: 50px; }
  100% {
    -webkit-transform: rotateY(180deg) translate(-25px) rotate(-45deg);
            transform: rotateY(180deg) translate(-25px) rotate(-45deg);
    width: 50px; } }

@-webkit-keyframes flip-animation-deg2 {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0); }
  50% {
    -webkit-transform: rotateY(180deg) translate(-25px, -20px) rotate(45deg);
            transform: rotateY(180deg) translate(-25px, -20px) rotate(45deg);
    width: 50px; }
  100% {
    -webkit-transform: rotateY(180deg) translate(-25px, -20px) rotate(45deg);
            transform: rotateY(180deg) translate(-25px, -20px) rotate(45deg);
    width: 50px; } }

@keyframes flip-animation-deg2 {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0); }
  50% {
    -webkit-transform: rotateY(180deg) translate(-25px, -20px) rotate(45deg);
            transform: rotateY(180deg) translate(-25px, -20px) rotate(45deg);
    width: 50px; }
  100% {
    -webkit-transform: rotateY(180deg) translate(-25px, -20px) rotate(45deg);
            transform: rotateY(180deg) translate(-25px, -20px) rotate(45deg);
    width: 50px; } }

@-webkit-keyframes flip-animation-back {
  0% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    height: 50px; }
  50% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    height: 10px; }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    height: 10px; } }

@keyframes flip-animation-back {
  0% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    height: 50px; }
  50% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    height: 10px; }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    height: 10px; } }

@-webkit-keyframes flip-animation-back-deg1 {
  0% {
    -webkit-transform: rotateY(180deg) translate(-25px) rotate(-45deg);
            transform: rotateY(180deg) translate(-25px) rotate(-45deg);
    width: 50px; }
  50% {
    -webkit-transform: rotateY(0) translate(0) rotate(0);
            transform: rotateY(0) translate(0) rotate(0);
    width: 100px; }
  100% {
    -webkit-transform: rotateY(0) translate(0) rotate(0);
            transform: rotateY(0) translate(0) rotate(0);
    width: 100%; } }

@keyframes flip-animation-back-deg1 {
  0% {
    -webkit-transform: rotateY(180deg) translate(-25px) rotate(-45deg);
            transform: rotateY(180deg) translate(-25px) rotate(-45deg);
    width: 50px; }
  50% {
    -webkit-transform: rotateY(0) translate(0) rotate(0);
            transform: rotateY(0) translate(0) rotate(0);
    width: 100px; }
  100% {
    -webkit-transform: rotateY(0) translate(0) rotate(0);
            transform: rotateY(0) translate(0) rotate(0);
    width: 100%; } }

@-webkit-keyframes flip-animation-back-deg2 {
  0% {
    -webkit-transform: rotateY(180deg) translate(-25px, -20px) rotate(45deg);
            transform: rotateY(180deg) translate(-25px, -20px) rotate(45deg);
    width: 50px; }
  50% {
    -webkit-transform: rotateY(0) translate(0) rotate(0);
            transform: rotateY(0) translate(0) rotate(0);
    width: 100px; }
  100% {
    -webkit-transform: rotateY(0) translate(0) rotate(0);
            transform: rotateY(0) translate(0) rotate(0);
    width: 100%; } }

@keyframes flip-animation-back-deg2 {
  0% {
    -webkit-transform: rotateY(180deg) translate(-25px, -20px) rotate(45deg);
            transform: rotateY(180deg) translate(-25px, -20px) rotate(45deg);
    width: 50px; }
  50% {
    -webkit-transform: rotateY(0) translate(0) rotate(0);
            transform: rotateY(0) translate(0) rotate(0);
    width: 100px; }
  100% {
    -webkit-transform: rotateY(0) translate(0) rotate(0);
            transform: rotateY(0) translate(0) rotate(0);
    width: 100%; } }

/*Information*/
.title {
  position: absolute;
  left: 30px;
  bottom: 14px;
  color: white;
  font-size: 18px; }

.credits {
  position: absolute;
  right: 30px;
  bottom: 30px; }
  .credits a {
    margin-left: 15px;
    text-decoration: none;
    background-color: #1976D2;
    color: white; }
  .credits .source {
    padding: 6px 10px; }
    .credits .source:before {
      position: absolute;
      content: "";
      top: 10%;
      bottom: 50%;
      width: 20%;
      background-color: #dddddd;
      -webkit-box-shadow: -5px 15px 10px #555555;
              box-shadow: -5px 15px 10px #555555;
      -webkit-transform: rotate(-7deg);
          -ms-transform: rotate(-7deg);
              transform: rotate(-7deg);
      z-index: -1; }
    .credits .source:after {
      position: absolute;
      content: "";
      right: 62%;
      top: 10%;
      bottom: 50%;
      width: 20%;
      background-color: #dddddd;
      -webkit-box-shadow: 0 15px 10px #555555;
              box-shadow: 0 15px 10px #555555;
      -webkit-transform: rotate(8deg);
          -ms-transform: rotate(8deg);
              transform: rotate(8deg);
      z-index: -1; }
  .credits .portfolio {
    padding: 6px 25px; }
    .credits .portfolio:before {
      position: absolute;
      content: "";
      left: 45%;
      top: 10%;
      bottom: 50%;
      width: 20%;
      background-color: #dddddd;
      -webkit-box-shadow: 0 15px 10px #555555;
              box-shadow: 0 15px 10px #555555;
      -webkit-transform: rotate(-7deg);
          -ms-transform: rotate(-7deg);
              transform: rotate(-7deg);
      z-index: -1; }
    .credits .portfolio:after {
      position: absolute;
      content: "";
      right: 32%;
      top: 10%;
      bottom: 48%;
      width: 15%;
      background-color: #dddddd;
      -webkit-box-shadow: 0 15px 10px #555555;
              box-shadow: 0 15px 10px #555555;
      -webkit-transform: rotate(8deg);
          -ms-transform: rotate(8deg);
              transform: rotate(8deg);
      z-index: -1; }
  .credits .twitter {
    padding: 6px 30px; }
    .credits .twitter:before {
      position: absolute;
      content: "";
      left: 75%;
      top: 10%;
      bottom: 50%;
      width: 20%;
      background-color: #dddddd;
      -webkit-box-shadow: 0 15px 10px #555555;
              box-shadow: 0 15px 10px #555555;
      -webkit-transform: rotate(-7deg);
          -ms-transform: rotate(-7deg);
              transform: rotate(-7deg);
      z-index: -1; }
    .credits .twitter:after {
      position: absolute;
      content: "";
      right: 1%;
      top: 10%;
      bottom: 48%;
      width: 15%;
      background-color: #dddddd;
      -webkit-box-shadow: 0 15px 10px #555555;
              box-shadow: 0 15px 10px #555555;
      -webkit-transform: rotate(8deg);
          -ms-transform: rotate(8deg);
              transform: rotate(8deg);
      z-index: -1; }