body { padding-top: 4rem;}

.starter-template { padding: 2rem 1.5rem; text-align: center; }

em { display="block"}

pre { line-height: .5em; background-color: aliceblue; padding: 1em; margin: auto; }

xmp { font-size: 8pt; margin: 0; padding: 1em; line-height: 1em;}

tab-pane.fade, .show.active { transition-duration: .5s; margin-top: auto;}

.navbar { background-color: aliceblue; padding-bottom: 0; }

a.navbar-brand img { width: auto; height: 32px; padding-bottom: 2px }

.nav-pills .nav-link { border-width: 0.05rem; border-color:transparent; }

.nav-pills .nav-link.active, .nav-pills .show >.nav-link { background: white; color: #0063cc; }

.nav-pills .nav-link.active { border-width: 0.05rem; border-color: #0063cc; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom-style: hidden; border-bottom-width: .1rem;}

details { font-size: 0.78rem; }

summary { font-weight: 600; }

image-caption p { margin-top: .55rem; font-size: .82rem; line-height: 1.2rem }

a image-caption { text-decoration: none; font-size: .87rem; font-style: normal; color: black; line-height: 1.2rem}

.carousel-caption { padding: 1rem; background-color: aliceblue; color: #2e2e1f; min-width: 300px; box-shadow:7px 7px 5px rgba(61, 61, 41, 0.5)}

a:hover { text-decoration: none}
a.bpic {display: block; margin:auto; width: 50%; height: auto}
a:hover .img-fluid { 
  -webkit-filter: drop-shadow(0px 0px 7px rgba(51, 204, 51, 1));
  filter: drop-shadow(0px 0px 7px rgba(51, 204, 51, 1)); }
a:hover .icon { 
  -webkit-filter: drop-shadow(0px 0px 7px rgba(51, 204, 51, 1));
  filter: drop-shadow(0px 0px 7px rgba(51, 204, 51, 1)); }
a:hover.list-group-item { background-color:cornsilk; color:darkblue }
.carousel-inner { background-image:url(../content/images/slideshow/bkg-corkboard.png); background-size: 40%; background-repeat:repeat; }

.ekko-lightbox-nav-overlay a:first-child { max-width: 20%; background-color: rgba(61, 61, 41, 0.2) } 

.ekko-lightbox-nav-overlay a:last-child { max-width: 20%; position:absolute; right: 0; height: 100%; background-color: rgba(61, 61, 41, 0.2) } 
  
.ekko-lightbox-nav-overlay a span ❮ 
  { color:azure; -webkit-filter: drop-shadow(2px 2px 7px rgba(51, 204, 51, 1));
  filter: drop-shadow(2px 2px 7px rgba(51, 204, 51, 1));}

.prohdr { background-color: aquamarine}

footer { background-color: aquamarine; color: #0063cc; font-size: .84rem;}

/* media query for ex-large views */

@media (min-width:1490.1px) {
  
  .carousel-item { max-width: 1490px; overflow-x:hidden;
  }
  .carousel-caption { clear: left; right:0; padding: 1rem; background-color: aliceblue; color: #2e2e1f; min-width: 340px; max-width: 400px; box-shadow:7px 7px 5px rgba(61, 61, 41, 0.5)}
  
  .card-img-top { max-width: 18rem; height: auto; }
  
}

/* media Queries - tablets and phones */
/* required to fix navigation */
@media (min-width:481.1px) and (max-width: 768.8px) {
  footer { font-size: .78rem; line-height: 0.9rem; background-color: #94d8ad}
  
  .media .bpic { display: block; float: left; width: 200px}
  
  tab-pane.fade, .show.active { transition-duration: 0s; background-color:#FFF}
  
  .prohdr { background-color: aquamarine;}

  .tab-content { margin-top: 2.5rem; margin-left: -1rem; margin-right: -1rem }

  .nav-item .nav-link { background-color:#2222; margin-bottom: -1.5rem}
    
  .nav-pills .nav-link.active { margin-top: auto }
    
  .navbar { padding-bottom: 1.5rem;}
  
  .list-group-item.active { background-color: #007bff; color: #fff;}
  }

@media (min-width:212px) and (max-width: 481px) {
  
  .prohdr { background-color: #FFF;}
  
  .media .bpic { width: 140px}
  
  tab-pane.fade, .show.active { transition-duration: 0s }
  
  .tab-content { margin-top: 3rem; margin-left: auto; margin-right: auto }
  
  .nav-pills .nav-link { padding-bottom: 1.25rem; padding-left: 1rem; padding-right: 1rem; text-align: justify; width: auto;}
  
  .navbar { padding-bottom: 2rem; margin-right: auto; margin-left: auto; padding-left: 1rem}
  
  .nav-pills .nav-link.active { clear: right; padding: .6rem; position: absolute; bottom: 0; left: 20px; width: 33%; text-align: center }
  }