@import url(http://fonts.googleapis.com/css?family=Terminal+Dosis);


/* Footer ------------------------------------------------------ */

#footer {
    position: fixed;
    z-index: 1000;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 200px;
    padding: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    
    font: 13px/18px 'Terminal Dosis', sans-serif;
    text-align: center;
    
    box-shadow: inset 0 2px 5px hsla(0,0%,0%,.5);
	background-color: hsl(0,0%,15%);
	background-size: 5px 5px;
	background-image:   -webkit-linear-gradient( 45deg, hsla(0,0%,0%,0) 0px, hsla(0,0%,0%,.10) 50%, hsla(0,0%,0%,0) 100% );
	
	
	-webkit-transform: translate3d(0,100%,0);
	   -moz-transform: translateY(100%);
	    -ms-transform: translateY(100%);
	     -o-transform: translateY(100%);
	        transform: translateY(100%);
	-webkit-transition: -webkit-transform .3s cubic-bezier(.43, .10, .12, 1);
	   -moz-transition:    -moz-transform .3s cubic-bezier(.43, .10, .12, 1);
	    -ms-transition:     -ms-transform .3s cubic-bezier(.43, .10, .12, 1);
	     -o-transition:      -o-transform .3s cubic-bezier(.43, .10, .12, 1);
	        transition:         transform .3s cubic-bezier(.43, .10, .12, 1);
    }

#footer:hover {
	-webkit-transform: translate3d(0,0,0);
	   -moz-transform: translateY(0);
	    -ms-transform: translateY(0);
	     -o-transform: translateY(0);
	        transform: translateY(0);  
    }


#footer > h1 {
	margin: 0;
	color: hsla(0,0%,25%,1);
	font-size: 40px;
	line-height: 1.5em;
	font-weight: 500;
	white-space: nowrap;
    }

#footer a {
    display: inline-block;
	color: hsl(312, 100%, 76%);
	margin: 0 8px;
	font-size: 24px;
	line-height: 1.2em;
	font-weight: 500;
	font-style: normal;
	text-decoration: none;
    }
#footer a:hover {
	color: hsl(312, 100%, 90%);
    }
#footer a:active {
	color: hsl(312, 50%, 50%);
    }

#footer .social {
    margin-top: 20px;
    }

#footer .social a {
	color: hsla(0,0%,25%,1);
    font-size: 16px;
    }
    
#footer .social iframe {
	margin: 0 4px;
    }


/* Stamp ------------------------------------------------------ */

#footer > .stamp {
	position: fixed;
	bottom: 200px;
	right: 0;
	width: 120px;
	height: 120px;
	padding: 0 20px 20px 0;
	}

#footer > .stamp > .ink {
	position: absolute;
	width: 60px;
	height: 120px;
	top: 0px;
	right: 20px;
	background: url(../img/stamp.svg);
	opacity: .2;
	-webkit-transition: -webkit-transform .3s cubic-bezier(.43, .10, .12, 1), opacity .3s ease-out;
	   -moz-transition:    -moz-transform .3s cubic-bezier(.43, .10, .12, 1), opacity .3s ease-out;
	    -ms-transition:     -ms-transform .3s cubic-bezier(.43, .10, .12, 1), opacity .3s ease-out;
	     -o-transition:      -o-transform .3s cubic-bezier(.43, .10, .12, 1), opacity .3s ease-out;
	        transition:         transform .3s cubic-bezier(.43, .10, .12, 1), opacity .3s ease-out;
    }

#footer:hover > .stamp > .ink {
	opacity: 1;
	-webkit-transform: translate3d(0,180px,0);
	   -moz-transform: translateY(180px);
	    -ms-transform: translateY(180px);
	     -o-transform: translateY(180px);
	        transform: translateY(180px);
    }