@-moz-keyframes left-brace-intro {

  0% {

    -moz-transform: translateX(220px);

    transform: translateX(220px);

    opacity: 0; }



  50% {

    opacity: 1;

    -moz-transform: translateX(220px);

    transform: translateX(220px); }



  100% {

    -moz-transform: translateX(0px);

    transform: translateX(0px); } }



@-webkit-keyframes left-brace-intro {

  0% {

    -webkit-transform: translateX(220px);

    transform: translateX(220px);

    opacity: 0; }



  50% {

    opacity: 1;

    -webkit-transform: translateX(220px);

    transform: translateX(220px); }



  100% {

    -webkit-transform: translateX(0px);

    transform: translateX(0px); } }



@-o-keyframes left-brace-intro {

  0% {

    -o-transform: translateX(220px);

    transform: translateX(220px);

    opacity: 0; }



  50% {

    opacity: 1;

    -o-transform: translateX(220px);

    transform: translateX(220px); }



  100% {

    -o-transform: translateX(0px);

    transform: translateX(0px); } }



@-ms-keyframes left-brace-intro {

  0% {

    -ms-transform: translateX(220px);

    transform: translateX(220px);

    opacity: 0; }



  50% {

    opacity: 1;

    -ms-transform: translateX(220px);

    transform: translateX(220px); }



  100% {

    -ms-transform: translateX(0px);

    transform: translateX(0px); } }



@keyframes left-brace-intro {

  0% {

    transform: translateX(220px);

    opacity: 0; }



  50% {

    opacity: 1;

    transform: translateX(220px); }



  100% {

    transform: translateX(0px); } }



@-moz-keyframes right-brace-intro {

  0% {

    -moz-transform: translateX(-220px);

    transform: translateX(-220px);

    opacity: 0; }



  50% {

    opacity: 1;

    -moz-transform: translateX(-220px);

    transform: translateX(-220px); }



  100% {

    -moz-transform: translateX(0px);

    transform: translateX(0px); } }



@-webkit-keyframes right-brace-intro {

  0% {

    -webkit-transform: translateX(-220px);

    transform: translateX(-220px);

    opacity: 0; }



  50% {

    opacity: 1;

    -webkit-transform: translateX(-220px);

    transform: translateX(-220px); }



  100% {

    -webkit-transform: translateX(0px);

    transform: translateX(0px); } }



@-o-keyframes right-brace-intro {

  0% {

    -o-transform: translateX(-220px);

    transform: translateX(-220px);

    opacity: 0; }



  50% {

    opacity: 1;

    -o-transform: translateX(-220px);

    transform: translateX(-220px); }



  100% {

    -o-transform: translateX(0px);

    transform: translateX(0px); } }



@-ms-keyframes right-brace-intro {

  0% {

    -ms-transform: translateX(-220px);

    transform: translateX(-220px);

    opacity: 0; }



  50% {

    opacity: 1;

    -ms-transform: translateX(-220px);

    transform: translateX(-220px); }



  100% {

    -ms-transform: translateX(0px);

    transform: translateX(0px); } }



@keyframes right-brace-intro {

  0% {

    transform: translateX(-220px);

    opacity: 0; }



  50% {

    opacity: 1;

    transform: translateX(-220px); }



  100% {

    transform: translateX(0px); } }



@-moz-keyframes fade-in {

  0% {

    opacity: 0; }



  100% {

    opacity: 1; } }



@-webkit-keyframes fade-in {

  0% {

    opacity: 0; }



  100% {

    opacity: 1; } }



@-o-keyframes fade-in {

  0% {

    opacity: 0; }



  100% {

    opacity: 1; } }



@-ms-keyframes fade-in {

  0% {

    opacity: 0; }



  100% {

    opacity: 1; } }



@keyframes fade-in {

  0% {

    opacity: 0; }



  100% {

    opacity: 1; } }



@-moz-keyframes grow-y {

  0% {

    -moz-transform: scaleY(0);

    transform: scaleY(0); }



  100% {

    -moz-transform: scaleY(1);

    transform: scaleY(1); } }



@-webkit-keyframes grow-y {

  0% {

    -webkit-transform: scaleY(0);

    transform: scaleY(0); }



  100% {

    -webkit-transform: scaleY(1);

    transform: scaleY(1); } }



@-o-keyframes grow-y {

  0% {

    -o-transform: scaleY(0);

    transform: scaleY(0); }



  100% {

    -o-transform: scaleY(1);

    transform: scaleY(1); } }



@-ms-keyframes grow-y {

  0% {

    -ms-transform: scaleY(0);

    transform: scaleY(0); }



  100% {

    -ms-transform: scaleY(1);

    transform: scaleY(1); } }



@keyframes grow-y {

  0% {

    transform: scaleY(0); }



  100% {

    transform: scaleY(1); } }



@-moz-keyframes grow-x {

  0% {

    -moz-transform: scaleX(0);

    transform: scaleX(0); }



  100% {

    -moz-transform: scaleX(1);

    transform: scaleX(1); } }



@-webkit-keyframes grow-x {

  0% {

    -webkit-transform: scaleX(0);

    transform: scaleX(0); }



  100% {

    -webkit-transform: scaleX(1);

    transform: scaleX(1); } }



@-o-keyframes grow-x {

  0% {

    -o-transform: scaleX(0);

    transform: scaleX(0); }



  100% {

    -o-transform: scaleX(1);

    transform: scaleX(1); } }



@-ms-keyframes grow-x {

  0% {

    -ms-transform: scaleX(0);

    transform: scaleX(0); }



  100% {

    -ms-transform: scaleX(1);

    transform: scaleX(1); } }



@keyframes grow-x {

  0% {

    transform: scaleX(0); }



  100% {

    transform: scaleX(1); } }



@-moz-keyframes grow {

  0% {

    -moz-transform: scale(0, 0);

    transform: scale(0, 0); }



  100% {

    -moz-transform: scale(1, 1);

    transform: scale(1, 1); } }



@-webkit-keyframes grow {

  0% {

    -webkit-transform: scale(0, 0);

    transform: scale(0, 0); }



  100% {

    -webkit-transform: scale(1, 1);

    transform: scale(1, 1); } }



@-o-keyframes grow {

  0% {

    -o-transform: scale(0, 0);

    transform: scale(0, 0); }



  100% {

    -o-transform: scale(1, 1);

    transform: scale(1, 1); } }



@-ms-keyframes grow {

  0% {

    -ms-transform: scale(0, 0);

    transform: scale(0, 0); }



  100% {

    -ms-transform: scale(1, 1);

    transform: scale(1, 1); } }



@keyframes grow {

  0% {

    transform: scale(0, 0); }



  100% {

    transform: scale(1, 1); } }

*/


.main p {

  margin: 1em;

  text-align: center; }



@font-face {

  font-family: 'LeagueGothic';

  src: url("../fonts/league-gothic/league-gothic.eot");

  src: url("../fonts/league-gothic/league-gothic.eot?#iefix") format("embedded-opentype"), url("../fonts/league-gothic/league-gothic.woff") format("woff"), url("../fonts/league-gothic/league-gothic.ttf") format("truetype"), url("../fonts/league-gothic/league-gothic.svg#League_Gothic-webfont") format("svg");

  font-weight: normal;

  font-style: normal; }



#stage {

  background-color: #fff;

  width: 400px;

  height: auto;

  margin: 10px;

}



#stage a {

  color: #3a7ea2; }



[id$=badge], [id$=title], [id$=details] {

  -webkit-transition: -webkit-transform 0.25s ease-in-out;

  -moz-transition: -moz-transform 0.25s ease-in-out;

  -o-transition: -o-transform 0.25s ease-in-out;

  transition: transform 0.25s ease-in-out; }

/*

[id$=badge] {

  -webkit-transform: scale(0.7, 0.7);

  -moz-transform: scale(0.7, 0.7);

  -ms-transform: scale(0.7, 0.7);

  -o-transform: scale(0.7, 0.7);

  transform: scale(0.7, 0.7); }

*/
/*
[id$=title] {

  -webkit-transform: scale(1.8) translate(0px, 48px);

  -moz-transform: scale(1.8) translate(0px, 48px);

  -ms-transform: scale(1.8) translate(0px, 48px);

  -o-transform: scale(1.8) translate(0px, 48px);

  transform: scale(1.8) translate(0px, 48px); }

*/

[id$=details] {

  -webkit-transform: scale(0, 0);

  -moz-transform: scale(0, 0);

  -ms-transform: scale(0, 0);

  -o-transform: scale(0, 0);

  transform: scale(0, 0); }


/*
#timeline > g:hover [id$=badge],*/ #timeline > g:hover [id$=details] {

  -webkit-transform: scale(1, 1);

  -moz-transform: scale(1, 1);

  -ms-transform: scale(1, 1);

  -o-transform: scale(1, 1);

  transform: scale(1, 1); }



#timeline > g:hover [id$=welcome] {

  -webkit-transform: scale(0) translate(0px, 0px);

  -moz-transform: scale(0) translate(0px, 0px);

  -ms-transform: scale(0) translate(0px, 0px);

  -o-transform: scale(0) translate(0px, 0px);

  transform: scale(0) translate(0px, 0px); }

/*

#coffee {

  -webkit-transform-origin: 517px 484px;

  -moz-transform-origin: 517px 484px;

  -ms-transform-origin: 517px 484px;

  -o-transform-origin: 517px 484px;

  transform-origin: 517px 484px; }*/

/*

#coffee-badge {

 -webkit-transform-origin: -10px 200px;

  -moz-transform-origin: -10px 200px;

  -ms-transform-origin: -10px 200px;

  -o-transform-origin: -10px 200px;

  transform-origin: -10px 200px;}


	
#coffee-title {

  -webkit-transform-origin: 180px 220px;

  -moz-transform-origin: 180px 220px;

  -ms-transform-origin: 180px 220px;

  -o-transform-origin: 180px 220px;

  transform-origin: 180px 220px; }

/*

#coffee-details {

  -webkit-transform-origin: 311px 489px;

  -moz-transform-origin: 311px 489px;

  -ms-transform-origin: 311px 489px;

  -o-transform-origin: 311px 489px;

  transform-origin: 311px 489px; }



#design {

  -webkit-transform-origin: 500px 6px;

  -moz-transform-origin: 500px 6px;

  -ms-transform-origin: 500px 6px;

  -o-transform-origin: 500px 6px;

  transform-origin: 500px 6px;}



#design-badge {

  -webkit-transform-origin: 590px 200px;

  -moz-transform-origin: 590px 200px;

  -ms-transform-origin: 590px 200px;

  -o-transform-origin: 590px 200px;

  transform-origin: 590px 200px; }



#design-title {

 -webkit-transform-origin: 830px 220px;

  -moz-transform-origin: 830px 220px;

  -ms-transform-origin: 830px 220px;

  -o-transform-origin: 830px 220px;

  transform-origin: 830px 220px; }

/*

#design-details {

  -webkit-transform-origin: 710px 620px;

  -moz-transform-origin: 710px 620px;

  -ms-transform-origin: 710px 620px;

  -o-transform-origin: 710px 620px;

  transform-origin: 710px 620px; }



#build {

  -webkit-transform-origin: 511px 769px;

  -moz-transform-origin: 511px 769px;

  -ms-transform-origin: 511px 769px;

  -o-transform-origin: 511px 769px;

  transform-origin: 511px 769px;
}



#build-badge {

  -webkit-transform-origin: 300px 200px;

  -moz-transform-origin: 300px 200px;

  -ms-transform-origin: 300px 200px;

  -o-transform-origin: 300px 200px;

  transform-origin: 300px 200px; }



#build-title {

  -webkit-transform-origin: 500px 220px;

  -moz-transform-origin: 500px 220px;

  -ms-transform-origin: 500px 220px;

  -o-transform-origin: 500px 220px;

  transform-origin: 500px 220px; }*/

/*

#build-details {

  -webkit-transform-origin: 310px 790px;

  -moz-transform-origin: 310px 790px;

  -ms-transform-origin: 310px 790px;

  -o-transform-origin: 310px 790px;

  transform-origin: 310px 790px; }*/


.svgLoaded #logo {

  -webkit-animation: fade-in 0.5s ease-in-out;

  -moz-animation: fade-in 0.5s ease-in-out;

  -ms-animation: fade-in 0.5s ease-in-out;

  -o-animation: fade-in 0.5s ease-in-out;

  animation: fade-in 0.5s ease-in-out; }

.svgLoaded #quote-text {

  -webkit-animation: fade-in 0.5s ease-in-out 0.75s;

  -moz-animation: fade-in 0.5s ease-in-out 0.75s;

  -ms-animation: fade-in 0.5s ease-in-out 0.75s;

  -o-animation: fade-in 0.5s ease-in-out 0.75s;

  animation: fade-in 0.5s ease-in-out 0.75s;

  -webkit-animation-fill-mode: both;

  -moz-animation-fill-mode: both;

  -ms-animation-fill-mode: both;

  -o-animation-fill-mode: both;

  animation-fill-mode: both; }

.svgLoaded #quote-left-brace {

  -webkit-animation: left-brace-intro 1s ease-in-out 0.25s;

  -moz-animation: left-brace-intro 1s ease-in-out 0.25s;

  -ms-animation: left-brace-intro 1s ease-in-out 0.25s;

  -o-animation: left-brace-intro 1s ease-in-out 0.25s;

  animation: left-brace-intro 1s ease-in-out 0.25s;

  -webkit-animation-fill-mode: backwards;

  -moz-animation-fill-mode: backwards;

  -ms-animation-fill-mode: backwards;

  -o-animation-fill-mode: backwards;

  animation-fill-mode: backwards; }

.svgLoaded #quote-right-brace {

  -webkit-animation: right-brace-intro 1s ease-in-out 0.25s;

  -moz-animation: right-brace-intro 1s ease-in-out 0.25s;

  -ms-animation: right-brace-intro 1s ease-in-out 0.25s;

  -o-animation: right-brace-intro 1s ease-in-out 0.25s;

  animation: right-brace-intro 1s ease-in-out 0.25s;

  -webkit-animation-fill-mode: backwards;

  -moz-animation-fill-mode: backwards;

  -ms-animation-fill-mode: backwards;

  -o-animation-fill-mode: backwards;

  animation-fill-mode: backwards; }

.svgLoaded #background {

  -webkit-animation: grow-y 0.5s ease-in-out 1.25s;

  -moz-animation: grow-y 0.5s ease-in-out 1.25s;

  -ms-animation: grow-y 0.5s ease-in-out 1.25s;

  -o-animation: grow-y 0.5s ease-in-out 1.25s;

  animation: grow-y 0.5s ease-in-out 1.25s;

  -webkit-transform-origin: 512px 300px;

  -moz-transform-origin: 512px 300px;

  -ms-transform-origin: 512px 300px;

  -o-transform-origin: 512px 300px;

  transform-origin: 512px 300px;

  -webkit-animation-fill-mode: backwards;

  -moz-animation-fill-mode: backwards;

  -ms-animation-fill-mode: backwards;

  -o-animation-fill-mode: backwards;

  animation-fill-mode: backwards; }

.svgLoaded #background > g {

  -webkit-animation: grow-x 0.25s ease-in-out 1.75s;

  -moz-animation: grow-x 0.25s ease-in-out 1.75s;

  -ms-animation: grow-x 0.25s ease-in-out 1.75s;

  -o-animation: grow-x 0.25s ease-in-out 1.75s;

  animation: grow-x 0.25s ease-in-out 1.75s;

  -webkit-animation-fill-mode: backwards;

  -moz-animation-fill-mode: backwards;

  -ms-animation-fill-mode: backwards;

  -o-animation-fill-mode: backwards;

  animation-fill-mode: backwards; }

.svgLoaded #background > g:last-of-type {

  -webkit-transform-origin: 458px 877px;

  -moz-transform-origin: 458px 877px;

  -ms-transform-origin: 458px 877px;

  -o-transform-origin: 458px 877px;

  transform-origin: 458px 877px; }

.svgLoaded #background > g:first-of-type {

  -webkit-transform-origin: 563px 877px;

  -moz-transform-origin: 563px 877px;

  -ms-transform-origin: 563px 877px;

  -o-transform-origin: 563px 877px;

  transform-origin: 563px 877px; }

.svgLoaded #coffee, .svgLoaded #design, .svgLoaded #build, .svgLoaded #complain, .svgLoaded #beer {

  -webkit-animation: grow 0.25s ease-in-out;

  -moz-animation: grow 0.25s ease-in-out;

  -ms-animation: grow 0.25s ease-in-out;

  -o-animation: grow 0.25s ease-in-out;

  animation: grow 0.25s ease-in-out;

  -webkit-animation-fill-mode: backwards;

  -moz-animation-fill-mode: backwards;

  -ms-animation-fill-mode: backwards;

  -o-animation-fill-mode: backwards;

  animation-fill-mode: backwards; }

.svgLoaded #coffee {

  -webkit-animation-delay: 2s;

  -moz-animation-delay: 2s;

  -ms-animation-delay: 2s;

  -o-animation-delay: 2s;

  animation-delay: 2s; }

.svgLoaded #design {

  -webkit-animation-delay: 2.25s;

  -moz-animation-delay: 2.25s;

  -ms-animation-delay: 2.25s;

  -o-animation-delay: 2.25s;

  animation-delay: 2.25s; }

.svgLoaded #build {

  -webkit-animation-delay: 2.5s;

  -moz-animation-delay: 2.5s;

  -ms-animation-delay: 2.5s;

  -o-animation-delay: 2.5s;

  animation-delay: 2.5s; }

.svgLoaded #complain {

  -webkit-animation-delay: 2.75s;

  -moz-animation-delay: 2.75s;

  -ms-animation-delay: 2.75s;

  -o-animation-delay: 2.75s;

  animation-delay: 2.75s; }

.svgLoaded #beer {

  -webkit-animation-delay: 3s;

  -moz-animation-delay: 3s;

  -ms-animation-delay: 3s;

  -o-animation-delay: 3s;

  animation-delay: 3s; }