.container-main{background-color:#202124;color:#fff;height:100vh}.animated-title{color:#fff;font-family:Roboto,Arial,sans-serif;width:90%;height:100vh;left:50%;margin-left:50px;position:absolute;top:50%;transform:translate(-50%,-50%)}.animated-title>div{overflow:hidden;position:absolute;width:50%}.animated-title>div div{padding:20px 0;position:absolute}.animated-title>div div span{display:block}.animated-title>div.text-top{border-bottom:1vmin solid #000;top:0}.animated-title>div.text-top div{-webkit-animation:showTopText .5s;animation:showTopText .5s;-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;bottom:0;transform:translateY(100%)}.animated-title>div.text-top{height:40%;color:#fff;font-size:10vmin}.animated-title>div.text-bottom{height:60%;color:#fff;font-size:2.5vmin;bottom:0}.animated-title>div.text-bottom div{-webkit-animation:showBottomText .7s;animation:showBottomText .7s;-webkit-animation-delay:1.2s;animation-delay:1.2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;top:0;transform:translateY(-100%)}@media (max-width:600px){.animated-title{left:calc(50% - 25px);width:calc(100% - 50px);top:50%}.animated-title>div{position:absolute;overflow:auto;padding-right:50px;width:100%;height:50%}.animated-title>div div{padding:2vmin 15px;position:absolute}.animated-title>div.text-top{height:30%;color:#fff;font-size:10vmin}.animated-title>div.text-bottom{height:40%;color:#fff;font-size:4vmin;bottom:30%}}@-webkit-keyframes showTopText{0%{transform:translate3d(0,100%,0)}to{transform:translateZ(0)}}@keyframes showTopText{0%{transform:translate3d(0,100%,0)}to{transform:translateZ(0)}}@-webkit-keyframes showBottomText{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@keyframes showBottomText{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@-webkit-keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes fade{0%{opacity:0}to{opacity:1}}@-webkit-keyframes downSwing{0%{bottom:60px}30%{bottom:60px}to{bottom:30px}}@keyframes downSwing{0%{bottom:60px}30%{bottom:60px}to{bottom:30px}}@-webkit-keyframes topSwing{0%{top:60px}30%{top:60px}to{top:30px}}@keyframes topSwing{0%{top:60px}30%{top:60px}to{top:30px}}