/* apply a natural box layout model to all elements */
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

html, body {
    margin: 0;
    padding: 0
}


.cf:before, .cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

.block p {
    margin: 0 0 1em;
    padding: 0px 10px;
}

.line {
    position: relative;
    width: 90%;
    margin: auto;
    overflow: hidden;
}

.line:after {
    content: " ";
    width: 2px;
    background: #A9A9A9;
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 5%;
}


.fr {
    float: right;
}

.block {
    width: 95%;
    position: relative;
    padding: 0 0 0 0;
    clear: both
}

.block div.kolumny {
    column-count: 2;
    column-gap: 30px;
}


.fr {
    padding: 50px 0 50px 50px;
}

.circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #A9A9A9;
    float: left;
    margin-left: -69px;
    position: relative;
    z-index: 2;
    margin-top: 0.2em;
}


.circle.first:before, .circle.last:before {
    content: " ";
    position: absolute;
    width: 4px;
    left: 50%;
    margin: 0 0 0 -2px;
    background: #A9A9A9;
    bottom: 100%;
    height: 99em;
    z-index: 3;
}

.circle.last:before {
    bottom: auto;
    top: 100%;
}

.tytul_historia {
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: bold;
    color: black;
}

.tlo-historia:nth-child(even) {
    background: #ECEBEC;
}


.historia-img{
    width: 100%;
}

@media only screen and (max-width: 1024px) {
    .block div.kolumny {
        column-count: 1;
        column-gap: normal;
    }


}