/* 
    Document   : npnolymobile
    Created on : Aug 9, 2014, 11:06:22 AM
    Author     : Tran Trong Thang
    Email      : trantrongthang1207@gmail.com
    Description:
        Purpose of the stylesheet follows.
*/
#sticky-feedback,
.ui-select,
.ui-loader-fakefix,
.link-categoryalert-wrapper{
    display: none !important;
}
.top-header .top-header-left{
    display: none !important;   
}
.top-header .top-header-right{
    width: 100% !important;
}
.top-header-mobile {
    line-height: 25px;
    margin: 10px 0;
    text-align: center;
    width: 100%;
}
.top-header-mobile .follow_us {
    color: #000;
    display: inline-block;
    font-size: 14px;
    margin: 0;
    text-transform: uppercase;
}
.top-header-social-mobile .facebook, .top-header-social-mobile .twitter {
    margin-left: 5px;
    text-indent: -9999px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: top center;
    height: 20px;
    width: 20px;
}
.top-header-social-mobile .facebook {
    background-image: url(../images/header-facebook.png);
}

.top-header-social-mobile .twitter {
    background-image: url(../images/header-twitter.png);
}
.top-header-social-mobile p {
    margin: 0;
}
.top-header-social-mobile .left,
.top-header-social-mobile .follow_us{
    float: none !important;
    display: inline-block;
}
@media only screen and (max-width: 568px) { 
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {   
    .top-header-right {
        padding: 0 20px;
    }
    .top-header-right ul li a {
        font-size: 10px;
    }
    .bag-modal, .label-modal, .sellingCheckList-modal, .claim-my-bag-modal{
        border-radius: 5px;
    }
}
@media only screen and (max-width: 400px) {   
    .page, .footer-social, .footer {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
}






/**********************fgc*************************/
@media only screen and (max-width: 980px) {
    #bagPopUpDiv .bag-modal,
    #labelPopUpDiv .label-modal{
        border-radius: 0;
        height: 580px;
    }
    .top-bread{
        margin: 0 auto;
        padding-left: 0;
        width: 714px;
    }
}
@media only screen and (max-width: 780px)
{
    .top-bread{
        margin: 0 auto;
        padding-left: 0;
        width: 440px;
    }
    #bagPopUpDiv .bag-modal,
    #labelPopUpDiv .label-modal{
        border-radius: 0;
        left: 0!important;
        height: 580px;
    }
    #bagPopUpDiv .bag-modal .popup-form .fieldset,
    #labelPopUpDiv .label-modal .popup-form .fieldset {
        padding: 20px 20px 0
    }
    #bagPopUpDiv .bag-modal .form-list li .input-box,
    #labelPopUpDiv .label-modal .form-list li .input-box   {
        margin: 0 auto;
    }
    #bagPopUpDiv .bag-modal .form-list li select.popup-select-small,
    #labelPopUpDiv .label-modal .form-list li select.popup-select-small {
        width: 107px !important;
    }
    #bagPopUpDiv .bag-modal .popup-form,
    #labelPopUpDiv .label-modal  .popup-form{
        top: 20px
    }
    #bagPopUpDiv .bag-modal .form-list li:nth-child(6) ,
    #labelPopUpDiv .label-modal  .form-list li:nth-child(7) {
        width: 58%;
        margin-left: 5.5%;
    }
    #bagPopUpDiv .bag-modal .form-list li.fields   #field_15,
    #bagPopUpDiv .bag-modal .form-list li.fields   #field_16,
    #labelPopUpDiv .label-modal .form-list li.fields  #field_23,
    #labelPopUpDiv .label-modal .form-list li.fields  #field_24{
        width: 110px
    }
    #bagPopUpDiv .bag-modal .form-list li.fields   #field_16,
    #labelPopUpDiv .label-modal .form-list li.fields  #field_24
    {
        float: right
    }
    #bagPopUpDiv .bag-modal .buttons-set,
    #labelPopUpDiv .label-modal .buttons-set
    {
        padding: 0;
        position: relative;
        top: -25px;
    }
    #bagPopUpDiv .bag-modal .buttons-set{
        top: -35px;
    }
    #bagPopUpDiv .bag-modal ul.form-list li{
        margin-bottom: 15px

    }
    #labelPopUpDiv .label-modal{
        height: 560px
    }
    #labelPopUpDiv .label-modal .input-box .list-select li.control{
        margin-left: 0!important;
        margin-right: 15px!important
    }
    #labelPopUpDiv .label-modal .input-box .list-select li.control label{
        margin-left: 5px;
    }
    .step-wrapper *{
        box-sizing: border-box; /*it gives error:Validation (CSS 2.1): 'box-sizing' is not a known CSS property name. */
        -ms-box-sizing: border-box; 
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ **/   
    }
    #labelPopUpDiv .step-wrapper,
    #bagPopUpDiv .step-wrapper{
        left: 0!important;
        padding: 20px 20px 0;
        position: relative;
    }
    #labelPopUpDiv  .webforms-success-text .popup-title,
    #bagPopUpDiv .webforms-success-text .popup-title{
        padding-top: 15px;
    }
}
@media only screen and (max-width: 480px)
{
    #bagPopUpDiv .bag-modal .form-list li select.popup-select-small,
    #labelPopUpDiv .label-modal .form-list li select.popup-select-small {
        width: 98% !important;
    }

    #bagPopUpDiv .bag-modal .form-list li:nth-child(6), #labelPopUpDiv .label-modal .form-list li:nth-child(7) {
        margin-left: 0;
        width: 100%;
    }
    #bagPopUpDiv .bag-modal .form-list li.fields   #field_15,
    #bagPopUpDiv .bag-modal .form-list li.fields   #field_16,
    #labelPopUpDiv .label-modal .form-list li.fields  #field_23,
    #labelPopUpDiv .label-modal .form-list li.fields  #field_24{
        width: 100%
    }
    #bagPopUpDiv .bag-modal .form-list li.fields   #field_15,
    #labelPopUpDiv .label-modal .form-list li.fields  #field_23
    {
        float: none
    }
    #bagPopUpDiv .bag-modal .form-list li.fields   #field_15{
        margin-bottom: 15px;
    }   
    #labelPopUpDiv .label-modal .form-list li.fields  #field_23{
        margin-bottom: 6px

    }

    #bagPopUpDiv .bag-modal .form-list li .input-box input,
    #labelPopUpDiv .label-modal .form-list li .input-box input{
        margin-right: 0
    }
    #labelPopUpDiv .label-modal,
    #bagPopUpDiv .bag-modal{
        height: auto;
        padding-bottom: 30px;
    }
    #bagPopUpDiv .bag-modal .buttons-set {
        top: -15px;
    }
    #labelPopUpDiv .label-modal .buttons-set {
        top: 3px;
    }
    #bagPopUpDiv .bag-modal .popup-title,
    #labelPopUpDiv .label-modal .popup-title{
        top : 0;

    }
    /*    #bagPopUpDiv .bag-modal .step-block,
        #labelPopUpDiv .label-modal .step-block{
            float: none;    
        }*/
    #bagPopUpDiv .bag-modal .step-block-number,
    #labelPopUpDiv .label-modal .step-block-number{
        margin: 0;
        text-align: left;
        width: 9%;
    }
    #bagPopUpDiv .bag-modal .step-block-content,
    #labelPopUpDiv .label-modal .step-block-content{
        width: 91%;
    }
    #labelPopUpDiv .label-modal .please-wait span,
    #bagPopUpDiv .please-wait span{
        position: relative;
        top: -11px;
    }

    #bagPopUpDiv  .webforms-success-text .step-wrapper,
    #labelPopUpDiv .webforms-success-text .step-wrapper{
        padding: 20px 20px 60px;
        overflow: hidden
    }
    #bagPopUpDiv  #step-block-content-form p,
    #labelPopUpDiv #step-block-content-form p{
        width: 67%
    }
    #bagPopUpDiv #step-block-content-bag-box p,
    #labelPopUpDiv #step-block-content-bag-box p{
        width: 85%
    }
    #bagPopUpDiv #step-block-content-post-box p,
    #labelPopUpDiv #step-block-content-post-box p
    {
        width: 54%
    }
    #bagPopUpDiv  #step-block-content-bag-box:after,
    #labelPopUpDiv #step-block-content-bag-box:after{
        right: -16px
    }
    .page,
    .footer-social,
    .aditional-footer,
    .footer,
    .top-bread{
        width: 100%;
    }
}
@media only screen and (max-width: 380px){
    #step-block-content-form:after{
        right: -13px
    }
    #bagPopUpDiv #step-block-content-bag-box p, #labelPopUpDiv #step-block-content-bag-box p{
        width: 76%
    }

    #step-block-content-bag-box ul li:first-child{width: 75%}
    #step-block-content-post-box:after{
        right: 40px
    }
    .modal {
        border-radius: 5px;
        height: 600px;
    }
}
/*popup home*/
@media only screen and (max-width: 610px) {
    .modal {
        border-radius: 5px;
        height: 500px;
    }
    .modal #close-btn {
        top: 20px;
    }
    .modal .popup-title {
        top: 45px;
    }
    .modal .popup-shipping {
        top: 50px;
    }
    .modal .popup-form {
        top: 70px;
    }
    .modal .popup-link {
        top: 110px;
    }
    .modal .popup-info {
        top: 130px;
    }
}
@media only screen and (max-width: 380px){
    .modal {
        height: 600px;
    }
}