#didomi-host { --cookie-consent-bg-dark: #1f2734; --cookie-consent-bg-darker: #161c25; --cookie-consent-bg-medium: #232c3b; --cookie-banner-max-width: 700px; --cookie-banner-bird-size: 140px; --cookie-button-radius: 30px; --cookie-banner-radius: 56px; --cookie-radio-radius: 25px; --cookie-spacing-xs: 5px; --cookie-spacing-sm: 10px; --cookie-spacing-md: 15px; --cookie-spacing-lg: 20px; --cookie-spacing-xl: 40px; --cookie-border-radius-sm: 12px; --cookie-banner-title: "Your Privacy"; --cookie-consent-bg-color: #2c374a!important; font-family: OpenSans,Lato,Arial,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,sans-serif!important } #didomi-host[data-regulation=gdpr] .didomi-notice-data-processing-container { display: none!important } #didomi-host p { font-size: 16px!important; line-height: 145%!important } #didomi-host .didomi-popup-backdrop { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); background-color: #00000080!important } #didomi-host [dataTooltip] { border-bottom: 1px dashed var(--color-white,#fff)!important } #didomi-host [dataTooltip]:focus:after { background-color: var(--cookie-consent-bg-dark)!important } #didomi-host .shape-panel.bottom { padding: 0!important } #didomi-host #text a { color: var(--color-white,#fff)!important; font-weight: 400!important } #didomi-host #didomi-notice { border: none; background: 0 0!important } #didomi-host #didomi-notice .didomi-gpc-container { display: none!important } #didomi-host #didomi-notice.didomi-regular-notice.bottom .didomi-notice__interior-border { background-color: var(--cookie-consent-bg-color); border: none!important; padding: 64px 0 32px 40px!important } #didomi-host #didomi-notice.didomi-regular-notice.shape-panel { max-width: var(--cookie-banner-max-width); border: none!important } #didomi-host span:not(button span) { color: var(--color-white,#fff)!important } #didomi-host .didomi-consent-popup-information-save { display: none } #didomi-host img.didomi-logo { display: none } #didomi-host #didomi-notice-agree-button.highlight-button { flex: 1; display: flex; margin-right: 40px!important } #didomi-host #didomi-notice-agree-button.highlight-button span { color: var(--color-primary,#2b3749)!important } #didomi-host .didomi-border { border: none } #didomi-host .didomi-popup-container { border: none } #didomi-host .didomi-exterior-border { border: none } #didomi-host .didomi-consent-popup-preferences { background-color: var(--cookie-consent-bg-color) } #didomi-host .didomi-buttons { justify-content: flex-start!important } #didomi-host .didomi-buttons .didomi-button { font-family: inherit; border-radius: var(--cookie-button-radius)!important; background: var(--color-white,#fff)!important; color: var(--cookie-consent-bg-color)!important; font-size: 15px!important; font-weight: 500!important } #didomi-host .didomi-buttons .didomi-button.didomi-disagree-button { opacity: .7; border: 1px solid var(--color-white,#fff)!important; color: var(--color-white,#fff)!important; background: 0 0!important } #didomi-host .didomi-buttons .didomi-button.didomi-disagree-button:hover { opacity: 1 } #didomi-host .didomi-buttons .didomi-button.didomi-learn-more-button { opacity: .7; border: 1px solid var(--color-white,#fff)!important; color: var(--color-white,#fff)!important; background: 0 0!important } #didomi-host .didomi-buttons .didomi-button.didomi-learn-more-button:hover { opacity: 1 } #didomi-host .didomi-buttons .didomi-button#didomi-notice-agree-button:hover { opacity: 1 } #didomi-host .didomi-popup-container { overflow: hidden; border-radius: var(--cookie-border-radius-sm)!important } #didomi-host .didomi-popup-container { color: var(--color-white,#fff); background: 0 0!important; border: none!important } #didomi-host .didomi-exterior-border { color: var(--color-white,#fff); background: 0 0!important; border: none!important } #didomi-host .didomi-popup-header { color: var(--color-primary,#2b3749) } #didomi-host .didomi-popup-title { color: var(--color-primary,#2b3749) } #didomi-host .didomi-popup-close { opacity: 1; color: var(--color-white,#fff) } #didomi-host .didomi-popup-footer { border: 1px solid var(--cookie-consent-bg-color); padding-bottom: var(--cookie-spacing-lg); color: var(--color-white,#fff); background-color: var(--cookie-consent-bg-color)!important } #didomi-host .didomi-popup-footer .didomi-buttons #btn-toggle-disagree { border-color: var(--color-white,#fff)!important; color: var(--color-white,#fff)!important; background-color: #0000!important } #didomi-host .didomi-notice-data-processing-container * { color: var(--color-white,#fff); font-weight: unset!important } #didomi-host .didomi-notice-data-processing-container { opacity: .5 } #didomi-host .didomi-notice-data-processing-container .didomi-notice-data-processing-title { margin-bottom: var(--cookie-spacing-md); font-size: 15px!important; font-weight: 400!important; line-height: 145%!important } #didomi-host .didomi-notice-data-processing-container .didomi-notice-data-processing-list { font-size: 15px!important; line-height: 145%!important } #didomi-host .didomi-components-accordion .didomi-components-accordion-label-container span { font-size: 16px!important; line-height: 145%!important } #didomi-host .didomi-notice-banner { background: var(--cookie-consent-bg-color); color: var(--color-white,#fff); font-size: 14px; border-color: #0000!important; right: 0!important } #didomi-host .didomi-notice-banner .didomi-border { border-radius: var(--cookie-banner-radius) 0 0!important; border-color: #0000!important } #didomi-host .didomi-notice-banner:before { top: -132px; left: var(--cookie-spacing-lg); width: var(--cookie-banner-bird-size); height: var(--cookie-banner-bird-size); content: ""; background-image: url(data:image/webp;base64,UklGRrQtAABXRUJQVlA4WAoAAAAQAAAAIwEASQEAQUxQSAELAAAB8MYAkCLH+f+VWqPRarWyLMuyZTlkWXeyokOFE+vCzOgwO3Dh3CnMzMzM5PBBmJkZjkO++HEMa1rvznRXvZjx3s5sV7WfdxExAfD/e6WU53l+tq6144mVBYNIaMa7b9nAnyRQjWd8X0Sq/NgNWfdr/pxSaO7OOF3z35TWJes6m9dFaR5sd7Pcf5TycC8Hu46qEBfl3Mr7nap0aZ1D5capekfnZhypuUTVPXRWxoFaDVV/fq5ynBmGrBie6jQ7kDX1lu7SQTZ9z1UeIbsOKxdRv5FtA8896kKyb6BcYy5Zud8tanrI0h+4xEFI1t7FGdSnZHPPEdo0WX3IDa4g2893gbvI/uvK7wpiMBRfJ7G4RHhtxOR5osuVuKD1JfcbsYme3OYQo6NiUwVO6EOp7UK87iW0HmZIZk3E7S8ie4gdapFYkZ//BJYlhjPyOp6j9+T1L0fkSUsRyydIa3OeRqT1PU+khEVMT5NVO1cPyWo1V6OiUsS2ktTBfDVJaoyvowW1NvH9hqB+YGxYTjli3MjpBs7Il5IKWGuVUjuxfomUvuatW0ohb0ZIGWJeyWhd7hpkNIe7s2R0Anc9MrqDO5TRi5MibzKHmBXRW+xtJKKn2DtPRNfzhojviugw9v4nojbWENGMiSjDGSIaUxCRQu7GRATjfGFE98nobdaM0Z/LqI0tjAlPkBEYvowxOlxbSF8xhRGtAyWkDXjCiNbBKAhZab5MGNwjJehiCKPG6KDki6mWLR0G34Oci/wQIhoThqVmQV3IDkaNDoOvQNAeS8booNgkKehjBmN0GHwEom7lxxitg2JOVoCs4EQ/gLCf4gQR0Ritg+IsaWWZMUbrMOgDcQ+xEwalTnlN4QNjwjDIg8BLvOgwKN0isf25QEQ0RoelMU9iMMaHMVoHxRdA5NNYCYKCJzMYZAERjdZhUFoI1s7toKzWzAHGhEGp4NnrUv2tZzN4gwdjtA6KN4C9/yJa7dtMhbbDqDFhUBpTFtNEhO0Wg3bbESIao3VQugTsrZCityl7wQcc6DAM+sDiHsUXcvaCgt0Q0Ritg2KbzbITEL3kW0uhzTAuLN0FNq8pg/AIW0Gr5YzRYdALVs+WQzS6gaVgnr1wgtGM3bzyiPDr7X0bwc22K60Nlsc1iOYvaVTWgSUWM0YH08D2oxUgIr3kuvZ6zyowZC1jdHgQWP/FykyIpaGVn71813lndB7Vsee209ZtqPFV1agxe4UtYP8piVTc/Hlhs5c6UIGFEBFN4AOHpgpiseeUGpUq8I2dCgpYfLxaYgePyKQIPG0bRMT3wOqZMjJYTUQUzvVTA15oGULTAXZfsGJPFQcPVBkR9e6lUgJeyTJhLVg+TzS4SVzGVB0RLfTTAfC1VcYV2H6AiOjvXRUAqHdsQPR+TTrgIIvkwf4rI0T4w0ENrffagWhhNhXgD9qiGxh8LM62D6g0AGwUWGEpcNhuJ6KzUgHQEVbf08CiQkvRcDYVAN57WFXYDkwutxXRKekAgJqHxqum4AOXs+1F3bmUAEDt07oa8CZg9B97Ee2TGgDwnyukLH8wsJo1FqNTUgQAU/rSYz5aF7g91Ga0KFUwOyXFd7b0gOFzbUY9Kk37J4bj38ytB7Yb0GJUUClanMjwXW0KmD/YZqT99IwnsT4IcL7VCLNpmUJJ1gugwdiNTF1KliWyH3/ev2R77aWilRJ9nL9lZP8xlYZ8Mj3sdRGHv6WgmZI13O1KPN6QXH9CpHirRybo4KR2p6RzrKkBYrM5oSCxKax1EZ+hn8gllPhBnG1JnOaTmEXJ386Yp1mhCypXa1LwCmMvErONFRuhFH7G12zidrxSH1Eaf2JLFdihsyszn1K5jK1riF/0K7EDpXMlVzlkiF6tQAumZClXzxHLLWtUpymlPzLlI089a9JqKK3vMdVJTO9VXhtSah9jKuCqWNYuSOm9mKdaYnteGRdQmvfn6WW+ShOdR6neiCVFjG8Qo96kdDeztCVnfZE5w5Ryn6UlnNHpNW0LKPXAsSLekdKPLE1jrhoLLL0prl9Y0uK6nCOfxD2Loy3l5XH0gbg0cByK6xeWSNynclQrr0aODhMXAscvi6ufpV5x7cBSKC7FEkm7BzhW4prFUkZaBliul9YtPE2Tls/TXsJ6G3ieJ6w6pm6T1XJguktUmOXqQ1G9Alz/LCmt2PpTUqcA272CWgl8Dwoqx9i4nB4HxrWYRoFzFFMtayTlw2AS5HWYBOkB3pWMhoH5nIh0hrupEjJZ4P5gAekssP+UfIo+8P+3eFYrEKCWzrcgQZ+EOw9EuJNsTBvIcKVohjyQYZYEi2eBFBcIZkUtSHEjEuvgBiDGjJZK77YgR/UdyfSnBpDkEyTR8JUMiPJCkmfh6UYQ5gUk0CaQ5k0k0TppPEIizchCfUMy9UTRXCChgiR3MDTpoZ4jsaIcthwluYYcNGyQSUH2M5JsnoNNtfmoJiE135Bol3CgCkTUvXYC/i2GhPsCB3AYRcNL6lUlVNsSku8OLMBghIjCB1q8slTT0atIxPU8+BPEln5/4va7H39z2ZAhMSseYP+yBI7A5R+iG2FDFSX3PhvgG8F18gH1KLcMIzBVbAisNqLQBniBFpTZC8xAJhDZ5twAvCyxDD9wBIorAIYzXeJayFH91+LalBnlNd3WR+JGxUH9hWfd9vq33UVDUl8FHDYEJPwOFuAH6WV4aETZjQCTp8puLhewXHKo2FAouMeAz2mCyzECm4utB1hdX2pb8gLXyywAbltE1skOeAIzwLBCcd3MEcB30lI8wdOyWgxciwozbOUkdT/w/ZScUDEGRkxnAOeelIrA+zwhdTIHIyIaA+6ViBrZg+0FdDMI8HXxFECE49JplkFGOOeBEKeKZiGI8RTB9IEg3xXLiJIELBWKyYIsV8tkI5BmIJFOEKcK5XEDCFQVpXE/iNQLZfENCFUVJfE9yHVEDstBsv1S+A5k2yWDZ0G6D0rgCpDvKezh0SDhtZnTbSDkQc7ytSDmW/haApLehKs7QNaqyJGZAuJ+gZ+VIHE1zkuwCwi9rsDIhyD4o7gYaATZX8JBcWsQv1pgO7wc3PA6m+FzCpxxU20pfFaBUzaMWkhfrsA9v7RM8UJw1JZuexR2AJc9wVhCgetuvxqr7xlwYbXRe7oa8O/bO16M8ZwoqmYsHk9V6Yt2DwD2j4Tg1qpxv8UjmFTY9+YRTQriH4i84FgTqvo5l7zRHUxkNKIJx/5+/5Y923IKyg8iG7hZvIr5WUGiFPVdDmI8SHSnyDi4fF0khGT7Ii853VuR6xOi6DSno6iXTG2Mcjk/gpDsh5F+cPkHI68khJEznI6imWR8inoul40YSPakSC+4/E+RBxL6OzLN6SiaTYii4PKHRjQkWxN5w+nGI3cl9GCkxeko2pyMoqhyub0iCMm2xfgu1x/5pEJe67ELfh0oGirbBEO/XLP77BrlVhTdtDJnISUZ/LyPQ9XHZCtDiSt3WhAZgurYxZk8in7nZ3xfqTXSibU6j//oEFJlgyU3rDtBNt97UqMHAKr+el1Gd43yZ9yfJzwCXPdSSjj0I2vY9P0EFGTAkfNJ0VgFAODSOKJZjvRLYlQZgGvi6Fg3qgsJS32/fvT2z3ks652P/gxifqoU1KyOob2cqPxN/ytjB08pf/flvR2Q4DUxI84F4C+agE5VkPyxkcDBANSzcbTASw7mEdHxTgbgrYihVSo5aD22Bpz9hBj6KgVu3xxDDZMbAPlI02QH/EJUhMnPww715QYAVlA4IIwiAACQogCdASokAUoBPjEYiUMiIaEUWvT0IAMEsbdwtc8ASIBpDFb/KP+PdaLcax3/VdWF/3z35Xe2jav759+vzD+afib2Z5u3lP65/0f8F+ZXy2/2Hqm/RP/o9wX+J/0n/mf4P/D9lHzI/uZ+3Pusf8n9wPfJ/XfUi/nn/i63z0RfLl/df4dP23/dz2qM21/s34heLX+N/Jfo1vaH90tBR+Jf4n+A9uHZ78tdQL8o/nP+e/LPicgB/mv9e/5X+F9Z37Xzd+zvsAfrZ/x/XP/e+Ih6r7AH9C/u3/Q/yfsbf9v+z/KP3E/oP+l/9/uD/zH+w/9P14PXr+5nsT/rx/6y+Y9gspwNtQ+oftPTOO8jC/JLDYjorWM0Ke0j5D+pbpxWGjXNZRGRBh7VyU3K+7h4H61GpAYHiwn2lREvInp109EREX4D73vsPcBw742DuedVnhDweYTv2n7x3nUwUwKFoBFd/wjH0u3hFg8AfXp85Os0dfGanznJXFl7Xj93UXDKUkSYFCz9OZo1UkJp5MoFGAcwhYVbSuYZN6U/GfLe4zFlNVBEqD/SgJ1AWH+e/crxuV93DwP03eVLFDIsirFym4vwRpu6eJNB3QWGHpaLr8Tx/qCZIlz07YB3GV01W8mFkb+lOdVa1Q+uBNFW7Or/0T8PXGlUqvuvGVzzmhPopR3AqFii5zTZIRNQkc5dw/8Xa0i4smmWuZ1UAz9txMP1zQ+z9+bMLTxAYy3Vb0lQ9FKwQXt6YJ+zlq+tFXebQOCO8ETMt53yLgQ5XaDm30lABfd3PzNfLJcn5lWFerKk6/RJHTZNN4a0sWA5Ldw3rMZw2h1kqlWde8ay+DAxHqsGsXTyj3i6DXGudnHtUFerd4LutIt6BJeWAXC80Vl87m8kD6wM77IrKc34BJ862cDiZ4XOIkx2qRIYsoMrZ080FEQIcwGfi3gY+KEorkrIwhrnQcwCnS7/Mwzzi0n1V6xjRfJDGCC+AneVcGSPPFnzzEUkwn69dVKHs4ePgcRdof8lCD22ThzMUHL1LsikGFHnB/pqe9Oo6rNaYiYziZJJkmHbbjfekhWlMRIO3KYmd0hveudqxtMnfWXbW6jcfZkZLw2ikPxjd+Ds3pYgZd+3gsdVovvXtyWq/jtTb5t74dKMLK7LvQVhWKbaGSD7hzDsx/51bQbX87OSyp2/cHpaNaxRJ1QUlTtOd/+wVM/0hEJ6sXvNtX6z16Av6Z9r1/0WVxV8mH5NfgmzpVZysl9KNB+fvUpg13RAk7LZzKeRAKd0lshH811pT5raQlXZilJL1O+M/SYBkt2DorokZ4rdPuklAqS3sJ9TjjKyey6K6DJ/qdRlCkP743u5CAf9HzXjoLPolELaZ5zEas3HwSPTSl8AgbENzQx+v1+jANzi3BK8+XY0E/M6XUyRNUAAf/JEqubDfvUmDdijEtGrhWCwqkHHDqupy++4iPc/7/sLb9UyoqX8JK3qq1czmMY+nhvpYkhS5XuP+nq0p812TizzeghXqhWlHBNI4rJK3x698GJr17+CSfmsZUkkz0Q+/uF182TFhP1d00j9VNkbqNfbYSf3jDTwMNHdhciPxTjhXAI0D28sJFgUT7puSfjkM1qlGfLdmMuixn+4i35Sl/+/pzGPLf3cSB4vpjFGVDY4iUVVMMhmUC+cs16tKfANvLr4XTFd86T4HfX8+Xjn1rVw6akkrV9iHsU/UP07zQ4TTdWLeuZEvDiVpP0RxgQAqKMgAP755HgAPfKoyRpuOaG/9JwmHUWqyfTS6OI8K2Hm1Css1gHDm1JUQJKBsFsOeQFzxVo2dIGRWAAY7Qe5q1QT0trvBQpBxYdUNJMg5Q6V65on2MGffX2iodMEnrj2a6fJVI8yv0TfEkTYnV8FUYfQrrra23WKfcBCTx4TzlRh7bZFXF5xMS43ZgA5NeJH4/lmOEP9HDSJolRKdmHmLQ554Sz88WQMfYa9REBSZRK/D1+KjQgNRJLFXyxQtzUqxkDt8ZJsk8/KCqw8a01S3jGu0lAvcYxTirDMT6JxFsssYfWrH0IeN2pFEX/9JkN4gGAkv5FT0MJYP/kNUDAqBY7tzAmFmkanCLJ5VRSf8kSirC6q9knYBu62ZY56Koz37oy/Vhz+Sdf5WLxcPpciBqVcxfDVUIiwp/0dpDyko4Bm6zF6UFzSp+i1q4vLUk1ZtTINLpW0jBuz665dPRGjHWQB4NCyL8899xC4/joJ0TXnK5q07YOAs6/xNKw0DbpzimZU5LZgaBvfESM7Tg/gEup+bkMXXfcyjrb5JHP/nLrlpTLV1X1c382pefo3Nj9sirIM2KhT3suKuXUU+mPbuBqzc9uiAN78q+NSbIQeduCSodw8V3Tatiqo0YxOLbFeFQofkePP/ikwkvovmHRXb4TizNUcwev+s3n75UM2N9we3tR2vmh7roocx/IwpRATmFyu4bcg0VuJYE0s5h+4/DdTiaNQ2b2m4RoaUT0UX5dO7yjQ+Tlh552NISXHfQhdrIhdDvVeNzIyTQ5uynl+zJ73rsYctQpm1cqtjpwOvw2V7STpfD8NmOF76PLjTXc0bJrKVXaZ/glj4RhoBA7DIyEMFsC30Cgq1BsWJFVYukmsamR3oAPsMf2M+woNdHaFCx+SgnzTnh/eKp9mdDVSWVnhc1PPiAGwXw1YjK/nRgTjk8/wtUKZRACpnh9nnJFH0Lr3Fpm1u3IKaQPzlMawhl0LXOZ1a/by7ogmlUPB3iC6z6HM7T5WYKm5pmDUBBTHK2d2YL99n1Ay/ANZc4NlVq+vVecs8zUIGfshRP5u3xIa8PxdPxWGMsBg63NHvVkGe4eHHlHVNfrc+tJydGXg/wolrxGO7BxAUeELWRfwbYqcRL0x3EgNdI0M/Q8k/8aehWFaSxO9spHB7ZyWAWKVCdLeojRY/fppeOqzyEzPwS6AfxwF5btqfDH+rWzlhHPL6KMT3e3u5vyDtlTOr9+FLqWvr6OiClpX4JlzIjwwpNKMvuqAEXRnwwamdk2XPQO671EHAHSNyal7RxYMfrAG/hk/49DcmcIGtG+P9KwReNGj9DvbDX25XbgmaI61eiWgT+yZjDFRW43IL6zNEvV38CLDCcFPJS0vwBRsCelE/x+P9ODmUhA7oclbur+cvt/mglM+kSYpLBAkpg1AgwQNvqiXBsBPNa25ESv8eB+8xDYJMNHuVHL/+BXAB3uc0FXC0uSB1ITU4dsjZr2K7KIv0Q1AKYhPS5yBXlEECUrTXyhBlbAbnLfZsg1xcRDbApghR+Gs8w/GBkNIfnRHXPz+KizWbSv1ndIwYadFW694+dfxprva6gDPnXiYptbXkyqFMoy0+Bwd84/gSB+j99zRfPNyyWsJ8qGqkCDSnP6XkINJhuPK6hWI8E4pKmz9wzCLeu8SOf5hpnv6fPamTm5RzkQ0LuNEf/aE23NkktVwxDjkEE7mLtMgEOpnNLhHedvzVktJdKbYDwFgX55SYBw5IJ4uOScsHDS/xMLfMRRDunIlLyS/kc1mJ2F/UCDBGkqPhEIIttBnbgs8hdRoXw49bYV4MsIfkfeuJDhQslr7hnBPPANBS4SzTdx+J1FObqYHgwd9K7ndw/lYnxjkXailySZ/9E7W7MYprQ2F5A+k2ioxs51ceWIOeQF5S1VqrdRPeVhApsSBOeVE/NYnvsKoWX84sCm5H2e22IjoFAEx7nEpA0g3mwEIJ81M0JqiHgRANTKsT+x+6O7GrXSUTvkus0TRLQgqSLI9t8ZfsBpN84KzP+/VBVDiBDOfl8zJJ6f95MzmZp41+IqNKgMU7cX6Af2l1yGRrxG3OfoS70q1JAo+ewx7MBB0IyF/8ppZGJdXaitA9l+GlOeZsnHXB2Q7Bba/YN5+BnZEK4149a4bLS63dUm4Upk2tIV7g5psZ88fMW9dz6bs4Nti38bolc6IaRgtPv2NCro60qDUlANhMFV2rRwnlKWapOVS++mjrQkS3VwV3hbZLwJiD8w2qUE3AhUcpOfjE7+c3GhXughwjWWtxzKTA8VNEYEhfYARlp3TNZxpsmY1vPQ+9bndYq6fe8PCC+0s4Fy1gxguztMUtmbYLK0z07jDlq+TBWMrn6XI5Ya1I6YRm36IoqSrj13foPdlCWeY+730hISar2N7z7L+mcbjF/ae3MKyzNBZ8xQiPvJm0FrTAsX1glkgIlBjokDqWYPpnRHZZ9p71pXSSOiLk/FKKSTP65Jchj4iKxESzBO7j/DYTnUP8jzT8fNGhN3hUePxg3Paf/C87oyquSe8k9Fq+peooR5szhp4USWng0W5aoBU9gFM108pv0ugwJHRrhC+AHuiR1wHn9e1e25oa+5cBgx93Y8Kpy/o+7c0umLX357Ltv031oExqWReYwC8P4f9fFP+UF6u2a/LpY63uiQfLo06HDHtUAOBVjHdwcHO86glfD6HmzZUjOmJnDBSyjGq7JTIBeMVc4zff/4k68cpw5i19yrg6N4v/vYKE2mz/+B9EmjQUSaEFssLEhdLT5n31jdSUE7q6bEX6abibxBfRVSJsg34y8uBsBNYMG5jdSLd8joubKO8lYbMj9BzD5XlE/gKTaF2QO6OCz6mqYOxCxWzlNMZ6w36t5QppdsZeipR0vyIp6JkocwwGWQ2vIIscwSFbZdBOSmh9l5mV+EvqWw8QOmeXStgsWKFLgxK6B/AHJv43U3nOp5iZBo0HTAcr9Qwi7ZZ8/5g992CrgOEnQpbK9Fi3NyKNA20hhhgMJDkQ00WruUNE3QwOBsWKoBsqxcjIiXq9Qx+VUWROnaInhlL46nNF7AysPpdhpJRI4sjgUL3ut3vaUVajW2YMRbQpm+TnlA/4Zo1M+lKWgSFcNR6PM2DPFMFfPwdtLdAijK14Ga91RkjY6zqDWNrbr8XfS7TOYk8bfrj9sncxeZ3X3x/X5S1F3ttzrDhLtkZP9WiyrRC0CZOtlkEgV+axeuZYOtl/lsEIXwcxOGYuBFIVmVE/whDSDRKFj3Zf8Wp6B3aDo6kAHx/g/N9OAdHvN37/nIQU/yhAGV+cGh9ABiTxizd+qee6w3MjMZkPzIYfAOzt9IwCldsk2LP/N6veqqFi/ULHUj87/bfiN7xYFvGgE6bWoybcGKx6AQPKLc9Cw5YM3FzzHLB6ZkZVsyeVaQgRK7WsoExOin2RbppmvsaG6g/k/0u2Xj420O11VnkoDzR+IAYVyRLfCM9i8gFIF8oPc62F07LmDXzddOjicGIyG8SGkJbevIIbURw24ldlT/0NoD8dI0sRux/7pJZnFTHgIwyVRa2xn9fH9QZdUYlGlAUBPKfpgniVSW/8Qf7aRYVc/haFLIT4LoOaQlNjXmAbYwpT8YkD3dfJ7P5UzlR0QWb4olXo9LlA0wM8g2Qja4o6tThBdbk+GJlBU2wWDM6GWoc10JDWXy+yRQHRP5cUoWllUKRGYhEWtbnuXd1m6dKzZV4ctrCMZJCgBqn6gKUfZfDXBIl+IlB83cYFBY/TwxamW5xov0ns+335SVTMhuFFxxDxMcyYJ9t7eajUkINEDtjgm86wB9Wmu+PIj9eNzHQkx1xv+unDMw6d0U9if4eH5RYDp68qMhTgfvKJlmwXrgwNYMzJEbNPmQWLpvFTYjv6tJSTDkD1+OLfOUkUz8BhgoNoj+Pw43EnFffjFl0KElnKMolnRQY9gpaCMm4jozPyDlhBC5itnZGC9CHeLL6Epqov1Qggh79fNCcznVYCBcUidipTFi71yaFtgtZs2h0VSC1QnsiHfSaYIAb0fcuy+R7T+jFVXDTHvUv5rkTlLFx2HHt/ex9ZjptYcqiAU975bOru5TjKXpF+3Ep3/aVIbEpRV/vVsG1I61IWLMecdOLpcsu5lNnjxxAT9mMtmCrcbSsWoS441frbeoOg7pvCdHRzMBlIRRd5mCH2n8oAbu1bgLHQXaL4FxpYIHykIYmm6AWdecpGv36QiYezarICfrWoyLcm85ok18zjtr9kQqd8KTZMPZy0TNYkLUaOBDYW0yT9iuRzZkd4Gi9Q/GXX9I19hmtuINUH1izW8HQOssM1Mz6Nwaub4mawuwb3MjdHHp0wqHTGQhlnrMf8+n2QCYt+XJ/ejDd/v03eWr8rK3Z+NpZvZAjGN4xPEGxeISwueIdHiFy5cpe/q2bVbXIQuduxomPPfpDv/TEqr+ZJQmjeGbo1bFLoEN0RB5zj4jGNy4sTFS80UOdjF70k1je+6U4TbtFCViK3pFqzGMpz8ZPW2Q19ImddAqaKcZgF84QucUtx8tVI1VpFrj1T25sc8HmPeBBbxFqHDWOrmpdnXDRqw6MNmXGRD1aSPBw2IjnrFrCjank0Q0gmym+QWTA5MD4x8Ib0xTq7ghfCziBk0gbJMxgyZhg3Ktg0la0l/d+hoY+RDB1U8+4Qn5DyD4rOIrQfO/jszI4tqnHM0yuJxwD8u9YAl4YJQW2eR7mfZaEaA5MnOZbp1ci51ijpiMXrJbmE1qg9G08Orx89MwsXGCbM80GcsWG8vkDhS5/Cikm5owXwttIf/ivJ1rnvbpK9zAxqYiBWmUF1c2o/nZCntyFaU+xDlhX5gITELEWSg6eWVkJiee83hnkwup4krj4GPbpyo9kIucIwXZk49NKDB7yiJv5qI8rnXT366rFPgsfGPOSq5D3bXCAyRVcJuQAiCM/LcizAtwljOpPGfJRX0Vu6mq02BrNM18gHAPcOHLF+9dXWqbR0+wYXJp+mkvFw15T0vDLKHWfzGaP0oBRJM4dpEme1FY5UUyNJKkyjFeYHeNzHTdxs8uKm/XddPQy2+9T4/WOvik0FclRrqYAh9cwdnTCw9LQx1DqG1Nz31n5iQGgiOTbRpyWuKMtyzj4iTzShwacOUIlExqPNqSZcRaiiMZ2Xfx643wCtw0GUZmPoI7PYXHz9Qnu5JuM/AlK+ccse64J0F1/lPxVPUnaJsAB6J82aQA12fQwdkSnv+TD6XEipbxcGKfvSDU3fLdyith9noMkQvhrsaVqOvHoQ7NfWas9zlU18rwT5zoSuch81XAvICoDHys96sVpMqRjGFiA78d8YwTHwJVHZh8bFXCqd/Ssc7Co3TtiItlvBy3NjtGyx/cDz3/Evgo2xAzuHXpmFCHv7TEI6naK3sBXNPmMtWkIzPFuWkufH7PeBvQkxhBa+XsmxK6VoHmOs/ZRsGDNTt64MnHp9yAj5mhHCIixO1pJGVNuNVhxb7kGue68dYkEpeMZOlWk+L2uaomoec9oHItuJAkpY/bhsKGmKXUXlD+Fglm24kz35X0hUuS9+MJJqSIYaOEGsJtOVPV/it+oCt/6lCjKOYW/MEnyIcU/CiJsJrs5oiRXtlzy8ObGHZ7FommUHu+QqkWl0GfEyeIR/TxpvWhwUadEbEK5p4deePsOJOAAHxM1Iul+mlYuzrYh/UHx/wUZaa0cUZ39T1QpkDBHbDW1OMUXeo/6G3IhEEI6M30l3wf9FyjM7/NMQuugWHHpGdGlbLUiuBB9XtsGlsVbV2XhFv2IyuYgFysCoZbPqn4FjlBuEw0kqVRk4mucE7FRvsSCFZ7uTDAG6nR3AN72LLw3RGeABadPg05k1saLkOCMzNfUYv8cR+86JfGHaVpfk4Ks1OST31VbFk7u8OVCaEVPg/3RZ38ZBGYC25nGsCHmtx4gFU8d4lf6iUaQHUDrIWuvbkIDaZ2vPKmWDuKSRkEPg/E/AbKSc302cTsblA2LW3lmGpBwNQE+WpS0ghHRd1VmrrOwCg4Gyu8DW0SyYHdcIImhlm6PuZht1RDfuSttlrXJsC7ZWQF00RzevxXYa59PYApZ6fjmFZyaOk9629qz3Avnc1rGqt+YWNpGv6dqQFBEf7ryHpegNPtNAfqx6O4ZFcrbeY6pbgAGPeJe3iNzB9OTfTmhOsMvB3S69OnpNL+0npdtH4yNz5lJ8Jl6XOafa3h8eucymCeSvOk6HFMf03KmrceDXW9OccuE802IZCkyzdnFSAovj5R5RzLoRmLPUctv2BQcnJPU2Z5rHNmby7RbyGUJ5C6isTjUEHq5GaG4zBFgG+Us2f5vUWKJlloFrz0tLSK2quCIVE2t5MlJnuqhmAZYq/mYEFNi0CaaFmPzMKJ9lGlKovxCkMzvKQ0GN4Zx3sIUZtzR1xMcF0/sXfLKkmIQs7ZZyXkqqzk9+dIleOIMIzO2eGLJLzpWAf9EGr98Pohm8WP13n5gG3uuwm3t21iBFkSiI8NIF5sj23A4e8G/yz77kLOuXm253naBjVNoELQORJRVVydvzNf/ISbKbe8bOOWJtECI1I17bXgWR6CWYpT5rIxaPlQAOo8xOz5TBsVBfPbAE/B601DuF0JVTw8QUpud8f907rdODrRCjMw0dNOWPTh/IHUAB/Z9Kad8oLTYzXguyaOXmfvOEbn6ow+IQioG1rRvJOVAF0Qmetn9qP6IsI7nt+CAXwLxVWrNv45whbmXyXylHcJ5A8PBj4pQ+kY1KDqNWWONPlHHR8/xe29PiAmP0BvSBiun9MdgZWtGVUkc28LhjibnU8wa8Sr5Dq7BYuUBHNAZqHBgzJ0iZAI2qpymr/IgiikLeT8tI5dBwMjoJdxdcwDWnMCpEIJsFoyNLQ9Mawbo7Dk3p1ikQ5mkS7psR3hPRxLg1Va9g/0qjIK4A1+Z6TCk+xUF9+sMR6dZpzF4hzLVMmCKxW+SJFJa+FQhurTeaDfZABcIyyKzaN0LBa7cvLB0rayXY5JfCveK191CnMMyTDXLwhTK7i6Q9k+bMaWn3CNBjVQ6VAAdqIU/s1QghG9HDZCFZFkGvEFm6bkIy9Jt+dMps1Gq4c2dfGtLpWArqMbg4Lyd/Hh7BeYaNs9pG2B/8Cdvlj3g/oOvtvs+eXVqo5cwEz7UdPBxLg0484zDRFEb5delRBp1FTXcIHPo2Tlx+UpquyPS/B95ufCok/FvmidBrnkobwkryUchcjS89ABJ3LQbUiTgx40s6L9BOtraTSCQYtFY7ONIN8AoqHnVQq0iQuQ+0J3Czzp6/Yx1uoBQ/0mY2nrVqsx27f8+e4QW04lIkRAhjQF09KNiS4IBqQ3WHXuLkEio1Tvv5HDShX0VR4gFQrMueZWPVdjNHaHnV7nWJTiT1YJ/aV6jygek3mD3WkZitrGvyvtqPfc1EdQIKcby61vAf18iYJsR5hHDHZ8Ml54lfyy2yL4rIuBA+j2tSeI8mkI5hlrLHKwx97U0sKfAbLBVNIgRJTxW/ztDdJCAf+wo2M/pAp4vNPd+BlFhP1MjuS3QyYBohTWVwSI+nz6H2TikAiQ9uah2oGliyRvaRGuLR0h9nPj1yr7WSVgJFjId2ib4Z+zEJO/GlTT4xfBXlb1JZQujUxzKDhfJFdaKyO0PCVFfwsh7Il47G6AVib5K+nnb+3sZmmPrsph8vj2pJ2ilZfYBtCr+A7P/dygYnsrxurKxiE5hu8wdmsc/tFeJJK00NIkmZsWY6Iymqzlhlkwi+FdTPQ1Ud5BX16Ct16VvDlHqnWB9RlubGA/Gs9XKN1DYjAwmNj0pDZ20kDnXFQvxUU7muXfrDG7TmxqHasxhkXMmb9bBy0eEqd+FpgvPwpH209gEt+xwnDDoO1Nw64ccsRy+ufJm4fY8qeufMB0uICQTbTKtfPT5dD0kd8HCTa83s8aQFaq+BR8Xy0hlwi7HL/1J6Ye86zurb12wcRW1sPGSAVPUM/8dN90sDoPoew3znflIhiGMDLSiaUqjluengwJsGyP4L6wq634tWhzYLVd3RWtKcCiqzevZtAwM8FI/vlXYZdiiCWJDGxO59rgKGWQ1wCPPwoB8Y193qeAifdt1w1JnXRCAO6AiVZMCICXRLi55IuNWtcmr1Ys88SMT4G5dHNjfoiOWdFcJnvK7caC8XrjuW1cOBSD81FbD+xVlrF//ko0u2DYKPcKbr3AawGRRm+WcD8Y6wmwInmA5xGHJpZLDyTZtHGXwTJ+u8eMLT7/p6l7yz3d9/mcFbtfdy4SvndhHumvVVqEng8H2gMoS8LkC+Tluit5WPa6x3+Ck1RrEP4Hj1wHL+uGxUgOTya8GbXDZZpiWzduipqXrzK80a9iuX2QM5lkb3gpGGCtrEFCl1zFytH8oNUWImofWmo16HVU5EFRgU6ru8uvad4eGjNtkvJbvgpv5PbaD8P6lKLg8OxYeMkhzMHi+VzZ/TBMTNJ2xte86kF0jNkO7gHFOn3wPiN2hcSWNeFSWccnjrgWOiDGy783hiIdspPRylyrV1kTFHSON2MRqXrKeP3ZWjUsWf4qAACJKhlkgZhAxvRJYx6yPgvjJjUZfVDc4AjtwvwEbnZJvfZypyec7R6elSJtTxwkvn2b7tKG4AGzP59eDWTcYFuxempxiL77RnnPdXscFkCWxRTMKTg2SBUhDpr9P857mHwXtDJEpy3zvhaPuv7/ga9UpCSv6A1m3zixmPYbUae613hmOySVL4v7xaG74muoDHUM9JZGVUVQ9q4QagMwVo0O0NzMgSoLw+RYfgYxoUeqtjf/mF/igHm7lVD1Xmebq3nPZSTeLofjD8Ly0vKQ58fo9X/6OEfOqHbs3tbZBRgYdjSUEkY+qOa8mrW2VeUW0Rfx/kZubLWcaFAKLy2zOa+Q/pMb3/Y+kdXqMdozzB2jDLKnZ0Q99dCF1iRq3kt07oyS4olH7EMMKpJoEwZjqsqhA1Wmg0XFj4LOd2zfSuvdQz67VLQ+zGN30lfZAgfIr9gCitfcgqLYi03912iTNfjDcUTBT1QmU5PbVIOQJE9WsRckQ91/RO/9GQ0QtgjpL5E4CmWiLqPsaBk9t2xb5c+MKZDf4VrmNLfrG9YG9Djmmymy8MFB29//rXPHHdS91zLWA/j4witG6yaeWQ/3x7MNdG6oUvmvk2xUPOg7luNmSjdTG8qp9zTLKcMnUR8aPcQ66h3kT+fgf6L1AL1kwil+eTjfbR8GWGX6wS26f8dbVuz+eWtpao2wqsLljbBX3Jd7yErOG54H7XcjT9/QYo4WusrWW5G+uKwuUA15Rtnr2oyarVduZV6+KNPb4KBqBJTFEZa+GO/WPuYXf1zSKOYvY7aHblod1AgYA1BAo7t7c3c6Zjjnm310mWGPgDv7yk1A2qX4QfT6oJQrPDeirlQ/bafdf9PouS/reAOkELVTRMm3qtU9dNYQx7/RgXDDx8Af38BMbb4TZlv28ngpi3wtqKQ8KjHjYAammC8C/NAOMLZ6o2LFZSlsvc7scYtSnmta1sPwyzTSPube0Qssfxkc8DtGEofNdixZG9LUmd42NhYYf+szxYekAmUr6n5McA6tmI20ySIQdl3iU347Zz6SxY4AHqW/pOxCH7aQLjvesff8YuKFm9gkI+K5/NTuLhoWNwTxlMpe81KzaiiaWYQACg7zjaQABm1g/KLUOvuqN4xvaWLuET83tlztPDzqfWW3bTOe2125Q9novZioCxwmHdXRVmQTDZ2MfsxtGsbBPw2XSJhIpFE6WeD/2IOaXSMrt9VpHieOqofDT8lvNV27fjxUWuf7c1xeVHuy+MhZ3r+eptOiDA/Ula4tbkzOTfBVIZ2EpseqCgxe7AHkw0UrW6WlnA9Fqutsmkd7hGKAlumO/ffH//Ez//zSyf/+Nqh0QSRxkbSRRp/ekFfP8Fx885wgTI2QrHLkon0pnK4TwfGmi+ogf9rPXfcoWvJZj2dqcPddexlJicEcMCCo1vgS+YCFfefF/yEATdHZWjeMwGwPUMg0RshGW1AbDbkZLQ+XBy1Bd3JJIeeFdZrDOqxagAAA=); background-repeat: no-repeat; background-size: contain; display: flex; position: absolute; font-size: 15px!important; line-height: 145%!important } #didomi-host .didomi-notice-banner:after { top: var(--cookie-spacing-md); left: var(--cookie-spacing-xl); content: var(--cookie-banner-title); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 50px; color: var(--color-white,#fff); align-items: center; font-size: 24px; font-weight: 700; display: flex; position: absolute } #didomi-host .didomi-notice-banner .didomi-notice-text { color: var(--color-white,#fff); margin-top: 10px; font-family: inherit; font-size: 15px!important; line-height: 150%!important } #didomi-host .didomi-notice-banner .didomi-notice-text a.didomi-notice-view-partners-link { margin-top: 10px; display: block } #didomi-host .didomi-notice-banner .didomi-notice-text a.didomi-notice-view-partners-link-in-text { color: var(--color-white,#fff)!important } #didomi-host .didomi-consent-popup-title span { font-size: 20px!important } #didomi-host .didomi-consent-popup-body__explanation span { font-size: 16px!important; line-height: 145%!important } #didomi-host .didomi-consent-popup-body__explanation span a { align-items: center; gap: var(--cookie-spacing-xs); display: inline-flex } #didomi-host .didomi-consent-popup-body__explanation span a svg { display: inline-block; transform: translateY(-6px) } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-purposes .didomi-consent-popup-data-processing__purpose_actions { background: var(--cookie-consent-bg-dark) } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-purposes .didomi-consent-popup-data-processing__description { background: var(--cookie-consent-bg-dark); padding-inline:var(--cookie-spacing-sm);padding-top: 2px; padding-bottom: 2px } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-purposes .didomi-consent-popup-data-processing__purpose[aria-expanded=true] { background: var(--cookie-consent-bg-dark) } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-purposes .label-click.didomi-consent-popup-data-processing__purpose[aria-expanded=true] { background: var(--cookie-consent-bg-dark) } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-purposes .didomi-consent-popup-purpose .didomi-consent-popup-vendor__description { background: var(--cookie-consent-bg-medium); color: var(--color-white,#fff); border-color: #0000 } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-purposes .didomi-consent-popup-purpose .didomi-consent-popup-vendor__description .didomi-vendors-details-title { text-decoration: none } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-purposes .didomi-consent-popup-purpose .didomi-consent-popup-vendor__description ul li { list-style-type: circle } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-purposes .didomi-consent-popup-categories .didomi-consent-popup-data-processing .didomi-consent-popup-data-processing-illustrations { background: var(--cookie-consent-bg-darker); border: none; font-size: 12px!important; line-height: 145%!important } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-purposes .didomi-consent-popup-categories .didomi-consent-popup-data-processing__purpose span { color: var(--color-white,#fff); font-weight: 400 } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-view-vendors-list .didomi-consent-popup-view-vendors-list-link { color: var(--color-primary,#2b3749)!important } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-vendors .didomi-consent-popup-header .didomi-consent-popup-title .didomi-arrow-back-popup-preferences-vendors { display: inline-block; transform: translateY(-1px) } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-vendors .didomi-consent-popup-vendor.didomi-consent-popup-container-click-all { background: var(--cookie-consent-bg-dark) } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-vendors .didomi-consent-popup-vendor .didomi-consent-popup-vendor__description { color: var(--color-white,#fff); border-color: #0000 } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-vendors .didomi-consent-popup-vendor .didomi-consent-popup-vendor__description .didomi-vendors-details-title { text-decoration: none } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-vendors .didomi-consent-popup-vendor .didomi-consent-popup-vendor__description ul li { list-style-type: circle } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-vendors .didomi-consent-popup-body_vendors-list { background: var(--cookie-consent-bg-medium) } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-vendors .didomi-user-information-trigger { margin-top: var(--cookie-spacing-md); background: var(--cookie-consent-bg-dark) } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-preferences-vendors .didomi-user-information-container { background: var(--cookie-consent-bg-medium) } #didomi-host .didomi-consent-popup-preferences a { color: var(--color-white,#fff)!important; font-weight: 400!important } #didomi-host .didomi-consent-popup-preferences a:not(.didomi-no-link-style) { color: var(--color-white,#fff)!important; font-weight: 400!important } #didomi-host .didomi-consent-popup-preferences svg path { fill: var(--color-white,#fff) } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-header .didomi-consent-popup-title { color: var(--color-white,#fff) } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-body__title { color: var(--color-white,#fff); font-size: 18px } #didomi-host .didomi-consent-popup-preferences .didomi-components-radio__option { border: 1px solid var(--color-white,#fff); border-radius: var(--cookie-radio-radius); color: var(--color-white,#fff); background: 0 0; justify-content: center; align-items: center; display: inline-flex } #didomi-host .didomi-consent-popup-preferences .didomi-components-radio__option.didomi-components-radio__option--selected.didomi-components-radio__option--disagree { background-color: var(--color-warning,#e52a00) } #didomi-host .didomi-consent-popup-preferences .didomi-components-radio__option.didomi-components-radio__option--selected.didomi-components-radio__option--agree { background-color: var(--color-success,#00a184) } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-view-vendors-list-link { border: 1px solid var(--color-white,#fff); border-radius: var(--cookie-radio-radius); color: var(--color-white,#fff); background: 0 0; justify-content: center; align-items: center; display: inline-flex } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-view-vendors-list-link.didomi-components-radio__option--selected.didomi-components-radio__option--disagree { background-color: var(--color-warning,#e52a00) } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-view-vendors-list-link.didomi-components-radio__option--selected.didomi-components-radio__option--agree { background-color: var(--color-success,#00a184) } #didomi-host .didomi-consent-popup-preferences .didomi-buttons-all-container button:not(:disabled) { background-color: var(--cookie-consent-bg-color) } #didomi-host .didomi-consent-popup-preferences .didomi-buttons-all-container button:disabled { opacity: .3; background-color: var(--cookie-consent-bg-color) } #didomi-host .didomi-consent-popup-preferences .didomi-consent-popup-information-save { color: var(--cookie-consent-bg-color) } #didomi-host .didomi-consent-popup-preferences .didomi-popup-actions-container { padding-block:var(--cookie-spacing-xs)} /*$vite$:1*/ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/roboto-v50-latin-300.woff2") format("woff2") } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-v50-latin-regular.woff2") format("woff2") } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/roboto-v50-latin-700.woff2") format("woff2") } @font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-mono-v31-latin-regular.woff2") format("woff2") } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts//montserrat-v31-latin-regular.woff2") format("woff2") } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-v31-latin-600.woff2") format("woff2") } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-v31-latin-700.woff2") format("woff2") } @font-face { font-family: "edclubfont"; src: url("../fonts/edclubfont.woff") format("woff2"),url("/m/edclubfont/edclubfont.ttf?v2wd8d") format("truetype"),url("/m/edclubfont/edclubfont.woff?v2wd8d") format("woff"),url("/m/edclubfont/edclubfont.svg?v2wd8d#edclubfont") format("svg"); font-weight: normal; font-style: normal } [class^=edicon-],[class*=" edicon-"] { font-family: "edclubfont" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .edicon-check-mark:before { content: "" } .edicon-arrow-up:before { content: "" } .edicon-arrow-down:before { content: "" } .edicon-keyboard22:before { content: "" } .edicon-pause:before { content: "" } .edicon-play:before { content: "" } .edicon-alert:before { content: "" } .edicon-flash:before { content: "" } .edicon-refresh:before { content: "" } .edicon-keyboard:before { content: "" } .edicon-settings:before { content: "" } .edicon-hand:before { content: "" } .edicon-sound2:before { content: "" } .edicon-theme:before { content: "" } .edicon-notice:before { content: "" } .edicon-both-hands:before { content: "" } .edicon-left-hand:before { content: "" } .edicon-right-hand:before { content: "" } .edicon-layout-keyboard-icon:before { content: "" } .edicon-lock:before { content: "" } .edicon-play2:before { content: "" } .edmodal { position: fixed; top: 0; right: 0; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5) } .edmodal.scrollable { display: block; padding: 10vh 0; overflow: auto } .edmodal.scrollable .edmodal-box { margin: auto; max-height: inherit } .edmodal-box { box-shadow: 0 0 20px #555; max-height: 80%; overflow: auto; background: #fff; outline: none } .edmodal-x { float: right; cursor: pointer; font-family: arial; font-size: 24px; line-height: 24px; padding: 5px; margin: -20px } .edmodal-enter .edmodal { background: rgba(0,0,0,0) } .edmodal-enter .edmodal-box { transform: scale(0.95); opacity: .8 } .edmodal-enter.edmodal-enter-active .edmodal { background: rgba(0,0,0,.5); transition: all 600ms ease-out } .edmodal-enter.edmodal-enter-active .edmodal-box { transition: all 100ms ease-out; transform: scale(1); opacity: 1 } window,html,body { margin: 0px; padding: 0px; background: #fff; color: #555; height: 100% } .container,[role=main],[role=region] { outline: none } .noscroll-body { overflow: hidden } .ed-card { background: #fff; position: absolute; top: 50%; left: 50%; box-shadow: 0 0 4px #999; border-radius: 5px; min-width: 10px; min-height: 10px; padding: 20px; opacity: 0; -webkit-transition: .3s ease-out all; -moz-transition: .3s ease-out all; -ms-transition: .3s ease-out all; transition: .3s ease-out all } .ed-paper { outline: none; background: #fff; border-radius: 5px; padding: 30px; box-shadow: 0 0 4px #999; margin-bottom: 20px } .ed-paper h3:first-child { margin-top: 0px } .ed-paper h3+form { margin-top: 30px } .ed-paper-header { margin: 0 0 20px 0 } .dark-body { background-color: #f5f5f5 } .darker-body { background-color: #555 } label { font-weight: 500 } a { cursor: pointer; text-decoration-color: #353535; text-decoration-thickness: 2px; } h1,h2,h3,h4,h5,h6 { font-family: Roboto; font-weight: normal } .text-primary { color: #4682b4 } .container.content-top { padding-top: 80px } video::-internal-media-controls-download-button { display: none } video::-webkit-media-controls-enclosure { overflow: hidden } video::-webkit-media-controls-panel { width: calc(100% + 30px) } #adslot_1,#adslot_2 { box-sizing: border-box; display: flex; align-items: center; flex-direction: column; justify-content: center; overflow: hidden; padding-bottom: 33px; padding-top: 18px } .disable-ads-banner { white-space: nowrap; text-align: center; opacity: 0 } .disable-ads-banner>a { line-height: 1.4; padding: 0 4px; color: #000; text-decoration: none } .disable-ads-banner>a>i { font-size: 1.5em } .disable-ads-banner:hover a { color: #fff; text-shadow: 0 0 5px #000 } .freestar_report_button { height: 0; margin-bottom: -15px !important } .dropdown-menu { display: block; max-height: calc(100vh - 150%); overflow-y: scroll } .banner-button { display: block; position: relative; background: #5293e2; color: #fff; font-family: arial,sans-serif; font-size: 16px; padding: 5px 15px; margin: 0 auto; border: none; z-index: 1000; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 0 0 2px 3px rgba(0,0,0,.2); outline: none } .banner-button>i { font-size: 1.4em; vertical-align: middle; padding-right: 5px } .banner-button:hover { background: #2576da } .navbar-collapse.in { overflow: visible } .navbar-collapse.in>ul { display: block !important } .list-item-select { display: block; cursor: pointer; background: #fafafa; padding: 10px 15px; border-bottom: 1px solid #ddd; color: #444; font-size: 17px } .list-item-select b { display: inline-block; border-radius: 50%; width: 30px; height: 30px; text-align: center; margin-right: 15px; color: #fff; font-weight: normal; font-size: 20px; vertical-align: middle } .list-item-select:hover { background: #ddd; color: #444; text-decoration: none } .sticky-keys-alert { background: #eee; border-radius: 5px; padding: 8px 13px 5px; margin: 15px -10px -10px } .sticky-keys-alert>a { font-weight: 400 } .hspacer { display: inline-block; width: 15px } .btn-margin-left { margin-left: 10px } .rtl-body { direction: rtl } .rtl-body .performance-results .st19 { font-size: 16px } .rtl-body .btn-margin-left { margin-left: inherit; margin-right: 10px } .rtl-body .pull-left { float: right !important } .rtl-body .pull-right { float: left !important } .rtl-body .hdrlt.compact>.container { text-align: left } .rtl-body .hdrlt .htext.profile-name { text-align: left } .rtl-body .hdrlt .menu-btn:hover span:nth-child(1) { transform: rotate(-15deg) } .rtl-body .hdrlt .menu-btn:hover span:nth-child(2) { transform: rotate(-45deg) } .rtl-body .hdrlt .menu-btn:hover span:nth-child(3) { transform: translateX(11px) rotate(-77deg) } .rtl-body .hdrlt .header-options .header-item.active .dropdown-panel { right: inherit; left: -30px } .rtl-body .hdrlt .settings-panel { text-align: right } .rtl-body .hdrlt .settings-panel input.flip-switch+div { margin: 4px 40px 4px 10px } .rtl-body .hdrlt .settings-panel .dropdown_panel { margin-left: inherit; margin-right: -250px } .rtl-body .TPCMN .pause-tooltip { margin-left: 26px } .rtl-body .TPCMN .pause-tooltip:before { margin-right: 5px; margin-left: -31px } .rtl-body .TP_APP1 .drop-banner { left: inherit; margin-left: 0; right: 50%; margin-right: -560px } .rtl-body .TP_APP1 .classic-typing-container .stats { float: left; text-align: right; transform: translateX(200px) } @media only screen and (max-width: 980px) { .rtl-body .TP_APP1 .classic-typing-container .stats { transform:translateX(100px) } } @media only screen and (max-width: 860px) { .rtl-body .TP_APP1 .classic-typing-container .stats { transform:translateY(-69px) } } @media only screen and (max-width: 1570px) { .rtl-body .TP_APP1 .classic-typing-container.with-ads .drop-banner { right:inherit; left: 1260px } } @media only screen and (min-width: 1340px)and (max-width: 1520px) { .rtl-body .TP_APP1 .classic-typing-container.with-ads .drop-banner { right:170px; margin-right: 0; left: inherit } } @media only screen and (max-width: 1339px) { .rtl-body .TP_APP1 .classic-typing-container.with-ads .drop-banner { right:20px; margin-right: 0 } } .rtl-body .TP_APP1 .classic-typing-container.with-ads #adslot_1 { left: 0; right: inherit } .rtl-body .TP_APP1 .classic-typing-container.with-ads #adslot_2 { right: 0; left: inherit } @media only screen and (max-width: 1570px) { .rtl-body .TP_APP1 .classic-typing-container.with-ads { margin-left:330px; margin-right: auto } } @media only screen and (min-width: 1340px)and (max-width: 1520px) { .rtl-body .TP_APP1 .classic-typing-container.with-ads { margin-right:280px; margin-left: auto } } @media only screen and (max-width: 1339px) { .rtl-body .TP_APP1 .classic-typing-container.with-ads { margin-right:130px } } @media only screen and (max-width: 1255px) { .rtl-body .TP_APP1 .classic-typing-container.with-ads { margin-right:40px } } .rtl-body .classic-typing-container.xxlarge { margin-left: initial; margin-right: 125px } .rtl-body .classic-typing-container.xxlarge .drop-banner { left: inherit; right: 20px } @media only screen and (max-width: 1200px) { .rtl-body .classic-typing-container.xxlarge { margin-left:initial; margin-right: 30px } } .rtl-body .DSHBRD #adslot_1 { margin-left: inherit; margin-right: auto } .rtl-body .edmodal-x { float: left } .rtl-body .btn .icon-chevron-left:before { content: "" } .rtl-body .btn .icon-chevron-right:before { content: "" } .rtl-body .keyboard-assist-modal .keyboard-identified { transform-origin: 100% 0 } .rtl-body .edicon-layout-keyboard-icon:before { float: right } .rtl-body .keyboard-popup { position: fixed; left: 15px } .rtl-body #instruction .boxed-typing-lines .boxed-line>span:first-child { margin-left: .7em !important; margin-right: 0 !important } .rtl-body #instruction .boxed-typing-lines .boxed-line>span .cursor { right: 0; left: 100% } @media(max-width: 780px),(max-height: 700px) { .rtl-body #instruction .intro-keyboard { margin-left:inherit; margin-right: -95px } } .rtl-body #instruction #instructions.junior .boxed-typing-lines .boxed-line>span:first-child { margin-left: .28em !important } .rtl-body .LPVIEW .scroll_look { margin-right: 9px; margin-left: inherit } .rtl-body .LPVIEW .scroll_look .page_number { margin-left: inherit; margin-right: -4px } .rtl-body .LPVIEW .scroll_look:not(.is_active) .page_number { margin-left: inherit; margin-right: -32px } .rtl-body .LPVIEW .lsn_name { margin-left: inherit; margin-right: -10px } .rtl-body .LPVIEW .has_progress .platinum-star { right: inherit; left: 8px } .rtl-body .LPVIEW .boxicon [class*=e-] { margin-left: inherit; margin-right: 20px } .rtl-body .LPVIEW .lessonblock-lock { left: inherit; right: 110px } .rtl-body .LPVIEW .lparena { padding-left: 100vw; margin-right: -50vw; padding-right: 50vw } .rtl-body .LPVIEW .lessons-nav { left: 20px; right: inherit } .rtl-body .LPVIEW .lesson-nav-btn-menu { text-align: left } .rtl-body .LPVIEW .lesson-nav-btn-menu:hover { margin-left: inherit; margin-right: -140px } .rtl-body .LPVIEW .lesson-nav-btn-menu span { right: inherit; left: 37px } .rtl-body .LPVIEW .bubble_look { margin: 22px 7px 22px 0 } .rtl-body .LPVIEW .bubble_look .page_number { margin-left: inherit; margin-right: -4px } .rtl-body .LPVIEW.with-ads #adslot_1,.rtl-body .LPVIEW.with-ads #adslot_2 { right: inherit; left: 20px } @media only screen and (max-height: 1020px) { .rtl-body .LPVIEW.with-ads #adslot_1,.rtl-body .LPVIEW.with-ads #adslot_2 { right:inherit; left: 0 } } @media only screen and (max-height: 720px) { .rtl-body .LPVIEW.with-ads #adslot_1 { right:inherit; left: 20px } } .rtl-body .LPVIEW .placementtest-tooltip { right: inherit; left: 33px } .rtl-body .LPVIEW .placementtest-tooltip:before { display: none } .rtl-body .edheader .flag-box .flag { margin-left: inherit; margin-right: -6px } .rtl-body .edheader .nav-dropdown-content { margin: 2px 10px 10px 0 } .rtl-body .edheader .nav-dropdown-thumbnail { float: left } .rtl-body .first_lesson_intro { display: none } @media(min-width: 768px) { .rtl-body .navbar>.container .navbar-brand { margin-left:inherit; margin-right: -15px } .rtl-body .navbar-header { float: right } .rtl-body .navbar-nav { float: right } .rtl-body .navbar-nav>li { float: right } .rtl-body .navbar-right { float: left !important } .rtl-body .navbar-right .dropdown-menu { left: 0; right: auto } .rtl-body .col-sm-8,.rtl-body .col-sm-4,.rtl-body .col-sm-1,.rtl-body .col-xs-4,.rtl-body .col-xs-8,.rtl-body .col-xs-5,.rtl-body .col-xs-7 { float: right } .rtl-body .form-horizontal .control-label { text-align: left } } @media(min-width: 992px) { .rtl-body .col-md-4,.rtl-body .col-md-8,.rtl-body .col-md-12,.rtl-body .col-md-5,.rtl-body .col-md-7,.rtl-body .col-md-3 { float:right } } .rtl-body ul.left-side-stats { margin: 0 0 0 25px } .rtl-body ul.left-side-stats li { padding-right: inherit; padding-left: 90px } .rtl-body ul.left-side-stats li label { left: 0; right: inherit } .rtl-body ul.left-side-stats.smaller-labels li { padding-right: inherit; padding-left: 120px } .rtl-body ul.left-side-stats.smaller-labels li label span { float: right; margin-left: 20px } .rtl-body .nav { padding-right: 0 } .rtl-body .navbar-brand { float: right } .rtl-body .navbar-toggle { float: left; margin-right: inherit; margin-left: 15px } .rtl-body .dropdown-menu { text-align: right } .rtl-body .speed-progress-bar { padding-right: 0; padding-left: 70px } .rtl-body .speed-progress-bar .speed-title { left: inherit; right: 0 } .rtl-body .speed-progress-bar .speed-label { right: inherit; left: 0 } .rtl-body .speed-progress-bar .speed-track>div { transform: rotateY(180deg); left: 0 } .rtl-body .scoreboard-item .name { text-align: left } .rtl-body .stats-helpbox>i { padding-right: inherit; padding-left: 15px } .rtl-body .progress-wpm-n-acc>div:first-child { right: 0; left: inherit } .rtl-body .kb-keys>svg { transform: rotateY(180deg) } .rtl-body .calendar-stats h5,.rtl-body .calendar-stats h6 { text-align: right } .rtl-body .calendar-stats .cell.totals { margin-left: inherit; margin-right: 12px } .rtl-body .calendar-stats .months>div { text-align: right } .rtl-body .calendar-stats .months>div hr { left: 30px; right: inherit } .rtl-body .PLTEST .placement-progress { border-left: none; border-right: solid 75px #64e5c7 } .rtl-body .PLTEST .placement-progress .lesson-label { right: inherit; left: 25px } .rtl-body .PLTEST .placement-progress .lesson-flag { right: inherit; left: 0; transform: rotateY(180deg) } .farsi-font .boxed-typing-lines { font-family: "YekanBold" } /*! Hint.css - v2.4.1 - 2016-11-08 * http://kushagragour.in/lab/hint/ * Copyright (c) 2016 Kushagra Gour */ [class*=hint--] { position: relative; display: inline-block } [class*=hint--]:before,[class*=hint--]:after { position: absolute; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: hidden; opacity: 0; z-index: 1000000; pointer-events: none; -webkit-transition: .3s ease; -moz-transition: .3s ease; transition: .3s ease; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; transition-delay: 0ms } [class*=hint--]:hover:before,[class*=hint--]:hover:after { visibility: visible; opacity: 1 } [class*=hint--]:hover:before,[class*=hint--]:hover:after { -webkit-transition-delay: 100ms; -moz-transition-delay: 100ms; transition-delay: 100ms } [class*=hint--]:before { content: ""; position: absolute; background: rgba(0,0,0,0); border: 6px solid rgba(0,0,0,0); z-index: 1000001 } [class*=hint--]:after { background: #383838; color: #fff; padding: 8px 10px; font-size: 12px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; line-height: 16px; text-align: left; white-space: pre } [class*=hint--][aria-label]:after { content: attr(aria-label) } [class*=hint--][data-hint]:after { content: attr(data-hint) } [aria-label=""]:before,[aria-label=""]:after,[data-hint=""]:before,[data-hint=""]:after { display: none !important } .hint--top-left:before { border-top-color: #383838 } .hint--top-right:before { border-top-color: #383838 } .hint--top:before { border-top-color: #383838 } .hint--bottom-left:before { border-bottom-color: #383838 } .hint--bottom-right:before { border-bottom-color: #383838 } .hint--bottom:before { border-bottom-color: #383838 } .hint--left:before { border-left-color: #383838 } .hint--right:before { border-right-color: #383838 } .hint--top:before { margin-bottom: -11px } .hint--top:before,.hint--top:after { bottom: 100%; left: 50% } .hint--top:before { left: calc(50% - 6px) } .hint--top:after { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%) } .hint--top:hover:before { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px) } .hint--top:hover:after { -webkit-transform: translateX(-50%) translateY(-8px); -moz-transform: translateX(-50%) translateY(-8px); transform: translateX(-50%) translateY(-8px) } .hint--bottom:before { margin-top: -11px } .hint--bottom:before,.hint--bottom:after { top: 100%; left: 50% } .hint--bottom:before { left: calc(50% - 6px) } .hint--bottom:after { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%) } .hint--bottom:hover:before { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px) } .hint--bottom:hover:after { -webkit-transform: translateX(-50%) translateY(8px); -moz-transform: translateX(-50%) translateY(8px); transform: translateX(-50%) translateY(8px) } .hint--right:before { margin-left: -11px; margin-bottom: -6px } .hint--right:after { margin-bottom: -14px } .hint--right:before,.hint--right:after { left: 100%; bottom: 50% } .hint--right:hover:before { -webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px) } .hint--right:hover:after { -webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px) } .hint--left:before { margin-right: -11px; margin-bottom: -6px } .hint--left:after { margin-bottom: -14px } .hint--left:before,.hint--left:after { right: 100%; bottom: 50% } .hint--left:hover:before { -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); transform: translateX(-8px) } .hint--left:hover:after { -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); transform: translateX(-8px) } .hint--top-left:before { margin-bottom: -11px } .hint--top-left:before,.hint--top-left:after { bottom: 100%; left: 50% } .hint--top-left:before { left: calc(50% - 6px) } .hint--top-left:after { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%) } .hint--top-left:after { margin-left: 12px } .hint--top-left:hover:before { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px) } .hint--top-left:hover:after { -webkit-transform: translateX(-100%) translateY(-8px); -moz-transform: translateX(-100%) translateY(-8px); transform: translateX(-100%) translateY(-8px) } .hint--top-right:before { margin-bottom: -11px } .hint--top-right:before,.hint--top-right:after { bottom: 100%; left: 50% } .hint--top-right:before { left: calc(50% - 6px) } .hint--top-right:after { -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0) } .hint--top-right:after { margin-left: -12px } .hint--top-right:hover:before { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px) } .hint--top-right:hover:after { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px) } .hint--bottom-left:before { margin-top: -11px } .hint--bottom-left:before,.hint--bottom-left:after { top: 100%; left: 50% } .hint--bottom-left:before { left: calc(50% - 6px) } .hint--bottom-left:after { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%) } .hint--bottom-left:after { margin-left: 12px } .hint--bottom-left:hover:before { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px) } .hint--bottom-left:hover:after { -webkit-transform: translateX(-100%) translateY(8px); -moz-transform: translateX(-100%) translateY(8px); transform: translateX(-100%) translateY(8px) } .hint--bottom-right:before { margin-top: -11px } .hint--bottom-right:before,.hint--bottom-right:after { top: 100%; left: 50% } .hint--bottom-right:before { left: calc(50% - 6px) } .hint--bottom-right:after { -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0) } .hint--bottom-right:after { margin-left: -12px } .hint--bottom-right:hover:before { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px) } .hint--bottom-right:hover:after { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px) } .hint--small:after,.hint--medium:after,.hint--large:after { white-space: normal; line-height: 1.4em; word-wrap: break-word } .hint--small:after { width: 80px } .hint--medium:after { width: 150px } .hint--large:after { width: 300px } [class*=hint--]:after { text-shadow: 0 -1px 0px #000; box-shadow: 4px 4px 8px rgba(0,0,0,.3) } .hint--error:after { background-color: #b34e4d; text-shadow: 0 -1px 0px #592726 } .hint--error.hint--top-left:before { border-top-color: #b34e4d } .hint--error.hint--top-right:before { border-top-color: #b34e4d } .hint--error.hint--top:before { border-top-color: #b34e4d } .hint--error.hint--bottom-left:before { border-bottom-color: #b34e4d } .hint--error.hint--bottom-right:before { border-bottom-color: #b34e4d } .hint--error.hint--bottom:before { border-bottom-color: #b34e4d } .hint--error.hint--left:before { border-left-color: #b34e4d } .hint--error.hint--right:before { border-right-color: #b34e4d } .hint--warning:after { background-color: #c09854; text-shadow: 0 -1px 0px #6c5328 } .hint--warning.hint--top-left:before { border-top-color: #c09854 } .hint--warning.hint--top-right:before { border-top-color: #c09854 } .hint--warning.hint--top:before { border-top-color: #c09854 } .hint--warning.hint--bottom-left:before { border-bottom-color: #c09854 } .hint--warning.hint--bottom-right:before { border-bottom-color: #c09854 } .hint--warning.hint--bottom:before { border-bottom-color: #c09854 } .hint--warning.hint--left:before { border-left-color: #c09854 } .hint--warning.hint--right:before { border-right-color: #c09854 } .hint--info:after { background-color: #3986ac; text-shadow: 0 -1px 0px #1a3c4d } .hint--info.hint--top-left:before { border-top-color: #3986ac } .hint--info.hint--top-right:before { border-top-color: #3986ac } .hint--info.hint--top:before { border-top-color: #3986ac } .hint--info.hint--bottom-left:before { border-bottom-color: #3986ac } .hint--info.hint--bottom-right:before { border-bottom-color: #3986ac } .hint--info.hint--bottom:before { border-bottom-color: #3986ac } .hint--info.hint--left:before { border-left-color: #3986ac } .hint--info.hint--right:before { border-right-color: #3986ac } .hint--success:after { background-color: #458746; text-shadow: 0 -1px 0px #1a321a } .hint--success.hint--top-left:before { border-top-color: #458746 } .hint--success.hint--top-right:before { border-top-color: #458746 } .hint--success.hint--top:before { border-top-color: #458746 } .hint--success.hint--bottom-left:before { border-bottom-color: #458746 } .hint--success.hint--bottom-right:before { border-bottom-color: #458746 } .hint--success.hint--bottom:before { border-bottom-color: #458746 } .hint--success.hint--left:before { border-left-color: #458746 } .hint--success.hint--right:before { border-right-color: #458746 } .hint--always:after,.hint--always:before { opacity: 1; visibility: visible } .hint--always.hint--top:before { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px) } .hint--always.hint--top:after { -webkit-transform: translateX(-50%) translateY(-8px); -moz-transform: translateX(-50%) translateY(-8px); transform: translateX(-50%) translateY(-8px) } .hint--always.hint--top-left:before { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px) } .hint--always.hint--top-left:after { -webkit-transform: translateX(-100%) translateY(-8px); -moz-transform: translateX(-100%) translateY(-8px); transform: translateX(-100%) translateY(-8px) } .hint--always.hint--top-right:before { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px) } .hint--always.hint--top-right:after { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px) } .hint--always.hint--bottom:before { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px) } .hint--always.hint--bottom:after { -webkit-transform: translateX(-50%) translateY(8px); -moz-transform: translateX(-50%) translateY(8px); transform: translateX(-50%) translateY(8px) } .hint--always.hint--bottom-left:before { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px) } .hint--always.hint--bottom-left:after { -webkit-transform: translateX(-100%) translateY(8px); -moz-transform: translateX(-100%) translateY(8px); transform: translateX(-100%) translateY(8px) } .hint--always.hint--bottom-right:before { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px) } .hint--always.hint--bottom-right:after { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px) } .hint--always.hint--left:before { -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); transform: translateX(-8px) } .hint--always.hint--left:after { -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); transform: translateX(-8px) } .hint--always.hint--right:before { -webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px) } .hint--always.hint--right:after { -webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px) } .hint--rounded:after { border-radius: 4px } .hint--no-animate:before,.hint--no-animate:after { -webkit-transition-duration: 0ms; -moz-transition-duration: 0ms; transition-duration: 0ms } .hint--bounce:before,.hint--bounce:after { -webkit-transition: opacity .3s ease,visibility .3s ease,-webkit-transform .3s cubic-bezier(0.71, 1.7, 0.77, 1.24); -moz-transition: opacity .3s ease,visibility .3s ease,-moz-transform .3s cubic-bezier(0.71, 1.7, 0.77, 1.24); transition: opacity .3s ease,visibility .3s ease,transform .3s cubic-bezier(0.71, 1.7, 0.77, 1.24) } .boxLoading { width: 50px; height: 50px; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0 } .boxLoading:before { content: ""; width: 50px; height: 5px; background: #000; opacity: .1; position: absolute; top: 59px; left: 0; border-radius: 50%; animation: shadow .5s linear infinite } .boxLoading:after { content: ""; width: 50px; height: 50px; background: #fcffad; animation: animate .5s linear infinite; position: absolute; top: 0; left: 0; border-radius: 3px } .boxLoading-dark:after { background: #74b1e4 } @keyframes animate { 17% { border-bottom-right-radius: 3px } 25% { transform: translateY(9px) rotate(22.5deg) } 50% { transform: translateY(18px) scale(1, 0.9) rotate(45deg); border-bottom-right-radius: 40px } 75% { transform: translateY(9px) rotate(67.5deg) } 100% { transform: translateY(0) rotate(90deg) } } @keyframes shadow { 0%,100% { transform: scale(1, 1) } 50% { transform: scale(1.2, 1) } } .hdrlt { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 1000; background: rgba(255,255,255,.97); border-bottom: 1px solid #ddd; font-size: 17px; height: 45px; pointer-events: none } .hdrlt.game { background: rgba(255,255,255,0); border-bottom: 0px; color: rgba(255,255,255,.7) } .hdrlt.game .nav-icon span { background: #fff } .hdrlt.game .htext { line-height: 20px } .hdrlt.videotyping { background: rgba(255,255,255,.14); color: #444; border-bottom: 1px solid rgba(255,255,255,.1) } .hdrlt.videotyping .nav-icon span { background: #555 } .hdrlt.videotyping .htext { line-height: 20px } .hdrlt.dark { background: rgba(255,255,255,0); border-bottom: 0px; color: rgba(255,255,255,.7) } .hdrlt.dark .nav-icon span { background: #444 } .hdrlt.dark .htext { line-height: 20px } .hdrlt.spelling,.hdrlt.white { line-height: 1 } .hdrlt.spelling .nav-icon span,.hdrlt.white .nav-icon span { background: #414141 } .hdrlt .htext { vertical-align: top; margin: 13px 15px 0 15px; display: inline-block; height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .hdrlt .htext.profile-name { width: 150px; text-align: right } .hdrlt .htext.lesson-title { width: 250px } @media screen and (max-width: 952px) { .hdrlt .htext.profile-name { display:none } } @media screen and (max-width: 794px) { .hdrlt .htext.lesson-title { width:150px } } @media screen and (max-width: 687px) { .hdrlt .htext.lesson-title { display:none } } .hdrlt .menu-btn { display: inline-block; padding: 15px; cursor: pointer; pointer-events: auto } .hdrlt .nav-icon { width: 20px; height: 15px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out } .hdrlt .nav-icon span { display: block; position: absolute; height: 2px; width: 100%; background: #5293e2; border-radius: 3px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out } .hdrlt .nav-icon span:nth-child(1) { top: 0px } .hdrlt .nav-icon span:nth-child(2) { top: 6px } .hdrlt .nav-icon span:nth-child(3) { top: 12px } .hdrlt .menu-btn:hover span:nth-child(1) { transform: rotate(10deg); left: 4px; top: 1px; width: 13px } .hdrlt .menu-btn:hover span:nth-child(2) { transform: rotate(45deg) } .hdrlt .menu-btn:hover span:nth-child(3) { transform: rotate(80deg); left: -2px; top: 5px; width: 13px } .hdrlt.compact { height: inherit } .hdrlt.compact .htext { margin: 8px 15px 0 15px } .hdrlt.compact .menu-btn { padding: 10px } .hdrlt.compact>.container { text-align: right } .hdrlt.compact * { letter-spacing: normal; line-height: normal; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; -webkit-box-sizing: initial; box-sizing: initial } .hdrlt .header-options { position: relative; padding: 10px 1px; white-space: nowrap; pointer-events: auto } .hdrlt .header-options .header-item { display: inline; position: initial } .hdrlt .header-options .header-item>span { position: relative; display: inline-block; width: 70px; padding: 11px 0; text-align: center; color: #999 } .hdrlt .header-options .header-item>span:hover { color: #000; cursor: pointer } @media screen and (max-width: 1145px) { .hdrlt .header-options .header-item>span { width:65px } } @media screen and (max-width: 1088px) { .hdrlt .header-options .header-item>span { width:50px } } .hdrlt .header-options .header-item.notification>span { color: #ff6f4b !important } .hdrlt .header-options .header-item .dropdown-panel { display: none; position: absolute; top: 100%; left: inherit; margin-top: -2px; padding: 30px; right: 0; width: 380px; box-shadow: 0px 5px 8px #ccc; border: solid 1px #ddd; border-radius: 0; background: #fff } .hdrlt .header-options .header-item .dropdown-panel .dropdown { padding: 3px; border-bottom: solid 1px #ccc } .hdrlt .header-options .header-item.active>button { color: #4299fa; margin: 0 -1px; border-right: solid 1px; border-left: solid 1px; border-color: #ddd } .hdrlt .header-options .header-item.active>button:after { content: " "; display: inline-block; position: absolute; left: 0; width: 100%; bottom: 0; background: #fff; height: 2px; margin-bottom: -2px; z-index: 1001 } .hdrlt .header-options .header-item.active .dropdown-panel { display: block; box-sizing: content-box } .hdrlt .settings-panel { text-align: left; white-space: normal } .hdrlt .settings-panel h4 { margin: 0 0 15px } .hdrlt .settings-panel hr { margin: 20px -10px } .hdrlt .settings-panel label { font-weight: 300; cursor: pointer; font-size: .9em } .hdrlt .settings-panel label:hover { color: #4299fa } .hdrlt .settings-panel img.selectable { cursor: pointer; border: solid 2px rgba(0,0,0,0); transition: .2s ease-in-out transform } .hdrlt .settings-panel img.selectable:hover { filter: brightness(90%); transform: scale(1.1) } .hdrlt .settings-panel img.selectable.selected { cursor: inherit; filter: inherit; outline: solid 2px #4299fa } .hdrlt .settings-panel input.flip-switch { display: none } .hdrlt .settings-panel input.flip-switch+div { display: inline-block; margin: 4px 10px 4px 40px; vertical-align: sub; position: relative; width: 26px; height: 14px; border-radius: 8px; background: #999 } .hdrlt .settings-panel input.flip-switch+div>i { position: absolute; top: -3px; border: solid 1px #999; border-radius: 40px; height: 18px; width: 18px; left: 0; margin-left: -10px; background: #fff; transition: left .3s ease } .hdrlt .settings-panel input.flip-switch:checked+div { background: #4299fa } .hdrlt .settings-panel input.flip-switch:checked+div>i { left: 100%; border-color: #4299fa } .hdrlt .settings-panel input.flip-switch:hover+div>i { box-shadow: 1px 1px 2px #999 } .hdrlt .settings-panel .option-block { clear: both } .hdrlt .settings-panel .option-block>h4 { display: inline-block; width: 250px } .hdrlt .settings-panel .slider { display: inline-block; width: 250px; margin: 10px 0; position: relative } .hdrlt .settings-panel .slider .custom-range-input { border-radius: 8px; height: 11px; position: relative; background: rgba(204,204,204,.78); cursor: pointer; margin-bottom: 7px } .hdrlt .settings-panel .slider .custom-range-input .lower-track { position: absolute; background: #4299fa; top: 0; left: 0; height: 100%; border-radius: 8px; transition: width .3s ease } .hdrlt .settings-panel .slider .custom-range-input .thumb-track { position: absolute; top: 0; bottom: 0; left: 8px; right: 8px } .hdrlt .settings-panel .slider .custom-range-input .thumb-track>div { position: relative } .hdrlt .settings-panel .slider .custom-range-input .thumb { position: absolute; top: -4px; height: 17px; width: 17px; border-radius: 9px; background: #fff; margin-left: -9px; border: 1px solid #4299fa; transition: left .3s ease } .hdrlt .settings-panel .slider .custom-range-input .hotspot { position: absolute; top: -9px; left: -9px; right: -9px; height: 29px } .hdrlt .settings-panel .slider .custom-range-input:hover .thumb { box-shadow: 1px 1px 2px rgba(0,0,0,.5),0px 0px 1px rgba(13,13,13,.5) } .hdrlt .settings-panel .slider .labels { font-size: .65em; color: #aaa; white-space: nowrap; height: 15px; margin-top: 3px; position: relative } .hdrlt .settings-panel .slider .labels span { display: inline-block; position: absolute; top: 0; width: 200px; margin-left: -100px; text-align: center } .hdrlt .settings-panel .slider .labels span:first-child { margin-left: 0; text-align: left } .hdrlt .settings-panel .slider .labels span:last-child { margin-left: -200px; text-align: right } .hdrlt .settings-panel .dropdown_panel { width: 515px; margin-left: -250px; font-family: Roboto; padding: 20px 20px; max-height: 450px; overflow: auto } .hdrlt .settings-panel .dropdown_panel>button { display: inline-block; width: 135px; margin: 3px 8px; padding: 3px 5px; line-height: 1 } .hdrlt .settings-panel .selected-layout { font-size: .9em; padding: 3px 5px; border-bottom: solid 1px #4299fa !important } .hdrlt .settings-panel .selected-layout>span { font-size: .8em; padding-right: 5px } .hdrlt .settings-panel .kb-styles>button,.hdrlt .settings-panel .kb-hands>button { display: inline-block; width: 60px; margin: 0 17px; text-align: center; font-size: .8em; padding: 3px 0 } .hdrlt .settings-panel .kb-styles>button>img,.hdrlt .settings-panel .kb-hands>button>img { width: 50px; display: block; margin: 15px auto 3px } .hdrlt .settings-panel .kb-hands { text-align: center } .hdrlt .settings-panel .kb-hands>button { width: 80px } .hdrlt .settings-panel .kb-hands>button>span { display: block; font-size: 2.2em; padding: 10px } .hdrlt .settings-panel .text-sizes { margin: -10px 15px -5px; display: flex; align-items: baseline; justify-content: space-between } .hdrlt .settings-panel .text-sizes>div { margin: 0 5px; text-align: center; padding: 3px 0; font-size: .8em } .hdrlt .settings-panel .themes>button>img { box-sizing: border-box; display: inline-block; margin: 6px; width: 64px; height: 64px; border-radius: 100%; border: solid 1px #a0a0a0 } .hdrlt .settings-panel .themes>button.selectable.selected { border: none } .hdrlt .settings-panel .themes>button.selectable.selected>img { transform: scale(1.1); border: solid 2px #4299fa; outline: none } .settings-panel div.selectable,.settings-panel button.selectable { border: none; background: none; cursor: pointer; border-bottom: solid 1px rgba(0,0,0,0) } .settings-panel div.selectable:hover,.settings-panel div.selectable.selected,.settings-panel button.selectable:hover,.settings-panel button.selectable.selected { border-bottom: solid 1px #4299fa; color: #4299fa } .settings-panel div.selectable.selected,.settings-panel button.selectable.selected { pointer-events: none } .settings-panel .inline-settings-label { font-size: 17px; font-weight: 400 } .keyboard-assist-modal { font-size: 17px; box-sizing: content-box } .keyboard-assist-modal .layouts { width: 100% } .keyboard-assist-modal .layouts>button { display: inline-block; text-align: left; vertical-align: top; width: 190px; margin: 5px 80px 3px 0; font-size: .9em; padding: 3px 0; margin-bottom: 5px; white-space: nowrap; overflow: hidden } .keyboard-assist-modal .layouts>button>span { font-size: .8em; padding-right: 5px } .keyboard-assist-modal .languages { max-height: 50vh; overflow: scroll; margin-top: 10px; font-size: 14px } .keyboard-assist-modal .languages>button { text-align: left; display: inline-block; width: 29%; margin: 4px } .keyboard-assist-modal .sample-layout { width: 100%; direction: ltr } .keyboard-assist-modal .sample-layout path { fill: #fff; stroke: #c1c1c1; stroke-width: .5; stroke-miterlimit: 10 } .keyboard-assist-modal .sample-layout .path-enter { fill: #f4f4f4 } .keyboard-assist-modal .sample-layout text { opacity: 0; font-family: "ArialMT","Arial","Helvetica","sans-serif"; font-size: 15px; user-select: none; fill: #333 } .keyboard-assist-modal .sample-layout .text-enter { opacity: 1; font-size: 12px } .keyboard-assist-modal .sample-layout:hover { cursor: pointer; background: #fafafa } .keyboard-assist-modal .sample-layout.with-keys { height: 105px } .keyboard-assist-modal .sample-layout.with-keys text { opacity: 1 } .keyboard-assist-modal .sample-layout.with-keys path { fill: #f4f4f4 } .keyboard-assist-modal .sample-layout.with-keys .path-enter { fill: #fff } .keyboard-assist-modal .sample-layout.selected path { stroke: #4083f4 } .keyboard-assist-modal .sample-layout.selected .path-enter { stroke: #337bd1; fill: #4083f4 } .keyboard-assist-modal .sample-layout.selected text { fill: #4083f4 } .keyboard-assist-modal .sample-layout.selected .text-enter { fill: #fff } .keyboard-assist-modal .sample-layout.selected.with-keys path { stroke: #337bd1; fill: #4083f4 } .keyboard-assist-modal .sample-layout.selected.with-keys .path-enter { fill: #fff } .keyboard-assist-modal .sample-layout.selected.with-keys text { fill: #fff } .keyboard-assist-modal .sample-layout.selected.with-keys .text-enter { fill: #333 } .keyboard-assist-modal .divider { display: inline-block; width: 0; height: 105px; vertical-align: top; border-left: solid 1px #c1c1c1; margin: 1px; position: relative } .keyboard-assist-modal .highlighted { color: #5293e2 } .keyboard-assist-modal .keyboard-identified { display: none; margin: 10px 30px -70px; transform: scale(0.7); transform-origin: 0 0 } .edheader .navbar-inverse { box-shadow: 0 1px 4px 1px rgba(0,0,0,.1); background: #283138 } .edheader .navbar-inverse,.edheader .navbar-inverse .navbar-toggle { border: none } .edheader .edlogo { font-size: 20px; color: rgba(255,255,255,.96); font-family: "Montserrat"; font-weight: 700; } .edheader .jumpNav { position: fixed; display: block; border-radius: 5px; left: 20px; background-color: rgba(0,0,0,0); color: rgba(0,0,0,0); height: 2px; top: -100px; padding: 7px 9px; z-index: 1040; font-weight: bold; } .edheader .jumpNav:focus { height: 40px; background-color: #000 !important; color: #fff !important; z-index: 1040 !important; text-decoration: none } .edheader .lesson-plan-list { padding-top: 0; padding-bottom: 0 } .edheader .lesson-plan-list .active { background-color: #547488 } .edheader .lesson-plan-list .active a { background-color: #547488 } .edheader .lesson-plan-list li { border-bottom: 1px solid #eee; width: 300px } .edheader .lesson-plan-list li a { overflow-x: hidden; padding: 5px } .edheader .nav-dropdown-thumbnail { width: 80px; float: left; padding: 0px; border-radius: 2px } .edheader .nav-dropdown-content { margin: 2px 0px 0px 10px; display: inline-block } .edheader .flag-box { display: inline-block; border-radius: 50%; overflow: hidden; width: 22px; height: 22px; padding-top: 2px; border: solid 1px rgba(255,255,255,.3); margin: -5px 5px } .edheader .flag-box .flag { margin-top: -7px; margin-left: -6px } .edheader .selected-language-label { display: inline-block; margin-right: 4px } .edheader .dropdown-menu .flag-box { border-color: rgba(0,0,0,.3) } .edheader .back-to-authoring { background: #ff4500; margin-left: -150px } .rtl-body .edheader .back-to-authoring { background: #ff4500; margin-right: -150px; margin-left: initial } .RESPG { line-height: initial } .RESPG * { letter-spacing: normal; line-height: normal; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto } .RESPG .res_sec * { -webkit-box-sizing: initial; box-sizing: initial; overflow-x: hidden; outline: none } .RESPG .result_arena { position: absolute; top: -150px; left: 0px; right: 0px; background: url(/m/engine/img/end/blue_bg.png); opacity: 0; bottom: 0px; z-index: 100 } .RESPG #star_holder { display: none; -webkit-transition: .17s linear all } .RESPG .star_bg { width: 1117px; height: 155px; background: url(/m/engine/img/end/inactive-stars.png); position: absolute; top: 200px; left: 50%; margin-left: -558px; z-index: 3 } .RESPG .star_bg_flash { background: url(/m/engine/img/end/inactive-stars-flashing.png); animation: starBgFlashing 1.6s; animation-iteration-count: infinite } @keyframes starBgFlashing { 0% { opacity: .3 } 56% { opacity: .5 } 100% { opacity: .3 } } .RESPG #res_white_shade { background: -moz-radial-gradient(center, ellipse cover, rgba(163, 218, 255, 0.2) 5%, rgba(255, 255, 255, 0) 70%); background: -webkit-gradient(radial, center center, 0px, center center, 5%, color-stop(0%, rgba(163, 218, 255, 0.2)), color-stop(70%, rgba(255, 255, 255, 0))); background: -webkit-radial-gradient(center, ellipse cover, rgba(163, 218, 255, 0.2) 5%, rgba(255, 255, 255, 0) 70%); background: -o-radial-gradient(center, ellipse cover, rgba(163, 218, 255, 0.2) 5%, rgba(255, 255, 255, 0) 70%); background: -ms-radial-gradient(center, ellipse cover, rgba(163, 218, 255, 0.2) 5%, rgba(255, 255, 255, 0) 70%); width: 1000px; height: 800px; position: absolute; left: 50%; margin: -50px 0 0 -500px; opacity: 0; animation: resWhiteShading 3s; animation-iteration-count: infinite } @keyframes resWhiteShading { 0% { opacity: 1 } 33% { opacity: .4 } 100% { opacity: 1 } } .RESPG .white-ray { position: fixed; left: -1100px; width: 1000px; height: 108px; opacity: .1; background: url(/m/engine/img/end/white-ray.png) } .RESPG .res_loading { position: absolute; bottom: 60px; left: 50%; margin-left: 1px } .RESPG .lesson-details { font-size: 22px; font-weight: normal; color: #555; font-family: arial; text-align: center; padding-top: 20px } .RESPG .lesson-details-label { font-weight: bold } .RESPG .astar { position: absolute; left: 50%; top: 16px; z-index: 7 } .RESPG .star-white,.RESPG .star-flashing { position: absolute } .RESPG .silver-star-flashing { animation: fadeSilverStarFlashing 3s; animation-iteration-count: infinite } @keyframes fadeSilverStarFlashing { 0% { opacity: 0 } 50% { opacity: .7 } 100% { opacity: 0 } } .RESPG .res_score_box { -webkit-transition: .07s linear -webkit-transform; position: absolute; top: 365px; left: 50%; color: #fff; font-size: 49px; font-family: "arial black",arial; font-weight: bold; width: 150px; margin-left: -75px; text-align: center } .RESPG .res-score { width: 200px; position: absolute; z-index: 5 } .RESPG .res-score-reflection { width: 200px; z-index: 3; position: absolute; -webkit-transform: scaleY(-0.7); -moz-transform: scaleY(-0.8); -o-transform: scaleY(-0.8); margin-top: 30px; opacity: .3; background: -webkit-linear-gradient(#09314d, #fff); -webkit-background-clip: text; -webkit-text-fill-color: rgba(0,0,0,0) } .RESPG .res-score-shadow { z-index: 4; position: absolute; width: 228px; height: 30px; background-image: url(/m/engine/img/end/score_shadow.png); background-repeat: no-repeat; background-position: 37px 0px; margin: 29px 0 0 -28px; opacity: .2 } .RESPG .res_sec { display: none; position: absolute; z-index: 101; left: 50%; top: 460px; margin-left: -298px } .RESPG .res_expl { width: 750px; margin: 0; padding: 0 20px 15px; margin-left: -75px; text-align: center; color: #86add3; font-family: arial; font-size: 1.5em; font-weight: 300 } .RESPG .sep_vline { width: 1px; height: 105px; float: left; margin-top: 16px; border-right: 1px dashed #508aa9 } .RESPG .res_right_sec { width: 250px; height: 170px; float: left; padding: 0 5px 20px 60px; margin-top: -10px; outline: none } .RESPG #res_left_sec { width: 235px; height: 160px; float: left; padding: 0 5px 20px 60px; margin-top: -10px; outline: none } .RESPG .res_sec h2 { font-family: "arial black",arial; font-weight: bold; font-size: 1.2em; color: #95b8dc; margin-bottom: 5px } .RESPG .res_sec p { margin: 0 } .RESPG .res_sec span:first-child { font-family: "arial black",arial; font-weight: bold; font-size: 20px; color: #eee } .RESPG .res_sec span:nth-child(2) { font-weight: normal; font-size: 1em; font-family: arial; color: #eee; margin-left: 8px } .RESPG .res_sec span:nth-child(3) { font-weight: normal; font-size: 1em; font-family: arial; color: #95b8dc; margin-left: 8px } .RESPG #res_end_content_white_box { background: #fff url(/m/engine/img/end/white-bg.png) repeat-x; position: absolute; top: 100%; right: 0px; left: 0px; min-height: 500px; z-index: 1000; padding-top: 20px; margin-top: 30px } .RESPG #res_end_content { margin-top: 100px; display: none; width: 910px; margin: auto; font-family: Trebuchet,Arial,sans-serif } .RESPG #res_end_content h3 { font-size: 30px; font-weight: normal; color: #555; border-bottom: 1px solid #ddd; padding-bottom: 10px } .RESPG #res_highscore { position: absolute; top: 400px; left: 50%; margin-left: 264px; padding-top: 100px; -webkit-transition: -webkit-transform .45s ease-in; -webkit-transform: rotateZ(20deg) } .RESPG table.res-table { width: 100%; margin: 10px 0 10px 0 } .RESPG table.res-table th { padding-left: 5px; text-align: left; border-bottom: 1px solid #666; color: #555 } .RESPG table.res-table td { border-bottom: 1px dotted #ddd; color: #555; padding: 4px 0 4px 5px } .RESPG table.res-table tr:hover td { background: #f5f5f5 } .RESPG table.res-table tr td { background: #f1f1f1 } .RESPG table.res-table tr.even-row td { background: #f8f8f8 } .RESPG #res_menu { text-align: center } .RESPG a.round-btn img { display: block; padding: 10px } .RESPG a.round-btn { display: inline-block; text-align: center; text-decoration: none; color: #0b4878; font-weight: bold; padding: 0 10px 10px 10px; border-radius: 10px } .RESPG #attempt-progress-sect { margin-top: 50px } .RESPG .chart_box { width: 420px; display: inline-block; height: 200px } .RESPG .pos-change { color: green; font-weight: bold } .RESPG .neg-change { color: darkred; font-weight: bold } .RESPG sup.pos-change sup,.RESPG sup.neg-change sup { color: #888; font-size: 9px } .RESPG .action-btn { display: inline-block; width: 66px; height: 66px; cursor: pointer; margin: 0 15px } .RESPG .action-btn:focus { outline-offset: 5px; outline-style: solid } .RESPG .menu-icon { background-image: url(/m/engine/img/end/menu.png) } .RESPG .menu-icon:hover { background-image: url(/m/engine/img/end/menu-hover.png) } .RESPG .redo-icon { background-image: url(/m/engine/img/end/replay-again-lesson.png) } .RESPG .redo-icon:hover { background-image: url(/m/engine/img/end/replay-lesson-hover.png) } .RESPG .next-icon { background-image: url(/m/engine/img/end/next-lesson.png) } .RESPG .next-icon:hover { background-image: url(/m/engine/img/end/next-lesson-hover.png) } .RESPG .badge_box { padding: 0px } .RESPG .badgebg { z-index: 1000; position: absolute; border-radius: 100%; width: 320px; height: 320px; left: 50%; top: 400px; margin: -100px 0 0 -155px; box-shadow: 0 -1px 121px rgba(255,255,255,.2) } .RESPG .badge_text { position: absolute; color: #fff; z-index: 100000; font-family: Roboto; left: 50%; width: 400px; margin-left: -200px; top: 670px; text-align: center; outline: none } .RESPG .badge_text_title { font-size: 39px; font-weight: normal; font-family: "LeagueGothic-Regular" } .RESPG .badge_text_txt { font-size: 18px } .RESPG .new_badge { position: fixed; top: 45px; font-size: 56px; left: 50%; margin-left: -200px; width: 400px; font-family: "LeagueGothic-Regular" } @media(max-height: 730px) { .RESPG .new_badge { display:none } .RESPG .badgebg { top: 260px } .RESPG .badge_text { top: 530px } .RESPG .next_btn { font-size: 22px; margin-top: 10px; outline: none } } @media(max-height: 575px) { .RESPG .badge_text { top:600px } .RESPG .badge_text input { display: block; margin: -155px auto } } .RESPG .hoja { color: #dcdce2; position: absolute; top: 50%; left: 50%; margin-left: -140px; margin-top: -140px; width: 280px; height: 280px; text-align: center; font-family: "Open Sans",sans-serif; font-size: 35px; line-height: 280px; -webkit-font-smoothing: antialiased } .RESPG .hoja-small { top: auto; left: auto; width: 240px; height: 240px; margin: 0px } .RESPG .hoja-small img { position: absolute; margin: 28px -96px } .RESPG .hoja:after,.RESPG .hoja:before { content: ""; border-radius: 66%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center } .RESPG .hoja:after { box-shadow: inset 0 23.33333333px 0 rgba(250,250,0,.6),inset 23.33333333px 0 0 rgba(250,200,0,.6),inset 0 -23.33333333px 0 rgba(250,150,0,.6),inset -23.33333333px 0 0 rgba(250,100,0,.6); -webkit-animation: rotar 2s -0.5s linear infinite; animation: rotar 2s -0.5s linear infinite } .RESPG .hoja:before { box-shadow: inset 0 23.33333333px 0 rgba(0,250,250,.6),inset 23.33333333px 0 0 rgba(0,200,200,.6),inset 0 -23.33333333px 0 rgba(0,150,200,.6),inset -23.33333333px 0 0 rgba(0,200,250,.6); -webkit-animation: rotarIz 2s -0.5s linear infinite; animation: rotarIz 2s -0.5s linear infinite } @-webkit-keyframes rotar { 0% { -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1); transform: rotateZ(0deg) scaleX(1) scaleY(1) } 50% { -webkit-transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95); transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95) } 100% { -webkit-transform: rotateZ(360deg) scaleX(1) scaleY(1); transform: rotateZ(360deg) scaleX(1) scaleY(1) } } @keyframes rotar { 0% { -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1); transform: rotateZ(0deg) scaleX(1) scaleY(1) } 50% { -webkit-transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95); transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95) } 100% { -webkit-transform: rotateZ(360deg) scaleX(1) scaleY(1); transform: rotateZ(360deg) scaleX(1) scaleY(1) } } @-webkit-keyframes rotarIz { 0% { -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1); transform: rotateZ(0deg) scaleX(1) scaleY(1) } 50% { -webkit-transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85); transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85) } 100% { -webkit-transform: rotateZ(-360deg) scaleX(1) scaleY(1); transform: rotateZ(-360deg) scaleX(1) scaleY(1) } } @keyframes rotarIz { 0% { -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1); transform: rotateZ(0deg) scaleX(1) scaleY(1) } 50% { -webkit-transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85); transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85) } 100% { -webkit-transform: rotateZ(-360deg) scaleX(1) scaleY(1); transform: rotateZ(-360deg) scaleX(1) scaleY(1) } } .RESPG .hoja.faster1:after { box-shadow: inset 0 40px 0 rgba(250,250,0,.6),inset 40px 0 0 rgba(250,200,0,.6),inset 0 -40px 0 rgba(250,150,0,.6),inset -40px 0 0 rgba(250,100,0,.6); -webkit-animation: rotar 1.5s -0.5s linear infinite; animation: rotar 1.5s -0.5s linear infinite } .RESPG .hoja.faster1:before { box-shadow: inset 0 40px 0 rgba(0,250,250,.6),inset 40px 0 0 rgba(0,200,200,.6),inset 0 -40px 0 rgba(0,150,200,.6),inset -40px 0 0 rgba(0,200,250,.6); -webkit-animation: rotarIz 1.5s -0.5s linear infinite; animation: rotarIz 1.5s -0.5s linear infinite } .RESPG .hoja.faster2:after { box-shadow: inset 0 70px 0 rgba(250,250,0,.6),inset 40px 0 0 rgba(250,200,0,.6),inset 0 -40px 0 rgba(250,150,0,.6),inset -40px 0 0 rgba(250,100,0,.6); -webkit-animation: rotar 1s -0.5s linear infinite; animation: rotar 1s -0.5s linear infinite } .RESPG .hoja.faster2:before { box-shadow: inset 0 70px 0 rgba(0,250,250,.6),inset 40px 0 0 rgba(0,200,200,.6),inset 0 -40px 0 rgba(0,150,200,.6),inset -40px 0 0 rgba(0,200,250,.6); -webkit-animation: rotarIz 1s -0.5s linear infinite; animation: rotarIz 1s -0.5s linear infinite } .RESPG .hoja.faster3:after { box-shadow: inset 0 90px 0 rgba(250,250,0,.6),inset 40px 0 0 rgba(250,200,0,.6),inset 0 -40px 0 rgba(250,150,0,.6),inset -40px 0 0 rgba(250,100,0,.6); -webkit-animation: rotar .7s -0.5s linear infinite; animation: rotar .7s -0.5s linear infinite } .RESPG .hoja.faster3:before { box-shadow: inset 0 90px 0 rgba(0,250,250,.6),inset 40px 0 0 rgba(0,200,200,.6),inset 0 -40px 0 rgba(0,150,200,.6),inset -40px 0 0 rgba(0,200,250,.6); -webkit-animation: rotarIz .7s -0.5s linear infinite; animation: rotarIz .7s -0.5s linear infinite } .RESPG .hoja.faster4:after { box-shadow: inset 0 130px 0 rgba(250,250,0,.6),inset 40px 0 0 rgba(250,200,0,.6),inset 0 -40px 0 rgba(250,150,0,.6),inset -40px 0 0 rgba(250,100,0,.6); -webkit-animation: rotar .3s -0.5s linear infinite; animation: rotar .3s -0.5s linear infinite } .RESPG .hoja.faster4:before { box-shadow: inset 0 130px 0 rgba(0,250,250,.6),inset 40px 0 0 rgba(0,200,200,.6),inset 0 -40px 0 rgba(0,150,200,.6),inset -40px 0 0 rgba(0,200,250,.6); -webkit-animation: rotarIz .3s -0.5s linear infinite; animation: rotarIz .3s -0.5s linear infinite } .RESPG .next_btn { background: #fff; color: #000; border: 0px; border-radius: 3px; padding: 12px 35px; font-size: 22px; margin-top: 30px; outline: none } .RESPG .next_btn:hover { box-shadow: 0 0 15px rgba(255,255,255,.8) } .RESPG .next_btn:active { box-shadow: 0 0 20px rgba(255,255,255,.8); outline: 3px solid #000 } .RESPG #adslot_1 { margin: 20px auto; height: 140px; width: 728px } .RESPG #adslot_2 { margin: 40px auto 0; height: 330px; width: 336px } .RESPG.with-ads .star_bg { top: 250px } .RESPG.with-ads .res_score_box { top: 405px } .RESPG.with-ads .res_sec { top: 505px } .RESPG.with-ads .res_expl { min-height: 50px; max-height: 92px } .RESPG.with-ads #res_end_content_white_box { margin-top: 90px } .RESPG.with-ads .new_badge { margin-top: 90px } .RESPG.with-ads .badge_text { margin-top: 50px } .RESPG.with-ads .badgebg { margin-top: -10px } @media(max-width: 1400px) { .RESPG.with-ads .res_expl { margin:0; margin-left: 40px; text-align: left; min-width: 575px; max-width: 750px; width: inherit } .RESPG.with-ads .res_sec { left: 320px; margin: 0 } .RESPG.with-ads .badge_text,.RESPG.with-ads .badgebg,.RESPG.with-ads .new_badge { left: 620px } } .RESPG.with-ads #ad_box_top { position: absolute; top: 0; left: 0; width: 100%; height: 90px; z-index: 100 } .RESPG.with-ads #ad_box_1 { margin: auto; height: 90px; width: 728px } .RESPG.with-ads #ad_box_1 .disable-ads-banner { display: none } .RESPG.with-ads #ad_box_2 { position: absolute; z-index: 100; left: 0; top: 310px; width: 336px; height: 280px } .RESPG.with-ads #ad_box_2 .disable-ads-banner a { color: #fff } #RPJ { display: flex; top: 0; bottom: 0; left: 0; right: 0; position: fixed; justify-content: center; align-items: center } #RPJ .header { position: fixed; z-index: 1; top: 10%; height: 500px; margin-top: -300px } #RPJ .animation { position: fixed; z-index: 0 } #RPJ .navigation { position: fixed; z-index: 1; bottom: 10%; background-color: rgba(255,255,255,.8); text-align: center; width: 100%; white-space: nowrap } #RPJ .navigation .button img { transition: .2s linear transform } #RPJ .navigation .button:hover img { transform: scale(1.1) } @media(max-height: 800px) { #RPJ .header { margin-top:-360px } } @media(max-height: 830px) { #RPJ .navigation { bottom:5% } } @media(max-height: 700px) { #RPJ .navigation { bottom:0; transform: scale(0.7) } } @media(max-width: 800px) { #RPJ .header { width:100% } } @media(max-width: 450px) { #RPJ .navigation { transform:scale(0.5) } } /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s } .animated.flipOutX,.animated.flipOutY,.animated.bounceIn,.animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s } @-webkit-keyframes bounce { from,20%,53%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 40%,43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0) } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0) } } @keyframes bounce { from,20%,53%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 40%,43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0) } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0) } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom } @-webkit-keyframes flash { from,50%,to { opacity: 1 } 25%,75% { opacity: 0 } } @keyframes flash { from,50%,to { opacity: 1 } 25%,75% { opacity: 0 } } .flash { -webkit-animation-name: flash; animation-name: flash } @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05) } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05) } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } .pulse { -webkit-animation-name: pulse; animation-name: pulse } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1) } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1) } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1) } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1) } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1) } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1) } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1) } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1) } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1) } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1) } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand } @-webkit-keyframes shake { from,to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 20%,40%,60%,80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } } @keyframes shake { from,to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 20%,40%,60%,80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } } .shake { -webkit-animation-name: shake; animation-name: shake } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } 50% { -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } 50% { -webkit-transform: translateX(0); transform: translateX(0) } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg) } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg) } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg) } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg) } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg) } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg) } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg) } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg) } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg) } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg) } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 10%,20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 10%,20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } .tada { -webkit-animation-name: tada; animation-name: tada } @-webkit-keyframes wobble { from { -webkit-transform: none; transform: none } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } to { -webkit-transform: none; transform: none } } @keyframes wobble { from { -webkit-transform: none; transform: none } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } to { -webkit-transform: none; transform: none } } .wobble { -webkit-animation-name: wobble; animation-name: wobble } @-webkit-keyframes jello { from,11.1%,to { -webkit-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg) } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg) } } @keyframes jello { from,11.1%,to { -webkit-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg) } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg) } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center } @-webkit-keyframes bounceIn { from,20%,40%,60%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97) } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } @keyframes bounceIn { from,20%,40%,60%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97) } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn } @-webkit-keyframes bounceInDown { from,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0) } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0) } to { -webkit-transform: none; transform: none } } @keyframes bounceInDown { from,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0) } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0) } to { -webkit-transform: none; transform: none } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown } @-webkit-keyframes bounceInLeft { from,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0) } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0) } to { -webkit-transform: none; transform: none } } @keyframes bounceInLeft { from,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0) } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0) } to { -webkit-transform: none; transform: none } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft } @-webkit-keyframes bounceInRight { from,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0) } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0) } to { -webkit-transform: none; transform: none } } @keyframes bounceInRight { from,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0) } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0) } to { -webkit-transform: none; transform: none } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight } @-webkit-keyframes bounceInUp { from,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0) } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes bounceInUp { from,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0) } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9) } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9) } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0) } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0) } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0) } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0) } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0) } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0) } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp } @-webkit-keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig } @-webkit-keyframes fadeOut { from { opacity: 1 } to { opacity: 0 } } @keyframes fadeOut { from { opacity: 1 } to { opacity: 0 } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut } @-webkit-keyframes fadeOutDown { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } @keyframes fadeOutDown { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown } @-webkit-keyframes fadeOutDownBig { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } @keyframes fadeOutDownBig { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig } @-webkit-keyframes fadeOutLeft { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } @keyframes fadeOutLeft { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } @keyframes fadeOutLeftBig { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig } @-webkit-keyframes fadeOutRight { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @keyframes fadeOutRight { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight } @-webkit-keyframes fadeOutRightBig { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } @keyframes fadeOutRightBig { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig } @-webkit-keyframes fadeOutUp { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } @keyframes fadeOutUp { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp } @-webkit-keyframes fadeOutUpBig { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } @keyframes fadeOutUpBig { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip } @keyframes fliphalf { from { -webkit-transform: perspective(600px) rotate3d(0, 1, 0, -360deg); transform: perspective(600px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 80% { -webkit-transform: perspective(600px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(600px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } to { -webkit-transform: perspective(600px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(600px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } .edanimated.fliphalf { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-backface-visibility: visible; backface-visibility: visible; animation-name: fliphalf } @keyframes flipbackhalf { from { -webkit-transform: perspective(600px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(600px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 20% { -webkit-transform: perspective(600px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(600px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } to { -webkit-transform: perspective(600px) rotate3d(0, 1, 0, -360deg); transform: perspective(600px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } } .animated.flipbackhalf { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-backface-visibility: visible; backface-visibility: visible; animation-name: flipbackhalf } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0 } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0 } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0 } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0 } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1 } to { -webkit-transform: none; transform: none; opacity: 1 } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1 } to { -webkit-transform: none; transform: none; opacity: 1 } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } @-webkit-keyframes lightSpeedOut { from { opacity: 1 } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0 } } @keyframes lightSpeedOut { from { opacity: 1 } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0 } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } @-webkit-keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1 } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1 } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1 } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0 } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0 } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0 } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0 } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0 } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0 } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0 } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0 } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0 } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0 } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 20%,60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 40%,80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1 } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0 } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 20%,60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 40%,80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1 } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0 } } .hinge { -webkit-animation-name: hinge; animation-name: hinge } @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) } to { opacity: 1; -webkit-transform: none; transform: none } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn } @-webkit-keyframes rollOut { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) } } @keyframes rollOut { from { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 50% { opacity: 1 } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 50% { opacity: 1 } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp } @-webkit-keyframes zoomOut { from { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } to { opacity: 0 } } @keyframes zoomOut { from { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } to { opacity: 0 } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0) } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp } .NOT_FOUND_PAGE #container { height: 100%; overflow: hidden } .NOT_FOUND_PAGE .head { font-family: Courgette,arial; font-size: 13pt; color: #d1dbda } .NOT_FOUND_PAGE .cont { font-family: helveticaNeue-thin,arial; font-size: 12pt; color: #91cfe8 } .NOT_FOUND_PAGE #cloud { position: absolute; left: 50%; margin: 100px 0 0 -250px; display: block } .NOT_FOUND_PAGE #rain { position: absolute; left: 50%; margin: 50px 0 0 -320px; display: block; z-index: 20 } .NOT_FOUND_PAGE #ground { position: absolute; margin: 457px 0 0 0; display: block; width: 100% } .NOT_FOUND_PAGE #buddy { position: absolute; left: 50%; margin: 345px 0 0 -75px; display: block; z-index: 25 } .NOT_FOUND_PAGE #ground_box { position: absolute; top: 495px; display: block; z-index: 0; background-color: #3a444f; width: 100% } .NOT_FOUND_PAGE #text_cont { line-height: 23px; position: absolute; top: 520px; display: block; z-index: 100; width: 400px; left: 50%; margin-left: -215px } .NOT_FOUND_PAGE a { font-family: helveticaNeue-thin,arial; text-decoration: none; color: #f900fd } .NOT_FOUND_PAGE a:hover { color: #b6ff00 } .e-cmn { width: 100px; height: 100px; background: url("/m/build/img/svgsprite-cmn.svg?v2") no-repeat } .cmn-G3 { background-position: 0 0 } .cmn-Hand-l2 { background-position: 14.286% 0 } .cmn-Hand-r2 { background-position: 0 16.667% } .cmn-celebration { background-position: 14.286% 16.667% } .cmn-code { background-position: 28.571% 0 } .cmn-default { background-position: 28.571% 16.667% } .cmn-definition { background-position: 0 33.333% } .cmn-drum { background-position: 14.286% 33.333% } .cmn-dynamic { background-position: 28.571% 33.333% } .cmn-dynamic2 { background-position: 42.857% 0 } .cmn-fastest-typist4 { background-position: 42.857% 16.667% } .cmn-game1 { background-position: 42.857% 33.333% } .cmn-game3 { background-position: 0 50% } .cmn-game4 { background-position: 14.286% 50% } .cmn-game5 { background-position: 28.571% 50% } .cmn-guide { background-position: 42.857% 50% } .cmn-guide2 { background-position: 57.143% 0 } .cmn-home2 { background-position: 57.143% 16.667% } .cmn-homonym { background-position: 57.143% 33.333% } .cmn-idea { background-position: 57.143% 50% } .cmn-intro { background-position: 0 66.667% } .cmn-keyword { background-position: 14.286% 66.667% } .cmn-logographic { background-position: 28.571% 66.667% } .cmn-misused { background-position: 42.857% 66.667% } .cmn-practice { background-position: 57.143% 66.667% } .cmn-question { background-position: 71.429% 0 } .cmn-qwerty-history { background-position: 71.429% 16.667% } .cmn-rhythm { background-position: 71.429% 33.333% } .cmn-sit-straight2 { background-position: 71.429% 50% } .cmn-space-tab3 { background-position: 71.429% 66.667% } .cmn-speed1 { background-position: 0 83.333% } .cmn-speed10 { background-position: 14.286% 83.333% } .cmn-speed11 { background-position: 28.571% 83.333% } .cmn-speed12 { background-position: 42.857% 83.333% } .cmn-speed13 { background-position: 57.143% 83.333% } .cmn-speed14 { background-position: 71.429% 83.333% } .cmn-speed2 { background-position: 85.714% 0 } .cmn-speed3 { background-position: 85.714% 16.667% } .cmn-speed4 { background-position: 85.714% 33.333% } .cmn-speed5 { background-position: 85.714% 50% } .cmn-speed7 { background-position: 85.714% 66.667% } .cmn-speed8 { background-position: 85.714% 83.333% } .cmn-speed9 { background-position: 0 100% } .cmn-spell { background-position: 14.286% 100% } .cmn-symbols { background-position: 28.571% 100% } .cmn-symbols2 { background-position: 42.857% 100% } .cmn-take-break { background-position: 57.143% 100% } .cmn-think-ideas2 { background-position: 71.429% 100% } .cmn-tip { background-position: 85.714% 100% } .cmn-travel1 { background-position: 100% 0 } .cmn-video { background-position: 100% 16.667% } .e-gsolo { width: 100px; height: 100px; background: url("/m/build/img/svgsprite-gsolo.svg?v2") no-repeat } .gsolo-1 { background-position: 0 0 } .gsolo-10 { background-position: 25% 0 } .gsolo-11 { background-position: 0 33.333% } .gsolo-12 { background-position: 25% 33.333% } .gsolo-13 { background-position: 50% 0 } .gsolo-14 { background-position: 50% 33.333% } .gsolo-15 { background-position: 0 66.667% } .gsolo-16 { background-position: 25% 66.667% } .gsolo-17 { background-position: 50% 66.667% } .gsolo-18 { background-position: 75% 0 } .gsolo-19 { background-position: 75% 33.333% } .gsolo-2 { background-position: 75% 66.667% } .gsolo-20 { background-position: 0 100% } .gsolo-3 { background-position: 25% 100% } .gsolo-4 { background-position: 50% 100% } .gsolo-5 { background-position: 75% 100% } .gsolo-6 { background-position: 100% 0 } .gsolo-7 { background-position: 100% 33.333% } .gsolo-8 { background-position: 100% 66.667% } .gsolo-9 { background-position: 100% 100% } .e-anr { width: 100px; height: 100px; background: url("/m/build/img/svgsprite-anr.svg?v2") no-repeat } .anr-1 { background-position: 0 0 } .anr-10 { background-position: 25% 0 } .anr-11 { background-position: 0 25% } .anr-12 { background-position: 25% 25% } .anr-13 { background-position: 50% 0 } .anr-14 { background-position: 50% 25% } .anr-15 { background-position: 0 50% } .anr-16 { background-position: 25% 50% } .anr-17 { background-position: 50% 50% } .anr-18 { background-position: 75% 0 } .anr-19 { background-position: 75% 25% } .anr-2 { background-position: 75% 50% } .anr-20 { background-position: 0 75% } .anr-21 { background-position: 25% 75% } .anr-22 { background-position: 50% 75% } .anr-3 { background-position: 75% 75% } .anr-4 { background-position: 100% 0 } .anr-5 { background-position: 100% 25% } .anr-6 { background-position: 100% 50% } .anr-7 { background-position: 100% 75% } .anr-8 { background-position: 0 100% } .anr-9 { background-position: 25% 100% } .e-qwerty { width: 100px; height: 100px; background: url("/m/build/img/svgsprite-qwerty.svg?v2") no-repeat; } .qwerty-C-A { background-position: 0 0 } .qwerty-C-A-accent { background-position: 5.556% 0 } .qwerty-C-AA-accent { background-position: 0 5.882% } .qwerty-C-AE-accent { background-position: 5.556% 5.882% } .qwerty-C-AN { background-position: 11.111% 0 } .qwerty-C-AN-accent { background-position: 11.111% 5.882% } .qwerty-C-AO-accent { background-position: 0 11.765% } .qwerty-C-AP { background-position: 5.556% 11.765% } .qwerty-C-BN { background-position: 11.111% 11.765% } .qwerty-C-BP { background-position: 16.667% 0 } .qwerty-C-C { background-position: 16.667% 5.882% } .qwerty-C-Csmi { background-position: 16.667% 11.765% } .qwerty-C-DK { background-position: 0 17.647% } .qwerty-C-EI { background-position: 5.556% 17.647% } .qwerty-C-FJ { background-position: 11.111% 17.647% } .qwerty-C-GH { background-position: 16.667% 17.647% } .qwerty-C-IO-accent { background-position: 22.222% 0 } .qwerty-C-QC { background-position: 22.222% 5.882% } .qwerty-C-QM { background-position: 22.222% 11.765% } .qwerty-C-QP { background-position: 22.222% 17.647% } .qwerty-C-RU { background-position: 0 23.529% } .qwerty-C-SL { background-position: 5.556% 23.529% } .qwerty-C-TY { background-position: 11.111% 23.529% } .qwerty-C-TZ { background-position: 16.667% 23.529% } .qwerty-C-UU-accent { background-position: 22.222% 23.529% } .qwerty-C-Uu-accent2 { background-position: 27.778% 0 } .qwerty-C-V { background-position: 27.778% 5.882% } .qwerty-C-VM { background-position: 27.778% 11.765% } .qwerty-C-WN { background-position: 27.778% 17.647% } .qwerty-C-WO { background-position: 27.778% 23.529% } .qwerty-C-X { background-position: 0 29.412% } .qwerty-C-XB { background-position: 5.556% 29.412% } .qwerty-C-Xcln { background-position: 11.111% 29.412% } .qwerty-C-Xcln_2 { background-position: 16.667% 29.412% } .qwerty-C-Y-und { background-position: 22.222% 29.412% } .qwerty-C-Z { background-position: 27.778% 29.412% } .qwerty-C-ZM { background-position: 33.333% 0 } .qwerty-C-ZN { background-position: 33.333% 5.882% } .qwerty-C-ZO { background-position: 33.333% 11.765% } .qwerty-R-a { background-position: 33.333% 17.647% } .qwerty-R-a-accent { background-position: 33.333% 23.529% } .qwerty-R-aa-accent { background-position: 33.333% 29.412% } .qwerty-R-an { background-position: 0 35.294% } .qwerty-R-an-accent { background-position: 5.556% 35.294% } .qwerty-R-ao-accent { background-position: 11.111% 35.294% } .qwerty-R-ay { background-position: 16.667% 35.294% } .qwerty-R-bn { background-position: 22.222% 35.294% } .qwerty-R-bp { background-position: 27.778% 35.294% } .qwerty-R-c { background-position: 33.333% 35.294% } .qwerty-R-caps { background-position: 38.889% 0 } .qwerty-R-co-ao { background-position: 38.889% 5.882% } .qwerty-R-co-bk { background-position: 38.889% 11.765% } .qwerty-R-co-dh { background-position: 38.889% 17.647% } .qwerty-R-co-fu { background-position: 38.889% 23.529% } .qwerty-R-co-pl { background-position: 38.889% 29.412% } .qwerty-R-co-qj { background-position: 38.889% 35.294% } .qwerty-R-co-ri { background-position: 0 41.176% } .qwerty-R-co-se { background-position: 5.556% 41.176% } .qwerty-R-co-smig { background-position: 11.111% 41.176% } .qwerty-R-co-tn { background-position: 16.667% 41.176% } .qwerty-R-co-wy { background-position: 22.222% 41.176% } .qwerty-R-co-zslash { background-position: 27.778% 41.176% } .qwerty-R-dk { background-position: 33.333% 41.176% } .qwerty-R-e-accent { background-position: 38.889% 41.176% } .qwerty-R-ei { background-position: 44.444% 0 } .qwerty-R-fj { background-position: 44.444% 5.882% } .qwerty-R-gh { background-position: 44.444% 11.765% } .qwerty-R-i-accent { background-position: 44.444% 17.647% } .qwerty-R-numbers { background-position: 44.444% 23.529% } .qwerty-R-o-accent { background-position: 44.444% 29.412% } .qwerty-R-pt { background-position: 44.444% 35.294% } .qwerty-R-qc { background-position: 44.444% 41.176% } .qwerty-R-qm { background-position: 0 47.059% } .qwerty-R-qp { background-position: 5.556% 47.059% } .qwerty-R-qy { background-position: 11.111% 47.059% } .qwerty-R-ru { background-position: 16.667% 47.059% } .qwerty-R-s-accent { background-position: 22.222% 47.059% } .qwerty-R-sl { background-position: 27.778% 47.059% } .qwerty-R-slash { background-position: 33.333% 47.059% } .qwerty-R-symbols2 { background-position: 38.889% 47.059% } .qwerty-R-symbols3 { background-position: 44.444% 47.059% } .qwerty-R-tp { background-position: 50% 0 } .qwerty-R-ty { background-position: 50% 5.882% } .qwerty-R-tz { background-position: 50% 11.765% } .qwerty-R-u-accent { background-position: 50% 17.647% } .qwerty-R-uu-accent { background-position: 50% 23.529% } .qwerty-R-v { background-position: 50% 29.412% } .qwerty-R-vm { background-position: 50% 35.294% } .qwerty-R-wo { background-position: 50% 41.176% } .qwerty-R-x { background-position: 50% 47.059% } .qwerty-R-y-dash { background-position: 0 52.941% } .qwerty-R-z { background-position: 5.556% 52.941% } .qwerty-R-zdash { background-position: 11.111% 52.941% } .qwerty-R-zm { background-position: 16.667% 52.941% } .qwerty-R-zo { background-position: 22.222% 52.941% } .qwerty-a { background-position: 27.778% 52.941% } .qwerty-a-accent { background-position: 33.333% 52.941% } .qwerty-aa-accent { background-position: 38.889% 52.941% } .qwerty-an { background-position: 44.444% 52.941% } .qwerty-an-accent { background-position: 50% 52.941% } .qwerty-ao-accent { background-position: 55.556% 0 } .qwerty-ay { background-position: 55.556% 5.882% } .qwerty-bn { background-position: 55.556% 11.765% } .qwerty-bp { background-position: 55.556% 17.647% } .qwerty-c { background-position: 55.556% 23.529% } .qwerty-ca-fr-C-C { background-position: 55.556% 29.412% } .qwerty-ca-fr-C-X { background-position: 55.556% 35.294% } .qwerty-ca-fr-C-ZE { background-position: 55.556% 41.176% } .qwerty-ca-fr-R-ee-accent { background-position: 55.556% 47.059% } .qwerty-ca-fr-R-ii-accent { background-position: 55.556% 52.941% } .qwerty-ca-fr-R-ze { background-position: 0 58.824% } .qwerty-ca-fr-ee-accent { background-position: 5.556% 58.824% } .qwerty-ca-fr-ii-accent { background-position: 11.111% 58.824% } .qwerty-ca-fr-ze { background-position: 16.667% 58.824% } .qwerty-ch-C-C { background-position: 22.222% 58.824% } .qwerty-ch-C-X { background-position: 27.778% 58.824% } .qwerty-ch-C-Z { background-position: 33.333% 58.824% } .qwerty-co-C-AO { background-position: 38.889% 58.824% } .qwerty-co-C-BK { background-position: 44.444% 58.824% } .qwerty-co-C-DH { background-position: 50% 58.824% } .qwerty-co-C-FU { background-position: 55.556% 58.824% } .qwerty-co-C-GJ { background-position: 61.111% 0 } .qwerty-co-C-PL { background-position: 61.111% 5.882% } .qwerty-co-C-Qcln { background-position: 61.111% 11.765% } .qwerty-co-C-RI { background-position: 61.111% 17.647% } .qwerty-co-C-SE { background-position: 61.111% 23.529% } .qwerty-co-C-TN { background-position: 61.111% 29.412% } .qwerty-co-C-WY { background-position: 61.111% 35.294% } .qwerty-co-ao { background-position: 61.111% 41.176% } .qwerty-co-bk { background-position: 61.111% 47.059% } .qwerty-co-dh { background-position: 61.111% 52.941% } .qwerty-co-fu { background-position: 61.111% 58.824% } .qwerty-co-pl { background-position: 0 64.706% } .qwerty-co-qj { background-position: 5.556% 64.706% } .qwerty-co-ri { background-position: 11.111% 64.706% } .qwerty-co-se { background-position: 16.667% 64.706% } .qwerty-co-smig { background-position: 22.222% 64.706% } .qwerty-co-tn { background-position: 27.778% 64.706% } .qwerty-co-wy { background-position: 33.333% 64.706% } .qwerty-co-zslash { background-position: 38.889% 64.706% } .qwerty-cz-C-C-accent { background-position: 44.444% 64.706% } .qwerty-cz-C-D-accent { background-position: 50% 64.706% } .qwerty-cz-C-N-accent { background-position: 55.556% 64.706% } .qwerty-cz-C-R-accent { background-position: 61.111% 64.706% } .qwerty-cz-C-S-accent { background-position: 66.667% 0 } .qwerty-cz-C-T-accent { background-position: 66.667% 5.882% } .qwerty-cz-C-U-accent { background-position: 66.667% 11.765% } .qwerty-cz-C-Z-accent { background-position: 66.667% 17.647% } .qwerty-cz-R-au-accent { background-position: 66.667% 23.529% } .qwerty-cz-R-ei-accent { background-position: 66.667% 29.412% } .qwerty-cz-R-rz-accent { background-position: 66.667% 35.294% } .qwerty-cz-R-t-accent { background-position: 66.667% 41.176% } .qwerty-cz-R-uu-accent { background-position: 66.667% 47.059% } .qwerty-cz-au-accent { background-position: 66.667% 52.941% } .qwerty-cz-ei-accent { background-position: 66.667% 58.824% } .qwerty-cz-rz-accent { background-position: 66.667% 64.706% } .qwerty-cz-t-accent { background-position: 0 70.588% } .qwerty-cz-uu-accent { background-position: 5.556% 70.588% } .qwerty-dk { background-position: 11.111% 70.588%; } .qwerty-e-accent { background-position: 16.667% 70.588% } .qwerty-ei { background-position: 22.222% 70.588% } .qwerty-fj { background-position: 27.778% 70.588% } .qwerty-fr-C-C { background-position: 33.333% 70.588% } .qwerty-fr-C-V { background-position: 38.889% 70.588% } .qwerty-fr-R-aa-accent { background-position: 44.444% 70.588% } .qwerty-fr-R-c { background-position: 50% 70.588% } .qwerty-fr-R-c-accent { background-position: 55.556% 70.588% } .qwerty-fr-R-e-accent { background-position: 61.111% 70.588% } .qwerty-fr-R-ee-accent { background-position: 66.667% 70.588% } .qwerty-fr-R-ei-accent { background-position: 72.222% 0 } .qwerty-fr-R-i-accent { background-position: 72.222% 5.882% } .qwerty-fr-R-o-accent { background-position: 72.222% 11.765% } .qwerty-fr-R-uu-accent { background-position: 72.222% 17.647% } .qwerty-fr-R-v { background-position: 72.222% 23.529% } .qwerty-fr-R-w { background-position: 72.222% 29.412% } .qwerty-fr-R-x { background-position: 72.222% 35.294% } .qwerty-fr-aa-accent { background-position: 72.222% 41.176% } .qwerty-fr-c { background-position: 72.222% 47.059% } .qwerty-fr-c-accent { background-position: 72.222% 52.941% } .qwerty-fr-e-accent { background-position: 72.222% 58.824% } .qwerty-fr-ee-accent { background-position: 72.222% 64.706% } .qwerty-fr-ei-accent { background-position: 72.222% 70.588% } .qwerty-fr-i-accent { background-position: 0 76.471% } .qwerty-fr-o-accent { background-position: 5.556% 76.471% } .qwerty-fr-uu-accent { background-position: 11.111% 76.471% } .qwerty-fr-v { background-position: 16.667% 76.471% } .qwerty-fr-w { background-position: 22.222% 76.471% } .qwerty-fr-x { background-position: 27.778% 76.471% } .qwerty-gh { background-position: 33.333% 76.471% } .qwerty-i-accent { background-position: 38.889% 76.471% } .qwerty-it-C-AC { background-position: 44.444% 76.471% } .qwerty-it-C-C { background-position: 50% 76.471% } .qwerty-it-R-a-accent { background-position: 55.556% 76.471% } .qwerty-it-R-ao-accent { background-position: 61.111% 76.471% } .qwerty-it-R-e-accent { background-position: 66.667% 76.471% } .qwerty-it-R-i-accent { background-position: 72.222% 76.471% } .qwerty-it-R-u-accent { background-position: 77.778% 0 } .qwerty-it-a-accent { background-position: 77.778% 5.882% } .qwerty-it-ao-accent { background-position: 77.778% 11.765% } .qwerty-it-e-accent { background-position: 77.778% 17.647% } .qwerty-it-i-accent { background-position: 77.778% 23.529% } .qwerty-it-u-accent { background-position: 77.778% 29.412% } .qwerty-numbers { background-position: 77.778% 35.294% } .qwerty-o-accent { background-position: 77.778% 41.176% } .qwerty-pl-C-ac { background-position: 77.778% 47.059% } .qwerty-pl-C-ne { background-position: 77.778% 52.941% } .qwerty-pl-C-oo { background-position: 77.778% 58.824% } .qwerty-pl-C-sl { background-position: 77.778% 64.706% } .qwerty-pl-C-zz { background-position: 77.778% 70.588% } .qwerty-pl-R-ac { background-position: 77.778% 76.471% } .qwerty-pl-R-ne { background-position: 0 82.353% } .qwerty-pl-R-oo { background-position: 5.556% 82.353% } .qwerty-pl-R-sl { background-position: 11.111% 82.353% } .qwerty-pl-R-zz { background-position: 16.667% 82.353% } .qwerty-pl-ac { background-position: 22.222% 82.353% } .qwerty-pl-ne { background-position: 27.778% 82.353% } .qwerty-pl-oo { background-position: 33.333% 82.353% } .qwerty-pl-sl { background-position: 38.889% 82.353% } .qwerty-pl-zz { background-position: 44.444% 82.353% } .qwerty-po-R-ac-accent { background-position: 50% 82.353% } .qwerty-po-R-ao-accent { background-position: 55.556% 82.353% } .qwerty-po-R-ao-accent2 { background-position: 61.111% 82.353% } .qwerty-po-R-au-accent { background-position: 66.667% 82.353% } .qwerty-po-R-ea-accent { background-position: 72.222% 82.353% } .qwerty-po-R-ei-accent { background-position: 77.778% 82.353% } .qwerty-po-R-oa-accent { background-position: 83.333% 0 } .qwerty-po-ac-accent { background-position: 83.333% 5.882% } .qwerty-po-ao-accent { background-position: 83.333% 11.765% } .qwerty-po-ao-accent2 { background-position: 83.333% 17.647% } .qwerty-po-au-accent { background-position: 83.333% 23.529% } .qwerty-po-ea-accent { background-position: 83.333% 29.412% } .qwerty-po-ei-accent { background-position: 83.333% 35.294% } .qwerty-po-oa-accent { background-position: 83.333% 41.176% } .qwerty-pt { background-position: 83.333% 47.059% } .qwerty-qc { background-position: 83.333% 52.941% } .qwerty-qm { background-position: 83.333% 58.824% } .qwerty-qp { background-position: 83.333% 64.706% } .qwerty-qy { background-position: 83.333% 70.588% } .qwerty-r-symbols { background-position: 83.333% 76.471% } .qwerty-ru { background-position: 83.333% 82.353% } .qwerty-ru-C-Acln { background-position: 0 88.235% } .qwerty-ru-C-BN { background-position: 5.556% 88.235% } .qwerty-ru-C-Cless { background-position: 11.111% 88.235% } .qwerty-ru-C-DK { background-position: 16.667% 88.235% } .qwerty-ru-C-EE { background-position: 22.222% 88.235% } .qwerty-ru-C-EI { background-position: 27.778% 88.235% } .qwerty-ru-C-FJ { background-position: 33.333% 88.235% } .qwerty-ru-C-GH { background-position: 38.889% 88.235% } .qwerty-ru-C-QP { background-position: 44.444% 88.235% } .qwerty-ru-C-RU { background-position: 50% 88.235% } .qwerty-ru-C-SL { background-position: 55.556% 88.235% } .qwerty-ru-C-TY { background-position: 61.111% 88.235% } .qwerty-ru-C-VM { background-position: 66.667% 88.235% } .qwerty-ru-C-WO { background-position: 72.222% 88.235% } .qwerty-ru-C-XB { background-position: 77.778% 88.235% } .qwerty-ru-C-Xgreat { background-position: 83.333% 88.235% } .qwerty-ru-C-Zquestion { background-position: 88.889% 0 } .qwerty-ru-R-asmi { background-position: 88.889% 5.882% } .qwerty-ru-R-bn { background-position: 88.889% 11.765% } .qwerty-ru-R-ccomma { background-position: 88.889% 17.647% } .qwerty-ru-R-dk { background-position: 88.889% 23.529% } .qwerty-ru-R-ee { background-position: 88.889% 29.412% } .qwerty-ru-R-ei { background-position: 88.889% 35.294% } .qwerty-ru-R-fj { background-position: 88.889% 41.176% } .qwerty-ru-R-gh { background-position: 88.889% 47.059% } .qwerty-ru-R-qp { background-position: 88.889% 52.941% } .qwerty-ru-R-ru { background-position: 88.889% 58.824% } .qwerty-ru-R-sl { background-position: 88.889% 64.706% } .qwerty-ru-R-ty { background-position: 88.889% 70.588% } .qwerty-ru-R-vm { background-position: 88.889% 76.471% } .qwerty-ru-R-wo { background-position: 88.889% 82.353% } .qwerty-ru-R-xb { background-position: 88.889% 88.235% } .qwerty-ru-R-xdot { background-position: 0 94.118% } .qwerty-ru-R-zslash { background-position: 5.556% 94.118% } .qwerty-ru-asmi { background-position: 11.111% 94.118% } .qwerty-ru-bn { background-position: 16.667% 94.118% } .qwerty-ru-ccomma { background-position: 22.222% 94.118% } .qwerty-ru-dk { background-position: 27.778% 94.118% } .qwerty-ru-ee { background-position: 33.333% 94.118% } .qwerty-ru-ei { background-position: 38.889% 94.118% } .qwerty-ru-fj { background-position: 44.444% 94.118% } .qwerty-ru-gh { background-position: 50% 94.118% } .qwerty-ru-qp { background-position: 55.556% 94.118% } .qwerty-ru-ru { background-position: 61.111% 94.118% } .qwerty-ru-sl { background-position: 66.667% 94.118% } .qwerty-ru-ty { background-position: 72.222% 94.118% } .qwerty-ru-vm { background-position: 77.778% 94.118% } .qwerty-ru-wo { background-position: 83.333% 94.118% } .qwerty-ru-xb { background-position: 88.889% 94.118% } .qwerty-ru-xdot { background-position: 94.444% 0 } .qwerty-ru-zslash { background-position: 94.444% 5.882% } .qwerty-s-accent { background-position: 94.444% 11.765% } .qwerty-sl { background-position: 94.444% 17.647% } .qwerty-sl-C-A { background-position: 94.444% 23.529% } .qwerty-sl-R-a-accent { background-position: 94.444% 29.412% } .qwerty-sl-R-ao-accent { background-position: 94.444% 35.294% } .qwerty-sl-R-cy-accent { background-position: 94.444% 41.176% } .qwerty-sl-R-d-accent { background-position: 94.444% 47.059% } .qwerty-sl-R-e-accent { background-position: 94.444% 52.941% } .qwerty-sl-R-ii-accent { background-position: 94.444% 58.824% } .qwerty-sl-R-n-accent { background-position: 94.444% 64.706% } .qwerty-sl-R-o-accent { background-position: 94.444% 70.588% } .qwerty-sl-R-sa-accent { background-position: 94.444% 76.471% } .qwerty-sl-R-tz-accent { background-position: 94.444% 82.353% } .qwerty-sl-R-u-accent { background-position: 94.444% 88.235% } .qwerty-sl-a-accent { background-position: 94.444% 94.118% } .qwerty-sl-ao-accent { background-position: 0 100% } .qwerty-sl-cy-accent { background-position: 5.556% 100% } .qwerty-sl-d-accent { background-position: 11.111% 100% } .qwerty-sl-e-accent { background-position: 16.667% 100% } .qwerty-sl-ii-accent { background-position: 22.222% 100% } .qwerty-sl-n-accent { background-position: 27.778% 100% } .qwerty-sl-o-accent { background-position: 33.333% 100% } .qwerty-sl-sa-accent { background-position: 38.889% 100% } .qwerty-sl-tz-accent { background-position: 44.444% 100% } .qwerty-sl-u-accent { background-position: 50% 100% } .qwerty-slash { background-position: 55.556% 100% } .qwerty-sw-C-QA { background-position: 61.111% 100% } .qwerty-sw-R-qa { background-position: 66.667% 100% } .qwerty-sw-qa { background-position: 72.222% 100% } .qwerty-tp { background-position: 77.778% 100% } .qwerty-ty { background-position: 83.333% 100% } .qwerty-tz { background-position: 88.889% 100% } .qwerty-u-accent { background-position: 94.444% 100% } .qwerty-uu-accent { background-position: 100% 0 } .qwerty-v { background-position: 100% 5.882% } .qwerty-vm { background-position: 100% 11.765% } .qwerty-wo { background-position: 100% 17.647% } .qwerty-x { background-position: 100% 23.529% } .qwerty-y-dash { background-position: 100% 29.412% } .qwerty-zdash { background-position: 100% 35.294% } .qwerty-zm { background-position: 100% 41.176% } .qwerty-zo { background-position: 100% 47.059% } .e-qwerty2 { width: 100px; height: 100px; background: url("/m/build/img/svgsprite-qwerty2.svg?v2") no-repeat } .qwerty2-ar-R-asmi { background-position: 0 0 } .qwerty2-ar-R-bn { background-position: 6.667% 0 } .qwerty2-ar-R-ccomma { background-position: 0 7.143% } .qwerty2-ar-R-dk { background-position: 6.667% 7.143% } .qwerty2-ar-R-ei { background-position: 13.333% 0 } .qwerty2-ar-R-fj { background-position: 13.333% 7.143% } .qwerty2-ar-R-gh { background-position: 0 14.286% } .qwerty2-ar-R-jd { background-position: 6.667% 14.286% } .qwerty2-ar-R-pt { background-position: 13.333% 14.286% } .qwerty2-ar-R-qy { background-position: 20% 0 } .qwerty2-ar-R-ru { background-position: 20% 7.143% } .qwerty2-ar-R-sl { background-position: 20% 14.286% } .qwerty2-ar-R-vm { background-position: 0 21.429% } .qwerty2-ar-R-wo { background-position: 6.667% 21.429% } .qwerty2-ar-R-xdot { background-position: 13.333% 21.429% } .qwerty2-ar-R-zslash { background-position: 20% 21.429% } .qwerty2-ar-R-zt { background-position: 26.667% 0 } .qwerty2-ar-asmi { background-position: 26.667% 7.143% } .qwerty2-ar-bn { background-position: 26.667% 14.286% } .qwerty2-ar-ccomma { background-position: 26.667% 21.429% } .qwerty2-ar-dk { background-position: 0 28.571% } .qwerty2-ar-ei { background-position: 6.667% 28.571% } .qwerty2-ar-fj { background-position: 13.333% 28.571% } .qwerty2-ar-gh { background-position: 20% 28.571% } .qwerty2-ar-jd { background-position: 26.667% 28.571% } .qwerty2-ar-pt { background-position: 33.333% 0 } .qwerty2-ar-qy { background-position: 33.333% 7.143% } .qwerty2-ar-ru { background-position: 33.333% 14.286% } .qwerty2-ar-sl { background-position: 33.333% 21.429% } .qwerty2-ar-vm { background-position: 33.333% 28.571% } .qwerty2-ar-wo { background-position: 0 35.714% } .qwerty2-ar-xdot { background-position: 6.667% 35.714% } .qwerty2-ar-zslash { background-position: 13.333% 35.714% } .qwerty2-ar-zt { background-position: 20% 35.714% } .qwerty2-bg-C-acln { background-position: 26.667% 35.714% } .qwerty2-bg-C-bn { background-position: 33.333% 35.714% } .qwerty2-bg-C-bnn { background-position: 40% 0 } .qwerty2-bg-C-cless { background-position: 40% 7.143% } .qwerty2-bg-C-dk { background-position: 40% 14.286% } .qwerty2-bg-C-ei { background-position: 40% 21.429% } .qwerty2-bg-C-fj { background-position: 40% 28.571% } .qwerty2-bg-C-gh { background-position: 40% 35.714% } .qwerty2-bg-C-qp { background-position: 0 42.857% } .qwerty2-bg-C-ru { background-position: 6.667% 42.857% } .qwerty2-bg-C-sl { background-position: 13.333% 42.857% } .qwerty2-bg-C-ty { background-position: 20% 42.857% } .qwerty2-bg-C-vm { background-position: 26.667% 42.857% } .qwerty2-bg-C-wo { background-position: 33.333% 42.857% } .qwerty2-bg-C-ww { background-position: 40% 42.857% } .qwerty2-bg-C-xgreat { background-position: 46.667% 0 } .qwerty2-bg-C-yp { background-position: 46.667% 7.143% } .qwerty2-bg-C-zquest { background-position: 46.667% 14.286% } .qwerty2-bg-R-asmi { background-position: 46.667% 21.429% } .qwerty2-bg-R-bn { background-position: 46.667% 28.571% } .qwerty2-bg-R-ccomma { background-position: 46.667% 35.714% } .qwerty2-bg-R-dk { background-position: 46.667% 42.857% } .qwerty2-bg-R-ei { background-position: 0 50% } .qwerty2-bg-R-fj { background-position: 6.667% 50% } .qwerty2-bg-R-gh { background-position: 13.333% 50% } .qwerty2-bg-R-qy { background-position: 20% 50% } .qwerty2-bg-R-ru { background-position: 26.667% 50% } .qwerty2-bg-R-sl { background-position: 33.333% 50% } .qwerty2-bg-R-tp { background-position: 40% 50% } .qwerty2-bg-R-vm { background-position: 46.667% 50% } .qwerty2-bg-R-wo { background-position: 53.333% 0 } .qwerty2-bg-R-ww { background-position: 53.333% 7.143% } .qwerty2-bg-R-xdot { background-position: 53.333% 14.286% } .qwerty2-bg-R-yp { background-position: 53.333% 21.429% } .qwerty2-bg-R-zslash { background-position: 53.333% 28.571% } .qwerty2-bg-asmi { background-position: 53.333% 35.714% } .qwerty2-bg-bn { background-position: 53.333% 42.857% } .qwerty2-bg-ccomma { background-position: 53.333% 50% } .qwerty2-bg-dk { background-position: 0 57.143% } .qwerty2-bg-ei { background-position: 6.667% 57.143% } .qwerty2-bg-fj { background-position: 13.333% 57.143% } .qwerty2-bg-gh { background-position: 20% 57.143% } .qwerty2-bg-qy { background-position: 26.667% 57.143% } .qwerty2-bg-ru { background-position: 33.333% 57.143% } .qwerty2-bg-sl { background-position: 40% 57.143% } .qwerty2-bg-tp { background-position: 46.667% 57.143% } .qwerty2-bg-vm { background-position: 53.333% 57.143% } .qwerty2-bg-wo { background-position: 60% 0 } .qwerty2-bg-ww { background-position: 60% 7.143% } .qwerty2-bg-xdot { background-position: 60% 14.286% } .qwerty2-bg-yp { background-position: 60% 21.429% } .qwerty2-bg-zslash { background-position: 60% 28.571% } .qwerty2-br-C-Zcol { background-position: 60% 35.714% } .qwerty2-fa-R-asmi { background-position: 60% 42.857% } .qwerty2-fa-R-bn { background-position: 60% 50% } .qwerty2-fa-R-ccomma { background-position: 60% 57.143% } .qwerty2-fa-R-dk { background-position: 0 64.286% } .qwerty2-fa-R-sback { background-position: 6.667% 64.286% } .qwerty2-fa-R-ss { background-position: 13.333% 64.286% } .qwerty2-fa-R-vm { background-position: 20% 64.286% } .qwerty2-fa-R-xdot { background-position: 26.667% 64.286% } .qwerty2-fa-R-zslash { background-position: 33.333% 64.286% } .qwerty2-fa-asmi { background-position: 40% 64.286% } .qwerty2-fa-bn { background-position: 46.667% 64.286% } .qwerty2-fa-ccomma { background-position: 53.333% 64.286% } .qwerty2-fa-dk { background-position: 60% 64.286% } .qwerty2-fa-sback { background-position: 66.667% 0 } .qwerty2-fa-ss { background-position: 66.667% 7.143% } .qwerty2-fa-vm { background-position: 66.667% 14.286% } .qwerty2-fa-xdot { background-position: 66.667% 21.429% } .qwerty2-fa-zslash { background-position: 66.667% 28.571% } .qwerty2-he-R-asmi { background-position: 66.667% 35.714% } .qwerty2-he-R-bn { background-position: 66.667% 42.857% } .qwerty2-he-R-ccma { background-position: 66.667% 50% } .qwerty2-he-R-dk { background-position: 66.667% 57.143% } .qwerty2-he-R-ei { background-position: 66.667% 64.286% } .qwerty2-he-R-fj { background-position: 0 71.429% } .qwerty2-he-R-gh { background-position: 6.667% 71.429% } .qwerty2-he-R-qy { background-position: 13.333% 71.429% } .qwerty2-he-R-ru { background-position: 20% 71.429% } .qwerty2-he-R-sl { background-position: 26.667% 71.429% } .qwerty2-he-R-tp { background-position: 33.333% 71.429% } .qwerty2-he-R-vm { background-position: 40% 71.429% } .qwerty2-he-R-wo { background-position: 46.667% 71.429% } .qwerty2-he-R-xdot { background-position: 53.333% 71.429% } .qwerty2-he-R-zslsh { background-position: 60% 71.429% } .qwerty2-he-asmi { background-position: 66.667% 71.429% } .qwerty2-he-bn { background-position: 73.333% 0 } .qwerty2-he-ccma { background-position: 73.333% 7.143% } .qwerty2-he-dk { background-position: 73.333% 14.286% } .qwerty2-he-ei { background-position: 73.333% 21.429% } .qwerty2-he-fj { background-position: 73.333% 28.571% } .qwerty2-he-gh { background-position: 73.333% 35.714% } .qwerty2-he-qy { background-position: 73.333% 42.857% } .qwerty2-he-ru { background-position: 73.333% 50% } .qwerty2-he-sl { background-position: 73.333% 57.143% } .qwerty2-he-tp { background-position: 73.333% 64.286% } .qwerty2-he-vm { background-position: 73.333% 71.429% } .qwerty2-he-wo { background-position: 0 78.571% } .qwerty2-he-xdot { background-position: 6.667% 78.571% } .qwerty2-he-zslsh { background-position: 13.333% 78.571% } .qwerty2-hu-C-AE { background-position: 20% 78.571% } .qwerty2-hu-C-IA { background-position: 26.667% 78.571% } .qwerty2-hu-C-OU { background-position: 33.333% 78.571% } .qwerty2-hu-C-OU2 { background-position: 40% 78.571% } .qwerty2-hu-C-OU3 { background-position: 46.667% 78.571% } .qwerty2-hu-R-ae { background-position: 53.333% 78.571% } .qwerty2-hu-R-ia { background-position: 60% 78.571% } .qwerty2-hu-R-ou { background-position: 66.667% 78.571% } .qwerty2-hu-R-ou2 { background-position: 73.333% 78.571% } .qwerty2-hu-R-ou3 { background-position: 80% 0 } .qwerty2-hu-ae { background-position: 80% 7.143% } .qwerty2-hu-ia { background-position: 80% 14.286% } .qwerty2-hu-ou { background-position: 80% 21.429% } .qwerty2-hu-ou2 { background-position: 80% 28.571% } .qwerty2-hu-ou3 { background-position: 80% 35.714% } .qwerty2-ko-R-asmi { background-position: 80% 42.857% } .qwerty2-ko-R-bn { background-position: 80% 50% } .qwerty2-ko-R-br1 { background-position: 80% 57.143% } .qwerty2-ko-R-br2 { background-position: 80% 64.286% } .qwerty2-ko-R-br3 { background-position: 80% 71.429% } .qwerty2-ko-R-ccomma { background-position: 80% 78.571% } .qwerty2-ko-R-dk { background-position: 0 85.714% } .qwerty2-ko-R-ee { background-position: 6.667% 85.714% } .qwerty2-ko-R-ei { background-position: 13.333% 85.714% } .qwerty2-ko-R-fa { background-position: 20% 85.714% } .qwerty2-ko-R-fg { background-position: 26.667% 85.714% } .qwerty2-ko-R-fj { background-position: 33.333% 85.714% } .qwerty2-ko-R-fq { background-position: 40% 85.714% } .qwerty2-ko-R-fr { background-position: 46.667% 85.714% } .qwerty2-ko-R-ft { background-position: 53.333% 85.714% } .qwerty2-ko-R-fv { background-position: 60% 85.714% } .qwerty2-ko-R-fx { background-position: 66.667% 85.714% } .qwerty2-ko-R-gh { background-position: 73.333% 85.714% } .qwerty2-ko-R-mix { background-position: 80% 85.714% } .qwerty2-ko-R-oo { background-position: 86.667% 0 } .qwerty2-ko-R-pp { background-position: 86.667% 7.143% } .qwerty2-ko-R-qp { background-position: 86.667% 14.286% } .qwerty2-ko-R-qq { background-position: 86.667% 21.429% } .qwerty2-ko-R-qt { background-position: 86.667% 28.571% } .qwerty2-ko-R-rr { background-position: 86.667% 35.714% } .qwerty2-ko-R-rt { background-position: 86.667% 42.857% } .qwerty2-ko-R-ru { background-position: 86.667% 50% } .qwerty2-ko-R-sg { background-position: 86.667% 57.143% } .qwerty2-ko-R-sl { background-position: 86.667% 64.286% } .qwerty2-ko-R-sw { background-position: 86.667% 71.429% } .qwerty2-ko-R-tt { background-position: 86.667% 78.571% } .qwerty2-ko-R-ty { background-position: 86.667% 85.714% } .qwerty2-ko-R-vm { background-position: 0 92.857% } .qwerty2-ko-R-wo { background-position: 6.667% 92.857% } .qwerty2-ko-R-ww { background-position: 13.333% 92.857% } .qwerty2-ko-R-xdot { background-position: 20% 92.857% } .qwerty2-ko-R-zslash { background-position: 26.667% 92.857% } .qwerty2-ko-asmi { background-position: 33.333% 92.857% } .qwerty2-ko-bn { background-position: 40% 92.857% } .qwerty2-ko-br1 { background-position: 46.667% 92.857% } .qwerty2-ko-br2 { background-position: 53.333% 92.857% } .qwerty2-ko-br3 { background-position: 60% 92.857% } .qwerty2-ko-ccomma { background-position: 66.667% 92.857% } .qwerty2-ko-dk { background-position: 73.333% 92.857% } .qwerty2-ko-ee { background-position: 80% 92.857% } .qwerty2-ko-ei { background-position: 86.667% 92.857% } .qwerty2-ko-fa { background-position: 93.333% 0 } .qwerty2-ko-fg { background-position: 93.333% 7.143% } .qwerty2-ko-fj { background-position: 93.333% 14.286% } .qwerty2-ko-fq { background-position: 93.333% 21.429% } .qwerty2-ko-fr { background-position: 93.333% 28.571% } .qwerty2-ko-ft { background-position: 93.333% 35.714% } .qwerty2-ko-fv { background-position: 93.333% 42.857% } .qwerty2-ko-fx { background-position: 93.333% 50% } .qwerty2-ko-gh { background-position: 93.333% 57.143% } .qwerty2-ko-mix { background-position: 93.333% 64.286% } .qwerty2-ko-oo { background-position: 93.333% 71.429% } .qwerty2-ko-pp { background-position: 93.333% 78.571% } .qwerty2-ko-qp { background-position: 93.333% 85.714% } .qwerty2-ko-qq { background-position: 93.333% 92.857% } .qwerty2-ko-qt { background-position: 0 100% } .qwerty2-ko-rr { background-position: 6.667% 100% } .qwerty2-ko-rt { background-position: 13.333% 100% } .qwerty2-ko-ru { background-position: 20% 100% } .qwerty2-ko-sg { background-position: 26.667% 100% } .qwerty2-ko-sl { background-position: 33.333% 100% } .qwerty2-ko-sw { background-position: 40% 100% } .qwerty2-ko-tt { background-position: 46.667% 100% } .qwerty2-ko-ty { background-position: 53.333% 100% } .qwerty2-ko-vm { background-position: 60% 100% } .qwerty2-ko-wo { background-position: 66.667% 100% } .qwerty2-ko-ww { background-position: 73.333% 100% } .qwerty2-ko-xdot { background-position: 80% 100% } .qwerty2-ko-zslash { background-position: 86.667% 100% } .qwerty2-nl-C-ee-accent { background-position: 93.333% 100% } .qwerty2-nl-R-uo-accent { background-position: 100% 0 } .qwerty2-nl-uo-accent { background-position: 100% 7.143% } .qwerty2-pt-C-EA { background-position: 100% 14.286% } .qwerty2-pt-R-slashes { background-position: 100% 21.429% } .qwerty2-pt-R-zsmi { background-position: 100% 28.571% } .qwerty2-pt-pipequestion { background-position: 100% 35.714% } .qwerty2-pt-slashes { background-position: 100% 42.857% } .qwerty2-pt-zsmi { background-position: 100% 50% } .qwerty2-swiss-C-UAdot { background-position: 100% 57.143% } .e-dvorak { width: 100px; height: 100px; background: url("/m/build/img/svgsprite-dvorak.svg?v2") no-repeat } .dvorak-C-AS { background-position: 0 0 } .dvorak-C-CL { background-position: 16.667% 0 } .dvorak-C-ET { background-position: 0 16.667% } .dvorak-C-FR { background-position: 16.667% 16.667% } .dvorak-C-ID { background-position: 33.333% 0 } .dvorak-C-JW { background-position: 33.333% 16.667% } .dvorak-C-KM { background-position: 0 33.333% } .dvorak-C-ON { background-position: 16.667% 33.333% } .dvorak-C-PG { background-position: 33.333% 33.333% } .dvorak-C-QV { background-position: 50% 0 } .dvorak-C-UH { background-position: 50% 16.667% } .dvorak-C-XB { background-position: 50% 33.333% } .dvorak-C-Y { background-position: 0 50% } .dvorak-C-Z { background-position: 16.667% 50% } .dvorak-R-as { background-position: 33.333% 50% } .dvorak-R-c { background-position: 50% 50% } .dvorak-R-et { background-position: 66.667% 0 } .dvorak-R-f { background-position: 66.667% 16.667% } .dvorak-R-id { background-position: 66.667% 33.333% } .dvorak-R-jw { background-position: 66.667% 50% } .dvorak-R-km { background-position: 0 66.667% } .dvorak-R-on { background-position: 16.667% 66.667% } .dvorak-R-pg { background-position: 33.333% 66.667% } .dvorak-R-qv { background-position: 50% 66.667% } .dvorak-R-r { background-position: 66.667% 66.667% } .dvorak-R-uh { background-position: 83.333% 0 } .dvorak-R-xb { background-position: 83.333% 16.667% } .dvorak-R-yl { background-position: 83.333% 33.333% } .dvorak-R-z { background-position: 83.333% 50% } .dvorak-as { background-position: 83.333% 66.667% } .dvorak-c { background-position: 0 83.333% } .dvorak-et { background-position: 16.667% 83.333% } .dvorak-f { background-position: 33.333% 83.333% } .dvorak-id { background-position: 50% 83.333% } .dvorak-jw { background-position: 66.667% 83.333% } .dvorak-km { background-position: 83.333% 83.333% } .dvorak-on { background-position: 100% 0 } .dvorak-pg { background-position: 100% 16.667% } .dvorak-qv { background-position: 100% 33.333% } .dvorak-r { background-position: 100% 50% } .dvorak-uh { background-position: 100% 66.667% } .dvorak-xb { background-position: 100% 83.333% } .dvorak-yl { background-position: 0 100% } .dvorak-z { background-position: 16.667% 100% } .e-pmatch { width: 100px; height: 100px; background: url("/m/build/img/svgsprite-pmatch.svg?v2") no-repeat } .pmatch-1 { background-position: 0 0 } .pmatch-10 { background-position: 25% 0 } .pmatch-11 { background-position: 0 33.333% } .pmatch-12 { background-position: 25% 33.333% } .pmatch-13 { background-position: 50% 0 } .pmatch-14 { background-position: 50% 33.333% } .pmatch-15 { background-position: 0 66.667% } .pmatch-16 { background-position: 25% 66.667% } .pmatch-1a { background-position: 50% 66.667% } .pmatch-2 { background-position: 75% 0 } .pmatch-2a { background-position: 75% 33.333% } .pmatch-3 { background-position: 75% 66.667% } .pmatch-4 { background-position: 0 100% } .pmatch-5 { background-position: 25% 100% } .pmatch-6 { background-position: 50% 100% } .pmatch-7 { background-position: 75% 100% } .pmatch-8 { background-position: 100% 0 } .pmatch-9 { background-position: 100% 33.333% } .e-k { width: 100px; height: 100px; background: url("/m/build/img/svgsprite-k.svg?v2") no-repeat } .k-01-wide { background-position: 0 0; width: 160px; height: 160px } .k-02-wide { background-position: 10.811% 0; width: 160px; height: 160px } .k-03-wide { background-position: 0 10.811%; width: 160px; height: 160px } .k-04-wide { background-position: 10.811% 10.811%; width: 160px; height: 160px } .k-05-wide { background-position: 21.622% 0; width: 160px; height: 160px } .k-06-wide { background-position: 21.622% 10.811%; width: 160px; height: 160px } .k-07-wide { background-position: 0 21.622%; width: 160px; height: 160px } .k-08-wide { background-position: 10.811% 21.622%; width: 160px; height: 160px } .k-09-wide { background-position: 21.622% 21.622%; width: 160px; height: 160px } .k-1-jj-esp { background-position: 72.727% 83.117% } .k-10-jj-esp { background-position: 79.221% 83.117% } .k-10-wide { background-position: 32.432% 0; width: 160px; height: 160px } .k-11-jj-esp { background-position: 85.714% 83.117% } .k-11-wide { background-position: 32.432% 10.811%; width: 160px; height: 160px } .k-12-jj-esp { background-position: 93.506% 0 } .k-12-wide { background-position: 32.432% 21.622%; width: 160px; height: 160px } .k-13-jj-esp { background-position: 93.506% 6.494% } .k-13-wide { background-position: 0 32.432%; width: 160px; height: 160px } .k-14-jj-esp { background-position: 93.506% 12.987% } .k-14-wide { background-position: 10.811% 32.432%; width: 160px; height: 160px } .k-15-jj-esp { background-position: 93.506% 19.481% } .k-15-wide { background-position: 21.622% 32.432%; width: 160px; height: 160px } .k-16-jj-esp { background-position: 93.506% 25.974% } .k-16-wide { background-position: 32.432% 32.432%; width: 160px; height: 160px } .k-17-jj-esp { background-position: 93.506% 32.468% } .k-17-wide { background-position: 43.243% 0; width: 160px; height: 160px } .k-18-jj-esp { background-position: 93.506% 38.961% } .k-18-wide { background-position: 43.243% 10.811%; width: 160px; height: 160px } .k-19-jj-esp { background-position: 93.506% 45.455% } .k-19-wide { background-position: 43.243% 21.622%; width: 160px; height: 160px } .k-2-jj-esp { background-position: 93.506% 51.948% } .k-20-jj-esp { background-position: 93.506% 58.442% } .k-20-wide { background-position: 43.243% 32.432%; width: 160px; height: 160px } .k-21-jj-esp { background-position: 93.506% 64.935% } .k-21-wide { background-position: 0 43.243%; width: 160px; height: 160px } .k-22-jj-esp { background-position: 93.506% 71.429% } .k-22-wide { background-position: 10.811% 43.243%; width: 160px; height: 160px } .k-23-jj-esp { background-position: 93.506% 77.922% } .k-23-wide { background-position: 21.622% 43.243%; width: 160px; height: 160px } .k-24-jj-esp { background-position: 93.506% 84.416% } .k-24-wide { background-position: 32.432% 43.243%; width: 160px; height: 160px } .k-25-jj-esp { background-position: 0 93.506% } .k-25-wide { background-position: 43.243% 43.243%; width: 160px; height: 160px } .k-26-jj-esp { background-position: 6.494% 93.506% } .k-26-wide { background-position: 54.054% 0; width: 160px; height: 160px } .k-27-jj-esp { background-position: 12.987% 93.506% } .k-27-wide { background-position: 54.054% 10.811%; width: 160px; height: 160px } .k-28-jj-esp { background-position: 19.481% 93.506% } .k-28-wide { background-position: 54.054% 21.622%; width: 160px; height: 160px } .k-29-jj-esp { background-position: 25.974% 93.506% } .k-29-wide { background-position: 54.054% 32.432%; width: 160px; height: 160px } .k-3-jj-esp { background-position: 32.468% 93.506% } .k-30-jj-esp { background-position: 38.961% 93.506% } .k-30-wide { background-position: 54.054% 43.243%; width: 160px; height: 160px } .k-31-jj-esp { background-position: 45.455% 93.506% } .k-31-wide { background-position: 0 54.054%; width: 160px; height: 160px } .k-32-jj-esp { background-position: 51.948% 93.506% } .k-32-wide { background-position: 10.811% 54.054%; width: 160px; height: 160px } .k-33-jj-esp { background-position: 58.442% 93.506% } .k-33-wide { background-position: 21.622% 54.054%; width: 160px; height: 160px } .k-34-jj-esp { background-position: 64.935% 93.506% } .k-34-wide { background-position: 32.432% 54.054%; width: 160px; height: 160px } .k-35-jj-esp { background-position: 71.429% 93.506% } .k-35-wide { background-position: 43.243% 54.054%; width: 160px; height: 160px } .k-36-jj-esp { background-position: 77.922% 93.506% } .k-36-wide { background-position: 54.054% 54.054%; width: 160px; height: 160px } .k-37-jj-esp { background-position: 84.416% 93.506% } .k-37-wide { background-position: 64.865% 0; width: 160px; height: 160px } .k-38-jj-esp { background-position: 90.909% 93.506% } .k-38-wide { background-position: 64.865% 10.811%; width: 160px; height: 160px } .k-39-jj-esp { background-position: 100% 0 } .k-39-wide { background-position: 64.865% 21.622%; width: 160px; height: 160px } .k-4-jj-esp { background-position: 100% 6.494% } .k-40-jj-esp { background-position: 100% 12.987% } .k-40-wide { background-position: 64.865% 32.432%; width: 160px; height: 160px } .k-41-jj-esp { background-position: 100% 19.481% } .k-41-wide { background-position: 64.865% 43.243%; width: 160px; height: 160px } .k-42-jj-esp { background-position: 100% 25.974% } .k-42-wide { background-position: 64.865% 54.054%; width: 160px; height: 160px } .k-43-jj-esp { background-position: 100% 32.468% } .k-43-wide { background-position: 0 64.865%; width: 160px; height: 160px } .k-44-jj-esp { background-position: 100% 38.961% } .k-44-wide { background-position: 10.811% 64.865%; width: 160px; height: 160px } .k-45-jj-esp { background-position: 100% 45.455% } .k-45-wide { background-position: 21.622% 64.865%; width: 160px; height: 160px } .k-46-jj-esp { background-position: 100% 51.948% } .k-46-wide { background-position: 32.432% 64.865%; width: 160px; height: 160px } .k-47-jj-esp { background-position: 100% 58.442% } .k-47-wide { background-position: 43.243% 64.865%; width: 160px; height: 160px } .k-48-jj-esp { background-position: 100% 64.935% } .k-48-wide { background-position: 54.054% 64.865%; width: 160px; height: 160px } .k-49-jj-esp { background-position: 100% 71.429% } .k-49-wide { background-position: 64.865% 64.865%; width: 160px; height: 160px } .k-5-jj-esp { background-position: 100% 77.922% } .k-50-jj-esp { background-position: 100% 84.416% } .k-50-wide { background-position: 75.676% 0; width: 160px; height: 160px } .k-51-jj-esp { background-position: 100% 90.909% } .k-51-wide { background-position: 75.676% 10.811%; width: 160px; height: 160px } .k-52-jj-esp { background-position: 0 100% } .k-52-wide { background-position: 75.676% 21.622%; width: 160px; height: 160px } .k-53-jj-esp { background-position: 6.494% 100% } .k-53-wide { background-position: 75.676% 32.432%; width: 160px; height: 160px } .k-54-jj-esp { background-position: 12.987% 100% } .k-54-wide { background-position: 75.676% 43.243%; width: 160px; height: 160px } .k-55-jj-esp { background-position: 19.481% 100% } .k-55-wide { background-position: 75.676% 54.054%; width: 160px; height: 160px } .k-56-jj-esp { background-position: 25.974% 100% } .k-56-wide { background-position: 75.676% 64.865%; width: 160px; height: 160px } .k-57-jj-esp { background-position: 32.468% 100% } .k-57-wide { background-position: 0 75.676%; width: 160px; height: 160px } .k-58-jj-esp { background-position: 38.961% 100% } .k-58-wide { background-position: 10.811% 75.676%; width: 160px; height: 160px } .k-59-jj-esp { background-position: 45.455% 100% } .k-59-wide { background-position: 21.622% 75.676%; width: 160px; height: 160px } .k-6-jj-esp { background-position: 51.948% 100% } .k-60-wide { background-position: 32.432% 75.676%; width: 160px; height: 160px } .k-61-wide { background-position: 43.243% 75.676%; width: 160px; height: 160px } .k-62-wide { background-position: 54.054% 75.676%; width: 160px; height: 160px } .k-63-wide { background-position: 64.865% 75.676%; width: 160px; height: 160px } .k-64-wide { background-position: 75.676% 75.676%; width: 160px; height: 160px } .k-65-wide { background-position: 86.486% 0; width: 160px; height: 160px } .k-66-wide { background-position: 86.486% 10.811%; width: 160px; height: 160px } .k-67-wide { background-position: 86.486% 21.622%; width: 160px; height: 160px } .k-68-wide { background-position: 86.486% 32.432%; width: 160px; height: 160px } .k-69-wide { background-position: 86.486% 43.243%; width: 160px; height: 160px } .k-7-jj-esp { background-position: 58.442% 100% } .k-70-wide { background-position: 86.486% 54.054%; width: 160px; height: 160px } .k-71-wide { background-position: 86.486% 64.865%; width: 160px; height: 160px } .k-72-wide { background-position: 86.486% 75.676%; width: 160px; height: 160px } .k-73-wide { background-position: 0 86.486%; width: 160px; height: 160px } .k-74-wide { background-position: 10.811% 86.486%; width: 160px; height: 160px } .k-75-wide { background-position: 21.622% 86.486%; width: 160px; height: 160px } .k-76-wide { background-position: 32.432% 86.486%; width: 160px; height: 160px } .k-77-wide { background-position: 43.243% 86.486%; width: 160px; height: 160px } .k-78-wide { background-position: 54.054% 86.486%; width: 160px; height: 160px } .k-79-wide { background-position: 64.865% 86.486%; width: 160px; height: 160px } .k-8-jj-esp { background-position: 64.935% 100% } .k-9-jj-esp { background-position: 71.429% 100% } .e-snl { width: 100px; height: 100px; background: url("/m/build/img/svgsprite-snl.svg?v2") no-repeat } .snl-1 { background-position: 0 0 } .snl-10 { background-position: 25% 0 } .snl-11 { background-position: 0 33.333% } .snl-12 { background-position: 25% 33.333% } .snl-13 { background-position: 50% 0 } .snl-14 { background-position: 50% 33.333% } .snl-15 { background-position: 0 66.667% } .snl-16 { background-position: 25% 66.667% } .snl-17 { background-position: 50% 66.667% } .snl-18 { background-position: 75% 0 } .snl-19 { background-position: 75% 33.333% } .snl-2 { background-position: 75% 66.667% } .snl-20 { background-position: 0 100% } .snl-3 { background-position: 25% 100% } .snl-4 { background-position: 50% 100% } .snl-5 { background-position: 75% 100% } .snl-6 { background-position: 100% 0 } .snl-7 { background-position: 100% 33.333% } .snl-8 { background-position: 100% 66.667% } .snl-9 { background-position: 100% 100% } .e-spl { width: 100px; height: 100px; background: url("/m/build/img/svgsprite-spl.svg?v2") no-repeat } .spl-card-wide { background-position: 0 0; width: 160px; height: 160px } .spl-crossword-wide { background-position: 33.333% 0; width: 160px; height: 160px } .spl-dictation-wide { background-position: 0 50%; width: 160px; height: 160px } .spl-dropquiz-wide { background-position: 33.333% 50%; width: 160px; height: 160px } .spl-fillblank-wide { background-position: 66.667% 0; width: 160px; height: 160px } .spl-jumble-wide { background-position: 66.667% 50%; width: 160px; height: 160px } .spl-multiple-wide { background-position: 0 100%; width: 160px; height: 160px } .spl-proofreading-wide { background-position: 33.333% 100%; width: 160px; height: 160px } .spl-spellit-wide { background-position: 66.667% 100%; width: 160px; height: 160px } .spl-story-wide { background-position: 100% 0; width: 160px; height: 160px } .spl-story-wide2 { background-position: 100% 50%; width: 160px; height: 160px } .spl-video-wide { background-position: 100% 100%; width: 160px; height: 160px } .e-agtsh { width: 100px; height: 100px; background: url("/m/build/img/svgsprite-agtsh.svg?v2") no-repeat } .agtsh-1 { background-position: 0 0 } .agtsh-10 { background-position: 25% 0 } .agtsh-11 { background-position: 0 25% } .agtsh-12 { background-position: 25% 25% } .agtsh-13 { background-position: 50% 0 } .agtsh-14 { background-position: 50% 25% } .agtsh-15 { background-position: 0 50% } .agtsh-16 { background-position: 25% 50% } .agtsh-17 { background-position: 50% 50% } .agtsh-18 { background-position: 75% 0 } .agtsh-19 { background-position: 75% 25% } .agtsh-2 { background-position: 75% 50% } .agtsh-20 { background-position: 0 75% } .agtsh-21 { background-position: 25% 75% } .agtsh-22 { background-position: 50% 75% } .agtsh-3 { background-position: 75% 75% } .agtsh-4 { background-position: 100% 0 } .agtsh-5 { background-position: 100% 25% } .agtsh-6 { background-position: 100% 50% } .agtsh-7 { background-position: 100% 75% } .agtsh-8 { background-position: 0 100% } .agtsh-9 { background-position: 25% 100% } .e-cita { width: 100px; height: 100px; background: url("/m/build/img/svgsprite-cita.svg?v2") no-repeat } .cita-1 { background-position: 0 0 } .cita-10 { background-position: 25% 0 } .cita-11 { background-position: 0 25% } .cita-12 { background-position: 25% 25% } .cita-13 { background-position: 50% 0 } .cita-14 { background-position: 50% 25% } .cita-15 { background-position: 0 50% } .cita-16 { background-position: 25% 50% } .cita-17 { background-position: 50% 50% } .cita-18 { background-position: 75% 0 } .cita-19 { background-position: 75% 25% } .cita-2 { background-position: 75% 50% } .cita-20 { background-position: 0 75% } .cita-21 { background-position: 25% 75% } .cita-22 { background-position: 50% 75% } .cita-3 { background-position: 75% 75% } .cita-4 { background-position: 100% 0 } .cita-5 { background-position: 100% 25% } .cita-6 { background-position: 100% 50% } .cita-7 { background-position: 100% 75% } .cita-8 { background-position: 0 100% } .cita-9 { background-position: 25% 100% } .e-tbotcb { width: 100px; height: 100px; background: url("/m/build/img/svgsprite-tbotcb.svg?v2") no-repeat } .tbotcb-1 { background-position: 0 0 } .tbotcb-10 { background-position: 33.333% 0 } .tbotcb-11 { background-position: 0 33.333% } .tbotcb-12 { background-position: 33.333% 33.333% } .tbotcb-13 { background-position: 66.667% 0 } .tbotcb-14 { background-position: 66.667% 33.333% } .tbotcb-15 { background-position: 0 66.667% } .tbotcb-16 { background-position: 33.333% 66.667% } .tbotcb-2 { background-position: 66.667% 66.667% } .tbotcb-3 { background-position: 100% 0 } .tbotcb-4 { background-position: 100% 33.333% } .tbotcb-5 { background-position: 100% 66.667% } .tbotcb-6 { background-position: 0 100% } .tbotcb-7 { background-position: 33.333% 100% } .tbotcb-8 { background-position: 66.667% 100% } .tbotcb-9 { background-position: 100% 100% } .e-edcexp { width: 100px; height: 100px; background: url("/m/build/img/svgsprite-edcexp.svg?v2") no-repeat } .edcexp-50-states { background-position: 70.05% 44.641% } .edcexp-abc-sequencing { background-position: 70.05% 55.691% } .edcexp-active-listening-practice { background-position: 0 0; width: 100px; height: 101px } .edcexp-albums { background-position: 40% 22.32% } .edcexp-alter-image { background-position: 20% 11.16% } .edcexp-apple-pick { background-position: 40.199% 66.74% } .edcexp-barcodes { background-position: 9.96% 0; width: 101px; height: 100px } .edcexp-binary-counter { background-position: 50.149% 66.74% } .edcexp-bingo-card { background-position: 60.1% 66.74% } .edcexp-book-typing { background-position: 70.05% 66.74% } .edcexp-cause-and-effect { background-position: 0 77.901% } .edcexp-chat-simulator { background-position: 20% 0; width: 100px; height: 101px } .edcexp-chat-simulator-typing { background-position: 0 11.173%; width: 100px; height: 101px } .edcexp-color-building { background-position: 9.95% 77.901% } .edcexp-color-by-word { background-position: 19.9% 77.901% } .edcexp-color-mixing { background-position: 9.96% 11.16%; width: 101px; height: 100px } .edcexp-coloring-pages { background-position: 29.851% 77.901% } .edcexp-common-patterns { background-position: 29.98% 0; width: 101px; height: 100px } .edcexp-comparatives-and-superlatives { background-position: 39.801% 77.901% } .edcexp-compare-and-contrast-text { background-position: 49.751% 77.901% } .edcexp-copying-text { background-position: 29.98% 11.05%; width: 101px; height: 100px } .edcexp-crossword { background-position: 0 22.32%; width: 101px; height: 100px } .edcexp-cumulative-letter-practice { background-position: 59.701% 77.901% } .edcexp-decision-making { background-position: 40% 0; width: 100px; height: 101px } .edcexp-definitions { background-position: 10.06% 22.32%; width: 101px; height: 100px } .edcexp-dictation { background-position: 69.652% 77.901% } .edcexp-dictation-2 { background-position: 20.12% 22.32%; width: 101px; height: 100px } .edcexp-digital-footprint { background-position: 79.602% 77.901% } .edcexp-document-typing { background-position: 0 88.95% } .edcexp-drag-and-drop-spatial-concepts { background-position: 9.95% 88.95% } .edcexp-drag-n-drop { background-position: 19.9% 88.95% } .edcexp-drop-quiz { background-position: 0 33.37%; width: 101px; height: 100px } .edcexp-email-response { background-position: 29.851% 88.95% } .edcexp-emotion-wheel { background-position: 39.801% 88.95% } .edcexp-equation-typing { background-position: 10.06% 33.37%; width: 101px; height: 100px } .edcexp-external-computer-parts { background-position: 49.751% 88.95% } .edcexp-files-and-folders { background-position: 59.701% 88.95% } .edcexp-fill-in-blank { background-position: 20.12% 33.37%; width: 101px; height: 100px } .edcexp-fingerspelling { background-position: 69.652% 88.95% } .edcexp-form-fill { background-position: 79.602% 88.95% } .edcexp-free-form-quiz { background-position: 90.05% 0 } .edcexp-fundraiser-simulator { background-position: 30.179% 33.37%; width: 101px; height: 100px } .edcexp-goal-simulator { background-position: 50% 0; width: 101px; height: 101px } .edcexp-hidden-pictures { background-position: 50% 11.16%; width: 101px; height: 100px } .edcexp-highlighting { background-position: 90.05% 11.05% } .edcexp-image-quiz { background-position: 50% 22.21%; width: 101px; height: 100px } .edcexp-image-reveal { background-position: 90.05% 22.099% } .edcexp-inbox-simulator { background-position: 90.05% 33.149% } .edcexp-input-output { background-position: 90.05% 44.199% } .edcexp-internal-computer-parts { background-position: 90.05% 55.249% } .edcexp-jumble { background-position: 50% 33.26%; width: 101px; height: 100px } .edcexp-keyboard-jumbled { background-position: 0 44.469%; width: 101px; height: 101px } .edcexp-lemonade-stand { background-position: 10.06% 44.42%; width: 101px; height: 100px } .edcexp-letter-typing-boxed { background-position: 90.05% 66.298% } .edcexp-letter-typing-junior { background-position: 90.05% 77.348% } .edcexp-magic-brush-flashlight { background-position: 40% 11.173%; width: 100px; height: 101px } .edcexp-magic-mouse { background-position: 90.05% 88.398% } .edcexp-memory-game { background-position: 20.12% 44.42%; width: 101px; height: 100px } .edcexp-missing-letter { background-position: 60.06% 0; width: 101px; height: 101px } .edcexp-mouse-practice-accuracy { background-position: 0 100% } .edcexp-multiple-choice { background-position: 60.06% 11.16%; width: 101px; height: 100px } .edcexp-number-line-skip-counting { background-position: 60.06% 22.21%; width: 101px; height: 100px } .edcexp-paragraph-find-the-x { background-position: 9.95% 100% } .edcexp-password-checker { background-position: 60.06% 33.26%; width: 101px; height: 100px } .edcexp-pdf-generator { background-position: 19.9% 100% } .edcexp-perfect-accuracy { background-position: 29.851% 100% } .edcexp-plurals { background-position: 60.06% 44.309%; width: 101px; height: 100px } .edcexp-proofreading { background-position: 30.179% 44.42%; width: 101px; height: 100px } .edcexp-puzzles { background-position: 40.239% 44.42%; width: 101px; height: 100px } .edcexp-quiz-maker { background-position: 0 55.642%; width: 100px; height: 101px } .edcexp-reading { background-position: 9.96% 55.58%; width: 101px; height: 100px } .edcexp-role-assigment { background-position: 20.02% 55.58%; width: 101px; height: 100px } .edcexp-sentence-xthree { background-position: 70.05% 0; width: 100px; height: 101px } .edcexp-sequence-unscrambler { background-position: 39.801% 100% } .edcexp-sequencing { background-position: 0 66.814%; width: 101px; height: 101px } .edcexp-shape-hunt { background-position: 70.05% 11.173%; width: 100px; height: 101px } .edcexp-shapes-and-colors { background-position: 70.05% 22.345%; width: 100px; height: 101px } .edcexp-sight-word-camera { background-position: 30.08% 55.58%; width: 101px; height: 100px } .edcexp-simplified-flashcards { background-position: 49.751% 100% } .edcexp-simplified-flashcards-2 { background-position: 59.701% 100% } .edcexp-simplified-spelling-test { background-position: 40.139% 55.58%; width: 101px; height: 100px } .edcexp-sorting-game { background-position: 10.06% 66.814%; width: 101px; height: 101px } .edcexp-spelling { background-position: 50.199% 55.58%; width: 101px; height: 100px } .edcexp-spelling-practice-jumble { background-position: 69.652% 100% } .edcexp-stamp-counting { background-position: 79.602% 100% } .edcexp-story { background-position: 20.12% 66.74%; width: 101px; height: 100px } .edcexp-syllable-breaking { background-position: 70.05% 33.518%; width: 100px; height: 101px } .edcexp-syllable-chains { background-position: 80.08% 0; width: 101px; height: 101px } .edcexp-tabligh { background-position: 80.08% 11.16%; width: 101px; height: 100px } .edcexp-take-a-break { background-position: 89.552% 100% } .edcexp-test-game { background-position: 100% 0 } .edcexp-text-drag-and-drop { background-position: 100% 11.05% } .edcexp-timeline { background-position: 80% 22.235%; width: 100px; height: 101px } .edcexp-touchpad-tricks { background-position: 80.08% 33.37%; width: 101px; height: 100px } .edcexp-travelling-lessons { background-position: 80.08% 44.42%; width: 101px; height: 100px } .edcexp-unlock-the-story { background-position: 100% 22.099% } .edcexp-upper-and-lower-case-letters { background-position: 100% 33.149% } .edcexp-video-purple { background-position: 80.08% 55.47%; width: 101px; height: 100px } .edcexp-visual-inspiration { background-position: 100% 44.199% } .edcexp-visual-spelling-story { background-position: 100% 55.249% } .edcexp-vocabulary-and-spelling-test { background-position: 80.08% 66.519%; width: 101px; height: 100px } .edcexp-vocabulary-diagrams { background-position: 100% 66.298% } .edcexp-vr-lets-get-organized { background-position: 30.179% 66.74%; width: 101px; height: 100px } .edcexp-which-one-says { background-position: 100% 77.348% } .edcexp-word-chains { background-position: 100% 88.398% } .edcexp-word-search { background-position: 100% 99.448% } .e-nw { width: 100px; height: 100px; background: url("/m/build/img/svgsprite-nw.svg?v2") no-repeat } .nw-1 { background-position: 0 0 } .nw-10 { background-position: 25% 0 } .nw-11 { background-position: 0 33.333% } .nw-12 { background-position: 25% 33.333% } .nw-13 { background-position: 50% 0 } .nw-14 { background-position: 50% 33.333% } .nw-15 { background-position: 0 66.667% } .nw-16 { background-position: 25% 66.667% } .nw-17 { background-position: 50% 66.667% } .nw-18 { background-position: 75% 0 } .nw-19 { background-position: 75% 33.333% } .nw-2 { background-position: 75% 66.667% } .nw-20 { background-position: 0 100% } .nw-3 { background-position: 25% 100% } .nw-4 { background-position: 50% 100% } .nw-5 { background-position: 75% 100% } .nw-6 { background-position: 100% 0 } .nw-7 { background-position: 100% 33.333% } .nw-8 { background-position: 100% 66.667% } .nw-9 { background-position: 100% 100% } .f32 .flag { background: url(/m/corp2/img/flags32.png) no-repeat; display: inline-block; width: 32px; height: 32px } .f32 ._African_Union { background-position: 0 -32px } .f32 ._Arab_League { background-position: 0 -64px } .f32 ._ASEAN { background-position: 0 -96px } .f32 ._CARICOM { background-position: 0 -128px } .f32 ._CIS { background-position: 0 -160px } .f32 ._Commonwealth { background-position: 0 -192px } .f32 ._England { background-position: 0 -224px } .f32 ._European_Union { background-position: 0 -256px } .f32 ._Islamic_Conference { background-position: 0 -288px } .f32 ._Kosovo { background-position: 0 -320px } .f32 ._NATO { background-position: 0 -352px } .f32 ._Northern_Cyprus { background-position: 0 -384px } .f32 ._Northern_Ireland { background-position: 0 -416px } .f32 ._Olimpic_Movement { background-position: 0 -448px } .f32 ._OPEC { background-position: 0 -480px } .f32 ._Red_Cross { background-position: 0 -512px } .f32 ._Scotland { background-position: 0 -544px } .f32 ._Somaliland { background-position: 0 -576px } .f32 ._Tibet { background-position: 0 -608px } .f32 ._United_Nations { background-position: 0 -640px } .f32 ._Wales { background-position: 0 -672px } .f32 .eu { background-position: 0 -256px } .f32 .ad { background-position: 0 -704px } .f32 .ae { background-position: 0 -736px } .f32 .af { background-position: 0 -768px } .f32 .ag { background-position: 0 -800px } .f32 .ai { background-position: 0 -832px } .f32 .al { background-position: 0 -864px } .f32 .am { background-position: 0 -896px } .f32 .ao { background-position: 0 -928px } .f32 .aq { background-position: 0 -960px } .f32 .ar { background-position: 0 -992px } .f32 .as { background-position: 0 -1024px } .f32 .at { background-position: 0 -1056px } .f32 .au { background-position: 0 -1088px } .f32 .aw { background-position: 0 -1120px } .f32 .ax { background-position: 0 -1152px } .f32 .az { background-position: 0 -1184px } .f32 .ba { background-position: 0 -1216px } .f32 .bb { background-position: 0 -1248px } .f32 .bd { background-position: 0 -1280px } .f32 .be { background-position: 0 -1312px } .f32 .bf { background-position: 0 -1344px } .f32 .bg { background-position: 0 -1376px } .f32 .bh { background-position: 0 -1408px } .f32 .bi { background-position: 0 -1440px } .f32 .bj { background-position: 0 -1472px } .f32 .bm { background-position: 0 -1504px } .f32 .bn { background-position: 0 -1536px } .f32 .bo { background-position: 0 -1568px } .f32 .br { background-position: 0 -1600px } .f32 .bs { background-position: 0 -1632px } .f32 .bt { background-position: 0 -1664px } .f32 .bw { background-position: 0 -1696px } .f32 .by { background-position: 0 -1728px } .f32 .bz { background-position: 0 -1760px } .f32 .ca { background-position: 0 -1792px } .f32 .cd { background-position: 0 -1824px } .f32 .cf { background-position: 0 -1856px } .f32 .cg { background-position: 0 -1888px } .f32 .ch { background-position: 0 -1920px } .f32 .ci { background-position: 0 -1952px } .f32 .ck { background-position: 0 -1984px } .f32 .cl { background-position: 0 -2016px } .f32 .cm { background-position: 0 -2048px } .f32 .cn { background-position: 0 -2080px } .f32 .co { background-position: 0 -2112px } .f32 .cr { background-position: 0 -2144px } .f32 .cu { background-position: 0 -2176px } .f32 .cv { background-position: 0 -2208px } .f32 .cy { background-position: 0 -2240px } .f32 .cz { background-position: 0 -2272px } .f32 .de { background-position: 0 -2304px } .f32 .dj { background-position: 0 -2336px } .f32 .dk { background-position: 0 -2368px } .f32 .dm { background-position: 0 -2400px } .f32 .do { background-position: 0 -2432px } .f32 .dz { background-position: 0 -2464px } .f32 .ec { background-position: 0 -2496px } .f32 .ee { background-position: 0 -2528px } .f32 .eg { background-position: 0 -2560px } .f32 .eh { background-position: 0 -2592px } .f32 .er { background-position: 0 -2624px } .f32 .es { background-position: 0 -2656px } .f32 .et { background-position: 0 -2688px } .f32 .fi { background-position: 0 -2720px } .f32 .fj { background-position: 0 -2752px } .f32 .fm { background-position: 0 -2784px } .f32 .fo { background-position: 0 -2816px } .f32 .fr { background-position: 0 -2848px } .f32 .bl { background-position: 0 -2848px } .f32 .cp { background-position: 0 -2848px } .f32 .mf { background-position: 0 -2848px } .f32 .yt { background-position: 0 -2848px } .f32 .ga { background-position: 0 -2880px } .f32 .gb { background-position: 0 -2912px } .f32 .sh { background-position: 0 -2912px } .f32 .gd { background-position: 0 -2944px } .f32 .ge { background-position: 0 -2976px } .f32 .gg { background-position: 0 -3008px } .f32 .gh { background-position: 0 -3040px } .f32 .gi { background-position: 0 -3072px } .f32 .gl { background-position: 0 -3104px } .f32 .gm { background-position: 0 -3136px } .f32 .gn { background-position: 0 -3168px } .f32 .gp { background-position: 0 -3200px } .f32 .gq { background-position: 0 -3232px } .f32 .gr { background-position: 0 -3264px } .f32 .gt { background-position: 0 -3296px } .f32 .gu { background-position: 0 -3328px } .f32 .gw { background-position: 0 -3360px } .f32 .gy { background-position: 0 -3392px } .f32 .hk { background-position: 0 -3424px } .f32 .hn { background-position: 0 -3456px } .f32 .hr { background-position: 0 -3488px } .f32 .ht { background-position: 0 -3520px } .f32 .hu { background-position: 0 -3552px } .f32 .id { background-position: 0 -3584px } .f32 .mc { background-position: 0 -3584px } .f32 .ie { background-position: 0 -3616px } .f32 .il { background-position: 0 -3648px } .f32 .im { background-position: 0 -3680px } .f32 .in { background-position: 0 -3712px } .f32 .iq { background-position: 0 -3744px } .f32 .ir { background-position: 0 -3776px } .f32 .is { background-position: 0 -3808px } .f32 .it { background-position: 0 -3840px } .f32 .je { background-position: 0 -3872px } .f32 .jm { background-position: 0 -3904px } .f32 .jo { background-position: 0 -3936px } .f32 .jp { background-position: 0 -3968px } .f32 .ke { background-position: 0 -4000px } .f32 .kg { background-position: 0 -4032px } .f32 .kh { background-position: 0 -4064px } .f32 .ki { background-position: 0 -4096px } .f32 .km { background-position: 0 -4128px } .f32 .kn { background-position: 0 -4160px } .f32 .kp { background-position: 0 -4192px } .f32 .kr { background-position: 0 -4224px } .f32 .kw { background-position: 0 -4256px } .f32 .ky { background-position: 0 -4288px } .f32 .kz { background-position: 0 -4320px } .f32 .la { background-position: 0 -4352px } .f32 .lb { background-position: 0 -4384px } .f32 .lc { background-position: 0 -4416px } .f32 .li { background-position: 0 -4448px } .f32 .lk { background-position: 0 -4480px } .f32 .lr { background-position: 0 -4512px } .f32 .ls { background-position: 0 -4544px } .f32 .lt { background-position: 0 -4576px } .f32 .lu { background-position: 0 -4608px } .f32 .lv { background-position: 0 -4640px } .f32 .ly { background-position: 0 -4672px } .f32 .ma { background-position: 0 -4704px } .f32 .md { background-position: 0 -4736px } .f32 .me { background-position: 0 -4768px } .f32 .mg { background-position: 0 -4800px } .f32 .mh { background-position: 0 -4832px } .f32 .mk { background-position: 0 -4864px } .f32 .ml { background-position: 0 -4896px } .f32 .mm { background-position: 0 -4928px } .f32 .mn { background-position: 0 -4960px } .f32 .mo { background-position: 0 -4992px } .f32 .mq { background-position: 0 -5024px } .f32 .mr { background-position: 0 -5056px } .f32 .ms { background-position: 0 -5088px } .f32 .mt { background-position: 0 -5120px } .f32 .mu { background-position: 0 -5152px } .f32 .mv { background-position: 0 -5184px } .f32 .mw { background-position: 0 -5216px } .f32 .mx { background-position: 0 -5248px } .f32 .my { background-position: 0 -5280px } .f32 .mz { background-position: 0 -5312px } .f32 .na { background-position: 0 -5344px } .f32 .nc { background-position: 0 -5376px } .f32 .ne { background-position: 0 -5408px } .f32 .ng { background-position: 0 -5440px } .f32 .ni { background-position: 0 -5472px } .f32 .nl { background-position: 0 -5504px } .f32 .bq { background-position: 0 -5504px } .f32 .no { background-position: 0 -5536px } .f32 .bv { background-position: 0 -5536px } .f32 .nq { background-position: 0 -5536px } .f32 .sj { background-position: 0 -5536px } .f32 .np { background-position: 0 -5568px } .f32 .nr { background-position: 0 -5600px } .f32 .nz { background-position: 0 -5632px } .f32 .om { background-position: 0 -5664px } .f32 .pa { background-position: 0 -5696px } .f32 .pe { background-position: 0 -5728px } .f32 .pf { background-position: 0 -5760px } .f32 .pg { background-position: 0 -5792px } .f32 .ph { background-position: 0 -5824px } .f32 .pk { background-position: 0 -5856px } .f32 .pl { background-position: 0 -5888px } .f32 .pr { background-position: 0 -5920px } .f32 .ps { background-position: 0 -5952px } .f32 .pt { background-position: 0 -5984px } .f32 .pw { background-position: 0 -6016px } .f32 .py { background-position: 0 -6048px } .f32 .qa { background-position: 0 -6080px } .f32 .re { background-position: 0 -6112px } .f32 .ro { background-position: 0 -6144px } .f32 .rs { background-position: 0 -6176px } .f32 .ru { background-position: 0 -6208px } .f32 .rw { background-position: 0 -6240px } .f32 .sa { background-position: 0 -6272px } .f32 .sb { background-position: 0 -6304px } .f32 .sc { background-position: 0 -6336px } .f32 .sd { background-position: 0 -6368px } .f32 .se { background-position: 0 -6400px } .f32 .sg { background-position: 0 -6432px } .f32 .si { background-position: 0 -6464px } .f32 .sk { background-position: 0 -6496px } .f32 .sl { background-position: 0 -6528px } .f32 .sm { background-position: 0 -6560px } .f32 .sn { background-position: 0 -6592px } .f32 .so { background-position: 0 -6624px } .f32 .sr { background-position: 0 -6656px } .f32 .st { background-position: 0 -6688px } .f32 .sv { background-position: 0 -6720px } .f32 .sy { background-position: 0 -6752px } .f32 .sz { background-position: 0 -6784px } .f32 .tc { background-position: 0 -6816px } .f32 .td { background-position: 0 -6848px } .f32 .tg { background-position: 0 -6880px } .f32 .th { background-position: 0 -6912px } .f32 .tj { background-position: 0 -6944px } .f32 .tl { background-position: 0 -6976px } .f32 .tm { background-position: 0 -7008px } .f32 .tn { background-position: 0 -7040px } .f32 .to { background-position: 0 -7072px } .f32 .tr { background-position: 0 -7104px } .f32 .tt { background-position: 0 -7136px } .f32 .tv { background-position: 0 -7168px } .f32 .tw { background-position: 0 -7200px } .f32 .tz { background-position: 0 -7232px } .f32 .ua { background-position: 0 -7264px } .f32 .ug { background-position: 0 -7296px } .f32 .us { background-position: 0 -7328px } .f32 .uy { background-position: 0 -7360px } .f32 .uz { background-position: 0 -7392px } .f32 .va { background-position: 0 -7424px } .f32 .vc { background-position: 0 -7456px } .f32 .ve { background-position: 0 -7488px } .f32 .vg { background-position: 0 -7520px } .f32 .vi { background-position: 0 -7552px } .f32 .vn { background-position: 0 -7584px } .f32 .vu { background-position: 0 -7616px } .f32 .ws { background-position: 0 -7648px } .f32 .ye { background-position: 0 -7680px } .f32 .za { background-position: 0 -7712px } .f32 .zm { background-position: 0 -7744px } .f32 .zw { background-position: 0 -7776px } .f32 .sx { background-position: 0 -7808px } .f32 .cw { background-position: 0 -7840px } .f32 .ss { background-position: 0 -7872px } .f32 .nu { background-position: 0 -7904px } .performance-results .i,.performance-results .j { isolation: isolate } .performance-results .i,.performance-results .j,.performance-results .l,.performance-results .o { fill: none } .performance-results .l { stroke-miterlimit: 10 } .performance-results .o { stroke: #fff } .performance-results .i,.performance-results .j { stroke-width: 18px } .performance-results .i { stroke: #8dd6f3; opacity: .35 } .performance-results .j { stroke: #f5687c; opacity: .39 } .performance-results .l { stroke: #ffc22a; stroke-width: 2.75px } .performance-results .performance-label { position: absolute; font-family: Montserrat; font-weight: 600; font-size: 19px; transform: scale(0); width: 240px; text-align: center } .performance-results .st7 { font-family: "Akrobat-Bold" } .performance-results .st17 { font-size: 62px } .performance-results .st24 { font-size: 63px } .performance-results .st10 { color: #88cce8; font-size: 13px } .performance-results .st8 { font-size: 30.349px; line-height: 1em; height: 1em } .performance-results .st8 span { display: inline-block; transform: translateY(0) } .performance-results .st0 { fill: #fff } .performance-results .st1 { font-family: Montserrat; font-weight: 600 } .performance-results .st2 { font-size: 17px } .performance-results .st3 { fill: none } .performance-results .st4 { fill: none; stroke: #426696; stroke-width: 26.549 } .performance-results .st5 { fill: none; stroke: #274b73; stroke-width: 13.275; stroke-miterlimit: 10 } .performance-results .st6 { fill: none; stroke: #fff; stroke-width: 13.275; stroke-dasharray: .737,27.139 } .performance-results .st9 { fill: #88cce8 } .performance-results .st11 { font-size: 8px } .performance-results .st12 { font-size: 6px } .performance-results .st13 { fill: none; stroke: #426696; stroke-width: 18 } .performance-results .st14 { opacity: .392; fill: none; stroke: #f5687c; stroke-width: 18; enable-background: new } .performance-results .st15 { fill: none; stroke: #ffc22a; stroke-width: 2.754; stroke-miterlimit: 10 } .performance-results .st16 { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: .5,9.03 } .performance-results .st18 { fill: #75b2d2 } .performance-results .st19 { font-size: 20px } .performance-results .st20 { fill: none; stroke: #4d7e9a; stroke-miterlimit: 10 } .performance-results .st21 { fill: none; stroke: #fff; stroke-miterlimit: 10 } .performance-results .st22 { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: .5,9.1 } .performance-results .st27 { fill: none; stroke: #14e08b; stroke-width: 2.754; stroke-miterlimit: 10 } .performance-results .st28 { fill: none; stroke: #fff } .performance-results .st29 { font-size: 11px } .performance-results .st30 { font-size: 14px } .scrollable-body-on-results { overflow: inherit } .scrollable-body-on-results.navbar-on-top .bottom-nav-bar { position: fixed; top: 0; box-shadow: 0 2px 3px rgba(0,0,0,.15) } .scrollable-body-on-results.navbar-on-top .scroll-reminder { position: fixed; top: 25px; transform: rotate(180deg) } .scrollable-body-on-results .hdrlt { position: absolute } .scrollable-body-on-results .attempt-details .scroll-reminder { display: block } @media(max-width: 1090px) { .scrollable-body-on-results .attempt-details .scroll-reminder { display:none } } .scrollable-results { position: absolute; top: 0; width: 100% } .scrollable-results .spelling-results-panel { position: relative; height: 100vh; padding-bottom: 95px } .scrollable-results .bottom-nav-bar { position: absolute; top: calc(100vh - 95px) } .scrollable-results .bottom-feedback-bar { position: absolute } .attempt-details { padding: 30px; min-height: 100vh; position: relative; background: #f4f4f4 } .attempt-details .scroll-reminder { display: none; position: absolute; top: -70px; left: 10px; opacity: 0; z-index: 6; border-radius: 50%; width: 46px; height: 46px; border: solid 1px #e7e7e7; transition: transform .5s } .attempt-details .scroll-reminder circle { fill: #fff; stroke: #e7e7e7 } .attempt-details .scroll-reminder polyline { stroke-miterlimit: 10; fill: none; stroke: #444; stroke-width: 2px } .attempt-details .scroll-reminder:hover { border-color: #ccc; cursor: pointer } @media(max-width: 900px) { .attempt-details .scroll-reminder { display:none !important } } @-webkit-keyframes flipInYCustom { from { -webkit-transform: translateZ(400px) rotate3d(0, 1, 0, 90deg); transform: translateZ(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: translateZ(400px) rotate3d(0, 1, 0, -20deg); transform: translateZ(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: translateZ(400px) rotate3d(0, 1, 0, 10deg); transform: translateZ(400px) rotate3d(0, 1, 0, 10deg); opacity: 1 } 80% { -webkit-transform: translateZ(400px) rotate3d(0, 1, 0, -5deg); transform: translateZ(400px) rotate3d(0, 1, 0, -5deg) } to { -webkit-transform: translateZ(400px); transform: translateZ(400px) } } @keyframes flipInYCustom { from { -webkit-transform: translateZ(400px) rotate3d(0, 1, 0, 90deg); transform: translateZ(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: translateZ(400px) rotate3d(0, 1, 0, -20deg); transform: translateZ(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: translateZ(400px) rotate3d(0, 1, 0, 10deg); transform: translateZ(400px) rotate3d(0, 1, 0, 10deg); opacity: 1 } 80% { -webkit-transform: translateZ(400px) rotate3d(0, 1, 0, -5deg); transform: translateZ(400px) rotate3d(0, 1, 0, -5deg) } to { -webkit-transform: translateZ(400px); transform: translateZ(400px) } } .flipInYCustom { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInYCustom; animation-name: flipInYCustom; transform-style: preserve-3d } .TPCMN .progress-line-block.done { background: #5091e0; transition: .3s linear all } .TPCMN .progress-line-block.active { background: #91bef5 } .TPCMN .progress-line-block { display: inline-block; border-radius: 100%; border: 2px solid #5091e0; margin: 2px; width: 14px; height: 14px } .TPCMN #progress-dot { display: none; float: right; width: 7px; height: 5px; border-radius: 100%; background: #1c75bc; margin-top: -2px } .TPCMN #progress-bar { height: 3px; border: 0px solid #eee; margin-top: 0px; text-align: center } .TPCMN #progress-percent { width: 0%; background: #78b8ff; height: 100% } .TPCMN .pause-tooltip { display: none; background: #5293e2; color: #fff; padding: 10px 10px 10px 17px; border-radius: 8px; font-family: arial; font-size: 16px; white-space: nowrap; position: fixed; z-index: 101; margin-top: -48px; margin-left: -26px } .TPCMN .pause-tooltip>i { padding: 0 8px 0 6px } .TPCMN .pause-tooltip:before { content: " "; display: inline-block; margin-top: 20px; margin-bottom: -22px; width: 0; margin-right: -24px; border-top: solid 10px #5293e2; border-left: solid 10px rgba(0,0,0,0); border-right: solid 10px rgba(0,0,0,0) } .TPCMN .pause-tooltip.boxed { margin-left: 5px } body:not(.body-on-results) .TP_APP1 { position: relative; overflow: hidden; height: 100%; width: 100% } body:not(.body-on-results) .TP_APP1 * { letter-spacing: normal; line-height: normal; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; -webkit-box-sizing: initial; box-sizing: initial } body:not(.body-on-results) .TP_APP1 .bottom-nav-bar { display: none } body:not(.body-on-results) .TPGAME .bottom-nav-bar { display: none } .TP_APP1 .bottom-nav-bar .navbar-content { max-width: 800px } @media only screen and (min-width: 1256px) { .TP_APP1 .pause-tooltip.start-tooltip { display:none !important } } .TP_APP1 .drop-banner { background: #5293e2; color: #fff; width: 75px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; text-align: center; text-transform: uppercase; font-family: arial; font-size: 14px; padding: 180px 5px 8px 5px; top: -280px; position: fixed; z-index: 29; left: 50%; margin-left: -560px } .TP_APP1 .drop-banner>i { display: block; line-height: 2 } @media only screen and (max-width: 1255px) { .TP_APP1 .drop-banner { display:none } } .TP_APP1 h1 { margin: 5px 0 5px 0; border: 0px; font-size: 1em; font-weight: normal; font-family: arial; color: #bbb } .TP_APP1 #boy { display: none } .TP_APP1 .backspace-forbidden { position: absolute; left: 50%; margin-left: -53px; top: 50px; display: none } .TP_APP1 .stats { font-family: "Droid Sans Mono",courier; color: #888; display: none; float: right; text-align: right; width: 0; transform: translateX(-200px); white-space: nowrap } .TP_APP1 .stats.flat_view { width: inherit; display: block !important } .TP_APP1 .stats.flat_view .stat-row { display: inline-block; padding: 20px } .TP_APP1 .stats .stat-col { font-size: 12px } .TP_APP1 .stats .stat-row { font-size: 28px; margin-bottom: 20px } .TP_APP1 .stats .stat-row sup { font-size: 10px; vertical-align: super } .TP_APP1 .stat-col { font-size: 12px } .TP_APP1 .stat-row { font-size: 28px; margin-bottom: 20px } .TP_APP1 .stat-row sup { font-size: 10px; vertical-align: super } .TP_APP1 .option { float: right; padding: 5px; margin: 2px 5px -12px; opacity: .5; cursor: pointer; box-sizing: border-box; height: 36px; transition: .3s ease-out all; border: 1px solid rgba(0,0,0,0); border-radius: 20% } .TP_APP1 .option:hover { opacity: 1; border-radius: 100%; border: 1px solid #999; transform: scale(1.2); background: #fff } .TP_APP1 .blackoverlay { position: fixed; top: 35px; left: 0px; right: 0px; bottom: 0px; background: rgba(0,0,0,.93); z-index: 90; will-change: opacity } .TP_APP1 .blackoverlay-message { width: 900px; margin: auto; margin-top: 10%; font-size: 42px; color: rgba(255,255,255,.9); text-align: center } .TP_APP1 .blackoverlay-enter { opacity: .01 } .TP_APP1 .blackoverlay-enter .blackoverlay-message { margin-top: 15% } .TP_APP1 .blackoverlay-enter.blackoverlay-enter-active { opacity: 1; transition: opacity 500ms ease-in } .TP_APP1 .blackoverlay-enter.blackoverlay-enter-active .blackoverlay-message { transition: margin-top 500ms ease-out; margin-top: 10% } .TP_APP1 .blackoverlay-exit { opacity: 1 } .TP_APP1 .blackoverlay-exit.blackoverlay-exit-active { opacity: .01; transition: opacity 200ms ease-in } .TP_APP1 .flip-x { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH" } .TP_APP1 .classic-typing-container { max-width: 910px; margin: auto } @media only screen and (max-width: 980px) { .TP_APP1 .classic-typing-container { width:800px } .TP_APP1 .classic-typing-container .stats { transform: translateX(-100px) } } @media only screen and (max-width: 860px) { .TP_APP1 .classic-typing-container { max-width:690px } .TP_APP1 .classic-typing-container .stats { height: 0; width: 300px; margin-bottom: -75px; transform: translateY(-69px) } .TP_APP1 .classic-typing-container .stats .stat-row { display: inline-block; padding: 0 25px } } @media only screen and (max-width: 1570px) { .TP_APP1 .classic-typing-container.with-ads .drop-banner { left:inherit; right: 1260px } } @media only screen and (max-width: 1520px) { .TP_APP1 .classic-typing-container.with-ads .drop-banner { left:20px; margin-left: 0; right: inherit } } .TP_APP1 .classic-typing-container.with-ads.xxlarge #adslot_1,.TP_APP1 .classic-typing-container.with-ads.xxlarge #adslot_2,.TP_APP1 .classic-typing-container.with-ads.xxlarge #adslot_video { display: none } .TP_APP1 .classic-typing-container.with-ads.adlevel-1 #adslot_2 { display: none } .TP_APP1 .classic-typing-container.with-ads #adslot_1,.TP_APP1 .classic-typing-container.with-ads #adslot_2 { position: fixed; bottom: 0; top: 40px; max-width: 336px } .TP_APP1 .classic-typing-container.with-ads.adlevel-5 #adslot_1 { bottom: 255px } .TP_APP1 .classic-typing-container.with-ads #adslot_1,.TP_APP1 .classic-typing-container.with-ads #adslot_video { right: 0; width: calc(50vw - 455px - 30px) } .TP_APP1 .classic-typing-container.with-ads #adslot_2 { left: 0; width: calc(50vw - 455px - 30px) } .TP_APP1 .classic-typing-container.with-ads #adslot_video { position: fixed; bottom: 0; width: 400px; height: 225px } @media only screen and (max-width: 1770px) { .TP_APP1 .classic-typing-container.with-ads.adlevel-5 #adslot_video,.TP_APP1 .classic-typing-container.with-ads.adlevel-6 #adslot_video { width:400px; height: 225px } .TP_APP1 .classic-typing-container.with-ads.adlevel-5 #adslot_1,.TP_APP1 .classic-typing-container.with-ads.adlevel-6 #adslot_1 { bottom: 255px } } @media only screen and (max-width: 1570px) { .TP_APP1 .classic-typing-container.with-ads { margin-right:330px } .TP_APP1 .classic-typing-container.with-ads #adslot_1 { width: 300px } .TP_APP1 .classic-typing-container.with-ads #adslot_2 { display: none } .TP_APP1 .classic-typing-container.with-ads #adslot_2 { display: none } } @media only screen and (max-width: 1520px) { .TP_APP1 .classic-typing-container.with-ads { margin-left:130px } } @media only screen and (max-width: 1360px) { .TP_APP1 .classic-typing-container.with-ads .stats { height:0; width: 300px; margin-bottom: -75px; transform: translateY(-65px) } .TP_APP1 .classic-typing-container.with-ads .stats .stat-row { display: inline-block; padding: 0 25px } .TP_APP1 .classic-typing-container.with-ads.adlevel-5 .stats,.TP_APP1 .classic-typing-container.with-ads.adlevel-6 .stats { margin-right: 0 } } @media only screen and (max-width: 1255px) { .TP_APP1 .classic-typing-container.with-ads { margin-left:40px } } @media only screen and (max-width: 1175px) { .TP_APP1 .classic-typing-container.with-ads { width:800px } .TP_APP1 .classic-typing-container.with-ads #adslot_1 { width: calc(100vw - 800px - 60px) } .TP_APP1 .classic-typing-container.with-ads.adlevel-5 #adslot_video,.TP_APP1 .classic-typing-container.with-ads.adlevel-6 #adslot_video { width: 300px; height: 170px } .TP_APP1 .classic-typing-container.with-ads.adlevel-5 #adslot_1,.TP_APP1 .classic-typing-container.with-ads.adlevel-6 #adslot_1 { bottom: 190px } } @media only screen and (max-width: 1020px) { .TP_APP1 .classic-typing-container.with-ads { width:690px } .TP_APP1 .classic-typing-container.with-ads #adslot_1 { width: calc(100vw - 690px - 60px) } .TP_APP1 .classic-typing-container.with-ads #adslot_video { width: 250px; height: 141px } } @media only screen and (max-width: 869px) { .TP_APP1 .classic-typing-container.with-ads #adslot_1 { left:0; top: initial; bottom: 0 !important; width: 100%; max-width: 100%; height: 140px } .TP_APP1 .classic-typing-container.with-ads #adslot_video { display: none } .TP_APP1 .classic-typing-container.with-ads .stats { display: none !important } } .keyboard-plugin { position: relative; margin: auto } .keyboard-popup { position: absolute; display: none; background: #5293e2; padding: 10px; border-radius: 5px; z-index: 1000; box-sizing: initial } .keyboard-popup>div { position: relative; padding: 10px; font-family: roboto; font-size: 14px; color: #fff; line-height: 1.4 } .keyboard-popup>div .right-indicator { position: absolute; right: 0; width: 0; margin-right: -20px; border-top: solid 10px rgba(0,0,0,0); border-bottom: solid 10px rgba(0,0,0,0); border-left: solid 10px #5293e2 } .keyboard-popup .btn-link { color: #fff; margin-left: -5px; text-decoration: underline } .keyboard-popup .btn-primary { float: right; border: solid 1px #fff; background: rgba(0,0,0,0) } .keyboard-popup .btn-primary:hover { background: rgba(255,255,255,.2) } @media(max-width: 1200px) { .keyboard-popup { position:fixed; left: 0 !important } } .mismatch_settings_modal { box-sizing: content-box } .mismatch_settings_modal h3 { margin-top: 0px; display: inline-block } .mismatch_settings_modal hr { margin: 5px -12px 16px -12px } .mismatch_settings_modal ul { list-style: none; padding: 15px 0 0 0 } .mismatch_settings_modal ul>li span { display: inline-block } .mismatch_settings_modal .edicon-layout-keyboard-icon { font-size: .8em; padding-right: 3px } .mismatch_settings_modal .edicon-both-hands,.mismatch_settings_modal .edicon-right-hand,.mismatch_settings_modal .edicon-left-hand { font-size: 1.4em; vertical-align: sub; padding-right: 3px } .mismatch_settings_modal .bluish { color: #4299fa } .mismatch_settings_modal .modal-header { margin: 0 !important } .mismatch_settings_modal .modal-footer { margin: 0 !important } .mismatch_settings_modal .modal-footer label { float: left; font-weight: normal; padding: 5px 0 } .typable { line-height: normal; font-variant-ligatures: none } .typable .cursor { display: block; position: absolute; z-index: 2 } .typable .normal_cursor { border-bottom: 3px solid #0a6bf9 } .typable .token { border-top: 2px solid rgba(0,0,0,0); white-space: nowrap } .typable .meta-word { letter-spacing: 0; line-height: normal; width: 150px; font-size: 11px; position: absolute; font-family: georgia; margin-top: -17px; z-index: -4; color: #777 } .typable .meta-word i { font-style: normal; color: #333; font-size: 9px } .typable .story_cursor { border-bottom: 5px solid #5091e0 } @keyframes typable-blink { 90% { border-color: #0a6bf9 } 92% { border-color: rgba(10,107,249,.5333333333) } 100% { border-color: rgba(0,0,0,0) } } .typable .vertical_cursor { border-left: 2px solid #0a6bf9; animation: typable-blink 2s step-start infinite } .typable .evt_inpt { position: absolute; left: -300px } .typable .__sample-text { position: absolute } .typable .__no-lineheight { line-height: normal !important } .typable ._toknmeta { position: relative; z-index: 1 } .typable ._errchr,.typable ._errchr2 { display: block; position: absolute; background: #e97e7e; border-radius: 2px !important; color: #fff !important; top: 0px } .typable ._errchr2 { color: red !important; background: rgba(0,0,0,0); border: 0px !important } .typable ._vld { color: #0e630e; background: #e7fbd3 } .typable ._err { color: darkred; background: pink } .typable ._ervld { background: #ffe9b2; color: green } .typable ._logo { padding-right: .4em } .typable .lgram { display: inline-block; vertical-align: top } .typable .lgram>div { font-family: "Weibei SC Bold",serif; margin: 3px 0 -3px; line-height: 1.45em; height: 1.45em; color: #bbb; text-align: center } .typable .lgram._vld_gram>div { color: #6c9bce } .typable .lgram._err_gram>div { color: #cea36c } .typable .lgram .token_unit { position: relative } .typable ._fcs .lgram._fcs_gram>div { background: #f5f5f5 } .typable .line { display: block } .typable.linified>.line ._logo>br { display: none } .typable ._enter { background: url(/m/engine/img/enter2.png) no-repeat bottom right; background-size: auto 100%; display: inline-block; width: .7em } .typable ._tab { background: url(/m/engine/img/tab.png) no-repeat bottom right; background-size: auto 100% } .typable ._err ._tab { background: url(/m/engine/img/tab.png) no-repeat bottom right; background-size: auto 100% } .typable ._vld ._tab { background: url(/m/engine/img/tab.png) no-repeat bottom right; background-size: auto 100% } .typable ._ervld ._tab { background: url(/m/engine/img/tab.png) no-repeat bottom right; background-size: auto 100% } .typable .line i { display: inline-block; width: .1em; min-width: .1em } .typable.mono_standard { font-family: "Droid Sans Mono",courier; color: #757575 } .typable.mono_standard.dyslexic-font { font-family: "OpenDyslexic",courier } .typable.story_typable ._clr { color: #555 } .typable.story_typable .token.active { border-top: 0px } .typable.story_typable .ervld,.typable.story_typable ._vld { color: #fff; background: rgba(0,0,0,.8) } .typable.hide_extras .meta-word { visibility: hidden } .typable.hide_extras .line { margin-top: 5px !important } .story_typable_container { position: absolute } .PLYBK .lgram { font-family: Arial } .RESPG .lgram { font-family: Arial } .classic-typing-container.xxlarge { width: calc(100% - 150px); max-width: initial; margin-left: 125px } @media only screen and (max-width: 1200px) { .classic-typing-container.xxlarge { width:calc(100% - 60px); margin-left: 30px } } .classic-typing-container.xxlarge .keyboard-plugin { visibility: hidden !important } .classic-typing-container.xxlarge .drop-banner { left: 20px; margin: 0px } .classic-typing-container.xxlarge .token,.classic-typing-container.xxlarge .token_unit { font-size: 80px } .classic-typing-container.xxlarge .stats { left: 40px; margin: -150px 0 0 0 } .classic-typing-container.xxlarge #progress-bar { display: none } .classic-typing-container.xxlarge .tpmodes.normal { border-bottom: 0px } .tpmodes { outline: none } .tpmodes.normal { border-bottom: 1px solid #bbb } .tpmodes.normal.hide-bottom-line { border-bottom: none } .tpmodes.normal.hide-cursor .cursor { display: none } .tpmodes.normal .token_unit { border-radius: 4px; white-space: nowrap } .tpmodes.normal ._fcs { border-top: 2px solid #ddd; border-radius: 5px } .tpmodes.normal .line { margin-top: 25px } .tpmodes.normal ._vld,.tpmodes.normal ._ervld,.tpmodes.normal ._err { outline: 1px solid #fff } .tpmodes.normal.xlarge .token,.tpmodes.normal.xlarge .token_unit { font-size: 70px } .tpmodes.normal.large .token,.tpmodes.normal.large .token_unit { font-size: 45px } .tpmodes.normal.med .token,.tpmodes.normal.med .token_unit { font-size: 35px } .tpmodes.normal.small .token,.tpmodes.normal.small .token_unit { font-size: 25px } .tpmodes.normal .korean .token_unit { display: inline-block; transform: scale(0.7); transform-origin: center } .tpmodes.code { border-bottom: 1px solid #bbb } .tpmodes.code.hide-bottom-line { border-bottom: none } .tpmodes.code .token_unit { border-radius: 4px; white-space: nowrap; font-weight: normal } .tpmodes.code ._fcs { border-top: 2px solid #ddd; border-radius: 5px } .tpmodes.code .line { margin-top: 25px } .tpmodes.code ._vld,.tpmodes.code ._ervld,.tpmodes.code ._err { outline: 1px solid #fff } .tpmodes.code.xxlarge .token,.tpmodes.code.xxlarge .token_unit { font-size: 45px } .tpmodes.code.xlarge .token,.tpmodes.code.xlarge .token_unit { font-size: 36px } .tpmodes.code.large .token,.tpmodes.code.large .token_unit { font-size: 26px } .tpmodes.code.med .token,.tpmodes.code.med .token_unit { font-size: 20px } .tpmodes.code.small .token,.tpmodes.code.small .token_unit { font-size: 16px } .theme-dark { background: #272822 } .theme-dark .normal_cursor { background: rgba(255,255,255,.21) } .theme-dark ._vld { color: #000; background: #ddd } .theme-dark ._err { color: #6d0000; background: #bd9292 } .theme-dark .rtl ._clr { color: #aaa } .theme-dark .TP_APP1 .drop-banner,.theme-dark .TP_APP1 .pause-tooltip { background: #693b6b } .theme-dark .TP_APP1 .pause-tooltip:before { border-top: solid 10px #693b6b } .theme-dark .xxlarge .mono_standard { color: #d7ff12 } .theme-dark .xxlarge .normal_cursor { outline: 9px inset #00bfff } .theme-dark .typable .meta-word { color: #e4e4e4 } .theme-dark .typable ._vld,.theme-dark .typable ._ervld,.theme-dark .typable ._err { outline: 1px solid #272822 } .theme-dark .hdrlt { background: #3c3c3c; color: #eee } .theme-dark .hdrlt .dropdown-panel { background: #3c3c3c !important; color: #eee; box-shadow: 0 5px 5px #777 } .theme-dark .hdrlt .header-item>span:hover { color: #fff !important } .theme-dark .hdrlt .header-item>span:after { background: #3c3c3c !important } .theme-dark .hdrlt .sticky-keys-alert { color: #000 } .theme-dark #options svg { color: #ee83ff !important } .theme-dark .dropdown-menu { color: #000 } .theme-dark .disable-ads-banner a { color: #fff } .theme-dark .bottom-nav-bar { background: #3c3c3c } .story_typable_container.cursive .story_typable { font-size: 1.4em } .tpmodes.rtl,.story_typable_container.rtl { direction: rtl; margin-right: 15px } .tpmodes.rtl ._clr,.story_typable_container.rtl ._clr { color: #333 } .tpmodes.rtl .vertical_cursor,.story_typable_container.rtl .vertical_cursor { border-right: 2px solid #0a6bf9; border-left: none } .tpmodes.cursive .token_unit,.story_typable_container.cursive .token_unit { border-radius: 0; outline: none !important } .tpmodes.cursive ._cassist,.story_typable_container.cursive ._cassist { line-height: 1; display: none; position: absolute; margin-top: 5px; white-space: nowrap; z-index: 3; box-shadow: 0 .06em .06em rgba(0,0,0,.3); background: #fff } .tpmodes.cursive ._fcs ._cassist,.story_typable_container.cursive ._fcs ._cassist { display: block } .tpmodes.cursive ._fcs ._cassist._hide_rest .token_unit,.story_typable_container.cursive ._fcs ._cassist._hide_rest .token_unit { display: none } .tpmodes.cursive ._fcs ._cassist .token_unit,.story_typable_container.cursive ._fcs ._cassist .token_unit { display: inline-block; line-height: 1.8; font-size: .7em; position: relative } .tpmodes.cursive ._fcs ._cassist .token_unit._dfcs:before,.story_typable_container.cursive ._fcs ._cassist .token_unit._dfcs:before { content: " "; position: absolute; left: 2px; right: 2px; bottom: 2px; border-bottom: solid 2px #0a6bf9 } .tpmodes.cursive ._fcs ._cassist .token_unit._diacritic_base,.story_typable_container.cursive ._fcs ._cassist .token_unit._diacritic_base { display: inline-block; padding: 0 .2em } .tpmodes.cursive ._fcs ._cassist .token_unit._diacritic,.story_typable_container.cursive ._fcs ._cassist .token_unit._diacritic { display: inline-block; width: .8em } .tpmodes.cursive ._fcs ._cassist .token_unit._diacritic>span,.story_typable_container.cursive ._fcs ._cassist .token_unit._diacritic>span { display: inline-block } .tpmodes.cursive ._fcs ._cassist .token_unit._diacritic:after,.story_typable_container.cursive ._fcs ._cassist .token_unit._diacritic:after { content: " "; display: block; position: absolute; top: .5em; margin: .1em; width: .6em; height: .6em; border: dotted 1px; border-radius: 50% } .tpmodes.cursive ._fcs ._cassist .token_unit._diacritic._m1>span,.story_typable_container.cursive ._fcs ._cassist .token_unit._diacritic._m1>span { transform: translateX(-0.4em) } .tpmodes.cursive ._fcs ._cassist .token_unit._diacritic._m15>span,.story_typable_container.cursive ._fcs ._cassist .token_unit._diacritic._m15>span { transform: translateX(-0.6em) } .tpmodes.cursive ._fcs ._cassist .token_unit._diacritic._m2>span,.story_typable_container.cursive ._fcs ._cassist .token_unit._diacritic._m2>span { transform: translateX(-0.67em) } .tpmodes.cursive ._fcs ._cassist .token_unit._diacritic._m35>span,.story_typable_container.cursive ._fcs ._cassist .token_unit._diacritic._m35>span { transform: translateX(-0.8em) } .theme-blue { background: #fdfdfd } .theme-blue ._clr { color: #666 } .theme-blue .normal_cursor { background: rgba(255,255,255,.21) } .theme-blue ._vld { color: #004f80; background: #d3e6fb } .theme-blue .typable .meta-word { color: #333 } .theme-blue .typable ._vld,.theme-blue .typable ._ervld,.theme-blue .typable ._err { outline: 1px solid #fdfdfd } .theme-paper-day { background: #fafafa } .theme-paper-day .typable { font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif } .theme-paper-day ._clr { color: #aaa } .theme-paper-day .normal_cursor { background: rgba(0,0,0,0); border-style: dashed; border: 0px; border-left: 1px solid #9d0ea5; border-width: 2px; transform: translateX(-1px) scale(1.1) } .theme-paper-day .token.active { border-top: 0px } .theme-paper-day ._vld { color: #000; background: #fafafa } .theme-paper-day .typable .meta-word { color: #333 } .theme-paper-day .typable ._vld,.theme-paper-day .typable ._ervld,.theme-paper-day .typable ._err { outline: 1px solid #fafafa } .theme-eddie { background: #d1f1f6 url(/m/engine/img/themes/eddie.png); background-position: right bottom; background-size: 100% auto; background-repeat: no-repeat } .theme-eddie ._clr { color: #555 } .theme-eddie .normal_cursor { background: rgba(255,255,255,.21) } .theme-eddie ._vld { color: #17353a; background: #a6dce9 } .theme-eddie .typable .meta-word { color: #333 } .theme-eddie .typable ._vld,.theme-eddie .typable ._ervld,.theme-eddie .typable ._err { outline: 1px solid #d1f1f6 } .theme-eddie .typable ._ervld { background: #aae078; color: #006944 } .theme-eddie .typable ._err { color: darkred; background: #ff9887 } .theme-eddie .typable ._fcs { border-top: 2px solid #9bc4c6; border-radius: 5px } .theme-eddie .TP_APP1 .drop-banner,.theme-eddie .TP_APP1 .pause-tooltip { background: #60cad8 } .theme-eddie .TP_APP1 .pause-tooltip:before { border-top: solid 10px #60cad8 } .theme-penguin-land { background: #f3dde4 url(/m/engine/img/themes/penguin-land.png); background-position: right bottom; background-size: 100% auto; background-repeat: no-repeat } .theme-penguin-land ._clr { color: #555 } .theme-penguin-land .normal_cursor { background: rgba(255,255,255,.21) } .theme-penguin-land ._vld { color: #212121; background: #fff } .theme-penguin-land .typable .meta-word { color: #333 } .theme-penguin-land .typable ._vld,.theme-penguin-land .typable ._ervld,.theme-penguin-land .typable ._err { outline: 1px solid #f3dde5 } .theme-penguin-land .typable ._err { color: darkred; background: #fc9aa4 } .theme-penguin-land .typable ._ervld { background: #ffef7e; color: #006944 } .theme-penguin-land .typable ._fcs { border-top: 2px solid #ceb2c1; border-radius: 5px } .theme-penguin-land .TP_APP1 .drop-banner,.theme-penguin-land .TP_APP1 .pause-tooltip { background: #e57a91 } .theme-penguin-land .TP_APP1 .pause-tooltip:before { border-top: solid 10px #e57a91 } .theme-squirrel { background: #d4f0ed url(/m/engine/img/themes/squirrel.png); background-position: right bottom; background-size: 100% auto; background-repeat: no-repeat } .theme-squirrel ._clr { color: #585858 } .theme-squirrel .normal_cursor { background: rgba(255,255,255,.21) } .theme-squirrel ._vld { color: #1a6565; background: #fff } .theme-squirrel .typable .meta-word { color: #333 } .theme-squirrel .typable ._vld,.theme-squirrel .typable ._ervld,.theme-squirrel .typable ._err { outline: 1px solid #d4f0ed } .theme-squirrel .typable ._err { color: darkred; background: #f95 } .theme-squirrel .typable ._ervld { background: #ffee1e; color: #158498 } .theme-squirrel .typable ._fcs { border-top: 2px solid #96bcb5; border-radius: 5px } .theme-squirrel .TP_APP1 .drop-banner,.theme-squirrel .TP_APP1 .pause-tooltip { background: #5dc9b7 } .theme-squirrel .TP_APP1 .pause-tooltip:before { border-top: solid 10px #5dc9b7 } .theme-early-birds { background: #dde0f1 url(/m/engine/img/themes/early-birds.png); background-position: right bottom; background-size: 100% auto; background-repeat: no-repeat } .theme-early-birds ._clr { color: #555 } .theme-early-birds .normal_cursor { background: rgba(255,255,255,.21) } .theme-early-birds ._vld { color: #8383e5; background: #fff } .theme-early-birds .typable .meta-word { color: #333 } .theme-early-birds .typable ._vld,.theme-early-birds .typable ._ervld,.theme-early-birds .typable ._err { outline: 1px solid #dde0f1 } .theme-early-birds .typable ._ervld { background: #fff594; color: #006944 } .theme-early-birds .typable ._fcs { border-top: 2px solid #9599bc; border-radius: 5px } .theme-early-birds .TP_APP1 .drop-banner,.theme-early-birds .TP_APP1 .pause-tooltip { background: #8383e5 } .theme-early-birds .TP_APP1 .pause-tooltip:before { border-top: solid 10px #8383e5 } .theme-yellow-taxi { background: #fcf6c3 url(/m/engine/img/themes/yellow-taxi.png); background-position: right bottom; background-size: 100% auto; background-repeat: no-repeat } .theme-yellow-taxi ._clr { color: #33331a } .theme-yellow-taxi .normal_cursor { background: rgba(255,255,255,.21) } .theme-yellow-taxi ._vld { color: #33331a; background: #fff } .theme-yellow-taxi .typable .meta-word { color: #333 } .theme-yellow-taxi .typable ._vld,.theme-yellow-taxi .typable ._ervld,.theme-yellow-taxi .typable ._err { outline: 1px solid #f6f1c9 } .theme-yellow-taxi .typable ._ervld { background: #ffd740; color: #137351 } .theme-yellow-taxi .typable ._err { color: darkred; background: #ff90a3 } .theme-yellow-taxi .typable ._fcs { border-top: 2px solid #ceb976; border-radius: 5px } .theme-yellow-taxi .TP_APP1 .drop-banner,.theme-yellow-taxi .TP_APP1 .pause-tooltip { background: #f9d84e; color: #33331a } .theme-yellow-taxi .TP_APP1 .pause-tooltip:before { border-top: solid 10px #f9d84e } .theme-kingfish { background: #0b1626 url(/m/engine/img/themes/kingfish.png); background-position: right bottom; background-size: 100% auto; background-repeat: no-repeat } .theme-kingfish ._clr { color: #688199 } .theme-kingfish .rtl ._clr { color: #95a6b7 } .theme-kingfish .normal_cursor { background: rgba(255,255,255,.21) } .theme-kingfish ._vld { color: #2b4f7b; background: #a6cff3 } .theme-kingfish .typable .meta-word { color: #f6b707 } .theme-kingfish .typable .meta-word i { font-style: normal; color: #f6b707; font-size: 9px } .theme-kingfish .typable ._vld,.theme-kingfish .typable ._ervld,.theme-kingfish .typable ._err { outline: 1px solid #0c192b } .theme-kingfish .typable ._ervld { background: #ffdd60; color: #138061 } .theme-kingfish .typable ._err { color: darkred; background: #fc785e } .theme-kingfish .TP_APP1 .drop-banner,.theme-kingfish .TP_APP1 .pause-tooltip { background: #173654; color: #f0c600 } .theme-kingfish .TP_APP1 .pause-tooltip:before { border-top: solid 10px #173654 } .theme-kingfish .hdrlt { background: #15263c; color: #eee; border-bottom: 1px solid #1b3143 } .theme-kingfish .hdrlt .dropdown-panel { background: #15263c !important; color: #eee; box-shadow: 0 5px 5px #283958 } .theme-kingfish .hdrlt .header-item>span { color: #b3b3b3 } .theme-kingfish .hdrlt .header-item>span:hover { color: #fff !important } .theme-kingfish .hdrlt .header-item>span:after { background: #1d2b40 !important } .theme-kingfish .hdrlt .sticky-keys-alert { color: #000 } .theme-kingfish #options svg { color: #ee83ff !important } .theme-kingfish .dropdown-menu { color: #000 } .theme-robot { background: #141319 url(/m/engine/img/themes/robot.png); background-position: right bottom; background-size: 100% auto; background-repeat: no-repeat } .theme-robot ._clr { color: #576a84 } .theme-robot .rtl ._clr { color: #8d9db4 } .theme-robot .normal_cursor { background: rgba(255,255,255,.21) } .theme-robot ._vld { color: #0c192b; background: #a6cff3 } .theme-robot .typable .meta-word { color: #7692e2 } .theme-robot .typable .meta-word i { font-style: normal; color: #7692e2; font-size: 9px } .theme-robot .typable ._vld,.theme-robot .typable ._ervld,.theme-robot .typable ._err { outline: 1px solid #0c192b } .theme-robot .typable ._ervld { background: #ffdd60; color: #138061 } .theme-robot .typable ._err { color: darkred; background: #fc785e } .theme-robot .hdrlt { background: #1d202e; color: #eee; border-bottom: 1px solid #2a2e44 } .theme-robot .hdrlt .dropdown-panel { background: #1d202e !important; color: #eee; box-shadow: 0 5px 5px #777 } .theme-robot .hdrlt .header-item>span { color: #b3b3b3 } .theme-robot .hdrlt .header-item>span:hover { color: #fff !important } .theme-robot .hdrlt .header-item>span:after { background: #212635 !important } .theme-robot .hdrlt .sticky-keys-alert { color: #000 } .theme-robot #options svg { color: #ee83ff !important } .theme-robot .dropdown-menu { color: #000 } .theme-robot .TP_APP1 .drop-banner,.theme-robot .TP_APP1 .pause-tooltip { background: #232a44; color: #05d3cd } .theme-robot .TP_APP1 .pause-tooltip:before { border-top: solid 10px #232a44 } .theme-codder { background: #0d1110 url(/m/engine/img/themes/codder.png); background-position: right bottom; background-size: 100% auto; background-repeat: no-repeat } .theme-codder ._clr { color: #3a575f } .theme-codder .rtl ._clr { color: #81a7b1 } .theme-codder .normal_cursor { background: rgba(211,211,211,.1) } .theme-codder ._vld { color: #28ee81; background: #197d6e } .theme-codder .typable .meta-word { color: #197d6e } .theme-codder .typable .meta-word i { font-style: normal; color: #7692e2; font-size: 9px } .theme-codder .typable ._vld,.theme-codder .typable ._ervld,.theme-codder .typable ._err { outline: 1px solid #0c192b } .theme-codder .typable ._ervld { background: #ffdd60; color: #af6400 } .theme-codder .typable ._err { color: darkred; background: #fc785e } .theme-codder .hdrlt { background: #101716; color: #c59438; border-bottom: 1px solid #322d1d } .theme-codder .hdrlt .dropdown-panel { background: #101716 !important; color: #c59438; box-shadow: 0 5px 5px #777 } .theme-codder .hdrlt .header-item>span { color: #c59438 } .theme-codder .hdrlt .header-item>span:hover { color: #fff !important } .theme-codder .hdrlt .header-item>span:after { background: #212635 !important } .theme-codder .hdrlt .sticky-keys-alert { color: #000 } .theme-codder #options svg { color: #ee83ff !important } .theme-codder .dropdown-menu { color: #000 } .theme-codder .TP_APP1 .drop-banner,.theme-codder .TP_APP1 .pause-tooltip { background: #0d1d1e; color: #c59438 } .theme-codder .TP_APP1 .pause-tooltip:before { border-top: solid 10px #0d1d1e } .theme-bees { background: #fcfcfc url(/m/engine/img/themes/bees.png); background-position: right bottom; background-size: 100% auto; background-repeat: no-repeat } .theme-bees ._clr { color: #555 } .theme-bees .normal_cursor { background: rgba(255,255,255,.21) } .theme-bees ._vld { color: #366770; background: #d6f4f9 } .theme-bees .typable .meta-word { color: #333 } .theme-bees .typable .token_unit { border-radius: 0px; white-space: nowrap } .theme-bees .typable ._ervld { background: #ffd424; color: #5c4500 } .theme-bees .typable ._err { color: #613209; background: #ed8525 } .theme-bees .typable ._fcs { border-top: 2px solid #ccc; border-radius: 5px } .theme-bees .TP_APP1 .drop-banner,.theme-bees .TP_APP1 .pause-tooltip { background: #ffd624; color: #5f3813 } .theme-bees .TP_APP1 .pause-tooltip:before { border-top: solid 10px #ffd724 } .theme-yellow-taxi .tpmodes.code .hljs,.theme-squirrel .tpmodes.code .hljs,.theme-eddie .tpmodes.code .hljs,.theme-early-birds .tpmodes.code .hljs,.theme-penguin-land .tpmodes.code .hljs,.theme-null .tpmodes.code .hljs,.theme-blue .tpmodes.code .hljs,.theme-bees .tpmodes.code .hljs { color: #383a42 } .theme-yellow-taxi .tpmodes.code .hljs-comment,.theme-yellow-taxi .tpmodes.code .hljs-quote,.theme-squirrel .tpmodes.code .hljs-comment,.theme-squirrel .tpmodes.code .hljs-quote,.theme-eddie .tpmodes.code .hljs-comment,.theme-eddie .tpmodes.code .hljs-quote,.theme-early-birds .tpmodes.code .hljs-comment,.theme-early-birds .tpmodes.code .hljs-quote,.theme-penguin-land .tpmodes.code .hljs-comment,.theme-penguin-land .tpmodes.code .hljs-quote,.theme-null .tpmodes.code .hljs-comment,.theme-null .tpmodes.code .hljs-quote,.theme-blue .tpmodes.code .hljs-comment,.theme-blue .tpmodes.code .hljs-quote,.theme-bees .tpmodes.code .hljs-comment,.theme-bees .tpmodes.code .hljs-quote { color: #a0a1a7; font-style: italic } .theme-yellow-taxi .tpmodes.code .hljs-doctag,.theme-yellow-taxi .tpmodes.code .hljs-keyword,.theme-yellow-taxi .tpmodes.code .hljs-formula,.theme-squirrel .tpmodes.code .hljs-doctag,.theme-squirrel .tpmodes.code .hljs-keyword,.theme-squirrel .tpmodes.code .hljs-formula,.theme-eddie .tpmodes.code .hljs-doctag,.theme-eddie .tpmodes.code .hljs-keyword,.theme-eddie .tpmodes.code .hljs-formula,.theme-early-birds .tpmodes.code .hljs-doctag,.theme-early-birds .tpmodes.code .hljs-keyword,.theme-early-birds .tpmodes.code .hljs-formula,.theme-penguin-land .tpmodes.code .hljs-doctag,.theme-penguin-land .tpmodes.code .hljs-keyword,.theme-penguin-land .tpmodes.code .hljs-formula,.theme-null .tpmodes.code .hljs-doctag,.theme-null .tpmodes.code .hljs-keyword,.theme-null .tpmodes.code .hljs-formula,.theme-blue .tpmodes.code .hljs-doctag,.theme-blue .tpmodes.code .hljs-keyword,.theme-blue .tpmodes.code .hljs-formula,.theme-bees .tpmodes.code .hljs-doctag,.theme-bees .tpmodes.code .hljs-keyword,.theme-bees .tpmodes.code .hljs-formula { color: #a626a4 } .theme-yellow-taxi .tpmodes.code .hljs-section,.theme-yellow-taxi .tpmodes.code .hljs-name,.theme-yellow-taxi .tpmodes.code .hljs-selector-tag,.theme-yellow-taxi .tpmodes.code .hljs-deletion,.theme-yellow-taxi .tpmodes.code .hljs-subst,.theme-squirrel .tpmodes.code .hljs-section,.theme-squirrel .tpmodes.code .hljs-name,.theme-squirrel .tpmodes.code .hljs-selector-tag,.theme-squirrel .tpmodes.code .hljs-deletion,.theme-squirrel .tpmodes.code .hljs-subst,.theme-eddie .tpmodes.code .hljs-section,.theme-eddie .tpmodes.code .hljs-name,.theme-eddie .tpmodes.code .hljs-selector-tag,.theme-eddie .tpmodes.code .hljs-deletion,.theme-eddie .tpmodes.code .hljs-subst,.theme-early-birds .tpmodes.code .hljs-section,.theme-early-birds .tpmodes.code .hljs-name,.theme-early-birds .tpmodes.code .hljs-selector-tag,.theme-early-birds .tpmodes.code .hljs-deletion,.theme-early-birds .tpmodes.code .hljs-subst,.theme-penguin-land .tpmodes.code .hljs-section,.theme-penguin-land .tpmodes.code .hljs-name,.theme-penguin-land .tpmodes.code .hljs-selector-tag,.theme-penguin-land .tpmodes.code .hljs-deletion,.theme-penguin-land .tpmodes.code .hljs-subst,.theme-null .tpmodes.code .hljs-section,.theme-null .tpmodes.code .hljs-name,.theme-null .tpmodes.code .hljs-selector-tag,.theme-null .tpmodes.code .hljs-deletion,.theme-null .tpmodes.code .hljs-subst,.theme-blue .tpmodes.code .hljs-section,.theme-blue .tpmodes.code .hljs-name,.theme-blue .tpmodes.code .hljs-selector-tag,.theme-blue .tpmodes.code .hljs-deletion,.theme-blue .tpmodes.code .hljs-subst,.theme-bees .tpmodes.code .hljs-section,.theme-bees .tpmodes.code .hljs-name,.theme-bees .tpmodes.code .hljs-selector-tag,.theme-bees .tpmodes.code .hljs-deletion,.theme-bees .tpmodes.code .hljs-subst { color: #e45649 } .theme-yellow-taxi .tpmodes.code .hljs-literal,.theme-squirrel .tpmodes.code .hljs-literal,.theme-eddie .tpmodes.code .hljs-literal,.theme-early-birds .tpmodes.code .hljs-literal,.theme-penguin-land .tpmodes.code .hljs-literal,.theme-null .tpmodes.code .hljs-literal,.theme-blue .tpmodes.code .hljs-literal,.theme-bees .tpmodes.code .hljs-literal { color: #0184bb } .theme-yellow-taxi .tpmodes.code .hljs-string,.theme-yellow-taxi .tpmodes.code .hljs-regexp,.theme-yellow-taxi .tpmodes.code .hljs-addition,.theme-yellow-taxi .tpmodes.code .hljs-attribute,.theme-yellow-taxi .tpmodes.code .hljs-meta .hljs-string,.theme-squirrel .tpmodes.code .hljs-string,.theme-squirrel .tpmodes.code .hljs-regexp,.theme-squirrel .tpmodes.code .hljs-addition,.theme-squirrel .tpmodes.code .hljs-attribute,.theme-squirrel .tpmodes.code .hljs-meta .hljs-string,.theme-eddie .tpmodes.code .hljs-string,.theme-eddie .tpmodes.code .hljs-regexp,.theme-eddie .tpmodes.code .hljs-addition,.theme-eddie .tpmodes.code .hljs-attribute,.theme-eddie .tpmodes.code .hljs-meta .hljs-string,.theme-early-birds .tpmodes.code .hljs-string,.theme-early-birds .tpmodes.code .hljs-regexp,.theme-early-birds .tpmodes.code .hljs-addition,.theme-early-birds .tpmodes.code .hljs-attribute,.theme-early-birds .tpmodes.code .hljs-meta .hljs-string,.theme-penguin-land .tpmodes.code .hljs-string,.theme-penguin-land .tpmodes.code .hljs-regexp,.theme-penguin-land .tpmodes.code .hljs-addition,.theme-penguin-land .tpmodes.code .hljs-attribute,.theme-penguin-land .tpmodes.code .hljs-meta .hljs-string,.theme-null .tpmodes.code .hljs-string,.theme-null .tpmodes.code .hljs-regexp,.theme-null .tpmodes.code .hljs-addition,.theme-null .tpmodes.code .hljs-attribute,.theme-null .tpmodes.code .hljs-meta .hljs-string,.theme-blue .tpmodes.code .hljs-string,.theme-blue .tpmodes.code .hljs-regexp,.theme-blue .tpmodes.code .hljs-addition,.theme-blue .tpmodes.code .hljs-attribute,.theme-blue .tpmodes.code .hljs-meta .hljs-string,.theme-bees .tpmodes.code .hljs-string,.theme-bees .tpmodes.code .hljs-regexp,.theme-bees .tpmodes.code .hljs-addition,.theme-bees .tpmodes.code .hljs-attribute,.theme-bees .tpmodes.code .hljs-meta .hljs-string { color: #50a14f } .theme-yellow-taxi .tpmodes.code .hljs-attr,.theme-yellow-taxi .tpmodes.code .hljs-variable,.theme-yellow-taxi .tpmodes.code .hljs-template-variable,.theme-yellow-taxi .tpmodes.code .hljs-type,.theme-yellow-taxi .tpmodes.code .hljs-selector-class,.theme-yellow-taxi .tpmodes.code .hljs-selector-attr,.theme-yellow-taxi .tpmodes.code .hljs-selector-pseudo,.theme-yellow-taxi .tpmodes.code .hljs-number,.theme-squirrel .tpmodes.code .hljs-attr,.theme-squirrel .tpmodes.code .hljs-variable,.theme-squirrel .tpmodes.code .hljs-template-variable,.theme-squirrel .tpmodes.code .hljs-type,.theme-squirrel .tpmodes.code .hljs-selector-class,.theme-squirrel .tpmodes.code .hljs-selector-attr,.theme-squirrel .tpmodes.code .hljs-selector-pseudo,.theme-squirrel .tpmodes.code .hljs-number,.theme-eddie .tpmodes.code .hljs-attr,.theme-eddie .tpmodes.code .hljs-variable,.theme-eddie .tpmodes.code .hljs-template-variable,.theme-eddie .tpmodes.code .hljs-type,.theme-eddie .tpmodes.code .hljs-selector-class,.theme-eddie .tpmodes.code .hljs-selector-attr,.theme-eddie .tpmodes.code .hljs-selector-pseudo,.theme-eddie .tpmodes.code .hljs-number,.theme-early-birds .tpmodes.code .hljs-attr,.theme-early-birds .tpmodes.code .hljs-variable,.theme-early-birds .tpmodes.code .hljs-template-variable,.theme-early-birds .tpmodes.code .hljs-type,.theme-early-birds .tpmodes.code .hljs-selector-class,.theme-early-birds .tpmodes.code .hljs-selector-attr,.theme-early-birds .tpmodes.code .hljs-selector-pseudo,.theme-early-birds .tpmodes.code .hljs-number,.theme-penguin-land .tpmodes.code .hljs-attr,.theme-penguin-land .tpmodes.code .hljs-variable,.theme-penguin-land .tpmodes.code .hljs-template-variable,.theme-penguin-land .tpmodes.code .hljs-type,.theme-penguin-land .tpmodes.code .hljs-selector-class,.theme-penguin-land .tpmodes.code .hljs-selector-attr,.theme-penguin-land .tpmodes.code .hljs-selector-pseudo,.theme-penguin-land .tpmodes.code .hljs-number,.theme-null .tpmodes.code .hljs-attr,.theme-null .tpmodes.code .hljs-variable,.theme-null .tpmodes.code .hljs-template-variable,.theme-null .tpmodes.code .hljs-type,.theme-null .tpmodes.code .hljs-selector-class,.theme-null .tpmodes.code .hljs-selector-attr,.theme-null .tpmodes.code .hljs-selector-pseudo,.theme-null .tpmodes.code .hljs-number,.theme-blue .tpmodes.code .hljs-attr,.theme-blue .tpmodes.code .hljs-variable,.theme-blue .tpmodes.code .hljs-template-variable,.theme-blue .tpmodes.code .hljs-type,.theme-blue .tpmodes.code .hljs-selector-class,.theme-blue .tpmodes.code .hljs-selector-attr,.theme-blue .tpmodes.code .hljs-selector-pseudo,.theme-blue .tpmodes.code .hljs-number,.theme-bees .tpmodes.code .hljs-attr,.theme-bees .tpmodes.code .hljs-variable,.theme-bees .tpmodes.code .hljs-template-variable,.theme-bees .tpmodes.code .hljs-type,.theme-bees .tpmodes.code .hljs-selector-class,.theme-bees .tpmodes.code .hljs-selector-attr,.theme-bees .tpmodes.code .hljs-selector-pseudo,.theme-bees .tpmodes.code .hljs-number { color: #986801 } .theme-yellow-taxi .tpmodes.code .hljs-symbol,.theme-yellow-taxi .tpmodes.code .hljs-bullet,.theme-yellow-taxi .tpmodes.code .hljs-link,.theme-yellow-taxi .tpmodes.code .hljs-meta,.theme-yellow-taxi .tpmodes.code .hljs-selector-id,.theme-yellow-taxi .tpmodes.code .hljs-title,.theme-squirrel .tpmodes.code .hljs-symbol,.theme-squirrel .tpmodes.code .hljs-bullet,.theme-squirrel .tpmodes.code .hljs-link,.theme-squirrel .tpmodes.code .hljs-meta,.theme-squirrel .tpmodes.code .hljs-selector-id,.theme-squirrel .tpmodes.code .hljs-title,.theme-eddie .tpmodes.code .hljs-symbol,.theme-eddie .tpmodes.code .hljs-bullet,.theme-eddie .tpmodes.code .hljs-link,.theme-eddie .tpmodes.code .hljs-meta,.theme-eddie .tpmodes.code .hljs-selector-id,.theme-eddie .tpmodes.code .hljs-title,.theme-early-birds .tpmodes.code .hljs-symbol,.theme-early-birds .tpmodes.code .hljs-bullet,.theme-early-birds .tpmodes.code .hljs-link,.theme-early-birds .tpmodes.code .hljs-meta,.theme-early-birds .tpmodes.code .hljs-selector-id,.theme-early-birds .tpmodes.code .hljs-title,.theme-penguin-land .tpmodes.code .hljs-symbol,.theme-penguin-land .tpmodes.code .hljs-bullet,.theme-penguin-land .tpmodes.code .hljs-link,.theme-penguin-land .tpmodes.code .hljs-meta,.theme-penguin-land .tpmodes.code .hljs-selector-id,.theme-penguin-land .tpmodes.code .hljs-title,.theme-null .tpmodes.code .hljs-symbol,.theme-null .tpmodes.code .hljs-bullet,.theme-null .tpmodes.code .hljs-link,.theme-null .tpmodes.code .hljs-meta,.theme-null .tpmodes.code .hljs-selector-id,.theme-null .tpmodes.code .hljs-title,.theme-blue .tpmodes.code .hljs-symbol,.theme-blue .tpmodes.code .hljs-bullet,.theme-blue .tpmodes.code .hljs-link,.theme-blue .tpmodes.code .hljs-meta,.theme-blue .tpmodes.code .hljs-selector-id,.theme-blue .tpmodes.code .hljs-title,.theme-bees .tpmodes.code .hljs-symbol,.theme-bees .tpmodes.code .hljs-bullet,.theme-bees .tpmodes.code .hljs-link,.theme-bees .tpmodes.code .hljs-meta,.theme-bees .tpmodes.code .hljs-selector-id,.theme-bees .tpmodes.code .hljs-title { color: #4078f2 } .theme-yellow-taxi .tpmodes.code .hljs-built_in,.theme-yellow-taxi .tpmodes.code .hljs-title.class_,.theme-yellow-taxi .tpmodes.code .hljs-class .hljs-title,.theme-squirrel .tpmodes.code .hljs-built_in,.theme-squirrel .tpmodes.code .hljs-title.class_,.theme-squirrel .tpmodes.code .hljs-class .hljs-title,.theme-eddie .tpmodes.code .hljs-built_in,.theme-eddie .tpmodes.code .hljs-title.class_,.theme-eddie .tpmodes.code .hljs-class .hljs-title,.theme-early-birds .tpmodes.code .hljs-built_in,.theme-early-birds .tpmodes.code .hljs-title.class_,.theme-early-birds .tpmodes.code .hljs-class .hljs-title,.theme-penguin-land .tpmodes.code .hljs-built_in,.theme-penguin-land .tpmodes.code .hljs-title.class_,.theme-penguin-land .tpmodes.code .hljs-class .hljs-title,.theme-null .tpmodes.code .hljs-built_in,.theme-null .tpmodes.code .hljs-title.class_,.theme-null .tpmodes.code .hljs-class .hljs-title,.theme-blue .tpmodes.code .hljs-built_in,.theme-blue .tpmodes.code .hljs-title.class_,.theme-blue .tpmodes.code .hljs-class .hljs-title,.theme-bees .tpmodes.code .hljs-built_in,.theme-bees .tpmodes.code .hljs-title.class_,.theme-bees .tpmodes.code .hljs-class .hljs-title { color: #c18401 } .theme-yellow-taxi .tpmodes.code .hljs-emphasis,.theme-squirrel .tpmodes.code .hljs-emphasis,.theme-eddie .tpmodes.code .hljs-emphasis,.theme-early-birds .tpmodes.code .hljs-emphasis,.theme-penguin-land .tpmodes.code .hljs-emphasis,.theme-null .tpmodes.code .hljs-emphasis,.theme-blue .tpmodes.code .hljs-emphasis,.theme-bees .tpmodes.code .hljs-emphasis { font-style: italic } .theme-yellow-taxi .tpmodes.code .hljs-strong,.theme-squirrel .tpmodes.code .hljs-strong,.theme-eddie .tpmodes.code .hljs-strong,.theme-early-birds .tpmodes.code .hljs-strong,.theme-penguin-land .tpmodes.code .hljs-strong,.theme-null .tpmodes.code .hljs-strong,.theme-blue .tpmodes.code .hljs-strong,.theme-bees .tpmodes.code .hljs-strong { font-weight: bold } .theme-yellow-taxi .tpmodes.code .hljs-link,.theme-squirrel .tpmodes.code .hljs-link,.theme-eddie .tpmodes.code .hljs-link,.theme-early-birds .tpmodes.code .hljs-link,.theme-penguin-land .tpmodes.code .hljs-link,.theme-null .tpmodes.code .hljs-link,.theme-blue .tpmodes.code .hljs-link,.theme-bees .tpmodes.code .hljs-link { text-decoration: underline } .theme-dark .tpmodes.code .hljs,.theme-robot .tpmodes.code .hljs,.theme-codder .tpmodes.code .hljs,.theme-kingfish .tpmodes.code .hljs { color: #abb2bf } .theme-dark .tpmodes.code .hljs-comment,.theme-dark .tpmodes.code .hljs-quote,.theme-robot .tpmodes.code .hljs-comment,.theme-robot .tpmodes.code .hljs-quote,.theme-codder .tpmodes.code .hljs-comment,.theme-codder .tpmodes.code .hljs-quote,.theme-kingfish .tpmodes.code .hljs-comment,.theme-kingfish .tpmodes.code .hljs-quote { color: #5c6370; font-style: italic } .theme-dark .tpmodes.code .hljs-doctag,.theme-dark .tpmodes.code .hljs-keyword,.theme-dark .tpmodes.code .hljs-formula,.theme-robot .tpmodes.code .hljs-doctag,.theme-robot .tpmodes.code .hljs-keyword,.theme-robot .tpmodes.code .hljs-formula,.theme-codder .tpmodes.code .hljs-doctag,.theme-codder .tpmodes.code .hljs-keyword,.theme-codder .tpmodes.code .hljs-formula,.theme-kingfish .tpmodes.code .hljs-doctag,.theme-kingfish .tpmodes.code .hljs-keyword,.theme-kingfish .tpmodes.code .hljs-formula { color: #c678dd } .theme-dark .tpmodes.code .hljs-section,.theme-dark .tpmodes.code .hljs-name,.theme-dark .tpmodes.code .hljs-selector-tag,.theme-dark .tpmodes.code .hljs-deletion,.theme-dark .tpmodes.code .hljs-subst,.theme-robot .tpmodes.code .hljs-section,.theme-robot .tpmodes.code .hljs-name,.theme-robot .tpmodes.code .hljs-selector-tag,.theme-robot .tpmodes.code .hljs-deletion,.theme-robot .tpmodes.code .hljs-subst,.theme-codder .tpmodes.code .hljs-section,.theme-codder .tpmodes.code .hljs-name,.theme-codder .tpmodes.code .hljs-selector-tag,.theme-codder .tpmodes.code .hljs-deletion,.theme-codder .tpmodes.code .hljs-subst,.theme-kingfish .tpmodes.code .hljs-section,.theme-kingfish .tpmodes.code .hljs-name,.theme-kingfish .tpmodes.code .hljs-selector-tag,.theme-kingfish .tpmodes.code .hljs-deletion,.theme-kingfish .tpmodes.code .hljs-subst { color: #e06c75 } .theme-dark .tpmodes.code .hljs-literal,.theme-robot .tpmodes.code .hljs-literal,.theme-codder .tpmodes.code .hljs-literal,.theme-kingfish .tpmodes.code .hljs-literal { color: #56b6c2 } .theme-dark .tpmodes.code .hljs-string,.theme-dark .tpmodes.code .hljs-regexp,.theme-dark .tpmodes.code .hljs-addition,.theme-dark .tpmodes.code .hljs-attribute,.theme-dark .tpmodes.code .hljs-meta .hljs-string,.theme-robot .tpmodes.code .hljs-string,.theme-robot .tpmodes.code .hljs-regexp,.theme-robot .tpmodes.code .hljs-addition,.theme-robot .tpmodes.code .hljs-attribute,.theme-robot .tpmodes.code .hljs-meta .hljs-string,.theme-codder .tpmodes.code .hljs-string,.theme-codder .tpmodes.code .hljs-regexp,.theme-codder .tpmodes.code .hljs-addition,.theme-codder .tpmodes.code .hljs-attribute,.theme-codder .tpmodes.code .hljs-meta .hljs-string,.theme-kingfish .tpmodes.code .hljs-string,.theme-kingfish .tpmodes.code .hljs-regexp,.theme-kingfish .tpmodes.code .hljs-addition,.theme-kingfish .tpmodes.code .hljs-attribute,.theme-kingfish .tpmodes.code .hljs-meta .hljs-string { color: #98c379 } .theme-dark .tpmodes.code .hljs-attr,.theme-dark .tpmodes.code .hljs-variable,.theme-dark .tpmodes.code .hljs-template-variable,.theme-dark .tpmodes.code .hljs-type,.theme-dark .tpmodes.code .hljs-selector-class,.theme-dark .tpmodes.code .hljs-selector-attr,.theme-dark .tpmodes.code .hljs-selector-pseudo,.theme-dark .tpmodes.code .hljs-number,.theme-robot .tpmodes.code .hljs-attr,.theme-robot .tpmodes.code .hljs-variable,.theme-robot .tpmodes.code .hljs-template-variable,.theme-robot .tpmodes.code .hljs-type,.theme-robot .tpmodes.code .hljs-selector-class,.theme-robot .tpmodes.code .hljs-selector-attr,.theme-robot .tpmodes.code .hljs-selector-pseudo,.theme-robot .tpmodes.code .hljs-number,.theme-codder .tpmodes.code .hljs-attr,.theme-codder .tpmodes.code .hljs-variable,.theme-codder .tpmodes.code .hljs-template-variable,.theme-codder .tpmodes.code .hljs-type,.theme-codder .tpmodes.code .hljs-selector-class,.theme-codder .tpmodes.code .hljs-selector-attr,.theme-codder .tpmodes.code .hljs-selector-pseudo,.theme-codder .tpmodes.code .hljs-number,.theme-kingfish .tpmodes.code .hljs-attr,.theme-kingfish .tpmodes.code .hljs-variable,.theme-kingfish .tpmodes.code .hljs-template-variable,.theme-kingfish .tpmodes.code .hljs-type,.theme-kingfish .tpmodes.code .hljs-selector-class,.theme-kingfish .tpmodes.code .hljs-selector-attr,.theme-kingfish .tpmodes.code .hljs-selector-pseudo,.theme-kingfish .tpmodes.code .hljs-number { color: #d19a66 } .theme-dark .tpmodes.code .hljs-symbol,.theme-dark .tpmodes.code .hljs-bullet,.theme-dark .tpmodes.code .hljs-link,.theme-dark .tpmodes.code .hljs-meta,.theme-dark .tpmodes.code .hljs-selector-id,.theme-dark .tpmodes.code .hljs-title,.theme-robot .tpmodes.code .hljs-symbol,.theme-robot .tpmodes.code .hljs-bullet,.theme-robot .tpmodes.code .hljs-link,.theme-robot .tpmodes.code .hljs-meta,.theme-robot .tpmodes.code .hljs-selector-id,.theme-robot .tpmodes.code .hljs-title,.theme-codder .tpmodes.code .hljs-symbol,.theme-codder .tpmodes.code .hljs-bullet,.theme-codder .tpmodes.code .hljs-link,.theme-codder .tpmodes.code .hljs-meta,.theme-codder .tpmodes.code .hljs-selector-id,.theme-codder .tpmodes.code .hljs-title,.theme-kingfish .tpmodes.code .hljs-symbol,.theme-kingfish .tpmodes.code .hljs-bullet,.theme-kingfish .tpmodes.code .hljs-link,.theme-kingfish .tpmodes.code .hljs-meta,.theme-kingfish .tpmodes.code .hljs-selector-id,.theme-kingfish .tpmodes.code .hljs-title { color: #61aeee } .theme-dark .tpmodes.code .hljs-built_in,.theme-dark .tpmodes.code .hljs-title.class_,.theme-dark .tpmodes.code .hljs-class .hljs-title,.theme-robot .tpmodes.code .hljs-built_in,.theme-robot .tpmodes.code .hljs-title.class_,.theme-robot .tpmodes.code .hljs-class .hljs-title,.theme-codder .tpmodes.code .hljs-built_in,.theme-codder .tpmodes.code .hljs-title.class_,.theme-codder .tpmodes.code .hljs-class .hljs-title,.theme-kingfish .tpmodes.code .hljs-built_in,.theme-kingfish .tpmodes.code .hljs-title.class_,.theme-kingfish .tpmodes.code .hljs-class .hljs-title { color: #e6c07b } .theme-dark .tpmodes.code .hljs-emphasis,.theme-robot .tpmodes.code .hljs-emphasis,.theme-codder .tpmodes.code .hljs-emphasis,.theme-kingfish .tpmodes.code .hljs-emphasis { font-style: italic } .theme-dark .tpmodes.code .hljs-strong,.theme-robot .tpmodes.code .hljs-strong,.theme-codder .tpmodes.code .hljs-strong,.theme-kingfish .tpmodes.code .hljs-strong { font-weight: bold } .theme-dark .tpmodes.code .hljs-link,.theme-robot .tpmodes.code .hljs-link,.theme-codder .tpmodes.code .hljs-link,.theme-kingfish .tpmodes.code .hljs-link { text-decoration: underline } @media screen and (max-width: 800px) { .menu-action { transform:scale(0.7) } } .play-button { position: absolute; top: 50%; left: 50%; height: 76px; width: 300px; margin-top: -38px; margin-left: -150px; padding: 20px; z-index: 1; color: #fff; font-family: Roboto; font-weight: 300; font-size: 26px; text-align: center; cursor: pointer; border-radius: 10px; background-color: rgba(0,0,0,.64) } .ressect { opacity: 0; position: fixed; top: 0px; right: 0px; left: 0px; bottom: 0px; background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center } .ressect.active { opacity: 1; transition: .7s linear opacity } .ressect #vt_ad1 { height: 250px; width: 300px } .ressect .svgstroke { fill: none; stroke: #f15a24; stroke-width: 2.6711; stroke-miterlimit: 10 } .ressect .svgfill { fill: #f15a24 } .ressect .content { opacity: 0; max-width: 70% } .ressect .content .progress-wrapper { display: flex } .ressect .content .progress-wrapper.with-ads .fancy-progress-bar { padding-top: 130px } .ressect .content .progress-wrapper .fancy-progress-bar { flex: 2 } .ressect .content .progress-wrapper .ads { flex: 1; width: 300px; height: 250px; margin-left: 30px } .ressect .content .text-content { display: flex; margin-top: 20px } .ressect .content .text-content .column1 { flex: 2; padding: 20px } .ressect .content .text-content .column1 .lesson-text { font-size: 1.5em; line-height: 1.4em } .ressect .content .text-content .column1 .lesson-name { font-size: 1.6em; font-weight: bold; margin-bottom: 10px; font-family: "Montserrat" } .ressect .content .text-content .column2 { flex: 1; padding: 20px } .ressect .content .text-content .column2 .metrics .top,.ressect .content .text-content .column2 .metrics .bottom { display: flex; margin: 0px 0px 10px 0px } .ressect .content .text-content .column2 .metrics .top div,.ressect .content .text-content .column2 .metrics .bottom div { flex: 1; margin: 5px } .ressect .content .text-content .column2 .metrics .top .m-label,.ressect .content .text-content .column2 .metrics .bottom .m-label { font-weight: normal; font-family: Roboto; font-size: 1.4em; margin: 0px } @media screen and (max-width: 800px) { .ressect .content .text-content .column2 .metrics .top .m-label,.ressect .content .text-content .column2 .metrics .bottom .m-label { font-size:1em } } .ressect .content .text-content .column2 .metrics .top .m-value,.ressect .content .text-content .column2 .metrics .bottom .m-value { font-weight: bold; font-family: "Montserrat"; font-size: 2em; margin: 0px } @media screen and (max-width: 800px) { .ressect .content .text-content .column2 .metrics .top .m-value,.ressect .content .text-content .column2 .metrics .bottom .m-value { font-size:1.5em } } .ressect .content .text-content .column2 .metrics .top .m-value .m-sublabel,.ressect .content .text-content .column2 .metrics .bottom .m-value .m-sublabel { font-size: .6em } .ressect .content .text-content .column2 .buttons { display: flex; margin-top: 25px } @media screen and (max-width: 800px) { .ressect .content .text-content .column2 .buttons { margin:-10px 0 0 -15px } } .ressect .content .text-content .column2 .buttons .btn-wrapper { flex: 1; margin: 5px; width: 75px; height: 80px } @media screen and (max-width: 800px) { .ressect .content .text-content .column2 .buttons .btn-wrapper { width:50px; height: 55px } } .ressect .content .text-content .column2 .buttons a.btn-wrapper:hover .colorsect { fill: #33ace0 } .ressect.active .content { opacity: 1; transition: .5s linear opacity; transition-delay: .7s } @media screen and (max-width: 800px) { .ressect .content { min-width:557px !important } } .typing-attempt-details { max-width: 1000px; margin: auto; padding: 20px 0 } .typing-attempt-details h3 { font-size: 15px; font-family: Rubik,sans-serif; color: #555; text-align: center; margin: 40px 0 } .typing-attempt-details .details-panel { background: #fff; border-radius: 17px; box-shadow: 0 3px 6px rgba(0,0,0,.15); padding: 26px 22px; min-height: 110px } .typing-attempt-details .tpmodes { position: relative; min-height: 150px; text-align: center } .typing-attempt-details .tpmodes .typable { display: inline-block; text-align: left; margin-bottom: 15px } .typing-attempt-details .tpmodes>a { position: absolute; display: block; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center } .typing-attempt-details .tpmodes>a>i { display: block; background: #5cacf2; color: rgba(255,255,255,.9); width: 94px; line-height: 94px; border-radius: 50%; text-align: center; font-size: 70px } .typing-attempt-details .tpmodes>a>i:before { top: 8px; left: 4px } .typing-attempt-details .tpmodes:hover { background: #fafcff } .typing-attempt-details .tpmodes:hover>a { opacity: .9 !important; color: #fff } .typing-attempt-details .stagger-show { opacity: 0; transform: translateY(30px) } .typing-attempt-details .typing-attempt-history { width: 100%; margin: auto; color: #5a5a5a } .typing-attempt-details .typing-attempt-history .details-panel { display: table; width: 100%; text-align: center; margin: 16px 0 } .typing-attempt-details .typing-attempt-history .details-panel>div { width: 10%; display: table-cell } .typing-attempt-details .typing-attempt-history label { font-family: Rubik,sans-serif; font-size: 12px; text-transform: uppercase; color: #b2b2b2; text-align: center; padding: 10px 0; font-weight: normal } .typing-attempt-details .typing-attempt-history button { width: 32px; height: 32px; border: solid 1px; background: #fff; border-radius: 50% } .typing-attempt-details .typing-attempt-history button:hover { background: #5cacf2; color: #fff } .typing-attempt-details .typing-attempt-history button>i:before { transform: scale(1.5) translateX(1px) } .typing-attempt-details .typing-attempt-history .number-value { font-family: Akrobat-Bold,sans-serif; font-size: 30px; text-align: center; position: relative } #vkeyboardkeys>svg { direction: ltr; background: none } #vkeyboardkeys>svg.standard-kb .st0 { fill: none; stroke: #777; stroke-width: .5; stroke-miterlimit: 10 } #vkeyboardkeys>svg.standard-kb .st1 { opacity: 0; font-family: "ArialMT","Arial","Helvetica","sans-serif"; font-size: 15px } #vkeyboardkeys>svg.standard-kb .st2 { opacity: 1; fill: #777 } #vkeyboardkeys>svg.standard-kb .b { font-size: 26px } #vkeyboardkeys>svg.standard-kb .b2 { font-size: 24px } #vkeyboardkeys>svg.standard-kb .s { font-size: 12px } #vkeyboardkeys>svg.standard-kb path.active { fill: #79bbff } #vkeyboardkeys>svg.standard-kb path.deadkey { fill: orange } #vkeyboardkeys>svg.standard-kb path.correct { stroke: #c2ea9a; stroke-width: 4 } #vkeyboardkeys>svg.standard-kb path.incorrect { fill: #e97e7e } #vkeyboardkeys>svg.standard-kb path.clickable:hover { cursor: pointer; stroke-width: 2px } #vkeyboardkeys>svg.standard-kb text { user-select: none; opacity: 0 } #vkeyboardkeys>svg.standard-kb text.active { fill: #fff } #vkeyboardkeys>svg.standard-kb text.incorrect { fill: #fff } #vkeyboardkeys>svg.theme-bone .edc-st0 { fill: #fff; stroke-width: 1; stroke: #d1d1d1 } #vkeyboardkeys>svg.theme-bone .edc-st0.active { fill: #0383f2 } #vkeyboardkeys>svg.theme-bone .edc-st0.incorrect { transition: none; fill: #f5687c } #vkeyboardkeys>svg.theme-bone .edc-st1 { font-size: 14px } #vkeyboardkeys>svg.theme-bone .edc-st2 { opacity: 0 } #vkeyboardkeys>svg.theme-bone .s { font-size: 11px } #vkeyboardkeys>svg.theme-bone .b { font-size: 24px } #vkeyboardkeys>svg.theme-bone .b.incorrect { opacity: 1; transition: none } #vkeyboardkeys>svg.theme-bone .b.focus-row { opacity: 1 } #vkeyboardkeys>svg.theme-bone .hide-on-bone { opacity: 0 } #vkeyboardkeys>svg.theme-bone .edc-st0,#vkeyboardkeys>svg.theme-bone text { transition: fill .5s,opacity 1.2s; transition-delay: .25s } #vkeyboardkeys>svg.is-blind .edc-st0 { fill: #272822; stroke: #858585 } #vkeyboardkeys>svg.is-blind .edc-st2 { fill: #d7ff12 } #vkeyboardkeys>svg.is-blind .b { font-size: 30px } #vkeyboardkeys>svg.is-blind .b2 { font-size: 28px } #vkeyboardkeys>svg.is-blind path.active { fill: #79bbff } #vkeyboardkeys>svg.is-blind path.deadkey { fill: orange } #vkeyboardkeys>svg.is-blind path.incorrect { fill: #e97e7e } .farsi-font #vkeyboardkeys>svg .b { font-size: 19px } .farsi-font #vkeyboardkeys>svg .edc-st1 { font-family: YekanBold } .spelling-pages { color: #414141; padding: 0; position: relative; min-height: 600px } .spelling-pages:before { content: " "; display: block; pointer-events: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: #f3f3f3 } .spelling-pages.whitebg:before { background: #fff } .spelling-pages .front-page { position: absolute; padding: 20px 0; width: 100%; text-align: center } .spelling-pages .voiceover-svg { height: 28px; margin-left: 25px; margin-bottom: 2px; pointer-events: none } .spelling-pages .voiceover-svg .a { fill: #2b98f0 } .bottom-feedback-bar { position: fixed; bottom: -100px; border-top-right-radius: 100px; border-top-left-radius: 100px; padding: 10px 30px 110px; text-align: center; width: 600px; margin-left: -300px; left: 50%; background: #fff; font-size: 20px; font-weight: bold; overflow: hidden; border: solid 1px #ddd; opacity: 0; z-index: 1 } .bottom-feedback-bar svg { width: 30px; display: inline-block; margin-right: 13px } .bottom-feedback-bar .checkmark-svg { margin-bottom: -18px; transform: translateY(-3px) } .bottom-feedback-bar .shadow { position: absolute; left: 0; right: 0; bottom: 0; top: calc(100% - 125px); background: #fafafa } .bottom-feedback-bar.wrong { background: #f1dadd; color: #f5687c } .bottom-feedback-bar.wrong svg>path { fill: #f5687c } .bottom-feedback-bar.wrong .shadow { background: #f2cfd3 } .bottom-feedback-bar.correct { color: #10c373 } .bottom-feedback-bar.correct svg>polyline { stroke: #10c373 !important } .bottom-feedback-bar.help { color: #f3f3f3; background: #03a9f4 } .bottom-feedback-bar.help .shadow { background: #2196f3 } .bottom-feedback-bar.save-progress { padding: 2px 30px 93px; font-weight: normal; color: #828282; background: #fff9e6 } .bottom-feedback-bar.save-progress .shadow { background: #fff2cc; top: calc(100% - 113px) } .bottom-feedback-bar.save-progress.progress-saved { background: #d3ef97 } .bottom-feedback-bar.save-progress.progress-saved .shadow { background: #c8ea7f } .bottom-feedback-bar .close-message { font-size: 21px; opacity: .8; cursor: pointer } .bottom-feedback-bar .close-message:hover { opacity: 1 } .bottom-nav-bar { position: fixed; left: 0; right: 0; bottom: -3px; height: 100px; z-index: 5; border-top: solid 1px #ddd; background: #fff; text-align: center; transform: translateY(150px); animation: bottom-popup .5s ease forwards } .bottom-nav-bar .bottom-progress-bar { max-width: 500px; width: 100%; height: 16px; border-radius: 8px; background: #f1f1f1; margin: 40px auto; display: inline-block; border: solid 1px rgba(0,0,0,0) } .bottom-nav-bar .bottom-progress-bar>i { background: #80ecc6; height: 100%; min-width: 16px; border-radius: 8px; display: block; transition: width .5s ease-out,opacity .4s ease-out } .bottom-nav-bar .hidden-with-placeholder { opacity: 0; pointer-events: none } .bottom-nav-bar .navbar-content { position: relative; padding: 0 170px; color: gray; font-family: Rubik; font-size: 23px; margin: auto; max-width: 1000px } .bottom-nav-bar .navbar-content .navbar-details { height: 90px; font-size: .7em; display: flex; line-height: 1.3; align-items: center; justify-content: center } .bottom-nav-bar .navbar-content>span { font-size: 22px; color: #59d797; text-align: left; line-height: 1.4; display: inline-block } .bottom-nav-bar .navbar-content .text { display: inline-block; margin: auto; font-size: 14px } .bottom-nav-bar .navbar-content .text .enter { border: solid 1px; border-radius: 5px; padding: 5px 15px; margin: 10px } @media(max-width: 600px) { .bottom-nav-bar .navbar-content .text { display:none } } .bottom-nav-bar .navbar-content .btn { cursor: pointer; position: absolute; top: 30px; min-width: 120px; line-height: 22px; border-radius: 20px; outline: none; color: gray } .bottom-nav-bar .navbar-content .btn:focus { border: solid 1px #459d70 !important } .bottom-nav-bar .navbar-content .btn:disabled { pointer-events: none; background: rgba(0,0,0,0) !important; border: solid 1px #ddd !important; color: gray !important } .bottom-nav-bar .navbar-content .btn.outline { background: #fff; color: #1daaf1; border: solid 1px #1daaf1 } .bottom-nav-bar .navbar-content .btn.outline:hover { background: #1daaf1; color: #fff } .bottom-nav-bar .navbar-content .btn.mono { background: none; border: solid 1px #d4d4d4; color: #707070 } .bottom-nav-bar .navbar-content .btn.mono:hover { border-color: #2bde8e; background: #2bde8e; color: #fff } .bottom-nav-bar .navbar-content .btn.default { border: solid 1px #ddd } .bottom-nav-bar .navbar-content .btn.default:hover { background: #f1f1f1 } .bottom-nav-bar .navbar-content .btn.primary { background: #59d797; color: #fff; border: solid 1px #59d797 } .bottom-nav-bar .navbar-content .btn.primary:hover { background: #0eb168 } .bottom-nav-bar .navbar-content .btn.btn-link { border: none; background: none } .bottom-nav-bar .navbar-content .btn.btn-link:hover { color: #2bde8e; text-decoration: none } .bottom-nav-bar .navbar-content .btn.btn-link:hover:before { content: "<"; position: absolute; left: 15px; top: 7px } .bottom-nav-bar .navbar-content .navbar-goback { left: 25px } .bottom-nav-bar .navbar-content .navbar-continue { right: 25px } .bottom-nav-bar .navbar-content .navbar-continue .continue-tooltip { font-family: Rubik,sans-serif; position: absolute; font-size: 14px; padding: 3px 10px; background: #1daaf1; color: #fff; border-radius: 5px; top: -35px; box-shadow: 1px 1px 3px #1daaf1; opacity: 0; transform: scale(0.5); pointer-events: none } .bottom-nav-bar .navbar-content .navbar-continue .continue-tooltip:after { content: ""; position: absolute; bottom: -8px; left: 35px; width: 10px; height: 0; border-right: solid 10px rgba(0,0,0,0); border-left: solid 10px rgba(0,0,0,0); border-top: solid 10px #1daaf1 } @keyframes animate-tooltip { 8% { opacity: .9; top: -40px; transform: scale(1) } 95% { opacity: .9; top: -40px; transform: scale(1) } 100% { opacity: 0; top: -35px; transform: scale(0.5) } } .bottom-nav-bar .navbar-content .navbar-continue:hover:not(.no-tooltip) .continue-tooltip { animation: animate-tooltip 2.5s ease-out forwards; animation-delay: .5s } .bottom-nav-bar.correct { background: #d0f0e2 } .bottom-nav-bar.correct .bottom-progress-bar i,.bottom-nav-bar.correct .navbar-continue { background: #10c373 } .bottom-nav-bar.correct .bottom-progress-bar { border-color: #10c373 } .bottom-nav-bar.wrong { background: #f1dadd } .bottom-nav-bar.wrong .bottom-progress-bar i,.bottom-nav-bar.wrong .navbar-continue { background: #f5687c; border: solid 1px #f5687c } .bottom-nav-bar.wrong .bottom-progress-bar { border-color: #f5687c } .bottom-nav-bar.wrong .navbar-continue:hover { background: #e24d62 } .bottom-nav-bar.hidden { display: none } @keyframes bottom-popup { 100% { transform: translateY(0) } } .playable-sound .voiceover-svg .a { fill: #717171 } .playable-sound:hover { cursor: pointer } .playable-sound:hover .voiceover-svg .a { fill: #2b98f0 !important } .spelling-cards .front-page,.spelling-multi-choice .front-page { padding: 60px 0 150px; width: 100%; display: flex; min-height: 100vh; align-items: center; justify-content: center } .spelling-card { opacity: 0; transform: translateY(40px); text-align: left; max-width: 500px; padding: 30px 15px 0 } .spelling-card .playable-sound.smaller svg { width: 20px; margin-left: 15px } .spelling-card .word-pos { font-style: italic; color: #8490a0; margin-bottom: 0 } .spelling-card .word-box { font-family: Rubik,sans-serif; font-size: 41pt; font-weight: 500; vertical-align: top; color: #2c3a42; line-height: 1 } .spelling-card .word-box .word-placeholder { padding: 0 75px 0 20px; height: 0; overflow: hidden } .spelling-card .word-box .word { font-variant-ligatures: none; z-index: 1 } .spelling-card .word-box .word .visible-content { white-space: nowrap } .spelling-card .word-box .word .visible-content>span { display: inline-block; vertical-align: top } .spelling-card .word-box .word-pos { font-size: 15pt; margin: 5px 5px 15px } .spelling-card .definition { display: inline-block; font-family: Rubik,sans-serif; font-weight: 400; font-size: 14pt } .spelling-card .definition .def { color: #4f4e4c; font-weight: 300 } .spelling-card .definition .example { font-style: italic; color: #2b98f0; position: relative; padding-right: 30px; padding-top: 2px } .spelling-card .definition .example .playable-sound svg { margin-bottom: -5px; margin-top: -5px } .spelling-card .definition .sense { padding-top: 25px; line-height: 1.4 } .spelling-spellit { padding-top: 35px; max-width: 1000px; margin: auto } @media(max-height: 700px) { .spelling-spellit { padding-top:0px; transform-origin: top; transform: scale(0.85) } } @media(max-height: 600px) { .spelling-spellit { transform:scale(0.7) } } @media(max-height: 500px) { .spelling-spellit { transform:scale(0.6) } } @media(max-height: 400px) { .spelling-spellit { transform:scale(0.45) } } .spelling-spellit .spell-word-card { margin: 0 45px 0 15px; height: 50vh; padding: 50px 0; margin-bottom: -50vh; position: relative; box-shadow: 0px -5px 5px rgba(0,0,0,.05); background: linear-gradient(#fff 0%, #fff 50%, #f3f3f3 90%) } .spelling-spellit .spell-word-card .playable-sound { position: absolute; top: 12px; left: -10px; transform: scale(0.8) } .spelling-spellit .spell-word-card .playable-sound .voiceover-svg .a { fill: #dadada } .spelling-spellit .spell-word-card .trial-legend { position: absolute; top: 8px; right: 8px } .spelling-spellit .spell-word-card .trial-legend>i { display: inline-block; height: 18px; width: 10px; margin: 1px } .spelling-spellit .spell-word-card .word-char { outline: solid 2px #fff } .spelling-spellit .spell-word-card .word-char b { height: 1.2em; display: block } .spelling-spellit .spell-word-card .word-char i { position: absolute; display: block; top: 115%; left: 0; width: 100%; padding: .15em 0 .25em; font-size: .3em; color: #fff; background: #f5687c; font-style: normal } .spelling-spellit .completed-checkmark { position: absolute; top: 360px; left: 50%; margin-left: -60px; width: 120px; height: 120px; line-height: 1.6; text-align: center; color: #fff; background: #59d797; border-radius: 50%; opacity: 0; transform: scale(0.1); padding: 15px 25px } .spelling-dictation { padding-top: calc((100vh - 310px)*.2); height: calc(100vh - 50px); text-align: center } @media screen and (max-height: 600px) { .spelling-dictation { padding-top:55px } } .spelling-dictation .voiceover-box { display: inline-block; border-radius: 50%; position: relative; width: 105px; height: 105px } @media(max-height: 768px) { .spelling-dictation .voiceover-box { transform:scale(0.85) } } .spelling-dictation .voiceover-box .front-icon { position: relative; border: solid 10px #ddd; margin: auto; padding: 18px 0; width: 105px; height: 105px; border-radius: 50%; background: #fff; transition: transform .2s ease-out,box-shadow .3s } .spelling-dictation .voiceover-box .front-icon>svg { height: 45px; margin: 0 } .spelling-dictation .voiceover-box #voice-drum,.spelling-dictation .voiceover-box .hover-drum { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #d8e8f3; border-radius: 50% } .spelling-dictation .voiceover-box .hover-drum { transition: transform .4s ease-out } .spelling-dictation .voiceover-box #voice-border-1,.spelling-dictation .voiceover-box #voice-border-2 { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50% } .spelling-dictation .voiceover-box #voice-border-1 { transform: scale(0.8) rotate(83deg); border: solid 30px rgba(0,0,0,0); border-left-color: #8cc5eb } .spelling-dictation .voiceover-box #voice-border-2 { transform: scale(0.8) rotate(59deg); border: solid 30px rgba(0,0,0,0); border-right-color: #8cc5eb } .spelling-dictation .voiceover-box:hover { cursor: pointer } .spelling-dictation .voiceover-box:hover>div { transform: scale(1.1); box-shadow: 0 0 5px rgba(0,0,0,.3) } .spelling-dictation .voiceover-box:hover .hover-drum { transform: scale(1.3) } .spelling-dictation .word-input { opacity: 0; z-index: 1; font-family: Droid Sans Mono,monospace; display: inline-block; position: absolute; left: 0; padding: 0 .125em; letter-spacing: .25em; line-height: 1em; width: calc(100% + .3em) } .spelling-dictation .last-caret { position: relative; display: inline-block; height: 1.26em; border-left: solid 4px rgba(0,0,0,0); border-radius: 2px; width: 0; margin: .05em 0 -0.05em 0; vertical-align: top } .spelling-dictation .last-caret.current { animation: blink .8s ease infinite alternate } .spelling-dictation .leftovers { position: absolute; right: -0.15em; top: .1em; color: #f5687c; width: 0 } .spelling-dictation .dictation-hint { font-size: 30px; font-weight: 500; margin-top: calc((100vh - 310px)*.12); color: #8cc5eb } @media(max-height: 440px) { .spelling-dictation .dictation-hint { font-size:20px; padding-top: 5px; position: relative; z-index: 101 } } .spelling-dictation .option-buttons { height: 20px; position: relative; z-index: 1 } .spelling-dictation .option-buttons button { background: #fff } .spelling-shuffle .option-buttons { margin: 0; text-align: center; width: 100% !important; line-height: 1.1; margin: 20px auto !important } .spelling-shuffle .option-buttons button { width: 120px; outline: none !important; border: solid 1px #d1d1d1; background: #fff } .spelling-shuffle .option-buttons.animated { transform: translateY(50px); opacity: 0 } .spelling-shuffle .hint-context { display: inline-block; text-align: left; max-width: 450px; text-align: center; margin: 0 auto; font-size: 1.3em; color: #2b98f0; padding: 20px; font-weight: 400; margin-top: -0.5em; z-index: 102 } .spelling-shuffle .hint-context.dialog { background: #2b98f0; border-radius: 10px; position: absolute; left: 50%; transform: translateX(-50%); height: 110px; width: fit-content } .spelling-shuffle .hint-context.dialog button { background: rgba(0,0,0,0); border: solid 1px; border-radius: 20px; width: 120px; color: #fff } .spelling-shuffle .hint-context.dialog button:hover { background: #8cc5eb } .spelling-shuffle .hint-context.dialog:after { position: absolute; content: " "; display: block; width: 0; height: 0; top: 0; left: 50%; border-bottom: solid 5px #2b98f0; border-left: solid 7px rgba(0,0,0,0); border-right: solid 7px rgba(0,0,0,0); margin-left: -7px; margin-top: -5px } .spelling-shuffle .hint-context.dialog .left-context { display: inline-block; width: 120px; margin-right: 20px; padding: 10px 25px } .spelling-shuffle .hint-context.dialog .left-context i { margin: 2px; display: inline-block; width: 10px; height: 20px; background: #8cc5eb; position: relative } .spelling-shuffle .hint-context.dialog .left-context i.s { background: #fff } .spelling-shuffle .hint-context.dialog .left-context i b { position: absolute; bottom: -4px; display: block; background: #fff; height: 1px; left: 0; width: 10px } .spelling-shuffle .hint-context.dialog .word-list-context { display: inline-block; width: 120px; margin-left: 20px; padding: 10px 25px; line-height: 4px } .spelling-shuffle .hint-context.dialog .word-list-context i { margin: 2px; display: inline-block; width: 30px; height: 3px; background: #8cc5eb; position: relative } .spelling-shuffle .hint-context.dialog .word-list-context i.s { background: #fff } .spelling-shuffle .hint-context.dialog .right-context { display: inline-block; width: 120px; padding: 3px 11px; vertical-align: top } .spelling-shuffle .hint-context.dialog .right-context div { height: 10px } .spelling-shuffle .hint-context.dialog .right-context i { margin: 2px; display: inline-block; width: 20px; height: 5px; background: #8cc5eb } .spelling-shuffle .hint-context.dialog .right-context i.s { width: 40px; background: #fff } .spelling-shuffle .hint-context.dialog .right-context i.sm { width: 10px } .spelling-shuffle .word-text h1 { margin: 0 } .spelling-shuffle h1.shuffle-box { position: relative; z-index: 1; font-family: Droid Sans Mono,monospace; margin-bottom: .7em } .spelling-shuffle h1.shuffle-box .animated-container { display: inline-block; position: relative } .spelling-shuffle h1.shuffle-box .animated-container .animated-box { position: absolute; z-index: 1; top: 0; height: 100%; left: 0; width: 100% } .spelling-shuffle h1.shuffle-box .animated-container .animated-box path { stroke-dasharray: 60% 380%; stroke-dashoffset: 60%; stroke: #8cc5eb; stroke-width: 6px } .spelling-shuffle h1.shuffle-box .animated-container .animated-background { position: absolute; top: .05em; left: .05em; bottom: .05em; right: .05em; transform: scale(0.8) } .spelling-shuffle h1.shuffle-box .animated-letter { background: inherit; transform: scale(0.3); position: inherit } .spelling-shuffle h1.shuffle-box span { vertical-align: top; display: inline-block; position: relative; z-index: 1; margin: .05em; width: .75em; height: 1.66em; line-height: 1; padding: .3em .05em; background: #e7eae7; color: #444 } .spelling-shuffle h1.shuffle-box span:hover { cursor: pointer; background: #ddd } .spelling-shuffle h1.shuffle-box span.printmark { background: #f9f9f9; color: #f3f3f3 } .spelling-shuffle .word-char { height: 1.66em !important; border-radius: 5px; border: solid 1px rgba(0,0,0,0) } .spelling-shuffle .word-char:after { top: 1.69em !important } .spelling-shuffle .word-char.is_focused { color: #1daaf1 } .spelling-shuffle .word-char.is_partial { background: #ffdb99 } .spelling-shuffle .word-char.is_animated { opacity: 0; transform: translateY(30px) } .spelling-shuffle .wrong-char { left: .1em } .spelling-shuffle .last-caret { height: 1.66em } .spelling-shuffle .hinted-chr { line-height: 1.4; vertical-align: top; color: #bcbcbc !important } .spelling-story { font-weight: 400; padding-top: 100px } .spelling-story .story-tutorial { position: absolute; z-index: 10; background: rgba(0,0,0,.2); top: 0; bottom: 0; text-align: center; width: 200vw; left: -50vw; opacity: 0; color: #fff; animation: blurry-in .7s ease-out forwards; animation-delay: .3s } @keyframes blurry-in { 100% { opacity: .9 } } .spelling-story .story-box { display: none; padding: 20px 15px 200px; margin-bottom: 100px } @media(max-width: 991px),(max-height: 600px) { .spelling-story .story-box { background:rgba(255,255,255,.75); border-radius: 10px; zoom:.9} } @media(max-height: 500px) { .spelling-story .story-box { zoom:.8 } } @media(max-height: 400px) { .spelling-story .story-box { zoom:.7 } } .spelling-story .story-text { font-size: 15pt; position: relative; padding-left: 65px; white-space: pre-wrap } .spelling-story .story-text .voiceover-svg { display: block; margin: auto; width: 30px } .spelling-story .story-text .typable { font-weight: 600; color: #333 } .spelling-story .highlighted { color: #2b98f0 !important } .spelling-story .background-image { position: fixed; right: 0; bottom: -60px; width: 100%; opacity: 0 } .spelling-story .front-word,.spelling-story .back-word { position: absolute; padding: 20px 0 0 65px; width: 100% } .spelling-story .back-word { overflow: hidden; z-index: -1 } .spelling-story .word-text { padding-bottom: 5px } .spelling-story .word-text .word-char { background: #f6f6f6 } .spelling-story .playable-sound { position: absolute; left: 0; top: 0; cursor: pointer } .spelling-story .story-playback-icon { transition: transform .4s; width: 40px; height: 40px; background: #1daaf1; border-radius: 20px; position: relative; border: solid 2px rgba(0,0,0,0); z-index: 1 } .spelling-story .story-playback-icon:hover { transform: scale(1.2) } .spelling-story .reduced-nav-bar .bottom-nav-bar { border-top: none; background: #fff; bottom: -25px; height: 60px; background: #fff; border-radius: 20px; max-width: 50vw; margin: auto; box-shadow: 0 0 10px rgba(0,0,0,.2) } .spelling-story .reduced-nav-bar .bottom-nav-bar .navbar-content { max-width: inherit; padding: 0 17px } .spelling-story .reduced-nav-bar .bottom-nav-bar .navbar-content>div .bottom-progress-bar { display: block; margin-top: -13px; height: 12px; max-width: 100%; border-radius: 5px } .spelling-dictation .word-text,.spelling-story .word-text,.spelling-spellit .word-text { white-space: nowrap; position: relative; margin: auto; padding-top: calc((100vh - 310px)*.1); font-size: 75px } @media(max-width: 991px),(max-height: 750px) { .spelling-dictation .word-text,.spelling-story .word-text,.spelling-spellit .word-text { font-size:65px } } @media(max-width: 767px) { .spelling-dictation .word-text,.spelling-story .word-text,.spelling-spellit .word-text { font-size:60px } } @media(max-height: 700px) { .spelling-dictation .word-text,.spelling-story .word-text,.spelling-spellit .word-text { font-size:50px } } @media(max-height: 440px) { .spelling-dictation .word-text,.spelling-story .word-text,.spelling-spellit .word-text { font-size:35px; padding-top: 12px } } .spelling-dictation .word-text.smaller,.spelling-story .word-text.smaller,.spelling-spellit .word-text.smaller { font-size: 75px } @media(max-width: 991px),(max-height: 750px) { .spelling-dictation .word-text.smaller,.spelling-story .word-text.smaller,.spelling-spellit .word-text.smaller { font-size:60px } } @media(max-width: 767px) { .spelling-dictation .word-text.smaller,.spelling-story .word-text.smaller,.spelling-spellit .word-text.smaller { font-size:50px } } @media(max-height: 440px) { .spelling-dictation .word-text.smaller,.spelling-story .word-text.smaller,.spelling-spellit .word-text.smaller { font-size:35px } } .spelling-dictation .word-text.smallest,.spelling-story .word-text.smallest,.spelling-spellit .word-text.smallest { font-size: 65px } @media(max-width: 991px),(max-height: 750px) { .spelling-dictation .word-text.smallest,.spelling-story .word-text.smallest,.spelling-spellit .word-text.smallest { font-size:50px } } @media(max-width: 767px) { .spelling-dictation .word-text.smallest,.spelling-story .word-text.smallest,.spelling-spellit .word-text.smallest { font-size:40px } } @media(max-height: 440px) { .spelling-dictation .word-text.smallest,.spelling-story .word-text.smallest,.spelling-spellit .word-text.smallest { font-size:30px } } .spelling-dictation .word-text h1,.spelling-story .word-text h1,.spelling-spellit .word-text h1 { font-size: inherit; position: relative; white-space: nowrap } .spelling-dictation .word-text h1 #checkline,.spelling-story .word-text h1 #checkline,.spelling-spellit .word-text h1 #checkline { display: block; position: absolute; left: 0; bottom: -4px; width: 0; height: 0; border-radius: 2px; border-bottom: solid 5px } @keyframes blink { 0%,65% { border-color: #414141 } 100% { border-color: rgba(0,0,0,0) } } @keyframes fade-out { 100% { opacity: 0; line-height: 2em } } .spelling-dictation .word-char,.spelling-story .word-char,.spelling-spellit .word-char { display: inline-block; margin: .05em; padding: 10px; font-weight: 700; vertical-align: bottom; font-family: Droid Sans Mono,monospace; width: .75em; height: 1.26em; line-height: 1; padding: .1em .05em; text-align: center; position: relative; color: #aaa } .spelling-dictation .word-char>span,.spelling-story .word-char>span,.spelling-spellit .word-char>span { display: inline-block; color: #414141 } .spelling-dictation .word-char.practice,.spelling-story .word-char.practice,.spelling-spellit .word-char.practice { color: #dbdbdb } .spelling-dictation .word-char.practice:after,.spelling-story .word-char.practice:after,.spelling-spellit .word-char.practice:after { color: #8cc5eb } .spelling-dictation .word-char.practice.typed,.spelling-story .word-char.practice.typed,.spelling-spellit .word-char.practice.typed { color: #414141 } .spelling-dictation .word-char.practice.error:after,.spelling-story .word-char.practice.error:after,.spelling-spellit .word-char.practice.error:after { color: #f5687c } .spelling-dictation .word-char.last,.spelling-story .word-char.last,.spelling-spellit .word-char.last { width: 0 } .spelling-dictation .word-char.current:before,.spelling-story .word-char.current:before,.spelling-spellit .word-char.current:before { content: " "; position: absolute; top: 0; width: 0; bottom: 0; left: -5px; border-left: solid 4px #414141; border-radius: 2px; animation: blink .8s ease infinite alternate; z-index: 1 } .spelling-dictation .word-char.selected,.spelling-story .word-char.selected,.spelling-spellit .word-char.selected { background: #fff } .spelling-dictation .word-char.selected>span,.spelling-story .word-char.selected>span,.spelling-spellit .word-char.selected>span { color: #8cc5eb } .spelling-dictation .word-char:after,.spelling-story .word-char:after,.spelling-spellit .word-char:after { content: " "; width: 100%; border-top: solid 4px; border-radius: 2px; position: absolute; top: 1.3em; left: 0 } .spelling-dictation .word-char .insert-pointer,.spelling-story .word-char .insert-pointer,.spelling-spellit .word-char .insert-pointer { display: none; position: absolute; width: 4px; border-radius: 2px; top: 0; bottom: 0; left: -5px; background: #8cc5eb } .spelling-dictation .word-char .insert-pointer:after,.spelling-story .word-char .insert-pointer:after,.spelling-spellit .word-char .insert-pointer:after { content: ""; display: "block"; position: absolute; top: -18px; left: -8px; border-left: solid 10px rgba(0,0,0,0); border-right: solid 10px rgba(0,0,0,0); border-top: solid 10px #8cc5eb } .spelling-dictation .word-char .insert-pointer:before,.spelling-story .word-char .insert-pointer:before,.spelling-spellit .word-char .insert-pointer:before { content: ""; display: "block"; position: absolute; bottom: -22px; left: -8px; border-left: solid 10px rgba(0,0,0,0); border-right: solid 10px rgba(0,0,0,0); border-bottom: solid 10px #8cc5eb } .spelling-dictation .word-char .correct-char,.spelling-story .word-char .correct-char,.spelling-spellit .word-char .correct-char { position: absolute; display: block; top: 115%; left: 0; width: 100%; padding: .15em 0 .25em; font-size: .3em; color: #fff; background: #f5687c; font-style: normal } .spelling-dictation .word-char .correct-char.right,.spelling-story .word-char .correct-char.right,.spelling-spellit .word-char .correct-char.right { background: #59d797 } .spelling-dictation .dk-char,.spelling-dictation .wrong-char,.spelling-story .dk-char,.spelling-story .wrong-char,.spelling-spellit .dk-char,.spelling-spellit .wrong-char { position: absolute; color: #f5687c !important; line-height: 1em; width: 100%; left: 0 } .spelling-dictation .wrong-char,.spelling-story .wrong-char,.spelling-spellit .wrong-char { animation: fade-out .5s ease forwards } .spelling-dropquiz { font-family: Rubik,sans-serif } .spelling-dropquiz .dropquiz-canvas { height: 80vh; position: relative; text-align: center; font-size: 40px } .spelling-dropquiz .dropquiz-canvas .origin { width: 0; height: 0; left: 50%; bottom: 30%; position: absolute; transform: scale(0.45) } @media(min-height: 1000px) { .spelling-dropquiz .dropquiz-canvas .origin { transform:scale(0.5) } } @media(max-height: 700px) { .spelling-dropquiz .dropquiz-canvas .origin { transform:scale(0.4) } } @media(max-height: 600px) { .spelling-dropquiz .dropquiz-canvas .origin { transform:scale(0.35) } } @media(max-height: 500px) { .spelling-dropquiz .dropquiz-canvas .origin { transform:scale(0.3) } } @media(max-height: 400px) { .spelling-dropquiz .dropquiz-canvas .origin { transform:scale(0.22) } } .spelling-dropquiz .front-def,.spelling-dropquiz .back-def { position: absolute; top: 0; left: 0; right: 0 } .spelling-dropquiz .front-def>div,.spelling-dropquiz .back-def>div { display: inline-block; text-align: left; font-size: 1.3em; padding: 10px 0 } .spelling-dropquiz .back-def { opacity: 0; overflow: hidden; z-index: -1 } .spelling-dropquiz .circle { display: inline-block; border-radius: 50%; position: absolute; background: #fff; white-space: nowrap; font-size: 0em; box-shadow: 0 0 5px rgba(0,0,0,.3); transition: box-shadow .2s } .spelling-dropquiz .circle.selected { box-shadow: 0 0 15px 5px rgba(0,0,0,.1); border: solid 1px #ddd; background: #faebd7 } .spelling-dropquiz .circle.picked { box-shadow: 0 0 35px rgba(0,0,0,.15) } .spelling-dropquiz .circle:before { content: " "; position: absolute; display: block; top: 50%; left: 50%; background: rgba(0,0,0,0); border-radius: 50%; width: 0; height: 0; margin-top: 0; margin-left: 0; transition: all ease-in-out .12s } @keyframes circle-blink { 60% { width: 90%; height: 90%; margin-top: -45%; margin-left: -45%; background: rgba(0,0,0,.06); border: solid 1px rgba(0,0,0,0) } 100% { background: rgba(0,0,0,0); width: 100%; height: 100%; margin-top: -50%; margin-left: -50%; border: solid 1px rgba(0,0,0,.3) } } .spelling-dropquiz .circle:hover:not(.picked):before { border: solid 1px rgba(0,0,0,0); background: rgba(56,157,224,.08); animation: circle-blink .2s linear forwards } .spelling-dropquiz .circle.disabled { color: #ffb799 !important; pointer-events: none } .spelling-dropquiz .circle>i { position: absolute; top: -25%; left: 45%; color: rgba(0,0,0,.3) } .spelling-dropquiz .circle-mark { display: none; border-radius: 50%; position: absolute; background: rgba(110,110,110,.05) } .spelling-dropquiz .belt { position: absolute; top: 0; left: 0; display: inline-block; border-radius: 50%; border: solid 1px #ddd } .spelling-dropquiz .dropzone { border-radius: 50%; position: absolute; color: #fff; width: 680px; height: 680px; padding: 60px; border: solid 45px #fff; top: -340px; left: -340px; background: #f5f5f5; transition: all .3s ease-in-out } .spelling-dropquiz .dropzone.no-transition { transition: none } .spelling-dropquiz .dropzone .checkmark-svg { transform: scale(0); margin-top: -75px } .spelling-dropquiz .dropzone>div { position: relative; height: 100%; border-radius: 50%; background: #389de0 } .spelling-dropquiz .dropzone>div:before { transition: all .5s ease; content: " "; position: absolute; top: 50%; left: 50%; width: 0; height: 0; margin-top: 0; margin-left: 0; background: #18669a; border-radius: 50% } .spelling-dropquiz .dropzone>div>div { position: relative } .spelling-dropquiz .dropzone.release-mode { transform: scale(1.06) !important } .spelling-dropquiz .dropzone.active { border: solid 30px #fff; padding: 30px } .spelling-dropquiz .dropzone.active>div:before { width: 90%; height: 90%; margin-left: -45%; margin-top: -45% } .spelling-dropquiz .fade-top,.spelling-dropquiz .fade-bottom,.spelling-dropquiz .clouds-bottom { position: fixed } .spelling-dropquiz .fade-top { width: 100vw; top: 0; left: 0; height: 30%; background: linear-gradient(to bottom, #efefef 10%, rgba(255, 255, 255, 0) 100%) } .spelling-dropquiz .fade-bottom { width: 100vw; bottom: 0; left: 0; bottom: 50px; height: 25%; background: linear-gradient(to top, #efefef 30%, rgba(255, 255, 255, 0) 100%) } .spelling-dropquiz .button-mute { position: fixed; right: 15px; bottom: 110px; z-index: 4; cursor: pointer; margin-top: 100px; border: 1px solid #1daaf1; border-radius: 10px; background-color: #fff; padding: 5px 10px 3px 10px; width: 80px; pointer-events: all; color: #1daaf1; font-weight: 600; font-size: 14px; font-family: Montserrat; text-align: center } .spelling-dropquiz .button-mute.button-mute-on,.spelling-dropquiz .button-mute:hover { border: 1px solid #1daaf1; background-color: #1daaf1; color: #fff } .spelling-dropquiz .clouds-bottom { opacity: 0; bottom: 95px; width: 55% } .spelling-dropquiz .clouds-bottom .a { fill: #fff } .spelling-dropquiz .definition-container { position: fixed; pointer-events: none; left: 0; right: 0; font-size: 1.15em; color: #236396; line-height: 1.2 } .spelling-dropquiz .definition-container .front-def,.spelling-dropquiz .definition-container .back-def { margin: auto; max-width: 550px; text-align: center } .spelling-dropquiz .definition { position: relative; margin-top: calc(50px + 3vh); padding: 0 40px 20px 35px } .spelling-dropquiz .hearts-label { margin-top: 10px; font-family: Montserrat; font-weight: 700; font-size: 20px; color: #1daaf1; text-align: center; float: right } .spelling-dropquiz .hearts-label>div { position: relative; display: block; width: 30px; height: 30px; border-radius: 8px; border: solid 1px } .spelling-dropquiz .hearts-label>div>i { font-size: 20px; left: 4px; top: 2px; position: absolute } .spelling-crossword .spelling-pages:before { background: linear-gradient(90deg, #f3f3f3 14px, transparent 1%) center,linear-gradient(#f3f3f3 14px, transparent 1%) center,#e8e8e8; background-size: 16px 16px } .spelling-crossword #jumping-dot { display: none; position: fixed; z-index: 3; border-radius: 50%; background: #8cc5eb; transform: scale(0) } .spelling-crossword .puzzle-grid { position: absolute; top: 50px; left: 100% } .spelling-crossword .puzzle-grid td { line-height: 2; position: relative; border: solid 1px rgba(0,0,0,0) } .spelling-crossword .puzzle-grid .puzzle-cell { color: #ddd; cursor: text; user-select: none; font-family: Droid Sans Mono,sans-serif; opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: solid 1px #b3b3b3; background-color: #fff; margin: -1px; overflow: hidden; text-align: center } .spelling-crossword .puzzle-grid .puzzle-cell.user-input { color: #5a656f } .spelling-crossword .puzzle-grid .puzzle-cell.wrong { border-color: #ff7171; color: #ff7171; z-index: 4 !important } .spelling-crossword .puzzle-grid .puzzle-cell.wrong>div { transition: transform .5s } .spelling-crossword .puzzle-grid .puzzle-cell.wrong.active-word-cell { border-color: #59d797 } .spelling-crossword .puzzle-grid .puzzle-cell.wrong.active-word-cell>div { transform: translateY(-50%) } .spelling-crossword .puzzle-grid .puzzle-cell.wrong.active-word-cell:after { content: ""; position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 2px); border: solid 1px #ff7171 } .spelling-crossword .puzzle-grid .puzzle-cell.correct { color: #59d797; border-color: #59d797 } .spelling-crossword .puzzle-grid .puzzle-cell.correct,.spelling-crossword .puzzle-grid .puzzle-cell.wrong { cursor: normal } .spelling-crossword .puzzle-grid .puzzle-cell.active-word-cell { z-index: 1 } .spelling-crossword .puzzle-grid .puzzle-cell.active-cell { box-shadow: 0 0 4px 0 rgba(0,0,0,.2); z-index: 3; background: #f0f7e7 !important } .spelling-crossword .puzzle-grid .puzzle-cell.hinted { background: #d8e8f3 !important; border: solid 1px #afc7d3; z-index: 2 } .spelling-crossword .puzzle-grid .puzzle-cell i { font-family: Montserrat,sans-serif; font-weight: 700; position: absolute; top: -0.35em; left: .25em; font-size: .6em; font-style: normal; color: #aaa } .spelling-crossword .legend { text-align: left; font-family: Rubik,sans-serif; font-weight: 400; font-size: 1.4em; display: inline-block; position: relative; padding-right: 80px; padding-bottom: 40px } .spelling-crossword .legend b { font-weight: 500; display: block; margin: 20px 0; font-size: .9em; color: #bbb; letter-spacing: .05em } .spelling-crossword .legend p { line-height: 1.3; max-width: 350px; opacity: 1; margin: 0; padding: 6px 4px; color: #717171; cursor: pointer } .spelling-crossword .legend p>span { display: inline-block; min-width: 20px } .spelling-crossword .legend p.active { color: #1daaf1 } .spelling-crossword .legend p:hover { color: #000 } .spelling-crossword .legend p:hover.active { color: #2b98f0 } .spelling-crossword .legend b,.spelling-crossword .legend p { transition: opacity .2s } .spelling-crossword.animating .legend>b,.spelling-crossword.animating .legend>p { transition: none } .spelling-crossword.animating .puzzle-cell,.spelling-crossword.animating .legend>p,.spelling-crossword.animating button { pointer-events: none } .spelling-crossword.animating .puzzle-cell td { border-color: rgba(0,0,0,0) } .spelling-crossword.animating #jumping-dot { display: block } @media(max-width: 767px) { .spelling-crossword .legend { width:100%; padding-right: 0 } .spelling-crossword .legend b { display: none } .spelling-crossword .legend p { max-width: inherit; display: none; pointer-events: none } .spelling-crossword .legend p.active { display: block; position: fixed; top: 44px; left: 0; right: 0; padding: 20px 120px; text-align: center } .spelling-crossword .legend .option-buttons { position: fixed !important; top: 50px !important; text-align: right; right: 10px !important } .spelling-crossword .puzzle-grid { left: 0; margin: 20px auto 0; position: relative } } .spelling-fillblank { font-family: Rubik,sans-serif; font-weight: 300 } .spelling-fillblank .spelling-pages:before { background: #f1f1f1 } .spelling-fillblank .scroll-fade { position: fixed; width: 100vw; height: 75px } .spelling-fillblank .scroll-fade.fade-top { height: 115px; top: 0; left: 0; background: linear-gradient(to bottom, #efefef 50%, rgba(255, 255, 255, 0) 100%) } .spelling-fillblank .scroll-fade.fade-bottom { height: 100px; bottom: 95px; left: 0; background: linear-gradient(to top, #efefef 25%, rgba(255, 255, 255, 0) 100%) } .spelling-fillblank .example { font-size: 20px; text-align: left; padding: 32px; margin-bottom: 20px; color: #4d4d4d; border-radius: 7px; opacity: 0; position: relative; background-color: #fff; box-shadow: 0 0 4px 0 rgba(0,0,0,.19); cursor: pointer; position: relative } .spelling-fillblank .example .word-blank { position: relative } .spelling-fillblank .example:before { content: " "; position: absolute; border-top-left-radius: 7px; border-bottom-left-radius: 7px; top: 0; bottom: 0; left: 0; width: 10px; background: #ddd } .spelling-fillblank .example .word-blank { position: relative; display: inline-block; margin: 0 5px -1px; border-bottom: solid 1px #aaa; font-style: normal; font-weight: 500; text-align: center; color: #1daaf1; line-height: .9 } .spelling-fillblank .example .word-blank>i { display: block; width: 100%; left: 0; top: 110%; position: absolute; font-size: .6em; color: #1daaf1 } .spelling-fillblank .example:hover { border-color: #ccc; background-color: #fff } .spelling-fillblank .example.selected:before { background: #1daaf1 } .spelling-fillblank .example.current .animated-back-box { border-color: #1daaf1 } .spelling-fillblank .example.current.kbfocus .animated-back-box { border-color: #949494 } .spelling-fillblank .example.focused .word-blank { border-bottom: solid 2px #1daaf1; margin-bottom: -3px } .spelling-fillblank .example.wrong:before { background: #f5687c } .spelling-fillblank .example.wrong .word-blank { color: #f5687c } .spelling-fillblank .example.success:before { background: #59d797 } .spelling-fillblank .example.success .word-blank { color: #59d797 } .spelling-fillblank .example.error { box-shadow: 0 0 0 4px red; color: red } .spelling-fillblank .example .animated-back-box { border: solid 2px rgba(0,0,0,0); border-radius: 7px; pointer-events: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden } .spelling-fillblank .example .animated-back-box .animated-back { position: absolute; top: 50%; left: 50%; border-radius: 50%; width: 0; height: 0; border: solid 1px rgba(0,0,0,0) } .spelling-fillblank .example .animated-box { pointer-events: none; position: absolute; z-index: 1; top: -3px; height: calc(100% + 6px); left: -3px; width: calc(100% + 6px) } .spelling-fillblank .example .animated-box path { stroke-dasharray: 60% 380%; stroke-dashoffset: 60%; stroke: #1daaf1; stroke-width: 4px } .spelling-fillblank .words-list-header { font-family: Akrobat-Bold,sans-serif; font-weight: 700; font-size: 24px; position: fixed; user-select: none; color: #1daaf1; border-bottom: solid 2px; width: 30px; margin-top: -50px; margin-left: 60px; text-align: left; opacity: 0 } .spelling-fillblank .words-list { position: fixed; text-align: left; perspective: 400px; padding-left: 50px; color: #999 } .spelling-fillblank .words-list .word-card { font-size: 22px; font-weight: 500; line-height: 32px; display: inline-block; padding: 5px 10px; margin-bottom: 6px; transform-origin: 50% 50% -30px; transform: rotateX(-40deg); opacity: 0; border-radius: 4px } .spelling-fillblank .words-list .word-card>div { transition: transform .25s } .spelling-fillblank .words-list .word-card:hover { color: #4d4d4d; background: rgba(255,255,255,.7) } .spelling-fillblank .words-list .word-card:hover>div { transform: scale(0.9) } .spelling-fillblank .arrow-up,.spelling-fillblank .arrow-down { position: fixed; left: 50%; right: 50%; z-index: 101; display: none; border-radius: 50%; line-height: 32px; width: 30px; height: 30px; text-align: center; border: solid 1px rgba(0,0,0,0); transition: transform .5s cubic-bezier(0.39, -0.23, 0.7, 1.44),border-color .25s; cursor: pointer } .spelling-fillblank .arrow-up .icon,.spelling-fillblank .arrow-down .icon { transform: scale(1.2); font-size: 22px; display: block; transition: transform .5s } .spelling-fillblank .arrow-up:hover,.spelling-fillblank .arrow-down:hover { border-color: #bbb; transform: scale(1.2) } .spelling-fillblank .arrow-up:hover .icon,.spelling-fillblank .arrow-down:hover .icon { transform: scale(0.9) } .spelling-fillblank .arrow-up { top: 70px } .spelling-fillblank .arrow-down { bottom: 160px } .spelling-fillblank .legend-example { position: fixed; margin-left: -60px } .spelling-fillblank .legend-example div { position: relative; transform: translateY(20px); opacity: 0; margin: 10px 0; width: 16px; height: 16px; border-radius: 50%; border: solid 2px #1daaf1; transition: background-color .5s } .spelling-fillblank .legend-example div.selected { background-color: #1daaf1 } .spelling-fillblank .legend-example div:hover { background-color: #ddd } .spelling-fillblank .legend-example div:hover.selected { background-color: #2b98f0 } .spelling-fillblank .word-card.kbfocus { outline: solid 2px #1daaf1 } .spelling-pages .option-buttons { width: 300px; margin: calc((100vh - 310px)*.08) auto; text-align: center; transform: translateY(5px) } .spelling-pages .option-buttons button { position: relative; border-radius: 40px; outline: none !important } .spelling-pages .option-buttons button .icon { color: #2b98f0 } .spelling-pages .option-buttons button:hover { border-color: #aaa } .spelling-pages .option-buttons button:disabled { pointer-events: none } .spelling-pages .option-buttons .hint-button { padding-left: 40px; padding-right: 40px } .spelling-pages .option-buttons .hint-button .hint-count { position: absolute; display: inline-block; width: 30px; top: 6px; right: 10px } .spelling-pages .option-buttons .hint-button #hint-icon,.spelling-pages .option-buttons .hint-button #hint-icon1,.spelling-pages .option-buttons .hint-button #hint-icon2,.spelling-pages .option-buttons .hint-button #hint-icon3 { font-size: 1.1em; position: absolute; left: 12px; top: 5px; transform: scale(0) } .spelling-pages .option-buttons .hint-button #hint-icon3 { transform: scale(1) } .spelling-pages .option-buttons .hint-button .icon-heart { display: block; transition: transform .3s ease-in } .spelling-pages .option-buttons .hint-button:hover .icon-heart { transform: scale(1.3) } .spelling-pages .option-buttons .example-button { float: right; padding-left: 42px } .spelling-pages .option-buttons .example-button svg { position: absolute; left: 0; top: 3px; margin-left: 9px; transition: transform .3s ease-in; transform: scale(0.6) } .spelling-pages .option-buttons .example-button:disabled .a { fill: #ccc } .spelling-pages .option-buttons .example-button:hover svg { transform: scale(0.75) } .multi-choice { font-size: 18px; margin-left: auto; margin-right: auto; max-width: 640px } .multi-choice .question-hint { font-family: Rubik,sans-serif; color: #737475; font-size: 14px; letter-spacing: .05em; padding: 10px 0; max-width: 400px; text-align: left } .multi-choice .question { display: inline-block; position: relative; font-size: 1.4em; font-weight: 500; margin-bottom: 1em; padding: 0 20px } .multi-choice .question>.voiceover-btn { all: unset; position: absolute; top: 6px; right: 100%; cursor: pointer } .multi-choice .question>.voiceover-btn .voiceover-svg { width: 25px } .multi-choice .question>.voiceover-btn:not(:hover),.multi-choice .question>.voiceover-btn:not(.active) .a { fill: gray } .multi-choice .question img { width: 240px; height: 240px } .multi-choice .question .playable-sound { padding: 4px; margin: 50px auto 25px; width: 65px; height: 65px; background: #fff; border: solid 8px #e5e5e5; border-radius: 50%; transform: scale(1.3); transform: scale(1.5) } .multi-choice .question .playable-sound svg { height: 20px; margin: auto } .multi-choice .question .playable-sound svg a { fill: #a3a3a3 } .multi-choice .question .playable-sound svg { margin: auto } .multi-choice .answer { font-weight: 400; color: #505050; cursor: pointer; border-radius: 6px; background: #fff; border: solid 1px #ccc; padding: 20px; text-align: left; margin: 10px; padding-left: 40px; position: relative } .multi-choice .answer:hover { background: #f5f5f5 } .multi-choice .answer:before { background: #fff; content: " "; display: block; position: absolute; top: 50%; left: 15px; margin-top: -7px; width: 14px; height: 14px; border: solid 2px rgba(0,0,0,0); border-radius: 50%; box-shadow: 0 0 0 1px #ccc } .multi-choice .answer.multichoice:before { border-radius: 5% } .multi-choice .answer.correct:after { content: ""; position: absolute; border-radius: 6px; top: -1px; left: -1px; right: -1px; bottom: -1px; border: solid 2px #59d797 } .multi-choice .answer.selected { background: rgba(100,149,236,.15); border-color: #1daaf1 } .multi-choice .answer.selected:before { background: #1daaf1; border-color: #fff } .multi-choice .answer.selected.wrong { background: #f1dadd; border-color: #f5687c } .multi-choice .answer.selected.wrong:before { background: #f5687c } .multi-choice .answer.selected.correct { background: #e2f5ed; border: solid 1px #59d797 } .multi-choice .answer.selected.correct:before { background: #59d797; border-color: #fff } .multi-choice .answer.selected.correct:after { display: none } .multi-choice.text-word .answer,.multi-choice.image-word .answer { display: inline-block; margin: 10px 15px; padding: 10px 20px 10px 40px; border-radius: 2em; width: calc(50% - 30px); vertical-align: top; min-height: 50px } .multi-choice.text-word .answer:after,.multi-choice.image-word .answer:after { border-radius: 2em } .multi-choice.image-word .question img { width: 270px; height: 273px } .multi-choice.text-image { max-width: initial } @media(max-width: 747px) { .multi-choice.text-image { max-width:540px } } .multi-choice.text-image .answer { display: inline-block; padding: 5px } .multi-choice.text-image .answer img { width: 150px; height: 152px } .multi-choice.text-image .answer label { text-align: right; padding-top: 5px; padding-right: 10px; color: #777; margin-top: 5px; border-top: solid 1px #ccc; display: block } .multi-choice.text-image .answer:before { top: inherit; bottom: 15px } .spelling-results-panel { position: fixed; z-index: 1; bottom: 0; left: 0; right: 0; height: 100vh; text-align: center; overflow: hidden; display: flex; align-items: center; justify-content: center } .spelling-results-panel .star-footprint .bg { fill: #333256 } .spelling-results-panel .star-footprint .shadow { fill: #201f3a } .spelling-results-panel .star-footprint .outline { fill: #41415f } .spelling-results-panel .new-highscore { margin: auto; position: relative; width: 300px } .spelling-results-panel .new-highscore>div { position: absolute; top: -65px; left: 0; right: 0 } @keyframes new-highscore-popup { 0% { transform: scale(0) } 100% { transform: scale(1) } } .spelling-results-panel .new-highscore>label { position: absolute; top: 34px; left: 0; right: 0; text-transform: uppercase; font-weight: 300; transform: scale(0); animation: new-highscore-popup .2s linear forwards; animation-delay: 1s } .spelling-results-panel .animated-bg { position: absolute; left: 0; bottom: 0; margin-bottom: -25px; margin-left: calc(50vw - 25px); width: 50px; height: 50px; border-radius: 100%; background-color: #2e2d4a; opacity: .1 } .spelling-results-panel .RESPG { position: absolute; top: 40px; left: 0; width: 100vw; height: 100vh; background: rgba(46,45,74,.6) } .spelling-results-panel .RESPG .badgebg { top: 30vh } .spelling-results-panel .RESPG .badge_text { top: calc(20vh + 300px) } @media(max-height: 799px) { .spelling-results-panel .RESPG .new_badge { display:none } } @media(max-width: 600px),(max-height: 749px) { .spelling-results-panel { background:#2e2d4a } .spelling-results-panel .animated-bg { display: none } } .spelling-results-panel .canvas { outline: none; color: #fff; position: relative; opacity: 0; font-family: Rubik,sans-serif } @media(min-width: 1600px) { .spelling-results-panel .canvas { transform:scale(1.2) } } .spelling-results-panel .spelling-cards-result-details h4 { font-family: Rubik,sans-serif; font-weight: 500; font-size: 15px; margin: 20px 0; text-transform: uppercase; color: rgba(255,255,255,.5) } .spelling-results-panel .spelling-cards-result-details .word-list { font-size: 16px; font-weight: 400; max-width: 700px; margin: auto; display: flex; flex-wrap: wrap; justify-content: center } .spelling-results-panel .spelling-cards-result-details .word-list>div { width: 140px; text-align: center } .spelling-results-panel .spelling-dictation-result-details { margin-top: -40px } .spelling-results-panel .spelling-dictation-result-details ul { list-style: none; padding: 30px 0; font-size: 1.2em } .spelling-results-panel .spelling-dictation-result-details ul li { display: inline-block; padding: 0 40px } .spelling-results-panel .spelling-dictation-result-details ul li label { display: block } @media(max-height: 749px) { .spelling-results-panel:not(.with-ads) .canvas { zoom:.8 } } @media(max-height: 580px),(max-width: 749px) { .spelling-results-panel:not(.with-ads) .canvas { zoom:.7 } } .spelling-results-panel.with-ads { padding-bottom: 235px } .spelling-results-panel.with-ads .container ul { padding-top: 0px } .spelling-results-panel.with-ads .RESPG .new_badge { display: none } @media(min-width: 728px) { .spelling-results-panel.with-ads .RESPG .badgebg { top:25vh; margin-left: -350px } .spelling-results-panel.with-ads .RESPG .badge_text { top: 25vh; margin-left: 0; width: 350px } } @media(min-width: 728px)and (max-height: 730px) { .spelling-results-panel.with-ads .RESPG { top:0 } } @media(max-width: 727px) { .spelling-results-panel.with-ads .RESPG { top:-100px } } .spelling-results-panel.with-ads #adslot_results1 { position: absolute; z-index: 1; width: 300px; height: 283px; bottom: 130px; left: calc(50% - 310px) } .spelling-results-panel.with-ads #adslot_results1 .disable-ads-banner { opacity: 0; pointer-events: none } .spelling-results-panel.with-ads #adslot_results2 { position: absolute; z-index: 1; width: 300px; height: 283px; bottom: 130px; left: calc(50% + 10px) } .spelling-results-panel.with-ads #adslot_results2 .disable-ads-banner a { color: #b9b9d0 } @media(max-height: 769px) { .spelling-results-panel.with-ads { padding-bottom:85px } .spelling-results-panel.with-ads #adslot_results1 { display: none } .spelling-results-panel.with-ads #adslot_results2 { width: 728px; height: 140px; left: calc(50% - 364px) } } @media(max-width: 727px) { .spelling-results-panel.with-ads #adslot_results1 { opacity:0; pointer-events: none } .spelling-results-panel.with-ads #adslot_results2 { width: 320px; height: 100px; left: calc(50% - 160px) } } .spelling-results-panel.with-ads .new-highscore { width: 180px } .spelling-results-panel.with-ads .new-highscore>div { top: -21px } .typing-results .spelling-results-panel .animated-bg { background: #3d5e87 } .typing-results .spelling-results-panel .star-footprint .bg { fill: #36567d } .typing-results .spelling-results-panel .star-footprint .shadow { fill: #28405d } .typing-results .spelling-results-panel .star-footprint .outline { fill: #5d789a } @media(max-width: 600px),(max-height: 749px) { .typing-results .spelling-results-panel { background:#3d5e87 } .typing-results .spelling-results-panel .animated-bg { display: none } } .typing-results .spelling-results-panel .RESPG { background: rgba(40,61,88,.8) } .typing-results .results-print-view { opacity: 0; height: 100%; width: 100%; visibility: inherit; padding-top: 45px; padding-bottom: 96px } .typing-results .results-print-view iframe { border: none; border-right: solid 2px #444; height: 100%; width: 100% } .typing-results .download-pdf-right-panel { background: #fff; height: 100%; padding-top: 60px } .typing-results .download-pdf-button { color: #2b3749; font-family: GothamRounded-Bold; font-size: 20px; line-height: 3; padding: 58px; white-space: nowrap } .typing-results .download-pdf-button svg { stroke: #2b3749; fill: #2b3749; vertical-align: middle } .typing-results .download-pdf-button:hover { cursor: pointer; color: #1f5189 } .typing-results .download-pdf-button:hover svg { stroke: #1f5189; fill: #1f5189 } .hoverable-button { position: relative; border: solid 1px rgba(0,0,0,0) } .hoverable-button:disabled { color: #cdcdcd; pointer-events: none } .hoverable-button:before { content: ""; position: absolute; display: block; top: 17px; left: 50%; background: rgba(0,0,0,0); border-radius: 20px; width: 0; height: 0; margin-top: 0; margin-left: 0; transition: all ease-in-out .12s } @keyframes button-blink { 60% { width: 80%; height: 80%; margin-top: -13px; margin-left: -40%; background: rgba(0,0,0,.1); border: solid 1px rgba(0,0,0,0) } 100% { background: rgba(0,0,0,.06); width: calc(100% + 2px); height: calc(100% + 2px); margin-top: -18px; margin-left: calc(-50% - 1px); border: solid 1px rgba(0,0,0,.25) } } .hoverable-button:active { box-shadow: none } .hoverable-button:active:before { border: solid 1px rgba(0,0,0,0); background: rgba(0,0,0,.3); animation: button-blink .2s linear forwards } .spelling-word-list-screen,.spelling-tutorial-screen { font-family: Roboto,sans-serif; font-weight: 300; opacity: 0; color: #fff; background: rgba(52,117,191,.96); position: fixed; z-index: 4; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center } .spelling-word-list-screen .close-tutorial,.spelling-tutorial-screen .close-tutorial { font-style: normal; position: fixed; top: 50px; right: 25px; font-size: 30px; font-weight: 500; color: #fff; opacity: .8; cursor: pointer } .spelling-word-list-screen .close-tutorial:hover,.spelling-tutorial-screen .close-tutorial:hover { opacity: 1 } .spelling-word-list-screen { background: #3475bf } .spelling-word-list-screen .word-list-item { min-width: 50%; padding: 0 25px } .anim-with-replay { position: relative } .anim-with-replay .edicon-refresh { position: absolute; bottom: 0; right: 0; display: none; color: rgba(255,255,255,.4); cursor: pointer } .anim-with-replay .edicon-refresh:hover { color: #fff } .anim-with-replay:hover .edicon-refresh { display: block } @media(max-height: 600px) { .bottom-nav-bar { top:calc(100vh - 60px) !important; height: 40px; border-top: none; background: none !important } .bottom-nav-bar .navbar-content .btn { top: -5px } .bottom-nav-bar .navbar-content .navbar-details { height: 30px } .bottom-nav-bar .bottom-progress-bar { margin: 0 auto; border: solid 1px #d1d1d1; height: 8px } .scrollable-body-on-results.navbar-on-top .bottom-nav-bar { background: #fff !important; padding-top: 34px; top: 0 !important; height: 80px } .attempt-details .scroll-reminder polyline { stroke: #999 } .bottom-feedback-bar { border: none; background: none !important; border-radius: 0; z-index: 102; left: 170px; right: 170px; margin: 0 auto; width: initial; max-width: 560px; margin-bottom: -40px } .bottom-feedback-bar>div { background: #fff; border-radius: 25px; padding: 10px; box-shadow: 0 0 2px } .bottom-feedback-bar .shadow { display: none } .bottom-feedback-bar.proofreading-alt-view { margin-bottom: -90px; padding-left: 5px; padding-right: 0 } .bottom-feedback-bar.proofreading-alt-view>div { background: none; box-shadow: none; font-size: 18px; padding-left: 0; padding-right: 0 } .spelling-story .reduced-nav-bar .bottom-nav-bar { bottom: -33px; background: #fff !important } .spelling-story .reduced-nav-bar .bottom-nav-bar .navbar-details { height: 40px } .spelling-story .reduced-nav-bar .bottom-nav-bar .bottom-progress-bar { border: none } .spelling-dropquiz .clouds-bottom,.spelling-dropquiz .fade-bottom { bottom: 0 } .spelling-dropquiz .dropquiz-canvas { transform: translateY(40px) } .spelling-dropquiz .button-mute { bottom: 60px } .spelling-word-list-screen,.spelling-tutorial-screen,.spelling-card,.multi-choice { zoom:.8} .anim-with-replay { zoom:.5} .spelling-shuffle { position: relative; z-index: 101 } .spelling-fillblank .row { zoom:.8} .spelling-fillblank .scroll-fade.fade-bottom { bottom: 0 } .multi-choice { position: relative; z-index: 2 } } .reading-pages { font-family: ReadingLean-Book; font-weight: 300; -webkit-font-smoothing: antialiased; line-height: 1.6; font-size: 21px; white-space: pre-wrap; color: #1c1e29 } .reading-pages.smaller { font-size: 18px } .reading-pages.bigger { font-size: 24px } .reading-pages .reading-content { position: relative; width: 600px } .reading-pages p,.reading-pages .paragraph { margin-block-start:1.5em;margin-block-end:1.5em} .reading-pages p:first-child,.reading-pages .paragraph:first-child { margin-block-start:0} .reading-pages h1,.reading-pages h2,.reading-pages h3 { font-family: "Open Sans"; font-weight: 700; clear: both; line-height: 1.4 } .reading-pages h1 { font-size: 2em; margin-block-start:1em;margin-block-end:.5em} .reading-pages h1:first { margin-block-start:0} .reading-pages h2 { font-size: 1.4em; margin-block-start:-0.2em;margin-block-end:-0.2em} .reading-pages h2+h2 { margin-block-start:.2em} .reading-pages h3 { font-size: 1em; margin-block-start:1em} .reading-pages h3+div .paragraph,.reading-pages h3+p { margin-block-start:.2em} .reading-pages .img { margin: .6em 0 1.5em; width: 60% } .reading-pages .img>div { font-size: .8em; margin-top: 5px } .reading-pages .img img { width: 100%; min-height: 50px } .reading-pages .img.pos-left { width: 60% } .reading-pages .img.pos-full { width: 100% } .reading-pages .img.pos-float { width: 100% } .reading-pages .img.pos-float>img { width: 60%; display: inline-block; padding-right: 10px } .reading-pages .img.pos-float>div { width: calc(40% - 10px); float: right; margin-top: 0 } .reading-pages blockquote { padding: 1.5em 30px; border-radius: 15px; padding-left: 70px; border-left: none; position: relative; font-size: inherit } .reading-pages blockquote>hr { position: absolute; top: 15px; width: 2px; left: 35px; display: block; height: calc(100% - 75px); border: none } .reading-pages blockquote svg { position: absolute; left: 15px; top: calc(50% - 20px); height: 40px; width: 40px } .reading-pages code,.reading-pages .public-DraftStyleDefault-pre { position: relative; display: block; padding: 20px; font-size: .8em; border-radius: 4px } .reading-pages code pre,.reading-pages .public-DraftStyleDefault-pre pre { white-space: pre-wrap } .reading-pages code { margin-bottom: 1em } .reading-pages ul.list,.reading-pages ol.list { margin: 1em -0.1em !important } .reading-pages ul li,.reading-pages ol li { padding-left: .4em } .reading-pages blockquote { background: #f5f5f5 } .reading-pages blockquote>hr { background: #3097d1 } .reading-pages blockquote svg { fill: #d0d0d0; background: #f5f5f5 } .reading-pages code,.reading-pages .public-DraftStyleDefault-pre { background: #f5f5f5; color: #268026 } .reading-pages { opacity: 0; padding: 50px 50px 100px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center } .reading-pages .reading-content>*:nth-child(3) { margin-top: 0 } .reading-pages .reading-content>h1:nth-child(3) { margin-top: -0.25em } .reading-pages .reading-content>h3:nth-child(3) { margin-top: .25em } .reading-pages .token-block { position: relative; padding: .3em 0 } .reading-pages .token-block .play-icon { display: none; cursor: pointer; font-style: normal; position: absolute; margin: .25em 0 0 -1.66em; background: rgba(0,0,0,0); width: 1.5em; text-align: center; height: 1.55em; font-size: .66em; line-height: 1.65em; padding-left: .15em; border: 1px solid; border-radius: 3px; opacity: 0; transition: .3s ease-out opacity; color: #999a9d; background: #fff; box-shadow: -0.3em 0 .5em .2em #fff } .reading-pages .token-block .play-icon:hover { color: #469aff !important } .reading-pages .token-block>span { position: relative; border-bottom: solid 1px rgba(0,0,0,0) } .reading-pages .token-block>span .vocab-info { font-size: 15px; font-weight: 500; white-space: initial; position: absolute; display: none; bottom: calc(100% + 10px); left: -20px; width: 300px; box-shadow: 0px 3px 11px rgba(0,0,0,.14); border: solid 1px #ccc; border-radius: 4px; background: #fff; padding: 10px; color: #000; z-index: 1001 } .reading-pages .token-block>span .vocab-info:before { content: " "; bottom: -10px; height: 10px; background: rgba(0,0,0,0); left: 0; right: 0; display: block; position: absolute } .reading-pages .token-block>span .vocab-info:after { content: " "; background: #fff; position: absolute; display: block; bottom: -8px; left: 30px; border-right: solid 1px #ccc; border-bottom: solid 1px #ccc; width: 15px; height: 15px; transform: translateX(-7px) rotate(45deg) skew(-10deg, -10deg) } .reading-pages .token-block>span .vocab-info .word-form { font-size: 1.2em; font-weight: bold; display: block; margin-bottom: 5px } .reading-pages .token-block>span .vocab-info .playable-sound { vertical-align: middle; margin-left: 6px } .reading-pages .token-block>span .vocab-info .playable-sound svg { height: 15px; width: 15px } .reading-pages .token-block>span .vocab-info.with-image { width: 340px } .reading-pages .token-block>span .vocab-info.with-image .word-content { width: 260px } .reading-pages .token-block>span .vocab-info.with-image img { float: right; max-width: 80px } .reading-pages .token-block .BOLD { font-weight: bold } .reading-pages .token-block .ITALIC { font-style: italic } .reading-pages .token-block .UNDERLINE { text-decoration: underline } .reading-pages .token-block .CODE { font-family: monospace; overflow-wrap: break-word } .reading-pages .is-vocab { display: inline-block } .reading-pages.show-vocab .is-vocab .VOCAB { color: #37ad2a; border-bottom: dotted 1px } .reading-pages.show-vocab .is-vocab:hover .vocab-info { display: inline } .reading-pages .read-aloud-marker { position: absolute; opacity: 0; display: block; overflow: hidden; width: 100%; left: 0; height: 2px } .reading-pages .read-aloud-marker>i { position: absolute; bottom: 1px; height: 1px } .reading-pages.speaking .read-aloud-marker,.reading-pages.listening .read-aloud-marker { opacity: 1 } @keyframes read-text-fadein { 0%,50% { border-bottom: solid 1px rgba(0,0,0,0) } 100% { border-bottom: solid 1px #459aff } } .reading-pages.listening .token-block>span.read,.reading-pages.listening .token-block>a>span.read { animation: read-text-fadein 1.5s ease-out forwards; animation-delay: .5s } .reading-pages.speaking .token-block .play-icon { display: inline } .reading-pages.speaking .token-block:hover .play-icon { opacity: 1 } .reading-pages .completed-checkmark { position: fixed; margin-left: -113px; margin-top: -43px; width: 120px; height: 120px; line-height: 1.6; text-align: center; color: #fff; background: #59d797; border-radius: 50%; opacity: 0; pointer-events: none; transform: scale(0.1); padding: 15px 25px; box-shadow: 0 0 5px 3px rgba(0,0,0,.25) } .reading-controls { position: fixed; margin-left: -70px } .reading-controls .sound-wave-icon { float: left; margin-left: -40px; margin-top: -45px; height: 30px; width: 27px; display: none; justify-content: space-between; align-items: center } .reading-controls .sound-wave-icon>i { display: block; width: 3px; height: 3px } .reading-controls .sound-wave-icon.active { display: flex } .reading-controls .btn-main { transition: background .2s; background: rgba(0,0,0,0); display: block; width: 2.45em; height: 2.45em; margin-bottom: 1em; border-radius: 50%; outline: none !important; border: solid 2px; padding: .25em; line-height: 1.2 } .reading-controls .btn-main svg { display: block; transform: scale(1.2) } .reading-controls .btn-main .active-icon { display: none } .reading-controls .btn-main:hover .active-icon,.reading-controls .btn-main.btn-active .active-icon { display: block } .reading-controls .btn-main:hover .inactive-icon,.reading-controls .btn-main.btn-active .inactive-icon { display: none } .reading-controls .btn-main:hover { cursor: pointer } .reading-controls .btn-secondary { border: solid 1px; padding: .3em .4em .2em; line-height: .8; border-radius: 5px; text-decoration: none !important; outline: none !important; margin-right: 10px } .fixed-sidebar { opacity: 1; position: fixed; z-index: 1; right: 12px; top: 85px; bottom: 80px; width: 33px } .fixed-sidebar .item { user-select: none; text-align: center; position: relative; white-space: nowrap } .fixed-sidebar .item .icon { display: inline-block; width: 100% } .fixed-sidebar .item .item-label { pointer-events: none; display: inline-block; max-width: inherit; transform: translate(-100%, -9px); margin-left: -40px; font-size: 12px; font-weight: 600; overflow: hidden } .fixed-sidebar .item .item-label>span { transform: translateX(110%); display: inline-block; padding: 2px 5px } .fixed-sidebar .item:hover { cursor: pointer } .fixed-sidebar .item:hover .item-label>span { transform: translateX(0) } .fixed-sidebar .upper-part .item>i { display: inline-block; width: 30px; height: 40px; transform: translateX(-100%); opacity: 0 } .fixed-sidebar .bottom-part { position: absolute; bottom: 0; left: 0; right: 0 } .fixed-sidebar .bottom-part .item { position: relative; height: 33px; margin-bottom: 20px; transform: scale(0) } .fixed-sidebar .bottom-part .item .btn-expandable { position: absolute; right: 0; width: 33px; height: 33px; border-radius: 17px } .fixed-sidebar .bottom-part .item .btn-expandable>svg { width: 31px } .fixed-sidebar .bottom-part .select-option { display: inline-block; margin-right: 6px; width: 23px; height: 23px; border-radius: 50%; margin-top: 4px; border: solid 1px; line-height: 20px; text-align: center; font-style: normal } .fixed-sidebar .bottom-part .select-option.white { background: #fff } .fixed-sidebar .bottom-part .select-option.boxed-gray { background: #efefef } .fixed-sidebar .bottom-part .select-option.warm { background: #ddd8d8 } .fixed-sidebar .bottom-part .select-option.gray { background: #e8e7e7 } .fixed-sidebar .bottom-part .select-option.dark { background: #1c1d29 } .fixed-sidebar .bottom-part .select-option.boxed-dark { background: #1c1d29 } .fixed-sidebar hr { border-top: solid 1px; margin: 8px 0 13px -2px } .page-navs { position: fixed; z-index: 1; bottom: 20px } .page-navs.nav-left { left: 13px } .page-navs.nav-right { right: 13px } .btn-expandable { position: relative; font-size: 23px; border-radius: 15px; border: solid 1px rgba(0,0,0,0); width: 29px; height: 29px; line-height: 24px; cursor: pointer; text-align: right; white-space: nowrap; overflow: hidden } .btn-expandable>svg,.btn-expandable i { width: 27px; position: relative; z-index: 1 } .btn-expandable.disabled { pointer-events: none } .btn-expandable>span { padding-left: 15px } .btn-expandable.reversed { text-align: left } .btn-expandable.reversed>span { padding-left: 0; padding-right: 15px; transform: translateX(-110%) } .btn-expandable>span { position: absolute; font-size: 14px; vertical-align: top; display: inline-block } .READAPP .fixed-sidebar .item:hover .select-option:not(.selected) svg path { fill: inherit !important } .READAPP .fixed-sidebar .item:hover .btn-expandable:hover .select-option:not(.selected) svg { fill: inherit !important } .left-side-tab { width: 450px; background: #f8f8f8; position: fixed; top: 0; bottom: 0; right: 0; overflow: auto; transform: translateX(450px); padding: 60px 30px 20px; font-size: 18px; color: #1c1d29 } .left-side-tab h5 { font-size: 15px; margin: 0 } .left-side-tab hr { margin: 5px 0 20px } .left-side-tab small { font-size: 15px } .left-side-tab .close-side-tab { opacity: 0; position: fixed; z-index: 1; font-style: normal; font-weight: 600; top: 17px; right: 17px; font-size: 23px; cursor: pointer } .left-side-tab .close-side-tab svg { width: 20px; fill: #99989d } .left-side-tab .close-side-tab:hover { color: #00a4ff } .left-side-tab .vocab-tab p { position: relative; padding: 10px 30px 10px 50px; margin: 0 -30px } .left-side-tab .vocab-tab p>svg { fill: #99989d; display: none; position: absolute; font-size: 22px; width: 20px; left: 18px; top: calc(50% - 9px) } .left-side-tab .vocab-tab p:hover { background: #ededed; cursor: pointer } .left-side-tab .vocab-tab p:hover>svg { display: block } .left-side-tab .quiz-tab { height: calc(100vh - 80px); position: relative } .left-side-tab .quiz-tab .voiceover-btn { all: unset; cursor: pointer; display: inline-block; vertical-align: middle; margin-inline-start:10px} .left-side-tab .quiz-tab .voiceover-btn .a { fill: gray } .left-side-tab .quiz-tab .voiceover-btn .voiceover-svg { width: 20px } .left-side-tab .quiz-tab .voiceover-btn:hover .a,.left-side-tab .quiz-tab .voiceover-btn.active .a { fill: #00a4ff } .left-side-tab .quiz-tab .view-detailed-results-tooltip { border-radius: 4px; background: #5293e2; box-shadow: 0px 0px 15px rgba(0,0,0,.4); color: #fff; padding: 10px 20px; opacity: .95; display: none; margin: 0 auto 10px; width: fit-content; font-size: .8em; position: relative } .left-side-tab .quiz-tab .view-detailed-results-tooltip:after { content: " "; background: #5293e2; position: absolute; display: block; bottom: -7px; left: 50%; width: 15px; height: 15px; transform: translateX(-7px) rotate(45deg) skew(-10deg, -10deg) } .left-side-tab .quiz-tab .goodjob { color: #1ed299; font-weight: bold; font-size: .9em } .left-side-tab .quiz-tab .feedback { margin: 80px 0 20px; text-align: center; color: #777 } .left-side-tab .quiz-tab .goodjob,.left-side-tab .quiz-tab .feedback { opacity: 0 } .left-side-tab .quiz-tab .spelling-results-panel { background: none !important; height: 300px; top: -32px; position: inherit } .left-side-tab .quiz-tab .spelling-results-panel .animated-bg { display: none !important } .left-side-tab .quiz-tab .spelling-results-panel .stars-box { zoom:.6;color: #999a9d } .left-side-tab .quiz-tab .spelling-results-panel .stars-box>div { font-size: 4em !important } .left-side-tab .quiz-tab .spelling-results-panel .stars-box>p { opacity: 0; margin-bottom: 40px !important } .left-side-tab .quiz-tab .spelling-results-panel .star-footprint .bg { fill: none } .left-side-tab .quiz-tab .spelling-results-panel .star-footprint .shadow { fill: none } .left-side-tab .quiz-tab .spelling-results-panel .star-footprint .outline { fill: #e8e8e8 } .left-side-tab .quiz-tab .spelling-results-panel .canvas { opacity: 1 !important; zoom:.8} .left-side-tab .quiz-tab .quiz-content { position: absolute; overflow: auto; top: 0; left: 0; right: 0; bottom: 150px; padding: 10px } .left-side-tab .quiz-tab .answer-choice { position: relative; border: solid 1px #d6d6d6; border-radius: 4px; background: #fff; padding: 20px 20px 20px 50px; margin-bottom: 8px; cursor: pointer } .left-side-tab .quiz-tab .answer-choice:hover { background: #eee } .left-side-tab .quiz-tab .answer-choice>.icon-check { position: absolute; left: 23px; top: 18px; display: none } .left-side-tab .quiz-tab .answer-choice:before { content: " "; display: block; position: absolute; top: 27px; left: 24px; width: 14px; height: 14px; border: solid 1px #999a9d; border-radius: 2px } .left-side-tab .quiz-tab .answer-choice.radio-type:before { border-radius: 50% } .left-side-tab .quiz-tab .answer-choice.selected .icon-check,.left-side-tab .quiz-tab .answer-choice.correct .icon-check,.left-side-tab .quiz-tab .answer-choice.wrong .icon-check { display: block; color: #000 } .left-side-tab .quiz-tab .answer-choice.correct { color: #1ed299; border-color: #1ed299 } .left-side-tab .quiz-tab .answer-choice.correct:before { border-color: #1ed299 } .left-side-tab .quiz-tab .answer-choice.correct .icon-check { color: #1ed299 } .left-side-tab .quiz-tab .answer-choice.wrong { color: #ff6a65; border-color: #ff6a65 } .left-side-tab .quiz-tab .answer-choice.wrong:before { border-color: #ff6a65 } .left-side-tab .quiz-tab .answer-choice.miss { color: #1ed299; border-color: #1ed299 } .left-side-tab .quiz-tab .answer-choice.miss:before { border-color: #ff6a65 } .left-side-tab .quiz-tab .questions-nav { position: absolute; bottom: 10px; left: 10px; right: 10px } .left-side-tab .quiz-tab .questions-nav .nav-label { opacity: 0; line-height: 10px; font-size: .85em } .left-side-tab .quiz-tab .questions-nav ul { display: inline-block; list-style: none; padding: 0; margin: 5px 0 7px } .left-side-tab .quiz-tab .questions-nav ul>li { display: inline-block; margin: 4px; width: 30px; line-height: 28px; border-radius: 50%; color: #999a9d; background: #fff; border: solid 1px #e8e8e8; pointer-events: none; cursor: pointer; position: relative; font-size: 15px; font-weight: bold } .left-side-tab .quiz-tab .questions-nav ul>li svg { opacity: 0; position: absolute; left: 0; top: 0; width: 100% } .left-side-tab .quiz-tab .questions-nav ul>li.current { box-shadow: 0 0 2px 1px #777 } .left-side-tab .quiz-tab .questions-nav ul>li.completed { pointer-events: inherit; color: #00a4ff; border-color: #00a4ff } .left-side-tab .quiz-tab .questions-nav ul>li.completed.current { box-shadow: 0 0 2px 1px #00a4ff } .left-side-tab .quiz-tab .questions-nav ul>li.wrong { color: #ff6a65; border-color: #ff6a65 } .left-side-tab .quiz-tab .questions-nav ul>li.wrong.current { box-shadow: 0 0 2px 1px #ff6a65 } .left-side-tab .quiz-tab .questions-nav ul>li.correct { color: #1ed299; border-color: #1ed299 } .left-side-tab .quiz-tab .questions-nav ul>li.correct.current { box-shadow: 0 0 2px 1px #1ed299 } .left-side-tab .quiz-tab .questions-nav .btn { border-radius: 26px; font-size: 17px; min-width: 110px; line-height: 35px; padding: 0 25px; position: relative; background: none; color: #a0a0a0; border-color: #a0a0a0; outline: none } .left-side-tab .quiz-tab .questions-nav .btn svg { fill: #77797a } .left-side-tab .quiz-tab .questions-nav .btn .icon-chevron-right { position: absolute; right: 4px; top: 1px } .left-side-tab .quiz-tab .questions-nav .btn:not([disabled]).btn-success { color: #2bde8e; border-color: #2bde8e } .left-side-tab .quiz-tab .questions-nav .btn:not([disabled]).btn-success svg { fill: #2bde8e } .left-side-tab .quiz-tab .questions-nav .btn:not([disabled]).btn-success.filled { background: #2bde8e } .left-side-tab .quiz-tab .questions-nav .btn:not([disabled]).btn-primary { color: #00a4ff; border-color: #00a4ff } .left-side-tab .quiz-tab .questions-nav .btn:not([disabled]).btn-primary svg { fill: #00a4ff } .left-side-tab .quiz-tab .questions-nav .btn:not([disabled]).btn-primary.filled { background: #00a4ff } .left-side-tab .quiz-tab .questions-nav .btn:not([disabled]).filled { color: #fff } .left-side-tab .quiz-tab .questions-nav .btn:not([disabled]).filled svg { fill: #fff } .vocab-word-details { position: fixed; z-index: 1001; opacity: 0; background: #f8f8f8; left: 0; right: 0; top: 0; bottom: 0; overflow: auto; padding-right: 450px } .vocab-word-details .spelling-card { margin: 60px auto; width: 500px; transform: translateY(0) } .vocab-word-details .btn-expandable { opacity: 0; animation: fadeIn ease .5s forwards; animation-delay: .3s; background: #f8f8f8 !important; border-color: #c8c8c8 !important; box-shadow: none !important } @keyframes fadeIn { 100% { opacity: 1 } } .vocab-word-details .btn-expandable i { background: #f8f8f8 !important } @media(max-width: 875px) { .reading-pages .reading-content { min-width:inherit } .fixed-sidebar,.sound-wave-icon { visibility: hidden } } .reading-levels { position: fixed; top: 80px; left: 0; font-weight: 700; letter-spacing: .03em; line-height: 2.5; font-size: 15px; user-select: none; cursor: pointer } .reading-levels>div { border: solid 1px; border-radius: 4px; margin: 6px; text-align: center; padding: 0 13px } @media(max-width: 750px) { .reading-levels>div { display:none } } .READAPP .reading-pages .CODE { color: #de7f06 } .READAPP .reading-pages span::selection { background: #d6edff } .READAPP .reading-pages .read-aloud-marker>i { background: #459aff } .READAPP .reading-container { min-height: 75vh } .READAPP .reading-controls .btn-main { background: #fff; border-color: #fff; box-shadow: 0 0 0 1px #ddd } .READAPP .reading-controls .btn-main svg { fill: #aaa } .READAPP .reading-controls .btn-main:hover { background: #ddd !important } .READAPP .reading-controls .btn-main:hover svg { fill: #fff !important } .READAPP .reading-controls .btn-main.btn-active { background: #00a4ff !important; box-shadow: 0 0 0 1px #00a4ff; border-color: #fff } .READAPP .reading-controls .btn-main.btn-active svg { fill: #fff !important } .READAPP .fixed-sidebar .item .item-label>span { background: rgba(255,255,255,.8) } .READAPP .fixed-sidebar .item:hover { color: #3097d1 } .READAPP .fixed-sidebar .item:hover svg path { fill: #3097d1 !important } .READAPP .fixed-sidebar .bottom-part .select-option { border-color: #707070 } .READAPP .fixed-sidebar .bottom-part .select-option.selected { border-color: #a6accc; box-shadow: 0 0 0 2px #459aff } .READAPP .fixed-sidebar .bottom-part .select-option.selected svg { fill: #3097d1 } .READAPP .fixed-sidebar .bottom-part .select-option:hover { border-color: #e3e3e3; box-shadow: 0 0 0 2px #d0d0d0 } .READAPP .btn-expandable { background: #fff; box-shadow: 0 0 2px 5px rgba(255,255,255,.5) } .READAPP .btn-expandable>svg,.READAPP .btn-expandable i { background-color: #fff } .READAPP .btn-expandable.bordered { border-color: #e8e8e8 } .READAPP .btn-expandable:hover,.READAPP .btn-expandable.expanded { color: #3097d1 !important; border-color: #3097d1 !important } .READAPP .btn-expandable:hover svg,.READAPP .btn-expandable.expanded svg { fill: #3097d1 !important } .READAPP .btn-expandable:hover.inverted,.READAPP .btn-expandable.expanded.inverted { color: #fff !important; background: #3097d1 } .READAPP .btn-expandable:hover.inverted svg,.READAPP .btn-expandable.expanded.inverted svg { background: #3097d1; fill: #fff !important } .READAPP .btn-expandable.disabled svg { fill: #d2d2d2 !important } .READAPP .sound-wave-icon>i { background: #00a4ff } .READAPP .reading-levels { color: #6e6f7b } .READAPP .reading-levels>div:hover { background: #f5f5f5 } .READAPP .reading-levels>div.current { color: #fff; background: #459aff; border-color: #2173d5 } .READAPP .theme-gray,.READAPP .theme-boxed-gray { background: #efefef } .READAPP .theme-gray .hdrlt,.READAPP .theme-boxed-gray .hdrlt { background: #fff } .READAPP .theme-gray blockquote,.READAPP .theme-boxed-gray blockquote { background: #e5e5e5 } .READAPP .theme-gray blockquote svg,.READAPP .theme-boxed-gray blockquote svg { background: #e5e5e5 } .READAPP .theme-gray code,.READAPP .theme-gray .public-DraftStyleDefault-pre,.READAPP .theme-boxed-gray code,.READAPP .theme-boxed-gray .public-DraftStyleDefault-pre { background: #e5e5e5 } .READAPP .theme-gray .reading-controls .btn-main,.READAPP .theme-boxed-gray .reading-controls .btn-main { background: #efefef; border-color: #efefef; box-shadow: 0 0 0 1px #999a9d } .READAPP .theme-gray .reading-controls .btn-main svg,.READAPP .theme-boxed-gray .reading-controls .btn-main svg { fill: #999a9d } .READAPP .theme-gray .fixed-sidebar .item .item-label>span,.READAPP .theme-boxed-gray .fixed-sidebar .item .item-label>span { background: rgba(239,239,239,.8) } .READAPP .theme-gray .btn-expandable,.READAPP .theme-boxed-gray .btn-expandable { background: #efefef; box-shadow: 0 0 2px 5px rgba(239,239,239,.5) } .READAPP .theme-gray .btn-expandable>svg,.READAPP .theme-gray .btn-expandable i,.READAPP .theme-boxed-gray .btn-expandable>svg,.READAPP .theme-boxed-gray .btn-expandable i { background-color: #efefef } .READAPP .theme-gray .btn-expandable.bordered,.READAPP .theme-boxed-gray .btn-expandable.bordered { border-color: #d0d0d0 } .READAPP .theme-gray .play-icon,.READAPP .theme-boxed-gray .play-icon { box-shadow: -0.3em 0 .5em .2em #efefef } .READAPP .theme-warm { background: #ddd8d8; color: #878086 } .READAPP .theme-warm .left-side-tab { background: #efe7e7 } .READAPP .theme-warm .left-side-tab .quiz-tab .answer-choice { background: #dcc8c6; border: solid 1px #93726e } .READAPP .theme-warm .left-side-tab .quiz-tab .answer-choice:before { background: #fff } .READAPP .theme-warm .left-side-tab .vocab-tab p:hover { background: #dcc8c6 } .READAPP .theme-warm .vocab-word-details { background: #efe7e7 } .READAPP .theme-warm .hdrlt { color: #fff; background: #c9bab6 } .READAPP .theme-warm .hdrlt .nav-icon span { background: #fff } .READAPP .theme-warm .reading-pages { color: #27213f } .READAPP .theme-warm .reading-pages .CODE { color: #da5b34 } .READAPP .theme-warm .reading-pages blockquote { background: #c9bab6 } .READAPP .theme-warm .reading-pages blockquote>hr { background: #3097d1 } .READAPP .theme-warm .reading-pages blockquote svg { fill: #878086; background: #c9bab6 } .READAPP .theme-warm .reading-pages code,.READAPP .theme-warm .reading-pages .public-DraftStyleDefault-pre { background: #c9bab6; color: #4d739e } .READAPP .theme-warm .reading-controls .btn-main { background: #ddd8d8; border-color: #ddd8d8; box-shadow: 0 0 0 1px #878086 } .READAPP .theme-warm .reading-controls .btn-main svg { fill: #878086 } .READAPP .theme-warm .reading-controls .btn-main:hover { background: #878086 !important } .READAPP .theme-warm .reading-controls .btn-main:hover svg { fill: #ddd8d8 !important } .READAPP .theme-warm .reading-controls .btn-main.btn-active { background: #459aff !important; box-shadow: 0 0 0 1px #459aff; border-color: #ddd8d8 } .READAPP .theme-warm .reading-controls .btn-main.btn-active svg { fill: #ddd8d8 !important } .READAPP .theme-warm .fixed-sidebar .item .item-label>span { background: rgba(221,216,216,.8) } .READAPP .theme-warm .fixed-sidebar .item svg path { fill: #878086 } .READAPP .theme-warm .fixed-sidebar .item:hover { color: #459aff } .READAPP .theme-warm .fixed-sidebar .item:hover svg path { fill: #459aff !important } .READAPP .theme-warm .fixed-sidebar .bottom-part .select-option { border-color: #707070 } .READAPP .theme-warm .fixed-sidebar .bottom-part .select-option.selected { border-color: #a6accc; box-shadow: 0 0 0 2px #459aff } .READAPP .theme-warm .fixed-sidebar .bottom-part .select-option.selected svg { fill: #459aff } .READAPP .theme-warm .fixed-sidebar .bottom-part .select-option:hover { border-color: #a6accc; box-shadow: 0 0 0 2px #ffe8de } .READAPP .theme-warm .btn-expandable { background: #ddd8d8; box-shadow: 0 0 2px 5px rgba(221,216,216,.5) } .READAPP .theme-warm .btn-expandable>svg,.READAPP .theme-warm .btn-expandable i { fill: #878086; background-color: #ddd8d8 } .READAPP .theme-warm .btn-expandable.bordered { border-color: #878394 } .READAPP .theme-warm .btn-expandable:hover,.READAPP .theme-warm .btn-expandable.expanded { color: #459aff !important; border-color: #459aff !important } .READAPP .theme-warm .btn-expandable:hover svg,.READAPP .theme-warm .btn-expandable.expanded svg { fill: #459aff !important } .READAPP .theme-warm .btn-expandable:hover.inverted,.READAPP .theme-warm .btn-expandable.expanded.inverted { color: #fff !important; background: #459aff } .READAPP .theme-warm .btn-expandable:hover.inverted svg,.READAPP .theme-warm .btn-expandable.expanded.inverted svg { background: #459aff; fill: #fff !important } .READAPP .theme-warm .btn-expandable.disabled { border-color: #bdbbc4 !important } .READAPP .theme-warm .btn-expandable.disabled svg { fill: #bdbbc4 !important } .READAPP .theme-warm .sound-wave-icon>i { background: #459aff } .READAPP .theme-warm .reading-levels { color: #6e6f7b } .READAPP .theme-warm .reading-levels>div:hover { background: #f5f5f5 } .READAPP .theme-warm .reading-levels>div.current { color: #e7e6e9; background: #869cb5; border-color: #869cb5 } .READAPP .theme-warm .play-icon { box-shadow: -0.3em 0 .5em .2em #ddd8d8 } .READAPP .theme-dark,.READAPP .theme-boxed-dark { background: #1c1d29; color: #e3e3e3 } .READAPP .theme-dark .left-side-tab,.READAPP .theme-boxed-dark .left-side-tab { background: #3c3e50; color: #fff } .READAPP .theme-dark .left-side-tab .quiz-tab .answer-choice,.READAPP .theme-boxed-dark .left-side-tab .quiz-tab .answer-choice { background: #4c4d5c; border: solid 1px #6870b2 } .READAPP .theme-dark .left-side-tab .quiz-tab .answer-choice:before,.READAPP .theme-boxed-dark .left-side-tab .quiz-tab .answer-choice:before { background: #fff } .READAPP .theme-dark .left-side-tab .vocab-tab p:hover,.READAPP .theme-boxed-dark .left-side-tab .vocab-tab p:hover { background: #4c4d5c } .READAPP .theme-dark .vocab-word-details,.READAPP .theme-boxed-dark .vocab-word-details { background: #c9cbd8 } .READAPP .theme-dark .hdrlt,.READAPP .theme-boxed-dark .hdrlt { color: #fff; background: #303245 } .READAPP .theme-dark .hdrlt .nav-icon span,.READAPP .theme-boxed-dark .hdrlt .nav-icon span { background: #fff } .READAPP .theme-dark .reading-pages,.READAPP .theme-boxed-dark .reading-pages { color: #e3e3e3 } .READAPP .theme-dark .reading-pages blockquote,.READAPP .theme-boxed-dark .reading-pages blockquote { background: #303245 } .READAPP .theme-dark .reading-pages blockquote>hr,.READAPP .theme-boxed-dark .reading-pages blockquote>hr { background: #3097d1 } .READAPP .theme-dark .reading-pages blockquote svg,.READAPP .theme-boxed-dark .reading-pages blockquote svg { fill: #d0d0d0; background: #303245 } .READAPP .theme-dark .reading-pages code,.READAPP .theme-dark .reading-pages .public-DraftStyleDefault-pre,.READAPP .theme-boxed-dark .reading-pages code,.READAPP .theme-boxed-dark .reading-pages .public-DraftStyleDefault-pre { background: #303245; color: #42c742 } .READAPP .theme-dark .reading-pages.show-vocab .is-vocab,.READAPP .theme-boxed-dark .reading-pages.show-vocab .is-vocab { border-bottom: dashed 1px #ccc } .READAPP .theme-dark .reading-controls .btn-main,.READAPP .theme-boxed-dark .reading-controls .btn-main { background: #1c1d29; border-color: #1c1d29; box-shadow: 0 0 0 1px #6e6f7b } .READAPP .theme-dark .reading-controls .btn-main svg,.READAPP .theme-boxed-dark .reading-controls .btn-main svg { fill: #6e6f7b } .READAPP .theme-dark .reading-controls .btn-main:hover,.READAPP .theme-boxed-dark .reading-controls .btn-main:hover { background: #4c4d5c !important } .READAPP .theme-dark .fixed-sidebar .item .item-label>span,.READAPP .theme-boxed-dark .fixed-sidebar .item .item-label>span { background: rgba(28,29,41,.8) } .READAPP .theme-dark .fixed-sidebar .item svg path,.READAPP .theme-boxed-dark .fixed-sidebar .item svg path { fill: #e3e3e3 } .READAPP .theme-dark .fixed-sidebar .bottom-part .select-option:hover,.READAPP .theme-boxed-dark .fixed-sidebar .bottom-part .select-option:hover { border-color: #ff6a65 } .READAPP .theme-dark .btn-expandable,.READAPP .theme-boxed-dark .btn-expandable { background: #1c1d29; box-shadow: 0 0 2px 5px rgba(28,29,41,.5) } .READAPP .theme-dark .btn-expandable>svg,.READAPP .theme-dark .btn-expandable i,.READAPP .theme-boxed-dark .btn-expandable>svg,.READAPP .theme-boxed-dark .btn-expandable i { fill: #fff; background-color: #1c1d29 } .READAPP .theme-dark .btn-expandable.bordered,.READAPP .theme-boxed-dark .btn-expandable.bordered { border-color: #fff } .READAPP .theme-dark .btn-expandable:hover,.READAPP .theme-dark .btn-expandable.expanded,.READAPP .theme-boxed-dark .btn-expandable:hover,.READAPP .theme-boxed-dark .btn-expandable.expanded { color: #459aff !important; border-color: #459aff !important } .READAPP .theme-dark .btn-expandable:hover svg,.READAPP .theme-dark .btn-expandable.expanded svg,.READAPP .theme-boxed-dark .btn-expandable:hover svg,.READAPP .theme-boxed-dark .btn-expandable.expanded svg { fill: #459aff !important } .READAPP .theme-dark .btn-expandable:hover.inverted,.READAPP .theme-dark .btn-expandable.expanded.inverted,.READAPP .theme-boxed-dark .btn-expandable:hover.inverted,.READAPP .theme-boxed-dark .btn-expandable.expanded.inverted { color: #fff !important; background: #459aff } .READAPP .theme-dark .btn-expandable:hover.inverted svg,.READAPP .theme-dark .btn-expandable.expanded.inverted svg,.READAPP .theme-boxed-dark .btn-expandable:hover.inverted svg,.READAPP .theme-boxed-dark .btn-expandable.expanded.inverted svg { background: #459aff; fill: #fff !important } .READAPP .theme-dark .btn-expandable.disabled,.READAPP .theme-boxed-dark .btn-expandable.disabled { border-color: gray !important } .READAPP .theme-dark .btn-expandable.disabled svg,.READAPP .theme-boxed-dark .btn-expandable.disabled svg { fill: gray !important } .READAPP .theme-dark .reading-levels,.READAPP .theme-boxed-dark .reading-levels { color: #d0d0d0; border-color: #6e6f7b } .READAPP .theme-dark .reading-levels>div:hover,.READAPP .theme-boxed-dark .reading-levels>div:hover { background: #4c4d5c } .READAPP .theme-dark .reading-levels>div.current,.READAPP .theme-boxed-dark .reading-levels>div.current { background: #329afb; border-color: #329afb } .READAPP .theme-dark .play-icon,.READAPP .theme-boxed-dark .play-icon { background: #1c1d29; color: #fff; box-shadow: -0.3em 0 .5em .2em #1c1d29 } .READAPP .theme-boxed-gray .reading-pages,.READAPP .theme-boxed-dark .reading-pages { padding-top: 70px } .READAPP .theme-boxed-gray .reading-pages .reading-container,.READAPP .theme-boxed-dark .reading-pages .reading-container { background: #fff; border: solid 1px #ddd; box-shadow: 0 0 4px rgba(0,0,0,.0901960784) } .READAPP .theme-boxed-gray .reading-pages .reading-container .reading-controls,.READAPP .theme-boxed-dark .reading-pages .reading-container .reading-controls { margin-left: -108px } .READAPP .theme-boxed-gray .reading-pages .reading-container .completed-checkmark,.READAPP .theme-boxed-dark .reading-pages .reading-container .completed-checkmark { margin-left: -150px } .READAPP .theme-boxed-gray .reading-pages blockquote,.READAPP .theme-boxed-dark .reading-pages blockquote { background: #f5f5f5 } .READAPP .theme-boxed-gray .reading-pages blockquote svg,.READAPP .theme-boxed-dark .reading-pages blockquote svg { background: #f5f5f5 } .READAPP .theme-boxed-gray .reading-pages code,.READAPP .theme-boxed-gray .reading-pages .public-DraftStyleDefault-pre,.READAPP .theme-boxed-dark .reading-pages code,.READAPP .theme-boxed-dark .reading-pages .public-DraftStyleDefault-pre { background: #f5f5f5 } .READAPP .theme-boxed-gray .reading-footer-message,.READAPP .theme-boxed-dark .reading-footer-message { cursor: pointer } .READAPP .theme-boxed-gray .reading-footer-message .bottom-feedback-bar,.READAPP .theme-boxed-dark .reading-footer-message .bottom-feedback-bar { margin-bottom: -90px } .READAPP .theme-boxed-gray .play-icon,.READAPP .theme-boxed-dark .play-icon { box-shadow: -0.3em 0 .5em .2em #fff } .READAPP .theme-boxed-dark .reading-pages .reading-container { background: #4c4d5c; border: solid 1px #4c4d5c } .READAPP .theme-boxed-dark .reading-pages blockquote { background: #38394a } .READAPP .theme-boxed-dark .reading-pages blockquote svg { background: #38394a } .READAPP .theme-boxed-dark .reading-pages code,.READAPP .theme-boxed-dark .reading-pages .public-DraftStyleDefault-pre { background: #38394a } .READAPP .theme-boxed-dark .play-icon { background: #4c4d5c; color: #fff; box-shadow: -0.3em 0 .5em .2em #4c4d5c } .pf-token { display: inline-block; position: relative; margin: .4em 0; pointer-events: none } .pf-token .edit-mark { user-select: none; pointer-events: none; position: absolute; z-index: 1; top: 0; left: 0; fill: none; stroke: #29a4f9; color: #29a4f9; line-height: 1.4 } .pf-token .edit-mark.filled { fill: #29a4f9 } .pf-token .edit-mark.with-punctuation { top: .3em; right: 0 } .pf-token .edit-mark.mark-period { right: -0.45em; left: inherit; width: .6em; top: .8em } .proofreading-help-popup .a { fill: #1f5fa5 } .proofreading-help-popup .b { fill: #8e8e8e } .proofreading-help-popup .c,.proofreading-help-popup .f,.proofreading-help-popup .g,.proofreading-help-popup .h { fill: none } .proofreading-help-popup .c,.proofreading-help-popup .f { stroke: #fff } .proofreading-help-popup .c { stroke-miterlimit: 10 } .proofreading-help-popup .d { isolation: isolate } .proofreading-help-popup .e { fill: #fff } .proofreading-help-popup .f { stroke-linecap: round; stroke-width: 3px } .proofreading-help-popup .g { stroke: #d0d0d0 } .proofreading-help-popup .h { stroke: #bcbcbc } .proofreading-help-edit-icons { text-align: center; margin: 150px auto 0; border-top: solid 1px #fff; padding: 10px 25px 0 } .proofreading-help-edit-icons>div { display: inline-block; width: 22px; margin: 5px 12px -5px; stroke: #fff; position: relative } .proofreading-help-edit-icons>div>i { display: none; position: absolute; top: -120%; left: 0; font-size: 16px; font-style: normal; white-space: nowrap } .proofreading-help-edit-icons>div:hover>i { display: block } .proofreading-help { margin-bottom: 30px; font-size: .7em; line-height: 1.2; font-family: sans-serif; color: #999; position: relative } .proofreading-help svg { position: absolute; width: 20px; height: 25px; left: -57px; top: -5px; fill: #999 } .proofreading-content { font-family: ReadingLean-Book; font-size: 24px; line-height: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 60px 120px 65px; min-height: 100vh; user-select: none } .proofreading-content br+.pf-token { margin-top: .5em } .proofreading-content>div { user-select: text; position: relative } .proofreading-content>div .correction-count { position: fixed; top: 50vh; margin-left: -40px; transform: translate(-100%, -30px); line-height: 1.3; color: #21d398; font-family: Akrobat-Bold; font-size: 29px; text-align: center } .proofreading-content>div .correction-count .total { color: #d0d0d0; border-top: solid 1px } .proofreading-content>div .pf-token .deleted-indicator { pointer-events: initial; position: relative; z-index: 1; cursor: pointer; margin: -8px; border-bottom: solid 10px; border-left: solid 8px rgba(0,0,0,0); border-right: solid 8px rgba(0,0,0,0) } .proofreading-content>div .pf-token .edit-label { position: absolute; z-index: 2; top: -6px; right: 0; text-align: right; width: 100%; font-size: 10px; color: #068bea; display: none; border-bottom: solid 1px #29a4f9 } .proofreading-content>div .pf-token span { pointer-events: initial } .proofreading-content>div .pf-token span::selection { background: none } .proofreading-content>div .pf-token.separator { white-space: pre } .proofreading-content>div .pf-token.separator.edited:hover,.proofreading-content>div .pf-token.separator.edited.with-changes { background: #fff7ca } .proofreading-content>div .pf-token.separator.needs-correction { background: #ffb5b3 } .proofreading-content>div .pf-token.with-changes { white-space: pre-wrap } .proofreading-content>div .pf-token.with-hint { box-shadow: 0 4px rgba(255,106,101,.5333333333) } .proofreading-content>div .pf-token.edited.with-changes { color: #29a4f9 } .proofreading-content>div .pf-token.edited:hover { cursor: pointer; color: #29a4f9 } .proofreading-content>div .pf-token.edited:hover.with-changes .edit-label { display: block } .proofreading-content>div .pf-token.edited.with-hint { box-shadow: 0 4px #eee } .proofreading-content>div .pf-token.selected { background: #ccedff !important } .proofreading-content>div .pf-token.selected .edit-label { display: none !important } .proofreading-content>div .pf-token.selected .edit-mark { display: none } .proofreading-content>div .pf-token.needs-correction { color: #ff6a65 } .proofreading-content>div .pf-token.incorrect .edit-mark { color: #ff6a65; fill: #ff6a65; stroke: #ff6a65 } .proofreading-content>div .pf-token.incorrect .deleted-indicator { color: #ff6a65 } .proofreading-content>div .pf-token.incorrect.with-changes { color: #ff6a65 } .proofreading-content>div .pf-token.correct .edit-mark { color: #59d797; fill: #59d797; stroke: #59d797 } .proofreading-content>div .pf-token.correct.with-changes { color: #59d797 } .proofreading-content>div .pf-token-group { position: relative } .proofreading-content>div .pf-token-group .pf-correct-text { font-family: Caveat; font-size: .8em; position: absolute; top: -1em; right: -100px; left: -100px; text-align: center; display: none; color: #29a4f9 } .proofreading-content>div .pf-token-group.show-correction:hover { cursor: pointer } .proofreading-content>div .pf-token-group.show-correction:hover .pf-token { text-decoration: underline; opacity: .6 } .proofreading-content>div .pf-token-group.show-correction:hover .pf-token .edit-mark { display: none } .proofreading-content>div .pf-token-group.show-correction:hover .pf-correct-text { display: block } .proofreading-content .edit-popup { z-index: 1000; font-size: 18px; position: absolute; width: 224px; border-radius: 5px; box-shadow: 0 0 10px 0 rgba(0,0,0,.2); background: #fff; display: none; border: solid 1px #ccc; padding: 20px 15px 16px } .proofreading-content .edit-popup .edit-div { margin-bottom: 14px; line-height: 1.2; font-size: 26px; white-space: pre-wrap; border-bottom: solid 2px #707070 } .proofreading-content .edit-popup .edit-div.no-key-edit { display: none } .proofreading-content .edit-popup .edit-div:focus { outline: none; border-color: #29a4f9 } .proofreading-content .edit-popup .edit-div.before-marker:before,.proofreading-content .edit-popup .edit-div.after-marker:after { content: "|"; color: #ddd; display: inline-block; transform: scaleY(1.4) } .proofreading-content .edit-popup .edit-options { list-style: none; padding: 0; font-size: 15px } .proofreading-content .edit-popup .edit-options li { border-radius: 2px; padding: 8px 9px; border-bottom: solid 1px #d0d0d0 } .proofreading-content .edit-popup .edit-options li.active { color: #fff; background: #29a4f9 } .proofreading-content .edit-popup .edit-options li:hover { cursor: pointer; background: #ddd } .proofreading-content .edit-popup .edit-options li:hover.active { background: #068bea } .proofreading-content .edit-popup .edit-options li svg { float: right; stroke: #292929; fill: #292929; height: 1.2em } .proofreading-content .edit-popup .edit-options.punctuation { text-align: right; margin: 0 } .proofreading-content .edit-popup .edit-options.punctuation li { display: inline-block; padding: 4px 6px; border-bottom: none } .proofreading-content .edit-popup button { border-radius: 2px; border: none; background: #29a4f9; color: #fff; font-size: 15px; line-height: 2; width: 48% } .proofreading-content .edit-popup button:hover { background: #068bea } .proofreading-content .edit-popup .popup-arrow { display: block; content: " "; position: absolute; top: -8px; width: 15px; margin-left: -8px; height: 15px; border-top: solid 1px #ccc; border-left: solid 1px #ccc; background: #fff; transform: rotate(45deg) skew(-12deg, -12deg) } .proofreading-content .edit-popup.above .popup-arrow { bottom: -8px; top: initial; transform: rotate(-135deg) skew(-12deg, -12deg) } .proofreading-content .hearts-label { position: fixed; top: 85px; right: 40px; font-size: 20px; font-family: Montserrat; font-weight: 700; color: #1daaf1; text-align: center } .proofreading-content .hearts-label>div { position: relative; display: block; width: 30px; height: 30px; border-radius: 8px; border: solid 1px; margin-bottom: 5px } .proofreading-content .hearts-label>div>i { font-size: 20px; left: 4px; top: 2px; position: absolute; transition: transform .3s } .proofreading-content .hearts-label:hover { cursor: pointer; color: #0e94d8 } .proofreading-content .hearts-label:hover>div>i { transform: scale(1.2) } .proofreading-results { display: inline-block; padding: 1em; margin-top: 2.5em; border-top: solid 1px } .proofreading-results b { font-family: Akrobat-Bold; font-size: 2em } .proofreading-results span { display: inline-block; white-space: nowrap; margin: .15em } #instruction { background: #f4f4f4; overflow-x: hidden } #instruction.farsi-font .boxed-typing-lines { font-family: "YekanBold" } #instruction.theme-dark { background: #272822 } #instruction.theme-dark .boxed-char { color: #000; transform: scale(1.5) } #instruction.theme-dark #instructions { color: #d7ff12 } #instruction.theme-dark #instructions.junior .boxed-char { transform: scale(1) } #instruction.theme-dark #instructions .keydiv { background: none; color: #d7ff12; border-color: #d7ff12 } #instruction.theme-dark #instructions .boxed-line>span { background: none !important; border-color: #d7ff12 } #instruction.theme-dark #instructions .boxed-line>span .boxed-char { color: #d7ff12 } #instruction.with-ads.adlevel-1 #adslot_2 { display: none } #instruction.with-ads #adslot_1,#instruction.with-ads #adslot_2 { position: fixed; top: 40px; bottom: 110px; width: calc(50vw - 350px - 30px) } #instruction.with-ads #adslot_1 { right: 0 } #instruction.with-ads #adslot_2 { left: 0 } @media(max-width: 1080px) { #instruction.with-ads #instructions { margin-right:auto; max-width: 500px; font-size: 14px; padding-top: 164px } } @media(max-width: 1080px)and (max-height: 700px) { #instruction.with-ads #instructions { font-size:10px } } @media(max-width: 1080px)and (max-height: 580px) { #instruction.with-ads #instructions { padding-top:44px } #instruction.with-ads #adslot_1 { display: none } } @media(max-width: 1080px) { #instruction.with-ads .intro-keyboard { transform-origin:top; transform: scale(0.7); margin-left: -95px; margin-bottom: 50px } #instruction.with-ads .intro-keyboard.junior-kb { margin-left: -195px } #instruction.with-ads .intro-text { padding: 2rem 0 } #instruction.with-ads .boxed-typing-lines { font-size: 20px } #instruction.with-ads #adslot_1 { top: 50px; width: 728px; height: 140px; left: calc(50% - 364px) } #instruction.with-ads #adslot_2 { display: none } } @media(max-width: 727px) { #instruction.with-ads #adslot_1 { width:320px; height: 140px; left: calc(50% - 160px) } } #instruction .boxed-typing-lines { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; font-family: Roboto Mono,sans-serif; font-size: 29px } #instruction .boxed-typing-lines .backspace-forbidden { height: 1.6em; opacity: 0; position: relative; z-index: 1000 } #instruction .boxed-typing-lines .boxed-line { position: absolute; opacity: 0; margin: 30px .7em 0; top: 2.8em; white-space: nowrap } #instruction .boxed-typing-lines .boxed-line>span { color: #6f6f6f; background: #fff; display: inline-block; width: 2.66em; line-height: 2.42em; padding-bottom: .2em; text-align: center; border-radius: .2em; border: solid 1px #d4d4d4; margin-left: .7em; position: relative; transform: scale(1) translateY(0) } #instruction .boxed-typing-lines .boxed-line>span:first-child { margin-left: 0 !important } #instruction .boxed-typing-lines .boxed-line>span .cursor { display: block; height: 0; position: absolute; border-bottom: solid 3px #0383f2; left: 0; right: 100%; bottom: -0.5em } #instruction .boxed-typing-lines .boxed-line>span .checkmark-svg { position: absolute; left: 0; top: -2.5em; transform: scale(0) } #instruction .boxed-typing-lines .boxed-line>span .checkmark-svg polyline { stroke: #10c373 !important } #instruction .boxed-typing-lines .boxed-line>span>span { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: -1px; border-radius: .2em; color: #fff; opacity: 0 } #instruction .boxed-typing-lines .boxed-line>span .boxed-char { position: relative } #instruction .boxed-typing-lines .boxed-line>span>.wrong-char { z-index: 1; border: solid 1px #f5687c } #instruction #instructions { color: #707070; font-family: Rubik,sans-serif; font-weight: 400; margin: auto; max-width: 700px; display: flex; flex-direction: column; padding-top: 44px; padding-bottom: 97px; min-height: 100vh } #instruction #instructions.junior .boxed-typing-lines { font-family: GothamRounded-Bold,sans-serif; font-size: 47px } #instruction #instructions.junior .boxed-typing-lines .boxed-line { margin: 30px 0 0; top: 1.1em } #instruction #instructions.junior .boxed-typing-lines .boxed-line>span { width: 1.75em; line-height: 1.7em; padding-bottom: 0; margin-left: .28em } #instruction #instructions.junior .boxed-typing-lines .boxed-line>span .cursor { border-bottom-width: 8px; border-radius: 4px; bottom: -0.42em } #instruction #instructions.junior .boxed-typing-lines .boxed-line>span .checkmark-svg { left: -0.45em; width: 2.9em } #instruction #instructions.junior .boxed-typing-lines .boxed-line>span .wrong-char { border-color: rgba(0,0,0,0); color: #f5687c } #instruction #instructions.junior .boxed-typing-lines .backspace-forbidden { height: 1.2em; margin-top: -2em } @media(max-width: 780px),(max-height: 700px) { #instruction #instructions.junior .boxed-typing-lines { font-size:33px } } @media(max-width: 500px) { #instruction #instructions.junior .boxed-typing-lines { font-size:6.5vw } } #instruction .step { flex-grow: 1; display: flex; flex-direction: column } #instruction .flex-grow { flex-grow: 1 } #instruction .navbar-content { max-width: 800px } #instruction .step-content { opacity: 0; transform: translateY(20px); flex-grow: 1; padding: 1em 2em } #instruction .intro-keyboard { margin-bottom: 186px } #instruction .intro-keyboard.junior-kb { margin-left: 10px } #instruction .intro-keyboard.bone { background: #efefef; border: solid 1px #cecece; border-radius: 11px } #instruction .intro-keyboard.bone.is-blind { background: #3c3c3c; border-color: #858585 } #instruction .intro-keyboard.is_hidden { border: none; overflow: hidden; height: 0; margin: 0 } #instruction .goodjob-content { opacity: 0; text-align: center; font-size: 2em; padding: 0 } #instruction .goodjob-content .keydiv { margin: 12px; font-family: Roboto Mono; color: #707070; background: #fff; border: solid 1px #ddd; font-size: 1.8em; width: 96px; height: 96px; border-radius: 5px; display: inline-block } #instruction #kb-hands { opacity: 0 } @media(max-width: 780px),(max-height: 700px) { #instruction #instructions { max-width:500px; font-size: 12px } #instruction .intro-keyboard { transform: scale(0.7); margin-left: -95px; margin-bottom: 90px } #instruction .intro-keyboard.junior-kb { margin-left: -90px } #instruction .boxed-typing-lines { font-size: 20px; margin-bottom: -2em } } @media(max-width: 500px) { #instruction .intro-keyboard { transform:scale(0.65); margin-left: -110px; margin-bottom: 75px } #instruction .boxed-typing-lines { font-size: 4vw } } #instruction #instructions h1 { font-family: Rubik,sans-serif; font-size: 5em; color: #333; margin-left: -4px } #instruction .intro-head { text-transform: uppercase; font-size: 1em; letter-spacing: .1em } #instruction .intro-head .keybtn { height: 1.4em; text-transform: none } #instruction .intro-text { font-size: 2em; line-height: 1.4em; padding: 2rem 0 1rem } #instruction h1 .keybtn { display: inline-block; border: 1px solid #4299fa; color: #4299fa; padding: 0 1em .2em .2em; border-radius: 5px; font-weight: bold; font-size: 1em; padding: .2em .4em .3em .3em; cursor: default; background: #fff; box-shadow: 0px 0px } span.keybtn-junior { font-family: GothamRounded-Bold,sans-serif; font-size: 1.6em; color: #fff; border-radius: 15px; min-width: 70px; padding: 0 10px; line-height: 70px; text-align: center; display: inline-block; margin: 0 5px; text-transform: initial } span.keybtn { font-size: 1em; color: #444; font-family: "Lucida Grande",Lucida,Verdana,sans-serif; font-weight: 400; font-style: normal; text-align: center; line-height: 1em; text-shadow: 0 1px 0 #fff; display: inline; padding: .2em .45em; display: inline-block; height: 1em; border-radius: 6px; background-clip: padding-box; border: 1px solid #bbb; background-color: #f7f7f7; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); background-repeat: repeat-x; box-shadow: 0 2px 0 #bbb,0 3px 1px #999,0 3px 0 #bbb,inset 0 1px 1px #fff,inset 0 -1px 3px #ccc; cursor: default } span.keybtn2 { position: relative; overflow: hidden; border-radius: 8px; color: #fff; border: solid 1px #707070; display: inline-block; min-width: 1.5em; padding: 0 .25em; height: 1.5em; margin: 0 .1em; text-align: center; vertical-align: bottom } span.keybtn2 span { opacity: 0; position: relative; z-index: 1 } span.keybtn2 .back-shade { background: #0383f2; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: translateY(100%) } .active-key-pointer { display: block; position: absolute } .active-key-pointer:before { content: ""; display: block; background: radial-gradient(transparent 20%, #0383f2); opacity: 0; position: absolute; top: 0; left: -20px; width: 40px; height: 40px; border-radius: 50%; animation: animate1 3s steps(25, jump-none) infinite; animation-delay: .6s } .active-key-pointer:after { content: ""; display: block; background: radial-gradient(transparent 20%, #0383f2); opacity: 0; position: absolute; top: 0; left: -20px; width: 40px; height: 40px; border-radius: 50%; animation: animate2 3s steps(25, jump-none) infinite; animation-delay: .6s } @keyframes animate1 { 0% { transform: scale(1); opacity: 0 } 25% { transform: scale(3); opacity: .2 } 80% { transform: scale(1) } 100% { opacity: 0 } } @keyframes animate2 { 0% { transform: scale(1); opacity: 0 } 35% { transform: scale(2); opacity: .3 } 85% { transform: scale(1); opacity: 0 } } .goodjob-checkmark { opacity: 0 } .goodjob-checkmark .goodjob { font-family: Montserrat; color: #707070; font-size: 2em; font-weight: 800; text-align: center; margin: 20px; transform: translateY(20px) } @media(min-height: 1000px)and (min-width: 900px) { #instruction .step,#instruction .boxed-typing-lines,#instruction .keyboard-plugin { transform-origin:bottom; transform: scale(1.15) } #instruction .keyboard-plugin { transform: scale(1.15) } } @media(min-height: 1500px)and (min-width: 1200px) { #instruction .step,#instruction .boxed-typing-lines,#instruction .keyboard-plugin { transform:scale(1.5) } #instruction .keyboard-plugin { transform: scale(1.6) } } .DSHBRD { background-color: #f5f5f5 } .DSHBRD .lp-card { background-color: #f8f8f8; border-radius: 3px; overflow: hidden; margin: 30px auto 0px auto; cursor: pointer; box-shadow: 0 1px 4px 0 rgba(0,0,0,.37); transition: box-shadow .18s cubic-bezier(0.4, 0, 0.2, 1) } .DSHBRD .lp-card .lp-card-menu { position: absolute; top: 30px; right: 15px; border-bottom-left-radius: 3px; display: none } .DSHBRD .lp-card .lp-card-menu>i { display: block; width: 30px; height: 30px; text-align: center; line-height: 1.5; font-size: 20px; color: #fff } .DSHBRD .lp-card .lp-card-menu ul { display: none; overflow: none; position: absolute; z-index: 1001; top: 0; left: 0; padding-left: 100%; width: 140px; list-style: none } .DSHBRD .lp-card .lp-card-menu ul>li { border: solid 1px #a8a8a8; border-top: none; background: #f8f8f8; box-shadow: 2px 2px 3px rgba(0,0,0,.4); font-size: 12px; padding: 5px 10px } .DSHBRD .lp-card .lp-card-menu ul>li:first-child { border-top-right-radius: 3px; border-top: solid 1px #a8a8a8 } .DSHBRD .lp-card .lp-card-menu ul>li:last-child { border-bottom-right-radius: 3px } .DSHBRD .lp-card .lp-card-menu ul>li:hover { background: #d8d8d8 } .DSHBRD .lp-card .lp-card-menu:hover { background: rgba(255,255,255,.8) } .DSHBRD .lp-card .lp-card-menu:hover i { color: #000 } .DSHBRD .lp-card .lp-card-menu:hover ul { display: block } .DSHBRD .lp-card .lp-card-img img { width: 100% } .DSHBRD .lp-card .lp-card-summary { padding: 15px } .DSHBRD .lp-card .lp-card-summary .lp-card-header h4 { margin: 0 } .DSHBRD .lp-card .lp-card-summary .lp-card-header h5 { margin-top: 10px; margin-bottom: 15px; color: #888 } .DSHBRD .lp-card .lp-card-summary .lp-card-details { display: inline-block; margin-bottom: 20px; min-height: 37px } .DSHBRD .lp-card .lp-card-summary .lp-card-details .lp-card-label { color: #777; font-size: 12px; font-weight: 400; margin-right: 5px; display: inline-block } .DSHBRD .lp-card .lp-card-summary .lp-card-details .lp-card-num { color: #777; font-size: 16px; font-weight: 400 } .DSHBRD .lp-card .lp-card-summary .lp-card-btn { margin-top: 5px; padding: 8px 30px; background-color: #37a7f8; border: none; font-size: 16px } .DSHBRD .lp-card .lp-card-summary .progress-bar-container { margin-top: -10px; height: 3px; background-color: #c6c6c6; border-radius: 1px; width: 100% !important; padding: 0px } .DSHBRD .lp-card .lp-card-summary .progress-bar-container .progress-bar-fill { height: 100%; background-color: #1c9af8; padding: 0px; border-radius: 1px; width: 50%; transition: width .5s } .DSHBRD .lp-card.list-view { display: flex } .DSHBRD .lp-card.list-view img { width: 80px } .DSHBRD .lp-card.list-view .lp-card-summary { padding: 0; flex: 1; display: flex } .DSHBRD .lp-card.list-view .lp-card-summary .lp-card-header { padding: 7px 10px; display: inline-block; flex: 1 } .DSHBRD .lp-card.list-view .lp-card-summary .lp-card-header h4 { padding: 0px 0px 5px 0px; font-size: 16px; font-weight: 600 } .DSHBRD .lp-card.list-view .lp-card-summary .lp-card-header h5 { margin: 0px; font-size: 12px } .DSHBRD .lp-card.list-view .lp-card-summary .lp-card-details { flex: 1; margin: 0 } .DSHBRD .lp-card.list-view .lp-card-summary .lp-card-details>div { white-space: nowrap; display: inline-block; margin-top: 5px } .DSHBRD .lp-card.list-view .lp-card-summary .lp-card-details>div:first-child { min-width: 60% } .DSHBRD .lp-card.list-view .lp-card-summary .lp-card-details>div:last-child { min-width: 40% } .DSHBRD .lp-card.list-view .lp-card-summary .progress-bar-container { margin-bottom: 5px } .DSHBRD .lp-card.list-view .lp-card-summary .lp-card-btn { margin: 8px 35px -8px 15px; padding: 5px 15px } .DSHBRD .lp-card.list-view .lp-card-menu { top: 40px; right: 20px; display: block } .DSHBRD .lp-card.list-view .lp-card-menu>i { width: 20px; color: #888; line-height: 1.5 } .DSHBRD .lp-card.list-view .lp-card-menu:hover>i { background: #ddd } .DSHBRD .lp-card.list-view .lp-card-menu>ul { left: 0; top: 0; padding-left: 0; padding-top: 30px } .DSHBRD .lp-card:hover { box-shadow: 0 0px 7px #888 } .DSHBRD .lp-card:hover .lp-card-menu { display: block } .DSHBRD .lp-section { margin-bottom: 25px } .DSHBRD .lp-section h3 { margin-bottom: 0px } .DSHBRD .lp-section .ed-toggle { font-weight: 400; background-color: #f1f2f2; border-radius: 4px } .DSHBRD .lp-section .overall-stats { margin-bottom: -15px } .DSHBRD .lp-section .col-xs-6 { width: 49.9% } .DSHBRD .test-lp-card .lp-card .lp-card-summary .lp-card-header { margin-bottom: 10px } .DSHBRD .dashboard-stats { padding: 1px 20px; font-weight: 400 } .DSHBRD .dashboard-stats hr { margin: 15px -10px } .DSHBRD .dashboard-stats h3,.DSHBRD .dashboard-stats h4 { margin: 15px 0 } .DSHBRD .dashboard-stats .practice-time-donut { position: relative; display: inline-block; width: 33%; text-align: center; white-space: nowrap; vertical-align: top } .DSHBRD .dashboard-stats .practice-time-donut label { font-weight: 400; font-size: 12px; display: block; margin: 30px 0; line-height: 1 } .DSHBRD .dashboard-stats .practice-time-donut label i { font-size: 2em; display: block; margin: -9px 0 -16px } .DSHBRD .dashboard-stats .practice-time-donut .progress-donut { position: absolute; top: 23px; margin-left: -43px; width: 86px; height: 86px; left: 50% } .DSHBRD .dashboard-stats .practice-time-donut .progress-donut circle { transition: stroke-dasharray .5s } .DSHBRD .dashboard-stats .bottom-stats { text-align: center } .DSHBRD .dashboard-stats .bottom-stats .diff-label { opacity: .6; display: inline-block; vertical-align: sub; padding: 5px; line-height: .7 } .DSHBRD .dashboard-stats .bottom-stats .diff-label>i { font-size: 1.5em } .DSHBRD .dashboard-stats .bottom-stats-separator { display: inline-block; width: 6px; height: 90px; border-right: 1px solid #d4dbe0; margin-bottom: 10px } .DSHBRD #adslot_1 { display: block; margin: 50px auto 0; height: 300px; width: 300px } .DSHBRD .switch { background-color: #fff; padding: 24px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(43,55,73,.12); margin-bottom: 12px; gap: 20px; flex-wrap: nowrap; justify-content: flex-start; align-items: center } .DSHBRD .switch .cta-icon { width: 120px; aspect-ratio: 120/116; flex-shrink: 0 } .DSHBRD .switch .content { display: flex; flex-direction: column; gap: 16px; align-items: flex-start } .DSHBRD .switch .content h3 { font-family: inherit; font-size: 14px; font-style: normal; font-weight: 700; line-height: 20px; color: #2b3749; margin: 0 } .DSHBRD .switch .content .switch-btn { font-family: inherit; padding: 4px 12px; background-color: #37a7f8; font-size: 14px; font-weight: 400; line-height: 20px } .DSHBRD .switch-side { display: none } .DSHBRD .switch-top { display: flex } @media(max-width: 320px) { .DSHBRD .switch { flex-wrap:wrap } } @media(min-width: 768px) { .DSHBRD .switch { padding:24px 24px 24px 40px; margin-bottom: 20px; gap: 48px } .DSHBRD .switch .cta-icon { width: 140px } .DSHBRD .switch .content h3 { font-size: 16px; line-height: 24px } } @media(min-width: 992px) { .DSHBRD .switch { padding:24px 20px; margin-bottom: 20px; gap: 20px } .DSHBRD .switch .cta-icon { width: 100px } .DSHBRD .switch .content h3 { width: 140px; font-size: 16px; line-height: 24px } .DSHBRD .switch-side { display: flex !important } .DSHBRD .switch-top { display: none !important } } @media(min-width: 1260px) { .DSHBRD .switch { padding:24px; margin-bottom: 28px; gap: 20px } .DSHBRD .switch .cta-icon { width: 152px } } .PLTEST h1,.PLTEST h2,.PLTEST h4 { color: #0eaa7d } .PLTEST h4 { margin: 20px 0; line-height: 1.4 } .PLTEST p { margin: 35px 0 } .PLTEST .stats { position: absolute; top: 0; bottom: 0; right: 0; width: 165px; text-align: center; background: #f1f2f2; display: flex; flex-direction: column; justify-content: center } .PLTEST .placement-progress { height: 16px; background: #f1f2f2; margin: 70px 0 40px; border-left: solid 75px #64e5c7; height: 16px } .PLTEST .placement-progress>div { transition: width .5s; position: relative; background: #64e5c7; height: 16px } .PLTEST .placement-progress .lesson-label { position: absolute; color: #228776; top: -21px; right: 25px; font-size: 12px; white-space: nowrap } .PLTEST .placement-progress .lesson-flag { width: 15px; position: absolute; top: -17px; right: 0 } .PLTEST.theme-dark { background: #555; min-height: 100vh; color: #d7ff12 } .PLTEST.theme-dark .ed-paper { background: #272822 } .PLTEST.theme-dark .ed-paper .stats { background: #333 } .PLTEST.theme-dark .ed-paper .placement-progress .lesson-label { color: #d7ff12 } .PLTEST.theme-dark .ed-paper .typable { color: #d7ff12 } .LPVIEW { height: 100%; } .LPVIEW #root { height: 100% } .LPVIEW h2 { font-family: Montserrat; font-weight: 700; font-size: 2em; display: inline-block; margin: 20px 0 0 10px; border-radius: 4px; color: #555; text-shadow: 0px 1px 10px rgba(255,255,255,.7); cursor: url(../../assets/cursor/text.cur) 15 8, url(../../assets/cursor/text_x16.cur) 0 0, text; } .LPVIEW .sub_header { font-size: .6em; font-weight: 400; color: #777; padding-left: 10px } .LPVIEW .lsn_num { font-weight: 700; font-size: 2.2em; line-height: 18px; color: #666; margin-top: 2px; letter-spacing: 1px; } .LPVIEW .lsn_lock { float: right } .LPVIEW .lsn_name { position: absolute; border-top: 1px solid #b5b5b5; margin-top: 122px; width: 160px; margin-left: -10px; padding: 3px 8px 0 8px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: center; font-size: 13px; color: #555; cursor: url(../../assets/cursor/pointer.cur) 16 4, url(../../assets/cursor/pointer_x16.cur) 7 2, pointer; } .LPVIEW .lsn_num { cursor: url(../../assets/cursor/text.cur) 16 4, url(../../assets/cursor/text_x16.cur) 7 2, text; } .LPVIEW .lsn_name { cursor: url(../../assets/cursor/text_x16.cur) 7 2, text; } .LPVIEW .lsn_name.active { background-color: #3a86d8; color: #fff; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; bottom: -1px; padding-bottom: 3px } .LPVIEW .loading { position: absolute; top: 100px; left: 50%; margin-left: -100px; width: 200px; font-size: 30px } .LPVIEW .lpviewbox { height: 100%; overflow: hidden; font-family: Montserrat; background-color: #bbb9c4; } .LPVIEW .lpbackground { position: fixed; top: 0; left: 50%; transition: .6s cubic-bezier(0.67, -0.53, 0.05, 1.31) transform; pointer-events: none } .LPVIEW .play-button { position: absolute; top: 50%; left: 50%; height: 76px; width: 300px; margin-top: -38px; margin-left: -150px; padding: 20px; z-index: 1; color: #fff; font-family: Roboto; font-weight: 300; font-size: 26px; text-align: center; cursor: pointer; border-radius: 10px; background-color: rgba(0,0,0,.64) } .LPVIEW .lparena { scroll-snap-type: y mandatory; scroll-padding-top: 5px; overflow-x: hidden; overflow-y: scroll; width: calc(100% + 150vw); padding-right: 100vw; margin-left: -50vw; padding-left: 50vw; height: 100%; position: relative } .LPVIEW .lparena:after { content: ""; height: calc(100% - 185px); display: block } .LPVIEW .lessons { height: 100%; padding-top: 100px; outline: none; } .LPVIEW .lsnrow { scroll-snap-align: start; opacity: 0; transition: .2s linear all } .LPVIEW .lsnrow.no-snap { scroll-snap-align: none } .LPVIEW .lsnrow.active { opacity: 1 } .LPVIEW .box-container { display: table-cell; padding: 10px; cursor: url(../../assets/cursor/default.cur), default; } .box-container:hover { color: #4c6a7e; text-decoration: underline } .LPVIEW .box { position: relative; width: 160px; height: 160px; padding: 10px; background-color: rgba(255,255,255,.7); box-shadow: 0 1px 4px 0 rgba(0,0,0,.37); transition: box-shadow .28s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 3px; cursor: url(../../assets/cursor/pointer.cur) 16 4, url(../../assets/cursor/pointer_x16.cur) 7 2, default; } .LPVIEW .box:hover { box-shadow: 0 2px 2px 0 rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.3) } .LPVIEW .boxicon { height: 43px; text-align: center; margin-top: -2px; filter: drop-shadow(2px 2px 2px grey); cursor: url(../../assets/cursor/pointer.cur) 16 4, url(../../assets/cursor/pointer_x16.cur) 7 2, default; } .LPVIEW .boxicon [class*=e-] { margin-left: 20px } .LPVIEW .lessonblock-lock { font-size: 70px; position: absolute; left: 110px; top: -6px; color: #ccc } .LPVIEW .special_icon { display: inline-block; background-image: url(https://d7mj4aqfscim2.cloudfront.net/images/skill-icons-locked2.svg); background-size: 825px 825px; margin: 13px 0 0 0; background-position: -495px -165px; width: 82.5px; height: 82.5px } .LPVIEW .has_progress .stars { background-size: 143px 330px; background-image: url(/m/engine/img/stars.png); height: 55px } .LPVIEW .has_progress .stars.stars-1 { background-position-y: 330px } .LPVIEW .has_progress .stars.stars-2 { background-position-y: 275px } .LPVIEW .has_progress .stars.stars-3 { background-position-y: 220px } .LPVIEW .has_progress .stars.stars-4 { background-position-y: 165px } .LPVIEW .has_progress .stars.stars-5 { background-position-y: 110px } .LPVIEW .has_progress .stars.stars-p { background-position-y: 55px } .LPVIEW .has_progress .platinum-star { background-image: url(/m/engine/img/PerfectScore@2x.png); background-size: 32px 30px; background-repeat: no-repeat; width: 39px; height: 31px; position: absolute; right: -2px; top: 5px; z-index: 10 } .LPVIEW .has_progress .completion-check { background-image: url(/m/engine/img/green-check.png); background-repeat: no-repeat; background-size: contain; width: 38px; height: 38px; position: absolute; left: 61px; bottom: 33px } .LPVIEW .has_progress .boxicon { margin-top: -12px; padding-bottom: 60px; font-size: 55px } .LPVIEW .is_unlocked .box { background-color: #fff } .LPVIEW .is_unlocked .box .lsn_num { color: rgba(100,100,100,.8); text-shadow: 4px 5px 3.5px #a9a9a9, 0 0 0 #000, 2px 3px 6px #fff; } .LPVIEW .is_unlocked .special_icon { display: inline-block; background-image: url(https://d7mj4aqfscim2.cloudfront.net/images/skill-icons-locked2.svg); background-size: 660px 660px; margin: 13px 0 0 0; background-position: -396px -132px; width: 66px; height: 66px } .LPVIEW .game_summary { position: absolute; z-index: 2; margin-top: -30px; font-size: 15px; color: #555; background: rgba(255,255,255,.3); padding: 3px 10px 3px 15px; border-radius: 6px; cursor: url(../../assets/cursor/text_x16.cur) 0 0, text; } .LPVIEW .game_summary_value { font-weight: bold } .LPVIEW .game_summary_sep { color: rgba(1,1,1,.2); display: inline-block; margin: 0 10px; } .LPVIEW .lessons-nav { position: fixed; right: 20px; top: 50%; width: 20px; height: 200px; margin-top: -100px; z-index: 3 } .LPVIEW .lesson-nav-btn { border-radius: 17px; background: #fff; color: #555; width: 35px; height: 35px; text-align: center; font-size: 23px; padding: 1px 0 0 1px; cursor: pointer; display: inline-block; box-shadow: 0 0 20px rgba(0,0,0,.16); transition: .1s linear all; display: inline-block } .LPVIEW .lesson-nav-btn:hover { text-decoration: none; color: #4499ea; opacity: .8; transform: scale(1.15) } .LPVIEW .lesson-nav-btn-menu { margin-bottom: 10px; padding: 0; text-align: right; position: relative; overflow: hidden } .LPVIEW .lesson-nav-btn-menu span { position: absolute; font-size: 15px; top: 5px; right: 37px; overflow: hidden; width: 0; transition: .1s width; white-space: nowrap } .LPVIEW .lesson-nav-btn-menu:hover { margin-left: -140px; width: 175px; opacity: .9; transform: scale(1); color: inherit } .LPVIEW .lesson-nav-btn-menu:hover span { width: 135px } .LPVIEW .lesson-nav-btn-menu.lesson-nav-placement:hover+div { opacity: 0 } .LPVIEW .placementtest-tooltip { display: none; background: #5293e2; color: #fff; font-family: Roboto; font-weight: 200; padding: 14px 20px 12px 10px; border-radius: 8px; font-size: 20px; white-space: nowrap; position: absolute; top: -12px; right: 33px; box-shadow: 0px 0px 15px rgba(0,0,0,.4); opacity: .95; transition: opacity .3s } .LPVIEW .placementtest-tooltip b { font-weight: 500 } .LPVIEW .placementtest-tooltip>svg { vertical-align: middle; margin-top: -5px; margin-right: 1px } .LPVIEW .placementtest-tooltip:before { content: " "; display: inline-block; width: 0; position: absolute; margin-right: 0; border-top: solid 10px rgba(0,0,0,0); border-left: solid 10px #5293e2; border-bottom: solid 10px rgba(0,0,0,0); right: -10px; top: 20px } .LPVIEW .placementtest-tooltip.boxed { margin-left: 5px } .LPVIEW .placementtest-tooltip:hover { cursor: pointer; transform: scale(1.01) } .LPVIEW .scroll_look { margin-left: 9px; background: rgba(255,255,255,.3); width: 16px; user-select: none } .LPVIEW .scroll_look.is_active { background: rgba(255,255,255,.8) } .LPVIEW .scroll_look.prev_active { background: rgba(255,255,255,.8) } .LPVIEW .scroll_look:first-child { border-top-right-radius: 20px; border-top-left-radius: 20px; height: 10px; margin-top: 10px } .LPVIEW .scroll_look:last-child { border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; height: 10px; margin-bottom: 10px } .LPVIEW .scroll_look .page_number { position: absolute; display: block; border-radius: 100%; background: #fff; width: 24px; height: 24px; text-align: center; margin-left: -4px; margin-top: -4px; line-height: 24px; box-shadow: 0 0 5px rgba(0,0,0,.2); color: #888; cursor: default } .LPVIEW .scroll_look:not(.is_active) .page_number { background: rgba(255,255,255,.6); transform: scale(1.4); margin-left: -32px; box-shadow: 0 0 0 #fff; transform: scale(0.7); opacity: 0 } .LPVIEW .scroll_look:not(.is_active):hover .page_number { transition: transform .15s ease-out,opacity .15s ease-out; transform: scale(1.2); opacity: 1 } .LPVIEW .bubble_look { margin: 22px 0 22px 7px; height: 16px; width: 16px } .LPVIEW .bubble_look .page_number { position: absolute; display: block; border-radius: 100%; background: rgba(255,255,255,.4); width: 28px; height: 28px; text-align: center; margin-left: -4px; margin-top: -4px; line-height: 28px; box-shadow: 0 0 5px rgba(0,0,0,.2); color: #666; cursor: pointer; transition: .15s linear all } .LPVIEW .bubble_look:not(.is_active):hover .page_number { transform: scale(1.15); background: rgba(255,255,255,.9) } .LPVIEW .bubble_look.is_active .page_number { transform: scale(1.2); background: #fff } .LPVIEW .first_lesson_intro { opacity: 1; position: absolute; z-index: 100; margin: 48px 0 0 160px; width: 375px; height: 80px; cursor: pointer; transition: .15s ease-out all; transform: scale(1.25) } .LPVIEW .first_lesson_intro:hover { transform: scale(1.26) } .LPVIEW .first_lesson_intro path { fill: rgba(68,153,234,.9) } .LPVIEW.with-ads #adslot_1,.LPVIEW.with-ads #adslot_2 { position: fixed; right: 20px; width: 301px } .LPVIEW.with-ads #adslot_1 { top: 60px; height: 650px } .LPVIEW.with-ads #adslot_2 { bottom: 0; height: 300px } @media only screen and (max-height: 1020px) { .LPVIEW.with-ads #adslot_1 { right:0; width: 336px; height: 330px } .LPVIEW.with-ads #adslot_2 { right: 0; width: 336px; height: 330px } } @media only screen and (max-height: 720px) { .LPVIEW.with-ads #adslot_2 { display:none } .LPVIEW.with-ads #adslot_1 { width: 301px; right: 20px; height: 300px } } @media only screen and (max-width: 991px) { .LPVIEW.with-ads #adslot_2 { display:none } .LPVIEW.with-ads #adslot_1 { position: fixed; left: 0; width: 100vw; height: 140px; top: initial; bottom: 0 } } .toc-container { padding: 0px 10px } .toc-container h3 { margin: 5px 0px 0px 0px } .toc-container hr { margin: 10px 0px 15px 0px } .toc-page-range { font-family: "Roboto Mono"; font-size: 10px; display: inline-block; margin-right: 10px; color: #555; width: 55px; border-radius: 3px } .toc-page-range .toc-range-num-lower,.toc-page-range .toc-range-num-upper { width: 22px; display: inline-block } .toc-page-range .toc-range-num-lower { padding-right: 2px; text-align: right } .toc-page-range .toc-range-num-upper { padding-left: 2px; text-align: left } .toc-cur-page .toc-page-range { background-color: #555; color: #fff; font-weight: 600 } ul.toc { padding: 0; list-style: none } ul.toc span:first-child { padding-right: .33em; background: #fff } ul.toc span+span { float: right; padding-left: .33em; background: #fff } ul.toc li:hover { font-weight: 500; color: #000; cursor: pointer } .ava-and-the-rabbit .edheader .navbar-inverse { background: rgba(0,0,0,.64) } .ava-and-the-rabbit .first_lesson_intro path { fill: rgba(0,0,0,.64) !important } .ava-and-the-rabbit .lesson-logo { width: 100px; height: 100px; background: url("/m/exp/vlpview/img/ava_logo.png") no-repeat center; background-size: cover } .going-solo .edheader .navbar-inverse { background: rgba(0,0,0,.64) } .going-solo .first_lesson_intro path { fill: rgba(0,0,0,.64) !important } .going-solo .lesson-logo { width: 136px; height: 172px; background: url("/m/exp/vlpview/img/solo_logo.png") no-repeat center; background-size: cover } .perfect-match .edheader .navbar-inverse { background: rgba(0,0,0,.64) } .perfect-match .first_lesson_intro path { fill: rgba(0,0,0,.64) !important } .perfect-match .lesson-logo { width: 179px; height: 157px; background: url("/m/exp/vlpview/img/p_m_icon.png") no-repeat center; background-size: cover } .sam-luna .edheader .navbar-inverse { background: rgba(0,0,0,.64) } .sam-luna .first_lesson_intro path { fill: rgba(0,0,0,.64) !important } .sam-luna .lesson-logo { width: 150px; height: 157px; background: url("/m/exp/vlpview/img/sam-luna-logo.png") no-repeat center; background-size: cover } .camilla-story .edheader .navbar-inverse { background: rgba(0,0,0,.64) } .camilla-story .first_lesson_intro path { fill: rgba(0,0,0,.64) !important } .camilla-story .lesson-logo { width: 150px; height: 157px; background: url("/m/exp/vlpview/img/camilla-icon.png") no-repeat center; background-size: cover } .beast-camp .edheader .navbar-inverse { background: rgba(0,0,0,.64) } .beast-camp .first_lesson_intro path { fill: rgba(0,0,0,.64) !important } .beast-camp .lesson-logo { width: 150px; height: 157px; background: url("/m/exp/vlpview/img/the-beast-of-the-camp-buckley-logo.png") no-repeat center; background-size: cover } .albert-story .edheader .navbar-inverse { background: rgba(0,0,0,.64) } .albert-story .first_lesson_intro path { fill: rgba(0,0,0,.64) !important } .albert-story .lesson-logo { width: 150px; height: 157px; background: url("/m/exp/vlpview/img/albert-icon.png") no-repeat center; background-size: cover } .natural-wonders .edheader .navbar-inverse { background: rgba(0,0,0,.64) } .natural-wonders .first_lesson_intro path { fill: rgba(0,0,0,.64) !important } .natural-wonders .lesson-logo { width: 172px; height: 172px; background: url("/m/exp/vlpview/img/natural-wonders-logo.png") no-repeat center; background-size: cover } .spl .box-container.has_progress .box { filter: grayscale(0) } .spl .box-container .box { filter: grayscale(1) } .spl .edheader .navbar-inverse { background: #2d2d2d } .junior .edheader .navbar-inverse { background: #474747 } .junior .first_lesson_intro path { fill: rgba(0,0,0,.64) !important } .SCRBRD { background-color: #f5f5f5 } .SCRBRD .scoreboard-item-container { margin-top: 20px } .SCRBRD .scoreboard-item { margin: 3px 0px; padding: 15px 15px 10px 15px; border: 1px solid #eee; background-color: #f5f5f5 } .SCRBRD .scoreboard-item span.ed-icon { padding-left: 22px; background-position: 0px 0px; background-repeat: no-repeat } .SCRBRD .scoreboard-item span.ed-icon.ed-icon-accuracy { background-image: url(/m/pub/images/scoreboard-accuracy.svg) } .SCRBRD .scoreboard-item span.ed-icon.ed-icon-speed { background-image: url(/m/pub/images/scoreboard-speed.svg) } .SCRBRD .scoreboard-item span.ed-icon.ed-icon-star { background-image: url(/m/pub/images/scoreboard-star.svg) } .SCRBRD .scoreboard-item span.ed-icon.ed-icon-progress { background-image: url(/m/pub/images/scoreboard-progress.svg) } .SCRBRD .scoreboard-item span.ed-icon.ed-icon-score { background-image: url(/m/pub/images/scoreboard-score.svg); padding: 6px 0px 0px 30px; background-size: 30px 30px } .SCRBRD .scoreboard-item .badges { border-top: 1px solid #eee; padding-top: 10px; margin-top: 10px } .SCRBRD .scoreboard-item.active { background-color: #ffc } .SCRBRD .scoreboard-item.active .badges { border-top: 1px solid #ebebc1 } .SCRBRD .scoreboard-item .number { margin-right: 10px; background-color: #006aa9; color: #fff; padding: 10px 0px; line-height: 12px; font-size: 16px; font-weight: 500; display: inline-block; border-radius: 100%; height: 32px; width: 32px; text-align: center } .SCRBRD .scoreboard-item .name { color: #222; font-size: 18px; font-weight: 600; display: inline-block; width: 75%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0px 0px 0px 25px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } .SCRBRD .scoreboard-item table.stats { width: 100% } .SCRBRD .scoreboard-item table.stats tbody tr td { padding: 5px; font-size: 12px; font-weight: 400; width: 33% } .SCRBRD .scoreboard-item table.stats tbody tr td.score { font-size: 20px; font-weight: 600; text-align: right; padding-right: 0px } .SCRBRD .scoreboard-item .abadge.small { width: 30px; text-align: center; display: inline-block; border: 1px solid #fff; border-radius: 72px; height: 30px; margin-left: -15px; box-shadow: 1px 1px 1px 0px rgba(0,0,0,.2) } .PRFL { background-color: #f5f5f5 } .PRFL .accessibility input[type=checkbox] { box-shadow: none } .PRFL .container.content-top { padding-top: 80px } .PRFL .form-text { margin-top: 7px } .PRFL .greencheck { background: #7bbb09; border-radius: 100%; height: 120px; width: 120px; text-align: center; margin: auto } .PRFL .greencheck i { color: #fff; font-size: 94px } .PRFL .sub-bar { padding: 30px; color: #fff; background-image: url(/m/tp/plan-banner.svg); background-size: 100%; background-repeat: no-repeat } .PRFL .sub-bar .planname { font-size: 32px } .PRFL .modal-content { padding: 20px 10px } .PRFL .billing { font-family: Roboto } .PRFL .billing h2 { margin-left: 10px; margin-top: 11px; margin-bottom: 30px } .PRFL .billing .payment-head { margin-top: 30px; margin-bottom: 11px } .PRFL .billing .alert.alert-danger { margin-bottom: 0; background-color: #f7caca; color: #dd0e0e } .PRFL .billing .alert.alert-danger .btn { color: #fff; background-color: #dd0e0e; border: 0px; border-radius: 3px } .PRFL .billing .spec { color: #bddff3; font-size: 12px } .PRFL .billing .spec div { margin: 5px 0 } .PRFL .billing .spec strong { font-weight: 700; color: #fff !important } .PRFL .billing .payment-method { display: inline; margin-right: 20px } .PRFL .billing-option .price-block { text-align: center; border-right: solid 1px #ddd; margin: 4em 0 } .PRFL .billing-option .price-block h3 { white-space: nowrap } .PRFL .billing-option .price-block .price { font-family: Montserrat,sans-serrif; font-size: 50px; font-weight: 900 } .PRFL .billing-option .price-block .price:before { content: "$"; vertical-align: text-top; color: #aaa; font-size: .4em; font-weight: 100 } .PRFL .billing-option .price-block .price small { font-size: .3em; vertical-align: super; font-wieght: 100 } .PRFL .billing-option ul { padding-left: 13px } .PRFL .billing-option ul li { font-size: 14px; list-style: circle; margin: 10px 0 } .PRFL .billing-option:last-child .price-block { border-right: none } .billing-sect [class*=hint--]:hover:before,.billing-sect [class*=hint--]:hover:after { color: #000; text-shadow: none; font-size: 16px; -webkit-transition: .3s ease opacity; -moz-transition: .3s ease opacity; transition: .3s ease opacity; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; transition-delay: 0ms } .billing-sect [class*=hint--]:before { border: 10px solid rgba(0,0,0,0) } .billing-sect .hint--yel:after { background-color: #ffa; width: 300px; padding: 5px 10px; white-space: normal; line-height: 1.4em; word-wrap: break-word; box-shadow: 0px 0px 8px rgba(0,0,0,.4); border: 1px solid #f9d552; border-radius: 6px; font-weight: 400 } .billing-sect .hint--yel:before { border-top-color: #f9d552 } .billing-sect .hint--yel:before { margin-bottom: -20px } .billing-sect .hint--top-left:before { left: calc(50% - 22px) } .billing-sect .hint--top-right:before { left: calc(50% + 22px) } body.no-scroll { overflow: hidden } .STATS { background-color: #f5f5f5 } .STATS .overall-stats h2 { margin: 10px 0 } .STATS .history-attempt-table td { width: 15% } .STATS .with-ads { padding-top: 180px } .STATS .with-ads #adslot_1 { position: absolute; top: 55px; left: 0; height: 140px; width: 100vw } @media only screen and (max-width: 1259px) { .STATS .scale-down { transform:scale(0.9) } .STATS .finger-hands-divider { left: 50.2% } } .STATS .ed-paper>hr { border: solid 1px #ddd; margin: 20px 0px 30px } .STATS .ed-paper>div { overflow: hidden } .STATS .ed-paper>div:first-child { border-top: none } .STATS .stats-description { margin: 40px 0; font-size: 16px; line-height: 1.4 } .STATS .color-legend { font-size: 12px; line-height: 1.5; margin: 15px 0 10px; text-align: right } .STATS .color-legend i { display: inline-block; height: 20px; width: 20px; margin: 3px 2px; vertical-align: bottom } .calendar-stats { font-size: 10px } .calendar-stats h5 { margin: 0; font-size: 20px; height: 20px; color: #1a1818 } .calendar-stats h6 { margin: 5px 0; font-size: 14px; color: #e7292a } .calendar-stats .cell { height: 20px; width: 20px; padding: 2px; display: inline-block; vertical-align: top; text-align: center; color: #adafb2 } .calendar-stats .cell>div { height: 100%; width: 100% } .calendar-stats .cell.totals { padding: 1px; margin-left: 12px } .calendar-stats .cell.totals div { border: solid 1px #ccc } .calendar-stats .months { padding: 0 5px; text-align: right } .calendar-stats .months>div { text-align: left; display: inline-block; vertical-align: top; margin: 6px 8px; position: relative; height: 180px; width: 175px } .calendar-stats .months>div hr { position: absolute; top: 40px; right: 30px; height: calc(100% - 80px); border: dashed 1px #ddd; border-right: none } .calendar-stats .months .week { height: 20px } .calendar-stats .day { display: inline-block; height: 20px; width: 20px; margin: 3px 2px; font-style: normal; text-align: right; cursor: pointer } .calendar-stats .day:hover { outline: solid 2px orange } .dual-stats-table { margin-left: auto; background: rgba(255,255,255,.95); position: relative } .dual-stats-table>div>div { display: inline-block; vertical-align: middle } .dual-stats-table>div .kb-keys span { background: #fff } .dual-stats-table>div:hover { cursor: pointer } .dual-stats-table>div:hover .kb-keys span { background: #eaedef } .dual-stats-table>div:hover .progress-tooltip { display: block } .dual-stats-table>div:hover .progress-wpm-n-acc { opacity: 1 } .dual-stats-table .kb-keys { width: 60px; text-align: center } .dual-stats-table .kb-keys span { display: inline-block; height: 28px; text-align: center; width: 28px; border-radius: 4px; border: solid 1px; box-shadow: 1px 1px 3px #aaa; padding: 2px 0 } .dual-stats-table .keys-progress { width: calc(100% - 60px) } .dual-stats-table.duals .kb-keys { width: 120px } .dual-stats-table.duals .keys-progress { width: calc(100% - 120px) } .finger-stats { text-align: center; width: 12.4%; line-height: 1.1; display: inline-block; font-family: HelveticaNeue,sans-serif } .finger-stats label { display: block; font-weight: 600; font-size: 1.2em } .finger-hands-divider { position: absolute; margin: 0; left: 49.5%; top: 0; height: 100%; border: dashed 1px #ddd } ul.left-side-stats { padding: 10px 5px; font-family: HelveticaNeue,sans-serif; font-size: 15px; list-style: none; margin: 0 25px 0 -10px } ul.left-side-stats li { position: relative; padding: 5px; padding-right: 90px; border-bottom: 1px solid #d4dbe0 } ul.left-side-stats li label { position: absolute; right: 0; bottom: 0; font-family: HelveticaNeue,sans-serif; font-weight: 600; min-width: 85px } ul.left-side-stats li label small { font-weight: 300 } ul.left-side-stats.smaller-labels li { padding-right: 120px } ul.left-side-stats.smaller-labels li label { min-width: 115px } ul.left-side-stats.smaller-labels li label span { padding-right: 20px } .progress-wpm-n-acc { height: 10px; position: relative; opacity: .7 } .progress-wpm-n-acc>div { position: absolute; top: 0; height: 100% } .progress-wpm-n-acc>div>div { position: relative } .progress-wpm-n-acc>div .progress-tooltip { color: #4480c2; background: rgba(255,255,255,.85); font-size: 11px; display: none; position: absolute; padding-top: 2px; top: -20px; width: 75px; margin-right: -2px; text-align: center; line-height: .7; pointer-events: none; z-index: 10 } .progress-wpm-n-acc>div .progress-tooltip>.caret { border-top-color: #4480c2; margin-bottom: -3px } .progress-wpm-n-acc>div .progress-tooltip.dark-tooltip { text-align: left; background: rgba(0,0,0,.85); color: #fff; line-height: 1.3; padding: 3px 6px; width: 130px; font-size: 1.2em; right: -130px !important; top: -47px } .progress-wpm-n-acc>div:first-child { left: 0; background: #4499ea } .progress-wpm-n-acc>div:first-child .progress-tooltip { right: -35px } .progress-wpm-n-acc:hover { opacity: 1; cursor: pointer } .progress-wpm-n-acc:hover .progress-tooltip { display: block } ul.char-stats li { list-style: none; height: 15px; font-size: 11px } ul.char-stats li>span { font-size: 14px; display: inline-block; width: 20px; text-align: center; vertical-align: super } ul.char-stats li>div { width: calc(100% - 30px); display: inline-block; margin: 2px } .stats-legend { text-align: center; user-select: none; margin-top: 15px; display: flex; justify-content: space-around } .stats-legend span { display: inline-block; vertical-align: top; position: relative; text-align: left; margin-left: 5px; padding-left: 25px; padding-right: 5px } .stats-legend span:hover { cursor: pointer; color: #4682b4 } .stats-legend span:hover i { box-shadow: 1px 1px 2px #aaa } .stats-legend .legend-box { position: absolute; top: 0; left: 0 } .stats-helpbox { font-size: 13px; padding: 10px 15px; border-radius: 5px; border: solid 1px #ddd; display: flex } .stats-helpbox>i { display: block; font-size: 2em; padding-right: 15px; color: #ff8c00 } .stats-helpbox>div { flex: 1 } .legend-box { display: inline-block; margin-bottom: 5px; margin-right: 5px; vertical-align: middle; width: 20px; height: 20px; border-radius: 3px; font-style: normal } .progress-box { display: inline-block; height: 20px; vertical-align: middle; margin: 1px 3px; float: right } .progress-box>i { display: inline-block; height: 100%; width: 4px; margin-right: 1px } .above-average-stats .stats-row>div>i { float: right } .above-average-stats .stats-row>div:after { content: " "; display: block; border-bottom: solid 1px #ddd; margin: 0 -10px 5px } .above-average-stats .stats-row>div .progress-box { margin: -3px 3px } .above-average-stats .header>div { font-size: 20px; line-height: 1.3 } .above-average-stats .header>div:first-child:after { border-bottom: solid 2px #6ca3d7 } .above-average-stats .header>div:last-child:after { border-bottom: solid 2px #77bee9 } .above-average-stats .stats-legend { font-size: 12px; line-height: 2; float: right; margin-top: -40px; text-align: right } .STATS h4,.STATS h1 { font-family: Helvetica Neue,sans-serif } .STATS h1 { font-weight: 500 } .STATS h4 { font-weight: 300; margin: -10px 0 30px } .STATS h4 b { font-weight: 500 } .STATS .nav-pills>li>a { padding: 5px 15px } .STATS .pinkish { background: #ff5f8c } .STATS .blueish { background: #83ffff } .STATS .stripped { background: repeating-linear-gradient(-45deg, transparent 2px, transparent 6px, rgba(100, 0, 0, 0.4) 0, rgba(100, 0, 0, 0.4) 8px) } .STATS .no-data-label { position: absolute; top: 40%; left: 0; width: 100%; font-size: 2.5em; text-align: center; z-index: 1; font-weight: 500; opacity: .5 } .STATS .progress-stats-bar { position: relative; background: #eaedef; margin: 29px 0; white-space: nowrap; height: 60px; font-size: 16px } .STATS .progress-stats-bar>div { height: 60px; display: inline-block; position: relative } .STATS .progress-stats-bar>div>div { position: absolute; top: 0; height: 100% } .STATS .progress-stats-bar>div>div:hover+label { display: block !important } .STATS .progress-stats-bar>div>label { text-align: center; position: absolute; width: 100px; max-width: inherit; top: -25px; margin-right: -49px; line-height: .95 } .STATS .progress-stats-bar>div>label:before { content: " "; display: block; margin-bottom: -89px; margin-left: 50px; height: 85px; width: 1px; border-bottom: solid 60px #000 } .STATS .progress-stats-bar>label { vertical-align: top; display: inline-block; padding: 10px 5px; font-weight: normal } .STATS ul.filter-program-tab { list-style: none; padding: 0; margin: 0; display: flex; font-size: 20px } .STATS ul.filter-program-tab>li button { height: 100%; display: flex; flex-direction: column; padding: 7px 15px; border-top-left-radius: 5px; border-top-right-radius: 5px; cursor: pointer; position: relative; text-align: right; background: #f3f3f3; border: solid 1px #bbb; border-bottom: 0px; margin-left: 3px } .STATS ul.filter-program-tab>li button:hover { background: #eee } .STATS ul.filter-program-tab>li button.selected { pointer-events: none; background: #fff; box-shadow: 0 0 2px #bbb; position: relative; z-index: 1 } .STATS ul.filter-program-tab>li button.selected:after { content: " "; bottom: -4px; height: 4px; position: absolute; left: 0; right: 0; background: #fff } .STATS ul.filter-program-tab>li button>small { display: block; opacity: .8; font-size: .7em } .STATS ul.filter-program-tab+.ed-paper { position: relative } .STATS ul.filter-program-tab+.ed-paper>div:first-child { padding-top: 40px } .STATS .filter-dropdown { float: right; margin-left: 8px; padding-bottom: 5px; font-family: Roboto,sans-serif; font-size: 15px } .STATS .filter-dropdown .btn-sm { width: 102px; padding-bottom: 5px } .STATS .filter-dropdown>button { line-height: 1.2; border-radius: 5px; background: #fff; border: solid 1px #ccc; box-shadow: 0 0 3px #ccc; padding: 5px 30px; position: relative; text-align: left; height: 40px } .STATS .filter-dropdown>button small,.STATS .filter-dropdown>button span { overflow: hidden; max-width: 100%; display: block; white-space: nowrap } .STATS .filter-dropdown>button small { padding-bottom: 2px } .STATS .filter-dropdown>button .caret { position: absolute; top: 16px; right: 10px; transform: scale(1.4); border-top: 5px dashed } .STATS .filter-dropdown>button .list-icon { position: absolute; width: 18px; top: 10px; left: 5px } .STATS .filter-dropdown>button .list-icon hr { border: solid 1px #777; border-radius: 1px; margin: 3px } .STATS .filter-dropdown .dropdown-menu { padding: 0; background: #fff; box-shadow: 0 0 2px #ccc; border: solid 1px #ccc; border-radius: 5px; margin-top: -1px; min-width: 100%; white-space: nowrap } .STATS .filter-dropdown .dropdown-menu:before { position: absolute; top: -20px; left: 40%; content: " "; border: solid 10px rgba(0,0,0,0); border-bottom: solid 10px #fff } .STATS .filter-dropdown .dropdown-item { display: block; background: none; border: none; width: calc(100% - 6px); border-radius: 4px; padding: 8px 10px; font-size: 14px; text-align: left; line-height: 1.1; margin: 3px } .STATS .filter-dropdown .dropdown-item:hover { cursor: pointer; background: #9de4f4 } .STATS .filter-dropdown .dropdown-item.selected { font-weight: 600 } .STATS .filter-dropdown .dropdown-item.selected:hover { background: #ddd } .STATS .filter-dropdown.small-width .btn { width: 102px } .STATS .filter-dropdown.small-width .dropdown-menu { min-width: 100px } .STATS .filter-dropdown.small-width .dropdown-item { width: 100px } .STATS .filter-dropdown small { font-size: 9px; display: block; line-height: 1; padding-top: 1px } .STATS .filter-nav-tabs { font-size: 14px; max-width: 450px } .STATS .filter-nav-tabs ul { margin: 8px 0; justify-content: space-between; list-style: none; background: #e5e5e5; border-radius: 5px; padding: 5px 4px; display: flex } .STATS .filter-nav-tabs ul button { background: none; border: none; padding: 0 8px; cursor: pointer } .STATS .filter-nav-tabs ul button:hover { color: #4299fa } .STATS .filter-nav-tabs ul button.selected { color: inherit; pointer-events: none; margin: -8px -4px; padding: 6px 10px; background: #fff; border-radius: 4px; border: solid 2px #ddd } .punch-card-day { white-space: nowrap; margin: 15px auto; text-align: right } .punch-card-day>label { display: inline-block; border-bottom: solid 1px #d1d1d1; padding: 15px 5px; width: 100px; vertical-align: top; font-weight: normal; text-align: left } .punch-card-day>span { display: inline-block; text-align: center } .speed-progress-bar { position: relative; padding-right: 70px; background: #f2f2f2; margin: 4px 10px; height: 30px; font-size: 12px; line-height: 30px } .speed-progress-bar span { position: absolute; top: 0; z-index: 1; padding: 0 5px; white-space: nowrap } .speed-progress-bar .speed-track { overflow: hidden; position: relative; height: 30px; transition: width .5s } .speed-progress-bar .speed-track>div { position: absolute; top: 0; right: 0 } .speed-progress-bar .speed-title { left: 0 } .speed-progress-bar .speed-label { right: 0; font-size: 10px; color: #02aa7e; line-height: 30px } .speed-progress-bar svg { height: 30px } .accuracy-donut { position: relative; display: inline-block; width: 49%; text-align: center; white-space: nowrap; vertical-align: top } .accuracy-donut .progress-donut { position: absolute; top: -15px; margin-left: -55px; width: 110px; height: 110px; left: 50% } .accuracy-donut .progress-donut circle { transition: stroke-dasharray .5s } .quickstats-hint:after { line-height: 1.5; font-size: 13px; letter-spacing: .1em } .BDG { background-color: #f5f5f5 } .BDG .badge-container { margin-top: 30px } .BDG .badge-container h5 { font-weight: 500; font-size: 15px; font-family: "Montserrat" } .BDG .badge-card { border-radius: 5px; border: 1px solid #eee; margin: 15px 0px; padding: 15px } .BDG .badge-card .badge-name { margin-top: 5px; font-family: "Montserrat"; font-weight: 600; font-size: 19px; color: #222 } .BDG .badge-card .badge-desc { margin-top: 15px; font-family: "Montserrat"; font-size: 12px; color: #303030; line-height: 1.7em } .BDG .badge-card.in-active { background-color: #f8f8f8 } .BDG .badge-card.in-active .badge-name { color: #888 } .BDG .badge-card.in-active .badge-desc { color: #888 } .BDG .abadge { width: 150px; height: 150px; text-align: center; display: inline-block; border: 1px solid #eee; padding: 8px; border-radius: 100% } .BDG .with-ads { padding-top: 180px } .BDG .with-ads #adslot_1 { position: absolute; top: 70px; left: 0; height: 120px; width: 100vw } .CTLG { background-color: #f5f5f5 } .CTLG .ed-paper { margin-bottom: 40px; background: #fff url(/m/corp2/img/catalog-cloud.png) repeat-x 0px 0px } .CTLG .go-back { cursor: pointer; font-weight: 400 } .CTLG .header-container { margin-top: 10px } .CTLG h2.catalog-header { display: inline-block } .CTLG .section-header { font-size: 1.4em; margin-bottom: 20px } .CTLG .filter-container { font-size: 19px; margin-top: 27px; font-weight: 400; color: #505050 } .CTLG .filter-container span { margin-right: 20px } .CTLG .filter-container .lang-filter { background: rgba(0,0,0,0); height: 42px; border: 1px solid #505050; border-radius: 25px; padding: 0 66px 0 16px; -webkit-appearance: none; -webkit-border-radius: 25px; -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.1); -webkit-padding-end: 66px; -webkit-padding-start: 16px; -webkit-user-select: none; background-image: url("/m/corp2/img/select_arrow.png"); background-position: 90% center; background-repeat: no-repeat } .CTLG .catalog-item { height: 420px; border: 1px solid #ccc; border-radius: 5px; padding: 8px; margin-bottom: 30px; display: flex; flex-direction: column; gap: 10px } .CTLG .catalog-item .catalog-card { aspect-ratio: 401/268 } .CTLG .catalog-item .catalog-card .catalog-card-img img { width: 100%; border-top-left-radius: 3px; border-top-right-radius: 3px } .CTLG .catalog-item .des-container { margin: 0 8px; font-family: Roboto; font-size: 14px; font-weight: 400; flex-grow: 1; display: flex; flex-direction: column; overflow: hidden } .CTLG .catalog-item .des-container .catalog-card-name { font-size: 20px; color: #1aa1e1; font-family: Montserrat,roboto; font-weight: 500; flex-shrink: 0; max-height: 64px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical } .CTLG .catalog-item .des-container .catalog-description { color: #777; margin: 8px 0 11px 0; overflow: hidden; height: 100%; width: 100%; display: block; column-width: 400px; column-fill: auto } .CTLG .catalog-item .des-container .btn { padding: 3px 20px 5px 20px; font-size: 14px; font-family: Roboto; font-weight: 400; flex-shrink: 0 } .tpc-cloud-body { background: #e3f1f8; font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 15px; letter-spacing: -0.02em; line-height: 1.6; color: #000; min-height: 100%; height: auto } .sky-body { background: linear-gradient(#5080c3, #8cd5e0) } .entry-error { background: darkred; color: #fff; font-weight: bold; padding: 10px; margin-bottom: 20px; border-radius: 10px } .edmodal .log-in-with { height: 44px; padding: 6px 14px } .edmodal .log-in-with img { padding: 6px; margin: -6px 16px -9px -12px } .log-in-with { margin-top: 25px; width: 100%; height: 40px; background: #007ec6; border-radius: 3px; color: #fff; font-size: 16px; text-align: left } .log-in-with:hover { background-color: #006aa9; color: #fff } .log-in-with img { height: 38px; padding: 9px; border-radius: 2px; margin: -10px 15px -9px -12px } .ENTRY .ed-log-in-container { padding-top: 50px; min-height: calc(100vh - 55px) } .ENTRY .tpc-cloud { position: absolute; width: 761px } @media(min-width: 761px) { .ENTRY .tpc-cloud { width:100vw } .ENTRY .ed-log-in-container { padding-top: 100px } } .ENTRY h1 { font-weight: 100; font-size: 36px } .ENTRY h2 { font-weight: 100; font-size: 30px; padding-top: 20px } .ENTRY h3 { font-weight: 100; font-size: 24px } .ENTRY h4 { font-weight: 300; margin-bottom: 5px; padding-top: 20px } .ENTRY h5 { font-weight: 500; margin-bottom: 10px } .ENTRY h6 { font-weight: 500; color: #000; text-transform: none } .ENTRY p { font-weight: 300; margin: 0 0 11px; font-size: 15px } .ENTRY .ed-log-in-logo { text-align: center } .ENTRY .ed-log-in-logo p { text-align: left; font-weight: 500; color: gray; padding-top: 10px } .ENTRY .ed-tpc-logo { margin-top: 10px } .ENTRY .ed-tpc-logo a { font-size: 30px; font-family: "Indie Flower",cursive; font-weight: bold; color: #444; text-decoration: none; text-align: left } .ENTRY .ed-tpc-logo:hover { text-decoration: none; color: #006aa9 } .ENTRY .ed-sign { background: #fff; border: 1px solid #c5e8fb; padding: 35px } .ENTRY .ed-sign .log-in-with:first-child { margin-top: 0 } .ENTRY .ed-account { background: #fff; margin-top: 10px; border: 1px solid #c5e8fb; text-align: center; padding: 35px } .ENTRY .ed-blue-line-left { border-bottom: 1px solid #999; width: 43%; margin-top: 30px; position: block } .ENTRY .ed-blue-line-right { border-bottom: 1px solid #999; width: 43%; margin-top: -14px; position: block; float: right } .ENTRY .ed-or { margin-top: -20px; text-align: center; color: #999; font-weight: 300; font-size: 20px } .ENTRY .ed-input-log-in { margin-top: 15px; width: 100%; height: 50px; border-radius: 3px; border: 1px solid #dbdbdb; font-size: 20px; padding-left: 15px } .ENTRY .ed-stay-signed-in label { font-weight: 300; padding-top: 10px } .ENTRY .ed-forget-password { float: right; padding-top: 20px } .ENTRY .ed-forget-password a { color: #007ec6 } .ENTRY .btn:focus { color: #fff } .ENTRY .school-edition-tag { font-family: Baskerville; color: #007ec6; text-align: right; font-size: 18px; position: absolute; margin: -6px 0 0 320px; font-style: italic } .ENTRY .ed-sign-center h4 { text-align: left; padding-top: 0; margin-top: 0; padding-bottom: 13px } .ENTRY .ed-sign-center { margin-top: 20px } .ENTRY .ed-tpc-logo-center { font-size: 50px; font-family: "arial black","arial","sans-serif"; font-weight: bold; color: #007ec6; text-decoration: none; text-align: center } .ENTRY .ed-tpc-logo-center:hover { text-decoration: none; color: #006aa9 } .ENTRY .tpc-logo-center img { width: 130px } .ENTRY .tpc-logo-center { display: block } .ENTRY .ed-school-code-box { background: #f1f2f2; padding: 15px; margin: 15px 0 } .ENTRY .ed-school-code-url { background: #fff; width: 100%; height: 50px; border-radius: 3px; border: 1px solid #dbdbdb; font-size: 20px; text-align: left; padding: 10px } .ENTRY .green-https { color: green } .ENTRY .ed-school-code-placement { font-weight: bold } @media(max-width: 450px) { .ENTRY .school-edition-tag { margin:-6px 0 0 300px } .ENTRY .ed-school-code-url { font-size: 16px; white-space: nowrap } } .ENTRY .ed-gray-line { border-bottom: 1px solid #999; margin: 10px 0; position: block } .ENTRY .ed-sign h5 { font-size: 20px; color: #007ec6; text-align: left } .ENTRY .ed-sign h6 { text-align: left } .ENTRY .errorlist { color: red } .ENTRY .school-edition-tag { font-family: Baskerville; color: #007ec6; text-align: right; font-size: 18px; position: absolute; margin: -6px 0 0 320px; font-style: italic } @media(max-width: 450px) { .ENTRY .school-edition-tag { margin:-6px 0 0 300px } } .ENTRY .ed-footer-nav { position: relative } .ENTRY .ed-footer-nav a { display: inline-block; padding: 10px 15px; color: #555; text-decoration: none } .ENTRY .ed-footer-nav a:hover { text-decoration: underline } .SCHOOL-ENTRY { min-height: 100%; background: url("/m/tpc-login/background.svg") bottom no-repeat; background-size: 100% auto; padding-top: 150px; font-weight: 800; font-family: roboto } .SCHOOL-ENTRY * { -webkit-touch-callout: none } @media only screen and (min-height: 800px) { .SCHOOL-ENTRY { padding-top:180px } } .SCHOOL-ENTRY .errors { font-size: 16px; margin: 5px 0; color: #ff2d44; text-align: left; display: inline-block } .SCHOOL-ENTRY .page { line-height: 1.5; font-weight: 500; font-size: 16px; z-index: 1; margin: auto; background: #fff; padding: 20px 40px 25px; padding-top: 60px; width: 500px; position: relative; border-radius: 3px; box-shadow: 0 3px 6px rgba(0,0,0,.4) } .SCHOOL-ENTRY .page.left-side-logo { width: 600px; font-size: 15px; line-height: 1.5 } .SCHOOL-ENTRY .page.left-side-logo .oauth-buttons button { width: 145px } .SCHOOL-ENTRY .left-side-page { position: absolute; left: 0; width: 240px; top: 0; bottom: 0; background: #f4f5f4; padding: 50px 35px 0 25px; border-bottom-left-radius: 3px; border-top-left-radius: 3px } .SCHOOL-ENTRY .footer-links { position: fixed; bottom: 0px; background: rgba(0,0,0,.3); border-top-right-radius: 10px; padding: 10px 10px } .SCHOOL-ENTRY .footer-links a { color: rgba(255,255,255,.8); padding: 0 20px; font-weight: normal } .SCHOOL-ENTRY button { background-color: #3371ae; color: #fff; font-size: 17px; font-weight: 500; border: none; border-radius: 6px; height: 50px; width: 100% } .SCHOOL-ENTRY button:hover { background-color: #275786 } .SCHOOL-ENTRY button:active { background-color: #2b6094 !important } .SCHOOL-ENTRY input { background: #f4f5f4; color: #222; width: 100%; height: 40px; border: 1px solid #d4dbe0; border-radius: 6px; padding: 10px; font-size: 22px; font-weight: 500; outline: none; box-shadow: none; -webkit-appearance: none; margin: 8px 0 } .SCHOOL-ENTRY input:focus { border-color: #1c96ca } .SCHOOL-ENTRY .logo { width: 100%; height: 150px; position: absolute; top: -180px; left: 0; background: rgba(0,0,0,0) url("/m/tpc-login/logo.png") center center no-repeat; background-size: contain } .SCHOOL-ENTRY .logo:after { content: "TypingClub"; position: absolute; top: 115px; width: 100%; text-align: center; pointer-events: none; font-size: 38px; font-family: "Arial Black"; font-weight: bold; color: #1c96ca } .SCHOOL-ENTRY .school-name { width: 100%; text-align: center; margin: 15px auto; font-size: 25px; font-weight: 500 } .SCHOOL-ENTRY .oauth-buttons { text-align: center; margin-top: 10px } .SCHOOL-ENTRY .oauth-buttons button { margin-bottom: 15px; font-weight: 600; letter-spacing: .5px; text-align: left } .SCHOOL-ENTRY .oauth-buttons button>img { border-radius: 3px; height: 44px; padding: 9px; margin: 0 15px 0 -4px } .SCHOOL-ENTRY .line { height: 12px; width: 186px; border-bottom: 1px solid #3371ae; display: inline-block } .SCHOOL-ENTRY .or-cnt { color: #1c96ca; height: 45px; display: block } .SCHOOL-ENTRY .or { color: #1c96ca; display: inline-block; padding: 7px; text-align: center; width: 45px; height: 45px; font-size: 20px; border-radius: 50px; background: #fff; vertical-align: middle } .SCHOOL-ENTRY .line-r { margin: auto } .SCHOOL-ENTRY .line-l { margin: auto } .SCHOOL-ENTRY a.change-btn { position: absolute; top: 0; right: 8px; font-size: 35px; line-height: 1; font-weight: 300; color: #aaa; text-decoration: none } .SCHOOL-ENTRY a.change-btn:hover { cursor: pointer; color: #777 } .SCHOOL-ENTRY .edicon-arrow-down { font-size: 24px; display: inline-block; vertical-align: sub; transform: rotate(90deg); margin-right: 2px } .SCHOOL-ENTRY .login-btn { margin: 15px auto } .SCHOOL-ENTRY .loading { background-color: rgba(10,10,10,.6) !important; position: absolute; width: 100% !important; height: 100%; z-index: 10; top: 0; left: 0; display: none } .SCHOOL-ENTRY .loading div { text-align: center; background-color: #fff; color: #666; font-size: 16px; margin: 120px auto; width: 230px; height: 40px; padding: 10px } .SCHOOL-ENTRY a { color: #0072c0; font-size: 16px } .SCHOOL-ENTRY .links { text-align: right; font-size: 16px } .DECISIONMAKINGAPP.LIGHT-SILVER-BACKGROUND,.decisionmaking-card.LIGHT-SILVER-BACKGROUND { background: #eaeaea } .DECISIONMAKINGAPP.LIGHT-SILVER-BACKGROUND,.decisionmaking-card.LIGHT-SILVER-BACKGROUND { background: #eaeaea } .DECISIONMAKINGAPP.WARM-CREAM-BACKGROUND,.decisionmaking-card.WARM-CREAM-BACKGROUND { background: #fff4e6 } .DECISIONMAKINGAPP.LIGHT-MINT-GREEN-BACKGROUND,.decisionmaking-card.LIGHT-MINT-GREEN-BACKGROUND { background: #e6f4ea } .DECISIONMAKINGAPP.SUBTLE-POWDER-BLUE-BACKGROUND,.decisionmaking-card.SUBTLE-POWDER-BLUE-BACKGROUND { background: #e3f2fd } .DECISIONMAKINGAPP.SOFT-LAVENDER-BACKGROUND,.decisionmaking-card.SOFT-LAVENDER-BACKGROUND { background: #e8eaf6 } .DECISIONMAKINGAPP.GENTLE-BUTTER-YELLOW-BACKGROUND,.decisionmaking-card.GENTLE-BUTTER-YELLOW-BACKGROUND { background: #fff9c4 } .DECISIONMAKINGAPP.ORCHID-MIST-BACKGROUND,.decisionmaking-card.ORCHID-MIST-BACKGROUND { background: #f4e1f1 } .DECISIONMAKINGAPP.BLUSH-CORAL-BACKGROUND,.decisionmaking-card.BLUSH-CORAL-BACKGROUND { background: #fae1dd } .decisionmaking-scene { position: relative; padding: 20px; width: 600px; min-height: 330px; color: #555; font-size: 14px; line-height: 23px; font-family: Roboto; font-weight: 500 } .decisionmaking-scene h1 { font-size: 22px; line-height: 22px; padding: 8px 0 15px } .decisionmaking-scene h2 { font-size: 18px; line-height: 18px; padding: 8px 0 15px } .decisionmaking-scene h1,.decisionmaking-scene h2 { font-weight: 600; margin: 0 } .decisionmaking-scene ul,.decisionmaking-scene ol { margin-left: 0; margin-bottom: .5em; padding-left: 1.5em } .decisionmaking-scene ul li,.decisionmaking-scene ol li { margin-left: 0 } .decisionmaking-scene ol.resize-drag,.decisionmaking-scene ul.resize-drag { padding-left: 0 } .action-item { position: relative; display: inline-block; margin: 5px; width: calc(100% - 10px); text-align: center; cursor: pointer } .action-item.as-button { background: #459aff; color: #fff; border: solid 1px #1b76ff; border-radius: 1.3em; padding: 0 1.3em } .action-item.as-button .action-label { padding: 5px } .action-item.as-button:hover { background: #1b76ff } .action-item.as-image,.action-item.as-hotspot { margin: 0; width: 100%; display: block } .action-item.as-image .action-label,.action-item.as-image .edit-action-label,.action-item.as-hotspot .action-label,.action-item.as-hotspot .edit-action-label { position: absolute; bottom: 6px; left: 5px; right: 5px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; background: rgba(255,255,255,.7) } .action-item.as-image .action-label,.action-item.as-hotspot .action-label { display: none } .action-item.as-image:hover,.action-item.as-hotspot:hover { outline: solid 1px #1b76ff } .action-item.as-image:hover .action-label,.action-item.as-hotspot:hover .action-label { display: block } .action-item.success { background: #59d797; border-color: #59d797 } .action-item.success:hover { background: #0eb168 } .decisionmaking-scene { visibility: hidden; opacity: 0 } .DECISIONMAKINGAPP { min-width: fit-content; min-height: 100vh; padding: 80px 15px 60px 60px } .DECISIONMAKINGAPP.DEFAULT-BACKGROUND { background: #eee } .DECISIONMAKINGAPP.DEFAULT-BACKGROUND .decisionmaking-content { background: #fff; box-shadow: 0 0 2px #aaa } .DECISIONMAKINGAPP .reading-controls { position: fixed; margin-left: -61px } .DECISIONMAKINGAPP .reading-controls .btn-main { transition: background .2s; display: block; width: 2.45em; height: 2.45em; margin-bottom: 1em; border-radius: 50%; outline: none !important; padding: .25em; line-height: 1.2; border-color: rgba(0,0,0,0); box-shadow: 0 0 0 1px #999a9d } .DECISIONMAKINGAPP .reading-controls .btn-main svg { fill: #999a9d; display: block; transform: scale(1.2) } .DECISIONMAKINGAPP .reading-controls .btn-main:hover { background: rgba(0,0,0,.25) !important; border-color: rgba(255,255,255,.5) !important; cursor: pointer } .DECISIONMAKINGAPP .reading-controls .btn-main:hover svg { fill: #fff !important } .DECISIONMAKINGAPP .reading-controls .btn-main.btn-auto { box-shadow: 0 0 0 1px #00a4ff } .DECISIONMAKINGAPP .reading-controls .btn-main.btn-active { background: #00a4ff !important; box-shadow: 0 0 0 1px #00a4ff; border-color: #fff } .DECISIONMAKINGAPP .reading-controls .btn-main.btn-active svg { fill: #fff !important } .DECISIONMAKINGAPP .sound-wave-icon { visibility: visible; float: left; position: absolute; transform: scale(0.7); margin-left: -27px; margin-top: -5px; height: 30px; width: 27px; display: none; justify-content: space-between; align-items: center } .DECISIONMAKINGAPP .sound-wave-icon>i { display: block; width: 3px; height: 3px; background: #00a4ff } .DECISIONMAKINGAPP .sound-wave-icon.active { display: flex } .DECISIONMAKINGAPP .tts-speaking-node .action-item { box-shadow: 0 0 0 6px rgba(69,154,255,.3333333333) } .DECISIONMAKINGAPP .tts-speaking-node .action-item.as-image { box-shadow: 0 0 0 2px rgba(69,154,255,.3333333333) } .DECISIONMAKINGAPP .feedback-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.3); display: flex; justify-content: center; align-items: center; z-index: 100; opacity: 0 } .DECISIONMAKINGAPP .feedback-modal .modal-panel { width: 400px; padding: 30px 15px; min-height: 200px; background: #fff; border-radius: 5px; box-shadow: 0 0 2px 1px rgba(0,0,0,.3); text-align: center } .DECISIONMAKINGAPP .feedback-modal .action-item { margin: 10px 0 } .DECISIONMAKINGAPP .decisionmaking-content { opacity: 0 } .DECISIONMAKINGAPP .decisionmaking-content .decisionmaking-scene { overflow: hidden; transform: scale(0.96) } .DECISIONMAKINGAPP .decisionmaking-content .action-image-item { position: relative; z-index: 1; border-radius: 2px } .DECISIONMAKINGAPP .decisionmaking-content .action-image-item:hover { cursor: pointer; box-shadow: 0 0 0 1px #1b76ff } .DECISIONMAKINGAPP .decisionmaking-content .with-styles .ITALIC { font-style: italic } .DECISIONMAKINGAPP .decisionmaking-content .with-styles .BOLD { font-weight: bold } .DECISIONMAKINGAPP .decisionmaking-content .with-styles .UNDERLINE { text-decoration: underline } .DECISIONMAKINGAPP .decisionmaking-content .with-styles .CODE { font-family: monospace } #adslot_1,#adslot_2,#adslot_video { position: relative; z-index: 999 } .col-vcenter { display: inline-block; vertical-align: middle; float: none } #vkeyboard-overlay { position: fixed !important; background-color: rgba(255,255,255,.7); border-radius: 10px } #vkeyboard-overlay.kb-bottom { bottom: 0px; left: 50%; margin-left: -342px; transform: scale(0.7) } #vkeyboard-overlay.kb-top { top: -40px; left: 50%; margin-left: -342px; transform: scale(0.65); overflow: hidden; height: 270px } @media(min-width: 1400px) { #vkeyboard-overlay.kb-bottom-responsive { transform:scale(1); bottom: 100px } } .game-playback { transform: scale(0.3) } .TPGAME.with-ads #adslot_1,.LPVIDEO.with-ads #adslot_1 { position: fixed; left: 0; width: 100vw; height: 140px; top: 40px } .TPGAME.with-ads.GAME_BALLOONVALLEY #adslot_1,.TPGAME.with-ads.GAME_MONSTERATTACK #adslot_1,.LPVIDEO.with-ads.GAME_BALLOONVALLEY #adslot_1,.LPVIDEO.with-ads.GAME_MONSTERATTACK #adslot_1 { top: initial; bottom: 0; width: 75vw } .TPGAME .bottom-nav-bar .navbar-content,.LPVIDEO .bottom-nav-bar .navbar-content { max-width: 800px } .LPVIDEO.with-ads #adslot_1 { top: initial; bottom: 0 } .lesson_icon .box_container .box .boxicon .lsn_name .lsn_num{ cursor: url(../../assets/cursor/pointer.cur) 16 4, url(../../assets/cursor/pointer_x16.cur) 7 2, default; } /*# sourceMappingURL=student_tp.css.map*/