div,
body,
header,
footer,
section {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

a {
  color: inherit;
  text-decoration: none; }

body {
  color: #222;
  height: 100vh;
  overflow: hidden;
  background: #555;
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif; }

  .animated {
    -webkit-animation-duration: 2.5s;
    animation-duration: 4.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
  } 
  
  @-webkit-keyframes bounce {
    0%, 20%, 40%, 60%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-10px);}
  } 
  
  @keyframes bounce { 
    0%, 20%, 40%, 60%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
  } 
  
  .bounce { 
    -webkit-animation-name: bounce;
    animation-name: bounce;
  }

    
header {
  left: 50%;
  z-index: 5;
  padding-top: 20px;
  position: relative;
  text-align: center;
  display: inline-block;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); }
  header #logo {
    width: 38px;
    cursor: pointer;
    transition: fill 0.8s ease-in-out; }
    header #logo.black {
      fill: black; }
    header #logo.white {
      fill: white; }

#message {
  height: 0;
  transition: opacity 0.4s ease-in-out; }
  #message.closed {
    opacity: 0;
    pointer-events: none; }
  #message.open {
    opacity: 1;
    pointer-events: all; }
  #message #window {
    z-index: 2;
    width: 550px;
    height: 350px;
    overflow: hidden;
    background: black;
    border: solid 1px #0efffc; }
    #message #window #title-bar {
      z-index: 3;
      cursor: move;
      text-align: right;
      position: relative;
      background: #0efffc; }
      #message #window #title-bar #close {
        cursor: pointer;
        margin-right: 3px;
        padding: 1px 3px 2px;
        display: inline-block; }
    #message #window #terminal {
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 20px;
      color: #0efffc;
      font-size: 14px;
      position: absolute;
      pointer-events: none;
      font-family: 'Inconsolata', Arial, serif; }
      #message #window #terminal .ti-cursor {
        margin-left: -2px; }
    #message #window .ui-resizable-handle {
      bottom: 0;
      position: absolute; }
      #message #window .ui-resizable-handle.ui-resizable-e {
        top: 0;
        right: 0;
        width: 4px;
        height: 100%;
        cursor: ew-resize; }
      #message #window .ui-resizable-handle.ui-resizable-w {
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        cursor: ew-resize; }
      #message #window .ui-resizable-handle.ui-resizable-s {
        width: 100%;
        height: 5px;
        cursor: ns-resize; }
      #message #window .ui-resizable-handle.ui-resizable-se {
        right: 0;
        width: 8px;
        height: 8px;
        cursor: nwse-resize;
        background: black; }
      #message #window .ui-resizable-handle.ui-resizable-sw {
        left: 0;
        width: 8px;
        height: 8px;
        cursor: nesw-resize;
        background: black; }







        #video {
          height: 100%;
          transition: opacity 0.4s ease-in-out; }
          #video.closed {
            opacity: 0;
            pointer-events: none; }
          #video.open {
            opacity: 1;
            pointer-events: all; }
          #video #window {
            z-index: 2;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: black;
            border: solid 1px #000; }
            #video #window #title-bar {
              z-index: 3;
              cursor: none;
              text-align: right;
              background: #000; }
              #video #window #title-bar #close {
                margin-right: 3px;
                display: inline-block; }
            #video #window #terminal {
              left: 0;
              bottom: 0;
              width: 100%;
              padding: 20px;
              color: #000;
              font-size: 14px;
              pointer-events: none;
              font-family: 'Inconsolata', Arial, serif; }
              #video #window #terminal .ti-cursor {
                margin-left: -2px; }
                #video #window iframe#player {
                  width: 100%;
                  height: 100%;
                }        
      
header #logo.black.close-window{
  fill: white;
}     
header #logo.black.open-window{
  fill: black;
}      

footer {
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute; }
  footer #control {
    left: 50%;
    width: 16px;
    bottom: 10px;
    height: 16px;
    margin: 0 auto;
    cursor: pointer;
    position: absolute;
    border-style: solid;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    border-width: 8px 0 8px 16px;
    transition: border 0.2s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: border 0.2s ease-in-out, transform 0.3s ease-in-out;
    transition: border 0.2s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; }
    footer #control.black {
      border-color: transparent transparent transparent black; }
    footer #control.white {
      border-color: transparent transparent transparent white; }
    footer #control.paused {
      border-style: double;
      border-width: 0px 0 0px 16px; }
  footer .select {
    bottom: 0;
    font-size: 14px;
    padding: 8px 20px;
    background: white;
    position: absolute;
    display: inline-block;
    transition: color 0.3s ease-in-out, background 0.3s ease-in-out; }
    footer .select:hover {
      color: white;
      background: black; }
    footer .select#prev {
      left: 0; }
    footer .select#next {
      right: 0; }

#content {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  position: absolute; }

  .custom-terminal{
    width: 40% !important;
    height: 350px !important;
    display: block !important;
  }

/* Latin */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  src: local("Inconsolata Regular"), local("Inconsolata-Regular"), url(https://fonts.gstatic.com/s/inconsolata/v16/BjAYBlHtW3CJxDcjzrnZCIgp9Q8gbYrhqGlRav_IXfk.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; }
/*# sourceMappingURL=experience.css.map */