.box_portfolio{
background-color: #FAFAFA;
max-width: 1920px;
margin: 0px auto;
}


.scrollP{
position: relative;
}
.scrollP>.scrollNavig{

}

.scrollP>.scrollNavig a {
width: 70px;
height: 70px;
position: absolute;
transition: all 0.5s ease-out 0s;
display: block;
top: 0px;
bottom: 0px;
margin: auto;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.scrollP>.scrollNavig a::before {
content: "";
position: absolute;
width: 80%;
height: 80%;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
border-radius: 50%;
box-sizing: border-box;
background-color: #CA464D;
z-index: -1;
transition: all 0.5s ease-out 0s;
}
.scrollP>.scrollNavig a::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
box-shadow: 0px 0px 0px 2px #FFFFFF;
border-radius: 50%;
box-sizing: border-box;
transition: all 0.5s ease-out 0s;
}

.scrollP>.scrollNavig a:hover::before {
width: 100%;
height: 100%;
background-color: #CA464D;
}
.scrollP>.scrollNavig a:hover::after {
box-shadow: 0px 0px 0px 2px #CA464D;
}

.scrollP>.scrollNavig a.prev {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAXCAYAAADQpsWBAAAABHNCSVQICAgIfAhkiAAAALxJREFUOE+V1FERwjAQhOF/HSABBwwKwAE4ABwhoSjAAjgoDpBQB8ekkzItaXpH37/JNbsXEfzM7AqcgK0ixsyaDF7A3kUFkLpFNAfSZFVUA1W0BGaRBwoUARM0Ak/gKKmrxSEzWwH3dP/ATdLZyy6hB7CLgn48M2uBDdBIuninDCiNl04Lwz7c/F9h+G3EP3BSoygsuheBs4X14FLLq7fq7VOCaWsP4xzdzc2RDOveSoq9ET8wjjJcS3p/AM3Rd29MpOBhAAAAAElFTkSuQmCC');
left: 0px;
}
.scrollP>.scrollNavig a.next {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAXCAYAAADQpsWBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFxJREFUeNpiYACC////KzCQAoAaDP5DwAJSNZ4nV+N8qMYNQCxAjsYLoxoHlUYmEuKfEUp/INaWBVBb9hN0HkgBEB8gOl1CNVwY1UBVDbCSCIjfA/EEYpMGQIABADbgJaAu4fxpAAAAAElFTkSuQmCC');
right: 0px;
}

.scroll{
width: 100%;
max-width: 100%;
box-sizing:border-box;
overflow: hidden;
}
.scroll>ul{
list-style: none;
transition: transform 0s ease-out 0s;
z-index: 0;
}
.scroll>ul.shift{
transition: transform 1s cubic-bezier(.76,.35,.14,1.01) 0s;
}

.scroll>ul.shiftTouch{
transition: all 0.5s ease-out;
}

.scroll>ul>li{
display: inline-block;
width:25%;
box-sizing:border-box;
}
.scroll>ul>li>a{
display: block;
box-sizing:border-box;
position: relative;
background-color: #ffffff;
overflow: hidden;
}

.scroll>ul>li>a img{
vertical-align: top;
max-width: 100%;
height: auto;
transition: all 0.5s ease-out 0s;
}

.scroll>ul>li>a:hover img{
transform: scale(1.1);
}

.scroll>ul>li>a>span.titleImg{
position: absolute;
text-align: center;
padding: 15px 35px;
background-color: #ffffff;
bottom: -30%;
box-sizing:border-box;
transition: all 0.5s ease-out 0s;
color: #363738;
font-weight: 700;
font-size: 16px;
opacity: 0;
white-space: normal;
left: 0px;
}

.scroll>ul>li>a:hover>span.titleImg{
bottom: 0%;
opacity: 1;
transition: all 0.5s ease-out 0s;
}


@media screen and (max-width:1150px){
.scroll > ul > li > a > span.titleImg {bottom: -50%;padding: 20px 10px;}
}
@media screen and (max-width:1200px){
.scroll > ul > li {width: 33.333%;}
}

@media screen and (max-width:1000px){
	
}

@media screen and (max-width:890px){	
.scrollP > .scrollNavig a.next, .scrollP > .scrollNavig a.prev {width: 64px;height: 64px;background-size: 26px auto;}
.scrollP > .scrollNavig a.next:after, .scrollP > .scrollNavig a.prev:after {background-size: 26px auto;}
.scrollP > .scrollNavig a.prev::after {left: 19px;}
.scrollP > .scrollNavig a.next::after {right: 19px;}
}
@media screen and (max-width:760px){
.scroll > ul > li {width: 50%;}
}	

@media screen and (max-width:600px){

}
@media screen and (max-width:540px){
.scroll > ul > li {width: 100%;}
}