/* 
	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 
*/

/*----------- MENU NAV ICON COLOUR --------------*/
.main-nav li > ul li a .fa.left-icon {
color: #D6680D;
}

	
/*------------ SELECTION COLOUR ---------------- */
::selection {background: #b1f2bc;}
::-moz-selection {background: #b1f2bc;}


ul.bullet, ol.number {
color: #777;
font-size: 14px;
margin: 30px 50px;
line-height:1.4em;
}

ul.bullet li, ol.number li {
margin-bottom: 15px;
margin-left: 10px;
padding-left: 15px;
}

.tile-content ul.bullet {
list-style-type: disc;
}

ol.number {
list-style-type: decimal;
}


.szschool-website .main-header {
    height: auto;
}

/**.boxed-tiles > .tile-wrapper > .tile-3:first-child {
    display: none;
} **/

.main-nav {
    border-bottom: 1px solid white;
	box-shadow:none;
}

.main-nav li a:hover {
    background: #0c502d;
    color: #fff}

@media only screen and (max-width: 420px) {
	.swiper-container {
    padding-top: 85px !important;}
}




#tile-home { display: none !important; }

.top-logos img {
    padding: 0 10px !important;
}

.bottom-logos img {
    padding: 0 10px;
}


.swiper-container {
    width: 100%; padding-top: 110px;
}

.transp-bg {background: #12673a;
}

.main-nav li a span {color: #ffffff;}

.main-nav li a span:hover {color: rgb(214, 214, 214);}

.school-logo {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 0;
    width: 150px;
    height: 95px;
    line-height: 0;
    background: transparent;
    border-bottom: none;
    text-align: left;
}

.school-logo img {padding-left: 8px;}

.school-info {height: 110px;line-height: 22px;}

.school-name {
    margin-left: 90px;
    text-align: left;
    width: 290px;
    padding-top: 24px;
}

.school-name a {text-align: left;
font-weight: 400;
}

.search-bar {
    float: right;
    z-index: 999;
    position: relative;
    padding-top: 27px;
}

@media only screen and (max-width: 420px) {
.school-name a {font-size: 11px;}
}

.school-name.bg-main {background-color: transparent !important;}

.main-footer {margin-top: 0px; background-color: #12673a !important;}


/* ================= tile styling ======================= */

.yellowgradient .tile-content p, .redgradient .tile-content p, .greengradient .tile-content p {
    font-family: "Open Sans", sans-serif;
    text-transform: uppercase;
}

/* =================== Tile Gradients and making them clickable =========================== */

/* yellow */

.yellowgradient .tile-content {
    background: linear-gradient(to bottom, rgba(255,201,10,0) 0%,rgba(255,201,10,0) 1%,rgba(255,201,10,0.8) 60%,rgba(255,201,10,1) 100%);
}

.yellowgradient .tile-link a {
width: 100%;
height: 100%;
position: absolute; 
text-indent:-9999px;
overflow:hidden;
top: 0;}

.yellowgradient .tile-internal{width: 100%; height: 100%; padding: 0;}

.yellowgradient .tile-link{margin: 0;}

.yellowgradient .tile-content {
text-align: center;
position: relative;
top: 190px;
padding-bottom: 10px;
padding-top: 2px;
}

.yellowgradient .tile-content p {
    text-align: center !important;
    font-size: 20px !important;
    color: #000;
}

/* Red */

.redgradient .tile-content {
    background: linear-gradient(to bottom, rgba(210,35,42,0) 0%,rgba(210,35,42,0) 1%,rgb(210, 36, 42) 60%,rgb(210, 36, 42) 100%);
}

.redgradient .tile-link a {
width: 100%;
height: 100%;
position: absolute; 
text-indent:-9999px;
overflow:hidden;
top: 0;}

.redgradient .tile-internal{width: 100%; height: 100%; padding: 0;}

.redgradient .tile-link{margin: 0;}

.redgradient .tile-content {
text-align: center;
position: relative;
top: 190px;
padding-bottom: 10px;
padding-top: 2px;
}

.redgradient .tile-content p {
    text-align: center !important;
    font-size: 20px !important;
    color: #fff;
}

/* blue */

.greengradient .tile-content {
    background: linear-gradient(to bottom, rgba(23,118,68,0) 0%,rgba(23,118,68,0.8) 50%,rgba(23,118,68,1) 100%);
}

.greengradient .tile-link a {
width: 100%;
height: 100%;
position: absolute; 
text-indent:-9999px;
overflow:hidden;
top: 0;}

.greengradient .tile-internal{width: 100%; height: 100%; padding: 0;}

.greengradient .tile-link{margin: 0;}

.greengradient .tile-content {
text-align: center;
position: relative;
top: 190px;
padding-bottom: 10px;
padding-top: 2px;
}

.greengradient .tile-content p {
    text-align: center !important;
    font-size: 20px !important;
    color: #fff;
}

/* No gradient */
.nogradient .tile-link a {
width: 100%;
height: 100%;
position: absolute; 
text-indent:-9999px;
overflow:hidden;
top: 0;}

.nogradient .tile-content {
    position: relative;
    top: 8px;
}

.nogradient .tile-heading {
    font-size: 20px;
}

.nogradient .tile-internal, .tile-padded {
    padding: 25px 25px 0px 25px;
}

#aboveFoot {
    display: block;
    width:100%;
    color: white;
}

/* ============ Notice board heading ============ */
.latest-news .tile-padded {
    padding: 0px
}

.latest-news .tile-content {
padding: 0px 25px;
}

.latest-news .tile-header{
    background: #d2242a;
    margin: 0px;
    padding: 10px 25px;
}

.latest-news {
    background-color: #0c502d;
}

.news-bg-auto-sub {background: linear-gradient(to bottom, rgba(13, 80, 45, 0) 0%,rgb(13, 80, 45) 49%);}

/* ===================== mobile view ======================== */

@media only screen and (max-width: 420px) {
.swiper-container {
    padding-top: 110px !important;}
}

@media screen and (max-width: 769px) {
.main-nav {
    top: 110px;}
}

.main-footer {
    padding-top: 0px;
    margin-top: 0px;
}

.logostrip {
    width: 17%;
    margin: 0 auto;
    margin-top: 2%;
}

@media only screen and (max-width: 450px) {
.logostrip {
    width: 50% !important;
}
}

div#tile- {
    overflow-y: scroll;
}


.blurb .tile-content img {
    max-width: 100%;
    height: auto;
}

.table-overflow {overflow-x: auto;}

@media only screen and (min-width: 770px) and (max-width: 980px) {
.tile.tile-2 {
    width: 240px;}
    
    #accessibility-bar {
        width: 100%;    
    }
}

@media only screen and (min-width: 451px) and (max-width: 980px) {
.logostrip {
    width: 35%;
}
}

@media screen and (min-width: 500px) and (max-width: 769px) {
.tile-2, .tile.tile-2 {
    width: 50%;}
}

#search-form button {
    display: table;
}

@media screen and (max-width: 450px) {
.school-logo {
    left: 40px;
}
.school-logo img {
    width: 50%;
}
.school-info {
    height: 70px;
}
.school-logo {
    width: 90px;
    height: auto
}


}

@media only screen and (max-width: 420px) {
.swiper-container {
    padding-top: 70px !important;}
}

@media only screen and (min-width: 770px) {
    .latest-news .tile-content {
        padding: 0px 10px 0px 35px !important;}
        
    div#tile- {
        width: 265px !important;}
    
    .main-content {
        margin: 0px auto 0 auto;
    }
    .swiper-container {
        padding-bottom: 58px;
    }
    
    #tile-id-120 .tile-content {top: 164px;}
    #tile-id-120 .tile-content p {line-height: 1em; padding-top: 12px;}
}

.latest-news a {color: #fff;}

@media only screen and (max-width: 769px) {
    .latest-news .tile-link {
        position: inherit;
        padding: 0px 35px 35px 35px;
    }
    
    .swiper-container {margin-bottom: -4px;}
}

#aboveFoot .main-txt {display: none;}

.main-nav .txt-main.bg-color.childs_children {
    background-color: transparent !important;
    color: transparent !important;}

#tile-id-128 .tile-content {top: 164px;}

#tile-id-128 .tile-content p {line-height: 1em; padding-top: 12px;}

#side-item-105 {display: none;}

footer .footer-logo {display: none;}

.skiptranslate select:nth-child(1), #google_translate_element div:nth-child(2), #google_translate_element div:nth-child(2) span {display: none;}

.blurb h2 {font-size: 23px;}

#internal_126 .latest-news {display: none;}

#internal_126 .tile-3 {width: 100%;}
#internal_126 .tile-right-indent-1 {padding-right: 0;}

.main-nav a.fill {
    font-size: 16px;
}

.social-icons {
    font-size: 35px;
}