<div class="container">
	<div class="logo-wrap">
	  <svg width="679.371px" height="152.002px" viewBox="0 0 679.371 152.002" enable-background="new 0 0 679.371 152.002">
			<g>
				<polyline class="letter n" points="98.826,58.208 98.826,82.788 62.01,49.637 
					62.01,104.941 71.174,104.941 71.174,71.87 108.07,105.021 108.07,104.941 108.07,104.862 108.07,48.783 	"/>
				<g>
					<path class="letter o" d="M156.942,49.717c7.651,0,14.158,2.709,19.524,8.128c5.471,5.419,8.208,11.928,8.208,19.524
						c0,7.704-2.736,14.212-8.208,19.523c-5.366,5.419-11.874,8.129-19.524,8.129c-7.65,0-14.158-2.71-19.523-8.129
						c-5.419-5.365-8.129-11.874-8.129-19.523c0-7.597,2.71-14.105,8.129-19.524C142.73,52.426,149.239,49.717,156.942,49.717z
						 M156.942,58.961c-5.047,0-9.403,1.807-13.069,5.419c-3.56,3.613-5.34,7.943-5.34,12.99s1.78,9.404,5.34,13.069
						c3.666,3.56,8.021,5.34,13.069,5.34c5.047,0,9.376-1.78,12.99-5.34c3.613-3.665,5.419-8.021,5.419-13.069
						c0-5.047-1.806-9.376-5.419-12.99C166.318,60.768,161.989,58.961,156.942,58.961z"/>
					
					<path class="letter r-1" d="M241.461,105.021l-10.679-18.408h-15.619v18.408h-9.165V49.717h27.652c5.047,0,9.376,1.806,12.99,5.419
						c3.613,3.613,5.419,7.943,5.419,12.99c0,3.825-1.089,7.305-3.267,10.439c-2.125,3.082-4.835,5.287-8.129,6.615l11.396,19.842
						L241.461,105.021L241.461,105.021z M233.651,58.961h-18.487v18.328l18.487,0.08c2.497,0,4.649-0.903,6.455-2.71
						c1.805-1.805,2.71-3.984,2.71-6.534c0-2.497-0.904-4.649-2.71-6.455C238.299,59.865,236.148,58.961,233.651,58.961z"/>
					
					<path class="letter t" d="M268.674,49.717h46.14v9.244h-18.408v46.06h-9.244v-46.06h-18.488L268.674,49.717L268.674,49.717z"/>
					
					<path class="letter h" d="M335.652,49.717h9.165v23.03h27.652v-23.03h9.244v55.304h-9.244v-23.03h-27.652v23.03h-9.165V49.717z"/>
					
					<path class="letter e" d="M445.033,49.717v9.244h-27.652v13.866h26.799v9.165h-26.799v13.787h27.652v9.244h-36.817V49.717H445.033z"/>
					
					<path class="letter r-2" d="M506.998,105.021l-10.679-18.408H480.7v18.408h-9.165V49.717h27.652c5.047,0,9.376,1.806,12.99,5.419
						c3.613,3.613,5.419,7.943,5.419,12.99c0,3.825-1.089,7.305-3.267,10.439c-2.125,3.082-4.835,5.287-8.129,6.615l11.396,19.842
						L506.998,105.021L506.998,105.021z M499.188,58.961H480.7v18.328l18.487,0.08c2.497,0,4.649-0.903,6.455-2.71
						c1.805-1.805,2.71-3.984,2.71-6.534c0-2.497-0.904-4.649-2.71-6.455C503.836,59.865,501.685,58.961,499.188,58.961z"/>
					
					<path class="letter l" d="M542.394,49.717h9.165v46.06h27.652v9.244h-36.817L542.394,49.717L542.394,49.717z"/>
					
					<path class="letter i" d="M603.156,49.717h9.165v55.304h-9.165V49.717z"/>
				</g>
			</g>
		</svg>
    <div class="tagline">
      <p class="icon">▲</p>
      <p class="filler">User Friendly Design/Development</p>
    </div>
	</div>
	

</div>

// Background Color
$dark:#2b2824;

// Logo Box Width
$start-width: 167px;
$end-width:680px;

// Opacity - Start & End
$start-opacity:0.16;
$start-color:#d0c4b3;
$start-color-rgb:208,196,179;
$end-opacity:0.8;

// Logo Box
$border:20px;
$cover-up:9px;
$box:$cover-up + 12px;

// Transition Timing
$initial-delay:666ms;
$increment:$initial-delay / 10;


body {background:lighten($start-color, 12%);}


// Color Background
.container {
  position:absolute;
  background:$dark;
  box-shadow:inset 0 0 20px darken($dark, 13%);
  top:$border;
  bottom:$border;
  right:$border;
  left:$border;
 }

// Fade In Keyframes
$start:0; $end:1;
@keyframes fadeIn { from { opacity:$start; } to { opacity:$end; } }


.logo-wrap, svg, .border, .letter {
  transition: all $initial-delay ease-in-out;
}

// Logo Size & Styling
.logo-wrap {
  margin:75px auto;
  width:$start-width;
  box-shadow:inset 0 0 0 $cover-up $dark,
             inset 0 0 0 $box rgba(208,196,179, $start-opacity);
  transition-delay: $initial-delay;
  opacity:0;
  transform:scale(0.6);

  animation:fadeIn ease-in 1;
  animation-fill-mode:forwards;
  animation-duration:1.75s;
  animation-delay: 0;
  
  // Tagline & Icon Styling
  .tagline {
    width:$end-width;
    margin-left:-($start-width * 1.53);
    position:absolute;
    font-family:'Lato', sans-serif;
    font-weight:400;
    font-size:1.2em;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:rgba(208,196,179,$start-opacity);
    transition: all $initial-delay ease-in-out ($initial-delay / 3);

    .filler {
      opacity:0;
      transition: opacity ($initial-delay / 2.5) ease-in-out;
    }
  }
  
  // Tagline Fade In
  &:hover {
    .tagline {
      width:$end-width;
      margin-left:0px;
      color:rgba(208,196,179,$end-opacity);
      transition: all $initial-delay ease-in-out 0;
    
      .filler {
        opacity:1;
        transition: opacity $initial-delay ease-in-out;
      }
    }
  }
  
  // Logo Styling
  svg {
    .border {
      fill:$start-color;
      opacity:$start-opacity;
    }

    .letter {
      fill:$start-color;
      opacity:$start-opacity;
      transition-delay: 0s;

      &.o, &.r-1, &.t, &.h, &.e, &.r-2, &.l, &.i{
        opacity:0;
      }
     }
   }

   // Logo Expand/Fade In
   &:hover {
    width:$end-width;
    transition-delay: 0s;
    box-shadow:inset 0 0 0 $cover-up $dark,
               inset 0 0 0 $box rgba(208,196,179, $end-opacity);
  
    // Background Image
    &:after {
      content: "";
      opacity: 0.2;
      top: $cover-up;
      left: $cover-up;
      bottom: $cover-up;
      right: $cover-up;
      position: absolute;
      z-index: -1;
      background:url('http://norther.li/_codepen/logo-animation-bkgd.jpg') no-repeat center;
      background-size:cover;
    }
    
    // Logo Opacity Fade In
    svg {
      .border {opacity:$end-opacity;}

     .letter {
       opacity:$end-opacity;
       transition-delay: $initial-delay;
  
       // Letter Fade In Order
       &.o, &.r-1, &.t, &.h, &.e, &.r-2, &.l, &.i{
         opacity:$end-opacity;
       }

       &.o {transition-delay: $initial-delay + $increment;}
       &.r-1 {transition-delay: $initial-delay + ($increment * 2);}
       &.t {transition-delay: $initial-delay + ($increment * 3);}
       &.h {transition-delay: $initial-delay + ($increment * 4);}
       &.e {transition-delay: $initial-delay + ($increment * 5);}
       &.r-2 {transition-delay: $initial-delay + ($increment * 6);}
       &.l {transition-delay: $initial-delay + ($increment * 7);}
       &.i {transition-delay: $initial-delay + ($increment * 8);}
      }
    }
  }
}