section.interactive_clock{background-color:#522d27}section.interactive_clock .interactive_clock_container{max-width:560px;width:100%}.interactive_clock .helpers{width:100%}.interactive_clock .icons{display:flex;gap:15px;justify-content:center}.interactive_clock .icons>div{cursor:pointer}.interactive_clock .icons.vmar{margin-bottom:20px}.interactive_clock .dialog{display:grid;grid-template-columns:22px 1fr 22px;align-content:center;justify-content:center;position:relative;background:#fbf7ed;padding:20px 0;border-radius:5px;min-height:118px;margin:0 auto}.interactive_clock .dialog .close{position:absolute;top:7px;right:7px;height:15px}.interactive_clock .dialog .prev,.interactive_clock .dialog .next{width:22px}.interactive_clock .dialog .next{transform:rotate(180deg)}.interactive_clock .dialog .text{margin:0 auto;text-align:center;grid-column:2}.interactive_clock .dialog .text p{margin:0}section.interactive_clock{width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.interactive_clock .title{text-align:center;font-family:Austin News Deck Roman;font-size:36px;font-style:normal;font-weight:400;line-height:93%;margin-bottom:20px}.interactive_clock .sub_title{font-family:Messina Sans;font-size:16px;font-style:normal;font-weight:400;line-height:140%;max-width:520px;text-align:center;margin:0 auto 18px}.interactive-clock-display{width:100%;max-width:560px}.interactive_clock .clock_top{position:relative;width:100%;aspect-ratio:2;margin:0 auto;height:fit-content}.interactive_clock button:disabled{opacity:.3}.interactive_clock button#snooze{position:absolute;top:39.5%;left:16.6%;width:39%;height:21%;z-index:1;border-radius:35px}.interactive_clock button#next,.interactive_clock button#previous,.interactive_clock button#select{position:absolute;top:44%;width:6.4%;height:11%;z-index:1;overflow:visible}.interactive_clock button.highlight{box-shadow:0 0 9px 7px #fff}.interactive_clock button.highlight#previous{box-shadow:-2px 0 6px 4px #fff;border-top-left-radius:50%;border-bottom-left-radius:50%;clip-path:inset(-5px 2px -6px -6px)}.interactive_clock button.highlight#next{box-shadow:2px 0 6px 4px #fff;border-top-right-radius:50%;border-bottom-right-radius:50%;clip-path:inset(-5px -10px -6px 2px)}.interactive_clock button#select .clickable,.interactive_clock button#snooze .clickable,.interactive_clock button#next .clickable,.interactive_clock button#previous .clickable{position:relative;width:110%;height:140%;top:-20%}.interactive_clock button#snooze .clickable{left:-5%}.interactive_clock button#next .clickable{left:20%}.interactive_clock button#previous .clickable{right:15%}.interactive_clock button#select .clickable{width:150%;height:150%;left:-25%;top:-25%}.interactive_clock button#select{border-radius:50px}.interactive_clock button#next{left:64.8%}.interactive_clock button#previous{left:59.7%}.interactive_clock button#select{left:75.5%;border-radius:50px;width:5.7%}.clock_face img,.clock_top img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}.interactive_clock .menuItem svg{height:clamp(29px,8vw,45px);width:100%}.interactive_clock .clock_face{position:relative;width:100%;aspect-ratio:2;margin:0 auto;height:fit-content}.interactive_clock .layered_div{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;left:26%;top:22%;width:31%;height:50%;container-type:size;overflow:hidden}.interactive_clock .layered_div.blackout{opacity:0}.interactive_clock .current_time{font-size:clamp(14px,9.5vw,63px);line-height:clamp(14px,9.5vw,63px);font-family:Messina Sans;position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start}.interactive_clock .current_time .time{position:absolute;top:22%}.interactive_clock .current_time .time .ampm{position:absolute;top:15%;right:-16%;font-size:clamp(6px,1vw,10px);line-height:clamp(6px,1vw,10px)}.interactive_clock .current_time .alarm{position:absolute;bottom:0;left:0;font-size:clamp(11px,4vw,20px);line-height:clamp(11px,4vw,20px);opacity:.5}.interactive_clock .current_time.hour .set,.interactive_clock .current_time.hour .set:not(.hour),.interactive_clock .current_time.minutes10 .set:not(.minutes10),.interactive_clock .current_time.minutes1 .set:not(.minutes1){opacity:.3}.interactive_clock .current_time.hour .hour,.interactive_clock .current_time.minutes10 .minutes10,.interactive_clock .current_time.minutes1 .minutes1{opacity:1}.interactive_clock .alarm-wrapper{display:flex;gap:5px;align-items:center}.interactive_clock .explainer{font-size:1.4ch}.interactive_clock .menuItems{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;width:150%;height:100%;gap:5px;margin:0 auto;overflow-x:hidden;transform:translate(-15%)}.interactive_clock .menuItems.vertical{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:6%;height:75%;font-size:1.4rem;overflow:hidden;width:100%;transform:translate(0)}.interactive_clock .menuItems.vertical .menuItem{height:30%;flex-shrink:0;white-space:nowrap;font-size:clamp(1rem,2.5vw,1.5rem);width:100%;align-items:flex-start;margin:0}.interactive_clock .menuItem{display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:.5;width:25%;font-size:clamp(.7rem,2.5vw,1rem)}.interactive_clock .menuItem.active{opacity:1}.interactive_clock .menuItem.previous,.interactive_clock .menuItem.next{opacity:.4}.interactive_clock .menuItem .checkbox{display:inline-block;width:20px;height:20px;margin-right:10px;border:0}.interactive_clock .alarm .checkbox{display:none}.interactive_clock .menu_title{font-size:13px;font-family:Messina Sans;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#interactive-clock-audio-player{display:none}.audio_title{font-size:12px;display:flex;font-size:clamp(11px,3vw,18px);line-height:clamp(11px,3vw,18px);flex-direction:column;align-self:flex-start;justify-self:flex-start;position:absolute;top:0;opacity:.5}@media screen and (min-width: 1023px){section.interactive_clock .interactive_clock_container{display:grid;grid-template-columns:1fr 560px 1fr;max-width:1090px;margin:0 auto;max-width:100%}.interactive_clock .title,.interactive_clock .sub_title,.interactive_clock .helpers{grid-column:1 / -1}.interactive_clock .helpers{display:contents}.interactive_clock .icons.vmar{margin-bottom:0}.interactive_clock .dialog{grid-row:4;max-width:250px;justify-self:end;width:32vw;height:min-content;align-self:center}.interactive_clock .dialog.right{grid-column:3;justify-self:start}.interactive_clock .dialog .prev,.interactive_clock .dialog .next{display:none}.interactive-clock-display{display:contents}.interactive_clock .clock_top,.interactive_clock .clock_face,.interactive_clock .icons{grid-column:2}}
/*# sourceMappingURL=/cdn/shop/t/237/assets/interactive-clock.css.map */