@media (max-width: 1200px) {
    #loginButton {
        margin-bottom: -35px;
    }
    #mediaElementsRow {
        height: 135px!important;
    }
}

@media (max-width: 768px) {
    .modal {
       top: 2%!important;
    }
}

@media (max-width: 576px) {
    #loginButton {
        margin-bottom: -50px;
    }
    #mediaElementsRow {
        height: 110px!important;
    }
}

#mediaElementsRow {
    height: 200px;
}

#loginButton {
    margin-top: -30px;
    width: 190px;
}

.modal {
   top: 20%;
}

#loginFormContainer {
    margin-bottom: 0px!important;
}

#firstNameInput {
    margin-bottom: 15px;
}

#lastNameInput {
    margin-bottom: 15px;
}

label {
    margin-bottom: 5px;
}

#loginAlertBox {
    margin-bottom: 0px!important;

}

@media (prefers-reduced-motion: reduce) {
    .fade {
       transition: opacity .10s linear!important;
        transition-property: opacity!important;
        transition-duration: 0.10s!important;
        transition-timing-function: linear!important;
        transition-delay: 0s!important;
    }
    
    .fade:not(.show) {
        opacity: 0!important;
    }
    
    .modal.fade .modal-dialog {
    transition: -webkit-transform .3s ease-out!important;
    transition: transform .3s ease-out!important;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out!important;
    -webkit-transform: translate(0,-50px)!important;
    transform: translate(0,-50px)!important;
    }
    
    .modal.show .modal-dialog {
    -webkit-transform: none!important;
    transform: none!important;
    }
}