/*
	CSS Stylesheet
	written by Hendrik Meyer
	MEDIA DSIGN | websolutions
	www.media-dsign.de
*/

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126 | License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,q:before, q:after {	content: ''; content: none; }
table {	border-collapse: collapse; 	border-spacing: 0; }

/** FONTS **/
/* maven-pro-regular - latin ( https://google-webfonts-helper.herokuapp.com/fonts/maven-pro?subsets=latin ) */
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/maven-pro-v32-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/maven-pro-v32-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/maven-pro-v32-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/maven-pro-v32-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/maven-pro-v32-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/maven-pro-v32-latin-regular.svg#MavenPro') format('svg'); /* Legacy iOS */
}
/* https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin */
/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-v30-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* styles */
body { margin: 0; background-color: #FFFFFF; text-align: left; font-family: 'Roboto',Arial,sans-serif; font-size: 16px; line-height: 130%; overflow-y: scroll; font-weight: 300;}
a:link,a:hover,a:active,a:visited { color: #000000; text-decoration: underline; }
h1 { font-size: 25px; margin: 0 0 15px 0; }
h2 { font-size: 23px; margin: 0 0 12px 0; }
h3 { font-size: 20px; margin: 0 0 10px 0; }
h4 { font-size: 18px; margin: 0 0 10px 0; }
h5 { font-size: 16px; margin: 0 0 10px 0; }
p { margin: 0px 0 16px 0; line-height: 150%; font: 300 16px 'Roboto';}
strong,b { font-weight: bold; }
#content ul { list-style: disc; padding: 0 20px; list-style-position: outside; margin: 0 0 16px 0;}
#content ol { list-style:decimal; padding: 0 15px 0 35px; }
#content li { padding: 8px; }
input[type=submit] { 
  /* font: bold 16px 'Maven Pro',sans-serif;  */
  padding: 10px 30px; 
  text-transform: uppercase;
  color: #484844; 
  text-decoration: none;
}
label { display: inline-block; width:40%; clear: left; vertical-align: top; line-height: 180%;}
label[for="agb_datenschutz"],
#form_register label {  width: auto; }
/* input[type=text],input[type=password] { border:#CCCCCC 1px solid; padding:5px; width: 60%;} */
select { border:#CCCCCC 1px solid; padding:5px; width: 60%; }

div.msg { padding: 5px; font-family: Arial; font-size: 11px; color: #000000; background-color: #CCCCCC; border: #FF0000 1px solid; }
#content .left {float:left;width:49%;min-height: 1275px;margin-bottom: 30px;position: relative;}
#content .right {float:right;width:49%;min-height: 1275px;margin-bottom: 30px;}
#content .inner { overflow: hidden; }
.error { color:red; }
.btn-primary,
.vs-login__login .btn-primary,
.vs-login__register a.btn-primary,
#form_register .btn-primary {
  background-color: #a9aaaa;
}
a.btn { text-decoration: none; }
a.btn-secondary { color:#FFFFFF; }

/* *,*::before,*::after {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
} */

#page { margin: 0; padding: 0; background: #EAEAEA;}
#header_outer { background: #FFF; padding-bottom: 60px; position: relative; z-index: 0;}
#login_navi { text-align: right; float:right; margin-right: 10px;}
#login_navi a { display: inline-block; padding: 10px 30px; text-decoration: none; text-transform: uppercase; font-size: 12px; color: #484844; line-height: 12px;}
#login_navi a.login_button { background: url('../img/icon_login.png') no-repeat center right; }
#login_navi a.register_button { background: url('../img/icon_register.png') no-repeat center right; }
#header { 
  height: 190px;  
  width: 970px; 
  padding: 10px; 
  color: #000; 
  margin: 0 auto; 
  border: #EEEEEE 1px solid; 
  position: relative; background: #fff;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
#header img { position:absolute; left:20px; top: 50px; }
#header::before { content: ""; position: absolute; left: 0px; top: 82px; width: 200px; height: 185px; z-index: -1; 
	 background: rgba(0, 0, 0, 0.1);
	 box-shadow: -20px 30px 10px rgba(0, 0, 0, 0.2);
	 -moz-box-shadow: -20px 30px 10px rgba(0, 0, 0, 0.2);
	 -webkit-box-shadow: -20px 30px 10px rgba(0, 0, 0, 0.1);
	-webkit-transform: skew(-2deg,-3deg) translate(23px,-82px);
	transform: skew(-2deg,-3deg) translate(23px,-82px);
	-moz-transform: skew(-2deg,-3deg) translate(23px,-82px); }
#header::after { content: ""; position: absolute; right: 0; top: 82px; width: 200px; height: 185px; z-index: -1;
	 background: rgba(0, 0, 0, 0.1);
	 -moz-box-shadow: 20px 30px 10px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 20px 30px 10px rgba(0, 0, 0, 0.3);
	 box-shadow: 20px 30px 10px rgba(0, 0, 0, 0.1);
	-moz-transform: skew(3deg,2deg) translate(-23px,-82px);
	-webkit-transform: skew(3deg,2deg) translate(-23px,-82px);
	transform: skew(3deg,2deg) translate(-23px,-82px); }
#navi { position:absolute; right: 20px; top: 84px; height: 39px; background: #A9AAAA; border: #EEEEEE 1px solid;}
#navi li { display: inline-block; }
#navi li a { /* font-size: 13px; */ text-decoration: none; display: block; margin: 0; line-height: 14px; padding: 11px 10px; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #555; font: bold 14px 'Maven Pro';}
#navi li.active a,#navi li a:hover { color: #fff; background: #D2DD72;}
#content { margin: 60px auto; width: 980px; font: 300 16px 'Roboto',sans-serif; color:#484844;}
#content h1,#content .left h2 { background: #CED675; padding:10px; text-align: center; line-height: 120%; font:bold 20px 'Maven Pro',sans-serif; color:#FFF; text-transform: uppercase; text-shadow: 1px 1px 2px #555;}
#content h2 { line-height: 120%; font: normal 20px 'Maven Pro',sans-serif; color:#484844; text-transform: uppercase; }
#content h3 { line-height: 120%; font:bold 18px 'Maven Pro',sans-serif; color:#484844; text-transform: uppercase; }
#content a { /* color: #D0DC73; */ }
#footer_outer { background: #FFF; padding-top: 60px; }
#footer { clear: both; text-align: center; width: 980px; margin: 0 auto; border: #EEEEEE 1px solid; font: 12px 'Roboto',sans-serif; color: #A4A49F;}
#footer div { width: 21%; display: inline-block; text-align: left; padding: 60px 10px 20px 10px; vertical-align: top;}
#footer div a { text-decoration: none; font: 14px 'Maven Pro',sans-serif; text-transform: uppercase;color:#484844;}
#footer div:nth-child(1) { width:26%; padding-top: 30px;}
#footer div:nth-child(4) { text-align: right; }
#footer div:nth-child(4) img { margin-bottom: 10px; }
#footer #copyright { display:block; text-align:right; padding: 20px;}
#partner {  text-decoration: none;     text-transform: uppercase;     font-size: 12px;     color: #484844;     line-height: 12px;position: absolute;right: 20px;bottom: 25px;}
#partner img {  position: static;margin-bottom: -10px;margin-left: 10px;}

/* startseite */
.index_text {font: 12px 'Roboto';padding: 30px 20px;clear: both;}
.index_text p { margin-bottom: 11px; line-height: 120%; color:#484844; font: 300 12px 'Roboto';}
.index_highlight { background: white;  }
#content .index_highlight a { text-decoration:none; }
#content .index_highlight h2 {/* text-shadow: 1px 1px 2px #CED675; */color: #484844;font-weight: 700;}
#content .left h1 { margin-bottom: 60px; }
.slider {background: #fff;border: #EEEEEE 1px solid;position: relative;padding: 20px 20px 100px 20px;margin-bottom: 20px;min-height: 880px;}
.slide { padding: 20px 20px 0px 20px; margin-bottom: 60px;}
.cycle-pager { display:block; height:31px; width:80%; position: absolute; top: 70px; text-align:center; left: 10%; z-index: 999;}
.cycle-pager span { display:inline-block; width:10px; height:10px; color: #A0A3A2; font-size: 40px; line-height: 31px; margin: 0 5px;}
.cycle-pager span.cycle-pager-active { color: #CDD473; }
#arrow_left { width:31px; height:31px; background: url('../img/slider_arrows.png') no-repeat 0% 0%; display:block; position: absolute; top: 70px; left: 20px; z-index: 999;}
#arrow_right { width:31px; height:31px; background: url('../img/slider_arrows.png') no-repeat -31px 0%; display:block; position: absolute; top: 70px; right: 20px; z-index: 999;}
#page.index .right { background: #fff; border: #EEEEEE 1px solid; position: relative;}
.index_vorteile {background: #EAEAEA;overflow: hidden;position: absolute;width: 100%;bottom: 0;}
#content .index_vorteile h2:nth-child(4) {margin: 0;}


/* Login */
.inner #login_form label,.inner #login_form input[type=text],.inner #login_form input[type=password] { width: 100%; }
table.sales { width:100%; border:#555 1px solid; background: #fff; box-shadow: 1px 1px 2px #555; margin-bottom: 30px; }
table.sales th { background: #CED675; color:#fff; font: bold 13px 'Maven Pro',sans-serif; padding:5px; }
table.sales td { font-size:12px; padding:5px; vertical-align: top;}
#account_error { color: red; }
table.contracts { width:100%; border:#555 1px solid; background: #fff; box-shadow: 1px 1px 2px #555; margin-bottom: 30px; }
table.contracts th { background: #CED675; color:#fff; font: bold 13px 'Maven Pro',sans-serif; padding:5px; }
table.contracts td { font-size:12px; padding:5px; vertical-align: top;}
.sales span.error,.contacts span.error,.contracts span.error { padding-top:0; display:inline-block; }
table.amounts { width:100%; border:#555 1px solid; background: #fff; box-shadow: 1px 1px 2px #555; margin-bottom: 30px; }
table.amounts th { background: #CED675; color:#fff; font: bold 13px 'Maven Pro',sans-serif; padding:5px; }
table.amounts td { font-size:12px; padding:5px; vertical-align: top;}

/* Registrierung */
#no_ustid { display:none; }

/* Kontakt */
#contact_table { width:100%; }
#contact_table td { vertical-align: top; padding: 0 10px 10px 0; }
#contact_table label[for="anrede"] { width:10%; }
#contact_table label[for="anredefrau"] { clear:none; width:20%; }
#contact_table label[for="anredemann"] { clear:none; width:60%; }
#contact_table input[type=text] { width:100%; }
#contact_table textarea { width:100%; }
#contact_table label[for="datenschutz_check"] { width: 95%;  }
#contact_table #datenschutz_check { float: left; margin-right: 10px; }
.g-recaptcha { height: 120px; }
.required_fields { font-size:80%; }

/* FAQ */
#faq .antwort { display:none; }
#faq h2 { cursor:pointer; }


/* Metal ------------------------- */
.metal {
  /* position: relative; */
  /* margin: 40px auto; */
  outline: none;
  
  /* font: bold 6em/2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; */
  text-align: center;
  /* color: hsla(0,0%,20%,1); */
  /* text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px; */
  
  transition: color .2s;
}



/* Radial ------------------------- */

.radial.metal {
  /* width: 160px; */
  /* height: 160px; */
  /* line-height: 160px; */
  border-radius: 20px;
  background-image: -webkit-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 3.5%),
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
    
    -webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
}


.metal.radial:before, .metal.radial:after {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  
  /* fake conical gradients */
  background-image: -webkit-radial-gradient(  50%   0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient(  50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient(   0%  50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient( 100%  50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);
}
.metal.radial:before { transform: rotate( 65deg); }
.metal.radial:after { transform: rotate(-65deg); }




/* Linear ------------------------- */

.metal.linear {
  width: 100px;
  font-size: 4em;
  height: 80px;
  border-radius: .5em;
  background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    
    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%)100%);
}


/* Oval ------------------------- */

.metal.linear.oval {
  margin-top: 100px;
  width: 70px;
  height: 60px;
  line-height: 60px !important;
  border-radius: 50%;
  font: italic bold 3em/50px Georgia, "Times New Roman", Times, serif;
}




/* active ------------------------- */

.metal:active {
  color: hsl(210, 100%, 40%);
  text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;
  box-shadow: 
    inset hsla(210,100%,30%,  1) 0  0px 0px 4px, /* border */
    inset hsla(210,100%,15%, .4) 0 -1px 5px 4px, /* soft SD */
    inset hsla(210,100%,20%,.25) 0 -1px 0px 7px, /* bottom SD */
    inset hsla(210,100%,100%,.7) 0  2px 1px 7px, /* top HL */
    
    hsla(210,100%,75%, .8) 0  0px 3px 2px, /* outer SD */
    hsla(210,50%,40%, .25) 0 -5px 6px 4px, /* outer SD */
    hsla(210,80%,95%,   1) 0  5px 6px 4px; /* outer HL */
}