div:not(.sticked)>section.wrapper_header.bottom[data-cattype="212"], .sticky-wrapper:not(.sticked) section.wrapper_header.bottom[data-cattype="212"] { border-bottom: 0; background-color: transparent; } .wrapper-bg[data-cattype="420"] { background-position: right top; background-size: contain; background-repeat: no-repeat; background-attachment: scroll; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; overflow: hidden; z-index: -1; } section[data-cattype="420"] { padding-top: 60px; } [data-cattype="420"] h1.heading-project { font-size: 6em; color: #000; font-weight: bold; text-align: left; line-height: 1; -webkit-text-fill-color: hsla(0, 0%, 0%, 0.63); -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; background: url(../../../data/repo/images/our-portfolio/line_animation_black.png) repeat-y; background-clip: border-box !important; background-clip: text !important; -webkit-background-clip: text !important; animation: aitf 12s ease-in-out infinite; } [data-cattype="420"] .head span { font-size: 6em; font-weight: 700; -webkit-text-fill-color: rgba(237, 140, 5, 0.63); -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; background: url(../../../data/repo/images/our-portfolio/line_animation.png) repeat-y; background-clip: border-box !important; background-clip: text !important; -webkit-background-clip: text !important; animation: aitf 12.6s ease-in-out infinite; } [data-cattype="420"] span.number { font-size: 70px; color: #fff; position: absolute; top: 0; left: -40px; transition: 0.3s; font-weight: 600; -webkit-text-stroke: 1px black; } [data-cattype="420"] p { text-align: left; } [data-cattype="420"] .head p { padding-right: 60px; text-align: justify; } [data-cattype="420"] .head { position: sticky; width: 400px; top: 5%; left: 3% !important; transition: all 0.3s ease-in-out; transform: scale(1) !important; } [data-cattype="420"] .fixed { transform: scale(0.9) !important; transition: all 0.3s ease-in-out; left: 2% !important; } [data-cattype="420"] .project-list { margin-top: -100px; margin-left: 450px; } [data-cattype="420"] ul.box { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; margin-top: 21%; padding: 0; } [data-cattype="420"] ul.box li { width: calc(45% - 20px); margin: 0px 40px -40px 40px; text-align: center; border: 1px solid transparent; list-style: none; position: relative; border-radius: 0px 40px 40px 40px; } [data-cattype="420"] ul.box li:nth-child(2n) { margin-top: 45px; } [data-cattype="420"] .project-image { height: 350px; background-position: center top; background-repeat: no-repeat; background-size: cover; position: relative; overflow: hidden; border-radius: 0px 40px 40px 40px; } [data-cattype="420"] .tag-project { position: absolute; bottom: 0; background-color: #666; width: auto; padding: 10px 20px; color: #fff; left: -60%; transition: 0.3s; } [data-cattype="420"] .project-title { text-align: left; padding: 10px 20px; color: #000; transition: 0.3s; } [data-cattype="420"] .overlay-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: 0.5s; background-color: #ff950000; } [data-cattype="420"] ul.box li:hover span.number { color: #f79206; transition: 0.3s; } [data-cattype="420"] ul.box li:hover .overlay-bg { background-color: #ff94008f; transition: 0.5s; } [data-cattype="420"] ul.box li:hover .tag-project { left: 0; transition: 0.3s; } [data-cattype="420"] ul.box li:hover .project-title { transition: 0.3s; color: #f79206; } @keyframes aitf { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 100% 50%; } } @media only screen and (max-width: 1440px) and (min-width: 1200px) { section[data-cattype="420"].wrapper_middle { padding-top: 60px; padding-left: 40px; padding-right: 0px; } [data-cattype="420"] .marqueue-box{ width: 24vw; font-size: 6em; } [data-cattype="420"] ul.box { padding-left: 50px; margin-top: 26%; } [data-cattype="420"] ul.box li { width: calc(44% - 20px); margin: 0px 30px; } [data-cattype="420"] .project-image { height: 250px; border-radius: 0px 20px 20px 20px; } [data-cattype="420"] .project-list { margin-left: 450px; } [data-cattype="420"] ul.box li { border-radius: 0px 20px 20px 20px; } [data-cattype="420"] .tag-project { left: -150%; } [data-cattype="420"] h1.heading-project { font-size: 4.5em; } [data-cattype="420"] .project-title { margin-top: 20px; } [data-cattype="420"] span.time { font-size: 5em !important; margin-top: -10px; text-align: left !important; display: block; } } @media (min-width: 768px) and (max-width: 980px) { [data-cattype="420"] .head { position: relative; width: 100%; top: 2%; left: auto; } [data-cattype="420"] .head { text-align: left; } [data-cattype="420"] .project-list { margin-top: 150px; margin-left: auto; } [data-cattype="420"] .project-image { height: 200px; } [data-cattype="420"] ul.box li { width: calc(44% - 20px); margin: 0px 30px; } [data-cattype="420"] .tag-project { width: 100%; } [data-cattype="420"] .fixed { position: relative !important; left: 30px !important; transform: scale(1) !important; } [data-cattype="420"] .tag-project { left: -120%; } [data-cattype="420"] ul.box { margin-top: 12%; margin-left: 40px; } [data-cattype="420"] .heading { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } [data-cattype="420"] h1.heading-project { font-size: 4em; margin-right: 20px; } [data-cattype="420"] .head span { font-size: 4em; } [data-cattype="420"] ul.box li:nth-child(2n) { margin-top: 20px; } } @media (max-width: 767px) {} @media (max-width: 480px) { section[data-cattype="420"] { margin-bottom: 0; } .wrapper-bg[data-cattype="420"] { background-position: 45% 0; background-size: 255%; } [data-cattype="420"] .marqueue-box{ width: 90vw; } [data-cattype="420"] .head { position: relative; width: 100%; top: 0; left: auto !important; right: auto; } [data-cattype="420"] .project-list { margin: 100px 0px 0px 0px; } [data-cattype="420"] .project-image { height: 180px; } [data-cattype="420"] ul.box { padding: 0; top: 20px; } [data-cattype="420"] ul.box li { width: 100%; margin: 0px 20px -10px 20px; position: relative; } [data-cattype="420"] ul.box li:nth-child(2n) { margin-top: auto; } [data-cattype="420"] h1.heading-project { font-size: 2.2em; text-align: center; padding-right: 10px; } [data-cattype="420"] .head p { padding-right: 0; text-align: center; } [data-cattype="420"] span.number { font-size: 50px; left: -30px; } [data-cattype="420"] .tag-project { left: -120%;} [data-cattype="420"] .project-title { text-align: center; } [data-cattype="420"] .project-image { border-radius: 0px 10px 10px 10px; background-position: center right; } [data-cattype="420"] .fixed { position: relative !important; left: 30px !important; } [data-cattype="420"] .heading span { margin: 0 !important; font-size: 2.2em !important; text-align: center !important; } section[data-cattype="420"] { padding-bottom: 0; margin-bottom: -100px; padding-left: 10px; padding-right: 10px; padding-top: 20px; } [data-cattype="420"] .heading { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } }