html, body{
    padding: 0;
    margin:0;
}
/* desktop: 970x250
 mobile: 410x530 */

#W-wrap {
    position: relative;
    max-width: clamp(240px, 1140px, 100%);
    height: 250px;
    box-sizing: border-box;
    /* display: flex;
    flex-direction: column; */
    overflow: hidden;

    /* display: flex; */
    font-family: Taz, Helvetica, sans-serif;
}
#W-wrap .W-cloak {
    display: none;
}
#W-wrap .W-flex-grow-1 {
    display: flex;
    flex-grow: 1;
}
#W-wrap .W-bg{
    position: absolute;
    z-index: -1;
    top:0;
    left: 0;
    right: 0;
    bottom:0;
    border-top:10px solid #0A3E83;
    border-bottom:10px solid #0A3E83;
    transition:border .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#W-wrap.W-mode-table .W-bg {
    border-top:40px solid #0A3E83;
    border-bottom:5px solid #0A3E83;
}
#W-wrap.W-mode-rez .W-bg {
    border-top:10px solid #0A3E83;
    border-bottom:50px solid #dd0935;
}
/* tabs */
#W-wrap.W-mode-table #W-table-swiper,
#W-wrap.W-mode-table .swiper-table-container .swiper-button-next,
#W-wrap.W-mode-table .swiper-table-container .swiper-button-prev   {
    display: block;
}
#W-wrap.W-mode-table #W-rez-swiper,
#W-wrap.W-mode-table .swiper-rez-container .swiper-button-next,
#W-wrap.W-mode-table .swiper-rez-container .swiper-button-prev  {
    display: none;
}

#W-wrap.W-mode-rez #W-table-swiper,
#W-wrap.W-mode-rez .swiper-table-container .swiper-button-next,
#W-wrap.W-mode-rez .swiper-table-container .swiper-button-prev {
    display: none;
}
#W-wrap.W-mode-rez #W-rez-swiper,
#W-wrap.W-mode-rez .swiper-rez-container .swiper-button-next,
#W-wrap.W-mode-rez .swiper-rez-container .swiper-button-prev  {
    display: block;
}
#W-wrap .W-tabs a{
    display: inline-block;
    padding: 10px;
    font-size: 18px;
    font-family: "TazBlack", Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    text-decoration: none;
    color:rgb(10, 62, 131, 0.5);
    transition: color .2s linear;
}
#W-wrap .W-tabs a.active {
    color:rgb(10, 62, 131, 1);
}
#W-wrap.W-mode-rez .W-tabs a {
    color:rgb(255, 255, 255, 0.5);
}
#W-wrap.W-mode-rez .W-tabs a.active {
    color:white;
}

/* tablica */
#W-table-swiper {
    padding: 0 10%;
}
#W-wrap .W-group.swiper-slide
{
    padding-top: 11px;
    align-items: start;
}
#W-wrap .W-table {
    width: 100%;
    color:#0A3E83;
    border-collapse: collapse; 
}
#W-wrap .W-table th:nth-child(1) {
    text-align: left;
}
#W-wrap .W-table th {
    height: 20px;
    padding: 0 20px;
    font-size: 20px;
    padding-bottom: 13px;
    color:white;
    font-family: "TazBlack", Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
}
#W-rapw .W-table tr {
}
#W-wrap .W-table td:nth-child(1) 
{
    text-align: left;
}
#W-wrap .W-table td:last-child
{
    font-family: "TazBlack", Arial, Helvetica, sans-serif;
    font-weight: normal;
}
#W-wrap .W-table td {
    padding: 6px 10px;
    text-align: center;
    font-family: "Taz", Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 15px;
    border-bottom: 1px solid #999999;
}
#W-wrap .W-table tr:last-child td{
    border: none;
}
#W-wrap .W-table .W-position {
    font-family: "TazBlack", Arial, Helvetica, sans-serif;
    width: 10px;
    display: inline-block;
}
#W-wrap .W-table .W-team{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}
#W-wrap .W-table .W-flag {
    border-radius:20px;
    width: 27px;
    height: 27px;
    display: flex;
    outline: 1px solid rgba(0,0,0,0.2);
}

/* swiper rezultati */
#W-rez-swiper {
    margin-top: 14px;
    height: 188px;
    width: 90%;
    padding: 0 30px;
}
#W-wrap .swiper-slide {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* swiper arrows */
#W-wrap  .swiper-button-next,
#W-wrap  .swiper-button-prev {
    --swiper-navigation-size:27px;
    width: 16px;
    height: 29px;
    /* margin-top:10px; */
   
}
#W-wrap #W-table-swiper .swiper-button-next,
#W-wrap #W-table-swiper .swiper-button-prev  {
     margin-top:12px;
}
#W-wrap .swiper-button-prev {
    margin-left: 0;
    left:27px;
}
#W-wrap  .swiper-button-next{
    margin-right: 0;
    right:27px;
}
#W-wrap .swiper-button-next::after,
#W-wrap .swiper-button-prev::after {
    content: "";
}
/* swiper hide pagination */
#W-wrap .swiper-pagination{
    display: none;
}

/* items */
#W-wrap .W-tekma {
    display: display;

    width:165px;
    text-align: center;
    text-transform: uppercase;
    color:#0A3E83;

    font-weight: normal;
    font-family: "TazBlack", Helvetica, sans-serif;
}
#W-wrap .W-tekma .W-group {
    color:#0A3E83;
    font-size: 23px;
    line-height: 1;
    margin:0;
    margin-top:20px;
    margin-bottom: 16px;

    font-weight: normal;
    font-family: "TazBlack", Helvetica, sans-serif;
    transition:color .2s linear;
}
#W-wrap  .W-tekma .W-date {
    font-size: 12.44px;
    line-height: 1;
    margin:0;
    margin-bottom:4.4px;
    font-weight: normal;
    font-family: "TazBlack", Helvetica, sans-serif;
}
#W-wrap  .W-tekma .W-location { 
    font-size: 9.57px;
    line-height: 1;
    margin:0;
    margin-bottom: 12.15px;
    font-weight: normal;
    font-family: "TazLight", Helvetica, sans-serif;
}
/* teams */
#W-wrap .W-tekma .W-team-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}
#W-wrap .W-tekma .W-team-flex strong {
    font-size: 52px;
    line-height: 1;
    margin:0;
    font-weight: normal;
    font-family: "TazBlack", Helvetica, sans-serif;
}
#W-wrap .W-tekma .W-team-flex .W-vs-symbol-bold
{
    font-size: 30px;
    font-weight: normal;
    font-family: "TazBlack", Helvetica, sans-serif;
}
#W-wrap .W-tekma  .W-team-flex span {
    display: block;
    margin: 0 5px;
    font-size: 30px;
    font-weight: normal;
    font-family: "Taz", Helvetica, sans-serif;
}
/* team */
#W-wrap .W-tekma  .W-team-flex .W-team{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#W-wrap .W-tekma  .W-team-flex .W-team.W-left {
    margin-right:9px;
}
#W-wrap .W-tekma  .W-team-flex .W-team.W-right {
    margin-left:9px;
}
#W-wrap .W-tekma  .W-team-flex  small{
    font-size:9.57px;
    font-weight: normal;
    font-family: "Taz", Helvetica, sans-serif;
}
#W-wrap .W-tekma  .W-team-flex .W-flag {
    margin-top: 15px;
    margin-bottom: 4.4px;
    border-radius:20px;
    width: 27px;
    height: 27px;
    display: flex;
    outline: 1px solid rgba(0,0,0,0.2);
}
#W-wrap .W-tekma  .W-team-flex .W-team small {
    position: absolute;

    bottom: -14px;
    font-size:9.7px;
    font-family: "Taz", Helvetica, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
}
/* footer */
#W-wrap .W-footer
{
    position: absolute;
    left: 9%;
    bottom: 0;
    right: 9%;
    height: 50px;
    z-index: 10;

    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#W-wrap .W-footer .W-powered-by {
    font-size:9.57px;
    margin-right: 20px;
    font-weight: normal;
    font-family: "TazLight", Helvetica, sans-serif;
    text-transform: uppercase;
    color:#0A3E83;
    transition: color .2s cubic-bezier(0.075, 0.82, 0.165, 1);
    text-decoration: none;
}
#W-wrap.W-mode-rez .W-footer .W-powered-by {
    color:white;
}
#W-wrap .W-footer .W-logo {
    margin-right:0;
}
#W-wrap .W-footer .W-logo path {
    transition: fill .2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#W-wrap.W-mode-rez .W-logo path{
    fill:white;
}
/* responsive 410x530*/
@media only screen and (max-width: 481px) {
    #W-wrap{
        position: relative;
        max-width: 100%;
        height: 530px;
    }
    /* tabs */
    #W-wrap .W-footer .W-tabs {
        margin-bottom: 10px !important;
    }
    #W-wrap .W-footer .W-tabs a{
        color:rgb(10, 62, 131, 0.5) !important;
    }
    #W-wrap .W-footer .W-tabs a.active {
        color:rgb(10, 62, 131, 1) !important;
    }


    /* tablica */
    #W-wrap.W-mode-table .W-bg {
        border-top-width: 70px;
    }
    #W-wrap .W-table th{
        padding: 25px 10px;
    }
    #W-wrap .W-table td {
        padding:21px 10px;
    }
    #W-wrap .W-table tr:last-child td {
        border-bottom: 1px solid #999999;
    }

    #W-wrap #W-table-swiper {
        height: 410px;
        padding: 0 10px;
    }
    /* swiper nav */
    #W-wrap .swiper-button-next,
    #W-wrap .swiper-button-prev {
        display: none !important;
    }
    #W-wrap .swiper-pagination {
       bottom: 0;
    }
    /* swiper pagination */
    #W-wrap .swiper-pagination-bullets {
        gap: 15px;
        display: flex;
        justify-content: center;
    }
    #W-wrap .swiper-pagination .swiper-pagination-bullet {
        padding: 0;
        margin: 0;
        width: 10px;
        height: 10px;
        background-color: #D9D9D9;
    }
    #W-wrap  .swiper-pagination .swiper-pagination-bullet-active {
        background-color: #0a3e83;
    }

    /* rezultati */
    #W-wrap.W-mode-rez .W-bg 
    {
        border-top-width: 10px;
    }
    #W-rez-swiper {
        /* height: 370px; */
        /* height: 70%; */
        /* height: 410px; */
        width: 100%;
        height: 370px;
        padding: 0;
        margin:0;
        margin-top: 30px; 
        padding-bottom: 10px;
    }
    #W-rez-swiper .swiper-slide {
        height: 144px;
        align-items: center;
        margin-top:0!important;
    }

    #W-rez-swiper .W-tekma .W-group {
        color: #0a3e83;
        margin-bottom: 16px;
    }
    #W-wrap  .W-tekma .W-location {
        margin-bottom:9.15px;
    }
    /* footer */
    #W-wrap .W-footer   
    {
        width: 100%;
        position: absolute;
        height: 50px;
        left:0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;

    }
    #W-wrap .W-footer .W-flex-grow-1 {
        display: none;
    }

    #W-wrap .W-footer .W-tabs {
        position: fixed;
        bottom: 50px;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    #W-wrap .W-footer .W-logo {
        /* margin-right: 36px; */
    }
}

/* 396 */
@media only screen and (max-width: 481px) and (max-height: 396px) {
    #W-wrap{
        position: relative;
        max-width: 100%;
        height: 396px;
    }
    /*tabs*/
    #W-wrap .W-footer .W-tabs {
        position: static;
        margin: 0 !important;
    }
    #W-wrap  .W-footer .W-tabs a{
        padding-left: 0;
        color:rgb(10, 62, 131, 0.5)!important;
    }
    #W-wrap  .W-footer .W-tabs a.active {
        color:rgb(10, 62, 131, 1)!important;
    }
    #W-wrap.W-mode-rez .W-footer .W-tabs a {
        color:rgb(255, 255, 255, 0.5)!important;
    }
    #W-wrap.W-mode-rez .W-footer .W-tabs a.active {
        color:white!important;
    }
    #W-wrap .W-footer .W-flex-grow-1 {
        display: flex;
    }
     #W-wrap .W-footer {
        padding: 0 25px;
     }
     #W-wrap .W-footer .W-powered-by {
        display: block !important;
        margin-right: 5px;
     }
    /* results */
    #W-rez-swiper {
        height: 315px;
        margin-top: 10px;
        padding-bottom: 10px;
    } 
    /*table */
    #W-wrap #W-table-swiper {
        height: 330px;
        padding: 0 10px;
    }
    #W-wrap .W-table td {
        padding: 12px 10px;
    }
    /* footer */
    #W-wrap .W-footer {
        margin-right: 0;
        right: 20px;
    }
    #W-wrap .W-footer .W-powered-by {
        display: none;
    }
    #W-wrap .W-footer .W-tabs {
        left: 20px;
        right: initial;
        bottom: 6px;
        position: initial;
    }
    #W-wrap .W-footer .W-logo {
        margin-right:0;
    }
}