/* -- quantity box -- */



.quantity {

 display: inline-block; }



.quantity .input-text.qty {

 width: 35px;

 height: 39px;

 padding: 0 5px;

 text-align: center;

 background-color: transparent;

 border: 1px solid #efefef;

}



.quantity.buttons_added {

 text-align: left;

 position: relative;

 white-space: nowrap;

 vertical-align: top; }



.quantity.buttons_added input {

 display: inline-block;

 margin: 0;

 vertical-align: top;

 box-shadow: none;

}



.quantity.buttons_added .minus,

.quantity.buttons_added .plus {

 padding: 7px 10px 8px;

 height: 39px;

 background-color: #ffffff;

 border: 1px solid #efefef;

 cursor:pointer;}



.quantity.buttons_added .minus {

 border-right: 0; }



.quantity.buttons_added .plus {

 border-left: 0; }



.quantity.buttons_added .minus:hover,

.quantity.buttons_added .plus:hover {

 background: #eeeeee; }



.quantity input::-webkit-outer-spin-button,

.quantity input::-webkit-inner-spin-button {

 -webkit-appearance: none;

 -moz-appearance: none;

 margin: 0; }

 

 .quantity.buttons_added .minus:focus,

.quantity.buttons_added .plus:focus {

 outline: none; }







.mySlides {display: none}

img {vertical-align: middle;}



/* Slideshow container */

.slideshow-container {

  max-width: 1000px;

  position: relative;

  margin: auto;

}

/*/*



cart icon,header footer color,slider icon,



/* Next & previous buttons */

/*.prev, .next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  padding: 16px;

  margin-top: -22px;

  color: white !important;

  font-weight: bold;

  font-size: 18px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

}



/* Position the "next button" to the right *

.next {

  right: 0;

  border-radius: 3px 0 0 3px;

}



/* On hover, add a black background color with a little bit see-through *

.prev:hover, .next:hover {

  background-color: rgba(0,0,0,0.8);

}*/*/*/



/* Caption text */

/*.text {

  color: #f2f2f2;

  font-size: 15px;

  padding: 8px 12px;

  position: absolute;

  bottom: 8px;

  width: 100%;

  text-align: center;

}*/



/* Number text (1/3 etc) */

/*.numbertext {

  color: #f2f2f2;

  font-size: 12px;

  padding: 8px 12px;

  position: absolute;

  top: 0;

}*/



/* The dots/bullets/indicators */

/*.dot {

  cursor: pointer;

  height: 15px;

  width: 15px;

  margin: 0 2px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

}*/



/*.active, .dot:hover {

  background-color: #717171;

*/}



/* Fading animation */

/*.fade {

  -webkit-animation-name: fade;

  -webkit-animation-duration: 1.5s;

  animation-name: fade;

  animation-duration: 1.5s;

}



@-webkit-keyframes fade {

  from {opacity: .4} 

  to {opacity: 1}

}



@keyframes fade {

  from {opacity: .4} 

  to {opacity: 1}

}

*/

/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {

  .prev, .next,.text {font-size: 11px}

}





 @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900|Rubik:300,400,500,700,900');



 * {

     margin: 0;

     padding: 0;

     -webkit-font-smoothing: antialiased;

     -webkit-text-shadow: rgba(0, 0, 0, .01) 0 0 1px;

     text-shadow: rgba(0, 0, 0, .01) 0 0 1px

 }



/* body {

     font-family: 'Rubik', sans-serif;

     font-size: 14px;

     font-weight: 400;

     background: #eff6fa;

     color: #000000

 }*/



 div {

     display: block;

     position: relative;

     -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

     box-sizing: border-box

 }



 .bbb_viewed {



    

     background: #eff6fa

 }



 .bbb_main_container {

     background-color: #fff;

    

 }



 .bbb_viewed_title_container {

     border-bottom: solid 1px #dadada

 }



 .bbb_viewed_title {

     margin-bottom: 16px;

     margin-top: 8px

 }



 .bbb_viewed_nav_container {

     position: absolute;

     right: -5px;

     bottom: 14px

 }



 .bbb_viewed_nav {

     display: inline-block;

     cursor: pointer

 }



 .bbb_viewed_nav i {

     color: #dadada;

     font-size: 18px;

     padding: 5px;

     -webkit-transition: all 200ms ease;

     -moz-transition: all 200ms ease;

     -ms-transition: all 200ms ease;

     -o-transition: all 200ms ease;

     transition: all 200ms ease

 }



 .bbb_viewed_nav:hover i {

     color: #606264

 }



 .bbb_viewed_prev {

     margin-right: 15px

 }



 .bbb_viewed_slider_container {

     padding-top: 13px

 }



 .bbb_viewed_item {

     width: 100%;

     background: #FFFFFF;

     border-radius: 2px;

     

     padding-bottom: 25px;

     padding-left: 40px;

     padding-right: 30px

 }



 .bbb_viewed_image {

     width: 100%;

     height: 150px

 }



 .bbb_viewed_image img {

     display: block;

     max-width: 100%

 }



 .bbb_viewed_content {

     width: 100%;

     margin-top: 25px

 }



 .bbb_viewed_price {

     font-size: 16px;

     color: #000000;

     font-weight: 500

 }



 .bbb_viewed_item.discount .bbb_viewed_price {

     color: #df3b3b

 }



 .bbb_viewed_price span {

     position: relative;

     font-size: 12px;

     font-weight: 400;

     color: rgba(0, 0, 0, 0.6);

     margin-left: 8px

 }



 .bbb_viewed_price span::after {

     display: block;

     position: absolute;

     top: 6px;

     left: -2px;

     width: calc(100% + 4px);

     height: 1px;

     background: #8d8d8d;

     content: ''

 }



 .bbb_viewed_name {

     margin-top: 3px

 }



 .bbb_viewed_name a {

     font-size: 14px;

     color: #000000;

     -webkit-transition: all 200ms ease;

     -moz-transition: all 200ms ease;

     -ms-transition: all 200ms ease;

     -o-transition: all 200ms ease;

     transition: all 200ms ease

 }



 .bbb_viewed_name a:hover {

     color: #0e8ce4

 }



 .item_marks {

     position: absolute;

     top: 18px;

     left: 18px

 }



 .item_mark {

     display: none;

     width: 36px;

     height: 36px;

     border-radius: 50%;

     color: #FFFFFF;

     font-size: 10px;

     font-weight: 500;

     line-height: 36px;

     text-align: center

 }



 .item_discount {

     background: #df3b3b;

     margin-right: 5px

 }



 .item_new {

     background: #0e8ce4

 }



 .bbb_viewed_item.discount .item_discount {

     display: inline-block

 }



 .bbb_viewed_item.is_new .item_new {

     display: inline-block

 }

 body {

  font-family: Arial;

  margin: 0;

}



* {

  box-sizing: border-box;

}



img {

  vertical-align: middle;

}



.container {

  /*position: relative;

  padding: 80px;

  // max-width: 1000px;

  // margin: 0 auto;*/

}



/* .holder {

  display: flex;

  overflow-x: auto;

  overflow-y: hidden;

} 



.holder::-webkit-scrollbar {

  display: none;

}



/* Hide the images by default */

.slides {

  display: none;

  /* max-width: 1000px; */

  /* width: 100%;

  flex-shrink: 0;

  height: 100%; */

}



.slides img {

  width: 100%;

}



/* Smartphones (portrait and landscape) ----------- */

@media only screen and (max-width: 600px) {

  .prevContainer,

  .nextContainer {



  }

}



.prevContainer,

.nextContainer {

 

  position: absolute;

 margin-top:-160px;

  transform: translate(0, calc(-50% - 54px));

  height: 54px;

  width: 54px;

  cursor: pointer;

}



.prevContainer {

  margin-left: 26px;

  left: 0;

  border-radius: 30px 0 0 30px;

}



.prev {

  position: relative;

  transform: translate(0, -50%);

  width: 32px;

  float: left;

  margin-left: 12px

}



.prev svg,

.next svg {

  fill: white;

}



.nextContainer {

  margin-right: 26px;

  right: 0;

  border-radius: 0 30px 30px 0;

}



.next {

  position: relative;

 

  transform: translate(0, -50%);

   width: 32px;

  float: right;

  margin-right: 12px;

}



/* Container for image text */

.caption-container {

  text-align: left;

  background-color: #222;

  padding: 2px 16px;

  color: white;

}



.row:after {

  content: "";

  display: table;

  clear: both;

}



/* Six columns side by side */

.column {

  float: left;

  width: 16.66%;

}



/* Add a transparency effect for thumbnail images */

.slide-thumbnail {

  width: 100%;

  opacity: 0.6;

  cursor: pointer;

}



.active,

.slide-thumbnail:hover {

  opacity: 1;

}

#mobile{

    display: none;

}

.fb{

background-color: #eb1f4a;

border-color:#eb1f4a;

font-size: 12px;

height:30px;margin-right: 10px;margin-bottom:2px;

}

 @media (max-width: 700px){

    #desktop{

        display: none;

    }



.fb{

background-color: #eb1f4a;border-color:#eb1f4a;font-size: 12px;height:30px;margin-right: 10px;float: right;margin-bottom:2px;

}

    #mobile{

        display: block;

    }

 }

 ///





 #myImg {

    border-radius: 5px;

    cursor: pointer;

    transition: 0.3s;

    display: block;

    margin-left: auto;

    margin-right: auto

}



#myImg:hover {opacity: 0.7;}



/* The Modal (background) */

.modal {

    display: none; /* Hidden by default */

    position: fixed; /* Stay in place */

    z-index: 1; /* Sit on top */

    padding-top: 100px; /* Location of the box */

    left: 0;

    top: 0;

    width: 100%; /* Full width */

    height: 100%; /* Full height */

    overflow: auto; /* Enable scroll if needed */

    background-color: rgb(0,0,0); /* Fallback color */

    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */

}



/* Modal Content (image) */

.modal-content {

    margin: auto;

    display: block;

    width: 75%;

    //max-width: 75%;

}



/* Caption of Modal Image */

#caption {

    margin: auto;

    display: block;

    width: 80%;

    max-width: 700px;

    text-align: center;

    color: #ccc;

    padding: 10px 0;

    height: 150px;

}



/* Add Animation */

.modal-content, #caption {

    -webkit-animation-name: zoom;

    -webkit-animation-duration: 0.6s;

    animation-name: zoom;

    animation-duration: 0.6s;

}



.out {

  animation-name: zoom-out;

  animation-duration: 0.6s;

}



@-webkit-keyframes zoom {

    from {-webkit-transform:scale(1)}

    to {-webkit-transform:scale(2)}

}



@keyframes zoom {

    from {transform:scale(0.4)}

    to {transform:scale(1)}

}



@keyframes zoom-out {

    from {transform:scale(1)}

    to {transform:scale(0)}

}



/* The Close Button */

.close {

    position: absolute;

    top: 15px;

    right: 35px;

    color: #f1f1f1;

    font-size: 40px;

    font-weight: bold;

    transition: 0.3s;

}



.close:hover,

.close:focus {

    color: #bbb;

    text-decoration: none;

    cursor: pointer;

}



/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px){

    .modal-content {

        width: 100%;

    }

}