/* CSS Document */
/*=========================================== Portfolio Section ==============================================*/
.portfolio-section {
  text-align: center;
  padding: 50px 0;
}
.portfolio-section > .container {
  position: relative;
  opacity: 0;
  padding: 0 40px;
}
.portfolio-section.active > .container {
  opacity: 1;
  animation: fadeIn 1.2s both;
}
.portfolio-section .columns-even {
	margin: 0 0 50px;
	gap: 40px;
}
@media (min-width: 580px) {
  .columns-even.x3 .col {
	width: calc(50% - 20px);
	}
}
@media (min-width: 769px) {
  .columns-even.x3 .col {
	width: calc(33.3333% - 27px);
  }
}

@media (max-width: 1200px) {}
@media (max-width: 991px) {}
@media (max-width: 768px) {}

/*=========================================== Portfolio Page ==============================================*/
.portfolio-page {
  padding: 50px 0;
}
.portfolio-page > .container {
  position: relative;
  opacity: 0;
}
.portfolio-page.active > .container {
  opacity: 1;
  animation: fadeIn 1.2s both;
}
.portfolio-page .arrow-link {
  display: inline-block;
  margin: 0 0 20px;
}
.portfolio-page .photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
	margin: 0 0 20px;
}
@media (min-width: 690px) {
  .portfolio-page .photo-grid {
      gap: 55px;
    margin: 0 0 50px;
  }
  .portfolio-page .photo-grid .item {
      width: calc(50% - 28px);
  }
}
.portfolio-page .photo-grid .item:nth-child(3n) {
    width: 100%;
}
.portfolio-page .photo-grid .item a {
  display: block;
  width: 100%;
  height: 100%;
}
.portfolio-page .photo-grid .item a .bnn {
  display: block;
  width: 100%;
  height: 100%;
}
.portfolio-page .photo-grid .item a .bnn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-footer {
  margin: 0 0 50px
}

@media (max-width: 1200px) {}
@media (max-width: 991px) {}
@media (max-width: 768px) {}