/* 
    ########################
    ########################
            MODAL
    ########################
    ########################
*/

.mymodal {

    height: 100%;
    width: 100%;
    background-color: #000000;
    opacity: 0.8;
    overflow: auto;
    position: fixed;
    z-index: 10000;
    top: 0;
    cursor: pointer;
    animation: fecharmodal 0.5s 1 0s ease;
}

.mymodal.mymodalclose {
    display: none;
    animation: fecharmodal 0.5s 1 0s ease;
}

.mymodal.mymodalopen {
    display: block;
    animation: abrirmodal 0.5s 1 0s ease;
}

.modalbox {
    width: 90%;
    height: 90%;
    background-color: #ffffff;
    border-radius: 10px;
    opacity: 1;
    position: fixed;
    top: 5%;
    z-index: 200000;
    left: 5%;
}

.modalbox.modalboxclose {
    display: none;
    opacity: 0;
}

.modalbox.modalboxopen {
    animation: abrirbox 0.7s 1 0s ease;
    display: block;
}

@keyframes abrirmodal{
    0%{
        opacity: 0.1;
        }
    100%{
        opacity: 0.85;
        }
}

@keyframes fecharmodal{
    0%{
        opacity: 0.85;
        }
    100%{
        opacity: 0.1;
        }
}

@keyframes abrirbox{
    0%{
        transform: translateY(-100%);
        opacity: 0.5;
        }
    100%{
        transform: translateY(0);
        opacity: 1;
        }
}