:root {
  --dark-slate-grey: #004563;
  --deep-sky-blue-2: #4dacf6;
  --deep-sky-blue: #4dacf6;
  --white: white;
  --black: black;
}

.hero-section {
  height: 45vh;
  min-height: 600px;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  background-image: url('https://fm.cnbc.com/applications/cnbc.com/resources/styles/skin/tv/europe/beyond-the-valley/2023/images/page_header_02.png');
  background-position: 50% 0;
  background-size: auto;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.strapline-container {
  height: 50px;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  background-image: linear-gradient(to right, var(--dark-slate-grey), var(--deep-sky-blue-2) 51%, var(--deep-sky-blue));
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.strapline-text-container {
  height: 50px;
}

.strapline-text {
  color: var(--white);
  text-transform: uppercase;
  font-family: proxima-nova, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 50px;
}

.body, .bold-text {
  font-size: 28px;
}

.main-section {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  background-color: var(--black);
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 64px;
  padding-top: 60px;
  display: grid;
}

.main-content-heading {
  border-bottom: 1px solid var(--deep-sky-blue);
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 32px;
  padding-bottom: 8px;
  font-family: proxima-nova, sans-serif;
  font-weight: 900;
}

.bodypara {
  color: var(--white);
  margin-bottom: 32px;
  font-family: proxima-nova, sans-serif;
  font-size: 18px;
  line-height: 31px;
}

.bodypara.bold {
  font-weight: 700;
}

.heading {
  color: var(--deep-sky-blue);
  margin-bottom: 32px;
  font-family: proxima-nova, sans-serif;
  font-size: 36px;
}

.store-links {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.image {
  height: 50px;
}

.sponsorlogo.badge-c {
  width: 81px;
  height: 33px;
}

.bodypara-last {
  color: var(--white);
  margin-bottom: 48px;
  font-family: proxima-nova, sans-serif;
  font-size: 18px;
  line-height: 31px;
}

.bodypara-last.bold {
  font-weight: 700;
}

.field-label {
  color: var(--white);
  font-family: proxima-nova, sans-serif;
}

.submit-btn {
  background-color: var(--deep-sky-blue);
  letter-spacing: .03em;
  border-radius: 5px;
  font-family: proxima-nova, sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.form-field {
  width: 30%;
  float: left;
  border-radius: 5px;
  margin-right: 16px;
}

.form-field-last {
  width: 30%;
  clear: right;
  border-radius: 5px;
}

.disclaimer-text {
  color: var(--white);
  margin-bottom: 16px;
  font-family: proxima-nova, sans-serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: 31px;
}

.link {
  color: var(--deep-sky-blue-2);
}

.bodylink {
  color: var(--deep-sky-blue);
  text-decoration: none;
}

.image-4 {
  width: 100%;
  margin-bottom: 16px;
}

.button {
  border-radius: 10px;
  font-family: proxima-nova, sans-serif;
  font-size: 22px;
}

.btv-profile {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: .5fr 1.5fr;
  grid-auto-columns: 1fr;
  margin-bottom: 22px;
  display: grid;
}

.profile-name {
  color: #fff;
  margin-bottom: 8px;
  font-family: proxima-nova, sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.profile-title {
  color: #fff;
  font-family: proxima-nova, sans-serif;
  font-size: 18px;
}

.white {
  color: #fff;
  text-decoration: none;
}

.white:hover, .white.link {
  color: #3898ec;
}

.html-embed {
  margin-bottom: 32px;
}

@media screen and (max-width: 991px) {
  .hero-section {
    height: 50vh;
    min-height: 400px;
    background-position: 50% 10%;
    grid-template-columns: 1fr;
    padding-left: 32px;
    padding-right: 32px;
  }

  .strapline-container {
    grid-template-columns: 1fr;
    margin-bottom: -2px;
    margin-left: -32px;
    margin-right: -32px;
    padding-left: 32px;
    padding-right: 32px;
  }

  .main-section {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media screen and (max-width: 767px) {
  .hero-section {
    height: 400px;
    background-position: 50% 20%;
  }

  .bold-text {
    font-size: 24px;
  }

  .main-section {
    grid-template-columns: 1fr;
  }

  .image-2 {
    width: 75%;
  }
}

@media screen and (max-width: 479px) {
  .hero-section {
    height: 300px;
    min-height: 300px;
    background-position: 50% 22%;
    padding-top: 32px;
  }

  .logo-container {
    width: 100%;
  }

  .strapline-container {
    display: none;
  }

  .bold-text {
    display: block;
  }

  .main-section {
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .main-left-col, .main-right-col {
    padding-left: 0;
    padding-right: 0;
  }

  .player-container {
    max-width: 100%;
  }

  .heading {
    font-size: 24px;
  }

  .store-links {
    grid-template-columns: 1fr;
  }

  .store-link {
    width: 75%;
    margin-bottom: 8px;
  }

  .image {
    height: 70px;
  }

  .image-2 {
    width: 100%;
  }

  .image-3 {
    display: block;
  }

  .form-field {
    width: 100%;
    float: none;
  }

  .form-field-last {
    width: 100%;
    clear: none;
  }
}

#w-node-_8cf45e03-7e10-04da-d32d-5806af65aab0-9520eeba {
  grid-area: 1 / 3 / 2 / 6;
  align-self: center;
}

#w-node-c9c4fc5b-aced-0662-4728-6ad9e27895c7-9520eeba {
  grid-area: 3 / 1 / 4 / 10;
  align-self: end;
}

#w-node-d918f9d2-2a23-17e0-3a88-34867441330d-9520eeba {
  grid-area: 1 / 3 / 2 / 8;
  align-self: center;
}

#w-node-_75566960-2688-1a8b-505c-a8c89451da49-9520eeba {
  grid-area: 3 / 3 / 4 / 4;
  align-self: start;
}

#w-node-_0e393b9c-279a-5f79-c0aa-7d6eb404a6bf-9520eeba {
  grid-area: 1 / 3 / 2 / 6;
}

#w-node-ae35bd01-38c1-7ab7-1528-6d1a7167fa5d-9520eeba, #w-node-c831c325-63e6-672e-6488-7963dd15cf6e-9520eeba {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_01a0303a-12c6-a62e-089d-237bc9e6bc9e-9520eeba {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_7e0ac8f0-4cba-4ff1-79d2-d3b601633fe2-9520eeba, #w-node-_7e0ac8f0-4cba-4ff1-79d2-d3b601633fe3-9520eeba {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_37abab67-2237-032c-d269-621b83ba7e75-9520eeba {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-e5866c1d-5812-323c-5481-fc21ce7659be-9520eeba {
  grid-area: 2 / 3 / 3 / 6;
}

#w-node-_4c2379a6-7aae-1311-4f9c-5164cec8ad8f-9520eeba {
  grid-area: 1 / 6 / 2 / 8;
}

@media screen and (max-width: 991px) {
  #w-node-_8cf45e03-7e10-04da-d32d-5806af65aab0-9520eeba {
    grid-column: 1 / 2;
  }

  #w-node-c9c4fc5b-aced-0662-4728-6ad9e27895c7-9520eeba {
    grid-column-end: 2;
  }

  #w-node-d918f9d2-2a23-17e0-3a88-34867441330d-9520eeba {
    grid-area: 1 / 1 / 2 / 2;
    align-self: center;
  }

  #w-node-_75566960-2688-1a8b-505c-a8c89451da49-9520eeba {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-_0e393b9c-279a-5f79-c0aa-7d6eb404a6bf-9520eeba, #w-node-e5866c1d-5812-323c-5481-fc21ce7659be-9520eeba {
    grid-column: 2 / 5;
  }

  #w-node-_4c2379a6-7aae-1311-4f9c-5164cec8ad8f-9520eeba {
    grid-area: 3 / 2 / 4 / 5;
  }
}

@media screen and (max-width: 767px) {
  #w-node-_0e393b9c-279a-5f79-c0aa-7d6eb404a6bf-9520eeba, #w-node-e5866c1d-5812-323c-5481-fc21ce7659be-9520eeba, #w-node-_4c2379a6-7aae-1311-4f9c-5164cec8ad8f-9520eeba {
    grid-column: 1 / 2;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_0e393b9c-279a-5f79-c0aa-7d6eb404a6bf-9520eeba {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-e5866c1d-5812-323c-5481-fc21ce7659be-9520eeba, #w-node-e5866c1d-5812-323c-5481-fc21ce7659ce-9520eeba {
    grid-area: 2 / 1 / 3 / 2;
  }

  #w-node-e5866c1d-5812-323c-5481-fc21ce7659d0-9520eeba {
    grid-area: 3 / 1 / 4 / 2;
  }

  #w-node-_4c2379a6-7aae-1311-4f9c-5164cec8ad8f-9520eeba {
    grid-row: 3 / 4;
  }
}


