/* 
	This CSS file contains the custom css styles for the Schoolzine Website template 
	When adding to this file use the following comment example:
*/

/* 
	Added by: Your Name
	Date: Date Added
	Descriptoin: A breif description of the change 
*/

/*.homeFields .homebox {*/
    /*width: 30%;*/
    /*margin: 0 auto;*/
/*    min-width:295px;*/
/*}*/

.homeFields {
    width: 90%;
    margin: 0 auto;
}

.homeFields h2 { color: #015f7f; margin-top: 0; }

.homeFields .findSection, .homeFields .quickSection {
    border-left: 1px solid #d4d4d4;
}

.homeFields .homebox {padding: 0 20px;}

/*.homeFields .latestSection {padding: 0 5px 0 10px !important;}*/

ul.quickLinksList {list-style-type: none; padding-inline-start: 0;}

ul.quickLinksList li {
    padding-bottom: 15px;
    font-size: 16px;
    font-weight: 600;
}

.megaSubMenu li a {color: #006486 !important;}

.mega-menu a {color: #015f7f;}

.sticky-header #primary-menu ul li .mega-menu-content {margin-top: 60px !important;}

#primary-menu.nav-7 ul li.mega-menu .mega-menu-content {
        left: 0;
    margin-left: auto;
    right: 0;
    margin-right: auto;
}

.sidebar .divider{padding:20px 0 0; background:#f1f1f1;}
.sidebar .divider:after{ position:relative; }

.moduleNav ul li a > div i.fa{padding:0; right:5px;}

.item.divider .item-header{ 
    color: #015f7f !important;
    font-size: 18px;
    font-weight: bold;
    padding: 0 15px;
    
}
.moduleNav ul{background:transparent;}
.moduleNav ul li a{color:rgb(0,106,142);}

.footer-10 a.copyright {color:#333;}

#FacebookCol{display:none;}


#jobs-form .row{ margin:0; }
#jobSidebar h3{
    font-size:14px;
    margin-bottom: 10px;
}



nav.subNav {
  /*  border-top: 2px solid #006A8E;*/
    border-bottom: 2px solid #006A8E;
    
}

nav.subNav ul{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav.subNav ul li {
    width:20%;
}
nav.subNav ul li a {
    padding: 10px;
    display: block;
    color: #015f7f;
    font-weight: bold;
    text-transform: uppercase;
   /* letter-spacing: 0.05em;*/
    text-align: center;
}
nav.subNav ul li a.jobMailTrigger{ 
	margin: 0;
    padding: 10px;
    line-height: 22px;
    background: #006A8E;
    color: #fff;
}
nav.subNav ul li a.jobMailTrigger:hover{
    background:#084b5f;
}

#campaignsDiv {
   margin-bottom: 40px;
   margin-top: 40px;
}

#recent-jobs {
    
}

#recent-jobs h2, #jobs-form h2{
    font-size:20px;
    font-weight:normal;
}
#jobs-form h3 {
    font-size:16px;
    font-weight:normal;
}

table #recent-jobs-content{
    
}

#search-results tr:first-child td, 
#recent-jobs tr:first-child td, 
#search-results tr.summary td, 
#recent-jobs tr.summary td, 
#recent-jobs li:first-child, 
#search-results li:first-child{
    border-top:0;
}
#jobs-form th {
    border-bottom: 3px solid #006A8E;
}


#recent-jobs tr.summary td {
    padding-bottom:3em;   
    border-bottom: 3px solid #006A8E;
}

#recent-jobs .job-link, .job-link {
    font-weight: bold;
    color: #006A8E;
}

#jobSidebar {
	background: #f7fafd;
	margin-top: 30px;
}
#jobSidebar h2{ 
	font-size:20px; 
	font-weight: normal;
}

#jobSidebar .text-input{
	width: 100%;
	box-shadow: none;
}

#jobSidebar label{
	text-transform: none; 
	font-weight: normal;
	letter-spacing: normal;
	font-family: 'Lato', sans-serif;
}
.filter-group-title {
	font-weight: bold;
}
#jobSidebar ul.filter li input {
	margin: 5px 5px 0 -14px;
}
#jobSidebar input[type=text].text-input {
    width: 100%;
    box-shadow: none;
    background: #fff;
    border: 1px solid #ddd;
}

#jobs-form #job-content .button, #jobs-form #jobSidebar .button{
    line-height: normal;
    height: auto;
    padding: 10px;
    box-shadow: none;
    border: none;
    text-shadow: none;
    background: #006A8E;
    color: #fff;
    border-radius: 2px;
}
#jobs-form #job-content .button:hover, #jobs-form #jobSidebar .button:hover{
    background:#084b5f;
}

#job-mail.focus #job-mail-content{ position:absolute; }
#jobs-form #job-mail-content input[type=text], #jobs-form #job-mail-content input[type=email]{
	border: 1px solid #ccc;
    background: #fff;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 100%;
    padding: 10px 5px;
    margin-bottom: 10px;
}

#jobs-form #job-mail-subscribe-button{
	line-height: normal;
    height: auto;
    padding: 10px;
    box-shadow: none;
    border: none;
    text-shadow: none;
    background: #006A8E;
    color: #fff;
    border-radius: 2px;
    margin: 0;
    margin-top: 10px;
}
#job { margin-top:40px; }
#social-media h2{ font-size:16px; font-weight:normal;}
.addthis_default_style .at300b, .addthis_default_style .at300bo, .addthis_default_style .at300m {margin-top:2px;}

#search-results #job-mail{
    display:none;
}    /* 

.postcontent{     
    width: 100%;
    margin-right: 0;
    max-width: 900px;
    margin: 0 auto;
    float: none;
}
*/
.careers-subscribe label{ display:block; }

.careers-subscribe .filter-group-title{margin-bottom:10px;}

.careers-subscribe ul.filter li label{
    display: block;
    font-size: 13px;
    margin-bottom: 10px;
    cursor: pointer;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    font-family: Lato, arial, sans-serif;
}
#jobs-form .back-link.button{
    line-height: normal;
    height: auto;
    padding: 10px;
    box-shadow: none;
    border: none;
    text-shadow: none;
    background: #006A8E;
    color: #fff;
    border-radius: 2px;
}
.legacyHeader{background:none; margin-left:0; margin-right:0; border-bottom:none; padding:0; }
.legacyHeader h2 a {color:#015f7f; font-weight:normal; }

@media screen and (max-width: 1199px) and (min-width: 992px){
    #primary-menu.nav-7 ul li.mega-menu .mega-menu-content {
        width:749px;
        margin-left: 0;
        margin-right: 0;
    }
}


@media screen and (min-width: 672px){
    .homeFields .homebox {
        width: 100%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 991px){
    .homeFields .findSection, .homeFields .quickSection {
        border-left: none;
    }
    
    .homeFields .homebox {padding-bottom: 20px;}
}

}

.left-col {width:50%; float:left;
}

/*ul.subPagesMenu > li > div:nth-child(1), ul.subPagesMenu > li > div:nth-child(2) {
    display:none;
}*/

/* 
	Added by: Kath Puxty
	Date: 3/2/2020
	Description: Style colour for text link, h1
*/
a {
    color: #015f7f;
    /*font-weight: 500;*/
}

h1 { color: #006a8e; font-weight: 800; margin-top: 0; }


.sticky-header #primary-menu.nav-7 ul li.mega-menu .mega-menu-content {
    top: 85px;
}


/* 
	Added by: Kath Puxty
	Date: 29/4/2020
	Description: before after image slider
*/
.slider{
	width: 100%;
	height: auto;
	padding: 0;
	position: relative;
}

.slider .right.image{
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;

}

.slider .left.image{
	position: relative;
	z-index: 2;
	border-right: 3px solid white;
	margin-right: -5px;
	overflow: hidden;
}

.slider .instruction{
	position: absolute;
	top:50%;
	z-index:1000;
	width: 95%;
}

.slider .instruction p{
	background: white;
	display: inline;
	padding: 1%;
	font-size: 1em;
}

/* 
	Added by: Kath Puxty
	Date: 3/2/2020
	Description: CSS for flip tiles in school directory - this is very long
*/
/*flip set up - horizontal. Vertical settings are below*/
.flip-container {
	perspective: 1000;
        border: 1px solid grey;
        margin: 10px auto;
}
	/*  UPDATED! flip the pane when hovered */
	.flip-container:hover .back {
		transform: rotateY(0deg);
        box-shadow: -5px 5px 5px #aaa;
	}
	.flip-container:hover .front {
	    transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 195px;
	height: 195px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: absolute;
	top: 0;
	left: 0;
    display: block;
  box-sizing: border-box;
  text-align: center;
}

/*  UPDATED! front pane, placed above back */
.front {
	z-index: 2;
	transform: rotateY(0deg);
    font-family: "Open Sans", arial, helvetica, sans-serif;
    color: #006a8e;
    line-height: 0.85rem;
}

/* back, initially hidden pane */
.back {
	transform: rotateY(-180deg);
    padding-top:5px;
    margin: auto;
    font-family: "Open Sans", arial, helvetica, sans-serif;
    color: white;
    font-size: 0.8rem;
}

.backButton{
    background:rgba(255, 255, 255, 0.9);
    color:#132e59;
    padding: 5px 8px;
    margin: 5px;
    border-radius: 15px;
    font-size: 0.8rem;
}

.school-logo {
    max-width: 180px;
    height: auto;
}
.social{
    max-width: 30px;
    vertical-align: middle;
}
/* 
	vertical flip
*/
.vertical.flip-container {
	position: relative;
}

.vertical .back {
	transform: rotateX(180deg);
}

.vertical.flip-container:hover .back {
    transform: rotateX(0deg);
}

.vertical.flip-container:hover .front {
    transform: rotateX(180deg);
}


/* grid layout*/
.grid-container{
    display: flex;
    justify-content: center;
}

.grid{
    width:1100px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
/*    row is horizontal for left to right languages, column is vertical*/
/*    change the direction with flex-direction and the axis is turned 90deg */
    flex-direction: row;
}

.grid-item{
/*    images are inline, gaps will show under them. often we turn that off with diplay:block but with flex don't, instead just give their container a width and height*/
    width: 200px;
    height: 200px;
}

/* school specific styles*/
.schoolType {
    font-size: 11px;
    font-weight: bold;
    padding: 0px;
    line-height:1;
}
.schoolLocation {
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 0.2em;
}
.sjpsAlst {
  background: #1874a7;
}

.sfxBall {
    background: #088a56;
}
.xccBall {
    background: #2d4f8f;
}
.sjpsBanora {
    background: #355940;
}
.sjcBanora {
    background: #6a1528;
}
.smpsBellin {
    background: #a8c59d;
}
.smpsBowra {
    background: #003399;
}
.sfpsByron {
    background: #01a7e5;
}
.smpsCasino {
    background: #30486c;
}
.smccCasino {
    background: #002055;
}
.sapsCoffs {
    background: #0d1a87;
}
.sjpcCoffs {
    background: #6a1c46;
}
.sjpsCoraki {
    background: #66b0e5;
}
.msjpsDorrig {
    background: #0d4da4;
}
.mspsGraf {
    background: #174a7d;
}
.sjpsGraf {
    background: #00a886;
}
.maccGraf {
    background: #7b1418;
}
.sjpsKemp {
    background: #61afe0;
}
.spcKemp {
    background: #2e2e76;
}
.sapsKings {
    background: #bf1925;
}
.sbpsKyo {
    background: #1c416e;
}
.sjpsLaur {
    background: #0f9548;
}
.scpsLism {
    background: #1c0e80;
}
.olhcLism {
    background: #096864;
}
.sjcLism {
    background: #fcaf17;
}
.trinLism {
    background: #1c3f94;
}
.sppsMack {
    background: #7d0140;
}
.sjpsMac {
    background: #cca645;
}
.sjpsMull {
    background: #292728;
}
.msppsMur {
    background: #19335d;
}
.sjpsMur {
    background: #01b051;
}
.mspcMur {
    background: #343198;
}
.sapsPort {
    background: #9c2f4f;
}
.sjpsPort {
    background: #BD1F2D;
}
.sppsPort {
    background: #045743;
}
.sjrcPort {
    background: #000000;
}
.mcPort {
    background: #ffc20f;
}
.sacpsPotts {
    background: #534099;
}
.mhocSaw {
    background: #015949;
}
.hfpsSken {
    background: #e12017;
}
.sjpsTweed {
    background: #010080;
}
.sjpsWood {
    background: #9ecb3a;
}
.sjpsWauc {
    background: #005696;
}
.sfxpsWool {
    background: #4d69b0;
}
.sjpsYam {
    background: #44a1cd;
}

/* end flip tiles css*/

/* 
	Added by: Kath Puxty
	Date: 27/10/2020
	Description: CSS for DLCSL board bio's
*/

/* flex box */
.dlcsl-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.dlcsl-fbox {
    padding: 3% 2%;
    flex: 1;
    width: 33.33%;
    min-width: 200px;
    min-height: 150px;
}

.dlcsl-innerBox {
    text-align: center;
    width: 250px;
}

.dlcsl-innerBox img {
    width: 200px;
    max-width: 200px;
    -webkit-box-shadow: -8px -8px #006a8e;
    box-shadow: -8px -8px #a7a8aa;
    border: 1px solid #ffffff;
    /* transform:translate(0px, 0px);
    transition-duration: 1s;
    transition-property: all;
    transition-timing-function: ease-out; */
}

.dlcsl-innerBox img:hover{
    /* transform: translate(0px, -10px); */
}

.dlcsl-about {
    text-align: center;
    background: #006a8e;
    border-radius: 20px;
    color: #ffffff;
    padding: 5px 20px;
    cursor: pointer;
}

.dlcsl-bio {
    text-align: left;
    font-size: 0.9em;
    height: 0;
    width:380px;
    max-width: 450px;
    color: #53565a;
    background: #f5f5f5;
    margin-top: 10px;
    padding: 5px;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1s;
    visibility: hidden;
    position: absolute;
    z-index: 200;
}


.dlcsl-bio-bottom {
    text-align: left;
    font-size: 0.9em;
    height: 0;
    width:380px;
    max-width: 450px;
    color: #53565a;
    background: #f5f5f5;
    margin-top: 10px;
    padding: 5px;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1s;
    visibility: hidden;
    position: relative;
    z-index: 200;

}


.show-bio {
   /*  position: absolute; */
    text-align: center;
    padding: 0px;
    width: 250px;

}

.show-bio:hover .dlcsl-bio{
    visibility: visible;
    height: auto;
    opacity: 1;
}

.show-bio:hover .dlcsl-bio-bottom {
    visibility: visible;
    height: auto;
    opacity: 1;
}

/* end DLCSL board bio css*/

/*  Added by Kath Puxty
    Date: 3/5/21
    For Before & After image */
.beforePhoto {
background-image: url(https://lism.catholic.edu.au/_image/media/473/presentationhouse_old.jpg); 
width: 600px;
height: 360px;
border: 2px solid #c3c3c3;
border-radius: 3px;
box-shadow: 0 0 1px #999, -2px 2px 3px rgba(0,0,0,.2);
padding: 0;
margin: 0 auto;
position: relative;
overflow: hidden;
content:'Before';
text-align:center;
color: #ffffff;
font-size: 18px;
    
}

.afterPhoto {
background-image: url(https://lism.catholic.edu.au/_image/media/376/presentationhouse_new.jpg); 
height: 360px;
resize: horizontal; 
position: absolute; 
top: 0; left: 0; 
min-width: 15px;
max-width: 600px; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
content:'After';
font-size: 18px; 
color: white;
    
}

.afterPhoto::before {
content: "\2194";
background: rgba(256,256,256,.9);
font-size: 24px; 
font-weight: bold;
color: red; 
top: 0; right: 0;
height: 100%;
line-height: 360px;  
position: absolute; 
}

.revealPhoto{  
resize: horizontal; 
overflow: auto;
opacity: 0; 
position: relative; 
top: 50%;
left: 0px; 
margin-right: 0px;  
width: 0px; height: 15px; 
max-width: 600px; min-width: 20px; 
outline: 0 solid transparent; 
cursor: move;
cursor: all-scroll;
transform: scaleY(18);
transform-origin: center center;
animation: delta 5s 1 normal ease-in-out 1s;
}
@keyframes delta {
30% {width: 300px}
60% {width: 50px}
80% {width: 150px}
}

/* End Before & After */

@media screen and (max-width: 500px) {
    .header-8 #top-search a {
        right: 17px;
        margin: 66px 0;
    }
}

/*------ For News-Story DO NOT DELETE https://csolismore.schoolzineplus.com/news-story -----*/

img.moduleArtImg {
    display: none;
}

/*h3.moduleArtHead {*/
/*    background-color: antiquewhite;*/
/*}*/

.news-story h3.moduleArtHead {
    /*background-color: #006a8e;*/
    color: #006a8e;
    padding:5px 10px;
    margin-top:0;
    font-size: 18px;
}

p.moduleArtSumm{
    padding:0 10px;
}

a.moduleArtLink{
    margin:0 10px;
}

.news-story, div#content_link_166 {
    width: 1080px;
    margin: 0 auto;
}

/*------ For Events-Story DO NOT DELETE - https://csolismore.schoolzineplus.com/events-story -----*/

img.moduleArtImg {
    display: none;
}

/*h3.moduleArtHead {*/
/*    background-color: antiquewhite;*/
/*}*/

.events-story h3.moduleArtHead {
    /*background-color: #006a8e;*/
    color: #006a8e;
    font-size: 18px;
    
}

.events-story, div#content_link_166 {
    max-width: 800px;
    margin: 0 auto;
    width:100%;
}

.articleContainer { display: flex; margin-bottom: 50px; justify-content: center; flex-wrap: wrap; }

.moduleArtImgContainer { width: 300px; text-align: center; }
.moduleArtImgContainer a.moduleArtLink{ margin:0;}
.moduleArtContent { width: calc(100% - 300px); }
.moduleArtImgContainer img.moduleArtImg{margin:0; max-width: 280px; display:inline;}

.articleModule:nth-child(10) .articleContainer{}

.articleModule .articleContainer:nth-child(n+11){display:none;}

@media (max-width:768px){
    
    .moduleArtImgContainer{ width: 90%; text-align: center; margin-bottom: 20px; }
    .moduleArtContent{ width:90%; }
}

a.bttBtn {
    background: #006280;
    padding: 12px;
    border-radius: 3px;
    color: #fff;
    position: fixed;
    right: 5%;
    bottom: 50px;
}

div.anchorList {text-align: center;}

div.anchorList div {
    margin: 0 auto;
    display: inline-block;
}

div.anchorList div a {
    padding: 0 10px;
}

.footer > div {
    max-width: 1210px;
    margin: 0 auto;
    padding: 0 10px;
}

@media screen and (min-width: 992px) {
    .footer .schoolzineLogo {float: right;}
}

.footer .schoolzineLogo a.footer-logo {margin-bottom: 0;}

.footer .schoolzineLogo svg g path, .footer .schoolzineLogo svg g rect, .footer .schoolzineLogo svg g polygon {fill: #000;}

footer.footer-10 a.copyright {
    padding: 25px 10px 10px 10px;
}

.header-8 #school-name {
    text-align: center;
    font-weight: 100;
    letter-spacing: 4px;
    text-transform: none;
    color: #555555;
    font-weight: 400;
}

.header-8 #schoolNameMotto {
    color: #086487;
    letter-spacing: 1px;
    display: block;
    text-align: center;
}

@media only screen and (max-width: 991px) {
    .header-8 .SchoolText {
        padding-bottom: 15px;
    }
    
    .header-8 .SchoolInfo #logo {
        float: none;
    }
    
    #logo, #header.full-header #logo {
        height: 50px;
    }
}