/*
####################################################
Style for baguette box image library
Autor: Divine Pictures
Date: 2022-11-08
####################################################
*/

.container-fluid {
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-right: auto;
  margin-left: auto;
}

/*
####################################################
Image Boxen
####################################################
*/

.portfolio-box {
  position: relative;
  display: block;
  max-width: 950px;
  margin: 10px;

  clip-path: circle();
  background-color: rgb(255, 255, 255);
}

.portfolio-box .portfolio-box-caption {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 0;
  color: rgb(255, 255, 255);

  background: var(--dp-color-OrangeKoerpernorm) !important ;
  transition: all 0.2s;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
  position: absolute;
  top: 50%;
  width: 100%;

  transform: translateY(-50%);
  text-align: center;
}

.portfolio-box
  .portfolio-box-caption
  .portfolio-box-caption-content
  .project-category,
.portfolio-box
  .portfolio-box-caption
  .portfolio-box-caption-content
  .project-name {
  padding: 0 15px;
  font-family: var(--dp-Font_Company_small);
}

.portfolio-box
  .portfolio-box-caption
  .portfolio-box-caption-content
  .project-category {
  font-size: 18px;
  font-weight: 600;
  line-height: 120%;
  text-transform: uppercase;
}

.portfolio-box
  .portfolio-box-caption
  .portfolio-box-caption-content
  .project-name {
  font-size: 16px;
}

.portfolio-box:hover .portfolio-box-caption {
  opacity: 0.9;
}

.portfolio-box:focus {
  outline: none;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 1.25rem;
  background-color: #fdfdfd;
  border: 0px solid #dee2e6;
  border-radius: 0.25rem;
  width: 100%;
  height: 100%;
}