 
  <script src="js/framework.umd.js"></script>
  <script type="text/javascript">
    webcg.on('data', function (data) {
  for (var idCaspar in data) {
    var idTemplate = document.getElementById(idCaspar);
    if (idTemplate != undefined) {
      idTemplate.innerHTML = data[idCaspar].text || data[idCaspar];
    }
  }
})
webcg.on('play', function (direction) {
  const overlay = document.querySelector('.plansch');
  let currentLeft = parseInt(window.getComputedStyle(overlay).left, 10);
  // Swap intro and outro classes
  //overlay.style.opacity = 1;
  setTimeout(() => {
  overlay.style.left = (currentLeft + 1780) + 'px'; // Mover a la derecha
  }, 500);
  const overlay2 = document.querySelector('.planschw');
  let currentTop2 = parseInt(window.getComputedStyle(overlay2).top, 10);
  // Swap intro and outro classes
  //overlay.style.opacity = 1;
setTimeout(() => {
  overlay2.style.top = (currentTop2 - 110) + 'px'; // Mover a la derecha
}, 900);
})
webcg.on('stop', function () {
  const overlay = document.querySelector('.plansch');
  let currentLeft = parseInt(window.getComputedStyle(overlay).left, 10);
  // Swap intro and outro classes
  //overlay.style.opacity = 0;
  overlay.style.left = (currentLeft - 1780) + 'px'; // Mover a la derecha
   const overlay2 = document.querySelector('.planschw');
  let currentTop2 = parseInt(window.getComputedStyle(overlay2).top, 10);
  // Swap intro and outro classes
  //overlay.style.opacity = 1;
  setTimeout(() => {
  overlay2.style.top = (currentTop2 + 110) + 'px'; // Mover a la derecha
  }, 0);
})

  </script>
   <style type="text/css">
      html {
  /* Explicitly set background color */
  background-color: transparent;

  /* Disable scrollbars by clipping page overflow */
  overflow: hidden;

  /* Set default box-sizing to border-box for easier sizing of elements */
  box-sizing: border-box;

  /* Set default font family */
  font-family: Yle, Verdana, Arial, sans-serif;

  /* Set responsive root font size to 43.2px at 1080p */
  font-size: 4vh;

  -webkit-font-smoothing: antialiased;
}

*, *:before, *:after {
  /* Make box-sizing property easy to change by components if required */
  box-sizing: inherit;
}

@font-face {
  font-family: 'Yle-Black';
  src: url("../fonts/Yle-Black.ttf");
}

@font-face {
  font-family: 'museo700';
  src: url("fonts/MUSEOSANS_0.otf");
}
@font-face {
  font-family: 'museo900';
  src: url("fonts/MUSEOSANS_1.otf");
}

@font-face {
  font-family: 'Yle-Regular';
  src: url("../fonts/Yle-Regular.ttf");
}

@font-face {
  font-family: 'Yle-Bold';
  src: url("../fonts/Yle-Bold-Saami-uusi.otf");
}

/* General styles */

:root {

  --main-color: #dd4052;
  --dark-color: rgba(37, 37, 37, 0.8);
  --white-color: white;
  --gray-color: #565656;
  --black-color: #000000;
  --red-color: red;
  /* Define a variable for the margin of the overlay, ~70px at 1080p */
  --margin: 3.65vmax;
  --height: calc(12.6vw - 2 * var(--margin));
}

.containers {
            max-width: calc(23.5vw - 2 * var(--margin));
            height: calc(9.6vw - 2 * var(--margin));
            margin-left:300px;
            overflow: hidden;
            border:0px solid #3498db;
            position: relative;
            top: calc(11.80 * var(--margin));
            z-index: 999;

        }
.container {
            max-width: calc(77.5vw - 2 * var(--margin));
            height: var(--height);
            margin-left:300px;
            overflow: hidden;
            border: 0px solid #3498db;
            position: relative;
            
            top: calc(11.8 * var(--margin));

        }
.namn {
            max-width: calc(100vw - 2 * var(--margin));
            height: var(--height);
            color: white;
            line-height: 100px;
            text-align: center;
            position: absolute;
            
            background-color: var(--white-color);
            left: -1780px; /* Cambié 'top' a 'left' para moverlo horizontalmente */
            transition: left 1.0s ease; /* Cambié 'top' a 'left' para animar el movimiento horizontal */
        }
.namn2 {
            width: 380px;
            height: 300px;
            color: white;
            line-height: 100px;
            text-align: center;
            position: absolute;
            margin: 0 0px;
            top: 110px; /* Cambié 'top' a 'left' para moverlo horizontalmente */
            transition: top 0.5s ease; /* Cambié 'top' a 'left' para animar el movimiento horizontal */
        }

.line {
  /* Define padding relative to the font size */
  padding: 0em 0em;
  /* Prevent text wrapping and hide overflow */
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.line2 {
  /* Define padding relative to the font size */
  min-height: 38px;
  /* Prevent text wrapping and hide overflow */
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  text-align: center ;
  max-width: calc(35vw - 2 * var(--margin));
  margin-left: 50px;
}

.line:empty {
  /* Hide empty line, both first or second */
  display: none;
}

/* Namnplanscher */

.namnee {
  opacity: 1;
  transition: opacity .5s;
  position: absolute;
  top: calc(10 * var(--margin));
  /* Set a max-width to prevent going over the right margin at 100% - 2 * margin, 1728px at 1080p */
  max-width: calc(100vw - 2 * var(--margin));
}

.namn_vanster {
  left: var(--margin);
}
/*   maegen retirasdo*/ 
.namn_hoger {
  right: 0;
  text-align: center;
}
 
 .namn2 #info {
  font-family: 'museo900';
  line-height: 1.35;
  font-size: 0.75rem;

  color: var(--white-color);
  background-color: var(--red-color);
  border-radius: 0px;
}
.namn #title {
  font-family: 'museo900';
  font-size: 1.15rem;
  line-height: 2;
 padding: 0em 0.5em;
  color: var(--gray-color);
  /*background-color: var(--white-color);*/
  letter-spacing: -1px;
      font-weight: bold ;
}

.namn #title:before {
  content: '';
  /*background-color: var(--main-color);*/
  width: 0em;
  display: inline-block;
  top: 0;
  bottom: 0;
  position: absolute;
}

.namn #subtitle {
  font-family: 'museo700';
  line-height: 1.1;
  padding: 0em 2.8em;
  font-size: 0.9rem;
  color: var(--black-color);
  /* background-color: var(--dark-color);*/
}

.namn_vanster #info {
  padding-left: calc(2em / 0.65);
} 
.namn_vanster #title {
  padding-left: calc(2em / 0.75);
}

.namn_vanster #title:before {
  left: 0;
}

.namn_vanster #subtitle {
  padding-left: calc(2em / 0.65);
}

.namn_hoger #info {
  padding-right: calc(0em / 0.65);
}

.namn_hoger #title {
  padding-right: calc(2em / 0.75);
}

.namn_hoger #title:before {
  right: 0;
}

.namn_hoger #subtitle {
  padding-right: calc(2em / 0.65);
}

/* Direktplansch */

.direkt {
  opacity: 0;
  transition: opacity .5s;
  position: absolute;
  top: var(--margin);
  /* Set a max-width to prevent going over the right margin at 100% - 2 * margin, 1728px at 1080p */
  max-width: calc(100vw - 2 * var(--margin));
  right: var(--margin);
  text-align: right;
}
.direkt #info {
  font-family: 'Yle Medium';
  line-height: 1.2;
  font-size: 0.7rem;
  color: var(--white-color);
  background-color: var(--dark-color);
  padding-right: calc(2em / 0.7);
  text-align: left;
}
.direkt #title {
  font-family: 'Yle Black';
  font-size: 0.95rem;
  color: var(--black-color);
  background-color: var(--white-color);
  padding-right: calc(2em / 0.75);
}

.direkt #title:before {
  content: '';
  background-color: var(--main-color);
  width: 2em;
  display: inline-block;
  top: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}

.direkt #subtitle {
  font-family: 'Yle Medium';
  line-height: 1.2;
  font-size: 0.7rem;
  color: var(--white-color);
  background-color: var(--dark-color);
  padding-right: calc(2em / 0.7);
}



    </style>
</head>
<body>
   <div class="containers">
<div class="planschw namn2 namn_hoger">
 <div class="line2"><div class="line" id="info"></div>
  </div>


</div>
</div>
  <div class="container">
<div class="plansch namn namn_hoger">
 
   
  <div class="line" id="title"></div>


</div>
</div>
