@charset "UTF-8";
/* CSS Document */

/* Customized colors are found under module CSS. The below styles article
are global and will apply to the components used across multiple pages and
modules. It is recommeneded that you do not change the styles below and any
changes should be applied to the corresponding component css.

These global styles are seperated into three main groupings -
1. Content or Articles 2. Data or Forms 3. ""

*/

/*** Global Styles ***/

/* BASE STYLING FOR HTML/BODY */

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "HNRoman", Arial, sans-serif;
  font-weight: 400;
}

/* Fonts - DO NOT EDIT BELOW - Please do not share these
fonts or you could jeopardize Boeing's font contract. New users
or developers that require the use of Helvetica Neue for
desktop and/or webfonts applications need to contact they
Boeing Branding Center to apply for a license. */

@font-face {
  src: url('fonts/webfonts_icons/common/fonts/7f1f2a7d-3837-4c93-b373-f03c5da3f9a1.ttf');
  font-family: "HNThin";
}

@font-face {
  src: url('fonts/webfonts_icons/common/fonts/278bef59-6be1-4800-b5ac-1f769ab47430.ttf');
  font-family: "HNLight";
}

@font-face {
  src: url('fonts/webfonts_icons/common/fonts/688ab72b-4deb-4e15-a088-89166978d469.ttf');
  font-family: "HNRoman";
}

@font-face {
  src: url('fonts/webfonts_icons/common/fonts/b0ffdcf0-26da-47fd-8485-20e4a40d4b7d.ttf');
  font-family: "HNMedium";
}

@font-face {
  src: url('fonts/webfonts_icons/common/fonts/4c6503c9-859b-4d3b-a1d5-2d42e1222415.ttf');
  font-family: "HNBold";
}

h1 { /*Headline / Article Headline*/
  font-family: "HNLight", Arial, sans-serif;
  font-size: 24px;
}

h2 { /*Section Title*/
  font-family: "HNLight", Arial, sans-serif;
  font-size: 20px;
}

h3 { /*Subheading*/
  font-family: inherit;
  font-size: 15px;
}

h4 { /*Body 2 / Menu*/
  font-family: "NHMedium", Arial, sans-serif;
  font-size: 13px;
}

h5 { /*Caption*/
  font-family: inherit;
  font-size: 12px;
}

p {
  font-family: inherit;
  font-size: 13px;
  word-wrap: break-word;
}

button { /* ALL BUTTONS */
  font-family: "NHMedium", Arial, sans-serif;
  font-size: 14px;
  text-transform: uppercase;
}

a {
  cursor: pointer;
}

/* Standard Font Colors */

footer a,
.blackText {
  color: rgba(0,0,0,.87);
}

.greyText {
  color: rgba(0,0,0,.54);
}

a,
.blueText {
  color: rgb(0,155,222);
}

/*** MATERIAL COMPONENTS ***/

.login .mat-horizontal-stepper-header-container { /* Specific change to login stepper form */
    display: none;
    visibility: collapse;
}

/*** CUSTOM COMPONENTS ***/

/* Header - DO NOT EDIT BELOW - These styles will apply to all header components */

header {
  background: rgb(38,55,70);
  width: 100%;
  height: 64px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,.26);
  z-index: 1;
}

.headerWrapper {
  height: 64px;
  position: fixed;
  top: 0;
  left: 72px;
  right: 72px;
  z-index: 2;
}

.headerWrapper .headerTitle {
  color: rgb(255,255,255);
  font-size: 18px; /* Specific to headers */
  line-height: 64px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
}

/* Articles - DO NOT EDIT BELOW - The styles will apply to all article components */

.articleContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 64px;
}

section.article {
  width: 1160px;
  margin: auto;
  padding-top: 80px;
}

.articleTitle {
  line-height: 40px;
  margin-bottom: 30px;
}

.contList .contentBlock:nth-of-type(1) h2.contentTitle{
  padding-top: 48px;
}

.contList .contentBlock h2.contentTitle {
  line-height: 32px;
  margin-bottom: 30px;
  padding-top: 60px;
  overflow: hidden;
}

.subList h3 {
  max-width: 760px;
  line-height: 21px;
  margin-top: 40px;
  margin-bottom: 20px;
}

.content p {
  max-width: 760px;
  line-height: 24px;
  margin: 0 0 .5em;
}

footer {
  padding: 32px 0;
}

@media only screen and (min-width:0px) and (max-width:1240px),
only screen and (min-device-width:0px) and (max-device-width:1240px) {
  section.article {
    width: 75%;
  }

}
