/*Small Biz Shopping*/
@keyframes hello {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(0);
	}
}

.smallbiz-module {
	position: absolute!important; 
	opacity:0;
	user-select:none;
	pointer-events:none;
	position: absolute;
	width: calc(100% + 2em);
	height: calc(100% + 2em);
	top: -1em;
	left: -1em;
	max-width: unset !important;
	display: flex;
	justify-content: center;
	align-items: center;
	transition:all 300ms ease;
	& .et_pb_code_inner {
		width: 100%;
		height: 100%;
	}
	@media only screen and (min-width:1261px) {
		padding:0 20px;
	}
}
.smallbiz-module.on { 
	opacity:1;
user-select:auto;
	pointer-events:auto;
}
.et_pb_menu.off, .mobile_menu_bar.off {
	pointer-events:none;
	user-select: none;
	visibility: hidden;
}
.smallbiz-module::after {
	content: '';
	width: 150%;
	height: 100%;
	position: absolute;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	top: 50%;
	left: 50%;
	translate: -50% -50%;
}

.smallbiz-module::before {
	content: '';
	width: 50px;
	height: 50px;
	position: absolute;
	background: url('/wp-content/uploads/2025/11/Vector.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	bottom: -29px;
	left: 15%;
	z-index: 9;
  animation: hello 1.2s ease infinite;
  @media only screen and (max-width:980px) {
    scale: .6;
    transform-origin: bottom center;
	bottom: -23px;
    left: 50%;
    translate: -50% 0;
	}
}



.smallbiz {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position:relative;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999;
	  @media only screen and (max-width:980px) {
		justify-content: center;
	  }
	& p:first-child {
		position: absolute;
		top: 15px;
		right: 15px;
		font-size: 30px;
		@media only screen and (max-width:980px) {
		top: 5px;
		right: 5px;
	  }
	}
	& p:first-child:hover {
		color: #bbb;
		cursor:pointer;
	}
	& p {
		color: white;
		transition:all ease 350ms;
	}
	& p:last-child {
	  @media only screen and (max-width:980px) {
		max-width: 270px;
    	font-size: 70%;
   		text-align: center;
   		line-height: 1.3;
	  }
	}
	& span {
		font-weight: 900;
	}
}
/*Small Biz Shopping*/


/*New homepage layout*/
.section1-overlay::before {
    content: '';
    width: 50%;
    height: 100%;
    background-image: url('/wp-content/uploads/2025/10/lbt-transit.jpg');
    background-position: left bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #438db9;
    position: absolute;
    z-index: 99;
    top: 0;
    right: 0;
    display: block !important;
	min-width: 750px;
    z-index: 0;
    @media only screen and (min-width:1250px) {
	width: 55%;
	max-width: 850px;
	}
	@media only screen and (max-width:1200px) {
   translate:25% 0;
	}
	@media only screen and (max-width:980px) {
   width: 100%;
   translate:0 0;
   min-width: unset;
	}
}
.section1-overlay::after {
	  content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 55%);
    position: absolute;
    top:0;
    left:0;
		z-index: 1;
}
/*First Time riding Feature*/


.feature-panel-wrapper {
	width: 100%;
    height: 100%;
    position: relative;
    overflow: visible;

}

.container-first-time {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100vh;
	width: 100vw;
	overflow: visible;
	z-index: 99999999999;
	padding: 150px 0 100px;
	pointer-events: none;
	transition:all 350ms ease;
	backdrop-filter: blur(0) opacity(0);
	will-change:background;

	@media only screen and (max-width:768px) {
		padding: 60px 0 0;
	}
}
.container-first-time:has( .feature-panel.active ) {
	background:rgba(0,0,0,.5);
	backdrop-filter: blur(8px) opacity(1);
	pointer-events: auto!important;
	
}
.container-first-time .feature-panel,
.container-first-time .first-time-tab {
	pointer-events: auto;
}

/* First Time Riding Tab */


.first-time-tab {
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%)!important;
	background: #ffa726;
	color: #333;
	padding: 30px 20px 30px 40px;
	border-radius: 15px 0 0 15px;
	cursor: pointer;
	transition: all 300ms ease!important;
	z-index: 1000;
	overflow: visible;
	box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);

	@media only screen and (max-width:500px) {
		    scale: .75;
    		transform-origin: right center;
	}
	@media only screen and (min-width:980px) {
		top: 60px;
		transform: translateY(0)!important;
	}
}
.first-time-tab::after {
	content:'';
	width:100%;
	height:100%;
	background: #ffa726;
	position: absolute;
	top:0;
	translate:0 0;
	right:0;
	z-index: -1;
	border-radius: 15px 0 0 15px;
	transition:all 300ms ease!important;
}
.first-time-tab:hover {
	transform: translateY(-50%) translateX(-5px)!important;

	@media only screen and (min-width:980px) {
		transform: translateY(0) translateX(-5px)!important;
	}
}
.first-time-tab:hover::after {
	translate:5px 0;
	
}

.first-time-tab h3 {
	font-size: 18px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.2;
	margin: 0;
    padding: 0;
	color: black;
	pointer-events:none!important;
}
.first-time-tab h3::before {
	content:'';
	background:url('data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2229%22%20viewBox%3D%220%200%2017%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.648%2027.6435C16.0464%2027.245%2016.2702%2026.7046%2016.2702%2026.1411C16.2702%2025.5776%2016.0464%2025.0372%2015.648%2024.6387L5.1293%2014.12L15.648%203.6012C16.0351%203.20042%2016.2493%202.66364%2016.2445%202.10648C16.2396%201.54931%2016.0162%201.01633%2015.6222%200.622337C15.2282%200.228345%2014.6952%200.0048631%2014.138%202.22702e-05C13.5809%20-0.00481856%2013.0441%200.209369%2012.6433%200.596454L0.622171%2012.6176C0.223795%2013.0161%200%2013.5565%200%2014.12C0%2014.6834%200.223795%2015.2238%200.622171%2015.6223L12.6433%2027.6435C13.0418%2028.0418%2013.5822%2028.2656%2014.1457%2028.2656C14.7091%2028.2656%2015.2495%2028.0418%2015.648%2027.6435Z%22%20fill%3D%22%23CA6201%22%2F%3E%3C%2Fsvg%3E');
	position: absolute;
    top: 50%;
    left: 0;
    translate: 10px -50%;
    width: 25px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.dont-show{
	position: absolute;
    top: 0;
    translate: 0 -50%;
    background: #000000a6;
    padding: 6px 10px 6px 10px;
    right: 0;
    color: white;
    line-height: 1;
    border-radius: 50%;
	display:none;
	
}

/* Main Feature Panel */
.feature-panel {
	position: relative;
	right: -100%;
	top: -80px;
	overflow:visible;
	width: auto;
	min-width: 0;
	height: 100%;
	min-height: 670px;
	background: linear-gradient(90deg, #4A99C7 40%, #1e5f99 120%);
	transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	display: flex;
	flex-direction: column;
	padding: 40px;
	color: white;
}

.feature-panel.active {
	right: 0;
}

/* Platform Tabs */
.platform-tabs {
	    display: flex;
    position: absolute;
    top: 0;
    translate: 0 -100%;
    left: 0;
    right: 0;
    z-index: 10;
}

.platform-tab {
	background: #1b6098;
	border: none;
	color: rgba(255, 255, 255, 0.8);
	padding: 15px 30px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	border-bottom: 3px solid transparent;
	position: relative;
}

.platform-tab {
	border-radius: 15px 15px 0 0;
}
.platform-tab:last-child {
    margin-left:5px;
}
.platform-tab.active {
	background: #4A99C7;
	color: white;

}

.platform-tab:hover:not(.active) {
	background: #1b6098;
	color: rgba(255, 255, 255, 0.9);
}

.platform-tab i {
	margin-right: 8px;
	font-size: 18px;
}

/* Main Title */
.main-title {
	font-size: clamp(26px, 3vw, 48px);
	font-weight: 900;
	color:white;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 20px 0;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	text-align: center;
	@media only screen and (max-width:768px){
		max-width: 350px;
        padding-right: 30px;
		text-align: left;
	}
}

/* Cards Container */
.cards-container {
	display: flex;
	gap: 40px;
	flex-shrink: 0;
	min-width: 300px;
	height: auto;
	justify-content: center;
	overflow-x: auto;
	padding-top: 50px;
  overflow-y: hidden; /* if you only want horizontal scroll */
  width: 100%; /* or specific width */
  white-space: nowrap; /* prevents wrapping for inline content */
  position: relative;
  pointer-events: auto;
  scroll-behavior: smooth!important;
  -webkit-overflow-scrolling: touch!important;
  z-index: 999999999;
    /* Add these for better touch scrolling */
  touch-action: pan-x; /* Allow horizontal panning only */
  overscroll-behavior-x: contain; /* Prevent parent scroll interference */
   @media only screen and (max-width:1000px) {
	justify-content: flex-start;
  }
  @media only screen and (max-width:991px) {
	width: calc(100% + 40px);
	padding-right: 40px;
	padding-bottom: 25px;
  }
}
.cards-container::-webkit-scrollbar:horizontal {
height: 11px !important;
  width: 11px !important; 
  cursor: grabbing;
  display: block !important;
}
.cards-container::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: none;
  cursor: grabbing;
  /* should match background, can't be transparent */
  background-color: rgba(0, 0, 0, .5);
}
.cards-container::-webkit-scrollbar {
  -webkit-appearance: none;
  display: block !important;
}
/* Individual Cards */
.card {
	background: white;
	border-radius: 20px;
	padding: 30px 25px;
	width: 300px;
	min-height: 400px;
	display: flex;
	flex-shrink:0;
	white-space: normal;
	flex-direction: column;
	align-items: center;
	transition: transform 0.3s ease;
	position: relative;
	overflow: visible;
	@media only screen and (max-width:768px){
		    min-height: 360px;
    		height: 360px;
	}
}

.card:hover {
	transform: translateY(-10px);
		@media only screen and (max-width:768px){
		  transform: unset;
	}
}
.cards-content {
	 touch-action: manipulation; /* or pan-y if parent should scroll vertically */
  overflow: visible;
      display: block;
	  z-index: 999;
	  position: relative;
	  width:100%;
	  height:100%;
}



.card-description {
	color: #000!important;
	text-align: center;
	font-size: 16px;
	margin: 30px 0 8px;
	line-height: 1.4;
	font-weight: 500;
}

.video-placeholder {
	position: relative;
	width: 100%;
    height: 312px;
    overflow: hidden;
    box-shadow: 0 0 0 1px #00000020;
	& video {
		height: 100%;
        object-fit: cover;
        object-position: center 0;
	}
}
#androidCards {
	.video-placeholder video {
		height: 100%;
        object-fit: cover;
        object-position: center 10%;
	}
}

/* Close Button */
.close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: white;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 48px;
    font-weight: 100;
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index:999;
}

.close-btn:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: rotate(90deg);
}

/* Responsive Design */
@media (max-width: 1024px) {
	.cards-container {
		gap: 30px;
	}

}

@media (max-width: 768px) {
	.feature-panel {
		padding: 20px;
		top:0;
	}
	.cards-container {
		gap: 20px;
	}
	.platform-tabs {
		margin-bottom: 20px;
	}
}

/* Performance optimizations */
.card,
.first-time-tab,
.feature-panel {
	will-change: transform;
}
.card img {
    width: 60%;
    height: auto;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% -50%;
}
.card img.app {
	 width: 50%;
}
.card img.tap {
	 width: 48%;
}
.video-placeholder::after {
    content: '';
    width: 60px;
    height: 60px;
    background: #E94235;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    transition: all 300ms 
ease;
}
.video-placeholder::before {
    content: '';
    width: 25px;
    height: 25px;
    background: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -35% -50%;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
    z-index: 2;
    pointer-events: none;
    transition: all 300ms 
ease;
}
.video-placeholder.playing::after, .video-placeholder.playing::before {
    opacity:0;
}
@media only screen and (max-width:768px) {
	.video-placeholder::after, .video-placeholder::before {
    display:none;
}
}
/* Loading indicator for slow connections */
#featurePanel.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1000;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Image placeholders for slow connections */
.image-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.video-placeholder img {
    object-fit: cover;
    position: relative !important;
    translate: unset;
    object-position: center center;
    top: unset;
    left: unset;
}
/*Service Alerts*/
.service-alerts-container {
	display:flex;
	gap: 15px;
	justify-content:space-between;
	margin-bottom: 15px;
		@media only screen and (max-width:850px) {
				flex-wrap:wrap;
	}
	.service-alert-link {
		width:100%;
		height:100%;
		position:absolute;
		left:0;
		top:0;
		z-index:999;
	}
	.service-alert {
			position:relative;
	overflow:hidden;
		padding:20px;
		background:#EDEDED;
		width:calc(25% - 10px);
		@media only screen and (max-width:850px) {
		width:calc(50% - 10px);
	}
		@media only screen and (max-width:480px) {
		width:100%;
			
	}
		.alert-date {
			background:#4999C7;
			color:white;
			padding:10px;
			margin-left:-20px;
			white-space:nowrap;
		}
		.alert-title {
			margin-top:20px;
			line-height:1.3;
			font-size:90%;
			color:black;
		}
	}
}
.sticky-alert .alert-date::before {
	content:'';
	width:18px;
	height:18px;
	display:inline-block;
	background-image: url("/wp-content/uploads/2025/03/pin.png");
	background-size:contain;
	background-repeat:no-repeat;
	margin-right:8px;
	translate:0 2px;
}
.service-alert:hover {
	cursor:pointer;
background:#dddddd!important;

}
 
 
 
 /*Trip Planner*/
 
   .trip-planner-wrapper {
	position: relative;
    width: 400px;
	height:auto;
	display:flex;
	justify-content: center;
	min-height: 280px;
    margin: 100px 0 100px 8%;
	padding-left: 25px;
	@media only screen and (max-width:980px) {
		margin: 130px auto;
		padding-left:0;
		height:240px;
		background:transparent;
			p.how-to-ride, p.how-to-ride a {
			color: black !important;
		}
		
	}
	@media only screen and (max-width:500px) {
		margin: 100px auto;
		padding-left:0;
		width:315px;
		height:340px;
		background:transparent;
		
	}
	
}
.trip-planner {
	position: absolute;
	left:50%;
	top:50%;
	width:400px;
	translate:-50% -50%;
	align-self: center;
	@media only screen and (max-width:980px) {
	height:auto;
	background: rgba(255,255,255,.5);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-radius:3px;
	box-shadow:0 0 5px 0 rgba(0,0,0,.1), 0 0 15px 0 rgba(0,0,0,.2);
	padding:25px 40px 30px;
		}
		@media only screen and (max-width:480px) {
			width:315px;
		}	
	& input {
	  width:100%;
	  border: none!important;
	  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2) inset, 0px 0px 15px 0px rgba(0, 0, 0, 0.1) inset;
	  padding:8px!important;
	  margin:5px 0!important;
	  border-radius:0;
	  min-height:42px;
	}
	& input:active, & input:focus-visible  {
	  border: 3px solid #0066A9;
	  border-radius:0!important;
	}
	input#starting {
		padding-right:36px!important;
	}
  & label { 
	  position: absolute; 
	  z-index: -1; 
	  opacity: 0; 
	  pointer-events: none;
	  }
	& button:hover {
	  cursor:pointer;
	}
	& h1 {
		color:black;
		translate:-17px -2px;
		font-weight: 900;
		@media only screen and (max-width:980px) {
			color:black;
			translate:0 -2px;
			white-space: nowrap;
			font-size:120%;
		}
	}
  }
  .input-wrap {
	position:relative;
	height:auto;
	width:100%;
	display:flex;
	align-items: center;
	  & button {
		position:absolute;
		right:0;
		top:50%;
		translate:-30% -50%;
		border:none;
		width:5%;
		min-width:25px;
		aspect-ratio: 1 / 1;
		height:90%;      background:url('https://codepen.communecommunication.com/locate.svg');
		background-size:contain;
		background-repeat:no-repeat;
		background-position:center center;
		transition: filter 350ms ease;
		will-change:filter;
  
	}
  }
  .swap-locations {
	 position:absolute;
		right:0;
		top:50%;
		translate:100% -50%;
		filter:invert(1);
		border:none;
		width:35px;
		height:35px;      background:url('https://codepen.communecommunication.com/swap.svg');
		background-size:contain;
		background-repeat:no-repeat;
		background-position:center center;
		transition: filter 350ms ease;
		will-change:filter;
  }
  .get-location:focus, .get-location:active, .swap-locations:focus, .swap-locations:active  {
		filter: drop-shadow(0 0 .5em #000);
	}
  .location-wrap {
	position:relative;
  }
.location-wrap::after {
    content: '---';
    position: absolute;
    font-size: .85em;
    letter-spacing: .14em;
    top: 50%;
    translate: -1.56em -47%;
    rotate: 90deg;
    left: 0;
	color:white;
}
  .trip-timing {
	display:flex;
	flex-wrap:wrap;
	column-gap:6px;
	margin-bottom: 3px;
	.input-wrap{
	  width:calc(50% - 3px);
	}
  }
select.select-time {
	border:none;
	font-weight: 600;
	color:rgba(255, 255, 255, .8);
    letter-spacing: .05em;
	margin:5px 0;
	font-weight:600;
	position:relative;
	padding-right:8px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background:transparent;
  }
  
  .select-wrap::after {
	content: '';
    width: 98%;
    height: 1px;
    position: relative;
    background: rgba(255, 255, 255, .85);
    top: 50%;
    left: 0;
    translate: 0 -50%;
    z-index: -1;
	}
	.go::after {
		content: '';
		margin-left: 5px;
		width: 14px;
		height: 14px;
		translate: 0 1px;
		display: inline-block;
		background: url('https://codepen.communecommunication.com/go-icon.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}
	.go {
		background: #FEA31B;
		font-size: 100%;
		color: white;
		width: 100%;
		border: none;
		padding: 7px 0 8px;
		margin-top:3px;
		font-weight: 600;
		transition:background 300ms ease;
	}
	.go:hover {
		background:black;
	}
	.dot1 {
		width:10px;
		height:10px;
		position:absolute;
		background:white;
		left:0;
		top:0;
		border-radius:50%;
		transform:translate(-.97em, 1em);
	  }
	  .dot2 {
		width:10px;
		height:10px;
		position:absolute;
		background:white;
		left:0;
		bottom:0;
		border-radius:50%;
		transform:translate(-.97em, -1em);
	  }
	  .intro {
		box-shadow:0 0 0 3px #ffffff80, 0 0 5px 2px rgba(255, 255, 255, 0.35);
	  }

	.powered {
		display:flex;
		justify-content: flex-start;
		height:50px;
		align-items:center;
		translate: 3px 0;
		pointer-events:none;
		user-select: none;
		& img {
			width:40%;
			height:auto;
			translate: -5% -1%;
		}
		& p {
			white-space:nowrap;
			color:rgba(255, 255, 255, .8);
			font-weight:700;
			font-size:50%;
		}
	}
	.trip-planner h1 {
		color:white;
	  }
	@media only screen and (max-width: 980px) {
		.powered {
			translate: 8px 0;
			justify-content: center;
			& img {
				width:115px;
				height:auto;
				translate: -5% -1%;
				
			}
			& p {
				white-space:nowrap;
				color:black;
				font-weight:700;
				font-size:50%;
			}
		}
		.intro {
			box-shadow:0 0 0 3px #00000050, 0 0 5px 2px rgba(0, 0, 0, 0.25);
		  }
		  .trip-planner h1 {
			color:black;
		  }
		  .dot1, .dot2, .select-wrap::after {
			background:rgb(0, 0, 0);
		  }
		  .location-wrap::after, select.select-time {
			color:black;
		  }
		  .swap-locations { 
			filter:invert(0);
		  }
	}
/*Water Taxi Page*/
.et_pb_section_video_bg  {
display:flex!important;
justify-content: center;
align-items: center;
}
.dl-content {
	color:#e02b20;
	border:1px solid #e02b20;
	display:inline-block;
	padding:1px 15px!important;
}
.dl-content::before {
	content:url('/wp-content/uploads/2024/05/dl.png');
	margin-right:5px;
}
.dl-content:hover{
	background:#e02b20;
	-webkit-text-fill-color:white;
	cursor:pointer;
	& a {
		-webkit-text-fill-color:white;
	}
}
.dl-content:hover::before{
	content:url('/wp-content/uploads/2024/05/dl-w.png');
}

.show980 {
display:none;
}
.aqua-section .et_pb_text_inner h2 {
	font-weight: 800;
    font-size: 2rem;
    color: #000000 !important;
    line-height: 1.3em;
}
@media only screen and (max-width:980px) {
	.hide980 {
		display:none;
		}
	.hide980-br {
		display:block;
		visibility:hidden;
		margin-bottom:-2em;
		}
		.show980 {
			display:block;
			}
	.aqua-section .et_pb_row {
		.et_pb_text_inner {
			text-align:center;
			& li {
				list-style-position: inside;
			}
			& p {
				text-align:center!important;
				padding: 0;
			}
			& h2 {
				display:block!important;
				padding: 0;
			}

		}
		.et_pb_text {
			& p {
				text-align:center!important;
				padding: 0;
			}
		}
	
	}
	
}
@media only screen and (min-width: 769px) {
   .aquatabs .et_pb_tabs_controls {
		display:flex;
		justify-content: center;
	& li {
        width: auto;
		
    	}
	}
}
@media only screen and (max-width: 1100px) {
	
	 .aquatabs .et_pb_tabs_controls {
		 flex-wrap:wrap;
	 }
 }
.aquatabs {
	.et_pb_tabs_controls {
		background:#4999C7;
	}
} 
.aquatabs.et_pb_tabs {
	background:#4999C7;
	border:none;
}
.aquatabs2 {
	.et_pb_tabs_controls {
		background:transparent;
	}
}
.aquatabs2.aquatabs.et_pb_tabs {
	background:transparent;
	border:none;
}
.et_pb_tabs_controls li {
	border-right:none!important;
	text-align:center;
}
.et_pb_tabs_controls li a {
	color:#000;
}
.aquatabs .et_pb_tab_active {
border-bottom:5px solid #e02b20!important;
background:#4999C7!important;
	& a {
		-webkit-text-fill-color:white;
		background:#4999C7;
		border:none;
	}
	& a::before {
		filter: grayscale(0)!important;
	}
}
.aquatabs2 .et_pb_tab_active {
	border-bottom:5px solid #e02b20!important;
	background:transparent!important;
		& a {
			-webkit-text-fill-color:white;
			background:transparent!important;
			border:none;
		}
		& a::before {
			filter: invert(1)!important;
		
		}
	}
.aquatabs2 {
	.et_pb_tabs_controls {
		margin: 0 0 2em;
	}
}
.et_pb_tabs_controls .et_pb_tab_0 {
	border-bottom:5px solid #ffffff00;
	display:flex;
	justify-content: center;
	& a {
		padding-bottom: 20px!important;
		color:black;
		font-weight:900;
		font-size: 140%;
		white-space: nowrap;
	}
	a::before {
		content:url('/wp-content/uploads/2024/05/AquaLink-Icon.png');
		translate: -5px 15px;
        display: inline-block;
		filter: grayscale(1);
	}
}
	

.et_pb_tabs_controls .et_pb_tab_1 {
	border-bottom:5px solid #ffffff00;
	display:flex;
	justify-content: center;
	& a {
		padding-bottom: 20px!important;
		color:black;
		font-weight:900;
		font-size: 140%;
		white-space: nowrap;
	}
	& a::before { 
		content:url('/wp-content/uploads/2024/05/AquaBus-Icon.png');
		translate: -5px 15px;
        display: inline-block;
		filter: grayscale(1);
	}
}
.et_pb_tabs_controls .et_pb_tab_2 {
	border-bottom:5px solid #ffffff00;
	display:flex;
	justify-content: center;
	& a {
		padding-bottom: 20px!important;
		color:black;
		font-weight:900;
		white-space: nowrap;
		font-size: 140%;
	}
	& a::before { 
		content:url('/wp-content/uploads/2024/05/boarding.png');
		translate: -8px 0;
        display: inline-block;
		filter: grayscale(1);
	}
}
.et_pb_tabs_controls .et_pb_tab_3 {
	border-bottom:5px solid #ffffff00;
	display:flex;
	justify-content: center;
	& a {
		padding-bottom: 20px!important;
		color:black;
		font-weight:900;
		font-size: 140%;
		white-space: nowrap;
	}
	& a::before { 
		content:url('/wp-content/uploads/2024/05/accessibility.png');
		translate: -8px 1px;
        display: inline-block;
		filter: grayscale(1);
	}
}
.et_pb_tabs_controls .et_pb_tab_4 {
	border-bottom:5px solid #ffffff00;
	display:flex;
	justify-content: center;
	& a {
		padding-bottom: 20px!important;
		color:black;
		font-weight:900;
		font-size: 140%;
		white-space: nowrap;
	}
	& a::before { 
		content:url('/wp-content/uploads/2024/05/pay.png');
		translate: -8px 0;
        display: inline-block;
		filter: grayscale(1);
	}
}
.et_pb_tab {
	padding:0!important;
}
.aquatabs2 {
	& li {
		margin: 15px 0;
	}
	& strong {
		font-weight:900;
	}
}
.et_pb_tabs.aquatabs2 {
padding:0 25px;
}

ul.et_pb_tabs_controls:after {
	border:none!important;
}
@media only screen and (max-width:600px) {
	.et_pb_tabs_controls .et_pb_tab_2 a {white-space:normal!important;}
}
.aquatabs .et_pb_all_tabs::after {
	content:'';
	width:400px;
	height:100%;
	background-image:url('/wp-content/uploads/2024/05/palm-trees-gold-2-1.svg');
	background-size:contain;
	background-repeat: no-repeat;
	position:absolute;
	left:0;
	top:0;
	pointer-events: none;
	z-index: 9;
	opacity:.5;

} 
.aquatabs .et_pb_all_tabs::before {
	content:'';
	width:400px;
	height:100%;
	background-image:url('/wp-content/uploads/2024/05/palm-trees-gold-2-2.svg');
	background-size:contain;
	background-repeat: no-repeat;
	background-position: bottom right;
	position:absolute;
	right:0;
	top:0;
	pointer-events: none;
	z-index: 9;
	opacity:.5;

}
.aquatabs2 .et_pb_all_tabs {
	background:transparent!important;
}
.aquatabs .et_pb_all_tabs {
	background:white;
}

@media only screen and (max-width:1280px) {
.aquatabs .et_pb_all_tabs::after {
	opacity:.13;
}
.aquatabs .et_pb_all_tabs::before {
	opacity:.13;
	}
}
.aquatabs2 .et_pb_all_tabs::before, .aquatabs2 .et_pb_all_tabs::after {
display:none;
}

/* Route Pages*/


#screen-layout div.overflow-x-auto {
	&::-webkit-scrollbar {
	
		-webkit-appearance: none!important;
		-moz-appearance:none!important;
		appearance: none!important;
	}
	&::-webkit-scrollbar-track {
		box-shadow: inset 0 0 0 25px rgba(0, 0, 0, 0.1)!important;
		border-radius: 0!important;
	}
	&::-webkit-scrollbar-thumb {
		background: #c2c2c2!important;
		border-radius: 0!important;
	}
	&::-webkit-scrollbar-thumb:hover {
		background: #6d6d6d!important;
		cursor: grab!important;
	}
	
}

#screen-layout div.overflow-x-auto,
#screen-layout table {
	transform: rotateX(180deg) translate3d(0, 0, 0);
}

tbody td p.font-bold, .stop-id-text {
    white-space: nowrap !important;
}

thead tr:nth-child(2) td p.font-bold {
    white-space: nowrap !important;
}
   #all-stops {order:-1;}
   .servicealerts-accord.et_pb_toggle {
	border:none;
	padding: 35px 16px;
  }
   .route-html > div.px-20, #screen-layout > div.px-20 {
		 margin-bottom: 30px;
		 padding-bottom: 35px;
   }
   .route-html > div.px-20::after, #screen-layout > div.px-20::after{
	 content:'';
	 width:100vw;
	 left:50%;
	 top:0;
	 translate:-50% 0;
	 height:100%;
	 background:#EDEDED;
	 position:absolute;
	 z-index: -1;
   }
 
   .route-html {
	 max-width: 1250px;
	 margin: 0 auto;
	 font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
	 .skipped .stop-time-text::after {
		content:'-';
	  }
	  
	  button {
		cursor:pointer;
	  }
	  .font-bold {
		text-transform:uppercase;
		font-weight:800;
	  }
	  h1.font-bold {
		color:black;
		text-transform:Capitalize;
		font-size:32px;
		font-weight:700;
	  }
	  .stop-name, td .font-bold, .stop-code {
		text-transform:Capitalize;
		color:black;
		font-weight: 800;
        max-width: 150px;
        white-space: pre-wrap;
        font-size: 90%;
        line-height: 1.4;
		margin: 0 auto;
	  }
	  .stop-code {
		white-space: nowrap;
	  }
	  .timetable {
		  margin: 25px 0;  
	  }
	  .bg-gray-200 {
		  background-color: rgb(215 215 215);
		  border:none;
		  padding: 8px 15px 10px;
		  font-weight: 800;
			 color: white;
		  font-size:1em;
	  }
	  .bg-gray-200.bg-red {
		background-color: #E02B20;
	  }
	  .px-20{
		padding: 20px 8px 12px 8px;
		position:relative;
	  }
	 .p-40 {
		padding:0 16px;
	  }
	 & hr {
		margin: 30px 10px 15px;
		opacity:.3;
	 }
	 .timetable {
		margin: 25px 0;
	}
	.justify-between {
		justify-content: space-between;
	}
	.items-center {
		align-items: center;
	}
	.flex {
		display: flex;
	}
	.flex-col {
		flex-direction: column;
	}
	.cursor-pointer {
		font-weight:800;
		padding: 5px 18px 6px 20px;
		color:white;
		cursor:pointer;
		::before{
			content: url('/wp-content/uploads/2024/05/dl-w.png');
			margin-right: 7px;
			display: inline-block;
			filter: drop-shadow(0 0 0 #fff);
		}
	}
	.material-symbols-outlined {
		display:none;
	}
	div:has(> #timepoint-stops) {
		display: flex;
	}
}
.hidden {
    display: none;
}

@media only screen and (max-width:600px) {
	.btn-pdf {width:100%;}
	#timetable-title, h1.font-bold {flex-basis:100%;text-align: center;}
	.px-20 {padding: 20px 16px 12px 16px;}
	.route-html button {
		width:100%;
		padding: 22px 0;
        margin: 2px 0;
	}
	  .flex {
		 display:flex;
		 flex-wrap:wrap;
	  width: 100%;
	  text-align: center;
	   }
	 .space-x-4>:not([hidden])~:not([hidden]) {
		   margin: 30px 0 0 0;
	 }
	 div:has(> #timepoint-stops) {
		   flex-direction: column;
		   width: 100%;
	 }
	 .cursor-pointer, .justify-between { justify-content: center;padding: 15px 0;}
   }








/* GRAND PRIX Top Banner */
div.banner {
	width: 100vw;
	background: url('/wp-content/uploads/2024/04/LBT-BG.jpg');
	background-position: bottom center;
	height: 55px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	& p {
    font-family: "Montserrat", sans-serif;
    font-weight:700;
    font-size:18px;
		color: black;
		line-height: 1.2;
		text-align: center;
		position: relative;
    letter-spacing:.05em;
	transition:all 350ms ease;
		z-index: 5;
    display:inline-block;
	width:auto;
	@media only screen and (max-width:760px){
		flex-basis:0;
		font-size:70%;
		}
	@media only screen and (max-width:480px){
		font-size:63%;
		}
	}
	& p::after,
	& p::before {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(120%, -50%) scale(-1, 1);
		width: 30px;
		height: 30px;
		background-image: url('https://ridelbt.com/wp-content/uploads/2024/04/flag.png');
		background-repeat: no-repeat;
		background-size: contain;
		transform-origin:center center;
	}
	& p::before {
		right: unset;
		left: 0;
		transform: translate(-120%, -50%) scale(1, 1);
	}
}
.banner::after {
	content: '';
	z-index: 0;
	background: rgba(255, 255, 255, 0.1);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.banner:hover p::after{
	animation: flags 1s ease-in-out infinite;
}
 .banner:hover p::before{
	animation: flags-reverse 1s ease-in-out infinite;
}
.banner:hover p{
	color:#E02B20;
}
@keyframes flags {
	0% {
		rotate:0deg;
		}
		50% {
			rotate:3deg;
			}
		100% {
		rotate:0deg;
			}
}
@keyframes flags-reverse {
	0% {
	rotate:0deg;
	}
	50% {
		rotate:-3deg;
		}
	100% {
	rotate:0deg;
		}
	}







   /******************************** GRAND PRIX PAGE ********************************/
@media only print {
	body{
		overflow: hidden;
	}
	
		.popup {
			margin:0 auto!important;
			translate:-50% -50%;
			visibility:visible!important;
		  overflow: visible!important;
		}
	 }
	.gp-heading-1::after{
		content:'';
	position:absolute;
	left:0;
	top:0;
	transform:translate(-10%,-81px);
	background:#4A99C7;
	height:300px;
	width:250%;
	clip-path: polygon(8.1% 0%, 100% 0%, 100% 100%, 0% 100%);
	-webkitclip-path: polygon(8.1% 0%, 100% 0%, 100% 100%, 0% 100%);
	z-index:-1;
	}
	@media only screen and (max-width:780px){
		.gp-heading-1::after{
			clip-path: none;
	-webkitclip-path: none;
	transform:translate(-10%,-35%);
	opacity:.8;
	background:#242424;
	
		}
	}
	.popup {
		max-width: 750px !important;
		.et_pb_row {
			overflow-x:hidden;
		}
	}
	.gp-ninja {
		& tbody,
		& tr {
			text-align: center;
			line-height: 1;
		}
		& table {
			border: none;
		}
	}
	.ninja_table_wrapper {
		border-radius: 40px 40px 0 0;
		padding-top: 15px;
		background: white;
		position: relative;
		z-index: 5;
	}
	.semantic_ui .ui.table {
		border: none !important;
		border-collapse: collapse !important;
	}
	.footable-header th {
		line-height: 1.1;
		@media only screen and (max-width: 400px) {
			font-size: 75%;
		}
	}
	.semantic_ui .ui.celled.table tr td,
	.semantic_ui .ui.celled.table tr th {
		border-color: white !important;
		border-left: 3px solid white !important;
		border-right: 3px solid white !important;
	}
	.gpimg-header {
		border-radius: 30px;
		display: flex;
		justify-content: space-around;
		max-height: 120px;
		translate: 0 25%;
		position: relative;
		z-index: 9;
		& img {
			min-width: 120px;
		}
		& img:last-child {
			translate: 0 6%;
		}
	}
	.img-header-wrapper {
		margin-bottom: -8% !important;
	}
	@media only screen and (max-width: 500px) {
		.ninja_table_wrapper {
			padding-top: 0;
		}
	}
	
	.gp-footer {
		display: grid;
		justify-content: center;
		background: white;
		padding: 50px 15px 30px;
		translate: 0 -45px;
		border-radius: 0 0 40px 40px;
		& p {
			line-height: 1.5;
			font-weight: 900;
			text-align: center;
			padding: 4px;
			max-width: 580px;
			@media only screen and (max-width: 400px) {
				font-size: 80%;
			}
		}
		& p:last-child {
			font-weight: 500;
			text-align: center;
		}
	}
	#et-boc .area-outer-wrap[data-da-type='popup'] {
		padding: 0 !important;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
	.gp-contact-footer {
		display: flex;
		background: #e32228;
		position: relative;
		padding: 15px;
		::after {
			content: '';
			width: 150%;
			height: 100%;
			background: #e32228;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: -1;
		}
		::before {
			content: '';
			width: 150%;
			height: 50px;
			background: linear-gradient(
				0deg,
				rgba(74, 153, 199, 1) 0%,
				rgba(74, 153, 199, 1) 33%,
				rgba(240, 154, 34, 1) 33%,
				rgba(240, 154, 34, 1) 66%,
				rgba(227, 34, 40, 1) 66%,
				rgba(227, 34, 40, 1) 100%
			);
	
			position: absolute;
			left: 50%;
			top: 0;
			transform: translate(-50%, -100%);
			z-index: -1;
		}
		& p {
			line-height: 1.2;
			padding: 0 0.5em 0.5em;
			font-weight: 600;
			color: #f1f1f1;
			flex-basis:100%;
			@media only screen and (max-width: 400px) {
				font-size: 80%;
			}
		}
		& p:first-child {
			font-weight: 900;
			color: #fff;
		}
		& div:first-child {
			display: flex;
			flex-basis: 75%;
			flex-wrap: wrap;
		}
		& div:last-child {
			flex-basis: 23%;
			display: flex;
			justify-content: flex-end;
			align-items: flex-start;
		}
	}
	p.spanish-footer {
		position: relative;
		margin-top: 1.2em;
		line-height: 1.2;
		padding: 0 1.4em 0.7em!important;
		max-width: 800px;
		font-weight: 600;
		color: #fff;
		@media only screen and (max-width: 400px) {
			font-size: 80%;
		}
	}
	.gp-nav {
		display: flex;
		justify-content: center;
		margin: 10px 0;
		gap: .5em;
		& a {
			background:#e02b20;
			color:white;
			padding: 4px 25px 5px 10px;
			position:relative;
			transition:background 350ms ease;
			will-change:background;
			white-space:nowrap;
			filter: drop-shadow(0 0 .15em rgba(0, 0, 0, .3));
			cursor:pointer;
			@media only screen and (max-width:500px){
				font-size:80%;
				padding: 4px 33px 5px 10px;
			}
		}
		& a:first-child {
			padding: 4px 10px 5px 25px;
			@media only screen and (max-width:500px){
				padding: 4px 10px 5px 33px;
			}
		}
		& a:hover {
			background: black !important;
		}
		& a:hover::before, & a:hover::after {
			filter:grayscale(85%);
		}
		& a:last-child::after {
			content: '';
			display: inline-block;
			position: absolute;
			right: 0;
			top: 0;
			width: 100%;
			height: 101%;
			background: url(/wp-content/uploads/2024/04/arrow.svg);
			background-size: contain;
			background-repeat: no-repeat;
			z-index: 99;
			transform: scaleX(-1);
			translate: 50% 0;
			will-change:filter;
			transition:filter 350ms ease;
		}
		& a:first-child::before {
			content: '';
			display: inline-block;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 101%;
			background: url(/wp-content/uploads/2024/04/arrow.svg);
			background-size: contain;
			background-repeat: no-repeat;
			z-index: 99;
			translate: -49% 0;
			will-change:filter;
			transition:filter 350ms ease;
		}
	}
	a.da-close {
		font-size: 200%!important;
	}
	/* -------- Owl Carousel ------- */
	.gp-row {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 50px;
	}
	.owl-carousel {
		width: 100%;
		margin-top: -5%;
		@media only screen and (max-width: 540px) {
			margin-top: -10px;
		}
	}
	.desktop-map {
		height: 500px;
		width: 250px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: white;
		border-radius: 45px;
		position: relative;
		transform: rotate(-6deg);
		transition: all 0.4s ease-in-out;
		z-index: 99;
		& p {
			display: inline-block;
			font-size: 91%;
			color: #4a99c7;
			text-align: center;
			font-weight: 900;
			transform: rotate(6deg);
			transition: transform 0.4s ease-in-out;
			z-index: 9;
		}
	}
	.game-section {
		padding: 60px 0;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
		& h1 {
			text-align: center;
			color: #fff;
			font-weight: 900;
			position: relative;
			display: inline-block;
			z-index: 99;
			@media only screen and (max-width: 540px) {
				font-size: 100%;
				translate: 0 -50%;
			}
		}
	}
	.game-section h1::after,
	.game-section h1::before {
		content: '';
		position: absolute;
		right: 0;
		width: 45px;
		height: 45px;
		background: url(https://codepen.communecommunication.com/arrow.svg);
		background-size: contain;
		background-repeat: no-repeat;
		z-index: 99;
		transform: scaleX(-1);
		translate: 115% 0;
	}
	.game-section h1::before {
		transform: scaleX(1);
		translate: -115% 0;
		right: unset;
		left: 0;
	}
	@media only screen and (max-width: 540px) {
		.owl-stage-outer {
			padding-top:10px;
			margin-bottom:-5%;
		}
		.game-section h1::after {
			translate: 110% -5%;
			width: 35px;
		}
		.game-section h1::before {
			translate: -110% -5%;
			width: 35px;
		}
	}
	.game-section .owl-stage {
		margin: 15px 0;
		display: flex;
	}
	.game-section .item {
		margin: 0 15px 60px;
		width: 250px;
		height: 250px;
		padding: 30px 30px 50px 30px;
		display: flex;
		align-items: center;
		flex-wrap:wrap;
		justify-content: center;
		background: #fff;
		border-radius: 16px;
		position: relative;
		transition: all 0.4s ease-in-out;
		cursor: pointer;
		& p {
			font-size: 85%;
			color: #4a99c7;
			text-align: center;
			font-weight: 900;
			line-height: 1.4;
		}
	}
	.red {
		color: #e02b20;
	}
	.item:hover {
		scale: 1.03;
	}
	.item img {
		position: absolute;
		mix-blend-mode: darken;
		top: 0;
		left: 50%;
		transform: translate(-50%, -65%);
		max-width: 85%;
	}
	.pricing {
	display: flex;
    width: calc(100% - 10px);
    border-radius: 0 0 14px 14px;
    background: #e32227;
	justify-content: space-between;
    position: absolute;
    bottom: 5px;
	padding: 8px 0;
	color: white;
    -webkit-text-fill-color: white;
	& p {
		margin: 0;
        padding: 0;
        line-height: 1 !important;
		position: relative;
		font-size: 70% !important;
		white-space: nowrap;
	}
	& p:last-child { 
		padding-right: 13px;
	}
	& p:last-child::before {
		content: '';
        position: absolute;
        width: 28px;
        background: url(/wp-content/uploads/2025/03/circle-info-solid.svg);
        height: 28px;
        left: 0;
        top: 50%;
        translate: -115% -57%;
	}
	span.number {
		font-size: 230%;
        float: left;
        padding: 0 0 0 13px;
        margin: 0 3px 0 0;
        translate: 0 -1px;
	}
	  }
	.owl-dots {
		display: block !important;
		translate: 0 -150%;
		@media only screen and (max-width:540px){
			translate: 0 -100%;
		}
	}
	.owl-stage {
		padding: 15% 0 0 !important;
	}
	.owl-theme .owl-dots .owl-dot span {
		background: #f7f7f7;
	}
	@media only screen and (min-width: 1140px) {
		a.mapcard {
			display: none;
		}
		.game-section {
			width: 830px;
		}
	}
	@media only screen and (max-width: 1140px) {
		.desktop-map {
			display: none;
		}
		.game-section {
			padding: 60px 0 0;
		}
	}


	a.da-close {
  -webkit-text-fill-color:rgb(0, 0, 0)!important;
  color:black!important;
  z-index: 999;

}
.da-close-wrap {
  display: block!important
}

.important-popup.area-outer-wrap.popup_outer_wrap {
	height:auto!important;
	.popup.is-open {
		position:relative;
		transform:none;
		top:unset;
		left:unset;

	}
}