@media all and (min-width: 240px) and (max-width: 980px) {

    

    /* RESPONSIVE NAV WRAPPER */


    #rc-imageselect, .g-recaptcha {
        transform: scale(0.82);
        -webkit-transform: scale(0.82);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        height: 76px;
    }

    .picturenew {
        display: none;
    }


    #recaptcha_image {
        width: 108px !important;
    }

    #recaptcha_challenge_image {
        width: 100% !important;
    }

    #recaptcha_response_field {
        width: 114px !important;
    }

    #recaptcha_logo {
        width: 57px !important;
    }

    .recaptcha_only_if_privacy {
        float: right;
        text-align: right;
        margin-right: 0px !important;
    }


    .pdfloader {
        padding: 6px;
        float: left;
    }



    .responsive-nav-wrapper-parent {
        position: fixed;
        top: 0px;
        z-index: 10000;
    }

    .responsive-nav-wrapper {
        position: relative;
        text-align: center;
        font-size: 0;
        margin: auto;
        background: none repeat scroll 0 0 #000;
        padding: 5px;
    }

    .master-header-wrapper {
        padding: 0px;
        margin-top: 0px;
    }

    .header-links {
        display: none;
    }

    .stick {
        position: fixed;
        top: 0;
        left: 0;
    }

    .responsive-nav-wrapper:after {
        content: ".";
        display: block;
        visibility: hidden;
        clear: both;
        height: 0;
        line-height: 0;
        font-size: 0;
    }

    .responsive-nav-wrapper > div > span {
        display: block;
        text-transform: capitalize;
        overflow: hidden;
        cursor: pointer;
        color: #FFFFFF;
        font-size: 22px;
        text-shadow: 0 1px 1px #454545;
        padding: 11px 20px 10px 50px;
    }

    .responsive-nav-wrapper.stick {
        width: 100%;
    }

    .responsive-nav-wrapper .menu-title {
        display: inline-block;
        background: url("../images/menu_icon.png");
        background-repeat: no-repeat;
        background-position: 2px center;
    }

    .responsive-nav-wrapper .search-wrap {
        display: inline-block;
        background: url(../images/search_icon.png);
        background-repeat: no-repeat;
        background-position: 5px center;
    }

    .responsive-nav-wrapper .filters-button {
        display: none;
        background: url(../images/filter_icon.png);
        background-repeat: no-repeat;
        background-position: 5px center;
    }


    /* RESPONSIVE MENU */


    .claim-header-links {
        display: none;
    }

    .claim-details-sort {
        width: 100%;
        float: left;
        text-align:left;
    }

    .claim-status-legend {
        width: 100%;
        float: left;
        display: block;
    }

    .overlayOffCanvas {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        z-index: 1000000;
    }

    /*remove folowing styles*/


    .radio-data input {
        width: 40px !important;
        white-space: nowrap;
    }

    .inputs {
        text-align: left;
    }

    .dvInvoicePO, .dvInvoiceNum, .dvDate, .dvUpload, .dvCompany, .dvContactP, .dvPhone, .dvRefNo, .dvCid {
        float: left;
        width: 90%;
        margin: 10px;
    }

    .plus-button {
        position: relative;
        float: right;
        width: 50px;
        height: 50px;
        z-index: 2;
        cursor: pointer;
        background: url("../images/arrow_pager.png");
        background-position: center;
        background-repeat: no-repeat;
    }


    .product-grid.home-page-product-grid .title {
        font-size: 24px;
        font-weight: 700;
        line-height: 28px;
        text-align: left;
        padding-left: 10px;
        color: #000 !important;
    }


    /* header menu functionality classes */

    .admin-header-links,
    .header,
    .responsive-nav-wrapper,
    .slider-wrapper,
    .master-wrapper-content,
    .footer {
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

    .move-right {
        -webkit-transform: translate(320px);
        -moz-transform: translate(320px);
        -ms-transform: translate(320px);
        transform: translate(320px);
    }

 

    .public-item {
        padding: 20px;
    }



    .public-item img {
        margin-bottom: 15px;
    }

    .vendor-grid .vendor-item {
        width: 100%;
        overflow: hidden;
        float: left;
        margin-bottom: 0px;
    }

        .vendor-grid .vendor-item .vendor-item-top {
            /*min-height: 160px;*/
            margin: auto;
        }

    .picture img {
        width: 100%;
        margin-bottom: 15px;
    }

    .education-list-img {
        width: 100%;
    }

    .education-list-description {
        font-weight: 400;
        font-size: 16px;
        color: #666666;
        line-height: 20px;
        text-align: left;
    }

    .education-description-title {
        font-weight: 700;
        font-size: 18px;
        color: #000;
        margin-bottom: 5px;
    }

    .education-details-left {
        margin-bottom: 20px;
    }

    #gotocourses {
        border-radius: 4px;
        color: white;
        padding: 12px 20px;
        background: #0096D6;
        border: 0px;
        font-size: 16px;
        font-weight: 400;
        width: 100%;
        text-transform: capitalize;
        text-align: center;
    }

    #myCoursesBtn a {
        border-radius: 4px;
        font-weight: 400;
        font-size: 14px;
        padding: 15px 20px;
        width: 100%;
        background: #FF9600;
        color: #FFF !important;
        margin: auto;
        text-transform: capitalize;
        text-align: center;
        display: inline-block;
    }

        #myCoursesBtn a:hover {
            background: #212C3A;
            text-decoration: none;
        }


    /*PUBLIC PAGE*/


    .public-landing-banner {
        padding: 30px;
        background: #419BB3;
        background-image: url(../images/bluecarpet-AR-header-2000x660.jpg);
        background-position: center top;
        min-height: 400px;
        overflow: auto;
    }

    .public-landing-cta h1 {
        font-size: 10vw;
        
        line-height: 12vw;
        color: #000;
        margin: 50px 0 20px 0;
        text-align: center;
    }

    .public-landing-cta h2 {
        font-size: 18px;
        
        font-weight: 300;
        line-height: 26px;
        color: #000 !important;
        margin-bottom: 20px;
        padding-left: 0px;
        text-align: center;
        text-transform: none;
    }

    .public-landing-login {
        background: #767676;
        border: 1px solid #767676;
        font-size: 16px;
        
        color: #FFF;
        text-align: center;
        padding: 15px 20px;
        min-width: 100%;
        float: left;
        margin: 10px 0px;
        border-radius: 4px;
    }

    .public-landing-register {
        background: #0096D6;
        border: 1px solid #0096D6;
        font-size: 16px;
        
        color: #FFF;
        text-align: center;
        padding: 15px 20px;
        min-width: 100%;
        float: left;
        margin: 10px 0px;
        border-radius: 4px;
    }

        .public-landing-login:hover, .public-landing-register:hover {
            background: #FFF;
            border: 1px solid #007DBA;
            color: #007DBA;
            font-size: 16px;
            font-weight: 400;
            color: #000;
            text-align: center;
            padding: 15px 20px;
            text-decoration: none;
        }

    .public-message {
        padding: 20px;
        margin-top: 0px;
    }

        .public-message h1 {
            font-size: 28px;
            font-weight: 300;
            color: #000;
            line-height: 36px;
            text-align: center;
        }

        .public-message img {
            width: 100%;
            margin: 40px 0px;
        }

    .public-contact-link {
        display: none;
    }

    .public-header {
        text-align: center;
        margin: 20px 0px;
        width: 100%;
    }

    .public-header-logo {
        background: url("/Themes/HPI/Content/images/logo_mobile.png") no-repeat;
        background-size: 250px 97px;
        background-position: center;
        display: block;
        width: 100%;
        height: 97px;
    }

    .public-item p, .public-message p {
        text-align: center;
    }

    .login-page, .registration-page, .password-recovery-page {
        background-image: none;
        background-color: #FFF;
        padding: 0px;
        overflow: auto;
    }

        .login-page .inputs.reversed > * {
            width: auto;
            margin: 0 5px;
            vertical-align: middle;
            font-size: 15px;
        }


    .public-landing-section2-holder {
        max-width: 980px;
        margin: auto;
    }

    .public-landing-section2 {
        padding: 30px;
        /*background-image: url(../images/bluecarpet-AR-subheader-2000x520.jpg);
background-position: left top;
background-repeat: no-repeat;*/
        background-color: #E5E8E8;
        display: block;
        overflow: auto;
        min-height: 400px;
    }

    .public-landing-section2-left, .public-landing-section2-right {
        width: 100%;
        padding: 0px;
        float: left;
        display: block;
    }

        .public-landing-section2-left h1 {
            color: #000;
            font-size: 28px;
            font-weight: 300;
            line-height: 36px;
            text-align: center;
            padding: 0px;
        }

        .public-landing-section2-left p, .public-landing-section2-right p {
            color: #000;
            text-align: center;
            margin-bottom: 0px;
        }

        .public-landing-section2-right img {
            width: 100%;
        }

    /***** RECOGNITION STYLES *****/

    .recognition-left-nav {
        display: none;
    }

    .recognition-right-nav {
        display: none;
    }

    .recognition-navs-collapsed {
        display: none;
    }

        .recognition-navs-collapsed a:link {
            float: left;
            background-color: #CFE2E2;
            width: 40%;
            font-size: 14px;
            padding: 5px;
            border-radius: 4px;
            margin: 5px;
            height: 50px;
            text-align: center;
            line-height: 40px;
            position: relative;
            left: 30px;
            display: none;
        }

        .recognition-navs-collapsed a:active {
        }

        .recognition-navs-collapsed a:visited {
        }

        .recognition-navs-collapsed a:hover {
            background-color: #A7B7B7;
            color: white;
            text-decoration: none;
        }

    .recognition-message-read {
        float: left;
        width: 100%;
        text-align: -webkit-center;
        margin: 0px;
        padding: 20px;
        background: #EEE;
        border-radius: 4px;
        text-align: center;
    }

    .recoginition-attribute {
        padding: 8px;
        color: #333;
        font-size: 10px;
        font-weight: 400;
        background: #EEE;
        border: 1px solid #CCC;
        margin: 5px 5px 5px 0;
        float: left;
        border-radius: 4px;
    }

    .recognition-message-type {
        background-color: #0096D6;
        font-size: 14px;
        font-weight: 700;
        color: white;
        width: 60px;
        display: inline-block;
        padding: 20px;
        text-align: center;
        border-radius: 100%;
        margin: 10px;
    }

    .recognition-message-type-small {
        display: none;
    }


    .recognition-message-type-badge {
        background-color: #FF9600;
        font-size: 12px;
        font-weight: 600;
        color: white;
        display: inline-block;
        padding: 15px;
        text-align: center;
        margin-right: 10px;
        margin-bottom: 5px;
        float: left;
    }

    .recognition-message-type:hover {
        background-color: #D7410B;
        cursor: pointer;
    }


    .recognition-message-item {
        border: 1px solid #CCC;
        padding: 20px;
        width: 100%;
        background: #FFF;
    }

    .recognition-message {
        margin-bottom: 10px;
        overflow: auto;
        font-size: 13px;
        line-height: 16px;
    }

    .message-badge img {
        width: 20%;
        float: left;
        display: inline-block;
        margin-right: 5px;
    }

    .commentBox {
        background-color: #CFE2E2;
        /*height: 65px;*/
        /*padding-left: 10px;*/
        border-radius: 4px;
    }

    .comment-names {
        font-size: 14px;
        font-weight: 600;
        color: #000;
        margin-bottom: 4px;
    }

    .comment-date {
        font-size: 12px;
        color: #999;
    }

    #taComment {
        width: 100%;
        min-height: 25px;
        margin-top: 0px;
        padding: 8px;
    }

    #commentsubmit {
        padding: 15px;
        border-radius: 4px;
        border: none;
        background-color: #212C3A;
        color: white;
        font-weight: 600;
        width: 100%;
        font-size: 12px;
        margin-top: 10px;
    }


    .CommentTitle {
        font-size: 14px;
        font-weight: 700;
        line-height: 28px;
        text-transform: capitalize;
        margin-bottom: 10px;
        color: #333;
    }

    .redbox {
        background-color: green !important;
        color: white !important;
    }

    .checkbox {
        padding: 8px;
        color: #333;
        font-size: 12px;
        font-weight: 400;
        background: #FFF;
        border: 1px solid #CCC;
        /*margin: 5px 5px 5px 0;
float: left;*/
        border-radius: 4px;
        display: inherit;
        text-transform: capitalize;
    }

        .checkbox:hover {
            cursor: pointer;
        }


    #cancelmessage {
        padding: 10px 18px;
        border-radius: 4px;
        border: none;
        background-color: #B9B8BB;
        color: white;
        margin-right: 5px;
        font-weight: 600;
        display: inline-block;
        font-size: 11px;
    }

    #submitmessage {
        padding: 10px 18px;
        border-radius: 4px;
        border: none;
        background-color: #008424;
        color: white;
        font-weight: 600;
        display: inline-block;
        font-size: 11px;
    }

    #Message {
        width: 100%;
        /*min-height:50px;*/
        text-wrap: normal;
        vertical-align: text-top !important;
    }

    #CustomerId {
        width: 100%;
    }

    #Points {
        padding: 8px;
        border-radius: 4px;
        border: 1px solid #afafaf;
    }

    .recognition-badge-holder, .recognition-attribute-holder {
        margin-top: 10px;
    }

    #recognitionType {
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        color: white;
        padding: 20px 0 0 0;
        border-radius: 4px 4px 0 0;
    }

    .reg_type_heading {
        background: #767676;
        padding: 10px;
        border-radius: 0 0 4px 4px;
    }

    .messageHidden {
        display: none;
    }

    .messageShow {
        display: block;
    }

    .wallDim {
        display: none;
    }

    .wallShow {
        display: block;
    }

    .product-info-holder {
        float: left;
        width: 100%;
    }

    .product-modal-img {
        width: 100%;
        text-align: center;
        float: left;
    }

        .product-modal-img img {
            width: 100%;
        }

    .product-modal-text {
        width: 100%;
        text-align: left;
        float: left;
    }

    .product-modal-text-no-img {
        max-width: 100%;
        text-align: left;
        float: left;
        overflow: auto;
    }

    .product-more-details a {
        border-radius: 4px;
        font-weight: 700;
        font-size: 14px;
        padding: 10px 15px;
        background: #767676;
        color: #FFF !important;
        display: block;
        text-transform: capitalize;
        text-align: center;
        margin-top: 20px;
    }

        .product-more-details a:hover {
            background: #0096D6;
            text-decoration: none;
        }

    .product-list-points {
        font-weight: 700;
        font-size: 20px;
        /*margin: 5px 0px 5px 0px;*/
        text-align: left;
        text-transform: capitalize;
        color: black;
    }

    .product-list-sku {
        font-weight: 700;
        color: #666;
        font-size: 16px;
        line-height: 25px;
        margin-bottom: 5px;
        text-align: left;
        text-transform: capitalize;
    }

    .product-list-title a:link {
        font-weight: 400;
        font-size: 16px;
        color: #00A8FF !important;
        line-height: 20px;
        margin-bottom: 2px;
        text-align: left !important;
        text-transform: capitalize;
        float: left;
        width: 100%;
    }

    .product-list-title a:visited {
        color: #00A8FF !important;
    }

    .product-list-title a:hover {
        color: #0164a2 !important;
        text-decoration: none;
    }

    .product-list-title a:active {
        color: #666 !important;
    }

    .product-list-download a {
        border-radius: 0px;
        font-weight: 400;
        font-size: 14px;
        padding: 10px 15px;
        background: #FF9600;
        color: #FFF !important;
        display: block;
        text-transform: capitalize;
        text-align: center;
        width: 95%;
        margin: auto;
        display: none;
    }

        .product-list-download a:hover {
            background: #008fd9;
            color: #FFF !important;
            text-decoration: none;
        }

    .product-list-vendor-link {
        font-weight: 500;
        color: #003b64 !important;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 25px;
        text-align: left;
        display: none;
    }

    .product-essential .product-list-date {
        padding: 10px;
        margin-bottom: 10px;
        width: 100%;
        float: left;
        font-size: 14px;
        display: block;
    }

    .full-description {
        margin: 0px 0;
        text-align: left;
        font-size: 16px;
        line-height: 20px;
        color: #666;
        padding: 10px;
        float: left;
    }

    .textdescription {
        width: 100%;
    }

    .imageadjust {
        width: 600px;
    }

    .blocktitlenew {
        width: 100%;
    }

    .searchBoxresultListLeft {
        float: left;
        max-height: 400px;
        /*border-style: solid;*/
        width: 100%;
        padding: 10px;
        border-style: solid;
        border-collapse: collapse;
        border-width: 0px;
    }

    .searchBoxresultListRight {
        overflow-x: auto;
        display: inline-block;
        float: left;
        text-align: left;
        width: 100%;
        padding: 10px;
        margin: 0px;
        border-style: solid;
        border-collapse: collapse;
        border-width: 0px;
        border-color: #589442;
    }

    .claim-summarybox-invoice {
        float: left;
        width: 100%;
        margin-right: 10px;
    }

    .claim-summarybox-date {
        text-align: left;
    }

    .claim-mini-shopping-cart .count {
        color: #000;
        font-size: 12px;
    }

    .claim-mini-shopping-cart a {
        color: #F00;
        margin-top: 5px;
        font-size: 12px;
    }

    .claim-mini-shopping-cart .totals {
        margin: 20px 10px 20px;
        font-size: 18px;
        text-align: right;
        color: #000;
    }

        .claim-mini-shopping-cart .totals strong {
            color: #000;
            font-size: 18px;
            padding: 0 0 0 3px;
            font-weight: 700;
        }

    .claim-mini-shopping-cart .item {
        border-bottom: 1px solid #ccc;
        overflow: hidden;
        /*padding: 15px;*/
        /*height:100px;*/
        position: relative;
    }

    .order-progress li {
        display: inline-block;
        margin: 0 5px;
        width: 45px;
        min-height: 60px;
    }

    .page-title h1 {
        font-size: 36px;
        float: left;
        margin: 0;
        text-align: left;
        width: 100%;
        /*padding:10px;*/
        text-transform: capitalize;
    }

    .page-title h2 {
        font-size: 30px;
        float: left;
        margin: 0;
        text-align: left;
        width: 100%;
        text-transform: capitalize;
    }

    .fieldset, .section {
        text-align: center;
        margin: 0 10px;
    }

    /***** SPIN THE WHEEL *****/

    /* Sets the background image for the wheel */
    td.the_wheel {
        /*background-image: url(/Themes/HPI_US/Content/images/wheel_back.png);*/
        background-position: center;
        background-repeat: no-repeat;
        z-index: 999;
        position: relative;
    }

    /* Do some css reset on selected elements */

    div.power_controls {
        padding: 30px;
        width: 100%;
        overflow:auto;
    }

    div.html5_logo {
        margin-left: 70px;
    }

    /* Styles for the power selection controls */
    table.power {
        background-color: #cccccc;
        cursor: pointer;
        border: 1px solid #333333;
    }

        table.power th {
            background-color: white;
            cursor: default;
        }

    td.pw1 {
        background-color: #6fe8f0;
    }

    td.pw2 {
        background-color: #86ef6f;
    }

    td.pw3 {
        background-color: #ef6f6f;
    }

    /* Style applied to the spin button once a power has been selected */
    .clickable {
        cursor: pointer;
    }

    /* Other misc styles */
    .margin_bottom {
        margin-bottom: 5px;
    }

    p.noCanvasMsg {
        color: white;
    }

    .the_canvas {
        width: 250px;
        height: 250px;
        position: relative;
        background: #EEE;
        border-radius: 100%;
        box-shadow: 5px 5px 15px #666;
        /*margin-top: 35px;*/
    }

    .wheel-holder {
        background-image: url(/Themes/Curiocity/Content/images/spin-to-win-bg.png);
        background-size: cover;
        overflow: auto;
        width: 100%;
    }

    .the_wheel {
        width: 100%;
    }

    .needle {
        position: relative;
        background-image: url(/Themes/Curiocity/Content/images/needle.png);
        background-repeat: no-repeat;
        background-size: 50px 63px;
        width: 50px;
        height: 63px;
        color: #000;
        z-index: 999;
        top: 150px;
        left: 1px;
    }

    .spin_button {
        padding: 10px;
        width: 100%;
        height: 50px;
        border-radius: 4px;
        border: 1px solid #0096D6;
        background: #FFF;
        color: #0096D6;
        font-size: 18px;
        margin-top: 20px;
    }

        .spin_button:hover {
            border: 1px solid #0096D6;
            background: #0096D6;
            color: #FFF;
        }

        .spin_button:disabled {
            border: 1px solid #E5E8E8;
            background: #E5E8E8;
            color: #B9B8BB;
        }

    .view-history {
        border: 1px solid #757678;
        color: #757678;
    }

        .view-history:hover {
            border: 1px solid #757678;
            background: #757678;
            color: #FFF;
        }


    #dvContentBlock {
        width: 100%;
    }

        #dvContentBlock p {
            color: #767676;
            font-size: 16px;
        }

    #dvPopUpbox h1 {
        font-size: 28px;
       
        color: #000;
        text-align: center;
        padding: 20px 20px 10px;
    }

    #dvPopUpbox h2 {
        font-size: 20px;
       
        color: #000;
        text-align: center;
        padding: 0px;
        margin-bottom: 0px;
        padding: 10px 20px 20px;
    }


    .e-gift-card-container {
        margin-top: 20px;
        width: 100%;
        clear: both;
        float: left;
        margin-bottom: 40px;
    }

    .e-gift-card-container-left {
        width: 100%;
        float: left;
        margin-bottom:20px;
    }

        .e-gift-card-container-left img {
            width: 80%;
            margin:auto;
            display:block;
        }


    .e-gift-card-container-right {
        float: left;
        width: 100%;
    }

        .e-gift-card-container-right img {
            width: 75%;
            padding-left: 0px;
            display: block;
            margin: auto;
            margin-bottom: 30px;
        }

        .e-gift-card-container-right h2 {
            font-size: 26px;
            text-transform: capitalize;
        }

    .e-gift-card-holder {
        /*width: 80%;*/
        overflow:auto;
        display: block;
        margin: auto;
        /*margin-left:40px;
        height:140px;
        border-style:ridge;
        border-width:1px;*/
    }

    #RewardCarList li {
        border-style: none;
        border: 2px solid #CCC;
        border-radius: 4px;
        width: 75px;
        /*height:45px;*/
        padding: 1px;
        float: left;
        margin: 3px;
    }

        #RewardCarList li img {
            width: 100%;
        }

        #RewardCarList li:hover {
            cursor: pointer;
            border: 2px solid #0096D6;
        }


    .e-gift-card-container-right #cardDescription, .e-gift-card-container-left #cardDescription, .e-gift-card-container-right .cardTerms{
        font-size: 14px;
        color: #767676;
        margin-bottom:20px;
    }

        .e-gift-card-container-right #cardDescription a, .e-gift-card-container-left #cardDescription a, .e-gift-card-container-right .cardTerms a {
            color: #0096D6;
        }



 /****** EDUCATION ******/

    /*.training-breadcrumb {
        padding-left: 10px;
    }*/

    .training-breadcrumb a:hover {
        color: #0096D6;
    }

    .training-course {
        border: 1px solid #C6C9CA;
        border-radius: 4px;
        background: #FFF;
        padding: 0px;
        margin: 0px 0px 20px;
        height: 250px;
        width: 100%;
        position: relative;
    }

        .training-course.available:hover {
            border: 1px solid #34343C;
            background: #F5F5F5;
            cursor: pointer;
        }

        .training-course img {
            width: 100%;
            padding-bottom:15px;
        }

        .training-course h1 {
            padding:15px 15px 0 15px;
            font-size:17px;
            color:#000;
            text-align:left;
            width:100%;
            line-height:21px;
            text-transform:none;
        }

        .training-course p {
            text-align: left;
            font-size: 16px;
            color: #000;
            padding: 0px 15px;
            text-transform: capitalize;
        }

        .training-course .mini-bar .progress .complete {
            background-color: #21CCD1;
        }

    .training-course-points-total {
        font-size: 14px;
        text-align: left;
        color: #0096D6;
        padding-bottom: 3px;
        
    }

    .training-course-task-total {
        text-align: left;
        font-size: 14px;
        width:50%;
        float:left;
    }












    /*********** GAME ENGINE ***********/

    .languageselector {
        float: right;
        width: 100%;
        vertical-align: middle;
        background-image: url(../images/hp-supplies-logo.png);
        background-position: center right;
        background-repeat: no-repeat;
        background-size: 134px 45px;
        height: 50px;
    }

    .game-top .info-i, .game-top .info-i-ep {
        border-color: #FFF;
        color: #FFF;
    }

    .info-i, .info-i-ep {
        border-color: #0096D6;
    }


    .game-top, .leaderboard-highlight {
        padding: 40px 20px 20px 20px;
        background: #0096D6;
        border-radius: 4px;
        color: #FFF;
        margin-bottom: 40px;
        background-image: url(../images/ecology_background.png);
        background-position: bottom right;
        background-repeat: no-repeat;
        overflow:auto;
    }

        .game-top .progressLevel .page-title h2 {
            color: #FFF !important;
            padding: 0px;
        }

    .leaderboard-highlight {
        padding: 25px;
        background-position: bottom right;
        overflow: auto;
    }
    
    .forced-scroll {
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        display: flex !important;
        width: auto;
    }

    /*#SubmitEntry {
        border-radius: 4px !important;
        background-color: #FFF !important;
        color: #0096D6 !important;
        border: 1px solid #0096D6 !important;
    }

        #SubmitEntry:hover {
            color: #FFF !important;
            border: 1px solid #0096D6 !important;
            background-color: #0096D6 !important;
            opacity: 1;
        }*/

    .leaderboardTables-left, .leaderboardTables-right {
        width: 100%;
        float: left;
        overflow: auto;
        padding: 10px 0px;
    }

    .buttons-holder {
        clear: both;
        margin: 20px 0px;
        border-top: 1px solid #CCC;
        padding: 20px 0px;
        float: left;
        width: 100%;
    }

    .border-divide {
        border: 0px;
        text-align: center;
        width: 100%;
        float: left;
    }

    .dash-top {
        display: table;
        width: 100%;
    }

        .dash-top img {
            width: 100px;
            height: 100px;
            border-radius: 100%;
            border: 2px solid #0096D6;
            margin: auto;
            display: block;
            float: none;
        }

        .dash-top img, .dash-top div {
            display: table-cell;
        }

        .dash-top div {
            padding: 15px;
            width: 100%;
        }

            .dash-top div h3,
            .border-divide h3 {
                margin: 0px;
                color: #FFF;
                font-size: 18px;
                padding: 0px;
                text-align: center;
                width: 100%;
            }

            .dash-top div h4,
            .border-divide h4 {
                color:#FFF;
                margin: 0px;
                font-size: 16px;
                padding-left: 0px;
                width: 100%;
                text-align: center;
            }

    .continue-mission {
        
        margin: auto;
        float: none;
        width: auto;
        color: #FFF;
        background-color: rgba(255,255,255, 0.3);
    }


        .continue-mission:hover {
            color: #105AA2;
            background-color: rgba(255,255,255, 1);
        }


    .info-i, .info-i-ep {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-left: 5px;
        background: transparent;
        border: 2px solid #0096D6;
        border-radius: 100%;
        font-size: 12px;
        text-align: center;
        vertical-align: top;
        line-height: 17px;
    }


    .see-missions, .see-leaderboard {
        float: right;
        margin-top: 20px;
        border: none;
        font-size: 18px;
        color: #0096D6;
    }

        .see-missions:hover, .see-leaderboard:hover {
            border: none;
            color: #0096D6;
        }


    .row-fluid {
        float: left;
        width: 100%;
        display: block;
    }

        .row-fluid .col-md-2 {
            display: inline-block;
        }

        .row-fluid h2 {
            padding: 0;
            margin: 0;
            margin-bottom: 15px;
        }

    .gs .mini-bar, .gs .mission-counter {
        color: #ACACAE;
    }

    .mini-bar {
        text-align: left;
        padding: 15px 0px;
        width: 100%;
        font-size: 13px;
        bottom: 0px;
        position: absolute;
        overflow: auto;
    }

        .mini-bar .progress {
            height: 4px;
            margin-bottom: 6px;
            border-radius: 0px;
            box-shadow: none;
            -webkit-box-shadow: none;
        }

            .mini-bar .progress .complete {
                height: 4px;
                background-color: #0096D6;
                border-radius: 0px;
            }




    .ranking-row-profile, .ranking-row-name, .ranking-row-ep, .ranking-row-level {
        display: table-cell;
        vertical-align: middle;
    }

    .ranking-row-level {
        font-size: 14px;
        color: #000;
        width: auto;
        padding-right: 20px;
    }

    .ranking-row-ep {
        font-size: 14px;
        color: #000;
        width: auto;
    }

    .ranking-row-profile img {
        display: none;
    }

    .ranking-row-rank {
        background: #757678;
        font-size: 16px;
    }

    .highlight .ranking-row-rank {
        background: #0096D6;
    }

    .ranking-row-profile {
        width: 50px;
    }

    .ranking-row-name {
        font-size: 14px;
        color: #000;
    }

        .ranking-row-name a {
            border: none;
        }


    .circleBottomText {
        width: 50px;
        color: #ACACAE;
        font-size: 14px;
        line-height: 30px;
        white-space: nowrap;
    }


    .accord-head {
        display: block !important;
    }

        .accord-head .row .col-md-1 img {
            display: none;
        }

    .progressLevel {
        width: 100%;
        margin: 0px auto;
        text-align: left;
        display: none;
    }


        .progressLevel .gs img {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray; /* IE 6-9 */
        }



        /* Done / Active */

        .progressLevel .bar.active {
            background: linear-gradient(to right, #EEE 40%, #FFF 60%);
        }

        .progressLevel .circle.done .title {
            color: #000;
            white-space: nowrap;
        }

        .progressLevel .circle.active .label {
            color: #FFF;
            background: #0c95be;
            box-shadow: inset 0 0 2px rgba(0,0,0,.2);
            white-space: nowrap;
        }

        .progressLevel .circle.active .title {
            color: #0c95be;
            white-space: nowrap;
        }


        .progressLevel .bar {
            display: inline-block;
            background-color: #FFF;
            border: 2px solid #ACACAE;
            width: 40px;
            height: 40px;
            border-radius: 40px;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .progressLevel .bar {
            position: relative;
            width: 80px;
            height: 6px;
            top: -33px;
            /*margin-left: -5px;
            margin-right: -5px;*/
            border-left: none;
            border-right: none;
            border-radius: 0;
        }

        .progressLevel .circle .label {
            font-size: 15px;
            color: #ACACAE;
        }

        .progressLevel .circle .title {
            color: #ACACAE;
            font-size: 15px;
            line-height: 30px;
        }

        .progressLevel .gs img {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray; /* IE 6-9 */
        }

        .progressLevel .circle .title {
            color: #C6C9CA;
            font-size: 12px;
            line-height: 30px;
            white-space: nowrap;
        }

        .progressLevel .title {
            color: black;
            font-size: 20px;
            line-height: 30px;
            margin-left: 0px;
            padding-right: 200px;
            white-space: nowrap;
        }

        /* Done / Active */

        .progressLevel .circle {
            /*margin-right: 50px;*/
        }

            .progressLevel .bar.done,
            .progressLevel .circle.done {
                color: #0096D6;
                border: 2px solid #0096D6;
            }

        .progressLevel .bar.active {
            background: linear-gradient(to right, #EEE 40%, #FFF 60%);
        }

        .progressLevel .circle.done .label,
        .progressLevel .circle.done .circleBottomText {
            color: #FFF;
        }



        .progressLevel .circle.done .title {
            color: #000;
            font-family: 'Roboto', sans-serif;
            white-space: nowrap;
        }

        .progressLevel .circle.active .label {
            color: #FFF;
            background: #0c95be;
            box-shadow: inset 0 0 2px rgba(0,0,0,.2);
            white-space: nowrap;
        }

        .progressLevel .circle.active .title {
            color: #0c95be;
            white-space: nowrap;
        }

    .task-render-link {
        float: left;
        background-color: #FFF;
        color: #0096D6;
        border-radius: 4px;
        border: 1px solid #0096D6;
        margin-right: 0px;
    }

        .task-render-link:hover {
            color: #FFF;
            opacity: 1;
            background-color: #0096D6;
            border: 1px solid #0096D6;
        }

        .task-render-link .glyphicon.glyphicon-ok-sign {
            color: #0096D6;
        }

        .task-render-link:hover .glyphicon.glyphicon-ok-sign {
            color: #fff;
        }

        .task-render-link a {
            padding: 10px 20px;
            color: #FFF !important;
            border: none;
        }

        .task-render-link a {
            padding: 10px 20px;
            color: #0096D6 !important;
            border: none;
        }

            .task-render-link a:hover {
                color: #FFF !important;
                text-decoration: none;
            }
    .game-task {
        overflow: auto;
    }

    .game-task.unavailable a, .game-task.unavailable a:hover {
        text-decoration: none;
        cursor: default;
        background: #EEE !important;
        color: #ACACAE !important;
        opacity: 1;
        border-color: #EEE !important;
    }

    .next-task-link {
        margin-right: 0 !important;
        float: right;
    }

    .back-task-link {
        background-color: #FFF;
        color: #757678 !important;
        border-radius: 4px;
        border: 1px solid #757678;
    }

        .back-task-link:hover {
            color: #FFF !important;
            opacity: 1 !important;
            background-color: #757678 !important;
            border: 1px solid #757678 !important;
        }


    .new-window-task-link {
        background-color: #FFF !important;
        border-color: #757678;
        color: #757678 !important;
        float: right;
        cursor: pointer;
        margin-right: 10px;
    }

        .new-window-task-link:hover {
            border: 1px solid #757678 !important;
            background-color: #757678 !important;
            color: #FFF !important;
            padding: 6px;
            opacity: 1 !important;
        }

    .complete-render-link {
        float: left;
        background-color: #FFF !important;
        border-radius: 0px;
        padding: 6px;
    }

        .complete-render-link:hover {
            border: 1px solid #FFF;
            cursor: default;
            padding: 6px;
            opacity: 1 !important;
        }


    .innerProgressBar {
        height: 15px;
        background-color: #008424;
        border-radius: 10px;
    }

    .game-mission {
        border: 1px solid #FFF;
        background: transparent;
        padding: 0px;
        margin: 10px 0px;
        width: 150px;
        height: 260px;
    }

        .game-mission.available:hover {
            border-color: #FFF;
            cursor: pointer;
            -webkit-box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.25);
            -moz-box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.25);
            box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.25);
        }

        .game-mission.available.active-mission:hover {
            border: 1px solid transparent;
        }

        .game-mission p {
            text-align: center;
            font-size: 16px;
            line-height: 22px;
            padding: 10px 15px;
            text-transform: capitalize;
        }

        .game-mission img {
            width: 100%;
        }

    .gs img {
        opacity: 0.5;
    }

    .mission-counter {
        font-size: 14px;
        padding: 15px 15px 5px;
        text-align: left;
        color: #767676;
        text-align: center;
    }

    .unavailable {
        color: #ACACAE;
    }

    .comment-picture {
        border: 2px solid #0096D6;
    }

    .buttons-left, .buttons-right {
        float: left;
        width: 100%;
        margin-bottom: 20px;
    }

        .buttons-left .btn, .buttons-right .btn {
            width: 100%;
        }

    .colored-hr {
        border-color: #0096D6;
        margin-top: 20px;
    }

    .progressPercentage {
        display: inline-block;
        font-size: 16px;
        font-weight: 700;
        padding-left: 10px;
        padding-top: 0px !important;
        float: right;
    }

    .game-task .glyphicon {
        font-size: 30px;
        float: right;
        color: #0096D6;
        padding-left: 15px;
        border-left: 1px solid #CCC;
    }

    .l-progress-line {
        height: 3px;
    }

        .l-progress-line.completed {
            background-color: #0096D6;
        }

    .name, .rank, .leaderboard-level-name, .level-names-wrapper .current, .leaderboard-points-remaining, .level-names-wrapper .next {
        color: #FFF;
    }

    .leaderboard-rank-number {
        color: #0096D6;
    }

    .picture-wrapper img {
        border: 2px solid #0096D6;
    }

    .completions-wrapper {
        margin-bottom: 40px;
    }

    .completed-1, .completed-2, .completed-3 {
        color: #FFF;
    }

    .highlight .ranking-row-rank,
    #MVCGridTableHolder_PublicGrids-GameLeaderboardReseller .highlight,
    #MVCGridTableHolder_PublicGrids-GameLeaderboardOverall .highlight {
        background: #0096D6;
    }

    .pagination > .active > a,
    .pagination > .active > a:focus,
    .pagination > .active > a:hover,
    .pagination > .active > span,
    .pagination > .active > span:focus,
    .pagination > .active > span:hover,
    #MVCGridTableHolder_PublicGrids-GameLeaderboardGroupByReseller .pagination > .active > a,
    #MVCGridTableHolder_PublicGrids-GameLeaderboardReseller .pagination > .active > a {
        background-color: #105AA2;
        border-color: #105AA2;
        color: #FFF;
    }

    #MVCGridTableHolder_PublicGrids-GameLeaderboard .highlight {
        background-color: #0096D6;
    }


    #partial-toolbar #team-select, #partial-toolbar select {
        width: auto;
        float: left;
        font-weight: 400;
    }

    #partial-toolbar label {
        float: right;
        font-weight: normal;
    }

    .btn-circle {
        background-color: #0096D6 !important;
        border-color: #0096D6 !important;
    }


    .title-level {
        color: #767676;
        font-size: 22px !important;
    }


    .leaderboardTables-left .table-wrapper {
        height: 196px;
        clear: both;
        overflow: auto;
    }


    .ChaptersGameLeft {
        float: left;
        background-color: #1159A1;
        width: 100%;
        padding: 20px;
        min-width: 250px;
    }

        .ChaptersGameLeft p {
            color: #FFF;
            font-size: 16px;
            line-height: 20px;
        }

    .ChaptersGameRight {
        float: left;
        background-color: #1A1A1A;
        overflow-y: auto;
        width:100%;
    }

    .game-chapter-right .mini-bar {
        text-align: left;
        padding: 0px;
        position: relative;
        width: 100%;
        bottom: 0;
        font-size: 15px;
    }


    .game-chapter-right {
        float: left;
        padding: 15px 15px 15px 0px;
        width: 70%;
        text-align: left;
    }

        .game-chapter-right h1 {
            font-size: 14px;
            color: #FFF;
            margin: 0px;
            line-height: normal;
        }

        .game-chapter-right h2 {
            font-size: 18px;
            color: #000 !important;
            margin: 0px;
            line-height: normal;
            padding: 0px 0px 10px 0px;
        }





/*********** CUSTOM REWARDS PAGE ***********/

	.rewards-container {
		max-width: 960px;
		margin: auto;
		text-align:left;
	}

        .rewards-container h2 {
            font-size: 22px;
            color: #105AA2 !important;
            margin: 0 0 10px;
        }
	
	.rewards-container h3{
		font-size:16px;
		color: #0096D6;
		margin: 0 0 10px;
	}
	
	.rewards-intro {
		float: left;
		width: 100%;
	}
	.rewards-container p {
		font-size: 14px;
		color: #767676;
		padding-bottom: 20px;
	}
	
	.grand-prize-draw-left{
		float: left; 
		width: 100%;
		overflow: auto;
        margin-bottom:20px;
	}
	
	.grand-prize-sections{
		width:100%;
		overflow: auto;
		border-bottom: 1px solid #7f7f7f;
		margin-bottom: 20px;

	}
	
	.grand-prize-sections p{
		margin:0px;
	}
	
	.section1{
		float:left;
		width: 100%;
	}

	    .section1 img{
		    width: 100%;
	    }
	
	.section2{
		float:left;
		width: 25%;
		text-align: center;
	}

        .section2 p {
			text-align: right !important;
        }

		.section2 img{
			width: auto;
		}
	
	.section3{
		float:left;
		width: 100%;
	}
	
	.grand-prize-draw-right{
		float: left; 
		width: 30%;
		text-align: right;
		display: none;
	}
	
	.grand-prize-draw-right img{
		width: 60%;
	}
	
	.rewards-col2-left{
		width:100%;
		float: left;
	}
	
	.leaderboard-values{
		width:33%;
		float: left;
		text-align: center;
		font-weight: bold;
	}

    .leaderboard-values p {
			text-align: center !important;
        }

	.leaderboard-values img{
		height: 60px;
	}
	
	.pizza-delivery-left {
		float:left;
		width: 70%;
	}
	
	.pizza-delivery-right {
		float:left;
		width: 30%;
		text-align: right;
	}
	
		.pizza-delivery-right img {
			width:90%;
		}
	
	.rewards-col2-right{
		width:100%;
		float: right;
	}
	
	.participation-rewards-sections {
		width: 100%;
		float: left;
		border-bottom: 0px solid #7f7f7f;
        margin-bottom:20px;
	}
	
	
	.cta {
		float: left; 
		width: 100%;
		overflow: auto;
	}
	
	.cta-left {
		float: left; 
		width: 100%;
	}

        .cta-left h2 {
            color: #105AA2 !important;
            text-align: center;
            margin: 20px 0px;
        }
	
	.cta-right {
		float: left; 
		width: 100%;
	}
	
        .cta-right p {
			text-align: center !important;
		}
	
		.cta-right img {
			width:75%;
		}
	
	.disclaimer-text {
		width:100%;
		font-size: 10px;
		overflow: auto;
		padding-top: 20px;
	}



    /*****ENGAGEMENT TRACKER*****/

    .widget-dashbboard {
        border: 1px solid #CCCCCC;
        background-color: #EEEEEE;
        font-size: 16px !important;
        border-radius: 4px;
    }

        .widget-dashbboard td {
            padding: 10px;
        }

    .total-coins {
        width: 50px;
        height: 50px;
    }

    .widget-total-points {
        font-size: 18px !important;
        
        text-align: center;
        color: white;
    }

/*
    .widget-title {
        font-size: 18px !important;
        
    }
*/
    .widget-row {
        overflow: auto;
    }

    .carousel-inner {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin-left: 0px !important;
        padding: 0px 20px;
    }

    .carousel-control .glyphicon {
        color: #CCC;
    }

    .widget-holder {
        border-radius: 4px;
    }

    .widget-logo img {
        width: 100%;
    }

    .widget-highlight {
        text-align: center;
    }



}

/*************END OF MAIN STYLES*********************/



@media all and (min-width: 600px) and (max-width: 768px) {
    .side-2 .block {
        width: 100%;
        float: left;
        overflow: hidden;
    }

        .side-2 .block:nth-child(2n) {
            margin-left: 1%;
        }

        .side-2 .block:nth-child(2n+1) {
            clear: both;
        }

    .side-2 .block-account-navigation {
        width: 100%;
        margin: 0 auto 10px;
        float: none;
        padding: 10px;
    }

    .products-carousel {
        clear: both;
    }
}

@media screen and (min-width: 320px) and (max-width: 480px) {
    .responsive-nav-wrapper > div > span {
        text-indent: -9999px;
        padding: 15px 35px;
    }

    .responsive-nav-wrapper .menu-title,
    .responsive-nav-wrapper .filters-button {
        background-position: center;
    }

    .responsive-nav-wrapper .search-wrap {
        background-position: center;
    }
}

@media all and (max-width: 768px) {

    .gallery .picture {
        width: 480px;
    }

    .left50 {
        padding: 10px;
    }

    .right50 {
        padding: 10px;
    }

        .right50 img {
            width: 100%;
        }


    .dvRedeem .dv1, .dvRedeem .dv2 {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
        float: none;
        text-align: left !important;
        margin-bottom: 10px;
    }

    .shopping-cart-page .button-1,
    .account-page .button-1,
    .confirm-order .button-1,
    .button-1 .search-input,
    .checkout-page .button-1,
    .order-details-page .buttons .button-1 {
        width: 100%;
        text-align: center !important;
        margin-bottom: 10px;
        display: block;
        clear: both;
    }

    #pdflink {
        display: none;
    }


    .calender-month-long, .calender-icon {
        display: none;
    }


    .calender-month-short {
        display: inline;
        font-size: 13px;
        position: relative;
    }
}





@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {


    .qty_nobr {
        width: auto;
    }

    /*.table.dataTable tbody th, table.dataTable tbody td {
        padding-left: 50% !important;
    }*/

    .cart table, .cart thead, .cart tbody, .cart th, .cart td, .cart tr,
    .data-table table, .data-table thead, .data-table tbody, .data-table th, .data-table td, .data-table tr,
    .claim-details table, .claim-details thead, .claim-details tbody, .claim-details th, .claim-details td, .claim-details tr
    /*.reward-history table, .reward-history thead, .reward-history tbody, .reward-history th, .reward-history td, .reward-history tr*/ {
        display: block;
        text-align: left !important;
        font-size: 14px !important;
        vertical-align: top;
    }

    .cart tr,
    .data-table tr,
    .claim-details tr
    /*.reward-history tr*/ {
        border: 1px solid #CCC;
        margin-bottom: 20px;
    }

    .cart thead tr,
    .data-table thead tr,
    .claim-details thead tr
    /*.reward-history thead tr*/ {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .cart td,
    .data-table td,
    .claim-details td
    /*.reward-history td*/ {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #DDD;
        position: relative;
        padding-left: 50%;
        max-width: 100%;
        overflow: auto;
    }

        .cart td:before,
        .data-table td:before,
        .claim-details td:before
        /*.reward-history td:before*/ {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 10px;
            left: 10px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            font-weight: 700;
        }
        /*
	Label the data
	*/
        .cart td:nth-of-type(1):before {
            content: "Remove";
        }

        .cart td:nth-of-type(2):before {
            content: "SKU";
        }

        .cart td:nth-of-type(3):before {
            content: "Product";
        }

        .cart td:nth-of-type(4):before {
            content: "Points";
        }

        .cart td:nth-of-type(5):before {
            content: "Qty.";
        }

        .cart td:nth-of-type(6):before {
            content: "Total";
        }

        .data-table td:nth-of-type(1):before {
            content: "Claim ID";
        }

        .data-table td:nth-of-type(2):before {
            content: "Invoice Date";
        }

        .data-table td:nth-of-type(3):before {
            content: "Sold To";
        }

        .data-table td:nth-of-type(4):before {
            content: "Invoice #";
        }

        .data-table td:nth-of-type(5):before {
            content: "Points";
        }

        .data-table td:nth-of-type(6):before {
            content: "Status";
        }

        .data-table td:nth-of-type(7):before {
            content: "Details";
        }

        .claim-details td:nth-of-type(1):before {
            content: "SKU";
        }

        .claim-details td:nth-of-type(2):before {
            content: "Name";
        }

        .claim-details td:nth-of-type(3):before {
            content: "Points";
        }

        .claim-details td:nth-of-type(4):before {
            content: "Qty.";
        }

        .claim-details td:nth-of-type(5):before {
            content: "Total";
        }

    .reward-history td:nth-of-type(1):before {
        content: "Date";
    }

    .reward-history td:nth-of-type(2):before {
        content: "Reward";
    }

    .reward-history td:nth-of-type(3):before {
        content: "Message";
    }

    .reward-history td:nth-of-type(4):before {
        content: "Points";
    }

    .reward-history td:nth-of-type(5):before {
        content: "Balance";
    }
}