@CHARSET "ISO-8859-1";

/*
 GENERAL
*/

@font-face {
    font-family: "pxGrotesk";
    src: url('fonts/PxGroteskRegular.ttf') format("ttf"),
        url('fonts/PxGroteskRegular.eot') format("eot"),
        url('fonts/PxGroteskRegular.woff') format("woff"),
        url('fonts/PxGroteskRegular.woff2') format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "pxGrotesk";
    src: url('fonts/PxGroteskBold.ttf') format("ttf"),
        url('fonts/PxGroteskBold.eot') format("eot"),
        url('fonts/PxGroteskBold.woff') format("woff"),
        url('fonts/PxGroteskBold.woff2') format("woff2");
    font-weight: bold;
    font-style: normal;
}







html, body {
    height: 100%;
}

body {
    font-family: pxGrotesk;
    color: #241600;
    font-size: 12px;
    margin: 0;
    padding: 0;
    text-align: left;
    background: #f5f4f2;
}

body.embedded .hide-on-embedd {
    display: none !important;
}

a {
    outline: none;
    cursor: pointer;
    font-size: 12px;
    text-decoration: none;
    color: white;
}

img { border: 0px; }

p {
    margin-top: 0px;
    padding-top: 0px;
    font-size: 12px;
    line-height: 1.5em;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.table {
    display: table;
    padding: 0px;
    border-spacing: 0px;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
}

.bold {
    font-weight: bold;
}

#detail-box .table {
    width: 100%;
}

#detail-box .table .table-cell {
    width: 50%;
    padding: 3px;
}

.button {
    display: inline-block;
    padding: 7px 15px;
    border: 2px solid;
    font-size: 14px;
    text-transform: uppercase;
    transition: ease 0.25s;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.button-underline {
    font-size: 13px;
    color: #241600;
    text-decoration: underline;
    padding: 5px;
    font-weight: bold;
}

.button-underline:hover {
    color: #DBD77F;
}

.button-underline:active {
    color: #8d8600;
}

.button-cta {
    background: #241600;
    color: white;
    border-color: #241600;
}

.button-space-right {
    margin-right: 10px;
}

.button-cta:hover {
    background: #DBD77F;
    color: white;
    border-color: #DBD77F;
}

.button-cta:active {
    background: #8d8600;
    color: white;
    border-color: #8d8600;
}

.button-default {
    background: white;
    color: #241600;
    border-color: #241600;
}

.button-default:hover {
    background: white;
    color: #DBD77F;
    border-color: #DBD77F;
}

.button-default:active {
    background: white;
    color: #8d8600;
    border-color: #8d8600;
}

.button.right {
    margin:0 0 0 15px;
}

#surface-anchors > span:hover {
    color: #dbd77f;
}

.first-item-description {
    display: block;
    margin-bottom: 7px;
    margin-top: 10px;
}

/*
 BASIC STRUCTURE
*/

#content-box {
    position: absolute;
    width: 100%;
    height: 100%;
    touch-action: none;
}

#header-box {
    padding: 10px 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

#header-box a:hover, #header-box a:active, #header-box a:focus {
    color: #dbd77f;    
}

#header-box-background {
    height: 110px;
    top: 0px;
    right: 0px;
    left: 0px;
    position: absolute;
    z-index: -1;
    background-position: -12px -10px;
    background-repeat: no-repeat;
    background-size: 200% 110%;
}

.header-gradient {
    width: 100%;
    height: 50%;
    float: left;
}

#upper-header-gradient {
    background-image: linear-gradient(to bottom, rgba(36, 22, 0,1), rgba(36, 22, 0,0.9), rgba(36, 22, 0,0.65));
}

#lower-header-gradient {
    background-image: linear-gradient(to bottom, rgba(36, 22, 0,0.65), rgba(36, 22, 0,0.35), rgba(36, 22, 0,0.15) , rgba(36, 22, 0,0));
}

#header-content {
    height: 54px;
}

#header-content a#logo {
    float: left;
    margin: 2px 9px;
}

#header-content a#logo img {
    height: 45px;
    margin: 4px 30px 0px 12px;
}

#menue-box {
    float: left;
    margin: 21px 0 0;
}

#menue-box .menu-icon {
    display: none;
    font-size: 30px;
    margin-right: 5px;
    float: left;
    margin-top: -7px;
}

#menue-box #menu-camera-icon {
    display: block;
}

#menue-box li {
    float: left;
}

#menue-box li a {
    display: block;
    font-size: 16px;
    height: 21px;
    padding: 0 20px 0;
    text-transform: uppercase;
}

#menue-box li a.selected, #menue-box li a:hover {
    color: #dbd77f;
}

#overlay-gallery {
    padding-top: 0px;
    width: 820px;
}

#gallery-box a {
    color: #241600;
}

#myroom-info-text {
    text-align: center;
    padding: 20px;
    margin-bottom: 15px;
    color: #241600;
}

#myroom-info-body {
    font-size: 16px;
    margin-top: 20px;
}

#myroom-info-text > span {
    padding: 0 20px;
    display: block;
}

#myroom-headline-info {
    font-size: 22px;
    margin-bottom: 5px;
    margin-top: 5px;
}

#myroom-camera-icon {
    font-size: 40px;
    color: #dbd77f;
    margin-bottom: 10px;
}

#dyn-categories li.selected .gallery-txt {
    color: #dbd77f;
}

#myroom-upload-btn {
    margin-top: 15px;
    position: relative;
    cursor: pointer;
}

#myroom-upload-btn input {
    top: 0;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    cursor: pointer;
    left: 0;
    width: 100%;
}

.progress {
    position: absolute;
    left: 30px;
    right: 0px;
    display: none;
    color: #fff;
    width: calc(100% - 49px);
    height: 13px;
    margin-top: 10px;
}

.bar {
    height: 13px;
    background-color: #dbd77f;
}

.bar-text {
    width: 100%;
    line-height: 13px;
    font-size: 11px;
    text-indent: 5px;

    position: absolute;
    left: 0;
    top: 0;
}

#navigation {
    display: inline-block;
}

#search {
    position: relative;
}

#search input:focus {
    outline: none;
}

#search-item {
    color: #241600;
    position: absolute;
    right: 6px;
    font-size: 17px;
    top: 5px;
}

#language-box {
    white-space: nowrap;
    display: block;
    float: right;
    width: 130px;
    z-index: 1;
}

#language-box .current-language {
    display: block;
    font-size: 20px;
    padding: 0 20px 10px 15px;
    margin-top: 16px;
    text-transform: none;
}

#language-box .arrow-current-language {
    transform: rotate(90deg);
    float: right;
}

#language-box #other-language {
    background: #f5f4f2;
    display: none;
    border-bottom: 1px solid #241600;
}

#language-box li {
    float: none;
    padding: 5px;
}

#language-box li a {
    text-transform: none;
    color: #241600;
    font-size: 13px;
}

.current-language img, #other-language img {
    float: left;
    margin-right: 10px;
}

#language-box a:hover {
    color: #dbd77f;
}

/*
 CONTENTBOX
*/

#image-box {
    width: 100%;
    height:100%;
    position: absolute;
    overflow: hidden;
}

#image-box a {
    cursor: default;
    width: 100%;
    height: 100%;
}

#image-box a img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#image-box a img.myroom-uploaded-image {
    object-fit: contain;
}

#surface-anchors>span {
    position: absolute;
    display: block;
    color: white;
    font-size: 25px;
    display: block;
    height: 40px;
    width: 40px;
    background: #241600;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
}

#surface-anchors>span a {
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0px;
}

.icon-boden-whlen.icon-wand-whlen:before {
    content: "\e90e" !important;
}
.icon-zoomIn.selected:before {
    content: "\e909";
}

#wait-box {
    background-color: #000000;
    border-radius: 6px 6px 6px 6px;
    opacity: 0.7;
    filter:alpha(opacity=70);
    padding: 4px;
    z-index: 2;
}

#zoom-and-pan {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
}

#zoom-and-pan-detail {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#zoom-and-pan-detail > img {
    width: auto;
    height: auto;
}

#zoom-and-pan-navigator {
    position: absolute;
    left: 50px;
    top: 124px;
    width: 240px;
    height: 90px;
    
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
}

#zoom-and-pan-navigator > img {
    width: 100%;
    cursor: pointer;
}

#zoom-and-pan-navigator > div {
    position: absolute;
    background-color: #000;
    opacity: 0.5;
    cursor: move;
}

#toolbar-box {
    float: right;
    margin-top: 6px;
}

#toolbar-box ul li .hover-tooltip {
    font-family: pxGrotesk;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    margin-top: 5px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    margin-top: 5px;
    color: transparent;
    display: none;
}

#toolbar-box ul {
    direction: ltr;
}

#toolbar-box ul li:hover *, #toolbar-box ul li a.selected * {
    color: #dbd77f;
}

#toolbar-box ul li a.selected {
    color: #dbd77f !important;
}

#toolbar-box ul li {
    float: left;
    text-align: center;
    margin-right: 20px;
}

#toolbar-box ul li a {
    position: relative;
    display: block;
    padding: 7px 5px 7px 5px;
    font-size: 25px;
}

/*
  Overlays
*/

.Overlay {
    background: white;
    display: none;
    padding: 10px;
    padding-top: 50px;
    position: absolute;
    top: 70px;
    width: 800px;
    overflow: auto;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.title {
    display: block;
    height: 29px;
    margin-bottom: 20px;
    position: relative;
}

.title span.txt-title {
    font-size: 24px;
    font-weight: bold;
}

.title span.txt-title.interactive {
    cursor: pointer;
}

.btn-close {
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
    color: #241600;
    font-size: 25px;
    z-index: 1;
}

.content-overlay {
    height: 100%;
    position: relative;
}



#categories {
    float: left;
    margin-right: 20px;
    width: 195px;
}

#dyn-categories li {
    margin-bottom: 5px;
    padding-left: 20px;
}

#dyn-categories li a {
    display: inline-block;
    font-size: 14px;
    padding: 3px 0;
}

#dyn-categories li a.selected {
    color: #dbd77f;
    padding: 3px 0;
}

#gallery {
    float: left;
    width: 596px;
}

#carousel {
    height: 290px;
    margin-bottom: 10px;
    overflow: auto;
    position: relative;
    width: 100%;
}

#carousel ul {
    width: 100%;
}

#carousel > div {
    width: 100%;
}


#carousel .items {


    position: absolute;
    z-index: 1;
}


#carousel .items .page {
    float: left;
    width: 596px;
}

#carousel ul li {
    width: calc(33% - 5px);
    float: left;
    margin: 0 5px 5px 0;
}

#carousel li a {
    display: block;
    position: relative;
}

#carousel li a div {
    position: absolute;
    right: 3px;
    top: 3px;
    font-size: 13px;
    background: white;
    border-radius: 50%;
    padding: 1px;
    border: 1px solid #676767;
}

#carousel li a span {
    display: block;
    position: relative;
}

img.carousel {
    cursor: pointer;
    width: 100%;
}



#overlay-products {
    padding-top: 20px;
    padding-left: 30px;
    width: 780px;
}#product-list

#overlay-products .content-overlay {
    height:  395px;
}

#overlay-products .title {
    margin-bottom: 10px;
}

#overlay-products .title .tab-installation-panel:after, #overlay-products .title .tab-installation:after, #overlay-color .title .tab-color:after {
    content: "";
    background: none repeat scroll 0 0 #dbd77f;
    width: 100%;
    left: 0;
    height: 3px;
    position: absolute;
    top: 20px;
}

#overlay-products .title span, #overlay-color .title span {
    cursor: pointer;
    font-size: 15px;
    margin-right: 5px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    margin-right: 25px;
}

#overlay-products .tab-installation.disabled, #overlay-color .tab-installation.disabled {
    display: none;
}

#overlay-products .tab-installation-panel.disabled, #overlay-color .tab-installation-panel.disabled {
    display: none;
}

#overlay-products .tab-color.disabled, #overlay-color .tab-color.disabled {
    display: none;
}

#filter-format #title-profile.disabled, #filter-format #title-format.disabled {
    display: none;
}

#filter-box .filter-title {
    text-transform: uppercase;
    font-size: 16px;
    margin-top: 10px;
}

#overlay-color {
    overflow: hidden;
}

#DimensionBox {
    position: relative;
}

#filter-box {
    float: left;
    margin-right: 20px;
    width: 195px;
}

#filter-box .select-arrow {
    position: absolute;
    transform: rotate(90deg);
    right: 3px;
    color: #241600;
    margin-top: 12px;
}

.filter {
    border-bottom: 1px solid #241600;
    position: relative;
}

.filter select {
    opacity: 0;
}

.filter .inner-select {
    position: absolute;
    font-family: pxGrotesk,Helvetica,sans-serif;
    font-size: 16px;
    width: calc(100% - 15px);
    border: none;
    padding: 10px 0px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.filterTitle {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}

#filter-box select {
    color: #241600;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 16px;
    width: 100%;
    border: none;
    padding: 10px 2px;
    -webkit-appearance: none;
}

#filter-box select:focus, #filter-box select:active {
    outline: none;
    color: #b7b100;
}

#filter-box select:focus option, #filter-box select:active option {
    color: #241600;
}

#installation-box {
    margin-bottom: 0;
    margin-top: 10px;
    border-bottom: none;
}

#dyn-patterns li {
    display: inline-block;
    margin: 5px 3px 0 0;
    height: 23px;
    border: 2px solid #fff;
}

#dyn-patterns li img {
    width: 42px;
    height: 23px;
}

#dyn-patterns li.selected {
    border: 2px solid #8d8600;
}

.custom-select {
    color: #dbd77f;
}

.default-select {
    color: #808080;
}

#reset-all-filter {
    margin-top: 10px;
    display: block;
    float: left;
}

#reset-filter-mobile {
    display: none;
    float: right;
}

#reset-all-filter > span {
    position: absolute;
    font-size: 16px;
    margin-left: 10px;
}

#product-list-box {
    float: left;
    position: relative;
    width: 530px;
}

#product-list {
    height: 500px;
    margin-bottom: 20px;
    padding-right: 10px;
    overflow: auto;
    position: relative;
    width: 500px;
}

#product-list .img-item-name {
    color: #241600;
    padding: 5px;
    display: block;
    font-weight: bold;
}


#product-list .items {


    position: absolute;
    z-index: 1;
}

#product-list li {
    float: left;
    margin: 13px 0px 5px 10px;
    height: 140px;
    width: 110px;
    min-width: 80px;
}

#product-list li a {
    display: block;
    height: 100%;
    width: 100%;
}

#product-list li a > span {
    display: block;
    width: 100%;
    height: 100%;
    transition: ease 200ms;
    background: white;
}

#product-list li a span.selected {
    box-shadow: 0 3px 6px rgba(0,0,0,0.3), 0 3px 6px rgba(0,0,0,0.5);
    transform: scale(1.05);
    margin-top: -5px;
    display: block;
}

#product-list li a > span.img-item:not(.selected):hover {
    box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.2);
    transform: scale(1.02);
    margin-top: -2px;
}

#product-list li a img {
    width: 110px;
    height: 90px;
    object-fit: cover;
}

#product-list li a div.show-more-caption {
    margin-bottom: 10px;
}

#product-list li#btn-show-more {
    width: 230px;
    display: table;
}

#product-list li#btn-show-more a {
    color: #241600;
    text-align: center;
    font-weight: bold;
    vertical-align: middle;
    display: table-cell;
}

#product-list li a > span.show-more {
    display: inline;
}

#product-list ul li a span.showMore {
    float: left;
    font-size: 11px;
    font-weight: bold;
    margin: 30px 0 5px;
    position: relative;
    text-decoration: underline;
}


#NoFavorites {
    position: relative;
    text-align: center;
    top: 200px;
}

#Favorites {
    height: 414px;
    margin-bottom: 20px;
    overflow: auto;
    position: relative;
}

#favorites-box .bottom-btn-box a {
    float: right;
}

#dyn-favorite > li {
    float: left;
    list-style: none outside none;
    margin-bottom: 15px;
    width: calc(100% - 15px);
}

#dyn-favorite > li:not(:last-child) {
    border-bottom: 1px solid #241600;
}

#dyn-favorite .current-item-description {
    color: #241600;
    padding-left: 15px;
    width: calc(100% - 180px);
    float: left;
    font-size: 13px;
}

#dyn-favorite .current-item-description span {
    display: block;
    width: 100%;
}

#dyn-favorite .content-favorite .scene-img {
    float: left;
    height: 128px;
    position: relative;
    cursor: pointer;
    display: block;
    overflow: hidden;
}

#dyn-favorite .remove-favorites-button {
    color: #241600;
    font-size: 22px;
    position: absolute;
    right: 15px;
    z-index: 1;
    background: white;
}

#dyn-favorite .remove-favorites-button a {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

#dyn-favorite .content-favorite .scene-img img {
    height: 128px;
}

#dyn-favorite .content-favorite ul {
    float: left;
    width: 100%;
}

#dyn-favorite .content-favorite ul li {
    float: left;
    margin: 0 0 15px 0;
    position: relative;
    width: 50%;
}

#dyn-favorite .content-favorite ul li .object-title {
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

#dyn-favorite .content-favorite ul li .object-information {
    font-weight: bold;
    margin-top: 15px;
}

#dyn-favorite .content-favorite ul li .item-box {
    position: relative;
}

#dyn-favorite .content-favorite ul li .current-item {
    float: left;
    overflow: hidden;
    position: relative;
}



#overlay-color .title {
    height: auto;
}

#color-selector {
    height: 380px;
    overflow: auto;
}

#color-selection-box .bottom-btn-box {
    margin-top: 10px;
}

#overlay-bg {
    background: black;
    opacity: 0.5;
    position: absolute;
    z-index: 9998;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: none;
}

/*
  Overlay Combination
*/

#overlay-combination {
    display: none;
    padding: 10px;
    padding-left: 30px;
    position: absolute;
    width: 757px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 1;
}

#overlay-combination #show-calculator {
    margin-right: 10px;
}

#object-selection-box {
    height: 425px;
    margin-top: 10px;
    color: #241600;
}

#scene-objects-tab-menu {
    margin: 0 0 20px 0;
}

#scene-objects-tab-menu li {
    display: inline-block;
    margin-right: 5px;  
}

#scene-objects-tab-menu a {
    color: #241600;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    margin-right: 25px;
}

#scene-objects-tab-menu a.selected:after {
    content: "";
    background: none repeat scroll 0 0 #dbd77f;
    width: 100%;
    left: 0;
    height: 3px;
    position: absolute;
    top: 20px;
}

#dyn-scene-objects .first-item-description span {
    font-size: 15px;
    font-weight: bold;
}

#dyn-scene-objects .second-item-description {
    margin-top: 15px;
    display: block;
}

#dyn-scene-objects .second-item-description span {
    display: block;
}

#dyn-scene-objects .second-item-description span.spacing {
    margin-top: 5px;
}

#dyn-scene-objects li {
    margin-bottom: 30px;
    width: 100%;
}

#dyn-scene-objects li.installation {
    display: none;
}

#dyn-scene-objects li.installation.selected {
    display: block;
}

#dyn-scene-objects li .object-title {
    border-bottom: 1px solid #dddddd;
    color: #b9babd;
    display: block;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 5px;
    text-transform: uppercase;
}

#dyn-scene-objects li .item-box {
    height: 130px;
    position: relative;
}

#dyn-scene-objects li .current-item {
    float: left;
    margin-right: 20px;
    position: relative;
    width: 128px;
    height: 128px;
}

#dyn-scene-objects li .current-item-description {
    float: left;
    width: calc(100% - 150px);
}

#dyn-scene-objects li.color {
    display: none;
}

#detail-box {
    margin-top: 30px;
}

#detail-box .title {
    height: auto;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #808080;
}

#detail-box .title span.txt-title {
    font-size: 18px;
}

#detail-box .title span.txt-title-right {
    float: right;
}

#detail-left, #detail-right {
    float: left;
    width: 360px;   
}

#detail-box .txt-title-info {
    font-weight: bold;
    white-space: nowrap;
}

#overlay-combination .bottom-btn-box span {
    display: inline-block;
}

.bottom-btn-box span {
    float: right;
}

/*
    search Item Overlay
*/

#search-box {
    margin-bottom: 15px;
}

#search-box input {
    font-size: 12px;
    padding-bottom: 6px;
    padding-top: 6px;
    width: calc(100% - 8px);
    border: 1px solid #241600;
}

#no-items-found-box {
    display: none;
    color: #ff0000;
}

#items-found-box {
    display: none;
}

#title-matching-items {
    font-weight: bold;
    margin-bottom: 10px;
}

/*
 Overlay Calculator
*/

#overlay-calculator {
    background: none repeat scroll 0 0 #FFFFFF;
    display: none;
    padding: 30px;
    width: 400px;
    
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    left: 0px !important;
    right: 0px !important;
    margin: auto;
    
    overflow: hidden;
    z-index: 9999;
}

#calculator-tabs {
    border-bottom: 1px solid #ddd;
    height: 17px;
}

#calculator-tabs li {
    float: left;
    margin-right: 5px;
}

#calculator-tabs a {
    background: none repeat scroll 0 0 #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    color: #fff;
    font-weight: bold;
    padding: 3px 10px;
}

#calculator-tabs a.selected {
    background: none repeat scroll 0 0 #fff;
    border-bottom: 1px solid #fff;
    color: #87888a;
}

#calculator {
    padding: 10px 0;
    display: block;
    float: left;
    width: 100%;
}

#calculator .table {
    float: left;
    width: 50%;
}

#calculator input {
    font-size: 11px;
    width: 50px;
}

#calculator .table-cell {
    padding: 2px;
    text-align: left;
}

#calc-result {
    font-weight: bold;
    white-space: nowrap;
    position: absolute;
}

#calc-buttons {
    float: right;
    margin-top: 20px;
}

/*
    SplitPane
*/

#split-pane {
    display: none;
}

#split-pane-divider {
    position: absolute;
    width: 9px;
    height: 100%;
    left: 500px;
    
    cursor: e-resize;
    background-color: #f7f7f7;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
    

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    

    user-select: none;
}

#split-pane-use-left,
#split-pane-use-right {
    position: absolute;
    width: 115px;
    height: 50px;
    top: 20%;
    cursor: pointer;
    background-color: #f7f7f7;
    color: #1c1f26;
}

#split-pane-use-left {
    left: -115px;
}

#split-pane-use-right {
    left: 9px;
}

#split-pane-use-left.active,
#split-pane-use-right.active {
    color: #fff;
    background-color: #dbd77f;
}

#split-pane-use-left .split-pane-active,
#split-pane-use-right .split-pane-active {
    position: absolute;
    top: 8px;
    font-size: 13px;
    font-style: italic;
    display: none;
}

#split-pane-use-left.active .split-pane-active,
#split-pane-use-right.active .split-pane-active {
    display: block;
}

#split-pane-use-left .split-pane-active {
    left: 10px;
}

#split-pane-use-right .split-pane-active {
    right: 10px;
}

#split-pane-use-left .split-pane-active-txt {
    position: absolute;
    left: 10px;
    bottom: 8px;
    font-size: 13px;
    font-weight: bold;
}

#split-pane-use-right .split-pane-active-txt {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 13px;
    font-weight: bold;
}

#split-pane-use-left .split-pane-active-char {
    position: absolute;
    right: 4px;
    bottom: 0px;
    height: 50px;
    line-height: 50px;
    font-size: 36px;
    font-weight: bold;
}

#split-pane-use-right .split-pane-active-char {
    position: absolute;
    left: 4px;
    bottom: 0px;
    height: 50px;
    line-height: 50px;
    font-size: 36px;
    font-weight: bold;
}


#split-pane-right {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}

#split-pane-right div {
    position: absolute;
    width: 100%;
    height: 100%;
}

#split-pane-right div img {
    position:absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


#mobile-logo-header {
    display: none;
    position: absolute;
    width: 100%;
}

.visible-phone {
    display: none;
}

#numFavorites {
    float: left;    
}

#numFavorites * {
    float: left;
}

#current-product-description {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 20px;
    color: white;
}

#linking-imprint {
    display: block;
    position: absolute;
    bottom: 10px;
    color: white;
    right: 150px;
}

#linking-imprint a {
    padding: 0px 5px;
}

#mobile-filter-button-wrapper {
    display: none;
    height: 28px;
    border-bottom: 1px solid #241600;
}

#mobile-zoom-cancel {
    display: none;
}

#mobile-imprint {
    display: none;
}

@keyframes menu-up {
  0% { opacity: 0; bottom: 0; }
  67% { opacity: 0.5; }
  100% { opacity: 1; bottom: 54px; }
}

@media(max-width:1300px) {
    #logo {
        display: none;
    }
}

@media(max-width:1100px) {
    #menue-box li a {
        padding: 0 10px 0;
    }
    
    #toolbar-box ul li {
        margin-right: 15px;
    }
}

@media(max-width:1024px) {
    .hidden-tablet {
        display: none;
    }
    
    body.embedded #menue-box #tab-gallery span.myroom-title-span {
        display: inline;
    }
    
    #menue-box span {
        display: none;
    }
    
    #logo {
        display: block;
    }
    
    #header-content a#logo img {
        height:35px;
        margin: 7px 30px 0px 30px;
    }
    
    #menue-box .menu-icon {
        display: block;
        margin-top: -10px;
    }
    
    #toolbar-box {
        float: left;
    }
}

@media(max-width:950px) {
    #logo {
        display: none;
    }
    
    #myroom-info-text {
        margin-bottom: 5px;
    }
    
    .progress {
        left: 10px;
        right: 0px;
        width: calc(100% - 21px);
        height: 13px;
        margin-top: 5px;
    }
    
    #toolbar-box ul li .hover-tooltip {
        display: none !important;
    }
    
    #overlay-combination {
        padding-left: 10px;
        width: unset;
    }
    
    #header-box {
        background: #241600;
        z-index: 2;
    }
    
    #header-box-background {
        display: none;
    }
    
    #other-language {
        position: absolute;
        width: 130px;
    }
    
    .Overlay, #overlay-gallery {
        width: calc(100% - 20px);
    }
    
    #overlay-products {
        width: calc(100% - 40px);
    }
    
    #product-list {
        width: 100%;
    }
    
    #product-list-box {
        width: calc(100% - 250px);
    }
    
        
    #categories {
        width: 100%;
        margin-right: 0px;
    }
    
    #dyn-categories li {
        float: left;
        padding-left: 10px;
        padding-right: 10px;
    }
    
}

@media(min-width:751px) {
    
    #overlay-color {
        width: 520px;
        max-height: calc(100% - 130px);
    }
    
    #color-selector {
        height: calc(100vh - 211px);
    }
    
    #toolbar-box, #mobile-filter-wrapper {
        display: block !important;
    }
    
    body.embedded #toolbar-box {
        display: none !important;
    }
    
    body.embedded #tab-gallery {
        position: absolute;
        right: 0px;
    }

    #footer-box #dyn-rotation {
        display: block !important;
        opacity: 1 !important;
    }
    
    #rotation-entry:hover > span {
        color: #dbd77f;
    }
    
    #dyn-rotation .menu-pattern-element img {
        max-width: 34px;
        filter: brightness(0) invert(1);
        margin-top: 50%;
        transform: translateY(-50%);
    }
    
    #dyn-rotation .menu-pattern-element a.selected {
        background: #dbd77f;
    }
    
    #dyn-rotation .menu-pattern-element a.selected img {
        filter: brightness(0);
    }
    
    #rotation-entry-span {
        transform: rotate(0deg);
    }
    
    #toolbar-box ul li:hover *, #toolbar-box ul li a.selected * {
        display: block;
    }
    
    #toolbar-box {
        opacity: 1 !important;
    }
    
    #footer-box {
        bottom: 0;
        right: 0;
        color: #FFFFFF;
        background: #241600;
        color: white;
        position: absolute;
        width: 40px;
        height: 40px;
    }
    
    #rotation-entry {
        font-size: 26px;
        cursor: pointer;
        z-index: 3;
        height: 40px;
        width: 40px;
        text-align: center;
        position: absolute;
        top: 0px;
        background: #241600;
    }
    
    #rotation-entry-span {
        display: block;
        margin-top: 7px;
        width: 26px;
        margin-left: 7px;
        background: #241600;
    }
    
    #dyn-rotation {
        position: absolute;
        bottom: 0px;
        right: 0px;    
    }
    
    #dyn-rotation a.selected {
        color: black;
        background: #dbd77f;
    }
    
    #dyn-rotation div div {
        color: white;
        background: #241600;
        height: 40px;
        right: 0px;
        bottom: 0px;
        width: 40px;
        line-height: 40px;
        text-align: center;
        position: absolute;
        display: none;
    }
    
    #dyn-rotation div a {
        height: 100%;
        width: 100%;
        display: block;
    }
    
    #dyn-rotation li a {
        display: inline-block;
        padding: 0 5px;
    }
    
    #dyn-rotation div div.selected {
        color: #8d8600;
        font-weight: bold;
    }
}

@media(max-width:750px) {
    
    #linking-imprint {
        display: none;
    }
    
    #mobile-imprint {
        display: none;
        margin: 0px;
        transform: none;
        right: 0px;
        top: 50px;
        background: white;
        color: #241600;
        bottom: auto;
        position: absolute;
        padding: 5px;
    }
    
    #dyn-patterns ul {
        padding: 0 0 10px 15px;
    }
        
    body.in-iframe #mobile-imprint-toggle-expand {
        right: 40px !important;
    }
    
    #mobile-imprint a {
        color: #241600;
        padding: 5px 10px;
        display: block;
        font-size: 16px;
    }
    
    #mobile-imprint-toggle-expand {
        position: absolute;
        top: 0px;
        right: 0px;
        height: 50px;
        width: 50px;
        display: none;
    }
    
    #mobile-imprint-toggle {
        position: absolute;
        right: 10px;
        top: 12px;
        height: 24px;
        width: 24px;
        border: 2px solid white;
        border-radius: 50%;
        color: white;
        line-height: 26px;
        text-align: center;
        font-size: 18px;
        background: #241600;
        cursor: pointer;
    }
    
    #mobile-imprint-toggle-expand.selected #mobile-imprint-toggle {
        color: #b7b100;
        border-color: #b7b100;
    }
    
    body.embedded #dyn-rotation.mobile-expand-menu {
        position: unset;
        bottom: unset;
        width: unset;
        height: unset;
        animation: none;
    }
    
    body.embedded #dyn-rotation .menu-pattern-element img {
        max-width: 34px;
        filter: brightness(0) invert(1);
        margin-top: 50%;
        transform: translateY(-50%);
    }
    
    body.embedded #dyn-rotation .menu-pattern-element a.selected img {
        filter: brightness(0);
    }
    
    body.embedded #dyn-rotation div a {
        height: 100%;
        width: 100%;
        display: block;
    }
    
    body.embedded #rotation-entry-span {
        display: block;
        margin-top: 7px;
        width: 26px;
        margin-left: 7px;
        background: #241600;
    }
    
    body.embedded #dyn-rotation {
        position: absolute;
        bottom: 0px;
        right: 0px;
        display: block !important;
        opacity: 1 !important;
    }
    
    body.embedded #footer-box {
        bottom: 0;
        right: 0;
        color: #FFFFFF;
        background: #241600;
        color: white;
        position: absolute;
        width: 40px;
        height: 40px;
    }
    
    body.embedded #rotation-entry {
        font-size: 26px;
        cursor: pointer;
        z-index: 3;
        height: 40px;
        width: 40px;
        text-align: center;
        position: absolute;
        top: 0px;
        background: #241600;
    }
    
    body.embedded #dyn-rotation div div {
        color: white;
        background: #241600;
        height: 40px;
        right: 0px;
        bottom: 0px;
        width: 40px;
        line-height: 40px;
        text-align: center;
        position: absolute;
        display: none;
    }
    
    body.embedded #dyn-rotation a.selected {
        color: black;
        background: #dbd77f;
    }
    
    body.embedded #rotation-entry-span {
        display: block;
        margin-top: 7px;
        width: 26px;
        margin-left: 7px;
        background: #241600;
        transform: rotate(0deg);
    }
    
    body.embedded #footer-box #dyn-rotation {
        display: block !important;
        opacity: 1 !important;
        position: absolute;
        bottom: 0px;
        right: 0px;
    }
    
    body.embedded #rotation-entry span:hover, body.embedded #footer-box.selected span {
        transform: rotate(135deg);
        color: #dbd77f;
    }
    
    body.embedded #menue-box #tab-gallery span.myroom-title-span {
        display: inline;
    }
    
    body.embedded #header-box {
        bottom: unset;
        top: 0px;
        background: none;
        box-shadow: none;
    }
    
    #gallery-box {
        padding-top: 10px;
    }
    
    #color-selector {
        height: calc(100% - 45px);
    }
    
    .custom-select {
        font-weight: bold;
    }
    
    #mobile-zoom-cancel {
        position: absolute;
        top: 60px;
        left: 10px;
    }
    
    #zoom-and-pan-navigator {
        display: none;
    }
    
    #bottom-btn-box {
        position: fixed;
        bottom: 54px;
        padding: 10px;
        background: white;
        width: calc(100% - 40px);
    }
    
    #object-selection-box {
        height: calc(100% - 25px);
    }
    
    #object-selection-box > div {
        height: 100%;
    }
    
    #dyn-scene-objects {
        overflow: auto;
        height: calc(100% - 25px);
    }
    
    #bottom-btn-box {
        margin-bottom: 10px;
    }
    
    #filter-box .select-arrow {
        right: 15px;
    }
    
    #open-menu-button-mobile.selected, #menue-box li a.selected {
        background: #b7b100;
        color: white;
    }
    
    #footer-box,body:not(.embedded) #dyn-rotation {
        z-index: 3;
        display: flex;
    }
    
    #detail-box {
        width: 100%;
    }
    
    #detail-left, #detail-right {
        float: unset;
    }
    
    #detail-box > div {
        width: 100%;
    }
    
    #reset-all-colors {
        width: calc(100% - 35px);
        margin-bottom: 10px;
    }
    
    #favorites-box .bottom-btn-box a#remove-all-favorites {
        margin-bottom: 0px;
    }
    
    #dyn-favorite .content-favorite ul li {
        width: 100%;
    }
    
    #dyn-favorite .current-item-description {
        width: calc(100% - 145px);
    }
    
    #dyn-favorite .content-favorite ul li {
        margin: 0 0 10px 0;
    }
    
    #favorites-box {
        margin-top: 40px;
    }
    
    #favorites-box .bottom-btn-box a {
        float: left;
        width: calc(50% - 40px);
        margin: 0px;
    }
    
    #favorites-box .bottom-btn-box a:first-child {
        margin-right: 10px;
    }
    
    #Favorites {
        height: calc(100% - 44px);
        margin-bottom: 10px;
    }
    
    #dyn-favorite .remove-favorites-button {
        right: 5px;
    }
    
    #dyn-favorite .content-favorite .scene-img {
        float: initial;
    }
    
    .filter {
        border-bottom: none;
    }
    
    #filter-box .filter-title {
        padding-left: 15px;
    }
    
    #mobile-filter-wrapper .filter::before {
        content: "";
        border-top: 1px solid #808080;
        width: calc(100% - 30px);
        position: absolute;
        left: 15px;
        height: 1px;
        margin-top: -9px;
    }
    
    #mobile-filter-wrapper .filter:first-child::before, #mobile-filter-wrapper #installation-box::before {
        content: unset;
    }
    
    #reset-all-filter {
        display: none;
    }
    
    #reset-filter-mobile {
        display: block;
    }

    #mobile-filter-wrapper {
        display: none;
        border-bottom: 1px solid #241600;
    }
    
    #mobile-filter-button-wrapper {
        display: block;
    }
    
    #mobile-filter-button-wrapper > * {
        display: block;
        font-size: 14px;
        padding: 6px 15px;
        color: #241600;
    }
    
    #mobile-filter-toggle {
        float: left;
    }
    
    .filter .inner-select {
        font-weight: bold;
        padding-left: 15px;
    }
    
    #search-box input {
        -webkit-appearance: none;
        width: calc(100% - 19px);
        padding-left: 15px;
        border: none;
        border-radius: 0;
        padding-right: 4px;
        background: #f5f4f2;
    }
    
    #filter-box {
        width: calc(100% + 20px);
        margin-left: -10px;
    }
    
    #title-matching-items {
        padding-left: 15px;
    }
    
    #product-list-box {
        width: 100%;
        height: calc(100% - 83px);
        background: white;
        margin-top: 15px;
    }
    
    #product-list {
        width: calc(100% - 10px);
        height: 100%;
        margin-bottom: 5px;
    }
    
    #tabFavorite {
        position: relative;
    }
    
    #numFavorites div {
        background: #b7b100;
        color: white;
        border-radius: 50%;
        padding: 0 4px;
        font-size: 14px;
        display: inline;
    }
    
    #tabFavorite.selected #numFavorites div {
        background: #241600;
    }
    
    #numFavorites {
        left: 0;
        right: 0;
        top: 21px;
        bottom: 0;
        margin: auto;
        width: 0px;
        position: absolute;
    }
    
    .hidden-phone {
        display: none !important;
    }

    #carousel ul li {
        width: calc(50% - 5px);
    }
    
    #carousel {
        height: unset;
    }
    
    .content-overlay {
        height: calc(100% - 40px);
    }
    
    #gallery {
        width: 100%;
        padding-left: 3px;
    }
    
    #myroom-info-text {
        padding-bottom: 0px;
        padding-top: 10px;
    }
    
    #menue-box li a span {
        color: white;
    }
    
    #open-menu-button-mobile.selected span.icon-open-menu {
        display: none;
    }
    
    #open-menu-button-mobile span.icon-close {
        display: none;
    }
    
    #open-menu-button-mobile.selected span.icon-close {
        display: block;
    }
    
    .mobile-menu-shadow {
            box-shadow: 0px -2px 5px rgba(0,0,0,0.4);
    }
    
    #product-list li#btn-show-more {
        height: 50px;
        width: calc(100% - 10px);
        margin-top: 10px;
    }
    
    #product-list li#btn-show-more a {
        vertical-align: inherit;
    }
    
    #toolbar-box ul li a {
        padding: 0px;
        height: 100%;
        line-height: 54px;
    }
    
    #toolbar-box {
        background: #e9e9e9;
        height: 54px;
        margin-top: 0px;
        display: none;
    }
    
    #arrow-lang-mobile {
        float: right;
        transform: rotate(90deg);
    }
    
    #toolbar-box > ul > li {
        margin: 0px;
        height: 100%;
        display: table-cell;
        float: unset;
    }
    #toolbar-box ul {
        table-layout: fixed;
        padding-left: 5px;
        padding-right: 5px;
        height: 100%;
        display: table;
        width: calc(100% - 10px);
    }
    
    #menue-box {
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    
    #logo-mobile img {
        max-width: 200px;
        max-height: 30px;
        padding: 10px;
    }
    
    #menue-box li {
        width: 20%;
        height: 100%;
    }
    
    body.embedded #menue-box li {
        width: unset;
        float: right;
        white-space: nowrap;
    }
    
    body.embedded #menue-box .menu-icon {
        width: unset;
        margin-top: unset;
        font-size: 28px;
        line-height: 45px;
        margin-top: -2px;
        margin-right: 5px;
    }
    
    body.embedded #header-content {
        height: 45px;
    }
    
    body.embedded #menue-box li a {
        line-height: 45px;
        font-size: 18px;
        background: none;
        background-image: linear-gradient(to bottom, rgba(36, 22, 0,1), rgba(36, 22, 0,0.9), rgba(36, 22, 0,0.65));
    }
    
    body.embedded .Overlay {
        top: 0px;
        height: calc(100% - 20px);
        z-index: 3;
    }
    
    #menue-box li a {
        height: 100%;
        background: #241600;
    }
    
    #menue-box .menu-icon {
        width: 100%;
        text-align: center;
        font-size: 25px;
        margin-right: 0px;
        margin-top: 14px;
    }
    
    .visible-phone {
        display: block;
    }
    
    body:not(.embedded) #dyn-rotation, body:not(.embedded) #rotation-entry {
        display: none;
    }
    
    body:not(.embedded) #dyn-rotation div div {
        line-height: 54px;
        height: 54px;
        text-align: center;
    }
    
    body:not(.embedded) #dyn-rotation div div a.selected {
        background: #b7b100;
    }
    
    body:not(.embedded) #pattern-elements div {
        border-bottom: 1px solid #241600;
    }
    
    body:not(.embedded) #dyn-rotation div div a img {
        transform: translateY(70%);
    }
    
    body:not(.embedded) #dyn-rotation div div a {
        color: #241600;
        width: 100%;
        background: #e9e9e9;
        font-size: 16px;
    }
    
    body:not(.embedded) #dyn-rotation div {
        display: flex !important;
        height: 100%;
        width: 100%;
    }
    
    .Overlay {
        top: 50px;
        height: calc(100% - 124px);
        width: calc(100% - 20px) !important;
        padding: 10px !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        overflow: auto !important;
    }
    
    #toolbar-box ul li a {
        font-size: 25px;
        color: #241600;
    }

    #mobile-logo-header {
        display: block;
        background: #241600;
        text-align: center;
    }
    
    #header-box {
        background: #241600;
        padding: 0px;
    }
    
    #header-box {
        top: unset;
        bottom: 0;
    }
    
    #logo-mobile {
        display: block;
    }
    
    #mobile-language-box {
        position: relative;
        transform: translateY(-10px);
    }
    
    #other-language-mobile {
        position: absolute;
        width: 100%;
        background: #e9e9e9;
        padding-bottom: 3px;
        bottom: 15px;
        right: 0px;
    }
    
    #other-language-mobile ul {
        padding: 0px;
        width: 100%;
    }
    
    #other-language-mobile ul li {
        width: 100%;
        height: 15px;
        padding: 3px;
    }
    
    #other-language-mobile ul li a {
        line-height: unset;
    }
    
    #dyn-rotation.mobile-expand-menu {
        height: auto;
    }
    
    .mobile-expand-menu {
        position: absolute;
        bottom: 54px;
        width: 100%;
        height: 54px;
        animation: menu-up 0.5s;
    }
    
    #toolbar-box ul li a#current-language-mobile {
        font-size: 15px;
        margin-top: 17px;
        height: auto;
        line-height: unset;
        white-space: nowrap;
    }
    
    #other-language-mobile {
        display: none;
        min-width: 45px;
    }
    
    #other-language-mobile ul li a {
        font-size: 15px;
        color: #241600 !important;
        float: left;
    }
    
    #header-box-background {
        display: none;
    }
    
    #language-box {
        right: 0;
        display: none;
    }
}

@media (max-width: 550px) {
    
    .txt-title-right {
        display: none;  
    }
    
    #object-selection {
        height: calc(100% - 50px);
    }
    
    #object-selection-box {
        height: calc(100% - 15px);
    }
    
    #favorites-box .bottom-btn-box a {
        width: calc(100% - 35px);
        margin-bottom: 10px;
        float: left;
    }
    
    #object-selection .bottom-btn-box {
        margin-top: 10px !important;
    }
    
    #object-selection .bottom-btn-box a {
        width: calc(100% - 35px);
        margin-top: 10px;
        float: left;
    }
    
    #Favorites {
        height: calc(100% - 98px);
    }
    
    #dyn-favorite .content-favorite .scene-img img {
        max-width: calc(100% - 20px);
        height: auto;
    }
    
    #dyn-favorite .content-favorite .scene-img {
        height: unset;
    }
}

@media (max-width: 500px) {
    #arrow-lang-mobile {
        float: unset;
    }    
    
    #calculator .table {
        width: 100%;
    }
    
    #print-calc-button {
        margin-top: 16px;
    }
    
    #calculator .table .table-row {
        min-height: 16px;
    }
    
    #calculator .table .table-cell {
        width: 50%;
    }
    
    #other-language-mobile {
        bottom: 30px;
    }
    
    #overlay-calculator {
        width: calc(100% - 20px);
        padding: 10px;
    }
}

@media (max-width: 400px) {
    #product-list li a img {
        width: 100%;
    }
    
    #product-list li {
        margin: 13px 0px 5px 10px;
        width: calc(33% - 12px);
    }
    
    #dyn-favorite .current-item-description {
        width: 100%;
        padding-left: 0px;
    }
}

@media (max-width: 350px) {
    #mobile-filter-button-wrapper {
        height: 56px;
    }
    
    #mobile-filter-button-wrapper > * {
        width: calc(100% - 30px);
        float: left;
    }
    
    #product-list-box {
        height: calc(100% - 111px);
    }
}

@media (max-width: 300px) {
    #product-list li {
        width: calc(50% - 15px);
    }
}