* {
  margin: 0;
  padding: 0;
}
html {
  min-height: 100%;
  overflow-y: hidden;
}
a,
a:link,
a:visited {
  color: black;
  cursor: pointer;
  text-decoration: none;
}
a:hover {
  color: black !important;
}
b {
  font-weight: 500;
}
img {
  image-orientation: from-image;
}
.col a:hover {
  color: lightgrey !important;
  background-color: white;
  text-decoration: none;
}
body {
  background-color: lightgrey;
  /*font-family: "Times New Roman", Times, serif;*/
  /*font-size: 16pt;*/
  color: black;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 13pt;
  height: 100vh;
  line-height: 1.5;
  margin-block-end: 0px;
  -webkit-overflow-scrolling: touch;
}
.hide {
  display: none !important;
}
img.hidden {
  display: none;
}
.highlight {
  background-color: black !important;
  color: white !important;
}
hr {
  border: 0.5px solid white;
}
/*
.inverted {
  filter: invert(1);
  -webkit-filter: invert(1);
  background-color: white !important;
}
.inverted a, p {
  filter: invert(1);
  -webkit-filter: invert(1);
  background-color: white !important;
  color: black !important;
}
*/
.no-highlight {
  background-color: transparent;
  color: black;
}
.show {
  display: block !important;
}

/******************** Header ********************/
header {
  /*border: 1px solid black;*/
  /* background-color: lightgrey; */
  height: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 70;
}
.header-whitespace {
  height: 28px;
}
#Kirti-About {
  text-align: right;
}
.about-content {
  max-height: calc(80vh - 27px);
  line-height: 1.4;
  overflow-y: auto;
  padding: 0 10px;
}
.about-header {
  border-bottom: 1px solid black;
  height: 28px;
  padding: 0 10px;
  width: 100%;
}
#item-about {
  background-color: lightgrey;
  border: 1px solid black;
  color: black;
  font-weight: 400;
  position: absolute;
  right: 15px;
  text-align: left;
  z-index: 1000;
}
#item-about .mCSB_scrollTools {
  right: 0px;
}
#item-about .mCSB_draggerContainer {
  outline: 1px solid black;
}
#item-about .mCSB_dragger {
  background-color: black;
}
/******************** Container About ********************/
.container-about {
  height: calc(100vh - 84px);
  overflow: auto;
  padding: 0 0 0 15px;
  position: relative;
  margin: 0;
  max-height: 100%;
  top: 56px;
  width: 100%;
  z-index: 10;
}
.container-about .row {
  width: 100%;
}
.container-about .row .col {
  padding: 0 30px 0 15px;
}
.container-about p {
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: 0;
}
.container-about-box {
  padding-top: 10px;
}
.collapsible {
  background-color: transparent;
  border: none;
  font-size: 13pt;
  font-weight: 500;
}
.content {
  display: none;
}
.about-box {
  background-color: lightgrey;
  border: 1px solid black;
  padding: 15px;
  position: absolute;
  width: 30%;
}
#about-box-1 {
  left: 5%;
}
#about-box-2 {
  left: 17%;
  top: 30vh;
}
#about-box-3 {
  left: 29%;
}
#about-box-4 {
  left: 41%;
}
#about-box-5 {
  left: 53%;
}
#about-box-6 {
  left: 65%;
}
/******************** Container Artists ********************/
body#cambodia .category a.cambodia {
  background-color: black;
  color: white;
  text-decoration: none;
  /*border-bottom: 2px solid black;*/
}
body#cambodia a.cambodia {
  color: black;
}

body#myanmar .category a.myanmar {
  background-color: black;
  color: white;
  text-decoration: none;
}
body#myanmar a.myanmar {
  color: black;
}

body#thailand .category a.thailand {
  background-color: black;
  color: white;
  text-decoration: none;
}
body#thailand a.thailand {
  color: black;
}

body#vietnam .category a.vietnam {
  background-color: black;
  color: white;
  text-decoration: none;
}
body#vietnam a.vietnam {
  color: black;
}

body#all .category a.all {
  background-color: black;
  color: white;
  text-decoration: none;
}
body#all a.all {
  color: black;
}

.category {
  font-weight: 500;
}
.category a:hover {
  color: lightgrey !important;
  background-color: white;
  text-decoration: none;
}
.container-index {
  height: calc(100vh - 134px);
  overflow: auto;
  padding: 0;
  position: relative;
  margin: 0;
  max-height: 100%;
  top: 84px;
  width: 100%;
  z-index: 10;
}
.container-index-row {
  /*height: 135vh;*/
  margin: 0;
  width: 100%;
}
.container-index div div p {
  color: black;
  display: inline;
}
.container-index div div a img {
  z-index: 1000;
}
.container-index .mCSB_scrollTools {
  right: 1.2px;
}
.horizontal {
  display: none;
  position: absolute;
  opacity: 0;
  width: auto;
  height: 100px;
  left: 0;
  /*top: -10px;*/
  transition: opacity 0.5s, top 0.5s;
  z-index: 1000;
}
.full {
  left: 0 !important;
  width: 100% !important;
}
.reduced {
  width: 50%;
}
.ast {
  font-size: 20px;
  text-align: center;
}
.ast a {
  cursor: pointer;
}
.ft-text a p {
  color: red;
  bottom: 0;
  display: none !important;
  position: absolute;
}
.ft-text a:hover p {
  display: block !important;
}
.img-block {
  display: inline-block;
  position: relative;
}
/* ---------- Alternative View Button ----------*/
.alt-sm-view-button {
  background-color: yellow;
  float: left;
  position: fixed;
  right: 0;
  width: 40px;
  height: 40px;
  z-index: 100;
  cursor: pointer;
}
.alt-lg-view-button {
  background-color: red;
  display: none;
  float: left;
  right: 0;
  position: fixed;
  width: 40px;
  height: 40px;
  z-index: 99;
  cursor: pointer;
}
/* ---------- Info Tab ---------- */
.info-tag {
  width: 120px;
  height: 35px;
  position: absolute;
  background-color: lightgrey;
  border: 1px solid black;
  border-bottom: 2px solid lightgrey;
  color: black;
  transform-origin: 0 0;
  transform: rotate(-90deg);
  top: 220px;
  z-index: 91;
}
.info-tag a {
  margin: 0 0 0 10px;
}
.info-tag a:hover {
  background-color: lightgrey;
  color: black;
}
.info-tag-close {
  right: -85px;
}
.info-tag-open {
  right: calc(50% - 85px);
}
.info-tag-full {
  right: calc(100vw - 87px);
}
.off-screen {
  left: 100%;
}
.on-screen {
  left: 50% !important;
}
.info-row {
  background-color: lightgrey;
  color: black;
  border-left: 1px solid black;
  display: none;
  height: 100%;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  z-index: 90;
}
.info-row a:hover {
  background-color: lightgrey;
  color: black;
}
.info-row-open {
  width: 50%;
}
.info-row-close {
  width: 0%;
}
.info-row .mCSB_scrollTools {
  right: 2px;
}
.info-row-header {
  background-color: lightgray;
  padding-right: 15px;
  text-align: right;
}
.info-row-text {
  color: black;
  font-size: 13pt;
  padding: 15px;
  white-space: normal;
}
.info-row-web {
  padding: 0 15px;
}
.info-row-web p {
  border-top: 1px solid black;
  line-height: 1.2;
  margin: 0;
  padding: 5px 0;
}
.info-row-web p:last-child {
  border-bottom: 1px solid black;
}
.info-row-web iframe {
  height: calc(100vh - 25px);
  width: 100%;
}
.info-row .mCSB_draggerContainer {
  outline: 1px solid black;
}
.info-row .mCSB_dragger {
  background-color: black;
}
.info-hide {
  display: none !important;
}
.info-show {
  display: inline-block !important;
}
.info-whitespace {
  display: none;
}
.button-info-full {
  padding-left: 30px;
  text-align: left;
}
.button-info-minimize {
  padding-left: 30px;
  text-align: left;
}
.button-show {
  display: inline-block;
}
.button-hide {
  display: none;
}

.vdo-block {
  display: inline-block;
  height: auto;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}
.vdo-block iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#vdo-PhuongDuc {
  padding-bottom: 1.778125%;
}

.img-row {
  display: inline-block;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
}
.img-row img {
  cursor: pointer;
  display: inline-block;
  height: 40vh;
  /*margin: 0 10px;*/
  margin: 0 10px;
}
.img-row img:first-child {
  /*margin: 0 10px 0 0 !important;*/
  margin: 0 10px 0 0 !important;
}
.img-row img:last-child {
  /*margin: 0 0 0 10px !important;*/
  margin: 0 0 0 10px !important;
}
.img-row-container {
  /*background-color: rgb(60,60,60);*/
  border: 1px solid black;
  display: none;
  /*height: 65vh;*/
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 15px 15px 0 15px;
  white-space: nowrap;
}
.artist-des {
  /*border: 0.5px solid white;*/
  color: lightgray;
  font-size: 13pt;
  /*height: 12vh;*/
  margin: 15px 0 0 0;
}
.artist-des .col {
  color: black;
  font-size: 12pt;
  line-height: 1.3;
  padding: 0;
  white-space: normal;
}
.artist-des div p a {
  font-weight: 500;
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.artist-des div p {
  display: block;
  margin: 0;
}
.separator {
  display: inline-block;
  height: 40vh;
  vertical-align: middle;
  width: 100px;
}

/******************** Container documents ********************/
.container-documents {
  height: calc(100vh - 84px);
  overflow: auto;
  /*overflow-y: hidden;*/
  padding: 0 15px;
  position: relative;
  margin: 0;
  max-height: 100%;
  top: 56px;
  transition: 0.4s;
  z-index: 10;
}
.container-documents div div .row .col {
  padding-right: 30px;
}
.container-documents div div p {
  display: inline;
}
.container-documents .mCSB_scrollTools {
  right: 1.2px;
}
.txt-col {
  background-color: lightgray;
  border-left: 2px solid black;
  display: inline-block;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
  position: absolute;
  right: 0px;
  transition: 0.4s;
  top: 0px;
  width: 50vw;
  z-index: 100;
}
.txt-col iframe {
  display: inline-block;
  height: 50vh;
  right: 0px;
  top: 0px;
  width: 50%;
}
.txt-col object {
  height: calc(100vh - 25px);
  width: 100%;
}
.txt-col-header {
  border: 1px solid white;
  height: 30px;
  padding: 0 10px;
  width: 100%;
}
.txt-col .info-row-text {
  padding: 15px 30px 15px 30px;
}
.button-full {
  padding-left: 30px;
  text-align: left;
}
.button-minimize {
  padding-left: 30px;
  text-align: left;
}
.doc-full {
  width: 100%;
}
.doc-reduced {
  width: 50%;
}
#myTable th {
  cursor: pointer;
  font-size: 13pt;
  font-weight: 500;
  padding: 0;
  width: auto;
}
#myTable tr {
  border-bottom: 1px solid black;
  font-size: 13pt;
}
#myTable tr:first-child:hover {
  background-color: transparent;
  color: black !important;
  text-decoration: none;
}
#myTable tr:hover {
  color: lightgrey !important;
  background-color: white;
  text-decoration: none;
}
#myTable th:nth-child(2),
th:nth-child(3),
th:nth-child(4) {
  padding: 0 10px !important;
}
#myTable td:nth-child(2),
td:nth-child(3),
td:nth-child(4) {
  padding: 0 10px !important;
}
.recent-row {
  margin: 0;
  padding-bottom: 20px;
  display: inline-block;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  white-space: nowrap;
}
.recent-row-box {
  border: 1px solid black;
  display: inline-block;
  height: 350px;
  padding: 5px 10px !important;
  vertical-align: top;
  white-space: normal;
  width: 30%;
}
.recent-row-img {
  height: 160px;
  position: relative;
  width: 100%;
  display: inline-block;
}
.recent-row-img img {
  object-fit: cover;
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
}
.recent-row-img div {
  position: relative;
  display: block;
  top: -7px;
}

.recent-row p {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
}
/* Artist's name in Atlas */
.artist-name {
  display: none;
}
.img-box {
  position: absolute;
}

.img-box:hover a {
  display: block;
}

/* Interview Tab */
.int-tag {
  width: 120px;
  height: 35px;
  position: absolute;
  background-color: lightgrey;
  border: 1px solid black;
  border-bottom: 2px solid lightgrey;
  color: black;
  transform-origin: 0 0;
  transform: rotate(-90deg);
  top: 370px;
  z-index: 91;
}
.int-tag a {
  margin: 0 0 0 10px;
}
.int-tag a:hover {
  background-color: lightgrey;
  color: black;
}
.int-tag-close {
  right: -85px;
}
.int-tag-open {
  right: calc(50% - 85px);
}
.int-tag-full {
  right: 100%;
}
.int-hide {
  display: none !important;
}
.int-show {
  display: inline-block !important;
}
.int-row {
  background-color: lightgrey;
  color: black;
  display: none;
  border-left: 1px solid black;
  height: 100%;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  z-index: 90;
}
.int-row a:hover {
  color: black;
}
.int-row .mCSB_scrollTools {
  right: 2px;
}
.int-row-header {
  height: 25px;
  text-align: right;
  width: 100%;
}
.int-row-text {
  color: black;
  font-size: 13pt;
  padding: 15px;
  white-space: normal;
}
.int-row .mCSB_draggerContainer {
  outline: 1px solid black;
}
.int-row .mCSB_dragger {
  background-color: black;
}
.button-int-close {
  padding: 0;
}
.button-int-full {
  padding-left: 30px;
  text-align: left;
}
.button-int-minimize {
  padding-left: 30px;
  text-align: left;
}
.button-show {
  display: inline-block;
}
.button-hide {
  display: none;
}

/* Lightbox */
.lightbox-row {
  display: none;
  z-index: 101;
  background-color: rgba(0, 0, 0, 0.85);
  height: 100%;
  margin: auto;
  position: absolute;
  text-align: left;
  top: 0;
  width: 100%;
}
.lightbox-row div .row {
  padding: 20px 0 0 0;
}
.lightbox {
  padding: 0;
  width: 100%;
  height: 100%;
}
.lightbox-content {
  text-align: center;
  height: 82%;
  position: relative;
  margin: auto;
  padding: 40px 0 0 0;
  max-width: 1200px;
}
/* Lightbox Close Button */
#lightbox-close {
  color: white;
}
#lightbox-close a:hover {
  background-color: white !important;
  color: black !important;
}
.lightbox-close:hover,
.lightbox-close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}
.imgSlides {
  margin: auto;
  max-height: 80vh;
  max-width: 100%;
}

.cursor {
  cursor: pointer;
}
/* Next & previous buttons */
.PrevNextButton {
  text-align: right;
}
.prev,
.next {
  cursor: pointer;
  color: white !important;
  user-select: none;
  -webkit-user-select: none;
  width: auto;
}
.prev:hover,
.next:hover {
  background-color: white !important;
  color: black !important;
}

/* Scroll Bar */
.mCustomScrollBox {
  overflow: hidden;
}

.mCSB_scrollTools {
  opacity: 1;
  filter: "alpha(opacity=100)";
  -ms-filter: "alpha(opacity=100)";
}

.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
  opacity: 1;
  filter: "alpha(opacity=100)";
  -ms-filter: "alpha(opacity=100)";
}

.mCSB_inside > .mCSB_container {
  margin-right: 0;
  min-height: 100%;
  left: 0 !important;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  height: 10px;
}
.container-index .mCSB_scrollTools_vertical {
  width: 10px;
}
.container-index .img-row-container .mCSB_scrollTools_horizontal {
  height: 10px;
}
.container-documents .mCSB_scrollTools_vertical {
  width: 10px;
}
.container-atlas .mCSB_scrollTools_vertical {
  width: 10px;
}
.container-about .mCSB_scrollTools_vertical {
  width: 10px;
}
.info-row .mCSB_scrollTools_vertical {
  width: 10px;
}
.txt-col .mCSB_scrollTools_vertical {
  width: 10px;
}
.mCustomScrollbar {
  touch-action: initial;
}
.mCSB_draggerContainer {
  /*border-top: 1px solid black;*/
  /*outline: 1px solid black;*/
  background-color: white;
  border-radius: 10px;
}
.img-row-container .mCSB_draggerContainer {
  border: 1px solid lightgray;
}
.mCSB_dragger {
  background-color: black;
}
.img-row-container .mCSB_dragger {
  background-color: rgb(170, 170, 170);
  border-radius: 10px;
}
.mCSB_dragger_bar {
  display: none;
}
.mCSB_draggerRail {
  height: 0px !important;
}

.name {
  position: relative;
}
.name.highlight {
  font-weight: 500;
  padding-bottom: 4px;
}
.name:hover img {
  display: block;
  opacity: 1;
  top: 24px;
}
.container-index-row .name {
  color: lightgray;
}
.container-index-row .artist-des a {
  font-weight: 500;
}
.rowNav a div {
  background-color: green;
  display: inline-block;
  height: 30px;
  width: 50px;
}
.selected-button {
  background-color: black;
  color: white !important;
}
.vertical {
  display: none;
  position: absolute;
  opacity: 0;
  width: auto;
  height: 125px;
  left: 0;
  /*top: -10px;*/
  transition: opacity 0.5s, top 0.5s;
  z-index: 1000;
}
/******************** Container Atlas ********************/
#all-box div img {
  position: absolute;
}
.container-atlas {
  height: calc(100% - 25px);
  margin: 0;
  overflow: auto;
  /*overflow-y: hidden;*/
  padding: 0;
  position: absolute;
  top: 0px;
  width: 100vw;
  z-index: 10;
}
.container-atlas .mCSB_scrollTools {
  right: 1.2px;
}
.container-atlas .row .col {
  height: 150vh;
}
.ExhGroup img {
  cursor: move;
}

.ExhGroup img:hover {
  outline: 1.5px solid black;
}
/******************** Logo ********************/
.logo {
  bottom: 50px;
  position: absolute;
  right: 10px;
  text-align: right;
}
.logo img {
  width: 100%;
  z-index: 1;
}

/******************** Footnote ********************/
.footnote {
  background-color: lightgray;
  border-top: 1px solid black;
  bottom: 25px;
  height: 25px;
  position: absolute;
  width: 100%;
  z-index: 50;
}
.marquee-footnote {
  left: 0;
  margin: 0 auto;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 100%;
}
.marquee-footnote span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 26s linear infinite;
}
@keyframes marquee-footnote {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

/******************** Footer ********************/
footer {
  background-color: lightgray;
  border-top: 1px solid black;
  bottom: 0;
  height: 25px;
  position: fixed;
  width: 100%;
  z-index: 50;
}

footer div div div p a {
  color: black !important;
}

.clock {
  color: black;
}

/** Ticker **/
.marquee {
  margin: 0 auto;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 100%;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 22s linear infinite;
}
.marquee2 span {
  animation-delay: 8s;
}
@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

/******************** Opening Div ********************/
#openingDiv {
  align-items: center;
  background-color: rgb(0, 0, 0, 0.85);
  color: lightgray;
  display: flex;
  font-size: 20pt;
  height: 100%;
  justify-content: center;
  line-height: 1.3;
  position: fixed;
  text-align: left;
  top: 0;
  width: 100%;
  z-index: 1000;
}
#openingDiv div {
  width: 15%;
}

@media screen and (max-width: 767px) {
  .container-about-box {
    padding-top: 0;
    padding-right: 35px;
  }
}

@media screen and (max-width: 650px) {
  body {
    font-size: 12pt;
  }
  .container-about-box {
    padding: 0 0 0 15px;
  }
  .about-box {
    background-color: lightgrey;
    border: 1px solid black;
    margin: 10px 0;
    padding: 15px;
    position: relative;
    width: 100%;
  }
  #about-box-1 {
    left: 0;
  }
  #about-box-2 {
    left: 0;
    top: 0;
  }
  #about-box-3 {
    left: 0;
  }
  #about-box-4 {
    left: 0;
  }
  #about-box-5 {
    left: 0;
  }
  #about-box-6 {
    left: 0;
  }
  #about-box-7 {
    left: 0;
  }
  .container-index {
    width: 100vw;
  }
  .container-documents {
    width: 100vw;
  }
  .container-atlas {
    width: 100vw;
  }
  .fullScrButton {
    display: none;
  }
  #item-about {
    width: 85vw;
  }
  .marquee span {
    animation: marquee 30s linear infinite;
  }
  #myTable th {
    font-size: 12pt;
  }
  #myTable th:nth-child(3),
  th:nth-child(4) {
    display: none;
  }
  #myTable td:nth-child(3),
  td:nth-child(4) {
    display: none;
  }
  .button-int-full {
    display: none;
  }
  .button-info-full {
    display: none;
  }
  .artist-des .col {
    font-size: 11pt;
    line-height: 1.3;
  }
  .img-row img {
    height: 25vh;
  }
  .info-row {
    width: 100vw;
  }
  .info-tag-open {
    right: 100%;
  }
  .info-whitespace {
    display: block;
  }
  .int-row {
    width: 100vw;
  }
  .int-tag-open {
    right: 100%;
  }
  .txt-col {
    width: 100vw;
  }
  .thumbnail {
    display: none !important;
  }
  #openingDiv div {
    width: 50%;
  }
  .recent-row {
    overflow-x: hidden;
  }
  .recent-row-box {
    display: block;
    margin: 5px 0;
    width: 100%;
  }
}

@media screen and (max-width: 320px) {
  .country-row .col {
    font-size: 11.79pt;
  }
}