/*FontAwesome Import for Icons*/
@import url("/static/css/vendor/fontawesome-free/css/all.min.css"); 

@font-face {
    font-family: logo_font;
    src: url(/static/fonts/VanCondensedPro.otf)
}

@font-face {
    font-family: logo_font_light;
    src: url(/static/fonts/VanCondensedProLight.otf)
}

@font-face {
    font-family: h3dp_roboto_condensed_regular;
    src: url(/static/fonts/Roboto/woff/RobotoCondensed-Regular.woff)
}

@font-face {
    font-family: h3dp_roboto_condensed_light;
    src: url(/static/fonts/Roboto/woff/RobotoCondensed-Light.woff)
}

@font-face {
    font-family: h3dp_roboto_condensed_bold;
    src: url(/static/fonts/Roboto/woff/RobotoCondensed-Bold.woff)
}

@font-face {
    font-family: h3dp_roboto_condensed_italic;
    src: url(/static/fonts/Roboto/woff/RobotoCondensed-Italic.woff)
}

@font-face {
    font-family: h3dp_roboto_regular;
    src: url(/static/fonts/Roboto/woff/Roboto-Regular.woff)
}

@font-face {
    font-family: h3dp_roboto_thin;
    src: url(/static/fonts/Roboto/woff/Roboto-Thin.woff)
}

@font-face {
    font-family: h3dp_roboto_light;
    src: url(/static/fonts/Roboto/woff/Roboto-Light.woff)
}

@font-face {
    font-family: h3dp_roboto_medium;
    src: url(/static/fonts/Roboto/woff/Roboto-Medium.woff)
}

@font-face {
    font-family: h3dp_roboto_bold;
    src: url(/static/fonts/Roboto/woff/Roboto-Bold.woff)
}

/*Global TailwindCSS color, cloned for custom styles*/
:root {
	--text-transparent: transparent;
	--text-black: #000;
	--text-white: #fff;
	--text-gray-100: #f7fafc;
	--text-gray-200: #edf2f7;
	--text-gray-300: #e2e8f0;
	--text-gray-400: #cbd5e0;
	--text-gray-500: #a0aec0;
	--text-gray-600: #718096;
	--text-gray-700: #4a5568;
	--text-gray-800: #2d3748;
	--text-gray-900: #1a202c;
	--text-red-100: #fff5f5;
	--text-red-200: #fed7d7;
	--text-red-300: #feb2b2;
	--text-red-400: #fc8181;
	--text-red-500: #f56565;
	--text-red-600: #e53e3e;
	--text-red-700: #c53030;
	--text-red-800: #9b2c2c;	
	--text-red-900: #742a2a;	
	--text-orange-100: #fffaf0;	
	--text-orange-200: #feebc8;	
	--text-orange-300: #fbd38d;	
	--text-orange-400: #f6ad55;	
	--text-orange-500: #ed8936;	
	--text-orange-600: #dd6b20;	
	--text-orange-700: #c05621;	
	--text-orange-800: #9c4221;	
	--text-orange-900: #7b341e;	
	--text-yellow-100: #fffff0;	
	--text-yellow-200: #fefcbf;	
	--text-yellow-300: #faf089;	
	--text-yellow-400: #f6e05e;	
	--text-yellow-500: #ecc94b;	
	--text-yellow-600: #d69e2e;	
	--text-yellow-700: #b7791f;	
	--text-yellow-800: #975a16;	
	--text-yellow-900: #744210;	
	--text-green-100: #f0fff4;	
	--text-green-200: #c6f6d5;	
	--text-green-300: #9ae6b4;	
	--text-green-400: #68d391;	
	--text-green-500: #48bb78;	
	--text-green-600: #38a169;	
	--text-green-700: #2f855a;	
	--text-green-800: #276749;	
	--text-green-900: #22543d;	
	--text-teal-100: #e6fffa;	
	--text-teal-200: #b2f5ea;	
	--text-teal-300: #81e6d9;	
	--text-teal-400: #4fd1c5;	
	--text-teal-500: #38b2ac;	
	--text-teal-600: #319795;	
	--text-teal-700: #2c7a7b;	
	--text-teal-800: #285e61;	
	--text-teal-900: #234e52;	
	--text-blue-100: #ebf8ff;	
	--text-blue-200: #bee3f8;	
	--text-blue-300: #90cdf4;	
	--text-blue-400: #63b3ed;	
	--text-blue-500: #4299e1;	
	--text-blue-600: #3182ce;	
	--text-blue-700: #2b6cb0;	
	--text-blue-800: #2c5282;	
	--text-blue-900: #2a4365;
	--text-indigo-100: #ebf4ff;
	--text-indigo-200: #c3dafe;	
	--text-indigo-300: #a3bffa;	
	--text-indigo-400: #7f9cf5;	
	--text-indigo-500: #667eea;	
	--text-indigo-600: #5a67d8;	
	--text-indigo-700: #4c51bf;	
	--text-indigo-800: #434190;	
	--text-indigo-900: #3c366b;	
	--text-purple-100: #faf5ff;	
	--text-purple-200: #e9d8fd;	
	--text-purple-300: #d6bcfa;	
	--text-purple-400: #b794f4;	
	--text-purple-500: #9f7aea;	
	--text-purple-600: #805ad5;	
	--text-purple-700: #6b46c1;	
	--text-purple-800: #553c9a;	
	--text-purple-900: #44337a;	
	--text-pink-100: #fff5f7;	
	--text-pink-200: #fed7e2;	
	--text-pink-300: #fbb6ce;	
	--text-pink-400: #f687b3;	
	--text-pink-500: #ed64a6;	
	--text-pink-600: #d53f8c;	
	--text-pink-700: #b83280;	
	--text-pink-800: #97266d;	
	--text-pink-900: #702459;	
	--text-red-1: #e54c3c;
	--text-red-2: #f0614c;
	--text-blue-1: #00acff;
	--text-blue-2: #81d1ed;
	--text-blue-3: #a4dcea;
	--text-gray-1: #757a88;
	--text-gray-2: #666666;
	--text-gray-3: #ababab;
	--text-gray-4: #e9ebed;
}

h1, h2, h3, p, a, span, div, section, ol, ul, li {
	font-family: h3dp_roboto_regular;
}

.condensed {
	font-family: h3dp_roboto_condensed_regular;
}

.reg-font {
	font-family: h3dp_roboto_regular;
}

/*Text Styling*/
.active-blue-1.active {
	font-weight: bold;
	color: #e54c3c;
}

/*Tab Styling*/
.profile-tab.active,
.modlib-tab.active, 
.order-tab.active,
.turnkey-tab.active,
.projreffiles-tab.active,
.projreviewablefiles-tab.active,
.projdeliverablefiles-tab.active,
.vendorcomms-tab.active {
	border-bottom: 2px solid var(--text-red-1);
	color: var(--text-blue-1);
}

.print-tab.active {
	background-color: #00acff;
	color: white;
}

.material-tab.active,
.gallery-tab.active {
	color: #00acff;
	margin-bottom: 5px;
	border-bottom: 3px solid #00acff;
}

.startproject-tab.active,
.quotetype-tab.active {
	border-bottom: 2px solid var(--text-red-1);
	color: var(--text-blue-1);
}

/*3D Autoquoter Styling*/
.hide-autoquote-interactive {
	display: none;
}

/*Checkout Styling*/
.fulfillment-shipping-3dp,
.fulfillment-pickup-3dp, 
.fulfillment-shipping,
.fulfillment-pickup {
	background-color: var(--text-blue-1);
	border: none;
	width: 160px!important;
	height: 30px!important;
}

.fulfillment-shipping-3dp:hover,
.fulfillment-pickup-3dp:hover, 
.fulfillment-shipping:hover,
.fulfillment-pickup:hover {
	background-color: var(--text-blue-2);
}

.fulfillment-shipping-3dp.active,
.fulfillment-pickup-3dp.active,
.fulfillment-shipping.active,
.fulfillment-pickup.active {
	background-color: var(--text-blue-1);
}

.fulfillment-shipping-3dp.active:hover,
.fulfillment-pickup-3dp.active:hover,
.fulfillment-shipping.active:hover,
.fulfillment-pickup.active:hover {
	background-color: var(--text-blue-2);
}

/*Dropdown Hover*/
.dropdown:hover .dropdown-menu {
  display: block;
}

/*Accordion Styling*/
.modlib-section label:after {
	content: "\f107";
    font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	right: 1em;
	color: var(--text-blue-500);
}

.modlib-section input:checked + label:after {
	content: "\f106";
    font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	line-height: .8em;
}

.accordion__content{
	max-height: 0em;
	transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
.modlib-section input[name='panel']:checked ~ .accordion__content {
	/* Get this as close to what height you expect */
	max-height: 50em;
}

.modlib-section input[name='panel']:checked ~  label {
	font-weight: 500;
}

/*Navigation Slider Dots*/
.nav-dots {
	width: 100%;
	height: 11px;
	display: block;
	text-align: center;
}

.nav-dots .nav-dot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
}

.nav-dots .nav-dot.active {
	background: white;
}

/* Masonry image styling */
.grid {
	background: #fff;
}

/* clear fix */
.grid:after {
	content: '';
	display: block;
	clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
	width: 33.333%;
}

.grid-item {
	float: left;
}

.grid-item img {
	display: block;
	max-width: 100%;
	padding: 5px;
}

/* Carousel Control */


.product-slider { padding: 5px; padding-bottom: 25px; }

.product-slider #carousel { border: 1px solid #e54c3c; margin: 0; }

.product-slider #thumbcarousel { margin: 12px 0 0; padding: 0 45px; }

.product-slider #thumbcarousel .item { text-align: center; }

.product-slider #thumbcarousel .item .thumb { border: 1px solid #00acff; width: 75px; margin: 0 2%; display: inline-block; vertical-align: middle; cursor: pointer; max-width: 120px; margin: 5px; }

.product-slider #thumbcarousel .item .thumb:hover { border-color: #1089c0; }

.product-slider .item img { width: 100%; height: auto; }

.carousel-control { color: #0284b8; text-align: center; text-shadow: none; font-size: 30px; width: 30px; height: 30px; line-height: 20px; top: 23%; }

.carousel-control:hover, .carousel-control:focus, .carousel-control:active { color: #333; }

.carousel-caption, .carousel-control .fa { font: normal normal normal 30px/26px FontAwesome; }
.carousel-control { background-color: rgba(0, 0, 0, 0); bottom: auto; font-size: 20px; left: 0; position: absolute; top: 30%; width: auto; }

.carousel-control.right, .carousel-control.left { background-color: rgba(0, 0, 0, 0); background-image: none; }

.multi-item-carousel{
  .carousel-inner{
    > .item{
      transition: 500ms ease-in-out left;
    }
   
    @media all and (transform-3d), (-webkit-transform-3d) {
      > .item{
        // use your favourite prefixer here
        transition: 500ms ease-in-out left;
        transition: 500ms ease-in-out all;
        backface-visibility: visible;
        transform: none!important;
      }
    }
  }

  }

.carousel-control-hp-slider{
	background-image: none;
	color: #fff!important;
	display: none;
}

.carousel {
  position: relative;
}
.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.carousel-inner > .item {
  position: relative;
  display: none;
  -webkit-transition: .6s ease-in-out left;
       -o-transition: .6s ease-in-out left;
          transition: .6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
  left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
  left: 100%;
}
.carousel-inner > .prev {
  left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}
.carousel-inner > .active.left {
  left: -100%;
}
.carousel-inner > .active.right {
  left: 100%;
}
.carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  font-size: 20px;
  color: #fff;
  text-align: center;
}


.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
  left: 50%;
  margin-left: -10px;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
  right: 50%;
  margin-right: -10px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  font-family: serif;
}
.carousel-control .icon-prev:before {
  content: '\2039';
}
.carousel-control .icon-next:before {
  content: '\203a';
}
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;
}
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #fff;
  border-radius: 10px;
}
.carousel-indicators .active {
  width: 12px;
  height: 12px;
  margin: 0;
  background-color: #fff;
}
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.carousel-caption .btn {
  text-shadow: none;
}
@media screen and (min-width: 768px) {
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-prev,
  .carousel-control .icon-next {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    font-size: 30px;
  }
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .icon-prev {
    margin-left: -15px;
  }
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-next {
    margin-right: -15px;
  }
  .carousel-caption {
    right: 20%;
    left: 20%;
    padding-bottom: 30px;
  }
  .carousel-indicators {
    bottom: 20px;
  }
}

/* Design Help Styles */

.dh-steps-container {
	width: 300px;
	margin: 0 auto;
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
	justify-content: space-between;
}

.dh-form-container {
	width: 350px;
	margin: 0 auto;
}


.dh-form-titlebar {
	padding: 0px; 
	margin-top: 25px;
	margin-bottom: 25px;
	height:auto;
	padding-top: 0px;
    padding-bottom: 0px;
    font-size: 28px;
    text-align: center;
    font-family: h3dp_roboto_condensed_regular;
	letter-spacing: 1px;
	color: #00acff;
	width: 100%;
}

.dh-form-titlebar.short {
	margin-top: 5px;
	margin-bottom: 5px;
	padding-bottom: 0px;
}

.dh-form-titlebar.smaller {
	margin-top: 0px;
    font-size: 16px;
	color: var(--text-blue-900);
}

.dh-button-bar {
	width: 100%; 
	display: flex;
	flex-direction: row;
	align-items: middle;
	margin-top: 25px;
	margin-bottom: 15px;
}

.btn-dh-next {
	background: #00acff;
	text-transform: uppercase;
	font-family: h3dp_roboto_medium;
	font-size: 16px;
	text-align: center;
	color: #fff;
	border: none;
	margin: 0 auto;
	width: 100px;
}

.btn-dh-next.submit {
	background: var(--text-green-600);
	text-transform: uppercase;
	font-family: h3dp_roboto_medium;
	font-size: 16px;
	text-align: center;
	color: #fff;
	border: none;
	margin: 0 auto;
	width: 100px;
}

.dh-p1-textarea {
	font-family: h3dp_roboto_light;
	font-size: 18px;
	color: #000;
	height: 90%;
	width:  100%;
	resize: none;
	border: 1px solid #4c4a49;
	border-radius: 5px;
	padding-left: 15px;
	padding-right: 15px;
}
.dh-p1-textarea.error {
	border: 2px solid var(--text-red-600);
}

.dh-p1-textarea:focus {
	box-shadow: 0 0 5px rgba(229, 76, 60, 1);
	border: 1px solid rgba(229, 76, 60, 1);
}

.dh-p1-wrapper {
	display: grid;
	grid-template-columns: 350px;
	grid-template-rows: 30px 50px 30px 30px 50px;
	margin: 0 auto!important;
} 

.dh-p1-fnheader {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 1;
	font-family: h3dp_roboto_bold;
	font-size: 16px;
	color: #4c4a49;
	text-align: left;
}

.dh-p1-fn {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 2;
	font-family: h3dp_roboto_regular;
	font-size: 16px;
	color: #000;
	text-align: left;
}

.dh-p1-lnheader {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 4;
	grid-row-end: 4;
	font-family: h3dp_roboto_bold;
	font-size: 16px;
	color: #4c4a49;
	text-align: left;
}

.dh-p1-ln {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 5;
	grid-row-end: 5;
	font-family: h3dp_roboto_regular;
	font-size: 16px;
	color: #000;
	text-align: left;
}

.dh-p2-textarea {
	font-family: h3dp_roboto_light;
	font-size: 18px;
	color: #000;
	height: 90%;
	width:  100%;
	resize: none;
	border: 1px solid #4c4a49;
	border-radius: 5px;
	padding-left: 15px;
	padding-right: 15px;
	display: block;
	float: left;
}

.dh-p2-textarea:focus {
	box-shadow: 0 0 5px rgba(229, 76, 60, 1);
	border: 1px solid rgba(229, 76, 60, 1);
}

.dh-p2-wrapper {
	display: grid;
	grid-template-columns: 350px;
	grid-template-rows: 140px 250px;
	margin: 0 auto!important;
} 

.dh-p2-desc-header {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 1;
	font-family: h3dp_roboto_condensed_regular;
	font-size: 16px;
	color: #4c4a49;
	text-align: left;
}

.dh-p2-desc {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 2;
	font-family: h3dp_roboto_regular;
	font-size: 16px;
	color: #000;
	text-align: left;
}

.dh-p3-optionbox {
    font-family: h3dp_roboto_light;
    font-size: 18px;
    color: #000;
    height: 90%;
    width:  100%;
    resize: none;
    border: 1px solid #4c4a49;
    border-radius: 5px;
    padding-left: 15px;
    padding-right: 15px;
}

.dh-p3-optionbox:active {
    box-shadow: 0 0 5px rgba(229, 76, 60, 1);
    border: 1px solid rgba(229, 76, 60, 1);
}

.dh-p3-wrapper {
    display: grid;
    grid-template-columns: 350px;
    grid-template-rows: 100px 20px 100px 20px 100px 20px 100px;
    margin: 0 auto!important;
	align-items: center;
} 

.dh-p3a-wrapper {
    display: grid;
    grid-template-columns: 350px;
    grid-template-rows: 100px 20px 100px 20px 100px;
    margin: 0 auto!important;
	align-items: center;
} 

.dh-p3-opt1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
    font-family: h3dp_roboto_regular;
    font-size: 14px;
    color: #000;
    text-align: left;
    border: 1px solid #000;
    border-radius: 5px;
    cursor: pointer;
    padding-left: 15px;
    padding-right: 15px;
    background: #eeeeee;
    height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.dh-p3-opt2{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 3;
    font-family: h3dp_roboto_regular;
    font-size: 14px;
    color: #000;
    text-align: left;
    border: 1px solid #000;
    border-radius: 5px;
    cursor: pointer;
    padding-left: 15px;
    padding-right: 15px;
    background: #eeeeee;
    height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.dh-p3-opt3 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 5;
    grid-row-end: 5;
    font-family: h3dp_roboto_regular;
    font-size: 14px;
    color: #000;
    text-align: left;
    border: 1px solid #000;
    border-radius: 5px;
    cursor: pointer;
    padding-left: 15px;
    padding-right: 15px;
    background: #eeeeee;
    height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.dh-p3-opt4 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 7;
    grid-row-end: 7;
    font-family: h3dp_roboto_regular;
    font-size: 14px;
    color: #000;
    text-align: left;
    border: 1px solid #000;
    border-radius: 5px;
    cursor: pointer;
    padding-left: 15px;
    padding-right: 15px;
    background: #eeeeee;
    height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}



.dh-p3-opt1:hover, .dh-p3-opt2:hover, .dh-p3-opt3:hover, .dh-p3-opt4:hover {
    background: #fff;
    /*box-shadow: 0 0 5px var(--text-blue-1);*/
    border: 3px solid var(--text-blue-1); 
}

.dh-p3-opt1.active, .dh-p3-opt2.active, .dh-p3-opt3.active, .dh-p3-opt4.active {
    background: #fff;
    /*box-shadow: 0 0 5px var(--text-blue-1);*/
    border: 3px solid var(--text-blue-1); 
}

.dh-p3-opt1.error, .dh-p3-opt2.error, .dh-p3-opt3.error, .dh-p3-opt4.error {
	border: 2px solid var(--text-red-600);
}

.dh-p4-wrapper {
    display: grid;
    grid-template-columns: 350px;
    grid-template-rows: 150px;
    margin: 0 auto!important;
} 

.dh-p4-fu {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	font-family: h3dp_roboto_regular;
	font-size: 16px;
	color: #000;
	border: 2px solid #000;
	border-radius: 5px;
	display: flex;
    align-items: center;

}

.dh-p4-fu:hover {
	box-shadow: 0 0 5px rgba(229, 76, 60, 1);
	border: 2px solid rgba(229, 76, 60, 1);
}

.home-hdiv {
	height: 2px;
    width: 90%;
    background: #CCC;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

.quote-options-flexbox-rev {
	display: flex; 
	flex-direction: row;
	align-items: center;
	height: auto;
	width: 80%;
	text-align: center;
	background: rgba(255, 255, 255, 0.9);
	margin: 0 auto;
	margin-bottom: 10px;
	border-radius: 5px;
}

.quote-options-heading {
	padding-left: 50px;
	padding-right: 50px;
}

.quote-options-heading > h1 {
	font-size: 28px;
	font-family: h3dp_roboto_condensed_regular;
	font-weight: 500;
	letter-spacing: 1.5px;
	color: #4c4a49;
	margin: 1.5em 0 0.5em;
	margin: auto 0;
}

.quote-options-heading > p {
	font-size: 16px;
    font-family: h3dp_roboto_regular;
	letter-spacing: 1px;
	color: #4c4a49;
    padding-top: 20px;
    margin-bottom: 10px;
}


.tooltipster-default {
    border: 1px solid #3dbae5;
    background: #3dbae5;
    color: #FFF;
    max-width: 275px
}

.tooltipster-default .tooltipster-content {
    line-height: initial;
    padding: 0;
    overflow: hidden
}

.tooltipster-default .tooltipster-content .dh-tooltip {
    margin: 2px;
    padding: 8px;
    text-align: center
}

.tooltipster-default .tooltipster-content .dh-tooltip .dh-tooltip-title {
    padding-bottom: 3px;
    text-align: center;
    font-size: 14px;
    font-family: h3dp_roboto_regular;
    color: #ecf8fc
}

.tooltipster-default .tooltipster-content .dh-tooltip .dh-tooltip-msg {
    font-size: 10px;
    font-family: h3dp_roboto_light;
    letter-spacing: .05em;
    color: #e3f5fb
}

.tooltipster-errortip {
    border: 1px solid #CD5151;
    background: #CD5151;
    color: #FFF;
    max-width: 275px;
    z-index: 1030!important
}

.tooltipster-errortip .tooltipster-content {
    line-height: initial;
    padding: 0;
    overflow: hidden
}

.tooltipster-errortip .tooltipster-content .dh-tooltip {
    margin: 2px;
    padding: 3px;
    text-align: center
}

.tooltipster-errortip .tooltipster-content .dh-tooltip .dh-tooltip-title {
    padding-bottom: 0;
    text-align: center;
    font-family: h3dp_roboto_regular;
    color: #e8b0b0
}

@media (max-width:767px) {
    .tooltipster-errortip .tooltipster-content .dh-tooltip .dh-tooltip-title {
        font-size: 10px
    }
}

@media (min-width:768px) {
    .tooltipster-errortip .tooltipster-content .dh-tooltip .dh-tooltip-title {
        font-size: 14px
    }
}

.tooltipster-errortip .tooltipster-content .dh-tooltip .dh-tooltip-msg {
    font-family: h3dp_roboto_light;
    letter-spacing: .05em;
    color: #FFF
}

@media (max-width:767px) {
    .tooltipster-errortip .tooltipster-content .dh-tooltip .dh-tooltip-msg {
        font-size: 8px
    }
}

@media (min-width:768px) {
    .tooltipster-errortip .tooltipster-content .dh-tooltip .dh-tooltip-msg {
        font-size: 10px
    }
}

.tooltipster-icon {
    cursor: help;
    margin-left: 4px
}

.tooltipster-base {
    padding: 0;
    font-size: 0;
    line-height: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999999;
    pointer-events: none;
    width: auto;
    overflow: visible
}

.tooltipster-base .tooltipster-content {
    overflow: hidden
}

.tooltipster-arrow {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

.tooltipster-arrow span,
.tooltipster-arrow-border {
    display: block;
    width: 0;
    height: 0;
    position: absolute
}

.tooltipster-arrow-top span,
.tooltipster-arrow-top-left span,
.tooltipster-arrow-top-right span {
    border-left: 8px solid transparent!important;
    border-right: 8px solid transparent!important;
    border-top: 8px solid;
    bottom: -7px
}

.tooltipster-arrow-top .tooltipster-arrow-border,
.tooltipster-arrow-top-left .tooltipster-arrow-border,
.tooltipster-arrow-top-right .tooltipster-arrow-border {
    border-left: 9px solid transparent!important;
    border-right: 9px solid transparent!important;
    border-top: 9px solid;
    bottom: -7px
}

.tooltipster-arrow-bottom span,
.tooltipster-arrow-bottom-left span,
.tooltipster-arrow-bottom-right span {
    border-left: 8px solid transparent!important;
    border-right: 8px solid transparent!important;
    border-bottom: 8px solid;
    top: -7px
}

.tooltipster-arrow-bottom .tooltipster-arrow-border,
.tooltipster-arrow-bottom-left .tooltipster-arrow-border,
.tooltipster-arrow-bottom-right .tooltipster-arrow-border {
    border-left: 9px solid transparent!important;
    border-right: 9px solid transparent!important;
    border-bottom: 9px solid;
    top: -7px
}

.tooltipster-arrow-bottom .tooltipster-arrow-border,
.tooltipster-arrow-bottom span,
.tooltipster-arrow-top .tooltipster-arrow-border,
.tooltipster-arrow-top span {
    left: 0;
    right: 0;
    margin: 0 auto
}

.tooltipster-arrow-bottom-left span,
.tooltipster-arrow-top-left span {
    left: 6px
}

.tooltipster-arrow-bottom-left .tooltipster-arrow-border,
.tooltipster-arrow-top-left .tooltipster-arrow-border {
    left: 5px
}

.tooltipster-arrow-bottom-right span,
.tooltipster-arrow-top-right span {
    right: 6px
}

.tooltipster-arrow-bottom-right .tooltipster-arrow-border,
.tooltipster-arrow-top-right .tooltipster-arrow-border {
    right: 5px
}

.tooltipster-arrow-left .tooltipster-arrow-border,
.tooltipster-arrow-left span {
    border-top: 8px solid transparent!important;
    border-bottom: 8px solid transparent!important;
    border-left: 8px solid;
    top: 50%;
    margin-top: -7px;
    right: -7px
}

.tooltipster-arrow-left .tooltipster-arrow-border {
    border-top: 9px solid transparent!important;
    border-bottom: 9px solid transparent!important;
    border-left: 9px solid;
    margin-top: -8px
}

.tooltipster-arrow-right .tooltipster-arrow-border,
.tooltipster-arrow-right span {
    border-top: 8px solid transparent!important;
    border-bottom: 8px solid transparent!important;
    border-right: 8px solid;
    top: 50%;
    margin-top: -7px;
    left: -7px
}

.tooltipster-arrow-right .tooltipster-arrow-border {
    border-top: 9px solid transparent!important;
    border-bottom: 9px solid transparent!important;
    border-right: 9px solid;
    margin-top: -8px
}

.tooltipster-fade {
    opacity: 0;
    -webkit-transition-property: opacity;
    transition-property: opacity
}

.tooltipster-fade-show {
    opacity: 1
}

.tooltipster-grow {
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-backface-visibility: hidden
}

.tooltipster-grow-show {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1);
    -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1.15);
    transition-timing-function: cubic-bezier(.175, .885, .32, 1.15)
}

.tooltipster-swing {
    opacity: 0;
    -webkit-transform: rotateZ(4deg);
    -ms-transform: rotateZ(4deg);
    transform: rotateZ(4deg);
    -webkit-transition-property: -webkit-transform, opacity;
    transition-property: transform
}

.tooltipster-swing-show {
    opacity: 1;
    -webkit-transform: rotateZ(0);
    -ms-transform: rotateZ(0);
    transform: rotateZ(0);
    -webkit-transition-timing-function: cubic-bezier(.23, .635, .495, 1);
    -webkit-transition-timing-function: cubic-bezier(.23, .635, .495, 2.4);
    transition-timing-function: cubic-bezier(.23, .635, .495, 2.4)
}

.tooltipster-fall {
    top: 0;
    -webkit-transition-property: top;
    transition-property: top;
    -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1);
    -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1.15);
    transition-timing-function: cubic-bezier(.175, .885, .32, 1.15)
}

.tooltipster-fall.tooltipster-dying {
    -webkit-transition-property: all;
    transition-property: all;
    top: 0!important;
    opacity: 0
}

.tooltipster-slide {
    left: -40px;
    -webkit-transition-property: left;
    transition-property: left;
    -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1);
    -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1.15);
    transition-timing-function: cubic-bezier(.175, .885, .32, 1.15)
}

.tooltipster-slide.tooltipster-dying {
    -webkit-transition-property: all;
    transition-property: all;
    left: 0!important;
    opacity: 0
}

.tooltipster-content-changing {
    opacity: .5;
    -webkit-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1)
}

/*MEGA MENU CSS*/

/* #Mega Menu Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mega-menu {
    display: none;
    left: 0;
    top: 98.55px;
    position: fixed;
    text-align: left;
    width: 100%;
    height: 90%;
    overflow-y: scroll;
}



/* #hoverable Class Styles–––––––––––––––––––––––––––––––––––– */
.hoverable {
    position: static;
}

.hoverable:hover > a {
    color: var(--text-blue-1);
}

/*.hoverable:hover > a:after {
    content: "\25BC";
    font-size: 10px;
    padding-left: 2px;
    position: relative;
    top: -1px;
}*/

/*.hoverable > a:after {
    content: "\25BC";
    font-size: 10px;
    padding-left: 6px;
    position: relative;
    top: -1px;
}*/

.hoverable:hover .mega-menu {
    display: block;
}


/* #toggle Class Styles––––––––––––––––––––––– */

.toggleable > label:after {
    content: "\25BC";
    font-size: 10px;
    padding-left: 6px;
    position: relative;
    top: -1px;
}

.toggle-input {
    display: none;
}
.toggle-input:not(checked) ~ .mega-menu {
    display: none;
}

.toggle-input:checked ~ .mega-menu {
    display: block;
}

.toggle-input:checked + label {
    color: white;
    background: #2c5282; /*@apply bg-blue-800 */
}

.toggle-input:checked ~ label:after {
    content: "\25B2";
    font-size: 10px;
    padding-left: 6px;
    position: relative;
    top: -1px;
}

/***Homepage Image Block Overlay / Styles***/
/*
.hpTopBannerOverlay {
    background: #000;
    opacity: 40%;
}
*/

.hpImageOverlay {
    background: #000;
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 60%;
}

.hpImageOverlay:hover {
    opacity: 0%;
}

.hpImageEl:hover > p, .hpImageEl:hover > h3, .hpImageEl:hover > h4 {
    display: none;
} 

/***Our Work Gallery Styles***/
.ourWorkImageOverlay {
    background: #000;
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 40%;
}

.ourWorkImageOverlay:hover {
    opacity: 0%;
}

.ourWorkImageEl > .ourWorkImagePopover {
    display: none;
} 

.ourWorkImageEl:hover > .ourWorkImagePopover {
    /*display: block;(*/
    display: none;
} 

.selectionGrid-item {
    cursor: pointer;
    background: none;
    color: #000;
}

.selectionGrid-item.active {
    background: var(--text-blue-1);
    color: #FFF;
}

.collectionGrid-item {
    width: 33%;
    padding: 2px 2px 2px 2px;
}

@media (max-width:768px) {
    .collectionGrid-item {
        width: 50%;
    }
}

.text-xxs {
    font-size: 0.65rem;
}

/* Disclaimer Checkbox on "Get A Quote" page */

.disclaimer-checkbox {
    width: 16px;
    height: 16px;
    border: 8px solid var(--text-blue-1);
    border-radius: 12px; /* Optional: makes the checkbox slightly rounded */
    outline: none; /* Removes default focus outline */
    cursor: pointer;
}

.disclaimer-checkbox:focus {
    border-color: var(--text-blue-1); /* Changes border color on focus */
    /*box-shadow: 0 0 10px var(--text-green-800);*/ /* Adds a blue glow effect */
}

/* Homepage banner carousel styling [030825 version] */

.hpTopBannerOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1); /* 40% opacity black overlay */
    z-index: 2; /* Ensure it's above the background images */
    pointer-events: none; /* Prevents interaction issues */
}

.banner-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 1.5s ease-in-out; /* Smooth fade effect */
}

.fade-in {
    opacity: 1;
}

.fade-out {
    opacity: 0;
}