.sp-title{margin:0}.flex-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.all-transition{transition:all 1s cubic-bezier(.55,.085,.68,.53)}body{margin:0}body .app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100vh}body .app .sp-container{width:100%;height:100%;position:relative}body .app .sp-container.hover-left .sp-left-panel{width:80%}body .app .sp-container.hover-left .sp-right-panel{width:20%}body .app .sp-container.hover-right .sp-left-panel{width:20%}body .app .sp-container.hover-right .sp-right-panel{width:80%}body .app .sp-container .sp-panel{width:50%;height:inherit;position:absolute;display:flex;justify-content:center;align-items:center;flex-direction:column;background-size:cover;background-repeat:no-repeat;transition:all 1s cubic-bezier(.55,.085,.68,.53)}body .app .sp-container .sp-panel .sp-title{font-size:2rem;color:#fff;white-space:nowrap}body .app .sp-container .sp-panel .sp-link{width:15rem;padding:1rem;text-decoration:none;border-radius:8px;border:.3rem solid #ffffff;font-size:1.5rem;background-color:transparent;text-transform:uppercase;top:1px;z-index:2;position:relative;text-align:center;letter-spacing:2px;color:#fff9}body .app .sp-container .sp-panel.sp-left-panel{left:0}body .app .sp-container .sp-panel.sp-left-panel:before{background-color:#2396ef66}body .app .sp-container .sp-panel.sp-left-panel .sp-link:hover{color:#2396ef99;border-color:#2396ef99}body .app .sp-container .sp-panel.sp-right-panel{right:0}body .app .sp-container .sp-panel.sp-right-panel:before{background-color:#f8872a66}body .app .sp-container .sp-panel.sp-right-panel .sp-link:hover{color:#f8872a99;border-color:#f8872a99}body .app .sp-container .sp-panel:before{content:"";width:100%;height:inherit;position:absolute;transition:all 1s cubic-bezier(.55,.085,.68,.53)}