.startSliderSlick {
     width: 90%;
}


.startSliderSlick .card {
     width: 70px;
     min-height: 110px;
     margin: auto;
}

.startSliderSlick img {
     max-height: 110px;
}

.startSliderSlick a {
     text-decoration: none;
     color: #000000;
}

.startSliderSlick .startCategoryItem:hover h6 {
     color: #595959;
}

.nextSlideArrow , .prevSlideArrow {
     width: 5%;
}

/*
.startSliderSlick .card img {
     opacity: 1;
     transition: .5s ease;
}

.cardOverlay {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100%;
     width: 100%;
     opacity: 0;
     transition: .5s ease;
     background-color: transparent;
}

.startSliderSlick .card:hover .cardOverlay {
     opacity: 1;
     text-shadow: 1px 1px 1px #000000;
}

.startSliderSlick .card:hover img {
     opacity: 0.7;
}

.startSliderSlick .card-title {
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     text-align: center;
}
*/

#closeCategories {
     position: relative;
     top: 0;
     left: 80%;
}

.banner {
     position: fixed;
     top: 155px;
     right: 10px;
     z-index: 4;
     background-color: #fff;
	display: none;
	cursor: pointer;
}

.bannerBody {
      width: 11.5rem;

}

.fadeIn {
	-webkit-animation: fadeIn 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fadeIn 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.fadeOut {
	-webkit-animation: fadeOut 1s ease-out both;
	        animation: fadeOut 1s ease-out both;
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.funinputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.funinputfile + label {
	padding: 6px 10px;
	border-radius: 4px 0px 0px 4px;
	background-color: #6c757d;
	border-color: #6c757d;
     font-size: 16px;
     color: #fff;
     display: inline-block;
     cursor: pointer;
}

.funinputfile:focus + label,
.funinputfile + label:hover {
	background-color: #5a6268;
     border-color: #545b62;
}

.custom-control-input:checked ~ .custom-control-label::before {
	color: #fff;
	border-color: #adb5bd;
	background-color: #28a745;
}

.custom-control-input:focus ~ .custom-control-label::before {
  	box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

/* German Flag for product listing etc */
.germanFlag {
	width: 35px;
	height: 100%;
	overflow: hidden;
}

.blackDiv {
	background-color: #000000;
	width: 100%;
	height: 33%
}
.redDiv {
	background-color: #dd0000;
	width: 100%;
	height: 35%
}
.goldDiv {
	background-color: #ffce00;
	width: 100%;
	height: 32%
}

.accordion > .turnoverCard {
    overflow: visible;
}


.cardOverHang{
	position: absolute;
	top: 0;
	left:0;
	z-index: 10;
	background-color: #17a2b8;
	color: #ffffff;
	height: 3rem;
	width: 100%;
}

/* product default image */

.fadeToGrey {
	animation-name: fadeToGrey;
	animation-duration: 1s;
	animation-fill-mode: both;
     animation-timing-function: linear;
}

@keyframes fadeToGrey {
     0%	  {padding: 0rem; opacity: 1;}

	100%	  {padding: 5rem; opacity: 0.5;}
}

.fadeToGreyCards {
	animation-name: fadeToGreyCards;
	animation-duration: 1s;
	animation-fill-mode: both;
     animation-timing-function: linear;
}

@keyframes fadeToGreyCards {
     0%	  {padding: 0rem; opacity: 1;}
	100%	  {padding: 2rem; opacity: 0.5;}
}

/* weird test for product.php GH  */
#cardsRow .card {
     min-width: 12rem;
     max-width: 13rem;
     max-height: 13rem;
     min-height: 13rem;
     overflow: hidden;
}

.cardLabel {
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
}

.popOut {
	animation-name: popOut;
	animation-duration: 1s;
	animation-fill-mode: both;
     animation-timing-function: linear;
}

@keyframes popOut {
     0%	  {transform: translate(0rem, 0rem) rotate(-90deg);}
     50%	  {transform: translate(2rem, 0rem) rotate(-90deg);}
	100%	  {transform: translate(2rem, 5rem); z-index:50;}
}

#cardsRow .card img{
     max-height: 250px;
     margin:auto;
}

.scaleImg {
     transform: scale(0.7,0.7);
}

.articleCard a {
     text-decoration: none;
}

.articleCard strong {
     color: #000000!important;
}

.articleCard .card-title {
     min-height: 4rem;
}

.articleCardRow a {
     text-decoration: none;
}

.articleCardRow strong {
     color: #000000!important;
}

.articleCardRowQuick a {
     text-decoration: none;
}

.articleCardRowQuick strong {
     color: #000000!important;
}

.articleCardRowQuick .card-body {
     padding: .75rem;
}





.positionBottom {
     width: 80%;
     position: absolute;
     bottom: 0;
}

.rotateMinus90 {
     transform: rotate(-90deg);
}

.rotate90 {
     transform: rotate(90deg) scale(0.7,0.7);
}

.articleSlideImg img {
     max-height: 400px;
     margin:auto;
}



.gaugeContainer {
     /*margin: -35px 5px 2px 5px;*/
}


/*account.php   safari mobile needs a pointer-cursor for accordions to work!*/

#accordion .card-header {
	cursor: pointer;
}

.navbar-brand img {
     width: 115px;
}

.card {
  border-radius: 0rem;
}

.cursor {
     cursor: pointer;
}

.orderWrap{
	margin: .5em 0em;
	padding: .5em .5em;
	/*border: 1px solid #6c757d;*/
	border: 1px solid rgba(0, 0, 0, 0.125);
}

.productDetailsWrap{
	margin: .5em 0em;
	padding: .5em .5em;
	border: 1px solid rgba(0, 0, 0, 0.125);
	/*border-radius: .25em;*/
}

.turnoverWrap {
	margin: 0em;
	border: 1px solid rgba(0, 0, 0, 0.125) /*#6c757d*/;
	border-radius: .25em;
}

.infoWrap {
	border: 1px solid #ccc;
}

.orderWrap label {
	margin-bottom: 0em;
	padding-bottom: 0em;
}

.underscore {
	border-bottom: 1px solid #ccc;
	width: 60%;
}

.accWrap {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}

.scrollList {
	position:relative;
	height: 100px;
	width: 100%;
	overflow-y: scroll;
	border: 2px solid #ccc;
	border-radius: .5em;
	margin-bottom: 2rem;
}

#detailTurnoversCol {
	float: left;
}

.productHead {
	background-color: #6c757d;
	color: #fff;
	border: 1px solid #6c757d;
	border-radius: .20em .20em 0 0;
	padding: .5em 0;
	width: 100%;
}

#productListing .badge {
     border-radius: 0rem;
}

/* EXPERIMENT */
#startList {
	margin-top: .6rem;
}
#startList .list-group-item {
	color: #6c757d;
	position: relative;
	display: block;
	padding: 0.75rem 1.25rem;
	margin-bottom: -1px;
	background-color: #fff;
	/*border: 1px solid rgba(0, 0, 0, 0.125);*/
	border-color: rgba(0, 0, 0, 0.125);
}

#startList .list-group-item.active {
	z-index: 2;
	color: #fff;
	background-color: #6c757d;
	border-color: rgba(0, 0, 0, 0.125);
}

.scrollList .list-group-item {
	color: #6c757d;
	position: relative;
	display: block;
	padding: 0.75rem 1.25rem;
	margin-bottom: -1px;
	background-color: #fff;
	/*border: 1px solid rgba(0, 0, 0, 0.125);*/
	border-color: rgba(0, 0, 0, 0.125);
}

.scrollList .list-group-item.active {
	z-index: 2;
	color: #fff;
	background-color: #6c757d;
	border-color: rgba(0, 0, 0, 0.125) /*#6c757d*/;
}

.dropdown-item.active, .dropdown-item:active {
	color: #fff;
	text-decoration: none;
	background-color: #6c757d;
}

.imagecontainer {
  position: relative;
  height: 150px;
  margin-top: 15px;
  background-color: white;
}

.imagecontainer img {
  max-width: 100%;
  max-height: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.cartimagecontainer {
  position: relative;
  height: 100px;
  background-color: white;
}

.cartimagecontainer img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.listimagecontainer {
  position: relative;
  height: 120px;
  background-color: white;
}

.listimagecontainer img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

#cartItems .lead {
     font-size: 1.15rem;
}

/*TODO*/

#cartItms .list-group-item {
  position: relative;
  display: block;
  padding: 0.55rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

/**** product Item Stuff ****/
.productItemHeader{
	margin-top: 1rem;
	margin-right: 1rem;
	margin-left: 1rem;
	min-height: 4rem;
}
.productModalHeader{
	margin: 0rem 2rem 0rem 2rem;
	border-bottom: 1px solid rgba(0,0,0,.125);
}

.productModalHeader .badge{
	border-radius: 0rem;
}

/* Product Modal Stuff */

.productShowPills .nav-pills .nav-link {
	color: #6c757d;
	border: 1px solid #6c757d;
}

.productShowPills .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
	color: #fff;
	background-color: #6c757d;
}

.product-imagecontainer {
    position: relative;
    height: 550px;
    margin-top: 15px;
}



.productSliderImageWide{
	width: 100%;
    padding: 1rem;
	margin: 1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.productSliderImageTall {
	padding: 1rem;
	margin: 1rem;
}

#showButton1 .nav-link{
	border-radius: .25rem 0rem 0rem .25rem;
}

#showButton2 .nav-link{
	border-radius: 0rem .25rem .25rem 0rem;
}

.smallText {
	font-size: 0.8em !important;
}

.slick-prev:before, .slick-next:before{
    color:#000000;
}

.catalogForm .dropdown-item {
     cursor: pointer;
}

/* move the caret to the end of the buttons */
#specialFilter .dropdown-toggle::after, #downloadDrops .dropdown-toggle::after, .catalogForm .dropdown-toggle::after{
    display: block;
    position: absolute;
    padding-bottom: 20px;
    right: 20px;
    transform: translateY(-50%);
}

.specialCheckboxes .btn-secondary:not(:disabled):not(.disabled).active, .specialCheckboxes .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

#brandFilterTestBrands {
	/*min-width: 21.75rem;*/
	width: 100%;
	max-height: 20rem;
	overflow: auto;
}

#categoryFilterTestList {
	max-width: 20rem;
	max-height: 20rem;
	overflow: scroll;
}

#genreFilterTestList {
	width: 100%;
	max-height: 20rem;
	/*max-width: 20rem;*/
	overflow: auto;
}

#downloadBrandFilterList {
	width: 100%;
	max-height: 15rem;
	/*max-width: 20rem;*/
	overflow: auto;
}

#downloadBrandFilterListSelectedDiv {
     width: 100%;
     max-height: 5rem;
     overflow: auto;
}

#downloadCategoryFilterList {
	width: 100%;
	max-height: 15rem;
	/*max-width: 20rem;*/
	overflow: auto;
}

.dropdownFilterList {
     width: 100%;
	max-height: 15rem;
	/*max-width: 20rem;*/
	overflow: auto;
}

.submitFilterDiv {
	background-color: #ffffff;
	padding-top: .5rem;
}

.brandMultiSelect{
	cursor: pointer;
	color: #595959;
}

#listsRow .btn-outline-secondary:hover .badge-secondary  {
	background-color: #fff;
	color: #6c757d;
}

.highlight {
	background-color: #e1e6ea;
}

.vidIcon {
	color: #6c757d;
}

.favIcon {
	color: #6c757d;
	cursor: pointer;
}

#product_right .list-group-item{
	padding: 0.4rem 1.25rem;
}

#filterHelp [aria-expanded="true"], #filterHelp [aria-expanded="false"] {
	color: #6c757d;
	background-color: transparent;
}

#helpRow .card-body {
    padding: .7rem;
}

/* CART */

.firstCartItemCol {
	border-bottom: 1px solid #ddd;
}

.cartItemColPrices {
	border-bottom: 1px solid #ddd;
}

.cartItemCol {
	border-bottom: 1px solid #ddd;
}

#popUp {
     position: fixed;
     top: 95px;
     right: 10px;
     z-index: 4;
     background-color: #fff;
	display: none;
}

.popUpBody {
      width: 11.5rem;

}




/* sideBar stuff ****************/
 /* The side navigation menu */
/* Smoth slide over - nice */
.sidenavStuff {
     height: 100%; /* 100% Full-height */

     position: fixed; /* Stay in place */
     top: 0; /* Stay at the top */
     width: 300px;
     left: -300px;
     background-color: #6c757d; /* Black*/
     overflow-x: hidden; /* Disable horizontal scroll */
     padding-top: 110px;
     transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
     border-right: 1px solid #6c757d;
}

#mySidenav {
     z-index: 20; /* Stay on top */
}

#sidebarToggle {
	position: fixed; /* Stay in place */
     z-index: 1; /* Stay on top but behind the sidenav */
	top: 85px; /* Stay at the top */
	left: 0;
	border-radius: 0px 5px 5px 0px; /* Rounded corners on the top right and bottom right side */
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

.sidenavStuff h3 {
	color: #fff;
}

.sidenavStuff .dropdown-toggle::after {
    display: block;
    position: absolute;
    padding-bottom: 20px;
    right: 20px;
    transform: translateY(-50%);
}

/* The navigation menu links */
.sidenavStuff a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 10px;
    color: #fff;
    display: block;
    transition: 0.3s;
}

.sidenavStuff .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
}

.sidenavStuff ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

.sidenavStuff ul p {
    color: #fff;
    padding: 10px;
}

.sidenavStuff ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}
.sidenavStuff ul li a:hover {
    color: #6c757d;
    background: #fff;
}

.sidenavStuff ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: #535a5f;
}

.sidenavStuff ul ul a[aria-expanded="true"] {
    color: #fff;
    background: #6b747b;
}

.sidenavStuff ul ul ul a[aria-expanded="true"] {
    color: #fff;
    background: #778188;
}

.sidenavStuff ul ul ul ul a[aria-expanded="true"] {
    color: #fff;
    background: #848e94;
}

.sidenavStuff ul ul a {
    font-size: 0.95em !important;
    padding-left: 20px !important;
    background: #848d94;
}

.sidenavStuff ul ul ul a {
    font-size: 0.85em !important;
    padding-left: 30px !important;
    background: #929aa0;
}

.sidenavStuff ul ul ul ul a {
    font-size: 0.8em !important;
    padding-left: 40px !important;
    background: #a0a7ac;
}

.sidenavStuff ul ul ul ul ul a {
    font-size: 0.8em !important;
    padding-left: 50px !important;
    background: #adb3b8;
}

/* Position and style the close button (top right corner) */

.btn-outline-secondaryNav {
  color: #fff;
  background-color: transparent;
  background-image: none;
  border-color: #fff;
}

.btn-outline-secondaryNav:hover {
  color: #6c757d;
  background-color: #fff;
  border-color: #fff;
}

#listLoader{
	position: fixed;
	left: 43%;
	top: 47%;
	z-index: 1;
	color: #5f666d;
	display: none;
     font-size: 70%;
}

/* Spinner for the product modal  */
#productLoader {
	min-height: 25rem;
	width: 100%;
	text-align:center;
}

#productLoaderCenter{
	padding-top: 5.5rem;
	margin:auto;
	color: #6c757d;
}

.prodShow .modal {
	z-index: 2000;
}

.prodShow img{
	margin: auto;
}

.prodShow .modal-body {
	position: relative;
}

.bottom-right {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

#brandIdSelect {
	margin: -1px;
}

#inlineFormInputName2 {
	margin: -1px;
}

.welcomeHeader {
	font-size: 120%;
}

#newsWrap {
	padding: 2rem 1rem .5rem;
}

#newsWrap .card-header {
	margin-bottom: .3rem;
}

#productListFilter {
	padding: .5rem 0rem 0rem 0rem;
}

.listButtonsShadow {
	-moz-box-shadow:        0rem .2rem .2rem rgba(0, 0, 0, 0.25) !important;
	-webkit-box-shadow:     0rem .2rem .2rem rgba(0, 0, 0, 0.25) !important;
	box-shadow:             0rem .2rem .2rem rgba(0, 0, 0, 0.25) !important;

}

#mymgListGroup a{
	color: #6c757d;
}

.modal-content {
	border-radius: 0px;
}

/* change the slash between breadcrumbs */

.breadcrumb {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 0.75rem 0.1rem;
	margin-bottom: .5rem;
	list-style: none;
	background-color: transparent;
	/*border-radius: 0.25rem;*/
}

.breadcrumb-item {
	cursor: pointer; /* Add a mouse pointer on hover */
}

.breadcrumb a{
	text-decoration: none;
	color: #6c757d;
}

.breadcrumb-item + .breadcrumb-item {
	padding-left: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
	display: inline-block;
	padding-right: 0.5rem;
	color: #6c757d;
	content: ">";
}

.breadcrumb-item + .breadcrumb-item:hover::before {
	text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item:hover::before {
	text-decoration: none;
}

.breadcrumb-item.active{
	color: #5f666d;
}

.breadActive {
	color: #5f666d;
	font-weight: bold;
}

#loggedAs:hover {
	color: #cccccc;
}

/* this one is so the dropdown in the product filter looks ok in Chrome */
#brandIdSelect{
	margin: -1px;
}

#showCategory {
	display: none;
}

.tagElement2 {
	padding: .6rem .25rem .5rem .6rem;
	background-color: #6c757d;
	color: #fff;
	border-radius: .25rem;
}

.removeBtn2 {
	background-color: #fff;
	color: #6c757d;
	border-radius: .25rem;
	padding: 0rem .5rem .2rem .5rem;
	margin: 0rem .3rem .25rem .7rem;
	cursor: pointer;
}



/* DOWNLOAD PAGE*/
/* brandListFilter, tagElement, removeBtn are all for the downloads page */
#brandListFilter li, #categoryListFilter li{
	list-style-type: none;
}

#downloadTabs .nav-link {
     color: #6c757d;
     text-decoration: none;
}

#downloadTabs .active{
     background-color: #6c757d;
     color: #fff;
}

.tagElementMYMG {
	padding: .25rem .25rem .4rem;
	color: #6c757d;
     width: auto;
     border: 2px solid #6c757d;
	border-radius: .25rem;
     cursor: pointer;
}

.removeBtnMYMG {
     position: absolute;
     right: 25px;
	color: #6c757d;
}

.tagElement {
	padding: .25rem .25rem .4rem;
	background-color: #6c757d;
	color: #fff;
	border-radius: .25rem;
}

.removeBtn {
	background-color: #fff;
	color: #6c757d;
	border-radius: .25rem;
	padding: 0rem .5rem .2rem .5rem;
	margin: 0rem .3rem .25rem 2rem;
	cursor: pointer;
}

#selectTimespanDiv2{
	display: none;
}

/*  HOVER NAV  */

#hoverNav div {
	position: fixed; /* Position them relative to the browser window */
	right: -180px; /* Position them outside of the screen */
	transition: 0.3s; /* Add transition on hover */
	width: 235px; /* Set a specific width */
	text-decoration: none; /* Remove underline */
	font-size: 15px; /* Increase font size */
	color: white; /* White text color */
	border-radius: 5px 0 0 5px; /* Rounded corners on the top right and bottom right side */
	z-index: 5;
}

#hoverNav div:hover {
	right: 0; /* On mouse-over, make the elements appear as they should */
}

#hoverToTop {
	padding: 11px; /* 15px padding */
	bottom: 95px;
	background-color: #22262a;
	display: none;
	cursor: pointer; /* Add a mouse pointer on hover */
}
#hoverToTop:hover {
	background-color: #343a40;
}

#hoverShowAll{
	padding: 11px; /* 15px padding */
	bottom: 150px;
	background-color: #22262a;
	cursor: pointer; /* Add a mouse pointer on hover */
}

#detailReturn {
     padding: 11px; /* 15px padding */
	top: 150px;
	background-color: #22262a;
	cursor: pointer; /* Add a mouse pointer on hover */
}

.productModalShowConditions {
	cursor: pointer; /* Add a mouse pointer on hover */
}

.productModalShowConditions .bttText {
	color: #000000;
}

.bttBtn{
	color: #28a745;
	margin-left: .6rem;
}

.bttBtn2{
	padding-left: .4rem;
}

.bttText {
	margin-left: 1rem;
	color: #ccc;
}

/*   SEARCH EXPAND  */
#searchform input{
	width: 80px;
	-webkit-transition: width 0.4s ease-in-out;
	transition: width 0.4s ease-in-out;
}

#searchform input:focus {
	width: 180px;
}

#morePrdButtonHolder{
	display:none;
}

@-webkit-keyframes borderBlink {
    from, to {
        border-color: transparent
    }
    50% {
        border-color: #28a745
    }
}
@keyframes borderBlink {
    from, to {
        border-color: transparent
    }
    50% {
        border-color: #28a745
    }
}
.borderBlink{
    border:2px solid transparent;
	padding-top: .75rem;
	border-radius: .25rem;
    /* add 'border-color: transparent' if you wish no border to show initially */
	 -webkit-animation: borderBlink 1s step-end 3;
    animation: borderBlink 1s step-end 3;
}



@-webkit-keyframes backgroundBlink {
    from, to {
        background: transparent;
		border-color: transparent;
    }
    50% {
        background: #e1e6ea;
		border-color: #28a745
    }
}
@keyframes backgroundBlink {
    from, to {
        background: transparent;
		border-color: transparent;
    }
    50% {
        background: #e1e6ea;
		border-color: #28a745
    }
}
.backgroundBlink{
    background: transparent;
	border:1px solid transparent;
	padding-top: .75rem;
	border-radius: .25rem;
    /* add 'border-color: transparent' if you wish no border to show initially */
	-webkit-animation: backgroundBlink 1s step-end 3;
    animation: backgroundBlink 1s step-end 3;
}


.bounceBottom {
	-webkit-animation: bounceBottom 0.9s both;
	        animation: bounceBottom 0.9s both;
}

@-webkit-keyframes bounceBottom {
  0% {
    -webkit-transform: translateY(45px);
            transform: translateY(45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(24px);
            transform: translateY(24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(6px);
            transform: translateY(6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounceBottom {
  0% {
    -webkit-transform: translateY(45px);
            transform: translateY(45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(24px);
            transform: translateY(24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(6px);
            transform: translateY(6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}




.bottomLanguage {
     color: rgba(255,255,255,.5);
}

.bottomLanguage:hover {
     color: #cccccc;
     background: transparent;
}

/* Verfügbarkeit */
#requestAvailabilityHistory .card-header {
	border-radius: 0rem;
	min-height: 5.5rem;
}

#loginJumbotron {
     background-image: url("/website/static/img/b2b/loginScreen/portrait.jpg");
}


/* On smaller screens, where height is less than 450px, change the style of the sidenavStuff (less padding and a smaller font size) */
@media screen and (max-height: 575px) {
    .sidenavStuff {
		padding-top: 15px;
		margin: 2rem 0rem;
	}
    .sidenavStuff a {
		font-size: 18px;
	}
}

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

	.welcomeHeader {
		font-size: 150%;
	}

	#newsWrap {
		padding: 1rem 2rem;
	}

	.sticky {
		position: -webkit-sticky; /* Safari */
		position: sticky;
		top: 98px;
		z-index: 300;
	}

	.sticky2 {
		position: -webkit-sticky; /* Safari */
		position: sticky;
		top: 67px;
		z-index: 300;
	}

	.scrollList{
		height: 100%;
		overflow-y: visible;
		border: none;
		margin-bottom: 0rem;
	}

	#changePassword label {
		text-align: right;
	}

     #listLoader{
     	left: 43%;
     	top: 47%;
          font-size: 80%;
     }

     #loginJumbotron {
          background-image: url("/website/static/img/b2b/loginScreen/landscape.jpg");
     }

     .gaugeContainer {
          margin: -30px 6px 4px 6px;
     }

}

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

	.product-imagecontainer {

    		height: 800px;

	}

	.welcomeHeader {
		font-size: 250%;
	}

	#detailTurnoversCol {
		float: right;
		margin: 0em;
	}

	.yearlyTurnovers{
		float: right;
	}

	.detailTurnovers {
		float: right;
	}

	.withRithBorder {
		border-right: 1px solid #ddd;
	}

     #listLoader{
     	left: 43%;
     	top: 47%;
          font-size: 85%;
     }

}

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

	#newsWrap {
		padding: 0rem 1rem 4rem;
	}

	#productListFilter {
		padding: 0rem;
	}

	#brandFilterTestBrands {
		min-width: 21.75rem;
	}

	#categoryFilterTestList {
		min-width: 21.75rem;
          max-width: 22rem;
	}

	#genreFilterTestList {
		min-width: 21.75rem;
	}

	.cartItemColPrices {
		border-bottom: none;
	}

     .navbar-brand img {
          width: 100px;
     }

     .gaugeContainer {
          margin: -40px 10px 0px 10px;
     }
     .startSliderSlick {
          width: 100%;
     }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	.withRithBorder {
		border-right: none;
	}

	.cartItemColPrices {
		border-bottom: none;
	}

	.cartItemCol {
		border-bottom: none;
	}
     .navbar-brand img {
          width: 115px;
     }

     #listLoader{
     	left: 43%;
     	top: 43%;
          font-size: 100%;
     }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1500px) {
	#popUp {

		display: block;
	}
	.banner {

		display: block;
	}

     .startSliderSlick .card {
          width: 60px;
          min-height: 100px;

     }

     .startSliderSlick img {
          max-height: 100px;
     }
}









 }
}