/*------------------------------------*\
    MAIN
\*------------------------------------*/
body {	
    color: #212529;
	font-family:var(--main_font,'Open Sans', sans-serif);
}
img {
	max-width:100%;
	height:auto;
}
iframe {
	max-width:100%;
}
.screen-reader-text {
	display:none!important;
}
#app {
	position:relative;
	overflow:hidden;
	opacity:0;
	transition:300ms;
}
body.loaded #app {
	opacity:1;
}
#app #main {
	padding:20px 0;
	min-height:100vh;
}
#app .contents.single #main {
	padding-top:50px;
}
.contents {
	position:relative;
}
.contents.single {
	background:#fff;
	z-index:10;
    transition: 300ms;
}
#app #main.menuMain {
	min-height:100vh;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
h1,h2,h3,h4{
	color:rgb(var(--main_colour,160,160,160));
	font-family:var(--header_font,'Open Sans', sans-serif);
}
 a {
	color:rgb(var(--main_colour,160,160,160));
}
 a:hover {
	color:rgb(var(--main_colour,160,160,160));
}
table td {
	padding:5px 10px;
	border:1px solid #cfcfcf;
}
.btn-primary {
    color: #fff;
    background-color:rgb(var(--main_colour,160,160,160));
    border-color:rgb(var(--main_colour,160,160,160));
}
.btn-primary:hover {
	color: #fff;
    background-color:rgb(var(--main_colour,160,160,160));
    border-color:rgb(var(--main_colour,160,160,160));
}
#app #main.hasbg .menu a{
	color:#fff;
	text-decoration:none;

}
#header {
	background:rgb(var(--main_colour,160,160,160));
	color:#fff;
	font-size:2em;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:50px;
	overflow:hidden;
}
#header.loaded {
	position:fixed;	
}

#header .row {
	height:50px;
}
#header .siteTitle{
	text-align:center;
	font-size:1em;
	margin:0;
	color:#fff;
	padding:0 60px;
}
#header .back {
	position:absolute;
	width:60px;
}
#header a{
	color:#fff;
}
.app_logo {
	text-align:center;
	padding:10px 15px;
	padding-bottom:20px;
}
.app_logo img {
	height:100px;
	width:auto;
}
.appIcon {
	text-align:center;
	padding:10px 0;	
    display: flex;
    align-items: center;
}
.appIcon a{	
    display: block;
	text-decoration:none;
    flex: 1;
}
.appIcon .icon {
	width:2em;
	height:2em;
	color:#fff;
	background:rgb(var(--main_colour,160,160,160));
	color:#fff;
	position:relative;
    border-radius: 50%;
	margin:0 auto 10px;
	font-size:30px;
}
.appIcon .icon > *{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.appIcon .icon > img{
	width:70%;
	height:70%;
}
.appIcon .link {
	line-height:1.2;
}
.submenu .appIcon a {
	display:flex;
	align-items:center;
}
.submenu .appIcon .icon {
	margin:0 10px;
	flex: 0 0 auto;
}
@media (min-width:992px){
	#app #main {
		padding:50px 0;
	}
	.app_logo {
		padding:25px 15px;
	}
	.appIcon {
		padding:20px 0;
	}
	.appIcon .icon {
		font-size:35px;		
	}
	.appIcon .link {
		font-size:1.2em;
	}
}
/*Single App*/
.container.singleContainer {
	margin-top:30px;
	margin-bottom:50px;
}
#app #main .postThumb {
	width:100%;
	margin-top:-30px;
	margin-bottom:20px;
}
#app #main .postThumb img{
	width:100%;
	max-height:400px;
	object-fit:cover;
}
/*News*/
.list-item{
    overflow: hidden;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}
.list-item-image{
	text-align:center;
}
.list-item-image img {
	width:100%;
}
.list-item-image a{
	display:block;
	padding:10px 0;
}
.list-item-text{

}
.list-item-text p.date{
	font-size:0.8em;
	margin:0;
}
/*Events*/
.eventItem {
	margin:0 auto 20px;
}
.eventItem .date{
	background:rgb(var(--main_colour,160,160,160));
	color:#fff;
	text-align:center;
	height: 4.5em;
	width: 4.5em;	
	border-radius: 50%;
	line-height:1.2;	
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}
.eventItem .date .day{
	font-size:1.8em;
	line-height:1;
}
.eventItem .date .month{	
    text-transform: uppercase;
    margin-bottom: 0.1em;
}
.eventItem .eventText {
	padding-bottom:5px;
	margin-bottom:1em;
	border-bottom:solid 1px rgba(var(--main_colour,160,160,160) ,0.5);
}
@media (min-width:992px){
	.eventItem .date{
		font-size:22px;
	}
}
/*Carousel*/
.slick-dots li button {
	color:#000;
}
.slick-dots li:only-child {
	opacity:0;
}
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots{
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.slick-dots li{
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}
.slick-dots li button {
	font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
	border:solid 2px;
	border-radius:50%;	
    outline: none;
    background: transparent;
}
.slick-dots li button:before {
	color:transparent;
    width:12px;
	height:12px;
	position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    text-align: center;
	background:#000;
	border-radius:50%;
	opacity:0;
	transform:translate(-50%,-50%);
}

.menuMain.hasbg .slick-dots li button:before {
	background:#fff;
}
.slick-dots li.slick-active button:before {
    opacity: 1;
}
#main.hasbg .slick-dots li button {
	color:#fff;
}
.menuitems .slick-arrow {
	font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 35px;
    height: 50px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    opacity: 0.75;
}
.menuitems .slick-arrow:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 50px;
    line-height: 1;
    opacity: 1;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.menuitems .slick-next:before {
	content:'\f054';
}
.menuitems .slick-prev:before {
	content:'\f053';
}
.menuitems .slick-next {
    right: -25px;
}
.menuitems .slick-prev {
    left: -25px;
}
.menuitems .slick-arrow.slick-disabled {
	opacity:0;
}
@media (min-width:992px){
	.app_logo img {
		height:150px;
	}
	.menu .appIcon {
		height:25vh;
	}
	.container.singleContainer {
		max-width:992px;
	}
}