body,html{font-family:'Inder', sans-serif;overflow-x:hidden;margin:0;padding:0}p{color:#338abd;font-size:23px;margin:60px 0}.card{position:relative;display:block;margin-bottom:30px}.card span{font-family:'Roboto', sans-serif;color:#fff;font-size:34px;position:absolute;left:0;width:100%;top:50%;text-align:center;-webkit-transform:translate(0, -50%);-ms-transform:translate(0, -50%);transform:translate(0, -50%);z-index:2}.card:after{content:'';position:absolute;z-index:1;background-color:rgba(51,138,189,0.6);top:0;left:0;width:100%;height:100%;opacity:0;-webkit-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.card:hover:after{opacity:1}@media (max-width: 768px){.card:after{opacity:1}}