/* Variables ---------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------- */

:root {
  --dark: #07134d;
	--link-colour: #d04526;
  --text-color: #697488;
	--strong-color: #606060;
}


/* Page Setup --------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------- */

#header-inner, #quick-links, main, footer {
		max-width: 1200px;
		margin: auto;
}
@media only screen and (min-width: 781px) {
		/* Desktop browsers */
				#masthead {
				background: rgba(0, 0, 0, 0.5);
				width: 100%;
				z-index: 998;
				position: fixed;
				top: 0;
		}
}
@media only screen and (max-width: 1024px) {
		/* Mobile browsers & tablets */
		#quick-links, main, footer {
				max-width: 95%;
		}
		.site-branding {
				display: none;
		}
}

.page {
		margin: 0;
}

/* White space before the footer but not on the home page as image needs to touch it */
body:not(.home) main {
		margin-bottom: 80px;
}

.menu-toggle {
		display: none;
}

a.custom-logo-link, a.custom-logo-link:hover {
	position: absolute;
	width: 158px;
}

.edit-link {
		display: none;
}

.site-info {
		display: none;
}

@media only screen and (max-width: 780px) {
		/* Mobile browsers */
.site-footer p {
		text-align: left !important;
		}
}


/* Page Builder Tweaks ------------------------------------------------------------------ */
/* -------------------------------------------------------------------------------------- */

/* Remove top margin on paragraph as this would merge if it wasn't in a Page Builder div */
/* But not for Page Builder row with dark-background class e.g front page strapline or front-page-notice */
:not(.dark-background) > .panel-grid-cell p:first-child {
		margin-top: 0;
}
.front-page-notice .panel-grid-cell p:first-child {
		margin-top: 18px;
}

.sow-accordion-panel-header {
		background-color: #102060 !important;
}
.sow-accordion-panel-border {
		padding: 0 !important;
		background-color: #fff !important;
}


/* Term Dates --------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------- */


#term_dates {
	overflow: auto;
}

#term_dates div {
	margin: 16px;
}
@media only screen and (max-width: 780px) {
    /* Mobile browsers */
	#term_dates div {
		margin: 0 0 32px 0;
			float: none !important;
	}
}

#term_dates table * {
	background: none !important;
}
#term_dates table {
	margin: auto;
		width: auto;
}

#term_dates td {
    text-align: center;
    padding: 0 !important;
	width: 38px;
	height: 38px;
	border: rgb(204, 204, 204) 1px solid !important;
    
}

#term_dates p {
	line-height: 2;
}

.month {
    float: left;
    margin: 10px;
}

#term_dates table td.month_name {
    font-weight: bold;
	background: #d9edf7 !important;
}

#term_dates table td.weekday {
	background-color: #FFFFCC !important;
}


#term_dates table td.school_holiday {
	background-color: #66ccff !important;
	/*border: 1px solid #999999;*/
	/*padding: 5px;*/
	color: white;
}
span.school_holiday {
	background-color: #66ccff;
	border: 1px solid rgb(204, 204, 204);
	padding: 5px;
	color: white;
}

#term_dates table td.public_holiday {
	background-color: #ff9900 !important;
	/*border: 1px solid #999999;*/
	/*padding: 5px;*/
	color: white;
}
span.public_holiday {
	background-color: #ff9900;
	border: 1px solid rgb(204, 204, 204);
	padding: 5px;
	color: white;
}

#term_dates table td.inset_day {
	background-color: #339966 !important;
	/*border: 1px solid #999999;*/
	/*padding: 5px;*/
	color: white;
}
span.inset_day {
	background-color: #339966;
	border: 1px solid rgb(204, 204, 204);
	padding: 5px;
	color: white;
}

#term_dates table td.weekend {
	background-color: #CCCCCC !important;
}

/*.current_date {
    border-color: white;
    background-color: #d7ad00;
    color: white;
}*/


/* Element Styling ---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------- */


/* General */

body {
		/*font-family: 'Poppins', sans-serif;*/
		font-family: 'Open Sans', sans-serif;
		color: var(--text-color);
		font-size: 18px;
		line-height: 1.7;
}


/* Headings */

h1 {
		font-size: 3em;
		text-align: center;
		line-height: 1.3;
		margin: 1em 0;
}
@media only screen and (max-width: 1024px) {
		/* Mobile browsers & tablets */
		h1 {
				font-size: 2.5em;
		}
}

h2 {
		font-size: 2em;
		line-height: 1.3;
}
h2 a {
		color: var(--strong-color);
}

h3 {
		font-size: 1.4em;
}

h1, h2, h3, h4, h5, h6 {
		/*font-family: 'Cabin', sans-serif;*/
		color: var(--dark);
}


/* Paragraphs */

p {
		margin-bottom: 1em;
}

/* Lists */

ul {
		margin-left: 0;
}

/* Links */

a, a:visited, a:hover, a:focus, a:active {
		color: var(--link-colour);
		font-weight: bold;
		text-decoration: none;
		position: relative;
}

a i {
		color: var(--link-colour); /* Font Awesome */
}

a:not(:has(img))::after {
  border-top: 2px solid var(--link-colour);
  content: '';
  left: 50%;
  margin-top: -3px;
  position: absolute;
  right: 50%;
  top: 100%;
  transition: left 150ms ease, right 150ms ease;
}

a:not(.button):hover::after {
  left: 1px;
  right: 1px;
}

strong {
		color: var(--strong-color);
}


/* Tables */

table {
	  border-collapse: collapse;
}

tr:nth-child(even) {
	  background: #f9f9f9;
}

table tbody th {
	  background: #AFB8DF;
	  text-align: left;
		color: var(--strong-color);
}

table th, table td {
	  border-bottom: 1px solid #ccc;
	  padding: 10px;
}

th ul, td ul {
		margin: 0;
		padding-left: 1em;
}


/* Blockquotes */

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\201C""\201D";
}

blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}


/* Wellbeing Page ----------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------- */

.white * {
		color: white !important;
}

.round-corner {
		width: 350px;
		height: 350px;
}


/* Custom Classes ----------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------- */

@media only screen and (min-width: 781px) and (max-width: 1024px) {
/* Tablet browsers */
		.highlight-box {
				font-size: 70%;
		}
}
@media only screen and (min-width: 781px) {
/* Desktop browsers */
		.highlight-box {
				background: white;
				color: var(--text-color);
				border: 10px solid var(--dark);
				border-radius: 100%;
				padding-top: calc(100% - 20px);
				position: relative;
				transform: scale(1.2);
				font-size: 90%;
		}

		.highlight-box > div {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
		}

		.highlight-box > div > div {
				width: 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
		}
		.highlight-box > div > div strong {
				color: var(--strong-color);
		}
}

.dark-background {
		background-color: var(--dark);
		color: white;
}
.dark-background a, .dark-background strong {
		font-weight: bold;
		color: white;
		text-decoration: none;
}
.dark-background a:hover {
		background: orange;
}

.small-margin p {
		margin: 5px 0;
}

.smaller {
		font-size: 80%;
}

.larger {
		font-size: 120%;
}


.compressed {
		line-height: 1.5;
}

span.impact {
		background: yellow;
}

.greyscale img {
		filter: grayscale(100%);
}

.drop-shadow, .browser-shot img {
		-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
		-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
		box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}


@media only screen and (min-width: 781px) {
/* Desktop browsers & tablets */
		.mobile-only {
			display: none !important;
		}
}

@media only screen and (min-width: 1025px) {
/* Desktop browsers */
		.mobile-and-tablet-only {
			display: none !important;
		}
}
@media only screen and (max-width: 780px) {
/* Moble browsers */
		.desktop-only {
			display: none !important;
		}
}