@font-face {
  font-family: "repulsor";
  src: url("/assets2/fonts/repulsore.ttf") format("truetype"); }
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: local("Muli Regular"), local("Muli-Regular"), url(/assets2/fonts/Muli-Regular.ttf) format("truetype"); }
html {
  padding: 0;
  margin: 0;
  height: 100%;
  font-family: Muli; }

body {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#004e66+0,145266+17,0e0e0e+100 */
  background: #004e66;
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #004e66 0%, #145266 17%, #0e0e0e 100%);
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, #004e66 0%, #145266 17%, #0e0e0e 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, #004e66 0%, #145266 17%, #0e0e0e 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }

header {
  margin-left: auto;
  margin-right: auto;
  width: 800px;
  height: 100px; }
  header h1 {
    text-align: center;
    color: #fff7e5;
    font-family: repulsor;
    font-size: 42px;
    margin-bottom: 0; }
  header h2 {
    margin-top: 0;
    text-align: center;
    color: #ffb400;
    font-size: 30px; }

/** glitch **/
header {
  /* Hover flash animation on last image */ }
  header .glitch {
    position: absolute;
    width: 800px;
    max-width: 400px;
    height: 100px;
    max-height: calc(400px * 1.25);
    overflow: hidden;
    margin: 0 auto; }
  header .glitch:hover {
    cursor: pointer; }
  header .glitch__img {
    position: absolute;
    top: calc(-1 * 5px);
    left: calc(-1 * 10px);
    width: calc(100% + 10px * 2);
    height: calc(100% + 5px * 2);
    background: url(../img/1.jpg) no-repeat 50% 0;
    background-color: transparent;
    background-size: cover;
    background-blend-mode: none; }
  header .glitch__img:nth-child(2) {
    background-color: transparent;
    background-blend-mode: none; }
  header .glitch__img:nth-child(3) {
    background-color: transparent;
    background-blend-mode: none; }
  header .glitch__img:nth-child(4) {
    background-color: transparent;
    background-blend-mode: none; }
  header .glitch__img:nth-child(5) {
    background-color: #af4949;
    background-blend-mode: overlay; }
  header .glitch__img:nth-child(n+2) {
    opacity: 0; }
  header .glitch:hover .glitch__img:nth-child(n+2) {
    opacity: 1; }
  header .glitch:hover .glitch__img:nth-child(2) {
    transform: translate3d(10px, 0, 0);
    animation: glitch-anim-1-horizontal 4s infinite linear alternate; }
  header .glitch:hover > .glitch__img:nth-child(3) {
    transform: translate3d(calc(-1 * 10px), 0, 0);
    animation: glitch-anim-2-horizontal 4s infinite linear alternate; }
  header .glitch:hover > .glitch__img:nth-child(4) {
    transform: translate3d(0, calc(-1 * 5px), 0) scale3d(-1, -1, 1);
    animation: glitch-anim-3-horizontal 4s infinite linear alternate; }
  header .glitch:hover > .glitch__img:nth-child(5) {
    animation: glitch-anim-flash 0.5s steps(1, end) infinite; }
@keyframes glitch-anim-1-horizontal {
  0% {
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
  10% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }
  20% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); }
  30% {
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); }
  40% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
  50% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
  60% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
  70% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
  80% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
  90% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
  100% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
  @keyframes glitch-anim-flash {
    0% {
      opacity: 0.2;
      transform: translate3d(10px, 5px, 0); }
    33%, 100% {
      opacity: 0;
      transform: translate3d(0, 0, 0); } } }

/*# sourceMappingURL=main.css.map */