/**
*
* Stylesheet for <site name>
*
*    Normalize.css
* 0. CSS variables and fonts
* 1. Basic grid
* 2. Typography and basic elements
* 3. Header
* 4. Nav
* 5. Homepage styles
* 5a. Internal page styles
* 6. Footer 
* 7. Magnific popup
* 8. Video modals
*
**/

/***
* Normalize.css
***/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
    background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
    border-style: none;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input { /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  /* Misc
     ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
    display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
    display: none;
  }
  

/***
* 0. CSS variables and fonts
***/
:root {
  --purple:#1a124d;
  --purple-overlay:rgba(26,17,77,.75);
  --teal:#00b08f;
  --mid-grey:#606060;
  --light-grey:#f2f2f2;
  --white:#fff;
  --content-width:1100px;
}


/***
* 1. Basic grid
***/

body, html {
    font-size: 16px;
    width: 100vw;
    margin: 0;
    font-family:'Open Sans', sans-serif;
}

.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }
  
.col-1 {
grid-column: span 1;
}

.col-2 {
grid-column: span 2;
}

.col-3 {
grid-column: span 3;
}

.col-4 {
grid-column: span 4;
}

.col-5 {
grid-column: span 5;
}

.col-6 {
grid-column: span 6;
}

.col-7 {
grid-column: span 8;
}

.col-8 {
grid-column: span 8;
}

.col-9 {
grid-column: span 9;
}

.col-10 {
grid-column: span 10;
}

.col-11 {
grid-column: span 11;
}

.col-12 {
grid-column: span 12;
}

.show-for-medium, .show-for-large {
    display:block;
}

.hide-for-medium, .hide-for-large {
    display:none;
}

@media screen and (min-width:641px) and (max-width:1440px) {
    .medium-col-1 {
        grid-column: span 1;
    }
    
    .medium-col-2 {
        grid-column: span 2;
    }
    
    .medium-col-3 {
        grid-column: span 3;
    }
    
    .medium-col-4 {
        grid-column: span 4;
    }
    
    .medium-col-5 {
        grid-column: span 5;
    }
    
    .medium-col-6 {
        grid-column: span 6;
    }
    
    .medium-col-7 {
        grid-column: span 8;
    }
    
    .medium-col-8 {
        grid-column: span 8;
    }
    
    .medium-col-9 {
        grid-column: span 9;
    }
    
    .medium-col-10 {
        grid-column: span 10;
    }
    
    .medium-col-11 {
        grid-column: span 311;
    }
    
    .medium-col-12 {
        grid-column: span 12;
    }

    .show-for-medium {
        display:block;
    }

    .hide-for-medium {
        display:none;
    }
}

@media screen and (max-width:768px) {
    .small-col-1 {
        grid-column: span 1;
    }
    
    .small-col-2 {
        grid-column: span 2;
    }
    
    .small-col-3 {
        grid-column: span 3;
    }
    
    .small-col-4 {
        grid-column: span 4;
    }
    
    .small-col-5 {
        grid-column: span 5;
    }
    
    .small-col-6 {
        grid-column: span 6;
    }
    
    .small-col-7 {
        grid-column: span 8;
    }
    
    .small-col-8 {
        grid-column: span 8;
    }
    
    .small-col-9 {
        grid-column: span 9;
    }
    
    .small-col-10 {
        grid-column: span 10;
    }
    
    .small-col-11 {
        grid-column: span 311;
    }
    
    .small-col-12 {
        grid-column: span 12;
    }

    .show-for-small {
        display:block;
    }

    .hide-for-small {
        display:none;
    }
}

.content {
  width:100vw;
  margin:0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content, .inner, .wp-block-group__inner-container {
    max-width: var(--content-width);
    margin:0 auto;
    position: relative;
}

.main-content {
  flex: 1;
}

.full-width-group {
  width:100vw;
  box-sizing: border-box;
  margin-left: calc(-50vw + 50%);
  left: calc(-50vw + 50%);
  position: initial;
  padding-top: 45px;
  padding-bottom:45px;
  background-color: var(--light-grey);
}

.entry-content, header .inner, .winner-carousel-area, .wp-block-group__inner-container {
  width:800px;
  margin:0 auto;
}

@media screen and (max-width:1200px) {
    .content {
        margin:0;
    }

    .main-content, .inner, .entry-content, .winner-carousel-area, .wp-block-group__inner-container {
      max-width: 94vw;
  }
}

@media screen and (max-width:768px) {
    .content {
        max-width:100%;
        box-shadow:none;
        margin-top:0;
        margin-bottom:0;
    }

    .full-width-group {
        padding-left:4.5vw;
        padding-right:4.5vw;
    }
}

/***
* 2. Typography and basic elements
***/

h1, h2, h3, h4, p, li, a {
  font-family: 'Open Sans', sans-serif;
}

h1 {
  color: var(--purple);
  font-weight: bold;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1.7rem;
}

h2 {
  color: var(--purple);
  font-size: 1.25rem;
  margin-top:2rem;
}

h2 span {
  color:var(--teal);
}

h3 {
  color: var(--purple);
  font-weight: 600;
  font-size: 1.25rem;
}

p, ul li, ol li {
  color: var(--purple);
  font-size: .9125rem;
  line-height: 1.5rem;
}

a {
  color: var(--purple);
  text-decoration: underline;
}

strong {
  font-weight: 600;
}

/***
* 3. Header
***/

.pre-header {
  background-color: var(--purple);
}

.pre-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header {
  background-image: url('../images/hero-peoples-choice.jpg');
  min-height: 450px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top:5.5rem;
  padding-bottom: 2rem;
  margin-bottom: 45px;
}

.home header {
  background-image: url('../images/hero.jpg');
  min-height: 500px;
  margin-bottom: 0;
}

.header-logo img {
  max-width: 300px;
}

.header-strapline {
  font-weight:600;
  color:var(--white);
  font-size:1.5rem;
  margin-top:2.5rem;
}

.home .header-strapline {
  margin-left:-7rem;
}

.header-video {
  padding-top:4rem;
  max-width: 300px;
}

.header-video img {
  margin: 0 auto;
  display: block;
  max-width: 120px;
  height: auto;
}

@media screen and (max-width:1200px) {
  .header-strapline, .home .header-strapline {
    margin-left:0;
  }
}

@media screen and (max-width:768px) {
  header {
    background-image: url('../images/hero-mobile.jpg');
    min-height: auto;
    padding-top:2.5rem;
    padding-bottom:2rem;
  }

  .header-logo img {
    margin: 0 auto;
    display: block;
  }

  .header-video {
    max-width: 94vw;
  }

  .header-strapline {
    text-align: center;
  }
}

@media screen and (max-width:300px) {
  .header-logo img {
    max-width: 94vw;
  }
}



/***
* 4. Nav
***/

.header-nav {
  font-weight: bold;
  text-transform: uppercase;
}

.header-nav ul {
  display:flex;
}

nav ul {
  padding-left:0;
}

nav li {
  list-style-type: none;
  margin-bottom: .5rem;
}

.header-nav li {
  margin-left:1.5rem;
  margin-bottom: 0;
}

.header-nav li a:hover {
  color:rgba(255,255,255,.6);
}

nav li a {
  color:var(--white);
  text-decoration: none;
}


/***
* 5. Homepage styles
***/

.wp-block-columns {
  margin-bottom: 45px;
}

.grey-background {
  background-color: var(--light-grey);
  padding:4rem 0;
}

.pitch-item {
  overflow: hidden;
  position: relative;
  min-height:200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.pitch-details {
  position: absolute;
  bottom:0;
  z-index: 5;
  width:100%;
  padding-top:2rem;
  padding-bottom: .5rem;
  background: linear-gradient(rgba(26,17,77,0), rgba(26,17,77,.6));
  color:white;
  box-sizing: border-box;
  display:flex;
  align-items:flex-end;
}

.pitch-details-inner {
  margin-left:.5rem;
  margin-bottom:.5rem;
  display:flex;
  align-items:center;
}

.pitch-item:hover .pitch-details{
  background: rgba(26,17,77,.8);
  height:100%;
  cursor: pointer;
}

.pitch-thumb-title {
  margin-left:1rem;
  font-weight: 600;;
}


/**
* 5a. Internal page styles
**/

.pitch-area {
  padding-top:2.5rem;
  width:1100px;
}

@media screen and (max-width:1120px) {
  .pitch-area {
    width:94vw;
  }
}

.wp-block-button__link {
  background-color: var(--teal);
  font-size:15px;
  font-weight: bold;
  border-radius: 5px;
}

/***
* 6. Footer 
***/

footer {
  min-height: 16.25rem;
  margin-top:3.2rem;
  padding-top:3.2rem;
  background-color: var(--purple);
  color:var(--white);
}

footer .inner {
  display:flex;
  justify-content: space-between;
}

footer nav {
  font-size: .9125rem;
}

.footer-logo img {
  max-height: 8.125rem;
  width:auto;
}

.footer-social a {
  margin-left:1rem;
  max-width: 30px;
  height: auto;
}

.footer-social img {
  max-width: 30px;
  height: auto;
}

@media screen and (max-width:768px) {
  footer .inner {
    flex-direction: column;
    max-width: 94vw;
    margin: 0 auto 2rem;
  }

  .footer-social, .footer-logo {
    margin-top:2rem;
  }

  .footer-logo img {
    margin:0 auto;
    display: block;
  }
}

/***
* 7. Magnific popup 
***/

.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: var(--purple-overlay);
  opacity: 0.8; }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

    button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
display: none; }

button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 40px;
  height: 40px;
  line-height: 40px;
  position: absolute;
  right: -15px;
  top: 2rem;
  text-decoration: none;
  text-align: center;
  opacity: 0.97;
  padding: 0 0 18px 10px;
  color: #FFF;
 }
  .mfp-close:hover,
  .mfp-close:focus {
    opacity: 1; }

.mfp-close-btn-in .mfp-close {
  color: #333; }

  
.mfp-hide {
  display: none !important; }

/***
* 8. Video modals 
***/

.pitch-modal {
  width: 800px;
  min-height:600px;
  background:#fff;
  padding:2rem;
  margin-top:3rem;
}

@media screen and (max-width:820px) {
  .pitch-modal {
    width:94vw;
    min-width: auto;
    height:auto;
    min-height: auto;
    box-sizing: border-box;
  }
}

.voted-message {
  visibility: hidden;
  text-align: center;
}


/***
* 9. Carousels 
***/

.winner-carousel-area {
  margin-bottom:4rem;
  position: relative;
}
.carousel-holder {
  margin-top:-25px;
}

.carousel-thumbnails {
  z-index: 5;
  height: 185px;
}

.carousel-thumbnail {
  margin:0 1rem;
  z-index: 5;
  width:185px;
  outline: none;
}

.carousel-thumbnail img {
  border-radius:50%;
  width:140px;
  height:140px;
  display: block;
  margin: 0 auto;
  margin-top:.5rem;
  outline: none;
}

.slick-current.carousel-thumbnail img {
  width:200px;
  height:200px;
}

.slick-current.carousel-thumbnail img {
  border:8px solid var(--purple);
  box-sizing: border-box;
  margin-top: 0;
}

.carousel-entry {
  background-color: var(--purple);
  padding:2rem;
  border-radius: .5rem;
}

.carousel-entry h2, .carousel-entry p {
  color:white;
}

.carousel-entry p {
  margin-left:2.5rem;
  margin-right:2.5rem;
}

.slick-arrow {
  border:0;
  background-color: transparent;
  z-index: 50;
}

.slick-arrow img {
  height: 100%;
}

.slick-prev, .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 40%;
  height: 90%;
  transform: translate(0, -50%);
  cursor: pointer;
  outline: none!important;
  width: 130px!important;
}

.slick-prev {
  left:-25px;
}

.slick-next {
  right: -25px;
}

.post-156::after {
  background-image: url('../images/winner.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 110%;
  left: -4%;
  z-index: 5;
  top: -30px;
  height: 74px;
  content: '';
  display: block;
  position: relative;
}

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

  .carousel-thumbnail {
    width:180px;
    height:180px;
  }
  .carousel-entry {
    max-width: 96vw;
    padding:1rem;
  }

  .carousel-entry p {
    margin-left:0;
    margin-right:0;
  }

  .slick-prev {
    left:-5px;
  }

  .slick-next {
    right:-5px;
  }
}