/*--- BACK ------------------------------------------------------------------*/
.resim-anaback {
width:100%; height:auto; margin:auto; padding:auto; text-align:center;}

.resim-back {
width:94%; height:auto; min-height:100px; margin:1%; padding:1%; text-align: center;
background: #dedede url() repeat-x center top;}

.resim {
width:29.5%; height:auto; margin:1%; padding:auto; border:10px solid #fff;
display:inline-block; vertical-align:text-top; text-align:center;
background: #fff url() repeat-x center top;}

.resim-kenar {
border-radius:0px; }

/*Resim kenarlarında boşluk olmaması için bu sitil gerekli*/
img{vertical-align:middle}


/*ZoomIn Hover Effect------------------------*/
.hover-zoomin a {
display:block; 
position:relative; 
overflow:hidden;
outline: 0px solid #fff;
outline-offset: -10px;}

.hover-zoomin img {
width:100%; height:auto; 
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

.hover-zoomin:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);}

.hover-zoomin span {
position:absolute; z-index:1;
bottom:calc(75% - 75%); left:0;  right:0;
margin:0px; padding:12px 10px; line-height:16px; 
font-family: Arial; font-size:12px; color:#fff;	text-align:center;
text-decoration:none; font-weight:bold;
background: #000 url() no-repeat bottom center; 
opacity: 0.7;
-webkit-transition:  all 0.5s ease-in-out;
-moz-transition:  all 0.5s ease-in-out;
-o-transition:  all 0.5s ease-in-out;
-ms-transition:  all 0.5s ease-in-out;
transition:  all 0.5s ease-in-out; }

.hover-zoomin span:hover {
opacity: 0.4;}
@media screen and (max-width:767px) {
.hover-zoomin span {font-size:12px; padding:5px 5px; line-height:14px;}

}

/*ZoomIn2 Hover Effect------------------------*/
.hover-zoomin2 a {
display:block; 
position:relative; 
overflow:hidden;
outline: 1px solid #fff;
outline-offset: -15px;}

.hover-zoomin2 img {
width:100%; height:auto; 
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

.hover-zoomin2:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);}

.hover-zoomin2 span {
position:absolute; z-index:1;
bottom:calc(75% - 75%); left:0;  right:0;
margin:0px; padding:0px; line-height:45px;
font-family: Arial; font-size:15px; color:#fff;	text-align:center;
text-decoration:none; font-weight:bold;
background: #004F69 url() no-repeat bottom center; 
opacity: 0.7;
-webkit-transition:  all 0.5s ease-in-out;
-moz-transition:  all 0.5s ease-in-out;
-o-transition:  all 0.5s ease-in-out;
-ms-transition:  all 0.5s ease-in-out;
transition:  all 0.5s ease-in-out; }

.hover-zoomin2 span:hover {
opacity: 0.4;}
@media screen and (max-width:767px) {
.hover-zoomin2 span {font-size:12px; line-height:36px;  }

}

.hover-zoomin2 span2 {
position:absolute; z-index:1;
bottom:calc(75% - 75%); left:0;  right:0;
margin:0px; padding:0px; line-height:50px;
font-family: Arial; font-size:14px; color:#fff;	text-align:center;
text-decoration:none; font-weight:bold;
background: #6EA500 url() no-repeat bottom center; 
opacity: 0.8;
-webkit-transition:  all 0.5s ease-in-out;
-moz-transition:  all 0.5s ease-in-out;
-o-transition:  all 0.5s ease-in-out;
-ms-transition:  all 0.5s ease-in-out;
transition:  all 0.5s ease-in-out; }

.hover-zoomin2 span2:hover {
opacity: 0.4;}

@media screen and (max-width:767px) {
.hover-zoomin span2 {font-size:12px; line-height:36px;  }
}

.hover-zoomin span-galeri {
position:absolute; z-index:1;
bottom:calc(75% - 75%); left:0;  right:0;
margin:0px; padding:0px; line-height:35px;
font-family: Arial; font-size:12px; color:#fff;	text-align:center;
text-decoration:none; font-weight:normal;
background: #35311F  url() no-repeat bottom center; 
opacity: 0.6;
-webkit-transition:  all 0.5s ease-in-out;
-moz-transition:  all 0.5s ease-in-out;
-o-transition:  all 0.5s ease-in-out;
-ms-transition:  all 0.5s ease-in-out;
transition:  all 0.5s ease-in-out; }

.hover-zoomin span-galeri:hover {
opacity: 0.9; }

@media screen and (max-width:767px) {
.hover-zoomin span-galeri {font-size:11px; line-height:30px;  }
}

/* Zoomout Hover  Effect-----------------------*/
.hover-zoomout a {
display: block;
position: relative;
overflow: hidden;border-radius:4px 0px 0px 4px  ;}

.hover-zoomout img {
width: 100%; height: auto; 

-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: scale(1.2);
transform: scale(1.2);    }

.hover-zoomout:hover img {
-webkit-transform: scale(1);
transform: scale(1);}

.hover-zoomout span {
position:absolute; z-index:1; 
bottom:calc(75% - 75%); left:0;  right:0;
margin:0px; padding:4%; 
font-family: Arial; font-size:15px; color:#fff;	text-align:center;
text-decoration:none; font-weight:bold;
background: #000 url() no-repeat bottom center; opacity: 0.6; }

.hover-zoomout span:hover {
-webkit-transition:  all 0.3s ease-in-out;
-moz-transition:  all 0.3s ease-in-out;
-o-transition:  all 0.3s ease-in-out;
-ms-transition:  all 0.3s ease-in-out;
transition:  all 0.3s ease-in-out;	
opacity: 0.3;}

/*Fade Hover Effect-------------------------*/
.hover-fade a {
display:block;
position:relative;
overflow:hidden;
background-color:#000;}

.hover-fade img {
width:100%; height:auto;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

.hover-fade:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.5)";
filter: alpha(opacity=0.5);
opacity: 0.5;}

.hover-fade span {
position:absolute; z-index:1;
top:calc(46% - 0%); left:0;  right:0;
margin:0px; padding:15% 0% 15% 0%; 
font-family: Arial; font-size:15px; color:#fff;	text-align:center;
text-decoration:none; font-weight:bold;
background: url(images/zom.png) no-repeat bottom center; opacity: 0.0; }

.hover-fade span:hover {
-webkit-transition:  all 0.3s ease-in-out;
-moz-transition:  all 0.3s ease-in-out;
-o-transition:  all 0.3s ease-in-out;
-ms-transition:  all 0.3s ease-in-out;
transition:  all 0.3s ease-in-out;	
opacity: 0.5;}


/* Blur Hover Effect ----------------------*/
.text-white {
font-family:Arial; font-size:15px; color:#fff;	text-align:center;
text-align:center; text-decoration:none; font-weight:bold;}

.hover-blur a {
display:block;
position:relative;
overflow:hidden;}

.hover-blur img {
width: 100%; height: auto;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

.hover-blur:hover img {
-webkit-transform: scale(1.2);
transform:scale(1.2);
-webkit-filter:grayscale(0.6) blur(1px);
filter: grayscale(0.6) blur(1px); }

.hover-blur span {
position:absolute; z-index:1;
bottom:calc(0% - 0%); left:0;  right:0;
margin:0px; padding:4% 0% 4% 0%; 
font-family: Arial; font-size:15px; color:#fff;	text-align:center;
text-decoration:none; font-weight:bold;
background: #000 url() no-repeat bottom center; opacity: 0.5; }

.hover-blur span:hover {
-webkit-transition:  all 0.3s ease-in-out;
-moz-transition:  all 0.3s ease-in-out;
-o-transition:  all 0.3s ease-in-out;
-ms-transition:  all 0.3s ease-in-out;
transition:  all 0.3s ease-in-out;	
opacity: 0.2;}

/*Blurout Hover  Effect--------------------------*/
.hover-blurout a {
display: block;
position: relative;
overflow: hidden;    }

.hover-blurout img {
width: 100%;
height: auto;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: scale(1.2);
transform: scale(1.2);    }

.hover-blurout:hover img {
-webkit-transform: scale(1);
transform: scale(1);

/*Blur Filtr*/
-webkit-filter: grayscale(0.6) blur(2px);
filter: grayscale(0.6) blur(2px);    }

.hover-blurout span {
position:absolute; z-index:1;
bottom:calc(0% - 0%); left:0;  right:0;
margin:0px; padding:4% 0% 4% 0%; 
font-family: Arial; font-size:15px; color:#fff;	text-align:center;
text-decoration:none; font-weight:bold;
background: #000 url() no-repeat bottom center; opacity: 0.5; }

.hover-blurout span:hover {
-webkit-transition:  all 0.3s ease-in-out;
-moz-transition:  all 0.3s ease-in-out;
-o-transition:  all 0.3s ease-in-out;
-ms-transition:  all 0.3s ease-in-out;
transition:  all 0.3s ease-in-out;	
opacity: 0.2;}

/* Mask Hover ZoomIn Effect---------------------------*/
.hover-mask {
position: relative;
overflow: hidden;    }

.hover-mask img {
width: 100%; height: auto;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;    }

.hover-mask:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);    }

.hover-mask span {
position:absolute; z-index:1;
bottom:calc(0% - 0%); left:0;  right:0;
margin:0%; padding:20% 0% 20% 0%; 
font-family: Arial; font-size:15px; color:#fff;	text-align:center;
text-decoration:none; font-weight:bold;
background: url() no-repeat bottom center; 
opacity: 0; }

.hover-mask span:hover {
-webkit-transition:  all 0.3s ease-in-out;
-moz-transition:  all 0.3s ease-in-out;
-o-transition:  all 0.3s ease-in-out;
-ms-transition:  all 0.3s ease-in-out;
transition:  all 0.3s ease-in-out;	
background: url() no-repeat bottom center;
opacity: 100;}