body>main{margin-top:120px !important;}
.hide{display: none;}

#mainContent{position:relative;}
.accordion .list-group-item div:first-child, .accordion .list-group-item span:first-child {font-weight: bold;}
.accordion .list-group-item span{display: inline-block; vertical-align: top;}
#mainSection span, #conservationSection span{ width:49%;}
#chronologySection span:first-child{width:50px;}
#measureSection span:first-child/*, #findplaceSection span:first-child*/{width:80px;}
#measureSection span:last-child/*, #findplaceSection span:last-child*/{width: calc(100% - 85px);}
#artifactMetadataSection span:first-child, #model-metadata span:first-child{width: 100px;}
#artifactMetadataSection span:last-child, #model-metadata span:last-child{width: calc(100% - 105px);}

#findplaceSection span{display: block;}

#alertModel{position: absolute; top: 0; left:0; width:100%; height:100%; background: rgba(0,0,0,.3);
z-index: 20; display: flex; flex-direction: row; align-content: center; justify-content: center;align-items: center; flex-wrap: wrap;}
#alertMapWrap{ display: flex; justify-content: center; align-content: center; flex-direction: row; flex-wrap: wrap;}
#alertMapWrap > .alert{width:300px; z-index:2000; margin:0;}

#institutionLogo{display: inline-block; width: 35%; vertical-align: top;}
#institutionInfo{display: inline-block; width: 64%; vertical-align: top; padding-left:20px;}

#imgDiv, #videoDiv{width:100%; column-count: 2; column-gap: 10px;}
.imgCard, .embed-responsive{width: 100%; height: auto; break-inside: avoid; position: relative;}
/* .imgCard:nth-child(even), #videoDiv .embed-responsive:nth-child(even){margin-left: 5px; margin-right: 5px;} */

#videoDiv iframe{width:100%;display: block;}

#map{z-index:500;}

#fullScreenImg{
  position:fixed;
  top: 0;
  left: 0; 
  width: 100vw; 
  height: 100vh; 
  background-color: rgba(0,0,0,.3); 
  z-index: 2000;

  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#fullScreenContent{
  position:relative;
  width: 90%;
  height:90%;
  background-color: #fff;
  border-radius: var(--bs-border-radius);
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
#fullScreenHeader,#fullScreenFooter{padding: 10px;}
#fullScreenHeader{text-align: end;}
#fullScreenBody{height:calc(100% - 100px);}
#fullScreenBody,#fullScreenFooter{display: flex; flex-direction: row; justify-content: center;}

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

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

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

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

@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  .absoluteCol{position:absolute; padding:0 5px;}
  .artifact-primary{top:0; left:0; width: 30%; height:600px;}
  #status{padding:5px;}
  .accordionArtifact{height:550px; padding-right:5px; overflow-x: hidden; overflow-y: auto;}
  .accordionArtifact .accordion-button{padding:10px;}
  .accordionArtifact .accordion-body{padding:0;}
  .accordionArtifact span, .accordionArtifact table{font-size: 12px;}
  .accordionArtifact::-webkit-scrollbar { width: 5px;}
  .accordionArtifact::-webkit-scrollbar-track { background: #f1f1f1; }
  .accordionArtifact::-webkit-scrollbar-thumb { background: #888; }
  .accordionArtifact::-webkit-scrollbar-thumb:hover { background: #555; }
  #institutionLogo {display: block;width:100%;}
  #institutionInfo {display: block;width:100%;padding-left:0px;}
  #institutionInfo span{width:auto;}
  #model{top:0; right:0; width:70%; height: 600px;}
  #geographic{top:560px; left:0; width:100%;}
  #map{position:relative;width:100%; height:300px !important;}
  #media{top:950px;left:0;width:50%;}
  .imgCard{height:auto; font-size: 13px;}
  #stats{
    right:0; 
    top:950px; 
    width:50%;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
  }
  #stats > div{margin:0;width:100%;}
  #stats > #lineChart{height:150px;}
  #stats > #columnChart{height:250px; margin:5px 0;}
  #stats > #mapChart{height:300px;}

  .model-full{width:100%;}
  .artifact-full{top:800px; left:0; width: 30%; height:450px;}
  .geographic-full{top:800px; left:30%; width:30%;}
  .geographic-full > #map{height:450px !important;}
  .media-full{top:800px; left:60%; width:20%;}
  .stats-full{top:800px; left:80%; width:20%;}
}

@media (min-width: 1200px) {
  .absoluteCol{position:absolute; padding:0 5px;}
  #status{padding:5px;}
  .accordionArtifact{height:380px; padding-right:5px; overflow-x: hidden; overflow-y: auto;}
  .accordionArtifact .accordion-button{padding:10px;}
  .accordionArtifact .accordion-body{padding:0;}
  .accordionArtifact span, .accordionArtifact table{font-size: 12px;}
  .accordionArtifact::-webkit-scrollbar { width: 5px;}
  .accordionArtifact::-webkit-scrollbar-track { background: #f1f1f1; }
  .accordionArtifact::-webkit-scrollbar-thumb { background: #888; }
  .accordionArtifact::-webkit-scrollbar-thumb:hover { background: #555; }
  #institutionLogo {display: block;width:100%;}
  #institutionInfo {display: block;width:100%;padding-left:0px;}
  #institutionInfo span{width:auto;}
  
  #artifact{ left:0; height:450px;}
  .artifact-primary{top:0;width: 30%;}
  .artifact-full{top:800px; width: 50%;}
  
  #model{top:0; right:0; height: 750px;}
  .model-primary{width:70%;}
  .model-full{width:100%;}
  
  #map{position:relative;width:100%; height:290px !important;}
  .geographic-primary{top:390px; left:0; width:30%;}
  .geographic-full{top:730px; right:0; width:50%;}
  .geographic-full > #map{height:450px !important;}
  
  #media, #stats{width:50%}
  #media{left:0;}
  .media-primary{top:800px; }
  .media-full{top:1300px;}

  #stats{right:0; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: start; align-items: start;}
  .stats-primary{top:800px;}
  .stats-full{top:1300px;}
  #stats > div{margin:0;width:100%;}
  #stats > #lineChart{height:150px;}
  #stats > #columnChart{height:250px; margin:5px 0;}
  #stats > #mapChart{height:300px;}

  #imgDiv, #videoDiv{width:100%; column-count: 3; column-gap: 10px;}
}

@media (min-width: 1400px) {
  .absoluteCol{position:absolute; padding:0 5px;}

  #artifact{ left:0; height:550px;}
  .artifact-primary{top:0;width: 30%;}
  .artifact-full{top:870px; width: 50%;}
  .accordionArtifact{height:500px; padding-right:5px; overflow-x: hidden; overflow-y: auto;}
  .accordionArtifact span, .accordionArtifact table{font-size: 14px;}
  .accordionArtifact::-webkit-scrollbar { width: 5px;}
  .accordionArtifact::-webkit-scrollbar-track { background: #f1f1f1; }
  .accordionArtifact::-webkit-scrollbar-thumb { background: #888; }
  .accordionArtifact::-webkit-scrollbar-thumb:hover { background: #555; }
  
  #institutionLogo {display: block;width:100%;}
  #institutionInfo {display: block;width:100%;padding-left:0px;}
  #institutionInfo span{width:auto;}
  
  
  #model{top:0; right:0; height: 850px;}
  .model-primary{width:70%;}
  .model-full{width:100%;}
  
  #map{position:relative;width:100%; height:290px !important;}
  .geographic-primary{top:490px; left:0; width:30%;}
  .geographic-full{top:800px; right:0; width:50%;}
  .geographic-full > #map{height:550px !important;}
  
  #media, #stats{width:50%}
  .media-primary,.stats-primary{top:870px; }
  .media-full,.stats-full{top:1450px;}
  
  #media{left:0;}
  #stats{right:0; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: start; align-items: start;}
  #stats > div{margin:0;width:100%;}
  #stats > #lineChart{height:150px;}
  #stats > #columnChart{height:250px; margin:5px 0;}
  #stats > #mapChart{height:300px;}

  #imgDiv, #videoDiv{width:100%; column-count: 3; column-gap: 10px;}
}