#cardOfTwin #cardOfSale{
    top: 10px;
    width: 46px;
    margin-top: 10px;
    margin-left: 10px;
    height: 28px;
    /*background: #FF0000 0% 0% no-repeat padding-box;*/
    border-radius: 3px;
    opacity: 1;
    transition: 0.5s;
}

#cardOfTwin #cardOfSaleContainer{
    top: 10px;
    width: 46px;
    margin-top: 10px;
    margin-left: 10px;
    /*height: 28px;*/
    background: #FF0000 0% 0% no-repeat padding-box;
    border-radius: 3px;
    opacity: 1;
    transition: 0.5s;
}


#cardOfTwin #cardOfPercent{
    top: 10px;
    width: 46px;
    margin-top: 10px;
    margin-left: 10px;
    /*height: 22px;*/
    background: #FF0000 0% 0% no-repeat padding-box;
    border-radius: 3px;
    opacity: 1;
    transition: 0.5s;
}
#cardOfTwin .newProductsSaleSpan{
    width: 28px;
    height: 14px;
    text-align: center;
    font: normal normal normal 12px/14px Roboto;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    opacity: 1;
    padding: 8px;
}
#cardOfTwin .newProductsPercentSpan{
    width: 28px;
    height: 14px;
    text-align: center;
    font: normal normal normal 12px/14px Roboto;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    opacity: 1;
    padding: 8px;
}

.cardOfTwin{
    /*border: none;*/
    border: 1px solid #F8F7F6;
    width: 315px;
    height: 561px;
    margin-bottom: 65px;
}
.card-header-twin{
    text-align: center;
    background-color: transparent;
    border: none;
    margin-bottom: -39px;
    transition: transform 300ms;

}
/*#cardOfTwin .image-shadow{*/
/*    width: auto;*/
/*    height: 30px;*/
/*    transition: transform 300ms;*/
/*}*/
/*#cardOfTwin .shadow-div{*/
/*    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;*/
/*    height: 44px;*/
/*    margin-left: 80px;*/
/*    margin-right: 80px;*/
/*}*/
#cardOfTwin .card-img-top{
    width: 50%;
    height: 50%;
    transition: transform 300ms;
}

#cardOfTwin:hover +#image-shadow{

    transform: translateY(10px);

}
#cardOfTwin:hover #cardOfSale{
    opacity: 0;
}
#cardOfTwin:hover #cardOfPercent{
    opacity: 0;
}
.cardOfTwin:hover .card-img-top{

    transform: translateY(-15px);

}


#cardOfTwin .card-body{
    text-align: center;
    opacity: 1;
    transition: 0.5s;
    margin-bottom: 35px;
}
#cardOfTwin .priceNewProduct{
    /*font-size: 1.225em;*/
    /*!*letter-spacing: .05em;*!*/
    /*!*margin: 25px 0 0;*!*/
    /*text-align: center;*/
    /*margin-top: -12px;*/
    /*font-weight: bold;*/

}
#cardOfTwin .priceNewProduct span{
    color: #B1B1B1;
    text-align: center;
    text-decoration: line-through;
    font: normal normal normal 16px/24px Roboto;
    /*letter-spacing: 0.16px;*/
    text-transform: uppercase;
}
#cardOfTwin .categoryNewProduct {
    font-weight: bold;
    color: red;
}
.op{
    text-align: left;
    font: normal normal 500 18px/22px Roboto;
    letter-spacing: 0px;
    color: #000000;
    text-transform: uppercase;
    opacity: 1;
}

.opArabic{
    font: normal normal 500 18px/22px Neo Sans Arabic !important;
}
#cardOfTwin .book-btn{
    width: 185px;
    height: 44px;
    background: #FF0000 0% 0% no-repeat padding-box;
    border-radius: 22px;
    opacity: 0;
    text-align: center;
    font: normal normal normal 15px/18px Roboto;
    letter-spacing: 0px;
    color: #FFFFFF;
    border: none;
    margin: 20px;
    transition: 0.8s;
    position: relative;
    z-index: 2 !important;
}
#cardOfTwin:hover .card-body{
    /*opacity: 0;*/
    /*display: none;*/
    /*animation: fadeIn 1s;*/
}
#cardOfTwin:hover .book-btn{
    transform: translateY(-60px);
    opacity: 1;
}

#cardOfTwin:hover .op{
    opacity: 0;
}


@media screen and (max-width: 500px) {


    .cardOfTwin{
        border: 1px solid #F8F7F6;
    }

}

#cardOfTwin .card-img-top {
    height: 100% !important;
    width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.twin_footer{
    background-color:  #e2e2e2;
    align-items: center;
    text-align: center;
    height: 70px;
}



@media only screen and (max-width: 1000px) {
    .cardOfTwin {
        height: 539px;
    }

    .cardOfTwin {
        border: none !important;
    }
}