/* your styles go here */
#ara:focus{
   /* border: 2px #000080 dashed ;*/
box-shadow: 10px 10px 5px -7px rgba(0,0,0,0.35);
transition: 0.5s
}
.arama {position:relative;
    display: box;
 display:-webkit-box;
 display:-moz-box;
 display:-ms-box;
 width: 350px;
 background: rgba(230, 247, 236, .8);
 z-index: 2
}
.arama span{ 
  margin: 5px important;
  width: 250px;
  color: #067f65;
}

/*bookes*/
 
.boxes {
/*    margin-bottom: 70px;*/
}

.boxes>div {
    position: relative;
}


.boxes figure figcaption{
    background-color: #4fbfa8;
    position: absolute;
    top: 0;
/*    font-size: 13px;
    line-height: 19px;
    color: #cbc6c6;*/
    text-align: left;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 0 11px;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -o-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
    -o-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

figcaption h3 a, figcaption p{
    color: #ffffff !important;
    text-align: center;
    padding-top: 10px !important;
    

}


.boxes figure div {
    overflow: hidden;
}

.boxes figure {
    -webkit-perspective: 1700px;
    -moz-perspective: 1700px;
    -ms-perspective: 1700px;
    -o-perspective: 1700px;
    perspective: 1700px;

    -webkit-perspective-origin: 0 50%;
    -moz-perspective-origin: 0 50%;
    -ms-perspective-origin: 0 50%;
    -o-perspective-origin: 0 50%;
    perspective-origin: 0 50%;
    background-color: #4fbfa8;
}



.boxes figure img {
    position: relative;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

.boxes figure:hover img {
    -webkit-transform: translateX(25%);
    -moz-transform: translateX(25%);
    -ms-transform: translateX(25%);
    transform: translateX(25%);
}

.boxes figure:hover figcaption {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s;
    -o-transition: -moz-transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s;
}