.demo{padding: 2em 0px;padding-top: 125px;}
.box{font-family: 'Merriweather Sans', sans-serif;overflow:hidden;position:relative;z-index:1;transition:all .5s;}
.box:hover{box-shadow:3px 3px 5px #999; }
.box:before,
.box:after{content:"";background:radial-gradient(circle at 23% 70%,rgba(255,255,255,0.2),#fff 30%);width:150%;height:150%;opacity:0;transform:rotate(45deg);position:absolute;top:-10.5%;right:-150%;z-index:1;transition: all 0.35s ease;}
.box:after{background:rgba(255,255,255,0.5);width:65%;height:65%;right:auto;left:-20%;top:-65%;}
.box:hover:before{opacity:1;right:-85%;}
.box:hover:after{opacity:1;top:-42%;}
.box img{width:100%;height:auto;transition:all 0.5s ease; height:175px;}
.box:hover img{transform:scale(1.2);}
.box .box-content{text-align:right;transform:translateY(-50%);position:absolute;top:50%;right:-100%;z-index:2;transition:all .5s;}
.box:hover .box-content{right:5%;}
.box .title{color:#1e272e;font-size:23px;font-weight:700;text-transform:uppercase;margin:0 0 3px 0; text-overflow:ellipsis;width: 161px;}
.box .post{font-size:16px;text-transform:capitalize;margin:0 0 10px;display:block;}
.box .icon{padding:0;margin:0;list-style:none;}
.box .icon li{display:inline-block;margin:0 4px;}
.box .icon li a{color:#fff;background-color:#1e272e;font-size:18px;text-align:center;line-height:35px;height:35px;width:35px;border-radius:50%;display:block;transition:all 0.3s;}
.box .icon li a:hover{color:#1e272e;background-color:#fff;border-radius:10%;box-shadow:0 0 5px #1e272e inset;}
@media only screen and (max-width:990px){.box {margin:0 0 30px;}}
@media only screen and (max-width:479px){.box .title{font-size:20px;}}

.fa, .far, .fas{ font-family:Font Awesome\ 5 Free;padding-top:7px !important;display:block !important;}