body{font-family:SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;padding:20px 20px 60px;max-width:680px;margin:0 auto;background-color:#292a2d;color:#a9a9b3}.menu{position:relative}.menu:hover :not(.overlay){opacity:0;transition:.5s ease}.menu:hover .overlay{bottom:0;height:100%}.overlay{position:absolute;bottom:0;left:-.1em;height:0;overflow:hidden;white-space:nowrap;color:#fff;font-size:1em;transition:.3s ease;padding-left:.1em;padding-right:.1em}.image,.overlay{background-color:#747780}.image{width:6em;border-radius:50%;border:.2em solid #747780}.container{display:block;width:6em;position:relative}.middle{transition:.5s ease;opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.container:hover .image{opacity:.3}.container:hover .middle{opacity:1}.text{white-space:nowrap;color:#fff;font-size:1.2em;position:absolute;overflow:hidden;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.flex-container{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:center;align-content:normal}.flex-item{display:block;flex-grow:0;flex-shrink:0;flex-basis:auto;align-self:auto;order:0;margin:0 1em 1em}@media (orientation:landscape){.flex-container{flex-direction:row}}