*{ 
   scroll-behaviour: smooth;
}

.placeholder {
  z-index: 9999;
  right: 0px;
  left: 0px;
  height: auto;
  background-color: #000E44;
  border: 2px solid white;
  min-height: 400px;
  padding: 1em;
  padding-bottom: 2em;
  margin-bottom: 1em;
  margin-top: -2px;
}

.inner {
   margin: 0.5em;
   left: 0.5em;
   top: 0.5em;
   bottom: 0.5em;
   right: 0.5em;
}

.mediapanel {
   padding: 0px !important;
}

.placeholder .media {
   float: right;
   max-height: 350px;
   max-width: 450px;
   margin-left: auto;
}

.placeholder .media img {
   max-height: 320px;
   max-width: 450px;
   //position: relative;
   //top: -em;
}

.placeholder .media video {
   max-width: 600px;
   max-height: 320px;
   width: 100%;
   //position: relative;
   //top: -6em;
}

.placeholder .heading {
   position: relative;
   top: 0em;
}

.placeholder .heading .title {
   font-size: 28px !important;
   display: block;
}

.placeholder .row {
   gap: 0;
}

.placeholder .heading .subtitle {
    font-size: 20px !important;
    display: block;
    margin-bottom: 1em;
    color: #4ccffe !important;
}

.placeholder .content {
   line-height: 1 !important;
}

.placeholder .navbutton {
   background-color: #222244;
   padding: 0.2em;
   color: white;
   opacity: 0.8;
   border-radius: 5px;
   padding: 4px;
   margin-top: 1em;
   min-width: 1.5em;
   height: 1.5em;
   pointer: arrow;
   margin-right: 1em;
   font-size: 30px !important;
   font-weight: bold;
   padding-left: 0.5em;
   padding-right: 0.5em;
   padding-top: 0em;
   text-align: center;
   display: inline-block;
   cursor: pointer;
}

@media only screen and (max-width: 766px) {
   .placeholder .media {
      margin-bottom: 2em;
      float: none;
      display: block;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
   }
   
   .placeholder .media img {
      max-width: 75vw;
   }
   
   .placeholder .navbutton {
      bottom: -4em;
   }
   
   .choice {
      width: 100%;
      min-width: 100%;
      display: block;
   }
}

.placeholder .media.square img {
   border: 1px solid blue;
   margin-top: 1em;
}

.choice.active {
   border-bottom: 12px solid white;
}

.choice
{
   display: inline-block;
   background-color: black;
   color: white;
   border-radius: 5px;
   padding: 1em;
   cursor: pointer;
   width: 70%;
   margin-bottom: 0.2em;
   border: 1px solid #444444;
}

.nextbutton {
   display: none;
   background: url('/kiosk/nextbutton.png');
   width: 165px;
   height: 25px;
   opacity: 0.5;
   position: absolute;
   bottom: -25px;
}

.placeholder button {
   margin-left: 0px;
}

.quicknavarea {
   position: fixed;
   top: 310px;
   right: 10px;
}

.qnav {
   border-radius: 4px;
   padding: 5px;
   background-color: silver;
   color: black;
   margin-bottom: 0.2em;
}