.nav-hidden{
    animation: nav-hidden .2s normal forwards;
}

.nav-shown{
    animation: nav-shown .8s normal forwards;
}

@keyframes nav-hidden {
    0%{opacity: 100%;}
    100%{opacity: 0; display: none;}
}
@keyframes nav-shown {
    0%{opacity: 0%;display: none;}
    100%{opacity: 100%; display: inline-block;}
}


.header-wrap{
    margin-top: 1.5rem;
    width: 100vw;
    height: 100vh;
    transform: translateY(-6.5vh);
    margin-bottom: -12vh;
}

.video{
    filter: grayscale(50%);
}

.header-title{
    z-index: 9;
    font-size: 9rem;
    color: #fff;
    font-weight: 500;
    letter-spacing: .5rem;
    text-align: center;
    width: 100vw;
    position:absolute;
    top: 15rem;
    text-shadow:
    -2px -2px 0 gold,
    2px -2px 0 gold,
    -2px 2px 0 gold,
    2px 2px 0 gold,  
    -3px 0 0 gold,
    3px 0 0 gold,
    0 3px 0 gold,
    0 -3px 0 gold,
    -1px -1px .7rem goldenrod,
    1px -1px .7rem goldenrod,
    -1px 1px .7rem goldenrod,
    1px 1px .7rem goldenrod,  
    -2px 0 .7rem goldenrod,
    2px 0 .7rem goldenrod,
    0 2px .7rem goldenrod,
    0 -2px .7rem goldenrod;
}

.header-subtitle{
    z-index: 9;
    font-size: 8rem;
    color: #fff;
    font-weight: 400;
    letter-spacing: .5rem;
    text-align: center;
    width: 100vw;
    position:absolute;
    top: 25rem;
    text-shadow:
    -2px -2px 0 gold,
    2px -2px 0 gold,
    -2px 2px 0 gold,
    2px 2px 0 gold,  
    -3px 0 0 gold,
    3px 0 0 gold,
    0 3px 0 gold,
    0 -3px 0 gold,
    -1px -1px .5rem goldenrod,
    1px -1px .5rem goldenrod,
    -1px 1px .5rem goldenrod,
    1px 1px .5rem goldenrod,  
    -2px 0 .5rem goldenrod,
    2px 0 .5rem goldenrod,
    0 2px .5rem goldenrod,
    0 -2px .5rem goldenrod;
}

/* ---------------------   home.html/ blog     ---------------------- */



.blog-wrapper{
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 70%;
    padding: 0 4rem;
}

/* .blog-main-title{
    text-shadow: 
        .2rem .2rem 5rem #5AA9E6,
        .3rem .3rem .5rem #376D49;
    font-size: 4.8rem;
    text-align: center;
    font-weight: 500;
    text-transform: capitalize;
    color: #3D4536;
    width: 100%;
    padding: 1rem;
    margin: 2rem 1rem .4rem 1rem;
    box-sizing: border-box;
} */

.beszamolo{
    background-color: #305F3F;
}

.meghivo{
    background-color: #90B800;
}

.blog-footer{
    color:#115522;
    text-shadow: .1rem .1rem .1rem #fff520;
    font-size: 3.3rem;
    width:100%;
    text-align: center;
    padding: 1rem;
    margin: .4rem 1rem 2rem 1rem;
    box-sizing: border-box;
}

.ossz{
    background: #226622;
    width: max-content;
    padding: .2rem .5rem;
    font-size: 2rem;  
    border-radius: 1rem; 
    color: #fff;
    cursor: pointer;
}


/* owl carousel */

.blog-bg{
    width: 100%;    
    padding: 5rem 0;
}

.owl{
    width: 97%;
    margin: 0 auto;
}

.owl-nav .owl-prev, .owl-nav .owl-next{
    position: absolute;
    width: 4rem;
    height: 4.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem !important;
    background-color: #fff !important;
    opacity: 85% !important;
    color: #000 !important;
    border-radius: 50rem !important;
    box-shadow: .1rem .1rem .2rem #999 !important;
}
.owl-nav .owl-prev{left: -1.5%;}
.owl-nav .owl-next{right: -1.5%;}

.next-icon{
    position: absolute;
    top: 0;
    right: 1.5rem;
}
.prev-icon{
    position: absolute;
    top: 0;
    left: 1.5rem;
}

.element-tovabb{
    opacity: 70%;
    padding: 0 1rem;
    border-radius: 2rem;
    background-color: #22559988;
    margin-bottom: 2rem;
    color: #fff;
    width: max-content;
    bottom: 0;
    text-align: center;
    font-style: italic;
    font-size: 2.7rem;
}

.element-tovabb:hover{
    opacity: 90%;
    cursor: pointer;
    font-style: normal;
}

.element-btn-container{
    display: flex;
    justify-content: center;
}

.owl-nav .owl-prev:hover, .owl-nav .owl-next:hover{
    opacity: 90% !important;
    box-shadow: .2rem .2rem .1rem #777 !important;

}

.element{
    text-align: center;
}
.element-cim{
    border-top: .2rem solid #555;
    color: #DFEBC1;
    padding: 1rem 0;
    font-size: 4rem;
    font-weight: 100;
}
.element-bg-kep{
    width: 100%;
    height: 30rem;
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment:fixed;
}
/* owl carousel */

/* kapcsolodó linkek */

.kap_outer{
    color: #034732;
    font-size: 2rem;
}
.kap{
    display: flex;
    flex-direction: column;
    width: 75%;
    justify-content: center;
    align-items: center;
    margin: 7rem auto;
    padding: 5rem 0;
}
/* .kap_cim{
    text-shadow: .2rem .2rem .1rem #A77A11, .2rem .2rem .5rem #FFC20A;
    margin: 0 0 6rem;
    font-size: 5rem;
    font-weight: 600;
} */
.kap_oldalak{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items:center;
}
.kap_oldal{
    background-color: #4FBA66;
    display: grid;
    width: 40%;
    box-sizing: border-box;
    height: 25rem;
    padding: 5% 0;
    grid-template-columns: 30fr 70fr;
    grid-template-rows: max-content max-content max-content;
    margin: 4rem 0;
}
.oldal_kep{
    width: 10rem;
    height: auto;
    margin: 0 auto;
    grid-area: 1/1/4/2;
}
.oldalcim{
    font-weight: 600;
    padding: 0 0 2rem 1.5rem;
}
.oldalleiras{padding: 0 0 2rem;}

.tov_oldal{
    text-decoration: none;
    color: #034732;
}
.tovabb_o_nyil{
    font-size: 1.6rem;
    transition: all .3s;
}

.tov_oldal:hover .tovabb_o_nyil{
    padding-left: .5rem;
}

/* gallery news */
.gallery{
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 70%;
    padding: 0 4rem;
}

/* .g-main-title{
    text-shadow: 
        .2rem .2rem 5rem #5AA9E6,
        .3rem .3rem .5rem #376D49;
    font-size: 4.8rem;
    text-align: center;
    font-weight: 500;
    text-transform: capitalize;
    color: #3D4536;
    width: 100%;
    padding: 1rem;
    margin: 2rem 1rem .4rem 1rem;
    box-sizing: border-box;
} */
.g-footer{
    color:#115522;
    text-shadow: .1rem .1rem .1rem #fff520;
    font-size: 3.3rem;
    width:100%;
    text-align: center;
    padding: 1rem;
    margin: .4rem 1rem 2rem 1rem;
    box-sizing: border-box;
}
.g-bg{
    width: 100%;    
    padding: 5rem 0;
}
.g-element-tovabb{
    opacity: 70%;
    padding: 0 1rem;
    border-radius: 2rem;
    background-color: #22559988;
    margin-bottom: 2rem;
    color: #fff;
    width: max-content;
    bottom: 0;
    text-align: center;
    font-style: italic;
    font-size: 2.7rem;
}
.g-element-tovabb:hover{
    opacity: 90%;
    cursor: pointer;
    font-style: normal;
}
.g-element-btn-container{
    display: flex;
    justify-content: center;
}
.g-element{
    padding-top: 3rem;
    text-align: center;
    background-color: #4FBA66;
}
.g-element-cim{
    font-size: 4rem;
    color: #3D4536;
    text-shadow: .2rem .2rem .5rem #fff;
    padding: 1rem 0 0 0;
}
.g-element-frissitve{
    color: #3D4536;
    padding: 0 0 1rem 0;
    font-size: 2rem;   
}
.g-element-bg-kep{
    margin: 0 auto;
    background-size:contain;
    width: 90%;
    height: 30rem;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment:fixed;
}


@media (max-width:1900px) {
    .header-wrap{
        margin-top: 1rem;
        transform: translateY(-7vh);
        margin-bottom: -6vh;
    }
}
@media (max-width:1870px) {
    .header-wrap{
        margin-top: 1rem;
        transform: translateY(-7.5vh);
        margin-bottom: -6vh;
    }
}
@media (max-width:1840px) {
    .header-wrap{
        margin-top: 1rem;
        transform: translateY(-8vh);
        margin-bottom: -6vh;
    }
}
@media (max-width:1800px) {
    .header-wrap{
        margin-top: .5rem;
        transform: translateY(-8.5vh);
        margin-bottom: -6vh;
    }
}
@media (max-width:1750px) {
    .header-wrap{
        transform: translateY(-9vh);
        margin-bottom: 0;
        height: max-content;
    }
}
@media (max-width:1730px) {
    .header-wrap{
        margin-top: .5rem;
        transform: translateY(-.4vh);
    }
}
@media (max-width:1200px) {
    .header-title{
        font-size: 8rem;
        top: 10%;
    }
    .header-subtitle{
        font-size: 7rem;
        top: 30%;
    }
    .oldal_kep{
        width: 8rem;
        height: auto;
        margin: 0 auto;
        grid-area: 1/1/4/2;
    }
}
@media (max-width:1100px) {
    .element-cim{
        font-size: 3rem;
    }
    .g-element-cim{
        font-size: 3rem;   
    }
    .element-tovabb{
        font-size: 2.2rem;
    }
    .g-element-tovabb{
        font-size: 2.2rem;
    }
    .owl-nav .owl-prev, .owl-nav .owl-next{
        position: absolute;
        width: 3rem;
        height: 3.5rem;
        top: 60%;
        transform: translateY(-50%);
        font-size: 3.6rem !important;
    }
    .next-icon{
        position: absolute;
        top: -.4rem;
        right: 1.1rem;
    }
    .prev-icon{
        position: absolute;
        top: -.4rem;
        left: 1.1rem;
    }
    .element-bg-kep{
        width: 100%;
        height: 20rem;
        background-size:contain;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment:fixed;
    }
    .g-element-bg-kep{
        margin: 0 auto;
        background-size:contain;
        width: 90%;
        height: 20rem;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment:fixed;
    }
}
@media (max-width:1000px) {
    .header-title{
        font-size: 6rem;
        text-shadow:
            -1px -1px 0 gold,
            1px -1px 0 gold,
            -1px 1px 0 gold,
            1px 1px 0 gold,  
            -2px 0 0 gold,
            2px 0 0 gold,
            0 2px 0 gold,
            0 -2px 0 gold,
            -.5px -.5px .2rem goldenrod,
            .5px -.5px .2rem goldenrod,
            -.5px .5px .2rem goldenrod,
            .5px .5px .2rem goldenrod,  
            -1px 0 .2rem goldenrod,
            1px 0 .2rem goldenrod,
            0 1px .2rem goldenrod,
            0 -1px .2rem goldenrod;
    }
    .header-subtitle{
        font-size: 5rem;
        text-shadow:
            -1px -1px 0 gold,
            1px -1px 0 gold,
            -1px 1px 0 gold,
            1px 1px 0 gold,  
            -2px 0 0 gold,
            2px 0 0 gold,
            0 2px 0 gold,
            0 -2px 0 gold,
            -.5px -.5px .2rem goldenrod,
            .5px -.5px .2rem goldenrod,
            -.5px .5px .2rem goldenrod,
            .5px .5px .2rem goldenrod,  
            -1px 0 .2rem goldenrod,
            1px 0 .2rem goldenrod,
            0 1px .2rem goldenrod,
            0 -1px .2rem goldenrod;
    }
    .kap_oldalak{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items:center;
    }
    .kap_oldal{
        width: 70%;
        height: 20rem;
    }
}

@media (max-width:800px) {
    .element-cim{
        font-size: 2.5rem;
    }
    .element-tovabb{
        font-size: 2rem;
    }
    .g-element-cim{
        font-size: 2.5rem;   
    }
    .g-element-tovabb{
        font-size: 2rem;
    }
    .g-element-frissitve{
        color: #3D4536;
        padding: 0 0 1rem 0;
        font-size: 1.5rem;   
    }
}

@media (max-width:700px) {
    .blog-main-title{
        font-size: 3.8rem;
    }
    .kap_cim{
        font-size: 3.8rem;
    }
    .g-main-title{
        font-size: 3.8rem;
    }
}
@media (max-width:650px) {
    .h-olddal-cím{
        font-size: 3.5rem !important;
    }
    .header-title{
        font-size: 5rem;
    }
    .header-subtitle{
        font-size: 4rem;   
    }
    .blog-footer{
        font-size: 2.8rem;
    }
    .g-footer{
        font-size: 2.8rem;
    }
    .ossz{
        font-size: 1.85rem;
    }
    .blog-wrapper{
        max-width: 60%;
    }
    .gallery{
        max-width: 60%;
    }
    .kap_oldal{
        display: flex;
        width: 70%;
        text-align: center;
        height: 30rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5% 1rem;
    }
    .oldal_kep{
        margin: 0 auto 2rem;
    }
}
@media (max-width:500px) {
    .h-olddal-cím{
        font-size: 2.8rem !important;
    }
    .header-title{
        font-size: 4rem;
    }
    .header-subtitle{
        font-size: 3rem;
        top: 40%;
    }
    .blog-main-title{
        font-size: 3rem;
    }
    .kap_cim{
        font-size: 3rem;
    }
    .g-main-title{
        font-size: 3rem;
    }
}
@media(max-width:400px) {
    .header-title{
        font-size: 3.5rem;
    }
    .header-subtitle{
        font-size: 3rem;
        top: 40%;
    }
}
@media(max-width:350px) {
    .header-title{
        font-size: 3rem;
    }
    .header-subtitle{
        font-size: 2.5rem;
        top: 40%;
    }
}

/* --------------   tag.html    -------------------- */

.tagok-main-container{
    width: 90%;
    margin: 0 auto;
}

.kategoria{
    flex-wrap: wrap;
    row-gap: 1.5rem; 
    column-gap: 1.5rem;
}
.vonal{
    width: 95%;
    border-top: .3rem dashed #113322;
    margin: 0 auto;
}

.csp{
    display: flex;
    margin: 4rem 0;
    justify-content: center;
    align-items: center;
}

.csph{
    display: flex;
    margin: 4rem 0;
    justify-content: space-evenly;
    align-items: center;
}

.rp{
    display: flex;
    margin: 4rem 0;
    justify-content: space-evenly;
    align-items: center;
}

.st{
    display: flex;
    margin: 4rem 0;
    justify-content: space-evenly;
    align-items: center;
}

.ov{
    display: flex;
    margin: 4rem 0;
    justify-content: space-evenly;
    align-items: center;
}

.szemely-kartya{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color:#226622;
    width: max-content;
    height: max-content;
    padding: 3rem 0;
    border: .3rem solid #888;
    border-radius: 4rem;
}

.profilkep{
    border-radius: 50%;
    width: 50%;
    height: auto;
    border: .3rem solid #000;
}
.sz-s-1{
    display: flex;
    align-items: center;
    justify-content: center;
}

.sz-s-2{
    margin: 2rem 0;
    border-radius: 1rem;
    width: 70%;
    text-align: center;
    padding: .2rem;
    color: #113322;
    background-color:#34BFCA;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.nev{
    font-size: 4rem;
    text-transform: capitalize;
    font-weight: 500;
    letter-spacing: .1rem;
}
.rank{
    font-size: 2.3rem;
    font-weight: 400;
    font-style: italic;
    position: relative;
    width: max-content;
}

.sz-s-3{
    background-color: #CCCC99;
    padding: .4rem;
    margin: 0 0 2rem 0;
    color: #666;
    border-radius: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.beosztas{
    font-size: 2.8rem;
    text-transform: capitalize;
    font-weight: 400;
}

.rank-magyarazat{
    opacity: 40%;
    position: absolute;
    display: none;
    font-size: 2rem;
    font-weight: 300;
    width: max-content;
    padding: 0.4rem 0.5rem;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 1rem;
    z-index: 1;
}

.rank:hover .rank-magyarazat{
    display: inline;
}

.rank-magyarazat-cst::before{ content:"cserkésztiszt"; }
.rank-magyarazat-csst::before{ content:"cserkészsegédtiszt"; }
.rank-magyarazat-őv::before{ content:"őrsvezető"; }

.rank-magyarazat-cst{
    right: -11.5rem;
    top:-1rem;
}
.rank-magyarazat-csst{
    right: -16.5rem;
    top:-1rem;
}
.rank-magyarazat-őv{
    right: -9.5rem;
    top:-1rem;
}

.tag-title{
    text-align: center;
    font-size: 5rem;
    padding: 5rem 0 2rem;
    color: #fffb00;
    text-shadow: .3rem .3rem 1.5rem #000;
}

/* @media (max-width:700px) {
    .rank-magyarazat-cst{
        right: -3rem;
        top: 2.8rem;
    }
    .rank-magyarazat-csst{
        right: -2.2rem;
        top: 2.8rem;
    }
    .rank-magyarazat-őv{
        right: -2.2rem;
        top: 2.8rem;
    }
} */
@media (max-width: 700px) {
    .szemely-kartya{
        width: 35rem;
        height: max-content;
        padding: 3rem 0;
        border: .3rem solid #888;
        border-radius: 4rem;
    }
    
    .nev{
        font-size: 3rem;
    }
    .rank{
        font-size: 2.3rem;
    }
    .rank-magyarazat{
        font-size: 1.8rem;
    }
    .rank-magyarazat-cst{
        right: -9.5rem;
        top:-1rem;
    }
    .rank-magyarazat-csst{
        right: -13.5rem;
        top:-1rem;
    }
    .rank-magyarazat-őv{
        right: -7.5rem;
        top:-1rem;
    }
    .beosztas{
        font-size: 2.5rem;
    }
}
@media (max-width:550px) {
    .rank-magyarazat-cst{
        right: -7.5rem;
        top: -2.5rem;
    }
    .rank-magyarazat-csst{
        right: -7.5rem;
        top: -2.5rem;
    }
    .rank-magyarazat-őv{
        right: -6rem;
        top: -2.3rem;
    }
}
@media (max-width:400px) {
    .szemely-kartya{
        width: 30rem;
    }
    
    .nev{
        font-size: 2.5rem;
    }
    .rank{
        font-size: 2rem;
    }
    .rank-magyarazat{
        font-size: 1.4rem;
        letter-spacing: .1rem;
    }
    .rank-magyarazat-cst{
        right: -6rem;
        top: -2.5rem;
    }
    .rank-magyarazat-csst{
        right: -5rem;
        top: -2.5rem;
    }
    .rank-magyarazat-őv{
        right: -6rem;
        top: -2.3rem;
    }
    .beosztas{
        font-size: 2rem;
    }
}

/* esemeny naptar */
.enaptar_kulon_kontener{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.encim{
    width: max-content;
    border-radius: 3rem;
    padding: 1rem 2rem;
    font-size: 5rem;
    font-weight: 600;
    margin-top: 4rem;
    background-color: #11332277;
    color: #fff520;
    text-shadow: .2rem .2rem .1rem #000;
}
.enaptar_kulon{
    width:80%;
    height: 60vh;
    margin: 5rem;
    border: .4rem solid #777;
    box-shadow: .2rem .2rem .3rem #000;
}