.hint { display: none; position: absolute; left: 5%; top: 32%; right: auto; bottom: auto; width: 84.4%; min-width: 240px; max-width: 270px; height: auto; font-family: -apple-system, "Roboto", "Helvetica Neue", Trebuchet MS, sans-serif; font-size: 14px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 100; } .hint.visible { display: block; } .hint .logo { -webkit-transform: translate(0,5%); transform: translate(0,5%); -webkit-animation: arrow-move-up 1s infinite; animation: arrow-move-up 1s infinite; } @-webkit-keyframes arrow-move-up { 0% { -webkit-transform: translate(0,5%); } 50%, 95% { -webkit-transform: translate(0,-30%); } 100% { -webkit-transform: translate(0,5%); } } @keyframes arrow-move-up { 0% { transform: translate(0,5%); } 50%, 95% { transform: translate(0,-30%); } 100% { transform: translate(0,5%); } } .hint h1 { display: block; margin: 0; padding: 0; font-weight: normal; font-size: 100%; line-height: 100%; } h1.bold { font-size: 125%; font-weight: bold; } .hint__window { position: relative; width: auto; margin: auto; background-color: #f9f9f9; border-radius: 12px; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); overflow: hidden; } .hint__content { margin: 8% 7%; padding: 0 8.1%; } .hint__content .header { margin: 0 0 1.1em 0; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .hint__content .header.macos { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .hint__content .header .logo { -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; width: 25%; } .hint__content .header h1 { -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; margin-left: 4%; max-width: 71%; } .hint__content .texts { text-align: center; } .hint__content .texts .text { display: block; margin: 0 0 4% 0; }