.figure{
        border-bottom: 196px solid rgba(69, 69, 69, 0.85);
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    height: 0;
    width: 315px;
    margin-top: 0;
    z-index: 14;
    position: absolute;
     backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}


.figure p{
         min-width: 182px;
    padding: 5px;
    font-size: 26px;
    color: #f1c311;
    border-color: rgba(65,65,70,0.8);
    position: absolute;
    margin-top: 77px;
    margin-left: 19%;
    border: 2px solid #fff;
    text-align: center;
}


  .elemt{
     float: left;width:50%; margin-bottom:30px
    }

    @media screen and (max-width: 600px) {
       .elemt{
            float: left;width:100%; margin-bottom:30px
            }
    }

.elemtp{
    min-width:182px;
    padding:5px;  
    font-size:26px ;
    color:#f1c311; 
    background: rgba(65,65,70,0.8); 
    position:absolute;
    margin-top:90px;
    margin-left:7%
}

.elemt:hover .figure{
     -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}

.elemt:hover .elemtp{
    display: none;
}

.elemt:hover .pr-img{
     backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s;
     -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)

}