.page-bounds {
    transform-style: preserve-3d;
    transform: perspective(10cm);
    transition: transform 1s cubic-bezier(0, .63, .33, 1), opacity 1s cubic-bezier(0, .63, .33, 1);
}

.anim-links{
    visibility: hidden;
    animation: fade-in 1s cubic-bezier(.03,-0.03,0,1.01) 1.1s forwards;
    -webkit-animation: fade-in 1s cubic-bezier(.03,-0.03,0,1.01) 1.1s forwards;
}

.anim-logo-left{
    opacity: 0;
    transform: translateX(-60%);
    animation: logo-left 1s cubic-bezier(.03,-0.03,0,1.01) .91s forwards, fade-in 1s cubic-bezier(0,.39,.64,1) .25s forwards;
    -webkit-animation: logo-left 1s cubic-bezier(.03,-0.03,0,1.01) .91s forwards, fade-in 1s cubic-bezier(0,.39,.64,1) .25s forwards;
    -webkit-transform: translateX(-60%);
    -moz-transform: translateX(-60%);
    -ms-transform: translateX(-60%);
    -o-transform: translateX(-60%);
}

.anim-logo-right{
    opacity: 0;
    transform: translateX(60%);
    animation: logo-right 1s cubic-bezier(.03,-0.03,0,1.01) .93s forwards, fade-in 1s cubic-bezier(0,.39,.64,1) .65s forwards;
    -webkit-animation: logo-right 1s cubic-bezier(.03,-0.03,0,1.01) .93s forwards, fade-in 1s cubic-bezier(0,.39,.64,1) .65s forwards;
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -ms-transform: translateX(60%);
    -o-transform: translateX(60%);
}

.anim-logo-top{
    opacity: 0;
    transform: translateY(60%);
    animation: logo-top 1s cubic-bezier(.03,-0.03,0,1.01) .92s forwards, fade-in 1s cubic-bezier(0,.39,.64,1) .4s forwards;
    -webkit-animation: logo-top 1s cubic-bezier(.03,-0.03,0,1.01) .92s forwards, fade-in 1s cubic-bezier(0,.39,.64,1) .4s forwards;
    -webkit-transform: translateY(60%);
    -moz-transform: translateY(60%);
    -ms-transform: translateY(60%);
    -o-transform: translateY(60%);
}

.anim-logo-bottom{
    opacity: 0;
    transform: translateY(-60%);
    animation: logo-bottom 1s cubic-bezier(.03,-0.03,0,1.01) .94s forwards, fade-in 1s cubic-bezier(0,.39,.64,1) .88s forwards;
    -webkit-animation: logo-bottom 1s cubic-bezier(.03,-0.03,0,1.01) .94s forwards, fade-in 1s cubic-bezier(0,.39,.64,1) .88s forwards;
    -webkit-transform: translateY(-60%);
    -moz-transform: translateY(-60%);
    -ms-transform: translateY(-60%);
    -o-transform: translateY(-60%);
}

.navbar {
    transition: transform 0.5s cubic-bezier(0, .63, .33, 1);
}

.sidebar {
    transition: transform 0.5s cubic-bezier(0, .63, .33, 1);
}

.content-background {
    transform: perspective(10cm) translateZ(-4em);
    opacity: 0.3;
}

.navbar.hidden {
    transform: translateY(-100%);
}

.sidebar-hide {
    transform: translateX(-101%);
}

.sidebar-show {
    animation: sidebar-in 0.5s cubic-bezier(0, .63, .33, 1) backwards;
}

.loading-icon {
    margin: auto;
    width: 8em;
    height: 8em;
    background-image: url("../media/loading-strip.png");
    background-size: cover;
    background-position: left;
    animation: loading-icon .9s steps(24) infinite;
}

@keyframes fade-in{
    0%{
        visibility: visible;
        opacity: 0;
}
    100%{
        visibility: visible;
        opacity: 1;
}
}

@keyframes logo-left {
    0% {
        transform: translateX(-60%);
        -webkit-transform: translateX(-60%);
        -moz-transform: translateX(-60%);
        -ms-transform: translateX(-60%);
        -o-transform: translateX(-60%);
}

    100% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
    }
}

@keyframes logo-top {
    0% {
        transform: translateY(60%);
        -webkit-transform: translateY(60%);
        -moz-transform: translateY(60%);
        -ms-transform: translateY(60%);
        -o-transform: translateY(60%);
}

    100% {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
}
}

@keyframes logo-bottom {
    0% {
        transform: translateY(-60%);
        -webkit-transform: translateY(-60%);
        -moz-transform: translateY(-60%);
        -ms-transform: translateY(-60%);
        -o-transform: translateY(-60%);
}

    100% {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
}
}

@keyframes logo-right {
    0% {
        transform: translateX(60%);
        -webkit-transform: translateX(60%);
        -moz-transform: translateX(60%);
        -ms-transform: translateX(60%);
        -o-transform: translateX(60%);
}

    100% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
}
}

@keyframes loading-icon {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}

@keyframes sidebar-out {
    0% {
        transform: translateX(0%);
    }

    100% {}
}

@keyframes sidebar-in {
    0% {
        transform: translateX(-101%);
    }

    100% {
        transform: translateX(0%);
    }
}