/* top
----------------------------------------------- */
.top-wrap {position:relative; padding-top:20px;}
.top-liders-bg {background:
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
background-color: #300; background-size: 100px 100px; position:absolute; height:400px;  border:10px solid #d8232a; 
overflow:hidden; border-radius:4px; width:100%; left:0; top:0;}
.top-liders-bg:before {content:""; position:absolute; left:0; right:0; bottom:0; height:160px; 
background: linear-gradient(to bottom, #ffdd00 0%,#fb9d23 100%); border-radius:50% 50% 0 0;}
.tl-title {text-align:center; font-size:32px; font-weight:700; color:#ffdd00; padding:10px 0; text-transform:uppercase;}
.tops-item {display:block; width:21%; margin:0 2% 40px 2%; float:left; position:relative;}
.tops-item a {display:block;}
.tops-img {height:340px; border:5px solid #d8232a; border-radius:4px; overflow:hidden;}
.tops-img img {transition:opacity .2s linear;}
.top-liders {counter-reset:li; list-style:none; position:relative; z-index:100; padding-top:440px;}
.tops-item a:before {content:counter(li); counter-increment:li; width:116px; height:110px; text-align:center; line-height:105px; 
font-size:28px; font-weight:700; position:absolute; left:50%; bottom:0; margin:0 0 -35px -58px; color:#fff; z-index:200;
background:url(../images/medal.png) -2px 0 no-repeat;}
.tops-img:hover img {opacity:0.7;}
.tops-item:nth-child(1), .tops-item:nth-child(2), .tops-item:nth-child(3) 
{position:absolute; top:60px; left:50%; width:174px; margin:0; box-shadow:10px 10px 10px 0 rgba(0,0,0,0.3); z-index:100;}
.tops-item:nth-child(1) {margin-left:-87px;}
.tops-item:nth-child(2) {margin-left:-310px; top:80px;}
.tops-item:nth-child(3) {margin-left:135px; top:100px;}
.tops-item:nth-child(1) .tops-img, .tops-item:nth-child(2) .tops-img, .tops-item:nth-child(3) .tops-img {height:250px;}
.tops-item:nth-child(1) a:before, .tops-item:nth-child(2) a:before, .tops-item:nth-child(3) a:before 
{color:#ffdd00; background:url(../images/marker.png) -2px 2px no-repeat;}

@media screen and (max-width: 1220px) {
.tops-item {width:23%; margin:0 1% 40px 1%;}
.tops-img {height:180px;}
.tops-item:nth-child(2) {margin-left:-290px;}
.tops-item:nth-child(3) {margin-left:115px;}
}
@media screen and (max-width: 950px) {
.tops-img {height:280px;}
}
@media screen and (max-width: 760px) {
.tops-item {width:31.33%;}
.tops-item:nth-child(2) {margin-left:-275px;}
.tops-item:nth-child(3) {margin-left:100px;}
}
@media screen and (max-width: 590px) {
.top-liders-bg {height:auto; padding-bottom:20px; display:none;}
.top-liders-bg:before {display:none;}
.tops-item {position:relative !important; top:0 !important; left:0 !important; margin:0 auto 40px auto !important; float:none;}
.tops-img {height:160px;}
.top-liders {padding-top:0;}
.top-wrap {padding:0;}
}
@media screen and (max-width: 470px) {
.tl-title {font-size:24px;}
.tops-img {height:170px;}
.tops-item {width:48%;}
}