body { 
  opacity: 0; 
  transition: opacity 1s; 
} 

#sj-bar {
  z-index: 55555;
}

html {
font-size: 62.5%;
}

.element-text table td,
.element-text table th{
padding: 5px;
}

.page {
font-family: "Quicksand", sans-serif;
flex: 0 0 100%;
}

.header-wrapper {
background: #3365ab;
color: #fff;
}

.header-inner {
position: relative;
margin: 0 5%;
}

/*menu*/


.nav{
text-align: right;
margin-top: 0;
padding-right: 20px;
}

body:not(.page-main-page) .nav {
-webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 75%);
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
box-shadow: 0 0 5px 0 rgb(0 0 0 / 75%);
}

.header-inner.fixed .nav{
height: 0px;
overflow: hidden;
}

.header-inner.fixed:hover .nav{
height: auto;
overflow: visible;
}

.header-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.theme-site-name span {
  display: block;
}

.nav > ul > li  {
  margin: 0;
  padding: 0 5px;
  transition: background ease .25s;
}

.nav > ul > li > ul.wide{
  width: 500px;
}

.nav a{
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 16px;
  padding-right: 2.5px;
}

.nav > ul > li > ul > li > a:hover {
  color:  #222;
  }
  
  .nav ul ul li a{
  font-size: 14px;
  color: #111;
  padding: 5px 5px 6px;
  position: relative;
  width: 100%;
  display: block;
  font-weight: 500;
  }

.nav ul ul li a {
  padding: 8px 10px;
  text-align: left;
  padding-left: 12px;
  font-size: 16px;
}

.nav ul ul {
  background-color: transparent;
}


.nav li {
  font-size: 14px;
  font-weight: 500;
}

.nav ul li.last-item ul ul {
  right: 100%;
  left: unset;
}

.nav ul ul ul {
  max-width: 250px;
}

.nav ul ul {
  width: 100%;
  min-width: 220px;
}

.nav > ul > li.first > ul,
.nav > ul > li:nth-child(2) > ul,
.nav > ul > li:nth-child(3) > ul {
  right: auto;
  left: 0;
}

.nav > ul > li:hover > ul{
  opacity: 1;
  transform: translateY(0px);
}

.nav > ul > li > ul{
  right: 0;
  left: auto;
  width: 250px;
  background: rgba(0,0,0,0);
  font-size: 0;
  text-align: left;
  padding: 20px;
  display: block !important;
  transform: translateY(50px);
  opacity: 0;
  transition: all ease 400ms, opacity ease 250ms;
}

.nav > ul > li > ul:before{
  content: '';
  display: block;
  width: 100%;
  height: calc(100%);
  background: #fff;
  left: 0;
  bottom: 0;
  background: #fff;
  position: absolute;
  box-shadow: 0 2px 4px rgba(0,0,0,.8);
}

.nav ul ul ul:before {
  content: '';
  display: block;
  width: 100%;
  height: calc(100%);
  background: #fff;
  left: 0;
  bottom: 0;
  background: #fff;
  position: absolute;
}

.nav ul ul ul {
  padding: 0px 20px;
}

.nav > ul > li > ul.wide > li{
  display: inline-block;
  width: calc(50% - 20px);
  margin-right: 20px;
  vertical-align: top;
}

.nav ul ul li a:hover {
  color:  #222;
}

.nav ul ul ul li a {
  /* font-size: 12px; */
}

.nav ul ul li a {
  font-size: 14px;
  color: #111;
  padding: 5px 5px 6px;
  position: relative;
  width: 100%;
  display: block;
  font-weight: 500;
}

.nav > ul > li > ul > li > a:after,
.nav > ul > li > ul > li > a:before{
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #eee;
}

.nav > ul > li > ul > li > a:after{
  background: #522583;
  width: 0%;
  transition: width ease 250ms;
}

.nav > ul > li > ul > li:hover > a:after{
  width: 100%;
}

.nav ul ul li:hover > a {
  background: rgba(255, 255, 255, 0.73);
  color: #000;
}

/*school-name*/
.school-details.col-12.col-lg-6 {
display: flex;
flex-wrap: wrap;
align-items: center;
}

.header-inner .theme-site-name {
font-size: 3.6rem;
font-weight: 700;
}

.header-inner .theme-site-name.shrink{
font-size: 2.4rem;
}

.theme-strap-line {
font-size: 2.3rem;
}

/*Top Icons*/
div#headIcons {
display: flex;
justify-content: flex-end;
align-self: center;
flex-wrap: wrap;
}

.headIcons a {
color: #fff;
display: inline-block;
font-size: 1.4rem;
}

.headIcons a:hover {
text-decoration: none;
}

.headIcons .fa-stack {
margin: 2px;
border: 2px solid #fff;
border-radius: 50%;
}

.headIcons .fa-inverse {
color: #fff !important;
}

.headIcons .fa-stack-1x {
color: #fff;
line-height: 1.8em;
}

.headIcons .fa-stack-2x {
color: transparent !important;
}

div#headIcons > div,
.headIcons > a,
.theme-social a {
padding: 0;
cursor: pointer;
}

.tcontact {
font-size: 0;
}

.tsocial {
padding-right: 0;
}

.closebtn {
font-size: 2rem;
padding: 14px;
position: absolute;
top: 0;
right: 0;
display: none;
}

#panels {
width: 100%;
position: relative;
font-size: 2rem;
overflow: hidden;
}

#panels p,
#panels a {
margin: 0;
color: #fff;
}

#panels > div {
display: none;
}

#panels > div {
left: 0;
display: none;
top: 0;
padding: 10px 40px 10px 20px;
background: #78089e;
text-align: right;
box-shadow: 2px 2px 2px #5b7390;
}

#panels > div#collapseEmail a {
padding: 0;
}

#panels > div table {
margin: auto;
}

.header-inner .site-search::-moz-placeholder {
color: #fff;
opacity: 1;
}

.header-inner .site-search:-ms-input-placeholder {
color: #fff;
}

.header-inner .site-search::-webkit-input-placeholder {
color: #fff;
}

.search-url {
color: #555555;
}

.close-school-details {
position: absolute;
top: 50%;
right: 0;
margin: auto;
transform: translateY(-50%);
padding: 10px;
color: #fff;
font-size: 20px;
cursor: pointer;
}

/*EVENTS*/

.sj_element_events dl.sj_events dd {
min-height: 70px;
}

.sj_element_events dl.sj_events {
padding-left: 119px;
min-height: 80px;
}

.sj_element_events dl.sj_events .sj-event-title {
font-weight: 700;
}

.sj_element_events dl.sj_events dt small {
left: -120px;
width: 95px;
height: 102px;
border-right: 1px solid #000;
background: none;
font-style: normal;
box-shadow: none;
}

.sj_element_events dl.sj_events dt small .day {
font-size: 40px;
color: #000;
background: none;
width: 100%;
text-align: center;
height: 55px;
font-weight: bold;
line-height: 55px;
top: 10px;
}

.sj_element_events dl.sj_events dt small .month {
color: #000;
background: none;
width: 100%;
text-align: center;
font-size: 18px;
top: 57px;
font-weight: bold;
}

.sj_element_news ul li a,
.sj_element_events dl.sj_events dt,
.sj_element_newsletters strong {
font-weight: normal;
}

/*3rd row*/

.page-main-page .sj-outer-row-3 {
background: url("/img/bespoke/toucan_standard_theme_stjosephs_cpsh/rowbg-blue.jpg") no-repeat center bottom;
background-size: cover;
padding: 5% 0;
}

.page-main-page .sj-content-row-3 .column-2col-1 .element-image img {
border-radius: 100%;
border: 6px solid #fff;
}

/*3rd row events*/
.page-main-page .sj-content-row-3 .sj_element_events dl.sj_events,
.page-main-page .sj-content-row-3 .sj_element_events dl.sj_events dt small .day,
.page-main-page .sj-content-row-3 .sj_element_events dl.sj_events dt small .month,
.page-main-page .sj-content-row-3 .sj_element_events h3,
.page-main-page .sj-content-row-3 .sj_element_events .events-footer a,
.page-main-page .sj-content-row-3 .sj_element_events .events-footer,
.page-main-page .sj-content-row-3 .sj_element_events p {
color: #fff;
}

.page-main-page .sj-content-row-3 .sj_element_events dl.sj_events dt small {
border-right: 1px solid #fff;
}

.column-1col .element-events .sj_element_events {
display: flex;
flex-wrap: wrap;
/* flex: 0 0 50%; */
}

.column-1col dl.sj_events.sj_event {
flex: 0 0 50%;
max-width: 50%;
}

.column-1col .element-events h3 {
flex: 0 0 100%;
max-width: 100%;
}

/*slideshow*/
.slideshow-wrapper {
  line-height: 0;
}
#theme-slideshow {
position: relative;
}

#theme-slideshow:after {
content: "";
position: absolute;
bottom: 0;
z-index: 1;
width: 100%;
height: 10%;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
/* IE6-9 */
}

.page-main-page .sj-content-row-1 .column-1col .cms-element-wrapper {
  flex: 0 0 20%;
  max-width: 20%;
}
.cms-element-wrapper {
width: 100%;
}

/*Quicklinks*/
.quicklink-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.quicklink-container .element-image {
flex: 0 0 20%;

max-width: 19%;

margin: 0 0.5%;
}

.page-main-page.cms_edit .quicklink-container .element-image {
max-width: 100%;
}

.element-image.quicklink .sj_element_image {
position: relative;
overflow: hidden;
}

.quicklink-container .element-image .sj_element_image img {
width: 100%;
}

.element-image.quicklink .sj_element_image,
.element-image.quicklink .sj_element_image a {
color: #fff;
}

.element-image.quicklink .sj_element_image img {
transition: all ease 1s;
}

.element-image.quicklink .sj_element_image:hover img {
transform: scale(1.2, 1.2);
transition: all ease 1s;
}

.element-image.quicklink .sj_element_image a:before {
content: "";
display: block;
top: 0;
width: 100%;
height: 100%;
background: rgba(51, 101, 171, 0.75);
position: absolute;
z-index: 10;
}

.element-image.quicklink:hover .sj_element_image a:before {
background: rgba(0, 0, 0, 0);
z-index: -1;
}

.element-image.quicklink .sj_element_image_caption {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
font-size: 2.5rem;
z-index: 11;
}

.element-image.quicklink:hover .sj_element_image_caption {
text-shadow: 0 0 3px #000;
}

/*Content*/
h1 {
font-size: 5rem;
}

h2 {
font-size: 4.5rem;
}

h3 {
font-size: 4rem;
}

h4 {
font-size: 3.5rem;
}

h5 {
font-size: 3rem;
}

h6 {
font-size: 2rem;
}

.element-news h3 {
display: none;
}

.content {
font-size: 1.6rem;
}

.element-text dd,
.element-text dt,
.element-text label,
.element-text li,
.element-text p {
line-height: 150% !important;
}

/*news*/

.column .sj_element_news ul {
display: flex;
flex-wrap: wrap;
justify-content: left;
}

.column .sj_element_news ul li {
flex: 0 0 24%;
max-width: 24%;
background: #3c5597;
margin: 0px 0.5%;
}

.column-2col-1 .sj_element_news ul li,
.column-2col-2 .sj_element_news ul li,
.column-3col-1 .sj_element_news ul li,
.column-3col-2 .sj_element_news ul li,
.column-3col-3 .sj_element_news ul li,
.column-right2col-1 .sj_element_news ul li,
.column-left2col-2 .sj_element_news ul li {
flex: 0 0 49%;
max-width: 49%;
}

.column .sj_element_news ul li .sj_news_link,
.column .sj_element_news ul li .sj_news_text {
padding: 5px 20px;
color: #fff;
}

.column .sj_element_news ul li .sj_news_text {
padding: 10px 20px;
}

.column .sj_element_news ul li .sj_news_miniature img {
float: none;
}

.column .sj_element_news ul + a {
background: #626262;
color: #fff;
padding: 5px;
font-size: 1.4rem;
display: inline-block;
float: right;
}

/*Footer*/
.footer-wrapper.wrapper {
justify-content: center;
background: #363636;
}

.copyright {
background: #555555;
}

.footer-images {
background: #fff;
margin: 20px;
border-radius: 20px;
}

.footer-images img {
margin: 0 12.5px;
}
.page .footer-wrapper a,
.page .footer-wrapper a:hover {
color: #fff;
}

.page-main-page .sj-outer-row-1 .element-image img {
width: 100%;
object-fit: cover;
object-position: 50%;
}

.column h3,
.custom_title,
.news_title,
.element-text h3,
.element-blog h2,
.element-events h3,
.sj_element_form h3,
.element-newsletters h3,
.page-Generated-news .content h2,
.page-Generated-search .content h2 {
font-size: 40px;
}
.element-news h3,
.element-events .custom_title,
.element-newsletters .custom_title {
display: none;
}

.page-Generated-news em{
display: none;
}



/* POPUP */

.modal {
  display: none;
  color: #fff;
}

.modal-dialog {
  top: 20%;
  background: #3365ab;
  padding: 15px;
  max-width: 600px;
  margin: 0 auto !important;
  display: none;
  text-align: center;

  margin-top: 5px;
}

.modal-dialog.element h3 {
  background: none;
  border: 0;
  color: #00036d;
  font-weight: 700;
}

.modal-dialog.element h3:before,
.modal-dialog.element h3:after {
  display: none
}

.modal-dialog a{
  color: inherit;
  text-decoration: underline;
}

.modal-dialog a:hover {
  color:#003994;
}

.modal-dialog a.button {
  text-decoration: none;
  display: inline-block;
  vertical-align: top;
  color: #fff;
  border-radius: 5px;
width: 30px;
height: 30px;
  margin: 1% 2%;
  border: 0;
font-size: 18px;

position: absolute;
z-index: 10;
top: 5px;
right: 5px;
}

.modal-dialog a.button:after{
content:'\f00d';
font-family: "Fontawesome";
font-size: 15px;
color: #fff;

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.modal-dialog a.button:hover {
  background: #003994;
  color: #fff;
}

.modal-dialog a.button {
  text-decoration: none !important;
  padding: 5px;
}

.modal-dialog a.button span {
  display: block;
  font-size: 14px;
  line-height: 1.1eM;
}

.modal-backdrop {
  opacity: 0.7 !important;
}

.modal.in .modal-dialog > div {
  background: #fff;
  color: #000;
  padding: 10px;
}

.modal-dialog a {
  color: #fff !important;
  text-decoration: none;
}

.modal-dialog a.button {
  background: #00036d;
  color: #3b86ff;
}

#myModal .element-text p:nth-child(2){
padding-top: 30px;
}



/* END OF POPUP */

.policy-files {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.page a, .page a:hover {
color: #570573;
}

.header-wrapper {
background: #570573;
}
.page-main-page .sj-outer-row-3 {
background: url(/img/bespoke/toucan_standard_theme_stjosephs_cpsh/rowbg-purple.jpg) no-repeat center bottom;
background-size:cover;

}
.page-main-page .sj-content-row-1 .element-image .sj_element_image:before {
background: rgba(87, 5, 115, 0.75);
}

.page-main-page .sj-content-row-1 .element-image .sj_element_image a:before {
background: rgba(87, 5, 115, 0.75);
}

.column .sj_element_news ul li{
background: #570573;

}

div.slicknav_menu,a.slicknav_btn {
background: #570573;
}
.footer-wrapper.wrapper {
  background: #570573;
  position: relative;
  z-index: 5555;
}

.copyright{
background: #555555;
}




.modal-dialog {
background: #570573;
}

.modal-dialog a.button {
  background: #000;
}

.modal-dialog a.button:hover {
  background: #000;
}


/*sidenav menu*/

.s-menu-drop-btn {
  display: inline-block;
  font-size: 15px;
  color: #fff;
  height: 43px;
  width: 40px;
  position: relative;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  transition: color ease 250ms;
}

.sidenav{
width: 20%;
margin-right: 2%;
margin-top: 22px;
padding-bottom: 20px;
background: rgba(0,0,0,0);
}

.page-main-page .sidenav {
display: none;
}


.sidenav li{
background: #570573;
border-bottom: solid 1px #fff;
}

.sidenav li:hover,
.sidenav li.open{
background: #78089e;
}

.sidenav li.open{
border-bottom: none;
}

.sidenav ul ul{
position: relative;
display: none;
left: auto;
top: auto;
border-top: solid 1px #fff;
}

.sidenav a{
padding: 20px 15px;
letter-spacing: 1px;
background: transparent;
}

.sidenav li.parent > a {
  width: calc(100% - 40px);
  display: inline-block;
  vertical-align: middle;
}

.sidenav .s-menu-drop-btn > i{
width: 23px;
height: 23px;
border: solid 1px #fff;
border-radius: 50%;
position: absolute;
top:  50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
transition: transform ease 250ms, background ease 250ms;
}

.sidenav .s-menu-drop-btn:hover > i{
background: #fff;
}

.sidenav .s-menu-drop-btn > i:before{
position: absolute;
top: 37%;
left: 53%;
transform: translateY(-50%) translateX(-50%);
font-size: 15px;
width: 10px;
height: 10px;
}

.sidenav .s-menu-drop-btn:hover > i:before{
color: #570573;
}

.page .sidenav a,
.page .sidenav a:hover {
color: #fff;
}

.sidenav .s-menu-drop-btn.active > i{
transform: translateY(-50%) translateX(-50%) rotate(90deg);
background: #fff;
color: #570573;
}

.has-side-menu .content{
width: 78%;
}

.page-main-page.has-side-menu .content {
width: 100%;
}


.footer-wrapper .school-address {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 15px 0;
}

.footer-wrapper .school-address h2{
  margin-bottom: 10px;
  font-size: 44px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
}

p.theme_schoolname {
  font-size: 20px;
  padding-bottom: 8px;
  display: block;
    font-family: 'Goudy Bookletter 1911', serif;
}

.school-address p {
    display: block;
    vertical-align: top;
    margin: 0 0px 13px 0px;
    font-size: 16px;
    color: #fff;
}

.footer-wrapper .theme-address i{
  color: #fff;
}

.footer-wrapper .theme-email i{
  color: #fff;
}

.footer-wrapper .theme-telephone i{
  color: #fff;
}