* {box-sizing: border-box;}
.wrapper {position: relative;}
.main {flex: 1; position: relative; display: flex; height: 100%;}
.background {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(../assets/Header-002.jpg); background-size: cover; background-position: center center;}
.overlay {position: absolute; z-index: 0; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--dark); opacity: .6;}
.content {position: relative;}
.home-upper {position: relative; display: grid; grid-template-columns: 2fr 1fr; gap: 60px; padding: 100px 10% 0 10%;}
.page-home h1.schoolsnz-blue {font-weight: 800;}
h1 {color: white; font-weight: 500; line-height: 1.1; letter-spacing: -.5px; font-size: 3.7rem; font-family: var(--font-family-base-heading);}
.page-home h1 {margin: 0;}
.upper {position: relative;}
.home-intro h1 {text-shadow: 0px 1px 3px #111;}
.schoolsnz-blue {color: var(--schoolsnz-blue);}
.heavy {font-weight: 800;}
.home-blurb p {max-width: 600px; margin-top: 13px; color: white; font-size: 1.25rem; font-weight: 200; line-height: 1.7;}
.panel {background-color: white; border-radius: 20px; border: 1px solid var(--dark); box-shadow: 0px 1px 3px var(--dark);}
.panel-inner {padding: 20px;}
h2 {font-size: 2rem; font-weight: 600; font-family: var(--font-family-base-heading);}
.home-left {min-width: 386px; margin-right: 30px;}
.login-panel {width: 450px; min-width: 450px; max-width: 450px; margin-bottom: 100px;}
.login-item {margin-bottom: 20px;}
.login-label {margin-bottom: 5px; font-weight: 400;}
.login-email, .login-password {width: 100%; padding: 15px; border: 1px solid #ccc;}
.sub-intro-wrapper {display: flex; align-items: flex-start; padding: 100px 10% 100px 10%;}
.sub-intro-left {width: 60%; margin-right: 40px; font-size: 1.1rem; line-height: 1.7; font-family: var(--font-family-base); color: var(--text-colour)}
.sub-intro-left p:first-child {margin-top: 0;}
.sub-intro-right {width: 40%;}
.sub-intro-image {display: flex; justify-content: center; width: 480px; height: 320px; align-items: center; border-radius: 15px; overflow: hidden;}
.features-wrapper {margin-bottom: 50px; padding: 0 10% 0 10%;}
.features-wrapper-inner {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px;}
.feature {padding: 30px; background-color: white; border: 1px solid #eaeaea; border-radius: 15px;}
.feature-image {width: 245px; height: 147px; background-position: center; background-size: contain; background-repeat: no-repeat;}
.feature:nth-child(1) .feature-image {margin: 0 auto 40px auto; background-image: url("../assets/SchoolsNZ-Home-Graphic-Search Schools.svg");}
.feature:nth-child(2) .feature-image {margin: 0 auto 40px auto; background-image: url("../assets/SchoolsNZ-Home-Graphic-About Schools.svg");}
.feature:nth-child(3) .feature-image {margin: 0 auto 40px auto; background-image: url("../assets/SchoolsNZ-Home-Graphic-List Schools.svg");}
.feature:nth-child(4) .feature-image {margin: 0 auto 40px auto; background-image: url("../assets/SchoolsNZ-Home-Graphic-Track Activity.svg");}
.feature-title {font-size: 3rem;}
.feature-item-title {margin-bottom: 20px; font-family: var(--font-family-base-heading); font-size: 1.2rem; font-weight: 600;}
.feature-text {font-size: 1rem; line-height: 1.7; color: var(--text-colour);}
.who-uses {padding: 0 10% 0 10%;}
.who-uses-title {font-size: 3rem;}
.who-uses-inner {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px;}
.who-uses-item-title {margin-bottom: 20px; font-size: 1.8rem; font-weight: 600; font-family: var(--font-family-base-heading);}
.who-uses-text p:first-child {margin-top: 0;}
.who-uses-text {font-size: 1rem; line-height: 1.7; color: var(--text-colour);}
.register-banner-outer {margin: 40px 0 50px 0; padding: 0 10% 0 10%;}
.register-banner {padding: 50px; border: 1px solid var(--schoolsnz-blue); box-shadow: 0px 5px 30px 0px #00000025; border-radius: 15px;}
.register-banner-title {font-size: 2rem; font-family: var(--font-family-base-heading); font-weight: 600;}
.register-banner-lower {display: flex; justify-content: space-between; align-items: center;}
.register-banner-text {margin-right: 20px; color: var(--text-colour);}
.eschool {padding: 0 10% 0 10%;}
.eschool-inner {display:flex; padding: 40px; background-color: white; border-radius: 15px; border: 1px solid #eaeaea;}
.eschool-logo {margin-right: 60px;}
.eschool-logo img {width: 265px;}
.eschool-title {margin-top: 0; font-size: 2rem; font-weight: 600; font-family: var(--font-family-base-heading);}
.eschool-text {color: var(--text-colour); line-height: 1.7;}
.why-study {margin: 60px 0 40px 0; padding: 0 10% 0 10%;}
.why-study-left {margin-right: 20px; padding-right: 80px;}
.why-study-right {width: 464px; padding: 30px 40px 40px 40px; background-color: white; border-radius: 15px; border: 1px solid #eaeaea; box-shadow: 0px 5px 30px 0px #00000025; }
.why-study-title {margin: 0; font-family: var(--font-family-base-heading); font-size: 3rem; font-weight: 600;}
.why-study-inner {display: grid; grid-template-columns: 2fr 1fr; gap: 40px;}
.why-study-text {color: var(--text-colour); line-height: 1.7;}
.one-stop-title {margin-bottom: 40px; font-size: 2rem; font-family: var(--font-family-base-heading); font-weight: 600; white-space: nowrap;}
.one-stop-item {display: flex; align-items: center;}
.one-stop-tick {margin-right: 10px;}
.one-stop-item-text {padding-bottom: 10px; white-space: nowrap; color: var(--text-colour);}
.code-of-practice {margin-bottom: 40px; padding: 0 10% 0 10%;}
.code-of-practice-title {font-family: var(--font-family-base-heading); font-weight: 600; font-size: 3rem;}
.code-of-practice-text {color: var(--text-colour); line-height: 1.7;}
.code-of-practice-text p:first-child {margin-top: 0;}
.gallery-wrapper {padding: 0 10%;}
#gallery {margin: 60px auto;}
.login-lower {margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--primary-color);}
.login-lower .login-label {color: var(--text-colour); font-weight: 300;}
.login-buttons {display: flex; margin-top: 20px;}
.login-button-wrapper {display: flex; align-items: center;}
.login-button-wrapper .button {margin-right: 20px;}
.h-spinner {width: 50px;}
.remember-me-wrapper {display: flex; justify-content: flex-start; align-items: center; color: var(--text-colour); font-weight: 300; font-size: .9rem;}
input[type="checkbox"] {display: block; margin-right: 10px;}
.error-message {display: none; color: red;}
.error .error-message {display: block; font-size: .9rem;}
.disabled {opacity: .5; pointer-events: none;}
.error .login-lower {margin-top: 10px;}
.error .remember-me-wrapper {margin-bottom: 10px;}
.traffic-2, .history-2 {display: none;}
ul {display: flex; justify-content: space-evenly; margin: 20px 0 60px 0; padding: 0 10%;}
li {list-style: none;}

@media screen and (max-width: 1590px) {
    .home-upper, .sub-intro-wrapper {padding: 100px 5% 0 5%;}
    .gallery-wrapper, .code-of-practice, .why-study, .eschool, .features-wrapper, .who-uses, .register-banner-outer {padding: 0 5%;}
}
@media screen and (max-width: 1420px) {
    .home-left {min-width: auto;}
    .feature-image {width: 180px; height: 107px; margin: 0;}
}
@media screen and (max-width: 1235px) {
    h1 {font-size: 2.7rem;}
}
@media screen and (max-width: 1200px) {
    .login-panel {width: 380px; min-width: 380px; max-width: 380px;}
    .sub-intro-image {width: 420px; height: 280px;}
    .sub-intro-left p {font-size: 1rem;}
}
@media screen and (max-width: 1140px) {
    h1 {font-size: 2.5rem;}
    .home-blurb p {font-size: 1rem;}
}
@media screen and (max-width: 1130px) {
    .features-wrapper-inner {grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;}
}
@media screen and (max-width: 1045px) {
    .sub-intro-image {width: 390px; height: 260px;}
    .sub-intro-left {width: 100%; margin-right: 20px;}
    .register-banner-outer {padding: 20px;}
    .eschool-logo {margin-right: 40px;}
    .eschool-logo img {width: 175px; }
    .why-study-inner {grid-template-columns: auto;}
    .why-study-left {margin-right: 0; padding-right: 0;}
    .why-study-right {margin: 0 auto;}
    li {font-size: .8rem;}
}
@media screen and (max-width: 935px) {
    .home-upper {grid-template-columns: 1fr; gap: 20px;}
    .login-panel {margin: 0 auto 60px auto;}
    .home-blurb p {font-size: 1.25rem;}
    .register-banner-title {font-size: 1.5rem;}
    .sub-intro-image {width: 330px; height: 220px;}
}
@media screen and (max-width: 880px) {
    .who-uses-inner {display: grid; grid-template-columns: 1fr; gap: 20px;}
    ul {flex-direction: column; width: 100%; margin-top: 0; justify-content: center; text-align: center;}
    li {margin-bottom: 20px;}
}
@media screen and (max-width: 760px) {
    .home-upper {padding: 50px 5% 0 5%;}
    .sub-intro-wrapper {padding: 50px 5% 20px 5%;}
    .features-wrapper-inner {grid-template-columns: 1fr;}
    .who-uses-title, .why-study-title, .feature-title {font-size: 2rem;}
    .button, .button-alt {padding: 5px 15px; font-size: 1rem;}
    h1 {font-size: 2.2rem;}
    .home-blurb p {font-size: 1.1rem;}
    .login-panel h2 {margin: 0 0 20px 0;}
    .register-banner {padding: 20px;}
    .register-banner-lower {flex-direction: column;}
    .register-banner-lower .button {margin: 20px; padding: 10px 20px;}
    .eschool-inner {flex-direction: column;}
    .eschool-logo {margin: 0 auto 20px auto;}
    .why-study-right {padding: 20px 0 20px 20px;}
    .sub-intro-right {display: none;}
}
@media screen and (max-width: 460px) {
    .home-upper {flex-direction: column;}
}
@media screen and (max-width: 430px) {
    .home-upper {padding: 20px;}
    h1 {font-size: 2rem;}
    .login-panel {width: auto; min-width: auto; max-width: none; margin: 0;}
    .login-buttons {justify-content: center;}
    .login-buttons .button:first-child {margin-right: 5px;}
    .login-buttons .button:last-child {margin-left: 5px; margin-right: 0;}
    .login-panel h2 {font-size: 1.5rem;}
    .feature-item-title {margin-bottom: 5px;}
    .register-banner-title {margin-bottom: 10px; font-size: 1.1rem;}
    .register-banner-text {font-size: .9rem;}
    .who-uses-text {font-size: .9rem;}
    .eschool-title {font-size: 1rem;}
    .eschool-text {font-size: .9rem;}
    .why-study-right {width: 100%; padding: 20px;}
    .one-stop-title {margin-bottom: 20px; font-size: 1.6rem; text-align: center;}
    .one-stop-item-text {font-size: .9rem;}
    .one-stop-tick img {width: 15px;}
    .traffic-1, .history-1 {display: none;}
    .traffic-2, .history-2 {display: block;}
    .code-of-practice-title {font-size: 2rem; margin: 0 0 10px 0;}
    .code-of-practice-text {font-size: .9rem;}
    .gallery-wrapper {display: none;}
}