﻿@media only screen and (max-width: 319px) {
    * {
        display: none;
    }
}

/* --------------------------------------------------------------*/
/* ------------------ GALAXY PHONES ------------------ */
/* --------------------------------------------------------------*/

/* ----- Galaxy S3 ----- */
/* Portrait and Landscape */
@media screen and (min-width: 320px) and (-webkit-device-pixel-ratio: 2) {
}

@media screen and (min-width: 320px) {
    @font-face {
        font-family: 'source-sans-pro';
        src: url('/Content/Fonts/Source-Sans-Pro/Source-Sans-Pro.otf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    ::-webkit-scrollbar {
        width: 5px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    }

    ::-webkit-scrollbar-track {
        border-radius: 5px;
    }

    ::-webkit-input-placeholder { /* WebKit browsers */
        /*color: #FFF;*/
        opacity: 0.5;
    }

    /*=== Trigger Animation Onload  ===*/
    .animate {
        -webkit-animation-duration: 0.25s;
        animation-duration: 0.25s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    /*==== FADE IN UP ===*/
    @-webkit-keyframes fadeInUp {
        from {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }

        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }

        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }

    .fadeInUp {
        -webkit-animation-name: fadeInUp;
        animation-name: fadeInUp;
    }

    /*=== FADE IN DOWN ===*/
    @-webkit-keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }

        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }

    @keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }

        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }

    .fadeInDown {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
    }

    /*==== FADE OUT DOWN ===*/
    @-webkit-keyframes fadeOutDown {
        from {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        to {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }
    }

    @keyframes fadeOutDown {
        from {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        to {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }
    }

    .fadeOutDown {
        -webkit-animation-name: fadeOutDown;
        animation-name: fadeOutDown;
    }

    /*==== FADE OUT UP ===*/
    @-webkit-keyframes fadeOutUp {
        from {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        to {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }
    }

    @keyframes fadeOutUp {
        from {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        to {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }
    }

    .fadeOutUp {
        -webkit-animation-name: fadeOutUp;
        animation-name: fadeOutUp;
    }

    @-webkit-keyframes label-float-top {
        from {
            top: 0;
            font-size: 1.5em;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        to {
            top: -30px;
            font-size: 0.9em;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes label-float-top {
        from {
            top: 0;
            font-size: 1.5em;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        to {
            top: -30px;
            font-size: 0.9em;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    .label-float-top {
        -webkit-animation-name: label-float-top;
        animation-name: label-float-top;
    }

    @-webkit-keyframes label-float-middle {
        from {
            top: -30px;
            font-size: 0.9em;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        to {
            top: 0;
            font-size: 1.15em;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes label-float-middle {
        from {
            top: -30px;
            font-size: 0.9em;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        to {
            top: 0;
            font-size: 1.15em;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    .label-float-middle {
        -webkit-animation-name: label-float-middle;
        animation-name: label-float-middle;
    }

    @-webkit-keyframes wrapper-float-center {
        from {
            left: -100%;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        to {
            left: 0%;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes wrapper-float-center {
        from {
            left: -100%;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        to {
            left: 0;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    .wrapper-float-center {
        -webkit-animation-name: wrapper-float-center;
        animation-name: wrapper-float-center;
    }

    @-webkit-keyframes wrapper-float-left {
        from {
            left: 0%;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        to {
            left: -100%;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes wrapper-float-left {
        from {
            left: 0%;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        to {
            left: -100%;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    .wrapper-float-left {
        -webkit-animation-name: wrapper-float-left;
        animation-name: wrapper-float-left;
    }

    html, body {
        background-size: cover;
        font: normal 1em source-sans-pro;
        margin: 0;
        padding: 0;
        height: 100%;
    }
    body {
        /*display: none;*/
    }

    h6 {
        font: bold 1em Arial, Sans-Serif;
    }

    h5 {
        font: bold 1.1em Arial, Sans-Serif;
    }

    h4 {
        font: bold 1.2em Arial, Sans-Serif;
    }

    h3 {
        font: bold 1.3em Arial, Sans-Serif;
    }

    h2 {
        font: bold 1.4em Arial, Sans-Serif;
    }

    h1 {
        font: bold 1.5em Arial, Sans-Serif;
    }

    input[type='text'],
    input[type='password'],
    input[type='number'],
    select {
        font: normal 4.5vw source-sans-pro;
        display: block;
        background: transparent;
        border: 1px solid #755775;
        outline: none;
        background-color: #FFF;
        color: #824258;
        /*opacity: 0.5;*/
        border-radius: 5px;
        height: 43px;
    }

        input[type='text'].txt-white,
        input[type='password'].txt-white {
            background-color: transparent;
            border-bottom: 1px solid #304A4F;
            color: #FFF;
        }

    button,
    input[type='button'] {
        display: block;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border-radius: 4px;
        outline: none;
        letter-spacing: 0.8px;
        margin: 0 auto;
        padding: 6px 40px 6px 6px;
        padding-right: 60px;
        font: bold 4.5vw source-sans-pro;
        max-width: 277px;
        width: 100%;
        height: 40px;
        position: relative;
    }

        button > i {
            right: 45px;
            top: 4px;
            font-size: 1.6em;
        }

        button.btn, input.btn {
            transition: all 0.3s ease 0s;
            background-image: none;
            box-shadow: none;
            outline: none;
            position: relative;
            padding: 6px 8px;
            padding-left: 30px !important;
            border-radius: 4px;
        }

        button.btn-success,
        input[type='button'].btn-success {
            border: 1px solid #3E8400;
            background: #5AAc02;
            color: #FFF;
        }

    .dot-success {
        color: #51B9A2;
        border-radius: 50%;
    }

    button.btn-danger,
    input[type='button'].btn-danger {
        border: 1px solid #755775;
        background: #9f4545;
        color: #FFF;
    }

    button.btn-primary,
    input[type='button'].btn-primary {
        border: 1px solid #755775;
        background: -webkit-gradient(linear, 80% 0%, 0% 100%, from(#824258), to(#755775), color-stop(.4, #B96768));
        color: #FFF;
    }

    .dot-danger {
        color: #D9534F;
        border-radius: 50%;
    }

    .dot-warning {
        color: #F0AD4E;
        border-radius: 50%;
    }

    button.btn-info-white,
    input[type='button'].btn-info-white {
        border: 1px solid #FFF;
        background: #EDECF1;
        color: #777B7F;
    }

    input[type='radio'] {
        width: 25px;
        height: 25px;
        display: inline-block;
        border-radius: 50%;
        margin: 8px 0 5px 0px;
        -webkit-appearance: none;
        border: 1px solid #824258;
        outline: none;
        background: #FFF;
        /*-webkit-appearance: none;
        display: inline-block;
        width: 50px;
        height: 50px;
        background: url(../../Images/Icons/POR/ICN_RadioBTN_Inactivo.png) no-repeat 0 0;
        border: none;*/
    }

        input[type="radio"]:before {
            content: '';
            display: block;
            width: 15px;
            height: 15px;
            margin: 4px;
            border-radius: 50%;
        }

        input[type="radio"]:checked:before {
            background: #824258;
        }

    ul {
        list-style: none;
    }

        ul.option-list-header {
            background: -webkit-gradient(linear, 80% 0%, 0% 100%, from(#824258), to(#755775), color-stop(.4, #B96768));
            height: 100%;
            line-height: 40px;
            color: #FFF;
        }

            ul.option-list-header > li {
                opacity: 0.3;
            }

                ul.option-list-header > li.menu-active-option {
                    opacity: 1;
                }

        ul.two-columns {
        }

        ul.three-columns {
        }

        ul.two-columns > li {
            width: 49.5%;
            float: left;
            text-align: center;
            font: normal 4.5vw/45px source-sans-pro
        }

            ul.two-columns > li > i {
                position: absolute;
                line-height: 26px;
                margin-left: -9%;
                background: #FFF;
                width: 25px;
                height: 25px;
                color: #36A3CE;
                border-radius: 50%;
            }

        ul.three-columns > li {
        }

        ul li {
        }

    i.icon-align-left {
        position: absolute;
        line-height: 46px;
        margin-left: -7%;
    }

    label {
        font: normal 1.3em Arial, normal;
    }

    i {        
        position: absolute;
    }

        i.fa {
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
        }

        i.label-icn {
            left: 5px;
            top: 0;
            font-size: 1.6em;
            width: 37px;
            height: 42px;
            line-height: 42px;
            text-align: center;
        }

        i.label-icn-green {
            color: #824258;
        }

    .hide {
        display: none;
    }

    .spacer {
        clear: both;
    }
    h2.no-data-toShow {
        text-align: center;
        padding: 5% 0;
        color: #B96768;
        opacity: 0.5;
    }

    a.loading-gif-circle-trans {
        background: url("/Content/Images/AjaxLoaders/Ajax-Loader_Circle_Transp.gif") no-repeat center center;
        width: 48px;
        height: 48px;
        display: block;
        margin: 0 auto;
        text-indent: -9999px;
        overflow: hidden;
    }
    div.loadingWrapper {
        position: relative;
        padding-top: 120px;
        text-align: center;
    }

        div.loadingWrapper > div.loadingSpinner {
            position: absolute;
            top: 75%;
            left: 50%;
            display: inline-block;
            width: 40px;
            height: 40px;
            margin-top: -20px;
            margin-left: -20px;
            vertical-align: middle;
            border: 2px solid rgba(130, 66, 88, .75);
            border-top-color: rgba(130, 66, 88, .15);
            border-left-color: rgba(130, 66, 88, .15);
            border-radius: 50%;
        }

        div.loadingWrapper > h3.loadingMessage {
            padding-top: 80px;
            padding-left: 5px;
            color: #EBE1E5;
            letter-spacing: 0.8px;
            font: bold 15pt/1 source-sans-pro;
        }

    div.SpinnerAnimation {
        -webkit-animation: z-spinner .8s infinite linear;
        animation: z-spinner .8s infinite linear;
        background-color: transparent;
    }

    @keyframes z-spinner {
        0% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }

        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }

    .center {
        text-align: center;
    }

    label.form-label {
        position: absolute;
        padding-left: 50px;
        opacity: 0.5;
        font: normal 1.15em/34px source-sans-pro;
        color: #777B7F;
    }

    div.padding-wrapper {
        padding: 10px;
    }

    div.form-required-text {
        display: block;
        position: fixed;
        text-align: center;
        font: normal 6vw/30px source-sans-pro;
        color: rgba(159, 69, 69, 0.7);
        background: #FFF;
        width: 80%;
        height: 64px;
        margin: 0 auto;
        left: 10%;
        box-shadow: 1px 1px 3px 1px rgba(237, 85, 100, 0.2);
        border: 1px solid rgba(117, 87, 117, 0.5);
        z-index: 100;
        top: 205px;
    }

        div.form-required-text > i {
            margin-top: 2px;
            margin-left: -10%;
        }

    section.top-header-wrapper {
        overflow-y: auto;
        overflow-x: hidden;
    }

        section.top-header-wrapper > div.header-title-content-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            display: block;
            overflow: hidden;
            background: #FFF;
            box-shadow: 0px 0px 5px -1px rgba(130, 66, 88, 0.5);
            height: 45px;
            width: 100%;
            z-index: 1000000;
        }

            section.top-header-wrapper > div.header-title-content-wrapper > div {
                position: absolute;
            }

                section.top-header-wrapper > div.header-title-content-wrapper > div.header-navicon-wrapper {
                    left: 0;
                    width: 10%;
                    height: 100%;
                }

                    section.top-header-wrapper > div.header-title-content-wrapper > div.header-navicon-wrapper > i,
                    section.top-header-wrapper > div.header-title-content-wrapper > div.header-networkicon-wrapper > i,
                    section.top-header-wrapper > div.header-title-content-wrapper > div.header-locationicon-wrapper > i {
                        font-weight: bold;
                        font-size: 1.3em;
                        line-height: 45px;
                        max-width: 45px;
                        width: 100%;
                        color: #824258;
                    }

                section.top-header-wrapper > div.header-title-content-wrapper > div.header-networkicon-wrapper {
                    right: 0;
                    width: 10%;
                    height: 100%;
                }

                section.top-header-wrapper > div.header-title-content-wrapper > div.header-locationicon-wrapper {
                    right: 10%;
                    width: 10%;
                    height: 100%;
                }
                section.top-header-wrapper > div.header-title-content-wrapper > div.header-appbutton-wrapper {
                    width: 32px;
                    height: 32px;
                    right: 74px;
                    top: 13px;
                    font-size: 5.4vw;
                    z-index: 100000;
                }

                section.top-header-wrapper > div.header-title-content-wrapper > div.header-networkicon-wrapper > i.offline,
                section.top-header-wrapper > div.header-title-content-wrapper > div.header-locationicon-wrapper > i.gpsLightOff {
                    color: #D9534F;
                }

                section.top-header-wrapper > div.header-title-content-wrapper > div.header-networkicon-wrapper > i.online,
                section.top-header-wrapper > div.header-title-content-wrapper > div.header-locationicon-wrapper > i.gpsLightOn {
                    color: #824258;
                }

                section.top-header-wrapper > div.header-title-content-wrapper > div > i {
                    color: #FFF;
                    text-align: center;
                }

            section.top-header-wrapper > div.header-title-content-wrapper > h4 {
                position: absolute;
                float: left;
                left: 12%;
                color: #824258;
                top: 0;
                width: 76%;
                height: 100%;
                line-height: 45px;
                text-align: center;
                font: normal 4.5vw/45px source-sans-pro;
            }

        section.top-header-wrapper > div.logo-background-wrapper {
            text-align: center;
            margin-top: 46px;
            background: -webkit-gradient(linear, 97% 0%, 0% 100%, from(#824258), to(#755775), color-stop(.4, #B96768));
            position: relative;
        }

            section.top-header-wrapper > div.logo-background-wrapper > img {
                width: 50%;
                margin: 0 auto;
                padding: 0;
                -webkit-filter: brightness(500%);
            }

    section.hidden-left-menu-wrapper {
        z-index: 1000001;
        position: fixed;
        left: -50%;
        top: 0;
        background: -webkit-gradient(linear, 80% 0%, 0% 100%, from(#824258), to(#755775), color-stop(.4, #B96768));
        width: 100%;
        height: 100%;
    }

        section.hidden-left-menu-wrapper > div.user-info-wrapper {
            padding: 20px 15px 45px 15px;
            color: #FFF;
            position: relative;
            border-bottom: 1px solid #FFF;
        }

            section.hidden-left-menu-wrapper > div.user-info-wrapper > img {
                border-radius: 50%;
                width: 18%;
                margin: 10px 10px 10px 0;
                border: 1px solid #A4B6B3;
                padding: 1.5px;
                float: left;
                /*-webkit-filter: grayscale(100%);
                filter: grayscale(100%);*/
            }

            section.hidden-left-menu-wrapper > div.user-info-wrapper > h6#user-name {
                margin-top: 10px;
                color: #FFF;
                font-size: 4.5vw;
            }

            section.hidden-left-menu-wrapper > div.user-info-wrapper > span {
                color: #FFF;
                display: block;
                font-size: 4vw;
                margin-top: 5px;
                height: 30px;
            }

                section.hidden-left-menu-wrapper > div.user-info-wrapper > span#user-phone {
                    text-indent: 25px;
                    margin-top: 0px;
                    font-size: 4vw;
                    color: #FFF;
                    height: 30px;
                    line-height: 30px;
                }

                    section.hidden-left-menu-wrapper > div.user-info-wrapper > span#user-phone > i {
                        text-indent: -24px;
                        font-size: 5vw;
                        padding-top: 7px;
                    }

                section.hidden-left-menu-wrapper > div.user-info-wrapper > span#link-singout {
                    position: absolute;
                    top: 75%;
                    width: 66%;
                    height: 36px;
                    margin: 0 auto;
                    text-align: center;
                    text-indent: -40px;
                    line-height: 36px;
                    font-size: 5vw;
                }

                    section.hidden-left-menu-wrapper > div.user-info-wrapper > span#link-singout > i {
                        font-size: 6vw;
                        line-height: 36px;
                    }

            section.hidden-left-menu-wrapper > div.user-info-wrapper > i {
                top: 0;
                max-width: 35px;
                width: 100%;
            }
                /*            section.hidden-left-menu-wrapper > div.user-info-wrapper > span#usr-phone {
                margin-top: 8px;
                font-size: 1.3em;
                position: relative;
            }*/
                section.hidden-left-menu-wrapper > div.user-info-wrapper > i.fa {
                    max-width: 45px;
                    height: 45px;
                    font-weight: bold;
                    font-size: 1.3em;
                    line-height: 45px;
                    text-align: center;
                }
                section.hidden-left-menu-wrapper > div.user-info-wrapper > i.fa-edit {
                    right: 12%;
                }

                section.hidden-left-menu-wrapper > div.user-info-wrapper > i.fa-times-circle {
                    right: 0;                    
                }

        section.hidden-left-menu-wrapper > div.user-options-available-wrapper {
            height: calc(100% - (52vw));
        }

            section.hidden-left-menu-wrapper > div.user-options-available-wrapper > nav {
                height: 100%;
                position: relative;
            }

                section.hidden-left-menu-wrapper > div.user-options-available-wrapper > nav > ul {
                    height: 100%;
                    margin-top: 10%;
                    overflow: auto;
                }

                    section.hidden-left-menu-wrapper > div.user-options-available-wrapper > nav > ul > li {
                        padding: 10px;
                        color: #FFF;
                        opacity: 0.8;
                        font: normal 5vw source-sans-pro;
                        text-indent: 13%;
                        position: relative;
                    }

                        section.hidden-left-menu-wrapper > div.user-options-available-wrapper > nav > ul > li.Menu-IsActive {
                            background: #EAEDF4;
                            opacity: 1;
                            color: #824258;
                        }

                        section.hidden-left-menu-wrapper > div.user-options-available-wrapper > nav > ul > li > i {
                            right: 89%;
                        }

                    section.hidden-left-menu-wrapper > div.user-options-available-wrapper > nav > ul > div {
                        background: #FFF;
                    }

                        section.hidden-left-menu-wrapper > div.user-options-available-wrapper > nav > ul > div > ul {
                            
                        }

                            section.hidden-left-menu-wrapper > div.user-options-available-wrapper > nav > ul > div > ul > li {
                                color: #B96768;
                                padding: 10px;
                                text-indent: 13%;
                            }

                                section.hidden-left-menu-wrapper > div.user-options-available-wrapper > nav > ul > div > ul > li.item-SubMenu-Selected {
                                    background: #9F4545;
                                    color: #FFF;
                                    font-weight: bold;
                                }

                                section.hidden-left-menu-wrapper > div.user-options-available-wrapper > nav > ul > div > ul > li > i {
                                    right: 89%;
                                    line-height: 21px;
                                }

    section#main-content-wrapper {
        /*background: #F2F4F6;*/
        position: relative;
        z-index: 0;
        margin-top: 46px;
        height: 100%;
    }



    /* Custom css Confirm plugin */
    div.jconfirm-title-c {
    }

        div.jconfirm-title-c > span.jconfirm-icon-c {
            width: 24px;
            height: 24px;
        }

        div.jconfirm-title-c > span.jconfirm-title {
            font: bold 5vw source-sans-pro !important;
        }

    div.jconfirm-content {
    }

        div.jconfirm-content > div {
            text-align: center;
        }

            div.jconfirm-content > div > div > label {
                font: normal 4.5vw source-sans-pro;
            }

            div.jconfirm-content > div > div > input {
                font: normal 7.5vw source-sans-pro;
                display: block;
                background: transparent;
                border: 1px solid #EEA236;
                outline: none;
                background-color: #FFF;
                border-radius: 5px;
                width: 30%;
                height: 40px;
                text-align: right;
                margin: 10px auto 10px auto;
                padding: 8px;
            }

    div.jconfirm-buttons {
        width: 100%;
        text-align: right !important;
    }

        div.jconfirm-buttons > button {
            display: inline-block;
            width: 45%;
            text-align: center;
        }

            div.jconfirm-buttons > button > i {
                position: absolute;
                left: -15%;
                font-size: 6vw;
                line-height: 32px;
            }

            div.jconfirm-buttons > button:first-child {
                margin-right: 7% !important;
            }
}

@media screen and (min-width: 461px) {
}

/* Portrait */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
}

/* Landscape */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
}

/* ----------- Galaxy S4, S5 and Note 3 ----------- */

/* Portrait and Landscape */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
}

/* Portrait */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
}

/* Landscape */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
}

/* ----------- Galaxy S6 ----------- */

/* Portrait and Landscape */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
}

/* Portrait */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) {
}

/* Landscape */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) {
}

/* --------------------------------------------------------------*/
/* ------------------ iPhones ------------------ */
/* --------------------------------------------------------------*/

/* ----- iPhone 4 and 4S ----- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
}

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
}

/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
}

/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
}

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
}
