.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: 0} 
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: 0} 
    to {opacity: 1}
}

.modal {
    display: none;
    position: fixed;
    user-select: none;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.55);
    animation: fade 0.5s;
}
  
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 20px;
    width: auto;
    max-width: 320px;
    position: relative;
    text-align: center;
}


@media (max-width: 450px) {

    .modal-content {
        top: 100px;
    }
}