#outerholder {
    max-width: 600px;
}


#imgholder img {
    position: absolute;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.backpic {
    /* opacity: 0;
    transition: 1s linear; */
}

.frontpic {
    /* opacity: 1;
    transition: 1s linear; */
}

.fpic {
    animation: animf 1.5s linear forwards;
    /* opacity: 0; */
}

.bpic {
    animation: animb 1.5s linear forwards;
    /* opacity: 1; */
}

@keyframes animb {
    0% {filter: sepia(1) opacity(0);}
    25% {filter: sepia(1) opacity(0.25);}
    75% {filter: sepia(0.75) opacity(0.75);}
    100% {filter: sepia(0) opacity(1);}
}

@keyframes animf {
    0% {filter: sepia(0) opacity(1);}
    25% {filter: sepia(0.25) opacity(0.75);}
    75% {filter: sepia(0.75) opacity(0.25);}
    100% {filter: sepia(1) opacity(0);}
}