html {
    height: 100%;
    font-size: 1.05em;
    font-family: 'Roboto', sans-serif;
}

/*{
    font-weight: 100;
}*/

h2, h1, h3, .back {
    font-weight: 300;
    color: #180423;
}

a, .link {
    color: #7E4C99;
    text-decoration: underline;
}

a + span, .has-arrow + span, .link-no-style + span{
    opacity:0;
}

a + span, .has-arrow + span, .link-no-style + span, .link + span{
    position:relative;
    padding-left:.2em;
    padding-right:.2em;
    -moz-transition: opacity .4s linear,left .8s linear,right .8s linear,top .8s linear,bottom .8s linear;
    -o-transition: opacity .4s linear,left .8s linear,right .8s linear,top .8s linear,bottom .8s linear;
    -webkit-transition: opacity .4s linear,left .8s linear,right .8s linear,top .8s linear,bottom .8s linear;
    transition: opacity .4s linear,left .8s linear,right .8s linear,top .8s linear,bottom .8s linear;
    left:0;
    top:0;
}

a:hover + span, .link:hover + span, .link-no-style:hover + span, .link + span{
    opacity:1;
}

a:hover + span.left-arrow, .link:hover + span.left-arrow, .link-no-style:hover + span.left-arrow, .link:hover + span.left-arrow{
    left:-.2em;
}
a:hover + span.right-arrow, .link:hover + span.right-arrow, .link-no-style:hover + span.right-arrow, .link:hover + span.right-arrow{
    left:.2em;
}
a:hover + span.top-arrow, .link:hover + span.top-arrow, .link-no-style:hover + span.top-arrow, .link:hover + span.top-arrow{
    top:-.2em;
}
a + span.bottom-arrow, .link + span.bottom-arrow, .link-no-style + span.bottom-arrow, .link:hover + span.bottom-arrow{
    top:-.5em;
}
a:hover + span.bottom-arrow, .link:hover + span.bottom-arrow, .link-no-style:hover + span.bottom-arrow, .link:hover + span.bottom-arrow{
    top:.0em;
}

img.full-panel {
    width: 100%;
    margin-top: .5em;
}

body {
    height: 100%;
    margin: 0;
    background-color: #052701;
}

.back {
    position:relative;
    left:.1em;
    margin-right:.3em;
    margin-left:.3em;
    font-size: 1.5em;
    padding: .2em;
    -moz-transition: background .4s linear,left .4s linear;
    -o-transition: background .4s linear,left .4s linear;
    -webkit-transition: background .4s linear,left .4s linear;
    transition: background .4s linear,left .4s linear;
    border-radius:50%;
    width: 1em;
    height: 1em;
    text-align: center;
    vertical-align: middle;
}

.title-row:hover .back{
    /*background:white;*/
    left:-.1em;
}

.title-row {
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    align-items:center;
}

#background {
    position: absolute;
    z-index: -10;
    width: 100%;
}

.page-body {
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    min-height: 100%;
    margin: 0;
    /*background-image: url("https://upload.wikimedia.org/wikipedia/commons/4/41/Greer_Spring-Oct2013-067.jpg");*/
    /*background-image: url("https://scontent-iad3-1.xx.fbcdn.net/t31.0-8/s960x960/12672112_10207788252758748_5765519226639187257_o.jpg");*/
    background-size: cover;
}


    .page-body .end {
        -ms-flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 1em;
    }

    .page-body .expanded {
        box-shadow: 0 0 15px #180423;
        flex-shrink: 0;
        flex-grow: .2;
        flex-basis: auto;
        background-color: #FFDA9B;
        overflow-x: hidden;
        /*border: 1px solid rgba(0,0,0,.1);*/
        transition: background-color 1.2s linear;
    }

    .page-body .content {
        margin: 2em;
    }

.expanded.ng-enter {
    animation: outer-enter 1.2s linear;
}

.expanded.ng-leave {
    animation: outer-leave 1.2s linear;
}


@keyframes outer-enter {
    0% {
        max-width: 0;
    }

    70% {
        max-width: 100%;
    }

    100% {
        max-width: 100%;
    }
}

@keyframes outer-leave {
    0% {
        max-width: 100%;
    }

    15% {
        max-width: 100%;
    }
    
    50% {
        max-width: 0%;
    }

    100% {
        max-width: 0;
    }
}

.inner-page {
    min-width: 300px;
}

.expanded.ng-enter .inner-page {
    animation: inner-enter 1.2s linear;
}

.expanded.ng-leave .inner-page {
    animation: inner-leave 1.2s linear;
}

@keyframes inner-enter {
    0% {
        opacity: 0;
    }

    70% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes inner-leave {
    0% {
        opacity: 1;
    }

    15% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.page-body .expanded.pos0of1 {
    flex-shrink: 0;
}

.page-body .expanded.pos0of2 {
    flex-shrink: 1;
    background-color: #E5B86B;
}

.page-body .expanded.pos1of2 {
    flex-shrink: 0;
}

.page-body .expanded.pos0of3 {
    flex-shrink: 1;
    /*background-color: #705F15;*/
    background-color: #AF9A3C;
}

.page-body .expanded.pos1of3 {
    flex-shrink: .5;
    background-color: #E5B86B;
}

.page-body .expanded.pos2of3 {
    flex-shrink: 0;
}

.page-body .expanded.pos0of4 {
    /*background-color: #2F2702;*/
    background-color: #705F15;
    flex-shrink: 1;
}

.page-body .expanded.pos1of4 {
    background-color: #AF9A3C;
    flex-shrink: .5;
}

.page-body .expanded.pos2of4 {
    flex-shrink: .25;
    background-color: #E5B86B;
}

.page-body .expanded.pos3of4 {
    flex-shrink: 0;
}

#notice {
    background-color: #36124A;
    font-size: 2em;
    text-align: center;
    padding: .2em;
    z-index: 10;
    position: relative;
    color: white;
    box-shadow: 0 0 15px #180423;
}

#footer {
    background-color: #36124A;
    /*text-align:center;*/
    padding: .2em;
    z-index: 10;
    position: relative;
    box-shadow: 0 0 15px #180423;
    color: white;
}

    #footer .pannel {
        max-width:300px;
    }

    #footer .pannel a {
        color: white;
    }

    #footer .pannel h3 {
        color: white;
    }

    #footer ul {
        list-style: none;
        padding-left: 0;
    }

#footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

    #footer .pannel {
        padding: 1em;
    }


#works li {
    padding-bottom:.5em;

}