/*************************************
  Your project includes at least 3 
  custom-written CSS selectors/rules 
  in a .css file which are applied to 
  your HTML elements
**************************************/

/* navbar */
.navbar-default {
  background-color: #000000;
  border-color: #ffffff;
}

.btn--override {
  background-color: #000000;
  border-radius: 12px;
  box-shadow: 4px 2px 22px -6px #aaaaaa;
}

.logo--resize {

  max-width: 75px;
  max-height: 75px;
}

.btn--custom {
  font-family: Georgia, 'Times New Roman', Times, serif;
  color:#556b2F;
  font-size: 1rem;
  margin: 0px;  
}

.navbar-header {
  box-shadow: 4px 2px 22px -6px #aaaaaa;
}

.nav-item {
  color: #556b2F;
}

.link--custom :hover {
  color: #ffffff;
}

.navbar-default {
  color: #ffffff;
}

.img_hover_about_info {
  display: block;
}

.img_hover_about_info .about_info {
  opacity: 0;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 2px 2px 2px 2px;
  color: #ffffff;
  background: #556B2F; 
  text-decoration: none;
  text-align: center;  
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
.img_hover_about_info:hover .about_info {
    opacity: 0.8;
}

.carousel {
  align-content: center;
  width: 100%;
  max-width: 600px;
}

.detailBox {
  width:320px;
  border:1px solid #bbb;
  margin:50px;
}

.line-border {
  border: 2px ridge #556B2F;
        width: 100%;
        margin: auto;
        margin-top: 5px;
        margin-bottom: 1px;
}

.himage {
  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;
}

.hmiddle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.hcontainer:hover .himage {
  opacity: 0.3;
}

.hcontainer:hover .hmiddle {
  opacity: 1;
}

.htext {
  background-color: #000000;
  color: white;
  font-size: 100%;
  padding: 10px 10px;
}