.sliders { &.owl-carousel { padding-bottom: 8px; overflow: hidden; } } .owl-controls { } .owl-item { float: left; [class*="col-"] { width: 100%; } } /*dots*/ .owl-dots { position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center; padding: 0 15px; .owl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 100%; background: #fff; cursor: pointer; margin-right: 8px; margin-top: 8px; @include Shadow4; &.active { background: $link-color; @include Transition(0.2); } } } /*******/ .slider-articles-wr { } .slider-articles { overflow: hidden; div.articles-items { margin-top: 18px; line-height: 18px; .img-link { display: block; text-align: center; overflow: hidden; img { vertical-align: top; max-width: 100%; @include Transition(0.3); } } .articles-link { margin-top: 11px; display: block; } p { margin-top: 18px; a { } } &:nth-child(3n+1) { clear: both; } .articles-excerpt { height: 252px; overflow: hidden; position: relative; &:before { content: ''; display: block; position: absolute; bottom: 0; right: 0; left: 0; height: 45px; @include Gradient-vertical(rgba(255,255,255,0),#fff) } } &:hover { .img-link { img { @include filter-gray(80%); @include Scale(1.05); } } } } &.owl-carousel { div { float: left; } .owl-item { float: left; padding: 0 15px; .articles-items { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; clear: none !important; } } } } .btn-l_, .btn-r_ { position: absolute; width: 16px; height: 32px; cursor: pointer; top: -22px; right: 68px; &.vis_ { display: block !important; } &:before { width: 9px; height: 16px; position: absolute; top: 50%; left: 50%; margin-left: -4px; margin-top: -8px; content: ''; background-image: url("../images/ico-all/arrowslide.png"); background-repeat: no-repeat; background-position: 0 50%; } &.lock { opacity: 0.5; cursor: default; } } .btn-r_ { right: 28px; &:before { background-position: -9px 50%; } &:after { width: 1px; height: 16px; position: absolute; top: 50%; margin-left: -12px; margin-top: -8px; content: ''; background: $seo-border; } } /***********brand***********/ .section-box-slider-brands { margin-top: 33px; } .slider-brands { overflow: hidden; div { text-align: center; float: left; } a { display: block; float: left; margin-right: 13px; margin-top: 20px; img { @include filter-gray(100%); @include Transition(0.7); opacity:0.7; } &:hover { img { @include filter-none; opacity: 1; } } } &.owl-carousel { a { margin: 0 !important; float: none; } } } /***********slider-first***********/ .slider-first { overflow: hidden; div.slider-first-items { margin-top: 30px; width: 100%; float: left; a { position: relative; color: #fff; font-size: 24px; font-weight: 700; text-transform: uppercase; line-height: 29px; width: 100%; float: left; display: block; div { display: none; width: 100%; height: 320px; background-position: 50% 0; background-repeat: no-repeat; } span { position: absolute; top: 49px; left: 40px; width: 360px; z-index: 2; } img { max-width: 100%; vertical-align: top; @include Transition(0.3); } &:before { z-index: 1; position: absolute; width: 100%; height: 211px; top: 0; left: 0; background: url("../images/shadow-slider-first.png") 0 0 repeat-x; opacity: 0.15; } } &:hover { img { @include filter-gray(80%); @include Transition(1); } } } } @media (max-width: 1200px) { .slider-articles div.articles-items .articles-excerpt { height: 288px; } } @media (max-width: 767px) { .slider-articles div.articles-items .articles-excerpt { height: 198px; } .slider-brands { a { margin-right: 30px; } } .slider-first { div.slider-first-items { a { div { display: block !important; } span { top: 20px; left: 20px; width: 360px; padding-right: 20px; } img { display: none; } &:before { content: ''; display: block; } } } } } @media (max-width: 570px) { .slider-first { div.slider-first-items { a { font-size: 18px; line-height: 22px; span { top: 20px; left: 20px; width: 100%; } } } } } @media (max-width: 500px) { .slider-articles div.articles-items .articles-excerpt { height: 162px; } } @media (max-width: 380px) { .slider-articles div.articles-items .articles-excerpt { height: 216px; } } @media (max-width: 360px) { .slider-first { div.slider-first-items { a { font-size: 16px; line-height: 20px; span { top: 15px; left: 15px; } } } } }