.OwO { position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media (max-width: 767.98px){ .OwO { position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; left: 0%!important; } } .OwO:hover .OwO-logo { color: #444 } .OwO.OwO-open .OwO-logo { border-radius: 4px 4px 0 0; border-bottom: none; color: #444 } .OwO.OwO-open .OwO-body { display: block } .OwO.OwO-up .OwO-body { top: inherit; bottom: 21px; border-radius: 4px 4px 4px 0 } .OwO.OwO-up .OwO-body .OwO-bar .OwO-packages li:nth-child(1) { border-radius: 0 } .OwO.OwO-up.OwO-open .OwO-logo { border: 1px solid #ddd; border-radius: 0 0 4px 4px; border-top: none } .OwO .OwO-logo { position: relative; display: inline-block; color: #888; background: #fff; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; padding: 2px 5px; cursor: pointer; height: 22px; box-sizing: border-box; z-index: 2; line-height: 16px } .OwO .OwO-logo:hover span { display: inline-block; -webkit-animation: a 5s infinite ease-in-out; animation: a 5s infinite ease-in-out } .OwO .OwO-body { display: none; position: absolute; width: 400px; background: #fff; border: 1px solid #ddd; z-index: 1; top: 21px; border-radius: 0 4px 4px 4px } .OwO .OwO-body .OwO-items { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: none; padding: 10px; margin: 0; overflow: scroll; font-size: 0 } .OwO .OwO-body .OwO-items .OwO-item { list-style-type: none; background: #f7f7f7; padding: 5px 10px; border-radius: 5px; display: inline-block; font-size: 12px; line-height: 14px; margin: 0 10px 12px 0; cursor: pointer; -webkit-transition: .3s; transition: .3s } .OwO .OwO-body .OwO-items .OwO-item:hover { background: #eee; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); -webkit-animation: a 5s infinite ease-in-out; animation: a 5s infinite ease-in-out } .OwO .OwO-body .OwO-items-emoji .OwO-item { font-size: 20px; line-height: 19px } .OwO .OwO-body .OwO-items-image .OwO-item { max-width: calc(25% - 10px); box-sizing: border-box } .OwO .OwO-body .OwO-items-image .OwO-item img { max-width: 100% } .OwO .OwO-body .OwO-items-show { display: block } .OwO .OwO-body .OwO-bar { width: 100%; height: 30px; border-top: 1px solid #ddd; background: #fff; border-radius: 0 0 4px 4px; color: #444 } .OwO .OwO-body .OwO-bar .OwO-packages { margin: 0; padding: 0; font-size: 0 } .OwO .OwO-body .OwO-bar .OwO-packages li { list-style-type: none; display: inline-block; line-height: 30px; font-size: 14px; padding: 0 10px; cursor: pointer; margin-right: 3px } .OwO .OwO-body .OwO-bar .OwO-packages li:nth-child(1) { border-radius: 0 0 0 3px } .OwO .OwO-body .OwO-bar .OwO-packages li:hover { background: #eee } .OwO .OwO-body .OwO-bar .OwO-packages .OwO-package-active { background: #eee; -webkit-transition: .3s; transition: .3s } @-webkit-keyframes a { 2% { -webkit-transform: translateY(1.5px) rotate(1.5deg); transform: translateY(1.5px) rotate(1.5deg) } 4% { -webkit-transform: translateY(-1.5px) rotate(-.5deg); transform: translateY(-1.5px) rotate(-.5deg) } 6% { -webkit-transform: translateY(1.5px) rotate(-1.5deg); transform: translateY(1.5px) rotate(-1.5deg) } 8% { -webkit-transform: translateY(-1.5px) rotate(-1.5deg); transform: translateY(-1.5px) rotate(-1.5deg) } 10% { -webkit-transform: translateY(2.5px) rotate(1.5deg); transform: translateY(2.5px) rotate(1.5deg) } 12% { -webkit-transform: translateY(-.5px) rotate(1.5deg); transform: translateY(-.5px) rotate(1.5deg) } 14% { -webkit-transform: translateY(-1.5px) rotate(1.5deg); transform: translateY(-1.5px) rotate(1.5deg) } 16% { -webkit-transform: translateY(-.5px) rotate(-1.5deg); transform: translateY(-.5px) rotate(-1.5deg) } 18% { -webkit-transform: translateY(.5px) rotate(-1.5deg); transform: translateY(.5px) rotate(-1.5deg) } 20% { -webkit-transform: translateY(-1.5px) rotate(2.5deg); transform: translateY(-1.5px) rotate(2.5deg) } 22% { -webkit-transform: translateY(.5px) rotate(-1.5deg); transform: translateY(.5px) rotate(-1.5deg) } 24% { -webkit-transform: translateY(1.5px) rotate(1.5deg); transform: translateY(1.5px) rotate(1.5deg) } 26% { -webkit-transform: translateY(.5px) rotate(.5deg); transform: translateY(.5px) rotate(.5deg) } 28% { -webkit-transform: translateY(.5px) rotate(1.5deg); transform: translateY(.5px) rotate(1.5deg) } 30% { -webkit-transform: translateY(-.5px) rotate(2.5deg); transform: translateY(-.5px) rotate(2.5deg) } 32%, 34% { -webkit-transform: translateY(1.5px) rotate(-.5deg); transform: translateY(1.5px) rotate(-.5deg) } 36% { -webkit-transform: translateY(-1.5px) rotate(2.5deg); transform: translateY(-1.5px) rotate(2.5deg) } 38% { -webkit-transform: translateY(1.5px) rotate(-1.5deg); transform: translateY(1.5px) rotate(-1.5deg) } 40% { -webkit-transform: translateY(-.5px) rotate(2.5deg); transform: translateY(-.5px) rotate(2.5deg) } 42% { -webkit-transform: translateY(2.5px) rotate(-1.5deg); transform: translateY(2.5px) rotate(-1.5deg) } 44% { -webkit-transform: translateY(1.5px) rotate(.5deg); transform: translateY(1.5px) rotate(.5deg) } 46% { -webkit-transform: translateY(-1.5px) rotate(2.5deg); transform: translateY(-1.5px) rotate(2.5deg) } 48% { -webkit-transform: translateY(-.5px) rotate(.5deg); transform: translateY(-.5px) rotate(.5deg) } 50% { -webkit-transform: translateY(.5px) rotate(.5deg); transform: translateY(.5px) rotate(.5deg) } 52% { -webkit-transform: translateY(2.5px) rotate(2.5deg); transform: translateY(2.5px) rotate(2.5deg) } 54% { -webkit-transform: translateY(-1.5px) rotate(1.5deg); transform: translateY(-1.5px) rotate(1.5deg) } 56% { -webkit-transform: translateY(2.5px) rotate(2.5deg); transform: translateY(2.5px) rotate(2.5deg) } 58% { -webkit-transform: translateY(.5px) rotate(2.5deg); transform: translateY(.5px) rotate(2.5deg) } 60% { -webkit-transform: translateY(2.5px) rotate(2.5deg); transform: translateY(2.5px) rotate(2.5deg) } 62% { -webkit-transform: translateY(-.5px) rotate(2.5deg); transform: translateY(-.5px) rotate(2.5deg) } 64% { -webkit-transform: translateY(-.5px) rotate(1.5deg); transform: translateY(-.5px) rotate(1.5deg) } 66% { -webkit-transform: translateY(1.5px) rotate(-.5deg); transform: translateY(1.5px) rotate(-.5deg) } 68% { -webkit-transform: translateY(-1.5px) rotate(-.5deg); transform: translateY(-1.5px) rotate(-.5deg) } 70% { -webkit-transform: translateY(1.5px) rotate(.5deg); transform: translateY(1.5px) rotate(.5deg) } 72% { -webkit-transform: translateY(2.5px) rotate(1.5deg); transform: translateY(2.5px) rotate(1.5deg) } 74% { -webkit-transform: translateY(-.5px) rotate(.5deg); transform: translateY(-.5px) rotate(.5deg) } 76% { -webkit-transform: translateY(-.5px) rotate(2.5deg); transform: translateY(-.5px) rotate(2.5deg) } 78% { -webkit-transform: translateY(-.5px) rotate(1.5deg); transform: translateY(-.5px) rotate(1.5deg) } 80% { -webkit-transform: translateY(1.5px) rotate(1.5deg); transform: translateY(1.5px) rotate(1.5deg) } 82% { -webkit-transform: translateY(-.5px) rotate(.5deg); transform: translateY(-.5px) rotate(.5deg) } 84% { -webkit-transform: translateY(1.5px) rotate(2.5deg); transform: translateY(1.5px) rotate(2.5deg) } 86% { -webkit-transform: translateY(-1.5px) rotate(-1.5deg); transform: translateY(-1.5px) rotate(-1.5deg) } 88% { -webkit-transform: translateY(-.5px) rotate(2.5deg); transform: translateY(-.5px) rotate(2.5deg) } 90% { -webkit-transform: translateY(2.5px) rotate(-.5deg); transform: translateY(2.5px) rotate(-.5deg) } 92% { -webkit-transform: translateY(.5px) rotate(-.5deg); transform: translateY(.5px) rotate(-.5deg) } 94% { -webkit-transform: translateY(2.5px) rotate(.5deg); transform: translateY(2.5px) rotate(.5deg) } 96% { -webkit-transform: translateY(-.5px) rotate(1.5deg); transform: translateY(-.5px) rotate(1.5deg) } 98% { -webkit-transform: translateY(-1.5px) rotate(-.5deg); transform: translateY(-1.5px) rotate(-.5deg) } 0%, to { -webkit-transform: translate(0) rotate(0deg); transform: translate(0) rotate(0deg) } } @keyframes a { 2% { -webkit-transform: translateY(1.5px) rotate(1.5deg); transform: translateY(1.5px) rotate(1.5deg) } 4% { -webkit-transform: translateY(-1.5px) rotate(-.5deg); transform: translateY(-1.5px) rotate(-.5deg) } 6% { -webkit-transform: translateY(1.5px) rotate(-1.5deg); transform: translateY(1.5px) rotate(-1.5deg) } 8% { -webkit-transform: translateY(-1.5px) rotate(-1.5deg); transform: translateY(-1.5px) rotate(-1.5deg) } 10% { -webkit-transform: translateY(2.5px) rotate(1.5deg); transform: translateY(2.5px) rotate(1.5deg) } 12% { -webkit-transform: translateY(-.5px) rotate(1.5deg); transform: translateY(-.5px) rotate(1.5deg) } 14% { -webkit-transform: translateY(-1.5px) rotate(1.5deg); transform: translateY(-1.5px) rotate(1.5deg) } 16% { -webkit-transform: translateY(-.5px) rotate(-1.5deg); transform: translateY(-.5px) rotate(-1.5deg) } 18% { -webkit-transform: translateY(.5px) rotate(-1.5deg); transform: translateY(.5px) rotate(-1.5deg) } 20% { -webkit-transform: translateY(-1.5px) rotate(2.5deg); transform: translateY(-1.5px) rotate(2.5deg) } 22% { -webkit-transform: translateY(.5px) rotate(-1.5deg); transform: translateY(.5px) rotate(-1.5deg) } 24% { -webkit-transform: translateY(1.5px) rotate(1.5deg); transform: translateY(1.5px) rotate(1.5deg) } 26% { -webkit-transform: translateY(.5px) rotate(.5deg); transform: translateY(.5px) rotate(.5deg) } 28% { -webkit-transform: translateY(.5px) rotate(1.5deg); transform: translateY(.5px) rotate(1.5deg) } 30% { -webkit-transform: translateY(-.5px) rotate(2.5deg); transform: translateY(-.5px) rotate(2.5deg) } 32%, 34% { -webkit-transform: translateY(1.5px) rotate(-.5deg); transform: translateY(1.5px) rotate(-.5deg) } 36% { -webkit-transform: translateY(-1.5px) rotate(2.5deg); transform: translateY(-1.5px) rotate(2.5deg) } 38% { -webkit-transform: translateY(1.5px) rotate(-1.5deg); transform: translateY(1.5px) rotate(-1.5deg) } 40% { -webkit-transform: translateY(-.5px) rotate(2.5deg); transform: translateY(-.5px) rotate(2.5deg) } 42% { -webkit-transform: translateY(2.5px) rotate(-1.5deg); transform: translateY(2.5px) rotate(-1.5deg) } 44% { -webkit-transform: translateY(1.5px) rotate(.5deg); transform: translateY(1.5px) rotate(.5deg) } 46% { -webkit-transform: translateY(-1.5px) rotate(2.5deg); transform: translateY(-1.5px) rotate(2.5deg) } 48% { -webkit-transform: translateY(-.5px) rotate(.5deg); transform: translateY(-.5px) rotate(.5deg) } 50% { -webkit-transform: translateY(.5px) rotate(.5deg); transform: translateY(.5px) rotate(.5deg) } 52% { -webkit-transform: translateY(2.5px) rotate(2.5deg); transform: translateY(2.5px) rotate(2.5deg) } 54% { -webkit-transform: translateY(-1.5px) rotate(1.5deg); transform: translateY(-1.5px) rotate(1.5deg) } 56% { -webkit-transform: translateY(2.5px) rotate(2.5deg); transform: translateY(2.5px) rotate(2.5deg) } 58% { -webkit-transform: translateY(.5px) rotate(2.5deg); transform: translateY(.5px) rotate(2.5deg) } 60% { -webkit-transform: translateY(2.5px) rotate(2.5deg); transform: translateY(2.5px) rotate(2.5deg) } 62% { -webkit-transform: translateY(-.5px) rotate(2.5deg); transform: translateY(-.5px) rotate(2.5deg) } 64% { -webkit-transform: translateY(-.5px) rotate(1.5deg); transform: translateY(-.5px) rotate(1.5deg) } 66% { -webkit-transform: translateY(1.5px) rotate(-.5deg); transform: translateY(1.5px) rotate(-.5deg) } 68% { -webkit-transform: translateY(-1.5px) rotate(-.5deg); transform: translateY(-1.5px) rotate(-.5deg) } 70% { -webkit-transform: translateY(1.5px) rotate(.5deg); transform: translateY(1.5px) rotate(.5deg) } 72% { -webkit-transform: translateY(2.5px) rotate(1.5deg); transform: translateY(2.5px) rotate(1.5deg) } 74% { -webkit-transform: translateY(-.5px) rotate(.5deg); transform: translateY(-.5px) rotate(.5deg) } 76% { -webkit-transform: translateY(-.5px) rotate(2.5deg); transform: translateY(-.5px) rotate(2.5deg) } 78% { -webkit-transform: translateY(-.5px) rotate(1.5deg); transform: translateY(-.5px) rotate(1.5deg) } 80% { -webkit-transform: translateY(1.5px) rotate(1.5deg); transform: translateY(1.5px) rotate(1.5deg) } 82% { -webkit-transform: translateY(-.5px) rotate(.5deg); transform: translateY(-.5px) rotate(.5deg) } 84% { -webkit-transform: translateY(1.5px) rotate(2.5deg); transform: translateY(1.5px) rotate(2.5deg) } 86% { -webkit-transform: translateY(-1.5px) rotate(-1.5deg); transform: translateY(-1.5px) rotate(-1.5deg) } 88% { -webkit-transform: translateY(-.5px) rotate(2.5deg); transform: translateY(-.5px) rotate(2.5deg) } 90% { -webkit-transform: translateY(2.5px) rotate(-.5deg); transform: translateY(2.5px) rotate(-.5deg) } 92% { -webkit-transform: translateY(.5px) rotate(-.5deg); transform: translateY(.5px) rotate(-.5deg) } 94% { -webkit-transform: translateY(2.5px) rotate(.5deg); transform: translateY(2.5px) rotate(.5deg) } 96% { -webkit-transform: translateY(-.5px) rotate(1.5deg); transform: translateY(-.5px) rotate(1.5deg) } 98% { -webkit-transform: translateY(-1.5px) rotate(-.5deg); transform: translateY(-1.5px) rotate(-.5deg) } 0%, to { -webkit-transform: translate(0) rotate(0deg); transform: translate(0) rotate(0deg) } }