@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap");
@font-face {
  font-family: 'School Solutions';
  src: url("../fonts/SchoolSolutions.eot");
  src: url("../fonts/SchoolSolutions.eot?#iefix") format("embedded-opentype"), url("../fonts/SchoolSolutions.woff2") format("woff2"), url("../fonts/SchoolSolutions.woff") format("woff"), url("../fonts/SchoolSolutions.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }
.max {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box; }
  @media screen and (max-width: 400px) {
    .max {
      padding: 0 30px; } }

.max2 {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box; }
  @media screen and (max-width: 400px) {
    .max2 {
      padding: 0 30px; } }

body, body * {
  transition: all .3s ease;
  -o-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -webkit-transition: all .3s ease; }

.noAnimate {
  transition: none .01s linear;
  -o-transition: none .01s linear;
  -moz-transition: none .01s linear;
  -webkit-transition: none .01s linear; }

.btn {
  background: #ffb722;
  font-family: "School Solutions", "Roboto", serif;
  font-size: 100%;
  padding: 8px 24px;
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  border: none;
  cursor: pointer; }
  .btn:hover {
    background: #374678;
    color: #ffffff;
    transform: scale(1.1); }

/*GENERAL ***************/
p {
  padding: .9em 0px;
  margin: 0px;
  line-height: 170%; }

ul, ol {
  margin: 0px;
  padding: 9px 0 9px 35px; }

hr {
  border: none;
  border-bottom: 1px solid #ededed;
  margin: 20px 0; }

a {
  color: #374678;
  text-decoration: underline; }
  a:hover {
    color: #292929;
    text-decoration: none; }

img {
  border: none;
  max-width: 100%;
  height: auto; }

.rightimg {
  float: right;
  margin: 20px 0 20px 40px;
  position: relative;
  display: block;
  max-width: 50%; }

.leftimg {
  float: left;
  margin: 20px 40px 20px 0;
  position: relative;
  display: block;
  max-width: 50%; }

@media screen and (max-width: 740px) {
  .rightimg, .leftimg {
    float: none;
    display: block;
    margin: 40px auto;
    max-width: 100%; } }
@media screen and (max-width: 540px) {
  .rightimg, .leftimg {
    height: auto !important;
    width: 400px;
    max-width: 90%; } }
h1, h2 {
  font-weight: normal;
  font-size: 72px;
  color: #374678;
  line-height: 120%;
  padding: 0;
  margin: 10px 0;
  font-family: "School Solutions", "Roboto", serif; }
  @media screen and (max-width: 700px) {
    h1, h2 {
      font-size: 60px; } }

h3 {
  font-size: 30px;
  line-height: 140%;
  padding: 0;
  margin: 20px 0 0;
  color: #374678;
  font-weight: 900; }

h4 {
  font-size: 20px;
  line-height: 180%;
  padding: 0;
  margin: 10px 0;
  color: #292929;
  font-weight: normal; }

/*BODY ***************/
html {
  overflow-x: hidden; }

body {
  margin: 0px;
  font-family: "Roboto", serif;
  font-size: 17px;
  background: #ffffff;
  color: #292929;
  padding: 0;
  -webkit-text-size-adjust: none;
  overflow: auto;
  overflow-x: hidden;
  min-width: 350px;
  height: auto;
  background: url("../images/school-solutions-students.webp") no-repeat top center;
  background-size: contain; }
  @media screen and (max-width: 550px) {
    body {
      font-size: 16px; } }

.black, .blue, .gold {
  background: #292929;
  color: #ffffff; }
  .black h1, .black .h1, .black h3, .blue h1, .blue .h1, .blue h3, .gold h1, .gold .h1, .gold h3 {
    color: #ffffff; }
  .black h2, .black h3 strong, .blue h2, .blue h3 strong, .gold h2, .gold h3 strong {
    color: #ffffff; }
  .black a, .blue a, .gold a {
    color: #ffffff; }
    .black a:hover, .blue a:hover, .gold a:hover {
      color: #ffb722; }

.blue {
  background: #374678; }

.gold {
  background: #ffb722; }

body > section {
  padding: 0; }
  body > section h1, body > section h2, body > section h3, body > section h4, body > section p, body > section ul, body > section ol {
    max-width: 800px; }
  body > section .textCenter h1, body > section .textCenter h2, body > section .textCenter h3, body > section .textCenter h4, body > section .textCenter p, body > section .textCenter ul, body > section .textCenter ol {
    text-align: center;
    margin-right: auto;
    margin-left: auto; }
  body > section > .flex {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 30px; }
    body > section > .flex.center {
      justify-content: center;
      align-items: center; }
    body > section > .flex > * {
      padding-top: 90px;
      padding-bottom: 90px; }
  body > section .max:not(.flex) {
    padding-top: 90px;
    padding-bottom: 90px; }

/*HEADER ***************/
header {
  display: flex;
  align-items: center; }
  header div {
    flex-basis: 50%;
    background: #374678;
    padding: 0;
    border-radius: 0 10px 10px 0;
    margin: 15px 0;
    text-align: right; }
    header div img {
      max-width: 100%;
      max-height: 140px;
      margin: -10px 0 0;
      display: inline-block;
      padding: 0 17px 12px 17px; }
  header nav {
    background: #ffb722;
    flex-basis: 50%; }
    header nav ul {
      display: block;
      list-style: none;
      margin: 0;
      padding: 0; }
      header nav ul li {
        display: inline-block; }
        header nav ul li a {
          display: block;
          font-family: "School Solutions", "Roboto", serif;
          text-decoration: none;
          font-size: 30px;
          color: #ffffff;
          padding: 15px 20px; }
          header nav ul li a:hover {
            color: #374678; }
  @media screen and (max-width: 1000px) {
    header div {
      flex-basis: 240px; }
    header nav {
      flex-grow: 1; }
      header nav ul li a {
        font-size: 24px; } }
  @media screen and (max-width: 700px) {
    header {
      margin-bottom: -60px; }
      header nav ul {
        text-align: right; }
        header nav ul li {
          display: none; }
          header nav ul li:last-child {
            display: inline-block; } }

/*FOOTER ***************/
footer .max {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 15px;
  padding-bottom: 15px; }
  footer .max img {
    max-width: 60px; }
  footer .max h3 {
    margin: 0;
    text-align: right; }
    @media screen and (max-width: 480px) {
      footer .max h3 {
        font-size: 22px; } }
  footer .max p {
    padding: 0; }
    @media screen and (max-width: 580px) {
      footer .max p {
        font-size: 15px;
        text-align: center;
        flex-grow: 1; } }

/*CONTENT******************/
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: none;
  gap: 30px;
  margin: 60px 0 0;
  padding: 0; }
  @media screen and (max-width: 1600px) {
    .cards {
      grid-template-columns: repeat(2, 1fr);
      max-width: 800px; } }
  @media screen and (max-width: 900px) {
    .cards {
      grid-template-columns: repeat(1, 1fr);
      max-width: 500px; } }
  @media screen and (max-width: 550px) {
    .cards {
      margin-left: -15px !important;
      margin-right: -15px !important; } }
  .cards li {
    display: block;
    margin: 0;
    padding: 0;
    background: #ffffff; }
    .cards li > * {
      padding: 30px; }
    .cards li > h3 {
      background: #ffb722;
      color: #ffffff;
      display: block;
      margin: 0;
      padding: 35px 30px 5px; }
    @media screen and (max-width: 550px) {
      .cards li > *, .cards li > h3 {
        padding-left: 15px;
        padding-right: 15px; } }

#about .flex {
  align-items: flex-end; }
  @media screen and (max-width: 1000px) {
    #about .flex {
      flex-direction: column;
      align-items: center; }
      #about .flex > *:first-child {
        padding-bottom: 0; }
        #about .flex > *:first-child + * {
          padding-top: 0; } }

.bgLeft {
  background: none;
  margin: -90px 0 0;
  transform: translateY(-30px); }
  .bgLeft > span {
    display: inline-block;
    position: relative;
    padding: 60px 60px 0 0; }
    @media screen and (max-width: 400px) {
      .bgLeft > span {
        padding-right: 30px; } }
    .bgLeft > span:before {
      content: '';
      position: absolute;
      top: 0;
      right: 100%;
      width: 50vw;
      bottom: 0; }
  .bgLeft.gold > span {
    background: #ffb722; }
    .bgLeft.gold > span:before {
      background: #ffb722; }
  .bgLeft.blue > span {
    background: #374678; }
    .bgLeft.blue > span:before {
      background: #374678; }
  .bgLeft.black > span {
    background: #292929; }
    .bgLeft.black > span:before {
      background: #292929; }
  .bgLeft.white > span {
    background: #ffffff; }
    .bgLeft.white > span:before {
      background: #ffffff; }

.steve h3 {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-weight: normal;
  margin: 0 12% 0 50px;
  padding: 30px;
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 550px) {
    .steve h3 {
      margin: 0;
      font-size: 22px; } }
  @media screen and (max-width: 400px) {
    .steve h3 {
      font-size: 19px;
      padding: 20px; } }
  .steve h3 strong {
    display: block;
    text-align: right;
    box-sizing: border-box;
    font-size: 80%;
    padding: 20px 40% 0 0; }
    .steve h3 strong em {
      font-weight: normal; }
  .steve h3:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    padding: 0;
    border: 20px solid transparent;
    border-top: 20px solid rgba(255, 255, 255, 0.2);
    border-right: 20px solid rgba(255, 255, 255, 0.2);
    top: 100%;
    right: 40%;
    position: absolute; }
.steve img {
  margin: -90px 0 -90px auto;
  display: block;
  position: relative;
  z-index: 2; }
  @media screen and (max-width: 550px) {
    .steve img {
      transform: translateX(40px);
      margin-top: -60px; } }

.testimonials {
  flex-grow: 1;
  max-width: 480px;
  box-sizing: border-box; }
  @media screen and (max-width: 1000px) {
    .testimonials {
      max-width: 40%; } }
  .testimonials > * {
    padding-right: 30px;
    padding-left: 30px; }
  .testimonials > div.mask {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    position: relative; }
    .testimonials > div.mask ul {
      padding: 0;
      color: #292929;
      list-style: none; }
      .testimonials > div.mask ul li {
        line-height: 170%;
        padding: 30px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.5);
        box-sizing: border-box; }
        .testimonials > div.mask ul li .flex {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-top: 20px;
          gap: 20px; }
          .testimonials > div.mask ul li .flex strong {
            font-size: 20px;
            text-align: right;
            line-height: 120%; }
            .testimonials > div.mask ul li .flex strong em {
              font-weight: normal;
              font-size: 17px;
              display: block; }
          .testimonials > div.mask ul li .flex img {
            border-radius: 100%;
            display: block; }
    .testimonials > div.mask > ul {
      width: 9999px;
      max-width: none;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      align-content: flex-start; }
      .testimonials > div.mask > ul > li {
        width: 480px;
        flex-grow: 0;
        flex-shrink: 0; }
  .testimonials > .nav ul {
    list-style: none;
    margin: 0;
    padding: 20px 0 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; }
    .testimonials > .nav ul li {
      margin: 0;
      padding: 0;
      display: inline-block; }
      .testimonials > .nav ul li a {
        border-radius: 100%;
        display: block;
        width: 20px;
        height: 20px;
        background: #ffffff;
        border: 5px solid #ffb722;
        box-sizing: border-box;
        text-indent: -9999px;
        overflow: hidden; }
      .testimonials > .nav ul li.active a, .testimonials > .nav ul li:hover a {
        border-width: 0px; }

.cog-abuse, .cog-branding, .cog-header {
  display: none !important; }

form .cog-label {
  color: #374678 !important;
  font-size: 17px !important; }
form input, form textarea {
  background: #ededed !important;
  border: none !important;
  font-size: 24px !important;
  color: #292929;
  padding: 8px 12px; }
form textarea {
  min-height: 140px !important; }
form .is-error .cog-label {
  color: var(--negative) !important; }
form .is-error input, form .is-error textarea {
  background: #ffffff !important; }
form .cog-button {
  background: #ffb722 !important;
  font-family: "School Solutions", "Roboto", serif !important;
  font-size: 30px !important;
  padding: 8px 24px !important;
  display: inline-block !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important; }
  form .cog-button:hover {
    background: #374678 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important; }

.call {
  font-weight: normal;
  font-size: 24px; }
  @media screen and (min-width: 900px) {
    .call {
      position: absolute;
      bottom: 97px;
      left: 220px; } }
  .call a {
    font-weight: 900;
    text-decoration: none; }

@media screen and (max-width: 750px) {
  #contact > .flex {
    flex-direction: column;
    align-items: center; }
    #contact > .flex > *:first-child {
      padding-bottom: 0; }
      #contact > .flex > *:first-child + * {
        padding-top: 0; }
    #contact > .flex .testimonials {
      max-width: 100%; } }