body{background-image:url('../imgs/bg.png');background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;overflow-x:hidden;font-size:17px;}

h1{font-size:4em;font-weight:900;}
#main-wrapper{overflow:hidden;}
button:focus{outline:none;}

body.theme-dark .sticky-header,body.theme-dark .content{color:var(--theme-ui-colors-white);}
body.theme-dark{color:var(--theme-ui-colors-black);}

.shoutout{position:relative;z-index:10000000;}
.swiper-slide-active .shoutout.icon{}
.swiper-slide-active .shoutout.icon-play:before,.swiper-slide-active .shoutout.icon-pause:before{padding:0.55em;width:36px;height:36px;margin:-1em auto 0.8em auto;display:block;border-radius:50px;color:#fff;background:#003866;}
.swiper-slide-active .shoutout.icon:before{width:40px;height:40px;display:block;background-position:center;background-size:40%;background-repeat:no-repeat;transition:all 0.3s ease-out;position:relative;z-index:10000000;}
.swiper-slide-active .shoutout:hover.icon:before{transform:scale(1.5);}
.swiper-slide-active .shoutout.icon-play:before{transform:scale(1.2);content:'';background-image:url('../imgs/icon-play-white.svg');background-color:#e90044;}
.swiper-slide-active .shoutout.icon-pause:before{content:'';background-image:url('../imgs/icon-pause-white.svg');}

.shoutout.icon-pause .ingredient span{}

.my-carousel{position:relative;}
.my-carousel__swiper{padding-bottom:10em;}
.my-carousel__actions{padding:0 15%;position:absolute;bottom:0;left:0;z-index:1000000;width:100%;display:flex;justify-content:center;align-items:center;gap:0;}
.my-carousel__control{width:100%;height:100%;display:flex;position:relative;animation:tilt-shaking 0.5s infinite;align-items:center;}
.my-carousel__control:after{width:100%;height:100px;content:'';position:absolute;display:block;background-position:center;background-size:100% auto;background-repeat:no-repeat;background-image:url('../imgs/chopsticks.svg');}
.my-carousel__control:hover{animation:none;}
.my-carousel__control:hover{cursor:pointer;}
.my-carousel__control span{font-size:1.4em;font-weight:600;opacity:0;position:absolute;top:auto;transition:0.3s ease-out;z-index:100;margin-top:-2em;}
.my-carousel__control:hover span{opacity:1;}
.my-carousel__control--prev{text-align:left;}
.my-carousel__control--prev span{left:0;}
.my-carousel__control--prev:after{-webkit-transform:scaleX(-1);transform:scaleX(-1);rotate:10deg;}
.my-carousel__control--prev:hover:after{rotate:-6deg;}
.my-carousel__control--next span{right:0;}
.my-carousel__control--next:after{rotate:-10deg;}
.my-carousel__control--next:hover:after{rotate:6deg;}

#CNYgoodies .my-carousel__actions{top:0;}
#CNYgoodies .my-carousel__actions a{color:var(--theme-ui-colors-white);z-index:1000000;width:100%;height:100%;display:flex;position:absolute;align-items:center;}
#CNYgoodies .my-carousel__actions:before,#CNYgoodies .my-carousel__actions:after{font-size:3em;font-weight:900;position:absolute;}
#CNYgoodies .my-carousel__actions:before{content:'听一听';margin-top:-1.2em;}
#CNYgoodies .my-carousel__actions:after{content:'一起来捞生';margin-top:1.2em;}

@media (min-width:769px) and (orientation:portrait){
.my-carousel__control span{display:block;width:100%;}
}

.slide-shy{opacity:0}
.swiper-card{display:flex;align-items:center;justify-content:center;cursor:drag;}
.swiper-card a{cursor:pointer;}
.swiper-card > div{padding:0 0 1em 0;justify-content:center;align-items:center;font-weight:bold;aspect-ratio000:3/3;}
.swiper-card--1 > div{background-color:var(--color-primary-lighter);}
.swiper-card--2 > div{background-color:var(--color-primary-light);}
.swiper-card--3 > div{background-color:var(--color-primary);}
.swiper-card--4 > div{background-color:var(--color-primary-dark);}
.swiper-card--5 > div{background-color:var(--color-primary-darker);}
.swiper-card--6 > div{background-color:var(--color-accent-lighter);}
.swiper-card--7 > div{background-color:var(--color-accent-light);}
.swiper-card--8 > div{background-color:var(--color-accent);}
.swiper-card--9 > div{background-color:var(--color-accent-dark);}
.swiper-card--10 > div{background-color:var(--color-accent-darker);}

.swiper{padding-top:0!important;}
.swiper-slide .swiper-card{height:auto!important;margin:0!important;background-color:rgba(254,253,241,0)!important;overflow:visible!important;overflow:hidden;}
.swiper-slide-active .swiper-card{background-color:rgba(254,253,241,0.6)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;}
.swiper-slide .swiper-card:after{background:transparent;!important;}
.swiper-slide .swiper-card img{width:100%;}
.swiper-creative .swiper-slide{overflow:visible!important;}
.swiper-slide-active .swiper-card{opacity:1;border:4px solid #e90044;}

.swiper-card .title{display:none;}
.swiper-slide-active .title{display:block;}
.swiper-card .title em{font-size:1em;font-weight:700;}
.swiper-card .title .en{font-size:0.55em;font-weight:400;color:#888;}
.swiper-card .title em,.swiper-card .title .en{display:block;}

.swiper-card .ingredient{width:70%;margin:auto;}
.swiper-card .ingredient span{font-size:1em;font-weight:400;}


.swiper-slide.media .mediabox{display:none;}
.swiper-slide-active.media .mediabox{display:block;}
.swiper-slide.media .ingredient{display:block;}
.swiper-slide-active.media .ingredient{display:none;}
.media .swiper-card > div{padding:0;}
.mediabox{position:relative;overflow:hidden;border-radius:1.6em;}
.mediabox video{width:70%;height:calc(70%/(16/9));display:block;margin:auto;position:relative;z-index:10000;}

@media (min-width:200px) and (max-width:768px) and (orientation:portrait){
body{background-size:auto 200%;}
h1{font-size:3em;}
.my-carousel__swiper{width:66%;padding-bottom:10em;}
.my-carousel__actions{gap:0;bottom:0;padding:0;}
.my-carousel__control{height:180px;animation:none;}
.my-carousel__control span{margin:0;padding:0.2em 0.4em;background:rgba(255,255,255,0.8);animation:none;position:fixed;}
.my-carousel__control--prev:after,.my-carousel__control--next:after{width:200%;top:24em;}
.my-carousel__control--prev:after{rotate:-60deg;left:-10em;}
.my-carousel__control--next:after{rotate:60deg;right:-10em;}
.my-carousel__control--prev:hover:after{rotate:-40deg;}
.my-carousel__control--next:hover:after{rotate:40deg;}
#CNYgoodies .my-carousel__actions:before,#CNYgoodies .my-carousel__actions:after{font-size:2.4em;}
#CNYgoodies .my-carousel__actions:before{top:4em;}
#CNYgoodies .my-carousel__actions:after{top:2.8em;}
#CNYgoodies .my-carousel__control{height:100%;animation:tilt-shaking 0.5s infinite;}
#CNYgoodies .my-carousel__control span{opacity:0;width:100%;padding:0;background:none;display:flex;justify-content:center;text-align:center;}
#CNYgoodies .my-carousel__actions:before, #CNYgoodies .my-carousel__actions:after{font-size:2.4em;}
.swiper-slide .swiper-card{border-radius:1em;min-height:360px;}
.swiper-slide-active .shoutout.icon{position:fixed;top:0;width:100%;left:0;}
.swiper-slide-active .title{padding:0 1em;}
.swiper-card .ingredient{width:100%;padding:0 0 1em 0;}
.swiper-card .ingredient img{margin-bottom:1em;}
.mediabox{border-radius:0.7em;}
.mediabox video{width:100%;height:calc(100%/(16/9));}
}


#theme-logo{width:300px;height:300px;display:block;margin:-4% auto 0 auto;background-image:url(../imgs/lianhe-zaobao-chinese-new-year-2025-logo-tab.svg);background-size:100% auto;background-repeat:no-repeat;background-position:center;}
#snake{width:184px;height:250px;left:54%;top:14%;display:block;position:absolute;background-image:url(../imgs/snake-fortune.svg);background-size:100% auto;background-repeat:no-repeat;background-position:center;animation: tilt-n-move-shaking 1s infinite;}

.ingot,.lantern{top:0;width:100%;position:absolute;display:flex;}
.ingot div,.lantern div{position:absolute;display:block;animation-timing-function:ease-in-out;-webkit-transform-origin:top;-moz-transform-origin:top;transform-origin:top;background-size:100% auto;background-repeat:no-repeat;background-position:0 0;}

.ingot{width:20%;top:70%;left:40%;justify-items:center;align-items:center;}
.ingot .golden-ingot{background-image:url(../imgs/golden-ingot.svg);}
.ingot .golden-ingot:nth-child(1){left:8%;top:1em;width:44px;height:36px;animation:tilt-shaking 0.3s infinite;rotate:40deg;}
.ingot .golden-ingot:nth-child(2){left:40%;top:0.5em;width:50px;height:41px;animation:tilt-shaking 0.5s infinite;}

.lantern-round{background-image:url(../imgs/lantern-round-outline.svg);}
.lantern-round.align-left{top:-1em;left:26%;width:82px;height:200px;animation:sway1 20s infinite;z-index:100000;}
.lantern-round.align-right{top:-4em;left:80%;width:154px;height:400px;animation:sway2 6.4s infinite;}

.lantern-portrait{background-image:url(../imgs/lantern-portrait-outline.svg);}
.lantern-portrait.align-left{top:-5em;left:10%;width:88px;height:400px;animation:sway2 10s infinite;transform:rotateY(180deg);}
.lantern-portrait.align-right{top:-3em;left:74%;width:55px;height:250px;animation:sway1 16.4s infinite;z-index:100000;}

#lohei{width:100%;margin:2em auto;text-align:center;position:relative;}
#lohei h4{font-weight:700;margin-bottom:1em;}

.label-menu{width:100%;display:flex;margin:0 auto!important;z-index:1000000;justify-content:center;align-items:center;position:relative;}
.label-menu a,.label-menu button{padding:0;display:flex;font-weight:700;color:var(--theme-ui-colors-black);line-height:1.2;align-items:center;justify-content:center;}
.label-menu img{width:100%;border-radius:50%;overflow:hidden;}
.label-menu .label-item{display:flex;text-decoration:none;text-align:center;line-height:1;transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;justify-content:center;align-items:center;background-size:100%;background-position:center;background-repeat:no-repeat;}
.label-personality{animation:hithere 2s ease infinite;}
.label-age{animation:sway2 0.5s infinite;}

@keyframes hithere {
30%{transform:scale(1.1);}
40%,60%{transform:rotate(-20deg) scale(1.1);}
50%{transform:rotate(20deg) scale(1.1);}
70%{transform:rotate(0deg) scale(1.1);}
100%{transform:scale(1);}
}
/*
.label-menu .label-item.plate-ingredient{background-image:url(../imgs/label-ingredient.webp);}
.label-menu .label-item.plate-generosity{background-image:url(../imgs/label-generosity.webp);}
.label-menu .label-item.plate-personality{background-image:url(../imgs/label-personality.webp);}
.label-menu .label-item.plate-age{background-image:url(../imgs/label-age.webp);}
.label-menu .label-item.plate-lohei{background-image:url(../imgs/plate-lohei.webp);}
*/
.label-menu .label-item.plate-lohei a{color:#fff;}

.label-menu .label-item:hover img{z-index:1000000;position:relative;transform:scale(1.2);-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);box-shadow:0 0 30px 0 rgba(0,0,0,0.2);}
.label-menu .label-item button{border:none;background:none;font-size:1.2em;line-height:1.2;font-weight:700;}
.disclaimer{font-size:0.8em;color:var(--theme-ui-colors-grey);text-align:left;}

.page #lohei{width:900px;height:900px;display:flex;margin:2em auto;justify-content:center;align-items:center;}

#guide{width:40px;margin:0 auto 1em auto;animation:swipe-x 2s ease-in-out backwards;animation-iteration-count:infinite;opacity:0.8;transform-origin:50% 100%;transition:0.3s ease-out;}
#legend{right:14%;top:10%;rotate:20deg;position:absolute;}
#hideMe000{-moz-animation:disappear 0s ease-in 2s forwards;-webkit-animation:disappear 0s ease-in 2s forwards;-o-animation:disappear 0s ease-in 2s forwards;animation:disappear 0s ease-in 2s forwards;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}

@keyframes disappear{
to{width:0;height:0;visibility:hidden;}
}
@-webkit-keyframes disappear{
to{width:0;height:0;visibility:hidden;}
}

.lohei-meanings{position:relative;width:100%;}
.yusheng-platter{width:100%;height:100%;z-index:0;position:relative;}
#yusheng a{display:block;width:100%;height:100%;cursor:pointer;}
#yusheng img{width:60%;height:60%;margin:0 auto;text-align:center;background-size:100% auto;background-repeat:no-repeat;background-position:0 0;background-image:url();animation-name:spin;animation-duration:20s;animation-iteration-count:infinite;animation-timing-function:linear;justify-content:center;}
.page .yusheng-platter{width:70%;height:70%;top:auto;}
.page #yusheng img{width:100%;height:100%;}

@media (min-width:769px) and (max-width:1025px){
}

@media (min-width:200px) and (max-width:768px) and (max-height:1800px){
.cover-headline{position:relative;}
#theme-logo,#snake,.cover-headline,.ingot{z-index:100000;}
#theme-logo{margin-top:2em;width:240px;height:240px;}
#snake{width:118px;height:160px;left:60%;top:40%;}
.lantern-round.align-left{top:-1em;left:56%;width:62px;height:160px;}
.lantern-round.align-right{top:-4em;left:80%;width:103px;height:260px;display:none;}
.lantern-portrait.align-left{top:-2em;left:-2%;width:66px;height:300px;}
.lantern-portrait.align-right{top:-3em;left:78%;width:44px;height:200px;z-index:10;}
.ingot{width:20%;top:76%;left:35%;}
#lohei{width:100%;margin:1.6em auto 0 auto;}
#guide{width:34px;}
#yusheng{width:160%;margin-left:-30%;}
#yusheng img{width:100%;height:100%;}
.page .yusheng-platter{width:100%;height:100%;}
.yusheng-platter{width:100%;left:0;}
#legend{right:0;top:0;}
.page #lohei{width:100%;height:800px;display:block;}
.label-item{padding:0.4em;}
}

@keyframes sway1{
0%{transform:rotate(-4deg);}
50%{transform:rotate(4deg);}
100%{transform:rotate(-4deg);}
}
@keyframes sway2{
0%{transform:rotate(-8deg);}
50%{transform:rotate(8deg);}
100%{transform:rotate(-8deg);}
}
@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

@keyframes tilt-shaking {
0%{transform:rotate(0deg);}
25%{transform:rotate(4deg);}
50%{transform:rotate(0eg);}
75%{transform:rotate(-4deg);}
100%{transform:rotate(0deg);}
}

@keyframes tilt-n-move-shaking {
0%{transform:translate(0, 0) rotate(0deg);}
25%{transform:translate(4px, 4px) rotate(4deg);}
50%{transform:translate(0, 0) rotate(0eg); }
75%{transform:translate(-4px, 4px) rotate(-4deg);}
100%{transform:translate(0, 0) rotate(0deg);}
}

@keyframes swipe-x{
0%{transform:translateX(0px);}
25%{transform:translateX(25%) rotateZ(25deg);}
50%{transform:translateX(0px);}
75%{transform:translateX(-25%) rotateZ(-25deg);}
}

#main-wrapper{margin-bottom:4em;outline:none;z-index:1000;position:relative;}
.sticky-header{margin-bottom:2em;position:relative;}
.page .sticky-header{margin-bottom:3em;}

.cover-header{width:80%;margin:auto;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;transition:opacity 3s cubic-bezier(0.19, 1, 0.22, 1);transition-delay:1s;position:relative;z-index:4;opacity:0;}
.cover-header.visible{opacity:1;}
.cover-content{width:100%;margin:0 auto;text-align:center;position:relative;}
.cover-sub{font-size:1em;line-height:1.4;display:inline;margin-bottom:2em;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:uppercase;position:relative;-webkit-animation:fadein 4s;-moz-animation:fadein 4s;animation:fadein 4s;}

.cover-headline{width:100%;}
.cover-headline h1{font-size:3em;text-shadow:0 2px 4px rgba(0,0,0,0.15);position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.cover-headline h1 span,.cover-headline h1 em{display:block;}
.cover-headline h1 span{font-size:1em;margin:0.6em auto 0.4em auto;font-weight:500;-webkit-animation:fadein 4s;-moz-animation:fadein 4s;animation:fadein 4s;}
.cover-headline h1 em{font-size:2.2em;font-weight:900;-webkit-animation:fadein 8s;-moz-animation:fadein 8s;animation:fadein 8s;}
.cover-headline h1 .text-shadow{animation:blur .75s ease-out infinite;text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;}
.cover-headline .duo{display:inline-block;position:relative;}
.cover-headline .duo:before,.cover-headline .duo:after{left:0;top:0;}

#program-label{padding:0.4em 0.8em;border-radius:0.3em;display:inline-block;color:var(--theme-ui-colors-white);background:var(--theme-ui-colors-main);}
#program-label:hover{background:var(--theme-ui-colors-secondary);}
.publish{font-size:0.9em;padding:1em 0;margin:1em auto 0 auto;border-top:1px solid rgba(255,255,255,0.4);}

.intro{width:50%;height:100vh;margin:auto;position:relative;z-index:2;display:block;}
.intro-text{padding:2em;top:50%;left:50%;width:100%;font-size:1.1em;background:rgba(0,0,0,0.2);display:block;margin:auto;color:var(--theme-ui-colors-white);z-index:1000;position:absolute;-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);text-align:left;box-shadow:0 0 30px 0 rgb(0 0 0 / 8%);border:1px solid rgba(255,255,255,0.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.intro-text p{margin:0 0 1.2em 0;}
.intro-text a{border-bottom:2px solid var(--theme-ui-colors-main);color:var(--theme-ui-colors-white);}

@media (min-width:1000px) and (max-width:1280px) and (orientation:landscape){
.cover-header{width:90%;}
.cover-headline h1 em{font-size:2.4em;}
}

@media (min-width:200px) and (max-width:768px) and (max-height:1800px){
.cover-header,.cover-content{width:100%;}
.cover-content{top:65%;}
.cover-sub{width:90%;margin:0 auto 1em auto;text-align:cemter;display:block;}
.cover-headline h1 span,.cover-headline h1 em{-webkit-animation:none;-moz-animation:none;animation:none;}
.cover-headline h1 span{font-size:0.8em;}
.cover-headline h1 em{font-size:1.6em;}
.publish{width:90%;padding:1em;}
#program-label{padding:0.2em 0.8em;font-size:0.9em;}
.intro{width:90%;margin:auto;}
.intro-text{top:50%;padding:1em 1.6em;}
}

@media (max-width:768px){
.intro .message{width:70%;padding:0.6em 1em 1.6em 1em;}
.intro h1 em,.intro h1 span{display:block;}
.intro h1 span{font-size:1.2em;}
}

@media screen and (max-width:767px){
.intro{height:120vh;}
.intro h1{font-size:5em;margin-top:0;}
.intro h1 em{font-size:1.2em;margin-top:1em;}
.intro .message{width:80%;margin-top:1em;padding:0.6em 1.4em;}
.intro .video-box{margin:1em auto;}
}

.row{margin-left:0;margin-right:0;}
.no-padding{padding:0;}
.text-capsule{padding:0 2em 2em 2em;}
blockquote{padding:0 0 0 3.4em;font-size:1.6em;font-weight:400;margin:1em auto;letter-spacing:0;position:relative;border:none;}
blockquote:before,blockquote:after{width:50px;height:35px;left:0;position:absolute;content:'';background-position:0 0;background-repeat:no-repeat;background-size:100%;}
blockquote:before{background-image:url('../../../../lib/imgs/icons/quote-left.svg');}
blockquote aside{font-size:0.8em;margin:1em auto 0 auto;padding-top:0.6em;border-top:2px solid #ffe1e9;font-weight:400;text-align:right;color:#888;}
blockquote aside b{font-size:1.1em;color:#666;}
.slide blockquote:before,.slide blockquote:after{width:44px;height:31px;}

#stickyBottom{position:fixed;bottom:0;width:100%;z-index:1000001;transition:all .5s;text-align:center;}
#stickyBottom a{display:block;}
#stickyBottom img{width:40%;height:auto;}
.hide{opacity:0;height:0;}
.show{opacity:1;height:auto;}

@media (min-width:320px) and (max-width:767px) and (orientation:portrait){
.text-capsule{padding:0 2em;}
blockquote{padding:0 0 0 3.6em;font-size:1em;}
blockquote:before,blockquote:after{top:0;width:40px;height:28px;}
.slide blockquote:before,.slide blockquote:after{width:36px;height:25px;}
#stickyBottom img{width:100%;}
}

.sponsor{display:flex;padding:4em 0 2em 0;justify-content:center;align-items:center;}
.sponsor span{font-size:0.9em;margin-right:0.4em;}
.sponsor img{width:160px;}


@media (min-width:320px) and (max-width:767px) and (orientation:portrait){
.sponsor,.sponsor span,.sponsor img{display:block;margin:auto;text-align:center;}
.sponsor span{margin-bottom:0.4em;}
.sponsor img{width:180px;}
}



/* Quiz */
#Quiz{position:relative;z-index:10000000;width:100%;display:block;}
#Quiz label{margin:0;font-weight:400;display:block;width:100%;text-align:left;position:relative;z-index:10000000;}
#Quiz label span{position:relative;z-index:100000;color:var(--theme-ui-colors-black);}
#Quiz input[type=radio]{opacity:0;}
#Quiz .hideme{display:none;}
#Quiz .button{cursor:pointer;padding:0px 20px;border:2px solid cyan;border-radius:5px;text-align:center;width:100px;}
#Quiz .button:hover{background-color:rgba(255,255,255,0.1);}
#Quiz #progress-bar{width:100%;margin-bottom:1em;padding-top:1.6em;display:flex;justify-content:flex-start;align-items:center;border-bottom:4px solid rgba(0,0,0,0.1);}
#Quiz #progress{width:20%;text-align:right;border-bottom:4px solid var(--theme-ui-colors-main);margin-bottom:-4px;}
#Quiz .option{margin:0.4em auto;padding:0.6em 0.8em;background:rgba(255,255,255,0.8);border:1px solid #ccc;border-radius:50px;display:flex;align-items:center;position:relative;}
#Quiz .option:active{background-color:var(--theme-ui-colors-secondary);color:var(--theme-ui-colors-white)!important;}
#Quiz .option:active span{color:var(--theme-ui-colors-white)!important;}

.quiz-box{padding:0 2em 2em 2em;}
.quiz-box h2{font-size:2em;margin-bottom:0.4em;font-weight:700;color:var(--theme-ui-colors-secondary);}
.quiz-box h2 em{font-size:1em;font-weight:900;display:block;}
.quiz-box h3{font-size:1.4em;margin-bottom:0.6em;font-weight:700;text-align:left;width:100%;display:block;}
.quiz-box .capsule{min-height:300px;display:flex;align-items:center;justify-content:center;}
#QuizPop-Age .quiz-box .capsule,#QuizPop-Generosity .quiz-box .capsule,#QuizPop-Personality .quiz-box .capsule{min-height:100px;}

.quiz-container.start .btn-style{transform:scale(1.2);}
.quiz-container{width:100%;text-align:center;padding:1em 0;}
.quiz-container p{font-weight:400;font-size:1em;text-align:left;}
.quiz-container img{width:80%!important;margin:auto auto 1em auto;display:block;}
#QuizPop-Age .quiz-container,#QuizPop-Generosity .quiz-container,#QuizPop-Personality .quiz-container{padding:2em 0;}

#personality-type{font-weight:900;padding:0.6em 0 0 0;font-size:1.8em;line-height:1.2;text-align:center;}
#personality-type span{font-weight:400;font-size:0.7em;display:block;}

.btn-style:hover{transform:scale(1.5)!important;}

.modal-backdrop{background:rgba(254,253,241,0)!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important;}
.modal-backdrop.show{opacity:0.7;}
.modal{padding:0!important;}
.modal .close{padding:0;margin:0;position:absolute;top:0;right:0.6em;z-index:100000000;}
.modal .close span{font-size:2em!important;font-weight:100;vertical-align:top;}
.modal-dialog{height:100%;margin:auto;display:flex;justify-content:center;align-items:center;}
.modal-content{border-radius:3em;border:1em solid var(--theme-ui-colors-secondary);}
.modal-header{border:none;padding:0;}
.modal-body{padding:0 1em 1em 1em;}
.modal-body .scroller{padding:0 1em 0 0;height:440px;}
#QuizPop-Age .modal-dialog,#QuizPop-Generosity .modal-dialog,#QuizPop-Personality .modal-dialog{max-width:60%;}


@media (min-width:768px) and (max-width:1200px){
#QuizPop-Age .modal-dialog,#QuizPop-Generosity .modal-dialog,#QuizPop-Personality .modal-dialog{max-width:80%;}
}

.shyBox{display:none;}
.showList,.showList li{list-style-type:none;padding:0;margin:0;}
.showList{width:100%;margin-bottom:1em;display:flex;}
.showList img{width:120%!important;margin:0 0 0 -10%;}
#QuizPop-Generosity .showList li{width:25%;}
#QuizPop-Generosity .showBox{width:100px;height:100px;font-size:1.2em;background:var(--theme-ui-colors-secondary);color:var(--theme-ui-colors-white);border:1px solid #ccc;display:flex;border-radius:50%;align-items:center;justify-content:center;}
#QuizPop-Generosity img{width:120%!important;margin:0 0 0 -10%;}
.showBox,button{cursor:pointer;}
.showContent .shyBox{padding:1.4em;background:var(--theme-ui-colors-muted);border-radius:0.8em;}
.showContent h3{text-align:center;}
ul.showList{
	@media (hover) and (prefers-reduced-motion: no-preference) {
	& > li{transform-origin:left center;transition:transform 1s var(--ease-spring-3),opacity .3s var(--ease-3);}
	&:hover > li:not(:hover) {opacity:.25;}
	}
}

.orderBox{padding:1em 2em 2em 2em;width:100%;height:100%;margin:0 auto 1em auto;position:relative;text-align:left;opacity:0;visibility:hidden;background:#f7f7f7;}
.orderBox ul,.orderBox li{list-style-type:none;padding:0;margin:0;}
.orderBox .answer{height:100%;}
.orderBox .answer b{font-size:1.2em;font-family:Roboto;}
.orderBox .answer span{line-height:1.3;font-size:0.95em;}
.orderBox .item-content,.orderBox .accordion-header{display:flex;align-items:center;}
.orderBox .accordion-header{width:100%;}
.orderBox .accordion-header b{margin-right:0.8em;}
.orderBox .accordion-header span{width:64%;}
.orderBox .list-item ul{padding:1em;background:var(--theme-ui-colors-white);}
.orderBox .collapse{border:1px solid #ddd;}
.orderBox .collapse ul b{margin-right:0.8em;}
.list-item{padding:0;margin-bottom:-2em;width:100%;}
.item-content{padding:0.8em 1em;font-size:1em;background:var(--theme-ui-colors-secondary);line-height:1.2;color:var(--theme-ui-colors-white);box-shadow:rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;cursor:grabbing;display:flex;align-items:center;text-align:left;}
.item-content b{width:16%;font-size:1.2em;margin-right:0.4em;}
.item-content em{font-size:1.2em;font-weight:700;}
.item-content span{width:70%;font-weight:400;}
.order{display:flex;align-items:center;}
.order:after{margin-right:0.2em;content:'.';}
.order:before{width:30px;height:30px;right:0.5em;display:flex;position:absolute;content:'+';opacity:0.5;cursor:pointer;align-items:center;justify-content:center;}
.order:hover:before{opacity:1;}
.quiz-container .icon{width:30px!important;display:inline-block!important;margin:auto 0.4em auto auto!important;}
#QuizPop-Personality legend{font-size:0.9em;text-align:center;}

@media (min-width:300px) and (max-width:767px){
#Quiz{overflow:hidden;overflow-y:auto;}
.modal-content{width:90%;}
.modal-content{border-radius:2em;border:0.5em solid var(--theme-ui-colors-secondary);}
.modal-body .scroller{padding:0 1em 0 0;}
.quiz-box{padding:0;}

.quiz-box h2{font-size:1.6em;}
#QuizPop-Age img{width:100%!important;margin:0 0 0 0!important}
#QuizPop-Age .modal-dialog,#QuizPop-Generosity .modal-dialog,#QuizPop-Personality .modal-dialog{max-width:100%;}
.orderBox{width:98%;margin:0;}
.item-content em,.item-content b{font-size:15px;}
.orderBox{padding:0;background:none;}
.orderBox .accordion-header span{display:block;width:100%;font-size:0.9em;}
.orderBox .list-item ul{max-height:180px;font-size:0.9em;overflow:hidden;overflow-y:auto;}
.order:before{width:40px;height:40px;right:0.2em;}
#QuizPop-Age .quiz-box .capsule,#QuizPop-Generosity .quiz-box .capsule,#QuizPop-Personality .quiz-box .capsule{min-height:auto;}
#QuizPop-Personality .orderBox .accordion-header{display:block;}
#QuizPop-Personality .orderBox .accordion-header b{width:auto;font-size:1.2em;}
#QuizPop-Personality .orderBox .accordion-header .order,#QuizPop-Personality .orderBox .accordion-header b{display:inline-block;}

#QuizPop-Generosity img{width:50%!important;margin:0 auto 1em auto;}
#QuizPop-Generosity .showList{}
#QuizPop-Generosity .showBox{padding:0.4em;border-radius:0.6em;width:100%;height:auto;}
#QuizPop-Generosity .showBox:focus{background:var(--theme-ui-colors-secondary);}
.nopad{padding:0;}
}