#scrolly.content.full-view {position:relative;margin-bottom: 2rem;}
.article > #scrolly.content.full-view {order:1;}
.article > .summary {max-width:100%;padding: 0;}


#contenedor-mapa {left:0;margin: 0;}
#map {top:0;left:0;position:-webkit-sticky;position: sticky;width:100%;height:100vh;}

/* .wrapper.mainheader.minify {position:relative !important;} */
.wrapper.breakNews {display: none;}
/* body .mainbodier {overflow:visible} */

/* article */
#features {padding-top:10vh;/* padding-bottom:10vh;*/}
.hidden {visibility: hidden;}
.centered {width:50vw;margin: 0 auto;}
.lefty {width:32vw;margin-left:5vw;}
.righty {width:32vw;margin-left:64vw;}
.fully {width:100%;margin: auto;}


.light {color: #242424;background-color: #fafafa;border-style: solid;border-width: 0.01px;border-color: #9b9b9b;opacity: 99%;box-shadow: 5px 3px 3px grey;}
.dark {color: #fafafa;background-color: #444;}

.step {padding-bottom: 50vh;opacity: 0.55;}
.step.active {opacity: 1;}

.step div {padding: 3rem 3.5rem;font-size: 1.4rem;line-height: 2.2rem;overflow: hidden;display: block;}
.step h3 {font-size: 2rem;line-height: 2.8rem;font-weight: 500;}

/*lefty/righty*/
.step:not(.fully) img {width: 100%;float:left;margin-right:1.2rem;}
.step.active p, .step p,
#story .step p {padding:0;}
.step.active p b, .step p b,
#story .step p b {font-weight:500;}
.step.active p, .step p,
#story .step p {font-size: 1.8rem;line-height:2.6rem;font-weight: 400;width:100%;text-align: left;}

/*fully*/
.step.fully {opacity:1;}
.step.fully,.step.fully div {display:flex;flex-flow:column;}
.step.fully img {order:2;}
.step.fully p {order:1;}

.step.fully img {max-width: 90vw;margin: 0 auto;}

.step.fully div {padding: 4rem;}
.step.fully .light {border-width: 0.01px 0;}
.step.fully:not(.hidden) h3 {max-width: 50%;margin: 0 auto;}

/* iframe */
.step iframe {width: 100%;height: calc(56.25vw / 2);}

/* ultima cartela */
.step.fully:last-of-type {padding-bottom: 0;opacity: 1;}
.step.fully:last-of-type > div {padding-bottom: 3vh;}

/* .artBody > .readtime {visibility: hidden;} */

/* primer cartela */
div#Charter00 {position: absolute;top: 0;}
div#Charter001 {padding-top: 50vh;}

div#Charter00.step.fully .light{padding:0}
div#Charter00.step.fully > div img {max-width: 100%;width: 100%;}

/* ultima cartela */
div#Charter12\.1.step.fully .light {padding: 0;box-shadow: 5px 3px 3px grey;}
div#Charter12\.1.step.fully .light h3 {padding:4rem}
div#Charter12\.1.step.fully > div img {max-width: 100%;width: 100%;}
/* div#Charter12\.1.step .light {opacity: 89%;border: none;box-shadow: none;} 
div#Charter12\.1.step.fully .light {padding: 0;}
div#Charter12\.1.step.fully p, div#Charter12\.1.step.fully > div img {max-width: 100%;width: calc(100% + 8rem);}
div#Charter12\.2.step iframe {height:56.25vw;margin:0}*/


@media (min-width: 750px) {
	.step.fully p,
    .step.fully div > img {max-width: 50%;margin: 0 auto;}
}

@media (max-width: 750px) {
	.centered,.lefty,.righty {width: 90vw;margin: 0 auto;}
}
 

  /* Solucionar el problema en el navegador móvil donde el desplazamiento se rompe  */
  .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
  .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan
	.mapboxgl-canvas {
	touch-action: unset;
  }
  

/* al 100% de la pantalla */
.artBody #scrolly.content.full-view {left: calc(-1* (((100vw + 2rem) - 108rem) / 2));margin-right: calc(-1* (((100vw + 2rem) - 108rem) / 2));}
@media only screen and (max-width: 1023px) { .artBody #scrolly.content.full-view {margin-right: 0;margin-left: -6rem;}}
@media only screen and (max-width: 959px){.artBody #scrolly.content.full-view {left: -6rem;}}
@media only screen and (max-width: 844px) and (orientation:landscape){.artBody #scrolly.content.full-view {left: 0;margin-left:0;width:100%}}
@media only screen and (max-width: 440px) and (orientation:portrait){.artBody #scrolly.content.full-view {left: 0;margin-left: 0;width:100%}}

/* flecha de scroll vertical */
#features:before {content: "";position: absolute;background: url("https://img2.rtve.es/css/rtve.2022.noticias/ucrania-TE_PUCRAN/crisis-gas/i/raton.png");background-size: 100%;background-repeat: no-repeat;width: 5.9rem;height: 7.5rem;top:0;left: 50%;margin-left:-3rem;margin-top:-3.75rem;z-index:1}
/* movimiento */
#features:before {animation:swipe 1s forwards;transition:all .2s;margin-top:0;animation-delay:1s;}

@keyframes swipe{
   0%{margin-top:1rem;}
   5%{margin-top:.5rem;}
   50%{margin-top:5rem;}
   100%{margin-top:1rem;}
}


/* spinner */
.spinnBox {height:100%;width: 100%;position: absolute;top:0;left:0;z-index:3;
    display:flex;background: rgba(255, 255, 255, 0.85);
    flex-direction: column;flex-wrap:nowrap;align-items:center;justify-content:center;}
.spinn,.spinn span {height: 1.4em;display: inline-block}
.spinn {text-align: center;width: 8em;left: 50%;top: 50vh;margin: -.7em 0 0 -4em}
.spinn span {float: left;margin: 0 .3em;width: 1.4em;border-radius: 100%;-webkit-animation: bouncedelay 2s infinite ease-in-out;animation: bouncedelay 1.8s infinite ease-in-out;-webkit-animation-fill-mode: both;animation-fill-mode: both}

.spinn .ball01 {-webkit-animation-delay: -.48s;animation-delay: -.48s}
.spinn .ball02 {-webkit-animation-delay: -.32s;animation-delay: -.32s}
.spinn .ball03 {-webkit-animation-delay: -.16s;animation-delay: -.16s}

@-webkit-keyframes bouncedelay {
    0%,100%,80% {-webkit-transform: scale(.1)}
    40% {-webkit-transform: scale(1)}
}

@keyframes bouncedelay {
    0%,100%,80% {transform: scale(.1);-webkit-transform: scale(.1)}
    40% {transform: scale(1);-webkit-transform: scale(1)}
}

.ball01 {background: #ffa000}
.ball02 {background: #f98307}
.ball03 {background: #f56a0f}
.ball04 {background: #f05014}
.hddn {display:none;}