:root {
--tobii-base-font-size: 1rem;
--tobii-transition-duration: 0.3s;
--tobii-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
--tobii-zoom-icon-background: rgba(25, 41, 56, 0.94);
--tobii-zoom-icon-color: #fff;
--tobii-lightbox-background: rgba(0, 0, 0, 0.85);
--tobii-lightbox-z-index: 1337;
--tobii-caption-background: rgba(0, 0, 0, 0.8);
--tobii-caption-color: #eee;
--tobii-counter-background: transparent;
--tobii-counter-color: #fff;
--tobii-button-background: #fff;
--tobii-button-color: #fff;
--tobii-loader-color: #fff;
--tobii-slide-max-height: calc(100vh - 3.125em);
--tobii-slide-max-width: 100vw;
}

.tobii-zoom {
border: 0;
box-shadow: none;
display: inline-block;
position: relative;
text-decoration: none;
}

.tobii-zoom img {display: block;}

.tobii-zoom__icon {display:none;}
.tobii-zoom__icon::before {}
.tobii-zoom__icon svg {}

.tobii-is-open {overflow-y: hidden;}

.tobii-image,.tobii-is-open {touch-action: none;}

.tobii {
background-color: var(--primary-900);
bottom: 0;
box-sizing: border-box;
contain: strict;
font-size: var(--fs-base);
left: 0;
line-height: 1.5;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: 10000;
}

.tobii[aria-hidden=true] {
display: none;
}

.tobii *, .tobii :after, .tobii :before {
box-sizing: inherit;
}

.tobii__slider {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 3.125em;
will-change: transform;
}

.tobii__slider[aria-hidden=true] {
display: none;
}

.tobii__slide {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}

.tobii__slide:not(.tobii__slide--is-active) {
visibility: hidden;
}

.tobii__slide figure {
margin: 0 auto;
text-align: center;
display: inline-block;
position: relative;
}

.tobii__slide figure > img {
display: block;
margin: 0 auto;
height: auto;
max-height: var(--tobii-slide-max-height);
max-width: var(--tobii-slide-max-width);
width: auto;
}

.tobii__slide figure > span {
color: var(--text-on-inverse);
text-align: left;
}

.tobii__slide figure > p {
margin: 1em 0 0;
max-width: 100%;
word-wrap: break-word;
text-align: left;
color: var(--text-on-inverse);
line-height: 1.5;
}

.tobii__slide figure > figcaption {
background-color: var(--caption-background, var(--tobii-caption-background));
bottom: 0;
color: var(--caption-color, var(--tobii-caption-color));
font-size: 1.125em;
padding: .25em .5em;
position: absolute;
white-space: pre-wrap;
width: 100%;
}

.tobii__slide [data-type=html] video {
cursor: auto;
max-height: var(--tobii-slide-max-height);
max-width: var(--tobii-slide-max-width);
}

.tobii__slide [data-type=html] audio {
max-width: 100%;
}

.tobii__slide [data-type=iframe] {
-webkit-overflow-scrolling: touch;
transform: translateZ(0);
}

.tobii__slide [data-type=iframe] iframe {
height: var(--tobii-slide-max-height);
width: var(--tobii-slide-max-width);
}

.tobii__btn {
appearance: none;
color:var(--text-on-inverse);
cursor: pointer;
font: inherit;
line-height: 1;
margin: 0;
opacity: 1;
padding: 0;
position: absolute;
touch-action: manipulation;
will-change: opacity;
z-index: 1;
}

.tobii__btn svg {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1;
stroke: currentColor;
height: 3.75em;
pointer-events: none;
width: 3.75em;
}

.tobii__btn--next,
.tobii__btn--previous {
background:none;
border:none;
cursor:pointer;
top:1rem;
transform: translateY(0);
height:2.5em;
width:2.5em;
}

.tobii__btn--previous {
right: 7rem;
}

.tobii__btn--next {
right: 4rem;
}

.tobii__btn--close {
height: 2.5em;
opacity: 1;
right: 1rem;
top: 1rem;
width: 2.5em;
background: transparent;
color:var(--text-on-inverse);
  border: 0;
  outline: none;
  box-shadow: none;

}

.tobii__btn--close svg {
height: 100%;
transform: scale(1.4);
width: 100%;
  border: 0;
  outline: none;
  box-shadow: none;
}

.tobii__btn:disabled,
.tobii__btn[aria-hidden=true] {
cursor: default;
visibility: hidden;
}



.tobii__btn--previous::before,
.tobii__btn--next::before {
  font-family: '1stAuto';
  font-size: 2.5em;
  display: inline-block;
  line-height: 1;
}

.tobii__btn--previous::before {
  content: '\e937';
}

.tobii__btn--next::before {
  content: '\e911';
}



.tobii__counter {
background-color: var(--counter-background, var(--tobii-counter-background));
color: var(--text-on-inverse);
font-size: 1.25em;
left: .875em;
line-height: 1;
opacity: 1;
position: absolute;
top: .875em;
z-index: 1;
}

.tobii__counter[aria-hidden=true] {
display: none;
}

.tobii__loader {
display: inline-block;
height: 6em;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 6em;
}

.tobii__loader:before {
animation: spin 1s infinite;
border: 2px solid #949ba3;
border-radius: 100%;
border-top: 2px solid var(--loader-color, var(--tobii-loader-color));
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}

@keyframes spin {
to {
transform: rotate(1turn);
}
}

.tobii__slide .tobii-html {
background: #fff;
font-size: 1.125em;
max-width: 800px;
padding: 10px 20px;
}

@media screen and (prefers-reduced-motion: no-preference) {
.tobii__slider--animate:not(.tobii__slider--is-dragging) {
transition-duration: var(--transition-duration, var(--tobii-transition-duration));
transition-property: transform;
transition-timing-function: var(--transition-timing-function, var(--tobii-transition-timing-function));
}

.tobii__slide:not(.tobii__slide--is-active) {
transition-duration: var(--transition-duration, var(--tobii-transition-duration));
transition-property: visibility;
transition-timing-function: var(--transition-timing-function, var(--tobii-transition-timing-function));
}

.tobii__btn {
transition-duration: var(--transition-duration, var(--tobii-transition-duration));
transition-property: opacity, transform;
transition-timing-function: var(--transition-timing-function, var(--tobii-transition-timing-function));
will-change: opacity, transform;
}
}




@media screen and (max-width: 1024px) {
.tobii__slide {
align-items: flex-start !important;
padding-top: 2em; /* Adds space from the top */
  }

.tobii__slide > div {
width: 100%;
padding: 1em;
box-sizing: border-box;
  }

.video-title {
text-align: center;
font-size: 1.1em;
margin-bottom: 0.5em;
  }

.video-desc {
font-size: 0.95em;
line-height: 1.4;
margin-top: 0.75em;
padding: 0 0.5em;
text-align: left;
  }

  .tobii__slide iframe {
max-width: 100%;
height: auto;
aspect-ratio: 16 / 9;
margin: 0 auto;
display: block;
  }
}


@media screen and (min-width:1359px){
.tobii__btn--previous, .tobii__btn--next {top: 30%;transform: translateY(-30%);}
.tobii__btn--previous {left: 10rem;}
.tobii__btn--next {right: 10rem;}
.tobii__btn--previous::before, .tobii__btn--next::before {font-size: 4em;}
}



.tobii__slide {
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
  height: 100%;
}

.tobii__slide > div {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.tobii-youtube {
  width: 100%;
}

.tobii-youtube iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: none;
}

.video-title {
  font-size: 1.25rem;
  text-align: center;
  margin: 1rem 0 0.5rem;
  color: #fff;
}

.video-desc {
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 1rem;
  padding: 0 1rem;
  color: #fff;
  text-align: left;
}


