#front {
    height: 100%;
    -webkit-animation: fadein 1.4s;
    animation: fadein 1.4s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    border: 10px solid #111;
    box-sizing: border-box
}

@-webkit-keyframes fadein {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadein {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

#front header {
    height: 30%
}

#front h1 {
    font-family: "HelveticaNeue-Thin", "Helvetica Neue Thin", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    position: absolute;
    top: 1em;
    width: 100%;
    font-weight: 300;
    font-size: 4.6em;
    letter-spacing: .4em;
    text-align: center;
    -webkit-animation: header 1.5s;
    animation: header 1.5s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes header {
    from {
        -webkit-transform: rotateX(64deg) scale(0.8);
        color: #fff;
        letter-spacing: .9em
    }
    to {
        -webkit-transform: rotateX(0deg) scale(1);
        color: #111;
        letter-spacing: .4em
    }
}

@keyframes header {
    from {
        -webkit-transform: rotateX(64deg) scale(0.8);
        color: #fff;
        letter-spacing: .9em
    }
    to {
        -webkit-transform: rotateX(0deg) scale(1);
        color: #111;
        letter-spacing: .4em
    }
}

@-webkit-keyframes headerMobile {
    from {
        -webkit-transform: rotateX(64deg) scale(0.8);
        color: #fff
    }
    to {
        -webkit-transform: rotateX(0deg) scale(1);
        color: #111
    }
}

@keyframes headerMobile {
    from {
        -webkit-transform: rotateX(64deg) scale(0.8);
        color: #fff
    }
    to {
        -webkit-transform: rotateX(0deg) scale(1);
        color: #111
    }
}

#portfolio {
    text-align: center;
    height: 65%
}

#portfolio>a {
    display: inline-block;
    height: 360px;
    width: 360px;
    padding: 18px;
    text-align: center;
    color: #fff;
    margin: 15px;
    box-sizing: border-box;
    border: 3px solid #868686;
    box-shadow: inset 0 0 0 0px #fff;
    position: relative;
    background: #fff;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-user-select: none;
    text-decoration: none
}

#portfolio h2 {
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 1.4em;
    position: absolute;
    bottom: 36px;
    left: 0;
    right: 0
}

#portfolio #lectioplus {
    background: url("../images/lectio.png");
    background-color: #5587ff;
    border-color: #5587ff;
    background-size: 64%;
    background-repeat: no-repeat;
    background-position: center 20%
}

#portfolio #rejseplus {
    background: url("../images/rejseplus.png");
    background-color: #0A59A2;
    border-color: #0A59A2;
    background-size: 64%;
    background-repeat: no-repeat;
    background-position: center 20%
}

#portfolio #divvy {
    background: url("../images/divvy.png");
    background-color: #2EB261;
    border-color: #2EB261;
    background-size: 64%;
    background-repeat: no-repeat;
    background-position: center 20%
}

#portfolio #lectioplus:hover,
#portfolio #rejseplus:hover,
#portfolio #divvy:hover {
    box-shadow: inset 0 0 0 8px #fff
}

#front footer {
    height: 5%;
    text-align: center
}

#front footer a {
    text-decoration: none;
    color: #111;
    border: 1px solid #111;
    padding: 5px;
    -webkit-transition: all .3s;
    transition: all .3s;
    box-shadow: inset 0 0 0 0px #111
}

#front footer a:hover {
    text-decoration: none;
    color: #fff;
    border: 1px solid #111;
    padding: 5px;
    -webkit-transition: all .3s;
    transition: all .3s;
    box-shadow: inset 0 0 0 16px #111
}

@media (min-width: 320px) and (max-width: 568px) {
    body {
        font-size: 15px
    }
    #front header {
        margin: 16px 0;
        padding: 10px;
        height: auto
    }
    #front h1 {
        position: static;
        font-size: 2em;
        letter-spacing: .2em;
        -webkit-animation: headerMobile 1.5s;
        animation: headerMobile 1.5s
    }
    #portfolio {
        height: auto
    }
    #portfolio>a {
        display: block;
        height: 180px;
        width: 180px;
        padding: 10px;
        margin: 20px auto
    }
    #portfolio h2 {
        bottom: 10%;
        font-size: 1.2em
    }
    #front footer {
        position: absolute;
        bottom: 20px;
        width: 100%;
        margin: 0 auto
    }
    #portfolio #lectioplus,
    #portfolio #rejseplus,
    #portfolio #divvy {
        background-size: 56%;
        background-position: center 28%
    }
}

* {
    margin: 0;
    padding: 0
}

html,
body {
    height: 100%
}

html {
    font-size: 18px;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #111;
    max-width: 100%;
    overflow-x: hidden
}

-ms-viewport {
    width: device-width
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic
}