/* **********************************************
 * @file solas_ct_homepage_vanguard.css
 * Vanguard Home Page - on UK site (.org)
 * ******************************************* */

/* ********************************************** */
/* HOME PAGE GRID WIDER THAN OTHER PAGES */
/* ********************************************** */
@media (min-width: 1280px) {
  .front .container {
    width: 1240px;
  }
}

/* ********************************************** */
/* Main Hero */
/* ********************************************** */

#hero {
  margin-bottom: 2.25em;
}

/* in case they add a video instead of an image */
#hero .bc-item div.oembed {
  margin: 0 auto;
}

#hero .bc-item img {
  margin-bottom: 0;
}

#hero h1 {
  font-size: 2.5rem;
  line-height: 1.25;
  margin: 1em 0 1.2222em;
  word-wrap: break-word;
  position: relative;
}

#hero h1::before {
  position: absolute;
  left: 0;
  bottom: -0.65em;
  content: "";
  background-color: #00dcff;
  width: 45px;
  height: 4px;
  border-radius: 4px;
}

/* ********************************************** */
/* Country Selector */
/* ********************************************** */

/* Hide SVG Circle on mobile as design dictates */
.front .bc-link-panel-text .bc-svg-circle {
  display: none;
}

#bc-country-selector {
  margin-bottom: 2.25em;
}

/* don't change it will interfere with the js */
#bc-country-selector .show {
  opacity: 1;
  max-height: 3775px;
  display: block;
}

/* Hide this initially and show on click with JS */
#bc-country-selector .hide {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.4s ease-out, opacity 0.2s linear;
  -moz-transition: max-height 0.4s ease-out, opacity 0.2s linear;
  transition: max-height 0.4s ease-out, opacity 0.2s ease-in;
}

#bc-country-selector .bc-panel,
#bc-visual-editorial .bc-panel {
  background-color: #23085a;
  border-radius: 0 0 50px 0;
  padding: 35px 10px 16px;
  margin: 0 10px;
  overflow: hidden;
}

#bc-country-selector .last form,
#bc-country-selector .bc-cs-full-width form {
  padding: 0;
  /* generic form has full-width-xs class */
  margin: 0 !important;
}

/* @TODO: Why is this form element has -20px !important coming from SUI!! */
#bc-country-selector .view-country-sites {
  padding: 0 20px;
}

#bc-country-selector label,
#bc-country-selector .bc-country-name {
  position: relative;
  font-size: 1.37rem;
  font-weight: 600;
  color: #00dcff;
  padding-left: 50px;
  margin: 0 0 1.25rem;
}

#bc-country-selector label::before,
#bc-country-selector .bc-country-name::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 35px;
  height: 35px;
  background-size: 35px 35px;
  background-repeat: no-repeat;
  /* White globe SVG blue dot */
  background-image: url("data:image/svg+xml,%3Csvg width='49' height='49' viewBox='0 0 49 49' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48.35 24.44C48.35 22.3 48.07 20.13 47.48 17.99C47.26 17.19 46.43 16.73 45.63 16.95C44.83 17.17 44.37 18 44.59 18.8C44.98 20.18 45.2 21.58 45.3 22.97H37C36.87 18.93 36.24 15.18 35.22 11.95C36.59 11.25 37.9 10.42 39.12 9.46001C39.18 9.52001 39.24 9.57001 39.3 9.63001C39.88 10.22 40.83 10.23 41.42 9.65001C42.01 9.07001 42.02 8.12001 41.44 7.53001C36.84 2.84001 30.7 0.380009 24.47 0.310009C24.37 0.310009 24.27 0.290009 24.17 0.290009C24.12 0.290009 24.06 0.300009 24 0.300009C19.92 0.330009 15.81 1.38001 12.08 3.53001C4.39 7.97001 0.06 16.05 0.01 24.35C0.01 24.39 0 24.43 0 24.47C0 24.51 0.01 24.55 0.01 24.59C0.02 28.66 1.06 32.79 3.24 36.56C4.55 38.84 6.21 40.83 8.12 42.53C8.19 42.6 8.25 42.66 8.33 42.71C11.07 45.09 14.31 46.86 17.92 47.83C20 48.39 22.12 48.66 24.22 48.66C28.41 48.66 32.54 47.56 36.27 45.41C43.88 41.02 48.34 32.97 48.35 24.52C48.35 24.5 48.35 24.49 48.35 24.47C48.35 24.46 48.35 24.45 48.35 24.44ZM36.78 7.45001C35.94 8.06001 35.07 8.62001 34.16 9.11001C33.43 7.41001 32.57 5.91001 31.61 4.65001C33.44 5.33001 35.18 6.26001 36.78 7.45001ZM25.68 3.57001C27.92 4.35001 29.94 6.82001 31.43 10.34C29.59 11.01 27.66 11.42 25.68 11.56V3.57001ZM25.68 14.56C28 14.42 30.28 13.95 32.44 13.16C33.31 16.05 33.87 19.4 33.99 22.96H25.68V14.56ZM33.99 25.97C33.87 29.54 33.31 32.88 32.44 35.77C30.28 34.98 28.01 34.52 25.68 34.37V25.96H33.99V25.97ZM14.37 25.97H22.68V34.38C20.36 34.52 18.08 34.99 15.92 35.78C15.05 32.88 14.49 29.53 14.37 25.97ZM14.37 22.97C14.49 19.4 15.05 16.06 15.92 13.17C18.08 13.96 20.36 14.42 22.68 14.57V22.98H14.37V22.97ZM22.68 3.57001V11.56C20.7 11.42 18.77 11.01 16.93 10.34C18.42 6.83001 20.43 4.35001 22.68 3.57001ZM13.59 6.13001C14.61 5.54001 15.67 5.05001 16.75 4.64001C15.79 5.90001 14.94 7.41001 14.2 9.11001C13.29 8.62001 12.42 8.07001 11.58 7.46001C12.22 6.98001 12.88 6.53001 13.59 6.13001ZM9.26 9.47001C10.48 10.42 11.78 11.25 13.14 11.94C12.12 15.18 11.49 18.92 11.36 22.96H3.06C3.43 17.94 5.59 13.12 9.26 9.47001ZM5.84 35.06C4.18 32.19 3.3 29.08 3.08 25.97H11.36C11.49 30.01 12.12 33.75 13.14 36.99C11.77 37.69 10.47 38.53 9.24 39.5C7.94 38.19 6.79 36.7 5.84 35.06ZM11.57 41.48C12.4 40.86 13.29 40.32 14.2 39.83C14.93 41.53 15.79 43.04 16.75 44.3C14.87 43.6 13.14 42.64 11.57 41.48ZM16.93 38.59C18.77 37.92 20.7 37.51 22.68 37.37V45.36C20.43 44.59 18.42 42.11 16.93 38.59ZM25.68 45.36V37.37C27.66 37.51 29.59 37.92 31.43 38.59C29.93 42.11 27.92 44.59 25.68 45.36ZM34.77 42.81C33.76 43.39 32.71 43.87 31.64 44.27C32.59 43.01 33.44 41.52 34.17 39.83C35.08 40.32 35.96 40.86 36.8 41.48C36.14 41.95 35.47 42.4 34.77 42.81ZM39.1 39.49C37.88 38.53 36.58 37.69 35.21 36.99C36.23 33.75 36.87 30.01 36.99 25.97H45.3C44.94 31.05 42.75 35.87 39.1 39.49Z' fill='%23FFFFFF'/%3E%3Cpath d='M45.76 12C46.38 13.08 46.01 14.45 44.94 15.07C44.91 15.09 44.88 15.11 44.84 15.12C43.78 15.67 42.47 15.29 41.86 14.24C41.24 13.16 41.61 11.79 42.68 11.17C43.77 10.56 45.14 10.93 45.76 12Z' fill='%2300DCFF'/%3E%3C/svg%3E%0A");
}

#bc-country-selector form .form-control {
  height: 48px;
}

#bc-country-selector .left-col {
  position: relative;
  margin-bottom: 40px;
  padding-bottom: 40px;
}

/* Blue line under the country selector, matching the H1 title line */
#bc-country-selector .left-col::after {
  position: absolute;
  display: block;
  left: 0;
  bottom: 0;
  content: "";
  background-color: #fff;
  width: 100%;
  height: 1px;
  border-radius: 4px;
}

/* Styles inside injected markup */
#bc-cs-known-country .bc-country-url.btn {
  margin: 1em 1.25rem 0 0;
}

#bc-cs-known-country .btn-link {
  color: #fff;
  padding: 0;
  margin: 1em 0 0;
  text-decoration: underline;
  font-size: 1em;
  font-weight: 600;
  min-width: unset;
  display: inline-block;
}

/* ********************************************** */
/* BC For You, promo fields */
/* ********************************************** */

#bc-for-you .bc-link-panel-text {
  background: transparent;
  text-align: left;
  min-height: unset;
  margin: 0;
}

#bc-for-you .bc-link-panel-text a {
  color: #fff;
  padding: 0;
  margin-bottom: 1.5em;
  text-decoration: underline;
}

#bc-for-you .bc-link-panel-text a h2 {
  font-size: 1em;
  font-weight: 600;
  margin: 0;
}

/* ********************************************** */
/* VOICES Section MOBILE */
/* ********************************************** */

#bc-visual-editorial {
  position: relative;
  margin-top: 30px;
}

#bc-visual-editorial .main-title {
  position: relative;
  color: #23085a;
  font-size: 1.75em;
  font-weight: 600;
  margin-bottom: 1.2222em;
  margin-top: 1em;
}

#bc-visual-editorial .main-title::before {
  position: absolute;
  left: 0;
  top: -25px;
  content: "";
  background-color: #00dcff;
  width: 45px;
  height: 4px;
  border-radius: 4px;
}

#bc-visual-editorial .media {
  margin-left: -10px;
  margin-right: -10px;
}

#bc-visual-editorial img {
  margin-bottom: 0;
}

#bc-visual-editorial .bc-panel {
  margin-left: -10px;
  margin-right: -10px;
}

#bc-visual-editorial a {
  text-decoration: none;
  display: block;
  color: #fff;
  border-bottom: 1px solid #fff;
  padding: 0 0 30px;
  margin: 0 0 30px;
}

#bc-visual-editorial .bc-supporting-story.last a {
  border: none;
  margin-bottom: 14px;
  padding: 0;
}

#bc-visual-editorial a:hover h2 {
  text-decoration: underline;
}

#bc-visual-editorial a h2 {
  font-weight: 300;
  font-size: 18px;
  margin-bottom: 20px;
}

#bc-visual-editorial span {
  color: #c8c8c8;
  font-size: 14px;
}

/* ********************************************** */
/* Partner with us Business tasks section */
/* ********************************************** */

#bc-business-tasks {
  padding-top: 40px;
}

#bc-business-tasks .bc-link-panel-text {
  margin-bottom: 5px;
}

#bc-business-tasks .last {
  margin-bottom: 30px;
}

.front .bc-promo-panel-header {
  border-bottom: 2px solid #fff;
  margin-top: 4em;
  padding-bottom: 4em;
  padding-right: 10px;
  padding-left: 10px;
  font-size: 0.9em;
}

.front .bc-promo-panel-header h2 {
  margin-bottom: 20px;
}

/* ********************************************** */
/* Featured stories, new type of promo */
/* ********************************************** */

.front .bc-promo-panel-image {
  position: relative;
}

/* Hiding the promo summary on home page only */
.front .bc-promo-panel-image .bc-link-panel-image-desc {
  display: none;
}

/* ********************************************** */
/* Small screens - min-width: 568px */
/* ********************************************** */

@media (min-width: 568px) {
  #bc-country-selector .view-country-sites {
    padding: 0;
  }
  /* Set min height so boxes look even height */
  .front
    .bc-featured
    .bc-promo-panel-image.sm-promo
    .bc-link-panel-image-title {
    min-height: 191px;
  }

  /* override view class, sui full-width-xs */
  /* Had to use !important unfortunately because it was used in SUI styles!! */
  #bc-country-selector #ctools-jump-menu {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ********************************************** */
/* Tablet and above - min-width: 850px */
/* ********************************************** */

@media (min-width: 850px) {

  .front .bc-navbar-nav-has-home-icon > li:first-child > a {
    font-size: 0;
  }

  /* ********************************************** */
  /* Main Hero */
  /* ********************************************** */

  #hero {
    position: relative;
    max-height: 810px;
  }

  #hero .bc-hero-content {
    z-index: 2;
    position: absolute;
    top: 18%;
    background-color: #fff;
    border-radius: 0 45px;
    padding: 40px 30px 60px;
    max-width: 430px;
  }

  #hero h1 {
    margin-top: 0;
    font-size: 42px;
  }

  #hero .bc-body-text {
    font-size: 16px;
    color: #54565a;
  }

  /* ********************************************** */
  /* Country Selector */
  /* ********************************************** */

  #bc-country-selector .bc-panel {
    border-radius: 50px 0;
    padding: 45px 40px 25px;
    margin: 0 -10px;
  }

  #bc-country-selector .left-col {
    height: 170px;
    padding: 0 40px 0 0;
    margin: 0 0 10px 0;
  }

  #bc-country-selector .left-col::after {
    left: auto;
    top: 0;
    right: 0;
    content: "";
    background-color: #fff;
    width: 4px;
    height: 100%;
    border-radius: 4px;
  }

  #bc-country-selector label {
    margin-bottom: 2.25rem;
  }

  /* ********************************************** */
  /* BC For You */
  /* ********************************************** */

  /* We can't use flex because we still support IE9 so old-school way to align thing */
  #bc-for-you {
    padding: 0 0 0 20px;
    display: table;
    height: 170px;
  }

  #bc-for-you .bc-link-panel-text {
    height: 50px;
    display: table-row;
    vertical-align: middle;
  }

  #bc-for-you .bc-link-panel-text > a {
    display: table-cell;
    vertical-align: middle;
  }

  /* ********************************************** */
  /* Lead Promo TABLET */
  /* ********************************************** */

  .front .bc-promo-panel-image.overlay a:hover h2,
  .front .bc-promo-panel-image.overlay a:focus h2 {
    text-decoration: underline;
  }

  .front .bc-festival .bc-link-panel-image {
    padding-bottom: 90px;
  }

  .front .bc-promo-panel-image.overlay .bc-link-panel-image-title {
    color: #23085a;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #fff;
    font-weight: 300;
    border-radius: 50px 0 0 0;
    padding: 40px 50px 30px;
    max-width: 55%;
  }

  /* If Full Width single column large promo */
  .front .bc-featured .bc-promo-panel-image.overlay .bc-link-panel-image-title {
    font-size: 22px;
  }

  /* ********************************************** */
  /* VOICES, Visual Editorial Section TABLET */
  /* ********************************************** */

  #bc-visual-editorial .container {
    position: relative;
  }

  #bc-visual-editorial .bc-panel {
    margin: 0;
    padding: 0 20px;
    background: none;
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    z-index: 1;
  }

  #bc-visual-editorial a h2 {
    height: 50px;
    overflow: hidden;
    margin-bottom: 16px;
  }

  #bc-visual-editorial .bc-panel .bc-supporting-story a {
    color: #23085a;
    background-color: #ffffff;
    border-radius: 20px 0;
    padding: 25px 35px;
    overflow: hidden;
    height: 140px;
    border: 1px solid rgb(0 0 0 / 5%);
  }

  #bc-visual-editorial span {
    color: #7b7b7b;
  }

  /* ********************************************** */
  /* Three Promo Boxes TABLET */
  /* ********************************************** */

  .front
    .bc-featured
    .bc-promo-panel-image.sm-promo
    .bc-link-panel-image-title {
    min-height: 191px;
  }

  .front
    .bc-featured
    .bc-promo-panel-image.lg-promo
    .bc-link-panel-image-title {
    font-size: 22px;
    min-height: 401px;
  }

  .front .bc-festival .bc-promo-panel-image .bc-link-panel-image-title {
    min-height: 235px;
  }

  /* ********************************************** */
  /* Core business tasks TABLET */
  /* ********************************************** */

  #bc-business-tasks .first {
    padding-right: 2.5px;
  }

  #bc-business-tasks .last {
    padding-left: 2.5px;
  }

  #bc-business-tasks .bc-link-panel-text {
    text-align: center;
    min-height: 227px;
  }

  #bc-business-tasks .bc-link-panel-text .bc-svg-circle {
    display: inline-block;
  }

  .front .bc-promo-panel-header {
    margin: 4em 40px 3em;
    padding-bottom: 0;
    border: none;
  }

  .front .bc-promo-panel-header h2 {
    font-size: 1.66em;
  }
}

/* ********************************************** */
/* Larger screens - min-width: 1018px */
/* ********************************************** */

@media (min-width: 1018px) {
  #hero .bc-hero-content {
    top: 20%;
  }
}

/* ********************************************** */
/* Larger screens - min-width: 1102px */
/* ********************************************** */

@media (min-width: 1102px) {
  #hero .bc-hero-content {
    top: 24%;
  }

  #bc-country-selector .bc-panel {
    margin: 0 -30px;
  }

  #bc-visual-editorial .media {
    margin-left: -30px;
    margin-right: -30px;
  }

  #bc-visual-editorial .bc-panel {
    padding: 0;
  }

  .front .bc-featured .bc-promo-panel-image.overlay .bc-link-panel-image-title {
    font-size: 30px;
  }

  /* Three Promo Boxes height adjustments based on 4 lines max */
  .front
    .bc-featured
    .bc-promo-panel-image.sm-promo
    .bc-link-panel-image-title {
    min-height: 156px;
  }

  .front
    .bc-featured
    .bc-promo-panel-image.lg-promo
    .bc-link-panel-image-title {
    min-height: 331px;
    font-size: 30px;
  }

  .front .bc-festival .bc-promo-panel-image .bc-link-panel-image-title {
    min-height: 184px;
  }
}

/* ********************************************** */
/* Larger screens - min-width: 1280px */
/* ********************************************** */

@media (min-width: 1280px) {
  #hero .bc-hero-content {
    top: 26%;
  }
  /* Three Promo Boxes height adjustments based on 4 lines max */
  .front
    .bc-featured
    .bc-promo-panel-image.sm-promo
    .bc-link-panel-image-title {
    min-height: 145px;
  }

  .front
    .bc-featured
    .bc-promo-panel-image.lg-promo
    .bc-link-panel-image-title {
    min-height: 309px;
  }

  .front .bc-festival .bc-promo-panel-image .bc-link-panel-image-title {
    min-height: 159px;
  }
}

/* ********************************************** */
/* Larger screens - min-width: 1440px */
/* ********************************************** */

@media (min-width: 1440px) {
  #hero .bc-hero-content {
    top: 30%;
    max-width: 450px;
  }

  #hero .bc-item div.oembed,
  #hero .bc-item img {
    max-width: 1440px;
    max-height: 810px;
  }

  #hero .bc-item:before {
    max-width: 1440px;
  }
}