.head-box{margin:auto;width:0;height:400px}.but-box>*{position:absolute;-webkit-animation:open .8s ease-in-out;animation:open .8s ease-in-out;z-index:1}.but-box .icon{font-size:30px}.but-box>:first-child{margin:-7px -118px}.but-box>:nth-child(2){margin:173px 172px}.but-box>:nth-child(3){margin:304px -178px}.img-box>*{position:absolute}.cycle-purple{width:400px;margin:0 -200px}.cycle-green{width:260px;margin:70px -130px;-webkit-animation:clockwise 1s linear infinite;animation:clockwise 1s linear infinite}.cycle-yellow{width:240px;margin:80px -120px;animation:clockwise 1s linear infinite reverse}.cycle-blue{width:220px;margin:90px -110px;-webkit-animation:clockwise 1s linear infinite;animation:clockwise 1s linear infinite}.head-img{width:200px;margin:97px -103px;border-radius:50%;border:3px solid pink;-webkit-animation:hide .1s,show .8s ease-in-out .1s,flash 1.5s ease-in-out infinite alternate;animation:hide .1s,show .8s ease-in-out .1s,flash 1.5s ease-in-out infinite alternate}.info-box{width:200px;height:200px;color:#fff;opacity:0;text-align:center;margin:100px -100px;border-radius:50%;background:rgba(0,0,0,.6);position:absolute;transition:all 1s ease-in-out}.info-box:hover{opacity:1}.info-box h1{margin:50px 15px 0;font-size:70px;line-height:80px;font-weight:lighter;border-bottom:1px solid #fff}.info-box h2{margin:0;font-style:italic;letter-spacing:5px;font-size:25px}.text-box{color:#fff;text-align:center;width:320px;margin:0 auto}.text-box>*{font-weight:lighter}.text-box>h1{margin:15px auto 20px;font-size:45px;line-height:55px}.text-box>p{margin:6px;font-size:18px;line-height:26px;cursor:pointer;transition:all .5s}.text-box>p:first-of-type{-webkit-animation:hide 1s,show .7s ease-in 1s;animation:hide 1s,show .7s ease-in 1s}.text-box>p:nth-of-type(2){-webkit-animation:hide 2s,show .7s ease-in 2s;animation:hide 2s,show .7s ease-in 2s}.text-box>p:nth-of-type(3){-webkit-animation:hide 3s,show .7s ease-in 3s;animation:hide 3s,show .7s ease-in 3s}.text-box>p:hover{font-size:22px}@media screen and (max-width:700px){.head-box{margin:auto;width:0;height:330px}.but-box,.cycle-purple{display:none}}@-webkit-keyframes open{0%{opacity:0;margin:180px -52px}}@keyframes open{0%{opacity:0;margin:180px -52px}}@-webkit-keyframes hide{0%,to{opacity:0}}@keyframes hide{0%,to{opacity:0}}@-webkit-keyframes show{0%{opacity:0}}@keyframes show{0%{opacity:0}}@-webkit-keyframes flash{0%{box-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff}to{box-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #fff}}@keyframes flash{0%{box-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff}to{box-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #fff}}@-webkit-keyframes clockwise{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes clockwise{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}