body{overflow-x:hidden; color:#fff!important;letter-spacing:0.1em;}

#quiz hr{margin:0 auto !important;}

#quiz {font-size:14pt;font-family: Merriweather, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Heiti SC", 冬青黑, "Microsoft YaHei", 微软正黑体, "Microsoft JhengHei", 微软雅黑, 宋体, STHeiti, "LiHei Pro", 华文黑体;}
#quiz button {position: relative;z-index:2}

#quiz .indicator{padding: 0;text-align: center;}
#quiz .indicator > li{display: inline-block; width: 9.45%; height: 10px; background: #d6d6d6; margin:auto 0.1em;}
#quiz .indicator > li.active{background: #ad1f84;}

#quiz .jumbo{color:#fff !important;}
#quiz p{text-indent: 0 !important;}
#quiz .start-page{background: url('../imgs/title.jpg?20190104a');background-size:100%;background-repeat:no-repeat;width:100%;height: 600px;}
#quiz .start-btn{position: relative; float: right; right: 10%; bottom: -42%;width: 180px;border-radius: 30px;font-weight:bold;padding:0.6em;background-color: transparent;color:#fff;border:2px solid #27d6ff;}
#quiz .start-btn:hover{background-color: #1d64cc;border-color:#1d64cc;}

#quiz button.quiz-button{background:transparent !important;border:none !important;}
#quiz button.quiz-button:hover{outline: none !important;}

#quiz .qnsWrap{max-width: 95%;margin:auto;display: block;margin-top: 1em;}
#quiz .qns{line-height: 1.4 !important;font-size: 1.6em;font-weight: bold;margin-bottom: 1em;}
#quiz .qnsNo{ display: inline-block;font-size: 1.2em;color:#fff;}

#quiz .quiz img{margin:auto; display: block;width: 100%;}
#quiz .quiz-button {margin:2em 0;cursor: pointer;display: block;}
#quiz .choice{font-style: normal;color:#fff;font-weight:bold;background-color: #666; border-radius: 50%; margin:0.5em;padding: 0.45em 0.85em; text-align: center;}
#quiz .quiz-button:enabled:hover .choice, #quiz .choice:enabled:hover,#quiz .quiz-button:enabled:active .choice, #quiz .choice:enabled:active{background-color: #ad1f84;}
#quiz .quiz-button:enabled:hover span, #quiz span:enabled:hover{color:#fff !important; font-weight:bold;  }


#quiz .wrapper{margin-top: 3em;}
#quiz .wrapper p{padding:0 1em;}
#quiz .wrapper span{text-align: center;}
#quiz .wrapper button{margin-top:3em !important;margin: auto;display: block;border-radius: 30px;font-weight:bold;padding:0.6em;color:#fff !important; background-color: #333 !important;width: 180px;}
#quiz .wrapper button:hover{background-color: #fff !important;color:#04429b !important;}


#quiz i{font-size: 1.4em;}
#quiz .wrong{color:#c70a2f;}
#quiz .wrong .choice{background-color:#c70a2f;}
#quiz .correct{color:#5dc3ff;}
#quiz .correct .choice{background-color:#5dc3ff;}

#quiz #explanation{color:#5dc3ff;font-size: 1.2em;font-weight: bold;padding-left: 0.5em !important;}
#quiz .related-links p{margin-bottom: 0;}

#quiz .restart{background-color: #25aeff;border-radius: 30px;font-weight:bold;padding:0.6em;color:#fff !important;border:2px solid #871f69;width: 180px;}
#quiz .share, #quiz .prev-qns{background-color: #871f69;border-radius: 30px;font-weight:bold;padding:0.6em;color:#fff !important;border:2px solid #04429b;width: 180px;}
#quiz .restart:hover{background-color: transparent;border:2px solid #25aeff;color:#871f69 !important;}
#quiz .share:hover, #quiz .prev-qns:hover{background-color: transparent;border:2px solid #871f69;color:#871f69 !important;}

#quiz .buttons{text-align: center; margin:2em;}

#quiz .challenge, #quiz .result, #quiz .performance, #quiz .explaination{text-align: center;}
#quiz .result_desc .title{font-size: 2em;color:#04429b;font-weight: bold;text-align: center;}
#quiz .end-page img{margin: auto;max-width: 300px !important;}
#quiz .end-page .desc{max-width: 80%; margin: auto;}
#quiz > div:last-child {overflow: initial !important;width:100% !important;top: -600px !important;display: none;}
#quiz .chart{width:100% !important;}

#quiz .challenge, #quiz .explaination, #quiz .references{padding: 0 2em;}
#quiz .prev-qns{margin: auto; display: block;}

#quiz .explaination {color: #04429b;font-weight: bold;}
#quiz .score {font-size: 3em;}

@media only screen and (max-width:767px){
#quiz > div:last-child {display: none !important;}
#quiz .indicator > li{width: 8%;}
#quiz .qns{line-height: 1.4 !important;font-size: 1.3em !important;}
#quiz .result_desc .title{font-size: 1.6em !important;}
#quiz .share, #quiz .restart{max-width: 120px !important; display: inline-block !important;}
#quiz .jumbo{font-size: 15px !important;}
 
    

}
@media only screen and (max-device-width: 800px){
    #quiz > div:last-child {display: none !important;}
}
@media only screen and (min-width:768px) and (max-width:1790px){
#quiz .indicator > li{width: 9%;}
	}

@media only screen and (max-width:767px) and (orientation:portrait){
#quiz .start-btn{ right: 5%; bottom: -22%;max-width: 120px !important;}
#quiz .choice{float: left;}
#quiz .jumbo{display: block; text-align: left;margin-top: 1.5em;}
#quiz button.quiz-button{margin: 0; padding: 0; width: 100%;}
#quiz i{float: right; margin-top: -1em;}
#quiz .end-page img{max-width: 200px !important;}
}

@media only screen and (max-width:767px) and (orientation:landscape){
#quiz .start-btn{ right: 5%; bottom: -45%;}
}


@media only screen and (min-width:1200px) and (max-width:1400px){
#quiz .start-btn{ right: 5%; bottom: -45% !important;}
}