:root {
  --color1: #009dc5;
  --color2: #ededed;
  --color3: #e0e0e0;
}

@font-face {
 font-family: Poppins; src: url(Poppins/Poppins-Regular.ttf);
}
@font-face {
 font-family: PoppinsBold; src: url(Poppins/Poppins-Bold.ttf);
}
@font-face {
 font-family: PoppinsBlack; src: url(Poppins/Poppins-Black.ttf);
}
@font-face {
 font-family: PoppinsMedium; src: url(Poppins/Poppins-Medium.ttf);
}
@font-face {
 font-family: PoppinsBoldItalic; src: url(Poppins/Poppins-BoldItalic.ttf);
}

body {
	font-family:Poppins;
	background:var(--color2);
}
.cls-1 {
fill: none;
stroke: #1d1d1b;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 9px;
}

.Ueberschrift2
{
	color:var(--color1);
	font-family: PoppinsBlack;
	text-transform:uppercase;
}

.Ueberschrift3
{
	color:var(--color1);
	font-family: PoppinsMedium;
	text-transform:uppercase;
}

.bd-links-nav {
	-moz-column-count:2;
	column-count:2;
	-moz-column-gap:1.5rem;
	column-gap:1.5rem;
}
.bd-links-nav .bd-links-group {
	-moz-column-break-inside:avoid;
	break-inside:avoid;
}
.bd-links-link {
	padding:.1875rem .5rem;
	margin-top:.125rem;
	margin-left:1.125rem;
	color:var(--bs-body-color);
	text-decoration:none
}
.bd-links-link:hover,
.bd-links-link:focus,
.bd-links-link.active {
	color:var(--bs-emphasis-color);
	background-color:var(--bd-sidebar-link-bg)
}
.bd-links-link.active {
	font-weight:600
}
.bd-links-heading {
	color:var(--bs-emphasis-color)
}
.bi {
	width:1em;
	height:1em;
	vertical-align:-.125em;
	fill:currentcolor
}

.btn-outline-marlexGreen {
	--bs-btn-color: var(--color1);
	--bs-btn-border-color: var(--color1);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--color1);
	--bs-btn-hover-border-color: var(--color1);
	--bs-btn-focus-shadow-rgb: 25, 135, 84;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--color1);
	--bs-btn-active-border-color: var(--color1);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: var(--color1);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--color1);
	--bs-gradient: none;
}

.btn-marlex {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color1);
  --bs-btn-border-color: var(--color1);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--color1);
  --bs-btn-disabled-border-color: var(--color1);
}

.border-marlex {
	border: 2px solid var(--color1);
	border-radius: 10px;
}

#divSearch {
	width:90%;
	height:70%;
	max-width:500px;
	max-height:300px;
	left:160px;
	top:90px;
	z-index:9999;
}

.cardImage
{
	height:180px;
	object-fit:cover;
}

.cardImageProd
{
	object-fit:cover;
}

.navbar
{
	top:30px;
	background-color:var(--color3);
	border-bottom:2px inset darkgray;
}

.head{
	background:var(--color1);
	height:30px;
	position:fixed;
	top:0px;
	width:100%;
	font-size:10pt;
	z-index:999;
}

.cardFontSmaller
{
	font-size:10pt;
	padding-left:0px;
}

.picMain {
	width:100%;
	max-width:470px;
}

.form-control 
{
	border-color:var(--color1);
}

.input-group-text
{
	border-color:var(--color1);
}


.Text20Jahre
{
	 font-family: PoppinsBoldItalic;
	 color:#be1622;
	 font-size:14pt;
	 line-height:18pt;
}

.pic20Jahre
{
	height:50px;
}

.logo{
	height:50px;
}

.logoText{
	font-size:29px;
	line-height:30px;
	font-family:Arial;
}

.menuTop {
	background:var(--color1);
	color:white;
}

.menuContent {
	background:rgba(0,157,197,0.08);
}

a,
a:hover,
a:focus,
a.active {
	text-decoration:none;
	color:var(--color1);
}
.link-blau,
.link-blau:hover,
.link-blau:focus,
.link-blau.active {
	color:var(--color1);
}

.link-black,
.link-black:hover,
.link-black:focus,
.link-black.active {
	color:#000000;
}

.link-white,
.link-white:hover,
.link-white:focus,
.link-white.active {
	color:#FFFFFF;
}

.listItemsIcons
{
	list-style-image: url('double_arrow2.svg');
}

.listItemsIcons li::marker {
  font-size: 1.5rem; /* You can use px, but I think rem is more respecful */
}

.bd-navbar-toggle
{
	color:var(--color1);
}

.content{
	margin-top:7rem;
}

.searchField
{
	width:300px;
}

.cardTitle
{
	text-transform:uppercase;
	background-color:var(--color1);
	color:white;
}

.menuProdukte{
	display:inherit;
}

.ToastPos
{
	right:20px;
}

.modAngebotDia
{
	--bs-modal-width:50%;
	height:680px;
}


@media (max-width: 1250px) {
	.Text20Jahre
	{
		 font-size:11pt;
		 line-height:12pt;
	}

	.pic20Jahre
	{
		height:35px;
	}
	.logo{
		height:40px;
	}
	.searchField
	{
		width:200px;
	}
	
	.modAngebotDia
	{
		--bs-modal-width:60%;
	}


}

@media (max-width: 1600px) {
	.modAngebotDia
	{
		height:90%;
	}

}

@media (max-width: 1200px) {
	.cardContent
	{
		margin-top:0px;
	}
	.cardFontSmaller
	{
		padding-left:1rem;
	}

}

@media (max-width: 860px) {
	.content{
		margin-top:8rem;
	}
	.modAngebotDia
	{
		--bs-modal-width:70%;
	}

}
@media (max-width: 770px) {
	.Text20Jahre
	{
		 font-size:10pt;
		 color:black;
	}
	.head
	{
		font-size:8pt;
	}
	
	.ToastPos
	{
		left:50% !important;
		transform: translateX(-50%) !important;
	}
	.modAngebotDia
	{
		--bs-modal-width:80%;
	}
	#divSearch {
		left:50% !important;
		transform: translateX(-50%) !important;
		width:90%;
		top:125px;
	}

}

@media (max-width: 500px) {
	.logo{
		height:35px;
	}
	.logoText{
		font-size:25px;line-height:27px;
	}
	
	.Text20Jahre
	{
		font-size:8pt;
	}
	.modAngebotDia
	{
		width:100%;
	}

}

@media (max-width: 400px) {
	.logo{
		height:30px;
	}
	.menuProdukte{
		display:none;
	}
}

@media (min-width: 1200px) {
.col-lx-6 {
    flex: 0 0 auto;
    width: 50%; 
  }
  
  .cardTitle {
	  	margin-left:-16px;
		border-top-right-radius:6px;
  }
}