section.media{margin:80px 0;perspective:1000px}section.media .row{display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:wrap}section.media .col{flex:0 0 auto;padding:0;margin:15px;transition:all .5s cubic-bezier(.6,.2,.1,1);will-change:transform;position:relative;flex-grow:1;flex-basis:0}@media screen and (max-width:570px){section.media .col{flex-basis:100%;margin:10px 0}}section.media .col:first-child{margin-left:0}section.media .col:last-child{margin-right:0}section.media .col:after{content:"";position:absolute;top:0;left:5%;width:90%;height:100%;opacity:0;pointer-events:none;z-index:-10;box-shadow:0 0 0 rgba(255,0,0,0)}section.media .col:hover{transform:translateZ(30px)!important;z-index:100;cursor:pointer}section.media .col:hover:after{opacity:1;box-shadow:0 45px 75px rgba(0,0,0,.5);transition:opacity .5s cubic-bezier(.6,.2,.1,1),box-shadow .5s cubic-bezier(.6,.2,.1,1)}section.media .col:hover a.image:after{opacity:.75;transform:translateY(0)}section.media .col:hover a.image .icon,section.media .col:hover a.image h3,section.media .col:hover a.image span{opacity:1;transform:translateY(0)}section.media .col:hover a.image span:after{opacity:1}section.media .col a.image{border-radius:10px;overflow:hidden;display:inline-flex;position:relative;text-decoration:none}section.media .col a.image:after{content:"";width:100%;height:30%;top:0;left:0;background:linear-gradient(180deg,rgba(0,0,0,.75),transparent);z-index:1;transform:translateY(-20px)}section.media .col a.image span,section.media .col a.image:after{position:absolute;opacity:0;transition:all .5s cubic-bezier(.6,.2,.1,1)}section.media .col a.image span{top:19px;left:24px;transform:translateY(-10px);z-index:3;color:#fff;font-size:1.2rem;font-weight:700;letter-spacing:1px}section.media .col a.image span:after{content:"";width:25px;height:25px;top:-1px;left:-7px;border-radius:50%;background:#f1343a;position:absolute;z-index:-1;opacity:0;transition:all .5s cubic-bezier(.6,.2,.1,1)}section.media .col a.image h3{left:70px;max-width:140px;transition:all .5s cubic-bezier(.6,.2,.1,1) .2s;font-size:1.4rem;color:#fff}section.media .col a.image .icon,section.media .col a.image h3{position:absolute;top:18px;opacity:0;transform:translateY(-10px);z-index:3}section.media .col a.image .icon{right:20px;fill:#039cf2;transition:all .5s cubic-bezier(.6,.2,.1,1) .4s;width:24px;height:24px}section.media .col a.image img{border-radius:10px;display:block;max-width:100%;height:auto}section.media .moremedia{display:flex;justify-content:center;flex:1 1;padding:15px}section.media .moremedia:hover{cursor:default}section.media .moremedia:hover a:after{border-color:#00d5fb;box-shadow:0 0 5px rgba(0,213,251,.5),inset 0 0 5px rgba(0,213,251,.5),inset 0 0 30px rgba(0,213,251,.5);color:#fff;transform:scale(1)}section.media .moremedia:hover a:before{border-color:#00d5fb;box-shadow:0 0 5px rgba(0,213,251,.5),inset 0 0 5px rgba(0,213,251,.5);transform:scale(1) translateY(-8px);opacity:.15}section.media .moremedia a{text-align:center;padding:1.6rem 3.6rem;border-radius:45px;font-size:14px;text-transform:uppercase;letter-spacing:2px;position:relative;transition:all .5s cubic-bezier(.6,.2,.1,1);color:#fff;text-decoration:none}section.media .moremedia a:after,section.media .moremedia a:before{content:"";position:absolute;border:2px solid #039cf2;border-radius:45px;width:100%;height:100%;top:0;left:0;transition:all .5s cubic-bezier(.6,.2,.1,1);z-index:3}section.media .moremedia a:before{transform:translateY(0);opacity:0;z-index:2;filter:blur(.5px)}