@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'danielregular';
    src: url('daniel-webfont.eot');
    src: url('daniel-webfont.eot?#iefix') format('embedded-opentype'),
         url('daniel-webfont.woff') format('woff'),
         url('daniel-webfont.ttf') format('truetype'),
         url('daniel-webfont.svg#danielregular') format('svg');

}



html,
body {
	margin:0;
	padding:0;
	height:100%;
}

body { background-color: #31343B; }

#wrapper {
	min-height:100%;
	position:relative;
}
#header {
	padding:10px;
}
#content {
	padding:10px;
	padding-bottom:80px;   /* Height of the footer element */
}
#footer {
	width:100%;
	text-align:center;
	position:absolute;
	font-size:10px;
	color:grey;
	bottom:0;
	left:0;
}


.logo {
    display: block;
    margin: 20% auto 0;
    width: 300px;
}
.contact {
    position: relative;
    display: block;
    margin: 0 auto;
    padding-top: 50px;
    width: 320px;
    text-align: center;
    text-decoration: none;
}
.get-in-touch {
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: 65px;
    color: white;
    text-shadow: 1px 1px 1px black;
    font-size: 20px;
    font-family: 'danielregular';
    -webkit-animation: slow-tilt 2s infinite ease;
    -moz-animation: slow-tilt 2s infinite ease;
    -o-animation: slow-tilt 2s infinite ease;
}

.get-in-touch a {
    
    
    color: white;
    text-shadow: 1px 1px 1px black;
    text-decoration:none;
	padding-top: 5px;
    font-family: 'danielregular';
    -webkit-animation: slow-tilt 5s infinite ease;
    -moz-animation: slow-tilt 5s infinite ease;
    -o-animation: slow-tilt 5s infinite ease;
}

.portfolio {
    position: absolute;
    bottom: 20px;
    left: 0%;
    margin-left: 5px;
    color: white;
    text-shadow: 1px 1px 1px black;
    font-size: 20px;
	padding-top: 5px;
    font-family: 'danielregular';
    -webkit-animation: slow-tilt 2s infinite ease;
    -moz-animation: slow-tilt 2s infinite ease;
    -o-animation: slow-tilt 2s infinite ease;
}
.portfolio a {
    
    
    color: white;
    text-shadow: 1px 1px 1px black;
    text-decoration:none;
	padding-top: 5px;
    font-family: 'danielregular';
    -webkit-animation: slow-tilt 5s infinite ease;
    -moz-animation: slow-tilt 5s infinite ease;
    -o-animation: slow-tilt 5s infinite ease;
}

@-webkit-keyframes slow-tilt {
    0% { -webkit-transform: rotate(-5deg) translate(-3px); }
    50% { -webkit-transform: rotate(-8deg) translate(0px); }
    100% { -webkit-transform: rotate(-5deg) translate(-3px); }
}
@-moz-keyframes slow-tilt {
    0% { -moz-transform: rotate(-5deg) translate(-3px); }
    50% { -moz-transform: rotate(-8deg) translate(0px); }
    100% { -moz-transform: rotate(-5deg) translate(-3px); }
}
@-o-keyframes slow-tilt {
    0% { -o-transform: rotate(-5deg) translate(-3px); }
    50% { -o-transform: rotate(-8deg) translate(0px); }
    100% { -o-transform: rotate(-5deg) translate(-3px); }
}
@keyframes slow-tilt {
    0% { transform: rotate(-5deg) translate(-3px); }
    50% { transform: rotate(-8deg) translate(0px); }
    100% { transform: rotate(-5deg) translate(-3px); }
}
.arrow {
    position: absolute;
    top: 50%;
    margin-top: -30px;
}
.gravatar {
    display: inline-block;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border: white 3px solid;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    background: url('images/web-logo.png') no-repeat;
	background-size:100px;
    box-shadow: 0 1px 6px -2px black;

}
.gravatar img {
    opacity: 0;
    filter: alpha(opacity=0);
}