/*============================================================
=pp portfolio ★★★ */



#portfolio-list #wrapper,
body #ppportfolio-home  {
background-color: var(--color-blue3);
background: var(--color-blue3) url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJEQzRFQzgyQzlGODExRUY5NTIzQUY1Q0JBOEJCQzY5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJEQzRFQzgzQzlGODExRUY5NTIzQUY1Q0JBOEJCQzY5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkRDNEVDODBDOUY4MTFFRjk1MjNBRjVDQkE4QkJDNjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkRDNEVDODFDOUY4MTFFRjk1MjNBRjVDQkE4QkJDNjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4AVtTdAAAA00lEQVR42uzUMQrAIAxA0VoCvf99i6ndpEs3zfA+ZHHMI7bMvA6VKcY0a6jTOSatoUwZn4d7TLeX5UcR85c114Hs1xEQAQEiIEAEBIiAABEQAQEiIEAEBIiAABEQAQEiIEAEBIiAABEQAQEiIEAEBIiAABEQAQEiIEAEBIiAABEQAQEiIEAEBIiAABEQAQEiIEAEBIiAABEQAQEiIEAEBIiAABEQAQEiIEAEBIiAABEQIAIiIEAEBIiAANHSAlCto4gfIG3QadZQpvZeRNpDnR4BBgCv/grcUXE8EQAAAABJRU5ErkJggg==) repeat 0 0;
animation: bg-portfolio 6s infinite;
animation-timing-function: linear;
}


@keyframes bg-portfolio {
  100% {
    background-position: 100px 100px;
  }
}
@keyframes bg-scrolling {
  0% {
    background-position: 214px 214px;
  }
}


#portfolio-list .heading {
  color: #fff;
}


/* 1 ============================================================
=pp portfolio-list */
.portfolio-list .ppGridPortfolio {
display: flex;
flex-direction: column;
gap: var(--gap-5);
}


.grid-portfolio {
grid-template-columns: repeat(auto-fit, minmax(34rem, 1fr));
grid-gap:var(--gap-2);
place-items: center;
/*grid-auto-flow:row;*/
/*background: #fff;*/
position: relative;
z-index: 1;
}

/* 912px */
@media (min-width: 57em) {
  .grid-portfolio {
  grid-template-columns: repeat(auto-fit, minmax(44rem, 1fr));
/*  grid-gap:var(--gap-2);*/
  }
}

/* 1200px */
@media (min-width: 75em) {
  .grid-portfolio {
  grid-template-columns: repeat(auto-fit, minmax(54rem, 1fr));
  grid-gap:var(--gap-3);
  }
}


/*.ppGridPortfolio :is(.item:first-child,.item:nth-child(3),.item:last-child) {
grid-row: span 2;
}*/
.ppGridPortfolio .item:nth-child(4n + 2) {
grid-row: span 2;
}


/*.ppGridPortfolio :is(.item:first-child,.item:nth-child(3),.item:last-child) img {
aspect-ratio: 1/2.062;
}*/



/*.ppGridPortfolio .item:nth-child(6) {
    grid-column: span 2;
}*/

.ppGridPortfolio .item {
/*max-width: 42.4rem;*/
box-shadow: var(--shadow-2);
}
.ppGridPortfolio .item>* {
position: relative;
color: #fff;
border-radius: var(--radius-2);
overflow: hidden;
}
/* pp-1 */
/*.ppGridPortfolio :is(.item:nth-child(6n+5),.item:nth-child(6n+6),.item:nth-child(6n+4)) .pp-1 img {
aspect-ratio: 1/1;
}*/
.ppGridPortfolio .pp-1 img {
border-radius: var(--radius-2);
aspect-ratio: 1/1;
object-fit: cover;
object-position: left top;
width:100%;
}
/* 512px */
@media (min-width: 32em) {
  .ppGridPortfolio .pp-1 img {
  aspect-ratio: 2.0911/1;
  }
  .ppGridPortfolio .item:nth-child(4n + 2) img {
  aspect-ratio: 1/1;
  }
}

.carousel.ppGridPortfolio .pp-1 img {
aspect-ratio: 1/1.25;
}

/*pp-2*/
.ppGridPortfolio .pp-2 {
position: absolute;
left: 0;
top:0;
width: 100%;
height:100%;
max-height: 100%;
display: flex;
flex-direction: column;
/*gap: var(--gap);*/
transition: all .6s ease-out;
z-index: 1;
transform: translateY(100%);
pointer-events: none;

}

.ppGridPortfolio :is(.pp-21,.pp-23) {
padding: 2.8rem 3rem;
}
.ppGridPortfolio .pp-21 {
transform: translateY(-100%);
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #0A2A47bb);
}
.ppGridPortfolio .title {
font-size: 2.8rem;
font-weight: 700;
font-family: var(--font-2);
}
.ppGridPortfolio .legend {
font-size: 1.6rem;
font-style: italic;
font-family: var(--font-2);
margin-top: .2em;
}

/* desc*/
.ppGridPortfolio .pp-22 {
font-size: 1.7rem;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
color: #ffffffbb;
word-wrap: break-word;
padding: 0 3rem;
margin:-.2em 0;
/*display: none;*/
}
.ppGridPortfolio .pp-22 p {
font-size: inherit;
}

/* view */
.ppGridPortfolio .item .pp-23 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--gap-1_5) var(--gap-2_5);
margin-top: auto;
}
.ppGridPortfolio .item .pp-23>* {
position: relative;
pointer-events: auto;
display: flex;
align-items: center;
gap:.3rem;
}


/* hover */
.ppGridPortfolio .item:hover .pp-21 {
transform: translate(0, 0);
background: none;
}

.ppGridPortfolio .item:hover .pp-2 {
transform: translate(0, 0);
transition: all .3s ease-out .1s;
background: #0A2A47bb;
}
/* pp-3 */
.ppGridPortfolio .item .pp-3 {
position: absolute;
left: 0;
top:0;
right: 0;
bottom: 0;
}

.ppGridPortfolio .sortPagiBar {
  color: var(--color-white-3)
}
.ppGridPortfolio .portfolio-pagination a:not(.current) {
  background: var(--color-white-2);
}



/* 2 =========================================
=pp column */
#portfolio-latest {

}

.ppListColumnPortfolio,
.ppListColumnPortfolio .pp-2 {
display: flex;
flex-direction: column;
gap: var(--gap-2_5);
}
.ppListColumnPortfolio .pp-1 {
margin-bottom: var(--gap--1_5);
display: flex;
}
.ppListColumnPortfolio img {
border-radius: var(--radius-2);
aspect-ratio: 2.5 / 1;
object-fit: cover;
object-position: center top;
}
.ppListColumnPortfolio .pp-2 {
gap: var(--gap--2);
}
.ppListColumnPortfolio .title {
font-weight: 700;
font-family: var(--font-2);
font-size: 1.7rem;
}
.ppListColumnPortfolio .legend {
opacity: .5;
}
.ppListColumnPortfolio .view-all {
justify-content: flex-start;
}













/* 1 ============================================================
=pp solo */

#portfolio-single-content {
display: flex;
gap: var(--gap-5);
}
#portfolio-single-content .item {
padding: 0;
}

/*pp-1*/
#portfolio-single-content .pp-1 {
flex:66.2655%;
max-width: 66.2655%;
}
#portfolio-single-content .pp-1 .item,
#portfolio-single-content .pp-1 img {
border-radius: var(--radius-3);
overflow: hidden;
}
#portfolio-single-content .items {
box-shadow: var(--shadow-2);
border-radius: var(--radius-3);

}

/* pp-2 */
#portfolio-single-content .pp-2 {
/*flex:calc(25% + 8.5rem);
max-width:calc(25% + 8.5rem);*/
flex:calc(33.7345% - var(--gap-5));
max-width: calc(33.7345% - var(--gap-5));
display: flex;
flex-direction: column;
gap: var(--gap);
}
#portfolio-single-content .pp-2 h2 {
/*font-size: calc(4.7rem * var(--glob-20));*/
}
#portfolio-single-content .heading {
margin-bottom: .3em;
}
#portfolio-single-content .url_site {
display: flex;
align-items: center;
gap: var(--gap);
justify-content: flex-end;
flex-wrap: wrap;
}
#portfolio-single-content .slick-arrow {
top: 15vw;
opacity: 0;
}
#portfolio-single-content:hover .slick-arrow {
opacity: 1;
}


.anime-cubic-bezier .slider-track {
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);

}
.anime-cubic-bezier .item {
  position: relative;
  z-index: 1;
  background: var(--color-blue3)
}
.anime-cubic-bezier .item img {
width: 100%;
transition: all 3s cubic-bezier(0.7, 0, 0.3, 1);
opacity:0;
mix-blend-mode: multiply;
/*transform: scale(1);*/
}
.anime-cubic-bezier .slick-active img {
/*transform: scale(1) translate(0px) rotate(0);*/
animation: ppPortfolioAnimationSolo 6s 1 ease-in-out forwards;
transition:all .3s cubic-bezier(0.7, 0, 0.3, 1);
opacity: 1;
mix-blend-mode: normal;
}

@keyframes ppPortfolioAnimationSolo {
  0% {
    transform: scale(1) translate(0, 0) rotate(0);
    filter: grayscale(100%);
  }
  60% {
    filter: grayscale(0)
  }
  100% {
    transform: scale(1.05) translate(3%, 0%) rotate(-3deg);
    filter: grayscale(0)
  }
}


/*-------------------------------
=pp Home */
#ppportfolio-home {
background: var(--color-blue3);
box-shadow: inset 0rem 0rem 7rem #000000;
}

#ppportfolio-home .heading {
color:#fff;
}
#ppportfolio-home .title {
font-size: calc(2.2rem * var(--glob-20));
}
#ppportfolio-home .legend {
font-size: 1.5rem;
}
#ppportfolio-home .url-site {
font-size: 1.5rem
}
#ppportfolio-home .pp-21 {
display: flex;
flex-direction: column;
gap: var(--gap--2);
}
#ppportfolio-home :is(.pp-21,.pp-23) {
padding: 1.4rem 1.6rem;
}

#ppportfolio-home :is(.pp-22) {
padding: 0 2.3rem;
font-size: 1.5rem;
}

#ppportfolio-home .slick-arrow {
opacity: 0;
}
#ppportfolio-home .items:hover .slick-arrow {
opacity: 1;
}
/* 768px */
@media (min-width: 48em) {
  #ppportfolio-home :is(.pp-21,.pp-23) {
  padding: 2.2rem 2.3rem;
  }
}
/* 1600px */
@media (min-width: 100em) {
  #ppportfolio-home .container {
  max-width: 188rem;
  }
}



/* 3 -------------------------------
=pp pagination */
.portfolio-pagination a span {
display: none;
}
.portfolio-pagination :is(.first,.prev,.next,.last):after {
font-family: var(--font-ti);
content:'';

}
.portfolio-pagination .first:after {
content: "\e662";
}
.portfolio-pagination .prev:after {
content: "\e64a";
}
.portfolio-pagination .next:after {
content: "\e649";
}
.portfolio-pagination .last:after {
content: "\e661";
}





/* 0 ============================================================
=pp Mobile ★★★
============================================================== */
/* 1199px */
@media (max-width: 74.9375em) {
  #portfolio-single-content {
    flex-direction: column;
  }
  #portfolio-single #portfolio-single-content >* {
    max-width: 100%;
  }
  #portfolio-single-content .pp-2 {
    order:-1;
  }























}/* end 1199px */