/*==================*/
/*	Colors
/*==================*/

/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i');*/
@import url(https://);

html, body{
	color: #808285;
	min-width: 660px;
	font-family: system, -apple-system, BlinkMacSystemFont, 'PingFang HK', 'Noto Sans TC', Arial, sans-serif;
}

button, a{
	cursor: pointer;
	color: inherit;
	text-decoration: none !important;
}

a{
	color: inherit !important;
}

button:focus{
	outline: 0;
}

button a:hover, button a:active{
	color: inherit;
	text-decoration: none;
}

img{
	width: 100%;
}

form{
	margin: 0px;
}

.gray{
	color: #808285 !important;
}

.dark-gray{
	color: #626262 !important;
}

.red{
	color: #DA6454;
}

.blue{
	color: #27D5D2;
}

.sea-blue{
	color: #4482C3;
}

.white{
	color: #FFFFFF !important;
}

.bg-yellow{
	background-color: #FFF9AD;
}

.bg-green{
	background-color: #DFFFDC;
}

.bg-cyan{
	background-color: #B4F0EF;
}

.bg-gray{
	background-color: #808285;
}

.bg-peach{
	background-color: #FFC698;
}

.bg-orange{
	background-color: #F4C264;
}

.bg-light-orange{
	background-color: #FFDD9D;
}

.bg-red{
	background-color: rgb(204, 106, 90);
}

.bg-person1{
	background-image: url('/clc/pronunciation/image/person1.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto auto;
}

.bg-person1-2{
	background-image: url('/clc/pronunciation/image/person1_2.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto auto;
}

.bg-person2{
	background-image: url('/clc/pronunciation/image/person2.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto auto;
}

.bg-person2-2{
	background-image: url('/clc/pronunciation/image/person2_2.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto auto;
}

.bg-person3{
	background-image: url('/clc/pronunciation/image/person3.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto auto;
}

.bg-person3-2{
	background-image: url('/clc/pronunciation/image/person3_2.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto auto;
}

.bg-yellow-circle{
	background-image: url('/clc/pronunciation/image/yellow_circle_bg.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
}

.bg-green-circle{
	background-image: url('/clc/pronunciation/image/green_circle_bg.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%  auto;
}

.bg-blue-circle{
	background-image: url('/clc/pronunciation/image/blue_circle_bg.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%  auto;
}

.bg-gray-circle{
	background-image: url('/clc/pronunciation/image/gray_circle_bg.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
}

.bg-light-orange-circle{
	background-image: url('/clc/pronunciation/image/light_orange_circle_bg.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;background-image
}

.bg-orange-circle{
	background-image: url('/clc/pronunciation/image/orange_circle_bg.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;background-image
}

.bg-white-eclipse{
	background-image: url('/clc/pronunciation/image/white_eclipse_bg.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% auto;
}

.bg-white-semicircle-yellow{
	background-image: url('/clc/pronunciation/image/bg_white_semicircle_yellow.jpg'), url('/clc/pronunciation/image/bg_white_tile.jpg');
	background-repeat: no-repeat, repeat-y;
	background-position: center top, left top;
	background-size: 100% auto, 100%, auto;
}

.bg-white-semicircle-blue{
	background-image: url('/clc/pronunciation/image/bg_white_semicircle_blue.jpg'), url('/clc/pronunciation/image/bg_white_tile.jpg');
	background-repeat: no-repeat, repeat-y;
	background-position: center top, left top;
	background-size: 100% auto, 100% auto;
}

.bg-white-semicircle-green{
	background-image: url('/clc/pronunciation/image/bg_white_semicircle_green.jpg'), url('/clc/pronunciation/image/bg_white_tile.jpg');
	background-repeat: no-repeat, repeat-y;
	background-position: center top, left top;
	background-size: 100% auto, 100% auto;
}

.bg-white-semicircle-light-orange{
	background-image: url('/clc/pronunciation/image/bg_white_semicircle_light_orange.jpg'), url('/clc/pronunciation/image/bg_white_tile.jpg');
	background-repeat: no-repeat, repeat-y;
	background-position: center top, left top;
	background-size: 100% auto, 100% auto;
}

.bg-white-semicircle-orange{
	background-image: url('/clc/pronunciation/image/bg_white_semicircle_orange.jpg'), url('/clc/pronunciation/image/bg_white_tile.jpg');
	background-repeat: no-repeat, repeat-y;
	background-position: center top, left top;
	background-size: 100% auto, 100% auto;
}

.bg-speaker{
	background-image: url('/clc/pronunciation/image/speaker.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-green-bubble{
	background-image: url('/clc/pronunciation/image/bg_green_bubble.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-blue-bubble{
	background-image: url('/clc/pronunciation/image/bg_blue_bubble.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-red-bubble{
	background-image: url('/clc/pronunciation/image/bg_red_bubble.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-yellow-bubble{
	background-image: url('/clc/pronunciation/image/bg_yellow_bubble.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-arrow-right{
	background-image: url('/clc/pronunciation/image/chevron-right.png');
	background-repeat: no-repeat;
	background-position: right 0% top 80%;
	background-size: auto 90%;
}

.bg-warmup-result{
	background-image: url('/clc/pronunciation/image/bg_warmup_result.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 85% auto;
}

.bg-feedback-left{
	background-image: url('/clc/pronunciation/image/bg_feedback_left.png');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: auto 90%;
}

.bg-feedback-right{
	background-image: url('/clc/pronunciation/image/bg_feedback_right.png');
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 90% auto;
	width: 100%;
}

.highlight{
	padding-left: 0.3em;
	padding-right: 0.3em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}

/*==================*/
/*	Font size
/*==================*/
.h2{
	font-size: 1.5em;
	font-weight: 500;
}

.light{
	font-weight: 400;
}

.super-light{
	font-weight: 300;
}

.semi-bold{
	font-weight: 500;
}

.bold{
	font-weight: 600;
}

/*==================*/
/*	Letter spacing
/*==================*/
.letter-spacing-005{
	letter-spacing: 0.05em;
}

.letter-spacing-01{
	letter-spacing: 0.1em;
}

.letter-spacing-03{
	letter-spacing: 0.3em;
}

.letter-spacing-05{
	letter-spacing: 0.5em;
}

/*==================*/
/*	Text Align
/*==================*/
.text-justify{
	text-align: justify;
}

.text-right-font-small{
	text-align: right;
	font-size: 0.8em;
}

/*==================*/
/*	Font Size
/*==================*/
.font-one-five{
	font-size: 1.5em;
}
/*==================*/
/*	Button
/*==================*/
.clear-button{
	background: none;
	border: none;
}


/*==================*/
/*	Position
/*==================*/
.position-relative{
	position: relative;
}

.position-absolute{
	position: absolute;
}

/*==================*/
/*	Padding
/*==================*/
.padding-zero{
	padding: 0px;
}

.padding-top-20{
	padding-top: 20px;
}

/*==================*/
/*	Margin
/*==================*/
.margin-zero{
	margin: 0px;
}

.margin-auto{
	margin: auto;
}

.margin-top-40{
	margin-top: 40px;
}

.margin-top-1em{
	margin-top: 40px;
}

/*==================*/
/*	Border
/*==================*/
.underline-gray{
	border-bottom: 2px solid #626262;
}

.border-gray-1{
	border: 1px solid #626262;
}

.rounded-corner{
	border-radius: 8px;
}

.no-border{
	border: none;
}

/*==================*/
/*	Flex
/*==================*/

.flex-col{
	display: flex;
	flex-direction: column;
	height: 100%;
}

.flex-row{
	display: flex;
	flex-direction: row;
	width: 100%;
}

.flex0{
	flex: 0;
}

.flex1{
	flex: 1;
}

/*==================*/
/*	Orientation
/*==================*/

.portrait-only{
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.portrait-only h2{
	position: fixed;
	left: 50%;
	top: 50%;

	-webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.landscape-only {
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}

@media screen and (orientation:landscape) and (min-width: 957px){
	.landscape-only{
		display: block;
	}

	.portrait-only{
		display: none;
	}
}

@media screen and (orientation: portrait){
	.portrait-only{
		display: block;
	}

	.landscape-only{
		display: none;
	}
}

@media screen and (max-width: 957px){
	.portrait-only{
		display: block;
	}

	.landscape-only{
		display: none;
	}
}

/*==================*/
/*	Animation
/*==================*/
.fade-out{
	opacity: 0.25;
	transition: opacity 1s linear;
}

/*==================*/
/*	Navbar
/*==================*/

.nav-bar{
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 50px;
}

.navbar-toggler{
	border: none;
}

.navbar-brand{
	font-size: 1.8em;
	font-weight: 500;
}

.navbar-collapse{
	padding-left: 50px;
}

.nav-item{
	padding-left:15px;
	padding-right:15px;
}

.navbar-light .navbar-nav .show>.nav-link{
	color: inherit;
}

.dropdown-menu{
	border: none;
	left: -8px;
	min-width: 0em;
}

.dropdown-menu .dropdown-menu{
	background-color: transparent;
	box-shadow: none;

	/*background-image: url('/clc/pronunciation/image/submenu_bg.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;*/

	background-image: url('/clc/pronunciation/image/submenu_triangle.png'), url('/clc/pronunciation/image/submenu_rectangle.png');
	background-repeat: no-repeat, no-repeat;
	background-position: left 0% top 10px, left 10px top 0px;
	background-size: auto auto, 100% 100%;
	position: static;
	top: 30px;
	left: 201px;
	padding-top: 0px;
	padding-left: 10px;
}

.dropdown-menu .overcome-level-submenu{
	position: static;
	top: -14px;
	left: 152px;
}

.dropdown-menu .overcome-integrated-submenu{
	position: static;
	/*top: 90px;
	left: 162.5%;*/
	top: 25px;
	left: 169px;
}

#cantoneseIdentificationDropdown, #overcomeIntegratedDropdown, #overcomeLevelDropdown{
	margin-top: 0px !important;
}

#cantoneseIdentificationDropdownMenu{
	margin-top: 5px;
	padding-top: 4px;
}

.dropdown-menu .dropdown-menu .dropdown-item{
	margin-top: 4px;
	margin-bottom: 4px;
}

.navbar-collapse .show .dropdown-item{
	color: #808285;
	padding-bottom: 4px;
}

.navbar-collapse .show .dropdown-item.active{
	color: #000000;
}

.dropdown-item{
	background-color: transparent !important;
}

@media (max-width: 991px){
	.dropdown-item{
		font-size: 1.8em;
	}

	.dropdown-menu .dropdown-menu{
		background-image: none;
		margin-left: 20px;
	}
}


@media screen and (max-width: 991px) and (orientation:portrait){
	.navbar{
		font-size: 1.8em;
	}

	.navbar-toggler-icon{
		width: 3.5em;
		height: 3.5em;
	}
}

@media screen and (max-width: 991px) and (orientation:landscape){
	.navbar, .dropdown-item{
		/*background-color: rgba(140, 144, 144) !important;*/
		font-size: 1.2em;
	}

	.navbar-toggler-icon{
		width: 2.7em;
		height: 2.7em;
	}
}

@media (min-width: 992px) {
	.dropdown-menu{
		margin-top: 20px;
		box-shadow: 0px 4px 6px #80808285;

		left: 50%;

		-webkit-transform: translate(-50%, 0);
	    -moz-transform: translate(-50%, 0);
	    -o-transform: translate(-50%, 0);
	    -ms-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
	}

	.dropdown-item{
		text-align: center;
	}
}

/*==================*/
/*	Home
/*==================*/
.index .section1, .index .section2{
	padding-top: 30px;
}

.index .section1-content{
	/*width: 623px;
	min-height: 431px;*/
	width: 628px;
	min-height: 528px;
	margin: auto;
}
.index .section1-content h2{
	float: right;
	padding-top: 70px;
	padding-right: 80px;
	font-size: 2.0em;
	line-height: 1.6em;
}

.index .section1-content .practice-button{
	right: 0%;
	bottom: 110px;
}

.header-section{
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 2.4em;
	margin: 0px;
}

.index .section2-background{
	/*width: 681px;
	height: 431px;*/
	width: 633px;
	height: 625px;
	margin: auto;
}

.index .section2-content{
	width: 70%;
	margin: auto;
	padding-top: 60px;
	padding-left: 130px;
	font-size: 1.2em;
}

.index .section2-content p{
	margin-top: 1.6em;
}

.index .section2-content .learn-more-button{
	bottom: 150px;
	left: 120px;
}

.index .section2-content .practice-button{
	margin-bottom: 8%;
}

.index .section1-content .practice-button button, .index .section2-content .practice-button button{
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 2.0em;
	font-weight: 300;
	margin-right: -30%;
}

.index .section3{
	margin-top: 2.0em;
}

.index .section3 h2{
	margin-bottom: 0.5em;
	margin-left: 6%;
}

.index .section3 .level-section, .index .section3 .practice-section{
	padding-left: 4%;
	padding-right: 4%;
}

.index .level{
	position: relative;
	width: 100%;
	max-width: 80%;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 50px;
}

.index .level button{
	width: 100%;
	padding-top: 25%;
	padding-bottom: 25%;
	font-size: 2.5em;
	font-weight: 300;
}


.index .section5 {
	width: 100%;
	height: 70px;
	margin-top: 2.0em;
	margin-bottom: 2.0em;
	padding-left: 4%;
	padding-right: 4%;
}

.sponser-title {
	text-align: right;
  line-height: 35px;
	padding-left: 0px;
	font-size: 1.0em;
}

.department-title {
	text-align: left;
  line-height: 70px;
	margin-left: -25px;
	font-size: 1.0em;
}

.departmentlogo {
	max-height: 70px;
	object-fit: scale-down;

}

.polyulogo {
	height: 70px;
	object-fit: scale-down;
	padding-top: 6;
}

@media screen and (max-width: 991px){
	.index .section3 h2{
		text-align: center;
		margin: auto;
	}
	.index .section5 .sponser-title, .index .section5 .department-title{
		text-align: center;
		margin: auto;
		font-size: 1.0em;
	}
}

@media screen and (min-width: 992px){
	.col-lg-0{
		display: none;
	}
}

@media screen and (min-width: 992px) and (max-width: 1200px){
	.index .section3 .level-section, .index .section3 .practice-section{
		padding-left: 2%;
		padding-right: 2%;
	}
}

/*==================*/
/*	Warmup
/*==================*/

.countdown-section{
	position: absolute;
	width: 200px;
	height: 209px;
	margin-top: 20px;
	z-index: 999;
}

.countdown-section img{
	width: 200px;
}

.countdown-section-text{
	position: absolute;
	top: 50%;
	width: 100%;
	text-align: center;

	-webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}

.countdown-section-text h3{
	line-height: 1.5em;
}

.warmup-exercise-instruction{
	padding-top: 20px;
	padding-bottom: 20px;
}

.warmup-exercise-instruction h4{
	margin-top: 0.6em;
	font-size: 1.2em;
}

.exercise-question-section{
	padding-top: 50px;
	/*min-height: calc(100% * 324 / 317);*/
	min-height: 72%;
}

.exercise-question-section h1{
	font-size: 4.8rem;
}

.exercise-question-section .choices{
	padding-top: 40px;
	width: 50%;
	margin: auto;
	font-size: 2.6em;
}

.exercise-question-section .choice{
	margin: auto;
}

.exercise-question-section .bg-speaker{
	width: 60px;
	height: 60px;
}

.exercise-question-section .bg-bubble{
	width: 220px;
	height: 220px;
	padding-left: 50px;
	margin-left: 10px;
	margin-right: 40px;
	font-weight: 500;
}

.exercise-question-section #next-button-container{
	width: 93%;
	white-space: nowrap;
}

.exercise-question-section .next-button, .practice-content #next-button, .practice-content #next-practice-button{
	display: none;
	font-size: 2.0em;
}

.exercise-question-section .next-button button, .practice-content #next-button button,  .practice-content #next-practice-button button{
	padding-right: 40px;
}

.exercise-result-section h2{
	padding-top: 30px;
}

.exercise-result-section .bg-warmup-result{
	width: 100%;
	min-height: calc(85vw * 604 / 1208);
}

.exercise-result-section-content{
	margin-top: -1.5em;
	margin-left: -0.4em;
	font-size: 1.5em;
	top: 55%;
	left: 50%;

	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.exercise-result-section-content h1{
	line-height: 1.5em;
	font-size: 3.6em;
	font-weight: 300;
}

.exercise-result-section-content h4{
	font-size: 1.3em;
	line-height: 1.6em;
	font-weight: 400;
}

.exercise-result-section-content .bg-orange{
	padding-left: 1.6em;
	padding-right: 1.6em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	border-radius: 0.8em;
}

.exercise-result-section .cantonese-info-button,
.exercise-result-section .elaboration-button{
	font-size: 1.5em;
	right: 30px;
	bottom: 5%;
}

.exercise-result-section .cantonese-info-button button{
	padding: 10px;
}

.exercise-result-section .elaboration-button{
	right: 7%;
	bottom: 6%;
	font-size: 1.6em;
	vertical-align: middle;
}

.exercise-result-section .elaboration-button img{
	display: inline-block;
	width: 1.4em;
	margin-left: 0.3em;
	padding-bottom: 0.2em;
}

@media (max-width: 991px){
	.exercise-question-section .bg-speaker{
		margin-left: -20px;
	}

	.exercise-question-section .bg-bubble{
		width: 180px;
		height: 180px;
		padding-left: 40px;
		margin-right: 50px;
		font-size: 0.8em;
	}

	.exercise-result-section-content{
		font-size: 1.0em;
	}

	.exercise-question-section #next-button-container{
		width: 95%;
	}
}

.warmup .tick-image, .medium-level-content .tick-image{
	/*right: 2%;
	bottom: 14%;
	max-width: 38%;*/

	right: 14%;
	bottom: 14%;
	max-width: 34%;
}

.basic-level-content .tick-image, .comprehensive-word-content .tick-image{
	right: 24%;
	bottom: 14%;
	max-width: 24%;
}

.practice-content .tick-image{
	right: 22%;
	bottom: 14%;
	max-width: 30%;
}

.high-level-content .tick-image{
	right: 20%;
	bottom: -10%;
}

.warmup .cross-image, .practice-content .cross-image, .medium-level-content .cross-image{
	/*right: 4%;
	bottom: 10%;
	max-width: 26%;*/

	right: 18%;
	bottom: 14%;
	max-width: 20%;
}

.practice-content .cross-image{
	right: 26%;
	bottom: 14%;
	max-width: 20%;
}

.high-level-content .cross-image{
	right: 18%;
	bottom: -8%;
}

.basic-level-content .cross-image, .comprehensive-word-content .cross-image{
	right: 24%;
	bottom: 14%;
	max-width: 16%;
}

@media (max-width: 1023px){
	.warmup .tick-image, .practice-content .tick-image, .basic-level-content .tick-image,
	.medium-level-content .tick-image, .comprehensive-word-content .tick-image{
		right: 20%;
		bottom: 14%;
		max-width: 34%;
	}

	.warmup .cross-image, .basic-level-content .cross-image, .medium-level-content .cross-image,
	.comprehensive-word-content .cross-image{
		/*right: 4%;
		bottom: 10%;
		max-width: 26%;*/

		right: 22%;
		bottom: 14%;
		max-width: 20%;
	}

	.practice-content .tick-image{
		right: 27%;
		max-width: 25%;
		z-index: 999;
	}

	.practice-content .cross-image{
		right: 30%;
		max-width: 18%;
	}

	.high-level-content .tick-image{
		right: 20%;
		bottom: -10%;
	}

	.high-level-content .cross-image{
		right: 18%;
		bottom: -8%;
	}
}

@media (min-width: 992px) and (max-width: 1024px){
	.exercise-question-section .bg-speaker{
		margin-left: -20px;
	}

	.exercise-question-section .bg-bubble{
		width: 180px;
		height: 180px;
		margin-right: 50px;
		font-size: 0.9em;
	}
}

/*==================*/
/*	Project
/*==================*/
.initiation, .group-selection, .cantonese-intro, .sound{
	padding-top: 40px;
}

.initiation-content, .group-selection-content, .cantonese-intro-content, .sound-content{
	padding-top: 55px;
	padding-bottom: 60px;
	width: 52%;
	margin: auto;
}

.initiation-content, .cantonese-intro-content, .sound-content{
	font-size: 1.2em;
}

.initiation-content table{
	font-size: 1.0em;
}

.initiation-content h1, .group-selection-content h1, .cantonese-intro-content h1, .sound h1{
	margin-bottom: 0.9em;
}

.initiation-content h2{
	margin-top: 1.0em;
	margin-bottom: 1.0em;
	font-size: 1.4em;
}

/*==================*/
/*	Practice
/*==================*/
.practice-content #show-answer-button{
	pointer-events: none;
	right: 120px;
	bottom: 130px;
	font-size: 1.5em;
}

.practice-content #show-answer-button button{
	pointer-events: auto;
}

.practice-content #next-button{
	right: 100px;
	bottom: 130px;
}

.practice-content #next-practice-button{
	right: 20px;
	top: 30px;
}

.practice-content #restart-button{
	right: 5%;
	/*bottom: 60px;*/
	top: -120px;
	font-size: 2.0em;
}

.practice-content #restart-button button{
	padding-left: 0.7em;
	padding-right: 0.7em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	font-weight: 300;
}

.practice-content .bg-speaker{
	width: 70px;
	height: 70px;
}

.practice-content .bg-bubble{
	width: 160px;
	height: 160px;
	margin-right: 50px;
	padding-left: 25px;
}

.practice-content .bg-bubble, .practice-content .bg-speaker{
	/*z-index: 999;*/
}

@media (max-width: 991px){
	.practice-content .bg-speaker{
		width: 50px;
		height: 50px;
	}

	.practice-content .bg-bubble{
		width: 120px;
		height: 120px;
		padding-left: 20px;
	}
}

@media (min-width: 768px) and (max-width: 1024px){
	.practice-content #show-answer-button{
		right: 50px;
	}

	.practice-content #next-button{
		right: 30px;
	}

	.practice-content #next-practice-button{
		right: 10px;
	}

	.practice-content #restart-button{
		right: 10px;
		bottom: 80px;
	}
}

@media (max-width: 767px){
	.practice-content #show-answer-button{
		right: 50px;
	}

	.practice-content #next-button{
		right: 30px;
	}

	.practice-content #restart-button{
		bottom: 0px;
	}
}

@media (min-width: 1500px){
	.practice-content .choice{
		margin-left: -30px;
	}

	.practice-content #show-answer-button{
		right: 10%;
	}

	.practice-content #next-button{
		margin-top: 10px;
		right: 8%;
	}

	.practice-content #restart-button{
		right: 6%;
	}
}

/*==================*/
/*	Group Selection
/*==================*/
.group-selection{
	font-size: 1.2em;
}

@media (max-width: 992px){
	.group-selection{
		font-size: 1.8em;
	}
}


/*==================*/
/*	Basic Level
/*==================*/
.basic-level-content .question-speaker-button, .comprehensive-word-content .question-speaker-button{
	bottom: 0px;
	left: 58%;
}

.basic-level-content .question-speaker-button button,
.comprehensive-word-content .question-speaker-button button,
.comprehensive-sentence-content .question-speaker-button button{
	width: 4.0rem;
	height: 4.0rem;
}

.basic-level-content .exercise-question-section h1,
.comprehensive-word-content .exercise-question-section h1{
	padding-left: 0.3em;
}

.basic-level-content .exercise-question-section h4,
.comprehensive-word-content .exercise-question-section h4{
	word-spacing: 0.3em;
}

.basic-level-content .choices, .comprehensive-word-content .choices{
	padding-top: 0px;
}

.warmup #next-button-container, .basic-level-content #next-button-container,
.medium-level-content #next-button-container, .comprehensive-word-content #next-button-container{
	/*bottom: 50px;*/
	margin-bottom: 50px;
}

@media (max-width: 1024px){
	.basic-level-content .question-speaker-button, .comprehensive-word-content .question-speaker-button{
		left: 62%;
	}
}

/*==================*/
/*	High Level
/*==================*/
.high-level-content .choice .flex-col{
	height: auto;
}

.high-level-content .choices{
	padding-top: 10px;
	padding-bottom: 30px;
	width: 60%;
}

.high-level-content .flex1.choice{
	padding-left: 40px;
	padding-right: 40px;
}

.high-level-content .choice .option-button{
	width: 100%;
	height: 100%:
}

.high-level-content .choice img{
	width: 100%;
	margin-top: 30px;
}

.high-level-content .choices .option{
	padding-left: 10px;
	padding-right: 10px;
}

.high-level-content .exercise-question-section .bg-speaker{
	width: 70%;
	padding-top: 70%;
	margin: auto;
}

.high-level-content #next-button-container{
	margin-top: -80px;
}

@media (max-width: 991px){
	.high-level-content .choices{
		width: 70%;
	}

	.high-level-content .flex1.choice{
		padding-left: 30px;
		padding-right: 30px;
	}

	.high-level-content #next-button-container{
		right: 6%;
		bottom: 10%;
	}
}

@media (min-width: 992px) and (max-width: 1024px){
	.high-level-content .choices{
		width: 65%;
	}

	.high-level-content .flex1.choice{
		padding-left: 30px;
		padding-right: 30px;
	}

	.high-level-content #next-button-container{
		margin-left: 30px;
	}
}

@media (min-width: 1025px) and (max-width: 1300px){
	.high-level-content .exercise-question-section .bg-speaker{
		width: 70px;
		height: 70px;
		padding-top: 0%;
	}
}

/*=======================*/
/*	Comprehensive Word
/*=======================*/

.comprehensive-word-content .bg-bubble{
	padding-left: 40px;
}

@media (max-width: 991px){
	.comprehensive-word-content .bg-bubble{
		padding-left: 30px;
	}
}

.result-section-table{
	padding-top: 4%;
	padding-bottom: 4%;
	padding-left: 14%;
	padding-right: 14%;
}

.result-section-table table{
	width: 100%;
}

.result-section-table .question-word, .result-section-table .symbols-word{
	margin-left: 0.05em;
	margin-right: 0.05em;
}

.result-section-table .question-number-column{
	width: 2.5em;
}

.result-section-table th, .result-section-table .choice-column{
	line-height: 2.0em;
	padding: 0.5em;
}

.result-section-table .choice-column .tick-image img{
	width: 2.4rem;
	margin-top: 0.2em;
	margin-left: -2.4em;
	margin-right: -0.5em;
	vertical-align: middle;
}

.result-section-table .choice-column .cross-image img{
	width: 2.0rem;
	margin-left: -2.0em;
	vertical-align: middle;
}

.result-section-table .choice-column .cross-image{
	margin-left: -0.5em !important;
	margin-right: 0.5em !important;
}

.result-section-table .choice-column .tick-image{
	margin-left: -0.5em !important;
	margin-right: 0.5em !important;
}

.result-section-table .choice-column{
	vertical-align: middle;
}

.result-section-table .cantonese-info-button{
	/*font-size: 2.0rem;*/
	font-size: 1.5rem;
	margin-top: 1.5em;
}

.result-section-table .cantonese-info-buttons .cantonese-info-button button{
	height: 3.4em;
}

.result-section-table .cantonese-info-button button{
	padding-left: 0.7em;
	padding-right: 0.7em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	font-weight: 300;
}

.result-section-table .cantonese-info-buttons .cantonese-info-button button{
	width: 90%;
}

@media (max-width: 991px){
	.result-section-table .cantonese-info-buttons .cantonese-info-button{
		font-size: 1.2rem;
	}
}

/*=======================*/
/*	Comprehensive Word
/*=======================*/

.comprehensive-sentence-content .exercise-question-section h1{
	max-width: 28%;
	margin-top: 70px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.6em;
	line-height: 1.4em;
}

.comprehensive-sentence-content .exercise-question-section h4{
	padding-top: 0.5em;
	margin-bottom: 0em;
}

.comprehensive-sentence-content .question-speaker-button{
	bottom: 0px;
	left: 65%;
}

.comprehensive-sentence-content .exercise-question-section .choices{
	width: 45%;
}

.comprehensive-sentence-content .exercise-question-section .bg-bubble{
	width: 120px;
	height: 120px;
	margin-right: 0px;
	padding-left: 20px;
}

.comprehensive-sentence-content .exercies-question-section .tick-image{
	width: 2.0em;
	bottom: 0px;
}

.comprehensive-sentence-content .tick-image{
	right: 6%;
	bottom: 6%;
	max-width: 35%;
}

.comprehensive-sentence-content .cross-image{
	right: 10%;
	bottom: 10%;
	max-width: 22%;
}

@media (max-width: 1024px){
	.comprehensive-sentence-content .exercise-question-section h1{
		max-width: 42%;
	}

	.comprehensive-sentence-content .question-speaker-button{
		left: 74%;
	}

	.comprehensive-sentence-content .exercise-question-section .choices{
		width: 60%;
	}

	.comprehensive-sentence-content .exercise-question-section .bg-bubble{
		width: 120px;
		height: 120px;
		margin-right: 0px;
		padding-left: 25px;
	}

	.comprehensive-sentence-content .tick-image{
		right: 2%;
		bottom: 6%;
		max-width: 35%;
	}

	.comprehensive-sentence-content .cross-image{
		right: 6%;
		bottom: 10%;
		max-width: 24%;
	}
}

.comprehensive-sentence-content .result-section-table .question-column{
	padding: 0.5em;
	max-width: 250px;
}

.comprehensive-sentence-content .result-section-table .choice-column{
	min-width: 8.0em;
}

.comprehensive-sentence-content .result-section-table .answer-column,
.comprehensive-sentence-content .result-section-table .symbols-column{
	min-width: 6.0em;
}

@media (min-width: 1025px) and (max-width: 1300px){
	.comprehensive-sentence-content .exercise-question-section h1{
		max-width: 35%;
	}

	.comprehensive-sentence-content .question-speaker-button{
		left: 70%;
	}
}

/*=======================*/
/*	Group Selection
/*=======================*/

.group-selection-content{
	width: 70%;
}

.group-selection-content h1{
	margin-bottom: 80px;
}

.group-selection-content .group-section{
	margin-bottom: 10px;
}

.group-selection-content h2{
	font-size: 1.4em;
	padding-top: 40%;
}

.group-selection-content .group{
	padding-left: 20px;
	padding-right: 20px;
}

.group-selection-content .group h4{
	font-size: 1.0em;
	margin-top: 20px;
}

@media (max-width: 991px){
	.group-selection-content h1{
		margin-bottom: 0px;
	}

	.group-selection-content h2{
		padding-top: 60px;
		padding-bottom: 40px;
		font-size: 1.2em;
	}
}

/*==================*/
/*	Cantonese Intro
/*==================*/
.cantonese-intro-content{
	width: 51%;
}

.cantonese-intro-content h1, .sound-content h1{
	margin-bottom: 0.8em;
}

.cantonese-intro-content h2, .sound-content h2{
	margin-top: 0em;
	margin-bottom: 0.9em;
	font-size: 1.15em;
}

.cantonese-intro-content p, .sound-content p{
	margin-bottom: 1.5em;
}

.cantonese-intro-content .section2, .cantonese-intro-content .section3,
.cantonese-intro-content .section4, .cantonese-intro-content .section5{
	margin-top: 3.0em;
	margin-bottom: 3.0em;
}

.cantonese-intro-content .section2 h2{
	margin-bottom: 1.5em;
}

.cantonese-intro-content table, .sound-content table{
	width: 100%;
	font-size: 1.0em;
}

.cantonese-intro-content .intro-table td span{
	line-height: 1.6em;
}

.cantonese-intro-content .intro-table td,
.cantonese-intro-content .ending-sound-table th,
.cantonese-intro-content .ending-sound-table td,
.cantonese-intro-content .tone-table th,
.cantonese-intro-content .tone-table th,
.sound-content table td{
	padding-top: 0.7em;
	padding-bottom: 0.7em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	vertical-align: top;
	line-height: 1.4em;
}

.cantonese-intro-content .intro-table .starting-sound-column{
	min-width: 250px;
}

.cantonese-intro-content .text{
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

.cantonese-intro-content .example-table .bg-bubble,
.cantonese-intro-content .starting-sound-table .example-column .bg-bubble,
.cantonese-intro-content .ending-sound-table .bg-bubble,
.cantonese-intro-content .tone-table .bg-bubble,
.sound-content table .bg-bubble{
	width: 3.5em;
	height: 3.5em;
	margin: 0px;
	margin-left: 0.5em;
	font-family: 'Noto Sans'
}

.cantonese-intro-content .example-table td,
.cantonese-intro-content .starting-sound-table td,
.cantonese-intro-content .ending-sound-table td,
.sound-content table td{
	padding-top: 0px;
	padding-bottom: 0px;
	vertical-align: middle;
}

.cantonese-intro-content .example-table td button,
.cantonese-intro-content .starting-sound-table .example-column button,
.cantonese-intro-content .ending-sound-table button,
.cantonese-intro-content .tone-table button,
.sound-content table button{
	vertical-align: middle;
	font-size: 0.8em;
	padding-left: 0.5em;
	padding-bottom: 0.2em;
	cursor: pointer;
}

.cantonese-intro-content .ending-sound-table .long-symbol,
.sound-content table .long-symbol{
	padding-left: 0px;
}

.cantonese-intro-content .starting-sound-table td,
.cantonese-intro-content .ending-sound-table td
.cantonese-intro-content .tone-table td,
.sound-content table td{
	font-size: 0.9em;
}

.cantonese-intro-content .starting-sound-table .example-column button,
.cantonese-intro-content .ending-sound-table button,
.cantonese-intro-content .tone-table button,
.sound-content table button{
	font-size: 0.75em;
	padding-bottom: 0em;
}

.cantonese-intro-content .starting-sound-table .example-column .bg-bubble,
.cantonese-intro-content .ending-sound-table .bg-bubble,
.cantonese-intro-content .tone-table .bg-bubble,
.sound-content table .bg-bubble{
	width: 3.7em;
	height: 3.7em;
}

.cantonese-intro-content .starting-sound-table .starting-sound-column,
.cantonese-intro-content .starting-sound-table .national-symbol-column,
.cantonese-intro-content .starting-sound-table .example-column{
	width: 24%;
}

.cantonese-intro-content .section3 .annotation, .cantonese-intro-content .section4 .annotation{
	font-size: 0.6em;
	margin-top: 0.5em;
}

.cantonese-intro-content .ending-sound-table, .cantonese-intro-content .tone-table{
	display: table;
	table-layout: fixed;
}

@media (max-width: 1024px){
	.cantonese-intro-content .intro-table .starting-sound-column{
		min-width: 150px;
	}
}

/*==================*/
/*	Common Problems
/*==================*/
.sound-content img{
	/*padding: 10%;*/
	padding-top: 10%;
	padding-right: 20%;
	padding-bottom: 10%;
}

.sound-content .last-paragraph{
	margin-bottom: 0.3em;
}

.sound-content .bg-speaker{
	right: 10%;
	bottom: 10%;
	height: 20%;
	padding-left: 10%;
	padding-right: 10%;
}

.sound-content .caption{
	font-size: 0.95em;
	padding-left: 0.3em;
	padding-right: 0.3em;
}

.sound-content .table-description{
	margin-top: 1.5em;
	margin-bottom: 0.7em;
}

.sound-content table .bg-bubble{
	width: 4.0em;
	height: 4.0em;
	white-space: nowrap;
	line-height: 1.2em;
}

.sound-content .level{
	position: relative;
	width: 100%;
	max-width: 65%;
	margin: auto;
}

.sound-content .level button{
	width: 100%;
	padding-top: 25%;
	padding-bottom: 25%;
	font-size: 1.7em;
	font-weight: 300;
	white-space: nowrap;
}

@media (max-width: 1024px){
	.sound-content .level button{
		font-size: 1.4em;
	}
}

.sound-content .practice-buttons{
	margin-top: 2.0em;
}

.cantonese-intro-content .practice-buttons{
	margin-top: 1.3em;
}

.practice-content .practice-buttons{
	margin-top: 1.5em;
}

.practice-content .practice-buttons{
	width: 72%;
	margin-bottom: 1.3em;
	margin-left: auto;
	margin-right: auto;
}

.sound-content .practice-button,
.cantonese-intro-content .practice-button,
.practice-content .practice-button{
	/*font-size: 2.2rem;*/
	font-size: 1.8rem;
}

.sound-content .practice-button button,
.cantonese-intro-content .practice-button button,
.practice-content .practice-button button{
	/*padding-left: 0.6em;
	padding-right: 0.6em;
	padding-top: 0.3em;
	padding-bottom: 0.3em;*/
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.8em;
	padding-right: 0.8em;
	font-weight: 300;
}

.sound-content .practice-button.text-left,
.practice-content .practice-button.text-left{
	padding-right: 1.0em;
}

.sound-content .practice-button.text-left button,
.practice-content .practice-button.text-left button{
	width: 100%;
}

.sound-content .practice-button.text-center,
.practice-content .practice-button.text-center{
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.sound-content .practice-button.text-center button,
.practice-content .practice-button.text-center button{
	width: 100%;
}

.sound-content .practice-button.text-right,
.practice-content .practice-button.text-right{
	padding-left: 1.0em;
}

.sound-content .practice-button.text-right button,
.practice-content .practice-button.text-right button{
	width: 100%;
}

.sound-content .top-buttons{
	margin-top: 6em;
	margin-bottom: 10em;
}

.sound-content .top-buttons img{
	padding-left: 20%;
	padding-right: 20%;
}

.sound-content .top-buttons h4{
	font-size: 1.0em;
}

.sound-content .question-number-column{
	max-width: 1.8em;
}

.sound-content table th{
	font-size: 0.9em;
}

.sound-content .section2, .sound-content .section3{
	margin-top: 9.5em;
}

@media (max-width: 1024px){
	.sound-content .practice-button{
		font-size: 1.2em;
	}

	.practice-content .practice-button{
		font-size: 1.6em;
	}
}

/*==================*/
/*	Feddback
/*==================*/
.feedback-content{
	min-height: 88%;
	font-size: 1.2em;
}

.feedback-content .bg-feedback-left, .feedback-content .bg-feedback-right{
	width: 30%;
	height: 100%;
}

.feedback-content .bg-feedback-left{
	bottom: 0px;
}

.feedback-content .bg-feedback-right{
	height: 80%;
}

.feedback-content .flex-col{
	height: auto;
}

.feedback-content .feedback-message{
	/*padding-top: 10%;
	padding-left: 1%;*/
	font-size: 1.1em;
	padding-top: 21vh;
	padding-left: 2%;
}

.feedback-content .bg-feedback-right{
	right: 4%;
	top: 10%;
}

.feedback-content .feedback-form{
	width: 50%;
	margin: auto;
}

.feedback-content .feedback-form h1{
	margin-top: 20px;
}

.feedback-content .feedback-form label{
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

.feedback-content .feedback-form select{
	width: 40%;
	margin: auto;
	margin-bottom: 2.0em;
	text-align-last: center;
}

.feedback-content .feedback-form textarea{
	width: 70%;
	margin: auto;
}

.feedback-content .submit-button{
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin-bottom: 1.0em;
}

.feedback-content .submit-button button{
	font-size: 1.6em;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	padding-left: 1.5em;
	padding-right: 1.5em;
}

@media (max-width: 991px){
	.feedback-content .feedback-message{
		padding-top: 30vh;
		font-size: 0.9em;
	}
}

@media(min-width: 992px) and (max-width: 1366px){
	.feedback-content .feedback-message{
		padding-top: 22vh;
	}
}

/*==================*/
/*	Report
/*==================*/
.report{
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: 50px;
}

.report h1{
	font-size: 1.6em;
	padding-top: 2.0em;
	padding-bottom: 0.2em;
}

.report table{
	width: 100% !important;
}

.report table th{
	border: 1px solid #000000;
	max-width: 100%;
}

.report table td{
	padding-left: 0.5em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	border: 1px solid #626262;
}

.report table td button{
	padding: 0px;
}