/* navigation bar style starts here*/
.navbar-toggler:active{
    outline:none;
   }

.navbar-toggler:focus{
    outline:none;
   }

a:hover{
    background-color:white;
    color:black;
}

a:active{
    background-color:white;
    color:black;
}

a:link{
    color:black;
}
/* navigation bar style ends here*/

.numberCircle /*for items count in cart*/
    {
        /*width: 20px;*/
        /*line-height: 20px;*/
        border-radius: 50%;
        text-align: center;
        font-size: 8px;
        /*border: 1px solid #666;*/
        color:white;
        background-color:red;
        padding-left: 6px;
        padding-right:6px;
        padding-top:3px;
        padding-bottom:3px;
        vertical-align: 8px;
    }
    
.soldbystyle
{
    font-size:12px;
}


.span_freedelivery
{
    font-weight:bold;
}

.pricestyle
{
    color:brown;
    font-size:18px;
    font-weight:bold;
}

/*style from icyspicy for all modal boxes
/*ADD button formatting*/
  .button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 6px;
}


.buttonadd {
    color:white;
    background-color:#F80AAC;
}

.buttonadd:hover {
  background-color: red;
  color: white;
}



.buttonheart {
  background-color: white; 
  color: gray; 
 /* border: 2px solid #f44336;*/
}

.buttonheart:hover {
  /*background-color: #FF6F06;*/
  color: red;
}

/*end ADD button format*/

/* PLUS + button format*/
  .buttonplus {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 20%;
}

.buttonplusplus{
  background-color: gray; 
  color: white; 
  /*border: 2px solid #f44336;*/
}

.buttonplusplus:hover {
  background-color: #282828;
  color: white;
}


/*Modal Dialog Box start*/

    #modal
    {
      display:none;
      position:fixed;
      z-index:10;
      
      width:100%;
      height:100%;
      overflow:auto;
      background-color:rgb(0,0,0);
      background-color: rgb(0,0,0,0.4);
      margin-top:0px;
    overflow:scroll;
    }

    .modal-content
    {
      background-color:white;
      /*margin:5% auto;*/
      padding-bottom:600px; /*set the height of modal box so that behind window doesnt scroll*/
      border:1px  solid #888;
      width:100%;
      min-height:100%;
      height:auto;
      /*margin-bottom: 50px;*/
    }
/*
    .modal-header
    {
      padding:2px;
      background-color: green;
      color:white;
    }
*/
    .modal-body
    {
      padding:2px 16px;
    }
/*
    .modal-footer
    {
      padding:2px;
      background-color: red;
      color:white;
    }
*/
    
    .modaltitle
    {
      color:white;
      /*float:right; /*as this float was not working so text-align is used below*/
      text-align: left;
      font-size:20px;
      /*font-weight:bold;*/
      /*padding-top:4px;*/
      /*padding-right:22px;*/
      background-color:#EE1ECE;
     
    }
    
    .modalclose
    {
      color:white;
      font-size:25px;
      font-weight:bold;
      /*padding-right:22px;*/
      /*background-color:white;*/
      float:right;
      
      border-radius:50%;
      padding:5px;
      
      margin-right:15px;
      margin-top:-8px;
    }
    
    

    .modalclose:hover, .modalclose:focus
    {
      color:red;
      text-decoration: none;
      cursor:pointer;
    }

    .modalfooterclass
    {
      position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: red;
        color: white;
        text-align: center;
      }

/*modal dialogbox ends*/



/*cart modal dialogbox starts*/

    #cart-main
    {
      display:none;
      position:fixed;
      z-index:15;
      left:0;
      top:0;
      width:100%;
      height:100%;
      overflow:auto;
      background-color:#A7A3A5;
      /*opacity:0.9;*/
      box-shadow:5px 10px 8px #888888;
      background-color: rgb(0,0,0); /* Fallback color */ 
      background-color: rgba(0,0,0,0.6); /* Black w/ opacity  set to rgba(0, 0, 0, 0.4) for gray color*/
    
      
      /*Use this below animation for background fadeIn*/
      -webkit-animation-name: fadeIn; /* Fade in the background */
      -webkit-animation-duration: 0.6s;
      animation-name: fadeIn;
      animation-duration: 0.6s
      /*background fadein animation ends here*/
  
      /*-webkit-animation-name: slideIn;
      -webkit-animation-duration: 0.6s;
      animation-name: slideIn;
      animation-duration: 0.6s*/
    }

    .cart-main-content
    {
      /*box-shadow:5px 10px 8px #888888;*/
      background-color:#EFEEEE;
      padding:8px; /*will effect table contents width*/
      width:60%;
      min-height:100%;
      height:auto
      -webkit-animation-name: slideIn;
      -webkit-animation-duration: 0.6s;
      animation-name: slideIn;
      animation-duration: 0.6s
      position:fixed;
      left:0;
      font-size:12px;
    }

    .cart-main-body
    {
      padding:2px 16px;
    }

    .cart-main-close
    {
      color:black;
      float:right;
      font-size:25px;
      /*font-weight:bold;*/
      top:0;
      padding:right:10px;
      padding:bottom:10px;
     }

    .cart-main-close:hover, .cart-main-close:focus
    {
      color:red;
      text-decoration: none;
      cursor:default;
    }
    
    .cart-table-format
    {
      border-collapse: collapse;
      /*border:1px black solid;*/
      width:100%;
      color:black;
      margin-bottom:120px;
    }

    .cart-row-format
    {
      border-collapse: collapse;
      /*border :1px black solid;  */
    }

    .td 
    {
      /*background-color: linen;*/
    }

    .cartfooterclass
    {
      position: fixed;
        left: 0;
        bottom:0;
        width: 60%;
        background-color: orange;
        color: white;
        text-align: center;
        font-size:12px;
        height:100px;
        cursor:default;
        -webkit-animation-name: slideIn;
      -webkit-animation-duration: 1s;
      animation-name: slideIn;
      animation-duration: 1s
    }
    
    
/* Add Animation */
@-webkit-keyframes slideIn {
  from {left: -300px; opacity: 0} 
  to {left: 0; opacity: 1} /*set opacity to 0.9 if you need glass effect and also set the opacity of cart-main to 0.9*/
}

@keyframes slideIn {
  from {left: -300px; opacity: 0}
  to {left: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1} 
}




/*style for previous orders modal box starts here*/

    #previousorders-cart-main
    {
      display:none;
      position:fixed;
      z-index:15;
      left:0;
      top:0;
      width:100%;
      height:100%;
      overflow:auto;
      background-color:#A7A3A5;
      /*opacity:0.9;*/
      box-shadow:5px 10px 8px #888888;
      background-color: rgb(0,0,0); /* Fallback color */ 
      background-color: rgba(0,0,0,0.6); /* Black w/ opacity  set to rgba(0, 0, 0, 0.4) for gray color*/
    
      
      /*Use this below animation for background fadeIn*/
      -webkit-animation-name: fadeIn; /* Fade in the background */
      -webkit-animation-duration: 0.6s;
      animation-name: fadeIn;
      animation-duration: 0.6s
      /*background fadein animation ends here*/
  
      /*-webkit-animation-name: slideIn;
      -webkit-animation-duration: 0.6s;
      animation-name: slideIn;
      animation-duration: 0.6s*/
    }

    .previousorders-cart-main-content
    {
      /*box-shadow:5px 10px 8px #888888;*/
      background-color:#EFEEEE;
      padding:8px; /*will effect table contents width*/
      width:100%;
      min-height:100%;
      height:auto
      -webkit-animation-name: slideIn;
      -webkit-animation-duration: 0.6s;
      animation-name: slideIn;
      animation-duration: 0.6s
      position:fixed;
      left:0;
      font-size:12px;
    }

    .previousorders-cart-main-body
    {
      padding:2px 16px;
    }

    .previousorders-cart-main-close
    {
      color:black;
      float:right;
      font-size:25px;
      /*font-weight:bold;*/
      top:0;
      padding:right:10px;
      padding:bottom:10px;
     }

    .previousorders-cart-main-close:hover, .previousorders-cart-main-close:focus
    {
      color:red;
      text-decoration: none;
      cursor:default;
    }
    
    .previousorders-cart-table-format
    {
      border-collapse: collapse;
      /*border:1px black solid;*/
      width:100%;
      color:black;
      margin-bottom:120px;
    }

    .previousorders-cart-row-format
    {
      border-collapse: collapse;
      /*border :1px black solid;  */
    }

    .td 
    {
      /*background-color: linen;*/
    }

    .previousorders-cartfooterclass
    {
      position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: orange;
        color: white;
        text-align: center;
        font-size:13px;
        height:70px;
        cursor:default;
        -webkit-animation-name: slideIn;
      -webkit-animation-duration: 1s;
      animation-name: slideIn;
      animation-duration: 1s
     }
    
    
/* Add Animation */
@-webkit-keyframes slideIn {
  from {left: -300px; opacity: 0} 
  to {left: 0; opacity: 1} /*set opacity to 0.9 if you need glass effect and also set the opacity of cart-main to 0.9*/
}

@keyframes slideIn {
  from {left: -300px; opacity: 0}
  to {left: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1} 
}

/*style for previousorders modal box ends here*/





/*style for trackorder starts here*/

    #trackorder-cart-main
    {
      display:none;
      position:fixed;
      z-index:15;
      left:0;
      top:0;
      width:100%;
      height:100%;
      overflow:auto;
      background-color:#A7A3A5;
      /*opacity:0.9;*/
      box-shadow:5px 10px 8px #888888;
      background-color: rgb(0,0,0); /* Fallback color */ 
      background-color: rgba(0,0,0,0.6); /* Black w/ opacity  set to rgba(0, 0, 0, 0.4) for gray color*/
    
      
      /*Use this below animation for background fadeIn*/
      -webkit-animation-name: fadeIn; /* Fade in the background */
      -webkit-animation-duration: 0.6s;
      animation-name: fadeIn;
      animation-duration: 0.6s
      /*background fadein animation ends here*/
  
      /*-webkit-animation-name: slideIn;
      -webkit-animation-duration: 0.6s;
      animation-name: slideIn;
      animation-duration: 0.6s*/
    }

    .trackorder-cart-main-content
    {
      /*box-shadow:5px 10px 8px #888888;*/
      background-color:#EFEEEE;
      padding:8px; /*will effect table contents width*/
      width:60%;
      min-height:100%;
      height:auto
      -webkit-animation-name: slideIn;
      -webkit-animation-duration: 0.6s;
      animation-name: slideIn;
      animation-duration: 0.6s
      position:fixed;
      left:0;
      font-size:12px;

      
    }

    .trackorder-cart-main-body
    {
      padding:2px 16px;
    }

    .trackorder-cart-main-close
    {
      color:black;
      float:right;
      font-size:25px;
      /*font-weight:bold;*/
      top:0;
      padding:right:10px;
      padding:bottom:10px;
     }

    .trackorder-cart-main-close:hover, .trackorder-cart-main-close:focus
    {
      color:red;
      text-decoration: none;
      cursor:default;
    }
    
    .trackorder-cart-table-format
    {
      border-collapse: collapse;
      /*border:1px black solid;*/
      width:100%;
      color:black;
      margin-bottom:120px;
    }

    .trackorder-cart-row-format
    {
      border-collapse: collapse;
      /*border :1px black solid;  */
    }

    .td 
    {
      /*background-color: linen;*/
    }

    .trackorder-cartfooterclass
    {
      position: fixed;
        left: 0;
        bottom: 0;
        width: 60%;
        background-color: orange;
        color: white;
        text-align: center;
        font-size:13px;
        height:70px;
        cursor:default;
        -webkit-animation-name: slideIn;
      -webkit-animation-duration: 1s;
      animation-name: slideIn;
      animation-duration: 1s;
    }
    
    
/* Add Animation */
@-webkit-keyframes slideIn {
  from {left: -300px; opacity: 0} 
  to {left: 0; opacity: 1} /*set opacity to 0.9 if you need glass effect and also set the opacity of cart-main to 0.9*/
}

@keyframes slideIn {
  from {left: -300px; opacity: 0}
  to {left: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1} 
}
/*style for trackorder ends here*/








/*style for contact page starts here*/

    
    #contact-main
    {
      display:none;
      position:fixed;
      z-index:10;
      left:0;
      top:0;
      width:100%;
      height:100%;
      overflow:auto;
      background-color:#A7A3A5;
      /*opacity:0.9;*/
      /*box-shadow:5px 10px 8px #888888;*/
      /*background-color: rgb(255,255,255); /* Fallback color */ 
      /*background-color: rgba(255,255,255,0.1); /* Black w/ opacity  set to rgba(0, 0, 0, 0.4) for gray color*/
    
      
      /*Use this below animation for background fadeIn*/
      /*-webkit-animation-name: fadeIn; /* Fade in the background */
      /*-webkit-animation-duration: 0.6s;
      animation-name: fadeIn;
      animation-duration: 0.6s*/
      /*background fadein animation ends here*/
  
      -webkit-animation-name: slideIn;
      -webkit-animation-duration: 0.6s;
      animation-name: slideIn;
      animation-duration: 0.6s
    }

    .contact-main-content
    {
      /*box-shadow:5px 10px 8px #888888;*/
      background-color:white;
      padding:20px;
      width:100%;
      min-height:100%;
      height:auto
      -webkit-animation-name: slideIn;
      -webkit-animation-duration: 0.6s;
      animation-name: slideIn;
      animation-duration: 0.6s
      position:fixed;
      left:0;
    }

    .contact-main-body
    {
      padding:2px 16px;
    }

    .contact-main-close
    {
      color:black;
      float:right;
      font-size:25px;
      /*font-weight:bold;*/
      top:0;
      padding-right:10px;
      padding-bottom:10px;
     }

    .contact-main-close:hover, .contact-main-close:focus
    {
      color:red;
      text-decoration: none;
      cursor:default;
    }
    
    .contact-table-format
    {
      border-collapse: collapse;
      /*border:1px black solid;*/
      width:100%;
      color:black;
    }

    .contact-row-format
    {
      border-collapse: collapse;
      /*border :1px black solid;  */
    }

    .td 
    {
      /*background-color: linen;*/
    }

    .contactfooterclass
    {
      position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: red;
        color: white;
        text-align: center;
        font-size:18px;
        height:40px;
        margin-bottom:10px;
    }
    
    
/* Add Animation */
@-webkit-keyframes slideIn {
  from {left: -300px; opacity: 0} 
  to {left: 0; opacity: 1}
}

@keyframes slideIn {
  from {left: -300px; opacity: 0}
  to {left: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}
/*cart modal dialogbox ends*/





/*For sticky category menu */

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color:white;
  /*border: 2px solid #4CAF50;*/
  z-index:4;
  font-size:17px;
  color:#EB0FB5;
  /*opacity:0.5;*/
}

/* horizontal scroll bar sticky categories*/
div.scrollmenu {
  background-color:white;
  overflow: auto;
  white-space: nowrap;
  
}

div.scrollmenu a {
  display: inline-block;
  text-align: center;
  padding: 4px;
  text-decoration: none;
}


div.scrollmenu a:hover {
  background-color: orange;
  color:white;
  border-radius:5px;
}


a.a_link_stickymenu{
    background-color:white;
    border-radius:4px;
    cursor:default;
    color:white;
}

.productimage /*big screen size*/
{ 
    padding-top:20px;
    z-index:1;
    height:150px;
}

div.container 
{
    /*width:100%;font-size:35px;margin-bottom:10px; earlier values working fine*/
    font-size:25px;margin-bottom:10px;
}


   .divTable
    {
        display:  table;
        width:100%;
        /*background-color:#eee;*/
        /*border:1px solid  #666666;*/
        /*border-spacing:5px;/*cellspacing:poor IE support for  this*/
       /* border-collapse:separate;*/
    }
    .divRow
    {
       display:table-row;
       width:auto;
       clear:both;
    }

/*ribbon style needs this card box*/


.divCell  /*for big screen size*/
{
     text-align:left;
     /*float:left;/*fix for  buggy browsers*/
        /*width:30%;*/
        /*background-color:#ccc;*/
        text-align:center;
        /*display:table-column;*/
        /*display: table-cell; /*added this later*/
 
       width: 90%;
       height:300px;
        /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
        /*margin-left:5px;
        margin-right:5px;*/
        /*padding:10px;*/
        border-radius: 8px;
        -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
        -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
        box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
        position: relative;
        z-index: 3;
}       
    
    
/*ribbon styles*/
        
.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}
/*ribbon style ends*/


/*.div_pricestrike{
    z-index:2;position:absolute;bottom:0;left:1;
}*/

.div_price{
    z-index:2;position:absolute;float:left;bottom:10px;
}


.span_pricestrike{
    /*background-color:orange;color:white;font-size:25px;border-radius:50%;padding:20px;float:left;text-decoration:line-through;*/
    background-color:orange;color:white;border-radius:50%;padding:4px;position:relative;font-size:14px;text-decoration:line-through;
}

/*used in changeproductscateogrystorepage.php as well*/
.p_description{
    color:black;font-size:15px;
}

.div_name{
    width:100%;color:brown;font-size:16px;text-decoration:underline;cursor:default;
}



/*Button style*/
        .btn {
            text-decoration: none;
            border: none;
            padding: 12px 40px;
            font-size: 20px;
            background-color: green;
            color: #fff;
            border-radius: 5px;
            box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
            cursor: default;
            outline: none;
            transition: 0.2s all;
            width:70%;
        }
        /* Adding transformation when the button is active */
        
        .btn-smallsize
        {
            text-decoration: none;
            border: none;
            color: #fff;
            padding:4px;
            font-size:18px;
            background-color:orange;
            width:200px;
            border-radius: 5px;
            box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
            cursor: default;
            outline: none;
            transition: 0.2s all;
            
        }
          
        .btn:active {
            transform: scale(0.98);
            /* Scaling button to 0.98 to its original size */
            box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
            /* Lowering the shadow */
        }
/*Button style ends here*/


/*button styles for plus minus quantity*/
.quantitytextbox{
    width:25px;
    text-align:center;
    height:25px;
}
.bthplusmin
{
    font-size:12px;
    color:white;
    text-decoration: none;
    border: none;
    padding-left:6px;
    padding-right:6px;
    background-color:orange;
    box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
    cursor: default;
    outline: none;
    transition: 0.2s all;
    border-radius:2px;
}
.btnplusminus:active {
            transform: scale(0.98);
            /* Scaling button to 0.98 to its original size */
            box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
            /* Lowering the shadow */

        }
/*button styles for plus minus ends here*/
@media only screen and (max-width: 600px) 
{

    html, body{
     max-width: 100%;
    overflow-x: hidden;
    }

  .column {
    width: 100%;
    margin-left:5px;
  }


.productimage /*small screen size*/
{
    padding-top:7px;
    z-index:1;
    height:150px;
}

div.container 
{
    /*width:100%;font-size:35px;margin-bottom:10px; earlier values working fine*/
    font-size:15px;
}


   .divTable
    {
        display:  table;
        width:100%;
        /*background-color:#eee;*/
        /*border:1px solid  #666666;*/
        /*border-spacing:5px;/*cellspacing:poor IE support for  this*/
       /* border-collapse:separate;*/
    }
    .divRow
    {
       display:table-row;
       width:auto;
       clear:both;
    }

/*ribbon style needs this card box*/
    .divCell /*for small screen size*/
    {
        text-align:left;
       /*float:left;/*fix for  buggy browsers*/
        /*width:30%;*/
        /*background-color:#ccc;*/
        text-align:center;
 
        /*display:table-column;*/
        /*display: table-cell; /*added this later*/
 
       width: 90%;
       height:300px;
        /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
        /*margin-left:5px;
        margin-right:5px;*/
        padding:10px;
        border-radius: 8px;
        -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
        -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
        box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
        position: relative;
        z-index: 3;
    }

    
    
/*ribbon styles*/

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}
/*ribbon style ends*/

.p_description{
color:black;font-size:10px;
  /*overflow: hidden;*/
    /*text-overflow: clip;*/
}

.div_name{
    width:100%;color:brown;font-size:16px;text-decoration:underline;cursor:default;
}

.div_price{
       z-index:2;position:absolute;float:left;bottom:10px;
}

.span_pricestrike{
  /*  background-color:orange;color:white;font-size:14px;border-radius:50%;padding:3px;text-decoration:line-through;*/
    background-color:orange;color:white;border-radius:50%;padding:4px;position:relative;font-size:12px;text-decoration:line-through;
}



/*Button style*/
        .btn {
            text-decoration: none;
            border: none;
            padding: 6px 20px;
            font-size: 14px;
            background-color: green;
            color: #fff;
            border-radius: 5px;
            box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
            cursor: default;
            outline: none;
            transition: 0.2s all;
            width:70%;
        }
        /* Adding transformation when the button is active */
        
        .btn:active {
            transform: scale(0.98);
            /* Scaling button to 0.98 to its original size */
            box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
            /* Lowering the shadow */
        }
/*Button style ends here*/

}



/*page footer style for checkout button at the bottom*/
        .pagefooterclass
    {
      position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        /*background-color: red;*/
        color: white;
        text-align: center;
        font-size:18px;
        height:40px;
        cursor:default;
        z-index:12;
    }
/*page footer style ends here*/