@font-face { font-family: 'photys-icons'; src: url("../fonts/photys-icons.eot?-19jrev"); src: url("../fonts/photys-icons.eot?#iefix-19jrev") format("embedded-opentype"), url("../fonts/photys-icons.woff2?-19jrev") format("woff2"), url("../fonts/photys-icons.ttf?-19jrev") format("truetype"), url("../fonts/photys-icons.woff?-19jrev") format("woff"), url("../fonts/photys-icons.svg?-19jrev#photys-icons") format("svg"); font-weight: normal; font-style: normal; }
[class^="icon-"], [class*=" icon-"] { font-family: 'photys-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

@-webkit-keyframes fancy_blink { 50% { fill: #C025E9; } }
@-moz-keyframes fancy_blink { 50% { fill: #C025E9; } }
@-ms-keyframes fancy_blink { 50% { fill: #C025E9; } }
@-o-keyframes fancy_blink { 50% { fill: #C025E9; } }
@keyframes fancy_blink { 50% { fill: #C025E9; } }
@-webkit-keyframes monocle_blink { 50% { fill: #FFF200; } }
@-moz-keyframes monocle_blink { 50% { fill: #FFF200; } }
@-ms-keyframes monocle_blink { 50% { fill: #FFF200; } }
@-o-keyframes monocle_blink { 50% { fill: #FFF200; } }
@keyframes monocle_blink { 50% { fill: #FFF200; } }
@-webkit-keyframes illu_addon { 0% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); }
  80% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); }
  100% { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } }
@-moz-keyframes illu_addon { 0% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); }
  80% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); }
  100% { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } }
@-ms-keyframes illu_addon { 0% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); }
  80% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); }
  100% { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } }
@-o-keyframes illu_addon { 0% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); }
  80% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); }
  100% { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } }
@keyframes illu_addon { 0% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); }
  80% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); }
  100% { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } }
@-webkit-keyframes text_fade { 0% { opacity: 0; -webkit-transform: translate3d(0, 40px, 0); -moz-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); }
  100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@-moz-keyframes text_fade { 0% { opacity: 0; -webkit-transform: translate3d(0, 40px, 0); -moz-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); }
  100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@-ms-keyframes text_fade { 0% { opacity: 0; -webkit-transform: translate3d(0, 40px, 0); -moz-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); }
  100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@-o-keyframes text_fade { 0% { opacity: 0; -webkit-transform: translate3d(0, 40px, 0); -moz-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); }
  100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes text_fade { 0% { opacity: 0; -webkit-transform: translate3d(0, 40px, 0); -moz-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); }
  100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@-webkit-keyframes illu_fade { 0% { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); -moz-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); }
  100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@-moz-keyframes illu_fade { 0% { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); -moz-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); }
  100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@-ms-keyframes illu_fade { 0% { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); -moz-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); }
  100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@-o-keyframes illu_fade { 0% { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); -moz-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); }
  100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes illu_fade { 0% { opacity: 0; -webkit-transform: translate3d(0, -40px, 0); -moz-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); }
  100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body { overflow: hidden; }

body { margin: 0; padding: 0; font-family: 'Abril Fatface', cursive; font-size: 1em; color: #FFF; background: #111; -webkit-font-smoothing: antialiased; }

#poster { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 1vh 4vw; display: flex; flex-direction: column; align-items: center; justify-content: center; }

h1 { font-weight: 400; margin: 0 0 1em 0; font-size: calc(1em + 4vw); text-align: center; -webkit-animation: text_fade 800ms 1 cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: text_fade 800ms 1 cubic-bezier(0.455, 0.03, 0.515, 0.955); -ms-animation: text_fade 800ms 1 cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-animation: text_fade 800ms 1 cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: text_fade 800ms 1 cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.fancy { display: inline-block; width: 15vw; height: 20vw; overflow: visible; position: relative; margin: -5vw -2vw 0 -1vw; }
.fancy svg { position: absolute; top: 7.5vw; left: 0; width: 100%; height: 100%; }
.fancy g { -webkit-animation: fancy_blink 8000ms infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: fancy_blink 8000ms infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); -ms-animation: fancy_blink 8000ms infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-animation: fancy_blink 8000ms infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: fancy_blink 8000ms infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); }

.illu { display: block; width: 40vh; max-width: 30%; margin: 0 auto; position: relative; -webkit-animation: illu_fade 800ms 1 cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: illu_fade 800ms 1 cubic-bezier(0.455, 0.03, 0.515, 0.955); -ms-animation: illu_fade 800ms 1 cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-animation: illu_fade 800ms 1 cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: illu_fade 800ms 1 cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.illu svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.illu-default { display: block; padding-bottom: 66.6666666667%; position: relative; }

.illu-addon { position: absolute; top: 0; left: 23.3333333333%; display: block; width: 20%; padding-bottom: 20%; transition: all 240ms cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-animation: illu_addon 1200ms 1 cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-animation: illu_addon 1200ms 1 cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-animation: illu_addon 1200ms 1 cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-animation: illu_addon 1200ms 1 cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: illu_addon 1200ms 1 cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.illu-addon g { -webkit-animation: monocle_blink 8000ms infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: monocle_blink 8000ms infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); -ms-animation: monocle_blink 8000ms infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-animation: monocle_blink 8000ms infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: monocle_blink 8000ms infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); }

@media screen and (max-width: 700px) { .fancy { width: 20vw; height: 26.6666666667vw; }
  .fancy svg { top: 10vw; } }
@media screen and (min-width: 700px) and (max-height: 500px) { h1 { font-size: calc(1em + 2vw); }
  .fancy { width: 10vw; height: 13.3333333333vw; }
  .illu { display: block; width: 200px; } }