/*------------------------ Slider --------------------------*/ .header-transparent+.slider { margin-top: -100px; } .header-transparent+.slider .slide-item { padding-top: 100px; } .slider { padding: 0; overflow-x: hidden; .slide-item { height: 100vh; } .slide__subtitle { display: block; font-family: $font-body; font-size: 14px; line-height: 1; font-weight: 700; color: $color-white; margin-bottom: 13px; } .slide__title { font-size: 75px; line-height: 1.1; color: $color-white; margin-bottom: 20px; } .slide__desc { font-size: 17px; line-height: 1.5; font-weight: 700; color: $color-white; max-width: 580px; margin-bottom: 34px; } .slick-dots { position: absolute; left: 50%; bottom: 30px; @include prefix(transform, translateX(-50%), webkit moz ms o); } .slide__icons { .slide__icon { width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; font-size: 65px; color: $color-secondary; background-color: $color-white; border-radius: 6px; margin-right: 30px; @include prefix(transition, transform .3s ease, webkit moz ms o); &:last-child { margin-right: 0; } &:hover { @include prefix(transform, translateY(-5px), webkit moz ms o); } } } .video__btn { padding-left: 60px; height: 60px; .video__player { width: 60px; height: 60px; } } } @media (min-width:1200px) { .slider { .slick-arrow.slick-next { right: 30px; } .slick-arrow.slick-prev { left: 30px; } } } @media(min-width:768px) and (max-width:1200px) { .slider .slide-item { padding-right: 30px; padding-left: 30px; } } /* Medium Size Screens */ @include md-screens { .slider .slide__title { font-size: 40px; margin-bottom: 10px; } } /* Mobile Phones and tablets */ @include xs-sm-screens { .header-transparent+.slider { margin-top: 0; } .slider { overflow: hidden; .slide-item { padding: 100px 10px; } .slide-item { height: auto; } } } /* Small Screens and tablets */ @include xs-sm-screens { .slider { .slide__subtitle { margin-bottom: 15px; } .slide__title { font-size: 30px; margin-bottom: 10px; } .slide__desc { font-size: 15px; font-weight: 400; margin-bottom: 20px; } .btn { margin-bottom: 10px; } .slick-arrow { &:before { font-size: 30px; } &.slick-prev { left: -10px; } &.slick-next { right: -10px; } } } }