.superCup{display:flex;width:100%;flex-wrap:wrap;justify-content:center;background-color:#111822;position:relative;}
.superCup:before{content:'';background:url(../Images/SuperCup/SuperLogo.webp) top right;background-size:cover;width:106px;height:108px;position:absolute;top:25px;right:15px;z-index: 1;}

.superCupContaienr{display: flex; flex-direction: column;width:100%; height: 290px; justify-content: space-between; align-items: center;position:relative;background:url(../Images/SuperCup/bk.webp)center center no-repeat;background-size:cover;padding:20px 0}
.superCupContaienr:after{content:'';width:100%;height:4px;position:absolute;bottom:0;right:0;background:linear-gradient(90deg, #D8A844 0%, #F7F5A2 16.35%, #CC9252 38.94%, #FAF2AA 64.9%, #B38537 100%);z-index: 4;}
.superCupContaienr:before{content:'';background: linear-gradient(0deg, #111822 0%, rgba(17, 24, 34, 0.00) 100%);width:100%;height:153px;position:absolute;bottom:0;right:0;z-index: 3;}

.superCupContaienr .playerDiv{display: flex; flex-direction: column; height: 100%;width:100%; flex-wrap: wrap;  justify-content: space-between;position: absolute;
    top: 0;
    right: 0;}
.superCupContaienr .playerDiv:before{content:'';background:url(../Images/SuperCup/rightPlayer.webp) right bottom no-repeat;background-size:100% auto;width:277px;height:100%;position:absolute;bottom:0;right:115px}
.superCupContaienr .playerDiv:after{content:'';background:url(../Images/SuperCup/leftPlayer.webp) left bottom no-repeat;background-size:100% auto;width:330px;height:100%;position:absolute;bottom:0;left:80px}

.superCup .textBox{display:flex;justify-content:center;width:240px;flex-wrap: wrap;z-index: 4;}
.superCup .textBox .link{color:#fff;font-size: 24px;font-family:droidBold, arial;width:100%}
.superCup .textBox span{width:100%;background: linear-gradient(90deg, #D8A844 0%, #F7F5A2 23.08%, #CC9252 50%, #FAF2AA 73.08%, #B38537 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;font-size: 24px;font-family:droidBold, arial}

.superCup  .teamsBox{   
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 135px;
    z-index: 4;
}
.superCup  .teamsBox ul{display:flex;justify-content:center;flex-wrap:wrap;width:1050px;gap:15px}
.superCup  .teamsBox ul li{display: flex
;
    flex-wrap: wrap;flex-direction: column;
    justify-content: flex-end;
    width: 95px;
    align-items: center;}
.superCup  .teamsBox ul li .imgBox{
    display: flex;
    justify-content: center;
    align-items: center;width:85px;height:85px;border-radius:50%;overflow:hidden;
position:relative;
background: linear-gradient(180deg, #D8A844 0%, #F7F5A2 20.67%, #CC9252 47.6%, #FAF2AA 73.56%, #B38537 97.12%);padding:2px;
 cursor:pointer}
.superCup  .teamsBox ul li .imgBox:before{  content: "";position: absolute;inset: 2px; background: #111822; border-radius: 50%; z-index: 0;}
.superCup  .teamsBox ul li .imgBox img{position:relative;z-index:1}
.superCup  .teamsBox ul li .vote{
    width:100%;
    height:30px;
    line-height:30px;
    color:#fff;
    border-radius: 8px;
    border: 1px solid #D8A844;
      background: #111822;
      box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.20);
      font-size:12px;
      font-family:droidLight,Arial;
      text-align:center;
      margin-top: -9px;
      cursor:pointer;
    z-index: 2;;transition:all ease-in-out .5s}

.superCup  .teamsBox ul li .voteCount{
    width:100%;
    height:30px;
    line-height:30px;
    color:#fff;
      font-size:20px;
      font-family:droidBold,Arial;
      text-align:center;
    z-index: 2;font-weight:bold;margin-top:8px;  display:none;transition:all ease-in-out .5s
}

.superCup  .teamsBox ul li.winner .voteCount{
 background: linear-gradient(180deg, #D8A844 0%, #F7F5A2 23.56%, #CC9252 49.52%, #FAF2AA 73.08%, #B28535 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;font-size:24px;}
.superCup  .teamsBox ul li.winner .imgBox{width:96px;height:96px;box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.25);}
.superCup  .teamsBox ul li.winner .imgBox:before{
background:linear-gradient(180deg, #D8A844 0%, #F7F5A2 20.67%, #CC9252 47.6%, #FAF2AA 73.56%, #B38537 97.12%);


}


/*news*/

.superCupNews{display:flex;flex-wrap:wrap;width:100%;padding:20px 10px}
.superCupNews ul{display:flex;flex-wrap:wrap;width:100%;    justify-content: space-between;}
.superCupNews ul li{display:flex;flex-wrap:wrap;flex-direction:column;width:23%;justify-content:flex-start}
.superCupNews ul li .imageCntnr{display:flex;width:100%;position: relative;
    overflow: hidden;
    padding-bottom: 66.57%;}

    .superCupNews ul li .imageCntnr img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        border: none;
        filter: brightness(100%) contrast(100%);
        -webkit-filter: brightness(100%) contrast(100%);
        -moz-filter: brightness(100%) contrast(100%);
        -o-filter: brightness(100%) contrast(100%);
        -ms-filter: brightness(100%) contrast(100%);
        transition: all 0.2s ease-in-out 0s;
        -webkit-transition: all 0.2s ease-in-out 0s;
        -moz-transition: all 0.2s ease-in-out 0s;
        -ms-transition: all 0.2s ease-in-out 0s;
        -o-transition: all 0.2s ease-in-out 0s;
    }

.superCupNews ul li .desc{display:flex;flex-direction:column;width:100%;background-color:#303030;flex-wrap:wrap;padding:15px 10px}
.superCupNews ul li .desc span{color:#0277BD;font-size:10px;font-family:droidBold, Arial;display:block}
.superCupNews ul li .desc p{color:#fff;font-size:15px;font-family:droidLight, Arial;line-height: 24px;margin-top:10px;    height: 72px;overflow:hidden}

@media screen and (min-width:1360px) and (max-width:1680px) {
   
    .superCupContaienr .playerDiv:before{right: 86px; width: 240px;}
     .superCupContaienr .playerDiv:after{        left: 54px;
        width: 290px;}
     .superCupContaienr {height:260px}

     .superCup:before{    width: 100px;
    height: 100px;top: 15px;
    right: 10px;}
}



@media screen and (min-width:1280px) and (max-width:1359px) {

    .superCupContaienr .playerDiv:before{right: 50px; width: 210px;}
     .superCupContaienr .playerDiv:after{        left: 50px;
        width: 260px;}

     .superCup:before{top:10px;right:10px;width:90px;height:90px}
}


@media screen and (min-width:1024px) and (max-width:1279px) {

    .superCupContaienr .playerDiv:before{right: 20px; width: 210px;}
     .superCupContaienr .playerDiv:after{        left: 20px;
        width: 260px;}

     .superCup:before{top:10px;right:10px;width:90px;height:90px}
     .superCupNews ul li .desc p{font-size:13px}
}

@media screen and (min-width:768px) and (max-width:1023px) {

    .superCupContaienr .playerDiv:before{right: 20px; width: 210px;}
     .superCupContaienr .playerDiv:after{        left: 20px;
        width: 260px;}

     .superCup:before{top:10px;right:10px;width:90px;height:90px}
     .superCupNews ul li .desc p{font-size:13px}

     .superCupNews ul li{flex-wrap:unset;width: 48%;margin-bottom:15px}
}


@media screen and (min-width:320px) and (max-width:767px) {
    .superCup{width: calc(100% + 20px);
    margin-right: -10px;}
    .superCup:before{width:33px;height:34px;top:0;right:0}

    .superCupContaienr{    background: url(../Images/SuperCup/bkMob.webp) center center no-repeat;
    background-size: cover;height:175px;    padding: 10px 0;}
    .superCupContaienr:after{    height: 1px;}
    .superCupContaienr:before{ height: 104px;
        background: linear-gradient(0deg, #111822 22.6%, rgba(17, 24, 34, 0.00) 100%);bottom: 19px;}

    .superCupContaienr .playerDiv:before{ 
        background: url(../Images/SuperCup/rightPlayerMobile.webp) right bottom no-repeat;
        width:100px;right:0;    
        background-size: 100% auto;
       bottom: 26px;
        z-index: 1;}
    .superCupContaienr .playerDiv:after{
        background: url(../Images/SuperCup/LeftPlayerMob.webp) right bottom no-repeat;
        width:130px ;
        left:0;
         background-size: 100% auto;
       bottom: 26px;
        z-index: 1;
    }

    .superCup .teamsBox ul li{width:74px}
    .superCup .teamsBox ul li .imgBox{width:65px;height:65px}
    .superCup .teamsBox ul li .imgBox img{width: 90%; height: auto;}

   .superCup .textBox .link,
    .superCup .textBox span{font-size:16px}

    .superCup .textBox{width:160px}
    .superCup .teamsBox ul{width:100%;gap:10px}
    .superCup .teamsBox ul li .vote{height:25px;line-height:25px;font-size:10px;border-radius: 5px;}

    .superCup  .teamsBox ul li.winner .imgBox{width:74px;height:74px}
    .superCup .teamsBox ul li .voteCount{font-size:16px;margin-top:0;height: 26px; line-height: 26px;}
    .superCup .teamsBox ul li.winner .voteCount{font-size:22px}

    .superCupNews{padding:16px 10px}
      .superCupNews ul{gap:10px}
    .superCupNews ul li{width:100%;}
    .superCupNews ul li .imageCntnr{ width: 120px;  padding-bottom: calc((120px * 66.57) / 100); }
    .superCupNews ul li  a{display:flex;justify-content:flex-start;flex-wrap:wrap;width:100%}
   .superCupNews ul li .desc {  width: calc(100% - 120px);;padding: 0 10px; }
   .superCupNews ul li .desc p{font-size:12px;line-height: 16px;height:48px;    margin-top: 6px;}
 
    
}