body	{background-color: #2F2F2F;
		font-family:Copperplate Gothic Bold}



.LogoHeader	{position: absolute;
			left: 10%;
			top: 3%;
			width: 40%}
			
.Warenkorb	{position: absolute;
			left: 94%;
			top: 88px;
			width: 330px}
		
.Kundenkonto	{position: absolute;
				left: 90%;
				top: 88px;
				width: 400px}
				
img 	{width:10%;}

	
ul 		{list-style-type: none;
		margin: 0;
		padding:75px;
		overflow: hidden;
		background-color: #181818;
		font-size:170%;
		width: 100%;
		border:1px solid }

li 		{float: left;
		position:relative;
		left:33%}

li a, .dropbtn 		{display: inline-block;
					color: white;
					text-align: center;
					padding: 10px 15px;
					text-decoration: none;}

li a:hover, .dropdown:hover .dropbtn 	{background-color: #E10000;}

li.dropdown 	{display: inline-block;}

.dropdown-content 	{display: none;
					position: absolute;
					background-color: red;
					min-width: 100px;
					box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
					z-index: 1;
					font-size:55%;}

.dropdown-content a 	{color: black;
						padding: 5px 10px;
						text-decoration: none;
						display: block;
						text-align: center;}

.dropdown-content a:hover 		{background-color: #181818;
								color:white}

.dropdown:hover .dropdown-content 		{display: block;}







.search-box		{position: absolute;
				top: 105px;
				left: 80%;
				transform: translate(-40%,-40%);
				background: white;
				height: 18px;
				border-radius: 18px;
				padding: 10px;}
	
	
.search-box:hover > .search-txt		{width: 210px;
									padding: 0 6px;
									top: 50px;}

.search-box:hover > .search-btn		{background: white;}
   
   
.search-btn		{color: black;
				float: left;
				width: 20px;
				height: 20px;
				border-radius: 20%;
				background: white;
				display: flex;
				justify-content: center;
				align-items: center;
				transition: 0.4s;
				text-decoration: none;}
	
	
	
.search-txt		{border: none;
				background: none;
				outline: none;
				float: left;
				padding: 0;
				color: black;
				font-size: 15px;
				transition: 0.4s;   
				line-height: 15px;
				width: 0px;}




.kass 			{background-color:white;
                width: 105%;
                height:10%;
                position:absolute;
                top:240px;
                border:1px solid black;}
				
h7				{font-size: 36px;
                position: relative;
                left: 900px;
                top: 30%;}
				
.kundendaten	{background-color:rgb(102,102,102);
                position: absolute;
                width: 1690px;
				left: 140px;
                top:520px;
                height:1420px;}
				
.zahlung		{background-color:rgb(102,102,102);
                position: absolute;
                width: 1690px;
				left: 140px;
                top:347px;
                height:160px;}
				
h8				{font-size: 16px;
                position: relative;
                left: 10px;
                top: 20px;}
				
.bezahlen		{position:absolute;
				background-color:white;
				left: 1250px;
				top: 1290px;
				width:420px;
				height:95px;}	

h9				{font-size: 36px;
                position: relative;
                left: 105px;
                top: 28px;}
				
.Paypal			{position:absolute;
				left: 55px;
				top:70px;
				font-size:24px;}

.CK				{position:absolute;
				left: 255px;
				top:70px;
				font-size:24px;}
				
.RN				{position:absolute;
				left: 555px;
				top:70px;
				font-size:24px;}
				
.LS				{position:absolute;
				left: 815px;
				top:70px;
				font-size:24px;}
				
.NN				{position:absolute;
				left: 1135px;
				top:70px;
				font-size:24px;}

				
.ST				{position:absolute;
				left: 1435px;
				top:70px;
				font-size:24px;}
				
.AG				{position:absolute;
				left: 850px;
				top:1280px;
				font-size:26px;
				width:660px}						



				
button-form {
  padding: 1.5rem;
  margin: .5rem;
  border: 0 none;
  font-size: 1.5em;
  border-bottom: 3px solid #5bb500;
  background-color: #6bd400;
  font-weight: $font-weight;
  color: #fff;
  &:hover,
  &:focus {
    cursor: pointer;
  }
}

//box model = border-box
@mixin box-sizing($box-model) {
  -webkit-box-sizing: $box-model; // Safari <= 5
  -moz-box-sizing: $box-model; // Firefox <= 19
  box-sizing: $box-model;
}

@mixin titles {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 1em;
  font-weight: $font-weight;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}

///// Variables
$font-weight: bold;
$text-color: #2f383d;
$dotted: 2px dotted #D1D1D1;
$radius: 4px;
// form styles
* {
  @include box-sizing(border-box);
}

// Flexbox Styles
//Outer container
.row {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
  background-color: #f1f1f1;
}

.col {
  flex: 1 1 8%;
  margin: 0 0 0.5rem 0;
  padding: 0.5em 10px;
  box-sizing: border-box;
}

.col-span-7 {
  flex-basis: 58.3333%;
}

.col-span-2 {
  flex-basis: 16.6666%;
}

// Inner Container
.container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
}

[class*="box--"] {
  display: flex;
  margin: .5rem;
  background: white;
  border-bottom: 1px solid #dedfdf;
}

.box--full {
  flex: 1 1 100%;
  flex-flow: column;
  padding: 1rem;
  border-radius: $radius;
}

.box--half {
  flex: 1 1 30%;
  flex-flow: column;
  padding: 1rem;
  border-radius: $radius;
  flex-shrink: 1;
  flex-basis: 250px; //effectively it's min width
}

@media all and (max-width: 568px) {
  .col-span-2 {
    flex-basis: 50%;
  }
  .col-span-6,
  .col-span-7,
  {
    flex-basis: 100%;
  }
}

// get rid of "default" iOS button styling for submit buttons
input[type=submit] {
  appearance: none;
}

// Most form inputs
input[type="email"],
input[type="password"],
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="url"],
textarea {
  font-size: 1.3em;
  width: 100%;
}

label {
  font-weight: $font-weight;
  color: #000;
  font-size: 1em;
}

// Selects (dropdowns)
select {
  font-size: 1.3em;
  height: 2.1rem;
  line-height: 1.5em;
  width: 100%;
  margin-top: .25rem;
  background: transparent;
  &:hover {
    cursor: pointer;
  }
}

input,
select {
  border: none;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

textarea:focus,
input:focus {
  outline: none;
}

.first-title {
  @include titles;
  width: 100%;
  padding-left: 10px;
  margin: 24px 0 16px;
}

.second-title {
  @include titles;
  width: 100%;
  margin: 30px 0 20px;
}

#submit {
  @include button-form;
  width: 100%;
  border-radius: $radius;
}

.error {
  color: orangered;
}

.cart {
  outline: $dotted;
  outline-offset: -13px;
}

table {
  width: 100%;
}

td,
th {
  padding: 10px;
  white-space: nowrap;
  text-align: left;
}

th {
  font-weight: $font-weight;
}

.total {
  font-weight: $font-weight;
  font-size: 2em;
  text-align: right;
}

.right {
  text-align: right;
}

.table-border {
  border-bottom: $dotted;
}
				
		

.button 		{background-color: white;
				border: none;
				color: black;
				padding: 25px 75px;
				text-align: center;
				text-decoration: none;
				display: inline-block;
				font-size: 40px;
				margin: 4px 2px;
				cursor: pointer;
				position:absolute;
				left:1400px;
				top:1760px;
				transition-duration: 0.4s;}
	
			
.button:hover 	{background-color: red ;
				color: white;}			
							
				
				
				
				
				

			
Footer		{background-color:#181818;
			width:105%;
			height:40%;
			position:absolute;
			top:2000px;
			border:1px solid }
			
.LogoHeader1	{position: absolute;
				left: 13%;
				top: 10%;
				width: 45%}
				
.FooterUnternehmen		{position:absolute;
						left:28%;
						top:13%;
						color:white}
						
.Impressum		{position:absolute;
				left:28%;
				top:30%;
				color:white}		
	
.AGB		{position:absolute;
			left:28%;
			top:38%;
			color:white}
					
.MwSt		{position:absolute;
			left:28%;
			top:75%;
			color:white}
	
.FooterÜberUns		{position:absolute;
					left:55%;
					top:13%;
					color:white}
					
.Kontakt	{position:absolute;
			left:55%;
			top:30%;
			color:white}

.Email	{position:absolute;
		left:55%;
		top:38%;
		color:white}
			
.Tel	{position:absolute;
		left:55%;
		top:46%;
		color:white}
					
.Newsletter		{position:absolute;
				left:75%;
				top:32%;
				color:white}
				
.input-group	{position:relative;
				left:75%;
				top:45%;
				color:white}

.input		{padding:8px;
			border:none;
			border-radius:3px;
			font:inherit;
			color:white;
			background-color:transparent;
			outline:2px solid #fff;}
			
.input-label	{position:absolute;
				top:20%;
				left:10px;
				transform: translate(10px; 10px);
				transition:transform .25s;}

.input:focus+.input-label,
.input:valid+.input-label	{transform: translate(10px, -15px) scale(.8);
							color:red;
							padding-inline:2px;
							background-color:#181818;}
							
.input:is(:focus, :valid)	{outline-color:red;}
	


.Twitter		{position: absolute;
				left: 75%;
				top: 15%;
				width: 29%}	

.Facebook		{position: absolute;
				left: 79%;
				top: 15%;
				width: 28%}

.Instagram		{position: absolute;
				left: 83%;
				top: 14%;
				width: 33%}
				
.CGINC		{font-family:Franklin Gothic Book;
			color:white;
			position:absolute;
			left:47%;
			top:90%}