/*	Cascading Style Sheet
	Website Base Template from W3Schools
	W3.CSS Template | https://www.w3schools.com/w3css/tryw3css_templates_parallax.htm
*/

body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
  height: 100%;
  color: #777;
  line-height: 1.8;
}

.w3-content {text-align: center;}

/*	Headings Tags to be centred	*/
h1,h2,h3,h4,h5,h6 {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/*	Wesbite Buttons	*/
.button {
	background-color: #04AA6D;
	border: none;
	color: white;
	padding: 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 12px;
}

/*	Hero Image - Create a Parallax Effect	*/
.bgimg-hero {
  position: relative;
  min-height: 100vh;
/*	min-height: 800px;	*/
/*	min-height: 100%;	*/
/*	max-height: 100%;	*/
  background-color: #eeeeee;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bgimg-hero::before {
/*
  content: "";
  position: absolute;
  inset: 0;
*/

  /* Choose your tint color */
/*
  background-color: #00ff00cc;
*/

  /* Key magic */
/*
  mix-blend-mode: hard-light;
*/
/*
  z-index: 1;
*/
}

.bgimg-hero > div {
  z-index: 2;
}

/*	Hero Branding Blocks	*/
.bgimg-hero span {display:block; margin-left:auto; margin-right:auto; text-align:center;}

/*	Hero Branding Logo Image	*/
.bgimg-hero .main-logo {width:200px;}

/*	Events Listings	*/
.events-container {display:block; text-align: center; margin-bottom:60px;}
.events-list {display:block; margin-bottom:60px;}


/* Colors */
.w3-kwblue,.w3-hover-kwblue:hover{color:#fff!important;background-color:#2196F3!important}

/* Hero Image - Mobile fallback */
@media (max-width: 1024px) {
  .bgimg-hero {
    background-attachment: scroll;
  }

  .bgimg-hero .main-logo {width:130px;}
}

.w3-wide {/*letter-spacing: 10px;*/}
.w3-hover-opacity {cursor: pointer;}
.w3-top, .w3-bottom {z-index: 100;}

/*	Turn off parallax scrolling for tablets and phones	*/
@media only screen and (max-device-width: 1600px) {
  .bgimg-hero {
    background-attachment: scroll;
    min-height: 400px;
  }
}

@media (max-width: 768px) {
  .bgimg-hero .site-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}