/* Custom CSS * --------------------------------------- */
/* Menu * --------------------------------------- */
/* Section 1 * --------------------------------------- */
/* Section 2 about * --------------------------------------- */
/* Section 3 services * --------------------------------------- */
/* Section 4 contact * --------------------------------------- */
div#pp-nav {
  display: none; }

body {
  padding: 0;
  margin: 0;
  font-family: benton-sans, sans-serif;
  color: #4557A5; }

nav {
  display: grid;
  grid-template-columns: 1.4fr 3fr .75fr;
  align-items: center;
  background: transparent;
  position: absolute;
  bottom: 6vh;
  left: 0vw;
  width: 100%;
  transition: all 2s;
  padding: 10px 20px 20px 20px; }
  nav li a {
    font-family: benton-sans, sans-serif;
    color: #F1AB46; }

.pp-viewing-page1 nav img {
  opacity: 0;
}

.pp-viewing-about nav, .pp-viewing-services nav, .pp-viewing-contact nav {
  position: fixed;
  background: #fff;
  width: calc(100% - 20px);
  z-index: 1000;
  padding: 10px 20px 20px 20px;
  bottom: 0;
  left: 0;
  }
  .pp-viewing-about nav #menu:nth-child(1), .pp-viewing-services nav #menu:nth-child(1), .pp-viewing-contact nav #menu:nth-child(1) {
    display: block; }

div {
  padding: 0;
  margin: 0; }

dl {
  padding: 0;
  margin: 0; }

dt {
  padding: 0;
  margin: 0; }

dd {
  padding: 0;
  margin: 0; }

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  margin: 0;
  padding: 0; }

ol {
  padding: 0;
  margin: 0;
  list-style: none;
  margin: 0;
  padding: 0; }

li {
  padding: 0;
  margin: 0; }

h1, h2, h2, h4, h5, h6 {
  font-family: transat-text, sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #F1AB46;
  margin: 0;
  padding: 0; }

h1 {
  font-size: 4em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.5em; }

h4 {
  font-size: 1.3em; }

h5 {
  font-size: 1.1em; }

h6 {
  font-size: 1.5em; }

pre {
  padding: 0;
  margin: 0; }

form {
  padding: 0;
  margin: 0; }

fieldset {
  padding: 0;
  margin: 0;
  border: 0; }

input {
  padding: 0;
  margin: 0; }

textarea {
  padding: 0;
  margin: 0; }

p {
  padding: 0 0 15px 0;
  margin: 0;
  font-size: 1.33em;
  font-family: benton-sans, sans-serif;
  font-weight: 400;
  font-style: normal;
  }

blockquote {
  padding: 0;
  margin: 0; }

th {
  padding: 0;
  margin: 0;
  font-weight: normal;
  font-style: normal;
  text-align: left; }

td {
  padding: 0;
  margin: 0; }

a {
  text-decoration-style: dotted;  }

table {
  border-spacing: 0; }

img {
  border: 0; }

address {
  font-weight: normal;
  font-style: normal; }

caption {
  font-weight: normal;
  font-style: normal;
  text-align: left; }

cite {
  font-weight: normal;
  font-style: normal; }

code {
  font-weight: normal;
  font-style: normal; }

dfn {
  font-weight: normal;
  font-style: normal; }

em {
  font-weight: normal;
  font-style: normal; }

strong {
  font-weight: normal;
  font-style: normal;
  font-weight: bold; }

var {
  font-weight: normal;
  font-style: normal; }

q:before {
  content: ''; }

q:after {
  content: ''; }

abbr {
  border: 0; }

acronym {
  border: 0; }

.section {
  text-align: left; }

#menu {
  z-index: 70;
  width: 100%;
  padding: 0;
  margin: 0 0 0 -8px; }
  #menu li {
    display: inline-block;
    margin: 10px; }
    #menu li a {
      font-family: transat-text, sans-serif;
      font-size: 1.4em;
      letter-spacing: 1px;
      text-decoration: none;
      color: #F1AB46;
      padding: 9px 18px;
      display: block;
      transition: all 3s; }
      #menu li a:hover {
        color: #4557A5;
        opacity: 0.9; }
  #menu li.active {
    display: none; }

.intro p {
  width: 50%;
  margin: 0 auto;
  font-size: 1.5em; }

.btn {
  margin: 10px 0 0 0;
  padding: 15px 10px;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-image: linear-gradient(top, #5bc0de, #2f96b4);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
  border-color: #2f96b4 #2f96b4 #1f6377;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  vertical-align: middle;
  cursor: pointer;
  display: inline-block;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); }
  .btn a {
    text-decoration: none;
    color: #fff;
    font-family: transat-text, sans-serif;
    letter-spacing: 1px;
    font-size: 1.2em;
    transition: all 2s; }
  .btn:hover {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #F1AB46;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -ms-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear; }

#infoMenu {
  height: 20px;
  color: #f2f2f2;
  position: fixed;
  z-index: 70;
  bottom: 0;
  width: 100%;
  text-align: right;
  font-size: 0.9em;
  padding: 8px 0 8px 0; }
  #infoMenu ul {
    padding: 0 40px; }
  #infoMenu li {
    display: inline-block;
    position: relative; }
    #infoMenu li a {
      display: block;
      margin: 0 22px 0 0;
      color: #333; }
      #infoMenu li a:hover {
        text-decoration: underline; }

.pp-tableCell {
  display: grid;
  grid-template-columns: 1fr 3fr;
  height: 100% !important; }
  .pp-tableCell grid-item:nth-child(1) {
    background: #4557A5;
    /* height: 346px; */
    }
    .pp-tableCell grid-item:nth-child(1):after {
      position: absolute;
      right: 75%;
      top: 0;
      height: 100%;
      width: 10px;
      background-image: linear-gradient(180deg, #F1AB46 0%, #F1AB46 70%, #4883A5 70%, #4883A5 100%);
      z-index: 3;
      content: ''; }
    .pp-tableCell grid-item:nth-child(1) .logo {
      background-color: #4557A5;
      text-align: center; }
      .pp-tableCell grid-item:nth-child(1) .logo img {
        position: absolute;
        top: 30px; }

#section1 {
  background-image: url("http://blythinsurance.co.nz/imgs/1x/blyth-hero-image-get-the-right-cover-80.jpg");
  background-position: right;
  background-size: contain;
  background-size: cover; }
  #section1 p {
    color: white;
    margin-left: 4vw; }
  #section1 h1 {
    color: white;
    margin-top: 35vh;
    margin-left: 4vw; }
  #section1 .btn {
    margin-left: 4vw; }
  #section1 img {
    margin: 0;
    padding: 0;
    min-width: 150px;
    width: 50%; }
  #section1 .pp-tableCell grid-item:nth-child(1) {
    text-align: center;
    padding-top: 6vh;
    }

#section2 {
  background-image: url("http://blythinsurance.co.nz/imgs/blyth-watermark-logo.svg");
  background-position: bottom right;
  background-size: 50%;
  background-repeat: no-repeat; }
  #section2 h1 {
    color: #F1AB46; }
  #section2 h4, #section2 p, #section2 strong {
    color: white; }
  #section2 strong {
    margin: 0 0 30px 0;
    font-size: 1.4em;
    display: block; }
  #section2 .pp-tableCell grid-item:nth-child(1) {
    background: #196F8E; }
    #section2 .pp-tableCell grid-item:nth-child(1) img {
      width: 100%;
      z-index: 4;
      position: relative; }
  #section2 .pp-tableCell .about {
    display: grid;
    width: 70vw;
    margin: 4vw 0 0 4vw;
    grid-template-columns: 1fr 3fr;
    grid-gap: 50px;
    max-width: 1000px;
    }
    #section2 .pp-tableCell .about grid-item:nth-child(1) {
      background: transparent; }
    #section2 .pp-tableCell .about grid-item:nth-child(2) {
      padding-top: 10vh; }

#section3 h1 {
  z-index: 3;
  color: #F1AB46; }

#section3 h4 {
  color: #4557A5; }

#section3 p {
  z-index: 3;
  color: #4557A5; }

#section3 li {
  color: #4557A5; }

#section3 grid-item:nth-child(1) {
  text-align: center; }
  #section3 grid-item:nth-child(1) img {
    width: 50%;
    margin-top: 65%; }

#section3 #services {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 3fr;
  grid-template-areas: "header header header" "commercial domestic rural";
  text-align: center;
  grid-column-gap: 1vw;
  height: 100%; }

#section3 .header {
  grid-area: header;
  text-align: left;
  padding: 2.5vw; }

#section3 .commercial {
  grid-area: commercial; }
  #section3 .commercial ul {
    width: 100%;
    height: 50vh;
    background-color: #C0CAF2; }

#section3 .domestic {
  grid-area: domestic; }
  #section3 .domestic ul {
    width: 100%;
    height: 50vh;
    background-color: #BEE3ED; }

#section3 .rural {
  grid-area: rural; }
  #section3 .rural ul {
    width: 100%;
    height: 50vh;
    background-color: #EDDDB4; }

#section3 ul {
  text-align: left;
  text-indent: 5vw;
  padding-top: 3vw;
  line-height: 1.8em; }
  
  #section4 ul {
  line-height: 2.3em; }

#section4 h4 {
  color: white;
  font-family: transat-text, sans-serif;
  margin-left: 3vw; }

#section4 b {
  color: #F1AB46;
  margin-bottom: 1px;
  display: block; }

#section4 p {
  font-size: 1em; }

#section4 a {
  margin-left: 10px;
  color: white;
  transition: all 2s; }
  #section4 a:hover {
    color: #F1AB46; }

#section4 .pp-tableCell {
  display: grid;
  grid-template-columns: 1fr 1fr; }
  #section4 .pp-tableCell grid-item:nth-child(1) {
    background-color: #3D4B7F; }
    #section4 .pp-tableCell grid-item:nth-child(1):after {
      display: none; }
    #section4 .pp-tableCell grid-item:nth-child(1) .get-it {
      width: 30vw;
      margin: 0 auto; }
  #section4 .pp-tableCell .header {
    height: 25vw; }
    #section4 .pp-tableCell .header img {
      margin-top: 20vh; }
  #section4 .pp-tableCell grid-item:nth-child(2) img {
    width: 120px;
    float: right; }
  #section4 .pp-tableCell grid-item:nth-child(2) .claims {
    display: grid;
    grid-template-rows: 1fr 3fr;
    width: 30vw;
    margin: 0vw 3vw 0 10vw; }

#section4 p {
  color: white; }

#section4 h3 {
  font-family: transat-text, sans-serif;
  color: #F1AB46;
  font-size: 1.7em;
  letter-spacing: 1px; }

#section4 h5 {
  color: #F1AB46; }

#section4 footer {
  padding: 1vw;
  height: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  grid-area: footer;
  position: relative;
  z-index: 15;
  background-color: #fff; }
  #section4 footer a {
    color: #4557A5;
    line-height: 1em;
    font-size: 0.9em; }
  #section4 footer grid-item:nth-child(1) {
    text-align: left;
    text-indent: 3vw;
    background-color: #fff; }
  #section4 footer grid-item:nth-child(2) {
    text-align: right; }
    #section4 footer grid-item:nth-child(2) img {
      width: 300px; }
@media only screen and (min-device-width: 320px) and (max-device-width: 760px) and (orientation: portrait) {
  .pp-tableCell{
    display:grid;
    width: 100%;
    grid-template-columns:1fr;
    grid-template-rows: 1fr 1.5fr 250px;
    /* font-size: 1.2em; */
  }
  .pp-tableCell grid-item:nth-child(1){
  height: 319px;
}
  #section1 .pp-tableCell{
     grid-template-rows:1fr 6fr;
  }
    #section1 .pp-tableCell img{
     margin: 0;
     padding: 0;
     min-width: 100px;
     width: 25%;
     position: absolute;
     top: 45px;
     left: 45px;
  }
#section1 {
    background-image: url(http://blythinsurance.co.nz/imgs/1x/blyth-hero-image-get-the-right-cover-80.jpg);
    background-position: -399px 443px;
    background-size:140%;
    background-repeat:no-repeat;
}
#section1 h1{
    padding-top:20vh;
}
.pp-tableCell grid-item:nth-child(1):after {top: 455px;width:100%;height:30px;display: none;}
#section2 .pp-tableCell .about{
  width: 95vw;
}
#section1 .btn{
  font-size:1.8em;
}
#section1 p{
  font-size:2.1em;
}
nav {
    display: grid;
    grid-template-columns: 1fr;
    bottom: -4vh;
    font-size: 1.3em;
}

nav img {
    width: 300px;
    margin: 1vw 0 0 1vw;
}
#menu{
  margin-top: 15px;
}
#menu li{
  font-size: 1.5em;
  margin-right: 2px;
}
#section2 .pp-tableCell grid-item:nth-child(1) img{
  width: 50%;
}
#section3 .pp-tableCell{
  grid-template-rows:0 1fr;
}
#section3 #services{
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "commercial"
    "domestic"
    "rural";
  grid-template-rows: 319px 447px 361px 285px 100px;
  font-size: 1.3em;
}
#section3 .header p{
  color:#fff;
}
#section3 grid-item:nth-child(1) img {
    width: 50%;
    margin-top: 15%;
}
#section3 .commercial, #section3 .domestic, #section3 .rural{
  display:grid;
  grid-template-columns:1fr 3fr;
  height:25vh;
}
#section3 .commercial ul, #section3 .domestic ul, #section3 .rural ul{
  height: 24vh;
  font-size:1.2em;
}
#section4 .pp-tableCell{
  grid-template-columns: 1fr;
  grid-template-rows: 650px;
}
#section4 grid-item{
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 2em;
}
#section4 .pp-tableCell grid-item:nth-child(1) .get-it{
  width:45vw;
}
#section4 .pp-tableCell grid-item:nth-child(1) img{
  width:100%;
}
#section4 .pp-tableCell grid-item:nth-child(2) .claims {
  width:90vw;
}
#section4 .pp-tableCell grid-item:nth-child(2) .claims img{
  display:none;
}
.bod p{
  1.3rem !important;
}
}