.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:.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.co.uk/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.co.uk/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;
}.text2col{

}
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('/imgs/gallery-arrow-left.svg'); 
}.rc{
    background-image: url('/imgs/gallery-arrow-right.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('/imgs/gallery-arrow-left-white.svg');
        background-position: left 50%;
    }.rc{
        background-image: url('/imgs/gallery-arrow-right-white.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;
}




}