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

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

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


/* A tartalom alapbeállításai: háttérszín, kép, reszponzivitás */

/* Fő elemek designja */
#main-area-calculator {
    background-color: #FDD505;
    font-family: Arial Black, Helvetica, sans-serif;
}


#content-section-2-calculator {
    position: absolute;
    width: calc(50% + 8px);
    padding-left: 17px;
    height: auto;
}

/*Megjegyzés szövegek designja */
.notes-1 {
    font-family: Arial, Helvetica, sans-serif;
}

.notes-2 {
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
}


/* Táblázat formázása */

table {
    width: 90%;
    margin: 10px;
    text-align: right;
    font-size: 3rem;
    border-collapse: collapse;
}

td {
    width: 50%;
    padding: 5px;
}

.calculated {
    color: #505050;
}

.last-row {
    border-top: 1px solid black;
    padding-top: 20px;
}


/*Responsive design */

/* Mobiltelefon álló-nézet */
@media screen and (max-width: 400px) {

    .content-section-1 {
        padding-top: 17px;
    }
    
}

@media screen and (max-width: 480px) {

    table {
        font-size: 2rem;
    }

    #content-section-2-calculator {
        padding-top: 0;
    }
    
}

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


    .content-section-1 {
        position: relative;
    } 

    #content-section-2-calculator {
        display: block;
        position: relative;
        width: 100%;
        padding: 17px;
    }

}

/* Nagyképernyő, kétoszlopos megjelenítés */
@media screen and (min-width: 1023px) {
    
    #content-section-2-calculator {
        position: relative;
        padding: 17px;
    }
    
}