#hero22 {
    width: 100%;
    height: 500px;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    -o-transition: height 0.5s;
    transition: height 0.5s;
    position: relative;
  }#hero22.overlay{
    position: absolute;
  }.node-type-landing-page-2019 .viewer{
    height: 500px;
  }#hero22 .slide-image{
    background-position: center center;
    background-size: cover;
  }.dots{
    position:absolute;
    bottom:2.5em; 
    left:3em; 
    z-index:999999;
  }#hero22 *::selection{
    color: none;
  }
  
  
  /* New Gallery */
  #hero22 .slide-image{
    height: 100%;
  }
  #hero22 .content {
    width: 100%;
    position: absolute;
    bottom: 0%;
    left: 0%;
    z-index: 9;
    padding: 2em 3.5em 5.5em 3em;
  }
  #hero22 .gradient {
    height: 100%;
    position: absolute;
    left: 0%;
    bottom: 0%;
    width: 50%;
    background-image: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.4));
  }
  #hero22 .dot {
    cursor: pointer;
    height: 0.4em;
    width: 0.4em;
    background-color: #ffffff6a;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  #hero22 .dot:not(:first-child) {
    margin-left: 9.5px;
  }
  #hero22 .dot.active,
  #hero22 .dot:hover {
    background-color: #ffffff;
  }
  #hero22 .text {
    margin-bottom: 1em;
  }
  #hero22 h2, #hero22 a {
    color: #ffffff;
  }
  #hero22 h2.heading-large {
    margin: 0.5em 0 0.8em;
    font-size: 2.4em;
  }
  #hero22 h2 {
    font-weight: 400;
  }
  #hero22 .cta{
    text-transform: uppercase;
    font-family: gill-sans-nova, sans-serif;
    font-weight: 400;
    font-size: 0.8em;
    border-bottom:solid 1px #ffffff;
    padding-bottom: 0.3em;
    letter-spacing: 0.07em;
  }
  
  @media screen and (max-width: 1920px) {
    #hero22 h2.heading-large {
      font-size: 2.2em;
    }
    #hero22 h2 {
      font-size: 1.15em;
    }
    #hero22 .cta {
      font-size: 0.7em;
    }
  }
  
  @media screen and (max-width: 768px) {
    #hero22 .content {
      padding: 1em;
    }
  
    #hero22 .gradient {
      width: 100%;
      background-image: linear-gradient(
        to bottom,
        transparent,
        rgba(0, 0, 0, 0.5)
      );
      height: 50%;
    }
    #hero22 .content {
      bottom: 0%;
      left: 0%;
      padding: 2em 1.5em 2em;
    }
  }
  @media screen and (max-width: 430px) {
    #hero22 h2.heading-large {
      max-width: 70%;
      font-size: 2em;
    }
    #hero22 h2 {
      font-size: 18px;
    }
  }
  
  @media screen and (max-width: 375px) {
    #hero22 h2.heading-large {
      max-width: 70%;
      font-size: 1.7em;
    }
  }
  
  @media screen and (max-width: 320px) {
    #hero22 h2.heading-large {
      max-width: 82%;
      font-size: 1.7em;
    }
  }
  
  /*new gallery end */
  
  #hero22, #hero22Wrap{
      /*max-width:1600px;*/
      width:100%;
      margin:0 auto;
  }#hero22{
      position:relative;
  }#hero22.restrict{
      max-width:1200px;
  }#hero22 ul, #hero22 li{
      list-style-type:none;
      margin:0;
  }#hero22 li img, #hero22 ul.viewer, #hero22 ul.viewer li{
      width:100%;
  }#hero22 li{
    max-height:100%; 
    height: 100%;
  }#hero22.fade ul.viewer li{
      display:none;
      position:absolute;
      top:0;
      left:0;
      bottom:0;
      overflow:hidden;
  }#hero22.fade ul.viewer li img{
    width:auto; max-height:99%;
  }#hero22 .v1, #hero22 .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:5;
      /*width:50px;
      margin:0 20px;*/
      background-image:url('../img/devol_sprite.png');
      background-position:-9px 50%;
      top:0%;
      height:100%;
      background-repeat:no-repeat;
      padding: 0 20px;
      margin: 0;
      width:22px !important;
  } .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;
  }
  
  @media all and (max-width: 415px){
    #wrap.portPad .thumbs{
      display:none;
    }
  }
  
  @media only screen and (min-width: 500px) {
    #hero22 .lc, #hero22 .rc{
      display: block !important;
      width:5%;
      background-size: 10px auto;
      text-align: left !important;
      background-position: 20px 50%;
    }#hero22 .rc{
      text-align:right !important;
      background-position: calc(100% - 20px) 50%;
    }
  }
    .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 */
    }
    #hero22{
      height: -moz-calc(100% - 100px);
      height: -webkit-calc(100% - 100px);
      height: calc(100% - 100px);
      /*min-height: 400px;*/
      position: relative;
      overflow: hidden;
      display: block;
    }.viewer, #hero22 li{
      height: 100%;
      background-size:cover;
      background-position: center center;
    }#hero22 picture{
      display: none;
    }li.v1{
      display: block;
      opacity: 1;
      z-index: 1;
    }
  }
  @media only screen and (min-width: 501px){
    #hero22.ba, #hero22.ba li{
      background-image: none !important;
    }
  }
  li picture:before, li img:before{
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
  }li picture, li img{
    vertical-align: middle;
  }
  html, body{
    height: 100%;
  }
  
    .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;
    }
    #more{
      background-color: #f2f2f2;
      display: inline-block;
      width: auto;
      padding: 0.75em 1.5em;
      margin: 1em 0 0.5em 0;
      font-size: 1.2em;
    }
  
  @media all and (max-width: 780px){
    .lc,.rc{
      display: block;
    }
  }
  .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'); 
  }#hero22 .lc{
    width:20px;
  }
  @media all and (max-width: 500px){
    .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%;
    }.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;*/
    }.dot {
     /* margin: 0 4px;
      background-color: #a1a1a1bf;*/
    }
  }
  @media only screen and (max-width: 430px) {
    #hero22{
      /*padding-top: 142%;*/
      height: auto !important;
    }.node-type-landing-page-2019 .viewer{
      height: auto !important;
    }
  }
  @media only screen and (max-width: 768px) {
    #hero22 {
      height: 480px;
      /*margin-top: -26px;*/
    }.node-type-landing-page-2019 .viewer{
      height: 480px;
    }#hero22 .dots{
      left:auto;
      right:1.5em;
      bottom:2em;
    }
  }
  @media only screen and (min-width: 1450px) {
    #hero22 {
      height: 700px;
    }.node-type-landing-page-2019 .viewer{
      height: 640px;
    }
  }
  @media only screen and (min-width: 1450px) and (max-width: 1600px) {
    #hero22 {
      height: 480px;
    }
  }
  @media only screen and (min-width: 1930px) {
    #hero22 {
      height: 854px;
    }.node-type-landing-page-2019 .viewer{
      height: 854px;
    }
  }
  @media only screen and (min-width: 2540px) {
    #hero22 {
      height: 854px;
    }.node-type-landing-page-2019 .viewer{
      height: 854px;
    }
  }
  @media only screen and (max-width: 415px) {
      #hero22{
        background-position:center center;
      }#hero22.overlay{
        position: absolute;
        top: 0;
      }
  }