/* Alapbeállítások */
body {
    font-family: 'Lato', sans-serif;
    background: #f5f5f5 url(../img/cross-pattern.png) repeat top center;
    color: #333;
    padding-top: 56px; /* Navbar miatt */
}

/* Navbar */
.navbar {
    background-color: #212529;
}
.navbar-brand {
    font-weight: bold;
    color: #f8f9fa;
}
.navbar-nav .nav-link {
    color: #f8f9fa;
    transition: color 0.3s;
}
.navbar-nav .nav-link:hover {
    color: #adb5bd;
}

/* Carousel */
.carousel-caption {
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border-radius: 5px;
}
.carousel-item img {
    max-height: 500px;
    object-fit: cover;
}

/* Képek */
img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Fő tartalom */
.container {
    margin-top: 20px;
    max-width: 940px;
}

h3 {
    margin-top: 20px;
    color: #212529;
}

/* Footer */
footer {
    background-color: #212529;
    color: #f8f9fa;
    padding: 20px 0;
    margin-top: 40px;
}

/* Grid visszaállítása Bootstrap 2/3 kompatibilitásra */
.row {
    margin-left: -20px;
}
[class*="span"] {
    float: left;
    margin-left: 20px;
}
.span4 {
    width: 300px;
}
.span8 {
    width: 620px;
}
.container, .navbar-fixed-top .container {
    width: 940px;
}

/* Reszponzivitás beállítása a régi bootstrap_responsive.css alapján */
@media (max-width: 767px) {
    .container {
        width: 100%;
        padding: 0 15px;
    }
    .row {
        margin-left: 0;
    }
    [class*="span"] {
        width: 100%;
        margin-left: 0;
    }
    .navbar-nav {
        text-align: center;
    }
    .carousel-item img {
        max-height: 300px;
    }
    footer {
        text-align: center;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .container {
        width: 724px;
    }
    .span4 {
        width: 228px;
    }
    .span8 {
        width: 476px;
    }
}