.kroky {
    box-sizing: border-box;

    width: 98%;
    margin: 0px auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.krok-title{
	font-size: 1.125em;
	color: white;
	line-height: 1em;
}

.krok, 
.krok-arrow {
    display: flex;
    align-items: center;

    opacity: 0.35;
}

.active {
    opacity: 1;
}

.krok:last-child {
    margin-right: 0;
}

.krok-title {
    display: none;
}

.buttons {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 90vh;
    width: 100%;
}

.btn {
    background: none;
    outline: none;
    border: none;
    font-size: 16px;
    font-family: 'innogy', sans-serif;
    font-weight: 500;
    color:white;
    margin: 0 1em;
}

#btn-back:hover {
    text-decoration: underline;
}

#btn-next {
    background-color: tomato;
    padding: .25em .75em;
    border-radius: 10px;
}

#btn-next:hover {
    background-color: #e5593f;
}

.tab {
    width: 80%;
    margin: 0 auto;
    text-align: justify;

    display: none;
}

@media all and (min-width: 1024px) {
    
    /* some margin for nice alignment */
    .krok-icon {
        margin: 0 1em;
    }

    /* delete first icon left margin */
    .krok:first-child .krok-icon {
        margin-left: 0;    
    }

    /* gain little space after breaking word / bringing word back together */
    .krok-title {
        margin-right: 20px;
    }    
    
    /* little space after last child is unnecessary */
    .krok:last-child .krok-title {
        margin-right: 0;    
    }

    /* styling on desktop */
    .krok-title {
        display: flex;
        align-items: center;
    }
}

@media all and (min-width: 1185px) {
    .krok-arrow {
        margin-right: 1em;
    }
}


@media all and (min-width: 1400px) {
    .krok-arrow {
        margin-right: 2em;
    }
}

@media all and (min-width: 1527px) {
    .krok-arrow {
        margin-right: 0;
    }
}