/*
=========================================

Project Name: Katch Katikati
Creation date: 27 July 2026
Last modified: 25 Aug 2026
Description: 
Version: 1.0
Author: Steve Hopper | steve@xeno.co.nz
Company: xeno web development
Company URI: http: //www.xeno.co.nz

=========================================
*/

body { font-family: 'Open Sans', sans-serif;font-weight:300;font-size: 16px;line-height: 1.6;color: #333; }
h1, h2, h3, h4, h5, h6, .nav-item, .card-title, #mobile-bar { font-family: "Oswald", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal; }
hr.green { border: none; height: 3px; background-color: #A8CE3B; }
/* h2 { font-size:2.2rem; } */
/* .lead { font-size:16px; } */
a { color:#666;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;text: decoration:none; }
a:focus, a:hover { color:#000;text-decoration: none; }
.bg-green { background-color:#a8ce3b; }
.svg-header { background-image:url(../images/green-curve-new.svg);background-repeat:no-repeat;background-size:cover;background-position:left top;margin-bottom:-1px;height:43px; }
.svg-header-white { background-image:url(../images/white-curve.svg);background-repeat:no-repeat;background-size:cover;background-position:left top;margin-bottom:-2px; }
.svg-green { background-image:url(../images/green-curve-rev-new.svg);background-repeat:no-repeat;background-size:100%;background-position:center -1px;margin-top:-1px; }
.svg-grey { background-image:url(../images/grey-curve-rev-new.svg);background-repeat:no-repeat;background-size:contain;background-position:left top;margin-top:-1px;min-height:400px; }
.btn-green { background-color:#93C23E;border-color:#93C23E; }
.btn-green:hover { background-color:#68A038; }
.btn-warning:hover { background-color:#EBB105; }
.bg-dark-green { background:#0B4A31;}

.open-sans-body {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
	"wdth" 100;
}
.handlee-regular {
  font-family: "Handlee", cursive;
  font-weight: 400;
  font-style: normal;
}
.grey-box-arrow { background:#f3f3f1;clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%); }
.page-header h1 { font-size:2.4rem;line-height:3.2rem;color:#FFF;text-transform:uppercase; }
.page-header h1 span.larger { font-size:4rem; }
h2.section-header, h3.section-header { text-transform: uppercase;color:#0F7B39;line-height:2.2rem; }
h2.sub-heading { font-size:1.6rem;color:#FFF; }
.list-image { /*height:120px;overflow:hidden;*/ }

#top-bar, #mobile-bar { background-color: #0B4A31;height: 45px;border-bottom: 1px solid #FFF;padding: 0;color:#FFF; }
#mobile-bar { height:60px;}
#top-bar .contacts { padding: 0px 10px;line-height: 44px;height: 44px;color:#FFF; }
#top-bar .social-icons { color:#FFF; }

#home { background-image:url(../images/home-hero-mobile-1.jpg);background-repeat:no-repeat;background-position:center -150px;background-attachment: fixed;background-size:auto; }
#events, #members, #projects, #whoWeAre, #communitySupport{ background-repeat:no-repeat;background-position:center top;background-attachment: fixed;background-size:auto; }
#members { background-image:url(../images/members-hero-mobile-new.jpg); }
#events { background-image:url(../images/events-hero-mobile.jpg); }
#projects { background-image:url(../images/projects-hero-mobile.jpg); }
#whoWeAre { background-image:url(../images/who-we-are-hero-mobile-new.jpg); }
#communitySupport { background-image:url(../images/community-hero-mobile.jpg); }
.header { background-image:url(../images/header-desktop-new.svg);background-repeat:no-repeat;background-size:contain;height:230px;height:300px; }

#home .header { height:300px; }
#events .header, #members .header, #projects .header, #whoWeAre .header, #communitySupport .header { height:500px; }

.navbar-nav .nav-link { font-size:1.1rem;color:#FFF;text-transform: uppercase; }
.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover { color:#FEC101; }

.events-container { padding-top:3rem; }
.partners-container { padding-top:4rem; }
.card { border-radius:0;clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%); }
.angled-card { filter: drop-shadow(0px 4px 3px rgba(0, 0, 0, 0.2));transition: transform 0.3s ease, box-shadow 0.3s ease; }
.corner { width:50px;height:50px;position:absolute;top:0;right:0;background-image:url(../images/card-corner.svg);background-repeat:no-repeat;opacity:0.6; }
.card-title { color:#666; }
.card-text { font-size:.95rem;line-height:1.2rem;}
.card-footer { border:none;background:#FFF;padding-bottom:15px; }
.featured { position:absolute;left:0;top:10px;width:90px;height:30px;background:url(../images/featured.svg);background-repeat:no-repeat;}

.carousel-control-prev,	.carousel-control-next { width: auto;align-self: stretch; }
.carousel-control-prev-icon,.carousel-control-next-icon { filter: invert(1); }
#footer { background-color:#2a2a2a; }
#footer a { text-decoration:none; }

#xeno { background-color:#000;}

.overlay { position: fixed;z-index: 1031;height: 100%;width: 0;left: 0;top: 0;background-color: rgb(169,206,59, 0.9);overflow-x: hidden;transition: 0.5s; }
.overlay-content {position: relative;top: 0;width: 100%;text-align: center;margin-top: 50px;}
.overlay a {padding: 8px;text-decoration: none;font-size: 1.8rem !important;color: #ffffff;display: block;transition: 0.3s;border:none;}
.overlay a:hover, .overlay a:focus {color: #f1f1f1;}
.overlay .closebtn {z-index:99999;position: absolute;bottom: 10px;left: 50%;margin-left:-25px;font-size: 60px !important;}

.hamburger {padding: 15px 15px;display: inline-block;cursor: pointer;transition-property: opacity, filter;transition-duration: 0.15s;transition-timing-function: linear;font: inherit;color: inherit;text-transform: none;background-color: transparent;border: 0;margin: 0;overflow: visible; margin-top:5px;}
.hamburger:hover {opacity: 0.7; } 
.hamburger.is-active:hover {opacity: 0.7; } 
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {background-color: #FFF; }
.hamburger-box { width: 40px;height: 24px;display: inline-block;position: relative; }
.hamburger-inner { display: block;top: 50%;margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px;height: 4px;background-color: #FFF ;border-radius: 4px;position: absolute;transition-property: transform;transition-duration: 0.15s;transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after { content: "";display: block; }
.hamburger-inner::before {top: -10px; }
.hamburger-inner::after {bottom: -10px; }
.hamburger--spin .hamburger-inner {transition-duration: 0.22s;transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin .hamburger-inner::before {transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
.hamburger--spin .hamburger-inner::after {transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin.is-active .hamburger-inner {transform: rotate(225deg);transition-delay: 0.12s;transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spin.is-active .hamburger-inner::before {top: 0;opacity: 0;transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
.hamburger--spin.is-active .hamburger-inner::after {bottom: 0;transform: rotate(-90deg);transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
.mobile-swiper { display:block !important; }
.tablet-swiper { display:none !important; }
.desktop-swiper { display:none !important; }
.swiper-button-prev, .swiper-button-next { color:#0F7B39; }

.event-location { margin-bottom:1rem; }
.event-start { margin-bottom:1rem; }
.event-end { margin-bottom:1rem; }

.word { font-family: "Oswald", sans-serif;font-size:3.6rem;line-height:1;color:#FFF;text-transform: uppercase; }

.page-header h1#one { z-index:1;position:absolute;top: 0;left: 0;right:0; }
.page-header h1#two { z-index:2;position:absolute;top: 0;left: 0;right:0; }
.page-header h1#three { z-index:3;position:absolute;top: 0;left: 0;right:0; }
.page-header h1#four { z-index:4;position:absolute;top: 0;left: 0;right:0; }

#selcat {
  appearance: base-select;
  background-color: #FEE201;
  border: 3px solid #a8ce3b;
}

#newsletter { background-color:#93C23E;padding:3rem 0rem; }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	#home { background-image:url(../images/home-hero-mobile.jpg);background-repeat:no-repeat;background-position:center top;background-attachment: fixed;background-size:auto; }
	/* #events, #members, #projects, #communitySupport, #whoWeAre { background-image:url(../images/content-images/sunrise.jpg);background-repeat:no-repeat;background-size:contain;background-position:center -190px;background-attachment: fixed;background-size:cover; } */
	.header { height:480px;height:340px; }
	.svg-header { height:59px; }
	#xeno { background-color:#1b1b1b;padding:30px 30px;font-size:14px;color:#666;margin-bottom:0px; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	#home { background-image:url(../images/home-hero-tablet-1.jpg);background-repeat:no-repeat;background-size:auto;background-position:center -230px;background-attachment: fixed; }
	#events, #members, #projects, #communitySupport, #whoWeAre { background-repeat:no-repeat;background-position:center top;background-attachment: fixed;background-size:auto; }
	#events { background-image:url(../images/events-hero-tablet.jpg); }
	#members { background-image:url(../images/members-hero-tablet-new.jpg); }
	#projects { background-image:url(../images/our-projects-hero-tablet.jpg); }
	#communitySupport { background-image:url(../images/community-hero-tablet.jpg); }
	#whoWeAre { background-image:url(../images/who-we-are-hero-tablet-new.jpg); }
	.header { height:480px;height:340px; }
	
	#home .header { height:340px; }
	#events .header, #members .header, #projects .header, #whoWeAre .header, #communitySupport .header { height:540px; }
	
	.grey-box-arrow { background:#f3f3f1;clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%); }
	.page-header h1 { font-size:2.6rem;line-height:3.2rem;color:#FFF;text-transform:uppercase;/*text-align:center;*/ }
	.svg-header { height:60px;height:85px; }
	.pt-md-6 { padding-top:4rem !important; }
	.mt-md-6 { padding-top:4rem !important; }
	.svg-grey { min-height:300px; }
	.mobile-swiper { display:none !important; }
	.tablet-swiper { display:block !important; }
	.desktop-swiper { display:none !important; }
	.event-location { margin-bottom:0; }
	.event-start { margin-bottom:0; }
	.event-end { margin-bottom:0; }
	
	.word { font-size:4.6rem;}
	.page-header h1#one { z-index:1;position:absolute;top: 50px;left: 0;right:0; }
	.page-header h1#two { z-index:2;position:absolute;top: 50px;left: 0;right:0; }
	.page-header h1#three { z-index:3;position:absolute;top: 50px;left: 0;right:0; }
	.page-header h1#four { z-index:4;position:absolute;top: 50px;left: 0;right:0; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	#home { background-image:url(../images/home-hero-mid.jpg);background-repeat:no-repeat;background-position:center -50px;background-attachment: fixed;background-size:auto; }
	#events, #members, #projects, #communitySupport, #whoWeAre { background-repeat:no-repeat;background-position:center top;background-attachment: fixed;background-size:auto; }
	 #events { background-image:url(../images/events-hero.jpg); }
	 #members { background-image:url(../images/our-members-full.jpg); }
	 #projects { background-image:url(../images/our-projects-hero.jpg); }
	 #communitySupport { background-image:url(../images/community-hero.jpg); }
	 #whoWeAre { background-image:url(../images/who-we-are-full.jpg); }
	.svg-header { height:85px; }
	.header { background-image:url(../images/header-992-new.svg);background-repeat:no-repeat;background-size:100%;/*height:302px;height:340px; */}
	
	#home .header { height:340px; }
	#events .header, #members .header, #projects .header, #whoWeAre .header, #communitySupport .header { height:540px; }
	
	.page-header {  }
	.page-header h1 { font-size:3rem;color:#FFF;text-transform:uppercase; }
	.events-container, .members-container { padding-top:5rem; }
	.partners-container { padding-top:7rem; }
	.angled-card:hover { transform: translateY(-10px);filter: drop-shadow(0px 20px 8px rgba(0, 0, 0, 0.3)); }
	.svg-grey { min-height:400px; }
	.swiper-button-prev, .swiper-button-next { color:#0F7B39; }
	.mobile-swiper { display:none !important; }
	.tablet-swiper { display:none !important; }
	.desktop-swiper { display:block !important; }
	
	.word { font-family: "Oswald", sans-serif;font-size:7rem;line-height:1;color:#FFF;text-transform: uppercase;visibility:hidden; }
	.event-location { text-align:center; }
	.event-start { text-align:center; }
	.event-end { text-align:center; }
	/* #words h1#1 { z-index:1;position:absolute;top: 50%;left: 50%; }
	#words h1#2 { z-index:2;position:absolute;top: 50%;left: 50%; }
	#words h1#3 { z-index:3;position:absolute;top: 50%;left: 50%; }
	#words h1#4 { z-index:4;position:absolute;top: 50%;left: 50%; } */
	/* #words .word2 { position:absolute;top: 50%;left: 0%;transform: translate(0%, -50%);white-space: nowrap; } */
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	
	#home { background-image:url(../images/home-hero.jpg);background-position:center -50px;background-attachment: fixed;background-size:auto; }
	#events, #members, #projects, #communitySupport, #whoWeAre { background-position:center top; }
	#home .header { height:650px;height:450px; }
	#events .header, #members .header, #projects .header, #whoWeAre .header, #communitySupport .header { height:340px;height:700px; }
	#members { background-position:center -80px; }
	.header { background-image:url(../images/header-desktop-new.svg);background-repeat:no-repeat;background-size:100%;/*height:302px;height:425px;*/ }
	.svg-header { height:144px; }
	.header { height:302px; }
	.pt-lg-6 { padding-top:4.5rem !important; }
	.pt-lg-7 { padding-top:7rem !important; }
	.page-header h1 { font-size:3.2rem; }
	.word { font-family: "Oswald", sans-serif;font-size:7rem;line-height:1;color:#FFF;text-transform: uppercase; }
	
	.page-header h1#one { z-index:1;position:absolute;top: 0;left: 0;right:0; }
	.page-header h1#two { z-index:2;position:absolute;top: 0;left: 0;right:0; }
	.page-header h1#three { z-index:3;position:absolute;top: 0;left: 0;right:0; }
	.page-header h1#four { z-index:4;position:absolute;top: 0;left: 0;right:0; }
}

@media (min-width: 1600px) {
	.wrapper { max-width:1924px;margin:0 auto; }
	#home { background-position:center -100px;background-attachment: fixed;background-size:auto; }
	#home .header { /*height:700px;*/height:500px; }
	#events, #members, #projects, #communitySupport, #whoWeAre { background-position:center top; }
	/* #members { background-position:center top; } */
	.header { background-position:center -50px; }
}