html {
	
	}
body { 
	position:relative; overflow-x: hidden; 
	background:#0f172f; color:#fff; font-family: "Frank New", sans-serif;
	}

/* HEADER */
	body > header { 
		position: absolute; top:0px; left:0px; right:0px; z-index: 30; background:transparent; color:#0f172f; opacity: 1;
		-webkit-transition: -webkit-transform 450ms cubic-bezier(0.85, -0.4, 0.2, 1.45), opacity 200ms ease-in;
	    -moz-transition: -moz-transform 450ms cubic-bezier(0.85, -0.4, 0.2, 1.45), opacity 200ms ease-in;
	    -ms-transition: -ms-transform 450ms cubic-bezier(0.85, -0.4, 0.2, 1.45), opacity 200ms ease-in;
	    -o-transition: -o-transform 450ms cubic-bezier(0.85, -0.4, 0.2, 1.45), opacity 200ms ease-in;
	    transition: transform 450ms cubic-bezier(0.85, -0.4, 0.2, 1.45), opacity 200ms ease-in;
		will-transform: transform, opacity;
		}
	body > header::after {
/*
	    content: " ";
	    position: absolute;
	    display: block;
	    width: 100%;
	    height: 600px;
	    bottom: 0;
	    left: 0;
	    z-index: 30;
	    opacity: 1;
	    background-color: #fff;
	    transform-origin: top right;
	    -webkit-transform: skew(0deg,-2deg);
	    -moz-transform: skew(0deg,-2deg);
	    -ms-transform: skew(0deg,-2deg);
	    -o-transform: skew(0deg,-2deg);
	    transform: skew(0deg,-2deg);
*/
	}
	body > header > .skew {
/*
	    content: " ";
	    position: absolute;
	    display: block;
	    width: 100%;
	    height: 600px;
	    bottom: 0;
	    left: 0;
	    z-index: 31;
	    opacity: 0.15;
	    background-color: #fff;
	    background: #fff url('../images/pattern-beachclub.png') repeat-x  center 500px/800px;
	    transform-origin: top right;
	    -webkit-transform: skew(0deg,-2deg);
	    -moz-transform: skew(0deg,-2deg);
	    -ms-transform: skew(0deg,-2deg);
	    -o-transform: skew(0deg,-2deg);
	    transform: skew(0deg,-2deg);
*/
	}
	body > header > .page { padding-top: 20px; padding-bottom: 0px; position: relative; z-index: 32; }
	body > header > .page > .wrap {}
	body > header > .page > .wrap > .columns { }
	
	body > header >.page.cookies { 
		position: fixed; bottom:20px; left:20px; max-width: 512px;
		background:#0f172f; color:#fff; padding: 20px 20px 15px 20px;
		}
	body > header > .page.cookies.-hide { display: none!important;}
	body > header > .page.cookies > .wrap > .columns { padding-top: 0px; padding-bottom: 0px;}
	body > header > .page.cookies .cookienotice { position: relative; min-width: 100%;}
	body > header > .page.cookies .cookienotice h4 { padding-right: 60px; margin: 0px 0px 10px 0px; font-size: 14px;}
	body > header > .page.cookies .cookienotice h4 i { font-size: 21px; margin-right: 5px;}
	body > header > .page.cookies .cookienotice p { padding-right: 60px; margin: 0px; font-size: 14px;}
	body > header > .page.cookies .cookienotice .theme-button { background-color: #fff; color: #0f172f; margin-top: 15px; margin-bottom: 5px!important; font-size: 14px; }
	body > header > .page.cookies .cookienotice .theme-button.link { background-color: transparent; color: inherit; opacity:0.5; padding-left: 5px!important; padding-right: 0px!important; }
	body > header > .page.cookies .cookienotice .theme-button.link span.icon { display: none;}
	body > header > .page.cookies .cookienotice .theme-button.link span.title {font-family: "Frank New", sans-serif; text-transform: none; border-bottom: #fff 1px dotted; padding-left:0px;}
	
	body > header > .page.cookies .cookienotice button.close { 
		-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0px; box-shadow: none; border:#fff 0px solid; margin: 0px!important; background-color: transparent;
		position: absolute; right:0px; top:-8px; color: #fff;
	}
	body > header > .page.cookies .cookienotice button.close span.icon { font-size: 24px;}
	
	body > header > section.topbar {  background-color:#0f172f; color:#fff; padding-top:10px; padding-bottom:0px; margin: 0px; position: relative; z-index: 10;}
	body > header > section.topbar > .wrap { padding: 0px; height:50px;}
	body > header > section.topbar .misc {}
	body > header > section.topbar .misc ul { list-style: none; padding: 0px;}
	body > header > section.topbar .misc ul li {}
	body > header > section.topbar .misc ul li a { opacity: 0.5; text-decoration: none; line-height: 50px;}
	body > header > section.topbar .misc ul li a span.icon { display: inline-block; vertical-align: middle; margin-right: 10px;}
	body > header > section.topbar .misc ul li a span.title { display: inline; vertical-align: middle; font-size: 13px; border-bottom: #fff 1px dashed;}
	body > header > section.topbar .language { max-width: 180px; min-width: 180px;}
	body > header > section.topbar .language select { margin-top:8px; float:right;}
	body > header > section.topbar .search { min-width: 180px; flex-grow:1!important;}
	body > header > section.topbar .search form { width: 100%; margin: 0px; padding: 0px; position:relative;}
	body > header > section.topbar .search form input { width: 100%; height:50px; background: rgba(255,255,255,0.1); border:#fff 0px solid; padding: 0 15px 0 50px; color: #fff; font-size: 14px; position: relative; z-index: 1;}
	body > header > section.topbar .search form input::placeholder { color: #fff;}
	body > header > section.topbar .search form button { position: absolute; left:0px; top:0px; z-index: 2; padding: 0px; margin: 0px; border:#fff 0px solid; background-color: transparent;}
	body > header > section.topbar .search form button span.icon { display: inline-block; width: 50px; height:50px; line-height: 50px; text-align: center; font-size: 18px; color: #fff;}
	body > header > section.topbar .search form button span.title { display: none;} 

	@media screen and (max-width: 767px) {
		body > header > section.topbar .search {
			display: none;
		}
	}
	
	body > header > section.mainbar { padding-top: 0px; padding-bottom: 0px; position: relative; z-index: 9;}
	body > header > section.mainbar > .wrap { position: relative; }
	body > header > section.mainbar > .wrap > .logo { text-align:left; min-width: 150px; max-width: 150px; height:100px;}
	body > header > section.mainbar > .wrap > .logo a { display:block; vertical-align: bottom; line-height: 50px; height:100px;}
	body > header > section.mainbar > .wrap > .logo a span { display: inline-block; vertical-align: top;}
	body > header > section.mainbar > .wrap > .logo a span.icon { display: none;}
	body > header > section.mainbar > .wrap > .logo a span.full { display: block;}
	body > header > section.mainbar > .wrap > .logo a img,
	body > header > section.mainbar > .wrap > .logo a svg { vertical-align: top; max-height:100px; max-width:150px; fill:#fff;}
	body > header > section.mainbar > .wrap > .search { position: absolute; right:0px; top:0px;}
	body > header > section.mainbar > .wrap > .ux { flex: 1; }
	body > header > section.mainbar > .wrap > .ux nav.main { white-space: nowrap; overflow: visible;}
	body > header > section.mainbar > .wrap > .ux nav.main ul { list-style: none; padding: 0px 20px; text-align: left; justify-content: center;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li { flex: 0 0 auto;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li a {
		font-family: "eagle", sans-serif; text-transform:uppercase; font-weight: 400;
		font-size:14px; display: inline-block; height:100px; text-align: center; margin-right: 20px;
		text-decoration: none; position: relative; z-index: 1; white-space: nowrap;
		transition: all 175ms ease-out; color: #fff;
		}
	body > header > section.mainbar > .wrap > .ux nav.main ul li a:hover {cursor: pointer;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li a > span.icon { display: none;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li a span.icons { display:block; width: 45px; height:30px; margin: 20px auto 0px auto; overflow: hidden;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li a span.icons span.icon { display:block; width: 45px; height:30px; transition: transform 175ms ease-out, opacity 175ms ease-in 50ms; }
	body > header > section.mainbar > .wrap > .ux nav.main ul li a span.icons span.icon.color { opacity: 0; }
	body > header > section.mainbar > .wrap > .ux nav.main ul li a span.title { position:relative; z-index:1; font-size:1em; line-height: 45px; height:50px; transition: all 175ms ease-out; }
	body > header > section.mainbar > .wrap > .ux nav.main ul li a span.bar { position:absolute; z-index: 0; bottom:10px; left:0px;  right:100px; display: block; height:2px;  opacity: 0; border-radius:0px; transition: all 175ms ease-out;}
	

	/* body > header > section.mainbar > .wrap > .ux nav.main > ul:hover > li > a { opacity: .5 }
	body > header > section.mainbar > .wrap > .ux nav.main > ul > li:hover > a { opacity: 1 } */

	body > header > section.mainbar > .wrap > .ux nav.main ul li a:hover span.icons span.icon,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.current_page_item a span.icons span.icon,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.current_page_ancestor a span.icons span.icon,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.current-page-ancestor a span.icons span.icon { transform: translateY(-30px)!important; opacity: 0; }
	body > header > section.mainbar > .wrap > .ux nav.main ul li a:hover span.icons span.icon.color,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.current_page_item a span.icons span.icon.color,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.current_page_ancestor a span.icons span.icon.color,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.current-page-ancestor a span.icons span.icon.color { transform: translateY(-30px)!important; opacity: 1;}
	
	body > header > section.mainbar > .wrap > .ux nav.main ul li a:hover span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.current_page_item a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.current_page_ancestor a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.current-page-ancestor a span.bar { right: 0px; opacity: 1; }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.new { position: relative;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.new::after {  font-family:"Font Awesome 5 Pro", sans-serif; content:"\f4a5"; font-size:21px; font-weight: 700; color:#fff; position:absolute; right:15px; top:0px;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.beachclub a:hover span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.beachclub.current_page_item a span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.beachclub.current_page_ancestor a span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.beachclub.current-page-ancestor a span.title {color: #fff;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.beachclub a:hover span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.beachclub.current_page_item a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.beachclub.current_page_ancestor a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.beachclub.current-page-ancestor a span.bar {background-color: #00accc;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.beachclub span.icon{ background: url('../icons/beachclub-white.svg') no-repeat center center/25px; }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.beachclub span.icon.color{ background-image: url('../icons/beachclub-color.svg'); }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.activities a:hover span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.activities.current_page_item a span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.activities.current_page_ancestor a span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.activities.current-page-ancestor a span.title {color: #fff;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.activities a:hover span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.activities.current_page_item a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.activities.current_page_ancestor a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.activities.current-page-ancestor a span.bar {background-color: #e61674;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.activities span.icon{ background: url('../icons/activities-white.svg') no-repeat center center/25px; }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.activities span.icon.color { background-image: url('../icons/activities-color.svg'); }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.kiteschool a:hover span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.kiteschool.current_page_item a span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.kiteschool.current_page_ancestor a span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.kiteschool.current-page-ancestor a span.title {color: #fff;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.kiteschool a:hover span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.kiteschool.current_page_item a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.kiteschool.current_page_ancestor a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.kiteschool.current-page-ancestor a span.bar {background-color: #009d92;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.kiteschool span.icon{ background: url('../icons/kiteschool-white.svg') no-repeat center center/25px; }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.kiteschool span.icon.color{ background-image: url('../icons/kiteschool-color.svg'); }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.wingsurfschool a:hover span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.wingsurfschool.current_page_item a span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.wingsurfschool.current_page_ancestor a span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.wingsurfschool.current-page-ancestor a span.title {color: #fff;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.wingsurfschool a:hover span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.wingsurfschool.current_page_item a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.wingsurfschool.current_page_ancestor a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.wingsurfschool.current-page-ancestor a span.bar {background-color: #ff9900;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.wingsurfschool span.icon{ background: url('../icons/wingsurfschool-white.svg') no-repeat center center/25px; }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.wingsurfschool span.icon.color{ background-image: url('../icons/wingsurfschool-color.svg'); }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfschool a:hover span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfschool.current_page_item a span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfschool.current_page_ancestor a span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfschool.current-page-ancestor a span.title {color: #fff;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfschool a:hover span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfschool.current_page_item a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfschool.current_page_ancestor a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfschool.current-page-ancestor a span.bar {background-color: #136685;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfschool span.icon{ background: url('../icons/surfschool-white.svg') no-repeat center center/35px; }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfschool span.icon.color{ background-image: url('../icons/surfschool-color.svg'); }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfshop a:hover span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfshop.current_page_item a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfshop.current_page_ancestor a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfshop.current-page-ancestor a span.bar {background-color: rgba(231,246,250,1);}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfshop span.icon{ background: url('../icons/surfshop-white.svg') no-repeat center center/25px; }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfshop span.icon.color{ background-image: url('../icons/surfshop-white.svg'); }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.basecamp a:hover span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.basecamp.current_page_item a span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.basecamp.current_page_ancestor a span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.basecamp.current-page-ancestor a span.title {color: #fff;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.basecamp a:hover span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.basecamp.current_page_item a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.basecamp.current_page_ancestor a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.basecamp.current-page-ancestor a span.bar {background-color: #FF5429;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.basecamp.new::after {color: #FF5429;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.basecamp span.icon{ background: url('../icons/basecamp-white.svg') no-repeat center center/28px; }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.basecamp span.icon.color{ background-image: url('../icons/basecamp-color.svg'); }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.over a:hover span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.over.current_page_item a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.over.current_page_ancestor a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.over.current-page-ancestor a span.bar {background-color: rgba(235,25,116,1);}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.over span.icon{ background: url('../icons/natural-high-brand-icon-color.svg') no-repeat center center/42px; }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.over span.icon.color{ background-image: url('../icons/natural-high-brand-icon-white.svg'); }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfcamps a:hover span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfcamps.current_page_item a span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfcamps.current_page_ancestor a span.title,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfcamps.current-page-ancestor a span.title {color: #fff;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfcamps a:hover span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfcamps.current_page_item a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfcamps.current_page_ancestor a span.bar,
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfcamps.current-page-ancestor a span.bar {background-color: #378533;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfcamps.new::after {color: #378533;}
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfcamps span.icon{ background: url('../icons/surfcamps-white.svg') no-repeat center center/32px; }
	body > header > section.mainbar > .wrap > .ux nav.main ul li.surfcamps span.icon.color{ background-image: url('../icons/surfcamps-color.svg'); }
	
	body > header > section.mainbar > .wrap > .ux nav.main ul li ul { display: none;}
	
	body > header > section.mainbar > .wrap > .misc { display: none; order:6; padding-left: 20px;}
	
	body > header > section.mainbar > .wrap  .rating { min-width: 100px; max-width:100px; text-align: center; padding-top: 10px; float: right;}
	body > header > section.mainbar > .wrap  .rating a { text-decoration: none; color: inherit; font-size: inherit!important;}
	body > header > section.mainbar > .wrap  .rating .stars { color:#e61674; font-size: 1.2em; white-space: nowrap; line-height:20px; height:20px;}
	body > header > section.mainbar > .wrap  .rating .grade { font-family: "eagle", sans-serif; text-transform:uppercase; font-weight: 400; font-size: 1.5em; line-height: 30px; height:30px; color:#fff; }
	body > header > section.mainbar > .wrap  .rating .grade span.big { font-size: 2em;}
	body > header > section.mainbar > .wrap  .rating .grade span.small { display:inline-block; transform: translateY(-10px) translateX(-5px);}
	body > header > section.mainbar > .wrap  .rating .amount {line-height:25px; height:20px; font-size: 1.2em; line-height: 1em; white-space: nowrap; color:#fff; }

	@media screen and (min-width: 1281px) {
		body.-trigger-sticky > header > section.mainbar > .wrap  .rating { display: none;}
	}

	body > header > section.mainbar > .wrap > .action { min-width:180px; max-width: 180px;}
	body > header > section.mainbar > .wrap > .action > nav {}
	body > header > section.mainbar > .wrap > .action > nav.dev {}
	
	body > header > section.mainbar > .wrap > .action ul { width: 100%; padding: 0px; list-style: none;}
	body > header > section.mainbar > .wrap > .action ul li { width: 180px; display: inline-block!important;}
	body > header > section.mainbar > .wrap > .action ul li a {background-color:#fff; color:#0f172f; display: block; text-decoration: none; font-size:14px; height:50px; line-height:50px; padding: 0 20px; margin-bottom: 0px; white-space: nowrap;}
	body > header > section.mainbar > .wrap > .action ul li a span.icon { margin-right: 10px; font-size: 1em;  display:inline-block; width:15px;}
	body > header > section.mainbar > .wrap > .action ul li a span.icon::before {  font-family:"Font Awesome 5 Pro", sans-serif; content:"\f061"; font-weight: 400; }
	body > header > section.mainbar > .wrap > .action ul li a span.title { font-family: "eagle", sans-serif; text-transform:uppercase; font-weight: 400; font-size:14px; height:50px; line-height:50px;}
	body > header > section.mainbar > .wrap > .action ul li.call a {background-color:rgba(235,25,116,1); color:#fff;}
	body > header > section.mainbar > .wrap > .action ul li.call a span.icon::before { font-family:"Font Awesome 5 Pro", sans-serif; content:"\f095"; font-weight: 700;}
	body > header > section.mainbar > .wrap > .action ul li.email a {background-color:rgba(235,25,116,0.8); color:#fff;}
	body > header > section.mainbar > .wrap > .action ul li.email a span.icon::before { font-family:"Font Awesome 5 Pro", sans-serif; content:"\f0e0"; font-weight: 700;}
	body > header > section.mainbar > .wrap > .action ul li.scroll a span.icon::before { font-family:"Font Awesome 5 Pro", sans-serif; content:"\f360"; font-weight: 500; }
	
	.language { display: block; position: relative; }
	.language .current {}
	.language .current button { display: block; width:100%; height:50px; line-height: 30px; font-size: 1.5em; padding: 0 20px; background-color: rgba(0,0,0,0); color: #fff; text-align: left; }
	.language .current button span.flag { display:inline-block;  vertical-align: top;width:15px; margin-right: 10px;}
	.language .current button span.title { display:inline-block; vertical-align: top;font-weight: 700;}
	.language .current button span.icon { display:inline-block; vertical-align: top; margin-left: 10px; line-height: 25px;}
	.language .options {
		background-color: #0f172f; color: #fff;
	    border-radius: 0px;
	    -webkit-box-shadow: 0 10px 20px rgba(3,27,78,.2);
	    box-shadow: 0 10px 20px rgba(3,27,78,.2);
	    left: 0px;
	    opacity: 0;
	    pointer-events: none;
	    position: absolute;
	    right: 0px;
	    top: 100%;
	    -webkit-transform: scale(.95);
	    transform: scale(.95);
	    -webkit-transform-origin: 50% 0;
	    transform-origin: 50% 0;
	    -webkit-transition-duration: .25s;
	    transition-duration: .25s;
	    -webkit-transition-property: opacity,-webkit-transform;
	    transition-property: opacity,-webkit-transform;
	    transition-property: opacity,transform;
	    transition-property: opacity,transform,-webkit-transform;
	    z-index: 1000;
	}
	.language.-show-options .options {
		opacity: 1;
	    pointer-events: auto;
	    -webkit-transform: none;
	    transform: none;
	}
	.language .options ul { list-style: none; padding: 0px; margin: 0px;}
	.language .options ul li { display: block;}
	.language .options ul li a { display: block; padding: 10px; text-decoration: none; font-size: 14px;}
	.language .options ul li a:hover { background-color: #e61674; }
	
	.column.webcam {
		max-width: fit-content;
		display: flex;
		justify-content: flex-end;
		margin-bottom: 5px;
	}

	.column.webcam a {
		font-family: "eagle", sans-serif;
		font-size: 14px;
		line-height: 2.4em;
		text-transform: uppercase;
		font-weight: 400;
		text-decoration: none;
		display: flex;
		align-items: center;
	}

	.sidenav .column.webcam a {
		font-size: 18px;
	}
	
	.column.webcam a span.icon { display: inline-block; width: 30px; height:50px; background: url('../icons/webcam-white.svg') no-repeat center center/30px; margin-right: 10px;}

	.sidenav .column.webcam {
		max-width: none;
		justify-content: flex-start;
		margin-bottom: 2rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid #cfd1d5;
	}
	.sidenav .column.webcam a span.icon {
		background: url('../icons/webcam-dark.svg') no-repeat center center/30px;
	}
	
	
	body > header > section.mainbar > .wrap > .toggle { display: none; order:4; min-width:150px; max-width:150px;}
	body > header > section.mainbar > .wrap > .toggle button {
		position: relative; z-index: 1001;
		font-family: "eagle", sans-serif; font-size: 1.5em; text-transform: uppercase;
		height:50px; line-height:50px; float: left; background:#0f172f; color:#fff; padding: 0 15px; max-width:155px;
		transition-property: color; transition-duration: 0.25s; transition-delay: 0.25s;
	}
	body > header > section.mainbar > .wrap > .toggle button:hover { cursor: pointer;}
	body > header > section.mainbar > .wrap > .toggle button span.icon { display: inline-block; vertical-align: top; margin-right: 10px; padding: 5px 0;}
	body > header > section.mainbar > .wrap > .toggle button span.title { display: inline-block; vertical-align: top; }
	
	@media all and (min-width: 897px) and (max-width: 1280px) {
		body > header > section.mainbar { padding-top: 0px;}
		body > header > section.mainbar > .wrap { padding-top: 0px; justify-content: space-between; }
		body > header > section.mainbar > .wrap > .logo { min-width: calc(100% - 610px); max-width: calc(100% - 610px); padding-top: 10px;}
		body > header > section.mainbar > .wrap > .ux { min-width: calc(100% - 150px); max-width: calc(100% - 150px); text-align:center; order:5; }
		body > header > section.mainbar > .wrap > .ux nav.main { height:70px!important;}
		body > header > section.mainbar > .wrap > .ux nav.main ul {padding-left: 0px; justify-content: space-between; }
		body > header > section.mainbar > .wrap > .ux nav.main ul li {flex: 0 0 auto;}
		body > header > section.mainbar > .wrap > .ux nav.main ul li a { height:70px; line-height: 70px; margin-right: 0px; margin-left: 20px; }
		body > header > section.mainbar > .wrap > .ux nav.main ul li a span.icons { display: none;}
		body > header > section.mainbar > .wrap > .misc { display: none;}
		body > header > section.mainbar > .wrap > .rating { min-width:calc(250px); max-width: calc(250px); height:50px; padding-top: 50px; position: relative; text-align: right; padding-right: 15px; }
		body > header > section.mainbar > .wrap > .rating .stars { display: inline-block; width:100px; height:30px; white-space: normal; vertical-align: top; line-height: 30px; position: absolute; right:15px; top:40px;}
		body > header > section.mainbar > .wrap > .rating .grade { display: inline-block; width:50px; height:30px; white-space: nowrap; vertical-align: top;}
		body > header > section.mainbar > .wrap > .rating .amount { display: inline-block; width:80px; height:30px; line-height: 40px; vertical-align: top; text-align: right;}
		body > header > section.mainbar > .wrap > .action { display: flex; flex-direction: row-reverse;}
		body > header > section.mainbar > .wrap > .action .language { max-width: 180px; float: left;}
		body > header > section.mainbar > .wrap > .action nav { max-width: 180px; float: right;}
		body > header > section.mainbar > .wrap > .action nav.dev { max-width: 360px;}
		body > header > section.mainbar > .wrap > .action ul li a { text-align: center;}
		body > header > section.mainbar > .wrap > .toggle { display: none; max-width: 150px; min-width: 150px; order:4; height:70px; padding-top: 10px;}
		body > header > section.mainbar > .wrap > .toggle button { height:50px;  text-align: left; padding-left: 0px; padding-right: 0px; }
		body > header > section.mainbar > .wrap > .toggle button span.title { margin-right: 15px;}
		body > header > section.mainbar > .wrap > .toggle button span.icon { margin-right: 0px; width:50px; text-align: center;}
		body > header > section.mainbar > .wrap > .toggle button span.icon .hamburger-inner,
		body > header > section.mainbar > .wrap > .toggle button span.icon .hamburger-inner::before,
		body > header > section.mainbar > .wrap > .toggle button span.icon .hamburger-inner::after { background-color: #fff;}
	}
	@media all and (max-width: 1020px) {
		body > header > section.mainbar > .wrap > .ux { min-width: calc(100% - 50px); max-width: calc(100% - 50px); text-align:center; order:5; }
		body > header > section.mainbar > .wrap > .misc { display: none;}
		body > header > section.mainbar > .wrap > .toggle { min-width: 50px; max-width: 50px; }
		body > header > section.mainbar > .wrap > .toggle button { height:50px; width:50px; text-align: left; padding-left: 0px; padding-right: 0px; background-color: transparent; }
		body > header > section.mainbar > .wrap > .toggle button span.title { display: none; }
		body > header > section.mainbar > .wrap > .toggle button span.icon { margin-right: 0px; width:50px; height:50px; text-align: left; background-color: transparent;}
		body > header > section.mainbar > .wrap > .toggle button span.icon .hamburger-inner,
		body > header > section.mainbar > .wrap > .toggle button span.icon .hamburger-inner::before,
		body > header > section.mainbar > .wrap > .toggle button span.icon .hamburger-inner::after { background-color: #fff;}
	}
	@media all and (max-width: 896px) {
		body > header > .page.cookies { padding: 20px; width: calc(100% - 40px);}
		body > header > .page.cookies .cookienotice p { padding-right: 0px;}
		body > header > .page.cookies .cookienotice .theme-button { }
		
		body > header > section.mainbar > .wrap { padding-top: 0px;}
		body > header > section.mainbar > .wrap > .logo { max-width: calc(100% - 100px); padding-left: 20px;}
		body > header > section.mainbar > .wrap > .logo a { padding-left: 10px;}
		body > header > section.mainbar > .wrap > .logo a svg { fill:#fff;}
		body > header > section.mainbar > .wrap > .ux { display: none!important;}
		body > header > section.mainbar > .wrap > .action { min-width:180px; max-width: 180px; height:100px;}
		body > header > section.mainbar > .wrap > .toggle {  display: block; position:absolute; left:-40px; order:-1; max-width: 50px; min-width: 50px; padding-top: 25px;}
		body > header > section.mainbar > .wrap > .toggle button span.title { display: none;}
		body > header > section.mainbar > .wrap > .toggle button span.icon { margin-right: 0px; text-align: right;}
		body > header > section.mainbar > .wrap > .toggle button span.icon .hamburger-inner,
		body > header > section.mainbar > .wrap > .toggle button span.icon .hamburger-inner::before,
		body > header > section.mainbar > .wrap > .toggle button span.icon .hamburger-inner::after { background-color: #fff;}
	}
	@media all and (max-width: 640px) {
		body > header > section.topbar { display: none;}
		body > header > section.mainbar > .wrap > .logo {  min-width: 50px; max-width: calc(100% - 150px);}
		body > header > section.mainbar > .wrap > .logo a { padding-left: 10px; padding-top: 25px; padding-right: 20px;}
		body > header > section.mainbar > .wrap > .logo a span.icon { display: block;}
		body > header > section.mainbar > .wrap > .logo a span.full { display: none;}
		body > header > section.mainbar > .wrap > .logo a svg { height: 50px; width:auto;}
	}
	@media all and (max-width: 512px) {
		body > header > section.mainbar { padding: 0px;}
		body > header > section.mainbar > .wrap { padding-top: 0px;}
		body > header > section.mainbar > .wrap > .logo {  min-width: 130px; max-width: calc(100% - 130px); padding-left: 60px;}
		body > header > section.mainbar > .wrap > .logo a { padding-left: 10px; padding-top: 35px;}
		body > header > section.mainbar > .wrap > .logo a span.icon { display: block;}
		body > header > section.mainbar > .wrap > .logo a span.full { display: none;}
		body > header > section.mainbar > .wrap > .logo a svg { height: 40px; width:auto;}
		body > header > section.mainbar > .wrap > .rating { padding-right: 0; min-width: 140px; max-width: 140px; padding-top: 20px;} 
		
		body > header > section.mainbar > .wrap > .action { min-width:100%; max-width:100%; height:50px; order:-1; }
		body > header > section.mainbar > .wrap > .action ul li { float: left; width:50%;}
		body > header > section.mainbar > .wrap > .action ul li a { text-align: center;}
		
		body > header > section.mainbar > .wrap > .action .language { display:none;}
		
		body > header > section.mainbar > .wrap > .toggle { left:0px; top: 55px; min-width: 50px; max-width: 50px;}
	}
	@media all and (max-width: 320px) {
		body > header > section.mainbar > .wrap > .action ul li a span.title { display: none;}
	}
	

	
		
	
	body > header nav.extra { min-width: 100%; max-width: 100%; padding: 0px 0 0 0; white-space: nowrap; overflow: hidden;}
	body > header nav.extra ul { padding-top: 0px; list-style: none; padding: 0px; margin: 0px;}
	body > header nav.extra ul li { display: inline-block; vertical-align: top; margin-left: 0px;}
	body > header nav.extra ul li a { text-transform:uppercase; font-weight: 400; display: block; text-decoration: none; font-size: 0.85em; opacity: 1; transition: opacity 175ms ease-in; background-color:#fff; color: #0f172f; }
	body > header nav.extra ul li a span.icons { display: none;}
	body > header nav.extra ul li a span.icon { display:inline-block; width:30px; height:50px; vertical-align: top; text-align:right; line-height:50px; margin-right: 0px; font-size: 1em; font-weight: 700; vertical-align: top;}	
	body > header nav.extra ul li a span.title { display:inline-block; vertical-align: top; font-weight: 700; font-family: "eagle", sans-serif; text-transform:uppercase; font-weight: 400; line-height: 30px; padding: 10px 15px 10px 5px; }
	body > header nav.extra ul li a span.spacer { margin-left: 10px; display: none;}
	body > header nav.extra ul li:last-of-type a span.spacer { display: none;}
	body > header nav.extra ul li a:hover { opacity: 1; cursor: pointer;}
	
	body > header nav.extra ul li.webcam a {
		background-color: #0f172f; color:#fff;
/*
		-webkit-box-shadow: inset 0px 0px 0px 1px rgba(3,27,78,.2);
		-moz-box-shadow: inset 0px 0px 0px 1px rgba(3,27,78,.2);
		box-shadow: inset 0px 0px 0px 1px rgba(3,27,78,.2);
*/
	}
	body > header nav.extra ul li.webcam a span.icon { display: inline-block; width: 30px; height:50px; background: url('../icons/webcam-white.svg') no-repeat center center/30px; margin-left: 10px;}
	body > header nav.extra ul li.webcam a span.icon i { display: none;}
	body > header nav.extra ul li.webcam a span.title { margin-right: 10px;}
	
	body > header nav.extra.callto {}
	body > header nav.extra.callto ul {
		
	}
	body > header nav.extra.callto ul li {
		margin-left: 0px;
	}
	body > header nav.extra.callto ul li a {
		 background-color: #0f172f; color:#fff;
	}
	
	body > header nav.extra.callto a[href^="mailto:"]::before {
		font-family: "Font Awesome 5 Pro", sans-serif; content:'\f0e0';
		display: inline-block; width:30px; height:50px; vertical-align: top; text-align: right; line-height: 50px;
	}
	body > header nav.extra.callto a[href^="tel:"]::before {
		font-family: "Font Awesome 5 Pro", sans-serif; content:'\f095'; font-weight: 700;  
		display: inline-block; width:30px; height:50px; vertical-align: top; text-align: right; line-height: 50px;
	}
	body > header nav.extra.callto a[goto-form]::before {
		font-family: "Font Awesome 5 Pro", sans-serif; content:'\f063'; font-weight: 400;
		display: inline-block; width:30px; height:50px; vertical-align: top; text-align: right; line-height: 50px;
	}
	body > header nav.extra.callto a[href^="tel:"],
	body > header nav.extra.callto a[href^="mailto:"] { margin-left: 0px; background-color: #0f172f; }
	body > header nav.extra.callto a[href^="tel:"] span.title,
	body > header nav.extra.callto a[href^="mailto:"] span.title,
	body > header nav.extra.callto a[goto-form] span.title { padding-left: 5px;}
	body > header nav.extra.callto a[href^="tel:"] span.icon,
	body > header nav.extra.callto a[href^="mailto:"] span.icon,
	body > header nav.extra.callto a[goto-form] span.icon { display:none;}
	


	
	
	

/* NAV */
	body > nav.sidenav { 
		position:fixed; top:0px; left:0px; bottom:0px; z-index: 999999;
		width:calc(100vw - 40px); max-width:520px; padding-left: 0px; background-color: #0f172f; color: #fff; 
		transform: translateX( calc(-100%) ); transition: transform 450ms cubic-bezier(0.85, -0.4, 0.2, 1.45); will-transform:transform; pointer-events: none; 
		overflow-y: hidden; overflow-x: hidden; }
	body > nav.sidenav::after {}
	body > nav.sidenav::-webkit-scrollbar { display: none;}
	
	body > nav.sidenav > .rows { height:calc(100%); min-height:calc(100%); max-height: calc(100%);}
	body > nav.sidenav > .rows > .row { padding-left: 40px;}
	body > nav.sidenav > .rows > .row > .padding { padding: 20px 40px 20px 80px;}
	body > nav.sidenav > .rows > .row > .padding > .contain {} 
	
	body > nav.sidenav .row.brand { max-height: 100px; background:#0f172f; color:#fff;}
	body > nav.sidenav .row.brand .padding { padding-bottom: 0px; padding-top: 0px; position: relative;}
	body > nav.sidenav .row.brand .logo { display: block; position: relative; z-index: 0;}
	body > nav.sidenav .row.brand .logo img { max-width: 80px;}
	body > nav.sidenav .row.brand .close { position: absolute; right:0px; top:0px; z-index: 1; width:100px; height:100px; opacity: 0.5; transition: opacity 175ms ease; text-align: center;}
	body > nav.sidenav .row.brand .close:hover { cursor: pointer; opacity: 1;}
	body > nav.sidenav .row.brand .close span.icon { display: block; width: 100px; height:100px; line-height: 100px; font-size: 24px;}
	body > nav.sidenav .row.brand .close span.title { display: none;}
	
	body > nav.sidenav .row.navigation { overflow-y: auto; -webkit-overflow-scrolling: touch; background:#0f172f; color:#fff; }
	body > nav.sidenav .row.navigation::-webkit-scrollbar { display: none;}
	body > nav.sidenav .row.navigation h3 { font-family: "eagle", sans-serif; font-size: 21px; line-height: 1.4em; text-transform: uppercase; font-weight: 400; position: relative; }
	body > nav.sidenav .row.navigation h3::after { content: ''; display: block; width:40px; height:4px; background-color: #0f172f;}
	
	body > nav.sidenav .quick { background:#009d92;  color:#fff; position: relative;}
	body > nav.sidenav .quick .contain { position: relative; z-index: 1;}
	body > nav.sidenav .quick nav ul {}
	body > nav.sidenav .quick nav ul.sub-menu { display: none;}
	body > nav.sidenav .quick nav ul li { min-width:50%; max-width:50%; padding-bottom: 0px;}
	body > nav.sidenav .quick nav ul li a { white-space: nowrap; font-size: 1.5em!important;}
	body > nav.sidenav .quick nav ul li a span.icon { margin-right: 10px; opacity: 1;}
	body > nav.sidenav .quick nav ul li a span.icon i {}
	body > nav.sidenav .quick .pattern { position: absolute; z-index: 0; left:0px; top:0px; right:0px; bottom:0px; background: url('../images/pattern-kiteschool-green.jpg') no-repeat center center/520px; opacity: 0.1; }
	
	body > nav.sidenav .complete { background:#fff; color:#0f172f;}
	body > nav.sidenav .complete nav {}
	body > nav.sidenav .complete nav ul {}
	body > nav.sidenav .complete nav ul:after { content:''; display:block; width:100%; float: none; clear: both;}
	body > nav.sidenav .complete nav ul li { display:block; width: 100%; float: none; position: relative;}
	
	
	
	body > nav.sidenav .row.lang { max-height: 45px; background:#0f172f; color:#fff;}
	body > nav.sidenav .row.lang .padding { padding-bottom: 0px;}
	body > nav.sidenav .row.lang .language .current button { padding: 0 30px!important; text-align: left!important; background-color: transparent!important;}
	body > nav.sidenav .row.lang .language .current button span.icon { float: right!important;}
	body > nav.sidenav .row.lang .language .options a { padding-left: 30px!important; padding-right: 30px!important;}
	
	body > nav.sidenav nav > ul { list-style: none; padding: 0px; margin: 0px; }
	body > nav.sidenav nav > ul > li { padding-bottom: 24px;}
	body > nav.sidenav nav > ul > li > a {font-family: "eagle", sans-serif; font-size: 18px; line-height: 2.4em; text-transform: uppercase; font-weight: 400; text-decoration: none;}
	body > nav.sidenav nav > ul > li > .toggle {
		position: absolute;
		right: 0;
		width: 4rem;
		height: 4rem;
		border: none;
		background: #f3f9fc;
		color: inherit;
		font-size: 17px;
		display: none;
	}
	body > nav.sidenav nav > ul > li > .toggle .fa-minus {
		display: none;
	}
	body > nav.sidenav nav > ul > li.menu-item-has-children > .toggle {
		display: inline-block;
	}
	body > nav.sidenav nav > ul > li > ul.sub-menu {
		list-style: none; padding: 0px; margin: 0px; padding-left: 20px;
		-webkit-box-shadow: inset 2px 0px 0px 0px #e7e8eb;
		-moz-box-shadow: inset 2px 0px 0px 0px #e7e8eb;
		box-shadow: inset 2px 0px 0px 0px #e7e8eb;
		display: none;
		margin-top: 1rem;
	}
	body > nav.sidenav nav > ul > li.-open > ul.sub-menu,
	body > nav.sidenav nav > ul > li.-open > .toggle .fa-minus { 
		display: block;
	}
	body > nav.sidenav nav > ul > li.-open > .toggle .fa-plus {
		display: none;
	}
	body > nav.sidenav nav > ul > li > ul.sub-menu a {
		font-size: 1.5em; text-decoration: none; font-weight: 600; line-height: 1.2em; padding: 10px 0; cursor:pointer; display: block;
	}
	body > nav.sidenav nav > ul > li > ul.sub-menu a:after {
		font-family: "Font Awesome 5 Pro", sans-serif;
		content: "\f105";
		font-weight: 700;
		position: absolute;
		right: 0px;
		top: 7px;
		color: #cfd1d5;
	}
	body > nav.sidenav nav > ul > li > ul.sub-menu .toggle {
		display: none;
	}
	body > nav.sidenav nav > ul > li > ul.sub-menu a:hover { cursor:pointer;}
	

	body > nav.sidenav nav > ul > li.webcam {
		border-bottom: 1px solid #cfd1d5;
		margin-bottom: 24px;
	}

	body > nav.sidenav nav > ul > li.webcam > a {
		display: flex;
		align-items: center;
	}

	body > nav.sidenav nav > ul > li.webcam > a:before {
		font-family: "Font Awesome 5 Pro", sans-serif;
		content: "\f03d";
		margin-right: 1rem;
		font-size: 3rem;
	}

	body > nav.sidenav nav .toggle-button { position: relative; display: block; padding-right: 30px;}
	body > nav.sidenav nav .toggle-button::after { content:"\f107" !important; }
	body > nav.sidenav nav .toggle-button.-toggle::after { content:"\f106"!important; }
	body > nav.sidenav nav .toggle-menu { height:0px; overflow:hidden;}
	body > nav.sidenav nav .toggle-menu.-toggle { height:auto;}
	body > nav.sidenav nav .toggle-menu ul {
		padding-left: 0px;
		-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
	}


/* MAIN */
	body > main { 
		background:#fff; color:#0f172f; position: relative; z-index: 2; overflow: hidden;
		-webkit-transition: -webkit-transform 450ms cubic-bezier(0.85, -0.4, 0.2, 1.45), opacity 200ms ease-in;
	    -moz-transition: -moz-transform 450ms cubic-bezier(0.85, -0.4, 0.2, 1.45), opacity 200ms ease-in;
	    -ms-transition: -ms-transform 450ms cubic-bezier(0.85, -0.4, 0.2, 1.45), opacity 200ms ease-in;
	    -o-transition: -o-transform 450ms cubic-bezier(0.85, -0.4, 0.2, 1.45), opacity 200ms ease-in;
	    transition: transform 450ms cubic-bezier(0.85, -0.4, 0.2, 1.45), opacity 200ms ease-in;
	    will-transform: transform, opacity;
		}
	body > main > article > * { display: none;}
	body > main > article > div, 
	body > main > article > header, 
	body > main > article > section { display: block;}

/* FOOTER */
	body > footer {
		position:relative;  opacity: 1; z-index: 1;
		-webkit-transition: -webkit-transform 450ms cubic-bezier(0.85, -0.4, 0.2, 1.45), opacity 200ms ease-in;
	    -moz-transition: -moz-transform 450ms cubic-bezier(0.85, -0.4, 0.2, 1.45), opacity 200ms ease-in;
	    -ms-transition: -ms-transform 450ms cubic-bezier(0.85, -0.4, 0.2, 1.45), opacity 200ms ease-in;
	    -o-transition: -o-transform 450ms cubic-bezier(0.85, -0.4, 0.2, 1.45), opacity 200ms ease-in;
	    transition: transform 450ms cubic-bezier(0.85, -0.4, 0.2, 1.45), opacity 200ms ease-in;
	    will-transform: transform, opacity; 
	}





body.-showmenu { }
body.-showmenu > nav.sidenav {  transform: translateX(-60px); pointer-events: all; }
body.-showmenu > nav.sidenav::after {  opacity: 1;}
body.-showmenu > header { transform: translateX(100px); pointer-events: all; opacity: 0.15;}
body.-showmenu > main { transform: translateX(100px); pointer-events: all; opacity: 0.15;}
body.-showmenu > footer { transform: translateX(100px); pointer-events: all; opacity: 0.15;}






#mobilemenu > .page {padding: 0px!important;}
#mobilemenu > .page > .wrap {padding: 0px!important;}
#mobilemenu > .page > .wrap > .columns { }
#mobilemenu ul { list-style: none; padding: 0px; margin: 0px;}
#mobilemenu .top { padding: 10px 40px 0px 80px; background:#0f172f; color:#fff;}
#mobilemenu .top .logo { max-width: 130px; min-width: 130px;}
#mobilemenu .middle {padding: 40px 40px 40px 80px; background:#e61674; color:#fff;}
#mobilemenu .middle > nav > ul > li { padding-bottom: 10px;}
#mobilemenu .middle > nav > ul > li > a {font-family: "eagle", sans-serif; font-size: 1.8em; line-height: 2.4em; text-transform: uppercase; font-weight: 400; text-decoration: none;}
#mobilemenu .middle ul.sub-menu { 
	padding-left: 20px;
	-webkit-box-shadow: inset 2px 0px 0px 0px #fff;
		-moz-box-shadow: inset 2px 0px 0px 0px #fff;
		box-shadow: inset 2px 0px 0px 0px #fff;
	}
#mobilemenu .middle ul.sub-menu a { }




#mobilemenu .bottom {padding: 40px 40px 40px 80px; background:#0f172f; color:#fff;}
#mobilemenu .bottom > nav > ul > li { padding-bottom: 5px;}
#mobilemenu .bottom a {font-size: 1.5em; text-transform: capitalize; font-weight: 400; text-decoration: none; font-weight: 600;}
#mobilemenu .bottom a span.icon { margin-right: 10px;}







@media all and (max-width: 1536px) {
	header .navigation nav.main ul li a span.title { font-size:0.9em;}
}
@media all and (max-width: 896px) {
	body > header { position: absolute; background-color: transparent; color: #fff;}
	body > header > .page { padding-top: 20px;}
	body > header::after,
	body > header > .skew { display: none!important;}
	body > header .brand { max-width: none;}
	body > header .logo { text-align: left;}
	body > header .brand .logo a svg { fill:#fff;}
	body > header .navigation { display: none;}
	body > header .actions { }
	body > header .actions .contain { padding-right: 20px;}
}
@media all and (max-width: 768px) {
	header > .page > .wrap > .columns { padding: 0 0 40px 0px;}
	
}
@media all and (max-width: 640px) {
	header { position: absolute;}
	header .brand {  position: static; }
	header .brand .rowx { position: static;}
	header { order:-1; padding: 0px; }
/* 	header .brand { transform: scale(0.8)!important; transform-origin: left top;} */
	header .logo { text-align: left; min-width:160px; max-width:490px; position: relative; z-index: 0;  }
	header .logo a { padding-right: 0px; }
	header .modalnav { min-width:80px; max-width: 80px; text-align: left; z-index: 10;}
	header .modalnav > .contain > .modal { width: calc(100vw - 60px); top:40px;}
	header .modalnav > .shade { left:-30px; width:calc(100vw); height:calc(5000vh);}
	header .actions { display: none;}
	header .reviews { padding: 0px 0 0 0; color: #fff; max-width: 120px; position: relative; z-index: 0;}
	header .reviews > .contain { text-align: right;}
	
	body > nav.sidenav { width: calc(100vw);}
	body > nav.sidenav > .rows > .row > .padding { padding-left: 60px; padding-right: 20px;}
	body > nav.sidenav .quick { display: none;}
	body > nav.sidenav .quick nav ul li { min-width: 100%; max-width: 100%;}
}






.owl-nav {}
.owl-nav.disabled { display: none;}
.owl-dots {}
.owl-dots.disabled { display: none;}
.owl-item { float: left;}

main {}
main > p,
main > ul,
main > pre { text-align: center; display: none;}


footer { position: relative; background:#0f172f; z-index: 9;}
footer::after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 200px;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #0f172f;
    transform-origin: top left;
    -ms-transform: skew(0deg,-2deg);
    -webkit-transform: skew(0deg,-2deg);
    transform: skew(0deg,-2deg);
}






#footer { position: relative; z-index: 0;}
#footer > .page { padding-bottom: 60px; padding-top: 40px;}
#footer > .page > .wrap {}
#footer > .page > .wrap > .columns {}
#footer > .page > .wrap > .columns > * { min-width: 100%;}

#footer .logo { text-align: center;}
#footer .logo a { display:inline-block; max-width: 155px; min-width: 155px; margin: 0 auto;}
#footer .menu { text-align: center;}
#footer .menu nav { padding-top: 0px;}
#footer .menu nav ul { display: inline-block; padding: 0px; list-style: none;}
#footer .menu nav ul.sub-menu {display: none!important;}
#footer .menu nav ul li { display: inline-block; position: relative;}
#footer .menu nav ul li a { display: block; padding: 10px 15px; text-decoration: none; font-family: "Frank New", sans-serif; text-transform: uppercase; font-weight: 700; position: relative;}
#footer .menu nav ul li a span.title {}
#footer .menu nav ul li a span.icon { margin-right: 10px;}
#footer .menu nav ul li span.bar {
	position: absolute; left:0px; bottom:0px; width:0px; height: 2px; background-color: #0f172f; opacity: 0.1;
	transition: width 250ms, opacity 400ms;
	will-change: width, opacity;
	}

#footer .menu nav ul li:hover span.bar { 
	width:100%; background-color: #0f172f;
	}
#footer .menu nav ul li.current_page_item span.bar { 
	width:100%; background-color: #0f172f; opacity: 1;
	}
#footer .menu nav ul li.beachclub:hover span.bar,
#footer .menu nav ul li.beachclub.current_page_item span.bar { 
	background-color: #50c0dd; opacity: 1;
	}
#footer .menu nav ul li.activities:hover span.bar,
#footer .menu nav ul li.activities.current_page_item span.bar { 
	background-color: #e13370; opacity: 1;
	}
#footer .menu nav ul li.kiteschool:hover span.bar,
#footer .menu nav ul li.kiteschool.current_page_item span.bar { 
	background-color: #009d92; opacity: 1;
	}
#footer .menu nav ul li.surfschool:hover span.bar,
#footer .menu nav ul li.surfschool.current_page_item span.bar { 
	background-color: #136685; opacity: 1;
	}
	
#footer .menu nav ul li.surfshop:hover span.bar,
#footer .menu nav ul li.surfshop.current_page_item span.bar { 
	background-color: #efefef; opacity: 0.5;
	}
#footer .menu nav ul li.contact a {
	padding-left:15px; padding-right: 15px;
}
#footer .menu nav ul li.contact a,
#footer .menu nav ul li.contact:hover a,
#footer .menu nav ul li.contact:hover span.bar,
#footer .menu nav ul li.contact.current_page_item span.bar { 
	background-color: #fff!important; color:#0f172f!important; opacity: 1;
	}
#footer .menu nav.top ul li:hover a,
#footer .menu nav.top ul li.current_page_item a { 
	color: #fff;
	}

@media all and (max-width: 1280px) {
	#footer .menu nav ul { display: block; text-align: center;}
	#footer .menu nav ul li a { display: inline-block;}
	#footer .menu nav ul:last-of-type li { }
	#footer .menu nav ul:last-of-type li a { background-color: #fff; color:#0f172f; text-align: center; }
}
@media all and (max-width: 520px) {
	#footer .menu nav ul:first-of-type { display: none;}
	#footer .menu nav ul { text-align: center;}
	#footer .menu nav ul li { width: 49%; text-align: center;}
	#footer .menu nav ul li a { padding-left: 0px; padding-right: 0px;}
	#footer .menu nav ul:last-of-type li { width: 100%; clear: both; width: 100%;}
	#footer .menu nav ul:last-of-type li a { width: 100%; clear: both; width: 100%; background-color: #fff; color:#0f172f; text-align: center; }
}

.form-steps .form-step { display: block;}

/* PDF EMBEDDER */
.pdfemb-poweredby { display: none!important;}

*[fadein="onscroll"] {
	opacity: 0;
	transform: translateY(25px);
	transition: transform 400ms, opacity 400ms;
	-webkit-transition: transform 400ms, opacity 400ms;
	pointer-events: none;
	will-change: transform;
}
*[fadein="onscroll"].activate {
	opacity: 1;
	transform: translateY(0px);
	pointer-events: auto;
}

/*
*[fadeload] {
	opacity: 1;
	transform: translateY(25px);
	transition: transform 200ms, opacity 200ms;
	-webkit-transition: transform 200ms, opacity 200ms;
}
*/
*[fadeload], *[fadeload].activate {
	opacity: 1;
	transform: translateY(0px);
	will-change: transform, opacity;
}

*[responsive-background-image] img {
  display: none; width:100%!important;
}

/* BUTTON TO IFRAME */
	.form[form-type="external"] .form-fields { text-align: center;}
	button[data-iframe] {
		display:inline-block; border:#000 0px solid; padding:16px; background-color:#000; color:#fff; font-family:inherit; font-size:16px; margin: 16px auto 48px auto;
	}
/* COLORS */
	body.colors_surfkampen > header .actions .contact ul li.call a { background-color: #378533;}
	body.colors_kiteschool > header .actions .contact ul li.call a { background-color: #009d92;}
	body.colors_surfschool > header .actions .contact ul li.call a { background-color: #136685;}
	body.colors_basecamp > header .actions .contact ul li.call a { background-color: #FF5429;}
	body.colors_activities > header .actions .contact ul li.call a { background-color: #e61674;}
	body.colors_surfshop > header .actions .contact ul li.call a { background-color: #0f172f;}
	body.colors_beachclub > header .actions .contact ul li.call a { background-color: #00accc;}
	
	body.colors_surfkampen section.hero .column.text p.actions a:first-of-type {background-color: #378533!important;}
	body.colors_kiteschool section.hero .column.text p.actions a:first-of-type {background-color: #009d92!important;}
	body.colors_surfschool section.hero .column.text p.actions a:first-of-type {background-color: #136685!important;}
	body.colors_basecamp section.hero .column.text p.actions a:first-of-type {background-color: #FF5429!important;}
	body.colors_activities section.hero .column.text p.actions a:first-of-type {background-color: #e61674!important;}
	body.colors_surfshop section.hero .column.text p.actions a:first-of-type {background-color: #FFF!important;}
	body.colors_beachclub section.hero .column.text p.actions a:first-of-type {background-color: #00accc!important;}
	
	body.colors_surfkampen > header .reviews .contain .stars { color: #378533;}
	body.colors_kiteschool > header .reviews .contain .stars { color: #009d92;}
	body.colors_surfschool > header .reviews .contain .stars { color: #136685;}
	body.colors_basecamp > header .reviews .contain .stars { color: #FF5429;}
	body.colors_activities > header .reviews .contain .stars { color: #e61674;}
	body.colors_surfshop > header .reviews .contain .stars { color: #0f172f;}
	body.colors_beachclub > header .reviews .contain .stars { color: #00accc;}



/* Activity filters */

.activity-filters .wp-block-group {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: wrap;
	gap: 2rem;
	padding: 0 40px;
}

.activity-filters .facetwp-facet { margin: 0; }
.activity-filters .facetwp-facet .fs-wrap { width: 250px; }
.activity-filters .facetwp-facet .fs-label-wrap {
	padding: 1rem 0;
	border: none;
	color: #868a96;
	border-bottom: 2px solid currentColor;
	background: transparent;
	font-size: 1.75rem;
	cursor: pointer;
}

.activity-filters .facetwp-facet .fs-open .fs-label-wrap,
.activity-filters .facetwp-facet:hover .fs-label-wrap { color: black; }
.activity-filters .fs-label { display: flex; align-items: center; }

.activity-filters .fs-label:before {
	content: '';
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	width: 15px;
	height: 15px;
	margin-right: 1rem;
}

.activity-filters [data-name="activiteit_type"] .fs-label:before { background-image: url('../icons/type-acitiviteit.svg'); }
.activity-filters [data-name="activiteit_aantal_personen"] .fs-label:before { background-image: url('../icons/personen.svg'); }
.activity-filters [data-name="activiteit_intensiteit"] .fs-label:before { background-image: url('../icons/intensiteit-acitiviteit.svg'); }

.activity-filters .fs-arrow {
	width: auto;
    border: none;
    height: 15px;
}

.activity-filters .fs-search { display: none; }
.activity-filters .fs-arrow:before { content: '\f107'; font-family: 'Font Awesome 5 Pro'; }
.activity-filters .fs-dropdown .fs-search { padding: 1.5rem; background: #f1f9fc; }
.activity-filters .fs-dropdown .fs-options { padding: 1rem 0; }
.activity-filters .fs-dropdown .fs-option { font-size: 14px; }
.activity-filters .fs-wrap.multiple .fs-option.selected .fs-checkbox i { background: #e61674; }
.facetwp-template[data-name="activities"] .grid-item .info { padding: 30px 15px 30px 30px!important; }
.facetwp-template[data-name="activities"] .grid-item .icon { padding: 25px 30px 0 0 !important; max-width: none !important; transform: translateX(-15px);}
.facetwp-template[data-name="activities"] .grid-item .thumb { aspect-ratio: 1; }

@media screen and (max-width: 500px) {
	.activity-filters .wp-block-group { flex-direction: column; }
	.activity-filters .facetwp-facet { width: 100%; }
	.activity-filters .facetwp-facet .fs-wrap {	width: 100%; }
}