@media (min-width: 992px) and (max-width: 1199px) {
}


@media (max-width: 991px) {
}

@media (min-width: 768px) and (max-width: 991px) {
    .my-slide {
        height: 300px;
    }
    .box h2 {
        font-size: 28px;
        line-height: 32px;
    }
    p.intro {
        font-size: 25px;
        line-height: 35px;
    }
    p.intro {
        margin: 45px 0;
    }
    .rectangles {
        height: 10px;
    }
}

@media (max-width: 767px) {
    header a img {
        max-width: 200px;
    }
    header a {
        padding: 25px 20px;
    }
    .my-slide {
        height: 400px;
    }
    .rectangles {
        height: 5px;
    }
    p.intro {
        font-size: 16px;
        line-height: 24px;
    }
    p.intro {
        margin: 25px 0;
    }
    .box h2 {
        font-size: 22px;
        line-height: 24px;
        height: 86px;
        overflow: hidden;
        margin: 0;
    }
    .box p {
        font-size: 14px;
        line-height: 20px;
    }
    .box {
        margin: 0 0 30px;
    }
    .box.last {
        margin: 0;
    }
    footer {
        font-size: 12px;
        margin: 0 0 15px;
    }
    .zagreb img {
        max-width: 50px;
    }
    .zagreb {
        margin: 15px 0 0;
    }
    figure .rectangles, footer .rectangles, .etno .rectangles {
        height: 3px;
    }
    p.intro.small {
        font-size: 14px;
        line-height: 24px;
    }
    .box figure {
        float: left;
        max-width: 125px;
        margin: 0 10px 10px 0;
    }
    .box h2 span {
        display: block;
        position: absolute;
        top: 50%;
        word-break: break-word;
        transform: translateY(-50%);
    }
}