<section class="section section--spacing-below">
  <div class="page-header bg--img bg--blend bg--parallax" style="background-image: url(&quot;/sites/default/files/page-header/istock-941769050.jpg&quot;), var(--gradient-background); background-position: 50% 0px;">
    <div class="wrapper--1">
      <div class="page-header__text">
        <h1 class="heading--1"> At Fitch, our people <br>draw on over 100 <br>years of experience </h1>
        <p>We have breadth and depth across our global team, allowing us to deliver value to our clients. We employ more than 4,000 people in over 30 countries, including nearly 1,600 analysts. Our analysts are prominent global credit and risk experts who offer insights on over 190 countries, over 8,000 corporate entities and over 245,000 debt securities.</p>
      </div>
    </div>
  </div>
</section>

{{ attach_library('fitch_master/page-header') }}
{% if paragraph.field_background_parallax.value == 1 %}{{ attach_library('fitch_master/parallax') }}{% endif %}
{%
  set classes = [
    'paragraph',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
  ]
%}

{% block paragraph %}
    <section
        {% if content.field_section_name.0 is not empty %}id="{{ content.field_section_name.0 }}"{% endif %}
        class="section
        {% if content.field_section_name.0 is not empty %}section--scroll{% endif %}
        {% if content.field_section_spacing.0 is not empty %}section--{{ content.field_section_spacing.0 }}{% endif %}
        {% if content.field_section_spacing.1 is not empty %}section--{{ content.field_section_spacing.1 }}{% endif %}
        "
    >
        <div
            {% if content.field_background_image.0 is not empty %}    
                class="
                    page-header
                    {% if content.field_background_image.0 is not empty %}bg--img{% endif %}
                    {% if paragraph.field_background_blur.value == 1 %}bg--blur{% endif %}
                    {% if paragraph.field_gradient_overlay.value == 1 %}bg--blend{% endif %}
                    {% if content.field_color_overlay.0 is not empty %}bg--blend{% endif %}
                    {% if paragraph.field_background_fixed.value == 1 %}bg--fixed{% endif %}
                    {% if paragraph.field_background_parallax.value == 1 %}bg--parallax{% endif %}
                "                
                style="
                    {% if content.field_background_image.0 is not empty %}background-image: url('{{ file_url(content.field_background_image["#items"].entity.uri.value) }}'){% if paragraph.field_gradient_overlay.value == 1 %}, var(--gradient-background){% endif %};{% endif %}
                    {% if content.field_color_overlay.0 is not empty %}background-color: {{ content.field_color_overlay.0 }};{% endif %}
                "
            {% endif %}

            {% if content.field_background_video.0 is not empty %}
                class="page-header"
            {% endif %}

            {% if content.field_background_color.0 is not empty %}
                class="page-header"
                style="background-color: {{ content.field_background_color.0 }};"
            {% endif %}

        >
            
            {% include '@fitch_master/parts/video_background.html.twig' %}

            <div class="wrapper--1">
                <div class="page-header__text">

                    {% include '@fitch_master/paragraph/paragraph--sub-title.html.twig' %}                    
                    {% if content.field_title.0 is not empty %}
                        <h1 class="heading--1">{{ content.field_title }}</h1>
                    {% endif %}
                    {% include '@fitch_master/paragraph/paragraph--text.html.twig' %}
                    {% include '@fitch_master/paragraph/paragraph--call-to-action.html.twig' %}
                    {% include '@fitch_master/paragraph/paragraph--block-reference.html.twig' %}
                    
                </div>
                {% if content.field_image.0 is not empty %}
                <div class="page-header__image">
                    <div class="image-wrapper">
                        {{ content.field_image }}
                    </div>
                </div>
                {% endif %}
            </div>

        </div>
    </section>

    {% include '@fitch_master/parts/has_header.html.twig' %}
    
{% endblock paragraph %}

.page-header {
  position: relative;
  width: var(--banner-width);
  height: var(--banner-height);
  max-height: var(--banner-max-height);
  margin: var(--banner-margin);
  color: var(--inverted-text-color);
  overflow: hidden;
  transition: height 360ms ease;
  z-index: 1;
}

.page-header .wrapper--1 {
  height: 100%;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  display: -ms-flexbox;
  display: flex;
}

.page-header__text {
  width: 100%;
  max-width: var(--banner-text-max-width);
  transition: width 360ms ease, margin 360ms ease;
  margin: var(--banner-text-margin);
  padding: var(--banner-text-padding);
  z-index: 1;
}

.page-header .heading--1 {
  margin-bottom: var(--banner-heading-margin);
  font-size: var(--banner-heading-size);
  transition: font-size 360ms ease;
}

.page-header .heading--1 + .button__wrapper {
  padding-top: 0.9rem;
}

.page-header .heading--sub {
  margin-bottom: var(--banner-heading-sub-margin);
  font-size: var(--banner-heading-sub-size);
  text-transform: uppercase;
}

.page-header p {
  margin-bottom: var(--banner-paragraph-margin);
  font-size: var(--banner-paragraph-size);
}

.page-header p:last-of-type {
  margin-bottom: 0;
}

.page-header p:last-of-type + .button__wrapper {
  padding-top: 2.9rem;
}

.page-header .button__wrapper {
  margin-top: -0.6rem;
}

.page-header .button__wrapper a {
  margin: 0.6rem 1.8rem 0 0;
}

.page-header__logo .logo {
  margin: 0 0 1rem;
}

.page-header__ratings {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: var(--spacing-2) 0;
  width: 100%;
  min-width: auto;
  height: 12rem;
  white-space: nowrap;
  background: rgba(33, 33, 33, 0.44);
}

@media print {
  .page-header__ratings {
    display: none;
  }
}

.page-header .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}

.page-header__grid {
  width: initial;
  height: initial;
  max-height: initial;
  margin: initial;
  color: var(--inverted-text-color);
  overflow: initial;
  background-color: var(--sf-color-1);
  color: var(--inverted-text-color);
}

.page-header__grid-inner {
  height: 60rem;
  /* iPad Portrait  */
  /* iPhone 6 onwards */
}

@media only screen and (max-width: 768px) {
  .page-header__grid-inner {
    padding: 0 4.8rem;
  }
}

@media only screen and (max-width: 480px) {
  .page-header__grid-inner {
    height: auto;
    min-height: 60rem;
    padding: 3.6rem 2.4rem;
  }
}

[data-brand="fitch-learning"] .page-header .heading--1:after,
[data-brand="fitch-credit-certificate"] .page-header .heading--1:after {
  content: '';
  width: 8.4rem;
  margin-bottom: 3.6rem;
  padding-top: 3.6rem;
  border-bottom: 0.2rem solid var(--white);
  display: block;
}

/* FTICH */
@media only screen and (max-width: 1368px) {
  .page-header {
    min-height: 60rem;
  }
  .page-header__text {
    margin: 3.6rem 0 0 0;
    padding: 0 0 0 2.4rem;
  }
}

/* iPad Pro Portrait - iPad Landscape */
@media only screen and (max-width: 1024px) {
  .page-header {
    min-height: 50rem;
  }
  .page-header__text .heading--1 {
    font-size: 5.4rem;
  }
}

/* iPad Portrait  */
@media only screen and (max-width: 768px) {
  .page-header .wrapper--1 {
    padding: 0;
  }
  .page-header__text {
    margin: 4.4rem 0 0;
    padding-right: 2.4rem;
  }
  .page-header__text .heading--1 {
    font-size: 4.8rem;
  }
  .page-header__image {
    display: none;
  }
}

/* iPhone 6 onwards */
@media only screen and (max-width: 480px) {
  .page-header {
    height: 84vh;
    max-height: initial;
    min-height: initial;
  }
  .page-header__text {
    width: 100%;
  }
  .page-header__text .heading--1 {
    font-size: 4.4rem;
  }
  .page-header__ratings {
    display: none;
  }
}

/* iPhone 5 */
@media only screen and (max-width: 320px) {
  .page-header {
    height: auto;
    max-height: initial;
    min-height: 60rem;
  }
  .page-header__text {
    width: 100%;
    margin: 10.8rem 0 0;
  }
  .page-header__text .heading--1 {
    font-size: 3.6rem;
  }
}

/* Print */
@media print {
  .page-header {
    height: auto;
    max-height: initial;
    min-height: initial;
    color: var(--black);
  }
  .page-header .video {
    display: none;
  }
  .page-header .wrapper--1 {
    display: block;
  }
  .page-header__text {
    width: 100%;
    margin: 4.4rem 0 0;
    padding-right: 0;
  }
  .page-header__text .heading--1 {
    font-size: 4.8rem;
  }
  .page-header__image {
    display: none;
  }
}

@import '../abstracts/_mixins';

.page-header {
  position: relative;
  width: var(--banner-width);
  height: var(--banner-height);
  max-height: var(--banner-max-height);
  margin: var(--banner-margin);
  color: var(--inverted-text-color);
  overflow: hidden;
  transition: height 360ms ease;
  z-index: 1;

  .wrapper--1 {
    height: 100%;
    align-items: center;
    flex-flow: row nowrap;
    display: flex;
  }

  &__text {
    width: 100%;
    max-width: var(--banner-text-max-width);
    transition: width 360ms ease, margin 360ms ease;
    margin: var(--banner-text-margin);
    padding: var(--banner-text-padding);
    z-index: 1;
  }

  .heading--1 {
    margin-bottom: var(--banner-heading-margin);
    font-size: var(--banner-heading-size);
    transition: font-size 360ms ease;

    & + .button__wrapper {
      padding-top: 0.9rem;
    }
  }

  .heading--sub {
    margin-bottom: var(--banner-heading-sub-margin);
    font-size: var(--banner-heading-sub-size);
    text-transform: uppercase;
  }

  p {
    margin-bottom: var(--banner-paragraph-margin);
    font-size: var(--banner-paragraph-size);

    &:last-of-type {
      margin-bottom: 0;

      & + .button__wrapper {
        padding-top: 2.9rem;
      }
    }
  }
  
  .button__wrapper {
    margin-top: -0.6rem;

    a {
      margin: 0.6rem 1.8rem 0 0;
    }
  }

  &__logo .logo {
    margin: 0 0 1rem;
  }

  &__ratings {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: var(--spacing-2) 0;
    width: 100%;
    min-width: auto;
    height: 12rem;
    white-space: nowrap;
    background: rgba(33, 33, 33, 0.44);
    @include no-print;
  }  

  .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
  }

  &__grid {
    width: initial;
    height: initial;
    max-height: initial;
    margin: initial;
    color: var(--inverted-text-color);
    overflow: initial;
    background-color: var(--sf-color-1);
    color: var(--inverted-text-color);

    &-inner {
      height: 60rem;
      
      @include mq-3 {
          padding: 0 4.8rem;
      }
      @include mq-4 {
          height: auto;
          min-height: 60rem;
          padding: 3.6rem 2.4rem;
      }
    }
  }
}

[data-brand="fitch-learning"],
[data-brand="fitch-credit-certificate"] { 
  .page-header {
    .heading--1:after {
      content: '';
      width: 8.4rem;
      margin-bottom: 3.6rem;
      padding-top: 3.6rem;
      border-bottom: 0.2rem solid var(--white);
      display: block;
    }
  }
}

@include mq-0 {
  .page-header {
    min-height: 60rem;

    &__text {
      margin: 3.6rem 0 0 0;
      padding: 0 0 0 2.4rem;
    }
  }
}
@include mq-2 {
  .page-header {
    min-height: 50rem;

    &__text {
      .heading--1 {
        font-size: 5.4rem;
      }
    }
  }
}
@include mq-3 {  
  .page-header {
    .wrapper--1 {
      padding: 0;
    }
    
    &__text {
      margin: 4.4rem 0 0;
      padding-right: 2.4rem;

      .heading--1 {
        font-size: 4.8rem;
      }
    }
    &__image {
      display: none;
    }
  }
}
@include mq-4 {
  .page-header {
    height: 84vh;
    max-height: initial;
    min-height: initial;

      &__text {
        width: 100%;

        .heading--1 {
          font-size: 4.4rem;
        }
      }
      &__ratings {
        display: none;
      }
    }
}
@include mq-5 {
  .page-header {
    height: auto;
    max-height: initial;
    min-height: 60rem;

      &__text {
        width: 100%;
        margin: 10.8rem 0 0;

        .heading--1 {
          font-size: 3.6rem;
        }
      }
    }
}
@include print {
  .page-header {
    height: auto;
    max-height: initial;
    min-height: initial;
    color: var(--black);

    .video {
      display: none;
    }

    .wrapper--1 {
      display: block;
    }
    
    &__text {
      width: 100%;
      margin: 4.4rem 0 0;
      padding-right: 0;

      .heading--1 {
        font-size: 4.8rem;
      }
    }
    &__image {
      display: none;
    }
  }
}