/******************************************************************
Theme Name: Magazine 
Description: 
Author: Colorlib
Author URI: 
Version: 1.0
Created: 
******************************************************************/

a, a:link {
  color: #000;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
  color: #2e5c8c;
}

/******** page setup and header---begin **********/

@media (max-width: 413px) {
  .btn-group {
    position: initial;
  }
  .grid-container-time-period {
    grid-template-columns: auto !important;
  }
  .grid-container-related-timelines {
    display: inherit;
  }
  .grid-container-toc-region {
    display: flow !important;
  }
}

.page-subhead {
    float:right;
  }

/******** page setup and header---end **********/

/******** top date span tabs---begin **********/
.time-periods {
  font-family: Roboto, sans-serif;
  font-size: 15px;
  line-height: 46px;
  background-color: #d5cabd;
  padding-left: 20px;
  border-left: solid;
  border-left-width: 20px;
  border-left-color: #b9ac53;
}
.grid-container-time-period {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;
  grid-gap: 5px;
}

.time-period-section {
  text-align: center;
  padding: 0px;
  font-size: 12px;
}

a, .time-period-section {
   //text-decoration: none;
}

.time-period-item1 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}
.time-period-item2 {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}
.time-period-item3 {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}
.time-period-item4 {
  grid-column: 4 / span 1;
  grid-row: 1 / span 1;
}
.time-period-item5 {
  grid-column: 5 / span 1;
  grid-row: 1 / span 1;
}
.time-period-item6 {
  grid-column: 6 / span 1;
  grid-row: 1 / span 1;
}
.time-period-item7 {
  grid-column: 7 / span 1;
  grid-row: 1 / span 1;
}
.time-period-item8 {
  grid-column: 8 / span 1;
  grid-row: 1 / span 1;
}
.time-period-item9 {
  grid-column: 9 / span 1;
  grid-row: 1 / span 1;
}
.time-period-item10 {
  grid-column: 10 / span 1;
  grid-row: 1 / span 1;
}
.time-period-item11 {
  grid-column: 11 / span 1;
  grid-row: 1 / span 1;
}

.time-period-title {
  background: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  //padding-left: 20px;
  //font-family: "Cardo", serif;
  font-size: 24px;
  color: #222222;
  line-height: 1.2em !important;
  margin-bottom: 0;
  margin-top: 0;
  margin-left: -15px;
  margin-right: -15px;
}

.btn-group button {
  background-color: #fff;
  border: 1px solid #bec6ce;
  color: black; /* Black text */
  cursor: pointer; /* Pointer/hand icon */
  float: left; /* Float the buttons side by side */
}

.btn-group button a:link{
   text-decoration: none;
}

.btn-group button:active {
  box-shadow: none!important;
  background-color: #fff!important;
}

.btn-group button:hover:focus:active {
  box-shadow: none;
  background-color: #fff;
}

.btn-group button:focus {
  outline: none;
  color: #fff;
  background-color: #fff;
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:not(:last-child) {
  //border-right: none; /* Prevent double borders */
}


/******** top date span tabs---end **********/


/******** main timeline define color bars---begin **********/

.grid-container-timeline {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-gap: 5px;
  color: #fff;
  font-size: 12px;
}

.timeline-section-nothing {
  background-color: #E9E9E9;
  color: #000 !important;
  text-align: center;
}

.timeline-section-china {
  background-color: #ab4634;
  text-align: center;
}

.timeline-section-japan {
  background-color: #b69330;
  text-align: center;
}

.timeline-section-korea {
  background-color: #4c5886;
  text-align: center;
}

.timeline-section-v-se-asia {
  background-color: #698338;
  text-align: center;
}

.timeline-section-south-asia {
  background-color: #6E624B;
  text-align: center;
}

/******** main timeline define color bars---end **********/

/******** prior4000 section---begin **********/

.china-prior4000-1 {
  grid-column: 1 / span 5;
  grid-row: 1 / span 1;
}

.china-prior4000-2 {
  grid-column: 6 / span 9;
  grid-row: 1 / span 1;
}

.china-prior4000-3 {
  grid-column: 15 / span 6;
  grid-row: 1 / span 1;
}

.japan-prior4000-1 {
  grid-column: 1 / span 10;
  grid-row: 2 / span 1;
}

.japan-prior4000-2 {
  grid-column: 11 / span 10;
  grid-row: 2 / span 1;
}

.korea-prior4000-1 {
  grid-column: 1 / span 16;
  grid-row: 3 / span 1;
}

.korea-prior4000-2 {
  grid-column: 17 / span 4;
  grid-row: 3 / span 1;
}

.v-se-asia-prior4000-1 {
  grid-column: 1 / span 16;
  grid-row: 4 / span 1;
}

.v-se-asia-prior4000-2 {
  grid-column: 17 / span 4;
  grid-row: 4 / span 1;
}

.south-asia-prior4000-1 {
  grid-column: 1 / span 15;
  grid-row: 5 / span 1;
}

.south-asia-prior4000-2 {
  grid-column: 16 / span 5;
  grid-row: 5 / span 1;
}

/******** prior4000 section---end **********/

/******** 4000 section---begin **********/

.china-4000-1 {
  grid-column: 1 / span 12;
  grid-row: 1 / span 1;
}

.china-4000-2 {
  grid-column: 13 / span 8;
  grid-row: 1 / span 1;
}

.japan-4000-1 {
  grid-column: 1 / span 20;
  grid-row: 2 / span 1;
}

.korea-4000-1 {
  grid-column: 1 / span 20;
  grid-row: 3 / span 1;
}

.v-se-asia-4000-1 {
  grid-column: 1 / span 14;
  grid-row: 4 / span 1;
}

.v-se-asia-4000-2 {
  grid-column: 15 / span 6;
  grid-row: 4 / span 1;
}

.south-asia-4000-1 {
  grid-column: 1 / span 20;
  grid-row: 5 / span 1;
}

/******** 4000 section---end **********/

/******** 1000 section---begin **********/

.china-1000-1 {
  grid-column: 1 / span 5;
  grid-row: 1 / span 1;
}

.china-1000-2 {
  grid-column: 6 / span 8;
  grid-row: 1 / span 1;
}

.china-1000-3 {
  grid-column: 14 / span 3;
  grid-row: 1 / span 1;
}

.china-1000-4 {
  grid-column: 17 / span 4;
  grid-row: 1 / span 1;
}

.japan-1000-1 {
  grid-column: 1 / span 11;
  grid-row: 2 / span 1;
}

.japan-1000-2 {
  grid-column: 12 / span 9;
  grid-row: 2 / span ;
}

.korea-1000-1 {
  grid-column: 1 / span 18;
  grid-row: 3 / span 1;
}

.korea-1000-2 {
  grid-column: 19 / span 2;
  grid-row: 3 / span 1;
}

.v-se-asia-1000-1 {
  grid-column: 1 / span 20;
  grid-row: 4 / span 1;
}

.south-asia-1000-1 {
  grid-column: 1 / span 4;
  grid-row: 5 / span 1;
}

.south-asia-1000-2 {
  grid-column: 5 / span 7;
  grid-row: 5 / span 1;
}

.south-asia-1000-3 {
  grid-column: 12 / span 6;
  grid-row: 5 / span 1;
}

.south-asia-1000-4 {
  grid-column: 18 / span 3;
  grid-row: 5 / span 1;
}

/******** 1000 section---end **********/

/******** 300 section---begin **********/

.china-300-1 {
  grid-column: 1 / span 20;
  grid-row: 1 / span 1;
}

.japan-300-1 {
  grid-column: 1 / span 16;
  grid-row: 2 / span 1;
}

.japan-300-2 {
  grid-column: 17 / span 4;
  grid-row: 2 / span 1;
}

.korea-300-1 {
  grid-column: 1 / span 20;
  grid-row: 3 / span 1;
}

.v-se-asia-300-1 {
  grid-column: 1 / span 20;
  grid-row: 4 / span 1;
}

.south-asia-300-1 {
  grid-column: 1 / span 20;
  grid-row: 5 / span 1;
}

/******** 300 section---end **********/

/******** 600 section---begin **********/

.china-600-1 {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
}

.china-600-2 {
  grid-column: 4 / span 13;
  grid-row: 1 / span 1;
}

.china-600-3 {
  grid-column: 17 / span 2;
  grid-row: 1 / span 1;
}

.china-600-4 {
  grid-column: 19 / span 2;
  grid-row: 1 / span 1;
}

.japan-600-1 {
  grid-column: 1 / span 7;
  grid-row: 2 / span 1;
}

.japan-600-2 {
  grid-column: 8 / span 4;
  grid-row: 2 / span 1;
}

.japan-600-3 {
  grid-column: 12 / span 4;
  grid-row: 2 / span 1;
}

.japan-600-4 {
  grid-column: 16 / span 5;
  grid-row: 2 / span 1;
}

.korea-600-1 {
  grid-column: 1 / span 4;
  grid-row: 3 / span 1;
}

.korea-600-2 {
  grid-column: 5 / span 13;
  grid-row: 3 / span 1;
}

.korea-600-3 {
  grid-column: 18 / span 3;
  grid-row: 3 / span 1;
}

.v-se-asia-600-1 {
  grid-column: 1 / span 12;
  grid-row: 4 / span 1;
}

.v-se-asia-600-2 {
  grid-column: 13 / span 8;
  grid-row: 4 / span 1;
}

.south-asia-600-1 {
  grid-column: 1 / span 20;
  grid-row: 5 / span 1;
}

/******** 600 section---end **********/

/******** 1000ce section---begin **********/

.china-1000ce-1 {
  grid-column: 1 / span 9;
  grid-row: 1 / span 1;
}

.china-1000ce-2 {
  grid-column: 10 / span 3;
  grid-row: 1 / span 1;
}

.china-1000ce-3 {
  grid-column: 13 / span 8;
  grid-row: 1 / span 1;
}

.japan-1000ce-1 {
  grid-column: 1 / span 5;
  grid-row: 2 / span 1;
}

.japan-1000ce-2 {
  grid-column: 6 / span 8;
  grid-row: 2 / span 1;
}

.japan-1000ce-3 {
  grid-column: 14 / span 7;
  grid-row: 2 / span 1;
}

.korea-1000ce-1 {
  grid-column: 1 / span 13;
  grid-row: 3 / span 1;
}

.korea-1000ce-2 {
  grid-column: 14 / span 7;
  grid-row: 3 / span 1;
}

.v-se-asia-1000ce-1 {
  grid-column: 1 / span 15;
  grid-row: 4 / span 1;
}

.v-se-asia-1000ce-2 {
  grid-column: 16 / span 5;
  grid-row: 4 / span 1;
}

.south-asia-1000ce-1 {
  grid-column: 1 / span 9;
  grid-row: 5 / span 1;
}

.south-asia-1000ce-2 {
  grid-column: 10 / span 11;
  grid-row: 5 / span 1;
}

/******** 1000ce section---end **********/

/******** 1450 section---begin **********/

.china-1450-1 {
  grid-column: 1 / span 13;
  grid-row: 1 / span 1;
}

.china-1450-2 {
  grid-column: 14 / span 7;
  grid-row: 1 / span 1;
}

.japan-1450-1 {
  grid-column: 1 / span 7;
  grid-row: 2 / span 1;
}

.japan-1450-2 {
  grid-column: 8 / span 5;
  grid-row: 2 / span 1;
}

.japan-1450-3 {
  grid-column: 13 / span 8;
  grid-row: 2 / span 1;
}

.korea-1450-1 {
  grid-column: 1 / span 20;
  grid-row: 3 / span 1;
}

.v-se-asia-1450-1 {
  grid-column: 1 / span 20;
  grid-row: 4 / span 1;
}

.south-asia-1450-1 {
  grid-column: 1 / span 6;
  grid-row: 5 / span 1;
}

.south-asia-1450-2 {
  grid-column: 7 / span 14;
  grid-row: 5 / span 1;
}

/******** 1450 section---end **********/

/******** 1750 section---begin **********/

.china-1750-1 {
  grid-column: 1 / span 19;
  grid-row: 1 / span 1;
}

.china-1750-2 {
  grid-column: 20 / span 1;
  grid-row: 1 / span 1;
}

.japan-1750-1 {
  grid-column: 1 / span 9;
  grid-row: 2 / span 1;
}

.japan-1750-2 {
  grid-column: 10 / span 10;
  grid-row: 2 / span 1;
}

.japan-1750-3 {
  grid-column: 20 / span 1;
  grid-row: 2 / span 1;
}

.korea-1750-1 {
  grid-column: 1 / span 18;
  grid-row: 3 / span 1;
}

.korea-1750-2 {
  grid-column: 19 / span 2;
  grid-row: 3 / span 1;
}

.v-se-asia-1750-1 {
  grid-column: 1 / span 7;
  grid-row: 4 / span 1;
}

.v-se-asia-1750-2 {
  grid-column: 8 / span 13;
  grid-row: 4 / span 1;
}

.south-asia-1750-1 {
  grid-column: 1 / span 6;
  grid-row: 5 / span 1;
}

.south-asia-1750-2 {
  grid-column: 7 / span 14;
  grid-row: 5 / span 1;
}

/******** 1750 section---end **********/

/******** 1900 section---begin **********/

.china-1900-1 {
  grid-column: 1 / span 6;
  grid-row: 1 / span 1;
}

.china-1900-2 {
  grid-column: 7 / span 13;
  grid-row: 1 / span 1;
}

.china-1900-3 {
  grid-column: 20 / span 1;
  grid-row: 1 / span 1;
}

.japan-1900-1 {
  grid-column: 1 / span 6;
  grid-row: 2 / span 1;
}

.japan-1900-2 {
  grid-column: 7 / span 6;
  grid-row: 2 / span 1;
}

.japan-1900-3 {
  grid-column: 13 / span 8;
  grid-row: 2 / span 1;
}

.korea-1900-1 {
  grid-column: 1 / span 4;
  grid-row: 3 / span 1;
}

.korea-1900-2 {
  grid-column: 5 / span 14;
  grid-row: 3 / span 1;
}

.korea-1900-3 {
  grid-column: 19 / span 2;
  grid-row: 3 / span 1;
}

.v-se-asia-1900-1 {
  grid-column: 1 / span 20;
  grid-row: 4 / span 1;
}

.south-asia-1900-1 {
  grid-column: 1 / span 19;
  grid-row: 5 / span 1;
}

.south-asia-1900-2 {
  grid-column: 20 / span 1;
  grid-row: 5 / span 1;
}

/******** 1900 section---end **********/

/******** 1950 section---begin **********/

.china-1950-1 {
  grid-column: 1 / span 20;
  grid-row: 1 / span 1;
}

.japan-1950-1 {
  grid-column: 1 / span 16;
  grid-row: 2 / span 1;
}

.japan-1950-2 {
  grid-column: 17 / span 4;
  grid-row: 2 / span 1;
}

.korea-1950-1 {
  grid-column: 1 / span 20;
  grid-row: 3 / span 1;
}

.v-se-asia-1950-1 {
  grid-column: 1 / span 10;
  grid-row: 4 / span 1;
}

.v-se-asia-1950-2 {
  grid-column: 11 / span 10;
  grid-row: 4 / span 1;
}

.south-asia-1950-1 {
  grid-column: 1 / span 20;
  grid-row: 5 / span 1;
}

/******** 1950 section---end **********/

/******** 21stc section---begin **********/

.china-21stc-1 {
  grid-column: 1 / span 20;
  grid-row: 1 / span 1;
}

.japan-21stc-1 {
  grid-column: 1 / span 20;
  grid-row: 2 / span 1;
}

.korea-21stc-1 {
  grid-column: 1 / span 20;
  grid-row: 3 / span 1;
}

.v-se-asia-21stc-1 {
  grid-column: 1 / span 20;
  grid-row: 4 / span 1;
}

.south-asia-21stc-1 {
  grid-column: 1 / span 20;
  grid-row: 5 / span 1;
}

/******** 21stc section---end **********/

.color-bar-text {
  font-family: Roboto, sans-serif;
  //font-weight:600;
  font-color: #000;
  font-size: 16px;
}

.color-bar-text-sections {
  font-family: Roboto, sans-serif;
  //font-weight:600;
  font-color: #000;
  font-size: 16px;
  padding-bottom: 4px;
  padding-top: 4px;
}

/******** content areas---begin **********/
.title-bar-china {
  background-color: #ab4634;
  color: #fff;
  padding-left: 10px;
}

.title-bar-japan {
  background-color: #c4973d;
  color: #fff;
  padding-left: 10px;
}

.title-bar-korea {
  background-color: #4c5886;
  color: #fff;
  padding-left: 10px;
}

.title-bar-vietnam {
  background-color: #698338;
  color: #fff;
  padding-left: 10px;
}

.title-bar-southasia {
  background-color: #6e624b;
  color: #fff;
  padding-left: 10px;
}

.content-time-period {
  margin: 20px;
}

/******** content areas---end **********/

.grid-container-toc-region {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-gap: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 1.25em;
}

.toc-region-china {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  text-align: center;
  color: #ab4634;
  text-transform: uppercase;
}

.toc-region-china a{
  color: #ab4634;
  text-transform: uppercase;
}

.toc-region-china-content {
  color: #6d291c;
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 30px;
}

.toc-region-japan {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
  text-align: center;
  color: #c4973d;
  text-transform: uppercase;
  //font-weight: 800;
}

.toc-region-japan a{
  color: #c4973d;
  text-transform: uppercase;
  //font-weight: 800;
}

.toc-region-japan-content {
  color: #c4973d;
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 30px;
}

.toc-region-korea {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
  text-align: center;
  color: #4c5886;
  text-transform: uppercase;
}

.toc-region-korea a{
  color: #4c5886;
  text-transform: uppercase;
  //font-weight: 800;
}

.toc-region-korea-content {
  color: #314155;
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 30px;
}

.toc-region-vietnam-seasia {
  grid-column: 4 / span 1;
  grid-row: 1 / span 1;
  text-align: center;
  color: #698338;
  text-transform: uppercase;
}

.toc-region-vietnam-seasia a{
  color: #698338;
  text-transform: uppercase;
  //font-weight: 800;
}

.toc-region-vietnam-seasia-content {
  color: #7da38a;
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 30px;
}

.toc-region-southasia {
  grid-column: 5 / span 1;
  grid-row: 1 / span 1;
  text-align: center;
  color: #775e29;
  text-transform: uppercase;
}

.toc-region-southasia a{
  color: #775e29;
  text-transform: uppercase;
  //font-weight: 800;
}

.toc-region-southasia-content {
  color: #775e29;
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 30px;
}

.timeline-subheaders {
      font-size: 22px;
      margin-top: 40px !important;
      margin-bottom: 10px;
}

.timeline-subheaders-china {
      font-size: 22px;
      margin-top: 20px !important;
      margin-bottom: 10px;
      color: #ab4634;
}

.timeline-subheaders-japan {
      font-size: 22px;
      margin-top: 20px !important;
      margin-bottom: 10px;
      color: #b69330;
}

.timeline-subheaders-korea {
      font-size: 22px;
      margin-top: 20px !important;
      margin-bottom: 10px;
      color: #4c5886;
}

.timeline-subheaders-vietnam {
      font-size: 22px;
      margin-top: 20px !important;
      margin-bottom: 10px;
      color: #698338;
}

.timeline-subheaders-south-asia {
      font-size: 22px;
      margin-top: 20px !important;
      margin-bottom: 10px;
      color: #6E624b;
}

.selected-year {
   position:relative;
   background-color:#bec6ce !important;
}

.selected-year:after {
    border-top: 10px solid #bec6ce;
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    bottom: 0px;
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -10px;
    margin-bottom: -10px;
    width: 0; 
    height: 0;
    z-index: 10;
}
.grid-container-related-timelines {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px;
  padding: 10px;
}

.related-timelines-WH-all {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}

.related-timelines-bridging-WH {
  //grid-column: 2 / span 1;
  //grid-row: 1 / span 1;
}

.related-timelines-met-museum {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}

.related-timelines-hyper {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}



/******** possibly extraneous--begin **********/

.white {
  background-color: #fff;
}

b, strong {
   font-weight: bold;
}

/******** possibly extraneous--end **********/