:root { 
	--menubg: RGBA(0,0,0,0.7);
	--transdarkred: rgba(104, 0, 0, 0.8);
	--lightred: #ff0000;
	--red: #9a0000;
	--red-menu:rgba(154, 0, 0, 0.9);
	--yellow: #fefad3;
	--yellow-bg: rgba(254, 250, 211, 0.8);
	--red-bg:rgba(154, 0, 0, 0.2);
	--main-bg-color-08: rgba(31, 31, 122, 0.6);
	--main-bg-color-95: rgba(31, 31, 122, 0.95);
	--wcorange: rgba(255, 102, 0);
	--lightwcorange: rgba(255, 102, 0, 0.7);
}
/* The container */
.cbcontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 15px;
  width: calc(100% - 35px);
  max-width: calc(500px - 35px);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.cbcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: var(--wcorange);
}

/* On mouse-over, add a grey background color */
.cbcontainer:hover input ~ .checkmark {
  background-color: var(--wcorange);
}

/* When the checkbox is checked, add a blue background */
.cbcontainer input:checked ~ .checkmark {
  background-color: var(--wcorange);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.cbcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.cbcontainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.namelabelbg, .emaillabelbg, .cclabelbg{
	position: relative;
	width: 100%;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
}
.namelabel, .emaillabel, .cclabel{
	position: absolute;
	top: 30px;
	left: 15px;
	transition: 0.3s;
	color: black;
}
.inputdesign, .inputdesign2, .inputdesign3{
	border: none;
	border-bottom: 3px solid var(--wcorange);
	outline: none;
	padding: 10px 15px;
	width: calc(100% - 30px);
}
.inputdesign:focus ~ .namelabel, .inputdesign2:focus ~ .emaillabel, .inputdesign3:focus ~ .cclabel{
	top: 10px;
	font-size: 80%;
	color: var(--wcorange);
}
.inputdesign:valid ~ .namelabel, .inputdesign2:valid ~ .emaillabel, .inputdesign3:valid ~ .cclabel{
	top: 10px;
	font-size: 80%;
	color: var(--wcorange);
}

.msgbg, .submitbtnbg, .checkboxbackbg{
	display: flex;
	align-items: center;
	justify-content: center;
}
#Nachricht{
	width: calc(100% - 30px);
	max-width: calc(500px - 30px);
	min-height: 100px;
	max-height: 100px;
	padding: 15px;
	outline: none;
	border: none;
	color: black;
	background: rgba(0,0,0,0.1);
	border: 3px solid var(--wcorange);
}
#Nachricht::placeholder{
	color: black;
}
.contactsubmitbtn{
	width: 90%;
	max-width: 500px;
	font-size: 200%;
	font-weight: 600;
	font-style: uppercase;
	background: var(--wcorange);
	color: white;
	border: 0;
}
.contemailloadingbg{
	transition: 0.3s;
	width: 100%;
	height: 0;
	overflow: hidden;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.6);
	backdrop-filter: blur(10px);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.loader {
  position: relative;
  min-width: 100px;
  height: 100px;
  transition: 0.2s;

}

.loader:before , .loader:after{
  content: '';
  border-radius: 50%;
  position: absolute;
  inset: 0;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
}
.loader:after {
  box-shadow: 0 2px 0 green inset;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  0% {  transform: rotate(0)}
  100% { transform: rotate(360deg)}
}
.contloaderanimbg{
	width: 100%;
	max-width: 400px;
	height: 180px;
	overflow: hidden;
	position: relative;
}
.contloaderanimbg2 > div, .contloaderanimbg3 > div{
	width: 100%;
	height: 100%;
		display: flex;
	align-items: center;
	justify-content: center;
}
.contloaderanimbg2, .contloaderanimbg3{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 200px;
	max-height: 200px;
	overflow: hidden;
}
.fa-check-circle-o{
	font-size: 600%;
	color: green;
	transform: scale(0.1);
	opacity: 0;
}.facheckbg{
	transition: 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 100%;
	height: 100%;
	transform: translateX(100%);
}.facheckbg2{
	transition: 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 100%;
	height: 100%;
transform: translateX(50%);
}
.contactloadinginfobg{
	text-align: center;
	font-size: 120%;
	color: white;
	
}
.contactloaderid{
	min-width: 200px;
}
#contactloaderid{
	margin-left: calc(50% - 50px);
	margin-right: calc(50% - 50px);
}