.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 8px;
}

@media (min-width: 1200px) {
    .container {
        max-width: 90%;
    }

    .carousel {
        margin-top: -15px
    }

}

@media (min-width: 992px) {

    .navbar-expand-lg>.container,
    .navbar-expand-lg>.container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        max-width: 1600px;
    }

}

/* for deskstop */

@media only screen and (min-width: 991px) {

    .earn-col {
        padding: 0 8px;
        margin: 0 0 1em 0;
        -ms-flex-preferred-size: none !important;
        flex-basis: none !important;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 50%;
    }

    .eu-badges img {
        border: solid #eee 5px;
        border-radius: 50%;
        width: 95px;
        margin: 5px;
    }

    .eu-duet-filter {
        margin-left: -6px;
    }

    .desk-nav-hide {
        display: none;
    }

    .desk-hide {
        display: none;
    }

    .carousel {
        margin-top: -15px;
    }

    .col-sm-1 {
        -ms-flex: 0 0 7%;
        flex: 0 0 7%;
        max-width: 7%;
    }

    .col-sm-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-sm-7 {
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        max-width: 60%;
    }




}

/* for mobile & tablet */

@media only screen and (min-device-width : 360px) and (max-width: 991px) {

    img #profile-photo {
        max-width: 100px;
    }

    .earn-col {
        padding: 0 8px;
        margin: 0 0 1em 0;
        -ms-flex-preferred-size: none !important;
        flex-basis: none !important;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .mob-font-p {
        font-size: 13px;
    }

    .mob-font-h2 {
        font-size: 13px;
        font-weight: 700;
    }

    .mob-font-h1 {
        font-size: 14px;
        font-weight: 700;
    }

    .eu-hide {
        display: none;

    }

    .eu-hide:target {
        background-color: #eee;
        width: 100%;
        display: block;
        animation: target-animate 0.5s ease-in;
        padding-top: 0.5em;
    }

    .eu-badges img {
        border: solid #eee 5px;
        border-radius: 50%;
        width: 65px;
        margin: 5px;
    }

    .col-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 8px;
    }

    .eu-duet-filter {
        margin-left: 3px;
    }

    .carousel {
        margin-top: 0px;
    }

    .mob-nav-hide {
        display: none;
    }

    .mob-hide {
        display: none;
    }

    .eu-right-col {
        width: 100%;
    }

    #eu-user-detail {
        display: hide;
    }

    .eu-container-fluid {
        padding-top: 14px;
    }

    .eu-ease-animation .promo-image {
        display: block;
        animation: animate-sidenav 0.3s ease-in;
    }

    @keyframes animate-sidenav {
        0% {
            opacity: 0.5;
            width: 280px;
        }

        50% {
            opacity: 0.7;
            width: 290px;
        }

        100% {
            opacity: 1;
            width: 300px;
        }
    }



    @keyframes target-animate {
        0% {

            opacity: 0.1;
            margin-top: -10px;
        }

        50% {
            /* padding: 0.5em; */
        }

        100% {
            opacity: 1;
            margin-top: 0px;
            /* padding: 0.7em; */
        }


    }


    .col-sm-3 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-top: 1em;
    }

    .col-sm-7 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-bottom: 1em;
    }

    /* user detail column */


    .col-88pcn {
        width: 88%
    }

    .col-70 {
        width: 70%
    }

    .col-30 {
        width: 29%
    }

    .col-10pcn {
        width: 10%
    }

    .col-100pcn {
        width: 100% !important;
    }





}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    /* interactive css */

    .eu-hide {
        display: none;

    }

    .eu-hide:target {
        background-color: #eee;
        width: 100%;
        display: block;
        animation: target-animate 0.5s ease-in;
        padding-top: 0.5em;
    }

    .eu-hide:target {
        background-color: #eee;
        width: 100%;
        display: block;
        animation: target-animate 0.5s ease-in;
        padding-top: 0.5em;
    }

    .eu-container-fluid {
        padding-top: 14px;
    }


    .mob-nav-hide {
        display: none;
    }


    .col-30 {
        width: 27%
    }

    .col-sm-7 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-bottom: 1em;
    }

    @keyframes target-animate {
        0% {

            opacity: 0.1;
            margin-top: -10px;
        }

        50% {
            /* padding: 0.5em; */
        }

        100% {
            opacity: 1;
            margin-top: 0px;
            /* padding: 0.7em; */
        }


    }
}