/* Feature styles - colours */
.feature-colour-one {
    background-color: #ffebe4;
    color: #3b3634;
}
.feature-colour-one button:hover  {
  background-color: #ffc9b5;
  border-color: #ffc9b5;
  transition: 0.3s ease-in-out;
}
.feature-colour-two {
    background-color: #f0ede4;
    color: #3b3634;
}
.feature-colour-two button:hover  {
  background-color: #D6D4CC;
  border-color: #D6D4CC;
  transition: 0.3s ease-in-out;
}
.feature-colour-three {
    background-color: #435861;
    color: #ffffff;
}
.feature-colour-three button  {
  color: #ffffff;
  border-color: #ffffff;
}
.feature-colour-three button:hover  {
  background-color: #33434A;
  border-color: #33434A;
  transition: 0.3s ease-in-out;
}
.product-feature button:hover {
  background-color: #ffebe4;
  border-color: #ffebe4;
  transition: 0.3s ease-in-out;
}


/* layout - mobile first! */
.split-block-full, .split-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 1.25rem;
  flex-wrap: wrap;
}
.image-fill-pane .text-side {
  margin-bottom: 5rem;
}
.image-nofill-pane .video-side .video-side-inner  {
  margin-top: 4rem;
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}
.image-nofill-pane .image-side .image-side-inner,
.text-side .text-side-inner {
  margin-top: 4rem;
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}
.product-feature .text-side .text-side-inner  {
  margin-top: 1rem;
}
.product-feature .image-side .image-side-inner  {
  margin-top: 3rem;
}
.title-feature .text-side-inner {
  margin-top: 4rem;
  margin-bottom: 5rem;
}
.title-feature h1 {
  align-self: flex-start;
  font-size: 1rem;
}
.title-feature-outer  {
  margin-top: 1.5rem;
}
.text-side .text-side-inner h2 {
  font-size: 1.5rem;
  font-weight: 200;
  line-height: 2rem;
  margin-top: 0;
  margin-bottom: 0;
  align-self: flex-start;
}
.text-side .text-side-inner h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 200;
  margin: 0;
}
.text-side .text-side-inner p {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5rem;
}
.image-side .image-side-inner img {
  width: 100%;
  height: auto;
}
.video-side .video-side-inner iframe  {
  width: 100%;
  height: 25vw;
  max-height: 24rem;
}
/* article videos can be taller than feature videos */
.text-block div iframe  {
  width: 100%;
  height: 30vw;
}

/* stop videos being letterboxy on very big, or very small screens */
@media screen and (min-width: 1400px) {
  .video-side .video-side-inner iframe  {
    height: 25vw;
    max-height: 24rem;
  }
}
@media screen and (max-width: 899px) {
  .video-side .video-side-inner iframe, .text-block div iframe  {
    height: 50vw;
  }
}
/* big screens */
@media screen and (min-width: 900px) {
  .split-block  {
    margin-top: 2rem;
  }
  .split-block-full, .split-block {
    flex-direction: row;
    padding: 0;
  }
  .split-block-full {
    max-height: 36rem;
  }
  .split-block-full.image-nofill-pane {
    max-height: 36rem;
  }
  .cms-body > .split-block-full:nth-of-type(2n) {
    flex-direction: row-reverse;
  }
  .cms-body > .split-block:nth-of-type(2n) {
    flex-direction: row-reverse;
  }
  .cms-body > .split-block:nth-of-type(2n) > .image-side >.image-side-inner  {
    margin-left: 8rem;
  }
  .cms-body > .split-block:nth-of-type(2n-1) > .image-side >.image-side-inner  {
    margin-right: 8rem;
  }

  /* bigger header font */
  .title-feature h1 {
    font-size: 1.125rem;
  }
  .text-side .text-side-inner h2  {
    font-size: 2.25rem;
    line-height: 3rem;
    margin-bottom: 0.5rem;
  }
  .text-side .text-side-inner h3 {
    font-size: 2rem;
    line-height: 2.25rem;
    margin-bottom: 0.5rem;
  }
  .image-fill-pane .text-side {
    margin-bottom: 1.25rem;
  }
  .text-side, .image-side, .video-side  {
    margin: 0;
    width: 50%;
  }
  .text-side  {
    display: flex;
    align-items: center;
  }
  /* fancy margins for text with fill-pane images on big screens */
  .text-side .text-side-inner {
    margin: 5% 20% 5% 20%;
  }
  .image-side-inner  {
    height: 100%;
    overflow: hidden;
    max-height: 36rem;  /* limit height so it's not massive on big screens */
  }
  .image-nofill-pane .image-side .image-side-inner  {
    max-height: 28rem;  /* limit height so it's not massive on big screens */
  }
  /* fancy margins for nofill-pane images on big screens*/
  .split-block-full:nth-of-type(2n+1).image-nofill-pane .image-side .image-side-inner {
    margin: 10% 20% 5% 0%;
  }
  .split-block-full:nth-of-type(2n+1).image-nofill-pane .text-side .text-side-inner {
    margin: 5% 20% 5% 20%;
  }
  .split-block-full:nth-of-type(2n).image-nofill-pane .image-side .image-side-inner {
    margin: 10% 0 5% 20%;
  }
  .split-block-full:nth-of-type(2n).image-nofill-pane .text-side .text-side-inner {
    margin: 5% 20% 5% 20%;
  }
  .split-block-full:nth-of-type(2n+1).image-nofill-pane .video-side .video-side-inner {
    margin: 10% 20% 10% 0%;
  }
  .split-block-full:nth-of-type(2n).image-nofill-pane .video-side .video-side-inner {
    margin: 10% 0 10% 20%;
  }
}
@media screen and (min-width: 900px) {
  .image-fill-pane .image-side .image-side-inner img,
  .title-feature-outer .image-side .image-side-inner img {
    width: 140%;
    height: auto;
    margin-bottom: -4px;  /* don't know why this is needed, but without it, the image pops out of the pane, beyond a certain width */
  }
}
@media screen and (min-width: 1100px) {
  .image-fill-pane .image-side .image-side-inner img,
  .title-feature-outer .image-side .image-side-inner img {
    width: 115%;
    height: auto;
    margin-bottom: -4px;
  }
}
@media screen and (min-width: 1400px) {
  .image-fill-pane .image-side .image-side-inner img,
  .title-feature-outer .image-side .image-side-inner img {
    width: 100%;
    height: auto;
    margin-bottom: -4px;
  }
}
/* 4k support: NOTE min width for 4K behavour is 1921 not 1920! */
@media screen and (min-width: 1921px) {
  /* videos in articles*/
  .text-block div iframe {
    width: 100%;
  }
  /* videos in features*/
  .video-side .video-side-inner iframe  {
    max-height: 26rem;
  }
  /* confine features and product features to a central region */
  .split-block-full, .split-block {
    margin-left: auto;
    margin-right: auto;
    max-width: 138rem;
  }
  /* images in features */
  .split-block-full.image-nofill-pane {
    height: 40rem;
    max-height: 40rem;
  }
  /* allow product feature image panes only to be higher on size > HD */
  .split-block.image-nofill-pane .image-side .image-side-inner  {
    max-height: 50rem;
  }
}



/* Product Feature has div behaving as hr */
div.underline {
  height: 1px;
  flex-basis: 100%;
  background-color: #e0e0e0;
  margin: 6rem 27% 1rem 27%;
}
@media screen and (max-width: 900px) {
  div.underline {
    height: 1px;
    margin: 2rem 1rem 0 1rem;
    font-size:1px;
  }
}


/* Image Frame styles */
.image-side-inner {
  position: relative;
}
.frame-pad  {
  padding: 0 10%;
}
.frame  {
  position: absolute;
}
.frame-left  {
  top: 0;
  left: 0;
  height: 72%;
  width: 0.625rem;
}
.frame-right  {
  top: 0;
  right: 0;
  height: 72%;
  width: 0.625rem;
}
.frame-top  {
  top: 0;
  left: 0;
  height: 0.625rem;
  width: 100%;
}
.frame-bottom  {
  top: 72%;
  right: 0;
  height: 0.625rem;
  width: 100%;
}
.feature-colour-one .frame  {
  background-color: #3b3634;
}
.feature-colour-two .frame  {
  background-color: #3b3634;
}
.feature-colour-three .frame  {
  background-color: #ffffff;
}