@charset "utf-8";
:root {
	--lightgray: #EEEDE9;
	--tertiary: #02394A;
	--deep-sea-blue: #236192;
	--medium-cyan: #007FA3;
	--primary-red: #e6000d;
	--sharp-red: #CE112B;

	.ac-deep-blue { --accent-color: var(--deep-sea-blue) };
	.ac-medium-cyan { --accent-color: var(--medium-cyan)};
	.ac-red { --accent-color: var(--sharp-red) };
}

body {
	resize: none;
}
#sharp_container {
	width: 100%;
	height: 100%;
	.content-spacing { padding: 40px 0px; }
	.bg-gray { background-color: var(--lightgray); }
	.col { background-color: transparent; }
}

.scale-up { transform: scale(1.1); }

/*START BS5 CLASSES - REMOVE AFTER SKIN UPGRADE TO BS5*/
.d-flex { display: flex; }

.mb-1 { margin-bottom: calc(1rem * .25) !important; }
.mb-2 { margin-bottom: calc(1rem * .5) !important; }
.mb-3 { margin-bottom: 1rem !important; }

.img-fluid {
	max-width: 100%;
	height: auto;
}

.rounded-start {
	border-top-right-radius: 4px !important;
	border-top-left-radius: 4px !important;
}
.rounded-end {
  border-top-right-radius: 4px !important;
	border-top-left-radius: 4px !important;
}

.order-first {order: -1 !important;}
.order-last {order: 6 !important;}

@media handheld, only screen and (min-width:768px) {
	.order-sm-first {order: -1 !important;}
	.order-sm-last {order: 6 !important;}
	.rounded-start {
		border-bottom-left-radius: 4px !important;
		border-top-right-radius: 0 !important;
		border-top-left-radius: 4px !important;
	}
	.rounded-end {
		border-bottom-right-radius: 4px !important;
		border-top-left-radius: 0 !important;
		border-top-right-radius: 4px !important;
	}
}
/*END BS5 CLASSES - REMOVE AFTER SKIN UPGRADE TO BS5*/
.card.card-horizontal, .card.card-horizontal .flex {flex-direction: column;}
.img-wrapper {flex: 0 0 auto; padding: 0;}
.img-wrapper img.img-fluid {object-fit: cover;height: 100%; width: 100%;}

@media handheld, only screen and (min-width:768px) {
	.card.card-horizontal, .card.card-horizontal .flex {flex-direction: row;}
}
/* --------- End Tablet/Mobile Reset ---------- */

/* ---------- Header Styles ---------- */
.copiers {
	#video_top {
		position: relative;
		background-color: black;
		> .row {
			flex-direction: column;
			align-items: center;
			@media handheld, only screen and (min-width:992px) {
				flex-direction: row;
			}
		}
		#intro .row {
			color: #c2c2c2;
		}
	}
	#hero-text {
		text-align: center;
		z-index: 200;
		@media handheld, only screen and (min-width:768px) {
			position: static;
		}
		h1 {
			color: #fff;
			margin-bottom: 0px;
			text-shadow: 2px 2px #000000;
			font-size: 32px;
			text-wrap: balance;
		}
	}
	/* -- video -- */
	#hero {
		position: relative;
		display: flex;
		padding: 0;
		@media handheld, only screen and (min-width:768px) {
			height: 400px;
		}
		#hero-video {
			width: 100%;
			object-fit: cover;
			@media handheld, only screen and (min-width:768px) {
				mask-image: linear-gradient(to left, black 0%, black 50%, transparent 100%);
			}
		}
	}
	/* -- nav -- */
	#top {
		border-top: 1px solid #505050;
		border-bottom: 1px solid #505050;
		#top_links_wrapper {
			background: rgba(0, 0, 0, 0.8);
			width: 100%;
			.top_links_container {
				max-width: 100%;
				margin-inline: auto;
				text-align: center;
				#nav-ul {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;;
					.nav-item {
						width: 45%;
						margin: 0 5px;
						@media handheld, only screen and (min-width:768px) {
							width: auto;
							margin: 0 5px;
						} 
						a:link, a:visited {
							color: #ffffff;
							text-decoration: none;
							border: 2px solid #000000;
						}
						a:hover {
							background-color: var(--primary-red);
							color: white;
							border: 2px solid #ffffff;
						}
						a:focus {
							background-color: #ffffff;
							color: var(--primary-red);
							outline: 2px solid white;
							border-radius: 1px;
							width: calc(100% - 10px);
							border: 1px solid #000000;
						}
						> a.active {
							position: relative;
							display: block;
							padding: 10px 15px;
							color: black;
							background-color: #ffffff;
							font-weight: bold;
							border-radius: 6px;
							border: 2px solid #000000;
						}
					}
				}
			}
		}
	}
}

/* ---------- WHY CHOOSE SECTION ---------- */
#why-choose-sharp {
	text-align: center;
	#copier-type {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		margin: 20px auto 30px auto;
		@media (min-width: 992px) {
		}
		.nav-item {
			max-width: 165px;
			margin: 10px;
			flex: 0 1 calc(50% - 20px); 
			@media (min-width: 637px) {
				flex: 0 1 calc(33.33% - 20px);
			}
			@media (min-width: 992px) {
				max-width: 210px;
			}
			@media (min-width: 1200px) {
				flex: 0 1 calc(16.66% - 20px);
				max-width: 165px;
			}
			a {
				color: var(--tertiary);
				&:link, &:visited, &:active {
					color: var(--tertiary);
				}
				&:hover {
					color: #ffffff;
					.card {
						background-color: var(--tertiary);
					}
				}
				.card {
					height: 100%;
					background-color: var(--lightgray);
					.card-body {
						display: flex;
						flex-direction: column;
						justify-content: center;
						height: 100%; 
					}
				}
			}
		}
	}
}

@media handheld, only screen and (min-width:768px) {
	#copier-type {flex-direction: row;}
}


/* ---------- Request Info Syles ---------- */
#request {
	background-color: #E8E8E8;
	iframe {
		height: auto;
		min-height: 100vh;
	}
}
/* @media only screen and (min-width:767px) {
	#request iframe {
		height: 1025px;
	}
} */

#essentials-copiers img {
	object-position: right;
}

/* ---------- PRODUCTION PRINT SECTION ---------- */
#production-print {
	.card {
		margin-bottom: 30px;
	}
}

/* ---------- EXPLORE KEY FEATURES SECTION ---------- */
.jump-links {
	ul {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		li {
			display: flex;
    	align-items: center;
    	justify-content: center;
			.explore-btn {
				width: 214px;
				height: 64px;
				scale: .95;
				background-color: var(--lightgray);
				outline: 1px solid var(--tertiary);
				outline-offset: -1px;
				border-left: 10px solid var(--medium-cyan);
				color: var(--tertiary);
				font-size: 16px;
				font-weight: 600;
				box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
				line-height: 40px;
				overflow: hidden;
				/* transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; */
				transition: all 0.2s ease-in-out;
				&:hover {
					border-left-color: var(--lightgray);
					background-color: var(--tertiary);
					color: var(--lightgray);
					transform: scale(1.05);
					box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
				}
				&:focus {
				outline-width: 4px;
				outline-offset: 2px;
				}
			}
		}
	}	
}

/* ---------- KEY FEATURES SECTION TITLES ---------- */
#frank-award {
	@media only screen and (min-width: 992px) {
		text-align: center;
	}
}

.section-title {
	font-size: 45px;
	font-weight: 300;
	padding-left: 15px;
	color: var(--accent-color);
	border-left: 15px solid var(--accent-color);
}

/* ---------- SECURITY SECTION ---------- */
#security ul {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	margin-top: 23px;
}
#security ul li {
	display: flex;
	flex: 0 0 calc(28% - 5px);
	position: relative;
	list-style-type: none;
	margin-bottom: 20px;
	margin-right: 30px;
	padding-left: 10px;
	font-weight: bold;
	min-height: 42px;
}
#security ul li:before {
	content: url(/portals/0/images/copiers/check_circle_30dp_02394A_FILL1_wght400_GRAD0_opsz24.svg);
	filter: invert(30%) sepia(85%) saturate(800%) hue-rotate(167deg) brightness(80%) contrast(70%);
	position: absolute;
	left: -20px;
	top: 0;
}
#security #security-video {
	margin: 40px auto;
}

@media only screen and (min-width: 992px) {
	#security.security-sd ul {
		column-count: 3;
	}
	#security-seal  {
		text-align: center;	
		img {
			width: 325px;
		}
	}
}

/* ---------- PRODUCTIVITY SECTION ---------- */
#productivity .flex {
	align-items: center;
	flex-direction: column;
	div:nth-child(2) {
    order: 3; 
  }
	@media (min-width: 768px) {
		flex-direction: row; 
    div {
      flex: 1;
    }
    div:nth-child(2) {
      order: 0;
    }
  }
}

/* ---------- EASY-TO-USE SECTION ---------- */
#easy-to-use {
	.etu-img {
		width: 175px;
		margin-bottom: 15px;
	}
}

/* ---------- DEVICE MANAGEMENT SECTION ---------- */
#device-management {
	/* .card:not(.nested-card) {
		height: 620px;
		overflow: hidden;
	} */
	.card {
		margin: 20px auto;
		&:not(.aux-card) .card-header {
			text-wrap: balance;
			background-color: #333;
			h4 {
				color: white;
			}
		}
		&.nested-card {
			align-items: center;
			border: none;
			img {
				width: 100%;
				height: 250px;
				object-fit: cover;
				@media (min-width: 768px) {
					width: 300px;
					height: inherit;
					aspect-ratio: 16/9;
				}
				@media (min-width: 1200px) {
					width: auto;
					height: 100px;
				}
			}
		}
		&.aux-card {
			@media (min-width: 768px) {
				height: 515px;
			}
			@media (min-width: 992px) {
				height: 547px;
			}
			@media (min-width: 1200px) {
				height: 546px;
			 }
			.card-title {
				text-wrap: balance;
				@media (min-width: 768px) {
					font-size: 18px;
				}
			}
			img {
				height: 250px;
				object-fit: cover;
				@media (min-width: 768px) {
					height: auto;
				}
			}
		}
	}
}

/* ---------- INDUSTRIES INDUSTRY HEADINGS ---------- */
.industry-heading {
	color: #777777;
	font-weight: 500;
	border-left: 10px solid var(--primary-red);
	text-indent: 10px;
}
/* ---------- GOVERNMENT AGENCIES SECTION ---------- */
#healthcare-providers img, #government-agencies img {
	object-position: right;
}
/* ---------- INDUSTRY PAGES SECTION ---------- */
#industry-pages {
	h2 {
		margin-bottom: 30px;
	}
	ul {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		li {
			display: flex;
			flex: 0 0 1;
			align-items: center;
			justify-content: center;
			align-items: stretch;
			@media (min-width: 768px) {
				flex: 0 0 calc(50% - 10px);
			}
			@media (min-width: 992px) {
				flex: 0 0 calc(25% - 10px);
			}
			.card-header {
				padding: 0;
				.card-title {
					width: 100%;
					margin: 0;
					padding: 10px 5px;
					font-size: 18px;
					text-align: center;
					text-wrap: balance;
					text-decoration: underline;
				}
			}
		} 
	}
}

/*----------------------Vertical Market Styles --------------------------*/
#vertical_markets {
	/*	background-image: url(/portals/0/assets/images/6_BG.png);*/
	/*	background-repeat: repeat-x;*/
	z-index: 1;
}
.vm {
	/*	background-image: url(/portals/0/assets/images/vm_bg_image.jpg);*/
	/*	background-repeat: no-repeat;*/
	/*	background-position: bottom;*/
}
/*.vm H2 { color: #FFF; }*/
#vm_text {
	/*	color: #FFF;*/
	text-align: center;
}
/*#vm_text H2 { color: #FFF; }*/
/*----------------------Case Study Styles --------------------------*/
#case-studies, #featured-block, #additional-resources {
	background-color: #035C7A;
	scroll-margin-top: 112px;
}
#additional-resources {
	padding-bottom: 25px
}
#case-studies h2, #featured-block h2.h3 {
	color: #ffffff;
	text-align: center;
}
/*---------------Footer Style -----------------------*/
#footer_container {
	background-color: #222222;
	width: 100%;
	height: 500px;
	top: 2400px;
	z-index: 1;
}
/*=======================================================
--------------------- Responsive Styles-------------------
===========================================================*/
@media handheld, only screen and (min-width:720px) {
	#top .top_links_container {
		/*    width: 80%;*/
		padding: 10px 0px;
	}
}
@media handheld, only screen and (min-width:768px) {
	#top.top_links_container {
		padding: 15px 0;
	}
}
@media handheld, only screen and (min-width:1230px) {
	.copiers #hero, .copiers #hero-video {
		height: 460px;
	}
}