/* Vue v-cloak removed from this page to prevent Compare from disappearing if Vue fails */
/* Notes */
/*
	Fonts being used:
	Body Text > font-family:'Manrope',Sans-Serif;
*/
/*
	Colors being used:
	KBA Hover state > #34aadc
*/
/*
	Font sizing used:
	font-size: 75%; = 12px
	font-size: 1rem; = 12px
*/
/* Notes */

/* Imported Fonts */
/*
@import url('fonts.css');
*/
/* Imported Fonts */

/* Override body font removed; global overrides set Manrope */

/* prevent any horizontal page scrollbar caused by transformed/overflowing visuals */
html, body { overflow-x: hidden; }
/* Allow sticky elements inside the hybrid page to stick (section_hierarchy defaults to overflow:hidden elsewhere) */
.section_hierarchy {
	overflow: visible !important;

}
.page_intro_wrap {
	width: 88%;
	max-width: 1030px;
	height: auto;
	margin: 0px auto;
}
.sub_header_wrap {
  width: 80%;
  max-width: 1400px;
  height: auto;
  margin: 0px auto;
}
.mobile_page_wrap {
  width: 100%;
  height: auto;
  margin: 0px auto;
}
.tr_widget_navigation_wrap {
  width: 60%;
  max-width: 1431px;
  height: auto;
  margin: 0px auto;
}
.common_questions_wrap {
  width: 88%;
  max-width: 1100px;
  height: auto;
  margin: 0px auto;
}
/* wraps */

/* Hero Section */
.hero_containter {
	position: relative;
	width: 100%;
	height: min(100vh, 720px);
	overflow: hidden; 
	background: none;
	z-index: 100;
	opacity: 1;
}
#hero {
	padding-top: 0px;
	padding-bottom: 0px;
}
#hybrid_hero_container {
	position: relative;
	width: 100%;
	height: inherit;
}
.hero_background_image {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	width: 100vw;
	height: 100%;
	display: flex;
	overflow: hidden;
	background-color: #1A1A1A;
	justify-content: center;
	background: url(../../../../../../cm_jdp_ev_assets/hybrid/hero_section/hero_image_bright.jpg)no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.hero_overlay_top {
	position: absolute;
	bottom: 0px;
	left: 0px;
 	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgb(0,0,0);
	background: linear-gradient(180deg, #102330 0%, rgba(16, 35, 48, 0) 100%);
	opacity: .5;
}
.hero_overlay_left_side {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	width: 50%;
	height: 100%;
	background: rgb(0, 0, 0);
	background: linear-gradient(90deg, #102330 0%, rgba(16, 35, 48, 0) 100%);
	opacity: 1;
}
.hero_overlay_bottom {
	position: absolute;
	bottom: 0px;
	left: 0px;
 	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%);
	opacity: 1;
}
.hero_content_layer {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 8;
	width: 100%;
	height: 100%;
}
.hero_content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}
.welcome_message {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero_content_block {
	width: 40%;
}
.welcome_message_text_block {
    margin-top: 0rem;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
}
.welcome_message_text_block h1 {
	width: 100%;
    font-family: 'NeulisSans', sans-serif;
    color: #fff;
    font-size: 4rem;
    line-height: 4rem;
    text-transform: uppercase;
    font-weight: bold;
}
.welcome_message_text_block h2 {
    margin-top: 1.5rem;
    width: 100%;
    color: #fff;
    font-size: 1.125rem;
    line-height: 1.7rem;
    font-weight: 400;
}
.bold_hero_text {
	display: block;
	width: 100%;
	font-family: 'NeulisSans', sans-serif;
	font-weight: 600;
}
.thin_hero_text {
	display: block;
	width: 100%;
	font-family: 'NeulisSans', sans-serif;
	font-weight: 200;
	font-size: 4rem;
}
.hero_kba_container {
	margin-top: 2rem;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.hero_kba_block {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.hero_kba_item {
	width: auto;
	height: inherit;
	display: flex;
	align-items: center;
}
.kba_margy_left {
	margin-left: 1rem;
}

.kba_primary {
	width: auto;
	height: auto;
}
.kba_primary a:link, .kba_primary a:visited {
	cursor: pointer;
	padding-left: 2rem;
	padding-right: 2rem;
	padding-top: .2rem;
	width: auto;
	height: 45px;
	border-radius: 50vh;
	text-decoration: none;
	background-color: #D34612;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	font-size: 1.3rem;
	font-family: 'NeulisSans', sans-serif !important;
	font-weight: 900;
	display: flex;
	justify-content: center;
	align-items: center;
}
.kba_primary a:link:hover, .kba_primary a:visited:hover {
	background-color: #F17144;
}


.kba_transparent_teal:hover .dark_icon {
    filter: brightness(0) invert(1);
}

/* KBA Transparent With White Hover */
.kba_transparent_white {
	width: auto;
	height: auto;
}
.kba_transparent_white a:link, .kba_transparent_white a:visited {
	cursor: pointer;
	padding-left: .5rem;
	padding-right: 1rem;
	width: auto;
	height: 70px;
	box-shadow: rgba(225, 225, 225, 1) 0px 0px 0px 2px;
	border-radius: 5px;
	display: flex;
	text-decoration: none;
	color: #fff !important;
	background-color:rgb(0, 0, 0, .3);
}
.kba_transparent_white a:hover {
	box-shadow: rgba(0, 107, 116, 1) 0px 0px 0px 2px;
	background-color: #006b74;
	color: #fff !important;
}
/* KBA Transparent With White Hover */

/* KBA Transparent With Teal Hover */
.kba_transparent_teal {
	width: auto;
	height: auto;
}
.kba_transparent_teal a:link, .kba_transparent_teal a:visited {
	cursor: pointer;
	padding-left: .5rem;
	padding-right: 1rem;
	width: auto;
	height: 70px;
	box-shadow: rgba(225, 225, 225, 1) 0px 0px 0px 2px;
	border-radius: 5px;
	display: flex;
	text-decoration: none;
	color: #fff !important;
	background-color:rgb(0, 0, 0, .3);
}
.kba_transparent_teal a:hover {
	box-shadow: rgba(0, 107, 116, 1) 0px 0px 0px 2px;
	background-color: #006b74;
	color: #fff !important;
}
.kba_text {
	width: auto;
	height: auto;
}
/* KBA Transparent With Teal Hover */

/* Hero Bottom Bar */
.hero_bottom_bar_container {
    position: absolute;
	bottom: 0px;
    z-index: 10;
    width: 100%;
	height: auto;
}
.hero_bottom_bar_bg {
    width: 100%;
    height: 100px;
    /* background-color: rgb(56, 56, 54, .3); */
	background-color: rgb(117, 117, 117, .3);
}
.hero_bottom_bar_flex {
	width: 100%;
	height: 100px;
	display: flex;
	flex-direction: row;
}
.hero_bottom_bar_left_column {
	width: 45%;
	height: 100px;
    display: flex;
	flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
	gap: 1rem; 
  	position: relative;
	z-index: 10;
}
.hero_apps_title {
	width: auto;
	height: inherit;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: .7rem;
}
.hero_apps_title_image {
	height: inherit;
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero_apps_title_image img {
	width: 100%;
	max-width: 70px;
	height: auto;
}
.hero_apps_title_text {
	height: inherit;
	width: 190px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hero_apps_title_text h2 {
	text-transform: uppercase;
	font-size: 1.9rem;
	line-height: 2.2rem;
	color: #fff;
}
.hero_apps_title_large_text {
	font-size: 2.1rem;
}
.hero_apps_container {
	width: auto;
	height: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
}
.hybrid_apps_list {
	padding-bottom: 0rem;
	display: flex;
	flex-direction: row;
	list-style-type: none;
	gap: 1rem;
}

.tooltip a:link, .tooltip a:visited {
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: #fff;
	border-color: #70c588;
	position: relative;
	transition: none;
}
.app_icon {
	width: 47px;
	height: 47px;
	border-radius: 50%;
	border: solid 2px #70c588;
	box-shadow: rgba(86, 86, 85, 1) 0px 0px 0px 1px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #1A1A1A;
	position: relative;
	z-index: -1;
}

/* App Specific styles */
/* Hybrid Learning Center Home */
.hybrid_learning_center_icon {
	border-color: #80C1C6 !important;
}
/* Hybrid Learning Center Home */
/* EV Learning Center Home */
.ev_learning_center_icon_nav {
	border-color: #80C1C6 !important;
	background-image: url('../../../../../../cm_jdp_ev_assets/icons/learning_center_home_sprite.png');
	background-repeat: no-repeat;
	background-position-x: 50%;
	background-position-y: 11px;
	background-size: 36px 125px;
}
.ev_learning_center_icon_nav:hover {
	background-position-y: -89.5px;
}
.ev_learning_center_icon {
	border-color: #80C1C6 !important;
}
.tooltip .ev_learning_center_tooltip::after {
	border-color: #70c588 transparent transparent transparent;
}
.ev_learning_center_background_color {
	background-color: #80C1C6 !important;
}
/* EV Learning Center Home */
/* EV Incentives */
.ev_incentives_icon_nav {
	border-color: #70c588 !important;
	background-image: url('../../../../../../cm_jdp_ev_assets/icons/incentives_sprite.png');
	background-repeat: no-repeat;
	background-position-x: 50%;
	background-position-y: 7px;
	background-size: 35px 125px;
}
.ev_incentives_icon_nav:hover {
	background-position-y: -84px;
}
.ev_incentives_tooltip {
	background-color: #1A1A1A !important;
	/* border: solid 1px #0071eb; */
	border: solid 1px #70c588;
}
.tooltip .ev_incentives_tooltip::after {
	/* border-color: #0071eb transparent transparent transparent; */
	border-color: #70c588 transparent transparent transparent;
}
.ev_background_color {
	/* background-color: #0071eb !important; */
	background-color: #80C1C6 !important;
}
/* EV Incentives */
/* EV Savings Calculator */
.ev_savings_icon_nav {
	background-image: url('../../../../../../cm_jdp_ev_assets/icons/savings_calc_sprite.png');
	background-repeat: no-repeat;
	background-position-x: 50%;
	background-position-y: 7px;
	background-size: 36px 125px;
}
.ev_savings_icon_nav:hover {
	background-position-y: -83px;
}

.ev_savings_icon {
	border-color: #80C1C6 !important;
}
.ev_savings_tooltip {
	background-color: #1A1A1A !important;
	border: solid 1px #70c588;

}
.tooltip .ev_savings_tooltip::after {
	border-color: #70c588 transparent transparent transparent;
}
/* EV Savings Calculator */
/* EV Emissions Calculator */
.ev_emissions_calc_icon_nav {
	border-color: #80C1C6 !important;
	background-image: url('../../../../../../cm_jdp_ev_assets/icons/emissions_calc_sprite.png');
	background-repeat: no-repeat;
	background-position-x: 50%;
	background-position-y: 5px;
	background-size: 36px 125px;
}
.ev_emissions_calc_icon_nav:hover {
	background-position-y: -83px;
}
.ev_emissions_calc_icon {
	border-color: #80C1C6 !important;
}
.ev_emissions_calc_tooltip {
	background-color: #80C1C6 !important;
}
.tooltip .ev_emissions_calc_tooltip::after {
	border-color: #80C1C6 transparent transparent transparent;
}
/* EV Emissions Calculator */
/* EV Home Chargers */
.ev_home_chargers_icon_nav {
	border-color: #80C1C6 !important;
	background-image: url('../../../../../../cm_jdp_ev_assets/icons/home_chargers_sprite.png');
	background-repeat: no-repeat;
	background-position-x: 50%;
	background-position-y: 7px;
	background-size: 36px 125px;
}
.ev_home_chargers_icon_nav:hover {
	background-position-y: -83px;
}
.ev_home_chargers_icon {
	border-color: #80C1C6 !important;
}
.ev_home_chargers_tooltip {
	background-color: #80C1C6 !important;
}
.tooltip .ev_home_chargers_tooltip::after {
	border-color: #80C1C6 transparent transparent transparent;
}
/* EV Home Chargers */
/* EV Route Planner */
.ev_route_planner_icon_nav {
    border-color: #70c588 !important;
    background-image: url(../../../../../../cm_jdp_ev_assets/icons/route_planner_sprite.png);
    background-repeat: no-repeat;
    background-position-x: calc(50% - 1px);
    background-position-y: 8px;
    background-size: 36px 125px;
}
.ev_route_planner_icon_nav:hover {
	background-position-y: -87.5px;
}
.ev_route_planner_icon {
	border-color: #80C1C6 !important;
}
.ev_route_planner_tooltip {
	background-color: #1A1A1A !important;
	border: solid 1px #70c588;
}
.tooltip .ev_route_planner_tooltip::after {
	border-color: #70c588 transparent transparent transparent;
}
/* EV Route Planner */
/* EV Range Map */
.ev_range_map_icon_nav {
	border-color: #70c588 !important;
	background-image: url('../../../../../../cm_jdp_ev_assets/icons/range_map_sprite.png');
	background-repeat: no-repeat;
	background-position-x: 50%;
	background-position-y: 10px;
	background-size: 35px 125px;
}
.ev_range_map_icon_nav:hover {
	background-position-y: -89px;
}
.ev_range_map_icon {
	border-color: #80C1C6 !important;
}
.ev_range_map_tooltip {
	background-color: #1A1A1A !important;
	border: solid 1px #70c588;
}
.tooltip .ev_range_map_tooltip::after {
	border-color: #70c588 transparent transparent transparent;
}
/* EV Range Map */
/* EV Charging Stations */
.ev_charging_stations_icon_nav {
	border-color: #80C1C6 !important;
	background-image: url('../../../../../../cm_jdp_ev_assets/icons/charging_stations_sprite.png');
	background-repeat: no-repeat;
	background-position-x: calc(50% + 3px);
	background-position-y: 9px;
	background-size: 36px 125px;
}
.ev_charging_stations_icon_nav:hover {
	background-position-y: -87px;
}
.ev_charging_stations_icon {
	border-color: #80C1C6 !important;
}
.ev_charging_stations_tooltip {
	background-color: #1A1A1A !important;
	border: solid 1px #70c588;
}
.tooltip .ev_charging_stations_tooltip::after {
	border-color: #70c588 transparent transparent transparent;
}
/* EV Charging Stations */
/* EV Maps */
.ev_maps_icon_nav {
	border-color: #80C1C6 !important;
	background-image: url('../../../../../../cm_jdp_ev_assets/icons/maps_sprite.png');
	background-repeat: no-repeat;
	background-position-x: 50%;
	background-position-y: 10px;
	background-size: 36px 125px;
}
.ev_maps_icon_nav:hover {
	background-position-y: -89.5px;
}
.ev_maps_icon {
	border-color: #80C1C6 !important;
}
.ev_maps_tooltip {
	background-color: #80C1C6 !important;
}
.tooltip .ev_maps_tooltip::after {
	border-color: #80C1C6 transparent transparent transparent;
}
/* EV Maps */
/* App Specific Styles */

.app_name {
	margin-top: .2rem;
	width: 70px;
	height: auto;
}
.app_name h2 {
	margin-top: .2rem;
	font-family: 'NeulisSans', Sans-Serif;
	font-size: 1rem;
	text-align: center;
	font-weight: 700;
	text-transform: uppercase;
}
.tooltip .tooltiptext {
	/* visibility: hidden; */
	display: none;
	padding-top: 8px;
	padding-left: 2rem;
	padding-bottom: 8px;
	padding-right: 2rem;
	min-width: 100px;
	width: auto;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: calc(15%);
	text-align: center;
	margin-left: -50px;
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	/* border-color: #444 transparent transparent transparent; */
}

.tooltip:hover .tooltiptext {
	/* visibility: visible; */
	opacity: 1;
	display: block;
}


.hero_bottom_bar_right_column {
	width: 55%;
	height: inherit;
	position: relative;
}
.hero_bottom_bar_right_column a:link, .hero_bottom_bar_right_column a:visited {
	position: absolute;
	bottom: 20px;
	left: 0px;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	text-decoration: none;
	color: #fff;
}
/* Hero CTA layered animation (improved sequencing & performance hints) */
:root {
	/* Tunable vehicle arrival timings (sequential, non-overlapping) */
	--veh-drive-duration-primary: 1.35s;
	--veh-drive-duration-secondary: 1.35s; /* aligned durations for smoother perceived sync */
	--veh-drive-base-delay: 2.2s; /* when the first vehicle begins (after layer_one fades in) */
	--veh-drive-overlap-ratio: .42; /* fraction (0-1) of primary animation after which second begins */
}
.layer_one {
    position: absolute;
    bottom: 10px;
    right: 0px;
    z-index: 0;
    width: 100%;
    height: auto;
    background: #102330;
    background: linear-gradient(90deg, #102330 0%, #102330 35%, rgba(16, 35, 48, 0) 70%);
    opacity: 0;
    animation-name: layer_one;
    animation-delay: 1.5s;
    animation-duration: .7s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.4, .0, .2, 1);
    will-change: opacity, transform;
}
.layer_one::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px; /* thickness of the green bar */
	background: linear-gradient(90deg,#76ce8d 0%,rgba(118, 206, 141, 0) 55%);
}
@keyframes layer_one {
    0% {
		opacity: 0;
		transform: scale(.94) translateZ(0);
    }
    100% {
		opacity: 1;
		transform: scale(1) translateZ(0);
    }
}
.layer_one_wrap {
	width: 95%;
	height: auto;
	margin: 0px auto;
}
.compare_tile_flexed {
	padding-top: 1.5rem;
	padding-bottom: 2rem;
	width: 43%;
	height: auto;
	display: flex;
	flex-direction: column;
}
.compare_tile_content {
	width: auto;
	height: auto;
}
.compare_tile_content h2 {
	font-size: 2.667rem;
	font-weight: bold;
	text-transform: uppercase;
}
.compare_tile_content p {
    color: #fff;
    font-size: 1.125rem;
    line-height: 1.7rem;
    font-weight: 400;
}
.compare_tile_kba {
	margin-top: 1rem;
	width: auto;
	height: auto;
}
.compare_tile_kba p {
    color: #76ce8d;
    font-size: 1.125rem;
    line-height: 1.7rem;
    font-weight: 600;
	text-transform: uppercase;
}
.compare_tile_kba p:hover {
	text-decoration: underline;
}


.compare_button_flex {
	width: 100%;
	height: inherit;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
    align-items: center;
}
.margin_top_kba {
	margin-top: 4rem;
}
.tile_icon {
    width: auto;
    height: auto;
}
.tile_icon img {
    width: auto;
    height: 40px;
}
.tile_text {
    margin-left: .5rem;
    width: 100%;
    height: 100%;
	display: flex;
	align-items: center;
}
.tile_text p {
    font-weight: normal;
    font-size: 1.4rem;
    line-height: 2rem;
}
.banner_fun_thin_up {
    margin-left: 0rem;
}
.layer_two {
	position: absolute;
	bottom: -30vh;
	right: -34%;
	z-index: 1;
	width: 880px;
	height: 700px;
	background: rgb(64, 162, 170);
	background: radial-gradient(circle, rgba(64, 162, 170, .5) 0%, rgba(29, 88, 194, 0) 55%);
	animation-name: layer_two;
	opacity: 0;
	animation-fill-mode: forwards;
	animation-delay: 2.2s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-duration: 1.4s;
	will-change: opacity;
}
@keyframes layer_two {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.layer_three {
	position: absolute;
	bottom: 8%;
	right: 18%;
	z-index: 3;
	width: 300px;
	height: auto;
	opacity: 0;
	animation-name: layer_three;
	animation-delay: var(--veh-drive-base-delay);
	animation-duration: var(--veh-drive-duration-primary);
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.22,.61,.36,1); /* classic smooth ease-out */
	will-change: opacity, transform;
}
.layer_three img {
	width: 100%;
    height: auto;
}
@keyframes layer_three {
	0% { opacity: 0; transform: translateX(140px); }
	12% { opacity: 1; }
	100% { opacity: 1; transform: translateX(0); }
}
.layer_four {
	position: absolute;
	bottom: 5%;
	right: 0%;
	z-index: 4;
	width: 300px;
	height: auto;
	opacity: 0;
	animation-name: layer_four;
	/* Starts while primary still in motion (overlap) */
	animation-delay: calc(var(--veh-drive-base-delay) + (var(--veh-drive-duration-primary) * var(--veh-drive-overlap-ratio)));
	animation-duration: var(--veh-drive-duration-secondary);
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.22,.61,.36,1);
	will-change: opacity, transform;
}
.layer_four img {
	width: 100%;
    height: auto;
}
@keyframes layer_four {
	0% { opacity: 0; transform: translateX(170px); }
	15% { opacity: 1; }
	100% { opacity: 1; transform: translateX(60px); }
}

/* Nudge secondary vehicle closer to primary around 1440px widths */
@media screen and (max-width: 1440px) {
	.layer_four {
		right: 12%;
	}
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
	.layer_one, .layer_two, .layer_three, .layer_four {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}
/* Hero Section */

/* Intro Section */
/* Used for section scrolling */
#page_intro {
	/* reserved for page intro layout overrides */
	position: relative;
}
/* Used for section scrolling */
.page_intro_container {
	padding-bottom: 8rem;
	width: 100%;
	height: auto;
	position: relative;
	background-color: #fff;
}
.page_intro_block {
	position: relative;
	z-index: 4;
	padding-top: 11rem;
}
.article_image {
    width: 100%;
    max-width: 494px;
    height: 617px;
    position: relative;
    z-index: 0;
}
.article_image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* The gradient overlay */
.article_image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;                /* how far the white reaches over the image */
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 2;                /* sits above the image */
}
.main_intro_video_play {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.video_icon {
	position: relative;
	z-index: 2;
}
.play_icon {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	width: 227px;
	height: 128px;
	display: flex;
	justify-content: center;
	align-content: center;
}
/* Play Button */
 .play_btn_info {
	width: 58px;
	height: 58px;
	background-color: rgb(0,0,0,.8);
	border-radius: 50%;
	position: relative;
	display: block;
	/* margin: 100px auto; */
	box-shadow: 0px 0px 25px 3px rgb(0 0 0 / 20%);
	border: 1px solid rgba(255, 255, 255, .75);
}
/* triangle */
.play_btn_info::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-40%) translateY(-50%);
	transform: translateX(-40%) translateY(-50%);
	transform-origin: center center;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 17px solid #fff;
	z-index: 100;
	-webkit-transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
/* pulse wave */
.play_btn_info:before {
    content: "";
    position: absolute;
    width: 150%;
    height: 150%;
    z-index: 4;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation: pulsate1 2s;
    animation: pulsate1 2s;
    -webkit-animation-direction: forwards;
    animation-direction: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: steps;
    animation-timing-function: steps;
    opacity: 1;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, .75);
    top: -33%;
    left: -34%;
    background: rgba(198, 16, 0, 0);
}
@-webkit-keyframes pulsate1 {
  0% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
    box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
    box-shadow: none;

  }
}
@keyframes pulsate1 {
  0% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
    box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1);
    opacity: 0;
    box-shadow: none;
  }
}
/* Play Button */

.article_preview_text p {
	margin-top: 1rem;
	font-size: 1.5rem;
	font-weight: normal;

    line-height: 2.8rem;
	color: #1A1A1A;
}
.page_intro_content_layer {
	width: 100%;
	height: auto;
}
.article_flex_col {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	gap: 3.5rem;
}
.article_column_left {
	width: 50%;
	height: auto;
	position: relative;
}
.article_column_right {
	width: 50%;
	height: auto;
}
.article_frame_texture {
    position: absolute;
    top: -30px;
    left: -30px;
    z-index: -1 !important;
	width: 442px;
	height: 617px;
	background-color: #102330;
}
.article_preview_text {
	width: 100%;
	height: auto;
}
.article_preview_text h2 {
	margin-top: 6rem;
	margin-left: -190px;
	font-weight: 800;
	color: #1a1a1a;
	font-size: 4rem;
	text-transform: uppercase;
	line-height: 4rem;
	font-family: 'NeulisSans', sans-serif !important;
	position: relative;
	z-index: 3;
}

/* Tools & Resources parity (EV uses this selector) */
.tools_resources_container .section_title h2 {
	text-transform: uppercase;
	line-height: 4rem;
}

/* Match EV Hub #load_more_articles pill style */
.view_all_articles_container {
	display: none;
}

#load_more_articles {
	font-family: 'NeulisSans', sans-serif;
	font-weight: 900;
}

#load_more_articles p {
	margin: 0;
	font-family: 'NeulisSans', sans-serif;
	font-weight: 900;
}

.view_all_ac,
#load_more_apps {
	font-family: 'NeulisSans', sans-serif;
	font-weight: 900;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 40px;
	border-radius: 50vh;
	text-transform: uppercase;
	letter-spacing: 0;
	box-shadow: rgba(0, 131, 143, 1) 0px 0px 0px 2px;
	background-color: #fff;
	color: #1A1A1A;
	cursor: pointer;
}

.view_all_ac p,
#load_more_apps p {
	margin: 0;
	font-family: 'NeulisSans', sans-serif;
	font-weight: 900;
	font-size: 1.1rem;
	line-height: 1;
	color: inherit;
}

.view_all_ac:hover,
#load_more_apps:hover {
	box-shadow: rgba(0, 131, 143, 1) 0px 0px 0px 3px;
}
.article_preview_text p + p {
	margin-top: 3rem;
}
/* Intro Section */

/* Special Graphic Separator */
.special_graphic_separator_container {
	position: relative;
	z-index: 10;
	margin-top: -8rem;
	width: 100%;
	height: auto;
}
.special_graphic_separator {
    box-sizing: border-box;
    position: relative;
    width: 130%;
    height: 90px;
    left: -15%;
    top: 0;
    margin: auto;
    display: flex;
    align-items: center;
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 50% 100%;
    border-bottom: none;
    background:
        radial-gradient(
            55% 650% at 50% -460%,
            rgba(235,255,245,0.95) 0%,
            rgba(190,255,235,0.75) 12%,
            rgba(80,235,255,0.55) 28%,
            rgba(0,190,255,0.35) 48%,
            rgba(0,120,200,0.15) 65%,
            rgba(16,35,48,0.08) 80%
        ),
        radial-gradient(
            70% 800% at 50% -520%,
            rgba(120,255,220,0.35) 0%,
            rgba(0,210,255,0.22) 35%,
            rgba(0,150,220,0.12) 55%,
            rgba(0,0,0,0) 75%
        ),
        #102330;
    background-clip: padding-box;
}
.special_graphic_separator:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin-top: -.25rem;
    border-radius: inherit;
	background: linear-gradient(to right, #102330 0%, rgba(118, 206, 141, 0) 12%, #76ce8d 50%, rgba(118, 206, 141, 0) 88%, #102330 100%);
}
/* Special Graphic Separator */

/* Compare Header Section */
#vue-app-compare {
	background-color: #102330;
}
.images-ready {
	overflow-x: hidden;
	overflow-y: visible;
}

.compare_header_container {
	padding-bottom: 3rem;
	width: 100%;
	/* width: 1680px; */
	height: auto;
	/* allow visual overflow from child elements (vehicle images may expand outside columns) */
	position: relative;
	/*
	background-color: #284B51;
	*/
}


.compare_background_video {
	margin-top: -1px;
	position: absolute; 
	inset: 0; 
	width: 100%;
	height: 100%;
	/* allow visuals to bleed when needed (video itself stays contained) */
	overflow: visible;
	z-index: 0;
}


/* Overlay layer above the video but beneath header gradient/content */

#compare_looping_video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	z-index: -1; /* sit behind header content but above page bg */
}


/* Title-centered aura: easier to keep aligned responsively */
.compare_header_title {
	position: relative; /* create local stacking context */
	z-index: 3;
}
/*
.compare_header_title::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate3d(-50%, -50%, 0) scale(0.98);
	width: clamp(720px, 110vw, 1600px);
	height: clamp(360px, 60vh, 1200px);
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(
		ellipse at center,
		rgba(16,35,48,0.995) 0%,
		rgba(16,35,48,0.96) 10%,
		rgba(16,35,48,0.85) 28%,
		rgba(16,35,48,0.60) 48%,
		rgba(16,35,48,0.30) 72%,
		rgba(16,35,48,0.00) 140%
	);
	box-shadow: 0 0 300px rgba(0,0,0,0.75);
	filter: blur(6px);
	will-change: transform, opacity;
	backface-visibility: hidden;
	-webkit-transform: translate3d(-50%,-50%,0) scale(0.98);
	animation: ptTitleGlowIn 1000ms cubic-bezier(.22,.9,.28,1) 380ms forwards;
}
*/

@keyframes ptTitleGlowIn {
	from {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translate3d(-50%, -50%, 0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.compare_header_title::before {
		animation: none !important;
		transition: none !important;
		opacity: 1;
		transform: translate3d(-50%, -50%, 0) scale(1);
	}
}
.compare_header_content {
	width: 100%;
	height: auto;
	position: relative;
}
.compare_header_gradient {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1;
	/*
	background: #FFF;
	*/
	/*
	background: linear-gradient(0deg,rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0) 100%);
	*/
	overflow: visible;
	pointer-events: none;
}
.compare_header_content_layer {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* allow children to stretch full width so page content and models align */
	align-items: stretch;
}
.compare_header {
	width: 100%;
	height: auto;
}
.compare_header_title {
	text-align: center;
	color: #fff;
}
.compare_header_title h2 {
	margin-top: 1rem;
    width: 100%;
    font-family: 'NeulisSans', sans-serif;
	/*
    color: #00838f;
	*/
	color: #fff;
    font-size: 4rem;
    line-height: 4rem;
    text-transform: uppercase;
    font-weight: bold;
}
.compare_header_title h3 {
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: .1px;
    line-height: 2.5rem;
	color: #76CE8D;
	text-transform: uppercase;
}
.compare_header_title p {
    margin-top: .5rem;
    width: 100%;
    color: #1A1A1A;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 400;
}
.compare_icon_for_section {
    padding-left: 3%;
    padding-right: 3%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.compare_icon_for_section img {
	margin-top: -16rem;
	width: 100%;
	max-width: 80px;
	height: auto;
}


.compare_header_kba_container {
    margin-top: 2rem;
	width: 100%;
	height: auto;
}
.compare_header_kba_block {
	width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.compare_body_bg {
	display: none;
	margin-top: 6rem;
	width: 100%;
	/* fill remaining vertical space in the column layout */
	flex: 1 1 auto;
	min-height: 0; /* allows flex children to scroll properly */
	/* allow child visuals to overflow instead of creating scrollbars */
	overflow: visible;
	overflow-x: visible;
	overflow-y: visible;
	/* place the body (vehicle visuals) above the header layers so images can pop out */
	position: relative;
	z-index: 5; /* higher than .compare_header_content (z-index:3) */
}
.comp_vehicle_wrap {
	width: 90%;
	height: auto;
	margin: 0px auto;
}

.compare_body {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
}

/* make the models container sit below the flexible body and not overlap it */
.compare_hybrid_models_container {
	padding-bottom: 8rem;
    flex: 0 0 auto; /* do not grow or shrink */
	position: relative;
	z-index: 500;
}

.compare_top_header_bg {
	width: 100%;
	height: auto;
}
.compare_top_header {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.compare_top_header p {
    font-size: 1.6rem;
    line-height: 1.3;
    font-weight: 350;
    letter-spacing: 0;
    color: #fff;
	text-transform: uppercase;
}
.special_c {
	font-size: 2rem;
	display: inline-block;
	animation: floatArrow 2.2s ease-in-out infinite;
}
@keyframes floatArrow {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(6px); }  /* how far it floats */
  100% { transform: translateY(0); }
}

.compare_body {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
}
/* Side-by-side compare columns */
.comp_vehicle_one,
.comp_vehicle_two {
	padding-top: 4rem;
	padding-bottom: 4rem;
	width: 50%;
	background-color: #fff;
}

@media (max-width: 768px) {
	.compare_body { flex-direction: row; }
}
/* vehicle inner wrapper to center large images and provide animation clipping */
.comp_vehicle_inner {
	position: relative;
	width: 100%;
	min-height: clamp(220px, 30vw, 360px);
	/*
	height: 100%;
	*/
	display: flex;
	align-items: center;
	/* center horizontally by default; specific columns push toward the center below */
	justify-content: center;
	transform: translateY(-10%);
}
.comp_vehicle_inner img {
	width: 100%;
	max-width: 450px;
	height: auto;
	opacity: 1;
}
/* When vehicle A is selected (dynamic image shown), set opacity to 1 */
.comp_vehicle_img_one_dynamic {
	opacity: 1;
}
/* When vehicle B is selected (dynamic image shown), set opacity to 1 */
.comp_vehicle_img_two_dynamic {
	opacity: 1;
}
.comp_vehicle_img_one,
.comp_vehicle_img_two {
	cursor: pointer;
}
.comp_vehicle_img_one:focus-visible,
.comp_vehicle_img_two:focus-visible {
	outline: 2px solid #F05A28;
	outline-offset: 4px;
}
.comp_vehicle_img_one_dynamic,
.comp_vehicle_img_two_dynamic {
	opacity: 1;
	transition: opacity var(--pt-fade-duration, .55s) cubic-bezier(.4, 0, .2, 1);
	will-change: opacity;
}

.comp_vehicle_img_one_dynamic {
	transform: scaleX(-1);
}

.comp_vehicle_img_one_dynamic.is-ready,
.comp_vehicle_img_two_dynamic.is-ready {
	opacity: 1;
}

.comp_vehicle_one_content, .comp_vehicle_two_content {
	margin-top: -5rem;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.comp_vehicle_text_one, .comp_vehicle_text_two {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.comp_vehicle_text_one h4, .comp_vehicle_text_two h4 {
    font-size: 1.6rem;
    line-height: 1.3;
    font-weight: 350;
    letter-spacing: 0;
	color: #1A1A1A;
}
.comp_vehicle_text_one p, .comp_vehicle_text_two p {
	font-size: 3rem;
	line-height: 1.1;
	letter-spacing: 0;
	color: #1A1A1A;
}
.comp_vehicle_kba_block,
.comp_vehicle_kba {
	width: auto;
	display: inline-flex;
	justify-content: center;
}
.popup_first_add_vehicle, .popup_second_add_vehicle {
	padding-left: 3rem;
	padding-right: 3rem;
	margin-top: 2rem;
    font-family: 'NeulisSans', sans-serif;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: .5rem;
    justify-content: center;
    padding-top: 1rem;
    padding-bottom: .5rem;
    width: auto;
    height: auto;
    font-weight: 900;
    text-decoration: none;
    border-radius: 50vh;
    font-size: 1.333rem;
    color: #1A1A1A;
    border-radius: 50vh;
    letter-spacing: .05rem;
    text-transform: uppercase;
    box-shadow: rgba(0, 131, 143, 1) 0px 0px 0px 2px;
    background-color: #fff;
    position: relative;
	cursor: pointer;
}
.popup_first_add_vehicle:hover, .popup_second_add_vehicle:hover {
    box-shadow: rgba(0, 131, 143, 1) 0px 0px 0px 3px;
}
.add_vehicle_btn_icon {
	width: 25px;
	height: auto;
}
.add_vehicle_btn_icon img {
	width: 100%;
	height: auto;
}
.comp_text {
	margin-top: 0rem;
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.comp_text h3 {
	color: #1A1A1A;
    font-weight: 300;
    font-size: 2.0rem;
    letter-spacing: .1px;
    line-height: 2.5rem;
}


/* Hide compare rows until a vehicle has been selected (either column) */
.compare_hybrid_models_container .compare_grid_item {
    display: none !important;
}

.compare_hybrid_models_container.has-selection .compare_grid_item {
    display: flex !important; /* reset to the layout used by the grid rows */
}

.compare_hybrid_models_container {

}

.compare_hybrid_models_container.has-selection {
	display: block;
}

#vue-app-compare.debug-show-grid .compare_hybrid_models_container .compare_grid_item {
	display: flex;
}

.compare_grid {
	margin-top: 1rem;
	width: 100%;
	height: auto;
	/*
	background-color: #102330;
	*/
    overflow: visible; /* ensure sticky child isn't clipped */
}
.compare_grid ul {
	width: 100%;
	height: auto;
	list-style-type: none;
}
.compare_grid li:first-child {
	/* ensure first row has no top border spacing oddities */
	border-top: none;
}
.compare_grid li:nth-child(odd) {
	/* subtle background for odd rows kept empty intentionally; minimal rule to satisfy linter */
	background-clip: padding-box;
}
/*
.compare_grid li {
	width: 100%;
	min-height: 60px;
	height: auto;
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid rgb(0, 0, 0, .5);
}
*/
.compare_grid li {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
}

/* Spacer inserted by JS sticky fallback */
.compare_grid .compare-grid-header-spacer {
	list-style: none;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
}

.compare_grid li p {
	margin: 0; /* normalize paragraph margins inside grid cells */
}

.compare_grid_flex {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
}
/*
.grid_item_header {
	height: 100% !important;
}
*/
.grid_item_one_bg {
	padding-top: 1rem;
	padding-bottom: 1rem;
	width: 33.33%;
	height: inherit; 
	display: flex;
	flex-direction: row;
	/* background-color: #102330; */
	background-color: #3F4C55;
	border-top: 1px solid rgba(21, 21, 21, 0.5);
}
.grid_item_one_icon_item {
	margin-left: 15%;
	width: 14%;
	height: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
}
.compare_sec_title_icon {
	width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #4B5963;
    border: solid 1px #2e343b;
    box-shadow: rgba(86, 86, 85, 1) 0px 0px 0px 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.compare_sec_title_icon img {
	width: 26px;
	height: 26px;
	object-fit: contain;
	margin: auto;
}
.grid_item_one_text_item {
	width: 60%;
	height: inherit;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.grid_item_one_bg h3 {
	color: #fff;
	font-size: 1.4rem;
	font-weight: 600;
	font-family: 'Neulis Sans', Sans-Serif;
	text-transform: uppercase;
}
.grid_item_two_bg {
	width: 33.33%;
	height: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #4B5963;
	border-left: 1px solid rgba(21, 21, 21, 0.5);
	border-top: 1px solid rgba(21, 21, 21, 0.5);
}
.grid_item_two_bg p {
	color: #fff;
	font-weight: 300;
    font-size: 1.5rem;
}
.grid_item_three_bg {
	width: 33.33%;
	height: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #3F4C55; /* Same Family, but not technically in the style guide */
	border-left: 1px solid rgba(21, 21, 21, 0.5);
	border-top: 1px solid rgba(21, 21, 21, 0.5);
}
.grid_item_three_bg p {
	color: #fff;
	font-weight: normal;
    font-size: 1.5rem;
}

.compare_grid li.compare_grid_item:last-of-type .grid_item_three_bg {
	border-bottom-right-radius: 8px;
}
.grid_item_wrap {
	width: 90%;
	height: auto;
	margin: 0px auto;
}
.grid_item_one {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.grid_main_title h3 {
    color: #fff;
    font-weight: 300;
    font-size: 2.4rem;
    letter-spacing: .1px;
    line-height: 2.5rem;
	text-transform: capitalize;
}
.output_type a:link, .output_type a:visited {
	width: auto;
	height: auto;
    margin: 2rem 0;
    padding: 0.75rem 1.5rem;
    background-color: #fff;
    color: #1A1A1A;
    font-family: 'Neulis Sans', sans-serif;
    font-weight: 900;
    font-size: 1rem;
    line-height: 1.4rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50vh;
    border: none;
    box-shadow: rgba(0, 131, 143, 1) 0px 0px 0px 2px, rgba(0, 131, 143, 0.2) 0px 0px 0px 1px;
    transition: box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.output_type a:link:hover, .output_type a:visited:hover {
    box-shadow: rgba(0, 131, 143, 1) 0px 0px 0px 3px, rgba(0, 131, 143, 0.3) 0px 2px 8px;
}

/* Special */
:root { --site-header-h: 0px; }
.compare_grid_header_bg {
	position: sticky;
	top: var(--site-header-h, 0px);
	z-index: 2500;
	border: none;
	margin: 0 auto;
	overflow: hidden;
}
/* Elevation when JS fixes the header */
.compare_grid_header_bg.fixed-compare-header {
	box-shadow: none;
	overflow: visible;
}
.compare_grid_header {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow: hidden;
	box-shadow: none;
}

.compare_grid_header_bg.fixed-compare-header .compare_grid_header {
	box-shadow: 0 12px 18px -14px rgba(0, 0, 0, 0.35);
}

.compare_grid_header .grid_main_title h3 {
	margin: 0;
	font-size: 1.5rem;
    color: #fff;
    text-transform: uppercase;
    line-height: auto;
    font-weight: bold;
    font-family: 'Neulis Sans', Sans-Serif;
}

.compare_grid_header .grid_item_one_bg,
.compare_grid_header .grid_item_two_bg,
.compare_grid_header .grid_item_three_bg {
	flex: 1 1 33.33%;
}


/* Keep inner grid header aligned with sticky container */
.compare_hybrid_models_container.has-selection .grid_item_header {
	position: sticky;
	top: var(--site-header-h, 0px);
	z-index: 6;
}


.unselected_thumb_default_bg {
	width: 100%;
	height: auto;
	position: relative;
	/* background-color: #F7F7F5; */
}

.vs_grid_icon {
	position: absolute;
    top: 37%;
    left: -3.5%;
    z-index: 1;
    width: 30px;
    height: 30px;
	opacity: 1;
}
.vs_grid_icon img {
	width: 100%;
	height: auto;
}

.unselected_thumb_default {
	margin-top: 2rem;
	margin-bottom: 2rem;
	width: 100%;
	height: auto;
	background-color: #fff;

	border-radius: 8px; /* optional, softens corners */
}


.unselect_block_button {
	width: auto;
	height: auto;
}
.unselect_button {
	cursor: pointer;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	width: 100%;
	min-height: 60px;
	display: flex;
	background-color: #fff;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	text-align: left;
	border-radius: 8px;
	gap: 0.5rem;
	position: relative;
	overflow: hidden;
}
.unselect_button::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: .8;
	pointer-events: none;
	z-index: 0;
	transition: opacity .25s ease;
}
.unselect_button:hover {
	background-color: #fff;
}
.unselect_button.has-selection {
	/* remove dashed border and use solid black background when the button contains a selected vehicle */
	border: #fff !important;
	background-color: #fff;
}

.unselect_button.has-selection:hover {
	/* subtle white glow when hovering a populated (dynamic) selection */
	background-color: #fff;
}

/* When the RIGHT-side (vehicle two) unselect button has a selection, use dark background */
.unselect_button_two.has-selection {
    background-color: #1F1F1F;
    border: none !important;
	color: #fff;
}

.unselect_button_two.has-selection:hover {
    background-color: #1F1F1F; /* keep dark on hover */
}

.unselect_block_button:hover .dark_icon {
    filter: brightness(0) invert(1);
}
.unselect_vehicle_kba_icon {
	width: 100%;
	max-width: 140px;
	height: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.unselect_vehicle_kba_icon img {
	width: 100%;
	height: auto;
	/* base state: don't flip by default; only flip when .mirror is present */
	display: block;
	opacity: 1;
	transition: opacity .25s ease, transform .25s ease;
}

/* Mirror the selected vehicle image for the right-hand compare tile (vehicle B) */
.unselect_vehicle_kba_icon img.dynamic {
	/* subtle 3D rotate so both dynamic thumbnails rotate independently */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform-origin: center;
	transition: transform .35s ease, opacity .25s ease;
}

.unselect_vehicle_kba_icon img.dynamic.rotate {
	/* rotate around Y to create a horizontal flip animation */
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.unselect_vehicle_kba_icon img.hidden {
	opacity: 0;
	transform: scale(0.95);
}

.kba_text_dark {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.2rem;
	flex: 0 1 auto;
	z-index: 1;
	position: relative;
	border-left: 1px solid rgba(31, 31, 31, 0.25);
	padding-left: 0.75rem;
	margin-left: 0.5rem;
}
.top_text {
	font-family: 'Neulis Sans', sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	color: #1A1A1A;
	line-height: 1.2;
	margin: 0;
}
.bottom_text {
	font-family: 'Neulis Sans', sans-serif;
	font-size: 1.5rem;
	font-weight: 900;
	color: #1A1A1A;
	line-height: 1.2;
	margin: 0;
}
.trim_text {
	font-family: 'Neulis Sans', sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	color: #1A1A1A;
	line-height: 1.2;
	margin: 0;
}
.bottom_kba {
	font-family: 'Manrope', sans-serif;
	font-size: 0.9rem;
	font-weight: 400;
	color: #4B5963;
	line-height: 1.2;
	margin: 0;
	margin-top: 0.6rem;
}

/* Compare Hybrid Models Section */
/* Keep content above the glow + endcard overlay */

/* Link wrapper for animation */
.compare_botton_container {

}
.shop_hybrids_kba {
	padding-top: 3rem;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}
.shop_hybrids_kba_link:link, .shop_hybrids_kba_link:visited {
	cursor: pointer;
	padding-left: 2rem;
	padding-right: 2rem;
	padding-top: .2rem;
	width: auto;
	height: 45px;
	border-radius: 50vh;
	text-decoration: none;
	background-color: #D34612;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	font-size: 1.3rem;
	font-family: 'NeulisSans', sans-serif !important;
	font-weight: 900;
	display: flex;
	justify-content: center;
	align-items: center;
}
.shop_hybrids_kba_link:link:hover, .shop_hybrids_kba_link:visited:hover {
	text-decoration: none;
	background-color: #F17144;
}
.compare_button_hint {
	margin-right: 1rem;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	font-family: 'Manrope', sans-serif;
	font-size: 1.2rem;
	color: #4B5963;
}
.compare_button_hint.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.compare_default_image_bg {
	margin-top: 1rem;
	width: 100%;
	height: auto;
}
.compare_default_image {
	width: 100%;
	height: auto;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.compare_default_image video {
	width: 100%;
	max-width: 768px;
	height: auto;
	display: block;
}
.compare_default_image img {
	width: 100%;
	height: auto;
	margin: 0rem;
	padding-bottom: -10px;
}



/* Common EV Questions Section */
.common_questions_container {
	padding-top: 8rem;
	padding-bottom: 8rem;
    width: 100%;
    height: auto;
    /* border-bottom-left-radius: 3rem; */
    position: relative;
	overflow: hidden;
}
.c_hero_shape_one {
    position: absolute;
    top: 0%;
    right: 0px;
    z-index: 1;
    background: url(../../../../../../cm_jdp_ev_assets/textures/texture.png);
    background-repeat: repeat;
	background-color: #1A1A1A;
    width: 83%;
    height: 450px;
}
.c_hero_shape_two {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 0;
    background: url(../../../../../../cm_jdp_ev_assets/textures/texture.png);
    background-repeat: repeat;
	background-color: #eeeeee7e;
    width: 83%;
    height: 61px;
}
.common_questions_content {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 2;
	/*
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	*/
}

#question_one {
	display: none;
}
#question_two {
	display: none;
}
#question_three {
	display: none;
}
#question_four {
	display: none;
}
.cq_question_content {
	width: 100%;
	height: auto;
}
.cq_content_container {
	margin-top: 4rem;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
}
.cq_content {
	width: 100%;
	height: auto;
	position: relative;
}
.cq_content_title {
	width: 100%;
	height: auto;
}
/* removed empty .safety_content rule (lint) */
.c_hero_bg {
	width: 100%;
	height: 482px;
	background-color: #222;
	position: relative;
}
.question_video_bg {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	width: 100%;
	height: 482px;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 1;

	background-size: 100%;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}
.c_hero_overlay_left_side {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 3;
	width: 100%;
	height: inherit;
	background: rgb(0, 0, 0);
	background: linear-gradient(90deg, #102330 0%, rgba(16, 35, 48, 0) 100%);
	opacity: 1;
}
.c_hero_overlay_bottom {
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 2;
	width: 100%;
	height: inherit;
	background: rgb(0, 0, 0);
	background: linear-gradient(0deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 30%);
	opacity: 1;
}
.c_hero_content_bg {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 3;
	width: 100%;
	height: inherit;
}
.c_hero_wrap {
	width: 95%;
	height: auto;
	margin: 0px auto;
}
.c_hero_content {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
}
.q_a_video_wrap {
	width: 300px;
	height: auto;
	margin: unset;
}
.cq_video_title {
	position: relative;
	z-index: 2;
	height: inherit;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.jdp_logo_video {
	margin-top: 3rem;
	width: 73px;
	height: auto;
}
.jdp_logo_video img {
	width: 100%;
	height: auto;
}
.cq_video_title h3 {
    width: 100%;
    height: auto;
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0rem;
    text-transform: uppercase;
}
.cq_video_title p {
    margin-top: 0.5rem;
	width: 47%;
    font-weight: 200;
    color: #fff;
	font-size: 2rem;
}
.article_preview_q_a {
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
	margin-top: 3rem;
	width: 100%;
	height: auto;
	box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-repeat: no-repeat;
    cursor: pointer;
	position: relative;
	background-size: 100% 100%;
}
/*
.article_preview_q_a:after {
	content: ' ';
	position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    content: "";
    width: 100%;
    height: inherit;
    background-color: rgb(0,0,0,0.2); 
}
*/
.article_preview_q_a img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.article_play_btn_overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
}
.video_icon {
	position: relative;
	z-index: 2;
}
.play_icon {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	width: 280px;
	height: 158px;
	display: flex;
	justify-content: center;
	align-content: center;
}
/* Play Button */
.play-btn {
	width: 90px;
	height: 90px;
	background-color: rgb(16,35,48,.9);
	border-radius: 50%;
	position: relative;
	display: block;
	/* margin: 100px auto; */
	box-shadow: 0px 0px 25px 3px rgb(0 0 0 / 20%);
}

/* triangle */
.play-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-40%) translateY(-50%);
  transform: translateX(-40%) translateY(-50%);
  transform-origin: center center;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 25px solid #fff;
  z-index: 100;
  -webkit-transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
/* pulse wave */
.play-btn:before {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  z-index: 4;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation: pulsate1 2s;
  animation: pulsate1 2s;
  -webkit-animation-direction: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, .75);
  top: -31%;
  left: -31%;
  background: rgba(198, 16, 0, 0);
}
@-webkit-keyframes pulsate1 {
  0% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
    box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
    box-shadow: none;

  }
}
@keyframes pulsate1 {
  0% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
    box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1);
    opacity: 0;
    box-shadow: none;
  }
}
/* Play Button */
.sl_title {
	width: 100%;
	height: auto;
	min-height: 70px;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border: 0px;
	background: transparent;
	cursor: pointer;
}

.sl_icon {
	width: auto;
	max-width: 40px;
	height: auto;
	max-height: 40px;
}

.sl_text {
	width: 90%;
	text-align: left;
}
.sl_text h4 {
	font-family: 'Neulis Sans', sans-serif;
	font-size: 1.6rem;
    color: #1A1A1A;
    font-style: normal;
    font-kerning: normal;
    display: flex;
	line-height: 2.8rem;
    align-items: center;
	font-weight: 600;
}
/*
.first_question h3 {
	font-size: 2.5rem;
}
*/
/*
@media only screen and (max-width: 980px) {
	.sl_text {
		margin-left: 5%;
		width: auto;
	}
}
*/
.sl_toggle {
	margin-left: auto;
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #1A1A1A;
	border-radius: 50%;
	opacity: 1;
}
.sl_toggle:hover {
	opacity: .7;
}

.toggle_arrow {
	margin-top: -.2rem;
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 800;
}

.si_content_list {
.popup_first_add_vehicle img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	display: block;
}
    padding-top: 1rem;
    padding-bottom: 1rem;
	width: 100%;
	height: auto;
	display: none;
}
.question {
	font-size: 2.1rem;
	margin-right: 1rem;
	color: #7e7e81;
	display: none;
}
.answer {
	font-size: 1.7rem;
	margin-right: 2.3rem;
	color: #7e7e81;
	display: none;
}
.safety_list_item {
	position: relative;
	width: 100%;
	height: auto;
}
.si_content_list ul {
	list-style-type: none;
	list-style-position: outside;
}
.si_content_list li {
    font-family: 'Manrope', Sans-Serif;
    font-weight: normal;
    color: #757575;
	font-size: 1.5rem;
    line-height: 2.8rem;
}
.safety_ending_wrap {
	width: 85%;
	max-width: 1366px;
	height: auto;
	margin: 0px auto;
}
.safety_ending_para {
	width: 100%;
	height: auto;
}
.safety_ending_para p {
	text-align: center;
	color: #1A1A1A;
	font-size: 1rem;
	line-height: 1.8rem;
}
/* Common EV Questions Section */

/* Banner 2 */
.large_ad_container {
	width: 100%;
	padding-top: 8rem;
	padding-bottom: 8rem;
	height: auto;
	background-color: #000;
    position: relative;
	overflow: hidden;
	background: url(../../../../../../cm_jdp_ev_assets/backgrounds/banner_two_try.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.large_ad_overlay_bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
	height: 100%;
	background: #102330;
	background: linear-gradient(360deg, rgba(16, 35, 48, 0.9) 5%, rgba(16, 35, 48, 0) 100%);
}

/* Left-side overlay for Banner #2 (keeps content clickable) */
.large_ad_container .c_hero_overlay_left_side {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: rgb(0, 0, 0);
	background: linear-gradient(90deg, #102330 0%, rgba(16, 35, 48, 0) 100%);
	opacity: 1;
	pointer-events: none;
}
.banner_two_kba_block_inside {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.banner_two_container::after {
	content: ' ';
	position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    content: "";
    width: 100%;
    height: inherit;
    background-color: rgb(0,0,0,0.2); 
}
.banner_two {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 2;
}
#incentives_benefits_icon_black img {
	width: auto;
	height: 45px;
}
.banner_para {
	width: 50%;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.banner_para h2 {
	margin-top: 1rem;
	width: 100%;
    font-family: 'NeulisSans', sans-serif;
    color: #fff;
    font-size: 4rem;
    line-height: 5.2rem;
    text-transform: uppercase;
    font-weight: bold;
	letter-spacing: 0;
}
.banner_para h3 {
	width: 100%;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: .1px;
    line-height: 2.5rem;
    color: #76CE8D;
    text-transform: uppercase;
}
.pc_text_100 {
	display: block;
	width: 100%;
	height: auto;
}
.banner_two_columns {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.banner_para p {
	width: 100%;
    font-weight: normal;
    color: #fff;
    font-size: 1.6rem;
    line-height: 2.8rem;
}
.featured_image_container {
	width: 50%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.featured_image {
	width: 90%;
	height: auto;
}
.featured_image img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow:
		2em 4em 6em -2em rgba(0,0,0,1),
		1em 2em 3.5em -2.5em rgba(0,0,0,1);
}
.banner_two_kba_block {
	margin-top: 2rem;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.banner_two_kba_item {
	width: auto;
	height: inherit;
	display: flex;
	align-items: center;
}
.route_planner_kba a:link, .route_planner_kba a:visited {
	background: #16a4b8;
	background-color: #16a4b8;
	box-shadow: rgba(22, 164, 184, 1) 0px 0px 0px 2px !important;
}
.route_planner_kba a:hover {
	background: #16a4b8 !important;
	background-color: #16a4b8 !important;
	box-shadow: rgba(22, 164, 184, 1) 0px 0px 0px 2px !important;
}
.banner_two_kba_red {
	width: auto;
	height: auto;
}
.banner_two_kba_red a:link, .banner_two_kba_red a:visited {
	cursor: pointer;
	padding-left: .5rem;
	padding-right: 1rem;
	width: auto;
	height: 70px;
	box-shadow: rgba(255, 255, 255, 1) 0px 0px 0px 2px;
	border-radius: 5px;
	display: flex;
	text-decoration: none;
}
.banner_two_kba_red a:hover {
	background: linear-gradient(180deg, rgba(192,24,34,1) 0%, rgba(51,231,118,0) 100%);
	background-color: #cf202f;
	box-shadow: rgba(207, 32, 47, 1) 0px 0px 0px 2px;
}
.banner_two_kba_icon {
	width: auto;
	max-width: 45px;
	height: inherit;
	display: flex;
	align-items: center;
}

/* Banner #2: make KBA links match the orange hero pill buttons */
.banner_two_kba_block .kba_transparent_white a:link,
.banner_two_kba_block .kba_transparent_white a:visited,
.banner_two_kba_block .kba_teal a:link,
.banner_two_kba_block .kba_teal a:visited {
	cursor: pointer;
	padding: 0.75rem 1rem;
	width: auto;
	min-height: 45px;
	border-radius: 50vh;
	text-decoration: none;
	background-color: #D34612;
	color: #fff !important;
	text-transform: uppercase;
	font-size: 1.3rem;
	font-family: 'Neulis Sans', Sans-Serif;
	font-weight: bold;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	box-shadow: none;
}

.banner_two_kba_block .kba_transparent_white a:hover,
.banner_two_kba_block .kba_teal a:hover {
	background-color: #F17144;
	box-shadow: none;
	color: #fff !important;
}

.banner_two_kba_block .kba_text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.15;
}

.banner_two_kba_block .top_text,
.banner_two_kba_block .bottom_text {
	color: #fff;
}
.banner_two_kba_block .bottom_text {
	font-weight: 800;
}
.banner_two_kba_icon img {
	width: auto;
	height: auto;
}
.banner_two_kba_text {
	margin-left: .5rem;
	width: auto;
	height: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.banner_two_article_link {
	margin-top: 3rem;
	width: 100%;
	height: auto;
	display: flex;
	justify-content: flex-start;
}
.banner_two_article_link p a:link,  .banner_two_article_link p a:visited {
	padding: 1rem;
	text-decoration: none;
	background-color: rgb(68, 68, 68, .3);
	color: #1A1A1A;
	border-radius: 5px;
    font-family: 'Manrope', Sans-Serif;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .1rem;
}
#route_planner_icon_white {
   -webkit-filter: invert(100%); /* Safari/Chrome */
    filter: invert(100%);
}
/* Banner 2 */

/* Articles Section */
.news_articles_container {
	padding-top: 8rem;
	padding-bottom: 8rem;
	width: 100%;
	height: auto;
	background-color: #fff;
	position: relative;
}
.news_shape_one {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 100;
    background: url(../../../../../../cm_jdp_ev_assets/textures/texture.png);
    background-repeat: repeat;
    width: 83%;
    height: 61px;
}
.news_shape_two {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 0;
    background: url(../../../../../../cm_jdp_ev_assets/textures/texture.png);
    background-repeat: repeat;
    width: 83%;
    height: 61px;
}
.close-btn:focus {
	outline: 1px solid white;
}
.article_filter {
	color: white;
	transition: all 0.1s ease;
}
.article_filter_active {
	color: #cf202f !important;
	text-decoration: none !important;
	opacity: 1 !important;
}
.grow:hover {
	transform: scale(1.1);
	transition: all 300ms;
}
.articles_content_layer {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2;
}
.section_header {
	margin-bottom: 1rem;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}
.flex_start {
	justify-content: flex-start !important;
}
.section_title {
	height: auto;
}
.section_title h2 {
    width: 100%;
    text-align: center;
    font-weight: bold;
    color: #00838f;
    text-transform: uppercase;
    font-size: 4rem;
    line-height: 5.5rem;
    letter-spacing: 0;
    font-family: 'NeulisSans', sans-serif !important;
}
#p_title:after {
	width: 32.5rem;
}
#ceq_title:after {
	width: 26.8rem;
}
.section_title h2 a:link, .section_title h2 a:visited {
	color: #fff;
	text-decoration: none;
}
.st_little_margin {
	margin-bottom: 1rem;
}
.section_description {
	margin-top: 6rem;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.section_description h3 {
	width: 70%;
	font-family: 'Manrope', Sans-Serif;
	color: #fff;
	font-size: 2rem;
	line-height: 3.0rem;
}
.section_kbas {
	margin-top: 8rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.section_kbas a:link,
.section_kbas a:visited {
	font-family: 'Manrope', Sans-Serif;
	display: block;
	text-transform: initial;
	padding-top: 1.2rem;
	padding-left: 5rem;
	padding-bottom: 1.2rem;
	padding-right: 5rem;
	font-size: 1.3rem;
	letter-spacing: .1rem;
	background-color: #fff;
	outline: none;
	outline-style: none;
	text-decoration: none;
	color: rgb(55, 54, 55);
	text-align: center;
	border-radius: 6px;
}
.section_kbas a:hover {
	transition: .4s ease;
	background-color: #e7e8e8;
	opacity: 1;
}
.section_kba_blue_style a:link,
.section_kba_blue_style a:visited {
	color: #fff;
	background: -webkit-gradient(linear, left top, right top, from(#0071eb), color-stop(30%, #16a7cb), color-stop(67%, #23c0a8), to(#33e776));
	background: -webkit-linear-gradient(left, #0071eb, #16a7cb 30%, #23c0a8 67%, #33e776);
	background: linear-gradient(90deg, #0071eb, #16a7cb 30%, #23c0a8 67%, #33e776);
	background-size: 400% 400%;
	z-index: 0;
}
.section_kba_blue_style a:hover {
	background-color: #34aadc;
}
.section_nav {
	width: auto;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* margin-left: auto; */
}
.section_nav_dark {
	background-color: transparent;
	box-shadow: inset 0 -1px 0 0 #fff;
}
.section_nav_dark ul {
	margin-right: 0rem !important;
}
.section_nav_dark li:first-child {
	margin-left: 0rem !important;
}
.section_nav ul {
	list-style-type: none;
	display: flex;
	justify-content: center;
}
.section_nav li {
	position: relative;
	z-index: 1;
	margin-left: 3rem;
	display: inline;
}
.section_nav li:first-child {
	margin-left: 0rem;
}
.section_nav li button {
    width: 100%;
    height: 49px;
	font-family: 'Neulis Sans', Sans-Serif;
	font-weight: 900;
	color: #1A1A1A;
    font-size: 1.3rem;
    text-transform: uppercase;
	background: transparent;
	cursor: pointer;
	opacity: 1;
}
.section_nav_dark li button {
	color: #fff;
}
.section_nav li button:hover {
	/*color: #cf202f; */
	opacity: 1;
	transition: all 0.2s ease;
}
.active_cq_nav {
    /* color: #31e27b !important; */
    text-decoration: none !important;
	box-shadow: inset 0 -2px 0 0 #08070f;
	opacity: 1 !important;
	color: #1A1A1A;
}
.section_nav_dark .active_cq_nav li button {
	box-shadow: inset 0 -2px 0 0 #fff;
}
.section_nav_selector {
	display: none;
}
.articles_container {
	margin-top: 2rem;
	width: 100%;
	height: auto;
}
.articles {
	width: 100%;
	height: auto;
}
.articles ul {
	list-style-type: none;
}
.articles ul li:first-child {
	margin-top: 0px;
}
.articles li {
	margin-top: 5rem;
    width: 100%;
    height: auto;
}
.articles li:first-child {
	margin-top: 0px;
}
.articles li a:link,
.articles li a:visited {
	text-decoration: none;
}

/* Second Image */
.articles li:nth-of-type(2) img {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
/* Second Image */

/* Third Image */
.articles li:nth-of-type(3) img {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
/* Third Image */

/* Fourth Image */
.articles li:nth-of-type(4) img {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
/* Fourth Image */


.article_preview_bg {
	width: 100%;
	height: auto;
}
.article_preview_wrap_outer {
	width: 100%;
	height: auto;
	margin: 0px auto;
}
.articles_wrap_preview_inner {
	width: 50%;
	height: auto;
	position: relative;
}
.article_content_ts {
	width: 90%;
	height: auto;
	display: flex;
	flex-direction: row;
}
.article_preview {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	gap: 0rem;
}
.article_preview > .articles_wrap_preview_inner {
	margin-left: 3rem;
}
.article_preview_even {
	display: flex;
	flex-direction: row-reverse;
}
.article_preview_even > .articles_wrap_preview_inner {
	display: block;
	margin-left: 0px !important;
}
.article_preview_media {
	display: flex; 
	justify-content: center;
	align-items: center;
	width: 50%;
	height: auto;
	max-height: 420px;
	transition: all 300ms;
	background-repeat: no-repeat;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.article_preview_media::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: rgb(0, 0, 0);
	background: linear-gradient(to top, rgba(16, 35, 48, 0.9) 0%, rgba(16, 35, 48, 0) 70%);
	opacity: 1;
	pointer-events: none;
}
.article_preview_media img {
    width: 100%;
    height: auto;
	position: relative;
	z-index: 0;
}
.play_icon {
	max-height: 200px;
}
.play_icon {
	position: absolute;
	max-width: 45%;
	transition: all 300ms;
	z-index: 100;
}
.article_preview_media:hover .play_icon {
	max-width: 40%;
	transition: all 300ms;
}
.article_preview_tag_name {
	padding: .5rem;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	height: auto;
	width: auto;
	display: flex;
	flex-wrap: nowrap;
	background-color: #fff;
    box-shadow:  rgba(0, 0, 0, 1) 0px 0px 0px .5px inset;
}
.article_preview_tag_name h3 {
	margin-left: 0.4rem;
	font-size: 1.2rem;
	font-family: 'Neulis Sans', Sans-Serif;
	font-weight: bold;
	color: #1A1A1A;
	text-transform: uppercase;
}
.article_preview_tag_name h3:first-child {
	margin-left: 0px;
}
.article_preview_tag_name_text {
	margin-left: 1.3%;
	font-size: 1.7rem;
	line-height: 2.6rem;
	letter-spacing: .1rem;
	font-weight: bold;
	color: #31e27c;
}
.capitalize:first-child {
	margin-left: 0%;
}
.article_preview_title {
	margin-top: 1rem;
	width: 90%;
	height: auto;
}
.article_preview_title h2 {
	margin-top: 3rem;
	font-family: 'Neulis Sans', Sans-Serif;
	font-weight: 700;
    color: #1A1A1A;
	text-transform: uppercase;
	line-height: 4rem;
    font-size: 3.7rem;
}
.article_author {
	margin-top: 0.5rem;
	width: 100%;
	height: auto;
}
.article_author p {
    font-size: 1.2rem;
    font-weight: 600;
    color: #605f63;
}
.author_preview_content {
	margin-top: 2.5rem;
	height: 60px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	display: none;
}
.author_preview_image img {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: solid 2px #999;
}
.author_preview_name {
	margin-left: 1rem;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.author_preview_name p {
	font-family: 'Manrope', Sans-Serif;
	font-size: 1.3rem;
	font-weight: normal;
	color: #999;
	font-style: italic;
}
.article_content_seperation_wrap {
	width: 60%;
	height: auto;
	margin: 0px auto;
}
.article_seporator {
	display: none;
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
	width: 100%;
	height: 0.5rem;
	bottom: 0;
	left: 0;
	width: 100%;
	background: -webkit-gradient(linear, left top, right top, from(#0071eb), color-stop(30%, #16a7cb), color-stop(67%, #23c0a8), to(#33e776));
	background: -webkit-linear-gradient(left, #0071eb, #16a7cb 30%, #23c0a8 67%, #33e776);
	background: linear-gradient(90deg, #0071eb, #16a7cb 30%, #23c0a8 67%, #33e776);
	background-size: 400% 400%;
	z-index: 0;
}
.article_content_preview_title {
	width: 95%;
	height: auto;
}
.article_content_preview_title p {
	margin-top: 1rem;
    color: #1A1A1A;
	font-weight: normal;
    font-size: 1.6rem;
    line-height: 2.8rem;
}
.article_link_preview_bg {
	margin-top: 3rem;
    width: 100%;
    height: auto;
}
.article_link_wrap {
	width: 40%;
	height: auto;
}
.article_link_preview {
	width: 100%;
	display: flex;
	justify-content: center;
}
.article_link_preview h4 {
	display: block;
	width: 100%;
	height: auto;
	padding: 1px;
	transition: .4s ease;
	outline: none;
	outline-style: none;
	text-decoration: none;
	text-transform: capitalize;
	text-align: center;
}
.article_link_preview h4 a:link, .article_link_preview h4 a:visited {
	font-family: 'NeulisSans', sans-serif;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    height: auto;
	font-weight: 900;
    text-decoration: none;
    border-radius: 50vh;
    font-size: 1.333rem;
    color: #1A1A1A;
    border-radius: 50vh;
	letter-spacing: 0;
    text-transform: uppercase;
    box-shadow: rgba(0, 131, 143, 1) 0px 0px 0px 2px;
    background-color: #fff;
    position: relative;
}
.article_link_preview h4 a:hover {
	box-shadow: none;
	box-shadow: rgba(0, 131, 143, 1) 0px 0px 0px 3px;
}
#see_articles {
    display: none;
}
.working {
    display: block !important;
}
/* Articles Section */

/* Patrons Section */
.patrons_container {
    height: 600px;
    background-color: #1A1A1A;
    background: url(../../../../../../cm_jdp_ev_assets/patrons/ev_learning_center.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	overflow: hidden;
	background-repeat: no-repeat;
	position: relative;
}
.patrons_overlay_top {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	width: 100%;
	height: 100vh;
	background: rgb(0, 0, 0);
	background: linear-gradient(180deg, rgba(8, 7, 15, 1) 5%, rgba(0, 0, 0, 0) 100%);
}
.patrons_overlay_bottom_ev {
	position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    height: 100%;
	background: #102330;
	background: linear-gradient(360deg, rgba(16, 35, 48, 0.9) 5%, rgba(16, 35, 48, 0) 100%);
}
.patrons_content {
	width: 100%;
    height: inherit; 
    position: relative;
    z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.patrons_header {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
	align-items: center;
}
.patrons_header h2 {
    width: 100%;
	font-family: 'NeulisSans', sans-serif;
	color: #fff;
	font-size: 4rem;
	line-height: 4rem;
	text-transform: uppercase;
	font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.patrons_header h2 a:link, .patrons_header h2 a:visited {
    text-decoration: none;
    width: 100%;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.patrons_bold_font {
	font-weight: 600;
}
.patrons_thin_font {
	margin-top: -1rem;
	font-weight: 200;
}
.patrons_kba_block {
	margin-top: 2rem;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.patrons_kba_item {
    width: auto;
    height: inherit;
    display: flex;
    align-items: center;
}
.patrons_kba_text {
    width: auto;
    height: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* Patrons Section */

/* Breadcrumbs Section */
.breadcrumbs_container {
	width: 100%;
	min-height: auto;
	position: relative;
	background: #102330;
	border-bottom: solid 1px #C6C6C6;
	z-index: 100;
}
.breadcrumbs_content {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.breadcrumbs_content P {
	font-family: 'Manrope', Sans-Serif;
	font-size: 1.1rem;
	color: #fff;
}
.breadcrumbs_content P a:link,
.breadcrumbs_content P a:visited {
	color: #fff;
	text-decoration: underline;
}
/* Breadcrumbs Section */

/* Popup */
.popup_container {
	position: fixed;
	top: 0px;
	left: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10,10,10,.95);
	z-index: 2000;
	overflow: hidden; 
	width: 100%;
	height: 100Vh;
}
.pop_up_gradient {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100Vh;
	background: radial-gradient(circle at center, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.0) 65%);
}
.pop_up_content_bg {
	width: 90%;
	max-width: 500px;
	height: auto;
	background: #E6F2F3;
	border-radius: 12px;
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
	margin-top: -10rem;
}
.pop_up_content {
	width: 100%;
	height: auto;
}
.pop_up_header_bg {
	width: 100%;
	height: auto;
	position: relative;
	border-bottom: 1px solid #1A1A1A;
}
.pop_up_content_wrap {
	width: 90%;
	height: auto;
	margin: 0px auto;
}
.pup_up_header_content {
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.pup_up_header_content h3 {
    font-family: 'Neulis Sans', sans-serif;
    font-weight: 900;
    color: #00838e;
    font-size: 1.6rem;
    text-transform: uppercase;
	letter-spacing: 0;
}
.pop_up_body_bg {
	width: 100%;
	height: auto;
}
.pop_up_body_content {
	padding-bottom: 3rem;
	width: 100%;
	height: auto;
}
.inputs_container {
    width: 100%;
    height: auto;
}
.input_section_block {
    margin-top: 2rem;
}
.full_label_block {
    display: none;
    width: 100%;
    height: auto;
    font-family: 'Neulis Sans', sans-serif;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}
.full_input_block {
    font-family: 'Manrope', sans-serif;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 10px;
    padding-right: 5px;
    margin-top: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    border: 1px solid #696969 !important;
    border-radius: 0.5rem;
    font-size: 1.2rem;
	font-weight: 900;
    background-color: #f8f8f8;
    color: #1A1A1A;
    cursor: pointer;
    transition: box-shadow 0.25s ease;
}
.full_input_block:hover,
.full_input_block:focus,
.full_input_block:active {
    box-shadow: rgba(0, 131, 143, 1) 0px 0px 0px 2px;
    outline: none;
}
.compare_loading_state {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: center;
	margin: 10px 0 !important;
	padding: 10px 0 !important;
}
.compare_loading_state p,
.compare_loading_state > span:not(.compare_loading_spinner) {
	font-size: 1rem;
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: 10px;
}
.compare_loading_state p img,
.compare_loading_state .compare_loading_spinner {
	display: none;
}
.compare_loading_state p::before,
.compare_loading_state > span:not(.compare_loading_spinner)::before {
	content: '';
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.15);
	border-top-color: #00838f;
	animation: compareSpin 0.9s linear infinite;
}
@keyframes compareSpin {
	to {
		transform: rotate(360deg);
	}
}
/* Make input gets active border when popup is shown */
#make_a,
#make_b {
    box-shadow: rgba(0, 131, 143, 1) 0px 0px 0px 1px;
}
/* Remove Make border when Model input gets focus */
#model_a:focus ~ #make_a,
#model_a:focus + #make_a,
#model_b:focus ~ #make_b,
.compare_loading_state p {
	font-size: 1rem;
	line-height: 1.4;
}
.compare_loading_state p,
.compare_loading_state > span:not(.compare_loading_spinner) {
	display: flex;
	align-items: center;
	gap: 10px;
}
.compare_loading_state p img,
.compare_loading_state .compare_loading_spinner {
	display: none;
}
.compare_loading_state p::before,
.compare_loading_state > span:not(.compare_loading_spinner)::before {
	content: '';
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.15);
	border-top-color: #00838f;
	animation: compareSpin 0.9s linear infinite;
}
#model_b:focus + #make_b {
    box-shadow: none;
}
.add_vehicle_submit_container {
	margin-top: 2rem;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 1 auto;
}
.add_vehicle_submit_wrap {
	width: 100%;
    height: auto;
    margin: 0px auto;
}
.add_vehicle_submit {
	padding-left: 3rem;
	padding-right: 3rem;
	margin-top: 0rem;
    font-family: 'NeulisSans', sans-serif;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: .5rem;
    justify-content: center;
    padding-top: .75rem;
    padding-bottom: .75rem;
	width: 100%;
    height: auto;
    font-weight: 900;
    text-decoration: none;
    border-radius: 50vh;
    font-size: 1.333rem;
    color: #1A1A1A;
    border-radius: 50vh;
    letter-spacing: .05rem;
    text-transform: uppercase;
    box-shadow: rgba(0, 131, 143, 1) 0px 0px 0px 2px;
    background-color: #fff;
    position: relative;
	cursor: pointer;
}
.add_vehicle_submit::after {
    display: none;
}
.add_vehicle_submit:hover {
	box-shadow: rgba(0, 131, 143, 1) 0px 0px 0px 3px;
}

/* Add Another Vehicle Button */
.add_another_vehicle_container {
	margin-top: 2rem;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 1 auto;
	display: none;
}
.add_another_vehicle_container.show {
	display: flex;
}
.add_another_vehicle_wrap {
	width: 100%;
    height: auto;
    margin: 0px auto;
}
.add_another_vehicle_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: 100%;
    height: auto;
    min-height: 2.5rem;
    font-family: 'Neulis Sans', sans-serif;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.3rem;
    letter-spacing: 0.05rem;
    color: #1A1A1A;
    border-radius: 50vh;
    border: solid 2px #00838f;
    box-shadow: rgba(0, 131, 143, 0.2) 0px 0px 0px 1px;
	background-color: #f2f2f2;
    position: relative;
    cursor: pointer;
    transition: all 0.25s ease;
}
.add_another_vehicle_submit::after {
    display: none;
}
.add_another_vehicle_submit:hover {
	border-width: 3px;
	box-shadow: rgba(0, 131, 143, 0.3) 0px 2px 8px;
	background-color: #fff;
}
/* Add Another Vehicle Button */

/* Close Popup */
/* .popup_container[hidden] { display: none !important; } */
.popup_container.dev-popup-visible {
	display: flex !important;
	visibility: visible !important;
}

.close_pop_up_container {
  position: absolute;
  top: -40px;
  right: 0;
  z-index: 1;
  width: 40px;
  height: 40px;
 /* background: rgba(10,10,10,.95); */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Button that holds the SVG */
.close_btn_pop_up {
  display: flex;       
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* SVG X */
.close-x {
  width: 34px;
  height: 34px;
  display: block;
}
.close-x line {
  stroke: #fff;                 /* white lines */
  stroke-width: 1.5;
  stroke-linecap: round;
}
/* Hover feedback */
.close_btn_pop_up:hover  { opacity: .9; }
.close_btn_pop_up:active { opacity: .8; }
/* Close popup */
/* Popup */


/* Video Pop Up */
.heading-np {
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: right;
}

.video-pop-up-close {
	height: 40px;
	width: 40px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-left: auto;
	cursor: pointer;
	color: #fff;
}

.video-pop-up-close img {
	display: block;
	width: 25px;
	height: 25px;
}

.lb-page-overlay {
	position: fixed;
	top: 0;
	width: 100%;
	overflow: hidden;
	height: 100%;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.7);
	/* background-color: #1A1A1A; */
	display: none;
}

.lb-pop-up-message-wraper {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 100vh;
	z-index: 1001;
	display: none;
	/* pointer-events: none; */
	/* do not block events below modal */
}

.action-pop-up-container {
	width: 100%;
	margin: 0 auto;
	height: auto;
	background-color: rgb(255, 255, 255);
}

.pop-up-contents {
	float: left;
	display: block;
	width: 100%;
	height: auto;
	/*
background: rgb(255, 255, 255);
*/
}

#pop_up_content {
	float: left;
	width: 100%;
	height: auto;
}

.video-container {
	background: black;
	flex-basis: 79%;
	position: relative;
	flex-grow: 1;
	-moz-box-shadow: 0 0 5px rgb(0, 0, 0);
	-webkit-box-shadow: 0 0 5px rgb(0, 0, 0);
	box-shadow: 0 0 5px rgb(0, 0, 0);
}

#video_main_container,
#video_bottom_container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	z-index: 1000;
}

#video_frame_bg,
.video-aspect-placeholder {
	height: auto;
	padding-top: 56.25%;
	position: relative;
	width: 100%;
	background: black;
}

#video_XYposition {
	clear: both;
	position: absolute;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
}

#video_XYposition .track_ctrl_context_container {
	z-index: 101;
}

#video_XYposition {
	clear: both;
	position: absolute;
	z-index: 6;
}

#video_viewport {
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgb(0, 0, 0);
}

/** use for PC/Mobile view **/
#vehicle_html .fa-times-thin:before {
	font-weight: 200;
	text-shadow: -1px -1px 0px rgb(0, 0, 0);
	font-size: 1.2em;
	padding: 4px;
}

#vehicle_html .close-btn {
	position: absolute;
	cursor: pointer;
	color: rgb(255, 255, 255);
}

.track_ctrl_context_container {
	display: none !important;
}
/* Video Pop Up */