/*
 ======================================================================================================
 
	@VERSION			: 1.1.3
	@CREATED			: 14 OCT 2021
	@MODIFIED			: 21 JUL 2023
    @DESIGNER			: Daniel C. K. Tan (danielcktan[at]gmail.com)
	@DESIGNER URI		: <https://www.danielcktan.design>

	@FILE				: ~/css/template.css
	@TYPE				: Style Sheet
	@DESCRIPTION		: Default Stylesheet for CMS Template
	
 ======================================================================================================
 
	CONTENT
	------------------------------------------------------------------------------------------------------
	#00 VARIABLES STYLES
	#01 BASE STYLES
	#02 LAYOUT STYLES 
	#03 SITE COMPONENTS STYLES 
	#04 UI COMPONENT STYLES 
	#05 HELPER STYLES 
	#06 CMS STYLES  
 
  ======================================================================================================
*/

/* ----------------------------------------------------------------------------------------------------
   #00 VARIABLES STYLES 
/* ----------------------------------------------------------------------------------------------------*/
:root{
	scrollbar-color: rgba(0, 0, 0, .2);
	scrollbar-width: thin; 
	
	/* COLOURS */
	--base-col-indigo			: #283593;
	--base-col-purple-deep		: #5e35b1;
	--base-col-purple			: #9c27b0;
	--base-col-purple-light		: #ce93d8;
	--base-col-lavender			: #b39ddb;
	--base-col-magenta			: #ff00ff;
	--base-col-pink-light		: #f8bbd0;
	--base-col-pink 			: #f06292;
	--base-col-pink-deep 		: #ad1457;
	--base-col-red-deep			: #b71c1c;
	--base-col-red 				: #ff0000;
	--base-col-orange-deep	 	: #ff5722;
	--base-col-orange 			: #ff9800;
	--base-col-amber 			: #ffc107;
	--base-col-yellow 			: #ffeb3b;
	--base-col-yellow-light		: #fff59d;
	--base-col-lime				: #cddc39;
	--base-col-green-light		: #8bc34a;
	--base-col-green			: #43a047;
	--base-col-green-deep		: #1b5e20;
	--base-col-teal-deep 		: #00838f;
	--base-col-teal 			: #00bcd4;
	--base-col-cyan 			: #18ffff;
	--base-col-blue-light		: #81d4fa;
	--base-col-blue 			: #2196f3;
	--base-col-blue-deep		: #1565c0;

	--base-col-brown-light		: #a1887f;
	--base-col-brown 			: #795548;
	--base-col-brown-deep		: #4e342e;
	--base-col-white 			: #ffffff;
	--base-col-black 			: #000000;
	--base-col-grey-deep		: #333333;
	--base-col-grey 			: var(--base-col-grey-500);
	
	--base-col-grey-50			: #eceff1;
	--base-col-grey-100			: #f5f5f5;
	--base-col-grey-200			: #eeeeee;
	--base-col-grey-300			: #e0e0e0;
	--base-col-grey-400			: #bdbdbd;
	--base-col-grey-500			: #9e9e9e;
	--base-col-grey-600			: #757575;
	--base-col-grey-700			: #616161;
	--base-col-grey-800			: #424242;
	--base-col-grey-900			: #212121;
	--base-col-grey-cool 		: #607d8b;
	--base-col-grey-warm 		: #8c7d70;
	
	/* COLOURS (BACKGROUND) */
	--base-bkg-indigo			: background-color: var(--base-col-indigo);
	--base-bkg-purple-deep		: background-color: var(--base-col-purple-deep);
	--base-bkg-purple			: background-color: var(--base-col-purple);
	--base-bkg-purple-light		: background-color: var(--base-col-purple-light);
	--base-bkg-lavender			: background-color: var(--base-col-lavender);
	--base-bkg-magenta			: background-color: var(--base-col-magenta);
	--base-bkg-pink-light		: background-color: var(--base-col-pink-light);
	--base-bkg-pink 			: background-color: var(--base-col-pink);
	--base-bkg-pink-deep 		: background-color: var(--base-col-pink-deep);
	--base-bkg-red-deep			: background-color: var(--base-col-red-deep	);
	--base-bkg-red 				: background-color: var(--base-col-red);
	--base-bkg-orange-deep	 	: background-color: var(--base-col-orange-deep);
	--base-bkg-orange 			: background-color: var(--base-col-orange);
	--base-bkg-amber 			: background-color: var(--base-col-amber);
	--base-bkg-yellow 			: background-color: var(--base-col-yellow);
	--base-bkg-yellow-light		: background-color: var(--base-col-yellow-light);
	--base-bkg-lime				: background-color: var(--base-col-lime);
	--base-bkg-green-light		: background-color: var(--base-col-green-light);
	--base-bkg-green			: background-color: var(--base-col-green);
	--base-bkg-green-deep		: background-color: var(--base-col-green-deep);
	--base-bkg-teal-deep 		: background-color: var(--base-col-teal-deep);
	--base-bkg-teal 			: background-color: var(--base-col-teal);
	--base-bkg-cyan 			: background-color: var(--base-col-cyan);
	--base-bkg-blue-light		: background-color: var(--base-col-blue-light);
	--base-bkg-blue 			: background-color: var(--base-col-blue);
	--base-bkg-blue-deep		: background-color: var(--base-col-blue-deep);

	--base-bkg-brown-light		: background-color: var(--base-col-brown-light	);
	--base-bkg-brown 			: background-color: var(--base-col-brown);
	--base-bkg-brown-deep		: background-color: var(--base-col-brown-deep);
	--base-bkg-white 			: background-color: var(--base-col-white);
	--base-bkg-black 			: background-color: var(--base-col-black);
	--base-bkg-grey-deep		: background-color: var(--base-col-grey-deep);
	--base-bkg-grey 			: background-color: var(--base-col-grey-500);
	
	--base-bkg-grey-50			: background-color: var(--base-col-grey-50);
	--base-bkg-grey-100			: background-color: var(--base-col-grey-100);
	--base-bkg-grey-200			: background-color: var(--base-col-grey-200);
	--base-bkg-grey-300			: background-color: var(--base-col-grey-300);
	--base-bkg-grey-400			: background-color: var(--base-col-grey-400);
	--base-bkg-grey-500			: background-color: var(--base-col-grey-500);
	--base-bkg-grey-600			: background-color: var(--base-col-grey-600);
	--base-bkg-grey-700			: background-color: var(--base-col-grey-700);
	--base-bkg-grey-800			: background-color: var(--base-col-grey-800);
	--base-bkg-grey-900			: background-color: var(--base-col-grey-900);
	--base-bkg-grey-cool 		: background-color: var(--base-col-grey-cool);
	--base-bkg-grey-warm 		: background-color: var(--base-col-grey-warm);
	
	/* COLOURS (TEXT) */
	--base-fnt-indigo			: color: var(--base-col-indigo);
	--base-fnt-purple-deep		: color: var(--base-col-purple-deep);
	--base-fnt-purple			: color: var(--base-col-purple);
	--base-fnt-purple-light		: color: var(--base-col-purple-light);
	--base-fnt-lavender			: color: var(--base-col-lavender);
	--base-fnt-magenta			: color: var(--base-col-magenta);
	--base-fnt-pink-light		: color: var(--base-col-pink-light);
	--base-fnt-pink 			: color: var(--base-col-pink);
	--base-fnt-pink-deep 		: color: var(--base-col-pink-deep);
	--base-fnt-red-deep			: color: var(--base-col-red-deep	);
	--base-fnt-red 				: color: var(--base-col-red);
	--base-fnt-orange-deep	 	: color: var(--base-col-orange-deep);
	--base-fnt-orange 			: color: var(--base-col-orange);
	--base-fnt-amber 			: color: var(--base-col-amber);
	--base-fnt-yellow 			: color: var(--base-col-yellow);
	--base-fnt-yellow-light		: color: var(--base-col-yellow-light);
	--base-fnt-lime				: color: var(--base-col-lime);
	--base-fnt-green-light		: color: var(--base-col-green-light);
	--base-fnt-green			: color: var(--base-col-green);
	--base-fnt-green-deep		: color: var(--base-col-green-deep);
	--base-fnt-teal-deep 		: color: var(--base-col-teal-deep);
	--base-fnt-teal 			: color: var(--base-col-teal);
	--base-fnt-cyan 			: color: var(--base-col-cyan);
	--base-fnt-blue-light		: color: var(--base-col-blue-light);
	--base-fnt-blue 			: color: var(--base-col-blue);
	--base-fnt-blue-deep		: color: var(--base-col-blue-deep);

	--base-fnt-brown-light		: color: var(--base-col-brown-light	);
	--base-fnt-brown 			: color: var(--base-col-brown);
	--base-fnt-brown-deep		: color: var(--base-col-brown-deep);
	--base-fnt-white 			: color: var(--base-col-white);
	--base-fnt-black 			: color: var(--base-col-black);
	--base-fnt-grey-deep		: color: var(--base-col-grey-deep);
	--base-fnt-grey 			: color: var(--base-col-grey-500);
	
	--base-fnt-grey-50			: color: var(--base-col-grey-50);
	--base-fnt-grey-100			: color: var(--base-col-grey-100);
	--base-fnt-grey-200			: color: var(--base-col-grey-200);
	--base-fnt-grey-300			: color: var(--base-col-grey-300);
	--base-fnt-grey-400			: color: var(--base-col-grey-400);
	--base-fnt-grey-500			: color: var(--base-col-grey-500);
	--base-fnt-grey-600			: color: var(--base-col-grey-600);
	--base-fnt-grey-700			: color: var(--base-col-grey-700);
	--base-fnt-grey-800			: color: var(--base-col-grey-800);
	--base-fnt-grey-900			: color: var(--base-col-grey-900);
	--base-fnt-grey-cool 		: color: var(--base-col-grey-cool);
	--base-fnt-grey-warm 		: color: var(--base-col-grey-warm);
	
	/* SHADOWS */
	--base-shd-none				: 0 1px 2px 0 rgba(0,0,0,.07);
	--base-shd-xs  				: 0 1px 3px 0 rgba(0,0,0,.07),0 1px 2px 0 rgba(0,0,0,.05);
	--base-shd-sm  				: 0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -1px rgba(0,0,0,.05);
	--base-shd-md  				: 0 10px 15px -3px rgba(0,0,0,.07),0 4px 6px -2px rgba(0,0,0,.05);
	--base-shd-lg  				: 0 20px 25px -5px rgba(0,0,0,.07),0 10px 10px -5px rgba(0,0,0,.05);
	--base-shd-xl  				: 0 25px 50px -12px rgba(0,0,0,.21);
	
	/* ROUNDED CORNER RADIUS */
	--base-rnd-none				: 0;
	--base-rnd-xs  				: .25rem;
	--base-rnd-sm  				: .375rem;
	--base-rnd-md  				: .5rem;
	--base-rnd-lg  				: .75rem;
	--base-rnd-xl  				: 1.25rem;
	--base-rnd-circle			: 50%; 
	
	/* TRANSITIONS */
	--base-trs-xs				: all .2s ease-in-out;
	--base-trs-sm				: all .4s ease-in-out;
	--base-trs-md				: all .6s ease-in-out;
	--base-trs-lg				: all .8s ease-in-out;
	--base-trs-xl				: all 1s ease-in-out;
	
	/* OPACITY */
	--base-opc-none				: 0;
	--base-opc-5  				: .05;
	--base-opc-10 				: .1;
	--base-opc-15 				: .15;
	--base-opc-20 				: .2;
	--base-opc-30 				: .3;
	--base-opc-40 				: .4;
	--base-opc-60 				: .6;
	--base-opc-70 				: .7;
	--base-opc-80 				: .8;
	--base-opc-90 				: .9;
	
	/* FONT SIZE */
	--base-fnt-size-h1  		: 2.75rem;
	--base-fnt-size-h2  		: 2.25rem;
	--base-fnt-size-h3  		: 2rem;
	--base-fnt-size-h4  		: 1.75rem;
	--base-fnt-size-h5  		: 1.5rem;
	--base-fnt-size-h6  		: 1.25rem;
	--base-fnt-size-body		: 0.95rem;
	--base-fnt-size-xs  		: 0.65rem;
	--base-fnt-size-sm  		: 0.75rem;
	--base-fnt-size-md  		: 0.8rem;
	--base-fnt-size-lg  		: 1.35rem;
	--base-fnt-size-xl  		: 1.65rem;
}


/* ----------------------------------------------------------------------------------------------------
   #01 BASE STYLES 
/* ----------------------------------------------------------------------------------------------------*/

/* Viewport Styles
/* ----------------------------------------------------------------------------------------------------*/
@-ms-viewport { width: device-width; max-zoom: 1; min-zoom: 1; user-zoom: fixed; }
@-o-viewport  { width: device-width; max-zoom: 1; min-zoom: 1; user-zoom: fixed; }
@viewport     { width: device-width; max-zoom: 1; min-zoom: 1; user-zoom: fixed; }


/* Scrollbar Styles
/* ----------------------------------------------------------------------------------------------------*/
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background-color: transparent; }
::-webkit-scrollbar-thumb { background: rgba(170, 170, 170, 1); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(119, 119, 119, 1); }

.customScrollBar, body, textarea, iframe { scrollbar-width: thin; scrollbar-color: rgba(170, 170, 170, 1) transparent; }
.customScrollBar:hover, body:hover, textarea:hover, iframe:hover { scrollbar-color: rgba(119, 119, 119, 1) transparent; }


/* Document Styles
/* ----------------------------------------------------------------------------------------------------*/
html { font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300))); line-height: 1.4; scroll-behavior: smooth; }
html, body { width: 100%; height: 100%; }
@media screen and (max-width: 992px) { body { overflow-x: hidden; } }

body {    
	margin-top: 0; /* allocation for menu */
	padding-top: 0;			   
	position: relative; /* Required for ScrollSpy */
	overflow: overlay;
	overflow-x: hidden; /*  Prevent Horizontal Sweeping in iOS */
	text-rendering: optimizelegibility; 
	text-size-adjust: 100%; 
	scrollbar-width: thin;
    -webkit-tap-highlight-color: rgba(255,255,255,.2);	
	-webkit-font-smoothing: antialiased;
    transition: font-size .8s ease-in-out;		
}


/* Headings Styles
/* ----------------------------------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: inherit; font-weight: 600; color: inherit; text-transform: uppercase; }


/* Image Styles
/* ----------------------------------------------------------------------------------------------------*/
img { margin: 0; padding: 0; display: inline-block; position: relative; zoom: 1; }
img.left  { float: left;  margin: 0 10px 5px 0; }
img.right { float: right; margin: 0 0 5px 10px; }
.img-fluid, img-responsive { max-width: 100%; width:100%; height: auto; }


/* Image Caption Styles
/* ----------------------------------------------------------------------------------------------------*/
.figure-caption { background-color: #f2f2f2; border-left: 5px solid #ff6600; color: #767676; font-size: 0.8em; line-height: 1.4285714286 !important; text-align: left; padding: 10px; min-height: 45px; }
.figure-caption .credits { color: #969696; display: block; font-size: 0.85em; margin-top: 10px; }


/* Paragraph Styles
/* ----------------------------------------------------------------------------------------------------*/
p { margin-top: 0; margin-bottom: 1rem; line-height: 1.6; text-align: justify; }	


/* List Styles
/* ----------------------------------------------------------------------------------------------------*/
ol li, ul li { font-size: var(--base-fnt-size-body); margin-bottom: 1rem; margin-left: 1rem; padding-left: 0.8rem; }
ol li ol li, ul li ul li { font-size: 0.9em; margin-top: 0.8rem; margin-bottom: 0.8rem; margin-left: 0.8rem; padding-left: 0.8rem; }

/* Reset margins for nav-links and list */
.list-group-item { margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; }
.nav-item { margin-top: 0.3rem !important; margin-bottom: 0.3rem !important; margin-left: 0 !important; padding-left: 0 !important; }
.nav-item .dropdown-item,
.nav-item .dropdown-item:hover { background-color: transparent; }


/* Table Styles
/* ----------------------------------------------------------------------------------------------------*/
table, .table { border-collapse: collapse; margin-bottom: 20px; width: 100% !important; }

table th { text-align: left; text-transform: uppercase; }
table th.text-center { text-align: center !important; }
table tr.text-center { text-align: center !important; }
table td.text-center { text-align: center !important; }
table td { word-wrap: break-word; }

.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-bg: #f9f9f9;
  --bs-table-active-bg: #f5f5f5;
  --bs-table-hover-bg: #ffffcc;
}

.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--bs-table-striped-bg); }
.table-hover tr:hover { background-color: var(--bs-table-hover-bg) !important; }
.table-fixed { table-layout: fixed !important; }

.table-responsive .table, 
.table-responsive-xs .table, .table-responsive-sm .table, .table-responsive-md .table, 
.table-responsive-lg .table, .table-responsive-xl .table, .table-responsive-xxl .table,
.card .table, 
.card .table-responsive .table,
.card .table-responsive-xs .table, .card .table-responsive-sm .table, .card .table-responsive-md .table, 
.card .table-responsive-lg .table, .card .table-responsive-xl .table, .card .table-responsive-xxl .table { margin-bottom: 0; }



/* ----------------------------------------------------------------------------------------------------
   #02 LAYOUT STYLES 
/* ----------------------------------------------------------------------------------------------------*/

/* Grid Smooth Animated Effect Styles
/* ----------------------------------------------------------------------------------------------------*/
[class="container"], [class="row"], [class="col"], [class^="col-"], #mainNav, .sidebar { transition: all .6s ease-in-out; }


/* Grid Column Bottom Margin Styles
/* ----------------------------------------------------------------------------------------------------*/
[class|="col"] { margin-bottom: 1.5rem !important; }


/* BS CSS Grid Styles
/* ----------------------------------------------------------------------------------------------------*/
.grid { display: grid; gap: var(--bs-gap, 1.5rem); grid-template-columns: repeat(var(--bs-columns, 12), 1fr); grid-template-rows: repeat(var(--bs-rows, 1), 1fr); }
.grid .g-col-1 { grid-column: auto/span 1; }
.grid .g-col-2 { grid-column: auto/span 2; }
.grid .g-col-3 { grid-column: auto/span 3; }
.grid .g-col-4 { grid-column: auto/span 4; }
.grid .g-col-5 { grid-column: auto/span 5; }
.grid .g-col-6 { grid-column: auto/span 6; }
.grid .g-col-7 { grid-column: auto/span 7; }
.grid .g-col-8 { grid-column: auto/span 8; }
.grid .g-col-9 { grid-column: auto/span 9; }
.grid .g-col-10 { grid-column: auto/span 10; }
.grid .g-col-11 { grid-column: auto/span 11; }
.grid .g-col-12 { grid-column: auto/span 12; }
.grid .g-start-1 { grid-column-start: 1; }
.grid .g-start-2 { grid-column-start: 2; }
.grid .g-start-3 { grid-column-start: 3; }
.grid .g-start-4 { grid-column-start: 4; }
.grid .g-start-5 { grid-column-start: 5; }
.grid .g-start-6 { grid-column-start: 6; }
.grid .g-start-7 { grid-column-start: 7; }
.grid .g-start-8 { grid-column-start: 8; }
.grid .g-start-9 { grid-column-start: 9; }
.grid .g-start-10 { grid-column-start: 10; }
.grid .g-start-11 { grid-column-start: 11; }
@media (min-width: 576px) { 
	.grid .g-col-sm-1 { grid-column: auto/span 1; }
	.grid .g-col-sm-2 { grid-column: auto/span 2; }
	.grid .g-col-sm-3 { grid-column: auto/span 3; }
	.grid .g-col-sm-4 { grid-column: auto/span 4; }
	.grid .g-col-sm-5 { grid-column: auto/span 5; }
	.grid .g-col-sm-6 { grid-column: auto/span 6; }
	.grid .g-col-sm-7 { grid-column: auto/span 7; }
	.grid .g-col-sm-8 { grid-column: auto/span 8; }
	.grid .g-col-sm-9 { grid-column: auto/span 9; }
	.grid .g-col-sm-10 { grid-column: auto/span 10; }
	.grid .g-col-sm-11 { grid-column: auto/span 11; }
	.grid .g-col-sm-12 { grid-column: auto/span 12; }
	.grid .g-start-sm-1 { grid-column-start: 1; }
	.grid .g-start-sm-2 { grid-column-start: 2; }
	.grid .g-start-sm-3 { grid-column-start: 3; }
	.grid .g-start-sm-4 { grid-column-start: 4; }
	.grid .g-start-sm-5 { grid-column-start: 5; }
	.grid .g-start-sm-6 { grid-column-start: 6; }
	.grid .g-start-sm-7 { grid-column-start: 7; }
	.grid .g-start-sm-8 { grid-column-start: 8; }
	.grid .g-start-sm-9 { grid-column-start: 9; }
	.grid .g-start-sm-10 { grid-column-start: 10; }
	.grid .g-start-sm-11 { grid-column-start: 11; }
}
@media (min-width: 768px) {
 	.grid .g-col-md-1 { grid-column: auto/span 1; }
	.grid .g-col-md-2 { grid-column: auto/span 2; }
	.grid .g-col-md-3 { grid-column: auto/span 3; }
	.grid .g-col-md-4 { grid-column: auto/span 4; }
	.grid .g-col-md-5 { grid-column: auto/span 5; }
	.grid .g-col-md-6 { grid-column: auto/span 6; }
	.grid .g-col-md-7 { grid-column: auto/span 7; }
	.grid .g-col-md-8 { grid-column: auto/span 8; }
	.grid .g-col-md-9 { grid-column: auto/span 9; }
	.grid .g-col-md-10 { grid-column: auto/span 10; }
	.grid .g-col-md-11 { grid-column: auto/span 11; }
	.grid .g-col-md-12 { grid-column: auto/span 12; }
	.grid .g-start-md-1 { grid-column-start: 1; }
	.grid .g-start-md-2 { grid-column-start: 2; }
	.grid .g-start-md-3 { grid-column-start: 3; }
	.grid .g-start-md-4 { grid-column-start: 4; }
	.grid .g-start-md-5 { grid-column-start: 5; }
	.grid .g-start-md-6 { grid-column-start: 6; }
	.grid .g-start-md-7 { grid-column-start: 7; }
	.grid .g-start-md-8 { grid-column-start: 8; }
	.grid .g-start-md-9 { grid-column-start: 9; }
	.grid .g-start-md-10 { grid-column-start: 10; }
	.grid .g-start-md-11 { grid-column-start: 11; }
}
@media (min-width: 992px) {
 	.grid .g-col-lg-1 { grid-column: auto/span 1; }
	.grid .g-col-lg-2 { grid-column: auto/span 2; }
	.grid .g-col-lg-3 { grid-column: auto/span 3; }
	.grid .g-col-lg-4 { grid-column: auto/span 4; }
	.grid .g-col-lg-5 { grid-column: auto/span 5; }
	.grid .g-col-lg-6 { grid-column: auto/span 6; }
	.grid .g-col-lg-7 { grid-column: auto/span 7; }
	.grid .g-col-lg-8 { grid-column: auto/span 8; }
	.grid .g-col-lg-9 { grid-column: auto/span 9; }
	.grid .g-col-lg-10 { grid-column: auto/span 10; }
	.grid .g-col-lg-11 { grid-column: auto/span 11; }
	.grid .g-col-lg-12 { grid-column: auto/span 12; }
	.grid .g-start-lg-1 { grid-column-start: 1; }
	.grid .g-start-lg-2 { grid-column-start: 2; }
	.grid .g-start-lg-3 { grid-column-start: 3; }
	.grid .g-start-lg-4 { grid-column-start: 4; }
	.grid .g-start-lg-5 { grid-column-start: 5; }
	.grid .g-start-lg-6 { grid-column-start: 6; }
	.grid .g-start-lg-7 { grid-column-start: 7; }
	.grid .g-start-lg-8 { grid-column-start: 8; }
	.grid .g-start-lg-9 { grid-column-start: 9; }
	.grid .g-start-lg-10 { grid-column-start: 10; }
	.grid .g-start-lg-11 { grid-column-start: 11; }
}
@media (min-width: 1200px) {
 	.grid .g-col-xl-1 { grid-column: auto/span 1; }
	.grid .g-col-xl-2 { grid-column: auto/span 2; }
	.grid .g-col-xl-3 { grid-column: auto/span 3; }
	.grid .g-col-xl-4 { grid-column: auto/span 4; }
	.grid .g-col-xl-5 { grid-column: auto/span 5; }
	.grid .g-col-xl-6 { grid-column: auto/span 6; }
	.grid .g-col-xl-7 { grid-column: auto/span 7; }
	.grid .g-col-xl-8 { grid-column: auto/span 8; }
	.grid .g-col-xl-9 { grid-column: auto/span 9; }
	.grid .g-col-xl-10 { grid-column: auto/span 10; }
	.grid .g-col-xl-11 { grid-column: auto/span 11; }
	.grid .g-col-xl-12 { grid-column: auto/span 12; }
	.grid .g-start-xl-1 { grid-column-start: 1; }
	.grid .g-start-xl-2 { grid-column-start: 2; }
	.grid .g-start-xl-3 { grid-column-start: 3; }
	.grid .g-start-xl-4 { grid-column-start: 4; }
	.grid .g-start-xl-5 { grid-column-start: 5; }
	.grid .g-start-xl-6 { grid-column-start: 6; }
	.grid .g-start-xl-7 { grid-column-start: 7; }
	.grid .g-start-xl-8 { grid-column-start: 8; }
	.grid .g-start-xl-9 { grid-column-start: 9; }
	.grid .g-start-xl-10 { grid-column-start: 10; }
	.grid .g-start-xl-11 { grid-column-start: 11; }
}
@media (min-width: 1400px) {
 	.grid .g-col-xxl-1 { grid-column: auto/span 1; }
	.grid .g-col-xxl-2 { grid-column: auto/span 2; }
	.grid .g-col-xxl-3 { grid-column: auto/span 3; }
	.grid .g-col-xxl-4 { grid-column: auto/span 4; }
	.grid .g-col-xxl-5 { grid-column: auto/span 5; }
	.grid .g-col-xxl-6 { grid-column: auto/span 6; }
	.grid .g-col-xxl-7 { grid-column: auto/span 7; }
	.grid .g-col-xxl-8 { grid-column: auto/span 8; }
	.grid .g-col-xxl-9 { grid-column: auto/span 9; }
	.grid .g-col-xxl-10 { grid-column: auto/span 10; }
	.grid .g-col-xxl-11 { grid-column: auto/span 11; }
	.grid .g-col-xxl-12 { grid-column: auto/span 12; }
	.grid .g-start-xxl-1 { grid-column-start: 1; }
	.grid .g-start-xxl-2 { grid-column-start: 2; }
	.grid .g-start-xxl-3 { grid-column-start: 3; }
	.grid .g-start-xxl-4 { grid-column-start: 4; }
	.grid .g-start-xxl-5 { grid-column-start: 5; }
	.grid .g-start-xxl-6 { grid-column-start: 6; }
	.grid .g-start-xxl-7 { grid-column-start: 7; }
	.grid .g-start-xxl-8 { grid-column-start: 8; }
	.grid .g-start-xxl-9 { grid-column-start: 9; }
	.grid .g-start-xxl-10 { grid-column-start: 10; }
	.grid .g-start-xxl-11 { grid-column-start: 11; }
}



/* ----------------------------------------------------------------------------------------------------
   #03 SITE COMPONENT STYLES 
/* ----------------------------------------------------------------------------------------------------*/

/* Announcement Bar Styles
/* ----------------------------------------------------------------------------------------------------*/
#announcement-bar { width: 100%; transition: all .2s ease-in-out; }
#announcement-bar .alert { margin-bottom: 0; }
#announcement-bar .alert div[class^="col-"] { margin-bottom: 0 !important; }			

.alert-container { display: flex; line-height: 1.5; }
.alert-icon { display: flex; opacity: 0.9; padding: 0; font-size: 22px; margin-right: 12px; }						
.alert-message { padding: 0; }


/* Global Navbar Styles
/* ----------------------------------------------------------------------------------------------------*/
#globalNav .nav-item { margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-left: 0 !important; }
#globalNav .nav-link { text-transform: uppercase; font-size: 0.75rem; font-weight: 400; padding: 0rem 0.5rem; transition: all .2s ease-in-out; }
#globalNav .navbar-toggler-globalnav { background-color: transparent; border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color); border-radius: var(--bs-navbar-toggler-border-radius); transition: var(--bs-navbar-toggler-transition); border-color: #fff; color: #fff; font-size: 90%; padding: 0.5rem; }
#globalNav .navbar-toggler-globalnav:focus,
#globalNav .navbar-toggler-globalnav:active { outline: none !important; box-shadow: none; }

@media (min-width: 1200px) {
	#globalNav .navbar-toggler-globalnav { display: none; }
}

@media (max-width: 1199px) {
	#globalNav .nav-item { padding-top: .5rem !important; padding-bottom: .5rem !important; }
	#globalNav .nav-item .nav-link { font-size: 1.2rem; }
}


/* Main Navbar Styles
/* ----------------------------------------------------------------------------------------------------*/
#mainNav { border-bottom: none; margin-top: 0; padding-top: 0; padding-bottom: 0; transition: all .2s ease-in-out; }

#mainNav .navbar-collapse.show { padding-top: 0; padding-bottom: 0; transition: all .2s ease-in-out; }

#mainNav .navbar-toggler { border-color: #fff; color: #fff; font-size: 90%; padding: 0.75rem; }
#mainNav .navbar-toggler:focus,
#mainNav .navbar-toggler:active { outline: none !important; box-shadow: none; }

#mainNav .navbar-brand { padding: 0.5rem 0; color: #fff; }
#mainNav .navbar-brand img { max-height: 70px; height: 70px; transition: all .2s ease-in-out; }

#mainNav .nav-item { margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-left: 0 !important; }

#mainNav .nav-link { color: #fff; text-transform: uppercase; font-size: 0.9rem; font-weight: 700; padding: 1.8rem 1rem; transition: all .2s ease-in-out; }
#mainNav .nav-link:hover,  
#mainNav .nav-link:active,
#mainNav .nav-link:visited { color: #fff; }

#mainNav.navbar-scrolled { border-bottom: none; box-shadow: 0 3px 10px 0 rgba(0, 0 ,0 , 0.3); margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
#mainNav.navbar-scrolled .navbar-brand { color: #fff; }

#mainNav.navbar-scrolled .nav-link { color: #fff; font-size: 0.9rem; padding: 0.9rem 1rem; }  
#mainNav.navbar-scrolled .nav-link:hover,
#mainNav.navbar-scrolled .nav-link:active,
#mainNav.navbar-scrolled .nav-link:visited { color: #fff; }
#mainNav.navbar-scrolled .nav-link:hover,
#mainNav.navbar-scrolled .nav-link.active { outline: none; }

@media (min-width: 1200px) {
	#mainNav .dropdown-menu,
	#mainNav .dropdown-menu .dropdown-menu	{ border: none; border-radius: 0px 0px 5px 5px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); animation-name: fadeIn; animation-duration: 0.4s; animation-fill-mode: both; }
	#mainNav .dropdown-menu .dropdown-item.active,
	#mainNav .dropdown-menu .dropdown-menu .dropdown-item.active, 
	#mainNav .dropdown-menu .dropdown-item:active,
	#mainNav .dropdown-menu .dropdown-menu .dropdown-item:active { color: #FF6600; font-weight: 700; }
	
	.dropdown-menu[data-bs-popper] { margin-top: 0; }
}

@media (max-width: 1199px) {
	.navbar-expand-xl .navbar-nav .dropdown .dropdown-menu { background-color: transparent; border: 0; }
	.navbar-expand-xl .navbar-nav .dropdown .dropdown-menu.show { background-color: transparent; border: 0; animation-name: fadeIn; animation-duration: 0.4s; animation-fill-mode: both; }
	
	#mainNav { padding-top: 0.8em !important; padding-bottom: 0.8em !important; }
	#mainNav.navbar-scrolled { padding-top: 0.5em !important; padding-bottom: 0.5em !important;  }	
	#mainNav .navbar-brand img { max-height: 50px; height: 50px; transition: all .2s ease-in-out; }
	#mainNav .navbar-collapse .navbar-nav .nav-link { color: #fff; font-size: 1.2rem; padding: 0.5rem 0; transition: none; }
	#mainNav .dropdown-menu li { padding-top: .2rem !important; padding-bottom: .2rem !important; }
	#mainNav .dropdown-menu li .dropdown-item { font-size: 1rem; padding-left: 0.6rem; }
}

/* Submenu Style */
#mainNav .dropdown-menu li {
	font-size: 0.85em;
	margin-top: 0.2rem;
	margin-bottom: 0.2rem;
	margin-left: 0;
	padding-left: 0;
}

/* Support Multiple Levels */
.dropdown-menu .dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .155em;
    content: "";
    border-top: .3em solid transparent;
    border-right: 0;
    border-bottom: .3em solid transparent;
    border-left: .3em solid;
}

/* Show Submenu onHover on Desktop
/* https://stackoverflow.com/a/18024991 */
@media (min-width: 1200px) {
	.dropdown-menu { position: relative; }
	.dropdown-menu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; }
	.navbar-nav li:hover > ul.dropdown-menu { display: block; }
}


/* Navbar Downdown Menu FadeIn Animation (Desktop) */
@keyframes fadeIn {
	0% { opacity: 0; }	
	100% { opacity: 1; }		
}


/* Section General Styles
/* ----------------------------------------------------------------------------------------------------*/
section { width: 100%; padding-top: calc(6rem + 50px); padding-bottom: calc(6rem + 50px); }

@media (min-width: 992px) {
  section { padding-top: calc(6rem + 80px); padding-bottom: calc(6rem + 80px); }
}

section.list-articles,
section.map { padding-top: 0; padding-bottom: 0; }


/* Breadcrumbs Styles
/* ----------------------------------------------------------------------------------------------------*/
.breadcrumbs,
.breadcrumbs ol.breadcrumb { background-color: #f5f5f5; flex-wrap: unset; white-space: nowrap; }

.breadcrumbs ol.breadcrumb li.breadcrumb-item {
	font-size: 0.95em;
	margin-top: 0.8rem !important;
	margin-bottom: 0.8rem !important;
	margin-left: 0.2rem;
	padding-left: 0 !important;
}

.breadcrumbs ol.breadcrumb li.breadcrumb-item .fa-home { width: 1.5em; }
@media (max-width: 620px) { 
	.breadcrumbs ol.breadcrumb li.breadcrumb-item .fa-home { width: .5em; }
}

.breadcrumb-item+.breadcrumb-item::before { color: #bbb; font-family: bootstrap-icons !important; content: "\F285"; line-height: 1.6; }
.breadcrumb-item+.breadcrumb-item:nth-child(2)::before { content: ""; }

.breadcrumbs ol.breadcrumb li.breadcrumb-item a,
.breadcrumbs ol.breadcrumb li.breadcrumb-item a:active,
.breadcrumbs ol.breadcrumb li.breadcrumb-item a:visited,
.breadcrumbs ol.breadcrumb li.breadcrumb-item a:hover { color: #666; text-decoration: none; }
.breadcrumbs ol.breadcrumb li.breadcrumb-item.active { color: #FF6600; font-weight: bold; margin-left: 0.6rem; }

/* Truncate Breadcrumbs */
.breadcrumbs ol.breadcrumb > li:not(:first-child):not(:last-child) { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 620px) { 
	.breadcrumbs ol.breadcrumb > li:not(:first-child):not(:last-child){ visibility: hidden; width: 0; padding: 0; }
	.breadcrumbs ol.breadcrumb > li:last-child:before { content: var(--bs-breadcrumb-divider, "/ ... /"); }
	.breadcrumbs ol.breadcrumb > li:last-child { overflow: hidden; text-overflow: ellipsis; }
}


/* Homepage Hero Styles
/* ----------------------------------------------------------------------------------------------------*/
.hero { padding-top: 0; padding-bottom: 0; width: 100%; }
.hero-background-overlay { background-repeat: no-repeat; background-attachment: scroll; background-position: center, center; background-size: cover; width: 100%; height: 85vh; }
.hero-background-overlay .hero-text-overlay { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: left; }
@media screen and (max-height: 992px) {
  .hero-background-overlay { background-position: left, center;}
}


/* Carousel Styles (Homepage Slideshow)
/* ----------------------------------------------------------------------------------------------------*/
#carousel-homepage .carousel-indicators { padding: .2rem 0; background: rgba(255,255,255,.1); border-radius: 1.25rem; box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 8px; margin-right: 45%; margin-left: 45%; }

@media screen and (max-width : 992px) {
	#carousel-homepage .carousel-indicators { padding: 0; margin-right: 35%; margin-left: 35%; }
}

#carousel-homepage .carousel-indicators [data-bs-target] { width: .5rem; height: .5rem; background-color:#fff !important; border-radius: 50%; margin-right: 0.5rem; margin-left: 0.5rem; position: relative; }

#carousel-homepage .carousel-indicators [data-bs-target]:focus-within { width: .5rem; height: .5rem; border-radius: 50%; outline:none; }
#carousel-homepage .carousel-indicators .active { background-color:#ff6600 !important; transform: scale(1.5); }

#carousel-homepage .carousel-indicators [data-bs-target]:hover { transform: scale(1.5); }
#carousel-homepage .carousel-indicators .active:hover { transform: scale(1.5); }

#carousel-homepage .carousel-control-prev { background-image: linear-gradient(to right,rgba(0,0,0,.15) 0,rgba(0,0,0,.0001) 100%); background-repeat: repeat-x; }
#carousel-homepage .carousel-control-next { background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.15) 100%); background-repeat: repeat-x; }

#carousel-homepage .carousel-control-prev-icon,
#carousel-homepage .carousel-control-next-icon {  }

#carousel-homepage .carousel-control-prev,
#carousel-homepage .carousel-control-next { opacity: 0; }

#carousel-homepage:hover .carousel-control-prev,
#carousel-homepage:hover .carousel-control-next { opacity: 1; }

#carousel-homepage:hover .carousel-control-prev { animation: FadeInPrev 0.3s linear; }
#carousel-homepage:hover .carousel-control-next { animation: FadeInNext 0.3s linear; }

@keyframes FadeInPrev {
    0% { padding-left: 60px; }
    100% { padding-left: 0px; }
}

@keyframes FadeInNext {
    0% { padding-right: 60px; }
    100% { padding-right: 0px; }
}

@keyframes FadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
 }


/* Main Styles
/* ----------------------------------------------------------------------------------------------------*/
main { width: 100%; padding-top: 0; padding-bottom: 0; }


/* Page Header Styles
/* ----------------------------------------------------------------------------------------------------*/
.page-header {
	margin-bottom: 50px;
	padding-top: calc(50px + 1.5rem);
	padding-bottom: calc(50px + 1.5rem);
	width: 100%;
	min-height: 220px;
	position: relative;
}

.page-header [class|="col"] { margin-bottom: 0 !important; }


/* Pager Styles
/* ----------------------------------------------------------------------------------------------------*/
.pagenavigation { width: 100%; padding-top: calc(3rem + 5px); padding-bottom: calc(3rem + 5px); }


/* Sidebar and Sidebar Navbar Styles
/* ----------------------------------------------------------------------------------------------------*/
.sidebar-left.card,
.sidebar-right.card {}

.sidebar-left.card .card-header,
.sidebar-right.card .card-header  { font-size: 1.1rem; text-transform: capitalize; }

.sidebar-left.card .card-body,
.sidebar-right.card .card-body  { padding: 0.3rem 0.3rem; }

.sidebar-left.card .card-body .nav .nav-item .nav-link,
.sidebar-right.card .card-body .nav .nav-item .nav-link,
.sidebar-left.no-card .nav .nav-item .nav-link,
.sidebar-right.no-card .nav .nav-item .nav-link { color: inherit; padding: .2rem 1rem; }

.sidebar-left.card .card-body .nav .nav-item .nav-link.active,
.sidebar-right.card .card-body .nav .nav-item .nav-link.active,
.sidebar-left.no-card .nav .nav-item .nav-link.active,
.sidebar-right.no-card .nav .nav-item .nav-link.active  { color: #ff5722; font-weight: bold; }

.sidebar-left.no-card,
.sidebar-right.no-card {}

.sidebar-left.no-card h3,
.sidebar-right.no-card h3 { border-bottom: 1px solid #ddd; font-size: 1.1rem; text-transform: capitalize;  padding: 0.8rem 0.5rem; }


/* Footer Styles
/* ----------------------------------------------------------------------------------------------------*/
footer { background-color: var(--bs-gray-500); color: #666; font-size: 95%; padding: 5rem 0 1rem; }


/* Masthead Styles
/* ----------------------------------------------------------------------------------------------------
.masthead { background-color: var(--bs-gray-300); color: #666; width: 100%; } */


/* Preloader Styles
/* ----------------------------------------------------------------------------------------------------*/
#preloader {
	background: #0079c4;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	overflow: hidden;
	opacity: 0.9;
}

#preloader:before {
	content: "";
	position: fixed;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	border: 6px solid #0079c4;
	border-top-color: #fff;
	border-bottom-color: #fff;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	-webkit-animation: animate-preloader 1s linear infinite;
	animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes animate-preloader {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/* Scroll Progress Bar Styles
/* ----------------------------------------------------------------------------------------------------*/
/* Fixed position (always stay at the bottom of mainNav) */
.scroll-progress { position: absolute; bottom: -3px; z-index: 999; width: 100%; background-color: transparent; }

/* The progress bar container */
.page-scroll-progress { width: 100%; height: 3px; background-color: transparent; }

/* The progress bar (scroll indicator) */
.page-scroll-progress-bar { height: 3px; background: #32c728; width: 0%; } 


/* Back to Top
/* ----------------------------------------------------------------------------------------------------*/
#toTop {
	background: #0099ff;
	cursor:pointer;
	display:none;
	color:#fff;
	font-size: 1.4em;
	text-align:center;
	text-transform: capitalize;
	padding: 1px 5px;
	width: 40px;
	height: 40px;
	position:fixed;
	bottom:15px;
	right:15px;
	z-index: 10;
	transition: background 0.5s;
	-webkit-border-radius: 50px !important;
	   -moz-border-radius: 50px !important;
		    border-radius: 50px !important;
}
#toTop i { font-weight: 800; padding: 0; padding-top: 8px; }



/* ----------------------------------------------------------------------------------------------------
   #04 UI COMPONENT STYLES 
/* ----------------------------------------------------------------------------------------------------*/

/* Default HR Styles
/* ----------------------------------------------------------------------------------------------------*/
hr { border-top: 1.5px solid #444; margin-top: 1rem !important; margin-bottom: 3rem !important; }


/* Blockquote Styles
/* ----------------------------------------------------------------------------------------------------*/
blockquote { border-left: 5px solid #e0e0e0; padding: 0.5rem 1rem; }
blockquote p { font-size: 1.25rem; margin-bottom: 0.5rem !important; }
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child { margin-bottom: 0; }
blockquote .blockquote-footer { display: block; font-size: 0.85rem; line-height: 1.42857143; color: #909090;; margin-top: 0.5rem; }
blockquote .blockquote-footer:before { content: '\2014 \00A0'; }

blockquote.blockquote-quoted { font-family: 'Open Sans' serif; font-size: 1.25em; line-height: 1.5em; padding-left: 20px; position: relative;  }
blockquote.blockquote-quoted .blockquote-footer { font-family: 'Open Sans', sans-serif !important; font-size: 0.85em; font-weight: 300; color: #bbb; float: right; }
blockquote.blockquote-quoted .blockquote-footer:before { content: '\2015'; }
blockquote.blockquote-quoted:after { content: '\201D'; position: absolute; top: 0.28em; right: 0; font-size: 6em; font-style: italic; color: #eee; z-index: -1; }


/* Bootstrap Alert Styles (v5.1.1)
/* ----------------------------------------------------------------------------------------------------*/
.alert h4 { font-size: 1.25rem; }
.alert p:last-child,
.alert ul:last-child,
.alert ol:last-child { margin-bottom: 0; }

.alert-primary { background-color: #cfe2ff; border-color: #b6d4fe; color: #084298; }
.alert-primary h4 { color: #084298 }
.alert-primary .alert-link { color: #084298; }

.alert-secondary { background-color: #e2e3e5; border-color: #d3d6d8; color: #444444; }
.alert-secondary h4 { color: #444444 }
.alert-secondary .alert-link { color: #444444; }

.alert-success { background-color:  #dff0d8; border-color:  #d6e9c6; color: #468847; }
.alert-success h4 { color: #468847 }
.alert-success .alert-link { color: #468847; }

.alert-info { background-color: #d9edf7; border-color: #bce8f1; color: #3a87ad }
.alert-info h4 { color: #3a87ad }
.alert-info .alert-link { color: #3a87ad; }

.alert-warning { background-color: #fff3cd; border-color: #ffecb5; color: #c09853; }
.alert-warning h4 { color: #c09853 }
.alert-warning .alert-link { color: #c09853; }

.alert-danger { background-color: #f2dede; border-color: #eed3d7; color: #b94a48; }
.alert-danger h4 { color: #b94a48; }
.alert-danger .alert-link { color: #b94a48; }

.alert-light { background-color: #f0f0f0; border-color: #d8d8d8; color: #999999; }
.alert-light h4 { color: #999999 }
.alert-light .alert-link { color: #999999; }

.alert-dark { background-color: #777777; border-color: #444444;  color: #ffffff;}
.alert-dark h4 { color: #ffffff }
.alert-dark .alert-link { color: #ffffff; }


/* Bootstrap Callout Styles (v3.4.1)
/* ----------------------------------------------------------------------------------------------------*/
.note { padding: 20px; margin: 20px 0; border: 0; border-left: 5px solid; border-radius: 5px; }
.note + .note { margin-top: -5px; }
.note h4 { margin-top: 0; margin-bottom: 5px; }
.note p { font-weight:500 }
.note strong { font-weight:600 }
.note p:last-child { margin-bottom: 0; }

.note-primary { background-color: #cfe2ff; border-color: #084298; color: #084298; }
.note-primary h4 { color: #084298 }
.note-primary .note-link { color: #084298; }

.note-secondary { background-color: #e2e3e5; border-color: #555555; color: #444444; }
.note-secondary h4 { color: #444444 }
.note-secondary .note-link { color: #444444; }

.note-success { background-color:  #dff0d8; border-color:  #468847; color: #468847; }
.note-success h4 { color: #468847 }
.note-success .note-link { color: #0c4128; }

.note-info { background-color: #d9edf7; border-color: #3a87ad; color: #3a87ad }
.note-info h4 { color: #3a87ad }
.note-info .note-link { color: #04414d; }

.note-warning { background-color: #fff3cd; border-color: #ffc107; color: #c09853; }
.note-warning h4 { color: #c09853 }
.note-warning .note-link { color: #523e02; }

.note-danger { background-color: #f2dede; border-color: #b94a48; color: #b94a48 }
.note-danger h4 { color: #b94a48 }
.note-danger .note-link { color: #6a1a21; }

.note-light { background-color: #f0f0f0; border-color: #d8d8d8; color: #999999; }
.note-light h4 { color: #999999 }
.note-light .note-link { color: #999999; }

.note-dark { background-color: #777777; border-color: #444444;  color: #ffffff;}
.note-dark h4 { color: #ffffff }
.note-dark .note-link { color: #ffffff; }


/* Bootstrap Button Colours (v3.4.1)
/* ----------------------------------------------------------------------------------------------------*/
/*
.btn-primary { color: #fff !important; background-color: #337ab7; border-color: #337ab7; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { color: #fff !important; background-color: #286090; border-color: #286090; }
.btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; }
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus { color: #fff; background-color: #5a6268; border-color: #545b62; }
.btn-success { color: #fff !important; background-color: #669933; border-color: #669933; }
.btn-success:hover, .btn-success:active, .btn-success:focus { color: #fff !important; background-color: #57832C; border-color: #57832C; }
.btn-info { color:#fff !important; background-color: #5bc0de; border-color: #5bc0de; }
.btn-info:hover, .btn-info:active, .btn-info:focus { color:#fff !important; background-color: #31b0d5; border-color: #31b0d5; }
.btn-warning { color:#fff !important; background-color: #f0ad4e; border-color: #f0ad4e; }
.btn-warning:hover, .btn-warning:active, .btn-warning:focus { color:#fff !important; background-color: #ec971f; border-color: #ec971f; }
.btn-danger { color:#fff !important; background-color: #d9534f; border-color: #d9534f; }
.btn-danger:hover, .btn-danger:active, .btn-danger:focus { color:#fff !important; background-color: #c9302c; border-color: #c9302c; }
.btn-light { ccolor: #333333; background-color: #e2e6ea; border-color: #e2e6ea;  }
.btn-light:hover, .btn-light:active, .btn-light:focus { color: #333333; background-color: #dfe0e1; border-color: #dfe0e1; }
.btn-dark { color: #fff; background-color: #343a40; border-color: #343a40; }
.btn-dark:hover, .btn-dark:active, .btn-dark:focus { color: #fff; background-color: #23272b; border-color: #1d2124; }
*/

.btn-circle.btn-sm { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; }
.btn-circle, .btn-circle.btn-md { width: 50px; height: 50px; padding: 10px 5px; font-size: 20px; line-height: 1.33; border-radius: 25px; }
.btn-circle.btn-lg { width: 70px; height: 70px; padding: 10px 5px; font-size: 32px; line-height: 1.4; border-radius: 35px; }


/* Styled Video Embed
/* ----------------------------------------------------------------------------------------------------*/
.card .video-container { -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); -webkit-transform: rotate(0.000001deg); -webkit-border-radius: 0.375rem; -moz-border-radius: 0.375rem; border-radius: 0.375rem; overflow: hidden; display: inline-flex; }


/* Pager Styles
/* ----------------------------------------------------------------------------------------------------*/
.pagenavigation, .pager { clear: both; }
.pager { padding-left: 0; margin: 20px 0; text-align: center; list-style: none; }
.pager li { display: inline; }
.pager li>a, .pager li>span { background-color: #fff; border: 1px solid #ddd; border-radius: .375rem; display: inline-block; padding: 5px 15px; }
.pager .previous>a, .pager .previous>span { float: left; }
.pager .next>a, .pager .next>span { float: right; }
.pager li>a { text-decoration: none; }
.pager li>a:focus, .pager li>a:hover { text-decoration: none; background-color: #eee; }


/* Accordion Styles
/* ----------------------------------------------------------------------------------------------------*/
.accordion .accordion-item { border: 0; box-shadow: 0px 0 5px rgba(0, 0, 0, 0.25); }
.accordion .accordion-item + .accordion-item { margin-top: 1em; }

.accordion .accordion-item .accordion-header { background-color: #efefef; border-bottom: 0 !important; }

.accordion .accordion-item .accordion-header,
.accordion .accordion-item h2.accordion-header,
.accordion .accordion-item h3.accordion-header,
.accordion .accordion-item h5.accordion-header { font-size: 1.15em; position: relative; }

.accordion-button, .accordion-button.collapsed { background-color: transparent; color: #333; text-decoration: none !important; }
.accordion-button:not(.collapsed) { color: #333; background-color: transparent; }

.accordion .accordion-item .accordion-header a.accordion-button,
.accordion .accordion-item h2.accordion-header a.accordion-button,
.accordion .accordion-item h3.accordion-header a.accordion-button,
.accordion .accordion-item h5.accordion-header a.accordion-button { color: #555; font-weight: bold; text-align: left; text-transform: none; }

.accordion .accordion-item .accordion-header a.accordion-button.collapsed,
.accordion .accordion-item h2.accordion-header a.accordion-button.collapsed,
.accordion .accordion-item h3.accordion-header a.accordion-button.collapsed,
.accordion .accordion-item h5.accordion-header a.accordion-button.collapsed { color: #555; text-decoration: none !important; text-transform: none; }

.accordion .accordion-item .accordion-header a.accordion-button.collapsed:not(.collapsed),
.accordion .accordion-item h2.accordion-header a.accordion-button.collapsed:not(.collapsed),
.accordion .accordion-item h3.accordion-header a.accordion-button.collapsed:not(.collapsed),
.accordion .accordion-item h5.accordion-header a.accordion-button.collapsed:not(.collapsed) { background-color: #e7f1ff; color: #555; text-decoration: none !important; }

/* Accordion Default Chevon Icon */
.accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
.accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }

/* Accordion Plus Minus Icon */
.accordion-plus .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23666' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
transform: scale(.7) !important; }
.accordion-plus .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23666' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");}

.accordion .accordion-item .accordion-body, .accordion .accordion-item .accordion-body p { color: #333; font-size: .95rem; line-height: 30px; }
.accordion .accordion-item .collapse.show { background: #fff; }


/* Tab Styles
/* ----------------------------------------------------------------------------------------------------*/
.nav-tabs .nav-item { padding-left: 0.5rem; margin-bottom: 0 !important; }
.nav-tabs .nav-link { background-color: #eee; border-color: #eee; color: #444; }
.nav-tabs .nav-link.active, 
.nav-tabs .nav-link.active:focus, 
.nav-tabs .nav-link.active:hover { background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; border-top: 3px solid #ff6600; color: #444; }
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { background-color: #ddd; border-color: #ddd; }

.tab-content { background: #fff; line-height: 25px; color:#333; border-radius:0; transition:background 0.20s linear; padding-top: 20px; padding-bottom: 30px; padding-left: 1rem; padding-right: 1rem; }

/* Responsive Tabs */
.responsive-tabs { padding: 1rem; }
.responsive-tabs .nav-tabs { display: none; }

@media (min-width: 1200px) {
	.responsive-tabs .nav-tabs { display: flex; }
	.responsive-tabs .accordion { border: none; } 
	.responsive-tabs .accordion .accordion-header { display: none; }
	.responsive-tabs .accordion .collapse { display: block; }
}
@media (max-width: 992px) {
	.responsive-tabs .tab-pane { display: block !important; opacity: 1; }
}


/* Custom Form Styles
/* ----------------------------------------------------------------------------------------------------*/
.form-control, .form-select { color: #888; background: #fff; font-weight: 400; padding: 6px 12px; border-radius: 5px; border: 2px solid #e7e7e7; box-shadow: 0 0 5px #efefef; }
.form-control:focus, .form-select:focus { box-shadow: 0 0 10px #dcdcdc; }
.btn-block { display: block; width: 100%; }



/* ----------------------------------------------------------------------------------------------------
   #05 HELPER STYLES 
/* ----------------------------------------------------------------------------------------------------*/
/* Ripple Click Effect Styles
/* https://github.com/mladenplavsic/css-ripple-effect
/* ----------------------------------------------------------------------------------------------------*/
.ripple { position: relative; overflow: hidden; transform: translate3d(0, 0, 0); }
.ripple:after { content: ""; display: block; position: absolute; width: 100%; height: 120%; top: 0; left: 0; pointer-events: none; background-image: radial-gradient(circle, #fff 10%, transparent 10%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform .5s, opacity 1s; }
.ripple:active:after { transform: scale(0, 0); opacity: .2; transition: 0s; }


/* Mask Effect Styles
/* ----------------------------------------------------------------------------------------------------*/
.mask-container { position: relative; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: 50%; }
.mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background-attachment: fixed; }
.mask.mask-dark { background-color: rgba(0, 0, 0, 0.6); }


/* Hover Overlay Styles
/* ----------------------------------------------------------------------------------------------------*/
.hover-overlay .mask { opacity: 0; transition: all .3s ease-in-out; }
.hover-overlay .mask:hover { opacity: 1; }
.hover-overlay .mask.mask-overlay { background-color: rgba(57, 192, 237, 0.2); }


/* Responsive Embeds Styles
/* ----------------------------------------------------------------------------------------------------*/
.embed-responsive-doc, .ratio-doc { padding-bottom: 100vh; }
.embed-responsive-ppt, .ratio-ppt { padding-bottom: 56.25%; }
.embed-responsive-cal, .ratio-cal { padding-bottom: 75%; }
.embed-responsive-map, .ratio-map { padding-bottom: 90%; }


/* Shadow Styles
/* ----------------------------------------------------------------------------------------------------*/
.shadow, 
.shadow-md  { box-shadow: var(--base-shd-md) !important;   }
.shadow-0   { box-shadow: var(--base-shd-none) !important; }
.shadow-xs  { box-shadow: var(--base-shd-xs) !important;   }
.shadow-sm  { box-shadow: var(--base-shd-sm) !important;   }
.shadow-lg  { box-shadow: var(--base-shd-lg) !important;   }
.shadow-xl  { box-shadow: var(--base-shd-xl) !important;   }

.card.hover-shadow, .hover-shadow { box-shadow:none; transition:all .3s ease-in-out }
.card.hover-shadow:hover, .hover-shadow:hover { box-shadow: 0 .3rem 0.8rem rgba(0,0,0,.3)!important; transition:all .3s ease-in-out }


/* Rounded Corners Styles
/* ----------------------------------------------------------------------------------------------------*/
.rounded, 
.rounded-md		{ border-radius: var(--base-rnd-md) !important;   }
.rounded-0		{ border-radius: var(--base-rnd-none) !important; }
.rounded-xs		{ border-radius: var(--base-rnd-xs) !important;   }
.rounded-sm		{ border-radius: var(--base-rnd-sm) !important;   }
.rounded-lg		{ border-radius: var(--base-rnd-lg) !important;   }
.rounded-xl		{ border-radius: var(--base-rnd-xl) !important;   }
.rounded-circle	{ border-radius: var(--base-rnd-circle) !important; }
.rounded-pill	{ border-radius: 50rem !important; min-width: 250px; }


/* Transitions Styles
/* ----------------------------------------------------------------------------------------------------*/
.transition, 
.transition-md  { transition: var(--base-trs-md) !important;   }
.transition-xs  { transition: var(--base-trs-xs) !important;   }
.transition-sm  { transition: var(--base-trs-sm) !important;   }
.transition-lg  { transition: var(--base-trs-lg) !important;   }
.transition-xl  { transition: var(--base-trs-xl) !important;   }


/* Opacity Styles
/* ----------------------------------------------------------------------------------------------------*/
.opacity-0		{ opacity: var(--base-opc-none) !important; }
.opacity-5		{ opacity: var(--base-opc-5)  !important; }
.opacity-10		{ opacity: var(--base-opc-10) !important; }
.opacity-15		{ opacity: var(--base-opc-15) !important; }
.opacity-20		{ opacity: var(--base-opc-20) !important; }
.opacity-30		{ opacity: var(--base-opc-30) !important; }
.opacity-40		{ opacity: var(--base-opc-40) !important; }
.opacity-60		{ opacity: var(--base-opc-60) !important; }
.opacity-70		{ opacity: var(--base-opc-70) !important; }
.opacity-80		{ opacity: var(--base-opc-80) !important; }
.opacity-90		{ opacity: var(--base-opc-90) !important; }



/* Square Box Style
/* ----------------------------------------------------------------------------------------------------*/
.square { background-color: #fbfbfb; text-align: center; display: inline-block; width: 130px;  height: 130px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.14); margin: 20px; padding-top: 50px; }


/* Lightbox Hover Cursor Style
/* ----------------------------------------------------------------------------------------------------*/
.lightbox:hover { cursor: zoom-in; }


/* Font Styles
/* ----------------------------------------------------------------------------------------------------*/

/* -- Strikedthrough and Mark ----------------------- */
s { color: #b94a48; }
ins { color: #3a87ad; }
mark, .mark, .highlighted { background-color: #ffff99; padding: 0.3em 0.25em; }

/* -- Font Alignment -------------------------------- */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* -- Font Formating -------------------------------- */
.text-bold, .font-bold, strong, b { font-weight: 600 !important; }
.text-italics, .font-italics, em, i:not(.bi)not(.fa):not(.fas):not(.fab):not(.far)
                                   :not(.fa-solid):not(.fa-regular):not(.fa-light):not(.fa-thin):not(.fa-brands):not(.fa-dutone) { font-style: italic !important; }
								   
.text-light, .font-light { font-weight: 300 !important; }

.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }



/* Date and Time Picker Style Override
/* ----------------------------------------------------------------------------------------------------*/
.bootstrap-datetimepicker-widget.dropdown-menu { margin: 2px 0; padding: 3px; width: 18rem; }


/* Extend Sizing Untilities Styles
/* ----------------------------------------------------------------------------------------------------*/
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	.w-sm-100 { width:100% !important; }
	.w-sm-75  { width:75% !important; }
	.w-sm-50  { width:50% !important; }
	.w-sm-25  { width:25% !important; }
	.h-sm-100 { height:100% !important; }
	.h-sm-75  { height:75% !important; }
	.h-sm-50  { height:50% !important; }
	.h-sm-25  { height:25% !important; }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	.w-md-100 { width:100% !important; }
	.w-md-75  { width:75% !important; }
	.w-md-50  { width:50% !important; }
	.w-md-25  { width:25% !important; }
	.h-md-100 { height:100% !important; }
	.h-md-75  { height:75% !important; }
	.h-md-50  { height:50% !important; }
	.h-md-25  { height:25% !important; }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	.w-lg-100 { width:100% !important; }
	.w-lg-75  { width:75% !important; }
	.w-lg-50  { width:50% !important; }
	.w-lg-25  { width:25% !important; }
	.h-lg-100 { height:100% !important; }
	.h-lg-75  { height:75% !important; }
	.h-lg-50  { height:50% !important; }
	.h-lg-25  { height:25% !important; }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	.w-xl-100 { width:100% !important; }
	.w-xl-75  { width:75% !important; }
	.w-xl-50  { width:50% !important; }
	.w-xl-25  { width:25% !important; } 
	.h-xl-100 { height:100% !important; }
	.h-xl-75  { height:75% !important; }
	.h-xl-50  { height:50% !important; }
	.h-xl-25  { height:25% !important; }
}



/* ----------------------------------------------------------------------------------------------------
   #06 CMS STYLES 
/* ----------------------------------------------------------------------------------------------------*/

/* Homepage Slideshow Custom Fields Styles
/* ----------------------------------------------------------------------------------------------------*/
.fields-container,
.com-content-article .fields-container,
.fields-container .field-entry,
.com-content-article .fields-container .field-entry { background-image: none !important; list-style: none !important; margin-bottom: 0; margin-left: 0; padding-left: 0; }
.com-content-article .fields-container .field-entry::marker { content: ""; }


/* Article Gallery Styles
/* ----------------------------------------------------------------------------------------------------*/
.article-gallery .gallery-image .gallery-overlay { position: relative; display: block; overflow: hidden; }

.article-gallery .gallery-image .gallery-overlay:before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1rem;
    margin-left: -1rem;
    opacity: 0;
    color: #fff;
    font-family: 'Font Awesome 6 Free';
	font-size: 2rem;
	font-weight: 900;
    content: '\f002';
	display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    pointer-events: none;
    z-index: 9000;
    transition: 0.4s;
}


.article-gallery .gallery-image .gallery-overlay:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(17, 17, 17, 0.5);
    content: '';
    transition: 0.4s;
}

.article-gallery .gallery-image .gallery-overlay:hover:after,
.article-gallery .gallery-image .gallery-overlay:hover:before { opacity: 1; }

.gallery-image { object-fit: cover; transform: scale(1.05); transition:  transform .5s; }
.gallery-overlay:hover .gallery-image { transform: scale(1.2); }


/* Breadcumbs Component Styles
/* ----------------------------------------------------------------------------------------------------*/
.breadcrumb { background-color: rgba(0, 0, 0, 0.03); margin-bottom: 0; }


/* Article Component Styles
/* ----------------------------------------------------------------------------------------------------*/
.com-content-article__body { margin-top: calc(5rem + 5px); margin-bottom: calc(3rem + 5px); }


/* Navigation Menu Component Styles
/* ----------------------------------------------------------------------------------------------------*/
.container-component nav { position: relative; }
.mod-menu { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.mod-list { -webkit-padding-start: 0; list-style: none; padding-inline-start: 0; }