.outerBox{padding-top:180px}.box{background-color:transparent;border-radius:3px;color:#fff!important;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:300px;transform-style:preserve-3d;perspective:2000px;transition:.4s;text-align:center;&:before{background:transparent;border-top:20px solid var(--color-2);border-left:20px solid var(--color-2)}&:after,&:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box}&:after{border-bottom:20px solid var(--color-2);border-right:20px solid var(--color-2)}.fas{font-size:25px;height:50px;width:50px;line-height:50px!important;background-color:var(--color-2);color:#2c3a47}.fa2{position:absolute;bottom:0;right:0;z-index:1}.text{position:absolute;top:30px;left:-30px;width:calc(100% + 60px);height:calc(100% - 60px);background-color:#2c3a47;border-radius:3px;transition:.4s;.fa1{position:absolute;top:0;left:0}div{position:absolute;top:50%;left:0;transform:translateY(-50%);text-align:center;width:100%;padding:30px 60px;line-height:1.5;box-sizing:border-box;h3{font-size:30px!important;margin-bottom:5px!important}h3,p{color:#fff!important}p{font-size:15px!important}}}&:hover{.text{transform:rotateY(20deg) skewY(-3deg)}transform:translate(-50%,-50%) rotateY(-20deg) skewY(3deg)}}@media only screen and (max-width:575px){.box{width:320px}.outerBox{margin-bottom:-160px}}