<div class="row">
  <div class="block">
    <h1>
      <span>EST MMXIII</span>
    </h1>
   </div>
</div>

@import "compass/css3";

$freshcolor   : #47b372;
$darkcolor    : #192238;

$basefont : "Times New Roman", times, serif;
$basefontsize : 24;
$baselineheight : 1.5;
$baseline-unit: $basefontsize * $baselineheight;
$basefontpercent: $basefontsize/16 * 100;

html,
body {
  height: 100%;
  width: 100%;
}

body {
  font: #{$basefontpercent}%/#{$baselineheight} $basefont ;
  background: $darkcolor;
  text-align: center;
}

.row {
  display: table;
  width: 100%;
  height: 100%;
  margin: auto;
}

.block {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  position: relative;
}

h1 {
  position: relative;
  display: inline-block;
  font-family: $basefont;
  font-weight: 500;
  letter-spacing: 0.15em;
  white-space: nowrap;
  text-align: center;
  font-size: 1em;
  text-transform: uppercase;

  &:after,
  &:before {
    content: " ";
    display: block;
    position: absolute;
    bottom: -.5em;
    width: 1em;
    height: 100%;
    background-color: lighten($freshcolor,10);
    pointer-events:none;
  }

  &:after {
    right: -.57em;
    z-index: -1;
  }

  &:before {
    bottom: auto;
    top: -.5em;
    left: -.57em;
    z-index: -1;
  }

  span {
    display: inline-block;
    position: relative;
    padding: .15em .75em;
    text-decoration: none;
    color: darken($darkcolor,0);
    background-color: lighten($freshcolor,20);


    &:after,
    &:before {
      content: " ";
      display: block;
      position: absolute;
      width: 0;
      height: 0;
      bottom: -.5em;
      left: -.05em;
      pointer-events: none;
      -webkit-mask: none;
    }

    &:before {
      bottom: auto;
      top: -.5em;
      border-bottom: .5em solid darken($freshcolor,10);
      border-left: .5em solid transparent;
    }

    &:after {
      left:  auto;
      right: -.05em;
      border-top: .5em solid darken($freshcolor,10);
      border-right: .5em solid transparent;
    }
  }

}