@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800;900&display=swap');

body {
  position: relative;
  font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 14pt;
  font-weight: 400;
  color: #2e221d;
  margin: 0;
  padding: 0;
}

main {
  min-height: 60vh;
  padding-top: 105px;
}

*, *:after, *:before {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p, a {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

a {
  text-decoration: none;
}

.about-me {
  padding: 5vw;
}

.about-me-wrapper {
  max-width: 680px;
  margin: 0 auto;
}

.about-me-wrapper > img {
  max-width: 100%;
  padding-bottom: 2em;
}

h1.text-alpha {
  font-family: 'Playfair Display', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 32pt;
  color: #2e221d;
  line-height: 42pt;
  font-weight: 900;
  margin-bottom: 24px;}

  @media only screen and (max-width : 900px) {
    h1.text-alpha {
      line-height: 30pt;
      font-weight: 900;
      font-size: 22pt;
      margin-bottom: 16px;}} 


h2.text-alpha {
  font-size: 18pt;
  line-height: 1.5;
  font-weight: 500;
  color: #2e221d;
  margin-bottom: 28px;}

  @media only screen and (max-width : 900px) {
    h2.text-alpha {
    font-size: 16pt;
    margin-bottom: 20px;}} 


h3.text-alpha {
  font-size: 15pt;
  line-height: 1.5;
  font-weight: 400;
  color: #2e221d;
  margin-bottom: 28px;}

  @media only screen and (max-width : 900px) {
    h3.text-alpha {
      font-size: 14pt;
      font-weight: 400;
      margin-bottom: 20px;}} 

p.text-alpha {
  font-size: 12pt;
  color: #2e221d;
  line-height: 20pt;
  font-weight: 400;
  margin-bottom: 10px;}

  @media only screen and (max-width : 900px) {
    p.text-alpha {
      font-size: 10pt;
      color: #2e221d;
      line-height: 17pt;
      font-weight: 400;}}


h1.text-blog {
  font-family: 'Playfair Display', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 20pt;
  color: #2e221d;
  line-height: 21pt;
  font-weight: 900;
  margin-bottom: 10px;}

  @media only screen and (max-width : 900px) {
    h1.text-blog {
    font-size: 18pt;
    font-weight: 900;
    line-height: 21pt;}} 

p.text-blog {
  font-size: 14pt;
  color: #2e221d;
  line-height: 17pt;
  font-weight: 400;
  margin-bottom: 10px;}

  @media only screen and (max-width : 900px) {
    p.text-blog {
      font-size: 10pt;
      color: #2e221d;
      line-height: 17pt;
      font-weight: 400;}}
      

.section-content {
  padding: 0 5vw;}

.hero.section-content,
.list.section-content,
.staffing.section-content {
  padding: 220px 5vw;}    

.tech.section-content {
  padding: 80px 5vw;}


.employer.section-content {
  padding: 0 5vw 220px 5vw;}


  @media only screen and (max-width : 900px) {
    .hero.section-content,
    .list.section-content,
    .staffing.section-content {
      padding: 40px 5vw;}
    

    .employer.section-content {
      padding: 0 5vw 40px 5vw;}}
      

      .section-content-wrapper {
        max-width: 1000px;
        margin: 0 auto;
        position: relative;}

        .hero .section-content-wrapper {
          display: -webkit-box;
          display: flex;
          -webkit-box-pack: end;
                  justify-content: flex-end;}

        @media only screen and (max-width : 900px) {
          .hero .section-content-wrapper {
            -webkit-box-orient: vertical;
            -webkit-box-direction: reverse;
                    flex-direction: column-reverse;
            -webkit-box-pack: unset;
                    justify-content: unset;}}


        @media only screen and (max-width : 900px) {
          .section-content-wrapper {
            padding-bottom: 10vw;}}

        .section-content .content-image {
          position: absolute;
          z-index: 5;
          top: 0;
          right: 0;}

          .hero.section-content .content-image {
            top: -40px;
            right: unset;
            left: 0;}

            .list.section-content .content-image {
              left: 0;
              top: -45px;}

            @media only screen and (max-width : 900px) {
              .hero.section-content .content-image,
              .list.section-content .content-image,
              .courses.section-content .content-image,
              .admin.section-content .content-image,
              .employer.section-content .content-image {
                opacity: .3;}}

          .section-content .content-image img {
            max-width: 400px;
            width: 100%;}

          .list.section-content .content-image img,
          .employer.section-content .content-image img {
            max-width: 800px;}

          .employer.section-content .content-image img {
            max-width: 600px;}


        .section-content .content-body {
          position: relative;
          z-index: 10;
          display: -webkit-box;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
                  flex-direction: column;}

        .list.section-content .content-body {
          -webkit-box-align: end;
                  align-items: flex-end;}

        .staffing.section-content .content-body,
        .tech.section-content .content-body {
          -webkit-box-align: center;
                  align-items: center;
          text-align: center;}

          .hero .content-body h1,
          .courses .content-body h1,
          .admin .content-body h1,
          .tech .content-body h1,
          .staffing .content-body h1 {
            max-width: 680px;
            width: 100%;}


          .list .content-body h1,
          .employer .content-body h1 {
            max-width: 800px;
            width: 100%;}

          .hero .content-body h3,
          .courses .content-body h3,
          .admin .content-body h3,
          .list .content-body h3,
          .staffing .content-body h3,
          .tech .content-body h3,
          .employer .content-body h3 {
            max-width: 580px;
            width: 100%;}

            .list .content-body .list-wrapper,
            .employer .content-body .list-wrapper {
              max-width: 480px;
              width: 100%;}

              .list .content-body .list-wrapper h3,
              .employer .content-body .list-wrapper h3 {
                line-height: 1.4;
                margin-bottom: 12px;
                font-weight: 700;}

            .list .content-body .action,
            .employer .content-body .action {
              max-width: 480px;
              width: 100%;}



.action {
  display: -webkit-box;
  display: flex;}

  a.action-wrapper {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;}

  .action-wrapper h5 {
    font-size: 14pt;
    line-height: 1.5;
    font-weight: 700;
    color: white;
    background-color: #940470;
    padding: 26px 28px;
    text-transform: uppercase;} 

    @media only screen and (max-width : 900px) {
    .action-wrapper h5 {
      font-size: 12pt;
      font-weight: 600;}} 





.hero-list {
  padding: 0 5vw;}

  .hero-list-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;}

    @media only screen and (max-width : 900px) {
    .hero-list-wrapper {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
              flex-direction: column;}}

    .hero-list-wrapper .item {
    width: 100%;}

    @media only screen and (max-width : 900px) {
      .hero-list-wrapper .item {
        max-width: 600px;
        padding-bottom: 14px;}}

    @media only screen and (min-width : 900px) {
      .hero-list-wrapper .item {
        padding: 0 14px;}

      .hero-list-wrapper .item:first-child {
        padding-left: 0;}

      .hero-list-wrapper .item:last-child {
        padding-right: 0;}}


.footer-content {
  padding: 0 5vw;
  margin-top: 100px;
  background-color: #2e221d;}

  .footer-content-wrapper {
    padding: 200px 0;
    max-width: 1000px;
    margin: 0 auto;
    display: -webkit-box;
    display: flex;}

    @media only screen and (max-width : 900px) {
    .footer-content-wrapper {
      padding: 10vw 0;
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
              flex-direction: column-reverse;}}

    footer .content-body {
    width: 100%;}

    @media only screen and (max-width : 900px) {
      footer .content-body {
        padding-top: 10vw;}}

    footer .content-body h1 {
      max-width: 400px;
      color: white;}

    footer .content-body h3 {
      font-weight: 500;
      color: white;}

    footer .contact-wrapper {
      padding-top: 32px;}

      footer .contact-wrapper .partner {
        padding: 24px 0;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;}

        footer .contact-wrapper .partner img {
          max-width: 200px;}

      footer .contact-wrapper h3 {
        font-weight: 500;
        margin: 0;
        color: white;}

    footer h3.follow-us {
      color: white;
      margin: 5px 0;}

      footer .social-icons {}
      
        footer .social-icons img {
        max-width: 48px;
        margin: 5px;}

        footer .social-icons img:first-child {
          margin-left: -5px;}

footer .bottom-nav {
  max-width: 1000px;
  margin: 0 auto;}

  footer .bottom-nav a {
    padding: 10px 0;
    display: -webkit-box;
    display: flex;}


  footer .bottom-nav a h3 {
    color: white;
    text-decoration: underline;}

.contact-form {
  width: 100%;}

.contact-form-wrapper {
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: baseline;
          align-items: baseline;
}

.contact-form-wrapper textarea,
.contact-form-wrapper input {
    width: 100%;
    padding: 16px;
    margin-bottom: 18px;
    background: none;
    outline: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: none;
    border-radius: 0;
    font: inherit;
    color: #2e221d;
    font-weight: 500;
    background-color: white;}

    @media only screen and (max-width : 900px) {
    .contact-form-wrapper textarea,
    .contact-form-wrapper input {
      font-size: 14pt;}}
  

.contact-form-wrapper input {
}

.contact-form-wrapper textarea {
}

.contact-form-wrapper button {
  background: none;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  font: inherit;
  font-size: 14pt;
  line-height: 1.5;
  font-weight: 700;
  color: 050505;
  background-color: white;
  padding: 26px 28px;
  text-transform: uppercase;}


  @media only screen and (max-width : 900px) {
    .contact-form-wrapper button {
    font-size: 12pt;
    padding: 18px 16px;}}


.logos {
  text-align: center;}

  .logos-wrapper {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    flex-wrap: wrap;}

  .logos-wrapper > a {
    display: -webkit-box;
    display: flex;
    padding: 30px;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;}

    .logos-wrapper > a > img {
      max-width: 100px;
      max-height: 65px;}

      @media only screen and (max-width : 900px) {
        .logos-wrapper > a > img {
          max-width: 90px;
          max-height: 50px;}}



.text-center {
  padding: 5vw;}

  .text-center-wrapper {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    text-align: center;}

    .text-center-wrapper > .content-body {
      display: -webkit-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
              flex-direction: column;
      -webkit-box-pack: center;
              justify-content: center;
      -webkit-box-align: center;
              align-items: center;}



.simple-page {
  padding: 100px 5vw 0 5vw;}

.simple-page-wrapper {
  max-width: 680px;
  margin: 0 auto;}