@media screen and (max-width: 320px) {
    .button-48 {
        bottom: -218px;
        left: -100%;
    }

    .card-up .content .details {
        padding: 0 5px 0 5px;
    }

    .fix-xs-12 {
        padding: 0;
    }

    .info-phone {
        border: 1px solid #ced4da;
        border-radius: 4px;
        webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }

    .info-phone input {
        border: none;
        outline: none;
        box-shadow: none;
    }

    .update-img-second .img-up-second{
        justify-content: center!important;
        padding: 0!important;
    }

    .imageBox-up-second {
        position: absolute;
        left: 50% !important;
        top: -3% !important;
        transform: translateX(-50%) !important;
        width: 150px;
        height: 190px;
        box-shadow: unset;
    }

    .img-up input {
        height: unset;
        padding: 0;
        font-size: 12px;
    }

    .update-img .img-up {
        padding: 0;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .btn-up {
        text-align: center;
    }

    .form-group .btn {
        font-size: 11px;
    }

    .details h2 {
        font-size: 1.5em!important;
        margin-top: 0;
    }

    .details h2 input {
        width: 100%;
        font-size: 20px;
    }

    .details h2 span input {
        font-size: 16px;
    }

    .wrap .box {
        width: unset;
        height: unset;
    }

    .card {
        width: 280px;
        /*height: 660px;*/
    }

    .card-up {
        width: 280px;
    }

    .content form .logo-wrap {
        margin-top: 0.3em;
    }

    .edit-info .btn,
    .content form .input-box button[type="submit"],
    .content form .links {
        font-size: 12px;
    }

    .content form .input-box input {
        font-size: 15px;
    }

    .info-hs {
        font-size: 12px;
    }

    .card .imageBox {
        width: 180px;
        height: 180px;
    }

    .wrapper {
        padding: 35px 0;
    }

    .card .content .details {
        padding: 0 12px;
    }

    .btn-css {
        padding: 6px;
    }

    .logout h4 a span {
        display: none;
    }

    .logout h4 a i {
        font-size: 20px;
    }

}
@media screen and (min-width: 320px) and (max-width: 374px) {
    .button-48 {
        bottom: -218px;
        left: -100%;
    }

    .info-phone {
        border: 1px solid #ced4da;
        border-radius: 4px;
        webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }

    .info-phone input {
        border: none;
        outline: none;
        box-shadow: none;
    }

    .update-img-second .img-up-second{
        justify-content: center!important;
        padding: 0!important;
    }

    .imageBox-up-second {
        position: absolute;
        left: 50% !important;
        top: -3% !important;
        transform: translateX(-50%) !important;
        width: 150px;
        height: 190px;
        box-shadow: unset;
    }

    .content form .input-box i {
        left: 5px;
        bottom: 40px;
    }

    .img-up input {
        height: unset;
        padding: 0;
        font-size: 12px;
    }

    .update-img .img-up {
        padding: 0;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .btn-up {
        text-align: center;
    }

    .form-group .btn {
        font-size: 11px;
    }

    .details h2 {
        font-size: 1.5em!important;
        margin-top: 0;
    }

    .details h2 input {
        width: 100%;
        font-size: 20px;
    }

    .details h2 span input {
        font-size: 16px;
    }

    .wrap .box {
        width: unset;
        height: unset;
    }

    .card {
        width: 280px;
        height: 670px;
    }

    .card-up {
        width: 280px;
        height: 900px;
    }

    .content form .logo-wrap {
        margin-top: 0.3em;
    }

    .edit-info .btn,
    .content form .input-box button[type="submit"],
    .content form .links {
        font-size: 12px;
    }

    .content form .input-box input {
        font-size: 15px;
    }

    .info-hs {
        font-size: 12px;
    }

    .card .imageBox {
        width: 180px;
        height: 180px;
    }

    .wrapper {
        padding: 35px 0;
    }

    .card .content .details {
        padding: 0 12px;
    }

    .btn-css {
        padding: 6px;
    }

    .logout h4 a span {
        display: none;
    }

    .logout h4 a i {
        font-size: 20px;
    }
}
@media screen and (min-width: 375px) and (max-width: 424px) {
    .button-48 {
        bottom: -210px;
        left: -125%;
        padding: 17px;
        line-height: 0;
        box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    }

    .card-up .content .details {
        padding: 0 5px 0 5px;
    }

    .fix-xs-12 {
        padding: 0;
    }

    .info-phone {
        border: 1px solid #ced4da;
        border-radius: 4px;
        webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }

    .info-phone img {
        width: 9% !important;
    }

    .info-phone input {
        border: none;
        outline: none;
        box-shadow: none;
    }

    .update-img-second .img-up-second{
        justify-content: center!important;
        padding: 0!important;
    }

    .imageBox-up-second {
        position: absolute;
        left: 50% !important;
        top: -3% !important;
        transform: translateX(-50%) !important;
        width: 150px;
        height: 190px;
        box-shadow: unset;
    }

    .content form .input-box i {
        left: 5px;
        bottom: 40px;
    }

    .img-up input {
        width: 18% !important;
        height: unset;
        padding: 0;
        font-size: 12px;
    }

    .update-img .img-up {
        padding: 0;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .btn-up {
        text-align: center;
    }

    .form-group .btn {
        font-size: 11px;
    }

    .details h2 {
        font-size: 2.5rem!important;
        margin-top: 0;
    }

    .details h2 input {
        width: 100%;
        font-size: 20px;
    }

    .details h2 span input {
        font-size: 16px;
    }

    .wrap .box {
        width: 320px;
        height: unset;
    }

    .card {
        width: 320px;
        height: 690px;
    }

    .card-up {
        width: 320px;
        height: 900px;
    }

    .content form .logo-wrap {
        margin-top: 0.3em;
    }

    .edit-info .btn,
    .content form .input-box button[type="submit"],
    .content form .links {
        font-size: 12px;
    }

    .content form .input-box input {
        font-size: 15px;
    }

    .info-hs {
        font-size: 12px;
    }

    .card .imageBox {
        width: 180px;
        height: 180px;
    }

    .wrapper {
        padding: 35px 0;
    }

    .card .content .details {
        padding: 0 12px;
    }

    .btn-css {
        padding: 6px;
    }

    .logout h4 a span {
        display: none;
    }

    .logout h4 a i {
        font-size: 20px;
    }
}
@media screen and (min-width: 413px) and (max-width: 423px) {
    .details h2 {
        font-size: 2.5rem!important;
    }

    .button-48 {
        bottom: -210px;
        left: -128%;
        height: 15px;
        line-height: 0;
        box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    }
}
@media screen and (min-width: 425px) and (max-width: 767px) {
    .button-48 {
        bottom: -208px;
        left: -109%;
        line-height: 0;
        box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    }

    .card-up .content .details {
        padding: 0 5px 0 5px;
    }

    .fix-xs-12 {
        padding: 0;
    }

    .info-phone {
        border: 1px solid #ced4da;
        border-radius: 4px;
        webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }

    .info-phone img {
        width: 8% !important;
    }

    .info-phone input {
        border: none;
        outline: none;
        box-shadow: none;
    }

    .update-img-second .img-up-second{
        justify-content: center!important;
        padding: 0!important;
    }

    .imageBox-up-second {
        position: absolute;
        left: 50% !important;
        top: -3% !important;
        transform: translateX(-50%) !important;
        width: 150px;
        height: 190px;
        box-shadow: unset;
    }

    .content form .input-box i {
        left: 5px;
        bottom: 40px;
    }

    .img-up input {
        width: 16% !important;
        height: unset;
        padding: 0;
        font-size: 14px;
    }

    .update-img .img-up {
        padding: 0;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .btn-up {
        text-align: center;
    }

    .form-group .btn {
        font-size: 11px;
    }

    .details h2 {
        margin-top: 0;
    }

    .details h2 input {
        width: 100%;
        font-size: 20px;
    }

    .details h2 span input {
        font-size: 16px;
    }

    .wrap .box {
        width: 320px;
        height: unset;
    }

    .card {
        width: 380px;
        height: 720px;
    }

    .card-up {
        width: 380px;
        height: 900px;
    }

    .content form .logo-wrap {
        margin-top: 0.3em;
    }

    .edit-info .btn,
    .content form .input-box button[type="submit"],
    .content form .links {
        font-size: 12px;
    }

    .content form .input-box input {
        font-size: 15px;
    }

    .info-hs {
        font-size: 12px;
        padding: 0 10px;
    }

    .card .imageBox {
        width: 180px;
        height: 180px;
    }

    /*.wrapper {*/
    /*    padding: 35px 0;*/
    /*}*/

    .card .content .details {
        padding: 0 12px;
    }

    .btn-css {
        padding: 6px;
    }

    /*.logout h4 a span {*/
    /*    display: none;*/
    /*}*/

    .logout h4 a i {
        font-size: 20px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {

}
@media screen and (min-width: 1024px) and (max-width: 1439px) {

}