/* Kattintásra végbemenő animáció, a navigációs box dobozon */
.contact {
    transition-property: top, left, 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 */
.contact-clicked {
    left: -8px;
    top: -8px;
    z-index: 5;
}

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

/* Kattintásra előjövő fő tartalom alaphelyzete */
.kapcsolat {
    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 */
.contact-clicked .kapcsolat {
    display: block;
    opacity: 1;
}

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

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

#nav-section {
    width: 90%;
    margin-top: 17px;
    border-top: 1px solid #000;
    
}

ul {
    padding: 15px;
}

@media screen and (max-width: 768px) {
    
    p {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    
}

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