@keyframes scroll-hint-appear-x {
  0% {
    transform: translateX(40px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50%,
  100% {
    transform: translateX(-40px);
    opacity: 0;
  }
}

@keyframes scroll-hint-appear-y {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50%,
  100% {
    transform: translateY(-20px);
    opacity: 0;
  }
}

@keyframes scroll-hint-appear-xy {
  0% {
    transform: translateX(40px);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  25%,
  50% {
    transform: translateX(-40px);
    opacity: 0;
  }
  51% {
    transform: translateY(20px);
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  75%,
  100% {
    transform: translateY(-20px);
    opacity: 0;
  }
}



.scroll-hint.is-right-scrollable {
  background: linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}

.scroll-hint.is-right-scrollable.is-left-scrollable {
  background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}

.scroll-hint.is-left-scrollable {
  background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}

.scroll-hint-icon {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 60px);
  box-sizing: border-box;
  width: 120px;
  height: 80px;
  border-radius: 5px;
  transition: opacity .3s;
  opacity: 0;
  background: rgba(0, 0, 0, .7);
  text-align: center;
  padding: 20px 10px 10px 10px;
}

.scroll-hint-icon-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  pointer-events: none;
  z-index: 600;
  overflow: hidden;
}

.scroll-hint-text {
  font-size: 10px;
  color: #FFF;
  margin-top: 5px;
  line-height: 1 !important;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
  opacity: .8;
}

.scroll-hint-icon:before {
  display: inline-block;
  width: 40px;
  height: 40px;
  color: #FFF;
  vertical-align: middle;
  text-align: center;
  content: "";
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=);
}

.scroll-hint-icon:after {
  content: "";
  width: 25px;
  height: 25px;
  display: block;
  position: absolute;
  top: 6px;
  left: 70%;
  margin-left: -20px;
  background-repeat: no-repeat;	
  opacity: 0;
  transition-delay: 2.4s;
}

.is-scrollable-x .scroll-hint-icon:after {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy43LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i44Os44Kk44Ok44O8XzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzcuMyAzNy4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNy4zIDM3LjM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7fQ0KCS5zdDF7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8ZyBpZD0i44Os44Kk44Ok44O8XzEtMiI+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjEuOSIgeTE9IjE4LjciIHgyPSIxMC40IiB5Mj0iMTguNyIvPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xMC40LDE5LjhIMS45Yy0wLjYsMC4xLTEuMi0wLjQtMS4zLTFjLTAuMS0wLjYsMC40LTEuMiwxLTEuM2MwLjEsMCwwLjEsMCwwLjIsMGg4LjVjMC42LTAuMSwxLjIsMC40LDEuMywxDQoJCXMtMC40LDEuMi0xLDEuM0MxMC41LDE5LjgsMTAuNSwxOS44LDEwLjQsMTkuOHoiLz4NCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNy40LDI0LjZjLTAuMywwLTAuNS0wLjEtMC43LTAuMmwtNi4yLTVDMC4yLDE5LjIsMCwxOC45LDAsMTguNWMwLTAuMywwLjItMC43LDAuNS0wLjlsNi4yLTQuOA0KCQljMC41LTAuNCwxLjItMC4zLDEuNiwwLjJjMC40LDAuNSwwLjMsMS4yLTAuMiwxLjZsMCwwbC01LjEsNGw1LjEsNC4xYzAuNSwwLjQsMC41LDEuMiwwLDEuNkM4LDI0LjUsNy43LDI0LjYsNy40LDI0LjZ6Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjM1LjUiIHkxPSIxOC43IiB4Mj0iMjYuOSIgeTI9IjE4LjciLz4NCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMzUuNSwxOS44aC04LjZjLTAuNiwwLjEtMS4yLTAuNC0xLjMtMWMtMC4xLTAuNiwwLjQtMS4yLDEtMS4zYzAuMSwwLDAuMSwwLDAuMiwwaDguNmMwLjYsMC4xLDEuMSwwLjYsMSwxLjMNCgkJQzM2LjQsMTkuMywzNiwxOS44LDM1LjUsMTkuOHoiLz4NCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMjkuOSwyNC42Yy0wLjQsMC0wLjctMC4yLTAuOS0wLjRjLTAuNC0wLjUtMC4zLTEuMiwwLjItMS42bDUuMS00bC01LjEtMy45Yy0wLjUtMC40LTAuNS0xLjItMC4xLTEuNg0KCQljMC40LTAuNCwxLTAuNSwxLjUtMC4ybDYuMiw0LjhjMC4zLDAuMiwwLjQsMC42LDAuNSwwLjljMCwwLjQtMC4yLDAuNy0wLjQsMC45bC02LjIsNUMzMC40LDI0LjYsMzAuMiwyNC43LDI5LjksMjQuNnoiLz4NCjwvZz4NCjwvc3ZnPg0K);
}

.is-scrollable-y .scroll-hint-icon:after {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy43LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i44Os44Kk44Ok44O8XzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzcuMyAzNy4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNy4zIDM3LjM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7fQ0KCS5zdDF7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8ZyBpZD0i44Os44Kk44Ok44O8XzEtMl8wMDAwMDAxNjA1MDA3NzUxNDE2NjAxMDk4MDAwMDAxMTg2ODg1OTY2Mjg0OTM0NTE3M18iPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxOC43IiB5MT0iMzUuNCIgeDI9IjE4LjciIHkyPSIyNi45Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTE5LjgsMjYuOXY4LjZjMC4xLDAuNi0wLjQsMS4yLTEsMS4zcy0xLjItMC40LTEuMy0xYzAtMC4xLDAtMC4xLDAtMC4yVjI3Yy0wLjEtMC42LDAuNC0xLjIsMS0xLjMNCgkJYzAuNi0wLjEsMS4yLDAuNCwxLjMsMUMxOS44LDI2LjcsMTkuOCwyNi44LDE5LjgsMjYuOXoiLz4NCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMjQuNiwyOS45YzAsMC4zLTAuMSwwLjUtMC4yLDAuN2wtNSw2LjJjLTAuMiwwLjMtMC41LDAuNC0wLjksMC40Yy0wLjMsMC0wLjctMC4yLTAuOS0wLjVsLTQuOC02LjINCgkJYy0wLjQtMC41LTAuMy0xLjIsMC4yLTEuNnMxLjItMC4zLDEuNiwwLjJsMCwwbDMuOCw1LjFsNC4xLTUuMWMwLjQtMC41LDEuMi0wLjUsMS42LDBDMjQuNSwyOS4zLDI0LjYsMjkuNiwyNC42LDI5Ljl6Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjE4LjciIHkxPSIxLjgiIHgyPSIxOC43IiB5Mj0iMTAuNCIvPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xOS44LDEuOHY4LjZjMC4xLDAuNi0wLjQsMS4yLTEsMS4zcy0xLjItMC40LTEuMy0xYzAtMC4xLDAtMC4xLDAtMC4yVjEuOGMwLjEtMC42LDAuNi0xLjEsMS4zLTENCgkJQzE5LjMsMC44LDE5LjgsMS4zLDE5LjgsMS44eiIvPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yNC42LDcuNGMwLDAuNC0wLjIsMC43LTAuNCwwLjljLTAuNSwwLjQtMS4yLDAuMy0xLjYtMC4ybC00LTUuMWwtMy45LDUuMWMtMC40LDAuNS0xLjIsMC41LTEuNiwwLjENCgkJYy0wLjQtMC40LTAuNS0xLTAuMi0xLjVsNC44LTYuMkMxNy45LDAuMiwxOC4yLDAsMTguNiwwczAuNywwLjIsMC45LDAuNGw1LDYuMkMyNC42LDYuOSwyNC43LDcuMSwyNC42LDcuNHoiLz4NCjwvZz4NCjwvc3ZnPg0K);
}

.is-scrollable-x.is-scrollable-y .scroll-hint-icon:after {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy43LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i44Os44Kk44Ok44O8XzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzcuMyAzNy4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNy4zIDM3LjM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7fQ0KCS5zdDF7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8ZyBpZD0i44Os44Kk44Ok44O8XzEtMiI+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjEuOSIgeTE9IjE4LjciIHgyPSIxMC40IiB5Mj0iMTguNyIvPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xMC40LDE5LjhIMS45Yy0wLjYsMC4xLTEuMi0wLjQtMS4zLTFjLTAuMS0wLjYsMC40LTEuMiwxLTEuM2MwLjEsMCwwLjEsMCwwLjIsMGg4LjVjMC42LTAuMSwxLjIsMC40LDEuMywxDQoJCWMwLjEsMC42LTAuNCwxLjItMSwxLjNDMTAuNSwxOS44LDEwLjUsMTkuOCwxMC40LDE5Ljh6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTcuNCwyNC42Yy0wLjMsMC0wLjUtMC4xLTAuNy0wLjJsLTYuMi01QzAuMiwxOS4yLDAsMTguOSwwLDE4LjVjMC0wLjMsMC4yLTAuNywwLjUtMC45bDYuMi00LjgNCgkJYzAuNS0wLjQsMS4yLTAuMywxLjYsMC4yYzAuNCwwLjUsMC4zLDEuMi0wLjIsMS42bDAsMEwzLDE4LjZsNS4xLDQuMWMwLjUsMC40LDAuNSwxLjIsMCwxLjZDOCwyNC41LDcuNywyNC42LDcuNCwyNC42eiIvPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIzNS41IiB5MT0iMTguNyIgeDI9IjI2LjkiIHkyPSIxOC43Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTM1LjUsMTkuOGgtOC42Yy0wLjYsMC4xLTEuMi0wLjQtMS4zLTFjLTAuMS0wLjYsMC40LTEuMiwxLTEuM2MwLjEsMCwwLjEsMCwwLjIsMGg4LjZjMC42LDAuMSwxLjEsMC42LDEsMS4zDQoJCUMzNi40LDE5LjMsMzYsMTkuOCwzNS41LDE5Ljh6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTI5LjksMjQuNmMtMC40LDAtMC43LTAuMi0wLjktMC40Yy0wLjQtMC41LTAuMy0xLjIsMC4yLTEuNmw1LjEtNGwtNS4xLTMuOWMtMC41LTAuNC0wLjUtMS4yLTAuMS0xLjYNCgkJYzAuNC0wLjQsMS0wLjUsMS41LTAuMmw2LjIsNC44YzAuMywwLjIsMC40LDAuNiwwLjUsMC45YzAsMC40LTAuMiwwLjctMC40LDAuOWwtNi4yLDVDMzAuNCwyNC42LDMwLjIsMjQuNywyOS45LDI0LjZ6Ii8+DQo8L2c+DQo8ZyBpZD0i44Os44Kk44Ok44O8XzEtMl8wMDAwMDAxNjA1MDA3NzUxNDE2NjAxMDk4MDAwMDAxMTg2ODg1OTY2Mjg0OTM0NTE3M18iPg0KCTxsaW5lIGNsYXNzPSJzdDAiIHgxPSIxOC43IiB5MT0iMzUuNCIgeDI9IjE4LjciIHkyPSIyNi45Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTE5LjgsMjYuOXY4LjZjMC4xLDAuNi0wLjQsMS4yLTEsMS4zYy0wLjYsMC4xLTEuMi0wLjQtMS4zLTFjMC0wLjEsMC0wLjEsMC0wLjJ2LTguNmMtMC4xLTAuNiwwLjQtMS4yLDEtMS4zDQoJCWMwLjYtMC4xLDEuMiwwLjQsMS4zLDFDMTkuOCwyNi43LDE5LjgsMjYuOCwxOS44LDI2Ljl6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTI0LjYsMjkuOWMwLDAuMy0wLjEsMC41LTAuMiwwLjdsLTUsNi4yYy0wLjIsMC4zLTAuNSwwLjQtMC45LDAuNGMtMC4zLDAtMC43LTAuMi0wLjktMC41bC00LjgtNi4yDQoJCWMtMC40LTAuNS0wLjMtMS4yLDAuMi0xLjZjMC41LTAuNCwxLjItMC4zLDEuNiwwLjJsMCwwbDMuOCw1LjFsNC4xLTUuMWMwLjQtMC41LDEuMi0wLjUsMS42LDBDMjQuNSwyOS4zLDI0LjYsMjkuNiwyNC42LDI5Ljl6Ii8+DQoJPGxpbmUgY2xhc3M9InN0MCIgeDE9IjE4LjciIHkxPSIxLjgiIHgyPSIxOC43IiB5Mj0iMTAuNCIvPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xOS44LDEuOHY4LjZjMC4xLDAuNi0wLjQsMS4yLTEsMS4zYy0wLjYsMC4xLTEuMi0wLjQtMS4zLTFjMC0wLjEsMC0wLjEsMC0wLjJWMS44YzAuMS0wLjYsMC42LTEuMSwxLjMtMQ0KCQlDMTkuMywwLjgsMTkuOCwxLjMsMTkuOCwxLjh6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTI0LjYsNy40YzAsMC40LTAuMiwwLjctMC40LDAuOWMtMC41LDAuNC0xLjIsMC4zLTEuNi0wLjJsLTQtNS4xbC0zLjksNS4xYy0wLjQsMC41LTEuMiwwLjUtMS42LDAuMQ0KCQljLTAuNC0wLjQtMC41LTEtMC4yLTEuNWw0LjgtNi4yQzE3LjksMC4yLDE4LjIsMCwxOC42LDBjMC40LDAsMC43LDAuMiwwLjksMC40bDUsNi4yQzI0LjYsNi45LDI0LjcsNy4xLDI0LjYsNy40eiIvPg0KPC9nPg0KPC9zdmc+DQo=);
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
  opacity: 1;
}

.is-scrollable-x .scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
  animation: scroll-hint-appear-x 1.2s linear;
  animation-iteration-count: 2;
}
.is-scrollable-y .scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
  animation: scroll-hint-appear-y 1.2s linear;
  animation-iteration-count: 2;
}
.is-scrollable-x.is-scrollable-y .scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
  animation: scroll-hint-appear-xy 2.4s linear;
  animation-iteration-count: 1;
}


.scroll-hint-icon-white {
  background-color: #FFF;
  box-shadow: 0 4px 5px rgba(0, 0, 0, .4);
}

.scroll-hint-icon-white:before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=);
}

.scroll-hint-icon-white:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==);
}

.scroll-hint-icon-white .scroll-hint-text {
  color: #000;
}