body {
  font-family: "Kanit", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Kanit", sans-serif;
}

.nav-link {
  color: white !important;
}

/* chat bot  */

.botcopy.botcopy--app .botcopy--minimize-box {
  width: 50px !important;
  height: 50px !important;
}

.botcopy.botcopy--app .botcopy--minimize-box img {
  width: 50px !important;
  height: 50px !important;
}

.click-able {
  cursor: pointer;
}

.video_btn_parent {
  width: 0;
  /*			height: 0;*/
}

.video_parent {
  width: 0;
  /*			height: 0;*/
  margin: auto;
  transition: opacity 0.5s ease-in-out;
}

#loading-scene {
  transition: all 0.5s ease-in-out;
}

.mobile_parent {
  display: block;
}

.mobile_menu {
  border: 2px solid #055cab;
  border-radius: 10px 10px 10px 10px;
}

/* sidebar */

.sidenav-parent .sidenav,
.sidenav-parent.hide .sidenav {
  display: none;
}

.sidenav-parent .hide-sidenav,
.sidenav-parent.hide .hide-sidenav {
  display: block;
}

.sidenav-parent.show .sidenav {
  display: block;
}

.sidenav-parent.show .hide-sidenav {
  display: none;
}

.hide-sidenav {
  top: 0;
  left: 0;
  width: 10%;
  color: white;
}

.sidenav {
  top: 0;
  left: 0;
  width: 10%;
  /* background-color: rgba(0, 0, 0, 0.66); */
  color: white;
  overflow-y: auto;
  pointer-events: none;
}

.sidenav label {
  font-size: 0.6rem !important;
}

.sidenav img,
.sidenav i {
  pointer-events: auto;
  cursor: pointer;
}

#logo {
  width: 20%;
}

.opacity-0 {
  opacity: 0;
}

/* -------------- */

/* button  */

*:focus {
  outline: none !important;
}

button[type="reset"]:focus,
button[type="reset"]:active,
button[type="reset"]:hover {
  outline: none;
  border: none;
}

.sc-btn {
  width: 6%;
  height: 6%;
  padding: 0;
  color: white;
  display: none;
  outline: none !important;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-transition: -webkit-transform 1s ease-in-out,
    background-size 0.2s ease-in-out, border 0.2s ease-in-out;
  -moz-transition: -moz-transform 1s ease-in-out,
    background-size 0.2s ease-in-out, border 0.2s ease-in-out;
  -o-transition: -o-transform 1s ease-in-out, background-size 0.2s ease-in-out,
    border 0.2s ease-in-out;
  transition: transform 1s ease-in-out, background-size 0.2s ease-in-out,
    border 0.2s ease-in-out;
  /* -webkit-transition: -webkit-transform 1s ease-in-out, background-size .2s ease-in-out, border .2s ease-in-out, opacity 1s ease-in-out;
    -moz-transition: -moz-transform 1s ease-in-out, background-size .2s ease-in-out, border .2s ease-in-out, opacity 1s ease-in-out;
    -o-transition: -o-transform 1s ease-in-out, background-size .2s ease-in-out, border .2s ease-in-out, opacity 1s ease-in-out;
    transition: transform 1s ease-in-out, background-size .2s ease-in-out, border .2s ease-in-out, opacity 1s ease-in-out; */
}

.sc-btn:hover {
  transform: scale(1.05);
}

.sc-btn.zoom-anim {
  /* -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); */
}

.sc-btn.active {
  display: block;
  outline: none !important;
}

/* to panorama btn  */
#to-p1 {
  width: 12%;
  height: 5%;
  top: 68%;
  left: 27%;
  opacity: 100%;
  background-image: url("../images/session/label/01_SuphanburiInformation.png");
}
#img_01 {
  /* width: 12%;
    height: 5%; */
  position: absolute;
  top: -37%;
  left: 13%;
  opacity: 0%;
  /* background-image: url('../images/session/label/11_mainstage.png'); */
}
#to-p1:hover {
  /* background-image:url('../images/session/label/Entrance_Over.png'); */
}

#to-p2 {
  width: 12%;
  height: 5%;
  top: 42%;
  left: 74%;
  opacity: 100%;
  background-image: url("../images/session/label/07_SuphanburiMusicHeritage.png");
}
#img_02 {
  /* width: 12%;
    height: 5%; */
  position: absolute;
  top: 96%;
  left: 23%;
  opacity: 0%;
  /* background-image: url('../images/session/label/11_mainstage.png'); */
}
#to-p2:hover {
  /* background-image:url('../images/session/label/Entrance_Over.png'); */
}

#to-p3 {
  width: 12%;
  height: 5%;
  top: 19%;
  left: 29%;
  opacity: 100%;
  background-image: url("../images/session/label/02_Suphanbuland.png");
}
#img_03 {
  /* width: 12%;
    height: 5%; */
  position: absolute;
  top: 19%;
  left: -2%;
  opacity: 0%;
  /* background-image: url('../images/session/label/11_mainstage.png'); */
}
#to-p3:hover {
  /* background-image:url('../images/session/label/Entrance_Over.png'); */
}

#to-p4 {
  width: 12%;
  height: 5%;
  top: 14%;
  left: 73%;
  opacity: 100%;
  background-image: url("../images/session/label/05_MusicKnowledge.png");
}
#img_04 {
  /* width: 12%;
    height: 5%; */
  position: absolute;
  top: 93%;
  left: -4%;
  opacity: 0%;
  /* background-image: url('../images/session/label/11_mainstage.png'); */
}
#to-p4:hover {
  /* background-image:url('../images/session/label/Entrance_Over.png'); */
}

#to-p5 {
  width: 12%;
  height: 5%;
  top: 76%;
  left: 43%;
  background-image: url("../images/session/label/10_Entrance.png");
}
#img_05 {
  /* width: 12%;
    height: 5%; */
  position: absolute;
  top: -189%;
  left: -2%;
  opacity: 0%;
  /* background-image: url('../images/session/label/11_mainstage.png'); */
}
#to-p5:hover {
  /* background-image:url('../images/session/label/Entrance_Over.png'); */
}

#to-p6 {
  width: 12%;
  height: 5%;
  top: 8%;
  left: 43%;
  opacity: 100%;
  background-image: url("../images/session/label/04_HallofFame.png");
}
#img_06 {
  /* width: 12%;
    height: 5%; */
  position: absolute;
  top: 36%;
  left: 19%;
  opacity: 0%;
  /* background-image: url('../images/session/label/11_mainstage.png'); */
}

#to-p6:hover {
  /* background-image:url('../images/session/label/Entrance_Over.png'); */
}

#to-p7 {
  width: 12%;
  height: 5%;
  top: 40%;
  left: 16%;
  opacity: 100%;
  background-image: url("../images/session/label/03_FiveMusical.png");
}
#img_07 {
  /* width: 12%;
    height: 5%; */
  position: absolute;
  top: 22%;
  left: -36%;
  opacity: 0%;
  /* background-image: url('../images/session/label/11_mainstage.png'); */
}

#to-p7:hover {
  /* background-image:url('../images/session/label/Entrance_Over.png'); */
}

#to-p8 {
  width: 12%;
  height: 5%;
  top: 57%;
  left: 35%;
  opacity: 100%;
  background-image: url("../images/session/label/09_MuseumShop.png");
}
#img_08 {
  /* width: 12%;
    height: 5%; */
  position: absolute;
  top: -69%;
  left: -10%;
  opacity: 0%;
  /* background-image: url('../images/session/label/11_mainstage.png'); */
}

#to-p8:hover {
  /* background-image:url('../images/session/label/Entrance_Over.png'); */
}

#to-p9 {
  width: 12%;
  height: 5%;
  top: 42%;
  left: 49%;
  opacity: 100%;
  background-image: url("../images/session/label/11_mainstage.png");
}
#img_09 {
  /* width: 12%;
    height: 5%; */
  position: absolute;
  opacity: 0%;
  top: -325%;
  left: -8%;
  /* background-image: url('../images/session/label/11_mainstage.png'); */
}

#to-p9:hover {
  /* background-image:url('../images/session/label/Entrance_Over.png'); */
}

#to-p10 {
  width: 12%;
  height: 5%;
  top: 61%;
  left: 58%;
  opacity: 100%;
  background-image: url("../images/session/label/06_SuphanMusicFestival.png");
}
#img_10 {
  /* width: 12%;
    height: 5%; */
  position: absolute;
  top: 61%;
  left: 58%;
  opacity: 0%;
  /* background-image: url('../images/session/label/11_mainstage.png'); */
}
#to-p10:hover {
  /* background-image:url('../images/session/label/Entrance_Over.png'); */
}

#to-p11 {
  width: 12%;
  height: 5%;
  top: 6%;
  left: 58%;
  opacity: 100%;
  background-image: url("../images/session/label/08_SuphanUnited.png");
}
#img_11 {
  /* width: 12%;
    height: 5%; */
  position: absolute;
  top: 0%;
  left: 0%;
  opacity: 0%;
  /* background-image: url('../images/session/label/11_mainstage.png'); */
}
#to-p11:hover {
  /* background-image:url('../images/session/label/Entrance_Over.png'); */
}

.iframe-col iframe {
  height: 70vh;
}

.video_bg,
.video_btn {
  display: block;
}
.video_bg,
.video_btn_parent {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.video_parent {
  width: 100vw;
  height: 100vh;
}
.mobile_parent {
  display: none;
}
.iframe-col iframe {
  height: 90vh;
}

/* -------------- */

/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/

/*// Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px) {
}

/*// Medium devices (tablets, 768px and up)*/

@media (min-width: 768px) {
}

/*// Large devices (desktops, 992px and up)*/

@media (min-width: 992px) {
  .sidenav label {
    font-size: 0.8rem !important;
  }
  #logo {
    width: 40%;
  }

  /* .sc-btn{
        width: 9%;
        height: 5%;
    } */
}

/*// Extra large devices (large desktops, 1200px and up)*/

@media (min-width: 1200px) {
  .video_bg,
  .video_btn {
    display: block;
  }
  .video_bg,
  .video_btn_parent {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .pano-iframe {
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .video_parent {
    width: 100vw;
    height: 100vh;
  }
  .mobile_parent {
    display: none;
  }
  .iframe-col iframe {
    height: 90vh;
  }
}

@media (min-width: 1500px) {
  .modal-xl {
    max-width: 1400px;
  }
}

@media (min-width: 1900px) {
  .modal-xl {
    max-width: 1800px;
  }
}