@media only screen and (max-width:1024px) {
    #topContainer {
        display: grid;
        grid-template-columns: auto 1fr;
    }

    #topContainer .logo {
        grid-column: 1/2;
        grid-row: 1/2;
    }

    #topContainer .logo a {
        display: grid;
        grid-template-columns: auto 1fr;
        width: 100%;
        max-width: 360px;
    }

    #topContainer .logo a img {
        grid-column: 1/2;
        grid-row: 1/2;
        margin: 0 0.25em 0 0;
    }

    #topContainer .logo a span {
        grid-column: 2;
        grid-row: 1/2;
    }

    #topContainer .right {
        grid-column: 2/3;
        grid-row: 1/2;
        justify-self: end;
    }

    #mainContainer.homepage .rowContainer:nth-of-type(3) .smallGrid,
    #mainContainer.homepage .rowContainer:nth-of-type(4) .smallGrid {
        margin: 0;
    }

    #mainContainer.homepage .rowContainer:nth-of-type(3) .smallGrid img,
    #mainContainer.homepage .rowContainer:nth-of-type(4) .smallGrid img {
        width: 100%;
        max-width: 316px;
        height: auto;
        object-fit: cover;
    }
}

@media only screen and (max-width:975px) {
    .width-1_4 {
        width: 50%
    }

    .smallTableBoxLeft, .smallTableBoxRight {
        width: 100%;
    }
}

@media only screen and (min-width:936px) {
    #mainContainer.homepage .rowContainer:nth-of-type(1) .smallGrid .box .body {
        height: calc(var(--boxVyska,300px) - 45px);
    }
}

@media only screen and (max-width:935px) {
    #mainContainer.homepage .rowContainer:nth-of-type(1) .largeGrid {
        grid-column: 1/-1;
    }

    #mainContainer.homepage .rowContainer:nth-of-type(1) .smallGrid {
        grid-column: 1/-1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 1em;
        flex-wrap: wrap;
    }

    #mainContainer.homepage .rowContainer:nth-of-type(1) .smallGrid .box {
        flex: 1 1;
        max-width: 400px;
        min-width: 300px;
    }

    #mainContainer.homepage .rowContainer:nth-of-type(2),
    #mainContainer.homepage .rowContainer:nth-of-type(3),
    #mainContainer.homepage .rowContainer:nth-of-type(4) {
        grid-template-columns: 100%;
    }

    #mainContainer.homepage .rowContainer:nth-of-type(2) .smallGrid,
    #mainContainer.homepage .rowContainer:nth-of-type(3) .smallGrid,
    #mainContainer.homepage .rowContainer:nth-of-type(4) .smallGrid {
        grid-column: 1/2;
        justify-self: center;
        max-width: 400px;
    }

    #mainContainer.homepage .rowContainer:nth-of-type(3) .smallGrid img,
    #mainContainer.homepage .rowContainer:nth-of-type(4) .smallGrid img {
        max-width: 400px;
    }

    #mainContainer.teamHp .rowContainer:not(.box) {
        grid-template-columns: 100%;
    }

    #mainContainer.teamHp .rowContainer:not(.box) .largeGrid {
        grid-column: 1/-1;
    }

    #mainContainer.teamHp .rowContainer:not(.box) .smallGrid {
        grid-column: 1/2;
        justify-self: center;
        max-width: 400px;
    }

    #mainContainer.teamHp .rowContainer:not(.box) .smallGrid {
        width: 100%;
        aspect-ratio: 1/1;
        display: flex;
        flex-direction: column;
    }
}

@media only screen and (max-width:755px) {
    #tabsBox ul li {
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: auto 1fr;
    }

    #tabsBox ul li.actual > a::after {
        display: none;
    }

    #tabsBox ul li > div {
        grid-column: 1/-1;
        grid-row: 1/2;
    }

    #tabsBox ul li#li-0 > a {
        grid-column: 1/2;
        grid-row: 2/3;
    }

    #tabsBox ul li#li-1 > a {
        grid-column: 2/3;
        grid-row: 2/3;
    }

    #tabsBox ul li#li-2 > a {
        grid-column: 3/4;
        grid-row: 2/3;
    }

    #tabsBox ul li#li-3 > a {
        grid-column: 4/5;
        grid-row: 2/3;
    }

    .rowContainer.teamHpContainer {
        grid-template-columns: 100%;
        grid-template-rows: 1fr auto;
    }

    .teamHpMain {
        grid-column: 1/-1;
        grid-row: 1/2;
    }

    .teamHpContainer .smallGrid.variableHeight.right {
        grid-column: 1/-1;
        grid-row: 2/3;
    }

    .matches {
        grid-template-columns: 100%;
        grid-template-rows: 1fr auto 1fr auto;
    }

    .matches #zap_teamName {
        grid-column: 1/-1;
        grid-row: 4/5;
    }

    .matches .prev, .matches .next {
        grid-column: 1/-1;
    }

    .matches .prev {
        grid-row: 1/2;
    }

    .matches:after {
        grid-column: 1/-1;
        grid-row: 2/3;
        transform: rotate(90deg);
        justify-self: center;
        margin-top: -22px;
        margin-bottom: -22px;
    }

    .matches .next {
        grid-row: 3/4;
    }

    .matches:before {
        grid-column: 1/-1;
        grid-row: 1/4;
    }

    .rowContainer.teamHpContainer ~ .matches {
        grid-template-columns: 100%;
        grid-template-rows: auto 1fr auto 1fr;
    }

    .rowContainer.teamHpContainer ~ .matches #zap_teamName {
        grid-row: 1/2;
    }

    .rowContainer.teamHpContainer ~ .matches::before {
        grid-row: 2/5;
    }

    .rowContainer.teamHpContainer ~ .matches .prev {
        grid-row: 2/3;
    }

    .rowContainer.teamHpContainer ~ .matches::after {
        grid-row: 3/4;
    }

    .rowContainer.teamHpContainer ~ .matches .next {
        grid-row: 4/5;
    }

    .content:has(> .leftside) {
        grid-template-columns: 100%;
    }

    .content:has(> .leftside) .leftside {
        grid-column: 1/-1;
        grid-row: 1/2;
    }

    .content:has(> .leftside) .rightside {
        grid-column: 1/-1;
        grid-row: 2/3;
        padding: 0.63em 0.88em;
    }
}

@media only screen and (max-width:725px) {
    #footer {
        grid-template-columns: 100%;
        grid-template-rows: repeat(4,auto);
        gap: 1.5em;
    }

    #footer .footer-box {
        grid-column: 1/-1;
        text-align: center;
    }

    #footer .smallCopy {
        grid-row: 1/2;
    }

    #footer .smallAdres {
        grid-row: 2/3;
    }

    #footer .smallKontakt {
        grid-row: 3/4;
    }

    #footer .account {
        grid-row: 4/5;
        justify-self: center;
        text-align: left;
    }

    #footer .account a.loginA, #footer .account a.loginBtn {
        margin: 0;
        justify-self: center;
    }

    .content.tymy .rowContainer {
        grid-template-columns: 100%
    }

    .content.tymy .rowContainer .smallGrid {
        width: 100%;
        grid-column: 1/-1;
        justify-self: center;
    }

    .statistikaTymuTable {
        overflow-y: scroll;
    }

    .statistikaTymuTable table {
        width: 100%;
        min-width: 700px;
    }

    table.listYouthHP,
    table.listYouthHP > tbody,
    table.listYouthHP > tbody > tr,
    table.listYouthHP > tbody > tr > td {
        display: block;
        width: 100%;
    }

    table.listYouthHP > tbody > tr + tr {
        margin-top: 0.75em
    }
}

@media only screen and (max-width:660px) {
    #topContainer {
        grid-template-columns: 100%;
    }

    #topContainer .logo, #topContainer .right {
        grid-column: 1/2;
    }

    #topContainer .logo {
        grid-row: 1/2;
        justify-self: center;
        margin: 0.75em 0 0;
    }

    #topContainer .right {
        grid-row: 2/3;
        justify-self: center;
    }

    .teamHpMain {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 1fr auto
    }

    .teamHpMain img {
        grid-column: 1/2;
        grid-row: 1/2;
    }

    .teamHpMain .info {
        grid-column: 1/2;
        grid-row: 2/3;
        position: static;
    }
}

@media only screen and (min-width:626px) {
    .MobMenu {
        display: none;
    }

    .menuSection .hidenavig {
        display: none;
    }
}

@media only screen and (max-width:625px) {

    #topContainer .right {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        justify-self: stretch;
    }

    #topContainer .right .socialMedia {
        grid-column: 2/3;
        grid-row: 1/2;
    }

    #topContainer .right .MobMenu {
        grid-column: -2/-1;
        grid-row: 1/2;
        justify-self: end;
    }

    .menuSection:not(.fixed) .hidenavig {
        display: none;
    }

    .menuSection {
        display: grid;
        grid-template-columns: 100%;
        padding-bottom: 0.75em;
    }

    .menuSection:not(.fixed) {
        position: relative;
    }

    .menuSection.fixed {
        background: rgba(0, 0, 0, .85);
        padding-top: 0.75em;
    }

    .menuSection:not(.active) #menu {
        display: none;
    }

    .menuSection #menu {
        height: auto;
        position: absolute;
        z-index: 101;
        top: calc(100% - (0.75em/2));
        right: 0;
        width: 100%;
        max-width: 300px;
        flex-direction: column;
    }

    .menuSection #menu li a {
        justify-content: flex-end;
        padding: 0.5em 0.35em;
    }

    .menuSection.fixed #menu li a {
        padding-right: 1em;
    }

    #tabsBox ul li > div div.info {
        padding: 0.5em;
        grid-template-columns: 100%;
        grid-template-rows: auto 1fr auto;
    }

    #tabsBox ul li > div div.info h2 {
        font-size: 1.2em;
    }

    #tabsBox ul li > div div.info p {
        padding: 0;
        margin: 0 0 0.25em 0;
        grid-column: 1/-1;
    }

    #tabsBox ul li > div div.info .more {
        grid-column: 1/-1;
        grid-row: 3/4;
    }
}

@media only screen and (max-width:550px) {
    #tabsBox ul li {
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: 1fr repeat(2,var(--tlVyska,5em));
    }

    #tabsBox ul li > div {
        aspect-ratio: auto;
    }

    #tabsBox ul li > div img {
        grid-row: 1/2;
    }

    #tabsBox ul li > div div.info {
        display: block;
    }

    #tabsBox ul li > div div.info .more {
        display: none;
    }

    #tabsBox ul li > div .Afull {
        display: block;
        width: 100%;
        height: 100%;
        background: none;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 212;
    }

    #tabsBox ul li#li-0 > a {
        grid-column: 1/2;
        grid-row: 2/3;
    }

    #tabsBox ul li#li-1 > a {
        grid-column: 2/3;
        grid-row: 2/3;
    }

    #tabsBox ul li#li-2 > a {
        grid-column: 1/2;
        grid-row: 3/4;
    }

    #tabsBox ul li#li-3 > a {
        grid-column: 2/3;
        grid-row: 3/4;
    }

    .largeGrid .box .body .item {
        grid-template-columns: auto 1fr;
        grid-template-rows: repeat(2,auto) 1fr;
    }

    .largeGrid .box .body .item a.img {
        grid-column: 1/2;
        grid-row: 1/3;
    }

    .largeGrid .box .body .item h3 {
        grid-column: 2/3;
        grid-row: 1/2;
        font-size: 1.15em;
    }

    .largeGrid .box .body .item .date {
        grid-column: 2/3;
        grid-row: 2/3;
    }

    .largeGrid .box .body .item p {
        margin: 0.25em 0 0;
        grid-column: 1/-1;
        grid-row: 3/4;
    }

    .matches > div table td.resultLabel {
        width: 26%;
    }

    .matches > div table td.resultText {
        white-space: normal
    }

    .box #teamsCtrl.body table,
    .box #teamsCtrl.body table > tbody,
    .box #teamsCtrl.body table > tbody > tr,
    .box #teamsCtrl.body table > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .box #teamsCtrl.body table > tbody > tr {
        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%);
        display: flex;
        flex-wrap: wrap;
        padding: 0.15em 0.25em;
        gap: 0 0.75em;
    }

    .box #teamsCtrl.body table > tbody > tr + tr {
        margin-top: 0.25em;
    }

    .box #teamsCtrl.body table > tbody > tr > td {
        line-height: 1.2em;
        flex: 0 0 auto;
        width: auto;
        padding: 0;
    }

    .box #teamsCtrl.body table > tbody > tr > td:not(:nth-child(1)):not(:has(>a)) {
        display: none;
    }

    .box #teamsCtrl.body tr td:nth-child(1) {
        flex: 1 1 100%;
    }

    .body.lighthp .item.lighthp {
        grid-template-columns: 100%;
        grid-template-rows: repeat(4,auto);
    }

    .body.lighthp .item.lighthp a.img {
        grid-column: 1/-1;
        grid-row: 1/2;
    }

    .body.lighthp .item.lighthp a.img img {
        width: 100%;
        aspect-ratio: 1/1;
        max-width: 150px;
        object-fit: cover;
    }

    .body.lighthp .item.lighthp h3 {
        grid-column: 1/-1;
        grid-row: 2/3;
    }

    .body.lighthp .item.lighthp .date {
        grid-column: 1/-1;
        grid-row: 3/4;
    }

    .body.lighthp .item.lighthp p {
        grid-column: 1/-1;
        grid-row: 4/5;
    }

    .width-1_4 {
        width: 100%
    }

    div#content_foto_holder_right {
        float: none;
        width: 100%;
    }

    div#content_foto_holder_right div {
        float: none;
    }

    img[style*="float: left"], img[style*="float:left"],
    img[style*="float: right"], img[style*="float:right"] {
        float: none !important;
        display: block;
        margin: 0 !important;
    }
}

@media only screen and (max-width:410px) {
    #topContainer .logo a {
        font-size: 1.88em;
        line-height: 0.82em;
    }

    #topContainer .logo a span em {
        font-size: 0.5em;
        line-height: 1.47em;
        display: block;
    }
}