.gallery,
.galleryWrap {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}
.gallery {
  position: relative;
}
.gallery.restrict {
  max-width: 1200px;
}
.gallery ul,
.gallery li {
  list-style-type: none;
  margin: 0;
}
.gallery li img,
.gallery ul.viewer,
.gallery ul.viewer li {
  width: 100%;
}
.gallery li {
  max-height: 100%;
}
.gallery.fade ul.viewer li {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}
.gallery.fade ul.viewer li img {
  width: auto;
  max-height: 99%;
}
.gallery .v1,
.gallery .zv1 {
  position: relative !important;
}
.v1,
.zv1,
.static li {
  display: block !important;
}
.lc,
.rc,
.zlc,
.zrc {
  display: block;
  float: left;
  position: absolute;
  cursor: pointer;
  z-index: 3;
  width: 50px;
  margin: 0 20px;
  background-image: url("../img/devol_sprite.png");
  background-position: -9px 50%;
  top: 0%;
  height: 100%;
  background-repeat: no-repeat;
}
.lc,
.zlc {
  left: 0;
}
.rc,
.zrc {
  background-position: -50px 50%;
  right: 0;
}
.fs {
  float: right;
  position: relative;
  cursor: pointer;
  z-index: 2;
  background-image: url("../images/devol_sprite.png");
  background-position: 40px -75px;
  background-repeat: no-repeat;
  width: 135px;
  height: 24px;
  background-color: #f2f2f2;
  top: -150px;
  margin-right: 20px;
  text-align: left;
  padding: 6px 0 0 10px;
}
.thumbs {
  margin: 0 -0.82% !important;
  width: 101.64%;
  clear: both;
  list-style: none;
}
.col8 .thumbs {
  margin: 0 -2.5% !important;
  width: 105%;
}
.thumbs li {
  cursor: pointer;
  float: left;
  margin: 1% 0.82% 0 0.82%; /* 8/976 */
  width: 15.02%;
  width: 12.64%;
  opacity: 0.85;
  list-style: none;
  display: inline-block;
  position: relative;
  text-align: center;
}
.thumbs li:after {
  content: "";
  display: block;
  margin-top: 44.5%;
}
.thumbs li div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  text-align: center;
  /*background-color:#f2f2f2;*/
}
.thumbs li img {
  height: 100%;
  width: auto;
  max-width: none;
  text-align: center;
}
/* .accessory .thumbs li img {
  max-width:100%;
  height:auto;
} */
/* .accessory .thumbs li:after {
  margin-top: 0;
} */
.thumbs li:hover {
  opacity: 1;
}
.col8 .thumbs li {
  width: 17.52%;
  margin: 1% 1.24%;
}
/* .col8 .portrait .thumbs li {
  width:17.52%;
  margin:0 1%
} */

@media all and (max-width: 415px) {
  #wrap.portPad .thumbs {
    display: none;
  }
}

@media only screen and (min-width: 500px) {
  .lc,
  .rc {
    display: block !important;
    width: 50%;
    background-image: url("https://www.devolkitchens.live/sites/all/themes/devol/img/ui/left@3x.png");
    background-size: 20px 30px;
    text-align: left !important;
    /*background-position:right 750px center;*/
  }
  .rc {
    text-align: right !important;
    background-image: url("https://www.devolkitchens.live/sites/all/themes/devol/img/ui/right@3x.png");
    /*background-position:750px center;*/
  }
}
.thumbs {
  height: 80px !important;
  max-width: 1175px;
  margin: 1em auto !important;
  display: block;
  width: 100%;
  overflow: hidden;
}
.tmask {
  width: 5000px;
  /*added */
  max-width: 962px;
}
.thumbs li {
  width: auto;
  margin: 0;
  padding: 0 0.3em;
}
.thumbs li div {
  text-align: left;
  width: auto;
  height: 62px !important;
  position: relative;
}
.thumbs li:first-child {
  margin-left: 0;
}
.thumbs li:last-child {
  margin-right: 0;
}
.drag {
  overflow-x: hidden; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}
#drag2::-webkit-scrollbar {
  width: 0px !important; /* remove scrollbar space */
  background: transparent !important; /* optional: just make scrollbar invisible */
}
.lc,
.rc {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media only screen and (max-width: 500px) {
  /* responsive image is min width 500, so should this be 499? */
  a {
    -webkit-tap-highlight-color: rgba(
      0,
      0,
      0,
      0
    ); /* prevent tap highlight color / shadow */
  }
  .gallery {
    height: -moz-calc(100% - 100px);
    height: -webkit-calc(100% - 100px);
    height: calc(100% - 100px);
    /*min-height: 400px;*/
    position: relative;
    overflow: hidden;
    display: block;
  }
  .viewer,
  .gallery li {
    height: 100%;
    background-size: cover;
    background-position: center center;
  }
  .gallery picture {
    display: none;
  }
  li.v1 {
    display: block;
    opacity: 1;
    z-index: 1;
  }
}
@media only screen and (min-width: 768px) {
  .gallery,
  .gallery li {
    background-image: none !important;
    height: auto !important;
  }
}
@media only screen and (max: 767px) {
  #ng .gallery .v1 {
    position: unset;
  }
  #ng .gallery li img {
    display: none;
  }
}

.thumb {
  opacity: 0.65 !important;
}
.active {
  opacity: 1 !important;
}
.subm {
  float: left;
  width: 100%;
  display: block;
  clear: both;
  margin: 1em 0 1.5em 0;
  color: rgba(94, 102, 113, 0.4);
}
.subm a {
  padding: 0.25em 0.25em;
  margin: 0 0.5em;
  color: rgba(94, 102, 113, 0.7);
}
.subm a.active {
  color: rgb(94, 102, 113);
}

li picture:before,
li img:before {
  content: "";
  display: inline-block;
  /*height: 100%;*/
  vertical-align: middle;
}
li picture,
li img {
  vertical-align: middle;
}
.text2col {
  -moz-column-fill: balance;
  column-fill: balance !important;
  margin: -0.25em auto 0 auto !important;
  column-gap: 24px;
  max-width: 804px;
}
.text2col p {
  margin: 0 0 1.2em 0;
  text-align: justify;
  break-inside: auto;
}
.text2col p:last-child {
  margin-bottom: 0;
}

html,
body {
  height: 100%;
}
#ng .gallery.restrict {
  width: 100%;
  height: calc(100vh - 192px) !important; /*new mob version */
  height: 100% !important;
  /*height: calc(100vh - 260px) !important; /*new mob version */
  /*height: 500px !important;*/
  text-align: center;
  max-width: none !important;
}
#ng .gallery ul {
  width: 100%;
  height: 100%;
}
#ng .gallery .v1,
#ng .gallery .zv1 {
  position: absolute !important;
}
#ng .gallery.restrict img {
  max-height: 100% !important;
  max-width: 100% !important;
}
.teaser-grid.dotted section {
  border-bottom: solid 1px rgba(0, 0, 0, 0.3);
  padding-bottom: 0;
  padding-top: 16px;
}
/*#wrap{
  max-width: 1465px;
}*/
.col12 p,
.row > h1 + p {
  max-width: 760px;
}
#ng {
  background-color: #f2f2f2;
  padding-bottom: 90px;
  /*margin-bottom: 1.5em;*/
  height: calc(100% - 143px);
}
/* #ng.portrait {
  background-color: transparent;
} */
#ng nav {
  padding: 1em 0 0 0;
  max-width: 1404px;
  max-width: 1369px;
  margin: 0 auto;
}
#ng nav > div {
  float: left;
  width: 35%;
  text-align: left;
  /* display: inline-block; */
  box-sizing: border-box;
}
#ng .cbox {
  width: 30%;
  text-align: center;
  letter-spacing: 0.2em;
}
#ng .cbox div {
  float: left;
  /* display: inline-block; */
}
#ng .rbox {
  text-align: right;
}
.lc2,
.rc2 {
  padding: 0 1.35em;
  cursor: pointer;
}
#ng .cbox.mob {
  display: none;
}
#more {
  background-color: #f2f2f2;
  display: inline-block;
  width: auto;
  padding: 0.75em 1.5em;
  margin: 1em 0 0.5em 0;
  font-size: 1.2em;
} /*.lc,.rc{
  display: none;
}*/
#ng {
  height: calc(100%-220px);
}
@media all and (max-width: 1630px) {
  /*.lc,.rc{
    background-image: none;
  }*/
}
@media all and (max-width: 1480px) {
  #ng .lbox {
    padding-left: 1.25em;
  }
  #ng .rbox {
    padding-right: 1.25em;
  }
}
@media all and (max-width: 800px) {
  #ng .lbox,
  #ng .rbox {
    display: none;
  }
  #ng .cbox {
    width: 100%;
  }
}

@media all and (max-width: 780px) {
  .lc,
  .rc {
    display: block;
  }
}

@media all and (max-width: 500px) {
  #ng {
    padding-bottom: 0 !important;
    /*height: calc(100vh - 140px) !important;*/
    height: calc(150vw) !important;
  }
}
/*changes */
.lc,
.rc {
  background-size: 14px auto;
}
.lc {
  background-image: url("/themes/devolkitchens/img/icons/white-l-arrow.svg");
}
.rc {
  background-image: url("/themes/devolkitchens/img/icons/white-r-arrow.svg");
}
.thumbs li {
  float: none;
  padding: 0 0.4em;
}
#ng {
  padding-bottom: 100px;
}
.thumbs {
  margin: 1.25em auto !important;
}
#ng .dots {
  display: none;
}

@media all and (max-width: 768px) {
  #ng {
    height: 150vw !important;
  }
  .lc {
    background-image: url("/themes/devolkitchens/img/white-l-arrow.svg");
    background-position: left 50%;
  }
  .rc {
    background-image: url("/themes/devolkitchens/img/white-l-arrow.svg");
    background-position: right 50%;
  }
  /* #ng .dots {
  } */
  #ng .thumbs {
    display: none;
  }
  #ng .dots {
    display: block;
    position: absolute;
    bottom: 0;
    /*margin-bottom: 2em;*/
    left: 0;
    /*padding-left: 1.8em;*/
    z-index: 999;
  }
  .dot {
    cursor: pointer;
    height: 0.4em;
    width: 0.4em;
    margin: 0 3px;
    background-color: #ffffff6a;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  .dot.active,
  .dot:hover {
    background-color: #ffffff;
  }
  .dots {
    margin-bottom: 0;
    /*padding-left: 1.1em;*/
    /*padding-bottom: 1.4em;*/
  }
  #ng {
    position: relative;
  }
  .dot {
    margin: 0 3px;
  }

  .dot {
    background-color: #a1a1a1bf;
  }
}