@font-face {
	font-family: "Rubik";
	src: url("/fonts/Rubik-Regular.ttf") format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Rubik";
	src: url("/fonts/Rubik-Bold.ttf") format('truetype');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Rubik";
	src: url("/fonts/Rubik-Italic.ttf") format('truetype');
	font-weight: 400;
	font-style: italic;
}

html, body, input, button, textarea, select {
	font-family: 'Rubik', sans-serif;
	font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Rubik', sans-serif;
	font-weight: 700;
}

html, body {
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #333;
}

h1 {
	font-size: 26px;
	text-transform: uppercase;
}
h2 {
	font-size: 26px;
	margin-top: 20px;
}
.page {
	background-color: #ffffff;
	position: relative;
 	min-height: 80vh;
}
header {
	background-color: #e9e9e9;
}
header .bar {
	display: flex;
}
header .bar a, header .bar a:hover {
	color: #333;
	text-decoration: none;
}
header .barElement {
	padding: 7px 10px;
	background-color: #ffe100;
	margin-right: 10px;
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	position: relative;
	top: 1px;
}
header .barElement.right {
	margin-left: auto;
	margin-right: 0;
}
header .barElement img,
header .barElement i {
	margin-right: 5px;
}
header .content {
	padding: 25px 0;
	background-color: #ffe100;
	box-shadow: 0px 0px 7px #333;
}
header .teaser {
	text-align: right;
	padding-right: 30px;
	margin-top: 45px;
	display: block ruby;
	position: relative;
	z-index: 10;
}
header .teaser .langBtn {
	border-radius: 50%;
	border: 2px solid #fff;
	object-fit: cover;
	margin: 5px;
}

.colorIcon {
	color: #ffffff;
}
.colorIcon:hover {
	color: #ffe100;
}

.yellow {
	color: #ffe100;
}

.socialbtn{
	margin-left: 5px;
	text-decoration: none;
	display: ruby-base;
}

.socialbtn:hover {
	text-decoration: none;
}

header .search {
	display: flex;
}
header .search input[type=text] {
	flex-grow: 1;
	border: 0;
	background-color: #ffffff;
	padding: 10px;
	border-radius: 3px;
	margin-top: 40px;
	height: 44px;
}
header .search button {
	border: 0;
	border-radius: 3px;
/*	margin-left: 3px; */
/*	line-height: 44px; */
	height: 44px;
/*	width: 44px; */
	text-align: center;
	color: #ffffff;
	background-color: #333;
	transition: background-color 0.25s;
	margin-top: 40px;
}
header .search button:hover {
	background-color: #ffe100;
}
nav {
	background-color: #333;
	line-height: 52px;
}
nav .container {
	display: flex;
}

nav .navitem {
	font-size: 15px;
	text-transform: uppercase;
	padding: 0 12px;
	color: #ffffff;
	transition: background-color 0.25s;
}

nav .navitem.highlight {
	background-color: #ffe100;
	color: #1d1d1d;
}


.navicon {
	margin-right: 5px;
	max-width: 20px;
	max-height: 20px;
	width: 20px;
	height: 20px;
}

.navcrumb {
	font-size: 15px;
	padding-top: 40px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #CCCCCC;
}
.navcrumb a {
	color: #333;
	margin: 0 10px;
}

.navcrumb a.highlight {
	color: #ffe100;
}

a.highlight img {
	filter: invert(90%);
}

nav .navright {
	margin-left: auto;
	padding: 0 12px;
}

.bodycontent {
	padding-bottom: 2.5rem;
}

footer {
	background-color: #333;
	color: #ffffff;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 1rem;
}
footer a {
	color: #ffffff;
	text-decoration: none;
}
footer a:hover {
	color: #ffffff;
	text-decoration: none;
}
footer h3 {
	font-size: 20px;
	text-transform: uppercase;
	/*border-bottom: 1px solid #ffffff80;*/
}

footer .companyName {
	text-transform: none;
}

footer .content {
	background-color: #333;
	padding: 50px 0;
}

.w100 {
	width: 100%;
}

.fullLink {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* page content */

.productGrid {
	display: flex;
	flex-wrap: wrap;
}

.productThumb {
	position: relative;
	margin: 10px;
	/*border: 1px solid #f80;*/
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 100%;
	max-width: calc(100% - 20px);
	border: 1px solid #cccccc;
	word-break: break-word;
}

.productThumb a {
	color: #333;
}

.productImage {
	width: 100%;
	padding-bottom: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

.productName {
	padding: 20px;
	text-align: center;
}

.cat {
	color: #333;
}

.cat:hover {
	color: #ffe100;
}

.tag, .tag:hover {
	display: inline-block;
	margin: 0 5px 5px 0;
	padding: 5px;
	background-color: #333;
	color: #ffffff;
	text-decoration: none;
	border-radius: 4px;
}

.tagDontShow {
	opacity: 0.5;
}
.tagDontShow:hover {
	opacity: 1;
}

.tagShow:hover {
	opacity: 0.5;
}

.cat, .cat:hover {
	display: block;
	padding: 5px 10px;
	text-decoration: none;
}

.cat .fas {
	margin-right: 5px;
	margin-top: 4px;
}
.mobileView {
	display: none;
}
.desktopView {
	display: flex;
}

/* home */
.jumbo {
	width: 100%;
	height: 450px;
	overflow: hidden;
}

.jumboItem {
	width: 100%;
	height: 300px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.slick-list, .slick-track {
	height: 100%;
}

.slick-prev, .slick-next {
	display: none !important;
}

/* share buttons */

ul.share-buttons{
	list-style: none;
	padding: 0;
}

ul.share-buttons li{
	display: inline-block;
	margin-right: 5px;
}

ul.share-buttons .sr-only{
	position: absolute;
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0;
	border: 0;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.hashtag {
	color: #ffffff;
	margin-right: 15px;
	display: inline-block;
}

.lightbox-gallery h2 {
    font-weight: bold;
    margin-bottom: 40px;
    padding-top: 40px;
    color: #fff
}

@media (max-width:767px) {
    .lightbox-gallery h2 {
        margin-bottom: 25px;
        padding-top: 25px;
        font-size: 24px
    }
}

.lightbox-gallery .intro {
    font-size: 16px;
    max-width: 500px;
    margin: 0 auto 40px
}

.lightbox-gallery .intro p {
    margin-bottom: 0
}

.lightbox-gallery .photos {
    padding-bottom: 20px
}

.lightbox-gallery .item {
    padding-bottom: 30px
}

.social {
	text-align: center;
}

.teaser a {
	text-decoration: none;
}

.limited {
	float: right;
	width: 120px;
}

a {
	color: #333;
}

a:hover, a:not(#removeTag):hover {
	color: #ffe100;
}

nav .navitem:hover {
	color: #1d1d1d !important;
	background-color: #ffe100;
	text-decoration: none;
}

nav .navitem:hover img {
	filter: invert(90%);
}

.catsel {
	float: right;
	margin-top: 4px;
	margin-left: 10px;
}

.articleinfo tr td {
	padding-right: 10px;
}

.img-magnifier-container {
	position: relative;
}

.img-magnifier-glass {
	position: absolute;
	border: 3px solid #000;
	border-radius: 50%;
	cursor: none;
	/*Set the size of the magnifier glass:*/
	width: 100px;
	height: 100px;
}

/* media breakpoints */
@media (min-width: 576px) {
	.productThumb {
		max-width: calc(100% / 2 - 20px);
	}
}

@media (min-width: 768px) {
	.productThumb {
		max-width: calc(100% / 3 - 20px);
	}
}

@media (min-width: 992px) {
	.productThumb {
		max-width: calc(100% / 4 - 20px);
	}
}

@media (min-width: 1200px) {

}

@media (max-width: 575px) {
	.productImage {
		padding-bottom: 50%;
	}

	header .teaser {
		text-align: center;
		margin-top: 5px;
		margin-bottom: -30px;
		padding-right: 0px;

	}

	.social {
		text-align: center;
	}

	.dLegal {
		text-align: center;
	}

	.dLogo {
		text-align: center;
	}
	.mobileView {
		display: flex;
	}
	.desktopView {
		display: none;
	}
}


@media (max-width: 1199px) { /* 767px*/
	.nomobile {
		display: none;
	}
}

@media (max-width: 1199px) {
	nav .navitem img {
		display: none;
	}
}

@media (max-width: 991px) {
	.limited {
		width: 80px;
	}

	footer h3 {
		font-size: 15px;
	}

	footer p {
		font-size: 12px;
	}
	.navcrumb, #navLogout {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
	}
	a.marginNavcrumb {
		margin-top: 8px;
	}
}

@media (max-width: 1199px) and (min-width: 992px) {
	.jumbo {
		height: 350px;
	}
}

@media (max-width: 991px) and (min-width: 768px) {
	.jumbo {
		height: 250px;
	}

	.hashtag {
		display: none;
	}
}

@media (max-width: 767px) {
	.jumbo {
		height: 200px;
	}
}

.readall {
    position: relative;
    text-align: left;
    box-sizing: border-box;
}
/*
.readall:before {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  content: "";
  background: linear-gradient(to top,
     rgba(255,255,255, 1) 20%,
     rgba(255,255,255, 0) 80%
  );
  pointer-events: none;
}
.readall:after {
    position: relative;
    text-align: left;
    box-sizing: border-box;
}
*/
.readall-wrapper {
    text-align: center;
}
.readall-button {
    /*display: inline-block;
    padding: 10px 0;
	width: 150px;*/
	display: block;
	border: 1px solid #333333;
	border-radius: 4px;
	color: #ffffff;
    text-align: center;
    cursor: pointer;
	background: #333333;
}

.readall-button:hover {
    color: #ffe100;
    background: #333333;
}

.readall-hide:after {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), white 75%);
}

.readall-wrapper i.fas.fa-angle-down, .readall-wrapper i.fas.fa-angle-up {
	/*display: flex;*/
	cursor: pointer;
	width: 50%;
}

.cart_add_submit,
.btn_service_submit,
.btn_cart_success,
.btn_login,
.btn_heller_yellow {
	background-color: #ffe100;
	color: #333;
}
.cart_add_submit:hover,
.btn_service_submit:hover,
.btn_cart_success:hover,
.btn_login:hover,
.btn_heller_yellow:hover {
	border: .2rem, solid, rgba(247, 232, 44,.5);
}
.cart_add_submit.focus,.cart_add_submit:focus,
.btn_service_submit.focus,.btn_service_submit:focus,
.btn_cart_success.focus,.btn_cart_success:focus,
.btn_login.focus, .btn_login:focus,
.btn_heller_yellow.focus, .btn_heller_yellow:focus {
	box-shadow:0 0 0 .2rem rgba(247, 232, 44,.5);
}
.btn_update_cart, .btn_signup {
	background-color: #004B99;
	color: #ffffff;
}
.btn_update_cart:hover,
.btn_signup:hover {
	border: .2rem, solid, rgba(0, 75, 153, .5);
	color: #ffffff;
}
.btn_update_cart.focus, .btn_update_cart:focus,
.btn_signup.focus, .btn_signup:focus {
	box-shadow:0 0 0 .2rem rgba(0, 75, 153, .5);
}

#ServiceReason .form-check-inline {
	padding: 5px 0px;
}

.cart_price_nowrap {
	white-space: nowrap;
}

.alert-heller-success {
	color: #665a00;
	background-color: #fff7bd;
	border-color: #ffe100;
}
.alert-heller-success hr {
	border-top-color: #b1dfbb;
}
.alert-heller-success .alert-link {
	color: #0b2e13;
}