:root{--eighthRadius:15%/7%}*{margin:0;padding:0;box-sizing:border-box}#container{width:70%;margin:32px auto}#container>div{margin-top:32px;position:relative}img,video{width:100%;display:block}video{height:0}.can-view{cursor:zoom-in}.phone{width:40%;height:0;left:50%;bottom:7%;margin-left:-20%;position:absolute;overflow:hidden;border-radius:var(--eighthRadius);background-color:#439399;box-shadow:18px 24px 50px rgb(67 147 153 / 24%)}.phone img{width:100%;position:relative;z-index:1}.phone video{width:96%;height:100%;top:.25%;left:50%;margin-left:-48%;border-radius:var(--eighthRadius);position:absolute}#viewer{width:100%;height:100vh;position:fixed;top:0;left:0;background-color:rgba(0,0,0,.9);display:none;justify-content:center;align-items:center;overflow:auto;z-index:99}@keyframes fade-in{from{opacity:0}to{opacity:1}}#viewer .viewing{width:100%;max-width:90vw;margin:0 auto;animation:fade-in 1s}#viewer.checking .viewing{max-width:100vw}#viewer .viewing{cursor:zoom-in}#viewer.checking .viewing{width:auto;cursor:zoom-out}#viewer #close{width:3vw;height:3vw;padding:1vw;top:4%;right:2.5%;display:flex;justify-content:center;align-items:center;background-color:rgba(66,66,66,.8);border-radius:50%;position:fixed;z-index:99;cursor:pointer;transition:background-color .3s}#viewer #next,#viewer #previous{width:4vw;height:4vw;padding:1.25vw;top:50%;right:2.5%;margin-top:-2vw;display:flex;justify-content:center;align-items:center;background-color:rgba(66,66,66,.8);border-radius:50%;position:fixed;z-index:99;cursor:pointer;transition:background-color .3s}#viewer #previous{left:2.5%}#viewer[data-index="0"] #previous,#viewer[data-index="35"] #next{display:none}#viewer #close:hover,#viewer #next:hover,#viewer #previous:hover{background-color:rgba(144,144,144,.8)}#viewer.checking #close,#viewer.checking #next,#viewer.checking #previous{display:none}.loading:before{content:"";background-color:rgba(0,0,0,.4);width:100%;height:100%;top:0;left:0;position:absolute;z-index:90}.loading .lds-ripple{display:inline-block}.lds-ripple{width:5rem;height:5rem;top:50%;left:50%;margin-top:-2.5rem;margin-left:-2.5rem;position:absolute;z-index:91;display:none}.lds-ripple div{position:absolute;border:4px solid #fff;opacity:1;border-radius:50%;animation:lds-ripple 1s cubic-bezier(0,.2,.8,1) infinite}.lds-ripple div:nth-child(2){animation-delay:-.5s}@keyframes lds-ripple{0%{top:50%;left:50%;width:0;height:0;opacity:0}4.9%{top:50%;left:50%;width:0;height:0;opacity:0}5%{top:50%;left:50%;width:0;height:0;opacity:1}100%{top:0;left:0;width:100%;height:100%;opacity:0}}