/* Reset */
	* , * :before, * :after {
		/* Make font sharper in browsers */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
			
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	    -o-box-sizing: border-box;
	    box-sizing: border-box
	}
	
	html {
	    font-family: sans-serif;
	    font-size: 57.5%;
	    font-weight: 400;
	    -webkit-text-size-adjust: 100%;
	    -moz-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
	    -o-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
	}
	
	body {
	    margin: 0;
	    -webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
	}
	
	header, main, footer, nav, aside {
	    display: block;
	    position: relative;
	    z-index: 0;
	}
	
header > section.stickybar { position:fixed; left:0px; top:0px; right:0px; pointer-events: none; height:60px; padding: 0px; background-color: #0f172f; transform: translateY(-150%); transition: all 175ms ease-in; overflow: hidden;}
header > section.stickybar > .-wrap {}
header > section.stickybar > .-wrap > .-columns {}
header > section.stickybar > .-wrap > .-columns > .logo { min-width: 90px; }
header > section.stickybar > .-wrap > .-columns > .logo > a {display: block; padding: 10px 0; height:60px; text-align: center;}
header > section.stickybar > .-wrap > .-columns > .logo > a > span.icon {}
header > section.stickybar > .-wrap > .-columns > .logo > a > span.icon > svg { height: 40px; width: auto; fill:#fff;}
header > section.stickybar > .-wrap > .-columns > .toggle { max-width: 380px;}
header > section.stickybar > .-wrap > .-columns > .toggle > button { height:60px; min-width: 60px; line-height:60px; text-align: center;}
header > section.stickybar > .-wrap > .-columns > .toggle > button > span.icon { display: inline-block; vertical-align: top; height:60px; width: 60px; padding-top: 8px; }
header > section.stickybar > .-wrap > .-columns > .toggle > button > span.title {  display: inline-block; vertical-align: top; height:60px; color: #fff; font-size: 14px; font-family: "Eagle", sans-serif; font-weight: 400; text-transform: uppercase;}
header > section.stickybar > .-wrap > .-columns > .action { max-width: 380px;}
header > section.stickybar > .-wrap > .-columns > .action > nav > ul { list-style: none; text-align: right; font-size: 0px!important; padding: 0px;}
header > section.stickybar > .-wrap > .-columns > .action > nav > ul > li { display: inline-block;}
header > section.stickybar > .-wrap > .-columns > .action > nav > ul > li > a { display: block; height:60px; line-height: 60px; background-color: rgba(235,25,116,1); color: #fff; text-align: left; text-decoration: none;}
header > section.stickybar > .-wrap > .-columns > .action > nav > ul > li > a > span.title { display: inline-block; height:60px; vertical-align: top; padding: 0 20px 0 0; font-size: 14px; font-family: "Eagle", sans-serif; font-weight: 400; text-transform: uppercase;}
header > section.stickybar > .-wrap > .-columns > .action > nav > ul > li > a > span.icon { display: inline-block; width: 60px; height:60px; vertical-align: top; text-align: center;}
header > section.stickybar > .-wrap > .-columns > .action > nav > ul > li:first-of-type > a { background-color: rgba(235,25,116,0.8); }
header > section.stickybar > .-wrap > .-columns > .action > nav > ul > li.call a span.icon::before { font-family:"Font Awesome 5 Pro", sans-serif; content:"\f095"; font-weight: 700;}
header > section.stickybar > .-wrap > .-columns > .action > nav > ul > li.email a span.icon::before { font-family:"Font Awesome 5 Pro", sans-serif; content:"\f0e0"; font-weight: 700;}
header > section.stickybar > .-wrap > .-columns > .action > nav > ul > li.scroll a span.icon::before { font-family:"Font Awesome 5 Pro", sans-serif; content:"\f360"; font-weight: 500; }
@media all and (max-width: 960px) {
	header > section.stickybar > .-wrap > .-columns > .logo { max-width: 90px;}
	header > section.stickybar > .-wrap > .-columns > .logo > a { text-align: left;}
	header > section.stickybar > .-wrap > .-columns > .toggle { min-width:60px; max-width: 60px;}
	header > section.stickybar > .-wrap > .-columns > .toggle > button > span.title { display: none;}
	header > section.stickybar > .-wrap > .-columns > .action { max-width: none;}
}
@media all and (max-width: 520px) {
	header > section.stickybar > .-wrap > .-columns > .action { min-width: 150px;}
	header > section.stickybar > .-wrap > .-columns > .action > nav > ul > li > a > span.title { display: none;}
}

body.-trigger-sticky header > section.stickybar { transform: translateY(0); pointer-events: all; }

/* Animations */
	*[-onscroll="fade-up"] { opacity: 0; transform: translateY(30px); transition: all 275ms ease-in;}
	*[-onscroll="fade-up"].-trigger-fade-up { opacity: 1; transform: translateY(0px); transition-delay: 175ms;}
	@media all and (max-width: 512px) {
		*[-onscroll="fade-up"].-trigger-fade-up { transition-delay: 0ms;}
	}
	
section {}
section.-page { padding: 0 5vw;}

body > header > section.mainbar { padding-top: 0px;}
section.hero .column.text .padding { padding-top: 320px;}

body.-showmenu > header { transform: translateX(0); pointer-events: all; opacity:1;}
body.-showmenu > main { transform: translateX(0); pointer-events: all; opacity:1;}
body.-showmenu > footer { transform: translateX(0); pointer-events: all; opacity:1;}


body > header > section.mainbar > .wrap > .ux nav.main ul li a span.more { display: none; }
body > header > section.mainbar > .wrap > .ux nav.main ul li a span.bar { position: absolute; left:0px; bottom:10px;}

body > header > section.mainbar > .wrap > .ux nav.main ul li.menu-item-has-children a span.more { display: inline-block; position: absolute; left:50%; bottom:12px; width: 10px; height:10px; transform: translateX(-50%); opacity: 0.25;}
body > header > section.mainbar > .wrap > .ux nav.main ul li.menu-item-has-children a span.more::before {font-family:"Font Awesome 5 Pro", sans-serif; content:"\f107"; font-weight: 700;}
body > header > section.mainbar > .wrap > .ux nav.main ul li.menu-item-has-children a span.bar.left { max-width: calc(50% - 10px);}
body > header > section.mainbar > .wrap > .ux nav.main ul li.menu-item-has-children a span.bar.right { max-width: calc(50% - 10px); left:calc(50% + 10px);}

body > header > section.mainbar > .wrap > .ux nav.main ul li.current-menu-ancestor span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.current_page_item span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.current_page_ancestor span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.current_page_item span.more { opacity: 1;}
/* 
body > header > section.mainbar > .wrap > .ux nav.main ul li.surfcamps:hover span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.surfcamps.current_page_ancestor span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.surfcamps.current-menu-ancestor span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.surfcamps.current_page_item span.more { color: #378533; opacity: 1;}

body > header > section.mainbar > .wrap > .ux nav.main ul li.kiteschool:hover span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.kiteschool.current_page_ancestor span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.kiteschool.current-menu-ancestor span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.kiteschool.current_page_item span.more { color: #009d92; opacity: 1;}

body > header > section.mainbar > .wrap > .ux nav.main ul li.surfschool:hover span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.surfschool.current_page_ancestor span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.surfschool.current-menu-ancestor span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.surfschool.current_page_item span.more { color: #136685; opacity: 1;}

body > header > section.mainbar > .wrap > .ux nav.main ul li.basecamp:hover span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.basecamp.current_page_ancestor span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.basecamp.current-menu-ancestor span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.basecamp.current_page_item span.more { color: #FF5429; opacity: 1;}

body > header > section.mainbar > .wrap > .ux nav.main ul li.activities:hover span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.activities.current_page_ancestor span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.activities.current-menu-ancestor span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.activities.current_page_item span.more { color: #e61674; opacity: 1;}

body > header > section.mainbar > .wrap > .ux nav.main ul li.surfshop:hover span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.surfshop.current_page_ancestor span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.surfshop.current-menu-ancestor span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.surfshop.current_page_item span.more { color: rgba(231,246,250,1); opacity: 1;}

body > header > section.mainbar > .wrap > .ux nav.main ul li.beachclub:hover span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.beachclub.current_page_ancestor span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.beachclub.current-menu-ancestor span.more,
body > header > section.mainbar > .wrap > .ux nav.main ul li.beachclub.current_page_item span.more { color: #00accc; opacity: 1;} */

@media screen and (min-width: 897px) {
	body > header {
		background-color: transparent;
	}
	body.-trigger-sticky > header {
		position: sticky !important;
		background-color: #0f172f;
		top: 0;
	}
	body.-trigger-sticky > header > .topbar {
		display: none;
	}
	body.-trigger-sticky > header + nav + main {
		margin-top: -100px;
	}
	body > header > section.mainbar > .wrap > .ux nav.main ul > li:hover > .sub-menu {
		display: block;
		position: absolute;
		top: 100px;
		background: #0f172f;
		min-width: 330px;
		padding: 20px 30px;
	}
	body > header > section.mainbar > .wrap > .ux nav.main ul > li > .sub-menu > li > a {
		height: auto;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-transform: none;
		font-size: inherit;
		font-family: "Frank New", sans-serif;
	}
	body > header > section.mainbar > .wrap > .ux nav.main ul > li > .sub-menu > li > a .icons,
	body > header > section.mainbar > .wrap > .ux nav.main ul > li > .sub-menu > li > a .bar {
		display: none;
	}
	body > header > section.mainbar > .wrap > .ux nav.main ul > li > .sub-menu > li > a .more {
		position: static !important;
		transform: rotate(-90deg) !important;
		width: auto !important;
		height: auto !important;
	}
}

@media screen and (min-width: 897px) and (max-width: 1280px) {

	body > header > section.mainbar > .wrap > .ux nav.main ul li a span.more,
	body > header > section.mainbar > .wrap > .ux nav.main ul li a span.bar {
		display: none !important;
	}

	body > header > section.mainbar > .wrap > .ux nav.main ul > li:hover > .sub-menu {
		top: 60px;
	}

}