/* * Created by Edward on 22/10/17 * Copyright (c) 2022 ishutime.com All rights reserved */ * { margin: 0px; padding: 0px; box-sizing: border-box; } html.has-scroll-smooth { overflow: hidden; } html.has-scroll-dragging { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .has-scroll-smooth body { overflow: hidden; } .has-scroll-smooth [data-scroll-container] { min-height: 100vh; } .c-scrollbar { position: absolute; right: 0; top: 0; width: 11px; height: 100vh; transform-origin: center right; transition: transform 0.3s, opacity 0.3s; opacity: 0; } .c-scrollbar:hover { transform: scaleX(1.45); } .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { opacity: 1; } .c-scrollbar_thumb { position: absolute; top: 0; right: 0; background-color: black; opacity: 0.5; width: 7px; border-radius: 10px; margin: 2px; cursor: -webkit-grab; cursor: grab; } .has-scroll-dragging .c-scrollbar_thumb { cursor: -webkit-grabbing; cursor: grabbing; } /* =========================================== */ [data-transition] { transition: ease all 1s; } [data-transition]:not(.is-inview) { transition-delay: 0s !important; transition-duration: 0s !important; } [data-transition="fadein"] { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } [data-transition="fadein"].is-inview { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } [data-transition="fadeInUp"] { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -webkit-transform: translateY(25px); -ms-transform: translateY(25px); transform: translateY(25px); } [data-transition="fadeInUp"].is-inview { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } section { width: 100%; position: relative; } .scroll-horizontal { overflow: hidden; } .scroll-horizontal .pin-wrap, .scroll-horizontal .animation-wrap { display: flex; position: relative; z-index: 1; } .scroll-horizontal .animation-wrap.to-right { counter-reset: item; float: left; } .scroll-horizontal .animation-wrap.to-left { counter-reset: item 11; float: right; }