/* ========================================================================== import scss files ========================================================================== */ /* ========================================================================== Config file ========================================================================== */ /* start FONTS */ @import url("https://use.typekit.net/qkk5ivp.css"); /* end FONTS */ /* start COLORS */ /* end COLORS */ /** * Function to use the url version to control the browser cache * * example: background: url-nc('example.png') no-repeat 0 0; * * @return string */ /** * Function to attach a version parameter to the path to control the browser cache * * example: background: url(version('example.png')) no-repeat 0 0; * * @return string */ /*------ font management ------*/ @font-face { font-family: "geon-condensed-medium"; font-weight: 400; src: url("../../shared/fonts/geon-condensed-medium.woff2?v=20240109145540") format("woff2"), url("../../shared/fonts/geon-condensed-medium.woff?v=20240109145540") format("woff"); } .font-1, body, p, .markdown, .markdown p, .markdown pre, .markdown code, .markdown kbd, .markdown samp, .btn-icon .label, .nav-modules li > a .icon span, .accordion-items .accordion-item .accordion-header .accordion-header-info .small, .form-group input[type='email'], .form-group input[type='password'], .form-group input[type='text'], .form-group select, .form-group textarea, .form-validation, .form-info, .search-box input.search-box-input[type='text'], .filter-block select, .sorting-block select, .slider-block .limit-txt, .form-group .checkbox-block span, .form-group .radio-block span, .textarea-block textarea, .date-block input.input-datepicker[type='text'], .mat-calendar, .widget.single .post .message, .section-adventure .col-history-block .history-block .history-best-score h5, .section-adventure .adventure-quiz-answers .adventure-quiz-answer .answer-text, .section-auth .intro, .section-profile .intro, .section-content .intro, .section-mission .mission-description, .mood-tracker-explanation .explanation-form textarea.form-control, .mood-tracker-thankyou .achievement .achievement-info .title, .section-posts .post .post-header .post-meta, .section-posts .feedback .reactions h5, .quiz-answer .answer-text, .quiz-answer .answer-text p, .section-game-statistics .stats-block .exam-list li .details .figures .label, .section-game-statistics .stats-table td .indicator, .section-game-statistics .certificate .certificate-header-info .description, .section-game-statistics .certificate .certificate-player-info .label, .theme-hub .accordion-items .accordion-item .accordion-header .accordion-header-info, .theme-hub .accordion-items .accordion-item .accordion-header .accordion-header-info .small, .theme-hub .btn-txt, .theme-hub .btn-download-pdf, .theme-hub .widget.single .examworld .message span, .theme-hub .widget.double .examworld .message span, .theme-hub .widget.single .examworld.locked .message span, .theme-hub .widget.double .examworld.locked .message span, .theme-hub .widget.single .adventure .message span, .theme-hub .widget.double .adventure .message span, .theme-hub .widget.single .adventure.locked .message span, .theme-hub .widget.double .adventure.locked .message span, .theme-hub .mat-calendar, .theme-hub .mood-tracker-thankyou .achievement .trophy .counter span, .theme-hub .section-ranking .rankinglist li .detail .label { font-family: "geon-condensed-medium"; font-weight: 400; } @font-face { font-family: "rotundus-rounded"; font-weight: 400; src: url("../../shared/fonts/rotundus-rounded.woff2?v=20240109145540") format("woff2"), url("../../shared/fonts/rotundus-rounded.woff?v=20240109145540") format("woff"); } .font-2, h1, h2, h3, h4, .markdown h3, .btn-default, .btn-emoticon, .btn-grade, .btn-txt, .btn-accordion span, .btn-download-pdf, .btn-download-file, .player-info .labels .score span, .player-info .labels .figures span, .player-info .labels .rank span, .nav-default li.primary a, .progress-gauge .pointer, .achievement-block .achievement-info .title, .achievement-block .achievement-info .description, .achievement-block .achievement-info .points span, .controls p, .countdown-timer span, .switch-nav a, .accordion-items .accordion-item .accordion-header .accordion-header-info, .form-group label.label-visible, .form-group label.label-visible-avatar, .slider-block .slider-value, .widget.single .adventure.locked .message span, .widget.single .battles .message, .widget.single .battles .message span, .widget.single .examworld .progress-gauge .progress-highlightbar .pointer p, .widget.single .examworld.locked .message, .widget.single .examworld.locked .message span, .widget.single .inputtool .sales-up-block .sales .sales-down, .widget.single .post.new .icon.icon-stamp3 span, .widget.double .adventure.locked .message span, .widget.double .aht .aht-block ul li, .widget.double .aht .aht-block ul li span, .widget.double .badges .col-right > span, .widget.double .badges .col-right .frame .badge .badge-title, .widget.double .battles .col-right .frame ul li, .widget.double .battles .col-right .frame ul li span, .widget.double .battles .col-right .frame .message, .widget.double .battles .col-right .frame .message span, .widget.double .examworld .message span, .widget.double .examworld.locked .message span, .widget.double .missionlist .message span, .widget.double .skills .col-right .icon span, .widget.double .skills .col-right .frame span, .widget .title, .section-adventure .avatar-info, .section-adventure.adventure-play-versus .quiz-intro-info .info-row span.label, .section-adventure .adventure-quiz-answers .adventure-quiz-answer .answer-option, .section-adventure .quiz-answered-block .answer-block .answer, .adventure-overview-block .title, .adventure-overview-block .goal-text, .section-adventure .modal.final-trophy .modal-dialog .final-trophy-modal-block .final-trophy-middle span, .section-auth.section-register .team-name, .section-battle-overview .battle-results .battle-points span, .section-battle-overview .battle-results .results-list li span, .section-battle-quiz .results-list li span, .section-coop .coop-results .coop-points span, .section-coop .coop-results .results-list li span, .section-coop .multi-avatars .results-list li span, .section-coop .result-block .figures span, .section-coop .result-block .points span, .section-coop .bonus-block .figures span, .section-dashboard .profile-stats .stats li span:nth-child(1), .section-dashboard .timeline ul li .info, .best-score .labels li span, .section-mission .mission-score-block li .points, .section-posts .post .post-header .post-meta span, .section-posts .post .post-subject, .section-posts .post .post-grades .grades-overview .grade-counter, .section-posts .feedback .feedback-item .feedback-header .feedback-meta, .section-dilemma .dilemma-title.sub, .section-profile .accordion-content .nickname, .quiz-answers-title, .quiz-answer .answer-option span, .quiz-answer-shuffle .shuffle .char-block, .section-ranking .rankinglist .rank-item .name, .section-ranking .rankinglist .detail div .label, .section-game-statistics .certificate .certificate-header-info .title span, .section-multibattle .teamdata-list-label, .section-multibattle .teamdata-list .gauge-display .teamname, .sales-tool .info span, .section-teambattle .teamname, .section-teambattle .winner-points span, .section-teambattle .sales-status-timeleft span, .theme-hub .draggable-strip .container-box .resizable-textbox, .theme-hub .player-info .labels .name, .theme-hub .btn-badge .btn-body span, .theme-hub .mat-calendar-table-header, .theme-hub .mat-calendar-body-label, .theme-hub .section-adventure .adventure-quiz-header .status, .theme-hub .section-battle-quiz .battle-result .recap.quizscore span, .theme-hub .section-battle-quiz .battle-result .recap.total span, .theme-hub .section-game-statistics .certificate .certificate-header-info .description, .theme-hub .section-game-statistics .certificate .certificate-player-info .label, .theme-hub .mood-tracker-emoticon .emoticon-title, .theme-hub .mood-tracker-thankyou .achievement .achievement-info .title, .theme-hub .quiz-answer-shuffle .shuffle .char-block, .theme-hub .section-world .tile .tile-content .btn-home, .theme-hub .section-world .tile-pos-home .mission-summary .unlock-date-block span, .theme-hub .section-world .tile-pos-home .mission-summary .name, .theme-hub .section-world .tile-pos-home .mission-summary .subname, .theme-hub .section-world .tile-pos-home .mission-summary .progression-block span, .theme-hub .section-world .tile-pos-home .mission-summary .level-block span { font-family: "rotundus-rounded"; font-weight: 400; } @font-face { font-family: "tt-masters-condensed-bold"; font-weight: 400; src: url("../../shared/fonts/tt-masters-condensed-bold.woff2?v=20240109145540") format("woff2"), url("../../shared/fonts/tt-masters-condensed-bold.woff?v=20240109145540") format("woff"); } .font-3, .meter-block .meter-gauge .values .total, .pie_value span, .player-info .labels .time, .player-info .labels .date, .player-info .labels .score, .player-info .labels .figures, .player-info .labels .rank, .achievement-block .trophy .counter span, .achievement-block .achievement-info .points, .sales-tool .sales-up-block .realisation, .form-group input#activation-code[type='text'], .widget.single .adventure .progress-gauge .pointer span, .widget.single .adventure.locked .message, .widget.double .adventure .progress-gauge .progress-highlightbar .pointer p, .widget.double .adventure.locked .message, .widget.double .examworld .progress-gauge .progress-highlightbar .pointer p, .widget.double .examworld .message, .widget.double .examworld.locked .message, .widget.double .missionlist .progress-gauge .progress-highlightbar .pointer p, .widget.double .missionlist .message, .widget .icon.icon-stamp span, .widget .icon.icon-stamp2 span, .section-adventure .col-history-block .history-block .score-info .points, .section-adventure.adventure-play-versus .quiz-intro-info .info-row, .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab .nav-link, .adventure-overview-block .progression-block .progress-gauge .pointer p span, .section-adventure.adventure-map .adventure-world-block .progression-holder .world-progress, .section-battle-overview .battle-results .battle-points, .section-battle-overview .battle-results .results-list li, .section-battle-quiz .results-list li, .section-battle-quiz .battle-result .recap.round-recap span, .section-coop .coop-results .coop-points, .section-coop .coop-results .results-list li, .section-coop .multi-avatars .results-list li, .section-coop .result-block .subname, .section-coop .result-block .digit-block .digit, .section-coop .result-block .figures, .section-coop .result-block .points, .section-coop .bonus-block .figures, .section-dashboard .profile-stats .stats li span:nth-child(2), .best-score .labels li, .section-mission .mission-score-block li .indicator, .section-mission-list .progress-block .progress-gauge.left-to-right .progress-value, .section-mission-list .mission-items .items-list .mission-item .result-percentage, .section-mission-list .mission-items .items-list .mission-item .mission-counter span, .mood-tracker-emoticon .emoticon-title, .mood-tracker-thankyou .achievement .trophy .counter span, .section-posts .score-bar .points, .section-posts .post .post-grades .grades-overview .grade-list h4, .modal.gradelist .grade-header span, .quiz-header .timer, .section-ranking .rankinglist .rank-item .rank, .section-ranking .rankinglist .rank-item .score, .section-ranking .rankinglist .detail div, .section-game-statistics .stats-block .exam-list li .details .figures, .section-game-statistics .stats-table td.number, .section-badges .badge-info-icon-list li .label.score, .section-multibattle .teamdata-list .rank, .section-multibattle .teamdata-list .points, .sales-tool .info, .skill-block .skill-target .value, .skill-block .skill-score span, .skill-block .skill-settings li .multiplier, .section-teambattle .teambattle-list > li .sold, .section-teambattle .winner-points, .section-teambattle .sales-status-timeleft, .section-team .player-rank, .theme-hub .draggable-block .list-numbers .list-number span, .theme-hub .mat-calendar-body-label, .theme-hub .mat-calendar-period-button .mat-calendar-body, .theme-hub .mat-button, .theme-hub .mat-flat-button, .theme-hub .mat-icon-button, .theme-hub .mat-stroked-button, .theme-hub .mat-calendar-body-cell-content, .theme-hub .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab .nav-link, .theme-hub .adventure-overview-block .title, .theme-hub .adventure-overview-block .goal-text, .theme-hub .adventure-overview-block .progression-block .progress-gauge .pointer p span, .theme-hub .section-battle-quiz .battle-result .recap.quizscore h3, .theme-hub .section-battle-quiz .battle-result .recap.total h3, .theme-hub .section-battle-quiz .battle-result .recap.time h3, .theme-hub .section-game-statistics .certificate .certificate-header-info .title span, .theme-hub .section-ranking .rankinglist li .detail .score, .theme-hub .section-world .showdown-block .title, .theme-hub .modal-dialog-showdown .modal-content-showdown .showdown-text { font-family: "tt-masters-condensed-bold"; font-weight: 400; } @font-face { font-family: "tt-masters-condensed-bold"; font-weight: 400; src: url("../../shared/fonts/tt-masters-condensed-bold.woff2?v=20240109145540") format("woff2"), url("../../shared/fonts/tt-masters-condensed-bold.woff?v=20240109145540") format("woff"); } .font-4, .screen, .screen h3, .screen p, .item-count-block span, .section-adventure.adventure-map .adventure-world-block .world-locked-message, .section-adventure.adventure-map .adventure-world-block .world-locked-message p, .section-adventure.adventure-map .chapter-level .level-name, .section-coop .intro-block .coop-introbar span, .section-coop .total-block .multiplier, .section-coop .total-block .multiplier span, .section-dashboard .profile-stats .stats, .selection-frame .stakeholder-info span, .skill-block .skill-header .skill-title, .theme-hub .achievement-block .trophy .counter span, .theme-hub .section-adventure .adventure-quiz-answers .adventure-quiz-answer .answer-option, .theme-hub .section-adventure .quiz-answered-block .answer-block .answer, .theme-hub .quiz-header .status, .theme-hub .quiz-answer .answer-option span, .theme-hub .survey-content .status { font-family: "tt-masters-condensed-bold"; font-weight: 400; } @font-face { font-family: "leander-script-pro"; font-weight: 700; } .font-5, .section-game-statistics .certificate .certificate-player-info .name, .section-game-statistics .certificate .certificate-player-info .nickname, .section-game-statistics .certificate .certificate-player-info .teamname { font-family: "leander-script-pro"; font-weight: 700; } @font-face { font-family: "ace-hub"; src: url("../../shared/fonts/ace-hub.woff2?v=20240109145540") format("woff2"), url("../../shared/fonts/ace-hub.woff?v=20240109145540") format("woff"); } .font-icons, [data-icon]:before, [class^="icon-"]:before, [class*=" icon-"]:before, .swiper-container .media-item.default::before, .mood-tracker-trigger span:before, .mood-tracker-trigger.mood-filledin span:before, .section-posts .edit-date:before { font-family: "ace-hub"; } @font-face { font-family: "ace-general-icons"; src: url("../../shared/fonts/ace-general-icons.woff2?v=20240109145540") format("woff2"), url("../../shared/fonts/ace-general-icons.woff?v=20240109145540") format("woff"); } .font-icons-general, [data-icon-ag]:before, [class^="icon-ag-"]:before, [class*=" icon-ag-"]:before { font-family: "ace-general-icons"; } @font-face { font-family: "source-sans-pro"; } .font-sso-athand, .btn-sso.athand { font-family: "source-sans-pro"; } @font-face { font-family: "segoe-ui"; src: url("../../shared/fonts/segoe-ui.woff2?v=20240109145540") format("woff2"), url("../../shared/fonts/segoe-ui.woff?v=20240109145540") format("woff"); } .font-sso-microsoft, .btn-sso.microsoft { font-family: "segoe-ui"; } @font-face { font-family: "roboto"; font-weight: 400; } .font-sso-google, .btn-sso.google { font-family: "roboto"; font-weight: 400; } /* $font-size-corrections:( font-1:-2px, font-2:2px, font-3:4px, font-4:3px ); */ /* font-size:size(120); -> font-size: 18px; standaard zonder correctie font-size:size(120)+3; -> font-size: 21px; standaard met custom correctie font-size:size(120,2); -> font-size: calc(18px + 2px); standaard met fontcorrectie voor font-2 font-size:size(1201); -> font-size: invalid-font-size; foutief dus niet mogelijk */ [data-icon]:before { content: attr(data-icon); font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="icon-"]:before, [class*=" icon-"]:before { font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-achievements:before { content: "\e000"; } .icon-badge:before { content: "\e001"; } .icon-battle:before { content: "\e002"; } .icon-contact:before { content: "\e003"; } .icon-dashboard:before { content: "\e004"; } .icon-examworld:before { content: "\e005"; } .icon-missions:before { content: "\e005"; } .icon-notes:before { content: "\e006"; } .icon-logout:before { content: "\e007"; } .icon-profile:before { content: "\e008"; } .icon-teamranking:before { content: "\e009"; } .icon-userranking:before { content: "\e009"; } .icon-tutorial:before { content: "\e010"; } .icon-video:before { content: "\e011"; } .icon-skill:before { content: "\e012"; } .icon-gamerules:before { content: "\e013"; } .icon-stamp:before { content: "\e014"; } .icon-stamp2:before { content: "\e015"; } .icon-team:before { content: "\e016"; } .icon-teambattle:before { content: "\e017"; } .icon-doubler:before { content: "\e018"; } .icon-checkmark:before { content: "\e019"; } .icon-coopquiz:before { content: "\e020"; } .icon-delete:before { content: "\e021"; } .icon-zoomin:before { content: "\e022"; } .icon-zoomout:before { content: "\e023"; } .icon-paperclip:before { content: "\e024"; } .icon-photo:before { content: "\e025"; } .icon-post:before { content: "\e026"; } .icon-stamp3:before { content: "\e027"; } .icon-stamp5:before { content: "\e029"; } .icon-eye:before { content: "\e030"; } .icon-undo:before { content: "\e031"; } .icon-redo:before { content: "\e032"; } .icon-randomize:before { content: "\e033"; } .icon-download:before { content: "\e034"; } .icon-top:before { content: "\e035"; } .icon-personal-statistics:before { content: "\e036"; } .icon-speech-balloon:before { content: "\e037"; } .icon-document:before { content: "\e038"; } .icon-edit:before { content: "\e039"; } .icon-save:before { content: "\e040"; } .icon-close:before { content: "\e041"; } .icon-edited:before { content: "\e042"; } .icon-load-more:before { content: "\e043"; } .icon-adventure:before { content: "\e044"; } .icon-disclaimer:before { content: "\e045"; } .icon-player:before { content: "\e046"; } .icon-power:before { content: "\e047"; } .icon-arrow-left:before { content: "\e049"; } .icon-arrow-right:before { content: "\e050"; } .icon-questionmark:before { content: "\e051"; } .icon-thumb:before { content: "\e052"; } .icon-audio-on:before { content: "\e053"; } .icon-audio-off:before { content: "\e054"; } .icon-notification:before { content: "\e055"; } .icon-battlegame:before { content: "\e017"; } [data-icon-ag]:before { content: attr(data-icon-ag); font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="icon-ag-"]:before, [class*=" icon-ag-"]:before { font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-ag-spinner { display: inline-block; animation: anim-rotate 2s infinite steps(8); } .icon-ag-spinner:before { content: "\e900"; } .icon-ag-eye:before { content: "\e901"; } .icon-ag-revert:before { content: "\e902"; } .icon-ag-disclaimer:before { content: "\e902"; } [data-icon-emo]:before { font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="icon-emo-"]:before, [class*=" icon-emo-"]:before { font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-emo-100:before { content: url("../../../base-theme/shared/images/post/emoticon_100.svg"); } .icon-emo-academic-cap:before { content: url("../../../base-theme/shared/images/post/emoticon_academic-cap.svg"); } .icon-emo-applause:before { content: url("../../../base-theme/shared/images/post/emoticon_applause.svg"); } .icon-emo-bell:before { content: url("../../../base-theme/shared/images/post/emoticon_bell.svg"); } .icon-emo-bicep:before { content: url("../../../base-theme/shared/images/post/emoticon_bicep.svg"); } .icon-emo-bullseye:before { content: url("../../../base-theme/shared/images/post/emoticon_bullseye.svg"); } .icon-emo-chart:before { content: url("../../../base-theme/shared/images/post/emoticon_chart.svg"); } .icon-emo-crown:before { content: url("../../../base-theme/shared/images/post/emoticon_crown.svg"); } .icon-emo-exclamation-marks:before { content: url("../../../base-theme/shared/images/post/emoticon_exclamation-marks.svg"); } .icon-emo-finish-flag:before { content: url("../../../base-theme/shared/images/post/emoticon_finish-flag.svg"); } .icon-emo-handshake:before { content: url("../../../base-theme/shared/images/post/emoticon_handshake.svg"); } .icon-emo-heart:before { content: url("../../../base-theme/shared/images/post/emoticon_heart.svg"); } .icon-emo-magnifying-glass:before { content: url("../../../base-theme/shared/images/post/emoticon_magnifying-glass.svg"); } .icon-emo-mountain:before { content: url("../../../base-theme/shared/images/post/emoticon_mountain.svg"); } .icon-emo-open-lock:before { content: url("../../../base-theme/shared/images/post/emoticon_open-lock.svg"); } .icon-emo-prize-cup:before { content: url("../../../base-theme/shared/images/post/emoticon_prize-cup.svg"); } .icon-emo-registered-trademark:before { content: url("../../../base-theme/shared/images/post/emoticon_registered-trademark.svg"); } .icon-emo-road:before { content: url("../../../base-theme/shared/images/post/emoticon_road.svg"); } .icon-emo-ruler:before { content: url("../../../base-theme/shared/images/post/emoticon_ruler.svg"); } .icon-emo-smile:before { content: url("../../../base-theme/shared/images/post/emoticon_smile.svg"); } .icon-emo-sunglasses:before { content: url("../../../base-theme/shared/images/post/emoticon_sunglasses.svg"); } .icon-emo-thumb-up:before { content: url("../../../base-theme/shared/images/post/emoticon_thumb-up.svg"); } .icon-emo-tools:before { content: url("../../../base-theme/shared/images/post/emoticon_tools.svg"); } .icon-emo-stopwatch:before { content: url("../../../base-theme/shared/images/post/emotion_stopwatch.svg"); } @keyframes anim-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } /* ========================================================================== import scss files ========================================================================== */ /* normalize setup ========================================================================== */ /* ============================================================================= HTML5 display definitions ========================================================================== */ /* * Corrects block display not defined in IE6/7/8/9 & FF3 */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* * Corrects inline-block display not defined in IE6/7/8/9 & FF3 */ audio, canvas, video { display: inline-block; } /* * Prevents modern browsers from displaying 'audio' without controls * Remove excess height in iOS5 devices */ audio:not([controls]) { display: none; height: 0; } /* * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 * Known issue: no IE6 support */ [hidden] { display: none; } /* ============================================================================= Base ========================================================================== */ /* * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units * http://clagnut.com/blog/348/#c790 * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ html { font-size: 100%; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ /* Establishes a vertical rhythm unit using $base-line-height. */ line-height: 1.125em; } /* * Addresses font-family inconsistency between 'textarea' and other form elements. */ html, button, input, select, textarea { font-family: helvetica; } /* * Addresses margins handled incorrectly in IE6/7 */ body { margin: 0; } /* ============================================================================= Links ========================================================================== */ /* * Addresses outline displayed oddly in Chrome */ a:focus { outline: 0; } /* * Improves readability when focused and also mouse hovered in all browsers * people.opera.com/patrickl/experiments/keyboard/test */ a:hover, a:active { outline: 0; } /* ============================================================================= Typography ========================================================================== */ /* * Addresses font sizes and margins set differently in IE6/7 * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 */ h1 { /* Sets the font-size and line-height while keeping a proper vertical rhythm. */ font-size: 2em; line-height: 1.125em; /* Sets 1 unit of vertical rhythm on the top and bottom margins. */ margin-top: 0.5625em; margin-bottom: 0.5625em; } h2 { font-size: 1.5em; line-height: 1.5em; margin-top: 0.75em; margin-bottom: 0.75em; } h3 { font-size: 1.17em; line-height: 1.92308em; margin-top: 0.96154em; margin-bottom: 0.96154em; } h4 { font-size: 1em; line-height: 2.25em; margin-top: 1.125em; margin-bottom: 1.125em; } h5 { font-size: 0.83em; line-height: 1.35542em; margin-top: 1.35542em; margin-bottom: 1.35542em; } h6 { font-size: 0.75em; line-height: 1.5em; margin-top: 1.5em; margin-bottom: 1.5em; } /* * Addresses styling not present in IE7/8/9, S5, Chrome */ abbr[title] { border-bottom: 1px dotted; } /* * Addresses style set to 'bolder' in FF3+, S4/5, Chrome */ b, strong { font-weight: bold; } blockquote { /* Sets 1 unit of vertical rhythm on the top and bottom margin. */ margin: 1.125em 40px; } /* * Addresses styling not present in S5, Chrome */ dfn { font-style: italic; } /* * Addresses styling not present in IE6/7/8/9 */ mark { background: #ff0; color: #000; } /* * Addresses margins set differently in IE6/7 */ p, pre { /* Sets 1 unit of vertical rhythm on the top and bottom margin. */ margin: 1.125em 0; } /* * Corrects font family set oddly in IE6, S4/5, Chrome * en.wikipedia.org/wiki/User:Davidgothberg/Test59 */ pre, code, kbd, samp { font-family: monospace, serif; font-size: 1em; line-height: 2.25em; } /* * Improves readability of pre-formatted text in all browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /* * 1. Addresses CSS quotes not supported in IE6/7 * 2. Addresses quote property not supported in S4 */ /* 1 */ q { quotes: none; } /* 2 */ q:before, q:after { content: ''; content: none; } small { font-size: 75%; } /* * Prevents sub and sup affecting line-height in all browsers * gist.github.com/413930 */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ============================================================================= Lists ========================================================================== */ /* * Addresses margins set differently in IE6/7 */ dl, menu, ol, ul { /* Sets 1 unit of vertical rhythm on the top and bottom margin. */ margin: 1.125em 0; } dd { margin: 0 0 0 40px; } /* * Addresses paddings set differently in IE6/7 */ menu, ol, ul { padding: 0; } /* * Corrects list images handled incorrectly in IE7 */ nav ul, nav ol { list-style: none; list-style-image: none; } /* ============================================================================= Embedded content ========================================================================== */ /* * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 * 2. Improves image quality when scaled in IE7 * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ img { border: 0; /* 1 */ -ms-interpolation-mode: bicubic; /* 2 */ } /* * Corrects overflow displayed oddly in IE9 */ svg:not(:root) { overflow: hidden; } /* ============================================================================= Figures ========================================================================== */ /* * Addresses margin not present in IE6/7/8/9, S5, O11 */ figure { margin: 0; } /* ============================================================================= Forms ========================================================================== */ /* * Corrects margin displayed oddly in IE6/7 */ form { margin: 0; } /* * Define consistent border, margin, and padding */ fieldset { border-color: #c0c0c0; margin: 0 2px; /* Apply borders and padding that keep the vertical rhythm. */ border-top-style: solid; border-top-width: 0.0625em; padding-top: 0.33125em; border-bottom-style: solid; border-bottom-width: 0.0625em; padding-bottom: 0.66875em; border-left-style: solid; border-left-width: 0.0625em; padding-left: 0.64062em; border-right-style: solid; border-right-width: 0.0625em; padding-right: 0.64062em; } /* * 1. Corrects color not being inherited in IE6/7/8/9 * 2. Corrects text not wrapping in FF3 * 3. Corrects alignment displayed oddly in IE6/7 */ legend { border: 0; /* 1 */ padding: 0; white-space: normal; /* 2 */ } /* * 1. Corrects font size not being inherited in all browsers * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome * 3. Improves appearance and consistency in all browsers */ button, input, select, textarea { font-size: 100%; /* 1 */ margin: 0; /* 2 */ vertical-align: baseline; /* 3 */ } /* * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet */ button, input { line-height: normal; /* 1 */ } /* * 1. Improves usability and consistency of cursor style between image-type 'input' and others * 2. Corrects inability to style clickable 'input' types in iOS * 3. Removes inner spacing in IE7 without affecting normal text inputs * Known issue: inner spacing remains in IE6 */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; /* 1 */ -webkit-appearance: button; /* 2 */ } /* * Re-set default cursor for disabled elements */ button[disabled], input[disabled] { cursor: default; } /* * 1. Addresses box sizing set to content-box in IE8/9 * 2. Removes excess padding in IE8/9 * 3. Removes excess padding in IE7 Known issue: excess padding remains in IE6 */ input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /* * 1. Addresses appearance set to searchfield in S5, Chrome * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; /* 2 */ } /* * Removes inner padding and search cancel button in S5, Chrome on OS X */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } /* * Removes inner padding and border in FF3+ * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Removes default vertical scrollbar in IE6/7/8/9 * 2. Improves readability and alignment in all browsers */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ============================================================================= Tables ========================================================================== */ /* * Remove most spacing between table cells */ table { border-collapse: collapse; border-spacing: 0; } .swiper { height: 100%; width: 100%; } .swiper .swiper-button-prev:after { content: ''; } .swiper .swiper-button-next:after { content: ''; } .delay-0 { -webkit-animation-delay: 0s; animation-delay: 0s; } .delay-02 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .delay-04 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .delay-05, .section-dashboard .timeline, .section-badges .badge-content.show .badge-explanation-block, .section-team .list-animation { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .delay-06 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .delay-08 { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .delay-10, .section-achievements .achievement-list, .section-auth .auth-split, .section-passwordforgot .intro, .section-register .intro, .section-reset .intro, .section-passwordforgot form, .section-register form, .section-reset form, .section-profile .intro, .section-profile .profile-name, .section-battle-overview .battle-results, .section-contact .intro, .section-contact form, .section-faq .accordion-items, .section-coop .battle-results { -webkit-animation-delay: 1s; animation-delay: 1s; } .delay-12 { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .delay-14, .section-dashboard .timeline .period-total-2.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-4 li:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-4 li:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-5 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-4 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-5 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-4 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-5 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-4 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-5 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(1)::after { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .delay-15, .section-auth .row-steps, .section-battle-overview .game-over, .section-battle-overview .game-over-messagebox, .section-coop .game-over, .section-coop .game-over-messagebox { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .delay-16 { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; } .delay-18 { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } .delay-20, .section-profile .new-avatar, .section-dashboard .timeline .period-total-2.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-4 li:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-4 li:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-5 li:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-4 li:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-5 li:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-4 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-5 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-4 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-5 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(2)::after, .section-team .controls { -webkit-animation-delay: 2s; animation-delay: 2s; } .delay-22 { -webkit-animation-delay: 2.2s; animation-delay: 2.2s; } .delay-24 { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } .delay-25, .section-dashboard .widget .examworld .progress-gauge .progress-highlight { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .delay-26, .section-dashboard .timeline .period-total-3.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-5 li:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-5 li:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-5 li:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-5 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(3)::after { -webkit-animation-delay: 2.6s; animation-delay: 2.6s; } .delay-28 { -webkit-animation-delay: 2.8s; animation-delay: 2.8s; } .delay-30 { -webkit-animation-delay: 3s; animation-delay: 3s; } .delay-32, .section-dashboard .timeline .period-total-4.current-period-4 li:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-4 li:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-4 li:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-4 li:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-4 li:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(4)::after { -webkit-animation-delay: 3.2s; animation-delay: 3.2s; } .delay-34 { -webkit-animation-delay: 3.4s; animation-delay: 3.4s; } .delay-35 { -webkit-animation-delay: 3.5s; animation-delay: 3.5s; } .delay-36 { -webkit-animation-delay: 3.6s; animation-delay: 3.6s; } .delay-38, .section-dashboard .timeline .period-total-5.current-period-5 li:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-5 li:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-5 li:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-5 li:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(5)::after { -webkit-animation-delay: 3.8s; animation-delay: 3.8s; } .delay-40 { -webkit-animation-delay: 4s; animation-delay: 4s; } .delay-42 { -webkit-animation-delay: 4s; animation-delay: 4.2s; } .delay-45 { -webkit-animation-delay: 4.5s; animation-delay: 4.5s; } .delay-44, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(6)::after { -webkit-animation-delay: 4.4s; animation-delay: 4.4s; } .delay-46 { -webkit-animation-delay: 4.6s; animation-delay: 4.64s; } .delay-48 { -webkit-animation-delay: 4.8s; animation-delay: 4.8s; } .delay-50, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(7)::after { -webkit-animation-delay: 5s; animation-delay: 5s; } .delay-52 { -webkit-animation-delay: 5.2s; animation-delay: 5.2s; } .delay-54 { -webkit-animation-delay: 5.4s; animation-delay: 5.4s; } .delay-55 { -webkit-animation-delay: 5.5s; animation-delay: 5.5s; } .delay-56, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(8)::after { -webkit-animation-delay: 5.6s; animation-delay: 5.6s; } .delay-58 { -webkit-animation-delay: 5.8s; animation-delay: 5.8s; } .delay-60 { -webkit-animation-delay: 6.0s; animation-delay: 6.0s; } .delay-62 { -webkit-animation-delay: 6.2s; animation-delay: 6.2s; } .delay-64 { -webkit-animation-delay: 6.4s; animation-delay: 6.4s; } .delay-66 { -webkit-animation-delay: 6.6s; animation-delay: 6.6s; } .delay-68 { -webkit-animation-delay: 6.8s; animation-delay: 6.8s; } .delay-70 { -webkit-animation-delay: 7.0s; animation-delay: 7.0s; } @-webkit-keyframes widthZeroToWidthCurrent { 0% { width: 0; } } @keyframes widthZeroToWidthCurrent { 0% { width: 0; } } .widthZeroToWidthCurrent, .section-dashboard .widget .examworld .progress-gauge .progress-highlight { -webkit-animation-name: widthZeroToWidthCurrent; animation-name: widthZeroToWidthCurrent; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes heightZeroToHeightCurrent { 0% { height: 0; } } @keyframes heightZeroToHeightCurrent { 0% { height: 0; } } .heightZeroToHeightCurrent { -webkit-animation-name: heightZeroToHeightCurrent; animation-name: heightZeroToHeightCurrent; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes leftZeroToLeftCurrent { 0% { left: 0; } } @keyframes leftZeroToLeftCurrent { 0% { left: 0; } } .leftZeroToLeftCurrent { -webkit-animation-name: leftZeroToLeftCurrent; animation-name: leftZeroToLeftCurrent; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes rightZeroToRightCurrent { 0% { right: 0; } } @keyframes rightZeroToRightCurrent { 0% { right: 0; } } .rightZeroToRightCurrent { -webkit-animation-name: rightZeroToRightCurrent; animation-name: rightZeroToRightCurrent; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes bottomZeroToBottomCurrent { 0% { bottom: 0; } } @keyframes bottomZeroToBottomCurrent { 0% { bottom: 0; } } .bottomZeroToBottomCurrent { -webkit-animation-name: bottomZeroToBottomCurrent; animation-name: bottomZeroToBottomCurrent; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes slideInRight10 { from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight10 { from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight10 { -webkit-animation-name: slideInRight10; animation-name: slideInRight10; } @-webkit-keyframes slideOutRight10 { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); } } @keyframes slideOutRight10 { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); } } .slideOutRight10 { -webkit-animation-name: slideOutRight10; animation-name: slideOutRight10; } @-webkit-keyframes zoomIn5 { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } } @keyframes zoomIn5 { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } } .zoomIn5 { -webkit-animation-name: zoomIn5; animation-name: zoomIn5; } @-webkit-keyframes zoomOut5 { from { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes zoomOut5 { from { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .zoomOut5 { -webkit-animation-name: zoomOut5; animation-name: zoomOut5; } @-webkit-keyframes PopupFadeInDownFadeOutUp { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 10% { opacity: 1; -webkit-transform: none; transform: none; } 90% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes PopupFadeInDownFadeOutUp { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 10% { opacity: 1; -webkit-transform: none; transform: none; } 90% { opacity: 1; -webkit-transform: none; transform: none; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @-webkit-keyframes PopupShowHide { to { width: 0; height: 0; visibility: hidden; display: none; overflow: hidden; } } @keyframes PopupShowHide { to { width: 0; height: 0; visibility: hidden; display: none; overflow: hidden; } } @-webkit-keyframes opacityRubberBand { 0% { opacity: 0; } 0.01% { opacity: 1; -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); } 99.99% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { opacity: 1; } } @keyframes opacityRubberBand { 0% { opacity: 0; } 0.01% { opacity: 10; -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); } 99.99% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { opacity: 1; } } .opacityRubberBand { -webkit-animation-name: opacityRubberBand; animation-name: opacityRubberBand; } @-webkit-keyframes opacityPulse { from { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 0.01% { opacity: 1; } 50% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes opacityPulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 0.01% { opacity: 1; } 50% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .opacityPulse, .section-dashboard .timeline .period-total-2.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-4 li:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-4 li:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-4 li:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-4 li:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-5 li:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-5 li:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-5 li:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-4 li:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-4 li:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-5 li:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-5 li:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-5 li:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-4 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-4 li:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-5 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-5 li:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-5 li:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-4 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-4 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-5 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-5 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-5 li:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(8)::after { -webkit-animation-name: opacityPulse; animation-name: opacityPulse; } @-webkit-keyframes fadeIn05 { from { opacity: 0; } 100% { opacity: 0.5; } } @keyframes fadeIn05 { from { opacity: 0; } 100% { opacity: 0.5; } } .fadeIn05 { -webkit-animation-name: fadeIn05; animation-name: fadeIn05; } /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden */ .animated, .section-achievements .logo-medium, .section-achievements h2, .section-achievements .achievement-list, .section-auth .logo-large, .section-auth h2.home, .section-auth .auth-split, .section-auth .row-steps, .section-passwordforgot .logo-medium, .section-register .logo-medium, .section-reset .logo-medium, .section-passwordforgot h2, .section-register h2, .section-reset h2, .section-passwordforgot .intro, .section-register .intro, .section-reset .intro, .section-passwordforgot form, .section-register form, .section-reset form, .section-profile .logo-medium, .section-profile h2, .section-profile .intro, .section-profile .profile-name, .section-profile .new-avatar, .section-battle-overview .aInvitePopupError, .section-battle-overview .aSlotPicked, .section-battle-overview .aSlotCancelled, .section-battle-overview .aRubberBand, .section-battle-overview .aQuizStatusBlock, .section-battle-overview .aChallengerPrologue, .section-battle-overview .aOpponentPrologue, .section-battle-overview .logo-medium, .section-battle-overview h2, .section-battle-overview .battle-results, .section-battle-overview .game-over, .section-battle-overview .game-over-messagebox, .section-contact .logo-medium, .section-contact h2, .section-contact .intro, .section-contact form, .section-faq .logo-medium, .section-faq h2, .section-faq .accordion-items, .section-coop .aInvitePopupError, .section-coop .aSlotPicked, .section-coop .aSlotCancelled, .section-coop .aRubberBand, .section-coop .aQuizStatusBlock, .section-coop .aChallengerPrologue, .section-coop .aOpponentPrologue, .section-coop .logo-medium, .section-coop h2, .section-coop .battle-results, .section-coop .game-over, .section-coop .game-over-messagebox, .section-dashboard .widget .examworld .progress-gauge .progress-highlight, .section-dashboard .timeline, .section-dashboard .timeline .period-total-2.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-4 li:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-4 li:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-4 li:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-4 li:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-5 li:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-5 li:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-5 li:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-4 li:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-4 li:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-5 li:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-5 li:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-5 li:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-4 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-4 li:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-5 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-5 li:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-5 li:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-1 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-3 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-4 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-4 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-5 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-5 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-5 li:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li:nth-child(8)::after, .section-exam-quiz .logo-medium, .section-exam-quiz h2, .section-badges .logo-medium, .section-badges h2, .section-badges .badge-content.show .badge-detail-block, .section-badges .badge-content.show .badge-explanation-block, .section-team .logo-medium, .section-team h2, .section-team .list-animation, .section-team .controls { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite, .section-achievements .infinite.logo-medium, .section-achievements h2.infinite, .section-achievements .infinite.achievement-list, .section-auth .infinite.logo-large, .section-auth h2.infinite.home, .section-auth .infinite.auth-split, .section-auth .infinite.row-steps, .section-passwordforgot .infinite.logo-medium, .section-register .infinite.logo-medium, .section-reset .infinite.logo-medium, .section-passwordforgot h2.infinite, .section-register h2.infinite, .section-reset h2.infinite, .section-passwordforgot .infinite.intro, .section-register .infinite.intro, .section-reset .infinite.intro, .section-passwordforgot form.infinite, .section-register form.infinite, .section-reset form.infinite, .section-profile .infinite.logo-medium, .section-profile h2.infinite, .section-profile .infinite.intro, .section-profile .infinite.profile-name, .section-profile .infinite.new-avatar, .section-battle-overview .infinite.aInvitePopupError, .section-battle-overview .infinite.aSlotPicked, .section-battle-overview .infinite.aSlotCancelled, .section-battle-overview .infinite.aRubberBand, .section-battle-overview .infinite.aQuizStatusBlock, .section-battle-overview .infinite.aChallengerPrologue, .section-battle-overview .infinite.aOpponentPrologue, .section-battle-overview .infinite.logo-medium, .section-battle-overview h2.infinite, .section-battle-overview .infinite.battle-results, .section-battle-overview .infinite.game-over, .section-battle-overview .infinite.game-over-messagebox, .section-contact .infinite.logo-medium, .section-contact h2.infinite, .section-contact .infinite.intro, .section-contact form.infinite, .section-faq .infinite.logo-medium, .section-faq h2.infinite, .section-faq .infinite.accordion-items, .section-coop .infinite.aInvitePopupError, .section-coop .infinite.aSlotPicked, .section-coop .infinite.aSlotCancelled, .section-coop .infinite.aRubberBand, .section-coop .infinite.aQuizStatusBlock, .section-coop .infinite.aChallengerPrologue, .section-coop .infinite.aOpponentPrologue, .section-coop .infinite.logo-medium, .section-coop h2.infinite, .section-coop .infinite.battle-results, .section-coop .infinite.game-over, .section-coop .infinite.game-over-messagebox, .section-dashboard .widget .examworld .progress-gauge .infinite.progress-highlight, .section-dashboard .infinite.timeline, .section-dashboard .timeline .period-total-2.current-period-1 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-1 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-1 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.infinite:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-1 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.infinite:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.infinite:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.infinite:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-1 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.infinite:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.infinite:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.infinite:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.infinite:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.infinite:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.infinite:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-1 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.infinite:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.infinite:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.infinite:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.infinite:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.infinite:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.infinite:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.infinite:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.infinite:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.infinite:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.infinite:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-1 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.infinite:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.infinite:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.infinite:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.infinite:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.infinite:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.infinite:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.infinite:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.infinite:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.infinite:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.infinite:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.infinite:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.infinite:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.infinite:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.infinite:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.infinite:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.infinite:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.infinite:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.infinite:nth-child(8)::after, .section-exam-quiz .infinite.logo-medium, .section-exam-quiz h2.infinite, .section-badges .infinite.logo-medium, .section-badges h2.infinite, .section-badges .badge-content.show .infinite.badge-detail-block, .section-badges .badge-content.show .infinite.badge-explanation-block, .section-team .infinite.logo-medium, .section-team h2.infinite, .section-team .infinite.list-animation, .section-team .infinite.controls { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge, .section-achievements .hinge.logo-medium, .section-achievements h2.hinge, .section-achievements .hinge.achievement-list, .section-auth .hinge.logo-large, .section-auth h2.hinge.home, .section-auth .hinge.auth-split, .section-auth .hinge.row-steps, .section-passwordforgot .hinge.logo-medium, .section-register .hinge.logo-medium, .section-reset .hinge.logo-medium, .section-passwordforgot h2.hinge, .section-register h2.hinge, .section-reset h2.hinge, .section-passwordforgot .hinge.intro, .section-register .hinge.intro, .section-reset .hinge.intro, .section-passwordforgot form.hinge, .section-register form.hinge, .section-reset form.hinge, .section-profile .hinge.logo-medium, .section-profile h2.hinge, .section-profile .hinge.intro, .section-profile .hinge.profile-name, .section-profile .hinge.new-avatar, .section-battle-overview .hinge.aInvitePopupError, .section-battle-overview .hinge.aSlotPicked, .section-battle-overview .hinge.aSlotCancelled, .section-battle-overview .hinge.aRubberBand, .section-battle-overview .hinge.aQuizStatusBlock, .section-battle-overview .hinge.aChallengerPrologue, .section-battle-overview .hinge.aOpponentPrologue, .section-battle-overview .hinge.logo-medium, .section-battle-overview h2.hinge, .section-battle-overview .hinge.battle-results, .section-battle-overview .hinge.game-over, .section-battle-overview .hinge.game-over-messagebox, .section-contact .hinge.logo-medium, .section-contact h2.hinge, .section-contact .hinge.intro, .section-contact form.hinge, .section-faq .hinge.logo-medium, .section-faq h2.hinge, .section-faq .hinge.accordion-items, .section-coop .hinge.aInvitePopupError, .section-coop .hinge.aSlotPicked, .section-coop .hinge.aSlotCancelled, .section-coop .hinge.aRubberBand, .section-coop .hinge.aQuizStatusBlock, .section-coop .hinge.aChallengerPrologue, .section-coop .hinge.aOpponentPrologue, .section-coop .hinge.logo-medium, .section-coop h2.hinge, .section-coop .hinge.battle-results, .section-coop .hinge.game-over, .section-coop .hinge.game-over-messagebox, .section-dashboard .widget .examworld .progress-gauge .hinge.progress-highlight, .section-dashboard .hinge.timeline, .section-dashboard .timeline .period-total-2.current-period-1 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-1 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-1 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.hinge:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-1 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.hinge:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.hinge:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.hinge:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-1 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.hinge:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.hinge:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.hinge:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.hinge:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.hinge:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.hinge:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-1 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.hinge:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.hinge:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.hinge:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.hinge:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.hinge:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.hinge:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.hinge:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.hinge:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.hinge:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.hinge:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-1 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.hinge:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.hinge:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.hinge:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.hinge:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.hinge:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.hinge:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.hinge:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.hinge:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.hinge:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.hinge:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.hinge:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.hinge:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.hinge:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.hinge:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.hinge:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.hinge:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.hinge:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.hinge:nth-child(8)::after, .section-exam-quiz .hinge.logo-medium, .section-exam-quiz h2.hinge, .section-badges .hinge.logo-medium, .section-badges h2.hinge, .section-badges .badge-content.show .hinge.badge-detail-block, .section-badges .badge-content.show .hinge.badge-explanation-block, .section-team .hinge.logo-medium, .section-team h2.hinge, .section-team .hinge.list-animation, .section-team .hinge.controls { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .section-achievements .bounceIn.logo-medium, .section-achievements .section-battle-overview .logo-medium.aInvitePopupError, .section-battle-overview .section-achievements .logo-medium.aInvitePopupError, .section-achievements .section-coop .logo-medium.aInvitePopupError, .section-coop .section-achievements .logo-medium.aInvitePopupError, .section-achievements h2.bounceIn, .section-achievements .section-battle-overview h2.aInvitePopupError, .section-battle-overview .section-achievements h2.aInvitePopupError, .section-achievements .section-coop h2.aInvitePopupError, .section-coop .section-achievements h2.aInvitePopupError, .section-achievements .bounceIn.achievement-list, .section-achievements .section-battle-overview .achievement-list.aInvitePopupError, .section-battle-overview .section-achievements .achievement-list.aInvitePopupError, .section-achievements .section-coop .achievement-list.aInvitePopupError, .section-coop .section-achievements .achievement-list.aInvitePopupError, .section-auth .bounceIn.logo-large, .section-auth .section-battle-overview .logo-large.aInvitePopupError, .section-battle-overview .section-auth .logo-large.aInvitePopupError, .section-auth .section-coop .logo-large.aInvitePopupError, .section-coop .section-auth .logo-large.aInvitePopupError, .section-auth h2.bounceIn.home, .section-auth .section-battle-overview h2.home.aInvitePopupError, .section-battle-overview .section-auth h2.home.aInvitePopupError, .section-auth .section-coop h2.home.aInvitePopupError, .section-coop .section-auth h2.home.aInvitePopupError, .section-auth .bounceIn.auth-split, .section-auth .section-battle-overview .auth-split.aInvitePopupError, .section-battle-overview .section-auth .auth-split.aInvitePopupError, .section-auth .section-coop .auth-split.aInvitePopupError, .section-coop .section-auth .auth-split.aInvitePopupError, .section-auth .bounceIn.row-steps, .section-auth .section-battle-overview .row-steps.aInvitePopupError, .section-battle-overview .section-auth .row-steps.aInvitePopupError, .section-auth .section-coop .row-steps.aInvitePopupError, .section-coop .section-auth .row-steps.aInvitePopupError, .section-passwordforgot .bounceIn.logo-medium, .section-passwordforgot .section-battle-overview .logo-medium.aInvitePopupError, .section-battle-overview .section-passwordforgot .logo-medium.aInvitePopupError, .section-passwordforgot .section-coop .logo-medium.aInvitePopupError, .section-coop .section-passwordforgot .logo-medium.aInvitePopupError, .section-register .bounceIn.logo-medium, .section-register .section-battle-overview .logo-medium.aInvitePopupError, .section-battle-overview .section-register .logo-medium.aInvitePopupError, .section-register .section-coop .logo-medium.aInvitePopupError, .section-coop .section-register .logo-medium.aInvitePopupError, .section-reset .bounceIn.logo-medium, .section-reset .section-battle-overview .logo-medium.aInvitePopupError, .section-battle-overview .section-reset .logo-medium.aInvitePopupError, .section-reset .section-coop .logo-medium.aInvitePopupError, .section-coop .section-reset .logo-medium.aInvitePopupError, .section-passwordforgot h2.bounceIn, .section-passwordforgot .section-battle-overview h2.aInvitePopupError, .section-battle-overview .section-passwordforgot h2.aInvitePopupError, .section-passwordforgot .section-coop h2.aInvitePopupError, .section-coop .section-passwordforgot h2.aInvitePopupError, .section-register h2.bounceIn, .section-register .section-battle-overview h2.aInvitePopupError, .section-battle-overview .section-register h2.aInvitePopupError, .section-register .section-coop h2.aInvitePopupError, .section-coop .section-register h2.aInvitePopupError, .section-reset h2.bounceIn, .section-reset .section-battle-overview h2.aInvitePopupError, .section-battle-overview .section-reset h2.aInvitePopupError, .section-reset .section-coop h2.aInvitePopupError, .section-coop .section-reset h2.aInvitePopupError, .section-passwordforgot .bounceIn.intro, .section-passwordforgot .section-battle-overview .intro.aInvitePopupError, .section-battle-overview .section-passwordforgot .intro.aInvitePopupError, .section-passwordforgot .section-coop .intro.aInvitePopupError, .section-coop .section-passwordforgot .intro.aInvitePopupError, .section-register .bounceIn.intro, .section-register .section-battle-overview .intro.aInvitePopupError, .section-battle-overview .section-register .intro.aInvitePopupError, .section-register .section-coop .intro.aInvitePopupError, .section-coop .section-register .intro.aInvitePopupError, .section-reset .bounceIn.intro, .section-reset .section-battle-overview .intro.aInvitePopupError, .section-battle-overview .section-reset .intro.aInvitePopupError, .section-reset .section-coop .intro.aInvitePopupError, .section-coop .section-reset .intro.aInvitePopupError, .section-passwordforgot form.bounceIn, .section-passwordforgot .section-battle-overview form.aInvitePopupError, .section-battle-overview .section-passwordforgot form.aInvitePopupError, .section-passwordforgot .section-coop form.aInvitePopupError, .section-coop .section-passwordforgot form.aInvitePopupError, .section-register form.bounceIn, .section-register .section-battle-overview form.aInvitePopupError, .section-battle-overview .section-register form.aInvitePopupError, .section-register .section-coop form.aInvitePopupError, .section-coop .section-register form.aInvitePopupError, .section-reset form.bounceIn, .section-reset .section-battle-overview form.aInvitePopupError, .section-battle-overview .section-reset form.aInvitePopupError, .section-reset .section-coop form.aInvitePopupError, .section-coop .section-reset form.aInvitePopupError, .section-profile .bounceIn.logo-medium, .section-profile .section-battle-overview .logo-medium.aInvitePopupError, .section-battle-overview .section-profile .logo-medium.aInvitePopupError, .section-profile .section-coop .logo-medium.aInvitePopupError, .section-coop .section-profile .logo-medium.aInvitePopupError, .section-profile h2.bounceIn, .section-profile .section-battle-overview h2.aInvitePopupError, .section-battle-overview .section-profile h2.aInvitePopupError, .section-profile .section-coop h2.aInvitePopupError, .section-coop .section-profile h2.aInvitePopupError, .section-profile .bounceIn.intro, .section-profile .section-battle-overview .intro.aInvitePopupError, .section-battle-overview .section-profile .intro.aInvitePopupError, .section-profile .section-coop .intro.aInvitePopupError, .section-coop .section-profile .intro.aInvitePopupError, .section-profile .bounceIn.profile-name, .section-profile .section-battle-overview .profile-name.aInvitePopupError, .section-battle-overview .section-profile .profile-name.aInvitePopupError, .section-profile .section-coop .profile-name.aInvitePopupError, .section-coop .section-profile .profile-name.aInvitePopupError, .section-profile .bounceIn.new-avatar, .section-profile .section-battle-overview .new-avatar.aInvitePopupError, .section-battle-overview .section-profile .new-avatar.aInvitePopupError, .section-profile .section-coop .new-avatar.aInvitePopupError, .section-coop .section-profile .new-avatar.aInvitePopupError, .section-battle-overview .aInvitePopupError, .section-battle-overview .bounceIn.aSlotPicked, .section-battle-overview .aSlotPicked.aInvitePopupError, .section-battle-overview .bounceIn.aSlotCancelled, .section-battle-overview .aSlotCancelled.aInvitePopupError, .section-battle-overview .bounceIn.aRubberBand, .section-battle-overview .aRubberBand.aInvitePopupError, .section-battle-overview .bounceIn.aQuizStatusBlock, .section-battle-overview .aQuizStatusBlock.aInvitePopupError, .section-battle-overview .bounceIn.aChallengerPrologue, .section-battle-overview .aChallengerPrologue.aInvitePopupError, .section-battle-overview .bounceIn.aOpponentPrologue, .section-battle-overview .aOpponentPrologue.aInvitePopupError, .section-battle-overview .bounceIn.logo-medium, .section-battle-overview .logo-medium.aInvitePopupError, .section-battle-overview h2.bounceIn, .section-battle-overview h2.aInvitePopupError, .section-battle-overview .bounceIn.battle-results, .section-battle-overview .battle-results.aInvitePopupError, .section-battle-overview .bounceIn.game-over, .section-battle-overview .game-over.aInvitePopupError, .section-battle-overview .bounceIn.game-over-messagebox, .section-battle-overview .game-over-messagebox.aInvitePopupError, .section-contact .bounceIn.logo-medium, .section-contact .section-battle-overview .logo-medium.aInvitePopupError, .section-battle-overview .section-contact .logo-medium.aInvitePopupError, .section-contact .section-coop .logo-medium.aInvitePopupError, .section-coop .section-contact .logo-medium.aInvitePopupError, .section-contact h2.bounceIn, .section-contact .section-battle-overview h2.aInvitePopupError, .section-battle-overview .section-contact h2.aInvitePopupError, .section-contact .section-coop h2.aInvitePopupError, .section-coop .section-contact h2.aInvitePopupError, .section-contact .bounceIn.intro, .section-contact .section-battle-overview .intro.aInvitePopupError, .section-battle-overview .section-contact .intro.aInvitePopupError, .section-contact .section-coop .intro.aInvitePopupError, .section-coop .section-contact .intro.aInvitePopupError, .section-contact form.bounceIn, .section-contact .section-battle-overview form.aInvitePopupError, .section-battle-overview .section-contact form.aInvitePopupError, .section-contact .section-coop form.aInvitePopupError, .section-coop .section-contact form.aInvitePopupError, .section-faq .bounceIn.logo-medium, .section-faq .section-battle-overview .logo-medium.aInvitePopupError, .section-battle-overview .section-faq .logo-medium.aInvitePopupError, .section-faq .section-coop .logo-medium.aInvitePopupError, .section-coop .section-faq .logo-medium.aInvitePopupError, .section-faq h2.bounceIn, .section-faq .section-battle-overview h2.aInvitePopupError, .section-battle-overview .section-faq h2.aInvitePopupError, .section-faq .section-coop h2.aInvitePopupError, .section-coop .section-faq h2.aInvitePopupError, .section-faq .bounceIn.accordion-items, .section-faq .section-battle-overview .accordion-items.aInvitePopupError, .section-battle-overview .section-faq .accordion-items.aInvitePopupError, .section-faq .section-coop .accordion-items.aInvitePopupError, .section-coop .section-faq .accordion-items.aInvitePopupError, .section-coop .aInvitePopupError, .section-coop .bounceIn.aSlotPicked, .section-coop .aSlotPicked.aInvitePopupError, .section-coop .bounceIn.aSlotCancelled, .section-coop .aSlotCancelled.aInvitePopupError, .section-coop .bounceIn.aRubberBand, .section-coop .aRubberBand.aInvitePopupError, .section-coop .bounceIn.aQuizStatusBlock, .section-coop .aQuizStatusBlock.aInvitePopupError, .section-coop .bounceIn.aChallengerPrologue, .section-coop .aChallengerPrologue.aInvitePopupError, .section-coop .bounceIn.aOpponentPrologue, .section-coop .aOpponentPrologue.aInvitePopupError, .section-coop .bounceIn.logo-medium, .section-coop .logo-medium.aInvitePopupError, .section-coop h2.bounceIn, .section-coop h2.aInvitePopupError, .section-coop .bounceIn.battle-results, .section-coop .battle-results.aInvitePopupError, .section-coop .bounceIn.game-over, .section-coop .game-over.aInvitePopupError, .section-coop .bounceIn.game-over-messagebox, .section-coop .game-over-messagebox.aInvitePopupError, .section-dashboard .widget .examworld .progress-gauge .bounceIn.progress-highlight, .section-dashboard .widget .examworld .progress-gauge .section-battle-overview .progress-highlight.aInvitePopupError, .section-battle-overview .section-dashboard .widget .examworld .progress-gauge .progress-highlight.aInvitePopupError, .section-dashboard .widget .examworld .progress-gauge .section-coop .progress-highlight.aInvitePopupError, .section-coop .section-dashboard .widget .examworld .progress-gauge .progress-highlight.aInvitePopupError, .section-dashboard .bounceIn.timeline, .section-dashboard .section-battle-overview .timeline.aInvitePopupError, .section-battle-overview .section-dashboard .timeline.aInvitePopupError, .section-dashboard .section-coop .timeline.aInvitePopupError, .section-coop .section-dashboard .timeline.aInvitePopupError, .section-dashboard .timeline .period-total-2.current-period-1 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-1 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-2.current-period-1 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-1 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-2.current-period-1 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-2.current-period-2 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-2.current-period-2 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-2.current-period-2 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-2.current-period-2 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-2.current-period-2 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-2.current-period-2 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-1 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-1 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-3.current-period-1 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-1 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-3.current-period-1 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-3.current-period-2 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-3.current-period-2 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-2 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-3.current-period-2 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-2 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-3.current-period-2 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-3.current-period-3 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-3 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-3.current-period-3 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-3.current-period-3 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-3.current-period-3 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-3.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-3.current-period-3 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-3.current-period-3 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-3.current-period-3 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-1 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-1 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-4.current-period-1 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-1 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-4.current-period-1 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-4.current-period-2 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-4.current-period-2 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-2 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-4.current-period-2 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-2 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-4.current-period-2 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-4.current-period-3 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-3 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-4.current-period-3 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-4.current-period-3 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-4.current-period-3 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-4.current-period-3 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-3 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-4.current-period-3 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-4.current-period-4 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-4 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-4.current-period-4 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-4.current-period-4 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-4 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-4.current-period-4 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-4.current-period-4 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-4.current-period-4 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.bounceIn:nth-child(4)::after, .section-dashboard .timeline .period-total-4.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(4)::after, .section-battle-overview .section-dashboard .timeline .period-total-4.current-period-4 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-4.current-period-4 .section-coop li.aInvitePopupError:nth-child(4)::after, .section-coop .section-dashboard .timeline .period-total-4.current-period-4 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-1 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-1 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-5.current-period-1 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-1 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-5.current-period-1 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-5.current-period-2 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-5.current-period-2 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-2 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-5.current-period-2 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-2 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-5.current-period-2 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-5.current-period-3 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-3 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-5.current-period-3 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-5.current-period-3 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-5.current-period-3 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-5.current-period-3 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-3 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-5.current-period-3 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-5.current-period-4 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-4 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-5.current-period-4 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-5.current-period-4 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-4 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-5.current-period-4 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-5.current-period-4 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-5.current-period-4 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.bounceIn:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(4)::after, .section-battle-overview .section-dashboard .timeline .period-total-5.current-period-4 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-4 .section-coop li.aInvitePopupError:nth-child(4)::after, .section-coop .section-dashboard .timeline .period-total-5.current-period-4 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-5.current-period-5 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-5 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-5.current-period-5 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-5.current-period-5 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-5 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-5.current-period-5 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-5.current-period-5 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-5 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-5.current-period-5 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.bounceIn:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(4)::after, .section-battle-overview .section-dashboard .timeline .period-total-5.current-period-5 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 .section-coop li.aInvitePopupError:nth-child(4)::after, .section-coop .section-dashboard .timeline .period-total-5.current-period-5 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.bounceIn:nth-child(5)::after, .section-dashboard .timeline .period-total-5.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(5)::after, .section-battle-overview .section-dashboard .timeline .period-total-5.current-period-5 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-5.current-period-5 .section-coop li.aInvitePopupError:nth-child(5)::after, .section-coop .section-dashboard .timeline .period-total-5.current-period-5 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-1 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-1 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-1 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-1 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-1 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-2 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-2 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-2 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-2 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-2 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-2 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-3 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-3 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-3 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-3 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-3 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-3 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-3 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-3 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-4 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-4 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-4 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-4 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-4 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-4 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-4 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-4 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.bounceIn:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(4)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-4 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-4 .section-coop li.aInvitePopupError:nth-child(4)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-4 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-5 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-5 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-5 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-5 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-5 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-5 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-5 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-5 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-5 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.bounceIn:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(4)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-5 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 .section-coop li.aInvitePopupError:nth-child(4)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-5 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.bounceIn:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(5)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-5 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-5 .section-coop li.aInvitePopupError:nth-child(5)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-5 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-6 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-6 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-6 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-6 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-6 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-6 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-6 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-6 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-6 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.bounceIn:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(4)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-6 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-6 .section-coop li.aInvitePopupError:nth-child(4)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-6 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.bounceIn:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(5)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-6 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 .section-coop li.aInvitePopupError:nth-child(5)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-6 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.bounceIn:nth-child(6)::after, .section-dashboard .timeline .period-total-6.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(6)::after, .section-battle-overview .section-dashboard .timeline .period-total-6.current-period-6 li.aInvitePopupError:nth-child(6)::after, .section-dashboard .timeline .period-total-6.current-period-6 .section-coop li.aInvitePopupError:nth-child(6)::after, .section-coop .section-dashboard .timeline .period-total-6.current-period-6 li.aInvitePopupError:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-1 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-1 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-1 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-1 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-1 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-2 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-2 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-2 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-2 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-2 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-2 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-3 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-3 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-3 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-3 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-3 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-3 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-3 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-3 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-4 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-4 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-4 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-4 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-4 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-4 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-4 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-4 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.bounceIn:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(4)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-4 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-4 .section-coop li.aInvitePopupError:nth-child(4)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-4 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-5 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-5 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-5 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-5 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-5 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-5 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-5 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-5 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-5 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.bounceIn:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(4)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-5 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 .section-coop li.aInvitePopupError:nth-child(4)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-5 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.bounceIn:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(5)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-5 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-5 .section-coop li.aInvitePopupError:nth-child(5)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-5 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-6 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-6 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-6 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-6 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-6 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-6 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-6 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-6 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-6 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.bounceIn:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(4)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-6 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-6 .section-coop li.aInvitePopupError:nth-child(4)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-6 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.bounceIn:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(5)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-6 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 .section-coop li.aInvitePopupError:nth-child(5)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-6 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.bounceIn:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(6)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-6 li.aInvitePopupError:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-6 .section-coop li.aInvitePopupError:nth-child(6)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-6 li.aInvitePopupError:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-7 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-7 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-7 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-7 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-7 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-7 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-7 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-7 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-7 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-7 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-7 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-7 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.bounceIn:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-7 .section-battle-overview li.aInvitePopupError:nth-child(4)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-7 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-7 .section-coop li.aInvitePopupError:nth-child(4)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-7 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.bounceIn:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-7 .section-battle-overview li.aInvitePopupError:nth-child(5)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-7 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-7 .section-coop li.aInvitePopupError:nth-child(5)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-7 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.bounceIn:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 .section-battle-overview li.aInvitePopupError:nth-child(6)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-7 li.aInvitePopupError:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 .section-coop li.aInvitePopupError:nth-child(6)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-7 li.aInvitePopupError:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.bounceIn:nth-child(7)::after, .section-dashboard .timeline .period-total-7.current-period-7 .section-battle-overview li.aInvitePopupError:nth-child(7)::after, .section-battle-overview .section-dashboard .timeline .period-total-7.current-period-7 li.aInvitePopupError:nth-child(7)::after, .section-dashboard .timeline .period-total-7.current-period-7 .section-coop li.aInvitePopupError:nth-child(7)::after, .section-coop .section-dashboard .timeline .period-total-7.current-period-7 li.aInvitePopupError:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-1 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-1 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-1 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-1 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-1 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-2 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-2 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-2 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-2 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-2 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-2 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-3 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-3 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-3 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-3 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-3 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-3 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-3 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-3 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-3 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-4 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-4 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-4 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-4 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-4 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-4 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-4 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-4 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.bounceIn:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-4 .section-battle-overview li.aInvitePopupError:nth-child(4)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-4 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-4 .section-coop li.aInvitePopupError:nth-child(4)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-4 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-5 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-5 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-5 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-5 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-5 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-5 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-5 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-5 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-5 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.bounceIn:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(4)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-5 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 .section-coop li.aInvitePopupError:nth-child(4)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-5 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.bounceIn:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-5 .section-battle-overview li.aInvitePopupError:nth-child(5)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-5 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-5 .section-coop li.aInvitePopupError:nth-child(5)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-5 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-6 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-6 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-6 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-6 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-6 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-6 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-6 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-6 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-6 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.bounceIn:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(4)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-6 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-6 .section-coop li.aInvitePopupError:nth-child(4)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-6 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.bounceIn:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(5)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-6 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 .section-coop li.aInvitePopupError:nth-child(5)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-6 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.bounceIn:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-6 .section-battle-overview li.aInvitePopupError:nth-child(6)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-6 li.aInvitePopupError:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-6 .section-coop li.aInvitePopupError:nth-child(6)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-6 li.aInvitePopupError:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-7 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-7 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-7 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-7 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-7 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-7 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-7 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-7 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-7 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-7 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-7 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-7 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.bounceIn:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-7 .section-battle-overview li.aInvitePopupError:nth-child(4)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-7 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-7 .section-coop li.aInvitePopupError:nth-child(4)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-7 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.bounceIn:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-7 .section-battle-overview li.aInvitePopupError:nth-child(5)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-7 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-7 .section-coop li.aInvitePopupError:nth-child(5)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-7 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.bounceIn:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 .section-battle-overview li.aInvitePopupError:nth-child(6)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-7 li.aInvitePopupError:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 .section-coop li.aInvitePopupError:nth-child(6)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-7 li.aInvitePopupError:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.bounceIn:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-7 .section-battle-overview li.aInvitePopupError:nth-child(7)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-7 li.aInvitePopupError:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-7 .section-coop li.aInvitePopupError:nth-child(7)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-7 li.aInvitePopupError:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.bounceIn:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-8 .section-battle-overview li.aInvitePopupError:nth-child(1)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-8 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-8 .section-coop li.aInvitePopupError:nth-child(1)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-8 li.aInvitePopupError:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.bounceIn:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-8 .section-battle-overview li.aInvitePopupError:nth-child(2)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-8 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-8 .section-coop li.aInvitePopupError:nth-child(2)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-8 li.aInvitePopupError:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.bounceIn:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-8 .section-battle-overview li.aInvitePopupError:nth-child(3)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-8 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-8 .section-coop li.aInvitePopupError:nth-child(3)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-8 li.aInvitePopupError:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.bounceIn:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-8 .section-battle-overview li.aInvitePopupError:nth-child(4)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-8 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-8 .section-coop li.aInvitePopupError:nth-child(4)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-8 li.aInvitePopupError:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.bounceIn:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-8 .section-battle-overview li.aInvitePopupError:nth-child(5)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-8 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-8 .section-coop li.aInvitePopupError:nth-child(5)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-8 li.aInvitePopupError:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.bounceIn:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-8 .section-battle-overview li.aInvitePopupError:nth-child(6)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-8 li.aInvitePopupError:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-8 .section-coop li.aInvitePopupError:nth-child(6)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-8 li.aInvitePopupError:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.bounceIn:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 .section-battle-overview li.aInvitePopupError:nth-child(7)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-8 li.aInvitePopupError:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 .section-coop li.aInvitePopupError:nth-child(7)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-8 li.aInvitePopupError:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.bounceIn:nth-child(8)::after, .section-dashboard .timeline .period-total-8.current-period-8 .section-battle-overview li.aInvitePopupError:nth-child(8)::after, .section-battle-overview .section-dashboard .timeline .period-total-8.current-period-8 li.aInvitePopupError:nth-child(8)::after, .section-dashboard .timeline .period-total-8.current-period-8 .section-coop li.aInvitePopupError:nth-child(8)::after, .section-coop .section-dashboard .timeline .period-total-8.current-period-8 li.aInvitePopupError:nth-child(8)::after, .section-exam-quiz .bounceIn.logo-medium, .section-exam-quiz .section-battle-overview .logo-medium.aInvitePopupError, .section-battle-overview .section-exam-quiz .logo-medium.aInvitePopupError, .section-exam-quiz .section-coop .logo-medium.aInvitePopupError, .section-coop .section-exam-quiz .logo-medium.aInvitePopupError, .section-exam-quiz h2.bounceIn, .section-exam-quiz .section-battle-overview h2.aInvitePopupError, .section-battle-overview .section-exam-quiz h2.aInvitePopupError, .section-exam-quiz .section-coop h2.aInvitePopupError, .section-coop .section-exam-quiz h2.aInvitePopupError, .section-badges .bounceIn.logo-medium, .section-badges .section-battle-overview .logo-medium.aInvitePopupError, .section-battle-overview .section-badges .logo-medium.aInvitePopupError, .section-badges .section-coop .logo-medium.aInvitePopupError, .section-coop .section-badges .logo-medium.aInvitePopupError, .section-badges h2.bounceIn, .section-badges .section-battle-overview h2.aInvitePopupError, .section-battle-overview .section-badges h2.aInvitePopupError, .section-badges .section-coop h2.aInvitePopupError, .section-coop .section-badges h2.aInvitePopupError, .section-badges .badge-content.show .bounceIn.badge-detail-block, .section-badges .badge-content.show .section-battle-overview .badge-detail-block.aInvitePopupError, .section-battle-overview .section-badges .badge-content.show .badge-detail-block.aInvitePopupError, .section-badges .badge-content.show .section-coop .badge-detail-block.aInvitePopupError, .section-coop .section-badges .badge-content.show .badge-detail-block.aInvitePopupError, .section-badges .badge-content.show .bounceIn.badge-explanation-block, .section-badges .badge-content.show .section-battle-overview .badge-explanation-block.aInvitePopupError, .section-battle-overview .section-badges .badge-content.show .badge-explanation-block.aInvitePopupError, .section-badges .badge-content.show .section-coop .badge-explanation-block.aInvitePopupError, .section-coop .section-badges .badge-content.show .badge-explanation-block.aInvitePopupError, .section-team .bounceIn.logo-medium, .section-team .section-battle-overview .logo-medium.aInvitePopupError, .section-battle-overview .section-team .logo-medium.aInvitePopupError, .section-team .section-coop .logo-medium.aInvitePopupError, .section-coop .section-team .logo-medium.aInvitePopupError, .section-team h2.bounceIn, .section-team .section-battle-overview h2.aInvitePopupError, .section-battle-overview .section-team h2.aInvitePopupError, .section-team .section-coop h2.aInvitePopupError, .section-coop .section-team h2.aInvitePopupError, .section-team .bounceIn.list-animation, .section-team .section-battle-overview .list-animation.aInvitePopupError, .section-battle-overview .section-team .list-animation.aInvitePopupError, .section-team .section-coop .list-animation.aInvitePopupError, .section-coop .section-team .list-animation.aInvitePopupError, .section-team .bounceIn.controls, .section-team .section-battle-overview .controls.aInvitePopupError, .section-battle-overview .section-team .controls.aInvitePopupError, .section-team .section-coop .controls.aInvitePopupError, .section-coop .section-team .controls.aInvitePopupError, .animated.bounceOut, .section-achievements .bounceOut.logo-medium, .section-achievements h2.bounceOut, .section-achievements .bounceOut.achievement-list, .section-auth .bounceOut.logo-large, .section-auth h2.bounceOut.home, .section-auth .bounceOut.auth-split, .section-auth .bounceOut.row-steps, .section-passwordforgot .bounceOut.logo-medium, .section-register .bounceOut.logo-medium, .section-reset .bounceOut.logo-medium, .section-passwordforgot h2.bounceOut, .section-register h2.bounceOut, .section-reset h2.bounceOut, .section-passwordforgot .bounceOut.intro, .section-register .bounceOut.intro, .section-reset .bounceOut.intro, .section-passwordforgot form.bounceOut, .section-register form.bounceOut, .section-reset form.bounceOut, .section-profile .bounceOut.logo-medium, .section-profile h2.bounceOut, .section-profile .bounceOut.intro, .section-profile .bounceOut.profile-name, .section-profile .bounceOut.new-avatar, .section-battle-overview .bounceOut.aInvitePopupError, .section-battle-overview .bounceOut.aSlotPicked, .section-battle-overview .bounceOut.aSlotCancelled, .section-battle-overview .bounceOut.aRubberBand, .section-battle-overview .bounceOut.aQuizStatusBlock, .section-battle-overview .bounceOut.aChallengerPrologue, .section-battle-overview .bounceOut.aOpponentPrologue, .section-battle-overview .bounceOut.logo-medium, .section-battle-overview h2.bounceOut, .section-battle-overview .bounceOut.battle-results, .section-battle-overview .bounceOut.game-over, .section-battle-overview .bounceOut.game-over-messagebox, .section-contact .bounceOut.logo-medium, .section-contact h2.bounceOut, .section-contact .bounceOut.intro, .section-contact form.bounceOut, .section-faq .bounceOut.logo-medium, .section-faq h2.bounceOut, .section-faq .bounceOut.accordion-items, .section-coop .bounceOut.aInvitePopupError, .section-coop .bounceOut.aSlotPicked, .section-coop .bounceOut.aSlotCancelled, .section-coop .bounceOut.aRubberBand, .section-coop .bounceOut.aQuizStatusBlock, .section-coop .bounceOut.aChallengerPrologue, .section-coop .bounceOut.aOpponentPrologue, .section-coop .bounceOut.logo-medium, .section-coop h2.bounceOut, .section-coop .bounceOut.battle-results, .section-coop .bounceOut.game-over, .section-coop .bounceOut.game-over-messagebox, .section-dashboard .widget .examworld .progress-gauge .bounceOut.progress-highlight, .section-dashboard .bounceOut.timeline, .section-dashboard .timeline .period-total-2.current-period-1 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-1 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-1 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.bounceOut:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-1 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.bounceOut:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.bounceOut:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.bounceOut:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-1 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.bounceOut:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.bounceOut:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.bounceOut:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.bounceOut:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.bounceOut:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.bounceOut:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-1 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.bounceOut:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.bounceOut:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.bounceOut:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.bounceOut:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.bounceOut:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.bounceOut:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.bounceOut:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.bounceOut:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.bounceOut:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.bounceOut:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-1 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.bounceOut:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.bounceOut:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.bounceOut:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.bounceOut:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.bounceOut:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.bounceOut:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.bounceOut:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.bounceOut:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.bounceOut:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.bounceOut:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.bounceOut:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.bounceOut:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.bounceOut:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.bounceOut:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.bounceOut:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.bounceOut:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.bounceOut:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.bounceOut:nth-child(8)::after, .section-exam-quiz .bounceOut.logo-medium, .section-exam-quiz h2.bounceOut, .section-badges .bounceOut.logo-medium, .section-badges h2.bounceOut, .section-badges .badge-content.show .bounceOut.badge-detail-block, .section-badges .badge-content.show .bounceOut.badge-explanation-block, .section-team .bounceOut.logo-medium, .section-team h2.bounceOut, .section-team .bounceOut.list-animation, .section-team .bounceOut.controls { -webkit-animation-duration: .75s; animation-duration: .75s; } .animated.flipOutX, .section-achievements .flipOutX.logo-medium, .section-achievements h2.flipOutX, .section-achievements .flipOutX.achievement-list, .section-auth .flipOutX.logo-large, .section-auth h2.flipOutX.home, .section-auth .flipOutX.auth-split, .section-auth .flipOutX.row-steps, .section-passwordforgot .flipOutX.logo-medium, .section-register .flipOutX.logo-medium, .section-reset .flipOutX.logo-medium, .section-passwordforgot h2.flipOutX, .section-register h2.flipOutX, .section-reset h2.flipOutX, .section-passwordforgot .flipOutX.intro, .section-register .flipOutX.intro, .section-reset .flipOutX.intro, .section-passwordforgot form.flipOutX, .section-register form.flipOutX, .section-reset form.flipOutX, .section-profile .flipOutX.logo-medium, .section-profile h2.flipOutX, .section-profile .flipOutX.intro, .section-profile .flipOutX.profile-name, .section-profile .flipOutX.new-avatar, .section-battle-overview .flipOutX.aInvitePopupError, .section-battle-overview .flipOutX.aSlotPicked, .section-battle-overview .flipOutX.aSlotCancelled, .section-battle-overview .flipOutX.aRubberBand, .section-battle-overview .flipOutX.aQuizStatusBlock, .section-battle-overview .flipOutX.aChallengerPrologue, .section-battle-overview .flipOutX.aOpponentPrologue, .section-battle-overview .flipOutX.logo-medium, .section-battle-overview h2.flipOutX, .section-battle-overview .flipOutX.battle-results, .section-battle-overview .flipOutX.game-over, .section-battle-overview .flipOutX.game-over-messagebox, .section-contact .flipOutX.logo-medium, .section-contact h2.flipOutX, .section-contact .flipOutX.intro, .section-contact form.flipOutX, .section-faq .flipOutX.logo-medium, .section-faq h2.flipOutX, .section-faq .flipOutX.accordion-items, .section-coop .flipOutX.aInvitePopupError, .section-coop .flipOutX.aSlotPicked, .section-coop .flipOutX.aSlotCancelled, .section-coop .flipOutX.aRubberBand, .section-coop .flipOutX.aQuizStatusBlock, .section-coop .flipOutX.aChallengerPrologue, .section-coop .flipOutX.aOpponentPrologue, .section-coop .flipOutX.logo-medium, .section-coop h2.flipOutX, .section-coop .flipOutX.battle-results, .section-coop .flipOutX.game-over, .section-coop .flipOutX.game-over-messagebox, .section-dashboard .widget .examworld .progress-gauge .flipOutX.progress-highlight, .section-dashboard .flipOutX.timeline, .section-dashboard .timeline .period-total-2.current-period-1 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-1 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-1 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.flipOutX:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-1 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.flipOutX:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.flipOutX:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.flipOutX:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-1 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.flipOutX:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.flipOutX:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.flipOutX:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flipOutX:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flipOutX:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flipOutX:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-1 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.flipOutX:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.flipOutX:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.flipOutX:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flipOutX:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flipOutX:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flipOutX:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flipOutX:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flipOutX:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flipOutX:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flipOutX:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-1 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.flipOutX:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.flipOutX:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.flipOutX:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flipOutX:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flipOutX:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flipOutX:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flipOutX:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flipOutX:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flipOutX:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flipOutX:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flipOutX:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flipOutX:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flipOutX:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flipOutX:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flipOutX:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flipOutX:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flipOutX:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flipOutX:nth-child(8)::after, .section-exam-quiz .flipOutX.logo-medium, .section-exam-quiz h2.flipOutX, .section-badges .flipOutX.logo-medium, .section-badges h2.flipOutX, .section-badges .badge-content.show .flipOutX.badge-detail-block, .section-badges .badge-content.show .flipOutX.badge-explanation-block, .section-team .flipOutX.logo-medium, .section-team h2.flipOutX, .section-team .flipOutX.list-animation, .section-team .flipOutX.controls, .animated.flipOutY, .section-achievements .flipOutY.logo-medium, .section-achievements h2.flipOutY, .section-achievements .flipOutY.achievement-list, .section-auth .flipOutY.logo-large, .section-auth h2.flipOutY.home, .section-auth .flipOutY.auth-split, .section-auth .flipOutY.row-steps, .section-passwordforgot .flipOutY.logo-medium, .section-register .flipOutY.logo-medium, .section-reset .flipOutY.logo-medium, .section-passwordforgot h2.flipOutY, .section-register h2.flipOutY, .section-reset h2.flipOutY, .section-passwordforgot .flipOutY.intro, .section-register .flipOutY.intro, .section-reset .flipOutY.intro, .section-passwordforgot form.flipOutY, .section-register form.flipOutY, .section-reset form.flipOutY, .section-profile .flipOutY.logo-medium, .section-profile h2.flipOutY, .section-profile .flipOutY.intro, .section-profile .flipOutY.profile-name, .section-profile .flipOutY.new-avatar, .section-battle-overview .flipOutY.aInvitePopupError, .section-battle-overview .flipOutY.aSlotPicked, .section-battle-overview .flipOutY.aSlotCancelled, .section-battle-overview .flipOutY.aRubberBand, .section-battle-overview .flipOutY.aQuizStatusBlock, .section-battle-overview .flipOutY.aChallengerPrologue, .section-battle-overview .flipOutY.aOpponentPrologue, .section-battle-overview .flipOutY.logo-medium, .section-battle-overview h2.flipOutY, .section-battle-overview .flipOutY.battle-results, .section-battle-overview .flipOutY.game-over, .section-battle-overview .flipOutY.game-over-messagebox, .section-contact .flipOutY.logo-medium, .section-contact h2.flipOutY, .section-contact .flipOutY.intro, .section-contact form.flipOutY, .section-faq .flipOutY.logo-medium, .section-faq h2.flipOutY, .section-faq .flipOutY.accordion-items, .section-coop .flipOutY.aInvitePopupError, .section-coop .flipOutY.aSlotPicked, .section-coop .flipOutY.aSlotCancelled, .section-coop .flipOutY.aRubberBand, .section-coop .flipOutY.aQuizStatusBlock, .section-coop .flipOutY.aChallengerPrologue, .section-coop .flipOutY.aOpponentPrologue, .section-coop .flipOutY.logo-medium, .section-coop h2.flipOutY, .section-coop .flipOutY.battle-results, .section-coop .flipOutY.game-over, .section-coop .flipOutY.game-over-messagebox, .section-dashboard .widget .examworld .progress-gauge .flipOutY.progress-highlight, .section-dashboard .flipOutY.timeline, .section-dashboard .timeline .period-total-2.current-period-1 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-1 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-1 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.flipOutY:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-1 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.flipOutY:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.flipOutY:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.flipOutY:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-1 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.flipOutY:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.flipOutY:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.flipOutY:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flipOutY:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flipOutY:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flipOutY:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-1 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.flipOutY:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.flipOutY:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.flipOutY:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flipOutY:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flipOutY:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flipOutY:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flipOutY:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flipOutY:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flipOutY:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flipOutY:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-1 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.flipOutY:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.flipOutY:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.flipOutY:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flipOutY:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flipOutY:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flipOutY:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flipOutY:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flipOutY:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flipOutY:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flipOutY:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flipOutY:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flipOutY:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flipOutY:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flipOutY:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flipOutY:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flipOutY:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flipOutY:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flipOutY:nth-child(8)::after, .section-exam-quiz .flipOutY.logo-medium, .section-exam-quiz h2.flipOutY, .section-badges .flipOutY.logo-medium, .section-badges h2.flipOutY, .section-badges .badge-content.show .flipOutY.badge-detail-block, .section-badges .badge-content.show .flipOutY.badge-explanation-block, .section-team .flipOutY.logo-medium, .section-team h2.flipOutY, .section-team .flipOutY.list-animation, .section-team .flipOutY.controls { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, 100% { -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%, 100% { -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%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-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); } 100% { -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); } 100% { -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); } 100% { -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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand, .section-battle-overview .aRubberBand, .section-coop .aRubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, 100% { -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, 100% { -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 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); } 100% { -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); } 100% { -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); } 100% { -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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-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); } 100% { -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); } 100% { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, 100% { -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.39062deg) skewY(0.39062deg); transform: skewX(0.39062deg) skewY(0.39062deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } @keyframes jello { from, 11.1%, 100% { -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.39062deg) skewY(0.39062deg); transform: skewX(0.39062deg) skewY(0.39062deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, 100% { -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); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, 100% { -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); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn, .section-battle-overview .aInvitePopupError, .section-coop .aInvitePopupError { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, 100% { -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); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, 100% { -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); } 100% { -webkit-transform: none; transform: none; } } .bounceInDown, .section-achievements .logo-medium, .section-achievements h2, .section-auth .logo-large, .section-auth h2.home, .section-passwordforgot .logo-medium, .section-register .logo-medium, .section-reset .logo-medium, .section-passwordforgot h2, .section-register h2, .section-reset h2, .section-profile .logo-medium, .section-profile h2, .section-battle-overview .logo-medium, .section-battle-overview h2, .section-contact .logo-medium, .section-contact h2, .section-faq .logo-medium, .section-faq h2, .section-coop .logo-medium, .section-coop h2, .section-exam-quiz .logo-medium, .section-exam-quiz h2, .section-badges .logo-medium, .section-badges h2, .section-team .logo-medium, .section-team h2 { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, 100% { -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); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { from, 60%, 75%, 90%, 100% { -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); } 100% { -webkit-transform: none; transform: none; } } .bounceInLeft, .section-auth .auth-split, .section-passwordforgot .intro, .section-register .intro, .section-reset .intro, .section-passwordforgot form, .section-register form, .section-reset form, .section-profile .intro, .section-profile .profile-name, .section-battle-overview .battle-results, .section-contact .intro, .section-contact form, .section-faq .accordion-items, .section-coop .battle-results { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, 100% { -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); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { from, 60%, 75%, 90%, 100% { -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); } 100% { -webkit-transform: none; transform: none; } } .bounceInRight, .section-profile .new-avatar, .section-battle-overview .game-over, .section-battle-overview .game-over-messagebox, .section-coop .game-over, .section-coop .game-over-messagebox, .section-team .list-animation { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, 100% { -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); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, 100% { -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); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp, .section-achievements .achievement-list, .section-auth .row-steps { -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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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; } 100% { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } 100% { opacity: 1; } } .fadeIn, .section-dashboard .timeline, .section-team .controls { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { 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); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig, .section-battle-overview .aSlotCancelled, .section-coop .aSlotCancelled { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { 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); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { 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); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { 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); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { 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); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp, .section-badges .badge-content.show .badge-detail-block, .section-badges .badge-content.show .badge-explanation-block { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } 100% { 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; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } 100% { 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; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } 100% { 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; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } 100% { 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; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } 100% { 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; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } 100% { 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; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } 100% { 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; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig, .section-battle-overview .aSlotPicked, .section-coop .aSlotPicked { -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; } 100% { -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; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip, .section-achievements .flip.logo-medium, .section-achievements h2.flip, .section-achievements .flip.achievement-list, .section-auth .flip.logo-large, .section-auth h2.flip.home, .section-auth .flip.auth-split, .section-auth .flip.row-steps, .section-passwordforgot .flip.logo-medium, .section-register .flip.logo-medium, .section-reset .flip.logo-medium, .section-passwordforgot h2.flip, .section-register h2.flip, .section-reset h2.flip, .section-passwordforgot .flip.intro, .section-register .flip.intro, .section-reset .flip.intro, .section-passwordforgot form.flip, .section-register form.flip, .section-reset form.flip, .section-profile .flip.logo-medium, .section-profile h2.flip, .section-profile .flip.intro, .section-profile .flip.profile-name, .section-profile .flip.new-avatar, .section-battle-overview .flip.aInvitePopupError, .section-battle-overview .flip.aSlotPicked, .section-battle-overview .flip.aSlotCancelled, .section-battle-overview .flip.aRubberBand, .section-battle-overview .flip.aQuizStatusBlock, .section-battle-overview .flip.aChallengerPrologue, .section-battle-overview .flip.aOpponentPrologue, .section-battle-overview .flip.logo-medium, .section-battle-overview h2.flip, .section-battle-overview .flip.battle-results, .section-battle-overview .flip.game-over, .section-battle-overview .flip.game-over-messagebox, .section-contact .flip.logo-medium, .section-contact h2.flip, .section-contact .flip.intro, .section-contact form.flip, .section-faq .flip.logo-medium, .section-faq h2.flip, .section-faq .flip.accordion-items, .section-coop .flip.aInvitePopupError, .section-coop .flip.aSlotPicked, .section-coop .flip.aSlotCancelled, .section-coop .flip.aRubberBand, .section-coop .flip.aQuizStatusBlock, .section-coop .flip.aChallengerPrologue, .section-coop .flip.aOpponentPrologue, .section-coop .flip.logo-medium, .section-coop h2.flip, .section-coop .flip.battle-results, .section-coop .flip.game-over, .section-coop .flip.game-over-messagebox, .section-dashboard .widget .examworld .progress-gauge .flip.progress-highlight, .section-dashboard .flip.timeline, .section-dashboard .timeline .period-total-2.current-period-1 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-2.current-period-2 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-1 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-2 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-3.current-period-3 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-1 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-2 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-3 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-4.current-period-4 li.flip:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-1 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-2 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-3 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-4 li.flip:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.flip:nth-child(4)::after, .section-dashboard .timeline .period-total-5.current-period-5 li.flip:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-1 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-2 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-3 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-4 li.flip:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.flip:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-5 li.flip:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flip:nth-child(4)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flip:nth-child(5)::after, .section-dashboard .timeline .period-total-6.current-period-6 li.flip:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-1 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-2 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-3 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-4 li.flip:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.flip:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-5 li.flip:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flip:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flip:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-6 li.flip:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flip:nth-child(4)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flip:nth-child(5)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flip:nth-child(6)::after, .section-dashboard .timeline .period-total-7.current-period-7 li.flip:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-1 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-2 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-3 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-4 li.flip:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.flip:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-5 li.flip:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flip:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flip:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-6 li.flip:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flip:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flip:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flip:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-7 li.flip:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flip:nth-child(1)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flip:nth-child(2)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flip:nth-child(3)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flip:nth-child(4)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flip:nth-child(5)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flip:nth-child(6)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flip:nth-child(7)::after, .section-dashboard .timeline .period-total-8.current-period-8 li.flip:nth-child(8)::after, .section-exam-quiz .flip.logo-medium, .section-exam-quiz h2.flip, .section-badges .flip.logo-medium, .section-badges h2.flip, .section-badges .badge-content.show .flip.badge-detail-block, .section-badges .badge-content.show .flip.badge-explanation-block, .section-team .flip.logo-medium, .section-team h2.flip, .section-team .flip.list-animation, .section-team .flip.controls { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-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); } 100% { -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); } 100% { -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); } 100% { -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); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY, .section-battle-overview .aQuizStatusBlock, .section-coop .aQuizStatusBlock { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-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); } 100% { 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); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } 100% { 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; } 100% { 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, .section-battle-overview .aChallengerPrologue, .section-coop .aChallengerPrologue { -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, .section-battle-overview .aOpponentPrologue, .section-coop .aOpponentPrologue { -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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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; } 100% { -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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /** * Swiper 8.4.7 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2023 Vladimir Kharlampidi * * Released under the MIT License * * Released on: January 30, 2023 */ @font-face { font-family: 'swiper-icons'; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #007aff; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-pointer-events { touch-action: pan-y; } .swiper-pointer-events.swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden; } /* 3D Effects */ .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d; } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } /* CSS Mode */ .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-horizontal.swiper-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-vertical.swiper-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-centered > .swiper-wrapper::before { content: ''; flex-shrink: 0; order: 9999; } .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; width: var(--swiper-centered-offset-after); } .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; height: var(--swiper-centered-offset-after); } .swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } :root { /* --swiper-pagination-color: var(--swiper-theme-color); --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-width: 8px; --swiper-pagination-bullet-height: 8px; --swiper-pagination-bullet-inactive-color: #000; --swiper-pagination-bullet-inactive-opacity: 0.2; --swiper-pagination-bullet-opacity: 1; --swiper-pagination-bullet-horizontal-gap: 4px; --swiper-pagination-bullet-vertical-gap: 6px; */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 10px; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-vertical > .swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Progress */ .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size) / 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev.swiper-button-hidden, .swiper-button-next.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none; } .swiper-navigation-disabled .swiper-button-prev, .swiper-navigation-disabled .swiper-button-next { display: none !important; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: 'next'; } .swiper-button-lock { display: none; } /** * Profound Grid * * Built in Sass (SCSS) this responsive/adaptive grid supports both fixed and fluid layouts, * relative and fixed gutters, as well as your choice of semantic markup or generic '.grid-x' classes. * * The biggest difference to other grid systems is the use of negative margins for column * placements, avoiding the subpixel rounding issues that usually break/uglify fluid layouts * in some browsers. * * Nested columns are supported too, without having to reset the grid on each level. * * Credits/Inspiration: * ------------------- * Semantic Grid: http://www.semantic.gs * Susy: http://susy.oddbird.net * Negative Grid: http://chrisplaneta.com/freebies/negativegrid-fluid-css-grid-by-chris-planeta/ * * @author Profound Creative Studio * @url http://www.profoundgrid.com * @url http://www.weareprofound.com */ /** * Clearfix */ /** * Legacy Clearfix */ /** * Establish the grid-containing element. */ /** * Align an element to the grid. */ /** * Apply to any column to make it the last one of the current row. */ /* grid ========================================================================== */ .row { width: 976px; margin: 0 0px; } .col-1 { float: left; margin-right: -100%; width: 52px; } .col-2 { float: left; margin-right: -100%; width: 136px; } .col-3 { float: left; margin-right: -100%; width: 220px; } .col-4 { float: left; margin-right: -100%; width: 304px; } .col-5 { float: left; margin-right: -100%; width: 388px; } .col-6 { float: left; margin-right: -100%; width: 472px; } .col-7 { float: left; margin-right: -100%; width: 556px; } .col-8 { float: left; margin-right: -100%; width: 640px; } .col-9 { float: left; margin-right: -100%; width: 724px; } .col-10 { float: left; margin-right: -100%; width: 808px; } .col-11 { float: left; margin-right: -100%; width: 892px; } .col-12 { float: left; margin-right: -100%; width: 976px; } .col-offset-0 { margin-left: 0px; } .col-offset-1 { margin-left: 84px; } .col-offset-2 { margin-left: 168px; } .col-offset-3 { margin-left: 252px; } .col-offset-4 { margin-left: 336px; } .col-offset-5 { margin-left: 420px; } .col-offset-6 { margin-left: 504px; } .col-offset-7 { margin-left: 588px; } .col-offset-8 { margin-left: 672px; } .col-offset-9 { margin-left: 756px; } .col-offset-10 { margin-left: 840px; } .col-offset-11 { margin-left: 924px; } [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } .animated-transition-in-setup { display: none; } .ngi-inspector { color: white; } * { -webkit-backface-visibility: hidden; box-sizing: border-box; } *:focus { outline: 0; } html { width: 100vw; overflow-x: hidden; } body { background: url("../../shared/images/backgrounds/background-default.jpg?v=20240109145540") no-repeat center top #f5f7ff; background-attachment: fixed; background-color: white; color: #5e63bc; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .body-wrap { position: relative; z-index: 1; min-height: 100vh; min-width: 1024px; overflow: hidden; overflow-anchor: none; } .video-wrapper { position: fixed; bottom: 0; right: 0; width: 100%; height: 100%; z-index: -1; } .video-bg { position: relative; width: 100%; height: 100%; } .video-bg .video-bg-video { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 0; } .ui-view-header { position: absolute; height: 100px; top: 0; left: 0; width: 100%; z-index: 4000; } .ui-view-header header { text-align: center; } .ui-view-main { position: relative; margin-top: 0 !important; left: 0; width: 100%; min-height: 100vh; overflow: hidden; padding-bottom: 70px; } .container { text-align: center; width: 976px; margin: 0 auto; padding-top: 120px; } .container.no-padding { padding-top: 0; } nav { position: relative; z-index: 10; } #loading-bar .bar { background: #f8bb81; } h1.loading-icon { font-size: 24px; margin: 150px 0 16px; } .page-section { min-height: 100vh; height: auto; position: relative; z-index: 1; padding-bottom: 0; margin-top: 0; overflow: hidden; } .row { margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; } .row.relative { position: relative; } .col { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul { list-style: none; } .hide { display: none; } .visually-hidden { visibility: hidden; display: none; } .animationHide { display: none; } .clear { clear: both; } .clear-flex { flex-basis: 100%; height: 0; } .hidden { overflow: hidden; } .float-right { float: right; } .float-left { float: left; } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } .position-relative { position: relative; } .mb-4 { margin-bottom: 1.5rem; } .mb-5 { margin-bottom: 3rem; } .mt-4 { margin-top: 1.5rem; } .mt-5 { margin-top: 3rem; } .mimicked-active { margin-top: 40px; } .mimicked-active-bar { position: fixed; width: 100vw; height: 40px; left: 0; top: 0; background: #f8bb81; color: white; line-height: 40px; vertical-align: middle; text-align: center; z-index: 9999; display: flex; align-items: center; vertical-align: middle; justify-content: center; } .mimicked-active-bar h4 { color: white; line-height: 36px; display: inline-block; } .mimicked-active-bar h4 span { padding-right: 6px; padding-top: 3px; } .mimicked-active-bar.ghost { background: #6d8df0; } .mimicked-active-bar .btn-default { margin-left: 24px; } .mimicked-active-bar .btn-default span i { padding: 0 6px; } /* ====== headings ===== */ h1 { color: #5e63bc; font-size: 40px; line-height: 40px; text-transform: uppercase; margin: 0; } h2 { color: #5e63bc; text-transform: uppercase; margin: 0; font-size: 24px; line-height: 24px; } h2 span { display: inline-block; } h3 { color: #6d8df0; text-transform: uppercase; margin: 0; padding: 0; font-size: 21px; line-height: 21px; } h4 { color: #5e63bc; text-transform: uppercase; margin: 0; padding: 0; font-size: 18px; line-height: 18px; margin: 0; } p { font-size: 18px; line-height: 21px; } .markdown { font-size: 18px; line-height: 21px; color: #5e63bc; text-align: left; } .markdown p { font-size: 18px; line-height: 21px; margin: 1em 0; } .markdown h3 { color: #6d8df0; text-transform: uppercase; font-size: 18px; line-height: 18px; margin: 16px 0 4px 0; } .markdown h3 i, .markdown h3 em, .markdown h3 b, .markdown h3 strong { font-weight: normal; font-style: normal !important; } .markdown a { color: #6d8df0; text-decoration: underline; word-wrap: break-word; } .markdown ul, .markdown ol { list-style: disc; margin-left: 20px; } .markdown ul li .btn-txt, .markdown ol li .btn-txt { display: inline-block; float: none; } .markdown ul { list-style-type: disc; } .markdown ol { list-style-type: decimal; } .markdown pre, .markdown code, .markdown kbd, .markdown samp { font-size: 18px; line-height: 21px; } .screen { color: #f8bb81; } .screen h3, .screen p { color: #f8bb81; } .btn-detail.left { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -506px -1055px; width: 38px; height: 36px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-detail.left { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-detail.right { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -468px -1055px; width: 38px; height: 36px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-detail.right { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-detail.open { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -430px -1055px; width: 38px; height: 36px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-detail.open { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-detail.small.left { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1072px -804px; width: 25px; height: 24px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-detail.small.left { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-detail.small.right { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1047px -804px; width: 25px; height: 24px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-detail.small.right { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-detail.small.open { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1022px -804px; width: 25px; height: 24px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-detail.small.open { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .avatar-nav .btn-hide { display: none; } .btn-default { display: inline-block; width: auto; height: 36px; padding: 0 16px; font-size: 21px; line-height: 36px; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; border: 0; } .btn-default span { display: inline-block; } .btn-default.small { height: 25px; font-size: 15px; line-height: 25px; } .btn-default.large { height: 42px; font-size: 24px; line-height: 42px; padding: 0 20px; } .btn-default[class^="icon-"], .btn-default[class*=" icon-"], .btn-default[data-icon] { position: relative; } .btn-default[class^="icon-"]:before, .btn-default[class*=" icon-"]:before, .btn-default[data-icon]:before { display: inline-block; font-size: 18px; vertical-align: middle; position: relative; top: -2px; } .btn-default[class^="icon-"] span, .btn-default[class*=" icon-"] span, .btn-default[data-icon] span { padding-left: 12px; } .btn-default[class^="icon-"].small:before, .btn-default[class*=" icon-"].small:before, .btn-default[data-icon].small:before { display: inline-block; font-size: 15px; top: -1px; } .btn-default[class^="icon-"].small span, .btn-default[class*=" icon-"].small span, .btn-default[data-icon].small span { padding-left: 8px; } .btn-emoticon { display: inline-block; width: auto; height: 25px; padding: 0 6px; font-size: 15px; line-height: 25px; background: #5e63bc; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; border: 0; } .btn-emoticon:hover { background: #3c4191; } .btn-emoticon span { display: inline-block; padding: 0 4px 0 6px; } .btn-emoticon[class^="icon-emo"], .btn-emoticon[class*=" icon-emo"], .btn-emoticon[data-icon-emo] { position: relative; } .btn-emoticon[class^="icon-emo"]:before, .btn-emoticon[class*=" icon-emo"]:before, .btn-emoticon[data-icon-emo]:before { display: inline-block; position: relative; vertical-align: middle; top: -2px; width: 22px; height: 22px; } .btn-emoticon.icon { background: transparent; padding: 0 2px; } .btn-emoticon.icon:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .btn-grade { display: inline-block; width: auto; height: 25px; margin-top: 10px; padding: 0 48px 0 16px; font-size: 15px; line-height: 25px; text-align: left; text-decoration: none; text-transform: uppercase; cursor: pointer; border: 0; } .btn-grade span { display: inline-block; height: 25px; overflow: hidden; } .btn-grade[class^="icon-emo"], .btn-grade[class*=" icon-emo"], .btn-grade[data-icon-emo] { position: relative; } .btn-grade[class^="icon-emo"]:before, .btn-grade[class*=" icon-emo"]:before, .btn-grade[data-icon-emo]:before { display: inline-block; position: absolute; vertical-align: middle; width: 32px; height: 32px; top: -10px; right: 8px; } .btn-txt { font-size: 13px; line-height: 18px; display: inline-block; text-transform: uppercase; color: #5e63bc; cursor: pointer; position: relative; background: transparent; border: 0; text-decoration: underline; } .btn-txt:hover { color: #f08978; } .btn-txt.btn-back-practical { position: absolute; } .btn-previous { border: 0; cursor: pointer; text-indent: -9999px; font-size: 0; background: transparent; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -322px -1098px; width: 38px; height: 40px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-previous { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-previous:hover { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -284px -1098px; width: 38px; height: 40px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-previous:hover { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-previous.small { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1095px -967px; width: 25px; height: 26px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-previous.small { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-previous.small:hover { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1070px -967px; width: 25px; height: 26px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-previous.small:hover { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-previous.large { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -416px -898px; width: 56px; height: 56px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-previous.large { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-previous.large:hover { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -360px -898px; width: 56px; height: 56px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-previous.large:hover { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-previous.secondary { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -967px -507px; width: 50px; height: 52px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-previous.secondary { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-previous.secondary:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .btn-next { border: 0; cursor: pointer; text-indent: -9999px; font-size: 0; background: transparent; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -246px -1098px; width: 38px; height: 40px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-next { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-next:hover { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -208px -1098px; width: 38px; height: 40px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-next:hover { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-next.small { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -597px -303px; width: 25px; height: 26px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-next.small { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-next.small:hover { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -597px -277px; width: 25px; height: 26px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-next.small:hover { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-next.large { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -304px -898px; width: 56px; height: 56px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-next.large { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-next.large:hover { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -556px -458px; width: 56px; height: 56px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-next.large:hover { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-next.secondary { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -967px -455px; width: 50px; height: 52px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-next.secondary { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-next.secondary:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .btn-delete-file { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1002px -359px; width: 15px; height: 15px; background-repeat: no-repeat; overflow: hidden; display: block; cursor: pointer; text-indent: -9999px; font-size: 0; border: 0; background-color: transparent; padding: 0; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-delete-file { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-delete-file:hover { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1117px -738px; width: 15px; height: 15px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-delete-file:hover { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-delete-item { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -600px -219px; width: 21px; height: 21px; background-repeat: no-repeat; overflow: hidden; display: block; cursor: pointer; text-indent: -9999px; font-size: 0; border: 0; background-color: transparent; padding: 0; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-delete-item { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-delete-item:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1096px -738px; width: 21px; height: 21px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-delete-item:hover { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-icon { display: inline-block; position: relative; cursor: pointer; background: transparent; border: 0; padding: 0; } .btn-icon .icon { height: 36px; width: 36px; font-size: 20px; line-height: 36px; text-decoration: none; text-transform: uppercase; display: block; margin: 0 auto; } .btn-icon .icon.flip-x:before { display: block; transform: scaleX(-1); } .btn-icon .icon.flip-y:before { display: block; transform: scaleY(-1); } .btn-icon .label { height: 26px; width: 56px; font-size: 11px; line-height: 13px; display: inline-block; padding: 2px 2px 0; vertical-align: top; text-align: center; text-transform: uppercase; overflow-wrap: anywhere; word-wrap: break-word; overflow: hidden; } .btn-icon.small .icon { height: 25px; width: 25px; font-size: 15px; line-height: 25px; } .btn-icon.large { display: flex; align-items: center; } .btn-icon.large .label { width: auto; height: auto; font-size: 24px; line-height: 24px; padding-left: 4px; } .btn-accordion { display: inline-block; position: relative; height: 36px; width: 100%; font-size: 20px; line-height: 36px; text-decoration: none; text-transform: uppercase; cursor: pointer; background: transparent; border: 0; box-shadow: 1px 3px 0 0 rgba(0, 0, 0, 0.3); padding: 0; background: #6d8df0; color: #5e63bc; } .btn-accordion span { display: block; font-size: 20px; color: #5e63bc; } .btn-accordion span::after { content: ''; } .btn-accordion:hover { background: white; color: #6d8df0; } .btn-accordion:hover span { color: #6d8df0; } .btn-accordion.minus span::after, .btn-accordion.plus span::after { content: ''; position: absolute; right: 8px; top: 8px; } .btn-accordion.minus span::after { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -534px -331px; width: 21px; height: 21px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-accordion.minus span::after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-accordion.minus:hover span::after { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -600px -240px; width: 21px; height: 21px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-accordion.minus:hover span::after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-accordion.plus span::after { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -576px -331px; width: 21px; height: 21px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-accordion.plus span::after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-accordion.plus:hover span::after { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -555px -331px; width: 21px; height: 21px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-accordion.plus:hover span::after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-download-pdf { font-size: 13px; line-height: 18px; display: block; text-transform: uppercase; color: #5e63bc; cursor: pointer; } .btn-download-pdf:before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -764px -1012px; width: 30px; height: 28px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; margin: -5px 0 0 -36px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-download-pdf:before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-download-pdf:hover { color: #f08978; } .btn-download-file { display: inline-block; font-size: 15px; line-height: 18px; text-transform: uppercase; color: #5e63bc; cursor: pointer; margin: 8px 0 8px 36px; } .btn-download-file:before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1232px -801px; width: 20px; height: 20px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; margin: -1px 0 0 -36px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-download-file:before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-download-file:hover { color: #f08978; } .btn-arrow { border: 0; cursor: pointer; text-indent: -9999px; font-size: 0; background: transparent; display: inline-block; } .btn-arrow.right { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -506px -1055px; width: 38px; height: 36px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-arrow.right { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-arrow.down { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -430px -1055px; width: 38px; height: 36px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-arrow.down { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-arrow.left { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -468px -1055px; width: 38px; height: 36px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-arrow.left { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-url { color: #5e63bc; text-decoration: underline; } .btn-url:hover { color: #6d8df0; } .btn-badge { position: relative; height: 60px; display: inline-block; } .btn-badge::before { content: ''; width: 60px; height: 60px; position: relative; overflow: hidden; display: block; float: left; border-radius: 100%; } .btn-badge .badge-icon { position: absolute; z-index: 10; } .btn-badge .badge-info-icon { position: absolute; top: 17px; left: 44px; z-index: 10; } .btn-badge .btn-body { width: calc(100% - 60px + 6px); height: 36px; overflow: hidden; display: block; float: left; margin-top: 12px; margin-left: -6px; padding: 0 24px; } .btn-badge .btn-body span { display: inline-block; text-transform: uppercase; } .btn-badge:hover { cursor: pointer; } .btn-badge.active:hover { pointer-events: none; } .particles-animation-container { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .particles-animation-container .particle { width: 0; height: 0; position: absolute; top: 50%; left: 50%; content: url("../images/general/vector/icon-correct-drag.svg?v=20240109145540"); } .particles-animation-container .particle:nth-child(1) { width: 14px; height: 14px; left: 40%; top: 90%; transform: translate(-50%, -50%); animation: anim1 0.5s infinite linear; animation-delay: 2s; opacity: 0; } @keyframes anim1 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(2) { width: 32px; height: 32px; left: 10%; top: 20%; transform: translate(-50%, -50%); animation: anim2 0.5s infinite linear; animation-delay: 1.6s; opacity: 0; } @keyframes anim2 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(3) { width: 16px; height: 16px; left: 80%; top: 20%; transform: translate(-50%, -50%); animation: anim3 0.5s infinite linear; animation-delay: 0.8s; opacity: 0; } @keyframes anim3 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(4) { width: 16px; height: 16px; left: 10%; top: 80%; transform: translate(-50%, -50%); animation: anim4 0.5s infinite linear; animation-delay: 0.8s; opacity: 0; } @keyframes anim4 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(5) { width: 18px; height: 18px; left: 90%; top: 90%; transform: translate(-50%, -50%); animation: anim5 0.5s infinite linear; animation-delay: 0.8s; opacity: 0; } @keyframes anim5 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(6) { width: 18px; height: 18px; left: 20%; top: 30%; transform: translate(-50%, -50%); animation: anim6 0.5s infinite linear; animation-delay: 0.8s; opacity: 0; } @keyframes anim6 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(7) { width: 24px; height: 24px; left: 100%; top: 20%; transform: translate(-50%, -50%); animation: anim7 0.5s infinite linear; animation-delay: 0.8s; opacity: 0; } @keyframes anim7 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(8) { width: 48px; height: 48px; left: 60%; top: 100%; transform: translate(-50%, -50%); animation: anim8 0.5s infinite linear; animation-delay: 0.4s; opacity: 0; } @keyframes anim8 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(9) { width: 18px; height: 18px; left: 100%; top: 40%; transform: translate(-50%, -50%); animation: anim9 0.5s infinite linear; animation-delay: 1.6s; opacity: 0; } @keyframes anim9 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(10) { width: 24px; height: 24px; left: 90%; top: 80%; transform: translate(-50%, -50%); animation: anim10 0.5s infinite linear; animation-delay: 1.2s; opacity: 0; } @keyframes anim10 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(11) { width: 24px; height: 24px; left: 90%; top: 30%; transform: translate(-50%, -50%); animation: anim11 0.5s infinite linear; animation-delay: 0.4s; opacity: 0; } @keyframes anim11 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(12) { width: 46px; height: 46px; left: 60%; top: 80%; transform: translate(-50%, -50%); animation: anim12 0.5s infinite linear; animation-delay: 0.4s; opacity: 0; } @keyframes anim12 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(13) { width: 42px; height: 42px; left: 40%; top: 40%; transform: translate(-50%, -50%); animation: anim13 0.5s infinite linear; animation-delay: 2s; opacity: 0; } @keyframes anim13 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(14) { width: 44px; height: 44px; left: 100%; top: 20%; transform: translate(-50%, -50%); animation: anim14 0.5s infinite linear; animation-delay: 1.6s; opacity: 0; } @keyframes anim14 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(15) { width: 28px; height: 28px; left: 60%; top: 20%; transform: translate(-50%, -50%); animation: anim15 0.5s infinite linear; animation-delay: 2s; opacity: 0; } @keyframes anim15 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(16) { width: 32px; height: 32px; left: 30%; top: 30%; transform: translate(-50%, -50%); animation: anim16 0.5s infinite linear; animation-delay: 0.8s; opacity: 0; } @keyframes anim16 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .status-indicator { display: flex; justify-content: center; padding: 0 8px 0 8px; width: fit-content; } .status-indicator .indicator-bullet { width: 24px; height: 24px; clip-path: circle(50% at 50%); position: relative; margin: 6px 4px; } .status-indicator .indicator-bullet .icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .status-indicator .indicator-bullet .icon-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100px; z-index: -1; } .status-indicator .indicator-bullet.correct .icon { content: url("../../shared/images/vector/status-indicator/correct-bullet.svg?v=20240109145540"); } .status-indicator .indicator-bullet.incorrect .icon { content: url("../../shared/images/vector/status-indicator/incorrect-bullet.svg?v=20240109145540"); } .question-text-block .container-box { height: 80px; margin: 10px 0; } .draggable-block { display: flex; } .draggable-block .drag-list { width: 100%; cursor: grab; } .draggable-block .drag-list.cdk-drop-list-dragging { cursor: grabbing; } .draggable-block .drag-list.cdk-drop-list-dragging .cdk-drag { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } .draggable-block .drag-list.cdk-drop-list-dragging .draggable-strip:not(.cdk-drag-placeholder) { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); -webkit-transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } .draggable-block .drag-list .cdk-drag-animating { transition: transform 300ms cubic-bezier(0, 0, 0.2, 1); } .draggable-block .list-numbers { display: flex; flex-direction: column; justify-content: space-around; padding: 0 10px 0 0; } .draggable-block .list-numbers .list-number { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -350px -1055px; width: 42px; height: 37px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-flex; align-items: center; justify-content: center; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .draggable-block .list-numbers .list-number { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .draggable-block .list-numbers .list-number span { display: flex; justify-content: center; align-items: center; } .draggable-strip { position: relative; margin: 10px 0 10px 0; display: inline-flex; width: 100%; align-items: center; } .draggable-strip.incorrect .particles-animation-container { display: none; } .draggable-strip.correct .particles-animation-container { display: block; } .draggable-strip.default .particles-animation-container { display: none; } .draggable-strip .drag-icon { position: relative; width: 21px; height: 21px; margin: 0 0 0 10px; z-index: 1; flex-shrink: 0; } .draggable-strip .drag-icon:before, .draggable-strip .drag-icon:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; -webkit-mask: url("../images/general/vector/icon-drag.svg?v=20240109145540"); mask: url("../images/general/vector/icon-drag.svg?v=20240109145540"); z-index: 1; } .draggable-strip .drag-icon:before { top: -1px; left: 0; } .draggable-strip .drag-icon:after { top: 0; left: 0; } .draggable-strip .strip-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: 0.3s; } .draggable-strip.cdk-drag-placeholder { box-sizing: border-box; } .draggable-strip.cdk-drag-placeholder .drag-icon { display: none; } .draggable-strip.cdk-drag-placeholder .resizable-textbox { display: none; } .draggable-strip.cdk-drag-placeholder .particles-animation-container { display: none; } .draggable-strip.cdk-drag-preview { box-sizing: border-box; box-shadow: 0 5px 5px -3px rgba(255, 255, 255, 0.5), 0 8px 10px 1px rgba(255, 255, 255, 0.2), 0 3px 14px 2px rgba(255, 255, 255, 0.2); opacity: 1; transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); -webkit-transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } .draggable-strip.cdk-drag-preview .particles-animation-container { display: none; } .draggable-strip .container-box { height: 43px; width: 100%; } .draggable-strip .container-box.post-process { justify-content: center; align-items: center; display: flex; } .draggable-strip .container-box .resizable-textbox { text-align: center; width: 100%; z-index: 1; } .draggable-strip .particles-animation-container { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; display: none; } .cdk-drag-animating { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); -webkit-transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } /*========= tab block =========*/ .nav-tabs { display: block; list-style: none; margin: 0; overflow: hidden; } .nav-tabs .nav-item { float: left; margin-bottom: -1px; margin-right: 8px; } .nav-tabs .nav-item .nav-link { display: block; padding: 8px 16px; border: 1px solid transparent; cursor: pointer; position: relative; background: rgba(94, 99, 188, 0.2); text-transform: uppercase; } .nav-tabs .nav-item .nav-link:hover { background: rgba(94, 99, 188, 0.5); } .nav-tabs .nav-item .nav-link.active { color: #5e63bc; background-color: transparent; border-color: #f8bb81 #f8bb81 #f8bb81; cursor: default; } .nav-tabs .nav-item .nav-link.active:before, .nav-tabs .nav-item .nav-link.active:after { content: ''; height: 1px; background-color: #f8bb81; position: absolute; top: 33px; width: 1000px; z-index: 1000; } .nav-tabs .nav-item .nav-link.active:before { left: -1000px; } .nav-tabs .nav-item .nav-link.active:after { right: -1000px; } .tab-content .tab-pane { display: none; border-right: 1px solid #f8bb81; border-bottom: 1px solid #f8bb81; border-left: 1px solid #f8bb81; overflow: hidden; padding: 16px; } .tab-content .tab-pane.active { display: block; } /*======= end tab block =======*/ .pulse-container { --pulse-width: 20px; --border-radius: 5px; position: relative; display: inline-block; } .pulse-container .pulse-block { z-index: -1; position: absolute; content: ''; display: block; width: 100%; height: 100%; left: 50%; top: 50%; border-radius: var(--border-radius); transform: translate3d(-50%, -50%, 0); animation: pulse-border 1500ms ease-out infinite; } @keyframes pulse-border { 0% { width: 100%; height: 100%; opacity: 1; } 100% { width: calc(100% + var(--pulse-width)); height: calc(100% + var(--pulse-width)); opacity: 0; } } .graph-container { padding: 10px; background-color: rgba(245, 247, 255, 0.5); display: inline-flex; width: 400px; } .graph-container .trendline { overflow: visible; border-left: 2px solid #5e63bc; border-bottom: 1px solid transparent; border-top: 1px solid transparent; border-right: 1px solid transparent; } .graph-container .trendline .graphline { fill: none; stroke: #6d8df0; stroke-width: 2px; } .graph-container .trendline .zeroline { fill: none; stroke: #5e63bc; stroke-width: 2px; } .graph-container .trendline .linepoint { r: 3px; fill: #f5f7ff; stroke: #6d8df0; stroke-width: 2px; } .meter-block { position: relative; display: inline-block; vertical-align: top; width: 100%; } .meter-block.no-value .meter-gauge .needle .needle-indicator { content: url("../../shared/images/meter-gauge/retina/gauge-needle@2x.png"); } .meter-block.no-value .meter-gauge .needle .pivot { display: block; } .meter-block.no-value .meter-gauge .values .total { display: none; } .meter-block.no-needle .meter-gauge .needle { display: none; } .meter-block.no-background .meter-gauge .meter-scale:before { display: none; } .meter-block.no-background .meter-gauge .meter-scale:after { display: none; } .meter-block.no-range-values .meter-gauge .values .lowest, .meter-block.no-range-values .meter-gauge .values .highest { display: none; } .meter-block.no-target .meter-gauge .pointer { display: none; } .meter-block.mini { width: 150px; font-size: 13px; line-height: 13px; } .meter-block.mini .meter-gauge .values .total { line-height: 24px; font-size: 24px; } .meter-block.small { width: 200px; font-size: 15px; line-height: 15px; } .meter-block.small .meter-gauge .values .total { line-height: 30px; font-size: 30px; } .meter-block.medium { width: 270px; font-size: 18px; line-height: 18px; } .meter-block.medium .meter-gauge .values .total { line-height: 45px; font-size: 45px; } .meter-block.large { width: 370px; font-size: 24px; line-height: 24px; } .meter-block.large .meter-gauge .values .total { line-height: 58px; font-size: 58px; } .meter-block .sizing-box { margin: 15% 12.965%; } .meter-block .meter-gauge { position: relative; width: 100%; } .meter-block .meter-gauge .meter-scale { margin: 0; } .meter-block .meter-gauge .meter-scale:before { content: ''; position: absolute; display: block; left: 50%; top: 50%; transform: translate(-50%, -50%); background-image: url("../../shared/images/meter-gauge/retina/gauge-overlay@2x.png"); width: 135%; height: 180%; background-size: cover; z-index: 10; } .meter-block .meter-gauge .meter-bars { position: Relative; height: fit-content; overflow: hidden; } .meter-block .meter-gauge .meter-bars .meter-bar { width: 99.9%; padding-top: 50%; background-color: #6d8df0; transform: rotate(0deg); transform-origin: 50% 100%; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='46' stroke='black' stroke-width='8' fill='none' /%3E%3C/svg%3E"); -webkit-mask-size: cover; position: absolute; top: 0; } .meter-block .meter-gauge .meter-bars .meter-bar:nth-child(1) { position: relative; background-color: rgba(94, 99, 188, 0.5); } .meter-block .meter-gauge .meter-bars .meter-bar:nth-child(2) { background-color: #6d8df0; } .meter-block .meter-gauge .meter-bars .meter-bar:nth-child(3) { background-color: #f8bb81; } .meter-block .meter-gauge .meter-bars .meter-bar:nth-child(4) { background-color: #f08978; } .meter-block .meter-gauge .meter-bars .meter-bar.style-1 { background-color: #6d8df0; } .meter-block .meter-gauge .meter-bars .meter-bar.style-2 { background-color: #f8bb81; } .meter-block .meter-gauge .meter-bars .meter-bar.style-3 { background-color: #f08978; } .meter-block .meter-gauge .pointer { transform-origin: 50% 100%; width: 100%; height: 100%; position: absolute; top: 0; transform: rotate(0deg); z-index: 20; } .meter-block .meter-gauge .pointer .indicator { width: 1%; height: 25%; position: absolute; background-color: #f5f7ff; top: 8%; left: 50%; transform: translate(-50%, -50%); } .meter-block .meter-gauge .pointer .value { position: absolute; left: 50%; top: -5%; display: block; transform: translate(-50%, -100%); } .meter-block .meter-gauge .needle { z-index: 30; transform-origin: 50% 100%; width: 100%; height: 100%; position: absolute; top: 0; transform: rotate(0deg); } .meter-block .meter-gauge .needle .needle-indicator { content: url("../../shared/images/meter-gauge/retina/gauge-needle-short@2x.png"); height: 100%; left: 50%; top: 0; position: absolute; transform: translate(-50%, 0); } .meter-block .meter-gauge .needle .pivot { content: url("../../shared/images/meter-gauge/retina/pivot-point@2x.png"); position: absolute; border-radius: 100%; width: 8%; left: 50%; top: 100%; transform: translate(-50%, -50%); display: none; } .meter-block .meter-gauge .values { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 40; } .meter-block .meter-gauge .values .lowest, .meter-block .meter-gauge .values .highest { position: absolute; display: block; top: 104%; opacity: 0.5; } .meter-block .meter-gauge .values .lowest { left: 4%; transform: translate(-50%, 0); } .meter-block .meter-gauge .values .highest { right: 4%; transform: translate(50%, 0); } .meter-block .meter-gauge .values .total { font-size: 45px; line-height: 45px; left: 50%; transform: translate(-50%, 0); position: absolute; bottom: 0; display: block; } .d-flex { display: flex; align-items: center; } .justify-content-center { justify-content: center; } .justify-content-around { justify-content: space-around; } .justify-content-between { justify-content: space-between; } .justify-content-evenly { justify-content: space-evenly; } .video-container { margin-top: 25px; position: relative; margin-bottom: 35px; } .video-container.embedded { width: 100%; height: 0; padding-bottom: 56.25%; } .video-container iframe { border: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .video-container video { max-height: 440px; width: 100%; } .error { color: #f75b5f; } .pie { border-radius: 100%; background: rgba(94, 99, 188, 0.2); height: calc(var(--size, 200) * 1px); overflow: hidden; position: relative; width: calc(var(--size, 200) * 1px); text-align: initial; } .pie.large { width: 200px; height: 200px; } .pie.large .pie_value span { font-size: 30px; } .pie.medium { width: 150px; height: 150px; } .pie.medium .pie_value span { font-size: 21px; } .pie.small { width: 100px; height: 100px; } .pie.small .pie_value span { font-size: 15px; } .pie_value { width: 40%; height: 40%; background-color: #f5f7ff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100%; z-index: 10; } .pie_value span { top: 50%; left: 50%; position: absolute; text-align: center; transform: translate(-50%, -50%); } .pie_segment { --a: calc(var(--over50, 0) * -100%); --b: calc((1 + var(--over50, 0)) * 100%); --degrees: calc((var(--offset, 0) / 100) * 360); -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b)); clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b)); height: 100%; position: absolute; -webkit-transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg)); transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg)); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; width: 100%; z-index: calc(1 + var(--over50)); } .pie_segment:before, .pie_segment:after { background: var(--bg, #e74c3c); content: ''; height: 100%; position: absolute; width: 100%; } .pie_segment:before { --degrees: calc((var(--value, 45) / 100) * 360); -webkit-transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg)); transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg)); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } .pie_segment:after { opacity: var(--over50, 0); } /* ====== start progression steps ===== */ .progression-steps { text-align: center; } .progression-steps li { width: 35px; height: 35px; text-align: center; line-height: 31px; font-size: 24px; border: 2px solid #6d8df0; border-radius: 100px; display: inline-block; margin: 0 4px 8px 4px; } .progression-steps li.completed { border-color: rgba(109, 141, 240, 0.5); background-color: rgba(109, 141, 240, 0.5); } .progression-steps li.completed:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; cursor: pointer; } .progression-steps li.current { color: white; border-color: #f08978; background-color: #f08978; } /* ====== end progression steps ===== */ /* ====== start progress step block ===== */ .progress-step-block { display: flex; align-items: center; justify-content: center; } .progress-step-block .step { position: relative; width: 24px; height: 24px; margin: 0 4px; border-radius: 100px; background-color: transparent; flex-shrink: 0; } .progress-step-block .step div { display: block; position: absolute; width: 80%; height: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100px; } .progress-step-block .step.active div { filter: invert(1); } .progress-step-block .step.s-1 div { content: url("../../shared/images/vector/progress-steps/step-1.svg?v=20240109145540"); } .progress-step-block .step.s-1.active { background-color: red; } .progress-step-block .step.s-2 div { content: url("../../shared/images/vector/progress-steps/step-2.svg?v=20240109145540"); } .progress-step-block .step.s-2.active { background-color: #ff6d0a; } .progress-step-block .step.s-3 div { content: url("../../shared/images/vector/progress-steps/step-3.svg?v=20240109145540"); } .progress-step-block .step.s-3.active { background-color: #ffd204; } .progress-step-block .step.s-4 div { content: url("../../shared/images/vector/progress-steps/step-4.svg?v=20240109145540"); } .progress-step-block .step.s-4.active { background-color: #39c600; } .progress-step-block .step.s-5 div { content: url("../../shared/images/vector/progress-steps/step-5.svg?v=20240109145540"); } .progress-step-block .step.s-5.active { background-color: #007b31; } /* ====== end progress step block ===== */ /* ====== start tutorial container ===== */ .tutorial-container { position: absolute; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 90000; } .tutorial-container.open { display: block; } .tutorial-container::after { content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); position: fixed; z-index: -1; } .tutorial-container .tutorial-assistent { height: 50vh; max-height: 350px; position: fixed; width: 468px; bottom: 0; left: 10vw; } .tutorial-container .tutorial-assistent .assistent-avatar { background: url("../../shared/images/general/retina/assistent-animation@2x.gif?v=20240109145540") no-repeat center bottom; background-size: auto 100%; position: absolute; width: 100%; height: 100%; } .tutorial-container .tutorial-block { position: fixed; background-color: #f5f7ff; border-radius: 15px; border: 3px solid #f8bb81; bottom: 55vh; width: 468px; left: 10vw; box-shadow: 0 0 0 3px #f5f7ff; } .tutorial-container .tutorial-block::before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -556px -514px; width: 46px; height: 34px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; bottom: -34px; left: 50%; margin-left: -23px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .tutorial-container .tutorial-block::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } @media (min-height: 768px) { .tutorial-container .tutorial-block { bottom: 380px; } } .tutorial-container .tutorial-block .tutorial-content .content .markdown p { margin: 0 0 1em 0; } .tutorial-container .btn-close-tutorial { width: 20px; height: 20px; position: relative; margin: 5px 0px 3px calc(100% - 27px); cursor: pointer; } .tutorial-container .btn-close-tutorial:before, .tutorial-container .btn-close-tutorial:after { content: ''; width: 20px; height: 3px; position: absolute; display: block; background-color: #f8bb81; top: 42%; left: 2%; } .tutorial-container .btn-close-tutorial:before { transform: rotate(45deg); } .tutorial-container .btn-close-tutorial:after { transform: rotate(-45deg); } .tutorial-container .btn-close-tutorial:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } .tutorial-container .tutorial-content { margin: 8px 8px 8px 10px; max-height: calc(45vh - 70px); } .tutorial-container .tutorial-content .content { width: calc(100% - 8px); margin: 0 0 10px 0; } .tutorial-container .tutorial-content img { margin: 10px auto; max-width: 95%; max-height: 65vw; } .tutorial-container .custom-scroll-bars::-webkit-scrollbar-thumb { background-color: rgba(96, 108, 118, 0.5); border-radius: 10px; border: 1px solid rgba(109, 141, 240, 0.5); } .tutorial-container .custom-scroll-bars::-webkit-scrollbar-track { border-radius: 10px; background-color: rgba(96, 108, 118, 0.2); } .tutorial-assistent-toggle { background: url("../../shared/images/general/retina/assistent-toggle@2x.gif?v=20240109145540") no-repeat center bottom; background-size: 100%; position: fixed; width: 100px; height: 100px; right: -40px; top: 40px; -webkit-transform: rotate(-45deg) translatez(0); transform: rotate(-45deg) translatez(0); -webkit-transform-origin: 50% 51%; z-index: 10000; cursor: pointer; } .tutorial-assistent-toggle:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); opacity: 0.9; } /* ====== end tutorial container ===== */ /*======== scroll bars =========*/ .custom-scroll-bars { -webkit-overflow-scrolling: auto; overflow-y: auto; } .custom-scroll-bars::-webkit-scrollbar { -webkit-appearance: none; } .custom-scroll-bars::-webkit-scrollbar:vertical { width: 6px; } .custom-scroll-bars::-webkit-scrollbar:horizontal { height: 6px; } .custom-scroll-bars::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.5); border-radius: 10px; border: 1px solid #5e63bc; } .custom-scroll-bars::-webkit-scrollbar-track { border-radius: 10px; background-color: rgba(255, 255, 255, 0.2); } /*======== end scroll bars =========*/ .disabled { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; cursor: default; pointer-events: none !important; } .markdown .image, .markdown img { max-width: 100%; max-height: 600px; object-fit: contain; display: block; margin: auto; } /* ====== start logos ===== */ .logo-large { width: 304px; height: 150px; display: block; margin: 16px 0 0 0; position: relative; z-index: 1000; } .logo-large:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; cursor: pointer; } .logo-large img { width: 100%; height: 100%; object-fit: contain; } .logo-medium { width: 136px; height: 88px; display: block; margin: 16px 0 0; position: relative; z-index: 1000; } .logo-medium img { width: 100%; height: 100%; object-fit: contain; } /* ====== end logos ===== */ /* ===== start avatar ===== */ .avatar-container { position: relative; overflow: visible; } .avatar-container.x-large { width: 294px; height: 448px; } .avatar-container.x-large .avatar { width: 294px; height: 448px; } .avatar-container.large { width: 220px; height: 336px; overflow: visible; } .avatar-container.large .avatar { transform: scale(0.75, 0.75); -webkit-transform: scale(0.75, 0.75); width: 294px; height: 448px; display: block; position: absolute; top: -56px; left: -37px; } .avatar-container.medium { width: 136px; height: 204px; } .avatar-container.medium .avatar { transform: scale(0.5, 0.5); -webkit-transform: scale(0.5, 0.5); width: 294px; height: 448px; display: block; position: absolute; top: -132px; left: -79px; } .avatar-container.medium .multiplier { position: absolute; top: 132px; right: -12px; z-index: 100; font-size: 15px; line-height: 72px; text-align: center; } .avatar-container.small { width: 101px; height: 154px; } .avatar-container.small .avatar { transform: scale(0.35, 0.35); -webkit-transform: scale(0.35, 0.35); width: 294px; height: 448px; display: block; position: absolute; top: -148px; left: -96px; } .avatar-container.x-small { width: 72px; height: 110px; overflow: hidden; } .avatar-container.x-small .avatar { transform: scale(0.26, 0.26); -webkit-transform: scale(0.26, 0.26); width: 294px; height: 448px; display: block; position: absolute; top: -172px; left: -112px; } .avatar-container .avatar-link { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1000; cursor: pointer; } .avatar-container .avatar { overflow: hidden; position: relative; display: block; vertical-align: middle; text-align: center; } .avatar-container .avatar .flip img { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } .avatar-container .avatar img { top: 0; left: 0; position: absolute; } .flip img { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } /* ===== end avatar ===== */ /* ===== start avatar labels===== */ .player-info { overflow: hidden; } .player-info .labels { text-align: center; text-transform: uppercase; margin: 0; list-style: none; } .player-info .labels .subname { font-size: 18px; line-height: 18px; height: 18px; overflow: hidden; color: #f08978; } .player-info .labels .name { font-size: 15px; line-height: 15px; height: 15px; overflow: hidden; color: #5e63bc; margin-bottom: 6px; } .player-info .labels .time { font-size: 15px; color: #5e63bc; text-align: center; } .player-info .labels .time::before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1002px -327px; width: 20px; height: 16px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; margin: 0 7px; text-align: center; vertical-align: middle; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .player-info .labels .time::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .player-info .labels .date { color: #5e63bc; text-align: center; } .player-info .labels .score { color: #5e63bc; } .player-info .labels .score span { font-size: 13px; color: #6d8df0; text-transform: uppercase; } .player-info .labels .figures { color: #5e63bc; margin-top: 2px; text-align: right; padding: 0; overflow: hidden; white-space: nowrap; } .player-info .labels .figures span { font-size: 13px; color: #6d8df0; text-transform: uppercase; display: block; overflow: hidden; float: left; } .player-info .labels .rank { color: #5e63bc; display: block; float: left; text-align: left; } .player-info .labels .rank span { color: #6d8df0; display: inline; width: auto; padding: 0 4px 0 0; } .player-info.small .subname { height: 15px; font-size: 13px; line-height: 15px; } .player-info.small .name { height: 15px; font-size: 13px; line-height: 15px; } /* ===== end avatar labels===== */ /* ===== start default navbar ===== */ .nav-default { list-style: none; margin: 30px 0 0 0; overflow: hidden; } .nav-default li { margin: 0 0 0 32px; float: left; cursor: pointer; } .nav-default li:first-child { margin-left: 0; } .nav-default li.primary { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -912px -829px; width: 94px; height: 45px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .nav-default li.primary { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .nav-default li.primary > a { font-size: 20px; } .nav-default li.primary:hover { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1022px -759px; width: 94px; height: 45px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .nav-default li.primary:hover { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .nav-default li.primary:hover > a { color: #f08978; } .nav-default li.primary.active { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1022px -759px; width: 94px; height: 45px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .nav-default li.primary.active { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .nav-default li.primary.active > a { color: #f08978; } .nav-default li.primary a { height: 45px; display: block; color: #5e63bc; font-size: 15px; line-height: 45px; text-decoration: none; text-transform: uppercase; padding: 0 15px; } .nav-default li.secondary.active > a { color: #f08978; } .nav-default li.parentNav { color: #5e63bc; } .nav-default li.parentNav > a::after { content: ''; width: 94px; height: 55px; background: transparent; position: absolute; margin-left: -47px; top: 0; } .nav-default li.parentNav ul { width: auto; height: auto; display: none; background: none; border: 1px solid #f8bb81; position: absolute; margin: 6px 0 0 0; padding: 1px; list-style: none; } .nav-default li.parentNav ul li { float: none; margin: 0; } .nav-default li.parentNav ul li a { width: 100%; height: 22px; font-size: 15px; line-height: 22px; color: #5e63bc; text-align: center; background: rgba(255, 255, 255, 0.8); } .nav-default li.parentNav ul li a:hover { color: #f8bb81; } .nav-default li.parentNav ul:hover { display: block; } .nav-default li.parentNav:hover ul { display: block; } .nav-default li.parentNav:last-child ul { right: 0; } /* ===== end default navbar ===== */ /* ===== start modules navbar ===== */ .nav-modules { list-style: none; text-align: center; width: 100%; margin: 16px 0 0 0; } .nav-modules li { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1208px -937px; width: 43px; height: 44px; background-repeat: no-repeat; overflow: hidden; display: block; margin: 0 9px 0; display: inline-block; cursor: pointer; vertical-align: top; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .nav-modules li { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .nav-modules li > a { text-decoration: none; color: #5e63bc; } .nav-modules li > a .icon { font-size: 24px; line-height: 44px; width: 100%; display: block; } .nav-modules li > a .icon.icon-coopquiz, .nav-modules li > a .icon.icon-team { font-size: 15px; } .nav-modules li > a .icon.icon-post { font-size: 21px; } .nav-modules li > a .icon span { position: absolute; width: 100px; height: 24px; margin: 0 0 0 -29px; display: block; visibility: hidden; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; font-size: 11px; line-height: 15px; text-transform: uppercase; } .nav-modules li > a.active { color: #f8bb81; } .nav-modules li:hover { display: inline-block; } .nav-modules li:hover > a { color: #f8bb81; } .nav-modules li:hover > a .icon span { color: #5e63bc; visibility: visible; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } /* ===== end modules navbar ===== */ /* ===== start progress meter ===== */ .progress-gauge { width: 100px; height: 200px; margin: 0; position: relative; } .progress-gauge .progress-highlightbar { width: 9px; height: 200px; left: 50%; margin-left: -5px; position: absolute; background: rgba(94, 99, 188, 0.5); } .progress-gauge .progress-highlight { width: 9px; height: 0; position: absolute; background: #6d8df0; z-index: 200; display: block; bottom: 0; } .progress-gauge .pointer { width: 38px; height: 24px; position: absolute; text-align: left; margin: 0 0 -16px 16px; } .progress-gauge .pointer p { font-size: 18px; line-height: 24px; display: inline-block; color: #6d8df0; margin: 0; } .progress-gauge .progress-labels { width: 36px; height: 200px; position: absolute; left: 0; text-align: right; } .progress-gauge .progress-labels .label { color: rgba(94, 99, 188, 0.5); font-size: 13px; position: absolute; text-align: right; right: 0; display: block; } .progress-gauge .progress-labels .label.bottom { bottom: -3px; } .progress-gauge .progress-labels .label.top { top: -3px; } .progress-gauge.left-to-right, .progress-gauge.right-to-left { width: 304px; height: 50px; margin: 0; position: static; padding-top: 6px; } .progress-gauge.left-to-right .progress-highlightbar, .progress-gauge.right-to-left .progress-highlightbar { width: 304px; height: 9px; left: auto; margin-left: 0; } .progress-gauge.left-to-right .progress-highlightbar .pointer, .progress-gauge.right-to-left .progress-highlightbar .pointer { text-align: center; margin-top: -24px; } .progress-gauge.left-to-right .progress-highlight, .progress-gauge.right-to-left .progress-highlight { width: 0; height: 9px; } .progress-gauge.left-to-right .progress-labels, .progress-gauge.right-to-left .progress-labels { width: 304px; height: 20px; position: relative; top: 29px; } .progress-gauge.left-to-right .progress-labels .label, .progress-gauge.right-to-left .progress-labels .label { color: rgba(94, 99, 188, 0.5); font-size: 13px; position: absolute; right: auto; } .progress-gauge.left-to-right .progress-labels .label.left, .progress-gauge.right-to-left .progress-labels .label.left { left: 0; } .progress-gauge.left-to-right .progress-labels .label.right, .progress-gauge.right-to-left .progress-labels .label.right { right: 0; } .progress-gauge.left-to-right .pointer { margin-left: -19px; text-align: center; } .progress-gauge.right-to-left .progress-highlight { right: 0; } .progress-gauge.right-to-left .pointer { margin-right: -19px; text-align: center; } .progress-gauge.small { height: 100px; margin: 0; } .progress-gauge.small .progress-labels { height: 100px; } .progress-gauge.small .progress-highlightbar { height: 100px; } /* ===== end progress meter ===== */ /* ====== start switch level exam prologue ===== */ .switch-level { position: relative; padding-bottom: 10px; } .switch-level .btn-default { margin: 16px 16px 0; min-width: 70px; } .switch-level .btn-default.checked::before, .switch-level .btn-default.locked::before { content: ''; margin: 10px 6px 0 -6px; position: absolute; z-index: 10; } .switch-level .btn-default.checked span, .switch-level .btn-default.locked span { padding-left: 12px; } .switch-level .btn-default.checked::before { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1240px -854px; width: 12px; height: 18px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .switch-level .btn-default.checked::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .switch-level .btn-default.locked { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; cursor: default; pointer-events: none !important; } .switch-level .btn-default.locked::before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1118px -804px; width: 14px; height: 15px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .switch-level .btn-default.locked::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .switch-level .btn-default.selected { cursor: default; background: #6d8df0; } .switch-level .btn-default.selected:hover { background: #6d8df0; color: #5e63bc; } .switch-level .btn-default.btn-start { margin-top: 26px; width: auto; } /* ====== end switch level exam prologue ===== */ /* ====== start achievement list ===== */ .achievement-block { display: inline-block; width: 136px; } .achievement-block.locked { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; } .achievement-block .trophy { width: 66px; height: 66px; position: relative; margin: 0 auto 4px; } .achievement-block .trophy img { width: 66px; height: auto; } .achievement-block .trophy .counter { position: absolute; top: 2px; left: -17px; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -758px -541px; width: 41px; height: 38px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .achievement-block .trophy .counter { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .achievement-block .trophy .counter span { text-transform: uppercase; line-height: 35px; color: #f08978; display: block; } .achievement-block .achievement-info { width: 136px; margin: 0 0 0 0; text-transform: uppercase; text-align: center; padding-bottom: 20px; position: relative; } .achievement-block .achievement-info .title { font-size: 15px; line-height: 15px; color: #f08978; display: block; margin: 0 0 2px; } .achievement-block .achievement-info .description { font-size: 13px; line-height: 15px; color: #5e63bc; display: block; overflow: hidden; margin: 0 0 3px; width: 100%; } .achievement-block .achievement-info .points { width: 136px; font-size: 18px; line-height: 18px; color: #5e63bc; display: block; position: absolute; bottom: 0; } .achievement-block .achievement-info .points span { font-size: 12px; line-height: 12px; color: #6d8df0; } /* ====== end achievement list ===== */ /* ====== start controls / paging ===== */ .controls { width: 100%; position: relative; text-align: center; z-index: 10; } .controls p { display: inline-block; height: 40px; font-size: 24px; line-height: 42px; color: #5e63bc; padding: 0 16px; margin: 0; text-transform: uppercase; } .controls .btn-previous, .controls .btn-next { cursor: pointer; text-indent: -9999px; vertical-align: top; display: inline-block; } .controls.small { height: 26px; } .controls.small p { height: 26px; font-size: 18px; line-height: 28px; color: #6d8df0; padding: 0 16px; margin: 0; } /* ====== end controls / paging ===== */ /* ====== start skills badge ===== */ .badge-icon.badge-1.bronze { background: url("../../shared/images/badges/badge-1-bronze.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-1.silver { background: url("../../shared/images/badges/badge-1-silver.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-1.gold { background: url("../../shared/images/badges/badge-1-gold.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-1.diamond { background: url("../../shared/images/badges/badge-1-diamond.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-1.platinum { background: url("../../shared/images/badges/badge-1-platinum.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-1.inactive { background: url("../../shared/images/badges/badge-1-disabled.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-2.bronze { background: url("../../shared/images/badges/badge-2-bronze.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-2.silver { background: url("../../shared/images/badges/badge-2-silver.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-2.gold { background: url("../../shared/images/badges/badge-2-gold.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-2.diamond { background: url("../../shared/images/badges/badge-2-diamond.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-2.platinum { background: url("../../shared/images/badges/badge-2-platinum.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-2.inactive { background: url("../../shared/images/badges/badge-2-disabled.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-3.bronze { background: url("../../shared/images/badges/badge-3-bronze.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-3.silver { background: url("../../shared/images/badges/badge-3-silver.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-3.gold { background: url("../../shared/images/badges/badge-3-gold.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-3.diamond { background: url("../../shared/images/badges/badge-3-diamond.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-3.platinum { background: url("../../shared/images/badges/badge-3-platinum.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-3.inactive { background: url("../../shared/images/badges/badge-3-disabled.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-4.bronze { background: url("../../shared/images/badges/badge-4-bronze.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-4.silver { background: url("../../shared/images/badges/badge-4-silver.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-4.gold { background: url("../../shared/images/badges/badge-4-gold.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-4.diamond { background: url("../../shared/images/badges/badge-4-diamond.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-4.platinum { background: url("../../shared/images/badges/badge-4-platinum.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-4.inactive { background: url("../../shared/images/badges/badge-4-disabled.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-5.bronze { background: url("../../shared/images/badges/badge-5-bronze.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-5.silver { background: url("../../shared/images/badges/badge-5-silver.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-5.gold { background: url("../../shared/images/badges/badge-5-gold.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-5.diamond { background: url("../../shared/images/badges/badge-5-diamond.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-5.platinum { background: url("../../shared/images/badges/badge-5-platinum.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-5.inactive { background: url("../../shared/images/badges/badge-5-disabled.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-6.bronze { background: url("../../shared/images/badges/badge-6-bronze.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-6.silver { background: url("../../shared/images/badges/badge-6-silver.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-6.gold { background: url("../../shared/images/badges/badge-6-gold.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-6.diamond { background: url("../../shared/images/badges/badge-6-diamond.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-6.platinum { background: url("../../shared/images/badges/badge-6-platinum.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.badge-6.inactive { background: url("../../shared/images/badges/badge-6-disabled.png?v=20240109145540") 0 0/auto 100% no-repeat transparent; } .badge-icon.large { width: 140px; height: 140px; } .badge-icon.medium { width: 125px; height: 125px; } .badge-icon.small { width: 80px; height: 80px; } /* ====== end skills badge ===== */ /* ====== start salesup block ===== */ .sales-tool .sales-up-block { background: rgba(245, 247, 255, 0.5); overflow: hidden; padding: 8px; height: 60px; width: 304px; float: left; } .sales-tool .sales-up-block .sales { float: left; margin-top: 4px; } .sales-tool .sales-up-block .sales .sales-up { padding: 0 10px; margin: 0 4px; } .sales-tool .sales-up-block .sales .sales-down { text-transform: uppercase; margin-left: 2px; cursor: pointer; } .sales-tool .sales-up-block .sales .sales-down:hover { color: #f08978; } .sales-tool .sales-up-block .realisation { float: right; font-size: 24px; line-height: 24px; color: #5e63bc; } /* ====== end salesup block ===== */ /* ====== start carousel ===== */ ngb-carousel { width: inherit; height: inherit; } .carousel-inner { overflow: visible; height: 207px; } .carousel-item { display: flex !important; opacity: 0; visibility: hidden; transition: opacity 1.2s ease-in-out, visibility 1.2s; z-index: -1; position: absolute; } .carousel-item.active { opacity: 1; visibility: visible; z-index: 10; } .carousel-control-prev, .carousel-control-next { cursor: pointer; text-indent: -9999px; vertical-align: top; display: inline-block; z-index: 20; border: 0; cursor: pointer; font-size: 0; background: transparent; position: relative; z-index: 50; } .carousel-control-prev { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1095px -967px; width: 25px; height: 26px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; margin-right: 30px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .carousel-control-prev { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .carousel-control-prev:hover { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1070px -967px; width: 25px; height: 26px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .carousel-control-prev:hover { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .carousel-control-next { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -597px -303px; width: 25px; height: 26px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; margin-left: 30px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .carousel-control-next { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .carousel-control-next:hover { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -597px -277px; width: 25px; height: 26px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .carousel-control-next:hover { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .carousel-counter { height: 26px; font-size: 18px; line-height: 28px; color: #f8bb81; padding: 0 16px; margin: 0; position: absolute; width: 100%; bottom: 0; z-index: 20; } /* ====== end carousel ===== */ /* ====== start images swiper container ===== */ .swiper-container .swiper-button-prev { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1095px -967px; width: 25px; height: 26px; background-repeat: no-repeat; overflow: hidden; display: block; background-size: auto; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .swiper-container .swiper-button-prev { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .swiper-container .swiper-button-next { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -597px -303px; width: 25px; height: 26px; background-repeat: no-repeat; overflow: hidden; display: block; background-size: auto; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .swiper-container .swiper-button-next { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .swiper-container .swiper-button-prev:hover, .swiper-container .swiper-button-next:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .swiper-container .swiper-wrapper { align-items: center; } .swiper-container .media-item { margin: 0 auto; text-align: center; font-size: 0; line-height: 0; background: rgba(245, 247, 255, 0.5); border: none; } .swiper-container .media-item:hover { cursor: -moz-zoom-in; cursor: -webkit-zoom-in; cursor: zoom-in; } .swiper-container .media-item.default { display: flex; justify-content: center; max-height: 355px; overflow: hidden; position: relative; } .swiper-container .media-item.default::before { content: "\e022"; height: 40px; width: 40px; display: block; position: absolute; font-size: 40px; line-height: 40px; z-index: 999; color: #5e63bc; left: 50%; top: 50%; margin: -20px 0 0 -20px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .swiper-container .media-item.default:hover::before { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .swiper-container .media-item.default img { max-height: 355px; margin: 0 auto; position: relative; z-index: 1; object-fit: contain; } .swiper-container .slide-info { margin-top: 4px; text-align: center; line-height: 18px; } /* ====== end images swiper container ===== */ /* ===== start memberlist item ===== */ .item-count-block { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -802px -706px; width: 220px; height: 37px; background-repeat: no-repeat; overflow: hidden; display: block; position: relative; text-transform: uppercase; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .item-count-block { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .item-count-block span { display: block; position: absolute; color: #f8bb81; line-height: 33px; font-size: 12px; height: 33px; overflow: hidden; text-align: center; } .item-count-block .item-description { left: 8px; width: 172px; } .item-count-block .item-count { right: 6px; width: 30px; } .battle-item { position: relative; width: 136px; } .battle-item:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; cursor: pointer; } .battle-item.play .new-invite { position: absolute; margin: 28px 0 0 0; z-index: 900; } .battle-item.play .avatar-container .subname { font-size: 18px; line-height: 18px; height: 18px; } .battle-item.play .avatar-container .name { font-size: 11px; line-height: 15px; height: 15px; } .battle-item.empty .plusmark { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1132px -360px; width: 114px; height: 99px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; margin: 102px 0 0 11px; z-index: 100; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .battle-item.empty .plusmark { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .battle-item.coop.flawless h3 span { color: #80cbd8; } .battle-item.coop.flawless h3 span:before, .battle-item.coop.flawless h3 span:after { border-top: 1px solid #80cbd8; } .battle-item.coop.flawless .plusmark { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1132px -558px; width: 114px; height: 99px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .battle-item.coop.flawless .plusmark { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .battle-item.coop.endless h3 span { color: #ca89e5; } .battle-item.coop.endless h3 span:before, .battle-item.coop.endless h3 span:after { border-top: 1px solid #ca89e5; } .battle-item.coop.endless .plusmark { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1132px -459px; width: 114px; height: 99px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .battle-item.coop.endless .plusmark { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .battle-item .play-status { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -400px -353px; width: 137px; height: 47px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; z-index: 100; top: 155px; vertical-align: middle; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .battle-item .play-status { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .battle-item .play-status span { height: 47px; display: flex; justify-content: center; align-items: center; padding: 0 10px; font-size: 11px; line-height: 13px; text-transform: uppercase; } .battle-item.archive .battle-status { position: absolute; margin: 28px 0 0 0; z-index: 900; } .battle-item.archive .battle-status.won { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -534px -219px; width: 66px; height: 58px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .battle-item.archive .battle-status.won { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .battle-item.archive .battle-status.lost { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -732px -387px; width: 66px; height: 58px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .battle-item.archive .battle-status.lost { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .battle-item.archive.coop.flawless::after { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -982px -757px; width: 40px; height: 40px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; top: 160px; right: 0; z-index: 100; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .battle-item.archive.coop.flawless::after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .battle-item.archive.coop.endless::after { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -758px -501px; width: 40px; height: 40px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; top: 160px; right: 0; z-index: 100; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .battle-item.archive.coop.endless::after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } /* ===== end memberlist item ===== */ /* ====== start countdown ===== */ .countdown-timer { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -400px 0px; width: 222px; height: 219px; background-repeat: no-repeat; overflow: hidden; display: block; margin: 24px auto; position: relative; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .countdown-timer { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .countdown-timer span { font-size: 130px; line-height: 219px; color: #f08978; text-align: center; position: relative; } /* ===== end countdown ===== */ /* ===== start battle inactive block===== */ .battle-inactive-block { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: 0px -400px; width: 252px; height: 186px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .battle-inactive-block { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .battle-inactive-block h3 { font-size: 18px; line-height: 18px; margin-top: 14px; text-transform: uppercase; } .battle-inactive-block p { font-size: 13px; line-height: 15px; margin: 16px 0 0 0; padding: 0 18px; text-align: center; text-transform: uppercase; } /* ===== end battle inactive block===== */ /* ====== start switch nav ===== */ .switch-nav { text-align: center; padding-top: 30px; } .switch-nav a { display: inline-block; height: 40px; margin: 0 8px; font-size: 24px; line-height: 44px; color: rgba(94, 99, 188, 0.5); text-transform: uppercase; text-decoration: none; text-align: center; position: relative; } .switch-nav a:hover { color: #5e63bc; cursor: pointer; } .switch-nav a.active { color: #f08978; font-size: 30px; line-height: 40px; } .switch-nav a.active::before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1002px -271px; width: 17px; height: 20px; background-repeat: no-repeat; overflow: hidden; display: block; margin: -26px 0 0 -9px; position: absolute; z-index: 1; left: 50%; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .switch-nav a.active::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } /* ====== end switch nav ===== */ /* ====== start content item ===== */ .content-item { margin: 1em 0; overflow: hidden; } .content-item h3 { text-align: left; } /* ====== end content item ===== */ /* ====== start accordion ===== */ .accordion-items { list-style: none; margin: 0; } .accordion-items .accordion-item { overflow: hidden; border-top: 1px solid #f8bb81; border-right: 1px solid transparent; border-left: 1px solid transparent; } .accordion-items .accordion-item:last-child { border-bottom: 1px solid #f8bb81; } .accordion-items .accordion-item .accordion-content { display: none; } .accordion-items .accordion-item.open { border-right: 1px solid #f8bb81; border-left: 1px solid #f8bb81; } .accordion-items .accordion-item.open .accordion-header .btn-arrow { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -430px -1055px; width: 38px; height: 36px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .accordion-items .accordion-item.open .accordion-header .btn-arrow { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .accordion-items .accordion-item.open .accordion-content { display: block; margin: 0 0 16px 0; } .accordion-items .accordion-item .accordion-header { position: relative; padding: 8px 16px; display: flex; justify-content: space-between; align-self: center; align-items: center; min-height: 36px; } .accordion-items .accordion-item .accordion-header .btn-arrow { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -468px -1055px; width: 38px; height: 36px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .accordion-items .accordion-item .accordion-header .btn-arrow { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .accordion-items .accordion-item .accordion-header .accordion-header-info { display: flex; align-self: center; font-size: 18px; text-transform: uppercase; text-align: left; color: #5e63bc; } .accordion-items .accordion-item .accordion-header .accordion-header-info .small { font-size: 15px; } .accordion-items .accordion-item .accordion-header .accordion-header-info .label { color: #6d8df0; padding-right: 4px; } .accordion-items .accordion-item .accordion-header:hover { background: rgba(94, 99, 188, 0.2); cursor: pointer; } .accordion-items .accordion-item .accordion-content { width: 100%; margin: 0; padding: 8px 16px; text-align: left; } /* ====== end accordion ===== */ /* ====== start information-item ===== */ .information-items { list-style: none; margin: 8px 0 0 0; } .information-items .information-item { overflow: hidden; position: relative; border-top: 1px solid rgba(94, 99, 188, 0.2); background: rgba(245, 247, 255, 0.5); margin: 0; padding: 0; } .information-items .information-item.open { z-index: 10; } .information-items .information-item.open .information-body { display: block; } .information-items .information-item:last-child { margin: 0; border-bottom: 1px solid rgba(94, 99, 188, 0.2); } .information-items .information-item .information-header { position: relative; overflow: hidden; height: 36px; width: 100%; background: none; margin: 0; } .information-items .information-item .information-header:hover { background: rgba(94, 99, 188, 0.2); cursor: pointer; } .information-items .information-item .information-header .information-title { line-height: 36px; padding-left: 16px; } .information-items .information-item .information-header .information-title span { font-size: 18px; color: #6d8df0; display: block; text-align: left; text-transform: uppercase; } .information-items .information-item .information-header .btn-detail { position: absolute; top: 50%; right: 10px; transform: translate(0, -50%); } .information-items .information-item .information-body { display: none; padding: 0 16px 16px; } .information-items .information-item .information-body .form-validation, .information-items .information-item .information-body input[type=email], .information-items .information-item .information-body input[type=password], .information-items .information-item .information-body input[type=text], .information-items .information-item .information-body select { width: 100%; } .information-items .information-item .item-list { margin: 0 auto; padding: 0; width: fit-content; list-style: none; } .information-items .information-item .item-list .item-row { position: relative; padding: 10px 0; } .information-items .information-item .item-list .item-row:after { content: ''; display: block; position: absolute; width: 10000px; height: 1px; background: rgba(94, 99, 188, 0.2); top: 0; left: -5000px; z-index: 1000; } .information-items .information-item .item-list .item-row:first-child:after { display: none; } /* ====== end information-item ===== */ /* ====== start toggle-container ===== */ .toggle-container { overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; margin-bottom: 8px; background: rgba(245, 247, 255, 0.5); } .toggle-container:last-child { margin-bottom: 0; } .toggle-container .toggle-block { float: right; } .toggle-container .toggle-title { font-size: 18px; display: block; float: left; line-height: 100%; margin: 0 20px 0 0; } /* ====== end toggle-container ===== */ /* ====== start countdown block ===== */ .countdown-block.screen { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -730px -757px; width: 252px; height: 65px; background-repeat: no-repeat; overflow: hidden; display: block; font-size: 24px; line-height: 65px; text-transform: uppercase; margin: 0 auto 24px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .countdown-block.screen { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .countdown-block.screen span { font-size: 18px; } /* ====== end countdown block ===== */ /* ====== start tooltip ===== */ .tooltip { position: relative; width: 20px; height: 20px; border-radius: 100px; background-color: #f8bb81; position: relative; text-align: center; line-height: 20px; } .tooltip:before, .tooltip:after { position: absolute; display: none; line-height: 18px; } .tooltip:before { content: ""; border: 5px solid transparent; z-index: 100; bottom: 100%; border-bottom-width: 0; border-top-color: #f8bb81; left: 50%; transform: translate(-50%, -4px); } .tooltip:after { content: attr(data-tooltip); text-align: center; overflow: hidden; width: max-content; max-width: 200px; padding: 6px 8px; border-radius: 3px; background: #f8bb81; z-index: 99; bottom: calc(100% + 5px); left: 50%; transform: translate(-50%, -4px); z-index: 99999; } .tooltip.active:before, .tooltip.active:after, .tooltip:hover:before, .tooltip:hover:after { display: block; } .tooltip.top.left:after { transform: translate(calc(-100% + 20px), -4px); } .tooltip.top.right:after { transform: translate(-20px, -4px); } .tooltip.bottom:before { top: calc(100% - 5px); border-top-width: 0; border-bottom-color: #f8bb81; border-bottom-width: thick; border-top-color: transparent; left: 50%; transform: translate(-50%, 8px); } .tooltip.bottom:after { left: 50%; top: calc(100% + 5px); bottom: auto; transform: translate(-50%, 3px); } .tooltip.bottom.left:after { transform: translate(calc(-100% + 20px), 3px); } .tooltip.bottom.right:after { transform: translate(-20px, 3px); } .tooltip.middle:after { bottom: auto; left: auto; right: auto; } .tooltip.middle.left:before { top: 50%; border-right-width: 0; border-left-color: #f8bb81; left: calc(0em - 5px); transform: translate(-8px, -50%); border-bottom-width: thick; border-top-color: transparent; } .tooltip.middle.left:after { top: 50%; right: calc(100% + 5px); transform: translate(-8px, -50%); } .tooltip.middle.right:before { top: 50%; border-left-width: 0; border-right-color: #f8bb81; right: calc(0em - 5px); transform: translate(8px, -50%); border-bottom-width: thick; border-top-color: transparent; } .tooltip.middle.right:after { top: 50%; left: calc(100% + 5px); transform: translate(8px, -50%); } .tooltip[data-tooltip=""]:before, .tooltip[data-tooltip=""]:after { display: none !important; } /* ====== end tooltip ===== */ /* ====== start preloader ===== */ .preloader { text-align: center; padding: 26px 0 10px 0; } .preloader .icon-ag-spinner { display: inline-block; font-size: 4rem; height: 1rem; line-height: 1rem; margin: .5rem; color: #6d8df0; } .preloader .progress-number { display: block; color: #6d8df0; font-size: 21px; margin-top: 16px; } .preloader .progress-text { display: block; color: #6d8df0; font-size: 21px; margin-top: 8px; } .preloader.small { padding: 13px 0 5px 0; } .preloader.small .icon-ag-spinner { font-size: 2rem; height: 0.5rem; line-height: 0.5rem; } .preloader.small .progress-text { font-size: 15px; } /* ====== end preloader ===== */ /* ===== start audio controls ===== */ .audio-toggle-block { background: #f5f7ff; border-top-left-radius: 5px; border-top-right-radius: 5px; width: auto; position: fixed; bottom: 0; right: 11px; z-index: 9000; display: flex; align-items: center; height: 50px; padding: 0 12px; } .audio-toggle-block .btn-icon.audio-toggle span { background: none; box-shadow: none; color: #5e63bc; } .audio-toggle-block .btn-icon.audio-toggle span:hover { background: none; box-shadow: none; color: #5e63bc; } .audio-volume-slider { border-top-left-radius: 5px; border-top-right-radius: 5px; background: #f5f7ff; width: 60px; height: 200px; position: absolute; bottom: 50px; display: flex; visibility: hidden; opacity: 0; left: 0; } .audio-volume-slider .slider-block { padding: 10px 0 0 22px; } .audio-volume-slider .slider-block .mat-slider { height: 100%; margin: 0; padding: 0; } .audio-volume-slider .slider-block .mat-slider.mat-slider-vertical { width: 30px; padding: 0; } /* ===== end audio controls ===== */ /* ===== start footer ===== */ .footer { background: #f5f7ff; border-top-left-radius: 5px; border-top-right-radius: 5px; width: auto; position: fixed; bottom: 0; right: 80px; z-index: 9000; display: flex !important; align-items: center; } .footer .logo-athand, .footer .disclaimer-link { height: 50px; color: #5e63bc; padding: 0 12px; display: flex; align-items: center; } .footer .logo-athand::before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1132px -1019px; width: 75px; height: 33px; background-repeat: no-repeat; overflow: hidden; display: block; margin-top: 8px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .footer .logo-athand::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .footer .disclaimer-link { display: flex; } .footer .disclaimer-link i { float: left; font-size: 21px; line-height: 50px; margin-right: 6px; } .footer .disclaimer-link a { float: left; display: block; font-size: 15px; line-height: 50px; color: #5e63bc; text-decoration: none; } .footer .disclaimer-link a:nth-child(3)::before { content: '|'; padding: 0 6px; } .footer .disclaimer-link a:hover { color: #f08978; } .footer .disclaimer-link a:hover::before { color: #5e63bc; } .footer .disclaimer-link a span { text-decoration: underline; } .footer .ace-version { font-size: 15px; line-height: 97px; float: right; margin: 0 54px 0 0; } .footer .fps-counter { font-size: 15px; line-height: 97px; float: right; margin-right: 30px; width: 50px; } /* ===== end footer ===== */ /* ===== start audio file ===== */ audio { width: 100%; margin: 12px 0; } /* ===== end audio file ===== */ /* ===== start feedback tool ===== */ .atlwdg-trigger { z-index: 999; } /* ===== end feedback tool ===== */ /* ===== start emoticon ===== */ .emoticon.angry .base .shade { fill: #ce3133; } .emoticon.angry .base .background { fill: #e13838; } .emoticon.angry path { fill: #9a2222; } .emoticon.excited .base .shade { fill: #588afa; } .emoticon.excited .base .background { fill: #639cfd; } .emoticon.excited path { fill: #3554e1; } .emoticon.surprised .base .shade { fill: #3ebbe3; } .emoticon.surprised .base .background { fill: #43c9ea; } .emoticon.surprised path { fill: #2982a7; } .emoticon .state-1 { visibility: hidden; } .emoticon .state-2 { visibility: hidden; } /* ===== end emoticon ===== */ input::-ms-clear, input::-ms-reveal { display: none; } input, select, textarea { outline: none; } textarea { resize: none; } .section-avatarbuilder .form-group { margin: 0; } .form-group { overflow: hidden; margin: 0 0 7px 0; } .form-group label { margin-top: 6px; font-size: 13px; display: none; } .form-group label.label-visible { display: block; position: absolute; color: #5e63bc; font-size: 18px; line-height: 18px; vertical-align: middle; text-transform: uppercase; margin: 18px 0 0 0; padding: 0 16px 0 0; } .form-group label.label-visible-avatar { display: block; position: relative; color: #5e63bc; font-size: 18px; line-height: 18px; vertical-align: middle; text-transform: uppercase; margin: 0 0 0 0; padding: 0 8px 0 0; } .form-group ::-webkit-input-placeholder { color: white; opacity: 0.5; text-transform: uppercase; padding: 2px 0 0; } .form-group :-moz-placeholder { color: white; opacity: 0.5; text-transform: uppercase; padding: 2px 0 0; } .form-group ::-moz-placeholder { color: white; opacity: 0.5; text-transform: uppercase; padding: 2px 0 0; } .form-group :-ms-input-placeholder { color: white; opacity: 0.5; text-transform: uppercase; padding: 2px 0 0; } .form-group :-ms-input-placeholder { color: #606c76 !important; opacity: 1; } .form-group input[type='email'], .form-group input[type='password'], .form-group input[type='text'], .form-group select { width: 100%; height: 36px; padding: 9px 8px 7px; margin: 0; background-color: #5e63bc; color: white; font-size: 18px; line-height: 18px; vertical-align: middle; border: 0; } .form-group input[type='email'].activation-field, .form-group input[type='password'].activation-field, .form-group input[type='text'].activation-field, .form-group select.activation-field { text-transform: uppercase; } .form-group textarea { width: 100%; height: 202px; padding: 8px; margin: 0; background: #5e63bc; color: white; font-size: 18px; line-height: 20px; vertical-align: middle; border: 0; } .form-group select { padding: 7px 16px 7px; } .form-group input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #5e63bc inset; -webkit-text-fill-color: white !important; } .form-group input[type='text']#activation-code { width: 100%; margin: 8px 0 18px 0; padding: 6px 16px 10px 114px; border-top: 1px solid rgba(94, 99, 188, 0.5); border-bottom: 1px solid rgba(94, 99, 188, 0.5); font-size: 18px; color: #5e63bc; background: none; position: relative; text-align: right; float: right; } .show-password { color: white; position: relative; margin-right: 10px; margin-top: -27px; cursor: pointer; background: transparent; display: inline-block; float: right; } .show-password:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } .form-validation { font-size: 13px; line-height: 15px; color: #5e63bc; text-transform: uppercase; width: 304px; margin: 4px 0 8px 0; display: block; text-align: left; position: relative; } .form-validation.error { color: #f75b5f; padding: 0 0 0 26px; } .form-validation.error::before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -597px -331px; width: 21px; height: 20px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; left: 0; top: -3px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .form-validation.error::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .form-validation span { display: inline-block; } .form-info { font-size: 13px; line-height: 15px; color: #5e63bc; text-transform: uppercase; display: block; margin: 4px 0 8px 0; overflow: hidden; } .form-info span { font-size: 13px; } .form-info .float-left { padding-right: 8px; } .form-info .float-right { padding-left: 8px; } .form-actions .btn-txt { margin-top: 10px; float: left; } .search-box { width: 312px; height: 36px; position: relative; } .search-box::before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1002px -343px; width: 18px; height: 16px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; top: 10px; left: 10px; z-index: 10; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .search-box::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .search-box input[type='text'].search-box-input { background: #5e63bc; width: 312px; padding: 9px 36px; font-size: 15px; margin: 0; color: white; line-height: 18px; vertical-align: middle; border: 0; } .search-box input[type='text'].search-box-input:not(:valid) ~ .btn-reset { display: none; } .search-box .btn-reset { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1116px -775px; width: 16px; height: 16px; background-repeat: no-repeat; overflow: hidden; display: block; background-color: transparent; border: 0; display: inline-block; vertical-align: middle; outline: 0; cursor: pointer; width: 16px; height: 16px; position: absolute; top: 10px; right: 10px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .search-box .btn-reset { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .search-box .btn-reset:hover { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1116px -759px; width: 16px; height: 16px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .search-box .btn-reset:hover { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .choose-file { position: relative; display: inline-block; cursor: pointer; } .choose-file input[type="file"] { -webkit-appearance: none; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; } .filter-block, .sorting-block { width: 160px; height: 36px; border: 1px solid #5e63bc; box-sizing: border-box; overflow: hidden; background-size: 14px; background: url("../../desktop/images/general/normal/select-arrow.png?v=20240109145540") no-repeat calc(100% + -12px) 12px; background-color: #f5f7ff; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .filter-block, .sorting-block { background: url("../../desktop/images/general/retina/select-arrow@2x.png?v=20240109145540") no-repeat 0 0; background-color: #f5f7ff; background-size: 14px; } } .filter-block select, .sorting-block select { background: transparent; border: none; font-size: 15px; height: 34px; padding: 0 10px; width: calc(100% + 20px); color: #5e63bc; } .filter-block select option, .sorting-block select option { background-color: #6d8df0; outline: none; border: 1px solid #5e63bc; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10+ specific styles go here */ .filter-block select, .sorting-block select { width: 250px; padding: 0; } } .slider-block { overflow: hidden; position: relative; padding: 8px 16px 0; } .slider-block .mat-slider { width: 100%; margin: 16px 0 0 0; padding: 8px 0; } .slider-block .mat-slider.mat-slider-horizontal { height: 62px; } .slider-block .mat-slider.mat-slider-horizontal .mat-slider-wrapper { left: 0; right: 0; } .slider-block .mat-slider.mat-slider-horizontal .mat-slider-wrapper, .slider-block .mat-slider.mat-slider-horizontal .mat-slider-track-wrapper, .slider-block .mat-slider.mat-slider-horizontal .mat-slider-track-background, .slider-block .mat-slider.mat-slider-horizontal .mat-slider-track-fill { height: 14px; } .slider-block .mat-slider.mat-slider-vertical .mat-slider-wrapper { top: 14px; left: 0; right: 0; } .slider-block .mat-slider.mat-slider-vertical .mat-slider-track-background { height: 100%; } .slider-block .mat-slider.mat-slider-vertical .mat-slider-wrapper, .slider-block .mat-slider.mat-slider-vertical .mat-slider-track-wrapper, .slider-block .mat-slider.mat-slider-vertical .mat-slider-track-background, .slider-block .mat-slider.mat-slider-vertical .mat-slider-track-fill { width: 14px; } .slider-block .mat-slider .mat-slider-wrapper:after { display: none; } .slider-block .mat-slider .mat-slider-thumb { transform: scale(1) !important; background-color: transparent; border: none; border-radius: 0; } .slider-block .mat-slider .mat-slider-thumb::after { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -854px -967px; width: 35px; height: 27px; background-repeat: no-repeat; overflow: hidden; display: block; margin: 10px; transform: translate(-50%, -50%); background-color: transparent; border: 0 !important; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .slider-block .mat-slider .mat-slider-thumb::after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .slider-block .mat-slider .mat-slider-track-background { background-color: rgba(94, 99, 188, 0.2); height: 9px; transform: translateX(0) scale3d(1, 1, 1) !important; } .slider-block .mat-slider .mat-slider-track-fill { background-color: #6d8df0; } .slider-block .mat-slider:hover .mat-slider-track-background { background-color: rgba(94, 99, 188, 0.2); } .slider-block.no-value .mat-slider { margin: 0; } .slider-block.no-value .mat-slider .mat-slider-track-background { background-color: #6d8df0; } .slider-block.smiley { padding: 16px 16px 0; } .slider-block.smiley mat-slider .mat-slider-wrapper .mat-slider-track-wrapper .mat-slider-track-background { background-color: #6d8df0; } .slider-block.smiley.smiley-1 mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb:before { content: url("../../shared/images/vector/progress-steps/step-1b.svg?v=20240109145540"); width: 25px; height: 25px; padding: 2px; display: block; position: absolute; top: -30px; left: 50%; transform: translate(-50%, -49%); border-radius: 1000px; background-color: red; } .slider-block.smiley.smiley-2 mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb:before { content: url("../../shared/images/vector/progress-steps/step-2b.svg?v=20240109145540"); width: 25px; height: 25px; padding: 2px; display: block; position: absolute; top: -30px; left: 50%; transform: translate(-50%, -49%); border-radius: 1000px; background-color: #ff6d0a; } .slider-block.smiley.smiley-3 mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb:before { content: url("../../shared/images/vector/progress-steps/step-3b.svg?v=20240109145540"); width: 25px; height: 25px; padding: 2px; display: block; position: absolute; top: -30px; left: 50%; transform: translate(-50%, -49%); border-radius: 1000px; background-color: #ffd204; } .slider-block.smiley.smiley-4 mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb:before { content: url("../../shared/images/vector/progress-steps/step-4b.svg?v=20240109145540"); width: 25px; height: 25px; padding: 2px; display: block; position: absolute; top: -30px; left: 50%; transform: translate(-50%, -49%); border-radius: 1000px; background-color: #39c600; } .slider-block.smiley.smiley-5 mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb:before { content: url("../../shared/images/vector/progress-steps/step-5b.svg?v=20240109145540"); width: 25px; height: 25px; padding: 2px; display: block; position: absolute; top: -30px; left: 50%; transform: translate(-50%, -49%); border-radius: 1000px; background-color: #007b31; } .slider-block.disabled { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .slider-block.disabled .mat-slider .mat-slider-thumb:after { background-image: none; } .slider-block .mat-slider-disabled .mat-slider-thumb { transform: scale(1) !important; background-color: transparent; border: none; border-radius: 0; } .slider-block .mat-slider-disabled .mat-slider-thumb::after { content: ''; background-color: #5e63bc; background-image: none; height: 20px; width: 2px; top: 3px; left: calc(50% - 2px); } .slider-block .mat-slider-disabled .mat-slider-track-background { margin-left: -7px; } .slider-block .mat-slider-disabled .mat-slider-track-fill { margin-left: 7px; background-color: #6d8df0; } .slider-block .slider-value { display: block; height: 30px; color: #f08978; font-size: 18px; text-align: center; line-height: 30px; left: -1px; right: -1px; margin: 0 auto; top: 0px; position: absolute; overflow: visible; } .slider-block .slider-value span { background: rgba(245, 247, 255, 0.5); padding: 0 10px; display: inline-block; } .slider-block.text .slider-value { background-image: none; } .slider-block.text .slider-value span { width: 300px; margin-left: -150px; } .slider-block .limit-txt { bottom: 0; display: block; color: #5e63bc; font-size: 13px; text-transform: none; position: absolute; white-space: nowrap; text-transform: uppercase; } .slider-block .limit-txt.low { text-align: left; left: 16px; } .slider-block .limit-txt.high { text-align: right; right: 16px; } .form-group .checkbox-block { position: relative; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; width: 100%; margin: 10px 0; overflow: hidden; } .form-group .checkbox-block input[type=checkbox] { width: 26px; height: 26px; cursor: pointer; display: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-group .checkbox-block input[type=checkbox]:checked + span:after { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1232px -821px; width: 19px; height: 19px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .form-group .checkbox-block input[type=checkbox]:checked + span:after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .form-group .checkbox-block span { font-size: 15px; line-height: 18px; color: #5e63bc; padding: 2px 8px 2px 28px; } .form-group .checkbox-block span:after { content: ""; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1002px -195px; width: 19px; height: 19px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; top: 0; left: 0; position: absolute; margin-top: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .form-group .checkbox-block span:after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .form-group .checkbox-block.small { width: 142px; } .form-group .checkbox-block.medium { width: 217px; } .form-group .checkbox-block.result { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; cursor: default; } .form-group .checkbox-block.result span { padding-left: 0; } .form-group .checkbox-block.result span:after { display: none; } .form-group .checkbox-block.result.chosen { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .toggle-switch { position: relative; display: inline-block; width: 62px; height: 30px; margin: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-switch input:checked + .slider { background-position-x: 0px; } .toggle-switch input:checked + .slider:before { transform: translateX(32px); } .toggle-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; transition: .2s; background: url("../../desktop/images/general/normal/toggle-bg.png?v=20240109145540"); background-position-x: -62px; border-radius: 100px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .toggle-switch .slider { background-image: url("../../desktop/images/general/retina/toggle-bg@2x.png?v=20240109145540"); background-size: 124px 30px; } } .toggle-switch .slider:before { position: absolute; content: ''; height: 30px; width: 30px; left: 0; bottom: 0; background: url("../../desktop/images/general/normal/toggle-thumb.png?v=20240109145540"); transition: .2s; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .toggle-switch .slider:before { background-image: url("../../desktop/images/general/retina/toggle-thumb@2x.png?v=20240109145540"); background-size: 30px; } } .toggle-switch .slider:after { position: absolute; content: ''; height: 30px; width: 62px; left: 0; bottom: 0; background: url("../../desktop/images/general/normal/toggle-border.png?v=20240109145540"); transition: .2s; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .toggle-switch .slider:after { background-image: url("../../desktop/images/general/retina/toggle-border@2x.png?v=20240109145540"); background-size: 62px 30px; } } .form-group .radio-block { position: relative; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; width: 100%; margin: 10px 0; overflow: hidden; } .form-group .radio-block input[type=radio] { width: 26px; height: 26px; cursor: pointer; display: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-group .radio-block input[type=radio]:checked + span:after { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1002px -214px; width: 19px; height: 19px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .form-group .radio-block input[type=radio]:checked + span:after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .form-group .radio-block span { font-size: 15px; line-height: 18px; color: #5e63bc; padding: 2px 8px 2px 28px; } .form-group .radio-block span:after { content: ""; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1002px -233px; width: 19px; height: 19px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; top: 0; left: 0; position: absolute; margin-top: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .form-group .radio-block span:after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .form-group .radio-block.small { width: 142px; } .form-group .radio-block.medium { width: 217px; } .form-group .radio-block.result { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; cursor: default; } .form-group .radio-block.result span { padding-left: 0; } .form-group .radio-block.result span:after { display: none; } .form-group .radio-block.result.chosen { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .input-block { text-align: left; width: 100%; overflow: hidden; } .textarea-block { text-align: left; overflow: hidden; } .textarea-block textarea { resize: none; width: 100%; height: 215px; border: 0; font-size: 18px; line-height: 21px; padding: 4px 8px; } .date-block input[type='text'].input-datepicker { width: 304px; height: 36px; padding: 9px 8px 7px; margin: 0; background-color: #5e63bc; color: white; font-size: 18px; line-height: 18px; vertical-align: middle; border: 0; cursor: pointer; } .date-block .mat-calendar-body-selected { background-color: #f8bb81; color: #5e63bc; } .date-block .btn-date-clear { position: absolute; background-color: #5e63bc; width: 35px; height: 35px; background: none; border: 0; text-indent: -9999px; display: inline-block; margin: 0 0 0 22px; } .date-block .btn-date-clear:before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -600px -219px; width: 21px; height: 21px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; margin: 0; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .date-block .btn-date-clear:before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .date-block .btn-date-clear:hover:before { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .mat-calendar-body-label, .mat-calendar-period-button .mat-calendar-body { font-size: 11px; } .mat-calendar-table-header th { font-size: 10px; } .mat-datepicker-content .mat-calendar-next-button, .mat-datepicker-content .mat-calendar-previous-button, .mat-datepicker-toggle { color: #606c76; } .mat-calendar-table-header { color: #86929d; } .mat-calendar-table-header-divider::after { color: #606c76; } .mat-calendar-body-label { color: #606c76; } .mat-calendar-body-cell-content { color: #505a62; border-color: transparent; } .mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) { color: #86929d; } .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected), .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected), .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) { background-color: rgba(0, 0, 0, 0.04); } .mat-calendar-body-today:not(.mat-calendar-body-selected) { border-color: #707e8a; } .mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) { border-color: #6d8df0; } .mat-calendar-body-selected { background-color: #6d8df0; color: #5e63bc; } .mat-calendar-body-disabled > .mat-calendar-body-selected { background-color: #f8bb81; } .mat-calendar-body-today.mat-calendar-body-selected { box-shadow: inset 0 0 0 1px #5e63bc; } .mat-datepicker-content { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); background-color: #5e63bc; color: #3e454c; } .mat-datepicker-content.mat-accent .mat-calendar-body-selected { background-color: white; color: #5e63bc; } .mat-datepicker-content.mat-accent .mat-calendar-body-disabled > .mat-calendar-body-selected { background-color: #d9d9d9; } .mat-datepicker-content.mat-accent .mat-calendar-body-today.mat-calendar-body-selected { box-shadow: inset 0 0 0 1px #5e63bc; } .mat-datepicker-content.mat-warn .mat-calendar-body-selected { background-color: #6d8df0; color: #5e63bc; } .mat-datepicker-content.mat-warn .mat-calendar-body-disabled > .mat-calendar-body-selected { background-color: "color-not-found"; } .mat-datepicker-content.mat-warn .mat-calendar-body-today.mat-calendar-body-selected { box-shadow: inset 0 0 0 1px #5e63bc; } .mat-datepicker-content-touch { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12); } @media (-ms-high-contrast: active) { .mat-ripple-element { display: none; } } .cdk-visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; outline: 0; -webkit-appearance: none; -moz-appearance: none; } .cdk-global-overlay-wrapper, .cdk-overlay-container { pointer-events: none; top: 0; left: 0; height: 100%; width: 100%; } .cdk-overlay-container { position: fixed; z-index: 1000; } .cdk-overlay-container:empty { display: none; } .cdk-global-overlay-wrapper { display: flex; position: absolute; z-index: 1000; } .cdk-overlay-pane { position: absolute; pointer-events: auto; box-sizing: border-box; z-index: 1000; display: flex; max-width: 100%; max-height: 100%; } .cdk-overlay-backdrop { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000; pointer-events: auto; -webkit-tap-highlight-color: transparent; transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0; } .cdk-overlay-backdrop.cdk-overlay-backdrop-showing { opacity: 1; } @media screen and (-ms-high-contrast: active) { .cdk-overlay-backdrop.cdk-overlay-backdrop-showing { opacity: .6; } } .cdk-overlay-dark-backdrop { background: rgba(0, 0, 0, 0.32); } .cdk-overlay-transparent-backdrop, .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing { opacity: 0; } .cdk-overlay-connected-position-bounding-box { position: absolute; z-index: 1000; display: flex; flex-direction: column; min-width: 1px; min-height: 1px; } .cdk-global-scrollblock { position: fixed; width: 100%; overflow-y: scroll; } .modal { position: fixed; top: 0; left: 0; z-index: 10000; width: 100%; height: 100%; overflow: hidden; outline: 0; } .modal .modal-dialog { position: relative; width: auto; margin: 0; pointer-events: none; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-height: calc(100% - 1rem); z-index: 1050; } .modal .modal-dialog .modal-content { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; pointer-events: auto; outline: 0; } .modal .modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: rgba(255, 255, 255, 0.5); } /* ====== start default dialog ===== */ .modal.default.medium .modal-dialog { max-width: 500px; margin: 1.75rem auto; min-height: calc(100% - 3.5rem); } .modal.default.large .modal-dialog { max-width: 976px; margin: 1.75rem auto; } .modal.default .modal-content { background-color: rgba(245, 247, 255, 0.8); background-clip: padding-box; border: 1px solid #f8bb81; } .modal.default .modal-content .btn-close { background-color: transparent; border: 0; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -392px -1055px; width: 38px; height: 36px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; text-indent: -9999px; right: -16px; top: -16px; z-index: 3000; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .modal.default .modal-content .btn-close { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .modal.default .modal-content .btn-close:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); opacity: 0.9; } .modal.default .modal-content .modal-header { padding: 1rem 1rem; } .modal.default .modal-content .modal-body { position: relative; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0 0.5rem 1rem; margin: 0 0.5rem 0.5rem; color: #5e63bc; max-height: calc(100vh - 200px); overflow-y: auto; } .modal.default .modal-content .modal-footer { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: center; padding: 1rem; } .modal.default .modal-content .modal-footer button { margin: 0 8px; } /* ====== end default dialog ===== */ /* ====== start quiz-report-dialog ===== */ .quiz-report-dialog .question-block { background: rgba(245, 247, 255, 0.8); padding: 16px; } .quiz-report-dialog .question-block .question p { color: #5e63bc; margin-top: 0; } .quiz-report-dialog .question-block .answers { margin-bottom: 20px; } .quiz-report-dialog .question-block .answers ul { margin: 0; list-style: none; } .quiz-report-dialog .question-block .answers ul li { color: #5e63bc; margin: 2px 0; } .quiz-report-dialog .question-block .answers ul li .answer-option { text-align: center; display: inline-block; vertical-align: top; width: 30px; height: 26px; } .quiz-report-dialog .question-block .answers ul li p { width: 760px; margin: 2px 0 0 6px; line-height: 18px; display: inline-block; } .quiz-report-dialog .question-block .answers ul li.correct .answer-option::before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -920px -967px; width: 30px; height: 26px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .quiz-report-dialog .question-block .answers ul li.correct .answer-option::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .quiz-report-dialog .question-block .answers ul li.incorrect .answer-option::before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -950px -967px; width: 30px; height: 26px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .quiz-report-dialog .question-block .answers ul li.incorrect .answer-option::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .quiz-report-dialog .question-block .explanation p { color: #5e63bc; margin-top: 0; } .quiz-report-dialog .draggable-block { max-width: 472px; } .quiz-report-dialog .quiz-answer-findit-images { max-width: 472px; } .quiz-report-dialog .quiz-answer-findit-images .tile-container { text-align: left; } .quiz-report-dialog .quiz-answer-findit-images .tile-container .tile { width: 21.6%; padding-bottom: 21.6%; } .quiz-report-dialog .report-form { margin-top: 24px; } .quiz-report-dialog .report-form textarea { width: 100%; resize: none; } .quiz-report-dialog .btn-default { margin: 16px 8px 0; } /* ====== end quiz-report-dialog ===== */ /* ====== start dialog image question ===== */ .image-slider .btn-close { background-color: transparent; border: 0; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -392px -1055px; width: 38px; height: 36px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; text-indent: -9999px; left: 50%; right: auto; top: 50%; margin: -300px 0 0 390px; z-index: 3000; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .image-slider .btn-close { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .image-slider .btn-close:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); opacity: 0.9; } .image-slider .swiper-container .swiper-button-prev { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -322px -1098px; width: 38px; height: 40px; background-repeat: no-repeat; overflow: hidden; display: block; background-size: auto; left: 50%; margin-left: -428px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .image-slider .swiper-container .swiper-button-prev { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .image-slider .swiper-container .swiper-button-next { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -246px -1098px; width: 38px; height: 40px; background-repeat: no-repeat; overflow: hidden; display: block; background-size: auto; right: 50%; margin-right: -428px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .image-slider .swiper-container .swiper-button-next { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .image-slider .swiper-container .swiper-button-prev:hover, .image-slider .swiper-container .swiper-button-next:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .image-slider .swiper-container .swiper-wrapper { align-items: center; } .image-slider .swiper-container .media-item { margin: 0 auto; text-align: center; font-size: 0; line-height: 0; } .image-slider .swiper-container .media-item .img-zoomed-out { max-width: 760px; max-height: 550px; width: auto; height: auto; margin: 0 auto; } .image-slider .swiper-container .media-item .image-container { max-width: 760px; max-height: 550px; margin: 0 auto; overflow: hidden; cursor: zoom-out; } .image-slider .swiper-container .media-item .image-container .image-zoomed { position: relative; } .image-slider .swiper-container .media-item .image-container .image-overlay { z-index: 1; position: absolute; } /* ====== end dialog image question ===== */ /* ===== start widgets ===== */ .widget:hover { cursor: pointer; } .widget:hover .title, .widget:hover .icon { color: #f8bb81; } .widget:hover .title.icon-stamp3 span, .widget:hover .icon.icon-stamp3 span { color: #f8bb81; } .widget.single { position: relative; width: 136px; height: 105px; } .widget.single .widget-block { background: url("../../desktop/images/general/normal/widget-frame-single.png?v=20240109145540") no-repeat top center transparent; background-size: 136px 105px; width: 136px; height: 105px; overflow: hidden; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .widget.single .widget-block { background: url("../../desktop/images/general/retina/widget-frame-single@2x.png?v=20240109145540") no-repeat top center transparent; background-size: 136px 105px; } } .widget.single .adventure { width: 136px; height: 105px; background: none; } .widget.single .adventure:before { content: ''; background: url("../../desktop/images/general/normal/widget-frame-single-adventure.png?v=20240109145540") no-repeat top center transparent; width: 136px; height: 105px; display: block; position: absolute; transition: .15s ease-in-out; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .widget.single .adventure:before { background: url("../../desktop/images/general/retina/widget-frame-single-adventure@2x.png?v=20240109145540") no-repeat top center transparent; background-size: 136px 105px; } } .widget.single .adventure:hover:before { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .widget.single .adventure .title { bottom: 50px; } .widget.single .adventure .progress-gauge { width: 96px; height: 24px; margin: 74px auto 0; padding: 0; position: relative; display: flex; align-items: center; justify-content: space-between; } .widget.single .adventure .progress-gauge .progress-highlightbar { width: 44px; background: #f5f7ff; border: 1px solid #f5f7ff; position: relative; } .widget.single .adventure .progress-gauge .progress-highlightbar .progress-highlight { height: 7px; } .widget.single .adventure .progress-gauge .pointer { position: relative; margin: 0; display: flex; align-items: center; justify-content: flex-end; } .widget.single .adventure .progress-gauge .pointer span { font-size: 18px; line-height: 20px; color: #f5f7ff; } .widget.single .adventure .final-trophy-widget { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1232px -754px; width: 15px; height: 27px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; right: 20px; bottom: 14px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .widget.single .adventure .final-trophy-widget { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .widget.single .adventure.locked .message { position: absolute; text-align: center; width: 100%; top: 58px; } .widget.single .adventure.locked .message span { display: block; } .widget.single .adventure.locked:hover .message { color: #f8bb81; } .widget.single .adventure.locked:hover .message span { color: #f8bb81; } .widget.single .battles .message { font-size: 15px; line-height: 15px; padding: 20px 0 0; } .widget.single .battles .message span { font-size: 15px; line-height: 18px; text-transform: uppercase; display: block; } .widget.single .battles.locked:hover .message { color: #f8bb81; } .widget.single .battles.locked:hover .message span { color: #f8bb81; } .widget.single .examworld { background: url("../../desktop/images/general/normal/widget-frame-single-exam.png?v=20240109145540") no-repeat top center transparent; background-size: 136px 105px; width: 136px; height: 105px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .widget.single .examworld { background: url("../../desktop/images/general/retina/widget-frame-single-exam@2x.png?v=20240109145540") no-repeat top center transparent; background-size: 136px 105px; } } .widget.single .examworld .title { bottom: 50px; } .widget.single .examworld .progress-gauge { width: 80px; margin: 74px 0 0 14px; position: absolute; } .widget.single .examworld .progress-gauge .progress-highlightbar { width: 80px; background: #f5f7ff; border: 1px solid #f5f7ff; } .widget.single .examworld .progress-gauge .progress-highlightbar .pointer { right: -30px; bottom: -10px; margin: 0; } .widget.single .examworld .progress-gauge .progress-highlightbar .pointer p { font-size: 18px; line-height: 20px; color: #5e63bc; } .widget.single .examworld .progress-gauge .progress-highlightbar .progress-highlight { height: 7px; } .widget.single .examworld.locked .message { position: absolute; text-align: center; width: 100%; top: 58px; } .widget.single .examworld.locked .message span { display: block; } .widget.single .examworld.locked:hover .message { color: #f8bb81; } .widget.single .examworld.locked:hover .message span { color: #f8bb81; } .widget.single .inputtool:hover { cursor: default; } .widget.single .inputtool:hover .title, .widget.single .inputtool:hover .icon { color: #5e63bc; } .widget.single .inputtool .sales-up-block .sales { float: left; width: 50px; margin: 14px 0 0 14px; } .widget.single .inputtool .sales-up-block .sales .sales-up { float: left; padding: 0 3px; } .widget.single .inputtool .sales-up-block .sales .sales-up span { width: 36px; padding: 0 3px; } .widget.single .inputtool .sales-up-block .sales .sales-down { width: 46px; font-size: 13px; line-height: 24px; text-transform: uppercase; padding: 2px 0 4px; display: block; float: left; text-decoration: underline; } .widget.single .inputtool .sales-up-block .sales .sales-down:hover { cursor: pointer; color: #f8bb81; } .widget.single .inputtool .sales-up-block .realisation { float: left; margin: -4px 0 0 14px; } .widget.single .post.new .icon { color: #f08978; } .widget.single .post.new .icon.icon-stamp3 { font-size: 30px; position: absolute; bottom: 28px; left: 60%; } .widget.single .post.new .icon.icon-stamp3 span { position: absolute; font-size: 18px; line-height: 30px; color: white; width: 100%; left: 0; } .widget.single .post.ended .icon { color: rgba(94, 99, 188, 0.5); } .widget.single .post.ended .message { color: rgba(94, 99, 188, 0.5); } .widget.single .post .message { display: block; position: absolute; font-size: 13px; line-height: 15px; text-transform: uppercase; margin: 0; width: 100%; color: #f08978; padding: 0 10px; } .widget.single .post .message span { text-transform: uppercase; } .widget.single .post:hover.new .icon.icon-stamp3 span { color: #f8bb81; } .widget.single .post:hover .icon { color: #f8bb81; } .widget.single .post:hover .message { color: #f8bb81; } .widget.single .post:hover .message span { color: #f8bb81; } .widget.double { position: relative; width: 304px; height: 105px; } .widget.double .widget-block { background: url("../../desktop/images/general/normal/widget-frame-double.png?v=20240109145540") no-repeat top center transparent; background-size: 304px 105px; width: 304px; height: 105px; overflow: hidden; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .widget.double .widget-block { background: url("../../desktop/images/general/retina/widget-frame-double@2x.png?v=20240109145540") no-repeat top center transparent; background-size: 304px 105px; } } .widget.double .widget-block .col-left, .widget.double .widget-block .col-right { width: 136px; height: 105px; position: relative; } .widget.double .widget-block .col-left { float: left; } .widget.double .widget-block .col-right { float: right; } .widget.double .widget-block .frame { background: rgba(245, 247, 255, 0.5); border: 1px solid #6d8df0; display: table; white-space: nowrap; overflow: hidden; } .widget.double .adventure { width: 304px; height: 105px; background: none; } .widget.double .adventure:before { content: ''; background: url("../../desktop/images/general/normal/widget-frame-double-adventure.png?v=20240109145540") no-repeat top center transparent; width: 304px; height: 105px; display: block; position: absolute; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .widget.double .adventure:before { background: url("../../desktop/images/general/retina/widget-frame-double-adventure@2x.png?v=20240109145540") no-repeat top center transparent; background-size: 304px 105px; } } .widget.double .adventure:hover:before { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .widget.double .adventure .title { bottom: 50px; } .widget.double .adventure .progress-gauge { width: 216px; margin: 74px 0 0 16px; position: absolute; } .widget.double .adventure .progress-gauge .progress-highlightbar { width: 232px; background: #f5f7ff; border: 1px solid #f5f7ff; } .widget.double .adventure .progress-gauge .progress-highlightbar .pointer { right: -44px; bottom: -9px; margin: 0; } .widget.double .adventure .progress-gauge .progress-highlightbar .pointer p { font-size: 18px; line-height: 20px; color: #f5f7ff; } .widget.double .adventure .progress-gauge .progress-highlightbar .progress-highlight { height: 7px; } .widget.double .adventure .final-trophy-widget { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1232px -754px; width: 15px; height: 27px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; right: 20px; bottom: 14px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .widget.double .adventure .final-trophy-widget { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .widget.double .adventure.locked .title { bottom: 60px; } .widget.double .adventure.locked .message { position: absolute; text-align: center; width: 100%; top: 47px; } .widget.double .adventure.locked .message span { display: block; font-size: 11px; text-transform: uppercase; } .widget.double .adventure.locked:hover .message { color: #f8bb81; } .widget.double .adventure.locked:hover .message span { color: #f8bb81; } .widget.double .aht:hover { cursor: default; } .widget.double .aht:hover .title, .widget.double .aht:hover .icon { color: #5e63bc; } .widget.double .aht .aht-block { text-transform: uppercase; line-height: 28px; } .widget.double .aht .aht-block .controls { position: absolute; } .widget.double .aht .aht-block .controls .btn-previous { left: 12px; margin: 0; top: -36px; display: block; position: absolute; } .widget.double .aht .aht-block .controls .btn-next { right: 12px; margin: 0; top: -36px; display: block; position: absolute; } .widget.double .aht .aht-block ul { width: 230px; margin: 15px auto 0; list-style: none; text-align: center; } .widget.double .aht .aht-block ul li { display: inline-block; width: 112px; margin-top: 15px; font-size: 18px; line-height: 18px; color: #5e63bc; } .widget.double .aht .aht-block ul li:nth-child(1) { border-right: 1px solid #6d8df0; } .widget.double .aht .aht-block ul li:nth-child(2) { border-left: 1px solid #6d8df0; } .widget.double .aht .aht-block ul li span { display: block; font-size: 15px; line-height: 18px; color: #6d8df0; } .widget.double .badges .col-right > span { display: block; font-size: 11px; line-height: 15px; color: #6d8df0; text-transform: uppercase; padding: 8px 0 0 0; } .widget.double .badges .col-right .frame { width: 100px; height: auto; margin: 0 auto; display: block; overflow: hidden; } .widget.double .badges .col-right .frame .badge { margin: 0; width: 100px; } .widget.double .badges .col-right .frame .badge .badge-icon { -moz-transform: scale(0.5, 0.5); -o-transform: scale(0.5, 0.5); -ms-transform: scale(0.5, 0.5); -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); margin: -18px auto; } .widget.double .badges .col-right .frame .badge .badge-title { text-align: center; font-size: 11px; line-height: 15px; padding: 0 4px 4px; } .widget.double .badges:hover .col-right span, .widget.double .badges:hover .col-right .frame { color: #f8bb81; } .widget.double .battles .col-right .frame { width: 115px; height: 75px; margin: 12px 0 0; } .widget.double .battles .col-right .frame ul { margin: 5px 12px; padding: 0; list-style: none; } .widget.double .battles .col-right .frame ul li { width: 100%; font-size: 18px; line-height: 22px; color: #5e63bc; text-align: left; } .widget.double .battles .col-right .frame ul li span { font-size: 15px; line-height: 15px; color: #6d8df0; text-transform: uppercase; } .widget.double .battles .col-right .frame .message { font-size: 15px; line-height: 15px; padding: 20px 0 0; } .widget.double .battles .col-right .frame .message span { font-size: 15px; line-height: 18px; text-transform: uppercase; display: block; } .widget.double .battles:hover .col-right .frame { color: #f8bb81; } .widget.double .battles:hover .col-right .frame ul li { color: #f8bb81; } .widget.double .battles:hover .col-right .frame ul li span { color: #f8bb81; } .widget.double .examworld { background: url("../../desktop/images/general/normal/widget-frame-double-exam.png?v=20240109145540") no-repeat top center transparent; background-size: 304px 105px; width: 304px; height: 105px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .widget.double .examworld { background: url("../../desktop/images/general/retina/widget-frame-double-exam@2x.png?v=20240109145540") no-repeat top center transparent; background-size: 304px 105px; } } .widget.double .examworld .title { bottom: 50px; } .widget.double .examworld .progress-gauge { width: 216px; margin: 74px 0 0 16px; position: absolute; } .widget.double .examworld .progress-gauge .progress-highlightbar { width: 232px; background: #f5f7ff; border: 1px solid #f5f7ff; } .widget.double .examworld .progress-gauge .progress-highlightbar .pointer { right: -44px; bottom: -9px; margin: 0; } .widget.double .examworld .progress-gauge .progress-highlightbar .pointer p { font-size: 18px; line-height: 20px; color: #5e63bc; } .widget.double .examworld .progress-gauge .progress-highlightbar .progress-highlight { height: 7px; } .widget.double .examworld .message { position: absolute; text-align: center; width: 100%; top: 70px; } .widget.double .examworld .message span { display: block; } .widget.double .examworld:hover .message { color: #f8bb81; } .widget.double .examworld.locked .title { bottom: 60px; } .widget.double .examworld.locked .message { position: absolute; text-align: center; width: 100%; top: 47px; } .widget.double .examworld.locked .message span { display: block; font-size: 11px; text-transform: uppercase; } .widget.double .missionlist { background: url("../../desktop/images/general/normal/widget-frame-double-missionlist.png?v=20240109145540") no-repeat top center transparent; background-size: 304px 105px; width: 304px; height: 105px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .widget.double .missionlist { background: url("../../desktop/images/general/retina/widget-frame-double-missionlist@2x.png?v=20240109145540") no-repeat top center transparent; background-size: 304px 105px; } } .widget.double .missionlist .title { bottom: 50px; } .widget.double .missionlist .progress-gauge { width: 216px; margin: 74px 0 0 16px; position: absolute; } .widget.double .missionlist .progress-gauge .progress-highlightbar { width: 232px; background: #f5f7ff; border: 1px solid #f5f7ff; } .widget.double .missionlist .progress-gauge .progress-highlightbar .pointer { right: -44px; bottom: -9px; margin: 0; } .widget.double .missionlist .progress-gauge .progress-highlightbar .pointer p { font-size: 18px; line-height: 20px; color: #5e63bc; } .widget.double .missionlist .progress-gauge .progress-highlightbar .progress-highlight { height: 7px; } .widget.double .missionlist .message { position: absolute; text-align: center; width: 100%; top: 70px; } .widget.double .missionlist .message span { display: block; } .widget.double .missionlist:hover .message { color: white; } .widget.double .missionlist:hover .message span { color: white; } .widget.double .skills .col-right .icon { font-size: 24px; color: #5e63bc; margin-top: 9px; } .widget.double .skills .col-right .icon span { display: block; font-size: 15px; line-height: 15px; color: #6d8df0; text-transform: uppercase; padding: 3px 0 0 0; } .widget.double .skills .col-right .frame { width: 100px; height: 30px; margin: 5px auto 0; table-layout: fixed; white-space: nowrap; overflow: hidden; } .widget.double .skills .col-right .frame span { display: table-cell; vertical-align: middle; text-align: center; font-size: 11px; line-height: 15px; text-transform: uppercase; padding: 0 4px; } .widget.double .skills:hover .col-right .icon, .widget.double .skills:hover .col-right .frame { color: #f8bb81; } .widget.double .skills:hover .col-right .icon span, .widget.double .skills:hover .col-right .frame span { color: #f8bb81; } .widget .new::before { content: ''; position: absolute; right: -14px; top: -16px; z-index: 100; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -822px -1012px; width: 28px; height: 28px; background-repeat: no-repeat; overflow: hidden; display: block; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .widget .new::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .widget .title { position: absolute; bottom: 7px; display: block; width: 100%; padding: 0 12px; font-size: 13px; line-height: 15px; text-transform: uppercase; } .widget .icon { display: block; font-size: 40px; margin-top: 16px; } .widget .icon[data-icon]:before { line-height: normal; } .widget .icon[class^="icon-"]:before, .widget .icon[class*=" icon-"]:before { line-height: normal; } .widget .icon.icon-stamp span { position: absolute; width: 100%; left: 0; font-size: 24px; line-height: 40px; } .widget .icon.icon-stamp2 { position: relative; font-size: 40px; } .widget .icon.icon-stamp2 span { position: absolute; width: 100%; left: 0; font-size: 24px; line-height: 40px; } /* ===== end widgets ===== */ .section-achievements .achievements-block { margin: 24px 0 0; } .section-achievements .achievements-block.open { border-top: 1px solid #6d8df0; margin: 0 0 0; padding-top: 24px; } .section-achievements .achievement-list { list-style: none; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; } .section-achievements .achievement-list li { margin: 0 16px 24px; width: 136px; position: relative; } .section-achievements .achievement-list li .achievement-block { vertical-align: top; } .section-achievements .achievement-list li .achievement-block .achievement-info { position: static; } /* ====== start animations ===== */ /* ====== end animations ===== */ .section-adventure { /* --------- start intro --------- */ /* --------- end intro --------- */ /* --------- start play versus --------- */ /* --------- end play versus --------- */ /* --------- start play quiz --------- */ /* --------- end play quiz --------- */ /* --------- start quiz result --------- */ } .section-adventure .bg-colored { background: rgba(245, 247, 255, 0.5); } .section-adventure .button-row.flex { display: flex; justify-content: center; } .section-adventure .button-row.flex .button-col { padding: 10px; } .section-adventure .button-row.flex-center { display: flex; justify-content: center; } .section-adventure .button-row.flex-center .btn-default { margin: 0 6px; } .section-adventure .button-row.padding { padding: 16px; } .section-adventure .button-row.padding .info-txt { margin-bottom: 0; } .section-adventure .button-row .info-txt { margin-top: 6px; margin-bottom: 16px; } .section-adventure .button-row .info-txt.error { color: #f75b5f; } .section-adventure .avatar-info { line-height: 21px; overflow: hidden; text-transform: uppercase; } .section-adventure .avatar-info .nickname { font-size: 18px; color: #f08978; } .section-adventure .avatar-info .name { font-size: 15px; color: #5e63bc; } .section-adventure h3.sub-title { margin-top: 8px; color: #f08978; } .section-adventure .row-flex { display: flex; } .section-adventure .col-adventure-content { width: 640px; margin-left: 168px; margin-top: 20px; } .section-adventure .col-adventure-content .adventure-content { padding: 12px 16px; } .section-adventure .col-adventure-content .adventure-content .adventure-content-level-nav { display: flex; align-items: center; justify-content: center; padding: 12px 0; } .section-adventure .col-adventure-content .adventure-content .adventure-content-level-nav .adventure-content-level-title { display: inline-block; padding: 0 12px; text-transform: uppercase; } .section-adventure .avatar-bot-frame { width: 400px; height: 400px; margin: 16px auto 16px; position: relative; } .section-adventure .avatar-bot-frame::before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: 0px 0px; width: 400px; height: 400px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; top: 0; left: 0; z-index: 2; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure .avatar-bot-frame::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure .avatar-bot-frame img { margin: 22px auto; width: 356px; height: 356px; } .section-adventure .adventure-level-description { margin: 24px auto 16px; } .section-adventure .col-history-block { width: 170px; margin-left: 32px; margin-top: 20px; } .section-adventure .col-history-block .history-block { padding: 8px 0; overflow: hidden; text-align: center; } .section-adventure .col-history-block .history-block .history-block-nav .btn-up { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1002px -309px; width: 18px; height: 18px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure .col-history-block .history-block .history-block-nav .btn-up { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure .col-history-block .history-block .history-block-nav .btn-down { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1002px -291px; width: 18px; height: 18px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure .col-history-block .history-block .history-block-nav .btn-down { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure .col-history-block .history-block .history-block-nav .btn-up, .section-adventure .col-history-block .history-block .history-block-nav .btn-down { text-indent: -9999px; font-size: 0; line-height: 0; display: inline-block; background-color: transparent; border: 0; margin: 0 6px; } .section-adventure .col-history-block .history-block .history-block-nav .btn-up:hover, .section-adventure .col-history-block .history-block .history-block-nav .btn-down:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .section-adventure .col-history-block .history-block .history-best-score { width: 100%; text-align: left; overflow: hidden; display: block; margin: 0 0 12px 0; padding: 6px; background: rgba(248, 187, 129, 0.2); } .section-adventure .col-history-block .history-block .history-best-score h5 { font-size: 15px; color: #6d8df0; font-weight: normal; text-transform: uppercase; text-align: center; margin: 0 0 8px; } .section-adventure .col-history-block .history-block .history-block-list { overflow-y: hidden; margin-top: 6px; } .section-adventure .col-history-block .history-block .history-block-list .history-list { margin: 0; } .section-adventure .col-history-block .history-block .history-block-list .history-list li { width: 100%; text-align: left; overflow: hidden; display: block; margin: 6px 0; padding: 0 6px; } .section-adventure .col-history-block .history-block .score-info { background: rgba(248, 187, 129, 0.2); overflow: hidden; display: block; padding: 6px 0 6px 6px; } .section-adventure .col-history-block .history-block .score-info .points { font-size: 15px; display: block; margin: 0 40px 0 0; } .section-adventure .col-history-block .history-block .score-info .date { float: left; font-size: 13px; line-height: 15px; margin-top: 4px; } .section-adventure .col-history-block .history-block .score-info .date span { margin: 0 8px 0 0; } .section-adventure .col-history-block .history-block .score-info .date .time { margin: 0; } .section-adventure .col-history-block .history-block .score-info .result { float: right; } .section-adventure .col-history-block .history-block .score-info .result.lost { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -544px -1055px; width: 40px; height: 34px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure .col-history-block .history-block .score-info .result.lost { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure .col-history-block .history-block .score-info .result.won { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -584px -1055px; width: 40px; height: 34px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure .col-history-block .history-block .score-info .result.won { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure .unlockable-items { display: flex; justify-content: center; align-items: center; margin-bottom: 24px; } .section-adventure .unlockable-items .unlockable-item { width: 134px; height: 134px; display: flex; justify-content: center; align-items: center; position: relative; margin: 12px; } .section-adventure .unlockable-items .unlockable-item::before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -400px -219px; width: 134px; height: 134px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; top: 0; left: 0; z-index: -1; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure .unlockable-items .unlockable-item::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure .unlockable-items .unlockable-item.locked { pointer-events: none; } .section-adventure .unlockable-items .unlockable-item.locked::after { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -758px -457px; width: 40px; height: 44px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); z-index: 2; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure .unlockable-items .unlockable-item.locked::after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure.adventure-play-versus .avatar-info { margin: 12px 0 0 0; } .section-adventure.adventure-play-versus .adventure-vs { margin: 0 auto 32px; } .section-adventure.adventure-play-versus .quiz-intro-info { padding: 12px 16px; margin-bottom: 16px; } .section-adventure.adventure-play-versus .quiz-intro-info .info-row { font-size: 30px; line-height: 30px; color: #5e63bc; text-transform: uppercase; text-align: left; display: flex; align-items: center; justify-content: center; width: 100%; margin: 12px 0; height: 62px; } .section-adventure.adventure-play-versus .quiz-intro-info .info-row span { text-align: left; width: 50%; } .section-adventure.adventure-play-versus .quiz-intro-info .info-row span.label { font-size: 21px; line-height: 21px; color: #6d8df0; margin: 0 40px 0 0; text-align: right; } .section-adventure.adventure-play-versus .quiz-intro-info .info-row .difficulty-board { width: 50%; height: 62px; } .section-adventure.adventure-play-versus .quiz-intro-info .info-row .difficulty-board img { width: 47px; height: 62px; } .section-adventure .adventure-quiz-block { padding: 16px; margin-top: 20px; } .section-adventure .adventure-quiz-block-answers { padding: 16px; margin-top: 20px; background: rgba(248, 187, 129, 0.1); display: flex; align-items: start; justify-content: space-between; } .section-adventure .adventure-quiz-block-answers .vs { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -802px -395px; width: 165px; height: 165px; background-repeat: no-repeat; overflow: hidden; display: block; margin-top: 80px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure .adventure-quiz-block-answers .vs { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure .adventure-quiz-header { height: 54px; display: flex; align-items: center; justify-content: space-around; position: relative; } .section-adventure .adventure-quiz-header .status { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -534px -277px; width: 63px; height: 54px; background-repeat: no-repeat; overflow: hidden; display: block; text-align: center; line-height: 54px; font-size: 15px; color: #5e63bc; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure .adventure-quiz-header .status { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure .adventure-quiz-header .progress-gauge { margin-top: 0; margin-right: 24px; padding-top: 0; height: 9px; } .section-adventure .adventure-quiz-header .progress-gauge::after { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -360px -1098px; width: 35px; height: 40px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; right: -4px; top: 5px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure .adventure-quiz-header .progress-gauge::after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure .adventure-question { margin: 16px 0; padding-top: 16px; border-top: 1px solid rgba(248, 187, 129, 0.5); min-height: 96px; } .section-adventure .adventure-quiz-answers { list-style: none; margin: 0; } .section-adventure .adventure-quiz-answers .adventure-quiz-answer { margin: 0 0 8px 0; } .section-adventure .adventure-quiz-answers .adventure-quiz-answer .btn-answer { position: relative; border: none; width: 100%; background: rgba(40, 87, 233, 0.5); display: flex; justify-content: flex-start; align-items: center; padding: 8px; } .section-adventure .adventure-quiz-answers .adventure-quiz-answer .btn-answer.selected { background: rgba(40, 87, 233, 0.8); } .section-adventure .adventure-quiz-answers .adventure-quiz-answer .btn-answer.selected:hover { background: rgba(40, 87, 233, 0.8); cursor: default; } .section-adventure .adventure-quiz-answers .adventure-quiz-answer .btn-answer.answer-correct { background: rgba(244, 148, 57, 0.8); } .section-adventure .adventure-quiz-answers .adventure-quiz-answer .btn-answer.answer-correct:hover { background: rgba(244, 148, 57, 0.8); cursor: default; } .section-adventure .adventure-quiz-answers .adventure-quiz-answer .btn-answer:hover { background: rgba(109, 141, 240, 0.5); } .section-adventure .adventure-quiz-answers .adventure-quiz-answer .btn-answer:hover.no-hover { background: rgba(40, 87, 233, 0.5); cursor: default; } .section-adventure .adventure-quiz-answers .adventure-quiz-answer .answer-option { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -590px -898px; width: 59px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; color: #5e63bc; font-size: 40px; text-shadow: 2px 2px 0px #f8bb81; flex-grow: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin: 0 12px 0 4px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure .adventure-quiz-answers .adventure-quiz-answer .answer-option { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure .adventure-quiz-answers .adventure-quiz-answer .answer-text { text-align: left; color: #5e63bc; } .section-adventure .adventure-quiz-answers .adventure-quiz-answer .answer-text .markdown { font-size: 16px; line-height: 18px; } .section-adventure .quiz-answered-block-header { display: flex; align-items: center; justify-content: flex-end; margin-top: 20px; } .section-adventure .quiz-answered-block-header h3 { width: 100%; text-align: center; color: #5e63bc; width: 126px; } .section-adventure .quiz-answered-block { display: block; width: 126px; } .section-adventure .quiz-answered-block .avatar-block { height: 200px; } .section-adventure .quiz-answered-block .avatar-block .avatar-container { margin: 0 auto; } .section-adventure .quiz-answered-block .answer-block { width: 126px; margin-top: 60px; margin-bottom: 40px; text-align: center; position: relative; } .section-adventure .quiz-answered-block .answer-block .answer { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1132px 0px; width: 120px; height: 120px; background-repeat: no-repeat; overflow: hidden; display: block; color: #5e63bc; font-size: 50px; text-shadow: 2px 2px 0px #f8bb81; flex-grow: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin: 0 auto; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure .quiz-answered-block .answer-block .answer { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure .quiz-answered-block .answer-block .answer::after { content: url("../../shared/images/adventure/general/normal/dots-animation.gif?v=20240109145540"); position: absolute; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure .quiz-answered-block .answer-block .answer::after { content: url("../../shared/images/adventure/general/retina/dots-animation@2x.gif?v=20240109145540"); } } .section-adventure .quiz-answered-block .answer-block .answer.answered::after { content: ''; } .section-adventure .quiz-answered-block .answer-block .answer.correct { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1132px -120px; width: 120px; height: 120px; background-repeat: no-repeat; overflow: hidden; display: block; text-indent: -9999px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure .quiz-answered-block .answer-block .answer.correct { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure .quiz-answered-block .answer-block .answer.correct::after { content: ''; } .section-adventure .quiz-answered-block .answer-block .answer.incorrect { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1132px -240px; width: 120px; height: 120px; background-repeat: no-repeat; overflow: hidden; display: block; text-indent: -9999px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure .quiz-answered-block .answer-block .answer.incorrect { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure .quiz-answered-block .answer-block .answer.incorrect::after { content: ''; } .section-adventure.adventure-result .player-result-block { display: flex; align-items: center; justify-content: space-around; padding: 10px 0; margin: 20px 0; position: relative; } .section-adventure.adventure-result .player-result-block.winner::before { content: ''; background: url("../images/adventure/general/retina/star-confetti-animation@2x.gif?v=20240109145540") repeat; width: 100%; height: 100%; position: absolute; z-index: 100; left: 0; top: 0; } .section-adventure.adventure-result .player-block { width: 136px; } .section-adventure.adventure-result .player-block .avatar-container { margin: 12px auto 0; } .section-adventure.adventure-result .result-score-screen-block { width: 420px; height: 125px; position: relative; display: flex; align-items: center; justify-content: center; z-index: 200; } .section-adventure.adventure-result .result-score-screen-block::before { content: url("../images/adventure/general/normal/frame-result.png?v=20240109145540"); position: absolute; top: 0; left: 0; z-index: -1; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure.adventure-result .result-score-screen-block::before { content: url("../images/adventure/general/retina/frame-result@2x.png?v=20240109145540"); } } .section-adventure.adventure-result .result-score-screen-block .result-data { position: absolute; display: flex; justify-content: space-around; width: 100%; margin-bottom: 2px; } .section-adventure.adventure-result .result-score-screen-block .result-data div { flex-grow: 1; text-align: center; width: 0; position: relative; padding: 10px 0 0; } .section-adventure.adventure-result .result-score-screen-block .result-data div::before { content: ''; margin: 0 auto 12px; } .section-adventure.adventure-result .result-score-screen-block .result-data div.questions-correct::before { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1096px -694px; width: 36px; height: 44px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure.adventure-result .result-score-screen-block .result-data div.questions-correct::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure.adventure-result .result-score-screen-block .result-data div.questions-correct span { font-size: 13px; } .section-adventure.adventure-result .result-score-screen-block .result-data div.questions-correct span:nth-child(1) { font-size: 24px; } .section-adventure.adventure-result .result-score-screen-block .result-data div.time { border-left: 1px dotted #f08978; border-right: 1px dotted #f08978; } .section-adventure.adventure-result .result-score-screen-block .result-data div.time::before { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -136px -1098px; width: 36px; height: 44px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure.adventure-result .result-score-screen-block .result-data div.time::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure.adventure-result .result-score-screen-block .result-data div.time span { font-size: 18px; } .section-adventure.adventure-result .result-score-screen-block .result-data div.score::before { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -172px -1098px; width: 36px; height: 44px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure.adventure-result .result-score-screen-block .result-data div.score::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure.adventure-result .result-score-screen-block .result-data div.score span { font-size: 24px; } .section-adventure.adventure-result .result-score-screen-block .result-data div span { height: 26px; display: inline-block; vertical-align: sub; } .section-battle-overview .tab-block .nav-tabs.adventure-tabs { padding: 20px 0 0 0; } .section-battle-overview .tab-block .nav-tabs .nav-item { position: relative; } .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab.active .adventure-tab-background { opacity: 1; } .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab .nav-link { background: transparent; position: relative; margin: 0; height: 36px; line-height: 30px; padding: 0 20px; } .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab .nav-link:before, .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab .nav-link:after { top: 33px; } .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab .nav-link.active { border-color: transparent transparent transparent; color: #f5f7ff; } .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab .nav-link.active:before, .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab .nav-link.active:after { background-color: #5e63bc; } .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab .adventure-tab-background { content: ''; z-index: -10; width: 100%; height: 36px; transform: translate(-50%, 0); left: 50%; top: -2px; display: block; position: absolute; opacity: 0.5; background: url("../../desktop/images/adventure/adventure-overview-block/normal/adventure-overview-tab.png?v=20240109145540") no-repeat center top; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab .adventure-tab-background { background: url("../../desktop/images/adventure/adventure-overview-block/retina/adventure-overview-tab@2x.png?v=20240109145540") no-repeat center top; background-size: 300px 36px; } } .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab .adventure-tab-background:before { content: ""; top: 0; position: absolute; left: 0px; width: 12px; height: 36px; background: url("../../desktop/images/adventure/adventure-overview-block/normal/adventure-overview-tab-left.png?v=20240109145540") no-repeat center top; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab .adventure-tab-background:before { background: url("../../desktop/images/adventure/adventure-overview-block/retina/adventure-overview-tab-left@2x.png?v=20240109145540") no-repeat center top; background-size: 12px 36px; } } .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab .adventure-tab-background:after { content: ""; top: 0; position: absolute; right: 0px; width: 12px; height: 36px; background: url("../../desktop/images/adventure/adventure-overview-block/normal/adventure-overview-tab-right.png?v=20240109145540") no-repeat center top; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab .adventure-tab-background:after { background: url("../../desktop/images/adventure/adventure-overview-block/retina/adventure-overview-tab-right@2x.png?v=20240109145540") no-repeat center top; background-size: 12px 36px; } } .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab:hover { color: #f5f7ff; } .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab:hover .adventure-tab-background { opacity: 1; } .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab:hover .nav-link { background: transparent; } .section-battle-overview .tab-block .tab-content .tab-pane.adventure-pane { border-right: 1px solid #5e63bc; border-bottom: 1px solid #5e63bc; border-left: 1px solid #5e63bc; } .adventure-overview-block { width: 640px; height: 422px; padding: 25px; background: url("../../desktop/images/adventure/adventure-overview-block/normal/adventure-overview-block-bg.png?v=20240109145540") no-repeat center top; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .adventure-overview-block { background: url("../../desktop/images/adventure/adventure-overview-block/retina/adventure-overview-block-bg@2x.png?v=20240109145540") no-repeat center top; background-size: 640px 422px; } } .adventure-overview-block .title { display: block; text-align: center; font-size: 24px; text-transform: uppercase; color: #f5f7ff; margin: 0 0 15px 0; } .adventure-overview-block .goal-text { color: #f5f7ff; text-transform: uppercase; font-size: 18px; line-height: 36px; display: block; text-align: center; } .adventure-overview-block .progression-block { height: 95px; background-color: rgba(202, 137, 229, 0.2); } .adventure-overview-block .progression-block .progress-gauge { width: 512px; margin: 0 auto; padding: 17px 0px 0px 0px; height: 45px; } .adventure-overview-block .progression-block .progress-gauge .progress-highlightbar { width: 510px; background-color: #f5f7ff; border: 1px solid #f5f7ff; box-sizing: content-box; height: 10px; } .adventure-overview-block .progression-block .progress-gauge .progress-highlightbar .progress-highlight { height: 10px; z-index: auto; } .adventure-overview-block .progression-block .progress-gauge .pointer p { width: 44px; height: 44px; border: 1px solid #f5f7ff; border-radius: 100px; background-color: #6d8df0; margin-top: 6px; box-sizing: content-box; } .adventure-overview-block .progression-block .progress-gauge .pointer p span { color: #5e63bc; line-height: 42px; font-size: 24px; } .adventure-overview-block .chapters-block { display: flex; justify-content: space-between; position: relative; } .adventure-overview-block .chapters-block .chapter { width: 114px; height: 155px; box-sizing: border-box; margin: 30px 0 0 0; position: relative; } .adventure-overview-block .chapters-block .chapter.active { background-color: rgba(202, 137, 229, 0.2); } .adventure-overview-block .chapters-block .chapter.active:before { content: ''; display: block; position: absolute; width: 0; height: 0; border-style: solid; border-width: 22px 23px 0 23px; border-color: rgba(202, 137, 229, 0.2) transparent transparent transparent; left: 50%; transform: translate(-50%, -30px); } .adventure-overview-block .chapters-block .chapter .chapter-image { margin: 10px auto 0 auto; } .adventure-overview-block .chapters-block .chapter.chapter-1.completed .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-1-completed.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-1.open .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-1-open.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-1.locked .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-1-locked.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-1.disabled { opacity: 1; } .adventure-overview-block .chapters-block .chapter.chapter-1.disabled .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-1-disabled.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .adventure-overview-block .chapters-block .chapter.chapter-1.completed .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-1-completed@2x.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-1.open .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-1-open@2x.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-1.locked .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-1-locked@2x.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-1.disabled { opacity: 1; } .adventure-overview-block .chapters-block .chapter.chapter-1.disabled .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-1-disabled@2x.png?v=20240109145540"); } } .adventure-overview-block .chapters-block .chapter.chapter-2.completed .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-2-completed.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-2.open .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-2-open.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-2.locked .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-2-locked.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-2.disabled { opacity: 1; } .adventure-overview-block .chapters-block .chapter.chapter-2.disabled .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-2-disabled.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .adventure-overview-block .chapters-block .chapter.chapter-2.completed .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-2-completed@2x.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-2.open .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-2-open@2x.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-2.locked .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-2-locked@2x.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-2.disabled { opacity: 1; } .adventure-overview-block .chapters-block .chapter.chapter-2.disabled .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-2-disabled@2x.png?v=20240109145540"); } } .adventure-overview-block .chapters-block .chapter.chapter-3.completed .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-3-completed.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-3.open .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-3-open.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-3.locked .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-3-locked.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-3.disabled { opacity: 1; } .adventure-overview-block .chapters-block .chapter.chapter-3.disabled .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-3-disabled.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .adventure-overview-block .chapters-block .chapter.chapter-3.completed .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-3-completed@2x.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-3.open .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-3-open@2x.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-3.locked .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-3-locked@2x.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-3.disabled { opacity: 1; } .adventure-overview-block .chapters-block .chapter.chapter-3.disabled .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-3-disabled@2x.png?v=20240109145540"); } } .adventure-overview-block .chapters-block .chapter.chapter-4.completed .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-4-completed.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-4.open .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-4-open.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-4.locked .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-4-locked.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-4.disabled { opacity: 1; } .adventure-overview-block .chapters-block .chapter.chapter-4.disabled .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-4-disabled.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .adventure-overview-block .chapters-block .chapter.chapter-4.completed .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-4-completed@2x.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-4.open .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-4-open@2x.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-4.locked .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-4-locked@2x.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-4.disabled { opacity: 1; } .adventure-overview-block .chapters-block .chapter.chapter-4.disabled .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-4-disabled@2x.png?v=20240109145540"); } } .adventure-overview-block .chapters-block .chapter.chapter-5.completed .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-5-completed.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-5.open .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-5-open.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-5.locked .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-5-locked.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-5.disabled { opacity: 1; } .adventure-overview-block .chapters-block .chapter.chapter-5.disabled .chapter-image { content: url("../images/adventure/chapters/normal/chapter-goal-5-disabled.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .adventure-overview-block .chapters-block .chapter.chapter-5.completed .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-5-completed@2x.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-5.open .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-5-open@2x.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-5.locked .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-5-locked@2x.png?v=20240109145540"); } .adventure-overview-block .chapters-block .chapter.chapter-5.disabled { opacity: 1; } .adventure-overview-block .chapters-block .chapter.chapter-5.disabled .chapter-image { content: url("../images/adventure/chapters/retina/chapter-goal-5-disabled@2x.png?v=20240109145540"); } } .adventure-overview-block .chapters-block .chapter .status { display: flex; justify-content: center; align-items: center; width: 100%; height: 40px; overflow: hidden; } .adventure-overview-block .chapters-block .chapter .status span { color: #f5f7ff; font-size: 15px; line-height: 18px; text-transform: uppercase; } .adventure-overview-block .button-block { display: flex; justify-content: center; align-items: center; height: 68px; } .section-adventure.adventure-map { background: url("../images/adventure/background/adventure-section-bg.jpg?v=20240109145540") no-repeat top center; } .section-adventure.adventure-map .outerWrapper { width: 100%; height: 300px; position: relative; } .section-adventure.adventure-map .outerWrapper svg { position: absolute; left: 0; } .section-adventure.adventure-map .outerWrapper svg path { fill: none; stroke: #DABDD8; stroke-width: 5; stroke-dasharray: 10, 10; } .section-adventure.adventure-map .outerWrapper svg polygon { fill: orange; } .section-adventure.adventure-map .adventure-world-block { position: relative; margin-top: 20px; } .section-adventure.adventure-map .adventure-world-block .unlock-requirements { position: absolute; padding: 10px; border-radius: 10px; border: 2px solid #5e63bc; background-color: #f5f7ff; } .section-adventure.adventure-map .adventure-world-block .unlock-requirements .unlock-text { font-size: 15px; color: #f08978; max-width: 110px; display: block; } .section-adventure.adventure-map .adventure-world-block .unlock-requirements .btn-icon { margin: 6px 0 0 0; } .section-adventure.adventure-map .adventure-world-block svg { position: absolute; top: 0; left: 0; } .section-adventure.adventure-map .adventure-world-block .progression-holder { top: 38px; left: 38px; position: absolute; display: flex; align-items: center; z-index: 100; box-sizing: border-box; } .section-adventure.adventure-map .adventure-world-block .progression-holder .progress-gauge { height: 11px; width: 240px; margin: 0 12px 0 0; padding-top: 0; } .section-adventure.adventure-map .adventure-world-block .progression-holder .progress-gauge .progress-highlightbar { width: 240px; padding-top: 0; position: relative; height: 11px; border: 1px solid transparent; background: white; } .section-adventure.adventure-map .adventure-world-block .progression-holder .world-progress { font-size: 18px; line-height: 18px; color: white; } .section-adventure.adventure-map .adventure-world-block .adventure-world { width: 976px; height: 548px; content: url("../images/adventure/background/normal/adventure-world-bg.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure.adventure-map .adventure-world-block .adventure-world { content: url("../images/adventure/background/retina/adventure-world-bg@2x.png?v=20240109145540"); } } .section-adventure.adventure-map .adventure-world-block.locked .adventure-world { content: url("../images/adventure/background/normal/adventure-world-locked-bg.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure.adventure-map .adventure-world-block.locked .adventure-world { content: url("../images/adventure/background/retina/adventure-world-locked-bg@2x.png?v=20240109145540"); } } .section-adventure.adventure-map .adventure-world-block .world-locked-message { position: absolute; overflow: hidden; text-transform: uppercase; color: #f08978; font-size: 15px; line-height: 15px; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 224px; height: 105px; display: flex; align-items: center; justify-content: center; } .section-adventure.adventure-map .adventure-world-block .world-locked-message p { margin: 0; font-size: 15px; line-height: 15px; } .section-adventure.adventure-map .final-trophy-block { position: absolute; width: 65px; top: 435px; left: 880px; cursor: pointer; content: url("../images/adventure/general/normal/final-trophy.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure.adventure-map .final-trophy-block { content: url("../images/adventure/general/retina/final-trophy@2x.png?v=20240109145540"); } } .section-adventure.adventure-map .chapter-level { position: absolute; transform: translate(-50%, -50%); width: 44px; height: 44px; cursor: pointer; content: url("../images/adventure/levels/normal/level-open.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-level.completed { content: url("../images/adventure/levels/normal/level-completed.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-level.locked { content: url("../images/adventure/levels/normal/level-locked.png?v=20240109145540"); cursor: default; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure.adventure-map .chapter-level { content: url("../images/adventure/levels/retina/level-open@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-level.completed { content: url("../images/adventure/levels/retina/level-completed@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-level.locked { content: url("../images/adventure/levels/retina/level-locked@2x.png?v=20240109145540"); } } .section-adventure.adventure-map .chapter-level .level-name { display: inline-block; line-height: 30px; color: white; } @keyframes jump-shaking { 0% { transform: translateY(0); } 3.12% { transform: translateY(-3px); } 3.75% { transform: translateY(-3px) rotate(3deg); } 5% { transform: translateY(-3px) rotate(-3deg); } 6.25% { transform: translateY(-3px) rotate(3deg); } 7.5% { transform: translateY(-3px) rotate(-3deg); } 8.75% { transform: translateY(-3px) rotate(3deg); } 10% { transform: translateY(-3px) rotate(-3deg); } 11.25% { transform: translateY(-3px); } 12.5% { transform: translateY(0) rotate(0); } 15.62% { transform: translateY(-3px); } 16.25% { transform: translateY(-3px) rotate(3deg); } 17.5% { transform: translateY(-3px) rotate(-3deg); } 18.75% { transform: translateY(-3px) rotate(3deg); } 20% { transform: translateY(-3px) rotate(-3deg); } 21.25% { transform: translateY(-3px) rotate(3deg); } 22.5% { transform: translateY(-3px) rotate(-3deg); } 23.75% { transform: translateY(-3px); } 25% { transform: translateY(0) rotate(0); } 26% { transform: translateY(0); } } .section-adventure.adventure-map .chapter-goal { position: absolute; transform: translate(-50%, calc(-50% - 18px)); width: 70px; height: 102px; } .section-adventure.adventure-map .chapter-goal.goal-1.completed { cursor: pointer; } .section-adventure.adventure-map .chapter-goal.goal-1.completed .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-1-completed.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-1.open { cursor: pointer; } .section-adventure.adventure-map .chapter-goal.goal-1.open .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-1-open.png?v=20240109145540"); animation: jump-shaking 5s infinite; } .section-adventure.adventure-map .chapter-goal.goal-1.locked .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-1-locked.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-1.disabled { opacity: 1; } .section-adventure.adventure-map .chapter-goal.goal-1.disabled .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-1-disabled.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure.adventure-map .chapter-goal.goal-1.completed .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-1-completed@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-1.open .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-1-open@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-1.locked .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-1-locked@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-1.disabled { opacity: 1; } .section-adventure.adventure-map .chapter-goal.goal-1.disabled .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-1-disabled@2x.png?v=20240109145540"); } } .section-adventure.adventure-map .chapter-goal.goal-1.calibration.completed .img-holder, .section-adventure.adventure-map .chapter-goal.goal-1.calibration.open .img-holder, .section-adventure.adventure-map .chapter-goal.goal-1.calibration.locked .img-holder, .section-adventure.adventure-map .chapter-goal.goal-1.calibration.disabled .img-holder { content: url("../images/adventure/chapters/normal/calibration.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-2.completed { cursor: pointer; } .section-adventure.adventure-map .chapter-goal.goal-2.completed .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-2-completed.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-2.open { cursor: pointer; } .section-adventure.adventure-map .chapter-goal.goal-2.open .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-2-open.png?v=20240109145540"); animation: jump-shaking 5s infinite; } .section-adventure.adventure-map .chapter-goal.goal-2.locked .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-2-locked.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-2.disabled { opacity: 1; } .section-adventure.adventure-map .chapter-goal.goal-2.disabled .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-2-disabled.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure.adventure-map .chapter-goal.goal-2.completed .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-2-completed@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-2.open .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-2-open@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-2.locked .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-2-locked@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-2.disabled { opacity: 1; } .section-adventure.adventure-map .chapter-goal.goal-2.disabled .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-2-disabled@2x.png?v=20240109145540"); } } .section-adventure.adventure-map .chapter-goal.goal-2.calibration.completed .img-holder, .section-adventure.adventure-map .chapter-goal.goal-2.calibration.open .img-holder, .section-adventure.adventure-map .chapter-goal.goal-2.calibration.locked .img-holder, .section-adventure.adventure-map .chapter-goal.goal-2.calibration.disabled .img-holder { content: url("../images/adventure/chapters/normal/calibration.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-3.completed { cursor: pointer; } .section-adventure.adventure-map .chapter-goal.goal-3.completed .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-3-completed.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-3.open { cursor: pointer; } .section-adventure.adventure-map .chapter-goal.goal-3.open .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-3-open.png?v=20240109145540"); animation: jump-shaking 5s infinite; } .section-adventure.adventure-map .chapter-goal.goal-3.locked .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-3-locked.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-3.disabled { opacity: 1; } .section-adventure.adventure-map .chapter-goal.goal-3.disabled .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-3-disabled.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure.adventure-map .chapter-goal.goal-3.completed .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-3-completed@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-3.open .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-3-open@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-3.locked .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-3-locked@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-3.disabled { opacity: 1; } .section-adventure.adventure-map .chapter-goal.goal-3.disabled .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-3-disabled@2x.png?v=20240109145540"); } } .section-adventure.adventure-map .chapter-goal.goal-3.calibration.completed .img-holder, .section-adventure.adventure-map .chapter-goal.goal-3.calibration.open .img-holder, .section-adventure.adventure-map .chapter-goal.goal-3.calibration.locked .img-holder, .section-adventure.adventure-map .chapter-goal.goal-3.calibration.disabled .img-holder { content: url("../images/adventure/chapters/normal/calibration.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-4.completed { cursor: pointer; } .section-adventure.adventure-map .chapter-goal.goal-4.completed .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-4-completed.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-4.open { cursor: pointer; } .section-adventure.adventure-map .chapter-goal.goal-4.open .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-4-open.png?v=20240109145540"); animation: jump-shaking 5s infinite; } .section-adventure.adventure-map .chapter-goal.goal-4.locked .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-4-locked.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-4.disabled { opacity: 1; } .section-adventure.adventure-map .chapter-goal.goal-4.disabled .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-4-disabled.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure.adventure-map .chapter-goal.goal-4.completed .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-4-completed@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-4.open .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-4-open@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-4.locked .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-4-locked@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-4.disabled { opacity: 1; } .section-adventure.adventure-map .chapter-goal.goal-4.disabled .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-4-disabled@2x.png?v=20240109145540"); } } .section-adventure.adventure-map .chapter-goal.goal-4.calibration.completed .img-holder, .section-adventure.adventure-map .chapter-goal.goal-4.calibration.open .img-holder, .section-adventure.adventure-map .chapter-goal.goal-4.calibration.locked .img-holder, .section-adventure.adventure-map .chapter-goal.goal-4.calibration.disabled .img-holder { content: url("../images/adventure/chapters/normal/calibration.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-5.completed { cursor: pointer; } .section-adventure.adventure-map .chapter-goal.goal-5.completed .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-5-completed.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-5.open { cursor: pointer; } .section-adventure.adventure-map .chapter-goal.goal-5.open .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-5-open.png?v=20240109145540"); animation: jump-shaking 5s infinite; } .section-adventure.adventure-map .chapter-goal.goal-5.locked .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-5-locked.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-5.disabled { opacity: 1; } .section-adventure.adventure-map .chapter-goal.goal-5.disabled .img-holder { content: url("../images/adventure/chapters/normal/chapter-goal-5-disabled.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure.adventure-map .chapter-goal.goal-5.completed .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-5-completed@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-5.open .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-5-open@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-5.locked .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-5-locked@2x.png?v=20240109145540"); } .section-adventure.adventure-map .chapter-goal.goal-5.disabled { opacity: 1; } .section-adventure.adventure-map .chapter-goal.goal-5.disabled .img-holder { content: url("../images/adventure/chapters/retina/chapter-goal-5-disabled@2x.png?v=20240109145540"); } } .section-adventure.adventure-map .chapter-goal.goal-5.calibration.completed .img-holder, .section-adventure.adventure-map .chapter-goal.goal-5.calibration.open .img-holder, .section-adventure.adventure-map .chapter-goal.goal-5.calibration.locked .img-holder, .section-adventure.adventure-map .chapter-goal.goal-5.calibration.disabled .img-holder { content: url("../images/adventure/chapters/normal/calibration.png?v=20240109145540"); } .section-adventure.adventure-map .path-block { position: absolute; top: 0; left: 0; width: 976px; height: 548px; } .section-adventure.adventure-map .path-block .path { position: absolute; top: 0; left: 0; width: 976px; height: 548px; } .section-adventure.adventure-map .path-block .path.open-1 { content: url("../images/adventure/path/normal/path-open-1.png?v=20240109145540"); } .section-adventure.adventure-map .path-block .path.completed-1 { content: url("../images/adventure/path/normal/path-completed-1.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure.adventure-map .path-block .path.open-1 { content: url("../images/adventure/path/retina/path-open-1@2x.png?v=20240109145540"); } .section-adventure.adventure-map .path-block .path.completed-1 { content: url("../images/adventure/path/retina/path-completed-1@2x.png?v=20240109145540"); } } .section-adventure.adventure-map .path-block .path.open-2 { content: url("../images/adventure/path/normal/path-open-2.png?v=20240109145540"); } .section-adventure.adventure-map .path-block .path.completed-2 { content: url("../images/adventure/path/normal/path-completed-2.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure.adventure-map .path-block .path.open-2 { content: url("../images/adventure/path/retina/path-open-2@2x.png?v=20240109145540"); } .section-adventure.adventure-map .path-block .path.completed-2 { content: url("../images/adventure/path/retina/path-completed-2@2x.png?v=20240109145540"); } } .section-adventure.adventure-map .path-block .path.open-3 { content: url("../images/adventure/path/normal/path-open-3.png?v=20240109145540"); } .section-adventure.adventure-map .path-block .path.completed-3 { content: url("../images/adventure/path/normal/path-completed-3.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure.adventure-map .path-block .path.open-3 { content: url("../images/adventure/path/retina/path-open-3@2x.png?v=20240109145540"); } .section-adventure.adventure-map .path-block .path.completed-3 { content: url("../images/adventure/path/retina/path-completed-3@2x.png?v=20240109145540"); } } .section-adventure.adventure-map .path-block .path.open-4 { content: url("../images/adventure/path/normal/path-open-4.png?v=20240109145540"); } .section-adventure.adventure-map .path-block .path.completed-4 { content: url("../images/adventure/path/normal/path-completed-4.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure.adventure-map .path-block .path.open-4 { content: url("../images/adventure/path/retina/path-open-4@2x.png?v=20240109145540"); } .section-adventure.adventure-map .path-block .path.completed-4 { content: url("../images/adventure/path/retina/path-completed-4@2x.png?v=20240109145540"); } } .section-adventure.adventure-map .path-block .path.open-5 { content: url("../images/adventure/path/normal/path-open-5.png?v=20240109145540"); } .section-adventure.adventure-map .path-block .path.completed-5 { content: url("../images/adventure/path/normal/path-completed-5.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure.adventure-map .path-block .path.open-5 { content: url("../images/adventure/path/retina/path-open-5@2x.png?v=20240109145540"); } .section-adventure.adventure-map .path-block .path.completed-5 { content: url("../images/adventure/path/retina/path-completed-5@2x.png?v=20240109145540"); } } .section-adventure.adventure-map .level-action-block { position: absolute; transform: translate(-50%, 36px); } .section-adventure.adventure-map .player { position: absolute; transform: translate(-50%, -50%); width: 50px; height: 60px; } .section-adventure.adventure-map .player .bg { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -967px -395px; width: 50px; height: 60px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-adventure.adventure-map .player .bg { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-adventure.adventure-map .player .avatar-holder { position: absolute; left: -1px; right: -1px; top: -1px; margin: auto; bottom: -1px; width: 44px; height: 52px; overflow: hidden; animation-delay: 2s; backface-visibility: hidden; opacity: 1; transition: opacity 0.2s linear; } .section-adventure.adventure-map .player .avatar-holder .avatar-container { left: 50%; position: absolute; transform: translate3d(-50%, -8px, 0); } .section-adventure.adventure-map .player .button-holder { left: 0; top: 0; position: absolute; width: 100%; height: 100%; animation-delay: 2s; opacity: 0; transition: opacity 0.2s linear; display: flex; align-items: center; justify-content: center; } .section-adventure.adventure-map .player.stopped .avatar-holder { animation: fadeOutFromFull 6s linear 2s infinite; } .section-adventure.adventure-map .player.stopped .button-holder { animation: fadeInFromNone 6s linear 2s infinite; } .section-adventure.adventure-map .player:hover .avatar-holder { opacity: 0; animation: none; } .section-adventure.adventure-map .player:hover .button-holder { opacity: 1; transition: opacity 0.2s linear; animation: none; } @-webkit-keyframes fadeInFromNone { 0% { opacity: 0; } 1% { opacity: 0; } 10% { opacity: 1; } 50% { opacity: 1; } 60% { opacity: 0; } } @-webkit-keyframes fadeOutFromFull { 0% { opacity: 1; } 1% { opacity: 1; } 10% { opacity: 0; } 50% { opacity: 0; } 60% { opacity: 1; } } .section-adventure.adventure-map h4 { position: absolute; } .section-adventure .chapter-block, .section-adventure .unlockables-block { display: inline-block; vertical-align: top; } .section-adventure .chapter-block h3, .section-adventure .unlockables-block h3 { text-align: center; margin: 20px 0; } .section-adventure .chapter-overview-block { padding: 0 8px; text-align: center; max-height: 80vh; overflow-y: auto; } .section-adventure .chapter-overview-block .chapter-block { width: 540px; margin: 0px 28px 0 0; } .section-adventure .chapter-overview-block .unlockables-block { width: 350px; margin: 0 12px 0 0; } .section-adventure .chapter-overview-block .unlockables-block .border-container { position: relative; } .section-adventure .chapter-overview-block .unlockables-block .border-container:before { content: ''; width: 2px; position: absolute; left: -20px; display: block; top: 0; height: 100%; background-color: #606c76; } .section-adventure .chapter-overview-block .chapter-unlockables-block { display: flex; flex-wrap: wrap; justify-content: space-around; position: relative; margin: 18px 0; } .section-adventure .chapter-overview-block .chapter-unlockables-block:before { content: ''; display: block; height: 2px; width: 100%; background-color: #606c76; position: absolute; top: -18px; left: 0; } .section-adventure .chapter-overview-block .chapter-unlockables-block .unlockable-container { width: 134px; margin: 0 0 20px 0; } .section-adventure .chapter-overview-block .unlockables-list { display: grid; grid-template: auto / auto auto auto; justify-content: space-between; margin-bottom: 0; } .section-adventure .chapter-overview-block .unlockables-list li { width: 106px; margin: 0 0 15px 0; } .section-adventure .chapter-overview-block .level-list { list-style: none; text-align: center; position: relative; } .section-adventure .chapter-overview-block .level-list:before { content: ''; display: block; position: absolute; width: 2px; height: calc(100% - 22px); background-color: #606c76; top: 0; right: -10px; } .section-adventure .chapter-overview-block .level-list li { width: 160px; display: inline-block; vertical-align: top; margin: 0 10px 20px 10px; } .section-adventure .chapter-overview-block .level-list li .level-info { text-align: left; margin: 10px 0 0 0; overflow: hidden; } .section-adventure .chapter-overview-block .level-list li .level-info .level-title { color: #6d8df0; font-size: 15px; line-height: 15px; display: block; width: 100%; margin-bottom: 4px; text-transform: uppercase; } .section-adventure .chapter-overview-block .level-list li .level-info .level-description { font-size: 15px; line-height: 15px; } .section-adventure .boss-container { width: 100%; position: relative; z-index: 10; } .section-adventure .boss-container .frame { z-index: 1; width: 100%; content: url("../../shared/images/adventure/bosses/boss-frame.png?v=20240109145540"); } .section-adventure .boss-container .boss { z-index: -1; width: 88%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .section-adventure .boss-container .level-status { position: absolute; z-index: 2; top: 61%; left: 63%; position: absolute; z-index: 2; width: 46%; transform: translate3d(0, 0, 0); } .section-adventure .boss-container .level-status.completed { content: url("../../shared/images/adventure/bosses/status-completed.png?v=20240109145540"); } .section-adventure .boss-container .level-status.open { content: url("../../shared/images/adventure/bosses/status-open.png?v=20240109145540"); } .section-adventure .boss-container .level-status.locked { content: url("../../shared/images/adventure/bosses/status-locked.png?v=20240109145540"); } .section-adventure .unlockable-container { width: 100%; position: relative; z-index: 10; } .section-adventure .unlockable-container .item-bg { width: 100%; content: url("../../shared/images/adventure/unlockables/item-bg.png?v=20240109145540"); } .section-adventure .unlockable-container .item { position: absolute; width: 90%; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); } .section-adventure .unlockable-container .overlay { display: none; position: absolute; width: 100%; top: 0; left: 0; } .section-adventure .unlockable-container .overlay.lock { content: url("../../shared/images/adventure/unlockables/item-overlay-locked.png?v=20240109145540"); } .section-adventure .unlockable-container .overlay.hidden { content: url("../../shared/images/adventure/unlockables/item-overlay-hidden.png?v=20240109145540"); } .section-adventure .unlockable-container.locked .overlay { display: block; } .section-adventure .modal.final-trophy .modal-dialog { width: 658px; } .section-adventure .modal.final-trophy .modal-dialog .modal-content { background-color: transparent; border: none; } .section-adventure .modal.final-trophy .modal-dialog .modal-content .btn-close { right: -6px; top: 50px; } .section-adventure .modal.final-trophy .modal-dialog .final-trophy-modal-block .final-trophy-header { width: 100%; content: url("../../desktop/images/adventure/modals/normal/modal-final-trophy-header.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure .modal.final-trophy .modal-dialog .final-trophy-modal-block .final-trophy-header { content: url("../../desktop/images/adventure/modals/retina/modal-final-trophy-header@2x.png?v=20240109145540"); } } .section-adventure .modal.final-trophy .modal-dialog .final-trophy-modal-block .final-trophy-middle { position: relative; background: url("../../desktop/images/adventure/modals/normal/modal-final-trophy-middle.png?v=20240109145540") repeat; background-size: 658px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure .modal.final-trophy .modal-dialog .final-trophy-modal-block .final-trophy-middle { background: url("../../desktop/images/adventure/modals/retina/modal-final-trophy-middle@2x.png?v=20240109145540") repeat; background-size: 658px; } } .section-adventure .modal.final-trophy .modal-dialog .final-trophy-modal-block .final-trophy-middle span { padding: 20px; color: #f5f7ff; text-transform: uppercase; text-align: center; display: block; font-size: 18px; line-height: 18px; } .section-adventure .modal.final-trophy .modal-dialog .final-trophy-modal-block .final-trophy-footer { width: 100%; content: url("../../desktop/images/adventure/modals/normal/modal-final-trophy-footer.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure .modal.final-trophy .modal-dialog .final-trophy-modal-block .final-trophy-footer { content: url("../../desktop/images/adventure/modals/retina/modal-final-trophy-footer@2x.png?v=20240109145540"); } } .section-adventure .modal.chapter-completed .modal-dialog { width: 658px; } .section-adventure .modal.chapter-completed .modal-dialog .modal-content { background-color: transparent; border: none; } .section-adventure .modal.chapter-completed .modal-dialog .modal-content .btn-close { right: -6px; top: 50px; } .section-adventure .modal.chapter-completed .modal-dialog .chapter-completed-modal-block .chapter-completed-header { width: 100%; height: 437px; background: url("../../desktop/images/adventure/modals/normal/modal-chapter-completed-header.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure .modal.chapter-completed .modal-dialog .chapter-completed-modal-block .chapter-completed-header { background: url("../../desktop/images/adventure/modals/retina/modal-chapter-completed-header@2x.png?v=20240109145540"); } } .section-adventure .modal.chapter-completed .modal-dialog .chapter-completed-modal-block .chapter-completed-header::before { clear: both; content: ""; display: table; height: 0; } .section-adventure .modal.chapter-completed .modal-dialog .chapter-completed-modal-block .chapter-completed-header .trophy { margin: -35px auto 0; } .section-adventure .modal.chapter-completed .modal-dialog .chapter-completed-modal-block .chapter-completed-header .trophy.chapter-1 { content: url("../../shared/images/adventure/chapters/chapter-1-completed.png?v=20240109145540"); width: 285px; height: 415px; } .section-adventure .modal.chapter-completed .modal-dialog .chapter-completed-modal-block .chapter-completed-header .trophy.chapter-2 { content: url("../../shared/images/adventure/chapters/chapter-2-completed.png?v=20240109145540"); width: 285px; height: 415px; } .section-adventure .modal.chapter-completed .modal-dialog .chapter-completed-modal-block .chapter-completed-header .trophy.chapter-3 { content: url("../../shared/images/adventure/chapters/chapter-3-completed.png?v=20240109145540"); width: 285px; height: 415px; } .section-adventure .modal.chapter-completed .modal-dialog .chapter-completed-modal-block .chapter-completed-header .trophy.chapter-4 { content: url("../../shared/images/adventure/chapters/chapter-4-completed.png?v=20240109145540"); width: 285px; height: 415px; } .section-adventure .modal.chapter-completed .modal-dialog .chapter-completed-modal-block .chapter-completed-header .trophy.chapter-5 { content: url("../../shared/images/adventure/chapters/chapter-5-completed.png?v=20240109145540"); width: 285px; height: 415px; } .section-adventure .modal.chapter-completed .modal-dialog .chapter-completed-modal-block .chapter-completed-middle { position: relative; background: url("../../desktop/images/adventure/modals/normal/modal-chapter-completed-middle.png?v=20240109145540") repeat; background-size: 658px; overflow: hidden; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure .modal.chapter-completed .modal-dialog .chapter-completed-modal-block .chapter-completed-middle { background: url("../../desktop/images/adventure/modals/retina/modal-chapter-completed-middle@2x.png?v=20240109145540") repeat; background-size: 658px; } } .section-adventure .modal.chapter-completed .modal-dialog .chapter-completed-modal-block .chapter-completed-middle .boss-container { width: 30%; float: left; margin-left: 8%; } .section-adventure .modal.chapter-completed .modal-dialog .chapter-completed-modal-block .chapter-completed-middle .chapter-completed-info { width: 50%; float: right; margin-right: 8%; } .section-adventure .modal.chapter-completed .modal-dialog .chapter-completed-modal-block .chapter-completed-middle h2 { font-size: 40px; line-height: 40px; } .section-adventure .modal.chapter-completed .modal-dialog .chapter-completed-modal-block .chapter-completed-footer { width: 100%; content: url("../../desktop/images/adventure/modals/normal/modal-chapter-completed-footer.png?v=20240109145540"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-adventure .modal.chapter-completed .modal-dialog .chapter-completed-modal-block .chapter-completed-footer { content: url("../../desktop/images/adventure/modals/retina/modal-chapter-completed-footer@2x.png?v=20240109145540"); } } .section-auth .intro { font-size: 18px; line-height: 21px; text-align: left; padding: 20px 0 20px 0; } .section-auth .intro.align-center { text-align: center; } .section-auth.section-register .team-name { text-transform: uppercase; text-align: center; margin: 0px 0 6px 0; font-size: 24px; line-height: 24px; } .section-auth.section-register h2 { margin-top: 82px; } .section-auth .container { padding-top: 166px; } .auth-split { height: 254px; } .auth-split h3 { margin-bottom: 9px; text-align: left; } .auth-split .user-player, .auth-split .new-player { margin-top: 32px; } .auth-split .user-player .servicelinks, .auth-split .new-player .servicelinks { display: inline-block; float: left; } .auth-split .user-player .servicelinks a, .auth-split .new-player .servicelinks a { float: left; clear: left; } .row-steps { margin: 42px auto 0; } .row-steps > div { text-align: center; } .row-steps > div h4 { font-size: 18px; line-height: 21px; } .row-steps > div .stepinfo { margin: 0 auto; } .row-steps > div:nth-child(1) .stepinfo { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: 0px -967px; width: 166px; height: 88px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .row-steps > div:nth-child(1) .stepinfo { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .row-steps > div:nth-child(2) .stepinfo { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -166px -967px; width: 166px; height: 88px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .row-steps > div:nth-child(2) .stepinfo { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .row-steps > div:nth-child(3) .stepinfo { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -332px -967px; width: 166px; height: 88px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .row-steps > div:nth-child(3) .stepinfo { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } /* ====== start animations ===== */ /* ====== end animations ===== */ .section-profile { /* ====== start new avatar ===== */ /* ====== end new avatar ===== */ } .section-profile .intro { font-size: 18px; line-height: 21px; text-align: left; padding: 20px 0 20px 0; } .section-profile .new-avatar { margin-top: 24px; } .section-profile .new-avatar h2 { margin-top: 16px; } .section-profile .new-avatar .avatar-container { float: left; margin-top: -80px; } .section-profile .new-avatar .btn-default { margin: 40px 88px 0 0; } /* ====== start animations ===== */ /* ====== end animations ===== */ .section-avatarbuilder .button-block { text-align: right; } .section-avatarbuilder .button-block .btn-default { margin: 0 0 0 6px; } .section-avatarbuilder .nickname-block { display: grid; align-items: center; justify-content: center; grid-template: auto / auto auto auto; grid-gap: 10px; } .section-avatarbuilder .nickname-block input[type=text] { width: 304px; } .section-avatarbuilder .nickname-block .character-counter { font-size: 18px; font-weight: 700; } .section-avatarbuilder .error-block { display: flex; justify-content: center; } .section-avatarbuilder .error-block .form-validation.error { margin-left: 36px; } .avatar-builder-main-block { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; align-items: center; } .avatar-builder-main-block .avatar-container { margin: 0 auto; } .avatar-builder-main-block .avatar-action-buttons { display: flex; gap: 10px; justify-content: center; } .avatar-builder-selectors-block { display: grid; grid-gap: 20px; padding: 20px 0; } /* ====== start switch gender ===== */ .switch-gender { display: flex; align-items: center; justify-content: flex-end; } .switch-gender a { margin: 0 8px; text-decoration: none; text-align: center; position: relative; } .switch-gender a.male { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1022px -400px; width: 110px; height: 200px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .switch-gender a.male { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .switch-gender a.male.active { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1022px -200px; width: 110px; height: 200px; background-repeat: no-repeat; overflow: hidden; display: block; cursor: default; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .switch-gender a.male.active { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .switch-gender a.female { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1022px 0px; width: 110px; height: 200px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .switch-gender a.female { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .switch-gender a.female.active { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -622px -257px; width: 110px; height: 200px; background-repeat: no-repeat; overflow: hidden; display: block; cursor: default; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .switch-gender a.female.active { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .switch-gender a:hover { transform: scale(1.05); cursor: pointer; } /* ====== end switch nav ===== */ .avatar-selector-container { display: flex; justify-content: center; align-items: center; background-color: rgba(94, 99, 188, 0.2); } .avatar-selector-container .item-selector { width: 100%; overflow-x: hidden; position: relative; z-index: 20; display: flex; align-items: center; flex-wrap: nowrap; } .avatar-selector-container .item-selector .list { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; display: flex; } .avatar-selector-container .item-selector .list li { margin: 0 2px; line-height: 0; } .avatar-selector-container .category-selector { height: 52px; } .avatar-selector-container .category-selector .part-item { height: 38px; width: 100px; transition-duration: 0.3s; background-color: white; position: relative; display: flex; justify-content: center; align-items: center; } .avatar-selector-container .category-selector .part-item.new:before { z-index: 10; content: ''; display: block; left: -17px; top: -14px; position: absolute; transform: scale(0.6); filter: drop-shadow(0px 0px 1px #000); } .avatar-selector-container .category-selector .part-item.active { background-color: #f8bb81; pointer-events: none; } .avatar-selector-container .category-selector .part-item.active span { filter: invert(1); } .avatar-selector-container .category-selector .part-item.locked { background-color: #606c76; pointer-events: none; color: #f8bb81; } .avatar-selector-container .category-selector .part-item.locked:before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1118px -804px; width: 14px; height: 15px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; top: 11px; left: 9px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .avatar-selector-container .category-selector .part-item.locked:before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .avatar-selector-container .category-selector .part-item span { height: 26px; } .avatar-selector-container .category-selector .part-item:hover { cursor: pointer; } .avatar-selector-container .avatar-element-selector { height: 131px; } .avatar-selector-container .avatar-element-selector .avatar-element-item { background-color: #5e63bc; border: 3px solid #5e63bc; position: relative; } .avatar-selector-container .avatar-element-selector .avatar-element-item img { width: 110px; transform: scale(0.95); } .avatar-selector-container .avatar-element-selector .avatar-element-item:hover { cursor: pointer; } .avatar-selector-container .avatar-element-selector .avatar-element-item:hover img { transition-duration: 0.1s; transform: scale(1); } .avatar-selector-container .avatar-element-selector .avatar-element-item.selected { border-color: #f8bb81; pointer-events: none; } .avatar-selector-container .avatar-element-selector .avatar-element-item.new:before { z-index: 10; content: ''; display: block; left: -17px; top: -14px; position: absolute; transform: scale(0.8); } .avatar-selector-container .avatar-element-selector .avatar-element-item.locked { pointer-events: none; } .avatar-selector-container .avatar-element-selector .avatar-element-item.locked .image-container:before { content: ''; display: block; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1132px -657px; width: 110px; height: 97px; background-repeat: no-repeat; overflow: hidden; display: block; left: 0; top: 0; position: absolute; z-index: 10; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .avatar-selector-container .avatar-element-selector .avatar-element-item.locked .image-container:before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .avatar-selector-container .btn-next, .avatar-selector-container .btn-previous { margin: 0 10px; flex-shrink: 0; flex-grow: 0; } .section-battle-overview .item-count-block { margin: 20px auto; } .section-battle-overview .tab-block { margin: 0 0 20px 0; } .section-battle-overview .tab-block .adventure-overview-block { margin: 24px auto; } .section-battle-overview .battle-results { display: inline-block; float: left; } .section-battle-overview .battle-results .avatar-container { padding-bottom: 0; position: relative; margin-left: auto; margin-right: auto; } .section-battle-overview .battle-results .battle-points { font-size: 24px; line-height: 24px; text-transform: uppercase; color: #5e63bc; padding: 20px 0 32px; position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .section-battle-overview .battle-results .battle-points:before { content: ''; height: 1px; width: 100%; background: #5e63bc; top: 10px; left: 0; position: absolute; } .section-battle-overview .battle-results .battle-points span { font-size: 21px; line-height: 24px; text-transform: uppercase; color: #6d8df0; margin: 10px 6px 8px 0; } .section-battle-overview .battle-results .results-list { width: 220px; list-style: none; margin: 7px 0 6px 0; font-size: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .section-battle-overview .battle-results .results-list li { flex-grow: 1; font-size: 24px; line-height: 24px; text-transform: uppercase; color: #5e63bc; } .section-battle-overview .battle-results .results-list li span { font-size: 13px; line-height: 18px; text-transform: uppercase; color: #6d8df0; display: block; } .section-battle-overview .member-list { list-style: none; margin: 0 0 0 0; overflow: hidden; } .section-battle-overview .member-list > li { margin: 16px 12px; width: 136px; height: 300px; display: inline-block; vertical-align: top; } .section-battle-overview .battle-inactive-block { margin: 30px auto 30px auto; } .section-battle-overview .invite-bot-block { padding-bottom: 20px; margin-bottom: 30px; border-bottom: 1px solid #5e63bc; } .section-battle-overview .invite-bot-block:hover { cursor: pointer; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } /* ====== start animations ===== */ /* ====== end animations ===== */ .section-battle-quiz { /* ====== start prologue ===== */ /* ====== end prologue ===== */ /* ====== start play ===== */ /* ====== end play ===== */ /* ====== start result ===== */ /* ====== end result ===== */ } .section-battle-quiz .battle-prologue .quiz-status.vs { margin: 32px auto 67px; } .section-battle-quiz .progress-gauge { margin: 9px 0 0 0; position: absolute; width: 220px; } .section-battle-quiz .progress-gauge .progress-highlightbar { width: 220px; } .section-battle-quiz .results-list { list-style: none; text-align: center; margin: 24px 0 0 0; } .section-battle-quiz .results-list li { width: 32%; display: inline-block; font-size: 24px; line-height: 24px; text-transform: uppercase; color: #5e63bc; } .section-battle-quiz .results-list li span { font-size: 15px; line-height: 15px; text-transform: uppercase; color: #6d8df0; display: block; } .section-battle-quiz .battle-result-status { position: absolute; z-index: 9999; margin-top: -28px; } .section-battle-quiz .col-user .battle-result-status { margin-left: 18px; } .section-battle-quiz .col-opponent .battle-result-status { margin-right: 18px; } .section-battle-quiz .battle-result { background: rgba(245, 247, 255, 0.5); padding: 12px 16px; margin: 16px 0; } .section-battle-quiz .battle-result .recap { margin: 8px 0; padding: 0; list-style: none; overflow: hidden; position: relative; height: auto; } .section-battle-quiz .battle-result .recap li { width: 33.3%; float: left; text-transform: uppercase; color: #5e63bc; margin: 3px 0; position: relative; z-index: 1000; } .section-battle-quiz .battle-result .recap.round-recap { margin: 8px 0 14px; } .section-battle-quiz .battle-result .recap.round-recap::before { content: ''; display: block; width: 434px; height: 32px; background: rgba(245, 247, 255, 0.8); position: absolute; left: 3px; } .section-battle-quiz .battle-result .recap.round-recap span { display: block; text-align: center; font-size: 24px; line-height: 24px; } .section-battle-quiz .battle-result .recap.round-recap h3 { text-indent: -9999px; margin: 0 auto; } .section-battle-quiz .battle-result .recap.round-recap h3.answer-correct-0 { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1040px -967px; width: 30px; height: 26px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-battle-quiz .battle-result .recap.round-recap h3.answer-correct-0 { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-battle-quiz .battle-result .recap.round-recap h3.answer-correct-1 { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -980px -967px; width: 30px; height: 26px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-battle-quiz .battle-result .recap.round-recap h3.answer-correct-1 { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-battle-quiz .battle-result .recap.round-recap h3.answer-correct-empty { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1010px -967px; width: 30px; height: 26px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-battle-quiz .battle-result .recap.round-recap h3.answer-correct-empty { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-battle-quiz .battle-result .recap.total span { font-size: 18px; line-height: 24px; } .section-battle-quiz .battle-result .recap.total h3 { font-size: 18px; line-height: 24px; } .section-battle-quiz .battle-result .recap.total .won h3 { color: "color-not-found"; } .section-battle-quiz .battle-result .recap.total .lose h3 { color: "color-not-found"; } .section-battle-quiz .battle-result .recap.time span { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1002px -327px; width: 20px; height: 16px; background-repeat: no-repeat; overflow: hidden; display: block; margin: 4px auto; text-indent: -9999px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-battle-quiz .battle-result .recap.time span { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-battle-quiz .battle-result .recap.time h3 { font-size: 18px; line-height: 24px; } .section-battle-quiz .battle-result .recap.time .won h3 { color: "color-not-found"; } .section-battle-quiz .battle-result .recap.time .lose h3 { color: "color-not-found"; } .section-battle-quiz .battle-result .recap.quizscore { border-top: 1px solid #f8bb81; padding: 4px 0 0 0; margin: 0 auto 20px auto; } .section-battle-quiz .battle-result .recap.quizscore span { font-size: 18px; line-height: 30px; } .section-battle-quiz .battle-result .recap.quizscore h3 { font-size: 30px; line-height: 30px; color: #5e63bc; } .section-battle-quiz .battle-result .btn-row .btn-default { margin: 0 8px; } .section-content .intro { font-size: 18px; line-height: 21px; text-align: left; padding: 20px 0 20px 0; } /* ====== start animations ===== */ /* ====== end animations ===== */ .section-faq .accordion-items { margin-top: 44px; } /* ====== start animations ===== */ /* ====== end animations ===== */ .section-coop .coop-list h3 { position: relative; overflow: hidden; } .section-coop .coop-list h3 span { font-size: 18px; line-height: 24px; display: inline-block; position: relative; padding: 0 20px; } .section-coop .coop-list h3 span:before, .section-coop .coop-list h3 span:after { content: ''; display: block; width: 1000px; position: absolute; top: 12px; } .section-coop .coop-list h3 span:before { right: 100%; } .section-coop .coop-list h3 span:after { left: 100%; } .section-coop .coop-list h3.flawless span { color: #80cbd8; } .section-coop .coop-list h3.flawless span:before, .section-coop .coop-list h3.flawless span:after { border-top: 1px solid #80cbd8; } .section-coop .coop-list h3.endless span { color: #ca89e5; } .section-coop .coop-list h3.endless span:before, .section-coop .coop-list h3.endless span:after { border-top: 1px solid #ca89e5; } .section-coop .coop-results .avatar-container { padding-bottom: 0; position: relative; margin-right: auto; margin-left: auto; } .section-coop .coop-results .coop-points { font-size: 24px; line-height: 24px; text-transform: uppercase; color: #5e63bc; padding: 20px 0 32px; position: relative; } .section-coop .coop-results .coop-points:before { content: ''; height: 1px; width: 272px; background: #5e63bc; top: 10px; left: 16px; position: absolute; } .section-coop .coop-results .coop-points span { font-size: 21px; line-height: 24px; text-transform: uppercase; color: #6d8df0; margin: 10px 6px 8px 0; } .section-coop .coop-results .results-list { list-style: none; text-align: center; margin: 7px 0 6px 0; } .section-coop .coop-results .results-list li { width: 48%; display: inline-block; font-size: 24px; line-height: 24px; text-transform: uppercase; color: #5e63bc; } .section-coop .coop-results .results-list li span { font-size: 13px; line-height: 18px; text-transform: uppercase; color: #6d8df0; display: block; } .section-coop .coop-results .results-list li span.flawless { color: #80cbd8; } .section-coop .coop-results .results-list li span.winstreak { color: #ca89e5; padding-top: 8px; } .section-coop .member-list { list-style: none; margin: -20px 0 0 0; overflow: hidden; } .section-coop .member-list > li { float: left; margin: 16px 16px 16px; width: 136px; height: 300px; } .section-coop .member-list > li:nth-child(4n+1) { margin: 16px 16px 16px 0; } .section-coop .member-list > li:nth-child(4n) { margin: 16px 0 16px 16px; } .section-coop .battle-inactive-block { margin-left: 26px; margin-top: 80px; } /* ====== start animations ===== */ /* ====== end animations ===== */ .section-coop h3.subtitle { font-size: 21px; } .section-coop h3.subtitle .flawless { color: #80cbd8; } .section-coop h3.subtitle .endless { color: #ca89e5; } .section-coop .multi-avatars { position: relative; overflow: hidden; padding: 0 32px; } .section-coop .multi-avatars::before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1132px -854px; width: 108px; height: 83px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; left: 50%; top: 95px; margin-left: -54px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-coop .multi-avatars::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-coop .multi-avatars .multi-avatar { width: 136px; } .section-coop .multi-avatars .results-list { list-style: none; text-align: center; margin: 7px 0 6px 0; } .section-coop .multi-avatars .results-list li { width: 100%; display: inline-block; font-size: 24px; line-height: 24px; text-transform: uppercase; color: #5e63bc; } .section-coop .multi-avatars .results-list li span { font-size: 13px; line-height: 18px; text-transform: uppercase; color: #6d8df0; display: block; } .section-coop .multi-avatars .results-list li span.flawless { color: #80cbd8; padding-top: 8px; } .section-coop .multi-avatars .results-list li span.winstreak { color: #ca89e5; padding-top: 8px; } .section-coop .intro-block { padding: 24px; background: rgba(245, 247, 255, 0.5); margin-top: 34px; overflow: hidden; } .section-coop .intro-block.flawless .coop-introbar span { color: #80cbd8; } .section-coop .intro-block.endless .coop-introbar span { color: #ca89e5; } .section-coop .intro-block .coop-introbar { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: 0px -757px; width: 426px; height: 72px; background-repeat: no-repeat; overflow: hidden; display: block; margin-bottom: 40px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-coop .intro-block .coop-introbar { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-coop .intro-block .coop-introbar span { font-size: 24px; line-height: 68px; text-align: center; text-transform: uppercase; color: #f8bb81; margin: 0; display: block; } .section-coop .intro-block .coop-introbar span.label { width: 350px; float: left; } .section-coop .intro-block .coop-introbar span.count { width: 76px; float: right; } .section-coop .intro-block .coop-introbar::after { content: ''; height: 1px; width: 426px; background: #5e63bc; position: absolute; display: block; margin-top: 90px; } .section-coop .intro-block .btn-coop-intro { width: 424px; float: left; } .section-coop .quiz-question-result-block { background: rgba(245, 247, 255, 0.5); padding: 12px 16px; margin: 16px 0; overflow: hidden; } .section-coop .quiz-question-result-block .quiz-question-result { margin: 50px auto; } .section-coop .quiz-question-result-block .quiz-question-result.incorrect { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -266px -586px; width: 266px; height: 171px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-coop .quiz-question-result-block .quiz-question-result.incorrect { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-coop .quiz-question-result-block .quiz-question-result.passed { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -532px -586px; width: 266px; height: 171px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-coop .quiz-question-result-block .quiz-question-result.passed { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-coop .quiz-question-result-block .quiz-question-result.correct { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: 0px -586px; width: 266px; height: 171px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-coop .quiz-question-result-block .quiz-question-result.correct { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-coop .play-block { background: rgba(245, 247, 255, 0.5); padding: 12px 16px; margin: 16px 0; overflow: hidden; } .section-coop .play-block .quiz-header { position: relative; border-bottom: 1px solid #5e63bc; height: 64px; } .section-coop .play-block .quiz-header .status { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -534px -277px; width: 63px; height: 54px; background-repeat: no-repeat; overflow: hidden; display: block; text-align: center; line-height: 54px; font-size: 15px; color: #5e63bc; float: left; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-coop .play-block .quiz-header .status { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-coop .play-block .quiz-header .progress-gauge { margin-top: 16px; margin-right: 36px; float: right; } .section-coop .play-block .quiz-header .progress-gauge::after { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -360px -1098px; width: 35px; height: 40px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; right: -4px; top: 7px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-coop .play-block .quiz-header .progress-gauge::after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-coop .play-block .coop-wrong-answer { margin: 24px auto; } .section-coop .result-block { background: rgba(245, 247, 255, 0.5); padding: 12px 16px; margin: 16px 0; font-size: 0; overflow: hidden; } .section-coop .result-block .result-block-sub { background: rgba(245, 247, 255, 0.8); padding: 12px 16px; margin: 16px 0 0; font-size: 0; position: relative; } .section-coop .result-block .result-block-sub h4 { margin-bottom: 15px; } .section-coop .result-block .result-block-sub:last-of-type { margin-bottom: 16px; } .section-coop .result-block h2 { margin: 0 auto 16px; font-size: 21px; } .section-coop .result-block .col-left, .section-coop .result-block .col-right { width: 49%; display: inline-block; vertical-align: top; } .section-coop .result-block .col-left { padding-right: 16px; } .section-coop .result-block .col-right { padding-left: 16px; } .section-coop .result-block .subname { font-size: 30px; line-height: 30px; height: 36px; color: #5e63bc; overflow: hidden; text-transform: uppercase; width: 100%; display: block; } .section-coop .result-block .name { font-size: 18px; line-height: 18px; height: 18px; color: #f08978; overflow: hidden; text-transform: uppercase; width: 100%; display: block; } .section-coop .result-block .digit-block { margin-top: 32px; overflow: hidden; } .section-coop .result-block .digit-block span { overflow: hidden; margin-bottom: 4px; display: block; font-size: 21px; line-height: 24px; text-transform: uppercase; } .section-coop .result-block .digit-block .digit { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1132px -937px; width: 76px; height: 82px; background-repeat: no-repeat; overflow: hidden; display: block; font-size: 30px; line-height: 82px; margin: 0 auto 20px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-coop .result-block .digit-block .digit { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-coop .result-block.flawless .digit-block { color: #80cbd8; } .section-coop .result-block.endless .digit-block { color: #ca89e5; } .section-coop .result-block .figures-block { position: relative; overflow: hidden; margin-top: 15px; } .section-coop .result-block .figures-block .figures { width: 25%; float: left; } .section-coop .result-block .figures { font-size: 40px; line-height: 40px; margin-top: 16px; } .section-coop .result-block .figures span { font-size: 21px; line-height: 21px; color: #6d8df0; overflow: hidden; display: block; text-transform: uppercase; } .section-coop .result-block .points { font-size: 40px; line-height: 40px; margin-top: 16px; } .section-coop .result-block .points span { font-size: 21px; line-height: 21px; color: #6d8df0; overflow: hidden; display: block; text-transform: uppercase; } .section-coop .bonus-block { overflow: hidden; } .section-coop .bonus-block .col-left, .section-coop .bonus-block .col-right { width: 49%; vertical-align: top; background: rgba(245, 247, 255, 0.5); padding: 12px 16px; margin: 16px 0; } .section-coop .bonus-block .col-left { float: left; } .section-coop .bonus-block .col-right { float: right; } .section-coop .bonus-block .figures { font-size: 40px; line-height: 40px; margin-top: 16px; } .section-coop .bonus-block .figures span { font-size: 21px; line-height: 21px; color: #6d8df0; overflow: hidden; display: block; text-transform: uppercase; } .section-coop .bonus-block .figures span.flawless { color: #80cbd8; } .section-coop .total-block { background: rgba(245, 247, 255, 0.5); padding: 12px 16px; margin: 16px 0; font-size: 0; position: relative; } .section-coop .total-block .points { margin-top: 0; } .section-coop .total-block .multiplier { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1022px -647px; width: 107px; height: 47px; background-repeat: no-repeat; overflow: hidden; display: block; font-size: 15px; line-height: 15px; position: absolute; top: 18px; right: 16px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-coop .total-block .multiplier { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-coop .total-block .multiplier span { font-size: 11px; line-height: 13px; padding: 6px 0 2px 0; text-align: center; text-transform: uppercase; display: block; text-align: center; } .section-dashboard { padding: 0; margin: 0; } .section-dashboard .game-over { position: absolute; left: 230px; margin: 100px auto; z-index: 10; } .section-dashboard .container { position: relative; } .section-dashboard .avatar-container { z-index: 2; } .section-dashboard .avatar-container.x-large { margin: 46px auto 0; } .section-dashboard .profile-stats { margin-top: 40px; } .section-dashboard .profile-stats .stats { list-style: none; text-align: left; padding: 0; overflow: hidden; } .section-dashboard .profile-stats .stats:nth-child(1) { margin: 4px 0 0 0; } .section-dashboard .profile-stats .stats:nth-child(2) { margin: 24px 0 0 0; } .section-dashboard .profile-stats .stats li { float: left; } .section-dashboard .profile-stats .stats li span { display: block; } .section-dashboard .profile-stats .stats li span:nth-child(1) { font-size: 24px; line-height: 24px; height: 24px; color: #6d8df0; text-transform: uppercase; overflow: hidden; } .section-dashboard .profile-stats .stats li span:nth-child(2) { font-size: 24px; line-height: 24px; height: 48px; color: #5e63bc; text-transform: uppercase; overflow: hidden; } .section-dashboard .profile-stats .stats li.name { width: 300px; } .section-dashboard .profile-stats .stats li.points { float: right; width: 140px; } .section-dashboard .timeline ul { text-align: center; margin: 0; padding: 0; list-style: none; font-size: 0; position: relative; display: flex; flex-wrap: nowrap; } .section-dashboard .timeline ul::before, .section-dashboard .timeline ul::after { content: ''; height: 3px; position: absolute; left: 0; top: 15px; } .section-dashboard .timeline ul::before { width: 100%; background: #6d8df0; } .section-dashboard .timeline ul::after { width: 0; background: #f8bb81; } .section-dashboard .timeline ul li { display: flex; flex: 1; position: relative; margin: 0; z-index: 2; } .section-dashboard .timeline ul li::before, .section-dashboard .timeline ul li::after { position: absolute; left: 50%; top: 0; margin-left: -16px; } .section-dashboard .timeline ul li::before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -672px -1012px; width: 32px; height: 32px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-dashboard .timeline ul li::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-dashboard .timeline ul li::after { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1207px -1019px; width: 32px; height: 32px; background-repeat: no-repeat; overflow: hidden; display: block; opacity: 0; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-dashboard .timeline ul li::after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-dashboard .timeline ul li .info { text-transform: uppercase; position: relative; display: block; margin-top: 32px; width: 100%; text-align: center; } .section-dashboard .timeline ul li .info .title { font-size: 11px; display: block; margin-bottom: 6px; } .section-dashboard .timeline ul li .info .period { font-size: 11px; display: block; } .section-dashboard .dashboard-widgets { width: 504px; padding: 0; margin: 18px -16px 50px -16px; list-style: none; overflow: hidden; } .section-dashboard .dashboard-widgets .widget { margin: 16px; position: relative; display: block; float: left; } .section-dashboard .not-started-yet-block { margin-top: 100px; } /* ====== start animations ===== */ .section-dashboard .timeline .period-total-2.current-period-1::after { animation-name: timeLinePeriod2-1; animation-duration: 0.6s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod2-1 { 0% { width: 0; } 100% { width: 25%; } } .section-dashboard .timeline .period-total-2.current-period-2::after { animation-name: timeLinePeriod2-2; animation-duration: 1.2s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod2-2 { 0% { width: 0; } 100% { width: 75%; } } .section-dashboard .timeline .period-total-3.current-period-1::after { animation-name: timeLinePeriod3-1; animation-duration: 0.6s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod3-1 { 0% { width: 0; } 100% { width: 16.66667%; } } .section-dashboard .timeline .period-total-3.current-period-2::after { animation-name: timeLinePeriod3-2; animation-duration: 1.2s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod3-2 { 0% { width: 0; } 100% { width: 50%; } } .section-dashboard .timeline .period-total-3.current-period-3::after { animation-name: timeLinePeriod3-3; animation-duration: 1.8s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod3-3 { 0% { width: 0; } 100% { width: 83.33333%; } } .section-dashboard .timeline .period-total-4.current-period-1::after { animation-name: timeLinePeriod4-1; animation-duration: 0.6s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod4-1 { 0% { width: 0; } 100% { width: 12.5%; } } .section-dashboard .timeline .period-total-4.current-period-2::after { animation-name: timeLinePeriod4-2; animation-duration: 1.2s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod4-2 { 0% { width: 0; } 100% { width: 37.5%; } } .section-dashboard .timeline .period-total-4.current-period-3::after { animation-name: timeLinePeriod4-3; animation-duration: 1.8s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod4-3 { 0% { width: 0; } 100% { width: 62.5%; } } .section-dashboard .timeline .period-total-4.current-period-4::after { animation-name: timeLinePeriod4-4; animation-duration: 2.4s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod4-4 { 0% { width: 0; } 100% { width: 87.5%; } } .section-dashboard .timeline .period-total-5.current-period-1::after { animation-name: timeLinePeriod5-1; animation-duration: 0.6s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod5-1 { 0% { width: 0; } 100% { width: 10%; } } .section-dashboard .timeline .period-total-5.current-period-2::after { animation-name: timeLinePeriod5-2; animation-duration: 1.2s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod5-2 { 0% { width: 0; } 100% { width: 30%; } } .section-dashboard .timeline .period-total-5.current-period-3::after { animation-name: timeLinePeriod5-3; animation-duration: 1.8s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod5-3 { 0% { width: 0; } 100% { width: 50%; } } .section-dashboard .timeline .period-total-5.current-period-4::after { animation-name: timeLinePeriod5-4; animation-duration: 2.4s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod5-4 { 0% { width: 0; } 100% { width: 70%; } } .section-dashboard .timeline .period-total-5.current-period-5::after { animation-name: timeLinePeriod5-5; animation-duration: 3s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod5-5 { 0% { width: 0; } 100% { width: 90%; } } .section-dashboard .timeline .period-total-6.current-period-1::after { animation-name: timeLinePeriod6-1; animation-duration: 0.6s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod6-1 { 0% { width: 0; } 100% { width: 8.33333%; } } .section-dashboard .timeline .period-total-6.current-period-2::after { animation-name: timeLinePeriod6-2; animation-duration: 1.2s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod6-2 { 0% { width: 0; } 100% { width: 25%; } } .section-dashboard .timeline .period-total-6.current-period-3::after { animation-name: timeLinePeriod6-3; animation-duration: 1.8s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod6-3 { 0% { width: 0; } 100% { width: 41.66667%; } } .section-dashboard .timeline .period-total-6.current-period-4::after { animation-name: timeLinePeriod6-4; animation-duration: 2.4s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod6-4 { 0% { width: 0; } 100% { width: 58.33333%; } } .section-dashboard .timeline .period-total-6.current-period-5::after { animation-name: timeLinePeriod6-5; animation-duration: 3s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod6-5 { 0% { width: 0; } 100% { width: 75%; } } .section-dashboard .timeline .period-total-6.current-period-6::after { animation-name: timeLinePeriod6-6; animation-duration: 3.6s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod6-6 { 0% { width: 0; } 100% { width: 91.66667%; } } .section-dashboard .timeline .period-total-7.current-period-1::after { animation-name: timeLinePeriod7-1; animation-duration: 0.6s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod7-1 { 0% { width: 0; } 100% { width: 7.14286%; } } .section-dashboard .timeline .period-total-7.current-period-2::after { animation-name: timeLinePeriod7-2; animation-duration: 1.2s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod7-2 { 0% { width: 0; } 100% { width: 21.42857%; } } .section-dashboard .timeline .period-total-7.current-period-3::after { animation-name: timeLinePeriod7-3; animation-duration: 1.8s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod7-3 { 0% { width: 0; } 100% { width: 35.71429%; } } .section-dashboard .timeline .period-total-7.current-period-4::after { animation-name: timeLinePeriod7-4; animation-duration: 2.4s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod7-4 { 0% { width: 0; } 100% { width: 50%; } } .section-dashboard .timeline .period-total-7.current-period-5::after { animation-name: timeLinePeriod7-5; animation-duration: 3s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod7-5 { 0% { width: 0; } 100% { width: 64.28571%; } } .section-dashboard .timeline .period-total-7.current-period-6::after { animation-name: timeLinePeriod7-6; animation-duration: 3.6s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod7-6 { 0% { width: 0; } 100% { width: 78.57143%; } } .section-dashboard .timeline .period-total-7.current-period-7::after { animation-name: timeLinePeriod7-7; animation-duration: 4.2s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod7-7 { 0% { width: 0; } 100% { width: 92.85714%; } } .section-dashboard .timeline .period-total-8.current-period-1::after { animation-name: timeLinePeriod8-1; animation-duration: 0.6s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod8-1 { 0% { width: 0; } 100% { width: 6.25%; } } .section-dashboard .timeline .period-total-8.current-period-2::after { animation-name: timeLinePeriod8-2; animation-duration: 1.2s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod8-2 { 0% { width: 0; } 100% { width: 18.75%; } } .section-dashboard .timeline .period-total-8.current-period-3::after { animation-name: timeLinePeriod8-3; animation-duration: 1.8s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod8-3 { 0% { width: 0; } 100% { width: 31.25%; } } .section-dashboard .timeline .period-total-8.current-period-4::after { animation-name: timeLinePeriod8-4; animation-duration: 2.4s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod8-4 { 0% { width: 0; } 100% { width: 43.75%; } } .section-dashboard .timeline .period-total-8.current-period-5::after { animation-name: timeLinePeriod8-5; animation-duration: 3s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod8-5 { 0% { width: 0; } 100% { width: 56.25%; } } .section-dashboard .timeline .period-total-8.current-period-6::after { animation-name: timeLinePeriod8-6; animation-duration: 3.6s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod8-6 { 0% { width: 0; } 100% { width: 68.75%; } } .section-dashboard .timeline .period-total-8.current-period-7::after { animation-name: timeLinePeriod8-7; animation-duration: 4.2s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod8-7 { 0% { width: 0; } 100% { width: 81.25%; } } .section-dashboard .timeline .period-total-8.current-period-8::after { animation-name: timeLinePeriod8-8; animation-duration: 4.8s; animation-delay: 0.8s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes timeLinePeriod8-8 { 0% { width: 0; } 100% { width: 93.75%; } } /* ====== end animations ===== */ .section-exam-quiz .exam-section-bg.exam-area1 { background-repeat: no-repeat; background-position: top center; background-attachment: fixed; background-size: cover; min-height: 100vh; min-width: 100vw; position: fixed; z-index: -1; } .section-exam-quiz .exam-section-bg.exam-area1.exam-level0 { background-image: url("../../shared/images/backgrounds/bg-world-area1-level0.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area1.exam-level1 { background-image: url("../../shared/images/backgrounds/bg-world-area1-level1.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area1.exam-level2 { background-image: url("../../shared/images/backgrounds/bg-world-area1-level2.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area1.exam-level3 { background-image: url("../../shared/images/backgrounds/bg-world-area1-level3.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area2 { background-repeat: no-repeat; background-position: top center; background-attachment: fixed; background-size: cover; min-height: 100vh; min-width: 100vw; position: fixed; z-index: -1; } .section-exam-quiz .exam-section-bg.exam-area2.exam-level0 { background-image: url("../../shared/images/backgrounds/bg-world-area2-level0.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area2.exam-level1 { background-image: url("../../shared/images/backgrounds/bg-world-area2-level1.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area2.exam-level2 { background-image: url("../../shared/images/backgrounds/bg-world-area2-level2.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area2.exam-level3 { background-image: url("../../shared/images/backgrounds/bg-world-area2-level3.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area3 { background-repeat: no-repeat; background-position: top center; background-attachment: fixed; background-size: cover; min-height: 100vh; min-width: 100vw; position: fixed; z-index: -1; } .section-exam-quiz .exam-section-bg.exam-area3.exam-level0 { background-image: url("../../shared/images/backgrounds/bg-world-area3-level0.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area3.exam-level1 { background-image: url("../../shared/images/backgrounds/bg-world-area3-level1.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area3.exam-level2 { background-image: url("../../shared/images/backgrounds/bg-world-area3-level2.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area3.exam-level3 { background-image: url("../../shared/images/backgrounds/bg-world-area3-level3.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area4 { background-repeat: no-repeat; background-position: top center; background-attachment: fixed; background-size: cover; min-height: 100vh; min-width: 100vw; position: fixed; z-index: -1; } .section-exam-quiz .exam-section-bg.exam-area4.exam-level0 { background-image: url("../../shared/images/backgrounds/bg-world-area4-level0.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area4.exam-level1 { background-image: url("../../shared/images/backgrounds/bg-world-area4-level1.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area4.exam-level2 { background-image: url("../../shared/images/backgrounds/bg-world-area4-level2.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area4.exam-level3 { background-image: url("../../shared/images/backgrounds/bg-world-area4-level3.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area5 { background-repeat: no-repeat; background-position: top center; background-attachment: fixed; background-size: cover; min-height: 100vh; min-width: 100vw; position: fixed; z-index: -1; } .section-exam-quiz .exam-section-bg.exam-area5.exam-level0 { background-image: url("../../shared/images/backgrounds/bg-world-area5-level0.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area5.exam-level1 { background-image: url("../../shared/images/backgrounds/bg-world-area5-level1.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area5.exam-level2 { background-image: url("../../shared/images/backgrounds/bg-world-area5-level2.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area5.exam-level3 { background-image: url("../../shared/images/backgrounds/bg-world-area5-level3.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area6 { background-repeat: no-repeat; background-position: top center; background-attachment: fixed; background-size: cover; min-height: 100vh; min-width: 100vw; position: fixed; z-index: -1; } .section-exam-quiz .exam-section-bg.exam-area6.exam-level0 { background-image: url("../../shared/images/backgrounds/bg-world-area6-level0.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area6.exam-level1 { background-image: url("../../shared/images/backgrounds/bg-world-area6-level1.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area6.exam-level2 { background-image: url("../../shared/images/backgrounds/bg-world-area6-level2.jpg?v=20240109145540"); } .section-exam-quiz .exam-section-bg.exam-area6.exam-level3 { background-image: url("../../shared/images/backgrounds/bg-world-area6-level3.jpg?v=20240109145540"); } .section-exam-quiz .exam-title { color: #5e63bc; text-transform: uppercase; } .section-exam-quiz .exam-subtitle { color: #6d8df0; text-transform: uppercase; font-size: 18px; line-height: 18px; margin: 16px 0 0 0; } .section-exam-quiz hr { width: 100%; height: 1px; line-height: 0; font-size: 0; background: #5e63bc; border: 0; margin: 32px 0; } .section-exam-quiz .upgrade-item { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -802px 0px; width: 220px; height: 195px; background-repeat: no-repeat; overflow: hidden; display: block; margin-top: 12px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; position: relative; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-exam-quiz .upgrade-item { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-exam-quiz .upgrade-item img { position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } .section-exam-quiz .upgrade-item.unlocked { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; cursor: pointer; } .section-exam-quiz .upgrade-item.unlocked a { display: block; } .section-exam-quiz .upgrade-item.unlocked a .avatar-new-item { position: absolute; z-index: 100; margin-left: -24px; } /* ====== start progress-gauge ===== */ .quiz-progress-gauge { background: url("../../desktop/images/general/normal/quiz-progress-gauge-bg.png?v=20240109145540") no-repeat center top; width: 220px; height: 386px; position: relative; margin-top: 56px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .quiz-progress-gauge { background: url("../../desktop/images/general/retina/quiz-progress-gauge-bg@2x.png?v=20240109145540") no-repeat center top; background-size: 220px 386px; } } .quiz-progress-gauge .avatar-container { margin: 0 auto; } .quiz-progress-gauge .avatar-container .avatar { top: -110px; } .quiz-progress-gauge .avatar-container .avatar img { margin-top: 0; } .quiz-progress-gauge .needle { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -802px -195px; width: 200px; height: 200px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; z-index: 200; bottom: -36px; left: 50%; margin-left: -100px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .quiz-progress-gauge .needle { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .quiz-progress-gauge .target { position: absolute; z-index: 100; bottom: -36px; left: 50%; margin-left: -100px; } /* ====== end progress-gauge ===== */ /* ====== start prologue ===== */ .exam-prologue .topscore-list { margin: 8px 0 0 0; } .exam-prologue .topscore-list .avatar-container { float: left; } .exam-prologue .no-diff-opponent h4 { padding-bottom: 8px; } .exam-prologue .no-diff-opponent h5 { font-size: 18px; line-height: 30px; color: #f8bb81; text-transform: uppercase; margin: 0 0 20px; } .exam-prologue .no-diff-opponent .avatar-opponent { width: 100%; } .exam-prologue .exam-info { background: rgba(245, 247, 255, 0.5); padding: 12px 16px; margin: 30px 0 16px 0; } .exam-prologue .exam-info .button-list-top { overflow: hidden; margin-bottom: 10px; } .exam-prologue .exam-info .exam-description { overflow: hidden; } .exam-prologue .exam-info .exam-limits { margin: 24px 0 0 0; } .exam-prologue .exam-info .exam-limits h2 { color: #f8bb81; } .exam-prologue .exam-info .exam-difficulty { overflow: hidden; margin: 24px 0 0 0; } .exam-prologue .exam-info .exam-difficulty .btn-txt { position: absolute; left: 64px; top: 88px; } .exam-prologue .exam-info .exam-difficulty h6 { font-size: 24px; line-height: 24px; text-transform: uppercase; margin: 0; } /* ====== end prologue ===== */ /* ====== start results ===== */ .exam-status-block { margin: 0 auto 0; position: relative; text-align: center; } .exam-status-block h3 { margin: 20px 0; font-size: 30px; line-height: 30px; } .exam-status-block .exam-status { margin: 0 auto; } .exam-status-block.failed .exam-status { margin-bottom: 24px; } .exam-status-block .btn-row { margin-bottom: 12px; } .exam-status-block .btn-row .btn-default { margin: 0 8px; } .aButtonFeedback { margin-bottom: 24px !important; } /* ====== end results ===== */ /* ====== start topscores ===== */ .topscore-list { width: 220px; list-style: none; overflow: hidden; margin-top: 37px; } .topscore-list li.topscore-item { overflow: hidden; margin: 0 0 14px 0; } .topscore-list .member-avatar { width: 64px; float: left; } .topscore-list .member-info { width: 140px; float: right; margin-top: 8px; } /* ====== end topscores ===== */ /* ====== start bestscore ===== */ .best-score-container { margin-bottom: 24px; } .best-score-container h4 { padding-bottom: 8px; } .best-score { overflow: hidden; } .best-score .labels { text-align: left; text-transform: uppercase; margin: 0; padding: 0; list-style: none; overflow: hidden; } .best-score .labels li { font-size: 24px; line-height: 24px; height: 24px; color: #5e63bc; float: left; width: 100%; } .best-score .labels li span { font-size: 18px; line-height: 30px; color: #6d8df0; text-transform: uppercase; display: block; overflow: hidden; float: left; width: 62px; margin-left: 42px; } /* ====== end bestscore ===== */ /* ====== start unlockable item ===== */ .level-upgrade { position: relative; } .level-upgrade h4 { padding-top: 12px; } /* ====== end unlockable item ===== */ /* ====== start animations ===== */ @keyframes trigger-feedback-animation { 0% { transform: scale(1); } 10% { transform: scale(1.3); } 20% { transform: scale(1); } 30% { transform: scale(1.1); } 40% { transform: scale(1); } 100% { transform: scale(1); } } /* ====== end animations ===== */ .section-intro { height: 100vh; background: rgba(245, 247, 255, 0.8); } .section-intro .container { width: auto; margin: auto; } .section-intro .ui-view-main { position: static; } .section-intro .video-container-full { margin-top: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin-bottom: 0; background: transparent; } .section-intro .video-container-full iframe { border: 0; position: absolute; top: 180px; left: 0; right: 0; bottom: 0; width: 100%; height: calc(100% - 280px); background: transparent; } .section-intro .btn-default { position: relative; z-index: 4000; margin-right: 105px; } .section-intro .btn-default.float-right { margin-right: 23px; margin-top: 10px; } .section-mission .mission-description { font-size: 18px; text-align: left; } .section-mission .submissions-list .submission .btn-container { margin-top: 12px; } .section-mission .mission-attempts-left { font-size: 15px; display: block; margin: 20px 0 0 0; text-transform: uppercase; } .section-mission .button-list-top { overflow: hidden; margin-bottom: 10px; } .section-mission .button-list-top .btn-download-pdf { float: right; } .section-mission .limit { font-size: 13px; margin-top: 23px; text-transform: uppercase; position: relative; width: 132px; text-align: center; } .section-mission .limit:before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1097px -804px; width: 21px; height: 22px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; top: -2px; left: -27px; margin: 0 auto; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-mission .limit:before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-mission .mission-score-block { list-style: none; text-transform: uppercase; } .section-mission .mission-score-block li { position: relative; overflow: hidden; background: rgba(245, 247, 255, 0.8); margin: 2px 0; height: 46px; padding: 0 0 0 18px; text-align: left; line-height: 46px; } .section-mission .mission-score-block li.header .description { font-size: 24px; } .section-mission .mission-score-block li span { display: block; padding: 0; } .section-mission .mission-score-block li .description { font-size: 15px; width: 220px; float: left; } .section-mission .mission-score-block li .points { font-size: 24px; width: 154px; float: left; text-align: right; } .section-mission .mission-score-block li .points span { display: initial; } .section-mission .mission-score-block li .indicator { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -230px -1055px; width: 40px; height: 40px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; right: 8px; top: 3px; color: #6d8df0; text-align: center; font-size: 30px; line-height: 39px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-mission .mission-score-block li .indicator { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-mission .mission-score-block li.passed { background: rgba(118, 199, 148, 0.5); } .section-mission .mission-score-block li.passed .indicator.check { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -310px -1055px; width: 40px; height: 40px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-mission .mission-score-block li.passed .indicator.check { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-mission .mission-score-block li.passed .indicator.grade { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -230px -1055px; width: 40px; height: 40px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-mission .mission-score-block li.passed .indicator.grade { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-mission .mission-score-block li.failed { background: rgba(247, 91, 95, 0.5); } .section-mission .mission-score-block li.failed .indicator.check { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -270px -1055px; width: 40px; height: 40px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-mission .mission-score-block li.failed .indicator.check { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-mission .mission-score-block li.failed .indicator.grade { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -230px -1055px; width: 40px; height: 40px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-mission .mission-score-block li.failed .indicator.grade { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-mission .btn-start-mission { margin-bottom: 8px; } .section-mission .quiz-content { overflow: hidden; margin-bottom: 0; text-align: left; } .section-mission .quiz-content .mission-content-list { list-style: none; text-align: left; margin: 0; } .section-mission .submissions-list { background: rgba(245, 247, 255, 0.5); padding: 0 16px 12px; margin: 0 0 16px; text-align: left; } .section-mission .submissions-list .submission { border-bottom: 1px solid #5e63bc; padding-bottom: 20px; margin-bottom: 12px; } .section-mission .submissions-list .submission:last-child { border-color: transparent; padding-bottom: 0; } .section-mission .submissions-list .submission h4 { font-size: 21px; line-height: 24px; } .section-mission .submissions-list .submission h4 span { font-size: 21px; line-height: 24px; } .section-mission .button-list { padding: 12px 0; margin: 20px 0 0; position: relative; text-align: center; } .section-mission .button-list:before { content: ''; height: 1px; width: 440px; font-size: 0; background: #5e63bc; position: absolute; margin-top: -20px; left: 0; } .section-mission .button-list.border-bottom:before { content: ''; height: 1px; width: 440px; font-size: 0; background: #f8bb81; position: absolute; bottom: -3px; left: 0; } .section-mission .button-list.no-border:before { display: none; } .practical-assignment { text-align: left; } .practical-assignment input[type='email'], .practical-assignment input[type='password'], .practical-assignment input[type='text'], .practical-assignment select, .practical-assignment textarea { width: 100%; } .practical-assignment .question-and-answer-block { border-top: 1px solid #5e63bc; } .practical-assignment .question-and-answer-block .question-block { margin: 1.125em 0; } .practical-assignment form .button-list { margin: 20px 0 5px 0; overflow: hidden; } .section-mission-list .container-fluid { width: 100vw; } .section-mission-list .parallax-bg { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100vw; height: 100vh; z-index: -1; } .section-mission-list .parallax-bg .parallax-layer { height: 100vh; width: 300vw; position: fixed; left: 0; transform: translate(0%, 0%); top: 0; z-index: -5; } .section-mission-list .parallax-bg .parallax-layer.parallax-1 { background: url("../../desktop/images/mission-list/mission-list-layer1.png") bottom left; width: 100vw; } .section-mission-list .parallax-bg .parallax-layer.parallax-2 { background: url("../../desktop/images/mission-list/mission-list-layer2.png") bottom left; width: 100vw; } .section-mission-list .parallax-bg .parallax-layer.parallax-3 { background: url("../../desktop/images/mission-list/mission-list-layer3.png") bottom left; width: 100vw; } .section-mission-list .parallax-bg .parallax-layer.parallax-1 { background-repeat: no-repeat; background-size: cover; } .section-mission-list .parallax-bg .parallax-layer.parallax-2 { background-size: cover; background-repeat: repeat-x; } .section-mission-list .parallax-bg .parallax-layer.parallax-3 { background-size: cover; background-repeat: repeat-x; } .section-mission-list .progress-block { display: flex; justify-content: center; align-items: center; padding-top: 32px; } .section-mission-list .progress-block .progress-gauge.left-to-right { width: 384px; height: auto; padding: 10px; position: relative; } .section-mission-list .progress-block .progress-gauge.left-to-right:before { content: ""; position: absolute; display: block; width: 404px; height: 40px; top: 0px; left: -20px; z-index: -1; background-color: #f5f7ff; } .section-mission-list .progress-block .progress-gauge.left-to-right .progress-highlightbar { width: 320px; float: left; height: 20px; overflow: hidden; } .section-mission-list .progress-block .progress-gauge.left-to-right .progress-highlightbar .progress-highlight { height: 20px; } .section-mission-list .progress-block .progress-gauge.left-to-right .progress-value { float: right; height: 20px; } .section-mission-list .progress-block .avatar-container { margin-top: -32px; } .section-mission-list .progress-block .avatar-container .avatar { transform: scale(0.25, 0.25); } .section-mission-list .progress-block .avatar-container::before { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1132px -754px; width: 100px; height: 100px; background-repeat: no-repeat; overflow: hidden; display: block; width: 100px; height: 100px; position: absolute; content: ''; left: 50%; margin-left: -50px; top: 50%; margin-top: -33px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-mission-list .progress-block .avatar-container::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-mission-list .mission-items { width: 100vw; padding: 50px 20px; position: relative; left: 50%; transform: translate(-50%, 0%); } .section-mission-list .mission-items .items-list { display: flex; justify-content: space-around; width: 100%; margin: 0; padding: 0; } .section-mission-list .mission-items .items-list .mission-item { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -622px 0px; width: 180px; height: 257px; background-repeat: no-repeat; overflow: hidden; display: block; overflow: visible; list-style-type: none; position: relative; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-mission-list .mission-items .items-list .mission-item { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-mission-list .mission-items .items-list .mission-item h3 { margin-top: 55px; padding: 0 15px; } .section-mission-list .mission-items .items-list .mission-item h4 { margin-top: 4px; padding: 0 15px; } .section-mission-list .mission-items .items-list .mission-item .result-percentage { line-height: 48px; text-align: center; color: #6d8df0; } .section-mission-list .mission-items .items-list .mission-item .missionstatus { position: absolute; width: 100%; top: 133px; } .section-mission-list .mission-items .items-list .mission-item .missionstatus .status-info { margin: 0 auto; } .section-mission-list .mission-items .items-list .mission-item .missionstatus .status-message { padding: 0 16px; height: 70px; width: 180px; vertical-align: middle; display: table-cell; font-size: 15px; text-align: center; } .section-mission-list .mission-items .items-list .mission-item .missionstatus .status-message span { display: inline-block; } .section-mission-list .mission-items .items-list .mission-item .missionstatus.open .status-info { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -537px -353px; width: 55px; height: 45px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-mission-list .mission-items .items-list .mission-item .missionstatus.open .status-info { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-mission-list .mission-items .items-list .mission-item .missionstatus.passed .status-info { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -727px -967px; width: 55px; height: 45px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-mission-list .mission-items .items-list .mission-item .missionstatus.passed .status-info { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-mission-list .mission-items .items-list .mission-item .missionstatus.failed .status-info { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1061px -829px; width: 55px; height: 45px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-mission-list .mission-items .items-list .mission-item .missionstatus.failed .status-info { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-mission-list .mission-items .items-list .mission-item .missionstatus.alert .status-info { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1006px -829px; width: 55px; height: 45px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-mission-list .mission-items .items-list .mission-item .missionstatus.alert .status-info { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-mission-list .mission-items .items-list .mission-item .missionstatus.locked .status-info { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -672px -967px; width: 55px; height: 45px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-mission-list .mission-items .items-list .mission-item .missionstatus.locked .status-info { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-mission-list .mission-items .items-list .mission-item .missionstatus.locked.date .status-message { font-size: 21px; } .section-mission-list .mission-items .items-list .mission-item .btn-default { position: absolute; bottom: 30px; transform: translateX(-50%); } .section-mission-list .mission-items .items-list .mission-item .mission-counter { position: absolute; padding: 4px 16px; background-color: rgba(245, 247, 255, 0.5); border: 2px solid #6d8df0; border-radius: 999px; bottom: -40px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .section-mission-list .mission-items .items-list .mission-item .mission-counter span { white-space: nowrap; } .section-mission-list .mission-list-nav { width: 976px; position: relative; display: flex; align-items: center; justify-content: center; margin: 12px auto 24px; } .section-mission-list .mission-list-nav .mission-bullets { display: flex; align-items: center; justify-content: center; width: 50%; margin: 3px auto; padding: 6px 0; } .section-mission-list .mission-list-nav .mission-bullets li { display: block; list-style-type: none; background: #b2c3f7; width: 15px; height: 15px; margin: 0 4px; border-radius: 50%; border: 2px solid white; position: relative; cursor: pointer; } .section-mission-list .mission-list-nav .mission-bullets li::after { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; background: #5e63bc; border-radius: 50%; z-index: -1; } .section-mission-list .mission-list-nav .mission-bullets li:hover { background: #6d8df0; } .section-mission-list .mission-list-nav .mission-bullets li.active { background: #f08978; } .section-mission-list .mission-list-nav .mission-bullets li.locked { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; pointer-events: none; } .mood-tracker { left: 0; z-index: 99999; position: absolute; top: 100px; left: 50%; margin-left: -90px; transform: scale(0, 0); width: 536px; height: 580px; background: url("../../shared/images/vector/mood-tracker/mood-tracker-cloud.svg") center center no-repeat; background-size: cover; } .mood-tracker.mood-tracker-show { display: block; } .mood-tracker .mood-tracker-content { width: 92%; height: 80%; position: relative; margin: 8% 4% 12%; top: 0; left: 0; } .mood-tracker .mood-tracker-content h2 { font-size: 30px; line-height: 30px; color: #f8bb81; text-align: center; margin: 5% 0 3%; } .mood-tracker .mood-tracker-content h3 { font-size: 24px; line-height: 24px; color: #6d8df0; text-align: center; margin: 24px 0 8px; } .mood-tracker .mood-tracker-close { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -392px -1055px; width: 38px; height: 36px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; right: 10%; top: 7%; z-index: 100; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .mood-tracker .mood-tracker-close { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .mood-tracker .mood-tracker-close:hover { opacity: 0.75 !important; cursor: pointer; } .mood-tracker-emoticon .emoticon-container { width: 100%; height: 100%; margin: 0 auto; } .mood-tracker-emoticon .emoticon-container svg { width: 100%; height: 100%; } .mood-tracker-emoticon .emoticon-title { font-size: 15px; line-height: 18px; text-transform: uppercase; color: #f5f7ff; display: block; text-align: center; margin-top: 6px; } .mood-tracker-emoticon.clickable .emoticon-container { position: relative; } .mood-tracker-emoticon.clickable .emoticon-container::before { content: ''; width: 120%; height: 120%; background: #5e63bc; border-radius: 100%; display: block; position: absolute; z-index: -1; top: -10%; left: -10%; transition: background 1s; } .mood-tracker-emoticon.clickable:hover { cursor: pointer; } .mood-tracker-emoticon.clickable:hover .emoticon-container::before { background: rgba(252, 226, 201, 0.5); } .mood-tracker-pointer { width: 100px; height: auto; position: absolute; top: 60px; right: 85px; z-index: 199; } .mood-tracker-pointer .pointer { position: absolute; left: 0; top: 0; width: 100%; transform: scale(0, 0); } .mood-tracker-pointer .pointer.pointer-01 { content: url("../../shared/images/vector/mood-tracker/mood-tracker-cloud-pointer-01.svg"); } .mood-tracker-pointer .pointer.pointer-02 { content: url("../../shared/images/vector/mood-tracker/mood-tracker-cloud-pointer-02.svg"); } .mood-tracker-pointer .pointer.pointer-03 { content: url("../../shared/images/vector/mood-tracker/mood-tracker-cloud-pointer-03.svg"); } .mood-tracker-trigger { top: 0; left: 50%; margin-left: 80px; margin-top: 225px; z-index: 200; display: flex; align-items: center; justify-content: center; position: absolute; } .mood-tracker-trigger::before { content: ''; padding: 20px; position: absolute; width: 100%; height: 100%; z-index: -1; } .mood-tracker-trigger span { display: block; text-align: center; font-size: 30px; line-height: 30px; } .mood-tracker-trigger span:before { content: "\e051"; color: #2857e9; } .mood-tracker-trigger.mood-filledin { animation: none; } .mood-tracker-trigger.mood-filledin span:before { content: "\e052"; color: #2857e9; } .mood-tracker-trigger.trigger-disabled { animation: disappear-animation 0.5s forwards infinite; animation-iteration-count: 1; } .mood-tracker-trigger.trigger-enabled { animation: appear-animation 0.5s forwards infinite; animation-iteration-count: 1; } .mood-tracker-step { display: none; } .mood-tracker-step.show { display: block; } .mood-tracker-emoticonlist { display: flex; flex-wrap: wrap; width: 90%; margin: 0 5%; } .mood-tracker-emoticonlist .mood-tracker-emoticon { width: 34%; margin: 4% 8%; } .mood-tracker-emoticonlist .mood-tracker-emoticon .emoticon-container { width: 100%; height: 100%; max-width: 70px; max-height: 70px; } #mood-tracker-step1 .mood-tracker-close, #mood-tracker-step1 .mood-tracker-header, #mood-tracker-step1 .mood-tracker-emoticonlist { opacity: 0; } .mood-tracker-explanation { width: 80%; margin: 0 auto; } .mood-tracker-explanation .mood-tracker-emoticon { width: 80%; margin: 5% auto; } .mood-tracker-explanation .mood-tracker-emoticon .emoticon-container { max-width: 80px; max-height: 80px; } .mood-tracker-explanation .btn-icon { position: absolute; } .mood-tracker-explanation .explanation-form textarea.form-control { background: rgba(248, 187, 129, 0.2); text-align: left; width: 100%; padding: 8px; margin: 0 0 8px; color: white; font-size: 18px; line-height: 20px; vertical-align: middle; border: 0; } .mood-tracker-explanation .explanation-form .tooltip::after { max-width: 300px; } .mood-tracker-explanation .explanation-form .btn-default { float: right; } .mood-tracker-thankyou { width: 80%; margin: 0 auto; } .mood-tracker-thankyou .btn-icon { position: absolute; } .mood-tracker-thankyou .achievement { text-align: center; margin: 10px auto; width: 220px; } .mood-tracker-thankyou .achievement .trophy { margin: 0 auto; position: relative; display: inline-block; } .mood-tracker-thankyou .achievement .trophy img { width: 110px; } .mood-tracker-thankyou .achievement .trophy .counter { position: absolute; top: 10px; left: -16px; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1208px -981px; width: 41px; height: 38px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .mood-tracker-thankyou .achievement .trophy .counter { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .mood-tracker-thankyou .achievement .trophy .counter span { font-size: 24px; text-transform: uppercase; line-height: 56px; color: #f5f7ff; } .mood-tracker-thankyou .achievement .achievement-info { width: 100%; margin-top: 8px; margin-bottom: 20px; text-align: center; } .mood-tracker-thankyou .achievement .achievement-info .title { font-size: 24px; color: #f08978; text-transform: uppercase; display: block; } .mood-tracker-thankyou .bar { width: 70%; margin: 0 auto; height: 10px; background: #f5f7ff; padding: 1px; } .mood-tracker-thankyou .bar .filled { background: #6d8df0; height: 100%; width: 0%; } #mood-tracker-step4 { height: 100%; } #mood-tracker-step4 .mood-tracker-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .mood-tracker-choosen { width: 80%; margin: 0 auto; overflow: hidden; } .mood-tracker-choosen .mood-tracker-emoticon { width: 80%; margin: 5% auto; } .mood-tracker-choosen .mood-tracker-emoticon .emoticon-container { max-width: 140px; max-height: 140px; } .mood-tracker-choosen .emoticon-description { font-size: 18px; line-height: 21px; color: #f5f7ff; } @keyframes pulse-animation { 0% { box-shadow: 0 0 0 0 rgba(94, 99, 188, 0.5), 0 0 0 0 rgba(94, 99, 188, 0.5); } 40% { box-shadow: 0 0 0 20px rgba(94, 99, 188, 0), 0 0 0 0 rgba(94, 99, 188, 0.5); } 80% { box-shadow: 0 0 0 20px rgba(94, 99, 188, 0), 0 0 0 10px rgba(94, 99, 188, 0); } 100% { box-shadow: 0 0 0 0 rgba(94, 99, 188, 0), 0 0 0 10px rgba(94, 99, 188, 0); } } @keyframes disappear-animation { from { transform: scale(1, 1); opacity: 1; } to { transform: scale(0, 0); opacity: 0; } } @keyframes appear-animation { from { transform: scale(0, 0); opacity: 0; } to { transform: scale(1, 1); opacity: 1; } } .section-notes article { border-bottom: 1px solid #5e63bc; padding-bottom: 24px; margin-bottom: 36px; } .section-notes article h3 { text-align: left; color: #5e63bc; } .section-notes article h3 .label { color: #f08978; } .section-notes article:first-child { margin-top: 32px; } .section-notes .content { text-align: left; } .section-notes .content .markdown { background: rgba(245, 247, 255, 0.5); padding: 0 16px; overflow: hidden; margin: 16px 0; } .section-notes .content .markdown p { margin: 8px 0; } .section-notes .content h4 { font-size: 21px; line-height: 21px; margin-top: 20px; color: #6d8df0; } .section-notes .content .note-list { margin: 0; padding: 0; } .section-notes .content .note-list li { list-style: none; margin: 8px 0; } .section-posts .header-bar { background: rgba(245, 247, 255, 0.5); width: 100%; padding: 8px 24px; overflow: hidden; display: flex; align-items: center; } .section-posts .header-bar .total-messages { float: left; text-align: center; font-size: 15px; line-height: 15px; padding-top: 2px; } .section-posts .header-bar .total-messages span { display: block; } .section-posts .header-bar .search-box { float: right; width: 516px; } .section-posts .header-bar .search-box .search-box-input { width: 100%; max-width: 100%; } .section-posts .header-bar .filter-box { margin-top: 8px; float: right; width: 516px; } .section-posts .header-bar .filter-box .filter-block, .section-posts .header-bar .filter-box .sorting-block { width: 254px; } .section-posts .score-bar { background-color: rgba(248, 187, 129, 0.5); padding: 6px 6px 29px; } .section-posts .score-bar .label { float: left; width: 100%; display: block; text-transform: uppercase; text-align: center; } .section-posts .score-bar .points { float: left; width: 100%; display: block; font-size: 21px; text-transform: uppercase; text-align: center; margin-top: 6px; } .section-posts .score-bar .tooltip { align-items: flex-end; flex-grow: 0; float: right; } .section-posts .message-bar { background: rgba(245, 247, 255, 0.5); width: 100%; padding: 8px 24px; margin-top: 24px; } .section-posts .message-bar .btn-default { width: 90%; } .section-posts .message-bar .tooltip { float: right; margin-top: 8px; } .section-posts .message-bar .share-message-error { margin: 4px 0; } .section-posts .post-box { margin-top: 16px; margin-bottom: 60px; } .section-posts .btn-default.load-more { margin-bottom: 58px; } .section-posts .post-item { width: 100%; margin: 8px 0; background: rgba(245, 247, 255, 0.5); } .section-posts .post { padding: 12px 24px; } .section-posts .post .post-header { overflow: hidden; width: 100%; margin-bottom: 4px; } .section-posts .post .post-header .post-meta { float: left; font-size: 15px; line-height: 18px; text-align: left; text-transform: uppercase; } .section-posts .post .post-header .post-meta span { font-size: 15px; line-height: 18px; color: #6d8df0; text-transform: uppercase; display: block; } .section-posts .post .post-header .post-meta .post-date { display: flex; } .section-posts .post .post-header .post-meta .post-date span { display: inline-block; } .section-posts .post .post-header .post-controls { text-align: right; float: right; } .section-posts .post .post-header .post-controls button { margin-left: 4px; } .section-posts .post .post-image { margin: 12px 0 4px 0; line-height: 0; } .section-posts .post .post-subject { font-size: 21px; line-height: 24px; color: #6d8df0; text-transform: uppercase; text-align: left; margin: 12px 0; word-break: break-all; } .section-posts .post .post-message { font-size: 18px; line-height: 21px; text-align: left; } .section-posts .post .attachments { text-align: left; margin: 36px 0 0 0; } .section-posts .post .attachments .file-list { padding: 16px 0; } .section-posts .post .attachments .file-list .file-item { display: flex; align-items: center; } .section-posts .post .attachments .file-list .file-item .btn-download-file { position: relative; } .section-posts .post .attachments .file-list .file-item .btn-download-file:before { top: 50%; transform: translate(0, -50%); } .section-posts .post .attachments .file-list .file-item .file-size { margin: 0 0 0 16px; flex-shrink: 0; } .section-posts .post .post-grades { margin: 24px 0 12px; position: relative; } .section-posts .post .post-grades .grade-block { position: relative; } .section-posts .post .post-grades .grade-block:hover .grade-options { visibility: visible; opacity: 1; } .section-posts .post .post-grades .grade-block:hover .btn-emoticon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .section-posts .post .post-grades .grade-block:hover .btn-emoticon:hover { background: #5e63bc; } .section-posts .post .post-grades .grade-block .btn-emoticon { margin: 0; position: relative; z-index: 1001; } .section-posts .post .post-grades .grade-block .grade-options { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.2s linear; width: 592px; height: auto; top: 25px; background: #5e63bc; position: absolute; z-index: 1000; padding: 24px; } .section-posts .post .post-grades .grade-block .grade-options .grade-option-list { margin: 0; padding: 0; } .section-posts .post .post-grades .grade-block .grade-options .grade-option-list li { float: left; width: 50%; text-align: left; } .section-posts .post .post-grades .grade-block .grade-options .grade-option-list li:nth-child(odd) { padding-right: 12px; } .section-posts .post .post-grades .grade-block .grade-options .grade-option-list li:nth-child(even) { padding-left: 24px; } .section-posts .post .post-grades .grade-block .grade-options .grade-option-list li .btn-grade { width: 100%; } .section-posts .post .post-grades .grades-overview { float: right; } .section-posts .post .post-grades .grades-overview .grade-list { transition: visibility 0s, opacity 0.2s linear; width: 154px; height: auto; top: 25px; background: #f8bb81; position: absolute; z-index: 1000; font-size: 15px; padding: 12px; text-align: left; margin-left: -58px; } .section-posts .post .post-grades .grades-overview .grade-list h4 { font-size: 15px; } .section-posts .post .post-grades .grades-overview .grade-list span { width: 130px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .section-posts .post .post-grades .grades-overview ul { float: left; margin: 0; padding: 0; } .section-posts .post .post-grades .grades-overview ul li { float: left; } .section-posts .post .post-grades .grades-overview ul li .btn-emoticon { margin: 0 2px; } .section-posts .post .post-grades .grades-overview .grade-counter { float: right; margin-left: 8px; font-size: 15px; line-height: 25px; display: block; } .section-posts .feedback { background: rgba(94, 99, 188, 0.1); overflow: hidden; } .section-posts .feedback .nav-tabs { margin: 0; padding: 8px 24px; display: block; overflow: hidden; } .section-posts .feedback .nav-tabs .nav-item { float: left; height: 25px; margin-right: 24px; } .section-posts .feedback .nav-tabs .nav-item.active .btn-default { background: #f08978; color: white; } .section-posts .feedback .nav-tabs .nav-item.active .btn-txt { color: #f08978; } .section-posts .feedback .nav-tabs .nav-item .btn-txt { font-size: 15px; display: block; height: 25px; line-height: 22px; } .section-posts .feedback .tab-content { text-align: left; } .section-posts .feedback .tab-content .tab-pane { display: none; overflow: hidden; padding: 8px 24px 8px; border: 1px solid rgba(94, 99, 188, 0.1); } .section-posts .feedback .tab-content .tab-pane.active { display: block; } .section-posts .feedback .tab-content .tab-pane .feedback-area { overflow: hidden; } .section-posts .feedback .tab-content .tab-pane .feedback-area .form-group { margin: 7px 0; } .section-posts .feedback .tab-content .tab-pane .feedback-area .textarea { display: block; overflow: hidden; resize: vertical; min-height: 36px; height: 36px; line-height: 18px; float: left; width: calc(100% - 83px); word-break: break-all; } .section-posts .feedback .tab-content .tab-pane .feedback-area .feedback-buttons { float: right; } .section-posts .feedback .tab-content .tab-pane .feedback-area .feedback-buttons .btn-icon { margin-left: 5px; } .section-posts .feedback .tab-content .tab-pane .feedback-area .feedback-buttons .btn-default { padding: 0 9px; float: left; } .section-posts .feedback .tab-content .tab-pane .feedback-area .feedback-buttons .btn-clear { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -600px -219px; width: 21px; height: 21px; background-repeat: no-repeat; overflow: hidden; display: block; text-indent: -9999px; cursor: pointer; float: right; margin: 7px 0 7px 10px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-posts .feedback .tab-content .tab-pane .feedback-area .feedback-buttons .btn-clear { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-posts .feedback .tab-content .tab-pane .feedback-area .feedback-buttons .btn-clear:hover { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1096px -738px; width: 21px; height: 21px; background-repeat: no-repeat; overflow: hidden; display: block; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-posts .feedback .tab-content .tab-pane .feedback-area .feedback-buttons .btn-clear:hover { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-posts .feedback .feedback-item { overflow: hidden; border-bottom: 1px solid #5e63bc; padding-top: 16px; } .section-posts .feedback .feedback-item:last-child { border-bottom: 1px solid transparent; } .section-posts .feedback .feedback-item .feedback-header { overflow: hidden; margin: 0; } .section-posts .feedback .feedback-item .feedback-header .feedback-meta { font-size: 13px; line-height: 25px; text-align: left; float: left; text-transform: uppercase; display: flex; } .section-posts .feedback .feedback-item .feedback-header .feedback-meta .feedback-author { color: #6d8df0; margin-right: 4px; } .section-posts .feedback .feedback-item .feedback-header .feedback-meta .feedback-date { display: flex; } .section-posts .feedback .feedback-item .feedback-header .feedback-controls { text-align: right; float: right; } .section-posts .feedback .feedback-item .feedback-header .feedback-controls button { margin-left: 4px; } .section-posts .feedback .feedback-item .feedback-message { font-size: 18px; line-height: 21px; text-align: left; margin: 16px 0; overflow: hidden; word-break: break-all; } .section-posts .feedback .feedback-item .feedback-message P:first-child { margin-top: 0; } .section-posts .feedback .feedback-item .feedback-message P:last-child { margin-bottom: 0; } .section-posts .feedback .feedback-item .feedback-message .feedback-message-edit .textarea { display: block; overflow: hidden; resize: vertical; min-height: 36px; line-height: 18px; float: left; width: calc(100% - 83px); word-break: break-all; } .section-posts .feedback .feedback-item .feedback-message .feedback-message-edit .feedback-buttons { float: right; } .section-posts .feedback .feedback-item .feedback-message .feedback-message-edit .feedback-buttons .btn-icon { margin-left: 5px; } .section-posts .feedback .feedback-item .feedback-reaction { margin-bottom: 16px; overflow: hidden; } .section-posts .feedback .reactions { padding-left: 60px; } .section-posts .feedback .reactions h5 { text-transform: uppercase; font-weight: normal; margin: 16px 0 0 0; } .section-posts .feedback .reactions .feedback-item { border-bottom: 1px solid rgba(94, 99, 188, 0.1); } .section-posts .feedback .reactions .feedback-item:last-child { border-bottom: 1px solid transparent; } .section-posts .edit-date { display: inline-block; margin-left: 8px; cursor: pointer; } .section-posts .edit-date:before { content: "\e042"; font-size: 18px; } .section-posts .edit-date div { display: inline-block; position: absolute; z-index: 9000; } .section-posts .edit-date div span { color: #5e63bc !important; padding: 0 2px; } .section-posts .edit-date div span:first-child { margin-left: 2px; } .modal.add-post .modal-dialog { width: 640px; } .modal.add-post .loader-centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal.add-post .post-block { margin: 12px; padding: 12px; } .modal.add-post .post-block input[type=email], .modal.add-post .post-block input[type=password], .modal.add-post .post-block input[type=text], .modal.add-post .post-block select, .modal.add-post .post-block textarea { width: 100%; } .modal.add-post .post-block .form-info { margin: 4px 0; } .modal.add-post .post-block .upload-button-block .btn-default { margin: 0; } .modal.add-post .image-upload-block { border-bottom: 1px solid rgba(248, 187, 129, 0.2); padding: 22px 0; float: left; width: 100%; } .modal.add-post .image-upload-block .image-list { list-style: none; display: flex; align-items: center; margin: 20px 0 0 0; padding: 10px 0 0 0; } .modal.add-post .image-upload-block .image-list .image-item { width: 80px; position: relative; margin-right: 24px; } .modal.add-post .image-upload-block .image-list .image-item .image-thumb { border: 1px solid #5e63bc; border-radius: 8px; line-height: 0; overflow: hidden; width: 80px; height: 80px; } .modal.add-post .image-upload-block .image-list .image-item .image-thumb img { width: 80px; height: 80px; margin: -1px; object-fit: cover; } .modal.add-post .image-upload-block .image-list .image-item span { margin: 4px 0 0 0px; display: block; } .modal.add-post .image-upload-block .image-list .image-item .btn-delete-item { position: absolute; top: -10px; right: -10px; } .modal.add-post .file-upload-block { border-bottom: 1px solid rgba(248, 187, 129, 0.2); padding: 22px 0; margin-bottom: 22px; float: left; width: 100%; } .modal.add-post .file-upload-block .file-list { list-style: none; display: block; padding: 0 0 0 18px; overflow: hidden; } .modal.add-post .file-upload-block .file-item { display: flex; align-items: center; margin: 14px 0; } .modal.add-post .file-upload-block .file-item:before { content: ''; display: block; width: 5px; height: 5px; background-color: #5e63bc; border-radius: 100px; position: absolute; transform: translate(-16px, 1px); } .modal.add-post .file-upload-block .file-item span { margin: 0 12px 0 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .modal.add-post .file-upload-block .file-item .btn-delete-item { margin-right: 10px; flex-shrink: 0; } .modal.add-post .form-actions .btn-default { margin: 0 4px; } .modal.gradelist .modal-dialog { width: 640px; } .modal.gradelist .grades-list { list-style: none; margin: 0 auto; padding: 15px; } .modal.gradelist .grades-list > li { border-bottom: 1px solid rgba(94, 99, 188, 0.1); padding-bottom: 16px; margin-bottom: 16px; } .modal.gradelist .grades-list > li:last-child { border-bottom: 1px solid transparent; padding-bottom: 0; margin-bottom: 0; } .modal.gradelist .grades-list .user-grades { list-style: none; margin: 0 0 0 50px; overflow: hidden; } .modal.gradelist .grades-list .user-grades li { width: 46%; float: left; margin-left: 18px; list-style: disc; line-height: 21px; } .modal.gradelist .grade-header { position: relative; padding-left: 50px; box-sizing: border-box; height: 35px; } .modal.gradelist .grade-header:before { position: absolute; top: 0; left: 0; font-size: 0; line-height: 0; width: 35px; height: auto; } .modal.gradelist .grade-header span { font-size: 21px; line-height: 35px; text-transform: uppercase; } .modal.image-slider .swiper-container .media-item { background: none; } .modal.image-slider .swiper-container .media-item:hover { cursor: default; } .section-dilemma .quiz-answers .quiz-answer .slider-answer-block { width: 100%; border: 1px solid rgba(248, 187, 129, 0.2); background-color: rgba(245, 247, 255, 0.5); } .section-dilemma .quiz-answers .quiz-answer .slider-answer-block .btn-answer { background-color: transparent; } .section-dilemma .quiz-answers .quiz-answer .slider-answer-block .btn-answer:hover { background-color: transparent; } .section-dilemma .quiz-answers .quiz-answer .slider-answer-block .slider-answer { position: relative; width: 100%; display: flex; justify-content: flex-start; align-items: center; padding: 8px; } .section-dilemma .dilemma-title { color: #f08978; text-transform: uppercase; font-size: 24px; display: block; margin: 12px 0; text-align: center; } .section-dilemma .dilemma-title.sub { font-size: 21px; margin: 24px 0; } .section-dilemma .dilemma-title.stakeholder { color: #6d8df0; text-align: left; } .section-dilemma .dilemma-container-block { background: rgba(245, 247, 255, 0.5); padding: 27px; } .section-dilemma .dilemma-image-block { width: 100%; border: 1px solid #5e63bc; height: 150px; display: flex; align-items: center; justify-content: center; } .section-dilemma .dilemma-question-block { margin: 16px 0; } .section-dilemma .dilemma-result-block .progress-step-block .step { width: 32px; height: 32px; } .section-dilemma .dilemma-result-block .progress-step-block .step.active { width: 52px; height: 52px; } .section-dilemma .button-row { margin-top: 32px; } .section-dilemma .button-row .btn-default { margin: 0 6px; } .section-dilemma .stakeholder-container-block { background: rgba(245, 247, 255, 0.5); padding: 27px; } .section-dilemma .score-message-block { margin: 20px; } .section-dilemma .score-message-block .message, .section-dilemma .score-message-block .points { display: block; font-size: 30px; line-height: 40px; color: #6d8df0; text-align: center; text-transform: uppercase; } .section-dilemma .score-message-block .points { font-size: 40px; } .section-dilemma .reward-block { display: flex; align-items: center; justify-content: space-evenly; margin: 20px 0; } .section-dilemma .reward-block .reward { opacity: 0.3; } .section-dilemma .reward-block .reward .reward-image { width: 80px; } .section-dilemma .reward-block .reward.active { opacity: 1; } .section-dilemma .reward-block .reward.active .reward-image { width: 120px; } .section-dilemma .reward-block .reward.reward-1 .reward-image { content: url("../../shared/images/dilemma/retina/reward-gold@2x.png?v=20240109145540"); } .section-dilemma .reward-block .reward.reward-2 .reward-image { content: url("../../shared/images/dilemma/retina/reward-silver@2x.png?v=20240109145540"); } .section-dilemma .reward-block .reward.reward-3 .reward-image { content: url("../../shared/images/dilemma/retina/reward-bronze@2x.png?v=20240109145540"); } .section-dilemma .stakeholder-bar { background-color: rgba(248, 187, 129, 0.5); padding: 6px; margin-top: 44px; } .section-dilemma .stakeholder-bar h4 { text-align: left; margin: 12px 0 8px; overflow: hidden; } .section-dilemma .stakeholder-bar .markdown { font-size: 15px; line-height: 18px; } .section-dilemma .stakeholder-bar .stakeholder-image { width: 100%; } .section-dilemma .stakeholder-bar .stakeholder-image.sh-1 { content: url("../../shared/images/avatar/npcs/stakeholders/stakeholder-1.png?v=20240109145540"); } .section-dilemma .stakeholder-bar .stakeholder-image.sh-2 { content: url("../../shared/images/avatar/npcs/stakeholders/stakeholder-2.png?v=20240109145540"); } .section-dilemma .stakeholder-bar .stakeholder-image.sh-3 { content: url("../../shared/images/avatar/npcs/stakeholders/stakeholder-3.png?v=20240109145540"); } .section-dilemma .stakeholder-bar .stakeholder-image.sh-4 { content: url("../../shared/images/avatar/npcs/stakeholders/stakeholder-4.png?v=20240109145540"); } .section-dilemma .stakeholder-bar .stakeholder-image.sh-5 { content: url("../../shared/images/avatar/npcs/stakeholders/stakeholder-5.png?v=20240109145540"); } .section-dilemma .d-flex { display: flex; justify-content: space-between; align-items: flex-start; } /* ====== start dilemma summary ===== */ .col-answers { width: 47%; display: flex; position: relative; } .col-answers .quiz-answers { margin-top: 0; } .col-answers .quiz-answers .quiz-answer.answer-tab.active .btn-answer { box-shadow: inset 0px 0px 0px 4px #6d8df0; } .col-answers .quiz-answers .quiz-answer.answer-tab.active .btn-answer:hover { background-color: rgba(40, 87, 233, 0.5); cursor: default; } .col-answers .quiz-answers .quiz-answer.answer-tab .btn-answer.own { background-color: rgba(40, 87, 233, 0.5); } .col-answers .quiz-answers .quiz-answer.answer-tab .btn-answer.own:hover { background: rgba(40, 87, 233, 0.8); cursor: pointer; } .col-stakeholders { width: 47%; display: flex; flex-direction: column; position: relative; border: 4px solid #6d8df0; padding: 8px; } .col-stakeholders .stakeholder-review-item { padding: 8px; margin: 0 0 8px 0; background-color: rgba(248, 187, 129, 0.1); border: 1px solid rgba(248, 187, 129, 0.2); } .col-stakeholders .stakeholder-review-item.own { background-color: rgba(248, 187, 129, 0.2); } .col-stakeholders .stakeholder-review-item.active .toggle-info { display: block; } .col-stakeholders .stakeholder-review-item .toggle-info { display: none; text-align: left; } .col-stakeholders .stakeholder-review-item .toggle-info .description { display: block; margin: 6px 0 0 0; } .col-stakeholders .stakeholder-review-item .main-info { display: flex; justify-content: space-between; align-items: stretch; } .col-stakeholders .stakeholder-review-item .main-info .stakeholder-image.sh-1 { content: url("../../shared/images/avatar/npcs/stakeholders/stakeholder-1.png?v=20240109145540"); } .col-stakeholders .stakeholder-review-item .main-info .stakeholder-image.sh-2 { content: url("../../shared/images/avatar/npcs/stakeholders/stakeholder-2.png?v=20240109145540"); } .col-stakeholders .stakeholder-review-item .main-info .stakeholder-image.sh-3 { content: url("../../shared/images/avatar/npcs/stakeholders/stakeholder-3.png?v=20240109145540"); } .col-stakeholders .stakeholder-review-item .main-info .stakeholder-image.sh-4 { content: url("../../shared/images/avatar/npcs/stakeholders/stakeholder-4.png?v=20240109145540"); } .col-stakeholders .stakeholder-review-item .main-info .stakeholder-image.sh-5 { content: url("../../shared/images/avatar/npcs/stakeholders/stakeholder-5.png?v=20240109145540"); } .col-stakeholders .stakeholder-review-item .main-info .stakeholder-image.small { width: 50px; height: 50px; flex: 0; } .col-stakeholders .stakeholder-review-item .main-info .stakeholder-avatar { width: 50px; height: 50px; flex: 0; } .col-stakeholders .stakeholder-review-item .main-info .player-avatar { width: 50px; height: 50px; background: rgba(248, 187, 129, 0.2); overflow: hidden; position: relative; border: 1px solid #5e63bc; border-radius: 3px; } .col-stakeholders .stakeholder-review-item .main-info .player-avatar .avatar-container { width: 55px; height: 84px; } .col-stakeholders .stakeholder-review-item .main-info .stakeholder-data { display: flex; flex-direction: column; justify-content: space-between; flex: 1; margin: 0 0 0 5px; } .col-stakeholders .stakeholder-review-item .main-info .stakeholder-data .title { font-size: 18px; line-height: 21px; margin: 0 0 0 3px; text-transform: uppercase; display: block; height: 18px; overflow: hidden; text-overflow: ellipsis; text-align: left; } .col-stakeholders .stakeholder-review-item .main-info .stakeholder-data .progress-step-block { justify-content: left; } .col-stakeholders .stakeholder-review-item .main-info .btn-icon { flex-shrink: 0; } .connector { width: 4px; right: -30px; background-color: #6d8df0; height: 10px; position: absolute; } .connector:after, .connector:before { content: ''; position: absolute; width: 30px; height: 4px; background-color: #6d8df0; } .connector:after { top: 100%; left: 100%; transform: translate(-100%, -100%); } .connector:before { top: 0; left: 0; transform: translate(0, 0); } .connector.reversed:after { top: 0; } .connector.reversed:before { top: 100%; } /* ====== end dilemma summary ===== */ /* ====== start dilemma choose ===== */ #reel-stage { --image-width:200; margin: 80px auto 0 auto; width: 450px; height: 300px; -webkit-perspective: 0; } #reel-stage * { -webkit-backface-visibility: visible; } .button-row { text-align: center; } .btn-stop { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -732px -322px; width: 65px; height: 65px; background-repeat: no-repeat; overflow: hidden; display: block; background-color: transparent; border: none; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-stop { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .btn-stop:active { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -732px -257px; width: 65px; height: 65px; background-repeat: no-repeat; overflow: hidden; display: block; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .btn-stop:active { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .mask-layer { width: 1100px; transform: translate3d(-50%, 0, -5px); height: 675px; position: absolute; top: -160px; left: 50%; background: rgba(255, 255, 255, 0.5); clip-path: polygon(0% 0%, 0% 100%, 23% 100%, 23% 18%, 76% 18%, 76% 109%, 100% 100%, 100% 0%); display: none; } .selection-frame { width: 642px; height: 760px; left: 50%; transform: translate3d(-50%, 0, -5px); position: absolute; top: -58px; box-sizing: content-box; } .selection-frame .frame-image { content: url("../../shared/images/avatar/npcs/stakeholders/reel-frame.png?v=20240109145540"); } .selection-frame .stakeholder-info { width: 92%; left: -1px; height: 100px; position: absolute; top: 630px; right: -1px; margin: 0 auto; display: flex; justify-content: center; align-items: center; overflow: hidden; } .selection-frame .stakeholder-info span { font-size: 32px; line-height: 38px; text-transform: uppercase; color: #f08978; text-align: center; max-height: 80px; overflow: hidden; } #rotate { transform-style: preserve-3d; transform: rotatex(var(--ring-tilt)) scale3d(var(--scale-factor), var(--scale-factor), var(--scale-factor)); } .reel-shadow { width: 1100px; height: 1100px; background: radial-gradient(circle, rgba(20, 20, 20, 0.8) 0%, rgba(20, 20, 20, 0) 70%); position: absolute; left: 50%; top: 650px; transform: translate(-50%, -50%) rotateX(90deg); border-radius: 100%; } .reel { margin: 0 auto; height: 110px; width: 450px; -webkit-transform-style: preserve-3d; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; transform: translateZ(var(--reel-depth-offset)); } .poster-image { position: absolute; top: 0; left: 0; } .poster-overlay { position: absolute; top: 0; left: 0; } .poster, .backside { position: absolute; width: 522px; height: 522px; border-radius: 10px; } /* ====== end dilemma choose ===== */ /* ====== start animations ===== */ @-webkit-keyframes reel-y-spin { 0% { -webkit-transform: translateZ(var(--reel-depth-offset)) rotateY(0deg); } 100% { -webkit-transform: translateZ(var(--reel-depth-offset)) rotateY(var(--end-rotation)); } } @-webkit-keyframes reel-y-spin-stop { 0% { -webkit-transform: translateZ(var(--reel-depth-offset)) rotateY(0deg); } 100% { -webkit-transform: translateZ(var(--reel-depth-offset)) rotateY(var(--end-rotation)); } } @-webkit-keyframes reel-reset { 0% { -webkit-transform: translateZ(var(--reel-depth-offset)) rotateY(var(--end-rotation)); } 100% { -webkit-transform: translateZ(var(--reel-depth-offset)) rotateY(var(--end-rotation)); } } @-webkit-keyframes fade-overlay { 0% { opacity: 1; } 100% { opacity: 0; } } /* ====== end animations ===== */ .section-profile .accordion-content .avatar-container { margin: 10px auto 10px auto; } .section-profile .accordion-content .nickname { display: block; text-transform: uppercase; margin: 0 0 18px 0; text-align: center; } .section-profile .accordion-content .form-validation { margin: 4px auto 8px auto; } .section-profile .volume-block .slider-block { padding: 0 16px; } .section-profile .volume-block .slider-block .mat-slider { margin: 0; } .section-profile .volume-block .slider-block .mat-slider.mat-slider-horizontal { height: 30px; padding: 0; } .section-profile .volume-block .slider-block .mat-slider.mat-slider-horizontal .mat-slider-wrapper { top: 8px; } .section-profile .volume-block .slider-block .mat-slider.mat-slider-horizontal .mat-slider-wrapper .mat-slider-thumb { bottom: -11px; } .quiz-answer-set-order .status-indicator { width: 100%; justify-content: center; } .quiz-answer-set-order .answer-btn-row { margin: 10px 0 0 0; } .quiz-answer-set-order .answer-btn-row .btn-default { margin: 0 0 0 18px; } .quiz-content { background: rgba(245, 247, 255, 0.5); padding: 12px 16px; margin: 16px 0; text-align: left; overflow: hidden; } .quiz-content .btn-row .btn-default { margin: 0 8px; } .quiz-header { height: 54px; margin-top: -12px; } .quiz-header .status { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -534px -277px; width: 63px; height: 54px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; margin: 0 0 0 -5px; text-align: center; line-height: 54px; font-size: 15px; color: #5e63bc; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .quiz-header .status { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .quiz-header .timer { font-size: 18px; line-height: 18px; color: #5e63bc; width: 120px; text-align: left; margin: 20px 0 0 -60px; padding: 0 28px; position: absolute; left: 50%; } .quiz-header .timer::before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1002px -327px; width: 20px; height: 16px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; margin-left: -28px; margin-top: 3px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .quiz-header .timer::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .quiz-question { font-size: 21px; line-height: 24px; height: auto; margin: 24px 0 8px; padding: 0 8px; min-height: 96px; text-align: left; color: #5e63bc; } .quiz-question-images { margin: 24px 0 8px; } .quiz-answers-title { font-size: 21px; margin: 8px 0 0; color: #6d8df0; } .quiz-answers { list-style: none; padding: 0; margin: 8px auto 8px; } .quiz-answers.statement .quiz-answer:first-child .answer-option { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -472px -898px; width: 59px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .quiz-answers.statement .quiz-answer:first-child .answer-option { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .quiz-answers.statement .quiz-answer:last-child .answer-option { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -531px -898px; width: 59px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .quiz-answers.statement .quiz-answer:last-child .answer-option { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .quiz-answer { width: 100%; padding: 0; height: auto; margin: 8px 0; display: flex; justify-content: center; align-items: center; } @media (hover: hover) { .quiz-answer:hover .btn-answer { background: rgba(109, 141, 240, 0.5); } .quiz-answer:hover .btn-answer.no-hover { background: rgba(40, 87, 233, 0.5); cursor: default; } } .quiz-answer.selected .btn-answer { background: rgba(40, 87, 233, 0.8); } .quiz-answer.selected .btn-answer .answer-option { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -767px -898px; width: 59px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; display: flex; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .quiz-answer.selected .btn-answer .answer-option { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .quiz-answer.selected .btn-answer .answer-option span { color: #f8bb81; text-shadow: 2px 2px 0px #5e63bc; } .quiz-answer.correct .btn-answer { background: rgba(118, 199, 148, 0.8); } .quiz-answer.correct .answer-option { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -767px -898px; width: 59px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; display: flex; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .quiz-answer.correct .answer-option { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .quiz-answer.correct .answer-option span { color: #f8bb81; text-shadow: 2px 2px 0px #5e63bc; } .quiz-answer.incorrect .btn-answer { background: rgba(247, 91, 95, 0.8); } .quiz-answer.incorrect .answer-option { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -767px -898px; width: 59px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; display: flex; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .quiz-answer.incorrect .answer-option { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .quiz-answer.incorrect .answer-option span { color: #f8bb81; text-shadow: 2px 2px 0px #5e63bc; } .quiz-answer .btn-answer { display: flex; align-items: center; background: rgba(40, 87, 233, 0.5); border: 0; padding: 0; width: 100%; min-height: 64px; position: relative; transition: 0.2s; } .quiz-answer .particles-animation-container { z-index: 2; } .quiz-answer .answer-option { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -590px -898px; width: 59px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; flex-shrink: 0; margin: 0 12px; display: flex; justify-content: center; align-items: center; transition: color 0.2s; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .quiz-answer .answer-option { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .quiz-answer .answer-option span { font-size: 40px; color: #5e63bc; text-shadow: 2px 2px 0px #f8bb81; transition: 0.2s; } .quiz-answer .answer-text { width: 100%; padding: 8px 8px 8px 0px; font-size: 15px; line-height: 18px; text-align: left; color: #5e63bc; transition: 0.2s; } .quiz-answer .answer-text p { margin: 0; padding: 0; font-size: 15px; line-height: 18px; color: #5e63bc; transition: 0.2s; } .quiz-answer .answer-text .markdown { transition: 0.2s; } .quiz-answer .answer-text .markdown p { margin: 0; transition: 0.2s; } .answer-btn-row .status-indicator { float: left; } .answer-btn-row .btn-default { float: right; } /* ====== start shuffle answer ===== */ .quiz-answer-shuffle .shuffle { display: block; overflow: hidden; } .quiz-answer-shuffle .shuffle .char-block { width: 25px; height: 25px; display: block; margin: 5px 3px; float: left; line-height: 25px; text-transform: uppercase; text-align: center; } .quiz-answer-shuffle .shuffle .char-block:first-child { margin: 5px 3px 5px 0; } .quiz-answer-shuffle .shuffle.answer-given .char-block { border: solid 1px #5e63bc; color: #6d8df0; } .quiz-answer-shuffle .shuffle.answer-given .char-block:nth-last-child(1) { margin: 5px 0 5px 3px; } .quiz-answer-shuffle .shuffle.answer-given .char-block.animated span:before, .quiz-answer-shuffle .shuffle.answer-given .section-achievements .char-block.logo-medium span:before, .section-achievements .quiz-answer-shuffle .shuffle.answer-given .char-block.logo-medium span:before, .quiz-answer-shuffle .shuffle.answer-given .section-achievements h2.char-block span:before, .section-achievements .quiz-answer-shuffle .shuffle.answer-given h2.char-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-achievements .char-block.achievement-list span:before, .section-achievements .quiz-answer-shuffle .shuffle.answer-given .char-block.achievement-list span:before, .quiz-answer-shuffle .shuffle.answer-given .section-auth .char-block.logo-large span:before, .section-auth .quiz-answer-shuffle .shuffle.answer-given .char-block.logo-large span:before, .quiz-answer-shuffle .shuffle.answer-given .section-auth h2.char-block.home span:before, .section-auth .quiz-answer-shuffle .shuffle.answer-given h2.char-block.home span:before, .quiz-answer-shuffle .shuffle.answer-given .section-auth .char-block.auth-split span:before, .section-auth .quiz-answer-shuffle .shuffle.answer-given .char-block.auth-split span:before, .quiz-answer-shuffle .shuffle.answer-given .section-auth .char-block.row-steps span:before, .section-auth .quiz-answer-shuffle .shuffle.answer-given .char-block.row-steps span:before, .quiz-answer-shuffle .shuffle.answer-given .section-passwordforgot .char-block.logo-medium span:before, .section-passwordforgot .quiz-answer-shuffle .shuffle.answer-given .char-block.logo-medium span:before, .quiz-answer-shuffle .shuffle.answer-given .section-register .char-block.logo-medium span:before, .section-register .quiz-answer-shuffle .shuffle.answer-given .char-block.logo-medium span:before, .quiz-answer-shuffle .shuffle.answer-given .section-reset .char-block.logo-medium span:before, .section-reset .quiz-answer-shuffle .shuffle.answer-given .char-block.logo-medium span:before, .quiz-answer-shuffle .shuffle.answer-given .section-passwordforgot h2.char-block span:before, .section-passwordforgot .quiz-answer-shuffle .shuffle.answer-given h2.char-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-register h2.char-block span:before, .section-register .quiz-answer-shuffle .shuffle.answer-given h2.char-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-reset h2.char-block span:before, .section-reset .quiz-answer-shuffle .shuffle.answer-given h2.char-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-passwordforgot .char-block.intro span:before, .section-passwordforgot .quiz-answer-shuffle .shuffle.answer-given .char-block.intro span:before, .quiz-answer-shuffle .shuffle.answer-given .section-register .char-block.intro span:before, .section-register .quiz-answer-shuffle .shuffle.answer-given .char-block.intro span:before, .quiz-answer-shuffle .shuffle.answer-given .section-reset .char-block.intro span:before, .section-reset .quiz-answer-shuffle .shuffle.answer-given .char-block.intro span:before, .quiz-answer-shuffle .shuffle.answer-given .section-passwordforgot form.char-block span:before, .section-passwordforgot .quiz-answer-shuffle .shuffle.answer-given form.char-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-register form.char-block span:before, .section-register .quiz-answer-shuffle .shuffle.answer-given form.char-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-reset form.char-block span:before, .section-reset .quiz-answer-shuffle .shuffle.answer-given form.char-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-profile .char-block.logo-medium span:before, .section-profile .quiz-answer-shuffle .shuffle.answer-given .char-block.logo-medium span:before, .quiz-answer-shuffle .shuffle.answer-given .section-profile h2.char-block span:before, .section-profile .quiz-answer-shuffle .shuffle.answer-given h2.char-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-profile .char-block.intro span:before, .section-profile .quiz-answer-shuffle .shuffle.answer-given .char-block.intro span:before, .quiz-answer-shuffle .shuffle.answer-given .section-profile .char-block.profile-name span:before, .section-profile .quiz-answer-shuffle .shuffle.answer-given .char-block.profile-name span:before, .quiz-answer-shuffle .shuffle.answer-given .section-profile .char-block.new-avatar span:before, .section-profile .quiz-answer-shuffle .shuffle.answer-given .char-block.new-avatar span:before, .quiz-answer-shuffle .shuffle.answer-given .section-battle-overview .char-block.aInvitePopupError span:before, .section-battle-overview .quiz-answer-shuffle .shuffle.answer-given .char-block.aInvitePopupError span:before, .quiz-answer-shuffle .shuffle.answer-given .section-battle-overview .char-block.aSlotPicked span:before, .section-battle-overview .quiz-answer-shuffle .shuffle.answer-given .char-block.aSlotPicked span:before, .quiz-answer-shuffle .shuffle.answer-given .section-battle-overview .char-block.aSlotCancelled span:before, .section-battle-overview .quiz-answer-shuffle .shuffle.answer-given .char-block.aSlotCancelled span:before, .quiz-answer-shuffle .shuffle.answer-given .section-battle-overview .char-block.aRubberBand span:before, .section-battle-overview .quiz-answer-shuffle .shuffle.answer-given .char-block.aRubberBand span:before, .quiz-answer-shuffle .shuffle.answer-given .section-battle-overview .char-block.aQuizStatusBlock span:before, .section-battle-overview .quiz-answer-shuffle .shuffle.answer-given .char-block.aQuizStatusBlock span:before, .quiz-answer-shuffle .shuffle.answer-given .section-battle-overview .char-block.aChallengerPrologue span:before, .section-battle-overview .quiz-answer-shuffle .shuffle.answer-given .char-block.aChallengerPrologue span:before, .quiz-answer-shuffle .shuffle.answer-given .section-battle-overview .char-block.aOpponentPrologue span:before, .section-battle-overview .quiz-answer-shuffle .shuffle.answer-given .char-block.aOpponentPrologue span:before, .quiz-answer-shuffle .shuffle.answer-given .section-battle-overview .char-block.logo-medium span:before, .section-battle-overview .quiz-answer-shuffle .shuffle.answer-given .char-block.logo-medium span:before, .quiz-answer-shuffle .shuffle.answer-given .section-battle-overview h2.char-block span:before, .section-battle-overview .quiz-answer-shuffle .shuffle.answer-given h2.char-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-battle-overview .char-block.battle-results span:before, .section-battle-overview .quiz-answer-shuffle .shuffle.answer-given .char-block.battle-results span:before, .quiz-answer-shuffle .shuffle.answer-given .section-battle-overview .char-block.game-over span:before, .section-battle-overview .quiz-answer-shuffle .shuffle.answer-given .char-block.game-over span:before, .quiz-answer-shuffle .shuffle.answer-given .section-battle-overview .char-block.game-over-messagebox span:before, .section-battle-overview .quiz-answer-shuffle .shuffle.answer-given .char-block.game-over-messagebox span:before, .quiz-answer-shuffle .shuffle.answer-given .section-contact .char-block.logo-medium span:before, .section-contact .quiz-answer-shuffle .shuffle.answer-given .char-block.logo-medium span:before, .quiz-answer-shuffle .shuffle.answer-given .section-contact h2.char-block span:before, .section-contact .quiz-answer-shuffle .shuffle.answer-given h2.char-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-contact .char-block.intro span:before, .section-contact .quiz-answer-shuffle .shuffle.answer-given .char-block.intro span:before, .quiz-answer-shuffle .shuffle.answer-given .section-contact form.char-block span:before, .section-contact .quiz-answer-shuffle .shuffle.answer-given form.char-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-faq .char-block.logo-medium span:before, .section-faq .quiz-answer-shuffle .shuffle.answer-given .char-block.logo-medium span:before, .quiz-answer-shuffle .shuffle.answer-given .section-faq h2.char-block span:before, .section-faq .quiz-answer-shuffle .shuffle.answer-given h2.char-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-faq .char-block.accordion-items span:before, .section-faq .quiz-answer-shuffle .shuffle.answer-given .char-block.accordion-items span:before, .quiz-answer-shuffle .shuffle.answer-given .section-coop .char-block.aInvitePopupError span:before, .section-coop .quiz-answer-shuffle .shuffle.answer-given .char-block.aInvitePopupError span:before, .quiz-answer-shuffle .shuffle.answer-given .section-coop .char-block.aSlotPicked span:before, .section-coop .quiz-answer-shuffle .shuffle.answer-given .char-block.aSlotPicked span:before, .quiz-answer-shuffle .shuffle.answer-given .section-coop .char-block.aSlotCancelled span:before, .section-coop .quiz-answer-shuffle .shuffle.answer-given .char-block.aSlotCancelled span:before, .quiz-answer-shuffle .shuffle.answer-given .section-coop .char-block.aRubberBand span:before, .section-coop .quiz-answer-shuffle .shuffle.answer-given .char-block.aRubberBand span:before, .quiz-answer-shuffle .shuffle.answer-given .section-coop .char-block.aQuizStatusBlock span:before, .section-coop .quiz-answer-shuffle .shuffle.answer-given .char-block.aQuizStatusBlock span:before, .quiz-answer-shuffle .shuffle.answer-given .section-coop .char-block.aChallengerPrologue span:before, .section-coop .quiz-answer-shuffle .shuffle.answer-given .char-block.aChallengerPrologue span:before, .quiz-answer-shuffle .shuffle.answer-given .section-coop .char-block.aOpponentPrologue span:before, .section-coop .quiz-answer-shuffle .shuffle.answer-given .char-block.aOpponentPrologue span:before, .quiz-answer-shuffle .shuffle.answer-given .section-coop .char-block.logo-medium span:before, .section-coop .quiz-answer-shuffle .shuffle.answer-given .char-block.logo-medium span:before, .quiz-answer-shuffle .shuffle.answer-given .section-coop h2.char-block span:before, .section-coop .quiz-answer-shuffle .shuffle.answer-given h2.char-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-coop .char-block.battle-results span:before, .section-coop .quiz-answer-shuffle .shuffle.answer-given .char-block.battle-results span:before, .quiz-answer-shuffle .shuffle.answer-given .section-coop .char-block.game-over span:before, .section-coop .quiz-answer-shuffle .shuffle.answer-given .char-block.game-over span:before, .quiz-answer-shuffle .shuffle.answer-given .section-coop .char-block.game-over-messagebox span:before, .section-coop .quiz-answer-shuffle .shuffle.answer-given .char-block.game-over-messagebox span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .widget .examworld .progress-gauge .char-block.progress-highlight span:before, .section-dashboard .widget .examworld .progress-gauge .quiz-answer-shuffle .shuffle.answer-given .char-block.progress-highlight span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .char-block.timeline span:before, .section-dashboard .quiz-answer-shuffle .shuffle.answer-given .char-block.timeline span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-2.current-period-1 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-2.current-period-1 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-2.current-period-2 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-2.current-period-2 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-2.current-period-2 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-2.current-period-2 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-3.current-period-1 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-3.current-period-1 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-3.current-period-2 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-3.current-period-2 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-3.current-period-2 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-3.current-period-2 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-3.current-period-3 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-3.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-3.current-period-3 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-3.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-3.current-period-3 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-3.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-4.current-period-1 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-4.current-period-1 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-4.current-period-2 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-4.current-period-2 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-4.current-period-2 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-4.current-period-2 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-4.current-period-3 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-4.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-4.current-period-3 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-4.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-4.current-period-3 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-4.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-4.current-period-4 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-4.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-4.current-period-4 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-4.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-4.current-period-4 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-4.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-4.current-period-4 li.char-block:nth-child(4)::after span:before, .section-dashboard .timeline .period-total-4.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(4)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-5.current-period-1 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-5.current-period-1 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-5.current-period-2 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-5.current-period-2 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-5.current-period-2 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-5.current-period-2 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-5.current-period-3 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-5.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-5.current-period-3 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-5.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-5.current-period-3 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-5.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-5.current-period-4 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-5.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-5.current-period-4 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-5.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-5.current-period-4 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-5.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-5.current-period-4 li.char-block:nth-child(4)::after span:before, .section-dashboard .timeline .period-total-5.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(4)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-5.current-period-5 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-5.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-5.current-period-5 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-5.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-5.current-period-5 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-5.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-5.current-period-5 li.char-block:nth-child(4)::after span:before, .section-dashboard .timeline .period-total-5.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(4)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-5.current-period-5 li.char-block:nth-child(5)::after span:before, .section-dashboard .timeline .period-total-5.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(5)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-1 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-6.current-period-1 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-2 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-6.current-period-2 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-2 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-6.current-period-2 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-3 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-6.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-3 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-6.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-3 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-6.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-4 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-6.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-4 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-6.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-4 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-6.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-4 li.char-block:nth-child(4)::after span:before, .section-dashboard .timeline .period-total-6.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(4)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-5 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-6.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-5 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-6.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-5 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-6.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-5 li.char-block:nth-child(4)::after span:before, .section-dashboard .timeline .period-total-6.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(4)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-5 li.char-block:nth-child(5)::after span:before, .section-dashboard .timeline .period-total-6.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(5)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-6 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-6.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-6 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-6.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-6 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-6.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-6 li.char-block:nth-child(4)::after span:before, .section-dashboard .timeline .period-total-6.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(4)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-6 li.char-block:nth-child(5)::after span:before, .section-dashboard .timeline .period-total-6.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(5)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-6.current-period-6 li.char-block:nth-child(6)::after span:before, .section-dashboard .timeline .period-total-6.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(6)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-1 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-7.current-period-1 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-2 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-7.current-period-2 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-2 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-7.current-period-2 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-3 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-7.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-3 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-7.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-3 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-7.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-4 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-7.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-4 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-7.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-4 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-7.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-4 li.char-block:nth-child(4)::after span:before, .section-dashboard .timeline .period-total-7.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(4)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-5 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-7.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-5 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-7.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-5 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-7.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-5 li.char-block:nth-child(4)::after span:before, .section-dashboard .timeline .period-total-7.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(4)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-5 li.char-block:nth-child(5)::after span:before, .section-dashboard .timeline .period-total-7.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(5)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-6 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-7.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-6 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-7.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-6 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-7.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-6 li.char-block:nth-child(4)::after span:before, .section-dashboard .timeline .period-total-7.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(4)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-6 li.char-block:nth-child(5)::after span:before, .section-dashboard .timeline .period-total-7.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(5)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-6 li.char-block:nth-child(6)::after span:before, .section-dashboard .timeline .period-total-7.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(6)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-7 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-7.current-period-7 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-7 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-7.current-period-7 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-7 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-7.current-period-7 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-7 li.char-block:nth-child(4)::after span:before, .section-dashboard .timeline .period-total-7.current-period-7 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(4)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-7 li.char-block:nth-child(5)::after span:before, .section-dashboard .timeline .period-total-7.current-period-7 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(5)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-7 li.char-block:nth-child(6)::after span:before, .section-dashboard .timeline .period-total-7.current-period-7 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(6)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-7.current-period-7 li.char-block:nth-child(7)::after span:before, .section-dashboard .timeline .period-total-7.current-period-7 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(7)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-1 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-8.current-period-1 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-2 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-8.current-period-2 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-2 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-8.current-period-2 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-3 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-8.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-3 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-8.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-3 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-8.current-period-3 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-4 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-8.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-4 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-8.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-4 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-8.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-4 li.char-block:nth-child(4)::after span:before, .section-dashboard .timeline .period-total-8.current-period-4 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(4)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-5 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-8.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-5 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-8.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-5 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-8.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-5 li.char-block:nth-child(4)::after span:before, .section-dashboard .timeline .period-total-8.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(4)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-5 li.char-block:nth-child(5)::after span:before, .section-dashboard .timeline .period-total-8.current-period-5 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(5)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-6 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-8.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-6 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-8.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-6 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-8.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-6 li.char-block:nth-child(4)::after span:before, .section-dashboard .timeline .period-total-8.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(4)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-6 li.char-block:nth-child(5)::after span:before, .section-dashboard .timeline .period-total-8.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(5)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-6 li.char-block:nth-child(6)::after span:before, .section-dashboard .timeline .period-total-8.current-period-6 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(6)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-7 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-8.current-period-7 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-7 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-8.current-period-7 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-7 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-8.current-period-7 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-7 li.char-block:nth-child(4)::after span:before, .section-dashboard .timeline .period-total-8.current-period-7 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(4)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-7 li.char-block:nth-child(5)::after span:before, .section-dashboard .timeline .period-total-8.current-period-7 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(5)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-7 li.char-block:nth-child(6)::after span:before, .section-dashboard .timeline .period-total-8.current-period-7 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(6)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-7 li.char-block:nth-child(7)::after span:before, .section-dashboard .timeline .period-total-8.current-period-7 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(7)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-8 li.char-block:nth-child(1)::after span:before, .section-dashboard .timeline .period-total-8.current-period-8 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(1)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-8 li.char-block:nth-child(2)::after span:before, .section-dashboard .timeline .period-total-8.current-period-8 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(2)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-8 li.char-block:nth-child(3)::after span:before, .section-dashboard .timeline .period-total-8.current-period-8 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(3)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-8 li.char-block:nth-child(4)::after span:before, .section-dashboard .timeline .period-total-8.current-period-8 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(4)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-8 li.char-block:nth-child(5)::after span:before, .section-dashboard .timeline .period-total-8.current-period-8 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(5)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-8 li.char-block:nth-child(6)::after span:before, .section-dashboard .timeline .period-total-8.current-period-8 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(6)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-8 li.char-block:nth-child(7)::after span:before, .section-dashboard .timeline .period-total-8.current-period-8 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(7)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-dashboard .timeline .period-total-8.current-period-8 li.char-block:nth-child(8)::after span:before, .section-dashboard .timeline .period-total-8.current-period-8 .quiz-answer-shuffle .shuffle.answer-given li.char-block:nth-child(8)::after span:before, .quiz-answer-shuffle .shuffle.answer-given .section-exam-quiz .char-block.logo-medium span:before, .section-exam-quiz .quiz-answer-shuffle .shuffle.answer-given .char-block.logo-medium span:before, .quiz-answer-shuffle .shuffle.answer-given .section-exam-quiz h2.char-block span:before, .section-exam-quiz .quiz-answer-shuffle .shuffle.answer-given h2.char-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-badges .char-block.logo-medium span:before, .section-badges .quiz-answer-shuffle .shuffle.answer-given .char-block.logo-medium span:before, .quiz-answer-shuffle .shuffle.answer-given .section-badges h2.char-block span:before, .section-badges .quiz-answer-shuffle .shuffle.answer-given h2.char-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-badges .badge-content.show .char-block.badge-detail-block span:before, .section-badges .badge-content.show .quiz-answer-shuffle .shuffle.answer-given .char-block.badge-detail-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-badges .badge-content.show .char-block.badge-explanation-block span:before, .section-badges .badge-content.show .quiz-answer-shuffle .shuffle.answer-given .char-block.badge-explanation-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-team .char-block.logo-medium span:before, .section-team .quiz-answer-shuffle .shuffle.answer-given .char-block.logo-medium span:before, .quiz-answer-shuffle .shuffle.answer-given .section-team h2.char-block span:before, .section-team .quiz-answer-shuffle .shuffle.answer-given h2.char-block span:before, .quiz-answer-shuffle .shuffle.answer-given .section-team .char-block.list-animation span:before, .section-team .quiz-answer-shuffle .shuffle.answer-given .char-block.list-animation span:before, .quiz-answer-shuffle .shuffle.answer-given .section-team .char-block.controls span:before, .section-team .quiz-answer-shuffle .shuffle.answer-given .char-block.controls span:before { content: '_'; animation-name: aBlink; animation-duration: 1s; animation-delay: 0s; animation-iteration-count: infinite; animation-timing-function: linear; } .quiz-answer-shuffle .shuffle.answer-temp { margin-bottom: 40px; } .quiz-answer-shuffle .shuffle.answer-temp .char-block { background: rgba(40, 87, 233, 0.5); } .quiz-answer-shuffle .shuffle.answer-temp .char-block:nth-last-child(2) { margin: 5px 0 5px 3px; } .quiz-answer-shuffle .shuffle.answer-temp .char-block.backspace { float: none; margin: 38px 0 5px; width: 64px; position: relative; } .quiz-answer-shuffle .shuffle.answer-temp .char-block.selected { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; } .quiz-answer-shuffle .shuffle.answer-temp .char-block.selected span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .quiz-answer-shuffle .shuffle.answer-temp .char-block.selected:hover { background: rgba(109, 141, 240, 0.5); cursor: default; } .quiz-answer-shuffle .shuffle.answer-temp .char-block:hover { background: rgba(109, 141, 240, 0.5); cursor: pointer; } /* ====== end shuffle question ===== */ /* ====== start status shield indicator ===== */ .status-shield-indicator { background: rgba(248, 187, 129, 0.2); display: inline-flex; padding: 0 5px; margin-bottom: 12px; } .status-shield-indicator .indicator-shield { width: 24px; height: 28px; display: inline-block; margin: 3px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); opacity: 0.2; } .status-shield-indicator .indicator-shield.correct { content: url("../../shared/images/vector/icon-correct.svg?v=20240109145540"); } .status-shield-indicator .indicator-shield.incorrect { content: url("../../shared/images/vector/icon-incorrect.svg?v=20240109145540"); } .status-shield-indicator .indicator-shield.active { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .status-shield-indicator:nth-child(1) { margin-right: 12px; } /* ====== end status shield indicator ===== */ /* ====== start animations ===== */ @keyframes aBlink { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } } /* ====== end animations ===== */ .quiz-answer-findit-images { text-align: center; } .quiz-answer-findit-images .tile-container { text-align: center; } .quiz-answer-findit-images .tile-container .tile { display: inline-block; position: relative; width: 30%; padding-bottom: 30%; /* = width for a 1:1 aspect ratio */ margin: 1.66%; background-color: transparent; perspective: 1000px; backface-visibility: hidden; } .quiz-answer-findit-images .tile-container .tile.tile-of-total-2, .quiz-answer-findit-images .tile-container .tile.tile-of-total-3, .quiz-answer-findit-images .tile-container .tile.tile-of-total-4 { width: 46.68%; padding-bottom: 46.68%; /* = width for a 1:1 aspect ratio */ } .quiz-answer-findit-images .tile-container .tile:hover { cursor: pointer; } .quiz-answer-findit-images .tile-container .tile:hover .tile-content { transform: scale(1.02); } .quiz-answer-findit-images .tile-container .tile .tile-content { position: absolute; width: 100%; height: 100%; transition: transform 0.3s; transform-style: preserve-3d; -webkit-backface-visibility: visible; backface-visibility: visible; } .quiz-answer-findit-images .tile-container .tile .tile-content .tile-front, .quiz-answer-findit-images .tile-container .tile .tile-content .tile-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 12px; border: 2px solid #5e63bc; overflow: hidden; } .quiz-answer-findit-images .tile-container .tile .tile-content .tile-front img, .quiz-answer-findit-images .tile-container .tile .tile-content .tile-back img { object-fit: cover; width: 100%; height: 100%; } .quiz-answer-findit-images .tile-container .tile .tile-content .tile-front { transform: rotateY(0deg); } .quiz-answer-findit-images .tile-container .tile .tile-content .tile-back { transform: rotateY(180deg); } .quiz-answer-findit-images .tile-container .tile .shield { position: absolute; width: 0; height: 0; bottom: -8px; right: -8px; } .quiz-answer-findit-images .tile-container .tile.answer-correct .tile-front, .quiz-answer-findit-images .tile-container .tile.answer-correct .tile-back { border: 3px solid #6d8df0; } .quiz-answer-findit-images .tile-container .tile.answer-correct .shield { content: url("../../shared/images/vector/icon-correct.svg?v=20240109145540"); width: 30px; height: 35px; } .quiz-answer-findit-images .tile-container .tile.answer-notcorrect .tile-front, .quiz-answer-findit-images .tile-container .tile.answer-notcorrect .tile-back { border: 3px solid #f75b5f; } .quiz-answer-findit-images .tile-container .tile.answer-notcorrect .shield { content: url("../../shared/images/vector/icon-incorrect.svg?v=20240109145540"); width: 30px; height: 35px; z-index: 5; } .quiz-answer-findit-images .tile-container .tile.answered { pointer-events: none; cursor: default; } .quiz-answer-findit-images .findit-images-feedback .answers { background: rgba(248, 187, 129, 0.2); margin-bottom: 16px; padding: 16px 0; } .quiz-answer-findit-images .findit-images-feedback .answers h4 { text-align: center; margin-bottom: 16px; } .quiz-answer-findit-images .findit-images-feedback .tile-container .tile { width: 21.6%; padding-bottom: 21.6%; /* = width for a 1:1 aspect ratio */ } .particles-animation-container { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 4; display: none; } .particles-animation-container .particle { width: 0; height: 0; position: absolute; top: 50%; left: 50%; content: url("../../shared/images/vector/icon-correct.svg?v=20240109145540"); } .particles-animation-container .particle:nth-child(1) { width: 42px; height: 42px; left: 100%; top: 90%; transform: translate(-50%, -50%); animation: anim1 0.5s infinite linear; animation-delay: 0.8s; opacity: 0; } @keyframes anim1 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(2) { width: 2px; height: 2px; left: 80%; top: 100%; transform: translate(-50%, -50%); animation: anim2 0.5s infinite linear; animation-delay: 0.4s; opacity: 0; } @keyframes anim2 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(3) { width: 40px; height: 40px; left: 40%; top: 60%; transform: translate(-50%, -50%); animation: anim3 0.5s infinite linear; animation-delay: 0.4s; opacity: 0; } @keyframes anim3 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(4) { width: 30px; height: 30px; left: 30%; top: 60%; transform: translate(-50%, -50%); animation: anim4 0.5s infinite linear; animation-delay: 1.6s; opacity: 0; } @keyframes anim4 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(5) { width: 26px; height: 26px; left: 90%; top: 40%; transform: translate(-50%, -50%); animation: anim5 0.5s infinite linear; animation-delay: 0.4s; opacity: 0; } @keyframes anim5 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(6) { width: 38px; height: 38px; left: 20%; top: 30%; transform: translate(-50%, -50%); animation: anim6 0.5s infinite linear; animation-delay: 1.6s; opacity: 0; } @keyframes anim6 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(7) { width: 22px; height: 22px; left: 70%; top: 30%; transform: translate(-50%, -50%); animation: anim7 0.5s infinite linear; animation-delay: 1.2s; opacity: 0; } @keyframes anim7 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(8) { width: 48px; height: 48px; left: 30%; top: 40%; transform: translate(-50%, -50%); animation: anim8 0.5s infinite linear; animation-delay: 0.4s; opacity: 0; } @keyframes anim8 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(9) { width: 42px; height: 42px; left: 50%; top: 70%; transform: translate(-50%, -50%); animation: anim9 0.5s infinite linear; animation-delay: 1.2s; opacity: 0; } @keyframes anim9 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(10) { width: 4px; height: 4px; left: 80%; top: 90%; transform: translate(-50%, -50%); animation: anim10 0.5s infinite linear; animation-delay: 0.4s; opacity: 0; } @keyframes anim10 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(11) { width: 46px; height: 46px; left: 30%; top: 90%; transform: translate(-50%, -50%); animation: anim11 0.5s infinite linear; animation-delay: 1.6s; opacity: 0; } @keyframes anim11 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(12) { width: 2px; height: 2px; left: 20%; top: 40%; transform: translate(-50%, -50%); animation: anim12 0.5s infinite linear; animation-delay: 2s; opacity: 0; } @keyframes anim12 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(13) { width: 16px; height: 16px; left: 20%; top: 80%; transform: translate(-50%, -50%); animation: anim13 0.5s infinite linear; animation-delay: 1.2s; opacity: 0; } @keyframes anim13 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(14) { width: 24px; height: 24px; left: 40%; top: 40%; transform: translate(-50%, -50%); animation: anim14 0.5s infinite linear; animation-delay: 1.6s; opacity: 0; } @keyframes anim14 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(15) { width: 24px; height: 24px; left: 80%; top: 10%; transform: translate(-50%, -50%); animation: anim15 0.5s infinite linear; animation-delay: 0.4s; opacity: 0; } @keyframes anim15 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .particles-animation-container .particle:nth-child(16) { width: 20px; height: 20px; left: 30%; top: 30%; transform: translate(-50%, -50%); animation: anim16 0.5s infinite linear; animation-delay: 1.6s; opacity: 0; } @keyframes anim16 { 0% { width: 0; height: 0; opacity: 1; } 80% { opacity: 1; } } .word-cloud-block { width: 400px; height: 400px; position: relative; margin: 0 auto; } .word-cloud-block .word-cloud { width: 100%; height: 100%; position: relative; transform-origin: center; } .word-cloud-block .word-cloud .word-block { position: absolute; } .word-cloud-block .word-cloud .word-block:hover .resizable-textbox { color: #fce2c9; cursor: pointer; } .word-cloud-block .word-cloud .word-block .resizable-textbox { position: absolute; top: 50%; left: 50%; transform-origin: center; text-align: center; text-transform: uppercase; transition-property: color; transition-duration: 0.3s; } .word-cloud-block .word-cloud .word-block .resizable-textbox.answer-correct { color: #6d8df0; cursor: default; } .word-cloud-block .word-cloud .word-block .resizable-textbox.answer-incorrect { color: #f75b5f; } /* ====== start feedback ===== */ .quiz-answers-feedback { margin: 0; } .quiz-answers-feedback .quiz-answer .answer-text { display: inline-block; } .quiz-answers-feedback .correct-answer .answer-option { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -649px -898px; width: 59px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .quiz-answers-feedback .correct-answer .answer-option { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .quiz-answers-feedback .given-answer .answer-option { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -708px -898px; width: 59px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .quiz-answers-feedback .given-answer .answer-option { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .quiz-answers-feedback .unanswered-answer .answer-option { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -708px -898px; width: 59px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; margin-top: 7px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .quiz-answers-feedback .unanswered-answer .answer-option { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .explanation-block { border-top: 1px solid #5e63bc; border-bottom: 1px solid #5e63bc; margin-bottom: 20px; padding-bottom: 10px; } .explanation-block .title { text-transform: uppercase; margin: 8px 0; } .explanation-block .explanation { margin: 0; font-size: 15px; } .explanation-block .info-link { margin: 9px 0 0 0; display: block; } .explanation-block .info-link:hover, .explanation-block .info-link:link, .explanation-block .info-link:active, .explanation-block .info-link:visited { color: #6d8df0; } .quiz-feedback .controls { height: auto; margin: 14px 0 24px 0; } .quiz-feedback .controls .controls-title { display: block; } .quiz-feedback .info-link { margin: 9px 0 0 0; display: block; } .quiz-feedback .info-link:hover, .quiz-feedback .info-link:link, .quiz-feedback .info-link:active, .quiz-feedback .info-link:visited { color: #6d8df0; } /* ====== end feedback ===== */ .section-ranking .ranking-container { text-align: center; width: 640px; margin: 120px auto 0 auto; display: flex; flex-direction: column; height: calc(100vh - 170px); overflow: hidden; } .section-ranking .ranking-container h2 { margin: 0 0 10px 0; } .section-ranking .ranking-container .btn-block { display: flex; justify-content: center; margin: 15px 0 15px 0; } .section-ranking .ranking-container .btn-block button { margin: 0 20px; } .section-ranking .ranking-container .list-block { height: 100%; overflow: auto; overflow-y: auto; overflow-x: hidden; } .section-ranking .rankinglist { margin: 0; } .section-ranking .rankinglist li { margin: 0 0 10px 0; } .section-ranking .rankinglist li:hover { cursor: pointer; } .section-ranking .rankinglist li:hover .rank-item { background-color: rgba(245, 247, 255, 0.8); } .section-ranking .rankinglist li:hover .rank-item.own { background-color: rgba(255, 255, 255, 0.8); } .section-ranking .rankinglist li:hover .detail { background-color: rgba(245, 247, 255, 0.8); } .section-ranking .rankinglist li:hover .detail.own { background-color: rgba(255, 255, 255, 0.8); } .section-ranking .rankinglist li.open .rank-item .status { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -430px -1055px; width: 38px; height: 36px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-ranking .rankinglist li.open .rank-item .status { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-ranking .rankinglist li.open .detail { display: block; } .section-ranking .rankinglist .rank-item { height: 60px; display: flex; align-items: center; position: relative; background-color: rgba(245, 247, 255, 0.5); } .section-ranking .rankinglist .rank-item.own { background-color: rgba(255, 255, 255, 0.5); } .section-ranking .rankinglist .rank-item .rank { font-size: 18px; color: #f5f7ff; margin: 0 5px; position: absolute; top: 50%; transform: translate(0, -50%); align-items: center; justify-content: center; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -826px -898px; width: 57px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; display: flex; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-ranking .rankinglist .rank-item .rank { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-ranking .rankinglist .rank-item .rank.gold { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -940px -898px; width: 57px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; display: flex; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-ranking .rankinglist .rank-item .rank.gold { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-ranking .rankinglist .rank-item .rank.silver { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1054px -898px; width: 57px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; display: flex; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-ranking .rankinglist .rank-item .rank.silver { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-ranking .rankinglist .rank-item .rank.bronze { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -883px -898px; width: 57px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; display: flex; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-ranking .rankinglist .rank-item .rank.bronze { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-ranking .rankinglist .rank-item .name { font-size: 24px; line-height: 24px; text-transform: uppercase; color: #5e63bc; width: 300px; text-align: left; margin: 0 20px 0 100px; max-height: 60px; overflow: hidden; } .section-ranking .rankinglist .rank-item .score { font-size: 21px; color: #5e63bc; width: 80px; text-align: right; } .section-ranking .rankinglist .rank-item .status { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -468px -1055px; width: 38px; height: 36px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; top: 50%; right: 0; margin: 0 10px; transform: translate(0, -50%); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-ranking .rankinglist .rank-item .status { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-ranking .rankinglist .detail { background-color: rgba(245, 247, 255, 0.5); padding: 0 0 16px 0; display: none; } .section-ranking .rankinglist .detail.own { background-color: rgba(255, 255, 255, 0.5); } .section-ranking .rankinglist .detail.open { display: block; } .section-ranking .rankinglist .detail div { display: flex; align-items: center; text-align: left; font-size: 18px; } .section-ranking .rankinglist .detail div .label { margin: 0 20px 0 100px; width: 300px; font-size: 15px; text-transform: uppercase; color: #6d8df0; } .section-ranking .rankinglist .detail div .score { width: 80px; text-align: right; } .section-game-statistics .stats-header { position: relative; } .section-game-statistics .stats-header .btn-default { position: absolute; right: 0; } .section-game-statistics .stats-block { background: rgba(245, 247, 255, 0.5); overflow: hidden; margin: 32px 0; padding: 16px; position: relative; } .section-game-statistics .stats-block h2 { margin: 16px 0; } .section-game-statistics .stats-block h4 { color: #6d8df0; margin: 16px 0 24px; } .section-game-statistics .stats-block h4.margin-top { margin-top: 52px; } .section-game-statistics .stats-block h4.certificate-subtitle { margin: 16px 0 8px; } .section-game-statistics .stats-block .header { overflow: hidden; margin-bottom: 16px; } .section-game-statistics .stats-block .chart-col { width: 25%; float: left; padding: 16px; } .section-game-statistics .stats-block .chart-col .progress-gauge { width: 100%; position: relative; } .section-game-statistics .stats-block .chart-col .progress-gauge.color-1 .pointer p { color: #6d8df0; } .section-game-statistics .stats-block .chart-col .progress-gauge.color-1 .progress-highlight { background: #6d8df0; } .section-game-statistics .stats-block .chart-col .progress-gauge.color-2 .pointer p { color: #80cbd8; } .section-game-statistics .stats-block .chart-col .progress-gauge.color-2 .progress-highlight { background: #80cbd8; } .section-game-statistics .stats-block .chart-col .progress-gauge.color-3 .pointer p { color: #ca89e5; } .section-game-statistics .stats-block .chart-col .progress-gauge.color-3 .progress-highlight { background: #ca89e5; } .section-game-statistics .stats-block .chart-col .progress-gauge .progress-labels { width: 100%; } .section-game-statistics .stats-block .chart-col .progress-gauge .progress-highlightbar { width: 100%; } .section-game-statistics .stats-block .chart-col h4.color-1 { color: #6d8df0; } .section-game-statistics .stats-block .chart-col h4.color-2 { color: #80cbd8; } .section-game-statistics .stats-block .chart-col h4.color-3 { color: #ca89e5; } .section-game-statistics .stats-block .chart-col.large { width: 50%; border-right: 1px solid #5e63bc; } .section-game-statistics .stats-block .chart-col.large .pie { margin: 0 auto; } .section-game-statistics .stats-block .chart-col .pie { margin: 50px auto; } .section-game-statistics .stats-block .chart-col .pie .pie_segment.color-1:before, .section-game-statistics .stats-block .chart-col .pie .pie_segment.color-1:after { background: #6d8df0; } .section-game-statistics .stats-block .chart-col .pie .pie_segment.color-2:before, .section-game-statistics .stats-block .chart-col .pie .pie_segment.color-2:after { background: #80cbd8; } .section-game-statistics .stats-block .chart-col .pie .pie_segment.color-3:before, .section-game-statistics .stats-block .chart-col .pie .pie_segment.color-3:after { background: #ca89e5; } .section-game-statistics .stats-block .badge-legend { float: right; margin-top: -56px; margin-bottom: 16px; } .section-game-statistics .stats-block .badge { width: auto; margin: 0 auto; text-align: center; -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); -webkit-transform: scale(0.7); transform: scale(0.7); } .section-game-statistics .stats-block .exam-list { list-style: none; padding: 0; margin: 0; text-align: center; } .section-game-statistics .stats-block .exam-list li { display: inline-block; padding: 0; margin: 16px 32px; width: 136px; vertical-align: top; } .section-game-statistics .stats-block .exam-list li img { margin: 0 auto; width: 100%; } .section-game-statistics .stats-block .exam-list li .details { text-align: left; } .section-game-statistics .stats-block .exam-list li .details h4 { margin: 8px 0 4px; } .section-game-statistics .stats-block .exam-list li .details h5 { font-size: 15px; line-height: 15px; text-transform: uppercase; margin: 0; padding: 0; } .section-game-statistics .stats-block .exam-list li .details .figures { margin-top: 8px; text-transform: uppercase; } .section-game-statistics .stats-block .exam-list li .details .figures .label { font-size: 15px; color: #6d8df0; padding-right: 8px; min-width: 60px; display: inline-block; } .section-game-statistics .stats-table { width: 100%; margin-bottom: 1rem; color: #5e63bc; text-align: left; display: table; border-collapse: separate; font-weight: normal; } .section-game-statistics .stats-table th, .section-game-statistics .stats-table td { padding: 12px; vertical-align: middle; text-transform: uppercase; font-size: 15px; font-weight: normal; } .section-game-statistics .stats-table th.small, .section-game-statistics .stats-table td.small { font-size: 13px; } .section-game-statistics .stats-table thead th { vertical-align: bottom; color: #6d8df0; font-size: 18px; } .section-game-statistics .stats-table tr.border-horizontal th, .section-game-statistics .stats-table tr.border-horizontal td { border-bottom: 1px solid #5e63bc; } .section-game-statistics .stats-table td .progress-gauge { height: 9px; margin: 0; padding: 0; } .section-game-statistics .stats-table td.number { font-size: 18px; text-align: center; } .section-game-statistics .stats-table td .indicator { margin: 0 auto; color: #6d8df0; line-height: 32px; text-align: center; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -704px -1012px; width: 30px; height: 30px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-game-statistics .stats-table td .indicator { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-game-statistics .stats-table td .indicator.passed { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -734px -1012px; width: 30px; height: 30px; background-repeat: no-repeat; overflow: hidden; display: block; text-indent: -9999px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-game-statistics .stats-table td .indicator.passed { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-game-statistics .stats-table td .indicator.failed { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -592px -353px; width: 30px; height: 30px; background-repeat: no-repeat; overflow: hidden; display: block; text-indent: -9999px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-game-statistics .stats-table td .indicator.failed { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-game-statistics .stats-table.table-small th, .section-game-statistics .stats-table.table-small td { font-size: 13px; } .section-game-statistics .stats-table.table-small thead th { font-size: 15px; } .section-game-statistics .stats-table.table-small td.number { font-size: 15px; } .section-game-statistics .stats-table.table-border-horizontal th, .section-game-statistics .stats-table.table-border-horizontal td { border-bottom: 1px solid #5e63bc; } .section-game-statistics .stats-table.table-border-horizontal tbody tr:last-child th, .section-game-statistics .stats-table.table-border-horizontal tbody tr:last-child td { border-bottom-color: transparent; } .section-game-statistics .stats-table.table-border-vertical th, .section-game-statistics .stats-table.table-border-vertical td { border-right: 1px solid #5e63bc; } .section-game-statistics .stats-table.table-border-vertical th:last-child, .section-game-statistics .stats-table.table-border-vertical td:last-child { border-right-color: transparent; } .section-game-statistics .stats-table.table-striped tbody tr:nth-of-type(odd) { background: rgba(94, 99, 188, 0.1); } .section-game-statistics .nav-tabs { display: block; list-style: none; margin: 0; overflow: hidden; } .section-game-statistics .nav-tabs .nav-item { float: left; margin-bottom: -1px; margin-right: 8px; } .section-game-statistics .nav-tabs .nav-item .nav-link { display: block; padding: 8px 16px; border: 1px solid transparent; cursor: pointer; position: relative; background: rgba(94, 99, 188, 0.2); text-transform: uppercase; } .section-game-statistics .nav-tabs .nav-item .nav-link:hover { background: rgba(94, 99, 188, 0.5); } .section-game-statistics .nav-tabs .nav-item .nav-link.active { color: #5e63bc; background-color: transparent; border-color: #f8bb81 #f8bb81 #f8bb81; cursor: default; } .section-game-statistics .nav-tabs .nav-item .nav-link.active:before, .section-game-statistics .nav-tabs .nav-item .nav-link.active:after { content: ''; height: 1px; background-color: #f8bb81; position: absolute; top: 33px; width: 1000px; z-index: 1000; } .section-game-statistics .nav-tabs .nav-item .nav-link.active:before { left: -1000px; } .section-game-statistics .nav-tabs .nav-item .nav-link.active:after { right: -1000px; } .section-game-statistics .tab-content .tab-pane { padding: 16px; border-right: 1px solid #f8bb81; border-bottom: 1px solid #f8bb81; border-left: 1px solid #f8bb81; display: none; overflow: hidden; } .section-game-statistics .tab-content .tab-pane.chart { opacity: 0; height: 0; margin: 0; padding: 0; } .section-game-statistics .tab-content .tab-pane.chart.active { opacity: 1; height: auto; margin: auto; padding: 16px; } .section-game-statistics .tab-content .tab-pane.active { display: block; } .section-game-statistics .tab-content .tab-pane .progression-knowledge-graph, .section-game-statistics .tab-content .tab-pane .skill-graph { width: 100%; height: 400px; } .section-game-statistics .tab-content .tab-pane .progression-knowledge-graph svg, .section-game-statistics .tab-content .tab-pane .skill-graph svg { padding-top: 16px; } .section-game-statistics .accordion-items .accordion-content h4 { color: #6d8df0; text-transform: uppercase; font-size: 18px; margin: 24px 0 12px; } .section-game-statistics .accordion-items .accordion-content .text { background-color: rgba(94, 99, 188, 0.1); font-size: 18px; line-height: 21px; padding: 8px 24px; } .section-game-statistics .accordion-items .accordion-content .note-list { width: 420px; } .section-game-statistics .accordion-items .accordion-content .note-list.qualities { float: left; } .section-game-statistics .accordion-items .accordion-content .note-list.focuspoints { float: right; } .section-game-statistics .accordion-items .accordion-content .note-list .text { margin: 6px 0; } .section-game-statistics .certificate { width: 640px; height: 452px; position: relative; overflow: hidden; margin: 30px auto 20px; } .section-game-statistics .certificate .certificate-bg { width: 640px; height: 452px; position: absolute; top: 0; left: 0; } .section-game-statistics .certificate .avatar-container { margin-top: 172px; margin-bottom: 0; margin-left: 36px; float: left; } .section-game-statistics .certificate .certificate-header-info { position: absolute; width: 100%; } .section-game-statistics .certificate .certificate-header-info .title { margin-top: 60px; text-align: center; } .section-game-statistics .certificate .certificate-header-info .title span { font-size: 24px; line-height: 24px; text-transform: uppercase; display: inline-block; position: relative; } .section-game-statistics .certificate .certificate-header-info .title span::before, .section-game-statistics .certificate .certificate-header-info .title span::after { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1002px -374px; width: 15px; height: 15px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; top: 5px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-game-statistics .certificate .certificate-header-info .title span::before, .section-game-statistics .certificate .certificate-header-info .title span::after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-game-statistics .certificate .certificate-header-info .title span::before { left: -18px; } .section-game-statistics .certificate .certificate-header-info .title span::after { right: -18px; } .section-game-statistics .certificate .certificate-header-info .description { font-size: 15px; line-height: 15px; color: #6d8df0; width: 320px; text-align: center; margin: 6px auto 0; text-transform: uppercase; } .section-game-statistics .certificate .certificate-player-info { position: absolute; top: 233px; width: 405px; height: 100%; left: 200px; } .section-game-statistics .certificate .certificate-player-info div { width: 40%; float: left; } .section-game-statistics .certificate .certificate-player-info div:last-child { width: 60%; float: left; } .section-game-statistics .certificate .certificate-player-info span { display: block; text-align: left; margin-top: 3px; } .section-game-statistics .certificate .certificate-player-info .label { text-transform: uppercase; font-size: 15px; line-height: 18px; color: #6d8df0; } .section-game-statistics .certificate .certificate-player-info .name { font-size: 30px; line-height: 30px; color: #f5f7ff; margin-top: 4px; } .section-game-statistics .certificate .certificate-player-info .nickname, .section-game-statistics .certificate .certificate-player-info .teamname { font-size: 21px; line-height: 21px; color: #f5f7ff; margin-top: 4px; } .section-game-statistics .certificate .client-logo { position: absolute; bottom: 26px; left: 40px; height: 40px; } .section-game-statistics .download-buttons { display: flex; align-items: center; justify-content: center; margin-top: 8px; margin-bottom: 20px; } .section-game-statistics .download-buttons .btn-default { margin: 0 24px; } .survey-content { text-align: left; background: rgba(245, 247, 255, 0.5); padding: 12px 16px; margin: 16px 0; overflow: hidden; margin-bottom: 0; } .survey-content h3 { margin: 16px 0 4px 0; } .survey-content input[type='email'], .survey-content input[type='password'], .survey-content input[type='text'], .survey-content select, .survey-content textarea { width: 100%; } .survey-content .question-block { text-align: left; font-size: 18px; line-height: 22px; } .survey-content .answer-block { margin-top: 12px; } .survey-content .question-and-answer-block { border-top: 1px solid #5e63bc; } .survey-content .status { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -534px -277px; width: 63px; height: 54px; background-repeat: no-repeat; overflow: hidden; display: block; margin: 0 auto; text-align: center; line-height: 54px; font-size: 15px; color: #5e63bc; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .survey-content .status { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .survey-content .button-list { padding: 12px 0; margin: 20px 0 0; position: relative; text-align: center; } .survey-content .button-list:before { content: ''; height: 1px; width: 440px; font-size: 0; background: #5e63bc; position: absolute; margin-top: -20px; left: 0; } .survey-content .button-list .btn-default { margin: 0 16px; } .survey-content .button-list-top { overflow: hidden; } .survey-content .button-list-top .btn-download-pdf { float: right; } .sso-block { margin: 32px 0 0 0; } .sso-block .btn-sso { margin: 0 0 8px 0; } .btn-sso { display: block; width: 100%; height: 45px; background-color: #FFFFFF; position: relative; text-decoration: none; cursor: pointer; } .btn-sso .icon { position: absolute; top: 50%; left: 10px; transform: translate(0, -50%); width: 22px; height: 22px; } .btn-sso img { position: absolute; top: 50%; left: 10px; transform: translate(0, -50%); width: 22px; height: 22px; } .btn-sso span { display: block; position: absolute; top: 50%; font-size: 18px; } .btn-sso.google { color: #4285f4; border-radius: 3px; box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.15); width: calc(100% - 2px); } .btn-sso.google span { transform: translate(52px, -8px); font-size: invalid-font-size; } .btn-sso.google .icon { background-image: url("../../shared/images/vector/logo-google.svg?v=20240109145540"); background-repeat: no-repeat; } .btn-sso.microsoft { color: #5e5e5e; border: 1px solid #8c8c8c; box-sizing: border-box; } .btn-sso.microsoft span { transform: translate(52px, -9px); } .btn-sso.microsoft .icon { background-image: url("../../shared/images/vector/logo-microsoft.svg?v=20240109145540"); background-repeat: no-repeat; } .btn-sso.athand { color: #2a386c; border-radius: 3px; box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.15); width: calc(100% - 2px); } .btn-sso.athand span { transform: translate(52px, -9px); } .btn-sso.athand .icon { background-image: url("../../shared/images/vector/icon-key.svg?v=20240109145540"); background-repeat: no-repeat; } .section-badges .controls { margin-bottom: 24px; } .section-badges .badge-content { opacity: 0; display: none; } .section-badges .badge-detail-block { width: 640px; float: left; text-align: left; padding: 32px 36px 30px 36px; margin-top: 0; margin-bottom: 42px; position: relative; background: rgba(245, 247, 255, 0.5); border: 2px solid #637990; border-radius: 22px; } .section-badges .badge-detail-block.badge-achieved { padding: 0 38px; margin-top: 34px; margin-bottom: 74px; border: 0; border-radius: 0; background: url("../images/general/normal/frame-middle-w-8-colored.png?v=20240109145540") repeat-y center top; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-badges .badge-detail-block.badge-achieved { background: url("../images/general/retina/frame-middle-w-8-colored@2x.png?v=20240109145540") repeat-y center top; background-size: 640px 1px; } } .section-badges .badge-detail-block.badge-achieved::before, .section-badges .badge-detail-block.badge-achieved::after { content: ''; display: block; width: 640px; height: 34px; position: absolute; left: 0; z-index: -10; } .section-badges .badge-detail-block.badge-achieved::before { background: url("../../desktop/images/general/normal/frame-top-w-8-colored.png?v=20240109145540") no-repeat center top; top: -34px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-badges .badge-detail-block.badge-achieved::before { background: url("../../desktop/images/general/retina/frame-top-w-8-colored@2x.png?v=20240109145540") no-repeat center top; background-size: 640px 34px; } } .section-badges .badge-detail-block.badge-achieved::after { background: url("../../desktop/images/general/normal/frame-bottom-w-8-colored.png?v=20240109145540") no-repeat center top; bottom: -34px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .section-badges .badge-detail-block.badge-achieved::after { background: url("../../desktop/images/general/retina/frame-bottom-w-8-colored@2x.png?v=20240109145540") no-repeat center top; background-size: 640px 34px; } } .section-badges .badge-detail-block .badge-icon { position: relative; margin: -24px 24px -24px 0; float: left; } .section-badges .badge-detail-block .badge-icon::before { content: ''; width: 140px; height: 140px; border-radius: 100%; background: rgba(248, 187, 129, 0.2); display: block; position: absolute; left: 0; top: 0; z-index: -1; } .section-badges .badge-detail-block .badge-info-icon-list { justify-content: space-between; margin-top: 20px; } .section-badges .badge-explanation-block { background: rgba(245, 247, 255, 0.5); border: 2px solid #637990; border-radius: 22px; width: 100%; float: left; text-align: left; padding: 24px 38px; position: relative; } .section-badges .badge-explanation-block h2 { margin-bottom: 12px; } .section-badges .badge-explanation-block .badge-icon { margin-right: 24px; min-width: 80px; } .section-badges .badge-explanation-block .badge-icon::before { content: ''; width: 80px; height: 80px; min-width: 80px; border-radius: 50%; background: rgba(248, 187, 129, 0.5); position: absolute; z-index: -1; } .section-badges .badge-explanation-block .badge-medal-list { margin: 32px 0 0 0; } .section-badges .badge-explanation-block .badge-medal-list > li { display: flex; border-bottom: 1px solid rgba(94, 99, 188, 0.5); padding-bottom: 16px; margin-bottom: 16px; } .section-badges .badge-explanation-block .badge-medal-list > li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .section-badges .badge-explanation-block .badge-info-icon-list { justify-content: flex-start; margin-bottom: 12px; } .section-badges .badge-explanation-block .badge-info-icon-list li { margin-right: 20px; } .section-badges .badge-explanation-block .badge-info-icon-list li .label { font-size: 15px; } .section-badges .badge-explanation-block .badge-info-icon-list li .label.score { font-size: 18px; } .section-badges .badge-info-icon-list { display: flex; align-items: center; margin: 0; } .section-badges .badge-info-icon-list li { display: flex; align-items: center; } .section-badges .badge-info-icon-list li .label { margin-left: 8px; text-transform: uppercase; } .section-badges .badge-info-icon-list li .label.score { font-size: 24px; } .section-badges .badge-info-icon { width: 36px; height: 36px; display: inline-block; } .section-badges .badge-info-icon.color-bronze { background: url("../../shared/images/vector/icon-color-bronze.svg?v=20240109145540") no-repeat center top; } .section-badges .badge-info-icon.color-silver { background: url("../../shared/images/vector/icon-color-silver.svg?v=20240109145540") no-repeat center top; } .section-badges .badge-info-icon.color-gold { background: url("../../shared/images/vector/icon-color-gold.svg?v=20240109145540") no-repeat center top; } .section-badges .badge-info-icon.color-diamond { background: url("../../shared/images/vector/icon-color-diamond.svg?v=20240109145540") no-repeat center top; } .section-badges .badge-info-icon.color-platinum { background: url("../../shared/images/vector/icon-color-platinum.svg?v=20240109145540") no-repeat center top; } .section-badges .badge-info-icon.type-individual { background: url("../../shared/images/vector/icon-type-individual.svg?v=20240109145540") no-repeat center top; } .section-badges .badge-info-icon.type-team { background: url("../../shared/images/vector/icon-type-team.svg?v=20240109145540") no-repeat center top; } .section-badges .badge-info-icon.score { background: url("../../shared/images/vector/icon-score.svg?v=20240109145540") no-repeat center top; } .section-badges .badge-info-icon.small { width: 26px; height: 26px; } .section-badges .btn-badge-block .btn-badge { width: 100%; margin: 10px 0 16px; } /* ====== start animations ===== */ .section-badges .badge-content.show { display: block; opacity: 1; } /* ====== end animations ===== */ .section-multibattle .teamdata-list-label { width: 136px; font-size: 15px; line-height: 18px; color: #6d8df0; text-transform: uppercase; display: block; float: right; text-align: right; margin: 32px 0 0 0; } .section-multibattle .teamdata-list { list-style: none; margin: 0; } .section-multibattle .teamdata-list li { width: 100%; overflow: hidden; height: 56px; } .section-multibattle .teamdata-list li.self .rank::before { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -997px -898px; width: 57px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-multibattle .teamdata-list li.self .rank::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-multibattle .teamdata-list li.self .teamname { color: #f08978; } .section-multibattle .teamdata-list .rank { float: left; width: 52px; text-align: center; font-size: 18px; line-height: 56px; color: #f8bb81; position: relative; z-index: 10; margin-right: 32px; } .section-multibattle .teamdata-list .rank::before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -826px -898px; width: 57px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; margin: 4px 0 0 -2px; z-index: -1; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-multibattle .teamdata-list .rank::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-multibattle .teamdata-list .gauge-display { float: left; height: 56px; } .section-multibattle .teamdata-list .gauge-display .teamname { float: left; font-size: 18px; color: #5e63bc; text-transform: uppercase; line-height: 56px; height: 56px; width: 220px; text-align: left; } .section-multibattle .teamdata-list .gauge-display .progress-gauge { float: left; width: 472px; margin: 0 32px; position: relative; } .section-multibattle .teamdata-list .gauge-display .progress-gauge .progress-highlightbar { width: 472px; margin-top: 22px; } .section-multibattle .teamdata-list .points { float: left; height: 56px; width: 136px; font-size: 30px; line-height: 50px; color: #5e63bc; text-align: right; } /* ====== start sales tool ===== */ .sales-tool { border-bottom: 1px solid #f8bb81; padding-bottom: 24px; } .sales-tool .subtitle { margin-top: 50px; margin-bottom: 8px; font-size: 18px; } .sales-tool .controls { margin: 0 0 32px 0; } .sales-tool .controls.medium p { width: 132px; height: 40px; color: #5e63bc; text-transform: uppercase; font-size: 24px; line-height: 40px; } .sales-tool .controls.medium .btn-previous { margin-left: -100px; } .sales-tool .controls.medium .btn-next { margin-right: -100px; } .sales-tool .info { font-size: 24px; line-height: 26px; color: #5e63bc; width: 90px; } .sales-tool .info span { font-size: 13px; line-height: 18px; color: #6d8df0; text-transform: uppercase; display: block; } .sales-tool .teamsales-block { background: rgba(245, 247, 255, 0.5); overflow: hidden; padding: 8px; height: 60px; width: 304px; float: right; } .sales-tool .teamsales-block .realisation-bar { float: left; position: relative; width: 108px; padding: 0 4px; } .sales-tool .teamsales-block .realisation-bar .progress-gauge { width: 100px; margin-top: 0; } .sales-tool .teamsales-block .realisation-bar .progress-gauge .progress-highlightbar { width: 100px; margin-top: 20px; } .sales-tool .teamsales-block .realisation-bar .progress-gauge .pointer { margin: 3px 0 -16px -14px; text-align: center; width: 28px; } .sales-tool .teamsales-block .realisation-bar .progress-gauge .pointer p { font-size: 13px; line-height: 13px; } .sales-tool .teamsales-block .realisation, .sales-tool .teamsales-block .target { float: left; } /* ====== end sales tool ===== */ .skills-container { display: flex; flex-wrap: wrap; justify-content: space-around; } .skill-block { background-color: rgba(245, 247, 255, 0.5); width: 250px; margin: 20px 0; } .skill-block .skill-header { padding: 0; position: relative; } .skill-block .skill-header .skill-title { font-size: 18px; line-height: 21px; color: #f08978; text-transform: uppercase; height: 65px; display: flex; align-items: center; justify-content: center; } .skill-block .skill-content { position: relative; } .skill-block .skill-target { display: flex; justify-content: space-around; align-items: center; margin-top: 8px; } .skill-block .skill-target li { display: flex; flex-direction: column; justify-content: center; } .skill-block .skill-target .value { font-size: 21px; line-height: 21px; margin: 4px 0 0 0; } .skill-block .skill-target .description { color: #6d8df0; } .skill-block .skill-score span { font-size: 30px; line-height: 30px; } .skill-block .skill-settings { display: flex; justify-content: space-around; } .skill-block .skill-settings li { width: 30%; } .skill-block .skill-settings li.disabled { opacity: 0.2; } .skill-block .skill-settings li .multiplier { font-size: 30px; line-height: 32px; display: block; } .skill-block .skill-settings li .graphic { font-size: 24px; line-height: 30px; } .skill-block .skill-settings li .description { color: #6d8df0; } .skill-block .skill-trend { margin-top: 22px; } .skill-block .skill-trend .graph-container { background-color: transparent; width: 100%; height: 65px; } .skill-block .skill-trend .no-data-block { width: 100%; height: 65px; padding: 10px; } .skill-block .skill-trend .no-data-block div { height: 100%; border-left: 2px solid #5e63bc; border-bottom: 2px solid #5e63bc; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .skill-block .skill-target-animation { width: 100%; height: 100%; top: 0; left: 0; position: absolute; background-image: url("../../desktop/images/general/normal/confetti-animation.gif?v=20240109145540"); background-size: 312px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .skill-block .skill-target-animation { background-image: url("../../desktop/images/general/retina/confetti-animation@2x.gif?v=20240109145540"); } } .section-teambattle { /* ====== start teambattle row ===== */ /* ====== end teambattle row ===== */ } .section-teambattle .teambattle-row .team { position: relative; } .section-teambattle .teambattle-row .team .gauge-block { float: right; } .section-teambattle .teambattle-row .team .teamname { text-align: right; } .section-teambattle .teambattle-row .opponent { position: relative; } .section-teambattle .teambattle-row .opponent .gauge-block { float: left; } .section-teambattle .teambattle-row .opponent .teamname { text-align: left; } .section-teambattle .gauge-block { margin: 32px 0 16px; } .section-teambattle .teamname { color: #f08978; font-size: 24px; line-height: 30px; text-transform: uppercase; display: block; width: 100%; clear: both; } .section-teambattle .teambattle-list { overflow: hidden; list-style: none; margin: 0; } .section-teambattle .teambattle-list > li { float: left; margin-bottom: 8px; position: relative; width: 101px; overflow: hidden; } .section-teambattle .teambattle-list > li .sold { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -184px -1055px; width: 46px; height: 40px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; z-index: 900; color: #f8bb81; line-height: 32px; top: 95px; left: 0; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-teambattle .teambattle-list > li .sold { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-teambattle .winner-points { text-align: center; width: 304px; margin-top: 32px; position: absolute; font-size: 30px; line-height: 40px; color: #5e63bc; } .section-teambattle .winner-points span { font-size: 18px; line-height: 21px; color: #6d8df0; text-transform: uppercase; display: block; } .section-teambattle .sales-status-timeleft { text-align: center; margin: 0 auto; position: relative; font-size: 30px; line-height: 30px; color: #5e63bc; } .section-teambattle .sales-status-timeleft span { font-size: 18px; line-height: 21px; color: #6d8df0; text-transform: uppercase; display: block; } .section-teambattle .sales-status-block { margin: 0 auto; width: 304px; z-index: -1; } .section-teambattle .sales-status-block.team-lead .sales-status { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -608px -829px; width: 304px; height: 69px; background-repeat: no-repeat; overflow: hidden; display: block; display: table; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-teambattle .sales-status-block.team-lead .sales-status { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-teambattle .sales-status-block.opponent-lead .sales-status { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: 0px -829px; width: 304px; height: 69px; background-repeat: no-repeat; overflow: hidden; display: block; display: table; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-teambattle .sales-status-block.opponent-lead .sales-status { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-teambattle .sales-status-block.team-won .sales-status { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: 0px -898px; width: 304px; height: 69px; background-repeat: no-repeat; overflow: hidden; display: block; display: table; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-teambattle .sales-status-block.team-won .sales-status { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-teambattle .sales-status-block.opponent-won .sales-status { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -304px -829px; width: 304px; height: 69px; background-repeat: no-repeat; overflow: hidden; display: block; display: table; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-teambattle .sales-status-block.opponent-won .sales-status { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-teambattle .sales-status-block.draw .sales-status { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -426px -757px; width: 304px; height: 69px; background-repeat: no-repeat; overflow: hidden; display: block; display: table; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-teambattle .sales-status-block.draw .sales-status { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-teambattle .sales-status-block .sales-status { overflow: hidden; padding: 0 50px; margin: 140px auto 0; display: table; } .section-teambattle .sales-status-block .sales-status div { display: table-cell; vertical-align: middle; text-transform: uppercase; } .section-teambattle .sales-status-block .sales-vs { margin: 24px auto 32px; } .section-team .team-list { margin: 40px auto 52px; width: 100%; list-style: none; text-align: center; } .section-team .team-list .team-player { margin: 0 44px 32px; width: 176px; display: inline-block; vertical-align: top; position: relative; } .section-team .team-list .team-player:last-child, .section-team .team-list .team-player:nth-child(4n+4) { margin: 0 0 32px 44px; } .section-team .team-list .team-player:nth-child(4n+1) { margin: 0 32px 44px 0; } .section-team .avatar-container { margin: 0 auto; } .section-team .team-badge { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -556px -400px; width: 58px; height: 58px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; margin: -6px 0 0 116px; z-index: 1000; overflow: visible !important; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-team .team-badge { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-team .team-badge:hover { cursor: pointer; } .section-team .badge-list { display: none; width: 176px; background: #f8bb81; border: 1px solid #f49439; z-index: 2000; position: absolute; margin-top: 45px; } .section-team .badge-list:before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1002px -252px; width: 18px; height: 19px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; top: -19px; right: 24px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-team .badge-list:before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-team .badge-list:after { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -252px -550px; width: 136px; height: 22px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; bottom: -22px; right: -1px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-team .badge-list:after { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-team .badge-list h4 { text-align: left; margin: 4px 0 4px 12px; } .section-team .badge-list ul { margin: 0; padding: 0; list-style: none; } .section-team .badge-list ul li { width: 100%; display: block; overflow: hidden; margin: 0 0 8px 0; } .section-team .badge-list ul li .badge-icon { height: 34px; width: 35px; -webkit-backface-visibility: visible; float: left; margin: 0 4px 0 8px; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-1 { background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-1.gold { background: url("../../shared/images/badges/badge-1-gold.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-1.silver { background: url("../../shared/images/badges/badge-1-silver.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-1.bronze { background: url("../../shared/images/badges/badge-1-bronze.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-2 { background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-2.gold { background: url("../../shared/images/badges/badge-2-gold.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-2.silver { background: url("../../shared/images/badges/badge-2-silver.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-2.bronze { background: url("../../shared/images/badges/badge-2-bronze.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-3 { background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-3.gold { background: url("../../shared/images/badges/badge-3-gold.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-3.silver { background: url("../../shared/images/badges/badge-3-silver.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-3.bronze { background: url("../../shared/images/badges/badge-3-bronze.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-4 { background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-4.gold { background: url("../../shared/images/badges/badge-4-gold.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-4.silver { background: url("../../shared/images/badges/badge-4-silver.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-4.bronze { background: url("../../shared/images/badges/badge-4-bronze.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-5 { background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-5.gold { background: url("../../shared/images/badges/badge-5-gold.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-5.silver { background: url("../../shared/images/badges/badge-5-silver.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-5.bronze { background: url("../../shared/images/badges/badge-5-bronze.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-6 { background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-6.gold { background: url("../../shared/images/badges/badge-6-gold.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-6.silver { background: url("../../shared/images/badges/badge-6-silver.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.badge-6.bronze { background: url("../../shared/images/badges/badge-6-bronze.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li .badge-icon.inactive { background: url("../../shared/images/badges/badge-default.png?v=20240109145540") no-repeat 0 0; background-size: 34px 35px; } .section-team .badge-list ul li span { font-size: 11px; line-height: 11px; color: #5e63bc; display: table-cell; height: 34px; width: 110px; text-align: left; vertical-align: middle; text-transform: uppercase; } .section-team .badge-list.open { display: block; margin-left: 0; margin-top: 60px; } .section-team .player-rank { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -826px -898px; width: 57px; height: 51px; background-repeat: no-repeat; overflow: hidden; display: block; position: absolute; top: 140px; font-size: 18px; line-height: 47px; color: #f8bb81; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .section-team .player-rank { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .section-team .player-info .labels li.figures:last-child { margin-top: 4px; padding-top: 6px; border-top: 1px solid #5e63bc; } /* ====== start animations ===== */ /* ====== end animations ===== */ .section-tutorial-overview .accordion-container > h3 { color: #5e63bc; margin: 42px 0 16px; } .theme-hub { /* ====== start achievement list ===== */ /* ====== end achievement list ===== */ /* ===== start modules navbar ===== */ /* ===== end modules navbar ===== */ /* ====== start prologue ===== */ /* ====== end prologue ===== */ /* ====== start accordion ===== */ /* ====== end accordion ===== */ /* ====== start tutorial ===== */ /* ====== end tutorial container ===== */ /* ====== start mimicked bar ===== */ /* ====== end mimicked bar ===== */ /* ===== start emoticon ===== */ /* ===== end emoticon ===== */ /* ===== start widgets ===== */ /* ===== end widgets ===== */ /* ====== start modal showdown ===== */ /* ====== end modal showdown ===== */ } .theme-hub .status-indicator { background-color: rgba(178, 195, 247, 0.5); border-radius: 100px; } .theme-hub .status-indicator .indicator-bullet .icon-bg { background-color: rgba(255, 255, 255, 0.5); } .theme-hub .question-text-block .resizable-textbox { --max-font: 18; } .theme-hub .draggable-block .list-numbers .list-number span { font-size: 21px; color: white; } .theme-hub .draggable-strip { margin: 10px 0 10px 0; border: 3px solid #e6e6ff; border-radius: 200px; background-color: #d3d1ff; } .theme-hub .draggable-strip .drag-icon:before { display: none; } .theme-hub .draggable-strip .drag-icon:after { background: #b1adff; } .theme-hub .draggable-strip .strip-bg { display: none; } .theme-hub .draggable-strip.correct { background-color: #76c794; border-color: #acddbe; } .theme-hub .draggable-strip.correct .resizable-textbox { color: white; } .theme-hub .draggable-strip.correct .drag-icon:after { background: #46ab6b; } .theme-hub .draggable-strip.incorrect { background-color: #f75b5f; border-color: #fba4a6; } .theme-hub .draggable-strip.incorrect .container-box .resizable-textbox { color: white; } .theme-hub .draggable-strip.incorrect .drag-icon:after { background: #f5393e; } .theme-hub .draggable-strip.cdk-drag-placeholder { border: 1px dashed rgba(109, 141, 240, 0.5); background: rgba(245, 247, 255, 0.5); } .theme-hub .draggable-strip.cdk-drag-preview { background-color: #b0b3ff; border-color: #c3c9fd; } .theme-hub .draggable-strip.cdk-drag-preview .drag-icon:after { background: #8c91ff; } .theme-hub .draggable-strip .container-box .resizable-textbox { text-transform: uppercase; margin: 3px; } .theme-hub .draggable-strip .container-box .resizable-textbox.limit-drag-strip-order-answer { --max-font: 20; } .theme-hub .item-count-block span { color: #5e63bc; line-height: 39px; font-size: 18px; } .theme-hub .widget.double .examworld .progress-gauge .progress-highlightbar { background: rgba(94, 99, 188, 0.2); } .theme-hub .widget.double .widget-block .frame { background: none; } .theme-hub body { background-size: cover; } .theme-hub .best-score .labels li { line-height: 30px; } .theme-hub .avatar-stage { background: none; } .theme-hub .avatar-container.medium .multiplier { font-size: 28px; line-height: 92px; top: 128px; } .theme-hub .achievement-block .trophy .counter span { line-height: 40px; color: white; } .theme-hub .nav-modules li > a .icon.icon-coopquiz, .theme-hub .nav-modules li > a .icon.icon-team { font-size: 24px; } .theme-hub .switch-level .btn-default.selected { background: white; color: #5e63bc; } .theme-hub .switch-level .btn-default.selected:hover { background: white; color: #5e63bc; } .theme-hub .accordion-items .accordion-item .accordion-header .accordion-header-info .small { padding-top: 4px; } .theme-hub .section-tutorial .tutorial-slide h2 { background: white; } .theme-hub .mimicked-active-bar .btn-default { margin-top: 4px; } .theme-hub .mimicked-active-bar .btn-default i { font-size: 18px; } .theme-hub .progress-gauge .progress-highlightbar { border-radius: 20px; } .theme-hub .progress-gauge .progress-highlightbar .progress-highlight { border-radius: 20px; } .theme-hub .screen { color: #5e63bc; } .theme-hub .emoticon.angry .base .bg-fill { fill: #f8cfc9; } .theme-hub .emoticon.angry .base .bg-ring { fill: #f28679; } .theme-hub .emoticon.angry path { fill: #f28679; } .theme-hub .emoticon.excited .base .bg-fill { fill: #c4d2f9; } .theme-hub .emoticon.excited .base .bg-ring { fill: #678af0; } .theme-hub .emoticon.excited path { fill: #678af0; } .theme-hub .emoticon.surprised .base .bg-fill { fill: #ddddf5; } .theme-hub .emoticon.surprised .base .bg-ring { fill: #aaaae8; } .theme-hub .emoticon.surprised path { fill: #aaaae8; } .theme-hub .emoticon.tired .base .bg-fill { fill: #fce7d2; } .theme-hub .emoticon.tired .base .bg-ring { fill: #f8c38d; } .theme-hub .emoticon.tired path { fill: #f8c38d; } .theme-hub .emoticon.sad .base .bg-fill { fill: #cdd0ef; } .theme-hub .emoticon.sad .base .bg-ring { fill: #8388da; } .theme-hub .emoticon.sad path { fill: #8388da; } .theme-hub .emoticon.happy .base .bg-fill { fill: #c8e8d3; } .theme-hub .emoticon.happy .base .bg-ring { fill: #27c494; } .theme-hub .emoticon.happy path { fill: #27c494; } .theme-hub .emoticon .state-1 { visibility: hidden; } .theme-hub .emoticon .state-2 { visibility: hidden; } .theme-hub .btn-default { background: #f8bb81; color: white; border-radius: 18px; } .theme-hub .btn-default.float-right { margin-right: 3px; } .theme-hub .btn-default:hover { background: white; color: #f8bb81; } .theme-hub .btn-default.secondary { background: #f08978; color: white; } .theme-hub .btn-default.secondary:hover { background: white; color: #f08978; } .theme-hub .btn-default.tertiary { background: white; color: #f8bb81; } .theme-hub .btn-default.tertiary:hover { background: #f8bb81; color: white; } .theme-hub .btn-default[class^="icon-"]:before, .theme-hub .btn-default[class*=" icon-"]:before, .theme-hub .btn-default[data-icon]:before { top: -3px; left: -3px; } .theme-hub .btn-default[class^="icon-"].small:before, .theme-hub .btn-default[class*=" icon-"].small:before, .theme-hub .btn-default[data-icon].small:before { top: -3px; left: -3px; } .theme-hub .btn-default.large { border-radius: 21px; } .theme-hub .btn-icon .icon { background: #f8bb81; color: white; border-radius: 7px; } .theme-hub .btn-icon .label { color: #5e63bc; } .theme-hub .btn-icon:hover .icon { background: #f6a95f; } .theme-hub .btn-icon .transparent .icon { color: #5e63bc; } .theme-hub .btn-icon .transparent:hover .icon { color: white; } .theme-hub .btn-grade { background: #f8bb81; color: white; border-radius: 7px; } .theme-hub .btn-grade:hover { background: #f6a95f; } .theme-hub .btn-grade.active { background: #f38720; } .theme-hub .btn-emoticon { background: #b2c3f7; color: #5e63bc; border-radius: 7px; } .theme-hub .btn-badge::before { background: #c9d5fa; border: 2px solid #e6e6ff; z-index: -1; } .theme-hub .btn-badge .badge-icon { top: 7px; left: 7px; } .theme-hub .btn-badge .btn-body { width: calc(100% - 58px); height: 40px; margin-left: -8px; background: #c9d5fa; border-top-right-radius: 18px; border-bottom-right-radius: 18px; border-top: 2px solid #e6e6ff; border-right: 2px solid #e6e6ff; border-bottom: 2px solid #e6e6ff; } .theme-hub .btn-badge .btn-body span { font-size: 21px; line-height: 36px; } .theme-hub .btn-badge:hover::before, .theme-hub .btn-badge:hover .btn-body { background: #b2c3f7; border-color: #c9d5fa; } .theme-hub .btn-badge.active::before, .theme-hub .btn-badge.active .btn-body { background: #5e63bc; color: white; border-color: #5e63bc; } .theme-hub .btn-badge.active:hover::before, .theme-hub .btn-badge.active:hover .btn-body { background: #5e63bc; color: white; border-color: #5e63bc; } .theme-hub .widget.single .post.new .icon.icon-stamp3 span { color: #5e63bc; } .theme-hub .widget.single .locked .message .icon { background-image: url(../../desktop/images/theme-sprite.png?v=20240109145540); background-position: -464px -265px; width: 96px; height: 25px; background-repeat: no-repeat; overflow: hidden; display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .theme-hub .widget.single .locked .message .icon { background-image: url(../../desktop/images/theme-sprite-retina.png?v=20240109145540); background-size: 589px 589px; } } .theme-hub .widget.double .widget-block .frame { border: 2px solid #5e63bc; border-radius: 12px; } .theme-hub .widget.single .examworld.locked .message span, .theme-hub .widget.double .examworld.locked .message span { font-size: 13px; text-transform: uppercase; } .theme-hub .widget.single .adventure .title, .theme-hub .widget.double .adventure .title { color: #5e63bc; } .theme-hub .widget.single .adventure.locked .message span, .theme-hub .widget.double .adventure.locked .message span { font-size: 13px; text-transform: uppercase; } .theme-hub .widget.single .adventure .final-trophy-widget, .theme-hub .widget.double .adventure .final-trophy-widget { right: 25px; bottom: 34px; } .theme-hub .widget.single .adventure:hover .title, .theme-hub .widget.double .adventure:hover .title { color: #f8bb81; } .theme-hub .widget.single .adventure:hover .message span, .theme-hub .widget.double .adventure:hover .message span { color: #f8bb81; } .theme-hub .widget.single .adventure .progress-gauge .progress-highlightbar, .theme-hub .widget.double .adventure .progress-gauge .progress-highlightbar { width: 232px; background: rgba(94, 99, 188, 0.2); } .theme-hub .widget.single .adventure .progress-gauge .pointer span, .theme-hub .widget.double .adventure .progress-gauge .pointer span { color: #5e63bc; } .theme-hub .label.label-visible { margin: 22px 0 0 0; } .theme-hub input[type='text']#activation-code { padding: 6px 16px 3px 114px; } .theme-hub .slider-block .mat-slider .mat-slider-thumb { bottom: -11px; } .theme-hub .slider-block .mat-slider .mat-slider-track-wrapper { border-radius: 20px; } .theme-hub .slider-block .mat-slider.mat-slider-horizontal .mat-slider-wrapper, .theme-hub .slider-block .mat-slider.mat-slider-horizontal .mat-slider-track-wrapper, .theme-hub .slider-block .mat-slider.mat-slider-horizontal .mat-slider-track-background, .theme-hub .slider-block .mat-slider.mat-slider-horizontal .mat-slider-track-fill { height: 10px; } .theme-hub .slider-block .mat-slider.mat-slider-disabled .mat-slider-thumb:after { top: -1px; position: absolute; left: calc(50% - 10px); } .theme-hub ::-webkit-input-placeholder { color: rgba(94, 99, 188, 0.8); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .theme-hub :-moz-placeholder { color: rgba(94, 99, 188, 0.8); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .theme-hub ::-moz-placeholder { color: rgba(94, 99, 188, 0.8); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .theme-hub :-ms-input-placeholder { color: rgba(94, 99, 188, 0.8); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .theme-hub input[type=email], .theme-hub input[type=text], .theme-hub input[type=password], .theme-hub textarea { background: rgba(94, 99, 188, 0.2); color: #5e63bc; padding: 6px 8px 7px; } .theme-hub .textarea-block textarea { padding: 8px; } .theme-hub .date-block input[type='text'].input-datepicker { background: rgba(94, 99, 188, 0.2); color: #5e63bc; } .theme-hub .show-password { color: #5e63bc; } .theme-hub .search-box input[type='text'].search-box-input { background: rgba(94, 99, 188, 0.2); } .theme-hub .mat-calendar { border: 2px solid #5e63bc; border-radius: 20px; } .theme-hub .mat-calendar-body-label, .theme-hub .mat-calendar-period-button .mat-calendar-body { font-size: 11px; } .theme-hub .mat-calendar-table-header th { font-size: 10px; } .theme-hub .mat-datepicker-content .mat-calendar-next-button, .theme-hub .mat-datepicker-content .mat-calendar-previous-button, .theme-hub .mat-datepicker-toggle { color: white; background-color: #f8bb81; margin: 0 4px; } .theme-hub .mat-button, .theme-hub .mat-flat-button, .theme-hub .mat-icon-button, .theme-hub .mat-stroked-button { color: #5e63bc; background: rgba(94, 99, 188, 0.2); } .theme-hub .mat-button .mat-calendar-arrow, .theme-hub .mat-flat-button .mat-calendar-arrow, .theme-hub .mat-icon-button .mat-calendar-arrow, .theme-hub .mat-stroked-button .mat-calendar-arrow { color: #5e63bc; } .theme-hub .mat-calendar-previous-button::after { border-left-width: 3px !important; border-top-width: 3px !important; } .theme-hub .mat-calendar-next-button::after { border-right-width: 3px !important; border-top-width: 3px !important; } .theme-hub .mat-calendar-table-header { color: #6d8df0; } .theme-hub .mat-calendar-table-header-divider::after { color: #5e63bc; } .theme-hub .mat-calendar-body-label { color: #5e63bc; } .theme-hub .mat-calendar-body-cell-content { color: #5e63bc; border-color: transparent; line-height: 1px !important; width: calc(100% - 2px) !important; height: calc(100% - 2px) !important; } .theme-hub .mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) { color: #86929d; } .theme-hub .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected), .theme-hub .cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected), .theme-hub .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) { background-color: rgba(0, 0, 0, 0.04); } .theme-hub .mat-calendar-body-today:not(.mat-calendar-body-selected) { border-color: #777bc6; } .theme-hub .mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) { border-color: #6d8df0; } .theme-hub .mat-calendar-body-selected { background-color: rgba(178, 195, 247, 0.2); color: #5e63bc; border-color: #5e63bc; border-width: 2px !important; } .theme-hub .mat-calendar-body-disabled > .mat-calendar-body-selected { background-color: #f8bb81; } .theme-hub .mat-calendar-body-today.mat-calendar-body-selected { box-shadow: none; } .theme-hub .mat-datepicker-content { border-radius: 20px !important; box-shadow: none; border-color: #5e63bc; background-color: white; color: #5e63bc; } .theme-hub .mat-datepicker-content.mat-accent .mat-calendar-body-selected { background-color: white; color: #5e63bc; } .theme-hub .mat-datepicker-content.mat-accent .mat-calendar-body-disabled > .mat-calendar-body-selected { background-color: #d9d9d9; } .theme-hub .mat-datepicker-content.mat-accent .mat-calendar-body-today.mat-calendar-body-selected { box-shadow: inset 0 0 0 1px #5e63bc; } .theme-hub .mat-datepicker-content.mat-warn .mat-calendar-body-selected { background-color: #6d8df0; color: #5e63bc; } .theme-hub .mat-datepicker-content.mat-warn .mat-calendar-body-disabled > .mat-calendar-body-selected { background-color: "color-not-found"; } .theme-hub .mat-datepicker-content.mat-warn .mat-calendar-body-today.mat-calendar-body-selected { box-shadow: inset 0 0 0 1px #5e63bc; } .theme-hub .mat-datepicker-content-touch { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12); } .theme-hub .modal-content { border-radius: 20px; } .theme-hub .modal-backdrop { background-color: rgba(255, 255, 255, 0.8); } .theme-hub .quiz-report-dialog .question-block .answers ul li p { margin: 5px 0 0 6px; } .theme-hub .section-avatarbuilder .form-group input[type="email"], .theme-hub .section-avatarbuilder .form-group input[type="password"], .theme-hub .section-avatarbuilder .form-group input[type="text"], .theme-hub .section-avatarbuilder .form-group select { border-radius: 5px; } .theme-hub .section-avatarbuilder .avatar-element-selector .avatar-element-item { border-radius: 8px; } .theme-hub .section-avatarbuilder .avatar-element-selector .avatar-element-item .image-container { border-radius: 8px; } .theme-hub .section-avatarbuilder .avatar-element-selector .avatar-element-item .image-container:before { border-radius: 8px; } .theme-hub .section-avatarbuilder .avatar-element-selector .avatar-element-item .image-container img { border-radius: 8px; } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item { border-radius: 100px; } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-background span { content: url("../../shared/images/avatar/builder/vector/icon-avatar-background.svg?v=20240109145540"); filter: invert(62%) sepia(64%) saturate(845%) hue-rotate(204deg) brightness(86%) contrast(75%); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-background.active span { filter: invert(0); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-background.locked:before { filter: saturate(0) brightness(0) invert(1); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-background.locked span { filter: invert(0); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-background.new { transform: scale(0.45); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-background:hover span { filter: invert(26%) sepia(45%) saturate(497%) hue-rotate(333deg) brightness(103%) contrast(94%); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-skin span { content: url("../../shared/images/avatar/builder/vector/icon-avatar-skin.svg?v=20240109145540"); filter: invert(62%) sepia(64%) saturate(845%) hue-rotate(204deg) brightness(86%) contrast(75%); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-skin.active span { filter: invert(0); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-skin.locked:before { filter: saturate(0) brightness(0) invert(1); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-skin.locked span { filter: invert(0); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-skin.new { transform: scale(0.45); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-skin:hover span { filter: invert(26%) sepia(45%) saturate(497%) hue-rotate(333deg) brightness(103%) contrast(94%); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-body span { content: url("../../shared/images/avatar/builder/vector/icon-avatar-body.svg?v=20240109145540"); filter: invert(62%) sepia(64%) saturate(845%) hue-rotate(204deg) brightness(86%) contrast(75%); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-body.active span { filter: invert(0); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-body.locked:before { filter: saturate(0) brightness(0) invert(1); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-body.locked span { filter: invert(0); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-body.new { transform: scale(0.45); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-body:hover span { filter: invert(26%) sepia(45%) saturate(497%) hue-rotate(333deg) brightness(103%) contrast(94%); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-face span { content: url("../../shared/images/avatar/builder/vector/icon-avatar-face.svg?v=20240109145540"); filter: invert(62%) sepia(64%) saturate(845%) hue-rotate(204deg) brightness(86%) contrast(75%); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-face.active span { filter: invert(0); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-face.locked:before { filter: saturate(0) brightness(0) invert(1); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-face.locked span { filter: invert(0); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-face.new { transform: scale(0.45); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-face:hover span { filter: invert(26%) sepia(45%) saturate(497%) hue-rotate(333deg) brightness(103%) contrast(94%); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-hair span { content: url("../../shared/images/avatar/builder/vector/icon-avatar-hair.svg?v=20240109145540"); filter: invert(62%) sepia(64%) saturate(845%) hue-rotate(204deg) brightness(86%) contrast(75%); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-hair.active span { filter: invert(0); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-hair.locked:before { filter: saturate(0) brightness(0) invert(1); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-hair.locked span { filter: invert(0); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-hair.new { transform: scale(0.45); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-hair:hover span { filter: invert(26%) sepia(45%) saturate(497%) hue-rotate(333deg) brightness(103%) contrast(94%); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-style span { content: url("../../shared/images/avatar/builder/vector/icon-avatar-style.svg?v=20240109145540"); filter: invert(62%) sepia(64%) saturate(845%) hue-rotate(204deg) brightness(86%) contrast(75%); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-style.active span { filter: invert(0); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-style.locked:before { filter: saturate(0) brightness(0) invert(1); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-style.locked span { filter: invert(0); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-style.new { transform: scale(0.45); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-style:hover span { filter: invert(26%) sepia(45%) saturate(497%) hue-rotate(333deg) brightness(103%) contrast(94%); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-accessories span { content: url("../../shared/images/avatar/builder/vector/icon-avatar-accessories.svg?v=20240109145540"); filter: invert(62%) sepia(64%) saturate(845%) hue-rotate(204deg) brightness(86%) contrast(75%); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-accessories.active span { filter: invert(0); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-accessories.locked:before { filter: saturate(0) brightness(0) invert(1); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-accessories.locked span { filter: invert(0); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-accessories.new { transform: scale(0.45); } .theme-hub .section-avatarbuilder .avatar-selector-container .part-item.cat-accessories:hover span { filter: invert(26%) sepia(45%) saturate(497%) hue-rotate(333deg) brightness(103%) contrast(94%); } .theme-hub .section-adventure .col-history-block .history-block .score-info { background: rgba(109, 141, 240, 0.2); } .theme-hub .section-adventure .col-history-block .history-block .history-best-score { background: rgba(245, 247, 255, 0.8); } .theme-hub .section-adventure.adventure-play-versus .quiz-intro-info .info-row span.label { font-size: 18px; } .theme-hub .section-adventure .adventure-quiz-header .status { color: white; } .theme-hub .section-adventure .adventure-question { border-top-color: #5e63bc; } .theme-hub .section-adventure .adventure-quiz-answers .adventure-quiz-answer .btn-answer { background: rgba(109, 141, 240, 0.2); border-radius: 32px; cursor: pointer; } .theme-hub .section-adventure .adventure-quiz-answers .adventure-quiz-answer .btn-answer.selected { background: rgba(40, 87, 233, 0.8); } .theme-hub .section-adventure .adventure-quiz-answers .adventure-quiz-answer .btn-answer.selected:hover { background: rgba(40, 87, 233, 0.8); } .theme-hub .section-adventure .adventure-quiz-answers .adventure-quiz-answer .btn-answer.selected .answer-text .markdown { color: white; } .theme-hub .section-adventure .adventure-quiz-answers .adventure-quiz-answer .btn-answer.answer-correct { background: rgba(172, 221, 190, 0.5); } .theme-hub .section-adventure .adventure-quiz-answers .adventure-quiz-answer .btn-answer.answer-correct:hover { background: rgba(172, 221, 190, 0.5); cursor: default; } .theme-hub .section-adventure .adventure-quiz-answers .adventure-quiz-answer .btn-answer:hover { background: rgba(109, 141, 240, 0.5); } .theme-hub .section-adventure .adventure-quiz-answers .adventure-quiz-answer .btn-answer:hover.no-hover { background: rgba(109, 141, 240, 0.2); } .theme-hub .section-adventure .adventure-quiz-answers .adventure-quiz-answer .btn-answer:disabled { pointer-events: none; cursor: default; } .theme-hub .section-adventure .adventure-quiz-answers .adventure-quiz-answer .answer-option { padding-top: 6px; color: white; text-shadow: none; line-height: 66px; font-size: 30px; } .theme-hub .section-adventure .adventure-quiz-block-answers { background: rgba(255, 255, 255, 0.2); } .theme-hub .section-adventure .quiz-answered-block .answer-block .answer { text-shadow: none; color: white; } .theme-hub .section-adventure .modal.final-trophy .modal-dialog .final-trophy-modal-block .final-trophy-middle span { color: #5e63bc; } .theme-hub .section-adventure.adventure-map .player .avatar-holder .avatar-container.small .avatar { transform: scale(0.2, 0.2); top: -178px; } .theme-hub .section-adventure.adventure-map .chapter-overview-block .level-list:before { background-color: #f8bb81; } .theme-hub .section-adventure.adventure-map .chapter-overview-block .unlockables-block .border-container:before { background-color: #f8bb81; } .theme-hub .section-adventure.adventure-map .chapter-overview-block .unlockables-block .border-container .unlockables-list:before { background-color: #f8bb81; } .theme-hub .section-adventure.adventure-map .adventure-world-block .world-locked-message { color: #5e63bc; } .theme-hub .section-adventure.adventure-map .adventure-world-block .progression-holder .world-progress { color: #5e63bc; } .theme-hub .section-adventure.adventure-map .adventure-world-block .unlock-requirements.position-1 { transform: translate(48px, -50%); } .theme-hub .section-adventure.adventure-map .adventure-world-block .unlock-requirements.position-2 { transform: translate(48px, -50%); } .theme-hub .section-adventure.adventure-map .adventure-world-block .unlock-requirements.position-3 { transform: translate(calc(-100% - 48px), -50%); } .theme-hub .section-adventure.adventure-map .adventure-world-block .unlock-requirements.position-4 { transform: translate(calc(-100% - 48px), -50%); } .theme-hub .section-adventure.adventure-map .adventure-world-block .unlock-requirements.position-5 { transform: translate(calc(-100% - 48px), 0%); } .theme-hub .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab .nav-link { line-height: 33px; } .theme-hub .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab .nav-link.active { color: #5e63bc; } .theme-hub .section-battle-overview .tab-block .nav-tabs .nav-item.adventure-tab:hover { color: #5e63bc; } .theme-hub .adventure-overview-block .title { color: #5e63bc; margin: 7px 0 8px 0; } .theme-hub .adventure-overview-block .goal-text { color: #5e63bc; font-size: 18px; } .theme-hub .adventure-overview-block .progression-block { height: 95px; background-color: rgba(109, 141, 240, 0.2); } .theme-hub .adventure-overview-block .progression-block .progress-gauge { width: 512px; margin: 0 auto; padding: 17px 0px 0px 0px; height: 45px; } .theme-hub .adventure-overview-block .progression-block .progress-gauge .pointer p { border: 1px solid #5e63bc; background-color: #f8bb81; } .theme-hub .adventure-overview-block .progression-block .progress-gauge .pointer p span { line-height: 47px; color: #5e63bc; } .theme-hub .adventure-overview-block .chapters-block .chapter.disabled { opacity: 1; } .theme-hub .adventure-overview-block .chapters-block .chapter.active { background-color: rgba(109, 141, 240, 0.2); } .theme-hub .adventure-overview-block .chapters-block .chapter .chapter-image { margin: 24px auto 0 auto; } .theme-hub .adventure-overview-block .chapters-block .chapter .status span { color: #5e63bc; } .theme-hub .section-battle-quiz { /* ====== start result ===== */ /* ====== end result ===== */ } .theme-hub .section-battle-quiz .col-user .battle-result-status { left: 50%; transform: translate(-50%, 0); margin: -14px 0 0 60px; } .theme-hub .section-battle-quiz .col-opponent .battle-result-status { left: 50%; transform: translate(-50%, 0); margin: -14px 0 0 -60px; } .theme-hub .section-battle-quiz .battle-result .recap.quizscore { padding: 0; height: 34px; } .theme-hub .section-battle-quiz .battle-result .recap.round-recap::before { -moz-transform: skew(-190deg, 0deg); -o-transform: skew(-190deg, 0deg); -ms-transform: skew(-190deg, 0deg); -webkit-transform: skew(-190deg, 0deg); transform: skew(-190deg, 0deg); } .theme-hub .section-coop .intro-block .coop-introbar span { color: #5e63bc; } .theme-hub .section-coop .result-block .subname { font-size: 26px; } .theme-hub .section-coop .result-block .digit-block .digit { color: white; } .theme-hub .section-coop .play-block .quiz-header .status { color: white; } .theme-hub .section-dashboard .timeline ul::before { width: 100%; background: #f8bb81; } .theme-hub .section-dashboard .timeline ul::after { width: 0; background: #6d8df0; } .theme-hub .section-dilemma .progress-step-block .step div img { filter: invert(40%) sepia(9%) saturate(4788%) hue-rotate(203deg) brightness(92%) contrast(75%); } .theme-hub .section-dilemma .progress-step-block .step.active div img { filter: invert(1); } .theme-hub .section-dilemma .quiz-answers .quiz-answer .btn-answer:hover.no-hover { background: rgba(109, 141, 240, 0.2); } .theme-hub .section-dilemma .quiz-answers .quiz-answer .slider-answer-block { border-radius: 32px; } .theme-hub .section-dilemma .quiz-answers .quiz-answer.answer-tab.active .btn-answer:hover { background: rgba(109, 141, 240, 0.2); } .theme-hub .section-dilemma .stakeholder-review-item { border: 1px solid rgba(109, 141, 240, 0.1); background-color: rgba(109, 141, 240, 0.05); border-radius: 16px; } .theme-hub .section-dilemma .stakeholder-review-item.own { border: 1px solid rgba(248, 187, 129, 0.1); background-color: rgba(248, 187, 129, 0.1); } .theme-hub .section-dilemma .stakeholder-review-item .main-info .player-avatar { border: 1px solid rgba(94, 99, 188, 0.2); } .theme-hub .section-dilemma .stakeholder-review-item .main-info .player-avatar .avatar-container { margin: -18px 0 0 -11px; } .theme-hub .section-dilemma .stakeholder-review-item .main-info .player-avatar .avatar-container .avatar { transform: scale(0.15, 0.15); -webkit-transform: scale(0.15, 0.15); } .theme-hub .section-dilemma .stakeholder-bar { background-color: rgba(109, 141, 240, 0.5); } .theme-hub .section-dilemma .col-stakeholders { border-radius: 32px; } .theme-hub .section-dilemma .selection-frame .stakeholder-info span { font-size: 38px; line-height: 40px; color: #f8bb81; margin: 8px 0 0 0; } .theme-hub .exam-prologue .exam-info { border-radius: 20px; background: rgba(178, 195, 247, 0.2); } .theme-hub .section-exam-quiz .exam-section-bg.exam-area1.exam-level0 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area1.exam-level1 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area1.exam-level2 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area1.exam-level3 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area2.exam-level0 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area2.exam-level1 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area2.exam-level2 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area2.exam-level3 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area3.exam-level0 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area3.exam-level1 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area3.exam-level2 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area3.exam-level3 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area4.exam-level0 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area4.exam-level1 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area4.exam-level2 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area4.exam-level3 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area5.exam-level0 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area5.exam-level1 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area5.exam-level2 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area5.exam-level3 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area6.exam-level0 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area6.exam-level1 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area6.exam-level2 { background-image: none; } .theme-hub .section-exam-quiz .exam-section-bg.exam-area6.exam-level3 { background-image: none; } .theme-hub .section-game-statistics .certificate .certificate-header-info .title span { font-size: 30px; line-height: 30px; color: #6d8df0; letter-spacing: 4px; } .theme-hub .section-game-statistics .certificate .certificate-header-info .description { font-size: 15px; text-transform: uppercase; } .theme-hub .section-game-statistics .certificate .certificate-player-info .name, .theme-hub .section-game-statistics .certificate .certificate-player-info .nickname, .theme-hub .section-game-statistics .certificate .certificate-player-info .teamname { color: #170629; } .theme-hub .section-mission-list .progress-block .progress-gauge.left-to-right { margin-left: -10px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; background-color: #b2c3f7; } .theme-hub .section-mission-list .progress-block .avatar-container { margin-top: -32px; } .theme-hub .section-mission-list .progress-block .avatar-container::before { background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -1132px -754px; width: 100px; height: 100px; background-repeat: no-repeat; overflow: hidden; display: block; width: 100px; height: 100px; position: absolute; content: ''; left: 50%; margin-left: -50px; top: 50%; margin-top: -33px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .theme-hub .section-mission-list .progress-block .avatar-container::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .theme-hub .section-mission .mission-intro-holder { background: rgba(201, 213, 250, 0.5); border-radius: 20px; overflow: hidden; } .theme-hub .section-mission .quiz-content { background: none; } .theme-hub .section-mission .submissions-list { margin-bottom: 0; background: none; } .theme-hub .section-mission .mission-score-block { overflow: hidden; padding: 16px; margin-top: 0; border-radius: 10px; } .theme-hub .section-mission .mission-score-block li { background: rgba(255, 255, 255, 0.5); margin: 0; } .theme-hub .section-mission .mission-score-block li .points { width: 140px; } .theme-hub .section-mission .mission-score-block li:nth-child(1) { border-top-left-radius: 10px; border-top-right-radius: 10px; } .theme-hub .section-mission .mission-score-block li:nth-last-child(1) { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .theme-hub .practical-assignment .form .button-list { overflow: hidden; margin: 20px 0 5px 0; } .theme-hub .mood-tracker-trigger { height: 50px; width: 50px; background: url("../../shared/images/vector/mood-tracker/btn-trigger.svg"); border: 0; margin-top: 288px; animation: trigger-animation 4s linear infinite; } .theme-hub .mood-tracker-trigger span { font-size: 30px; } .theme-hub .mood-tracker-trigger span:before { color: white; } .theme-hub .mood-tracker-trigger.mood-filledin span:before { color: white; } .theme-hub .mood-tracker-trigger.trigger-disabled { animation: disappear-animation 0.5s forwards infinite; animation-iteration-count: 1; } .theme-hub .mood-tracker-trigger.trigger-enabled { animation: appear-animation 0.5s forwards infinite; animation-iteration-count: 1; } .theme-hub .mood-tracker-pointer { top: 26px; } .theme-hub .mood-tracker-emoticon.clickable .emoticon-container::before { background: white; } .theme-hub .mood-tracker-emoticon.clickable:hover .emoticon-container::before { background: rgba(178, 195, 247, 0.5); } .theme-hub .mood-tracker-emoticon .emoticon-title { color: #5e63bc; } .theme-hub .mood-tracker-explanation .explanation-form textarea.form-control { background: rgba(109, 141, 240, 0.2); color: #5e63bc; } .theme-hub .mood-tracker-explanation .explanation-form .btn-default { margin-right: 3px; } .theme-hub .mood-tracker-thankyou .achievement .trophy .counter span { line-height: 38px; color: white; } .theme-hub .mood-tracker-thankyou .achievement .achievement-info .title { color: #5e63bc; } .theme-hub .mood-tracker-choosen .emoticon-description { color: #5e63bc; } @keyframes trigger-animation { 0% { transform: scale(1); } 10% { transform: scale(1.3); } 20% { transform: scale(1); } 30% { transform: scale(1.1); } 40% { transform: scale(1); } 100% { transform: scale(1); } } @keyframes disappear-animation { from { transform: scale(1, 1); opacity: 1; } to { transform: scale(0, 0); opacity: 0; } } @keyframes appear-animation { from { transform: scale(0, 0); opacity: 0; } to { transform: scale(1, 1); opacity: 1; } } .theme-hub .quiz-answer-set-order .status-indicator { background-color: transparent; } .theme-hub .quiz-content { background: rgba(178, 195, 247, 0.2); border-radius: 20px; } .theme-hub .quiz-header { margin-top: 4px; } .theme-hub .quiz-header .status { color: white; } .theme-hub .quiz-header .timer:before { margin-top: -1px; } .theme-hub .quiz-answer-shuffle .shuffle .char-block { border-radius: 14px; } .theme-hub .quiz-answer-shuffle .shuffle .char-block span { line-height: 24px; margin: 0 0 0 1px; display: block; } .theme-hub .quiz-answer-shuffle .shuffle.answer-given .char-block { border: solid 2px #5e63bc; color: #f8bb81; } .theme-hub .quiz-answer-shuffle .shuffle.answer-temp .char-block { background: rgba(109, 141, 240, 0.5); } .theme-hub .quiz-answer-shuffle .shuffle.answer-temp .char-block span { line-height: 27px; } .theme-hub .quiz-answer-shuffle .shuffle.answer-temp .char-block.selected:hover { background: rgba(40, 87, 233, 0.5); } .theme-hub .quiz-answer-shuffle .shuffle.answer-temp .char-block:hover { background: rgba(40, 87, 233, 0.5); } @media (hover: hover) { .theme-hub .quiz-answer:hover .btn-answer { background: rgba(109, 141, 240, 0.5); } .theme-hub .quiz-answer:hover.selected .btn-answer p, .theme-hub .quiz-answer:hover.selected .btn-answer .markdown { color: white; } } .theme-hub .quiz-answer .btn-answer { border-radius: 32px; background: rgba(109, 141, 240, 0.2); } .theme-hub .quiz-answer .answer-option span { color: white; text-shadow: none; line-height: 66px; font-size: 30px; } .theme-hub .quiz-answer.selected .btn-answer { background: rgba(109, 141, 240, 0.8); } .theme-hub .quiz-answer.selected .btn-answer p, .theme-hub .quiz-answer.selected .btn-answer .markdown { color: white; } .theme-hub .quiz-answer.selected .btn-answer .answer-option span { color: white; text-shadow: none; } .theme-hub .quiz-answer.correct .btn-answer { background: rgba(118, 199, 148, 0.8); } .theme-hub .quiz-answer.correct .btn-answer p, .theme-hub .quiz-answer.correct .btn-answer .markdown { color: white; } .theme-hub .quiz-answer.incorrect .btn-answer { background: rgba(247, 91, 95, 0.8); } .theme-hub .quiz-answer.incorrect .btn-answer p, .theme-hub .quiz-answer.incorrect .btn-answer .markdown { color: white; } .theme-hub .status-shield-indicator { background: rgba(245, 247, 255, 0.5); } .theme-hub .quiz-answer-findit-images .tile.answer-correct .tile-front, .theme-hub .quiz-answer-findit-images .tile.answer-correct .tile-back { border: 3px solid #76c794; } .theme-hub .quiz-answer-findit-images .tile.answer-notcorrect .tile-front, .theme-hub .quiz-answer-findit-images .tile.answer-notcorrect .tile-back { border: 3px solid #f75b5f; } .theme-hub .quiz-answer-findit-images .findit-images-feedback .answers { background: rgba(109, 141, 240, 0.2); } .theme-hub .word-cloud-block .word-cloud .word-block:hover .resizable-textbox { color: #b2c3f7; } .theme-hub .word-cloud-block .word-cloud .word-block .resizable-textbox.answer-correct { color: #76c794; } .theme-hub .word-cloud-block .word-cloud .word-block .resizable-textbox.answer-incorrect { color: #f75b5f; } .theme-hub .section-posts .filter-block, .theme-hub .section-posts .sorting-block { color: #5e63bc; } .theme-hub .section-posts .filter-block select option, .theme-hub .section-posts .sorting-block select option { color: white; } .theme-hub .section-posts .score-bar { background-color: rgba(109, 141, 240, 0.5); } .theme-hub .section-posts .header-bar { background: rgba(178, 195, 247, 0.2); } .theme-hub .section-posts .message-bar { background: rgba(178, 195, 247, 0.2); } .theme-hub .section-posts .post-item { background: rgba(178, 195, 247, 0.2); } .theme-hub .section-posts .post .post-grades .grade-block:hover .btn-emoticon:hover { background: #b2c3f7; color: #5e63bc; } .theme-hub .section-posts .post .post-grades .grade-block .grade-options { background: #b2c3f7; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; } .theme-hub .section-posts .post .post-grades .grades-overview ul li .grade-list { border-radius: 7px; background-color: #fce2c9; } .theme-hub .section-ranking .rankinglist li:hover .rank-item.own { background: rgba(94, 99, 188, 0.05); } .theme-hub .section-ranking .rankinglist li:hover .detail.own { background: rgba(94, 99, 188, 0.05); } .theme-hub .section-ranking .rankinglist li { border-radius: 10px; overflow: hidden; } .theme-hub .section-ranking .rankinglist li .rank-item { background: rgba(94, 99, 188, 0.05); } .theme-hub .section-ranking .rankinglist li .rank-item span { margin: 3px 0 0 0; } .theme-hub .section-ranking .rankinglist li .rank-item.own { background: rgba(94, 99, 188, 0.2); } .theme-hub .section-ranking .rankinglist li .rank-item .score { font-size: 21px; } .theme-hub .section-ranking .rankinglist li .detail { background: rgba(94, 99, 188, 0.05); } .theme-hub .section-ranking .rankinglist li .detail.own { background: rgba(94, 99, 188, 0.2); } .theme-hub .stats-block { background: rgba(94, 99, 188, 0.1); } .theme-hub .survey-content { border-radius: 20px; background: rgba(178, 195, 247, 0.2); } .theme-hub .survey-content .status { color: white; } .theme-hub .section-badges .badge-icon.small { width: 50px; height: 50px; } .theme-hub .section-badges .badge-icon.large { width: 120px; height: 120px; } .theme-hub .section-badges .badge-detail-block { border-color: #c9d5fa; } .theme-hub .section-badges .badge-detail-block .badge-icon { margin: -12px 24px -24px 0; } .theme-hub .section-badges .badge-detail-block .badge-icon::before { display: none; } .theme-hub .section-badges .badge-explanation-block { background: rgba(245, 247, 255, 0.5); border: 2px solid #c9d5fa; } .theme-hub .section-badges .badge-explanation-block .badge-icon.small { width: 70px; height: 70px; } .theme-hub .section-badges .badge-explanation-block .badge-icon::before { display: none; } .theme-hub .skill-block { border-radius: 10px; border-top-left-radius: 44px; border-top-right-radius: 44px; border: 1px solid #f8bb81; } .theme-hub .skill-block .skill-header { z-index: 10; background-color: #E6E5FF; border: 8px solid #D3D1FF; border-radius: 100px; margin: -1px; } .theme-hub .skill-block .skill-header .skill-title { color: #5e63bc; } .theme-hub .skill-block .skill-settings li .multiplier { line-height: 32px; } .theme-hub .section-multibattle .teamdata-list .rank { color: white; line-height: 61px; } .theme-hub .section-teambattle .teambattle-list > li .sold { color: white; line-height: 40px; } .theme-hub .sales-tool .teamsales-block .realisation-bar { width: 100px; } .theme-hub .sales-tool .teamsales-block .realisation-bar .progress-gauge .pointer { width: 34px; } .theme-hub .section-team .team-badge { margin: -9px 0 0 83px; } .theme-hub .section-team .badge-list { background-color: white; border-radius: 12px; border: 2px solid #5e63bc; } .theme-hub .section-team .badge-list:after { content: none; } .theme-hub .section-team .player-rank { color: white; line-height: 51px; } .theme-hub .section-world { /* ---- start content tile default ---- */ /* ---- end content tile default ---- */ /* ---- start content tile-pos-home ---- */ /* ---- end content tile-pos-home ---- */ /* ---- start extra elements ---- */ /* ---- end extra elements ---- */ /* ---- start showdown in world ---- */ /* ---- end showdown in world ---- */ } .theme-hub .section-world .world-viewport { margin: 0; width: 100%; height: 100%; position: fixed; overflow: hidden; min-width: 1024px; min-height: 576px; } .theme-hub .section-world .world-viewport #world { width: 300%; height: 300%; position: absolute; overflow: hidden; top: 0; left: 0; } .theme-hub .section-world .world-viewport #world.world-view-pos-1 { top: 0%; left: -100%; } .theme-hub .section-world .world-viewport #world.world-view-pos-2 { top: -100%; left: 0%; } .theme-hub .section-world .world-viewport #world.world-view-pos-3 { top: -100%; left: -100%; } .theme-hub .section-world .world-viewport #world.world-view-pos-4 { top: -100%; left: -200%; } .theme-hub .section-world .world-viewport #world.world-view-pos-5 { top: -200%; left: 0%; } .theme-hub .section-world .world-viewport #world.world-view-pos-home { top: -200%; left: -100%; } .theme-hub .section-world .world-viewport #world.world-view-pos-6 { top: -200%; left: -200%; } .theme-hub .section-world .tile { width: 33.33%; height: 33.33%; position: absolute; overflow: hidden; } .theme-hub .section-world .tile.tile-pos-1 { left: 33.33%; top: 0; } .theme-hub .section-world .tile.tile-pos-2 { left: 0%; top: 33.33%; } .theme-hub .section-world .tile.tile-pos-3 { left: 33.33%; top: 33.33%; } .theme-hub .section-world .tile.tile-pos-4 { left: 66.66%; top: 33.33%; } .theme-hub .section-world .tile.tile-pos-5 { left: 0; top: 66.66%; } .theme-hub .section-world .tile.tile-pos-6 { left: 66.66%; top: 66.66%; } .theme-hub .section-world .tile.tile-pos-home { left: 33.33%; top: 66.66%; } .theme-hub .section-world .tile .tile-content { position: relative; width: 100%; max-height: 100%; overflow-x: auto; z-index: 50; } .theme-hub .section-world .tile .tile-content .container { position: relative; padding-top: 0; } .theme-hub .section-world .tile .videoBG { height: 100%; width: 177.77777778vh; /* 100 * 16 / 9 */ min-width: 100%; min-height: 56.25vw; /* 100 * 9 / 16 */ position: absolute; left: 50%; /* % of surrounding element */ top: 50%; transform: translate(-50%, -50%); /* % of current element */ } @media (max-width: 1023px), (max-height: 575px) { .theme-hub .section-world .tile .videoBG { display: none; } .theme-hub .section-world .tile .tile { background: url("../../shared/images/backgrounds/background-default.jpg") top center no-repeat; background-size: cover; } } .theme-hub .section-world .tile .tile-content { padding: 120px 0 0; display: none; } .theme-hub .section-world .tile .tile-content.active { display: block; } .theme-hub .section-world .tile .tile-content .btn-home { display: block; border-radius: 100px; padding: 3px 9px; color: white; background: #f08978; z-index: 10; position: absolute; margin-left: -266px; left: 50%; transform: translateX(-100%); cursor: pointer; text-transform: uppercase; font-size: 17px; } .theme-hub .section-world .tile .tile-content .btn-home:hover { background: #e84d33; } .theme-hub .section-world .tile-pos-home .tile-content { padding: 120px 0; height: 100%; display: block; } .theme-hub .section-world .tile-pos-home .tile-content .container { height: 100%; } .theme-hub .section-world .tile-pos-home .mission-summary { width: 280px; height: 90px; z-index: 10; } .theme-hub .section-world .tile-pos-home .mission-summary.area-1 { top: 0; left: 0; } .theme-hub .section-world .tile-pos-home .mission-summary.area-2 { top: 0; right: 0; } .theme-hub .section-world .tile-pos-home .mission-summary.area-3 { top: 50%; left: 0; margin-top: -37px; } .theme-hub .section-world .tile-pos-home .mission-summary.area-4 { top: 50%; right: 0; margin-top: -37px; } .theme-hub .section-world .tile-pos-home .mission-summary.area-5 { bottom: 0; left: 0; } .theme-hub .section-world .tile-pos-home .mission-summary.area-6 { bottom: 0; right: 0; } .theme-hub .section-world .tile-pos-home .mission-summary:nth-child(odd) .btn-summary .level-icon { right: 8px; } .theme-hub .section-world .tile-pos-home .mission-summary:nth-child(odd) .btn-summary .name, .theme-hub .section-world .tile-pos-home .mission-summary:nth-child(odd) .btn-summary .subname, .theme-hub .section-world .tile-pos-home .mission-summary:nth-child(odd) .btn-summary .level-block, .theme-hub .section-world .tile-pos-home .mission-summary:nth-child(odd) .btn-summary .progression-block, .theme-hub .section-world .tile-pos-home .mission-summary:nth-child(odd) .btn-summary .unlock-date-block { right: 70px; text-align: right; } .theme-hub .section-world .tile-pos-home .mission-summary:nth-child(even) .btn-summary .level-icon { left: 8px; } .theme-hub .section-world .tile-pos-home .mission-summary:nth-child(even) .btn-summary .name, .theme-hub .section-world .tile-pos-home .mission-summary:nth-child(even) .btn-summary .subname, .theme-hub .section-world .tile-pos-home .mission-summary:nth-child(even) .btn-summary .level-block, .theme-hub .section-world .tile-pos-home .mission-summary:nth-child(even) .btn-summary .progression-block, .theme-hub .section-world .tile-pos-home .mission-summary:nth-child(even) .btn-summary .unlock-date-block { left: 70px; text-align: left; } .theme-hub .section-world .tile-pos-home .mission-summary { width: 280px; height: 90px; position: absolute; z-index: 10; } .theme-hub .section-world .tile-pos-home .mission-summary .btn-summary { width: 280px; height: 90px; cursor: pointer; } .theme-hub .section-world .tile-pos-home .mission-summary .btn-summary:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .theme-hub .section-world .tile-pos-home .mission-summary .btn-summary.locked { cursor: default; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; } .theme-hub .section-world .tile-pos-home .mission-summary .btn-summary.locked:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; } .theme-hub .section-world .tile-pos-home .mission-summary .unlock-date-block { display: block; width: 170px; height: auto; top: 65px; position: absolute; } .theme-hub .section-world .tile-pos-home .mission-summary .unlock-date-block span { color: white; font-size: 15px; text-transform: uppercase; margin: 0 0 0 18px; position: relative; } .theme-hub .section-world .tile-pos-home .mission-summary .unlock-date-block span::before { content: ''; background-image: url(../../desktop/images/base-sprite.png?v=20240109145540); background-position: -942px -690px; width: 21px; height: 16px; background-repeat: no-repeat; overflow: hidden; display: block; display: block; position: absolute; left: -22px; top: 1px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .theme-hub .section-world .tile-pos-home .mission-summary .unlock-date-block span::before { background-image: url(../../desktop/images/base-sprite-retina.png?v=20240109145540); background-size: 1252px 1143px; } } .theme-hub .section-world .tile-pos-home .mission-summary .name { display: block; width: 200px; height: auto; font-size: 17px; color: #5e63bc; text-transform: uppercase; top: 30px; position: absolute; } .theme-hub .section-world .tile-pos-home .mission-summary .subname { display: block; width: 200px; height: auto; color: white; font-size: 15px; text-transform: uppercase; top: 48px; position: absolute; } .theme-hub .section-world .tile-pos-home .mission-summary .progression-block { display: block; width: 170px; height: auto; top: 65px; position: absolute; text-align: left; } .theme-hub .section-world .tile-pos-home .mission-summary .progression-block span { color: white; font-size: 15px; text-transform: uppercase; float: left; } .theme-hub .section-world .tile-pos-home .mission-summary .progression-block .progress-gauge.left-to-right { width: 129px; height: 7px; margin: 0; position: relative; padding-top: 0px; margin: 5px 0 0 37px; } .theme-hub .section-world .tile-pos-home .mission-summary .progression-block .progress-gauge.left-to-right .progress-highlightbar { width: 100%; height: 5px; left: auto; margin-left: 0; box-sizing: content-box; border: 1px solid rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5); } .theme-hub .section-world .tile-pos-home .mission-summary .progression-block .progress-gauge.left-to-right .progress-highlightbar .progress-highlight { width: 0; height: 5px; } .theme-hub .section-world .tile-pos-home .mission-summary .level-block { display: block; width: 172px; height: auto; top: 65px; position: absolute; text-align: left; } .theme-hub .section-world .tile-pos-home .mission-summary .level-block span { color: white; font-size: 15px; text-transform: uppercase; float: left; } .theme-hub .section-world .tile-pos-home .mission-summary .level-block .level-indicator { width: 131px; height: 7px; display: block; float: left; margin: 5px 0 0 6px; } .theme-hub .section-world .tile-pos-home .mission-summary .level-block .level-indicator.level-0 { background: url("../../desktop/images/world/normal/level-0.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary .level-block .level-indicator.level-0 { background: url("../../desktop/images/world/retina/level-0@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 131px; } } .theme-hub .section-world .tile-pos-home .mission-summary .level-block .level-indicator.level-1 { background: url("../../desktop/images/world/normal/level-1.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary .level-block .level-indicator.level-1 { background: url("../../desktop/images/world/retina/level-1@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 131px; } } .theme-hub .section-world .tile-pos-home .mission-summary .level-block .level-indicator.level-2 { background: url("../../desktop/images/world/normal/level-2.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary .level-block .level-indicator.level-2 { background: url("../../desktop/images/world/retina/level-2@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 131px; } } .theme-hub .section-world .tile-pos-home .mission-summary .level-block .level-indicator.level-3 { background: url("../../desktop/images/world/normal/level-3.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary .level-block .level-indicator.level-3 { background: url("../../desktop/images/world/retina/level-3@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 131px; } } .theme-hub .section-world .tile-pos-home .mission-summary .level-icon { width: 55px; height: 55px; top: 25px; position: absolute; } .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-1 { background: url("../../desktop/images/world/normal/world-level1-icon.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-1 { background: url("../../desktop/images/world/retina/world-level1-icon@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 55px; } } .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-2 { background: url("../../desktop/images/world/normal/world-level2-icon.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-2 { background: url("../../desktop/images/world/retina/world-level2-icon@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 55px; } } .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-3 { background: url("../../desktop/images/world/normal/world-level3-icon.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-3 { background: url("../../desktop/images/world/retina/world-level3-icon@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 55px; } } .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-4 { background: url("../../desktop/images/world/normal/world-level4-icon.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-4 { background: url("../../desktop/images/world/retina/world-level4-icon@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 55px; } } .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-5 { background: url("../../desktop/images/world/normal/world-level5-icon.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-5 { background: url("../../desktop/images/world/retina/world-level5-icon@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 55px; } } .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-6 { background: url("../../desktop/images/world/normal/world-level6-icon.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-6 { background: url("../../desktop/images/world/retina/world-level6-icon@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 55px; } } .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-1.passed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-2.passed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-3.passed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-4.passed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-5.passed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-6.passed { background: url("../../desktop/images/world/normal/world-level-passed-icon.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-1.passed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-2.passed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-3.passed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-4.passed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-5.passed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-6.passed { background: url("../../desktop/images/world/retina/world-level-passed-icon@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 55px; } } .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-1.failed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-2.failed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-3.failed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-4.failed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-5.failed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-6.failed { background: url("../../desktop/images/world/normal/world-level-failed-icon.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-1.failed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-2.failed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-3.failed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-4.failed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-5.failed, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-6.failed { background: url("../../desktop/images/world/retina/world-level-failed-icon@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 55px; } } .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-1.locked, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-2.locked, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-3.locked, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-4.locked, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-5.locked, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-6.locked { background: url("../../desktop/images/world/normal/world-level-locked-icon.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-1.locked, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-2.locked, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-3.locked, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-4.locked, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-5.locked, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-6.locked { background: url("../../desktop/images/world/retina/world-level-locked-icon@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 55px; } } .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-1.alert, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-2.alert, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-3.alert, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-4.alert, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-5.alert, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-6.alert { background: url("../../desktop/images/world/normal/world-level-alert-icon.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-1.alert, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-2.alert, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-3.alert, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-4.alert, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-5.alert, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-6.alert { background: url("../../desktop/images/world/retina/world-level-alert-icon@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 55px; } } .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-1.open, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-2.open, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-3.open, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-4.open, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-5.open, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-6.open { background: url("../../desktop/images/world/normal/world-level-open-icon.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-1.open, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-2.open, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-3.open, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-4.open, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-5.open, .theme-hub .section-world .tile-pos-home .mission-summary .level-icon.icon-6.open { background: url("../../desktop/images/world/retina/world-level-open-icon@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 55px; } } .theme-hub .section-world .tile-pos-home .mission-summary.area-1 { top: 0; left: 0; } .theme-hub .section-world .tile-pos-home .mission-summary.area-1 .btn-summary { background: url("../../desktop/images/world/normal/btn-world-level1.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary.area-1 .btn-summary { background: url("../../desktop/images/world/retina/btn-world-level1@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 90px; } } .theme-hub .section-world .tile-pos-home .mission-summary.area-2 { top: 0; right: 0; } .theme-hub .section-world .tile-pos-home .mission-summary.area-2 .btn-summary { background: url("../../desktop/images/world/normal/btn-world-level2.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary.area-2 .btn-summary { background: url("../../desktop/images/world/retina/btn-world-level2@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 90px; } } .theme-hub .section-world .tile-pos-home .mission-summary.area-3 { top: 50%; left: 0; margin-top: -37px; } .theme-hub .section-world .tile-pos-home .mission-summary.area-3 .btn-summary { background: url("../../desktop/images/world/normal/btn-world-level3.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary.area-3 .btn-summary { background: url("../../desktop/images/world/retina/btn-world-level3@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 90px; } } .theme-hub .section-world .tile-pos-home .mission-summary.area-4 { top: 50%; right: 0; margin-top: -37px; } .theme-hub .section-world .tile-pos-home .mission-summary.area-4 .btn-summary { background: url("../../desktop/images/world/normal/btn-world-level4.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary.area-4 .btn-summary { background: url("../../desktop/images/world/retina/btn-world-level4@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 90px; } } .theme-hub .section-world .tile-pos-home .mission-summary.area-5 { bottom: 0; left: 0; } .theme-hub .section-world .tile-pos-home .mission-summary.area-5 .btn-summary { background: url("../../desktop/images/world/normal/btn-world-level5.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary.area-5 .btn-summary { background: url("../../desktop/images/world/retina/btn-world-level5@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 90px; } } .theme-hub .section-world .tile-pos-home .mission-summary.area-6 { bottom: 0; right: 0; } .theme-hub .section-world .tile-pos-home .mission-summary.area-6 .btn-summary { background: url("../../desktop/images/world/normal/btn-world-level6.png?v=20240109145540") no-repeat top center transparent; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .theme-hub .section-world .tile-pos-home .mission-summary.area-6 .btn-summary { background: url("../../desktop/images/world/retina/btn-world-level6@2x.png?v=20240109145540") no-repeat top center transparent; background-size: auto 90px; } } .theme-hub .section-world .intro-progression-block { overflow: hidden; height: 18px; margin: 22px 0 0 0; } .theme-hub .section-world .intro-progression-block span { display: block; width: 42px; text-align: left; float: left; } .theme-hub .section-world .intro-progression-block .progress-gauge { position: relative; width: 90%; float: right; padding-top: 4px; width: 90%; } .theme-hub .section-world .intro-progression-block .progress-gauge .progress-highlightbar { width: 100%; } .theme-hub .section-world .tile-content .exam-info, .theme-hub .section-world .tile-content .mission-info { background: rgba(201, 213, 250, 0.8); border-radius: 20px; overflow: hidden; } .theme-hub .section-world .tile-content .exam-info .exam-description p, .theme-hub .section-world .tile-content .mission-info .exam-description p { font-size: 18px; line-height: 24px; text-align: left; margin: 0; } .theme-hub .section-world .tile-content .exam-info .button-block, .theme-hub .section-world .tile-content .mission-info .button-block { text-align: center; } .theme-hub .section-world .tile-content .exam-info .switch-level .btn-start.selected, .theme-hub .section-world .tile-content .mission-info .switch-level .btn-start.selected { background: white; } .theme-hub .section-world .tile-content .exam-info .switch-level .btn-start.selected:hover, .theme-hub .section-world .tile-content .mission-info .switch-level .btn-start.selected:hover { background: white; pointer-events: none; } .theme-hub .section-world .showdown-block { overflow: hidden; height: 600px; width: 550px; position: absolute; display: block; left: 50%; bottom: -120px; transform: translate(-50%, 0); } .theme-hub .section-world .showdown-block .title { display: block; position: absolute; } .theme-hub .section-world .showdown-block .showdown-button-holder { position: absolute; left: 245px; top: 300px; -webkit-animation: showdown-button-holder 1.8s infinite; animation: showdown-button-holder 1.8s infinite; } @-webkit-keyframes showdown-button-holder { 30% { transform: scale(1.025); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes showdown-button-holder { 30% { transform: scale(1.025); } 50% { -webkit-transform: scale(1); transform: scale(1); } } .theme-hub .section-world .showdown-block .ripple-holder { z-index: -1; left: 50%; top: 50%; position: absolute; } .theme-hub .section-world .showdown-block .ripple-holder .ripple { position: absolute; width: 280px; height: 280px; left: 50%; top: 50%; opacity: 0; margin: -140px 0 0 -140px; border-radius: 1000px; background-color: #E68FB2; -webkit-animation: ripple 1.8s infinite; animation: ripple 1.8s infinite; } @-webkit-keyframes ripple { 0% { opacity: 1; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } @keyframes ripple { 0% { opacity: 1; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } } .theme-hub .section-world .showdown-block .ripple-holder .ripple:nth-child(2) { animation-delay: .3s; -webkit-animation-delay: .3s; } .theme-hub .section-world .showdown-block .ripple-holder .ripple:nth-child(3) { animation-delay: .6s; -webkit-animation-delay: .6s; } .theme-hub .section-world .showdown-block .showdown-button { background: url("../../desktop/images/world/retina/icon-cleansing@2x.png?v=20240109145540") no-repeat top center transparent; width: 176px; height: 176px; z-index: 1; cursor: pointer; } .theme-hub .section-world .showdown-block .showdown-image { animation: animation-icon 1s 0s steps(8) infinite; top: 0; left: 0; position: absolute; height: 600px; width: 4400px; content: ''; background: url("../../desktop/images/world/retina/showdown@2x.png?v=20240109145540") no-repeat top center transparent; } @keyframes animation-icon { 0% { left: 0; } 80% { left: -4400px; } 80.001% { left: 0; } 100% { left: 0; } } .theme-hub .modal .modal-dialog .modal-content.showdown .btn-close { display: none; } .theme-hub .modal-dialog-showdown { background-image: url(../../desktop/images/theme-sprite.png?v=20240109145540); background-position: 0px 0px; width: 370px; height: 313px; background-repeat: no-repeat; overflow: hidden; display: block; margin: 0; pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); z-index: 1050; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .theme-hub .modal-dialog-showdown { background-image: url(../../desktop/images/theme-sprite-retina.png?v=20240109145540); background-size: 589px 589px; } } .theme-hub .modal-dialog-showdown .modal-content-showdown { pointer-events: auto; } .theme-hub .modal-dialog-showdown .modal-content-showdown .showdown-text { width: 200px; height: 184px; margin: 72px 0 0 140px; font-size: 15px; line-height: 18px; color: #5e63bc; } .theme-hub .modal-dialog-showdown .modal-content-showdown .showdown-text span { width: 220px; height: 184px; display: table-cell; vertical-align: middle; padding: 6px; } .theme-hub .modal-dialog-showdown .modal-content-showdown .btn-default { margin: 0 4px; } /*# sourceMappingURL=desktop.css.map */