/* ==============================================
Fonts
============================================== */
/*
https://fonts.google.com/share?selection.family=Gothic+A1:wght@800|Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800
*/


/* ==============================================
custom properties
============================================== */
:root {  


	--brand-black: #231f20;
	--brand-black-hover: #000;
	--brand-white: #fff;
	--brand-red: #ef3829;
	--brand-red-hover: #c72c21;

	--color-blue: #0d6efd;
	--color-white: #fff;
	--color-gray: #f4f4f4;
	--color-gray-hover: #d4d4d4;
	--color-gray-dark: #343a40;
	--color-black: #111;	
	--color-black-rgb: 17, 17, 17;	
	--color-headings: #333;	
	
	--link-color: var(--color-blue);
	--link-color-hover: #0a58ca;
	
	--font-headings: "DM Sans", sans-serif;
	--font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	
	--font-size-h1: 3rem;
	--font-size-h2: 2.5rem;
	--font-size-h3: 2rem;
	--font-size-h4: 1.5rem;
	--font-size-h5: 1.25rem;
	--font-size-h6: 1rem;
	
	--letter-spacing-headings: 0;
	
	--bs-primary: var(--color-blue);	
	--bs-primary-bg-subtle: #cfe2ff;
	--bs-primary-border-subtle: #9ec5fe;
	--bs-primary-text-emphasis: #052c65;
	
	--bs-danger-bg-subtle: #f8d7da;
	--bs-danger-border-subtle: #f1aeb5;
	--bs-danger-text-emphasis: #58151c;
	
	--bs-light: #f8f9fa;
	--bs-light-text-emphasis: #495057;
	--bs-light-border-subtle: #e9ecef;
	
	--bs-success-text-emphasis: #0a3622;
	--bs-success-bg-subtle: #d1e7dd;
	--bs-success-border-subtle: #a3cfbb;
	
	--bs-warning-bg-subtle: #fff3cd;
	--bs-warning-border-subtle: #ffe69c;
	--bs-warning-text-emphasis: #664d03;
  
	/* font-awesome overrides */
	--fa-li-margin: 1.5rem;
	
	/* box-shadows */
	--box-shadow-1: 
		/* 1. inner glow - for dark mode */
		inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),		
		/* shadow ring */
		0 0 0 1px hsla(0, 0%, 0%, 0.05),		
		/* multiple soft shadows */
		0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
		0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
		0 3.5px 6px hsla(0, 0%, 0%, 0.09);
		
	--box-shadow: 0 .5rem 1rem rgba(var(--color-black-rgb), .15);
	--box-shadow-sm: 0 .125rem .25rem rgba(var(--color-black-rgb), .075);
	--box-shadow-lg: 0 1rem 3rem rgba(var(--color-black-rgb), .175);
	--box-shadow-inset: inset 0 1px 2px rgba(var(--color-black-rgb), .075);	
	
	--text-shadow-dark: 2px 2px 4px rgba(0, 0, 0, 0.7);
	
	--border-radius-sm: 0.25rem;
	--border-radius: 0.375rem;
	--border-radius-lg: 0.5rem;
	--border-radius-xl: 1rem;
	--border-radius-xxl: 2rem;
	--border-radius-pill: 50rem;
  
  
	/* media breakpoints */
	--media-breakpoint-max-sm: 575.98px;
	--media-breakpoint-max-md: 767.98px;
	--media-breakpoint-max-lg: 991.98px;
	--media-breakpoint-max-xl: 1199.98px;
	--media-breakpoint-max-xxl: 1399.98px;

	--media-breakpoint-min-sm: 576px;
	--media-breakpoint-min-md: 768px;
	--media-breakpoint-min-lg: 992px;
	--media-breakpoint-min-xl: 1200px;
	--media-breakpoint-min-xxl: 1400px;	
}


@media screen and (max-width: 767.98px) {
  	:root {
    	--font-size-h1: 2.5rem;
    	--font-size-h2: 2rem;
    	--font-size-h3: 1.75rem;
    	--font-size-h4: 1.25rem;
    	--font-size-h5: 1rem;
    	--font-size-h6: 0.875rem;
  	}
}

@media screen and (max-width: 575.98px) {
  	:root {
    	--font-size-h1: 2rem;
    	--font-size-h2: 1.75rem;
    	--font-size-h3: 1.5rem;
    	--font-size-h4: 1.25rem;
    	--font-size-h5: 1rem;
    	--font-size-h6: 0.875rem;
  	}
}

/* Usage for Open Sans */
[class^="font-sans-"] {
	font-family: var(--font-sans);
	font-optical-sizing: auto;
	font-style: normal;
	font-variation-settings: "wdth" 100;
}

/* Usage for Open Sans */
[class^="font-headings-"] {
	font-family: var(--font-headings);
	font-optical-sizing: auto;
	font-style: normal;
}

/* Define custom classes for different font weights */
.font-sans-300 { font-weight: 300; }
.font-sans-400 { font-weight: 400; }
.font-sans-500 { font-weight: 500; }
.font-sans-600 { font-weight: 600; }
.font-sans-700 { font-weight: 700; }
.font-sans-800 { font-weight: 800; }

.font-headings-300 { font-weight: 300; }
.font-headings-400 { font-weight: 400; }
.font-headings-500 { font-weight: 500; }
.font-headings-600 { font-weight: 600; }
.font-headings-700 { font-weight: 700; }
.font-headings-800 { font-weight: 800; }


/* Define custom classes for different box-shadows */
.box-shadow { box-shadow: var(--box-shadow); }
.box-shadow-1 { box-shadow: var(--box-shadow-1); }
.box-shadow-sm { box-shadow: var(--box-shadow-sm); }
.box-shadow-lg { box-shadow: var(--box-shadow-lg); }
.box-shadow-inset { box-shadow: var(--box-shadow-inset); }
.box-shadow-none { box-shadow: none !important;}

/* ==============================================
foundation
============================================== */
.grid-container-600 {
	max-width: 100%;
	width: calc(600rem/16);
}
.grid-container-900 {
	max-width: 100%;
	width: calc(900rem/16);
}
.callout.alert {
	background-color: var(--bs-danger-bg-subtle);
	border-color: var(--bs-danger-border-subtle);
	color: var(--bs-danger-text-emphasis);	
}
.callout.primary {
	background-color: var(--bs-primary-bg-subtle);
	border-color: var(--bs-primary-border-subtle);
	color: var(--bs-primary-text-emphasis);	
}
.callout.secondary {
	background-color: var(--bs-light);
	border-color: var(--bs-light-border-subtle);
	color: var(--bs-light-text-emphasis);	
}
.callout.success {
	background-color: var(--bs-success-bg-subtle);
	border-color: var(--bs-success-border-subtle);
	color: var(--bs-success-text-emphasis);	
}
.callout.warning {
	background-color: var(--bs-warning-bg-subtle);
	border-color: var(--bs-warning-border-subtle);
	color: var(--bs-warning-text-emphasis);	
}
.callout.border-left {
	border-left-width: 0.5rem;
	border-left-style: solid;
}
.callout.with-icon {
	padding-left: 4.5rem;
	position: relative;
}
.callout.with-icon::before {
	content: "\f57e";
	font: var(--fa-font-solid);
	font-size: 1.5rem;
	left: 1.5rem;
	opacity: 0.75;
	position: absolute;
	top: 1rem;
}
.callout.with-icon:has(h4)::before {
	top: 1.25rem;
}
.callout.alert.with-icon::before {
	content: "\f071";
	opacity: 0.75;
}
.callout.primary.with-icon::before {
	content: "\f05a";
	opacity: 0.75;
}
.callout.secondary.with-icon::before {
	content: "\f05a";
	opacity: 0.75;
}
.callout.success.with-icon::before {
	content: "\f058";
	opacity: 0.75;
}
.callout.warning.with-icon::before {
	content: "\f071";
	opacity: 0.75;
}
.close-button {
	font-size: 0; /* Hide the existing content */
}
.close-button::before {
	content: "\00D7"; /* Unicode for multiplication sign */
	font-size: 2rem;
}

.reveal {
	border: 0;
}
.reveal:not(.full) {
	border-radius: 0.5rem;
}

[type="color"], [type="date"], [type="datetime-local"], [type="datetime"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea {
	box-shadow: initial;
}


/* ==============================================
brand
============================================== */
.button.brand-red,
.button.brand-black {
	font-family: var(--font-sans);
}
.button.brand-red {
	color: var(--color-white);
	background-color: var(--brand-red);
}
.button.brand-red:focus,
.button.brand-red:hover {
	color: var(--color-white);
	background-color: var(--brand-red-hover);
}
.button.hollow.brand-red {
	background-color: transparent;
	border-color: var(--brand-red);
	color: var(--brand-red);
}
.button.hollow.brand-red:focus,
.button.hollow.brand-red:hover {
	border-color: var(--brand-red-hover);
	color: var(--brand-red-hover);
}

.button.brand-black {
	color: var(--brand-white);
	background-color: var(--brand-black);	
}
.button.brand-black:focus,
.button.brand-black:hover {
	color: var(--color-white);
	background-color: var(--brand-black-hover);
}
.button.hollow.brand-black {
	background-color: transparent;
}
.button.hollow.brand-black {
	border-color: var(--brand-black);
	color: var(--brand-black);
}
.button.hollow.brand-black:focus,
.button.hollow.brand-black:hover {
	border-color: var(--brand-brand-hover);
	color: var(--brand-brand-hover);
}

/* ==============================================
helper classes
============================================== */
.lead {
	font-size: 1.25rem;
	font-weight: 300;
}
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.container-small {
	margin-left: auto;
	margin-right: auto;
	width: 32.5rem;
	max-width: 100%;
}
.container-narrow {
	margin-left: auto;
	margin-right: auto;
	width: 52.5rem;
	max-width: 100%;
}
.radius { border-radius: var(--border-radius); }
.radius-sm { border-radius: var(--border-radius-sm); }
.radius-lg { border-radius: var(--border-radius-lg); }
.radius-xl { border-radius: var(--border-radius-xl); }
.radius-xxl { border-radius: var(--border-radius-xxl); }
.radius-pill { border-radius: var(--border-radius-pill); }

a.img-thumbnail > img,
img.img-thumbnail {
	padding: 0.25rem;
	background-color: var(--color-white);
	border: 1px solid #ddd;
	max-width: 100%;
	height: auto;
}
a.img-thumbnail:hover img {
	border: 1px solid #aaa;
}
  

/* ==============================================
sticky footer
https://css-tricks.com/a-clever-sticky-footer-technique/
============================================== */
html, body { 
    /*
        height: 100%; 
        - this can cause bugs in js with:
        - document.body.offsetHeight
        - document.documentElement.clientHeight
        - document.documentElement.offsetHeight
    */
    min-height: 100vh;
    /*
        Better but, even min-height:100vh causes wrong 
        document.documentElement.clientHeight 
    */
}
body > footer {
	position: sticky;
	top: 100vh;
}



/* ==============================================
website
============================================== */
body {
	background-color: var(--color-white);
	color: var(--color-black);
	font-family: var(--font-sans);
}

a {
	color: var(--link-color);
}
a:hover,
a:focus {
	color: var(--link-color-hover);
}

b {
	font-weight: 600;
}
strong {
	font-weight: 700;
}

hr {
	border-bottom-color: currentColor;
	color: inherit;
	opacity: 0.25;
}

.figure {
	display: inline-block;
}
.figure img {
	margin-bottom: 0.5rem;
	line-height: 1;
}
.figure figcaption {
	font-size: 0.875em;
	color: var(--color-gray-dark);
}
.figure:has(a > img) {
	position: relative;
}
.figure:has(a > img)::after {
	content: "\f00e";
	font: var(--fa-font-sharp-light);
	font-size: 1.5rem;
	position: absolute;
	top: 1rem;
	right: 1rem;
}


/* ==============================================
headings
============================================== */
h1, h2, h3, h4, h5, h6 {
	color: var(--color-headings);
	font-family: var(--font-headings);
	letter-spacing: var(--letter-spacing-headings);
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 0.5rem;
}

:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):has(small) small {
	line-height: 0;
	color: inherit;
}
 
:is(h1, h2, h3, h4, h5, h6).heading-styled {
	font-family: var(--font-headings);
	font-style: normal;
	font-weight: 600;
	letter-spacing: var(--letter-spacing-headings);
}

h1, .h1 { font-size: calc(1.375rem + 1.5vw); }
h2, .h2 { font-size: calc(1.325rem + 0.9vw); }
h3, .h3 { font-size: calc(1.3rem + 0.6vw); }
h4, .h4 { font-size: calc(1.275rem + 0.3vw); }
h5, .h5 { font-size: var(--font-size-h5); }
h6, .h6 { font-size: var(--font-size-h6); }

@media screen and (min-width: 1200px) {
	h1, .h1 { font-size: var(--font-size-h1); }
	h2, .h2 { font-size: var(--font-size-h2); }
	h3, .h3 { font-size: var(--font-size-h3); }
	h4, .h4 { font-size: var(--font-size-h4); }
}

/*
==============================================
breadcrumbs
==============================================
*/
nav.breadcrumbs-container {
	margin: 1rem auto 0 auto;
	max-width: 75rem;
	padding-right: .9375rem;
	padding-left: .9375rem;
}
nav.breadcrumbs-container ul.breadcrumbs {
	list-style: none;
	margin: 0 0 1rem 0;
}
/* nav.breadcrumbs-container ul.breadcrumbs li:last-child {
	text-transform: initial;
} */


/* ==============================================
tables
============================================== */
table {
	vertical-align: top;
}
table > thead {
	vertical-align: bottom;
}
table > thead th {
	text-align: inherit;
	font-weight: 600;
}
table > tbody {
	vertical-align: top;
}
table > tfoot {
	vertical-align: middle;
}
table > tfoot td {
	text-align: inherit;
	font-weight: 500;
}

table tbody tr,
table tbody tr:nth-child(2n) {
	border-bottom: 1px solid #f1f1f1;
	background-color: #fefefe;
}
table.striped tbody tr:nth-child(2n) {
	border-bottom: 0;
	background-color: #f1f1f1;
}
.table-group-divider {
	border-top: 2px solid currentcolor;
}

caption {
	font-weight: normal;
	text-align: left;
}


/*==============================================
	header and nav
==============================================*/
/* adjust header if hero image is not on the page  */
body:not(:has(.hero)) main.main-content {
	padding-top: 2rem;
}
/* adjust header if breadcrumbs are on the page  */
body:has(.breadcrumbs-container) main.main-content {
	padding-top: 1rem;
}
header.header-primary {
	background-color: var(--color-white);
	position: relative;
	width: 100%;
	z-index: 999;
}
div.header--wrapper {
	align-items: center;
	display: flex;
	margin: 0 auto;
	max-width: 100%;
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
	position: relative;
	width: 75rem;
}
div.header-logo a {
	display: block;
}
div.header-logo img {
	height: 2rem;
	width: auto;
}
div.header-nav {
	width: 100%;
}
ul.nav-primary {
	display: flex;
	list-style-type: none;
	margin: 0;
	width: 100%;
}
ul.nav-primary a {
	color: inherit;
}
ul.nav-primary > li {
	font-size: 0.95rem;
	position: relative;
}
ul.nav-primary > li > a {
	border-top: 3px solid transparent;
	display: block;
	padding: 1.5rem 1.25rem;
	position: relative;
}
ul.nav-primary > li > a:hover,
ul.nav-primary > li > a:focus {
	color: var(--brand-red);	
}
ul.nav-primary > li.has-dropdown > a {
	padding-right: 2rem;
}
ul.nav-primary > li.has-dropdown > a::after {
    content: "\f107";
    font: var(--fa-font-solid);
    font-size: 0.75rem;
	position: absolute;
	right: 0.8rem;
	top: 43%;
}
ul.nav-primary > li:first-child {
	margin-left: auto;
}
.nav-primary li.nav-button span {
	color: var(--color-white);
	background-color: var(--brand-red);
	border-radius: 0.25rem;
	padding: 0.5rem 2rem;
}
.nav-primary li.nav-button span:hover {
	background-color: var(--brand-red-hover);
}


/* header shopping-cart button */
ul.nav-primary > li.shopping-cart > a {
	color: var(--brand-color-secondary);
	font-size: 2rem;
	padding: 0.75rem 0.75rem 0 0.75rem;
	position: relative;
}
ul.nav-primary > li.shopping-cart > a span {
	color: white;
	font-size: 0.75rem;
	left: 55%;
	position: absolute;
	top: 35%;
	transform: translate(-55%, 0);
}				
ul.nav-primary > li.shopping-cart:has(span[data-count='0']) {
	display: none;
}
ul.nav-primary > li.shopping-cart span[data-count]::after {
	content: attr(data-count);
}

/*==============================================
	mobile menu button trigger
==============================================*/
button.header--menu-trigger {
	cursor: pointer;
	display: none;
	height: 26px;
	width: 26px;
}
button.header--menu-trigger span,
button.header--menu-trigger span::after,
button.header--menu-trigger span::before {
	background-color: var(--color-black);
	content: ' ';
	display: block;
	height: 3px;
	position: absolute;
	transition-duration: 260ms;
	width: 26px;
}	
button.header--menu-trigger span::before {
	content: '';
	top: -8px;
}
button.header--menu-trigger span::after {
	content: '';
	top: 8px;
}
body.small-menu-open button.header--menu-trigger span {
	transform: rotate(45deg);
}
body.small-menu-open button.header--menu-trigger span::before {
	top: 0;
	transform: rotate(0deg);
}
body.small-menu-open button.header--menu-trigger span::after {
	top: 0;
	transform: rotate(90deg);
}

/*==============================================
	mobile menu
==============================================*/
div.nav-background-overlay {
	background: rgba(255,255,255,0.5);
	cursor: pointer;
	height: 100vh;
	backdrop-filter: blur(6px);
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	transition: 260ms;
	visibility: hidden;
	width: 100%;
	z-index: 11;
}
body.small-menu-open div.nav-background-overlay {
	visibility: visible;
	opacity: 1;
}
body.small-menu-open div.header-nav {
	left: 0;
}
	
@media screen and (max-width: 999.98px) {
	button.header--menu-trigger {
		display: block;
		left: 1rem;
		position: absolute;
	}
	div.header-logo {
		text-align: center;
		width: 100%;
	}	
	div.header-logo a {
		display: inline-block;
		padding: 1rem 0;
	}
	div.header-logo img {
		height: 2rem;
		width: auto;
	}
	div.header-nav {
		background-color: var(--color-gray);
		height: calc(100vh - 69px);
		position: fixed;
		left: -100%;
		top: 69px;
		max-width: 100%;
		transition-duration: 260ms;
		width: 300px;
	}
	ul.nav-primary {
		display: block;
		width: 100%;
	}
	ul.nav-primary > li > a {
		border-bottom: 1px solid #fff;
		border-top: none;
		display: block;
		padding: 1rem;
	}
	ul.nav-primary > li:last-child > a {
		border-bottom: none;
	}
	ul.nav-primary > li > a:hover {
		background: var(--color-gray-hover);
		border-top: none;
		color: inherit;
	}
	ul.nav-primary > li.has-dropdown > a {
		padding-right: 1rem;
	}
	ul.nav-primary > li.has-dropdown > a::after {
		content: '';
	}
}


/*==============================================
	dropdowns
==============================================*/
.nav-dropdown-container {
	background-color: var(--color-gray);
	height: auto;
	left: auto;
	opacity: 0;
	overflow-y: visible;
	pointer-events: none;
	position: absolute;
	left: 0;
	top: 75px;
	transition: 120ms;
	visibility: hidden;	
	width: 240px;
	z-index: 1;
	
	/* dev */
	/*
	opacity: 1;
	pointer-events: auto;	
	visibility: visible;
	*/
}
.dropdown-back-trigger {
	display: none;
}
ul.nav-primary li.has-dropdown:last-child .nav-dropdown-container {
	left: initial;
	right: 0;
}
li.has-dropdown:hover .nav-dropdown-container {
	opacity: 1;
	pointer-events: auto;	
	visibility: visible;
}
.nav-dropdown-container ul {
	font-size: 0.875rem;
	list-style-type: none;
	margin: 0;
	width: 100%;
}
.nav-dropdown-container ul > li a {
	display: block;
	padding: 0.675rem 1rem;
}
.nav-dropdown-container ul > li > a:hover {
	color: inherit;
	background-color: var(--color-gray-hover);
}


@media screen and (max-width: 999.98px) {
	li.has-dropdown .nav-dropdown-container {
		display: none;
	}
}

/*
==============================================
footer
==============================================
*/
footer.footer-primary {
	background-color: var(--color-gray-dark);
	color: var(--color-white);
	font-family: var(--font-sans);
	font-weight: 300;
	margin-top: 3rem;
	padding: 2.5rem 1.5rem 0.5rem 1.5rem;
}
footer.footer-primary h4 {
	color: var(--color-white);
	font-weight: 500;
	margin-bottom: 1rem;
}
footer.footer-primary ul {
	list-style: none;
	margin-left: 0;
}
footer.footer-primary ul.quick-links {
	columns: 1;
}
footer.footer-primary ul a {
	display: inline-block;
	padding: 0.25rem 0;
}
footer.footer-primary a {
	color: inherit;
}
footer.footer-primary a.dotted {
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-color: inherit;
}
footer.footer-primary a:hover {
	color: inherit;
	text-decoration: underline;
}
footer.footer-primary a:hover u {
	border-bottom: none;
}
footer.footer-primary p.socials a {
	font-size: 1.5rem;
	padding: 0.5rem;
}
footer.footer-primary p.copyrights {
	font-size: 0.85rem;
	padding-top: 1.5rem;
	text-align: center;
}
div.footer-newsletter {
	border-bottom: 1px solid var(--brand-color-secondary-light);
}
div.footer-newsletter form {
	margin: 0 auto 0 auto;
	max-width: 30rem;
	padding: 1rem 0;
}
div.footer-newsletter .input-group {
	margin-bottom: 0;
}
img.footer-logo {
	display: inline-block;
	width: auto;
	filter: saturate(0) brightness(200);
	opacity: 0.75;
	max-height: 74px;
}
img.footer-logo--borg {
	max-height: 40px;
}
a:hover img.footer-logo {
	filter: none;
	opacity: 1;
}

@media screen and (max-width: 1199.98px) {
	footer.footer-primary ul.quick-links {
		columns: 1;
	}
}

/* ==============================================
hero
============================================== */
.hero {
	background-image: url(/img/home-hero.jpg);
	background-position: center;
	background-size: cover;
	height: 26vh;
	margin-bottom: 2rem;
	width: 100%;
}
.hero-caption-container {
	align-items: center;
	/* background-color: rgba(100, 0, 0, 0.95); */
	display: flex;
	height: 100%;
	justify-content: flex-start;
	margin: 0 auto;
	max-width: 72.5rem;
	padding: 2rem;
}
.hero-caption-container--bottomleft {
	align-items: flex-end;
	padding: 2rem 2rem 0 0;
}
.hero-caption {
	padding: 1.25rem 1.25rem 2.5rem 1.25rem;
	color: var(--color-white);
	max-width: 90%;
	width: 30rem;
}
.hero-caption-container--bottomleft .hero-caption {
	padding-left: 0;
}
.hero-caption h1 {
	color: inherit;
	letter-spacing: var(--letter-spacing-headings);
	line-height: 1.2;
	margin-bottom: 0;
	text-shadow: var(--text-shadow-dark);
}

@media (max-width: 575.98px) {
	.hero {
		height: 16vh;
	}
	.hero-caption-container--bottomleft {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}


/* ==============================================
scroll-to-top
============================================== */
#scroll-to-top {
	bottom: 0;
	font-size: 0.85rem;
	line-height: 1;
	padding: 0.5rem;
	opacity: 0;
	position: fixed;
	right: 0;
	transform: translateY(100px);
	transition: all 0.5s ease;
}
#scroll-to-top.visible {
	opacity: 1;
	transform: translateY(0);
}
#scroll-to-top .fa-circle {
	color: var(--color-gray-hover);
	opacity: 0.8;
}
#scroll-to-top .fa-chevron-up {
	color: var(--color-black);
}
#scroll-to-top .fa-stack:hover .fa-circle {
	opacity: 1;
}


/* ==============================================
fancybox
============================================== */
.fancybox-thumbs {
	background: rgba(0, 0, 0, 0.3);
	bottom: 0;
	height: 95px;
	left: 0;
	padding: 10px 10px 5px 10px;
	right : 0;
	top: auto;
	width: auto;
}
.fancybox-show-thumbs .fancybox-inner {
	bottom: 95px;
	right: 0;
}
.fancybox-thumbs__list {
	margin: 0 auto;
}
.fancybox-thumbs__list a::before {
	border: 2px solid #efefef;
}

/* ==============================================
blockUI
============================================== */
div.blockMsg {
	border:0;
	color: #fefefe;
	cursor: wait;
	left: 30%;
	padding: 0;
	text-align:center;
    top: 30%;
    width:40%;
}
div.blockOverlay {
	background:#000;
	opacity:0.7;
}
@media only screen and (max-width:40em) {
	div.blockMsg {
		left: 10%;
		top: 20%;
		width: 80%;	
	}
}

/* ==============================================
media queries
============================================== */
/* Min-width */
/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {}

/* X-Large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media screen and (min-width: 1400px) {}

  
/* Max-width  */
/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media screen and (max-width: 575.98px) {}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media screen and (max-width: 767.98px) {}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media screen and (max-width: 991.98px) {}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media screen and (max-width: 1199.98px) {}

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media screen and (max-width: 1399.98px) {}