#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;
} */

.bpic {
    animation: animb 1.5s linear forwards;
}

.fpic {
    animation: animf 1.5s linear forwards;
}

@keyframes animb {
    0% {filter: sepia(0.5) saturate(0.8) opacity(0);}
    33% {filter: sepia(0.5) saturate(0.8) opacity(0.33);}
    66% {filter: sepia(0.5) saturate(1) opacity(0.66);}
    100% {filter: sepia(0) saturate(1.2) opacity(1);}
}

@keyframes animf {
    0% {filter: sepia(0) saturate(1.2) opacity(1);}
    33% {filter: sepia(0)  saturate(1) opacity(0.66);}
    66% {filter: sepia(0.5)  saturate(0.8) opacity(0.33);}
    100% {filter: sepia(0.5)  saturate(0.8) opacity(0);}
}