/* Kattintásra végbemenő animáció, a navigációs box dobozon */
.intro {
    transition-property: bottom, right, z-index;
    transition-duration: 1.5s;
    transition-timing-function: cubic-bezier(.19,1,.22,1);
}

/* Kattintásra végbemenő animáció, kattintásra a JQuery-vel erre az osztályra vált */
.intro-clicked {
    right: -8px;
    bottom: -8px;
    z-index: 5;
}

/* Kattintásra eltűnik a navigációs link */
.intro-clicked .nav-link {
    display: none;
}

/* Kattintásra előjövő fő tartalom alaphelyzete */
.bemutatkozas {
    z-index: 20;
    height: 100%;
    width: 100%;
    display: none;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 2s;
    transition-timing-function: linear;
}

/* Kattintásra előjövő fő tartalom a kattintás után megjelenik */
.intro-clicked .bemutatkozas {
    display: block;
    opacity: 1;
}

/* A tartalom alapbeállításai: háttérszín, kép, reszponzivitás */
#main-area-intro {
    background-color: #32CBFF;
}

#image-section-intro {
    background-image: url(../images/intro.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
    background-color: #32CBFF;
    height: 100%;
}

@media screen and (max-width: 1023px) {
    
    .intro {
        transition-property: height, z-index;
        transition-duration: 1.5s;
        transition-timing-function: cubic-bezier(.19,1,.22,1);
    }
    
    .intro-clicked {
        height: calc(66.66667% + 8px);
        z-index: 5;
    }
    
}