/* @group View List
------------------------------------ */
.projects-main { margin: 0 0 6.6rem; }
.projects-main article { margin-bottom: .9rem; }
.projects-main article > .box { position: relative; display: block;}
.projects-main .img-box { height: 33.4rem; }
.projects-main .img-box::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.5); mix-blend-mode: soft-light; }
.projects-main figcaption { background:rgba(0,0,0,.38); transition: all 500ms ease-in-out; }
.projects-main figcaption .box{ transition: all 600ms ease-in-out;}
.projects-main .box:hover .box{ transform: translateY(-2rem); }
.projects-main .box:hover figcaption{ background: rgba(0,0,0,.6);}
.projects-main figcaption h3 { color: rgba(244,160,0,1); font-size: 1.5em; line-height: 1.067em; text-transform: uppercase; margin: 0 0 1rem; }
.projects-main figcaption h2 { color: rgba(255,255,255,1); font-size: 2.5em; line-height: 1.5em; text-transform: uppercase; margin: 0 0 4.6rem; }
.projects-main .outside-box { background: rgba(0,0,0,1); opacity: 0; visibility: hidden;
  -webkit-transition: opacity 0.3s linear, visibility 0.3s linear;
  -moz-transition: opacity 0.3s linear, visibility 0.3s linear;
  -ms-transition: opacity 0.3s linear, visibility 0.3s linear;
  -o-transition: opacity 0.3s linear, visibility 0.3s linear;
  transition: opacity 0.3s linear, visibility 0.3s linear;
}

.projects-main .outside-box .col-36-36 { padding: 0 5rem; }
.projects-main .box:hover .outside-box {/*  opacity: 1; visibility: visible; */ }
.projects-main .outside-box h2 { color: rgba(255,255,255,1); font-size: 2.2em; line-height: 1.500em; text-transform: uppercase; margin: 0 0 -1rem; position: relative; padding-left: 4rem; }
.projects-main .outside-box h2::before { content: ''; display: block; height: .2rem; width: 2.5rem; background: rgba(244,160,0,1); position: absolute; left: -.5rem; top: 2.5rem; }
.projects-main .outside-box p { color: rgba(255,255,255,1); margin: 0 0 2.5rem; }
.projects-main .outside-box .bttn { display: block; width: 100%; padding: 1.7rem 0; text-align: center; }

.projects-main .load-more { margin-top: 3.5rem; margin-bottom: .9rem; }
/* Filters
----------------------*/
.filters li { font: 700 1.7em / 1.238em TitilliumText22L; text-transform: uppercase; }
.filters li a { color: rgba(255,255,255,1); position: relative; }
.filters button { color: rgba(255,255,255,1); font: 700 1.7em / 1.238em TitilliumText22L; text-transform: uppercase; height: 8rem; text-align: center; width: 100%; }
.filters button i { margin-left: .5rem; position: relative; top: .25rem; }
.filters .bttn { padding: 1.5rem 2rem; margin: 0 auto 1.5rem; text-align: center; width: 100%; max-width: 15.5rem; display: block; }
@media only screen
and (min-width : 961px) {
  .projects-main { margin: 0 0 11rem; }
  .list-view > .row { width: calc(100% + 3.5rem); margin-left: -1.75rem; }
  .projects-main article { padding: 0 1.75rem; margin-bottom: 2.9rem; }
  .projects-main article .outerAbsolute.box { padding: 0 5rem; }
  .projects-main article figcaption .box { padding: 0 9rem; }
  .projects-main figcaption h2 { font-size: 2.2em; line-height: 1.500em; margin: 0 0 5rem; position: relative; }
  .projects-main figcaption h2::before { content: ''; display: block; height: .2rem; width: 2.5rem; background: rgba(244,160,0,1); position: absolute; left: -4.3rem; top: 1.5rem; }
  .projects-main figcaption h3 { margin: 0; }
  /* Filters
  ----------------------*/
/*   .filters ul { text-align: right; margin: 0 3rem 13rem; } */
  .filters li { font-size: 1.5em; line-height: 1.067em; text-transform: uppercase; margin: 0 0 2.3rem; }
  .filters li a { color: rgba(34,34,34,1); }
  .filters li a:hover {  color: rgb(244 160 0);  transition: 600ms ease-in-out; }
  .filters li a::before { content: ''; background: rgba(244,160,0,0); height: .2rem; width: 3.2rem; position: absolute; left: -4.2rem; top: 1rem; }
  .filters li .active { color: rgba(244,160,0,1); font-size: 1.337em; }
  .filters li .active::before { background: rgba(244,160,0,1); }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
  .projects-main figcaption h3::before { content: ''; display: block; height: .2rem; width: 2.5rem; background: rgba(244,160,0,1); margin: 0 0 1.2rem; }
  /* Filters
  ----------------------*/
  .filters { position: fixed; right: 0; bottom: 0; width: 50%; background: rgba(244,160,0,1); height: 8rem; z-index: 2; }
  .filters button + ul { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(244,160,0,1); max-height: 0; overflow: hidden; width: 100vw; text-align: center; }
  .filters li { margin: 0 0 4rem; }
  .filters li:first-child { margin: 4rem 0 4rem; }
  .filters .active + ul { animation: openDraw 1s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; animation-delay: 0; }
  .filters .deactive + ul { animation: closeDraw .4s cubic-bezier(0.4,0.0,0.2,1) forwards; animation-delay: 0; }
}
/* @end */