.bs-canvas-bg{
  background-color: #bebebe00
}
.bs-canvas-overlay {
  top: 0;
  opacity: 0.7;
  z-index: 1110;
}

.bs-canvas {
  top: 0;
  z-index: 1110;
  width: 330px;
  overflow-x: hidden;
  overflow-y: auto;
  transition: margin .4s ease-out;
  -webkit-transition: margin .4s ease-out;
  -moz-transition: margin .4s ease-out;
  -ms-transition: margin .4s ease-out;
}

.bs-canvas-left {
  left: 0;
  margin-left: -330px;
}
.bs-canvas-right {
  right: 0;
  margin-right: -330px;
}

/* @media screen and (min-width:347px) {
  .bs-canvas {
    width: 330px;
  }

} */
/* 
-----------------------------------
MENU CUSTOM
-----------------------------------
*/
.btn-close{
  opacity: 0.5;
  width:32px;
  cursor:pointer;
}
.btn-close:hover{
  opacity: 1.0;
  width:32px;
  cursor:pointer;
}



.menu-white{
  background: url('../img/bg/white-4.png') repeat top left !important;
  color:#000;
}
.menu-white:hover{
  background: url('../img/bg/white-4h.png') repeat top left !important;
  color:#000;
}

.menu-light{
  background: url('../img/bg/light-4.png') repeat top left !important;
  color:#000;
}
.menu-light:hover{
  background: url('../img/bg/light-4h.png') repeat top left !important;
  color:#000;
}

.menu-gray{
  background: url('../img/bg/gray-4.png') repeat top left !important;
  color:#000;
}
.menu-gray:hover{
  background: url('../img/bg/gray-4h.png') repeat top left !important;
  color:#000;
}

.menu-blue{
  background: url('../img/bg/blue-4.png') repeat top left !important;
  color:#000;
}
.menu-blue:hover{
  background: url('../img/bg/blue-4h.png') repeat top left !important;
  color:#000;
}

.menu-asin{
  background: url('../img/bg/asin-4.png') repeat top left !important;
  color:#000;
}
.menu-asin:hover{
  background: url('../img/bg/asin-4h.png') repeat top left !important;
  color:#000;
}

.menu-black{
  background: url('../img/bg/black-4.png') repeat top left !important;
  color:#fff;
}
.menu-black:hover{
  /* background: url('../img/hover.png') repeat top left !important; */
  background: url('../img/bg/black-4h.png') repeat top left !important;
  color:#fff;
}

.menu-brown{
  background: url('../img/bg/brown-4.png') repeat top left !important;
  color:#fff;
}
.menu-brown:hover{
  background: url('../img/bg/brown-4h.png') repeat top left !important;
  color:#fff;
}

.menu-dodger{
  background: url('../img/bg/dodger-4.png') repeat top left !important;
  color:#000;
}
.menu-dodger:hover{
  background: url('../img/bg/dodger-4h.png') repeat top left !important;
  color:#000;
}

.menu-lime{
  background: url('../img/bg/lime-4.png') repeat top left !important;
  color:#000;
}
.menu-lime:hover{
  background: url('../img/bg/lime-4h.png') repeat top left !important;
  color:#000;
}

.menu-red{
  background: url('../img/bg/red-4.png') repeat top left !important;
  color:#000;
}
.menu-red:hover{
  background: url('../img/bg/red-4h.png') repeat top left !important;
  color:#000;
}

.menu-yellow{
  background: url('../img/bg/yellow-4.png') repeat top left !important;
  color:#000;
}
.menu-yellow:hover{
  background: url('../img/bg/yellow-4h.png') repeat top left !important;
  color:#000;
}









/* 
-----------------------------------
MEDIA SCREEN
-----------------------------------
*/
@media screen and (max-width:329px) {
  .bs-canvas {
    width: 329px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-329px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -329px;
  }
}
@media screen and (max-width:328px) {
  .bs-canvas {
    width: 328px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-328px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -328px;
  }
}
@media screen and (max-width:327px) {
  .bs-canvas {
    width: 327px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-327px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -327px;
  }
}
@media screen and (max-width:326px) {
  .bs-canvas {
    width: 326px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-326px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -326px;
  }
}
@media screen and (max-width:325px) {
  .bs-canvas {
    width: 325px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-325px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -325px;
  }
}
@media screen and (max-width:324px) {
  .bs-canvas {
    width: 324px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-324px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -324px;
  }
}
@media screen and (max-width:323px) {
  .bs-canvas {
    width: 323px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-323px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -323px;
  }
}
@media screen and (max-width:322px) {
  .bs-canvas {
    width: 322px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-322px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -322px;
  }
}
@media screen and (max-width:321px) {
  .bs-canvas {
    width: 321px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-321px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -321px;
  }
}
@media screen and (max-width:320px) {
  .bs-canvas {
    width: 320px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-320px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -320px;
  }
}
@media screen and (max-width:319px) {
  .bs-canvas {
    width: 319px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-319px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -319px;
  }
}
@media screen and (max-width:318px) {
  .bs-canvas {
    width: 318px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-318px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -318px;
  }
}
@media screen and (max-width:317px) {
  .bs-canvas {
    width: 317px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-317px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -317px;
  }
}
@media screen and (max-width:316px) {
  .bs-canvas {
    width: 316px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-316px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -316px;
  }
}
@media screen and (max-width:315px) {
  .bs-canvas {
    width: 315px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-315px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -315px;
  }
}
@media screen and (max-width:314px) {
  .bs-canvas {
    width: 314px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-314px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -314px;
  }
}
@media screen and (max-width:313px) {
  .bs-canvas {
    width: 313px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-313px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -313px;
  }
}
@media screen and (max-width:312px) {
  .bs-canvas {
    width: 312px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-312px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -312px;
  }
}
@media screen and (max-width:311px) {
  .bs-canvas {
    width: 311px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-311px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -311px;
  }
}
@media screen and (max-width:310px) {
  .bs-canvas {
    width: 310px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-310px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -310px;
  }
}
@media screen and (max-width:309px) {
  .bs-canvas {
    width: 309px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-309px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -309px;
  }
}
@media screen and (max-width:308px) {
  .bs-canvas {
    width: 308px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-308px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -308px;
  }
}
@media screen and (max-width:307px) {
  .bs-canvas {
    width: 307px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-307px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -307px;
  }
}
@media screen and (max-width:306px) {
  .bs-canvas {
    width: 306px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-306px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -306px;
  }
}
@media screen and (max-width:305px) {
  .bs-canvas {
    width: 305px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-305px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -305px;
  }
}
@media screen and (max-width:304px) {
  .bs-canvas {
    width: 304px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-304px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -304px;
  }
}
@media screen and (max-width:303px) {
  .bs-canvas {
    width: 303px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-303px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -303px;
  }
}
@media screen and (max-width:302px) {
  .bs-canvas {
    width: 302px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-302px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -302px;
  }
}
@media screen and (max-width:301px) {
  .bs-canvas {
    width: 301px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-301px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -301px;
  }
}
@media screen and (max-width:300px) {
  .bs-canvas {
    width: 300px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-300px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -300px;
  }
}
@media screen and (max-width:299px) {
  .bs-canvas {
    width: 299px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-299px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -299px;
  }
}
@media screen and (max-width:298px) {
  .bs-canvas {
    width: 298px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-298px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -298px;
  }
}
@media screen and (max-width:297px) {
  .bs-canvas {
    width: 297px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-297px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -297px;
  }
}
@media screen and (max-width:296px) {
  .bs-canvas {
    width: 296px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-296px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -296px;
  }
}
@media screen and (max-width:295px) {
  .bs-canvas {
    width: 295px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-295px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -295px;
  }
}
@media screen and (max-width:294px) {
  .bs-canvas {
    width: 294px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-294px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -294px;
  }
}
@media screen and (max-width:293px) {
  .bs-canvas {
    width: 293px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-293px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -293px;
  }
}
@media screen and (max-width:292px) {
  .bs-canvas {
    width: 292px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-292px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -292px;
  }
}
@media screen and (max-width:291px) {
  .bs-canvas {
    width: 291px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-291px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -291px;
  }
}
@media screen and (max-width:290px) {
  .bs-canvas {
    width: 290px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-290px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -290px;
  }
}
@media screen and (max-width:289px) {
  .bs-canvas {
    width: 289px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-289px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -289px;
  }
}
@media screen and (max-width:288px) {
  .bs-canvas {
    width: 288px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-288px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -288px;
  }
}
@media screen and (max-width:287px) {
  .bs-canvas {
    width: 287px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-287px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -287px;
  }
}
@media screen and (max-width:286px) {
  .bs-canvas {
    width: 286px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-286px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -286px;
  }
}
@media screen and (max-width:285px) {
  .bs-canvas {
    width: 285px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-285px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -285px;
  }
}
@media screen and (max-width:284px) {
  .bs-canvas {
    width: 284px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-284px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -284px;
  }
}
@media screen and (max-width:283px) {
  .bs-canvas {
    width: 283px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-283px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -283px;
  }
}
@media screen and (max-width:282px) {
  .bs-canvas {
    width: 282px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-282px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -282px;
  }
}
@media screen and (max-width:281px) {
  .bs-canvas {
    width: 281px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-281px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -281px;
  }
}
@media screen and (max-width:280px) {
  .bs-canvas {
    width: 280px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-280px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -280px;
  }
}
@media screen and (max-width:279px) {
  .bs-canvas {
    width: 279px;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-279px;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -279px;
  }
}
@media screen and (max-width:278px) {
  .bs-canvas {
    width: 100%;
  }
  .bs-canvas-left {
    left: 0;
    margin-left:-100%;
  }
  .bs-canvas-right {
    right: 0;
    margin-right: -100%;
  }
}


























/* .bs-canvas-overlay {
  opacity: 0.85;
  z-index: 1100;
}

.bs-canvas {
top: 0;
z-index: 1110;
overflow-x: hidden;
overflow-y: auto;
width: 330px;
transition: margin .4s ease-out;
-webkit-transition: margin .4s ease-out;
-moz-transition: margin .4s ease-out;
-ms-transition: margin .4s ease-out;
}

.bs-canvas-left {
left: 0;
margin-left: -330px;
}

.bs-canvas-right {
right: 0;
margin-right: -330px;
} */