@flipcard-item-transition: all .4s ease-in-out;
@flipcard-item-rotate-Y-minus180deg: rotateY(-180deg);
@flipcard-item-rotate-Y-plus180deg: rotateY(180deg);
@flipcard-item-rotate-Y-0deg: rotateY(0deg);

.flipcard-component {
    .flipcard-item {
        position: relative;
        float: left;
        width: 33%;
        //height: 310px; added comment by Chetan
        -webkit-perspective: 600px;
        -moz-perspective: 600px;
        -ms-perspective: 600px;
        -o-perspective: 600px;
        perspective: 600px;

        html.size-medium &,
        html.size-small & {
            width: 100%;
        }

        .flipcard-item-face {
            position: absolute;
            z-index: 110;
            top: 0;
            left: 0;
            float: none;
            overflow: hidden;
            width: 98%;
            height: 98%;
            margin: 1%;
            cursor: pointer;
            /*border: 1px solid @secondary-color;*/
            /*background: @primary-color;*/
           /* background: @secondary-color;*/
            -webkit-transition: @flipcard-item-transition;
            -moz-transition: @flipcard-item-transition;
            -ms-transition: @flipcard-item-transition;
            -o-transition: @flipcard-item-transition;
            transition: @flipcard-item-transition;

            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;

            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            backface-visibility: hidden;

            &.flipcard-item-front {
                -webkit-transform: @flipcard-item-rotate-Y-0deg;
                -moz-transform: @flipcard-item-rotate-Y-0deg;
                -ms-transform: @flipcard-item-rotate-Y-0deg;
                -o-transform: @flipcard-item-rotate-Y-0deg;
                transform: @flipcard-item-rotate-Y-0deg;
               /*background: @secondary-color; *//*url(assets/card_pattern.png)*/
   /*           box-shadow: 3px 2px 4px #b1aeae;*/

            .flipcard-item-frontImage {
                    width: 100%;
                    height: auto;
                }
            }

            &.flipcard-item-back {
                padding: @item-padding;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -ms-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;

                -webkit-transform: @flipcard-item-rotate-Y-minus180deg;
                -moz-transform: @flipcard-item-rotate-Y-minus180deg;
                -ms-transform: @flipcard-item-rotate-Y-minus180deg;
                -o-transform: @flipcard-item-rotate-Y-minus180deg;
                transform: @flipcard-item-rotate-Y-minus180deg;
              background-color: darken(@secondary-color, 20%);
              background-color: #f2f2f2;
             
              .flipcard-item-back-body{
                    padding: 0px 00px;
                    color: @foreground-color;
                    margin-top:20px;
                @media (max-width: 520px){
                  margin-top:20px;
                }
              }

            }
          .front-item{
            position: absolute;
            text-align: center;
            width: 100%;
            height: 100%;
          .front-body-title{
           position: absolute;
            top: 44%;
            @media (max-width: 519px){
              top: 25%;
            }
            left: 0px;
            right: 0px;
        
            color: @secondary-color;
            font-size: 3em;
            @media (max-width: 519px){
              margin-top: 0px;
            }
          }
          }
        }

        &.flipcard-flip {
            .flipcard-item-front {
                -webkit-transform: @flipcard-item-rotate-Y-plus180deg;
                -moz-transform: @flipcard-item-rotate-Y-plus180deg;
                -ms-transform: @flipcard-item-rotate-Y-plus180deg;
                -o-transform: @flipcard-item-rotate-Y-plus180deg;
                transform: @flipcard-item-rotate-Y-plus180deg;
            }

            .flipcard-item-back {
                overflow-x: hidden;
                overflow-y: auto;

                -webkit-transform: @flipcard-item-rotate-Y-0deg;
                -moz-transform: @flipcard-item-rotate-Y-0deg;
                -ms-transform: @flipcard-item-rotate-Y-0deg;
                -o-transform: @flipcard-item-rotate-Y-0deg;
                transform: @flipcard-item-rotate-Y-0deg;
            }
        }
    }
}
          .flipcard-item-back-title{
				   font-size:20px;
				   font-weight:bold;
              @media (max-width: 519px){
                margin-top:0%;
            }
				}