/************************************/
/*************  COLORS   ************/
/************************************/
.module-project-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 130px;
  -webkit-transition: margin-bottom 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  transition: margin-bottom 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.module-project-info .column:not(.opener-container) {
  height: var(--height);
  overflow: hidden;
  -webkit-transition: height 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  transition: height 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.module-project-info:not(.opened) {
  margin-bottom: 20px;
}
.module-project-info:not(.opened) .column:not(.opener-container) {
  height: 0px;
}
.module-project-info:not(.opened) .opener-container .column-content:after {
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
}
.module-project-info .opener-container .column-content {
  position: relative;
  padding-left: 16px;
  cursor: pointer;
  -webkit-transition: color 0.6s;
  transition: color 0.6s;
}
.module-project-info .opener-container .column-content:hover {
  color: var(--color-gray-hover);
}
.module-project-info .opener-container .column-content:before,
.module-project-info .opener-container .column-content:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 2px;
  background-color: currentColor;
  -webkit-transform: translateY(-50%) rotate(0deg);
          transform: translateY(-50%) rotate(0deg);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  transition: -webkit-transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  transition: transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  transition: transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1), -webkit-transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.module-project-info .closer-container .column-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.module-project-info .closer-container .column-content p {
  -webkit-transition: color 0.6s;
  transition: color 0.6s;
  cursor: pointer;
}
.module-project-info .closer-container .column-content p:hover {
  color: var(--color-gray-hover);
}
.module-project-info .column-title {
  margin-bottom: 12px;
}
.module-project-info .credit-container {
  margin-bottom: 8px;
}
.module-project-info .text-container p {
  margin-bottom: 12px;
}
.module-project-info .column-text-wrapper + .column-text-wrapper {
  margin-top: 50px;
}
.module-project-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -4px;
}
.module-project-content .column {
  margin-bottom: 4px;
}
.module-project-content .column.top {
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.module-project-content .column.center {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}
.module-project-content .column.bottom {
  -ms-flex-item-align: end;
      align-self: flex-end;
}
.module-project-content .content-text iframe {
  width: 100%;
  height: calc(56.25vw - var(--lateral-space) * 2);
}
.col-1 {
  width: calc(100% / 16 - 4px);
}
.col-2 {
  width: calc((100% / 16) * 2 - 4px);
}
.col-3 {
  width: calc((100% / 16) * 3 - 4px);
}
.col-4 {
  width: calc((100% / 16) * 4 - 4px);
}
.col-5 {
  width: calc((100% / 16) * 5 - 4px);
}
.col-6 {
  width: calc((100% / 16) * 6 - 4px);
}
.col-7 {
  width: calc((100% / 16) * 7 - 4px);
}
.col-8 {
  width: calc((100% / 16) * 8 - 4px);
}
.col-9 {
  width: calc((100% / 16) * 9 - 4px);
}
.col-10 {
  width: calc((100% / 16) * 10 - 4px);
}
.col-11 {
  width: calc((100% / 16) * 11 - 4px);
}
.col-12 {
  width: calc((100% / 16) * 12 - 4px);
}
.col-13 {
  width: calc((100% / 16) * 13 - 4px);
}
.col-14 {
  width: calc((100% / 16) * 14 - 4px);
}
.col-15 {
  width: calc((100% / 16) * 15 - 4px);
}
.col-16 {
  width: calc((100% / 16) * 16 - 4px);
}
.column:not([class*="push-"]) {
  margin-left: 4px;
}
.push-1 {
  margin-left: calc(100% / 16 + 4px);
}
.push-2 {
  margin-left: calc((100% / 16) * 2 + 4px);
}
.push-3 {
  margin-left: calc((100% / 16) * 3 + 4px);
}
.push-4 {
  margin-left: calc((100% / 16) * 4 + 4px);
}
.push-5 {
  margin-left: calc((100% / 16) * 5 + 4px);
}
.push-6 {
  margin-left: calc((100% / 16) * 6 + 4px);
}
.push-7 {
  margin-left: calc((100% / 16) * 7 + 4px);
}
.push-8 {
  margin-left: calc((100% / 16) * 8 + 4px);
}
.push-9 {
  margin-left: calc((100% / 16) * 9 + 4px);
}
.push-10 {
  margin-left: calc((100% / 16) * 10 + 4px);
}
.push-11 {
  margin-left: calc((100% / 16) * 11 + 4px);
}
.push-12 {
  margin-left: calc((100% / 16) * 12 + 4px);
}
.push-13 {
  margin-left: calc((100% / 16) * 13 + 4px);
}
.push-14 {
  margin-left: calc((100% / 16) * 14 + 4px);
}
.push-15 {
  margin-left: calc((100% / 16) * 15 + 4px);
}
.push-16 {
  margin-left: calc((100% / 16) * 16 + 4px);
}
@media (max-width: 767px) {
  .push {
    display: none;
  }
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12,
  .col-13,
  .col-14,
  .col-15,
  .col-16 {
    width: 100%;
  }
}