@charset "UTF-8";
/***!  /templates/as002085/css/custom.css  !***/

#inquiry {
	margin: 0;
}
.clear {
	clear: both;
	line-height: 0;
}
.shopping-bags {
	border: 1px solid #ddd;
}
.bags-menu li, .bags-menu label {
	font-size: 15px;
}
.bags-menu {
	float: left;
	border-right: double #ddd;
	padding: 15px;
	width: 30%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
.bags-info {
	float: left;
	border-left: double #ddd;
	padding: 15px;
	margin-left: -3px;
	width: 70%;
	box-sizing: border-box;
}
.bags-info img {
	max-width: 300px;
}
.steps h3 {
	font-size: 16px;
	font-weight: 700;
	line-height: 26px;
	margin-bottom: 8px;
	text-transform: none;
	color:black;
}
.steps {
	border-bottom: 1px double #ddd;
	margin-bottom: 10px;
}
.steps ul {
	margin: 0;
}
.steps li {
	list-style: none;
	font-size: 16px;
}
.steps-info {
	text-align: center;
}
.steps-info h4 {
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	margin: 10px 0;
	text-transform: none;
}
.steps-info p {
	padding-bottom: 14px;
}
.buttons {
	margin: 20px 0 30px 0;
	text-align: center;
}
.buttons .btn {
	margin-right: 5px;
	position: relative;
	z-index: 999;
}
.buttons span {
	vertical-align: top !important;
}
.step-selected {
	display: none;
}
.style_2 li label, .style_3 li label {
	display: inline-block;
	vertical-align: middle;
	min-width: 60px;
	margin-bottom: 8px;
}
.style_3 li label {
	min-width: 120px;
}
.style_3 input {
	max-width: 25px;
	padding: 2px !important;
	height: 24px !important;
}
.style_block label {
	display: block;
}
.style_block .form-input {
	width: 99%;
}
.color-selected .sp-dd {
	display: none;
}
.color-selected .sp-preview {
	margin-right: 0;
	width: 15px;
	height: 15px;
}
.color-selected .sp-replacer.sp-light {
	-webkit-pointer-events: none;
	-moz-pointer-events: none;
	-ms-pointer-events: none;
	pointer-events: none;
	cursor: auto;
}
.form-input {
	height: 35px !important;
	padding: 4px 10px !important;
	background: #FFF !important;
	border-color: #d0d0d0 !important;
}
.style_2 li .form-input {
	max-width: 140px;
}
.logo-image {
	margin-bottom: 12px;
}
.logo-image span {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	margin-bottom: 0;
	font-weight: 400;
}
.logo-image img {
	max-width: 100px;
}
.description {
	margin-top: 20px;
}
/* CLIPATHS MASK */
.front_show {
	transform: scaleX(1);
	max-height: 400px;
}
.behind_show {
	-webkit-transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	transform: scaleX(-1);
}
.bag-position {
	position: relative;
	max-width: 300px;
	display: inline-block;
	/*margin: 0 auto;*/
	margin-top: 40px;
	margin-bottom: 20px;
}
.bag-position2 {
	margin-top: 20px;
}
.bag_space {
	padding: 20px;
	max-width: 300px;
	display: inline-block;
}
.bag_space2 {
	padding-top: 120px;
}
.mask-front, .mask-behind {
	background: #FFF;
	position: absolute;
	top: 40px;
	left: 1px;
	height: 358px;
	width: 229px;
	-webkit-clip-path: polygon(1px 313px, 370px 382px, 275px 72px, 0px 20px);
	clip-path: polygon(1px 313px, 370px 382px, 275px 72px, 0px 20px);
}
.mask-side-right, .mask-side-left {
	background: #FFF;
	position: absolute;
	top: 64px;
	right: 51px;
	width: 18px;
	height: 332px;
	-webkit-clip-path: polygon(0px 330px, 0px 40px, 78px -100px, 110px 120px);
	clip-path: polygon(0px 330px, 0px 40px, 78px -100px, 110px 120px);
}
.mask-side-right2, .mask-side-left2 {
	background: #FFF;
	position: absolute;
	top: 42px;
	right: 1px;
	width: 49px;
	height: 320px;
	-webkit-clip-path: polygon(0px 27px, 0 318px, 216px 215px, 56px 0px);
	clip-path: polygon(0px 27px, 0 318px, 216px 215px, 56px 0px);
}
.mask-side-right3, .mask-side-left3 {
	background: #FFF;
	position: absolute;
	bottom: 0;
	right: 1px;
	width: 68px;
	height: 57px;
	-webkit-clip-path: polygon(18px 22px, 66px -1px, 0px 56px);
	clip-path: polygon(18px 22px, 66px -1px, 0px 56px);
}
.mask-behind {
	background: #FFF;
}
.mask-side-left, .mask-side-left2, .mask-side-left3 {
	background: #FFF;
}
.handle {
	position: absolute;
	top: 40px;
	left: 70px;
	z-index: 5;
}
.handle.handle-behind {
	left: 90px;
}
.handle2 {
	top: -91px;
	left: 82px;
}
.handle2.handle-behind {
	top: -91px;
	left: 55px;
}
.handle3 {
	top: -4px;
	left: 45px;
}
.handle3.handle-behind {
	top: -4px;
	left: 40px;
}
.handle4 {
    top: -53px;
    left: 60px;
}
.handle4.handle-behind {
	top: -53px;
    left: 60px;
}
.handle5 {
    top: 32px;
    left: 55px;
}
.handle5.handle-behind {
	top: 32px;
	left: 90px;
}
.handle-behind {
	-webkit-transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	transform: scaleX(-1);
}
.handle img {
	max-width: 140px;
}
.handle2 img {
	max-width: 160px;
}
.handle3 img {
	max-width: 215px;
}
.handle4 img {
	max-width: 180px;
}
.handle5 img {
	max-width: 160px;
}
.front-behind label {
	display: inline-block;
	margin: 0 12px 25px;
}
.logo_uploaded {
	left: 0;
	top: 15%;
	position: absolute;
	text-align: center;
	z-index: 2;
	height: 85%;
}
.logo_uploaded .valign {
	height: 100%;
	width: 230px;
	display: table;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	transform: rotate(3deg)
}
.logo_uploaded.behind-logo .valign {
	width: 370px;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	transform: rotate(-3deg)
}
.logo_uploaded .valign-in {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
}
.logo_uploaded img {
	vertical-align: middle;
	max-width: 150px;
	max-height: 300px;
}
.logo_top {
	top: 82px;
	height: auto;
}
.logo_left {
	left: 1px;
	text-align: left;
}
.logo_right {
	left: auto;
	right: 30px;
}
.logo_bottom {
	top: auto;
	bottom: 23px;
	height: auto;
}
.behind-logo.logo_left {
	left: 70px;
	text-align: left;
}
.behind-logo.logo_right {
	left: auto;
	right: -109px;
}
.front-logo .valign {
	-webkit-transform: skewY(10.5deg);
	-moz-transform: skewY(10.5deg);
	transform: skewY(10.5deg);
}
.logo_left .valign {
	-webkit-transform: skewY(10.5deg);
	-moz-transform: skewY(10.5deg);
	transform: skewY(10.5deg);
}
.logo_bottom .valign {
	-webkit-transform: skewY(10.5deg);
	-moz-transform: skewY(10.5deg);
	transform: skewY(10.5deg);
}
.logo_right .valign {
	-webkit-transform: skewY(10.5deg);
	-moz-transform: skewY(10.5deg);
	transform: skewY(10.5deg);
}
.logo_uploaded.behind-logo .valign {
	-webkit-transform: skewY(-10.5deg);
	-moz-transform: skewY(-10.5deg);
	transform: skewY(-10.5deg);
}
.behind-logo.logo_left .valign {
	-webkit-transform: skewY(-10.5deg);
	-moz-transform: skewY(-10.5deg);
	transform: skewY(-10.5deg);
}
.behind-logo.logo_bottom .valign {
	-webkit-transform: skewY(-10.5deg);
	-moz-transform: skewY(-10.5deg);
	transform: skewY(-10.5deg);
}
.behind-logo.logo_right .valign {
	-webkit-transform: skewY(-10.5deg);
	-moz-transform: skewY(-10.5deg);
	transform: skewY(-10.5deg);
}
.text-entered {
	left: 0px;
	top: 15%;
	position: absolute;
	text-align: center;
	z-index: 2;
	height: 85%;
	width: 180px;
	margin: 0 auto;
	word-break: break-all;
}
.text-entered .valign-text {
	height: 100%;
	width: 225px;
	display: table;
	-webkit-transform: rotate(10.5deg);
	-moz-transform: rotate(10.5deg);
	-ms-transform: rotate(10.5deg);
	-o-transform: rotate(10.5deg);
	transform: rotate(10.5deg)
}
.text-entered .valign-text-in {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
}
.text-entered.behind-text {
	left: 72px;
}
.text-entered.behind-text .valign-text {
	left: auto;
	right: -10px;
	-webkit-transform: rotate(-10.5deg);
	-moz-transform: rotate(-10.5deg);
	-ms-transform: rotate(-10.5deg);
	-o-transform: rotate(-10.5deg);
	transform: rotate(-10.5deg);
}
.text-entered h5 {
	font-size: 16px;
	text-transform: inherit;
	margin: 0;
}
.valign-text-in  span {
	font-family: Arial;
	font-weight: 700;
}
.txt_top {
	top: 85px;
	height: auto;
}
.txt_left {
	left: 2px;
	text-align: left;
}
.txt_right {
	left: auto;
	right: 115px;
	text-align: right;
}
.txt_bottom {
	top: auto;
	bottom: 28px;
	height: auto;
}
.behind-text.txt_left {
	left: 70px;
	text-align: left;
}
.behind-text.txt_right {
	left: auto;
	right: 48px;
	text-align: right;
}
.behind-text.txt_top {
	top: 90px;
	height: auto;
	left: 70px;
}
.behind-text.txt_bottom {
	top: auto;
	bottom: 28px;
	height: auto;
	left: 80px;
}
.txt_bottom .valign-text {
	-webkit-transform: rotate(10.5deg);
	-moz-transform: rotate(10.5deg);
	transform: rotate(10.5deg);
}
.behind-text.txt_bottom .valign-text {
	-webkit-transform: rotate(-10.5deg);
	-moz-transform: rotate(-10.5deg);
	transform: rotate(-10.5deg);
}
/* RADIO / CHECKBOX STYLES*/
.radio-box, .check-box {
	display: block;
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 15px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* Hide the browser's default radio button */
.radio-box input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
	position: absolute;
	top: 2px;
	left: 0;
	height: 18px;
	width: 18px;
	background-color: #FFF;
	border: 2px solid #ccc;
}
/* On mouse-over, add a grey background color */
.radio-box:hover input ~ .checkmark {
	background-color: #FFF;
}
/* When the radio button is checked, add a blue background */
.radio-box input:checked ~ .checkmark {
	background-color: #2196F3;
	border-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
/* Show the indicator (dot/circle) when checked */
.radio-box input:checked ~ .checkmark:after {
	display: block;
}
/* Style the indicator (dot/circle) 
.radio-box .checkmark:after {
	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}*/

/* Hide the browser's default checkbox */
.check-box input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
/* On mouse-over, add a grey background color */
.check-box:hover input ~ .checkmark {
	background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.check-box input:checked ~ .checkmark {
	background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
/* Show the checkmark when checked */
.check-box input:checked ~ .checkmark:after {
	display: block;
}
/* Style the checkmark/indicator */
.check-box .checkmark:after, .radio-box .checkmark:after {
	left: 6px;
	top: 3px;
	width: 4px;
	height: 8px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.upload {
	margin-bottom: 10px;
}
.file {
	position: relative;
	display: inline-block;
	cursor: pointer;
	height: 24px;
	width: 100%;
}
.file input {
	width: 100%;
	margin: 0;
	filter: alpha(opacity=0);
	opacity: 0;
}
.file-custom {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 5;
	height: 24px;
	padding: 6px 18px;
	line-height: 1.5;
	color: #555;
	background-color: #fff;
	border: 1px solid #d0d0d0;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.file-custom:after {
	content: "Logo / Bild";
}
.file-custom:before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	display: block;
	content: "hochladen";
	height: 24px;
	padding: 6px 18px;
	line-height: 1.5;
	color: #555;
	background-color: #eee;
	-webkit-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
}
.m-b-0 {
	margin-bottom: 0 !important;
}
.form {
	text-align: left;
	margin: 0 -10px;
}
.form ul {
	margin: 0;
}
.form li {
	list-style: none;
	display: inline-block;
	vertical-align: top;
	width: 33.33%;
	margin-left: -4px;
	padding: 0 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
.form li.full-length {
	width: 100%;
}
.form label {
	font-size: 15px;
	margin-bottom: 0;
}
.form label sup {
	color: #e73f3f;
	font-size: 15px;
	position: relative;
	top: 0;
}
.form-control {
	border: 1px solid #ddd;
	width: 100%;
	padding: 12px !important;
	outline: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	box-sizing: border-box;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
	border-radius: 2px !important;
	height: 35px !important;
	font-family: 'Lato', Arial, serif !important;
}
textarea.form-control {
	height: auto !important;
	min-height: 80px;
}
/* == SVG CSS == */
.front-background, .back-background {
	clip-path: url(#front-triangle);
}
.front-background1, .back-background1 {
	clip-path: url(#front-triangle1);
}
.front-background2, .back-background2 {
	clip-path: url(#front-triangle2);
}
.front-background3,.back-background3{
	clip-path: url(#front-triangle3);
}


.front-background-right1, .back-background-right1 {
	clip-path: url(#front-triangle-right1);
}
.front-background-right2, .back-background-right2 {
	clip-path: url(#front-triangle-right2);
}
.front-background-right3, .back-background-right3 {
	clip-path: url(#front-triangle-right3);
}
.front-background-right1a, .back-background-right1a {
	clip-path: url(#front-triangle-right1a);
}
.front-background-right2a, .back-background-right2a {
	clip-path: url(#front-triangle-right2a);
}
.front-background-right3a, .back-background-right3a {
	clip-path: url(#front-triangle-right3a);
}
.front-background-right1b, .back-background-right1b {
	clip-path: url(#front-triangle-right1b);
}
.front-background-right2b, .back-background-right2b {
	clip-path: url(#front-triangle-right2b);
}
.front-background-right3b, .back-background-right3b {
	clip-path: url(#front-triangle-right3b);
}
.front-background-right1c, .back-background-right1c {
	clip-path: url(#front-triangle-right1c);
}
.front-background-right2c, .back-background-right2c {
	clip-path: url(#front-triangle-right2c);
}
.front-background-right3c, .back-background-right3c {
	clip-path: url(#front-triangle-right3c);
}
.svg-position {
	position: absolute;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
}
.svg-front {
	height: 397px;
	position: absolute;
	width: 300px;
	z-index: 0;
	left: 1px;
	top: 60px;
}
.svg-front-right1 {
	height: 322px;
	position: absolute;
	width: 18px;
	z-index: 0;
	right: 51px;
	top: 70px;
}
.svg-front-right2 {
	height: 318px;
	position: absolute;
	width: 49px;
	z-index: 0;
	right: 1px;
	top: 45px;
}
.svg-front-right3 {
	height: 57px;
	position: absolute;
	width: 68px;
	z-index: 0;
	right: 1px;
	bottom: 0;
}
h4.category {
font-size: 16px;
margin: 0;
text-transform: inherit;
}
.enq-form.form {
    position: relative;
    z-index: 99;
}

/*svg.svg-front rect{
  background: blue !important;
}
.svg-position clipPath{
  background: pink !important;
}*/