<link href='//fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>


<div class='logo'>        
<a href="http://www.proactive.dk/">
  <div class='logo__pro'>pro</div>  
  <div class='logo__active'>active<span class='logo__active__space'></span></div>
  <div class='logo__p'>p</div> 
</a>
</div>
  
@import "compass/css3";

$device-extra-small: 480px;
$device-medium: 992px;
$color-brand: #b40a1a;
$transition-delay: 0.8s;

html, body{ 
  font-family: Oxygen, sans-serif;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  transform-style: preserve-3d;    
}

.logo {  
      
  &:hover .logo__pro, &:hover .logo__active {
     transition: all $transition-delay;
     color: $color-brand;
     transform: scale(1.03);     
  }
  
  text-transform: uppercase;
  font-size: 200%;
  @media (min-width: $device-extra-small){
      font-size: 400%;
  } 
  @media (min-width: $device-medium){
      font-size: 600%;
  } 
  position: relative;
  padding-top: 1em - 0.5em;
  display: inline-block;

  a{
    text-decoration: none;
  }
  
  &__pro, &__active{
    transition: all $transition-delay;
    float: left;
  }  
  &__pro {    
    color: gray;      
  }
  &__active{
    color: black;      
    &__space {
      display: inline-block;
      min-width: 1em - 0.5em;    
    }
  }
  
  &__p {                  
    line-height: 1;
    overflow: hidden;    
    padding: 0.4em;
    padding-top: 0;
    text-transform: initial;
    font-family: 'Audiowide', cursive;
    z-index: -1;
    font-size: 0.5em;
    color: white;
    background-color: $color-brand;
    border-radius: 50%;
    position: absolute;
    top: 0.4em;    
    right: -0.4em;    
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.