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

/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans:200,400,400i,700,700i');*/
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
/*@import url('../font/華康標楷體.ttc');

@font-face{
	font-family: '華康標楷體';
	src: url('../font/華康標楷體.ttc') format('OpenType');
}*/

@font-face{
	font-family: 'Avenir Next';
	src: url('../font/AvenirNext-Regular.eot');
	src: url('../font/AvenirNext-Regular.woff');
	src: url('../font/AvenirNext-Regular.ttf');
	src: url('../font/AvenirNext-DemiBold.eot');
	src: url('../font/AvenirNext-DemiBold.woff');
	src: url('../font/AvenirNext-DemiBold.ttf');
}

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

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

button:focus{
	outline: 0;
}

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

button:disabled{
	cursor: default;
}

img{
	width: 100%;
}

strong{
	font-weight: 900;
}

.notofont {
	font-family: 'Noto Sans';
	font-weight: bold;
}

.start-button {
	background-color: rgb(255, 249, 222);
	height: auto;
	font-size: 1.5em;
}

.gray{
	/*color: rgb(140, 144, 144) !important;*/
	color: #393939;
}

.black-gray{
	color: #2A2A2A;
}

.dark-gray{
	color: #333B34;
}

.light-gray{
	color: #AAAAAA !important;
}

.blue{
	color: #27D5D2;
}

.red{
	color: #C32D2D;
}

.white{
	color: #FFFFFF !important;
}

.creamy-white{
	color: rgb(255, 249, 222);
}

.black{
	color: #000000;
}

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

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

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

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

.bg-light-green{
	background-color: #B6C4A1;
}

.bg-light-blue{
	background-color: rgba(162, 186, 196, 0.5);
}

.bg-gray{
	background-color: rgb(140, 144, 144);
}

.bg-dark-gray-50{
	background-color: rgba(51, 59, 52, 0.5);
}

.bg-dark-gray{
	background-color: rgba(51, 59, 52, 0.5);
}

.bg-creamy-white{
	background-color: rgb(255, 249, 222);
}

.bg-creamy-white-50{
	background-color: rgba(255, 249, 222, 0.5);
}

.bg-black{
	background-color: #000000;
}

.bg-black-50{
	background-color: rgba(0, 0, 0, 0.5);
}

.bg-black-80{
	background-color: rgba(0, 0, 0, 0.8);
}

.bg06{
	background-image: url('../image/bg06.jpg');
	background-repeat: repeat;
}

.bg06-07{
	background-image: url('../image/bg07.png'), url('../image/bg06.jpg');
	background-repeat: no-repeat, repeat;
	background-size: 88% auto, auto auto;
	background-position: center bottom 20%, left top;
}

@media (max-width: 991px){
	.bg06-07{
		background-image: url('../image/bg14.png'), url('../image/bg06.jpg');
		background-repeat: no-repeat, repeat;
		background-size: 40% auto, auto auto;
		background-position: right 10% bottom 20%, left top;
	}
}

.bg06-15{
	background-image: url('../image/bg15.png'), url('../image/bg06.jpg');
	background-repeat: no-repeat, repeat;
	background-size: 100% auto, auto auto;
	background-position: right 8% bottom, left top;
}

.bg06-16{
	background-image: url('../image/bg16.png'), url('../image/bg06.jpg');
	background-repeat: no-repeat, repeat;
	background-size: auto 80%, auto auto;
	background-position: right 14% bottom 30%, left top;
}

.bg06-baby{
	background-image: url('../image/bg_baby.png'), url('../image/bg06.jpg');
	background-repeat: no-repeat, repeat;
	background-size: auto 80%, auto auto;
	background-position: right 14% bottom 30%, left top;
}

.bg06-kindergarden{
	background-image: url('../image/bg_kindergarden.png'), url('../image/bg06.jpg');
	background-repeat: no-repeat, repeat;
	background-size: auto 80%, auto auto;
	background-position: right 14% bottom 30%, left top;
}

.bg06-primary{
	background-image: url('../image/bg_primary.png'), url('../image/bg06.jpg');
	background-repeat: no-repeat, repeat;
	background-size: auto 80%, auto auto;
	background-position: right 14% bottom 30%, left top;
}

.bg06-secondary{
	background-image: url('../image/bg_secondary.png'), url('../image/bg06.jpg');
	background-repeat: no-repeat, repeat;
	background-size: auto 80%, auto auto;
	background-position: right 14% bottom 30%, left top;
}

.bg06-high-school{
	background-image: url('../image/bg_high_school.png'), url('../image/bg06.jpg');
	background-repeat: no-repeat, repeat;
	background-size: auto 80%, auto auto;
	background-position: right 14% bottom 30%, left top;
}

.bg06-bachelor{
	background-image: url('../image/bg_bachelor.png'), url('../image/bg06.jpg');
	background-repeat: no-repeat, repeat;
	background-size: auto 80%, auto auto;
	background-position: right 14% bottom 30%, left top;
}

.bg06-master{
	background-image: url('../image/bg_master.png'), url('../image/bg06.jpg');
	background-repeat: no-repeat, repeat;
	background-size: auto 80%, auto auto;
	background-position: right 14% bottom 30%, left top;
}

.bg06-doctor{
	background-image: url('../image/bg_doctor.png'), url('../image/bg06.jpg');
	background-repeat: no-repeat, repeat;
	background-size: auto 80%, auto auto;
	background-position: right 14% bottom 30%, left top;
}

.bg08{
	background-image: url('../image/bg08.jpg');
	background-repeat: repeat;
}

.bg09{
	background-image: url('../image/bg09.jpg');
	background-repeat: repeat;
	background-position: left top;
	background-size: auto auto;
}

.bg10{
	background-image: url('../image/bg10.png');
	background-repeat: no-repeat;
	background-position: left 8% bottom 0%;
	background-size: auto auto;
}

.bg11{
	background-image: url('../image/bg11.png');
	background-repeat: no-repeat;
	background-position: right 0% bottom 0%;
	background-size: auto auto;
}

.bg-book01-1{
	background-image: url('../image/book01_1.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-book01-2{
	background: url('../image/book01_2.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-book02-1{
	background-image: url('../image/book02_1.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-book02-2{
	background: url('../image/book02_2.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-book03-1{
	background-image: url('../image/book03_1.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-book03-2{
	background: url('../image/book03_2.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-bookcover-1{
	background-image: url('../image/bookcover-40.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-bookcover-2{
	background-image: url('../image/bookcover-41.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-bookcover-3{
	background-image: url('../image/bookcover-39.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-bookcover-4{
	background-image: url('../image/bookcover-42.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-memo{
	background-image: url('../image/bookcover-43.png');
	background-repeat: repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-memo-1{
	background-image: url('../image/bookcover-44.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-memo-2{
	background-image: url('../image/bookcover-45.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-memo-3{
	background-image: url('../image/bookcover-46.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;
}

.bg-option{
	background-image: url('../image/circle_option.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
}

.bg-option-correct{
	background-image: url('../image/circle_option_correct.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
}

.bg-bookmarker01{
	background-image: url('../image/bg_bookmarker01.png');
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: auto auto;
	margin-bottom: 1.1%;
}

.bg-bookmarker02{
	background-image: url('../image/bg_bookmarker02.png');
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: auto auto;
	margin-bottom: 1.1%;
}

.bg-bookmarker03{
	background-image: url('../image/bg_bookmarker03.png');
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: auto auto;
	margin-bottom: 1.1%;
}

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

.bg-feedback-submitted{
	background-image: url('../image/bg_feedback_sent.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 100%;
}

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

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

.light{
	font-weight: 300;
}

.normal{
	font-weight: 400;
}

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

.bold{
	font-weight: 700;
}

.font-sm{
	font-size: 0.8em;
	line-height: 1.0em;
}

.font-1-1{
	font-size: 1.1em;
	line-height: 1.0em;
}

.font-lg{
	font-size: 1.5em;
	line-height: 1.0em;
}

.font-xl{
	font-size: 1.8em;
	line-height: 1.0em;
}


/*==================*/
/*	Letter spacing
/*==================*/
.letter-spacing-01{
	letter-spacing: 0.1em;
}

.letter-spacing-02{
	letter-spacing: 0.2em;
}

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

.letter-spacing-04{
	letter-spacing: 0.4em;
}

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

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

.unselectable{
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
	                      supported by Chrome and Opera */
}

/*==================*/
/*	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;
}

.padding-left-16{
	padding-left:16px;
}

.padding-right-16{
	padding-right: 16px;
}

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

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

/*==================*/
/*	Border
/*==================*/
.no-border{
	border: none;
}

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

.border-white-1{
	border: 1px solid #FFFFFF;
}

.border-white-4{
	border: 4px solid #FFFFFF;
}

.border-creamy-white-3{
	border: 3px solid rgb(255, 249, 222);
}

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

/*==================*/
/*	Float
/*==================*/
.float-left{
	float: left;
}

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

.flex-col{
	display: flex;
	flex-direction: column;
}

.flex-row{
	display: flex;
	flex-direction: row;
}

.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){
	.landscape-only{
		display: block;
	}

	.portrait-only{
		display: none;
	}
}

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

	.landscape-only{
		display: none;
	}
}

/*==================*/
/*	Animation
/*==================*/

.fade-in{
	opacity: 1.0;
	transition: opacity 1s linear;
}

.fade-out{
	opacity: 0;
	transition: opacity 1s linear;
}

/*==================*/
/*	Navbar
/*==================*/
.navbar{
	/*background-color: rgba(51, 59, 52, 0.6);*/
}

.navbar-nav .show{
	background-color: inherit;
}

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

.navbar-toggler{
	border: none;
}

.navbar-light .navbar-brand{
	color: inherit;
}

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

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

.nav-item{
	margin-left: 16px;
	margin-right: 16px;
	font-size: 1.1em;
}

.dropdown-menu{
	border: none;

	left: -8px;
	min-width: 0em;
}

.nav-link{
	padding-left: 0px !important;
	padding-right: 0px !important;
	padding-bottom: 4px;
	/*color: rgba(255, 255, 255, 0.6);*/
	color: #666666;
	font-weight: 400;
}

.navbar-collapse .show .dropdown-item{
	/*color: rgba(255, 255, 255, 0.6);*/
	color: #666666;
	background-color: transparent !important;
	padding-bottom: 4px;
	font-weight: 300;
}

.dropdown-item:hover{
	color: black !important;
}

@media (min-width: 992px) {
	.nav-item{
		border-bottom: 2px solid transparent !important;
	}

	.nav-item.active{
		border-bottom: 2px solid #666666 !important;
	}

	.dropdown-menu{
		background-color: rgba(255, 252, 239, 0.8) !important;
		margin-top: 30px;

		left: 50%;
		padding-left: 30px;
		padding-right: 30px;

		-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{
		background-color: transparent !important;
		text-align: center;
	}
}

@media screen and (max-width: 991px) and (orientation:portrait){
	.navbar, .dropdown-item{
		/*background-color: rgba(140, 144, 144) !important;*/
		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;
	}
}

/*==================*/
/*	Home
/*==================*/
.index .section1{
	height: 650px;
	padding-top: 8%;
	padding-left: 6%;
	font-size: 1.2em;
}

.index h1{
	font-size: 3.0rem;
	line-height: 1.5em;
}

.index .section1 p{
	margin-top: 3.5%;
}

.index .section1 button{
	padding-left: 2.2em;
	padding-right: 2.2em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin-top: 1%;
	margin-left: -0.2em;
}

.index .section2{
	padding-top: 10%;
	padding-bottom: 7%;
	padding-left: 6%;
	padding-right: 6%;
	font-size: 1.2em;
}

.index .section2-text{
	padding-right: 4%;
}

.index .section2-text strong{
	font-weight: 900;
}

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

.index .section2 button, .index .section3 button{
	white-space: nowrap;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 50px;
	padding-right: 50px;
	height: auto;
}

.index .section2 .icons button{
	width: 100%;
	padding: 5%;
}

.index .section2-text-annotation{
	margin-top: 1.0em;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 8px;
	padding-right: 8px;
	line-height: 1.2em;
}

.index .section2 .icons{
	padding-left: 2%;
}

.index .section2 .icon{
	display: inline-block;
	width: 23%;
	padding-left: 6px;
	padding-right: 6px;
}

.index .section2 .icon-placeholder{
	display: block;
}

.index .section2 .icon-simplified{
	margin-left: 5%;
}

.index .section2 .icon-title{
	margin-top: 2%;
	margin-bottom: 20%;
	padding-left: 0.5em;
	font-size: 0.8em;
	white-space: nowrap;
}

.index .section2 .icon-placeholder{
	opacity: 1;
}

.index .section2 p{
	padding-top: 10%;
}

.index .bg10{
	pointer-events: none;
	width: 100%;
	height: 276px;
	bottom: 0px;
	left: 0px;
}

.index .bg11{
	pointer-events: none;
	width: 100%;
	height: 250px;
	bottom: -220px;
	right: 0px;
}

.index .section3{
	min-height: 216px;
	font-size: 1.2em;
}

.index .section3 h1, .index .section3-video-button, .index .section4 h1{
	margin: auto;
}

.index .section3 h1{
	padding-right: 6%;
}

.index .section3-video-button{
	margin: auto;
}

.index .section3-text{
	/*padding-right: 16%;*/
	padding-right: 4%;
}

.index .section4{
	min-height: 250px;
	padding-left: 7%;
	padding-right: 7%;
	padding-top: 3%;
	padding-bottom: 3%;
	font-size: 1.2em;
}

.index .section4 p{
	margin: auto;
	padding-top: 1.5%;
}

.index .section4 button, .instagram-content button{
	margin-top: 5%;
	padding-left: 36px;
	padding-right: 36px;
	padding-top: 18px;
	padding-bottom: 18px;
}

.index .section4 button img, .instagram-content button img{
	width: auto;
	margin-top: -0.2em;
	margin-right: 0.6em;
}


.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: 70px;
	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 (min-width: 992px){
	.index .section4.bg06-15{
		background-image: url('../image/bg06.jpg');
		background-repeat: repeat;
		background-size: auto auto;
	}
}

@media (max-width: 991px){
	.index{
		font-size: 2.3em;
	}

	.index h1{
		/*font-size: 4.8rem;*/
		font-size: 7.0rem;
	}

	.index .section1{
		height: calc(680px + 100vw);
		padding-left: 8%;
		padding-right: 8%;
	}

	.index .section1-content{
		max-width: 70%;
	}

	.index .section1 p{
		margin-top: 6.0rem;
		margin-bottom: 2.0rem;
	}

	.index .section1 button, .index .section2 button{
		padding-left: 0.7em;
		padding-right: 0.7em;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		margin-top: 1%;
		font-size: 0.95em;
	}

	.index .section2{
		padding-left: 8%;
		padding-right: 8%;
	}

	.index .section2 h1{
		letter-spacing: 0.47em;
	}

	.index .section2-text{
		padding: 0px;
	}

	.index .section2 p, .index .section4 p{
		padding-top: 6%;
	}

	.index .section2-button{
		margin-top: 1.0em;
	}

	.index .section2 .icons{
		padding-left: 0px;
		margin-top: 8%;
	}

	.index .section2 .icon{
		width: 48%;
	}

	.index .section2 .icon-title{
		font-size: 1.2em;
	}

	.index .section2 .icon-break{
		display: none;
	}

	.index .section2 .icon-simplified{
		margin: 0px;
	}

	.index .section2 .col-xs-0,  .index .section2 .col-md-0{
		width: 0px;
		height: 0px;
		display: none;
	}

	.index .section3{
		min-height: 600px;
	}

	.index .bg10{
		height: 530px;
		background-position: left -260px bottom 0px;
		background-size: auto 100%;
	}

	.index .section3-text{
		padding: 0px;
		padding-top: 6%;
		text-align: right;
		z-index: 1;
	}

	.index .section3 h1{
		white-space: nowrap;
		margin-bottom: 1.5rem;
		padding-right: calc(8% - 3.5rem);
	}

	.index .section3-video-button{
		padding-right: 8%;
	}

	.index .section3 button{
		padding-left: 2.6em;
		padding-right: 2.6em;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		margin-top: 1%;
		font-size: 0.95em;
	}

	.index .bg11{
		display: none;
	}

	.index .section4{
		padding-top: 16%;
		padding-left: 8%;
		padding-right: 6%;
		padding-bottom: 90%;
		background-size: 85%;
		background-position: right 50% bottom 8%, left top;
	}

	.index .section4 h1{
		letter-spacing: 0.47em;
	}

	.index .section4 p{
		padding-right: 4%;
	}

	.index .section4 h1 br{
		display: none;
	}

	.index .section4 button img{
		width: 1.0em;
		margin-right: 0.9em;
	}

}

/*==================*/
/*	Words
/*==================*/
.video-page{
	display: none;
	z-index: 999;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

.video-container{
	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%);
}

.video-container video, .video-container iframe{
	width: 800px;
	height: 450px;
	background-color: transparent;
}

@media (max-width: 800px){
	.video-container{
		width: 80%;
	}

	.video-container video, .video-container iframe{
		width: 100%;
		height: 56vw;
	}
}

.video-close-button{
	position: fixed;
	top: -10px;
	right: -50px;
	width: 5%;
	height: 5%;
	min-width: 40px;
	min-height: 40px;
}

/*==================*/
/*	Initiation
/*==================*/
.initiation{
	background-image: url('../image/bg12.png'), url('../image/bg13.png'), url('../image/bg08.jpg');
	background-repeat: no-repeat, no-repeat, repeat;
	background-position: right 271px bottom 0%, right 20px bottom 0%, left top;
	background-size: auto auto, auto auto, auto auto;
	min-height: 768px;
}

.initiation-content{
	position: relative;
	padding-top: 4%;
	padding-left: 6%;
	padding-bottom: 4%;
	font-size: 1.2em;
}

.initiation h1{
	font-size: 3.0rem;
	margin-bottom: 40px;
}

.initiation-content-intro{
	padding-right: 6%;
}

.initiation-content-intro p, .initiation-content-staff-list p{
	margin-bottom: 0px;
}

@media (min-width: 992px) and (max-width: 1300px){
	.initiation-content-intro, .initiation-content-staff-list{
		padding-bottom: 200px;
	}
}

@media (max-width: 991px){
	.initiation{
		background-image: url('../image/bg12.png'), url('../image/bg08.jpg');
		background-repeat: no-repeat, repeat;
		background-position: left 6% bottom 0%, left top;
	}

	.initiation-content h1{
		font-size: 4.8rem;
	}

	.initiation-content{
		font-size: 1.8em;
		padding-top: 6%;
		padding-left: 8%;
		padding-right: 8%;
	}

	.initiation-content-intro{
		padding-right: 0px;
	}

	.initiation-content-staff-list{
		margin-top: 1.8em;
		padding-bottom: 300px;
	}

	.index .section5 .sponser-title, .index .section5 .department-title{
		text-align: center;
		margin: auto;
		font-size: 0.5em;
	}
}

/*==================*/
/*	Warmup Quiz
/*==================*/
.warmup, .game-one, .game-two, .game-three, .article-section{
	background: url('../image/wood.jpg');
	background-repeat: repeat-y;
	background-position: left top;
	background-size: 100% auto;
}

.warmup-content, .game-one-content, .game-two-content, .game-three-content,
.article-section-content{
	min-height: 82vh;
	padding-top: 30px;
}

.warmup-instruction, .warmup-question, .game-one-instruction{
	padding-top: 5%;
	padding-left: 4%;
}

.warmup-question{
	padding-right: 13%;
}

.warmup .option{
	padding-top: 65%;
	width: 65%;
	margin: auto;
}

.warmup .option button{
	width: 100%;
	height: 100%;
}

.warmup-question .question-text{
	top: 50%;
	left: 50%;
	/*padding-left: 0.4em;*/
	margin: auto;
	font-size: 2.6em;
	/*max-width: 80%;*/
	width: 100%;
	height: 100%;
	white-space: nowrap;

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

.warmup-question .option1 .question-text{
	padding-left: 0.3em;
}

.warmup-question .option2 .question-text{
	padding-left: 0.2em;
}

.warmup-question .inline-svg{
	width: 1.0em;
	padding-bottom: 0.25em;
}

.warmup-question .question-text.three-words{
	/*margin-left: -0.3em;*/
}

.warmup-question .question-text.four-words{
	/*margin-left: -1.0em;*/
	padding-left: 0em;
}

.warmup-question .options{
	position: relative;
	margin-top: 30%;

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

.warmup-question .options .tick-image, .warmup-question .options .cross-image,
.game-one .option .tick-image, .game-one .option .cross-image{
	width: 50%;
	height: auto;
	bottom: -5%;
	right: -1%;
}

.warmup-question .options .cross-image, .game-one .option .cross-image{
	width: 40%;
	bottom: -6%;
	right: 6%;
}

.warmup .result-content, .game-one .result-content, .game-two .result-content, .game-three .result-content{
	min-height: 90vh;
	padding-right: 20%;
}

.warmup .result-content .flex-col, .game-one .result-content .flex-col, .game-two .result-content .flex-col,
.game-three .result-content .flex-col{
	height: 100%;
}

.warmup .result-content-text, .game-one .result-content-text, .game-two .result-content-text,
.game-three .result-content-text{
	margin: auto;
	font-size: 2.2em;
	padding-bottom: 1.0em;
}

.warmup .result-content-text h1, .game-one .result-content-text h1, .game-two .result-content-text h1,
.game-three .result-content-text h1{
	font-size: 3.6rem;
	line-height: 1.5em;
}

.warmup .result-content-text p, .game-one .result-content-text p, .game-two .result-content-text p,
.game-three .result-content-text p{
	vertical-align: bottom !important;
}

.warmup .result-content-text .result-score,
.game-one .result-content-text .result-score,
.game-two .result-content-text .result-score,
.game-three .result-content-text .result-score{
	font-family: 'Avenir Next', 'Noto Sans', Arial, sans-serif;
	font-size: 11.0rem;
	font-weight: 400;
	line-height: 0.9em;
	vertical-align: top;
	margin-left: 0.05em;
}

.warmup .result-content-text .result-class-text,
.game-one .result-content-text .result-class-text,
.game-two .result-content.text .result-class-text,
.game-three .result-content.text .result-class-text{
	margin-top: 1.0em;
}

.warmup .result-content-text .result-class,
.game-one .result-content-text .result-class,
.game-two .result-content-text .result-class,
.game-three .result-content-text .result-class{
	font-size: 3.6rem;
	padding-left: 0.4em;
	padding-right: 0em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	margin-left: 0.3em;
}

@media (min-width: 1025px) and (max-width: 1300px){
	.warmup-question .question-text.three-words{
		/*margin-left: -0.5em;*/
	}

	.warmup-question .question-text.four-words{
		/*margin-left: -1.2em;*/
	}
}

@media (min-width: 992px) and (max-width: 1024px){
	.warmup-question .question-text.three-words{
		/*margin-left: -0.85em;*/
		padding-right: 160px;
	}

	.warmup-question .question-text.four-words{
		/*margin-left: -1.4em;*/
		padding-right: 200px;
	}
}


@media screen and (orientation:landscape) and (max-width: 991px){
	.warmup-content, .game-one-content, .game-two-content{
		min-height: 75vh;
		padding-top: 20px;
	}

	.warmup-question .question-text{
		font-size: 1.9em;
		padding-left: 0.15em;
	}

	.warmup-question .question-text.three-words{
		/*margin-left: -0.3em;*/
	}

	.warmup-question .question-text.four-words{
		/*margin-left: -1.0em;*/
		padding-left: 0.1em;
	}

	.warmup-question .options .tick-image{
		bottom: -6%;
		right: 0%;
	}

	.warmup-question .options .cross-image{
		width: 40%;
		bottom: -6%;
		right: 6%;
	}

	.warmup .result-content-text, .game-one .result-content-text, .game-two .result-content-text,
	.game-three .result-content-text{
		margin: auto;
		font-size: 1.6em;
		padding-bottom: 1.0em;
	}

	.warmup .result-content-text h1, .game-one .result-content-text h1, .game-two .result-content-text h1,
	.game-three .result-content-text h1{
		font-size: 3.0rem;
		line-height: 1.3em;
	}

	.warmup .result-content-text p, .game-one .result-content-text p, .game-two .result-content-text p,
	.game-three .result-content-text p{
		vertical-align: bottom !important;
	}

	.warmup .result-content-text .result-score,
	.game-one .result-content-text .result-score,
	.game-two .result-content-text .result-score,
	.game-three .result-content-text .result-score{
		font-size: 9.0rem;
		line-height: 0.9em;
		margin-left: 0.05em;
	}

	.warmup .result-content-text .result-class-text,
	.game-one .result-content-text .result-class-text,
	.game-two .result-content-text .result-class-text,
	.game-three .result-content-text .result-class-text{
		margin-top: 0.9em;
	}

	.warmup .result-content-text .result-class,
	.game-one .result-content-text .result-class,
	.game-two .result-content-text .result-class,
	.game-three .result-content-text .result-class{
		font-size: 3.0rem;
		padding-left: 0.4em;
		padding-right: 0em;
		padding-top: 0.2em;
		padding-bottom: 0.2em;
		margin-left: 0.3em;
	}
}

/*==================*/
/*	Article
/*==================*/
.article-intro{
	padding-top: 6%;
	padding-left: 8%;
	padding-right: 8%;
	padding-bottom: 6%;
}

.article-intro-content{
	font-size: 1.2em;
	padding-right: 12%;
}

.article-intro-content h1{
	margin-bottom: 4%;
}

.article-intro-content p{
	margin-bottom: 1.4em;
}

.article-intro-content #annotation-text-1{
	width: auto;
}

#article-annotation1, #article-annotation2{
	cursor: pointer;
}

#article-annotation1:hover > #article-annotation1-text, #article-annotation2:hover > #article-annotation2-text{
	display: block !important;
	left: 0px;
	top: 2.0em;

	width: 30em;

	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 8px;
	padding-right: 8px;
	line-height: 1.4em;

	z-index: 999;
}

#mobile-article-annotation-text div{
	margin-top: 1.0em;
	margin-bottom: 1.0em;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 8px;
	padding-right: 8px;
	line-height: 1.4em;
}

.article-intro .practice-button{
	padding-top: 12%;
}

.article-intro .practice-button .book-image img{
	width: 70%;
	height: auto;
}

.article-intro .practice-button button{
	margin-top: 40px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 16px;
	padding-right: 16px;
}

.article-intro .practice-button button img{
	width: auto;
	height: auto;
	margin-top: -3px;
	padding-right: 0.4em;
}

@media (max-width: 991px){

	.article-intro h1{
		font-size: 4.8rem;
		line-height: 1.5em;
	}

	.article-intro{
		font-size: 1.8em;
	}

	.article-intro-content{
		padding-right: 0px;
	}

	.article-intro .practice-button{
		padding-top: 4%;
	}

	.article-intro .start-practice-button{
		position: absolute;
		top: 0px;
		left: 0px;
		font-size: 1.2em;
	}

	.article-intro .start-practice-button a{
		width: 100%;
		height: 100%;
	}

	.article-intro .practice-button .book-image{
		text-align: right;
		width: auto;
	}

	.article-intro .practice-button .book-image img{
		width: 25%;
		height: auto;
	}
}

/*==================*/
/*	Game One
/*==================*/
.game-one-instruction{
	padding-left: 7%;
	padding-right: 7%;
}

.warmup-instruction, .game-one-instruction, .game-two-instruction, .game-three-instruction{
	font-size: 1.1em;
}

.game-one-question{
	font-size: 4.6em;
	vertical-align: middle;
}

.game-one-content .bg-word{
	display: inline-block;
	width: 1.6em;
	height: 1.6em;
}

.game-one-content .next-button, .game-two-content .next-button, .game-three-content .next-button{
	margin: 0px;
	bottom: 2.3%;
	left: -16px;
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 8px;
	padding-right: 8px;
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: 1.2em;
}

.game-one-content .next-button img, .game-two-content .next-button img,
.game-three-content .next-button img{
	width: 0.9em;
	margin-left: -5px;
	margin-bottom: 4px;
}

.word-preview-image{
	width: 1.6em;
	height: 1.6em;
	margin-top: -16px;
}

.game-one-question-block{
	top: 50%;
	left: 45%;
	width: 100%;

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

.game-one-content .options{
	margin-top: 50px;
	padding-left: 80px;
}

.game-one-content .option{
	width: 60%;
}

.game-one .result-table, .game-two .result-table, .game-three .result-table{
	padding-left: 6%;
	padding-right: 6%;
	padding-top: 6%;
	padding-bottom: 6%;
}

.game-one .result-table table, .game-two .result-table table, .game-three .result-table table{
	width: 100%;
}

.game-one .result-table td, .game-two .result-table td, .game-three .result-table td{
	border: 2px solid white;
	font-weight: 400;
}

.game-one .result-table table, .game-two .result-table table, .game-three .result-table table{
	border-left: 2px solid #FFFCEF;
	border-right: 2px solid rgba(255, 252, 239, 0.4);
}

.game-one .result-table table, .game-two .result-table table, .game-three .result-table table{
	border: none;
	font-size: 0.9em;
	font-weight: 500;
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.game-one .result-table th:nth-child(1), .game-two .result-table th:nth-child(1),
.game-three .result-table th:nth-child(1){
	padding-left: 0px;
}

.game-one .result-table th:nth-child(4), .game-two .result-table th:nth-child(4),
.game-three .result-table th:nth-child(4){
	padding-right: 0px;
}

.game-one .result-table th:nth-child(odd) .table-head,
.game-two .result-table th:nth-child(odd) .table-head,
.game-three .result-table th:nth-child(odd) .table-head{
	background-color: #FFFCEF;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.game-one .result-table th:nth-child(even) .table-head,
.game-two .result-table th:nth-child(even) .table-head,
.game-three .result-table th:nth-child(even) .table-head{
	background-color: rgba(255, 252, 239, 0.4);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.result-table .inline-svg{
	width: 1.1em;
	padding-left: 0.025em;
	padding-right: 0.025em;
	padding-bottom: 0.25em;
}

/*.game-one .result-table tr:nth-child(odd){
	background-color: rgba(255, 252, 239, 0.4);
}*/

.game-one .result-table .question-no-column,
.game-two .result-table .question-no-column,
.game-three .result-table .question-no-column{
	width: 4.2em;
	font-weight: 500;
}

.game-one .result-table .choice-word,
.game-two .result-table .choice-word,
.game-three .result-table .choice-word{
	margin-left: 0.1em;
	margin-right: 0.1em;
}

.game-one .result-table .choice-column, .game-one .result-table .answer-column,
.game-two .result-table .choice-column, .game-two .result-table .answer-column,
.game-three .result-table .choice-column, .game-three .result-table .answer-column{
	font-size: 2.5rem;
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
	vertical-align: middle;
	padding-left: 0.3em;
	min-width: 8.0em;
}

.game-two .result-table .choice-column,
.game-three .result-table .choice-column{
	min-width: 1.0em;
}

.game-one .result-table .choice-column img,
.game-two .result-table .choice-column img,
.game-three .result-table .choice-column img{
	width: 4.6rem;
	margin-top: -0.2em;
	margin-left: -0.3em;
	margin-right: -0.3em;
	vertical-align: middle;
}

.game-one .result-table .choice-column .flex1,
.game-two .result-table .choice-column .flex1,
.game-three .result-table .choice-column .flex1{
	padding-top: 0.2em;
	padding-bottom: -0.2em;
}

.game-one .result-table .tick-image img, .game-one .result-table .cross-image img,
.game-two .result-table .tick-image img, .game-two .result-table .cross-image img,
.game-three .result-table .tick-image img, .game-three .result-table .cross-image img{
	vertical-align: middle;
	margin: auto;
	margin-right: 0.6em;
}

.game-two .result-table .tick-image img, .game-two .result-table .cross-image img,
.game-three .result-table .tick-image img, .game-three .result-table .cross-image img{
	margin-right: 0.3em;
}

.game-one .result-table .tick-image img,
.game-two .result-table .tick-image img,
.game-three .result-table .tick-image img{
	padding: 0.3em;
}

.game-one .result-table .cross-image img,
.game-two .result-table .cross-image img,
.game-three .result-table .cross-image img{
	padding: 0.4em;
}

.game-one .result-table .explanation-column,
.game-two .result-table .explanation-column,
.game-three .result-table .explanation-column{
	padding-left: 1.0em;
}

.game-one .result-table tr:nth-child(5), .game-one .result-table tr:nth-child(6), .game-one .result-table tr:nth-child(7),
.game-one .result-table tr:nth-child(11), .game-one .result-table tr:nth-child(12), .game-one .result-table tr:nth-child(13),
.game-two .result-table tr:nth-child(4), .game-two .result-table tr:nth-child(5),
.game-two .result-table tr:nth-child(8), .game-two .result-table tr:nth-child(9),
.game-three .result-table tr:nth-child(12), .game-three .result-table tr:nth-child(13),
.game-three .result-table tr:nth-child(14), .game-three .result-table tr:nth-child(15),
.game-three .result-table tr:nth-child(16), .game-three .result-table tr:nth-child(17),
.game-three .result-table tr:nth-child(18), .game-three .result-table tr:nth-child(19),
.game-three .result-table tr:nth-child(20), .game-three .result-table tr:nth-child(21){
	background-color: rgba(255, 252, 239, 0.4);
}

.result-table .bottom-buttons{
	margin-top: 2.5em;
}

.result-table .bottom-buttons button{
	width: 100%;
	padding-top: 1.2em;
	padding-bottom: 1.2em;
	font-size: 1.5em;
}

.result-table .bottom-buttons .text-left{
	padding-right: 1.0em;
}

.result-table .bottom-buttons .text-center{
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.result-table .bottom-buttons .text-right{
	padding-left: 1.0em;
}

@media screen and (orientation:landscape) and (max-width: 991px){
	.game-one-content .options{
		margin-top: 40px;
		padding-left: 60px;
		height: 80px;
	}

	.game-one-content .bg-option, .game-one-content .bg-option-correct{
		width: 100%;
		height: 100%;
	}

	.game-one-content .option{
		/*width: 70%;*/
		width: 80px;
		height: 100%;
	}
}

/*==================*/
/*	Game Two
/*==================*/
.game-two-instruction, .game-three-instruction{
	padding-top: 5%;
	padding-left: 4%;
}

.game-two-question, .game-three-question{
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 100;
}

.game-two-question p, .game-three-question p{
	font-size: 1.3em;
}

.game-two-question-block, .game-three-question-block, .chance-label-container{
	padding-top: 15%;
	padding-left: 8%;
	padding-right: 25%;
	margin: auto;
}

.game-two-question-block button, .game-three-question-block button{
	/*margin-left: 0.04em;
	margin-right: 0.04em;*/
	margin-bottom: 0.1em;
}

/*.game-two-question img{
	width: 1.5em;
	margin-left: -5px;
	margin-right: -5px;
	margin-top: -3px;
}*/

.game-two-question img,  .game-three-question img{
	width: auto;
	height: 21px;
	margin-left: -0.01em;
	margin-right: -0.01em;
	margin-bottom: 0.2em;
	/*margin-left: -0.05em;
	margin-right: -0.05em;*/
}

.game-two-question .chance-label-container, .game-three-question .chance-label-container{
	width: 100%;
	bottom: 30%;
	padding-top: 15%;
	padding-left: 8%;
	padding-right: 25%;

	pointer-events: none;
}

.game-two-question .chance-label, .game-three-question .chance-label{
	width: max-content;
	margin: auto;

	padding-left: 1.2em;
	padding-right: 1.0em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

@media (max-width: 991px){
	.game-two-question-block, .game-three-question-block{
		padding-top: 10%;
	}

	.game-two-question img,  .game-three-question img{
		/*margin-bottom: 0.1em;*/
	}

}

/*==================*/
/*	Article
/*==================*/

.article-sections{
	padding-top: 4%;
	padding-left: 6%;
	padding-right: 6%;
	font-size: 1.2em;
}

.article-sections .icons{
	padding-top: 4%;
	padding-left: 2%;
	padding-right: 2%;
	padding-bottom: 2%;
}

.article-sections .icon-title{
	padding-left: 0.5em;
}

.article-sections .icon{
	display: inline-block;
	width: 23%;
	margin-bottom: 40px;
}

.article-sections .icon button{
	width: 70%;
	margin-bottom: 20px;
}

.article-sections .icon-simplified{
	margin-left: 3%;
}

@media (max-width: 991px){
	.article-sections-content{
		font-size: 1.8em;
	}

	.article-sections .icons{
		padding-top: 10%;
		padding-left: 0px;
		padding-right: 0px;
	}

	.article-sections .icons br{
		display: none;
	}

	.article-sections .icon-title{
		font-size: 1.2em;
	}

	.article-sections .icon button{
		width: 85%;
	}

	.article-sections .icon{
		width: 48%;
	}

	.article-sections .icon-simplified{
		margin-left: 0px;
	}
}

/*==================*/
/*	Instagram
/*==================*/
.instagram{
	background-image: url('../image/bg11.png'), url('../image/bg06.jpg');
	background-repeat: no-repeat, repeat;
	background-position: right 0px bottom 10%, left top;
	background-size: auto auto, auto auto;
	min-height: 768px;
}

.instagram-content{
	position: relative;
	padding-top: 4%;
	padding-left: 6%;
	padding-right: 6%;
	padding-bottom: 4%;
	font-size: 1.2em;
}

.instagram h1{
	font-size: 3.0rem;
	margin-bottom: 40px;
}

@media (max-width: 991px){
	.instagram{
		background-position: right 0px bottom 10%, left top;
		padding-bottom: 30%;
	}

	.instagram-content h1{
		font-size: 4.8rem;
	}

	.instagram-content{
		font-size: 1.8em;
		padding-top: 6%;
		padding-left: 8%;
		padding-right: 8%;
	}
}

/*==================*/
/*	Article Section
/*==================*/
.article-section-content{
	padding-top: 50px;
	padding-left: 100px;
	padding-right: 0px;
	padding-bottom: 10px;
	font-size: 1.2em;
}

.article-section-content .bg-book{
	padding-left: 80px;
	padding-right: 80px;
	padding-top: 80px;
	padding-bottom: 50px;
	width: 100%;
	min-height: 75vh;
}

.article-section-content .bg-book img{
	height: 26%;
	width: auto;
}

.article-section-content .bg-book h2{
	font-size: 1.8em;
	margin-top: 0.7em;
	padding-left: 0.4em;
}

.article-section-content .bg-book p{
	margin-bottom: 1.2em;
}

.article-section-content .button-section a{
	writing-mode: vertical-rl;
	text-orientation: upright;
}

.article-section-content .button-section .bg-memo{
	width: 14.1em;
	padding-top: 0.5em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 1.0em;
	margin: auto;
	margin-top: 5.0em;
}

.article-section-content .button-section .bg-memo span{
	font-size: 1.4em;
	padding-bottom: 0.2em;
}

.article-section-content .button-section .bg-memo-1 a,
.article-section-content .button-section .bg-memo-2 a,
.article-section-content .button-section .bg-memo-3 a{
	padding-top: 2.5em;
	padding-bottom: 1.3em;
	padding-left: 0.3em;
}

@media (max-width: 991px){
	.article-section-content{
		padding-left: 8%;
		padding-right: 8%;
		min-height: auto;
	}

	.article-section-content .bg-book{
		min-height: auto;
		margin: auto;
	}

	.article-section-content .bg-book img{
		height: 20vw;
	}

	.article-section-content .button-section .bg-memo{
		width: 15.0em;
		margin: auto;
		margin-top: 3.0em;
	}
}

@media (min-width: 992px) and (max-width: 1024px){
	.article-section-content{
		padding-left: 4%;
		padding-right: 2%;
	}

	.article-section-content .bg-book{
		padding-left: 60px;
		padding-right: 60px;
	}

	.article-section-content .bg-book img{
		height: 20%;
	}
}

/*==================*/
/*	Feedback
/*==================*/
.feedback-content{
	min-height: 90%;
	font-size: 1.1em;
}

.feedback-content .feedback-form{
	padding-top: 4%;
	padding-left: 1%;
	padding-right: 1%;
	padding-bottom: 4%;
}

.feedback-content .form-header{
	font-size: 1.3em;
	line-height: 1.45em;
	margin-bottom: 2em;
}

.feedback-content label{
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 1.0em;
	padding-right: 0.4em;
	min-width: 362px;
}

.feedback-content .rating-buttons .flex1{
	border-top: 3px solid rgb(255, 249, 222);
	border-bottom: 3px solid rgb(255, 249, 222);
	border-left: 1.5px solid rgb(255, 249, 222);
	border-right: 1.5px solid rgb(255, 249, 222);
	padding-top: 0.6em;
	padding-bottom: 0.6em;
}

.feedback-content .rating-buttons .flex1:nth-child(1){
	border-left: 3px solid rgb(255, 249, 222);
}

.feedback-content .rating-buttons .flex1:nth-child(5){
	border-right: 3px solid rgb(255, 249, 222);
}

.feedback-content .rating-buttons{
	margin-bottom: 2.5em;
}

.feedback-content textarea{
	width: 100%;
	resize: none;
	font-size: 0.9em;
	padding: 0.5em;
}

.feedback-content .submit-button{
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 2.0em;
	padding-right: 2.0em;
}

.feedback-content .feedback-submitted{
	padding-top: 4%;
}

.feedback-content .feedback-submitted .bg-feedback-submitted{
	height: 400px;
}

.feedback-content .feedback-submitted-text{
	left: 51%;
	top: 55px;
	font-size: 1.15em;

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

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

	.feedback-content .feedback-form{
		padding-left: 6%;
		padding-right: 6%;
	}

	.feedback-content .form-header br{
		display: none;
	}

	.feedback-content .feedback-submitted .bg-feedback-submitted{
		height: 485px;
	}

	.feedback-content .feedback-submitted-text{
		font-size: 0.95em;
	}
}

@media (min-width: 992px) and (max-width: 1100px){
	.feedback-content .feedback-form{
		padding-left: 2%;
		padding-right: 2%;
	}
}

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

.report .dark-gray, .questions .dark-gray{
	color: #626262;
}

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

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

.report table th, .questions table th{
	border: 1px solid #000000;
}

.report table td, .questions table td{
	min-width: 3em !important;
	max-width: 50% !important;
	padding-left: 0.5em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	border: 1px solid #626262;
}

.report td img, .questions td img{
	max-width: 2.5em;
	height: auto;
}

.report td .word-image, .questions td .word-image{
	width: 1em !important;
	height: auto;
	padding-bottom: 0.2em;
}

.questions .game-two-answer-image, .questions .inline-svg{
	width: 1em;
	height: auto;
}

.questions .inline-svg{
	padding-bottom: 0.25em;
}
