/*! Generated by Fontspring (https://www.fontspring.com) on August 27, 2018. Fully installable fonts can be purchased at http://www.fontspring.com. The fonts included in this stylesheet are subject to the End User License you purchased from Fontspring. The fonts are protected under domestic and international trademark and copyright law. You are prohibited from modifying, reverse engineering, duplicating, or distributing this font software. (c) 2010-2018 Fontspring */
@font-face { font-family: 'Amsi pro condlight'; src: url(/_assets/_fonts/amsipro/amsiprocond-light-webfont.woff2) format('woff2'), url(/_assets/_fonts/amsipro/amsiprocond-light-webfont.woff) format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Amsi pro condbold'; src: local('Amsi pro condbold'), local('Amsi-pro-condbold'), url(/_assets/_fonts/amsipro/amsiprocond-bold-webfont.woff2) format('woff2'), url(/_assets/_fonts/amsipro/amsiprocond-bold-webfont.woff) format('woff'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/_assets/_fonts/opensans/opensans-regular.woff2) format('woff2'), url(/_assets/_fonts/opensans/opensans-regular.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: local('Open Sans Semibold'), local('OpenSans-semibold'), url(/_assets/_fonts/opensans/opensans-semibold.woff2) format('woff2'), url(/_assets/_fonts/opensans/opensans-semibold.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'), url(/_assets/_fonts/opensans/opensans-light.woff2) format('woff2'), url(/_assets/_fonts/opensans/opensans-light.woff) format('woff'); font-display: swap; }


/*****************

SJWRI BASECAMP+ CSS

*****************/

header#global_intro h1 {
  font-family: 'Amsi Pro Condbold', 'Open Sans', Helvetica, arial, sans-serif;
  font-size: 23px;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
header#global_intro h1.global_intro_maori {
  font-family: 'Open Sans', Helvetica, Arial, Geneva, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25;
  margin-top: 5px;
  padding-bottom: 14px;
}
body {
    text-rendering: optimizeLegibility;
    background: url(gfx/background.png) 0 0 repeat-x;
}
#wrapper {
	background: url(gfx/banner-2022.jpg) right 0px no-repeat;
}
#title h1 {
  background: url(gfx/title-2022.png) 21px 90px no-repeat;
  color: #136f9a;
  font-family: "Amsi pro condbold", Helvetica, Arial, sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-top: 3px;
  padding: 400px 0px 21px 23px;
  opacity: 1;
  text-rendering: optimizeLegibility;
}

#content p,
#content ul,
#content ol,
#content li,
#content table th,
#content table td,
#content dl,
#content label,
#content input,
#content textarea,
#content select,
#right p,
#right li {
  font-family: 'Open Sans', Helvetica, Arial, Geneva, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
#content th,
#content td,
#right p,
#right li,
#right dl {
  font-size: 13px;
}
#content ul,
#content ol {
  margin-left: 16px;
}
#content li {
  line-height: 1.9;
}
#content a {
  transition: all 0.3s ease-out;
}

/* #title:after {
  background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%);
  content: '';
  display: block;
  height: 250px;
  left: calc(50% - 557px);
  position: absolute;
  top: 0;
  width: 1114px;
  z-index: 0;
} */
/* #title h1.notopimage {
  max-width: 650px;
  position: relative;
} */
#title p.heading-translation {
    color: #888888;
    font-family: 'Amsi pro condlight', 'Open Sans', Helvetica, Arial, Geneva, sans-serif;
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 28px;
    margin-top: -14px;
    padding-left: 23px;
}
/* #title h1.notopimage {
  max-width: 650px;
} */
/* .titleinner {
  background: url(gfx/banner-2022.jpg) center 0px no-repeat;
  padding-top: 14px;
}
.titleinner img {
  display: none;
} */
.titleinner h1 {
  margin-top: 0px;
}
#content h2 {
  border-bottom: none;
  color: #a6988d;
  font-family: 'Amsi Pro Condlight', 'Open Sans', Helvetica, Arial, Geneva, sans-serif;
  font-size: 35px;
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: 21px;
  margin-top: 40px;
  padding-bottom: 0px;
  text-rendering: optimizeLegibility;
}
#content h2:first-of-type {
  margin-top: 0;
}
#content p + h2:first-of-type {
	margin-top: 28px;
}
#content h3 {
      color: #136f9a;
      font-family: 'Amsi Pro Condbold', 'Open Sans', Helvetica, Arial, Geneva, sans-serif;
      font-size: 23px;
      line-height: 1.3;
      margin-top: 21px;
}
#content h4 {
      color: #136f9a;
      font-family: 'Amsi Pro Condbold', 'Open Sans', Helvetica, Arial, Geneva, sans-serif;
      font-size: 20px;
      letter-spacing: .4px;
      line-height: 1.3;
      margin-top: 21px;
}
#content h5 {
      color: #136f9a;
      font-family: 'Amsi Pro Condbold', 'Open Sans', Helvetica, Arial, Geneva, sans-serif;
      font-size: 19px;
      letter-spacing: .4px;
      line-height: 1.3;
      margin-top: 21px;
}
#right {
  background: none;
}
#right h2 {
  margin-right: 14px;
}
#right p {
    border-bottom: 0;
}
#content {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}
#right {
    background: none;
    box-sizing: border-box;
    margin-left: 0;
    padding-left: 232px;
    width: 100%;
}
#right .rightcontentwysiwyg {
    background-color: #f2f2f2;
    padding: 20px 20px 20px 30px;
    border-radius: 5px;
}
#right h2 {
    font-family: 'Amsi pro condbold', Helvetica, Arial, Geneva, sans-serif;
    font-size: 20px;
    letter-spacing: 0.01em;
    padding-bottom: 10px;
    text-transform: none;
}

/*  FRONTPAGE  */


body.frontpage #title h1.notopimage {
    max-width: 650px;
}



/* MEDIA QUERIES ************/

@media (-webkit-min-device-pixel-ratio: 1.5),
  (min--moz-device-pixel-ratio: 1.5),
  (min-resolution: 1.5dppx),
  (min-resolution: 192dpi) {
    #title h1,
    body.frontpage #title h1 {
       background-image: url(gfx/title-2022@2x.png);
       background-size: 425px;
    }
}





/* Tablet styles */
@media only screen and (min-width: 1025px) and (max-width: 1160px) {
  #contentwrapper {
    padding-left: 0;
    padding-right: 0;
    }
}

@media only screen and (min-width: 770px) and (max-width: 925px) {
  #contentwrapper {
    padding-left: 0;
    padding-right: 0;
    }
}

@media only screen and (min-width: 701px) and (max-width: 1160px) {
  #contentwrapper, .topnavinner, .titleinner, footer.wrapper, div.footer_wrapper {
    box-sizing: border-box;
    width: 100%;
  }
  #contentwrapper, .topnavinner, footer.wrapper, div.footer_wrapper {
    max-width: 1114px;
  }
  ul#breadcrumbs {
    box-sizing: border-box;
    margin-left: 0;
    max-width: 70%;
    overflow: hidden;
    padding-left: 232px;
    width: 100%;
  }
  #contentwrapper {
    margin: 0;
    padding: 0;
    width: 98%;
  }
  div#nav_holder {
    max-width: 100%;
    width: 100%;
  }
  .titleinner {
    box-sizing: border-box;
    max-width: 100%;
    padding-left: 252px;
  }
  div#nav_wrapper {
    left: 23px;
  }
  #title h1.notopimage {
      margin-left: 0;
  }
  #title ul#breadcrumbs {
    margin-left: 0;      
  }
  #content {
    box-sizing: border-box;      
    max-width: 100%;
    padding: 12px 0px 46px 252px;
    width: 100%;
  }
}


@media only screen and (min-width: 769px) and (max-width: 1024px) {
    #features {
        width: 650px;
    }
  #title:after {
    left: calc(50% - 325px);
    width: 650px;
  }
  #wrapper {
	 background-size: 1000px;
  }
  body {
    background-image: none;
  }
  #title h1,
    body.frontpage #title h1 {
    padding-top: 250px;
    padding-left: 0;
    background-size: 375px;
    background-position: 0 25px;
  }
  #wrapper {
    background-position: right -98px top 0;
  }
}

@media only screen and (min-width: 701px) and (max-width: 768px) {
   div#nav_holder {
    left: 0;
   }
   #title h1.notopimage {
     max-width: 100%;
   }
   #wrapper {
     width: 100%;
    }
}


@media only screen and (max-width: 768px) {
	#title h1 {
        padding-right: 0;
    }
    body.frontpage #title h1 {
        padding-right: 0;
    }
    #right {
        border-bottom: none;
    }
    #features .events {
        width: 418px;
        margin-left: 232px;
        border-left: none;
    }
    #features .events article {
        margin-top: 14px;
    }
    #features .events article:first-child {
        margin-top: 14px;
    }
  #title:after {
    left: calc(50% - 209px);
    width: 418px;
  }
}




/* Mobile styles*/

@media only screen and (max-width: 700px) {
/*     body.frontpage .titleinner,
    .titleinner {
      width: 100%;
    } */
    #title h1,
    body.frontpage #title h1 {
      background-position: 0px 30px;
      background-size: 300px;
      font-size: 40px;
      padding-top: 190px;
      padding-left: 0;
    }
    #title:after {
      height: 175px;
    left: 0;
    width: 60%;
  }
  #title ul#breadcrumbs {
    margin-left: 4%;
  }
  #right {
    border-top: 0;
  }
  #right img {
    clear: both;
    display: block;
  }
    #features .events {
      margin-left: 0px;
      padding: 0;
      width: 97%;
    }
    #features .events article {
      margin-right: 5%;
      width: 47.5%;
    }
    #features .events article:nth-of-type(2n) {
      margin-right: 0;
    }
  #right {
        padding-left: 0px;
	width: 97%
  }
  #content {
    width: 97%;
  }
  #wrapper {
	 background-size: 750px;
  }
  body {
    background-image: none;
  }
  #title h1 {
    padding-top: 250px;
  }
}

@media only screen and (max-width: 500px) {
  #wrapper {
    background-position: right -70px top 0;
  }
}

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

    #title h1,
    body.frontpage #title h1 {
      background-position: 0px 20px;
      background-size: 250px;
      font-size: 33px;
      padding-top: 175px;
      padding-left: 0;
    }
  #wrapper {
    background-position: right -120px top 0;
  }
  #content h2 {
    font-size: 30px;
  }
    
}