:root {
  --tourInfoPanelColor: white;
  --tourInfoPanelTitleColor: #279ab8;
  --tourInfoPanelImageContainerColor: #f0f0f0;
}

.info-panel-absolute
{
    position: absolute;
    margin: 0vh 10vw;
    
    left: 0;
    right: 0;
    top: 10vh;
    bottom: 10vh;
    z-index: 100;
    display: none;
}
.info-panel{
    background-color: var(--tourInfoPanelColor);
    /* border-radius: 10px; */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    padding: 0px;
}
.info-panel-content{
    overflow-y: auto;
    height: 100%;
}
.info-panel-inner-content{
    padding-bottom: 2vw;
}
.info-panel-image-container{
    background-color: var(--tourInfoPanelImageContainerColor);
    padding: 3vw 6vw
}
.info-panel-image{
    object-fit: contain;
    width: 100%;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
.info-panel-video{
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
.info-panel-title{
    margin: 2vw 2vw 3vw 2vw;
    font-size: 1.5rem;
    color: var(--tourInfoPanelTitleColor);
    text-align: right;
}
.info-panel-text{
    margin: 3vw 3vw 0px 3vw;
    font-size: 1.0rem;
    /* text-align: justify;
    text-justify: inter-word; */
}
.info-panel-caption{
    margin-top: 1vw;
    font-size: 1.1rem;
}
.info-panel-link{
    margin: 3vw 3vw 0px 3vw;
    font-size: 1.0rem;
    text-align: end;
}

.info-panel-video-wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}

@keyframes panel-slide-in {
    0%   {
      transform: translateY(110vh);
    }
    100% {transform: translateY(0);}
  }
  @-webkit-keyframes panel-slide-in {
    0% { -webkit-transform: translateY(110vh); }
    100% { -webkit-transform: translateY(0); }
  }
  @keyframes panel-slide-out {
    0%   {
      transform: translateY(0);
    }
    100% {
      transform: translateY(110vh);
    }
  }
  @-webkit-keyframes panel-slide-out {
    0% { -webkit-transform: translateY(0); }
    100% { -webkit-transform: translateY(110vh); }
  }

  .infoPanel-in{
    animation: panel-slide-in 0.5s forwards;
    -webkit-animation: panel-slide-in 0.5s forwards;
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  .infoPanel-out{
    animation: panel-slide-out 0.5s forwards;
    -webkit-animation: panel-slide-out 0.5s forwards;
    transform: translateY(110vh);
    -webkit-transform: translateY(110vh);
  }

  .infoPanel-hidden{
    visibility: hidden;
  }


@media (min-aspect-ratio: 1/1) {

    @keyframes panel-slide-in {
        0%   {
          transform: translateX(110%);
        }
        100% {transform: translateX(0%);}
      }
      @-webkit-keyframes panel-slide-in {
        0% { -webkit-transform: translateX(110%); }
        100% { -webkit-transform: translateX(0%); }
      }
      @keyframes panel-slide-out {
        0%   {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(110%);
        }
      }
      @-webkit-keyframes panel-slide-out {
        0% { -webkit-transform: translateX(0%); }
        100% { -webkit-transform: translateX(110%); }
      }
    
      .infoPanel-in{
        animation: panel-slide-in 0.5s forwards;
        -webkit-animation: panel-slide-in 0.5s forwards;
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
      }
      .infoPanel-out{
        animation: panel-slide-out 0.5s forwards;
        -webkit-animation: panel-slide-out 0.5s forwards;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
      }

    .info-panel-absolute
    {
      position: absolute;
      margin: 0;
      right: 0;
      top: 50px;
      bottom: 0;
      width: 65vh;
      left: auto;
    }
    .info-panel-inner-content{
        padding-bottom: 2vh;
    }
    .info-panel-image-container{
        padding: 3vh 6vh
    }
    .info-panel-title{
        margin: 1.5vh 1.5vh 3vh 1.5vh;
    }
    .info-panel-text{
        margin: 3vh 3vh 0px 3vh;
    }
    .info-panel-caption{
        margin-top: 1vh;
    }
    .info-panel-link{
        margin: 3vh 3vh 0px 3vh;
    }
  }