.box_scroll{

}

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

.box_scrollGall{
max-width: 100%;
}



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

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

.modGallery .galleryImageScroll ul li{
float: left;
position: relative;
z-index: 0;
}

.modGallery .galleryImageScroll ul li .img_wrapper{
overflow: hidden;
}


.modGallery .galleryImageScroll ul li.sel{

}	

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

.modGallery .galleryImageScroll ul li a:before, .modGallery .galleryImageScroll 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);
}
.modGallery .galleryImageScroll 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;
}



.modGallery .galleryImageScroll ul li a span.titleIm{
display: block;
padding: 25px 5px;
text-align: center;
color: #252422;
font-size: 16px;
box-sizing: border-box;
transition: all 0.5s ease-out 0s;
background-color: #FFFFFF;
border-top: 2px solid rgba(0,0,0,0.5);
margin-top: -2px;
position: relative;
z-index: 1;
}	






.modGallery .galleryImageScroll ul li a:hover span.titleIm{
color: #FFFFFF;
transition: all 0.5s ease-out 0s;
background-color: #197f3e;
}

.modGallery .galleryImageScroll ul li img{
vertical-align: top;
transition: all 0.5s ease-out 0s;
position: relative;
z-index: 0;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */    
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   filter: grayscale(100%);
   filter: gray; /* IE 6-9 */
}

.modGallery .galleryImageScroll ul li a:hover img {
  -webkit-filter: none;
   -moz-filter: none;
   -ms-filter: none;
   filter: none;
}



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

.modGallery .galleryImageScroll 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: 35px 0px 0px 0px;
}
.modGallery .navTlo{
position: absolute;
width: 87px;
height: 32px;
right: 0px;
top:0px;
background-color: #FFFFFF;
z-index: 1;
}

.modGallery .titleModGallery{
text-align: left;
font-size: 18px;
color: #FFFFFF;
margin: 0px 125px 15px 0px;
position: relative;
overflow: hidden;
padding-left: 40px;
}

.modGallery .titleModGallery::after {
    content: url("../images/sep_title2.png");
    margin-left: 20px;
    position: absolute;
    top: 0px;
}

.modGallery .arrowAll span.spArrow {
 display: inline-block;
    line-height: normal;
    margin: 0;
    padding: 0;
    position: absolute;   
    top:-41px;
    right: 42px;
}
/*
.arrowAll span.spArrow:before {
    content: url("../images/bg_navig_scroll.png");
    left: -1220px;
    position: absolute;
    top: 8px;
}
*/
.modGallery .gallImg .arrowLeft,.modGallery .gallImg .arrowRight{
display: block;
width: 31px;
height: 30px;
float: left;
margin-right: 1px;
cursor: pointer;
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: #197f3e;
position: static;
}
.modGallery .gallImg .arrowLeft{
margin-right: 9px;
background-image:url('../images/arrow_np.png');
}

.modGallery .gallImg .arrowRight{
background-image:url('../images/arrow_nn.png');
}

.modGallery .gallImg .sl{
background-color: #000000;
}
.modGallery .gallImg .sr{
background-color: #000000;

}


.modGallery .galleryImageScroll ul li a:hover{

}


.modGallery .galleryImageScroll ul li a span.showImg{
display: none;
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;
}


.modGallery .galleryImageScroll 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);
  }
}