.logo {
  background: transparent url("data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Zz48Zz48cGF0aCBkPSJNNTAuOSwwLjEgTDUwLjksMjAuOCBMNTQuNywxNi4zIEw1Ni43LDE2LjMgTDU2LjcsMjUuOCBMNTQuNywyNS44IEw1NC43LDE4LjkgTDUwLjksMjMuNSBMNTAuOSw0MS45IEw5OS42LDQxLjkgTDk5LjYsMC4xIEw1MC45LDAuMSBMNTAuOSwwLjEgWiBNNzAuNywyNC41IEM2OS42LDI1LjQgNjcuOSwyNS45IDY1LjksMjUuOSBDNjMuOSwyNS45IDYyLjIsMjUuNCA2MS4xLDI0LjUgQzYwLDIzLjYgNTkuNSwyMi40IDU5LjUsMjEgQzU5LjUsMTkuNiA2MC4xLDE4LjMgNjEuMSwxNy41IEM2Mi4yLDE2LjYgNjMuOSwxNi4xIDY1LjksMTYuMSBDNjcuOSwxNi4xIDY5LjYsMTYuNiA3MC43LDE3LjUgQzcxLjgsMTguNCA3Mi4zLDE5LjYgNzIuMywyMSBDNzIuMywyMi40IDcxLjgsMjMuNiA3MC43LDI0LjUgTDcwLjcsMjQuNSBaIE04My43LDI1LjcgTDc5LjgsMjIuMyBMNzkuOCwyMC40IEw4Mi44LDIwLjQgQzgzLjgsMjAuNCA4NC40LDIwIDg0LjQsMTkuMiBDODQuNCwxOC40IDgzLjksMTggODIuOCwxOCBMNzcuMiwxOCBMNzcuMiwyNS43IEw3NS4yLDI1LjcgTDc1LjIsMTYuMiBMODIuOCwxNi4yIEM4NS44LDE2LjIgODYuNSwxNy45IDg2LjUsMTkuMyBDODYuNSwyMS44IDg0LjUsMjIuMyA4Mi45LDIyLjMgTDgyLjcsMjIuMyBMODYuOSwyNS44IEw4My43LDI1LjcgTDgzLjcsMjUuNyBMODMuNywyNS43IFogTTg5LDE2LjQgTDg4LjYsMTYuNCBMODguNiwxNy43IEw4OC4zLDE3LjcgTDg4LjMsMTYuNCBMODcuOSwxNi40IEw4Ny45LDE2LjEgTDg5LDE2LjEgTDg5LDE2LjQgTDg5LDE2LjQgTDg5LDE2LjQgWiBNOTAuNywxNy43IEw5MC40LDE3LjcgTDkwLjQsMTYuNyBMOTAuMSwxNy40IEw4OS44LDE3LjQgTDg5LjUsMTYuNyBMODkuNSwxNy43IEw4OS4yLDE3LjcgTDg5LjIsMTYuMSBMODkuNSwxNi4xIEw5MCwxNyBMOTAuNSwxNi4xIEw5MC44LDE2LjEgTDkwLjgsMTcuNyBMOTAuNywxNy43IEw5MC43LDE3LjcgWiIgZmlsbD0iI0ZGNjYwMCIgLz48cGF0aCBkPSJNNjUuOSwxNy45IEM2My4xLDE3LjkgNjEuNSwxOSA2MS41LDIxIEM2MS41LDIzIDYzLjEsMjQuMSA2NS45LDI0LjEgQzY4LjcsMjQuMSA3MC4zLDIzIDcwLjMsMjEgQzcwLjMsMTkgNjguNywxNy45IDY1LjksMTcuOSBMNjUuOSwxNy45IFoiIGZpbGw9IiNGRjY2MDAiIC8+PHBhdGggZD0iTTAsNDEuOSBMNDguNyw0MS45IEw0OC43LDIzLjQgTDQ0LjksMTguOCBMNDQuOSwyNS43IEw0Mi45LDI1LjcgTDQyLjksMTYuMiBMNDQuOSwxNi4yIEw0OC43LDIwLjcgTDQ4LjcsMCBMMCwwIEwwLDQxLjkgTDAsNDEuOSBMMCw0MS45IFogTTI4LjUsMTYuMiBMMzYuMSwxNi4yIEMzOS4xLDE2LjIgMzkuOCwxNy45IDM5LjgsMTkuMyBDMzkuOCwyMS44IDM3LjgsMjIuMyAzNi4yLDIyLjMgTDM2LDIyLjMgTDQwLjIsMjUuOCBMMzcuMSwyNS44IEwzMy4yLDIyLjQgTDMzLjIsMjAuNSBMMzYuMiwyMC41IEMzNy4yLDIwLjUgMzcuOCwyMC4xIDM3LjgsMTkuMyBDMzcuOCwxOC41IDM3LjMsMTguMSAzNi4yLDE4LjEgTDMwLjYsMTguMSBMMzAuNiwyNS44IEwyOC42LDI1LjggTDI4LjUsMTYuMiBMMjguNSwxNi4yIEwyOC41LDE2LjIgWiBNMTguMiwxNi4yIEwyMC41LDE2LjIgTDI1LjksMjUuNyBMMjMuNiwyNS43IEwyMi4xLDIzIEwxOC42LDIzIEwxOS42LDIxLjIgTDIxLjEsMjEuMiBMMTkuNCwxNy45IEwxNS4xLDI1LjcgTDEyLjgsMjUuNyBMMTguMiwxNi4yIEwxOC4yLDE2LjIgWiIgZmlsbD0iI0ZGNjYwMCIgLz48L2c+PC9nPjwvc3ZnPg==") no-repeat;
  background-size: 100%;
}

.main-loader {
  position: absolute;
  top: 50%;
  margin-top: -140px;
  width: 100%;
  text-align: center;
  color: #999;
  font-family: HelveticaNeueLight, "Helvetica Neue Light", HelveticaNeueThin, "Helvetica Neue Thin", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

body {
  padding: 0;
  margin: 0;
}

.main-loader > .logo {
  width: 104px;
  height: 40px;
  margin: 0 auto 25px;
  opacity: 0;
  animation: loading-logo 2s;
  animation-delay: 0.5s;
  animation-direction: forwards;
  transform: translateZ(0);
}

.main-loader > .loader > .inner {
  background-color: #f60;
  width: 1%;
  height: 3px;
  animation: loading-bar 3s;
  animation-direction: forwards;
  transform: translateZ(0);
  transform-origin: top left;
}

.main-loader > .loader {
  position: absolute;
  top: calc(50% + 50px);
  left: calc(50% - 100px);
  width: 200px;
  background-color: #eee;
  height: 3px;
}

@keyframes loading-logo {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes loading-bar {
  0% { transform: scale(1, 1); }
  15% { transform: scale(45, 1); }
  20% { transform: scale(50, 1); }
  50% { transform: scale(65, 1); }
  75% { transform: scale(95, 1); }
  100% { transform: scale(100, 1); }
}