.explanation{margin-bottom:0;margin-top:-40px}@media (max-width: 767px){.explanation{font-size:14px !important;letter-spacing:2px !important}}.all-faces{max-height:60vh;margin:auto;margin-bottom:10px}.intro{position:relative;top:-100px}.question{font-size:24px;margin-bottom:10px}@media (max-width: 767px){.question{font-size:18px !important}}.answers{margin-bottom:20px;text-align:left;display:inline-block;max-width:80%}.answers label{display:block;margin-bottom:10px}#quiz .slide{position:absolute;left:0px;top:0px;width:100%;z-index:1;opacity:0;transition:opacity 0.5s}#quiz .active-slide{opacity:1;z-index:2}.quiz-questions{position:absolute;z-index:1;top:85%;left:50%;transform:translateX(-50%) translateY(-50%);width:100%;height:100%}#start{position:relative;display:block;text-align:center;width:100%;z-index:2}#previous{display:none}#next{position:absolute;right:0;bottom:0;z-index:2;display:none}#startagain{position:absolute !important;left:0;bottom:0;display:none}#flip-back{position:absolute;right:0;bottom:0;display:none}#flip-front{position:absolute;right:0;bottom:0;background-color:#bf8931 !important;display:none}#board{width:100%;height:100%;position:relative;overflow:hidden;background-color:#f5f7fa;text-align:center}#board.show-swipe:after{content:"";width:335px;height:335px;position:absolute;z-index:0;top:50%;left:50%;border-radius:1%;box-shadow:0px 4px 4px 0px rgba(0,0,0,0.1);background-color:white;transform:translateX(-50%) translateY(-50%) scale(0.95)}.choose-button{position:absolute;top:-45px;right:15px;font-size:12px}.mdi-check-circle{font-size:12px;color:white;line-height:23px}.mdi-check-circle::before{margin-left:-3px;margin-right:-3px}.card{position:absolute;z-index:1;top:50%;left:50%;border-radius:1%;box-shadow:0px 4px 4px 0px rgba(0,0,0,0.1);background-color:white;transform:translateX(-50%) translateY(-50%) scale(0.95);background-size:cover;width:100%;height:100%;max-width:320px;max-height:320px}.card .front{background-size:cover;background-color:#ffffff}.card .back{background-size:cover;background-color:#ffffff}.swipe-container{position:absolute;z-index:0;height:100%;left:50%;top:0}@media (max-width: 767px){.swipe-container{left:0;width:100%}}.swipe-container .mdi-chevron-left{left:50%;margin-left:-220px;top:50%}@media (max-width: 767px){.swipe-container .mdi-chevron-left{margin-left:0;left:0;top:72px}}.swipe-container .mdi-chevron-left #text-left{text-align:right;margin-left:-150px}@media (max-width: 767px){.swipe-container .mdi-chevron-left #text-left{position:absolute;left:25px;margin-left:0;top:0;min-width:120px;text-align:left}}.swipe-container .mdi-chevron-right{right:50%;margin-right:-220px;top:50%}.swipe-container .mdi-chevron-right::before{transform:scale(1, 1)}@media (max-width: 767px){.swipe-container .mdi-chevron-right{margin-right:0;right:0;bottom:72px;top:auto}}.swipe-container .mdi-chevron-right #text-right{text-align:left;margin-right:-150px}@media (max-width: 767px){.swipe-container .mdi-chevron-right #text-right{position:absolute;right:25px;margin-right:0;bottom:0;min-width:120px;text-align:right}}.swipe-container .mdi-chevron-up{left:50%;margin-left:-10px;top:10px}.swipe-container .mdi-chevron-up::before{margin-top:0}@media (max-width: 767px){.swipe-container .mdi-chevron-up{left:auto;margin-left:0;top:40px;right:0;margin-right:30px}}.swipe-container .mdi-chevron-down{left:50%;margin-left:-10px;bottom:10px}.swipe-container .mdi-chevron-down::before{margin-top:35px}@media (max-width: 767px){.swipe-container .mdi-chevron-down{left:0;margin-left:30px;bottom:40px}}.swipe-container .mdi{font-size:24px;position:absolute;cursor:pointer}.swipe-container .mdi.greyed-out{color:#ddd}.swipe-container #text-up{position:absolute;top:0;margin-left:-20px;margin-top:35px}.swipe-container #text-down{position:absolute;top:0;margin-left:-20px}.swipe-container .instructions{position:absolute;min-width:300px;margin-left:-150px;left:50%}@media (max-width: 767px){.swipe-container .instructions{top:55px}}.shade-number{text-align:left;background:white;border:1px solid grey;border-radius:12px;padding:0 5px;position:absolute;top:-10px;right:-10px}.back .question{font-size:18px;margin-bottom:-3px;font-weight:400;text-transform:uppercase}.back-top-content{padding-top:9px}.back-link{position:absolute;text-align:center;margin:auto;bottom:8px;line-height:12px;width:100%}.back-link .btn{font-size:12.5px;text-transform:uppercase;letter-spacing:3px;background:#0c0c0c;color:#ffffff;padding:3px 5px;text-decoration:none !important;display:inline-block;margin-bottom:2px}.suggested-undertone-container{background:white;border:1px solid grey;border-radius:12px;padding:0 5px;display:inline-block;margin:0 auto;position:absolute;top:auto;width:100%;left:0;bottom:-9px}.warmer{position:absolute}.undertone{position:absolute;bottom:-65px;width:100%}.depth{position:absolute;bottom:-45px;width:100%}#current-depth,#current-undertone{font-weight:bold}#suggested-undertone{font-weight:bold;text-transform:lowercase}