@import url("/import/css/_root.css");
@import url("/import/css/_top-menu.css");
@import url("/import/css/_header-default.css");
@import url("/import/css/__main-default.css");
@import url("/import/css/_footer.css");

.nav_pc #_tm_home
{
    color: #fff;
    border-bottom: 1px solid var(--color-main);
}

.mobile_menu #_tm_home
{
    background: var(--tlo-jasny-szary) !important;
    color: var(--color-main);
}

.f_teamspeak
{
    color: var(--color-main) !important;
}

/*  */
.online
{
    filter: var(--filter-zielony);
}
.offline
{
    filter: var(--filter-czerwony);
}

/* Header */
header
{
    width: 100%;
    height: 760px;
    background-image: url("/import/grafika/_teamspeak/tlo/main_header.jpg");
    background-position: center;
}
.nav_pc
{
    margin-bottom: auto;
}
.header_content
{
    min-height: 760px;
}
header .header_main
{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
}
header .header_status
{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    transform: translateY(50%);
}
header .header_status .status_info_content
{
    padding: 15px 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    background-color: #fff;
    box-shadow: 0 0 15px 2px rgb(0 0 0 / 25%);
}
header .header_status .status_info_content .status_box
{
    display: grid;
    grid-template-columns: 45px auto;
    align-items: center;
}
header .header_status .status_info_content .status_box img
{
    width: 37px;
    height: 37px;
}
header .header_status .status_info_content .status_box .status_box_opis
{
    display: flex;
    flex-direction: column;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    line-height: 15px;
}
header .header_status .status_info_content .status_box .status_box_opis span
{
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 22px;
}

@media(max-width: 569px) {

    header .header_main
    {
        margin-bottom: 40px;
        flex-direction: column;
        align-items: center;
    }
    header .header_status
    {
        display: none;
    }
}
@media(min-width: 570px) {

    header .header_main
    {
        transform: translateY(20px);
    }
    header .header_status .status_info_content .status_box
    {
        grid-template-columns: repeat(1, 1fr);
        justify-items: center;
        gap: 5px;
    }
}
@media(min-width: 720px) {

    header .header_main
    {
        transform: translateY(0px);
    }
    header .header_status .status_info_content .status_box
    {
        grid-template-columns: 45px auto;
        gap: 5px;
    }
}

/* Main */
.main_naglowek h3
{
    text-align: center !important;
}
.main_naglowek .podkreslenie_hr_h3
{
    margin: 10px auto 20px auto !important;
}
.h2_main_naglowek
{
    margin-top: 20px;
}
.h2_main_naglowek h2
{
    font-family: "Montserrat", sans-serif;
    font-size: 46px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: var(--tekst-szary);
}
.h2_main_naglowek p
{
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    text-align: center;
    color: var(--tekst-szary-2);
}

@media(max-width: 719px)
{
    .h2_main_naglowek h2
    {
        font-size: 36px;
    }
    .h2_main_naglowek p
    {
        font-size: 18px;
    }
}
@media(min-width: 720px)
{
    .h2_main_naglowek h2
    {
        font-size: 46px;
    }
    .h2_main_naglowek p
    {
        font-size: 20px;
    }
}

/* Grid */
.grid_3
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}


/* Dlaczego nasz serwer */
.ping
{
    background-image: url("/import/grafika/_teamspeak/home/niski_ping.png");
}
.wolnosc
{
    background-image: url("/import/grafika/_teamspeak/home/wolnosc_slowa.png");
}
.system
{
    background-image: url("/import/grafika/_teamspeak/home/integracja_systemu.png");
}

.dlaczego_nasz_serwer
{
    margin: 50px 0 0px 0;
}
.dlaczego_nasz_serwer_box
{
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    background-color: #2f3450;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 70%;
}
.dlaczego_nasz_serwer_box h4
{
    font-family: "Montserrat", sans-serif;
    font-size: 19px;
    text-shadow: 0px 0px 14px rgb(0, 0, 0);
    color: var(--tekst-bialy);
}
.dlaczego_nasz_serwer_box p
{
    width: 80%;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-shadow: 0px 0px 14px rgb(0, 0, 0);
    color: var(--tekst-bialy);
}

@media(max-width: 720px)
{
    .dlaczego_nasz_serwer .grid_3
    {
        grid-template-columns: repeat(1, 1fr);
    }
    .dlaczego_nasz_serwer .grid_3 .dlaczego_nasz_serwer_box
    {
        background-position: 75%;
    }
}
@media(min-width: 721px)
{
    .dlaczego_nasz_serwer .grid_3
    {
        grid-template-columns: repeat(2, 1fr);
    }
    .dlaczego_nasz_serwer .grid_3 .system
    {
        grid-column: 1/3;
        background-size: auto;
        background-position: 100%;
    }
}   
@media(min-width: 1090px)
{
    .dlaczego_nasz_serwer .grid_3
    {
        grid-template-columns: repeat(3, 1fr);
    }
    .dlaczego_nasz_serwer .grid_3 .system
    {
        grid-column: auto;
        background-size: cover;
        background-position: 70%;
    }
}

/* Nasze usługi */

.uslugi_tab
{
    height: auto;
    padding-top: 40px;
    position: relative;
}
.uslugi_tab .switch_container
{
    width: 350px;
    height: 50px;
    top: 70px;
    /* left: 50px; */
    display: grid;
    grid-template-columns: 40px auto 40px;
    position: absolute;
    z-index: 10;
}
.uslugi_tab .switch_container .poprzedni_slide
{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 30px;
}
.uslugi_tab .switch_container .tekst_slide
{
    display: flex;
    align-items: center;
    position: relative;
}
.uslugi_tab .switch_container .tekst_slide .nazwa_uslugi_slide
{
    width: 100%;
    display: block;
    position: absolute;
    overflow: hidden;
    text-align: center;
}
.uslugi_tab .switch_container .tekst_slide .nazwa_uslugi_slide h4
{
    transform: translateX(100%);
    transition: all 0.6s ease;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 400;
}
.uslugi_tab .switch_container .tekst_slide .nazwa_uslugi_slide.active h4
{
    transform: translateX(0);
}
.uslugi_tab .switch_container .nastepny_slide
{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 30px;
}
.uslugi_tab .tab_container .tab_box
{
    opacity: 0;
    transition: all 0.4s ease;
    animation: fadeOut 0.4s;
    animation-fill-mode: forwards;
}
.uslugi_tab .tab_container .tab_box.active
{
    opacity: 1;
    transition: all 0.4s ease;
    transition-delay: 0.3s;
    animation: fadeIn 0.4s;
    animation-fill-mode: forwards;
}
.uslugi_tab .tab_container .tab_box .tab_content
{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.uslugi_tab .tab_container .tab_box .tab_content .tab_opis
{
    padding-top: 100px;
}
.uslugi_tab .tab_container .tab_box .tab_content .tab_opis .tab_opis_content
{
    order: 1;
}
.uslugi_tab .tab_container .tab_box .tab_content .tab_opis .tab_opis_content p
{
    margin-top: 10px;
    margin-bottom: 20px;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    line-height: 22px;
    color: var(--tekst-jasny-szary-2);
}
.uslugi_tab .tab_container .tab_box .tab_content .tab_opis .tab_opis_content .p_strong
{
    margin-top: 10px;
    margin-bottom: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: var(--tekst-czarny-1);
}
.uslugi_tab .tab_container .tab_box .tab_content .tab_opis .tab_opis_content span
{
    color: var(--color-niebieski);
}
.uslugi_tab .tab_container .tab_box .tab_content .tab_grafika
{
    padding-left: 50px;
    display: grid;
    justify-items: end;
    align-items: center;
    order: 2;
}
.uslugi_tab .tab_container .tab_box .tab_content .tab_grafika .tab_grafika_content img
{
    height: auto;
    border: 1px solid var(--border-lekki-szary);
    border-radius: 8px;
}
.uslugi_tab .tab_container .tab_box .tab_btn
{
    display: flex;
    gap: 15px;
}
.uslugi_tab .switch_linia
{
    width: 620px;
    height: 1px;
    margin-top: 80px;
    /* margin-bottom: 80px; */
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 4px 4px 4px 4px 4px 4px;
    justify-content: space-between;
    background-color: var(--podkreslenie-jasny-szary-2);
}
.sl_grid
{
    grid-template-columns: 4px 4px 4px 4px 4px 4px 4px !important;
}
.uslugi_tab .switch_linia .switch_box
{
    height: 20px;
    transform: translateY(-9px);
    cursor: pointer;
}
.uslugi_tab .switch_linia .switch_box::before
{
    content: "";
    width: 19px;
    height: 19px;
    margin-left: -10px;
    margin-right: auto;
    display: block;
    position: absolute;
    background-color: transparent;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: var(--filter-szary);
    transition: all 0.6s ease-in-out;
    transform: scale(1);
}
.uslugi_tab .switch_linia .switch_box:hover::before
{
    filter: var(--filter-czarny);
    transform: scale(1.1);
}
.uslugi_tab .switch_linia .switch_box.active::before
{
    filter: var(--filter-niebieski);
    transform: scale(1.8);
}
.uslugi_tab .switch_linia .switch_box.strefa_publiczna::before
{
    background-image: url('/import/grafika/ikony/odpowiedz.svg');
}
.uslugi_tab .switch_linia .switch_box.wlasny_kanal::before
{
    background-image: url('/import/grafika/ikony/wlasny_kanal.svg');
}
.uslugi_tab .switch_linia .switch_box.strefa_gaming::before
{
    background-image: url('/import/grafika/ikony/gaming.svg');
}
.uslugi_tab .switch_linia .switch_box.strefa_klanowa::before
{
    background-image: url('/import/grafika/ikony/celownik.svg');
}
.uslugi_tab .switch_linia .switch_box.strefa_vip::before
{
    background-image: url('/import/grafika/ikony/gwiazda.svg');
}
.uslugi_tab .switch_linia .switch_box.strefa_premium::before
{
    background-image: url('/import/grafika/ikony/nagrody.svg');
}

.uslugi_tab .switch_linia .switch_box.ochrona_poke::before
{
    background-image: url('/import/grafika/ikony/nieudane_outline.svg');
}
.uslugi_tab .switch_linia .switch_box.ochrona_move::before
{
    background-image: url('/import/grafika/ikony/ochrona_move.svg');
}
.uslugi_tab .switch_linia .switch_box.blokada_mowienia::before
{
    background-image: url('/import/grafika/ikony/blokada_mowienia.svg');
}
.uslugi_tab .switch_linia .switch_box.blokada_wejscia::before
{
    background-image: url('/import/grafika/ikony/ban.svg');
}
.uslugi_tab .switch_linia .switch_box.widocznosc_kanalu::before
{
    background-image: url('/import/grafika/ikony/brak_widocznosci.svg');
}
.uslugi_tab .switch_linia .switch_box.licznik_osob_online::before
{
    background-image: url('/import/grafika/ikony/licznik_osob.svg');
}
.uslugi_tab .switch_linia .switch_box.przenoszenie_z_poczeklani::before
{
    background-image: url('/import/grafika/ikony/przenoszenie_z_poczeklani.svg');
}

@media(max-width: 819px)
{
    .uslugi_tab .switch_container
    {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
        top: 0;
        position: relative;
    }
    .uslugi_tab .tab_container .tab_box .tab_content
    {
        flex-direction: column;
    }
    .uslugi_tab .tab_container .tab_box .tab_content .tab_opis
    {
        padding-top: 20px;
        order: 2;
    }
    .uslugi_tab .tab_container .tab_box .tab_content .tab_grafika
    {
        padding: 0;
        padding-top: 20px;
        order: 1;
        justify-content: center;
    }
    .uslugi_tab .tab_container .tab_box .tab_content .tab_opis .tab_opis_content
    {
        text-align: center;
    }
    .uslugi_tab .tab_container .tab_box .tab_content .tab_grafika .tab_grafika_content img
    {
        width: 100%;
    }
    .uslugi_tab .tab_container .tab_box .tab_btn
    {
        justify-content: center;
    }
    .uslugi_tab .switch_linia
    {
        display: none;
    }
}
@media(min-width: 820px)
{
    .uslugi_tab .switch_linia
    {
        display: grid;
    }
}

/* Zabezpieczenia */

.zabezpieczenia
{
    padding-top: 40px;
}
.zabezpieczenia .grid_3
{
    gap: 0;
}
.zabezpieczenia .z_box
{
    border: 1px solid #d4d4d4;
    padding: 25px 15px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}
.zabezpieczenia .z_box:hover
{
    box-shadow: 0px 0px 15px 0px rgb(201 201 201), 0px 0px 2px 0px rgb(203 203 203);
    z-index: 1;
}
.zabezpieczenia .z_box h4
{
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--tekst-ciemny-2);
} 
.zabezpieczenia .z_box i
{
    margin: 14px auto;
    font-size: 40px;
    color: var(--ikona-jasny_szary);
}
.zabezpieczenia .z_box:hover i
{
    color: var(--color-niebieski);
}
.zabezpieczenia .z_box p
{
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}

@media(min-width: 540px)
{
    .zabezpieczenia .z_box h4
    {
        font-size: 16px;
    }
    .zabezpieczenia .z_box
    {
        font-size: 13px;
    }
}
@media(min-width: 970px)
{
    .zabezpieczenia .z_box h4
    {
        font-size: 18px;
    }
    .zabezpieczenia .z_box
    {
        font-size: 14px;
    }
}

@media(max-width: 619px)
{
    .zabezpieczenia .grid_3
    {
        grid-template-columns: repeat(1, 1fr);
    }
    .zabezpieczenia .z_box
    {
        border-top: 0 !important;
    }
    .zabezpieczenia .z_box:first-child
    {
        border-top: 1px solid #d4d4d4 !important;
    }
}
@media(min-width: 620px)
{
    .zabezpieczenia .grid_3
    {
        grid-template-columns: repeat(2, 1fr);
    }
    .zabezpieczenia .z_box:nth-child(1)
    {
        border-right: 0;
    }
    .zabezpieczenia .z_box:nth-child(3)
    {
        border-top: 0;
        border-right: 0;
    }
    .zabezpieczenia .z_box:nth-child(4)
    {
        border-top: 0;
    }
    .zabezpieczenia .z_box:nth-child(5)
    {
        border-top: 0;
        border-right: 0;
    }
    .zabezpieczenia .z_box:nth-child(6)
    {
        border-top: 0;
    }
}
@media(min-width: 860px)
{
    .zabezpieczenia .grid_3
    {
        grid-template-columns: repeat(3, 1fr);
    }
    .zabezpieczenia .z_box:nth-child(1)
    {
        border-right: 0;
    }
    .zabezpieczenia .z_box:nth-child(2)
    {
        border-right: 0;
    }
    .zabezpieczenia .z_box:nth-child(3)
    {
        border-top: 1px solid #d4d4d4;
        border-right: 1px solid #d4d4d4;
    }
    .zabezpieczenia .z_box:nth-child(4)
    {
        border-top: 0;
        border-right: 0;
    }
    .zabezpieczenia .z_box:nth-child(5)
    {
        border-top: 0;
        border-right: 0;
    }
    .zabezpieczenia .z_box:nth-child(6)
    {
        border-top: 0;
    }
}

/* Statystyki */
.statystyki_informacja
{
    display: grid;
    grid-template-columns: auto 300px;
    align-items: center;
}
.statystyki_informacja div h4
{
    margin-bottom: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 26px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-niebieski); 
}
.statystyki_informacja div p
{
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 400;
}
.statystyki_informacja div a
{
    width: fit-content;
    margin: auto;
}

@media(max-width: 669px) {
    .statystyki_informacja
    {
        grid-template-columns: repeat(1, 1fr);
    }
    .statystyki_informacja .s_content
    {
        text-align: center;
    }
    .statystyki_informacja .a_przycisk
    {
        margin-top: 30px;
    }
}
@media(min-width: 670px) {

    .statystyki_informacja 
    {
        grid-template-columns: auto 250px;
    }
}
@media(min-width: 1000px) {

    .statystyki_informacja
    {
        grid-template-columns: auto 300px;
    }
}