#content, #container {
    overflow: visible;
}

#container {
    position: relative;
    padding: 2% 0;
}

#outerholder {
    position: relative;
    margin: 5% auto;
    overflow: visible;
    box-sizing: border-box;
    width: 480px;
    height: 360px;
}

#imgholder {
    position: absolute;
    margin: auto;
    overflow: visible;
    width: 100%;
    height: 100%;
    perspective: 1000px;
}

#frontpic, #backpic {
    position: absolute;
    margin: auto;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

#imgholder img {
    position: absolute;
    width: 100%;
    height: 100%;
    }

.imgfront {
    transform: rotateX(0deg) translateZ(180px);   /**/
}

.imgtop {
    transform: rotateX(90deg) translateZ(180px); /* */
}

.imgback {
    transform: rotateX(180deg) translateZ(180px);  /* */
}

.imgbot {
    transform: rotateX(270deg) translateZ(180px);  /* */
}

.frontimgfw {
    transform: rotateX(-90deg) translateZ(180px);  /* */
}

.backimgfw {
    transform: rotateX(0deg) translateZ(180px);  /* */
}

.frontimgbw {
    transform: rotateX(90deg) translateZ(180px);  /* */
}

.backimgbw {
    transform: rotateX(360deg) translateZ(180px);  /* */
}

.frontimgfw, .backimgfw, .frontimgbw, .backimgbw {
    transition: 1s ease-in-out;
}

@media (max-width: 960px)  {


     #outerholder {
         width: 480px;
         height:360px;
     }

.imgfront {
    transform: rotateX(0deg) translateZ(180px);   /**/
}

.imgtop {
    transform: rotateX(90deg) translateZ(180px); /* */
}

.imgback {
    transform: rotateX(180deg) translateZ(180px);  /* */
}

.imgbot {
    transform: rotateX(270deg) translateZ(180px);  /* */
}

.frontimgfw {
    transform: rotateX(-90deg) translateZ(180px);  /* */
}

.backimgfw {
    transform: rotateX(0deg) translateZ(180px);  /* */
}

.frontimgbw {
    transform: rotateX(90deg) translateZ(180px);  /* */
}

.backimgbw {
    transform: rotateX(360deg) translateZ(180px);  /* */
}


}

@media (max-width: 720px) {

     #outerholder {
         width: 360px;
         height: 240px;
     }

.imgfront {
    transform: rotateX(0deg) translateZ(120px);   /**/
}

.imgtop {
    transform: rotateX(90deg) translateZ(120px); /* */
}

.imgback {
    transform: rotateX(180deg) translateZ(120px);  /* */
}

.imgbot {
    transform: rotateX(270deg) translateZ(120px);  /* */
}

.frontimgfw {
    transform: rotateX(-90deg) translateZ(120px);  /* */
}

.backimgfw {
    transform: rotateX(0deg) translateZ(120px);  /* */
}

.frontimgbw {
    transform: rotateX(90deg) translateZ(120px);  /* */
}

.backimgbw {
    transform: rotateX(360deg) translateZ(120px);  /* */
}


}

@media (max-width: 600px) {

    #outerholder {
         width: 300px;
         height: 200px;
    }

.imgfront {
    transform: rotateX(0deg) translateZ(100px);   /**/
}

.imgtop {
    transform: rotateX(90deg) translateZ(100px); /* */
}

.imgback {
    transform: rotateX(180deg) translateZ(100px);  /* */
}

.imgbot {
    transform: rotateX(270deg) translateZ(100px);  /* */
}

.frontimgfw {
    transform: rotateX(-90deg) translateZ(100px);  /* */
}

.backimgfw {
    transform: rotateX(0deg) translateZ(100px);  /* */
}

.frontimgbw {
    transform: rotateX(90deg) translateZ(100px);  /* */
}

.backimgbw {
    transform: rotateX(360deg) translateZ(100px);  /* */
}


}

@media (max-width: 480px) {

    #outerholder {
        width: 240px;
        height: 160px;
    }

.imgfront {
    transform: rotateX(0deg) translateZ(80px);   /**/
}

.imgtop {
    transform: rotateX(90deg) translateZ(80px); /* */
}

.imgback {
    transform: rotateX(180deg) translateZ(80px);  /* */
}

.imgbot {
    transform: rotateX(270deg) translateZ(80px);  /* */
}

.frontimgfw {
    transform: rotateX(-90deg) translateZ(80px);  /* */
}

.backimgfw {
    transform: rotateX(0deg) translateZ(80px);  /* */
}

.frontimgbw {
    transform: rotateX(90deg) translateZ(80px);  /* */
}

.backimgbw {
    transform: rotateX(360deg) translateZ(80px);  /* */
}

}

@media (max-width: 380px) {

    #outerholder, #imgholder {
        width: 300px;
        max-width: 300px;
    }

.imgfront {
    transform: rotateX(0deg) translateZ(100px);   /**/
}

.imgtop {
    transform: rotateX(90deg) translateZ(100px); /* */
}

.imgback {
    transform: rotateX(180deg) translateZ(100px);  /* */
}

.imgbot {
    transform: rotateX(270deg) translateZ(100px);  /* */
}

.frontimgfw {
    transform: rotateX(-90deg) translateZ(103px);  /* */
}

.backimgfw {
    transform: rotateX(0deg) translateZ(103px);  /* */
}

.frontimgbw {
    transform: rotateX(90deg) translateZ(103px);  /* */
}

.backimgbw {
    transform: rotateX(360deg) translateZ(103px);  /* */
}


}