*, *:before, *:after { box-sizing: border-box; }
html { height: 100%; }
body {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  min-height:       100%;
  background-color: #f5f6f9;
}

.logo-container {
  position: relative;
  
  &:before {
    content:  "";
    position: absolute;
    top:      calc( 100% - 2px );
    width:    100%;
    height:   4px;
    background-color: #cf0000;
    transform-origin: center center;
    transform: scaleX( 0 );
    
    animation: line-animation 3s ease infinite alternate;
  }
  
  h1#page-logo {
    font: bold 6rem 'Arial', sans-serif;
    text-align: center;
    
    animation: clip-path-reveal-1 3s ease infinite alternate;
  }
}

@keyframes line-animation {
  0% { transform: scaleX( 0 ); }
  15% { transform: scaleX( 0 ); }
  20%, 25% { transform: scaleX( 1 ); top: calc( 100% - 2px ); }
  50% { transform: scaleX( 1 ); top: 0px; }
  70% { transform: scaleX( 0.2 ); top: 0px; }
  80%, 100% { transform: scaleX( 0.2 ); top: 0px; }
}

@keyframes clip-path-reveal-1 {
  0%, 25% { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); }
  50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
}

#wrapper {
	width: 1024px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}


/* Footer
-----------------------------------------------------------------------------*/
#footer {
	width: 1024px;
	margin: -50px auto 0;
	padding-top: 100px;
	height: 50px;
	position: relative;
	text-align: center;
	font: bold 1.5rem 'Arial', sans-serif;
}

/* unvisited link */
a:link {
  color: blue;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: red;
}

/* selected link */
a:active {
  color: yellow;
}