@media screen and (max-width:800px){.viewbox-column{position:sticky;top:12rem;background:#fff;z-index:1;-webkit-transition:top .4s!important;transition:top .4s!important}.nav-up .viewbox-column{top:3rem}}.view-box-container{position:sticky;top:21rem;-webkit-transition:all .4s;transition:all .4s}.nav-up .view-box-container{top:14rem}@media screen and (max-width:800px){.view-box-container{position:static;top:unset}}.view-box-container .view-box{position:relative;width:100%;height:350px;margin:0 auto 5%;max-width:500px;background-image:url(../img/sample-box-frame.png);background-size:contain;background-repeat:no-repeat;background-position:50%;overflow:hidden}.view-box-container .view-box div[id^=tread-]{position:absolute;height:100%;width:100%;-webkit-transform:rotate(21.25deg);transform:rotate(21.25deg);-webkit-clip-path:polygon(30% 11%,65% 30%,54% 48%,19% 27%);clip-path:polygon(30% 11%,65% 30%,54% 48%,19% 27%);background-size:cover;background-repeat:no-repeat;z-index:-1!important}@media screen and (min-width:801px) and (max-width:922px){.view-box-container .view-box div[id^=tread-]{-webkit-clip-path:polygon(29% 15%,67% 32%,56% 50%,16% 27%);clip-path:polygon(29% 15%,67% 32%,56% 50%,16% 27%);-webkit-transform:rotate(20deg);transform:rotate(20deg)}}@media screen and (max-width:422px){.view-box-container .view-box div[id^=tread-]{-webkit-clip-path:polygon(17% 13%,55% 28%,41% 43%,5% 25%);clip-path:polygon(17% 13%,55% 28%,41% 43%,5% 25%);-webkit-transform:rotate(16.5deg);transform:rotate(16.5deg)}}.view-box-container .view-box #tread-1{top:28.3%;left:-5.2%}@media screen and (min-width:801px) and (max-width:922px){.view-box-container .view-box #tread-1{left:-3%;top:26%}}@media screen and (max-width:422px){.view-box-container .view-box #tread-1{top:30.6%;left:7.25%}}.view-box-container .view-box #tread-2{top:17%;left:10.5%}@media screen and (max-width:422px){.view-box-container .view-box #tread-2{top:23.25%;left:22%}}.view-box-container .view-box #tread-3{top:5%;left:24.25%}@media screen and (max-width:422px){.view-box-container .view-box #tread-3{top:14%;left:36.5%}}.view-box-container .selected-treads-container{margin:2rem 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media screen and (max-width:800px){.view-box-container .selected-treads-container{margin-top:-2rem}}.view-box-container .selected-treads-container [class^=selected-tread-]{font-size:1.25rem;width:33%;min-height:6rem}.view-box-container .selected-treads-container [class^=selected-tread-] h4.tread-details-header{text-align:center;width:100%;background-color:#808285;color:#fff;font-weight:500;margin:0;padding:.5rem}.view-box-container .selected-treads-container [class^=selected-tread-] .tread-details{-webkit-box-shadow:inset 0 50px 25px -50px rgba(0,0,0,.39);box-shadow:inset 0 50px 25px -50px rgba(0,0,0,.39);width:100%;background-color:#f2f2f2;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.view-box-container .selected-treads-container [class^=selected-tread-] .tread-details ul{margin:0;padding:5% 15%}@media screen and (max-width:422px){.view-box-container .selected-treads-container [class^=selected-tread-] .tread-details ul{padding:10% 20%}}.error-message{margin:0;opacity:0}.control-box-container .control-box-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.control-box-container .control-box-header .control-box-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.control-box-container .control-box-header .control-box-title h2{font-weight:700;margin:0}.control-box-container .control-box-header .control-box-title h2.product-title{color:#000}.control-box-container .material-section .material-section-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin:2rem 0}.control-box-container .material-section .material-section-header h4{color:#000;font-weight:600;line-height:2rem;margin:0}.control-box-container .material-section .finish-options-container{display:grid;grid-template-columns:repeat(auto-fit,54px);row-gap:4px}.control-box-container .material-section .finish-options-container .finish-option{width:50px;height:50px}input[type=checkbox]{display:none}input[type=checkbox]+label{height:5rem;width:5rem;display:-webkit-box;display:-ms-flexbox;display:flex;background-size:cover;background-repeat:no-repeat}input[type=checkbox]+label:hover{cursor:pointer}input[type=checkbox]:checked+label{display:-webkit-box;display:-ms-flexbox;display:flex}input[type=checkbox]:checked+label:after{height:100%;width:100%;font-size:3rem;content:"\f00c";font-family:Font Awesome\ 5 Pro,FontAwesome;color:#fff;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;-webkit-backdrop-filter:brightness(70%);backdrop-filter:brightness(70%);-webkit-animation:fadeIn .5s ease-in 0s 1 forwards;animation:fadeIn .5s ease-in 0s 1 forwards}
/*# sourceMappingURL=wood-sample-box.css.map */