/*********************************************
 * DPF COMMON STYLES FCV: 27/11/2019
 *********************************************/
.loading-spinner {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1000;
	position: absolute;
    background: transparent;
	background-color: #2b445a !important;
    background-size: 100% 100%;
}  
.loading-spinner.fade {
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s linear, visibility 0.5s linear;
	transition-delay: 1s;
}
.loading-spinner:before {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    height: 100%;
    width: 100%;
    content: "";
    /*background-color: rgb(255 204 5);
    background-image: -webkit-gradient(radial, center center, 0, center center, 460, color-stop(0%, rgb(231 229 223)), color-stop(140px, #3b5159));
    background-image: -webkit-radial-gradient(circle, rgb(231 229 223) 0%, #3b5159 200px);*/
    background-image: radial-gradient(circle, rgb(231 229 223) 0%, #2b445a 200px);
    background-size: 100% 100%;
    opacity: 0;
    -webkit-animation-name: loadingSpinnerGradientAnimation;
    -moz-animation-name: loadingSpinnerGradientAnimation;
    animation-name: loadingSpinnerGradientAnimation;
    -webkit-animation-duration: 5s;
    -moz-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
.loading-spinner .loading-spinner-inner {
    position: absolute;
    left: 50%;
    top: 50%;
	transform: translate(-50%, -50%)!important;
    margin: unset!important;
    width: 100%;/*18em;*/
    height: 100%;/* 6em;*/
}
.loading-spinner .loading-spinner-inner {
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-name: fade_in;
    -moz-animation-name: fade_in;
    animation-name: fade_in;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear;
}
.loading-spinner .loading-spinner-inner div {
    width: 100%;
    height: 100%;
    background-position: center;/*-10%;*/
    background-repeat: no-repeat;
    position: absolute;
	background-size: var(--lss);/*cover;*/
	background-image: var(--lsp);
}
@-webkit-keyframes loadingSpinnerGradientAnimation {
    0% {
        opacity: 0.3
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0.3
    }
}

@-moz-keyframes loadingSpinnerGradientAnimation {
    0% {
        opacity: 0.3
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0.3
    }
}

@-o-keyframes loadingSpinnerGradientAnimation {
    0% {
        opacity: 0.3
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0.3
    }
}

@keyframes loadingSpinnerGradientAnimation {
    0% {
        opacity: 0.3
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0.3
    }
}
/* LOGO STUFF */
.logo {
    position: fixed!important;
    z-index: 999;
    filter: contrast(0.75);
    pointer-events: all;
    cursor: pointer;
    display: inline-flex;
    left: 15px;
    width: 130px;
    height: 60px;
    margin-top: 0px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    -webkit-transition: all 0.5s ease-in-out 0ms;
    -moz-transition: all 0.5s ease-in-out 0ms;
    -o-transition: all 0.5s ease-in-out 0ms;
    transition: all 0.5s ease-in-out 0ms;
}
.logo:hover { 
    transform: scale(1.15); 
    filter: grayscale(1);
}
.logo.invert {
	mix-blend-mode: screen;
	filter: brightness(1.5);
}
.portrait .logo{
    margin-top: 0px;
    transform: scale(0.75);
    left: 0;
}
:-webkit-full-screen .logo {

}
:-moz-full-screen .logo {
   
}
:-ms-full-screen .logo {

}
:-fullscreen .logo {
    
}
/* HEADER STUFF */
.main-header {
    position: fixed;
    pointer-events: none;
    display: flex;
    flex-direction: row;
    top: 0;
    margin-left: 0px;
    width: 100%;
    height: 60px;
    background: linear-gradient( var(--primary) 28%, rgb(0 0 0 / 0%) 100%);
    z-index: 14;
    opacity: 1;
    transition: transform .3s linear;
}
.dpftitle {
    display: flex;
    cursor: pointer;
    flex-direction: column;
    border-bottom: unset;
    opacity: 1;
    user-select: none;
    color: white;
    margin-left: 160px;
    margin-right: 60px;
    margin-bottom: 10px;
    margin-top: 10px;
    z-index: 10;
    font-family: SourceSansProLight;
    -webkit-transition: all 0.5s ease-in-out 0ms;
    -moz-transition: all 0.5s ease-in-out 0ms;
    -o-transition: all 0.5s ease-in-out 0ms;
    transition: all 0.5s ease-in-out 0ms;
}
.dpftitle.invert {
    position: absolute;
    -webkit-transform: translate(-7em,18vh);
    transform: translate(-7em, 18vh);
    font-family: SourceSansProLight;
    font-weight: 600;
    top: 0;
    width: 17%;
    max-width: 20%;
    border-bottom: none;
}
.main-header .dpftitle .unitHeader{
    font-size: 1.25vmin;
    line-height: 15px;
    padding-bottom: 5px;
    border-left: 1px solid #fff;
    padding-left: 20px;
}
.main-header .dpftitle .unitTitle{
    font-weight: 700;
	letter-spacing: 0.05em;
	font-size: 1.5vmin;
    line-height: 15px;
    margin-bottom: 10px;
    border-left: 1px solid #fff;
    padding-left: 20px;
}
.main-header .dpftitle.invert .unitHeader{
    line-height: 1.25em;
    letter-spacing: 0.1em;
}
.main-header .dpftitle.invert .unitTitle{
    line-height: 1.25em;
    letter-spacing: 0.1em;   
}
.tablet.portrait .dpftitle{
    max-width: 75vw;
    font-size: 3vmin!important;
    width: 191vw;
    top: -25px;
}   
.tablet.landscape .dpftitle.invert{
    max-width: 25%;
    width: 25%;
    font-size: 2.5vmin;
    /* top: -54px; */
    -webkit-transform: translate(-105px, 120px);
    transform: translate(-105px, 120px);
}
.android.mobile.portrait .dpftitle {
    max-width: 75vw;
    font-size: 3vmin!important;
    margin-left: 160px;
    position: absolute;
}
.tablet.portrait .dpftitle .unitTitle,
.android.mobile.portrait .dpftitle .unitTitle,
.android.mobile.landscape .dpftitle .unitTitle {
    font-size: 3vmin;
    line-height: 3vmin;
    padding-left: 15px;
}
.tablet.portrait .dpftitle .unitHeader,
.android.mobile.portrait .dpftitle .unitHeader,
.android.mobile.landscape .dpftitle .unitHeader {
    font-size: 3vmin;
    line-height: 3vmin;
    padding-bottom: 10px;
    padding-left: 15px;
}
.android.mobile.landscape .dpftitle {
    max-width: 80%;
    /* font-size: 14px; */
    width: 100%;
}
.android.mobile.landscape .dpftitle.invert {
    width: 25%;
    -webkit-transform: translate(-151px, 40px);
    transform: translate(-151px, 40px);
}
.fullscreen.android.mobile.landscape .dpftitle.invert {
    -webkit-transform: translate(-151px, 65px);
    transform: translate(-151px, 65px);
}
.tablet.landscape .dpftitle{
    max-width: 70vw;
    font-size: 14px;
    width: 70vw;
    top: -54px;
}    
.portrait .main-header .dpftitle .unitHeader{
    font-size: 1.75vmin;
}
.portrait .main-header .dpftitle .unitTitle{
    font-size: 2.25vmin;
}
.portrait .dpftitle.invert{
	-webkit-transform: translate(-140px, 100px);
    transform: translate(-140px, 100px);
    top: 0;
    width: 80%;
    max-width: 80%;
}
.toter{
        background-image: url('ui/icons/xO.svg');
        background-size: 24px;
        background-color: #2b445a3b;
        background-position: center;
        bottom: 7%;
        right: 1%;
        z-index: 10;
        box-shadow: 0 10px 40px 0 #7d7d7d;
        border: 2px solid #505050;
        border-radius: 50%;
        position: absolute;
        /* padding: 2px; */
        width: 30px;
        height: 30px;
        z-index: 99;
        cursor: pointer;
    }
.toter.active{
    background-image: url('ui/icons/x.svg');
}
/* COMMON CLASSES */
.draggable {
    touch-action: manipulation;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    height: 50vh;
    overflow: auto;
    position: relative;
}
.nowrap {
    white-space: nowrap;
}
/* CONTENT STUFF */
.relative {
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
    transition: all 0.4s linear;
}
.iconized{
    background-image: url('ui/icons/cerebro_blanco.svg');
    background-size: 35px;
    background-repeat: no-repeat;
    background-position: center;
}
.circled{
    border-radius: 50%!important;
}
.leftie {
	transform: translate(-100vw,0);
	 -webkit-transition: all 0.5s ease-in-out 0ms;
    -moz-transition: all 0.5s ease-in-out 0ms;
    -o-transition: all 0.5s ease-in-out 0ms;
    transition: all 0.5s ease-in-out 0ms;
}
.rightie {
	/*transform: translate(-35vw,0);*/
	width: 100vw!important;
	max-width: 100vw!important;
	 -webkit-transition: all 0.5s ease-in-out 0ms;
    -moz-transition: all 0.5s ease-in-out 0ms;
    -o-transition: all 0.5s ease-in-out 0ms;
    transition: all 0.5s ease-in-out 0ms;
}
.landscape .rightie {
	transform: translate(-35vw,0);
}
.content--inline {
    display: inline;
    background: transparent;
    max-width: 100%;
}
.inline--image {
    max-width: 100%;
    width: 100%;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 3px solid darkgreen;
    border-radius: 20px;
}
.iframeInline{
	width: 100%;
	height: 100%;
}
.content--inline iframe {
    max-width: 100%;
    width: 100%;
    height: 35vh;
    margin: 20px 0 20px 0;
}
/* usada para ocultar imagenes o cosas en plantillas que se muestran al lanzar el texto a completo*/
.showMe{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% top;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    margin-top: 5%;
    left: calc(0% - 5px);
    max-width: 90%;
    max-height: 60vh;
    height: 60vh;
    position: absolute;
    transition: all 0.3s ease-in-out;
}
.showMe.active{
    opacity: 1;
    visibility: visible;
}
/* ATTRIBUTES */
.cover{
    object-fit: cover!important;
    height: 100vh!important;
}
.fullHeight{
    height: 100vh!important;
    transition: height 0.5s linear;
}
.fullWidth{
    left: 0!important;
    width: 100%!important;
	flex: 100%!important;
    z-index: 1;
    opacity: 1;
}
.fullWidth.instructive {
    filter: unset!important;
}
.noWidth{
    width: 0vw!important;
    opacity: 0;
	flex: 0!important;
}
.centered{
    left: 50%!important;
    transform: translateX(-50%)!important;
	position:relative;
}
.imageCircled{
	object-fit: cover!important;
	object-position: center;
    width: 21em!important;
    height: 21em!important;
    border-radius: 100%!important;
}
.decorative {
    filter: blur(0px);
    border: none;
    -webkit-transition: 0.5s -webkit-filter linear;
    -moz-transition: 0.5s -moz-filter linear;
    -moz-transition: 0.5s filter linear;
    -ms-transition: 0.5s -ms-filter linear;
    -o-transition: 0.5s -o-filter linear;
    transition: 0.5s filter linear, 0.5s -webkit-filter linear;
}
.instructive {
    filter: blur(10px);
    -webkit-transition: 0.5s -webkit-filter linear;
    -moz-transition: 0.5s -moz-filter linear;
    -moz-transition: 0.5s filter linear;
    -ms-transition: 0.5s -ms-filter linear;
    -o-transition: 0.5s -o-filter linear;
    transition: 0.5s filter linear, 0.5s -webkit-filter linear;
}
.portrait .instructive{
	filter: blur(10px)!important;
}
.fcvleft .instructive{
    filter: unset!important;   
}
.invisible{
  visibility: hidden;
}
.black{
  color: black!important;
}
.white{
  color: white!important;
}
.ln2-span-header-number{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 1px;
    min-width: 1.5em;
    min-height: 1.5em;
    line-height: 1em;
    padding: 0;
	font-family: "Open Sans",Helvetica,Arial,sans-serif;
    font-weight: 400;
    font-size: 1.5em;
    text-align: center;
    color: var(--title);
    background-color: var(--primary);
    margin-right: 0.25em;
	background-repeat: no-repeat;
	background-position: center;
}
.ln2-span-header-title{
    display: inline-flex;
    align-items: center;
    font-size: 1.25em;
    min-height: 1em;
    width: unset;
    line-height: 1.5em;
	user-select: text;
}
.fragment h2.transparent{
	border-bottom: 2px transparent solid;
}
.fragment h2.transparent .ln2-span-header-title {
	line-height: 1;
}
.mobile.portrait.libronet .ln2-span-header-title {
    font-size: 1rem;
}
.mobile.portrait.libronet .ln2-span-header-number{
    max-height: 50px;
    font-size: 1.25rem;
}
/* TEXT STYLES */
/* Para añadir elipsis en mas de x lineas de webkit-line*/
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}
.mark {
  background-color: #f4d03f;
  border-radius: 4px;
  padding: 4px 0;
  transition: background-color .3s ease-in-out;
}
.caja-think {
    display: inline-block;
    position: relative;
    padding: 18px 24px 18px 80px;
    border-radius: 8px;
	margin-right: 3.3019%;
    border: 2px grey solid;
	width: 100%!important;
}
:root .caja-think{
	--ctBg: url(ui/icons/icons/think-icon.svg);
}
.caja-think:before {
    content: '';
    display: block;
    position: absolute;
    background-color: white;
    top: 16px;
    left: 12px;
    width: 2em;
    height: 2em;
    background-position: center;
    background-repeat: no-repeat;
    /*border-radius: 50%;*/
    background-size: contain;
	background-image: var(--ctBg)!important;
} 
h2 + p.caja-think {
	margin-top: 0em!important;
}
.end { 
    margin-right: 0 !important; 
    margin-bottom: 0!important;
}
/* SURE STUFF */
.warning {
	position: absolute;
	width: 100%;
    display: none;
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s, visibility .4s;
	-webkit-transition: -webkit-transform 0.8s ease-in-out;
    -moz-transition: -moz-transform 0.8s ease-in-out;
    -o-transition: -o-transform 0.8s ease-in-out;
    transition: transform 0.6s ease-in-out, opacity .8s, visibility .8s;
	transform: translate(0, 0, 0);
    -webkit-transform: translate(0, 0, 0);
    -moz-transform: translate(0, 0, 0);
}
.warning.active {
	visibility: visible;
    opacity: 1;
	display: block;
	transform: translate(0,100vh); 
    -webkit-transform: translate(0,100vh,0);
    -moz-transform: translate(0,100vh,0);
}
.mobile.landscape .warning.active {
	top: -15%;
}
.mobile.portrait .warning.active {
	top: -5%;
}
.fullscreen.mobile.landscape .warning.active {
	top: 0%;
}
.fullscreen.mobile.portrait .warning.active {
	top: 2%;
}
.warning .message {
	position: fixed;
    bottom: 4vh;
    width: 40vw;
    line-height: 1.2em;
    transform: translate(-50%, 0%);
    font-family: 'SourceSansPro';
    left: 50%;
    font-size: 1rem;
    color: #FFF;
    text-align: center;
    background-color: rgb(178 26 43 / 90%);
    box-shadow: 0 10px 40px 0 #7d7d7d;
    border: 2px solid #7d7d7d;
    border-radius: 8px;
    padding: 18px;
    transition: all 0.2s linear 0.1s;
}
.portrait .warning .message {
	width: 70vw;
    left: 14vw;
    transform: unset;
}
/* ZOOM */
.imgZoomContainer {
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.3s;
    /* color: #fff; */
    user-select: none;
    display: none;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
}
.imgZoomContainer.show {
    opacity: 1;
    display: inline-block !important;
    animation: opacityAnimation 1s forwards;
}
.imgZoomContainer.hide {
    opacity: 0;
    display: inline-block !important;
    animation: opacityAnimation 1s forwards reverse;
}
.imgZoomContainer img{
    transition: all 0.5s;
}
.imgZoomContainer .imgWrapper {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    background-color: #000;
}
.imgZoomContainer .imgWrapper .imgContent .imgZoom{
    display: inline-block;
    vertical-align: middle;
    max-width: 45vmax;
    max-height: 100%;
    width: auto;
    height: auto;
    position: relative;
    object-fit: cover; 
    cursor: zoom-out;
}
.portrait .imgZoomContainer .imgWrapper .imgContent .imgZoom{
    height: min-content!important;
}
.imgZoomContainer .imgWrapper .imgContent{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    white-space: nowrap;
    font-size: 0;
    cursor: pointer;
}
.imgZoomContainer .imgWrapper .imgContent:before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
@keyframes opacityAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
button.zoom{
    margin: 1% 3% 0% 0%;
    padding: unset;
    border-radius: 999px;
    position: absolute;
    right: 0;
    width: 35px;
    height: 35px;
    color: #fff;
    /* background-color: #3028286e; */
    background-color: #2b445a3b;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url('ui/icons/zoom-in.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    box-shadow: unset;/* 0 0px 4px 0 #7d7d7d;*/
    border: unset;/*2px solid #505050;*/
    pointer-events: none;
}
/* MEDIAOBJECT Y SCORABLES */
.mediaObject .anchor {
    background-image: url('ui/images/object.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    cursor: pointer;
    border-radius: 1px;
    height: inherit;/*auto;*/
    width: inherit;
    background-color: inherit;/*black*/
}
.dpf23565v div .twothird .contentText .mediaObject .anchor {
    border-radius: 1px!important;
}
.tablet.landscape .page-content.dpf1b .main-wrapper .content .media-wrapper .mediaObject .anchor {
    height: 47.5vh!important;
}
 .mediaObject .anchor video{
   /* z-index: -1;*/
 }
 .mediaObject .anchor audio{
	/*z-index: 0!important;
    position: absolute;*/
    width: 100%;
    height: 100%;
	min-height: 2em;
 }
 .media-wrapper .mediaObject .anchor.viewed{
    background-image: unset!important;
   /* background-color: black;*/
 }
.mediaObject .zoomAble {
    background-image: unset;
    background-size: unset;
    display: block;
    cursor: zoom-in;
    border-radius: 1px;
	/*border: 1px darkgrey solid;*/
}
.mediaObject .anchor:after {
    content: " ";
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 80px;/*100%;*/
    height: 80px;/*100%;*/
    opacity: 0.75;
    /*filter: brightness(0.75);*/
    overflow: hidden;
    background-image: url('ui/icons/f6.svg');
    background-repeat: no-repeat;
    background-size: contain;/*10%;*/
    display: inline-block;
    background-position: center center;
    display: block;
    background-color: transparent;
    animation: lightning  4s ease-in-out infinite;
    transition: all 0.6s ease;
    border-radius: 20px;
}
/* after/before doesn¡t work on video tag
.mediaObject .anchor video:after {
    background-image: url('ui/images/video.jpg');
}
.mediaObject .anchor video:before {
    content: " ";
    overflow: hidden;
    background-image: url('ui/images/video.jpg');
}
*/
.mediaObject .anchor audio:after {
	content: " ";
    overflow: hidden;
    background-image: url('ui/images/trans.png');
}
.mediaObject .anchor.viewed:after  {
    display: none;
}
.mediaObject .anchor.notCompleted:after {
    background-color: #ff000066;
    background-image: url('ui/icons/xO.svg');
    background-size: 25%;
}
.mediaObject .zoomAble:after {
    content: "";
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0.75;
    overflow: hidden;
    background-image: unset;
    background-repeat: no-repeat;
    display: inline-block;
    background-position: center center;
    display: block;
    background-color: #04040400;
    border-radius: 20px;
}
.mediaObject .zoomAble.notCompleted:after {
    background-color: #ff000066;
    background-image: url('ui/icons/xO.svg');
    background-size: 25%;
    animation: lightning 4s ease-in-out infinite;
}
.mediaObject .anchor img {
    margin: unset;
}
.mediaObject .zoomAble img {
    margin: unset;
}
.mediaObject .credit{
    background: rgba(0,0,0,.8);
    border-bottom-right-radius: 10px;
    bottom: 0;
    box-sizing: border-box;
    color: #fff;
    font-size: 11px;
    line-height: 1.2;
    max-width: 100%;
    opacity: 1;
    padding: 4px 8px;
    position: absolute;
    right: 0;
    transition: opacity .2s;
}
.innerQuestions .scorable.notCompleted:after {
	content:unset;
}
div .scorable.notCompleted:after {
    content: "";
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    display: inline-block;
    background-position: center center;
    display: block;
    background-color: #ff000066;
    background-image: url('ui/icons/xO.svg');
    background-size: 25%;
    animation: lightning 4s ease-in-out infinite;
    transition: all 0.6s ease;
	pointer-events: none;
}
div .reveal-banner.scorable.notCompleted:after {
    background-size: 105%;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
	cursor: pointer;
}
.digital-object{
    z-index: -1!important;
    position: relative;
    filter: grayscale(1);
    pointer-events: none;
}
.showNextFragment{
    position: relative;
    background-image: url('ui/icons/down.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    animation: lightning 4s infinite;
    background-position: center;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0px);
    width: 100%;
    height: 0px;
    display: block;
    text-align: center;
    opacity: 0;
    /*transition: opacity 0.3s, height 0.5s;*/
    transition: opacity .8s cubic-bezier(.165,.84,.44,1);
    will-change: opacity;
}
.dpf2btf div>.fragment.mediaObject {
    background-image: url('ui/images/object.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    cursor: pointer;
    border-radius: 1px;
    height: 100%;
    width: 100%;
    background-color: inherit;/*black*/
}
.dpf2btf div>.fragment.background--image::after {
	content: " ";
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0.75;
    overflow: hidden;
    background-image: url(ui/icons/f6.svg);
    background-repeat: no-repeat;
    background-size: 3em;
    display: inline-block;
    background-position: center center;
    display: block;
    background-color: transparent;
    animation: lightning 4s ease-in-out infinite;
    transition: all 0.6s ease;
    border-radius: 20px;
}
.fragment.background--image:before {
content: " ";
z-index: 4;
position: absolute;
/*
top: calc(50% - 60px);
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
*/
width: 100%;
height: 100%;
overflow: hidden;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'%3E%3C/circle%3E%3Cpolyline points='21 15 16 10 5 21'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 5em;/*contain;*/
display: inline-block;
background-position: center center;
display: block;
filter: drop-shadow(2px 4px 6px black);
background-color: #04040400;
animation: ping 2s ease-in-out infinite;/*lightning 3s ease-in-out infinite;*/
transition: all 0.6s ease;
cursor: pointer;
}

.fragment.background--image.played:before {
display: none;
}
.fragment.background--image.viewed:before {
display: none;
}
.mobile .fragment.background--image:before {
content: "";
z-index: 1;
position: absolute;
top: calc(50% - 60px);
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 120px;
overflow: hidden;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'%3E%3C/circle%3E%3Cpolyline points='21 15 16 10 5 21'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 50%;
display: inline-block;
background-position: center center;
display: block;
filter: drop-shadow(2px 4px 6px black);
background-color: #04040400;
animation: leBeat 3s ease-in-out infinite;
transition: all 0.6s ease;
}
.fragment.background--image.scorable.notCompleted:before {
display: none;
}
.reveal.opened ..fullWidth {
	width:100%!important;
}
.helpModal h1{
	font-size: 3rem;
    font-family: var(--font-family);
	border: unset;
	background: unset;
	margin: unset;
}
.helpModal .item-image svg{
	width: 6em;height: 6em;
}
.searchicon{
	display: none;
}