/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
    body {
        margin: 0;
        font-size: 1rem !important; /* 14px */
    }
    .container{
        padding: 0px;
    }
    .main-menu{
        display: none !important;
     }

    .menu-responsive{
        display: initial !important;
    }
    .responsive-profile{
        display: block !important;
    }
    .responsive-profile .profile-image{
        border: 1px solid #9dbec3;
        width: 7em;
        border-radius: 65%;
    }
    .main-profile{
        display: none !important;
    }
    .head-title {
        background: #9dbec3 !important;
        color: white !important;
    }

    #base-menu{
        display: none;
    }

    footer{
        display: none;
    }

    .header{
        display: block !important;
    }

    .main-greeting{
        display: none !important;
    }
    .responsive-greeting{
        display: initial !important;
    }
    .slider-box{
        display: none;
    }
    .head-title{

    }

    .p-xs-0{

        padding: 0 !important;
    }

    .responsive-logo.d-none{
        display: initial !important;
    }

    .profile-menu li:hover{
        background: #9dbec3 !important;
    }
    .profile-menu li:hover a{
        background: #9dbec3 !important;
        color: white !important;
    }
    .r-w-100{
        width: 100%!important;
    }
    .text-m-14{
        font-size: 1.4rem !important;
    }

    .top-menu{
        color: #fff;
        text-align: center;
        width: 100%;
        padding: 10px 0 5px 0;
        background: #22444c;
    }

    .top-menu img{
         -webkit-filter: brightness(0) invert(1);
        filter: brightness(0) invert(1);
    }

    .mm-spn li {
        position: relative;
        cursor: pointer;
        direction: rtl;
        text-align: right;
        font-size: 13px;
        width: 95%;
        background-color: #fff;
        padding: 5px 10px;
        display: block;
        border-radius: 5px;
        color: #4d4d4d;
        box-shadow: 0 0 10px rgb(0 0 0 / 20%);
        margin: 5px auto;
        height: 40px;
    }

    .mm-spn li:before {
        content: '';
        display: block;
        position: absolute;
        top: 25px;
        top: calc(var(--mm-spn-item-height)/4);
        left: 25px;
        left: calc(var(--mm-spn-item-height)/2);
        z-index: 0;
        width: 8px;
        height: 8px;
        border-top: 2px solid;
        border-right: 2px solid;
        -webkit-transform: rotate(
                -135deg) translate(0, -50%);
        -ms-transform: rotate(-135deg) translate(0, -50%);
        transform: rotate(
                -135deg) translate(0, -50%);
    }
    .mm-spn li:after {
        content: '';
        display: block;
        margin-left: 20px;
        margin-left: var(--mm-spn-item-indent);
        opacity: .5;
    }

    .mm-spn ul {
        -webkit-overflow-scrolling: touch;
        position: fixed;
        top: 0;
        left: 100%;
        bottom: 0;
        z-index: 2;
        width: 130%;
        padding-right: 30%;
        line-height: 24px;
        line-height: var(--mm-spn-line-height);
        overflow: visible;
        overflow-y: auto;
        background: inherit;
        -webkit-transition: left .3s ease 0s;
        -o-transition: left .3s ease 0s;
        transition: left .3s ease 0s;
        cursor: default;
    }

    .mm-spn {
        width: 100%;
        height: 100%;
        -webkit-tap-highlight-color: transparent;
        -webkit-overflow-scrolling: touch;
        overflow: hidden;
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    .mm-spn--open li{
        text-align: right;
        /* font-size: 2rem; */
        border-bottom: 1px solid;
        /*box-shadow: 1px 1px 1px;*/
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        /*margin-top: 1rem;*/
        /*margin-bottom: 1rem;*/
        position: relative;
        cursor: pointer;
        direction: rtl;
        font-size: 13px;
        width: 95%;
        background-color: #fff;
        padding: 10px 20px 10px 0px;
        border-radius: 5px;
        color: #4d4d4d;
        box-shadow: 0 0 10px rgb(0 0 0 / 20%);
        margin: 5px auto;
        height: 40px;
    }

    .layout-main-section{

        margin-bottom: 12rem;
    }

    a.color_1 svg{
        /* border-right: 1px solid black; */
        padding-right: 10px;
        width: 20px;
    }

    a.color_1{
        display: flex !important;
        flex-direction: row-reverse !important;
    }
}


/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
    /* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
    /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

.close{
    float: left !important;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}