* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            height: 100%;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }
        
        body {
            font-family: "Montserrat", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            font-size: 1.0rem;
            font-weight: 500;
            overflow-x: hidden;
            line-height: 2.0rem;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background-color: #fff;
        }
        
        h1 {
            font-family: "Paytone One", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 3.0rem;
            -webkit-font-smoothing: antialiased;
            color: #00427a;
            padding: 0 0 40px 0;
            line-height: 3.2rem;
        }
        
        h2 {
            font-family: "Paytone One", sans-serif;
            font-weight: 400;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            color: #00427a;
            font-size: 2.0rem;
            text-transform: none;
            padding: 0 0 30px 0;
            line-height: 1.2em;
        }
        .content h2 {
            padding-top: 30px;
        }
        .content h2:first-of-type {
            padding-top: 0;
        }
        
        h3 {
            font-family: "Paytone One", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            color: #00427a;
            font-size: 1.4rem;
            text-transform: capitalize;
            margin: 6px 0 30px 0;
            padding: 0;
        }
        
        h4 {
            line-height: 1.2rem;
            margin: 0;
            font-size: 1.4em;
            font-weight: 700;
        }
        
        h5 {
            color: #000;
            line-height: 1.2rem;
            margin: 0 0 20px;
            font-size: 1.0rem;
        }
        
        a,
        a:link,
        a:active,
        a:visited {
            -webkit-transition: all 0.25s ease-out;
            -moz-transition: all 0.25s ease-out;
            -o-transition: all 0.25s ease-out;
            transition: all 0.25s ease-out;
            color: #008cb7;
            outline: none;
            font-weight: 400;
        }
        
        a:hover {
            color: #003059;
        }
        
        a.button,
        a.dark-button {
            display: block;
            background-color: #4b98da;
            padding: 24px 0;
            -webkit-font-smoothing: antialiased;
            color: #fff;
            width: 230px;
            font-weight: 600;
            font-style: normal;
            font-size: 1.1rem;
            text-transform: uppercase;
            text-decoration: none;
            text-align: center;
            line-height: 1.0em;
            border-radius: 2px;
            text-shadow: none;
        }
        
        a.dark-button {
            background-color: #0f0c42;
        }
        
        a img,
        a.button,
        a.dark-button {
            transition: all .5s ease;
            -moz-transition: all .5s ease;
            /* Firefox 4 */
            -webkit-transition: all .5s ease;
            /* Safari and Chrome */
            -o-transition: all .5s ease;
            /* Opera */
        }
        
        a img:hover {
            opacity: 0.5;
        }
        
        a.button:hover,
        a.blue-button:hover {
            background-color: #003059;
            color: #fff;
        }
        
        a.dark-button:hover {
            background-color: #0878a2;
            color: #fff;
        }
        
        a[href^=tel] {
            /* Stops iPhones from changing phone number colors */
            color: inherit;
            text-decoration: none;
        }
        
        img {
            display: block;
        }
        
        p,
        .content li {
            margin-bottom: 1.6rem;
            font-size: 1.2rem;
            font-weight: 500;
            font-style: normal;
            color: #555;
            line-height: 2.4rem;
        }
        
        hr {
            border: 0;
            border-top: 1px solid #ccc;
            margin-bottom: 30px;
        }
        
        .flex {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        .wrapper {
            position: relative;
            margin: 0 auto;
            padding-left: 200px;
            padding-right: 200px;
        }
        
        .panel {
            padding-top: 100px;
            padding-bottom: 100px;
        }
        
        .clearboth {
            clear: both;
            display: block;
            height: 0;
        }
        
        /*------------------------------------------------------------ HEADER */
        header {
            position: relative;
            z-index: 100;
            width: 100%;
            padding-top: 20px;
            align-items: flex-start;
        }
        
        #header-left {}
        
        #logo {
            width: 250px;
            height: auto;
        }
        
        #header-right {
            display: flex;
            justify-content: flex-end;
            flex-wrap: wrap;
            max-width: 800px;
        }
        
        #icon-menu {
            display: flex;
            justify-content: space-between;
            width: 160px;
        }
        
        #icon-menu img {
            width: 36px;
        }
        
        #logo img {
            width: 100%;
            height: auto;
        }
        dialog {
            margin: 80px auto 0;
        	padding: 1.5rem 1rem 0.5rem;
        	background: #00427a;
        	width: 100%;
        	max-width: 450px;
        	padding-top: 1rem;
        	border-radius: 20px;
        	border: 0;
        	box-shadow: 0 5px 30px 0 rgb(0 0 0 / 10%);
        	animation: fadeIn 1s ease both;
        }
        
        dialog::backdrop {
        	animation: fadeIn 1s ease both;
        	background: rgb(255 255 255 / 40%);
        	z-index: 2;
        	backdrop-filter: blur(20px);
        }
        
        dialog h2 {
            border: none;
            margin: 0 auto;
            padding-top: 0;
            color: #fff;
            text-align: center;
        }
        .x {
        	filter: grayscale(1);
        	border: none;
        	background: none;
        	position: absolute;
        	top: 15px;
        	right: 20px;
        	transition: ease filter, transform 0.3s;
        	cursor: pointer;
        	transform-origin: center;
        	color:#fff; 
        	font-weight:400; 
        	font-size:1.4rem;
        }
        x:hover {
        	filter: grayscale(0);
        	transform: scale(1.1);
        }
        #quicklinks {
            align-items: center;
        }	
        #quicklinks img {
            width: 60px;
            height: auto;
            margin: 0 auto;
        }
        
        #quicklinks a {
            display: block;
            margin: 0 auto 20px;
            text-align: center;
            text-decoration: none;
            color: #fff;
            font-size: 1.2rem;
        }
        /*General Styles*/
        
        .primary {
        	display: inline-block;
        	font-size: 0.8rem;
        	color: #fff !important;
        	background: rgb(var(--vs-primary) / 100%);
        	padding: 13px 25px;
        	border-radius: 17px;
        	transition: background-color 0.1s ease;
        	box-sizing: border-box;
        	transition: all 0.25s ease;
        	border: 0;
        	cursor: pointer;
        	box-shadow: 0 10px 20px -10px rgb(var(--vs-primary) / 50%);
        }
        primary:hover {
        	box-shadow: 0 20px 20px -10px rgb(var(--vs-primary) / 50%);
        	transform: translateY(-5px);
        }
        
        
        @keyframes fadeIn {
        	from {
        		opacity: 0;
        	}
        	to {
        		opacity: 1;
        	}
        }
        
        /*---------------------------------------------------------- VIDEO AND BANNER */
        .video {
            min-width: 100%;
            min-height: 100%;
            width: 100%;
            height: 1100px;
            object-fit: cover;
            object-position: center top;
            display: block;
            margin-top: -335px;
        }
        
        #video-text {
            margin-top: -380px;
            position: relative;
            height: 380px;
        }
        
        #video-text h2 {
            font-size: 4.2rem;
            font-weight: 500;
            color: #fff;
            padding: 0 0 30px;
        }
        
        #video-text p {
            font-size: 1.6rem;
            font-weight: 500;
            color: #fff;
            padding: 0 0 30px;
            max-width: 1000px;
        }
        
        #video-buttons {
            width: 440px;
        }
        
        #banner {
            height: 700px;
            margin-top: -250px;
            background-position: center center;
            background-size: cover;
        }
        #banner::before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 698px;
          background-color: rgba(0, 0, 0, 0.3); /* Change the color and opacity as needed */
        }
        /*------------------------------------------------------------ HERO AND CONTENT */
        #hero {
            margin: 0 auto;
            background-image: url(../images/tile-leaves.png);
            background-repeat: repeat-y;
            background-position: left;
            background-size: 50px;
        }
        
        #hero .flex {
            justify-content: flex-start;
            align-items: center;
        }
        
        #hero-left {
            width: 50%;
        }
        
        #hero-left span {
            font-size: 1.8rem;
            color: #00427a;
        }
        
        #hero-left p {
            margin-bottom: 5rem;
        }
        
        #hero-right {
            width: 25%;
            margin-left: 140px;
        }
        
        #hero-right img {
            width: 100%;
            height: auto;
            max-width: 450px;
            border-radius: 50%;
        }
        
        .content ul {
            margin-left: 20px;
            padding-bottom: 30px;
        }
        
        .content li {
            margin-bottom: 4px;
        }
        
        .right-half {
            float: right;
            padding: 0 0 30px 50px;
            width: auto;
            height: auto;
            max-height: 700px;
        }
        .full {
            width: 100%;
            height: auto;
            padding: 30px 0;
        }
        
        #principal-photo {
            width: 220px;
            height: auto;
            border-radius: 50%;
        }
        iframe {
            margin-bottom: -10px;
        }
        /*---------------------------------------------------------- DOUBLE */
        #panel-double {
            background-color: #003059;
            align-items: center;
            background-image: url(../images/tile-leaves.png);
            background-repeat: repeat-y;
            background-position: right;
            background-size: 50px;
        }
        
        #double-image {
            width: 50%;
            background-image: url(../images/carlton-north-primary-school-enrol.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            height: 600px;
            clip-path: ellipse(50% 120% at 45% 50%);
        }
        
        #panel-double img {
            object-fit: cover;
        
            min-height: 400px;
            clip-path: ellipse(50% 100% at 45% 50%);
        }
        
        #double-text {
            width: 50%;
            padding: 0 200px 0 80px;
        }
        
        #double-text span {
            font-size: 1.8rem;
            color: #fff;
        }
        
        #double-text h2,
        #double-text p {
            color: #fff;
            max-width: 800px;
        }
        
        #enrol-buttons {
            width: 480px;
        }
        
        /*---------------------------------------------------------- TILES */
        #tiles {
            align-items: center;
        }
        
       
        
        .tile-text {
            width: 33.33%;
            padding: 0 120px;
        }
        
        .tile-image {
            width: 33.33%;
            background-size: cover;
            background-position: center;
            height: 600px;
        }
        
        /*---------------------------------------------------------- FOOTER */
        footer {
            background-color: #003059;
            background-image: url(../images/tile-leaves.png);
            background-repeat: repeat-y;
            background-position: right;
            background-size: 50px;
            padding: 60px 0;
        
        }
        
        footer .wrapper, #footer-strip .wrapper {
            padding-left: 100px;
            padding-right: 100px;
        }
        
        footer h2 {
            color: #fff;
        }
        
        footer p,
        #footer-signature p {
            line-height: 1.9rem;
            font-size: 1.1rem;
            color: #fff;
        }
        
        footer a:hover {
            opacity: 0.5;
        }
        
        #footer-left {
            width: 30%;
        }
        
        #footer-signature img {
            width: 220px;
            height: 100%;
            margin-right: 30px;
        }
        
        #flags {
            width: 250px;
            height: 35px;
            margin-bottom: 24px;
        }
        
        #footer-right {
            width: 30%;
            align-items: flex-start;
        }
        
        #sunsmart {
            width: 30%;
            display: flex;
            justify-content: center;
        }
        
        #footer-right p {
            line-height: 1.9rem;
            font-size: 1.1rem;
        }
        
        #phone {
            font-size: 1.4rem;
        }
        
        /*---------------------------------------------------------- FOOTER STRIP */
        #footer-strip {
            background-color: #fff;
            padding: 20px 0;
        }
        
        #copyright {
            font-size: 1.1rem;
            font-weight: 400;
            line-height: 1.8rem;
            margin: 0;
        }
        
        a.footer-link,
        a.footer-link:link,
        a.footer-link:active,
        a.footer-link:visited {
            -webkit-transition: all 0.25s ease-out;
            -moz-transition: all 0.25s ease-out;
            -o-transition: all 0.25s ease-out;
            transition: all 0.25s ease-out;
            outline: none;
            text-decoration: none;
            color: #fff;
            font-weight: 400;
            margin-right: 40px;
        }
        
        a.footer-link:hover {
            opacity: 0.5;
        }
        
        #throwstone {
            display: block;
            color: #333;
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 400;
            margin: 0;
        }
        
        #throwstone:before {
            content: "";
            display: inline-block;
            height: 22px;
            width: 22px;
            background-size: 19px 22px;
            margin: 0 9px -4px -36px;
            background-image: url(../images/throwstone-studios-logo-white.png);
            background-repeat: no-repeat;
        }
        
        /*---------------------------------------------------------- MENU */
        #menu {
            margin-right: -30px;
        }
        
        #menu ul {
            list-style: none;
            display: flex;
            justify-content: space-between;
        }
        #menu li {
            position: relative;
        }
        #menu ul li a {
            font-size: 1.1rem;
            font-weight: 700;
            line-height: 1.0em;
            display: block;
            margin: 6px 0 0;
            padding: 20px 30px 20px 30px;
            -webkit-font-smoothing: antialiased;
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            white-space: nowrap;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            transition: all .5s ease;
            -moz-transition: all .5s ease;
            /* Firefox 4 */
            -webkit-transition: all .5s ease;
            /* Safari and Chrome */
            -o-transition: all .5s ease;
            /* Opera */
        }
        
        #menu ul li a:hover,
        #menu ul li:hover>a {
            color: #fff;
            background-color: #4b98da;
        }
        
        #menu ul li ul {
            visibility: hidden;
            display: block;
            position: absolute;
            z-index: 10;
            /* Because #menu is part of a flexbox container, we cannot apply any positioning elements to the dropdown ul, otherwise the ul will be removed from the flexbox flow and the positioning will be calculated from the browser */
        
        
            transition: all 0.5s linear 0s;
            -moz-transition: all 0.5s linear 0s;
            /* Firefox 4 */
            -webkit-transition: all 0.5s linear 0s;
            /* Safari and Chrome */
            -o-transition: all 0.5s linear 0s;
            /* Opera */
        }
        
        #menu ul li:hover ul {
            visibility: visible;
            margin-top: 0;
        }
        
        #menu ul li:hover ul li {}
        
        /* style and set position of the dropdown menu*/
        #menu ul li ul li a {
            color: #fff;
            background-color: #4b98da;
            opacity: 0;
            margin: 0;
            padding: 16px 0 16px 30px;
            font-size: 1.1rem;
            font-weight: 400;
            font-style: normal;
            text-transform: none;
            text-align: left;
            border-radius: 0;
            width: 320px;
            transition: all 0.3s linear 0s;
            -moz-transition: all 0.3s linear 0s;
            /* Firefox 4 */
            -webkit-transition: all 0.3s linear 0s;
            /* Safari and Chrome */
            -o-transition: all 0.3s linear 0s;
            /* Opera */
        }
        #menu ul li:last-child ul {
            right: 0;
            left: auto;
        }
        #menu ul li:last-child ul li a {
            text-align: right;
            padding-right: 30px;
            width: 450px;
        }
        
        #menu ul li:hover ul li a {
            opacity: 1;
        }
        
        #menu ul li:hover ul li:nth-child(1) a {
            border-top-right-radius: 3px;
            border-top-left-radius: 0px;
        }
        
        #menu ul li:hover ul li:last-child a {
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
        }
    
        
        #menu ul li:hover ul li a:hover {
            color: #fff;
            background-color: #003059;
        }
        
        /*------------------------------------------------------------------------------ MOBILE MENU */
        .hamburger {
            position: relative;
            z-index: 2000;
            display: none;
        }
        
        nav {
            height: 33px;
            top: 8px;
            right: 10px;
            /* This has to match the left value in .mobile-menu */
            position: absolute;
            border-bottom-left-radius: 2px;
            border-top-left-radius: 2px;
        }
        
        #menuToggle {
            display: flex;
            flex-direction: column;
            position: fixed;
            background-color: #4b98da;
            border-radius: 3px;
            top: 20px;
            right: -35px;
            padding: 16px 12px 12px 15px;
            z-index: 2000;
            -webkit-user-select: none;
            user-select: none;
            width: 100px;
        
            transition: all .5s ease;
            -moz-transition: all .5s ease;
            /* Firefox 4 */
            -webkit-transition: all .5s ease;
            /* Safari and Chrome */
            -o-transition: all .5s ease;
            /* Opera */
        }
        
        #menuToggle input {
            display: flex;
            width: 40px;
            height: 32px;
            position: absolute;
            cursor: pointer;
            opacity: 0;
            z-index: 2;
        }
        
        #menuToggle span {
            display: flex;
            width: 38px;
            height: 3px;
            margin-bottom: 6px;
            position: relative;
            background: #fff;
            border-radius: 3px;
            z-index: 1;
            transform-origin: 8px 0px;
            transition: transform 1s cubic-bezier(0.77, 0.2, 0.05, 1.0),
                background 1s cubic-bezier(0.77, 0.2, 0.05, 1.0),
                opacity 1s ease;
        }
        
        #menuToggle span:first-child {
            transform-origin: 0% 0%;
        }
        
        #menuToggle span:nth-last-child(2) {
            transform-origin: 0% 100%;
        }
        
        #menuToggle input:checked~span {
            opacity: 1;
            transform: rotate(45deg) translate(3px, 5px);
            background: #fff;
        }
        
        #menuToggle input:checked~span:nth-last-child(3) {
            opacity: 0;
            transform: rotate(0deg) scale(0.2, 0.2);
        }
        
        #menuToggle input:checked~span:nth-last-child(2) {
            transform: rotate(-45deg) translate(-5px, 5px);
        }
        
        .mobile-menu {
            position: absolute;
            left: 80px;
            width: 500px;
            height: auto;
            margin: -40px 0 0 -500px;
            padding: 20px 50px 0 60px;
            background-color: #4b98da;
            -webkit-font-smoothing: antialiased;
            transform-origin: 0% 0%;
            transform: translate(0, -100%);
            transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
            text-align: center;
            list-style-type: none;
        }
        
        .mobile-menu li {
            padding: 0;
            transition-delay: 2s;
        }
        
        .mobile-menu li a, .mobile-parent {
            display: block;
            color: #fff;
            font-weight: normal;
            font-size: 1.4rem;
            padding: 16px 0;
            margin: 0 auto;
            width: 70%;
            border-top: 1px solid #fff;
            -webkit-transition: all 0.25s ease-out;
            -moz-transition: all 0.25s ease-out;
            -o-transition: all 0.25s ease-out;
            transition: all 0.25s ease-out;
            text-decoration: none;
            cursor: pointer;
        }
}
        .mobile-parent {
            cursor: pointer;
          user-select: none;
            
        }
        
        .mobile-parent:focus + .mobile-menu li ul,
        .mobile-menu li ul:focus-within {
          display: block;
        }

        .mobile-menu li a:hover {
            color: #00427a;
        }
        
        .mobile-menu li:nth-child(1) a {
            border-top: 0;
        }
  
}
        .mobile-menu li ul {
            display: none;
            padding-bottom: 20px;
        }
        
        .mobile-menu li:hover ul {
            display: block;
        }
        
        .mobile-menu li ul li {
            display:none;
        }
        
        .mobile-menu li:hover ul li {
            display: block;
        }
        
        .mobile-menu li ul li a {
            color: #fff;
            margin: 0 auto 5px auto;
            font-size: 1.0rem;
            padding: 10px;
            border: 0;
            width: 220px;
            background-color: #00427a;
            border-radius: 3px;
        }
        
        .mobile-menu li ul li a:hover {
            opacity: 0.8;
            color: #fff;
        }
        
        #menuToggle input:checked~ul {
            transform: none;
        }
        
        /* FORMS
        *****************************************************************/
        label {
            font-family: Calibri, Arial, Helvetica, sans-serif;
            font-size: 1.4em;
            line-height: 1.8em;
            font-weight: bold;
            color: #02b5cb;
        }
        
        input[type="text"] {
            width: 200px;
            padding: 6px;
            height: 20px;
            font-size: 1.4em;
            margin-bottom: 12px;
            border: 1px solid #aaa;
            border-radius: 6px;
        }
        
        textarea {
            width: 440px;
            padding: 6px;
            font-size: 1.4em;
            margin-bottom: 20px;
            height: 80px;
            border: 1px solid #aaa;
            border-radius: 6px;
        }
        
        .submit,
        select {
            width: 100px;
            height: 36px;
            border: 1px solid #aaa;
            border-radius: 6px;
            font-size: 1.4em;
            padding: 9px;
        }
        
        select {
            width: 214px;
            margin-bottom: 12px
        }
        
        .error {
            font-weight: bold;
            color: #ed1b24;
        }