﻿.top-hits{border-top:3px var(--body) solid;padding:27.5px 0;background:#fff url('../img/shapes/pat1.webp');min-height:288px}
.top-hits .titr-area{width:200px;margin:40px 0}
.top-hits .titr-area .icon{background:#707070;box-shadow:-5px 5px 18px 0 #707070;margin-bottom:15px}
.top-hits .titr-area .icon .rt-gr-icon{width:40px;height:40px;margin:15px}
.top-hits .titr-area .desc{margin-top:10px}
.top-hits .entery{width:calc(100% - 200px);padding:0 40px}
.top-hits .entery .owl-carousel .owl-stage-outer{overflow:inherit}
.top-hits .entery .owl-carousel{position:inherit}
.top-hits .entery .owl-carousel .owl-dots{display:none}
.top-hits .entery .owl-carousel .owl-item.active .item{filter:blur(0)}
.top-hits .entery .owl-carousel .owl-nav{display:block}
.top-hits .entery .owl-carousel .owl-nav .owl-next,.top-hits .entery .owl-carousel .owl-nav .owl-prev{backdrop-filter:blur(0);top:0;height:100%;width:40px;border-radius:0;font-size:30px}
.top-hits .entery .owl-carousel .owl-nav .owl-next{left:-40px;background:linear-gradient(to left,transparent,#fff);text-align:left}
.top-hits .entery .owl-carousel .owl-nav .owl-prev{right:-40px;background:linear-gradient(to right,transparent,#fff);text-align:right}
.top-hits .entery .owl-carousel .owl-nav .owl-next i,.top-hits .entery .owl-carousel .owl-nav .owl-prev i{opacity:0}
.top-hits .entery .owl-carousel:hover .owl-nav .owl-next i,.top-hits .entery .owl-carousel:hover .owl-nav .owl-prev i{opacity:1}

.top-hits .entery .item{width:290px;padding:0 10px;transform:scale(.9) rotate(3deg);opacity:.5}
.top-hits .entery .item .ents{background:#334155}
.top-hits .entery .item .ents .bg{height:230px;filter:saturate(1.5) contrast(1.1) brightness(.5)}
.top-hits .entery .item .ents .inside{transform:translateY(-50%);width:70%;right:15%;top:50%}
.top-hits .entery .item .ents .inside .pic-area{backdrop-filter:blur(5px);width:86px;height:86px;margin:0 calc(50% - 43px);padding:3px;background:rgba(255, 255, 255, 0.5)}
.top-hits .entery .item .ents .inside .pic-area .pic{height:80px}
.top-hits .entery .item .ents .inside .title{margin:15px 0 8px}
.top-hits .entery .item .ents .inside .arrow-btn{width:30px;height:30px;background:rgba(255, 255, 255, 0.2)}
.top-hits .entery .owl-item.active .item{transform:scale(1) rotate(0deg);opacity:1}

.dark-mode .top-hits{background:#2e2e2e}
.dark-mode .top-hits .entery .owl-carousel .owl-nav .owl-next{background:linear-gradient(to left,transparent,#2e2e2e)}
.dark-mode .top-hits .entery .owl-carousel .owl-nav .owl-prev{background:linear-gradient(to right,transparent,#2e2e2e)}
.dark-mode .top-hits .titr-area .titr,.dark-mode .top-hits .titr-area .desc{color:#fff}
.dark-mode .top-hits .titr-area .icon{box-shadow:none !important}



@media only screen and (min-width:920px){
.top-hits .entery .item:hover .ents .bg{opacity:.4}
.top-hits .entery .item:hover .title,.top-hits .entery .item:hover .ents .inside .arrow-btn{opacity:0}
.top-hits .entery .item:hover .ents .inside .pic-area{transform:translateY(50px) scale(1.2)}
}
@media only screen and (max-width:920px){
.top-hits{padding:25px 0;min-height:267px}
.top-hits .main{max-width:100%}
.top-hits .titr-area{width:100%;margin:0;padding:0 18px}
.top-hits .titr-area .titr{margin:4px 0;font-size:17px;width:auto}
.top-hits .titr-area .titr span{color:var(--color)}
.top-hits .titr-area .titr span:after{content:"";position:absolute;background:var(--color);opacity:.15;height:16px;width:100%;bottom:-2px;right:0;z-index:0}
.top-hits .titr-area .more{padding:5px 10px}
.top-hits .titr-area .more i{margin:3px 8px 0 0}
.top-hits .entery{width:100%;padding:0 18px;margin-top:15.5px}
.top-hits .entery .item{transform:scale(1) rotate(0deg);opacity:1;padding:0;margin:0 7.5px;width:175px;border-radius:10px}
.top-hits .entery .item .ents,.top-hits .entery .item .ents .bg{border-radius:10px}
.top-hits .entery .item .ents .inside .pic-area{width:88px;height:88px;margin:13px calc(50% - 44px) 0;padding:2px;border-radius:10px}
.top-hits .entery .item .ents .inside .pic-area .pic{height:84px;width:84px;border-radius:10px}
.top-hits .entery .item .ents .inside{transform:translateY(0);width:100%;right:0;top:0;padding:15px}
.top-hits .entery .item .ents .inside .title{font-size:14px;margin:11px 0 6px}
.top-hits .entery .item .ents .inside .title a{text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.top-hits .entery .item .ents .bg{height:170px}


.top-hits .entery .item .ents .inside .arrow-btn{display:none}
}