/*** warsztatweb.pl* * @author      warsztatweb.pl* @link        http://www.warsztatweb.pl* @email       biuro@warsztatweb.pl* * @file        layout.css* @version     0.1* @date        05/12/2011* * Copyright (c) 2011*/
body{font-size: 1.000em; background:url(../img/body-bg.jpg) center repeat #c3c3c3;}
body.mobile {background: #fff;}
body,div,dl,dt,dd,li,pre,form,fieldset,input,textarea,p,blockquote,th,td,button{margin:0; padding:0; font-family:"Trebuchet MS",Tahoma,Arial, sans-serif; }
button{font-family:"Trebuchet MS",Tahoma,Arial, sans-serif; }
h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-size:100%; font-weight:normal; }
address,caption,cite,code,dfn,em,var{font-style:normal; font-weight:normal; }
ol,ul{list-style:none; margin:0; padding:0; }
table{border-collapse:collapse; border-spacing:0; }
caption,th{text-align:left; font-weight:normal; font-style:normal; }
acronym,abbr,fieldset,img{border:0; }
a:link,a:visited{text-decoration:none; }
a:hover{text-decoration:underline; }
.mr0{margin-right:0!important;}
html, body {height:100%;width:100%; overflow-y: hidden;}                                                                                           
html {overflow: auto;}
#full-page-container{overflow: auto; height:100%; width:100%;}

* {
    -moz-user-select:none;
    cursor:default;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	outline: none;
}
a{cursor: pointer!important;}
a img{cursor: pointer!important;}
/* Firefox Dotted Outline Fix */
a:active, a:focus,a:link, a:visited,a:hover{outline:none!important;}
/* FirefoxFix - dot. ktorek przy img */
a:focus,a:link, a:visited,a:hover{-moz-outline-style:none!important;}
p a {color: inherit;}
/* FONTY*/

@font-face {
    font-family: 'QuicksandLight';
    src: url('quicksand-font/quicksand_light-webfont.eot');
    src: url('quicksand-font/quicksand_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('quicksand-font/quicksand_light-webfont.woff') format('woff'),
         url('quicksand-font/quicksand_light-webfont.ttf') format('truetype'),
         url('quicksand-font/quicksand_light-webfont.svg#QuicksandLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QuicksandBook';
    src: url('quicksand-font/quicksand_book-webfont.eot');
    src: url('quicksand-font/quicksand_book-webfont.eot?#iefix') format('embedded-opentype'),
         url('quicksand-font/quicksand_book-webfont.woff') format('woff'),
         url('quicksand-font/quicksand_book-webfont.ttf') format('truetype'),
         url('quicksand-font/quicksand_book-webfont.svg#QuicksandBook') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QuicksandBold';
    src: url('quicksand-font/quicksand_bold-webfont.eot');
    src: url('quicksand-font/quicksand_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('quicksand-font/quicksand_bold-webfont.woff') format('woff'),
         url('quicksand-font/quicksand_bold-webfont.ttf') format('truetype'),
         url('quicksand-font/quicksand_bold-webfont.svg#QuicksandBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

.clear{line-height:0; height:0; clear:both; font-size:0; }
.fll{float:left;}
.flr{float:right;}
/* Firefox Dotted Outline Fix */
a:active{outline:none!important;}
/* FirefoxFix - dot. ktorek przy img */
a:focus{-moz-outline-style:none;}
.scrollx{overflow: auto; width: 100%;}
.placeholder {color: #aaa !important;}

h2.mobileTitle {display: none; margin: 20px 0 16px 0; font: 20px/20px 'QuicksandLight',Arial,sans-serif; text-transform: uppercase;}
.breadcrumb {display: none;padding: 0 0 9px 0; color: #777; font-size: 12px;}
	.breadcrumb a {color: inherit;}

/* ROOT-BG */
.root{height:590px; width:100%; background:url(../img/bg-root2.jpg) top center no-repeat; }
.mobile .root {background: none;}
.center{max-width:992px; margin:auto;}

/* MAIN */
#main{max-width:992px; margin:auto;}
#distance {width:100%; height:50%; margin-bottom:-335px; float:left;}
.page{float:left; width:100%; position:relative; overflow: hidden; height:670px; }

/* TOP */
.top{position: relative; width:100%; height:80px; float:left; border-bottom:1px solid #7e7e7e;  margin-bottom:25px; z-index: 30;}
.top .logotyp{float:left; margin-top:37px; width: 127px;}
.top .topnavi {float:right; margin-right:0px; list-style:none; position:relative;text-transform: uppercase;}
.top .topnavi li {float:left; margin:49px 0 0 55px; position:relative; display: table;}
.top .topnavi li a {display: table-cell; vertical-align: bottom; color:#545454; text-decoration:none; font-weight:bold; font-size:12px; line-height:12px; height: 24px;}
	.top .topnavi li.navi-li1028 a {width: 92px;}
	.top .topnavi li.navi-li1032 a {width: 83px;}
	.top .topnavi li.navi-li1033 a {width: 54px;}
	.top .topnavi li.navi-li1746 a {width: 62px; color: blue;}
		.top .topnavi li.navi-li1746 a span {display: block;}
	.top .topnavi li.navi-li1753 a {width: 65px; color: #fa1010;}
		.top .topnavi li.navi-li1753 a span {display: block; cursor: pointer;}
	.top .topnavi li.navi-li1035, .top .topnavi li.navi-li1606, .top .topnavi li.navi-li1001 {display: none;}
.top .topnavi li.current a, .top .topnavi li a:hover {color: #000; text-shadow: 0 0 5px #fff;}

/* ----------------- SUB PAGES ------------------ */

/* HOME */
.homepage {float:left; width:100%; margin-top:5px; position:relative; z-index: 5;}
.homepage .forderung{width:100%; height:480px; }

.forderung img{height:440px; width: 641px; float:left; padding-bottom:solid 84px; margin-right:50px;
    background: transparent;
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";      
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);        
        zoom: 1;
}
.forderung .data{ width:300px;  float:right; margin-right:0px; margin-top:260px;}
.data {    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */}
.data h1{ float:left; width:100%; font: 30px/30px 'QuicksandLight',Arial,sans-serif; color:#2d2d2d; margin-bottom:17px;  background:url(../img/data-h1-dots.png) bottom no-repeat;  padding-bottom:5px;  background-color: transparent!important;}
.forderung .data p {color: inherit; font-size: inherit;}
.data p{color:#838383; font-size:12px; margin-bottom:5px;}
 .pager {float: left; width: 226px; margin-top:40px;}
 .pager a {	background: url(../img/foto-pager.png) no-repeat scroll 0 0 transparent;display: block;float: left; height: 13px;margin-right: 3px;text-indent: -2000px; width: 13px;}
.pager a.activeSlide {background: url(../img/foto-pager-active.png) no-repeat scroll 0 0 transparent !important;}
.homepage .beschreibung{ width:300px;  position:absolute; top:25px; right:0px;  z-index:100;}
.beschreibung h1{ font: 30px/30px 'QuicksandLight',Arial,sans-serif; color:#2d2d2d; margin-bottom:13px; }
.beschreibung h2{ font: 26px/26px 'QuicksandLight',Arial,sans-serif;color:#fff; background-color:#2c2c2c; padding:5px 5px 6px 5px;}
.forderung .slick-dots {position: absolute; top: 218px; left: 695px; width: auto;}
	.slick-dots li {display: inline-block; cursor: pointer;}
		.forderung .slick-dots li button {margin: 0 2px; width: 13px; height: 13px; display: inline-block; border: 0; border-radius: 100%; background: url(../img/foto-pager.png) no-repeat scroll 0 0 transparent; text-indent: -2000px; overflow: hidden;}
		.forderung .slick-dots li.slick-active button {background: url(../img/foto-pager-active.png) no-repeat scroll 0 0 transparent !important}

/* UBER UNS */
.uber-uns {float:left; width:100%; margin-top:20px; position:relative; }
.uber-uns .column1 {display: block; position: relative; width: 33.3%; float: left; font-size: 13px; line-height: 16px; color: #545454; padding-right: 30px;}
.uber-uns .column2 {display: block; position: relative; width: 33.3%; float: left; font-size: 13px; line-height: 16px; color: #545454; padding-right: 30px;}
.uber-uns .column3 {display: block; position: relative; width: 33.3%; float: left; font-size: 13px; line-height: 16px; color: #545454;}
.uber-uns .heading {font: 26px/26px 'QuicksandLight',Arial,sans-serif; text-transform: uppercase;}
.uber-uns .important {font: 20px/20px 'QuicksandLight',Arial,sans-serif; text-transform: uppercase;}
.uber-uns h1 {margin: 0 0 16px 0;font: 26px/26px 'QuicksandLight',Arial,sans-serif; text-transform: uppercase;}
.uber-uns h2 {margin: 0 0 16px 0;font: 20px/20px 'QuicksandLight',Arial,sans-serif; text-transform: uppercase;}
.uber-uns p {margin: 0 0 16px 0;}

/* COUCHTISCHE BEISTELLTISCHE, ESSTISCHE SCHREIBTISCHE, REGALE SONSTIGE  */
.produkt-list {float:left; width:100%;  position:relative; height: 460px; overflow: auto; outline: none;}
.produkt-list .row {border-bottom: 1px solid #bbb; overflow: hidden; padding: 25px 0; }
	.mobile .produkt-list .row {border-bottom: 1px solid #999;}
.produkt-list .row .column-description {display: inline-block; position: relative; width: auto; float: left; margin-right: 3.05%; font: 13px/13px 'QuicksandLight',Arial,sans-serif; padding-top: 50px;}
.produkt-list .row .columnImgList {float: right; width: 600px;}
.produkt-list .row .column-description .modell {display: block; position: relative; margin: 5px 0; font-size: 20px; line-height: 20px; clear: both;}
.produkt-list .row .column {display: block; position: relative; width: 32.11%; float: left;}
.produkt-list .row .column .produkt-wrapper {display: block; position: relative; border: 1px solid #bbb; width: 98.78%; height: 100%; overflow: hidden;}
	.mobile .produkt-list .row .column .produkt-wrapper {border: 1px solid #999;}
	.produkt-list .row .column .produkt-wrapper img {float: left; width: 100%; max-width: 100%;}
.produkt-list .row .margin { margin-right: 1.22%;}
	.produkt-list .row .margin.col2 { margin-right: 0;}

/* PRODUKT */
.produkt {float:left; width:100%; margin-top:15px; position:relative; height: 465px; }
.produkt .photos {display: block; position: relative; width: 57.05%; float: left; padding-right:4.03%; padding-bottom: 50px;}
	.mobile .produkt .photos  {float: none; margin: 0 auto; max-width: 564px;}
.produkt .photos .photo {display: block; position: relative; margin-bottom: 10px; border: 1px solid #bbb; text-align: center;}
	.mobile .produkt .photos-border {position: relative; padding: 1px; overflow: hidden;}
		.mobile .produkt .photos-border::before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 0; left: 0; border: 1px solid #999; width: 100%; height: 0; padding: 0 0 59.39%; content: ""}
	.mobile .produkt .photos .photo {border: 0; margin: 0;}
		.mobile .produkt .photos .photo img {}
.produkt .photos .photo {background: transparent;}
.produkt .photos .photo a {display: block; position: absolute; top: 0; right: 0; padding: 4px; width: 40px; height: 40px; overflow: hidden;}
.produkt .photos .photo .zoom {width: 32px; height: 32px;}
.produkt .photos .photos-nr {display: block; position: absolute; bottom: -40px; left: -5px; width: 564px; height: 32px; text-align: center; font-size: 11px; padding-left: 7px; color: #555;}
.produkt .photos .photos-nr span {margin: -3px 10px 0 10px; font-size: 8px;}
.produkt .photos .photos-nr .bullet{background: url(/img/bulliets.gif) no-repeat center; padding:5px 2px;   }
.produkt .photos .margin {margin-right: 10px;}
.produkt .photos .buttons {padding: 0; width: 100%; text-align: justify;}
.produkt .photos .buttons li {float: left; margin-left: 2%; width: 32%; height: 40px;}
	.produkt .photos .buttons li:first-child {margin: 0;}
.produkt .photos .buttons a, a.printPDF {display: block; position: relative; font-size: 11px; line-height: 13px; border: none; padding: 5px 10px; margin-bottom: 20px; color: #fff; background: #5d5d5d; border-radius: 3px; border: 1px solid #eee; box-shadow: 0 0 2px #555; cursor: pointer; text-decoration: none;  text-align: center; }
.produkt .photos .buttons a.shopButton {border-color: #fa1010;}
a.printPDF {display: inline-block;}
	.mobile .produkt .photos .slick-dots {display: block; top: auto; top: 59vw; left: 0; width: 100%; text-align: center; } 
	.mobile .produkt .photos strong {display: block; padding: 40px 0 0 0; font: 20px/20px 'QuicksandLight',Arial,sans-serif; font-weight: normal; color:#000; margin-bottom: 10px;}
.produkt .mCustomScrollbar {width: 100%!important;}
.produkt .share-icons {float: right; width: 110px; margin-top: 0; margin-right: -10px;}
.produkt .share-icons div {float: left; width: 32px; height: 32px;}
.produkt .description {float: left; height: 335px; width: 42.95%; overflow: hidden; }
.produkt .description h1 {font: 20px/20px 'QuicksandLight',Arial,sans-serif; color:#000; margin-bottom: 10px; border-bottom: 1px dotted #bbb; padding-bottom: 10px;}
	.mobile .produkt .description h1 {border-bottom: 1px dotted #999; padding-bottom: 0;}
.produkt .description h2 {font: 16px/16px 'QuicksandLight',Arial,sans-serif; color:#000; margin-bottom: 5px;}
.produkt .description p {color:#777; font-size:12px; margin-bottom:20px;} 

.buttonsLine {position: relative; z-index: 3;}
.swiper-slide {position: relative;}
.produkt .photos .slick-dots {position: absolute; bottom: -30px; left: 25px; right: 25px;}
.produkt .photos .slick-dots li button {display: inline-block; border: 0; font-size: 13px; color:#777; text-decoration: none; padding:0 13px; background: url(../img/bulliets.gif) no-repeat center right; cursor: pointer}
	.not-mobile .produkt .photos .slick-dots li:last-child button {background: none;}
	.produkt .photos  .slick-dots li.slick-active button {color:#000;}
.photos.photos-border {position: relative; z-index: 10;}
.produkt .photos-content{margin-left:0px;}
.produkt .photo  img{display: block; max-width: 100%; background: transparent!important;
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00c3c3c3,endColorstr=#00c3c3c3)"!important;      
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00c3c3c3,endColorstr=#00c3c3c3)!important;        
        zoom: 1!important;}
.photos .slick-prev {position: absolute; bottom: -30px; left: 0; border: 0; width: 20px; height: 20px; line-height: 20px; background: transparent; color: #777; cursor: pointer;}
.photos .slick-next {position: absolute; bottom: -30px; right: 0; border: 0; width: 20px; height: 20px; line-height: 20px; background: transparent; color: #777; cursor: pointer;}

/* KONTAKT IMPRESSUM */
.kontakt-impressum h2 {margin: 0 0 16px 0;font: 20px/20px 'QuicksandLight',Arial,sans-serif; text-transform: uppercase;}
.kontakt-impressum {float:left; width:100%; height: 460px; position:relative;}
.kontakt-impressum .column1 {display: block; position: relative; padding: 0 40px 0 0; width: 33.3%; float: left; font-size: 13px; line-height: 16px; color: #545454; margin-top:20px; height: 407px;}
.kontakt-impressum .column1 #secondPartContactInfo {display: block; position: absolute; bottom: 0; left: 0;}
#secondPartContactInfo2 {display: none;}
.kontakt-impressum .column1 .twitter {display: block; position: relative; float: left; width: 80px; margin-top: 25px; overflow: hidden;}
.kontakt-impressum .column1 .facebook {display: block; position: relative; float: left; width: 120px; margin-top: 25px; overflow: hidden;}
.kontakt-impressum .column1 .google {display: block; position: relative; float: left; width: 35px; margin-top: 28px; overflow: hidden;}
.kontakt-impressum .column2 {display: block; position: relative; padding: 0 20px 0 0; width: 33.3%; float: left; font-size: 13px; line-height: 16px; color: #545454; margin-top:20px;}
.kontakt-impressum .column3 {display: block; position: relative; width: 33.3%; float: left; font-size: 13px; line-height: 16px; color: #545454; margin-top:20px;}
.kontakt-impressum .column3 .mandatory {font-size: 11px; color: #ff0000;  margin-top:-4px; margin-bottom:0px; float:left; line-height:50px;}
.kontakt-impressum .column3 p.mandatory {margin-top:0; margin-bottom:0px; float:none; line-height:1;}
.imprint_link {position: relative;}
	.imprint_link a {position: absolute; top: 0; left: 0;}

/*.kontakt-impressum .input-select {font-size: 13px; line-height: 13px; width: 322px; padding: 5px; margin-bottom: 24px; outline: none; border-radius: 3px; border: 1px solid #888; box-shadow: 0 0 2px #aaa; color: #555;}*/
input::placeholder {line-height: 28px;}
.inputBox {position: relative;}
.clearBox {clear: both;}
	.inputBox input {position: relative; -webkit-transition: margin 0.3s ease-in-out; transition: margin 0.3s ease-in-out; z-index: 3;}
		.focused input {margin-top: 10px; margin-bottom: 5px;}
	.inputBox span {position: absolute; top: 0; left: 0; display: inline-block; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; padding: 2px 10px 6px 10px; background: #888; color: #fff; -webkit-transition: top 0.3s ease-in-out; transition: top 0.3s ease-in-out; z-index: 1;}
		.focused span {top: -9px;}
.kontakt-impressum .input-text {font-size: 13px; height:28px; width: 100%; padding: 3px 5px; line-height: 26px; margin-bottom: 15px; color: #000; outline: none; border-radius: 3px; border: 1px solid #888; box-shadow: 0 0 2px #aaa; cursor: text;} 
	.kontakt-impressum .input_short {float: left; width: 30%; margin-right: 5%;}
	.kontakt-impressum .input_long {float: left; width: 65%;}
.kontakt-impressum .input-textarea {font-size: 13px; line-height: 13px; width: 100%; height: 225px; padding: 5px 15px 17px 5px; margin-bottom: 10px; color: #000; outline: none; border-radius: 3px; border: 1px solid #888; box-shadow: 0 0 2px #aaa; }
.kontakt-impressum .input-submit {font-size: 13px; line-height: 13px; border: none; width: 130px; padding: 10px 5px; margin-bottom: 20px; float: right; color: #fff; background: #333; border-radius: 3px; border: 1px solid #eee; box-shadow: 0 0 2px #555; cursor: pointer;}
.kontakt-impressum .input-reset {font-size: 13px; line-height: 13px; border: none; width: 130px; padding: 10px 5px; margin-bottom: 20px; color: #fff; background: #333; border-radius: 3px; border: 1px solid #eee; box-shadow: 0 0 2px #555; cursor: pointer;}
.kontakt-impressum #messageEMAIL {display: none; margin-bottom: 10px;}
.kontakt-impressum #messageERROR {display: none; margin-bottom: 10px;}
.kontakt-impressum #messageOK {display: none; margin-bottom: 10px;}
.kontakt-impressum .required {border: 1px solid #ff0000 !important; background: #ffc8c8; color:#000!important;}
.kontakt-impressum .mandatory-input {border: 1px solid #ff0000 !important;}
.kontakt-impressum .mandator {border: 1px solid #ff0000!important;}

.kontakt-impressum .buttons  input{box-sizing: border-box; display: block; position: relative; font-size: 11px; line-height: 13px; border: none; padding: 5px 10px; margin-bottom: 20px; color: #fff; background: #5d5d5d; border-radius: 3px; border: 1px solid #eee; box-shadow: 0 0 2px #555; cursor: pointer; text-decoration: none; width: 95px; text-align: center;  -webkit-appearance: none; -moz-appearance: none;}
.inputSelect {background: #fff url('../img/select-arrow.png') no-repeat 101% 50%;}
.selectInput {position: relative; z-index: 5;}
	.selectButton {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
	.selectInput .selectInputData {display: none; position: absolute; top: 22px; left: 5px; right: 5px; padding: 5px; background: #fff; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .2), inset 0px 6px 8px -8px rgba(0, 0, 0, .5); box-shadow: 0 0 4px rgba(0, 0, 0, .2), inset 0px 6px 8px -8px rgba(0, 0, 0, .5);}
		.selectInput .selectInputData a {display: block; padding: 0 4px; line-height: 22px; text-decoration: none;}
			.selectInput .selectInputData a.current, .selectInput .selectInputData a:hover {background: #bbb; text-decoration: none;}
			.selectInput .selectInputData a:hover {color: #fff;}
label {position: absolute; left: -10000px;}
.kontakt-impressum .input-text.error, .kontakt-impressum .input-textarea.error {background: #bbb;}
#mailBackground {display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100vh; background: rgb(0,0,0); background: rgba(0,0,0,0.7); z-index: 9999999;}
	.mailSend #mailBackground {display: block;}
	#mailInfo {position: fixed; top: 50%; left: 50%; margin: -100px 0 0 -140px; width: 280px; padding: 20px 40px; background: #fff; color: #121212; font-size: 14px; line-height: 17px; text-align: center;}
		#mailInfo a {margin: 0; display: block; margin-top: 30px; padding: 10px; background: #121212; color: #fff;}
			#mailInfo a:hover {text-decoration: none;}

#submitBackground {display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100vh; background: rgb(0,0,0); background: rgba(0,0,0,0.7); z-index: 9999999;}		
.mailCheck #submitBackground {display: block;}
	#submitInfo {position: fixed; top: 50%; left: 50%; margin: -157px 0 0 -140px; width: 280px; padding: 20px 40px; background: #fff; color: #121212; font-size: 14px; line-height: 17px; text-align: center;}
		#submitInfo p {margin: 0 0 16px 0;}
			#submitInfo p#mailContact {font-weight: bold;}
		#submitInfo a {display: block;
		position: relative;
		font-size: 11px;
		line-height: 13px;
		border: none;
		padding: 5px 10px;
		margin-bottom: 16px;
		color: #fff;
		background: #5d5d5d;
		border-radius: 3px;
		border: 1px solid #eee;
		box-shadow: 0 0 2px #555;
		cursor: pointer;
		text-decoration: none;
		width: 100%;
		text-align: center;}
	
/* ----------------- SUB PAGES END ------------------ */


/* FOOTER */
.footer{position: relative; height:70px; width:100%; background:url(../img/bg-footer2.jpg) top  no-repeat #000;}
.shadow{height:10px; width:100%; background:url(../img/bg-footer-shadow.png) top center no-repeat;}
.footer .footer-data{position: relative; width: 992px; font-size:10px; color:#737479; margin:auto; padding-top:20px; overflow: hidden;}
.footer .footer-data .address{width:300px; float:left; margin-top: 5px;}
.footer .footer-data .warsztatweb{width:300px; float:right; padding-top:8px; text-align: right;}
.footer .footer-data a{color:#B3B8BD;}
.footer .footer-data .marquee-style {position: absolute; top: 21px; left: 261px; width: 690px; height: 35px; color: #fff; overflow: hidden;}
.footer .footer-data .marquee-style div {font-family:"QuicksandLight",Arial,sans-serif !important; font-size: 24px!important; height: 35px !important;}
	.footer .footer-data .marquee-style > div {position: absolute; top: 0; right: 0;}
.mobileFooterInfo {display: none; font-family:"QuicksandLight",Arial,sans-serif !important; font-size: 18px;}


/* new elements */
.red {color: #ff0000;}
.zoomMode {overflow: hidden;}
#imprintUL {display: none;}
#openMobileNavi {display: none; position: absolute; top: 39px; right: 10px; width: 26px; height: 30px;}	
	#openMobileNavi span {position: absolute; top: 14px; left: 4px; width: 22px; height: 2px; background: #7e7e7e; content: "";}
	#openMobileNavi::before {position: absolute; top: 7px; left: 4px; width: 22px; height: 2px; background: #7e7e7e; content: "";}
	#openMobileNavi::after {position: absolute; bottom: 7px; left: 4px; width: 22px; height: 2px; background: #7e7e7e; content: "";}
.mCSB_scrollTools {z-index: 9999;}
#errorPage h1 {font: 30px/30px 'QuicksandLight',Arial,sans-serif; color: #2d2d2d; margin-bottom: 13px;}
#errorPage a  {display: block; position: relative; font-size: 11px; line-height: 13px; border: none; padding: 5px 10px; margin-bottom: 20px; color: #fff; background: #5d5d5d; border-radius: 3px;  border: 1px solid #eee;
box-shadow: 0 0 2px #555; cursor: pointer; text-decoration: none; width: 115px; text-align: center;} 	

body.mobile {overflow-y: auto;}
.mobile .root{height:auto; width:100%; }
.mobile .page{height:auto; }
.mobile #full-page-container {height: auto;}
.mobile #distance {display: none;}
.mobile #main {padding: 0 10px;}
.produkt {height: auto; margin-top: 0;}
.mobile #pane1 {height: auto;}
.mobile .produkt .swiper-slide img {max-width: 100%;}
.mobile .produkt .mCustomScrollbar, .produkt .mCustomScrollBox {height: auto!important;}
.mobile .produkt .photos {width: 100%; height: auto;}
.mobile .produkt .description {width: 100%; height: auto;}
.mobile .produkt .photos .buttons {padding: 0;}
.mobile .produkt .share-icons {margin-top: 0;}
.mobile .produkt .photos .buttons {width: 100%;}
.mobile .photos .slick-prev {display: none!important;}
.mobile .photos .slick-next {display: none!important;}
.mobile .photos .slick-dots li button {margin: 0 2px; padding: 0; width: 13px; height: 13px; display: inline-block; border: 0; border-radius: 100%; background: url(../img/foto-pager.png) no-repeat scroll 0 0 transparent; text-indent: -2000px; overflow: hidden;}
	.mobile .photos .slick-dots li.slick-active button {background: url(../img/foto-pager-active.png) no-repeat scroll 0 0 transparent !important}

@media (max-width: 1024px) {
	html, body {overflow-y: auto;}
	.root{height:auto; width:100%; background:url(../img/bg-root2.jpg) top center no-repeat; }
	.page{height:auto; }
	#full-page-container {height: auto;}
	#distance {display: none;}
	#main {padding: 0 10px;}
	.homepage .forderung {height: auto;}
	.forderung img{clear: both; left: none; display: block; height:440px; width: 641px; float:left; margin: 45px 0 10px 0;}
	.homepage .beschreibung{ width:100%;  position:relative; top:auto; right:auto;}
		.beschreibung h2 {width: 300px;}
	.forderung .data{clear: both; float: none; position: relative; top: auto; left: auto; padding: 0 0 30px 0; width:100%; margin:0;}
		.data h1 {background-position: left bottom;}
	.footer .footer-data {width: 100%;}
		.footer .footer-data .address {padding: 0 0 0 10px;}
	.forderung .slick-dots {top: 13px; left: 0;}
		
}
@media (max-width: 950px) {
.produkt-list .row .column-description {width: 100%; float: none; margin-right: 0; padding: 20px 0 10px 0;}
.produkt-list .row .columnImgList {float: none; width: 100%;}

	h2.mobileTitle {display: block; color: #000;}
	.breadcrumb {display: block;}
	#openMobileNavi {display:block;}
	#full-page-container {padding-top: 92px;}
	.top {margin-bottom: 6px; height: 71px; position: fixed; top:0; left: 0; width: 100%; padding: 0 10px; background: #fff;}
		.top .logotyp {margin-top: 28px;}
	.top #pageNavi {position: absolute; top: 71px; left: 0; border: 1px solid #7e7e7e; width: 100%; height: 0; overflow: hidden; background:url(../img/body-bg.jpg) center repeat #c3c3c3; z-index: 10; text-align: center;-webkit-transition: height 0.3s ease-in-out; transition: height 0.3s ease-in-out;}
		.top #pageNavi.closed {border-bottom: 0;}
		.top #pageNavi.opened {height: 68px;}
		.top ul {width: 100%; text-align: center;}
	.top .topnavi li {float: none; display: inline-block; margin: 20px 15px; position: relative;}
	.forderung img{height:auto; max-width: 100%;}
	.uber-uns .column1, .uber-uns .column2, .uber-uns .column3 {width: 100%; padding-right: 0;}
	.kontakt-impressum {height: auto;}
			.kontakt-impressum .column1 #secondPartContactInfo {display: block; position: relative; bottom: auto; left: auto;}
				.kontakt-impressum .column1  p {margin: 0 0 16px 0;}
	.kontakt-impressum .column1 {width: 100%; padding-right: 0; height: auto;}
	.kontakt-impressum .column2, .kontakt-impressum .column3 {width: 50%;}
	.produkt {height: auto; margin-top: 0;}
		#pane1 {height: auto;}
		.produkt-list .row {padding-top: 0;}
		.produkt .swiper-slide img {max-width: 100%;}
		.produkt .mCustomScrollbar, .produkt .mCustomScrollBox {height: auto!important;}
		.produkt .photos {width: 100%; height: auto;}
		.produkt .description {width: 100%; height: auto;}
		.produkt .photos .buttons {padding: 0;}
		.produkt .share-icons {margin-top: 0;}
		.produkt .photos .buttons {width: 100%;}
}
@media (max-width: 661px) {
	
	body{background: #fff;}
	.top #pageNavi {background: #f7f7f7;}
	.top .topnavi li:last-child {border-bottom: 0;}
	.top #pageNavi.opened {height: 245px;}
	.top .topnavi li {float: none; display: block; margin: 10px; border-bottom: 1px solid #B9B9B9; width: auto; height: 20px; position: relative;}
		.top .topnavi li a {float: none; display: block;}
			.top .topnavi li.navi-li1028 a {width: 100%;}
			.top .topnavi li.navi-li1032 a {width: 100%;}
			.top .topnavi li.navi-li1033 a {width: 100%;}
			.top .topnavi li.navi-li1746 a {width: 100%;}
			.top .topnavi li.navi-li1753 a {width: 100%;}
				.top .topnavi li.navi-li1746 a span {display: inline-block;}
				.top .topnavi li.navi-li1753 a span {display: inline-block;}
			.top .topnavi li.navi-li1035, .top .topnavi li.navi-li1606 {display: block;}
	#imprintUL {padding: 20px 0; margin: 0; width: 100%; background:url(../img/bg-footer2.jpg) top  no-repeat #000;}
	#imprintUL, #imprintUL .address {display: block; font-size:12px; color:#737479;}
		#imprintUL, #imprintUL .address a {display: inline-block; margin: -1px 0 0 0; height: auto; font-size: 12px; color: #fff;}
	.beschreibung h1 { font: 20px/20px 'QuicksandLight',Arial,sans-serif;}
	.beschreibung h2{display: none;}
	.data h1 {display: none;}
	.footer {height: 70px; background: #000 url(../img/bg-footer.jpg) no-repeat center center;}
		.footer .footer-data {padding: 15px 5px 0 5px; height: 70px;}
		.footer .footer-data .address {width: 100%; padding: 0 0 20px 0;text-align: center;}
		.footer .footer-data .marquee-style {float: none; position: absolute; top: 25px; left: auto; right: 0; width: 100%;}
			.footer .footer-data .marquee-style div {font-family:"QuicksandLight",Arial,sans-serif !important; font-size: 18px; height: 20px !important;}
		.address {display: none;}
	.mobile .kontakt-impressum .column1 #secondPartContactInfo {display: none;}
		.mobile #secondPartContactInfo2 {display: block; padding: 60px 0 30px 0;}
	.kontakt-impressum .column2, .kontakt-impressum .column3 {width: 100%; padding-right: 0;}
	.kontakt-impressum .column3 {margin-top: 0;}
	.mobileFooterInfo {display: block; color: #fff; text-align: center;}	
	.marquee-style {display: none;}
	.forderung .slick-dots {top: 5px; left: 0;}
	.produkt-list .row {border-bottom: 0!important;}
	.top .topnavi li a {font-size: 13px; line-height: 13px;}
	.uber-uns .column1, .uber-uns .column2, .uber-uns .column3 {font-size: 16px;}
	.produkt-list .row .column-description {font-size: 16px;}
	.produkt .description p {font-size: 16px;}
	.kontakt-impressum .column1, .kontakt-impressum .column3 {font-size: 16px;}
	.produkt .description h2 {font-size: 20px;}
	h2.mobileTitle, .kontakt-impressum h2 {font-size: 22px!important;}
}
@media (max-width: 570px) {
	.produkt .photos .buttons {text-align: center;}
	.produkt .photos .buttons li {display: inline-block; min-width: 115px; margin: 0 15px!important;}
	
}
@media (max-width: 480px) {
	.mobileFooterInfo {font-size: 14px;}
}
@media (min-width: 522px) {
	.mobile .produkt .photos .slick-dots {top: 344px;}
}
.slide-container img {opacity: 0; display: none;}
h4 a {color: inherit;}
	.slide-container.slick-initialized img {opacity: 1; display: block;}

input:disabled {opacity: 0.3;}	

.formDataBox {position: relative; padding: 0 0 10px 35px; margin-top: 15px;}
	.formDataBox a {color: #838383; text-decoration: underline;}
		.formDataCheck {position: absolute;top: 4px;left: 0;display: block;width: 22px;height: 22px;border: 1px solid #ff0000;}
			.formDataCheck::before {position: absolute;display: none;top: 11px;right: 11px;width: 6px;height: 2px;background: #838383;content: "";transform: rotate(45deg);}
			.formDataCheck::after {position: absolute;display: none;top: 8px;right: 0;width: 14px;height: 2px;background: #838383;content: "";transform: rotate(-45deg);}
			.formDataCheck.checked::before,.formDataCheck.checked::after {display: block;}
			.formDataCheck.checked {border-color: #838383;}
			
.col1content p {margin: 0 0 16px 0;font-size: 13px;
    line-height: 16px;
    color: #545454;}
	
.col1content h2 {
    margin: 0 0 16px 0;
    font: 20px/20px 'QuicksandLight',Arial,sans-serif;
text-transform: uppercase;}

form .buttons {position: relative;}
form .buttons::before {position: absolute; top: 0; left: 0; width: 100%; height: 50px; content:''; z-index: 3;}
form .buttons.clickable::before {display: none;}

/* loading icon */

.lds-ring {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 60%;
    margin: -100px 0 0 -40px;
    width: 80px;
    height: 80px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#mailSendBackground {display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100vh; background: rgb(0,0,0); background: rgba(0,0,0,0.7); z-index: 9999999;}
	#mailSendInfo {position: absolute; top: 30%; left: 50%; margin-left: -150px; width: 300px; color: #fff; font-size: 18px; text-align: center;}
.privacywire {left: auto!important; width: 320px!important;}	
.privacywire-page-links, .privacywire-buttons {padding: 10px 0 0 0;}
.privacywire-buttons button {font: 16px/18px 'QuicksandLight',Arial,sans-serif; color: #fff; border: 0; background-color: #2c2c2c; padding: 5px 15px; border-radius: 0; -webkit-appearance: none; cursor: pointer;}	
.privacywire-page-links a {color: #000}