/*Normalize CSS*/

h1{font-size: 2em;}
h2{font-size: 1.5em;}
h3{font-size: 1.17em;}
h4{font-size: 1em;}
h5{font-size: .83em;}
h6{font-size: .67em;}

#body{
    
}

a,
a:hover,
a:active{
    text-decoration: none !important;
}

table, 
th, 
td{
    border: 1px solid #ccc;
    position: relative;
}
tr{
    position: relative;
    overflow: hidden;
}
th, 
td{
    padding: 0.5em 0.75em;
}

ul{
    list-style: none;
    margin-bottom: 0;
    
}

#nav{
    min-height: 82px;
    border-bottom: 2px solid #ccc;
    padding: 0 2.5em;
    clear: both;
    width: 100%;
    background: #fff;
    z-index: 10;
    top: 0;
    position: fixed;
}
#nav-logo{
    line-height: 80px;
    display: block;
    float: left;

    /* disabled text */
}
#nav-logo > img {
    height: 50px;
    width: auto;
}
/**/
#nav-bar{
    z-index: 10;
    padding: 0;
    display: none;

    position: fixed;
    top: 82px;
    right: 0;
    left: 0;
    background: #303030;
    height: calc(100% - 82px);
    overflow: auto;
}

/* style fix */
#nav-bar > li{
                                /*padding: 1em;*/
    display: block;
                                /*background: #fff;*/
                                /*text-align: center;*/
                                /*border-bottom: 1px solid #ccc;*/
}

.nav-link,
.cta{
                                padding: 1em;
                                display: block;
                                text-align: center;
                                color: #fff;
                                font-size: 1.17em;
                                border-bottom: 1px solid #ccc;

                                -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
                                   -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
                                     -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
                                        transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-link:hover,
.cta:hover{
                                /*border-bottom: 3px solid #4DCC2F;*/
                                background: #4DCC2F;
                                color: #fff;
}
/* style fix */

/**/
#nav-bar-mobile{
    float: right;
    border: 0;
    height: 80px;
    padding: 1em;
    background: transparent;
}
#nav-bar-mobile:active{
    background: #000;
}
#footer,
#copyright{
    background: #2b2b2b;
    color: #fff;
    padding: 1em 1.5em;
    overflow: hidden;
    position: relative;
}
#copyright{
    text-align: center;
}

.footer-item{
    padding: 0 1em;
}

.footer-item > h2{
    text-align: center;
    padding-bottom: 15px; 
}

.footer-item > p{
    text-align: justify;
}

/*Normalize Page Content*/
#page-content{
    position: relative;
}
#page-content > div{
    position: relative;
    overflow: hidden;
}

.info-container,
.featured-products{
    padding: 2.5em 2em;
}
.info-container > div{
    padding: 0 2rem;
    text-align: justify;
}
.info-item > h1{
    text-align: center;
    padding-bottom: .5em;
    border-bottom: 3px solid #4DCC2F;
}
.info-item > p{
    text-align: justify;
}
.info-icon{
    padding: 1em 3em;
    text-align: center;
}
.info-icon > img{
    height: 70px;
}
/*
    Image Spec: W:H px
*/
#banner{
    overflow: hidden;
    clear: both;
}
.banner-slide{
    position: relative;
    color: #fff;
}
.slide-info{
    position: absolute;
    z-index: 5;
    padding: 1em;
    text-align: center;
}
.slide-info > h1{
    font-size: 5em;
    margin: 0 0 10px;
}
.slide-info > p{
    font-size: 1.17em;
    margin: 0 0 10px;
}
.link-section > a{
    color: #fff;
}
.slide-info > button,
.link-section > a{
    font-size: 1.17em;
    border: 1px solid #fff;
    background: transparent;
    padding: 0.75em 1em;
    border-radius: 1.5em;
    
    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.slide-info > button:hover,
.link-section > a:hover{
    background: #4DCC2F;
    border: 1px solid transparent;
}
.banner-slide > img{
    width: 100%;
    height: auto;
}
#newsletter > *{
    display: block;
    width: 100%;
}

#newsletter > input{
    padding: .5em;
    color: #000;
    margin-bottom: 10px;
}

#newsletter > button{
    font-size: 1.17em;
    border: 1px solid #fff;
    background: transparent;
    padding: 0.75em 1em;
    border-radius: 1.5em;
    
    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}

#newsletter > button:hover{
    background: #4DCC2F;
    border: 1px solid transparent;
}
.fp-header{
    text-align: center;
}
.fp-header > h1{
    display: inline-block;
    padding: 1em;
    border-bottom: 3px solid #4DCC2F;
    clear: both;
}
.fproduct{
    display: block;
    padding: 2em;
    border: 1px solid transparent;
    overflow: hidden;
    color: #000;

    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.fproduct:hover{
    border: 1px solid #777;
    color: #000;
}
.fproduct > img{
    width: 100%;
    height: auto;
}
.fproduct > h2{
    text-align: center;
}
.fproduct > p{
    text-align: center;
}

.cta-section{
    text-align: center;
    padding: 1em;
}

.cta-section > a{
    font-size: 1.17em;
    border: 1px solid #000;
    background: transparent;
    padding: 0.75em 1em;
    border-radius: 1.5em;
    color: #000;
    
    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.cta-section > a:hover{
    background: #4DCC2F;
    border: 1px solid transparent;
    color: #fff;
}

.link-section{
    padding: 2.5em;
    text-align: center;
    background: url("../images/c.jpeg") no-repeat center center;
    color: #fff;
}


.about-item-info{
    padding: 2em;
    background: rgba(0,0,0,0.5);
    color: white;
    text-align: justify;
}
.about-history{
    background: url("../images/g.jpeg") no-repeat center center;
    background-size: cover;
}

.bp > img,
.bpc > img{
    width: 100%;
    height: auto;
}

.bp{
    margin: 10px 0;
    position: relative;
}

.bpc{
    opacity: 0;
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0;
    z-index: 5;
    
    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}


.bp:hover > .bpc,
.bp:active > .bpc{
    opacity: 1;
}

.cta-section-2{
    text-align: center;
    padding: 2em 2em 4em;
}

.cta-section-2 > a{
    font-size: 1.12em;
    border: 1px solid transparent;
    background: #4DCC2F;
    padding: 0.75em 1em;
    border-radius: 1.5em;
    color: #fff;
    
    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}

/*products.php css starts here*/

#product-filters{
    padding: 40px 3em;
    /* custom style */
    position: fixed;
    left: 0;
    z-index: 9;
    background: #fff;
    overflow: scroll;
    
}
#product-filters > div{
    margin-bottom: 10px;
}
#product-filters input{
    padding-right: 0.5em 0.75em;
}
#product-filters > ul{
    padding: 0;
}
#product-filters > ul > li > a{
    margin: 5px 0;
    border-radius: 0.75em;
    display: block;
    padding: .5em 0.75em;
    color: #000;
    font-size: 1.17em;
    
    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}

.active-category{
    background: #4DCC2F !important;
    padding-left: 1.50em !important;
    color: #fff !important; 
}
/* product categories */
#product-filters > ul > li > a:hover,
#product-filters > ul > li > a:active{
    background: #4DCC2F;
    padding-left: 1.50em;
    color: #fff;
}

/* product categories */


#products{
    padding-top: 40px;
    padding-bottom: 40px;
    /* custom style */
    padding-left: 25px;
    padding-right: 25px;
}

/*start repair here*/

.product{
    margin: 0 0 20px; 
    padding: 0 1em;
    display: block;
    color: #000;
}
.product:hover,
.product:active{
    color: #000;
}
.product > div{
    padding: 5px;
    border: 1px solid transparent;

    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.product:hover > div,
.product:active > div{ 
    border: 1px solid #777;
}
.product > div > p{
    margin: 5px 0;
    padding: 0 15px;
}
.product > div > img{
    width: 100%;
    height: auto;
}

/* TEMP configuration categoryName */
.product > div > span,
.fproduct > span{
    font-size: 1.17em;
    padding: .75em 1em;
    color: #fff;
    background: #4DCC2F;  
    border: 1px solid transparent;
    display: block;
    width: 100%;
    text-align: center;
}
/* TEMP configuration categoryName */

.product button{
    
    font-size: 1.17em;
    padding: .75em 1em;
    color: #fff;
    background: #4DCC2F;  
    border: 1px solid transparent;
    display: block;
    width: 100%;
    
    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.product button:hover{
    background: #41AD29;
}

/*suppliers.php css starts here*/
#log-in{
    background: url("../images/b.jpeg") no-repeat center center;
    background-size: cover;
    padding: 1em;
}
#supplierinfo{
    padding: 1em;
    color: #fff;
    background: rgba(43, 43, 43, 0.7);
}
#supplierinfo > ul{
    list-style: circle;
}
#supplierinfo > ul > li{
    margin-bottom: 1em;
}
#login{
    padding: 1em;
    color: #000;
    background: #fff;
}
#login > form{
    margin-bottom: 20px;
}
#login > form > *{
    display: block;
    margin-bottom: 10px;
    width: 100%;
}
#login > form > input{
    padding: 0.75em;
    color: #000;
}
#login > form > button{
    font-size: 1.17em;
    border: 1px solid transparent;
    background: #4DCC2F;
    padding: 0.75em 1em;
    border-radius: 1.5em;
    color: #fff;
    
    
    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}

#login > form > button:hover{
    background: #41AD29;
    border: 1px solid transparent;
}

/*register.php [supplier] css start here*/

#register{
    padding: 1.5em;
    color: #000;
    background: #fff;
    border-radius: 0.75em;
}
#register > h1{
    padding-bottom: 20px;
    border-bottom: 3px solid #4DCC2F;
}
#register > form > h3{
    margin: 20px 0;
}
#register > form > *{
    display: block;
    margin-bottom: 10px;
    width: 100%;
}
#register > form > label{
}
#register > form > input{
    padding: 0.75em;
    color: #000;
}
#register > form > button,
.button-type-e,
.header-type-e,
.button-type-f,
.button-type-g{
    font-size: 1.17em;
    border: 1px solid transparent;
    background: #4DCC2F;
    padding: 0.75em 1em;
    border-radius: 1.5em;
    color: #fff;
    
    
    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}

#register > form > button:hover,
.button-type-e:hover{
    background: #41AD29;
    border: 1px solid transparent;
}
.button-type-f:hover{
    padding-right: 2.5em;
    color: #fff;
}
.button-type-f{
    display: inline-block;  
    margin-bottom: 10px;
}
.button-type-g{
    text-align: center;
    display: block;
    padding: 0.75em 1em;
    margin: 10px 0 20px;
}

.button-type-g-disabled{
    background: #41AD29;
}

.button-type-g:hover{
    color: #fff;
    background: #41AD29;
    border: 1px solid transparent;
}



/*supplieraccount.php css starts here*/

#suppliersidebar, 
#adminsidebar{
    position: fixed;
    top: 82px;
    height: calc(100% - 82px);
    bottom: 0;
    left: 0;
    width: 250px;
    background: #2b2b2b;
    color: #fff;
    padding: 2em;
    display: none;
    overflow-y: auto;
}
#suppliersidebar > ul,
#adminsidebar > ul{
    padding: 0;
}
#suppliersidebar > ul > li > a,
#adminsidebar > ul > li > a{
    color: #fff;
    padding: 0.5em 0.75em;
    border-radius: 0.75em;
    margin: 10px 0;
    font-size: 1.17em;
    display: block;
    
    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
           -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
             -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
                transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}

#suppliersidebar > ul > li > a:hover,
#adminsidebar > ul > li > a:hover,
/* this is a special chain do not break */
#suppliersidebar > ul > li > a.router-link-active,
#adminsidebar > ul > li > a.router-link-active
/* this is a special chain do not break */{
    background: #4DCC2F;
}


/*supplieraccount.php propose item*/
#proposeitem{
    margin-top: 40px;
}
#proposeitem input[type = "checkbox"]{
    margin-right: 1em;
}
.spec{
    position: relative;
    color: #000;
    padding: 1em; 
    cursor: pointer;
    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
           -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
             -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
                transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.spec:hover{
    background: #4DCC2F;
    color: #fff;
}
.spec > input[type = "checkbox"] + span + div{
    height: 100%; 
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    border: 1px solid #ccc;
    z-index: -10;
}
.spec > input[type = "checkbox"]:checked + span + div{
    background: #4DCC2F;
    border: 1px solid transparent;
}
.spec > input[type = "checkbox"]:checked + span{
    color: #fff;
}
#proposeitem > div > label,
#proposeitem > div > input,
#proposeitem > div > textarea,
#proposeitem > div > select{
    display: block;
    width: 100%;
    margin-bottom: 10px;
}
#proposeitem > div > input,
#proposeitem > div > select{
    padding: 0.5em 0.75em;
}
#proposeitem > div > textarea{
    min-height: 100px;
    padding: 0.5em 0.75em;
}
.component-padding{
    padding: 1.5em;
}
#myproducts-options,
#products-admin-options,
#product-search{
    overflow: hidden;
}



#product-search > h1{
    display: inline-block;
    vertical-align: middle;
}

/* break apart */
#product-search > div{
    display: block;
    /*float: right;*/
    /*off margin*/
}

#product-search > div > *{
    display: block;
    padding: 0.75em;
    width: 100%;
}
/* break apart */

#myproducts-options > h1,
#products-admin-options > h1{
    display: inline-block;
    vertical-align: middle;
}
#myproducts-options > div,
#products-admin-options > div{
    display: inline-block; 
    vertical-align: middle; 
    float: right;
    margin: 0.755em 0;
}

#myproducts-options > div > *,
#products-admin-options > div > *{
    display: inline-block;
    padding: 0.75em;
}
#products-admin-options > div > p{
    margin-bottom: 0;
    font-size: 1.17em;
}
.products-list{
    overflow: hidden; 
    margin-top: 20px;
}
.product-item > img,
.product-item-admin > img{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.product-item,
.product-item-admin{
    margin-bottom: 20px;
}
.product-item-admin > a{
    display: block;
    width: 100%;
    padding: 0.75em;
    font-size: 1.17em;
    background: #4DCC2F;
    color: #fff;
    text-align: center;
    
    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.product-item-admin > a:hover{
    background: #41AD29;
}
.product-item > p:last-child{
    padding: 0.75em;
    margin-bottom: 0;
    background: #4DCC2F;
    color: white;
    font-size: 1.17em;
}
/*supplier product css [individual] starts here*/
.product-data > h2{
    margin: 20px 0;
}
.product-specs{
    padding: 0;
}
.product-specs > li{
    margin-bottom: 0.5em;
}
.header-type-e{
    text-align: center;
    display: block; 
    font-size: 1.5em;
}

/*admin*/
.admin-table{
    width: 100%;
    margin: 20px 0;
}
.admin-table-row-options,
.admin-table-row-image{
    padding: 0;
}
.admin-table-row-image{
    width: 9%;
}
.admin-table-row-image > img{
    width: 100%;
    height: auto;
}
.admin-table-row-options > button{
    display: block;
    width: 100%;
    padding: 1em;
    background: transparent;
    border: 1px solid #ccc;
    
    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.admin-table-row-options > button:hover{
    background: #4DCC2F;
    border: 1px solid transparent;
    color: #fff;
}

.admin-purchase-options > button{
    padding: 0.5em 0.75em;
    font-size: 1.17em;
    background: transparent;
    border: 1px solid #ccc;
    
    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.admin-purchase-options > button:hover{
    background: #4DCC2F;
    border: 1px solid transparent;
    color: #fff;
}

/*Render to mobile everything above this line*/

/*loading screen css starts here*/
#loading{
    position: fixed;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: table;
    z-index: 14;
    background: #fff;
}

#loading > div{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding: 1em;
}

#loading-logo{
    width: 15%;
    height: auto;
}
#loading > div > p{
    font-size: 1.12em;
    margin-top: 10px;
}
#loading-gif{
    clear: both;
    width: 5%;
}


#accountselect > h1{
    text-align: center;
    margin-bottom: 40px;
    color: #fff; 
}
#accountselectrow > div{
    padding: 20px;
}
.account-type{
    min-height: 500px;
    border: 1px solid #ccc; 
    padding: 30px;
    background: #fff;
}
.account-type > h1{
    font-weight: lighter;
}
.account-type > ul{
    text-align: justify;
    list-style: circle;
}
.account-type > ul > li{
    margin-bottom: 10px;
}

.page-content-bg-a{
    background: #303030;
    /*background: #fcfcfc;*/
}

/* experiment on vue router */
/* experiment on vue transition */
.fade-enter-active, .fade-leave-active {
    -webkit-transition: opacity .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: opacity .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: opacity .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: opacity .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}
/* experiment on vue router */
/* experiment on vue transition */


/* toggle classes */
.overflow-toggle{
    overflow: hidden;
}
/* standard */
/*------------------------------------------------------------------------------------*/

/*path ^user page*/
/*the static button type*/
.button-type-h{
    display: inline-block;
    font-size: 1.17em;
    border: 1px solid transparent;
    background: #4DCC2F;
    padding: 0.75em 1em;
    border-radius: 1.5em;
    color: #fff;
}
.button-type-h:hover{
    color: #fff;
}

/* used in 404 */
.button-type-i{
    display: inline-block;
    font-size: 1.17em;
    border: 1px solid transparent;
    background: #4DCC2F;
    padding: 0.75em 1.75em;
    border-radius: 1.5em;
    color: #fff;

    -webkit-transition: padding .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: padding .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: padding .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: padding .3s cubic-bezier(0.23, 1, 0.32, 1);
}

.button-type-i:hover{
    padding: 0.75em 2.5em;
    color: #fff;
}
/* used in 404 */

/* for default buttons that are already inline-block with padding */
/* and is shaped like a square */
.button-type-j{
    background: transparent;
    /*border: 1px solid #777;*/

    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.button-type-j:hover,
.showadvs{
    color: #fff;
    background: #4DCC2F;
    border: 2px solid transparent;
}
/* for buttons that are already inline-block with padding */

/*the static button type*/
/*standard padding for div container inside #page-content?*/
.pcsp{
    padding: 20px 50px;
}
/*standard padding for div container inside #page-content?*/
.floatright{
    float: right;
}
.clearboth{
    clear: both;
}
.capitalize{
    text-transform: capitalize;
}
/*a font-link is a font link - no hover just font link*/
.font-link,
.font-link:hover,
.font-link:active{
    color: #fff; 
    font-weight: bold; 
    font-size: 1.17em;
}

/*notification type-a = full page center (fpc) notification*/
/*notification-a perfect for prompt messages like a alert*/
.notification-a{
    position: fixed;
    z-index: 11;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: table;
}
.notification-a > div{
    display: table-cell;
    text-align: center;
    vertical-align: middle; 
}
.notification-a > div > div{
    display: inline-block;
    background: #fff;
    padding: 30px 50px;
    border-radius: 10px;
    max-width: 400px;
}
/*notification type-b toast notification similar to facebook*/
/*an inline block notification that will fade out after n seconds*/
.notification-b{
    position: fixed !important;
    bottom: 20px;
    right: 20px;
    z-index: 11;
    font-size: 1.17em;
    border: 1px solid transparent;
    background: rgba(0,0,0,0.8);
    padding: 15px 25px;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
}
.notification-b > p{
    display: inline-block; float: left; margin:0;
}
.notification-b > span{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    float: left;
    margin-left: 20px;
    background: #4DCC2F;
}
/* for receipts */
.notification-r,
.notification-m{
    position: fixed;
    z-index: 11;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: table;
    padding: 50px 0;
}

.notification-r > div,
.notification-m > div{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.notification-r > div > div,
.notification-m > div > div{
    display: inline-block;
    background: #fff;
    padding: 20px 40px;
    border-radius: 10px;
    max-width: 610px;
}

/* WARNING:spacer increments 5 px margin top and bottom each*/
.spacer{
    display: block;
    overflow: hidden;
}
.spacera{
    margin: 5px 0;
}
.spacerb{
    margin: 20px 0;
}

#changePassword > *,
#changeMobile > *{
    display: block;
}
#changePassword > input,
#changeMobile > input{
    padding: 0.5em 0.75em; 
    width: 100%;
}
#changePassword > button,
#changeMobile > button{
    margin-top: 10px;
}

.pagenotfound{
    z-index: 11;
    background: #fff;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    display: table;
    padding: 0;
    margin: 0; 
}

.pagenotfound > div{
    display: table-cell;
    text-align: center;
    vertical-align: middle; 
}

.pagenotfound > div > div{
    display: inline-block;
}

.pagenotfound > div > div > h1{
    margin-top: 0;
}
#advanced-product-search{
    overflow: hidden;
    padding-right: 10px; 
}

/* break apart */
#advanced-product-search > div{
    margin-bottom: 20px;
}

#advanced-product-search > div > select{
    display: block;
    padding: 0.75em;
    width: 100%;
}


/* break apart */
.cart-link{
    color: #fff;
    text-align: center;
    display: block;
    padding: 1em;
    border-bottom: 1px solid #ccc;

    -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
       -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
         -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.cart-link:hover{
    background: #4DCC2F;
    color: #fff;
}
/* break apart */

#the-overflow{
    padding: 40px 25px;
}

/*------------------------------------------------------------------------------------*/
/* newcss */

/* WARNING: location search */
/* searchbox is the frame */
/* break apart */
#searchbox{
    padding: 20px; 
    background: #303030;
    z-index: 9;
}
#searchbox > input{
    padding: 0.5em 0.75em; 
    display: block; 
    width: 100%;
}
/* break apart */

#locationlist{
    margin: 0;
    padding: 0;
    max-height: 160px; /* IE 7 above */
    overflow-y: scroll;
}

#locationlist > li{
    background: #fff; 
    padding: 0.5em 0.75em;
    cursor: pointer;
}

#locationlist > li:hover{
    background: #f8f8f8;
}

/* WARNING: location search */

/*Normalize Bootstrap*/
@media (min-width: 768px) {
    
}
@media (min-width: 992px) {
    .info-container,
    .featured-products{
        padding: 2.5em 5em;
    }

    #nav-bar{
        line-height: 80px;
        float: right;
        display: block !important;
        
        position: static;

        background: transparent;
        
        height: auto;
        overflow: auto;
    }
    #nav-bar > li{
        display: inline;

        float: left;
        margin-left: 1em;
                                    /*background: transparent;*/
                                    /*padding: 0;*/
                                    /*border: 0;*/
    }
    .nav-link{
        color: #000;
        font-size: 1.17em;
        padding: 0.25em 0.5em;

        display: inline;

        border: 0;


        -webkit-transition-duration: 0s;
           -moz-transition-duration: 0s;
             -o-transition-duration: 0s;
                transition-duration: 0s;
    }
    .nav-link:hover{
        border-bottom: 3px solid #4DCC2F;
        background: transparent;
        color: #000;
    }
    /* class chaining router link */
    .router-link-active.nav-link{
        border-bottom: 3px solid #4DCC2F;
        background: transparent;
        color: #000;
    }
    /* class chaining router link */
    .cta{
        display: inline;
        color: #000;
        font-size: 1.17em;
        border: 1px solid #2b2b2b;
        border-radius: 1.5em;
        padding: 0.75em 1em;
        
        -webkit-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
           -moz-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
             -o-transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
                transition: all .3s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .cta:hover{
        border: 1px solid #2b2b2b;
        background: transparent;
        color: #000;
    }

    .cta-link-perm{
        background: #4DCC2F;
        border: 1px solid transparent;
        color: #fff;
    }

    .cta-link-perm:hover{
        background: #4DCC2F;
        border: 1px solid transparent;
        color: #fff;
    }
    
    #nav-bar-mobile{
        display: none;
    }
    
    .footer-item{
        padding: 0 5em;
    }
    
    .footer-item > h2{
        text-align: left;
        padding-bottom: 0; 
        border-bottom: 0;
    }
    
    .footer-item > p{
        text-align: left;
    }

    .cta-section-2 > a{
        font-size: 1.5em;
    }
    .cta-section-2 > a:hover{
        padding: 0.75em 2em;
    }
    
    #log-in{
        padding: 5em;
    }
    
    #supplierinfo{
        padding: 3em 1em;
        background: transparent;
    }
    
    #login{
        padding: 3em 5em;
        background: transparent;
        color: #fff;
    }
    #register{
        padding: 3em;
        border-radius: 1.5em;
    }
    #suppliersidebar,
    #adminsidebar{
        display: block;
    }
    .supplier-sidebar,
    .admin-sidebar{
        margin-left: 250px;
    }
    .component-padding{
        padding: 3em;
    }
    .product-data > h2{
        margin: 0 0 20px;
    }
    /*
    .product-specs{
        padding-left: 20px;
    }
    */
    .header-type-e{
        display: inline-block; 
        font-size: 1.5em;
        text-align: left;
    }
    .product-item-admin{
        padding: 0 30px;
    }
    #accountselectrow{
        padding: 0 50px;
    }
    .button-type-g{
        display: inline-block;
        padding: 0.75em 5em;
        margin: 10px 0 20px;
    }

    /*overflow toggle */

    .overflow-toggle{
        overflow: auto;
    }

    #product-search{
        padding-right: 10px;
    }

    /* break apart */
    #product-search > div{
        display: inline-block; 
        vertical-align: middle; 
        float: right;
        margin: 0.755em 0;
    }

    #product-search > div > *{
        display: inline-block;
        padding: 0.75em;
        width: auto;
    }
    /* break apart */

    /* break apart */
    #advanced-product-search > div{
        float: right;
        margin: 0.755em 0;
    }
    #advanced-product-search > div > select{
        display: inline-block;
        padding: 0.75em;
        width: auto;
    }
    /* break apart */
    /* break apart */
    #searchbox{
        padding: 20px; 
        position: absolute !important;
        top: 10px;
        right: 10px;
        background: rgba(0,0,0,0.7);
        z-index: 9; 
        width: 250px;
    }
    #searchbox > input{
        padding: 0.5em 0.75em; 
        display: block; 
        width: 100%;
    }
    /* break apart */
    /* break apart */
    .cart-link{
        color: #000;
        text-align: left;
        display: inline;
        border: 0;
    }
    .cart-link:hover{
        background: transparent;
        color: #000;
    }
    /* break apart */

    .about-item-info{
        padding-right: 3em;
    }

    .link-section{
        padding: 5em;
    }

    #products{
        padding-top: 40px;
        padding-bottom: 40px;
        /* custom style */
        padding-left: 30px;
        padding-right: 30px;
    }

    #the-overflow{
        padding: 40px 70px;
    }

    #footer,
    #copyright{
        padding: 1em 2.5em;
    }
}
@media (min-width: 1200px) {
    
}