h1, h2, h3, h4, h5, h6 { color: var(--light); text-transform: none; } h4 { text-transform: uppercase; font-weight: 500; letter-spacing: 3px; opacity: 0.7; font-size: 1.3em; } .custom-hero-font-1 { padding: 0; line-height: 1; font-size: clamp(16px, 8vw, 90px); font-weight: 500; letter-spacing: 12px; text-transform: uppercase; white-space: nowrap; } .custom-perspective { perspective: 1000px; } .sticky-wrapper.sticky-wrapper-effect-1.sticky-wrapper-effect-1-dark.sticky-effect-active .sticky-body { background: var(--dark); } html.side-header-overlay-full-screen #header { background: var(--dark); } .custom-hero .custom-el-2:nth-child(1) { opacity: 0.9; transition: all 1s; } .custom-hero .custom-el-2:nth-child(2) { mix-blend-mode: hard-light; opacity: 0; transition: all 1s; } .custom-hero:hover .custom-el-2:nth-child(1) { opacity: 0; } .custom-hero:hover .custom-el-2:nth-child(2) { opacity: 0.9; } .custom-el-1, .custom-el-2, .custom-el-2-wrapper { width: 425px; height: 500px; border-radius: 10px; } @media (max-width: 500px) { .custom-el-1, .custom-el-2, .custom-el-2-wrapper { width: 340px; height: 400px; } } .custom-el-1 { margin: -10px; } .custom-el-2 { margin: 10px; } .custom-el-2 img { opacity: 0; transition: all 300ms; } .custom-el-2 img.lazyloaded { opacity: 1; } .thumb-info-floating-element { z-index: -1; } .bg-color-changer { transition: background-color 700ms cubic-bezier(0.25, 1, 0.5, 1); bottom: 0; left: 0; min-height: 100vh; min-width: 100vw; pointer-events: none; position: absolute; right: 0; top: 0; z-index: -1; } .custom-portfolio-item-1 .custom-portfolio-item-1-img { border-radius: 4px 0px 0px 4px; } @media (max-width: 991px) { .custom-portfolio-item-1 .custom-portfolio-item-1-img { border-radius: var(--border-radius); } } .custom-portfolio-item-1 .custom-portfolio-item-1-type { padding: 10px; width: 60px; position: relative; overflow: hidden; } .custom-portfolio-item-1 .custom-portfolio-item-1-type span { display: block; white-space: nowrap; transform-origin: 0 0; transform: translate3d(32px, 10px, 0) rotate(90deg); text-align: left; } @media (max-width: 991px) { .custom-portfolio-item-1 .custom-portfolio-item-1-type { display: none; } } @keyframes arrowMove { 0% { transform: translateY(5px); } 50% { transform: translateY(10px); } 100% { transform: translateY(5px); } } .custom-arrow-anim { animation: arrowMove 600ms ease; animation-iteration-count: infinite; }