@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&family=Gudea:wght@400;700&display=swap');
body{font-family: 'Gudea', sans-serif;color:#18222b;font-size:16px;font-weight: 400;overflow-x: hidden;}
a{transition:color ease-out .3s;color:#35a8e0;text-decoration:none;position:relative}
a:hover,a:active{text-decoration:none;color:inherit;}
h1,h2,h3,h4,h5{font-family: 'Arvo', serif;}
h1{font-size:48px;line-height:100%}
h2{font-size:38px;line-height:100%}
h3{font-size:28px;line-height:100%}
h4{font-size:19px;line-height:100%}
h5{font-size:16px;line-height:100%}
p{font-size:16px;line-height: 120%;}
b, strong {font-weight: 700;}
.leadkep{max-width:100%;height:auto!important;min-width: 100%;}
.default-font {font-family: 'Gudea', sans-serif;}
.alt-font {font-family: 'Arvo', serif;}
img {max-width: 100%;height: auto!important;}
/*site*/
main.calculator {max-width: 100%;}
.regular-text p:last-child {margin-bottom: 0;}
.container {max-width:1400px;}
.screen {display: none;}
.screen.screen-active {display: block;}
.btn-active {font-weight: bold;border-width: 3px;}
.screen-title {padding:10px 0;font-weight: 800;}
.thumb-info {bottom: 0;left: 0;width: 100%;}
.selectable {cursor:pointer;font-size: 15px;}
.selectable .thumb > * {transform: scale(1,1);transition: all ease-out .6s;background-color: #f0f0f0;}
/* .selectable.selected .thumb {background-color:#646f79;} */
.selectable.selected .thumb > * {box-shadow: 0 0 0 1px #2A9A11;transition: all ease-in .1s;}
.selectable-c-2.selected .thumb > * {box-shadow: 0 0 0 8px #fff, 0 0 10px rgba(0,0,0,.2), 0 3px 15px rgba(0,0,0,.1);}
.selectable-c-3.selected .thumb > * {box-shadow: none;border-color: #2A9A11!important; }
.selectable-c-4.selected .thumb {box-shadow: 0 0 0 1px #2A9A11;transition: all ease-in .1s;}
.fabrics-item .selectable .thumb-info { background-color: #18222b !important; }
.fabrics-item .selectable .thumb-info h5 {font-size: 15px !important;}
.fabrics-item.selected .thumb {border: 1px solid #2A9A11;position: relative;}
.fabrics-item.selected .thumb::after {content: '';background-image: url('/art/accept.svg');background-size: cover;position: absolute;bottom:-8px;right:-8px;width:18px;height:18px;}
.selectable.selected .thumb, .selectable-c-2.selected .thumb, .selectable-c-3.selected .thumb, .selectable-c-4.selected .thumb { position: relative;}
.selectable.selected .thumb::after, .selectable-c-2.selected .thumb::after, .selectable-c-3.selected .thumb::after, .selectable-c-4.selected .thumb::after 
    {content: '';background-image: url('/art/accept.svg');background-size: cover;position: absolute;bottom:-8px;right:-8px;width:18px;height:18px;}
.selectable-c-4.selected .thumb::after { right: -7px;}

.thumb-lining .preview { min-height: 50px !important; width: 50px !important; border:1px solid #dee2e6 !important;}
.screen-debug { background-color: blanchedalmond;}
.debug-log p { margin: 0; padding: 0; font-size: 12px; line-height: 1.5; color: #333; }
.image-cover {}
.image-cover img {width: 100%;  object-fit: cover;}
.btn-fabrics-filter-hide .badge {background-color: #fff;color: #6E6A69;padding: 8px;margin-left: 10px;border-radius: 100px;font-style: normal;min-width: 28px;height: 28px;}
hr {border-color: #dde2e3;} 
.border-c-1 {border-color: #aab5c0!important;}
.border-c-2 {border-color: #dde2e3!important;}
.icon {background-repeat: no-repeat;background-size: 80%;display: block;background-position: center;}
.icon-play {background-image: url('/art/play.png');}
.icon-magnifier {background-image: url('/art/ico-magnifier.svg');}
.icon-s-100 {width:100px;height:100px;}
.icon-s-160 {width:160px;height:160px;}
.icon-s-15p {width:15%;}
.info-num {font-family: 'Arvo', serif;font-size: 24px;display: block;width:55px;height:55px;line-height: 33px;text-align: center;border-radius: 50%;cursor: pointer;border:none;box-shadow: 0 0 0 3px #a4afba;transition: all ease-in .3s;}
.info-num:hover {box-shadow: 0 0 0 3px #fff;transition: all ease-out .1s;}
.info-data {max-width: 240px;box-shadow: 0 0 0 3px #a4afba;z-index: 99;position: relative;}
.info:hover .info-data {}
.square-130 {width:130px;height: 130px;}
.square-90 {width:90px;height: 90px;}
.square-50 {width: 50px;height: 50px;}
.square-75 {width:75px;height: 75px;}
.w-50p {width: 50px;}
.w-75p {width: 75px;}
.scrollable {position: relative;overflow-y: auto;}
.scrollable-1 {max-height: 320px;}
.scrollable-2 {max-height:450px;min-height: 55px;}
.scrollable-3 {max-height:900px;}
.table>:not(caption)>*>* {padding-top:.25rem;padding-bottom:.25rem;border-bottom: 0;}
.eq-height-img.img-h-36 img {width: auto!important;height:36px!important;margin-left: 5px;margin-right: 5px;}
/*custom scrollbar*/
/* width */
::-webkit-scrollbar {  width: 6px;}
/* Track */
::-webkit-scrollbar-track {  background: #cfdae6;}
/* Handle */
::-webkit-scrollbar-thumb {  background: #aab5c0;border-radius: 5px;}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {  background: #8e9ca9;}
/*-> bg-colors, text-colors*/
.bg-trans-1{background-color: rgba(0,0,0,.5);}
.bg-grad-2{background-color: #0094d8; background-image: linear-gradient(90deg, #0094d8, #b8d738);}
.bg-grad-3{background-color: #211f20; background-image: linear-gradient(180deg, #2c2a2b, #211f20);}

.bg-1 {background-color: #18222b;}
.bg-2 {background-color: #525252;}
.bg-3 {background-color: #FDFBF7;}
.bg-4 {background-color: #444e58;}
.bg-5 {background-color: #fff;}
.bg-6 {background-color: #cfdae6;}
.bg-7 {background-color: #4bab52;}
.bg-8 {background-color: #b9d738;}
.bg-9 {background-color: #0f5f97;}
.bg-10 {background-color: #155c18;}
.bg-11 {background-color: #95b400;}
.bg-12 {background-color:#f5f5f5;}
.bg-13 {background-color: #0c5e98;}
.bg-white {background-color: #fff;}

.color-1, .color-1 a, a.color-1 {color: #18222b!important;}
.color-1 a:hover, a.color-1:hover {color: #646f79!important;}

.color-2, .color-2 a, a.color-2 {color: #cfdae6!important;}
.color-2 a:hover, a.color-2:hover {color: #fff!important;}

.color-3, .color-3 a, a.color-3 {color: #a8a8a8!important;}
.color-3 a:hover, a.color-3:hover {color: #35a8e0!important;}

.color-4, .color-4 a, a.color-4 {color: #848484!important;}
.color-4 a:hover, a.color-4:hover {color: #333!important;}

.color-5, .color-5 a, a.color-5 {color: #646f79!important;}
.color-5 a:hover, a.color-5:hover {color: #18222b!important;}

.color-6, .color-6 a, a.color-6 {color: #4bab52!important;}
.color-6 a:hover, a.color-6:hover {color: #333!important;}

.color-7, .color-7 a, a.color-7 {color: #aab5c0!important;}
.color-7 a:hover, a.color-7:hover {color: #8393a4!important;}

.color-white, .color-white a, a.color-white {color: #fff!important;}
.color-white a:hover, a.color-white:hover {color: #fff!important;}

.color-1.selected { color: #fff !important;}

/*-> button styles*/
.btn-ghost  {width: 100%;height:100%;left: 0;top: 0;}
.btn-arrow i {position: relative;padding-right:24px;}
.btn-arrow i:after {content: '';width:16px;height:16px;background-image: url('art/a3.png');display: block;background-size: 100%;background-repeat: no-repeat;position: absolute;right:0;top:50%;transform: translateY(-50%);background-position: center;transition: all ease-out .4s;}
.btn-arrow:hover i:after {right:-5px;transition: all ease-out .1s;}
.btn { border-radius: 0; padding:10px 15px; font-size: 18px;}
.btn.nav-link {padding:.33rem .5rem;}
/* .btn-primary {top: 0;color: #ddeaf5;background-color: #18222b;border-color: transparent;box-shadow:  none;} */
.btn-primary:hover {top: 0;color: #fff;background-color: #5F5B5A;border-color: transparent;box-shadow:  none;}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
    border-color: transparent;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #233341;
    border-color: transparent;
}
.btn-secondary {
    color: #646f79;
    border-color: #dde2e3;
    background-color: #f0fbff;
    box-shadow: none;
}
.btn-secondary:hover {
    color: #454f59;
    border-color: #dde2e3;
    background-color: #f0fbff;
    box-shadow: none;
}
.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(38,143,255,0);
    background-color: #f0fbff;
}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
    color: #454f59;
    background-color: #f0fbff;
}
.btn-outline-primary { font-weight: 100 !important;}
#fabricsModal .btn-outline-primary { padding: 7px 14px;}
.btn-outline-light:hover {background-color: #35a8e0;color:#fff;border-color: #35a8e0;}
.btn-outline-danger {border:1px solid #c21010;}
.btn-success {
    color: #fff;
    background-color: #2A9A11;
    border-color: #2A9A11;
    box-shadow:  none;
}
.btn-success:hover {
    color: #fff;
    background-color: #54d2a6;
    border-color: #54d2a6;
    box-shadow:  none;
}
.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-success.dropdown-toggle:focus {
    box-shadow: none;
    border-color: transparent;
}
.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle {
  box-shadow: none;
  border-color: transparent;
}
.btn.focus, .btn:focus {box-shadow: none;}
.btn-link {color: #cd6133;text-decoration: underline;}
/*font-weight + sizes*/
.font-weight-200, .font-weight-200 > * {font-weight: 200!important;}
.font-weight-300, .font-weight-300 > * {font-weight: 300!important;}
.font-weight-400, .font-weight-400 > * {font-weight: 400!important;}
.font-weight-500, .font-weight-500 > * {font-weight: 500!important;}
.font-weight-600, .font-weight-600 > * {font-weight: 600!important;}
.font-weight-700, .font-weight-700 > * {font-weight: 700!important;}
.font-weight-800, .font-weight-800 > * {font-weight: 800!important;}
.xs-font,.xs-font h1,.xs-font h2,.xs-font h3,.xs-font h4,.xs-font h5,.xs-font p{font-size:12px!important;line-height: 125%!important;}
.s-font,.s-font h1,.s-font h2,.s-font h3,.s-font h4,.s-font h5,.s-font p{font-size:16px!important;line-height: 150%!important;}
.m-font,.m-font h1,.m-font h2,.m-font h3,.m-font h4,.m-font h5,.m-font p{font-size:20px!important;line-height: 139%!important;}
.l-font,.l-font h1,.l-font h2,.l-font h3,.l-font h4,.l-font h5,.l-font p{font-size:24px!important;line-height: 119%!important;}
.xl-font,.xl-font h1,.xl-font h2,.xl-font h3,.xl-font h4,.xl-font h5,.xl-font p{font-size:30px!important;line-height: 119%!important;}
.xxl-font,.xxl-font h1,.xxl-font h2,.xxl-font h3,.xxl-font h4,.xxl-font h5,.xxl-font p{font-size:51px!important;line-height: 110%;}
.xxxl-font,.xxxl-font h1,.xxxl-font h2,.xxxl-font h3,.xxxl-font h4,.xxxl-font h5,.xxxl-font p{font-size:60px!important;line-height: 100%;}
/*UX - animations*/
[class^="hover-scale"] {transition: all ease-in .5s;transform: scale(1,1);display: block;opacity: 1;}
.hover-scale:hover {transition: all ease-out .2s;transform: scale(1.1,1.1);opacity: .7;}
.hover-scale-negative:hover {transition: all ease-out .1s;transform: scale(.9,.9);opacity: .7;}
/*UI*/
.b-rad-1 {border-radius: .25rem;}
.b-rad-2 {border-radius: 10px;}
.b-rad-3 {border-radius: 18px;}
.opacity-1 {opacity: .1;}
.opacity-2 {opacity: .2;}
.opacity-5 {opacity: .5;}
.opacity-8 {opacity: .8;}
.menu ul,.menu-list ul{margin:0;padding:0}
.menu li{display:inline-block;padding-left:5px;padding-right:5px;list-style:none;}
.menu li:first-child {padding-left: 0;}
.menu-list li{list-style:none;margin:.25rem 0}
.menu-list.square li{list-style:inside square}
.img-fluid img{width:100%}
.socicons li{width:32px;height:32px;position:relative;transition:all ease-out .2s;transition-delay:.2s}
.socicons a{position:absolute;left:0;top:0;width:100%;height:100%;line-height:32px;font-size:20px}
.arrow{width:80px;height:80px;text-align:center;line-height:80px}
.bg-image{background-repeat:no-repeat}
.bg-cover{background-size:cover}
.bg-center {background-position: center;}
.bg-100{background-size:100%}
.bg-top{background-position:top center}
.bg-fixed{background-attachment:fixed}
.bg-contain{background-size:contain}
.sep-t{border-top:1px solid rgba(0,0,0,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);}
.sep-b{border-bottom:1px solid rgba(0,0,0,.5);}
.sep-t-2{border-top:1px solid #ecebea}
.sep-b-2{border-bottom:1px solid #ecebea}
.sep-t-3{border-top:1px solid #fff}
.sep-b-3{border-bottom:1px solid #fff}
.spacer{display:inline-block;padding-left:10px;padding-right:10px}
.absolute-center,.fixed-center,.vertical-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.fixed-center{position:fixed}
.vertical-center{transform:translate(0,-50%)}
.item-color span { overflow-wrap: break-word; font-size: 13px;}
.filter-shorttext {display: inline-block;white-space: nowrap;text-overflow: ellipsis;cursor: pointer; margin: 3px;}

.popover .arrow { width: auto; height: auto; line-height: normal;}

.screen-kleur-filter h3 { font-size: 18px !important;}
.curtain-preview-box p, .curtain-text p {margin-bottom: 4px;}

.option-group .selectable {min-width: 50px; text-align: center;position: relative;}

.badge-c-3 { background-color: green; z-index: 999999999;margin: -5px;font-weight: 100; font-size: 13px; margin: -5px;}

.curtain-option .selectable { position: relative;}
.option-group .discount-badge {top: -10px !important;right: -10px !important;font-size: 12px;padding: 2px 4px !important;} 
/* .screen-gordijn-more .discount-badge {right: 0px !important;} */

/* rails images 2 column layout */
/* .option-rail1 .selectable {width: 46%;float: left;} */
.elmo.selectable {width: 46%;float: left;} 
.option-ladderband-color .selectable {width: 30%;float: left;}

/* lazy loading background images */
.lazy-bg {  background-size: cover;background-position: center;background-color: #eee;}
.lazy-bg.loaded {  transition: background-image 0.3s ease-in;}

.reset-curtain-type { border: 1px solid lightgray; padding: 8px 15px; display: inline-block; width: auto; border-radius: 0;  transition: all ease-out .3s; }

.discount-badge { z-index: 9;} 
.price-total.sale { color: #d12b2b !important; text-decoration: line-through; font-weight: 400;}
.screen-kleur-filter { z-index: 10;}

.option-price-lines td:nth-of-type(2) { text-align: right; } 

/*shadows*/
.shadow-ext{box-shadow:0 0 15px rgba(0,0,0,.25)}
.shadow-ext-2{box-shadow:-4px 4px 0 rgba(0,0,0,.25)}
.shadow-ext-3{box-shadow:-4px 4px 0 rgba(0,0,0,.33)}
.text-shadow-1{text-shadow: 2px 2px 15px rgba(0,0,0,.5);}

/*placeholders*/
::-webkit-input-placeholder{color:#333;font-size:14px;font-weight:300;}
::-moz-placeholder{color:#333;font-size:14px;font-weight:300;}
:-ms-input-placeholder{color:#333;font-size:14px;font-weight:300;}
:-moz-placeholder{color:#333;font-size:14px;font-weight:300;}

@media (min-width: 992px) {
    .selected-option-summary.col-md-9 { max-width: 67%;}
}
@media (min-width: 767px) {
    .instruction-item img { max-width: 225px; margin: auto; display: block; }
}
@media (max-width: 768px) {
  .l-font,.l-font h1,.l-font h2,.l-font h3,.l-font h4,.l-font h5,.l-font p{font-size:20px!important;line-height: 119%!important;}
  .xl-font,.xl-font h1,.xl-font h2,.xl-font h3,.xl-font h4,.xl-font h5,.xl-font p{font-size:24px!important;line-height: 119%!important;}
  .xxl-font,.xxl-font h1,.xxl-font h2,.xxl-font h3,.xxl-font h4,.xxl-font h5,.xxl-font p{font-size:30px!important;line-height: 110%;}
  .xxxl-font,.xxxl-font h1,.xxxl-font h2,.xxxl-font h3,.xxxl-font h4,.xxxl-font h5,.xxxl-font p{font-size:40px!important;line-height: 100%;}

  .screen-kleur-filter.screen-active {position: absolute;background-color: #fff;}
  .screen-kleur-filter .scrollable-3 { max-height: unset;}
  .fabrics-list {border-top: 1px solid #dee2e6 !important;padding-top: 25px;}
}
@media (max-width: 600px) {
  .screen > .h-100 {padding-top: 0!important;padding-left: 0!important;padding-right: 0!important;padding-bottom: 50px!important;border: none!important;background-color: transparent!important;}
  .screen-gordijn .h-100 {padding-bottom: 0px !important;}
  .instructions-wrapper { max-height: none !important; }
}