/** Gebruik dit blok om defaults in te stellen voor instelbare variabelen. deze waarde wordt alleen gebruikt als er niet al een waarde is ingesteld in de SCORM zelf. */ /*For backwards compatability*/ /****** full buttons default ******/ /**************************/ /* Casus */ /* Achtergrond */ /* Perspectief */ /* Quiz */ /* Casus */ /* Achtergrond */ /* Perspectief */ /* Quiz */ /** uitleg fontSettings array: $fontSettings:( soort font: primari/secundair, mobiel, tablet, desktop, bold/niet bold) ) */ .content.case.type-casus { /*$caseTypeColor0;*/ /*$caseTypeColor0;*/ } .content.case.type-casus .wvTopper.stellingTopper .topper { background-image: url("img/scorm/icons/truefalse-icon_lightblue@2x.png"); } .content.case.type-casus .wvTopper.mpcTopper .topper { background-image: url("img/scorm/icons/mpc-icon_lightblue@2x.png"); } .content.case.type-casus .wvTopper.textTopper .topper { background-image: url("img/scorm/icons/textimage-icon_lightblue@2x.png"); } .content.case.type-casus .wvTopper.interviewTopper .topper { background-image: url("img/scorm/icons/interview-icon_lightblue@2x.png"); } .content.case.type-casus .wvTopper.openTopper .topper { background-image: url("img/scorm/icons/open-icon_lightblue@2x.png"); } .content.case.type-casus .wvTopper.videoTopper .topper { background-image: url("img/scorm/icons/video-icon_lightblue@2x.png"); } .content.case.type-casus .wvTopper.flashTopper .topper { background-image: url("img/scorm/icons/flashcards-icon_lightblue@2x.png"); } .content.case.type-casus .wvTopper.sliderTopper .topper { background-image: url("img/scorm/icons/slider-icon_lightblue@2x.png"); } .content.case.type-casus .wvTopper.quizTopper .topper { background-image: url("img/scorm/icons/open-icon_lightblue@2x.png"); } .content.case.type-casus .wvTopper.hotspotTopper .topper { background-image: url("img/scorm/icons/hotspot-icon_lightblue@2x.png"); } .content.case.type-casus .case-back-nav .arrow { background-image: url("img/scorm/icons/nav-back_lightblue@2x.png"); } .content.case.type-casus .mpcSection .mpc.multiple .option .sign:before { background-position-y: 0 !important; background-image: url("img/scorm/icons/checkmark-unchecked_lightblue@2x.png"); z-index: 1; } .content.case.type-casus .videoContainer .videoControls .toggleState .icon { background-position-y: 0; } .content.case.type-casus .videoContainer .videoControls .toggleState .icon.icon-play { background-image: url("img/scorm/icons/video-play_lightblue@2x.png"); } .content.case.type-casus .videoContainer .videoControls .toggleState .icon.icon-pause { background-image: url("img/scorm/icons/video-pause_lightblue@2x.png"); } .content.case.type-casus .default-circle.filled, .content.case.type-casus .section-bar, .content.case.type-casus .filler .filler-inner, .content.case.type-casus .hotspot .popup .body, .content.case.type-casus .mpcSection .mpc .option.selected .sign, .content.case.type-casus .mpcSection .mpc .option .sign .filler .filler-inner, .content.case.type-casus .toggle-blocks .block .title-bar .filler .filler-inner, .content.case.type-casus .flashcards .front .filler .filler-inner, .content.case.type-casus .flashcards .back, .content.case.type-casus .default-btn.filled, .content.case.type-casus .button-wrapper .button-block .title, .content.case.type-casus .button-wrapper .button-block .progress-inner, .content.case.type-casus .slider .slider-wrapper .rangeSlide.ui-slider, .content.case.type-casus .slider .slider-wrapper .ui-slider-handle, .content.case.type-casus .hotspot .dot, .content.case.type-casus .branchSection .button-wrapper .button-block.selected .button-title, .content.case.type-casus .branchSection .content-wrapper .button-progress, .content.case.type-casus .button-wrapper .button-block.selected .button-title, .content.case.type-casus .default-btn .filler .filler-inner, .content.case.type-casus .button-block .button-title .filler .filler-inner, .content.case.type-casus .case-scroll-header .arrow, .content.case.type-casus .case-scroll-header .progress .filler { background-color: #00bfdf !important; } .content.case.type-casus .default-circle:not(.filled), .content.case.type-casus .hotspot .popup .top, .content.case.type-casus .wvTopper, .content.case.type-casus .default-btn:not(.filled), .content.case.type-casus .mpcSection .mpc .option:not(.selected) .sign, .content.case.type-casus .textSection .quote, .content.case.type-casus .toggle-blocks .block .title-bar, .content.case.type-casus .flashcards .front .inner, .content.case.type-casus .case-back-nav, .content.case.type-casus .slider .slider-wrapper .rangeui-subcontent, .content.case.type-casus .button-wrapper .button-block, .content.case.type-casus .branchSection .button-wrapper .button-block .button-title, .content.case.type-casus .button-wrapper .button-block .button-title, .content.case.type-casus .case-scroll-header .title { color: #00bfdf !important; } .content.case.type-casus .caseBorderColor, .content.case.type-casus .default-circle, .content.case.type-casus .wvTopper, .content.case.type-casus .default-btn, .content.case.type-casus .mpcSection .mpc .option .sign, .content.case.type-casus .toggle-blocks .block .title-bar, .content.case.type-casus .flashcards .front .inner, .content.case.type-casus .videoContainer .videoControls .toggleState, .content.case.type-casus .button-wrapper .button-block .title, .content.case.type-casus .slider .slider-wrapper .rangeSlide.ui-slider:before, .content.case.type-casus .slider .slider-wrapper .rangeSlide.ui-slider:after, .content.case.type-casus .button-wrapper .button-block .button-title, .content.case.type-casus .button-wrapper .button-block .button-body, .content.case.type-casus .openVraagSection textarea { border-color: #00bfdf !important; } .content.case.type-achtergrond { /*$caseTypeColor0;*/ /*$caseTypeColor0;*/ } .content.case.type-achtergrond .wvTopper.stellingTopper .topper { background-image: url("img/scorm/icons/truefalse-icon_pink@2x.png"); } .content.case.type-achtergrond .wvTopper.mpcTopper .topper { background-image: url("img/scorm/icons/mpc-icon_pink@2x.png"); } .content.case.type-achtergrond .wvTopper.textTopper .topper { background-image: url("img/scorm/icons/textimage-icon_pink@2x.png"); } .content.case.type-achtergrond .wvTopper.interviewTopper .topper { background-image: url("img/scorm/icons/interview-icon_pink@2x.png"); } .content.case.type-achtergrond .wvTopper.openTopper .topper { background-image: url("img/scorm/icons/open-icon_pink@2x.png"); } .content.case.type-achtergrond .wvTopper.videoTopper .topper { background-image: url("img/scorm/icons/video-icon_pink@2x.png"); } .content.case.type-achtergrond .wvTopper.flashTopper .topper { background-image: url("img/scorm/icons/flashcards-icon_pink@2x.png"); } .content.case.type-achtergrond .wvTopper.sliderTopper .topper { background-image: url("img/scorm/icons/slider-icon_pink@2x.png"); } .content.case.type-achtergrond .wvTopper.quizTopper .topper { background-image: url("img/scorm/icons/open-icon_pink@2x.png"); } .content.case.type-achtergrond .wvTopper.hotspotTopper .topper { background-image: url("img/scorm/icons/hotspot-icon_pink@2x.png"); } .content.case.type-achtergrond .case-back-nav .arrow { background-image: url("img/scorm/icons/nav-back_pink@2x.png"); } .content.case.type-achtergrond .mpcSection .mpc.multiple .option .sign:before { background-position-y: 0 !important; background-image: url("img/scorm/icons/checkmark-unchecked_pink@2x.png"); z-index: 1; } .content.case.type-achtergrond .videoContainer .videoControls .toggleState .icon { background-position-y: 0; } .content.case.type-achtergrond .videoContainer .videoControls .toggleState .icon.icon-play { background-image: url("img/scorm/icons/video-play_pink@2x.png"); } .content.case.type-achtergrond .videoContainer .videoControls .toggleState .icon.icon-pause { background-image: url("img/scorm/icons/video-pause_pink@2x.png"); } .content.case.type-achtergrond .default-circle.filled, .content.case.type-achtergrond .section-bar, .content.case.type-achtergrond .filler .filler-inner, .content.case.type-achtergrond .hotspot .popup .body, .content.case.type-achtergrond .mpcSection .mpc .option.selected .sign, .content.case.type-achtergrond .mpcSection .mpc .option .sign .filler .filler-inner, .content.case.type-achtergrond .toggle-blocks .block .title-bar .filler .filler-inner, .content.case.type-achtergrond .flashcards .front .filler .filler-inner, .content.case.type-achtergrond .flashcards .back, .content.case.type-achtergrond .default-btn.filled, .content.case.type-achtergrond .button-wrapper .button-block .title, .content.case.type-achtergrond .button-wrapper .button-block .progress-inner, .content.case.type-achtergrond .slider .slider-wrapper .rangeSlide.ui-slider, .content.case.type-achtergrond .slider .slider-wrapper .ui-slider-handle, .content.case.type-achtergrond .hotspot .dot, .content.case.type-achtergrond .branchSection .button-wrapper .button-block.selected .button-title, .content.case.type-achtergrond .branchSection .content-wrapper .button-progress, .content.case.type-achtergrond .button-wrapper .button-block.selected .button-title, .content.case.type-achtergrond .default-btn .filler .filler-inner, .content.case.type-achtergrond .button-block .button-title .filler .filler-inner, .content.case.type-achtergrond .case-scroll-header .arrow, .content.case.type-achtergrond .case-scroll-header .progress .filler { background-color: #ed1651 !important; } .content.case.type-achtergrond .default-circle:not(.filled), .content.case.type-achtergrond .hotspot .popup .top, .content.case.type-achtergrond .wvTopper, .content.case.type-achtergrond .default-btn:not(.filled), .content.case.type-achtergrond .mpcSection .mpc .option:not(.selected) .sign, .content.case.type-achtergrond .textSection .quote, .content.case.type-achtergrond .toggle-blocks .block .title-bar, .content.case.type-achtergrond .flashcards .front .inner, .content.case.type-achtergrond .case-back-nav, .content.case.type-achtergrond .slider .slider-wrapper .rangeui-subcontent, .content.case.type-achtergrond .button-wrapper .button-block, .content.case.type-achtergrond .branchSection .button-wrapper .button-block .button-title, .content.case.type-achtergrond .button-wrapper .button-block .button-title, .content.case.type-achtergrond .case-scroll-header .title { color: #ed1651 !important; } .content.case.type-achtergrond .caseBorderColor, .content.case.type-achtergrond .default-circle, .content.case.type-achtergrond .wvTopper, .content.case.type-achtergrond .default-btn, .content.case.type-achtergrond .mpcSection .mpc .option .sign, .content.case.type-achtergrond .toggle-blocks .block .title-bar, .content.case.type-achtergrond .flashcards .front .inner, .content.case.type-achtergrond .videoContainer .videoControls .toggleState, .content.case.type-achtergrond .button-wrapper .button-block .title, .content.case.type-achtergrond .slider .slider-wrapper .rangeSlide.ui-slider:before, .content.case.type-achtergrond .slider .slider-wrapper .rangeSlide.ui-slider:after, .content.case.type-achtergrond .button-wrapper .button-block .button-title, .content.case.type-achtergrond .button-wrapper .button-block .button-body, .content.case.type-achtergrond .openVraagSection textarea { border-color: #ed1651 !important; } .content.case.type-perspectief { /*$caseTypeColor0;*/ /*$caseTypeColor0;*/ } .content.case.type-perspectief .wvTopper.stellingTopper .topper { background-image: url("img/scorm/icons/truefalse-icon_blue@2x.png"); } .content.case.type-perspectief .wvTopper.mpcTopper .topper { background-image: url("img/scorm/icons/mpc-icon_blue@2x.png"); } .content.case.type-perspectief .wvTopper.textTopper .topper { background-image: url("img/scorm/icons/textimage-icon_blue@2x.png"); } .content.case.type-perspectief .wvTopper.interviewTopper .topper { background-image: url("img/scorm/icons/interview-icon_blue@2x.png"); } .content.case.type-perspectief .wvTopper.openTopper .topper { background-image: url("img/scorm/icons/open-icon_blue@2x.png"); } .content.case.type-perspectief .wvTopper.videoTopper .topper { background-image: url("img/scorm/icons/video-icon_blue@2x.png"); } .content.case.type-perspectief .wvTopper.flashTopper .topper { background-image: url("img/scorm/icons/flashcards-icon_blue@2x.png"); } .content.case.type-perspectief .wvTopper.sliderTopper .topper { background-image: url("img/scorm/icons/slider-icon_blue@2x.png"); } .content.case.type-perspectief .wvTopper.quizTopper .topper { background-image: url("img/scorm/icons/open-icon_blue@2x.png"); } .content.case.type-perspectief .wvTopper.hotspotTopper .topper { background-image: url("img/scorm/icons/hotspot-icon_blue@2x.png"); } .content.case.type-perspectief .case-back-nav .arrow { background-image: url("img/scorm/icons/nav-back_blue@2x.png"); } .content.case.type-perspectief .mpcSection .mpc.multiple .option .sign:before { background-position-y: 0 !important; background-image: url("img/scorm/icons/checkmark-unchecked_blue@2x.png"); z-index: 1; } .content.case.type-perspectief .videoContainer .videoControls .toggleState .icon { background-position-y: 0; } .content.case.type-perspectief .videoContainer .videoControls .toggleState .icon.icon-play { background-image: url("img/scorm/icons/video-play_blue@2x.png"); } .content.case.type-perspectief .videoContainer .videoControls .toggleState .icon.icon-pause { background-image: url("img/scorm/icons/video-pause_blue@2x.png"); } .content.case.type-perspectief .default-circle.filled, .content.case.type-perspectief .section-bar, .content.case.type-perspectief .filler .filler-inner, .content.case.type-perspectief .hotspot .popup .body, .content.case.type-perspectief .mpcSection .mpc .option.selected .sign, .content.case.type-perspectief .mpcSection .mpc .option .sign .filler .filler-inner, .content.case.type-perspectief .toggle-blocks .block .title-bar .filler .filler-inner, .content.case.type-perspectief .flashcards .front .filler .filler-inner, .content.case.type-perspectief .flashcards .back, .content.case.type-perspectief .default-btn.filled, .content.case.type-perspectief .button-wrapper .button-block .title, .content.case.type-perspectief .button-wrapper .button-block .progress-inner, .content.case.type-perspectief .slider .slider-wrapper .rangeSlide.ui-slider, .content.case.type-perspectief .slider .slider-wrapper .ui-slider-handle, .content.case.type-perspectief .hotspot .dot, .content.case.type-perspectief .branchSection .button-wrapper .button-block.selected .button-title, .content.case.type-perspectief .branchSection .content-wrapper .button-progress, .content.case.type-perspectief .button-wrapper .button-block.selected .button-title, .content.case.type-perspectief .default-btn .filler .filler-inner, .content.case.type-perspectief .button-block .button-title .filler .filler-inner, .content.case.type-perspectief .case-scroll-header .arrow, .content.case.type-perspectief .case-scroll-header .progress .filler { background-color: #6279a5 !important; } .content.case.type-perspectief .default-circle:not(.filled), .content.case.type-perspectief .hotspot .popup .top, .content.case.type-perspectief .wvTopper, .content.case.type-perspectief .default-btn:not(.filled), .content.case.type-perspectief .mpcSection .mpc .option:not(.selected) .sign, .content.case.type-perspectief .textSection .quote, .content.case.type-perspectief .toggle-blocks .block .title-bar, .content.case.type-perspectief .flashcards .front .inner, .content.case.type-perspectief .case-back-nav, .content.case.type-perspectief .slider .slider-wrapper .rangeui-subcontent, .content.case.type-perspectief .button-wrapper .button-block, .content.case.type-perspectief .branchSection .button-wrapper .button-block .button-title, .content.case.type-perspectief .button-wrapper .button-block .button-title, .content.case.type-perspectief .case-scroll-header .title { color: #6279a5 !important; } .content.case.type-perspectief .caseBorderColor, .content.case.type-perspectief .default-circle, .content.case.type-perspectief .wvTopper, .content.case.type-perspectief .default-btn, .content.case.type-perspectief .mpcSection .mpc .option .sign, .content.case.type-perspectief .toggle-blocks .block .title-bar, .content.case.type-perspectief .flashcards .front .inner, .content.case.type-perspectief .videoContainer .videoControls .toggleState, .content.case.type-perspectief .button-wrapper .button-block .title, .content.case.type-perspectief .slider .slider-wrapper .rangeSlide.ui-slider:before, .content.case.type-perspectief .slider .slider-wrapper .rangeSlide.ui-slider:after, .content.case.type-perspectief .button-wrapper .button-block .button-title, .content.case.type-perspectief .button-wrapper .button-block .button-body, .content.case.type-perspectief .openVraagSection textarea { border-color: #6279a5 !important; } .content.case.type-quiz { /*$caseTypeColor0;*/ /*$caseTypeColor0;*/ } .content.case.type-quiz .wvTopper.stellingTopper .topper { background-image: url("img/scorm/icons/truefalse-icon_purple@2x.png"); } .content.case.type-quiz .wvTopper.mpcTopper .topper { background-image: url("img/scorm/icons/mpc-icon_purple@2x.png"); } .content.case.type-quiz .wvTopper.textTopper .topper { background-image: url("img/scorm/icons/textimage-icon_purple@2x.png"); } .content.case.type-quiz .wvTopper.interviewTopper .topper { background-image: url("img/scorm/icons/interview-icon_purple@2x.png"); } .content.case.type-quiz .wvTopper.openTopper .topper { background-image: url("img/scorm/icons/open-icon_purple@2x.png"); } .content.case.type-quiz .wvTopper.videoTopper .topper { background-image: url("img/scorm/icons/video-icon_purple@2x.png"); } .content.case.type-quiz .wvTopper.flashTopper .topper { background-image: url("img/scorm/icons/flashcards-icon_purple@2x.png"); } .content.case.type-quiz .wvTopper.sliderTopper .topper { background-image: url("img/scorm/icons/slider-icon_purple@2x.png"); } .content.case.type-quiz .wvTopper.quizTopper .topper { background-image: url("img/scorm/icons/open-icon_purple@2x.png"); } .content.case.type-quiz .wvTopper.hotspotTopper .topper { background-image: url("img/scorm/icons/hotspot-icon_purple@2x.png"); } .content.case.type-quiz .case-back-nav .arrow { background-image: url("img/scorm/icons/nav-back_purple@2x.png"); } .content.case.type-quiz .mpcSection .mpc.multiple .option .sign:before { background-position-y: 0 !important; background-image: url("img/scorm/icons/checkmark-unchecked_purple@2x.png"); z-index: 1; } .content.case.type-quiz .videoContainer .videoControls .toggleState .icon { background-position-y: 0; } .content.case.type-quiz .videoContainer .videoControls .toggleState .icon.icon-play { background-image: url("img/scorm/icons/video-play_purple@2x.png"); } .content.case.type-quiz .videoContainer .videoControls .toggleState .icon.icon-pause { background-image: url("img/scorm/icons/video-pause_purple@2x.png"); } .content.case.type-quiz .default-circle.filled, .content.case.type-quiz .section-bar, .content.case.type-quiz .filler .filler-inner, .content.case.type-quiz .hotspot .popup .body, .content.case.type-quiz .mpcSection .mpc .option.selected .sign, .content.case.type-quiz .mpcSection .mpc .option .sign .filler .filler-inner, .content.case.type-quiz .toggle-blocks .block .title-bar .filler .filler-inner, .content.case.type-quiz .flashcards .front .filler .filler-inner, .content.case.type-quiz .flashcards .back, .content.case.type-quiz .default-btn.filled, .content.case.type-quiz .button-wrapper .button-block .title, .content.case.type-quiz .button-wrapper .button-block .progress-inner, .content.case.type-quiz .slider .slider-wrapper .rangeSlide.ui-slider, .content.case.type-quiz .slider .slider-wrapper .ui-slider-handle, .content.case.type-quiz .hotspot .dot, .content.case.type-quiz .branchSection .button-wrapper .button-block.selected .button-title, .content.case.type-quiz .branchSection .content-wrapper .button-progress, .content.case.type-quiz .button-wrapper .button-block.selected .button-title, .content.case.type-quiz .default-btn .filler .filler-inner, .content.case.type-quiz .button-block .button-title .filler .filler-inner, .content.case.type-quiz .case-scroll-header .arrow, .content.case.type-quiz .case-scroll-header .progress .filler { background-color: #975485 !important; } .content.case.type-quiz .default-circle:not(.filled), .content.case.type-quiz .hotspot .popup .top, .content.case.type-quiz .wvTopper, .content.case.type-quiz .default-btn:not(.filled), .content.case.type-quiz .mpcSection .mpc .option:not(.selected) .sign, .content.case.type-quiz .textSection .quote, .content.case.type-quiz .toggle-blocks .block .title-bar, .content.case.type-quiz .flashcards .front .inner, .content.case.type-quiz .case-back-nav, .content.case.type-quiz .slider .slider-wrapper .rangeui-subcontent, .content.case.type-quiz .button-wrapper .button-block, .content.case.type-quiz .branchSection .button-wrapper .button-block .button-title, .content.case.type-quiz .button-wrapper .button-block .button-title, .content.case.type-quiz .case-scroll-header .title { color: #975485 !important; } .content.case.type-quiz .caseBorderColor, .content.case.type-quiz .default-circle, .content.case.type-quiz .wvTopper, .content.case.type-quiz .default-btn, .content.case.type-quiz .mpcSection .mpc .option .sign, .content.case.type-quiz .toggle-blocks .block .title-bar, .content.case.type-quiz .flashcards .front .inner, .content.case.type-quiz .videoContainer .videoControls .toggleState, .content.case.type-quiz .button-wrapper .button-block .title, .content.case.type-quiz .slider .slider-wrapper .rangeSlide.ui-slider:before, .content.case.type-quiz .slider .slider-wrapper .rangeSlide.ui-slider:after, .content.case.type-quiz .button-wrapper .button-block .button-title, .content.case.type-quiz .button-wrapper .button-block .button-body, .content.case.type-quiz .openVraagSection textarea { border-color: #975485 !important; } /* ("type-casus"); ("type-achtergrond"); ("type-perspectief"); ("type-quiz"); */ a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, td, video, tt, u, ul, var { background: transparent; font-size: 100%; margin: 0; padding: 0; border: 0; outline: 0; vertical-align: top; box-sizing: border-box; } blockquote, q { quotes: none; } table, table td { padding: 0; border: none; border-collapse: collapse; } article, aside, audio, canvas, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video { display: block; } mark, rp, rt, ruby, summary, time { display: inline; } * { box-sizing: border-box; } /* Old comments are moved to scorm_old-commented.scss */ html, body { height: 100%; width: 100%; overflow: hidden; } .contentScroller { height: 100%; width: 100%; overflow-y: scroll; padding-bottom: 0px; display: inline-block; overflow-x: hidden; } .scormWrap { height: 100%; width: 100%; } .frontenddata, .scorminit { height: 0px !important; } /* Keyframes */ @-webkit-keyframes nextHover { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 25% { -webkit-transform: translateY(-20%); transform: translateY(-20%); } 50% { -webkit-transform: translateY(160%); transform: translateY(160%); } 51% { -webkit-transform: translateY(-160%); transform: translateY(-160%); } } @keyframes nextHover { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 25% { -webkit-transform: translateY(-20%); transform: translateY(-20%); } 50% { -webkit-transform: translateY(160%); transform: translateY(160%); } 51% { -webkit-transform: translateY(-160%); transform: translateY(-160%); } } @-webkit-keyframes confirmHover { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.3); transform: scale(1.3); } } @keyframes confirmHover { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.3); transform: scale(1.3); } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.15); transform: scale(1.15); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.15); transform: scale(1.15); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes animateBorder { 0%, 50%, 100% { border: 2px solid transparent; } 25%, 75% { border: 2px solid rgba(221, 29, 33, 1); } } @keyframes animateBorder { 0%, 50%, 100% { border: 2px solid transparent; } 25%, 75% { border: 2px solid rgba(221, 29, 33, 1); } } .animateBorder { -webkit-animation: 3s ease animateBorder; animation: 3s ease animateBorder; } @-webkit-keyframes animateLine { 0%, 50%, 100% { border-color: rgba(0, 0, 0, 0.1); } 25%, 75% { border-color: rgba(221, 29, 33, 1); } } @keyframes animateLine { 0%, 50%, 100% { border-color: rgba(0, 0, 0, 0.1); } 25%, 75% { border-color: rgba(221, 29, 33, 1); } } .animateLine { -webkit-animation: 3s ease animateLine; animation: 3s ease animateLine; } @font-face { font-family: 'Roboto'; src: url('fonts/client/Roboto/Roboto-Light.eot'); src: url('fonts/client/Roboto/Roboto-Light.eot?#iefix') format('embedded-opentype'), url('fonts/client/Roboto/Roboto-Light.woff2') format('woff2'), url('fonts/client/Roboto/Roboto-Light.woff') format('woff'), url('fonts/client/Roboto/Roboto-Light.ttf') format('truetype'), url('fonts/client/Roboto/Roboto-Light.svg#Roboto-Light') format('svg'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Roboto'; src: url('fonts/client/Roboto/Roboto-Regular.eot'); src: url('fonts/client/Roboto/Roboto-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/client/Roboto/Roboto-Regular.woff2') format('woff2'), url('fonts/client/Roboto/Roboto-Regular.woff') format('woff'), url('fonts/client/Roboto/Roboto-Regular.ttf') format('truetype'), url('fonts/client/Roboto/Roboto-Regular.svg#Roboto-Regular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Roboto'; src: url('fonts/client/Roboto/Roboto-Bold.eot'); src: url('fonts/client/Roboto/Roboto-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/client/Roboto/Roboto-Bold.woff2') format('woff2'), url('fonts/client/Roboto/Roboto-Bold.woff') format('woff'), url('fonts/client/Roboto/Roboto-Bold.ttf') format('truetype'), url('fonts/client/Roboto/Roboto-Bold.svg#Roboto-Bold') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'ProximaNova'; src: url('fonts/client/ProximaNova/proxima_nova_bold-webfont.eot'); src: url('fonts/client/ProximaNova/proxima_nova_bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/client/ProximaNova/proxima_nova_bold-webfont.woff2') format('woff2'), url('fonts/client/ProximaNova/proxima_nova_bold-webfont.woff') format('woff'), url('fonts/client/ProximaNova/proxima_nova_bold-webfont.ttf') format('truetype'), url('fonts/client/ProximaNova/proxima_nova_bold-webfont.svg#proxima_nova_rgbold') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'ProximaNova'; src: url('fonts/client/ProximaNova/proxima_nova_reg-webfont.eot'); src: url('fonts/client/ProximaNova/proxima_nova_reg-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/client/ProximaNova/proxima_nova_reg-webfont.woff2') format('woff2'), url('fonts/client/ProximaNova/proxima_nova_reg-webfont.woff') format('woff'), url('fonts/client/ProximaNova/proxima_nova_reg-webfont.ttf') format('truetype'), url('fonts/client/ProximaNova/proxima_nova_reg-webfont.svg#proxima_nova_rgregular') format('svg'); font-weight: normal; font-style: normal; } /* Text rendering */ * { text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -webkit-text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; box-sizing: border-box; } html, body { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* Body */ body { font: normal 16px / 28px 'Poppins', Arial, sans-serif; color: #00464d; text-rendering: optimizeLegibility; width: 100%; overflow: hidden; -webkit-overflow-scrolling: touch; } /* Default styles */ a { color: #00464d; text-decoration: underline; } a:hover, a:active { outline: 0; } .clear { clear: both; height: 0; overflow: hidden; } h1 { color: #00464d; margin: 0 0 24px; font-weight: bold; } @media screen and (max-width: 768px) { h1 { font: bold 28px 'Poppins', sans-serif !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { h1 { font: bold 28px 'Poppins', sans-serif !important; } } @media screen and (min-width: 1024px) { h1 { font: bold 28px 'Poppins', sans-serif !important; } } h2 { color: #00464d; margin: 0 0 30px; } @media screen and (max-width: 768px) { h2 { font: bold 28px 'Poppins', sans-serif !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { h2 { font: bold 28px 'Poppins', sans-serif !important; } } @media screen and (min-width: 1024px) { h2 { font: bold 28px 'Poppins', sans-serif !important; } } h3 { color: #00464d; margin: 0 0 8px; } p { margin: 0 0 28px; } h1 p, h2 p, h3 p { margin: 0; } .align-center { text-align: center; } .align-left { text-align: left; } .align-right { text-align: right; } .initial-hidden { display: none !important; } .error { color: red; } .inlineblock { display: inline-block; } .action { margin: 0 auto; width: 960px; } .dummy { display: none !important; } .fullwidth { width: 100%; } .no-border { border: 0 !important; } .textItalic { font-style: italic; } .textBold { font-weight: bold; } ul { list-style: none; padding: 0; margin: 0 0 0 0; } li { padding-left: 1.2em; position: relative; } .imgContainer img { max-width: 100%; } .section .imgContainer.wide { width: calc(100% - -200px); margin-left: -100px; border-radius: 3px; overflow: hidden; margin-bottom: 20px; text-align: center; } .section .imgContainer.wide img { margin-bottom: 0; } .bgImg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } ul li:before { content: "\25CF"; color: #00464d; width: 1.2em; margin-left: -1.2em; margin-top: -1px; position: absolute; } ul.unsetBulletColor li:before, .feedback ul.unsetBulletColor li:before, .hotspot .popup ul.unsetBulletColor li:before { color: unset !important; } .feedback ul li:before, .hotspot .popup ul li:before { color: #fff; } .mlSelectBox li:before { display: none; } ol > li { margin-left: 1em; padding: 0; } ol > li:before { content: "" !important; margin: 0 !important; padding-right: 0 !important; } /* Font sizing */ .font-16 { font-size: 16px; } .font-50 { font-size: 50px; } /* Rounded corners */ .exsmall-rounded, .small-rounded, .medium-rounded, .large-rounded { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } .noRadius { border-radius: 0 !important; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; } /* Letter spacing */ /* PS Spacing to Pixels */ /* X * S / 1000 = P */ /* X = PS letter spacing, S = font size in pixels, P = result */ .lt-spacing-20 { letter-spacing: 1px; } .lt-spacing-50 { letter-spacing: 1.9px; } /* Line height */ .lh-22 { line-height: 22px; } .lh-62 { line-height: 62px; } .scormicon { display: inline-block; font-size: 28px; line-height: inherit; } .scormicon:before { font-family: "scormicons", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; text-transform: none; color: inherit; } .scormicon-arrow-down:before { content: "\E001"; } .scormicon-check:before { content: "\E002"; } .scormicon-chevron-down:before { content: "\E003"; } .scormicon-correct:before { content: "\E004"; } .scormicon-earth:before { content: "\E005"; } .scormicon-home:before { content: "\E006"; } .scormicon-incorrect:before { content: "\E007"; } .scormicon-info:before { content: "\E008"; } .scormicon-pdf:before { content: "\E009"; } .scormicon-pencil:before { content: "\E00A"; } .scormicon-pointer-down:before { content: "\E00B"; } .scormicon-print:before { content: "\E00C"; } .scormicon-user:before { content: "\E00D"; } .scormicon-users:before { content: "\E00E"; } .scormicon-reload:before { background-color: currentColor; content: ""; -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 20'%3E%3Cpath d='M4.52124 15.6088C6.75071 17.8382 10.3793 17.8382 12.6088 15.6088C14.8382 13.3793 14.8382 9.75069 12.6088 7.52123C11.4936 6.40605 10.0306 5.86329 8.56681 5.86418L8.56501 9.76777L4.07194 5.27469L8.5686 0.785212L8.56771 3.95283C9.56806 3.94893 10.5593 4.14313 11.4842 4.52424C12.4091 4.90534 13.2495 5.46581 13.9567 6.17331C14.6647 6.88135 15.2264 7.72193 15.6096 8.64704C15.9928 9.57214 16.19 10.5637 16.19 11.565C16.19 12.5663 15.9928 13.5579 15.6096 14.483C15.2264 15.4081 14.6647 16.2486 13.9567 16.9567C13.2487 17.6647 12.4081 18.2264 11.483 18.6096C10.5579 18.9928 9.56634 19.19 8.56501 19.19C7.56368 19.19 6.57216 18.9928 5.64705 18.6096C4.72194 18.2264 3.88137 17.6647 3.17332 16.9567C1.90047 15.6827 1.11999 13.999 0.970293 12.2044L2.88413 12.1562C3.0111 13.4174 3.55589 14.6434 4.52124 15.6088Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 20'%3E%3Cpath d='M4.52124 15.6088C6.75071 17.8382 10.3793 17.8382 12.6088 15.6088C14.8382 13.3793 14.8382 9.75069 12.6088 7.52123C11.4936 6.40605 10.0306 5.86329 8.56681 5.86418L8.56501 9.76777L4.07194 5.27469L8.5686 0.785212L8.56771 3.95283C9.56806 3.94893 10.5593 4.14313 11.4842 4.52424C12.4091 4.90534 13.2495 5.46581 13.9567 6.17331C14.6647 6.88135 15.2264 7.72193 15.6096 8.64704C15.9928 9.57214 16.19 10.5637 16.19 11.565C16.19 12.5663 15.9928 13.5579 15.6096 14.483C15.2264 15.4081 14.6647 16.2486 13.9567 16.9567C13.2487 17.6647 12.4081 18.2264 11.483 18.6096C10.5579 18.9928 9.56634 19.19 8.56501 19.19C7.56368 19.19 6.57216 18.9928 5.64705 18.6096C4.72194 18.2264 3.88137 17.6647 3.17332 16.9567C1.90047 15.6827 1.11999 13.999 0.970293 12.2044L2.88413 12.1562C3.0111 13.4174 3.55589 14.6434 4.52124 15.6088Z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; display: inherit; width: 17px; height: 20px; font-size: 0; line-height: 1; } .scormicon-reload-light:before { background-color: currentColor; content: ""; -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 20'%3E%3Cpath d='M4.52124 15.6088C6.75071 17.8382 10.3793 17.8382 12.6088 15.6088C14.8382 13.3793 14.8382 9.75069 12.6088 7.52123C11.4936 6.40605 10.0306 5.86329 8.56681 5.86418L8.56501 9.76777L4.07194 5.27469L8.5686 0.785212L8.56771 3.95283C9.56806 3.94893 10.5593 4.14313 11.4842 4.52424C12.4091 4.90534 13.2495 5.46581 13.9567 6.17331C14.6647 6.88135 15.2264 7.72193 15.6096 8.64704C15.9928 9.57214 16.19 10.5637 16.19 11.565C16.19 12.5663 15.9928 13.5579 15.6096 14.483C15.2264 15.4081 14.6647 16.2486 13.9567 16.9567C13.2487 17.6647 12.4081 18.2264 11.483 18.6096C10.5579 18.9928 9.56634 19.19 8.56501 19.19C7.56368 19.19 6.57216 18.9928 5.64705 18.6096C4.72194 18.2264 3.88137 17.6647 3.17332 16.9567C1.90047 15.6827 1.11999 13.999 0.970293 12.2044L2.88413 12.1562C3.0111 13.4174 3.55589 14.6434 4.52124 15.6088Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 20'%3E%3Cpath d='M4.52124 15.6088C6.75071 17.8382 10.3793 17.8382 12.6088 15.6088C14.8382 13.3793 14.8382 9.75069 12.6088 7.52123C11.4936 6.40605 10.0306 5.86329 8.56681 5.86418L8.56501 9.76777L4.07194 5.27469L8.5686 0.785212L8.56771 3.95283C9.56806 3.94893 10.5593 4.14313 11.4842 4.52424C12.4091 4.90534 13.2495 5.46581 13.9567 6.17331C14.6647 6.88135 15.2264 7.72193 15.6096 8.64704C15.9928 9.57214 16.19 10.5637 16.19 11.565C16.19 12.5663 15.9928 13.5579 15.6096 14.483C15.2264 15.4081 14.6647 16.2486 13.9567 16.9567C13.2487 17.6647 12.4081 18.2264 11.483 18.6096C10.5579 18.9928 9.56634 19.19 8.56501 19.19C7.56368 19.19 6.57216 18.9928 5.64705 18.6096C4.72194 18.2264 3.88137 17.6647 3.17332 16.9567C1.90047 15.6827 1.11999 13.999 0.970293 12.2044L2.88413 12.1562C3.0111 13.4174 3.55589 14.6434 4.52124 15.6088Z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; display: inherit; width: 17px; height: 20px; font-size: 0; line-height: 1; } .quizFeedback button, .fullbuttons .quizFeedback button.button-bordered.jsReset, .fullbuttons .quizFeedback button.button-bordered.jsShowFB { margin-bottom: 15px; } .fullbuttons .quizFeedback button.button-bordered.jsShowFB { padding-bottom: 10px; padding-top: 10px; } .fullbuttons .quizFeedback button.button-bordered.jsReset { padding-top: 4px; padding-bottom: 3px; } /* Button */ [class^="button"] { display: inline-block; box-sizing: border-box; outline: none; min-width: 50px; padding: 15px 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; text-align: center; position: relative; -webkit-transition: all 0.1s; transition: all 0.1s; overflow: hidden; vertical-align: top; cursor: pointer; } @media screen and (max-width: 768px) { [class^="button"] { font: normal 16px 'Poppins', sans-serif !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { [class^="button"] { font: normal 16px 'Poppins', sans-serif !important; } } @media screen and (min-width: 1024px) { [class^="button"] { font: normal 16px 'Poppins', sans-serif !important; } } @media screen and (max-width: 768px) { [class^="button"].button-bordered .text { font: normal 16px 'Poppins', sans-serif !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { [class^="button"].button-bordered .text { font: normal 16px 'Poppins', sans-serif !important; } } @media screen and (min-width: 1024px) { [class^="button"].button-bordered .text { font: normal 16px 'Poppins', sans-serif !important; } } [class^="button"] p { margin: 0; } [class^="button"] .fa { line-height: normal; font-size: 16px; } [class^="button"] .scormicon { font-size: 28px; } .button-header.overlayTrigger { box-sizing: border-box; } .button-header .scormicon { line-height: 17px; } .button-header .scormicon:before { line-height: 1; } [class^="button"]:first-letter { text-transform: capitalize; } .switchText .text { display: none; } [class^="button"].disabled, [class^="button"]:disabled { -webkit-transform: none; transform: none; cursor: not-allowed; } [class^="button"].disabled .scormicon, [class^="button"]:disabled .scormicon { -webkit-animation: none; animation: none; } button:focus { outline: none; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } .button-header, .button-home { margin-right: 2px; border-color: #d8d5d2; } .button-start { color: #fff !important; } .button-bordered, .button-next, .button-header, .button-home, .button-header-home, .button-header-repo { background: transparent; border: 1px solid #a8a8a8; color: #00464d; line-height: 17px !important; } .button-mute { background-color: #00464d; border-color: #00464d; } .button-mute .scormicon-mute:before { background: url(img/scorm/mute.png) center 6px no-repeat; color: transparent; content: "--"; } .button-mute.muted .scormicon-mute:before { background-position: center -27px; } .button-bordered.textButton { color: #fff !important; } .button-bordered .scormicon:before { color: inherit; } .button-bordered { font-weight: bold; } .caseBlock .button-bordered { color: #00464d; border-color: #00464d; } .caseBlock.lockedCase .button-bordered { border-color: #d7d7d7; color: #d7d7d7; } .button-bordered.again { border-color: #d7d7d7; } .button-bordered.continue { background: #00464d; border-color: #00464d; } .button-bordered.gray { border-color: #f0f0f0; } .button-icon, .button-header, .button-home, .button-scrolldown { padding: 15px 0; min-width: 50px; box-sizing: content-box; } .button-header { padding: 0; margin: 0; } .textButton { padding: 15px 10px; } .button-header, .button-home { border-color: #d8d5d2; } .button-wide { min-width: 100px; } .button-solid, .button-confirm, .button-next, .button-scrolldown { background: #44de26; border: 1px solid #44de26; color: #00464d; padding: 5px 0 0 0; margin: 0; } .button-solid .scormicon:before { color: #fff; } .button-grey-bordered { background: transparent; border: 1px solid #a8a8a8; color: #a8a8a8; } .button-grey-bordered:hover { background: transparent; border-color: #999; color: #999; } .header-button-wrapper { display: inline-block; position: relative; } .button-header-home, .button-header-repo { border-color: #d8d5d2; opacity: 0; width: 50px; padding: 17px 0; top: 0; right: 0; height: 50px; } .button-header-home .btn-text, .button-header-repo .btn-text { font-family: 'Poppins'; } .button-header-home .scormicon { font-size: 16px; } .button-bordered, .button-next, .button-home { color: #a8a8a8; font-weight: bold; } .button-bordered:hover, .button-next:hover, .button-home:hover, .button-bordered.hoverState, .button-next.hoverState, .button-home.hoverState { background: #44de26; border-color: #44de26 !important; color: #fff; } .button-icon .custom-icon { display: inline-block; width: 30px; height: 23px; background-size: cover; position: relative; } .caseBlock .button-bordered.hover { background: #00464d; border-color: #00464d; } .jsNext:hover, .checkAnswer:hover, .jsPrint:hover { -webkit-transform: scale(1.04); transform: scale(1.04); } .jsNext:hover .scormicon, .jsPrint:hover .scormicon { -webkit-animation: 0.6s ease nextHover; animation: 0.6s ease nextHover; } .buttonwrapper { padding: 0; display: block; } .fullbuttons:not(.no-border) .buttonwrapper { padding-bottom: 4px; } .section.intro.leftStyle .startscreenIntroduction .section-inner .buttonwrapper { text-align: left; } .section.intro.netflixStyle .startscreenIntroduction .section-inner .buttonwrapper { text-align: left; } .checkAnswer:hover .scormicon { -webkit-animation: 0.3s ease 0.1s confirmHover; animation: 0.3s ease 0.1s confirmHover; } .button-header:hover, .button-header-home:hover { border-color: #a8a8a8; } .button-header-repo, .button-header-home { display: none; } .button-solid:hover, .button-solid.hoverState, .button-confirm:hover, .button-next:hover, .button-scrolldown:hover { background: #44de26; border-color: #44de26; overflow: hidden; } .button-scrolldown:hover { -webkit-transform: scale(1.04); transform: scale(1.04); } .button-scrolldown:hover .scormicon { -webkit-animation: 0.6s ease-in-out nextHover; animation: 0.6s ease-in-out nextHover; } .button-scrolldown:active { -webkit-transition-duration: 0.05s; transition-duration: 0.05s; -webkit-transform: scale(0.99); transform: scale(0.99); } .button-solid.disabled, .disabled.button-wide, .disabled.button-confirm, .disabled.button-next, .disabled.button-scrolldown, .button-solid:disabled, .button-wide:disabled, .button-confirm:disabled, .button-next:disabled, .button-scrolldown:disabled { background: #a8a8a8; border-color: #a8a8a8; } .button-bordered.disabled, .disabled.button-next, .disabled.button-header, .disabled.button-home, .button-bordered:disabled, .button-next:disabled, .button-header:disabled, .button-home:disabled { background: transparent; border-color: #a8a8a8; color: #a8a8a8; } .center-button { display: block; margin-left: auto !important; margin-right: auto !important; margin-top: 0; margin-bottom: 0; } .jsPrint { position: absolute; left: 0; } .jsPdf { position: absolute; left: 65px; } /* Preloader */ .preloader { position: fixed; background: #fff; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; } .preloader .loader-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, -50%); /* IE 9 */ transform: translate(-50%, -50%); /* IE 10, Fx 16+, Op 12.1+ */ } .spinner { display: block; margin: 0 auto; width: 128px; height: 128px; position: relative; text-align: center; transform-origin: center; } .spinner .bulb { display: inline-block; background-color: #00464d; /* The Fallback */ background-color: rgba(0, 70, 77, 0.3); width: 22px; height: 22px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: absolute; -webkit-transform: translate(-50%, -50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, -50%); /* IE 9 */ transform: translate(-50%, -50%); /* IE 10, Fx 16+, Op 12.1+ */ } .spinner .bulb.bulb1 { top: 0; left: 50%; -webkit-transform: translate(-50%, 0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, 0); /* IE 9 */ transform: translate(-50%, 0); /* IE 10, Fx 16+, Op 12.1+ */ animation: spin 1.2s linear infinite alternate; animation-delay: 0.1s; } .spinner .bulb.bulb2 { top: 19px; right: 17px; animation: spin 1.2s linear infinite alternate; animation-delay: 0.2s; } .spinner .bulb.bulb3 { top: 39px; right: 0; animation: spin 1.2s linear infinite alternate; animation-delay: 0.3s; } .spinner .bulb.bulb4 { right: 0; top: 50%; -webkit-transform: translate(0, -50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(0, -50%); /* IE 9 */ transform: translate(0, -50%); /* IE 10, Fx 16+, Op 12.1+ */ animation: spin 1.2s linear infinite alternate; animation-delay: 0.4s; } .spinner .bulb.bulb5 { top: calc(50% + 27px); left: calc(50% + 47px); animation: spin 1.2s linear infinite alternate; animation-delay: 0.5s; } .spinner .bulb.bulb6 { top: calc(50% + 46px); left: calc(50% + 27px); animation: spin 1.2s linear infinite alternate; animation-delay: 0.6s; } .spinner .bulb.bulb7 { bottom: 0; left: 50%; -webkit-transform: translate(-50%, 0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, 0); /* IE 9 */ transform: translate(-50%, 0); /* IE 10, Fx 16+, Op 12.1+ */ animation: spin 1.2s linear infinite alternate; animation-delay: 0.7s; } .spinner .bulb.bulb8 { bottom: 7px; left: calc(50% - 27px); -webkit-transform: translate(-50%, 0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, 0); /* IE 9 */ transform: translate(-50%, 0); /* IE 10, Fx 16+, Op 12.1+ */ animation: spin 1.2s linear infinite alternate; animation-delay: 0.8s; } .spinner .bulb.bulb9 { bottom: 27px; left: 19px; -webkit-transform: translate(-50%, 0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, 0); /* IE 9 */ transform: translate(-50%, 0); /* IE 10, Fx 16+, Op 12.1+ */ animation: spin 1.2s linear infinite alternate; animation-delay: 0.9s; } .spinner .bulb.bulb10 { top: 50%; left: 0; -webkit-transform: translate(0, -50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(0, -50%); /* IE 9 */ transform: translate(0, -50%); /* IE 10, Fx 16+, Op 12.1+ */ animation: spin 1.2s linear infinite alternate; animation-delay: 1s; } .spinner .bulb.bulb11 { top: 37px; left: 20px; animation: spin 1.2s linear infinite alternate; animation-delay: 1.1s; } .spinner .bulb.bulb12 { top: 18px; left: 39px; animation: spin 1.2s linear infinite alternate; animation-delay: 1.2s; } @keyframes spin { 0% { background-color: #00464d; /* The Fallback */ background-color: rgba(0, 70, 77, 0.3); } 50% { background: #00464d; } 100% { background-color: #00464d; /* The Fallback */ background-color: rgba(0, 70, 77, 0.3); } } /* Header */ .header { position: fixed; top: 0; width: calc(100% - 200px); left: 50%; min-width: 1024px; max-width: 100%; z-index: 1000; background: #fff; border-bottom: 3px solid rgba(0, 0, 0, 0.1); height: 90px; -webkit-transform: translateX(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateX(-50%); /* IE 9 */ transform: translateX(-50%); /* IE 10, Fx 16+, Op 12.1+ */ -webkit-border-radius: 0px 0 3px 3px; -moz-border-radius: 0px 0 3px 3px; -ms-border-radius: 0px 0 3px 3px; border-radius: 0px 0 3px 3px; } .header:not(.fullHeader) { padding-right: 0 !important; } .header .header-title-outer { padding: 25px 0; overflow: hidden; } .header .button-header-home .btn-text, .header .button-header-repo .btn-text { display: none; } .header .header-right .button-header .btn-text { display: none; font-family: 'Poppins'; } @media screen and (min-width: 1024px) { .header .menu.circle-menu .section-inner .module-title { display: none; } } .header.gamification { border: 0; -webkit-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.1); } .header.gamification .header-right { margin-right: 20px; } .header.fullHeader { width: 100%; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; border-radius: 0px; } .header.circle-header { -webkit-transition: background 750ms; -moz-transition: background 750ms; -o-transition: background 750ms; -ms-transition: background 750ms; transition: background 750ms; } .header.circle-header .ml-total-progress, .header.circle-header .ml-total-progress .progress-text, .header.circle-header .button-header-repo, .header.circle-header .button-header-home, .header.circle-header .header-right .mlSelectBox, .header.circle-header .header-right .button-header { -webkit-transition: color 750ms ease-in-out; -moz-transition: color 750ms ease-in-out; -o-transition: color 750ms ease-in-out; -ms-transition: color 750ms ease-in-out; transition: color 750ms ease-in-out; } .header.circle-header .dropdown-list { left: 0; border-radius: 5px; } .header-hidden-overlay { position: fixed; top: 0; left: 100px; right: 100px; height: 0; cursor: pointer; z-index: 1500; } .header-inner { height: 100%; position: relative; display: flex; align-items: center; } .header-logo { margin: auto; width: 290px; position: relative; margin-right: 20px; height: 100%; -webkit-border-radius: 0 0 0 3px; -moz-border-radius: 0 0 0 3px; -ms-border-radius: 0 0 0 3px; border-radius: 0 0 0 3px; overflow: hidden; } .caseHeader .header-logo .logo { cursor: pointer; } .header .moduleTitle { color: #00464d; font-size: 22px; position: absolute; left: 160px; top: 50%; transform: translateY(-50%); } .header .moduleTitle p { margin: 0; } @media screen and (max-width: 1024px) { .header .moduleTitle { display: none; } } .content .section img.logo.logo-mobile { display: none; } .header-logo .logo { max-width: 100px; position: absolute; top: 50%; margin-left: 20px; -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(-50%); /* IE 9 */ transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */ } .header-logo .logo.logo-light { display: none; } .header-logo .logo.logo-mobile { display: none; } .header-logo.wide .logo { margin-left: 5px; max-width: 130px; } .header-logo.logo-top .logo { top: 0; -webkit-transform: translateY(0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(0); /* IE 9 */ transform: translateY(0); /* IE 10, Fx 16+, Op 12.1+ */ } .header-title-outer { flex-grow: 1; margin: auto; margin-right: 25px; } .header-title { display: block; color: #00464d; font-size: 18px; width: 100%; opacity: 0; margin: 0 auto; } .header-title .title { display: block; cursor: pointer; } .header-title .title p { display: inline-block; margin: 0; } .header-title .title .titleGroup { display: inline-block; } @media screen and (max-width: 768px) { .header-title .title .titleGroup { font: normal 18px 'Poppins', sans-serif !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .header-title .title .titleGroup { font: normal 18px 'Poppins', sans-serif !important; } } @media screen and (min-width: 1024px) { .header-title .title .titleGroup { font: normal 18px 'Poppins', sans-serif !important; } } .header-title .title > .titleGroup { position: relative; padding-right: 15px; } .header-title .title .scormicon { font-size: 18px; position: absolute; right: 0; top: 50%; margin-top: -15px; } .header-title .title .scormicon.scormicon-users { color: #525199; } .header-title-inner { width: 100%; display: inline-block; } .header-image { overflow: hidden; } .header-image img { max-height: 87px; } .header-right { white-space: nowrap; display: inline-block; margin: auto 40px auto 0; height: 50px; } .header-right .total-progress { display: none; text-transform: capitalize; text-align: center; margin: 0 10px 0 0; line-height: 20px; font-size: 14px; } .header-right .total-progress .status { text-align: center; color: #00464d; line-height: 32px; font-weight: bold; font-size: 26px; } .header-right .score-points { display: inline-block; text-align: center; line-height: 32px; margin: 0px 10px 0px 0px; } .header-right .score-points span { display: block; color: #00464d; font-size: 26px; font-weight: bold; } .header-right .score-points div { line-height: 20px; font-size: 14px; } .header-right .score-points div p { margin: 0; } .header-right .score-points.compact { background: #00464d; line-height: 41px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; padding: 5px 8px 3px; margin: 0; min-width: 50px; } .header-right .score-points.compact span { font-weight: normal; color: #fff; font-size: 20px; } .header-right .mlSelectBox { margin: 0 1px; } .header-right .button-header { min-height: 50px; } .header-right .homeBtn, .header-right .repoBtn { font-size: 20px; } .header-right .homeBtn:not(.active) { display: none; } .header-location { position: absolute; right: 40px; } .header.header-center .header-inner .caseImageWrapper { display: block; position: relative; width: 140px; height: 100%; overflow: hidden; margin-left: 0; } .header.header-center .header-inner .caseImageSmall { left: 0; } .header.header-center .header-inner .moduleTitle { left: 20px; } .header.header-center .header-inner .mobileProgress { position: absolute; bottom: -3px; left: 0; right: 0; } .header.header-center .header-inner .mobileProgress .progress { display: block; height: 3px; } .header.header-center .header-inner .header-title-outer { order: 1; margin-left: 20px; margin-right: 0; padding: 0; } .header.header-center .header-inner .header-title-outer .header-title { max-width: 270px; margin: 0; } .header.header-center .header-inner .header-title-outer .progress { display: none; } .header.header-center .header-inner .header-logo { width: 220px; order: 2; position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateX(-50%); /* IE 9 */ transform: translateX(-50%); /* IE 10, Fx 16+, Op 12.1+ */ } .header.header-center .header-inner .header-logo .logo { max-width: 168px; margin: 0; left: 50%; -webkit-transform: translate(-50%, -50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, -50%); /* IE 9 */ transform: translate(-50%, -50%); /* IE 10, Fx 16+, Op 12.1+ */ } @media screen and (min-width: 1024px) { .header.header-center .header-inner .header-logo .logo { max-width: 190px; } } .header.header-center .header-inner .header-logo.logo-top .logo { right: 0; margin: 0 auto; -webkit-transform: translate(-50%, 0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, 0); /* IE 9 */ transform: translate(-50%, 0); /* IE 10, Fx 16+, Op 12.1+ */ } .header.header-center .header-inner .header-right { order: 3; } .header.header-center .header-inner .header-location { order: 4; } .header.header-center .header-inner .header-image { order: 5; } @media screen and (max-width: 1024px) { .header.header-center .header-inner .caseImageWrapper { display: none; } } .header .caseImageSmall { position: absolute; height: 100%; top: 0; left: 140px; opacity: 0; -webkit-border-radius: 0 0 0 3px; -moz-border-radius: 0 0 0 3px; -ms-border-radius: 0 0 0 3px; border-radius: 0 0 0 3px; cursor: pointer; } .header .caseImageSmall img { width: auto; height: 100%; } /* Additional headers */ .main-header { position: relative; height: 485px; overflow: hidden; } .main-header .caseImage { height: 100%; position: relative; } .main-header .main-header-inner { margin: 0 auto; width: calc(100% - 80px); height: 100%; position: relative; max-width: 1183px; } .content:not(.case) .menu.bgmenu .main-header { height: 175px; min-height: auto !important; } @media screen and (max-width: 768px) { .content:not(.case) .menu.bgmenu .main-header .main-header-inner { min-height: 126px; } } .menu .lockedImage { display: none; } .menu .main-header { height: 650px; width: 100%; } .menu .menuImage { width: 100%; height: 650px; } .menu .main-header .caseImageSmall img { width: 100%; height: 100%; } .menu .compactData { display: none; } .menu.section .section-inner { max-width: 1263px; min-height: 700px; padding-top: 0; } .menu .caseType { display: none; } .menu .main-header .caseImage { height: 100%; } .menu .statusLabel .jsContinue, .menu .statusLabel .jsReset, .menu .statusLabel .jsLocked { display: none; } .menu .module-title { font-weight: bold; font-size: 18px; color: #a8a8a8; } .menu .module-title p { margin: 0; } .menu .module-title .caseType { position: absolute; top: 0; left: -100px; width: 100px; height: 100px; background: url('img/whiteShield.png') center no-repeat #00464d; border-radius: 4px 0 0 0; color: #00464d; padding: 25px 0; box-sizing: border-box; text-align: center; } .menu .module-title .caseType.teamCase { color: #525199; } .menu .menuIntro { position: absolute; bottom: 80px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; color: #fff; background: #fff; padding: 14px; width: 40%; } .menu .menuIntro p { margin: 0 0 10px; } .menu .menuIntro h1 { color: #fff; } .menu .caseType svg { display: none; } .menu .caseCompleted { display: none; } @media screen and (min-width: 1024px) { .menu .main-header-inner { max-width: 1024px; } } @media screen and (max-width: 768px) { .menu .menuIntro h1 { font: bold 28px 'Poppins', sans-serif !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .menu .menuIntro h1 { font: bold 28px 'Poppins', sans-serif !important; } } @media screen and (min-width: 1024px) { .menu .menuIntro h1 { font: bold 28px 'Poppins', sans-serif !important; } } .menu .menuIntro .menuDesc { font-size: 24px; line-height: 26px; } .menu.chapters .chapterTitle { font-size: 20px; } .menu.chapters .chapterTitle p { margin: 0; } .menu.chapters .main-header { height: 225px; } .menu.chapters .menuIntro { background: transparent; color: #fff; bottom: 0; padding: 0; } .menu.chapters .menuIntro h1 { color: #fff; font-weight: normal; } .menu.chapters .menuIntro .menuDesc { display: none; } .menu.chapters .caseBlock { position: relative; width: 100%; border-bottom: 0; } .menu.chapters .caseBlock .button-bordered, .menu.chapters .caseBlock .caseDesc { display: none; } .menu.chapters .caseBlock .caseBlock-inner { background-color: #00464d; /* The Fallback */ background-color: rgba(0, 70, 77, 0.7); color: #fff; position: absolute; width: 100%; bottom: 0; } .menu.chapters .caseBlock .caseTitle { color: #fff; font-weight: normal; font-size: 18px; margin: 0; } .menu.chapters .caseBlock .caseTitle p { margin-bottom: 0; } .menu.chapters .caseBlock .progress { background: rgba(255, 255, 255, 0.3); position: absolute; bottom: 28px; left: 14px; right: 14px; width: auto; } .menu.chapters .caseBlock .progress .progress-fill { background: #fff; } .menu.chapters .caseBlock .textBlock { margin-bottom: 28px; } .menu.chapters .caseBlock.completed img { opacity: 1; } .menu.chapters .caseBlock.completed .caseType { display: block; border-radius: 100%; background: #fff; width: 40px; height: 40px; line-height: 50px; top: 10px; right: 10px; box-shadow: 0px 0px 5px 1px #dcdcdc; } .menu.chapters .caseBlock.completed .caseType i { display: none; } .menu.chapters .caseBlock.completed .caseType svg { display: inline-block; } .menu.chapters .caseBlock.completed .caseType path { fill: #00464d; } .menu.chapters .caseBlock.lockedCase .caseInfo::after { top: 0; background-position: right 10px top 10px; } @media screen and (min-width: 1024px) { .menu.chapters .main-header-inner { max-width: 1024px; } .menu.chapters .section-inner { padding: 20px 0 0 0 !important; max-width: 960px; } } .menu.compact { background: #fff; height: 100%; min-height: 100vh; } .menu.compact .compactData { display: block; } .menu.compact .main-header { display: none; } .menu.compact .section-inner { padding: 100px 40px 100px; max-width: 1263px; min-height: 700px; } .menu.compact .caseType { display: block; } .menu.compact .caseBlock-inner { padding: 10px 0; } .menu.compact .progress { height: 6px; } .menu.compact .progress.margin-small-top { margin-top: 0; } .menu.compact h1 { font: normal 36px / 46px "Roboto", sans-serif; color: #00464d; margin: 0 0 24px; } .menu.compact .caseBlock .button-bordered { display: none; } .menu.compact .caseBlock .lockedImage { display: none; } .menu.compact .caseBlock .openImage, .menu.compact .caseBlock.lockedCase .lockedImage { display: block; } .menu.compact .caseBlocks .caseBlock { display: inline-block; width: 33%; margin: 0; padding-right: 10px; cursor: pointer; background: transparent; border: none; } .menu.compact .caseBlocks .caseBlock.lastCase { display: none; } .menu.compact.twoCols .caseBlocks .caseBlock, .menu.compact.threeCols .caseBlocks .caseBlock { width: 100%; } @media screen and (min-width: 768px) { .menu.compact.twoCols .caseBlocks, .menu.compact.threeCols .caseBlocks { width: 660px; margin: 0 auto; } .menu.compact.twoCols .caseBlocks .caseBlock, .menu.compact.threeCols .caseBlocks .caseBlock { width: 330px; } .menu.compact.twoCols .caseBlocks .caseBlock:nth-child(2n+1) { padding-right: 10px; } .menu.compact.twoCols .caseBlocks .caseBlock:nth-child(2n+2) { padding-left: 10px; } } @media screen and (min-width: 1024px) { .menu.compact.threeCols .caseBlocks { width: 990px; margin: 0 auto; } .menu.compact.threeCols .caseBlocks .caseBlock { width: 330px; } } .menu.compact .caseBlock .caseInfo { width: 100%; height: 200px; overflow: hidden; position: relative; -webkit-transform: translate3d(0, 0, 0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate3d(0, 0, 0); /* IE 9 */ transform: translate3d(0, 0, 0); /* IE 10, Fx 16+, Op 12.1+ */ -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } .menu.compact .caseBlock img:not(.case-icon) { width: 100%; height: 100%; transform-origin: center; -webkit-transform-origin: center; -webkit-transform: scale(1); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: scale(1); /* IE 9 */ transform: scale(1); /* IE 10, Fx 16+, Op 12.1+ */ transition: transform 1s; -webkit-transition: transform 1s; } .menu.compact .caseBlock:hover img:not(.case-icon) { -webkit-transform: scale(1.2); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: scale(1.2); /* IE 9 */ transform: scale(1.2); /* IE 10, Fx 16+, Op 12.1+ */ } .menu.compact .caseBlocks.noZoom .caseBlock:hover img:not(.case-icon) { -webkit-transform: scale(1); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: scale(1); /* IE 9 */ transform: scale(1); /* IE 10, Fx 16+, Op 12.1+ */ } .menu.compact .caseBlock .caseType { position: absolute; top: 0; right: 0; color: #fff; font-size: 20px; line-height: 60px; width: 60px; height: 60px; -webkit-border-radius: 0 3px 0 3px; -moz-border-radius: 0 3px 0 3px; -ms-border-radius: 0 3px 0 3px; border-radius: 0 3px 0 3px; transform: translate3d(0px, 0px, 0px); } .menu.compact .caseBlock .caseIcon { font-size: 22px; } .menu.compact .caseBlock .caseType.case { background: #00464d; } .menu.compact .caseBlock .caseType.case .case-icon { height: 21px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .menu.compact .caseBlock .caseType.teamCase { background: #525199; } .menu.compact .caseBlock.completed .caseCompleted { display: inline-block; position: absolute; top: 50%; left: 50%; z-index: 10; -webkit-transform: translate(-50%, -50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, -50%); /* IE 9 */ transform: translate(-50%, -50%); /* IE 10, Fx 16+, Op 12.1+ */ -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; width: 60px; height: 60px; line-height: 65px; text-align: center; background: rgba(0, 0, 0, 0.5); border: 1px solid #fff; color: #fff; } .menu.compact .caseBlock.completed .caseCompleted svg { fill: #fff; } .menu.compact .caseBlock.completed img:not(.case-icon) { opacity: 1; } .menu.compact .caseBlock.completed .caseTitle { opacity: 1; } .menu.bgmenu .menuIntro .menuDesc { margin-bottom: 56px; } .menu.bgmenu .innercaseblock { margin: 1px; background: white; } .menu.bgmenu .section-inner { padding-left: 16px; padding-right: 16px; } .menu.bgmenu .caseBlocks .caseBlock:nth-child(2n+2) { margin-right: 0px; } .menu.bgmenu .caseBlocks .caseBlock { border: none; background: black; margin-bottom: 16px; -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; } .menu.bgmenu .caseBlocks .caseBlock.boxshadow { box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.16), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 10px 20px rgba(0, 0, 0, 0.04); } .menu.bgmenu .caseBlock-inner { padding: 27px 32px 32px 32px; } .menu.bgmenu .margin-large-top { margin-top: 31px; } .menu.bgmenu .progress.orange, .menu.bgmenu .progress.purple { background: #dfdfdf; } .menu.bgmenu .statusLabel .jsContinue, .menu.bgmenu .statusLabel .jsReset, .menu.bgmenu .statusLabel .jsLocked { display: none; position: absolute; top: 0; right: 0; color: #fff; padding: 8px 8px 8px 8px; } .menu.bgmenu .statusLabel .jsContinue p, .menu.bgmenu .statusLabel .jsReset p, .menu.bgmenu .statusLabel .jsLocked p { margin: 0; } .menu.bgmenu .statusLabel .jsContinue.small-rounded, .menu.bgmenu .statusLabel .jsReset.small-rounded, .menu.bgmenu .statusLabel .jsLocked.small-rounded { border-top-left-radius: 0px; border-bottom-right-radius: 0px; } .menu.bgmenu .statusLabel.jsStartCase div { background: gray; } .menu.bgmenu .caseBlocks .caseBlock.lockedCase:not(.bonusCase) .caseInfo::after { display: none; } .menu.bgmenu .caseBlocks .caseBlock.lockedCase .jsReset { display: none; } .menu.bgmenu .caseBlock.lockedCase .button-bordered { color: #fff; } .menu.bgmenu.section .menuIntro { padding-left: 0px; padding-right: 0px; background: none; width: 100%; bottom: auto; } .menu.bgmenu.section .section-inner { padding-top: 26px; } .menu.bgmenu .main-header-inner { width: calc(100% - 32px); } .menu.bgmenu .menuImage { display: none; } .menu.bgmenu .main-header { height: 175px; } .menu.bgmenu .menuIntro { bottom: auto; top: 116px; } @media screen and (max-width: 768px) { .menu.bgmenu .main-header { margin-top: 0px !important; } .menu.bgmenu .menuIntro { top: 80px; } .menu.bgmenu.section .section-inner { padding-top: 20px; } } @media screen and (min-width: 768px) { .menu.bgmenu .caseBlocks .caseBlock { width: 360px; margin-right: 16px; margin-bottom: 16px; } .menu.bgmenu .caseBlocks { width: 736px; margin-left: auto; margin-right: auto; } .menu.bgmenu .main-header-inner { max-width: 736px; } } @media screen and (min-width: 1024px) { .menu.bgmenu .caseBlocks { width: 764px; } .menu.bgmenu .caseBlocks .caseBlock { width: 366px; margin-right: 32px; margin-bottom: 32px; } .menu.bgmenu .main-header-inner { max-width: 764px; } } @media screen and (min-width: 1440px) { .menu.bgmenu .caseBlocks { width: 1162px; } .menu.bgmenu .caseBlocks .caseBlock:nth-child(2n+2) { margin-right: 32px; } .menu.bgmenu .caseBlocks .caseBlock:nth-child(3n+3) { margin-right: 0px; } .menu.bgmenu .main-header-inner { max-width: 1162px; } } .menu.circle-menu { text-align: center; min-height: 100vh; } .menu.circle-menu .bgImage { left: 0; } .menu.circle-menu .menuwrapper { min-height: 100vh; } .menu.circle-menu .caseBlock-container { pointer-events: none; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .menu.circle-menu .caseDuration p { display: inline; } .menu.circle-menu.light-theme .caseBlocks .caseBlock .caseInfo .caseBlock-inner .caseTitle { color: #fff; } .menu.circle-menu.light-theme .caseBlocks .caseBlock .caseDuration { color: #fff; } .menu.circle-menu.light-theme .caseBlocks .caseBlock .caseDuration .caseDuration-icon .svg-icon { fill: #fff; } .menu.circle-menu.light-theme .caseBlocks .caseBlock.completed .circle-caseCompleted { background: #fff; } .menu.circle-menu.light-theme .caseBlocks .caseBlock.completed .circle-caseCompleted .svg-icon { fill: #00464d; } .menu.circle-menu.light-theme .caseBlocks .caseBlock.lockedCase .circle-caseLocked { background: #fff; } .menu.circle-menu.light-theme .caseBlocks .caseBlock.lockedCase .circle-caseLocked .svg-icon { stroke: #00464d; } .menu.circle-menu.light-theme .caseBlocks .caseBlock .loader-circle .timer > .slice > .pie { border-color: #fff; } .menu.circle-menu.light-theme.customModuleTitleColor .caseBlocks .caseBlock .caseInfo .caseBlock-inner .caseTitle { color: #fff; } .menu.circle-menu .bgImage { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; position: absolute; } .menu.circle-menu .bgImage img { min-height: 100%; min-width: 100%; } .menu.circle-menu .section-inner .module-title { display: none; font-size: 22px; color: #00464d; text-align: center; font-weight: normal; margin-bottom: 25px; } .menu.circle-menu .caseBlocks .caseBlock { width: 312px; height: 312px; padding: 6px !important; margin: 0 14px 44px; overflow: visible; position: relative; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .menu.circle-menu .caseBlocks .caseBlock.completed .circle-caseCompleted { display: inline-block; position: absolute; right: 30px; top: 4px; z-index: 10; width: 60px; height: 60px; line-height: 62px; background: #00464d; -webkit-transform: translate3d(0, 0, 0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate3d(0, 0, 0); /* IE 9 */ transform: translate3d(0, 0, 0); /* IE 10, Fx 16+, Op 12.1+ */ -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .menu.circle-menu .caseBlocks .caseBlock.completed .circle-caseCompleted .svg-icon { fill: #fff; } .menu.circle-menu .caseBlocks .caseBlock .circle-caseLocked { pointer-events: none; display: none; } .menu.circle-menu .caseBlocks .caseBlock.lockedCase .caseInfo:after { display: none; } .menu.circle-menu .caseBlocks .caseBlock.lockedCase .circle-caseLocked { display: inline-block; position: absolute; left: 30px; top: 4px; z-index: 10; width: 60px; height: 60px; line-height: 75px; background: #00464d; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .menu.circle-menu .caseBlocks .caseBlock.lockedCase .circle-caseLocked .svg-icon { stroke: #fff; } .menu.circle-menu .caseBlocks .caseBlock.lockedCase .caseBlock-outer { opacity: 0.5; } .menu.circle-menu .caseBlocks .caseBlock .caseTitle-mobile { display: none; } .menu.circle-menu .caseBlocks .caseBlock .caseTitle { font-size: 24px; } .menu.circle-menu .caseBlocks .caseBlock .caseDuration { color: #000; font-size: 0; position: absolute; width: 100%; bottom: 95px; } .menu.circle-menu .caseBlocks .caseBlock .caseDuration > span { font-size: 16px; } .menu.circle-menu .caseBlocks .caseBlock .caseDuration span:nth-child(2) { margin-right: 4px; } .menu.circle-menu .caseBlocks .caseBlock .caseDuration .caseDuration-icon { display: inline-block; margin: 3px 10px 0 0; } .menu.circle-menu .caseBlocks .caseBlock .loader-circle { overflow: hidden; box-sizing: content-box; left: 0; top: 0; right: 0; bottom: 0; margin: auto; position: absolute; width: 312px; height: 312px; display: inline-block; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .menu.circle-menu .caseBlocks .caseBlock .loader-circle .timer { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; box-sizing: content-box; position: relative; width: 312px; height: 312px; float: left; z-index: 2; } .menu.circle-menu .caseBlocks .caseBlock .loader-circle .timer > .slice { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; box-sizing: content-box; position: absolute; width: 312px; height: 312px; clip: rect(0, 312px, 312px, 156px); } .menu.circle-menu .caseBlocks .caseBlock .loader-circle .timer > .slice.gt50 { clip: rect(auto, auto, auto, auto); } .menu.circle-menu .caseBlocks .caseBlock .loader-circle .timer > .slice > .pie { box-sizing: content-box; border: 4px solid #00464d; position: absolute; width: 304px; height: 304px; clip: rect(0, 156px, 312px, 0); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .menu.circle-menu .caseBlocks .caseBlock .loader-circle .timer > .slice > .pie.fill { -moz-transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important; -o-transform: rotate(180deg) !important; transform: rotate(180deg) !important; } .menu.circle-menu .caseBlocks .caseBlock .circle-caseCompleted { display: none; } .menu.circle-menu .caseBlocks .caseBlock .caseBlock-outer { display: inline-block; width: 300px; height: 300px; overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .menu.circle-menu .caseBlocks .caseBlock .caseInfo { width: 300px; height: 300px; -webkit-transform: translateZ(0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateZ(0); /* IE 9 */ transform: translateZ(0); /* IE 10, Fx 16+, Op 12.1+ */ -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .menu.circle-menu .caseBlocks .caseBlock .caseInfo img { pointer-events: none; display: inline-block; } .menu.circle-menu .caseBlocks .caseBlock .caseInfo .caseBlock-inner { position: relative; width: 100%; height: 100%; z-index: 10; display: inline-block; overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .menu.circle-menu .caseBlocks .caseBlock .caseInfo .caseBlock-inner .caseTitle { margin: auto; color: #000; position: absolute; width: 100%; line-height: 34px; bottom: 135px; padding: 0 55px; word-break: break-word; overflow-wrap: break-word; } .menu.circle-menu .caseBlocks .caseBlock .caseInfo .caseBlock-inner .caseTitle p { margin: 0; } @media screen and (max-width: 1024px) { .menu.circle-menu .section-inner .module-title { display: block; } .menu.circle-menu.light-theme .section-inner .module-title { color: #fff; } .menu.circle-menu.light-theme.customModuleTitleColor .section-inner .module-title { color: #fff; } } @media screen and (max-width: 767px) { .menu.circle-menu { text-align: left; } .menu.circle-menu.light-theme .caseBlocks .caseBlock .caseTitle-mobile { color: #fff; } .menu.circle-menu.light-theme.customModuleTitleColor .caseBlocks .caseBlock .caseTitle-mobile { color: #fff; } .menu.circle-menu .section-inner { padding: 100px 20px 100px; } .menu.circle-menu .caseBlocks.topCases { margin-bottom: 0; } .menu.circle-menu .caseBlocks .caseBlock { width: 100%; height: 100%; margin: 5px 0; padding: 0 !important; } .menu.circle-menu .caseBlocks .caseBlock.completed .circle-caseCompleted { text-align: center; line-height: 36px; width: 40px; height: 40px; right: -4px; top: 0; } .menu.circle-menu .caseBlocks .caseBlock.completed .circle-caseCompleted svg { width: 9px; height: 7px; } .menu.circle-menu .caseBlocks .caseBlock.lockedCase .circle-caseLocked { text-align: center; line-height: 48px; width: 40px; height: 40px; left: -4px; top: 0; } .menu.circle-menu .caseBlocks .caseBlock.lockedCase .circle-caseLocked svg { width: 15px; height: 21px; } .menu.circle-menu .caseBlocks .caseBlock .caseTitle-mobile { display: inline-block; font-weight: bold; font-size: 24px; color: #00464d; vertical-align: middle; margin-left: 20px; width: calc(100% - 137px); } .menu.circle-menu .caseBlocks .caseBlock .caseTitle-mobile p { margin: 0; } .menu.circle-menu .caseBlocks .caseBlock .caseBlock-container { display: inline-block; width: 112px; height: 112px; position: relative; padding: 6px; vertical-align: middle; } .menu.circle-menu .caseBlocks .caseBlock .caseInfo .caseBlock-inner .textBlock { position: absolute; top: 50%; width: 100%; -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(-50%); /* IE 9 */ transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */ } .menu.circle-menu .caseBlocks .caseBlock .caseDuration { text-align: center; position: relative; bottom: auto; } .menu.circle-menu .caseBlocks .caseBlock .caseDuration .caseDuration-icon { margin-right: 4px; } .menu.circle-menu .caseBlocks .caseBlock .caseBlock-outer { width: 100px; height: 100px; } .menu.circle-menu .caseBlocks .caseBlock .caseInfo { width: 100px; height: 100px; } .menu.circle-menu .caseBlocks .caseBlock .caseInfo .caseBlock-inner .caseTitle { display: none; } .menu.circle-menu .caseBlocks .caseBlock .loader-circle { width: 112px; height: 112px; } .menu.circle-menu .caseBlocks .caseBlock .loader-circle .timer { width: 112px; height: 112px; } .menu.circle-menu .caseBlocks .caseBlock .loader-circle .timer > .slice { width: 112px; height: 112px; clip: rect(0, 112px, 112px, 56px); } .menu.circle-menu .caseBlocks .caseBlock .loader-circle .timer > .slice > .pie { width: 104px; height: 104px; clip: rect(0, 56px, 112px, 0); } .menu.circle-menu .caseBlocks .caseBlock .loader-circle .timer > .slice .gt50 { clip: rect(auto, auto, auto, auto); } } /* Overlay */ .overlay { display: none; position: fixed; top: 89px; left: 50%; -webkit-transform: translateX(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateX(-50%); /* IE 9 */ transform: translateX(-50%); /* IE 10, Fx 16+, Op 12.1+ */ bottom: 0; background: #fff; z-index: 1002; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } @media screen and (min-width: 1025px) { .overlay.circle-header { top: 0; } } @media screen and (min-width: 769px) { .moduleCompleted.overlay { min-width: 750px; } } .overlay.fulloverlay { top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); border: 0; z-index: 2; } .overlay.whiteStyle { background: #fff; bottom: auto; right: auto; width: calc(100% - 200px); min-width: 1024px; max-width: 100%; left: 50%; -webkit-transform: translateX(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateX(-50%); /* IE 9 */ transform: translateX(-50%); /* IE 10, Fx 16+, Op 12.1+ */ border-bottom-width: 3px; } .fulloverlay-inner { position: absolute; left: 50%; transform: translateX(-50%); top: 90px; background: #fff; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom: 1px solid rgab(); border-left: 1px solid #ccc; border-right: 1px solid #ccc; } .overlay .closeOverlay.top { position: absolute; top: 0; left: -51px; border-radius: 0 0 0 3px; } .overlay.caseInfo .overlay-inner, .overlay.information .overlay-inner { height: 100%; } .overlay .closeOverlay.top:before { color: #fff; } .overlay .closeOverlay.bottom { background: #00464d; color: #fff; } .overlay .overlay-inner { display: block; margin: 0 auto; padding: 50px 100px; overflow-y: auto; overflow-x: hidden; max-height: 100%; } .overlay .overlay-inner.workformContent { padding: 0; } .overlay .overlay-inner.workformContent .section { margin: 0; max-width: 100%; } .overlay .overlay-inner.workformContent .section .section-inner { padding-left: 40px; padding-right: 40px; } @media screen and (min-width: 768px) { .overlay .overlay-inner.workformContent .section .section-inner { padding-left: 100px; padding-right: 100px; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .overlay .overlay-inner { display: block; margin: 0 auto; width: 100%; padding: 50px; } } .overlay.caseInfo .overlay-inner { padding: 70px 40px; } .overlay .overlay-inner ul { margin: 0 0 10px 0; } .overlayImage { position: fixed; left: 0; width: 50%; height: 100%; background: none center no-repeat; background-size: cover; } /* Dropdown */ .dropdown { position: relative; height: 50px; overflow: visible; background: #fff; border: 1px solid #d8d5d2; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; color: #00464d; cursor: pointer; display: inline-flex; align-items: center; min-width: 200px; z-index: 10; } .dropdown-addon { display: flex; align-items: center; justify-content: center; background: #f0f0f0; width: 50px; height: 48px; border-radius: 3px 0 0 3px; border-right: 1px solid #d8d5d2; cursor: default; text-align: center; } .dropdown-addon i { line-height: 17px; } .dropdown-addon i:before { line-height: 1; } .dropdown-value { pointer-events: none; padding: 11px 20px; } .ml-total-progress { text-align: center; color: #00464d; line-height: 32px; font-weight: bold; font-size: 26px; display: inline-block; } .ml-total-progress p { margin: 0; } .ml-total-progress .progress-text { text-align: center; margin: 0 10px 0 0; line-height: 20px; font-size: 14px; color: #00464d; font-weight: 400; } .section.intro .dropdown-value { color: #00464d; } .dropdown-value p { margin: 0; } .dropdown-caret { position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 4px; } .dropdown-caret::before { position: relative; font-family: 'scormicons', sans-serif; font-size: 24px; line-height: 1; top: -9px; content: "\E00B"; } .dropdown-list { position: absolute; top: 48px; left: 49px; right: -1px; display: block; margin: 0; padding: 0; background: #fff; border: 1px solid #d8d5d2; border-radius: 0 3px 3px 3px; list-style: none; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transition: all 0.1s; transition: all 0.1s; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; max-height: 170px; overflow-y: auto; overflow-x: hidden; } .dropdown-list p { margin: 0; } .dropdown-list li { display: block; margin: 0; padding: 10px 17px; } .dropdown-list li:hover { background: rgba(240, 240, 240, 0.5); } .dropdown.opened .dropdown-list { -webkit-transform: scaleY(1); transform: scaleY(1); } .content { background: #f5f5f5; } .content.case.game { padding-bottom: 0; } .content.case { overflow: hidden; background-color: #fff; min-height: 100vh; } .content.transparent { background-color: transparent; } /* Section */ .section { background: transparent; } .section:not(.menu).gameConclusion { margin-bottom: 0 !important; } .section:not(.menu) { margin: 0 auto 0px; } .section.intro { position: relative; min-width: 700px; min-height: 700px; height: 100vh; margin: 0; z-index: 100; } .full-section { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 999; background: #fff; display: none; overflow-y: scroll; } .full-section .asset, .full-section .textRight { width: 49%; display: inline-block; height: 100%; position: relative; } .full-section .asset { overflow: hidden; position: fixed; } .full-section .textRight { padding-top: 150px; position: absolute; top: 0; right: 0; } .full-section .asset img { height: 100%; } .full-section .asset .closeBlock { position: absolute; top: 90px; right: 0; padding: 5px 17px; background: #00464d; color: #fff; font-size: 15px; cursor: pointer; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; } .dark { background: #f0f0f0; } .section { position: relative; } .section .wvSectionBG { position: absolute; background: #fff; height: auto; width: auto; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; box-sizing: content-box; -webkit-box-shadow: 0px 0px 5px 1px #dcdcdc; -moz-box-shadow: 0px 0px 5px 1px #dcdcdc; box-shadow: 0px 0px 5px 1px #dcdcdc; } .section .wvSectionBG.bgImage { width: 100%; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .section .wvSectionBG.bgImage.focuspoint { overflow: hidden; } .section .wvSectionBG.bgImage img { width: 100vw; } .section .wvSectionBG .wvBackgroundColor { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } .section.menuhotspot .wvSectionBG.bgImage, .section.menumovingimages .wvSectionBG.bgImage { height: 100% !important; } .introSection.section .wvSectionBG { box-shadow: none; } .section.hasLeftBG .wvSectionBG { border-radius: 0 3px 3px 0; } .section.hasRightBG .wvSectionBG { border-radius: 3px 0 0 3px; } .section.introSection.hasLeftBG .wvSectionBG { border-radius: 0 3px 3px 0; } .section.introSection.hasRightBG .wvSectionBG { border-radius: 3px 0 0 3px; } .section.hasLeftBG + .section.hasLeftBG .wvSectionBG, .section.hasRightBG + .section.hasRightBG .wvSectionBG { top: -15px; } .section.hasRightBG .wvSectionBG { left: calc(50% - 388px); right: 0; } .section.hasLeftBG .wvSectionBG { right: calc(50% - 388px); left: 0; } .workformContent .section.hasRightBG .wvSectionBG, .workformContent .section.hasLeftBG .wvSectionBG { left: 0; right: 0; } .case .introSection .caseSubTitle { display: none; } .case .introSection.hasUnderBG .section-inner { margin-left: 0; width: 100%; max-width: none; margin-top: -120px !important; } .case .introSection.hasUnderBG .section-inner .limiter { max-width: 678px; } .case .introSection.hasUnderBG .section-inner .limiter .introSectionButton { text-align: center; } .case .introSection.hasUnderBG .section-inner .limiter .text { color: #00464d; padding-top: 45px; } .case .introSection.hasUnderBG .section-inner .text p:last-child { margin-bottom: 20px; } .case .introSection.hasUnderBG .section-inner .caseSubTitle { display: block; padding-top: 23px; padding-bottom: 45px; color: #fff; } @media screen and (max-width: 768px) { .case .introSection.hasUnderBG .section-inner .caseSubTitle { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .case .introSection.hasUnderBG .section-inner .caseSubTitle { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } @media screen and (min-width: 1024px) { .case .introSection.hasUnderBG .section-inner .caseSubTitle { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } .case .introSection.hasUnderBG .section-inner .module-block { max-width: none; padding-top: 162px; padding-left: 120px; width: calc(100% - 120px); padding-bottom: 60px; } .case .introSection.hasUnderBG .section-inner .module-block p { margin: 0 0 16px; } .case .introSection.hasUnderBG .section-inner .module-block .progress.orange, .case .introSection.hasUnderBG .section-inner .module-block .progress.purple { background: rgba(255, 255, 255, 1); } .case .introSection.hasUnderBG .caseImage { margin-left: 120px; } @media screen and (max-width: 1024px) { .case .introSection.hasUnderBG .section-inner { margin-top: -80px !important; } .case .introSection.hasUnderBG .section-inner .limiter .text { padding-top: 35px; } .case .introSection.hasUnderBG .section-inner .caseSubTitle { padding-top: 17px; padding-bottom: 0px; } .case .introSection.hasUnderBG .section-inner .module-block { padding-top: 98px; padding-left: 80px; width: calc(100% - 80px); padding-bottom: 55px; } .case .introSection.hasUnderBG .section-inner .module-block p { margin: 0 0 1px; } .case .introSection.hasUnderBG .caseImage { margin-left: 80px; } } @media screen and (max-width: 768px) { .case .introSection.hasUnderBG .section-inner { margin-top: -60px !important; padding-left: 0px !important; padding-right: 0px !important; } .case .introSection.hasUnderBG .section-inner .limiter .text { padding-top: 45px; padding-left: 40px; padding-right: 40px; } .case .introSection.hasUnderBG .section-inner .caseSubTitle { padding-top: 20px; padding-bottom: 0px; } .case .introSection.hasUnderBG .section-inner .module-block { padding-top: 98px; padding-left: 40px; padding-right: 40px; width: 100%; padding-bottom: 45px; } .case .introSection.hasUnderBG .section-inner .module-block p { margin: 0 0 20px; } .case .introSection.hasUnderBG .caseImage { margin-left: 0px; } } .introSection.hasRightBG .wvSectionBG { top: 385px; left: calc(50% - 350px); } .introSection.hasLeftBG .wvSectionBG { top: 385px; right: calc(50% - 350px); } .introSection.hasMiddleBG .wvSectionBG { height: 1px; width: 100%; bottom: 0; top: auto; } .introSection.hasMiddleBG .module-block { position: absolute; top: auto; bottom: 0; left: 0; right: 0; margin: auto; background: none; z-index: 1; max-width: 678px; font-weight: 100; margin-bottom: 0px; padding: 20px 0px 22px; width: 100%; } .introSection.hasMiddleBG .module-block .caseTitleText { font-size: 40px; line-height: 45px; } .introSection.hasMiddleBG .module-block .caseTitleText p { margin-bottom: 8px; } .introSection.hasMiddleBG .module-block .chapterTitleText { color: #fff; font-size: 25px; line-height: 30px; } .introSection.hasMiddleBG .module-block .chapterTitleText p { margin-bottom: 0px; } .introSection.hasMiddleBG .module-block .progress .progress-fill { background: #fff; } .introSection.hasMiddleBG .section-inner { margin-top: 0px !important; background: #fff; } .introSection.hasMiddleBG .section-inner .limiter { padding-top: 50px; max-width: 678px !important; } .introSection.hasMiddleBG .section-inner .text { color: #fff; } .case .introSection.hasFullBG .wvSectionBG { width: 100%; bottom: 0; top: 0; left: 0; } .case .introSection.hasFullBG .module-block { padding: 0; } .case .introSection.hasFullBG .module-block .caseTitleText p { margin: 0; } .case .introSection.hasFullBG .section-inner { margin-top: 0px !important; background: transparent; position: absolute; bottom: 0; max-width: 1200px; width: 90%; left: 50%; -webkit-transform: translateX(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateX(-50%); /* IE 9 */ transform: translateX(-50%); /* IE 10, Fx 16+, Op 12.1+ */ display: flex; flex-wrap: wrap; } .case .introSection.hasFullBG .section-inner .fullBgIcon { order: 1; flex: 0 1 100%; margin-bottom: 25px; } .case .introSection.hasFullBG .section-inner .fullBgIcon img { max-width: 100%; } .case .introSection.hasFullBG .section-inner .fullBgWrapper { order: 2; flex: 1 0; } .case .introSection.hasFullBG .section-inner .introSectionButton { text-align: center; order: 3; flex: 0 0 100%; margin-bottom: 50px; } .case .introSection.hasFullBG .section-inner .progress { display: none; } .case .introSection.hasFullBG .section-inner .limiter { padding-top: 25px; padding-bottom: 0; text-align: left; max-width: 100%; } .case .introSection.hasFullBG .section-inner .text { color: #fff; } @media screen and (min-width: 768px) { .case .introSection.hasFullBG .section-inner { bottom: 50px; flex-wrap: wrap; justify-content: space-between; } .case .introSection.hasFullBG .section-inner .fullBgIcon { order: 2; flex: 0 0 200px; } .case .introSection.hasFullBG .section-inner .fullBgWrapper { order: 1; } .case .introSection.hasFullBG .section-inner .limiter { padding-top: 50px; } .case .introSection.hasFullBG .section-inner .limiter .text { max-width: 80%; } .case .introSection.hasFullBG .section-inner .limiter .intro-video { max-width: 50%; } } .case .introSection.dark-theme .section-inner .text { color: #000; } .introSection.dark-theme .module-block { color: #000; } .introSection.dark-theme .module-block .caseTitleText { color: #000; } .introSection.dark-theme.customModuleTitleColor .module-block .caseTitleText { color: #fff; } .introSection.customModuleTitleColor .module-block .caseTitleText { color: #fff; } .introSection.section .wvSectionBG { background: #00464d; } .introSection .section-inner { margin-top: -100px !important; color: #fff; } .introSection .module-block { color: #fff; background: none; } .introSection .module-block .caseTitleText { color: #fff; } .section .section-inner { max-width: 700px; margin: 0 auto; position: relative; padding: 80px 0px; z-index: 1; } .section.articulateHtml5Section .section-inner { max-width: 1084px; } .section.articulateHtml5Section .section-inner .iframeContainer iframe { width: 100%; height: 576px; } @media screen and (min-width: 769px) { .iframeContainer { margin-left: 30px; margin-right: 30px; } } .no-padding-top-after + .section:not(.quoteStatement) .section-inner:not(.cuesection) { padding-top: 40px; } .section .section-inner { -webkit-transform-style: preserve-3d; } .section .section-inner .limiter { max-width: 678px; transform: translate3d(0, 0, 0); } .section .startscreenIntroduction .section-inner { -webkit-transform-style: unset; } .section.introSection .section-inner .limiter { max-width: 620px; } .section.introSection { margin-bottom: 0; } .section.introSection .intro-video.obligatory .videoContainer .jwplayer .jw-controlbar .jw-controlbar-center-group { pointer-events: none; } .section.introSection .intro-video.obligatory .videoContainer .jwplayer .jw-controlbar .jw-controlbar-center-group .jw-knob { display: none; } .section.introSection.newIntro { margin: 90px auto 0px; } .section.introSection.newIntro .section-top { font-size: 0; } .section.introSection.newIntro .main-header { display: inline-block; width: 60%; } .section.introSection.newIntro .module-block { padding: 0; } .section.introSection.newIntro .casSubTitle { font-size: 16px; line-height: 20px; } .section.introSection.newIntro .intro-video { -webkit-transition: opacity 750ms ease-in-out; -moz-transition: opacity 750ms ease-in-out; -o-transition: opacity 750ms ease-in-out; -ms-transition: opacity 750ms ease-in-out; transition: opacity 750ms ease-in-out; } .section.introSection.newIntro .intro-video .embedContainer, .section.introSection.newIntro .intro-video .videoContainer { position: absolute; left: 0; top: 0; width: 100%; margin-bottom: 0; height: 100%; background: #000; } .section.introSection.newIntro .intro-video .embedContainer .jwplayer, .section.introSection.newIntro .intro-video .videoContainer .jwplayer { position: absolute; top: 50%; -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(-50%); /* IE 9 */ transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */ max-height: 100%; } .section.introSection.newIntro .section-inner { min-height: 485px; background: #00464d; display: inline-block; width: 40%; padding: 40px; margin-top: 0 !important; max-width: none; } .section.introSection.newIntro .section-inner .text { line-height: 26px !important; } .section.introSection.newIntro .section-bottom { text-align: center; padding: 40px; } @media screen and (max-width: 768px) { .section.introSection.newIntro .section-bottom .action-header { font: normal 20px 'Poppins', sans-serif !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .section.introSection.newIntro .section-bottom .action-header { font: normal 20px 'Poppins', sans-serif !important; } } @media screen and (min-width: 1024px) { .section.introSection.newIntro .section-bottom .action-header { font: normal 20px 'Poppins', sans-serif !important; } } .section.introSection.newIntro .section-bottom .action-header p { margin: 0 0 8px; } .section.introSection.newIntro .section-bottom .checkAnswer.disabled { border-color: #a8a8a8 !important; } .section.introSection.introSeen { margin-bottom: 0px; } .section .gamification { position: absolute; display: inline-block; bottom: 5px; right: 0; font-size: 20px; } .section .gamification p { margin: 0; } .section .gamification .points { display: inline-block; background: #00464d; border-radius: 50%; width: 40px; height: 40px; color: #fff; text-align: center; font-weight: bold; font-size: 22px; line-height: 40px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .section .gamification.earned .points { background: #00464d; } .section .gamification .text { display: inline-block; } .wv-cue-parent .section .gamification { position: relative; margin: auto; display: block; margin-top: 35px; } @media screen and (min-width: 768px) { .section .gamification { width: 270px; padding-left: 50px; bottom: 0px; } .section .gamification .points { position: absolute; top: -10px; left: 0; } .section .gamification .text { vertical-align: super; } } .section .section-inner .caption { text-align: center; font-style: italic; color: #00464d; margin-top: 10px; } .section.articulateHtml5Section .section-inner .textVideo .caption { margin-top: 20px; } .section.intro:not(.leftStyle):not(.netflixStyle) .section-inner { position: absolute; width: 100%; max-width: 600px; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0 0px 100px; border-radius: 3px; } .section.intro:not(.leftStyle):not(.netflixStyle) .section-inner .project-details { display: block; } .section.intro:not(.leftStyle):not(.netflixStyle) .section-inner .project-details .project-logo { position: relative; text-align: center; } .section.intro.leftStyle .startscreenIntroduction { margin: 0 auto; } .section.intro.netflixStyle .startscreenIntroduction { margin: 0 auto; } .section.intro.leftStyle .section-inner { margin: 0; text-align: left; display: table-cell; height: 100vh; vertical-align: bottom; } .section.intro.leftStyle .section-inner h1 p { margin: 0; } .section.intro.leftStyle .section-inner .subTitle, .section.intro.leftStyle .section-inner h1 { color: #00464d; } .section.intro.leftStyle .section-inner .button-bordered { padding: 12px 5px; } .section.intro .section-inner .button-confirm, .section.intro .startscreenIntroduction .section-inner .button-start { border-color: #44de26 !important; background: #44de26; } .section.intro .section-inner .button-confirm:hover, .section.intro .startscreenIntroduction .section-inner .button-start:hover { border-color: #44de26 !important; background: #44de26; } .section.intro.netflixStyle { background: #f5f5f5; height: 100%; min-height: 100vh; } .section.intro.netflixStyle .section-inner { margin: 0; text-align: left; display: table-cell; height: 100vh; width: 100vw; max-width: none; vertical-align: bottom; } .section.intro.netflixStyle .section-inner h1 p { margin: 0; } .section.intro.netflixStyle .section-inner .subTitle, .section.intro.netflixStyle .section-inner h1 { color: #fff; } .section.intro.netflixStyle .section-inner .button-bordered { padding: 12px 5px; } .section.intro.netflixStyle .section-inner .comingSoonWrapper .comingSoonColumn:first-child { margin-right: 36px; } .section.intro.netflixStyle .section-inner .netflixcomingsoon { margin: 16px 0px 2px 0px; font-weight: bold; } .section.intro.netflixStyle .section-inner .netflixcomingsoon p { margin: 0; } .section.intro.netflixStyle .section-inner .comingSoonColumn { width: calc(50% - 18px); display: inline-block; } .section.intro.netflixStyle .section-inner .comingSoon { height: 143px; display: block; border-radius: 10px; background-repeat: no-repeat; background-size: cover; } .section.intro.netflixStyle .section-inner .asset { position: relative; height: 500px; border-radius: 10px; padding: 30px 60px 30px 60px; display: table; } .section.intro.netflixStyle .section-inner .asset .introContent { position: relative; z-index: 1; display: table-cell; vertical-align: bottom; } .section.intro.netflixStyle .section-inner .asset .introContent .netflixicon { width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; display: inline-block; margin-right: 6px; background-size: 100%; } .section.intro.netflixStyle .section-inner .asset .introContent .svgtitle { height: 55px; background-position: left center; background-repeat: no-repeat; background-size: contain; margin-bottom: 8px; } .section.intro.netflixStyle .section-inner .asset .introContent .netflixdate { display: inline-block; color: #fff; } .section.intro.netflixStyle .section-inner .asset .introContent .netflixdate p { margin: 0px; font-size: 12px; line-height: 22px; } .section.intro.netflixStyle .section-inner .asset .introContent .netflixTextTop { color: #fff; } .section.intro.netflixStyle .section-inner .asset .introContent .netflixTextTop p { margin: -4px 0px 0px 0px; font-size: 12px; line-height: 22px; } .section.intro.netflixStyle .section-inner .asset .introContent .netflixTextBottom { color: #fff; max-width: 500px; } .section.intro.netflixStyle .section-inner .asset .introContent .netflixTextBottom p { margin: 0px; line-height: 24px; } .section.intro.netflixStyle .section-inner .asset .introContent .buttonwrapper { margin: 14px 0px 14px 0px; } .section.intro.netflixStyle .section-inner .asset .introContent .buttonwrapper .button-start.textButton { background: #44de26; box-shadow: none; border: none; padding-left: 24px; min-height: 19px; min-width: 19px; } .section.intro.netflixStyle .section-inner .asset .introContent .buttonwrapper .button-start.textButton .netflixplaybuttonwrapper { position: absolute; width: 26px; height: 26px; top: 8px; left: 12px; } .section.intro.netflixStyle .section-inner .asset .introContent .buttonwrapper .button-start.textButton .netflixplaybuttonwrapper svg { margin-top: -15px; margin-left: -12px; width: 126px; } .section.intro.netflixStyle .section-inner .asset .introContent .buttonwrapper .button-start.textButton span { display: inline-block; padding-left: 17px; padding-right: 9px; } .section.intro.netflixStyle .section-inner .asset .introContent .buttonwrapper .button-start.textButton span:empty { padding: 0; } @media screen and (max-width: 768px) { .section.intro.netflixStyle .section-inner .asset { height: 375px; } .section.intro.netflixStyle .section-inner .comingSoonWrapper .comingSoonColumn:first-child { margin-right: 0px; } .section.intro.netflixStyle .section-inner .comingSoonColumn { width: 100%; margin-bottom: 23px; } .section.intro.netflixStyle .section-inner .comingSoonColumn:nth-child(2) .netflixcomingsoon { margin-top: 0px; } } .intro .introBg { width: 100%; left: 0; bottom: 0; top: 0; height: auto; } .section.intro .section-inner .langSelect { width: 100%; max-width: 270px; margin: 0 auto; } .section.intro .section-inner .langSelect .button-confirm { background: #00464d; border-color: #00464d; } .section.intro .section-inner .langSelect .button-confirm:hover { background: #dcb600; } .intro header { margin-bottom: 50px; } .intro header .subTitle { color: #00464d; text-align: center; font-size: 18px; margin-top: 40px; } .intro header h1 { margin-bottom: 10px; text-align: center; color: #00464d; font-size: 62px; line-height: 72px; font-weight: bold; } .section.textSection .embedContainer { min-height: 400px; position: relative; } .menuImage { position: absolute; } .column { margin: 0 auto; } .column.small { max-width: 345px; padding-top: 100px; } .section .subTitle { font-size: 24px; color: #333; } .module-block { position: relative; max-width: 700px; margin: auto 0; padding: 40px 40px 25px; color: #333; font-family: 'Poppins', Arial, sans-serif; font-size: 36px; font-weight: normal; line-height: 46px; background: #fff; } .limiter { position: relative; margin: 0 auto; max-width: 620px; } .limiter.narrow { max-width: 580px; } .text.no-margin p { margin: 0; } /* Assets */ .asset { display: inline-block; } .intro .asset { position: absolute; } .intro .asset img { min-height: 100%; min-width: 100%; } .intro .asset.bgImage { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; overflow: hidden; } .asset.right { -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .asset.left { -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .intro .asset.right { top: 0; right: 0; } .intro .asset.left { left: 0; bottom: 0; } /* Case blocks */ .caseBlocks { display: block; } .caseBlocks .caseBlock { display: inline-block; width: 100%; background: #fff; border-bottom: 3px solid #dcd8d5; cursor: pointer; overflow: hidden; margin-bottom: 35px; } .caseBlocks .caseBlock.lockedCase { pointer-events: none; } .caseBlocks .caseBlock.lockedCase:not(.bonusCase) .caseInfo::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; background: url(img/scorm/icons/lock.png) right 10px bottom 10px no-repeat rgba(64, 64, 64, 0.8); } @media screen and (min-width: 736px) { .caseBlocks .caseBlock { width: calc(50% - 10px); margin: 0 10px 28px 0px; } .menu.chapters .caseBlock { width: calc(33% - 10px); } .section.intro.leftStyle .startscreenIntroduction { width: calc(100% - 200px); } .section.intro.netflixStyle .startscreenIntroduction { width: calc(100% - 200px); } .section.intro.leftStyle .section-inner { vertical-align: middle; } } .section.intro.netflixStyle .section-inner { vertical-align: top; padding-top: 45px; } @media screen and (min-width: 1024px) { .section.menu .section-inner { padding-top: 90px; max-width: 1024px; } .section.menu.circle-menu .section-inner { max-width: 1440px; text-align: center; } .section.menu.compact .section-inner { padding-top: 190px; } .section.menu.bgmenu .section-inner { max-width: 1440px; } .section.menu.default .caseBlocks .caseBlock { width: calc(25% - 20px); } .section.menu.default .caseBlocks .caseBlock:nth-child(4n+1) { margin-left: 0; width: calc(25% - 10px); } .section.menu.default .caseBlocks .caseBlock:nth-child(4n+4) { margin-right: 0; width: calc(25% - 10px); } .section.menu.default.gamification:not(.twoCols) .section-inner, .section.menu.default.gamification:not(.threeCols) .section-inner { padding-top: 50px; } .section.menu.default.gamification:not(.twoCols) .caseBlocks .caseBlock, .section.menu.default.gamification:not(.threeCols) .caseBlocks .caseBlock { width: calc(25% - 15px); } .overlay.rightStyle { transform: inherit; } } .caseBlocks .caseBlock.lastCase { display: none; } @media screen and (max-width: 1024px) { .caseBlocks .caseBlock:nth-child(2n+1) { padding-left: 0; } .caseBlocks .caseBlock:nth-child(2n+2) { padding-right: 0; } } @media screen and (min-width: 1024px) { .caseBlocks .caseBlock:nth-child(3n+1) { padding-left: 0; } .caseBlocks .caseBlock:nth-child(3n+3) { padding-right: 0; } } .caseBlock-inner { padding: 14px; } .caseBlocks .caseBlock.lastCase { display: none; } .caseBlock .caseInfo { width: 100%; height: 200px; overflow: hidden; position: relative; } .caseBlock img:not(.case-icon) { width: 100%; min-height: 100%; transform-origin: center; -webkit-transform-origin: center; transform: scale(1); -webkit-transform: scale(1); transition: transform 1s; -webkit-transition: transform 1s; } .caseBlock.animate img:not(.case-icon) { transform: scale(1.2); -webkit-transform: scale(1.2); } .caseBlocks.noZoom .caseBlock.animate:hover img:not(.case-icon) { transform: scale(1); -webkit-transform: scale(1); } .caseBlock .caseType { position: absolute; top: 0; right: 0; color: #fff; line-height: 60px; width: 60px; height: 60px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomleft: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; } .caseBlock .caseIcon { font-size: 22px; } .caseBlock .caseType.case { background: #00464d; } .caseBlock .caseType.teamCase { background: #525199; } .caseBlock .caseTitle { font-size: 22px; color: #00464d; font-weight: bold; } .caseBlock .caseTitle p { margin-bottom: 15px; } .caseBlock.completed img:not(.case-icon) { opacity: 0.4; } .caseBlock.completed .caseTitle { opacity: 0.5; } .menu.gamification:not(.compact) .caseBlock { border: 0; -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); position: relative; overflow: initial; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } .menu.gamification:not(.compact) .caseBlock .caseInfo { -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; transform: translate3d(0, 0, 0); /* Force hardware acceleration */ } .menu.gamification:not(.compact) .caseBlock .imageLayer { display: none; } .menu.gamification:not(.compact) .caseBlock .caseTitle { margin-top: 20px; } .menu.gamification:not(.compact) .caseBlock .caseBlock-inner { padding: 14px 16px; } .menu.gamification:not(.compact) .caseBlock.completed .caseTitle, .menu.gamification:not(.compact) .caseBlock.completed img { opacity: 1; } .menu.gamification:not(.compact) .caseBlock.completed .imageLayer .background { opacity: 0.7; } .menu.gamification:not(.compact) .caseBlock.completed .imageLayer .points { background: #00464d; color: #fff; } .menu.gamification:not(.compact) .caseBlock.started .imageLayer .background { opacity: 0; } .menu.gamification:not(.compact) .caseBlock.started .imageLayer .points { background: #fff; color: #00464d; } .menu.gamification:not(.compact) .caseBlock.started .imageLayer .points .score { color: #00464d; } .menu.gamification:not(.compact) .caseBlock.completed .imageLayer, .menu.gamification:not(.compact) .caseBlock.started .imageLayer { display: block; position: absolute; top: 0; left: 0; right: 0; height: 200px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; -webkit-transform: translate3d(0, 0, 0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate3d(0, 0, 0); /* IE 9 */ transform: translate3d(0, 0, 0); /* IE 10, Fx 16+, Op 12.1+ */ } .menu.gamification:not(.compact) .caseBlock.completed .imageLayer .background, .menu.gamification:not(.compact) .caseBlock.started .imageLayer .background { position: absolute; width: 100%; height: 100%; background: #00464d; background: -moz-linear-gradient(top, #00464d 1%, #00464d 100%); background: -webkit-linear-gradient(top, #00464d 1%, #00464d 100%); background: linear-gradient(to bottom, #00464d 1%, #00464d 100%); -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } .menu.gamification:not(.compact) .caseBlock.completed .imageLayer .smiley, .menu.gamification:not(.compact) .caseBlock.started .imageLayer .smiley { position: absolute; left: 20px; top: -20px; width: 100px; height: 94px; background-size: cover; background-position: center center; background-repeat: no-repeat; } .menu.gamification:not(.compact) .caseBlock.completed .imageLayer .points, .menu.gamification:not(.compact) .caseBlock.started .imageLayer .points { position: absolute; width: 60px; height: 60px; line-height: 15px; top: 43px; left: -8px; text-align: center; font-size: 13px; -webkit-transform: rotate(-3deg); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: rotate(-3deg); /* IE 9 */ transform: rotate(-3deg); /* IE 10, Fx 16+, Op 12.1+ */ -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; padding: 17px 0 0 0; } .menu.gamification:not(.compact) .caseBlock.completed .imageLayer .points .score, .menu.gamification:not(.compact) .caseBlock.started .imageLayer .points .score { display: block; font-size: 18px; font-weight: bold; } .menu.gamification:not(.compact) .caseBlock.completed .imageLayer .text, .menu.gamification:not(.compact) .caseBlock.started .imageLayer .text { position: absolute; top: 50%; left: 50%; display: inline-block; color: #fff; font-size: 28px; font-weight: bold; text-shadow: -3px -3px 0 #000, -3px -2px 0 #000, -3px -1px 0 #000, -3px 0px 0 #000, -3px 1px 0 #000, -3px 2px 0 #000, -3px 3px 0 #000, -2px -3px 0 #000, -2px -2px 0 #000, -2px -1px 0 #000, -2px 0px 0 #000, -2px 1px 0 #000, -2px 2px 0 #000, -2px 3px 0 #000, -1px -3px 0 #000, -1px -2px 0 #000, -1px -1px 0 #000, -1px 0px 0 #000, -1px 1px 0 #000, -1px 2px 0 #000, -1px 3px 0 #000, 0px -3px 0 #000, 0px -2px 0 #000, 0px -1px 0 #000, 0px 0px 0 #000, 0px 1px 0 #000, 0px 2px 0 #000, 0px 3px 0 #000, 1px -3px 0 #000, 1px -2px 0 #000, 1px -1px 0 #000, 1px 0px 0 #000, 1px 1px 0 #000, 1px 2px 0 #000, 1px 3px 0 #000, 2px -3px 0 #000, 2px -2px 0 #000, 2px -1px 0 #000, 2px 0px 0 #000, 2px 1px 0 #000, 2px 2px 0 #000, 2px 3px 0 #000, 3px -3px 0 #000, 3px -2px 0 #000, 3px -1px 0 #000, 3px 0px 0 #000, 3px 1px 0 #000, 3px 2px 0 #000, 3px 3px 0 #000; -webkit-transform: translate(-50%, -50%) rotate(-4deg); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, -50%) rotate(-4deg); /* IE 9 */ transform: translate(-50%, -50%) rotate(-4deg); /* IE 10, Fx 16+, Op 12.1+ */ } .menu.gamification:not(.compact) .caseBlock.completed .imageLayer .text:after, .menu.gamification:not(.compact) .caseBlock.started .imageLayer .text:after { content: attr(data-text); display: block; color: #fff; position: absolute; top: 0; text-shadow: 0px 6px 6px rgba(0, 0, 0, 1); z-index: -1; } .menu.gamification:not(.compact) .caseBlock.bonusCase { background: #00464d; } .menu.gamification:not(.compact) .caseBlock.bonusCase .caseTitle, .menu.gamification:not(.compact) .caseBlock.bonusCase .caseDesc { color: #fff; } .menu.gamification:not(.compact) .caseBlock.bonusCase .imageLayer { display: block; position: absolute; top: 0; left: 0; right: 0; height: 200px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; -webkit-transform: translate3d(0, 0, 0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate3d(0, 0, 0); /* IE 9 */ transform: translate3d(0, 0, 0); /* IE 10, Fx 16+, Op 12.1+ */ } .menu.gamification:not(.compact) .caseBlock.bonusCase .imageLayer .smiley { position: absolute; left: 20px; top: -15px; width: 75px; height: 71px; background-size: cover; background-position: center center; background-repeat: no-repeat; } .menu.gamification:not(.compact) .caseBlock.bonusCase .imageLayer .points { position: absolute; width: 60px; height: 60px; line-height: 27px; background: #fff; top: 32px; left: -8px; text-align: center; font-size: 12px; -webkit-transform: rotate(-3deg); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: rotate(-3deg); /* IE 9 */ transform: rotate(-3deg); /* IE 10, Fx 16+, Op 12.1+ */ -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; padding: 17px 0 0 0; color: #00464d; text-transform: uppercase; } .menu.gamification:not(.compact) .caseBlock.bonusCase .imageLayer .points .score { display: block; font-size: 13px; font-weight: bold; } .menu.gamification:not(.compact) .caseBlock.bonusCase .imageLayer .text { position: absolute; top: 50%; left: 50%; display: inline-block; color: #fff; font-size: 28px; font-weight: bold; text-shadow: -3px -3px 0 #000, -3px -2px 0 #000, -3px -1px 0 #000, -3px 0px 0 #000, -3px 1px 0 #000, -3px 2px 0 #000, -3px 3px 0 #000, -2px -3px 0 #000, -2px -2px 0 #000, -2px -1px 0 #000, -2px 0px 0 #000, -2px 1px 0 #000, -2px 2px 0 #000, -2px 3px 0 #000, -1px -3px 0 #000, -1px -2px 0 #000, -1px -1px 0 #000, -1px 0px 0 #000, -1px 1px 0 #000, -1px 2px 0 #000, -1px 3px 0 #000, 0px -3px 0 #000, 0px -2px 0 #000, 0px -1px 0 #000, 0px 0px 0 #000, 0px 1px 0 #000, 0px 2px 0 #000, 0px 3px 0 #000, 1px -3px 0 #000, 1px -2px 0 #000, 1px -1px 0 #000, 1px 0px 0 #000, 1px 1px 0 #000, 1px 2px 0 #000, 1px 3px 0 #000, 2px -3px 0 #000, 2px -2px 0 #000, 2px -1px 0 #000, 2px 0px 0 #000, 2px 1px 0 #000, 2px 2px 0 #000, 2px 3px 0 #000, 3px -3px 0 #000, 3px -2px 0 #000, 3px -1px 0 #000, 3px 0px 0 #000, 3px 1px 0 #000, 3px 2px 0 #000, 3px 3px 0 #000; -webkit-transform: translate(-50%, -50%) rotate(-4deg); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, -50%) rotate(-4deg); /* IE 9 */ transform: translate(-50%, -50%) rotate(-4deg); /* IE 10, Fx 16+, Op 12.1+ */ } .menu.gamification:not(.compact) .caseBlock.bonusCase .imageLayer .text:after { content: attr(data-text); display: block; color: #fff; position: absolute; top: 0; text-shadow: 0px 6px 6px rgba(0, 0, 0, 1); z-index: -1; } .menu.gamification:not(.compact) .caseBlock .progress { background: #f0f0f0; } .menu.gamification:not(.compact) .caseBlock.bonusCase .progress { display: none; } .menu.gamification:not(.compact) .caseBlock .caseTitle p { margin-bottom: 5px; } .menu.gamification:not(.compact) .caseBlock .caseDesc { line-height: 24px; } .menu.gamification:not(.compact) .caseBlock .caseDesc p { margin-bottom: 15px; } .menu.gamification:not(.compact) .caseBlock .caseOptions .jsStart, .menu.gamification:not(.compact) .caseBlock .caseOptions .jsReset, .menu.gamification:not(.compact) .caseBlock .caseOptions .jsContinue, .menu.gamification:not(.compact) .caseBlock .caseOptions .jsLocked { display: none; } .menu.gamification:not(.compact) .caseBlock .button-bordered { background: #00464d; border-color: #00464d; border-width: 2px; color: #fff; text-transform: capitalize; min-width: 100px; height: auto; padding: 10px 0; box-sizing: border-box; text-align: center; } .menu.gamification:not(.compact) .caseBlock .button-bordered:hover { border-color: #00464d !important; } .menu.gamification:not(.compact) .caseBlock .button-bordered p { margin: 0; } .menu.gamification:not(.compact) .caseBlock .button-bordered.dark { background: #00464d; border-color: #00464d; } .menu.gamification:not(.compact) .caseBlock .button-bordered.dark:hover { border-color: #00464d !important; } .menu.gamification:not(.compact) .caseBlock .button-bordered.gray { background: transparent; border-color: #d7d7d7; color: #00464d; } .menu.gamification:not(.compact) .caseBlock .button-bordered.gray:hover { border-color: #d7d7d7 !important; } .menu.gamification:not(.compact) .caseBlock.bonusCase .button-bordered.gray { color: #fff; } @media screen and (min-width: 768px) { .menu.gamification:not(.compact) .caseBlock { width: calc(50% - 15px); margin: 0 15px 28px 0px; } } /* Progress */ .progress { display: block; height: 4px; width: 100%; position: relative; overflow: hidden; } .progress.orange, .progress.purple { background: rgba(118, 118, 118, 0.1); } .progress.white { background: rgba(255, 255, 255, 0.1); } .progress .progress-fill { position: absolute; top: 0; left: 0; bottom: 0; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; } .progress.orange .progress-fill { background: #00464d; } .progress.orange2 .progress-fill { background: #00464d; } .progress.white .progress-fill { background: #fff; } .progress.purple .progress-fill { background: #525199; } /* MPC */ .mpc { display: block; counter-reset: custom-counter; margin: 30px 0 40px; padding: 0; } .mpc .option { display: block; position: relative; margin: 0; padding: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); -webkit-transition: all 0.3s; transition: all 0.3s; } .mpc .option.correct, .mpc .option.wrong { -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-iteration-count: 1s; animation-iteration-count: 1s; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: transparent; cursor: default; } .mpc .option:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); } .mpc:not(.multiple) .option.listitem:not(.wrong):not(.correct) .sign:before { font-family: 'Poppins' !important; font-weight: bold; content: "•"; line-height: 8px; font-size: 28px !important; margin-top: 10px; } .mpc:not(.multiple) .option .sign:before { content: counter(custom-counter,upper-alpha); counter-increment: custom-counter; position: absolute; left: 2px; top: 11px; color: #00464d; -webkit-transition: all 0.1s; transition: all 0.1s; } .mpc .option.selected .sign:before { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-iteration-count: 1s; animation-iteration-count: 1s; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .mpc.multiple .option .sign:before { content: "\E002"; position: absolute; left: 0; top: 15px; width: 18px; height: 18px; background: transparent; border: 1px solid #00464d; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; font-family: 'scormicons', sans-serif; font-size: 12px; line-height: 18px; color: transparent; text-align: center; -webkit-transition: all 0.2s; transition: all 0.2s; } .mpc.multiple .option.selected .sign:before { background: #00464d; border-color: #00464d; color: #fff; } .mpc .option .title { display: block; margin: -1px -20px; padding: 11px 0 11px 60px; cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .mpc.multiple .option .title { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; } .mpc .option.selected .title { background: #e5e5e5; } .mpc.multiple .option.selected .sign:before { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-iteration-count: 1s; animation-iteration-count: 1s; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: inherit; border-color: inherit; color: #fff; } .section.dark .mpc .option.selected .title { background: #fff; } .mpc.multiple .option.selected.wrong .title, .mpc.multiple .option.selected.correct .title { background: #e5e5e5; } .section.dark .mpc.multiple .option.selected.wrong .title, .section.dark .mpc.multiple .option.selected.correct .title { background: #fff; } .mpc.multiple .option.correct .sign:before { content: "\E004"; color: #349651; } .mpc.multiple .option.wrong .sign:before { content: "\E007"; color: #f00; } .mpc.multiple .option.wrong .sign:before, .mpc.multiple .option.correct .sign:before { -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-iteration-count: 1s; animation-iteration-count: 1s; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; border: none; background: transparent; font-size: 20px; } .mpc .option .title p { margin: 0; } .mpc .option.correct .sign:before { font-family: 'scormicons', sans-serif; font-size: 18px; font-weight: normal; color: #349651; content: "\E004"; } .mpc .option.correct .title { color: #349651; } .mpc .option.wrong .sign:before { font-family: 'scormicons', sans-serif; font-size: 18px; font-weight: normal; color: #f00; content: "\E007"; } .mpc .option.wrong .title { color: #f00; } /* Slider */ .rangeui-content { display: block; width: 100%; position: relative; padding: 0 10px; overflow-x: hidden; min-height: 60px; } .rangeui-content .text { position: absolute; top: 3px; height: 47px; width: 100%; -webkit-transition: all 100ms linear; transition: all 100ms linear; /* Forces hardware acceleration to stop stuttering in Chrome */ -webkit-transform: translate3d(0, 0, 0); } .rangeui-content .text .line svg { margin-left: 0px; transform-origin: 0px 0px 0px !important; position: absolute; left: 50%; transform: translateX(-50%); } .rangeui-content .text .line { background-repeat: no-repeat; background-position: center center; position: absolute; width: 200%; height: 47px; display: block; transform: translateX(-50%); -webkit-transform: translateX(-50%); } .rangeui-content .text .value { font-weight: bold; z-index: 4; top: 27px; width: 180px; text-align: center; position: absolute; left: -90px; } .rangeSlider { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; padding: 0 15px; } .rangeSlider tbody, .rangeSlider tr { width: 100%; } .rangeSlider .start, .rangeSlider .end { line-height: 32px; display: inline-block; vertical-align: middle; -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; white-space: nowrap; font-size: 0; } .rangeSlider .start span, .rangeSlider .end span { font-size: 16px; } .rangeSlider .start { padding: 0px 25px 0px 10px; } .rangeSlider .end { padding: 0px 10px 0px 25px; } .rangeSlider .rangeui { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; vertical-align: middle; -webkit-box-flex: 99; -webkit-flex-grow: 99; -ms-flex-positive: 99; flex-grow: 99; cursor: pointer; height: 23px; background: #d1d1d1; width: 100%; border: none; position: relative; z-index: 15; box-shadow: inset 6px 3px 0px 0px #c6c6c6; -webkit-box-shadow: inset 6px 3px 0px 0px #c6c6c6; -moz-box-shadow: inset 6px 3px 0px 0px #c6c6c6; -moz-border-radius: 19px; -webkit-border-radius: 19px; border-radius: 19px; } .rangeSlider .rangeui.ui-state-disabled { cursor: normal; } .rangeui .dot { position: absolute; left: 50%; top: -4px; z-index: 10; width: 30px; height: 30px; border-radius: 19px; background: #d1d1d1; box-shadow: inset 1px 9px 0 -6px #c6c6c6; transform: translateX(-50%); } .dot.start { left: 0; } .dot.end { right: 0; left: auto; z-index: -1; box-shadow: inset 1px 9px 0 -6px #c6c6c6; transform: translateX(50%); } .rangeui .correctPoint.neutral .scormicon-correct:before { color: #404040; } .rangeui .correctPoint, .rangeui .wrongPoint { position: absolute; top: -3px; width: 30px; height: 30px; background: #fff; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; box-shadow: 1px 1px 3px 0px #c6c6c6; -webkit-box-shadow: 1px 1px 3px 0px #c6c6c6; -moz-box-shadow: 1px 1px 3px 0px #c6c6c6; text-align: center; z-index: 30; } .rangeui .correctAnswer { position: absolute; font-weight: bold; color: #00464d; top: 38px; text-align: center; transform: translateX(-50%); -webkit-transform: translateX(-50%); white-space: nowrap; } .rangeui .correctPoint span, .rangeui .wrongPoint span { font-size: 22px; } .rangeui .correctPoint span { color: #349651; } .rangeui .wrongPoint span { color: #f00; } .rangeSlider .rangeui .ui-slider-handle { -webkit-appearance: none; appearance: none; border: none; display: block; margin-top: -4px; z-index: 25; height: 30px; width: 30px; border-radius: 100%; background-image: url("img/bg-range-thumb.png"); background-repeat: no-repeat; background-position: 50% 50%; background-color: #fff; cursor: pointer; box-shadow: 1px 1px 3px 0px #c6c6c6; position: absolute; transform: translateX(-50%); } .rangeOptions { display: block; position: relative; min-height: 60px; margin: 0 30px; } .rangeOptions .text { position: absolute; display: inline-block; transform: translateX(-50%); -webkit-transform: translateX(-50%); white-space: nowrap; width: 100%; max-width: 130px; text-align: center; } .hasLeftBG .rangeOptions .text:last-of-type { white-space: normal; } .hasRightBG .rangeOptions .text:first-of-type { white-space: normal; } .rangeOptions .text:hover { cursor: pointer; } .case .section-inner .rangeOptions .text.correct { color: #349651; } .case .section-inner .rangeOptions .text.wrong { color: #f00; } .text.highlight { color: #333; font-size: 24px; } /* Open */ textarea { border: 1px solid #d8d5d2; box-sizing: border-box; background: #fff; -webkit-transition: border 0.3s; transition: border 0.3s; -webkit-appearance: none; -moz-appearance: none; appearance: none; resize: none; min-height: 150px; } @media screen and (max-width: 768px) { textarea { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { textarea { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } @media screen and (min-width: 1024px) { textarea { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } textarea:focus { border-color: #00464d; } .answer { display: none; } .answer .givenAnswer { white-space: pre-wrap; font-style: italic; color: #333; position: relative; padding: 0 25px; } @media screen and (max-width: 768px) { .answer .givenAnswer { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .answer .givenAnswer { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } @media screen and (min-width: 1024px) { .answer .givenAnswer { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } .answer .givenAnswer:before, .answer .givenAnswer:after { font: italic 34px 'Poppins', Arial, sans-serif; color: #00464d; } .answer .givenAnswer:before { content: "\201C"; display: inline-block; padding: 0 10px 0 0; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; } .answer .givenAnswer:after { content: "\201D"; padding: 0 0 0 10px; position: relative; top: 10px; line-height: 12px; } .quote-high, .quote-low { background-repeat: no-repeat; background-size: 12px 10px; display: inline-block; width: 12px; height: 10px; } .quote-high { background-image: url('img/quote-high.png'); background-position: center top; } .quote-low { background-image: url('img/quote-low.png'); background-position: center bottom; } /* Video */ .embedContainer, .videoContainer { position: relative; width: 100%; margin-bottom: 60px; } .videoplayer { display: block; position: relative; width: 100%; min-height: 150px; height: auto; } .videoControls { width: 100%; position: absolute; bottom: -50px; z-index: 990; margin: 0 auto; background: #00464d; color: #fff; border-top-right-radius: 0; border-top-left-radius: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); } .videoControls .toggleState, .videoControls .toggleVolume { display: inline-block; width: 50px; text-align: center; padding: 11px 0; cursor: pointer; } .videoControls .toggleState .icon { top: 7px; } .videoControls .toggleVolume { float: right; } .videoControls .toggleVolume .icon { top: 3px; } .videoControls .videoProgress { display: inline-block; width: 70%; max-width: 500px; } .videoControls .videoProgress .progress-bar { background: rgba(51, 51, 51, 0.3); height: 4px; position: relative; top: 21px; width: 100%; } .videoControls .videoProgress .progress-fill { position: absolute; top: 0; left: 0; bottom: 0; background: #fff; } .videoControls .videoTime { padding: 11px 0; line-height: 23px; float: right; } /* Feedback */ .feedback { position: relative; margin: 0px -20px 20px -20px; padding: 30px 20px 1px; background: #00464d; color: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: height 500ms linear, -webkit-transform 500ms linear; transition: height 500ms linear, -webkit-transform 500ms linear; transition: transform 500ms linear, height 500ms linear; transition: transform 500ms linear, height 500ms linear, -webkit-transform 500ms linear; height: 0px; } .feedback a { color: #fff; } .section.textSection .section-inner .feedback h3 { color: #fff; } .feedback h3 { color: #fff; } .feedback.show { height: auto; -webkit-transform: scale(1); transform: scale(1); } .feedback .arrow { content: ''; display: block; bottom: -8px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: absolute; width: 0; height: 0; border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-top: 9px solid #00464d; } .feedback .feedback-neutral, .feedback .feedback-correct, .feedback .feedback-wrong { display: none; } .section.dark .feedback { background: #fff; } .section.dark .feedback:before { border-top-color: #fff; } /*banner*/ .quoteStatement { min-height: 670px; color: #fff; } .quoteStatement .section-inner { padding: 200px 0 100px; max-width: 900px; text-align: center; } .quoteStatement .avatar { background: rgba(240, 240, 240, 0.2); border: 2px solid #00464d; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; padding: 5px; display: inline-block; } .quoteStatement .avatar img { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; overflow: hidden; } .quoteStatement .text { font-weight: bold; font-size: 50px; line-height: 60px; } .quoteStatement.isQuote .text { font-weight: normal; font-style: italic; font-size: 36px; line-height: 56px; } .quoteStatement.isQuote .name { font-style: italic; font-size: 24px; margin-bottom: 25px; } .quoteStatement .bgImg { background: #333; } .quoteStatement .bgImg img { opacity: 0.24; } /* Icons */ .icon { display: inline-block; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center center; } .icon.icon-play { background-image: url('img/icon-play.png'); width: 9px; height: 12px; } .icon.icon-pause { background-image: url('img/icon-pause.png'); width: 9px; height: 12px; } .icon.icon-volume { background-image: url('img/icon-volume.png'); width: 18px; height: 16px; } .icon.icon-volume-mute { background-image: url('img/icon-volume-mute.png'); width: 18px; height: 16px; } .icon.icon-trophy { background-image: url('img/trophy_white.png'); width: 18px; height: 17px; } /* Padding */ .padding-small { padding: 3px; } .padding-medium { padding: 5px; } .padding-large { padding: 10px; } .padding-extralarge { padding: 15px; } .padding-extend { padding: 20px; } .padding-small-top { padding-top: 5px; } .padding-medium-top { padding-top: 10px; } .padding-large-top { padding-top: 15px; } .padding-extralarge-top { padding-top: 25px; } .padding-extend-top { padding-top: 35px; } .padding-extended-top { padding-top: 50px; } .padding-small-bottom { padding-bottom: 5px; } .padding-medium-bottom { padding-bottom: 10px; } .padding-large-bottom { padding-bottom: 15px; } .padding-extralarge-bottom { padding-bottom: 25px; } .padding-extend-bottom { padding-bottom: 35px; } .padding-extended-bottom { padding-bottom: 50px; } .padding-small-right { padding-right: 5px; } .padding-medium-right { padding-right: 10px; } .padding-large-right { padding-right: 15px; } .padding-extralarge-right { padding-right: 25px; } .padding-extend-right { padding-right: 35px; } .padding-extended-right { padding-right: 50px; } .padding-small-left { padding-left: 5px; } .padding-medium-left { padding-left: 10px; } .padding-large-left { padding-left: 15px; } .padding-extralarge-left { padding-left: 25px; } .padding-extend-left { padding-left: 35px; } .padding-extended-left { padding-left: 50px; } .no-padding { padding: 0 !important; } .no-padding-top { padding-top: 0 !important; } .no-padding-bottom { padding-bottom: 0 !important; } /* Margin */ .margin-small-top { margin-top: 5px; } .margin-medium-top { margin-top: 10px; } .margin-large-top { margin-top: 15px; } .margin-larger-top { margin-top: 20px; } .margin-extralarge-top { margin-top: 25px; } .margin-30-top { margin-top: 30px; } .margin-extend-top { margin-top: 35px; } .margin-extended-top { margin-top: 50px; } .margin-small-bottom { margin-bottom: 5px; } .margin-medium-bottom { margin-bottom: 10px; } .margin-large-bottom { margin-bottom: 15px; } .margin-larger-bottom { margin-bottom: 20px; } .margin-extralarge-bottom { margin-bottom: 25px; } .margin-30-bottom { margin-bottom: 30px; } .margin-32-bottom { margin-bottom: 32px; } .margin-extend-bottom { margin-bottom: 35px; } .margin-extended-bottom { margin-bottom: 50px; } .margin-small-right { margin-right: 5px; } .margin-medium-right { margin-right: 10px; } .margin-large-right { margin-right: 15px; } .margin-larger-right { margin-right: 20px; } .margin-extralarge-right { margin-right: 25px; } .margin-extend-right { margin-right: 35px; } .margin-extended-right { margin-right: 50px; } .margin-small-left { margin-left: 5px; } .margin-medium-left { margin-left: 10px; } .margin-large-left { margin-left: 15px; } .margin-larger-left { margin-left: 20px; } .margin-extralarge-left { margin-left: 25px; } .margin-extend-left { margin-left: 35px; } .margin-extended-left { margin-left: 50px; } .margin-exaggerate-bottom { margin-bottom: 125px; } .force-no-margin { margin: 0 !important; } .margin-auto { margin: 0 auto; } .mobileOpen { display: none; } .mobileOpen .inner { display: none; } .button-header.mobileMenu { display: none !important; } .scormicon.hamburgerMenu { background: url('../img/hamburger.png') center no-repeat; background-size: contain; height: 22px; width: 30px; } .progress.mini { height: 2px; } .mobileProgress { display: none; } .mobileProgress .progress { display: none; } @media screen and (max-width: 1024px) { .section.intro { min-width: 0; min-height: 100vh; height: 100%; } .section.intro .section-inner { margin-top: 20px; background-position: center 70px; } .intro header h1 { font-size: 45px; line-height: 45px; } .intro header .subTitle { font-size: 15px; margin-top: 25px; } .header-inner { padding: 0 20px; } .main-header-inner { width: 100%; } .section.menu .menuIntro { width: 100%; border-radius: 0; bottom: 0; padding: 25px; } .mobileMenu { display: inline-block; } .header-right .normal { display: none; } .header { width: 100%; min-width: 0; border-radius: 0; border: none; border-bottom: 1px solid #cbcbcb; } .header-right { display: none !important; } .header .caseImageSmall { left: 24px; } .header .header-inner .header-logo, .header.header-center .header-inner .header-logo { width: 100%; margin: 0; } .header .header-inner .header-logo.logo-top .logo, .header.header-center .header-inner .header-logo.logo-top .logo { right: auto; -webkit-transform: translate(-50%, 0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, 0); /* IE 9 */ transform: translate(-50%, 0); /* IE 10, Fx 16+, Op 12.1+ */ } .header .header-inner .header-logo .logo, .header.header-center .header-inner .header-logo .logo { margin-left: 0; left: 50%; -webkit-transform: translate(-50%, -50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, -50%); /* IE 9 */ transform: translate(-50%, -50%); /* IE 10, Fx 16+, Op 12.1+ */ } .mobileOpen .inner { width: 100%; position: fixed; left: 0; background: #f0f0f0; height: 80px; display: flex; border: none; top: 90px; padding: 0 10px; } .mobileOpen .dropdown { width: 75%; margin: auto; } .mobileOpen.norepo .dropdown { width: 80%; } .header-button-wrapper, .button-header { height: 50px; margin: auto; } .header-title-outer { display: none; } .overlay .button-solid.closeOverlay { left: auto; right: 0; border-radius: 0 0px 0 5px; z-index: 999999; } .overlay { top: 80px; width: 100%; bottom: 0; min-height: 75px; } .button-header.mobileMenu { z-index: 1; position: absolute; top: 0; bottom: 0; background-color: #fff; border-color: #d8d5d2; color: #fff; display: inline-block !important; line-height: 0 !important; height: 48px; width: 48px; transition: all 0.3s ease-in-out; } .button-header.mobileMenu span { display: inline-block; width: 30px; height: 4px; margin: 0 0 5px 0; background: #00464d; transition: all 0.3s ease-in-out; } .button-header.mobileMenu span:nth-child(1) { margin-top: 5px; } .button-header.mobileMenu.active { background: #00464d; } .button-header.mobileMenu.active span { background: #fff; } .button-header.mobileMenu.active span:nth-child(1) { -webkit-transform: rotate(-45deg) translate(-7px, 5px); transform: rotate(-45deg) translate(-7px, 5px); } .button-header.mobileMenu.active span:nth-child(2) { opacity: 0; } .button-header.mobileMenu.active span:nth-child(3) { -webkit-transform: rotate(45deg) translate(-7px, -6px); transform: rotate(45deg) translate(-7px, -6px); } .button-header.mobileMenu .scormicon:before { color: #fff; } } @media screen and (min-width: 769px) and (max-width: 1024px) { .header-image { width: 36%; text-align: right; } } @media screen and (max-width: 1024px) { .header-image { position: absolute; right: 20px; } } .button-header.completedTrigger { display: none; } .header.completed .button-header.completedTrigger.jsCloseWindow { display: inline-block; } @media screen and (max-width: 768px) { h2, h3, h1 { word-break: break-word; } h1 { font-size: 20px; line-height: 40px; } h2 { font-size: 17px; line-height: 25px; } h3 { margin: 0 0 3px; } .circle-header .button-header.mobileMenu { margin: 0; } .content.case :not(.hasFullBG) .main-header { height: 180px !important; } .content.case .section .gamification { position: relative; display: block; margin: 20px 0px 0px; text-align: center; } .content.case .section .gamification .text { padding: 8px 0px; } .content:not(.case) .main-header { min-height: 180px !important; height: auto !important; overflow: hidden; } .content:not(.case) .main-header .main-header-inner { min-height: 180px; } .content:not(.case) .main-header .main-header-inner .menuIntro { position: relative; } .menu .main-header { margin-top: 60px !important; } .introSection .section-inner { margin-top: 0 !important; } .introSection .wvSectionBG { top: 180px; } .completedTrigger.active { display: block; position: absolute; right: 5px; top: 5px; background: #fff; } .introSection.hasMiddleBG .module-block { padding-left: 30px; padding-right: 30px; } .introSection.hasRightBG .wvSectionBG { top: 180px; } .introSection.hasLeftBG .wvSectionBG { top: 180px; } .introSection.hasMiddleBG .main-header { height: 280px !important; overflow: hidden; } .mobileOpen .inner { top: 80px; } .section.introSection.newIntro .main-header { width: 100%; display: block; } .section.introSection.newIntro .section-inner { width: 100%; display: block; padding: 30px !important; min-height: auto; } .header { height: 80px; } .header.showMobile { display: block !important; } .header-logo .logo, .header-logo.wide .logo { max-width: 168px; } .header-image { margin-right: 10px; } .header-title { display: none !important; } .header-right { margin-right: 4px; } .header-right .total-progress { display: none !important; } .mobileOpen .dropdown { width: 60%; } .section:not(.menu):not(.intro) { margin-bottom: 0px; } .section.introSection:not(.menu):not(.intro) { margin-top: 80px; } .section.introSection { margin-bottom: 0 !important; } .section.hasLeftBG + .section.hasLeftBG .wvSectionBG, .section.hasRightBG + .section.hasRightBG .wvSectionBG { top: 0; } .section.wv-hotspot360 { margin: 0 30px; } .feedback { margin-bottom: 38px; padding: 20px 15px 1px; text-align: center; } .overlay .overlay-inner { width: 100%; padding: 20px 30px; height: 100%; overflow: auto; } .overlay.rightStyle .button-solid.closeOverlay { display: block; left: auto; right: 0; } .overlay.whiteStyle { width: 100%; min-width: 0; } .section .wvSectionBG { left: 0 !important; right: 0 !important; width: 100%; border-radius: 0 !important; } .section.textSection:not(.twoColumns) .section-inner .imgContainer { width: calc(100% + 60px) !important; margin-left: -30px !important; border-radius: 0; } .section .section-inner { padding: 80px 30px; } .introSection .section-inner { padding: 0 30px !important; } .section.textSection .section-inner { padding-left: 30px !important; padding-right: 30px !important; } .module-block { padding: 45px 0 25px; } .slider .rangeui-content, .slider .rangeSlider { width: calc(100% + 60px); margin-left: -30px; } .slider .rangeui-content .start, .slider .rangeSlider .start, .slider .rangeui-content .end, .slider .rangeSlider .end { padding: 0px 7px 0px 7px; min-width: 30px; } .margin-30-bottom { margin-bottom: 10px; } .mpc .option .title { padding: 11px 11px 11px 60px; } .section.videocue + .section { margin-top: 0; } .section.wv-hotspot360 { margin-top: 0px !important; } } @media screen and (min-width: 1801px) { .circle-header { border-bottom: none; } .circle-header.dark-theme { background: transparent; } .circle-header.light-theme { background: transparent; } .circle-header.light-theme .header-logo .logo.logo-light { display: block; } .circle-header.light-theme .header-logo .logo:not(.logo-light) { display: none; } .circle-header.light-theme .moduleTitle, .circle-header.light-theme .button-header-home, .circle-header.light-theme .button-header-repo { color: #fff; } .circle-header.light-theme .header-right .ml-total-progress, .circle-header.light-theme .header-right .progress-text, .circle-header.light-theme .header-right .mlSelectBox, .circle-header.light-theme .header-right .button-header { color: #fff; } .circle-header.light-theme .header-right .mlSelectBox .dropdown-list { color: #00464d; } .circle-header.light-theme.customModuleTitleColor .moduleTitle { color: #fff; } .circle-header .button-header-home, .circle-header .button-header-repo { width: 100%; border: none; color: #00464d; text-align: right; } .circle-header .button-header-home .fa, .circle-header .button-header-repo .fa { font-size: 17px; } .circle-header .button-header-home .scormicon, .circle-header .button-header-repo .scormicon { font-size: 17px; } .circle-header .button-header-home .btn-text, .circle-header .button-header-repo .btn-text { display: inline-block; margin-left: 12px; } .circle-header .header-right .ml-total-progress { margin-right: 40px; } .circle-header .header-right .mlSelectBox, .circle-header .header-right .button-header { border: none; color: #00464d; } .circle-header .header-right .mlSelectBox .btn-text, .circle-header .header-right .button-header .btn-text { display: inline-block; margin-left: 12px; } .circle-header .header-right .mlSelectBox { background: transparent; min-width: 140px; margin: 0 0 0 30px; } .circle-header .header-right .mlSelectBox .dropdown-value { padding: 11px 25px 11px 12px; } .circle-header .header-right .mlSelectBox .dropdown-caret { right: 0; } .circle-header .header-right .button-header { min-height: 50px; margin-left: 30px; } .circle-header .header-right .button-header .btn-text, .circle-header .header-right .button-header .scormicon-info { vertical-align: middle; } .circle-header .dropdown-addon { background: transparent; border: none; width: auto; } } @media screen and (max-width: 1800px) { .header.circle-header.dark-theme, .header.circle-header.light-theme { width: 100%; min-width: 0; border-radius: 0; border: none; border-bottom: 1px solid #cbcbcb; background: #fff; } .header.circle-header .header-inner { padding: 0 20px; } .header.circle-header .header-inner .header-logo { width: 100%; margin: 0; } .header.circle-header .header-inner .header-logo.logo-top .logo { right: auto; -webkit-transform: translate(-50%, 0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, 0); /* IE 9 */ transform: translate(-50%, 0); /* IE 10, Fx 16+, Op 12.1+ */ } .header.circle-header .header-inner .header-logo .logo { margin-left: 0; left: 50%; -webkit-transform: translate(-50%, -50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, -50%); /* IE 9 */ transform: translate(-50%, -50%); /* IE 10, Fx 16+, Op 12.1+ */ } .header.circle-header .header-inner .caseImageSmall { width: 0; overflow: hidden; } .header.circle-header .header-inner .caseImageWrapper, .header.circle-header .header-inner .header-title-outer, .header.circle-header .header-inner .header-image, .header.circle-header .header-inner .header-location, .header.circle-header .header-inner .header-right, .header.circle-header .header-inner .moduleTitle { display: none !important; } .header.circle-header .button-header.mobileMenu { display: inline-block !important; } .header.circle-header .button-header.mobileMenu { z-index: 1; position: absolute; top: 0; bottom: 0; background-color: #fff; border-color: #d8d5d2; color: #fff; display: inline-block !important; line-height: 0 !important; height: 48px; width: 48px; transition: all 0.3s ease-in-out; } .header.circle-header .button-header.mobileMenu span { display: inline-block; width: 30px; height: 4px; margin: 0 0 5px 0; background: #00464d; transition: all 0.3s ease-in-out; } .header.circle-header .button-header.mobileMenu span:nth-child(1) { margin-top: 5px; } .header.circle-header .button-header.mobileMenu.active { background: #00464d; } .header.circle-header .button-header.mobileMenu.active span { background: #fff; } .header.circle-header .button-header.mobileMenu.active span:nth-child(1) { -webkit-transform: rotate(-45deg) translate(-7px, 5px); transform: rotate(-45deg) translate(-7px, 5px); } .header.circle-header .button-header.mobileMenu.active span:nth-child(2) { opacity: 0; } .header.circle-header .button-header.mobileMenu.active span:nth-child(3) { -webkit-transform: rotate(45deg) translate(-7px, -6px); transform: rotate(45deg) translate(-7px, -6px); } .header.circle-header .button-header.mobileMenu .scormicon:before { color: #fff; } .header.circle-header .header-button-wrapper, .header.circle-header .button-header { height: 50px; margin: auto; } .header.circle-header .mobileOpen .inner { width: 100%; position: fixed; left: 0; background: #f0f0f0; height: 80px; display: flex; border: none; top: 90px; padding: 0 10px; } .header.circle-header .mobileOpen .dropdown { width: 75%; margin: auto; } .header.circle-header .mobileOpen.norepo .dropdown { width: 80%; } } @media screen and (max-width: 786px) { .header.circle-header .mobileOpen .inner { top: 80px; } } @media screen and (max-width: 786px) { .header-logo.hasMobilePic .logo.logo-mobile, .content .section.hasMobilePic .logo.logo-mobile { display: block; } .header-logo.hasMobilePic .logo:not(.logo-mobile), .content .section.hasMobilePic .logo:not(.logo-mobile) { display: none; } .content .section.hideBackgroundMobile .asset.bgImage img { display: none; } } @media screen and (max-width: 1024px) { .mobileProgress .progress { display: block; } .mobileProgress { position: absolute; bottom: 0; left: 0; right: 0; } .header .caseImageSmall { width: 0; overflow: hidden; } .header-image img { max-height: 60px; max-width: 100%; } } .header.hideheader { opacity: 0 !important; } .section.videocue { padding-bottom: 50px; margin-bottom: 0; } .introSection.newIntro.introSeen + .section.videocue { margin-top: 0; } /* Text & Image */ .section.textSection.isIntroduction { padding-top: 100px; margin-bottom: 0; min-height: 100vh; background: #f5f5f5; z-index: 100; } .section.textSection .section-inner { padding-left: 0; padding-right: 0; transform: translate3d(0, 0, 0); } .section.textSection .section-inner h3 { font-size: 28px; color: #00464d; line-height: 30px; } .section.textSection .section-inner .textExplanation { line-height: 30px; color: #00464d; } @media screen and (max-width: 768px) { .section.textSection .section-inner .textExplanation { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .section.textSection .section-inner .textExplanation { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } @media screen and (min-width: 1024px) { .section.textSection .section-inner .textExplanation { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } .section.textSection .section-inner .limiter { max-width: 678px; transform: translate3d(0, 0, 0); } .section.textSection .section-inner .imgContainer img { width: 100%; } .section.textSection .section-inner .caption { text-align: left; } .section.textSection.hasBG .section-inner .imgContainer { width: 100%; } .section.textSection .section-inner .imgContainer { width: 100%; margin-left: 0px; } @media screen and (min-width: 1050px) { .section.textSection .section-inner .imgContainer.wider { width: 150%; margin-left: -25%; } } .section.textSection.hasRightBG .section-inner .imgContainer { margin-left: 0; } /* Quote (Parallax) */ .section.quoteStatement .focusAsset img { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; width: 100%; min-height: 125%; min-width: 100%; } .section.quoteStatement .text { word-break: break-word; } @media screen and (max-width: 768px) { .section.quoteStatement .text { font: bold 30px 'Poppins', sans-serif !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .section.quoteStatement .text { font: bold 50px 'Poppins', sans-serif !important; } } @media screen and (min-width: 1024px) { .section.quoteStatement .text { font: bold 50px 'Poppins', sans-serif !important; } } .section.quoteStatement { margin-bottom: 0px; } .section.quoteStatement + .section.hasRightBG:not(.quoteStatement) { margin-top: -75px; z-index: 1; } .section.quoteStatement + .section.hasLeftBG:not(.quoteStatement) { margin-top: -75px; z-index: 1; } .section.quoteStatement .jsNext { position: absolute; bottom: 100px; right: 0; left: 0; margin: 0 auto; width: 100px; z-index: 1; } .section.quoteStatement.oneColumn .text { width: 100%; text-align: center; letter-spacing: -0.3px; } .section.quoteStatement.twoColumns .text { padding-right: 10px; width: 400px; text-align: left; display: inline-block; } .section.quoteStatement.light .text { color: #fff; } .section.quoteStatement.dark .text { color: #404040; } .section.quoteStatement.light .button-bordered .scormicon:before { color: #fff; } .section.quoteStatement.dark .button-bordered { border-color: #404040; } .section.quoteStatement.dark .button-bordered .scormicon:before { color: #404040; } .section.quoteStatement .section-inner { max-width: 960px; text-align: center; position: relative; left: 0; right: 0; display: flex; align-items: center; padding: 200px 0 150px; } .section.quoteStatement .section-inner .texts { width: 100%; } .section.quoteStatement .focusAsset .backgroundImageContainer { width: 100%; height: calc(100% + 300px); position: absolute; top: 0; left: 0; z-index: 1; background-size: cover; background-position: center center; } .module-block { font-size: 52px; font-weight: bold; line-height: 62px; } @media screen and (max-width: 768px) { .module-block { font-weight: bold; font-size: 30px; line-height: 35px; } } @media screen and (max-width: 768px) { .module-block { font: bold 30px 'Poppins', sans-serif !important; line-height: 35px !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .module-block { font: bold 52px 'Poppins', sans-serif !important; line-height: 62px !important; } } @media screen and (min-width: 1024px) { .module-block { font: bold 52px 'Poppins', sans-serif !important; line-height: 62px !important; } } .introSection .limiter .text { font-style: normal; line-height: 32px; } @media screen and (max-width: 768px) { .introSection .limiter .text { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .introSection .limiter .text { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } @media screen and (min-width: 1024px) { .introSection .limiter .text { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } .section-inner .titleHeader, .videocue .titleHeader { color: #00464d; } @media screen and (max-width: 768px) { .section-inner .titleHeader, .videocue .titleHeader { font: bold 28px 'Poppins', sans-serif !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .section-inner .titleHeader, .videocue .titleHeader { font: bold 28px 'Poppins', sans-serif !important; } } @media screen and (min-width: 1024px) { .section-inner .titleHeader, .videocue .titleHeader { font: bold 28px 'Poppins', sans-serif !important; } } .section-inner .hotspotHeader { color: #00464d; } @media screen and (max-width: 768px) { .section-inner .hotspotHeader { font: bold 28px 'Poppins', sans-serif !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .section-inner .hotspotHeader { font: bold 28px 'Poppins', sans-serif !important; } } @media screen and (min-width: 1024px) { .section-inner .hotspotHeader { font: bold 28px 'Poppins', sans-serif !important; } } .section-inner div.title, .section-inner h2.title { color: #00464d; } .section-inner .question { text-align: left; } @media screen and (max-width: 768px) { .section-inner .question { font: normal 20px 'Poppins', sans-serif !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .section-inner .question { font: normal 20px 'Poppins', sans-serif !important; } } @media screen and (min-width: 1024px) { .section-inner .question { font: normal 16px 'Poppins', sans-serif !important; } } @media screen and (max-width: 768px) { .section-inner .text { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .section-inner .text { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } @media screen and (min-width: 1024px) { .section-inner .text { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } .section-inner .textExplanation { color: #00464d; } @media screen and (max-width: 768px) { .section-inner .textExplanation { font: normal 18px 'Poppins', sans-serif !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .section-inner .textExplanation { font: normal 18px 'Poppins', sans-serif !important; } } @media screen and (min-width: 1024px) { .section-inner .textExplanation { font: normal 18px 'Poppins', sans-serif !important; } } .case .section-inner .text.darker { color: #333; } .case .introSection .section-inner .text { color: #fff; } .mpc .option { font-size: 18px; } .mpc .option.correct .sign:before, .mpc .option.wrong .sign:before { font-size: 26px !important; } @media screen and (max-width: 768px) { .feedback h3 { font: normal 20px 'Poppins', sans-serif !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .feedback h3 { font: normal 20px 'Poppins', sans-serif !important; } } @media screen and (min-width: 1024px) { .feedback h3 { font: normal 20px 'Poppins', sans-serif !important; } } .feedback { padding: 30px 40px 1px; } @media screen and (max-width: 768px) { .feedback { font: normal 16px 'Poppins', sans-serif !important; line-height: 28px !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .feedback { font: normal 16px 'Poppins', sans-serif !important; line-height: 28px !important; } } @media screen and (min-width: 1024px) { .feedback { font: normal 16px 'Poppins', sans-serif !important; line-height: 28px !important; } } .slider .section-inner .question { color: #333; } .slider .section-inner .text { color: #00464d; } @media screen and (max-width: 768px) { .section-inner .titleHeader { font-size: 17px; line-height: 25px; } .section.intro.leftStyle .section-inner h1 { font-size: 30px; line-height: 30px; } .section.intro.leftStyle .section-inner .subTitle { font-size: 16px; } .section.intro.netflixStyle .section-inner h1 { font-size: 30px; line-height: 30px; } .section.intro.netflixStyle .section-inner .subTitle { font-size: 16px; } .case .section-inner .text, .case .section-inner .textExplanation { font-size: 17px; line-height: 25px; color: #00464d; } .section.quoteStatement { min-height: 375px; padding-bottom: 105px; } .case .section.quoteStatement .text { font-size: 30px; line-height: 35px; } .case .section.quoteStatement .name p { margin: 0 0 45px; } .case .section.quoteStatement .name { font-size: 15px; line-height: 25px; } .section.quoteStatement + .section.hasRightBG:not(.quoteStatement) { margin-top: 0; } .section.quoteStatement + .section.hasLeftBG:not(.quoteStatement) { margin-top: 0; } .section.quoteStatement .section-inner { min-height: 265px; height: auto; max-width: 100%; padding: 40px 40px 0px; } .section.quoteStatement .jsNext { bottom: 55px; } .section.quoteStatement.oneColumn .text { max-width: 900px; width: auto; } .section.quoteStatement .text { font-size: 30px; line-height: 35px; } .section.quoteStatement.twoColumns .texts { text-align: center; width: 100%; } .section.quoteStatement.twoColumns .text { font-size: 30px; padding-right: 0px; width: 240px; } .case.game .wv-bonus .section-inner .bonus .option { width: calc(50% - 10px); margin: 0; } .case.game .wv-bonus .section-inner .bonus .option:first-child { margin-right: 20px; } } @media screen and (max-width: 375px) { .case.game .wv-bonus .section-inner .bonus .option { width: 100% !important; margin: 10px 0 !important; } } .case .wv-bonus .section-inner .bonus { display: block; text-align: center; margin: 0 0 25px 0; } .case .wv-bonus .section-inner .bonus .option { padding: 15px; display: inline-block; width: 25%; margin: 0 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; border: 2px solid transparent; cursor: pointer; background: rgba(51, 51, 51, 0.1); text-align: left; } .case .wv-bonus .section-inner .bonus .option.active { border-color: #fff; } .case .wv-bonus .section-inner .bonus .option .title { font-weight: bold; } .case .wv-bonus .section-inner .bonus .option .title p { margin: 0 0 10px 0; } .case .wv-bonus .section-inner .bonus .option .points-text p { display: inline-block; margin: 0; } .case .wv-bonus .section-inner .bonus .option .type { display: block; padding: 5px 0; } .case .wv-bonus .section-inner .bonus .option .type .icon { margin: 8px 10px 8px 0; } /* Keyframes */ @-webkit-keyframes popup-open { 0% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); } } @keyframes popup-open { 0% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes popup-open-mobile { 0% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0); } } @keyframes popup-open-mobile { 0% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } } @-webkit-keyframes popup-close { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); } } @keyframes popup-close { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } } @-webkit-keyframes popup-close-mobile { 0% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); } } @keyframes popup-close-mobile { 0% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } } @-webkit-keyframes popup-elem { 0% { opacity: 0; -webkit-transform: translate3d(0, 25px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); } } @keyframes popup-elem { 0% { opacity: 0; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes innerPulse { 0% { opacity: 0; } 50% { opacity: 0.3; } 100% { opacity: 0; } } @-webkit-keyframes innerPulse { 0% { opacity: 0; } 50% { opacity: 0.3; } 100% { opacity: 0; } } @keyframes outerPulse { 0% { opacity: 0; } 50% { opacity: 0.15; } 100% { opacity: 0; } } @-webkit-keyframes outerPulse { 0% { opacity: 0; } 50% { opacity: 0.15; } 100% { opacity: 0; } } @keyframes hpAttention { 0%, 50%, 100% { background-color: #00464d; border-color: #00464d; } 25%, 75% { background-color: #00464d; border-color: #00464d; } } @-webkit-keyframes hpAttention { 0%, 50%, 100% { background-color: #00464d; border-color: #00464d; } 25%, 75% { background-color: #00464d; border-color: #00464d; } } .hotspot.attentionAnimation .dot:not(.done) { -webkit-animation: 3s ease hpAttention; animation: 3s ease hpAttention; } /* Hotspot */ .section.wv-hotspot { z-index: 2; } .wv-hotspot .sub-text { color: #00464d; margin-top: 20px; margin-bottom: 40px; font-size: 18px; } .wv-hotspot .section-inner .title { font-size: 17px; line-height: 25px; } .wv-hotspot.hiddenHotspots .hotspot { overflow: hidden; } .wv-hotspot .hotspot { margin: 0 auto; margin-top: 40px; position: relative; width: calc(100% + 130px); margin-left: -65px; } .wv-hotspot .hotspot .hotspot-overlay { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(64, 64, 64, 0.75); z-index: 4; opacity: 0; pointer-events: none; } .wv-hotspot .hotspot img, .wv-movingimage .movingimage img { max-width: 100%; width: 100%; pointer-events: none; } .wv-hotspot.hiddenHotspots .hotspot .dot { display: none; } .wv-hotspot.hiddenHotspots .hotspot .dot.userDot { display: block; } .wv-hotspot.hiddenHotspots .hotspot .dot.userDot.answerCorrect .correct { display: block; } .wv-hotspot.hiddenHotspots .hotspot .dot.userDot.answerWrong .wrong { display: block; } .hotspot .hotspotFeedback { display: none; position: absolute; top: 0; left: 0; min-height: 100%; width: 100%; } .hotspot .area { position: absolute; cursor: default; margin: -20px -11px; } .hotspot .dot { position: absolute; cursor: pointer; width: 30px; height: 30px; opacity: 1; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background-color: #fff; margin: -25px; } .hotspot .dot .correct, .hotspot .dot .wrong, .hotspot .dot .default { display: none; text-align: center; margin-top: 3px; } .hotspot .dot .correct svg, .hotspot .dot .wrong svg, .hotspot .dot .default svg { width: 15px; height: 15px; } .hotspot .dot:not(.open):not(.done) .default { display: block; } .hotspot .dot.done:not(.answerWrong):not(.open) .correct { display: block; } .hotspot .dot.open .wrong { display: block; } .hotspot .dot-pulse { position: absolute; width: 30px; height: 30px; opacity: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .hotspot .dot-pulse.inner-pulse { animation: innerPulse 2s infinite; border: 3px solid #fff; width: 36px; height: 36px; left: -3px; top: -3px; z-index: 2; } .hotspot.attentionAnimation .dot:not(.done) .dot-pulse.inner-pulse { animation: innerPulse 2s infinite, 3s ease hpAttention; } .hotspot .dot-pulse.outer-pulse { animation: outerPulse 2s infinite; border: 6px solid #fff; width: 42px; height: 42px; left: -6px; top: -6px; z-index: 1; } .hotspot.attentionAnimation .dot:not(.done) .dot-pulse.outer-pulse { animation: outerPulse 2s infinite, 3s ease hpAttention; } .hotspot .dot.done .dot-pulse { animation: none; } .flashcards .card .dot-pulse { position: absolute; width: 190px; height: 240px; opacity: 0; } .flashcards .card .dot-pulse.inner-pulse { animation: innerPulse 2s infinite; border: 3px solid #00464d; width: 196px; height: 246px; left: -3px; top: -3px; z-index: 2; } .flashcards .card .dot-pulse.outer-pulse { animation: outerPulse 2s infinite; border: 6px solid #00464d; width: 202px; height: 252px; left: -6px; top: -6px; z-index: 1; } .flashcards .card.flipped .dot-pulse { animation: none; } .hotspot .popup { display: none; position: absolute; background: #00464d; width: 350px; padding: 20px; -moz-box-shadow: 0 25px 25px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 25px 25px rgba(0, 0, 0, 0.1); box-shadow: 0 25px 25px rgba(0, 0, 0, 0.1); -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; z-index: 5; } .hotspot .popup .arrow { content: ''; display: block; left: -6px; top: 20px; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: absolute; width: 0; height: 0; border-bottom: 12px solid transparent !important; border-top: 12px solid transparent !important; border-right: 12px solid #00464d; } .hotspot .popup.left .arrow { right: -18px; left: auto; border-left: 12px solid #00464d; border-right: none; } .hotspot .popup.open { display: block; -webkit-animation-name: popup-open; animation-name: popup-open; } .hotspot.wv-hotspot360 .popup.open { margin-top: 20px; } .hotspot .popup.close { display: block; -webkit-animation-name: popup-close; animation-name: popup-close; } @media screen and (max-width: 768px) { .hotspot .popup.close { -webkit-animation-name: popup-close-mobile; animation-name: popup-close-mobile; } } .hotspot .popup .title { font-size: 20px; line-height: 26px; color: #fff; font-weight: bold; } .hotspot .popup .title a { color: #fff; } .hotspot .popup .title p { margin: 0 0 5px; } .hotspot .popup .popup-close, .hotspot .popup .title { -webkit-animation-delay: 0.05s; animation-delay: 0.05s; } .hotspot .popup .body { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; line-height: 26px; font-size: 16px; color: #fff; } @media screen and (max-width: 768px) { .hotspot .popup .body { font: normal 16px 'Poppins', sans-serif !important; line-height: 28px !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .hotspot .popup .body { font: normal 16px 'Poppins', sans-serif !important; line-height: 28px !important; } } @media screen and (min-width: 1024px) { .hotspot .popup .body { font: normal 16px 'Poppins', sans-serif !important; line-height: 28px !important; } } .hotspot .popup .body a { color: #fff; } .hotspot .popup .body p { margin: 0; } .section.menu.menuhotspot .hotspot .popup .title, .section.menu.menuhotspot .hotspot .popup .body { color: #00464d; } .hotspot .popup .popup-close { z-index: 5; } .hotspot .popup .popup-close, .hotspot .popup .title, .hotspot .popup .body { -webkit-animation: popup-elem 0.3s both; animation: popup-elem 0.3s both; } .wv-carousel .jsNext { margin-top: 20px; } .section.wv-carousel .section-inner { max-width: none; } .carousel { position: relative; } .carousel .titleintrowrapper { padding-bottom: 40px; } .carousel .titleintrowrapper.hasNoHeight { padding-bottom: 0px; } .carousel .headers { height: 50px; } .carousel .headers .line { position: relative; height: 0; pointer-events: none; width: 3200px; transform: translateX(-50%); margin-left: -10px; } .carousel .headers .header-item { display: inline-block; height: 50px; line-height: 50px; font-size: 20px; text-align: center; cursor: pointer; } .carousel .headers .header-item p { margin: 0; } .carousel .slides { width: 100%; height: 700px; overflow: hidden; position: relative; white-space: nowrap; } .carousel .slides .slide { width: 100%; height: 100%; position: relative; display: inline-block; overflow: hidden; text-align: center; } .carousel .slides .slide img.backgroundImage { width: 100%; min-height: 100%; } .carousel .slides .slide .backgroundImagePositioner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center center; background-size: cover; background-repeat: no-repeat; } .carousel .slides .slide .slideImage { width: 100%; } .carousel .slides .slide .slide-text { position: absolute; width: 100%; height: 100%; top: 0; display: table; white-space: normal; } .carousel .slides .slide .slide-text .inner { display: table-cell; vertical-align: middle; text-align: left; font-size: 25px; color: #fff; line-height: 30px; padding: 0px 150px; } .carousel .slides .slide .slide-text p { margin: 0; } .carousel .controls .arrows { position: absolute; top: 50%; height: 80px; width: 100%; padding: 0px 20px; pointer-events: none; } .carousel .controls .arrows .left, .carousel .controls .arrows .right { background-image: url('img/white-arrow-sprite.png'); width: 44px; height: 80px; background-size: cover; pointer-events: all; cursor: pointer; } .carousel .controls .arrows .left { background-position-x: 0; float: left; } .carousel .controls .arrows .right { background-position-x: 44px; float: right; } .carousel .controls .bullets { text-align: center; position: absolute; width: 100%; height: 20px; left: 0; bottom: 20px; pointer-events: none; } .carousel .controls .bullets .bullet { background: rgba(255, 255, 255, 0.3); width: 8px; height: 8px; display: inline-block; margin: 0px 10px; cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .carousel .controls .bullets .bullet.active { background: #fff !important; } .section.textSection.repoItem .section-inner { padding: 0; } .section.textSection.repoItem .section-inner .textElements { display: none; } .icon { display: inline-block; background-size: cover; width: 30px; height: 30px; } .icon.clock { background-image: url('img/clock-icon.png'); } .icon.tick { width: 12px; height: 12px; background-image: url('img/icon-tick.png'); } .icon.cross { width: 12px; height: 12px; background-image: url('img/icon-cross.png'); } .icon.icon-locked { background-image: url('img/lock-icon.png'); width: 16px; height: 21px; } .icon.icon-locked-w { background-image: url('img/lock-icon-white.png'); width: 16px; height: 21px; } .wvVolgordeList { width: 100%; margin: auto; position: relative; padding-left: 50px; } .wvVolgordeList .listNumbers { position: absolute; top: 0; left: 0; width: 100%; } .wvVolgordeList .listNumbers .number { text-align: left; font-size: 20px; margin-bottom: 9px; width: 100%; background: #00464d; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; -ms-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; line-height: 65px; color: #00464d; padding-left: 0; } .wvVolgordeList .listNumbers .number span { display: block; width: 55px; text-align: center; } .wvVolgordeList .answer { border-bottom: 1px solid black; cursor: move; margin: 0 auto 9px; position: relative; box-sizing: content-box; display: block; overflow: hidden; height: 57px; border: 4px solid #fff; border-radius: 0; padding: 0px; background: #fff; color: #fff; -webkit-box-shadow: 0px 3px 10px -1px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 3px 10px -1px rgba(0, 0, 0, 0.4); box-shadow: 0px 3px 10px -1px rgba(0, 0, 0, 0.4); } .wvVolgordeList .answer .sign { position: absolute; top: 16px; right: 17px; } .wvVolgordeList .answer.correct .sign:before { font-family: 'scormicons', sans-serif; font-size: 30px; font-weight: normal; color: #349651; content: "\E004"; } .wvVolgordeList .answer.wrong .sign:before { font-family: 'scormicons', sans-serif; font-size: 30px; font-weight: normal; color: #f00; content: "\E007"; } .wvVolgordeList .answer .move-icon { background-image: url('img/hamburger.png'); width: 25px; height: 18px; background-size: cover; position: absolute; top: 0; right: 0; margin: 19px 12px; } .wvVolgordeList .wvVolgordePlaceholder { width: 100%; height: 58px; margin-bottom: 13px; } .wvVolgordeList .arrow { width: 30px; height: 30px; position: absolute; border-radius: 50%; top: 15px; } .wvVolgordeList .arrow.up { background: url('img/arrow-up.png') #dfdfdf no-repeat; background-size: 14px 8px; right: 10px; background-position: center; } .wvVolgordeList .arrow.down { background: url('img/arrow-down.png') #dfdfdf no-repeat; background-size: 14px 8px; left: 10px; background-position: center; } .wvVolgordeList .arrow.disabled { opacity: 0; } .wvVolgordeList .butVisible { opacity: 1 !important; } .wvVolgordeList .answerText { margin: auto; width: 100%; font-size: 15px; margin-top: 0px; position: relative; padding-right: 50px; padding-left: 20px; display: table; height: 58px; } .wvVolgordeList .answerText .inner { display: table-cell; vertical-align: middle; } .wvVolgordeList .answerText .inner p { margin: 0; } .wvVolgordeList .faded { opacity: 0.8; } .button-solid.resetQuestion { padding: 5px 20px; margin-top: 10px !important; margin-bottom: 10px !important; } .button-solid.resetQuestion p { margin: 0; } @media screen and (min-width: 768px) { .wvVolgordeIntro .intro { width: 465px; margin: 33px auto 25px; margin-bottom: 36px; line-height: 30px; font-size: 24px; } .wvVolgordeList { padding-left: 55px; } .wvVolgordeList .arrow { top: 22px; } .wvVolgordeList .arrow.up { right: 15px; } .wvVolgordeList .arrow.down { left: 15px; } .wvVolgordeList .answer { margin: 0 auto 13px; height: 57px; } .wvVolgordeList .answer .move-icon { width: 28px; height: 20px; margin: 18px 16px; } .wvVolgordeList .answer .sign { position: absolute; top: 15px; left: auto; right: 20px; } .wvVolgordeList .answer.correct .sign:before { font-size: 40px; } .wvVolgordeList .answer.wrong .sign:before { font-size: 40px; } .wvVolgordeList .answerText { width: 100%; font-size: 24px; margin-top: 2px; padding: 0px 60px 0px 40px; display: table; height: 55px; } .wvVolgordeList .listNumbers { width: 100%; } .wvVolgordeList .listNumbers .number { font-size: 30px; margin-bottom: 13px; } .wvVolgordeList .listNumbers .number span { display: block; width: 55px; text-align: center; } } @media screen and (max-width: 768px) { .carousel .headers .header-item { font-size: 15px; padding: 0px 5px; overflow: hidden; } .carousel .headers .line { left: 50% !important; } .carousel .headers .header-items { position: relative; white-space: nowrap; } .carousel .headers .header-items .header-item { opacity: 1; width: 100% !important; display: inline-block; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .carousel .headers .header-items .header-item:not(.active) { opacity: 0; } .carousel .slides { height: 400px; } .carousel .slides .slide .slide-text { padding: 0px 20px 70px; } .carousel .slides .slide .slide-text .inner { font-size: 15px; line-height: 20px; padding: 0; } .carousel .controls .arrows { font-size: 15px; color: #fff; line-height: 20px; top: auto; bottom: 10px; height: 45px; } .carousel .controls .arrows .left, .carousel .controls .arrows .right { width: 22px; height: 40px; } .carousel .controls .arrows .right { background-position-x: 22px; } .hotspotContainer { min-height: 200px; } .wv-hotspot .hotspot .hotspot-overlay { opacity: 1; pointer-events: all; } .wv-hotspot.hasRightBG .hotspot, .wv-hotspot .hotspot { margin-left: -30px; width: calc(100% + 60px); border-radius: 0; } .hotspot .popup { left: 0 !important; right: 0; top: 50% !important; width: 85%; max-height: 85%; min-height: 170px; margin: auto; transform: translate(0, -50%); -webkit-transform-origin-x: translate(0, -50%); } .hotspot .popup.open { -webkit-animation-name: popup-open-mobile; animation-name: popup-open-mobile; } .hotspot .popup:before { display: none; } .hotspot .inner-popup { max-height: 100px; overflow: auto; margin-bottom: 15px; } .hotspot .popup .popup-close { text-align: center; margin: auto; font-size: 13px; line-height: 28px; color: #878787; } .hotspot .popup .popup-close .close { display: inline-block; width: 40px; height: 40px; border: 1px solid #8c896e; cursor: pointer; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-image: url('img/icon-cross-hotspot.png'); background-position: center center; background-repeat: no-repeat; background-size: 10px 10px; } .hotspot.assignment-hotspot .popup .popup-close .close { background-image: url('img/icon-cross-hotspot-white.png'); background-size: 16px; border: 0; } } @media screen and (max-width: 768px) { .hotspot .inner-popup { max-height: 80px; margin-bottom: 10px; } .section.wv-hotspot .hotspotContainer .hotspot .inner-popup { max-height: 130px; margin-bottom: 0px; } .section.textSection .embedContainer { min-height: 250px; } } .section.flashSection .flashcards { text-align: center; margin: 0; } .section.flashSection .flashcards .card { cursor: pointer; } .section.flashSection .flashcards .flip-container { margin: 10px 20px 10px 0px; perspective: 1000px; transform-style: preserve-3d; } .section.flashSection .flashcards .flip-container, .section.flashSection .flashcards .front, .section.flashSection .flashcards .back { width: 190px; height: 240px; font-size: 18px; display: inline-block; } .section.flashSection .flashcards .flipper { -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -ms-transition: 0.6s; -moz-transition: 0.6s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 0.6s; transform-style: preserve-3d; position: relative; width: 190px; height: 240px; } .section.flashSection .flashcards .image { width: 190px; height: 240px; position: relative; } .section.flashSection .flashcards .flipSide { background: #fff; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0); -moz-transition: 0.6s; -moz-transform-style: preserve-3d; -moz-transform: translate3d(0, 0, 0); -o-transition: 0.6s; -o-transform-style: preserve-3d; -o-transform: translate3d(0, 0, 0); -ms-transition: 0.6s; -ms-transform-style: preserve-3d; -ms-transform: translate3d(0, 0, 0); transition: 0.6s; transform-style: preserve-3d; transform: translate3d(0, 0, 0); -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1); position: absolute; top: 0; left: 0; border: 1px solid #ececec; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } .section.flashSection .flashcards .flipSide.has-image { border: none; } .section.flashSection .flashcards .flipSide .inner { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; overflow: hidden; } .section.flashSection .flashcards .front { -ms-backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); z-index: 2; } .section.flashSection .flashcards .front .flipText { font-size: 13.5px; padding: 8px; } .section.flashSection .flashcards .front .image { position: absolute; top: 0; left: 0; overflow: hidden; width: 190px; height: 240px; } .section.flashSection .flashcards .back { -ms-backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; background: #fff; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } .section.flashSection .flashcards .back .image { position: absolute; top: 0; left: 0; overflow: hidden; width: 190px; height: 240px; } .section.flashSection .flashcards .back .flipText { font-size: 13.5px; padding: 8px; } .section.flashSection .flashcards .front .name { background: rgba(33, 33, 33, 0.9); color: #f8f8f8; padding: 5px 10px; border-radius: 5px; bottom: 60px; left: 25%; position: absolute; text-shadow: 0.1em 0.1em 0.05em #333; display: none; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); } .section.flashSection .flashcards .back-logo { position: absolute; top: 40px; left: 90px; width: 160px; height: 117px; background: url(logo.png) 0 0 no-repeat; } .section.flashSection .flashcards .back-title { font-weight: bold; color: #00304a; position: absolute; top: 180px; left: 0; right: 0; text-align: center; text-shadow: 0.1em 0.1em 0.05em #acd7e5; } .section.flashSection .flashcards .flipSide .flipText { position: absolute; top: 50%; width: 100%; text-align: center; font-size: 13.5px; max-height: 100%; margin: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); overflow-y: auto; } .section.flashSection .flashcards .flipSide .flipText p:last-of-type { margin: 0; } .section.flashSection .flashcards .flip-container.flipping .flipSide .flipText { overflow: hidden; } .section.flashSection .flashcards .flip-container.hover .back { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .section.flashSection .flashcards .flip-container.hover .front { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .section.wv-hotspot360 { height: 500px; margin-bottom: 50px !important; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } .section.wv-hotspot360 .section-inner { position: relative; text-align: center; height: 100%; padding-bottom: 20px; pointer-events: none; } .section.wv-hotspot360 .section-inner .limiter { height: 100%; } .section.wv-hotspot360 .section-inner .center-button { pointer-events: all; position: absolute; bottom: 20px; left: 50%; -webkit-transform: translateX(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateX(-50%); /* IE 9 */ transform: translateX(-50%); /* IE 10, Fx 16+, Op 12.1+ */ } .section.introSection + .section.twoColumns { margin-top: 0; } .section.twoColumns .section-inner { max-width: 1200px; } .section.twoColumns .section-inner .columns { margin-bottom: 30px; } .section.twoColumns .section-inner .columns .column .inner .text-col { display: block; padding: 40px 30px; } .section.twoColumns.conclusion .section-inner .columns .column .inner { padding: 30px 20px 10px 20px; } @media screen and (min-width: 768px) { .section.twoColumns .section-inner { padding-top: 120px; } .section.twoColumns .section-inner .columns { display: flex; align-content: space-between; margin-bottom: 50px; } .section.twoColumns .section-inner .columns .column { flex: 0 0 50%; } .section.twoColumns .section-inner .columns .column .inner { display: block; } .section.twoColumns .section-inner .columns .column:first-child .inner { margin-right: 30px; } .section.twoColumns .section-inner .columns .column:last-child .inner { margin-left: 30px; } .section.twoColumns.conclusion .section-inner .columns { margin-bottom: 120px; } .section.twoColumns.conclusion .section-inner .columns .column .inner { padding: 40px 30px; } } .glscormwrapper { width: 100%; height: 500px; position: relative; margin: 0 0 28px; } @media screen and (min-width: 768px) { .glscormwrapper { padding: 0; height: 685px; } .section.wv-hotspot360 { height: 685px; margin-bottom: 120px !important; } .section.flashSection .flashcards { margin: 0 -81px 25px -81px; } } @-webkit-keyframes fullButtonHover { from { -webkit-transform: translateY(0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(0); /* IE 9 */ transform: translateY(0); /* IE 10, Fx 16+, Op 12.1+ */ } to { -webkit-transform: translateY(2px); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(2px); /* IE 9 */ transform: translateY(2px); /* IE 10, Fx 16+, Op 12.1+ */ } } @keyframes fullButtonHover { from { -webkit-transform: translateY(0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(0); /* IE 9 */ transform: translateY(0); /* IE 10, Fx 16+, Op 12.1+ */ } to { -webkit-transform: translateY(2px); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(2px); /* IE 9 */ transform: translateY(2px); /* IE 10, Fx 16+, Op 12.1+ */ } } @-webkit-keyframes fullButtonNormal { from { -webkit-transform: translateY(2px); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(2px); /* IE 9 */ transform: translateY(2px); /* IE 10, Fx 16+, Op 12.1+ */ } to { -webkit-transform: translateY(0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(0); /* IE 9 */ transform: translateY(0); /* IE 10, Fx 16+, Op 12.1+ */ } } @keyframes fullButtonNormal { from { -webkit-transform: translateY(2px); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(2px); /* IE 9 */ transform: translateY(2px); /* IE 10, Fx 16+, Op 12.1+ */ } to { -webkit-transform: translateY(0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(0); /* IE 9 */ transform: translateY(0); /* IE 10, Fx 16+, Op 12.1+ */ } } .fsbuttonwrapper { margin: 10px 0px 20px 0px; text-align: right; } .header.fullscreen { display: none !important; } .contentScroller.fullscreen { overflow-y: hidden; } .section.articulateHtml5Section.fullscreen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1001; margin-top: 0px !important; } .section.articulateHtml5Section.fullscreen .section-inner .iframeContainer iframe { top: 0; left: 0; right: 0; bottom: 0; height: 100vh !important; width: 100vw !important; position: fixed; } .section.articulateHtml5Section.fullscreen .contentSection { max-width: unset; position: unset; } .section.articulateHtml5Section.fullscreen .section-inner .limiter .buttonwrapper { display: none; } .section.articulateHtml5Section.fullscreen .overlayArticulateHtml5Header { display: block; } .section.articulateHtml5Section.fullscreen .wvSectionBG { display: none; } .overlayArticulateHtml5Header { height: 50px; width: 50px; position: absolute; top: 0px; right: 0px; display: none; } .overlayArticulateHtml5 { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1001; background: white; } .overlayArticulateHtml5 .overlayArticulateHtml5Body { width: 100%; height: 100%; } .overlayArticulateHtml5 .overlayArticulateHtml5Body iframe { width: 100%; height: 100%; } .fullbuttons .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .button { position: relative; -webkit-transform: translate3d(0, 0, 0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate3d(0, 0, 0); /* IE 9 */ transform: translate3d(0, 0, 0); /* IE 10, Fx 16+, Op 12.1+ */ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; color: #fff; padding: 8px 14px; line-height: normal !important; } .fullbuttons .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .button.continue { background: #44de26; border-color: #44de26; -webkit-box-shadow: 0 4px 0 0 #44de26; -moz-box-shadow: 0 4px 0 0 #44de26; box-shadow: 0 4px 0 0 #44de26; color: #fff; } .fullbuttons .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .button.continue:hover { background: #44de26; border-color: #44de26 !important; } .fullbuttons .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .button.start { background: #44de26; border-color: #44de26; -webkit-box-shadow: 0 4px 0 0 #44de26; -moz-box-shadow: 0 4px 0 0 #44de26; box-shadow: 0 4px 0 0 #44de26; } .fullbuttons .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .button.start:hover { background: #44de26; border-color: #44de26 !important; } .fullbuttons .button-solid, .fullbuttons .button-bordered, .fullbuttons .button-confirm { position: relative; -webkit-transform: translate3d(0, 0, 0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate3d(0, 0, 0); /* IE 9 */ transform: translate3d(0, 0, 0); /* IE 10, Fx 16+, Op 12.1+ */ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; color: #fff; padding: 5px 0 0 0; line-height: normal !important; background: #44de26; border-color: #44de26; } .fullbuttons .button-solid .custom-icon, .fullbuttons .button-bordered .custom-icon, .fullbuttons .button-confirm .custom-icon { margin: 6px 0 7px 0; } .fullbuttons .button-solid.checkAnswer, .fullbuttons .button-bordered.checkAnswer, .fullbuttons .button-confirm.checkAnswer { background: #44de26; border-color: #44de26; -webkit-box-shadow: 0 4px 0 0 #44de26; -moz-box-shadow: 0 4px 0 0 #44de26; box-shadow: 0 4px 0 0 #44de26; } .fullbuttons .button-solid.checkAnswer:hover, .fullbuttons .button-bordered.checkAnswer:hover, .fullbuttons .button-confirm.checkAnswer:hover { background: #44de26; border-color: #44de26 !important; } .fullbuttons .button-solid.jsClosePopup, .fullbuttons .button-bordered.jsClosePopup, .fullbuttons .button-confirm.jsClosePopup, .fullbuttons .button-solid.jsCloseAssignment, .fullbuttons .button-bordered.jsCloseAssignment, .fullbuttons .button-confirm.jsCloseAssignment, .fullbuttons .button-solid.jsStartAssignment, .fullbuttons .button-bordered.jsStartAssignment, .fullbuttons .button-confirm.jsStartAssignment, .fullbuttons .button-solid.jsNext, .fullbuttons .button-bordered.jsNext, .fullbuttons .button-confirm.jsNext, .fullbuttons .button-solid.jsReset, .fullbuttons .button-bordered.jsReset, .fullbuttons .button-confirm.jsReset, .fullbuttons .button-solid.jsShowFB, .fullbuttons .button-bordered.jsShowFB, .fullbuttons .button-confirm.jsShowFB, .fullbuttons .button-solid.jsFullscreen, .fullbuttons .button-bordered.jsFullscreen, .fullbuttons .button-confirm.jsFullscreen, .fullbuttons .button-solid.jsDownloadCertificate, .fullbuttons .button-bordered.jsDownloadCertificate, .fullbuttons .button-confirm.jsDownloadCertificate, .fullbuttons .button-solid.resetQuestion, .fullbuttons .button-bordered.resetQuestion, .fullbuttons .button-confirm.resetQuestion { background: #44de26; border-color: #44de26; -webkit-box-shadow: 0 4px 0 0 #44de26; -moz-box-shadow: 0 4px 0 0 #44de26; box-shadow: 0 4px 0 0 #44de26; } .fullbuttons .button-solid.jsClosePopup:hover, .fullbuttons .button-bordered.jsClosePopup:hover, .fullbuttons .button-confirm.jsClosePopup:hover, .fullbuttons .button-solid.jsCloseAssignment:hover, .fullbuttons .button-bordered.jsCloseAssignment:hover, .fullbuttons .button-confirm.jsCloseAssignment:hover, .fullbuttons .button-solid.jsStartAssignment:hover, .fullbuttons .button-bordered.jsStartAssignment:hover, .fullbuttons .button-confirm.jsStartAssignment:hover, .fullbuttons .button-solid.jsNext:hover, .fullbuttons .button-bordered.jsNext:hover, .fullbuttons .button-confirm.jsNext:hover, .fullbuttons .button-solid.jsReset:hover, .fullbuttons .button-bordered.jsReset:hover, .fullbuttons .button-confirm.jsReset:hover, .fullbuttons .button-solid.jsShowFB:hover, .fullbuttons .button-bordered.jsShowFB:hover, .fullbuttons .button-confirm.jsShowFB:hover, .fullbuttons .button-solid.jsFullscreen:hover, .fullbuttons .button-bordered.jsFullscreen:hover, .fullbuttons .button-confirm.jsFullscreen:hover, .fullbuttons .button-solid.jsDownloadCertificate:hover, .fullbuttons .button-bordered.jsDownloadCertificate:hover, .fullbuttons .button-confirm.jsDownloadCertificate:hover, .fullbuttons .button-solid.resetQuestion:hover, .fullbuttons .button-bordered.resetQuestion:hover, .fullbuttons .button-confirm.resetQuestion:hover { background: #44de26; border-color: #44de26 !important; } .fullbuttons .button-solid.jsHome, .fullbuttons .button-bordered.jsHome, .fullbuttons .button-confirm.jsHome { background: #44de26; border-color: #44de26; -webkit-box-shadow: 0 4px 0 0 #44de26; -moz-box-shadow: 0 4px 0 0 #44de26; box-shadow: 0 4px 0 0 #44de26; } .fullbuttons .button-solid.jsHome:hover, .fullbuttons .button-bordered.jsHome:hover, .fullbuttons .button-confirm.jsHome:hover { background: #44de26; border-color: #44de26 !important; } .fullbuttons .button-solid.resetQuestion p, .fullbuttons .button-bordered.resetQuestion p, .fullbuttons .button-confirm.resetQuestion p { line-height: 36px; } .fullbuttons .button-solid.jsFullscreen p, .fullbuttons .button-bordered.jsFullscreen p, .fullbuttons .button-confirm.jsFullscreen p { line-height: 36px; padding-bottom: 3px; } .fullbuttons .caseBlock .button-bordered { padding: 15px 20px; } .fullbuttons .gameConclusion .button-bordered.button-icon { color: #fff; padding: 13px 10px 10px 10px; background: #44de26; border-color: #44de26; -webkit-box-shadow: 0 4px 0 0 #44de26; -moz-box-shadow: 0 4px 0 0 #44de26; box-shadow: 0 4px 0 0 #44de26; } .fullbuttons .gameConclusion .button-bordered.button-icon:hover { background: #44de26; border-color: #44de26 !important; } .fullbuttons .introSection .checkAnswer.disabled { color: #fff; background: #a8a8a8; -webkit-box-shadow: 0 4px 0 0 #a8a8a8; -moz-box-shadow: 0 4px 0 0 #a8a8a8; box-shadow: 0 4px 0 0 #a8a8a8; } .fullbuttons.no-border .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .button.continue, .fullbuttons.no-border .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .button.start { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .fullbuttons.no-border .button-solid.checkAnswer, .fullbuttons.no-border .button-bordered.checkAnswer, .fullbuttons.no-border .button-confirm.checkAnswer, .fullbuttons.no-border .button-solid.jsClosePopup, .fullbuttons.no-border .button-bordered.jsClosePopup, .fullbuttons.no-border .button-confirm.jsClosePopup, .fullbuttons.no-border .button-solid.jsCloseAssignment, .fullbuttons.no-border .button-bordered.jsCloseAssignment, .fullbuttons.no-border .button-confirm.jsCloseAssignment, .fullbuttons.no-border .button-solid.jsStartAssignment, .fullbuttons.no-border .button-bordered.jsStartAssignment, .fullbuttons.no-border .button-confirm.jsStartAssignment, .fullbuttons.no-border .button-solid.jsNext, .fullbuttons.no-border .button-bordered.jsNext, .fullbuttons.no-border .button-confirm.jsNext, .fullbuttons.no-border .button-solid.jsReset, .fullbuttons.no-border .button-bordered.jsReset, .fullbuttons.no-border .button-confirm.jsReset, .fullbuttons.no-border .button-solid.jsShowFB, .fullbuttons.no-border .button-bordered.jsShowFB, .fullbuttons.no-border .button-confirm.jsShowFB, .fullbuttons.no-border .button-solid.resetQuestion, .fullbuttons.no-border .button-bordered.resetQuestion, .fullbuttons.no-border .button-confirm.resetQuestion, .fullbuttons.no-border .button-solid.jsFullscreen, .fullbuttons.no-border .button-bordered.jsFullscreen, .fullbuttons.no-border .button-confirm.jsFullscreen, .fullbuttons.no-border .button-solid.jsHome, .fullbuttons.no-border .button-bordered.jsHome, .fullbuttons.no-border .button-confirm.jsHome { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .fullbuttons.no-border .gameConclusion .button-bordered.button-icon { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .fullbuttons.no-border .introSection .checkAnswer.disabled { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .header .header-title, .header .mobileProgress, .header .caseImageSmall { display: none; } .moduleCompleted .overlay-inner .section { max-width: 50vw; } .moduleCompleted .overlay-inner .jsCloseWindow { font-size: 18px !important; padding: 16px 18px; } /* Check */ .multiVideo { overflow: hidden; position: relative; } .multiVideo .multiVideoWrap { width: 678px; display: inline-block; } .multiVideo .items { transition: transform 0.4s; position: absolute; } .multiVideo .item { display: inline-block; cursor: pointer; width: 339px; margin: 0 0 20px; padding: 0px 20px 0px 20px; } .multiVideo .item:nth-child(odd) { padding-left: 0px; } .multiVideo .item:nth-child(even) { padding-right: 0px; } .multiVideo .image { position: relative; height: 175px; overflow: hidden; } .multiVideo .image img { width: 100%; } .multiVideo .image .play-icon { background: #00464d; width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; pointer-events: none; background-image: url('img/play-icon-white.png'); background-size: 8px; background-position: center; background-repeat: no-repeat; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transform: translate(-50%, -50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, -50%); /* IE 9 */ transform: translate(-50%, -50%); /* IE 10, Fx 16+, Op 12.1+ */ } .multiVideo .title p { margin: 10px 0; } .multiVideoControls .arrowLeft, .multiVideoControls .arrowRight { color: #00464d; position: absolute; cursor: pointer; bottom: 286px; display: none; } .multiVideoControls .arrowLeft .scormicon, .multiVideoControls .arrowRight .scormicon { font-size: 44px; } .multiVideoControls .arrowLeft { transform: rotate(90deg); left: -45px; } .multiVideoControls .arrowRight { transform: rotate(-90deg); right: -45px; } .multiVideoControls .bullets { text-align: center; height: 40px; } .multiVideoControls .bullets .bullet { background: #c4c4c4; width: 8px; height: 8px; display: inline-block; margin: 10px; cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .multiVideoControls .bullets .bullet.active { background: #00464d; } @media screen and (max-width: 768px) { .multiVideo { margin: 0 -30px; } .multiVideo .item { padding: 0px 10px 0px 10px; width: 300px; } .multiVideo .item:nth-child(odd) { padding-left: 10px; } .multiVideo .item:nth-child(even) { padding-right: 10px; } } .section.intro .startscreenIntroduction .introContentWrap { margin-bottom: 20px; } .section.intro .startscreenIntroduction .introContentWrap .noMarginBottom, .section.intro .startscreenIntroduction .introContentWrap .hasNoHeight { margin-bottom: 0px !important; } .section.intro .startscreenIntroduction .introContentWrap .maintitlewrap { margin-bottom: 24px; } .section.intro .startscreenIntroduction .introContentWrap .maintitlewrap h1 { margin-bottom: 0px; } .section.intro .startscreenIntroduction .introContentWrap .subTitle { margin-bottom: 20px; } .section.intro .startscreenIntroduction .introContentWrap .subTitle p:last-child, .section.intro .startscreenIntroduction .introContentWrap .selLang p:last-child { margin-bottom: 0px; } .section.intro .startscreenIntroduction .introContentWrap .dropdown.margin-medium-bottom { margin-bottom: 20px; } .section.flashSection .flashcards { margin-bottom: 10px; } .section.slider .rangeSlider.margin-extended-bottom { margin-bottom: 20px; } .section.slider .feedback { margin-top: -51px; } .section.slider .feedback.show { margin-top: 48px; } .section.textSection.twoColumns .section-inner .columns { margin-bottom: 20px; } .section.textSection.twoColumns .section-inner .columns .column .inner .text-col { padding-bottom: 0; } .section.textSection.twoColumns .section-inner .columns .column .inner .text-col .text p:last-child { margin-bottom: 0px; } .section.conclusionSection .margin-extended-top { margin-top: 20px; } .section.conclusionSection .noMarginBottom, .section.conclusionSection .hasNoHeight { margin-bottom: 0px !important; } .section.conclusionSection .text { margin-bottom: 28px; } .section.conclusionSection .textExplanation { margin-bottom: 20px; } .section.conclusionSection .text p:last-child, .section.conclusionSection .textExplanation p:last-child { margin-bottom: 0px; } .section.conclusionSection .titleHeaderWrap { margin-bottom: 30px; } .section.conclusionSection .titleHeaderWrap h2 { margin-bottom: 0px; } .section.conclusionSection .textquestion { margin-bottom: 8px; } .section.conclusionSection .textquestion h3 { margin-bottom: 0px; } .section.conclusionSection div:last-child { margin-bottom: 0px; } .section.multiVideoSection .multiVideo .title p { margin-bottom: 0px; } .section.multiVideoSection .multiVideoControls .bullets.hidden { height: 0px; } .section.wv-hotspot .sub-text { margin-bottom: 20px; } .section.vinkSection .mpc, .section.mpcSection .mpc { margin-bottom: 0px; } .section.vinkSection .textVideo .videoContainer, .section.mpcSection .textVideo .videoContainer, .section.vinkSection .textVideo .embedContainer, .section.mpcSection .textVideo .embedContainer { margin-bottom: 20px; } .section.vinkSection .feedback, .section.mpcSection .feedback { margin-top: -31px; } .section.vinkSection .feedback.show, .section.mpcSection .feedback.show { margin-top: 40px; } .section.surveysection .rangeOptions { min-height: auto; } .section.surveysection .rangeOptions p:last-child { margin-bottom: 0px; } .section.surveysection .feedback { margin-top: -13px; } .section.surveysection .feedback.show { margin-top: 110px; } .section.textSection .contentSection { margin-bottom: 20px; padding-bottom: 0px; } .section.textSection .contentSection .noMarginBottom, .section.textSection .contentSection .hasNoHeight { margin-bottom: 0px !important; } .section.textSection .contentSection .embedContainer, .section.textSection .contentSection .videoContainer { margin-bottom: 20px; } .section.textSection .contentSection .text, .section.textSection .contentSection .textExplanation { margin-bottom: 28px; } .section.textSection .contentSection .text p:last-child, .section.textSection .contentSection .textExplanation p:last-child { margin-bottom: 0px; } .section.textSection .contentSection .titleHeaderWrap { margin-bottom: 30px; } .section.textSection .contentSection .titleHeaderWrap h2 { margin-bottom: 0px; } .section.textSection .contentSection .textElements { margin-bottom: 20px; } .section.textSection .contentSection .textElements .textquestion { margin-bottom: 8px; } .section.textSection .contentSection .textElements .textquestion h3 { margin-bottom: 0px; } .section.textSection .contentSection div:last-child { margin-bottom: 0px; } .introSection .module-block .caseTitleText p { font-size: 100%; } @media screen and (min-width: 769px) { .introSection .module-block .caseTitleText p { font-size: 46%; } } @media screen and (min-width: 820px) { .introSection .module-block .caseTitleText p { font-size: 48%; } } @media screen and (min-width: 850px) { .introSection .module-block .caseTitleText p { font-size: 50%; } } @media screen and (min-width: 880px) { .introSection .module-block .caseTitleText p { font-size: 52%; } } @media screen and (min-width: 910px) { .introSection .module-block .caseTitleText p { font-size: 54%; } } @media screen and (min-width: 940px) { .introSection .module-block .caseTitleText p { font-size: 56%; } } @media screen and (min-width: 970px) { .introSection .module-block .caseTitleText p { font-size: 58%; } } @media screen and (min-width: 1000px) { .introSection .module-block .caseTitleText p { font-size: 60%; } } @media screen and (min-width: 1030px) { .introSection .module-block .caseTitleText p { font-size: 62%; } } @media screen and (min-width: 1060px) { .introSection .module-block .caseTitleText p { font-size: 64%; } } @media screen and (min-width: 1090px) { .introSection .module-block .caseTitleText p { font-size: 66%; } } @media screen and (min-width: 1120px) { .introSection .module-block .caseTitleText p { font-size: 68%; } } @media screen and (min-width: 1150px) { .introSection .module-block .caseTitleText p { font-size: 70%; } } @media screen and (min-width: 1180px) { .introSection .module-block .caseTitleText p { font-size: 72%; } } @media screen and (min-width: 1210px) { .introSection .module-block .caseTitleText p { font-size: 74%; } } @media screen and (min-width: 1230px) { .introSection .module-block .caseTitleText p { font-size: 76%; } } @media screen and (min-width: 1260px) { .introSection .module-block .caseTitleText p { font-size: 78%; } } @media screen and (min-width: 1290px) { .introSection .module-block .caseTitleText p { font-size: 80%; } } @media screen and (min-width: 1320px) { .introSection .module-block .caseTitleText p { font-size: 82%; } } @media screen and (min-width: 1350px) { .introSection .module-block .caseTitleText p { font-size: 84%; } } @media screen and (min-width: 1380px) { .introSection .module-block .caseTitleText p { font-size: 86%; } } @media screen and (min-width: 1410px) { .introSection .module-block .caseTitleText p { font-size: 88%; } } @media screen and (min-width: 1440px) { .introSection .module-block .caseTitleText p { font-size: 90%; } } @media screen and (min-width: 1470px) { .introSection .module-block .caseTitleText p { font-size: 92%; } } @media screen and (min-width: 1500px) { .introSection .module-block .caseTitleText p { font-size: 94%; } } @media screen and (min-width: 1530px) { .introSection .module-block .caseTitleText p { font-size: 96%; } } @media screen and (min-width: 1560px) { .introSection .module-block .caseTitleText p { font-size: 98%; } } @media screen and (min-width: 1590px) { .introSection .module-block .caseTitleText p { font-size: 100%; } } .section-inner .rangeOptions span.text { line-height: normal !important; } .allButtonsLeft .scormWrap button { margin-left: 39px !important; } .allButtonsLeft .scormWrap .buttonwrapper { text-align: left; margin-left: 0px; } .allButtonsLeft .scormWrap .center-button { margin-left: 39px !important; margin-right: 0 !important; } .allButtonsLeft .scormWrap .bottom-btn { text-align: left; } .allButtonsLeft .section.menu.menuhotspot .wv-hotspot .hotspot .popup .inner-popup .popup-buttons { text-align: left; } .allButtonsLeft .section.wv-hotspot360 .section-inner .center-button { left: 50px; transform: translateX(0%); margin-left: 0px !important; } .allButtonsLeft .case .introSection .section-inner .introSectionButton { text-align: left; } .allButtonsLeft .case .introSection .section-inner .introSectionButton .butwrap { text-align: left; max-width: 678px; margin-left: auto; margin-right: auto; } .allButtonsLeft .section.wv-hotspot360.assignment-hotspot .assignment-popup button { margin-left: 0px !important; } .allButtonsLeft .quoteStatement .butwrap { max-width: 678px; position: absolute; bottom: 100px; right: 0; left: 0; margin-right: auto; margin-left: auto; z-index: 1; } .allButtonsLeft .section.quoteStatement .jsNext { position: relative; bottom: auto; } .allButtonsLeft .videocue .butwrap { margin-right: auto; margin-left: auto; max-width: 678px; } .videocue .butwrap { margin-top: 20px; } .allButtonsLeft .section.intro .column.small button { margin-left: 0px !important; } .allButtonsLeft .section.introSection .section-inner .limiter button { margin-left: 10px !important; } .downloadcertificate .downloadbuttonwrapper { margin-bottom: 20px; } .downloadcertificate .downloadbuttonwrapper .buttonwrapper { display: inline-block; } .downloadcertificate .downloadbuttonwrapper .button-bordered { padding: 12px 20px; } .downloadcertificate .downloadbuttonwrapper .certname { padding: 10px 10px; font-size: 18px; } .allButtonsLeft .scormWrap .downloadcertificate .downloadbuttonwrapper button { margin-left: 15px !important; } body.nobottommargin .section.conclusionSection, body.nobottommargin .section.introSection { margin-bottom: 0px !important; } body.nobottommargin .no-padding-top-after.section.introSection + .section:not(.quoteStatement) .section-inner:not(.cuesection) { padding-top: 40px; } .jw-controlbar .jw-icon-cc .jw-overlay ul { overflow-y: auto; max-height: 200px; } .jw-controlbar .jw-option { text-align: left; } .jw-controlbar .jw-icon-cc .jw-overlay ul li::before { display: none; } body.rtl .dropdown-caret { right: unset; left: 10px; } body.rtl .dropdown-list { right: 49px; left: -1px; text-align: right; } body.rtl .progress .progress-fill { left: unset; right: 0; } body.rtl .header-right { margin: auto 0px auto 40px; } body.rtl .header-logo { margin-right: auto; margin-left: 20px; } body.rtl .header .caseImageSmall { right: 140px; left: unset; } body.rtl .header-title-outer { margin-right: auto; margin-left: 25px; } body.rtl .header-title .title > .titleGroup { padding-left: 15px; padding-right: 0; } body.rtl .header-title .title .scormicon { right: unset; left: 0; margin-left: auto; margin-right: 10px; } body.rtl .ml-total-progress .progress-text { margin: 0 0 0 10px; } body.rtl .section.intro.leftStyle .section-inner { text-align: right; } body.rtl .section.intro.leftStyle .startscreenIntroduction .section-inner .buttonwrapper { text-align: right; } body.rtl .mpc:not(.multiple) .option .sign::before { left: unset; right: 2px; } body.rtl .mpc .option .title { padding-left: 0px; padding-right: 60px; } body.rtl .rangeui-content { direction: ltr; } body.rtl .rangeui-content .text .value { direction: rtl; } body.rtl .mpc.multiple .option .sign::before { left: unset; right: 0; } body.rtl .video-cue-player .controls .progress .progress-bar { left: 0; right: 20px; } body.rtl .header-logo.wide .logo { margin-right: 5px; margin-left: 0px; } body.rtl ul li::before { margin-left: 0; margin-right: -1.2em; } body.rtl .section.menu.menuhotspot .hotspot-menu .menu-item .status { margin-right: 0px; margin-left: 10px; } body.rtl .section.menu.menuhotspot .hotspot-menu .menu-item.locked .status .icon .locked { margin-left: 0px; margin-right: 9px; } body.rtl .section-inner .question { text-align: right; } body.rtl .header-right .total-progress { margin: 0 0 0 10px; } body.rtl .header-logo .logo { margin-left: auto; margin-right: 20px; } body.rtl .section.intro .logo { left: unset !important; right: 20px; } body.rtl .section.textSection .section-inner .caption { text-align: right; } body.rtl li { padding-left: 0; padding-right: 1.2em; } body.rtl ol > li { padding: 0; margin-left: 0; margin-right: 1em; } body.rtl h1 p, body.rtl h2 p, body.rtl h3 p { font-weight: bold; } body.rtl .section.conclusionSection .imgContainer.wide { margin-left: auto; margin-right: -100px; } body.rtl .overlay .closeOverlay.top { left: auto; right: -51px; border-radius: 0 0 5px 0; } body.rtl .library .videos .items .item .text, body.rtl .library .documents .items .item .text { text-align: right; } .chapterMenu { font-family: 'Poppins'; min-height: 100vh; } .chapterMenu .section-left { width: 37%; } .chapterMenu .section-right { width: 63%; } .chapterMenu .components { height: 100%; position: fixed; width: 100%; } .chapterMenu .components .component { height: 100%; position: absolute; transition: all 0.3s ease-in-out; } .chapterMenu .components .component.chapters { width: 100%; background: #fff; background-size: cover; position: fixed; top: 0; } .chapterMenu .components .component.modules { width: 0%; left: 37%; background: #00464d; } @media screen and (min-width: 1024px) { .chapterMenu .components { position: absolute; } .chapterMenu .components .component.chapters { width: 37%; } .chapterMenu .components .component.modules { width: 63%; } .chapterMenu .components.libraryComp .component.chapters { width: 0%; } .chapterMenu .components.libraryComp .component.modules { left: 0; width: 100%; } } .chapterMenu .inner { position: relative; z-index: 10; font-size: 0; } .chapterMenu .inner .menu-header { height: 100px; font-size: 0; } .chapterMenu .inner .menu-header .left { display: inline-block; height: 100%; width: 37%; /*background: #fff; */ position: relative; z-index: 10001; } .chapterMenu .inner .menu-header .left .logo { width: 100px; display: inline-block; margin: 34px; } .chapterMenu .inner .menu-header .left .logo img { max-width: 100%; max-height: 100%; } .chapterMenu .inner .menu-header .right { display: inline-block; height: 100%; width: 63%; background: #00464d; } .chapterMenu .inner .menu-header .right .profile { float: right; font-size: 12px; padding: 32px; } .chapterMenu .inner .menu-header .right .profile p { margin: 0; display: inline-block; } .chapterMenu .inner .menu-header .right .profile .name { color: #e4e4e4; } .chapterMenu .inner .menu-header .right .profile .logoff { text-decoration: none; color: #fff; } .chapterMenu .inner .menu-header .right .profile .icon.power { background-image: url('img/power-icon.png'); width: 15px; height: 15px; margin: 5px 15px; } .chapterMenu .inner .menu-header .right .interaction { padding: 32px; float: left; } .chapterMenu .inner .menu-header .right .interaction .button { display: inline-block; font-family: 'Poppins'; font-size: 14px; min-height: 35px; padding: 8px 14px; min-width: 40px; margin-left: 20px; background-color: #00464d; border: 1px solid rgba(65, 65, 65, 0.1); color: #fff; } .chapterMenu .inner .menu-header .right .interaction .button.active { background-color: #fff; border: 1px solid #fff; color: #00464d; } .chapterMenu .inner .menu-items { position: relative; } .chapterMenu .inner .menu-items .moduleTag { position: absolute; bottom: 30px; left: 60px; font-size: 12px; color: #000; z-index: 10002; -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(270deg); text-transform: uppercase; } .chapterMenu .inner .menu-items .moduleTag p { margin: 0; } .chapterMenu .inner .menu-items .chapter { height: 206px; position: relative; } .chapterMenu .inner .menu-items .chapter:hover { /*background: #fff;*/ z-index: 10000; } .chapterMenu .inner .menu-items .chapter .left { display: inline-block; width: 37%; padding: 25px 0px; /*background:#fff;*/ position: relative; height: 100%; z-index: 10001; } .chapterMenu .inner .menu-items .chapter .left .identifier, .chapterMenu .inner .menu-items .chapter .left .intro { font-size: 14px; display: inline-block; } .chapterMenu .inner .menu-items .chapter .left .identifier { width: 45%; text-align: right; padding: 0px 50px; } .chapterMenu .inner .menu-items .chapter .left .intro { width: 55%; padding-right: 10px; } .chapterMenu .inner .menu-items .chapter .left .intro .title { line-height: 30px; font-size: 28px; margin-bottom: 16px; font-family: 'Poppins'; color: #00464d; } .chapterMenu .inner .menu-items .chapter .left .intro .subtitle { font-size: 12px; line-height: 20px; padding-right: 45px; } .chapterMenu .inner .menu-items .chapter .left .scroll-nav { position: absolute; bottom: 30px; right: 0; margin: 0px 10px; } .chapterMenu .inner .menu-items .chapter .left .scroll-nav .prev, .chapterMenu .inner .menu-items .chapter .left .scroll-nav .next { display: inline-block; padding: 5px; height: 30px; cursor: pointer; } .chapterMenu .inner .menu-items .chapter .right { width: 63%; display: inline-block; height: 100%; white-space: nowrap; background: #00464d; overflow-x: hidden; } .chapterMenu .inner .menu-items .chapter .right .modules { height: 100%; } .chapterMenu .inner .menu-items .chapter .right .modules .module { height: 100%; width: 330px; display: inline-block; position: relative; cursor: pointer; overflow: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .chapterMenu .inner .menu-items .chapter .right .modules .module.lockedCase { cursor: default; } .chapterMenu .inner .menu-items .chapter .right .modules .module.lockedCase .module-info, .chapterMenu .inner .menu-items .chapter .right .modules .module.lockedCase .module-info-hover { background-image: url('img/lock-icon-tall.png'); background-repeat: no-repeat; background-position: center; background-color: rgba(0, 0, 0, 0.2); } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-image { width: 100%; overflow: hidden; height: 100%; /*img {min-width:100%;height:100%;}*/ } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info, .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .chapterMenu .inner .menu-items .chapter .right .modules .module:hover .module-info { opacity: 0; visibility: hidden; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info { visibility: visible; opacity: 1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info .status.completed:before { content: ""; background: url("img/checkmark-checked-2x.png"); width: 25px; height: 18px; display: block; background-size: cover; margin: 15px 13px; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info .status.completed { width: 50px; height: 50px; background: #629e28; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .chapterMenu .inner .menu-items .chapter .right .modules .module:hover .module-info-hover { visibility: visible; opacity: 1; } .chapterMenu .inner .menu-items .chapter .right .modules .module:not(.noShadow):hover { z-index: 10; -webkit-box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.5); } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; visibility: hidden; font-size: 15px; text-align: center; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data { position: relative; font-size: 15px; color: #fff; z-index: 10; display: table; width: 100%; height: 100%; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data p { margin: 0 !important; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .data-inner { display: table-cell; vertical-align: middle; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .time { font-size: 12px; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .time .icon { width: 12px; height: 12px; margin: 7px 5px; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .title { font-family: 'Poppins'; font-size: 18px; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .button { font-family: 'Poppins'; font-size: 14px; min-height: 35px; padding: 8px 14px; min-width: 40px; margin-top: 15px; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .button.hidden { display: none; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .button.start { background-color: #00464d; border: 1px solid #00464d; color: #fff; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .button.continue { background-color: #fff; border: 1px solid #fff; color: #00464d; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .progress { display: none; position: absolute; bottom: 15px; left: 15px; width: 300px; background: #000; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .progress .filler { background: #00464d; position: absolute; z-index: 1; height: 100%; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .dark-overlay { position: absolute; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; z-index: 0; } @media screen and (max-width: 768px) { .chapterMenu .inner .menu-header { min-height: 70px; height: auto; } .chapterMenu .inner .menu-header .left { display: none; } .chapterMenu .inner .menu-header .right { width: 100%; } .chapterMenu .inner .menu-header .right .interaction { padding: 18px 0px; } .chapterMenu .inner .menu-items .moduleTag { display: none; } .chapterMenu .inner .menu-items .chapter { height: auto; } .chapterMenu .inner .menu-items .chapter .left { width: 100%; padding: 25px; } .chapterMenu .inner .menu-items .chapter .left .identifier { display: none; } .chapterMenu .inner .menu-items .chapter .left .intro { width: 100%; } .chapterMenu .inner .menu-items .chapter .left .scroll-nav { display: none; } .chapterMenu .inner .menu-items .chapter .right { width: 100%; white-space: normal; } .chapterMenu .inner .menu-items .chapter .right .modules { height: auto; } .chapterMenu .inner .menu-items .chapter .right .modules .module { width: 100%; height: 440px; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover { display: block; opacity: 1; visibility: visible; } .chapterMenu .inner .menu-items .chapter .right .modules .module .module-info-hover .data .progress { width: calc(100% - 30px); } } @media screen and (max-width: 425px) { .chapterMenu .inner .menu-items .chapter .right .modules .module { width: 100%; height: 230px; } } .wv-image { max-width: 100%; margin-bottom: 20px; } .menu.tilegrid .inner { padding: 78px 0px 0px; } .menu.tilegrid .inner .gridBlock { width: 100%; height: 200px; display: block; margin: 1px 0px; position: relative; overflow: hidden; cursor: pointer; border-top: 1px solid #fff; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; } .menu.tilegrid .inner .gridBlock.dark-theme .module-info-container .module-info .title, .menu.tilegrid .inner .gridBlock.dark-theme .module-info-container .module-info .identifier, .menu.tilegrid .inner .gridBlock.dark-theme .module-info-container .module-info .module-completed { color: #000; } .menu.tilegrid .inner .gridBlock.dark-theme .module-info-container .module-info .module-completed { border-color: #000; } .menu.tilegrid .inner .gridBlock.dark-theme .module-info-container .module-info .module-locked { background-image: url('img/lock-icon-tall-dark.png'); } .menu.tilegrid .inner .gridBlock.dark-theme .module-info-container .module-info .module-footer .time { color: #000; } .menu.tilegrid .inner .gridBlock.dark-theme .module-info-container .module-info .module-footer .time .icon.clock { background-image: url('img/clock-icon-dark.png'); } .menu.tilegrid .inner .gridBlock.dark-theme .module-info-container .module-info .module-footer .arrow { background-image: url('img/arrow-large-dark.png'); } .menu.tilegrid .inner .gridBlock.dark-theme.customModuleTitleColor .module-info-container .module-info .title { color: #fff; } .menu.tilegrid .inner .gridBlock.customModuleTitleColor .module-info-container .module-info .title { color: #fff; } .menu.tilegrid .inner .gridBlock .module-image { opacity: 0; width: 100%; overflow: hidden; height: 100%; position: absolute; top: 0; left: 0; -webkit-transition: opacity 0.4s linear; -moz-transition: opacity 0.4s linear; -o-transition: opacity 0.4s linear; -ms-transition: opacity 0.4s linear; transition: opacity 0.4s linear; } .menu.tilegrid .inner .gridBlock .module-image img { width: 100%; height: 100%; } .menu.tilegrid .inner .gridBlock .module-info-container { display: table; width: 100%; height: 100%; position: relative; z-index: 1; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info { display: table-cell; text-align: center; vertical-align: middle; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info .identifier { font-size: 60px; color: #fff; line-height: 60px; font-weight: bold; display: inline-block; /* text-shadow: 0px 0px 10px rgb(0, 0, 0); ticket #0020173 */ -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info .identifier-image { max-width: 60px; max-height: 60px; margin: 0 auto; display: inline-block; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info .identifier-image img { max-width: 100%; max-height: 100%; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info .title { opacity: 0; visibility: hidden; height: 0; margin: 0; color: #fff; /* Ticket 0020174 text-transform: uppercase; letter-spacing: 3px; font-size: 16px;*/ font-size: 16px; font-weight: bold; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info .title p { margin-bottom: 0; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info .title .main { line-height: normal; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info .title .sub { display: none; font-size: 13px; font-weight: normal; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info .module-footer { position: absolute; bottom: 0; padding: 0px 20px; width: 100%; opacity: 0; visibility: hidden; height: 0; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info .module-footer .time { font-size: 12px; color: #fff; line-height: 12px; text-transform: uppercase; letter-spacing: 1px; float: left; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info .module-footer .time .icon { width: 14px; height: 14px; margin-top: -1px; margin-right: 3px; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info .module-footer .arrow { width: 54px; height: 8px; background-image: url('img/arrow-large.png'); background-size: contain; display: block; float: right; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info .module-locked { display: none; width: 24px; height: 32px; position: absolute; bottom: 20px; right: 20px; background: url('img/lock-icon-tall.png'); background-size: contain; background-repeat: no-repeat; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info .module-completed { display: none; position: absolute; top: 0; right: 0; margin: 15px; width: 60px; height: 60px; color: #fff; border: 1px solid #fff; border-radius: 50%; line-height: 60px; font-size: 12px; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info .module-completed .scormicon { font-size: 22px; } .menu.tilegrid .inner .gridBlock .module-game-elements { display: none; } .menu.tilegrid .inner .gridBlock.lockedCase .module-info-container .module-info .module-locked { display: block; } .menu.tilegrid .inner .gridBlock.lockedCase .module-info-container .module-info .module-footer .arrow { display: none; } .menu.tilegrid .inner .gridBlock.completed .module-info-container .module-info .module-completed { display: block; } .menu.tilegrid .inner .gridBlock.noBorder { border: none; } .menu.tilegrid .inner .gridBlock:hover .module-info-container .module-info .identifier, .menu.tilegrid .inner .gridBlock.activeFocus .module-info-container .module-info .identifier { opacity: 0; margin-top: -60px; } .menu.tilegrid .inner .gridBlock:hover .module-info-container .module-info .identifier-image, .menu.tilegrid .inner .gridBlock.activeFocus .module-info-container .module-info .identifier-image { opacity: 0; margin-top: -60px; } .menu.tilegrid .inner .gridBlock:hover .module-image, .menu.tilegrid .inner .gridBlock.activeFocus .module-image { opacity: 1; } .menu.tilegrid .inner .gridBlock:hover .module-info-container .module-info, .menu.tilegrid .inner .gridBlock.activeFocus .module-info-container .module-info { /*.identifier {font-size:0;line-height:0;}*/ /* .identifier-image {max-width:40px;max-height:40px;}*/ } .menu.tilegrid .inner .gridBlock:hover .module-info-container .module-info .title, .menu.tilegrid .inner .gridBlock.activeFocus .module-info-container .module-info .title { opacity: 1; visibility: visible; height: 30px; } .menu.tilegrid .inner .gridBlock:hover .module-info-container .module-info .title .sub, .menu.tilegrid .inner .gridBlock.activeFocus .module-info-container .module-info .title .sub { /*margin-top: -20px;*/ font-size: 18px; } .menu.tilegrid .inner .gridBlock:hover .module-info-container .module-info .module-footer, .menu.tilegrid .inner .gridBlock.activeFocus .module-info-container .module-info .module-footer { height: 52px; opacity: 1; visibility: visible; padding: 20px; } .menu.tilegrid.showsubtitle .inner .gridBlock .module-info-container .module-info .sub { display: block; opacity: 0; visibility: hidden; } .menu.tilegrid.showsubtitle .inner .gridBlock:hover .module-info-container .module-info .sub, .menu.tilegrid.showsubtitle .inner .gridBlock.activeFocus .module-info-container .module-info .sub { opacity: 1; visibility: visible; height: auto; } .menu.tilegrid.showtext .inner .gridBlock .module-info-container .module-info .title { opacity: 1; visibility: visible; height: auto; } .menu.tilegrid.showtext.showsubtitle .inner .gridBlock .module-info-container .module-info .sub { display: block; opacity: 1; visibility: visible; margin: 0 0 10px; } .menu.tilegrid.gameMenu .inner .gridBlock.dark-theme .module-game-elements .points, .menu.tilegrid.gameMenu .inner .gridBlock.dark-theme .module-game-elements .bonus { color: #000; } .menu.tilegrid.gameMenu .inner .gridBlock.dark-theme .module-game-elements .points .icon.icon-trophy, .menu.tilegrid.gameMenu .inner .gridBlock.dark-theme .module-game-elements .bonus .icon.icon-trophy { background-image: url('img/trophy_dark.png'); } .menu.tilegrid.gameMenu .inner .gridBlock .module-game-elements { display: block; } .menu.tilegrid.gameMenu .inner .gridBlock .module-game-elements .points, .menu.tilegrid.gameMenu .inner .gridBlock .module-game-elements .bonus { position: absolute; bottom: 0; left: 0; right: 0; text-align: left; color: #fff; padding: 10px 45px 10px 20px; width: 100%; opacity: 0; visibility: hidden; height: 0; font-size: 12px; letter-spacing: 1px; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; } .menu.tilegrid.gameMenu .inner .gridBlock .module-game-elements .points .icon, .menu.tilegrid.gameMenu .inner .gridBlock .module-game-elements .bonus .icon { top: 4px; margin-right: 3px; } .menu.tilegrid.gameMenu .inner .gridBlock .module-game-elements .points .txt, .menu.tilegrid.gameMenu .inner .gridBlock .module-game-elements .bonus .txt, .menu.tilegrid.gameMenu .inner .gridBlock .module-game-elements .points .text, .menu.tilegrid.gameMenu .inner .gridBlock .module-game-elements .bonus .text { text-transform: uppercase; letter-spacing: 1px; } .menu.tilegrid.gameMenu .inner .gridBlock .module-game-elements .points .txt p, .menu.tilegrid.gameMenu .inner .gridBlock .module-game-elements .bonus .txt p, .menu.tilegrid.gameMenu .inner .gridBlock .module-game-elements .points .text p, .menu.tilegrid.gameMenu .inner .gridBlock .module-game-elements .bonus .text p { display: inline-block; margin: 0; } .menu.tilegrid.gameMenu .inner .gridBlock .module-game-elements .smiley { max-height: 100px; max-width: 100%; } .menu.tilegrid.gameMenu .inner .gridBlock .module-game-elements .module-scores { position: absolute; top: 0; left: 0; } .menu.tilegrid.gameMenu .inner .gridBlock.bonusCase.lockedCase .module-info-container .module-info .module-footer .time { display: none; } .menu.tilegrid.gameMenu .inner .gridBlock.bonusCase.lockedCase .bonus { height: auto; opacity: 1; visibility: visible; } .menu.tilegrid.gameMenu .inner .gridBlock.completed .module-info-container .module-info .module-footer .time { display: none; } .menu.tilegrid.gameMenu .inner .gridBlock.completed .module-game-elements .points { height: auto; opacity: 1; visibility: visible; } .menu.tilegrid.gameMenu .inner .gridBlock.completed .module-game-elements .bonus { display: none; } /* Ticket 0020175 Changed from 768 to 769 */ @media screen and (min-width: 769px) { .menu.tilegrid .inner { height: calc(100vh); padding: 90px 0px 0px; } .menu.tilegrid .inner .modules { height: 100%; margin-top: -1px; } .menu.tilegrid .inner .modules.col-3 .gridBlock { width: calc(99.9% / 3); /* Because IE is special, ticket #20432 */ } .menu.tilegrid .inner .modules.rows-3 .gridBlock { height: calc(100% / 3); } .menu.tilegrid .inner .modules.col-2 .gridBlock { width: calc(99.9% / 2); /* Because IE is special, ticket #20432 */ } .menu.tilegrid .inner .modules.rows-2 .gridBlock { height: calc(100% / 2); } .menu.tilegrid .inner .modules.col-1 .gridBlock { width: 100%; } .menu.tilegrid .inner .modules.rows-1 .gridBlock { height: 100%; } .menu.tilegrid .inner .gridBlock { display: inline-block; margin: 0; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info .identifier { font-size: 90px; line-height: 90px; opacity: 1; } .menu.tilegrid .inner .gridBlock .module-info-container .module-info .identifier-image { height: 90px; max-width: 90px; max-height: 90px; } .menu.tilegrid .inner .gridBlock:hover .module-info-container .module-info .title { font-size: 30px; } .menu.tilegrid.showtext.showsubtitle .inner .gridBlock .module-info-container .module-info .sub { margin: 0; } } canvas.confetti { position: absolute; z-index: 2; width: 100%; height: 100%; pointer-events: none; } .section.menu.menumovingimages { min-height: 100vh; } .section.menu.menumovingimages .titleHeader { margin-bottom: 0; } .section.menu.menumovingimages .column:nth-child(0) .text { margin-bottom: 0; } .section.menu.menumovingimages .column:nth-child(0) .text p { margin-bottom: 0; } .section.menu.menumovingimages .moving-menu .menu-item { display: block; margin-bottom: 12px; } .section.menu.menumovingimages .moving-menu .menu-item .status { display: inline-block; border: 2px solid #f78605; width: 40px; height: 40px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; margin-right: 10px; position: relative; vertical-align: middle; } .section.menu.menumovingimages .moving-menu .menu-item .status .iconwrap { width: 32px; height: 32px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, -50%); /* IE 9 */ transform: translate(-50%, -50%); /* IE 10, Fx 16+, Op 12.1+ */ } .section.menu.menumovingimages .moving-menu .menu-item .status .iconwrap .icon { cursor: pointer; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, -50%); /* IE 9 */ transform: translate(-50%, -50%); /* IE 10, Fx 16+, Op 12.1+ */ } .section.menu.menumovingimages .moving-menu .menu-item .status .iconwrap .icon .correct, .section.menu.menumovingimages .moving-menu .menu-item .status .iconwrap .icon .locked { display: none; } .section.menu.menumovingimages .moving-menu .menu-item .status .iconwrap .progresspie { height: 32px; width: 32px; position: relative; border-radius: 50%; display: none; } .section.menu.menumovingimages .moving-menu .menu-item .status .iconwrap .progresspie .circle .shade { position: absolute; height: 100%; width: 100%; -webkit-border-radius: 100%; clip: rect(0px, 32px, 32px, 16px); } .section.menu.menumovingimages .moving-menu .menu-item .status .iconwrap .progresspie .circle .shade .progressing { position: absolute; height: 100%; width: 100%; -webkit-border-radius: 100%; clip: rect(0px, 16px, 32px, 0px); background: #004699; } .section.menu.menumovingimages .moving-menu .menu-item .status .iconwrap .progresspie .circle .shade.left .progressing { transform: rotate(0deg); } .section.menu.menumovingimages .moving-menu .menu-item .status .iconwrap .progresspie .circle .shade.right { transform: rotate(180deg); } .section.menu.menumovingimages .moving-menu .menu-item .status .iconwrap .progresspie .circle .shade.right .progressing { transform: rotate(0deg); } .section.menu.menumovingimages .moving-menu .menu-item .title { cursor: pointer; display: inline-block; vertical-align: middle; width: calc(100% - 60px); } .section.menu.menumovingimages .moving-menu .menu-item .title p { margin: 0; line-height: 20px; } .section.menu.menumovingimages .moving-menu .menu-item .title p span { vertical-align: middle; white-space: normal; } .section.menu.menumovingimages .moving-menu .menu-item.hover:not(.locked) .title { font-weight: bold; text-decoration: underline; } .section.menu.menumovingimages .moving-menu .menu-item.hover:not(.locked) .status .icon { width: 10px; height: 10px; background: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .section.menu.menumovingimages .moving-menu .menu-item.done .status { border-color: #00a03c; } .section.menu.menumovingimages .moving-menu .menu-item.done .status .iconwrap { background: #00a03c; } .section.menu.menumovingimages .moving-menu .menu-item.done .status .iconwrap .icon .correct { text-align: center; margin-top: 3px; display: block; } .section.menu.menumovingimages .moving-menu .menu-item.inprogress .status { border-color: #004699; } .section.menu.menumovingimages .moving-menu .menu-item.inprogress .status .progresspie { display: block; } .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress10 .status .progresspie .circle .right .progressing, .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress20 .status .progresspie .circle .right .progressing, .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress30 .status .progresspie .circle .right .progressing, .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress40 .status .progresspie .circle .right .progressing, .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress50 .status .progresspie .circle .right .progressing { transform: rotate(0deg); } .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress60 .status .progresspie .circle .left .progressing, .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress70 .status .progresspie .circle .left .progressing, .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress80 .status .progresspie .circle .left .progressing, .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress90 .status .progresspie .circle .left .progressing { transform: rotate(180deg); } .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress10 .status .progresspie .circle .left .progressing { transform: rotate(36deg); } .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress20 .status .progresspie .circle .left .progressing { transform: rotate(72deg); } .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress30 .status .progresspie .circle .left .progressing { transform: rotate(108deg); } .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress40 .status .progresspie .circle .left .progressing { transform: rotate(144deg); } .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress50 .status .progresspie .circle .left .progressing { transform: rotate(180deg); } .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress60 .status .progresspie .circle .right .progressing { transform: rotate(36deg); } .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress70 .status .progresspie .circle .right .progressing { transform: rotate(72deg); } .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress80 .status .progresspie .circle .right .progressing { transform: rotate(108deg); } .section.menu.menumovingimages .moving-menu .menu-item.inprogress.progress90 .status .progresspie .circle .right .progressing { transform: rotate(144deg); } .section.menu.menumovingimages .moving-menu .menu-item.locked .status { border-color: #a8a8a8; } .section.menu.menumovingimages .moving-menu .menu-item.locked .status .icon .locked { display: block; width: 30px; height: 30px; /*background: url("img/lock-icon-tall-grey.png") no-repeat center center;*/ background-size: contain; margin-top: 1px; text-align: center; } .section.menu.menumovingimages .wv-movingimage .movingimage { margin: 0; width: 100%; position: relative; } .section.menu.menumovingimages .wv-movingimage .movingimage .movingImageOverlay { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .section.menu.menuhotspot { min-height: 100vh; } .section.menu.menuhotspot .titleHeader { margin-bottom: 0; } .section.menu.menuhotspot .column:nth-child(0) .text { margin-bottom: 0; } .section.menu.menuhotspot .column:nth-child(0) .text p { margin-bottom: 0; } .section.menu.menuhotspot .dot.hover { transform: scale(1.2); } .section.menu.menuhotspot .hotspot-menu { display: none; } .section.menu.menuhotspot .hotspot-menu .menu-item { display: flex; margin-bottom: 17px; } .section.menu.menuhotspot .hotspot-menu .menu-item .status { display: inline-block; background: rgba(0, 0, 0, 0.75); border: 1px solid #fff; width: 25px; height: 25px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; margin-right: 10px; position: relative; } .section.menu.menuhotspot .hotspot-menu .menu-item .status .icon { cursor: pointer; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, -50%); /* IE 9 */ transform: translate(-50%, -50%); /* IE 10, Fx 16+, Op 12.1+ */ } .section.menu.menuhotspot .hotspot-menu .menu-item .status .icon .correct, .section.menu.menuhotspot .hotspot-menu .menu-item .status .icon .locked { display: none; } .section.menu.menuhotspot .hotspot-menu .menu-item .title { cursor: pointer; display: inline-block; flex: 1; line-height: 25px; } .section.menu.menuhotspot .hotspot-menu .menu-item .title p { margin: 0; margin-bottom: -6px; } .section.menu.menuhotspot .hotspot-menu .menu-item.hover:not(.locked) .title { font-weight: bold; text-decoration: underline; } .section.menu.menuhotspot .hotspot-menu .menu-item.hover:not(.locked) .status .icon { width: 10px; height: 10px; background: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .section.menu.menuhotspot .hotspot-menu .menu-item.done .status { background: #00464d; } .section.menu.menuhotspot .hotspot-menu .menu-item.done .status .icon .correct { text-align: center; margin-top: 3px; display: block; } .section.menu.menuhotspot .hotspot-menu .menu-item.locked .status .icon .locked { display: block; width: 12px; height: 16px; background: url("img/lock-icon-tall.png") no-repeat center center; background-size: cover; margin-top: 6px; margin-left: 9px; } .section.menu.menuhotspot .wv-hotspot .hotspot { margin: 0; width: 100%; } .section.menu.menuhotspot .wv-hotspot .hotspot .hotspotImageOverlay { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .section.menu.menuhotspot .wv-hotspot .hotspot .dot { -webkit-box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.15); box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.15); z-index: 10; transition: 0.2s transform linear; } .section.menu.menuhotspot .wv-hotspot .hotspot .dot:not(.open):not(.done):not(.custom) .default { display: block; } .section.menu.menuhotspot .wv-hotspot .hotspot .dot.custom .default { display: none; } .section.menu.menuhotspot .wv-hotspot .hotspot .dot.custom:not(.open):not(.done) .custom { margin-top: 2px; display: block; color: #00464d; text-align: center; } .section.menu.menuhotspot .wv-hotspot .hotspot .dot.custom.open .custom { display: none; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup { padding: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; z-index: 15; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup .image { width: 100%; height: 150px; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup .inner-popup { padding: 20px; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup .inner-popup .body { margin-bottom: 15px; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup .inner-popup .popup-buttons { text-align: right; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup .inner-popup .locked { display: none; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup .popup-close { display: none; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup .text { margin-bottom: 0; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup .button-bordered { padding: 0; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup .button-bordered .text { line-height: 32px !important; padding: 15px 20px; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup.test { display: block; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup.locked .locked { display: block; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup.locked .locked:before { content: ""; display: inline-block; width: 18px; height: 24px; background: url("img/lock-icon-tall-dark.png") no-repeat center center; background-size: cover; margin: 3px 15px 0 10px; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup.locked .locked p { display: inline-block; font-size: 80%; line-height: normal; max-width: calc(100% - 45px); margin-bottom: 0; } @media screen and (max-width: 768px) { .section.menu.menumovingimages .section-inner { padding-top: 120px; } .section.menu.menumovingimages .wv-movingimage .movingimage .movingimage-overlay { display: none !important; } .section.menu.menuhotspot .section-inner { padding-top: 120px; } .section.menu.menuhotspot .wv-hotspot .hotspot .hotspot-overlay { display: none !important; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup { position: fixed; width: 100%; max-width: 100%; max-height: none; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup .inner-popup { max-height: none; } .section.menu.menuhotspot .wv-hotspot .hotspot .popup .popup-close { display: block; position: absolute; top: 20px; right: 20px; background-color: #fff; line-height: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; padding: 8px; border: 0; -webkit-box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.15); box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.15); } } @media screen and (min-width: 769px) { .section.menu.menumovingimages { display: flex; align-items: center; height: 100%; width: 100%; } .section.menu.menumovingimages .column:nth-child(0) .text { margin-bottom: 20px; } .section.menu.menumovingimages .column:nth-child(0) .text p { margin-bottom: 28px; } .section.menu.menumovingimages .moving-menu { display: block; } .section.menu.menumovingimages .section-inner { max-width: 1200px; display: flex; align-items: center; min-height: 50vh; width: 100%; } .section.menu.menumovingimages .section-inner .columns { display: flex; width: 100%; height: 100%; } .section.menu.menumovingimages .section-inner .columns .column { flex: 0 0 33%; width: 33%; height: 100%; } .section.menu.menumovingimages .section-inner .columns .column.wv-movingimage { width: 67%; flex: 0 0 67%; } .section.menu.menuhotspot { display: flex; align-items: center; height: 100%; width: 100%; } .section.menu.menuhotspot .column:nth-child(0) .text { margin-bottom: 20px; } .section.menu.menuhotspot .column:nth-child(0) .text p { margin-bottom: 28px; } .section.menu.menuhotspot .hotspot-menu { display: block; } .section.menu.menuhotspot .section-inner { max-width: 1200px; display: flex; align-items: center; min-height: 50vh; width: 100%; } .section.menu.menuhotspot .section-inner .columns { display: flex; width: 100%; height: 100%; } .section.menu.menuhotspot .section-inner .columns .column { flex: 0 0 33%; width: 33%; height: 100%; } .section.menu.menuhotspot .section-inner .columns .column.wv-hotspot { width: 67%; flex: 0 0 67%; } } @media screen and (min-width: 769px) { .section.menu.menuhotspot .section-inner, .section.menu.menumovingimages .section-inner { padding: 60px; padding-top: 110px; } } @media screen and (min-width: 1280px) { .section.menu.menuhotspot .section-inner, .section.menu.menumovingimages .section-inner { padding-left: 0; padding-right: 0; } } /* IE Only */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /*height: 100vh;*/ } @media screen and (-ms-high-contrast: active) and (min-width: 769px), screen and (-ms-high-contrast: none) and (min-width: 769px) { .section.twoColumns { width: 100%; min-height: 100%; } .section.twoColumns .section-inner { width: 100%; } .section.twoColumns .section-inner .columns { width: 100%; } .section.twoColumns .section-inner .columns .column { width: 50%; height: 100%; } } .gameConclusion { background: #00464d; background: -moz-linear-gradient(45deg, #00464d 0%, #00464d 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, #00464d), color-stop(100%, #00464d)); background: -webkit-linear-gradient(45deg, #00464d 0%, #00464d 100%); background: -o-linear-gradient(45deg, #00464d 0%, #00464d 100%); background: -ms-linear-gradient(45deg, #00464d 0%, #00464d 100%); background: linear-gradient(45deg, #00464d 0%, #00464d 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$gradientStartColor, endColorstr=$gradientEndColor, GradientType=1); /* The deep red: rgba(226,12,24,1) */ } .gameConclusion .emoji { width: 200px; height: 200px; background-size: contain; background-position: center center; background-repeat: no-repeat; margin: 0 auto; } .gameConclusion .resultContainer { display: none; color: #fff; max-width: 620px; width: 100%; margin: 60px auto; } .gameConclusion .resultContainer.active { display: block; } .gameConclusion .resultContainer .resultHeader { font-size: 52px; line-height: 62px; font-weight: bold; } .gameConclusion .resultContainer .resultText { font-size: 20px; } .gameConclusion .resultContainer .resultText p { display: inline; } .gameConclusion .button-bordered.button-icon { background-color: #fff; margin: 15px auto; /* color:$conclusieItemColor;*/ border: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } .gameConclusion .button-bordered.button-icon .scormicon { font-size: 18px; font-family: 'FontAwesome'; } .twoColumns.conclusion .link-items .link { display: block; margin-bottom: 15px; text-decoration: none; } .twoColumns.conclusion .link-items .link .icon { width: 22px; height: 22px; margin-top: 3px; margin-right: 10px; } .twoColumns.conclusion .link-items .link .title { display: inline-block; max-width: 80%; } .twoColumns.conclusion .link-items .link .title p { margin: 0; } .repository { font-size: 0; } .repository .col { /*background:#fff;*/ display: inline-block; font-size: 16px; height: 100%; /*background:#fff;*/ } .repository .col.leftCol { width: 37%; } .repository .col.rightCol { width: 63%; background-color: #fff; } .repository .filters .inner-filter { width: 260px; float: right; margin-right: 25px; } .repository .filters .title { font-size: 20px; color: #00464d; font-weight: bold; } .repository .filters .reset { color: #00464d; font-weight: bold; cursor: pointer; } .repository .filters .tagList { border: 1px solid #00464d; border-width: 1px 0; padding: 20px 0; margin: 20px 0; } .repository .filters .tag { font-weight: bold; cursor: pointer; position: relative; padding-left: 20px; -webkit-transition: all 0.2s; } .repository .filters .tag p { margin: 0; } .repository .filters .sign:before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 12px; background: transparent; border: 1px solid #00464d; border-radius: 2px; font-family: 'scormicons', sans-serif; font-size: 12px; line-height: 12px; color: inherit; text-align: center; -webkit-transition: all 0.2s; transition: all 0.2s; } .repository .filters .active .sign:before { content: "\E002"; border-color: #00464d; color: #00464d; } .repository .filters .tag.active { color: #00464d; } .repository .module { cursor: pointer; width: 250px; color: #fff; display: inline-block; margin: 30px 0 0 30px; font-size: 16px; } .repository .module a { color: inherit; text-decoration: inherit; font-family: inherit; font-weight: inherit; } .repository .module .module-image { border: 2px solid rgba(0, 0, 0, 0.2); overflow: hidden; height: 140px; } .repository .module .module-image img { width: 100%; } .repository .module .title { margin-top: 14px; font-weight: bold; } .repository .module .title p { margin: 0; } .repository .module .subTitle { font-size: 11px; color: rgba(255, 255, 255, 0.6); letter-spacing: 2px; text-transform: uppercase; margin-top: -5px; } .repository .module p { margin: 0; } .popupEntry.overlay { width: 100%; height: 100%; top: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; /*.section:not(.menu) .section-inner {margin-bottom:20px;}*/ /*.videoSection .relatedItems{display:none;background:$secondColor;position: absolute;right: 0;top: 0;bottom: 0;left: calc(100% - 300px);padding: 20px;z-index: 99;} .videoSection .relatedItems .inner {position: relative;display: block;bottom: 0;} .videoSection .relatedItems .relatedTitle {margin-bottom: 40px;margin-top: 10px;} .videoSection .relatedItems .relatedItem {width:100%;border-bottom: 1px solid rgba(255, 255, 255, 0.3);border-radius: 0px;@include transition(all 0.3s ease-in-out);} .videoSection .relatedItems .relatedItem:hover {background: rgba(0, 0, 0, 0.2);}*/ } .popupEntry.overlay .closeOverlay { left: auto; right: 0; top: 20px; z-index: 100; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; -ms-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .popupEntry.overlay .overlay-inner { position: relative; overflow: hidden; padding: 0; max-width: 1026px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; border: 2px solid rgba(255, 255, 255, 0.5); max-height: 80%; top: 50%; transform: translateY(-50%); } .popupEntry.overlay .overlay-inner.outsideClose { overflow: visible; } .popupEntry.overlay .overlay-inner.outsideClose .closeOverlay { -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; right: 0; top: -44px; } .popupEntry.overlay .overlay-content { max-height: 80vh; height: 100%; overflow-y: auto; overflow-x: hidden; background: #fff; border-radius: 1px; } .popupEntry.overlay .overlay-content.hasFrame { height: 80vh; } .popupEntry.overlay .overlay-content.hasFrame iframe { width: 100%; height: 100%; } .popupEntry.overlay .section:not(.menu) { margin-bottom: 0; } .popupEntry.overlay .section.textSection .section-inner .imgContainer { width: 100%; margin-left: 0; } .popupEntry.overlay .wvSectionBG { display: none; } .popupEntry.overlay .relatedItems .related { display: none; } .popupEntry.overlay .videoSection .videoContainer { min-height: 400px; } .popupEntry.overlay .videoSection > .section-inner { display: none; } .relatedItems { position: absolute; right: 20px; top: 50%; z-index: 100; } .relatedItems .relatedTitle { text-transform: uppercase; font-size: 15px; } .relatedItems a { color: inherit; text-decoration: inherit; font-family: inherit; font-weight: inherit; } .relatedItems .related { background: #fff; border-radius: 100%; height: 50px; width: 50px; cursor: pointer; box-shadow: 0px 0px 5px 1px #dcdcdc; } .relatedItems .related .count { background: #00464d; line-height: 6px; padding: 4px; color: #fff; border-radius: 100%; font-size: 10px; position: relative; left: 30px; top: -3px; display: inline-block; } .relatedItems .icon:after { content: ""; display: block; position: absolute; border-left: 20px solid #00464d; border-top: 10px solid transparent; border-bottom: 10px solid transparent; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, -50%); /* IE 9 */ transform: translate(-50%, -50%); /* IE 10, Fx 16+, Op 12.1+ */ } .relatedItems .inner { position: absolute; bottom: 55px; right: 0; display: none; } .relatedItems .relatedImage { width: 50px; height: 50px; display: inline-block; } .relatedItems .text { display: inline-block; width: calc(100% - 60px); line-height: 15px; font-size: 14px; margin-left: 5px; } .relatedItems .text .relSubTitle { font-size: 11px; color: rgba(255, 255, 255, 0.6); letter-spacing: 2px; } .relatedItems .relTitle { padding-bottom: 6px; } .relatedItems .relatedItem { background: #00464d; color: #fff; width: 255px; height: 80px; padding: 14px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; margin-bottom: 10px; position: relative; cursor: pointer; overflow: hidden; } .relatedItems .relatedItem p { margin: 0; } .relatedItems .relatedItem:after { content: ""; display: block; border: 5px solid transparent; border-width: 0px 5px 0px 5px; border-top: 5px solid #00464d; position: absolute; right: 20px; bottom: -5px; } .menuhotspot + .repoMenu .repository .col { padding-top: 90px; } .tilegrid .repository .col, .menuv1 .repository .col, .menuv4 .repository .col, .circle-menu .repository .col { padding-top: 90px; } @media screen and (min-width: 768px) { .repository .col { min-height: calc(100vh); } .repository.inlineheader .col { min-height: calc(100vh - 100px); } .repository.has-header .col { padding-top: 120px; } .menuhotspot + .repoMenu .repository .col { padding-top: 120px; } } @media screen and (max-width: 768px) { .repository { margin-top: 80px; } .repository .col.leftCol { width: 100%; padding: 10px 30px; } .repository .col.rightCol { width: 100%; } .repository .filters .inner-filter { width: 100%; margin-right: 0; float: none; } .videoSection .videoContainer { min-height: 0; } .popupEntry.overlay button.closeOverlay { display: block; } .popupEntry.overlay .overlay-content { max-height: 100%; } .relatedItems { position: relative; top: auto; right: auto; } .relatedItems .icon { display: none; } .relatedItems .inner { display: block !important; right: auto; bottom: auto; position: relative; margin-bottom: 25px; } .relatedItems .relatedItem { margin: 5px auto; width: 85%; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } .relatedItems .relatedItem:after { display: none; } .relatedItems .relatedTitle { font-size: 13px; margin: 0 0 20px 15%; } } .library { display: block; padding: 100px 20px; min-height: 100vh; background: #fff; } .library .top { text-align: center; display: block; max-width: 720px; margin: 0 auto; } .library .top h1 { color: #00464d; } .library .top .form { position: relative; margin-bottom: 20px; } .library .top .form .search_input { display: block; width: 100%; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; padding: 15px; border: 1px solid #a8a8a8; color: #a8a8a8; } @media screen and (max-width: 768px) { .library .top .form .search_input { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .library .top .form .search_input { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } @media screen and (min-width: 1024px) { .library .top .form .search_input { font: normal 16px 'Poppins', sans-serif !important; line-height: normal !important; } } .library .top .form .jsSearch { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(-50%); /* IE 9 */ transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */ width: 42px; height: 22px; padding: 0 10px; background-image: url('img/search-icon.png'); background-size: 22px 22px; background-repeat: no-repeat; background-position: center center; } .library .tags .tag { display: inline-block; text-transform: uppercase; -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; border-radius: 1px; line-height: 24px; border: 1px solid #a8a8a8; color: #a8a8a8; padding: 0 6px; margin: 0 3px 6px 3px; cursor: pointer; } .library .tags .tag.active { color: #fff !important; background: #a8a8a8; } .library .tags .tag.inActive { background: transparent !important; } .library .tags .tag p { margin: 0; font-size: 12px; letter-spacing: 3px; font-weight: bold; } .library .reset-filters, .library .jsMore { display: inline-block; margin: 0 auto; font: 14px 'Poppins'; font-weight: bold; text-decoration: none; color: #00464d; } .library .reset-filters .text p, .library .jsMore .text p { display: inline-block; margin: 0; } .library .reset-filters .reset-icon, .library .jsMore .reset-icon, .library .reset-filters .arrow, .library .jsMore .arrow { display: inline-block; /*background-size: cover; background-repeat: no-repeat; background-position: center center;*/ /* Changed to SVG for ticket #0021029 */ } .library .reset-filters .arrow, .library .jsMore .arrow { /*background-image: url('img/more-arrow-right.png');*/ /* Changed to SVG for ticket #0021029 */ width: 54px; height: 11px; margin-left: 5px; } .library .reset-filters .arrow svg, .library .jsMore .arrow svg { fill: #00464d; } .library .reset-filters .reset-icon, .library .jsMore .reset-icon { vertical-align: middle; width: 22px; height: 22px; /*background-image: url('img/reset-filters.png');*/ /* Changed to SVG for ticket #0021029 */ } .library .reset-filters .reset-icon svg .reset-svg, .library .jsMore .reset-icon svg .reset-svg { fill: #00464d; } .library .reset-filters { margin: 15px auto 0; } .library .reset-filters .text { vertical-align: middle; line-height: 22px; } .library .results { display: block; max-width: 1024px; margin: 50px auto 0; } .library .results .top-title { font-size: 24px; color: #00464d; line-height: 26px; margin: 0 0 30px; } .library .text-center { text-align: center; } .library .videos .items .item .text, .library .documents .items .item .text { font: 16px 'Poppins'; text-align: left; } .library .videos .items .item .text p, .library .documents .items .item .text p { margin: 0 0 5px 0; } .library .videos .items .item .text .title, .library .documents .items .item .text .title { font-weight: bold; } .library .videos .items { -webkit-transition: height ease-in-out 300ms; -moz-transition: height ease-in-out 300ms; -o-transition: height ease-in-out 300ms; -ms-transition: height ease-in-out 300ms; transition: height ease-in-out 300ms; } .library .videos .items .text-center { margin: 25px 0 0 0; } .library .videos .items .item { width: 100%; display: inline-block; cursor: pointer; margin: 0 0 25px 0; /*&:nth-child(odd) { margin: 0 20px 0 20px; }*/ } .library .videos .items .item .image { position: relative; height: 175px; overflow: hidden; } .library .videos .items .item .image img { width: 100%; } .library .videos .items .item .image .play-icon { background: #00464d; width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; pointer-events: none; background-image: url('img/play-icon-white.png'); background-size: 8px; background-position: center; background-repeat: no-repeat; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transform: translate(-50%, -50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translate(-50%, -50%); /* IE 9 */ transform: translate(-50%, -50%); /* IE 10, Fx 16+, Op 12.1+ */ } .library .videos .items .item .text { margin: 10px 0 0 0; } .library .videos .itemsContainer { overflow: hidden; } .library .documents { margin: 35px 0; } .library .documents .items { display: table; width: 100%; } .library .documents .items .item { display: table-row; } .library .documents .items .item:last-child .image, .library .documents .items .item:last-child .text, .library .documents .items .item:last-child .download { border-bottom: none; } .library .documents .items .item .image, .library .documents .items .item .text, .library .documents .items .item .download { display: table-cell; vertical-align: middle; border-bottom: 1px solid #a8a8a8; padding: 15px; } .library .documents .items .item .image .icon-download, .library .documents .items .item .text .icon-download, .library .documents .items .item .download .icon-download { width: 24px; height: 23px; background-image: url('img/download-icon.png'); } .library .documents .items .item .image .icon-document, .library .documents .items .item .text .icon-document, .library .documents .items .item .download .icon-document { width: 70px; height: 84px; /*background-image: url('img/document-icon.png');*/ /* Changed to SVG for ticket #0021029 */ } .library .documents .items .item .image .icon-document svg, .library .documents .items .item .text .icon-document svg, .library .documents .items .item .download .icon-document svg { fill: #00464d; } .library .documents .items .item .image { width: 100px; } .library .documents .items .item .download { width: 54px; } @media screen and (min-width: 768px) { .library { padding: 100px 0; } .library .videos .items .item { width: 33.33%; margin: 0 0 20px; padding: 0 10px; } .library .videos .text-center { margin: 25px 0 0 0; } } .popupEntry.overlay:not(.fullscreen) .videoSection .videoContainer { width: 100%; } .popupEntry.overlay:not(.fullscreen) .videoSection .videoSourceDiv { height: 400px !important; } .popupEntry.overlay.fullscreen .overlay-content { max-height: none; } .popupEntry.overlay.fullscreen .overlay-inner { max-width: none; max-height: none; width: auto; top: auto; transform: none; } .popupEntry.overlay.fullscreen .videoSection .videoContainer .videoControls { display: none; } .videoPlayer .jw-flag-fullscreen .videoControls { display: none; } .videoPlayer .jw-flag-fullscreen .jw-media .jw-video { object-fit: contain; width: 100%; height: 100%; } .textSection .videoContainer .toggleFullscreen { position: absolute; top: 0; right: 0; color: #fff; font-size: 25px; margin: 30px; cursor: pointer; } .textSection .videoContainer .jw-preview { background-size: cover; } .section-inner + .switcher { padding-bottom: 0; } .switcher + .section-inner { padding-top: 0; } .videoSection:not(.fullscreen) { margin-bottom: 0 !important; font-size: 0; /*.videoSourceDiv { width: 100% !important; height: 600px !important; }*/ /* min-height: 600px;*/ } .videoSection:not(.fullscreen) .jw-media .jw-video { width: 100%; } .videoSection:not(.fullscreen) .jw-preview { background-size: cover; } .videoSection:not(.fullscreen) .contentInner { position: relative; } .videoSection:not(.fullscreen) .contentLeft { width: calc(100% - 300px); display: inline-block; } .videoSection:not(.fullscreen) .contentRight { display: inline-block; height: 100%; position: absolute; background-color: #00464d; } .videoSection:not(.fullscreen) .videoContainer:hover .videoButtons .toggleState.pause { display: block; } .videoSection:not(.fullscreen) .videoContainer { display: inline-block; margin-bottom: 0; width: 100%; } .videoSection:not(.fullscreen) .relatedVideos { width: 300px; /*height: 100%;*/ background-color: #00464d; padding: 20px; display: inline-block; position: relative; } .videoSection:not(.fullscreen) .relatedVideos p { margin: 0 !important; } .videoSection:not(.fullscreen) .relatedVideos .title { text-transform: uppercase; font-size: 12px; color: #fff; margin: 15px 15px 25px; font-family: 'Poppins'; } .videoSection:not(.fullscreen) .relatedVideos .items .item { border-bottom: 1px solid rgba(0, 0, 0, 0.2); position: relative; font-family: 'Poppins'; padding: 18px; cursor: pointer; } .videoSection:not(.fullscreen) .relatedVideos .items .item:hover { background: rgba(0, 0, 0, 0.2); } .videoSection:not(.fullscreen) .relatedVideos .items .item .itemImage { overflow: hidden; background-color: #000; width: 50px; height: 50px; display: inline-block; position: absolute; top: 10px; left: 10px; } .videoSection:not(.fullscreen) .relatedVideos .items .item .itemImage img { max-height: 100%; left: 50%; position: relative; transform: translateX(-50%); } .videoSection:not(.fullscreen) .relatedVideos .items .item .itemText { display: inline-block; margin-left: 60px; margin-right: 15px; font-size: 14px; color: #fff; } .videoSection:not(.fullscreen) .relatedVideos .items .item .itemText .itemTitle { line-height: 14px; } .videoSection:not(.fullscreen) .relatedVideos .items .item .itemText .itemSubtitle { text-transform: uppercase; opacity: 0.6; line-height: 16px; margin-top: 8px; } .videoSection:not(.fullscreen) .relatedVideos .items .item .icon { position: absolute; top: 30px; right: 10px; width: 15px; /* background-color: #000; */ background-image: url(img/icon-play-related.png); height: 15px; } .videoSection:not(.fullscreen) .embedContainer { min-height: 400px; position: relative; height: 0px; margin-bottom: 0; } .videoSection:not(.fullscreen) .videoButtons { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .videoSection:not(.fullscreen) .videoButtons .toggleFullscreen { position: absolute; right: 0; top: 0; font-size: 25px; margin: 35px; color: #fff; cursor: pointer; } .videoSection:not(.fullscreen) .videoButtons .toggleState { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #00464d; width: 50px; height: 40px; padding: 14px 21px; margin: auto; cursor: pointer; } .videoSection:not(.fullscreen) .videoButtons .toggleState.pause { display: none; } .videoSection:not(.fullscreen) .videoControls { bottom: 0px; background: none; height: 75px; } .videoSection:not(.fullscreen) .videoControls .toggleState { padding: 35px 0 11px; } .videoSection:not(.fullscreen) .videoControls .progression { position: relative; z-index: 100; width: 100%; height: 100%; font-family: 'Poppins'; font-size: 12px; } .videoSection:not(.fullscreen) .videoControls .progression .progression-bar { height: 20px; position: absolute; width: calc(100% - 120px); top: 20px; bottom: 0; margin: auto 60px; } .videoSection:not(.fullscreen) .videoControls .progression .progression-bar .text-left { left: -40px; position: absolute; top: -3px; } .videoSection:not(.fullscreen) .videoControls .progression .progression-bar .text-right { right: -40px; position: absolute; top: -3px; } .videoSection:not(.fullscreen) .videoControls .progression .progression-bar .progress { background: rgba(0, 0, 0, 0.5); margin: 8px 0px; height: 5px; overflow: visible; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } .videoSection:not(.fullscreen) .videoControls .progression .progression-bar .progress .filler { height: 100%; position: absolute; left: 0; background: #00464d; width: 0%; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } .videoSection:not(.fullscreen) .videoControls .progression .progression-bar .progress .filler .orb { width: 13px; height: 13px; position: absolute; background: #fff; top: -4px; right: -6px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .videoSection:not(.fullscreen) .videoControls .background { height: 100%; position: absolute; overflow: hidden; width: 100%; pointer-events: none; z-index: 100; } .videoSection:not(.fullscreen) .videoControls .background .shadow { position: absolute; bottom: -100%; left: -10%; width: 120%; height: 100%; -webkit-box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 1); } .videoSection:not(.fullscreen) .video-details { font-size: 0; font-family: 'Poppins'; } .videoSection:not(.fullscreen) .video-details .left, .videoSection:not(.fullscreen) .video-details .right { display: inline-block; font-size: 16px; } .videoSection:not(.fullscreen) .video-details .left { width: 40%; padding: 30px; } .videoSection:not(.fullscreen) .video-details .left .title { font-family: 'Poppins'; font-size: 20px; font-weight: bold; color: #00464d; } .videoSection:not(.fullscreen) .video-details .left .subtitle { font-size: 12px; text-transform: uppercase; color: #00464d; } .videoSection:not(.fullscreen) .video-details .right { width: 60%; padding: 30px; font-size: 12px; line-height: 18px; } .videoSection:not(.fullscreen) .video-details p { margin: 0; } @media screen and (max-width: 768px) { .videoSection:not(.fullscreen) { /*.videoContainer {min-height:250px;}*/ /*.videoSourceDiv {height:250px !important}*/ } .videoSection:not(.fullscreen) .contentLeft { width: 100%; } .videoSection:not(.fullscreen) .contentRight { position: relative; width: 100%; } .videoSection:not(.fullscreen) .contentRight .relatedVideos { width: 100%; } .videoSection:not(.fullscreen) .video-details .left { padding: 30px 30px 5px; } .videoSection:not(.fullscreen) .video-details .right { padding: 5px 30px 30px; } .videoSection:not(.fullscreen) .video-details .left, .videoSection:not(.fullscreen) .video-details .right { width: 100%; display: block; } } .videocue-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; background: #fff; z-index: 999; } .videocue-wrapper.active { opacity: 1; visibility: visible; } .videocue-wrapper .videoContainer { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; } .videocue-wrapper .videoContainer .jwplayer { width: 100% !important; height: 100% !important; } .videocue-wrapper .overlays .overlay-item { position: absolute; width: 50%; left: 0; top: 0; height: 100%; opacity: 0; visibility: hidden; background: rgba(0, 0, 0, 0.4); color: #fff; z-index: 100; transform: translateX(-100%); transition: 0.4s all ease-out; } .videocue-wrapper .overlays .overlay-item .inner { padding: 0 90px; color: inherit; display: block; max-height: 100%; overflow-y: scroll; overflow-x: auto; min-height: 100%; } .videocue-wrapper .overlays .overlay-item .inner .titleHeader, .videocue-wrapper .overlays .overlay-item .inner .text, .videocue-wrapper .overlays .overlay-item .inner h3, .videocue-wrapper .overlays .overlay-item .inner .textExplanation { color: inherit; } .videocue-wrapper .overlays .overlay-item .inner .mpc:not(.multiple) .option:not(.correct):not(.wrong) .sign:before { color: inherit; } .videocue-wrapper .overlays .overlay-item .inner .mpc .option.correct .title, .videocue-wrapper .overlays .overlay-item .inner .mpc .option.wrong .title { color: inherit; } .videocue-wrapper .overlays .overlay-item .inner .mpc .option { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .videocue-wrapper .overlays .overlay-item .inner .mpc .option:first-child { border-top: 1px solid rgba(255, 255, 255, 0.3); } .videocue-wrapper .overlays .overlay-item .inner .mpc .option.selected .title { background: rgba(255, 255, 255, 0.3); } .videocue-wrapper .overlays .overlay-item .jsNext.continueCue { color: #fff; font-size: 18px !important; padding: 16px 18px; } .videocue-wrapper .overlays .overlay-item.active { opacity: 1; left: 0; visibility: visible; /*overflow-y: scroll;*/ transform: translateX(0%); } .section.videocue > .jsNext { margin-top: 20px; } .video-cue-front { width: 100%; height: 440px; position: relative; } .video-cue-front .front-image-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .video-cue-front .front-overlay { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: rgba(0, 0, 0, 0.4); padding: 40px 80px; color: #fff; overflow: auto; } .video-cue-front .front-overlay h3 { color: #fff; } .video-cue-front .front-overlay.hidden { display: none; } .video-cue-front .start-cue { text-align: center; margin: 10px; cursor: pointer; } .video-cue-front .start-cue .playbtn { width: 80px; height: 80px; background: #00464d; margin: 0 auto; border-radius: 50%; position: relative; } .video-cue-front .start-cue .playbtn:before { content: ""; background: url('img/play-icon.png'); background-repeat: no-repeat; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center center; } .video-cue-front .start-cue .playbtn.replay:before { background-image: url('img/replay-icon.png'); } .video-cue-front .start-cue .btntext { color: #fff; } .video-cue-player { position: absolute; width: 100%; padding-left: 0px; height: 100%; box-sizing: border-box; } .video-cue-player.locked { pointer-events: none !important; } .video-cue-player.locked .jw-controlbar, .video-cue-player.locked .jw-display-icon-container, .video-cue-player.locked .jw-dock, .video-cue-player.locked .jw-logo, .video-cue-player.locked .jw-media, .video-cue-player.locked .jw-overlays > div, .video-cue-player.locked .jw-skip { pointer-events: none !important; } .video-cue-player .jw-captions, .video-cue-player .jw-controls, .video-cue-player .jw-overlays, .video-cue-player .jw-preview, .video-cue-player .jw-title { display: none; } .video-cue-player .closeCue { position: absolute; top: 10px; right: 10px; font-size: 18px !important; z-index: 999; transform: translatez(0); overflow: hidden; cursor: pointer; color: #fff; padding: 10px 16px 10px 16px; pointer-events: all; visibility: visible; } .video-cue-player .jw-captions { bottom: 80px !important; } .video-cue-player .player-wrapper { position: relative; width: 100%; height: 100%; } .video-cue-player .controls-wrap { width: 100%; height: 100%; position: relative; } .video-cue-player .controls { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; } /*background:#1f2e3e;*/ .video-cue-player .controls .togglereplay { background-image: url('img/replay-icon.png') !important; } .video-cue-player.playing .controls .toggleplay { background-image: url('img/pause.png'); } .video-cue-player .controls .volume { position: absolute; right: 0; top: 0; width: 140px; height: 80px; background-repeat: no-repeat; /*background-color:#0f1e2e;*/ background-position: center center; cursor: pointer; } .video-cue-player .controls .volume .timing { padding: 28px 0px; font-size: 16px; color: #fff; text-shadow: 0px 1px 12px rgba(0, 0, 0, 1); text-align: center; } .video-cue-player .controls .volume .icon { position: relative; top: 33px; left: 33px; } .video-cue-player .controls .volume .icon.on { background-image: url('img/volume-on-icon.png'); } .video-cue-player .controls .volume .icon.off { background-image: url('img/volume-off-icon.png'); } .video-cue-player .controls .toggleplay, .video-cue-player .controls .togglereplay { position: absolute; left: 0; top: 0; width: 80px; height: 80px; background-image: url('img/play.png'); /*background-color:#0f1e2e;*/ background-repeat: no-repeat; background-position: top 25px center; cursor: pointer; z-index: 10; } .video-cue-player .controls .info .inner { width: 100%; height: 100%; display: table; } .video-cue-player .controls .info .text { display: table-cell; font-size: 20px; color: #fff; vertical-align: middle; padding: 0px 30px; text-align: center; } .video-cue-player .controls .info { position: absolute; height: 100%; left: 80px; right: 400px; } .video-cue-player .controls .progress-wrap { position: relative; } .video-cue-player .controls .progress { width: 100%; height: 100%; padding: 0px 105px 0px 80px; position: relative; z-index: 1; } .video-cue-player .controls .progress .progress-bar-filler { width: 0%; height: 4px; left: 0; background: #00464d; border-radius: 5px; } .video-cue-player .controls .progress .progress-bar { width: calc(100% - 40px); height: 4px; position: relative; top: 40px; left: 20px; background: rgba(255, 255, 255, 0.4); border-radius: 5px; -webkit-box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.5); } .video-cue-player .progress .checkpoints { cursor: default; } .video-cue-player .progress .checkpoints.clickable { cursor: pointer; } .video-cue-player .progress .checkpoints .checkpoint.template { display: none; } /* .video-cue-player .progress .checkpoints .checkpoint.done {background-image:url('img/progress-orb-active-done.png');} .video-cue-player .progress .checkpoints .checkpoint.active {background-image:url('img/progress-orb-active.png');} */ .video-cue-player .progress .checkpoints .checkpoint .subtext { display: none; position: absolute; top: -30px; height: 25px; text-align: center; color: #fff; font-size: 14px; width: 30px; margin-left: -7px; font-family: geogrotesque_mdmedium, sans-serif; line-height: 28px; opacity: 0; } .video-cue-player .progress .checkpoints .checkpoint.done .subtext { opacity: 1; } .video-cue-player .progress .checkpoints .checkpoint.active .subtext { opacity: 0.2; top: auto; bottom: -28px; } .video-cue-player .progress .checkpoints .checkpoint { width: 20px; height: 20px; position: absolute; margin-left: -20px; margin-top: -2px; background: #fff; border-radius: 50%; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.45); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.45); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.45); } .video-cue-player .progress .checkpoints .checkpoint.done:before { background: #00464d; } .video-cue-player .progress .checkpoints .checkpoint:before { content: ""; position: absolute; width: 8px; height: 8px; background: #dadada; top: 6px; left: 6px; border-radius: 50%; -webkit-box-shadow: inset 0px 2px 2px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0px 2px 2px 0px rgba(0, 0, 0, 0.5); box-shadow: inset 0px 2px 2px 0px rgba(0, 0, 0, 0.2); } .checkpointImg { width: 16px; height: 16px; position: absolute; left: 0; top: 0; opacity: 0; background-size: cover; -webkit-transition: opacity 400ms; -moz-transition: opacity 400ms; -ms-transition: opacity 400ms; -o-transition: opacity 400ms; transition: opacity 400ms; } .checkpoint.done .checkpointImg { opacity: 1; } .checkpoint.active .checkpointImg { opacity: 1; } .video-cue-player .progress .checkpoints { height: 16px; width: 100%; margin-top: -10px; } @media screen and (max-width: 768px) { .video-cue-front .front-overlay { width: 100%; padding: 25px 25px; } .videocue-wrapper .overlays .overlay-item { width: 100%; overflow: auto; } .videocue-wrapper .overlays .overlay-item .inner { padding: 0; } .videocue-wrapper .overlays .overlay-item .inner .section { margin: 0; } .videocue-wrapper .overlays .overlay-item .inner .section .section-inner { padding: 30px; } } .videoContainer.hasCustomfullscreen .jw-controlbar .jw-icon-fullscreen { display: none !important; } .customfullscreen .jw-icon-fullscreen { display: block !important; color: white !important; line-height: 1.8em !important; } .customfullscreen { position: absolute; top: 5px; right: 5px; width: 55px; height: 50px; text-align: right; z-index: 101; display: none; } .closefullscreenvideo { display: none; } .videoContainer.fullscreen { position: fixed !important; z-index: 100; top: 0; left: 0; bottom: 0; right: 0; background: #000; } .contentScroller.fullscreen .section.fullscreen .section-inner.contentSection { max-width: unset; height: 100%; margin-bottom: 0; } .contentScroller.fullscreen .section.fullscreen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin-bottom: 0; margin-top: 0; z-index: 100; } .contentScroller.fullscreen .section .embedContainer .jwplayer, .contentScroller.fullscreen .section .videoContainer .jwplayer, .popupEntry.overlay .overlay-inner.fullscreen .embedContainer .jwplayer, .popupEntry.overlay .overlay-inner.fullscreen .videoContainer .jwplayer { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); max-height: 100%; } .popupEntry.overlay .overlay-inner.fullscreen { transform: none; max-height: none; max-width: none; top: 0; left: 0; } @font-face { font-family: jw-icons; src: url("../js/jwplayer/jw-icons.woff") format('woff'), url("../js/jwplayer/jw-icons.ttf") format('truetype'); font-weight: 400; font-style: normal; } .caseHeader.fullscreen-hidden { z-index: 0; } .section.wv-hotspot360.fullscreen .glscormwrapper { position: fixed; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; z-index: 1000; } .section.wv-hotspot360 .assignment-popup { display: none; } .section.wv-hotspot360.assignment-hotspot { margin-left: 0 !important; margin-right: 0 !important; z-index: 999; } .section.wv-hotspot360.assignment-hotspot.fullscreen { z-index: 1000; } .section.wv-hotspot360.assignment-hotspot .popup .popup-img { width: calc(100% + 40px); margin: -20px -20px 0px -20px; border-top-left-radius: 5px; border-top-right-radius: 5px; margin-bottom: 15px; } .section.wv-hotspot360.assignment-hotspot .assignment-popup { position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 670px; z-index: 2; margin: auto; display: block; pointer-events: none; } .section.wv-hotspot360.assignment-hotspot .assignment-popup button { text-transform: uppercase; font-weight: bold !important; padding: 11px 5px 11px 5px; margin-top: 15px; } .section.wv-hotspot360.assignment-hotspot .assignment-popup button.secondary:hover { background: #00464d; border-color: #00464d !important; } .section.wv-hotspot360.assignment-hotspot .assignment-popup button.secondary.continueButton360 { background: #44de26; border-color: #44de26 !important; } .section.wv-hotspot360.assignment-hotspot .assignment-popup button.secondary.continueButton360:hover { background: #44de26; border-color: #44de26 !important; } .section.wv-hotspot360.assignment-hotspot .assignment-popup.hidden { opacity: 0; visibility: hidden; } .section.wv-hotspot360.assignment-hotspot .assignment-popup.end { position: absolute; z-index: 1001; } .section.wv-hotspot360.assignment-hotspot .assignment-popup .inner { padding: 35px; text-align: center; background: #fff; margin-top: 50%; transform: translateY(-50%); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; pointer-events: all; } .section.wv-hotspot360.assignment-hotspot .assignment-popup .inner .hotspotHeader { font-size: 39px; line-height: 40px; color: #00464d; font-weight: 100; } .section.wv-hotspot360.assignment-hotspot .assignment-popup .assignment-popup-topper { display: block; margin: 0 auto; margin-bottom: 20px; } .section.wv-hotspot360.assignment-hotspot .assignment-ui { display: none; pointer-events: none; } .section.wv-hotspot360.assignment-hotspot .assignment-ui button { text-transform: uppercase; font-weight: bold !important; padding: 11px 5px 11px 5px; } .section.wv-hotspot360.assignment-hotspot .assignment-ui .assignment-label { opacity: 0; visibility: hidden; background: rgba(0, 0, 0, 0.4); position: absolute; margin: 0 auto; text-align: center; display: block; left: 50%; transform: translate(-50%, -50%); top: 50%; padding: 5px 10px; color: #fff; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear; } .section.wv-hotspot360.assignment-hotspot .assignment-ui .assignment-label.active { opacity: 1; visibility: visible; } .section.wv-hotspot360.assignment-hotspot .assignment-ui .hotspot-icon { position: absolute; bottom: 0; right: 0; background: url('img/360deg-white.png'); width: 115px; height: 54px; display: block; margin: 20px; } .section.wv-hotspot360.assignment-hotspot .assignment-ui .location { position: absolute; bottom: 0; left: 0; display: block; margin: 20px; color: #fff; text-shadow: 0px 0px 10px #000; } .section.wv-hotspot360.assignment-hotspot .assignment-ui .jsCloseAssignment { position: absolute; top: 0; right: 0; display: block; margin: 20px; pointer-events: all; } .section.wv-hotspot360.assignment-hotspot .assignment-ui .counter { color: #fff; position: absolute; top: 0; left: 0; display: block; margin: 40px 20px; text-shadow: 0px 0px 10px #000; } .section.wv-hotspot360.assignment-hotspot .assignment-ui .counter .numbers { display: inline-block; font-size: 50px; line-height: 10px; } .section.wv-hotspot360.assignment-hotspot .assignment-ui .counter .counterlabel p { display: inline; } .section.wv-hotspot360.assignment-hotspot.fullscreen .assignment-ui { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: block; z-index: 10001; } .section.wv-hotspot360.assignment-hotspot .section-inner .inline-text { display: none; } .section.wv-hotspot.showingOverlay { z-index: 5; } .section.wv-hotspot.fullscreen .hotspotContainer { position: fixed; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; z-index: 1001; background: rgba(0, 0, 0, 0.9); } .section.wv-hotspot.fullscreen .hotspotContainer .hotspot { margin-top: 60px; } .section.wv-hotspot.fullscreen .hotspotContainer .jsFullscreenButton { display: none; } .section.wv-hotspot.fullscreen .hotspotContainer .popup-close { padding: 5px 0; margin-top: 10px; float: right; margin-right: 25px; display: block; } .section.wv-hotspot .hotspotContainer .popup-close { display: none; } .section.wv-hotspot .hotspotContainer .jsFullscreenButton { position: absolute; bottom: 10px; right: 10px; z-index: 1005; } .section.wv-hotspot .hotspotContainer .jsFullscreenButton i.jw-icon { color: inherit; padding: 0; margin: 0; float: none; font-size: 1em; min-width: 1.25em; list-style: none; border: 0; direction: ltr; font-stretch: inherit; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); text-align: center; display: inline-block; height: 2em; position: relative; line-height: 2em; vertical-align: middle; cursor: pointer; font-family: jw-icons, sans-serif; -webkit-font-smoothing: antialiased; font-style: normal; font-weight: 400; text-transform: none; background-color: transparent; font-variant: normal; -webkit-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga"; -moz-osx-font-smoothing: grayscale; } .section.wv-hotspot .hotspotContainer .jsFullscreenButton i.jw-icon:before { content: "\E608"; } @media screen and (max-width: 768px) { .section.wv-hotspot360.assignment-hotspot .popup { padding: 0; } .section.wv-hotspot360.assignment-hotspot .popup .inner-popup { height: 100%; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; margin: 0; padding: 20px; max-height: 70vh; overflow-y: auto; overflow-x: hidden; } .section.wv-hotspot360.assignment-hotspot .popup .popup-close { position: absolute; top: -20px; right: -20px; border-radius: 50%; background: #00464d; } .section.wv-hotspot360.assignment-hotspot .assignment-popup { margin: 0 auto; width: 100%; max-width: 375px; } .section.wv-hotspot360.assignment-hotspot .assignment-popup .inner { overflow-y: auto; max-height: 100%; margin-top: 20px; height: 394px; transform: none; padding: 25px 20px; } .section.wv-hotspot360.assignment-hotspot .assignment-popup .inner .hotspotHeader { font-size: 30px; line-height: 30px; } .section.wv-hotspot360.assignment-hotspot .assignment-popup.end { margin-top: 0px; } .section.wv-hotspot360.assignment-hotspot .assignment-ui .location { max-width: 50%; } .section.wv-hotspot360.assignment-hotspot .assignment-ui .counter .numbers { font-size: 40px; } .section.wv-hotspot360.assignment-hotspot .assignment-ui .hotspot-icon { width: 100px; height: 47px; background-size: contain; background-repeat: no-repeat; } } .section.wv-hotspot.fullwidth .section-inner { max-width: 100%; } .section.wv-hotspot.fullwidth .section-inner .limiter { max-width: 100%; } .section.wv-hotspot.fullwidth .section-inner .hotspot img { width: 100%; } .section.wv-hotspot.fullwidth .section-inner .text-limiter { max-width: 678px; position: relative; margin: 0 auto; } .fullbuttons .section.wv-hotspot360.assignment-hotspot .assignment-popup button.secondary { background: #00464d; border-color: #00464d; -webkit-box-shadow: 0 4px 0 0 #002629; -moz-box-shadow: 0 4px 0 0 #002629; box-shadow: 0 4px 0 0 #002629; } .fullbuttons .section.wv-hotspot360.assignment-hotspot .assignment-popup button.secondary.continueButton360 { background: #44de26; border-color: #44de26; -webkit-box-shadow: 0 4px 0 0 #39c31e; -moz-box-shadow: 0 4px 0 0 #39c31e; box-shadow: 0 4px 0 0 #39c31e; } .fullbuttons .section.wv-hotspot360.assignment-hotspot .assignment-popup button.secondary.continueButton360:hover { background: #39c31e; border-color: #39c31e !important; } .fullbuttons .section.wv-hotspot360.assignment-hotspot .assignment-popup button.secondary:hover { background: #002629; border-color: #002629 !important; } .wv-hotspot-sim .hotspotContainer { position: relative; } .wv-hotspot-sim .hotspot { transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; position: absolute; top: 0; left: 0; margin-top: 0; opacity: 1; } .wv-hotspot-sim .hotspot.hidden { opacity: 0; visibility: hidden; } .wv-hotspot-sim .hotspot.first { display: block; position: relative; } .wv-hotspot-sim .hotspot img { width: 100%; } .wv-hotspot-sim .hotspot .dot { display: none; } .wv-hotspot-sim .hotspot .dot.userDot { display: block; } .wv-hotspot-sim .hotspot .dot.userDot .correct, .wv-hotspot-sim .hotspot .dot.userDot .wrong, .wv-hotspot-sim .hotspot .dot.userDot .default { display: none; text-align: center; margin-top: 3px; } .wv-hotspot-sim .hotspot .dot.userDot .correct svg, .wv-hotspot-sim .hotspot .dot.userDot .wrong svg, .wv-hotspot-sim .hotspot .dot.userDot .default svg { width: 15px; height: 15px; } .wv-hotspot-sim .hotspot .dot.userDot.answerCorrect { background-color: #688816; background-image: none; } .wv-hotspot-sim .hotspot .dot.userDot.answerCorrect .correct { display: block; } .wv-hotspot-sim .hotspot .dot.userDot.answerWrong { background-color: #e60000; background-image: none; } .wv-hotspot-sim .hotspot .dot.userDot.answerWrong .wrong { display: block; } .wv-hotspot-sim .jsReset { margin-bottom: 10px; } .library-link-word { color: #00464d !important; cursor: pointer; } .popupEntry .videoSection .relatedItemsUngrouped { display: none; } .relatedItemsUngrouped { position: absolute; top: 0; right: 50px; height: 100%; z-index: 2; } .relatedItemsUngrouped .relatedItem { position: absolute; top: 0; right: 0; width: 50px; height: 50px; color: #333; } .relatedItemsUngrouped .relatedItem .overlayTrigger { cursor: pointer; } .relatedItemsUngrouped .relatedItem .related-icon { cursor: pointer; } .relatedItemsUngrouped .relatedItem .related-icon .item-icon { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; width: 50px; height: 50px; position: absolute; top: 0; right: 45px; background-repeat: no-repeat; background-position: center center; background-size: auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .relatedItemsUngrouped .relatedItem .related-icon .open-icon { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; width: 20px; height: 20px; color: #00464d; font-size: 30px; line-height: 20px; text-align: center; margin: 15px; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .relatedItemsUngrouped .relatedItem.open .inner { opacity: 1; visibility: visible; cursor: pointer; } .relatedItemsUngrouped .relatedItem.open .open-icon { transform: rotate(45deg); } .relatedItemsUngrouped .relatedItem.open .item-icon { opacity: 0; visibility: hidden; } .relatedItemsUngrouped .relatedItem .inner { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; opacity: 0; visibility: hidden; position: absolute; top: 50px; right: 0px; width: 300px; background: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); } .relatedItemsUngrouped .relatedItem .inner .relTextInner { padding: 20px; } .relatedItemsUngrouped .relatedItem .inner .relTextInner p { margin: 0; } .relatedItemsUngrouped .relatedItem .inner .relTextInner .relTitle { font-weight: bold; margin-bottom: 10px; } .relatedItemsUngrouped .relatedItem .inner .relTextInner .relText { margin-bottom: 48px; } .relatedItemsUngrouped .relatedItem .inner .pretitle { position: absolute; top: -40px; left: 0px; font-weight: bold; } .relatedItemsUngrouped .relatedItem .inner .relArrow { position: absolute; bottom: 0; right: 0; width: calc(100% - 40px); height: 20px; padding: 20px; text-align: right; box-sizing: content-box; cursor: pointer; } .relatedItemsUngrouped .relatedItem .inner .relArrow svg { width: 55px; height: 9px; } .relatedItemsUngrouped .relatedItem .inner .relArrow * { stroke: #00464d !important; fill: #00464d !important; } .relatedItemsUngrouped .relatedItem .inner .relImage { width: 100%; height: 150px; overflow: hidden; position: relative; -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; -ms-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } .relatedItemsUngrouped .relatedItem .inner .relImage img { width: 100%; height: 100%; } @media screen and (max-width: 768px) { .relatedItemsUngrouped { right: 10px; } .relatedItemsUngrouped .relatedItem.has-library-link:not(.open) .related-icon .open-icon { display: none; } .relatedItemsUngrouped .relatedItem.has-library-link .related-icon .item-icon { display: none; } .relatedItemsUngrouped .relatedItem:not(.dummy):not(.has-library-link) { top: auto; bottom: 77px; } } /* @import 'scss/scorm-kn'; @import 'scss/scorm2'; @import 'scss/scorm3'; @import 'scss/scorm_nick';*/ /*@import 'scss/variant1';*/ /*@import 'scss/variant2';*/ /*# sourceMappingURL=scorm-4139.css.map */