:root {
    /* --color-hrds-orange:#e74c3c; */
    --color-hrds-orange:#ff824e;
    /* --color-hrds-black:black; */
    --color-hrds-black:#4a4a4a;
    --color-hrds-white:white;
    --color-hrds-blue:#1F0A67;
    --color-hrds-grey:grey;
}

* {
    padding:0px;
    margin:0px;
    box-sizing: border-box;
}

.clear {
    float:none;
    clear:both;
}
body {
    font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size:16px;
}


.logo-n-main-title-n-menu, main { 
    padding:1rem;
    box-shadow:0px 0px 1px var(--color-hrds-grey);
}


.logo-n-main-title {
    float:left; 
}
.logo {
    color:var(--color-hrds-orange);
    font-size:4rem;
    line-height:4rem;
    font-weight: 600;    
}

h1 {
    font-size:2rem;
    line-height: 2rem;

}

.mobilmenu {
    float:right;
    display:none;
}

.menu {
    margin:1rem 0rem;
    display:none;
}
.menu a{
    background-color: var(--color-hrds-white);
    color:var(--color-hrds-black);
    padding:1rem;
    border:3px solid var(--color-hrds-grey);
    line-height: 2rem;
    text-decoration: none;
    font-weight: bold;
}

.illustration {
    border: none;
    padding: 0;
    margin: 0;
    line-height: 0;
    font-size: 0;
    max-width:100%;
}


.illustration img{
    max-width:100%;
}


.illustration-caption {
    background-color: var(--color-hrds-orange);
    color:var(--color-hrds-white);
    padding: 1rem;
}


.illustation-caption-row {
    font-size:1.4rem;
    font-weight:100;   
    float:left;
    padding-left:1rem;
}

.illustation-caption-action a {
    font-weight:600;   
    text-decoration: none;
    float:right;
    color:var(--color-hrds-blue);
    padding:.5rem;
    margin-right:3rem;
    font-size: 1.6rem;
    text-shadow:0px 0px 10px var(--color-hrds-white);
}

.illustation-caption-action a:active, .illustation-caption-action a:hover {
    font-weight:600;   
    text-decoration: none;
    float:right;
    color:var(--color-hrds-blue);
    padding:.5rem;
    margin-right:3rem;
    font-size: 1.6rem;
    text-shadow:0px 0px 30px var(--color-hrds-white);
}







/* Extra kis képernyők (max 360px) */
@media (max-width: 360px) {
    body{
        font-size:16px;
    }
    .logo-n-main-title-n-menu, main {
        margin-left:auto;
        margin-right:auto;
        max-width:940px;
    }

    .illustration-caption-container {
        max-width:940px;
        margin-left:auto;
        margin-right:auto;
    }

    .illustration img {
        width: 100%; 
        object-fit: cover;
        display: block;
    }

    .illustration {
        width: 100vw; 
        display: block;
        overflow: hidden;
    }
    .illustation-caption-action {
        text-align:center;
    }
    .illustation-caption-action a {
        float:none;
        text-align:center;
        padding:.5rem;
        font-size: 1.6rem;
        text-shadow:0px 0px 10px var(--color-hrds-white);
        margin:0px;
    }
    .illustation-caption-row {
        font-size:1.4rem;
        font-weight:100;   
        float:none;
        padding-left:1rem;
        text-align: center;
    }    

}

/* Kis képernyők (361px - 576px) */
@media (min-width: 361px) and (max-width: 576px) {
    body{
        font-size:16px;
    }
    .logo-n-main-title-n-menu, main {
        margin-left:auto;
        margin-right:auto;
        max-width:940px;
    }

    .illustration-caption-container {
        max-width:940px;
        margin-left:auto;
        margin-right:auto;
    }

    .illustration img {
        width: 200%; 
        height: 200%;
        object-fit: cover;
        object-position: center center;
        display: block;
    }

    .illustation-caption-action {
        text-align:center;
    }
    .illustation-caption-action a {
        float:none;
        text-align:center;
        padding:.5rem;
        font-size: 1.6rem;
        text-shadow:0px 0px 10px var(--color-hrds-white);
        margin:0px;
    }
    .illustation-caption-row {
        font-size:1.4rem;
        font-weight:100;   
        float:none;
        padding-left:1rem;
        text-align: center;
    } 
}

/* Közepes képernyők (577px - 768px) */
@media (min-width: 577px) and (max-width: 768px) {
    body{
        font-size:16px;
    }
    .logo-n-main-title-n-menu, main {
        margin-left:auto;
        margin-right:auto;
        max-width:940px;
    }

    .illustration-caption-container {
        max-width:940px;
        margin-left:auto;
        margin-right:auto;
    }

    .illustration img {
        width: 200%; 
        object-fit: cover;
        display: block;

    }

    .illustation-caption-action {
        text-align:center;
    }
    .illustation-caption-action a {
        float:none;
        text-align:center;
        padding:.5rem;
        font-size: 1.6rem;
        text-shadow:0px 0px 10px var(--color-hrds-white);
        margin:0px;
    }
    .illustation-caption-row {
        font-size:1.4rem;
        font-weight:100;   
        float:none;
        padding-left:1rem;
        text-align: center;
    }    

}

/* Nagyobb táblagépek, kisebb laptopok (769px - 992px) */
@media (min-width: 769px) and (max-width: 992px) {
    body{
        font-size:16px;
    }
    .logo-n-main-title-n-menu, main {
        margin-left:auto;
        margin-right:auto;
        max-width:940px;
    }

    .illustration-caption-container {
        max-width:940px;
        margin-left:auto;
        margin-right:auto;
    }

    .illustration img {
        width: 100vw; /* Viewport teljes szélessége */
        object-fit: cover;
        display: block;
    }

}

/* Asztali gépek (993px - 1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
    body{
        font-size:16px;
    }
    .logo-n-main-title-n-menu, main {
        margin-left:auto;
        margin-right:auto;
        max-width:940px;
    }

    .illustration-caption-container {
        max-width:940px;
        margin-left:auto;
        margin-right:auto;
    }

    .illustration img {
        width: 100vw; /* Viewport teljes szélessége */
        object-fit: cover;
        display: block;
    }

}

/* Nagy kijelzők (1201px - 1600px) */
@media (min-width: 1201px) and (max-width: 1600px) {
    body{
        font-size:16px;
    }
    .logo-n-main-title-n-menu, main {
        margin-left:auto;
        margin-right:auto;
        max-width:1040px;
    }

    .illustration-caption-container {
        max-width:1040px;
        margin-left:auto;
        margin-right:auto;
    }

    .illustration img {
        width: 100vw; /* Viewport teljes szélessége */
        object-fit: cover;
        display: block;
    }

}

/* Extra nagy kijelzők (1601px-tól) */
@media (min-width: 1601px) {
    body{
        font-size:20px;
    }
    .logo-n-main-title-n-menu, main {
        margin-left:auto;
        margin-right:auto;
        max-width:1040px;
    }

    .illustration-caption-container {
        max-width:1040px;
        margin-left:auto;
        margin-right:auto;
    }

    .illustration img {
        width: 100vw; /* Viewport teljes szélessége */
        object-fit: cover;
        display: block;
    }
    
}