.flip {
    /*-webkit-perspective: 800;
    perspective: 800;
    position: relative;
    text-align: center;*/
    /*margin-bottom: 0;
    margin-left: 6%;
    margin-top: 0;
    position: relative;
    text-align: center;
    width: 92%;
    -webkit-perspective: 800px;
      -moz-perspective:800px;
    perspective: 800px;*/
    margin-bottom: 0;
    margin-left: 2%;
    margin-top: 0;
    position: relative;
    text-align: center;
    width: 95.8%;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
}

    .flip .card.flipped {
        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
        margin: 0 auto;
        /*margin-left: -4.9%;*/
    }

    .flip .card.flipped1 {
        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        transform: rotateY(0);
        margin: 0 auto;
    }

    .flip .card {
        height: 100%;
        -webkit-transform-style: preserve-3d;
        -webkit-transition: 0.5s;
        -moz-transform-style: preserve-3d;
        -moz-transition: 0.5s;
        transform-style: preserve-3d;
        transition: 0.5s;
        /*margin-left: -4.9%;*/
    }

        .flip .card .face {
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            z-index: 2;
            /*margin-left:15px;*/
        }

        /*Anush - start*/
        .flip .card.flipped .face {
            -moz-backface-visibility: visible;
            -webkit-backface-visibility: visible;
            backface-visibility: visible;
        }

        .flip .card .front {
            display: block;
        }

        .flip .card.flipped .front {
            display: none;
        }

        .flip .card .back {
            background-color: #FFFFFF;
        }
        /*Anush - end*/

        .flip .card .front {
            position: absolute;
            width: 100%;
            z-index: 1;
        }

        .flip .card .back {
            -webkit-transform: rotateY(-180deg);
            -moz-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
            /*margin-left: 15px;*/
        }

.inner {
    /*height: 100%;*/
    /*height: 1000px !important;*/
    margin: 0px !important;
    width: 100% !important;
}

.packageStock {
}

.packageFamily {
    position: absolute;
    bottom: 4px;
    right: 8px;
}

.flipControl {
    /*position: absolute;*/
    top: 4px;
    right: 4px;
    /*font-size: 1.2em;*/
}

/*anush - start*/
/*.front .flipControl {
    transform: rotateY(180deg);
}
.back .flipControl {
    transform: rotateY(180deg);
}*/
/*anush - end*/

flip div starts hear added by veeru */ .flipperDiv {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
    position: relative;
    text-align: center;
    /*margin-left: 2%;
    width: 100%;*/
}



.flipperDiv .nextprevflip {
}

    .flipperDiv .nextprevflip.previous_flip {
        -webkit-transform: rotate3d(1, 1, 1, -40deg);
        transform: rotate3d(1, 1, 1, -40deg);
        opacity: 0;
        -webkit-transform-origin: center bottom;
        transform-origin: left bottom;
        margin: 0 auto;
    }

    .flipperDiv .nextprevflip.next_flip {
        -webkit-perspective: 800px;
        perspective: 800px;
        position: relative;
        text-align: center;
        margin-left: 2%;
        width: 100%;
        -webkit-transform: rotate3d(1, -1, 1, 60deg);
        transform: rotate3d(1, -1, 1, 60deg);
        opacity: 1;
        -webkit-transform-origin: center bottom;
        transform-origin: right bottom;
        margin: 0 auto;
    }

.flipperDiv .flipped_flip.nextprevflip {
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    transform-style: preserve-3d;
    transition: 0.5s;
}

.front {
    transform: rotateY(0);
}

@media only screen and (min-device-width: 320px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    .flip .card .front {
        position: relative !important;
        width: 100%;
        z-index: 1;
        margin-left: 1%;
    }

    .flipControl {
        position: relative !important;
        top: 4px;
        right: 4px;
    }
}