body {
  font-family: "Signika", sans-serif !important;
  color: #333; }

@media (max-width: 575px) {
	header.py-5 {
		padding: 15px 0 !important;
	}
}

header p,
header address {
  margin-bottom: 5px;
  font-size: 14px; }
  header p:last-of-type,
  header address:last-of-type {
    margin-bottom: 0; }
  header p label,
  header address label {
    font-weight: 300; }

@media (min-width: 576px) {
	
	.address-col {
		order: 0;
	}
	.logo-col {
		order: 1;
	}
	.contact-info-col {
		order: 2;
	}
}

a {
	color: rgba(17, 89, 155, 0.75);
}

a.logo {
	margin-top: 15px;
	display: inline-block;
	text-decoration: none; 
}
a.logo img {
	vertical-align: middle; 
}
a.logo span {
	font-size: 28px;
	color: #ffffff;
	display: block;
}

@media (min-width: 992px) {
	a.logo {
		margin-bottom: 0;
	}
	a.logo span {
		display: inline-block;
	vertical-align: middle;
		font-size: 48px;
			padding-left: 15px;
	margin-left: 15px;
	border-left: 1px solid rgba(255, 255, 255, 0.5); 
	}
}

a.nav-toggle {
	color: #ffffff !important;
	cursor: pointer;
	display: block;
}

ul.nav-root ul a.disabledlink {
	color: #999;
}
.navcaret {
	color: #999;
}

nav.main-menu a {
	text-decoration: none;
}

@media (max-width: 991px) {
	nav.main-menu {
		padding: 30px 0;
	}
	nav.main-menu ul.nav-root {
		display: flex;
		flex-direction: column;
		list-style: none;
		margin: 0;
		padding: 0; 
	}
	nav.main-menu ul.nav-root li {
	  list-style: none;
	  margin: 0;
	  padding: 0;
	 
	}
	nav.main-menu ul.nav-root > li > ul {
	  /*display: none;*/
	}

	.navcaret {
		position: absolute;
		right: 0;
		top: 0;
		padding: 0 15px;
		display: inline-block;
		z-index: 1;
	}

	nav.main-menu ul.nav-root > li {
	  flex: 1;
	  position: relative;
	}
	nav.main-menu ul.nav-root > li > .navcaret {
		line-height: 57px;
		cursor: pointer;
		
	}
	nav.main-menu ul.nav-root ul > li > .navcaret {
	
	}
	nav.main-menu ul.nav-root ul ul > li > .navcaret {
		line-height: 27px;

	}

	 nav.main-menu ul.nav-root > li > a {
		display: block;
		padding: 15px 0;
		color: #fff;
		font-weight: 700;
		font-size: 18px;
		text-decoration: none;
		white-space: nowrap;
		position: relative;
		z-index: 0;
	}
	nav.main-menu ul.nav-root > li:hover > ul {

	}

	ul.nav-root > li > ul {
		display: none;
		color: #0056b3;
		margin: 0;
		background: #fff;
		padding: 15px;
		border-radius: 2px;
		box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
	}
	ul.nav-root ul li {
		position: relative;
	}
	ul.nav-root ul li .navcaret {
		line-height: 37px;
		cursor: pointer;
	}
	ul.nav-root ul li .navcaret:hover {
		color: rgba(17, 89, 155, 0.75);
	}
	ul.nav-root > li > ul > li > a {
		line-height: 37px;
		font-size: 16px;
		text-align: left;
		white-space: nowrap;
		padding: 0 45px 0 15px;
		transition: all 0.25s ease;
		display: block; 
	}

	ul.nav-root ul ul {
	  margin: 0;
	  padding: 0;
		display: none;
	}

	ul.nav-root ul ul li {
		position: relative;
	}

	ul.nav-root ul ul a {
		padding: 3px 0 3px 30px;
		font-size: 14px;
		display: block;
	}

	ul.nav-root ul ul ul a {
		padding: 3px 0 3px 45px;
		font-size: 14px;
		display: block; 
	}
}

@media (min-width: 992px) {
	nav.main-menu {
	  position: relative;
	  z-index: 1; 
	}
	nav.main-menu ul.nav-root {
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0; 
	}
	nav.main-menu ul.nav-root li {
	  list-style: none;
	  margin: 0;
	  padding: 0;
	}
	nav.main-menu ul.nav-root > li > ul {
	  /*display: none;*/
	}

	.navcaret {
		position: absolute;
		right: 0;
		top: 0;
		padding: 0 30px;
		display: inline-block;
		z-index: 1;
	}

	nav.main-menu ul.nav-root > li {
	  flex: 1;
	  position: relative;
	}
	nav.main-menu ul.nav-root > li > .navcaret {
		line-height: 57px;
	}
	nav.main-menu ul.nav-root ul ul > li > .navcaret {
		line-height: 27px;
	}

	 nav.main-menu ul.nav-root > li > a {
		display: block;
		padding: 15px 60px 15px 15px;
		color: #fff;
		font-weight: 700;
		font-size: 18px;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		position: relative;
		z-index: 0;
	}
	nav.main-menu ul.nav-root > li:hover > ul {
		display: block;
	}

	ul.nav-root > li > ul {
	  display: none;
	  color: #0056b3;
	  margin: 0;
	  padding: 0;
	  position: absolute;
	  top: 50px;
	  left: 0;
	  background: #fff;
	  padding: 15px;
	  border-radius: 2px;
	  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
	}
	
	
	ul.nav-root > li:last-of-type > ul {
		left: auto;
		right: 0;
	}
	
	/* second level */
	
	ul.nav-root ul li {
		position: relative;
	}
	ul.nav-root ul li .navcaret {
		padding: 0 15px;
		line-height: 37px;
		cursor: pointer;
	}
	ul.nav-root ul li .navcaret:hover {
		color: rgba(17, 89, 155, 0.75);
	}
	ul.nav-root > li > ul > li > a {
		line-height: 37px;
		font-size: 16px;
		text-align: left;
		white-space: nowrap;
		padding: 0 45px 0 15px;
		transition: all 0.25s ease;
		display: block; 
		text-decoration: none;
	}

	/* third level */
	
	
	ul.nav-root ul > li:hover > ul {
		display: block;
	}
	
	ul.nav-root ul ul {
	  display: none;
	  color: #0056b3;
	  margin: 0;
	  position: absolute;
	  top: -10px;
	  left: 100%;
	  background: #fff;
	  padding: 15px;
	  border-radius: 2px;
	  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
	}

	ul.nav-root ul ul li {
		position: relative;
	}

	ul.nav-root ul ul a {
		padding: 0 45px 0 15px;
		display: block;
		line-height: 37px;
		white-space: nowrap;
	}

	ul.nav-root ul ul ul a {
		padding: 0 45px 0 15px;
		display: block; 
	}
	
	/* fourth level */
	
	ul.nav-root ul ul > li:hover > ul {
		display: block;
	}
	
	
}





main {
  position: relative;
  z-index: 0;
  padding: 30px 0;
}

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

@media (max-width: 767px) {
	.SM_Color img {
		max-width: 10px;
		height: 10px;
	}
}

@media (min-width: 992px) {
	main {
		padding: 90px 0;
	}
	main.split {
	   background: linear-gradient(90deg, #3f9bce 50%, #FFFFFF 50%); 
	}
}
main.split {
	
	padding: 0;
}

.main-split-column {
	padding: 30px;
}

/* team member */

@media (max-width: 767px) {
	.team-leader img {
		max-width: 300px;
	}
}

.text-400  {
	font-weight: 400;
}

.team-member {
	margin-bottom: 1em;
}

.team-member:last-of-type {
	margin-bottom: 0;
}

.team-member a {
	word-break: break-all;
}

.team-member img {
	max-width: 80%;
}

@media screen and (min-width: 992px) {
	.team-leader {
		border-right: 1px solid #eee;
		padding-right: 60px;
	}
	.team-column {
		padding-left: 60px;
	}
	.team-member {
		margin-bottom: 3em;
	}
}

/* document listing */

.document-list {
	margin-bottom: 60px;
}

.document-item {
	margin-bottom: 10px;
}
.document-item a {
	display: inline-block;
	text-decoration: none;
	padding: 5px 10px;
}
.document-item a:hover {
	background: #f9f9f9;
}
.document-item a .fa {
	margin-right: 10px;
}
.document-item a small {
	color: #999;
}

/* color picker panel and table */

.color-picker-panel table td {
	padding-bottom: 20px;

}

@media (min-width: 992px) {
	.sidebar {
		order: 0;
	}
	.main-split-column {
		padding: 5rem;
		order: 1;
	}
}


@media (max-width:768px) {
	.break-small {
		display: block;
	}
}

hr {
  border-top-color: #fff; }

.btn-link-light {
  color: #fff; }

.navcaret {
	margin-left: 10px;
}

.sidebar-nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
  .sidebar-nav ul li {
    margin: 0;
    padding: 0; }
    .sidebar-nav ul li span,
    .sidebar-nav ul li > a {
      display: block;
      margin-bottom: 10px;
      color: #fff; }
      .sidebar-nav ul li span.active,
      .sidebar-nav ul li > a.active {
        font-weight: bold;
        color: #0f4f8c;
        background: #fff; }
    .sidebar-nav ul li ul {
      margin: 10px 0; }
      .sidebar-nav ul li ul li a {
        font-size: 14px;
        padding: 5px 15px;
        margin-bottom: 0;
        color: #fff; }

      .sidebar-nav ul li ul li ul li a {
        font-size: 14px;
        padding: 5px 30px;
        margin-bottom: 0;
        color: #fff; }

.products table input.form-control {
  max-width: 50px; }

footer {
  border-top: 1px solid #f1f1f1; }

h1 {
  color: #3f9bce; }

.control-label {
	font-weight: 700;
}

/* i can't set classes on asp.net radio and checkboxes so I'm doing it this way */
.form-check input {
    position: absolute;
    margin-top: .3rem;
    margin-left: -1.25rem;
}
.form-check label {
    margin-bottom: 0;
}
.form-check-inline {
	padding-right: 15px;
	padding-left: 1.25rem;
}
.form-check-inline input {
	margin-top: 0;
}

.form-check-list-net input {
	margin-right: 15px;
	display: inline-block;
}
.form-check-list-net label {
	margin-right: 30px;
	display: inline-block;
}
.form-check-new {
	display: block;
}

select.form-control {
	min-width: 95px !important;
}

.bg-blue-fade {
  color: #ffffff;
  background: rgba(17, 89, 155, 0.75); }

.bg-dark-blue {
  color: #ffffff;
  background: #0f4f8c; }

.small-top-bot-padding {
  padding: 15px 0; }

.base-top-bot-padding {
  padding: 30px 0; }

.huge-top-bot-padding {
  padding: 60px 0; }

.SM_Popup_Outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.75);
    height: 100%;
    z-index: 99;
}
.SM_Popup_Inner {
	margin: 0 auto;
	background: #fff;
	padding: 10px;
	border-radius: 5px;
	max-width: 600px;
	position: relative;
	top: 30px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

@media screen and (min-width: 768px) {
	.SM_Popup_Inner {
		top: 30%;
		padding: 50px;
	}
}

/* AJAX CALENDAR */
.CalendarStyle div{zoom: normal;z-index:1000;}
 
.CalendarStyle .ajax__calendar_container 
{    border:1px solid #646464;    background-color: #E0E0E0;    color: red;}
.CalendarStyle .ajax__calendar_other .ajax__calendar_day,
.CalendarStyle .ajax__calendar_other .ajax__calendar_year {    color: black;}
.CalendarStyle .ajax__calendar_hover .ajax__calendar_day,
.CalendarStyle .ajax__calendar_hover .ajax__calendar_month,
.CalendarStyle .ajax__calendar_hover .ajax__calendar_year {    color: black;}
.CalendarStyle .ajax__calendar_active .ajax__calendar_day,
.CalendarStyle .ajax__calendar_active .ajax__calendar_month,
.CalendarStyle .ajax__calendar_active .ajax__calendar_year {    color: black;    font-weight:bold;}

.bg-info {
	background-color: #277dfa !important;
}
.text-darkblue {
	color: #12488d;
}
.subheading {
	border-radius: 4px;
	line-height: 50px;
	padding: 0 22px;
	font-size: 22px;
}

.subheading:empty {
	display: none !important;
}

#footer {
	background: #10508c;
}

.jumbotron {
	background-color: #e9ecef;
	background-size: cover;
}

.jumbotron h1.display-4 {
	font-weight: 400;
}

@media (max-width: 767px) {
	.jumbotron h1.display-4 {
		font-size: 22px;
	}
	
	.jumbotron .subheading {
		font-size: 16px;
		line-height: 1.4em;
		padding: 10px;
	}
}

.jumbotron-zinger {
	background-image: url(../images/orderzingerheader.jpg); 
	min-height: 371px;
}
.jumbotron-zinger h1 {
	
}
.jumbotron-zinger p {
	font-size: 1.2em;
	font-weight: bold;
}
.rounded-lg {
	border-radius: 15px;
}

nav.header-nav a {
	color: #fff !important;
	font-weight: bold;
	line-height: 50px;
}

@media (min-width: 1200px) {
    ul.logo-tabs {
     display: flex;
     align-items: center;
    }
    ul.logo-tabs li.tabitem {
     flex-grow: 1 !important;
     width: 33%;
    }
    
    ul.logo-tabs li:first-of-type > a.thelink {
        margin-right: 15px;
    }
    ul.logo-tabs li:last-of-type > a.thelink {
        margin-left: 15px;
    }
    
}


ul.logo-tabs {
    margin: 0;
    padding: 0;
    list-style: none;

   
}
ul.logo-tabs li {
    display: inline-block;
    margin: 0 0 15px 0;
    padding: 0;
    vertical-align: bottom;
}
ul.logo-tabs li > a.thelink sup {
    font-size: 11px;
    top: -9px;
}
ul.logo-tabs li > a.thelink.disabled {
    cursor: default;
}
ul.logo-tabs li > a.thelink {
    padding: 6px;
    display: block;
    font-family: 'Century Gothic', Arial;
    font-weight: 300;
    font-size: 22px;
    color: #333;
    text-decoration: none;
    background: #ddd;
	cursor: pointer;
}

ul.logo-tabs li > a.thelink span {
    display: block;
    line-height: 62px;
    padding: 0 10px;
    text-align: center;
    border: 2px solid #f6f3f8;
}
ul.logo-tabs li > a.thelink:hover span {
    border-color: #fff;
    color: #fff;
}


.logo-tabs strong {
    font-size: 28px !important;
}

li.ChromaGLAZE.active a.thelink {
    background: #c01f24;
    color: #fff;
}
li.ChromaGLAZE a.thelink:hover {
    background: #781317;
}

li.EnduraGLAZE.active a.thelink {
    background: #2d81be;
    color: #fff;
}
li.EnduraGLAZE a.thelink:hover {
    background: #1c5177;
}

li.VariGLAZE.active a.thelink {
    background: #5f2e87;
    color: #fff;
}
li.VariGLAZE a.thelink:hover {
    background: #3c1d55;
}

/* zinger order page*/
.Zinger_Cell p {
	text-align: center;
}
.Zinger_Cell strong {
	display: block;
	margin-bottom: 15px;
	font-size: 22px;
	color: #3f9bce !important;
	text-align: center;
}
.Zinger_Cell img {
	margin: 0 auto;
}

.bg-primary {
	background-color: #3f9bce !important;
}

footer#footer a {
	color: #65a0d7;
}

h5.before-after-label {
	right: 0;
	top: 20px;
	display: inline-block;
}

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


/* http://test.sgunit.com/members/test.aspx */

.color-block {
	width: 300px;
	height: 200px;
	margin-bottom: 30px;
}

/*


@media (max-width: 991px) {
    .full-nav-tabs {
         margin: 0 0 30px 0;
    }
    .full-nav-tabs > li {
        padding: 0;
        margin: 0;
    }    
    .full-nav-tabs > li > a {
        display: block;
        font-size: 26px;
        text-align: center;
        border-bottom: 1px solid rgba(17, 89, 155, 0.75);
    }   
    .full-nav-tabs > li.active > a {
        background: #f6f6f6;

    }    
}

@media (min-width: 992px) {
    .full-nav-tabs {
         display: flex;
         margin: 0 0 30px 0;
    }
    .full-nav-tabs > li {
        display: inline-block;
        flex-grow: 1;
        padding: 0;
        margin: 0;
        align-self: flex-end;
    }
    .full-nav-tabs > li > img {
        vertical-align: middle;
        margin-right: 4px;
    }
    .full-nav-tabs > li > a {
        display: block;
        font-size: 26px;
        text-align: center;
        border-top-left-radius: 4px;
        border-top-right-radius: 6px;
        border-bottom: 1px solid rgba(17, 89, 155, 0.75);
    }   
    .full-nav-tabs > li > a:hover {
        background: #f6f6f6;
    }
    .full-nav-tabs > li.active > a {
        background: #fff;
        border: 1px solid rgba(17, 89, 155, 0.75);
        border-bottom: 1px solid #fff;
    }
}
*/

/* variglaze demo */

header.customer-master{
	box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}



.chip-demo-card {
	margin-bottom: 30px;
}

.chip-demo-card:hover {
	background: #f1f1f1;
}

.chip-demos-row div.col-md-4:first-child .chip-demo-item {
		min-height: 108px;
	}

@media screen and (min-width: 992px) {
	.chip-demos-row div.col-md-4:first-child .chip-demo-item {
		min-height: 167px;
	}
}

@media screen and (min-width: 1200px) {
	.chip-demos-row div.col-md-4:first-child .chip-demo-item {
		min-height: 200px;
	}
}

.chip-demo-item {
	
}

.chip-demo-input-image {
	width: 100%;
	box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important;
	border: 3px solid #ddd !important;
}
.chip-demo-input-image:hover {
	border-color: rgba(17, 89, 155, 0.75) !important;
}


main .chips-demo-image-huge {

}

.shadow {
	box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important
}

.hide-overflow {
	overflow: hidden;
}
.scroll-overflow {
	overflow: scroll;
}

.overflow-auto img {
	max-width: none !important;
	max-height: none !important;
}

/*img.zoom-chip-demo-image-huge {

}

    .scroll-overflow{
	    position: relative;
    }

	#zoom-chip-demo {
		touch-action: auto !important;
        position: absolute;
        left: 0;
        top: 0;
	}

*/

.bg-lightgrey {
	background: #f1f1f1 !important;
}

.w-auto {
	width: auto !important;
}



.pallet-bg-link {
	display: inline-block;
	color: #333;
	text-decoration: none;
}
.pallet-bg-link:hover {
	color: #666;
	text-decoration: none;
}

.pallet-bg {
	height:30px;
	width:60px;
	margin-right: 5px;
	border-radius: 1px;
	
}

/*.pinch-zoom-parent {
  height: 1536px;
  width: 2048px;
}*/


.zoom-chip-demo-image-huge {
	max-width: none !important;
	width: 2048px !important;
	height: 1536px !important;
	display: block;
  	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";

}

a#back-to-top {
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    background: rgba(0,0,0,0.25);
    color: #fff;
    display: block;
    text-decoration: none;
    border-radius: 2px;
    text-align: center;
    font-size: 1em;
    transition: opacity 0.2s ease-out;
    cursor: pointer;
    opacity: 0;
}
a#back-to-top.show {
	opacity:1;
}