/*
 * Theme Name: Bidvest
 * Version: 1.2
 */

// region VARS and MIXINS -------------------------------------------------------------

$site-width:    1920px;
$site-height:   1080px;

$inner-width:   (2/3) * $site-width;

$rem2px:        25px; // NOTE(rl): base font size

$palette: (
  'brand-orange':     #FF7F41,
  'brand-teal':       #2CD5C4,
  'brand-green':      #97D700,
  'brand-pink':       #EF426F,
  'brand-yellow':     #F2A900,

  'value-off-white':  #E7E4E4,
  'value-light':      #eeeeee,
  'value-mid':        #d1d1d1,
  'value-mid-dark':   #999999,
  'value-dark':       #666666,
  'value-off-black':  hsl(0, 0%, 15%),
);

@function color($key) {
  @return map-get($palette, $key);
}

@mixin position($pos, $top, $right: null, $bottom: null, $left: null) {
  position: $pos;

  @if ($right == null) {
    $right: $top;
  }
  @if ($bottom == null) {
    $bottom: $top;
  }
  @if ($left == null) {
    $left: $right;
  }

  bottom: $bottom;
  right:  $right;
  left:   $left;
  top:    $top;
}

@import '_svg-uri.scss';

// Horizontal Menu
@mixin horz-menu() {
  display:        flex;
  font-weight:    700;
  font-size: 0.7rem;

  @media (max-width: 720px) {
    font-size: 1rem;
  }

  text-transform: uppercase;

  li + li:before {
    margin: 0 0.5em;
    content: '|';
  }
}

@mixin clearfix() {
  &:before, &:after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin static-page-form() {
  form {

    display:        grid;
    @media (max-width: 519px){
      grid-template-columns: [start] 1fr [end];
    }
    @media (min-width: 520px) and (max-width: 939px) {
      grid-template-columns: [start] 1fr 1fr [end];
    }
    @media (min-width: 940px) {
      grid-template-columns: [start] 1fr 1fr 1fr [end];
    }

    > .submit {
      @media (max-width: 939px) {
        grid-column: start / end;
      }
    }

    > div {
      display:      flex;
    }
  }

  label {
    flex:           0 auto;
    padding-right:  12px;
    white-space: nowrap;
  }
  input, select {
    font-size:      1rem;
    flex:           auto;
  }

  input[type="submit"] {
    -webkit-appearance: none; // note(rl) 2018-10-24 - make the button not suck
    border-radius: 1rem;
    border: 0;
    background-color: #F2A900;
    color: white;
    font-weight: 700;
    cursor: pointer;
  }
}
// endregion

// region TAGS ------------------------------------------------------------------------

* {
  box-sizing:   border-box;
}

html {
  font-family:  'Open Sans', sans-serif;
  color:        color(value-off-black);
  font-weight:  300;

  $break: 720px;
  @media (min-width: $break + 1px) {
    font-size:  $rem2px;
  }

  @media (max-width: $break) {
    font-size:  0.7 * $rem2px;
  }
}

body {
  background-color: color(value-off-white);
  margin: 0;
}

body > .wrapper {
  background-color: white;
  max-width: $site-width;
  position: relative;
  margin: auto;
}

h1, h2 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 300;

  @media (max-width: 720px) {
    margin: 2rem 0 ;
  }
}

h1 {
  margin: 3rem 0;
}

h2 {
  margin: 2rem 0;
}

h3 {
  font-size: inherit;
}

h4 {
  font-weight: inherit;
  font-size: 1.1em;
}

h3, h4, p {
  margin: 1rem 0;
}

h1, h2, h3, h4, p {
  &:last-child:not(:first-child) {
    margin-bottom: 0;
  }

  &:first-child:not(:last-child) {
    margin-top: 0;
  }
}

p {
  &:last-child {
    margin-bottom: 0;
  }

  &:first-child {
    margin-top: 0;
  }
}

a {
  text-decoration: none;
  transition: 0.5s all;
  color: inherit;

  &, &:after {
    opacity: 1;
  }

  &:hover {
    &, &:after {
      opacity: 0.7;
    }
  }

  main p & {
    text-decoration: underline;
    text-decoration-color: #999999;
  }
  &.button {
    text-decoration: none;
  }
}

b, strong {
  font-weight: 700;
}

img {
  height: auto;
}

cite {
  font-style: inherit;
}

blockquote {
  margin: 0;
}

// endregion

// region CLASSES ---------------------------------------------------------------------

.menu {
  list-style: none;
  margin: 0;

  &, li {
    padding: 0;
  }
}

.button {
  background-color: color(brand-yellow);
  display: inline-block;
  border-radius: 0.5rem;
  padding: 0.5rem 3rem;
  font-weight: 700;
  font-size: 2rem;
  color: white;

  @media (max-width: 380px) {
    font-size: 1rem;
  }
}

a.important-link {
  color:          color('brand-yellow');
  font-weight:    700;
}

// endregion

// region FORMS -----------------------------------------------------------------------

form.wpcf7-form {
  $font-size:       0.8rem;

  p {
    margin:         0;
    padding:        0;
  }
  label,
  input[type="text"],
  input[type="email"],
  input[type="date"],
  select,
  textarea
  {
    width:          100%;
  }

  input,
  textarea,
  select {
    border:         1px solid color(value-mid);
    font-family:    "Open Sans", sans-serif;
    font-size:      $font-size;
    padding:        $font-size / 2;
    margin-bottom:  $font-size / 2;
  }
}


form.wpcf7-form input[type="submit"],
a.button
{
  display:        inline-block;
  margin-top:     0.5rem;
  padding:        0.25rem 1.1rem;
  border-radius:  1rem;
  border:         0;
  background-color: color(brand-yellow);
  color:          white;
  font-weight:    700;
  font-size:      1rem;
  cursor:         pointer;
  &:hover{
    background-color: darken(color(brand-yellow), 5%);
  }
}

// endregion

// region ALL PAGES -------------------------------------------------------------------

.wrapper > header {
  justify-content: space-between;
  max-width: $site-width;
  align-items: center;
  padding: 2rem;
  display: flex;
  z-index: 110;
  margin: auto;
  color: white;

  $break: 720px;
  @media (min-width: $break + 1px) {
    @include position(absolute, 0, 0, auto);
    @include position(absolute, 0, 0, auto);
  }

  @media (max-width: $break) {
    background-color: color(value-off-black);
    padding: 1.5rem 2rem 1rem;
  }
}

header .custom-logo {
  max-width: 142px;
}

header .menu {
  $break: 1600px;

  @media (min-width: $break + 1px) {
    @include horz-menu;

    .current_page_item > a,
    .current-menu-item > a {
      position: relative;

      &:after {
        @include position(absolute, 100%, 0, auto);

        background-color: white;
        margin: 0.5em auto 0;
        border-radius: 50%;
        height: 10px;
        width: 10px;
        content: '';
      }
    }
  }

  // reponsive menu
  @media (max-width: $break) {
    @include position(absolute, 0, 0, auto, auto);

    overflow: hidden;

    li,
    &:before {
      position: relative;
      z-index: 100;
    }

    &:before {
      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="white" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"></path></svg>') no-repeat center center;
      margin: 2rem 2rem 1rem auto;
      background-size: contain;
      cursor: pointer;
      display: block;
      height: 2rem;
      width: 2rem;
      content: '';
    }

    &.expanded:after {
      @include position(fixed, 0);

      z-index: 90;
      content: '';
      display: block;
      background-color: rgba(black, 0.15);
    }


    li a {
      display:      block;
      margin-right: 0;
      padding:      0.5rem 2rem;
      background-color: white;
      color:        black;
      text-align:   right;
      opacity:      1;
      transform:    translateX(0);
      transition:   transform opacity 0.5s;
    }

    li:first-child a {
      padding-top: 1rem;
    }

    li:last-child a {
      padding-bottom: 1rem;
    }

    &:not(.expanded) {
      &:before {
        background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M442 114H6a6 6 0 0 1-6-6V84a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6zm0 160H6a6 6 0 0 1-6-6v-24a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6zm0 160H6a6 6 0 0 1-6-6v-24a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6z"></path></svg>') no-repeat center center;
      }

      li a {
        opacity:   0;
        transform: translateX(100%);
        margin-right: -500px;
      }
    }
  }
}

.wrapper > footer {
  background-color: color(brand-yellow);
  text-align: center;
  padding: 2rem 0;
  color: white;
}

footer .menu {
  @include horz-menu;
  justify-content: center;

  @media (max-width: 1024px) {
    li + li:before {
      display: none;
    }
  }
}
// footer main menu
#menu-menu-1 {
  @media (max-width: 1024px) {
    display: none;
  }
}
// footer secondary menuff
#menu-footer-menu {
  text-transform: inherit;
  font-weight: inherit;

  @media (max-width: 1024px) {
    flex-direction: column;
  }
  #menu-item-72 {
    font-weight: 700;
  }
}

footer .custom-logo-link {
  margin: 2rem 0;

  @media (max-width: 720px) {
    margin: 0 0 1rem;
  }
  display: block;
}

footer .site-copyright {
  font-size: 0.5rem;
  margin-top: 2rem;

  @media (max-width: 720px) {
    padding: 1rem 1rem 0;
    font-size: 0.8rem;
    line-height: 1.3;
    margin-top: 0;
  }
}

.so-widget-sow-icon .sow-icon.sow-icon span {
  color: inherit !important;
}

.sow-slider-base .sow-slider-pagination.sow-slider-pagination {
  text-align: center;
  line-height: 1rem;
  bottom: 2rem;

  li a {
    margin-top: 0.25rem;
    height: 0.5rem;
    width: 0.5rem;
  }
}

// endregion

// region SEVERAL PAGES ---------------------------------------------------------------

.header-banner {
  $break-lg:        1366px;
  $break-sm:        1024px;
  $break-tn:        640px;
  $header-font-modifier:  8;
  $single-font-modifier:  0.45;

  &, &-small {
    justify-content: center !important;
    align-items:    center !important;
    text-align:     center;
    display:        flex;
    color:          white;
    flex:           100%;
  }

  @media (max-width: $site-width) {
    height:     $site-height / $site-width * 100vw;
  }
  @media (min-width: $site-width + 1px) {
    height:     $site-height;
  }
  &-small {
    height:     ($site-height / 3) / $site-width * 100vw;
  }

  &-small {
    background-color: color('brand-teal');
  }

  > div {
    max-width: $inner-width;
  }

  h1,
  &-small h1 {
    font-weight:    700;
    line-height:    1;
    margin:         1rem;
    color:        color(brand-yellow);

    &:after {
      color:        color(brand-yellow);
      content:      '.';
    }
  }

  @media (max-width: $break-lg) {
    h1 {
      font-size:      $header-font-modifier * $rem2px / $site-width * 100vw;
      .post-header & { // note (rl) 2018-06-12: For index.php generated banners on single posts:
        font-size:    $header-font-modifier * $single-font-modifier *$rem2px / $site-width * 100vw;
      }
    }
  }
  @media (min-width: $break-lg + 1px) {
    h1 {
      font-size:      $header-font-modifier * 1rem;
      .post-header & { // note (rl) 2018-06-12: For index.php generated banners on single posts:
        font-size:    $header-font-modifier * $single-font-modifier * 1rem;
      }
    }
    &-small h1 {
      font-size:      $header-font-modifier * $single-font-modifier * 0.75rem;
    }
  }

  p {
    font-size:      0.7rem;
    line-height:    1.75;
    font-weight:    600;
    @media (min-width: $break-tn) {
      font-size:      1.9vw;
      line-height:    3.25vw;
      font-weight:    600;
    }
    @media (min-width: $break-lg) {
      font-size:      1rem;
      line-height:    2;
      font-weight:    700;
    }
  }
  &-small p {
    line-height:    1.5;
    font-weight:    600;
    font-size:      1.25rem;
  }

}

.big-quote,
.banner-slider {
  blockquote {
    $f:             60px;
    $break:         1024px;

    line-height:    1.2;

    @media (min-width: $site-width + 1px) {
      font-size:    $f;
    }

    @media (max-width: $site-width) and (min-width: $break + 1px) {
      font-size:    $f / $site-width * 100vw;
    }

    @if (false) {
      @media (max-width: $break) {
        &, + p {
          font-size: $rem2px / $break * 100vw;
        }
      }
    }
  }
}

.big-quote,
.banner-slider .sow-slider-image {
  text-align: center;
  color: white;

  @media (min-width: $site-width + 1px) {
    min-height: $site-height;
  }

  @media (max-width: $site-width) {
    min-height: $site-height/$site-width*100vw;
  }
}

.big-quote,
.banner-slider .sow-slider-image .so-panel {
  $break: 1024px;

  > div {
    @include position(absolute, 0);

    display:          flex;
    justify-content:  center;
    flex-direction:   column;

    margin:         4rem;
    > * {
      max-width:    45%;
    }
    @at-root .big-quote.align-right > div,
    &.align-right {
      align-items:  flex-end;
    }
    @at-root .big-quote.align-bottom > div,
    &.align-bottom {
      justify-content: flex-end;
    }

    // media query 2
    @media (max-width: 639px) {
      h2, h3 {
        font-size: 0.9rem;
        margin: 1rem 0;
      }
      h4 {
        font-size: 0.8rem;
      }
      p {
        font-size: 0.75rem; // TODO(rogb): Too small?
      }
    }
    // part of media query 2
    @media (min-width: 640px) and (max-width: 1365px) {
      h2, h3 {
        font-size: 3vw;
        margin: 1rem 0;
      }
      h4 {
        font-size: 2.2vw;
      }
      p {
        font-size: 2.1vw;
      }
    }
  }
}

#awards-slider .panel-layout {
  @media (max-width: 570px){
    // display: none;
  }
}

.banner-slider .sow-slider-image-container {
  bottom: 0;
  right: 0;

}

.banner-slider .sow-slider-image-container,
.big-quote > div {
  @media (max-width: 1024px){
    margin:         0;
    padding:        4rem;
    background-color: rgba(0,0,0,0.3);
    text-shadow:    2px  2px  2px rgba(0,0,0,0.5),
                    -2px 2px  2px rgba(0,0,0,0.5),
                    2px  -2px 2px rgba(0,0,0,0.5),
                    -2px -2px 2px rgba(0,0,0,0.5);
  }
}

.big-quote {
  position: relative;
}

.panel-layout > .panel-grid > div {
  $m: 2rem;

  margin-bottom:    $m;
  margin-top:       $m;

  &.no-h-margin,
  &.header-banner,
  &.header-banner-small
  {
    margin-bottom:  0;
    margin-top:     0;
  }
}

.side-margin {
  $m: 1rem;

  margin-right: $m;
  margin-left: $m;
}

.max-width-inner {
  $break: $inner-width + 2*$rem2px;
  @media (min-width: $break + 1px) {
    max-width: $inner-width;
    margin: auto;
  }

  @media (max-width: $break) {
    margin: 1rem;
  }
}

.grid-three > .panel-grid-cell {
  $gap: 1rem;

  grid-template-columns: repeat(3, 1fr) [end];
  grid-gap: $gap;
  display: grid;
}

.grid-two {
  // no gap, because background colours are a thing

  // default colours, can be overridden on each cell.
  background-color: color('brand-teal');
  color:            color('value-off-white');
  // default padding, can also be overridden easily on each cell.
  .so-panel > div {
    padding:        3rem;
  }

  .panel-layout > .panel-grid > & { // note (rl) 2018-06-19 - odd selector needed for specificity.
    margin-bottom:  0;
    margin-top:     0;
  }

  > div > div { // note (rl) 2018-06-20 - no classes or IDs available present across different pages
    display: flex;
    flex-direction: column;

    .so-panel {
      min-height:   4rem;
    }

    @media (max-width: 780px) { // note(rl) - 780px is the mobile breakpoint of the page builder
      display:        grid;
      grid-gap:       0;
      grid-template-columns: repeat(2, 1fr);

      // note(rl) - the best attempt at alternating the banding
      @for $i from 1 through 30 {
        @if ($i % 4 == 0) {
          .so-panel:nth-child(#{$i}) {
            order: $i - 1;
          }
        }
      @else if (($i + 1) % 4 == 0) {
          .so-panel:nth-child(#{$i}) {
            order: $i + 1;
          }
        }
      @else {
          .so-panel:nth-child(#{$i}) {
            order: $i;
          }
        }
      } // end loop
    } // end media query

  }

  .panel-grid-cell > div div {
    height:         100%;
    overflow:       hidden;
  }

  .widget-title {
    margin-bottom:  2rem;
  }

  h2, h3, h4, h5, h6, p {
    text-align:     center;
  }
  h2, h3, h4, h5, h6 {
    font-size:      216.66%;
  }
  p {
    font-size:      133.33%;
  }

  strong, b { // note (rl) 2018-06-19 - both are used.
    font-weight:    700;
  }
  strong {
    text-transform: uppercase;
  }

  .so-widget-sow-editor img {
    @media (max-width: $site-width){
      //min-height:   150px;
      //max-height:   25vw;
      height:       auto;
      max-width:    30vw;
      min-width:    150px;
      width:        auto;
    }
  }

}

// NOTE(rogb): The alternating grid thing from the original PDF
@if (false) {
  .gap-grid > .panel-grid-cell {
    grid-template-columns: repeat(4, 1fr);
    display: grid;

    > div {
      grid-column: span 2;

      &:nth-child(4n-3), &:nth-child(4n-2) {
        margin-left: 50%;
      }

      &:nth-child(4n-1), &:nth-child(4n-0) {
        margin-right: 50%;
      }
    }
  }
}

// #be-the-best, #being-the-best - note (rl) for ctrl+f search
// shared styles for all icons lists.
%icon-lists-shared-styles {
  @extend .max-width-inner;
  position:         relative;
  text-align:       center;

  .so-widget-sow-editor h3 {
    font-weight:    300;
  }

  .widget_sow-editor {
    position:       relative;
    grid-column:    1 / end;
  }

  .widget_sow-image ~ .widget_sow-editor {
    position: relative;
    grid-row: panel-start / panel-end;
    // transition: 1s all; note (rl) - commented rather than removed, will probably need again.
    opacity:        0;
    z-index:        10;

    // note(rl) - 2018/08/28 - Edge and IE don't have proper support for z-indexing in this context - display hacks
    // used to work around this for now
    // IE10+ CSS
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      //display:        none;
    }
    // Edge
    @supports (-ms-ime-align: auto) {
    //  display:        none;
    }

    &.hot {
      opacity:        1;
      z-index:        20;
      // IE10+ CSS
      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        //display:      block;
      }
      // Edge
      @supports (-ms-ime-align: auto) {
      //  display:      block;
      }

    }
  }

  .widget_sow-image {
    color:          color(value-mid);
    cursor:         pointer;

    &:hover {
      color:        color(value-mid-dark);
    }

    &.hot {
      color:        black;
    }

    .widget-title {
      @media (max-width: 480px) {
        font-size:  3.5vw;
      }
    }

    svg {
      display:        block;
      max-height:     14vw;
      width:          auto;
      margin:         auto;
      padding:        0.5rem;
      pointer-events: none;
      @media (min-width: 380px){
        // display: block;
      }
      @media (min-width: 720px) {
        max-height:   130px;
        padding:      1rem;
      }
    }

    + .widget_sow-image .sow-image-container {
      border-left:    1px solid color(value-mid);
    }

    $colors: ('brand-yellow', 'brand-pink', 'brand-green', 'brand-teal', 'brand-orange');
    @for $i from 1 through length($colors) {
      $current-color: color(nth($colors, $i));

      &:nth-child(#{$i + 1}) path {
        fill:         $current-color;
      }
      &:nth-child(#{$i + 1}):hover path {
        fill:         darken( $current-color, 10% ) ;
      }

    } // end loop
  }
}

$icons-list-containers: (
        'the-best-technology':  4,
        'being-the-best':       5,
);

@each $key, $number in $icons-list-containers{
  // note (rl) - outputs the keys as a single selector
  ##{$key} {
    @extend %icon-lists-shared-styles;
  }

  // list specific styles
  ##{$key} {
    $number-of-items: $number;

    > div { // container
      display:                grid;
      grid-template-rows:     auto auto [panel-start] auto [panel-end];
      grid-template-columns:  repeat(#{$number-of-items}, 100%/$number-of-items) [end];
    }

    > div > .so-panel:nth-child(n + #{$number-of-items + 2}) h3,
    > div > .so-panel:nth-child(n + #{$number-of-items + 2}) .widget-title {
      margin:     3rem 0 2rem;
      color:      inherit;
      font-size:  1.5rem;
    }
  } // end ##key
} // end loop


// endregion

// region FRONT -----------------------------------------------------------------------

#front-slide {
  position:       relative;
  color:          white;

  .site-telephone {
    position:     absolute;
    z-index:      100;
    bottom:       2rem;
    right:        2rem;
    line-height:  1;

    a {
      font-weight:  700;
      text-decoration: none;
    }
  }

  @media (max-width: 1024px) {
    .site-telephone {
      position:     static;
      text-align:   center;
      margin-top:   4rem;
      color:        black;

      @media (max-width: 720px) {
        margin-top: 3rem;
      }

      a {
        text-decoration: underline;
      }
    }
  }
}

#usps {
  color:            white;
  font-size:        2.5rem;
  line-height:      1;

  h2, h3, h4, p {
    margin:         0;
  }

  p {
    display:        block;
    margin-top:     2rem;
    font-size:      1.2rem;
    font-weight:    700;
  }

  a {
    text-decoration: none;
    &:hover {
      opacity: 1;
    }
  }

  // note(rl) - tags being selected in case the widget type changes.
  .panel-grid-cell .so-panel.widget > .panel-widget-style > div { // so-widget-xxxxx-base
    position:       relative;
    display:        block;
    padding-top:    100%;

    > div,
    > a > div { // widget type
      @include position(absolute, 0);

      visibility:       hidden;
      display:          flex;
      justify-content:  center;
      flex-direction:   column;
      align-items:      center;
      background-color: rgba(color(brand-yellow), 0.7);
      text-align:       center;
      opacity:          0;
      transition:       all 0.5s;
    }
  }

  .so-panel.widget > .panel-widget-style {
    transition:         all 0.5s;

    &:hover {
      background-size:  auto 110%;

      > div { // so-widget-xxxxx-base
        &,
        & > a > div,
        & > div { // widget type
          visibility:   visible;
          opacity:      1 !important;
        }
      }
    }
  }

  @media (max-width: 780px) {
    .panel-grid-cell + .panel-grid-cell {
      margin-top:       1rem;
    }
  }
}

@keyframes dip {
  0%   { transform: translateY(0%);  }
  50%  { transform: translateY(20%); }
  100% { transform: translateY(0%);  }
}

@keyframes drivein {
  0% {
    transform: translateX(100%);
    position: relative;
    right: -50%;
  }
  100% {
    position: relative;
    transform: none;
    right: 0%;
  }
}

@keyframes wiggle {
  0%   { transform: rotateZ(0deg);   }
  25%  { transform: rotateZ(-10deg); }
  50%  { transform: rotateZ(10deg);  }
  100% { transform: rotateZ(0deg);   }
}

#counters {
  $break:           720px;

  display:          flex;
  overflow:         hidden;
  color:            white;
  text-align:       center;

  &.panel-row-style.panel-row-style {
    flex-direction: inherit;
  }

  .panel-grid-cell {
    position:       relative;
    display:        flex;
    flex-direction: column;
    justify-content: center;
    border-radius:  50%;
    background-color: color(brand-yellow);
    transition:     transform 0.5s;
    @media (max-width: $break) {
      border:         1em solid white;
    }
    @media (min-width: $break + 1px) {
      border:         2em solid white;
    }


    &:hover {
      transform:    scale(1.025);

      .sow-icon-fontawesome[data-sow-icon=""] { animation: dip 0.5s;                                           }
      .sow-icon-fontawesome[data-sow-icon=""] { animation: drivein 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
      .sow-icon-fontawesome[data-sow-icon=""] { animation: wiggle 0.2s 2;                                      }
    }
  }

  h3,
  .sow-icon-fontawesome {
    font-size: 3em;
  }

  h3, p {
    margin: 0;
  }

  h3 {
    font-weight: 300;
  }

  @media (min-width: $site-width + 1) {
    .panel-grid-cell {
      $size:  calc( #{1/3*$site-width} - #{2/3*1rem} );
      height: $size;
      width:  $size;
    }
  }

  @media (max-width: $site-width) and (min-width: $break + 1px) {
    .panel-grid-cell {
      $size:  1/3 * 100vw;
      height: $size;
      width:  $size;
    }
  }

  @media (max-width: 1300px) and (min-width: $break + 1px) {
    font-size: $rem2px / 1300px * 100vw;
  }

  @media (max-width: $break) {
    &.panel-row-style.panel-row-style {
      flex-direction: column;
    }

    .panel-grid-cell {
      $size:  100vw;
      height: $size;
      width:  $size;
    }
  }

  @media (max-width: 440px) {
    font-size: $rem2px / 440px * 100vw;
  }

  @if (false) {
    $break2: 900px;
    @media (max-width: $break) and (min-width: $break2 + 1px) {
      justify-content: center;
      flex-wrap: wrap;

      .panel-grid-cell {
        $size: 1/2*100vw;
        height: $size;
        width: $size;
      }
    }

    @media (max-width: $break2) {
      display: block;

      .panel-grid-cell {
        $size: 100vw;
        height: $size;
        width: $size;
      }
    }
  }
}

#customers {
  background-color: color(value-light);
}

#customer-logos {
  margin: 0 0 2rem;
  list-style: none;
  display: flex;
  padding: 0;
  flex-wrap: wrap;

  @media (min-width: $site-height){
    flex-wrap: nowrap;
  }

  li {
    &:not(.line) {
      align-self: center;
      flex:       1 0 20%;
      padding:    0.5rem;

      @media (min-width: $site-height){
        flex:     1;
        padding:  0;
      }
    }
    + .line {
      display:    none;

      @media (min-width: $site-height){
        display:  block;
        border-left: 1px solid color(value-mid);
        padding-left: 1rem;
        margin-left: 1rem;
      }
    }
  }

  img {
    max-width: 100%;
    display: block;
    margin: auto;
  }
}

#testimonial-slider {
  position: relative;

  > .inner {
    overflow: hidden;
    display: flex;
  }

  .slide {
    justify-content: space-between;
    flex-direction: column;
    transition: 0.5s all;
    align-items: center;
    flex: 0 0 100%;
    display: flex;

    > :nth-last-child(n+2) {
      // margin-top: 1rem;
    }

    > :last-child {
      margin:     1rem auto auto auto;
    }
  }

  cite,
  blockquote {
    margin:     0;
    max-width:  100%;
    text-align: center;
  }

  img {
    // height: adjust the height in functions.php image styles - RL 2018-06-11
    max-width:  100%;
  }

  $h: 1.4*5; // NOTE(rogb): 1.4 is the line height, and we want it 5 lines high
  $break: $inner-width + 2*$h*$rem2px;
  $break1: 800px;

  .nav > div {
    position:   absolute;
    top:        0;
    line-height: 1;
    font-size:  0;
    cursor:     pointer;
    @media (max-width: $break1 - 1px) {
      height:     $h/2*1rem;
      width:      $h/2*1rem;
    }
    @media (min-width: $break1) {
      height:     $h*1rem;
      width:      $h*1rem;
    }
  }

  $icon: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="#{color(value-mid)}" d="M238.475 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L50.053 256 245.546 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L10.454 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z" class=""></path></svg>');

  .prev {
    background: $icon no-repeat center center;
    background-size: 30%;
    right: 100%;
  }

  .next {
    background: $icon no-repeat center center;
    transform: scaleX(-1);
    background-size: 30%;
    left: 100%;
  }

  @media (min-width: $break) {
    max-width: $inner-width;
    margin: auto;
  }

  @media (max-width: $break - 1px) and (min-width: $break1) {
    margin: 0 $h*1rem;
  }
  @media (max-width: $break1 - 1px) {
    $h: $h / 2;
    margin: 0 $h*1rem;
  }
}

// endregion

// region ARCHIVES --------------------------------------------------------------------

#pg-archive-no-results {
  padding:          0 0 40px 0;
}

// endregion

// region ABOUT PAGE ------------------------------------------------------------------

#awards-slider                     .sow-slider-image{

  h2, h3 {
    font-weight:  700;
  }

  $break-lg:        1400px;
  $break-sm:        768px;

  @media screen and (max-width: $break-sm) {
    h2, h3 {
      font-size:    1rem;
    }
    h4, h5, h6, p {
      font-size:    0.6rem !important; // note (rl) - important needed as page build styles interfering
    }
  }
  @media screen and (min-width: $break-sm + 1px) and (max-width: $break-lg) {
    h2, h3 {
      font-size:    2.5vw;
    }
    h4, h5, h6, p {
      font-size:    1.7vw !important; // note (rl) - important needed as page build styles interfering
    }
  }
}

#best-team {
  text-align: center;

  h2 {
    // font-weight: 700;
  }

  $grid-break: 720px;

  &.grid-three > .panel-grid-cell {
    @media screen and (max-width: $grid-break) {
      grid-template-columns: repeat(2, 1fr) [end];
    }
  }

  .so-panel:first-child {
    grid-column: 1 / end;
    margin-bottom: -1rem;
  }

  .so-panel:nth-child(n+2) {
    position:     relative;
    color:        white;
    // note(rl) - these different values are for maintaining aspect ratios for image containers when the grid jumps
    // from 3 cells to 2 cells wide.
    $sm-height:      $site-width / 2 - (3/2) * $rem2px;
    $lg-height:      $site-width / 3 - (4/3) * $rem2px;
    @media only screen and (max-width: $grid-break - 1px){
      height:    $sm-height / $site-width * 100vw;
    }
    @media only screen and (min-width: $grid-break) and (max-width: $site-width - 1px){
      height:    $lg-height / $site-width * 100vw;
    }
    @media only screen and (min-width: $site-width){
      height:     $lg-height;
    }

    > div {
      justify-content: center;
      align-items: center;
      display: flex;

      &,
      &:before {
        @include position(absolute, 0);
      }

      &:before {
        background: rgba(#3c464b, 0.7);
        display: block;
        content: '';
      }

      &:before,
      > div {
        transition: 1s all;
        opacity: 0;
      }

      &:hover {
        &:before,
        > div {
          opacity: 1;
        }
      }

      > div {
        position: relative;
        z-index: 10;
      }
    }
  }
}

// endregion

// region JOBS PAGES ------------------------------------------------------------------

.job-details {
  dl {
    display: grid;
    grid-gap: 12px;
    grid-template-columns: auto [start] 1fr auto 1fr [end];
  }
  dt {
    font-weight: 600;
  }
  dd {
    margin: 0;
  }
}

// endregion

// region CONTACT PAGE ----------------------------------------------------------------

#contact-information {
  $number-of-rows: 5;

  .panel-grid-cell > div {
    display:        grid;
    grid-gap:       25px;
    grid-template-columns:  1fr;
    grid-template-rows: auto;

    @media screen and (min-width: 960px){
      grid-template-columns:  1fr 1fr;
      grid-template-rows:     repeat($number-of-rows, auto);
      > div:nth-child(1) {
        grid-row:       1 / #{($number-of-rows + 1 )};
        grid-column:    2;
        display:        flex;
      }
    }
  }

}

// endregion

// region CATEGORIES and SINGLE POSTS -------------------------------------------------

#static-header {
  background-color: color(value-dark);
}

// default image for archives and posts
body.error404,
body.archive,
body.single,
body.password-protected-page {
  #static-header {
    background-image: url("/wp-content/uploads/2018/06/about-us.jpg");
  }

  // if there is a featured post image, display it in the header.
  .has-background-image{
    position:       relative;
    overflow:       hidden;

    .background-image-container{
      @include      position(absolute, 0);
      z-index:      1;
      margin:       -10px;
      filter:       blur(10px);
      background-position: center;
      background-size:     cover;
      background-repeat:   no-repeat;
    }
    .header-banner {
      position:     relative;
      z-index:      3;
      background-color: rgba(0,0,0,0.5);
      background-image: none;
    }
  }
}

// sane margins for single posts
body.single {
  article {
    @extend .max-width-inner;
    padding-top:    3rem;
  }
  main {
    padding-bottom: 4rem;
  }
}

body.archive {

  // colour loop
  article {
    // Note (rl) 2018-06-14 :: commented this out rather than removing it, as inevitably it will be needed again in
    // a hurry:
    // region
    // Background colours for headers and articles.
    // We only want the first 5 values of palette.
    // $palette-keys: map-keys($palette);
    // @for $i from 1 through 5 {
    //
    //   $palette-color: map-get( $palette, nth($palette-keys, $i));
    //
    //   &:nth-child(5n+#{$i}) {
    //     background-color: mix( white, $palette-color , 10%) ;
    //     color:            #ffffff;
    //
    //     header {
    //       background-color: $palette-color ;
    //       &:hover {
    //         background-color: darken( $palette-color , 5%);
    //       }
    //     }
    //
    //   }
    // } // end loop
    // endregion

    // Background colours for headers and articles.
    $color-values: (#424242, #333333);

    @for $i from 1 through length($color-values) {

      $palette-color: nth($color-values, $i); // map-get( $palette, nth($color-values, $i));

      background-color: color('value-dark');
      color:            color('value-off-white');

      &:nth-child(#{length($color-values)}n+#{$i}) header {
        background-color:    $palette-color;
        &:hover {
          background-color:  darken($palette-color , 4%);
        }
      }
    }
  }

  // base styles
  article {
    padding-bottom: 0;

    header {
      display:      flex; // note(rl) 2018-06-12 :: to get the icon next to the title.
      padding:      0;
      overflow:     hidden;
      cursor:       pointer;

      > div { // container for title and read more
        margin:     1rem 0;
        max-width:  100%;
        width:      60rem;
      }

      h2, h3, small {
        margin:     0;
        padding:    0 1rem;
        text-align: left;
        color:      #ffffff;
      }
    }

    .date {
      font-weight:  700;
    }
  }


  // icons and on-click
  article header.has-icon {
    &::before {
      content:    " ";
      display:    block;
      height:     2rem;
      width:      2rem;
      margin:     1rem 0 1rem 2rem;
      background-image:     url("img/icon-negative-yellow.png");
      background-size:      contain;
      background-position:  center;
      background-repeat:    no-repeat;
    }
    &:hover::before{
      background-image:     url("img/icon-negative.png");
    }
    &.closed{
      &::before {
        background-image:   url("img/icon-positive-yellow.png");
      }
      &:hover::before{
        background-image:   url("img/icon-positive.png");
      }
    }
  }

  // Best News / Posts

  &.category-news {
    #static-header {
      background-image:     url("/wp-content/uploads/2024/05/Best-News.jpg");
      background-size: contain;
    }
  }

  // Jobs / Careers / Join the Best

  &.post-type-archive-job {
    #static-header {
      background-image:     url("/wp-content/uploads/2024/05/Careers.jpg");
      background-size: contain;
    }
  }

}

// note(rl) 2018-10-12 - Body.error404 needed here for searches that return no results (triggers WP's 404 page)
.jobs-content-wrapper,
body.archive .content-wrapper,
body.error404 .content-wrapper {
    // @extend       .max-width-inner;
    display:      flex;
    flex-direction: column;
    margin:       auto;
    padding:      2rem;
    @media (min-width: 1024px) {
      margin:       auto auto auto 3rem;
      flex-direction: row;
    }

    .content {
      flex:       2;
    }
    .featured-image{
      flex:       1;
      margin-top: 1rem;
      min-height: 12rem;
      background-position:  center;
      background-size:      cover;

      @media screen and (min-width: 1024px) {
        margin-top: 0;
        margin-left: 1rem;
      }
    }
  }
// endregion


body.password-protected-page {
  .content-wrapper {
    // padding:      2rem 4rem;
  }
  .post-password-form {
    @include static-page-form();
  }
}

// region IE BULLSHIT -----------------------------------------------------------------

@if (false) {

  // TODO(rogb): Padding on front logos
  #panel-18-1-0-1> .panel-widget-style {
    //padding: 0px 0px 50px 0px; (remove)
  }

  #pg-18-3> .panel-row-style, #pg-18-5> .panel-row-style {
    //padding: 125px 0px 150px 0px; (remove)
  }

  #pg-18-3> .panel-row-style, #pg-18-5> .panel-row-style {
    //padding: 125px 0px 150px 0px;
  }

  #panel-18-7-0-1> .panel-widget-style {
    //padding: 0px 0px 100px 0px;
  }

  #panel-38-3-0-0> .panel-widget-style {
    //padding: 0px 0px 50px 0px;
  }

  #pg-38-1> .panel-row-style {
    //padding: 0rem 0rem 4rem 0rem;
  }
}

// NOTE(rogb): IE bullshit
@if (true) {
  // IE10+ CSS
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .grid-three > .panel-grid-cell {
      @include        clearfix;
    }

    .grid-two > div > div {
      display:        flex;
      flex-wrap:      wrap;
      flex-direction: row;
    }
    .grid-two > .panel-grid-cell > div > div {
      width:          50%;
    }

    .grid-two > .panel-grid-cell > div > div {
      height:         auto;
      overflow:       hidden;
    }

    .grid-three > .panel-grid-cell > div:nth-child(n+2) {
      width:          33%;
      float:          left;
    }

    #being-the-best > div,
    #the-best-technology > div {
      display:        -ms-grid;
      -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
      -ms-grid-rows:  auto auto auto;
      z-index:        30;

      > :nth-child(1) {
        -ms-grid-row:         1;
        -ms-grid-row-span:    1;
        -ms-grid-column:      1;
        -ms-grid-column-span: 5;
      }

      .widget_sow-image ~ .widget_sow-editor {
        -ms-grid-row:         3;
        -ms-grid-row-span:    1;
        -ms-grid-column:      1;
        -ms-grid-column-span: 5;
      }

      .widget_sow-image {
        -ms-grid-row-span:    1;
        -ms-grid-row:         2;
        -ms-grid-column-span: 1;

        &:nth-child(2) { -ms-grid-column: 1; }
        &:nth-child(3) { -ms-grid-column: 2; }
        &:nth-child(4) { -ms-grid-column: 3; }
        &:nth-child(5) { -ms-grid-column: 4; }
        &:nth-child(6) { -ms-grid-column: 5; }
      }

    }

    #the-best-technology > div {
      display: -ms-grid;
      -ms-grid-columns: 1fr 1fr 1fr 1fr;
      -ms-grid-rows: auto auto auto;

      > :nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 4;
      }

      .widget_sow-image ~ .widget_sow-editor {
        -ms-grid-row: 3;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 4;
      }

      .widget_sow-image {
        -ms-grid-row-span: 1;
        -ms-grid-row: 2;
        -ms-grid-column-span: 1;

        &:nth-child(2) { -ms-grid-column: 1; }
        &:nth-child(3) { -ms-grid-column: 2; }
        &:nth-child(4) { -ms-grid-column: 3; }
        &:nth-child(5) { -ms-grid-column: 4; }
      }
    }

    .contact-information-cell {
      display: -ms-grid;
      -ms-grid-columns: 1fr 25px 1fr;
      -ms-grid-rows: auto 25px auto 25px auto 25px auto 25px auto;

      //.widget_sow-image ~ .widget_sow-editor {
      //  -ms-grid-row: 2;
      //  -ms-grid-row-span: 1;
      //  -ms-grid-column: 1;
      //  -ms-grid-column-span: 4;
      //}

      .so-panel.widget {
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;

        &:nth-child(1) {
          -ms-grid-row: 1;
          -ms-grid-row-span: 9;
          -ms-grid-column: 3;
          -ms-grid-column-span: 1;
          > div {
            width: 100%;
          }
        }
        &:nth-child(2) { -ms-grid-row: 1; }
        &:nth-child(3) { -ms-grid-row: 3; }
        &:nth-child(4) { -ms-grid-row: 5; }
        &:nth-child(5) { -ms-grid-row: 7; }
        &:nth-child(6) { -ms-grid-row: 9; }
      }
    }
   // end ie
  }

  // NOTE(rogb): Undo IE bullshit
  @supports (display: grid) {

    .grid-two   > .panel-grid-cell > div > div,
    .grid-three > .panel-grid-cell > div:nth-child(n+2) {
      width:      auto;
      float:      none;
    }

    .grid-two > .panel-grid-cell > div::before {
      content: none;
      display: none;
    }

    .grid-two > div > div { // note (rl) 2018-06-20 - no classes or IDs available present across different pages
      display: flex;
      flex-direction: column;
      .so-panel {

      }

      @media (min-width: 780px){
        display:        grid;
        grid-gap:       0;
        grid-template-columns: repeat(2, 1fr);
      }

      .so-panel {
        min-height:   4rem;
      }
    }
  }
}

.so-widget-sow-layout-slider-default-055245cd0700 .sow-slider-base ul.sow-slider-images .sow-slider-image-wrapper p,
.so-widget-sow-layout-slider-default-23f7d95ddc1a .sow-slider-base ul.sow-slider-images .sow-slider-image-wrapper p {
  font-size: inherit !important;
}

// endregion

#job-filters {
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  margin-bottom: 3rem;
  position: relative;
  display: grid;
  gap: 0.5rem;

  .submit {
    position: absolute;
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
    top: 100%;
    right: 0;
  }

  input, select {
    background-color: color('value-light');
    border: 1px solid black;
    border-radius: 5px;
    padding: 0.25rem;
    font: inherit;
  }

  input[type="submit"], input[type="reset"] {
    background-color: #F2A900;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    color: white;
  }

  @media (max-width: 1024px) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }

}


.blur {
  position: relative;
}

.blur > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(20px);
  z-index: 0;
  display: grid;
  align-items: center;
  justify-content: center;
  max-width: none;
}