.box_scroll{
background:url('../images/bg_scroll.jpg') 0px 0px repeat;
border-top: 1px solid #ececec;
}

.div_scroll{
max-width: 100%;
box-sizing: border-box;
position: relative;
}

.box_scrollGall{
max-width: 100%;
}


.box_mod_gallery{
background-color: #fbfbfb;
border-top: 1px solid #d8d8d8;
padding: 30px 0px 0px 0px; 
}


.modGallery .titleScroll{
color: #6a6d6e;
font-size: 24px;
text-align: center;
margin: 30px 0px 0px 0px;
}

.gallImg{
padding: 0px 0px 0px 0px;
position: relative;
max-width: 100%;
}
.galleryImage{
overflow: hidden;
margin: 0px auto;
position: relative;
max-width: 100%;
padding: 10px 0px 0px 0px;
}

.galleryImage ul{
list-style: none;
position: absolute;
}

.galleryImage ul li{
float: left;
position: relative;
z-index: 0;
background-color: rgba(255,255,255,0.5);
border-radius:3px;
}
.galleryImage ul li.sel{

}	

.galleryImage ul li a{
display: block;
padding: 0px 0px 0px 0px;
transition: all 0.5s ease-out 0s;
position: relative;
background-color: #FFFFFF;
}

.galleryImage ul li a:before, .galleryImage ul li a:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 84%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0,0.25);
  -moz-box-shadow: 0 15px 10px rgba(0,0,0,0.25);
  box-shadow: 0 15px 10px rgba(0,0,0,0.25);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.galleryImage ul li a:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}



.galleryImage ul li a span.titleIm{
display: block;
padding: 10px 5px;
text-align: center;
color: #FFFFFF;
font-size: 14px;
box-sizing: border-box;

border-top: none;
position: absolute;
bottom: 23px;
left: 0px;
width: 100%;
background-color: rgba(0,0,0,0.4);


opacity:0;
-webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;	
}	






.galleryImage ul li a:hover span.titleIm{
-webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;	
  opacity:1;
}

.galleryImage ul li img{
vertical-align: top;
transition: all 0.5s ease-out 0s;
}

.galleryImage ul li span.sel{
background-color: rgba(0,0,0,0.7);
display: block;
width: 100%;
height: 100%;
position: absolute;
top:0px;
left: 0px;
}

.galleryImage ul li a:hover{
box-shadow:0px 0px 7px 0px rgba(0,0,0,0.25);
transition: all 1s ease-out 0s;
}

.modGallery{
position: relative;
padding-top: 18px;
}
.navTlo{
position: absolute;
width: 87px;
height: 32px;
right: 0px;
top:0px;
background-color: #FFFFFF;
z-index: 1;
}

.titleModGallery{
text-align: left;
font-size: 24px;
color: #FFFFFF;
margin: 0px 0px 15px 0px;
position: relative;
overflow: hidden;
width: 89%;
}

.titleModGallery::after {
    content: url("../images/bg_navig_scroll.png");
    margin-left: 20px;
    position: absolute;
    top: -6px;
}
/*
.arrowAll{
 overflow: hidden;
    position: relative;
    text-align: center;
}

.arrowAll:after {
    content: url("../images/bg_navig_scroll.png");
    margin-left: 20px;
    position: absolute;
    top: 8px;
}
*/
.arrowAll span.spArrow {
 display: inline-block;
    line-height: normal;
    margin: 0;
    padding: 0;
    position: absolute;   
    top:-50px;
    right: 0px;
}
/*
.arrowAll span.spArrow:before {
    content: url("../images/bg_navig_scroll.png");
    left: -1220px;
    position: absolute;
    top: 8px;
}
*/
.gallImg .arrowLeft,.gallImg .arrowRight{
display: block;
width: 65px;
height: 45px;
float: left;
cursor: pointer;
background-position: 0px 0px;
background-repeat: no-repeat;
background-image:url('../images/nav_lanser.png');
}
.gallImg .arrowLeft{
margin-right: -22px;
background-position: 0px -45px;
}

.gallImg .arrowRight{
background-position: -65px -45px;
}

.gallImg .sl{
background-position: 0px 0px;
}
.gallImg .sr{
background-position: -65px 0px;

}


.galleryImage ul li a:hover{

}


.galleryImage ul li a span.showImg{
display: block;
position: absolute;
opacity:0;
background:transparent url('../images/bg_img_cat.png') 50% 50% no-repeat;
-webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;	
  top:0px;
  left: 0px;
}


.galleryImage ul li a:hover span.showImg{
-webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: zoomInA;
  animation-name: zoomInA;	

}

@-webkit-keyframes zoomInA {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
  100%{
   opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes zoomInA {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    -ms-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
  100%{
   opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}