/* Styles for product_info.php, picture gallery etc. */
/*
  Class .mobilebodywrapper in mts/includes/common_styles.css is 
  used to place the top bar .mproductsnext
*/

/*.kortshop_mbreadcrumblayer {
  width:99%;
  text-align:left;
  margin-top:40px;
  margin-bottom:-25px;  
}*/

#paperopt img {
  width:100%;
}
    
#piGal {
  width:100%;
}
#piGal ul {
  list-style-type: none;
}

#piGal .outer {
  /*margin-left: -30px;*/
}
  
#piGal .bx-pinfopager {
  margin-top:0px;
  width:100%;
  margin-left:0px;
  margin-bottom:0px;
}

#piGal .bx-wrapper {
  /*width:450px;*/
  width:100%; 
  margin-left:0px;
  margin-bottom:0px;
  /*margin-bottom:4px;*/
}

#piGal .pibxslider img {
  width:100%;
  height:auto;
}

#bx-pinfopager {
  display:block;
}

#bx-pinfopager img {
  width:95px;
  height:95px;
}

.mproductsnext {
  width:99%;
  height:32px;
  /*bottom:0%;*/
  margin-top:0px;
  margin-left:-6px;
  padding-top:4px;
  background-color:#EEEEEE;
  position:fixed;
  z-index:1988;
  /*border:#009900 12px dashed;*/
}

.bx-pinfopager a {
  display: block;
}

#rightfloat {
  float:right;
  width:42%;
}   

#cleartop {
  display:none;
}

#leftfloat {
  float:left;
  text-align:center;
  color:#000000;
  margin-top:25px;
}

.bx-wrapper .bx-caption {
  /*position: absolute;
  bottom: 0;
  left: 0;*/
  /*background: #666;
  background: rgba(80, 80, 80, 0.75); */
  width: 100%;
}
.bx-wrapper .bx-caption span {
  /*text-align:left;
  color: #FFFFFF;
  font-family: Arial;
  display: block;
  font-size: 10px;
  padding: 5px;
  margin-top:-35px;
  background-color:#000000;
  opacity:.5;
  font-family: Arial;*/
  display: block;
  font-size: 10px;
  padding: 5px; 
  color: #000000;
  background-color:#DDDDDD;
} 

/* Media width specifications starts here */    
@media screen and (max-width: 320px) { 
  #piGal .bx-wrapper {
    width:100%;
    max-width: 100%;
    margin-left:0px;
    /*margin-bottom:4px;*/
  }
  
  #piGal .pibxslider img {
    width:100%;
    height:auto;
    max-height: 100%;
    max-width: 100%;
  }
  
  #bx-pinfopager {
    display:block;
  }
  
  .mproductsnext {
    width:100%;
    height:32px;
    margin-top:0px;
    margin-left:-6px;
    padding-top:4px;
    padding-right:6px;
    /*background-color:#EEEEEE; */
    position:fixed;
    z-index:1988;
    /*border:#000099 12px dashed;*/
  } 
  #rightfloat {
    width:100%;
    float:none;
    /*border:#88855 8px dashed;*/ 
  }
  #leftfloat {
    max-width:320px;
    width:100%;
  }
  #cleartop {
    display:block;
  }
  .bx-wrapper .bx-caption span {
    /*font-size: 10px;
    margin-top:-60px;
    background-color:#000000;*/
  }
  #bx-pinfopager img {
    width:95px;
    height:95px;
  }
}

@media screen and (max-width: 374px) and (min-width: 321px) {  
  #piGal .bx-wrapper {
    width:100%;
    max-width: 100%;
  }
  
  #piGal .pibxslider img {
    width:100%;
    height:auto;
    max-height: 100%;
    max-width: 100%;
  }
  
  #bx-pinfopager {
    display:block;
  }
  
  .mproductsnext {
    width:100%;
    height:32px;
    margin-top:0px;
    margin-left:-6px;
    padding-top:4px;
    padding-right:6px;
    /*background-color:#EEEEEE;*/
    position:fixed;
    z-index:1988;
    /*border:#000099 12px dashed;*/
  }
  
  #rightfloat {
    width:100%;
    float:none;
    /*border:#88855 4px solid;*/ 
  }
  #leftfloat {
    max-width:374px;
    width:100%;
  }
  #cleartop {
    display:block;
  }
  .bx-wrapper .bx-caption span {
    /*font-size: 10px;
    margin-top:-60px;
    background-color:#000000;*/
  }
  #bx-pinfopager img {
    width:65px;
    height:65px;
  }
}

@media screen and (max-width: 450px) and (min-width: 375px) {  
  #piGal .bx-wrapper {
    width:100%;
    height:auto;
    margin-left:0px;
    /*margin-bottom:4px;*/
  }
  #piGal .pibxslider img {
    width:100%;
    height:auto;
    max-height: 100%;
    max-width: 100%;
  }
  
  #bx-pinfopager {
    /*display:none;*/
    width:100%; 
  }
  
  .mproductsnext {
    width:100%;
    height:32px;
    margin-top:0px;
    margin-left:-6px;
    padding-top:4px;
    padding-right:6px;
    /*background-color:#EEEEEE;*/
    position:fixed;
    z-index:1988;
    /*border:#000099 12px dashed;*/
  }
  #rightfloat {
    width:100%;
    float:none;
  }
  #leftfloat {
    max-width:450px;
    width:100%;
  }
  #cleartop {
    display:block;
  }
  .bx-wrapper .bx-caption span {
    /*font-size: 10px;
    margin-top:-55px;
    background-color:#000000;*/
  }
  #bx-pinfopager img {
    width:80px;
    height:80px;
  }
}

@media screen and (max-width: 767px) and (min-width: 451px) { 
  #piGal .bx-wrapper {
    width:100%;
  }
  #piGal .pibxslider img {
    width:100%;
    height:auto;
    max-height: 100%;
    max-width: 100%;
  }  
  #bx-pinfopager {
    width:100%;  
  }
  .mproductsnext {
    width:100%;
    height:32px;
    margin-top:0px;
    margin-left:-6px;
    padding-top:4px;
    padding-right:6px;
    /*background-color:#EEEEEE;*/
    position:fixed;
    z-index:1988;
    /*border:#990000 12px dotted;*/
  }

  #clearuppertop {
    display:block;
    /*display:block;
    height:26px;*/ 
    /*height:300px;*/
  }
  #rightfloat {
    width:100%;
    float:left;
  } 
  #leftfloat {
    max-width:767px;
    width:100%;
  }
  #cleartop {
    display:block;
  }
  .bx-wrapper .bx-caption span {
    /*font-size: 10px;
    margin-top:-57px;
    background-color:#000000;*/
  }
  #bx-pinfopager img {
    width:80px;
    height:80px;
  }
}

/*@media screen and (max-width: 767px) and (min-width: 451px) {*/ 
@media screen and (max-width: 960px) and (min-width: 768px) { 
  #piGal .bx-wrapper {
    width:100%;
  }
  #piGal .pibxslider img {
    width:100%;
    height:auto;
    max-height: 100%;
    max-width: 100%;
  }  
  #bx-pinfopager {
    width:100%;  
  }
  .mproductsnext {
    width:100%;
    height:32px;
    margin-top:0px;
    margin-left:-6px;
    padding-top:4px;
    padding-right:6px;
    /*background-color:#EEEEEE;*/
    position:fixed;
    z-index:1988;
    /*border:#990000 12px dotted;*/
  }

  #clearuppertop {
    display:none;
  }
  #rightfloat {
    width:42%;
    float:left;
    margin-top:30px;
    margin-left:20px;
  } 
  #leftfloat {
    max-width:400px;
  }
  @media screen and (min-width: 880px) {
    #leftfloat {
      max-width:450px;
    }  
  }
  #cleartop {
    display:none;
  }
  .bx-wrapper .bx-caption span {
    /*font-size: 10px;
    margin-top:-57px;
    background-color:#000000;*/
  }
  #bx-pinfopager img {
    width:85px;
    height:85px;
  }
}

@media screen and (max-width: 5000px) and (min-width: 960px) {
  #piGal .bx-wrapper {
    width:100%;
  }
  
  #piGal .pibxslider img {
    width:100%;
    max-width:100%;
  } 
  
  #bx-pinfopager {
    width:100%; 
  }
  
  .mproductsnext {
    width:100%;
    height:32px;
    margin-top:0px;
    margin-left:-6px;
    padding-top:4px;
    padding-right:6px;
    /*background-color:#EEEEEE; */
    position:fixed;
    z-index:1988;
  }
  
  #clearuppertop {
    /*display:block
    height:30px;*/
  }
  #leftfloat {
    max-width:520px;
    margin-top:5px;
  }
  
  @media screen and (max-width: 1200px) {
    #leftfloat {
      max-width:520px;
      margin-top:25px;
    }
    #rightfloat {
      width:42%;
      float:left;
      margin-top:30px;
      margin-left:20px;
    }  
  }
  /*.bx-caption {
    font-size:38px;
  }*/   
}  
  
.bx-pinfopager a:hover,
.bx-pinfopager a.active {
  /*border: solid #5280DD 1px;*/
}

.fancybox-close {
  top: 0;
  right: 0;
}

#piGal .bx-prev {
  background-image: none !important;
}

#piGal .bx-next {
  background-image: none !important;
}

/*#piGal .bx-prev {
  background-image: none !important;
}*/

.fancybox-title-over-wrap {
    width: 100%;
    padding: 0;
}

.fancybox-title-over-wrap > div {
    padding: 10px;
}


/* CLS prevention */
#piGal .pibxslider {
  transform: scale(0);
}
#piGal .pibxslider img { 
  aspect-ratio: attr(width) / attr(height);
}

#piGal .picGal img { 
  aspect-ratio: attr(width) / attr(height);
}

#bx-pinfopager img { 
  aspect-ratio: attr(width) / attr(height);
}