@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&family=Rubik:wght@400;500;600;700;800&display=swap');
/* fonts
font-family: 'Manrope', sans-serif;
font-family: 'Rubik', sans-serif;
*/

/* structure */
* { padding: 0 0; margin: 0 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #fff; color: #232F49; font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.7; }

/* tags */
a { text-decoration: none; color: inherit; transition: .2s ease; }
h1, h2, h3, h4, h5, h6 { font-family: 'Rubik', sans-serif; font-weight: 500; line-height: 1.2; }
:focus { outline: none; }

.script { width: 100%; float: left; margin-bottom: 10vh; }

.center {
  margin-left: auto;
  margin-right: auto;
}

/* layouts */
.white, .grey, .dark { width: 100%; float: left; padding: 2rem 0; }
.white { background: #fff; }
.grey { background: #f4f4f4; }
.dark { background: #232F49; color: #fff; }

.top-pad { padding-top: 7rem; }

.wrapper { max-width: 1350px; text-align: center; margin: 0 auto; }
.hold { width: 100%; float: left; text-align: left; }

/* fixed nav */
.top { width: 100%; float: left; position: fixed; top: 0; left: 0; padding: 1.56rem 0; background: transparent; z-index: 9999 !important; transition: .2s ease; }
.top .logo { float: left; }
.top .logo img { width: 5.25rem; float: left; }
.top .nav { float: right; line-height: 1; position: relative; top: .4rem; transition: .2s ease; }
.top .nav ul { list-style: none; }
.top .nav li { float: left; }
.top .nav li a { color: #000; font-size: 1.3rem; margin-left: 1.875rem; }
.top .nav li a.cursor { cursor: pointer; }
.top .nav li a .arrow { transform: rotate(90deg); position: relative; display: inline-block; margin-left: .5rem; transition: .3s ease; }
.top .nav li a:hover { color: #F3A868; }

/* fixed nav two */
.top-two { width: 100%; float: left; position: fixed; top: 0; left: 0; padding: 1.56rem 0; z-index: 9999 !important; transition: .2s ease; background: #232F49; }
.top-two .logo { float: left; }
.top-two .logo img { width: 5.25rem; float: left; }
.top-two .nav { float: right; line-height: 1; position: relative; top: .4rem; transition: .2s ease; }
.top-two .nav ul { list-style: none; }
.top-two .nav li { float: left; }
.top-two .nav li a { color: #fff; font-size: 1.3rem; margin-left: 1.875rem; }
.top-two .nav li a.cursor { cursor: pointer; }
.top-two .nav li a .arrow { transform: rotate(90deg); position: relative; display: inline-block; margin-left: .5rem; transition: .3s ease; }
.top-two .nav li a:hover { color: #F3A868; }

/* dropdown */
.subDrop { transition: .2s ease; }
#subjects { display: none; width: 100%; position: fixed; top: 0; left: 0; padding: 8rem 0 3rem; background: #232F49; z-index: 9998 !important; color: #fff; box-shadow: 0px 2px 20px rgba(0,0,0,0.5); animation: menu 1s forwards ease; }
#subjects .itm { width: 21.25%; float: left; margin-right: 5%; }
#subjects .end { margin-right: 0; }
#subjects .itm h5 { font-size: 1.75rem; margin-bottom: 1rem; }
#subjects .itm ul { list-style: none; }
#subjects .itm li { width: 100%; float: left; margin-bottom: 1rem; }
#subjects .itm li a { font-size: 1.2rem; }
#subjects .itm li a:hover { color: #F3A868; }
#subjects .itm li a svg { width: 30px; height: 30px; float: left; position: relative; top: .15rem; margin-right: 1rem; fill: #fff; transition: .2s ease; }
#subjects .itm li a:hover svg { fill: #F3A868; transform: scale(1.1) rotate(5deg); }
#subjects .listone { animation: lists 1.5s forwards ease; position: relative; top: 0; }
#subjects .listtwo { animation: lists 1.75s forwards ease; position: relative; top: 0; }
#subjects .listthree { animation: lists 2s forwards ease; position: relative; top: 0; }
#subjects .listfour { animation: lists 2.25s forwards ease; position: relative; top: 0; }
@keyframes menu {
	from { opacity: 0; top: -20rem; }
	to { opacity: 1; top: 0; }
}
@keyframes lists {
	0% { opacity: 0; position: relative; top: -3rem; }
	45% { opacity: 0; position: relative; top: -3rem; }
	100% { opacity: 1; position: relative; top: 0; }
}

/* home header */
.header { width: 100%; float: left; background: #232F49; height: 85vh; color: #fff; z-index: 0; }
.header .heading { width: 45%; float: left; }
.header .heading h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 1.875rem; }
.header .heading p { font-size: 1.3rem; font-weight: 400; margin-bottom: 2.5rem; }
.header .heading a { font-size: 1.3rem; font-weight: 500; padding: 1rem 1.4rem; background: #F3A868; color: #fff; display: block; float: left; line-height: 1; border-radius: .6rem; }
.header .heading a:hover { background: #E97F83; }
.header .heading a .arrow { margin-left: 1rem; position: relative; left: -.25rem; transition: .2s ease; }
.header .heading a:hover .arrow { left: 0; }
.banner { width: 50%; float: left; position: absolute; top: 0; right: 0; height: 85vh; z-index: 1; background: no-repeat, url('/images/websiteImages/banner.jpg') no-repeat center center; background-position: bottom 1.25rem left 1.25rem, center; background-size: auto, cover; }

.keystages { width: 100%; float: left; }
.keystages h2 { font-size: 2.5rem; line-height: 1.2; margin-bottom: 4rem; text-align: center; }
.keystages .itm { width: 45%; float: left; margin-right: 5%; }
.keystages .end { margin-right: 0; }
.keystages .itm img { width: 100px; height: 100px; margin-bottom: 1.9rem; }
.keystages .itm h3 { font-size: 2rem; line-height: 1.2; margin-bottom: 1.25rem; }
.keystages .itm p { font-size: 1.25rem; margin-bottom: 1.6rem; }
.keystages .itm a { font-family: 'Rubik', sans-serif; font-size: 1.25rem; font-weight: 500; color: #F3A868; }
.keystages .itm a:hover { color: #E97F83; }
.keystages .itm a .arrow { margin-left: .5rem; position: relative; left: -.25rem; transition: .2s ease; }
.keystages .itm a:hover .arrow { left: 0; }

/* online tutoring page */
.onlineTutoring { width: 100%; float: left; }
.onlineTutoring h1 { font-size: 3.5rem; text-align: center; margin-bottom: 8vh; width: 90%; margin-left: 5%; margin-right: 5%; }
/* for the three sections */
.onlineTutoring .split-three { width: 100%; float: left; display: flex; }
.onlineTutoring .split-three .itm { width: 30%; float: left; margin-right: 5%; }
.onlineTutoring .split-three .end { margin-right: 0; }
.onlineTutoring .split-three .itm img { height: 100px; margin-bottom: 1rem; }
.onlineTutoring .split-three .itm h2 { font-size: 2rem; line-height: 1.2; margin-bottom: 1.25rem; }
.onlineTutoring .split-three .itm p { font-size: 1.25rem; margin-bottom: 1.6rem; }
/* fot the video-like zoom call come ins */
.onlineTutoring .videoMimic { width: 100%; float: left; }
.onlineTutoring .videoMimic .topMimic { width: 100%; float: left; }
.onlineTutoring .videoMimic .topMimic .left { float: left; position: relative; top: 1.3rem; z-index: 0; }
.onlineTutoring .videoMimic .topMimic .right { float: right; position: relative; z-index: 2; text-align: right; }
.onlineTutoring .videoMimic .topMimic .right .img {  }
.onlineTutoring .videoMimic .topMimic .right .txt { position: relative; transform: translateY(-55%); left: -3%; }
.onlineTutoring .videoMimic .middleMimic { width: 100%; float: left; margin-top: -24%; text-align: center; position: relative; z-index: 1; }
.onlineTutoring .videoMimic .middleMimic .txt { position: relative; transform: translateX(-3%) translateY(55%); z-index: 3; }
.onlineTutoring .videoMimic .middleMimic .img {  }
.onlineTutoring .videoMimic .bottomMimic { width: 100%; float: left; }
.onlineTutoring .videoMimic .bottomMimic .left { float: left; margin-top: -15%; position: relative; text-align: right; left: 2%; z-index: 4; }
.onlineTutoring .videoMimic .bottomMimic .left .txt { position: relative; transform: translateY(-123%); left: 25%; }
.onlineTutoring .videoMimic .bottomMimic .right { float: right; margin-top: -10%; position: relative; left: -5%; z-index: 0; }
.onlineTutoring .videoMimic img { border-radius: 10px; box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.3); width: auto; max-width: 100%; }
.onlineTutoring .videoMimic img.icon { border: 2px solid #fff; border-radius: 50%; box-shadow: 0px 5px 10px -3px rgba(0,0,0,0.3); }
.onlineTutoring .videoMimic .textMessage { width: auto; display: inline; margin-left: .5rem; padding: .8rem 1.1rem; color: #232F49; background: linear-gradient(to bottom right, #F4F4F4, #eee); font-size: 1.18rem; position: relative; top: -1.8rem; border-radius: 7px; box-shadow: 0px 4px 8px -2px rgba(0,0,0,0.2); }
.onlineTutoring .videoMimic .orange { background: #F3A868; color: #fff; }

/* full width with a 50% background to the side that sticks */
.fullwidthstick { width: 100%; float: left; }
.fullwidthstick .img { width: 50%; float: left; height: 100vh; position: sticky; top: 0; }
.fullwidthstick .img img { width: 100%; height: 100%; object-fit: cover; }
.fullwidthstick .right { float: right; }
.fullwidthstick .txt { width: 50%; float: left; padding: 12.5vh 10vw; background: #fff; }
.fullwidthstick .txt h3 { font-size: 1.8rem; margin-bottom: 2.4rem; }
.fullwidthstick .txt p { font-size: 1.4rem; font-weight: 500; margin-bottom: 1.7rem; }
.fullwidthstick .txt ul { width: 100%; float: left; padding-left: 10%; position: relative; z-index: 1; pointer-events: auto; }
.fullwidthstick .txt li { font-size: 1.4rem; font-weight: 500; margin-bottom: 1.7rem; }
.fullwidthstick .txt .gap { width: 100%; float: left; height: 7vh; }
.fullwidthstick .txt span.attr { position: relative; }
.fullwidthstick .txt span.attr:hover:before { opacity: 1; top: 40px; }
.fullwidthstick .txt span.attr:before { content: attr(aria-label); opacity: 0; pointer-events: none; position: absolute; top: 75px; left: 0; font-size: .9rem; color: #fff; background: #232F49; border-radius: 5px; padding: 1rem; width: 185px; transition: .3s ease; }
.fullwidthstick .txt .material-icons { font-size: 1.1rem; vertical-align: text-top; }

/* plain text pages (terms, privacy, thanks, testimonials, blog) */
.boring { width: 100%; float: left; }
.boring h1 { font-size: 2.5rem; margin-bottom: 3.125rem; }
.boring ul { padding-left: 5%; }
.boring li { font-size: 1.3rem; width: 100%; margin-bottom: 1.25rem; }
.boring li a { text-decoration: underline; }
.boring li a:hover { color: #F3A868; }
.boring p { font-size: 1.3rem; margin-bottom: 1.25rem; }

/* contact page form styling */
.contact { width: 100%; float: left; }
.contact h1 { font-size: 3.5rem; text-align: center; margin-bottom: 10vh; width: 55%; margin-left: 22.5%; margin-right: 22.5%; }
.contactPageForm { width: 100%; float: left; }
.contactPageForm .form { width: 50%; float: right; }
.contactPageForm .formSections { width: 100%; float: left;}
.contactPageForm .formSections .input-group { width: 45%; float: left; margin-bottom: 2.5rem; margin-right: 10%; }
.contactPageForm .formSections .end { margin-right: 0; }
.contactPageForm .formSections .full { width: 100%; margin-right: 0; margin-top: 2rem; }
.contactPageForm .formSections .input-group label, .contactPageForm .formSections .radioOptions p { width: 100%; float: left; text-transform: uppercase; font-size: 1rem; margin-bottom: 1rem; color: #777; font-weight: 600; }
.contactPageForm .formSections .input-group input, .contactPageForm .formSections textarea { width: 100%; float: left; border: 1px solid #999; background: transparent; color: #232F49; font-family: 'Manrope', sans-serif; font-size: 1.25rem; border-radius: .5rem; padding: 1rem; transition: .2s ease; }
.contactPageForm .formSections textarea { height: 30vh; }
.contactPageForm .formSections .input-group input:focus, .contactPageForm .formSections textarea:focus { background: rgba(255,255,255,0.1); border: 1px solid #232F49; outline: none; }
.contactPageForm .formSections .radioOptions { width: 100%; float: left; }
.contactPageForm .formSections .radioOptions p { margin-top: 2rem; }
.contactPageForm .formSections .radioOptions .input-hidden { position: absolute; left: -9999px; }
.contactPageForm .formSections .radioOptions .radioHold { float: left; width: 29%; margin-right: 5%; margin-bottom: 2.5rem; }
.contactPageForm .formSections .radioOptions .end { margin-right: 0; }
.contactPageForm .formSections .radioOptions input[type=radio]:checked + label>svg { border: 1px solid #232F49; background: rgba(35,47,73,0.2); }
.contactPageForm .formSections .radioOptions input[type=radio]:checked + label>p { color: #232F49; }
/* Stuff after this is only to make things more pretty */
.contactPageForm .formSections .radioOptions input[type=radio] + label>svg { border: 1px solid #777; padding: 25%; width: 100%; height: 100%; transition: 500ms all; border-radius: 7px; float: left; fill: #777; }
.contactPageForm .formSections .radioOptions input[type=radio]:checked + label>svg { fill: #232F49; }
.contactPageForm .formSections .radioOptions input[type=radio] + label>p { text-align: center; margin-top: 7px; font-size: 1.125rem; width: 100%; color: #777; float: left; font-weight: 600; }
.contactPageForm .formSections .g-recaptcha { width: 100%; float: left; margin-bottom: 2.5rem; }
.contactPageForm .formSections button { cursor: pointer; float: left; border: 0px solid transparent; color: #ccc; display: inline-block; padding: 20px 40px; border-radius: 5rem; font-size: 1.25rem; text-decoration: none; background: linear-gradient(to bottom right, #f3a868 50%, #232F49 50%); background-position: bottom right; transition: .4s ease; background-size: 200% 200%; }
.contactPageForm .formSections button:hover,.contactPageForm .formSections button:focus { background-position: top left; }
.contactPageForm .formSections button img { display: inline; position: relative; top: 1px; margin-left: 12px; width: 1rem; height: 1rem; }
.contactPageForm .contactInfo { width: 35%; float: left; position: sticky; top: 10rem; }
.contactPageForm .contactInfo h3 { font-size: 1.875rem; font-weight: 600; margin-bottom: 2.5rem; }
.contactPageForm .contactInfo p { font-size: 1.25rem; font-weight: 500; margin-bottom: 1.275rem; line-height: 1.6; }
.contactPageForm .contactInfo p img { display: inline; margin-right: .75rem; width: 2rem; height: 2rem; position: relative; top: 9px; padding: .5rem; background: #232F49; border-radius: 50%; }
.contactPageForm .contactInfo p a:hover { text-decoration: underline; }
.contactPageForm .formSections .input-top p.status-msg { width: 100%; float: left; padding: 1rem 1.5rem; background: #333; border-radius: .5rem; font-size: 1.2rem; }

/* footer */
.footer { width: 100%; float: left; }
.footer .navigation { width: 100%; float: left; margin-bottom: 5.5rem; }
.footer .navigation .itm { width: 30%; float: left; margin-right: 5%; }
.footer .navigation .end { margin-right: 0; }
.footer .navigation .itm h6 { font-size: 1.6rem; line-height: 1; margin-bottom: 2.5rem; }
.footer .navigation .itm ul { list-style: none; }
.footer .navigation .itm li { width: 100%; float: left; margin-bottom: 1rem; font-size: 1.25rem; }
.footer .navigation .itm li a:hover { text-decoration: underline; }
.footer .navigation .itm li svg { width: 20px; height: 20px; float: left; position: relative; top: .5rem; margin-right: 1rem; fill: #fff; }
.footer .copy { width: 100%; float: left; opacity: .8; font-size: 1.1rem; }
.footer .copy .left { float: left; }
.footer .copy .right { float: right; }
.footer .copy a { margin-left: 1.3rem; }
.footer .copy a:hover { text-decoration: underline; }

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 16px;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.reveal-if-active label {
  display: block;
  margin: 0 0 3px 0;
}
.reveal-if-active input[type=text] {
  width: 100%;
}
input[type="radio"]:checked ~ .reveal-if-active, input[type="checkbox"]:checked ~ .reveal-if-active {
  opacity: 1;
  max-height: 100px;
  padding: 10px 20px;
  -webkit-transform: scale(1);
          transform: scale(1);
  overflow: visible;
}

/* mouse */
#mouse { position:absolute; width: 66px; height: 66px; border: 2px solid #fff; pointer-events: none; border-radius: 50%; mix-blend-mode: difference; transition: .15s ease; z-index: 99999999 !important; }
.hovered { background: #fff; animation: .25s hovered forwards ease; transform: scale(1.2); }
@keyframes hovered { 
	from { background: transparent; transform: scale(1); }
	to { background: #fff;  transform: scale(1.2); }
}

/* animations */

.animatable { /* initially hide animatable objects */ visibility: hidden; /* initially pause animatable objects their animations */   animation-play-state: paused;  }
/* show objects being animated */
.animated { visibility: visible; animation-fill-mode: both; animation-duration: 1s; animation-play-state: running; }

@keyframes fade { 
	0% { opacity: 0; top: 5rem; }
	40% { opacity: 0; top: 5rem; }
	100% { opacity: 1; top: 0; }
}
.animated.fade { animation: fade 1s ease; position: relative; top: 0; }
.animated.fade2 { animation: fade 1.25s ease; position: relative; top: 0; }
.animated.fade3 { animation: fade 1.5s ease; position: relative; top: 0; }


@keyframes fadeone { 
	from { opacity: 0; transform: scale(.8); top: 2rem; }
	to { opacity: 1; transform: scale(1); top: 0; }
}
.animated.fadeone { animation: fadeone .75s ease forwards; }

@keyframes fadetwo { 
	0% { opacity: 0; transform: scale(.8); top: 3.3rem; }
	33% { opacity: 0; transform: scale(.8); top: 3.3rem; }
	100% { opacity: 1; transform: scale(1); top: 1.3rem; }
}
.animated.fadetwo { animation: fadetwo 1.25s ease forwards; }

@keyframes fadethree { 
	0% { opacity: 0; transform: scale(.8); top: 2rem; }
	66% { opacity: 0; transform: scale(.8); top: 2rem; }
	100% { opacity: 1; transform: scale(1); top: 0; }
}
.animated.fadethree { animation: fadethree 1.4s ease forwards; }

@keyframes fadefour { 
	0% { opacity: 0; transform: scale(.8); top: 2rem; }
	33% { opacity: 0; transform: scale(.8); top: 2rem; }
	100% { opacity: 1; transform: scale(1); top: 0; }
}
.animated.fadefour { animation: fadefour 1.25s ease;  position: relative; top: 0; }

@keyframes fadefive { 
	0% { opacity: 0; transform: scale(.8); top: 2rem; }
	66% { opacity: 0; transform: scale(.8); top: 2rem; }
	100% { opacity: 1; transform: scale(1); top: 0; }
}
.animated.fadefive { animation: fadefive 1.4s ease; position: relative; top: 0; }

@keyframes textone { 
	0% { opacity: 0; left: -4rem; }
	66% { opacity: 0; left: -4rem; }
	100% { opacity: 1; left: 0; }
}
.animated.textone { animation: textone 1s ease forwards; }

@keyframes texttwo { 
	0% { opacity: 0; transform: translateY(-55%) translateX(-4rem); }
	75% { opacity: 0; transform: translateY(-55%) translateX(-4rem); }
	100% { opacity: 1; transform: translateY(-55%) translateX(0); }
}
.animated.texttwo { animation: texttwo 1.4s ease forwards; }

@keyframes textthree { 
	0% { opacity: 0; transform: translateY(-123%) translateX(-4rem); }
	75% { opacity: 0; transform: translateY(-123%) translateX(-4rem); }
	100% { opacity: 1; transform: translateY(-123%) translateX(0); }
}
.animated.textthree { animation: textthree 1.4s ease; position: relative; left: 0; }

@keyframes in {
	0% { opacity: 0; transform: translateX(-100px); }
	100% { opacity: ; transform: translateX(); }
}
.animated.in { animation: in 1s ease; }
.animated.in2 { animation: in 1.2s ease; }
.animated.in3 { animation: in 1.4s ease; }
.animated.in4 { animation: in 1.6s ease; }
.animated.in5 { animation: in 1.8s ease; }


@keyframes upandscale { 
	0% { opacity: 0; transform: scale(.8); top: 2rem; }
	100% { opacity: 1; transform: scale(1); top: 0; }
}
.fade-in-element { animation: upandscale 1s; position: relative; top: 0; }
.hidden { opacity: 0; }


@media only screen and (max-width: 1400px) {
	.wrapper { width: 100%; float: left; box-sizing: border-box; padding: 0 5%; }
	.header .heading h1 { font-size: 2.5rem; margin-bottom: 1.5rem; }
	.header .heading p { font-size: 1.1rem; margin-bottom: 2rem; }
	.header .heading a { font-size: 1.1rem; padding: .75rem 1.2rem; }
	.boring h1, .onlineTutoring h1, .contact h1, .faqPage h1 { font-size: 2.5rem; }
}

@media only screen and (max-width: 1025px) {
	.header { width: 100%; float: left; background: transparent; height: 100vh; color: #fff; z-index: 1 !important; position: relative; }
	.header .heading { width: 100%; float: left; text-align: center; }
	.header .heading a { display: inline-block; float: none; }
	.banner { width: 100%; height: 100vh; background: url('../images/websiteImages/zoom-message.png') no-repeat, linear-gradient(to bottom right, rgba(35,47,73,0.75), rgba(35,47,73,0.6)), url('/images/websiteImages/banner.jpg') no-repeat center center; background-position: bottom 1.25rem center, center, center; background-size: auto, auto, cover; z-index: 0 !important; }

	/* fot the video-like zoom call come ins */
	.onlineTutoring .videoMimic .topMimic { display: none; }
	.onlineTutoring .videoMimic .middleMimic { width: 100%; float: left; margin-top: 0; text-align: center; position: relative; z-index: 1; }
	.onlineTutoring .videoMimic .middleMimic .txt { position: relative; transform: translateX(-3%) translateY(55%); z-index: 3; }
	.onlineTutoring .videoMimic .middleMimic .img {  }
	.onlineTutoring .videoMimic .bottomMimic { display: none; }
	.onlineTutoring .videoMimic .textMessage { font-size: .8rem; }
	.onlineTutoring .split-three .itm img { height: 75px; margin-bottom: 1rem; }
	.onlineTutoring .split-three .itm h2 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 1rem; }
	.onlineTutoring .split-three .itm p { font-size: 1rem; margin-bottom: 1.4rem; }
	.fullwidthstick .txt { width: 50%; float: left; padding: 7vh 5vw; background: #fff; }
	.fullwidthstick .txt h3 { font-size: 1.4rem; margin-bottom: 2rem; }
	.fullwidthstick .txt p { font-size: 1rem; margin-bottom: 1.3rem; }
	.fullwidthstick .txt ul { padding-left: 7%; }
	.fullwidthstick .txt li { font-size: 1rem; margin-bottom: 1.3rem; }
	.fullwidthstick .txt .gap { height: 7vh; }
	.fullwidthstick .txt .material-icons { font-size: .9rem; vertical-align: text-top; }

	.keystages .itm img { width: 75px; height: 75px; margin-bottom: 1.5rem; }
	.keystages .itm h3 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 1rem; }
	.keystages .itm p { font-size: 1rem; margin-bottom: 1.3rem; }

	.contactPageForm .form { width: 100%; float: left; margin-bottom: 4rem; }
	.contactPageForm .contactInfo { width: 100%; float: left; position: relative; top: 0; }

	.contactPageForm .formSections .input-group label, .contactPageForm .formSections .radioOptions p { font-size: 1rem; }
	.contactPageForm .formSections .input-group input, .contactPageForm .formSections textarea { font-size: 1rem; }
	.contactPageForm .formSections .radioOptions { width: 100%; float: left; }
	/* Stuff after this is only to make things more pretty */
	.contactPageForm .formSections .radioOptions input[type=radio] + label>svg { padding: 20%; }
	.contactPageForm .formSections .radioOptions input[type=radio] + label>p { font-size: .8rem; }
	.contactPageForm .contactInfo h3 { font-size: 1.5rem;  margin-bottom: 2rem; }
	.contactPageForm .contactInfo p { font-size: 1rem; margin-bottom: 1.1rem; }
	#mouse { display: none; visibility: hidden; }
}

@media only screen and (max-width: 790px) {
	#subjects { position: absolute; padding-top: 15rem; }
	.top-pad { padding-top: 15rem; }
	.top, .top-two { position: absolute; }
	.top .logo, .top-two .logo { float: left; width: 100%; text-align: center; margin-bottom: 2rem; }
	.top .logo img, .top-two .logo img { width: 4.5rem; float: none; display: inline-block; }
	.top .nav, .top-two .nav { float: left; line-height: 1.6; position: relative; top: .4rem; width: 100%; text-align: center; }
	.top .nav ul, .top-two .nav ul { list-style: none; }
	.top .nav li, .top-two .nav li { float: none; display: inline-block; }
	.top .nav li a, .top-two .nav li a { color: #fff; font-size: 1.15rem; margin-left: 1.875rem; }
	.top .nav li a.cursor, .top-two .nav li a.cursor { cursor: pointer; }
	.top .nav li a .arrow, .top-two .nav li a .arrow { transform: rotate(90deg); position: relative; display: inline-block; margin-left: .5rem; transition: .3s ease; }
	.top .nav li a:hover, .top-two .nav li a:hover { color: #F3A868; }
	.footer .copy { font-size: 1rem; }
	.footer .copy .left { float: left; width: 100%; text-align: center; margin-bottom: 1.5rem; }
	.footer .copy .right { float: left; width: 100%; text-align: center; }
	.footer .copy a { margin: 0 .5rem; }
	.footer .navigation .itm { width: 100%; margin-right: 0%; margin-bottom: 4rem; }
	.footer .navigation .end { margin-right: 0; margin-bottom: 0; }
	.footer .navigation .itm h6 { font-size: 1.4rem; margin-bottom: 2rem; text-align: center; }
	.footer .navigation .itm li { font-size: 1.1rem; text-align: center; }
	.footer .navigation .itm li svg { width: 17px; height: 17px; float: none; display: inline; position: relative; top: .5rem; margin-right: 1rem; fill: #fff; }
	#subjects .itm { width: 100%; float: left; margin-right: 0; margin-bottom: 2rem; text-align: center; }
	#subjects .end { margin-bottom: 0; }
	#subjects .itm li a svg { width: 20px; height: 20px; float: none; margin-right: .5rem; display: inline; }
	.boring h1, .onlineTutoring h1, .contact h1, .faqPage h1 { width: 100%; margin-left: 0; margin-right: 0; font-size: 2rem; }
	.onlineTutoring .split-three { display: block; }
	.onlineTutoring .split-three .itm { width: 100%; float: left; margin-right: 0%; margin-bottom: 3rem; }
	.onlineTutoring .split-three .end { margin-right: 0; margin-bottom: 0; }
	.fullwidthstick .img { width: 100%; height: 30vh; position: relative; top: 0; }
	.fullwidthstick .img img { width: 100%; height: 100%; object-fit: cover; }
	.fullwidthstick .right { float: left; }
	.fullwidthstick .txt { width: 100%; }
	.keystages .itm { width: 100%; float: left; margin-right: 0%; margin-bottom: 3rem; }
	.keystages .end { margin-right: 0; margin-bottom: 0; }
}

/* ======================================================
   FAQ PAGE (new) — built from existing tokens & patterns,
   nothing here duplicates/overrides the rules above.
   ====================================================== */
.faqPage { width: 100%; float: left; }
.faqPage h1 { text-align: center; width: 70%; margin-left: 15%; margin-right: 15%; }
.faqPage .lede { max-width: 700px; margin: 0 auto 2rem; text-align: center; font-size: 1.2rem; color: #555; }

.faqPage .category { width: 100%; float: left; margin-bottom: 3.5rem; }
.faqPage .category:last-of-type { margin-bottom: 0; }
.faqPage .category h2 { font-size: 1.9rem; margin-bottom: 1.75rem; }

.faqPage .question { width: 100%; float: left; border-bottom: 1px solid rgba(35,47,73,0.12); }
.faqPage .question:first-child { border-top: 1px solid rgba(35,47,73,0.12); }
.faqPage .question button.q-toggle {
  width: 100%; float: left; text-align: left; cursor: pointer;
  background: transparent; border: 0; padding: 1.4rem 2.2rem 1.4rem 0;
  font-family: 'Rubik', sans-serif; font-weight: 500; font-size: 1.2rem;
  color: #232F49; position: relative;
}
.faqPage .question button.q-toggle:hover { color: #F3A868; }
.faqPage .question button.q-toggle .plus {
  position: absolute; right: 0; top: 1.4rem; font-size: 1.6rem; line-height: 1;
  color: #F3A868; transition: .25s ease;
}
.faqPage .question.open button.q-toggle .plus { transform: rotate(45deg); }
.faqPage .question .a-panel {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
}

.faqPage .question .a-panel { width: 100%; float: left; }
.faqPage .question .a-panel-inner { width: 100%; float: left; }


.faqPage .question.open .a-panel { max-height: 600px; }
.faqPage .question .a-panel-inner { padding: 0 2.2rem 1.6rem 0; font-size: 1.05rem; color: #444; }
.faqPage .question .a-panel-inner p { margin-bottom: .9rem; }
.faqPage .question .a-panel-inner ul { padding-left: 1.2rem; margin-bottom: .9rem; }
.faqPage .question .a-panel-inner li { margin-bottom: .5rem; }
.faqPage .question .a-panel-inner strong { color: #232F49; }
.faqPage .callout {
  background: #f4f4f4; border-left: 3px solid #F3A868; padding: 1rem 1.3rem;
  font-size: .95rem; border-radius: 4px;
}

.faqPage .cta { width: 100%; float: left; text-align: center; padding: 1rem 0; }
.faqPage .cta h2 { font-size: 1.9rem; margin-bottom: .75rem; }
.faqPage .cta p { font-size: 1.1rem; margin-bottom: 1.75rem; opacity: .85; }
.faqPage .cta a.cta-btn {
  display: inline-block; font-size: 1.2rem; font-weight: 500; padding: 1rem 1.6rem;
  background: #F3A868; color: #fff; border-radius: .6rem;
}
.faqPage .cta a.cta-btn:hover { background: #E97F83; }

@media only screen and (max-width: 1400px) {
  .faqPage h1 { width: 100%; margin-left: 0; margin-right: 0; }
}
@media only screen and (max-width: 790px) {
  .faqPage .question button.q-toggle { font-size: 1.05rem; padding-right: 2rem; }
  .faqPage .category h2 { font-size: 1.5rem; }
}