.thumb-bwrwrrwrwbbbbbrrwwwwwbrwbwbr { visibility: hidden; height:100vh; width: 100%; left:0px; position: fixed; top:0; z-index:100; opacity:1; -webkit-transform: scale(1.05); transform: scale(1.05);	 background-color:#161717; } .thumb-page { cursor: pointer; position: absolute; height:100vh; width:100%; top:0; left:0px; position: fixed; visibility:hidden; background-position:center center; background-size:cover; background-repeat:no-repeat; } .thumb-page::after { content: ""; width: 100%; height: 60%; position: absolute; bottom: 0; left: 0; pointer-events: none; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); } .filters-info { font-weight: 600; font-family: 'Poppins', sans-serif; font-size: 12px; line-height:30px; margin:25px 0; margin-left:0px; overflow: hidden; width:140px; color:#000; float:left; opacity:0; -webkit-transition:translateY(30px); transform: translateY(30px); } .light-content .filters-info { color:#fff; } #show-filters { margin: 0 auto; text-align: center; display: none; visibility:hidden } #filters-overlay { position:fixed; z-index:15; height:100vh; width:100%; top:0; left:0; right:0; bottom:0; opacity:0; visibility:hidden; box-sizing: border-box; -webkit-transition: all 0.1s ease-in-out 0.6s; transition: all 0.1s ease-in-out 0.6s; } #filters-overlay.active { opacity:1; visibility:visible; -webkit-transition: all 0.3s ease-in-out 0.2s; transition: all 0.3s ease-in-out 0.2s; } #close-filters { position: fixed !important; height:100vh; width:100vw; top:0; left:0; right:0; bottom:0; } #filters-overlay .outer { width: 100%; margin: 0 auto; padding: 80px 0; padding-top:160px; box-sizing: border-box; max-width:1180px; } #filters-overlay .inner { vertical-align: middle; position: relative; pointer-events: none; text-align: left; } .filters-wrap { position: relative; width: 100%; max-height: 0px; opacity:0; margin-top: 100px; transition: all 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.2s; -webkit-transition: all 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.2s; } .filters-wrap.active { opacity: 1; max-height: 100px; transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1); } #filters { height: auto; z-index: 15; position: relative; width: auto; display: inline-block; padding: 0; pointer-events: initial; margin: 0; } #filters li { display: block; opacity: 1; position: relative; margin: 5px 0; opacity: 0; text-align: left; overflow:hidden; } #filters li a { display: inline-block; color: #000; font-weight: 700; font-family: 'Oswald', sans-serif; font-size: 3vw; line-height: 5vw; z-index: 15; position: relative; color: transparent; -webkit-text-stroke: 1px rgba(0,0,0,0.3); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .light-content #filters li a { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.3); } #filters li a:hover, #filters li a.active { opacity:1; color:#000; -webkit-text-stroke: 1px rgba(0,0,0,0); } .light-content #filters li a:hover, .light-content #filters li a.active { color:#fff; -webkit-text-stroke: 1px rgba(255,255,255,0); } .isotope, .isotope .isotope-item { -webkit-transition-duration: 1.8s; -moz-transition-duration: 1.8s; -ms-transition-duration: 1.8s; -o-transition-duration: 1.8s; transition-duration: 1.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } #portfolio-wrap {		 position:relative; margin:0 auto; width: 100%; padding:0 13px; box-sizing:border-box; margin-top:90px; min-height:50vh; } #portfolio { position: relative; margin: 0 auto; padding: 0; box-sizing: border-box; -webkit-transition: height 0.5s ease-out; transition: height 0.5s ease-out; } #portfolio:after { content:"";  display:table;  clear:both; } .item { display: block; position: relative; box-sizing: border-box; z-index: 0; margin: 60px; } .item:nth-of-type(3n+1) { width: calc(60% - 120px); height: 30vw; } .item:nth-of-type(3n+2) { width: calc(40% - 120px); height: 20vw; margin-top:20vw; } .item:nth-of-type(3n+3) { width: 66%; height: 35vw; margin-left:17%; } .item-appear{ display: block; position: absoluter; box-sizing: border-box; z-index: 0; width: 100%; height: 100%; opacity: 0.0001; -webkit-transition:translateY(220px) scaleY(1.3); transform: translateY(220px) scaleY(1.3); -webkit-transition: transform 1s cubic-bezier(.165,.84,.44,1), opacity 1s cubic-bezier(.165,.84,.44,1);	 transition: transform 1s cubic-bezier(.165,.84,.44,1), opacity 1s cubic-bezier(.165,.84,.44,1);		 } .item.wide { width: calc(100% - 40px); height: 680px; } .item:nth-child(2n+0) .item-appear { -webkit-transition-delay:0.15s; transition-delay:0.15s; } .item-appear.active{ opacity: 1; -webkit-transition:translateY(0px) scaleY(1); transform: translateY(0px) scaleY(1);	 } .item.above .item-content { opacity: 1!important; } .item-image::after { content: ""; opacity:0; width: 100%; height: 60%; position: absolute; bottom: 0; left: 0; pointer-events: none; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); -webkit-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .load-project-thumb .item-image::after { content: ""; opacity:1; width: 100%; height: 60%; position: absolute; bottom: 0; left: 0; pointer-events: none; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); -webkit-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .item-content { width: 100%; height: 100%; position:relative;	 } .item-wrap { width: 100%; height: 100%; position:absolute;  				 } .item-wrap-image { width: 100%; height: 100%; position:relative; border-radius: 3px;	 -webkit-clip-path: inset(8px 8px 8px 8px); clip-path: inset(8px 8px 8px 8px); -webkit-transition: 1s cubic-bezier(.075,.82,.165,1); -moz-transition: 1s cubic-bezier(.075,.82,.165,1); transition: 1s cubic-bezier(.075,.82,.165,1);		 } .item:hover .item-wrap-image {		 -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);		 } .item-image { background-size:cover; background-position:center center; background-repeat:no-repeat; width:100%; height: 100%; position:relative; display:block; z-index:100; cursor:pointer; background-color:#000;		 overflow:hidden;	 } .below-caption .item-caption { z-index: 10; position: absolute; bottom: 40px; height: auto; padding-left:50px; box-sizing: border-box; width: 100%; cursor:default; pointer-events: none; } .below-caption .item-title {		 margin: 0; font-weight: 700; font-family: 'Oswald', sans-serif; display: block; position:relative; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;		 } .below-caption .item:nth-of-type(3n+1) .item-title { font-size: 30px; line-height: 40px; -webkit-transform: translateY(25px); transform: translateY(25px); } .below-caption .item:nth-of-type(3n+2) .item-title { font-size: 24px; line-height: 30px; -webkit-transform: translateY(30px); transform: translateY(30px); } .below-caption .item:nth-of-type(3n+3) .item-title { font-size: 36px; line-height: 50px; -webkit-transform: translateY(25px); transform: translateY(25px); } .below-caption .item:hover .item-title { -webkit-transform: translateY(0px); transform: translateY(0px); } .below-caption .item-cat { display:block; font-size: 12px; font-weight: 600; opacity: 1; margin-left:2px; line-height: 20px; overflow:hidden; -webkit-transform: translateY(30px); transform: translateY(30px); opacity:0; -webkit-transition: all 0.1s ease-out; transition: all 0.1s ease-out;		 } .below-caption .item:hover .item-cat { -webkit-transform: translateY(5px); transform: translateY(5px); opacity:1; -webkit-transition: all 0.1s ease-out 0.1s; transition: all 0.1s ease-out 0.1s; } #project-nav { height: 60vh; width: 100%; color: #000; position: absolute; margin-bottom: 0;	 bottom: -55vh;	 } .light-content #project-nav { color: #fff; } .next-project-wrap { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; z-index: 3; } .next-project-image { position: absolute; top: 100%; left: 0; height: 100vh; width: 100%; overflow:hidden; } .next-project-image-bg { position: absolute; top: 0; left: 0; height: 100vh; width: 100%; background-size: cover; background-position:center center; background-repeat: no-repeat; opacity:1; -webkit-transform: scale(1.05) translateY(0%); transform: scale(1.05) translateY(0%); } .next-project-image::after { content: ""; width: 100%; height: 60%; position: absolute; bottom: 0; left: 0; pointer-events: none; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); } .next-project-title { display: table; width: 100%; max-width:1280px; padding: 0 50px; margin: 0 auto; height: 100%; position: relative; box-sizing: border-box; } .next-project-title .inner { vertical-align: middle; text-align:left; } .main-title { font-weight: 700; font-family: 'Oswald', sans-serif; margin-bottom:0px; vertical-align: top; width:auto; font-size:86px; line-height:120px; z-index:10; color:transparent; -webkit-text-stroke: 1px rgba(0,0,0,0.3); color:#000;		 position:relative; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .light-content .main-title { color:transparent; -webkit-text-stroke: 1px #fff; } .light-content .main-title:hover, .bbbwwwrbbwbwbbwbwbbwbwbwbwbwbrbwbrwbrwbrwwrw-is-changing .light-content .main-title { color:#fff; -webkit-text-stroke: 1px transparent; } .next-subtitle-info, .next-subtitle-name { margin-bottom: 0; margin-left:2px; opacity: 1; line-height: 20px; height:20px; overflow:hidden; position: relative; left: 0; display: block; font-size:14px; font-weight: 600; font-family: 'Poppins', sans-serif; } .next-subtitle-name { transform: translateY(150px); -webkit-transform: translateY(150px); opacity:0; } .light-content .next-subtitle-info, .light-content .next-subtitle-name { color: #fff; } @media only screen and (max-width: 1466px) { #filters-overlay .outer { padding: 50px; } #portfolio-wrap { box-sizing: border-box; padding: 0 30px; } .item:nth-child(1) .item-appear, .item:nth-child(2) .item-appear { opacity: 1; -webkit-transition:translateY(0px) scaleY(1); transform: translateY(0px) scaleY(1);	 } .main-title { font-size: 70px; line-height: 120px; } } @media only screen and (max-width: 1320px) {	 .item { height: 28vw; } } @media only screen and (max-width: 1024px) {	 #show-filters { margin: 0 40px; margin-top:20px; text-align: center; display: table; visibility:visible; } #filters-overlay .outer { padding: 40px; } #filters li a { font-size: 4vw; line-height: 6vw; } #portfolio-wrap { box-sizing: border-box; padding: 0 10px; } .item:nth-of-type(3n+1) { width: calc(50% - 60px); height: 27vw; margin: 30px; } .item:nth-of-type(3n+2) { width: calc(50% - 60px); height: 27vw; margin: 30px; } .item:nth-of-type(3n+3) { width: calc(100% - 60px); height: 50vw; margin: 30px; } .item-wrap-image { -webkit-clip-path: inset(0px 0px 0px 0px); clip-path: inset(0px 0px 0px 0px); } .below-caption .item-caption { padding-top: 20px; padding-left: 20px; bottom: 20px; } .below-caption .item:nth-of-type(3n+1) .item-title { font-size: 24px; line-height: 30px; -webkit-transform: translateY(30px); transform: translateY(30px); } .below-caption .item:nth-of-type(3n+2) .item-title { font-size: 24px; line-height: 30px; -webkit-transform: translateY(30px); transform: translateY(30px); } .below-caption .item:hover .item-title { -webkit-transform: translateY(0px); transform: translateY(0px); } .next-project-title { padding: 0 40px; } .main-title { font-size: 60px; line-height: 100px; } } @media only screen and (max-width: 767px) { #filters-overlay .outer { padding: 30px; } #filters li a { font-size: 5vw; line-height: 7vw; } #show-filters { margin: 0 30px; } #portfolio-wrap { box-sizing: border-box; margin-top:20px; } .item:nth-of-type(3n+1) { width: calc(50% - 40px); height: 27vw; margin: 20px; } .item:nth-of-type(3n+2) { width: calc(50% - 40px); height: 27vw; margin: 20px; } .item:nth-of-type(3n+3) { width: calc(100% - 40px); height: 50vw; margin: 20px; } .next-project-title { padding: 0 30px; } .main-title { font-size: 50px; line-height: 80px; } } @media only screen and (max-width: 479px) { #filters-overlay .outer { padding: 20px; } #filters li a { font-size: 7vw; line-height: 9vw; } #show-filters { margin: 0 20px; } #portfolio-wrap { margin-top:0px; padding:0; } .item:nth-of-type(3n+1) { width: calc(100% - 40px); height: 50vw; margin: 20px; } .item:nth-of-type(3n+2) { width: calc(100% - 40px); height: 50vw; margin: 20px; } .item:nth-of-type(3n+3) { width: calc(100% - 40px); height: 50vw; margin: 20px; } .below-caption .item:nth-of-type(3n+1) .item-title { font-size: 24px; line-height: 30px; -webkit-transform: translateY(30px); transform: translateY(30px); } .below-caption .item:nth-of-type(3n+2) .item-title { font-size: 24px; line-height: 30px; -webkit-transform: translateY(30px); transform: translateY(30px); } .below-caption .item:nth-of-type(3n+3) .item-title { font-size: 24px; line-height: 30px; -webkit-transform: translateY(30px); transform: translateY(30px); } .below-caption .item:hover .item-title { -webkit-transform: translateY(0px); transform: translateY(0px); } .next-project-title { padding: 0 20px; } .main-title { font-size: 40px; line-height: 80px; } }