/***
Module-Name: Aduvio Website
Machine-Name: aduvio-website
Author: Aduv.io
Version: 2.0
Requires-Aduvio: 3.95
***/

@charset "utf-8";
/* CSS Document */
/* font */
/**/


html,
body {
	margin:0;
	padding:0;
	height:100%;
	font-size: 14px;
	background: #f7f9fb;
}


button {
	box-shadow: 0 4px 12px rgba(16,42,82,.08), 0 2px 4px rgba(16,42,82,.05);
}


#cover-spin {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(0,0,0,0.7);
    z-index:9999;
    display:none;
}

@-webkit-keyframes spin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

#cover-spin::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:black;
    border-top-color:transparent;
    border-width: 4px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

.warning {
	color: #FBC02D;
}

.danger {
	color: #E53935;
}

.info {
	color: #0277BD;
}

.success {
	color: #388E3C;
}

.navbar {
	padding-top: 0px;
	padding-bottom: 0px;
}

.navbar-logo {
	margin-top: -12px;
}

/*The header's colour. It stays on .navbar-inverse rather than .site-header: theme and site
  stylesheets load after this one and recolour the header through .navbar-inverse, and a plain
  background there still replaces the gradient*/
.navbar-inverse {
	background: linear-gradient(115deg, #0a0a0a 0%, #161616 55%, #242424 100%) #141414;
	border-color: transparent;
}

#site-banner a {
	color: inherit !important;
	text-decoration: underline;
}

/*The banner is the first thing inside the fixed navbar and spans the whole bar. Its colours and
  font size are settings, so they arrive inline; the rest belongs here.*/
#site-banner {
	padding: 5px 15px;
	text-align: center;
}

header {
	background:#000;
	height: 40px;
	width: 100%;
	overflow: hidden;
	position: fixed;
	z-index: 999;
	border-bottom: 2px #333;
}

.header_search {
	float: right;
	margin-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	box-sizing: border-box;
	border: none;
}

.header_search input[type='text'] {
	border: 1px solid #222;
	width: 200px;
	background: #ccc;
	padding: 5px 15px;
	border-radius: 15px;
	-moz-border-radius: 15px;
color: #000;
}

.header_search input[type='text']:focus {
	background: #fff;
	color: #000;
}

#header_social_container {
	margin-top: 20px;
}


#header_social_container i {
	margin-left: 15px;
}

.header_fb_icon, .header_twitter_icon {
	color: #fff;
}

/* ==========================================================================
   Site header - php/includes/header.php

   Desktop (992px up) is two rows: a thin strip with the phone, e-mail and social icons and the
   language switcher, then the bar - logo on the left, the site menu centred on the page, the
   account links and cart on the right. The strip is only printed when something in it is turned
   on, and the nav carries .has-utility-bar when it is.

   Below 992px it is one bar with the menu button, and everything opens under it in the order
   menu, account, icons.

   The colours are custom properties on .site-header so a theme can retune the header without
   chasing every selector below. The background itself stays on .navbar-inverse, see above.
   ========================================================================== */

.site-header {
	--header-accent: #fff;
	--header-accent-ink: #111;
	--header-link: rgba(255,255,255,.78);
	--header-link-hover: #fff;
	--header-rule: rgba(255,255,255,.08);
	--header-strip-bg: rgba(0,0,0,.22);
	--header-gutter: 16px;
	border-width: 0px;
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/*A thin accent line along the bottom edge. .navbar uses :after as a clearfix, which a fixed bar
  with nothing floating after it has no use for*/
.site-header:after {
	content: '';
	display: block;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--header-accent) 30%, var(--header-accent) 70%, transparent);
	opacity: .2;
	pointer-events: none;
}

/*The page starts below the fixed header - page-js.php sets the real padding from the header's
  measured height once it has loaded, these are only what it starts at*/
.site-header ~ .content {
	padding-top: 60px;
}

.site-header .site-header-main {
	padding-left: var(--header-gutter);
	padding-right: var(--header-gutter);
}

/*Bootstrap pulls the brand 15px left from 768px up with a .navbar > .container-fluid selector,
  so this one has to be as specific*/
.site-header > .site-header-main .navbar-brand {
	display: flex;
	align-items: center;
	height: 60px;
	margin-left: 0px;
	padding: 10px 0px;
}

.site-header .navbar-logo {
	display: block;
	width: auto;
	max-width: 220px;
	height: 40px;
	margin-top: 0px;
	object-fit: contain;
}

/*The lists are flex rows on both layouts, where Bootstrap's clearfix pseudo elements would each
  become an item and take a gap*/
.site-header .site-header-menu:before,
.site-header .site-header-menu:after,
.site-header #header-nav-right:before,
.site-header #header-nav-right:after,
.site-header .site-header-utility:before,
.site-header .site-header-utility:after {
	content: none;
}

.site-header .navbar-nav > li > a {
	color: var(--header-link);
	font-weight: 500;
	transition: color .15s ease, background-color .15s ease;
}

.site-header .navbar-nav > li > a:hover,
.site-header .navbar-nav > li > a:focus,
.site-header .navbar-nav > .open > a,
.site-header .navbar-nav > .open > a:hover,
.site-header .navbar-nav > .open > a:focus {
	color: var(--header-link-hover);
	background-color: transparent;
}

.site-header .caret {
	margin-left: 4px;
	opacity: .7;
}

/*Account links: Sign Up / My Account is the button, Login / Logout a plain link beside it*/
.site-header #header-nav-right > li > a {
	border-radius: 999px;
	line-height: 20px;
}

.site-header #header-nav-right > li > a.header-cta {
	background: var(--header-accent);
	color: var(--header-accent-ink);
	font-weight: 600;
}

.site-header #header-nav-right > li > a.header-cta:hover,
.site-header #header-nav-right > li > a.header-cta:focus {
	background: #d4d4d4;
	color: var(--header-accent-ink);
}

.site-header .header-cart-link {
	position: relative;
}

.site-header .header-cart-icon {
	font-size: 18px;
}

/*The contact and social icons are one row inside a single li*/
.site-header .navbar-nav > li.header-icon-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.site-header .navbar-nav > li.header-icon-row > a {
	padding: 0px 8px;
	color: var(--header-link);
}

.site-header .navbar-nav > li.header-icon-row > a:hover,
.site-header .navbar-nav > li.header-icon-row > a:focus {
	color: var(--header-accent);
}

.site-header .header-icon-row .header_fb_icon {
	color: inherit;
}

/*The phone and e-mail icons: Front End Settings > Header sets the shape and the two colours, header.php passes the colours as
  --contact-icon-color and --contact-icon-bg. With none set the icon-only one keeps the header's link colours and a shaped one takes
  the theme's main colour (header.php passes it as the background), or the header accent when there is no main colour either. These carry one more class than the row rules above and the breakpoint ones, so they win over both*/
.site-header .navbar-nav > li.header-icon-row > a.header-contact-icon {
	color: var(--contact-icon-color, var(--header-link));
}

.site-header .navbar-nav > li.header-icon-row > a.header-contact-icon:hover,
.site-header .navbar-nav > li.header-icon-row > a.header-contact-icon:focus {
	color: var(--contact-icon-color, var(--header-accent));
}

.site-header .navbar-nav > li.header-icon-row > a.header-contact-icon-circle,
.site-header .navbar-nav > li.header-icon-row > a.header-contact-icon-square {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0px 0px 0px 8px;
	padding: 0px;
	line-height: 1;
	background: var(--contact-icon-bg, var(--header-accent));
	color: var(--contact-icon-color, var(--header-accent-ink));
	transition: opacity .15s ease;
}

.site-header .navbar-nav > li.header-icon-row > a.header-contact-icon-circle:hover,
.site-header .navbar-nav > li.header-icon-row > a.header-contact-icon-circle:focus,
.site-header .navbar-nav > li.header-icon-row > a.header-contact-icon-square:hover,
.site-header .navbar-nav > li.header-icon-row > a.header-contact-icon-square:focus {
	color: var(--contact-icon-color, var(--header-accent-ink));
	opacity: .85;
}

.site-header .navbar-nav > li.header-icon-row > a.header-contact-icon-circle {
	border-radius: 50%;
}

.site-header .navbar-nav > li.header-icon-row > a.header-contact-icon-square {
	border-radius: 6px;
}

.site-header #nav-language-link > a:before {
	content: '\f0ac';
	margin-right: 6px;
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
}

.site-header #header-language-select {
	height: 28px;
	padding: 0px 6px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 6px;
	background: transparent;
	color: var(--header-link-hover);
}

.site-header #header-language-select option {
	color: #222;
}

.site-header .navbar-toggle {
	margin: 13px 0px;
	padding: 10px;
	border: 0px;
	border-radius: 8px;
	box-shadow: none;
}

.site-header .navbar-toggle:hover,
.site-header .navbar-toggle:focus {
	background: rgba(255,255,255,.1);
}

.site-header .navbar-toggle .icon-bar {
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
}

/*Header: the menu button stays on until the desktop layout.

Bootstrap 3 lays the navbar out horizontally from 768px up, which is exactly the width of a tablet
held upright. The row it has to fit on there is the site menu, plus Sign Up / Login or My Account /
Logout, plus the phone, e-mail and social icons and the language switcher - so it wrapped onto a
second and often a third line. The navbar is fixed to the top of the page and .content clears it
with a flat 50px of padding, so every line it wrapped onto was a line of the page hidden behind it.

Below 992px the whole lot goes back behind the menu button instead. Bootstrap's own collapsed
styles only reach to 767px, so the parts of them that matter above that are repeated here.*/

@media (max-width: 991px) {

	.navbar-header {
		float: none;
	}

	.navbar-toggle {
		display: block;
	}

	.navbar-fixed-top {
		top: 0;
		border-width: 0px 0px 1px;
	}

	.navbar-collapse {
		border-top: 1px solid rgba(0,0,0,.1);
		box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
	}

	.navbar-fixed-top .navbar-collapse {
		max-height: 340px;
		overflow-y: auto;
	}

	.navbar-collapse.collapse {
		display: none !important;
	}

	.navbar-collapse.collapse.in {
		display: block !important;
	}

	.navbar-nav,
	.navbar-left,
	.navbar-right {
		float: none !important;
	}

	.navbar-nav {
		margin: 7.5px -15px;
	}

	.navbar-nav > li {
		float: none;
	}

	.navbar-nav > li > a {
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 15px;
		padding-right: 15px;
	}

	/*Sub menus open in place rather than as a panel floating over the page*/
	.navbar-nav .open .dropdown-menu {
		position: static;
		float: none;
		width: auto;
		margin-top: 0px;
		background-color: transparent;
		border: 0px;
		box-shadow: none;
	}

	.navbar-nav .open .dropdown-menu > li > a {
		padding: 5px 15px 5px 25px;
		line-height: 20px;
		color: #9d9d9d;
	}

	.navbar-nav .open .dropdown-menu > li > a:hover,
	.navbar-nav .open .dropdown-menu > li > a:focus {
		color: #fff;
		background-image: none;
		background-color: transparent;
	}

	/*The open menu: the site menu, then the account links and cart as a row of buttons, then the
	  icons and the language switcher, each part under a divider*/
	.site-header .navbar-collapse {
		max-height: 70vh;
		margin-left: calc(var(--header-gutter) * -1);
		margin-right: calc(var(--header-gutter) * -1);
		padding: 0px var(--header-gutter) 14px;
		border-top: 1px solid var(--header-rule);
		box-shadow: none;
	}

	.site-header .navbar-nav {
		margin: 0px;
	}

	.site-header .navbar-nav > li {
		padding-left: 0px;
		padding-right: 0px;
	}

	.site-header .site-header-menu {
		padding: 6px 0px;
	}

	.site-header .site-header-menu > li > a {
		padding: 11px 0px;
		font-size: 15px;
	}

	.site-header .navbar-nav .open .dropdown-menu {
		margin: 0px 0px 6px 2px;
		border-left: 2px solid var(--header-rule);
	}

	.site-header .navbar-nav .open .dropdown-menu > li > a {
		padding: 8px 0px 8px 16px;
		color: var(--header-link);
	}

	.site-header .navbar-nav .open .dropdown-menu > li > a:hover,
	.site-header .navbar-nav .open .dropdown-menu > li > a:focus {
		color: var(--header-link-hover);
	}

	.site-header #header-nav-right {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 14px 0px;
		border-top: 1px solid var(--header-rule);
	}

	.site-header #header-nav-right > li > a {
		padding: 8px 16px;
		border: 1px solid rgba(255,255,255,.18);
	}

	.site-header #header-nav-right > li > a.header-cta {
		border-color: transparent;
	}

	.site-header .site-header-utility {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding-top: 8px;
		border-top: 1px solid var(--header-rule);
	}

	/*The icons line up with the menu text above them, and get a finger sized row to sit on*/
	.site-header .navbar-nav > li.header-icon-row {
		margin-left: -8px;
	}

	.site-header .navbar-nav > li.header-icon-row > a,
	.site-header #nav-language-link > a {
		padding-top: 0px;
		padding-bottom: 0px;
		line-height: 44px;
	}

	.site-header #nav-language-link > a {
		padding-left: 0px;
		padding-right: 0px;
	}
}

@media (min-width: 992px) {

	.site-header {
		--header-gutter: 24px;
	}

	.site-header ~ .content {
		padding-top: 70px;
	}

	/*36px of strip plus its 1px rule*/
	.site-header.has-utility-bar ~ .content {
		padding-top: 107px;
	}

	/*Logo | menu | account. The two outside columns share what is left equally, which is what keeps
	  the menu centred on the page rather than in the space between the logo and the account links -
	  and each is still at least as wide as what is in it, so a long menu wraps rather than running
	  under the logo*/
	.site-header .site-header-main {
		display: grid;
		grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
		grid-template-areas: "brand menu account";
		align-items: center;
		column-gap: 24px;
	}

	.site-header.has-utility-bar .site-header-main {
		grid-template-areas: "utility utility utility" "brand menu account";
	}

	/*Bootstrap's clearfix pseudo elements would each take a cell of the grid*/
	.site-header .site-header-main:before,
	.site-header .site-header-main:after,
	.site-header .navbar-collapse:before,
	.site-header .navbar-collapse:after {
		content: none;
	}

	/*The collapse wrapper is only there for the menu button. Here its lists are placed in the grid
	  directly, which is what lets the menu and the account links sit in columns of their own and
	  the strip span the full width above them*/
	.site-header .navbar-collapse.collapse {
		display: contents !important;
	}

	.site-header .navbar-header {
		grid-area: brand;
		float: none;
	}

	.site-header > .site-header-main .navbar-brand {
		height: 70px;
		padding: 15px 0px;
	}

	.site-header .site-header-menu {
		grid-area: menu;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		float: none !important;
		margin: 0px;
	}

	.site-header .site-header-menu > li > a {
		padding: 25px 14px;
		font-size: 15px;
		line-height: 20px;
	}

	/*An accent underline grows in under the hovered item and the one whose sub menu is open*/
	.site-header .site-header-menu > li > a:after {
		content: '';
		position: absolute;
		left: 14px;
		right: 14px;
		bottom: 16px;
		height: 2px;
		border-radius: 2px;
		background: var(--header-accent);
		transform: scaleX(0);
		transition: transform .2s ease;
	}

	.site-header .site-header-menu > li > a:hover:after,
	.site-header .site-header-menu > li > a:focus:after,
	.site-header .site-header-menu > li.open > a:after,
	.site-header .site-header-menu > li.active > a:after {
		transform: scaleX(1);
	}

	.site-header .site-header-menu > li > .dropdown-menu {
		left: 50%;
		min-width: 210px;
		margin-top: -8px;
		padding: 8px;
		border: 0px;
		border-radius: 10px;
		box-shadow: 0 16px 40px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
		transform: translateX(-50%);
		animation: site-header-dropdown .16s ease-out;
	}

	.site-header .site-header-menu .dropdown-menu > li > a {
		padding: 9px 14px;
		border-radius: 6px;
		color: #222;
	}

	.site-header .site-header-menu .dropdown-menu > li > a:hover,
	.site-header .site-header-menu .dropdown-menu > li > a:focus {
		background: #f0f0f0;
		color: #111;
	}

	.site-header #header-nav-right {
		grid-area: account;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 4px;
		margin: 0px;
	}

	.site-header #header-nav-right > li > a {
		padding: 8px 14px;
	}

	.site-header #header-nav-right > li > a:hover,
	.site-header #header-nav-right > li > a:focus {
		background-color: rgba(255,255,255,.08);
	}

	/*The strip reaches past the gutter to both edges of the screen*/
	.site-header .site-header-utility {
		grid-area: utility;
		display: flex;
		align-items: center;
		float: none !important;
		min-height: 36px;
		margin: 0px calc(var(--header-gutter) * -1);
		padding: 0px var(--header-gutter);
		background: var(--header-strip-bg);
		border-bottom: 1px solid var(--header-rule);
		font-size: 13px;
	}

	/*Icons to the left, the language switcher to the right - either one on its own keeps its side*/
	.site-header .navbar-nav > li.header-icon-row {
		margin-left: -8px;
		margin-right: auto;
	}

	.site-header .header-language-item,
	.site-header #nav-language-link {
		margin-left: auto;
	}

	.site-header .navbar-nav > li.header-icon-row > a,
	.site-header #nav-language-link > a {
		padding-top: 0px;
		padding-bottom: 0px;
		line-height: 36px;
	}

	.site-header #nav-language-link > a {
		padding-left: 0px;
		padding-right: 0px;
		font-size: 13px;
	}

	/*Phones keep 16px on the select - see the note on the max-width: 767px block further down*/
	.site-header #header-language-select {
		height: 26px;
		font-size: 13px;
	}
}

@media (min-width: 1400px) {

	.site-header {
		--header-gutter: 40px;
	}
}

@keyframes site-header-dropdown {
	from {
		opacity: 0;
		transform: translate(-50%, 6px);
	}
	to {
		opacity: 1;
		transform: translate(-50%, 0px);
	}
}

@media (prefers-reduced-motion: reduce) {

	.site-header *,
	.site-header *:after {
		animation: none !important;
		transition: none !important;
	}
}


.warning {
	color: #FBC02D;
}

.danger {
	color: #E53935;
}

.info {
	color: #0277BD;
}

.success {
	color: #388E3C;
}


.aduvio-feature-card {

  background: #ffffff !important;
  border: 1px solid rgba(15, 41, 66, 0.08);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 41, 66, 0.06),
              0 1px 3px rgba(15, 41, 66, 0.04);
  transition: box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
	padding: 15px;
}

.aduvio-feature-card:hover {
  box-shadow: 0 10px 24px rgba(15, 41, 66, 0.10),
              0 4px 8px rgba(15, 41, 66, 0.06);
  transform: translateY(-2px);
}

/* Bootstrap draws a focus ring on any focused link. Clicking a tile leaves its link focused, and the browser restores that on Back, so the tile
   came back highlighted. :focus-visible is true for keyboard focus only, so the ring is dropped for the mouse and stays for tabbing */
.aduvio-feature-card a:focus:not(:focus-visible) {
  outline: none;
}

/*List group styles */

.panel-body .list-group {
	margin-bottom: 0px;
}


.warning {
	color: #FBC02D;
}

.danger {
	color: #E53935;
}

.info {
	color: #0277BD;
}

.success {
	color: #388E3C;
}


.aduvio-feature-card {

  background: #ffffff !important;
  border: 1px solid rgba(15, 41, 66, 0.08);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 41, 66, 0.06),
              0 1px 3px rgba(15, 41, 66, 0.04);
  transition: box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
	padding: 15px;
}

.aduvio-feature-card:hover {
  box-shadow: 0 10px 24px rgba(15, 41, 66, 0.10),
              0 4px 8px rgba(15, 41, 66, 0.06);
  transform: translateY(-2px);
}

/* Bootstrap draws a focus ring on any focused link. Clicking a tile leaves its link focused, and the browser restores that on Back, so the tile
   came back highlighted. :focus-visible is true for keyboard focus only, so the ring is dropped for the mouse and stays for tabbing */
.aduvio-feature-card a:focus:not(:focus-visible) {
  outline: none;
}

/*List group styles */

.panel-body .list-group {
	margin-bottom: 0px;
}

/* jQuery UI 1.14 inserts prevText/nextText ("Previous month"/"Next month") as plain text, and this
   site loads no jQuery UI theme to hide it, so the text is hidden and the arrows drawn with Font Awesome
   (same as the panels' aduvio-style.css). */
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
	background: none;
	text-indent: 0;
	font-size: 0;
}
.ui-datepicker .ui-datepicker-prev .ui-icon::before,
.ui-datepicker .ui-datepicker-next .ui-icon::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: 13px;
}
.ui-datepicker .ui-datepicker-prev .ui-icon::before { content: "\f053"; }
.ui-datepicker .ui-datepicker-next .ui-icon::before { content: "\f054"; }


.ui-datepicker {
	z-index: 1060 !important;
	background: rgb(255,255,255);
}

.clickable {
	cursor: pointer;
}

.image_shaded:after {
content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, transparent 0px, transparent 0px, rgba(0, 0, 0, 0.50) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
	transition-duration: 0.5s;
}

.content {
	min-height: 400px;
	overflow: hidden;
	padding-top: 50px;
	background: #f7f9fb;
}

.banner-row {
	background-color: #263544;
}

.sky-form .required {
	color: #f00;
}

.banner-row {
	background-color: #263544;
}

.sky-form .required {
	color: #f00;
}

/*Padding and margin styles*/

.padding-0 {
	padding: 0px !important;
}
.padding-bottom-sm {
	padding-bottom: 25px;
}

.padding-top-xs {
	padding-top: 10px !important;
}

.padding-xs {
	padding: 10px !important;
}

.padding-top-md {
	padding-top: 40px;
}

.padding-bottom-md {
	padding-bottom: 40px;
}


.margin-top-xs {
	margin-top: 10px !important;
}

.margin-bottom-xs {
	margin-bottom: 10px !important;
}

.margin-left-xs {
	margin-left: 10px !important;
}
.margin-right-xs {
	margin-right: 10px !important;
}

.margin-left-sm {
	margin-left: 25px !important;
}

.margin-top-sm {
	margin-top: 25px !important;
}

.margin-bottom-sm {
	margin-bottom: 25px !important;
}

.margin-right-sm {
	margin-right: 25px !important;
}

.margin-top-md {
	margin-top: 40px !important;
}

.margin-bottom-md {
	margin-bottom: 40px !important;
}
.margin-top-lg {
	margin-top: 70px !important;
}
.margin-bottom-lg {
	margin-bottom: 70px !important;
}
.margin-bottom-0 {
	margin-bottom: 0px;
}



.sky-form fieldset .well {
	background: #fff;
}

.chosen-container {
	width: 100% !important;
}

.chosen-container-single .chosen-single {
	height: 30px !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	background: #fff !important;
	padding-top: 6px !important;
	border-color: #e5e5e5 !important;
	box-shadow: none !important;
}


.chosen-container-multi .chosen-choices {
	border: 1px solid #e5e5e5 !important;
	background-image:  none !important;
	padding: 5px 10px !important;
	border-radius: 4px !important;
}


.box {
	padding: 20px;
	background: #fafafa;
	border: 1px solid #ddd;
	margin-bottom: 20px;
}


	.content-container {
	max-width: 1400px !important;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	background: none;
}


.title_box {
 width: 100%;
 background: #E7F5F8;
 min-height: 30px;
 box-sizing: border-box;
 color: #259BC1;
 padding: 10px;
 font-size: 2em;
 border-top: 3px solid #C4C9CC;
 margin-bottom: 30px;
}

.alert { position: relative; }



.alert-default {
	background: #f2f2f2;
	border-color: #ccc;
	color: #333;
}

.alert-warning {
	background-color: #fcf0cf;
	border-color: #E5A400;
	color: #333d47;
}

.alert-warning i {
	color: #E5A400;
}

.alert-success {
	background-color: #dbf3e7;
	border-color: #17A06B;
	color: #333d47;
}

.alert-success i {
	color: #17A06B;
}

.alert-info {
	background-color: #ebf4ff;
	border-color: #007AFF;
	color: #333d47;
}

.alert-info i {
	color: #007AFF;
}

.alert-danger {
	background-color: #fbe0e1;
	border-color: #E5484D;
	color: #333d47;
}

.alert-danger i {
	color: #E5484D;
}



.alert-default {
	background: #f2f2f2;
	border-color: #ccc;
	color: #333;
}

.alert-warning {
	background-color: #fcf0cf;
	border-color: #E5A400;
	color: #333d47;
}

.alert-warning i {
	color: #E5A400;
}

.alert-success {
	background-color: #dbf3e7;
	border-color: #17A06B;
	color: #333d47;
}

.alert-success i {
	color: #17A06B;
}

.alert-info {
	background-color: #ebf4ff;
	border-color: #007AFF;
	color: #333d47;
}

.alert-info i {
	color: #007AFF;
}

.alert-danger {
	background-color: #fbe0e1;
	border-color: #E5484D;
	color: #333d47;
}

.alert-danger i {
	color: #E5484D;
}

i.alert-close {
	position: absolute;
	top: 5px;
	right: 5px;
	cursor: pointer;
}

.label {
	border-radius: 10px;
}

.label-success {
	background-color: #dbf3e7;
	color: #12855a;
	border: 1px solid #12855a;
}

.label-warning {
	background-color: #fcf0cf;
	color: #F57F17;
	border: 1px solid #FBC02D;
}

.label-danger {
	background-color: #E5484D;
	color: #fff;
	border: 1px solid #E5484D;
}

.label-info {
	background-color: #ebf4ff;
	color: #0059a1;
	border: 1px solid #e1e7ed;
}

.label-default {
	background-color: #eef2f6;
	color: #333d47;
	border: 1px solid #0059a1;
}

.label > i {
  margin-left: 0px;
}

.white {
	color: #fff !important;
}

/*Auto Complete */

.autocomplete-container {
	z-index: 999 !important;
	position: absolute;
	width: 95%;
}

.autocomplete-container .item {
	background: #fafafa;
	border: 1px solid #ccc;
	border-top: 0px;
	padding: 10px;
}


/* Sections */

.image_right640_300 {
	width: 640px;
	height: 300px;
	float: left;
}


.footer {
	width:100%;
	min-height: 200px;
	overflow: hidden;
	background: #fff;
}

.footer_social {
	height: 50px;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
}

.contact_footer_icon {
	left: 50%;
	top: 50%;
	margin-left: -12px;
	margin-top: -12px;
}



/*
Back to top button
*/

#back-top {
	position: fixed;
	bottom: 0px;
	right: 100px;
	border-radius: 60px 60px 0px 0px;
	width: 120px;
	height: 60px;
	background: #55B5E0;
	z-index: 999;
	text-align: center;
	color: #ccc;
	font-weight: bold;
	padding-top: 30px;
	box-sizing: none !important;
	color: #fff;
}
#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: #fff;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top:hover {
	background: #218AB8;
}
#back-top a:hover {
	color: #fff;
}

.thumbs_container {
	margin-top: 20px;
	min-height: 100px;
	overflow: hidden;
}

.edit_picture_thumb {
	height: 150px;
	width: 150px;
	transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
}


.thumb_container {

padding-bottom: 10px;
}


.edit_picture_thumb {
	float: left;
}

.edit_picture_thumb:hover {
	border: #27c3ed 1px solid;
}

.edit_picture_delete {
	right: 30px;
	top: 10px;
	background: rgba(0,0,0,0.7);
    text-align: center;
    color: #eee;
    border-radius: 10px;
    padding-top: 2px;
}


.edit_picture_delete:hover {
	cursor: pointer;
	background: rgba(255,0,0,0.7);
}

/*Login Page */

input[type=password] {
	width: 150px;
	margin-bottom: 10px;
}

/* Index Page */

.index_video_container {
width: 100%;
height: 100vh;
margin-top: -70px;
position: relative;
overflow: hidden;
background: center;
background-size: cover;
background-position: center center;
}

#index_video_container:after {


}

#indexsearchblock_container {
	width: 100%;
	padding-top: 40px;
	padding-bottom: 40px;
	position: absolute;
	top: 30%;
	z-index: 9;
  }

#indexsearchblock {
	width: 100%;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.srch_itm_title {
	color: #fff;
	text-align: center;
	margin-bottom: 10px;
}

input[type=date] {
	box-sizing: content-box;
    -moz-appearance: none;
    background: none repeat scroll 0 0 #fff;
    border-radius: 0;
    border-style: solid;
    border-width: 2px;
    box-sizing: border-box;
    color: #404040;
    display: block;
    font: 15px/19px "Open Sans",Helvetica,Arial,sans-serif;
    height: 39px;
    outline: medium none;
    padding: 8px 10px;
    width: 100%;
border-color: #e5e5e5;
    transition: border-color 0.3s ease 0s;
}

input[type=date]:focus {
	border: 2px solid #55B5E0;
}



/* Results page */

.resultscontainer {
	width: 720px;
	float: left;
	margin-top: 10px;
	padding: 10px 0px;
}

.resultscontainer a{
	color: #000;
	text-decoration: none;
}

.resultspagination {
	width: 100%;
	min-height: 15px;
	overflow: hidden;
	text-align: center;
	margin-top: 20px;
}

.resultspagination span {
	padding: 0px 10px;
}

.resultspagination a {
	text-decoration: underline;
	color: #55B5E0;
}

.sort_activities {
	width: 90%;
	float: left;
	height: 60px;
	background: #1E9ABE;
	color: #fff;
	padding-top: 20px;
	padding-bottom: 5px;
	padding-left: 5px;
	box-sizing: border-box;
	font-size: 15px;
	text-align: center;
}

.image_results {
	height: 200px;
	width: 270px;
	background: #000;
	float: left;
	overflow: hidden;
}
.image_results img{
	max-height: 200px;
	height: 100%;
	border: none;
	width: 100%;
}

/* Details Page */

.details_title {
	width: 940px;
	min-height: 40px;
	padding: 0px 10px;
	font-size: 32px;
	overflow: hidden;
	text-transform: capitalize;
}

#last_centertrpl {
	border-right: 0px;
	width: 280px;
}

/*Contact Page */

#contact_container {
	background-image: url(../images/hauptfoto1.jpg);
	background-position: top center;
	background-size: cover;
	padding-top: 50px;
	padding-bottom: 50px;
	min-height: 90vh;
}


.contact_form {
	color: #fff;
	border: 1px solid #111111;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	background: rgba(0,0,0,0.5) !important;
	min-height: 500px;
}

.contact_form header {
	background: transparent;
	color: #fff;
	border-radius: 15px 15px 0px 0px;
	-moz-border-radius: 15px 15px 0px 0px;
	-webkit-border-radius: 15px 15px 0px 0px;
}

.contact_form fieldset {
	background: transparent !important;
}

.contact_form footer {
	background: transparent !important;
	border-radius: 0px 0px 15px 15px;
	-moz-border-radius: 0px 0px 15px 15px;
	-webkit-border-radius: 0px 0px 15px 15px;
}

.contact_form .checkbox {
	color: #fff;
}

/*Modals */

#advancedsearch_results .collapse { display: block;}

@media (max-width: 960px) {
	header {
		background:#000;
		min-height: 60px;
		height:auto;
		width: 100%;
		overflow: visible;
		padding-top:5px;
		padding-bottom:5px;
	}

	.content {
	padding-bottom: 50px; /* Height of the footer element */
	min-height: 400px;
	height:auto;
	overflow: hidden;
}

	.box {
		padding: 20px;
		background: #fafafa;
		border: 1px solid #ddd;
		margin-bottom: 20px;
	}

	.title_box {
	 width: 100%;
	 background: #E7F5F8;
	 min-height: 30px;
	 box-sizing: border-box;
	 color: #259BC1;
	 padding: 10px;
	 font-size: 2em;
	 border-top: 3px solid #C4C9CC;
	 margin-bottom: 30px;
	}

	/* Sections */

	.image_right640_300 {
		width: 100%;
		height: auto;
		float: none;
		display:block;
	}


	.footer {
		width:100%;
		min-height: 300px;
		overflow: hidden;
		background: #333333; /* Old browsers */
		background: -moz-linear-gradient(top, #333333 0%, #332929 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#332929)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #333333 0%,#332929 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #333333 0%,#332929 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #333333 0%,#332929 100%); /* IE10+ */
		background: linear-gradient(to bottom, #333333 0%,#332929 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#332929',GradientType=0 ); /* IE6-9 */
	}

	.footer_social {
		height: 50px;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.contact_footer_icon {
		left: 50%;
		top: 50%;
		margin-left: -12px;
		margin-top: -12px;
	}



	/* Banners */

	#site-banner a {
		color: inherit !important;
	}

	/*
	Back to top button
	*/

	#back-top {
		position: fixed;
		bottom: 0px;
		right: 10px;
		border-radius: 60px 60px 0px 0px;
		width: 100px;
		height: 30px;
		background: #55B5E0;
		z-index: 999;
		text-align: center;
		color: #ccc;
		font-weight: bold;
		padding-top: 30px;
		box-sizing: none !important;
	}
	#back-top a {
		width: 100px;
		display: block;
		text-align: center;
		text-decoration: none;
		color: #eeeeee;
		/* background color transition */
		-webkit-transition: 1s;
		-moz-transition: 1s;
		transition: 1s;
	}
	#back-top:hover {
		background: #218AB8;
	}
	#back-top a:hover {
		color: #fff;
	}
	/*Login Page */

	input[type=password] {
		width: 150px;
		margin-bottom: 10px;
	}

	/* Index Page */

	#index_video_container {
		display: hidden;
	}

	#indexsearchblock_container {
		width: 100%;
		padding-top: 0px;
		padding-bottom: 40px;
		position: absolute;
	  }

	#indexsearchblock {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.srch_itm_title {
		color: #fff;
		text-align: center;
	}

	input[type=date] {
		box-sizing: content-box;
		background: none repeat scroll 0 0 #fff;
		border-radius: 0;
		border-style: solid;
		border-width: 2px;
		box-sizing: border-box;
		color: #404040;
		display: block;
		font: 15px/19px "Open Sans",Helvetica,Arial,sans-serif;
		height: 39px;
		outline: medium none;
		padding: 8px 10px;
		width: 100%;
	border-color: #e5e5e5;
		transition: border-color 0.3s ease 0s;
	}

	input[type=date]:focus {
		border: 2px solid #55B5E0;
	}

	/* Results page */

	.resultscontainer {
		width: 100%;
		float: left;
		margin-top: 10px;
		padding: 10px 0px;
	}

	.resultscontainer a{
		color: #000;
		text-decoration: none;
	}

	.resultspagination {
		width: 100%;
		min-height: 15px;
		overflow: hidden;
		text-align: center;
		margin-top: 20px;
	}

	.resultspagination span {
		padding: 0px 10px;
	}

	.resultspagination a {
		text-decoration: underline;
		color: #55B5E0;
	}

	.sort_activites {
		width: 300px;
		float: left;
		height: 30px;
		background: #1E9ABE;
		color: #fff;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 5px;
		box-sizing: border-box;
		font-size: 15px;
	}

	#advancedsearch_results .collapse { display: none;}
	#advancedsearch_results .collapse.in { display: block;}

	#advancedsearchform .col {
		padding-left:15px;
		padding-right:15px;
	}

	.image_results {
		height: auto;
		min-height:60px;
		width: 100%;
		background: #000;
		float: left;
		overflow: hidden;
	}
	.image_results img{
		max-height: 350px;
		height: auto;
		border: none;
		width: 100%;
	}

	/* Details Page */

	.details_title {
		width: 940px;
		min-height: 40px;
		padding: 0px 10px;
		font-size: 32px;
		overflow: hidden;
		text-transform: capitalize;
	}

	#last_centertrpl {
		border-right: 0px;
		width: 280px;
	}

	/*Modals */

	.mobilehidden {
		display:none;
	}

}
.sky-form header { padding-top: 5px; padding-bottom: 5px;}



@media screen and (max-width: 960px) {
.indexsearchform  {    background: transparent;}
.indexsearchform .srch_itm_title { text-shadow: 2px 2px 7px rgba(19,19,19,0.83);}
.sky-form .col-3 { width:33%;}
.sky-form label, .sky-form a, .sky-form .note { width:100% !important;}
.sky-form label { left: 0;}
.sky-form .note { text-align: center;}
.sky-form  .search_home { width:33%; margin:auto; float: none;}
select#orderby, select#order, select#perpage { width:100% !important; margin:10px 0; height: 40px;}
.results_sort_container .col-md-4 { font-size: 16px;}
.sort_activities { width:100%; line-height: 50px;}
}


@media screen and (max-width: 768px) {
	.sky-form .col-3 { width:100%;}

	.navbar-nav > li { padding-left: 10px; padding-right: 10px;}


	.sky-form .note { padding-bottom: 20px; font-size: 14px;}
	.activity_form .col { margin-bottom:10px; }
	.srch_itm_title { font-size: 18px; margin-bottom: 4px;}
	.when_home, .where_home { margin-bottom: 10px !important;}

	.discover_home .select {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.when_home .input {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.where_home .input {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.content { padding-top: 50px;}

	#back-top {
		height: 55px;
		color: #fff;
	}

	#indexsearchblock_container {
		top: 20%;
	}

}



@media (max-width: 600px) {
	.header {
		height: 60px;
		background: #eee;
	}

	.sky-form section {
		margin-bottom: 0px;
	}


	.index_video_container {
	  min-height:85vh !important;
	  overflow: hidden;
	  background-image: url(../images/search_bg2.jpg);
	  padding-bottom: 20px;
  	}

	h2 {
		margin-top: 0px;
		margin-bottom: 0px;
	}

	 .srch_itm_title {
		margin-bottom: 2px;
	}

}



@media (max-device-width: 600px) {
	.header {
		height: 60px;
		background: #fff;
	}

	.header_search {
		width: 50%;
		float: left;
	}

		.sky-form section {
		margin-bottom: 0px;
	}


	#indexsearchblock_container {
	padding-top: 20px;
	padding-bottom: 20px;
	top: 5%;
	background: transparent;
  	}

	.srch_itm_title {
		margin-bottom: 2px;
	}

  .index_video_container {
	  min-height:85vh !important;
	  overflow: hidden;
	  padding-bottom: 20px;
  }

	.content { padding-top: 50px;}
}

/*
	Phones: 16px is the floor for anything a visitor types into.

	iOS Safari zooms the whole page in the moment a field smaller than 16px takes focus, and leaves
	it there once the keyboard goes away - the page is then wider than the screen and has to be
	pinched back. Bootstrap's .form-control is 14px and sky-form's fields are 15px, so every form on
	the front end did it.

	?This used to be hidden behind maximum-scale=1.0 in the viewport meta, which is gone - see the
	?note in php/includes/page-head.php. Blocking the zoom gesture is not a fix for a field that is
	?too small; making the field big enough is, and it costs nothing on a screen this size.

	?Prefixed with body only to out-specify the rules being corrected - sky-forms.css sets its 15px
	?in a font shorthand and is loaded after this file on the pages that use it.
*/

@media (max-width: 767px) {

	body .form-control,
	body .sky-form .input input,
	body .sky-form .select select,
	body .sky-form .textarea textarea,
	body input[type="text"],
	body input[type="email"],
	body input[type="tel"],
	body input[type="number"],
	body input[type="password"],
	body input[type="search"],
	body input[type="url"],
	body input[type="date"],
	body input[type="datetime-local"],
	body input[type="time"],
	body select,
	body textarea {
		font-size: 16px;
	}
}

/* Shrinks form text in narrow desktop columns (e.g. a filter sidebar) so long French labels fit.
   min-width:768px keeps phones on the fixed 16px rule above, which stops iOS zoom-on-focus. */

@media (min-width: 768px) {

	.form-control,
	input,
	select,
	textarea {
		font-size: clamp(12px, calc(10px + 0.6vw), 13px) !important;
	}
}

/* ==========================================================================
   FAQ block - php/includes/faq-block.php
   Answers are in the markup open, not revealed on click: this block exists to
   be quoted, and content behind a collapsed panel may not count as part of the
   page. The toggle collapses it for a reader who wants the list short.
   ========================================================================== */

.faq-block {
	margin: 40px 0;
}

.faq-block-heading {
	margin-bottom: 20px;
}

.faq-list {
	border-top: 1px solid #e0e0e0;
}

.faq-item {
	border-bottom: 1px solid #e0e0e0;
}

.faq-question {
	margin: 0;
	font-size: 17px;
}

.faq-question-toggle {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 16px 0;
	background: none;
	border: 0;
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.faq-question-toggle:hover .faq-question-text {
	text-decoration: underline;
}

.faq-question-icon {
	flex: 0 0 auto;
	font-size: 13px;
	opacity: .6;
}

.faq-answer {
	padding: 0 0 18px;
}

.faq-answer > *:last-child {
	margin-bottom: 0;
}

.faq-item.faq-collapsed .faq-answer {
	display: none;
}