body {
  /* background-color: #ffffff;
  */
    background-image: url("../images/bg.jpg");
  background-size: cover;
font-family: 'Muli', sans-serif;
}
.ui-icon {
background-image: url("../images/Resize_Icon.png");
position: absolute;
right: 0px;
bottom: 0px;
display: none;
width: 25px;
height: 25px;
background-size: cover;
background-position: initial;

}

#impressum_text p {
    color: #907422;
}

#drag_logo {
    pointer-events: auto;
    display: inline-block;
	position: absolute;
	cursor: move;
	 padding: 6px;
}

#text_controls {
    position: absolute;
    height: 50%;
    top: 30%;
    left: 20%;
	width: 70%;
	}

#kugel_text {
    width: 100%;
    height: 24%;
    max-height: 90px;
	margin-bottom: 1%;}

#trashcan {
background-image: url("../images/trashcan_Icon.png");
position: absolute;
left: 0px;
bottom: 0px;
display: none;
width: 25px;
height: 25px;
background-size: cover;
background-position: initial;
cursor: pointer;
}

#drag_logo:hover {
 border: 2px solid black;
 opacity: 0.8;
  padding: 4px;
}
#menu {
  position: absolute;
  bottom: 35%;
  list-style: none;
  width: 100%;
  padding: 0;
}
#loader {
 margin: auto;
  position: relative;
  text-align:center;
  padding-top: 35%;
  color: #af8d28;
  font-size: 1.5vw;
 
 }
#menu li {
  text-align: center;

  text-transform: uppercase;
      padding-top: 5%;
    padding-bottom: 5%;
}
p {
color: #af8d28;
}

#logo {
  width: 40%;
  padding-top: 40%;
  position: relative;
  background-image: url("../images/logo_2022.png");
  background-size: cover;
  margin: 25% auto;

}

select option {
background: #000000;
}

#menu_links {

  height: 105%;
  position: fixed;
  top: -1%;
  left: 0px;
  border-right: 3px solid #af8d28;
  float: left;
  margin: 0;
  padding: 0;
  background-image: url("../images/bg3.jpg");
  left: -1%;
  opacity: 0.8;
}

#logo_image {
width: 100%;
}

#huetla {
position: absolute;
height:100%;
width:auto;
}
#kugel {
position: absolute;
height:100%;
width:auto;
}
#preview_bilder {
  min-height: 80%;
  min-width: 100%;
  position: absolute;
  
  top: 0;}
  
  
.konsole {
position: absolute;
  width: 50%;
  height: 100%;
  bottom: 0;
  display: none;


}
#konsole_daten {
left: 50%;
}


#konsole_logo {
left: 50%;
}
textarea, input {
   color: #ffffff;
  background-image: url("../images/feld.jpg");
  background-size: cover;
  margin-top: 10px;
  width: 80%;
font-family: 'Muli', sans-serif;
  line-height: 1.8;
  float: left;
  margin-left: 10px;
  border: 1px solid #675A02;
  padding-left: 10px;}
  

  
 select {
  color: #ffffff;
  background-image: url("../images/feld.jpg");
  background-size: cover;
  height: 100%;
  width: 100%;
font-family: 'Muli', sans-serif;
  line-height: 1.8;
  float: left;

  border: 1px solid #675A02;
  padding-left: 10px;
 }

 #logo:hover {
 -webkit-filter: saturate(2.3);
 }
 
.blurry {
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px);
} 

#felder_daten {
  top: 8%;
  left: 16%;
  width: 80%;
  position: absolute;
  height: 100%;

}

#daten_text {
color: #af8d28;
font-family: 'Muli', sans-serif;
  font-size: xx-large;
  margin: 5%;
  text-align: center;
}

#plz {
width: 20%;
}
#ort {
width: 58%;
margin-left: 2%;
}

#farben_text, #text_text {
color: #af8d28;
font-family: 'Muli', sans-serif;
  font-size: 1.4vw;
  margin: 5%;
  text-align: center;
}

#text_text {
padding-left: 15%;

}

ul {
color: #af8d28;
}
.styled-select select
{
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
    position: absolute;
    cursor: pointer;
}

.styled-select {
position: relative;
  width: 40px;
  height: 20px;
  width: 80%;
font-family: 'Muli', sans-serif;
  line-height: 1.8;
  float: left;
  margin: 0px;
  padding: 0px;
      margin-left: 10px;
}
.arrow {
    font-size: 9px;
    color: white;
    position: absolute;


    cursor: default;
    line-height: 1px;
    z-index: 10;
    top: 20%;
    pointer-events: none;
    right: 2%;
}

h2 {
  color: #af8d28;
  text-align: center;
  font-weight: normal;
  text-transform: uppercase;

  text-decoration: overline;
}

#text_hinweis {
    
    position: absolute;
    bottom: 10%;
    padding-left: 20%;
    font-size: 0.9vw;
}
#designer {
  /* background-color: #AEAEAE; */
  position: absolute;
  width: 94%;
  padding-top: 47%;
  top: 120px;
  left: 3%;
  /* border-radius: 10px; */
  /* border: solid 1px #af8d28; */
}

#site_designer {
  position: relative;
  top: 0px;
  width: 83%;
  min-height: 100%;
  float: left;
  margin-left: 200px;
}

#farbfelder_matt {
   position: relative;
  width: 80%;
  float: left;
  left: 12%;
}

#farbfelder_glanz {
  position: relative;
  width: 80%;
  /* height: 100px; */
  float: left;

  left: 12%;
}

.farbfeld {
width: 11%;
  padding-top: 11%;
  position: relative;
  float: left;
  margin: 2%;
  border: 2px solid #af8d28;
  border-radius: 100%;
}

.farbfeld:hover{

  -webkit-filter: brightness(1.2);
    -moz-filter: brightness(1.2);
	  -o-filter: brightness(1.2);
	    -ms-filter: brightness(1.2);
		filter: brightness(1.2);
}

.farbfeld img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
}

#farbe1, #farbe1_g {
background-color: #9e472c; /* Kupfer */
}
#farbe2 , #farbe2_g {
background-color: #999a22; /* Mystic Moos */
}
#farbe3 , #farbe3_g {
background-color: #aa97ab; /* Juwelflieder */
}
#farbe4 , #farbe4_g {
background-color: #984050; /* Antik-Pink */
}
#farbe5, #farbe5_g  {
background-color: #acacac; /* Silber */
}
#farbe6 , #farbe6_g {
background-color: #6d0a0d; /* Stierblut */
}
#farbe7 , #farbe7_g {
background-color: #b00e0c; /* rot */
}
#farbe8 , #farbe8_g {
background-color: #b09137; /* Altgold */
}
#farbe9 , #farbe9_g {
background-color: #4d291b; /* Cappuccino */
}
#farbe10 , #farbe10_g {
background-color: #151515; /* Schwarz */
}

#farbe11 , #farbe11_g {
background-color: #2e3223; /* Baumgrün */
}
#farbe12_g {
background-color: #05616e; /* Laguna glanz */
}
#farbe13_g {
background-color: #3c5478; /* Ozean glanz */
}
#farbe14_g {
background-color: #909084; /* Taubengrau */
}
#farbe12 {
background-color: #046c75; /* Lum */
}
#farbe13 {
background-color: #547f2f; /* Apfelgruen */
}
#farbe15_g {
background-color: #e7e7d9; /* Weiss Emaille */
}
#farbe15 {
background-color: #f6f4ec; /* Samtweiss */
}
#farbe16 {
background-color: #a70c08; /* Rot Seidenmatt */
}
#farbe17 {
background-color: #4f4f4f; /* Schiefer */
}
#farbe18 {
background-color: #192847; /* Ozeanblau */
}






.tabs {
position: absolute;
  width: 50%;
  height: 50%;

}

.tabs img {
width: 100%;

}
#tab_1 {
  left: 0%;
  top: 0;
  background-image: url("../images/btn_lo.png");
  background-size: cover;
      -webkit-filter: hue-rotate(357deg);
	  	  -o-filter: hue-rotate(357deg);
	  -moz-filter: hue-rotate(357deg);
	  -ms-filter: hue-rotate(357deg);
    filter: hue-rotate(357deg);
  
}

#tab_2 {
    left: 50%;
  top: 0;
  background-image: url("../images/btn_ro.png");
    background-size: cover;
      -webkit-filter: hue-rotate(357deg);
	  	  -o-filter: hue-rotate(357deg);
	  -moz-filter: hue-rotate(357deg);
	  -ms-filter: hue-rotate(357deg);
    filter: hue-rotate(357deg);
}
#tab_3 {
left: 50%;
  top: 50%;
  background-image: url("../images/btn_ru.png");
    background-size: cover;
      -webkit-filter: hue-rotate(357deg);
	  	  -o-filter: hue-rotate(357deg);
	  -moz-filter: hue-rotate(357deg);
	  -ms-filter: hue-rotate(357deg);
    filter: hue-rotate(357deg);
}
#tab_4 {
left: 0%;
  top: 50%;
  background-image: url("../images/btn_lu.png");
    background-size: cover;
      -webkit-filter: hue-rotate(357deg);
	  -o-filter: hue-rotate(357deg);
	  -moz-filter: hue-rotate(357deg);
	  -ms-filter: hue-rotate(357deg);
	 
    filter: hue-rotate(357deg);
}

#tab_1:hover {
background-image: url("../images/btn_lo_sel.png");

}

#tab_1_preload1 {
background-image: url("../images/btn_lo_sel.png");
visibility: hidden;
height: 1px;
width: 1px;
}

#tab_1_preload2 {
background-image: url("../images/btn_lo_mo.png");
visibility: hidden;
height: 1px;
width: 1px;
}

#tab_2_preload1 {
background-image: url("../images/btn_ro_sel.png");
visibility: hidden;
height: 1px;
width: 1px;
}

#tab_2_preload2 {
background-image: url("../images/btn_ro_mo.png");
visibility: hidden;
height: 1px;
width: 1px;
}

#tab_3_preload1 {
background-image: url("../images/btn_ru_sel.png");
visibility: hidden;
height: 1px;
width: 1px;
}

#tab_3_preload2 {
background-image: url("../images/btn_ru_mo.png");
visibility: hidden;
height: 1px;
width: 1px;
}

#tab_4_preload1 {
background-image: url("../images/btn_lu_sel.png");
visibility: hidden;
height: 1px;
width: 1px;
}

#tab_4_preload2 {
background-image: url("../images/btn_lu_mo.png");
visibility: hidden;
height: 1px;
width: 1px;
}

#tab_2:hover {
background-image: url("../images/btn_ro_sel.png");

}
#tab_3:hover {
background-image: url("../images/btn_ru_sel.png");

}
#tab_4:hover {
background-image: url("../images/btn_lu_sel.png");

}

#tab_1.active {
background-image: url("../images/btn_lo_mo.png");

}

#tab_2.active {
background-image: url("../images/btn_ro_mo.png");

}
#tab_3.active {
background-image: url("../images/btn_ru_mo.png");

}
#tab_4.active {
background-image: url("../images/btn_lu_mo.png");

}

#preview_kugel {
  left: 9.4%;
  position: absolute;
  height: 80%;
  width: 80%;
  top: 2%;
  pointer-events: none;
  background-image: url("../images/Matt/Altgold.png");
  background-size: contain;
}

#back_kugel {
position: absolute;
  top: 32%;
  left: 28%;
  width: 45%;
  height: 54%;
  pointer-events: all;
  z-index: 5;
}

#generator {
 left: 25%;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0%;

}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #DDD;
	font-size: larger;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #DDD;
   opacity:  1;
   font-size: larger;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #DDD;
   opacity:  1;
   font-size: larger;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #DDD;
   font-size: larger;
}
#Help_Basic {
position: absolute;
  width: 100%;
  top: 10%;
  color: #ffffff;
  opacity: 0.8;
}

.Helper {
position: absolute;
width:20%;
}

#hlp1 {
left: 5%;
}

#hlp2 {
left: 5%;
margin-top: 35%;
}

#hlp3 {
left: 75%;

}
#hlp4 {
left: 75%;
margin-top: 35%;
}

.headline {
color: #af8d28;
    text-align: center;
    font-weight: normal;
    text-transform: uppercase;

    font-size: 1.3vw;

}
.hlp_text {
    font-size: 1vw;
}


#text_bounds {
    height: 80%;
    width: 80%;
    position: absolute;
    top: 20%;
    left: 12%;
}

#logo_preview {
    height: 80%;
    width: 80%;
    position: absolute;
    top: 20%;
    left: 10%;
	z-index: 10;
}
#kugel_text_preview {
width: 100%;
position:absolute;
text-align: center;
top: 50%;
    z-index: 20;
    pointer-events: none;
    cursor: move;
	font-size: 1.4vw;
color: #ffffff;
	
}

.singleupload {
    background: url(empty_bg.png);
    border:1px solid #ccc;
    text-align: center;
    width: 92px;
    height: 92px;
    line-height: 92px;
}

#font_selector{
width: 40%;

}

#Fett {
	background-image: url("../images/Fett_Icon.png");
width: 8%;
    padding-top: 8%;
    margin: 0.5%;
    margin-left: 1%;
    position: relative;
    float: left;
    background-size: cover;

}

#Kursiv{
background-image: url("../images/Kursiv_Icon.png");
width: 8%;
    padding-top: 8%;
    margin: 0.5%;

    position: relative;
    float: left;
    background-size: cover;
	}


#Unterstrichen{
background-image: url("../images/Unterstrich_Icon.png");
width: 8%;
    padding-top: 8%;
    margin: 0.5%;

    position: relative;
    float: left;
    background-size: cover;

}

#color_code {
    width: 15%;
    margin-left: 0.5%;
	float: right;
	    padding: 0px;
    text-align: center;
	
}

#colorSelector {
float: right;
left: 10px;
    width: 8%;
    padding-top: 8%;
    background-size: cover;
	height: initial;
	    
    background-size: cover;

}

#colorSelector div  {
background: initial;
background-color: #ffffff;
    width: 100%;
    padding-top: 100%;
    position: absolute;
    top: 0;
	left:0;
	height: initial;
	background-image: url("../images/color_selector.png");
	background-size: cover;
	}
	
.text_icons{
width: 8%;
padding-top: 8%;
position: relative;
float: left;
background-size: cover;
}	

#text_size, #y_axxis {
width: 88%;
margin-left: 1%;
right: -5%;
position: relative;
float: left;
}

.achsen {
position: relative;
width: 100%;
display: inline-block;
}



#sizeicon {
left: 10px;
background-image: url("../images/Skalieren_Icon.png");
}

#yicon {
left: 10px;
background-image: url("../images/Verschieben_Icon.png");
}

.clear_line {
width: 100%;
position:relative;
float: left;
}

#fertig_box {

position: relative;
float: right;
}
#fertig {
position: relative;
float: right;

}

#abschluss {
position: relative;
width: 80%;
}

#about_banner {
    background-image: url("../images/about_banner.jpg");

    width: 70%;
	margin: 5% auto;
    padding-top: 17.85%;
    background-size: cover;

}

#logo_text {
position: relative;
    width: 80%;
    color: white;
    font-size: 1vw;
    padding: 2%;
    pointer-events: none;
	}

#about,#contact {
margin-top: 5%;
    position: absolute;
    width: 100%;
}

.title {
    color: #af8d28; 
	text-align: center; 
	font-weight: normal; 
	text-transform: uppercase;
	text-decoration: underline;  
}

#about_text, #contact_text {
    color: #af8d28;
    text-align: center;
	width: 70%;
	margin: 0 auto;
}

.highlight {
	color: #fff !important;
}

#about_text a, #contact_text a {
	color: #fff;
	text-decoration: none;  
}

#about_text a:hover {
	color: #fff;
	text-decoration: underline;  
}

#map {
width: 70%;
height: 400px;
margin: 5% auto;



}

#contact_text {
 margin-top: 5%;
 }
 
hr {

width: 70%;
border-color: #af8d28;
display: inline-block;

}

#hr_farb {
margin-left: 15%;
}

.btm_itm {
list-style: none;
display: inline;
}

#bottom_menu {

    font-size: 10pt;
}

#btm {

position: absolute;
    bottom: 5%;
}

#imprint_clk {
color: white !important;
opacity: 0.4;
}
#imprint_clk:hover {
opacity: 1;
}

#pflichtfelder {
    position: relative;
    float: left;
    color: white;
    padding-left: 2%;
    font-size: 0.7vw;

}

#agb_usw {
    position: relative;
    width: 80%;
    padding-left: 3%;
    color: white;
    font-size: 0.7vw;
	pointer-events: none;

}

.farben_text2 {
color: #AF8D28;
    text-align: center;
    font-size: 1.1vw;
}

.error {
border-color: red !important;

}

#copyright 
{
    color: white;
    font-size: 0.7vw;
    text-align: right;
    width: 100%;
    opacity: 0.3;
	top: 5px;
    right: 10px;
	position: fixed;
	z-index: 300000;
}

#copyright a {
color: white;
}

#gal_imgs {
    width: 80%;
    margin: auto;
    margin-top: 2%;

}

.gal_imgs2{
margin: 1%;

padding: 2px;
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
    -moz-filter: brightness(0.8);
	-o-filter: brightness(0.8);
	width: 10%

}

.gal_imgs2:hover {
    border: solid 2px #AF8D28;
	padding: 0px;
	-webkit-filter: brightness(1);
    filter: brightness(1);
	-o-filter: brightness(1);
    -moz-filter: brightness(1);

 }

 #gallery {
 margin-top: 5%;
 position: absolute;
 
 }
 
 #anzahl, #size2 {
width: 39.2%;
 
 }
 
 #size2 {
     margin-left: 1.6%;
 
 }
 
 #bounds {
    background-color: rgba(255, 255, 255, 0.17);
    position: absolute;
    width: 60%;
    height: 60%;
    border-radius: 100%;
    border: 2px;
    border-style: dashed;
    top: 31%;
    left: 21.5%;
 }
 
 ::-webkit-input-placeholder {
   color: #737373;
}

:-moz-placeholder { /* Firefox 18- */
   color: #737373; 
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #737373; 
}

:-ms-input-placeholder {  
   color: #737373;
}