.hover-box-container{display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:90%;margin:1rem auto}.hoverbox{width:100%;position:relative;overflow:hidden;margin:.5rem}.hoverbox:first-of-type{margin-top:0}.hoverbox:last-of-type{margin-bottom:0}.hoverbox-background{position:relative}.hoverbox-background .overlay,.hoverbox-transform{position:absolute;top:0;left:0}.hoverbox-background .overlay{animation:overlay-lighten 1s forwards ease-in-out;z-index:2;width:100%;height:100%}.hoverbox-background img{width:100%;height:auto;display:block;z-index:1}.hoverbox-transform{z-index:3;margin:1rem;width:100%;height:calc(100% - 2rem);width:calc(100% - 2rem);border:.25rem solid;animation:border-fade-out 1s forwards ease-in-out}.initial,.revealed{position:absolute;width:100%;height:100%}.initial{display:flex;justify-content:center;align-items:flex-end;animation:in-from-top 1s forwards ease-in-out}.revealed{display:flex;flex-direction:column;justify-content:space-between;padding:1rem;animation:out-to-left 1s forwards ease-in-out}.content-title{margin-bottom:1rem;color:#fff;font-weight:700;font-size:2rem}.content-body{color:#fff;margin-bottom:0;font-size:1.25rem}.revealed .content-title{text-transform:uppercase}.revealed .content-title{margin-top:0}@keyframes in-from-top{0%{transform:translateY(-150%)}100%{transform:translateY(0)}}@keyframes out-to-bottom{0%{transform:translateY(0)}100%{transform:translateY(150%)}}@keyframes in-from-right{0%{transform:translateX(150%)}100%{transform:translateX(0)}}@keyframes out-to-left{0%{transform:translateX(0)}100%{transform:translateX(-150%)}}@keyframes border-fade-in{0%{border-color:transparent}100%{border-color:#fff}}@keyframes border-fade-out{0%{border-color:#fff}100%{border-color:transparent}}@keyframes overlay-darken{0%{background:rgba(0,0,0,.6)}100%{background:rgba(0,0,0,.8)}}@keyframes overlay-lighten{0%{background:rgba(0,0,0,.8)}100%{background:rgba(0,0,0,.6)}}@media (min-width:768px){.hover-box-container{width:90%;flex-direction:row}.hoverbox{width:calc(100% / 3);margin:0 .5rem 0 .5rem}.hoverbox:first-of-type{margin:0 .5rem 0 0}.hoverbox:last-of-type{margin:0 0 0 .5rem}}@media (min-width:992px){.hover-box-container{width:80%}}@media (max-width:767px){.hoverbox:hover>.hoverbox-background>.overlay{animation:overlay-darken 1s forwards ease-in-out}.hoverbox:hover>.hoverbox-transform>.initial{animation:out-to-bottom 1s forwards ease-in-out}.hoverbox:hover>.hoverbox-transform>.revealed{animation:in-from-right 1s forwards ease-in-out}.hoverbox:hover>.hoverbox-transform{animation:border-fade-in 1s forwards ease-in-out}}@media (min-width:1260px){.hoverbox:hover>.hoverbox-background>.overlay{animation:overlay-darken 1s forwards ease-in-out}.hoverbox:hover>.hoverbox-transform>.initial{animation:out-to-bottom 1s forwards ease-in-out}.hoverbox:hover>.hoverbox-transform>.revealed{animation:in-from-right 1s forwards ease-in-out}.hoverbox:hover>.hoverbox-transform{animation:border-fade-in 1s forwards ease-in-out}}