/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-v20-latin/roboto-v20-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Roboto"), local("Roboto-Regular"), url("../fonts/roboto-v20-latin/roboto-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v20-latin/roboto-v20-latin-regular.woff2") format("woff2"), url("../fonts/roboto-v20-latin/roboto-v20-latin-regular.woff") format("woff"), url("../fonts/roboto-v20-latin/roboto-v20-latin-regular.ttf") format("truetype"), url("../fonts/roboto-v20-latin/roboto-v20-latin-regular.svg#Roboto") format("svg");
  /* Legacy iOS */ }

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/roboto-v20-latin/roboto-v20-latin-700.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Bold"), local("Roboto-Bold"), url("../fonts/roboto-v20-latin/roboto-v20-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v20-latin/roboto-v20-latin-700.woff2") format("woff2"), url("../fonts/roboto-v20-latin/roboto-v20-latin-700.woff") format("woff"), url("../fonts/roboto-v20-latin/roboto-v20-latin-700.ttf") format("truetype"), url("../fonts/roboto-v20-latin/roboto-v20-latin-700.svg#Roboto") format("svg");
  /* Legacy iOS */ }

@font-face {
  font-family: 'intersem';
  src: url('../font/intersem.eot?2432266');
  src: url('../font/intersem.eot?2432266#iefix') format('embedded-opentype'),
       url('../font/intersem.woff2?2432266') format('woff2'),
       url('../font/intersem.woff?2432266') format('woff'),
       url('../font/intersem.ttf?2432266') format('truetype'),
       url('../font/intersem.svg?2432266#intersem') format('svg');
  font-weight: normal;
  font-style: normal;
}

 [class^="in-icon-"]:before, [class*=" in-icon-"]:before {
  font-family: "intersem";
  font-style: normal;
  font-weight: normal;
  speak: never;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.in-icon-search:before { content: '\e800'; } /* '' */
.in-icon-ok:before { content: '\e801'; } /* '' */
.in-icon-right-big:before { content: '\e802'; } /* '' */
.in-icon-mail:before { content: '\e803'; } /* '' */
.in-icon-left-big:before { content: '\e804'; } /* '' */
.in-icon-up-big:before { content: '\e805'; } /* '' */
.in-icon-down-big:before { content: '\e806'; } /* '' */
.in-icon-home:before { content: '\e807'; } /* '' */
.in-icon-right-open:before { content: '\e808'; } /* '' */
.in-icon-left-open:before { content: '\e809'; } /* '' */
.in-icon-down-open:before { content: '\e80a'; } /* '' */
.in-icon-up-open:before { content: '\e80b'; } /* '' */
.in-icon-phone:before { content: '\e80c'; } /* '' */
.in-icon-mail-alt:before { content: '\f0e0'; } /* '' */
.in-icon-angle-double-left:before { content: '\f100'; } /* '' */
.in-icon-angle-double-right:before { content: '\f101'; } /* '' */
.in-icon-angle-double-up:before { content: '\f102'; } /* '' */
.in-icon-angle-double-down:before { content: '\f103'; } /* '' */
.in-icon-arrow-left:before { content: '\f104'; } /* '' */
.in-icon-arrow-right:before { content: '\f105'; } /* '' */
.in-icon-arrow-up:before { content: '\f106'; } /* '' */
.in-icon-arrow-down:before { content: '\f107'; } /* '' */
.in-icon-ok-squared:before { content: '\f14a'; } /* '' */


body {
	font-family: 'Roboto';
	font-size: 17px;
	font-weight: 400;
	color: #2A353E;
	/* background-image: url("Unbenannt.PNG");*/
	
}



.container-fluid {
	

	max-width:1900px;
}
.accordion-body {
	overflow:hidden;
}


h1,h2,h3,h4,h5,h6 {
	font-family: 'Roboto';
	font-weight: 400;
}
h1 {
	
	background-color: #227777 ;
	padding: 0;
	color: #fff;
	text-align: center;
	}

h2 {
	text-align: center;
	position: relative;
	font-size: 30px;
	
}

h3 {
	font-size: 25px; 
	color: #227777; 
	text-align: center; 
	
}

h4 {
	color: #fff; 
	text-align: center;
	position: relative;
	font-size: 30px;
}


a {
	color: #227777 ;
	text-decoration: none;
}

a:hover {
	color: #227777 ;
	opacity: 0.8;
	text-decoration: none;
}

.aligncenter {
	text-align: center;
	margin-left:auto;
	margin-right:auto;
}
.nopad {
	padding-left: 0px;
	padding-right: 0px;
	
}

li {						
	color: #227777 ;
	}

/* Overlay */

 .overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: #4c4c4c;
  /* background-color: rgba(0,0,0, 0.9); */
  overflow-y: scroll;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 4px;
  text-decoration: none;
  font-size: 18px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
 text-align: right;
  font-size: 60px;
}
.type {
		cursor:pointer;
		padding: 6px 10px;
}

.lineAfter {
  border-bottom: 1px solid #fff;
  width: 3rem;
  margin: 0 auto;
    margin-bottom: 0px;
  margin-bottom: 3rem;
  display: block;
}

/* Container */
.container-main {
	max-width: 1700px; 
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}


/* Contactform */

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
  opacity: 1;
  font-size: 18px;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
  opacity: 1;
 font-size: 18px;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
  opacity: 1;
font-size: 18px;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fff;
  opacity: 1;
 font-size: 18px;
}

.wpcf7-textarea, .wpcf7-text {

	display: block;
	width: 100%;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	                          
	border: 1px solid #c0c0c0;
	padding: 0px 8px 0px 8px;
	background: #fff;
	color: #000;
	text-align: left;
	
}
.wpcf7-select { 
	width: 100%; 
	
	
}

.wpcf7-submit {
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	border-radius: 0px;
	padding: 8px 20px;
	color:#fff;
    font-weight: 700;
	background: #227777 ;
	font-size: 20px;
	border: none;
	margin-bottom: 15px;
}
.wpcf7-form label {
	text-align: center;
	color: #777676;
}
.text-hidden {
	
	display:none;
	
}
.tab {
	margin-left: 25px;
}

#save-button {
	display: none;
}

/* Media Queries*/
@media (min-width: 1921px){

}

@media (max-width: 1200px){
	
}

@media (max-width: 992px){

}

@media (max-width: 768px){

.wpcf7-textarea, .wpcf7-text { 
width: 100%;
}

}



.col-active, .ral-active, .band-active {
	
	border: 3px solid #000;
	border-radius: 50%;
}


.box {
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); 
}

.accordion-button:focus {
   
    border-color: #227777;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(34, 119, 119,.5);
}
.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #227777;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
    
}
.accordion-button-inner {
	
    color: #227777;
    background-color: #fff;
   
	padding: 1rem 1.25rem;
font-size: 1rem;
width: 100%;
text-align: center;

border: solid 2px #227777;
}

.logo-innerframe  {
	display:block;
    position: relative;
    z-index: 50;
    top: -67vh;
	width:75px;
	height: 75px;
}
.logo-innerframe img  { 
width:100px;
height:auto;
}

#current-view > p {
	margin-bottom: 5px;
	
}
#current-view > div { 
padding-left: 35px;
}
.mtop {
	margin-top: 20px;
}
#model-button > a {
	color: #fff;
}

#colors, #liste, .listen {
    width: 100%;
    display: inline-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
}


.colors-item, .liste-item {
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-color: #eee;
    text-align: center;
    flex: 0 1 auto;
	margin: 3px;
}

.colors-item:hover, .liste-item:hover {
   border: 3px solid #000;
}
[data-tooltip] {
  position: relative;
  cursor: pointer;
  background: black;
  color: white;
  font-size: 12px;

  padding: 0 0.5em;
}

[data-tooltip]:before {
  content: 'color:'attr(data-tooltip)'';
  position: absolute;
  opacity: 0; 
  width: 100px;
  transform:translateX(-50%);
  bottom: -9999px;
  padding: 0.5em;
  background-color: black;
  border-radius: 0.25em;
  color: white;
  text-align: center;
 
}
[data-tooltip]:after {
  content: "";
  position: absolute;
  opacity: 0; 
  bottom: 15px;  
  margin-left: -5px; 
  border: 5px solid black;
  border-color: black transparent transparent transparent;
  
}
[data-tooltip]:hover:before {
  opacity: 1; 
  bottom: 30px;
}
[data-tooltip]:hover:after {
	 opacity: 1; 
  bottom: 20px;
}

.extra-item {
    
    cursor: pointer;
   
}

.accordion-button {
	padding: 14px 20px;
}

.img-fabric-wrap {
    background: url(../images/0003.jpg) no-repeat center center;
    display: flex;
    align-items: center;
    min-height: 120px;
    width: 100%;
}
	
	.ratio-16-9,
.ratio-16-10,
.ratio-square {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
}

.ratio-16-9 {
   /* padding-top: 56.25%; */
   padding-top: 68vh;
}

.ratio-16-10 {
    padding-top: 62.5%; /* This is your aspect-ratio */
}

.ratio-square {
    padding-top: 100%; /* This is your aspect-ratio */
}

.ratio-inner {
    display: block;
    position: absolute;

    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 100%;
	
}
.farbcode {
	text-align: center;
	margin-top: 0px;
	background-color: #fff;
	opacity: 0.9;
	margin-left: auto;
	margin-right: auto;
	max-width: 120px;
	
}

#config-kontakt-left {
	display:none;
	
}
#config-kontakt-right {
	display: inline-block;
}

button.config-kontakt{
    display: none;
}



@media (max-width: 1024px){
	body {
		font-size: 15px;
	}
	
	
	.ratio-16-9 {
   /* padding-top: 56.25%; */
   padding-top: 38vh;
}
.logo-innerframe  {
	display:block;
    position: relative;
    z-index: 50;
    top: -37vh;
	width:50px;
	height: 50px;
}
.logo-innerframe img  { 
width:75px;
height:auto;
}
	
#save-button {
	display:block;
}
	
.configurator-button {
	display:block !important;

}
#config-heading h2 {
    text-align: center;
    position: relative;
    font-size: 18px;
    margin-top: 50px;
	
	padding: 5px;
}


#configurator-wrapper {
	display:none;
	position: fixed;
top: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 15px 15px 15px 15px;
z-index: 999;
height: 100%;
overflow-y: auto;

width: 100%;

}

.configurator-mobile {
position: fixed;
top: 0;
left: 60px;
background-color: rgb(255, 255, 255);
padding: 15px;
z-index: 999;
max-height: 80%;
overflow-y: auto;
}
.configurator-inner {
background-color: #fff;
border-radius: 10px;
padding-bottom: 15px;
}
.img-fabric-wrap {
	
	min-height: 90px;
}


#config-kontakt-right {
	display:none;
	
}
#config-kontakt-left {
	display: inline-block;
}

}

@media (orientation: landscape)
and (max-width: 1024px){
.content {
		max-width: 75%;
		margin-left: auto;
		margin-right: auto;
	}
	
}
@media (orientation: portrait)
and (min-width: 1024px){
.content {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
}


/*checkbox and Radioboxes */
.inputGroup {
	 background-color: #fff;
	 display: block;
	 margin: 10px 0;
	 position: relative;
	 border:2px solid #227777;
}
 .inputGroup label {
	 padding: 12px 10px;
	 width: 100%;
	 display: block;
	 text-align: left;
	 color: #3c454c;
	 cursor: pointer;
	 position: relative;
	 z-index: 2;
	 transition: color 200ms ease-in;
	 overflow: hidden;
}
 .inputGroup label:before {
	 width: 10px;
	 height: 10px;
	 border-radius: 50%;
	 content: '';
	 background-color: #227777;
	 position: absolute;
	 left: 50%;
	 top: 50%;
	 transform: translate(-50%, -50%) scale3d(1, 1, 1);
	 transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
	 opacity: 0;
	 z-index: -1;
}
 .inputGroup label:after {
	 width: 32px;
	 height: 32px;
	 content: '';
	 border: 2px solid #d1d7dc;
	 background-color: #fff;
	 background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
	 background-repeat: no-repeat;
	 background-position: 2px 3px;
	 border-radius: 50%;
	 z-index: 2;
	 position: absolute;
	 right: 8px;
	 top: 50%;
	 transform: translateY(-50%);
	 cursor: pointer;
	 transition: all 200ms ease-in;
}
 .inputGroup input:checked ~ label {
	 color: #fff;
}
 .inputGroup input:checked ~ label:before {
	 transform: translate(-50%, -50%) scale3d(100, 100, 1);
/*	 transform: translate(-50%, -50%) scale3d(56, 56, 1); */
	 opacity: 1;
}
 .inputGroup input:checked ~ label:after {
	 background-color: #000;
	 border-color: #4edfc5;
}
 .inputGroup input {
	 width: 32px;
	 height: 32px;
	 order: 1;
	 z-index: 2;
	 position: absolute;
	 right: 30px;
	 top: 50%;
	 transform: translateY(-50%);
	 cursor: pointer;
	 visibility: hidden;
}


 code {
	 background-color: #9aa3ac;
	 padding: 0 8px;
}
/* Print */
@media print {
	.print-screen {
		width: 100%;
	}
	.contact, #kontakt-download {
		display: none;
	}
	
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

@media (min-width: 767px){
.dropdown:hover .dropdown-menu {
  display: block;
}
.dropdown-toggle:after {
	display: none;
	
}
.navbar {
	margin-left: -15px;
}

}