@media (prefers-color-scheme: dark) {
	body {background-color:#000;color:#fff;}
	h1 {font-size:10em;}
}
@font-face {
	font-family: 'body';
	src: url('Montserrat-Regular.woff') format(woff);
	font-display: swap;
}
@font-face {
	font-family: 'head';
	src: url('Futuru-bold.woff') format(woff);
	font-display: swap;
}
@font-face {
	font-family: 'accent';
	src: url('librebaskerville-italic-webfont.woff') format(woff);
	font-display: swap;
}
body { 
   margin:0;
   padding:0;
   width:100%;
   color:#ebe3e3;
   
   line-height:1.5;
   background-color:#222422;
   font-family:'body';
   font-size:26px;
   
}
* {scrollbar-width: none;  /* Firefox */}
*::-webkit-scrollbar {display: none;}
* {-ms-overflow-style: none;  /* IE and Edge */}
.skip-link {position: absolute;top: -60px;left: 0;background: #000;color: #fff;padding: 8px 16px;z-index: 100;text-decoration: none;transition: top 0.3s;}
.skip-link:focus {top: 0;}
#custom-scrollbar {position: fixed;top: 10vh;right: 47px;height: 80vh;width: 8px;background: rgba(255, 255, 255, 0.1);z-index: 8;border-radius: 4px;mix-blend-mode: difference;}
#scroll-thumb {position: absolute;top: 0;left: 0;width: 100%;background: #78d454;border-radius: 4px;cursor: grab;height:60px}
.center {text-align:center;}
h1,h2,h3 {font-family:'head';text-transform:uppercase;}
h1 {font-size:4em;}
h2 {font-size:3em;perspective: 800px;transform-style: preserve-3d;}
h3 {font-size:1.75em;}
a {text-decoration:none}
.button img {margin-left:7px;position:relative;top:4px;}
.button:hover > img {animation-name: follow;animation-duration: 1s;animation-iteration-count: infinite;}
@keyframes follow {
	0% {transform:translateX(0);}
  50% {transform:translateX(5px);}
  100% {transform:translateX(0)}
}
.button {color:#78d454;font-family: 'accent';}
#logoholder {height:175px;width:125px;transition:all 0.5s;position:relative;
	z-index:100;
	float:left;top:20px;left:50px;overflow:hidden;}
#logoholder img {width:100%;height:auto;}
.scrolled {height:60px !important;}
.row {height:0;position:absolute;width:100vw;transition:all 0.5s;}
.row.scroll {background-image:linear-gradient(#222422, #2224222c);height:auto;min-height:90px;}


.main_h {
	
	position:fixed;
	width:100%;
	height:auto;
	min-height:85px;
	z-index:99;
	
}

.main_h.fixed {
	position:fixed;
	top:0;
	}

nav {
	float:right;
	padding-right:50px;
	padding-top:20px;
}


nav ul {
	margin:0;
}

nav ul li {
	display:inline-block;
	padding:10px 0;
}

nav ul li a {
	padding:5px 10px;
	text-decoration:none;
	color:#fff;
	position:relative;
	font-family: "Fjalla One", sans-serif;
}

.mobileonly {display:none;}

@media screen and (max-width: 730px) {
	body  {font-size:18px;}
	nav {height:0px;overflow:hidden;float:none;width:100%;}
	nav ul {margin-top:40px;}
	nav ul li {display:block;width:100%;border-left-style:none;}
	nav ul li a {color:#fff;}
	}

@media screen and (max-width:500px) {
	.mobilehide {display:none;}
	.mobileonly {display:block;}
}


.c-hamburger {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 50px;
  height: 50px;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
  z-index:999;
}

@media screen and (max-width: 730px) {
  .c-hamburger {display: block;}
}

.c-hamburger:focus {
  outline: none;
}

.c-hamburger span {
  display: block;
  position: absolute;
  top: 25px;
  left: 8px;
  right: 8px;
  height: 3px;
  background: #fff;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #fff;
  content: "";
}

.c-hamburger span::before {
  top: -10px;
}

.c-hamburger span::after {
  bottom: -10px;
}

.c-hamburger--htx {
  background-color: transparent;
}

.c-hamburger--htx span {
  transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  transition-property: top, transform;
}

.c-hamburger--htx span::after {
  transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: transparent;
}

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
}





.group:before, .group:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.group:after { clear: both; }  
.group { zoom: 1; }



#sdown {
	position:relative;
	left:50%;
	transform:translateX(-50%);
	margin-top:-100px;
	text-align:center;
	color:#fff;
	z-index: -1;
}
#sdown p {margin:0;font-size:20px;}

@keyframes bounce {
	0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
  100% {
    transform:translateY(0)
  }
}

#sdown .icon {
	animation-name:bounce;
	animation-duration:1.5s;
	animation-iteration-count:infinite;
	
}
section {position:relative;}
#landing {width:100%;height:100vh;display:grid;place-items:center;align-content:center;}
#landing * {z-index:1;}
#landing img {position:absolute;height:100vh;width:auto;left:50%;transform:translateX(-50%);z-index:0;top:0;}
#landvid {width:100vw;transition:all;position:absolute;height:100vh;object-fit:cover;top:0;left:0;opacity:0.5;}
#landing h1 {color:#fff;text-shadow:1px 1px 3px #121216;text-align:center;margin:0 100px;opacity:0;}
#landing h2 {color:#78d454;text-shadow:1px 1px 3px #121216;font-family:'accent';text-transform:lowercase;opacity:0;}
.accent {font-family:'accent';text-transform:lowercase;color:#78d454;}
#intro, #qualify {font-family:'accent';font-size:1.5em;width:90%;max-width:1000px;margin:200px auto;color:#999797;}
#qualify {margin-top:0;}
#network {width:90%;max-width:1000px;margin:0 auto;}
#person {margin-top:150px;}
#whypni {width:90%;max-width:1600px;margin:150px auto 150px;}
#whyholder {display:grid;grid-template-columns:1fr 1fr 1fr;position:relative;overflow:hidden;height:100vh;align-items:center;}
.why {border:1px solid #222422;padding:25px 25px 25px 80px;box-sizing:border-box;position:relative;opacity: 0;transform: translateX(100vw);}
.why h3 {color:#78d454;transform: rotate(-90deg) translate(-50%, -50%);position:absolute;bottom:45%;left:10%;transform-origin:left;margin:0;width:max-content;}
#tipholder {display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;height:100vh;align-items:center;max-width:1400px;margin:0 auto;}
.tip {border:1px solid #222422;box-sizing:border-box;position:relative;opacity: 0;padding:0 50px;transform: translateX(100vw);}
.tip h3 {color:#78d454;line-height:1;display:grid;}
.review {margin:200px 0;}
.revholder {width:90%;max-width:1200px;margin:0 auto;display:grid;align-items:center;grid-template-columns:1.2fr 0.8fr;}
.revtext {color:#222422;background-color:#78d454;padding:30px 80px 30px 30px;border-radius:30px;transform: translateX(-100vw);}
.revtext .accent {color:#222422;text-transform:capitalize;}
.revimg {transform: translateX(100vw);}
.revimg img {width:100%;height:auto;border-radius:30px;margin-left:-50px;box-shadow:1px 1px 10px 10px rgba(0,0,0,0.5);}
#board {width:100%;max-width:1600px;display:grid;justify-items:center;grid-template-columns:1fr 1fr;margin:0 auto;}
.member {display:grid;justify-items:center;align-items:center;grid-template-columns:205px calc(100% - 205px);padding-top:100px;}
.bmpic img {width:175px;height:auto;border-radius:20px;margin:20px;}
.bmbio h3 {margin:0;font-size:1.5em;}
.bmbio p {text-transform:capitalize;}
#memberlist h2 {text-align:center;}
#list {display:flex;position:relative;width:max-content;height:100vh;}
.profile {width:90vw;max-width:400px;padding:100px;}
.profile img {border-radius:20px;width:100%;}
.profile p {line-height: 1.25;font-size:0.9em;}
.profile .accent {text-transform:capitalize;font-size:1.25em;}
.profile a {color:#78d454;}
#breakfast {width:90%;max-width:1000px;margin:0 auto;}
#breakfast h2 {text-align:center;}
#social {margin:150px 0 0;}
#social h2 {text-align:center;}
#socialevents {display:flex;position:relative;width:max-content;height:100vh;}
.socialevent {width:90vw;max-width:600px;padding:200px;}
.socialevent h3 {color:#78d454;line-height:1;}
#schedule h2 {text-align:center;}
#schedule table {margin:150px auto 250px;width:90%;border-collapse: collapse;border-spacing:0;}
#schedule th {text-align:center;border:1px solid #494848;padding:3px;color:#78d454;}
#schedule td {border:1px solid #494848;padding:10px;}
#schedule table a {text-decoration:none;color:#fff;}
#schedule table a:hover {color:#78d454;}
#meetingdetails {width:90%;max-width:1000px;margin:0 auto 150px;}
#meetingdetails button {background-color:#78d454;color:#fff;border:1px solid #78d454;font-size:1em;font-family:'body';padding:10px;border-radius:5px;cursor:pointer;transition:all 0.3s;}
#meetingdetails button:hover {background-color:#fff;color:#222422;}
.disc {font-size:0.8em;}
form {width:90%;max-width:800px;margin:0 auto 200px;} 
.gridx2 {min-height: 100%;display: flex;flex-wrap: wrap;flex-direction: row;width:100%;max-width:1200px;margin:0;padding-bottom:10px;position:relative;box-sizing:border-box;}
.gridx2 > div {display: flex;flex-basis: calc(50% - 40px);flex-direction: column;margin:0 20px;}
.gridx2 > div > div {flex-direction: row;box-sizing:border-box;}
.gridx2 > div {border-radius:15px;}
.gridx2 > div > div {padding:20px 10px 10px;box-sizing:border-box;}
footer {background-color:#78d454;color:#222422;padding-top:30px;}
input, select, textarea {width:100%;padding:10px;font-family:'body';font-size:20px;background-color:transparent;line-height:1.5;box-sizing:border-box;border:none;border-bottom:1px solid #494848;color:#fff;} 
textarea {width:100%;}
option {background-color:#78d454;}
option:hover, option:checked, option:focus {color:#fff;background-color:#222422 !important;}
select:enabled:hover {background-color:#222422;}
input::placeholder {color:#fff;}
input[type='submit'] {background-color:#78d454;color:#fff;border:1px solid #78d454;font-size:1em;font-family:'body';padding:10px;border-radius:5px;cursor:pointer;transition:all 0.3s;}
input[type='submit']:hover {background-color:#fff;color:#222422;}
#contactform input {margin-bottom:20px;}
#nxt {width:100%;padding-top:70px;background-color:#78d454;color:#222422;}
#nxt h2 {font-size:6em;margin:0;}
#nxt img {border-radius:50%;width:100px;height:auto;}
#nxt h3 {margin:6px 0;}
#nxt p, footer h4 {margin:3px 0;}
.vsml {width:90%;max-width:900px;margin:50px auto 0;box-sizing:border-box;padding:20px;text-align:center;}
#nxt .button {color:#222422;}
#nxt .button img {width:24px !important;}
#copyright {text-align:center;font-size:0.7em;padding:10px 0;}
#copyright a {color:#222422;}
#copyright a:hover {color:#fff;}

@media screen and (max-width: 1700px) {
body {font-size:22px;}
#nxt h2 {font-size:5em;}
}
@media screen and (max-width: 1300px) {

#nxt h2 {font-size:3.5em;}
}
@media screen and (max-width: 1050px) {
  body {font-size:20px;}
#board {grid-template-columns:1fr;align-items:start;width:90%;margin:0 auto;max-width:unset;justify-items:unset;}
.member {justify-items:unset;}
#nxt h2 {font-size:2.5em;}
#whyholder {grid-template-columns:1fr;padding-top:70px;height:auto;}
.why {padding:20px;}
.why h3 {position:relative;transform:unset;left:unset;bottom:unset;font-size:1.5em;line-height:1;}
.tip h3 {font-size:1.5em;}
}
@media screen and (max-width: 800px) {
  #landing {clip-path:inset(100px 40px 150px 40px round 20px) !important;}
}
@media screen and (max-width: 600px) {
  body {font-size:18px;}
	.gridx2 > div {flex-basis:100%;margin:20px;}
	#logoholder {height:112px;width:80px;left:20px;}
  .c-hamburger {height:40px;top:10px;}
  .row.scroll {min-height:68px;}
  .scrolled {height:37px !important;}
  #landing h1 {font-size:2.5em;margin:0 40px;}
  #landing h2, h2 {font-size:2em;text-align:center;}
  
  #landing {clip-path:inset(100px 20px 150px 20px round 20px) !important;}
  .member {grid-template-columns: 175px calc(100% - 175px)}
  .bmpic img {width:135px;}
  .revholder {grid-template-columns:1fr;}
  .revtext {padding:20px 20px 70px;}
  .revimg img {margin-left:0;margin-top:-50px;}
  #whyholder {height:auto;}
  #tipholder {grid-template-columns:1fr;padding-top:70px;height:auto;}
  #copyright {width:90%;margin:0 auto;padding:10px;font-size:0.8em}
  th {display:none;}
  td {display:block;}
  tr {border:2px solid #78d454;}
  .profile p {margin:10px 0;}
}