[data-mob="true"] #elStatus, [data-mob="true"] #fsBox {
    position: fixed;
    z-index: 19;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 0;
    background: var(--grad) !important;
    max-width: 100%;
    min-width: 100%;
    padding: 10px;
}










.aspect_inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/*TEMP - fix for V&R causing H scroll in pod*/

[data-t_group="tabs"] {
    overflow: hidden;
}





/* body[data-mob="true"] */

.mob_pod_nav {
    transform: translateX(0);
    position: fixed;
    top: -50px;
    bottom: -50px;
    left: -50px;
    right: -50px;
    height: calc(100% + 100px);
    width: calc(100% + 100px);
    padding: 50px;
    background: var(--grad);
    z-index: 100;
    transition: opacity 0s 0s, transform 0s 0s;
    gap: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.mob_pod_nav > div {
    flex: 1;
    width: 100%;
    position: relative;
    padding: calc(0px + 25%) calc(0px + 12%);    
    gap: 8%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}


[data-mob="false"] .mob_pod_nav {
    display: none;    
}
[data-orient="landscape"] #navFS {
    opacity: 0;
    transform: translateX(200%);
    transition: opacity 0.9s 0.4s, transform 0s 1.3s;
}
[data-orient="landscape"] #navFS > div {
    opacity: 0;
    transition: opacity 0.5s 0s;
}



#goFS {
    height: 40px;
    width: 40px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #06253d11;
    background: #aaaaaa33;
    border-radius: 35px;
    border: 1px solid #06253d11;
    z-index: 101;
}
body[data-mob="false"] #goFS, 
body[data-fs="false"] #goFS,
body[data-ios="true"] #goFS {
    display: none;
}

#goFS span {
    color: #aaa;
    display: initial;
    font-size: 24px;
    width: fit-content;
    height: fit-content;
}
#elStatus:fullscreen #goFS .enterFS, #fsBox:fullscreen #goFS .enterFS,
#elStatus .exitFS, #fsBox .exitFS {
    display: none;
} 

#elStatus:fullscreen #goFS .exitFS, #fsBox:fullscreen #goFS .exitFS {
    display: block;
}  



.mob_pod_nav h1, .mob_pod_nav h3 {
    color: #ffffffaa;
    font-weight: 600;
}
.mob_pod_nav h3 {
    font-size: 28px !important;
}
.mob_pod_nav div.button {
    display: block;
    position: absolute;
    background: #ffffff50;
    font-size: 20px;
    padding: 8px 15px;
    border-radius: 100px;
}


#spinMeDismiss {
    display: block;
    background: #06253daa;
    font-size: 24px;
    padding: 4px 24px;
    border-radius: 100px;
    color: #fff;
    margin: 25px;
    text-transform: uppercase;
}


.mob_pod_nav .hide_below_480 {
    display: initial !important;
}





.mob_pod_nav .mark_complete {
    opacity: 0.8;
}
.mob_pod_nav .mark_complete.disabled {
    opacity: 0.8;
}

.mob_pod_nav span {
    font-size: 18px;
}






.mob_pod_nav  a.exit {
    background-image: url(https://template.effective.vision/wp-content/uploads/sites/3/2021/07/exit.png);
    background-position: 5px center;
    background-size: auto 75%;
    padding: 7px 12px 8px 44px;
    justify-content: flex-start;
}
.mob_pod_nav .nav a.exit * {
    font-size: 22px;
}




.mob_pod_nav .nav {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.mob_pod_nav .nav.top {
    flex-direction: column;
    gap: 20px;
}





/*spinMe cookie*/

.mob_pod_nav #spinMe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: #1377c5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12%;
}
.mob_pod_nav #spinMe img {
    height: auto;
    width: 160px;
    margin: 20px;
    opacity: 0.7;
}






/*----------- shrink -----------*/
.block.narrative {
    --rs-padding: calc(5px + (20px * var(--shrink)) );
}

body {
    --p-size: 18px;
    --li-size: 18px;
    --tbody-size: 18px;
    --thead-size: 22px;
    --h-size: 22px;
    --shrink: 1; /*max possible = ~0.55*/
    --resize: 1;
}


.pod_shrink {
 /*fallback defaults..........17px*0.58 = 10px = absolute min. on phones*/
    --p-ft-size: 17px;
    --li-ft-size: 17px;
    --tbody-ft-size: 17px;
    --thead-ft-size: 17px;
    --h-ft-size: 17px;
    --shrink: 1; /*max possible = ~0.55*/
    --resize: 1;
}

.text, .p_size, p {
    --p-size: calc(var(--shrink) * var(--p-ft-size) * var(--resize) );
    font-size: var(--p-size); 
}
.text h3, .text h3 > p, .h_size, 
.n_inner h2, .n_inner h3  {
    --h-size: calc(var(--shrink) * var(--h-ft-size) * var(--resize) );
    font-size: var(--h-size); 
}


.text li {
    --li-size: calc(var(--shrink) * var(--li-ft-size) * var(--resize) );
    font-size: var(--li-size); 
}
.thead    {
    --thead-size: calc(var(--shrink) * var(--thead-ft-size) * var(--resize) );
    font-size: var(--thead-size); 
}
.tbody    {
    --tbody-size: calc(var(--shrink) * var(--tbody-ft-size) * var(--resize) );
    font-size: var(--tbody-size); 
}
.custom_size {
    --c-size: calc(var(--shrink) * var(--c-ft-size) * var(--resize) );
    font-size: var(--c-size); 
}


.width {
    width: calc(var(--shrink) * var(--item_width));
}
.height {
    height: calc(var(--shrink) * var(--item_height)) !important;
}

/*----------- resize -----------*/





/*----------- layout -----------*/

body{
    --pod-width: 1100;
    --aspect-adj: 0;
}

.blocks_wrapper{
    padding-right: calc(var(--shrink) * 10px);    
    background: #fff;
}
.blocks_wrapper{
  padding-bottom:  calc(var(--shrink) * 30px);  
}
.block_outer {
    display: flex;
	position: relative;
    padding: calc(var(--shrink) * 30px);
    padding-bottom: 0;
    gap: calc(var(--shrink) * 20px);
}
.block_outer.layout_H {
    --block-height: calc(var(--pod-width) * 0.50px); /*0.53 = average, 0.46 = min*/
    max-height: var(--block-height); 
}

.block_outer:nth-child(2n){
    flex-direction: row-reverse;
}

.block_outer > .block {

    position: relative;
  /*  border: 1px dashed lightgrey;*/

}


.block_outer.layout_H > .block.visual {
    width: var(--v-percent); 
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.block_outer.layout_H > .block.visual > div {
    max-width: 100%;
    max-height: 100%;
}
.block_outer.layout_H > .block.narrative {
    width: var(--n-percent);
}

.block_outer.layout_V {
    flex-direction: column;
}
.block_outer.layout_V > .block {
    flex: 0 100%;
}

.block_outer.layout_V > .block .n_outer {
    margin-top: calc(-40px * var(--shrink));
    gap: calc(20px * var(--shrink));
    padding: calc(10px * var(--shrink));
}



/*----------- fullscreen -----------*/





:fullscreen {
    background: var(--grad);
    padding: 5px;
}

:fullscreen > div {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--paper);
    overflow: auto;
}
:fullscreen .blocks_wrapper{
    padding: 0;
    padding-bottom: calc(var(--shrink) * 20px);
}

/*
.closeFullscreen {
    position: absolute;
}

.block_outer  .toggleFullscreen {
    position:absolute;
    z-index: 5;
}
*/

/*table*/

.table:fullscreen {
    --shrink: 1;
}
.block.visual .table:fullscreen .grid_table {
    min-height: initial;
}

.block.visual .media.table .switchFullscreen {
    display: none;
}

.block.visual .media.table:fullscreen .switchFullscreen {
    display: block;
    background: transparent !important;
    display: flex;
    padding: 2vw;
    justify-content: center;
}
.block.visual .media.table:fullscreen  .switchFullscreen div {
    display: block;
    position: absolute;
    background: #ffffff50;
    font-size: 20px;
    padding: 8px 15px;
    border-radius: 100px;
}
.block.visual .media.table:fullscreen  .switchFullscreen div:hover {
    background: #ffffff60;
}




/*-------------------- single pod nav -------------------*/

.single_pod_nav_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
    z-index: 1;
}
.single_pod_nav_container a, .single_pod_nav_container form {
    min-width: 10%;
    min-height: 30px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

#podTimer {
   margin: 0;
   font-weight: 600;
   color: #ffffffaa;
}

form.mark_complete, div.mark_complete {
    background-image: url(https://template.effective.vision/wp-content/uploads/sites/3/2021/07/tick.png);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    padding-left: 37px;
    font-size: 15px;
    font-family: var(--font);
    font-weight: 600;
    background-color: transparent !important;
    opacity: 0.7;
    transition: opacity 0.3s;
    color: #fff;
    position: relative;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
        margin: 0;
}
form.mark_complete:not(.disabled):hover {
    opacity: 1;
}
input.mark_complete {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background-color: transparent !important;
}
input.mark_complete:hover {
    background-color: transparent;
}
.mark_complete.disabled, .mark_complete .disabled {
    pointer-events: none;
    opacity: 0.25;
}
.mark_complete.logged_out {
    opacity: 0.25;
}

#mark_incompl_input .hover_on {
    position: absolute;
    width: fit-content;
    white-space: nowrap;
    opacity: 0;
}
#mark_incompl_input:hover .hover_on {
    opacity: 1;
}
#mark_incompl_input:hover .hover_off {
    opacity: 0;
}
#mark_incompl_input:hover {
    background-image: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/vote_red-cross.svg);
}

a.exit, a.prev, a.next {
    background-size: contain;
    background-repeat: no-repeat;
    padding: 5px;
    font-size: 15px;
    font-family: var(--font);
    font-weight: 600;
    background-color: transparent;
    opacity: 0.7;
    transition: opacity 0.3s;
    border-radius: 0px;
}
a.prev {
    background-image: url(https://effective.vision/wp-content/uploads/2022/05/prev.svg);
    background-position: 5px 0px;
    padding: 5px 5px 5px 30px;
    transition: opacity 0.3s, background-position 0.5s;
    justify-content: flex-start;
}
a.next {
    background-image: url(https://effective.vision/wp-content/uploads/2022/05/next.svg);
    background-position: right 5px center;
    padding: 5px 30px 5px 5px;
    transition: opacity 0.3s, background-position 0.5s;
    justify-content: flex-end;
}

a.exit {
    background-image: url(https://template.effective.vision/wp-content/uploads/sites/3/2021/07/exit.png);
    background-position: right;
    padding: 5px 36px 5px 5px;
    justify-content: flex-end;
}

a.exit:hover, a.prev:hover, a.next:hover {
    background-color: transparent;
    opacity: 1;
}

a.prev:hover {
    background-position: 0px 0px;
}
a.next:hover {
    background-position: right 0px center;
}