.Qr-titled { background-color: rgba(0,0,0,0.06); box-sizing: border-box; border-top: rgba(0,0,0,0.06) solid 3px; border-bottom: rgba(0,0,0,0.06) solid 3px; padding-top: calc((10px + 2vmin) * 2); padding-bottom: calc((10px + 2vmin) * 2); } .Qr-titled-nobg { padding-top: calc((10px + 2vmin) * 2); padding-bottom: calc((10px + 2vmin) * 2); } .Qr-title { margin-top: 3em; } .Qr-subtitle { margin-top: -1em; margin-bottom: 0; } .Qr-s-subtitle { margin-top: 0.25em; margin-bottom: 0; } .Qr-s { overflow-x: scroll; overflow-y: hidden; overflow-scrolling: touch; width: 100vw; white-space: nowrap; display: flex; } .Qr-s::-webkit-scrollbar { display: none; } .Qr-s-title { font-size: 1.4em; } .title-margin { margin-bottom: 20px; } .Qr-box { white-space: nowrap; display: flex; padding: 0px 13px 0px 23px; } @media (min-width: 1000px) { .Qr-box { padding-left: calc((100vw - 1000px) / 2 + 23px); } } .Qr-item { user-select: none; float: left; display:block!important; margin-right: 10px; } .Qr-item-image { padding: 23px; background-color: white; width: calc((100vw - 56px) / 2); height: calc((100vw - 56px) / 2); border-radius: 10px; box-sizing: border-box; border: rgba(0,0,0,0.12) solid 3px; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 0.2s; /* Safari */ transition-duration: 0.2s; } .Qr-item-image-inner { opacity: 0.36; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 0.2s; /* Safari */ transition-duration: 0.2s; -webkit-transform: translateZ(0); } @media (min-width: 500px) { .Qr-item-image { width: 200px; height: 200px; } } .Qr-item:hover .Qr-item-image { border-color: #44D7B6; } .Qr-item:hover .Qr-item-image-inner { opacity: 1; } .Qr-item:hover .Qr-item-detail { color: #000000; } .Qr-item-detail { color: rgba(0,0,0,0.3); margin-top: 5px; font-size: 1em; text-align: left; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 0.2s; /* Safari */ transition-duration: 0.2s; } tr { width: 100%; display: inline-flex; justify-content: space-between ; } td:nth-child(1) { font-size: 1em; white-space: nowrap; } td:nth-child(2) { white-space: nowrap; font-size: 1em; } td { padding-bottom: 10px; } .big-input { font-size: calc(10px + 2vmin); margin-top: calc((10px + 2vmin) * 2); margin-bottom: calc((10px + 2vmin) * 2); border: rgba(0,0,0,0.12) solid 3px; width: 20em; } .small-input { font-size: 0.8em; border: rgba(0,0,0,0.12) solid 2px; } .Qr-input { caret-color: #44d7b6; padding: 0; line-height: 2em; box-sizing: border-box; border-radius: 3em; outline: none; text-indent: 1em; max-width: calc(100vw - 46px); overflow: visible; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 0.2s; /* Safari */ transition-duration: 0.2s; -webkit-appearance: none; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: 'Futura', sans-serif; color: rgba(0,0,0,0.6); } .Qr-input::placeholder { font-family: 'Futura', sans-serif; color: rgba(0,0,0,0.18); } .Qr-Centered { padding-left: 23px; padding-right: 23px; max-width: 954px; text-align: -webkit-left; } .Qr-input:focus { border-color: #44D7B6; color: #000000; } .Qr-table { width: 100%; border-spacing: 0; margin-top: 23px; } .Qr-div-table { max-width: 600px; }