html {
	scroll-behavior: smooth;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

a:focus:not(:focus-visible), button:focus:not(:focus-visible) {
   outline: none!important;
   background-color: transparent!important;
}
a:focus-visible, button:focus-visible {
  outline: 4px dotted #e73;
  outline-offset: 0px;
  outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    outline-offset: 0;
    outline: 3px solid #fff;
    color: #0b0c0c !important;
    background-color: #fff !important;
    box-shadow: 0 -2px #fff, 0 6px #fff;
    text-decoration: none !important;
    transition-duration: 0s;
}
.hide {display: none !important;}

.adminbar #msl-basket-summary:not(:focus-visible) {
       outline: none!important;
    }
	.adminbar #msl-basket-summary:focus-visible, .adminbar #msl-basket-summary:focus-within {
         outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
        outline-offset: 0;
        outline: 3px solid #ffbf47;
        color: #0b0c0c !important;
        background-color: #ffbf47 !important;
        box-shadow: 0 -2px #ffbf47, 0 6px #0b0c0c;
        text-decoration: none !important;
        transition-duration: 0s;
	}
#search input.textbox:focus-visible {
    text-decoration: none !important;
    transition-duration: 0s;
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	position: relative;
	left: 0;
	font-family: 'Montserrat', sans-serif !important;
	font-family: 'Montserrat', Arial, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", "????", SimSun, STXihei, "????", sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
}

.hide {display: none !important;}

#skiptocontent a {
	padding:6px;
	position: absolute;
	top:-40px;
	left:0px;
	color:white;
	border-right:1px solid white;
	border-bottom:1px solid white;
	border-bottom-right-radius:8px;
	background:#BF1722;
	-webkit-transition: top 1s ease-out;
    transition: top 1s ease-out;
    z-index: 100;
}

#skiptocontent a:focus {
	position:absolute;
	left:0px;
	top:0px;
	outline-color:transparent;	
	-webkit-transition: top .1s ease-in;
    transition: top .1s ease-in;
}

@media (prefers-reduced-motion: reduce) {
	#skiptocontent a {
		transition-duration: 0.001ms !important;
	}
}
#skip-link {
    position: relative;
}
#skip-link a {
    position: absolute !important;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 0.625rem 1.563rem;
    color: #ffff;
    font-size: 1rem;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    top: -4.125rem;
    z-index: 9999;
    width: auto;
    background-color: #0d0d0d;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    box-shadow: 3px 3px 20px rgb(142 142 142 / 10%);
    font-weight: bold;
}
#skip-link a:focus,
#skip-link a:hover {
    top: 0;
}
img {
	/*width: 100%;*/
	max-width: 100%;
	height: auto !important;
}
@media (min-width: 576px) {
	.container {
		max-width: 540px!important;
	}
}
@media (min-width: 768px) {
	.container {
		max-width: 100%!important;
	}
}
body a {
    color:#2e3091;
}
body .content p {
	/* font-size: 18px!important; */
}
@media (min-width: 1200px) {
	.container {
		max-width: 1140px!important;
	}
}
#skin_UMSU h1, #skin_UMSU h2, #skin_UMSU h3, #skin_UMSU h4, #skin_UMSU h5, #skin_UMSU h6 {
	font-weight: 900!important;
	line-height: 1.1;
	/* text-transform: uppercase; */
	/* letter-spacing: -2px; */
}
#skin_UMSU h1 {margin-bottom: 20px !important; font-size: calc(1.375rem + 3vw);}
#skin_UMSU h2 {margin-bottom: 16px !important; font-size: calc(1.375rem + 1.5vw);}
#skin_UMSU h3 {margin-bottom: 14px !important;}

@media (min-width: 1200px) {
	#skin_UMSU h1 {font-size: 54px;}
	#skin_UMSU h2 {font-size: 40px;}
}

.panel-colour {
	background: #f9f9f9;
}
.inner-c {
	padding: 15px 0;
}
input.button, .vp_form input.button_cancel, .vp_form input.button_submit, a.basket {
	position: relative;
	background: #231f20;
	color: #fff;
	cursor: pointer;
	transition: 0s;
	border: 2px solid #231f20;
	text-align: center;
	font-size: 15px;
	padding: 5px;
	font-weight: bold;
	transition: 0.3s;
	box-shadow: none;
	padding: 10px 5px!important;
	border-radius: 6px!important;
	box-shadow: 0 2px 6px 0 rgb(0 0 0 / 18%);
}
input.button:hover, .vp_form input.button_cancel:hover, .vp_form input.button_submit:hover, a.basket:hover {
	background: #fff;
	color: #000;
	text-decoration:none;
}

/*footer*/
footer {
	background: #68217a;
	clear: both;
	color: white;
	padding: 60px 0px 30px;}

footer p,
footer a,
footer h3 {
	color: white;}
	
footer h3 {font-size: 15px; margin-bottom: 20px;}
footer h4 {font-size: 13px; margin: 15px 0;}
footer p {font-size: 13px;}

footer .social-med {margin: 10px 0;}

.social-pane i {}

.social-pane a {
	color:#b395bb;
	text-decoration: none;
	-webkit-transition:color 0.2s;
	-moz-transition:color 0.2s;
	-ms-transition:color 0.2s;
	transition:color 0.2s;}

.social-pane a .fa-inverse:before {color: #68217a;}
.social-pane a:hover {color:#fff;}


.footer-info p { margin-bottom: 0;}

footer #footer-follow {margin-bottom: 20px;}

/* Popup */
[data-popup-parent] { position: relative;}

[data-popup-block] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    padding: 60px 0;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    background: rgba(0, 0, 0, .29);
    background: #000a0 0 0 no-repeat padding-box;}

[data-popup-block] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100.01%;
    z-index: 100;
    overflow-y: auto;}

[data-popup-block] .play-button-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;}

[data-popup-block] .play-button-list {  max-width: 750px;}

[data-popup-block] .close-popup {
    position: absolute;
    display: block;
    width: 28px;
    height: 30px;}

[data-popup-block] .close-popup {
    position: absolute;
    top: -22px;
    left: 8px;}

[data-popup-block] .close-popup svg {
    cursor: pointer;
    height: 32px;
    width: 32px;
    filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 1));}

[data-popup-block] .close-popup svg > path { stroke: white;}

[data-popup-block] a {
    -webkit-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out;
    color: #fff;}

[data-popup-block] .close-popup {
    position: absolute;
    display: block;
    width: 28px;
    height: 30px;}
    
.popup-holder [data-popup-block] { display: none;}
[data-popup-parent].popup-active > .container { filter: blur(19px);}


@media (min-width: 640px) {
[data-popup-block] .play-button-list {
    margin: 0 -10px;}
}

@media (min-width: 768px) {
[data-popup-block] {
    overflow: hidden;
    position: absolute;}

[data-popup-block] .close-popup {
    top: -15px;
    left: 10px;}

}

@media (min-width: 1024px) {
[data-popup-block] .play-button-list { max-width: 940px;}
[data-popup-block] .close-popup { top: -10px;}
} 

@media (min-width: 1200px) {
[data-popup-block] .play-button-list { min-width: calc(100% + 30px); }
[data-popup-block] .close-popup { top: -15px;}    
    
}


/*** Section Template ***/
.pageContent {margin: 40px 0;}

.contentWrapper {padding-right: 50px;}

/* Sidebar - Record */
.sideNavWrapper .vinyl {
    max-width: 400px;
    position: relative;
    background: url(/stylesheet/UMSU/vinyl-record.svg) no-repeat;
    background-size: 98% 98%;
    background-position: 25px center;}

.sideNavWrapper .vinyl img {width: calc(100% - 80px);}

@media (max-width: 991px) {
.sideNavWrapper {margin-top: 70px !important;}

}

/* Sidebar - Nav */
.sideNav {margin-top: 40px;}

.sideNav ul {
    list-style: none;
    padding: 0;
    margin: 0;}
    
.sideNav ul.level_3 {padding-left: 20px;}
.sideNav ul.level_4 {padding-left: 20px;}
.sideNav ul.level_5 {padding-left: 20px;}

.sideNav ul.level_3 li a,
.sideNav ul.level_4 li a,
.sideNav ul.level_5 li a  {  padding: 0 0 0 20px !important;}

.sideNav ul.level_3 li a:before,
.sideNav ul.level_4 li a:before,
.sideNav ul.level_5 li a:before {display: none !important;}

.sideNav > ul > li > a {
    -webkit-transition: box-shadow .1s ease-in-out, color .1s ease-in-out;
    transition: box-shadow .1s ease-in-out, color .1s ease-in-out;
    position: relative;
    display: block;
    vertical-align: top;
    font-size: 14px;
    letter-spacing: -.7px;
    font-weight: 700;
    border-radius: 9px;
    border: 3px solid black;
    position: relative;
    text-decoration: none;
    text-align: left;
    box-shadow: -4px 0 0 0 #000;
    margin: 10px;}

.sideNav > ul > li > a span {
    -webkit-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
    display: block;
    padding: 7px 15px ;
    text-decoration: none;
    color: #000;
    background: white;
    border-radius: 9px;}

.sideNav > ul > li > a:before {
    content: "";
    position: absolute;
    left: 0;
    right: -3px;
    bottom: -3px;
    top: -3px;
    border: 3px solid #000;
    border-radius: 9px;}
    
.sideNav > ul > li.hasUl > a:after {
    display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f067";
    color: #000;
    position: absolute;
    top: 7px;
    right: 15px;
}

.sideNav > ul > li.hasUl.clicked-once > a:after {
    content: "\f068";}
    
.sideNav > ul > li.hasUl li a {
    color: #773f86;
    font-weight: bold;
    position: relative;
    padding: 0 0 0 10px;
    font-size: 14px;
    text-decoration: none;}
    
.sideNav > ul > li.hasUl li a:hover,
.sideNav > ul > li.hasUl li a.current {text-decoration: underline;}    

.sideNav > ul > li.hasUl li a:before {
    color: #773f86;
    display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f8d9";
	margin-right: 5px;}
	
/* Banner */
#banner {overflow: hidden;}

#banner .msl-title, 
#banner .msl-item-details {display: none;}


.slick-dots li,
.slick-dots li button {
    width: 13px;
    height: 13px;}
    
#banner .slick-dots {bottom: 15px;}
.msl_navbar.slick-slider .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #000;
    background: #000 !important;}

.msl_navbar.slick-slider .slick-dots li button:before {
    line-height: 10px;
    width: 13px;
    height: 13px;
    opacity: 1;
    color: transparent;
    border: 2px solid #fff;}

.msl_navbar.slick-slider .slick-dots li button {
    width: 13px;
    height: 13px;}
    
.msl_navbar.slick-slider .slick-dots li button:hover {
    background: white;
    -webkit-transform: scale(1);
    transform: scale(1);
    width: 13px;
    height: 13px;}

@media (max-width: 991px) {
    #banner .slick-slider { margin-bottom: 0px;}
}

/* Image navigation */
#imageNav {}

#imageNav ul {
    list-style: none;
    padding: 0;
    margin: 0;}

#imageNav li {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    vertical-align: top;}

#imageNav.fourColumns li {
    width: 47%;
    width: calc(50% - 23px);
    margin: 10px;}

#imageNav li a {text-decoration: none;}
#imageNav li img {
    width: 100%;
    border-radius: 24px;
    border: 3px solid black;
    transition: box-shadow 200ms ease-in-out, transform 200ms ease-in-out;}
#imageNav li img:hover {
    box-shadow: 6px 6px 0 0 #000;
    -webkit-transform: translate(-4px, -4px);
    -ms-transform: translate(-4px, -4px);
    transform: translate(-4px, -4px);}


#imageNav .nav-details {
    padding: 10px 0;
    color: #000;}

#imageNav .nav-details .msl-imagenav-title {
    font-weight: 900;
    display: block;
    text-transform: uppercase;}

#imageNav .nav-details .msl-imagenav-description {font-size: 14px;}    

@media (min-width: 500px) {
    #imageNav li {
        width: 47%;
        width: calc(50% - 13px);
        margin: 0 10px 20px 0;}
    
    #imageNav li:nth-child(even) {margin: 0 0 20px 10px;}
    
    #imageNav.fourColumns li {
        width: 31%;
        width: calc(33% - 23px);
        margin: 10px !important;    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #imageNav li {
        width: 31%;
        width: calc(33% - 23px);
        margin: 0 0 20px 0;}
    
    #imageNav li:nth-child(even) {margin: 0;}
    #imageNav li:nth-child(2),
    #imageNav li:nth-child(5),
    #imageNav li:nth-child(8),
    #imageNav li:nth-child(11) {margin: 0 20px 20px 20px;}
    
}


@media (min-width: 768px) {
  #imageNav.fourColumns li {
        width: 23%;
        width: calc(25% - 24px);
        margin: 10px !important;  }
}


/* Groupings */
#filterlist li {}

#filterlist li {
    display: inline-block;
    width: 90%;
    margin-bottom: 20px;
    vertical-align: top;}

#filterlist li a {text-decoration: none;}
#filterlist li img {width: 100%;}

#filterlist .details {
    padding: 10px 0;
    color: #000;}

#filterlist .details .msl-gl-link {
    font-weight: 900;
    display: block;
    color: #000;
    text-transform: uppercase;}

#filterlist .details .msl-gl-attributes {display: none;}    

@media (min-width: 400px) {
    #filterlist li {
        width: 46%;
        width: calc(50% - 13px);
        margin: 0 10px 20px 0;}
}

@media (min-width: 769px) {
    #filterlist li {
        width: 31%;
        width: calc(33% - 11px);}
}

@media (min-width: 992px) {
    #filterlist li {
        width: 22%;
        width: calc(25% - 14px);}
}



/* Filter */
.sg-c {
    padding: 25px 0;
}
.m-filter {
    display: block;
    padding: 0;
}
#filterlist ul.msl_organisation_list { margin: 1em 0;}

.search-c {
	background: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: table;
	display: -ms-flexbox;
	display: display-flex;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	z-index: 2;
	position: relative;
}
@media (min-width: 1200px){
.search-c {
    width: 100%;
    position: relative;
    padding-bottom: 15px;
    border-radius: 2px;
}
}
/*SearchDropdowns*/
.filter-c {
	padding: 0px;
	border-radius: 0;
	border: 0px solid #c0c0c0;
	width: 100%;
	z-index: 1;
	height: auto;
	position:relative;
	display: block;
	float:  left;
	margin-bottom: 15px;
}
@media (min-width:480px){
	.filter-c {
		position: relative;
		top: 10px;
		width: 50%;
		margin-bottom: 20px;
		z-index: 1;
		border: 0px solid;
		border-radius: 0px;
		padding: 0;
	}
}
@media(min-width:1200px){
    .filter-c {
		position: relative;
		top: 10px;
		width: 50%;
		margin-bottom: 20px;
		z-index: 1;
		border: 0px solid;
		border-radius: 0px;
		padding: 0;
	}
}
/*SearchDropdownList*/
.filter-c span {
	position: relative;
	float:left;
	margin-right:10px;
}
.filter-c .type, .filter-c .date {
 	color: #68217c;
    padding: 10px;
    width: 100%;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid #68217c;
}
.type:after, .date:after {
	content: "\f078 ";
    font-family: 'Font Awesome 5 Free';
    font-size: 20px;
    z-index: 2;
    color: #68217c;
    float: right;
    display: block;
    border-bottom: 0px solid!important;
    font-weight: bold;
    height: 44px;
    width: 45px;
    position: absolute;
    right: 0;
    top: 0;
    padding: 8px 14px;
    text-align: center;
}

.type.up:after, .date.up:after, .down.up:after {
    content: "\f077";
}

.up {    background: none;}

/*FilterTitle*/
.f-title {
    color: #000;
    font-weight: bold;
    margin-bottom: 8px;
}
/*LiveSearch*/
.livesearch-c {
	float: left;
	display:block;
	width: 100%;
	padding: 5px 0px;
}
@media (min-width:480px){
    .livesearch-c {
		width:50%;
		padding: 12px 0 0 20px;
	}
}
.search-icon {
    float: left;
    width: 100%;
    position: relative;
    z-index: 0;
    outline: 0!important;
}
/*.search-icon:before {
    content: "";
    background: #000;
    position: absolute;
    width: 40px;
    height: 100%;
    right: 0;
    top: 0;
    z-index: 3;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}*/
.search-c input#filter {
	display: block;
    font-size: 15px;
    position: relative;
    padding: 10px;
    width: 100%;
    border: 0;
    border-radius: 6px;
    border: 1px solid #68217c;
}
.search-c input#filter::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #68217c;
  opacity: 1; /* Firefox */
  font-size:16px!important;
}

.search-c input#filter:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #68217c;
  font-size:16px!important;
}

.search-c input#filters::-ms-input-placeholder { /* Microsoft Edge */
  color: #68217c;
  font-size:16px!important;
}
 @media (min-width:480px) {
 	.search-c input#filter {
 		font-size: 15px;
 	}
 }
 @media (min-width: 1200px) {
 	.search-c input#filter {
		font-size: 15px;
 	}
 }
 @media (min-width: 1600px) {
 	.search-c input#filter {
 		font-size: 15px;
 		font-weight: 600;
 		width: 100%;
 	}
 }
.search-icon:after {
    content: "\f002 ";
    font-family: 'Font Awesome 5 Free';
    font-size: 20px;
    z-index: 100;
    color: #68217c;
    display: block;
    border-bottom: 0px solid!important;
    padding: 0 5px;
    font-weight: bold;
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 45px;
    padding: 8px 14px;
}
/* Filters and search*/
#filters {
    display: none;
    position: absolute;
    background: white;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 1%);
    border-radius: 4px;
    -webkit-break-inside: avoid;
    break-inside: avoid;
    min-width: 100%;
    padding: 10px 0;
    z-index: 1;
    top: 78px;
}

#filters li {
	padding: 5px 10px;
    margin: 0;
    display: inline-block;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    color: #000;
    width: 100%;
    text-align: left;
}
@media only screen and ( max-width: 460px) {
	#filters li {
		width: 100%;
		border-bottom: 1px solid #fff;
	}
}
#filters li.active, #filters li:hover {
	color: #68217c;
    font-weight: bold;}

#filterlist li {display: none;}
#filterlist li.show-item {display: inline-block;}

.show {
    display: block!important;
}


/* Events */

/*Events*/
#events {
display:block;
width:100%;
}



.msl_eventlist > div {
    display: flex;
    flex-wrap: wrap;}

.event_item {
    flex: 1 1 100%;
    background: #fff;
    width: 100%;
    margin: 10px 0;
    box-shadow: 3px 3px 20px rgb(142 142 142 / 10%);
    border-radius: 10px;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;}

.event_item dl {margin-bottom: 0;}

.msl_event_hook {display: none;}

.event_item:hover {
box-shadow: 3px 3px 20px  rgb(142 142 142 / 20%);
cursor:pointer;
}
@media (min-width: 600px) {
.event_item {
    flex: 1 1 45%;
    margin: 0 20px 20px 0;
    max-width: 49%}
    
}

/*@media (min-width: 769px) {
.event_item {
    flex: 1 1 33%;
    margin: 0 20px 20px 0;
    max-width: 30%}
    
}*/

.event_item .msl_event_name {
    font-weight: 900;
    color: #000;
    margin: 15px 0;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
}
.event_item .details {
	padding:15px 20px;
	font-size: 13px;
}

.event_item img {width: 100%;}

.event_item .details .msl_event_time {
    color: #68217a;
    margin: 10px 0 0 0;
}
.event_item .details .msl_event_description {
    display:none;}

.event_item .msl_event_types {display: none;}

.relEvents {
    margin: 50px auto !important;
    padding: 50px !important;
    background: #fbfbfb;}
    
.relEvents h5 {margin-bottom: 20px; text-align: center;}

@media (min-width: 992px) {
.relEvents .event_item {
    flex: 1 1 33%;
    margin: 0 20px 20px 0;
    max-width: 31%;}
}


/* News */
.msl-news .msl-item,
.news_item {
    display: flex;
    width: 100%;
    margin: 0px 0px 15px;
    box-shadow: 3px 3px 20px rgb(142 142 142 / 10%);
    border-radius: 10px;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    }

.msl-news .msl-item:hover,
.news_item:hover  {
    box-shadow: 3px 3px 20px rgb(142 142 142 / 20%);
    cursor:pointer;}

.msl-news .msl-item .msl-image,
.news_item .msl-image {
    display: inline-block;
    width: 100px;}

.msl-news .msl-item .msl-image img,
.news_item .msl-image img {
    height: 100%;
    object-fit: cover;}

.msl-news .msl-item .details,
.news_item .details{
    display: inline-block;
    width: 77%;
    width: calc(100% - 100px);
    padding: 10px 10px 10px 20px;
    vertical-align: top;
    font-size: 13px;}

.msl-news .msl-item .msl-title,
.msl-news .msl-item .msl-title a,
.news_item h5,
.news_item h5 a {
    font-weight: 900;
    color: #000;
    margin: 15px 0;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;}

.msl-morelink {margin: 0 5px;}
.news_item .msl-pubdate {display: none;}


@media (min-width: 500px) {
.msl-news .msl-item .msl-image,
.news_item .msl-image {width: 140px;}
    
.msl-news .msl-item .details,
.news_item .details{
    width: 77%;
    width: calc(100% - 140px);} 
}



/* Pagination */
.paging {
    display: block;
    margin: 20px 0;
    text-align: center;}

.paging a {
    padding: 3px 8px;
    color: #000;
    font-weight: 600;
    text-decoration: none;}

.paging a.current {
    border: 2px solid #68217a;
    border-radius: 50px;
    color: #68217a;}
    
.paging a:hover {
    color: #68217a;
    text-decoration: none;}

.paging a.prev,
.paging a.next {display: none;}



/* Popup window */
.modal {
    position: absolute;
    z-index: 10000; /* 1 */
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
}

.modal.is-visible {
    visibility: visible;
    display: block;}

.modal-overlay {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13,1,61,0.82);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.3s, opacity 0.3s;
}

.modal.is-visible .modal-overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;}

.modal-wrapper {
    position: absolute;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    box-shadow: 0 0 1.5em hsl(0deg 0% 0% / 35%);}

.modal-transition {
  transition: all 0.3s 0.12s;
  opacity: 0;
}

.modal.is-visible .modal-transition {
  opacity: 1;
}

.modal-content,
.modal-body {
    padding: 0;
    border: none !important;}

.modal-close {
    position: absolute;
    top: -45px;
    right: 10px;
    padding: 1em;
    color: #fff;
    background: none;
    border: 0;
    font-size: 22px;}

.modal-close:hover {
  color: #777;
}

.modal-content > *:first-child {
  margin-top: 0;
}

.modal-content > *:last-child {
  margin-bottom: 0;
}


/** Backgrounds **/
.bg-purple {background: #68217a;}
.bg-pink, .popup-holder .bg-pink {  background: #e84a9a;}
.bg-orange, .popup-holder .bg-orange {  background: #fc9a18;}
.bg-green, .popup-holder .bg-green {  background: #2ca255;}
.bg-blue, .popup-holder .bg-blue {  background: #52a9e8;}
.bg-peach, .popup-holder .bg-peach {  background: #ff6767;}
.bg-light-purple, .popup-holder .bg-light-purple {  background: #c081d8;}



/* join */
[id="group-join"] {
    margin: 20px 0;
    background: #f4f4f4;
    padding: 30px;}

[id="group-join"] .join_list {
    list-style: none;
    padding: 0;}


textarea,
input {font-family: 'Montserrat', sans-serif !important;}

.backarrow,
.backarrow:hover {
    color: #773f86;
    font-weight: bold;
    position: relative;
    padding: 0 0 0 10px;
    font-size: 14px;
    text-decoration: none;
    margin-bottom: 20px;
    display: block;
}


.newsStyles {overflow-x: visible !important; margin: 20px 0;}

/* -----------Functional styles – do not change these they are needed for the widget to function----------------- */

.msl_event_calendar .msl-cal-wrapper {position:relative; top:0; left:0;}
.msl_event_calendar .msl-cal-hoverbox {position:absolute; top:0; left:-6000px;}
.msl_event_calendar td:hover .msl-cal-wrapper {z-index:200;} /* need to specify base z-index too perhaps */
.msl_event_calendar table, .msl_event_calendar tr, .msl_event_calendar td, .msl_event_calendar .msl-cal-hoverbox dd, .msl_event_calendar .msl-cal-hoverbox dl, .msl_event_calendar .msl-cal-hoverbox dt  {margin:0;padding:0;text-indent:0;}  /* zero all elements used in calendar styles*/

/* -----------Dimensions of calendar----------- */

.msl-eventcal-default {width:100%;}
.msl-eventcal-default td {height:40px;}

/*---- Whole calendar styling ----- */

.msl-eventcal-default {border-color: #d7d7d7;} /* border of outside of table */
.msl-eventcal-default td {border: 1px solid #d7d7d7;} /* border of cells */

/* ----------Month title--------------- */

.msl-eventcal-default .msl_event_calendar_title td {border:none; background-color:#e9e9e9; color:#000000;}


/* ------------Inactive dates--------------- */

.msl-eventcal-default td.month {background-color:#ffffff !important; color: #000000 !important;}
.msl-eventcal-default td.othermonth {color:#e9e9e9 !important; background-color:#ffffff !important;}


/* ---------------Date with event attached--------------- */

.msl-eventcal-default td.msl_event_calendar_selected_day {background-color: #68217c69 !important;}


/*a.msl_event_calendar_item {color: #ccc !important;} date colour and clickable area*/

.msl-eventcal-default td.msl_event_calendar_selected_day:hover .msl-cal-wrapper{color:#fff; background:#68217c ;} /* colour of text when hovered over - you need to specify background so that z-index works in IE */
.msl-eventcal-default td.msl_event_calendar_selected_day:hover {background-color:#68217c  !important;}


/* ---------------Eventlist box that appears----------------- */

.msl-eventcal-default .msl-cal-hoverbox {padding:20px; border: 0px solid #000000; text-align:left; background: #68217c; color: #fff;}
.msl-eventcal-default td:hover .msl-cal-hoverbox {top:2em; left:0em;width:12em;}  /* -------------- size and positioning of the hoverbox relative to the date ------------*/
/* add some opacity here */


/* ------------Events list ---------------- */

.msl-eventcal-default .msl-cal-hoverbox a {padding:0; display:block; color: #fff; text-decoration: none; margin-bottom: 15px;} /* links in hoverbox */
.msl-eventcal-default .msl-cal-hoverbox a:hover {text-decoration: underline; }
.msl-eventcal-default .msl-cal-hoverbox a dd {padding-left:0px;}
.msl-eventcal-default .msl-cal-hoverbox a:hover {background: transparent;} /* hoverover colour for links in hoverbox */
.msl-eventcal-default .msl-cal-hoverbox dt {font-weight:bold;color: #fff;} /* colour and styles for event times */




@media (min-width: 992px) {
.content > #msl_event {
    flex: 0 0 auto;
    width: 66.66666667%;
    margin: auto;}
}

@media (max-width: 599px) {
    html {overflow-x: hidden;}
}


/*Photo Gallery*/
.photogallery {
    height: auto;
}


/* fullWidth slider */
#slider.fullWidth .details {display: none !important;}
#slider.fullWidth .slick-slider .news-content .text-container { padding: 0;}
#slider.fullWidth .msl-news .msl-item .msl-image {    width: 100%; padding: 0;}
#slider.fullWidth  .slick-slider .news-content {  width: 100%;}

.vp_content .hint-text {
	display:block;
}



/* breadcrumb */
#breadcrumb .breadcrumb li {
	padding: 4px 0;
}
#breadcrumb .breadcrumb li, #breadcrumb .breadcrumb li a {
	color: #68217a;
	font-size: 0.9rem;
	transition: 0.3s;
	display: inline-block;
	padding: 0;
}
#breadcrumb .breadcrumb li a:hover {
	color: #000;
	text-decoration: underline;
}

#breadcrumb .msl-breadcrumb-separator { margin: 0 4px;}

.msl-breadcrumb {
    padding: 0;
    margin: 0 0 10px 0;}
    
#transaction span.transaction_id {
    font-size: 100%;
}