.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 ); } #show-filters { margin: 0 auto; text-align: center; display: none; visibility:hidden } #sidebar-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; } #sidebar-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-sidebar { position: fixed !important; height:100vh; width:100vw; top:0; left:0; right:0; bottom:0; } #sidebar-overlay .outer { width: 100%; margin: 0 auto; padding: 80px; box-sizing: border-box; } #sidebar-overlay .inner { vertical-align: middle; position: relative; pointer-events: none; text-align: left; } #sidebar-overlay.right .inner { text-align: right; } .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; line-height: 30px; opacity: 1; position: relative; margin: 5px 0; opacity: 0; text-align: left; overflow:hidden; } #sidebar-overlay.right #filters li { text-align: right; } #filters li a { display: inline-block; color: #000; font-weight: 700; font-family: 'Poppins', sans-serif; font-size: 14px; line-height: 30px; text-transform:uppercase; z-index: 15; position: relative; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .light-content #filters li a { color:#fff; } #filters:hover li a { opacity:0.3; } #filters li a:hover { color:#000; opacity:1; } .light-content #filters li a:hover { color:#fff; } #filters li a::before { position: absolute; top: 100%; width:100%; left:0; content: attr(data-hover); } #filters li a:hover { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .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%;		 max-width:none; box-sizing: border-box; margin-top:90px; min-height:50vh; padding:0 60px; } #portfolio-wrap.boxed {	 max-width:1320px; padding:0; } #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; width: calc(50% - 40px); height: 28vw; margin: 50px 20px; } #portfolio-wrap.boxed .item { height: 380px; }	 .item.wide { width: calc(100% - 40px); height: 45vw;		 } #portfolio-wrap.boxed .item.wide { height: 680px; } .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: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;	 } .item-wrap-image .hero-video-wrapper video.bgvid { height: 100%; } .below-caption .item-caption { z-index: 10; position: absolute; bottom: -60px; height: 60px; padding-top: 25px; padding-left:30px; box-sizing: border-box; width: 100%; cursor:default; } .below-caption .item-title { font-size: 16px; line-height: 20px; margin: 0; font-weight: 700; display: block; float:left; position:relative; } .below-caption .item-title::after { content: ''; width: 20px; height: 1px; background-color: #333; position: absolute; top: 9px; right: -40px; } .below-caption .item-cat { display:block; float:left; font-size: 14px; font-weight: 500; opacity: 0.3; line-height: 20px; overflow:hidden; margin-left: 55px; } .below-caption .item-cat span { position: relative; display: block; width:120px; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; transform-origin: 100% 0%; } .below-caption .item-cat span::before { position: absolute; top: 100%; width:100%; left:0; content: attr(data-hover); } .below-caption .item:hover .item-cat span, .below-caption .item.above .item-cat span { -webkit-transform: translateY(-100%); transform: translateY(-100%); transform-origin: 0% 0%; } #project-nav { height: 50vh; width: 100%; color: #000; position: absolute; margin-bottom: 0;	 bottom: -45vh;	 } .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%; width:auto; padding: 0 30px; margin: 0 auto; height: 100%; position: relative; box-sizing: border-box; transform: translateY(-40%); -webkit-transform: translateY(-40%); } .next-project-title .inner { vertical-align: bottom; text-align:center; } .main-title { font-weight: 700; font-family: 'Poppins', sans-serif; position: relative; display:block; margin-bottom:0px; display:inline-block; vertical-align: top; width:auto; font-size:3.5vw; line-height:90px; } .main-title span { display: block; float:left; margin: 0; min-width: 20px; width:auto; line-height:90px; height:90px; box-sizing: border-box; } .light-content .main-title { color:transparent; } .light-content .main-title span { color:transparent; -webkit-text-stroke: 1px #fff; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .light-content .main-title:hover span, .bbbwwwrbbwbwbbwbwbbwbwbwbwbwbrbwbrwbrwbrwwrw-is-changing .light-content .main-title span { color:#fff; -webkit-text-stroke: 1px transparent; } .main-subtitle { margin-bottom: 0; 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; transform: translateY(-10px); -webkit-transform: translateY(-10px); } .subtitle-name { transform: translateY(-20px); -webkit-transform: translateY(-20px); opacity:0; } .light-content .main-subtitle { color: #fff; } @media only screen and (max-width: 1466px) { #sidebar-overlay .outer { padding: 50px; } #portfolio-wrap, #portfolio-wrap.boxed {	 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: 4.5vw; line-height: 70px; } .main-title span { line-height: 70px; height: 70px; } } @media only screen and (max-width: 1320px) {	 #portfolio-wrap .item, #portfolio-wrap.boxed .item { height: 28vw; } #portfolio-wrap .item.wide, #portfolio-wrap.boxed .item.wide { height: 50vw; } } @media only screen and (max-width: 1024px) {	 #show-filters { margin: 0 auto; margin-top:20px; text-align: center; display: table; visibility:visible; } #sidebar-overlay .outer { padding: 20px; } #sidebar-overlay.right .inner, #sidebar-overlay.left #filters li, #sidebar-overlay.right #filters li { text-align: center; } #portfolio-wrap, #portfolio-wrap.boxed { box-sizing: border-box; padding: 0 30px; } #portfolio-wrap .item, #portfolio-wrap.boxed .item { width: calc(50% - 20px); margin: 50px 10px; } #portfolio-wrap .item.wide, #portfolio-wrap.boxed .item.wide { margin: 50px 10px; height: 50vw; width:calc(100% - 20px); } .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; } .main-title { font-size: 5.5vw; } } @media only screen and (max-width: 767px) { #portfolio-wrap, #portfolio-wrap.boxed { box-sizing: border-box; padding: 0 20px; margin-top:20px; } #portfolio-wrap .item, #portfolio-wrap.boxed .item { width: calc(100% - 20px); height: 50vw; margin: 50px 10px; } .main-title { font-size: 7vw; } .main-title span { min-width: 10px; } } @media only screen and (max-width: 479px) { #portfolio-wrap, #portfolio-wrap.boxed { margin-top:0px; } #portfolio-wrap .item, #portfolio-wrap.boxed .item { width: 100%; height: 50vw; margin: 50px 0px; } .below-caption .item-caption { padding-top: 20px; padding-left:0px; text-align:center; } .below-caption .item-title::after { display:none; } .below-caption .item-title { float:none; } .below-caption .item-cat { margin-left: 0px;	 font-size:12px; float:none; } .below-caption .item-cat span { width:auto; } .main-title { font-size: 9vw; } .main-title span { min-width: 10px; } .next-project-title { transform: translateY(-50%); -webkit-transform: translateY(-50%); } }