
	html {
	  font-size: 14px;
	  min-height: 100%;
	  position: relative;
/*	  overflow-x: hidden;*/
	}
	@media (min-width: 768px) {
	  html {
	    font-size: 16px;
	  }
	}
	.clear { clear: both; }

/* MAIN COLOURS
-------------------------------------------------- */

	:root {
		--body_bg_colour: #f2f2f2;
		--body_bg_colour_darker: #e6e6e6;
		--text_colour: #2b2a29;
		--text_colour_grey: #7A8289;

		--blue: #24325c; /* Keith Blue */

		--blue_semi_trans: #112e5161; /* Tilshead Blue Improved */
		--blue_slight_trans: #112e5161; /* Tilshead Blue Improved */
		--btn_colour: #24325c; /* Keith Blue */

		--header_blue: #1b487f;
		--header_blue_trans: #1b487fb0;

		--light_colour: #ccc; /* Mid Grey */
		--container_width: 1220px;

		/* Bootstrap overrides: */
		--bs-body-line-height: 1.7rem;
	}

	a { color: var(--blue); text-decoration: none; }
	a:hover { color: var(--blue); text-decoration: underline; }
	.text-primary { color: var(--blue) !important; }
	.text-danger { color: var(--btn_colour) !important; }
	.bg-blue { background-color: var(--blue); }
	.border-primary { border-color: var(--blue) !important; }



	body {
		color: var(--text_colour);
		background-color: var(--body_bg_colour);
		font-family: "Manrope", sans-serif;
	}

	p {
		margin-bottom: 1.2rem;
	}

	@media (min-width: 1400px) {
	  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
	    max-width: var(--container_width);
	  }
	}
	.container_medium {
		max-width: 1100px;
	}
	.container_narrow {
		max-width: 900px;
	}





/* SECTIONS
-------------------------------------------------- */

	section.white {
		background-color: white;
	}
	section.grey {
		background-color: var(--body_bg_colour_darker);
	}
	section.dark {
		background-color: #000000;
	}




/* FONTS
-------------------------------------------------- */
	.fs-6 { font-size: 0.9rem !important; }
	.fs_xl { font-size: 4rem !important; }


/* BUTTONS
-------------------------------------------------- */

	.btn { 
		font-family: "Manrope";
		border-radius: 2rem;
		font-weight: 400;
		padding-left: 1.7rem;
		padding-right: 1.7rem;
	}	
	.btn-primary, .badge-primary,
	.btn-secondary:not(:disabled):not(.disabled).active,
	.dropdown-item.active, .dropdown-item:active,
	.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
		background-color: var(--blue);
	}
	.btn-primary, .badge-primary, .btn-outline-primary {
		border-color: var(--blue);
	}
	/* HOVER COLOUR: */
	.btn-primary:hover {
		background-color: #004170;
		border-color: #004170;
	}
	.btn-outline-primary {
		color: var(--blue);
	}
	.btn-outline-primary:hover {
		background-color: var(--blue);
		border-color: var(--blue);
	}
	.btn-danger {
		background-color: var(--btn_colour);
	}
	.btn-lg { font-size: 1.4rem; }
	.nav-pills .nav-link.active, .nav-pills .show>.nav-link,
	.nav-pills .nav-link.active .fa, .nav-pills .show>.nav-link .fa {
		color: #ffffff;
	}






/* SITE HEADER
-------------------------------------------------- */
	.header_top {
		max-height: 120px;
	  background-color: var(--body_bg_colour);
	}
	.header_btm {
	  background-color: black;
	}


	/* Sticky wrapper */
	.site_header {
	  position: sticky;
	  top: 0;
	  z-index: 1030;
	}

	/* Smooth transition for shrink */
	.header_top,
	#header_contact_info,
	.header_contact_item,
	.logo {
	  transition: all 200ms ease;
	}



	/* Make sure the header has some padding */
	.header_top .container {
	  padding-top: 10px;
	  padding-bottom: 10px;
	}

	/* Your current logo size */
	.logo {
	  display: inline-block;
	  height: 68px;
	  width: auto;
	}

	/* ----- Scrolled state ----- */
	.site_header.is_scrolled .header_top .container {
	  padding-top: 4px;
	  padding-bottom: 4px;
	}

	/* shrink logo */
	.site_header.is_scrolled .logo {
	  height: 56px;
	  margin-bottom: 0 !important;
	}

	/* hide the contact line */
	.site_header.is_scrolled .header_contact_item {
		font-size: 0.8rem;
		line-height: 1.2rem;
/*	  max-height: 0;
	  opacity: 0;
	  overflow: hidden;
	  margin-top: 0 !important;
	  padding-top: 0;
	  padding-bottom: 0;*/
	}

	/* tighten the contact block a bit */
	.site_header.is_scrolled #header_contact_info {
	  margin-top: 0 !important;
	}

	@media screen and (max-width: 600px) {
		#header_contact_info { display: none; }
	}
	@media screen and (max-width: 576px) {
		.site_header.is_scrolled .header_top {
			max-height: 0;
			overflow: hidden;
		}

	  #header_top .logo {
	  	height: auto;
	    max-width: 160px;
	  }

	  #header_top .btn {
	    font-size: 0.8rem;
	    line-height: 1.2;
	    padding: 0.4rem 0.8rem;
	  }		
	}
	

/* MAIN NAVIGATION
-------------------------------------------------- */


	.navbar { padding: 0; }

	nav .navbar-nav a { font-size: 1.1rem; }
	nav .navbar-nav a.dropdown-item { font-size: 1rem; }


	@media screen and (min-width: 992px) {	

		.main_nav {
			margin-right: 10px;
		}
		.main_nav .dropdown-toggle::after {
			content: none;
		}
		.main_nav .fa {
			font-size: 20px;
			padding-top: 2px;
			color: #212529;
		}
		.dropdown-menu-center {
			min-width: 300px;
		}	

		.navbar-dark .navbar-nav .nav-link {
			color: white;
		}
		.navbar-dark .navbar-nav .nav-link,
		.navbar-dark .navbar-nav .dropdown-item {
		}
		.navbar-dark .navbar-nav .nav-link:hover,
		.dropdown-item:hover {
			text-decoration: none;
		}

		.dropdown .dropdown-menu { border-radius: 0; }
		.dropdown.advanced .dropdown-menu {
			margin-top: 0 !important;
			border-top: none;
			padding: 1rem;
			width: calc(var(--container_width) - 40px);

			border: none;
/*			border-radius: 0 0px 5px 5px;*/
			border-bottom: 1px solid var(--blue_semi_trans);
			border-left: 1px solid var(--blue_semi_trans);
			border-right: 1px solid var(--blue_semi_trans);

		  left: 0;
		  right: 0;
		  max-width: none;		
		}
		.dropdown.advanced {
		  position: unset;
		}
		.dropdown.advanced.dropdown-open {
		  background-color: white;
		  border: none;
		  border-bottom: none;
/*		  border-radius: 0.5rem 0.5rem 0 0;*/
		  z-index: 2; /* Ensure it's above the dropdown menu */
		}
		.dropdown.advanced.dropdown-open.no_featured_menu {
			position: relative;
		}

		.dropdown.dropdown-open a.nav-link,
		.navbar-dark .navbar-nav .dropdown.advanced.dropdown-open .nav-link:focus, 
		.navbar-dark .navbar-nav .dropdown.advanced.dropdown-open .nav-link:hover {
			color: var(--blue) !important;
		}
		.dropdown.advanced .dropdown-menu.show {
	/*	  transform: none !important; /* Disable Bootstrap's transform positioning */*/
	/*	  z-index: 1000;*/
		}
		.dropdown.advanced.no_featured_menu .dropdown-menu {
			left: -1px;
			max-width: 500px;
		}	
		.dropdown.advanced.no_featured_menu.last_two_parent_links .dropdown-menu {
			left: auto;
			right: -1px;
		}
		.dropdown-menu.fade-out {
		  display: block !important; /* Keep it visible during animation */
		  opacity: 0;
		  transition: opacity 0.3s ease;
		}	

		.dropdown-toggle::after { /* Caret position */
	    margin-left: .55em;
	    vertical-align: .155em;
	  }

	} /* // @media screen and (min-width: 992px) */

	/* Happens below 992: */
	.dropdown-menu.advanced {
		padding: 8px;
	}


  /* Make hamburger brighter than BS default: */
	.navbar-dark .navbar-toggler-icon {
	  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	}


	@media screen and (max-width: 768px) {
		
		/*		.dropdown-menu-centerXXX {
		  left: 50% !important;
		  transform: translateX(-48%) !important;
		  top: 100% !important;
		}*/

		/* Hide card links on small screens */
		.card_link_column {
			display: none;
		}
		.dropdown-menu.advanced {
			padding: 0;
			background-color: transparent;
			border: none;
			box-shadow: none;
			color: initial;
		}
		.dropdown-item {
			color: white;
		}


	}


/* BANNER CAROUSEL
-------------------------------------------------- */

	#heroCarousel .carousel-item img,
	#heroCarousel .carousel-item video {
	  height: 600px;
	  object-fit: cover;
	}

	#heroCarousel .carousel-caption {
		color: white !important;
	  left: 0;
	  right: 0;
	  padding-left: var(--bs-gutter-x, 1.5rem);  /* match Bootstrap container padding */
	  padding-right: var(--bs-gutter-x, 1.5rem);
	}
	#heroCarousel .carousel_caption_width {
		width: 40%;
	}
	/* Ensures the carousel arrows don't overlap the caption */
	#heroCarousel .carousel-control-prev,
	#heroCarousel .carousel-control-next {
	  width: 3rem; /* or 2rem if you want it tighter */
	}
	#heroCarousel .carousel-caption h5 {
		color: white;
		font-size: 2.5rem;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
	}
	#heroCarousel .carousel-caption p,
	#heroCarousel .carousel-caption a {
		font-size: 1.6rem;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
		margin-bottom: 0;
	}

	#heroCarousel .carousel-caption a {
		color: white;
		font-size: 1.2rem;
	}

	@media screen and (max-width: 900px) {
		#heroCarousel .carousel_caption_width {
			width: 50%;
		}
	}
	@media screen and (max-width: 600px) {
	  #heroCarousel .carousel-item {
	    height: auto;
	    aspect-ratio: 1.2 / 1;
	  }

	  #heroCarousel .carousel-item img,
	  #heroCarousel .carousel-item video {
	    height: 100%;
	    width: 100%;
	    object-fit: cover;
	  }
		#heroCarousel .carousel_caption_width {
			width: 75%;
		}	  
	}
	@media screen and (max-width: 400px) {
		#heroCarousel .carousel-caption h5 {
			line-height: 2.4rem;
			margin-bottom: 0.75rem;
		}
		#heroCarousel .carousel-caption p {
			line-height: 1.7rem;
		}
	}
	

/* HEADERS
-------------------------------------------------- */

	h1, .h1 {
		font-size: 2.6rem;
		margin-bottom: 1.5rem;
	}
	h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
		font-family: "Manrope", sans-serif;
		font-weight: 400;
	}
	h1, .h1 {
		color: black;
	}	
	h2, .h2, h3, .h3, h4, .h4 {
		color: var(--text_colour);
	}
	h2 { font-size: 2.0rem; margin-bottom: 1.8rem; }
	h3 { font-size: 1.8rem; font-weight: 500; }
	h4 { font-weight: 500; }
	h5 { font-weight: 700; color: var(--text_colour); }
	h6 { color: var(--text_colour_grey); }



/* HOMEPAGE CONTENT
-------------------------------------------------- */

	.logo_text a {
		text-transform: uppercase;
		color: #212529 !important;
		transition: all 0.2s;
		font-weight: bold;
	}
	.logo_text a:hover {
		text-decoration: none;
		text-shadow: 0px 0px 8px rgba(150, 150, 150, 0.5);
	}
	.btn-primary, .badge-primary {
		transition: all 0.2s;
		cursor: pointer;
	}
	.btn-primary:hover, .btn:hover {
		text-decoration: none;
	}
	.btn-white {
	  background-color: white;
	  color: black;
	  border: 1px solid #ccc;
	}
	.btn-white:hover {
	  background-color: #f8f9fa;
	}
	.btn-outline-white {
	  color: white !important;
	  border-color: white;
	}

	.btn-outline-white:hover {
	  background-color: white;
	  color: var(--text_colour) !important;
	  text-decoration: none;
	}

	a.btn-sm:hover {
		text-decoration: none !important;
	}
	.marketing .col-md {
	  margin-bottom: 1.5rem;
	  text-align: center;
	}
	.marketing h2 {
	  font-weight: 400;
	  margin-top: 1rem;
	}
	.marketing .col-md p {
	  margin-right: .75rem;
	  margin-left: .75rem;
	}



/* FORMS
-------------------------------------------------- */


	.form-label {
		font-family: "Manrope", sans-serif;
		font-weight: 300;
		font-size: 1.1rem	;
	}
	.form-control, .form-select {
		transition: background-color 0.2s;
		border-radius: 0;
		border-color: #cccccc;		
	}
	.form-control-plaintext {
		font-weight: 700;
		font-size: 1.2rem;
	}
	.form-control:focus, .form-select:focus {
		box-shadow: none;
		border-color: #696969;
	}
	.form-check-label, .form-check-input {
		cursor: pointer;
	}


	.search_form_section {
		height: 300px;
	}
	.dark_overlay {
	  position: relative;
	}
	.dark_overlay * { z-index: 2; }
	.dark_overlay::before {
	  content: "";
	  position: absolute;
	  inset: 0;              /* top:0; right:0; bottom:0; left:0 */
	  background: rgba(0,0,0,0.4); /* adjust darkness here */
	  z-index: 1;
	}


	.horizontal_search_form {
		width: 75%;
	}
	.horizontal_search_form .form-control,
	.horizontal_search_form .form-select, .horizontal_search_form button {
		width: 100%;
		height: 60px;
		border-radius: 0;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	.form-select.horizontal_search_form_first_select {
		border-top-left-radius: 0.5rem;
		border-bottom-left-radius: 0.5rem;
		border-radius: 0;
	}


	@media screen and (min-width: 930px) {
		.container_form {
			max-width: 900px;
		}
	}
	@media screen and (max-width: 930px) {
		.horizontal_search_form {
			width: 100%;
		}		
	}

	@media screen and (max-width: 768px) {

		.horizontal_search_form .form-control,
		.horizontal_search_form .form-select, .horizontal_search_form button {
			height: 32px;
		}

		.form-select.horizontal_search_form_first_select {
/*			border-top-left-radius: 0.5rem;
			border-top-right-radius: 0.5rem;
			border-bottom-left-radius: 0rem;
			border-bottom-right-radius: 0rem;*/
		}
		.horizontal_search_form button {
			border-top-right-radius: 0;
/*			border-bottom-left-radius: 0.5rem;
			border-bottom-right-radius: 0.5rem;*/
		}


	  .search_form_sub_buttons .btn {
	    font-size: 1.2rem;
	    padding: 0.45rem 0.7rem;
	    line-height: 1.2;
	  }

	  .search_form_sub_buttons {
	    gap: 0.5rem !important;
	  }


	}

	@media (max-width: 649px) {

	  #car_search_form {
/*	    flex-direction: column;*/
	  }

	  #car_search_form > .col {
	    width: 100%;
	    flex: 0 0 100%;
	  }

	  #car_search_form .form-select,
	  #car_search_form .btn {
	    width: 100%;
	  }

	}	




/* FULL BLEED COLUMNS
-------------------------------------------------- */

	.full_bleed_column .txt_col_inner {
		padding: 30px;
	}
	.full_bleed_column .txt_col {
		display: flex;
		align-items: center;
		min-height: 450px;
		padding-right: 30px;
		text-align: left;
	}
	.full_bleed_column .txt_col h2 {
	}
	.full_bleed_image_container {
		width: 50%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0vw;
	}
	.full_bleed_image_container.right_align {
		left: 50%;
	}
	.full_bleed_image {
		width: 100%;
		height: 100%;
		background-position: center center;
		background-size: cover;
	}
	.full_bleed_alt_img {
		display: none;
	}

	@media screen and (max-width: 576px) {
		.full_bleed_image_container {
			position: relative;
			width: 100%;
			height: 300px;
		}
		.full_bleed_image_container.right_align {
			left: auto;
		}
		.full_bleed_column .txt_col {
			min-height: 300px;
		}
	}

/* /FULL BLEED COLUMNS
-------------------------------------------------- */



/* ===================================================================================================== */
/* ====================================== POPUPS ======================================================= */
/* ===================================================================================================== */

	.popup_container {
		opacity: 0;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100vw;
	  height: 100vh;
	  background: rgba(0, 0, 0, 0.4); /* Semi-transparent background */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  z-index: 2000;
	  display: none;
	 	transition: opacity 0.3s ease-in-out;
	}
	.popup_container.show {
	  display: flex;
	  opacity: 1;
	}
	.popup {
	  width: 550px;
	  max-width: 80vw;
	  aspect-ratio: 1 / 1; /* Ensures it's always square */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  overflow: hidden; /* Prevents image overflow */
	  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);

	  transform: translateY(-20px);  /* Start slightly above */
	  opacity: 0;
	  transition: transform 0.5s ease-out, opacity 0.5s ease-out;  
	  cursor: pointer;
	}

	/* Make the image fill the div */
	.popup img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover; /* Ensures the image fills without distortion */
	}
	.popup_container.show .popup {
    transform: translateY(0); /* Move to normal position */
    opacity: 1;
	}
	.close_popup {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.5);
   	padding: 0.5rem;
	}


/* ===================================================================================================== */
/* ====================================== /POPUPS ====================================================== */
/* ===================================================================================================== */







/* ===================================================================================================== */
/* ====================================== CARDS & LISTINGS CARDS ======================================= */
/* ===================================================================================================== */

	.card {
		border-radius: 0px;
		overflow: hidden;
	}


	.right_hand_cards .card,
	.card_link_column .card {
		margin-bottom: 1rem;
		max-width: 90%;
		width: 280px;
		height: 360px;
		background-position: center center;
		background-size: cover;
		border: none;
	}
	.card_link_column .card {
		height: 300px;
	}
	.card_hover {
	  transition: box-shadow .2s ease, transform .2s ease;
	}
	.card_hover:hover {
	  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
	  transform: translateY(-2px);
	}	

	.card_img_wrap {
	  height: 200px;
	  overflow: hidden;
	}

	.card_img_wrap img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}

	.right_hand_cards .card h5,
	.card_link_column .card h5 {
		font-size: 1.8rem;
		font-weight: 500;
		color: white;
		margin-bottom: 0.5rem;
	}
	.right_hand_cards .card h6, .right_hand_cards .card p,
	.card_link_column .card h6, .card_link_column .card p {
		color: white;
		font-size: 1.3rem;
		font-weight: 400;
		margin-bottom: 1.1rem;
	}
	.card_link_column .card h5 { margin-bottom: 0.2rem; }
	.card_link_column .card p { font-size: 1.1rem; margin-bottom: 0.8rem; }
	.card p {
		font-weight: 300;
	}
	.card a { color: var(--text_colour); }

	@media screen and (max-width: 550px) {
		.card_img_wrap {
/*			height: 180px;*/
		}
	}




/* CARD SLIDER
-------------------------------------------------- */

	.card_carousel img {
		height: 170px;
		object-fit: cover;
	}
	.card_carousel .card-img-top { border-radius: 0; }
	.card_carousel .card {
		height: 360px;
		transition: all 0.2s;
	}
	.card_carousel .card:hover { border-color: #aaa; }
	.card_carousel .card-text {
		border-top: 1px solid #ccc;
	}
	.card_carousel h5 {
/*		color: var(--body_bg_colour_darker);*/
/*		font-size: 2rem;*/
/*		margin-top: 0rem;*/
/*		margin-bottom: 0rem;*/
	}
	.card_carousel h6 {
/*		color: var(--body_bg_colour_darker);*/
/*		font-size: 1.5rem;*/
/*		margin-top: 0.5rem;*/
/*		margin-bottom: 0.1rem;*/
	}
	.card_carousel a { }
	.card_carousel a:hover {
		text-decoration: none;
	}

	.card_carousel .carousel-control-prev-icon,
	.card_carousel .carousel-control-next-icon {
	  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
	}
	.card_carousel .carousel-control-next-icon {
	  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 16 16'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	}	
	.card_carousel .carousel-control-prev,
	.card_carousel .carousel-control-next {
	  width: 5%;
	}
	.card_carousel .carousel-control-prev {
	  left: -2.8rem;
	}
	.card_carousel .carousel-control-next {
	  right: -2.8rem;
	}	


/* ===================================================================================================== */
/* ====================================== /CARDS & LISTINGS CARDS ====================================== */
/* ===================================================================================================== */




/* GENERAL CONTENT
-------------------------------------------------- */

	/* ============== PARALLAX ================ */
	.parallax_img {
	  min-height: 500px;
	  background-position: center 50%;
	  background-repeat: no-repeat;
	  background-size: 120%;
	}


	/* ============== CALL TO ACTION ================ */
	.action_text * {
		text-align: center;
		font-size: 1.4rem;
		font-weight: 600;
	}
	.action_text p { color: var(--blue); margin-bottom: 0; }
	.action_text.action_alignment_1 p { text-align: center; }
	.action_text.action_alignment_2 p { text-align: left; }
	.action_text.action_alignment_3 p { text-align: right; }
	.action_text .btn {
		display: block;
		width: fit-content;
		margin: 20px auto 0;
		padding: .375rem .95rem;

	}

	.action_text.action_alignment_1 .btn { /* Center, default */ }
	.action_text.action_alignment_2 .btn { margin: 20px auto 0 0; }
	.action_text.action_alignment_3 .btn { margin: 20px 0 0 auto; }


	.dark .action_text p { color: white; }


/* /GENERAL CONTENT
-------------------------------------------------- */



/* LISTINGS
-------------------------------------------------- */

	.page-link {
		color: var(--blue);
	} 
	.page-link:hover {
		color: var(--blue);
		text-decoration: none;
	}
	.page-item.active .page-link {
		background-color: var(--blue);
		border-color: var(--blue);
	}


/* /LISTINGS
-------------------------------------------------- */







/* ===================================================================================================== */
/* ============================================= CAR PROFILE =========================================== */
/* ===================================================================================================== */

	.car_price_header {
		font-weight: 700;
	}
	.car_profile_h2 {
		font-size: 1.5rem;
	}

	/* CAR IMAGE GALLERY
	-------------------------------------------------- */

	#car_main_image_container {
		height: 480px;
	}
	.caravan_main_image {
		object-fit: cover;
	}

	.img_overlay {
		position: absolute;
		left: 0;
		top: 0;
		background-color: #e41b23;
		color: #fff;
		text-align: center;
		font-size: 22px;
		font-weight: bold;	
		box-sizing: border-box;
	}

	.img_overlay_corner {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 0;
	  height: 0;
	  border-top: 120px solid var(--blue);       /* triangle height */
	  border-right: 120px solid transparent; /* triangle width */
	}
	.img_overlay_corner span {
	  position: absolute;
	  top: -100px;     /* adjust if you change triangle size */
	  left: 7px;
	  transform: rotate(-45deg);
	  color: #fff;
	  font-weight: bold;
	  font-size: 28px;
	  white-space: nowrap;
	}
	.img_overlay_corner.more_text span {
		font-size: 18px;
		text-align: center;
		line-height: 22px;
		top: -99px;
		left: 5px;
	}
	.card .img_overlay_corner {
	  border-top: 100px solid var(--blue);       /* triangle height */
	  border-right: 100px solid transparent; /* triangle width */
	}
	.card .img_overlay_corner span {
		font-size: 22px;
		top: -82px;
		left: 5px;
	}

	.image_caption {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 40px;
		background-color: var(--header_blue_trans);
		color: white;
		font-weight: 600;
  	display: flex;
  	align-items: center;      /* vertical */
  	justify-content: center;  /* horizontal */		
	}

	.thumbnail-carousel {
	  white-space: nowrap;
	  scroll-behavior: smooth;
	  overflow-x: auto;
	  -ms-overflow-style: none; /* IE/Edge */
	  scrollbar-width: none;    /* Firefox */  
	}
	.thumbnail-carousel::-webkit-scrollbar {
	  height: 6px;
	  display: none;
	}
	.thumbnail-carousel::-webkit-scrollbar-thumb {
	  background-color: #ccc;
	}


	/* Override Bootstrap img-thumbnail: */
	.img-thumbnail {
		border-radius: 0;
		padding: 0;
		cursor: pointer;
		width: 100px;
		height: 80px;
		object-fit: cover;
		flex-shrink: 0;
	}
	.thumbnail-carousel img.active-thumb {
	  border: 1px solid white;
	  opacity: 1;
	  transition: all 0.2s ease-in-out;
	}

	.thumbnail-carousel img {
	  opacity: 0.9;
	  transition: all 0.2s ease-in-out;
	  border: 1px solid #ccc;
	}

	.caravan_gallery_arrow {
		height: calc(100% - 2px);
		width: 30px;
		background: none;
		border: none;
		color: var(--light_colour);
		opacity: 0.8;
	}
	.btn.caravan_gallery_arrow { border-radius: 0; }
	.btn.caravan_gallery_arrow:hover { 
		background-color: var(--text_colour);
		color: var(--light_colour);
	}
	.caravan_gallery_arrow.left_arrow {
		left: 0px;
	}	
	.caravan_gallery_arrow.right_arrow {
		right: 0px;
	}

	@media screen and (max-width: 992px) {
		.caravan_gallery_arrow.left_arrow {
			left: 0px;
		}	
		.caravan_gallery_arrow.right_arrow {
			right: 0px;
		}
	}

	@media screen and (max-width: 550px) {
		#car_main_image_container {
			height: 320px;
		}		
	}	
	@media screen and (max-width: 380px) {
		#car_main_image_container {
			height: 250px;
		}		
	}

	/* /CAR IMAGE GALLERY
	-------------------------------------------------- */


	.view_pdf_button { width: 25%; }

	@media screen and (max-width: 768px) {

		.view_pdf_button { width: 100%; }

		.car_profile_table .second_row td {
			font-size: 0.8rem;
			padding: 0;
		}


	}


	.accordion-button {
	  color: var(--text_colour);
	  font-weight: 700;
	}
	.accordion-button:not(.collapsed), .accordion-button:focus {
	  box-shadow: none;
	  outline: none;
	  background-color: transparent;
	}




	.youtube_container {
		height: 240px;
	}

	.bg_as_striped_table, .bg_muted {
	  background-color: rgba(0, 0, 0, 0.05);
	}
	.calcform {
		width: 100%;
	}
	.form-select.mini_white {
		border: 0;
		font-size: 0.9rem;
		padding: .275rem 1.25rem .275rem .55rem;
	}



/* ===================================================================================================== */
/* ============================================= /CAR PROFILE ========================================== */
/* ===================================================================================================== */






/* ===================================================================================================== */
/* ============================================= GALLERY SLIDER ======================================== */
/* ===================================================================================================== */


	.gallery_slick_container {
		height: 180px;
	}
	.gallery_slick_container.large {
    height: 600px;
	}
	.slick-slider .slick-track, .slick-slider .slick-list {
	    height: 100%;
	}	
	.gal_img_outer {
		background: white;
		cursor: pointer;
		overflow: visible;
		outline: none;
		position: relative;
		xpadding: 10px;
		margin: 0 20px 0;
	}
	.gal_img {
		box-sizing: border-box;
		height: 152px;
		border: 14px solid white;
		margin: 5px 0 0;
		
		
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}
	.gal_img:hover {
		cursor: pointer;
		
	}		
	.gal_img.whitebox {
		padding: 0;
	}
	.gal_img_main {
		background-size: cover;
		background-repeat: no-repeat;
	}

	.skoda_brand .gallery_slick_container .btn, .skoda_brand .gallery_slick_container button {
	    color: #bbb;
	    background-color: #fff;
	    border-radius: 4px;
	}
	.gallery_slick_container .slick-prev:before,
	.gallery_slick_container .slick-next:before {
		color: #7f7f7f;
	}


	@media screen and (max-width: 1300px) {
		.gal_img_outer {
			margin: 0 10px 0;
		}
	}
	@media screen and (max-width: 650px) {
		.gallery_slick_container {
			height: 130px;
			margin: 0 20px 0;
		}
		.gallery_slick_container.large {
	    height: 300px;
		}		
	}


/* ===================================================================================================== */
/* ============================================= /GALLERY SLIDER ======================================= */
/* ===================================================================================================== */





/* ===================================================================================================== */
/* ============================================= FLEX IMAGE GRID ======================================= */
/* ===================================================================================================== */


	.image_grid_container {
	}
	.image_grid_container img {
  	aspect-ratio: 4 / 2.2;
  	object-fit: cover;		
	}

	@media screen and (max-width: 1300px) {

	}
	@media screen and (max-width: 650px) {
	
	}


/* ===================================================================================================== */
/* ============================================= /FLEX IMAGE GRID ====================================== */
/* ===================================================================================================== */





/* Footer styles
-------------------------------------------------- */

	footer {
	  background-color: var(--blue);
	  color: #fff;
	}
	footer a, footer .nav-link,
	footer a:hover, footer .nav-link:hover { color: #fff; }

	@media screen and (max-width: 990px) {

	}
	@media screen and (max-width: 400px) {

	}

	@media screen and (max-width: 576px) {
		footer * {
			text-align: center;
		}
	}


/* Widget overrides */
.elfsight-app-93df9a99-f945-40c7-8039-e94c7135b926 .es-embed-root,
.elfsight-app-e78422a4-c181-45bd-96cd-7f6cc61f684b .es-embed-root,
.es-embed-root[class^="eapps-form-builder"],
.es-embed-root[class*=" eapps-form-builder"] {
	margin: 0 auto 0 0 !important;
}
