/* CSS Document */

body.worksIndex {background-color: #999999; padding:1rem;}





.tabHead {display:none;}

.overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
      z-index: 10;
      background: rgba(221, 213, 213, 0.5); /* For demonstration */
    }

.clickable-div {
      width: 100%;
      height: auto;
      background-color: lightgreen;
      cursor: pointer;
    }

.workList.list-group-horizontal-sm {
        flex-direction:row;

    }



.list-group-item {padding:0.2rem;}

.subNav {    background-color: aliceblue;
    min-height: 3rem;
    font-size: 1.5rem;}





/* carousel tweaks */
.carousel-indicators button.thumbnail {
  width: 75px;
}


.carousel-indicators button.thumbnail:not(.active) {
  opacity: 0.7;
}
.carousel-indicators {
  position: static;
  margin-left: 5%;
  margin-right: 5%;
}

.worksContainer {background-color: #C0C0C0; font-size: 1.5rem; border-radius: 25px;
  border: 2px solid #73AD21;}

#carouselofWorks > div.carousel-inner > div.carousel-item > img {
  height: 425px;
  width: auto;
}

.worksInfoPanel {margin-top:3rem;}



@media screen and (min-width: 992px) {
  .carousel {
    max-width: 95%;
    margin: 0 auto;
  }
}
/* END carousel tweaks */

.introStory {font-size: 0.9rem;}



.row.rowAdpt {height:90vh;text-align: center;}
.menuCont {height:100%;}

.navList .list-group-item {
  color:white;
  background-color: black;
  font-size:1.5rem;
  padding:0.4rem;
}

.workList img {width:100%; height:auto;}

ul.workList {background-color: azure;}


h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
  font-family: "Crimson Text","Times Roman",serif;
  font-weight: bold;
  color:#999999;
}
html, body, .tooltip, .popover {
  font-family: "Crimson Text","Times Roman",serif;
}

.BG1 { background: url('../media/the-star-crop1.jpg') 
             no-repeat center center fixed; 
             background-size: cover; 
             height: 100vh;
}

/* icons and extras */


/* New Simplified Version 6 CSS */
/* Step 1: Common Properties: All required to make icons render reliably */


	
	/*  X-Small devices (portrait phones, less than 576px)
/* No media query for `xs` since this is the default in Bootstrap

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

.row.rowAdpt {height:70vh;text-align: center;}

  }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { .placeHolder {max-width:275px;}.menuCont {height:10%;}.carousel-indicators button.thumbnail {
  width: 120px;
}.worksInfoPanel {margin-top:4.5rem;} .row.tabHead {display: flex;}}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {.row {height:initial;text-align: initial;}
.carousel-indicators button.thumbnail {
  width: 130px;
}
.introStory {font-size: 2rem;}

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { .carousel-indicators button.thumbnail {
  width: 140px; }}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {  }