/*-------------------------------------------------------------- 19. Custom Slider ----------------------------------------------------------------*/ .cs_custom_slide_container { height: 270px; position: relative; margin-top: 125px; margin-bottom: 125px; @media (max-width: 1199px) { margin-top: 100px; margin-bottom: 100px; } @media (max-width: 991px) { margin-top: 40px; margin-bottom: 84px; } @media (max-width: 767px) { margin-top: 15px; margin-bottom: 59px; } .container { height: inherit; } } .cs_custom_slide_container { .cs_custom_slide_wrapper { display: block; height: 100%; margin: 0 auto; position: relative; .cs_custom_slide { display: inline-block; width: 66%; height: 520px; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0) scale3d(0.4, 0.4, 1); transition: transform 0.3s ease-in-out 0s, z-index 0.2s ease-in-out 0.1s; @media (max-width: 1199px) { height: 470px; } @media (max-width: 991px) { height: 350px; } @media (max-width: 767px) { width: 98%; height: 300px; } } } } .cs_custom_slide_container { .cs_custom_slide_wrapper { .cs_custom_slide { &.prev-2 { transform: translate3d(-105%, -50%, 0) scale3d(0.4, 0.4, 1); z-index: 1; } &.prev-1 { transform: translate3d(-85%, -50%, 0) scale3d(0.6, 0.6, 1); z-index: 2; } &.next-1 { z-index: 2; transform: translate3d(-15%, -50%, 0) scale3d(0.6, 0.6, 1); } &.next-2 { z-index: 1; transform: translate3d(5%, -50%, 0) scale3d(0.4, 0.4, 1); } .cs_mouse_point.cs_style_1 { opacity: 0; } &.active { z-index: 3; transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1); backface-visibility: hidden; .cs_mouse_point.cs_style_1 { opacity: 1; } } } } } .cs_custom_slide_item { width: 100%; height: 520px; border-radius: 5px; display: block; position: relative; overflow: hidden; @media only screen and (min-width: 992px) and (max-width: 1199px) { height: 470px; } @media only screen and (min-width: 768px) and (max-width: 991px) { height: 350px; } @media (max-width: 767px) { height: 300px; } } .cs_custom_slide_arrow_left, .cs_custom_slide_arrow_right { position: absolute; top: 50%; transform: translateY(-505); cursor: pointer; transition: all 0.3s ease; &:hover { color: var(--accent); } @media (max-width: 991px) { position: initial; } } .cs_custom_slide_arrow_left { left: calc((100vw - 1300px) / 2 / 2); margin-left: -28px; @media (max-width: 1400px) { left: calc((100vw - 1140px) / 2 / 2); } @media (max-width: 1199px) { left: calc((100vw - 960px) / 2 / 2); } } .cs_custom_slide_arrow_right { right: calc((100vw - 1300px) / 2 / 2); margin-right: -28px; @media (max-width: 1400px) { right: calc((100vw - 1140px) / 2 / 2); } @media (max-width: 1199px) { right: calc((100vw - 960px) / 2 / 2); } } .cs_custom_slide_arrows { @media (max-width: 991px) { display: flex; justify-content: center; gap: 15px; padding-top: 60px; } @media (max-width: 767px) { padding-top: 35px; } }