body {
  margin: 0;
}


#videoWrapper {
  max-height: 100vh;
  overflow-y: scroll;
  width: 100%;
  scroll-snap-type: y mandatory;
  margin: auto;
  background: black;
  outline: none;
}
#videoWrapper svg {
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}
#videoWrapper .videocontainer {
  height: 100%;
  margin: auto;
  position: relative;
  scroll-snap-align: start;
  display: flex;
  outline: none;
  
}

#suosittelu {
  color: white;
  text-align: center;
  font-size: 20px;
  margin: 30px auto;
  font-weight: bold;  
}

#videoWrapper .videocontainer:focus {
  color: none;
}

#videoWrapper .videocontainer.aspectratiovertical {
  width: 56.25%;
}





#videoWrapper .sticky {
  position: sticky;
  top: 0;
}

#videoWrapper .snap {
  scroll-snap-align: start;
}


#videoWrapper .header {
  position: relative;
  margin: 0px 10px 10px 10px;
  color: white;
  text-align: left;
  font-size: 0.8em;



}


#videoWrapper .headerwrapper {
  display: flex;
    flex-direction: row;
    position: absolute;
    top: 0%;
    left: 50%;
    width: 100%;
    text-shadow: 0 0 2px black;
    color: #f1f1f1;
    font-size: 16px;
    translate: -50% 0;
    z-index: 400;
    padding: 10px;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.9) 100%);
    flex-wrap: nowrap;
    align-items: flex-start;
    flex: 1 1 100%;
    gap: 10px;

}
#videoWrapper .buttonwrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
gap: 0.4em;
}

#videoWrapper .custom-popup {
  background-color: rgba(0, 0, 8, 0.7);
  color: white;
  padding: 4px 14px;
  border: 1px solid #000000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  border-radius: 30px;
  z-index: 1100;
}

/* #videoWrapper .headerwrapper div:first-child {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  width: 100%;
} */

#videoWrapper .video {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 1);
  color: #f1f1f1;
  width: 100%;
  outline: none;
}

#videoWrapper .video:focus {
  color: none;
  outline: none;
}
#videoWrapper .metawrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 500;
  right: 0;
  color: #f1f1f1;
  text-shadow: 0 0 2px black;
  font-weight: bold;
  font-size: 14px;
  pointer-events: all;
  flex-wrap: wrap;
  align-items: flex-end;
  flex: 0 0 auto;
  align-content: center;
  gap: 0.4em;
}
#videoWrapper .rightdiv {
  position: absolute;
  height: 100%;
  pointer-events: none;
  display: flex;
  right: 0;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}


#videoWrapper .videoembed {
  height: 100%;
  width: 100%;
  position: absolute;
  outline: none;
}

/* #videoWrapper .published::before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 448 512"><path fill="white" d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z"/></svg>');
  display: block; 
  filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.8))
} */

#videoWrapper .published {
  white-space: pre-line;
  text-align: center;
  display: flex;
  font-weight: 400;
  font-size: 12px;
}


#videoWrapper .title {
  color: #f1f1f1;
  display: flex;
  flex: 1 1 auto;
  font-size: 18px;
}


#videoWrapper .share {
  display: flex;
  /* float: left; */
  width: 2em;
  height: 2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M12.43 3.078a1 1 0 0 1 1.087.207l8.182 8a1 1 0 0 1 0 1.43l-8.182 8a1 1 0 0 1-1.7-.715v-3.855h-.008c-1.968.029-3.972.988-5.827 2.417L3.61 20.389a1 1 0 0 1-1.592-.981l.5-2.597.014-.062c.23-.883.58-1.911.986-2.865.4-.94.88-1.876 1.387-2.532.964-1.246 2.07-2.138 3.405-2.709 1.057-.45 2.219-.684 3.508-.76V4a1 1 0 0 1 .612-.922Zm1.388 3.298v3.48h-1c-1.529 0-2.727.202-3.722.627-.984.42-1.826 1.081-2.609 2.093-.351.454-.753 1.206-1.129 2.09a19.46 19.46 0 0 0-.874 2.525l.277-.213c2.023-1.559 4.445-2.798 7.028-2.833h2.029v3.479L19.57 12l-5.752-5.624Z' fill='white' /%3E%3C/svg%3E");
  /* background-size: 20px 20px; */
  background-repeat: no-repeat;
  cursor: pointer;
  filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.8))
}
#videoWrapper .linkwrapper {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  z-index: 1000;
}
#videoWrapper .link {
  
  /* float: left; */
  width: 1.4em;
  height: 1.4em;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>');
    background-repeat: no-repeat;
  cursor: pointer;
  filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.8))
}


#videoWrapper .headerLogo figure.yle-header-logo {
  display: block;
  /* float: left; */
  width: 30px;
  height: 30px;
  margin: 10px 10px 10px 10px;
  background: url("data:image/svg+xml,%3csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cpath id='a' d='M30 0H0v29.8h30V.1z'/%3e%3c/defs%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath d='M21.9 12c-1.3 0-1.9.6-2 2.2h3.8c0-1.5-.6-2.2-1.8-2.2' fill='white'/%3e%3cg transform='translate(0 .1)'%3e%3cmask id='b' fill='white'%3e%3cuse xlink:href='%23a'/%3e%3c/mask%3e%3cpath d='M24 15.5h-4c0 1.7.3 2.1 2.4 2.1l1.6-.1h.4c.3 0 .5.1.5.5v.3c0 .4-.2.5-.4.6a7 7 0 0 1-2.4.3c-2.9 0-4-1.1-4-4.2 0-3 1.2-4.5 3.8-4.5 3 0 3.4 2.3 3.4 4 0 .5-.3 1-1.3 1zm-7.9 2.8c0 .4-.1.8-.7.8H15c-.5 0-.6-.3-.6-.8V8.2H14c-.8 0-1-.4-1-.6V7c0-.5.7-.5.9-.5h1.2c.8 0 1 .6 1 1.3v10.5zm-4-6L9.9 21c-.3 1.1-1.2 1.8-2.5 1.8s-1.8 0-2.1-.2c-.2 0-.4-.2-.4-.6v-.3c0-.4.2-.6.5-.6h.4l1.3.1c.7 0 1-.1 1.4-1l.2-1.2h-.6c-1 0-1.5-.4-1.7-1.4l-1.5-5.1-.2-1.1c0-.4.3-.6.7-.6h.5c.4 0 .5.3.6.7L8 16.8c.2.7.4.8.8.8H9l1.4-6c.2-.5.3-.7.8-.7h.4c.4 0 .6.2.6.6l-.1 1zM28.6.2H1.4C.6 0 0 .7 0 1.5v27c0 .7.6 1.3 1.4 1.3h27.2c.7 0 1.3-.6 1.3-1.4v-27c0-.7-.6-1.3-1.3-1.3z' fill='white' mask='url(%23b)'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") center center no-repeat;
  background-size: 30px 30px;
  cursor: pointer;
}

#videoWrapper .mute {
  z-index: 200;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  opacity: 0.7;
}

#videoWrapper .mutecontrol {
  content: "";
  position: relative;
  background-size: contain;
  /* font-size: 40px; */
  color: #d4f1fa;
  cursor: pointer;
  display: flex;
  justify-content: center;
  flex-direction: column;
  /* filter: invert(1); */
  height: 2em;
  width: 2em;
  background-repeat: no-repeat;
  background-position: center;
}

#videoWrapper .mutecontrol.muted {
  content: "";
  /* background-image: url(../img/muted_round.png); */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="30" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="%23ffffff" d="M301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3zM425 167l55 55 55-55c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-55 55 55 55c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-55-55-55 55c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l55-55-55-55c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z"/></svg>');
  filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.8));
  background-repeat: no-repeat;
}

#videoWrapper .mutecontrol.notmuted {
  content: "";
  /* background-image: url(../img/notmuted_round.png); */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="30" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="%23ffffff" d="M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z"/></svg>');
  filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.8));
  background-repeat: no-repeat;
}


@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

#videoWrapper .fadeOut {
  animation-name: fadeOut;
}

#videoWrapper .animated {
  animation-delay: 0.3s;
  animation-duration: 0.7s;
  animation-fill-mode: both;
}

#videoWrapper .opacity {
  opacity: 1;
}

@-webkit-keyframes flash {

  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {

  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

#videoWrapper .flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* YDDRASIL-HACK FOR DEV*/

.yle-header-container,
.max-w-cod,
.unpublished,
#gin-toolbar-bar,
.toolbar-menu-administration,
#ylefifooter,
#block-yddrasil-local-tasks {
  display: none;
}

body.gin--horizontal-toolbar,
body.gin--classic-toolbar {
  padding-top: 0 !important;
}

body.gin--vertical-toolbar, body.gin--horizontal-toolbar, body.gin--classic-toolbar {
  padding-top: 0 !important;
}