/* =======================================
   INCLUDES AND VARIABLES
   ======================================= */
body {
  font-family: 'IBM Plex Sans', sans-serif; }

a {
  text-decoration: none; }

.home h1 {
  font: normal normal normal 28px/37px 'IBM Plex Sans'; }
  .home h1 span {
    font: normal normal bold 110px/143px 'IBM Plex Sans';
    display: block; }
    @media (max-width: 1319px) {
      .home h1 span {
        font: normal normal bold 80px/114px 'IBM Plex Sans'; } }
    @media (max-width: 984px) {
      .home h1 span {
        font: normal normal bold 65px/85px 'IBM Plex Sans'; } }
    @media (max-width: 600px) {
      .home h1 span {
        font: normal normal bold 16.5vw/85px 'IBM Plex Sans'; } }
.home h2 {
  font: normal normal normal 20px/28px 'IBM Plex Sans';
  letter-spacing: 0.2px; }
.home #main h2 {
  font: normal normal bold 40px/52px 'IBM Plex Sans';
  margin-top: 0; }
.home #main h3 {
  font: normal normal bold 24px/32px 'IBM Plex Sans';
  text-transform: uppercase;
  letter-spacing: 0.48px;
  margin-bottom: 15px; }
.home #main p {
  font: normal normal normal 16px/24px 'IBM Plex Sans';
  letter-spacing: 0.32px; }

.page h1 {
  font: normal normal bold 32px/37px 'IBM Plex Sans'; }
.page h2 {
  font: normal normal bold 24px/32px 'IBM Plex Sans';
  text-transform: uppercase;
  letter-spacing: 0.48px;
  margin-bottom: 15px; }
.page #breadcrumbs {
  font-size: 11px;
  text-transform: uppercase; }

footer {
  font: normal bold 16px/20px 'IBM Plex Sans'; }
  footer a {
    text-transform: uppercase;
    letter-spacing: 1.28px;
    margin: 0 10px; }

/* =======================================
   DEFINE
   ======================================= */
/* =======================================
   STYLES
   ======================================= */
body {
  color: #03183e; }

a {
  color: #6a8693; }

a:hover {
  color: #69C1FF;
}

a svg {
  fill: #6a8693;
  margin-bottom: -7px;
  transform: scale(0.8);
}

a:hover svg {
  fill: #69C1FF;
}

/* =======================================
   GLOBAL
   ======================================= */
body {
  margin: 0; }

.clearfix:after {
  content: "";
  clear: both;
  width: 100%;
  height: 0;
  display: block; }

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 70px; }
  @media (max-width: 984px) {
    .container {
      padding: 0 16px; } }

/* =======================================
   HEADER
   ======================================= */
header {
  margin: 32px 0; }
  header img {
    max-width: 255px;
    width: 100%; }

/* =======================================
   HERO
   ======================================= */
#hero {
  background: url(/img/herobg.svg) #69C1FF no-repeat;
  background-size: cover;
  margin-top: -140px; }
  #hero .wrapper {
    padding-top: 224px;
    background: url(/img/herobg2.svg) transparent no-repeat padding-box 70% 75%;
    background-size: 150%; }
    @media (max-width: 984px) {
      #hero .wrapper {
        padding-top: 150px; } }
  #hero .container {
    display: flex; }
    @media (max-width: 600px) {
      #hero .container {
        flex-direction: column; } }
  #hero .content {
    max-width: 580px; }
    @media (max-width: 1319px) {
      #hero .content {
        max-width: 420px; } }
    @media (max-width: 984px) {
      #hero .content {
        max-width: 100%; } }
    #hero .content h1 {
      margin-bottom: 75px; }
      @media (max-width: 1319px) {
        #hero .content h1 {
          margin-bottom: 40px; } }
      @media (max-width: 600px) {
        #hero .content h1 {
          margin-bottom: 68px; } }
    #hero .content h2 {
      margin-bottom: 60px; }
      @media (max-width: 600px) {
        #hero .content h2 {
          max-width: 50%; } }
  #hero .img {
    margin-bottom: -4px;
    margin-top: -140px;
    align-self: flex-end; }
    @media (max-width: 1319px) {
      #hero .img img {
        width: 100%; } }
    @media (max-width: 984px) {
      #hero .img {
        max-width: calc(75% + 16px);
        margin-right: -16px;
        margin-top: -250px;
        overflow: hidden; }
        #hero .img img {
          width: 130%; } }
    @media (max-width: 600px) {
      #hero .img {
        max-width: calc(75% + 16px);
        margin-right: -16px;
        margin-top: -220px;
        overflow: hidden; }
        #hero .img img {
          width: 150%; } }

/* =======================================
   MAIN CONTENT
   ======================================= */
#main {
  padding-top: 30px;
  margin-top: 35px;
  background: url(/img/bodybg.svg) transparent no-repeat padding-box 0 0;
  background-size: cover;
  margin-bottom: 65px; }
  #main .videos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; }
    @media (max-width: 600px) {
      #main .videos {
        flex-direction: column;
        flex-wrap: nowrap; } }
  #main .video {
    flex-basis: calc(50% - 15px);
    margin-bottom: 65px; }
    #main .video .videoWrapper {
      position: relative;
      padding-bottom: 56.25%; }
    #main .video iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    #main .video:nth-child(odd) {
      margin-right: 15px; }
    #main .video:nth-child(even) {
      margin-left: 15px; }
    @media (max-width: 600px) {
      #main .video:nth-child(odd) {
        margin-right: 0; }
      #main .video:nth-child(even) {
        margin-left: 0; } }
    #main .video:nth-last-child(2), #main .video:nth-last-child(1) {
      margin-bottom: 0; }
    @media (max-width: 600px) {
      #main .video:nth-last-child(2), #main .video:nth-last-child(1) {
        margin-bottom: 65px; } }

  .copy {
    text-align: center;
    margin-top: 100px;
  }

/* =======================================
   FOOTER
   ======================================= */
footer {
  background: #e5f6ff;
  padding: 65px;
  text-align: center; }
  footer .at-share-btn-elements {
    margin-top: 55px; }
  footer nav, footer nav a {
    margin-top: 30px;
    color: #6a8693; }

/* =======================================
   PAGES
   ======================================= */
.page #hero h1 {
  flex-basis: 100%;
  text-align: center; }
.page #hero .wrapper {
  padding: 150px 0 100px; }

/*# sourceMappingURL=style.css.map */