body{overflow:hidden;background:#eee8aa}.gallery-container{position:relative;height:100vh;width:100vw;overflow:hidden}.gallery{position:absolute;top:50%;width:100vw;height:200px;-webkit-perspective:800px;perspective:800px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.frame,.gallery{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.frame{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;border:2px solid #fff;border-radius:4px;position:relative;height:100%;width:200px;background:#fff;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:center center;transform-origin:center center;cursor:pointer;overflow:hidden;background:radial-gradient(#cfaf7f,#6a4a0f)}.frame .image{display:block;position:relative;height:auto;width:90%;pointer-events:none}.frame .info{color:#fff;text-shadow:0 0 2px rgba(0,0,0,.8);font-family:Source Sans Pro,serif;font-size:1.2em}#codepen-link{position:absolute;bottom:20px;right:30px;height:40px;width:40px;z-index:10;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg);background-position:50%;background-size:cover;opacity:.4;-webkit-transition:all .25s;transition:all .25s}#codepen-link:hover{opacity:.8;-webkit-box-shadow:0 0 6px #000;box-shadow:0 0 6px #000}*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100vh;background:#050801;font-family:Raleway,sans-serif;font-weight:700}a{position:relative;display:inline-block;padding:25px 30px;margin:40px 0;color:#03e9f4;text-decoration:none;text-transform:uppercase;-webkit-transition:.5s;transition:.5s;letter-spacing:4px;overflow:hidden;margin-right:50px}a:hover{background:#66b1ff;color:#050801;-webkit-box-shadow:0 0 5px #409eff,0 0 0 #409eff,0 0 0 #409eff,0 0 0 #409eff;-webkit-box-reflect:below 1px linear-gradient(transparent,rgba(0,0,0,.3333333333333333))}a:first-child{-webkit-filter:hue-rotate(270deg);filter:hue-rotate(270deg)}a:nth-child(2){-webkit-filter:hue-rotate(110deg);filter:hue-rotate(110deg)}a span{position:absolute;display:block}a span:first-child{top:0;left:0;width:100%;height:2px;background:-webkit-gradient(linear,left top,right top,from(transparent),to(#03e9f4));background:linear-gradient(90deg,transparent,#03e9f4);-webkit-animation:animate1 1s linear infinite;animation:animate1 1s linear infinite}@-webkit-keyframes animate1{0%{left:-100%}50%,to{left:100%}}@keyframes animate1{0%{left:-100%}50%,to{left:100%}}a span:nth-child(2){top:-100%;right:0;width:2px;height:100%;background:-webkit-gradient(linear,left top,left bottom,from(transparent),to(#03e9f4));background:linear-gradient(180deg,transparent,#03e9f4);-webkit-animation:animate2 1s linear infinite;animation:animate2 1s linear infinite;-webkit-animation-delay:.25s;animation-delay:.25s}@-webkit-keyframes animate2{0%{top:-100%}50%,to{top:100%}}@keyframes animate2{0%{top:-100%}50%,to{top:100%}}a span:nth-child(3){bottom:0;right:0;width:100%;height:2px;background:-webkit-gradient(linear,right top,left top,from(transparent),to(#03e9f4));background:linear-gradient(270deg,transparent,#03e9f4);-webkit-animation:animate3 1s linear infinite;animation:animate3 1s linear infinite;-webkit-animation-delay:.5s;animation-delay:.5s}@-webkit-keyframes animate3{0%{right:-100%}50%,to{right:100%}}@keyframes animate3{0%{right:-100%}50%,to{right:100%}}a span:nth-child(4){bottom:-100%;left:0;width:2px;height:100%;background:-webkit-gradient(linear,left bottom,left top,from(transparent),to(#03e9f4));background:linear-gradient(1turn,transparent,#03e9f4);-webkit-animation:animate4 1s linear infinite;animation:animate4 1s linear infinite;-webkit-animation-delay:.75s;animation-delay:.75s}@-webkit-keyframes animate4{0%{bottom:-100%}50%,to{bottom:100%}}@keyframes animate4{0%{bottom:-100%}50%,to{bottom:100%}}