:root{--section-background-color: rgb(230, 230, 230);--section-text-color: #808080;--btn-background-color: rgb(241, 90, 36);--btn-text-color:#FFF;--color-success:#2acd70}*{margin:0;border:0px;padding:0;box-sizing:border-box;list-style:none;text-decoration:none}body{font-family:Roboto,sans-serif;font-size:1rem;color:var(--section-text-color)}.section_tile{width:100%;display:flex;justify-content:center;background-color:var(--section-background-color)}.container{width:85%;display:flex;max-width:unset}.sec1,.sec2{display:flex;flex-direction:column;align-items:flex-start;background-color:inherit;flex:50%;padding:15px 20px;align-self:flex-start;position:sticky;top:110px}.sec1 h2,.sec2 h2{text-transform:uppercase}.sec1>*,.sec2>*{margin:15px 10px}.btn{border:none;padding:15px 40px;border-radius:4px;color:var(--btn-text-color);font-size:1.1rem;background-color:var(--btn-background-color)}.tile-container{align-self:stretch;display:flex;flex-wrap:wrap;margin:15px 0;border-radius:10px;overflow:hidden;clip-path:inset(2px)}.tile-cell{flex-basis:20%;display:flex;justify-content:center;align-items:stretch}.tile-cell:before{content:"";display:table;padding-top:100%}.tile{flex-grow:1;margin:2px;display:flex;justify-content:center;align-items:center;overflow:hidden;background-size:100%;position:relative;border-radius:2px;background-size:cover!important}.selector-heading{margin-bottom:10px}.selector-heading .selector-number{display:inline-block;width:35px;height:35px;line-height:35px;text-align:center;font-size:1.2rem;font-weight:500;border-radius:50%;background-color:var(--btn-background-color);color:var(--btn-text-color)}.selector-heading h4{display:inline-block;padding:0 5px;font-weight:500;text-transform:uppercase}.tile-brand{align-self:stretch}.brand-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(19.5%,1fr));grid-gap:.2rem;justify-content:space-between;border-radius:10px}.brand-container .brand-select{flex-grow:1;position:relative;flex-basis:18%;display:flex;justify-content:center;align-items:stretch;height:120px}.brand-container .brand-image{width:100%;height:120px}.brand-container .brand-title{color:var(--section-text-color);position:absolute;padding:10px;width:100%;bottom:0;line-height:1;text-align:center;left:50%;font-size:.8rem;transform:translate(-50%)}.brand-active,.grout-color-active,.tile-color-active{display:inline-block;width:12px;height:12px;line-height:12px;text-align:center;font-size:.4rem;border-radius:50%;background-color:var(--color-success);color:var(--btn-text-color);position:absolute}.brand-active{top:8px;right:4px}.tile-color-active{top:2px;right:2px}.grout-color-active{top:50%;transform:translateY(-50%);right:5px}.tile-color-palette,.grout-color-palette{align-self:stretch}.tile-color-palette .tile-color-selector,.grout-color-palette .grout-color-selector{background-color:#fff;border-radius:5px;padding:15px;margin:0}.tile-color-box{width:25px;height:25px;display:inline-block;overflow:hidden;background-size:100%;cursor:pointer;position:relative;border-radius:2px;background-size:cover!important}.grout-color-selector{display:grid;grid-template-columns:repeat(auto-fill,32%);grid-gap:1.5rem .2rem;justify-content:space-between;padding-bottom:30px!important}.grout-color-selector .grout-color-box{cursor:pointer;margin-bottom:10px;text-align:center;padding:15px;font-size:.9rem;color:var(--btn-text-color);border:1px solid rgba(0,0,0,.1);position:relative}.grout-color-selector .grout-color-box .grout_name{position:absolute;left:50%;transform:translate(-50%);bottom:-25px;color:#444;width:100%;text-align:center;height:20px;display:inline-block;font-size:.9rem;line-height:.9rem}.grout_text{font-size:1.2rem;text-transform:uppercase}.desktop-heading{display:block}.mobile-heading{display:none}@media only screen and (max-width: 1024px){.container{width:100%;flex-direction:column-reverse!important}.sec1,.sec2{padding:10px;flex:100%;width:100%}.sec1,.sec2{position:static}.desktop-heading{display:none}.mobile-heading{display:block}.brand-container .brand-image{height:70px}.brand-container .brand-select{height:95px;padding-bottom:30px;background-color:#fff}}@media only screen and (max-width: 500px){.grout-color-selector .grout-color-box .grout_name{font-size:.8rem}.grout-color-selector{grid-gap:2.5rem .2rem;padding-bottom:45px!important}.brand-container .brand-image{padding:8px 0}.brand-container{grid-gap:.4rem .2rem}.brand-container .brand-title{padding:6px 0;font-size:.7rem}}
/*# sourceMappingURL=/cdn/shop/t/22/assets/grout_selector.css.map */