/* ----------------------------------------------- */
/* NORMALIZE                                       */
/* ----------------------------------------------- */

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}
[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}
svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button{overflow:visible}button,select{text-transform:none}
button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}
optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}



/* ----------------------------------------------- */
/* LAYOUT                                          */
/* ----------------------------------------------- */

body { font-size:11px; line-height:1.5em; font-family:"Merriweather","Times New Roman",Times,Georgia,serif; font-weight:300; }
h1, h2, h3, h4, h5, h6 { font-size:3.63em; line-height:1em; font-family: "Alegreya Sans SC",Arial,Helvetica Neue,Helvetica,sans-serif; font-weight:100; text-transform:lowercase; margin:0; padding:0; }
h2 { margin-top:0.8em; }
h2:first-child { margin-top:0; }
.wrapper { width:90em; margin:auto; }
section { padding-top:4em; padding-bottom:4em; }
p { margin:1em 0 1em 0; }
.headl, .headl-big { font-size:3.63em; line-height:1em; font-family: "Alegreya Sans SC",Arial,Helvetica Neue,Helvetica,sans-serif; font-weight:100; text-transform:lowercase; margin:0; padding:0; }
.headl-big { font-weight:900; }

/* FORM ------------------------------------------ */
input, textarea { background:#CCCCCC; border:none; padding:0.7em 1em 0.7em 1em; }


/* BTN ------------------------------------------- */
a { color:#000000; text-decoration:none; border-bottom:1px dotted; }
a:hover { color:#FF0000; border:none; }
.btn { background:#000000; color:#FFFFFF; border:none; font-size:3.63em; line-height:1em; transition: all 0.5s ease 0s; font-family: "Alegreya Sans SC",Arial,Helvetica Neue,Helvetica,sans-serif; font-weight:100; text-transform:lowercase; margin:0; padding:0.1em 0.4em 0.1em 0.4em; }
.btn:hover { background:#CC0000; color:#FFFFFF; transition: all 0.5s ease 0s; }


/* NAV ------------------------------------------- */
nav { text-align:center; }
nav ul { list-style:none; margin:0; padding:0; }
nav ul li { display:inline; margin-left:2em; }
nav ul li:first-child { margin-left:0; }
nav a { border:none; }


/* COLS ------------------------------------------ */
.col-w-1-2, .col-s-1-2 { width:43em; float:left; text-align:right; }
.col-w-2-2, .col-s-2-2 { width:43em; float:right; }
.col-s-1-2 { margin-left:18em; width:25em; }
.col-s-2-2 { margin-right:18em; width:25em; }


/* HEADER ---------------------------------------- */
header { padding:5em 0 6em 0; text-align:center; }
#header-logo { width:164px; height:100px; margin:auto; margin-bottom:6em; background:url("../img/logo2x.png") 0 0 no-repeat; background-size:164px 100px; }
#productname-white { width:438px; height:22px; margin:auto; margin-bottom:1.5em; background:url("../img/productname2x.png") 0 0 no-repeat; background-size:438px 22px; }
header h1 { font-size:1em; line-height:1.5em; font-family:"Merriweather","Times New Roman",Times,Georgia,serif; font-weight:300; text-transform:none; }


/* USPS ------------------------------------------ */
#usps { background:#CCCCCC; }


/* PRODUCT --------------------------------------- */
#product { text-align:center; padding-top:6em; padding-bottom:8em; }
#product .btn-ordner { margin-top:4em; }


/* FOOTER ---------------------------------------- */
footer { margin:3em 0 10em 0; text-align:center; }


/* BG -------------------------------------------- */
.black-bg { background:#000000; color:#FFFFFF; }
.black-bg .btn { background:#FFFFFF; color:#000000; }
.black-bg .btn:hover { background:#CC0000; color:#FFFFFF; }


/* BESTELLEN ------------------------------------- */
#order h2 { text-align:center; }
#order #email { margin:1em 0 1.5em 0; width:100%; }
#order #ja-label { float:left; margin:0 0 2em 1em; width:80%; }
#order #ja { float:left; }


/* FRAG NACH ------------------------------------- */
#question h2 { text-align:center; }
#question #email, #question #firstname, #question #formquestion { margin:1em 0 1.5em 0; width:100%; }
#question #formquestion { height:12em; }
#question-send { text-align:center; }


/* Benachrichtigung ------------------------------ */
#benachrichtigung { text-align:center; }







/* ----------------------------------------------- */
/* RESPONSIVE                                      */
/* ----------------------------------------------- */

/* groesse Monitore */
@media only screen and (min-width: 1300px) {

	body { font-size:14px; line-height:1.7em; }
	.wrapper { width:85em; }

	/* COLS -------------------------------------- */
	.col-w-1-2, .col-s-1-2 { width:40em; }
	.col-w-2-2, .col-s-2-2 { width:40em; }
	.col-s-1-2 { margin-left:15em; width:25em; }
	.col-s-2-2 { margin-right:15em; width:25em; }

}


/* 640p */
@media only screen and (max-width: 950px) {

	.wrapper { width:55em; }

	/* COLS -------------------------------------- */
	.col-w-1-2, .col-s-1-2 { width:25.5em; }
	.col-w-2-2, .col-s-2-2 { width:25.5em; }
	.col-s-1-2 { margin-left:0.5em; width:25em; }
	.col-s-2-2 { margin-right:0.5em; width:25em; }

}


/* 480p */
@media only screen and (max-width: 599px) {

	/* ----------------------------------------------- */
	/* LAYOUT                                          */
	/* ----------------------------------------------- */
	.wrapper { width:42em; }

	/* COLS -------------------------------------- */
	.col-w-1-2, .col-s-1-2 { width:20em; }
	.col-w-2-2, .col-s-2-2 { width:20em; }
	.col-s-1-2 { margin-left:0; width:20em; }
	.col-s-2-2 { margin-right:0; width:20em; }

}

/* 320p */
@media only screen and (max-width: 479px) {

	.wrapper { width:27em; }

	/* COLS ------------------------------------- */
	.col-w-1-2, .col-s-1-2 { width:auto; float:none; text-align:left; }
	.col-w-2-2, .col-s-2-2 { width:auto; float:none; }
	.col-s-1-2 { margin-left:0; width:auto; }
	.col-s-2-2 { margin-right:0; width:auto; }

	/* HEADER ----------------------------------- */
	#productname-white { width:297px; height:15px; background-size:297px 15px; }

	/* QUESTION --------------------------------- */
	#homequestion { text-align:center; }
	#homequestion .col-w-1-2 { text-align:center; margin-bottom:1em; }
	
}



/* ----------------------------------------------- */
/* SYS                                             */
/* ----------------------------------------------- */

.cf:before, .cf:after { content:" "; display:table; }
.cf:after { clear:both; }
.cf { *zoom:1; }