@charset "utf-8";
/* CSS Document */
@media screen and (max-width:480px) {
.before-after{
margin:0 auto 5rem;
}
.before-after .top-image{
margin:0 auto 3rem;
width:100%;
height:50vw;
}
.before-after .top-image img{
width:100%;
height:50vw;
object-fit:cover;
}
.before-after .text{
width:90%;
margin:0 auto 2rem;
}
.before-after .links{
width:100%;margin:0 auto;
text-align:center;
font-size:0;
}
.before-after .links div{
width:80%;height:30vw;
position:relative;
display:inline-block;
margin:1%;
}
.before-after .links div .mask,
.before-after .links div img
{
position:absolute;
display:block;width:100%;height:100%;
margin:0;
}
.before-after .links div img{
object-fit:cover;
}
.before-after .links div .mask{
z-index:2;
background:rgba(0,0,0,0);
}
.before-after .links div .mask p{
color:white;
font-size:1.2rem;
line-height:30vw;
margin:0;
text-shadow: 0 0 0.5rem #000,0 0 0.5rem #000,0 0 0.5rem #000,0 0 0.5rem #000;
}
.before-after a:hover,
.before-after a:hover img{
opacity:1;
}
.before-after .links div .mask:hover{
background:rgba(0,0,0,0);
}

}
@media screen and (min-width:481px) {
.before-after{
margin:0 auto 11rem;
}
.before-after .top-image{
margin:0 auto 7rem;
}
.before-after .text{
width:60rem;
white-space: nowrap;
margin:3rem auto 4rem;
}
.before-after .links{
width:94rem;margin:0 auto;
text-align:center;
font-size:0;
}
.before-after .links div{
width:25rem;height:20rem;
position:relative;
display:inline-block;
margin:3rem;
}
.before-after .links div .mask,
.before-after .links div img
{
position:absolute;
display:block;
margin:0;
}
.before-after .links div .mask{
z-index:2;
background:rgba(0,0,0,0.5);
}
.before-after .links div .mask p{
color:white;
font-size:1.8rem;
line-height:20rem;
margin:0;
}
.before-after a:hover,
.before-after a:hover img{
opacity:1;
}
.before-after .links div .mask:hover{
background:rgba(0,0,0,0);
text-shadow: 0 0 0.5rem #000,0 0 0.5rem #000,0 0 0.5rem #000,0 0 0.5rem #000;
}


}