/* Universal Reset
--------------------------------------------------------------------------------------------------------------------*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
.root {
  font-size: 62.5%;
}

body.webstorm-level,
body.webstorm-level .content {
  padding: 0;
}

/* Variables
--------------------------------------------------------------------------------------------------------------------*/

:root {
  --color--white: #fff;
  --color--black: #000;

  --color-primary: #c800fa !important;
  --color-secondary: #0e091f !important;

  --color--silver: #bdc3c7;
  --color--silver-40: #444647;

  --color--pink: #fda3fd;
  --color--purple: #5f0b9c;
  --color--magenta: #b900e9;
  --color--blue: #005dab;

  --radial-gradient: radial-gradient(at 110% -10%, #cd74f2, #472cba);

  --container--max-width: 120rem;
  --container--full: 100%;

  --container--padding--lg: 12rem 2.4rem;
  --container--padding--md: 9.6rem 2.4rem;

  --column-gap--standard: 4rem;

  --box-shadow-standard: 0px 4px 10px 2px rgba(0, 0, 0, 0.1);

  --box-shadow-hover: 0px 0px 8px 0px rgba(0, 0, 0, 0.12),
    0px 8px 8px 0px rgba(0, 0, 0, 0.24);

  --font-stack--header: "Lato", "Open Sans", arial, sans-serif;
  --font-stack--body: "Lato", "Open Sans", arial, sans-serif;
  --font-icons: "FontAwesome5_Regular", Font Awesome\5 Pro, FontAwesome;
}

/* Buttons
--------------------------------------------------------------------------------------------------------------------*/

.webstorm-level {
  .button--primary,
  a.button--primary,
  .f-visual-redactor a.button--primary {
    box-shadow: none;
  }
}

/* Navigation
--------------------------------------------------------------------------------------------------------------------*/
.nav-mobile .nav-logo-link {
  &::before {
    content: "";
    width: 14rem;
    height: 4.8rem;
    background-image: url(https://d3ptzawce82bow.cloudfront.net/uploads/eu/OD2753/2715A13F.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    display: inline-block;
  }

  img {
    display: none;
  }
}

body .fractal-dynamic-nav-v1 .nav-mobile .nav-mobile-bar {
  a.nav-logo-link:hover {
    transform: scale(1);
  }
}

/* Grids
--------------------------------------------------------------------------------------------------------------------*/

.grid--two-column {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  column-gap: 12rem;
  row-gap: 6.4rem;

  @media only screen and (max-width: 31.25em) {
    grid-template-columns: 1fr;
  }
}

.grid--introduction {
  table {
    display: flex;
    > tbody {
      display: flex;
      flex-direction: column;
      text-align: left;
      > tr {
        display: flex;
        flex: 1;

        > td {
          display: block;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 16px;
          }

          .button {
            margin-top: 4rem;
          }
        }
      }
    }
  }

  .two-column__text {
    > tbody > tr {
      @media only screen and (max-width: 62.5em) {
        text-align: center;
        justify-content: center;
      }

      &:first-child > td {
        font-size: 3.98rem;
        line-height: 4.8rem;
        margin-bottom: 4rem;
        font-weight: 700;
        display: flex;
        flex-direction: column;
        color: var(--color--black);

        @media only screen and (max-width: 62.5em) {
          align-items: center;
        }

        &::before {
          content: "";
          height: 8px;
          width: 6.4rem;
          background-color: var(--color-primary);
          display: inline-block;
          margin-bottom: 1.6rem;
        }
      }
    }
  }
}

.section--intro {
  display: flex;
  justify-content: center;

  table {
    flex: 0 1 calc(100% / 12 * 7);
    text-align: center;

    @media only screen and (max-width: 48em) {
      flex: 0 0 100%;
    }

    > tbody > tr > td {
      font-size: 1.6rem;
      line-height: 2.56rem;
      color: var(--color--silver);
    }
  }
}

.grid--four-column {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 3.2rem;
  width: 100%;
}

.grid--requirements {
  margin-top: 4rem;
  table {
    display: flex;
    background-color: var(--color--white);
    box-shadow: var(--box-shadow-standard);
    padding: 1rem;
    position: relative;

    &::before {
      content: "";
      width: 7rem;
      height: 2rem;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
    }

    &:nth-child(1)::before {
      background-color: var(--color--pink);
    }

    &:nth-child(2)::before {
      background-color: var(--color--purple);
    }
    &:nth-child(3)::before {
      background-color: var(--color--magenta);
    }
    &:nth-child(4)::before {
      background-color: var(--color--blue);
    }

    > tbody {
      > tr:nth-child(1) td img {
        width: 100%;
        margin-bottom: 2.4rem;
      }
      > tr:nth-child(2) {
        > td {
          font-size: 2.3rem;
          line-height: 2.8rem;
          font-weight: 700;
          padding: 0 1.4rem;
          color: var(--color--black);
        }
      }
      > tr:nth-child(3) {
        > td {
          font-size: 1.6rem;
          line-height: 2.56rem;
          color: var(--color--silver-40);
          padding: 1.6rem 1.4rem;
        }
      }
    }
  }
}

.grid--location {
  max-width: 96rem;
  margin: 0 auto;
  color: var(--color--white);

  @media only screen and (max-width: 62.5em) {
    text-align: center;
  }

  > table:nth-child(1) {
    display: flex;
    align-items: center;

    * {
      display: block;
    }

    > tbody {
      > tr:nth-child(1) {
        > td {
          font-size: 2.3rem;
          line-height: 2.8rem;
          font-weight: 700;
          display: flex;
          flex-direction: column;

          @media only screen and (max-width: 62.5em) {
            align-items: center;
          }

          &::before {
            content: "";
            height: 8px;
            width: 6.4rem;
            background-color: var(--color-primary);
            display: inline-block;
            margin-bottom: 1.6rem;
          }
        }
      }
      > tr:nth-child(2) {
        > td {
          font-size: 3.98rem;
          line-height: 4.8rem;
          font-weight: 700;
        }
      }
      > tr:nth-child(3) {
        > td {
          font-size: 1.6rem;
          line-height: 2.56rem;
          padding-top: 2.4rem;
        }
      }
    }
  }

  > table:nth-child(2) {
    display: block;
    padding: 1.6rem;
    border-radius: 16px;
    background-color: var(--color--white);
    box-shadow: var(--box-shadow-standard);

    * {
      display: block;
    }

    > tbody > tr > td iframe {
      width: 100%;
      height: 32rem;
    }
  }
}

.grid--partnership {
  > table {
    > tbody {
      > tr:nth-child(1) {
        > td {
          text-align: center;

          img {
            width: 24rem;
            height: 24rem;
            object-fit: cover;
            margin-bottom: 4rem;
            border-radius: 16px;
          }
        }
      }
      > tr:nth-child(2) {
        > td {
          font-size: 2.76rem;
          line-height: 3.3rem;
          padding-bottom: 1.6rem;
          font-weight: 700;
          text-align: center;
          color: var(--color--black);
        }
      }
      > tr:nth-child(3) {
        > td {
          font-size: 1.6rem;
          line-height: 2.56rem;
        }
      }
    }
  }
}

body.webstorm-level .all_container #bi-page-s {
  /* Hero
--------------------------------------------------------------------------------------------------------------------*/

  #container_homepage_header .f-homepage-hero .f-homepage-hero-overlay {
    @media only screen and (max-width: 50em) {
      opacity: 0.5 !important;
    }
  }

  #container_homepage_header.wide {
    max-width: 100%;
  }

  .f-homepage-hero {
    .f-homepage-hero-clickarea {
      width: 100%;
      max-width: 100%;
      padding: 0 2.4rem;
    }

    .side {
      padding-bottom: 12rem !important;

      .action-buttons {
        padding: 0;
        display: flex;
        max-width: var(--container--max-width);
        margin: 0 auto;

        @media only screen and (max-width: 40em) {
          justify-content: center;
        }

        button {
          margin-left: 0;
        }
      }
    }

    .f-homepage-hero-name {
      padding-top: 16rem !important;
      text-align: left;
      max-width: var(--container--max-width);
      width: 100%;

      @media only screen and (max-width: 40em) {
        display: flex;
        justify-content: center;
        text-align: center;
        min-width: 0;
      }

      h1 {
        max-width: 50rem;
        margin: 0 0 2.4rem;
      }

      .fractal-htmlpreview div {
        font-size: 6.87rem;
        line-height: 7.9rem;
        padding: 0;
        font-family: var(--font-stack--header) !important;
        letter-spacing: 1px;

        &::before {
          content: "BT Sourced AI Innovation";
          display: block;
          color: var(--color-primary);
          font-size: 1.33rem;
          line-height: 2.56rem;
          text-transform: uppercase;
          font-weight: 400;
          letter-spacing: 5px;
          margin-bottom: 1.6rem;
        }
      }
    }

    .f-homepage-hero-description {
      text-align: left;
      margin: 0 auto;
      max-width: var(--container--max-width);
      width: 100%;

      @media only screen and (max-width: 40em) {
        display: flex;
        justify-content: center;
        min-width: 0;
      }

      .fractal-htmlpreview div {
        width: 100%;
        margin-bottom: 4rem;
        color: var(--color--silver);
        font-size: 2.3rem;
        font-weight: 300;
        line-height: 3.6rem;
        font-family: var(--font-stack--body) !important;
        letter-spacing: 0.5px;
      }

      > div {
        max-width: 50rem;

        @media only screen and (max-width: 40em) {
          text-align: center;
          min-width: 0;
        }
      }
    }
  }

  #main_content {
    max-width: 100%;

    .widget_container {
      .widget_title {
        margin-bottom: 4rem;

        .widget_title_text {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;

          font-family: var(--font-stack--header);
          font-size: 3.98rem;
          line-height: 5.25rem;
          font-weight: 700;
        }
      }
    }

    /* Container 1
--------------------------------------------------------------------------------------------------------------------*/

    #container_1 {
      padding: var(--container--padding--lg);
      background-color: var(--color--white);

      .widget_container:not(.phase_widget_widget) {
        max-width: var(--container--max-width);
        text-align: center;

        .rich_text_widget p,
        .rich_text_widget p span,
        .rich_text_widget span {
          font-size: 1.6rem;
          line-height: 2.56rem;
        }
      }
    }

    /* Container 2
--------------------------------------------------------------------------------------------------------------------*/

    #container_2 {
      padding: var(--container--padding--md) !important;
      background: var(--radial-gradient);

      .widget_container {
        width: 100%;
        max-width: var(--container--max-width);

        .widget_title_text {
          color: #fff;

          &::before {
            content: "";
            height: 8px;
            width: 6.4rem;
            background-color: var(--color-primary);
            display: inline-block;
            margin-bottom: 1.6rem;
          }
        }
      }
    }

    /* Container 3
--------------------------------------------------------------------------------------------------------------------*/
    #container_3 {
      background-image: url(https://d3ptzawce82bow.cloudfront.net/uploads/eu/OD2753/F28A96C2.png);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      padding: var(--container--padding--lg) !important;

      .widget_container .boxcontent .rich_text_widget {
        display: flex;

        > table:nth-of-type(1)::before {
          display: none;
        }
      }

      .widget_container {
        .widget_title_text {
          &::before {
            content: "";
            height: 8px;
            width: 6.4rem;
            background-color: var(--color-primary);
            display: inline-block;
            margin-bottom: 1.6rem;
          }
        }
      }
    }

    /* Container 4
--------------------------------------------------------------------------------------------------------------------*/

    #container_4 {
      background-image: none;
      padding: 0;

      @media only screen and (max-width: 37.5em) {
        flex-direction: unset;
      }

      .title_back .widget_title .widget_title_text {
        color: unset;
      }

      .widget_container {
        width: 100%;
        max-width: 100%;
        color: unset;
        box-shadow: none !important;

        flex: 0 0 100%;

        &:first-of-type {
          margin: 0;
          border-radius: 0;
        }

        &:not(:first-of-type) {
          padding: 12rem 2.4rem;
          box-sizing: border-box;

          .widget_title_text {
            &::before {
              content: "";
              height: 8px;
              width: 6.4rem;
              background-color: var(--color-primary);
              display: inline-block;
              margin-bottom: 1.6rem;
            }
          }
        }

        .boxcontent {
          padding: 0;
        }
      }
    }

    /* Container 4: Message
--------------------------------------------------------------------------------------------------------------------*/
    .message {
      background: var(--radial-gradient);
      color: var(--color--white);
      justify-content: center;
      align-items: center;

      .message__block {
        max-width: var(--container--max-width);
        padding: 9.6rem 2.4rem;

        display: grid;
        grid-template-columns: 1fr 2fr;
        column-gap: 12rem;
        align-items: center;

        @media only screen and (max-width: 48em) {
          grid-template-columns: 1fr;
          text-align: center;
        }

        .message__sponsor {
          @media only screen and (max-width: 48em) {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 2.4rem;
          }

          .message__title {
            font-size: 2.3rem;
            line-height: 2.8rem;
            font-weight: 400;
            margin-bottom: 8px;

            display: flex;
            align-items: center;

            &::before {
              content: "";
              display: inline-block;
              width: 8px;
              height: 24px;
              background-color: var(--color-primary);
              margin-right: 1.6rem;

              @media only screen and (max-width: 48em) {
                display: none;
              }
            }
          }

          .message__profile {
            display: flex;
            align-items: center;

            @media only screen and (max-width: 48em) {
              flex-direction: column;
            }
          }

          .message__portrait {
            img {
              width: 7.2rem;
              margin-right: 2.4rem;
              border-radius: 50%;
              border: 8px solid rgba(255, 255, 255, 0.3);

              @media only screen and (max-width: 48em) {
                margin: 1.6rem 0;
              }
            }
          }

          .message__name {
            font-size: 3.98rem;
            line-height: 4.8rem;
            font-weight: 700;
          }

          .message__position {
            font-size: 1.6rem;
            line-height: 2.56rem;
          }
        }

        .message__text {
          font-size: 1.6rem;
          line-height: 2.56rem;
        }
      }
    }

    /* Container 4: Why Join
--------------------------------------------------------------------------------------------------------------------*/

    .grid--why-join {
      column-gap: 3.2rem;
      row-gap: 3.2rem;
      max-width: var(--container--max-width);
      margin: 0 auto;
      justify-content: center;

      table {
        display: flex;
        padding: 4rem;
        box-shadow: var(--box-shadow-standard);
        border-radius: 0 8px 8px 0;
        position: relative;

        &::before {
          content: "";
          width: 8px;
          height: 100%;
          display: inline-block;
          position: absolute;
          left: 0;
          top: 0;
        }

        &:nth-child(1)::before {
          background-color: var(--color--pink);
        }
        &:nth-child(2)::before {
          background-color: var(--color--purple);
        }
        &:nth-child(3)::before {
          background-color: var(--color--magenta);
        }
        &:nth-child(4)::before {
          background-color: var(--color--blue);
        }

        > tbody {
          > tr:nth-child(1) {
            td {
              text-align: center;
              font-size: 2.4rem;
              line-height: 1;
              font-weight: 600;
              padding-bottom: 2.4rem;
              color: var(--color--black);
            }
          }
          > tr:nth-child(2) {
            td {
              font-size: 1.6rem;
              line-height: 2.56rem;
            }
          }
        }
      }
    }

    /* Container 5
--------------------------------------------------------------------------------------------------------------------*/

    #container_5 {
      background: var(--radial-gradient);
      box-sizing: border-box;
      padding: var(--container--padding--lg) !important;

      .widget_container {
        flex: 0 0 100%;
        width: 100%;
      }

      .widget_container:nth-child(1),
      .widget_container:nth-child(2) {
        max-width: unset;
        margin: 0;
      }
    }

    /* Container 6
--------------------------------------------------------------------------------------------------------------------*/

    #container_6 {
      background-color: var(--color--white) !important;
      box-sizing: border-box;
      background-image: url(https://d3ptzawce82bow.cloudfront.net/uploads/eu/OD2753/D29CCC78.png);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      padding: var(--container--padding--lg) !important;

      .widget_container {
        .widget_title {
          .widget_title_text {
            color: unset;
            &::before {
              content: "";
              height: 8px;
              width: 6.4rem;
              background-color: var(--color-primary);
              display: inline-block;
              margin-bottom: 1.6rem;
            }
          }
        }
      }

      .widget_container:nth-child(1) {
        padding: 0;
        background-image: none;

        .boxcontent .rich_text_widget {
          display: block;
        }
      }
    }

    .widget_container.phase_widget_widget {
      position: relative;
      top: unset;

      #phases {
        #prev-phase {
          display: none !important;
        }

        #phase-list {
          width: 100% !important;
          background: none;
          padding: 2.4rem 0 0;

          @media only screen and (max-width: 48em) {
            flex-direction: column;
            padding: 0;
            gap: 2.4rem;
          }

          .phase-wrapper:not(:last-of-type) {
            border: none;

            &::before {
              content: "";
              width: 94%;
              position: absolute;
              top: -1.7rem;
              left: 53%;
              display: block !important;
              height: 1px;
              background-color: #fff;

              @media only screen and (max-width: 48em) {
                display: none !important;
              }
            }
          }
        }

        .phase-wrapper.current-phase {
          .phase-content {
            color: var(--color--white);

            &::after {
              display: none;
            }
          }

          .phase-name::before {
            background-color: transparent;
            border-color: var(--color--white);
          }
        }
      }

      .phase-content {
        @media only screen and (max-width: 48em) {
          border: 1px solid var(--color--white);
          border-radius: 8px;
          padding: 1.6rem;

          &::before {
            content: "";
            height: 2.4rem;
            width: 1px;
            background-color: var(--color--white);
            position: absolute;
            bottom: -50%;
            left: 50%;
            transform: translate(-50%, -62.5%);
            display: inline-block;
          }
        }

        .phase-name {
          font-size: 1.8rem;
          font-weight: 700;
          letter-spacing: 0.5px;

          &::before {
            content: "";
            width: 12px;
            height: 12px;
            border: 1px solid var(--color--white);
            border-radius: 50%;
            display: inline-block;
            position: absolute;
            top: -2.4rem;
            left: 50%;
            transform: translateX(-50%);

            @media only screen and (max-width: 48em) {
              display: none !important;
            }
          }
        }
        .phase-start {
          width: 5rem;
          margin: 0 auto;
          overflow: hidden;
          -webkit-line-clamp: 1;
          white-space: nowrap;
        }
      }
    }
  }
}

.webstorm-level .section--hero--submission-form.visible,
.webstorm-level .section__hero--faq,
.webstorm-level .section__hero--browse-ideas.visible {
  background-image: var(--radial-gradient);
}

.webstorm-level #bi-page-a #container_1 .widget_container .boxcontent {
  padding: 0;
}

/* FAQ
--------------------------------------------------------------------------------------------------------------------*/

body.webstorm-level .question-container {
  .arrow {
    transition: 0.2s ease;
    float: right;

    &.rotate {
      transform: rotate(180deg);
    }

    &::before {
      content: "\f107";
      font-family: var(--font-icons);
      color: var(--color-primary);
      font-size: 1.4rem;
    }
  }

  h5 {
    font-weight: 600;
  }

  p {
    font-size: 1.4rem;
    line-height: 2.24rem;
  }
}

/* Browse
--------------------------------------------------------------------------------------------------------------------*/

body.webstorm-level .ideaboard-filter-bar .fractal-button {
  margin: 0;
}

/* Drafts
--------------------------------------------------------------------------------------------------------------------*/

body.webstorm-level #body_div .all_container #bi-page-b.content {
  #container_1 {
    background-color: #f5f5f6 !important;
    align-items: flex-start !important;
    padding: 7.2rem 4rem !important;

    min-height: calc(100vh - 6.4rem) !important;

    .my_idea_drafts_widget {
      padding: 4rem;
      border-radius: 12px;
      background-color: var(--color--white);
      box-shadow: var(--box-shadow-standard);
      margin: 0 !important;
      max-width: 80rem;

      .widget_title_text {
        font-size: 2.4rem;
        line-height: 3.2rem;
        font-weight: 700;
      }

      #my_idea_drafts_container {
        font-size: 1.6rem;
        line-height: 2.56rem;

        & > p {
          > a:first-child {
            margin-right: 8px;
          }

          &:not(:first-child) {
            margin-top: 8px;
          }
        }
      }
    }
  }
  #container_2,
  #container_3 {
    display: none !important;
  }
}

/* Footer
--------------------------------------------------------------------------------------------------------------------*/
body.webstorm-level #customFooter {
  display: none;
}

#custom_footer {
  display: block;

  > tbody {
    display: block;

    > tr {
      display: block;

      > td {
        display: block;
      }
    }
  }
}

.footer--BTSourced {
  background: var(--radial-gradient);
  padding: 2.4rem 0;

  .footer__container {
    max-width: var(--container--max-width);
    margin: 0 auto;
    padding: 0 2.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    @media only screen and (max-width: 30em) {
      flex-direction: column;
      gap: 1.6rem;
    }

    .footer__logo img {
      max-height: 4.8rem;
    }

    .footer__links {
      ul {
        display: flex;

        li {
          &:not(:last-child) {
            margin-right: 1.6rem;
            padding-right: 1.6rem;
            border-right: 1px solid var(--color--white);
          }

          > a {
            color: var(--color--white);
            font-size: 1.6rem;
            line-height: 2.56rem;
            font-weight: 400;
          }
        }
      }
    }
  }
}

/* Login Modal
--------------------------------------------------------------------------------------------------------------------*/

.loginbox > #public_login_tabs > ul > li:not(:first-child) {
  margin-left: 1.6rem;
}

#logincontent #form3 > div:not(.left-justify, .login) {
  padding: 0 !important;
  display: flex;

  p > label {
    float: none;
    display: flex;
    align-items: center;

    input {
      float: none;
      min-width: 0;
      margin-right: 4px;
      height: auto;
    }
  }
}

#lb_tab_register > div {
  &:first-of-type {
    margin-bottom: 16px !important;
  }

  > .input_button {
    line-height: 32px;
    padding: 0 24px !important;
    font-size: 1.4rem !important;
    border-radius: 4px;
    border: none;
    background-color: var(--color-primary);
    margin-top: 8px;
  }
}

/* Login Page
--------------------------------------------------------------------------------------------------------------------*/

#bi-page-ct-login {
  background: var(--radial-gradient);

  .private_login_widget {
    position: relative;

    &::before {
      content: 'Sourced Showdown';
      font-size: 3.9rem;
      line-height: 4.8rem;
      font-weight: 700;
      font-family: var(--font-stack--body);
      color: var(--color--white);
      display: block;
      text-align: center;
      width: 100%;

      position: absolute;
      top: -6.4rem;
      left: 50%;
      transform: translateX(-50%);
    }

    &::after {
      content: '';
      background-image: url(https://d3ptzawce82bow.cloudfront.net/uploads/eu/OD2753/2715A13F.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: 100%;
      height: 4.8rem;
      position: absolute;
      bottom: -8rem;
      display: block;
      left: 50%;
      transform: translateX(-50%);
    }

  }

  #custom_footer {
    display: none;
  }
}