.motivation-wrap {
    margin: 0 14px 20px;
    width: 300px
}

@media only screen and (min-width: 768px) {
    .motivation-wrap {
        width: 416px;
        margin: 0 20px 40px 30px
    }
}

.motivation-wrap .header{
    margin-bottom: 10px;
    height: unset;
}

.motivation-wrap .text{
    color:#555;
}

.modal-motivation {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none
}

.modal.fade .modal-motivation {
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    -o-transition: transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    -webkit-transform: translate(0, -50px);
    -ms-transform: translate(0, -50px);
    transform: translate(0, -50px)
}

.modal.fade.show {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-motivation {
        -webkit-transition: none;
        -o-transition: none;
        transition: none
    }
}

.modal.show .modal-motivation {
    -webkit-transform: none!important;
    -ms-transform: none!important;
    transform: none!important
}

.modal.modal-static .modal-motivation {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02)
}