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

#imgholder {
    background-repeat: no-repeat;
    background-size: cover;
}


#imgholder, #imgholder div {
    overflow: visible;
}

.div3div {
    position: absolute;
    width: 20%;
    height: 100%;
    perspective: 500px;
}

.div3div div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    background-size: cover;
}

.divb, .divf {
    perspective: 500px;
    transform: rotateY(0deg);
}

.divf {
    backface-visibility: hidden;
}

.divb > div {
    transform: rotateY(180deg);
}



.fp, .fptrans {
    left: -20%;
    position: absolute;
    display: inline-block;
    width: 20%;
    height: 100%;
    background-size: cover;
}

.fptrans {
   transition: 0.3s linear;
}

.p100 {
    background-position: 100%;
}

.p75 {
    background-position: 75%;
}

.p50 {
    background-position: 50%;
}

.p25 {
    background-position: 25%;
}

.p0  {
    background-position: 0;
}


.left0 {
    left: 0%;
}

.left20 {
    left: 20%;
}

.left40 {
    left: 40%;
}

.left60 {
    left: 60%;
}

.left80 {
    left: 80%;
}

.nort {
    transform: rotateY(0deg);
    transition: 0s;
}

.halfrt {
    transform: rotateY(180deg);
    transition: 0s;
}

.halffw {
    transform: rotateY(180deg);
    transition: 0.7s linear;
}

.fullfw {
    transform: rotateY(360deg);
    transition: 0.7s linear;
}

.halfbw {
    transform: rotateY(-180deg);
    transition: 0.7s linear;
}

.fullbw {
    transform: rotateY(0deg);
    transition: 0.7s linear;
}