@media only screen and (min-width: 480px) and (max-width: 767px) {
    .caro{
        width: 100%;
        position: relative;

    }

    caro .box{
        position: relative;
        width: 100%;
        height: 300px;
        background: transparent;
        /*padding: 20px;*/
        /*border: 1px solid #262626;*/
    }
    .caro .image{
        position: absolute;
        width: 100%;
        height: 403px;
        z-index: 2;
        -webkit-transform-origin: left;
        -ms-transform-origin: left;
        transform-origin: left;
        -webkit-transition: 1s;
        -o-transition: 1s;
        transition: 1s;
        -webkit-transform: perspective(2000px) rotateY(0deg);
        transform: perspective(2000px) rotateY(0deg);
        /*opacity: 0 ;*/
    }
    .caro .content{
        position: absolute;
        width: 100%;
        height: 335px;
        background-image: url("../images/bookBg.jpg");
        z-index: 1 ;
        -webkit-transform-origin: left;
        -ms-transform-origin: left;
        transform-origin: left;
        -webkit-transition: 1s;
        -o-transition: 1s;
        transition: 1s;
        border: 1px solid gray;
        -webkit-transform: perspective(200px) rotateY(90deg);
        transform: perspective(200px) rotateY(90deg);
        padding:25px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: justify;
        -webkit-box-shadow: 14px 13px 24px 0px rgba(87,86,87,0.43);
        box-shadow: 14px 13px 24px 0px rgba(87,86,87,0.43);
    }

}

@media only screen and (min-width: 776px) and (max-width: 1199px) {
    .caro{
        width: 100%;
        position: relative;

    }

    caro .box{
        position: relative;
        width: 100%;
        height: 300px;
        background: transparent;
        /*padding: 20px;*/
        /*border: 1px solid #262626;*/
    }
    .caro .image{
        position: absolute;
        width: 100%;
        height: 403px;
        z-index: 2;
        -webkit-transform-origin: left;
        -ms-transform-origin: left;
        transform-origin: left;
        -webkit-transition: 1s;
        -o-transition: 1s;
        transition: 1s;
        -webkit-transform: perspective(2000px) rotateY(0deg);
        transform: perspective(2000px) rotateY(0deg);
        /*opacity: 0 ;*/
    }
    .caro .content{
        position: absolute;
        width: 100%;
        height: 306px;
        background-image: url("../images/bookBg.jpg");
        z-index: 1 ;
        -webkit-transform-origin: left;
        -ms-transform-origin: left;
        transform-origin: left;
        -webkit-transition: 1s;
        -o-transition: 1s;
        transition: 1s;
        border: 1px solid gray;
        -webkit-transform: perspective(200px) rotateY(90deg);
        transform: perspective(200px) rotateY(90deg);
        padding:25px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: justify;
        -webkit-box-shadow: 14px 13px 24px 0px rgba(87,86,87,0.43);
        box-shadow: 14px 13px 24px 0px rgba(87,86,87,0.43);
    }

}


@media only screen and (min-width: 1200px) and (max-width: 1366px) {
    .caro{
        width: 100%;
        position: relative;

    }

    caro .box{
        position: relative;
        width: 100%;
        height: 300px;
        background: transparent;
        /*padding: 20px;*/
        /*border: 1px solid #262626;*/
    }
    .caro .image{
        position: absolute;
        width: 100%;
        height: 403px;
        z-index: 2;
        -webkit-transform-origin: left;
        -ms-transform-origin: left;
        transform-origin: left;
        -webkit-transition: 1s;
        -o-transition: 1s;
        transition: 1s;
        -webkit-transform: perspective(2000px) rotateY(0deg);
        transform: perspective(2000px) rotateY(0deg);
        /*opacity: 0 ;*/
    }
    .caro .content{
        position: absolute;
        width: 100%;
        height: 358px;
        background-image: url("../images/bookBg.jpg");
        z-index: 1 ;
        -webkit-transform-origin: left;
        -ms-transform-origin: left;
        transform-origin: left;
        -webkit-transition: 1s;
        -o-transition: 1s;
        transition: 1s;
        border: 1px solid gray;
        -webkit-transform: perspective(200px) rotateY(90deg);
        transform: perspective(200px) rotateY(90deg);
        padding:25px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: justify;
        -webkit-box-shadow: 14px 13px 24px 0px rgba(87,86,87,0.43);
        box-shadow: 14px 13px 24px 0px rgba(87,86,87,0.43);
    }

}