.home_services_panels {
width:100%;
height:28%;
min-height:200px;
overflow:hidden;
background:#fccd00;
display:flex;
justify-content:center;
align-items:stretch
}

.home_services_panel {
display:inline-block;
height:200px;
position:relative;
flex:1;
cursor:pointer;
text-decoration:none;
-webkit-tap-highlight-color:transparent;
transition:transform .8s cubic-bezier(0.4,0,0.3,1)
}

.home_services_panel__content {
height:100%;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:#fccd00 center center no-repeat;
background-size:cover;
transition:transform .8s cubic-bezier(0.4,0,0.3,1)
}

.home_services_panel__content:before,.home_services_panel__content:after {
content:'';
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
opacity:1;
transition:opacity .8s cubic-bezier(0.4,0,0.3,1)
}

.home_services_panel__content:before {
background:inherit;
filter:grayscale(100%)
}

.home_services_panel__content:after {
background:#fccd00;
opacity:.7
}

.home_services_panel__title {
color:#fff;
position:relative;
z-index:1;
transition:color .8s cubic-bezier(0.4,0,0.3,1);
width:100%;
text-align:center;
padding:1em
}

.home_services_panel {
overflow:hidden;
margin-right:-15%
}

.home_services_panel__content {
margin-left:-15vw
}

.home_services_panels {
pointer-events:none
}

.home_services_panel__title {
pointer-events:auto
}

.home_services_panels:hover .home_services_panel__content::after {
opacity:.7
}

.home_services_panels:hover .home_services_panel {
transform:translate3d(-7.5vw,0,0)
}

.home_services_panel:hover ~ .home_services_panel {
transform:translate3d(7.5vw,0,0)
}

.home_services_panels .home_services_panel:hover {
pointer-events:auto
}

.home_services_panels .home_services_panel:hover .home_services_panel__content {
transform:translate3d(7.5vw,0,0)
}

.home_services_panels .home_services_panel:hover .home_services_panel__content::before,.home_services_panels .home_services_panel:hover .home_services_panel__content::after {
opacity:0
}

.home_services_panels .home_services_panel:first-child:hover {
transform:translate3d(0,0,0)
}

.home_services_panels .home_services_panel:first-child:hover ~ .home_services_panel {
transform:translate3d(15vw,0,0)
}

.home_services_panels .home_services_panel:first-child:hover .home_services_panel__content {
transform:translate3d(7.5vw,0,0)
}

.home_services_panels .home_services_panel:last-child:hover .home_services_panel__content {
transform:translate3d(3.75vw,0,0)
}

.home_services_panel__title {
font-family:'Raleway',sans-serif;
text-transform:uppercase;
font-size:1.2vw
}

html,body {
height:100%
}