/* ------------ */
/* PROJECTS CSS */
/* ------------ */

/* ------- */
/* Wrapper */
/* ------- */

.wrapper {background:#fff;}

/* ------------ */
/* Project list */
/* ------------ */

.projects .project {position:relative;margin-top:0;width:calc(100% - 8vw);height:300px;margin-left:auto;margin-right:auto;margin-bottom:12px;transition:height 0.6s ease-out, margin-top 0.6s ease-out, margin-bottom 0.6s ease-out, opacity 0.6s ease-out;}
.projects .project .project-container {position:relative;width:100%;height:100%;transition:all 0.6s ease-out;cursor:pointer;margin-left:auto;margin-right:auto;}
.projects .project .project-content {filter:grayscale(100%);/*filter:grayscale(45%) brightness(0.75);*/position:relative;width:100%;height:100%;margin-bottom:80px;margin-left:50%;transform:translateX(-50%);transition:all 0.6s ease-out;overflow:hidden;}
.projects .project .project-container:hover .project-content {filter:grayscale(0%);width:100%;}
.projects .project .project-description-content {position:absolute;top:0;left:0;height:100%;width:100%;margin-left:50%;transform:translateX(-50%);opacity:1;transition:all 0.6s ease-out;overflow:hidden;}
.projects .project .project-container:hover .project-description-content {opacity:1;}

body.init .projects .project .project-content .background {background:rgba(0,0,0,1);}
.projects .project .project-content .background {position:absolute;width:100vw;height:100vh;background:#111;transition:background 2s ease-in-out;transition-delay:1s;}

body.init .projects .project-content .project .overlay {opacity:1;}	
.projects .project .project-content .overlay {position:absolute;top:0;left:0;width:100vw;height:100vh;opacity:0;background:rgba(0,0,0,1);transition:opacity 1s ease-in-out;pointer-events:none;}
.projects .project .project-content .overlay .overlay-container {}
.projects .project .project-content .overlay .overlay-content {}

body.init .projects .project .project-content .showcase {opacity:0;width:100%;height:100%;}	
.projects .project .project-content .showcase {position:absolute;width:100%;height:100%;background:#000;right:0;overflow:hidden;opacity:1;transition:opacity 2s ease-in-out, width 0s ease-in-out;}
.projects .project .project-content .showcase .showcase-container {position:relative;width:100%;height:100%;}
.projects .project .project-content .showcase .showcase-content {position:absolute;width:100%;height:100%;perspective:800px;perspective-origin: 50% 50%;}
.projects .project .project-content .showcase .showcase-content img {display:block;width:100%;height:100%;object-fit:cover;animation-duration:30s;animation-delay:0s;animation-fill-mode:forwards;}
.projects .project .project-content .showcase .showcase-content video {width:100%;height:100%;object-fit:cover;animation-duration:30s;animation-delay:0s;animation-fill-mode:forwards;}

body.init .projects .project .project-description-content .description {opacity:1;}			
.projects .project .project-description-content .description {position:relative;margin-left:38px;width:calc(100% - 74px);height:100%;opacity:1;transition:opacity 1s;z-index:200;box-sizing:border-box;}
.projects .project .project-description-content .description .description-container {position:absolute;width:100%;height:100%;display:table;}
.projects .project .project-description-content .description .description-content {position:relative;display:table-cell;vertical-align:bottom;padding-bottom:40px;}
.projects .project .project-description-content .project-container:hover .project-description-content {opacity:1;}			
.projects .project .project-description-content .description .description-content .description-title-group {display:table;width:100%;}
.projects .project .project-description-content .description .description-content .description-title-group .icon {position:relative;display:table-cell;vertical-align:bottom;border-radius:0;width:0;height:0;margin:0;padding:0;}
.projects .project .project-description-content .description.iconized .description-content .description-title-group .icon {display:none;width:75px;height:auto;padding:0 10px 0 0;margin:0;}
.projects .project .project-description-content .description .description-content .description-title-group .icon .icon-container {position:relative;width:75px;height:75px;border-radius:14px;overflow:hidden;margin-bottom:6px;}
.projects .project .project-description-content .description .description-content .description-title-group .icon .icon-content {width:100%;height:100%;}
.projects .project .project-description-content .description .description-content .description-title-group .icon .icon-content img {object-fit:cover;width:100%;height:100%;}
.projects .project .project-description-content .description .description-content .description-title-group .title {position:relative;display:table-cell;vertical-align:bottom;padding:0;margin:0;}
.projects .project .project-description-content .description.iconized .description-content .description-title-group .title {margin:0;padding:0;}
.projects .project .project-description-content .description .description-content .description-title-group .title .title-container {}
.projects .project .project-description-content .description .description-content .description-title-group .title .title-content {font-family:var(--site-font-family);font-feature-settings:var(--site-font-feature-settings);font-size:24px;color:#fff;text-transform:uppercase;font-weight:700;text-shadow:0 10px 10px rgba(0,0,0,0.4);line-height:26px;margin-top:0;text-align:center;}
.projects .project .project-description-content .description .description-content .info {font-family:var(--site-font-family);font-feature-settings:var(--site-font-feature-settings);font-size:14px;line-height:20px;color:#fff;font-weight:700;letter-spacing:0px;text-shadow:0 10px 10px rgba(0,0,0,0.4);padding:0;margin:8px 0 0 0;text-align:center;}

.projects .project .project-description-content .description-content > .actions {position:relative;margin:30px 0 -30px 0;height:0;opacity:0;text-align:center;transition:all 0.6s;}
.projects .project .project-description-content .description-content > .actions .action {}
.projects .project .project-description-content .description-content > .actions .action .button {}
.projects .project .project-description-content .description-content > .actions .action .button a {position:relative;display:inline-block;border:1px solid #fff;padding:14px 52px 10px 52px;background:rgba(255,255,255,0);color:#fff;font-family:var(--site-font-family);font-feature-settings:var(--site-font-feature-settings);font-size:11px;font-weight:700;text-transform:uppercase;text-decoration:none;transition:all 0.6s;}
.projects .project .project-description-content .description-content > .actions .action .button a:hover {background:rgba(255,255,255,1);color:#333;}
.projects .project .project-description-content .description-content > .actions .action .button a:active {background:rgba(255,255,255,0.6);color:#333;box-shadow:0 0 8px 0 rgba(0,0,0,0.2) inset;}

.projects .project .project-container:hover .project-description-content .description-content > .actions {margin-top:30px;margin-bottom:0;height:30px;opacity:1;}
.projects .project .project-container:active .project-description-content .description-content > .actions .action .button a {background:rgba(255,255,255,0.6);color:#333;box-shadow:0 0 8px 0 rgba(0,0,0,0.2) inset;}

.projects .project .project-description-content > .actions {position:absolute;bottom:0;right:0;margin-bottom:10px;opacity:0;transition:all 0.6s;}
.projects .project .project-description-content > .actions .action {}
.projects .project .project-description-content > .actions .action .button {}
.projects .project .project-description-content > .actions .action .button a {position:relative;display:inline-block;border:1px solid #fff;padding:14px 52px 10px 52px;background:rgba(255,255,255,0);color:#fff;font-family:var(--site-font-family);font-feature-settings:var(--site-font-feature-settings);font-size:11px;font-weight:900;text-transform:uppercase;text-decoration:none;transition:all 0.6s ease-out;}
.projects .project .project-description-content > .actions .action .button a:hover {background:rgba(255,255,255,1);color:#333;}
.projects .project .project-description-content > .actions .action .button a:active {background:rgba(255,255,255,0.6);color:#333;box-shadow:0 0 8px 0 rgba(0,0,0,0.2) inset;}

.projects .project .project-container:hover .project-description-content > .actions {margin-bottom:40px;opacity:1;}
.projects .project .project-container:active .project-description-content > .actions .action .button a {background:rgba(255,255,255,0.6);color:#333;box-shadow:0 0 8px 0 rgba(0,0,0,0.2) inset;}

.projects .project.selected .project-description-content {opacity:0;}
.projects .project.selected .project-container:hover .project-description-content {opacity:0;}

.projects .project.selected .project-description-content .description-content > .actions {margin-top:0;margin-bottom:0;height:0;opacity:0;}
.projects .project.selected .project-container:hover .project-description-content .description-content > .actions {margin-top:0;margin-bottom:0;height:0;opacity:0;}

.projects .project.selected .project-description-content > .actions {opacity:0;}
.projects .project.selected .project-container:hover .project-description-content > .actions {opacity:0;}

/* -------------------- */
/* Project list motions */
/* -------------------- */

.projects .project .showcase .showcase-content-step1 {z-index:100;}
.projects .project .showcase .showcase-content-step2 {z-index:99;}
.projects .project .showcase .showcase-content-step3 {z-index:98;}

.projects .project .showcase .showcase-content-step1 img {animation-name:enlarge-view-step1;transform:translateZ(200px);}
.projects .project .showcase .showcase-content-step2 img {animation-name:enlarge-view-step2;transform:translateZ(200px);}
.projects .project .showcase .showcase-content-step3 img {animation-name:enlarge-view-step3;transform:translateZ(200px);}

.projects .project .showcase .showcase-content-step1 video {animation-name:enlarge-view-step1;transform:translateZ(200px);}
.projects .project .showcase .showcase-content-step2 video {animation-name:enlarge-view-step2;transform:translateZ(200px);}
.projects .project .showcase .showcase-content-step3 video {animation-name:enlarge-view-step3;transform:translateZ(200px);}

.projects .project .showcase .transition-to-video {z-index:100;}
.projects .project .showcase .transition-to-video img {animation-name:zoom-out-and-fade-delay-80;animation-duration:5s;transform:translateZ(200px);animation-timing-function:ease-in;}


@keyframes enlarge-view-step1 {
	0% {opacity:1;transform:translateZ(200px);}
	20% {opacity:1;}
	40% {opacity:0;}
	100% {opacity:0;transform:translateZ(0);}
}

@keyframes enlarge-view-step2 {
	0% {opacity:1;transform:translateZ(200px);}
	60% {opacity:1;}
	80% {opacity:0;}
	100% {opacity:0;transform:translateZ(0);}
}

@keyframes enlarge-view-step3 {
	0% {transform:translateZ(200px);}
	100% {transform:translateZ(0);}
}

@keyframes zoom-out-and-fade-delay-80 {
	0% {transform:translateZ(200px);opacity:1;}
	80% {opacity:1;}
	100% {transform:translateZ(150px);opacity:0;}
}

/* ------------------ */
/* Project transition */
/* ------------------ */

.transition {position:absolute;top:0;left:0;width:100%;height:0;background:transparent;background:rgba(255,255,255,0);z-index:2;}
.transition-container {width:100%;height:auto;}
.transition-content {width:100%;height:auto;}

body.view-project .transition-content {}
body.view-project .transition-content .project {}

.transition .project {position:relative;margin-top:0;width:1095px;height:543px;margin-left:auto;margin-right:auto;margin-bottom:80px;transition:height 0.6s ease-out, margin-top 0.6s ease-out, margin-bottom 0.6s ease-out, opacity 0.6s ease-out;}
.transition .project .project-container {position:relative;width:100%;height:100%;transition:all 0.6s ease-out;cursor:pointer;margin-left:auto;margin-right:auto;}
.transition .project .project-content {filter:grayscale(100%);position:relative;width:1095px;height:543px;margin-bottom:80px;margin-left:50%;transform:translateX(-50%);transition:all 0.6s ease-out;overflow:hidden;}
.transition .project .project-description-content {display:none;}

body.init .transition .project .project-content .background {background:rgba(0,0,0,1);}
.transition .project .project-content .background {position:absolute;width:100vw;height:100vh;background:#111;transition:background 2s ease-in-out;transition-delay:1s;}

body.init .transition .project-content .project .overlay {opacity:1;}	
.transition .project .project-content .overlay {position:absolute;top:0;left:0;width:100vw;height:100vh;opacity:0;background:rgba(0,0,0,1);transition:opacity 1s ease-in-out;pointer-events:none;}
.transition .project .project-content .overlay .overlay-container {}
.transition .project .project-content .overlay .overlay-content {}

body.init .transition .project .project-content .showcase {opacity:0;width:100%;height:100%;}	
.transition .project .project-content .showcase {position:absolute;width:100%;height:100%;background:#000;right:0;overflow:hidden;opacity:1;transition:opacity 2s ease-in-out, width 0s ease-in-out;/*box-shadow:0 0 20px 0 rgba(0,0,0,0.30);*/}
.transition .project .project-content .showcase .showcase-container {position:relative;width:100%;height:100%;}
.transition .project .project-content .showcase .showcase-content {position:absolute;width:100%;height:100%;perspective:800px;perspective-origin: 50% 50%;}
.transition .project .project-content .showcase .showcase-content img {display:block;width:100%;height:100%;object-fit:cover;animation-duration:30s;animation-delay:0s;animation-fill-mode:forwards;/*animation-timing-function:ease-out;*/}
.transition .project .project-content .showcase .showcase-content video {width:100%;height:100%;object-fit:cover;animation-duration:30s;animation-delay:0s;animation-fill-mode:forwards;/*animation-timing-function:ease-out;*/}

/* -------------------------- */
/* Project transition motions */
/* -------------------------- */

.transition-content .project {position:fixed;height:0;width:100%;margin:0;padding:0;top:0;left:0;z-index:-1;transition:all 0.6s;}
.transition-content .project .project-container {position:relative;width:100%;height:100%;margin-left:auto;margin-right:auto;transition:all 0.6s;}
.transition-content .project .project-content {position:relative;width:100%;height:100%;filter:grayscale(100%);transition:all 0.6s;}

.transition-content .project .showcase-content {opacity:1;transition:opacity 0.6s;}
.transition-content .project .showcase-content.load {opacity:0;}

.transition-content .project .showcase-content-step1 img {transform:translateZ(200px);}
.transition-content .project .showcase-content-step2 img {transform:translateZ(200px);}
.transition-content .project .showcase-content-step3 img {transform:translateZ(200px);}

.transition-content .project .showcase-content-step1 video {transform:translateZ(200px);}
.transition-content .project .showcase-content-step2 video {transform:translateZ(200px);}
.transition-content .project .showcase-content-step3 video {transform:translateZ(200px);}

.transition-content .project .transition-to-video img {transform:translateZ(200px);}

/* scalled to site-container */

.transition-content.init .project {}
.transition-content.init .project .project-container {/* positions and sizes values calculated from source - delegate to JS */}
.transition-content.init .project .project-content {}

.transition-content.step00 .project {}
.transition-content.step00 .project .project-container {/* positions and sizes values calculated from source - delegate to JS */}
.transition-content.step00 .project .project-content {}

.transition-content.step01 .project {}
.transition-content.step01 .project .project-container {margin-left:auto;margin-right:auto;/* positions and sizes values calculated from source - delegate to JS */}
.transition-content.step01 .project .project-content {}

.transition-content.step02 .project {}
.transition-content.step02 .project .project-container {width:100%;margin-left:auto;margin-right:auto;/* positions and height calculated from source - delegate to JS */}
.transition-content.step02 .project .project-content {}

.transition-content.step03 .project {}
.transition-content.step03 .project .project-container {width:100%;margin-left:auto;margin-right:auto;height:84vh;max-height:830px;}
.transition-content.step03 .project .project-content {}

.transition-content.step04 .project {}
.transition-content.step04 .project .project-container {width:100%;margin-left:auto;margin-right:auto;height:84vh;max-height:830px;}
.transition-content.step04 .project .project-content {filter:grayscale(0%);}

/* fullwidth */

.transition-content.step02.fullwidth .project .project-container {max-width:100%;}

.transition-content.step03.fullwidth .project .project-container {max-width:100%;top:0;left:0;}

.transition-content.step04.fullwidth .project .project-container {max-width:100%;top:0;left:0;}

/* ----------- */
/* New section */
/* ----------- */



/* ------------- */
/* ------------- */
/* ------------- */
/* Media queries */
/* ------------- */
/* ------------- */
/* ------------- */

/* ------------ */
/* Project list */
/* ------------ */

@media screen and (min-width: 640px){
	.projects .project .project-content {/*filter:grayscale(100%);*/}

	.projects .project .project-description-content .description .description-content .description-title-group {width:auto;}
	.projects .project .project-description-content .description .description-content .description-title-group .title .title-content {text-align:left;}
	.projects .project .project-description-content .description.iconized .description-content .description-title-group .icon {display:block;}
	.projects .project .project-description-content .description .description-content .info {text-align:left;}
	.projects .project .project-description-content .description-content > .actions {text-align:left;}
}

@media screen and (min-width: 1400px) {
	.projects .project {width:1095px;height:543px;margin-bottom:80px;}
	.projects .project .project-content {width:1095px;height:543px;}
	.projects .project .project-container:hover .project-content {width:1230px;}
	.projects .project .project-description-content {height:543px;width:1095px;opacity:0.6;}
	.projects .project .project-description-content .description .description-content .description-title-group .title .title-content {font-size:34px;line-height:39px;}
	.projects .project .project-description-content .description.iconized .description-content .description-title-group .icon {width:75px;height:auto;}
	.projects .project .project-description-content .description .description-content .description-title-group .icon .icon-container {border-radius:14px;width:75px;height:75px;}
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
	.projects .project {width:980px;height:500px;margin-bottom:60px;}
	.projects .project .project-content {width:980px;height:500px;}
	.projects .project .project-container:hover .project-content {width:1080px;}
	.projects .project .project-description-content {height:500px;width:980px;opacity:0.6;}
	.projects .project .project-description-content .description .description-content .description-title-group .title .title-content {font-size:34px;line-height:39px;}
	.projects .project .project-description-content .description.iconized .description-content .description-title-group .icon {width:75px;height:auto;}
	.projects .project .project-description-content .description .description-content .description-title-group .icon .icon-container {border-radius:14px;width:75px;height:75px;}
}

@media screen and (min-width: 640px) and (max-width: 1200px) {
	.projects .project {width:calc(100% - 8vw);height:500px;margin-bottom:40px;}
	.projects .project .project-description-content .description .description-content .description-title-group .title .title-content {font-size:32px;line-height:36px;}
	.projects .project .project-description-content .description.iconized .description-content .description-title-group .icon {width:70px;height:auto;}
	.projects .project .project-description-content .description .description-content .description-title-group .icon .icon-container {border-radius:12px;width:70px;height:70px;}
}

/* -------------------------- */
/* Project transition motions */
/* -------------------------- */

@media screen and (min-width: 1200px) {
	.transition-content.step03 .project .project-container {height:100vh;max-height:100vh;}
	.transition-content.step04 .project .project-container {height:100vh;max-height:100vh;}
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
	.transition-content.step03 .project .project-container {max-height:830px;}
	.transition-content.step04 .project .project-container {max-height:830px;}
}