/* Global */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Variables */
/* Main */
html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  min-width: 20em;
  margin: 0;
  padding: 0;
  background-color: #FFF;
  font-family: "Figtree", serif;
}

.bodyMainPage {
  background-image: url("../images/rebecca_brad1600x996.jpg");
  background-repeat: no-repeat;
  background-position: 60% 0;
  background-attachment: fixed;
  background-size: cover;
}

/* Content */
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.disc {
  margin-left: 2em;
}
ul.disc li {
  list-style: disc;
  margin: 0.25em 0;
}

.clear {
  clear: both;
}

.hide {
  position: absolute;
  left: -500em;
  width: 0;
  overflow: hidden;
}

.imageCenter, .textCenter {
  display: block;
  clear: both;
  margin: 0 auto;
  text-align: center;
}

/* Fonts */
h2, h4 {
  font-family: "M PLUS 1", serif;
  font-weight: 900;
  letter-spacing: -0.1rem;
}

article h2 {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 2.5rem;
  line-height: 2.5rem;
  padding: 0 0 1rem 0;
}

article h3 {
  clear: both;
  margin: 0;
  padding: 0.5em 5% 0 5%;
  color: #0071d2;
  font-size: 2.2rem;
  line-height: 2.2rem;
}
@media screen and (min-width: 40.5rem) {
  article h3 {
    line-height: initial;
  }
}

article h4 {
  clear: both;
  margin: 0;
  padding: 0 0 0.5em 0;
  font-size: 2rem;
  line-height: 2rem;
}
@media screen and (min-width: 40.5rem) {
  article h4 {
    line-height: initial;
  }
}

a.externalLink {
  color: #004886;
  text-decoration: none;
  transition: all 500ms;
}
a.externalLink:hover {
  color: #002d53;
}

.column h3 {
  padding: 0.5em 0;
}

.columnHeader {
  width: 50%;
  padding: 0 5%;
}

.secondaryColor {
  color: #50C300;
}

.aboutUsColor {
  color: #ff8500;
}

.subHeaderText {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  font-family: "M PLUS 1", serif;
  font-size: 1.2em;
  font-weight: 500;
  line-height: 1.75rem;
}
@media screen and (min-width: 40.5rem) {
  .subHeaderText {
    width: 60%;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2rem;
  }
}

.subHeaderTextMultiple {
  width: 70%;
  margin: 0.5em auto;
  text-align: center;
  font-family: "M PLUS 1", serif;
  font-size: 1.5rem;
  ont-weight: 500;
  line-height: 2rem;
  letter-spacing: 0.05rem;
}

.largerFont {
  display: block;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.5em;
}

.smallerFont {
  display: block;
  font-size: 0.5em;
  font-weight: 100;
  text-shadow: 0.05em 0.05em 0 rgba(0, 0, 0, 0.25);
}

.highlightText {
  color: #FF7E00;
}

/* Images */
img {
  max-width: 100%;
}

/* Sections */
section {
  display: block;
  clear: both;
  width: 100%;
}

.firstSection {
  margin-top: 5em;
}

.whiteBackground {
  background: #FFF;
}

.blueBackground {
  background: #F0F8FF;
}

.blackBackground {
  background: #000;
  color: #FFF;
}

.greyBackground {
  background: #F5F5F5;
}

.mainSection {
  margin-top: 5em;
  background: url("../images/pattern-blue.png") repeat;
}
.mainSection h2 {
  width: 100%;
  margin: 0;
  padding: 10%;
  font-size: 1.8rem;
  line-height: 1.8rem;
  text-shadow: none;
}
@media screen and (min-width: 40.5rem) {
  .mainSection h2 {
    width: 60%;
    padding: 8% 5%;
    font-size: 3rem;
    line-height: 3rem;
    text-shadow: 0.05em 0.05em 0 rgba(0, 0, 0, 0.25);
  }
}
@media screen and (min-width: 64rem) {
  .mainSection h2 {
    font-size: 4em;
    line-height: 4rem;
  }
}
.mainSection h2 .smallerFont {
  font-weight: 400;
}
.mainSection nav {
  display: block;
  width: 100%;
  font-weight: 600;
}
.mainSection nav li {
  width: 100%;
}
.mainSection nav li a {
  display: block;
  height: 4.6875em;
  padding-top: 0;
  font-size: 1.2em;
  line-height: 4.6875em;
  text-align: center;
  color: #FFF;
  text-decoration: none;
  background-size: auto 50%;
  background-position: 10% 50%;
  background-repeat: no-repeat;
}
@media screen and (min-width: 40.5rem) {
  .mainSection nav li a {
    height: 16.25rem;
    line-height: initial;
    padding-top: 11rem;
    font-size: 1.6rem;
    background-size: auto auto;
    background-position: 50% 40%;
  }
}
@media screen and (min-width: 40.5rem) {
  .mainSection nav li {
    float: left;
    width: 50%;
  }
}
@media screen and (min-width: 64rem) {
  .mainSection nav li {
    width: 25%;
  }
}

/* Articles */
article {
  display: block;
  max-width: 75em;
  margin: 0 auto;
  padding: 4em 2em;
}

.flex-columns {
  margin: 1rem 0;
  font-size: 1.2rem;
}
.flex-columns .flex-item {
  width: 100%;
  line-height: 1.5em;
  margin-bottom: 1rem;
}
.flex-columns .flex-item:has(ul:first-child) {
  margin-bottom: 0;
}
.flex-columns .flex-item:last-child {
  margin-bottom: 0;
}
.flex-columns .flex-item.columnBorderAboutUs {
  border-right: none;
}
@media screen and (min-width: 40.5em) {
  .flex-columns .flex-item.columnBorderAboutUs {
    border-right: solid 0.1em #FF8500;
  }
}
@media screen and (min-width: 40.5em) {
  .flex-columns .flex-item {
    margin-bottom: 0;
    padding: 0 5%;
  }
  .flex-columns .flex-item.column-50 {
    width: 50%;
  }
  .flex-columns .flex-item.column-33 {
    width: 33.333%;
  }
}
.flex-columns .flex-item p {
  margin: 0;
}
.flex-columns .flex-item p:has(+ p) {
  margin: 0 0 1rem 0;
}
@media screen and (min-width: 40.5rem) {
  .flex-columns {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0;
  }
}

/* Columns */
.column, .emptyBorder {
  float: left;
  width: 50%;
  min-height: 1.5em;
  margin: 1.5em 0;
  padding: 0 5%;
  font-size: 1.2em;
  line-height: 1.5em;
}

.columnRight {
  float: right;
  width: 50%;
  min-height: 1.5em;
  margin: 1.5em 0;
  padding: 0 5%;
  font-size: 1.2em;
  line-height: 1.5em;
}

.columnBorder, .emptyBorder {
  border-right: solid 0.1em #50C300;
}

.columnBorderAboutUs {
  border-right: solid 0.1em #ff8500;
}

.columnBottomAboutUs {
  padding-bottom: 1em;
  border-bottom: solid 0.1em #FF8500;
}

.columnLeftBorderAboutUs {
  border-left: solid 0.1em #FF8500;
}

.columnBorderProducts {
  border-right: solid 0.1em #50C300;
}

.columnLeftBorderProducts {
  border-left: solid 0.1em #50C300;
}

.columnBorderServices {
  border-right: solid 0.1em #0071d2;
}

.columnLeftBorderServices {
  border-left: solid 0.1em #0071D2;
}

.columnBorderContactUs {
  border-right: solid 0.1em #663398;
}

.column p {
  margin: 0 0 1em 0;
  padding: 0;
}

.column p:last-child {
  margin: 0;
}

.columnThird {
  float: left;
  width: 33.3333%;
  padding: 0 5%;
}

/* List Grid */
.listGrid strong {
  font-family: "Figtree", serif;
  font-size: 1.3em;
  font-weight: 700;
  color: #000;
}

.listGrid li {
  float: left;
  width: 50%;
  padding: 2em 1em 2em 7em;
  font-size: 1.2em;
  color: #276DAA;
  border-bottom: solid 0.1em #7EC3FF;
  background-repeat: no-repeat;
  background-position: 1.5em 50%;
}

.listGrid li:nth-child(odd) {
  clear: both;
  border-right: solid 0.1em #7EC3FF;
}

.listGrid li:nth-child(n+5) {
  border-bottom: none;
}

.rapidIcon {
  background-image: url("../images/rapid_elearning.png");
}

.webIcon {
  background-image: url("../images/web_design.png");
}

.ibookIcon {
  background-image: url("../images/ibooks.png");
}

.customIcon {
  background-image: url("../images/custom_elearning.png");
}

.mobileIcon {
  background-image: url("../images/mobile_app.png");
}

.mediaIcon {
  background-image: url("../images/media_design.png");
}

.supportIcon {
  background-image: url("../images/customer_support_icon.png");
}

.dataIcon {
  background-image: url("../images/data_tracking_icon.png");
}

/* Profiles */
.fullPersonProfile {
  max-width: 75em;
  margin: 0 auto;
}

.fullPersonProfile:last-child {
  border-top: solid 0.1em #DCDCDC;
}

.profilePic {
  float: left;
  width: 25%;
  height: 25em;
  margin: 2em;
  background-repeat: no-repeat;
}

.richardPic {
  background-image: url("../images/richard.jpg");
  background-position: 75% 25%;
}

.paulPic {
  background-image: url("../images/paul.jpg");
  background-position: 54% 0%;
}

.profileText {
  float: left;
  width: 60%;
  padding: 2em 4em;
  font-size: 1.2em;
  line-height: 1.5em;
}

.profileText h3 {
  margin: 0;
}

.personLabelAboutUs {
  color: #FF8500;
}

.personLabelContact {
  color: #663398;
  font-weight: 400;
  font-size: 1.2em;
}

/* Steps */
.globalList {
  clear: both;
  position: relative;
  width: 100%;
  margin: 2em auto;
}
.globalList ul {
  margin: 0;
}
.globalList ul li {
  list-style: none;
}
.globalList ul li button {
  width: 100%;
  margin-bottom: 0.25em;
  padding: 1.5em;
  list-style: none;
  font-family: "Figtree", serif;
  color: #000;
  font-size: 1.2em;
  font-weight: 400;
  text-align: left;
  background: white;
  border: solid 0.1rem #0071D2;
  transition: background 500ms, color 250ms;
  cursor: pointer;
  scroll-margin-top: 6rem;
}
@media screen and (min-width: 40.5rem) {
  .globalList ul li button {
    width: 50%;
  }
}

.globalListServices button:hover, .globalListServices button.globalListActive {
  color: #FFF;
  background: #0071D2;
}

.globalListSection {
  opacity: 0;
  transition: opacity 1s;
  font-size: 1.2em;
}
.globalListSection p {
  margin: 0 0 1em 0;
}

.globalListSectionActive {
  width: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  padding: 0 1em 1em 1em;
  opacity: 1;
}

/* Products List */
.productsList {
  width: 50%;
  margin: 2em auto;
  border-top: solid 0.1em #50C300;
}

.productsList li {
  padding: 5% 5% 5% 20%;
  border-bottom: solid 0.1em #50C300;
  background-repeat: no-repeat;
  background-position: 5% 50%;
}

.productListItem1 {
  background-image: url("../images/mobile.png");
}

.productListItem2 {
  background-image: url("../images/engaging.png");
}

.productListItem3 {
  background-image: url("../images/pre-assessment.png");
}

.productListItem4 {
  background-image: url("../images/learning-check.png");
}

.productListItem5 {
  background-image: url("../images/comm-tools.png");
}

.productListItem6 {
  background-image: url("../images/reports.png");
}

/* Front Navigation */
.aboutUsNav a {
  background-color: #E18000;
  background-color: rgba(255, 128, 0, 0.5);
  background-image: url("../images/about-us-white.png");
  border-bottom: solid 0.25em #E18000;
}

.aboutUsNav a:hover {
  background-color: rgba(255, 128, 0, 0.85);
}

.productsNav a {
  background-color: #50C300;
  background-color: rgba(80, 195, 0, 0.5);
  background-image: url("../images/products-white.png");
  border-bottom: solid 0.25em #50C300;
}

.productsNav a:hover {
  background-color: rgba(80, 195, 0, 0.85);
}

.servicesNav a {
  background-color: #0071D2;
  background-color: rgba(0, 113, 210, 0.5);
  background-image: url("../images/services.png");
  border-bottom: solid 0.25em #0071D2;
}

.servicesNav a:hover {
  background-color: rgba(0, 113, 210, 0.85);
}

.contactUsNav a {
  background-color: #663398;
  background-color: rgba(102, 51, 152, 0.5);
  background-image: url("../images/contact.png");
  border-bottom: solid 0.25em #663398;
}

.contactUsNav a:hover {
  background-color: rgba(102, 51, 152, 0.85);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5em;
  padding: 0 0 0 5%;
  background-color: #004886;
  border-bottom: solid 0.3em #004886;
  z-index: 9000;
}
header p {
  display: none;
}
@media screen and (min-width: 40.5rem) {
  header p {
    display: block;
    margin: 0;
    padding: 0 3em 0 0;
    color: #FFF;
    font-weight: 700;
    font-size: 0.9rem;
    font-style: italic;
  }
}
header nav {
  display: block;
  position: absolute;
  top: 5em;
  left: 0;
  width: 100%;
  margin-top: 1.25em;
  font-size: 0.8em;
}
@media screen and (min-width: 29.375rem) {
  header nav {
    font-size: 1rem;
    margin-top: 0;
  }
}
@media screen and (min-width: 48.75em) {
  header nav {
    position: relative;
    float: right;
    top: 0;
    left: auto;
    width: auto;
    height: auto;
    overflow: visible;
  }
}
header nav li {
  float: left;
  width: 25%;
}
@media screen and (min-width: 48.75em) {
  header nav li {
    float: left;
    width: auto;
  }
  header nav li.aboutUsCurrent {
    background-color: #FF8500;
  }
  header nav li.productsCurrent {
    background-color: #50c300;
  }
  header nav li.servicesCurrent {
    background-color: #0071d2;
  }
  header nav li.contactCurrent {
    background-color: #663398;
  }
}
header nav li a {
  display: block;
  padding: 1.5em 1em;
  color: #FFF;
  text-align: center;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.8);
}
@media screen and (min-width: 48.75em) {
  header nav li a {
    padding: 0 2em;
    line-height: 5em;
    text-align: left;
    background: none;
  }
}

.caitLogo {
  display: block;
  width: 6.1875rem;
  height: 2.125rem;
  background: url("../images/cait_logo_no_cube.png") no-repeat;
}
@media screen and (min-width: 40.5rem) {
  .caitLogo {
    width: 10.875rem;
    height: 5.8125rem;
    margin-top: 4rem;
    background: url("../images/cait-logo-larger-100perc.png") no-repeat;
  }
}

.hamburgerMenu {
  display: block;
  height: 100%;
}
.hamburgerMenu button {
  height: 100%;
  padding: 0 2rem;
  border: none;
  font-family: "Figtree", serif;
  font-size: 1rem;
  color: #FFF;
  background: url("../images/hamburger-menu-white.png") 0 50% no-repeat;
}
@media screen and (min-width: 48.75rem) {
  .hamburgerMenu {
    display: none;
  }
}

#hamburgerHide {
  height: 0;
  overflow: hidden;
}
#hamburgerHide.hamburgerClick {
  height: auto;
  overflow: visible;
}
@media screen and (min-width: 48.75rem) {
  #hamburgerHide {
    height: 100%;
    overflow: visible;
  }
}

a.headerNavAboutUs:hover {
  background-color: #FF8500;
}

a.headerNavProducts:hover {
  background-color: #50c300;
}

a.headerNavServices:hover {
  background-color: #0071d2;
}

a.headerNavContactUs:hover {
  background-color: #663398;
}

.headerBorderAboutUs {
  border-bottom: solid 0.3em #ff8500;
}

.headerBorderProducts {
  border-bottom: solid 0.3em #50c300;
}

.headerBorderServices {
  border-bottom: solid 0.3em #0071d2;
}

.headerBorderContactUs {
  border-bottom: solid 0.3em #663398;
}

.navCurrent a {
  background-image: url("../images/section_indicator_arrow.png");
  background-repeat: no-repeat;
  background-position: 50% 100%;
}

/* Footer */
footer {
  display: block;
  width: 100%;
  background: #FFF;
}
footer .whiteBackground article {
  padding: 0 2rem 4rem 2rem;
}
footer .whiteBackground article.fromGrey {
  padding: 4rem 2rem;
}
footer .flex-columns {
  margin: 0;
  text-align: center;
}
@media screen and (min-width: 40.5rem) {
  footer .flex-columns {
    text-align: left;
  }
}
footer .flex-columns .flex-item {
  font-size: 1rem;
}
footer .flex-columns .flex-item p {
  padding-left: 0;
  margin: 0 0 1rem 0;
  line-height: 1.25rem;
}
@media screen and (min-width: 40.5rem) {
  footer .flex-columns .flex-item p {
    padding-left: 3rem;
    margin: 0;
  }
}
footer .flex-columns .flex-item img {
  float: none;
  display: block;
  margin: 0 auto;
  padding-bottom: 1rem;
}
@media screen and (min-width: 40.5rem) {
  footer .flex-columns .flex-item img {
    float: left;
  }
}
footer .flex-columns .flex-item a {
  color: #FF7E00;
  text-decoration: none;
}

@media only screen and (orientation: landscape) and (max-width: 40.5em) {
  .bodyMainPage {
    background-size: auto;
  }
}
@media screen and (max-width: 64.875em) {
  .profilePic {
    float: right;
    width: 12.5em;
    height: 18.75em;
  }
  .profileText {
    float: none;
    width: 100%;
  }
}
@media screen and (max-width: 64em) {
  /* Section 1 */
  .smallerFont {
    font-size: 0.652173913em;
  }
  /* Front Navigation */
  .aboutUsNav a, .productsNav a, .servicesNav a, .contactUsNav a {
    border-bottom: none;
  }
  /* List Grid */
  .listGrid li {
    float: none;
    width: 80%;
    margin: 0 auto;
  }
  .listGrid li:nth-child(odd) {
    border-right: none;
  }
  .listGrid li:nth-child(n+5) {
    border-bottom: solid 0.1em #7EC3FF;
  }
  /* Fonts */
  .columnHeader {
    width: 100%;
  }
  /* Columns */
  .columnBottomAboutUs {
    width: 100%;
    padding-bottom: 0;
    border-bottom: none;
  }
  .columnLeftBorderAboutUs {
    width: 100%;
    border-left: none;
  }
  /* Product List */
  .productsList {
    width: 80%;
  }
}
@media screen and (max-width: 48.75em) {
  .bodyMainPage {
    background-position: 60% 5em;
  }
}
@media screen and (max-width: 40.5em) {
  .bodyMainPage {
    background-position: 0 0;
    background-size: auto;
  }
  /* Front Navigation */
  .aboutUsNav a {
    border-left: solid 0.3125em #E18000;
  }
  .productsNav a {
    border-left: solid 0.3125em #50C300;
  }
  .servicesNav a {
    border-left: solid 0.3125em #0071D2;
  }
  .contactUsNav a {
    border-left: solid 0.3125em #663398;
  }
  /* Columns */
  .column {
    float: none;
    width: 100%;
    min-height: 1.5em;
    margin: 1.5em 0;
    padding: 0 5%;
    font-size: 1.2em;
    line-height: 1.5em;
  }
  .columnBorder, .columnBorderAboutUs, .columnBorderProducts, .columnBorderServices, .columnBorderContactUs {
    border-right: none;
  }
  .columnLeftBorderProducts, .columnLeftBorderServices {
    border-left: none;
  }
  .column p {
    margin: 0 0 1em 0;
    padding: 0;
  }
  .column p:last-child {
    margin: 0;
  }
  .columnThird {
    float: none;
    width: 100%;
    padding: 0 5%;
    text-align: center;
  }
  .emptyBorder {
    float: none;
    width: 33.3333%;
    margin: 2em auto 0 auto;
    border-right: none;
    border-top: solid 0.1em #50C300;
  }
  /* Profile */
  .profilePic {
    float: none;
    width: 100%;
    height: 12.5em;
    margin: 0;
  }
  /* Client List */
  .globalList li a {
    width: 100%;
  }
  .globalListSectionActive {
    position: relative;
    left: 0;
    width: 100%;
  }
  /* Section 1 */
  .smallerFont {
    font-size: 0.6666666667em;
    text-shadow: none;
  }
  /* List Grid */
  .listGrid li {
    background-position: 50% 2em;
    padding: 7em 1em 2em 1em;
    text-align: center;
  }
}

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