.petrolMoney-hero {
  background: url("https://mktgblobpubaccess1.blob.core.windows.net/eui-frontend-assets/admiral/images/petrol-money/hero.jpg") center / 1200px 370px no-repeat;
  background-position: 50% 0;
  height: 405px;
  margin: 0 auto;
  max-width: 1200px;
  position: relative; }
  @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    .petrolMoney-hero {
      background-image: url("https://mktgblobpubaccess1.blob.core.windows.net/eui-frontend-assets/admiral/images/petrol-money/hero@2x.jpg"); } }
  @media screen and (max-width: 767px) {
    .petrolMoney-hero {
      background-image: none;
      height: auto; } }
  .petrolMoney-hero img {
    display: none; }
    @media screen and (max-width: 767px) {
      .petrolMoney-hero img {
        display: block;
        height: auto;
        width: 100%; } }
  .petrolMoney-hero .title {
    -webkit-clip-path: polygon(0 35%, 99% 0, 100% 91%, 1% 98%);
    background: #0d3b72;
    bottom: 5px;
    clip-path: polygon(0 35%, 99% 0, 100% 91%, 1% 98%);
    display: block;
    height: 134px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 726px;
    z-index: 1; }
    @media screen and (max-width: 767px) {
      .petrolMoney-hero .title {
        -webkit-clip-path: polygon(0 19%, 99% 3%, 100% 91%, 1.5% 98%);
        bottom: auto;
        clip-path: polygon(0 19%, 99% 3%, 100% 91%, 1.5% 98%);
        left: auto;
        margin: -12% auto 0;
        position: relative;
        transform: none;
        width: 380px; } }
    @media only screen and (max-width: 413px) {
      .petrolMoney-hero .title {
        height: 114px;
        width: 290px; } }
  .petrolMoney-hero .title-border {
    background: white;
    display: block;
    width: 746px;
    height: 154px;
    -webkit-clip-path: polygon(0 35%, 99% 3%, 100% 91%, 1% 98%);
    clip-path: polygon(0 35%, 99% 3%, 100% 91%, 1% 98%);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); }
    @media screen and (max-width: 767px) {
      .petrolMoney-hero .title-border {
        bottom: auto;
        width: 400px;
        -webkit-clip-path: polygon(0 19%, 99% 3%, 100% 91%, 1.5% 98%);
        clip-path: polygon(0 19%, 99% 3%, 100% 91%, 1.5% 98%);
        bottom: -7px; } }
    @media only screen and (max-width: 413px) {
      .petrolMoney-hero .title-border {
        width: 310px;
        height: 134px; } }
  .petrolMoney-hero h1 {
    color: white;
    font-size: 4.2rem;
    padding-top: 45px;
    text-align: center;
    transform: rotate(-3deg); }
    @media screen and (max-width: 767px) {
      .petrolMoney-hero h1 {
        font-size: 3.8rem;
        text-align: left;
        padding-top: 30px;
        line-height: 4.5rem;
        padding-left: 22px; } }
    @media only screen and (max-width: 413px) {
      .petrolMoney-hero h1 {
        font-size: 3rem;
        line-height: 3.1rem;
        padding-top: 33px; } }

.petrol-illustration {
  background-color: #EFEFEA; }
  .petrol-illustration section {
    margin: 0 auto;
    border-bottom: 1px solid #b7b7cb;
    padding-top: 45px;
    padding-bottom: 60px; }
    @media screen and (max-width: 767px) {
      .petrol-illustration section {
        padding-top: 30px;
        padding-bottom: 30px; } }
    .petrol-illustration section:after {
      content: "";
      display: block;
      clear: both; }
    @media screen and (max-width: 767px) {
      .petrol-illustration section:nth-of-type(odd) .left {
        -ms-order: 2;
        -webkit-order: 2;
        order: 2; } }
  .petrol-illustration .left,
  .petrol-illustration .right {
    float: left;
    overflow: hidden;
    width: 50%; }
    @media screen and (max-width: 767px) {
      .petrol-illustration .left,
      .petrol-illustration .right {
        float: none;
        margin: -20px auto 0;
        width: 384px; } }
    @media only screen and (max-width: 413px) {
      .petrol-illustration .left,
      .petrol-illustration .right {
        width: 300px; } }
  .petrol-illustration .left.text > div {
    max-width: 340px;
    float: right; }
    @media screen and (max-width: 767px) {
      .petrol-illustration .left.text > div {
        max-width: none;
        text-align: center; } }
  .petrol-illustration .left img {
    float: right;
    margin-right: 40px; }
    @media screen and (max-width: 767px) {
      .petrol-illustration .left img {
        float: none;
        margin: 0 auto; } }
  .petrol-illustration .right.text > div {
    max-width: 340px; }
    @media screen and (max-width: 767px) {
      .petrol-illustration .right.text > div {
        max-width: none;
        text-align: center; } }
  .petrol-illustration .right img {
    margin-left: 40px; }
    @media screen and (max-width: 767px) {
      .petrol-illustration .right img {
        float: none;
        margin: 0 auto; } }
  @media screen and (max-width: 767px) {
    .petrol-illustration img {
      max-width: 180px; } }
  @media screen and (max-width: 767px) {
    .petrol-illustration .text {
      margin: -12px auto 25px; } }
  .petrol-illustration .text .inner {
    background: url("https://mktgblobpubaccess1.blob.core.windows.net/eui-frontend-assets/admiral/images/petrol-money/grant-cartoon.png") center / 58px 58px no-repeat;
    background-position: left top;
    padding-left: 75px;
    padding-top: 15px; }
    @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
      .petrol-illustration .text .inner {
        background-image: url("https://mktgblobpubaccess1.blob.core.windows.net/eui-frontend-assets/admiral/images/petrol-money/grant-cartoon@2x.png"); } }
    @media screen and (max-width: 767px) {
      .petrol-illustration .text .inner {
        background: url("https://mktgblobpubaccess1.blob.core.windows.net/eui-frontend-assets/admiral/images/petrol-money/grant-cartoon-mob.png") center / 40px 40px no-repeat;
        background-position: center top;
        background-size: 45px 45px;
        padding-left: 0;
        padding-top: 67px; } }
  @media only screen and (max-width: 767px) and (-moz-min-device-pixel-ratio: 1.5), only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 3 / 2), only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 767px) and (min-device-pixel-ratio: 1.5) {
    .petrol-illustration .text .inner {
      background-image: url("https://mktgblobpubaccess1.blob.core.windows.net/eui-frontend-assets/admiral/images/petrol-money/grant-cartoon-mob@2x.png"); } }
  .petrol-illustration .flex {
    align-items: center;
    display: flex; }
    @media screen and (max-width: 767px) {
      .petrol-illustration .flex {
        flex-direction: column; } }
  @media only screen and (min-width: 768px) {
    .petrol-illustration .last {
      padding-bottom: 55px; } }
  .petrol-illustration .last p {
    font-size: 2.2rem;
    font-weight: 300;
    margin: 0 auto;
    max-width: 470px;
    text-align: center; }
    @media screen and (max-width: 767px) {
      .petrol-illustration .last p {
        font-size: 1.6rem;
        line-height: 2.8rem;
        max-width: 384px; } }
    @media only screen and (max-width: 413px) {
      .petrol-illustration .last p {
        max-width: 300px; } }

.petrol-heading {
  background: #0d3b72;
  color: #fff; }
  .petrol-heading .container {
    align-items: center;
    display: flex;
    padding: 40px 0;
    width: 588px; }
    @media screen and (max-width: 767px) {
      .petrol-heading .container {
        flex-direction: column;
        padding: 20px 0; } }
  .petrol-heading h2,
  .petrol-heading p {
    color: #fff; }
  .petrol-heading h2 {
    text-align: left; }
    @media screen and (max-width: 767px) {
      .petrol-heading h2 {
        text-align: center; } }
  .petrol-heading .left {
    margin-right: 70px; }
    @media screen and (max-width: 767px) {
      .petrol-heading .left {
        width: 384px;
        margin: 0 auto; } }
    @media only screen and (max-width: 413px) {
      .petrol-heading .left {
        width: 300px; } }
    .petrol-heading .left img {
      margin: 0 10px 32px 0; }
      @media screen and (max-width: 767px) {
        .petrol-heading .left img {
          height: 85px;
          width: 85px;
          margin: 0 auto 32px; } }
  @media screen and (max-width: 767px) {
    .petrol-heading .right {
      margin: 0 auto;
      order: -1;
      width: 384px; } }
  @media only screen and (max-width: 413px) {
    .petrol-heading .right {
      width: 300px; } }

.petrolMoney-hero + .pageCopy {
  padding-top: 30px; }
  @media screen and (max-width: 767px) {
    .petrolMoney-hero + .pageCopy {
      padding-top: 0; } }

.petrol-illustration + .videoModule h2 {
  font-weight: 400;
  margin-bottom: 20px; }
  @media screen and (max-width: 767px) {
    .petrol-illustration + .videoModule h2 {
      font-size: 3.2rem;
      margin-bottom: 13px; } }

@media screen and (max-width: 767px) {
  .petrol-illustration + .videoModule h2 + p {
    font-size: 1.6rem;
    max-width: 384px;
    margin: 0 auto 20px;
    line-height: 2.5rem; } }

@media only screen and (max-width: 413px) {
  .petrol-illustration + .videoModule h2 + p {
    max-width: 300px; } }

/* Needed to include expert pod */
.magazine-story__expert {
  margin-bottom: 30px; }

.magazine-story__expert p {
  font-size: 1.4rem;
  line-height: 20px;
  margin-top: -12px;
  padding-bottom: 20px; }

@media (min-width: 768px) {
  .magazine-story__expert p {
    font-size: 1.6rem;
    line-height: 22px;
    margin-top: -12px;
    padding-bottom: 20px; } }

.magazine-story__expert-meta {
  margin-bottom: 25px;
  display: grid;
  grid-gap: 0 10px;
  grid-template-columns: 60px auto;
  grid-template-rows: 1fr 1fr;
  align-items: center; }

.magazine-story__expert-meta h3, .magazine-story__expert-meta p {
  margin: 0;
  padding: 0; }

.magazine-story__expert-meta-date {
  font-weight: 400; }

.magazine-story__expert:before, .magazine-story__expert:after {
  bottom: 100%;
  left: 30px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none; }

.magazine-story__expert:after {
  border-color: rgba(136, 183, 213, 0);
  border-bottom-color: #fff;
  border-width: 12px;
  margin-left: -12px; }

.magazine-story__expert:before {
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #b7b7cb;
  border-width: 13px;
  margin-left: -13px; }

.magazine-story__meta-avatar {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 3;
  width: 100%;
  top: 0; }

/*# sourceMappingURL=../css/maps/styles.css.map */