/* core css files for application build 9433 */ body.compensate-for-scrollbar{overflow:hidden}.fancybox-active{height:auto}.fancybox-is-hidden{left:-9999px;margin:0;position:absolute!important;top:-9999px;visibility:hidden}.fancybox-container{-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;left:0;position:fixed;-webkit-tap-highlight-color:transparent;top:0;-webkit-transform:translateZ(0);transform:translateZ(0);width:100%;z-index:99992}.fancybox-container *{box-sizing:border-box}.fancybox-bg,.fancybox-inner,.fancybox-outer,.fancybox-stage{bottom:0;left:0;position:absolute;right:0;top:0}.fancybox-outer{-webkit-overflow-scrolling:touch;overflow-y:auto}.fancybox-bg{background:#1e1e1e;opacity:0;transition-duration:inherit;transition-property:opacity;transition-timing-function:cubic-bezier(.47,0,.74,.71)}.fancybox-is-open .fancybox-bg{opacity:.87;transition-timing-function:cubic-bezier(.22,.61,.36,1)}.fancybox-caption,.fancybox-infobar,.fancybox-navigation .fancybox-button,.fancybox-toolbar{direction:ltr;opacity:0;position:absolute;transition:opacity .25s,visibility 0s linear .25s;visibility:hidden;z-index:99997}.fancybox-show-caption .fancybox-caption,.fancybox-show-infobar .fancybox-infobar,.fancybox-show-nav .fancybox-navigation .fancybox-button,.fancybox-show-toolbar .fancybox-toolbar{opacity:1;transition:opacity .25s,visibility 0s;visibility:visible}.fancybox-infobar{color:#ccc;height:44px;left:0;line-height:44px;min-width:44px;mix-blend-mode:difference;padding:0 10px;pointer-events:none;text-align:center;top:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fancybox-toolbar{right:0;top:0}.fancybox-stage{direction:ltr;overflow:visible;-webkit-transform:translateZ(0);z-index:99994}.fancybox-is-open .fancybox-stage{overflow:hidden}.fancybox-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:none;height:100%;left:0;outline:none;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:absolute;text-align:center;top:0;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;white-space:normal;width:100%;z-index:99994}.fancybox-slide:before{content:"";display:inline-block;height:100%;margin-right:-.25em;vertical-align:middle;width:0}.fancybox-is-sliding .fancybox-slide,.fancybox-slide--current,.fancybox-slide--next,.fancybox-slide--previous{display:block}.fancybox-slide--next{z-index:99995}.fancybox-slide--image{overflow:visible;padding:44px 0}.fancybox-slide--image:before{display:none}.fancybox-slide--html{padding:6px 6px 0}.fancybox-slide--iframe{padding:44px 44px 0}.fancybox-content{background:#fff;display:inline-block;margin:0 0 6px;max-width:100%;overflow:auto;padding:0;padding:24px;position:relative;text-align:left;vertical-align:middle}.fancybox-slide--image .fancybox-content{-webkit-animation-timing-function:cubic-bezier(.5,0,.14,1);animation-timing-function:cubic-bezier(.5,0,.14,1);-webkit-backface-visibility:hidden;backface-visibility:hidden;background:transparent;background-repeat:no-repeat;background-size:100% 100%;left:0;margin:0;max-width:none;overflow:visible;padding:0;position:absolute;top:0;-webkit-transform-origin:top left;transform-origin:top left;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:99995}.fancybox-can-zoomOut .fancybox-content{cursor:zoom-out}.fancybox-can-zoomIn .fancybox-content{cursor:zoom-in}.fancybox-can-drag .fancybox-content{cursor:-webkit-grab;cursor:grab}.fancybox-is-dragging .fancybox-content{cursor:-webkit-grabbing;cursor:grabbing}.fancybox-container [data-selectable=true]{cursor:text}.fancybox-image,.fancybox-spaceball{background:transparent;border:0;height:100%;left:0;margin:0;max-height:none;max-width:none;padding:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.fancybox-spaceball{z-index:1}.fancybox-slide--html .fancybox-content{margin-bottom:6px}.fancybox-slide--iframe .fancybox-content,.fancybox-slide--map .fancybox-content,.fancybox-slide--video .fancybox-content{height:100%;margin:0;overflow:visible;padding:0;width:100%}.fancybox-slide--video .fancybox-content{background:#000}.fancybox-slide--map .fancybox-content{background:#e5e3df}.fancybox-slide--iframe .fancybox-content{background:#fff;height:calc(100% - 44px);margin-bottom:44px}.fancybox-iframe,.fancybox-video{background:transparent;border:0;height:100%;margin:0;overflow:hidden;padding:0;width:100%}.fancybox-iframe{vertical-align:top}.fancybox-error{background:#fff;cursor:default;max-width:400px;padding:40px;width:100%}.fancybox-error p{color:#444;font-size:16px;line-height:20px;margin:0;padding:0}.fancybox-button{background:rgba(30,30,30,.6);border:0;border-radius:0;cursor:pointer;display:inline-block;height:44px;margin:0;outline:none;padding:10px;transition:color .2s;vertical-align:top;width:44px}.fancybox-button,.fancybox-button:link,.fancybox-button:visited{color:#ccc}.fancybox-button:focus,.fancybox-button:hover{color:#fff}.fancybox-button.disabled,.fancybox-button.disabled:hover,.fancybox-button[disabled],.fancybox-button[disabled]:hover{color:#888;cursor:default}.fancybox-button svg{display:block;overflow:visible;position:relative;shape-rendering:geometricPrecision}.fancybox-button svg path{fill:transparent;stroke:currentColor;stroke-linejoin:round;stroke-width:3}.fancybox-button--pause svg path:nth-child(1),.fancybox-button--play svg path:nth-child(2){display:none}.fancybox-button--play svg path,.fancybox-button--share svg path,.fancybox-button--thumbs svg path{fill:currentColor}.fancybox-button--share svg path{stroke-width:1}.fancybox-navigation .fancybox-button{height:38px;opacity:0;padding:6px;position:absolute;top:50%;width:38px}.fancybox-show-nav .fancybox-navigation .fancybox-button{transition:opacity .25s,visibility 0s,color .25s}.fancybox-navigation .fancybox-button:after{content:"";left:-25px;padding:50px;position:absolute;top:-25px}.fancybox-navigation .fancybox-button--arrow_left{left:6px}.fancybox-navigation .fancybox-button--arrow_right{right:6px}.fancybox-close-small{background:transparent;border:0;border-radius:0;color:#555;cursor:pointer;height:44px;margin:0;padding:6px;position:absolute;right:0;top:0;width:44px;z-index:10}.fancybox-close-small svg{fill:transparent;opacity:.8;stroke:currentColor;stroke-width:1.5;transition:stroke .1s}.fancybox-close-small:focus{outline:none}.fancybox-close-small:hover svg{opacity:1}.fancybox-slide--iframe .fancybox-close-small,.fancybox-slide--image .fancybox-close-small,.fancybox-slide--video .fancybox-close-small{color:#ccc;padding:5px;right:-12px;top:-44px}.fancybox-slide--iframe .fancybox-close-small:hover svg,.fancybox-slide--image .fancybox-close-small:hover svg,.fancybox-slide--video .fancybox-close-small:hover svg{background:transparent;color:#fff}.fancybox-is-scaling .fancybox-close-small,.fancybox-is-zoomable.fancybox-can-drag .fancybox-close-small{display:none}.fancybox-caption{bottom:0;color:#fff;font-size:14px;font-weight:400;left:0;line-height:1.5;padding:25px 44px;right:0}.fancybox-caption:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEtCAQAAABjBcL7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHRJREFUKM+Vk8EOgDAIQ0vj/3+xBw8qIZZueFnIKC90MCAI8DlrkHGeqqGIU6lVigrBtpCWqeRWoHDNqs0F7VNVBVxmHRlvoVqjaYkdnDIaivH2HqZ5+oZj3JUzWB+cOz4G48Bg+tsJ/tqu4dLC/4Xb+0GcF5BwBC0AA53qAAAAAElFTkSuQmCC);background-repeat:repeat-x;background-size:contain;bottom:0;content:"";display:block;left:0;pointer-events:none;position:absolute;right:0;top:-25px;z-index:-1}.fancybox-caption:after{border-bottom:1px solid hsla(0,0%,100%,.3);content:"";display:block;left:44px;position:absolute;right:44px;top:0}.fancybox-caption a,.fancybox-caption a:link,.fancybox-caption a:visited{color:#ccc;text-decoration:none}.fancybox-caption a:hover{color:#fff;text-decoration:underline}.fancybox-loading{-webkit-animation:a .8s infinite linear;animation:a .8s infinite linear;background:transparent;border:6px solid hsla(0,0%,39%,.5);border-radius:100%;border-top-color:#fff;height:60px;left:50%;margin:-30px 0 0 -30px;opacity:.6;padding:0;position:absolute;top:50%;width:60px;z-index:99999}@-webkit-keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fancybox-animated{transition-timing-function:cubic-bezier(0,0,.25,1)}.fancybox-fx-slide.fancybox-slide--previous{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.fancybox-fx-slide.fancybox-slide--next{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.fancybox-fx-slide.fancybox-slide--current{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}.fancybox-fx-fade.fancybox-slide--next,.fancybox-fx-fade.fancybox-slide--previous{opacity:0;transition-timing-function:cubic-bezier(.19,1,.22,1)}.fancybox-fx-fade.fancybox-slide--current{opacity:1}.fancybox-fx-zoom-in-out.fancybox-slide--previous{opacity:0;-webkit-transform:scale3d(1.5,1.5,1.5);transform:scale3d(1.5,1.5,1.5)}.fancybox-fx-zoom-in-out.fancybox-slide--next{opacity:0;-webkit-transform:scale3d(.5,.5,.5);transform:scale3d(.5,.5,.5)}.fancybox-fx-zoom-in-out.fancybox-slide--current{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.fancybox-fx-rotate.fancybox-slide--previous{opacity:0;-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}.fancybox-fx-rotate.fancybox-slide--next{opacity:0;-webkit-transform:rotate(1turn);transform:rotate(1turn)}.fancybox-fx-rotate.fancybox-slide--current{opacity:1;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.fancybox-fx-circular.fancybox-slide--previous{opacity:0;-webkit-transform:scale3d(0,0,0) translate3d(-100%,0,0);transform:scale3d(0,0,0) translate3d(-100%,0,0)}.fancybox-fx-circular.fancybox-slide--next{opacity:0;-webkit-transform:scale3d(0,0,0) translate3d(100%,0,0);transform:scale3d(0,0,0) translate3d(100%,0,0)}.fancybox-fx-circular.fancybox-slide--current{opacity:1;-webkit-transform:scaleX(1) translateZ(0);transform:scaleX(1) translateZ(0)}.fancybox-fx-tube.fancybox-slide--previous{-webkit-transform:translate3d(-100%,0,0) scale(.1) skew(-10deg);transform:translate3d(-100%,0,0) scale(.1) skew(-10deg)}.fancybox-fx-tube.fancybox-slide--next{-webkit-transform:translate3d(100%,0,0) scale(.1) skew(10deg);transform:translate3d(100%,0,0) scale(.1) skew(10deg)}.fancybox-fx-tube.fancybox-slide--current{-webkit-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1)}.fancybox-share{background:#f4f4f4;border-radius:3px;max-width:90%;padding:30px;text-align:center}.fancybox-share h1{color:#222;font-size:35px;font-weight:700;margin:0 0 20px}.fancybox-share p{margin:0;padding:0}.fancybox-share__button{border:0;border-radius:3px;display:inline-block;font-size:14px;font-weight:700;line-height:40px;margin:0 5px 10px;min-width:130px;padding:0 15px;text-decoration:none;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.fancybox-share__button:link,.fancybox-share__button:visited{color:#fff}.fancybox-share__button:hover{text-decoration:none}.fancybox-share__button--fb{background:#3b5998}.fancybox-share__button--fb:hover{background:#344e86}.fancybox-share__button--pt{background:#bd081d}.fancybox-share__button--pt:hover{background:#aa0719}.fancybox-share__button--tw{background:#1da1f2}.fancybox-share__button--tw:hover{background:#0d95e8}.fancybox-share__button svg{height:25px;margin-right:7px;position:relative;top:-1px;vertical-align:middle;width:25px}.fancybox-share__button svg path{fill:#fff}.fancybox-share__input{background:transparent;border:0;border-bottom:1px solid #d7d7d7;border-radius:0;color:#5d5b5b;font-size:14px;margin:10px 0 0;outline:none;padding:10px 15px;width:100%}.fancybox-thumbs{background:#fff;bottom:0;display:none;margin:0;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;padding:2px 2px 4px;position:absolute;right:0;-webkit-tap-highlight-color:transparent;top:0;width:212px;z-index:99995}.fancybox-thumbs-x{overflow-x:auto;overflow-y:hidden}.fancybox-show-thumbs .fancybox-thumbs{display:block}.fancybox-show-thumbs .fancybox-inner{right:212px}.fancybox-thumbs>ul{font-size:0;height:100%;list-style:none;margin:0;overflow-x:hidden;overflow-y:auto;padding:0;position:absolute;position:relative;white-space:nowrap;width:100%}.fancybox-thumbs-x>ul{overflow:hidden}.fancybox-thumbs-y>ul::-webkit-scrollbar{width:7px}.fancybox-thumbs-y>ul::-webkit-scrollbar-track{background:#fff;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.fancybox-thumbs-y>ul::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:10px}.fancybox-thumbs>ul>li{-webkit-backface-visibility:hidden;backface-visibility:hidden;cursor:pointer;float:left;height:75px;margin:2px;max-height:calc(100% - 8px);max-width:calc(50% - 4px);outline:none;overflow:hidden;padding:0;position:relative;-webkit-tap-highlight-color:transparent;width:100px}.fancybox-thumbs-loading{background:rgba(0,0,0,.1)}.fancybox-thumbs>ul>li{background-position:50%;background-repeat:no-repeat;background-size:cover}.fancybox-thumbs>ul>li:before{border:4px solid #4ea7f9;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:all .2s cubic-bezier(.25,.46,.45,.94);z-index:99991}.fancybox-thumbs .fancybox-thumbs-active:before{opacity:1}@media (max-width:800px){.fancybox-thumbs{width:110px}.fancybox-show-thumbs .fancybox-inner{right:110px}.fancybox-thumbs>ul>li{max-width:calc(100% - 10px)}}@import url("themes/tooltipster-claro.css"); .tooltipster-base { width: max-content !important; height: max-content !important; }.tooltipster-fall,.tooltipster-grow.tooltipster-show{-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1);-moz-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-ms-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-o-transition-timing-function:cubic-bezier(.175,.885,.32,1.15)}.tooltipster-base{display:flex;pointer-events:none;position:absolute}.tooltipster-box{flex:1 1 auto}.tooltipster-content{box-sizing:border-box;max-height:100%;max-width:100%;overflow:auto}.tooltipster-ruler{bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;visibility:hidden}.tooltipster-fade{opacity:0;-webkit-transition-property:opacity;-moz-transition-property:opacity;-o-transition-property:opacity;-ms-transition-property:opacity;transition-property:opacity}.tooltipster-fade.tooltipster-show{opacity:1}.tooltipster-grow{-webkit-transform:scale(0,0);-moz-transform:scale(0,0);-o-transform:scale(0,0);-ms-transform:scale(0,0);transform:scale(0,0);-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-backface-visibility:hidden}.tooltipster-grow.tooltipster-show{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);transition-timing-function:cubic-bezier(.175,.885,.32,1.15)}.tooltipster-swing{opacity:0;-webkit-transform:rotateZ(4deg);-moz-transform:rotateZ(4deg);-o-transform:rotateZ(4deg);-ms-transform:rotateZ(4deg);transform:rotateZ(4deg);-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform}.tooltipster-swing.tooltipster-show{opacity:1;-webkit-transform:rotateZ(0);-moz-transform:rotateZ(0);-o-transform:rotateZ(0);-ms-transform:rotateZ(0);transform:rotateZ(0);-webkit-transition-timing-function:cubic-bezier(.23,.635,.495,1);-webkit-transition-timing-function:cubic-bezier(.23,.635,.495,2.4);-moz-transition-timing-function:cubic-bezier(.23,.635,.495,2.4);-ms-transition-timing-function:cubic-bezier(.23,.635,.495,2.4);-o-transition-timing-function:cubic-bezier(.23,.635,.495,2.4);transition-timing-function:cubic-bezier(.23,.635,.495,2.4)}.tooltipster-fall{-webkit-transition-property:top;-moz-transition-property:top;-o-transition-property:top;-ms-transition-property:top;transition-property:top;-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);transition-timing-function:cubic-bezier(.175,.885,.32,1.15)}.tooltipster-fall.tooltipster-initial{top:0!important}.tooltipster-fall.tooltipster-dying{-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;-ms-transition-property:all;transition-property:all;top:0!important;opacity:0}.tooltipster-slide{-webkit-transition-property:left;-moz-transition-property:left;-o-transition-property:left;-ms-transition-property:left;transition-property:left;-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-moz-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-ms-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);-o-transition-timing-function:cubic-bezier(.175,.885,.32,1.15);transition-timing-function:cubic-bezier(.175,.885,.32,1.15)}.tooltipster-slide.tooltipster-initial{left:-40px!important}.tooltipster-slide.tooltipster-dying{-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;-ms-transition-property:all;transition-property:all;left:0!important;opacity:0}@keyframes tooltipster-fading{0%{opacity:0}100%{opacity:1}}.tooltipster-update-fade{animation:tooltipster-fading .4s}@keyframes tooltipster-rotating{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}100%{transform:rotate(0)}}.tooltipster-update-rotate{animation:tooltipster-rotating .6s}@keyframes tooltipster-scaling{50%{transform:scale(1.1)}100%{transform:scale(1)}}.tooltipster-update-scale{animation:tooltipster-scaling .6s}.tooltipster-sidetip .tooltipster-box{background:#565656;border:2px solid #000;border-radius:4px}.tooltipster-sidetip.tooltipster-bottom .tooltipster-box{margin-top:8px}.tooltipster-sidetip.tooltipster-left .tooltipster-box{margin-right:8px}.tooltipster-sidetip.tooltipster-right .tooltipster-box{margin-left:8px}.tooltipster-sidetip.tooltipster-top .tooltipster-box{margin-bottom:8px}.tooltipster-sidetip .tooltipster-content{color:#fff;line-height:18px;padding:6px 14px}.tooltipster-sidetip .tooltipster-arrow{overflow:hidden;position:absolute}.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow{height:10px;margin-left:-10px;top:0;width:20px}.tooltipster-sidetip.tooltipster-left .tooltipster-arrow{height:20px;margin-top:-10px;right:0;top:0;width:10px}.tooltipster-sidetip.tooltipster-right .tooltipster-arrow{height:20px;margin-top:-10px;left:0;top:0;width:10px}.tooltipster-sidetip.tooltipster-top .tooltipster-arrow{bottom:0;height:10px;margin-left:-10px;width:20px}.tooltipster-sidetip .tooltipster-arrow-background,.tooltipster-sidetip .tooltipster-arrow-border{height:0;position:absolute;width:0}.tooltipster-sidetip .tooltipster-arrow-background{border:10px solid transparent}.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background{border-bottom-color:#565656;left:0;top:3px}.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background{border-left-color:#565656;left:-3px;top:0}.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background{border-right-color:#565656;left:3px;top:0}.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background{border-top-color:#565656;left:0;top:-3px}.tooltipster-sidetip .tooltipster-arrow-border{border:10px solid transparent;left:0;top:0}.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border{border-bottom-color:#000}.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border{border-left-color:#000}.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border{border-right-color:#000}.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border{border-top-color:#000}.tooltipster-sidetip .tooltipster-arrow-uncropped{position:relative}.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped{top:-10px}.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped{left:-10px}.tooltipster-capture .tooltipster-box{ border: 1px solid #cccccc; background: #fff; box-shadow : 0 3px 6px rgba(0,0,0,0.3); border-radius:0; } .tooltipster-capture.tooltipster-sidetip .tooltipster-content { color: #888; } .tooltipster-capture.tooltipster-sidetip.tooltipster-right .tooltipster-arrow { left : -1px; } .tooltipster-capture.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border{ border-right-color : #BBB; } .tooltipster-capture.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background{ border-right-color : #FFF; left : 1px; } .tooltipster-capture.tooltipster-sidetip.tooltipster-left .tooltipster-arrow { right : -1px; } .tooltipster-capture.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border { border-left-color : #BBB; } .tooltipster-capture.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background{ border-left-color : #fff; left : -1px; } .tooltipster-capture.tooltipster-sidetip.tooltipster-top .tooltipster-arrow { bottom : -1px; } .tooltipster-capture.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border{ border-top-color : #BBB; } .tooltipster-capture.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background{ border-top-color : #fff; bottom : 1px; } .tooltipster-capture.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow { top : -1px; } .tooltipster-capture.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border { border-bottom-color : #BBB; } .tooltipster-capture.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background{ border-bottom-color : #fff; top : 1px; } .tooltipster-capture .tooltipster-content { font-size: 14px; line-height: 16px; padding: 10px 20px 15px 20px; } .tooltipster-capture { z-index: 99999 !important; } .tooltipster-claro.tooltipster-sidetip .tooltipster-box{ border-radius: 2px; border: 1px solid #ccc; box-shadow: 1px 3px 15px -1px #333; background: #fff; } .tooltipster-claro.tooltipster-sidetip .tooltipster-content { color: #333; line-height: 100%; padding: 0px; max-height: 500px; overflow-y: auto; } .tooltipster-claro.tooltipster-sidetip .tooltipster-content .tooltip-header{ border-bottom: 1px solid #ccc; } .tooltipster-claro.tooltipster-sidetip.tooltipster-right .tooltipster-arrow { left : -1px; } .tooltipster-claro.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border{ border-right-color : #BBB; } .tooltipster-claro.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background{ border-right-color : #FFF; left : 1px; } .tooltipster-claro.tooltipster-sidetip.tooltipster-left .tooltipster-arrow { right : -1px; } .tooltipster-claro.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border { border-left-color : #BBB; } .tooltipster-claro.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background{ border-left-color : #fff; left : -1px; } .tooltipster-claro.tooltipster-sidetip.tooltipster-top .tooltipster-arrow { bottom : -1px; } .tooltipster-claro.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border{ border-top-color : #BBB; } .tooltipster-claro.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background{ border-top-color : #fff; bottom : 1px; } .tooltipster-claro.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow { top : -1px; } .tooltipster-claro.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border { border-bottom-color : #BBB; } .tooltipster-claro.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background{ border-bottom-color : #fff; top : 1px; }/*! Flickity v2.0.5 http://flickity.metafizzy.co ---------------------------------------------- */ .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } /* draggable */ .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; } /* ---- previous/next buttons ---- */ .flickity-prev-next-button { position: absolute; top: 50%; width: 44px; height: 44px; border: none; border-radius: 50%; background: white; background: hsla(0, 0%, 100%, 0.75); cursor: pointer; /* vertically center */ -webkit-transform: translateY(-50%); transform: translateY(-50%); } .flickity-prev-next-button:hover { background: white; } .flickity-prev-next-button:focus { outline: none; box-shadow: 0 0 0 5px #09F; } .flickity-prev-next-button:active { opacity: 0.6; } .flickity-prev-next-button.previous { left: 10px; } .flickity-prev-next-button.next { right: 10px; } /* right to left */ .flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; } .flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; } .flickity-prev-next-button:disabled { opacity: 0.3; cursor: auto; } .flickity-prev-next-button svg { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } .flickity-prev-next-button .arrow { fill: #333; } /* ---- page dots ---- */ .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; opacity: 0.25; cursor: pointer; } .flickity-page-dots .dot.is-selected { opacity: 1; }/* // caption.js styles */ /* Main */ .captionjs { line-height: 0; } .captionjs figcaption { line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; width: 100%; text-align: left; } .captionjs.overlay, .captionjs.stacked, .captionjs.animated, .captionjs.hide { position: relative; overflow: hidden; } .captionjs.stacked figcaption, .captionjs.animated figcaption, .captionjs.hide figcaption, .captionjs.overlay figcaption { position: absolute; } /* Stacked mode */ .captionjs.stacked figcaption { bottom: 0; } /* Overlay mode */ .captionjs.overlay{ margin: 0 !important; } .captionjs.overlay:after{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; background-color: rgba(0, 0, 0, 0.6); opacity: 0; } .captionjs.overlay figcaption { display: flex; justify-content: center; align-items: center; margin: 0; top: 0; bottom: 0; opacity: 0; color: #fff; z-index: 3; } .captionjs.overlay figcaption, .captionjs.overlay:after { -webkit-transition: 0.5s opacity; -moz-transition: 0.5s opacity; -ms-transition: 0.5s opacity; -o-transition: 0.5s opacity; transition: 0.5s opacity; } .captionjs.overlay:hover figcaption, .captionjs.overlay:hover:after { opacity: 1 !important; } /* Animated mode */ .captionjs.animated figcaption { -webkit-transition: 0.25s bottom; -moz-transition: 0.25s bottom; -ms-transition: 0.25s bottom; -o-transition: 0.25s bottom; transition: 0.25s bottom; } .captionjs.animated:hover figcaption { bottom: 0 !important; } /* Hide mode */ .captionjs.hide figcaption { -webkit-transition: 0.25s margin-bottom; -moz-transition: 0.25s margin-bottom; -ms-transition: 0.25s margin-bottom; -o-transition: 0.25s margin-bottom; transition: 0.25s margin-bottom; } .captionjs.hide:hover figcaption { margin-bottom: 0 !important; } .captionjs figcaption{ border: none; } body.responsive .captionjs img{ width: auto !important; } .captionjs, .captionjs figcaption { margin: 0 0 20px; padding: 0; } .captionjs figcaption { font-size: 13px; line-height: 1.5; padding: 10px 15px; border-top: none; } .captionjs.animated figcaption, .captionjs.stacked figcaption { border-top: 1px solid rgba(255, 255, 255, 0.3); background-color: rgba(0, 0, 0, 0.5); color: #fff; border: none; } .captionjs.hide figcaption { border-top: 1px solid rgba(255, 255, 255, 0.3); background-color: rgba(33, 33, 99, 0.75); color: #fff; border: none; } .captionjs.default a { color: #000; }.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;height:100%;width:100%;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;transform-style:flat}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{top:-100%;width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;bottom:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connects{border-radius:3px}.noUi-connect{background:#3FB8AF}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-sub{background:#AAA}.noUi-marker-large{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0,50%);transform:translate(0,50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}.noUi-horizontal .noUi-origin>.noUi-tooltip{-webkit-transform:translate(50%,0);transform:translate(50%,0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0,-18px);transform:translate(0,-18px);top:auto;right:28px}/* -------------------------------- Primary style -------------------------------- */ .dki-timeline-element *, .dki-timeline-element *:after, .dki-timeline-element *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .dki-tinmeline-element a { color: #acb7c0; text-decoration: none; font-family: "Open Sans", sans-serif; } .dki-timeline-element img { max-width: 100%; } .dki-timeline-element h1, .dki-timeline-element h2 { font-family: "Open Sans", sans-serif; font-weight: bold; } .dki-timeline-element section{ margin:10px 0; } .dki-timeline-element .cd-timeline-img i{ display:block; width: 30px; height: 30px; line-height: 30px; text-align: center; position:relative; padding:0 !important; } .dki-timeline-element .cd-timeline-img i{ font-size:30px; text-align:center; } .dki-timeline-element .cd-timeline-block.add { display:none !important; } .dki-timelineNode-element{ height:100%; padding:0 !important; } /* -------------------------------- Modules - reusable parts of our design -------------------------------- */ .cd-container { /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */ width: 90%; max-width: 1170px; margin: 0 auto; } .cd-container::after { /* clearfix */ content: ''; display: table; clear: both; } /* -------------------------------- Main components -------------------------------- */ .dki-timeline-element header { height: 200px; line-height: 200px; text-align: center; background: #303e49; } @media only screen and (min-width: 1170px) { .dki-timeline-element header { height: 300px; line-height: 300px; } } .dki-timeline-element section { position: relative; padding: 2em 0; margin-top: 2em; margin-bottom: 2em; } .dki-timeline-element section::before { /* this is the vertical line */ content: ''; position: absolute; top: 0; left: 18px; height: 100%; width: 4px; background: #d7e4ed; } @media only screen and (min-width: 993px) { .dki-timeline-element section.tl-md, .dki-timeline-element section.tl-none{ margin-top: 3em; margin-bottom: 3em; } .dki-timeline-element section.tl-md::before, .dki-timeline-element section.tl-none::before { left: 50%; margin-left: -2px; } } @media only screen and (min-width: 769px) { .dki-timeline-element section.tl-sm{ margin-top: 3em; margin-bottom: 3em; } .dki-timeline-element section.tl-sm::before { left: 50%; margin-left: -2px; } } @media only screen and (min-width: 768px) { .dki-timeline-element section.tl-xs{ margin-top: 3em; margin-bottom: 3em; } .dki-timeline-element section.tl-xs::before { left: 50%; margin-left: -2px; } } .cd-timeline-block { position: relative; margin: 2em 0; } .cd-timeline-block:after { content: ""; display: table; clear: both; } .cd-timeline-block:first-child { margin-top: 0; } .cd-timeline-block:last-child { margin-bottom: 0; } @media only screen and (min-width: 993px) { .tl-md .cd-timeline-block { margin: 4em 0; } .tl-md .cd-timeline-block:first-child { margin-top: 0; } .tl-md .cd-timeline-block:last-child { margin-bottom: 0; } } @media only screen and (min-width: 769px) { .tl-sm .cd-timeline-block { margin: 4em 0; } .tl-sm .cd-timeline-block:first-child { margin-top: 0; } .tl-sm .cd-timeline-block:last-child { margin-bottom: 0; } } @media only screen and (min-width: 768px) { .tl-xs .cd-timeline-block { margin: 4em 0; } .tl-xs .cd-timeline-block:first-child { margin-top: 0; } .tl-xs .cd-timeline-block:last-child { margin-bottom: 0; } } .cd-timeline-img, .cd-timeline-img.active { z-index:2; position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); } .cd-timeline-img .img { display: block; width:100%; height:100%; border-radius:50%; background-size:contain; background-repeat:no-repeat; background-position:center; } .cd-timeline-img.cd-picture { background: #75ce66; } .cd-timeline-img.cd-movie { background: #c03b44; } .cd-timeline-img.cd-location { background: #f0ca45; } .cssanimations .cd-timeline-block .cd-timeline-content.bounce-in { -webkit-animation: cd-bounce-2-inverse 0.6s; -moz-animation: cd-bounce-2-inverse 0.6s; animation: cd-bounce-2-inverse 0.6s; } .cssanimations .cd-timeline-img.bounce-in { visibility: visible; -webkit-animation: cd-bounce-1 0.6s; -moz-animation: cd-bounce-1 0.6s; animation: cd-bounce-1 0.6s; } .cssanimations .cd-timeline-content.is-hidden, .cssanimations .cd-timeline-img.is-hidden { visibility: hidden; } @media only screen and (min-width: 993px) { .tl-md .cd-timeline-img { width: 60px; height: 60px; left: 50%; margin-left: -30px; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .tl-md .cd-timeline-img i{ width: 50px; height: 50px; line-height: 50px; } .cssanimations .tl-md .cd-timeline-img.bounce-in { visibility: visible; -webkit-animation: cd-bounce-1 0.6s; -moz-animation: cd-bounce-1 0.6s; animation: cd-bounce-1 0.6s; } } @media only screen and (min-width: 769px) { .tl-sm .cd-timeline-img { width: 60px; height: 60px; left: 50%; margin-left: -30px; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .tl-sm .cd-timeline-img i{ width: 50px; height: 50px; line-height: 50px; } .cssanimations .tl-sm .cd-timeline-img.bounce-in { visibility: visible; -webkit-animation: cd-bounce-1 0.6s; -moz-animation: cd-bounce-1 0.6s; animation: cd-bounce-1 0.6s; } } @media only screen and (min-width: 768px) { .tl-xs .cd-timeline-img { width: 60px; height: 60px; left: 50%; margin-left: -30px; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .tl-xs .cd-timeline-img i{ width: 50px; height: 50px; line-height: 50px; } .cssanimations .tl-xs .cd-timeline-img.bounce-in { visibility: visible; -webkit-animation: cd-bounce-1 0.6s; -moz-animation: cd-bounce-1 0.6s; animation: cd-bounce-1 0.6s; } } @-webkit-keyframes cd-bounce-1 { 0% { opacity: 0; -webkit-transform: scale(0.5); } 60% { opacity: 1; -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes cd-bounce-1 { 0% { opacity: 0; -moz-transform: scale(0.5); } 60% { opacity: 1; -moz-transform: scale(1.2); } 100% { -moz-transform: scale(1); } } @keyframes cd-bounce-1 { 0% { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } 60% { opacity: 1; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .cd-timeline-content { position: relative; margin-left: 60px; } .cd-timeline-content:not(.panel) { box-shadow: 0 3px 0 #d7e4ed; border-radius: 0.25em; background: white; padding: 1em; } .cd-timeline-content:after { content: ""; display: table; clear: both; } .cd-timeline-content h2 { color: #303e49; } .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { display: inline-block; } .cd-timeline-content p { margin: 1em 0; line-height: 1.6; } .cd-timeline-content .cd-read-more { float: right; padding: .8em 1em; background: #acb7c0; color: white; border-radius: 0.25em; } .no-touch .cd-timeline-content .cd-read-more:hover { background-color: #bac4cb; } .cd-timeline-content .cd-date { float: left; padding: .8em 0; opacity: .7; font-size:0.85em; } .cd-timeline-content::before { content: ''; position: absolute; top: 16px; right: 100%; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid white; } .cd-timeline-content.panel::before{ border:transparent; } @media only screen and (min-width: 993px) { .tl-md .cd-timeline-content, .tl-none .cd-timeline-content { padding: 1.6em; width: 45%; } .tl-md .cd-timeline-content::before, .tl-none .cd-timeline-content::before { top: 24px; left: 100%; border-color: transparent; border-left-color: white; } .tl-md .cd-timeline-content.panel::before, .tl-none .cd-timeline-content.panel::before{ border-left:transparent; } .tl-md .cd-timeline-content .cd-read-more, .tl-none .cd-timeline-content .cd-read-more { float: left; } .tl-md .cd-timeline-content .cd-date, .tl-none .cd-timeline-content .cd-date { position: absolute; width: 100%; left: 122%; top: 6px; font-size: 1em; } .tl-md .cd-timeline-block:nth-child(even) .cd-timeline-content, .tl-none .cd-timeline-block:nth-child(even) .cd-timeline-content { float: right; } .tl-md .cd-timeline-block:nth-child(even) .cd-timeline-content::before, .tl-none .cd-timeline-block:nth-child(even) .cd-timeline-content::before { top: 24px; left: auto; right: 100%; border-color: transparent; border-right-color: white; } .tl-md .cd-timeline-content.panel::before, .tl-none .cd-timeline-content.panel::before{ border-right:transparent; } .tl-md .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more, .tl-none .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more { float: right; } .tl-md .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date, .tl-none .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { left: auto; right: 122%; text-align: right; } .cssanimations .tl-md .cd-timeline-content.bounce-in, .cssanimations .tl-none .cd-timeline-content.bounce-in { visibility: visible; -webkit-animation: cd-bounce-2 0.6s; -moz-animation: cd-bounce-2 0.6s; animation: cd-bounce-2 0.6s; } } @media only screen and (min-width: 769px) { .tl-sm .cd-timeline-content, .tl-none .cd-timeline-content { padding: 1.6em; width: 45%; } .tl-sm .cd-timeline-content::before, .tl-none .cd-timeline-content::before { top: 24px; left: 100%; border-color: transparent; border-left-color: white; } .tl-sm .cd-timeline-content.panel::before, .tl-none .cd-timeline-content.panel::before{ border-left:transparent; } .tl-sm .cd-timeline-content .cd-read-more, .tl-none .cd-timeline-content .cd-read-more { float: left; } .tl-sm .cd-timeline-content .cd-date, .tl-none .cd-timeline-content .cd-date { position: absolute; width: 100%; left: 122%; top: 6px; font-size: 1em; } .tl-sm .cd-timeline-block:nth-child(even) .cd-timeline-content, .tl-none .cd-timeline-block:nth-child(even) .cd-timeline-content { float: right; } .tl-sm .cd-timeline-block:nth-child(even) .cd-timeline-content::before, .tl-none .cd-timeline-block:nth-child(even) .cd-timeline-content::before { top: 24px; left: auto; right: 100%; border-color: transparent; border-right-color: white; } .tl-sm .cd-timeline-content.panel::before, .tl-none .cd-timeline-content.panel::before{ border-right:transparent; } .tl-sm .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more, .tl-none .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more { float: right; } .tl-sm .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date, .tl-none .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { left: auto; right: 122%; text-align: right; } .cssanimations .tl-sm .cd-timeline-content.bounce-in, .cssanimations .tl-none .cd-timeline-content.bounce-in { visibility: visible; -webkit-animation: cd-bounce-2 0.6s; -moz-animation: cd-bounce-2 0.6s; animation: cd-bounce-2 0.6s; } } @media only screen and (min-width: 768px) { .tl-xs .cd-timeline-content { margin-left: 0; padding: 1.6em; width: 45%; } .tl-xs .cd-timeline-content::before { top: 24px; left: 100%; border-color: transparent; border-left-color: white; } .tl-xs .cd-timeline-content.panel::before{ border-left:transparent; } .tl-xs .cd-timeline-content .cd-read-more { float: left; } .tl-xs .cd-timeline-content .cd-date { position: absolute; width: 100%; left: 122%; top: 6px; font-size: 1em; } .tl-xs .cd-timeline-block:nth-child(even) .cd-timeline-content { float: right; } .tl-xs .cd-timeline-block:nth-child(even) .cd-timeline-content::before { top: 24px; left: auto; right: 100%; border-color: transparent; border-right-color: white; } .tl-xs .cd-timeline-content.panel::before{ border-right:transparent; } .tl-xs .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more { float: right; } .tl-xs .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { left: auto; right: 122%; text-align: right; } .cssanimations .tl-xs .cd-timeline-content.bounce-in { visibility: visible; -webkit-animation: cd-bounce-2 0.6s; -moz-animation: cd-bounce-2 0.6s; animation: cd-bounce-2 0.6s; } } @media only screen and (min-width: 993px) { /* inverse bounce effect on even content blocks */ .cssanimations .tl-md .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in { -webkit-animation: cd-bounce-2-inverse 0.6s; -moz-animation: cd-bounce-2-inverse 0.6s; animation: cd-bounce-2-inverse 0.6s; } } @media only screen and (min-width: 769px) { /* inverse bounce effect on even content blocks */ .cssanimations .tl-sm .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in { -webkit-animation: cd-bounce-2-inverse 0.6s; -moz-animation: cd-bounce-2-inverse 0.6s; animation: cd-bounce-2-inverse 0.6s; } } @media only screen and (min-width: 768px) { /* inverse bounce effect on even content blocks */ .cssanimations .tl-xs .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in { -webkit-animation: cd-bounce-2-inverse 0.6s; -moz-animation: cd-bounce-2-inverse 0.6s; animation: cd-bounce-2-inverse 0.6s; } } @-webkit-keyframes cd-bounce-2 { 0% { opacity: 0; -webkit-transform: translateX(-100px); } 60% { opacity: 1; -webkit-transform: translateX(20px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes cd-bounce-2 { 0% { opacity: 0; -moz-transform: translateX(-100px); } 60% { opacity: 1; -moz-transform: translateX(20px); } 100% { -moz-transform: translateX(0); } } @keyframes cd-bounce-2 { 0% { opacity: 0; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); transform: translateX(-100px); } 60% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes cd-bounce-2-inverse { 0% { opacity: 0; -webkit-transform: translateX(100px); } 60% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes cd-bounce-2-inverse { 0% { opacity: 0; -moz-transform: translateX(100px); } 60% { opacity: 1; -moz-transform: translateX(-20px); } 100% { -moz-transform: translateX(0); } } @keyframes cd-bounce-2-inverse { 0% { opacity: 0; -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); } 60% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } /* Get the bourbon mixin from http://bourbon.io */ /* Reset */ .flip-clock-wrapper * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .flip-clock-wrapper a { cursor: pointer; text-decoration: none; color: #ccc; } .flip-clock-wrapper a:hover { color: #fff; } .flip-clock-wrapper ul { list-style: none; } .flip-clock-wrapper.clearfix:before, .flip-clock-wrapper.clearfix:after { content: " "; display: table; } .flip-clock-wrapper.clearfix:after { clear: both; } .flip-clock-wrapper.clearfix { *zoom: 1; } /* Main */ .flip-clock-wrapper { font: normal 11px "Helvetica Neue", Helvetica, sans-serif; -webkit-user-select: none; } .flip-clock-meridium { background: none !important; box-shadow: 0 0 0 !important; font-size: 36px !important; } .flip-clock-meridium a { color: #313333; } .flip-clock-wrapper { text-align: center; position: relative; width: 100%; margin: 1em; } .flip-clock-wrapper:before, .flip-clock-wrapper:after { content: " "; /* 1 */ display: table; /* 2 */ } .flip-clock-wrapper:after { clear: both; } /* Skeleton */ .flip-clock-wrapper ul { position: relative; float: left; margin: 5px; width: 60px; height: 90px; font-size: 80px; font-weight: bold; line-height: 87px; border-radius: 6px; background: #000; } .flip-clock-wrapper ul li { z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 87px; text-decoration: none !important; } .flip-clock-wrapper ul li:first-child { z-index: 2; } .flip-clock-wrapper ul li a { display: block; height: 100%; -webkit-perspective: 200px; -moz-perspective: 200px; perspective: 200px; margin: 0 !important; overflow: visible !important; cursor: default !important; } .flip-clock-wrapper ul li a div { z-index: 1; position: absolute; left: 0; width: 100%; height: 50%; font-size: 80px; overflow: hidden; outline: 1px solid transparent; } .flip-clock-wrapper ul li a div .shadow { position: absolute; width: 100%; height: 100%; z-index: 2; } .flip-clock-wrapper ul li a div.up { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; top: 0; } .flip-clock-wrapper ul li a div.up:after { content: ""; position: absolute; top: 44px; left: 0; z-index: 5; width: 100%; height: 3px; background-color: #000; background-color: rgba(0, 0, 0, 0.4); } .flip-clock-wrapper ul li a div.down { -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; bottom: 0; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .flip-clock-wrapper ul li a div div.inn { position: absolute; left: 0; z-index: 1; width: 100%; height: 200%; color: #ccc; text-shadow: 0 1px 2px #000; text-align: center; background-color: #333; border-radius: 6px; font-size: 70px; } .flip-clock-wrapper ul li a div.up div.inn { top: 0; } .flip-clock-wrapper ul li a div.down div.inn { bottom: 0; } /* PLAY */ .flip-clock-wrapper ul.play li.flip-clock-before { z-index: 3; } .flip-clock-wrapper .flip { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); } .flip-clock-wrapper ul.play li.flip-clock-active { -webkit-animation: asd 0.01s 0.49s linear both; -moz-animation: asd 0.01s 0.49s linear both; animation: asd 0.01s 0.49s linear both; z-index: 5; } .flip-clock-divider { float: left; display: inline-block; position: relative; width: 20px; height: 100px; } .flip-clock-divider:first-child { width: 0; } .flip-clock-dot { display: block; background: #323434; width: 10px; height: 10px; position: absolute; border-radius: 50%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); left: 5px; } .flip-clock-divider .flip-clock-label { position: absolute; top: -1.5em; right: -86px; color: black; text-shadow: none; } .flip-clock-divider.minutes .flip-clock-label { right: -88px; } .flip-clock-divider.seconds .flip-clock-label { right: -91px; } .flip-clock-dot.top { top: 30px; } .flip-clock-dot.bottom { bottom: 30px; } @-webkit-keyframes asd { 0% { z-index: 2; } 100% { z-index: 4; } } @-moz-keyframes asd { 0% { z-index: 2; } 100% { z-index: 4; } } @-o-keyframes asd { 0% { z-index: 2; } 100% { z-index: 4; } } @keyframes asd { 0% { z-index: 2; } 100% { z-index: 4; } } .flip-clock-wrapper ul.play li.flip-clock-active .down { z-index: 2; -webkit-animation: turn 0.5s 0.5s linear both; -moz-animation: turn 0.5s 0.5s linear both; animation: turn 0.5s 0.5s linear both; } @-webkit-keyframes turn { 0% { -webkit-transform: rotateX(90deg); } 100% { -webkit-transform: rotateX(0deg); } } @-moz-keyframes turn { 0% { -moz-transform: rotateX(90deg); } 100% { -moz-transform: rotateX(0deg); } } @-o-keyframes turn { 0% { -o-transform: rotateX(90deg); } 100% { -o-transform: rotateX(0deg); } } @keyframes turn { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0deg); } } .flip-clock-wrapper ul.play li.flip-clock-before .up { z-index: 2; -webkit-animation: turn2 0.5s linear both; -moz-animation: turn2 0.5s linear both; animation: turn2 0.5s linear both; } @-webkit-keyframes turn2 { 0% { -webkit-transform: rotateX(0deg); } 100% { -webkit-transform: rotateX(-90deg); } } @-moz-keyframes turn2 { 0% { -moz-transform: rotateX(0deg); } 100% { -moz-transform: rotateX(-90deg); } } @-o-keyframes turn2 { 0% { -o-transform: rotateX(0deg); } 100% { -o-transform: rotateX(-90deg); } } @keyframes turn2 { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(-90deg); } } .flip-clock-wrapper ul li.flip-clock-active { z-index: 3; } /* SHADOW */ .flip-clock-wrapper ul.play li.flip-clock-before .up .shadow { background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black)); background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%; background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%; -webkit-animation: show 0.5s linear both; -moz-animation: show 0.5s linear both; animation: show 0.5s linear both; } .flip-clock-wrapper ul.play li.flip-clock-active .up .shadow { background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black)); background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%; background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%); background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%; -webkit-animation: hide 0.5s 0.3s linear both; -moz-animation: hide 0.5s 0.3s linear both; animation: hide 0.5s 0.3s linear both; } /*DOWN*/ .flip-clock-wrapper ul.play li.flip-clock-before .down .shadow { background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1))); background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%; background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%; -webkit-animation: show 0.5s linear both; -moz-animation: show 0.5s linear both; animation: show 0.5s linear both; } .flip-clock-wrapper ul.play li.flip-clock-active .down .shadow { background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1))); background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%; background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%); background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%; -webkit-animation: hide 0.5s 0.3s linear both; -moz-animation: hide 0.5s 0.3s linear both; animation: hide 0.5s 0.2s linear both; } @-webkit-keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } } #browserWarning_disabler { position:absolute; height:100%; width:100%; z-index:100000; background-color:#000000; -moz-opacity: 0.5; opacity: 0.5; filter:alpha(opacity=50); } #browserWarning_notice { background: transparent; width: 100%; max-width:720px; position:absolute; z-index:100001; color: #000; } #browserWarning_content { font-size:18px; background-color: #FFFFFF; width: 96%; margin-left: 2%; margin-right: 2%; max-width:700px; text-align:center; } #browserWarning_content h2 { font-size:40px; } #browserWarning_close { display:block; height:25px; width: 25px; background-image: url(../images/panel_closeButton.png); background-repeat:no-repeat; position:absolute; top:0px; right:0px; } #browserWarning_close span, #browserWarning_downloads a span { visibility:hidden; } #browserWarning_downloads { margin:10px auto; padding-top:20px; } #browserWarning_chromeDownload { background-position:0px 0px; } #browserWarning_firefoxDownload { background-position:-141px 0px; } #browserWarning_safariDownload { background-position:-423px 0px; } #browserWarning_ieDownload { display: none; /* no love for IE */ background-position:-564px 0px; } #browserWarning_downloads a { height:132px; width:141px; display:none; background-image: url(../images/browser_logos-128.png); background-repeat: no-repeat; vertical-align:bottom; } #browserWarning_downloads #browserWarning_ieDownload { display:none; } .android a#browserWarning_chromeDownload, .ios a#browserWarning_safariDownload, .mac a#browserWarning_chromeDownload, .mac a#browserWarning_firefoxDownload, .mac a#browserWarning_safariDownload, .windows a#browserWarning_chromeDownload, .windows a#browserWarning_firefoxDownload { display: inline-block; }@charset "UTF-8"; /* * CSS TOGGLE SWITCH * * Ionuț Colceriu - ghinda.net * https://github.com/ghinda/css-toggle-switch * */ /* supported values are px, rem-calc, em-calc */ /* imports */ /* Functions */ /* Shared */ /* Hide by default */ .switch-toggle a, .switch-light span span { display: none; } /* We can't test for a specific feature, * so we only target browsers with support for media queries. */ @media only screen { /* Checkbox */ .switch-light { position: relative; display: block; /* simulate default browser focus outlines on the switch, * when the inputs are focused. */ } .switch-light::after { clear: both; content: ""; display: table; } .switch-light *, .switch-light *:before, .switch-light *:after { box-sizing: border-box; } .switch-light a { display: block; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .switch-light label, .switch-light > span { /* breathing room for bootstrap/foundation classes. */ line-height: 2em; vertical-align: middle; } .switch-light input:focus ~ span a, .switch-light input:focus + label { outline-width: 2px; outline-style: solid; outline-color: Highlight; /* Chrome/Opera gets its native focus styles. */ } } @media only screen and (-webkit-min-device-pixel-ratio: 0) { .switch-light input:focus ~ span a, .switch-light input:focus + label { outline-color: -webkit-focus-ring-color; outline-style: auto; } } @media only screen { /* don't hide the input from screen-readers and keyboard access */ .switch-light input { position: absolute; opacity: 0; z-index: 3; } .switch-light input:checked ~ span a { right: 0%; } /* inherit from label */ .switch-light strong { font-weight: inherit; } .switch-light > span { position: relative; overflow: hidden; display: block; min-height: 2em; /* overwrite 3rd party classes padding * eg. bootstrap .well */ padding: 0; text-align: left; } .switch-light span span { position: relative; z-index: 2; display: block; float: left; width: 50%; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .switch-light a { position: absolute; right: 50%; top: 0; z-index: 1; display: block; width: 50%; height: 100%; padding: 0; } /* Radio Switch */ .switch-toggle { position: relative; display: block; /* simulate default browser focus outlines on the switch, * when the inputs are focused. */ /* For callout panels in foundation */ padding: 0 !important; /* 2 items */ /* 3 items */ /* 4 items */ /* 5 items */ /* 6 items */ } .switch-toggle::after { clear: both; content: ""; display: table; } .switch-toggle *, .switch-toggle *:before, .switch-toggle *:after { box-sizing: border-box; } .switch-toggle a { display: block; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .switch-toggle label, .switch-toggle > span { /* breathing room for bootstrap/foundation classes. */ line-height: 2em; vertical-align: middle; } .switch-toggle input:focus ~ span a, .switch-toggle input:focus + label { outline-width: 2px; outline-style: solid; outline-color: Highlight; /* Chrome/Opera gets its native focus styles. */ } } @media only screen and (-webkit-min-device-pixel-ratio: 0) { .switch-toggle input:focus ~ span a, .switch-toggle input:focus + label { outline-color: -webkit-focus-ring-color; outline-style: auto; } } @media only screen { .switch-toggle input { position: absolute; left: 0; opacity: 0; } .switch-toggle input + label { position: relative; z-index: 2; display: block; float: left; padding: 0 8px; margin: 0; text-align: center; } .switch-toggle label > a { position: absolute; top: 0; left: 0; padding: 0; z-index: 1; width: 10px; height: 100%; display:none; } .switch-toggle label.active > a { display:block; } .switch-toggle.justified:not(.vertical) label:nth-child(2):nth-last-child(3), .switch-toggle.justified:not(.vertical) label:nth-child(2):nth-last-child(3) ~ label { width: 50%; } .switch-toggle.justified:not(.vertical) label:nth-child(2):nth-last-child(5), .switch-toggle.justified:not(.vertical) label:nth-child(2):nth-last-child(5) ~ label { width: 33.33%; } .switch-toggle.justified:not(.vertical) label:nth-child(2):nth-last-child(7), .switch-toggle.justified:not(.vertical) label:nth-child(2):nth-last-child(7) ~ label { width: 25%; } .switch-toggle.justified:not(.vertical) label:nth-child(2):nth-last-child(9), .switch-toggle.justified:not(.vertical) label:nth-child(2):nth-last-child(9) ~ label { width: 20%; } .switch-toggle.justified:not(.vertical) label:nth-child(2):nth-last-child(11), .switch-toggle.justified:not(.vertical) label:nth-child(2):nth-last-child(11) ~ label { width: 16.6%; } /* Candy Theme * Based on the "Sort Switches / Toggles (PSD)" by Ormal Clarck * http://www.premiumpixels.com/freebies/sort-switches-toggles-psd/ */ .switch-toggle.switch-candy, .switch-light.switch-candy > span { background-color: #2d3035; border-radius: 3px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.2); } .switch-light.switch-candy span span, .switch-light.switch-candy input:checked ~ span span:first-child, .switch-toggle.switch-candy label { color: #fff; font-weight: bold; text-align: center; text-shadow: 1px 1px 1px #191b1e; } .switch-light.switch-candy input ~ span span:first-child, .switch-light.switch-candy input:checked ~ span span:nth-child(2), .switch-candy input:checked + label { color: #333; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .switch-candy a { border: 1px solid #333; border-radius: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.45); background-color: #70c66b; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), transparent); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent); } .switch-candy-blue a { background-color: #38a3d4; } .switch-candy-yellow a { background-color: #f5e560; } /* iOS Theme */ .switch-ios.switch-light span span { color: #888b92; } .switch-ios.switch-light a { left: 0; top: 0; width: 32px; height: 32px; background-color: #fff; border-radius: 100%; border: 4px solid #D8D9DB; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .switch-ios.switch-light > span { display: block; width: 100%; height: 32px; background-color: #D8D9DB; border-radius: 28px; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .switch-ios.switch-light > span span { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; line-height: 30px; vertical-align: middle; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .switch-ios.switch-light > span span:first-of-type { opacity: 1; padding-left: 30px; } .switch-ios.switch-light > span span:last-of-type { padding-right: 30px; } .switch-ios.switch-light input:checked ~ span a { left: 100%; border-color: #4BD865; margin-left: -32px; } .switch-ios.switch-light input:checked ~ span { border-color: #4BD865; box-shadow: inset 0 0 0 30px #4BD865; } .switch-ios.switch-light input:checked ~ span span:first-of-type { opacity: 0; } .switch-ios.switch-light input:checked ~ span span:last-of-type { opacity: 1; color: #fff; } .switch-ios.switch-toggle { background-color: #D8D9DB; border-radius: 30px; box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0; } .switch-ios.switch-toggle a { background-color: #4BD865; border: 2px solid #D8D9DB; border-radius: 28px; -webkit-transition: all 0.12s ease-out; -moz-transition: all 0.12s ease-out; transition: all 0.12s ease-out; } .switch-ios.switch-toggle label { height: 2.4em; color: #888b92; line-height: 2.4em; vertical-align: middle; } .switch-ios input:checked + label { color: #3e4043; } /* Holo Theme */ .switch-toggle.switch-holo, .switch-light.switch-holo > span { background-color: #464747; border-radius: 1px; box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0; color: #fff; text-transform: uppercase; } .switch-holo label { color: #fff; } .switch-holo > span span { opacity: 0; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; transition: all 0.1s; } .switch-holo > span span:first-of-type { opacity: 1; } .switch-holo > span span, .switch-holo label { font-size: 85%; line-height: 34.5px; } .switch-holo a { background-color: #666; border-radius: 1px; box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0, inset rgba(0, 0, 0, 0.3) 0 -1px 0; } /* Selected ON switch-light */ .switch-holo.switch-light input:checked ~ span a { background-color: #0E88B1; } .switch-holo.switch-light input:checked ~ span span:first-of-type { opacity: 0; } .switch-holo.switch-light input:checked ~ span span:last-of-type { opacity: 1; } /* Material Theme */ /* switch-light */ .switch-light.switch-material a { top: -3px; width: 28px; height: 28px; border-radius: 50%; background: #fafafa; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 2px -2px rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.12); -webkit-transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .switch-material.switch-light { overflow: visible; } .switch-material.switch-light::after { clear: both; content: ""; display: table; } .switch-material.switch-light > span { overflow: visible; position: relative; top: 3px; width: 52px; height: 24px; min-height: auto; border-radius: 16px; background: rgba(0, 0, 0, 0.26); } .switch-material.switch-light span span { position: absolute; clip: rect(0 0 0 0); } .switch-material.switch-light input:checked ~ span a { right: 0; background: #3f51b5; box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 6px 0 rgba(0, 0, 0, 0.12); } .switch-material.switch-light input:checked ~ span { background: rgba(63, 81, 181, 0.5); } /* switch-toggle */ .switch-toggle.switch-material { overflow: visible; } .switch-toggle.switch-material::after { clear: both; content: ""; display: table; } .switch-toggle.switch-material a { top: 48%; width: 6px !important; height: 6px; margin-left: 4px; background: #3f51b5; border-radius: 100%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform; -moz-transition: -moz-transform; transition: transform; } .switch-toggle.switch-material label { color: rgba(0, 0, 0, 0.54); font-size: 1em; } .switch-toggle.switch-material label:before { content: ''; position: absolute; top: 48%; left: 0; display: block; width: 14px; height: 14px; border-radius: 100%; border: 2px solid rgba(0, 0, 0, 0.54); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .switch-toggle.switch-material input:checked + label:before { border-color: #3f51b5; } /* ripple */ .switch-light.switch-material > span:before, .switch-light.switch-material > span:after, .switch-toggle.switch-material label:after { content: ''; position: absolute; top: 0; left: 0; z-index: 3; display: block; width: 64px; height: 64px; border-radius: 100%; background: #3f51b5; opacity: .4; margin-left: -20px; margin-top: -20px; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: opacity 0.4s ease-in; -moz-transition: opacity 0.4s ease-in; transition: opacity 0.4s ease-in; } .switch-light.switch-material > span:after { left: auto; right: 0; margin-left: 0; margin-right: -20px; } .switch-toggle.switch-material label:after { width: 52px; height: 52px; margin-top: -12px; } @-webkit-keyframes materialRipple { 0% { -webkit-transform: scale(0); } 20% { -webkit-transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1); } } @-moz-keyframes materialRipple { 0% { -moz-transform: scale(0); } 20% { -moz-transform: scale(1); } 100% { opacity: 0; -moz-transform: scale(1); } } @keyframes materialRipple { 0% { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } 20% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .switch-material.switch-light input:not(:checked) ~ span:after, .switch-material.switch-light input:checked ~ span:before, .switch-toggle.switch-material input:checked + label:after { -webkit-animation: materialRipple 0.4s ease-in; -moz-animation: materialRipple 0.4s ease-in; animation: materialRipple 0.4s ease-in; } /* trick to prevent the default checked ripple animation from showing * when the page loads. * the ripples are hidden by default, and shown only when the input is focused. */ .switch-light.switch-material.switch-light input ~ span:before, .switch-light.switch-material.switch-light input ~ span:after, .switch-material.switch-toggle input + label:after { visibility: hidden; } .switch-light.switch-material.switch-light input:focus:checked ~ span:before, .switch-light.switch-material.switch-light input:focus:not(:checked) ~ span:after, .switch-material.switch-toggle input:focus:checked + label:after { visibility: visible; } } /* Bugfix for older Webkit, including mobile Webkit. Adapted from * http://css-tricks.com/webkit-sibling-bug/ */ @media only screen and (-webkit-max-device-pixel-ratio: 2) and (max-device-width: 1280px) { .switch-light, .switch-toggle { -webkit-animation: webkitSiblingBugfix infinite 1s; } } @-webkit-keyframes webkitSiblingBugfix { from { -webkit-transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); } } .dki-image-element.dki-authoring-element-element.cssFX{ height: 100%; width: 100%; } /* * Claro.ui.cssFx.styles.THIN() */ .cssFX-Thin>.dki-authoring-content-wrapper>div.cssFX-level1{ border : 1px solid #a9a9a9 !important; border-top : 1px solid #f5f5f5 !important; box-shadow : 0px 4px 4px -1px #acacac; background-color: #ffffff; position : absolute; top : 0px; left : 0px; right : 0px; bottom : 0px; } .cssFX-Thin>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2{ border : none; position : absolute; left : 8px; bottom : 8px; right : 8px; top : 8px; } .cssFX-Thin>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3{ position : absolute; height:100%; width:100%; } /* * Claro.ui.cssFx.styles.THICK() */ .cssFX-Thick>.dki-authoring-content-wrapper>div.cssFX-level1{ border : 1px solid #a9a9a9 !important; border-top : 1px solid #f5f5f5 !important; box-shadow : 0px 4px 4px -1px #acacac; background-color: #ffffff; position : absolute; top : 0px; left : 0px; right : 0px; bottom : 0px } .cssFX-Thick>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2{ border :none; position : absolute; left : 15px; bottom : 15px; right : 15px; top : 15px; } .cssFX-Thick>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3{ position : absolute; height:100%; width:100%; } /* * Claro.ui.cssFx.style.POLAROID() */ .cssFX-Polaroid>.dki-authoring-content-wrapper>div.cssFX-level1{ border-top : 1px solid #D1CEC7 !important; border-right : 1px solid #5B5C56 !important; border-bottom : 1px solid #87847F !important; border-left : 1px solid #A2A39B !important; box-shadow : 0px 0px 16px 3px #87847F; position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; display: inline-block; } .cssFX-Polaroid>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2{ border-style : solid; border-color : #f1f1f1; border-width : 10px; border-bottom-width: 50px; position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; display: inline-block; } .cssFX-Polaroid>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3{ position : absolute; height:100%; width:100%; display: inline-block; } /* * Claro.ui.cssFx.style.BEVEL() */ .cssFX-Bevel>.dki-authoring-content-wrapper>div.cssFX-level1{ border-top : 4px solid #D1CEC7 !important; border-right : 4px solid #5B5C56 !important; border-bottom : 4px solid #87847F !important; border-left : 4px solid #A2A39B !important; box-shadow : 0px 0px 16px 3px #87847F; position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; display: inline-block; } .cssFX-Bevel>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2{ background-color: #dbd9cd; border : 2px solid #dbd9cd; border-top-color: #fcf9f2; position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; display: inline-block; } .cssFX-Bevel>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3{ border : none; position : absolute; left : 14px; bottom : 14px; right : 14px; top : 14px; display: inline-block; } /* * Claro.ui.cssFx.style.SHADOW() */ .cssFX-Shadow>.dki-authoring-content-wrapper>div.cssFX-level1{ border : none; box-shadow : 10px 10px 20px 0px #333; -webkit-box-shadow : 10px 10px 20px 0px #333; position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; behavior : url(../css/PIE.htc); display: inline-block; } .cssFX-Shadow>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2{ position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; behavior : url(../css/PIE.htc); display: inline-block; } .cssFX-Shadow>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3{ position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; behavior : url(../css/PIE.htc); display: inline-block; } .cssFX-Shadow>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3>img{ } /* * Claro.ui.cssFx.style.ROUNDED() */ .cssFX-Rounded>.dki-authoring-content-wrapper>div.cssFX-level1{ -moz-border-radius : 12px; -webkit-border-radius : 12px; border-radius : 12px; overflow : hidden; position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; behavior : url(../css/PIE.htc) } .cssFX-Rounded>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2{ -moz-border-radius : 12px; -webkit-border-radius : 12px; border-radius : 12px; overflow : hidden; position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; behavior : url(../css/PIE.htc) } .cssFX-Rounded>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3{ -moz-border-radius : 12px; -webkit-border-radius : 12px; border-radius : 12px; overflow : hidden; position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; behavior : url(../css/PIE.htc); display: inline-block; } .cssFX-Rounded>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3>img{ -moz-border-radius : 12px; -webkit-border-radius : 12px; border-radius : 12px; overflow : hidden; behavior : url(../css/PIE.htc) } .cssFX-Circle>.dki-authoring-content-wrapper>div.cssFX-level1{ -moz-border-radius : 50%; -webkit-border-radius : 50%; border-radius : 50%; overflow : hidden; position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; behavior : url(../css/PIE.htc) } .cssFX-Circle>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2{ -moz-border-radius : 50%; -webkit-border-radius : 50%; border-radius : 50%; overflow : hidden; position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; behavior : url(../css/PIE.htc) } .cssFX-Circle>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3{ -moz-border-radius : 50%; -webkit-border-radius : 50%; border-radius : 50%; overflow : hidden; position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; behavior : url(../css/PIE.htc); display: inline-block; } .cssFX-Circle>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3>img{ -moz-border-radius : 50%; -webkit-border-radius : 50%; border-radius : 50%; overflow : hidden; behavior : url(../css/PIE.htc) } /* * Claro.ui.cssFx.style.Reflect() */ .cssFX-Reflect>.dki-authoring-content-wrapper>div.cssFX-level1{ position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; } html.flow-authoring .cssFX-Reflect>.dki-authoring-content-wrapper>div.cssFX-level1{ display: inline-block; left: auto; right: auto; top: auto; bottom: auto; } .cssFX-Reflect>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2{ position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; } .cssFX-Reflect>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3{ position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; } /* .cssFX-Reflect>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3 div.dki-authoring-content-wrapper img.reflected{ position : absolute; left : 0px; top : 0px; right : 0px; height : 70% !important; filter : inherit; } .cssFX-Reflect>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3 div.dki-authoring-content-wrapper canvas, .cssFX-Reflect>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3 div.dki-authoring-content-wrapper img{ position : absolute; bottom : 0px; margin : 0px !important; height : 30% !important; width : 100% !important; filter : inherit; } */ /* * Claro.ui.cssFx.style.ROUNDEDSHADOW() */ .cssFX-RoundedShadow>.dki-authoring-content-wrapper>div.cssFX-level1{ -moz-border-radius : 12px; -webkit-border-radius : 12px; border-radius : 12px; box-shadow : 14px 14px 20px 0px #acacac; -webkit-box-shadow : 14px 14px 20px 0px #acacac; overflow : hidden; position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; behavior : url(../css/PIE.htc); display: inline-block; } .cssFX-RoundedShadow>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2{ -moz-border-radius : 12px; -webkit-border-radius : 12px; border-radius : 12px; overflow : hidden; position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; behavior : url(../css/PIE.htc); display: inline-block; } .cssFX-RoundedShadow>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3{ -moz-border-radius : 12px; -webkit-border-radius : 12px; border-radius : 12px; overflow : hidden; position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; behavior : url(../css/PIE.htc); display: inline-block; } .cssFX-RoundedShadow>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3>img{ -moz-border-radius : 12px; -webkit-border-radius : 12px; border-radius : 12px; overflow : hidden; behavior : url(../css/PIE.htc) } /* * Claro.ui.cssFx.style.RoundedMirror() */ .cssFX-MirrorRounded>.dki-authoring-content-wrapper>div.cssFX-level1{ position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; } html.flow-authoring .cssFX-MirrorRounded>.dki-authoring-content-wrapper>div.cssFX-level1{ display: inline-block; left: auto; right: auto; top: auto; bottom: auto; } .cssFX-MirrorRounded>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2{ position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; } .cssFX-MirrorRounded>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3{ position : absolute; left : 0px; bottom : 0px; right : 0px; top : 0px; display: inline-block; } .cssFX-MirrorRounded div.dki-authoring-content-wrapper>.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3 img.reflected{ -moz-border-radius : 12px; -webkit-border-radius : 12px; border-radius : 12px; filter : inherit; opacity:inherit } .cssFX-MirrorRounded div.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3>div.dki-image-root-reflected>canvas, .cssFX-MirrorRounded div.dki-authoring-content-wrapper>div.cssFX-level1>div.cssFX-level2>div.cssFX-level3>div.dki-image-root-reflected>img{ -moz-border-radius : 12px; -webkit-border-radius : 12px; border-radius : 12px; filter : inherit; opacity:inherit } /*letterFX*/ .letterfx{display:inline-block;margin:0;padding:0;transition:all 1s;-ms-transition:all 1s;-webkit-transition:all 1s}.letterfx-spin-before{transform:rotate(3600deg);-ms-transform:rotate(3600deg);-webkit-transform:rotate(3600deg)}.letterfx-spin-after{transform:none}.letterfx-fade-before{opacity:0}.letterfx-grow-before{transform:scale(0,0);-ms-transform:scale(0,0);-webkit-transform:scale(0,0)}.letterfx-grow-after{transform:none}.letterfx-smear-before{color:transparent;text-shadow:-1px -1px 25px transparent}.letterfx-smear-after{color:inherit;text-shadow:0 0 #333}.letterfx-fall-before{visibility:hidden;transform:scale(3,3);-ms-transform:scale(3,3);-webkit-transform:scale(3,3)}.letterfx-fall-after{transform:scale(1,1);-ms-transform:scale(1,1);-webkit-transform:scale(1,1);text-shadow:0}.letterfx-swirl-before{visibility:hidden;transform:scale(3,3) rotate(3600deg);-ms-transform:scale(3,3) rotate(3600deg);-webkit-transform:scale(3,3) rotate(3600deg)}.letterfx-swirl-after{transform:none text-shadow:0}.letterfx-wave-container .letterfx{position:relative}.letterfx-wave-before{bottom:0}.letterfx-wave-after{bottom:15px}.letterfx-fly-left-container .letterfx,.letterfx-fly-right-container .letterfx,.letterfx-fly-top-container .letterfx,.letterfx-fly-bottom-container .letterfx{position:relative}.letterfx-fly-left-before{left:-50em}.letterfx-fly-left-after{left:0}.letterfx-fly-right-before{right:-50em}.letterfx-fly-right-after{right:0}.letterfx-fly-top-before{top:-20em}.letterfx-fly-top-after{top:0}.letterfx-fly-bottom-before{bottom:-20em}.letterfx-fly-bottom-after{bottom:0}#contentFrame { } @-webkit-keyframes markerPulse { 0% { -webkit-transform: scale(1); transform: scale(1); -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, .8); box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, .8); } 70% { -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 1); box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 1); } to { -webkit-transform: scale(1.6); transform: scale(1.6); -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0); box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0); } } @keyframes markerPulse { 0% { -webkit-transform: scale(1); transform: scale(1); -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, .8); box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, .8); } 70% { -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 1); box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 1); } to { -webkit-transform: scale(1.6); transform: scale(1.6); -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0); box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0); } } html.csstransitions .dkiContentFrame { -moz-opacity:1.0; opacity:1.0; filter:alpha(opacity=100); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; -ms-transition-duration: 0.5s; transtion-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -ms-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } html.csstransitions .dkiContentFrame.none{ -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -o-transition-duration: 0s; -ms-transition-duration: 0s; transtion-duration: 0s; } .dkiContentFrame.current{ z-index:0; visibility: visible; } .dkiContentFrame.previous.dk-hidden, .dkiContentFrame.next.dk-hidden { z-index:-1; } .dkiContentFrame.previous.fade, .dkiContentFrame.next.fade { -moz-opacity:0.0; opacity:0.0; filter:alpha(opacity=0); } .dkiContentFrame.previous.fade, .dkiContentFrame.next.fade, .dkiContentFrame.previous.slide, .dkiContentFrame.next.slide, .dkiContentFrame.previous.flip, .dkiContentFrame.next.flip, .dkiContentFrame.previous.pop, .dkiContentFrame.next.pop { top: 0; } html.csstransforms3d .dkiContentFrame.previous.slide { -webkit-transform: translate3d(-100%, 0px, 0px); -moz-transform: translate3d(-100%, 0px, 0px); -o-transform: translateX(-100%); -ms-transform: translate3d(-100%, 0px, 0px); transform: translate3d(-100%, 0px, 0px); } html.no-csstransforms3d .dkiContentFrame.previous.slide { -webkit-transform: translateX(-1200px); -moz-transform: translateX(-1200px); -o-transform: translateX(-1200px); -ms-transform: translateX(-1200px); transform: translateX(-1200px); } html.csstransforms3d .dkiContentFrame.next.slide { -webkit-transform: translate3d(100%, 0px, 0px); -moz-transform: translate3d(100%, 0px, 0px); -o-transform: translateX(100%); -ms-transform: translate3d(100%, 0px, 0px); transform: translate3d(100%, 0px, 0px); } html.no-csstransforms3d .dkiContentFrame.next.slide { -webkit-transform: translateX(1200px); -moz-transform: translateX(1200px); -o-transform: translateX(1200px); -ms-transform: translateX(1200px); transform: translateX(1200px); } .dkiContentFrame.none, #contentFrame.forward .dkiContentFrame.next, #contentFrame.back .dkiContentFrame.previous, #contentFrame.loading .dkiContentFrame { -webkit-transition-property: none; -moz-transition-property: none; -o-transition-property: none; -ms-transition-property: none; transition-property: none; } .dkiContentFrame.none.previous, .dkiContentFrame.none.next { left: -200%; top: -200%; visibility: hidden; } .dkiContentFrame.slide, .dkiContentFrame.flip, .dkiContentFrame.pop { -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .dkiContentFrame.fade { -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity; } .dkiContentFrame.slide.fade, .dkiContentFrame.flip.fade, .dkiContentFrame.pop.fade { -webkit-transition-property: opacity, -webkit-transform; -moz-transition-property: opacity, -moz-transform; -o-transition-property: opacity, -o-transform; -ms-transition-property: opacity, -ms-transform; transition-property: opacity, transform; -webkit-transition-duration: 0.25s, 0.5s; -moz-transition-duration: 0.25s, 0.5s; -o-transition-duration: 0.25s, 0.5s; -ms-transition-duration: 0.25s, 0.5s; transition-duration: 0.25s, 0.5s; } html.csstransforms3d .dkiContentFrame.previous.flip { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } html.no-csstransforms3d .dkiContentFrame.previous.flip { -webkit-transform: translateX(-1200px); -moz-transform: translateX(-1200px); -o-transform: translateX(-1200px); -ms-transform: translateX(-1200px); transform: translateX(-1200px); } html.csstransforms3d .dkiContentFrame.next.flip { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -o-transform: rotateY(90deg); -ms-transform: rotateY(90deg); transform: rotateY(90deg); } html.no-csstransforms3d .dkiContentFrame.next.flip { -webkit-transform: translateX(1200px); -moz-transform: translateX(1200px); -o-transform: translateX(1200px); -ms-transform: translateX(1200px); transform: translateX(1200px); } .dkiContentFrame.previous.pop, .dkiContentFrame.next.pop { -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -o-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); } @-webkit-keyframes flipInH { from { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); z-index: 0; } to { -webkit-transform: rotateY(0); transform: rotateY(0); z-index: 2; } } @keyframes flipInH { from { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); z-index: 0; } to { -webkit-transform: rotateY(0); transform: rotateY(0); z-index: 2; } } .flipInH { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; animation: flipInH; -webkit-animation: flipInH; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } @-webkit-keyframes flipOutH { from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); z-index: 2; } to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); z-index: 0; } } @keyframes flipOutH { from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); z-index: 2; } to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); z-index: 0; } } .flipOutH { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; animation: flipOutH; -webkit-animation: flipOutH; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } @keyframes flipInV { from { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); z-index: 0; } to { -webkit-transform: rotateX(0); transform: rotateX(0); z-index: 2; } } @-webkit-keyframes flipInV { from { transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg); z-index: 0; } to { transform: rotateX(0); -webkit-transform: rotateX(0); z-index: 2; } } .flipInV { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; animation: flipInV; -webkit-animation: flipInV; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } @keyframes flipOutV{ from { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); z-index: 2; } to { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); z-index: 0; } } @-webkit-keyframes flipOutV{ from { transform: rotateX(0deg); -webkit-transform: rotateX(0deg); z-index: 2; } to { transform: rotateX(180deg); -webkit-transform: rotateX(180deg); z-index: 0; } } .flipOutV { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; animation: flipOutV; -webkit-animation: flipOutV; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } .dki-flipCard-element .bounceInDown { z-index:2 !important; } .dki-flipCard-element .zoomOutUp { z-index:-1 !important; } /*siloed to flipcards*/ .dki-flipCard-element .owl-stage{ perspective: 2000px; } @keyframes textEffect_typeIn{ from { visibility: hidden; } to { visibility: visible; } } @-webkit-keyframes textEffect_typeIn{ from { visibility: hidden; } to { visibility: visible; } } .textEffect_typeIn { animation: textEffect_typeIn; -webkit-animation: textEffect_typeIn; } .textEffect_typeIn:after{ content: ""; display: inline; border-right: 1px solid black; animation: fadeOut; -webkit-animation: fadeOut; animation-timing-function: ease-out; } @keyframes flicker { 0% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0; transform: scale(1.15); } 100% { opacity: 0.5; transform: scale(1); } } @keyframes flickerNoResize { 0% { opacity: 0.5; } 50% { opacity: 0; } 100% { opacity: 0.5; } } @keyFrames arrow-hint { 0% { opacity:0; left:5px; transform: scale(1); } 100% { opacity:1; left:0px; transform: scale(1.15); } } @keyframes hint { 0% { opacity: 1; transform: translateY(0); } 40% { opacity: 0.8; transform: translateY(-4px); } 75% { opacity:0.8; transform: translateY(2px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes step-hint { 0% { opacity: 1; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(8px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes flashInput { 0% { opacity: 0.7; background-color:white; } 50% { opacity: 0.8; background-color:yellow; } 100% { opacity: 0.7; background-color:white; } }#contentFrame{ position: relative; } .dkiContentFrame { position:absolute; width:100%; top:0px; bottom:0px; overflow: hidden; } .disabled, .disabled-element { -moz-opacity:0.5; opacity:0.5; filter:alpha(opacity=50); cursor: default !important; } .disablerWrapper, .disabler { display: none; z-index: 99; position:fixed; /* top and bottom at -20% to ensure that the blocker will be large enough while scrolling on devices that show/hide the control bar while scrolling */ top: -20%; bottom: -20%; left:0px; right:0px; } .disablerWrapper.clickable, .disabler.clickable { cursor: pointer; } .disablerWrapper.textMessage .disablerMessage{ margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px; position: relative; text-align: left; max-width: 1000px; display: flex; justify-content: center; flex-direction: column; top: auto; height: 100%; } .previewLoader{ position: fixed; } .disabler, .previewLoader{ opacity:0.90; moz-opacity:0.90; filter:alpha(opacity=90); background-color: #000; } .disabler-play { width:100px; height:100px; background-image: url("../images/disabler-play.png"); background-repeat: no-repeat; position:absolute; left:50%; margin-left:-50px; cursor:pointer; } .disabler:hover .disabler-play{ background-position:0 -100px; } .disabler.spinner{ background-image: url("../images/ajax-loader.gif"); background-position: center center; background-repeat: no-repeat; } html.csstransforms .disabler.spinner{ background-image:none; content: " "; position: absolute; margin: 0 auto; left: 0; top: 40%; top: calc(45% - 30px); bottom: 0; right: 0; width: 7px; height: 7px; border-radius: 100%; box-shadow: 7px 7px rgb(79,77,73), -7px 7px rgb(223,223,223), -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223); -o-box-shadow: 7px 7px rgb(79,77,73), -7px 7px rgb(223,223,223), -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223); -ms-box-shadow: 7px 7px rgb(79,77,73), -7px 7px rgb(223,223,223), -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223); -webkit-box-shadow: 7px 7px rgb(79,77,73), -7px 7px rgb(223,223,223), -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223);\ -moz-box-shadow: 7px 7px rgb(79,77,73), -7px 7px rgb(223,223,223), -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223); animation: cssload-spin ease infinite 4.6s; -o-animation: cssload-spin ease infinite 4.6s; -ms-animation: cssload-spin ease infinite 4.6s; -webkit-animation: cssload-spin ease infinite 4.6s; -moz-animation: cssload-spin ease infinite 4.6s; } @keyframes cssload-spin { 0%, 100% { box-shadow: 7px 7px rgb(79,77,73), -7px 7px rgb(223,223,223), -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223); } 25% { box-shadow: -7px 7px rgb(223,223,223), -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223), 7px 7px rgb(79,77,73); } 50% { box-shadow: -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223), 7px 7px rgb(79,77,73), -7px 7px rgb(223,223,223); } 75% { box-shadow: 7px -7px #dfdfdf, 7px 7px #4f4d49, -7px 7px #dfdfdf, -7px -7px #4f4d49; } } @-o-keyframes cssload-spin { 0%, 100% { box-shadow: 7px 7px rgb(79,77,73), -7px 7px rgb(223,223,223), -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223); } 25% { box-shadow: -7px 7px rgb(223,223,223), -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223), 7px 7px rgb(79,77,73); } 50% { box-shadow: -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223), 7px 7px rgb(79,77,73), -7px 7px rgb(223,223,223); } 75% { box-shadow: 7px -7px #dfdfdf, 7px 7px #4f4d49, -7px 7px #dfdfdf, -7px -7px #4f4d49; } } @-ms-keyframes cssload-spin { 0%, 100% { box-shadow: 7px 7px rgb(79,77,73), -7px 7px rgb(223,223,223), -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223); } 25% { box-shadow: -7px 7px rgb(223,223,223), -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223), 7px 7px rgb(79,77,73); } 50% { box-shadow: -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223), 7px 7px rgb(79,77,73), -7px 7px rgb(223,223,223); } 75% { box-shadow: 7px -7px #dfdfdf, 7px 7px #4f4d49, -7px 7px #dfdfdf, -7px -7px #4f4d49; } } @-webkit-keyframes cssload-spin { 0%, 100% { box-shadow: 7px 7px rgb(79,77,73), -7px 7px rgb(223,223,223), -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223); } 25% { box-shadow: -7px 7px rgb(223,223,223), -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223), 7px 7px rgb(79,77,73); } 50% { box-shadow: -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223), 7px 7px rgb(79,77,73), -7px 7px rgb(223,223,223); } 75% { box-shadow: 7px -7px #dfdfdf, 7px 7px #4f4d49, -7px 7px #dfdfdf, -7px -7px #4f4d49; } } @-moz-keyframes cssload-spin { 0%, 100% { box-shadow: 7px 7px rgb(79,77,73), -7px 7px rgb(223,223,223), -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223); } 25% { box-shadow: -7px 7px rgb(223,223,223), -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223), 7px 7px rgb(79,77,73); } 50% { box-shadow: -7px -7px rgb(79,77,73), 7px -7px rgb(223,223,223), 7px 7px rgb(79,77,73), -7px 7px rgb(223,223,223); } 75% { box-shadow: 7px -7px #dfdfdf, 7px 7px #4f4d49, -7px 7px #dfdfdf, -7px -7px #4f4d49; } } .disabler.previewLoader{ background-position: 50% 36%; } .disablerMessage{ position:absolute; top:45%; margin-top:-12px; color:white; text-align:center; width:100%; font-size: 24px; z-index: 100; } .bgRepeater { position: relative; } #skipToNavigation, #skipToContent{ display: block; overflow: hidden; padding: 0; } #skipToNavigationWrapper{ float: right; bottom: 1px; margin-bottom: 1px; } #skipToContentWrapper{ float: left; margin-top: 1px; } #skipToContentWrapper, #skipToNavigationWrapper { width: 0; height: 0; opacity: 0; right: 50%; transform: translate(50%, 0); max-width: 200px; } body.show-focus-outlines #skipToContentWrapper:focus-within, body.show-focus-outlines #skipToNavigationWrapper:focus-within { height: auto!important; width: auto!important; padding: 10px; position: fixed; z-index: 99996 !important; opacity: 1; } /*Banner custom player styles */ .dki-banner { border-radius: 0px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; z-index: 100; } html.csstransitions .dki-banner.noTransition{ -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; } .dki-banner-header { background: #0a5ba0; text-shadow: none; cursor:move; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .dki-banner-notificationArea { background-color:transparent; } .dki-banner-notificationArea.rounded { border-radius: 0px; } .dki-banner-notice { padding: 5px 0px; margin: 5px 0px; } #eventLoggerContainer .dki-banner-notice{ margin: 0; } #eventLoggerContainer .dki-banner-notice-title { margin-bottom:0px; } .dki-banner-notice .timestamp { float:right; } .dki-banner-notice-message { word-break: break-word; } .dki-banner-notice-wrapper { border: 0px; margin:0px; } .dki-banner-notice.info{ background-color: rgb(120, 197, 231); border: 1px solid rgb(59, 173, 214); } .dki-banner-notice.info *{ color: #FFF; } .dki-banner-notice.info .dki-banner-evMessage:hover{ background-color:rgb(59, 173, 214); } .dki-banner-notice.info .dki-banner-evMessage { border-bottom: 1px solid rgb(59, 173, 214); } .dki-banner-notice.warning { background-color: rgb(255, 234, 168); border :1px solid rgb(255, 194, 55); } .dki-banner-notice.warning *{ color: rgb(130, 98, 0); } .dki-banner-notice.warning .dki-banner-evMessage { border-bottom: 1px solid rgb(255, 194, 55); } .dki-banner-header.yellow { background: rgb(255, 234, 168); color: rgb(130, 98, 0); } .dki-banner-header .currDate { display:inline-block; float: left; font-weight: bold; } .console-wrapper .fa{ padding: 10px; } .console-wrapper { position:fixed; top: 0px; width: 140px; left: 50%; margin-left : -70px; background: #0a5ba0; color: #FFF; font-weight:bold; text-align:center; cursor: pointer; font-size: 12px; padding-left: 10px; } .dki-banner, .console-wrapper{ z-index: 5000 !important; } .headerPage,.footerPage { position:relative; /*Adding position relative to header and footer pages to anchor the absolutely positioned page background div to their layer*/ z-index: 2; } .fancybox-close { position: absolute; top: 0; left: 0; width: 56px; height: 56px; cursor: pointer; z-index: 120000; } .fancybox-close:before{ content: ''; background-image: url(../images/fancybox_sprite.png); width: 36px; height: 36px; position: absolute; top: 0px; right: 30px; } /*trying to manage the behavior that shows the top when scrolling*/ html.on-ios.popupPageOpen{ overflow-y: hidden; } /*offset with margin in landscape to get around silly fancybox viewport click issues in landscape.*/ @media all and (orientation:landscape) { html.on-ios .fancybox-close{ margin-top: 40px; width: 100px; } .fancybox-close:before{ top: 0px; right: 30px; } .fancybox-close.persistant-modal:before{ top: 10px !important; right: 11px !important; } } .stuck-rows .dki-authoring-row{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index:2; display: none; opacity: 0; } /* This file contains the base styling for content of a course. Included in authoring */ /* Base Line Styles*/ body.noscroll { overflow: hidden; } body.not-responsive .bgRepeater{ margin: auto; } audio.dki-media-control { background-color:#333; background-image:url(../images/control_play.png); background-repeat:no-repeat; background-position:5px center; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; display:block; height:20px; opacity:0.7; filter: alpha(opacity = 70); } audio.dki-media-control.playing { background-image:url(../images/control_pause.png); } /* Content wrappers */ .pageElementsWrapper { position: absolute; width: 100%; height: 100%; } .pageContentWrapper{ } .page-standAlone{ height: 100%; overflow:auto; position:relative; z-index:1; } .dki-audio-element.hiddenNarration[data-narration='1']{ width: 0px !important; height: 0px !important; opacity: 0 !important; } .zoomedWrapper{ position: absolute; top: 0px; left: 0px; } /* Text Elements */ html.enableTextHighlight .dki-element-text{ user-select: text; } .nav-stacked .dki-tab-element .dki-element-content, .nav-stacked .dki-panelHeader-element .dki-element-content, .nav-stacked .dki-panelFooter-element .dki-element-content{ white-space: normal; } .dki-authoring-element[data-isrichtext='true'] .dki-element-content img, .dki-authoring-element-element[data-isrichtext='true'] .dki-element-content img{ width: initial; display: inline; } b, strong, .dki-text-style-bold{ font-weight: bold; } i, em, .dki-text-style-italic{ font-style: italic; } ins, u, .underline, .dki-text-style-underline{ text-decoration: underline; } .u-double { text-decoration: none; border-bottom: 3px double #333; } del, s, .strike, .dki-text-style-strike{ text-decoration: line-through; } .dki-inline-text-variable-name{ display: none; } .dki-tabset-element .panel-heading { padding: 0; } .dki-tabset-element .panel-heading .panel-title>a { padding: 10px 15px; } .dki-tabset-element .dki-panel-element>.dki-authoring-content-wrapper>.dki-element-content>.panel>.panel-heading>.panel-title>a { padding: inherit; } .dki-authoring-content-wrapper>.dki-element-content.accordionPanel [id^="content_"]>.panel .dki-authoring-content-wrapper>.dki-element-content.accordionPanel>.tabbable>.panel-group>.panel>.panel-heading { padding: 0!important; } .dki-tabset-element .dki-panel-element>.dki-authoring-content-wrapper>.dki-element-content>.panel>.panel-heading>.panel-title>a>i.fa.left { padding-right: 0; } small { font-size: 0.8em; line-height: 0.9em; } .smallcaps { font-variant: small-caps; } .uppercase { text-transform: uppercase; } .dki-glossary-link, .dki-text-tooltip{ text-decoration: underline; cursor: pointer; color:inherit; position: relative; } html .on-device .dki-glossary-link:after, html .on-device .dki-text-tooltip:after{ content: ''; position: absolute; top: -2px; left: -5px; right: -5px; bottom: -2px; background-image: url(../images/transparent.gif); background-repeat: repeat; } .dki-citation-link sup.refSup{ cursor: pointer; } .dki-htm-element .dki-element-content{ min-height: 1em; } .dki-authoring-element.dki-htm-element .dki-authoring-content-wrapper .dki-element-content { word-wrap: break-word; word-break: normal; } .dki-authoring-element[data-isrichtext="true"] .dki-element-content img, .cke_editable img { max-width: 100%; box-sizing: border-box; border-width: 0px; border-style: solid; padding: 5px; } .cke_dialog_contents_body .ImagePreviewBox img{ height: auto !important; } .dki-htm-element sup, .dki-table-element sup, .dki-label-element sup{ font-size : 0.6em; position: relative; top: -0.3em; vertical-align: super; backface-visibility: unset !important; } .dki-htm-element sub, .dki-table-element sub, .dki-label-element sub{ font-size : 0.6em; position: relative; top: 0.3em; vertical-align: sub; backface-visibility: unset !important; } .dki-htm-element *{ line-height: inherit; } .dki-justify-left{ text-align: left !important; } .dki-justify-right{ text-align: right !important; } .dki-justify-center{ text-align: center !important; } .dki-justify-block{ text-align: justify !important; } .dki-table-element.upgraded .dki-element-text{ height: 100%; } .dki-table-element.upgraded table, .dki-table-element.upgraded table *{ box-sizing: content-box; } .dki-table-element.upgraded table td[style]{ border-style: double; } .dki-table-element table{ margin-bottom: 0px; } .dki-font-family-arial{ font-family: Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif !important; } .dki-font-family-arial-narrow{ font-family: 'Arial Narrow', 'Arial', 'Nimbus Sans L', sans-serif !important; font-stretch: condensed; } .dki-font-family-arial-black{ font-family: 'Arial Black',Gadget,sans-serif !important; font-weight: 900; } .dki-font-family-bookman{ font-family: Bookman,'Bookman Old Style','URW Bookman L','Palatino Linotype',serif !important; } .dki-font-family-bookman-old-style{ font-family: 'Bookman Old Style',Bookman,'URW Bookman L','Palatino Linotype',serif !important; } .dki-font-family-century-gothic{ font-family: 'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif !important; } .dki-font-family-console{ font-family: Consolas,'Lucida Console','DejaVu Sans Mono',monospace !important; } .dki-font-family-comic-sans-ms{ font-family: 'Comic Sans MS', cursive !important; } .dki-font-family-courier{ font-family: Courier,'Courier New','Nimbus Mono L',monospace !important; } .dki-font-family-courier-new{ font-family: 'Courier New',Courier,'Nimbus Mono L',monospace !important; } .dki-font-family-georgia{ font-family: Georgia,Constantia,'Nimbus Roman No9 L',serif !important; } .dki-font-family-helvetica{ font-family: Helvetica,Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif !important; } .dki-font-family-impact{ font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif !important; } .dki-font-family-lucida-console{ font-family: 'Lucida Console',Consolas,'DejaVu Sans Mono',monospace !important; } .dki-font-family-lucida-sans-unicode{ font-family: 'Lucida Sans Unicode','Lucida Grande','Lucida Sans','DejaVu Sans Condensed',sans-serif !important; } .dki-font-family-palatino-linotype{ font-family: 'Palatino Linotype',Cambria,'Book Antiqua','URW Palladio L',serif !important; } .dki-font-family-tahoma{ font-family: 'Tahoma',sans-serif !important; } .dki-font-family-times-new-roman{ font-family: 'Times New Roman',Cambria,'Nimbus Roman No9 L','Freeserif',Times,serif !important; } .dki-font-family-trebuchet-ms{ font-family: 'Trebuchet MS',sans-serif !important; } .dki-font-family-verdana{ font-family: Verdana,Geneva,'DejaVu Sans',sans-serif !important; } .tabbable ul.dki-indent-1, .dki-indent-1{ margin-left: 40px; } .tabbable ul.dki-indent-2, .dki-indent-2{ margin-left: 80px; } .tabbable ul.dki-indent-3, .dki-indent-3{ margin-left: 120px; } .tabbable ul.dki-indent-4, .dki-indent-4{ margin-left: 160px; } .tabbable ul.dki-indent-5, .dki-indent-5{ margin-left: 200px; } /* All Elements */ body.not-responsive .dki-authoring-group{ position: absolute; box-sizing: border-box; width:1px; /*can't reliably detect if the group is visible without giving it a height or width*/ left: 0; /*for rtl languages, to ensure everything places properly*/ top: 0px; } html.document-mode .dki-authoring-group{ width: auto; height: auto; left: auto; } html:not(.design-mode) .dki-authoring-group.hiddenOnLoad, html:not(.design-mode) .dki-authoring-element.hiddenOnLoad, html:not(.design-mode) .dki-authoring-element-element.hiddenOnLoad, .dki-authoring-group.hidden, .dki-authoring-element.hidden, .dki-authoring-element-element.hidden{ display: none; } .dki-authoring-element.hiddenUntilInView, .dki-authoring-element-element.hiddenUntilInView{ opacity: 0; display: initial; visibility: initial; } iframe.dki-element-content{ box-sizing: border-box; } .dki-element-anchor{ position:absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } *:focus { outline: 0; } /* testing taborder stuff. *:focus { outline: 1px auto #c6defd !important; } *:focus { background-color: #F1CA7F; z-index: 5; opacity: 0.5; } *:focus:before{ content: "focus is here"; background-color: yellow; position: absolute; z-index: 100000; top: 0; left: 0; } */ #contentFrame .dkiContentFrame.dk-hidden *[tabindex], #contentFrame .dkiContentFrame.dk-hidden a, #contentFrame .pageElementsWrapper.design a, #contentFrame .pageElementsWrapper.design *[tabindex], #contentFrame .dkiContentFrame.dk-hidden video, #contentFrame .dkiContentFrame.dk-hidden audio, #contentFrame .dkiContentFrame.dk-hidden iframe{ visibility: hidden; } #contentFrame .dkiContentFrame.current *[tabindex], #contentFrame .dkiContentFrame.current a{ visibility: inherit; } .pageElementsWrapper>.dki-authoring-row, .pageElementsWrapper>.dki-authoring-section, .pageElementsWrapper .dki-authoring-section>.dki-authoring-row, .pageElementsWrapper .dki-authoring-element, .pageElementsWrapper .dki-authoring-element-element{ padding-left: 0px; padding-right: 0px; } .dki-image-element img.masked{ visibility: hidden !important; position: relative; } .dki-image-element .svgMask{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } .dki-label-element { box-sizing:initial; } .dki-authoring-element-element.dki-speechBubble-element .dki-element-content{ box-sizing:border-box; margin: 0 !important; } .dki-authoring-element-elements-wrapper > .dki-authoring-element-element{ padding: 0px !important; position:absolute; } .dki-authoring-element.dki-element-highlighted{ outline: 2px dashed red; display: block !important; } .dki-htm-element .dki-text-highlight, .dki-table-element .dki-text-highlight{ background-color: yellow; } .dki-hotspot-element .dki-element-content{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .dki-hotspot-element{ background-image: url(../images/transparent.gif); background-repeat: repeat; } .dki-shape-element{ background-image: url(../images/transparent.gif); background-repeat: repeat; } /* Image Maps */ .dki-authoring-element area{ cursor: pointer; } .dki-authoring-content-wrapper{ box-sizing: border-box; } .dki-progress-element .dki-authoring-content-wrapper{ z-index:1; position:relative; } .dki-instructionalText-element{ box-sizing: border-box; background-color: #000; opacity: 0.9; border-radius: 4px; color: white; } .dki-instructionalText-element .dki-authoring-content-wrapper{ padding: 5px !important; padding-top: 10px !important; } .scene-mouse-pointer{ width: 32px; height: 32px; background-image: url(../images/mousePointer.png); position: absolute; top: -50px; left: -50px; display: none; z-index: 10000; } .dki-hotspot-element{ cursor: pointer; } /* End for PPT Import */ .dki-placeholder-element{ display: none; height:0; min-height:0 !important; } .dki-media-placeholder:before { display: block; position: absolute; top: 40%; left: 0px; right: 0px; padding: 2px 0px; text-align: center; color: #FFF; background-color: #000; opacity: 0.9; filter: alpha(opacity = 90); } html.flow-authoring .dki-media-placholder { background-color: transparent; } .dki-media-placeholder { background-image: url(../images/control_play.png); background-repeat: no-repeat; background-position: center; background-size: contain; background-color:rgba(204, 204, 204, 0.6); position: relative; } html.flow-authoring .dki-media-placholder { background-color: transparent; } .dki-media-placeholder.hasPoster { opacity: 1.0; filter: alpha(opacity = 100); } .dki-html-element.bordered .dki-authoring-content-wrapper{ border: 1px solid black; box-sizing: border-box; } .dki-html-element.bordered .dki-authoring-content-wrapper{ border: 1px solid black; box-sizing: border-box; } .dki-element-overlay { position:absolute; top:0; left:0; z-index:2; background-image: url(../images/transparent.gif); background-repeat: repeat; } /* Test Questions */ .submitButton, .questionScoreDisplay { display: none; position: fixed; right:10px; bottom:0px; z-index:1; } html.rtl .submitButton { right: auto; left: 10px; } .submitButton { cursor: pointer; } .questionScoreDisplay{ height: 30px; overflow: visible; } .feedbackWrapper { -webkit-transition-property: opacity, -webkit-transform; -moz-transition-property: opacity, -moz-transform; -o-transition-property: opacity, -o-transform; -ms-transition-property: opacity, -ms-transform; transition-property: opacity, transform; -webkit-transition-duration: 0.25s, 0.5s; -moz-transition-duration: 0.25s, 0.5s; -o-transition-duration: 0.25s, 0.5s; -ms-transition-duration: 0.25s, 0.5s; transition-duration: 0.25s, 0.5s; position:absolute; z-index:1; max-height: 580px; min-height: 120px; width: 420px; left: 50%; margin-left: -210px; } body.phone .feedbackWrapper{ width: 280px; max-height: 380px; margin-left: -140px; } .questionFeedback{ max-height: 520px; max-width: 950px; min-height: 80px; } .feedbackWrapper.dragging { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .feedbackWrapper.hidden { z-index: 0; display: none; } .feedbackClose{ background-repeat: no-repeat; } .panel_header, .panel_header table { width:100%; } .panel_mid, .panel_mid table { width:100%; } .panel_footer, .panel_footer table { width:100%; } .questionFeedback { display:none; } /* Elements can have padding and margin set to them by the toolbox. We need to override them for this functionality to work */ html.legacy .correct { padding-left: 21px; margin-left: -21px; background-image: url(../images/correct.png); background-repeat: no-repeat; } html.legacy .incorrect { padding-left: 21px; margin-left: -21px; background-image: url(../images/incorrect.png); background-repeat: no-repeat; } html.legacy .multiChoiceCorrectResponse { padding-left: 21px; border: 2px solid green; margin-left: -21px; box-sizing: border-box; } .optionNumber{ display: inline-block; min-width: 20px; font-weight: normal; margin-right:5px; } .dki-multiChoiceOption-element input, .dki-trueFalseOption-element input{ margin-right: 5px; vertical-align: middle; } .dki-multiChoiceOption-element label.form-control{ height: auto; } .dki-multiChoice-selector, .dki-trueFalse-selector { height:100%; width:100%; position: absolute; z-index: 3; cursor: pointer; background-image: url('../images/transparent.gif'); } .dki-multiChoiceOption-element, .dki-trueFalseOption-element{ background-image: url(../images/transparent.gif); } .dki-freeFormOption-element textarea{ color: #000; resize: none; } .dki-authoring-element[data-is-draggable=true]{ cursor: move; } .dki-multiPulldownOption-element .contentWrapper { width: 100%; box-sizing: border-box; padding-left: 25px; position: absolute; top: 0; left: 0; } html.rtl .dki-multiPulldownOption-element .contentWrapper { padding-left: 0; padding-right: 25px; } .dki-authoring-row{ clear: both; } .dki-authoring-row .dki-multiPulldownOption-element .contentWrapper { padding-right: 15px; } .dki-multiPulldownOption-element select.content { width: 100%; } #pageElementsWrapper{ visibility: hidden; } option.content, select.content, input.content { color:#000; } .dki-textbox-element textarea{ resize: none; } .dki-question-option select, .dki-question-option textarea, .dki-question-option input[type="text"] { font-family: inherit; } .dki-authoring-element-elements-wrapper{ z-index: 3; position: absolute; top:0; left:0%; } body.responsive .dki-authoring-element-elements-wrapper{ display:none; } /* Lightbox styles */ .fancybox-title-inside-wrap{ font-size: 1.2em; font-weight: bold; border-bottom: 1px solid #333; padding-top: 0px; margin-bottom: 5px; } .popup-content{ padding: 5px; } .fancybox-lock .fancybox-overlay{ overflow-y: auto; -webkit-overflow-scrolling: auto; } .fancybox-inner .dki-video-element{ overflow: hidden; /* prevent scroll bars from appearing while loading videos in a lightbox */ } .fancybox-nav { width: 60px; } .fancybox-nav span { visibility: visible; opacity: 0.5; } .fancybox-nav:hover span { opacity: 1; } /*Make sure the controls are always visible for accessibility purposes*/ .fancybox-toolbar { visibility: visible !important; opacity: 1 !important; } html.on-device .windowContainer div.panel:before, html.on-device .viewContainer div.panel:before, html.on-device .browserList:before, html.on-device .fancybox-lock .fancybox-overlay:before{ content: ''; display: block; min-height: 101%; width: 1px; float: left; margin-left: -1px; } html.on-device.iOS-iframe .fancybox-container{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; } .fancybox-stage{ direction: inherit !important; } html.not-responsive .fancybox-content.dki-course-max-width{ transform: scale(0.9); overflow: hidden; } .dki-inline-variable-name:before{ content: "{{"; } .dki-inline-variable-name:after{ content: "}}"; } html.coursePlayer .dki-inline-variable-name{ display: none !important; } html.authoring-tool .dki-inline-variable-name, html.singlePage .dki-inline-variable-name{ display: inline !important; } .tabset-add { display:none !important; } .dki_heading_red_exclaimed{ color:red; text-decoration:none; text-align:left; font-weight:bold; } .dki_heading_red_exclaimed:after{ content:''; display:inline; } .dki_heading_red_exclaimed i{ color:blue; font-size:2em; } .dki_big_round_red{ color:#ffffff; background-color:#ff0000; border-radius:50%; } .dki_big_flat_blue{ color:#ffffff; background-color:#0b5396; border-radius:0; border-color:#093C6B; border-style:solid; border-width:2px; } /* Window Clases */ .windowContainer, .viewContainer { background-color: #F3F3F3; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; color: #6B6B6B; border: 1px solid #BBB; overflow:hidden; position: absolute; top: 43px; z-index:5; box-shadow: 10px 10px 15px -5px #333; -webkit-box-shadow: 10px 10px 15px -5px #333; -moz-box-shadow: 10px 10px 15px -5px #333; display: none; height: 500px; width:800px; } html.position-fixed .windowContainer, html.position-fixed .viewContainer { position:fixed; } /* Case 48021 - If a course is no nav, our windows should have top 0, otherwise they need to show up under the top nav bar*/ html.noNav .windowContainer, html.noNav .viewContainer { top: 0px; } .windowContainer div.browserHeader, .viewContainer div.browserHeader { border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-right-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; background-image: url(../images/headerBar_slice.png); background-repeat: repeat-x; background-position: top left; height: 23px; width: 100%; } .windowContainer span.headerTitle, .viewContainer span.headerTitle, .windowContainer span.browserTitle, .viewContainer span.browserTitle { color: white; margin-left: 10px; line-height: 23px; font-size: 17px; float:left; } .rtl .windowContainer span.headerTitle, .rtl .viewContainer span.headerTitle, .rtl .windowContainer span.browserTitle, .rtl .viewContainer span.browserTitle { float:right; margin-right: 10px; } .windowContainer div.searchContainer div.searchIcon, .viewContainer div.searchContainer div.searchIcon { float:left; vertical-align:middle; width: 20px; height: 100%; background-image: url(../images/searchButton.png); background-repeat: no-repeat; background-position: center center; margin-right: 5px; } .windowContainer input.searchInput, .viewContainer input.searchInput { font-size: 20px; border: none; background-color:inherit; color: #333; width: 100%; height: 23px; } .windowContainer div.sectionBreak, .viewContainer div.sectionBreak { border-top: 1px solid #AAA; width: 510px !important; clear:both; margin: 0px; } .windowContainer div.panel, .viewContainer div.panel { background-color: inherit; float: left; height: 97%; line-height: 20px; padding: 0px 10px; overflow: auto; -webkit-overflow-scrolling: auto; } .browserList { overflow: auto; -webkit-overflow-scrolling: auto; left:10px; width: 201px; border-right: 1px solid #C1C1C1; } .browserList li.selected { background-color:#D1DEF3; } .browserList li a:link { color:#6B6B6B; text-decoration: none; } .browserList li a:visited { color:#D1DEF3; } .browserContentContainer { width:100%; height: auto; position:absolute; top:30px; bottom:3px; } .windowContainer div.browserList ul, .windowContainer div.browserList li, .viewContainer div.browserList ul, .viewContainer div.browserList li{ list-style-type: none; cursor: default; } .windowContainer div.browserList ul.subList, .viewContainer div.browserList ul.subList { margin-top: 5px; margin-left: 0px; border-top: 1px solid #AAA; } .windowContainer div.browserList li span.icon, .viewContainer div.browserList li span.icon { background-image: url(../images/assetmanager_sprites.png); background-repeat: no-repeat; width:16px; height:16px; display:inline-block; vertical-align:bottom; margin-right: 5px; } .windowContainer div.browserList li span.linkIcon, .viewContainer div.browserList li span.linkIcon { width:16px; height:16px; display:block; background-image: url(../images/elementLink.png); background-repeat:no-repeat; background-position: 1px 9px; } .windowContainer ul.resultList, .windowContainer ul.resultList li, .viewContainer ul.resultList, .viewContainer ul.resultList li{ margin-left: 0px; font-weight: bold; } .windowContainer ul.resultList ul li, .viewContainer ul.resultList ul li { padding: 2px 0px 2px 0px; cursor:pointer; margin: 5px 0px 5px 15px; list-style-type : none; } .windowContainer li.subItem, .viewContainer li.subItem { font-weight: normal; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 165px; line-height:18px; } .windowContainer div.panel.details, .viewContainer div.panel.details { width: 550px; visibility: hidden; } .windowContainer div.detailsContent div.assetProperties a, .viewContainer div.detailsContent div.assetProperties a { color: #333; } .windowContainer div.detailsContent.border, .viewContainer div.detailsContent.border { border: 1px solid #AAA; } .windowContainer div.assetProperties, .viewContainer div.assetProperties { background-color:#CCC; padding: 5px 5px 5px 5px; } .windowContainer div.largeIco, .viewContainer div.largeIco { margin: 0 auto; width: 100px; height: 100px; background-size: contain; background-repeat: no-repeat; } .windowContainer div.searchDetails, .viewContainer div.searchDetails { padding: 10px; } .windowContainer div.searchContainer, .viewContainer div.searchContairen { margin-bottom:10px; margin-right: 5px; border:none; } .windowContainer div.backButton, .viewContainer div.backButton { -webkit-border-radius: 3px; background-image: url(../images/headerBar_slice.png); background-repeat: repeat-x; background-position: top left; display:none; color: white; font-size: 16px; padding: 4px 15px; margin: 6px 9px 0px 5px; float:right; cursor:pointer; } .windowContainer div.largeIco.elements, .viewContainer div.largeIco.elements { background-image: url(../images/search/elementsThumb.png); } .windowContainer div.largeIco.pages, .viewContainer div.largeIco.pages { background-image: url(../images/search/pageThumb.png); } .windowContainer div.largeIco.objects, .viewContainer div.largeIco.objects { background-image: url(../images/search/LOThumb.png); } .windowContainer div.largeIco.modules, .viewContainer div.largeIco.modules { background-image: url(../images/search/moduleThumb.png); } .windowContainer div.largeIco.course, .viewContainer div.largeIco.course { background-image: url(../images/search/courseThumb.png); } .windowContainer div.largeIco.glossaries, .viewContainer div.largeIco.glossaries { background-image: url(../images/search/glossaryThumb.png); } .windowContainer div.largeIco.references, .windowContainer div.largeIco.citations, .viewContainer div.largeIco.references, .viewContainer div.largeIco.citations { background-image: url(../images/search/referenceThumb.png); } .windowContainer div.largeIco.labels, .viewContainer div.largeIco.labels { background-image: url(../images/search/imageLabelThumb.png); } .windowContainer ul.resultList li.link span.linkIcon, .viewContainer ul.resultList li.link span.linkIcon { display: inline-block; } .windowContainer ul.resultList li span.icon.link, .viewContainer ul.resultList li span.icon.link { background-position:0px 0px; } .windowContainer ul.resultList li span.icon.image, .viewContainer ul.resultList li span.icon.image { background-position:0px -96px; } .windowContainer ul.resultList li span.icon.flash, .viewContainer ul.resultList li span.icon.flash { background-position:0px -48px; } .windowContainer ul.resultList li span.icon.video, .viewContainer ul.resultList li span.icon.video { background-position:0px -64px; } .windowContainer ul.resultList li span.icon.audio, .viewContainer ul.resultList li span.icon.audio { background-position:0px -80px; } .windowContainer ul.resultList li span.icon.document, .viewContainer ul.resultList li span.icon.document { background-position:0px -32px; } .windowContainer ul.resultList li span.icon.html, .viewContainer ul.resultList li span.icon.html { background-position:0px -112px ; } /* Window Phone Styles */ .phone div.windowContainer, .phone div.viewContainer { height: 440px; margin-left: 15px; } .phone div.detailsContent { width: 100%; } .phone div.browserList { border: none; } .phone div.windowContainer div.searchContainer, .phone div.viewContainer div.searchContainer { padding: 6px 0px 0px 10px; } .dki-sticky-group{ z-index: 5000; } .section-decoration{ display: none; z-index: 1; height: 60px; position: absolute; left: 0; right: 0; } .dki-authoring-section.has-top-decoration:first-child{ margin-top: 60px; } .dki-authoring-section.has-bottom-decoration:last-child{ margin-bottom: 60px; } .dki-authoring-section.has-top-decoration .section-decoration.top{ display: block; z-index: 0; top: -60px; } .dki-authoring-section.has-bottom-decoration .section-decoration.bottom{ display: block; bottom: -60px; } .dki-authoring-section.before-decoration.has-bottom-decoration .section-decoration.bottom{ z-index: 0; } .dki-authoring-section.before-decoration{ margin-bottom: 60px; } .dki-authoring-section.after-decoration{ margin-top: 60px; } .bg-parallax, .bg-parallaxer, .bg-parallaxest{ background-attachment: scroll !important; } .dki-authoring-section.dki-bg-attach-fixed .dki-authoring-section-fixed-background{ display: none; } html.on-device .dki-authoring-section.dki-bg-attach-fixed{ background-image: none !important; } html.on-device .dki-authoring-section.dki-bg-attach-fixed .dki-authoring-section-fixed-background{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip: rect(0,auto,auto,0); } html.on-device .dki-authoring-section.dki-bg-attach-fixed .dki-authoring-section-fixed-background picture{ display: block; position: fixed; -moz-transform: translateZ(0); -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } html.on-device .dki-authoring-section.dki-bg-attach-fixed .dki-authoring-section-fixed-background picture img{ object-fit: cover; width: 100%; height: 100%; } @keyframes bg-vertical-motion { from { background-position-y: 0px; } to { background-position-y: -1000%; } } .bg-vertical-motion{ background-repeat: repeat !important; animation: bg-vertical-motion 100s linear infinite; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes bg-horizontal-motion { from { background-position-x: 0px; } to { background-position-x: 1000%; } } .bg-horizontal-motion{ background-repeat: repeat !important; animation: bg-horizontal-motion 100s linear infinite; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes bg-diagonal-motion { from { background-position: 0 0; } to { background-position: -1000% -1000%; } } .bg-diagonal-motion{ background-repeat: repeat !important; animation: bg-diagonal-motion 100s linear infinite; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes bg-zoom-in-small { from { background-size: 100% 100%; } to { background-size: 125% 125%; } } .bg-zoom-in-small{ background-repeat: no-repeat !important; background-position: center center; animation: bg-zoom-in-small 10s linear; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes bg-zoom-in-medium { from { background-size: 100% 100%; } to { background-size: 150% 150%; } } .bg-zoom-in-medium{ background-repeat: no-repeat !important; background-position: center center; animation: bg-zoom-in-medium 10s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes bg-zoom-in-large { from { background-size: 100% 100%; } to { background-size: 200% 200%; } } .bg-zoom-in-large{ background-repeat: no-repeat !important; background-position: center center; animation: bg-zoom-in-large 10s linear; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes bg-zoom-out-small { from { background-size: 125% 125%; } to { background-size: 100% 100%; } } .bg-zoom-out-small{ background-repeat: no-repeat !important; background-position: center center; animation: bg-zoom-out-small 10s linear; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes bg-zoom-out-medium { from { background-size: 150% 150%; } to { background-size: 100% 100%; } } .bg-zoom-out-medium{ background-repeat: no-repeat !important; background-position: center center; animation: bg-zoom-out-medium 10s linear; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes bg-zoom-out-large { from { background-size: 200% 200%; } to { background-size: 100% 100%; } } .bg-zoom-out-large{ background-repeat: no-repeat !important; background-position: center center; animation: bg-zoom-out-large 10s linear; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes bg-scale-in-small { from { background-size: 100% 100%; } to { background-size: 75% 75%; } } .bg-scale-in-small{ background-repeat: no-repeat !important; background-position: center center; animation: bg-scale-in-small 10s linear; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes bg-scale-in-medium { from { background-size: 100% 100%; } to { background-size: 50% 50%; } } .bg-scale-in-medium{ background-repeat: no-repeat !important; background-position: center center; animation: bg-scale-in-medium 10s linear; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes bg-scale-in-large { from { background-size: 100% 100%; } to { background-size: 0% 0%; } } .bg-scale-in-large{ background-repeat: no-repeat !important; background-position: center center; animation: bg-scale-in-large 10s linear; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes bg-scale-out-small { from { background-size: 75% 75%; } to { background-size: 100% 100%; } } .bg-scale-out-small{ background-repeat: no-repeat !important; background-position: center center; animation: bg-scale-out-small 10s linear; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes bg-scale-out-medium { from { background-size: 50% 50%; } to { background-size: 100% 100%; } } .bg-scale-out-medium{ background-repeat: no-repeat !important; background-position: center center; animation: bg-scale-out-medium 10s linear; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes bg-scale-out-large { from { background-size: 0% 0%; } to { background-size: 100% 100%; } } .bg-scale-out-large{ background-repeat: no-repeat !important; background-position: center center; animation: bg-scale-out-large 10s linear; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } .dki-table-element .tablesorter th { cursor : pointer; position:relative; } .dki-table-element .tablesorter th > div:after { font-family: FontAwesome; right:10px; position:absolute; } .rtl .dki-table-element .tablesorter th > div:after { right: auto; left: 10px; } .dki-table-element .tablesorter th.tablesorter-headerUnSorted:hover > div:after { content: "\f0dc"; } .dki-table-element .tablesorter th.tablesorter-headerAsc > div:after { content: "\f0dd"; } .dki-table-element .tablesorter th.tablesorter-headerDesc > div:after { content: "\f0de"; } .dki-contentCarousel-element .sideControls .owl-controls { display:none; } .dki-contentCarousel-element .side-control{ font-size: 20px; opacity: 1; z-index: 5; background-color: rgba(40, 40, 40, 0.3); position: absolute; top: 50%; margin-top: -30px; height: 60px; line-height: 60px; width: 40px; text-align: center; transition: font-size 200ms, opacity 500ms; -webkit-transition: font-size 200ms, opacity 500ms; } .dki-contentCarousel-element .hidenav .side-control{ opacity: 0; } .dki-contentCarousel-element:hover .side-control{ opacity: 1 !important; } .dki-contentCarousel-element .side-control.left{ left: 0px; } .dki-contentCarousel-element .side-control.right{ right: 0px; } .dki-contentCarousel-element .side-control i{ vertical-align: middle; color: white; } .dki-contentCarousel-element .side-control:hover{ font-size: 30px; } /* .dki-contentCarousel-element .topBottom.side-control{ margin-top: 0px; height: 50%; text-align: center; } .dki-contentCarousel-element .topBottom.side-control i{ position: absolute; top: 50%; height: 40px; line-height: 40px; margin-top: -20px; } */ .dki-contentCarousel-element .topBottom.side-control.prev { margin-top: -60px; } .dki-contentCarousel-element .topBottom.side-control.next { margin-top: 0px; } .dki-contentCarousel-element .owl-nav .btn{ margin: 5px; } .owl-carousel .owl-item .dki-panel-element img { display:inline-block !important; width: initial !important; } /* A fix for flickering panels in owl carousel items. If this needs to be altered, check that owl items do not flicker when the carousel is transitioned to show more content see: https://github.com/OwlCarousel2/OwlCarousel2/issues/599*/ .owl-carousel .owl-item { transform :translateZ(0) scale(1.0, 1.0); -webkit-transform :translateZ(0) scale(1.0, 1.0); } /*-----------Slider Variations--------------*/ .dki-slider-element .slider:not(.values) .noUi-value{ display:none; } /*Tracks*/ .dki-slider-element .line-track .slider.noUi-vertical{ width:0px; margin-left:8.5px; margin-top:0px; } .dki-slider-element .line-track .slider{ height:0px; margin-top:8.5px; } .dki-slider-element .line-track .noUi-vertical .noUi-base{ margin-top:0px; margin-left:-8.5px; } .dki-slider-element .line-track .noUi-base{ margin-top:-8.5px; } .dki-slider-element .mood.line-track .noUi-base{ margin-top: 0; } .dki-slider-element .mood.line-track .slider.noUi-vertical , .dki-slider-element .mood.line-track .noUi-vertical .noUi-base{ margin-left: 0; } .dki-slider-element .mood.line-track .slider{ border:none; } .dki-slider-element .mood.line-track .slider:not(.noUi-vertical){ height:3px; } .dki-slider-element .mood.line-track .slider.noUi-vertical{ width:3px; } /*Handles*/ .dki-slider-element .line-track.vertical.square-handle .noUi-handle{ right: -21.5px; } .dki-slider-element .circle-handle .noUi-handle{ width:34px; height:34px; right:-17px; border-radius:34px; } .dki-slider-element .vertical.circle-handle .noUi-handle{ right: -8px; } .dki-slider-element .line-track.vertical.circle-handle .noUi-handle{ right: -25px; } .dki-slider-element .circle-handle .noUi-handle:before, .dki-slider-element .circle-handle .noUi-handle:after{ left:8.5px; } .dki-slider-element .horizontal.circle-handle .noUi-handle { top:-9px; } .dki-slider-element .horizontal.circle-handle .noUi-handle:before { left:14px; top: 8.5px; } .dki-slider-element .horizontal.circle-handle .noUi-handle:after { left:17px; top:8.5px; } .dki-slider-element .triangle-handle .noUi-handle{ width: 0; height: 0; background-color:transparent; box-shadow:none; } .dki-slider-element .vertical.triangle-handle .noUi-handle{ border-left: 23px solid transparent; border-right: 23px solid transparent; border-top: 23px solid #AAA; border-bottom: 0; right:-14.5px; bottom:-17px; } .dki-slider-element .line-track.vertical.triangle-handle .noUi-handle { right:-31.5px; } .dki-slider-element .triangle-handle .noUi-rtl .noUi-handle{ border-top: 0; border-bottom:23px solid #AAA; bottom:-6px; } .dki-slider-element .triangle-handle .noUi-handle:before, .dki-slider-element .triangle-handle .noUi-handle:after{ display:none; } .dki-slider-element .horizontal.triangle-handle .noUi-handle{ border-top: 23px solid transparent; border-bottom: 23px solid transparent; border-left: 23px solid #AAA; border-right:0; top:-14px; right:-17px; } .dki-slider-element .horizontal.triangle-handle .noUi-rtl .noUi-handle{ border-left: 0; border-right: 23px solid #AAA; right:-6px; } .dki-slider-element .dki-element-content>div { padding: 10px; } .dki-slider-element .horizontal { height: 75px; } .dki-slider-element .vertical { height: 300px; display: inline-block; } .dki-slider-element .vertical .slider { height: 100%; } .dki-slider-element .mood:not(.vertical) div:not(.noUi-rtl) .noUi-base{ background: #eb3c28; /* Old browsers */ background: -moz-linear-gradient(left, #eb3c28 0%, #f47a24 25%, #f8aa22 50%, #8cc602 75%, #1c9807 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #eb3c28 0%,#f47a24 25%,#f8aa22 50%,#8cc602 75%,#1c9807 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #eb3c28 0%,#f47a24 25%,#f8aa22 50%,#8cc602 75%,#1c9807 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb3c28', endColorstr='#1c9807',GradientType=1 ); /* IE6-9 */ } .dki-slider-element .mood.vertical div:not(.noUi-rtl) .noUi-base{ background: #eb3c28; /* Old browsers */ background: -moz-linear-gradient(#eb3c28 0%, #f47a24 25%, #f8aa22 50%, #8cc602 75%, #1c9807 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(#eb3c28 0%,#f47a24 25%,#f8aa22 50%,#8cc602 75%,#1c9807 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(#eb3c28 0%,#f47a24 25%,#f8aa22 50%,#8cc602 75%,#1c9807 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb3c28', endColorstr='#1c9807',GradientType=1 ); /* IE6-9 */ } .dki-slider-element .mood.vertical .noUi-rtl .noUi-base{ background: #eb3c28; /* Old browsers */ background: -moz-linear-gradient(#1c9807 0%, #8cc602 25%, #f8aa22 50%, #f47a24 75%, #eb3c28 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(#1c9807 0%, #8cc602 25%, #f8aa22 50%, #f47a24 75%, #eb3c28 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(#1c9807 0%, #8cc602 25%, #f8aa22 50%, #f47a24 75%, #eb3c28 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c9807', endColorstr='#eb3c28',GradientType=1 ); /* IE6-9 */ } .dki-slider-element .mood .noUi-rtl .noUi-base{ background: #eb3c28; /* Old browsers */ background: -moz-linear-gradient(right, #eb3c28 0%, #f47a24 25%, #f8aa22 50%, #8cc602 75%, #1c9807 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(right, #eb3c28 0%,#f47a24 25%,#f8aa22 50%,#8cc602 75%,#1c9807 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to left, #eb3c28 0%,#f47a24 25%,#f8aa22 50%,#8cc602 75%,#1c9807 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb3c28', endColorstr='#1c9807',GradientType=1 ); /* IE6-9 */ } .dki-slider-element .mood.vertical .noUi-rtl .noUi-origin:before{ top:-100%; left:0; right:0; bottom:100%; } .dki-slider-element .mood .noUi-rtl .noUi-origin:before{ content: ""; position:absolute; background-color:white; top:0; left:-100%; right:100%; bottom:0; } .dki-slider-element .mood .noUi-origin{ background-color: white; } .dki-slider-element .mood .noUi-rtl .noUi-origin{ background-color: transparent; } .dki-slider-element .rounded-track .noUi-base, .dki-slider-element .rounded-track .noUi-target{ border-radius:10px; } .dki-slider-element .mood.rounded-track div:not(.noUI-rtl) .noUi-origin{ border-radius:0 10px 10px 0; } .dki-slider-element .mood.rounded-track div.noUi-rtl .noUi-origin{ border-radius:10px; } .dki-slider-element .mood.rounded-track.vertical div:not(.noUI-rtl) .noUi-origin{ border-radius:0 0 10px 10px; } /* TOGGLES */ .dki-toggle-element label { cursor : pointer; display: inline-table; } .dki-toggle-element .dki-element-content label .dki-element-text{ display: table-cell; vertical-align:middle; } .dki-toggle-element .dki-element-content label.tbl-btn .dki-element-text{ display: inline-block; } .dki-toggle-element label { margin-bottom:0; padding:; } .tg-list { text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .tg-list-item { margin: 0 2em; } .tgl { display: none; } .tgl-btn { text-align:left !important; } .tgl-btn .dki-element-text{ display: none !important; } .tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn { box-sizing: border-box; } .tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection { background: none; } .tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection { background: none; } .tgl + .tgl-btn { outline: 0; display: inline-block; width: 4em; height: 2em; position: relative; cursor: pointer; vertical-align:middle; margin:5px 0px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tgl + .tgl-btn:after, .tgl + .tgl-btn:before { position: relative; display: inline-block; content: ""; width: 50%; height: 100%; } .tgl + .tgl-btn:after { left: 0; } .tgl + .tgl-btn:before { display: none; } .tgl:checked + .tgl-btn:after { left: 50%; } .tgl-light + .tgl-btn { background: #f0f0f0; border-radius: 2em; padding: 2px; -webkit-transition: all .4s ease; transition: all .4s ease; } .tgl-light + .tgl-btn:after { border-radius: 50%; background: #fff; -webkit-transition: all .2s ease; transition: all .2s ease; } .tgl-light:checked + .tgl-btn { background: #9FD6AE; } .tgl-ios + .tgl-btn { background: #fbfbfb; border-radius: 2em; padding: 2px; -webkit-transition: all .4s ease; transition: all .4s ease; border: 1px solid #e8eae9; } .tgl-ios + .tgl-btn:after { border-radius: 2em; background: #fbfbfb; -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease; transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08); } .tgl-ios + .tgl-btn:hover:after { will-change: padding; } .tgl-ios + .tgl-btn:active { box-shadow: inset 0 0 0 2em #e8eae9; } .tgl-ios + .tgl-btn:active:after { padding-right: .8em; } .tgl-ios:checked + .tgl-btn { background: #86d993; } .tgl-ios:checked + .tgl-btn:active { box-shadow: none; } .tgl-ios:checked + .tgl-btn:active:after { margin-left: -.8em; } .tgl-skewed + .tgl-btn { overflow: hidden; -webkit-transform: skew(-10deg); transform: skew(-10deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all .2s ease; transition: all .2s ease; font-family: sans-serif; background: #888; } .tgl-skewed + .tgl-btn:after, .tgl-skewed + .tgl-btn:before { -webkit-transform: skew(10deg); transform: skew(10deg); display: inline-block; -webkit-transition: all .2s ease; transition: all .2s ease; width: 100%; text-align: center; position: absolute; line-height: 2em; font-weight: bold; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } .tgl-skewed + .tgl-btn:after { left: 100%; content: attr(data-on); } .tgl-skewed + .tgl-btn:before { left: 0; content: attr(data-off); } .tgl-skewed + .tgl-btn:active { background: #888; } .tgl-skewed + .tgl-btn:active:before { left: -10%; } .tgl-skewed:checked + .tgl-btn { background: #86d993; } .tgl-skewed:checked + .tgl-btn:before { left: -100%; } .tgl-skewed:checked + .tgl-btn:after { left: 0; } .tgl-skewed:checked + .tgl-btn:active:after { left: 10%; } .tgl-flat + .tgl-btn { padding: 2px; -webkit-transition: all .2s ease; transition: all .2s ease; background: #fff; border: 4px solid #f2f2f2; border-radius: 2em; } .tgl-flat + .tgl-btn:after { -webkit-transition: all .2s ease; transition: all .2s ease; background: #f2f2f2; content: ""; border-radius: 1em; } .tgl-flat:checked + .tgl-btn { border: 4px solid #7FC6A6; } .tgl-flat:checked + .tgl-btn:after { left: 50%; background: #7FC6A6; } .tgl-flip + .tgl-btn { padding: 2px; -webkit-transition: all .2s ease; transition: all .2s ease; font-family: sans-serif; -webkit-perspective: 100px; perspective: 100px; } .tgl-flip + .tgl-btn:after, .tgl-flip + .tgl-btn:before { display: inline-block; -webkit-transition: all .4s ease; transition: all .4s ease; width: 100%; text-align: center; position: absolute; line-height: 2em; font-weight: bold; color: #fff; position: absolute; top: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 4px; } .tgl-flip + .tgl-btn:after { content: attr(data-on); background: #02C66F; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .tgl-flip + .tgl-btn:before { background: #FF3A19; content: attr(data-off); } .tgl-flip + .tgl-btn:active:before { -webkit-transform: rotateY(-20deg); transform: rotateY(-20deg); } .tgl-flip:checked + .tgl-btn:before { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tgl-flip:checked + .tgl-btn:after { -webkit-transform: rotateY(0); transform: rotateY(0); left: 0; background: #7FC6A6; } .tgl-flip:checked + .tgl-btn:active:after { -webkit-transform: rotateY(20deg); transform: rotateY(20deg); } .tgl-container { position:relative; display:inline-block; width:40px; height:60px; background-color:#bbb; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; text-align:center; } .tgl-container input { width:100%; height:100%; margin:0 0; padding:0 0; position:absolute; top:0; right:0; bottom:0; left:0; z-index:2; cursor:pointer; opacity:0; filter:alpha(opacity=0); } .tgl-container label { display:block; position:absolute; top:1px; right:1px; bottom:1px; left:1px; background-image:-webkit-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%); background-image:-moz-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%); background-image:-ms-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%); background-image:-o-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%); background-image:linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%); -webkit-box-shadow:0 2px 3px rgba(0,0,0,0.4), inset 0 -1px 1px #888, inset 0 -5px 1px #bbb, inset 0 -6px 0 white; -moz-box-shadow:0 2px 3px rgba(0,0,0,0.4), inset 0 -1px 1px #888, inset 0 -5px 1px #bbb, inset 0 -6px 0 white; box-shadow:0 2px 3px rgba(0,0,0,0.4), inset 0 -1px 1px #888, inset 0 -5px 1px #bbb, inset 0 -6px 0 white; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; font:normal 11px Arial,Sans-Serif; color:#666; text-shadow:0 1px 0 white; cursor:text; } .tgl-container label:before { content:attr(data-off); position:absolute; top:6px; right:0; left:0; z-index:4; } .tgl-container label:after { content:attr(data-on); position:absolute; right:0; bottom:11px; left:0; color:#666; text-shadow:0 -1px 0 #eee; } .tgl-container input:checked + label { background-image:-webkit-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%); background-image:-moz-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%); background-image:-ms-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%); background-image:-o-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%); background-image:linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%); -webkit-box-shadow:0 0 1px rgba(0,0,0,0.4), inset 0 1px 7px -1px #ccc, inset 0 5px 1px #fafafa, inset 0 6px 0 white; -moz-box-shadow:0 0 1px rgba(0,0,0,0.4), inset 0 1px 7px -1px #ccc, inset 0 5px 1px #fafafa, inset 0 6px 0 white; box-shadow:0 0 1px rgba(0,0,0,0.4), inset 0 1px 7px -1px #ccc, inset 0 5px 1px #fafafa, inset 0 6px 0 white; } .tgl-container input:checked:hover + label { -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4), inset 0 1px 7px -1px #ccc, inset 0 5px 1px #fafafa, inset 0 6px 0 white; -moz-box-shadow:0 1px 3px rgba(0,0,0,0.4), inset 0 1px 7px -1px #ccc, inset 0 5px 1px #fafafa, inset 0 6px 0 white; box-shadow:0 1px 3px rgba(0,0,0,0.4), inset 0 1px 7px -1px #ccc, inset 0 5px 1px #fafafa, inset 0 6px 0 white; } .tgl-container input:checked + label:before { z-index:1; top:11px; } .tgl-container input:checked + label:after { bottom:9px; color:#aaa; text-shadow:none; z-index:4; } .no-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .dki-toggle-element .dki-element-content{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .dki-toggle-element input[type=checkbox].check { /* to hide the checkbox itself */ visibility: hidden; /* using display:none causes edge to not repaint when the state changes */ position: absolute; } .dki-toggle-element input[type=checkbox].check + label:before { font-family: FontAwesome; display: inline-block; font-size:20px; position:relative; vertical-align:middle; width:28px; } .dki-toggle-element input[type=checkbox].check + label:before { content: '\f096'; } .dki-toggle-element input[type=checkbox].check:checked + label:before { content: '\f046'; } .dki-toggle-element input[type=checkbox].check.dark + label:before { content: '\f0c8'; } .dki-toggle-element input[type=checkbox].check.dark:checked + label:before{ content: '\f14a'; } .dki-toggle-element input[type=checkbox].check.round + label:before { content: '\f10c'; } .dki-toggle-element input[type=checkbox].check.round:checked + label:before{ content: '\f05d'; } .dki-toggle-element input[type=checkbox].check.roundDark + label:before { content: '\f111'; } .dki-toggle-element input[type=checkbox].check.roundDark:checked + label:before{ content: '\f058'; } .dki-toggle-element input[type=checkbox].check.radio + label:before { content: '\f10c'; } .dki-toggle-element input[type=checkbox].check.radio:checked + label:before{ content: '\f192'; } .dki-selection-element .dropdown .caret { margin-left:10px; } .bg-transparent{ background-color: transparent; } .dki-input-element .form-group { margin-bottom:0; } .dki-input-element .form-group > label { text-align:left; font-weight:normal; width:100%; } .dki-selection-element .btn-group button.btn_transparent{ background:transparent; color:#333; } .dki-selection-element .selectedCont{ margin-right:0px; } .dki-submit-button .titleCont{ display: none; } .flow-authoring .dki-section-height[data-section-height='100']{ min-height: 100vh; } .flow-authoring .dki-section-height[data-section-height='75']{ min-height: 75vh; } .flow-authoring .dki-section-height[data-section-height='50']{ min-height: 50vh; } .flow-authoring .dki-section-height[data-section-height='25']{ min-height: 25vh; } .tooltipster-content{ line-height: normal !important; } .tooltipster-content img{ max-width: 100%; } .dki-course-max-width { opacity:1 !important; transition: opacity 500ms linear; } .dki-course-max-width.loading { opacity:0 !important; visibility:hidden; } /* large */ .dki-contentCarousel-element .flickity.large-1 .flickity-slider > .dki-authoring-element-element{ width:100%; } .dki-contentCarousel-element .flickity.large-2 .flickity-slider > .dki-authoring-element-element{ width:50%; } .dki-contentCarousel-element .flickity.large-3 .flickity-slider > .dki-authoring-element-element{ width:33.33%; } /* medium */ @media (max-width: 1199px) { .dki-contentCarousel-element .flickity.medium-1 .flickity-slider > .dki-authoring-element-element{ width:100%; } .dki-contentCarousel-element .flickity.medium-2 .flickity-slider > .dki-authoring-element-element{ width:50%; } .dki-contentCarousel-element .flickity.medium-3 .flickity-slider > .dki-authoring-element-element{ width:33.33%; } } /* small */ @media (max-width: 991px) { .dki-contentCarousel-element .flickity.small-1 .flickity-slider > .dki-authoring-element-element{ width:100%; } .dki-contentCarousel-element .flickity.small-2 .flickity-slider > .dki-authoring-element-element{ width:50%; } .dki-contentCarousel-element .flickity.small-3 .flickity-slider > .dki-authoring-element-element{ width:33.33%; } } /* xsmall */ @media (max-width: 767px) { .dki-contentCarousel-element .flickity.xsmall-1 .flickity-slider > .dki-authoring-element-element{ width:100%; } .dki-contentCarousel-element .flickity.xsmall-2 .flickity-slider > .dki-authoring-element-element{ width:50%; } .dki-contentCarousel-element .flickity.xsmall-3 .flickity-slider > .dki-authoring-element-element{ width:33.33%; } } @media print { .popupPageOpen body .bgRepeater * { display: none !important; } } .dki-element-content.darkGlow{ text-shadow: 0px 0px 10px rgba(0,0,0,0.5); } .dki-element-content.lightGlow{ text-shadow: 0px 0px 10px rgba(255,255,255,0.5); } #countdown-timer-div, #content-timer-div { background-color: #eee; color: #000; padding: 0 5px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border:1px solid #ccc; position: fixed; top: 60px; left: 0; z-index: 1000; text-align: center; margin: 0; } canvas.dki-ui-Spotlight { position : fixed; top : 0; opacity : 1; z-index : 10000000; transition : opacity 350ms ease-in-out; } canvas.dki-ui-Spotlight.hideOverlay { opacity : 0; z-index: -1; } .dki-authoring-content-wrapper > .element-feedback{ position : absolute; z-index : 50; top : -20px; left : 0; display : flex; display : -ms-flexbox; align-items : center; -ms-flex-line-pack : center; } .dki-authoring-content-wrapper > .element-feedback .icon{ background-image : url(../../images/v6/sprites/sprite_icons24.png); background-repeat : no-repeat; background-position : center center; width : 24px; height : 24px; display : none; border-radius : 50%; } .dki-authoring-content-wrapper > .element-feedback > * { display : none; cursor : pointer !important; } .dki-authoring-content-wrapper > .element-feedback .new { background-color : #f98520; color : #FFF; border : 1px solid #FFF; border-radius : 30px; padding : 2.5px 10px; font-size : 12px; white-space : nowrap; } .dki-authoring-element.reviewing .dki-authoring-content-wrapper, .dki-authoring-element-element.reviewing .dki-authoring-content-wrapper{ outline : 2px solid #f98520 ; } .dki-authoring-content-wrapper > .element-feedback .icon.comment{ background-position: 0 calc(-24px * 168); } .dki-authoring-content-wrapper > .element-feedback .icon.accessibility{ background-position: 0 calc(-24px * 169); } html.toggle-review-inline-comments:not(.onStage) .dki-authoring-element.has-review-note > .dki-authoring-content-wrapper > .element-feedback .icon.comment, html.toggle-review-inline-comments:not(.onStage) .dki-authoring-element-element.has-review-note > .dki-authoring-content-wrapper > .element-feedback .icon.comment, html.toggle-review-inline-comments:not(.onStage) .dki-authoring-element.show-review-context > .dki-authoring-content-wrapper > .element-feedback > *, html.toggle-review-inline-comments:not(.onStage) .dki-authoring-element-element.show-review-context > .dki-authoring-content-wrapper > .element-feedback > *, html.toggle-review-inline-comments:not(.onStage) .dki-authoring-element.reviewing > .dki-authoring-content-wrapper > .element-feedback > *, html.toggle-review-inline-comments:not(.onStage) .dki-authoring-element-element.reviewing > .dki-authoring-content-wrapper > .element-feedback > *, html.toggle-review-inline-comments:not(.onStage) .dki-authoring-content-wrapper > .element-feedback.showAll > *{ display: inline-block; margin: 0px 2px; } html.flow-authoring .dki-authoring-content-wrapper > .element-feedback, html.claro-authoring .dki-authoring-content-wrapper > .element-feedback, html.responsive .dki-authoring-content-wrapper > .element-feedback, html.not-responsive .dki-authoring-content-wrapper > .element-feedback{ left : auto; right : 0; top : 0; z-index : 10000; } html.flow-authoring .dki-authoring-element.review-bottom > .dki-authoring-content-wrapper > .element-feedback, html.flow-authoring .dki-authoring-element-element.review-bottom > .dki-authoring-content-wrapper > .element-feedback, html.responsive .dki-authoring-element.review-bottom > .dki-authoring-content-wrapper > .element-feedback, html.not-responsive .dki-authoring-element-element.review-bottom > .dki-authoring-content-wrapper > .element-feedback { top : auto; bottom : 0; } html.flow-authoring .dki-authoring-element.review-too-wide > .dki-authoring-content-wrapper > .element-feedback, html.flow-authoring .dki-authoring-element-element.review-too-wide > .dki-authoring-content-wrapper > .element-feedback, html.responsive .dki-authoring-element.review-too-wide > .dki-authoring-content-wrapper > .element-feedback, html.not-responsive .dki-authoring-element-element.review-too-wide > .dki-authoring-content-wrapper > .element-feedback { align-items: flex-end; -ms-flex-line-pack: end; flex-direction: column-reverse; -ms-flex-direction : column-reverse; } .dki-video-content-element { display:inline-block; } .jp-video{ max-height: inherit; } .jp-video-player{ max-width: 100% !important; width: 100% !important; max-height: 100% !important; } .jp-video-player video, .jp-video-player object{ object-fit: contain; max-width: 100% !important; width: 100% !important; height: 100% !important; } .dki-video-content-element{ overflow: hidden; } /* videos elements need to have height/width 0 if their poster image is showing*/ .jp-video-player img{ position: absolute; } .jp-video-player object{ min-height: 125px; } .popupContent { margin: 5px 0px; padding-bottom: 5px; line-height: 140%; } .popupContent img{ max-height: 100px; width: unset !important; } #glossaryPopup div.glossaryPopupBody, #glossaryPopup div.glossaryPopupBody div{ width : 100%; } #glossaryHoverDefinition { padding: 5px 5px; z-index:1; display:none; box-shadow: 5px 5px 10px -3px #333; -webkit-box-shadow: 5px 5px 10px -3px #333; -moz-box-shadow: 5px 5px 10px -3px #333; background-color: #F2F2F2; border: 1px solid #BFBFBF; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; position: absolute; color: #444; position: absolute; z-index: 1000 !important; box-shadow: 10px 10px 15px -5px #333; -webkit-box-shadow: 10px 10px 15px -5px #333; -moz-box-shadow: 10px 10px 15px -5px #333; } #glossaryPopup { width: 250px; } #glossaryPopupPronunciation div.jp-controls-holder { height: auto !important; } .dki-glossary-link { border-radius: 5px; } .dki-glossary-link.over{ background: #f5ee13; /* Old browsers */ background: -moz-linear-gradient(top, #f5ee13 0%, #eccf03 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5ee13), color-stop(100%,#eccf03)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f5ee13 0%,#eccf03 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f5ee13 0%,#eccf03 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f5ee13 0%,#eccf03 100%); /* IE10+ */ background: linear-gradient(to bottom, #f5ee13 0%,#eccf03 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5ee13', endColorstr='#eccf03',GradientType=0 ); /* IE6-9 */ } .dki-glossary-link.untranslated.over{ background: #e55457; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2U1NTQ1NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZDk3OWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #e55457 1%, #ed979e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#e55457), color-stop(100%,#ed979e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e55457 1%,#ed979e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e55457 1%,#ed979e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e55457 1%,#ed979e 100%); /* IE10+ */ background: linear-gradient(to bottom, #e55457 1%,#ed979e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e55457', endColorstr='#ed979e',GradientType=0 ); /* IE6-8 */ } #glossaryPopupPronunciation{ float: right; width: 25px; height:25px; vertical-align: middle; margin-left: 10px; } #glossaryPopupTerm{ font-size: 16px; display: inline-block; font-weight: bold; vertical-align: middle; margin-top:5px; } #glossaryPopupDefinitionContainer{ font-size: 14px; display: inline-block; line-height: 15px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: auto; max-height: 150px; width:100%; margin: 5px 0px; } html.on-device #glossaryPopupDefinitionContainer:before{ content: ''; display: block; min-height: 101%; width: 1px; float: left; margin-left: -1px; } div.sectionBreak { margin-left: 10px; width: 90% !important; border:0; border-top: 1px solid #ccc; } #glosscon div.sectionBreak.fillWidth { margin-left: -10px; width: calc(100% + 20px)!important; margin-top: 10px; margin-bottom: 10px; } #glossaryBrowseContainer { margin: 0 auto; width: 770px; height: 500px; top: 50px; left: 50%; margin-left: -40%; } #glossaryBrowserContainer input.searchInput { width: 140px; font-size: 12px; border: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; float:left; background-color:white; } .windowContainer div.loading, #glossaryPopup.loading, .viewContainer div.loading{ opacity:0; filter: alpha(opacity = 0); width: 0px; height: 0px; overflow: hidden; } #glossaryBrowserContainer .browserList ul li { padding: 3px 0px 3px 10px; cursor:pointer; margin: 5px 0px; list-style-type : none; } #back { cursor: pointer; } #termUl { margin-left:0px; } #termDetails #term { font-weight: bold; margin: 5px 10px 7px 0px; font-size:16px; } #termDetails div.detailsContent #definition, #termDetails div.detailsContent #attribution { width: 100%; margin: 7px 0px; } #termDetails #term, #termDetails #glossaryManagePronunciation { float:left; } #viewBrowserLink { background-image:url(../images/glossaryIcon.png); background-repeat: no-repeat; background-position:5px center; margin: 1px; width:25px; height:25px; margin: 6px 1px 1px 6px; display:block; } #viewBrowserLink:hover { margin: 5px 0px 0px 5px; border: 1px solid #333; border-radius: 3px; } .online div.detailsContent, .tablet div.detailsContent{ } div.windowContainer.phone .panel, div.viewContainer.phone .panel { width: 254px !important; height: 100%; } .phone #glossaryContentContainer { width: 548px; top:70px; } div.windowContainer.phone, div.viewContainer.phone { width: 275px; height: 450px; max-height: 95%; font-size: 20px; top: 10px; } .phone #glossaryPopup { width: 180px; } .phone div.windowContainer, .phone div.viewContainer { margin-left: 15px; } .phone div.detailsContent { width: 100%; } html.on-device div.detailsContent{ float: right; } .phone div.browserList { border: none; } .phone div.windowContainer div.searchContainer, .phone div.viewContainer div.searchContainer { padding: 6px 0px 0px 10px; } .phone #glossaryBrowserContainer div.searchContainer input, { width: 150px; margin: 0px; } .phone #browserHeader { margin-bottom: 10px; } .phone div.windowContainer div.sectionBreak, .phone div.viewContainer div.sectionBreak { width: 246px !important; } .navHidden div.windowContainer, .navHidden div.viewContainer { top: 10px; } #termUl li { margin-left: 15px; } #termUl li.mobile { line-height: 34px; padding: 0px 0px 0px 0px; } #termUl li.mobile span.termIcon { width: 34px; height: 34px; display: inline-block; vertical-align: bottom; background-image: url(../images/assetmanager_sprites.png); background-repeat: no-repeat; background-position: 0px -400px; margin: 0px 5px; } #glossaryBrowserContainer .windowContainer div.searchContainer, #glossaryBrowserContainer .viewContainer div.searchContainer { float: right; } .dki-glossary-list-term{ cursor: pointer; list-style:none; } .popupContent, .dki-glossary-list-term, .popup.modal .modal-content .modal-header h1 { white-space: normal; overflow-wrap: break-word; } .tooltipster-content .dki-glossary-term-tooltip{ padding-left: 10px; padding-right: 10px; } .tooltipster-content .dki-glossary-term-content{ padding: 10px; } .tooltipster-content .dki-glossary-term-content-header-container{ } .dki-glossary-term-content-header .jPlayerAudioSimple{ margin-left: 5px; } .dki-glossary-term-content-header .jPlayerAudioSimple, .dki-glossary-term-content-header .dki-glossary-term-tooltip-close{ position: relative; display: inline-block; cursor: pointer; line-height: 100%; vertical-align: middle; } .dki-glossary-term-content-header .dki-glossary-term-tooltip-close{ float: right; font-size: 18px; font-weight: 200; padding-left: 10px; padding-right: 10px; } .tooltipster-base.glossary-tooltip{ z-index: 99999 !important; max-width: 340px; } .dki-glossary-term-content-header .jPlayerAudioSimple:before{ content: '\f028'; font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: inherit; text-align: center; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; } .glossary-title-container, .glossary-definition-container{ margin-bottom: 10px; display: inline-flex; } .glossary-definition-container{ flex-grow: 1; text-align: left; overflow: auto; } .glossary-source-container{ margin: 10px 0px; padding-bottom: 5px; line-height: 140%; text-align:left; } .glossary-definition-text{ width:100%; } .glossary-definition-text img{ width: unset !important; max-height: 75%; } .general-container-text-content{ display:block !important; } .general-container-text-content img{ width: unset !important; max-height: 75%; } @media (max-width: 768px) { .tooltipster-base.glossary-tooltip { max-width: 100%; z-index: 999999; top: 0px !important; left: 0px !important; right: 0px !important; bottom: 0px !important; width: 100% !important; } }/* @group Buttons Library Styles ----------------------------------------------- */ /* DEFAULT STYLING */ .dki-authoring-button { font-weight: bold; font-size: 13px !important; color: white; text-decoration: none; text-shadow: 0 1px 0 rgba(0,0,0,.4); display: block; display: inline-block; text-align: center; vertical-align: middle; border: none; -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,.25); -moz-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,.25); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,.25); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; } .dki-authoring-button.rounded{ -moz-border-radius: 8px; border-radius: 8px; } .dki-authoring-button.circle{ -moz-border-radius: 50%; border-radius: 50%; } html.no-touch .dki-authoring-button:hover { text-decoration: none; cursor: pointer; } .dki-authoring-button:hover, .dki-authoring-button:focus { color: white; } .dki-authoring-button:active { -webkit-box-shadow: inset 0 100% 0 0 rgba(0,0,0,0.2); } /* @group Colors ----------------------------------------------- */ /* RED */ .dki-authoring-button.red { background: #c64249; background: #c64249 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #c64249 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.red:hover { background: #c64249 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #c64249 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.red:active { background: #c64249 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #c64249 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* ORANGE */ .dki-authoring-button.orange { background: #d36221; background: #d36221 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #d36221 -moz-linear-gradient( top, rgba(255,255,255,.4),rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.orange:hover { background: #d36221 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #d36221 -moz-linear-gradient( top, rgba(255,255,255,.55),rgba(0,0,0,0)); } .dki-authoring-button.orange:active { background: #d36221 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #d36221 -moz-linear-gradient( top,rgba(0,0,0,.1),rgba(0,0,0,0)); } /* WOODY */ .dki-authoring-button.woody { background: #d99734; background: #d99734 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #d99734 -moz-linear-gradient( top, rgba(255,255,255,.4),rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.woody:hover { background: #d99734 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #d99734 -moz-linear-gradient( top, rgba(255,255,255,.55),rgba(0,0,0,0)); } .dki-authoring-button.woody:active { background: #d99734 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #d99734 -moz-linear-gradient( top,rgba(0,0,0,.1),rgba(0,0,0,0)); } /* HOT PINK */ .dki-authoring-button.pink { background: #d93880; background: #d93880 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #d93880 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.pink:hover { background: #d93880; background: #d93880 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #d93880 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.pink:active { background: #d93880 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #d93880 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* GRAPHITE */ .dki-authoring-button.graphite { background: #6f7f8d; background: #6f7f8d -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #6f7f8d -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.graphite:hover { background: #6f7f8d -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #6f7f8d -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.graphite:active { background: #6f7f8d -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #6f7f8d -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* TURQUOISE */ .dki-authoring-button.turquoise { background: #3ab29e; background: #3ab29e -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #3ab29e -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.turquoise:hover { background: #3ab29e -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #3ab29e -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.turquoise:active { background: #3ab29e -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #3ab29e -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* EMERALD */ .dki-authoring-button.emerald { background: #4fbb6c; background: #4fbb6c -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #4fbb6c -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.emerald:hover { background: #4fbb6c -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #4fbb6c -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.emerald:active { background: #4fbb6c -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #4fbb6c -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* GRASS */ .dki-authoring-button.grass { background: #475311; background: #475311 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #475311 -moz-linear-gradient( top, rgba(255,255,255,.4),rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.grass:hover { background: #475311 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #475311 -moz-linear-gradient( top, rgba(255,255,255,.55),rgba(0,0,0,0)); } .dki-authoring-button.grass:active { background: #475311 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #475311 -moz-linear-gradient( top,rgba(0,0,0,.1),rgba(0,0,0,0)); } /* BLUE */ .dki-authoring-button.blue { background: #3d67a6; background: #3d67a6 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #3d67a6 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.blue:hover { background: #3d67a6 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #3d67a6 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.blue:active { background: #3d67a6 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #3d67a6 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* ROYAL BLUE */ .dki-authoring-button.royalblue { background: #4099c5; background: #4099c5 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #4099c5 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.royalblue:hover { background: #4099c5 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #4099c5 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.royalblue:active { background: #4099c5 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #4099c5 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* BROWN */ .dki-authoring-button.brown { background: #c57c40; background: #c57c40 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #c57c40 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.brown:hover { background: #c57c40 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #c57c40 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.brown:active { background: #c57c40 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #c57c40 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* DARK BROWN */ .dki-authoring-button.darkbrown { background: #532611; background: #532611 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #532611 -moz-linear-gradient( top, rgba(255,255,255,.4),rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.darkbrown:hover { background: #532611 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #532611 -moz-linear-gradient( top, rgba(255,255,255,.55),rgba(0,0,0,0)); } .dki-authoring-button.darkbrown:active { background: #532611 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #532611 -moz-linear-gradient( top,rgba(0,0,0,.1),rgba(0,0,0,0)); } /* MINT */ .dki-authoring-button.mint { background: #a5cb3a; background: #a5cb3a -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #a5cb3a -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.mint:hover { background: #a5cb3a -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #a5cb3a -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.mint:active { background: #a5cb3a -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #a5cb3a -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* GRAPE */ .dki-authoring-button.grape { background: #8d6b85; background: #8d6b85 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #8d6b85 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.grape:hover { background: #8d6b85 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #8d6b85 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.grape:active { background: #8d6b85 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #8d6b85 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* MAGENTA */ .dki-authoring-button.magenta { background: #c642a2; background: #c642a2 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #c642a2 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.magenta:hover { background: #c642a2 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #c642a2 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.magenta:active { background: #c642a2 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #c642a2 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* PURPLE */ .dki-authoring-button.purple { background: #5c3bbc; background: #5c3bbc -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #5c3bbc -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.purple:hover { background: #5c3bbc -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #5c3bbc -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.purple:active { background: #5c3bbc -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #5c3bbc -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* DARK GREY */ .dki-authoring-button.darkgrey { background: #707070; background: #707070 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #707070 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.darkgrey:hover { background: #707070 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #707070 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.darkgrey:active { background: #707070 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #707070 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* SILVER */ .dki-authoring-button.silver { background: #c4c4c4; background: #c4c4c4 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #c4c4c4 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.silver:hover { background: #c4c4c4 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #c4c4c4 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.silver:active { background: #c4c4c4 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #c4c4c4 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* GOLDEN */ .dki-authoring-button.golden { background: #c5ab43; background: #c5ab43 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #c5ab43 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.golden:hover { background: #c5ab43 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #c5ab43 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.golden:active { background: #c5ab43 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #c5ab43 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* BLACK */ .dki-authoring-button.black { background: #1a1a1a; background: #1a1a1a -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #1a1a1a -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.black:hover { background: #1a1a1a -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #1a1a1a -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.black:active { background: #1a1a1a -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #1a1a1a -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* WHITE */ .dki-authoring-button.white { color: #1a1a1a; text-shadow: 0 0 1px white; background: #f9f9f9; background: #f9f9f9 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.2)),to(rgba(0,0,0,0))); background: #f9f9f9 -moz-linear-gradient( top, rgba(255,255,255,.4), rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.white:hover { background: #f9f9f9 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #f9f9f9 -moz-linear-gradient( top, rgba(255,255,255,.55), rgba(0,0,0,0)); } .dki-authoring-button.white:active { background: #f9f9f9 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #f9f9f9 -moz-linear-gradient( top, rgba(0,0,0,.1), rgba(0,0,0,0)); } /* CYAN */ .dki-authoring-button.cyan { background: #5acbe1; background: #5acbe1 -webkit-gradient( linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)),to(rgba(0,0,0,0))); background: #5acbe1 -moz-linear-gradient( top, rgba(255,255,255,.4),rgba(0,0,0,0)); } html.no-touch .dki-authoring-button.cyan:hover { background: #5acbe1 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.55)), to(rgba(0,0,0,0))); background: #5acbe1 -moz-linear-gradient( top, rgba(255,255,255,.55),rgba(0,0,0,0)); } .dki-authoring-button.cyan:active { background: #5acbe1 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.3)), to(rgba(0,0,0,0))); background: #5acbe1 -moz-linear-gradient( top,rgba(0,0,0,.1),rgba(0,0,0,0)); } /* @end */ /* @end */ #headerContainer, #footerContainer, #westPanel, #feedbackTab, #feedbackPanel, #moreOverlay { display:none; } ul.jsonSuggest { position: absolute; background-color: #FFFFFF; border-bottom:1px solid #BBB; border-left : 1px solid #BBB; border-right: 1px solid #BBB; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; margin: 0px; padding-right:10px; } ul.jsonSuggest li { padding: 5px 0px 5px 10px; list-style: none; cursor: pointer; margin: 0px; } ul.jsonSuggest li.resultHover { background-color: #F3F3F3; } #resourceBrowserContainer { margin: 0 auto; width: 770px; height: 500px; top: 50px; left: 50%; margin-left: -40%; } #resourceView { display:none; width: 555px; padding-top: 10px; margin-top: 15px; height: calc(97% - 15px); } .phone #resourceContentContainer { top: 60px; } #resourceWindowContainer input.searchInput { width: 140px; font-size: 12px; border: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; float:left; background-color:white; } .phone #resourceWindowContainer div.searchContainer input { width: 150px; margin: 0px; } #resourceWindowContainer .backButton{ background-size: contain; } #resourceWindowContainer div.searchContainer{ padding-bottom: 15px; } #resourceWindowContainer .resultList, #resourceWindowContainer .resultList .subList{ padding-left: 0; } .viewContainer div.sectionBreak { margin: 5px 0px; } #resourceContent { margin: 0 auto; } #resourceContent #imageContent, #resourceContent #imageContent iframe { height: 100%; width: 100%; } #resourceContent { position: relative; top: 0px; left: 0px; overflow: hidden; } .mediaContainer img { width:100%; height:100%; } #resourceContent div.jp-audio div.jp-type-single div.jp-time-holder { left: 60px; width: 158px; display:block; top: 30px; } #resourceContent div.jp-interface { display:none; } #resourceContent div.jp-audio div.jp-type-single div.jp-progress { width: 165px; } #resourceTitle { font-weight:bold; font-size: 14px; padding-bottom: 10px; overflow:hidden; text-overflow: ellipsis; } #resourceTitle a:link {color: inherit; text-decoration: none; display:inline-block; margin-top: 5px;} #resourceTitle a:active {color: inherit;} #resourceTitle a:visited {color: inherit;} #resourceTitle a:hover {color: inherit;} #resourceTitle a span.downloadIcon { background-image: url(../images/download.png); background-repeat: no-repeat; width: 16px; height: 16px; display:inline-block; margin: 0px 5px; vertical-align:middle; } #resourceTitle a.link:link, #resourceTitle a.link:active, #resourceTitle a.link:visited, #resourceTitle a.link:hover { color: blue; text-decoration: underline; } #resourceContent :first-child { display:block; } #resourceList #list { font-size:14px; } #resourceList .Resource_type_label { text-transform: capitalize; } #resourceList #list li p { display:inline-block; } #resourceContent div.docImg { width: 100px; height: 100px; background-repeat: no-repeat; background-image : url(../images/docThumb.png); } #resourceContent div.docImg.doc, #resourceContent div.docImg.docx { background-image : url(../images/docThumb.png); } #resourceContent div.docImg.pdf{ background-image : url(../images/pdfThumb.png); } #resourceContent div.docImg.ppt, #resourceContent div.docImg.pptx { background-image : url(../images/pptThumb.png); } #resourceContent div.docImg.xls, #resourceContent div.docImg.xlsx { background-image : url(../images/xlsThumb.png); } #resourceContent div.docImg.rtf{ background-image : url(../images/rtfThumb.png); } #resourceContent div.docImg.key, #resourceContent div.docImg.keynote { background-image : url(../images/keynoteThumb.png); } #resourceContent div.docImg.pages{ background-image : url(../images/pagesThumb.png); } #resourceContent div.docImg.numbers { background-image : url(../images/numbersThumb.png); } #resourceContent .resourceLinkLabel{ cursor: pointer; } .phone #resourceTitle { font-size: 22px; } .phone #resourceView { width: 254px; } .phone #resourceContentContainer { width:600px; } #resourceList #list li.subItem.mobile { width: 240px; line-height: 22px; cursor: default; } #resourceList #list li.mobile span.linkIcon { width:34px; height:34px; background-position: 15px 23px; } #resourceList #list li.subItem.mobile span.icon{ width:34px; height:34px; cursor: pointer; } #resourceList #list li.subItem.mobile span.icon.link { background-position:0px -332px; } #resourceList #list li.subItem.mobile span.icon.image { background-position:0px -264px; } #resourceList #list li.subItem.mobile span.icon.flash { background-position:0px -230px; } #resourceList #list li.subItem.mobile span.icon.video { background-position:0px -196px; } #resourceList #list li.subItem.mobile span.icon.audio { background-position:0px -162px; } #resourceList #list li.subItem.mobile span.icon.html { background-position:0px -366px; } #resourceList #list li.subItem.mobile span.icon.document { background-position:0px -128px; } /*new flow player list styles*/ .dki-resource-list .list-group-item-heading{ text-transform: capitalize; } .dki-resource-list .dki-resource-list-item.fancy-box-item, .dki-resource-list .dki-resource-pages .dki-resource-list-item{ cursor: pointer; } .dki-resource-list .dki-resource-list-item > a{ word-break:break-word; } .dki-resource-list .dki-resource-list-item .dki-resource-asset-list-item-download{ float: right; padding: 5px; position: relative; top: -5px; right: -5px; cursor: pointer; } .dki-resource-list .dki-resource-list-inline-media{ display: none; } .dki-resource-list .list-group-item-text{ word-break : break-word; } .fancybox-inner .dki-resource-list-inline-media .jp-over-max{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .fancybox-inner .dki-resource-list-inline-media .jp-over-max .jp-type-single{ height: 100%; } .fancybox-inner .dki-resource-list-inline-media .vidPlayer{ margin: auto; } .dki-resource-list .list-group-item{ margin: 2px; }#referencePopup { width: 250px; background-color: #F2F2F2; border: 1px solid #BFBFBF; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; position: absolute; color: #444; position: absolute; z-index: 99995; /* needs to be higher than the fancybox slide */ box-shadow: 10px 10px 15px -5px #333; -webkit-box-shadow: 10px 10px 15px -5px #333; -moz-box-shadow: 10px 10px 15px -5px #333; } #referencePopup .popupContent { width: 90% !important; padding-left:5%; padding-top: 5px; line-height: 1em; overflow-x:auto; } .rtl #referencePopup .popupContent{ padding-left: 0; padding-right: 5%; } #referencePopup span.refNum, #glossaryPopup span.refNum { font-weight:bold; text-decoration: underline; font-size: 1.1em; } #referencePopup #viewBibliographyLink { background-image: url(../images/referenceIcon.png); background-repeat: no-repeat; background-position: 5px center; margin: 1px; width: 25px; height: 25px; margin: 3px 1px 3px 10px; display: block; cursor: pointer; float:left; } #referencePopup div.nav { display: block; float: right; margin: 3px 5px 3px 10px; height: 26px; } #referencePopup div.nav span{ display:inline-block; } #referencePopup div.nav span.counter{ margin: 0px 3px; vertical-align:top; line-height: 26px; } #referencePopup div.nav span.citationNav{ cursor: pointer; width:26px; height:26px; background-image: url(../images/reference_sprites.png); background-repeat: no-repeat; } #referencePopup div.nav span.previous{background-position:0px 0px;} #referencePopup div.nav span.next{background-position: -26px 0px;} #referencePopup div.nav span.previous.disable{background-position:0px -26px;} #referencePopup div.nav span.next.disable{background-position: -26px -26px;} #referencePopup #viewBibliographyLink:hover { margin: 2px 0px 2px 9px; border: 1px solid #333; border-radius: 3px; } #referencePopup .referenceCloseButton{ background-image: url(../images/glossaryClose.png); background-repeat: no-repeat; background-position: top right; width: 26px; height: 26px; position: absolute; top: -13px; right: -13px; cursor: pointer; } #bibliographyContainer #bibliographyContentContainer ul { list-style-type: none; font-size: 1em; width: 95%; margin : 0 auto; } #bibliographyContainer #bibliographyContentContainer li { margin-top: 10px; line-height: 1.2em; border-bottom: 1px solid #AAA; padding-bottom: 10px; } #bibliographyContainer #bibliographyContentContainer li span.refIndex { font-weight:bold; } #bibliographyContainer #bibliographyContentContainer { overflow-y: scroll; width:100%; height: auto; position:absolute; top:24px; bottom:3px; } .responsive #bibliographyContainer { height: auto; min-height: 300px; z-index: 99995; /* needs to be higher than the fancybox slide */ } #bibliographyContainer { width: 90%; max-width: 900px; max-height: 500px; left: auto; } #searchBrowserContainer input.searchInput { font-size: 1.42em; } #searchBrowserContainer div.searchContainer { padding: 14px 0px 24px 10px; width: 100%; margin: 0; } #searchBrowserContainer div.panel.details { background-color: white; visibility: visible; overflow-x:hidden; overflow-y: auto; padding: 0px; } #searchBrowserContainer .listPanel .imageThumb{ float: left; margin: 7.5px; width :110px; height:110px; background-size: contain; padding:5px; background-origin:content-box; background-repeat: no-repeat; cursor: pointer; background-position:center; border: 1px solid #868686; background-color:#EBEBEB; } #searchBrowserContainer .browserContentContainer { line-height: 1; font-size: 14px; position:absolute; top:30px; bottom: 0px; width: 100%; } #searchBrowserContainer .panel.details { position:absolute; left:0px; right:0px; top:116px; width:auto; bottom: 0px; height: calc(100% - 156px); box-shadow: none; border-radius: 0; } #searchBrowserContainer .panel.details.sequentialBlock { top:175px; height: calc(100% - 225px); } #searchBrowserContainer .resultList{ width: 100%; } /*---------Item Display----------*/ #searchBrowserContainer .itemContainer{ min-height: 85px; max-height: 100px; padding: 10px 0px 10px 20px; width: 100%; border-bottom: 1px solid #DDD; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor:pointer; color: #ff5400; } #searchBrowserContainer .itemContainer:focus{ outline-offset: -1px; } #searchBrowserContainer .itemContainer .chevronContainer { display: none; } #searchBrowserContainer .itemContainer .iconContainer { float:left; height:100%; } #searchBrowserContainer .listPanel .itemContainer:first-child, #searchBrowserContainer .links .itemContainer:first-child { border-top: 1px solid #DDD; } #searchBrowserContainer .listPanel .itemContainer:last-child, #searchBrowserContainer .links .itemContainer:last-child { border-bottom: 1px solid #DDD; } #searchBrowserContainer .itemContainer .metaContainer h3, #searchBrowserContainer .itemContainer .metaContainer p{ display: block; overflow:hidden; text-overflow: ellipsis; } #searchBrowserContainer h3{ font-weight: 600; margin-bottom: 5px; font-size:inherit; font-size: 1.14em; } #searchBrowserContainer p{ font-size: 14px; color: #888; } #searchBrowserContainer .itemContainer .metaContainer h3 { white-space: nowrap; padding: 2px 0px; margin-top:4px; } #searchBrowserContainer .itemContainer p{ max-height: 33px; min-height: 17px; margin-bottom: 0; /* Support for multiline ellipsis in webit only */ display: -webkit-box !important; -webkit-line-clamp : 2; -webkit-box-orient: vertical; line-height: 1.2; } #searchBrowserContainer .itemContainer .metaContainer{ margin: 0 auto; width: auto; } #searchBrowserContainer .sequential { display: none; color: #333; font-weight:bold; } #searchBrowserContainer .sequential h3 { font-size: inherit; display:inline-block; } #searchBrowserContainer .sequential p { font-weight: normal; } #searchBrowserContainer .browserList { width:100%; padding-top:0px; box-sizing:border-box; } /*---------Right Panel---------*/ #searchBrowserContainer div.panel.details.list .switchContainer{ left : 0px; -webkit-transition: 500ms ease-in-out; -moz-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; } #searchBrowserContainer div.panel.details.properties .switchContainer{ left : -100%; -webkit-transition: 500ms ease-in-out; -moz-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; } #searchBrowserContainer div.panel.details.properties h3 { height: auto; } #searchBrowserContainer div.panel.details .switchContainer{ position:relative; display:block; } #searchBrowserContainer div.panel.details .switchContainer > div{ } #searchBrowserContainer div.panel.details .switchContainer div.propertiesPanel { padding: 0px; position:relative; } #searchBrowserContainer div.panel.details div.listPanel { } /*---------Details Panel----------*/ #searchBrowserContainer .backNav { width: 100%; padding: 5px 10px; background-color: #DDD; cursor: pointer; box-sizing: border-box; display: none; } #searchBrowserContainer .backNav span{ display:inline-block; vertical-align: middle; } #searchBrowserContainer .backNav .backChevron{ margin-right: 5px; } #searchBrowserContainer div.panel.details div.propertiesContent { width: 100%; box-sizing: border-box; } #searchBrowserContainer div.panel.details .overflowContainer { overflow-y: auto; overflow-x: hidden; position:absolute; top:30px; bottom:0px; width: 100%; } #searchBrowserContainer div.panel.details div.propertiesContent .propertiesMeta { margin: 15px 0px; padding: 0px 10px; } #searchBrowserContainer div.panel.details div.propertiesContent .propertiesMeta h3 { text-align:center; } #searchBrowserContainer div.panel.details div.propertiesContent .propertiesMeta p { line-height: 1.3; margin-top: 20px; } #searchBrowserContainer div.panel.details div.linksContainer { margin-top: 30px; width: 100%; padding: 10px 20px; box-sizing: border-box; border-top: 1px solid #E1E1E1; background-color: #FAFAFA; } #searchBrowserContainer div.panel.details .linksContainer .linksTitle { margin-bottom: 15px; } #searchBrowserContainer div.panel.details div.preview { width: 100%; max-height: 200px; max-width: 350px; margin: 15px auto 15px auto; overflow:hidden; } #searchBrowserContainer div.panel.details .extraLinks { padding-top: 5px; margin-top: 20px; } #searchBrowserContainer div.panel.details .widgetPlaceholder { width:146px; height: 96px; background-image: url(../images/search/widgetPlaceholder.png); background-position:center; background-size: contain; background-repeat:no-repeat; cursor:pointer; margin: 0 auto; } /* Icons */ #searchBrowserContainer .iconContainer { height: 100%; width:30px; } #results .searchItem span.icon { margin-right: 10px; } #searchBrowserContainer .iconContainer { width: 30px; } #searchBrowserContainer .itemContainer .chevronContainer span { float:right; margin-top: 12px; } #searchBrowserContainer span.icon { background-image : url(../images/search/search-sprite.png); width: 24px; height: 24px; background-repeat: no-repeat; display:inline-block; } #searchBrowserContainer span.icon.top { background-position:0 -24px; } #searchBrowserContainer span.icon.image { background-position:0 -48px; } #searchBrowserContainer span.icon.video { background-position:0 -72px; } #searchBrowserContainer span.icon.audio { background-position:0 -96px; } #searchBrowserContainer span.icon.alert { background-position: 0 -144px; margin-bottom:0; padding: 0; } #searchBrowserContainer span.icon.glossary{ background-position:0 -168px; } #searchBrowserContainer span.icon.reference{ background-position:0 -192px; } #searchBrowserContainer span.icon.page { background-position:0 -216px; } #searchBrowserContainer span.icon.chevron { background-position: 0 -240px; } #searchBrowserContainer span.icon.backChevron { background-position: 0 -264px; } #searchBrowserContainer span.icon.jump { background-position: 0 -289px; height: 20px; } #searchBrowserContainer span.icon.objects { background-position: 0 -312px; } #searchBrowserContainer span.icon.text{ background-position:0 -336px; } #searchBrowserContainer span.icon.richMedia { background-position: 0 -360px; } #searchBrowserContainer span.searchPageJump { color: #333; text-decoration: underline; cursor: pointer; } #searchBrowserContainer #resultList{ padding-left: 0px; padding-right: 0px; border: none; } /*--------Filters--------*/ #results { padding-left:0px; background-color: white; border-bottom: 1px solid #efefef; margin-bottom: 0px; padding-bottom: 3px; } #results span.icon { } #results li{ color: #676767; font-weight: 600; -webkit-font-smoothing: antialiased; display:none; float: left; position: relative; } #results li.selected{ background-color: transparent; } #results li.selected:after{ content: ' '; border-bottom: 2px solid #737373; position: absolute; bottom: 0px; left: 8px; right: 10px; } #results .searchItem { padding: 5px 16px 5px 15px; cursor: pointer; } #results .division { margin: 10px 0px; border-bottom: 1px solid #DDD; } #results .resCount { display: none; } #results .filterTitle { max-width:160px; display:inline-block; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; vertical-align:top; margin-top:5px; line-height:18px; } /*-------- Mobile Stuff --------*/ #searchBrowserContainer.phone .chevronContainer { width:50px; } #searchBrowserContainer.phone .listPanel { padding:0px !important; } #searchBrowserContainer.phone .browserList { box-sizing:border-box; height: 100%; } #searchBrowserContainer.phone .itemContainer p{ max-height: 42px; /* Support for multiline ellipsis in webit only */ display: -webkit-box !important; -webkit-line-clamp : 3; -webkit-box-orient: vertical; } .listPanel .backNav { display:none; } #searchBrowserContainer .browserHeader .headerTitle{ display: none; } #searchBrowserContainer .browserHeader{ background-color: #52545d; height: 40px; } #searchBrowserContainer .searchtitlelabel{ display: inline-block; color: white; font-size: 20px; display: table-cell; width: 90px; } #searchBrowserContainer .searchInput{ background-color: white; width: 100%; display: table-cell; padding-left: 10px; border-radius: 3px; height: 40px; } #searchBrowserContainer .searchContainer{ display: inline-table !important; padding-right: 15px !important; background-color: #52545d; } #searchBrowserContainer .searchContainer i{ position: absolute; right: 25px; top: 27px; } #course_passing_status { text-align: center; padding:5px 0px; margin-bottom: 5px; } #course_passing_status.pass { color: white; background-color: #2A6313; } #course_passing_status.fail { color: white; background-color: #7f0000; } /* Endscreens */ .endScreen h2 { text-align:center; font-size:18px; margin-bottom:5px; } .endScreenWrapper{ height: 100%; overflow-y: auto; } .endScreen.pre .endMod_revisitLink, .endScreen.pre .endMod_testingLink, .endScreen.content .endMod_reviewLink { display: none; } .endScreen #endCourse_actions span { display: none; } .endScreen.showCertificate #endCourse_actions #endCourse_certificateLink, .endScreen.showBibliography #endCourse_actions #endCourse_bibliographyLink, .endScreen.showRevisitContent #endCourse_actions .endCourse_revisitLink, .endScreen.showTakeTest #endCourse_actions #endCourse_takeTestLink, .endScreen #endCourse_actions #endCourse_exitLink{ display: inline-block; } .endScreen #endCourse_testing .dki-scroller { max-height: 350px; } .endScreen.showCertificate #endCourse_testing .dki-scroller { max-height: 320px; } .no-csstransitions div.endscreen div.showCertificate #endCourse_testing .dki-scroller { height: 335px; } .no-csstransitions div.endscreen #endCourse_testing .dki-scroller { height: 365px; } .endScreen .section { display:block; width:100%; margin-bottom:10px; } .endScreen p { margin:0px; } .endScreen h1 { text-align:center; } .endScreen .status, .endScreen #testing ul { margin-left: 0; padding-bottom:8px; } .endScreen #testing li { list-style:none; border-bottom:1px solid black; padding:8px 0px 0px 0px; width:100%; } .endScreen #testing b { padding-right: 1em; } .endScreen #testing li a { cursor:pointer; } .endScreen .actions ul { margin:0px; width:100%; } .endScreen .actions li { margin:0px; list-style:none; } .endScreen #endMod_learningStatus_content, .endScreen .endMod_score_content, .endScreen #endCourse_learningStatuscontent, .endScreen #endCourse_testingLineContent{ text-align: center; width: 100%; } .endScreen #endMod_learningStatus_content .title-text, .endScreen .endMod_score_content .title-text, .endScreen #endCourse_learningStatuscontent .title-text, .endScreen #endCourse_testingLineContent .title-text{ margin: 0; } .endScreen #endMod_header, .endScreen #endCourse_header{ display: inline-block; background-repeat: no-repeat; background-size: cover; } .endScreen #endMod_status, .endScreen #endMod_testScoreDetails, .endScreen #endCourse_status{ padding-top: 45px; } .endScreen #endMod_testScoreDetails .objectTestItem{ margin-bottom: 30px; } .endScreen #endMod_testScoreDetails .objectTestItem .objectTestItemContentWrapper, .endScreen #endCourse_testing .moduleitem .moduleTestItemContentWrapper{ padding: 0 15px; } .endScreen #endCourse_testing .moduleitem .dki-modAttempts{ padding: 20px 0 10px 0; } .endScreen #endMod_testScoreDetails .objectTestScore, .endScreen #endMod_testScoreDetails .objectTestPoints{ display: block; } .endMod_status > .panel-body{ padding-bottom: 0px; } .endScreen #endMod_actions, .endScreen #endMod_status > div, .endScreen #endMod_testScoreDetails, .endScreen #endCourse_actions, .endScreen #endCourse_status, .endScreen #endCourse_testing{ text-align: center; } .endScreen .centerBlock{ display: inline-block; float: none; vertical-align: top; } .endScreen .actions a { border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; line-height:40px; margin-bottom: 10px; display:block; text-align:center; padding: 0; cursor:pointer; overflow: hidden; text-overflow: ellipsis; } html.rtl .endScreen .actions a { margin-left: auto; margin-right: 5%; } .endScreen .actions a.disabled { -moz-opacity: 0.3; opacity: 0.3; filter:alpha(opacity=30); } .endMod_scoreLine { display:none; } .endMod_scoreLine.visible { display:inline-block; } .modTestName { display:block; font-weight:bold; padding-left:5px; } .modTestScore { margin-right:20px; padding-left:5px; } .pass { color: #2a6313; } .fail { color: #7F0000; } .passing_score_container { display: none; } .passing_score_container.visible { display: inline-block; } body.phone .passing_score_container.visible { display: block; position: static; } /** * New End screens */ #endCourse_status .dki-lineitem{ margin: 5px 2% 0px 0px; } #endCourse_status .dki-lineitem.moduleitem{ margin: 0px; } .dki-section-panel .dki-lineitem.showPassing { padding-top: 25px; } .dki-modTitle{ width: 100%; } .dki-section-panel .dki-lineitem .dki-modTitle{ display : block; margin-bottom : 5px; margin-right : 10px; } .dki-section-panel .dki-lineitem .dki-modTitleLabel{ font-weight : bold; } .dki-section-panel .dki-lineitem .dki-modTitleLabel.mod-jump{ cursor : pointer; } .dki-section-panel .dki-lineitem .dki-modTitleLabel.mod-jump:hover{ text-decoration: underline; } .dki-section-panel .dki-lineitem .dki-modScore{ margin-left : 20px; margin-right : 20px; display : inline-block; } #testingLine .dki-lineitem .dki-modScore{ margin-left: 0px; } #endCourse_testing .dki-lineitem .dki-modScore .pass, #endCourse_testing .dki-lineitem .dki-modScore .fail{ font-weight:bold; font-size:2em; } .dki-section-panel .dki-lineitem .dki-modTestDetails { margin-left: 20px; margin-top: 5px; } .dki-section-panel .dki-lineitem .endMod_passStatus { width: 100%; text-align: center; padding: 5px 0px; margin-bottom: 5px; display:none; } .dki-section-panel .dki-lineitem .endMod_passingScoreLine { position:absolute; left:50%; display:none; } .dki-section-panel.showPassing .dki-lineitem .endMod_passingScoreLine, .dki-section-panel.showPassing .dki-lineitem .endMod_passStatus { display: inline-block; } .dki-section-panel .dki-lineitem .dki-modBtn{ display: inline-block; text-align : center; padding : 0px 10px 0px 10px; cursor : pointer; height: 30px; margin: 0; width: auto; max-width: 100%; } .dki-section-panel .dki-lineitem .actions{ width: auto; } .dki-section-panel .dki-lineitem span{ } body.phone .dki-section-panel .dki-lineitem .dki-modBtn { position: static; margin: 5px 0px; } body #endCourse_status .dki-lineitem span.dki-modScore span.dki-themeTextColor { font-weight: bold; } body.phone .dki-section-panel .dki-lineitem .dki-modAttempts { margin-left: 0px; } body.phone .dki-section-panel .dki-lineitem span.dki-label { text-align: right; margin-right: 5px; } body.phone .dki-section-panel .dki-lineitem .dki-modScore{ display : block; width : 100%; } .dki-section-panel .dki-lineitem-last{ border-bottom-width : 0px } .dki-section-panl .dki-lineitem-last .dki-modBtn { bottom: 0px; } .dki-section-panel .dki-lineitem span.dki-label{ display : inline-block; text-align : right; margin-right : 10px } html.rtl .dki-section-panel .dki-lineitem span.dki-label{ margin-left: 10px; } .dki-section-panel li.dki-lineitem strong { } .modulePassingStatus { position: absolute; width: 100%; text-align: center; top: 0px; left: 0px; padding: 3px 0px; } .modulePassingStatus.pass, .endMod_passStatus.pass { color: white; background-color: #2a6313; } .modulePassingStatus.fail, .endMod_passStatus.fail { color: white; background-color: #7f0000; } .gaugesubcont{ width: 124px; padding: 0; } .testItemContentContainer .btn.view{ text-overflow: ellipsis; max-width: 100%; overflow: hidden; }/*! dk Dom UI - v1.10.3 - 2024 dominKnow Inc.*/ .ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:.1px;display:block}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}@charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.5.0 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInRightSlight { from, 25%, 50%, 75%, to{ -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); } 25% { opacity: 1; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-25px, 0, 0); } 50% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(10px, 0, 0); } 75% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRightSlight { from, 25%, 50%, 75%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); } 25% { opacity: 1; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-25px, 0, 0); } 50% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(10px, 0, 0); } 75% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRightSlight { -webkit-animation-name: bounceInRightSlight; animation-name: bounceInRightSlight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /*Capture animations */ @keyframes flicker { 0% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0; transform: scale(1.15); } 100% { opacity: 0.5; transform: scale(1); } } @keyframes flickerNoResize { 0% { opacity: 0.5; } 50% { opacity: 0; } 100% { opacity: 0.5; } } @keyFrames arrow-hint { 0% { opacity:0; left:5px; transform: scale(1); } 100% { opacity:1; left:0px; transform: scale(1.15); } } @keyframes hint { 0% { opacity: 1; transform: translateY(0); } 40% { opacity: 0.8; transform: translateY(-4px); } 75% { opacity:0.8; transform: translateY(2px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes step-hint { 0% { opacity: 1; transform: translateX(0); } 50% { opacity: 0.8; transform: translateX(8px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes flashInput { 0% { opacity: 0.7; background-color:white; } 50% { opacity: 0.8; background-color:yellow; } 100% { opacity: 0.7; background-color:white; } }.dki-jumbotron-element .jumbotron { margin-bottom:0px; position:relative; z-index:0; } .dki-jumbotron-element .hideButton .dki-btn-element { display:none; } .dki-jumbotron-element .jumbotron .background { position: absolute; top:0px; bottom:0px; left:0px; right:0px; z-index:-1; opacity : 1; } .background.bg-default { background-color:#EEE; } .dki-jumbotron-element .jumbotron .background.transparency80 { opacity: 0.2; } .dki-jumbotron-element .jumbotron .background.transparency60 { opacity: 0.4; } .dki-jumbotron-element .jumbotron .background.transparency40 { opacity: 0.6; } .dki-jumbotron-element .jumbotron .background.transparency100 { opacity: 0; } .dki-jumbotron-element .jumbotron{ background-color:transparent; }.certificate { padding-top:30px; font-family: Tahoma, Geneva, Verdana, sans-serif; font-size: 18px; text-align: center; } .certificate h1 { font-size: 32px; font-weight: bold; } #certificate_studentName { display:block; font-size:24px; font-weight: bold; padding:10px 0 10px 0; } #certificate_courseName { display:block; font-size:24px; font-weight: bold; padding:10px 0 10px 0; } #certificate_date { display:block; position:absolute; bottom:10px; left:10px; } #certificate_print { display:block; position:absolute; top:10px; right:10px; } #certificate_signature { display:none; } .dki-marker-element{ } .dki-marker-element.ribbonDropdownItem .dki-element-content{ background-color: #333 !important; color: white !important; } .ribbonDropdownItem .dki-element-content, .dki-marker-element .dki-element-content{ text-align: center; cursor: pointer; box-sizing: border-box; line-height: 100%; display:inline-block; width:100%; height:100%; } .dki-marker-element .dki-element-content.round{ border-radius: 50%; } .dki-marker-element .dki-element-content:before{ font-size: 0.6em; vertical-align: top; display: inline-block; font-family: FontAwesome,Arial,Arial Narrow,Verdana,Sans-Serif; } .fa-0:before { content: "0"; } .fa-1:before { content: "1"; } .fa-2:before { content: "2"; } .fa-3:before { content: "3"; } .fa-4:before { content: "4"; } .fa-5:before { content: "5"; } .fa-6:before { content: "6"; } .fa-7:before { content: "7"; } .fa-8:before { content: "8"; } .fa-9:before { content: "9"; } .fa-10:before { content: "10"; } .fa-11:before { content: "11"; } .fa-12:before { content: "12"; } .fa-13:before { content: "13"; } .fa-14:before { content: "14"; } .fa-15:before { content: "15"; } .fa-16:before { content: "16"; } .fa-17:before { content: "17"; } .fa-18:before { content: "18"; } .fa-19:before { content: "19"; } .fa-20:before { content: "20"; } .fa-21:before { content: "21"; } .fa-22:before { content: "22"; } .fa-23:before { content: "23"; } .fa-24:before { content: "24"; } .fa-25:before { content: "25"; } .fa-26:before { content: "26"; } .fa-27:before { content: "27"; } .fa-28:before { content: "28"; } .fa-29:before { content: "29"; } .fa-30:before { content: "30"; } .fa-31:before { content: "31"; } .fa-32:before { content: "32"; } .fa-33:before { content: "33"; } .fa-34:before { content: "34"; } .fa-35:before { content: "35"; } .fa-36:before { content: "36"; } .fa-37:before { content: "37"; } .fa-38:before { content: "38"; } .fa-39:before { content: "39"; } .fa-40:before { content: "40"; } .fa-41:before { content: "41"; } .fa-42:before { content: "42"; } .fa-43:before { content: "43"; } .fa-44:before { content: "44"; } .fa-45:before { content: "45"; } .fa-46:before { content: "46"; } .fa-47:before { content: "47"; } .fa-48:before { content: "48"; } .fa-49:before { content: "49"; } .fa-50:before { content: "50"; } .fa-51:before { content: "51"; } .fa-52:before { content: "52"; } .fa-53:before { content: "53"; } .fa-54:before { content: "54"; } .fa-55:before { content: "55"; } .fa-56:before { content: "56"; } .fa-57:before { content: "57"; } .fa-58:before { content: "58"; } .fa-59:before { content: "59"; } .fa-60:before { content: "60"; } .fa-1a:before { content: "1a"; } .fa-1b:before { content: "1b"; } .fa-1c:before { content: "1c"; } .fa-1d:before { content: "1d"; } .fa-1e:before { content: "1e"; } .fa-1f:before { content: "1f"; } .fa-1g:before { content: "1g"; } .fa-1h:before { content: "1h"; } .fa-2a:before { content: "2a"; } .fa-2b:before { content: "2b"; } .fa-2c:before { content: "2c"; } .fa-2d:before { content: "2d"; } .fa-2e:before { content: "2e"; } .fa-2f:before { content: "2f"; } .fa-2g:before { content: "2g"; } .fa-2h:before { content: "2h"; } .fa-3a:before { content: "3a"; } .fa-3b:before { content: "3b"; } .fa-3c:before { content: "3c"; } .fa-3d:before { content: "3d"; } .fa-3e:before { content: "3e"; } .fa-3f:before { content: "3f"; } .fa-3g:before { content: "3g"; } .fa-3h:before { content: "3h"; } .fa-4a:before { content: "4a"; } .fa-4b:before { content: "4b"; } .fa-4c:before { content: "4c"; } .fa-4d:before { content: "4d"; } .fa-4e:before { content: "4e"; } .fa-4f:before { content: "4f"; } .fa-4g:before { content: "4g"; } .fa-4h:before { content: "4h"; } .fa-5a:before { content: "5a"; } .fa-5b:before { content: "5b"; } .fa-5c:before { content: "5c"; } .fa-5d:before { content: "5d"; } .fa-5e:before { content: "5e"; } .fa-5f:before { content: "5f"; } .fa-5g:before { content: "5g"; } .fa-5h:before { content: "5h"; } .fa-a:before { content: "A"; } .fa-b:before { content: "B"; } .fa-c:before { content: "C"; } .fa-d:before { content: "D"; } .fa-e:before { content: "E"; } .fa-f:before { content: "F"; } .fa-g:before { content: "G"; } .fa-h:before { content: "H"; } .fa-i:before { content: "I"; } .fa-j:before { content: "J"; } .fa-k:before { content: "K"; } .fa-l:before { content: "L"; } .fa-m:before { content: "M"; } .fa-n:before { content: "N"; } .fa-o:before { content: "O"; } .fa-p:before { content: "P"; } .fa-q:before { content: "Q"; } .fa-r:before { content: "R"; } .fa-s:before { content: "S"; } .fa-t:before { content: "T"; } .fa-u:before { content: "U"; } .fa-v:before { content: "V"; } .fa-w:before { content: "W"; } .fa-x:before { content: "X"; } .fa-y:before { content: "Y"; } .fa-z:before { content: "Z"; } .fa-a1:before { content: "A1"; } .fa-a2:before { content: "A2"; } .fa-a3:before { content: "A3"; } .fa-a4:before { content: "A4"; } .fa-a5:before { content: "A5"; } .fa-a6:before { content: "A6"; } .fa-a7:before { content: "A7"; } .fa-a8:before { content: "A8"; } .fa-a9:before { content: "A9"; } .fa-b1:before { content: "B1"; } .fa-b2:before { content: "B2"; } .fa-b3:before { content: "B3"; } .fa-b4:before { content: "B4"; } .fa-b5:before { content: "B5"; } .fa-b6:before { content: "B6"; } .fa-b7:before { content: "B7"; } .fa-b8:before { content: "B8"; } .fa-b9:before { content: "B9"; } .fa-c1:before { content: "C1"; } .fa-c2:before { content: "C2"; } .fa-c3:before { content: "C3"; } .fa-c4:before { content: "C4"; } .fa-c5:before { content: "C5"; } .fa-c6:before { content: "C6"; } .fa-c7:before { content: "C7"; } .fa-c8:before { content: "C8"; } .fa-c9:before { content: "C9"; } .fa-d1:before { content: "D1"; } .fa-d2:before { content: "D2"; } .fa-d3:before { content: "D3"; } .fa-d4:before { content: "D4"; } .fa-d5:before { content: "D5"; } .fa-d6:before { content: "D6"; } .fa-d7:before { content: "D7"; } .fa-d8:before { content: "D8"; } .fa-d9:before { content: "D9"; } .fa-e1:before { content: "E1"; } .fa-e2:before { content: "E2"; } .fa-e3:before { content: "E3"; } .fa-e4:before { content: "E4"; } .fa-e5:before { content: "E5"; } .fa-e6:before { content: "E6"; } .fa-e7:before { content: "E7"; } .fa-e8:before { content: "E8"; } .fa-e9:before { content: "E9"; } .fa-f1:before { content: "F1"; } .fa-f2:before { content: "F2"; } .fa-f3:before { content: "F3"; } .fa-f4:before { content: "F4"; } .fa-f5:before { content: "F5"; } .fa-f6:before { content: "F6"; } .fa-f7:before { content: "F7"; } .fa-f8:before { content: "F8"; } .fa-f9:before { content: "F9"; } .fa-g1:before { content: "G1"; } .fa-g2:before { content: "G2"; } .fa-g3:before { content: "G3"; } .fa-g4:before { content: "G4"; } .fa-g5:before { content: "G5"; } .fa-g6:before { content: "G6"; } .fa-g7:before { content: "G7"; } .fa-g8:before { content: "G8"; } .fa-g9:before { content: "G9"; } .fa-h1:before { content: "H1"; } .fa-h2:before { content: "H2"; } .fa-h3:before { content: "H3"; } .fa-h4:before { content: "H4"; } .fa-h5:before { content: "H5"; } .fa-h6:before { content: "H6"; } .fa-h7:before { content: "H7"; } .fa-h8:before { content: "H8"; } .fa-h9:before { content: "H9"; } .fa-i1:before { content: "I1"; } .fa-i2:before { content: "I2"; } .fa-i3:before { content: "I3"; } .fa-i4:before { content: "I4"; } .fa-i5:before { content: "I5"; } .fa-i6:before { content: "I6"; } .fa-i7:before { content: "I7"; } .fa-i8:before { content: "I8"; } .fa-i9:before { content: "I9"; } .fa-j1:before { content: "J1"; } .fa-j2:before { content: "J2"; } .fa-j3:before { content: "J3"; } .fa-j4:before { content: "J4"; } .fa-j5:before { content: "J5"; } .fa-j6:before { content: "J6"; } .fa-j7:before { content: "J7"; } .fa-j8:before { content: "J8"; } .fa-j9:before { content: "J9"; } .fa-k1:before { content: "K1"; } .fa-k2:before { content: "K2"; } .fa-k3:before { content: "K3"; } .fa-k4:before { content: "K4"; } .fa-k5:before { content: "K5"; } .fa-k6:before { content: "K6"; } .fa-k7:before { content: "K7"; } .fa-k8:before { content: "K8"; } .fa-k9:before { content: "K9"; } .fa-l1:before { content: "L1"; } .fa-l2:before { content: "L2"; } .fa-l3:before { content: "L3"; } .fa-l4:before { content: "L4"; } .fa-l5:before { content: "L5"; } .fa-l6:before { content: "L6"; } .fa-l7:before { content: "L7"; } .fa-l8:before { content: "L8"; } .fa-l9:before { content: "L9"; } .fa-m1:before { content: "M1"; } .fa-m2:before { content: "M2"; } .fa-m3:before { content: "M3"; } .fa-m4:before { content: "M4"; } .fa-m5:before { content: "M5"; } .fa-m6:before { content: "M6"; } .fa-m7:before { content: "M7"; } .fa-m8:before { content: "M8"; } .fa-m9:before { content: "M9"; } .fa-n1:before { content: "N1"; } .fa-n2:before { content: "N2"; } .fa-n3:before { content: "N3"; } .fa-n4:before { content: "N4"; } .fa-n5:before { content: "N5"; } .fa-n6:before { content: "N6"; } .fa-n7:before { content: "N7"; } .fa-n8:before { content: "N8"; } .fa-n9:before { content: "N9"; } .fa-o1:before { content: "O1"; } .fa-o2:before { content: "O2"; } .fa-o3:before { content: "O3"; } .fa-o4:before { content: "O4"; } .fa-o5:before { content: "O5"; } .fa-o6:before { content: "O6"; } .fa-o7:before { content: "O7"; } .fa-o8:before { content: "O8"; } .fa-o9:before { content: "O9"; } .fa-p1:before { content: "P1"; } .fa-p2:before { content: "P2"; } .fa-p3:before { content: "P3"; } .fa-p4:before { content: "P4"; } .fa-p5:before { content: "P5"; } .fa-p6:before { content: "P6"; } .fa-p7:before { content: "P7"; } .fa-p8:before { content: "P8"; } .fa-p9:before { content: "P9"; } .fa-q1:before { content: "Q1"; } .fa-q2:before { content: "Q2"; } .fa-q3:before { content: "Q3"; } .fa-q4:before { content: "Q4"; } .fa-q5:before { content: "Q5"; } .fa-q6:before { content: "Q6"; } .fa-q7:before { content: "Q7"; } .fa-q8:before { content: "Q8"; } .fa-q9:before { content: "Q9"; } .fa-r1:before { content: "R1"; } .fa-r2:before { content: "R2"; } .fa-r3:before { content: "R3"; } .fa-r4:before { content: "R4"; } .fa-r5:before { content: "R5"; } .fa-r6:before { content: "R6"; } .fa-r7:before { content: "R7"; } .fa-r8:before { content: "R8"; } .fa-r9:before { content: "R9"; } .fa-s1:before { content: "S1"; } .fa-s2:before { content: "S2"; } .fa-s3:before { content: "S3"; } .fa-s4:before { content: "S4"; } .fa-s5:before { content: "S5"; } .fa-s6:before { content: "S6"; } .fa-s7:before { content: "S7"; } .fa-s8:before { content: "S8"; } .fa-s9:before { content: "S9"; } .fa-t1:before { content: "T1"; } .fa-t2:before { content: "T2"; } .fa-t3:before { content: "T3"; } .fa-t4:before { content: "T4"; } .fa-t5:before { content: "T5"; } .fa-t6:before { content: "T6"; } .fa-t7:before { content: "T7"; } .fa-t8:before { content: "T8"; } .fa-t9:before { content: "T9"; } .fa-u1:before { content: "U1"; } .fa-u2:before { content: "U2"; } .fa-u3:before { content: "U3"; } .fa-u4:before { content: "U4"; } .fa-u5:before { content: "U5"; } .fa-u6:before { content: "U6"; } .fa-u7:before { content: "U7"; } .fa-u8:before { content: "U8"; } .fa-u9:before { content: "U9"; } .fa-v1:before { content: "V1"; } .fa-v2:before { content: "V2"; } .fa-v3:before { content: "V3"; } .fa-v4:before { content: "V4"; } .fa-v5:before { content: "V5"; } .fa-v6:before { content: "V6"; } .fa-v7:before { content: "V7"; } .fa-v8:before { content: "V8"; } .fa-v9:before { content: "V9"; } .fa-w1:before { content: "W1"; } .fa-w2:before { content: "W2"; } .fa-w3:before { content: "W3"; } .fa-w4:before { content: "W4"; } .fa-w5:before { content: "W5"; } .fa-w6:before { content: "W6"; } .fa-w7:before { content: "W7"; } .fa-w8:before { content: "W8"; } .fa-w9:before { content: "W9"; } .fa-x1:before { content: "X1"; } .fa-x2:before { content: "X2"; } .fa-x3:before { content: "X3"; } .fa-x4:before { content: "X4"; } .fa-x5:before { content: "X5"; } .fa-x6:before { content: "X6"; } .fa-x7:before { content: "X7"; } .fa-x8:before { content: "X8"; } .fa-x9:before { content: "X9"; } .fa-y1:before { content: "Y1"; } .fa-y2:before { content: "Y2"; } .fa-y3:before { content: "Y3"; } .fa-y4:before { content: "Y4"; } .fa-y5:before { content: "Y5"; } .fa-y6:before { content: "Y6"; } .fa-y7:before { content: "Y7"; } .fa-y8:before { content: "Y8"; } .fa-y9:before { content: "Y9"; } .fa-z1:before { content: "Z1"; } .fa-z2:before { content: "Z2"; } .fa-z3:before { content: "Z3"; } .fa-z4:before { content: "Z4"; } .fa-z5:before { content: "Z5"; } .fa-z6:before { content: "Z6"; } .fa-z7:before { content: "Z7"; } .fa-z8:before { content: "Z8"; } .fa-z9:before { content: "Z9"; } .fa-roman1:before { content: "I"; } .fa-roman2:before { content: "II"; } .fa-roman3:before { content: "III"; } .fa-roman4:before { content: "IV"; } .fa-roman5:before { content: "V"; } .fa-roman6:before { content: "VI"; } .fa-roman7:before { content: "VII"; } .fa-roman8:before { content: "VIII"; } .fa-roman9:before { content: "IX"; } .fa-roman10:before { content: "X"; } .fa-roman11:before { content: "XI"; } .fa-roman12:before { content: "XII"; } .fa-roman13:before { content: "XIII"; } .fa-roman14:before { content: "XIV"; } .fa-roman15:before { content: "XV"; } .fa-roman16:before { content: "XVI"; } .fa-roman17:before { content: "XVII"; } .fa-roman18:before { content: "XVIII"; } .fa-roman19:before { content: "XIX"; } .fa-roman20:before { content: "XX"; } .fa-dki-diamond:before{ content: ""; width: 10px; height: 10px; background-color: #333; display: block; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }/* * Skin for jPlayer Plugin (jQuery JavaScript Library) * http://www.happyworm.com/jquery/jplayer * * Skin Name: Blue Monday * * Copyright (c) 2010-2011 Happyworm Ltd * Dual licensed under the MIT and GPL licenses. * - http://www.opensource.org/licenses/mit-license.php * - http://www.gnu.org/copyleft/gpl.html * * Author: Silvia Benvenuti * Skin Version: 4.0 (jPlayer 2.1.0) * Date: 1st September 2011 */ div.jp-audio, div.jp-video { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; /* Edit the font-size to counteract inherited font sizing. * Eg. 1.25em = 1 / 0.8em */ position:relative; width:100%; } div.jp-audio { color: #fff; line-height:1.6; font-size:1.25em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */ font-family:Verdana, Arial, sans-serif; } div.jp-video:-webkit-full-screen { width: 100%; height: 100%; } div.jp-video.jp-video-full .jp-video-player, div.jp-video.jp-video-full .jp-video-player video{ height:100% !important; } div.jp-video.jp-video-full .jp-video-player, div.jp-video.jp-video-full .jp-video-play, div.jp-video.jp-video-full .playHeadBlocker, div.jp-video.jp-video-full div.jp-gui{ z-index: 555555; } body.show-focus-outlines div.jp-video .jp-gui{ opacity: 1 !important; } div.jp-video .jp-gui{ opacity: 0; -webkit-transition: 0.5s opacity; -moz-transition: 0.5s opacity; -ms-transition: 0.5s opacity; -o-transition: 0.5s opacity; transition: 0.5s opacity; position: absolute; bottom: 0px; left: 0px; right: 0px; z-index:1; } div.jp-video:hover .jp-gui{ opacity: 1; } div.jp-video .subClass { z-index:2147483647; bottom: 2%; width:100%; text-align:middle; -webkit-transition: 0.5s bottom cubic-bezier(0.1, 0.6, 0.8, 1.000); -moz-transition: 0.5s bottom cubic-bezier(0.1, 0.6, 0.8, 1.000); -ms-transition: 0.5s bottom cubic-bezier(0.1, 0.6, 0.8, 1.000); -o-transition: 0.5s bottom cubic-bezier(0.1, 0.6, 0.8, 1.000); transition: 0.5s bottom cubic-bezier(0.1, 0.6, 0.8, 1.000); } div.jp-video .subClass > div { background-color:rgba(0,0,0,0.75); border-radius:2.6px; -webkit-box-decoration-break:clone; } div.jp-video.vid-sm .subClass { font-size:0.5em; } div.jp-video.vid-md .subClass { font-size:0.75em; } div.jp-video.jp-video-full .subClass, div.jp-video.vid-lg .subClass { font-size:1em; } html:not(.on-device) div.jp-video:hover .subClass, div.jp-video.controls .subClass { bottom: 60px; } div.jp-audio.hideControls, div.jp-basic.hideControls { display:none; } html:not(.forTimeline) div.jp-video video { cursor:pointer; /*Video elements are inline block... This gets rid of a weird bottom margin on video elements*/ display:block; } div.jp-video { height:100%; /* border:1px solid #009be3; */ } div.jp-basic { height:100%; width:100%; background: transparent; overflow:hidden; } div.jp-video-full { /* Rules for IE6 (full-screen) */ height:100%; width:100%; /* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */ position:static !important; position:relative } div.jp-video-full div.jp-jplayer, div.jp-video-full div.jp-video-player, div.jp-video-full div.jp-video-play { top: 0; left: 0; position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */ overflow: hidden; z-index:1000; } div.jp-video-full div.jp-gui { left: 0; width:100%; z-index:1000; position: fixed; } .jp-gui.forceShow{ display: block !important; opacity: 1 !important; filter:alpha(opacity=100) !important; -moz-opacity: 1 !important; -khtml-opacity: 1 !important; opacity: 1 !important; } div.jp-video-full div.jp-interface { position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */ bottom: 0; left: 0; z-index:1000; } div.jp-basic div.jp-interface { background: transparent; } div.jp-interface { text-align: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.75) 65%,rgba(0,0,0,0.9) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.75) 65%,rgba(0,0,0,0.9) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.75) 65%,rgba(0,0,0,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */ width:100%; padding: 60px 5px 10px 5px; } div.jp-audio .jp-interface { background:rgba(0,0,0,0.44); padding: 2.5px 5px 0 5px; } div.jp-basic .jp-interface{ padding: 2.5px 0; } /* @group CONTROLS */ div.jp-audio div.jp-controls-holder { min-width: 100px; } div.jp-controls-holder { clear: both; width:100%; position: relative; height:100%; } div.jp-interface .jp-controls { list-style-type:none; margin:0; padding: 0 5px; } /*We double up because we still use ULs in authoring, but we use divs in exprted content for JAWS*/ div.jp-interface ul.jp-controls li, div.jp-interface div.jp-controls span { display:inline-block; vertical-align:middle; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; backface-visibility: visible !important; } div.jp-basic .jp-interface div.jp-controls span, div.jp-basic .jp-interface ul.jp-controls li { display:list-item; } div.jp-audio .jp-controls { padding-bottom:5px; } /*We double up because we still use ULs in authoring, but we use divs in exprted content for JAWS*/ div.jp-video div.jp-controls, div.jp-video ul.jp-controls, div.jp-interface div.jp-controls a, div.jp-interface ul.jp-controls a { display:block; color:transparent; cursor: pointer; margin:0 5px; backface-visibility: visible !important; outline-offset : 0 !important; } div.jp-audio a.jp-play, div.jp-video a.jp-play, div.jp-audio a.jp-pause, div.jp-video a.jp-pause { width:20px; height:20px; margin:10px 0; } div.jp-basic a.jp-play, div.jp-basic a.jp-pause { width:25px; height:25px; } div.jp-audio a.jp-play, div.jp-video a.jp-play { background: url("video_play.png"); } div.jp-audio a.jp-play:hover, div.jp-video a.jp-play:hover { background: url("video_play.png"); } div.jp-audio a.jp-pause, div.jp-video a.jp-pause { background: url("video_pause.png"); display: none; margin-left: 0 !important; margin-right: 10px !important; } div.jp-audio a.jp-pause:hover, div.jp-video a.jp-pause:hover { background: url("video_pause.png"); } div.jp-basic a.jp-play { background: url("basicAudioPlayer.png") no-repeat; } div.jp-basic a.jp-pause { background: url("basicAudioPlayer-activated.png") no-repeat; } div.jp-interface .jp-controls a.jp-stop, div.jp-interface .jp-controls a.jp-previous, div.jp-interface .jp-controls a.jp-next, div.jp-interface .jp-controls a.jp-volume-max, div.jp-interface .jp-controls .jp-cc { display:none; } div.cc div.jp-interface .jp-controls .jp-cc { display:inline-block; } a.jp-stop, a.jp-previous, a.jp-next { width:28px; height:28px; } /* a.jp-stop { background: url("jplayer.blue.monday.png") 0 -83px no-repeat; margin-left:10px; } a.jp-stop:hover { background: url("jplayer.blue.monday.png") -29px -83px no-repeat; } a.jp-previous { background: url("jplayer.blue.monday.png") 0 -112px no-repeat; } a.jp-previous:hover { background: url("jplayer.blue.monday.png") -29px -112px no-repeat; } a.jp-next { background: url("jplayer.blue.monday.png") 0 -141px no-repeat; } a.jp-next:hover { background: url("jplayer.blue.monday.png") -29px -141px no-repeat; }*/ /* @end */ /* @group progress bar */ div.jp-progress { backface-visibility:visible !important; background-color: #ddd; } div.jp-audio div.jp-progress { height:3px; } div.jp-audio div.jp-type-single div.jp-progress { left:80px; right:30px; } div.jp-audio .jp-transcript{ left: 45px; } div.jp-video div.jp-progress { width:100%; height:3px; z-index:1001; margin-bottom:10px; } div.jp-seek-bar { background-color:white; width:0px; height:100%; cursor: pointer; backface-visibility:visible !important; } div.jp-play-bar { background-color:red; width:0px; height:100%; backface-visibility: visible !important; } /* @end */ /* @group volume controls */ .jp-bookmark{ } .jp-bookmark:before{ font-family: FontAwesome; content: '\f02e'; color: white; font-size: 20px; } .bookmark-close{ position: absolute; right: 5px; top: 5px; cursor: pointer; } .jp-bm{ width: 30px; height: 30px; position: absolute; right: 0px; top: 3px; } a.jp-mute, a.jp-unmute, a.jp-volume-max { width:20px; height:20px; top:12px; } div.jp-audio div.jp-type-single a.jp-mute, div.jp-audio div.jp-type-single a.jp-unmute { right: 5px; } html.on-device a.jp-mute, html.on-device a.jp-unmute, div.jp-basic a.jp-mute, div.jp-basic a.jp-unmute { display:none !important; } .jp-cc i{ color:white; text-shadow: -1px -1px 0 #555, 1px -1px 0 #555, -1px 1px 0 #555, 1px 1px 0 #555; } .jp-audio .jp-time{ text-shadow: -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888, 1px 1px 0 #888; } .jp-audio .jp-cc, .jp-audio .jp-cc a{ line-height: 20px; position: relative; } .jp-audio .jp-cc a{ height: 20px; } .jp-video .jp-cc a { margin: 0 !important; } .jp-video.cc .jp-cc { width:21px; height:20px; margin-top:6px; margin-left:2px; } div.cc .jp-cc .fa-cc { line-height: 20px; font-size:17px; vertical-align: top; } .jp-cc:before { position:absolute; width:0px; height:3px; background-color:red; top:20px; border-radius:3px; content : " "; display:block; -moz-transition: left .1s cubic-bezier(0.4,0.0,1,1),width .1s cubic-bezier(0.4,0.0,1,1); -webkit-transition: left .1s cubic-bezier(0.4,0.0,1,1),width .1s cubic-bezier(0.4,0.0,1,1); transition: left .1s cubic-bezier(0.4,0.0,1,1),width .1s cubic-bezier(0.4,0.0,1,1); left:12px; } .subClass { display:none; } div.showCC .subClass { display:block; } .showCC .jp-cc:before, html.showAudioCaptions .jp-audio .jp-cc:before{ width:calc(100% + 1px); left: -1px; -moz-transition: left .25s cubic-bezier(0.0,0.0,0.2,1),width .25s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition: left .25s cubic-bezier(0.0,0.0,0.2,1),width .25s cubic-bezier(0.0,0.0,0.2,1); transition: left .25s cubic-bezier(0.0,0.0,0.2,1),width .25s cubic-bezier(0.0,0.0,0.2,1); } html.showAudioCaptions .jp-audio .jp-cc:before{ width:calc(100% - 4px); left:2px; top: 22px; } div.jp-audio a.jp-volume-max { margin-left: 56px; display:none; } div.jp-video .jp-volume-bar{ display: none !important; } div.jp-video a.jp-volume-max { left: 134px; } a.jp-mute { background: url("video_volume.png"); } a.jp-mute:hover { background: url("video_volume.png"); } a.jp-unmute { background: url("video_muted.png"); } a.jp-unmute:hover { /* background: url("jplayer.blue.monday.png") -79px -170px no-repeat; */ } /* a.jp-volume-max { background: url("jplayer.blue.monday.png") 0 -186px no-repeat; } a.jp-volume-max:hover { background: url("jplayer.blue.monday.png") -19px -186px no-repeat; }*/ div.jp-volume-bar { overflow:hidden; /*background: url("jplayer.blue.monday.png") 0 -250px repeat-x;*/ width:46px; height:2px; cursor: pointer; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } div.jp-audio div.jp-volume-bar { top:37px; left:330px; display:none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } div.jp-video div.jp-volume-bar { top:18px; left:100px; width:36px; } div.jp-video.no-fullscreen div.jp-volume-bar { left: 70px; width:46px; } div.jp-volume-bar-value { /*background: url("jplayer.blue.monday.png") 0 -256px repeat-x;*/ width:0px; height:5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* @end */ /* @group current time and duration */ div.jp-audio div.jp-time-holder { position:absolute; top:50px; display:none; } div.jp-audio div.jp-type-single div.jp-time-holder { left:110px; width:186px; } .jp-fs , .jp-video .jp-cc{ margin:7px 0 2px 0; position:absolute; } .jp-fs, .jp-video .jp-cc { right: 0; } .jp-controls.allowFs .jp-bm{ right:25px; } .jp-controls.allowFs .jp-cc { right:35px; } [data-bookmarks] .jp-cc { right:35px; } [data-bookmarks] .jp-controls.allowFs .jp-cc { right:60px; } .bookmark-wrapper{ position: absolute; right: 0px; top: 0px; bottom: 62px; width: 35%; max-width: 250px; background-color: rgba(0,0,0,0.3); color: white; display: none; overflow-y: auto; padding: 2px; } .bookmark-wrapper .bookmark-item{ padding: 5px 10px; transition: background-color 0.1s ease-out; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.3); } .bookmark-wrapper .bookmark-item:last-child{ border-bottom: 0; } .bookmark-wrapper .bookmark-item:hover{ background-color: rgba(255,255,255,0.15); text-shadow: 0px 0px 10px rgba(0,0,0,0.5); } .jp-time, .jp-time > div{ display:inline-block; text-indent:initial; color:#fff; font-size:12px; margin:3px 5px 3px 3px; vertical-align:top; } /* div.jp-current-time { margin: 0 5px; } div.jp-duration { margin:0 5px; } */ div.jp-video div.jp-current-time { } div.jp-video div.jp-duration { } @media (max-width: 990px) { .dki-authoring-group.col-sm-3 div.jp-video div.jp-current-time { display: none; } .dki-authoring-group.col-sm-3 div.jp-video div.jp-duration { display: none; } } @media (max-width: 766px) { .dki-authoring-group.col-sm-3 div.jp-video div.jp-current-time { display: inline; } .dki-authoring-group.col-sm-3 div.jp-video div.jp-duration { display: inline; } .dki-authoring-group.col-xs-3 div.jp-video div.jp-current-time, .dki-authoring-group.col-xs-4 div.jp-video div.jp-current-time { display: none } .dki-authoring-group.col-xs-3 div.jp-video div.jp-duration, .dki-authoring-group.col-xs-4 div.jp-video div.jp-duration { display: none; } } /* @end */ div.jp-video-play, div.playHeadBlocker { position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0); /* Makes IE9 work with the active area over the whole video area. IE6/7/8 only have the button as active area. */ } div.jp-video-play{ cursor:pointer; } div.jp-video-full div.jp-video-play, div.jp-video-full div.jp-type-single, div.jp-video-full div.playHeadBlocker { height:100%; z-index:1000; } html.video-fullScreen div.jp-video-full div.jp-type-single{ position:fixed; width:100%; top:0; left:0; } html.video-fullScreen .dki-authoring-element.video-fullScreen-element{ z-index:999; } a.jp-video-play-icon { position:relative; display:block; width: 112px; height: 100px; margin-left:-56px; margin-top:-50px; left:50%; top:50%; background: url("jplayer.blue.monday.video.play.png") 0 0 no-repeat; text-indent:-9999px; } div.jp-video-play:hover a.jp-video-play-icon { background: url("jplayer.blue.monday.video.play.png") 0 -100px no-repeat; } div.jp-jplayer audio, div.jp-jplayer { width:0px; height:0px; } div.jp-jplayer { } /* @group TOGGLES */ /* The audio toggles are nested inside jp-time-holder */ ul.jp-toggles { list-style-type:none; padding:0; margin:0 auto; overflow:hidden; } div.jp-audio .jp-type-single ul.jp-toggles { width:25px; } div.jp-video ul.jp-toggles { margin-top:10px; width:100px; } ul.jp-toggles li { display:block; float:right; } ul.jp-toggles li a { display:block; width:25px; height:18px; text-indent:-9999px; line-height:100%; /* need this for IE6 */ } a.jp-transcript{ width: 20px; height: 20px; background: url("video_transcript.png"); background-repeat: no-repeat; } a.jp-full-screen { background: url("video_fullScreen.png") no-repeat; width:20px; height:20px; } a.jp-full-screen:hover { background: url("video_fullscreen.png") no-repeat; } a.jp-restore-screen { background: url("video_extFullscreen.png") no-repeat; width:20px; height:20px; } a.jp-restore-screen:hover { background: url("video_extFullscreen.png") no-repeat; } div.no-fullscreen .jp-controls a.jp-restore-screen, div.no-fullscreen .jp-controls a.jp-full-screen { display: none; } a.jp-repeat { background: url("jplayer.blue.monday.png") 0 -290px no-repeat; } a.jp-repeat:hover { background: url("jplayer.blue.monday.png") -30px -290px no-repeat; } a.jp-repeat-off { background: url("jplayer.blue.monday.png") -60px -290px no-repeat; } a.jp-repeat-off:hover { background: url("jplayer.blue.monday.png") -90px -290px no-repeat; } a.jp-shuffle { background: url("jplayer.blue.monday.png") 0 -270px no-repeat; margin-left: 5px; } a.jp-shuffle:hover { background: url("jplayer.blue.monday.png") -30px -270px no-repeat; } a.jp-shuffle-off { background: url("jplayer.blue.monday.png") -60px -270px no-repeat; margin-left: 5px; } a.jp-shuffle-off:hover { background: url("jplayer.blue.monday.png") -90px -270px no-repeat; } /* @end */ /* @group NO SOLUTION error feedback */ .jp-no-solution { position:absolute; width:390px; margin-left:-202px; left:50%; top: 10px; padding:5px; font-size:.8em; border:2px solid #009be3; color:#000; display:none; } .jp-no-solution a { color:#000; } .jp-no-solution span { font-size:1em; display:block; text-align:center; font-weight:bold; } /* @end */ .jp-controls{ position:relative; } div.jp-basic .jp-controls a{ min-height:25px; max-width: 35px; } div.jp-basic .jp-progress { display: none; } .hidePlayerHead .jp-video-play-icon { display:none; } .forTimeline .dki-video-element.selected .jp-interface { display:none; } .dki-video-element.examining .video-play-head { display:none !important; } .footerPage .dki-video-element{ overflow: hidden; } .custom-scrollbar::-webkit-scrollbar { -webkit-appearance: none; } .custom-scrollbar::-webkit-scrollbar:vertical { width: 12px; overflow: visible; } .custom-scrollbar::-webkit-scrollbar-thumb { border-radius: 8px; background-color: rgba(0, 0, 0, .2); border: 3px solid #f5f5f5; } .custom-scrollbar::-webkit-scrollbar-track { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); background-color: #f5f5f5; } .transparent { opacity: 0; } .centered-element { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); } .no-padding { padding: 0; } .no-margin { margin: 0; } .no-padding-bottom { padding-bottom: 0; } .no-padding-left { padding-left: 0; } .no-padding-top { padding-top: 0; } .one-liner { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .top-buffer { margin-top: 3%; } .top-buffer-small { margin-top: 1.25%; } .top-buffer-fixed { margin-top: 12px; } .bottom-buffer { margin-bottom: 3%; } .bottom-buffer-small { margin-bottom: 1.25%; } .bottom-buffer-fixed { margin-bottom: 12px; } .big-top-buffer { margin-top: 6%; } .big-bottom-buffer { margin-bottom: 6%; }.scenario { max-height : 70rem; overflow : hidden; position : relative; text-align : center; } .scenario.left .audio-control { left : auto; right : 20px; transform : scaleX(-1); } .scenario .sb-bg{ background-repeat : no-repeat; background-size : cover; background-position : right bottom; position : absolute; top : 0px; left : 0px; right : 0px; bottom : 0px; } .scenario .clickStart .fa-play { position : absolute; color : white; font-size : 50px; top : calc(50% - 25px); left : calc(50% - 25px); } .scenario .scene { padding : 15px 30px; box-sizing : border-box; width : 100%; min-height : inherit; opacity : 0; z-index : 0; max-width : 120rem; position : absolute; margin : 0 auto; } html:not(.responsive) .scenario, html:not(.responsive) .scenario .scene { height: 100%; } .scenario .scene.active { opacity : 1; z-index : 1; position : relative; } .scenario .jp-basic { position : absolute; opacity : 0; } .scenario .dialog { z-index : 1; padding : 0 26% 0px 30px; box-sizing : border-box; position : relative; width : 100%; margin-top : -15px; } .scenario .character { position : absolute; width : 38%; top : 0; bottom : 0; right : 0; z-index : 0; text-align : initial; overflow: hidden; } .scenario.left .character { right : auto; left : 0; } .scenario.left .dialog { padding : 0 30px 0 26%; } .scenario .disabler.flex { cursor : default; } .scenario .character img { object-fit : contain; font-family: 'object-fit: contain;'; /*For the object-fit JS shim*/ } .scenario .character img.full { position : absolute; bottom : -160px; height : calc(100% + 130px); width : 100%; } .scenario .blur { filter : blur(0.2rem); top : -5px; left : -5px; bottom : -5px; right : -5px; width : auto; height : auto; } .scenario .character img.face { display : none; opacity : 0; transition : opacity 150ms ease-in-out; } .scenario .scene.interact .character img.face { opacity : 1; } .scenario .responses { opacity : 0; width : 90%; transition : opacity 350ms ease-in-out; list-style : none; padding : 0; margin-top : 25px; } .scenario .responses .speech { float : left; clear : both; } .scenario .scene.interact .responses { opacity : 1; } .scenario .speech { box-shadow : 0 0.2rem 2.5rem 0 rgba(0,0,0,.15); background-color : white; color : #333; /*Required to override any of the bg class font colours that could be applied by parent groups, rows, or sections. */ margin-left : 5px; position : relative; margin-bottom : 15px; padding : 10px 15px; word-break : break-word; border : 1px solid #ccc; text-align : center; } .scenario .responses .speech.sceneOption { cursor : pointer; max-width : 75%; } .scenario .speech:not(.sceneOption).characterSpeech { max-width : 80%; } .scenario .speech .audio{ position : relative; } .scenario .speech .audio .progress { height : 3px; } .scenario .speech .audio .control { position : absolute; width : 20px; height : 20px; top : -14px; right : -23px; border-radius : 50%; font-size : 10px; line-height : 20px; text-align : center; cursor : pointer; background-color : #333; color : #FFF; } .scenario .speech.right .audio .control { right : auto; left : -20px; } .scenario .responses .row:after { content : ' '; display : table-cell; width : 100%; } .scenario .speech.oval { border-radius : 20px; } .scenario .speech.tail { border-radius : 16px; } .scenario .speech.tail:after { content : " "; border : 14px solid; border-color : transparent transparent #FFF transparent; position : absolute; bottom : 0px; /*Offset by border width*/ right : -12px; } .scenario .speech.tail:before { content : " "; border : 14px solid; border-color : transparent transparent #CCC transparent; position : absolute; bottom : -1px; /*Offset by border width*/ right : -14px; } .scenario .speech.tail.left:after { left : -12px; right : auto; } .scenario .speech.tail.left:before { left : -14px; right : auto; } .scenario .speech.tail.top:before { border-color : #CCC transparent transparent transparent; bottom : auto; top : -1px; } .scenario .speech.tail.top:after { border-color : #FFF transparent transparent transparent; bottom : auto; top : 0px; } .scenario .speech.highlight { border-width : 3px; font-weight : bold; } .scenario .speech.highlight.tail:before { border-width : 18px; bottom : -3px; right : -20px; } .scenario .speech.highlight:after { bottom : 0; } .scenario .speech.highlight.tail.left:before { left : -20px; right : auto; } .scenario .speech.highlight.top:before { top : -3px; } .scenario .speech.highlight.top:after { top : 0; } /*--------Message Feed ---------------*/ .scenario .messageFeed { position : relative; text-align : left; } .scenario .messageFeed .speech { float : none; left : 0; max-width : 70%; display : inline-block; cursor : default; } .scenario .messageFeed .clearfix:not(.active) .audio { display : none; } .scenario .messageFeed .feed-content > *{ margin-bottom : 10px; width : 100%; } .scenario .messageFeed .feed-content > *:last-child { margin-bottom: 0px; } .scenario .messageFeed > * { margin-left : auto; right : 0; } .scenario .messageFeed .feed-content { position : absolute; bottom : 0px; transition : padding-bottom 350ms cubic-bezier(0.445, 0.020, 0.020, 0.995); width : 100%; } .scenario .messageFeed .animate { transition : bottom 350ms cubic-bezier(0.445, 0.020, 0.020, 0.995); position : absolute; } .scenario .messageFeed .feed-content.noAnimate { transition : none; } .scenario .messageFeed .feed-content > *:not(.active){ opacity : 0.7 !important; } .scenario .endScene .preamble { max-width : 60%; align-items : center; -ms-flex-align : center; } .scenario .scene.endScene .preamble .characterSpeech { margin-right : 30px; margin-top : 32px; margin-left : 0; } .scenario .endScene .preamble .speech, .scenario .endScene .preamble .btn { margin-left : 0; margin-right : 0; width : 100%; max-width : 80%; } /* Scenario Orientations */ .scenario.left .responses { width : 100%; } .scenario.left .speech { float : right; clear : both; } .scenario.left .responses .speech.sceneOption { max-width : 65%; } .scenario.left .speech:not(.sceneOption).characterSpeech { float : left; } .scenario.right .speech:not(.sceneOption).characterSpeech { float : right; } .scenario.left .character img { transform : scaleX(-1); } .scenario.left .endScene .preamble .characterSpeech{ margin-left : 30px; margin-right : 0; } @keyframes categoryCards-fail { 0% { transform : translateX(-10px); } 25%{ transform : translateX(10px); } 50%{ transform : translateX(-10px); } 75%{ transform : translateX(10px); } 100%{ transform : translateX(0); } } @keyframes categoryCards-pass { 20% { transform : translateY(0); font-size : 0.85em; width : 90%; top : 5%; left : 5%; } 70% { transform : translateY(0); } 85% { transform : translateY(-5%); } 100%{ transform : translateY(130%); width : 90%; top : 5%; left : 5%; font-size : 0.85em; } } @keyframes categoryCards-pass-icons { 0% { opacity : 0; transform : scale(0); } 15% { opacity : 0; transform : scale(0); } 30% { opacity : 1; transform : scale(1); } } .categoryCards .card.categoryCards-fail{ animation: categoryCards-fail 500ms ease-in-out; } .categoryCards .card.categoryCards-pass{ transform-origin : center; animation: categoryCards-pass 1.25s ease-in-out; } .categoryCards .card.categoryCards-pass .fa-check { animation : categoryCards-pass-icons 1.25s ease-in-out; transform-origin : center; }