/*
 * FONTY.PL — układ strony
 *
 * Płynna szerokość z ograniczeniem do 1320 px.
 * Progi 768 / 992 / 1200 pozostają zgodne
 * z nawigacją i pozostałymi arkuszami.
 *
 * Dotychczasowe nazwy klas zachowano dla zgodności
 * z istniejącymi podstronami PHP.
 */


/* ==========================================
   1. SZEROKOŚĆ STRONY
   ========================================== */

.container {
    width: 100%;
    max-width: 1320px;

    margin-right: auto;
    margin-left: auto;

    padding-right: 15px;
    padding-left: 15px;
}


/* ==========================================
   2. WIERSZE I KOLUMNY
   ========================================== */

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.col-xs-6,
.col-sm-3,
.col-sm-4,
.col-sm-8,
.col-sm-9,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-7,
.col-md-8,
.col-md-9 {
    position: relative;
    min-height: 1px;

    padding-right: 15px;
    padding-left: 15px;
}

/* Dwie kolumny także na małym ekranie,
   wyłącznie tam, gdzie użyto col-xs-6. */

.col-xs-6 {
    float: left;
    width: 50%;
}


/* ==========================================
   3. DOMYKANIE UKŁADÓW Z FLOAT
   ========================================== */

.container::before,
.container::after,
.row::before,
.row::after,
.navbar::before,
.navbar::after,
.navbar-header::before,
.navbar-header::after,
.navbar-collapse::before,
.navbar-collapse::after,
.nav::before,
.nav::after {
    display: table;
    content: " ";
}

.container::after,
.row::after,
.navbar::after,
.navbar-header::after,
.navbar-collapse::after,
.nav::after {
    clear: both;
}


/* ==========================================
   4. TELEFONY — PONIŻEJ 768 PX
   ========================================== */

.visible-xs {
    display: none !important;
}

@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }

    .visible-xs {
        display: block !important;
    }
}


/* ==========================================
   5. UKŁAD OD 768 PX
   ========================================== */

@media (min-width: 768px) {
    .col-sm-3,
    .col-sm-4,
    .col-sm-8,
    .col-sm-9 {
        float: left;
    }

    .col-sm-3 {
        width: 25%;
    }

    .col-sm-4 {
        width: 33.33333333%;
    }

    .col-sm-8 {
        width: 66.66666667%;
    }

    .col-sm-9 {
        width: 75%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important;
    }
}


/* ==========================================
   6. UKŁAD OD 992 PX
   ========================================== */

@media (min-width: 992px) {
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-7,
    .col-md-8,
    .col-md-9 {
        float: left;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-4 {
        width: 33.33333333%;
    }

    .col-md-5 {
        width: 41.66666667%;
    }

    .col-md-7 {
        width: 58.33333333%;
    }

    .col-md-8 {
        width: 66.66666667%;
    }

    .col-md-9 {
        width: 75%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none !important;
    }
}


/* ==========================================
   7. WIDOCZNOŚĆ OD 1200 PX
   ========================================== */

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}