@import "http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css";

@import url(http://fonts.googleapis.com/css?family=Lato:300,100,400);

html {
  height: 100%;
  position: relative
}

body {
  background-color: #3498db;
  font-family: "Lato", sans-serif;
  height: 2000px;
  color: white
}


li.new-item {
  opacity: 0;
  -webkit-animation: new-item-animation .3s linear forwards;
  -o-animation: new-item-animation .3s linear forwards;
  animation: new-item-animation .3s linear forwards
}

@keyframes new-item-animation {
  from {
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
  }
}

li.restored-item {
  -webkit-animation: openspace .3s ease forwards, 
    restored-item-animation .3s .3s cubic-bezier(0,.8,.32,1.07) forwards;
  -o-animation: openspace .3s ease forwards, 
    restored-item-animation .3s .3s cubic-bezier(0,.8,.32,1.07) forwards;
  animation: openspace .3s ease forwards, 
    restored-item-animation .3s .3s cubic-bezier(0,.8,.32,1.07) forwards
}

@keyframes openspace {
  to {
    height: auto
  }
}

@keyframes restored-item-animation {
  from {
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
  }
}

li.removed-item {
  -webkit-animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards;
  -o-animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards;
  animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards
}

@keyframes removed-item-animation {
  from {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
  }

  to {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0
  }
}

@-webkit-keyframes new-item-animation {
  from {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-o-keyframes new-item-animation {
  from {
    opacity: 0;
    -o-transform: scale(0);
    transform: scale(0)
  }

  to {
    opacity: 1;
    -o-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes openspace {
  to {
    height: auto
  }
}

@-o-keyframes openspace {
  to {
    height: auto
  }
}

@-webkit-keyframes restored-item-animation {
  from {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-o-keyframes restored-item-animation {
  from {
    opacity: 0;
    -o-transform: scale(0);
    transform: scale(0)
  }

  to {
    opacity: 1;
    -o-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes removed-item-animation {
  from {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  to {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0
  }
}

@-o-keyframes removed-item-animation {
  from {
    opacity: 1;
    -o-transform: scale(1);
    transform: scale(1)
  }

  to {
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0
  }
}